/* Consent banner — styled as one of the app's own System dialogs
   (clipped corner, crimson edge glow, mono-ish kicker) rather than a
   generic cookie bar, so it reads as the product speaking. Depends on
   style.css for tokens; defines none of its own.

   Accept and Reject are styled IDENTICALLY. Unequal prominence is the
   dark pattern EU regulators cite most often, so the only difference
   between them is the label. */

.consent {
  position: fixed;
  z-index: 30;                 /* above .whatsapp-fab (20), below nothing else */
  right: var(--space-20);
  bottom: var(--space-20);
  width: min(30rem, calc(100vw - var(--space-40)));
  padding: var(--space-24);
  background: linear-gradient(165deg, rgba(30, 10, 12, 0.97), rgba(9, 5, 5, 0.98));
  border: 1px solid var(--color-line-strong);
  /* Layered, not one flat blur: a wide soft lift plus a tight edge so
     the border still reads crisp at real scale. */
  box-shadow: 0 0 44px rgba(255, 60, 74, 0.18), 0 30px 70px rgba(0, 0, 0, 0.66);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  backdrop-filter: blur(10px);
  color: var(--color-ink);
  /* visibility is transitioned so it flips to hidden only at the END of
     the fade out, keeping the banner out of the tab order and the
     accessibility tree whenever it is off screen. Without it a dismissed
     banner stays focusable at opacity 0 and, being fixed, still
     intercepts clicks meant for the page. */
  opacity: 0;
  transform: translateY(12px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.32s ease, transform 0.32s ease, visibility 0s linear 0.32s;
}

/* Final state declared outright; the movement is a keyframe animation on
   top. A transition would need the class added in a later frame to
   animate at all, which couples "is this clickable" to "did a frame
   paint" — and rAF doesn't fire in a tab that isn't rendering. */
.consent.is-visible {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition: none;
  animation: consent-in 0.32s ease;
}

@keyframes consent-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.consent-kicker {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin-bottom: var(--space-16);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-soft);
}

.consent-kicker-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px; flex: none;
  border: 1px solid var(--color-line-strong);
  font-size: 12px;
}

.consent-kicker-line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(255, 60, 74, 0.34), rgba(255, 60, 74, 0));
}

.consent-copy { margin: 0 0 var(--space-16); font-size: 14px; line-height: 1.55; }
.consent-copy strong { color: var(--color-white); font-weight: 600; }

.consent-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); }

.consent-btn {
  flex: 1 1 auto;
  min-width: 9.5rem;
  min-height: 44px;                     /* hit target >= visual control */
  padding: 10px 16px;
  font: 480 13px/1 var(--font-body);
  letter-spacing: 0.01em;
  color: var(--color-ink);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-buttons);
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

/* Hover/focus raises contrast rather than washing the control out. */
.consent-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--color-white);
}

.consent-link {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 6px 4px;
  font: 400 13px/1 var(--font-body);
  color: var(--color-ink-soft);
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 0.18s ease;
}

.consent-link:hover { color: var(--color-ink); }

/* Animated disclosure: 0fr -> 1fr needs the inner wrapper to be
   min-height:0/overflow:hidden or the content refuses to collapse. */
.consent-details {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.consent.is-open .consent-details { grid-template-rows: 1fr; }
.consent-details-inner { min-height: 0; overflow: hidden; }

.consent-table { margin: var(--space-16) 0 0; font-size: 13px; line-height: 1.5; }

.consent-table dt {
  margin-top: var(--space-12);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-soft);
}

.consent-table dd { margin: 4px 0 0; color: var(--color-ink-soft); }

.consent-table code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
  color: var(--color-ink);
}

.consent-fine {
  margin: var(--space-16) 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-ink-soft);
}

.consent-fine a { color: var(--color-ink); }

@media (max-width: 640px) {
  .consent {
    right: 0; left: 0; bottom: 0;
    width: 100%;
    clip-path: none;                    /* a clipped corner on a full-bleed bar just looks broken */
    border-left: 0; border-right: 0; border-bottom: 0;
    /* Clear the home indicator on a phone. */
    padding-bottom: calc(var(--space-24) + env(safe-area-inset-bottom, 0px));
  }
  .consent-btn { min-width: 0; flex: 1 1 45%; }
}

@media (prefers-reduced-motion: reduce) {
  .consent,
  .consent.is-visible,
  .consent-details { transition: none; }
  .consent.is-visible { animation: none; }
}