/* ============================================================
   Sof tilim — Matn shablonlari
   Chapda ma'lumot, o'ngda A4 hujjat.
   ============================================================ */

/* Yon menyu yig'ilgani uchun ish maydoni kengroq: chapdagi shakl ham,
   o'ngdagi A4 hujjat ham bemalol joylashadi. */
.st-work__body--keng { max-width: 1620px; padding-left: 28px; padding-right: 28px; }

.st-shablon {
  margin-top: 22px;
  display: grid; gap: 26px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  align-items: start;
}

/* ---------- Chap: ma'lumot kiritish -------------------------- */

.st-guruh {
  background: var(--st-panel); border: 1px solid var(--st-line);
  border-radius: 16px; padding: 18px 20px 20px; margin-bottom: 14px;
}
.st-guruh h2 {
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--st-navy); font-weight: 700;
  padding-bottom: 12px; border-bottom: 1px solid var(--st-line-soft);
}
.st-ixtiyoriy {
  margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  background: var(--st-bg-tint); color: var(--st-muted);
  font-size: 10.5px; letter-spacing: .04em; font-weight: 600;
}

.st-maydon { margin-top: 14px; }
.st-maydon--tor { max-width: 220px; }
.st-maydon label {
  display: block; font-size: 12.6px; font-weight: 600;
  color: var(--st-ink-soft); margin-bottom: 6px;
}
.st-maydon input, .st-maydon textarea {
  width: 100%; padding: 11px 13px; border-radius: 11px;
  border: 1px solid var(--st-line); background: #fff;
  font: 400 15px/1.5 var(--st-font); color: var(--st-ink);
  resize: vertical;
}
.st-maydon input:focus, .st-maydon textarea:focus {
  outline: 0; border-color: var(--st-blue);
  box-shadow: 0 0 0 3px rgba(11, 87, 208, .14);
}
/* Namuna matni: bosilganda yo'qoladi, faqat yo'l ko'rsatadi.
   Rangi to'q — o'qilsin, lekin yozilgan matndan farq qilib tursin. */
.st-maydon input::placeholder, .st-maydon textarea::placeholder { color: #6B7B92; }
.st-maydon__oyoq { margin-top: 6px; text-align: right; }
.st-maydon__oyoq .hisob { font-size: 12.4px; color: var(--st-muted); }
.st-eslatma { margin: 7px 0 0; font-size: 12.8px; color: var(--st-muted); line-height: 1.5; }

/* Rasmiy atamalar */
.st-guruh--lugat { border-color: #CFE3D6; background: #FAFDFB; }
.st-guruh--lugat h2 { color: #0A6C2E; border-bottom-color: #DCEDE2; }
.st-atama { margin-top: 4px; }
.st-atama__yoq { margin-top: 12px; font-size: 13.6px; color: var(--st-muted); }
.st-atama__item {
  margin-top: 10px; padding: 12px 14px; border-radius: 12px;
  background: #fff; border: 1px solid #DCEDE2;
}
.st-atama__bosh { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.st-atama__eski { font-size: 15px; color: #B3261E; text-decoration: line-through; }
.st-atama__oq { color: var(--st-muted); }
.st-atama__yangi { font-size: 15px; font-weight: 700; color: #0A6C2E; }
.st-atama__tugma {
  margin-left: auto; padding: 7px 13px; border-radius: 9px;
  border: 1px solid #0A6C2E; background: #0A6C2E; color: #fff;
  font: 600 12.8px/1 var(--st-font); cursor: pointer;
}
.st-atama__tugma:hover { background: #08551F; }
.st-atama__izoh {
  margin: 9px 0 0; font-size: 13.4px; line-height: 1.6; color: var(--st-ink-soft);
  max-height: 4.8em; overflow: hidden;
}
.st-atama__item.is-ochiq .st-atama__izoh { max-height: none; }
.st-atama__koproq {
  margin-top: 5px; background: none; border: 0; padding: 0; cursor: pointer;
  font: 600 12.6px/1 var(--st-font); color: var(--st-blue);
}

/* Imloviy nazorat */
.st-guruh--imlo .st-imlo__yoq { margin-top: 14px; }
.st-guruh--imlo .st-imlo__hisob { margin-top: 12px; }

/* ---------- O'ng: tayyor hujjat ------------------------------ */

.st-forma { min-width: 0; }
.st-natija { position: sticky; top: 76px; min-width: 0; }
/* Tuzatma ro'yxati (`.st-taklif`) shu qutiga nisbatan joylashadi */
.st-natija__ich { min-width: 0; position: relative; }

.st-oldin {
  width: 100%; overflow: hidden; border-radius: 4px;
}
.st-oldin__ram { transform-origin: top left; }

.st-varaq {
  width: 210mm; min-height: 297mm; box-sizing: border-box;
  background: #fff; box-shadow: 0 10px 34px rgba(2, 20, 50, .14);
  border: 1px solid var(--st-line);
  padding: 20mm 15mm 20mm 30mm;
  transform-origin: top left;
  font-family: "Times New Roman", Times, serif;
  font-size: 14pt; line-height: 1.15; color: #000;
  overflow-wrap: anywhere;   /* uzun uzluksiz so'z varaqdan chiqib ketmasin */
}

.v-adresat { width: 50%; margin-left: auto; text-align: center; font-weight: 700; }
.v-adresat div { margin-bottom: 2mm; }
.v-adresat:not(:empty) { margin-bottom: 10mm; }

.v-sarlavha { text-align: center; font-weight: 700; }
.v-sarlavha:not(:empty) { margin-bottom: 6mm; }

.v-matn p { margin: 0; text-indent: var(--st-xatboshi); text-align: justify; }
/* Abzaslar orasida 4 pt — Word hujjatidagidek */
.v-matn p + p { margin-top: 4pt; }
.v-matn .s { cursor: pointer; border-radius: 2px; }
.v-matn .s:hover { background: #FFF2AE; }
.v-matn .s.is-tanlangan { background: #FFE082; }

/* Imlo belgilari. Chizish qoidasi `lugat.css` da — butun saytda bitta
   xil: qizil to'lqin — aniq xato, sariq — shubhali, qizil ikki chiziq —
   rasmiy muqobili bor atama, yashil ikki chiziq — son taklifi.

   A4 varaq `scale` bilan kichraytiriladi, chiziq esa ingichka:
   `text-underline-offset` bir oz kattaroq olinadi, aks holda 14 pt
   li Times matnda chiziq harf dumiga yopishib qolardi. */
.st-varaq .im { text-underline-offset: 2px; }

.v-ilova {
  font-style: italic; text-indent: var(--st-xatboshi); text-align: justify;
  font-size: 10pt;
}
.v-ilova:not(:empty) { margin-top: 6mm; }

.v-imzo { width: 100%; border-collapse: collapse; margin-top: 12mm; }
.v-imzo td { vertical-align: top; padding: 0; }
.v-lavozim { width: 42%; text-align: justify; font-weight: 700; }
.v-bosh { width: 21%; }
.v-fish { width: 37%; text-align: center; font-weight: 700; }
.v-imzo.is-bosh { display: none; }

/* Ilova va ijrochi qatorlari kichik shriftda — 10 pt */
.v-ijrochi { margin-top: 14mm; font-style: italic; font-size: 10pt; }
/* Telefon raqami ijrochi ismining ostida */
.v-ijrochi div + div { margin-top: 1mm; }

/* Xato va tugmalar */
.st-xato {
  display: none; margin-top: 16px; padding: 12px 16px; border-radius: 12px;
  border: 1px solid #F0C9C4; background: #FDF2F1; color: #9F2F26; font-size: 14px;
}
.st-xato.is-open { display: block; }

.st-yuklab { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }
.st-yordam { margin: 9px 0 0; font-size: 13px; color: var(--st-muted); }
.st-yordam b { color: var(--st-ink); }

/* So'z ma'nosi */
.st-mano {
  display: none; margin-top: 16px; padding: 15px 17px;
  border-radius: 14px; border: 1px solid var(--st-line); background: var(--st-panel);
}
.st-mano.is-open { display: block; }
.st-mano.is-open + .st-yordam { display: none; }
.st-mano__bosh { display: flex; align-items: baseline; gap: 10px; }
.st-mano__bosh b { font-size: 17px; color: var(--st-navy); }
.st-mano__yop {
  margin-left: auto; background: none; border: 0; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--st-muted); padding: 0 4px;
}
.st-mano__yop:hover { color: var(--st-ink); }
.st-mano dt {
  margin-top: 10px; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--st-muted);
}
.st-mano dd { margin: 3px 0 0; font-size: 14.6px; line-height: 1.6; color: var(--st-ink); }
.st-mano .tag {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  background: var(--st-bg-tint); color: var(--st-ink-soft); font-size: 12.4px;
}
.st-mano .yoq { font-size: 14.2px; color: var(--st-muted); margin-top: 8px; }

/* ---------- Mobil -------------------------------------------- */

@media (max-width: 1150px) {
  .st-shablon { grid-template-columns: minmax(0, 1fr); }
  .st-natija { position: static; }
}

@media (max-width: 900px) {
  .st-varaq { padding: 16mm 12mm 16mm 20mm; }
  /* Telefonda chetki bo'shliq umumiy qobiqdagidek qoladi */
  .st-work__body--keng { padding-left: 16px; padding-right: 16px; }
}

/* ---------- Chop etish / PDF --------------------------------- */

@media print {
  .st-side, .st-work__bar, .st-veil, .st-forma, .st-yuklab, .st-yordam,
  .st-mano, .st-xato, .st-h1, .st-sub, .st-modal { display: none !important; }

  .st-app { display: block; }
  .st-work__body { padding: 0; max-width: none; }
  .st-shablon { display: block; margin: 0; }
  .st-natija { position: static; }
  .st-oldin { overflow: visible; }
  .st-oldin__ram { transform: none !important; }
  .st-varaq {
    width: auto; min-height: 0; margin: 0; padding: 0;
    border: 0; box-shadow: none; transform: none !important;
  }
  .v-matn .s:hover { background: none; }

  /* BELGILAR CHOP ETISHGA TUSHMAYDI.

     Ular ekrandagi yordam vositasi — hujjatning o'z mazmuni emas.
     PDF «chop etish» oynasi orqali olinadi, shuning uchun to'lqinli
     chiziq ham, ajratib ko'rsatuvchi fon ham shu yerda o'chiriladi. */
  .st-varaq .im {
    text-decoration: none !important;
    background: none !important;
  }
  .st-taklif { display: none !important; }

  body { background: #fff; }
  @page { size: A4 portrait; margin: 20mm 15mm 20mm 30mm; }
}


/* ---------- Yangi alifbo tugmasi ------------------------------
   «Tahrirchi»dagi kartochka bilan bir uslubda: tepada nomi,
   ostida juda mayda eslatma. Yoqilganda ko'k to'ldiriladi —
   holati bir qarashda ko'rinadi. */

.st-ya-tugma {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 10px 14px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--st-line); background: #fff;
  font-family: var(--st-font); text-align: left;
  transition: border-color .15s, background .15s, color .15s;
}
.st-ya-tugma:hover { border-color: #BFD2EC; }
.st-ya-tugma__belgi {
  flex: none; width: 32px; height: 32px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--st-bg-tint); color: var(--st-blue);
  font: 700 17px/1 var(--st-font);
}
.st-ya-tugma__matn { display: flex; flex-direction: column; gap: 1px; line-height: 1.2; }
.st-ya-tugma__matn b { font-size: 14.5px; font-weight: 600; color: var(--st-navy); }
.st-ya-tugma__matn i {
  font-style: normal; font-size: 10px; font-weight: 500; color: var(--st-muted);
}
.st-ya-tugma[aria-pressed="true"] {
  background: var(--st-blue); border-color: var(--st-blue);
}
.st-ya-tugma[aria-pressed="true"] .st-ya-tugma__belgi {
  background: rgba(255, 255, 255, .2); color: #fff;
}
.st-ya-tugma[aria-pressed="true"] .st-ya-tugma__matn b { color: #fff; }
.st-ya-tugma[aria-pressed="true"] .st-ya-tugma__matn i { color: rgba(255, 255, 255, .82); }