/**
 * Cookie banner styling -- ported from src/components/common/CookieBanner.astro
 * `<style>` block. Class names are prefixed `scb-` (Simsalasim Cookie Banner)
 * to keep this plugin stylesheet self-contained on a global namespace.
 */

.scb {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 1300;
  display: flex;
  justify-content: center;
}

.scb[hidden] {
  display: none;
}

/*
 * Link-only mode (data-link-only, simsalasim_cookie_banner_link_only()): the banner in the
 * waitlist plugin's own documents, which load no theme stylesheet. It brings the theme tokens it
 * reads (theme assets/css/tokens.css and base.css, same values; the responsive ones below) and
 * uses the document's own font, "PP Object Sans" (waitlist.css: 400, 500, 700).
 */
.scb[data-link-only] {
  --radius-md: 8px;
  --radius-md-responsive: 8px;
  --radius-xl: 24px;
  --text-headline-sm: 16px;
  --text-copy-md: 14px;
  --text-copy-sm: 12px;
  --text-button-lg: 14px;
  --text-button-md: 14px;
  --linehight-headline-sm: 20px;
  --linehight-copy-md: 20px;
  --linehight-copy-sm: 16px;
  --background-secondary: #ffffff;
  --background-inverted: #000000;
  --background-disabled: #0000000f;
  --text-primary: #000000;
  --text-primary-inverted: #ffffff;
  --focus-color: #3385e3;
  --border-color-default: #000000;
  --border-color-secondary: rgba(0, 0, 0, 0.12);
  --font-regular: 'PP Object Sans', sans-serif;
  --font-bold: 'PP Object Sans', sans-serif;
}

.scb[data-link-only] .scb-title,
.scb[data-link-only] .scb-accordion-title {
  font-weight: 700;
}

@media (min-width: 600px) {
  .scb[data-link-only] {
    --radius-md-responsive: 12px;
  }
}

@media (min-width: 1024px) {
  .scb[data-link-only] {
    --radius-md-responsive: 16px;
    --text-button-lg: 16px;
    --text-headline-sm: 20px;
    --linehight-headline-sm: 29px;
  }
}

.scb-banner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  padding: 32px 16px 24px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background-color: var(--background-secondary);
  font-family: var(--font-regular);
  color: var(--text-primary);
}

.scb-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.scb-title {
  font-family: var(--font-bold);
  font-size: var(--text-headline-sm);
  line-height: var(--linehight-headline-sm);
  margin: -4px 0 -6px 0;
}

.scb-description {
  font-size: var(--text-copy-sm);
  line-height: var(--linehight-copy-sm);
  color: var(--text-primary);
  margin: -5px 0 -7px 0;
}

.scb-accordions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.scb-accordion {
  display: flex;
  flex-direction: column;
  padding: 8px;
  border: 1px solid var(--border-color-secondary);
  border-radius: var(--radius-md-responsive);
  background-color: var(--background-secondary);
}

.scb-accordion-row {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 24px;
}

.scb-checkbox {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 0 1px;
  appearance: none;
  -webkit-appearance: none;
  border: 1.5px solid var(--border-color-default);
  border-radius: 4px;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}

.scb-checkbox:checked {
  border-color: var(--background-inverted);
  background-color: var(--background-inverted);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.2976 6.34414C12.4922 6.15309 12.8039 6.15309 12.9984 6.34414L13.6368 6.97125C13.8363 7.16721 13.8363 7.48871 13.6368 7.68467L8.5757 12.6559C8.38119 12.8469 8.06947 12.8469 7.87496 12.6559L5.36316 10.1887C5.16366 9.99274 5.16366 9.67124 5.36316 9.47528L6.00162 8.84817C6.19613 8.65712 6.50785 8.65712 6.70236 8.84817L8.22533 10.3441L12.2976 6.34414Z' fill='%23F5F4F4'/%3E%3C/svg%3E");
}

.scb-checkbox:focus-visible {
  outline: 2px solid var(--focus-color);
  outline-offset: 2px;
}

.scb-checkbox:disabled {
  border-color: transparent;
  background-color: var(--background-disabled);
  cursor: not-allowed;
}

.scb-checkbox:disabled:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.2976 6.34414C12.4922 6.15309 12.8039 6.15309 12.9984 6.34414L13.6368 6.97125C13.8363 7.16721 13.8363 7.48871 13.6368 7.68467L8.5757 12.6559C8.38119 12.8469 8.06947 12.8469 7.87496 12.6559L5.36316 10.1887C5.16366 9.99274 5.16366 9.67124 5.36316 9.47528L6.00162 8.84817C6.19613 8.65712 6.50785 8.65712 6.70236 8.84817L8.22533 10.3441L12.2976 6.34414Z' fill='%23A29F9F'/%3E%3C/svg%3E");
}

.scb-accordion-toggle {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}

.scb-accordion-title {
  flex: 1 0 0;
  min-width: 0;
  font-family: var(--font-bold);
  font-size: var(--text-copy-md);
  line-height: var(--linehight-copy-md);
}

.scb-chevron {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  transition: transform 0.2s ease;
}

.scb-chevron svg {
  display: block;
  width: 18px;
  height: 18px;
}

.scb-accordion-toggle[aria-expanded='true'] .scb-chevron {
  transform: rotate(180deg);
}

.scb-accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 0.3s ease,
    opacity 0.2s ease;
}

.scb-accordion-panel.open {
  grid-template-rows: 1fr;
  opacity: 1;
}

.scb-accordion-panel-inner {
  min-height: 0;
  overflow: hidden;
}

.scb-accordion-panel-content {
  padding: 16px 36px 12px;
}

.scb-accordion-panel-content p {
  font-size: var(--text-copy-sm);
  line-height: var(--linehight-copy-sm);
  margin: -5px 0 -7px 0;
}

@media (prefers-reduced-motion: reduce) {
  .scb-accordion-panel,
  .scb-chevron {
    transition: none;
  }
}

.scb-actions {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  gap: 16px;
}

.scb-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-regular);
  text-transform: uppercase;
  font-size: var(--text-button-lg);
  letter-spacing: 1.92px;
  cursor: pointer;
}

.scb-button-primary {
  background-color: var(--background-inverted);
  color: var(--text-primary-inverted);
}

.scb-button-tertiary {
  background-color: transparent;
  color: var(--text-primary);
}

@media (min-width: 600px) {
  .scb {
    inset: auto 0 0 auto;
    padding: 24px 24px 16px;
  }

  .scb-banner {
    width: 375px;
    padding-bottom: 24px;
    border-radius: var(--radius-xl);
  }

  .scb-button {
    height: 32px;
    font-size: var(--text-button-md);
    letter-spacing: 1.68px;
  }

  .scb-button-tertiary {
    border: 1px solid var(--border-color-default);
  }
}

@media (min-width: 1024px) {
  .scb {
    padding: 64px 64px 32px;
  }
}