.privacy-consent-popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } .privacy-consent-popup.is-visible { opacity: 1; visibility: visible; } .privacy-consent-popup-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); } .privacy-consent-popup-content { position: relative; background-color: #ffffff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); max-width: 520px; width: 90%; padding: 30px; box-sizing: border-box; transform: translateY(20px); transition: transform 0.3s ease; } .privacy-consent-popup.is-visible .privacy-consent-popup-content { transform: translateY(0); } .privacy-consent-popup-title { font-size: 24px; color: #333; margin-bottom: 15px; font-weight: 700; } .privacy-consent-popup-description, .privacy-consent-popup-setting-description { font-size: 15px; color: #555; line-height: 1.6; margin-bottom: 25px; } .privacy-consent-popup-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 20px; } .privacy-consent-popup-btn { padding: 12px 20px; border: none; border-radius: 8px; cursor: pointer; font-size: 15px; font-weight: 600; transition: background-color 0.2s ease, color 0.2s ease; } .privacy-consent-popup-accept-all { background-color: #007bff; color: #fff; } .privacy-consent-popup-accept-all:hover { background-color: #0056b3; } .privacy-consent-popup-reject-all { background-color: #e9ecef; color: #333; } .privacy-consent-popup-reject-all:hover { background-color: #dae0e5; } .privacy-consent-popup-manage, .privacy-consent-popup-back { background-color: #6c757d; color: #fff; } .privacy-consent-popup-manage:hover, .privacy-consent-popup-back:hover { background-color: #5a6268; } .privacy-consent-popup-save-preferences { background-color: #28a745; color: #fff; } .privacy-consent-popup-save-preferences:hover { background-color: #218838; } .privacy-consent-popup-setting-group { margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #eee; } .privacy-consent-popup-setting-group:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .privacy-consent-popup-setting-header { display: flex; align-items: center; margin-bottom: 10px; } .privacy-consent-popup-setting-header h3 { font-size: 18px; color: #333; margin: 0 0 0 15px; font-weight: 600; } .privacy-consent-popup-toggle { position: relative; display: inline-block; width: 45px; height: 25px; } .privacy-consent-popup-toggle input { opacity: 0; width: 0; height: 0; } .privacy-consent-popup-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: 0.3s; border-radius: 25px; } .privacy-consent-popup-slider:before { position: absolute; content: ""; height: 19px; width: 19px; left: 3px; bottom: 3px; background-color: white; transition: 0.3s; border-radius: 50%; } .privacy-consent-popup-toggle input:checked + .privacy-consent-popup-slider { background-color: #007bff; } .privacy-consent-popup-toggle input:focus + .privacy-consent-popup-slider { box-shadow: 0 0 1px #007bff; } .privacy-consent-popup-toggle input:checked + .privacy-consent-popup-slider:before { transform: translateX(20px); } .privacy-consent-popup-toggle input:disabled + .privacy-consent-popup-slider { background-color: #a0a0a0; cursor: not-allowed; } .privacy-consent-popup-toggle input:disabled + .privacy-consent-popup-slider:before { background-color: #f0f0f0; } @media (max-width: 768px) { .privacy-consent-popup-content { max-width: 95%; padding: 20px; } .privacy-consent-popup-title { font-size: 20px; } .privacy-consent-popup-description, .privacy-consent-popup-setting-description { font-size: 14px; } .privacy-consent-popup-btn { width: 100%; text-align: center; padding: 10px 15px; } .privacy-consent-popup-actions { flex-direction: column; } .privacy-consent-popup-setting-header h3 { font-size: 16px; } } @media (max-width: 480px) { .privacy-consent-popup-content { border-radius: 0; height: 100%; width: 100%; max-width: none; margin: 0; align-self: flex-end; transform: translateY(100%); transition: transform 0.3s ease; } .privacy-consent-popup.is-visible .privacy-consent-popup-content { transform: translateY(0); } .privacy-consent-popup { align-items: flex-end; } .privacy-consent-popup-title { font-size: 22px; } }