@layer components {
  /* Consent modal — bloqueante: el <dialog> MISMO es el bottom-sheet.
     Patrón canónico Feeberse (cf. per-match-player-modal): el dialog se
     ancla abajo (inset: auto 0 0), desliza vía transform translateY(100%)
     → 0 con `.is-open`, y el ::backdrop nativo (top-layer) bloquea clicks
     detrás + atrapa el foco. El scroll-lock lo gestiona dismissable.js.

     El <dialog> cerrado ya es display:none (UA), así que no hay FOUC ni
     hace falta el hack [hidden]. */
  .consent-modal {
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
    border: 0;
    margin: 0;
    /* Mismo fondo que el modal +18 (age-gate) por preferencia de diseño. */
    background: rgb(17 22 29 / 98%);
    backdrop-filter: blur(8px);
    border-top: 1px solid rgb(255 255 255 / 8%);
    color: #fff;
    font-family: var(--font-body, Manrope, sans-serif);

    /* Anclado abajo — override del centrado por defecto de <dialog>:modal */
    inset: auto 0 0;
    width: 100%;
    max-width: 100%;
    max-height: 90vh;
    overflow-y: auto;

    /* No scrollbar chrome inside the sheet — scroll still works (modal rule). */
    scrollbar-width: none;
    -ms-overflow-style: none;
    transform: translateY(100%);
    transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  .consent-modal::-webkit-scrollbar {
    display: none;
  }

  .consent-modal.is-open {
    transform: translateY(0);
  }

  /* Backdrop dim en sincronía con el slide del dialog. */
  .consent-modal::backdrop {
    background: rgb(0 0 0 / 0%);
    backdrop-filter: blur(0);
    transition:
      background 280ms ease-out,
      backdrop-filter 280ms ease-out;
  }

  .consent-modal.is-open::backdrop {
    background: rgb(0 0 0 / 70%);
    backdrop-filter: blur(4px);
  }

  /* Aviso NO bloqueante (fuera de EEE/UK): `dialog.show()` NO usa el top-layer,
     así que el <dialog> es position:absolute (relativo a su contenedor) en vez
     de fijo al viewport, y NO tiene ::backdrop. Lo anclamos al viewport con
     position:fixed + z-index para que se vea como una barra inferior por encima
     del contenido, sin oscurecer ni bloquear: el usuario sigue navegando. */
  .consent-modal--notice {
    position: fixed;
    z-index: 1000;
  }

  @media (prefers-reduced-motion: reduce) {
    .consent-modal,
    .consent-modal::backdrop {
      transition: none;
    }
  }

  .consent-banner__inner {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 720px;
    margin: 0 auto;
  }

  /* Two-layer views: only one is visible at a time (Layer 1 intro / Layer 2
     config). The hidden one is removed from flow via [hidden]. */
  .consent-banner__view {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .consent-banner__view[hidden] {
    display: none;
  }

  /* Layer 1 — collapsed intro paragraph clamped to 2 lines; "See more"
     removes the clamp (--expanded). */
  .consent-banner__intro-text {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .consent-banner__intro-text--expanded {
    display: block;
    overflow: visible;
    -webkit-line-clamp: none;
    line-clamp: none;
  }

  /* Inline link inside running text ("Settings", "Cookie Policy") and the
     "See more / See less" toggle — both rendered as buttons/anchors but styled
     like an embedded text link (accent, underlined). */
  .consent-banner__inline-link {
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: var(--color-accent, #00a572);
    text-decoration: underline;
    cursor: pointer;
  }

  .consent-banner__inline-link:hover {
    color: #00c084;
  }

  .consent-banner__more-toggle {
    align-self: flex-start;
    font-size: 13px;
    font-weight: 600;
  }

  .consent-banner__detail {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .consent-banner__detail[hidden] {
    display: none;
  }

  .consent-banner__purposes {
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    line-height: 1.45;
    color: rgb(255 255 255 / 80%);
  }

  /* "See more / See less" share the bottom-up reveal of the detail block. */
  .consent-banner__privacy-link {
    align-self: flex-start;
    font-size: 11px;
    color: rgb(255 255 255 / 55%);
    text-decoration: underline;
    text-align: center;
    margin: 0 auto;
  }

  .consent-banner__privacy-link:hover {
    color: rgb(255 255 255 / 80%);
  }

  /* Sin anillo de foco por defecto dentro del modal: showModal() mueve el foco
     al primer focusable y dejaba un outline visible al abrir. El switch conserva
     su propio anillo (`.consent-switch__input:focus-visible ~ track`). */
  .consent-modal :focus-visible {
    outline: none;
  }

  .consent-banner__title {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
  }

  .consent-banner__body {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: rgb(255 255 255 / 75%);
  }

  /* Category cards — one toggle each, OFF by default */
  .consent-banner__categories {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .consent-banner__category {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: rgb(255 255 255 / 4%);
    border: 1px solid rgb(255 255 255 / 8%);
    border-radius: 12px;
  }

  .consent-banner__category-text {
    flex: 1;
    min-width: 0;
  }

  .consent-banner__category-title {
    margin: 0 0 2px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
  }

  .consent-banner__category-body {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    color: rgb(255 255 255 / 70%);
  }

  /* Accessible switch — the real checkbox is visually hidden but focusable */
  .consent-switch {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
  }

  .consent-switch__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }

  .consent-switch__track {
    display: inline-block;
    width: 40px;
    height: 22px;
    border-radius: 999px;
    background: rgb(255 255 255 / 22%);
    transition: background 160ms ease;
  }

  .consent-switch__thumb {
    display: block;
    width: 18px;
    height: 18px;
    margin: 2px;
    border-radius: 50%;
    background: #fff;
    transform: translateX(0);
    transition: transform 160ms ease;
  }

  .consent-switch__input:checked ~ .consent-switch__track {
    background: var(--color-accent, #00a572);
  }

  .consent-switch__input:checked ~ .consent-switch__track .consent-switch__thumb {
    transform: translateX(18px);
  }

  .consent-switch__input:focus-visible ~ .consent-switch__track {
    outline: 2px solid var(--color-accent, #00a572);
    outline-offset: 2px;
  }

  .consent-banner__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .consent-banner__btn {
    appearance: none;
    border: 0;
    border-radius: 999px;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition:
      background 160ms ease,
      color 160ms ease;
    font-family: inherit;
    width: 100%;
    text-align: center;
  }

  .consent-banner__btn--primary {
    background: var(--color-accent, #00a572);
    color: #000;
  }

  .consent-banner__btn--primary:hover {
    background: #00c084;
  }

  /* Reject — equiprominent with Accept (same width, one tap, clearly legible).
     Outlined high-contrast variant, never buried beneath "Save" (AEPD/EDPB). */
  .consent-banner__btn--reject {
    background: transparent;
    color: #fff;
    border: 1px solid rgb(255 255 255 / 50%);
  }

  .consent-banner__btn--reject:hover {
    background: rgb(255 255 255 / 10%);
  }

  /* Save preferences — tertiary, deliberately less prominent than reject */
  .consent-banner__btn--save {
    background: transparent;
    color: rgb(255 255 255 / 80%);
    font-weight: 500;
    text-decoration: underline;
    padding: 6px 18px;
  }

  .consent-banner__btn--save:hover {
    color: #fff;
  }

  /* Layer 1 buttons — same green/grey pair as the age-gate (+18) gate:
     affirmative = accent green, reject = neutral grey, both equiprominent. */
  .consent-banner__actions--intro {
    flex-direction: row;
    gap: 12px;
  }

  .consent-banner__btn--yes {
    flex: 1;
    background: var(--color-accent, #00a572);
    color: #000;
  }

  .consent-banner__btn--yes:hover {
    background: #00c084;
  }

  .consent-banner__btn--no {
    flex: 1;
    background: rgb(255 255 255 / 10%);
    color: #fff;
  }

  .consent-banner__btn--no:hover {
    background: rgb(255 255 255 / 16%);
  }

  @media (width >= 640px) {
    /* Layer 2 (config) keeps the original 3-column row layout. */
    .consent-banner__view--config {
      flex-flow: row wrap;
      align-items: flex-start;
      gap: 24px;
    }

    .consent-banner__text {
      flex: 1 1 100%;
    }

    .consent-banner__categories {
      flex: 1 1 360px;
    }

    .consent-banner__view--config .consent-banner__actions {
      flex: 0 0 220px;
      align-self: center;
    }
  }
}