/* Klaro Custom Styling - Aperta Branding */
/* Using !important to override Klaro's defaults */

:root {
  --klaro-primary: #5B4FE8 !important; /* Aperta Indigo */
  --klaro-accent: #5B4FE8 !important;
  --klaro-text: #ffffff !important;
  --klaro-bg: #050520 !important; /* Aperta Navy */
}

/* Main container */
.klaro {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* ========== COOKIE NOTICE BANNER ========== */

.klaro .cookie-notice {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  left: auto !important;
  max-width: 420px !important;
  width: calc(100% - 48px) !important;
  background-color: #050520 !important;
  background-image: linear-gradient(to bottom, rgba(91, 79, 232, 0.04), transparent) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  box-shadow: 0 -4px 32px rgba(91, 79, 232, 0.2), 0 20px 40px rgba(0, 0, 0, 0.5) !important;
  padding: 24px !important;
  animation: slideUp 0.3s ease !important;
}

.klaro .cookie-notice .cm-content {
  color: #ffffff !important;
}

.klaro .cookie-notice .cm-header {
  color: #ffffff !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  margin-bottom: 0.75rem !important;
}

.klaro .cookie-notice .cm-body {
  color: #e0e0e0 !important;
  font-size: 0.95rem !important;
  line-height: 1.5 !important;
  margin-bottom: 1rem !important;
}

/* ========== BUTTONS ========== */

.klaro .cm-btn {
  border-radius: 8px !important;
  font-weight: 500 !important;
  padding: 0.625rem 1.25rem !important;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  transition: all 0.2s ease !important;
  border: none !important;
}

/* Accept/OK button - Primary (Indigo) */
.klaro .cookie-notice .cm-btn-success,
.klaro .cm-btn-success {
  background-color: #5B4FE8 !important;
  color: white !important;
  border: none !important;
}

.klaro .cookie-notice .cm-btn-success:hover,
.klaro .cm-btn-success:hover {
  background-color: #7B72F0 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 0 15px rgba(91, 79, 232, 0.4) !important;
}

.klaro .cookie-notice .cm-btn-success:active,
.klaro .cm-btn-success:active {
  background-color: #4F46E5 !important;
  transform: translateY(0) !important;
}

/* Decline button - Secondary (Ghost style) */
.klaro .cm-btn:not(.cm-btn-success):not(.cm-link),
.klaro .cookie-notice .cm-buttons .cm-btn:not(.cm-btn-success) {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: #94A3B8 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.klaro .cm-btn:not(.cm-btn-success):not(.cm-link):hover,
.klaro .cookie-notice .cm-buttons .cm-btn:not(.cm-btn-success):hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
}

/* Learn more / Manage button - Text link style */
.klaro .cm-link {
  background-color: transparent !important;
  color: #94A3B8 !important;
  border: none !important;
  text-decoration: underline !important;
}

.klaro .cm-link:hover {
  color: #5B4FE8 !important;
}

/* ========== COOKIE MODAL ========== */

.klaro .cm-modal {
  background-color: #050520 !important;
  border: 1px solid rgba(91, 79, 232, 0.3) !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(91, 79, 232, 0.1) !important;
  animation: fadeIn 0.3s ease !important;
}

/* Modal header */
.klaro .cm-modal .cm-header {
  background: linear-gradient(135deg, #5B4FE8 0%, #7B72F0 100%) !important;
  color: white !important;
  padding: 1rem 1.5rem !important;
  border-radius: 16px 16px 0 0 !important;
  border-bottom: 1px solid rgba(91, 79, 232, 0.2) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  margin: 0 !important;
}

.klaro .cm-modal .cm-header h1 {
  font-size: 1rem !important;
  font-weight: 600 !important;
  margin: 0 !important;
}

/* Close button */
.klaro .cm-btn-close {
  color: white !important;
  opacity: 0.8 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  background: transparent !important;
  border: none !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 10 !important;
}

.klaro .cm-btn-close:hover {
  opacity: 1 !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ========== MODAL BODY ========== */

.klaro .cm-modal .cm-body {
  color: #e0e0e0 !important;
}

.klaro .cm-content {
  padding-left: 42px !important;
}

/* ========== SERVICES/PURPOSES ========== */

.klaro .cm-service,
.klaro .cm-purpose {
  margin: 1rem 0 !important;
  padding: 1rem !important;
  background-color: rgba(91, 79, 232, 0.08) !important;
  border-left: 4px solid #5B4FE8 !important;
  border-radius: 6px !important;
  border: 1px solid rgba(91, 79, 232, 0.15) !important;
}

.klaro .cm-service .cm-list-title,
.klaro .cm-purpose .cm-list-title {
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
}

.klaro .cm-service .cm-list-description,
.klaro .cm-purpose .cm-list-description {
  color: #b0b0b0 !important;
  font-size: 0.9rem !important;
  margin-top: 0.25rem !important;
}

/* ========== TOGGLE SWITCH ========== */

.klaro .cm-list-label {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}

.klaro .cm-list-title {
  padding-left: 66px !important;
  padding-right: 0.5rem !important;
}

.klaro .slider.round {
  margin-left: 16px !important;
}

.klaro .cm-list-label .slider {
  background-color: #2d2d3d !important;
}

.klaro .cm-list-input:checked + .cm-list-label .slider {
  background-color: #FF5C35 !important; /* Aperta Orange */
}

.klaro .cm-list-input.half-checked:checked + .cm-list-label .slider {
  background-color: rgba(255, 92, 53, 0.5) !important;
}

/* ========== LINKS ========== */

.klaro a {
  color: #A5B4FC !important;
  text-decoration: underline !important;
  transition: color 0.2s ease !important;
}

.klaro a:hover {
  color: #C7D2FE !important;
}

/* ========== OVERLAY ========== */

.klaro .cm-bg {
  background-color: rgba(0, 0, 0, 0.7) !important;
}

/* ========== ANIMATIONS ========== */

@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ========== RESPONSIVE ========== */

@media (max-width: 768px) {
  .klaro .cookie-notice {
    padding: 1rem !important;
    max-width: 90% !important;
    width: 90% !important;
    right: 5% !important;
    left: 5% !important;
  }

  .klaro .cm-buttons {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  .klaro .cm-btn {
    width: 100% !important;
  }

  .klaro .cm-modal {
    width: calc(100% - 2rem) !important;
    max-width: calc(100% - 2rem) !important;
  }

  .klaro .cm-modal .cm-body {
    max-height: 70vh !important;
    overflow-y: auto !important;
  }
}