/* Event price calculator, invoice style (2026-11-01).
   Append to main.css after the existing .calc rules, or load after main.css. */

@media (min-width:981px){.calc-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}}

/* Option rows: description on the left, live price on the right for comparison */
.calc-opt span{flex:1;min-width:0}
.calc-amt{margin-inline-start:auto;padding-inline-start:12px;white-space:nowrap;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink);font-size:15px;align-self:center}
.calc-meta{display:block;font:500 12.5px/1.45 var(--f-mono);font-style:normal;color:var(--gold-600);margin-top:4px}
.calc-meta:empty{display:none}
.calc-opt:has(input:checked){background:var(--paper);box-shadow:inset 0 0 0 1px rgba(217,162,84,.55)}
.calc-opt:has(input:disabled){cursor:not-allowed}
.calc-opt input:disabled~span,.calc-opt input:disabled~.calc-amt{opacity:.45}
.calc-row>span{display:flex;flex-direction:column}
.calc-sub-l{display:block;font-weight:400;font-size:13.5px;color:var(--ink-70);margin-top:2px}
.calc-opt-l{font-weight:400;color:var(--ink-50)}
.calc input[type=date]{font:inherit;font-size:16px;padding:8px 12px;border:1px solid rgba(20,29,48,.18);border-radius:var(--r-sm);background:var(--paper);color:var(--ink);min-width:150px}
.calc-warn{margin:8px 0 0;padding:10px 12px;border-radius:var(--r-sm);background:#FFF6E6;border:1px solid rgba(217,154,43,.4);color:#7A5410;font-size:14px;line-height:1.5}
.calc-warn[hidden]{display:none}

/* Invoice */
.inv-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.18)}
.inv-head .calc-k{margin:0 0 4px}
.inv-ref{margin:0;font:500 12px/1.4 var(--f-mono);color:rgba(255,255,255,.6);text-align:end}
.inv-head div .inv-ref{text-align:start}
.inv{width:100%;border-collapse:collapse;font-size:13.5px;line-height:1.4;font-variant-numeric:tabular-nums}
.inv th{font:500 11px/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--gold-300);text-align:end;padding:0 0 8px;border-bottom:1px solid rgba(255,255,255,.18);white-space:nowrap}
.inv th:first-child,.inv td:first-child{text-align:start}
.inv th+th,.inv td+td{padding-inline-start:10px}
.inv td{padding:9px 0;border-bottom:1px dashed rgba(255,255,255,.14);vertical-align:top;text-align:end;white-space:nowrap;color:#fff}
.inv td:first-child{white-space:normal;color:rgba(255,255,255,.88);padding-inline-end:6px}
.inv-no{color:rgba(255,255,255,.45);font-variant-numeric:tabular-nums}
.inv td small{display:block;color:var(--gold-200);font-size:12px;margin-top:3px}
.inv td .u{display:block;font-size:11px;color:rgba(255,255,255,.5)}
.inv-amt{font-weight:600}
.inv-m{display:none}
.inv-cur{margin:8px 0 6px;font-size:12px;color:rgba(255,255,255,.5);text-align:end}
.calc-sum b{font-variant-numeric:tabular-nums}

/* Sticky total while choosing options (small screens, where the invoice sits below) */
.calc-mini{display:none}
@media (max-width:980px){
  .calc-mini{display:flex;position:sticky;top:calc(var(--header-h) + 8px);z-index:5;align-items:center;gap:12px;background:var(--navy-900);color:#fff;border-radius:999px;padding:8px 8px 8px 20px;margin:0 0 16px;box-shadow:var(--shadow-2);font-size:14px}
  [dir="rtl"] .calc-mini{padding:8px 20px 8px 8px}
  .calc-mini b{margin-inline-start:auto;color:var(--gold-300);font-variant-numeric:tabular-nums;font-size:16px}
  .calc-mini a{color:var(--navy-950);background:var(--gold-300);border-radius:999px;padding:7px 14px;font-weight:600;text-decoration:none;white-space:nowrap}
}
@media (max-width:520px){
  /* Qty and unit price fold under the description so the table fits a phone */
  .inv th:nth-child(2),.inv th:nth-child(3),.inv td.inv-qty,.inv td.inv-unit{display:none}
  .inv-m{display:block;font-size:12px;color:rgba(255,255,255,.55);margin-top:3px;font-variant-numeric:tabular-nums}
  .calc-amt{font-size:14px}
  .calc-mini span{display:none}
}
[dir="rtl"] .calc input[type=date]{direction:ltr}
html[lang="ar"] .inv th{text-transform:none;letter-spacing:0;font-family:var(--f-sans)}
html[lang="ar"] .calc-meta{font-family:var(--f-sans);font-size:13px}
/* phones: let the form columns shrink (fixes a 2px sideways scroll that predates this update) */
@media (max-width:980px){.calc-grid{grid-template-columns:minmax(0,1fr)}.calc fieldset{min-inline-size:0}.calc-in,.calc-out{min-width:0}}