/* ZH Marketing, kontakti.css
   Контакти по структурата на visuvate.com/contact: едро заглавие, което при скрол изостава и се скрива под формата,
   стъклена карта с формата за запитване (#zapitvane) и тясна залепена карта с контактите. Страница „Благодаря“.
   Зарежда се след home.css и shell.css. Поведение: assets/js/kontakti.js. */

.zh-shell { --r-field: 10px; --k-err: color-mix(in srgb, var(--signal) 55%, var(--paper)); }
.sharp .zh-shell { --r-field: 0px; }

/* ---------- Едро заглавие ---------- */
.k-hero { position: relative; z-index: 0; padding-top: calc(var(--header-h) + clamp(40px, 5.7vw, 82px)); padding-bottom: clamp(30px, 4.4vw, 63px); color: var(--paper); text-align: center; }
/* На телефон два едри реда; от 700px нагоре един ред, както в референцията */
.k-hero h1 { font-size: clamp(68px, 19.4vw, 96px); max-width: none; }
@media (min-width: 700px) { .k-hero h1 { font-size: clamp(84px, 12.2vw, 176px); white-space: nowrap; } }
.k-hero h1 b { color: var(--signal); font-weight: 900; }
/* Измерено: заглавието се мести надолу с 0.6 от скрола, до 230px при 385px скрол; на телефон 0.34, до 78px при 230px */
.k-title { --lag-range: 230px; --lag-shift: 78px; }
@media (min-width: 700px) { .k-title { --lag-range: 385px; --lag-shift: 230px; } }
@media (prefers-reduced-motion: no-preference) { .k-hero h1 { animation: zh-line-in 760ms var(--ease-out) both; } }

/* ---------- Двете карти ---------- */
.k-grid { position: relative; z-index: 1; display: grid; gap: 16px; align-items: start; justify-content: center; grid-template-columns: minmax(0, 580px); }
@media (min-width: 1000px) { .k-grid { grid-template-columns: minmax(0, 580px) 272px; gap: 18px; } }
/* По-плътно стъкло от останалите карти (измерено: черно 60%; при нас 70%, защото заглавието е по-плътно), за да се четат полетата, докато заглавието минава отдолу */
.k-form, .k-side { background: rgba(12, 12, 12, 0.86); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .k-form, .k-side { background: rgba(12, 12, 12, 0.7); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
}
.k-form { padding: clamp(20px, 3vw, 30px); scroll-margin-top: 16px; }
.k-form h2 { font-size: clamp(38px, 4.2vw, 52px); max-width: none; }
.k-lead { margin-top: 12px; max-width: 26em; font-size: 18px; font-weight: 600; line-height: 1.45; color: var(--paper-72); }
.k-form form { display: grid; gap: 22px; margin-top: 26px; }
.k-row { display: grid; gap: 22px 12px; }
@media (min-width: 480px) { .k-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Полета ---------- */
.k-field { display: grid; align-content: start; gap: 8px; min-width: 0; border: 0; padding: 0; margin: 0; }
.k-label { padding: 0; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--paper-72); }
.k-label i { font-style: normal; color: var(--k-err); }
.k-label small { font-size: inherit; font-weight: 400; color: var(--paper-56); }
.k-input {
  display: block; width: 100%; min-height: 48px; margin: 0; padding: 0 14px; border: 1px solid rgba(247, 247, 247, 0.25); border-radius: var(--r-field);
  background: rgba(247, 247, 247, 0.08); color: var(--paper); caret-color: var(--k-err); font: inherit; font-size: 16px; line-height: 1.4; -webkit-appearance: none; appearance: none;
  transition: border-color 220ms var(--ease-brand), background-color 220ms var(--ease-brand);
}
textarea.k-input { min-height: 124px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.k-input::placeholder { color: var(--paper-56); opacity: 1; }
.k-input:focus-visible { border-color: var(--paper-72); background: rgba(247, 247, 247, 0.11); outline: 2px solid var(--paper); outline-offset: 2px; }
.k-input[aria-invalid="true"] { border-color: var(--k-err); }
.k-input:-webkit-autofill { -webkit-text-fill-color: var(--paper); box-shadow: inset 0 0 0 100px #1f1f1f; transition: background-color 9999s; }
@media (hover: hover) and (pointer: fine) { .k-input:hover:not(:focus-visible):not([aria-invalid="true"]) { border-color: rgba(247, 247, 247, 0.42); } }
.k-error { font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--k-err); max-width: none; }
.k-error[hidden] { display: none; }

/* Плочки за избор: отметката е истинско поле, скрито само визуално */
.k-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.k-chip { position: relative; display: block; cursor: pointer; }
.k-chip:last-child:nth-child(odd) { grid-column: 1 / -1; }
.k-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.k-chip span {
  display: grid; place-items: center; min-height: 48px; padding: 6px 10px; border: 1px solid rgba(247, 247, 247, 0.25); border-radius: var(--r-field); background: rgba(247, 247, 247, 0.08);
  font-size: 15px; font-weight: 600; line-height: 1.2; text-align: center; color: var(--paper);
  transition: border-color 220ms var(--ease-brand), background-color 220ms var(--ease-brand), transform var(--dur-press) var(--ease-out);
}
.k-chip input:checked + span { border-color: var(--signal); background: color-mix(in srgb, var(--signal) 26%, transparent); box-shadow: inset 0 0 0 1px var(--signal); }
.k-chip input:focus-visible + span { outline: 2px solid var(--paper); outline-offset: 2px; }
.k-chip:active span { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .k-chip:hover input:not(:checked) + span { border-color: rgba(247, 247, 247, 0.42); } }

/* Капан за ботове: извън екрана, без фокус и без четене от екранен четец */
.k-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Изпращане ---------- */
.k-send { display: grid; gap: 12px; }
.k-submit { border: 0; transition: background-color 220ms var(--ease-brand), color 220ms var(--ease-brand), opacity 220ms var(--ease-brand), transform var(--dur-press) var(--ease-out); }
.k-submit-busy { display: none; }
.k-submit.is-busy { opacity: 0.6; cursor: progress; background: var(--signal); color: var(--paper); transform: none; }
.k-submit.is-busy .k-submit-idle { display: none; }
.k-submit.is-busy .k-submit-busy { display: inline; }
.k-status { min-height: 20px; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--k-err); max-width: none; }
/* „Изпращане…“ вече е на бутона; редът остава само за екранен четец */
.k-status.is-calm { position: absolute; width: 1px; height: 1px; min-height: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.k-note { font-size: 13px; line-height: 1.4; color: var(--paper-56); max-width: none; }
.k-nojs { padding: 14px 16px; border: 1px solid var(--glass-line); border-radius: var(--r-field); font-size: 15px; line-height: 1.5; color: var(--paper); max-width: none; }
.k-nojs a, .k-side a { text-underline-offset: 5px; }
html:not(.js) .k-submit, html:not(.js) .k-status { display: none; }

/* ---------- Карта с контактите ---------- */
.k-side { padding: 8px 18px; }
@media (min-width: 1000px) { .k-side { position: sticky; top: 104px; } }
.k-side li + li { border-top: 1px solid var(--glass-line); }
.k-side a { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 4px 12px; align-items: center; min-height: 64px; padding-block: 12px; color: var(--paper); text-decoration: none; }
.k-side svg { width: 20px; height: 20px; }
.k-side b { font-size: 15px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.k-side small { grid-column: 2; font-size: 13px; line-height: 1.35; color: var(--paper-56); }
@media (hover: hover) and (pointer: fine) { .k-side a:hover b { text-decoration: underline; } }
@media (min-width: 600px) and (max-width: 999px) { .k-side ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; } .k-side li:nth-child(2) { border-top: 0; } }

/* ---------- Вход: съдържанието на картите влиза едно след друго (измерено: 26px, около 0.5 s) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .k-in { animation: k-in 500ms var(--ease-out) calc(140ms + var(--i, 0) * 80ms) both; }
  .k-error:not([hidden]) { animation: k-err 200ms var(--ease-out) both; }
  @keyframes k-in { from { opacity: 0; transform: translateY(26px); } }
  @keyframes k-err { from { opacity: 0; transform: translateY(-4px); } }
}
@media (prefers-reduced-motion: reduce) { .k-input, .k-chip span, .k-submit { transition: none; } .k-chip:active span { transform: none; } }

/* ---------- Страница „Благодаря“ ---------- */
.k-done { display: grid; place-items: center; min-height: min(78svh, 760px); padding: calc(var(--header-h) + 48px) var(--gutter) 24px; }
.k-done-card { width: 100%; max-width: 580px; padding: clamp(28px, 5vw, 48px) clamp(20px, 4vw, 40px); text-align: center; color: var(--paper); }
.k-done-card svg { width: 44px; height: 44px; fill: none; stroke: var(--signal); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.k-done-card h1 { margin-top: 14px; font-size: clamp(64px, 9vw, 104px); max-width: none; }
.k-done-card h1 b { color: var(--signal); font-weight: 900; }
.k-done-card p { margin: 18px auto 0; max-width: 24em; font-size: 18px; line-height: 1.55; color: var(--paper-72); }
.k-done-card .k-done-alt { margin-top: 12px; font-size: 15px; }
.k-done-alt a { color: var(--paper); text-underline-offset: 4px; }
.k-done-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
@media (max-width: 479px) { .k-done-btns .zh-btn { width: 100%; } }
@media (prefers-reduced-motion: no-preference) {
  .k-done-card { animation: k-done 520ms var(--ease-out) both; }
  .k-done-card path { stroke-dasharray: 34; animation: k-check 420ms var(--ease-out) 360ms both; }
  @keyframes k-done { from { opacity: 0; transform: translateY(26px) scale(0.97); } }
  @keyframes k-check { from { stroke-dashoffset: 34; } to { stroke-dashoffset: 0; } }
}