:root { --shadow-strength: 0.1; --shadow-color: rgba(0, 0, 0, var(--shadow-strength)); --shadow-elevation-low: 0 1px 2px var(--shadow-color), 0 1px 1px var(--shadow-color); --shadow-elevation-medium: 0 2px 4px var(--shadow-color), 0 2px 2px var(--shadow-color); --shadow-elevation-high: 0 4px 8px var(--shadow-color), 0 4px 4px var(--shadow-color); --random-shadow: var(--shadow-elevation-medium); /* Default, JS can override */ --primary-color: #6a0dad; /* Deep Purple */ --secondary-color: #9370db; /* Medium Purple */ --text-color: #333; --bg-color: #fff; --border-radius: 12px; } .user-consent-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; z-index: 1000; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .user-consent-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(3px); } .user-consent-box { background-color: var(--bg-color); border-radius: var(--border-radius); box-shadow: var(--random-shadow); width: 90%; max-width: 500px; position: relative; z-index: 1001; padding: 25px; box-sizing: border-box; transform: translateY(0); transition: transform 0.3s ease-out, opacity 0.3s ease-out; } .user-consent-modal.hidden .user-consent-box { transform: translateY(20px); opacity: 0; } .user-consent-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 1px solid #eee; padding-bottom: 15px; } .user-consent-header h3, .user-consent-settings-panel h4 { margin: 0; color: var(--primary-color); font-size: 1.5em; font-weight: 600; } .user-consent-close-btn { background: none; border: none; font-size: 1.5em; color: #aaa; cursor: pointer; padding: 0; line-height: 1; transition: color 0.2s ease; } .user-consent-close-btn:hover { color: var(--primary-color); } .user-consent-content p, .user-consent-settings-panel p { color: var(--text-color); line-height: 1.6; margin-bottom: 20px; font-size: 0.95em; } .user-consent-actions, .user-consent-settings-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; justify-content: flex-end; } .user-consent-btn { padding: 12px 20px; border: none; border-radius: 8px; cursor: pointer; font-size: 1em; font-weight: 500; transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; flex-grow: 1; text-align: center; } .user-consent-accept-all { background-color: var(--primary-color); color: #fff; } .user-consent-accept-all:hover { background-color: var(--secondary-color); box-shadow: 0 4px 8px rgba(106, 13, 173, 0.2); } .user-consent-decline, .user-consent-settings { background-color: #f0f2f5; color: var(--text-color); } .user-consent-decline:hover, .user-consent-settings:hover { background-color: #e0e2e5; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .user-consent-settings-panel { padding-top: 10px; } .user-consent-toggle-group { margin-top: 20px; border-top: 1px solid #eee; padding-top: 20px; } .user-consent-toggle-item { margin-bottom: 25px; padding-bottom: 15px; border-bottom: 1px solid #f9f9f9; } .user-consent-toggle-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .user-consent-toggle-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .user-consent-toggle-header label { font-weight: 600; color: var(--primary-color); font-size: 1.1em; } .user-consent-status { font-size: 0.85em; color: #888; background-color: #f0f0f0; padding: 4px 8px; border-radius: 5px; } .user-consent-status-essential { background-color: #e6ffe6; color: #3c763d; } /* Toggle Switch Styles */ .user-consent-switch { position: relative; display: inline-block; width: 45px; height: 25px; } .user-consent-switch input { opacity: 0; width: 0; height: 0; } .user-consent-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; } .user-consent-slider:before { position: absolute; content: ""; height: 17px; width: 17px; left: 4px; bottom: 4px; background-color: white; transition: .4s; } input:checked + .user-consent-slider { background-color: var(--primary-color); } input:focus + .user-consent-slider { box-shadow: 0 0 1px var(--primary-color); } input:checked + .user-consent-slider:before { transform: translateX(20px); } .user-consent-slider.round { border-radius: 25px; } .user-consent-slider.round:before { border-radius: 50%; } .user-consent-settings-actions .user-consent-save-preferences { background-color: var(--primary-color); color: #fff; flex-grow: 0; width: auto; min-width: 150px; } .user-consent-settings-actions .user-consent-save-preferences:hover { background-color: var(--secondary-color); box-shadow: 0 4px 8px rgba(106, 13, 173, 0.2); } /* Responsive adjustments */ @media (max-width: 600px) { .user-consent-box { width: 95%; padding: 20px; } .user-consent-header h3, .user-consent-settings-panel h4 { font-size: 1.3em; } .user-consent-btn { padding: 10px 15px; font-size: 0.9em; flex-basis: 100%; } .user-consent-actions { flex-direction: column; } .user-consent-toggle-header label { font-size: 1em; } .user-consent-description { font-size: 0.85em; } } @media (min-width: 601px) { .user-consent-btn { flex-grow: 0; min-width: 120px; } .user-consent-actions { justify-content: flex-end; } }