/* Оформлення замовлення: доповнення до selena.css і components.css лише для цієї сторінки. */

/* Заголовок кроку отримує фокус після переходу між кроками */
.checkout-panel h2:focus{outline:none}
.checkout-panel h2:focus-visible{outline:2px solid var(--blue);outline-offset:4px}

/* Помилка стоїть одразу під полем, якого стосується */
.checkout-error{padding-left:10px;border-left:3px solid #aa2444;font-weight:650}
.checkout-error .text-link{font-size:inherit;color:#aa2444}
.checkout-panel .field [aria-invalid=true],.checkout-panel [aria-invalid=true]{border-color:#aa2444;box-shadow:3px 3px 0 #aa2444}
.question-block .checkout-error,.place-finder+.checkout-error{margin-top:4px}

/* Кнопка оплати під час переходу: лишається у фокусі, але не натискається вдруге */
.checkout-next[aria-disabled=true],[data-pay][aria-disabled=true]{opacity:.75;cursor:progress}
.checkout-next[aria-disabled=true]:hover,[data-pay][aria-disabled=true]:hover{transform:none;box-shadow:4px 4px 0 var(--ink)}
[data-pay] .lucide-loader-circle{animation:selena-spin 1s linear infinite}
@media(prefers-reduced-motion:reduce){[data-pay] .lucide-loader-circle{animation:none}}

/* Біля кнопки оплати: сума, куди прийде розбір, разовий платіж; під кнопкою — згода */
.checkout-pay{margin-top:30px;border-top:2px solid var(--ink)}
.checkout-pay-total{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0;padding:16px 0;border-bottom:1px solid var(--border);font-weight:850;color:var(--ink)}
.checkout-pay-total strong{font-family:var(--font-display);font-size:26px;letter-spacing:-.05em;white-space:nowrap}
.checkout-pay-email{margin:14px 0 0;font-size:14px;line-height:1.5;color:var(--dim);overflow-wrap:anywhere}
.checkout-pay-email strong{color:var(--ink);font-weight:750}
.checkout-pay-email .text-link{display:inline;margin-left:6px;font-size:13px;text-underline-offset:4px}
.checkout-pay-once{display:flex;align-items:center;gap:8px;margin:8px 0 0;font-size:13px;font-weight:750;color:var(--ink)}
.checkout-pay-once svg{color:var(--blue);flex-shrink:0}
.checkout-pay~.checkout-next,.checkout-pay~.checkout-offer-actions{margin-top:24px}
.checkout-terms{margin:14px 0 0;font-size:12px;line-height:1.55;color:var(--dim)}
.checkout-terms a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.checkout-offer-actions .button.outline{box-shadow:4px 4px 0 var(--ink)}

/* Збережена картка: «Оплата карткою •••• 1234», «Інша картка», «Забути картку»; галочка «Запам’ятати картку» */
.checkout-pay-card{display:flex;align-items:center;gap:8px;margin:14px 0 0;font-size:15px;font-weight:650;color:var(--ink)}
.checkout-pay-card svg{color:var(--blue);flex-shrink:0}
.checkout-pay-card strong{font-weight:850;white-space:nowrap}
.checkout-card-actions{display:flex;flex-wrap:wrap;gap:6px 20px;margin:8px 0 0}
.checkout-card-actions .text-link{font-size:14px;text-underline-offset:4px}
.checkout-card-actions [aria-disabled=true]{opacity:.6;cursor:progress}
.checkout-panel .checkout-save-card{align-items:flex-start;margin:16px 0 0;color:var(--ink);font-weight:700;line-height:1.4}
.checkout-save-card input{accent-color:var(--blue);width:20px;height:20px;flex-shrink:0;margin:1px 0 0}
.checkout-save-card small{display:block;margin-top:3px;font-size:13px;font-weight:500;color:var(--dim)}
.checkout-card-note{margin:10px 0 0;font-size:14px;font-weight:650;line-height:1.5;color:var(--ink)}

/* Знайдені міста: кнопки, а не радіокнопки */
.place-results .place-option{width:100%;text-align:left;font:inherit;font-size:14px;font-weight:650;line-height:1.4;color:var(--ink);min-height:44px;align-items:center}
.place-results .place-option:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.place-chosen span{min-width:0;overflow-wrap:anywhere}
/* Довга назва міста переноситься всередині рядка, а не під галочку: галочка, назва й «Змінити» в одному ряду */
.place-status .place-chosen{flex-wrap:nowrap}
.place-status .place-chosen .text-link{flex-shrink:0}
.place-status{display:grid;gap:8px;min-width:0}

/* Підказки міста під полем (places.js): список поверх форми, фокус лишається в полі */
.place-search{position:relative}
.place-suggest{position:absolute;z-index:20;top:calc(100% + 6px);left:0;right:0;background:#fffdf8;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}
.place-suggest[hidden],.place-suggest-list[hidden]{display:none}
.place-suggest-list{list-style:none;margin:0;padding:0}
.place-suggest-option{min-height:44px;padding:12px 14px;border-bottom:1px solid var(--border);font-size:14px;font-weight:500;line-height:1.35;color:var(--ink);cursor:pointer;overflow-wrap:anywhere}
.place-suggest-option strong{font-weight:800}
.place-suggest-option:hover{background:var(--lilac)}
.place-suggest-option[aria-selected=true]{background:var(--lilac);box-shadow:inset 4px 0 0 var(--blue)}
.place-suggest-more{display:block;width:100%;min-height:44px;margin:0;padding:12px 14px;border:0;background:var(--ivory);font:inherit;font-size:13px;font-weight:700;line-height:1.4;color:var(--dim);text-align:left;cursor:pointer}
.place-suggest-more:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}

/* Дані з безкоштовного розрахунку */
.checkout-prefill{margin:0 0 4px;padding:10px 14px;background:var(--lilac);border:2px solid var(--ink);font-size:14px;font-weight:650;line-height:1.5;color:var(--ink)}

/* Карти з пробного розкладу */
.cards-mode--three{grid-template-columns:1fr}
@media(min-width:900px){.cards-mode--three{grid-template-columns:repeat(3,minmax(0,1fr))}}
.trial-cards{padding:14px 16px;background:var(--mint);border:2px solid var(--ink)}
.trial-cards-title{font-size:14px;font-weight:800;color:var(--ink)}
.trial-cards-list{list-style:decimal;padding-left:22px;margin:8px 0;display:grid;gap:6px;font-size:15px;font-weight:700;color:var(--ink)}
.trial-cards-list small{font-size:12px;font-weight:650;color:var(--dim)}
.trial-cards-list .trial-thumb{display:inline-block;width:38px;margin-right:10px;vertical-align:middle;border-width:1.5px}
.trial-cards-list .trial-thumb--empty{height:61px;background:var(--lilac);border:1.5px solid var(--ink)}
.trial-cards-list--art .trial-card-name{display:inline-block;max-width:calc(100% - 52px);vertical-align:middle}
.trial-cards-list--art small{display:block}
.trial-cards .field-help{margin:0}

/* Уже відомі дані (попереднє замовлення або збережені в браузері): один рядок і «Змінити» */
.checkout-known-line{margin:10px 0 0;font-size:16px;font-weight:650;line-height:1.5;color:var(--ink);overflow-wrap:anywhere}
.checkout-known-line strong{font-weight:800}
.checkout-known-actions{display:flex;flex-wrap:wrap;gap:6px 20px;margin:8px 0 0}
.checkout-known-actions .text-link{font-size:14px;text-underline-offset:4px}
.checkout-known--birth{margin-top:4px;padding:14px 16px;background:var(--mint);border:2px solid var(--ink)}
.checkout-known--birth .checkout-known-line{margin-top:4px}
.checkout-known-title{margin:0;font-size:12px;font-weight:850;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}

/* «Уточнити відповідь»: розклад, який уточнюємо, і місце для нової карти */
.clarify-spread{margin:22px 0 4px;padding:16px;background:var(--lilac);border:2px solid var(--ink)}
.clarify-spread-title{margin:0;font-size:12px;font-weight:850;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.clarify-spread-q{margin:12px 0 0;font-size:15px;font-weight:750;line-height:1.45;color:var(--ink);overflow-wrap:anywhere}
.clarify-cards{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:12px}
.clarify-cards li{display:grid;gap:6px;align-content:start;min-width:0}
.clarify-thumb{display:block;width:100%;aspect-ratio:480/768;border:2px solid var(--ink)}
img.clarify-thumb{box-shadow:3px 3px 0 var(--ink)}
.clarify-thumb--empty{background:var(--ivory)}
.clarify-thumb--new{display:grid;place-items:center;background:transparent;border-style:dashed;font-family:var(--font-display);font-size:24px;font-weight:800;color:var(--blue)}
.clarify-card-text{display:grid;gap:1px;min-width:0;font-size:13px;line-height:1.3;color:var(--ink);overflow-wrap:anywhere}
.clarify-card-text small{font-size:11px;font-weight:650;color:var(--dim)}
.clarify-card-text strong{font-weight:800}

/* «Уточнити відповідь» недоступне: пояснення й одна кнопка */
.checkout-unavailable .button{margin-top:10px}

/* Повернулась зі сторінки оплати */
.checkout-resume{margin:14px 0 6px;padding:14px 16px;background:var(--lilac);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);font-size:14px;font-weight:650;line-height:1.5;color:var(--ink)}
.checkout-resume--paid{background:var(--mint)}
.checkout-resume--checking{background:var(--coral)}
.checkout-resume .text-link{margin-top:8px;font-size:14px}

/* Інші формати таро (одне, три, п’ять питань, «Він і я»): посилання-картки, поточний позначений */
.checkout-formats{margin:22px 0 4px}
.checkout-formats-title{margin:0 0 8px;font-size:12px;font-weight:850;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.checkout-formats ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.checkout-format{display:grid;align-content:start;gap:2px;height:100%;padding:10px 12px;border:2px solid var(--ink);background:#fffdf8;color:var(--ink);text-decoration:none;line-height:1.3;transition:background .2s ease}
.checkout-format:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.checkout-format strong{font-size:14px;font-weight:800;overflow-wrap:anywhere}
.checkout-format b{font-family:var(--font-display);font-size:17px;letter-spacing:-.04em;white-space:nowrap}
.checkout-format small{font-size:12px;font-weight:650;color:var(--dim)}
.checkout-format.current{background:var(--mint);box-shadow:3px 3px 0 var(--ink);cursor:default}

/* Готові питання: кнопка під полем, з якої теми питання, «Повернути мій текст» */
.qpick-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.checkout-panel .qpick-open{min-height:44px;padding:9px 14px;gap:10px;font-size:14px;background:var(--lilac);box-shadow:3px 3px 0 var(--ink)}
.qpick-open svg{flex-shrink:0;transition:transform .2s ease}
.qpick-open[aria-expanded=true] svg{transform:rotate(180deg)}
.qpick-row .text-link{font-size:14px;text-underline-offset:4px}
.qpick-note{margin:0;font-size:13px;font-weight:600;line-height:1.5;color:var(--dim)}

/* Список готових питань. Під полем — однакової висоти для будь-якої теми, щоб сторінка не стрибала */
.qpick{display:flex;flex-direction:column;background:var(--lilac);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);color:var(--ink)}
.qpick-top{padding:14px 16px 12px;border-bottom:2px solid var(--ink)}
.qpick-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.qpick-head h3{margin:0;font-size:18px;letter-spacing:-.045em;line-height:1.25}
.qpick-head h3 span{font-family:var(--font-body);font-size:14px;font-weight:700;letter-spacing:0;color:var(--dim)}
.qpick-head h3:focus{outline:none}
.qpick-head h3:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.qpick-close{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;padding:0;border:2px solid var(--ink);background:#fffdf8;color:var(--ink);cursor:pointer}
.qpick-close:focus-visible,.qpick-cat:focus-visible,.qpick-q:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* «Він / Вона»: дві радіокнопки у вигляді перемикача (сама радіокнопка невидима, але фокусується) */
.qpick-gender,.series-block .qpick-gender{margin:12px 0 0;padding:0;border:0;min-width:0}
.qpick-gender legend{float:left;margin:0 12px 0 0;padding:0;font-size:13px;font-weight:750;line-height:40px;color:var(--ink)}
.qpick-gender-options{display:inline-flex;border:2px solid var(--ink);background:#fffdf8}
.qpick-g{position:relative;display:block;cursor:pointer}
.qpick-g input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.qpick-g span{display:block;min-width:64px;padding:8px 14px;font-size:14px;font-weight:800;line-height:20px;text-align:center}
.qpick-g+.qpick-g span{border-left:2px solid var(--ink)}
.qpick-g.selected span{background:var(--ink);color:var(--ivory)}
.qpick-g input:focus-visible+span{outline:2px solid var(--blue);outline-offset:2px}
/* Теми: кнопки-«чипи»; «далі» — теми, з якими варто продовжити */
.qpick-cats{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.qpick-cat{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:7px 12px;border:2px solid var(--ink);background:#fffdf8;color:var(--ink);font:inherit;font-size:13px;font-weight:750;line-height:1.25;text-align:left;cursor:pointer}
.qpick-cat[aria-pressed=true]{background:var(--ink);color:var(--ivory)}
.qpick-next{padding:1px 6px;background:var(--coral);color:var(--ink);font-size:11px;font-weight:850;letter-spacing:.02em}
.qpick-body{height:min(420px,60vh);overflow-y:auto;overscroll-behavior:contain;padding:12px 16px 16px}
.qpick-tip,.qpick-hint{margin:0 0 10px;font-size:13px;font-weight:600;line-height:1.5;color:var(--dim)}
.qpick-hint{color:var(--ink)}
.qpick-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.qpick-q{display:grid;gap:4px;width:100%;min-height:48px;padding:11px 14px;border:2px solid var(--ink);background:#fffdf8;color:var(--ink);font:inherit;font-size:15px;font-weight:650;line-height:1.4;text-align:left;cursor:pointer;overflow-wrap:anywhere}
.qpick-q small{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:750;color:var(--dim)}
.qpick-q--current{background:var(--mint);box-shadow:3px 3px 0 var(--ink)}
.qpick-q--current small svg{color:var(--blue)}
.qpick-q--used{border-style:dashed;cursor:default}
.qpick-q--used span{color:var(--dim)}
/* Телефон: той самий список знизу поверх сторінки (<dialog>), теми гортаються вбік, питання — вниз */
.qpick-sheet{position:fixed;inset:auto 0 0;width:100%;max-width:none;height:84vh;height:84dvh;max-height:none;margin:0;padding:0;border:0;background:transparent;color:var(--ink);overflow:hidden}
.qpick-sheet[open]{display:flex}
.qpick-sheet::backdrop{background:rgba(33,31,70,.55)}
.qpick--sheet{flex:1;min-width:0;min-height:0;border-width:2px 0 0;box-shadow:none}
.qpick--sheet .qpick-body{flex:1;height:auto;min-height:0;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
.qpick--sheet .qpick-cats{flex-wrap:nowrap;overflow-x:auto;margin-inline:-16px;padding:0 16px 4px;scrollbar-width:none;scroll-padding-inline:16px}
.qpick--sheet .qpick-cats::-webkit-scrollbar{display:none}
.qpick--sheet .qpick-cat{flex-shrink:0;white-space:nowrap}
html.qpick-lock,html.qpick-lock body{overflow:hidden}
/* Підсвітка під курсором лише там, де є миша: на телефоні вона «залипала» б після дотику */
@media(hover:hover){
  .checkout-format:not(.current):hover,.qpick-close:hover,.qpick-cat[aria-pressed=false]:hover,.qpick-q:not(.qpick-q--used):not(.qpick-q--current):hover{background:var(--mint)}
  .checkout-format:not(.current):hover{background:var(--lilac)}
  .checkout-panel .qpick-open:hover{background:var(--mint);box-shadow:1px 1px 0 var(--ink)}
}

/* Серія «Він і я»: «він / вона», сім питань, необов’язкові ім’я й ситуація */
.series-block{padding:16px;background:var(--lilac);border:2px solid var(--ink)}
.series-block .qpick-gender{margin-top:0}
.series-title{margin:16px 0 0;font-family:var(--font-display);font-size:16px;font-weight:700;letter-spacing:-.04em;line-height:1.25}
.series-list{list-style:decimal;margin:10px 0 0;padding-left:24px;display:grid;gap:6px;font-size:15px;font-weight:650;line-height:1.45}
.series-list li::marker{font-weight:850;color:var(--blue)}
.series-block .field-help{margin:10px 0 0}
.checkout-panel .field-label small{margin-left:6px;font-size:12px;font-weight:600;color:var(--dim)}

@media(max-width:620px){
  /* «Знайти» поруч із полем міста, як на «Астрології»: підказки стають одразу під полем */
  .checkout-panel .place-search{flex-direction:row;gap:8px}
  .checkout-panel .place-search input{min-width:0}
  .checkout-panel .place-button{width:auto;flex-shrink:0;padding-inline:14px;box-shadow:3px 3px 0 var(--ink)}
  /* Кроки (два або три) — в один ряд */
  .checkout-steps{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
  .checkout-steps span,.checkout-steps span:nth-last-child(-n+2){border-bottom:0}
  .checkout-steps span:nth-child(2n){border-right:1px solid var(--ink)}
  .checkout-steps span:last-child{border-right:0}
  .checkout-pay-total strong{font-size:22px}
  .clarify-spread{padding:12px}
  .clarify-cards{grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:10px}
  /* Довгий підпис «Так, три питання · оплатити 89 ₴» вміщується в один рядок без значка картки */
  .checkout-offer-actions .lucide-credit-card{display:none}
  /* Формати два на два */
  .checkout-formats ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .checkout-format{padding:9px 10px}
  .checkout-format strong{font-size:13px}
  .series-block{padding:12px}
  /* «Такого розбору немає»: загальний h1 ширший за панель на вузьких екранах */
  .checkout-main>.checkout-panel h1{font-size:clamp(30px,9vw,42px)}
}