/* Cost calculator — spec picker and transparent result breakdown.
   Loaded only on /calculator/; the rest of the site never pays for it. */

.calc__sub{color:var(--muted);font-size:15px;margin-block:-4px 22px;max-inline-size:70ch}

/* ---- live rate: every pick has to move a visible number, or the pricing reads as invented ---- */
.calc__live{
  position:sticky;inset-block-start:64px;z-index:12;
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:13px 18px;margin-block-end:22px;
  background:var(--bg,#fff);border:1px solid var(--gold,#c9a227);border-radius:14px;
  box-shadow:0 6px 18px rgba(0,0,0,.06)
}
.calc__liveL{font-size:13px;color:var(--muted);letter-spacing:.01em}
.calc__liveV{font-size:15px;color:var(--muted);font-variant-numeric:tabular-nums}
.calc__liveV b{
  font-size:26px;font-weight:700;color:var(--gold,#c9a227);
  letter-spacing:-.01em;transition:color .18s
}

/* ---- preset packages ---- */
.calc__presets{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-block-end:24px}
.calc__preset{text-align:start;padding:14px 16px;border:1px solid var(--line);border-radius:14px;
  background:transparent;color:inherit;cursor:pointer;transition:border-color .2s,background .2s}
.calc__preset:hover{border-color:var(--gold,#c9a227)}
.calc__preset.on{border-color:var(--gold,#c9a227);background:color-mix(in srgb,var(--gold,#c9a227) 10%,transparent)}
.calc__preset strong{display:block;font-size:15px;margin-block-end:3px}
.calc__preset span{display:block;font-size:13px;color:var(--muted);line-height:1.6}

/* ---- one spec group, collapsed to its current answer ---- */
.calc__spec{
  border:1px solid var(--line);border-radius:14px;
  margin:0 0 10px;padding:0;overflow:hidden
}
.calc__spec summary{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 17px;cursor:pointer;list-style:none;
  transition:background .15s
}
.calc__spec summary::-webkit-details-marker{display:none}
.calc__spec summary:hover{background:color-mix(in srgb,var(--gold,#c9a227) 6%,transparent)}
.calc__spec summary::after{
  content:"";flex:none;inline-size:8px;block-size:8px;
  border-inline-end:2px solid var(--muted);border-block-end:2px solid var(--muted);
  transform:rotate(45deg);transition:transform .2s;margin-block-end:3px
}
.calc__spec[open] summary::after{transform:rotate(-135deg);margin-block:3px 0}
.calc__specL{font-size:15px;font-weight:600;flex:none}
.calc__specV{
  font-size:13.5px;color:var(--gold,#c9a227);text-align:end;
  margin-inline-start:auto;line-height:1.5
}
.calc__spec[open] .calc__specV{color:var(--muted)}

.calc__info{font-size:13.5px;color:var(--muted);line-height:1.75;margin:0;padding:0 17px 12px;max-inline-size:72ch}
.calc__opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:9px;padding:0 17px 17px}
.calc__pill{text-align:start;padding:13px 15px;border:1px solid var(--line);border-radius:13px;
  background:transparent;color:inherit;cursor:pointer;transition:border-color .2s,background .2s}
.calc__pill:hover{border-color:var(--gold,#c9a227)}
.calc__pill.on{border-color:var(--gold,#c9a227);background:color-mix(in srgb,var(--gold,#c9a227) 10%,transparent)}
.calc__pillT{display:block;font-size:14.5px;font-weight:600;line-height:1.5}
.calc__mult{display:inline-block;margin-block-start:4px;font-size:12px;font-weight:700;
  color:var(--gold,#c9a227);letter-spacing:.02em}
.calc__pill .calc__hint{display:block;margin-block-start:5px;font-size:12.5px;color:var(--muted);line-height:1.65}

/* ---- result ---- */
.calc__res{text-align:center;padding:30px 20px;border:1px solid var(--line);border-radius:18px;margin-block-end:26px}
.calc__resHead{font-size:15px;color:var(--muted);margin:0 0 10px}
.calc__price{font-size:clamp(30px,6vw,46px);font-weight:700;line-height:1.25;margin:0 0 8px;
  letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.calc__price small{font-size:.45em;font-weight:600;color:var(--muted)}
.calc__rate{font-size:15px;margin:0 0 4px}
.calc__vat{font-size:13.5px;color:var(--muted);margin:0}

/* ---- "how we got to this number" — what keeps the estimate from reading as invented ---- */
.calc__how{margin-block-end:26px}
.calc__how h3{font-size:17px;margin-block:0 12px}
#calcBreakdown{list-style:none;padding:0;margin:0 0 14px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
#calcBreakdown li{display:flex;justify-content:space-between;gap:16px;padding:11px 16px;font-size:14px;line-height:1.6}
#calcBreakdown li + li{border-block-start:1px solid var(--line)}
#calcBreakdown li span{color:var(--muted)}
#calcBreakdown li b{font-weight:600;text-align:end}
#calcBreakdown li.calc__min b{color:var(--gold,#c9a227)}

.calc__cta > p{font-size:13.5px;color:var(--muted);line-height:1.8;margin-block:0 16px;max-inline-size:74ch}
.calc__again{margin-block-start:16px;background:none;border:0;padding:0;color:var(--muted);font:inherit;
  font-size:14px;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.calc__again:hover{color:inherit}
.calc__note{font-size:13px;color:var(--muted);line-height:1.8;max-inline-size:74ch}

@media (max-width:600px){
  .calc__opts,.calc__presets{grid-template-columns:1fr}
  .calc__live{inset-block-start:56px;padding:11px 14px}
  .calc__liveV b{font-size:22px}
  .calc__spec summary{padding:12px 14px}
  .calc__specL{font-size:14.5px}
  .calc__specV{font-size:12.5px}
  .calc__info,.calc__opts{padding-inline:14px}
}
@media (prefers-reduced-motion:reduce){
  .calc__spec summary::after{transition:none}
}

/* Invalid or out-of-range area: say what is wrong instead of doing nothing. */
.calc__err{
  margin-block:10px 0;padding:11px 14px;border-radius:12px;
  background:color-mix(in srgb,#c0392b 12%,transparent);
  border-inline-start:3px solid #c0392b;
  font-size:14px;line-height:1.7;color:inherit
}
#calcArea[aria-invalid="true"]{border-color:#c0392b}

/* Back out of the result without losing the configuration. */
.calc__nav--res{margin-block-end:26px}

/* When do they plan to start — one question that separates a buyer from a browser. */
.calc__when{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-block-start:16px}
.calc__when label{font-size:14.5px;color:var(--muted)}
.calc__when select{
  font:inherit;font-size:14.5px;padding:9px 12px;border:1px solid var(--line);
  border-radius:11px;background:transparent;color:inherit;min-inline-size:180px
}

/* Lead time — a date on the screen, which neither competitor shows at all. */
.calc__lead{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:14px 17px;margin-block-end:16px;
  border:1px solid var(--line);border-radius:14px
}
.calc__lead span{font-size:13.5px;color:var(--muted)}
.calc__lead b{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums}
.calc__lead em{font-size:12.5px;color:var(--muted);font-style:normal;inline-size:100%}

/* Electricity payback — the argument that moves an order up a grade. */
.calc__savings{
  padding:20px 18px;margin-block-end:22px;border-radius:16px;
  background:color-mix(in srgb,var(--gold,#c9a227) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--gold,#c9a227) 35%,transparent)
}
.calc__savings h3{font-size:16px;margin-block:0 14px}
.calc__saveRow{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin-block-end:12px}
.calc__saveBox{text-align:center;padding:14px 12px;border-radius:12px;background:var(--bg,#fff)}
.calc__saveBox span{display:block;font-size:12.5px;color:var(--muted);line-height:1.5;margin-block-end:6px}
.calc__saveBox b{display:block;font-size:23px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.2}
.calc__saveBox em{display:block;font-size:12px;color:var(--muted);font-style:normal;margin-block-start:3px}
.calc__savings .calc__note{margin-block-end:0}

/* Hand the estimate to whoever actually signs. */
.calc__share{
  display:block;margin-block-start:14px;background:none;border:1px dashed var(--line);
  border-radius:11px;padding:10px 15px;color:inherit;font:inherit;font-size:14px;cursor:pointer;
  transition:border-color .2s,color .2s
}
.calc__share:hover{border-color:var(--gold,#c9a227)}
.calc__share.ok{border-style:solid;border-color:var(--gold,#c9a227);color:var(--gold,#c9a227)}

/* Eleven services since louvres and the electric shutter joined (26 Sep 2026): three columns from
   900px up, leaving two cards on the last row. Between 641px and 899px the sitewide two-column rule
   applies, and the eleventh card takes the whole last row instead of sitting alone beside a gap. One
   column below 640px. */
@media (min-width:900px){
  .calc__grid{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:641px) and (max-width:899px){
  .calc__grid > :last-child:nth-child(odd){grid-column:1 / -1}
}

/* ------------------------------------------------------------ REQUEST CARD
   The estimate only exists in the visitor's browser. This card is the one place
   that turns it into a lead, so it is deliberately the loudest surface on the
   result step — gold-tinted, raised, and sitting above the softer secondary CTAs. */
.calc__req{margin-block-start:26px;border:1px solid color-mix(in srgb,var(--gold,#c9a227) 34%,transparent);
  border-radius:18px;background:color-mix(in srgb,var(--gold,#c9a227) 7%,transparent);
  padding:24px 24px 22px;position:relative;overflow:hidden}
.calc__req::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;inline-size:3px;
  background:var(--gold,#c9a227)}
.calc__reqTag{margin:0 0 6px;font-size:12px;letter-spacing:.04em;color:var(--gold,#c9a227);font-weight:600}
.calc__req h3{margin:0 0 8px;font-size:21px;line-height:1.45;font-weight:700}
.calc__reqSub{margin:0;font-size:14px;line-height:1.85;color:var(--muted);max-inline-size:68ch}

.calc__reqGets{list-style:none;margin:16px 0 20px;padding:0;display:grid;gap:7px}
.calc__reqGets li{position:relative;padding-inline-start:24px;font-size:14px;line-height:1.7}
.calc__reqGets li::before{content:"✓";position:absolute;inset-inline-start:0;color:var(--gold,#c9a227);font-weight:700}

.calc__reqForm{display:grid;gap:14px;margin-block-start:4px}
.calc__reqRow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.calc__f{display:grid;gap:6px}
.calc__f > span{font-size:13.5px;font-weight:600}
.calc__f > span em{font-style:normal;font-weight:400;color:var(--muted);font-size:12.5px}
.calc__f input[type=text],.calc__f input[type=tel],.calc__f input[type=email]{
  inline-size:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;
  background:#fff;color:inherit;font:inherit;font-size:15px;
  transition:border-color .2s,box-shadow .2s}
.calc__f input::placeholder{color:color-mix(in srgb,currentColor 38%,transparent)}
.calc__f input:focus{outline:0;border-color:var(--gold,#c9a227);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--gold,#c9a227) 22%,transparent)}
.calc__f input[aria-invalid="true"]{border-color:#c0392b;
  box-shadow:0 0 0 3px color-mix(in srgb,#c0392b 18%,transparent)}

/* Off-screen rather than display:none — a bot that skips hidden fields still fills this one. */
.calc__hp{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.calc__reqErr{margin:0;font-size:13.5px;line-height:1.7;color:inherit;
  background:color-mix(in srgb,#c0392b 12%,transparent);border-inline-start:3px solid #c0392b;
  border-radius:10px;padding:10px 13px}
.calc__reqGo{inline-size:100%;justify-content:center;font-size:15.5px;padding-block:14px}
.calc__reqGo[disabled]{opacity:.62;cursor:progress}
.calc__reqTrust{margin:0;font-size:12.5px;line-height:1.7;color:var(--muted);text-align:center}

/* ---- success state ---- */
.calc__reqDone{text-align:center;padding-block:6px}
.calc__reqTick{inline-size:52px;block-size:52px;margin:0 auto 14px;border-radius:50%;
  display:grid;place-items:center;font-size:26px;font-weight:700;color:#0d1b2a;
  background:var(--gold,#c9a227)}
.calc__reqDone h3{margin:0 0 6px}
.calc__reqRef{margin:0 0 10px;font-size:15px}
.calc__reqRef b{font-size:19px;letter-spacing:.06em;color:var(--gold,#c9a227)}
.calc__reqDone .calc__reqSub{margin-inline:auto;margin-block-end:18px}
.calc__reqDone .btn{display:inline-flex}

@media (max-width:600px){
  .calc__req{padding:20px 18px}
  .calc__req h3{font-size:19px}
  .calc__reqRow{grid-template-columns:1fr}
}
/* ---- estimate gate ----
   The figures are masked in the DOM until the visitor is known (calculator.js never writes
   the real numbers before then). These rules only make the masked state read as deliberate
   rather than broken, and pull the request card above the fold of the result. */
#calc[data-gated="1"] .calc__price,
#calc[data-gated="1"] .calc__rate,
#calc[data-gated="1"] .calc__vat,
#calc[data-gated="1"] .calc__lockRow b{
  color:var(--muted);letter-spacing:.14em;user-select:none}
#calc[data-gated="1"] .calc__res{position:relative}
#calc[data-gated="1"] .calc__res::after{
  content:"↑ اكتب اسمك ورقمك في البطاقة أعلاه ليظهر الرقم";
  display:block;margin-block-start:18px;font-size:14px;font-weight:600;color:var(--gold-ink)}
/* the card is the action now, so it leads the step instead of trailing it */
#calc[data-gated="1"] .calc__step--res{display:flex;flex-direction:column}
#calc[data-gated="1"] .calc__req{order:-1;margin-block:0 26px}
#calc[data-gated="1"] .calc__how{opacity:.55}
/* ---- a line every job includes (EPDM rubber, the brush pile on a sliding sash) ----
   Not a choice, so no pills and no chevron: the group states its answer and says it is included. */
.calc__oneRow{display:flex;align-items:center;gap:14px;padding:14px 17px}
.calc__spec--one .calc__specV{color:inherit}
.calc__incl{flex:none;font-style:normal;font-size:12px;font-weight:600;color:var(--muted);
  padding:2px 10px;border:1px solid var(--line);border-radius:999px}
/* A windows option that costs nothing extra has no riyal figure to show. */
.calc__mult:empty{display:none}
@media (max-width:600px){
  .calc__oneRow{padding:12px 14px}
}
/* A saved link that carried options the calculator no longer offers. */
.calc__stale{margin:0 0 16px;padding:11px 14px;border-radius:12px;font-size:14px;line-height:1.8;
  background:color-mix(in srgb,var(--gold,#c9a227) 9%,transparent);
  border-inline-start:3px solid var(--gold,#c9a227)}
/* The live per-m² rate is masked until the visitor is known (calculator.js never writes it). */
.calc__live--locked .calc__liveV b{color:var(--muted);letter-spacing:.14em;user-select:none}
/* Extras priced per piece (curtain wall windows and doors): the count sits inside the choice's
   own group, under its pills, so the price moves as soon as the extra is picked. */
.calc__xrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.calc__spec .calc__xrow{padding:0 17px 17px}
.calc__xrow label{font-size:14.5px;color:var(--muted);min-inline-size:190px}
.calc__xrow input{font:inherit;font-size:15px;padding:10px 12px;border:1px solid var(--line);border-radius:11px;
  inline-size:130px;background:#fff;color:inherit}
.calc__xrow input[aria-invalid="true"]{border-color:#c0392b}
.calc__xrow span{font-size:14px;color:var(--muted)}
@media (max-width:600px){
  .calc__xrow{gap:6px 10px}
  .calc__xrow label{flex-basis:100%;min-inline-size:0}
}
/* ---- what the picked option gives the visitor (26 Sep 2026) ----
   Two short lines under a group's pills — «تحصل على / مثالي لـ» — rewritten on
   every pick. On a fixed «مشمول» line it is a quieter note under the row. */
.calc__why{margin:0 17px 17px;padding:11px 14px;border-radius:12px;font-size:13.5px;line-height:1.8;
  background:color-mix(in srgb,var(--gold,#c9a227) 7%,transparent);
  border-inline-start:3px solid var(--gold,#c9a227)}
.calc__why span{display:block}
.calc__why b{font-weight:700}
.calc__why--one{margin:-4px 17px 14px;padding:0 14px;background:transparent;border-inline-start-color:var(--line);
  color:var(--muted);font-size:13px}
@media (max-width:600px){
  .calc__why{margin-inline:14px}
}
/* The per-piece extras, on their own line in the live price box. */
.calc__liveX{flex-basis:100%;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
@media (max-width:600px){
  .calc__spec .calc__xrow{padding-inline:14px}
}