/* FansaChat consent notice — styling for the banner built by /consent.js.
 *
 * Separate stylesheet rather than a <style> tag injected from JS: the site CSP
 * allows 'self' stylesheets, and a real file is cacheable and reviewable.
 *
 * Everything is scoped under .fc-consent and every property that host pages
 * commonly reset (margin, font, line-height) is set explicitly, because this
 * loads on top of six different pages — a Tailwind v4 SPA, a Tailwind CDN app
 * page and four hand-written ones.
 *
 * Centring is done with flexbox, never margin:auto: an unlayered `* { margin:0 }`
 * in this project beats layered utilities, which is what killed mx-auto sitewide.
 */

.fc-consent {
  /* DESIGN.md v5 tokens, namespaced so they cannot collide with the host page */
  --fc-panel: #ffffff;
  --fc-panel-2: #f1eff8;
  --fc-text: #221e30;
  --fc-text-lo: #6a6580;
  --fc-line: rgba(32, 28, 46, .1);
  --fc-line-strong: rgba(32, 28, 46, .26);
  --fc-accent: #8b8fe8;
  --fc-accent-bright: #a6a9f2;
  --fc-accent-deep: #6468d8;
  --fc-accent-soft: rgba(139, 143, 232, .14);

  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2147483000;
  display: flex;
  justify-content: center;
  padding: 1rem;
  /* The page underneath stays fully usable — this is a notice, not a wall.
     Only the panel itself takes pointer events. */
  pointer-events: none;
  font-family: 'Inter Tight', system-ui, -apple-system, sans-serif;
  color: var(--fc-text);
}

.fc-consent *,
.fc-consent *::before,
.fc-consent *::after { box-sizing: border-box; }

/* Entry/exit: slides up from below while fading in, and leaves the same way in
   reverse. The transition lives on the panel (not the fixed host) so the host
   keeps its layout role while the panel is the thing that moves.
   `.is-in` is added a frame after mount and removed on dismiss — one pair of
   properties drives both directions, so they cannot drift apart. */
.fc-consent__panel {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .42s cubic-bezier(.16, 1, .3, 1),
              transform .42s cubic-bezier(.16, 1, .3, 1);
  will-change: opacity, transform;
}
.fc-consent.is-in .fc-consent__panel {
  opacity: 1;
  transform: translateY(0);
}

.fc-consent__panel {
  pointer-events: auto;
  width: 100%;
  max-width: 34rem;
  background: var(--fc-panel);
  border: 1px solid var(--fc-line);
  border-radius: 14px;
  padding: 1.15rem 1.3rem 1.05rem;
  box-shadow: 0 20px 46px -26px rgba(100, 104, 216, .55);
  line-height: 1.55;
  text-align: left;
}

.fc-consent__title {
  margin: 0;
  font-family: 'Clash Display', 'Inter Tight', system-ui, sans-serif;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--fc-text);
}

.fc-consent__text {
  margin: .45rem 0 0;
  font-size: .875rem;
  color: var(--fc-text-lo);
}

.fc-consent__check {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin: .9rem 0 0;
  padding: .7rem .8rem;
  border: 1px solid var(--fc-line);
  border-radius: 10px;
  background: var(--fc-accent-soft);
  font-size: .85rem;
  color: var(--fc-text);
  cursor: pointer;
}

.fc-consent__check input {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  margin: .18rem 0 0;
  accent-color: var(--fc-accent-deep);
  cursor: pointer;
}

/* Underlined explicitly: Tailwind's preflight strips link underlines on the
   landing page, and "the coloured words are clickable" is not good enough for
   the three documents the visitor is being asked to agree to. */
.fc-consent__check a {
  color: var(--fc-accent-deep);
  text-decoration: underline;
}

.fc-consent__actions {
  display: flex;
  gap: .6rem;
  margin: .9rem 0 0;
}

/* Refusing must be exactly as easy as accepting (GDPR Art. 7 / EDPB): same row,
   same width, same height, same type weight. Only the fill differs. */
.fc-consent__btn {
  flex: 1 1 0;
  min-height: 2.7rem;
  padding: .7rem 1rem;
  border-radius: 10px;
  font-family: inherit;
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: filter .15s, background-color .15s, border-color .15s;
}

.fc-consent__btn--accept {
  border: 1px solid transparent;
  color: #fff;
  background: linear-gradient(90deg, var(--fc-accent), var(--fc-accent-bright));
}

.fc-consent__btn--accept:hover:not(:disabled) { filter: brightness(1.05); }

/* Disabled until the box is ticked. Visibly inert, not merely inert. */
.fc-consent__btn--accept:disabled {
  opacity: .45;
  cursor: not-allowed;
  filter: grayscale(.35);
}

.fc-consent__btn--decline {
  border: 1px solid var(--fc-line-strong);
  color: var(--fc-text);
  background: var(--fc-panel);
}

.fc-consent__btn--decline:hover {
  background: var(--fc-panel-2);
  border-color: var(--fc-accent);
}

.fc-consent__btn:focus-visible,
.fc-consent__check input:focus-visible,
.fc-consent__check a:focus-visible {
  outline: 2px solid var(--fc-accent-deep);
  outline-offset: 2px;
}

.fc-consent__note {
  margin: .7rem 0 0;
  font-size: .76rem;
  color: var(--fc-text-lo);
}

@media (max-width: 30rem) {
  .fc-consent { padding: .6rem; }
  .fc-consent__actions { flex-direction: column; }
}

/* The app pages can be viewed dark; the tokens flip, the layout does not. */
@media (prefers-color-scheme: dark) {
  .fc-consent {
    --fc-panel: #1b1827;
    --fc-panel-2: #262235;
    --fc-text: #f3f1f9;
    --fc-text-lo: #a8a2bd;
    --fc-line: rgba(255, 255, 255, .14);
    --fc-line-strong: rgba(255, 255, 255, .32);
    --fc-accent-deep: #a6a9f2;
    --fc-accent-soft: rgba(139, 143, 232, .18);
  }
  .fc-consent__panel { box-shadow: 0 20px 46px -26px rgba(0, 0, 0, .8); }
}

@media (prefers-reduced-motion: reduce) {
  .fc-consent * { transition: none !important; animation: none !important; }
  /* With transitions off the panel would sit at its pre-animation state
     (opacity:0, shifted down) until .is-in lands — visible as a flash of nothing.
     Pin it to the final state so reduced-motion users just get the banner. */
  .fc-consent__panel { opacity: 1 !important; transform: none !important; }
}