.cookie-consent-modal { display: none; position: fixed; bottom: 20px; right: 20px; width: calc(100% - 40px); max-width: 400px; background-color: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); z-index: 1000; font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: #333; overflow: hidden; transition: all 0.3s ease-in-out; } .cookie-consent-modal.show { display: block; animation: fadeIn 0.3s ease-out forwards; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .cookie-content-wrapper { padding: 25px; } .cookie-main-view, .cookie-settings-view { display: none; } .cookie-main-view.active, .cookie-settings-view.active { display: block; } .cookie-consent-modal h3 { font-size: 1.4em; margin-top: 0; margin-bottom: 15px; color: #222; } .cookie-consent-modal p { font-size: 0.95em; line-height: 1.6; margin-bottom: 20px; color: #555; } .cookie-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } .cookie-buttons button { flex: 1 1 auto; padding: 12px 18px; border: none; border-radius: 8px; font-size: 0.9em; cursor: pointer; transition: background-color 0.2s ease, transform 0.1s ease; font-weight: 600; } .cookie-buttons button:hover { transform: translateY(-1px); } .cookie-buttons .btn-accept { background-color: #007bff; color: #fff; } .cookie-buttons .btn-accept:hover { background-color: #0056b3; } .cookie-buttons .btn-reject { background-color: #e0e0e0; color: #333; } .cookie-buttons .btn-reject:hover { background-color: #d0d0d0; } .cookie-buttons .btn-manage { background-color: #f0f0f0; color: #333; } .cookie-buttons .btn-manage:hover { background-color: #e0e0e0; } .cookie-settings-category { margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #eee; } .cookie-settings-category:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .cookie-settings-category h4 { font-size: 1.1em; margin-top: 0; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; color: #333; } .cookie-settings-category p.description { font-size: 0.85em; color: #666; margin-top: 5px; margin-bottom: 15px; } .cookie-toggle-switch { position: relative; display: inline-block; width: 40px; height: 24px; } .cookie-toggle-switch input { opacity: 0; width: 0; height: 0; } .cookie-toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: 0.4s; border-radius: 24px; } .cookie-toggle-slider:before { position: absolute; content: ''; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: white; transition: 0.4s; border-radius: 50%; } input:checked + .cookie-toggle-slider { background-color: #007bff; } input:focus + .cookie-toggle-slider { box-shadow: 0 0 1px #007bff; } input:checked + .cookie-toggle-slider:before { transform: translateX(16px); } input:disabled + .cookie-toggle-slider { opacity: 0.6; cursor: not-allowed; } .cookie-settings-buttons { display: flex; gap: 10px; margin-top: 25px; } .cookie-settings-buttons button { flex: 1 1 auto; padding: 12px 18px; border: none; border-radius: 8px; font-size: 0.9em; cursor: pointer; transition: background-color 0.2s ease, transform 0.1s ease; font-weight: 600; } .cookie-settings-buttons .btn-save { background-color: #28a745; color: #fff; } .cookie-settings-buttons .btn-save:hover { background-color: #218838; } .cookie-settings-buttons .btn-back { background-color: #f0f0f0; color: #333; } .cookie-settings-buttons .btn-back:hover { background-color: #e0e0e0; } @media (min-width: 768px) { .cookie-consent-modal { width: 400px; bottom: 30px; right: 30px; } } @media (max-width: 767px) { .cookie-consent-modal { bottom: 10px; left: 10px; right: 10px; width: auto; max-width: none; } .cookie-buttons button, .cookie-settings-buttons button { flex: 1 1 100%; } }