.user-consent-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); z-index: 9999; display: none; align-items: center; justify-content: center; } n.user-consent-modal { background-color: #ffffff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); max-width: 500px; width: 90%; padding: 2rem; box-sizing: border-box; font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: #333; display: flex; flex-direction: column; gap: 1.5rem; position: relative; z-index: 10000; max-height: 90vh; overflow-y: auto; } n.user-consent-modal h2 { font-size: 1.8rem; color: #007bff; margin-top: 0; margin-bottom: 1rem; text-align: center; } n.user-consent-modal p { font-size: 0.95rem; line-height: 1.6; margin-bottom: 1rem; } n.cookie-category { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.2rem; padding: 1rem; background-color: #f8f9fa; border-radius: 8px; border: 1px solid #e9ecef; } n.cookie-category h3 { font-size: 1.1rem; margin: 0; color: #333; display: flex; justify-content: space-between; align-items: center; cursor: pointer; } n.cookie-category h3 span { flex-grow: 1; } n.cookie-category .toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; } n.cookie-category .toggle-switch input { opacity: 0; width: 0; height: 0; } n.cookie-category .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: 0.4s; border-radius: 24px; } n.cookie-category .slider:before { position: absolute; content: ''; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: 0.4s; border-radius: 50%; } n.cookie-category input:checked + .slider { background-color: #007bff; } n.cookie-category input:focus + .slider { box-shadow: 0 0 1px #007bff; } n.cookie-category input:checked + .slider:before { transform: translateX(20px); } n.cookie-category p.description { font-size: 0.85rem; color: #666; margin-top: 0.5rem; margin-bottom: 0; max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; } n.cookie-category.expanded p.description { max-height: 100px; /* Adjust based on content */ } n.cookie-category .expand-icon { font-size: 1.2rem; margin-left: 0.5rem; transition: transform 0.3s ease; } n.cookie-category.expanded .expand-icon { transform: rotate(90deg); } n.user-consent-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 1.5rem; } n.user-consent-buttons button { padding: 0.8rem 1.5rem; border: none; border-radius: 8px; font-size: 1rem; cursor: pointer; transition: background-color 0.3s ease, transform 0.2s ease; flex: 1 1 auto; min-width: 120px; } n.user-consent-buttons .accept-all-btn { background-color: #007bff; color: white; } n.user-consent-buttons .accept-all-btn:hover { background-color: #0056b3; transform: translateY(-2px); } n.user-consent-buttons .reject-all-btn { background-color: #6c757d; color: white; } n.user-consent-buttons .reject-all-btn:hover { background-color: #5a6268; transform: translateY(-2px); } n.user-consent-buttons .save-settings-btn { background-color: #28a745; color: white; } n.user-consent-buttons .save-settings-btn:hover { background-color: #218838; transform: translateY(-2px); } n.user-consent-modal a { color: #007bff; text-decoration: none; font-size: 0.9rem; text-align: center; margin-top: 1rem; } n.user-consent-modal a:hover { text-decoration: underline; } n@media (max-width: 768px) { .user-consent-modal { width: 95%; padding: 1.5rem; } .user-consent-modal h2 { font-size: 1.5rem; } .user-consent-buttons button { font-size: 0.9rem; padding: 0.7rem 1.2rem; min-width: unset; flex: 1 1 100%; } .cookie-category h3 { font-size: 1rem; } } n@media (max-width: 480px) { .user-consent-modal { border-radius: 8px; padding: 1rem; gap: 1rem; } .user-consent-modal h2 { font-size: 1.3rem; } .user-consent-modal p { font-size: 0.85rem; } .cookie-category { padding: 0.75rem; } .user-consent-buttons { flex-direction: column; gap: 0.5rem; } .user-consent-buttons button { width: 100%; } }