/* assets/css/components/cookie-banner.css
 * @layer components — Cookie consent banner + preferences modal
 * ════════════════════════════════════════════════════════════════════ */

@layer components {

  /* ════════════════════════════════════════════════════════════════════
     COOKIE BANNER — fixed bottom bar
     ════════════════════════════════════════════════════════════════════ */

  .vimta-cookie-banner {
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: var(--z-overlay);
    background: var(--card-bg);
    border-block-start: 1px solid var(--border-subtle);
    box-shadow: 0 -4px 24px color-mix(in oklch, var(--text-main) 10%, transparent);
    transform: translateY(0);
    opacity: 1;
    transition:
      transform var(--duration-normal) var(--ease-out),
      opacity   var(--duration-normal) var(--ease-default);
  }

  .vimta-cookie-banner.is-hidden {
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
  }

  .vimta-cookie-banner__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-l);
    max-inline-size: var(--content-width);
    margin-inline: auto;
    padding-block: var(--space-m);
    padding-inline: var(--space-l);
  }

  .vimta-cookie-banner__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    min-inline-size: 0;
  }

  .vimta-cookie-banner__title {
    font-family: var(--font-heading);
    font-size: var(--text-m);
    font-weight: var(--weight-bold);
    color: var(--text-main);
    margin: 0;
  }

  .vimta-cookie-banner__text {
    font-size: var(--text-s);
    color: var(--text-body);
    line-height: var(--leading-relaxed);
    margin: 0;
  }

  .vimta-cookie-banner__actions {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    flex-shrink: 0;
  }

  /* ════════════════════════════════════════════════════════════════════
     COOKIE MODAL — full-screen overlay with centred panel
     ════════════════════════════════════════════════════════════════════ */

  .vimta-cookie-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: grid;
    place-items: center;
    padding: var(--space-m);
  }

  .vimta-cookie-modal[hidden] {
    display: none;
  }

  .vimta-cookie-modal__backdrop {
    position: absolute;
    inset: 0;
    background: var(--overlay-heavy);
    cursor: pointer;
    animation: cookie-backdrop-in var(--duration-normal) var(--ease-default) both;
  }

  @keyframes cookie-backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  .vimta-cookie-modal__panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    inline-size: 100%;
    max-inline-size: 36rem;
    max-block-size: 90vh;
    background: var(--card-bg);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    animation: cookie-panel-in var(--duration-normal) var(--ease-out) both;
  }

  @keyframes cookie-panel-in {
    from {
      opacity: 0;
      transform: translateY(var(--space-l));
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Header */
  .vimta-cookie-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m);
    padding: var(--card-padding-compact);
    border-block-end: 1px solid var(--border-subtle);
    flex-shrink: 0;
  }

  .vimta-cookie-modal__title {
    font-family: var(--font-heading);
    font-size: var(--heading-xs);
    font-weight: var(--weight-bold);
    color: var(--text-main);
    margin: 0;
  }

  .vimta-cookie-modal__close {
    display: grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    padding: 0;
    border: none;
    border-radius: var(--radius-s);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition:
      background-color var(--duration-fast) var(--ease-default),
      color            var(--duration-fast) var(--ease-default);
  }

  .vimta-cookie-modal__close:hover {
    background: var(--surface-tinted);
    color: var(--primary);
  }

  .vimta-cookie-modal__close:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  /* Body — scrollable toggle list */
  .vimta-cookie-modal__body {
    display: flex;
    flex-direction: column;
    padding: var(--card-padding-compact);
    gap: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    flex: 1;
  }

  /* Footer */
  .vimta-cookie-modal__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m);
    padding: var(--card-padding-compact);
    border-block-start: 1px solid var(--border-subtle);
    flex-shrink: 0;
    flex-wrap: wrap;
  }

  .vimta-cookie-modal__footer-actions {
    display: flex;
    gap: var(--space-s);
    flex-wrap: wrap;
  }

  .vimta-cookie-modal__privacy-link {
    font-size: var(--text-s);
    color: var(--text-accent);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    transition: color var(--duration-fast) var(--ease-default);
  }

  .vimta-cookie-modal__privacy-link:hover {
    color: var(--primary-hover);
  }

  /* ════════════════════════════════════════════════════════════════════
     TOGGLE ROWS
     ════════════════════════════════════════════════════════════════════ */

  .vimta-cookie-toggle {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-m);
    padding-block: var(--space-m);
    border-block-end: 1px solid var(--border-subtle);
  }

  .vimta-cookie-toggle:last-child {
    border-block-end: none;
    padding-block-end: 0;
  }

  .vimta-cookie-toggle:first-child {
    padding-block-start: 0;
  }

  .vimta-cookie-toggle__info {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    min-inline-size: 0;
  }

  .vimta-cookie-toggle__label {
    font-size: var(--text-m);
    font-weight: var(--weight-semibold);
    color: var(--text-main);
    line-height: var(--leading-snug);
  }

  .vimta-cookie-toggle__desc {
    font-size: var(--text-s);
    color: var(--text-body);
    line-height: var(--leading-relaxed);
  }

  /* "Always active" badge */
  .vimta-cookie-toggle__badge {
    display: inline-flex;
    align-self: flex-start;
    margin-block-start: var(--space-3xs);
    padding-block: var(--space-3xs);
    padding-inline: var(--space-xs);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-snug);
    color: var(--primary);
    background: var(--primary-ultra-light);
    border-radius: var(--radius-full);
    line-height: var(--leading-none);
  }

  /* Toggle switch */
  .vimta-cookie-toggle__switch {
    flex-shrink: 0;
    display: block;
    cursor: pointer;
    margin-block-start: var(--space-3xs);
  }

  .vimta-cookie-toggle--locked .vimta-cookie-toggle__switch {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* Hide the native checkbox visually */
  .vimta-cookie-toggle__switch input[type="checkbox"] {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  /* Visual track */
  .vimta-cookie-toggle__track {
    display: block;
    position: relative;
    inline-size: 2.75rem;
    block-size: 1.5rem;
    border-radius: var(--radius-full);
    background: var(--neutral-light);
    transition: background-color var(--duration-fast) var(--ease-default);
  }

  /* Knob */
  .vimta-cookie-toggle__track::after {
    content: '';
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 0.1875rem;
    inline-size: 1.125rem;
    block-size: 1.125rem;
    border-radius: var(--radius-full);
    background: var(--white);
    box-shadow: 0 1px 3px color-mix(in oklch, var(--text-main) 20%, transparent);
    transform: translateY(-50%) translateX(0);
    transition: transform var(--duration-fast) var(--ease-out);
  }

  /* Checked state */
  .vimta-cookie-toggle__switch input:checked + .vimta-cookie-toggle__track {
    background: var(--primary);
  }

  .vimta-cookie-toggle__switch input:checked + .vimta-cookie-toggle__track::after {
    transform: translateY(-50%) translateX(1.25rem);
  }

  /* Focus ring on the track when the hidden input is focused */
  .vimta-cookie-toggle__switch input:focus-visible + .vimta-cookie-toggle__track {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
    border-radius: var(--radius-full);
  }

  /* ════════════════════════════════════════════════════════════════════
     RESPONSIVE
     ════════════════════════════════════════════════════════════════════ */

  @media (max-width: 48em) {
    .vimta-cookie-banner__inner {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-m);
      padding-inline: var(--space-m);
    }

    .vimta-cookie-banner__actions {
      inline-size: 100%;
    }

    .vimta-cookie-banner__actions .btn {
      flex: 1;
      justify-content: center;
    }

    .vimta-cookie-modal__footer {
      flex-direction: column;
      align-items: flex-start;
    }

    .vimta-cookie-modal__footer-actions {
      inline-size: 100%;
    }

    .vimta-cookie-modal__footer-actions .btn {
      flex: 1;
      justify-content: center;
    }
  }

  /* ════════════════════════════════════════════════════════════════════
     REDUCED MOTION
     ════════════════════════════════════════════════════════════════════ */

  @media (prefers-reduced-motion: reduce) {
    .vimta-cookie-banner,
    .vimta-cookie-banner.is-hidden {
      transition: none;
    }

    .vimta-cookie-modal__backdrop {
      animation: none;
    }

    .vimta-cookie-modal__panel {
      animation: none;
    }

    .vimta-cookie-toggle__track,
    .vimta-cookie-toggle__track::after {
      transition: none;
    }
  }

}