/* ===========================================================================
   Request a Quote (quote.html) — sirf is page par load hota hai.
   Quotation document (.qdoc) kaagaz hai: dark mode me bhi safed + kaali syahi.
   =========================================================================== */
:root{--qt-err-bg:#FDECEA;--qt-err-ink:#8E1B10;--qt-bad:#C0392B}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--qt-err-bg:rgba(192,57,43,.2);--qt-err-ink:#F5B0A8;--qt-bad:#E8796D}
}
:root[data-theme="dark"]{--qt-err-bg:rgba(192,57,43,.2);--qt-err-ink:#F5B0A8;--qt-bad:#E8796D}

.qt [hidden]{display:none!important}

.qt-adh{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:1rem 1.2rem;margin-bottom:1.6rem;
  border:1px solid var(--line);border-left:4px solid var(--yellow);border-radius:var(--r);background:var(--surface)}
.qt-adh p{margin:0;flex:1 1 320px;font-size:.95rem}
.qt-adh__ic{width:40px;height:40px;border-radius:var(--r-sm);background:var(--blue-tint);color:var(--blue);
  display:grid;place-items:center;flex:0 0 auto}
.qt-adh__ic svg{width:20px;height:20px}

/* 30-Sep-2026 OP (screenshot): Step 1 (Select machines and parts) upar neele header me, header ke NEECHE ke hisse me
   (card negative margin se header ke andar tak khinchta hai; header .phero--qt utna lamba). Uske baad
   "Need adhesive prices?" patti, phir Your estimate CHAUDI (horizontal) patti me, phir Your details.
   Estimate ban jaane par (html.qt-printing) header wapas normal. Purani CSS:
   Old Website Backup/quote-step1-header-estimate-row-2026-09-30/quote.css */
.qt-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1.4rem;align-items:start}
.section.qt{padding-top:0}
:root{--qt-pull:370px}
@media (max-width:1020px){:root{--qt-pull:300px}}
@media (max-width:760px){:root{--qt-pull:240px}}   /* phone par card lamba hai — bas upar ka hissa header me */
.phero--qt{padding-bottom:calc(clamp(40px,5vw,68px) + var(--qt-pull))}
html.qt-printing .phero--qt{padding-bottom:clamp(40px,5vw,68px)}
html.qt-printing .section.qt{padding-top:clamp(36px,4vw,56px)}
.qt-pick{position:relative;z-index:3;margin-top:calc(-1 * var(--qt-pull,370px));
  box-shadow:0 18px 40px rgba(9,32,41,.28)}
.qt-grid > .qt-adh{margin-bottom:0}
/* Estimate + Your details ke peeche wahi halka neela panel (29-Sep wala) — ab sirf inhi ke peeche, Step 1 ke nahi.
   Dark mode me --blue-tint apne aap gehra ho jaata hai. */
.qt-panel{display:grid;gap:1.2rem;min-width:0;
  background:linear-gradient(160deg,var(--blue-tint) 0%,var(--blue-tint-2) 100%);
  border:1px solid var(--blue-tint-2);border-radius:var(--r-lg);padding:clamp(12px,1.6vw,20px)}
.qt-main{display:grid;gap:1.4rem;min-width:0}
.qt-side{position:static}

.qt-step{display:flex;gap:.9rem;align-items:flex-start;margin-bottom:1.2rem}
.qt-step h2{font-size:1.35rem;margin:0 0 .2rem}
.qt-step p{margin:0;font-size:.93rem;color:var(--muted)}
.qt-step__n{flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--blue);color:#fff;font-weight:900}

/* ---------- item lines ---------- */
.qt-lines{display:grid;gap:.9rem}
.qt-line{display:grid;grid-template-columns:120px minmax(0,1fr) 128px 118px 34px;gap:1rem;align-items:center;
  padding:.9rem;border:1px solid var(--line);border-radius:var(--r);background:var(--bg-alt)}
.qt-line.is-set{background:var(--surface);border-color:var(--blue-tint-2)}
/* list me chuni hui machine/part: ☑ box + blue (quote.js markChosen) */
.qt-line select option.is-picked{color:var(--blue);background:var(--blue-tint);font-weight:700}
.qt-line label,.qt-k{display:block;font-size:.76rem;font-weight:700;color:var(--muted);margin-bottom:.3rem;
  text-transform:uppercase;letter-spacing:.04em}
.qt-line__meta .qt-k{display:inline;text-transform:none;letter-spacing:0;font-weight:400;font-size:.86rem;margin:0}
.qt-line__img{position:relative;width:120px;height:120px;border-radius:var(--r-sm);background:#fff;
  border:1px solid var(--line);overflow:hidden;display:grid;place-items:center}
.qt-line__img img{width:100%;height:100%;object-fit:contain;padding:6px}
.qt-rep{position:absolute;left:0;right:0;bottom:0;font-size:.6rem;line-height:1.25;padding:.18rem .3rem;
  background:rgba(19,79,92,.82);color:#fff;text-align:center}
.qt-ph{display:grid;place-items:center;gap:.25rem;color:#5E686D;font-size:.7rem;line-height:1.25;text-align:center;padding:.5rem}
.qt-ph svg{width:30px;height:30px}
.qt-line select{width:100%;padding:.72rem .8rem;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink);font:inherit;font-size:.92rem}
.qt-line select:focus,.qt-qty input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-tint)}
.qt-line__meta{display:flex;flex-wrap:wrap;gap:.2rem 1.1rem;margin-top:.5rem;font-size:.86rem}
.qt-line__meta b{color:var(--ink)}
.qt-qty{display:flex;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:var(--surface)}
.qt-qty button{flex:0 0 34px;border:0;background:var(--bg-alt);color:var(--ink);font-size:1.1rem;cursor:pointer}
.qt-qty button:hover{background:var(--blue-tint);color:var(--blue)}
.qt-qty input{width:100%;min-width:0;border:0;text-align:center;font:inherit;font-weight:700;padding:.62rem .2rem;
  background:transparent;color:var(--ink);-moz-appearance:textfield}
.qt-qty input::-webkit-outer-spin-button,.qt-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qt-line__amt b{display:block;font-size:1.02rem;color:var(--ink);white-space:nowrap}
.qt-line__x{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--surface);
  color:var(--muted);font-size:1.2rem;line-height:1;cursor:pointer;padding:0}
.qt-line__x:hover{border-color:var(--qt-bad);color:var(--qt-bad)}
.qt-add{margin-top:1rem}
.qt-add svg{width:16px;height:16px}

/* ---------- summary (30-Sep-2026 OP: horizontal patti) ---------- */
.qt-side > .formcard{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.5rem 2rem;align-items:center}
.qt-side .eyebrow{grid-column:1/-1}
.qt-sum__rows{margin:0;display:flex;flex-wrap:wrap;gap:.6rem 0}
.qt-sum__rows div{flex:1 1 auto;display:flex;flex-direction:column;gap:.2rem;padding:.2rem 1.4rem;
  border-left:1px solid var(--line)}
.qt-sum__rows div:first-child{padding-left:0;border-left:0}
.qt-sum__rows dt{color:var(--muted);font-size:.82rem}
.qt-sum__rows dd{margin:0;font-weight:700;color:var(--ink);white-space:nowrap;font-size:1.05rem}
.qt-sum__rows .qt-sum__total{border-bottom:0;padding-top:.2rem}
.qt-sum__total dt,.qt-sum__total dd{color:var(--ink);font-weight:900}
.qt-sum__total dd{font-size:1.4rem}
.qt-side .btn--block{width:auto;min-width:220px}
.qt-side .qt-err{grid-column:1/-1;margin:0}
.qt-sum__list{grid-column:1/-1;margin:.5rem 0 0;display:flex;flex-wrap:wrap;gap:.4rem 2rem}
.qt-sum__list li{font-size:.86rem}
.qt-err{margin:.8rem 0 0;padding:.7rem .9rem;border-radius:var(--r-sm);background:var(--qt-err-bg);
  color:var(--qt-err-ink);font-size:.88rem;font-weight:700}
.qt .formgrid input.is-bad{border-color:var(--qt-bad);box-shadow:0 0 0 3px rgba(192,57,43,.18)}
.qt .formgrid input[name="gstin"]{text-transform:uppercase}

/* ---------- generated quotation ---------- */
.qt-out{max-width:920px;margin-inline:auto}
.qt-bar{display:flex;justify-content:space-between;align-items:center;gap:.8rem;flex-wrap:wrap;margin-bottom:.6rem}
.qt-bar__r{display:flex;gap:.6rem;flex-wrap:wrap}
.qt-bar .btn svg{width:16px;height:16px}
.qt-hint{font-size:.86rem;color:var(--muted);margin:0 0 1rem}

.qdoc{background:#fff;color:#1F2020;border:1px solid #D5DADD;border-radius:4px;box-shadow:var(--shadow);
  padding:clamp(1.1rem,4vw,2.6rem);font-size:.9rem;line-height:1.5}
.qdoc b{color:#1F2020}
.qdoc__head{display:flex;gap:1.2rem;align-items:center;padding-bottom:1rem;border-bottom:3px solid #226E93}
.qdoc__logo{width:58px;height:auto;flex:0 0 auto}
.qdoc__co{display:flex;flex-direction:column;font-size:.8rem;color:#3A4145;line-height:1.45}
.qdoc__co b{font-size:1.06rem;color:#134F5C}
.qdoc__co--party b{font-size:1.3rem}   /* 01-Oct-2026: party ka naam letterhead me bada */
.qdoc__title{text-align:center;font-size:1.45rem;letter-spacing:.16em;text-transform:uppercase;color:#226E93;margin:1.1rem 0 .8rem}
.qdoc__meta{display:flex;justify-content:space-between;gap:.4rem 1rem;flex-wrap:wrap;font-size:.86rem;margin-bottom:1rem}
.qdoc__meta span{color:#5E686D;margin-right:.4rem}
.qdoc__parties{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.2rem}
.qdoc__parties>div{border:1px solid #D5DADD;border-radius:4px;padding:.8rem .9rem;font-size:.85rem}
.qdoc__lbl{display:block;font-size:.7rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#226E93;margin-bottom:.2rem}
.qdoc__parties b{display:block;font-size:.95rem}
.qdoc__scroll{overflow-x:auto}
.qdoc__tbl{width:100%;border-collapse:collapse;font-size:.84rem;min-width:600px}
.qdoc__tbl th{background:#F2F2F2;color:#134F5C;text-align:left;font-weight:700;padding:.55rem .6rem;border:1px solid #D5DADD}
.qdoc__tbl td{padding:.55rem .6rem;border:1px solid #D5DADD;vertical-align:top}
.qdoc__tbl .num{text-align:right;white-space:nowrap}
.qdoc__img{width:78px;text-align:center;color:#5E686D}
.qdoc__img img{width:64px;height:64px;object-fit:contain;display:block;margin:auto}
.qdoc__tbl small{display:block;color:#5E686D;font-size:.76rem}
.qdoc__tot{margin:.2rem 0 0 auto;border-collapse:collapse;font-size:.86rem;min-width:min(100%,320px)}
.qdoc__tot td{padding:.42rem .6rem;border:1px solid #D5DADD}
.qdoc__tot td:last-child{text-align:right;white-space:nowrap}
.qdoc__tot .is-grand td{background:#F2F2F2;font-weight:900;color:#134F5C}
.qdoc__words{margin:.8rem 0 1.2rem;font-size:.86rem}
.qdoc__terms h2{font-size:.95rem;margin:0 0 .4rem;color:#134F5C}
.qdoc__terms ol{margin:0;padding-left:1.2rem;font-size:.84rem}
.qdoc__note{font-size:.82rem;color:#3A4145;margin:.8rem 0 0}
/* 17-Sep-2026 OP: "etna thoda bada, bold aur blue color me kar do" — sign-off block
   (Warm Regards + company ka naam + system-generated line) ab thoda bada, bold aur brand
   blue (#134F5C, wahi jo document ke headings me hai). */
.qdoc__sign{margin-top:1.4rem;font-size:1rem;font-weight:700;color:#134F5C;line-height:1.5}
.qdoc__sign b{font-weight:800;color:inherit}   /* warna upar ka `.qdoc b{color:#1F2020}` jeet jaata hai */
.qdoc__sys{font-size:.84rem;font-weight:700;color:#134F5C;margin:.6rem 0 0}

@media (max-width:900px){
  .qt-side > .formcard{grid-template-columns:1fr}
  .qt-side .btn--block{width:100%}
  .qt-sum__rows div{padding:.2rem 1rem}
}
@media (max-width:560px){
  .qt-sum__rows div{flex:1 1 45%;border-left:0;padding:.35rem 0;border-bottom:1px solid var(--line)}
}
@media (max-width:760px){
  /* phone: dropdown poori chaudai me (pehle 113px me machine ka naam kat jaata tha), neeche photo + qty/amount */
  .qt-line{position:relative;grid-template-columns:92px minmax(0,1fr);gap:.8rem 1rem;
    grid-template-areas:"pick pick" "img qty" "img amt"}
  .qt-line__img{grid-area:img;width:92px;height:92px}
  .qt-line__pick{grid-area:pick}
  .qt-line__pick label{padding-right:2.4rem}
  .qt-line__qty{grid-area:qty}
  .qt-qty{max-width:150px}
  .qt-line__amt{grid-area:amt}
  /* 19-Sep-2026: 30px ungli ke liye chhota tha — 40px (Google ka tap-target minimum ~48, par
     yahan card ke kone me jagah kam hai; 40 + margin kaafi hai) */
  .qt-line__x{position:absolute;top:.35rem;right:.4rem;width:40px;height:40px}
  .qdoc__parties{grid-template-columns:1fr}
  .qdoc__head{align-items:flex-start}
}

/* ---------- print / Save as PDF: sirf quotation ---------- */
@page{size:A4;margin:12mm}
@media print{
  html.qt-printing .skip,html.qt-printing .header,html.qt-printing .footer,html.qt-printing .fabs,
  html.qt-printing .modal,html.qt-printing .phero,html.qt-printing .qt-adh,html.qt-printing .qt-bar,
  html.qt-printing .qt-hint{display:none!important}
  html.qt-printing main>:not(.qt){display:none!important}
  html.qt-printing body{background:#fff}
  html.qt-printing .section.qt{padding:0}
  html.qt-printing .wrap{width:100%}
  html.qt-printing .qt-out{max-width:none}
  html.qt-printing .qdoc{border:0;box-shadow:none;padding:0;font-size:9.5pt}
  html.qt-printing .qdoc__tbl{min-width:0}
  html.qt-printing .qdoc__tbl tr{break-inside:avoid}
  html.qt-printing .qdoc *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
/* 18-Sep-2026: estimate mail ho gaya — chhota green confirmation */
.qt-sent{margin:.6rem 0 0;padding:.7rem 1rem;border-radius:var(--r-sm,8px);background:#e8f5ec;color:#1d6b3a;font-size:.92rem}