:root { --primary-color: #007bff; --secondary-color: #6c757d; --text-color: #343a40; --bg-color: #ffffff; --border-color: #e9ecef; --shadow-color: rgba(0, 0, 0, 0.1); } .privacy-consent-popup { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .privacy-consent-popup.is-visible { opacity: 1; visibility: visible; } .privacy-consent-popup__container { background-color: var(--bg-color); border-radius: 12px; box-shadow: 0 10px 30px var(--shadow-color); width: 90%; max-width: 500px; padding: 25px; position: relative; transform: translateY(20px); opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; } .privacy-consent-popup.is-visible .privacy-consent-popup__container { transform: translateY(0); opacity: 1; } .privacy-consent-popup__header { font-size: 1.5em; font-weight: bold; margin-bottom: 15px; color: var(--text-color); } .privacy-consent-popup__body { font-size: 0.95em; line-height: 1.6; color: var(--text-color); margin-bottom: 20px; } .privacy-consent-popup__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; } .privacy-consent-popup__button { padding: 10px 20px; border: none; border-radius: 8px; cursor: pointer; font-size: 0.9em; font-weight: 600; transition: background-color 0.2s ease, color 0.2s ease; } .privacy-consent-popup__button--primary { background-color: var(--primary-color); color: #fff; } .privacy-consent-popup__button--primary:hover { background-color: #0056b3; } .privacy-consent-popup__button--secondary { background-color: var(--secondary-color); color: #fff; } .privacy-consent-popup__button--secondary:hover { background-color: #545b62; } .privacy-consent-popup__button--link { background-color: transparent; color: var(--primary-color); padding: 0; margin-left: 5px; text-decoration: underline; } .privacy-consent-popup__button--link:hover { text-decoration: none; } .privacy-consent-popup__settings { display: none; } .privacy-consent-popup__settings-header { font-size: 1.3em; font-weight: bold; margin-bottom: 15px; color: var(--text-color); } .privacy-consent-popup__category { margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid var(--border-color); } .privacy-consent-popup__category:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .privacy-consent-popup__category-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .privacy-consent-popup__category-title { font-weight: 600; color: var(--text-color); } .privacy-consent-popup__category-description { font-size: 0.85em; color: var(--secondary-color); line-height: 1.5; } .privacy-consent-popup__toggle { position: relative; display: inline-block; width: 40px; height: 22px; } .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: var(--secondary-color); transition: 0.4s; border-radius: 22px; } .privacy-consent-popup__slider:before { position: absolute; content: ''; height: 16px; width: 16px; left: 3px; bottom: 3px; background-color: white; transition: 0.4s; border-radius: 50%; } input:checked + .privacy-consent-popup__slider { background-color: var(--primary-color); } input:focus + .privacy-consent-popup__slider { box-shadow: 0 0 1px var(--primary-color); } input:checked + .privacy-consent-popup__slider:before { transform: translateX(18px); } input:disabled + .privacy-consent-popup__slider { opacity: 0.6; cursor: not-allowed; } @media (min-width: 768px) { .privacy-consent-popup__container { max-width: 650px; padding: 35px; } .privacy-consent-popup__header { font-size: 1.8em; } .privacy-consent-popup__body { font-size: 1em; } .privacy-consent-popup__button { padding: 12px 25px; font-size: 1em; } } @media (max-width: 480px) { .privacy-consent-popup__container { padding: 20px; width: 95%; } .privacy-consent-popup__header { font-size: 1.3em; } .privacy-consent-popup__body { font-size: 0.9em; } .privacy-consent-popup__actions { flex-direction: column; align-items: stretch; } .privacy-consent-popup__button { width: 100%; } }