/* ============================================================================
   CREOLOR — QUOTATION DOCUMENT STYLES
   Shared by the public client page (q.php) and the builder's live preview.
   Edit here and both change together.
   ========================================================================== */
.qdoc{
  --q-bg:#12131F; --q-paper:#F2F3F7; --q-body:#B9BECF; --q-muted:#7C819B;
  --q-border:rgba(255,255,255,.10); --q-line2:rgba(255,255,255,.18);
  --q-amber:#FEAE06; --q-magenta:#EE027B; --q-sky:#50ADFC;
  --q-display:'Poppins',sans-serif; --q-face:'Inter',sans-serif;
  --q-mono:'IBM Plex Mono',ui-monospace,monospace;
  color:var(--q-paper); font-family:var(--q-face); font-size:15px; line-height:1.6;
}
.qdoc *{box-sizing:border-box}
.qdoc a{color:inherit}
.qdoc img{display:block;max-width:100%}

.qdoc .top{display:flex;justify-content:space-between;align-items:flex-start;gap:28px;flex-wrap:wrap;
     padding-bottom:26px;border-bottom:1px solid var(--q-border)}
.qdoc .logo-img{height:38px;width:auto}
.qdoc .studio{font-size:12.5px;color:var(--q-muted);line-height:1.7;margin-top:12px}
.qdoc .qmeta{text-align:right;font-size:12.5px;color:var(--q-muted);line-height:1.8}
.qdoc .qmeta b{display:block;font-family:var(--q-display);font-weight:700;font-size:19px;
     letter-spacing:-.01em;color:var(--q-paper);margin-bottom:6px}
.qdoc .badge{display:inline-block;font-family:var(--q-mono);font-size:10px;letter-spacing:.14em;
     text-transform:uppercase;border:1px solid rgba(254,174,6,.4);color:var(--q-amber);
     border-radius:100px;padding:3px 10px;margin-top:8px}

.qdoc h1{font-family:var(--q-display);font-weight:800;font-size:clamp(24px,3.4vw,36px);
     letter-spacing:-.03em;margin:34px 0 6px}
.qdoc .sub{color:var(--q-muted);font-size:14px;margin-bottom:32px}

.qdoc .billto{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-bottom:36px}
.qdoc .billto h3{font-family:var(--q-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
     color:var(--q-muted);margin-bottom:9px}
.qdoc .billto p{font-size:14px;line-height:1.75;color:var(--q-body)}
.qdoc .billto strong{color:var(--q-paper);font-weight:600}

.qdoc table{width:100%;border-collapse:collapse;margin-bottom:8px}
.qdoc th{font-family:var(--q-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
     color:var(--q-muted);text-align:left;padding:0 0 11px;border-bottom:1px solid var(--q-line2);font-weight:400}
.qdoc th.r,.qdoc td.r{text-align:right}
.qdoc td{padding:15px 0;border-bottom:1px solid var(--q-border);vertical-align:top;font-size:14.5px}
.qdoc td.desc b{display:block;font-weight:600;color:var(--q-paper);margin-bottom:3px}
.qdoc td.desc span{font-size:12.5px;color:var(--q-muted);line-height:1.55}
.qdoc td.qty,.qdoc td.rate,.qdoc td.amt{font-family:var(--q-mono);font-variant-numeric:tabular-nums;
     white-space:nowrap;color:var(--q-body)}
.qdoc td.amt{color:var(--q-paper)}
.qdoc .grp td{border:none;padding:26px 0 6px;font-family:var(--q-mono);font-size:10.5px;
     letter-spacing:.16em;text-transform:uppercase;color:var(--q-muted)}

.qdoc .totals{margin-left:auto;max-width:340px;margin-top:22px}
.qdoc .trow{display:flex;justify-content:space-between;gap:18px;padding:8px 0;font-size:14px;color:var(--q-body)}
.qdoc .trow b{font-family:var(--q-mono);font-variant-numeric:tabular-nums;font-weight:500;color:var(--q-paper)}
.qdoc .trow.disc b{color:var(--q-amber)}
.qdoc .trow.grand{border-top:1px solid var(--q-line2);margin-top:8px;padding-top:14px;font-size:16px;color:var(--q-paper)}
.qdoc .trow.grand b{font-size:21px;font-weight:600;color:var(--q-amber)}

.qdoc .block{margin-top:44px;padding-top:26px;border-top:1px solid var(--q-border)}
.qdoc .block h3{font-family:var(--q-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
     color:var(--q-muted);margin-bottom:13px}
.qdoc .block p{font-size:14px;color:var(--q-body);line-height:1.75;white-space:pre-wrap}
.qdoc .terms{list-style:none;display:flex;flex-direction:column;gap:9px;padding:0;margin:0}
.qdoc .terms li{font-size:13.5px;line-height:1.65;color:var(--q-body);padding-left:16px;position:relative}
.qdoc .terms li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;
     border-radius:50%;background:var(--q-amber)}

.qdoc .foot{margin-top:44px;padding-top:22px;border-top:1px solid var(--q-border);
     display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:12.5px;color:var(--q-muted)}

@media(max-width:640px){
  .qdoc .billto{grid-template-columns:1fr;gap:18px}
  .qdoc .qmeta{text-align:left}
  .qdoc th.qty,.qdoc td.qty,.qdoc th.rate,.qdoc td.rate{display:none}
}

@media print{
  .qdoc{color:#000;font-size:10.5px}
  .qdoc h1,.qdoc .qmeta b,.qdoc td.desc b{color:#000!important}
  .qdoc .sub,.qdoc .studio,.qdoc .qmeta,.qdoc .billto h3,.qdoc .block h3,
  .qdoc .foot,.qdoc td.desc span,.qdoc th{color:#444!important}
  .qdoc .billto p,.qdoc .block p,.qdoc .terms li,.qdoc td,.qdoc .trow{color:#000!important}
  .qdoc .trow.grand b,.qdoc .trow.disc b,.qdoc .badge{color:#000!important;border-color:#999!important}
  .qdoc .terms li::before{background:#000}
  .qdoc table,.qdoc tr,.qdoc td,.qdoc .block{page-break-inside:avoid}
}