.data-privacy-box { display: none; /* Initial state */ position: fixed; bottom: 20px; right: 20px; left: 20px; max-width: 450px; margin: 0 auto; background-color: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); padding: 25px; z-index: 1000; font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: #333; line-height: 1.6; animation: fadeIn 0.5s ease-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .data-privacy-box h3 { font-size: 22px; margin-top: 0; margin-bottom: 15px; color: #222; font-weight: 600; } .data-privacy-box p { font-size: 15px; margin-bottom: 20px; } .data-privacy-box a { color: #007bff; text-decoration: none; font-weight: 500; } .data-privacy-box a:hover { text-decoration: underline; } .data-privacy-box .button-group { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; } .data-privacy-box button { padding: 12px 20px; border: none; border-radius: 8px; cursor: pointer; font-size: 15px; font-weight: 600; transition: background-color 0.2s ease, transform 0.1s ease; flex-grow: 1; min-width: 120px; } .data-privacy-box .accept-all-btn { background-color: #007bff; color: #fff; } .data-privacy-box .accept-all-btn:hover { background-color: #0056b3; transform: translateY(-1px); } .data-privacy-box .manage-settings-btn { background-color: #e9ecef; color: #333; } .data-privacy-box .manage-settings-btn:hover { background-color: #dee2e6; transform: translateY(-1px); } .data-privacy-box .reject-all-btn { background-color: #dc3545; color: #fff; } .data-privacy-box .reject-all-btn:hover { background-color: #c82333; transform: translateY(-1px); } .data-privacy-box .save-preferences-btn { background-color: #28a745; color: #fff; } .data-privacy-box .save-preferences-btn:hover { background-color: #218838; transform: translateY(-1px); } .data-privacy-box .settings-panel { display: none; margin-top: 25px; padding-top: 20px; border-top: 1px solid #eee; } .data-privacy-box .setting-item { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #f8f9fa; } .data-privacy-box .setting-item:last-child { margin-bottom: 0; border-bottom: none; padding-bottom: 0; } .data-privacy-box .setting-info { flex-grow: 1; margin-right: 15px; } .data-privacy-box .setting-info h4 { margin: 0 0 5px 0; font-size: 16px; color: #333; font-weight: 500; } .data-privacy-box .setting-info p { margin: 0; font-size: 13px; color: #666; } .data-privacy-box .switch { position: relative; display: inline-block; width: 48px; height: 28px; } .data-privacy-box .switch input { opacity: 0; width: 0; height: 0; } .data-privacy-box .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 28px; } .data-privacy-box .slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; } .data-privacy-box input:checked + .slider { background-color: #007bff; } .data-privacy-box input:focus + .slider { box-shadow: 0 0 1px #007bff; } .data-privacy-box input:checked + .slider:before { transform: translateX(20px); } .data-privacy-box input:disabled + .slider { background-color: #a0a0a0; cursor: not-allowed; } .data-privacy-box input:disabled + .slider:before { background-color: #e0e0e0; } @media (max-width: 768px) { .data-privacy-box { bottom: 10px; left: 10px; right: 10px; max-width: unset; width: auto; } .data-privacy-box .button-group { flex-direction: column; } .data-privacy-box button { width: 100%; min-width: unset; } } @media (min-width: 769px) { .data-privacy-box { left: auto; width: 450px; } }