/* Cookie Banner Styles */
[data-cookie-banner] {
  transition: opacity 0.3s ease, transform 0.3s ease;
  display: none;
}

[data-cookie-banner].show-banner {
  display: block;
}

body.cookie-banner-visible {
  padding-bottom: 120px;
}

@media (min-width: 1024px) {
  body.cookie-banner-visible {
    padding-bottom: 80px;
  }
}

/* Cookie Modal Styles */
[data-cookie-modal] {
  transition: opacity 0.3s ease;
  display: none !important;
}

[data-cookie-modal].show-modal {
  display: flex !important;
}

[data-cookie-modal-backdrop] {
  transition: opacity 0.3s ease;
}

/* Cookie Toggle Switch */
[data-cookie-toggle] {
  appearance: none;
  cursor: pointer;
}

[data-cookie-toggle]:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}



/* Smooth transitions for toggle switches */
label:has([data-cookie-toggle]) {
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

label:has([data-cookie-toggle]) span {
  transition: transform 0.2s ease;
}

/* Focus styles for accessibility */
[data-cookie-banner] button:focus,
[data-cookie-modal] button:focus,
[data-cookie-modal] [data-cookie-toggle]:focus {
  outline: 2px solid var(--brand-leaf);
  outline-offset: 2px;
}

/* Cookie modal scroll */
[data-cookie-modal] .max-h-\\[90vh\\] {
  scrollbar-width: thin;
  scrollbar-color: #d6d3d1 #f5f5f4;
}

[data-cookie-modal] .max-h-\\[90vh\\]::-webkit-scrollbar {
  width: 8px;
}

[data-cookie-modal] .max-h-\\[90vh\\]::-webkit-scrollbar-track {
  background: #f5f5f4;
  border-radius: 4px;
}

[data-cookie-modal] .max-h-\\[90vh\\]::-webkit-scrollbar-thumb {
  background: #d6d3d1;
  border-radius: 4px;
}

[data-cookie-modal] .max-h-\\[90vh\\]::-webkit-scrollbar-thumb:hover {
  background: #a8a29e;
}