/* BBeautiful — лахьякортти (/lahjakortti/, /en/gift-card/).
   Язык страницы — перламутр экрана выбора города: Tenor Sans, светлое
   полотно раковины, тёмные тексты, арки. Тема филиалов (style.css) тут
   не подключается — это витринная страница, не спиральная.
   Шрифт и токены скопированы из css/valinta.css: тот файл несёт всю
   сцену ворот и подключать его ради токенов значило бы тащить её CSS
   на каждую загрузку конструктора. */

/* ── Tenor Sans — локально, не с fonts.googleapis.com (см.
   tietosuojaseloste.html). Два подмножества, как в valinta.css. ── */

@font-face {
  font-family: "Tenor Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/tenor-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Tenor Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/tenor-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

:root {
  --vari-helmi:        #ece4e8;
  --vari-helmi-teksti: #2B2013;
  --vari-teksti-2:     rgba(43, 32, 19, .64);
  --vari-viiva:        rgba(43, 32, 19, .26);
  --vari-kulta-2:      #C4AA7A;
  /* Кнопки — фирменный акцент основного сайта (css/style.css):
     активная как «Varaa aika», неактивная как .nappi--toissijainen.
     Токены скопированы, как и остальные, — своих цветов не заводим. */
  --vari-korostus:     #a05a68;
  --vari-korostus-2:   #96525e;
  --vari-tausta-2:     #f3e9e6;
  --fontti: "Tenor Sans", "Segoe UI", Arial, sans-serif;
  --pyoristys: 18px;
}

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

html { background: var(--vari-helmi); }

body {
  margin: 0;
  min-height: 100svh;
  background: var(--vari-helmi);
  color: var(--vari-helmi-teksti);
  font-family: var(--fontti);
  font-weight: 400;          /* единственное начертание — жирности нет */
  line-height: 1.55;
}

/* Вуали перламутра — тот же набор пятен, что у сцены выбора
   (.valinta__tausta в valinta.css), на фиксированном слое: страница
   скроллится, полотно раковины стоит. */
.lahja-tausta {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(46% 38% at 22% 28%,
      rgba(250, 206, 200, .96) 0%, rgba(250, 206, 200, 0) 66%),
    radial-gradient(42% 36% at 80% 24%,
      rgba(210, 194, 240, .95) 0%, rgba(210, 194, 240, 0) 64%),
    radial-gradient(50% 44% at 68% 78%,
      rgba(250, 222, 166, .95) 0%, rgba(250, 222, 166, 0) 68%),
    radial-gradient(44% 40% at 16% 80%,
      rgba(196, 210, 226, .95) 0%, rgba(196, 210, 226, 0) 66%),
    radial-gradient(38% 34% at 50% 54%,
      rgba(255, 252, 246, .75) 0%, rgba(255, 252, 246, 0) 72%),
    radial-gradient(122% 98% at 50% 50%,
      rgba(255, 252, 248, 0) 30%, rgba(196, 186, 204, .32) 72%,
      rgba(158, 148, 172, .55) 100%),
    linear-gradient(164deg, #ecdfe6 0%, #f6ecdc 44%, #e2e2ec 100%)
    no-repeat var(--vari-helmi);
}

img { display: block; max-width: 100%; }

/* ── Шапка: замок слева, язык справа — как у текстовых страниц,
   только на перламутре ── */

.lahja-ylapalkki {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding: .4rem clamp(1rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--vari-viiva);
}

.lahja-ylapalkki img { height: 44px; width: auto; }

.lahja-kielet {
  display: flex;
  gap: .15rem;
  font-size: .85rem;
  letter-spacing: .12em;
}

.lahja-kielet a {
  min-width: 24px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 .4em;
  color: var(--vari-helmi-teksti);
  opacity: .55;
  text-decoration: none;
}

.lahja-kielet a:hover,
.lahja-kielet a:focus-visible { opacity: 1; }

.lahja-kielet a[aria-current] { opacity: .9; }

/* ── Каркас страницы ── */

.lahja {
  max-width: 1060px;
  margin: 0 auto;
  padding: clamp(1.6rem, 5vw, 3.2rem) clamp(1rem, 4vw, 2rem)
           clamp(2.4rem, 6vw, 4rem);
}

.lahja__otsikko {
  margin: 0 0 .5rem;
  font-size: clamp(1.7rem, 4.6vw, 2.4rem);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.lahja__johdanto {
  margin: 0 0 clamp(1.6rem, 4vw, 2.6rem);
  max-width: 56ch;
  color: var(--vari-teksti-2);
}

.lahja__sommittelu {
  display: grid;
  gap: clamp(1.8rem, 5vw, 3rem);
}

/* Широкий экран: форма слева, открытка справа и липнет — данные
   появляются на ней в момент ввода, и она обязана быть в кадре */
@media (min-width: 940px) {
  .lahja__sommittelu {
    grid-template-columns: minmax(0, 1fr) 380px;
    align-items: start;
  }

  .lahja__esikatselu { order: 2; position: sticky; top: 1.6rem; }
  .lahja__puoli      { order: 1; }
}

/* honeypot Web3Forms: поле-приманка, людям не показывается */
.lahja-piilo { display: none; }

/* Хранилище рисунка створки (defs + use): само не рисуется */
.lahja-piilo-svg { position: absolute; width: 0; height: 0; }

/* ── Открытка-предпросмотр ─────────────────────────────────────────
   Зеркало формы для глаз: значения дублируют поля, скринридеру хватает
   самих полей — весь блок aria-hidden. */

.lahjakortti {
  width: min(88vw, 350px);
  margin: 0 auto;
  padding: clamp(1.1rem, 3vw, 1.5rem) clamp(1rem, 3vw, 1.4rem) 1.1rem;
  border: 1px solid rgba(196, 170, 122, .65);
  border-radius: var(--pyoristys);
  background: linear-gradient(168deg, #f8f2f4 0%, #efe7eb 58%, #ece2e8 100%);
  box-shadow: 0 24px 48px -28px rgba(43, 32, 19, .45);
  text-align: center;
}

/* Карточка на странице кликабельна — открывает полноэкранный просмотр
   (js/lahjakortti.js); лёгкий масштаб-намёк только там, где есть
   ховер. В оверлее селектор не совпадает — там карточка обычная. */
.lahja__esikatselu .lahjakortti {
  cursor: pointer;
  transition: transform .2s ease;
}

@media (hover: hover) {
  .lahja__esikatselu .lahjakortti:hover { transform: scale(1.015); }
}

.lahjakortti__merkki { margin: 0 auto .35rem; height: 44px; width: auto; }

/* Трекинг .34em — как у набранных подписей логотипа (KAUNEUSHOITOLA
   в OG рисуется с трекингом 0.34 кегля, _work/tee-og.py) */
.lahjakortti__laji {
  margin: 0 0 .9rem;
  font-size: .68rem;
  letter-spacing: .34em;
  padding-left: .34em;         /* компенсация трекинга для центровки */
  color: var(--vari-teksti-2);
}

/* Портал: стена с арочным проёмом и две створки на петлях по краям
   проёма. Пропорция — родная пара створок сцены (1262×1492). */
.lahjakortti__portti {
  position: relative;
  width: 74%;
  margin: 0 auto;
  aspect-ratio: 1262 / 1492;
  perspective: 900px;
  perspective-origin: 50% 44%;
  border: 1px solid rgba(43, 32, 19, .38);
  overflow: hidden;
  background: #e3d9de;                     /* стена вокруг арки */
}

/* Арочный проём в стене. Перламутровое полотно (те же вуали, что у
   .lahja-tausta и экрана выбора города) с тёплым свечением — подложка:
   его видно, пока дизайн повода не загрузился, и если он не загрузится
   вовсе. Поверх — фон выбранного повода (img), вуаль читаемости и
   тексты. */
.lahjakortti__holvi {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 3.5%;
  bottom: 0;
  border-radius: 50% 50% 0 0 / 30% 30% 0 0;
  overflow: hidden;           /* арка кадрирует дизайн повода */
  background:
    radial-gradient(52% 40% at 50% 40%,
      rgba(255, 248, 232, .92) 0%, rgba(250, 222, 166, .4) 55%,
      rgba(250, 222, 166, 0) 82%),
    radial-gradient(46% 38% at 22% 26%,
      rgba(250, 206, 200, .85) 0%, rgba(250, 206, 200, 0) 66%),
    radial-gradient(42% 36% at 80% 22%,
      rgba(210, 194, 240, .8) 0%, rgba(210, 194, 240, 0) 64%),
    radial-gradient(50% 44% at 70% 82%,
      rgba(250, 222, 166, .75) 0%, rgba(250, 222, 166, 0) 68%),
    radial-gradient(44% 40% at 16% 82%,
      rgba(196, 210, 226, .8) 0%, rgba(196, 210, 226, 0) 66%),
    linear-gradient(164deg, #ecdfe6 0%, #f6ecdc 44%, #e2e2ec 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  padding: 12% 11% 22%;
}

/* Дизайн повода: вертикальные (800×1421) и квадратные (800×800)
   форматы кадрируются в арку одинаково — cover от центра, важная
   середина не режется. Файл грузится один, по выбору: src подставляет
   js/lahjakortti.js из data-kuva выбранного радио. */
.lahjakortti__aihekuva {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Вуаль читаемости поверх дизайна: у joulu и ilman в середине кадра
   золотые виньетки, и тёмный текст без светлой подложки вязнет в них.
   Снизу — полоса под строку филиала. */
.lahjakortti__holvi::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(74% 58% at 50% 46%,
      rgba(253, 249, 242, .9) 0%, rgba(253, 249, 242, .55) 58%,
      rgba(253, 249, 242, 0) 82%),
    linear-gradient(0deg,
      rgba(253, 249, 242, .8) 0%, rgba(253, 249, 242, 0) 16%);
}

/* Содержимое проёма проступает, когда створки уже расходятся */
.lahjakortti__tervehdys,
.lahjakortti__summa,
.lahjakortti__nimet,
.lahjakortti__kaupunki {
  opacity: 0;
  animation: lahja-sisus-esiin .8s ease-out .9s forwards;
}

/* Тексты — над дизайном повода и вуалью читаемости */
.lahjakortti__tervehdys,
.lahjakortti__summa,
.lahjakortti__nimet {
  position: relative;
  z-index: 2;
}

/* Не шире просвета между открытыми створками: длинное поздравление
   переносится (balance), а не прячется под них */
.lahjakortti__tervehdys {
  margin: 0;
  max-width: 72%;
  font-size: clamp(.74rem, 2.2vw, .86rem);
  letter-spacing: .08em;
  text-wrap: balance;
}

/* Поздравление меняется кросс-фейдом: класс on-vaihtuu гасит строку,
   js/lahjakortti.js ставит новый текст и снимает класс */
.lahjakortti__tervehdys { transition: opacity .22s ease; }
.lahjakortti__tervehdys.on-vaihtuu { opacity: 0; }

.lahjakortti__summa {
  margin: 0;
  font-size: clamp(1.4rem, 4.4vw, 1.75rem);
  letter-spacing: .06em;
}

@keyframes lahja-sisus-esiin {
  to { opacity: 1; }
}

/* Створки — стилизованные, рисунком в разметке (`#lahja-ovi-kuvio`):
   светлое полотно, тонкая арочная рамка и завитки латунью. Исходник —
   правая, левая — зеркало (как в сцене ворот). Зеркалит рисунок
   внутренний svg, а петлю и распах ведёт обёртка — иначе scaleX(-1)
   в одном transform с rotateY путал бы знаки осей. Обёртки стоят по
   проёму (петля на его краю), а не по всей стене. */
.lahjakortti__ovi {
  position: absolute;
  top: 3.5%;
  bottom: 0;
  width: 44%;
  animation: 1.6s cubic-bezier(.3, .6, .18, 1) .55s forwards;
}

.lahjakortti__ovikuva {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;   /* полотно нарисовано с напуском на шов створок */
}

.lahjakortti__ovi--vasen {
  left: 6%;
  transform-origin: left center;
  animation-name: lahja-ovi-vasen;
}

.lahjakortti__ovi--vasen .lahjakortti__ovikuva { transform: scaleX(-1); }

.lahjakortti__ovi--oikea {
  right: 6%;
  transform-origin: right center;
  animation-name: lahja-ovi-oikea;
}

/* Распах внутрь, к свету: свободная кромка уходит от зрителя.
   62° — чтобы у нижней кромки между створками помещалась строка
   филиала: при 58° она пряталась за их проекциями. */
@keyframes lahja-ovi-vasen {
  from { transform: rotateY(0); }
  to   { transform: rotateY(-62deg); }
}

@keyframes lahja-ovi-oikea {
  from { transform: rotateY(0); }
  to   { transform: rotateY(62deg); }
}

/* Карточка, вернувшаяся из полноэкранного просмотра: стоит сразу
   открытой, а не хлопает створками при каждом закрытии оверлея */
.lahjakortti.on-avattu .lahjakortti__ovi { animation: none; }
.lahjakortti.on-avattu .lahjakortti__ovi--vasen { transform: rotateY(-62deg); }
.lahjakortti.on-avattu .lahjakortti__ovi--oikea { transform: rotateY(62deg); }

.lahjakortti.on-avattu .lahjakortti__tervehdys,
.lahjakortti.on-avattu .lahjakortti__summa,
.lahjakortti.on-avattu .lahjakortti__nimet,
.lahjakortti.on-avattu .lahjakortti__kaupunki {
  animation: none;
  opacity: 1;
}

/* Кому / От кого — в проёме, под суммой. Ширина уже проёма: длинное
   имя не должно уползать под открытые створки. */
.lahjakortti__nimet {
  margin: .55rem 0 0;
  width: 64%;
  display: grid;
  gap: .4rem;
}

.lahjakortti__nimet > div {
  display: grid;
  gap: .06rem;
}

/* Подписи строчными, не капителью: у Ä в девятипиксельном кегле точки
   умляута тонут в сглаживании, и «KENELTÄ» читался как «KENELTA» */
.lahjakortti__nimet dt {
  font-size: .66rem;
  letter-spacing: .18em;
  padding-left: .18em;
  color: var(--vari-teksti-2);
}

.lahjakortti__nimet dd {
  margin: 0;
  min-height: 1.3em;           /* пустое значение не меняет высоту */
  font-size: .8rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.lahjakortti__nimet dd.on-tyhja { opacity: .3; }

/* Название филиала — мелко у нижней кромки проёма, в просвете между
   открытыми створками (их проекции держат по ~20% с краёв). Трекинг
   умеренный: строка длинная, с .34em она не влезала бы в просвет. */
.lahjakortti__kaupunki {
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 4.5%;
  z-index: 2;
  margin: 0;
  font-size: .52rem;
  letter-spacing: .14em;
  padding-left: .14em;
  white-space: nowrap;
  text-align: center;
  color: var(--vari-teksti-2);
}

/* Предпросмотр — не сертификат: сертификат приходит почтой */
.lahja__esikatselu-seloste {
  width: min(88vw, 350px);
  margin: .7rem auto 0;
  font-size: .78rem;
  text-align: center;
  color: var(--vari-teksti-2);
}

/* Кнопка полноэкранного просмотра — вторичная кнопка сайта */
.lahja-koko-nappi {
  display: block;
  margin: .8rem auto 0;
  padding: .5em 1.3em;
  border: 1px solid var(--vari-korostus);
  border-radius: 999px;
  background: none;
  color: var(--vari-korostus-2);
  font: inherit;
  font-size: .88rem;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background-color .18s ease;
}

.lahja-koko-nappi:hover,
.lahja-koko-nappi:focus-visible { background: var(--vari-tausta-2); }

/* ── Полноэкранный просмотр ─────────────────────────────────────────
   Оверлей: перламутр под тёмной вуалью, живая карточка переезжает
   внутрь узлом (id остаются уникальными) и вписывается в вьюпорт
   масштабом transform: scale — пропорции и композиция не трогаются.
   Перенос узла перезапускает CSS-анимации: створки проигрывают
   открытие заново — как их увидит получатель. */
.lahja-koko {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(rgba(43, 32, 19, .52), rgba(43, 32, 19, .52)),
    radial-gradient(46% 38% at 22% 28%,
      rgba(250, 206, 200, .96) 0%, rgba(250, 206, 200, 0) 66%),
    radial-gradient(42% 36% at 80% 24%,
      rgba(210, 194, 240, .95) 0%, rgba(210, 194, 240, 0) 64%),
    radial-gradient(50% 44% at 68% 78%,
      rgba(250, 222, 166, .95) 0%, rgba(250, 222, 166, 0) 68%),
    linear-gradient(164deg, #ecdfe6 0%, #f6ecdc 44%, #e2e2ec 100%);
  opacity: 0;
  transition: opacity .25s ease;
}

.lahja-koko.on-auki { opacity: 1; }

.lahja-koko[hidden] { display: none; }

/* Клик мимо карточки падает на оверлей и закрывает его */
.lahja-koko__paikka { display: flex; pointer-events: none; }

.lahja-koko .lahjakortti {
  width: 350px;
  max-width: none;
  margin: 0;
  pointer-events: auto;
  transform: scale(var(--koko-kerroin, 1));
}

.lahja-koko__sulje {
  position: absolute;
  top: max(.9rem, env(safe-area-inset-top));
  right: max(.9rem, env(safe-area-inset-right));
  width: 44px;
  height: 44px;
  border: 1px solid rgba(253, 249, 242, .55);
  border-radius: 50%;
  background: rgba(43, 32, 19, .35);
  color: #fdf9f2;
  font: inherit;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color .18s ease;
}

.lahja-koko__sulje:hover { background: rgba(43, 32, 19, .6); }

.lahja-koko__sulje:focus-visible {
  outline: 2px solid #fdf9f2;
  outline-offset: 2px;
}

/* Скролл страницы заперт, пока открыт просмотр (класс на <html>) */
.on-kiinnitetty { overflow: hidden; }

/* ── Мини-окошко на телефоне ────────────────────────────────────────
   Появляется, когда предпросмотр ушёл за экран (IntersectionObserver
   в js/lahjakortti.js) — в духе липкой полосы мастера на страницах
   филиалов: светлая закреплённая плашка, скругление из токенов,
   лёгкая тень. Тап открывает полноэкранный просмотр. Стоит справа
   внизу — кнопка отправки живёт слева, а нижний отступ уважает
   системные жесты (safe-area). */
.lahja-pikku {
  position: fixed;
  right: .75rem;
  bottom: calc(.75rem + env(safe-area-inset-bottom));
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: .5rem .6rem .45rem;
  border: 1px solid var(--vari-viiva);
  border-radius: var(--pyoristys);
  background: rgba(248, 242, 244, .97);
  box-shadow: 0 10px 26px -14px rgba(43, 32, 19, .5);
  font: inherit;
  color: var(--vari-helmi-teksti);
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .2s ease, transform .22s ease, visibility 0s .22s;
}

.lahja-pikku.on-nakyvissa {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: opacity .2s ease, transform .22s ease;
}

.lahja-pikku:focus-visible {
  outline: 2px solid var(--vari-korostus);
  outline-offset: 2px;
}

/* Широкий экран: карточка липнет в своей колонке и из кадра не
   уходит — окошку там нечего делать */
@media (min-width: 940px) {
  .lahja-pikku { display: none; }
}

/* Миниатюра открытки: арка с фоном повода (URL ставит JS — тот же
   файл, что уже загружен большим предпросмотром) и суммой на вуали */
.lahja-pikku__holvi {
  position: relative;
  width: 62px;
  height: 76px;
  border-radius: 50% 50% 0 0 / 32% 32% 0 0;
  overflow: hidden;
  background-color: #f6efe9;
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
}

.lahja-pikku__holvi::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(78% 58% at 50% 52%,
    rgba(253, 249, 242, .78) 0%, rgba(253, 249, 242, 0) 82%);
}

.lahja-pikku__summa {
  position: relative;
  z-index: 1;
  font-size: .8rem;
  letter-spacing: .04em;
}

/* без умляутов, капитель безопасна (ср. Keneltä в проёме) */
.lahja-pikku__nimi {
  font-size: .6rem;
  letter-spacing: .18em;
  padding-left: .18em;
  color: var(--vari-teksti-2);
  text-transform: uppercase;
}

/* ── Форма ── */

.lahja-lomake fieldset {
  margin: 0 0 clamp(1.4rem, 3.5vw, 1.9rem);
  padding: 0;
  border: 0;
  min-width: 0;
}

.lahja-lomake legend {
  margin: 0 0 .7rem;
  padding: 0;
  font-size: .8rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--vari-helmi-teksti);
}

/* Плашки-выборы: филиал, повод, сумма. Радио лежит поверх плашки
   прозрачным — фокус и стрелки достаются даром (приём hinnasto__aika
   в style.css). */
.lahja-valinnat {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.lahja-valinta {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

.lahja-valinta input[type="radio"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

/* Невыбранная плашка — вторичная кнопка сайта (.nappi--toissijainen в
   style.css): контур акцентом без заливки. Выбранная — как «Varaa
   aika»: заливка акцентом, белый текст. */
.lahja-valinta__teksti {
  display: flex;
  flex-direction: column;
  gap: .05rem;
  padding: .5em 1.05em;
  border: 1px solid var(--vari-korostus);
  border-radius: 999px;
  background: none;
  color: var(--vari-korostus-2);
  font-size: .92rem;
  letter-spacing: .04em;
  white-space: nowrap;
  transition: background-color .18s ease, border-color .18s ease,
              color .18s ease;
}

.lahja-valinta__teksti small {
  font-size: .72rem;
  color: inherit;
  opacity: .78;
  letter-spacing: .02em;
}

.lahja-valinta:hover .lahja-valinta__teksti {
  background: var(--vari-tausta-2);
}

.lahja-valinta input:checked + .lahja-valinta__teksti {
  border-color: var(--vari-korostus);
  background: var(--vari-korostus);
  color: #fff;
}

.lahja-valinta input:focus-visible + .lahja-valinta__teksti {
  outline: 2px solid var(--vari-korostus);
  outline-offset: 2px;
}

/* плашки филиалов — с адресом второй строкой, не таблетка */
.lahja-valinta--toimipiste .lahja-valinta__teksti {
  border-radius: 14px;
  padding: .6em 1.1em;
}

/* Своя сумма: радио «Muu» + числовое поле рядом. Фокус в поле сам
   выбирает радио (js/lahjakortti.js). */
.lahja-oma {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.lahja-oma-summa {
  width: 5.2em;
  padding: .42em .6em;
  border: 1px solid var(--vari-viiva);
  border-radius: 10px;
  background: rgba(255, 255, 255, .6);
  font: inherit;
  font-size: .92rem;
  color: inherit;
}

.lahja-oma-summa:focus-visible {
  outline: 2px solid var(--vari-korostus);
  outline-offset: 1px;
}

.lahja-oma__euro { font-size: .92rem; color: var(--vari-teksti-2); }

/* подсказка диапазона своей суммы */
.lahja__vihje {
  flex-basis: 100%;
  margin: .3rem 0 0;
  font-size: .78rem;
  color: var(--vari-teksti-2);
}

/* Текстовые поля */
.lahja-kentta {
  display: grid;
  gap: .25rem;
  margin: 0 0 .9rem;
}

.lahja-kentta label {
  font-size: .82rem;
  letter-spacing: .06em;
  color: var(--vari-teksti-2);
}

.lahja-kentta input {
  padding: .58em .75em;
  border: 1px solid var(--vari-viiva);
  border-radius: 10px;
  background: rgba(255, 255, 255, .6);
  font: inherit;
  font-size: .95rem;
  color: inherit;
}

.lahja-kentta input:focus-visible {
  outline: 2px solid var(--vari-korostus);
  outline-offset: 1px;
}

/* Пояснение под полем: зачем оно и что с ним будет */
.lahja-kentta__seloste {
  font-size: .75rem;
  color: var(--vari-teksti-2);
}

/* Кому/от кого — парой на широком экране */
.lahja-kentat--pari {
  display: grid;
  gap: 0 1rem;
}

@media (min-width: 560px) {
  .lahja-kentat--pari { grid-template-columns: 1fr 1fr; }
}

/* ── Согласие и отправка ── */

.lahja-suostumus {
  display: flex;
  gap: .55rem;
  align-items: flex-start;
  margin: 0 0 1.1rem;
  font-size: .85rem;
  color: var(--vari-teksti-2);
}

.lahja-suostumus input {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  margin: .15rem 0 0;
  accent-color: var(--vari-korostus);
}

.lahja-suostumus a { color: inherit; }

/* Кнопка отправки — главный CTA, как «Varaa aika» (.nappi) */
.lahja-laheta {
  display: inline-block;
  padding: .78em 2.1em;
  border: 1px solid var(--vari-korostus);
  border-radius: 999px;
  background: var(--vari-korostus);
  color: #fff;
  font: inherit;
  font-size: 1rem;
  letter-spacing: .14em;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease;
}

.lahja-laheta:hover:not(:disabled),
.lahja-laheta:focus-visible {
  background: var(--vari-korostus-2);
  border-color: var(--vari-korostus-2);
}

.lahja-laheta:disabled {
  opacity: .38;
  cursor: not-allowed;
}

.lahja__maksuhuomio {
  margin: .7rem 0 0;
  font-size: .82rem;
  color: var(--vari-teksti-2);
}

/* Ошибка отправки: честная строка над кнопкой, с почтой филиала */
.lahja-virhe {
  margin: 0 0 1rem;
  padding: .7rem .9rem;
  border: 1px solid rgba(150, 82, 94, .55);
  border-radius: 10px;
  background: rgba(150, 82, 94, .08);
  font-size: .88rem;
  color: #6d3540;
}

.lahja-virhe a { color: inherit; }

.lahja-virhe[hidden] { display: none; }

/* ── Экран подтверждения ── */

.lahja-kiitos h2 {
  margin: 0 0 .6rem;
  font-size: clamp(1.3rem, 3.6vw, 1.7rem);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.lahja-kiitos h2:focus { outline: none; }

.lahja-kiitos p { margin: 0 0 .8rem; color: var(--vari-teksti-2); }

.lahja-kiitos__tiivistelma { color: var(--vari-helmi-teksti) !important; }

.lahja-kiitos h3 {
  margin: 1.3rem 0 .4rem;
  font-size: .85rem;
  letter-spacing: .3em;
  text-transform: uppercase;
}

.lahja-kiitos ul {
  margin: 0 0 1rem;
  padding-left: 1.2rem;
  color: var(--vari-teksti-2);
}

.lahja-kiitos li { margin: .25rem 0; }

/* ── Подвал ── */

.lahja-alaviite {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: center;
  padding: 1.1rem clamp(1rem, 4vw, 2rem) 1.6rem;
  border-top: 1px solid var(--vari-viiva);
  font-size: .8rem;
  letter-spacing: .1em;
}

.lahja-alaviite a {
  color: var(--vari-helmi-teksti);
  opacity: .55;
  text-decoration: none;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
}

.lahja-alaviite a:hover,
.lahja-alaviite a:focus-visible { opacity: 1; }

/* ── prefers-reduced-motion: открытое состояние сразу ── */

@media (prefers-reduced-motion: reduce) {
  .lahjakortti__ovi { animation: none; }
  .lahjakortti__ovi--vasen { transform: rotateY(-62deg); }
  .lahjakortti__ovi--oikea { transform: rotateY(62deg); }

  .lahjakortti__tervehdys,
  .lahjakortti__summa,
  .lahjakortti__nimet,
  .lahjakortti__kaupunki { animation: none; opacity: 1; }

  .lahjakortti__tervehdys { transition: none; }
  .lahja-valinta__teksti { transition: none; }
  .lahja-laheta { transition: none; }

  .lahja__esikatselu .lahjakortti { transition: none; }
  .lahja-koko { transition: none; }
  .lahja-koko__sulje { transition: none; }
  .lahja-koko-nappi { transition: none; }
  .lahja-pikku { transition: none; transform: none; }
}