/* ==========================================================================
   Секція «Ваше лого на сторінці оплати» (#brand) —
   resources/views/_landing_partials/brand.blade.php.

   Префікс класів — лише .lvb-*. Кольори — лише токени (--lv3-*, --ink-*,
   --paper) і прозорі відтінки --ink-900, як у v3.css. Кольори демо-лого
   живуть у самому SVG: це бренд вигаданої кавʼярні, а не палітра лендингу.

   Стан перемикають нативні radio через комбінатор ~. Він бачить лише
   НАСТУПНИХ сусідів, тому radio стоять у розмітці перед сегментом,
   підписами й сценою. Так перемикач, підпис, адреса й мініатюра працюють
   і без JS; Alpine керує лише мокапом телефона, бо контракт партіала
   _partials/phone_mockup — Alpine-геттер pp.
   ========================================================================== */

/* В одну колонку підпис стоїть ПІД сценою, а не між перемикачем і сценою:
   підписи різної довжини (1–4 рядки на 320px), і над сценою кожне
   перемикання смикало б бульбашку й телефон просто під пальцем.
   Сегмент угорі екрана 390×664 — і підпис усе одно в кадрі. */
.lvb {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "copy" "seg" "stage" "caps" "fine" "cta";
}

.lvb-copy { grid-area: copy; margin-bottom: 28px; }
/* Кегль і трекінг — як у h2 решти секцій (інлайн у партіалах). */
.lvb-h2 {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.8vw, 60px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: .98;
  color: var(--ink-900);
  margin: 0 0 18px;
  text-wrap: balance;
}
.lvb-lead { font-size: 19px; line-height: 1.5; color: var(--ink-600); max-width: 520px; text-wrap: pretty; }

/* Radio сховані візуально, але лишаються в порядку Tab і в дереві доступності.
   Стоять у зоні сегмента, а не в куті секції: фокус стрілками прокручує
   сфокусований елемент у кадр, і з кута секції сторінка стрибала б до h2. */
.lvb-r {
  position: absolute;
  grid-area: seg;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Сегментований перемикач. Біла «таблетка» — ::before, що їде під обраний
   сегмент; --lvb-n (кількість станів) задає розмітка: без тарифу з доменом
   сегментів два. */
.lvb-seg {
  grid-area: seg;
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  padding: 4px;
  border-radius: 999px;
  background: rgba(10, 15, 28, .06);
  max-width: 420px;
}
.lvb-seg::before {
  content: '';
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 8px) / var(--lvb-n, 2));
  border-radius: 999px;
  background: var(--paper);
  box-shadow: 0 2px 8px -2px rgba(10, 15, 28, .18);
  transition: transform .22s var(--ease-out);
}
#lvb-r-logo:checked ~ .lvb-seg::before { transform: translateX(100%); }
#lvb-r-domain:checked ~ .lvb-seg::before { transform: translateX(200%); }

/* 52px і touch-action — ціль для пальця без затримки подвійного тапу. */
.lvb-seg label {
  position: relative;
  z-index: 1;
  min-height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 6px 8px;
  border-radius: 999px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  text-align: center;
}
/* ink-600, а не ink-500: на сірому треку сегмента ink-500 не дає 4,5:1. */
.lvb-seg-t { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink-600); }
.lvb-seg-s { font-size: 12px; font-weight: 600; color: var(--ink-600); }

#lvb-r-none:checked ~ .lvb-seg [for="lvb-r-none"] .lvb-seg-t,
#lvb-r-logo:checked ~ .lvb-seg [for="lvb-r-logo"] .lvb-seg-t,
#lvb-r-domain:checked ~ .lvb-seg [for="lvb-r-domain"] .lvb-seg-t { color: var(--ink-900); }
#lvb-r-logo:checked ~ .lvb-seg [for="lvb-r-logo"] .lvb-paid,
#lvb-r-domain:checked ~ .lvb-seg [for="lvb-r-domain"] .lvb-paid { color: var(--lv3-accent-ink); }

/* Кільце фокусу малюємо на підписі: сам radio схований. */
#lvb-r-none:focus-visible ~ .lvb-seg [for="lvb-r-none"],
#lvb-r-logo:focus-visible ~ .lvb-seg [for="lvb-r-logo"],
#lvb-r-domain:focus-visible ~ .lvb-seg [for="lvb-r-domain"] { outline: 3px solid var(--ink-900); outline-offset: 2px; }

/* Видно лише підпис обраного стану. Схований лишається описом свого radio:
   accname читає прихований вузол, на який aria-describedby посилається напряму. */
.lvb-caps { grid-area: caps; margin-top: 16px; max-width: 460px; }
.lvb-cap { display: none; font-size: 15px; line-height: 1.5; color: var(--ink-600); text-wrap: pretty; }
#lvb-r-none:checked ~ .lvb-caps #lvb-cap-none,
#lvb-r-logo:checked ~ .lvb-caps #lvb-cap-logo,
#lvb-r-domain:checked ~ .lvb-caps #lvb-cap-domain { display: block; }
/* «₴/міс.» не рветься після скісної риски. */
.lvb-nowrap { white-space: nowrap; }

/* ── Сцена: повідомлення з карткою посилання + верх сторінки оплати ─────── */

.lvb-stage { grid-area: stage; margin-top: 28px; display: grid; gap: 16px; justify-items: center; }

/* Нейтральне вихідне повідомлення, а не копія інтерфейсу месенджера:
   без смуги, часу, галочок і назви. В одну колонку — рівно по ширині
   телефона під ним: різні ширини й вирівнювання читались як зсув верстки. */
.lvb-msg {
  width: min(100%, 290px);
  padding: 12px 12px 12px 14px;
  border-radius: 20px 20px 6px 20px;
  background: var(--lv3-accent-soft);
}
/* Дві адреси в одній клітинці — рядок не стрибає за висотою, коли довша
   адреса з доменом переноситься. Без підкреслення: клікати нікуди. */
.lvb-url {
  display: grid;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  color: var(--lv3-accent);
  overflow-wrap: anywhere;
}
.lvb-url > span { grid-area: 1 / 1; transition: opacity .18s var(--ease-out), visibility 0s; }
.lvb-url > .lvb-url-own,
#lvb-r-domain:checked ~ .lvb-stage .lvb-url-main { visibility: hidden; opacity: 0; transition: opacity .18s var(--ease-out), visibility 0s linear .18s; }
#lvb-r-domain:checked ~ .lvb-stage .lvb-url-own { visibility: visible; opacity: 1; transition: opacity .18s var(--ease-out), visibility 0s; }

.lvb-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  min-height: 76px;
  padding: 12px;
  border-radius: 12px;
  background: var(--paper);
}
.lvb-card-t { font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--ink-900); }
.lvb-card-d { margin-top: 3px; font-size: 13px; line-height: 1.4; color: var(--ink-600); }
.lvb-thumb { width: 48px; height: 48px; border-radius: 10px; }
/* Без лого сторінка оплати не віддає og:image — мініатюри в прев'ю немає. */
#lvb-r-none:checked ~ .lvb-stage .lvb-thumb { display: none; }

/* Мокап у натуральному розмірі (k = 1), обрізаний до верху екрана: там
   рядок лого з назвою і сума — усе, що змінює тариф. .lv3-phone-fit не
   беремо: --k для нього рахує скрипт hero. На телефоні 236px — рівно до
   призначення (лого-рядок 82–116px від верху рамки, сума 148–180);
   розчиняється лише низ, щоб сума лишалась чіткою. */
.lvb-phone {
  width: 290px;
  max-width: 100%;
  height: 236px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 48px), transparent);
          mask-image: linear-gradient(#000 calc(100% - 48px), transparent);
}
/* Тінь рамки обрізалась би разом із низом телефона. */
.lvb-phone .cr-phone { box-shadow: none; }
/* Декорація, а не інтерфейс — як мокап у hero (v3.css): скрол вимкнено,
   бо Chrome 132+ робить скрол-контейнер без фокусованих елементів
   фокусованим з клавіатури, а блок під aria-hidden. */
.lvb-phone .cr-pp-content { overflow: hidden !important; }
.lvb-phone .cr-pp-scrollcue,
.lvb-phone .cr-pp-fade { display: none !important; }

.lvb-fine { grid-area: fine; margin-top: 20px; max-width: 460px; font-size: 13px; line-height: 1.5; color: var(--ink-600); text-wrap: pretty; }

/* Головна кнопка на світлому — синя з білим (DESIGN_SYSTEM). На класі,
   а не на інлайн-токенах --lv3-cta-*: їх на сторінці рівно п'ять, і це замок. */
.lvb-cta {
  grid-area: cta;
  justify-self: start;
  align-self: start;
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  background: var(--lv3-accent);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  touch-action: manipulation;
}
/* (0,3,1) перебиває a:not([style*="background"]):hover (0,2,1) з v3.css,
   інакше кнопка блідла б на .72 разом із текстом. */
.lvb a.lvb-cta:hover { opacity: 1; background: var(--lv3-deep); }
.lvb a.lvb-cta:active { transform: translateY(1px); }

/* На всю ширину — лише на телефоні: на планшеті три сегменти розʼїжджались
   на 700+ px, і підписи відривались один від одного. */
@media (max-width: 699px) {
  .lvb-seg { max-width: none; }
}
@media (max-width: 860px) {
  .lvb-cta { justify-self: stretch; max-width: 420px; }
}

@media (min-width: 700px) {
  .lvb-stage { grid-template-columns: minmax(0, 320px) 290px; justify-content: center; align-items: center; gap: 24px; }
  .lvb-msg { width: auto; justify-self: stretch; }
  .lvb-phone {
    height: 460px;
    -webkit-mask-image: linear-gradient(#000 calc(100% - 96px), transparent);
            mask-image: linear-gradient(#000 calc(100% - 96px), transparent);
  }
}

/* Дві колонки: сцена праворуч на всю висоту, тож підпис повертається під
   перемикач. Тут підписи лежать в одній клітинці (висоту задає найдовший),
   інакше при кожному перемиканні стрибали б дрібний рядок і кнопка під ним. */
@media (min-width: 1100px) {
  .lvb {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 64px;
    grid-template-areas: "copy stage" "seg stage" "caps stage" "fine stage" "cta stage";
    grid-template-rows: auto auto auto auto 1fr;
  }
  .lvb-stage { margin-top: 0; }
  .lvb-caps { display: grid; margin-top: 14px; }
  .lvb-cap {
    display: block;
    grid-area: 1 / 1;
    visibility: hidden;
    opacity: 0;
    transition: opacity .18s var(--ease-out), visibility 0s linear .18s;
  }
  #lvb-r-none:checked ~ .lvb-caps #lvb-cap-none,
  #lvb-r-logo:checked ~ .lvb-caps #lvb-cap-logo,
  #lvb-r-domain:checked ~ .lvb-caps #lvb-cap-domain { visibility: visible; opacity: 1; transition: opacity .18s var(--ease-out), visibility 0s; }
}

@media (prefers-reduced-motion: reduce) {
  .lvb-seg::before, .lvb-cap, .lvb-url > span { transition: none !important; }
  .lvb a.lvb-cta:active { transform: none; }
}