/* ============================================================================
 * Suunta.ai Landing v2 — Cookie consent
 * ----------------------------------------------------------------------------
 * Premium-minimalistinen floating-card oikeassa alakulmassa. Korvaa v1-stilin
 * full-width-overlay:n. EI peitä sisältöä, EI dominoi näkymää.
 *
 * Ops styleguide:
 *   - bg-elevated + hairline border + soft shadow
 *   - 1-lause kompakti copy
 *   - .btn--ghost (decline) + .btn--primary (accept) — v2-buttonit
 *   - Floating: max-width 380px, sticky bottom-right (mobiilissa full-width)
 *   - Slide-in animation (opacity + translateY), respektoi reduced-motion
 * ============================================================================ */

.v2-cookie {
  position: fixed;
  bottom: var(--space-5);
  left: var(--space-5);        /* sama kulma kuin hallintapallo → kytketty interaktio */
  z-index: 90;                 /* alle CookieConsent overlay > header */
  width: calc(100% - var(--space-5) * 2);
  max-width: 380px;

  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);

  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 20px 40px -16px rgba(15, 23, 42, 0.18),
    0 8px 16px -8px rgba(15, 23, 42, 0.10);

  /* Slide-in animation */
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.v2-cookie:not([hidden]) {
  animation: v2CookieIn var(--transition-slow) forwards;
}

@keyframes v2CookieIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .v2-cookie:not([hidden]) {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* Header — eyebrow-style otsikko + pieni shield-icon */
.v2-cookie__head {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.v2-cookie__head i {
  color: var(--accent);
  font-size: 0.875em;
}

/* Copy — 1 lause kompakti */
.v2-cookie__desc {
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--text-secondary);
  margin: 0;
}

.v2-cookie__desc a {
  color: var(--text-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* Nykyvalinta — näkyy vain uudelleenavattaessa (manage-tila) */
.v2-cookie__status {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  opacity: 0.75;
}

/* Sulje (×) — vain manage-tilassa. Hillitty, hover paljastaa aksentin. */
.v2-cookie__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  cursor: pointer;
  transition:
    color var(--transition-fast),
    background var(--transition-fast),
    border-color var(--transition-fast);
}

.v2-cookie__close:hover {
  color: var(--text-primary);
  border-color: var(--border-subtle);
}

.v2-cookie__close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.30);
}

/* Actions — 2 nappia, v2-buttonit, ghost + primary */
.v2-cookie__actions {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  flex-wrap: wrap;
}

.v2-cookie__actions .btn {
  flex: 1 1 auto;
  min-width: 0;
}

@media (min-width: 400px) {
  .v2-cookie__actions .btn { flex: 0 1 auto; }
}

/* ----------------------------------------------------------------------------
 * Granulaariset valinnat (Essential / Analytics / Marketing)
 * Näkyvät vain Customize/manage-tilassa. Hairline-rivit + pill-switch.
 * -------------------------------------------------------------------------- */
.v2-cookie__options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: calc(var(--space-1) * -1) 0 var(--space-1);
}

/* [hidden] vs display-sääntö: nosta spesifisyyttä jotta piilotus voittaa
   (.btn{display:inline-flex} ja .v2-cookie__options{display:flex} ohittaisivat
   muuten natiivin [hidden]{display:none}:n). Ei !important.
   ⚠ KRIITTINEN: itse banneri tarvitsee tämän myös — .v2-cookie{display:flex}
   ohitti natiivin [hidden]:n → suostumuksen jälkeen banneri jäi display:flex +
   opacity:0 (NÄKYMÄTÖN mutta position:fixed + pointer-events:auto) ja peitti
   footerin legal-linkit mobiilissa = klikkaukset eivät menneet läpi. Sama FAB:lle. */
.v2-cookie[hidden] { display: none; }
.v2-cookie-fab[hidden] { display: none; }
.v2-cookie__options[hidden] { display: none; }
.v2-cookie__actions .btn[hidden] { display: none; }
.v2-cookie__close[hidden] { display: none; }

/* Reveal-animaatio kun valinnat avataan (Customize/manage) */
.v2-cookie__options:not([hidden]) {
  animation: v2CookieOptIn var(--transition-slow) ease;
}
@keyframes v2CookieOptIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .v2-cookie__options:not([hidden]) { animation: none; }
}

.v2-cookie__opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border-subtle);
  cursor: pointer;
}

.v2-cookie__opt:first-child { border-top: none; }

.v2-cookie__opt-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.v2-cookie__opt-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

.v2-cookie__opt-desc {
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--text-secondary);
}

/* Pill-switch: appearance-none checkbox → liukukytkin */
.v2-cookie__switch {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  position: relative;
  width: 38px;
  height: 22px;
  border-radius: var(--radius-full);
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.v2-cookie__switch::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  background: var(--bg-elevated);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
  transition: transform var(--transition-fast);
}

.v2-cookie__switch:checked {
  background: var(--accent);
  border-color: var(--accent);
}

.v2-cookie__switch:checked::before {
  transform: translateX(16px);
}

.v2-cookie__switch:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.v2-cookie__switch:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.30);
}

@media (prefers-reduced-motion: reduce) {
  .v2-cookie__switch,
  .v2-cookie__switch::before { transition: none; }
}

/* Mobile tarkennukset */
@media (max-width: 480px) {
  .v2-cookie {
    bottom: var(--space-3);
    right: var(--space-3);
    left: var(--space-3);
    width: auto;
    max-width: none;
    padding: var(--space-4);
  }
}

/* ----------------------------------------------------------------------------
 * Kelluva evästeiden hallintapallo (vasen alakulma)
 * GDPR: suostumuksen voi avata uudelleen ja muuttaa/perua milloin tahansa.
 * Näkyy vasta kun valinta on tehty (banneri piilossa). Pidättyväinen hairline-
 * pallo — emerald-aksentti vasta hoverissa (yksi signaali per merkitys).
 * -------------------------------------------------------------------------- */
.v2-cookie-fab {
  position: fixed;
  bottom: var(--space-5);
  left: var(--space-5);
  z-index: 89;                 /* alle bannerin (90), ei mene päällekkäin */

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);

  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  cursor: pointer;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 8px 20px -10px rgba(15, 23, 42, 0.18);

  transition:
    color var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.v2-cookie-fab:hover {
  color: var(--accent);
  border-color: var(--accent);
  transform: translateY(-1px);
}

.v2-cookie-fab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.30);
}

@media (prefers-reduced-motion: reduce) {
  .v2-cookie-fab { transition: none; }
  .v2-cookie-fab:hover { transform: none; }
}

@media (max-width: 480px) {
  .v2-cookie-fab {
    bottom: var(--space-3);
    left: var(--space-3);
  }
}