#privacy-consent-popup { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .privacy-consent-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); } .privacy-consent-box { position: absolute; bottom: 20px; right: 20px; background-color: #ffffff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); padding: 25px; max-width: 420px; width: calc(100% - 40px); box-sizing: border-box; animation: fadeIn 0.4s ease-out; color: #333; } @media (max-width: 768px) { .privacy-consent-box { bottom: 10px; right: 10px; left: 10px; max-width: unset; } } @media (max-width: 480px) { .privacy-consent-box { bottom: 0; left: 0; right: 0; border-radius: 12px 12px 0 0; padding: 20px; } } .privacy-consent-box h2 { margin-top: 0; font-size: 1.6em; color: #2c3e50; line-height: 1.3; } .privacy-consent-box p { font-size: 0.95em; line-height: 1.6; margin-bottom: 20px; color: #555; } .privacy-consent-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } .privacy-consent-btn { flex: 1; padding: 12px 18px; border: none; border-radius: 8px; cursor: pointer; font-size: 0.9em; font-weight: 600; transition: all 0.2s ease; white-space: nowrap; } .privacy-consent-accept-all, .privacy-consent-accept-all-settings { background-color: #4CAF50; color: #ffffff; } .privacy-consent-accept-all:hover, .privacy-consent-accept-all-settings:hover { background-color: #45a049; box-shadow: 0 4px 10px rgba(76, 175, 80, 0.3); } .privacy-consent-manage, .privacy-consent-save, .privacy-consent-back { background-color: #007bff; color: #ffffff; } .privacy-consent-manage:hover, .privacy-consent-save:hover, .privacy-consent-back:hover { background-color: #0056b3; box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3); } .privacy-consent-toggle { position: relative; display: inline-block; width: 40px; height: 24px; margin-right: 10px; vertical-align: middle; } .privacy-consent-toggle input { opacity: 0; width: 0; height: 0; } .privacy-consent-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: 0.4s; border-radius: 24px; } .privacy-consent-slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: white; transition: 0.4s; border-radius: 50%; } input:checked + .privacy-consent-slider { background-color: #2196F3; } input:focus + .privacy-consent-slider { box-shadow: 0 0 1px #2196F3; } input:checked + .privacy-consent-slider:before { transform: translateX(16px); } input:disabled + .privacy-consent-slider { opacity: 0.6; cursor: not-allowed; } .privacy-consent-options label { display: flex; align-items: center; margin-bottom: 5px; cursor: pointer; } .privacy-consent-option-text { font-weight: 600; color: #333; font-size: 1em; } .privacy-consent-option-desc { font-size: 0.85em; color: #777; margin-top: 5px; margin-bottom: 15px; padding-left: 54px; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }