/**
 * Cookie banner — presentation.
 *
 * THEMING CONTRACT
 * ----------------
 * Themes set the --kcs-* properties on .kicked-consent, never override the
 * selectors. The defaults below are the module's own and are what a shop with
 * no theming gets; letcon's theme tokens are picked up through the var()
 * fallbacks, so on this shop the banner is parchment and brick without anyone
 * restating the palette.
 *
 *   --kcs-surface      banner background
 *   --kcs-ink          body text
 *   --kcs-ink-strong   the title
 *   --kcs-border       top edge and the refuse button's outline
 *   --kcs-accent       accept button, links
 *   --kcs-accent-ink   text on the accent
 *   --kcs-radius       button corners
 *   --kcs-z            stacking order
 *
 * The stacking order is 75 on purpose: above the mega-menu (60) and the search
 * suggestions (70) so the banner is never half-covered by shop chrome, and
 * below the comparison drawer's backdrop (80) so an open drawer dims it along
 * with everything else instead of leaving it lit and unreachable.
 *
 * Layered, like every other module stylesheet here: layered CSS loses to
 * unlayered CSS whatever the specificity, so the theme's own rules win outright.
 *
 * @copyright Kicked SRL
 * @license   AFL-3.0
 */

@layer kicked-consent {
  .kicked-consent {
    --kcs-surface: var(--bs-lc-parchment, #fbf6ee);
    --kcs-ink: #3f3a33;
    --kcs-ink-strong: #1f1c19;
    --kcs-border: var(--bs-lc-border-warm, #ece3d6);
    --kcs-accent: var(--bs-lc-brick, #cc4436);
    --kcs-accent-ink: #fff;
    --kcs-radius: 0.5rem;
    --kcs-z: 75;

    position: fixed;
    inset: auto 0 0 0;
    z-index: var(--kcs-z);

    background: var(--kcs-surface);
    border-top: 1px solid var(--kcs-border);
    box-shadow: 0 -0.5rem 1.5rem rgba(31, 28, 25, 0.12);
    color: var(--kcs-ink);

    /* The banner sits on the bottom edge, where phones put their home bar. */
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));

    animation: kicked-consent-in 0.24s ease-out both;
  }

  /* The element is display:flex when shown, and a bare [hidden] attribute
     loses to any display declaration — so hiding has to be said out loud. */
  .kicked-consent[hidden] {
    display: none;
  }

  .kicked-consent:focus {
    outline: none;
  }

  .kicked-consent__inner {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;

    max-width: 75rem;
    margin: 0 auto;
  }

  .kicked-consent__body {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
  }

  .kicked-consent__link {
    color: var(--kcs-accent);
    text-decoration: underline;
    white-space: nowrap;
  }

  .kicked-consent__state {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    opacity: 0.75;
  }

  .kicked-consent__state[hidden] {
    display: none;
  }

  .kicked-consent__actions {
    display: flex;
    gap: 0.625rem;
  }

  /* Equal width, equal weight, equal size. The two answers differ in colour
     and in nothing else — a refusal that reads as the quieter option is a
     refusal the shop has made harder to give. */
  .kicked-consent__btn {
    flex: 1 1 0;

    min-height: 2.75rem;
    padding: 0.5rem 1.25rem;

    border: 1px solid transparent;
    border-radius: var(--kcs-radius);

    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;

    cursor: pointer;
  }

  .kicked-consent__btn--accept {
    background: var(--kcs-accent);
    border-color: var(--kcs-accent);
    color: var(--kcs-accent-ink);
  }

  .kicked-consent__btn--refuse {
    background: transparent;
    border-color: var(--kcs-ink-strong);
    color: var(--kcs-ink-strong);
  }

  .kicked-consent__btn:hover {
    filter: brightness(0.95);
  }

  .kicked-consent__btn:focus-visible {
    outline: 2px solid var(--kcs-accent);
    outline-offset: 2px;
  }

  @media (min-width: 48em) {
    .kicked-consent {
      padding: 1rem 1.5rem calc(1rem + env(safe-area-inset-bottom, 0px));
    }

    .kicked-consent__inner {
      flex-direction: row;
      align-items: center;
      gap: 2rem;
    }

    .kicked-consent__text {
      flex: 1 1 auto;
    }

    .kicked-consent__actions {
      flex: 0 0 auto;
    }

    .kicked-consent__btn {
      flex: 0 0 auto;
      min-width: 9rem;
    }
  }

  @keyframes kicked-consent-in {
    from {
      transform: translateY(100%);
    }

    to {
      transform: translateY(0);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .kicked-consent {
      animation: none;
    }
  }
}