/*
  Naturolistic theme overrides for Silktide Consent Manager.
  Must load AFTER /silktide/silktide.css (see app/(site)/layout.tsx).
*/

#silktide-wrapper {
  --fontFamily: var(--font-nunito), ui-sans-serif, system-ui, sans-serif;
  --primaryColor: var(--nat-color-text);
  --backgroundColor: var(--nat-color-bg);
  --textColor: var(--nat-color-text);
  --backdropBackgroundColor: color-mix(in srgb, var(--nat-color-text) 18%, transparent);
  --backdropBackgroundBlur: 2px;
  --cookieIconColor: var(--nat-color-text);
  --cookieIconBackgroundColor: var(--nat-color-bg);
  --boxShadow:
    0 20px 48px color-mix(in srgb, var(--nat-color-text) 10%, transparent),
    0 4px 16px color-mix(in srgb, var(--nat-color-text) 6%, transparent);
  --focus:
    0 0 0 2px var(--nat-color-bg),
    0 0 0 4px color-mix(in srgb, var(--nat-color-text) 55%, transparent),
    0 0 0 6px var(--nat-color-bg);
}

#silktide-banner,
#silktide-modal {
  border-radius: 1rem !important;
  box-shadow: var(--boxShadow) !important;
  border: 1px solid color-mix(in srgb, var(--nat-color-text) 12%, var(--nat-color-bg)) !important;
  background-color: var(--nat-color-bg) !important;
  color: var(--nat-color-text) !important;
}

#silktide-wrapper .st-button {
  border-radius: 9999px !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.025em;
  line-height: 1.25rem !important;
  padding: 1rem 2rem !important;
  transition:
    transform 150ms ease,
    background-color 150ms ease,
    color 150ms ease,
    border-color 150ms ease;
}

#silktide-wrapper .st-button--primary {
  color: color-mix(in srgb, var(--nat-color-text) 82%, black) !important;
  background-color: var(--nat-theme-cta, var(--nat-color-cta)) !important;
  border-color: var(--nat-theme-cta, var(--nat-color-cta)) !important;
}

#silktide-wrapper .st-button--primary:hover {
  color: color-mix(in srgb, var(--nat-color-text) 82%, black) !important;
  background-color: color-mix(
    in srgb,
    var(--nat-theme-cta, var(--nat-color-cta)) 88%,
    var(--nat-color-text)
  ) !important;
  border-color: color-mix(
    in srgb,
    var(--nat-theme-cta, var(--nat-color-cta)) 88%,
    var(--nat-color-text)
  ) !important;
  transform: scale(1.02);
}

#silktide-wrapper .st-button--secondary {
  color: var(--nat-color-text) !important;
  background-color: transparent !important;
  border: 2px solid
    color-mix(
      in srgb,
      var(--nat-theme-cta, var(--nat-color-cta)) 70%,
      var(--nat-color-text)
    ) !important;
}

#silktide-wrapper .st-button--secondary:hover {
  color: var(--nat-color-text) !important;
  background-color: color-mix(
    in srgb,
    var(--nat-theme-cta, var(--nat-color-cta)) 35%,
    var(--nat-color-bg)
  ) !important;
  border-color: color-mix(
    in srgb,
    var(--nat-theme-cta, var(--nat-color-cta)) 70%,
    var(--nat-color-text)
  ) !important;
}

#silktide-banner .preferences,
#silktide-banner a,
#silktide-modal a,
#silktide-modal .modal-close,
#silktide-modal .modal-close svg {
  color: var(--nat-color-text) !important;
  fill: var(--nat-color-text) !important;
}

#silktide-banner .preferences:hover,
#silktide-banner a:hover,
#silktide-modal a:hover {
  color: color-mix(in srgb, var(--nat-color-text) 75%, black) !important;
}

#silktide-banner p,
#silktide-modal p,
#silktide-modal h1,
#silktide-modal legend {
  color: var(--nat-color-text) !important;
}

#silktide-modal h1,
#silktide-modal legend {
  font-weight: 600 !important;
}

#silktide-modal .switch__pill {
  background: color-mix(in srgb, var(--nat-color-text) 28%, var(--nat-color-bg)) !important;
}

#silktide-modal .switch input:checked + .switch__pill {
  background: color-mix(in srgb, var(--nat-color-text) 72%, var(--nat-color-bg)) !important;
}

#silktide-modal fieldset:not(:last-of-type) {
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--nat-color-text) 12%, var(--nat-color-bg));
}

#silktide-cookie-icon {
  display: none !important;
}