#cookie-consent-modal { display: none; /* Hidden by default */ position: fixed; bottom: 0; left: 0; width: 100%; background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); /* Modern gradient */ color: #fff; padding: 20px; box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.2); z-index: 9999; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; transform: translateY(100%); /* Start off-screen */ transition: transform 0.5s ease-out; border-top-left-radius: 15px; border-top-right-radius: 15px; max-height: 90vh; /* Limit height for smaller screens */ overflow-y: auto; /* Scrollable if content is too long */ box-sizing: border-box; } #cookie-consent-modal.show { transform: translateY(0); /* Slide in */ } #cookie-consent-modal h3 { margin-top: 0; font-size: 1.8em; font-weight: 600; color: #fff; text-align: center; } #cookie-consent-modal p { font-size: 1em; margin-bottom: 20px; color: rgba(255, 255, 255, 0.9); text-align: center; } #cookie-consent-modal .privacy-link { color: #f0f0f0; text-decoration: underline; } .cookie-banner-content, .cookie-settings-content { max-width: 900px; margin: 0 auto; padding: 10px; } .cookie-actions, .settings-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 20px; } .btn { padding: 12px 25px; border: none; border-radius: 8px; cursor: pointer; font-size: 1em; font-weight: 600; transition: background-color 0.3s ease, transform 0.2s ease; flex-grow: 1; /* Allow buttons to grow */ max-width: 200px; /* Limit button width */ } .btn.accept-all { background-color: #28a745; /* Green */ color: #fff; } .btn.accept-all:hover { background-color: #218838; transform: translateY(-2px); } .btn.reject-all { background-color: #dc3545; /* Red */ color: #fff; } .btn.reject-all:hover { background-color: #c82333; transform: translateY(-2px); } .btn.manage-prefs, .btn.save-settings, .btn.back-to-banner { background-color: #007bff; /* Blue */ color: #fff; } .btn.manage-prefs:hover, .btn.save-settings:hover, .btn.back-to-banner:hover { background-color: #0056b3; transform: translateY(-2px); } .cookie-settings-content h3 { margin-bottom: 25px; font-size: 2em; text-align: center; color: #fff; } .cookie-category { background-color: rgba(255, 255, 255, 0.1); border-radius: 10px; padding: 15px 20px; margin-bottom: 15px; } .cookie-category h4 { margin: 0; font-size: 1.2em; color: #fff; } .cookie-category p { font-size: 0.9em; color: rgba(255, 255, 255, 0.8); margin-top: 10px; text-align: left; } .category-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } /* Toggle Switch Styles */ .toggle-switch { position: relative; display: inline-block; width: 50px; height: 28px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: 0.4s; border-radius: 28px; } .slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 4px; bottom: 4px; background-color: white; transition: 0.4s; border-radius: 50%; } input:checked + .slider { background-color: #28a745; /* Green when checked */ } input:focus + .slider { box-shadow: 0 0 1px #28a745; } input:checked + .slider:before { transform: translateX(22px); } input:disabled + .slider { background-color: #6c757d; /* Grey for disabled */ cursor: not-allowed; } input:disabled + .slider:before { background-color: #f0f0f0; } /* Responsive adjustments */ @media (min-width: 768px) { #cookie-consent-modal { max-width: 600px; left: 50%; transform: translate(-50%, 100%); border-radius: 15px 15px 0 0; bottom: 0; padding: 30px; } #cookie-consent-modal.show { transform: translate(-50%, 0); } #cookie-consent-modal h3 { font-size: 2.2em; } #cookie-consent-modal p { font-size: 1.1em; } .cookie-actions, .settings-actions { flex-direction: row; justify-content: space-between; } .btn { flex-grow: 0; min-width: 180px; } .cookie-settings-content h3 { font-size: 2.5em; } .cookie-category { padding: 20px 25px; } } @media (max-width: 767px) { .btn { width: 100%; max-width: none; } .cookie-actions, .settings-actions { flex-direction: column; } #cookie-consent-modal { padding: 15px; } #cookie-consent-modal h3 { font-size: 1.5em; } #cookie-consent-modal p { font-size: 0.95em; } }