/* =================================================================
   JET MEDIA — договор (contract.html)
   Слева форма в фирменных цветах, справа листы A4 договора.
   В печати и PDF остаются только листы: 210×297 мм каждый.
   ================================================================= */

/* ---------------- 1. Токены ---------------- */
:root{
  --jet:      #080B17;
  --jet-2:    #0B1122;
  --blue:     #187BFF;
  --electric: #46C7FF;
  --text:     #EAF1FF;
  --muted:    #8E9EC2;
  --line:     rgba(70,199,255,.18);
  --line-soft:rgba(70,199,255,.10);

  /* Лист договора */
  --ink:      #111a2e;
  --ink-2:    #4b5876;
  --rule:     #c9d3e3;
  --tint:     #f1f5fb;

  --display: "Manrope", "Noto Sans Thai", system-ui, sans-serif;
  --body:    "Inter", "Noto Sans Thai", system-ui, -apple-system, sans-serif;
  --r: 14px;
}

/* ---------------- 2. База ---------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; min-height:100vh;
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(24,123,255,.2), transparent 70%),
    var(--jet);
  color:var(--text);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
}
h1,h2,p{ margin:0; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; }
[hidden]{ display:none !important; }

/* ---------------- 3. Панель ---------------- */
.bar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:12px clamp(12px, 3vw, 32px);
  background:rgba(8,11,23,.88);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
  font-size:.88rem;
}
.bar-back{ color:var(--muted); transition:color .2s; }
.bar-back:hover{ color:var(--electric); }
.bar-right{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.lang{ display:flex; gap:2px; padding:3px; border:1px solid var(--line); border-radius:100px; }
.lang-btn{
  background:none; border:0; cursor:pointer; color:var(--muted);
  padding:6px 11px; border-radius:100px;
  font-family:var(--display); font-weight:700; font-size:.72rem; letter-spacing:.06em;
}
.lang-btn:hover{ color:var(--text); }
.lang-btn.is-active{ background:rgba(24,123,255,.24); color:var(--electric); }
.bar-btn{
  display:inline-flex; align-items:center; cursor:pointer;
  padding:9px 18px; border-radius:100px;
  border:1px solid var(--line); background:rgba(70,199,255,.05); color:var(--text);
  font-family:var(--display); font-weight:700; font-size:.84rem;
}
.bar-btn:hover{ border-color:var(--electric); }
.bar-primary, .btn-primary{
  border-color:transparent; color:#04101F;
  background:linear-gradient(100deg, var(--blue), var(--electric));
  box-shadow:0 8px 26px rgba(24,123,255,.35);
}

/* ---------------- 4. Раскладка ---------------- */
.layout{
  display:grid; grid-template-columns:minmax(340px, 430px) minmax(0, 1fr);
  gap:clamp(16px, 2.4vw, 32px); align-items:start;
  padding:clamp(14px, 2.4vw, 28px) clamp(12px, 3vw, 32px) 48px;
}

/* ---------------- 5. Форма ---------------- */
.form{
  position:sticky; top:70px;
  max-height:calc(100vh - 86px); overflow-y:auto;
  padding:22px 20px 20px;
  border:1px solid var(--line); border-radius:22px;
  background:linear-gradient(180deg, rgba(24,123,255,.09), rgba(255,255,255,.02));
  scrollbar-width:thin; scrollbar-color:rgba(70,199,255,.3) transparent;
}
.form-title{ font-family:var(--display); font-weight:800; font-size:1.3rem; letter-spacing:-.02em; }
.form-lead{ margin-top:8px; font-size:.84rem; line-height:1.55; color:var(--muted); }

fieldset{ margin:18px 0 0; padding:16px 0 0; border:0; border-top:1px solid var(--line-soft); min-width:0; }
legend{
  padding:0 0 10px; font-family:var(--display); font-weight:800;
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--electric);
}
.fld{ display:grid; gap:6px; margin-bottom:12px; font-size:.8rem; color:var(--muted); min-width:0; }
.fld > span{ font-weight:500; }
.fld-note{ font-size:.72rem; color:#6f7ea3; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:0 12px; }

input[type=text], input[type=tel], input[type=email], input[type=number], input[type=date], select, textarea{
  width:100%; min-width:0; padding:10px 12px;
  border:1px solid var(--line); border-radius:10px;
  background:rgba(8,11,23,.55); color:var(--text);
  font-size:.92rem; line-height:1.35;
  transition:border-color .2s, background-color .2s;
}
textarea{ resize:vertical; }
input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--electric); background:rgba(8,11,23,.8); }
input::placeholder, textarea::placeholder{ color:#56648a; }
input[type=date]{ color-scheme:dark; }
select{ appearance:none; background-image:linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size:5px 5px; background-repeat:no-repeat; padding-right:34px; }

/* Выбор: тариф, срок, тип заказчика */
.choice{ display:flex; flex-wrap:wrap; gap:8px; }
.choice label{ flex:1 1 0; min-width:0; cursor:pointer; }
.choice input{ position:absolute; opacity:0; pointer-events:none; }
.choice span{
  display:grid; gap:2px; height:100%;
  padding:10px 12px; border-radius:12px;
  border:1px solid var(--line); background:rgba(8,11,23,.4);
  color:var(--text); font-size:.86rem; text-align:center;
  transition:border-color .2s, background-color .2s;
}
.choice b{ font-family:var(--display); font-weight:800; }
.choice small{ font-size:.7rem; color:var(--muted); line-height:1.3; }
.choice input:checked + span{ border-color:var(--electric); background:rgba(24,123,255,.2); box-shadow:inset 0 0 0 1px var(--electric); }
.choice input:focus-visible + span{ outline:2px solid var(--electric); outline-offset:2px; }
.choice-type{ margin-bottom:14px; }

/* Модули: галочка, название, цены */
.addon-list{ display:grid; gap:8px; }
.addon-opt{
  display:grid; grid-template-columns:auto 1fr; gap:2px 10px; align-items:start;
  padding:10px 12px; border-radius:12px; cursor:pointer;
  border:1px solid var(--line-soft); background:rgba(8,11,23,.35);
  transition:border-color .2s, background-color .2s;
}
.addon-opt input{ grid-row:span 2; margin:2px 0 0; width:17px; height:17px; accent-color:var(--blue); }
.addon-opt b{ font-family:var(--display); font-size:.86rem; color:var(--text); }
.addon-opt small{ font-size:.74rem; color:var(--muted); }
.addon-opt:has(input:checked){ border-color:var(--electric); background:rgba(24,123,255,.14); }

/* Итоги */
.sum{
  margin-top:18px; padding:14px 16px; border-radius:14px;
  border:1px solid var(--line); background:rgba(8,11,23,.5);
  display:grid; gap:6px; font-size:.84rem;
}
.sum h2{ font-family:var(--display); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--electric); margin-bottom:4px; }
.sum p{ display:flex; justify-content:space-between; gap:12px; color:var(--muted); }
.sum b{ color:var(--text); font-family:var(--display); white-space:nowrap; }
.missing{ margin-top:12px; font-size:.78rem; line-height:1.5; color:#ffcf7a; }

.form-actions{ display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }
.btn{
  flex:1 1 150px;
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 20px; border-radius:100px; cursor:pointer;
  border:1px solid transparent;
  font-family:var(--display); font-weight:800; font-size:.95rem;
}
.btn-line{ border-color:var(--line); background:rgba(70,199,255,.05); color:var(--text); }
.btn-line:hover{ border-color:var(--electric); }
.form-foot{ margin-top:14px; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:.74rem; color:#6f7ea3; }
.btn-link{ background:none; border:0; padding:0; cursor:pointer; color:var(--muted); text-decoration:underline; text-underline-offset:3px; font-size:.74rem; }
.btn-link:hover{ color:var(--electric); }

/* ---------------- 6. Предпросмотр ---------------- */
.preview{ min-width:0; }
/* На узком экране листы уменьшаются целиком: --zoom задаёт contract.js */
.doc{ zoom:var(--zoom, 1); }

/* ---------------- 7. Лист договора ---------------- */
.page{
  width:210mm; height:297mm; margin:0 auto 18px;
  display:flex; flex-direction:column;
  padding:11mm 17mm 9mm;
  background:#fff; color:var(--ink);
  font-family:var(--body); font-size:9.2pt; line-height:1.45;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  overflow:hidden;
}
.page-head{
  flex-shrink:0; display:flex; align-items:flex-end; justify-content:space-between; gap:8mm;
  padding-bottom:2.5mm; margin-bottom:5mm; border-bottom:.3mm solid var(--rule);
  font-size:7.4pt; line-height:1.35; color:var(--ink-2);
}
.page-head img{ display:block; height:7mm; width:auto; }
.page-head .ph-right{ text-align:right; }
.page-first .page-head img{ height:9mm; }
.page-body{ flex:1 1 auto; min-height:0; overflow:hidden; }
.page-foot{
  flex-shrink:0; display:flex; justify-content:space-between; align-items:flex-end; gap:6mm;
  padding-top:2.5mm; margin-top:3mm; border-top:.3mm solid var(--rule);
  font-size:7.4pt; color:var(--ink-2);
}
.page-foot .initials{ display:flex; gap:7mm; }
.page-foot .initials span::after{ content:""; display:inline-block; width:22mm; margin-left:2mm; border-bottom:.25mm solid var(--ink-2); }

/* Блоки текста */
.d-title{ text-align:center; font-family:var(--display); font-weight:800; font-size:14pt; letter-spacing:.01em; line-height:1.25; }
.d-subtitle{ text-align:center; font-size:9.6pt; margin-top:1mm; }
.d-place{ display:flex; justify-content:space-between; gap:6mm; margin:5mm 0 4mm; }
.d-p{ margin:0 0 2.2mm; text-align:justify; hyphens:auto; }
.d-h{
  margin:3.6mm 0 1.8mm; font-family:var(--display); font-weight:800; font-size:9.6pt;
  text-transform:uppercase; letter-spacing:.03em;
}
.d-cl{ position:relative; margin:0 0 1.7mm; padding-left:9mm; text-align:justify; hyphens:auto; }
.d-cl > .n{ position:absolute; left:0; top:0; font-weight:600; }
.d-sub{ margin:.8mm 0 0; padding:0; list-style:none; }
.d-sub li{ position:relative; padding-left:5mm; margin-bottom:.6mm; }
.d-sub li > .n{ position:absolute; left:0; top:0; }
/* В тайском тексте нет пробелов между словами: без выключки по ширине */
[data-doc-lang="th"] .d-p, [data-doc-lang="th"] .d-cl{ text-align:left; }
.nb{ white-space:nowrap; }

.d-table{ width:100%; border-collapse:collapse; margin:1.5mm 0 2.5mm; font-size:8.8pt; }
.d-table th, .d-table td{ border:.25mm solid var(--rule); padding:1.3mm 2mm; text-align:left; vertical-align:top; }
.d-table thead th{ background:var(--tint); font-weight:600; font-size:8.2pt; }
.d-table td.r, .d-table th.r{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.d-table tr.total td, .d-table tr.total th{ font-weight:700; background:var(--tint); }
.d-note{ margin:0 0 2mm; }

/* Реквизиты и подписи — две колонки */
.d-sign{ display:grid; grid-template-columns:1fr 1fr; gap:8mm; margin-top:2mm; }
.d-sign h4{ margin:0 0 1.5mm; font-family:var(--display); font-size:9pt; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.d-sign p{ margin:0 0 .9mm; font-size:8.6pt; line-height:1.4; }
.d-sign .lbl{ color:var(--ink-2); }
.d-sign .sig{ margin-top:6mm; }
.d-sign .sig-line{ display:inline-block; width:38mm; border-bottom:.25mm solid var(--ink); margin-right:2mm; }
.d-sign .seal{ margin-top:2mm; color:var(--ink-2); font-size:8pt; }
.d-witness{ display:grid; grid-template-columns:1fr 1fr; gap:8mm; margin-top:5mm; font-size:8.6pt; }

.d-app-title{ text-align:right; font-size:8.8pt; line-height:1.4; margin-bottom:5mm; }

/* Заполненные значения подсвечены на экране; в печати и PDF — нет */
.v{ background:#fff3bf; border-radius:2px; box-shadow:0 0 0 .4mm #fff3bf; }
.blank{ display:inline-block; min-width:36mm; height:1em; border-bottom:.25mm solid var(--ink); vertical-align:-.15em; }
.blank.short{ min-width:18mm; }
.capturing .v{ background:none; box-shadow:none; }

/* ---------------- 8. Сборка PDF ---------------- */
.busy{
  position:fixed; inset:0; z-index:50; display:grid; place-items:center;
  background:rgba(8,11,23,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.busy p{ padding:18px 26px; border-radius:16px; border:1px solid var(--line); background:var(--jet-2); font-family:var(--display); font-weight:700; }
/* Во время сборки PDF листы в натуральную величину */
.capturing .doc{ zoom:1; }

/* ---------------- 9. Экран уже 1100 px ---------------- */
@media screen and (max-width: 1100px){
  .layout{ grid-template-columns:1fr; }
  .form{ position:static; max-height:none; overflow:visible; max-width:720px; width:100%; margin:0 auto; }
}
@media screen and (max-width: 520px){
  .row2{ grid-template-columns:1fr; }
  .bar-back{ width:100%; }
  .bar-right{ width:100%; justify-content:space-between; }
  .form{ padding:18px 14px; border-radius:18px; }
}

/* ---------------- 10. Печать ---------------- */
@page{ size:A4; margin:0; }
@media print{
  body{ background:#fff; }
  .bar, .form, .busy{ display:none !important; }
  .layout{ display:block; padding:0; }
  .doc{ zoom:1 !important; }
  .page{ margin:0; box-shadow:none; break-after:page; }
  .page:last-child{ break-after:auto; }
  .v{ background:none; box-shadow:none; }
}