/* Custom styling for CookieConsent v3 to match site design */

/* Override default CookieConsent styles */
#cc--main {
  font-family: 'Inter', sans-serif;
  z-index: 9999;
}

/* Consent Modal Styling */
.cc-consent-modal {
  background: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 12px !important;
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) !important;
  color: hsl(var(--foreground)) !important;
}

.cc-consent-modal .cc-header {
  color: hsl(var(--foreground)) !important;
  font-family: 'Barlow Semi Condensed', sans-serif !important;
  font-weight: 600 !important;
}

.cc-consent-modal .cc-description {
  color: hsl(var(--muted-foreground)) !important;
  line-height: 1.6 !important;
}

/* Button Styling */
.cc-consent-modal .cc-btn {
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
  transition: all 0.2s ease-in-out !important;
  border: none !important;
}

.cc-consent-modal .cc-btn.cc-accept-all {
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}

.cc-consent-modal .cc-btn.cc-accept-all:hover {
  background: hsl(var(--primary) / 0.9) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px hsl(var(--primary) / 0.3) !important;
}

.cc-consent-modal .cc-btn.cc-accept-necessary {
  background: hsl(var(--muted)) !important;
  color: hsl(var(--muted-foreground)) !important;
  border: 1px solid hsl(var(--border)) !important;
}

.cc-consent-modal .cc-btn.cc-accept-necessary:hover {
  background: hsl(var(--muted) / 0.8) !important;
  transform: translateY(-1px) !important;
}

.cc-consent-modal .cc-btn.cc-show-preferences {
  background: transparent !important;
  color: hsl(var(--primary)) !important;
  border: 1px solid hsl(var(--primary)) !important;
}

.cc-consent-modal .cc-btn.cc-show-preferences:hover {
  background: hsl(var(--primary) / 0.1) !important;
  transform: translateY(-1px) !important;
}

/* Preferences Modal Styling */
.cc-preferences-modal {
  background: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 12px !important;
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) !important;
  color: hsl(var(--foreground)) !important;
}

.cc-preferences-modal .cc-header {
  color: hsl(var(--foreground)) !important;
  font-family: 'Barlow Semi Condensed', sans-serif !important;
  font-weight: 600 !important;
}

.cc-preferences-modal .cc-section {
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 8px !important;
  background: hsl(var(--background)) !important;
}

.cc-preferences-modal .cc-section-title {
  color: hsl(var(--foreground)) !important;
  font-weight: 600 !important;
}

.cc-preferences-modal .cc-section-description {
  color: hsl(var(--muted-foreground)) !important;
}

/* Toggle Switch Styling */
.cc-toggle {
  background: hsl(var(--muted)) !important;
  border: 1px solid hsl(var(--border)) !important;
}

.cc-toggle.cc-active {
  background: hsl(var(--primary)) !important;
  border-color: hsl(var(--primary)) !important;
}

.cc-toggle .cc-toggle-handle {
  background: hsl(var(--background)) !important;
  border: 1px solid hsl(var(--border)) !important;
}

/* Footer Link Styling */
.cc-consent-modal .cc-footer a {
  color: hsl(var(--primary)) !important;
  text-decoration: none !important;
}

.cc-consent-modal .cc-footer a:hover {
  text-decoration: underline !important;
}

/* Close Button */
.cc-preferences-modal .cc-close {
  color: hsl(var(--muted-foreground)) !important;
  background: hsl(var(--muted)) !important;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.cc-preferences-modal .cc-close:hover {
  background: hsl(var(--muted) / 0.8) !important;
  color: hsl(var(--foreground)) !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .cc-consent-modal,
  .cc-preferences-modal {
    margin: 16px !important;
    border-radius: 8px !important;
  }
  
  .cc-consent-modal .cc-btn {
    width: 100% !important;
    margin: 4px 0 !important;
  }
}