.privacy-consent { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; z-index: 10000; font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .privacy-consent-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(5px); } .privacy-consent-box { background: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); width: 90%; max-width: 550px; position: relative; z-index: 10001; overflow: hidden; display: flex; flex-direction: column; max-height: 90vh; } .privacy-consent-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 25px; border-bottom: 1px solid #eee; background-color: #f9f9f9; } .privacy-consent-header h3, .privacy-consent-settings h4 { margin: 0; color: #333; font-size: 1.3em; font-weight: 600; } .privacy-consent-close-btn { background: none; border: none; font-size: 1.8em; cursor: pointer; color: #888; transition: color 0.2s ease; } .privacy-consent-close-btn:hover { color: #333; } .privacy-consent-body { padding: 25px; flex-grow: 1; overflow-y: auto; } .privacy-consent-body p { font-size: 0.95em; line-height: 1.6; color: #555; margin-bottom: 25px; } .privacy-consent-main-buttons { display: flex; flex-direction: column; gap: 12px; } .privacy-consent-btn { padding: 12px 20px; border: none; border-radius: 8px; font-size: 1em; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; font-weight: 500; } .privacy-consent-accept-all { background-color: #007bff; color: #fff; } .privacy-consent-accept-all:hover { background-color: #0056b3; } .privacy-consent-reject-all { background-color: #dc3545; color: #fff; } .privacy-consent-reject-all:hover { background-color: #c82333; } .privacy-consent-manage, .privacy-consent-save, .privacy-consent-back { background-color: #6c757d; color: #fff; } .privacy-consent-manage:hover, .privacy-consent-save:hover, .privacy-consent-back:hover { background-color: #5a6268; } .privacy-consent-settings { padding: 25px; flex-grow: 1; overflow-y: auto; } .privacy-consent-settings h4 { margin-bottom: 20px; font-size: 1.2em; color: #333; } .privacy-consent-setting-group { margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px dashed #eee; } .privacy-consent-setting-group:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .privacy-consent-setting-header { display: flex; align-items: center; margin-bottom: 10px; } .privacy-consent-setting-header h5 { margin: 0 0 0 10px; font-size: 1.05em; color: #444; } .privacy-consent-setting-group p { font-size: 0.85em; color: #666; line-height: 1.5; margin-left: 50px; } .privacy-consent-always-active { font-size: 0.8em; color: #888; font-weight: normal; } .privacy-consent-toggle { position: relative; display: inline-block; width: 40px; height: 24px; } .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%; } .privacy-consent-toggle input:checked + .privacy-consent-slider { background-color: #007bff; } .privacy-consent-toggle input:focus + .privacy-consent-slider { box-shadow: 0 0 1px #007bff; } .privacy-consent-toggle input:checked + .privacy-consent-slider:before { transform: translateX(16px); } .privacy-consent-toggle input:disabled + .privacy-consent-slider { background-color: #a0a0a0; cursor: not-allowed; } .privacy-consent-toggle input:disabled + .privacy-consent-slider:before { background-color: #e0e0e0; } .privacy-consent-settings-buttons { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; padding-top: 20px; border-top: 1px solid #eee; } @media (min-width: 768px) { .privacy-consent-main-buttons, .privacy-consent-settings-buttons { flex-direction: row; justify-content: flex-end; } .privacy-consent-btn { width: auto; } .privacy-consent-main-buttons .privacy-consent-accept-all { order: 1; } .privacy-consent-main-buttons .privacy-consent-reject-all { order: 2; } .privacy-consent-main-buttons .privacy-consent-manage { order: 3; } .privacy-consent-settings-buttons .privacy-consent-save { order: 1; } .privacy-consent-settings-buttons .privacy-consent-back { order: 2; } } @media (max-width: 480px) { .privacy-consent-box { width: 95%; margin: 10px; } .privacy-consent-header, .privacy-consent-body, .privacy-consent-settings { padding: 15px 20px; } .privacy-consent-header h3, .privacy-consent-settings h4 { font-size: 1.1em; } .privacy-consent-body p { font-size: 0.9em; } .privacy-consent-btn { padding: 10px 15px; font-size: 0.9em; } .privacy-consent-setting-group p { margin-left: 0; } }