/* NAUTEX · форма заявки и телефон */
/* ---------- Форма заявки ---------- */
.form { display: grid; gap: 18px; margin-top: 20px; }
.form[hidden] { display: none; }
.field label, .field .lbl { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.inp {
  width: 100%; min-height: 52px; padding: 12px 16px; border: 0; border-radius: 14px;
  background: var(--bg); color: var(--text); box-shadow: var(--shadow-inset);
  font: 400 16px/1.4 "Golos Text", system-ui, sans-serif;
}
.inp::placeholder { color: var(--muted); opacity: .8; }
.inp:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.hint { margin-top: 6px; font-size: 13px; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chips label {
  margin: 0; min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center;
  border-radius: 14px; font-weight: 500; cursor: pointer; background: var(--bg); box-shadow: var(--shadow-small);
}
.chips input:checked + label { background: var(--blue); color: var(--blue-text); font-weight: 600; box-shadow: var(--blue-press); }
.chips input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; }
.pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pick label {
  margin: 0; min-height: 64px; padding: 10px 14px; border-radius: 14px; cursor: pointer;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  background: var(--bg); box-shadow: var(--shadow-small);
  transition: box-shadow .14s ease-out;
}
.pick b { font-size: 14px; font-weight: 600; line-height: 1.3; }
.pick span { font-size: 13px; color: var(--muted); }
.pick input:checked + label { background: var(--blue); color: var(--blue-text); box-shadow: var(--blue-press); }
.pick input:checked + label span { color: var(--blue-text); }
.pick.one { grid-template-columns: 1fr; }
.pick.one input:not(:checked) + label { display: none; }
.pick-chg {
  min-height: 44px; margin-top: 4px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--link);
  font: 600 14px/1.3 "Golos Text", system-ui, sans-serif; text-decoration: underline; text-underline-offset: 4px;
}
.pick-chg[hidden] { display: none; }
.pick-chg:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
/* Где вас посмотреть: группы и компактные плашки */
.where { display: grid; gap: 10px; }
.wg-t { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: -2px; }
.chips.wg { gap: 8px; }
.chips.wg label { min-height: 40px; padding: 0 12px; border-radius: 12px; font-size: 14px; }
.pick input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Свой флажок: квадрат со скруглением, отмечен терракотой с галочкой */
.cb {
  -webkit-appearance: none; appearance: none; flex: none; width: 24px; height: 24px; margin: 0; border-radius: 8px; cursor: pointer;
  background: var(--bg); box-shadow: var(--shadow-inset); transition: background-color .14s ease-out, box-shadow .14s ease-out;
}
.cb:checked {
  background: var(--cta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 15px no-repeat;
  box-shadow: var(--btn-shadow);
}
.cb:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sheet .cb:not(:checked) { box-shadow: var(--shadow-inset), inset 0 0 0 1.5px var(--muted); }
.sheet .inp { box-shadow: var(--shadow-inset), inset 0 0 0 1px var(--muted); }
.agree { display: grid; grid-template-columns: 24px 1fr; gap: 12px; font-size: 13px; line-height: 1.45; color: var(--muted); align-items: center; cursor: pointer; }
.agree a { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.agree a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }



/* ---------- Окно заявки ---------- */
.scr-t { display: block; font: 600 19px/1.25 "Geologica", "Golos Text", sans-serif; letter-spacing: -0.01em; }
input[type="date"].inp { display: block; -webkit-appearance: none; appearance: none; text-align: left; }
.chips button { margin: 0; min-height: 52px; padding: 0 16px; border: 0; border-radius: 14px; font: 500 15px/1 "Golos Text", system-ui, sans-serif; color: var(--text); background: var(--bg); box-shadow: var(--shadow-small); cursor: pointer; }
.chips button[aria-pressed="true"] { background: var(--blue); color: var(--blue-text); font-weight: 600; box-shadow: var(--blue-press); }
.chips button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.links { display: grid; gap: 10px; }
.links:not(:empty) { margin-top: 10px; }
.links .inp[hidden] { display: none; }
/* Способ связи: ник или QR, почта */
.contact { display: grid; gap: 10px; margin-top: 10px; }
.contact[hidden], .qr[hidden], .qr-prev[hidden], .field .qr-add[hidden] { display: none; }
.vh { position: absolute; opacity: 0; width: 1px; height: 1px; }
.field .qr-add { display: flex; width: 100%; margin: 0; font: 600 15px/1.2 "Golos Text", system-ui, sans-serif; text-align: center; padding: 0 12px; }
.vh:focus-visible + .qr-add { outline: 3px solid var(--focus); outline-offset: 3px; }
.qr-prev { display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: center; }
.qr-prev img { width: 72px; height: 72px; object-fit: cover; border-radius: 12px; box-shadow: var(--shadow-small); }
.sheet .qr .btn, .sheet .qr-prev .btn { margin-top: 0; }
.contact .hint { margin-top: 0; }
.contact .hint:empty { display: none; }
/* Телефон: код страны и номер */
.opt { font-weight: 400; color: var(--muted); }
.ph-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
.cc-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 52px; padding: 0 12px; border: 0; border-radius: 14px; cursor: pointer;
  background: var(--bg); color: var(--text); box-shadow: var(--shadow-small); font: 600 16px/1 "Golos Text", system-ui, sans-serif;
  transition: box-shadow .14s ease-out, transform .14s cubic-bezier(.2,.8,.2,1);
}
.cc-btn:active { box-shadow: var(--shadow-inset); transform: scale(.97); }
.cc-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.cc-btn svg { color: var(--muted); }
.cc-flag { font-size: 20px; line-height: 1; }
.cc-search { position: sticky; top: -10px; z-index: 1; margin: 14px -20px 0; padding: 10px 20px; background: var(--bg); }
.cc-list { display: grid; gap: 4px; margin-top: 4px; }
.cc-item {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 48px; padding: 6px 12px;
  border: 0; border-radius: 12px; background: none; color: var(--text); cursor: pointer; text-align: left; font: 400 15px/1.3 "Golos Text", system-ui, sans-serif;
}
.cc-item[hidden] { display: none; }
.cc-item .cc-flag { font-size: 22px; }
.cc-item b { font-weight: 600; color: var(--muted); }
.cc-item[aria-current="true"] { box-shadow: var(--shadow-inset); }
.cc-item[aria-current="true"] b { color: var(--text); }
.cc-item:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.sheet .cc-empty { margin-top: 16px; }


.ph-btn { width: 100%; margin-top: 10px; }
.ph-btn[hidden] { display: none; }
.opts { display: grid; gap: 12px; }
.opts label {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: center; margin: 0; padding: 12px 14px;
  border-radius: 16px; cursor: pointer; background: var(--bg); box-shadow: var(--shadow-small);
  transition: box-shadow .14s ease-out;
}
.opts label:has(.cb:checked) { box-shadow: var(--shadow-inset), inset 0 0 0 2px var(--cta); }
.opt-tx b { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; }
.opt-tx span { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--muted); }
.opt-tx .opt-pr { display: inline-block; margin-top: 8px; padding: 4px 10px; border-radius: 999px; font: 600 12px/1.2 "Golos Text", system-ui, sans-serif; white-space: nowrap; color: var(--num); box-shadow: inset 0 0 0 1.5px var(--sd); }
.form-err { margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--err); text-align: center; }
.form-err[hidden] { display: none; }
#f-done { margin-top: 16px; }
.done-bubble { padding: 14px 16px; border-radius: 18px 18px 18px 6px; background: var(--blue); color: var(--blue-text); box-shadow: var(--shadow-small); }
.done-bubble b { display: block; font-size: 17px; }
.sheet .done-bubble p { margin-top: 4px; color: inherit; }

/* ---------- Есть сайт / Нет сайта ---------- */
/* Выбранная плашка вдавлена, как активная вкладка в нижней панели; невыбранная выпуклая */
.sw { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sw label {
  display: grid; place-items: center; min-height: 52px; margin: 0; padding: 4px 10px; border-radius: 14px; cursor: pointer;
  font-size: 15px; font-weight: 500; text-align: center; color: var(--muted); background: var(--bg); box-shadow: var(--shadow-small);
  transition: box-shadow .14s ease-out, background-color .14s ease-out, color .14s ease-out;
}
.sw input:checked + label {
  color: var(--link); font-weight: 600; background: var(--tb-bot);
  box-shadow: inset 3px 3px 7px var(--tb-deep), inset -2px -2px 5px var(--tb-edge);
}
.sw input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; }
/* Есть сайт: короткая форма. Нет сайта: полная */
.form:has(#site-yes:checked) .only-no, .form:has(#site-no:checked) .only-yes { display: none; }
textarea.inp { display: block; min-height: 96px; resize: vertical; }

/* ---------- Под кнопкой отправки: что вы получите, что дальше ---------- */
.gain { padding: 14px; border-radius: 18px; box-shadow: inset 0 0 0 1.5px var(--sd); }
.gain-t { display: block; font-size: 15px; font-weight: 600; }
.gain .ticks { margin-top: 10px; font-size: 14px; line-height: 1.4; }
.lad { list-style: none; padding: 0; margin-top: 8px; display: grid; gap: 8px; }
.lad li { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) 44px; gap: 10px; align-items: center; min-height: 44px; }
/* Линия между шагами */
.lad li:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: calc(50% + 16px); bottom: -14px; width: 2px; border-radius: 1px; background: var(--sd); }
.lad-n {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  font: 600 14px/1 "Geologica", "Golos Text", sans-serif; color: var(--num); box-shadow: var(--shadow-inset);
}
.lad-tx { font-size: 14px; font-weight: 600; line-height: 1.3; }