/* Quando Project Materials Calculator — scoped to #calculator.
   Colours and fonts read Elementor GLOBAL CSS variables, so changing a Global
   Color or Global Font in Site Settings rebrands the calculator too. */
#calculator {
  --q-copper:      var(--e-global-color-primary,   #A84018);
  --q-charcoal:    var(--e-global-color-secondary, #1C1917);
  --q-ink:         var(--e-global-color-text,      #1C1917);
  --q-copperdeep:  var(--e-global-color-accent,    #7C2F11);
  --q-copperlight: var(--e-global-color-qcopperlt, #E8834A);
  --q-charcoal2:   var(--e-global-color-qcharcoal2,#2A2522);
  --q-charcoal3:   var(--e-global-color-qcharcoal3,#3D3733);
  --q-warmwhite:   var(--e-global-color-qwarmwhite,#FAF8F5);
  --q-stoneline:   var(--e-global-color-qstoneline,#DAD4CB);
  --q-muted:       var(--e-global-color-qmuted,    #5C554F);
  --q-muteddark:   var(--e-global-color-qmuteddark,#B5ACA3);
  --q-body: var(--e-global-typography-text-font-family, 'IBM Plex Sans'), system-ui, sans-serif;
  --q-mono: var(--e-global-typography-accent-font-family, 'IBM Plex Mono'), ui-monospace, monospace;
  --q-display: var(--e-global-typography-primary-font-family, 'Archivo'), sans-serif;
  font-family: var(--q-body);
  color: var(--q-ink);
}
#calculator *, #calculator *::before, #calculator *::after { box-sizing: border-box; }
#calculator [hidden] { display: none !important; }

/* tabs */
#calculator .calc-tabs { display: flex; flex-wrap: wrap; gap: 8px; border-bottom: 1px solid var(--q-stoneline); padding-bottom: 16px; margin-bottom: 32px; }
#calculator .calc-tab {
  min-height: 44px; padding: 11px 16px;
  font-family: var(--q-mono); font-size: .78rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  background: transparent; color: var(--q-muted);
  border: 1px solid var(--q-stoneline); border-radius: 2px; cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
#calculator .calc-tab:hover { border-color: var(--q-copper); color: var(--q-copperdeep); }
#calculator .calc-tab[aria-selected="true"] { background: var(--q-charcoal); border-color: var(--q-charcoal); color: #fff; }
#calculator .calc-tab:focus-visible { outline: 3px solid var(--q-copper); outline-offset: 2px; }

/* layout */
#calculator .calc-layout { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
#calculator .calc-inputs { flex: 1 1 380px; min-width: 0; }
#calculator .calc-output { flex: 1 1 320px; min-width: 0; position: sticky; top: 110px; }
@media (max-width: 979px) { #calculator .calc-output { position: static; } }
#calculator h3 { font-family: var(--q-display); font-weight: 700; letter-spacing: -.02em; margin: 0 0 8px; color: var(--q-charcoal); font-size: 1.35rem; }
#calculator .muted { color: var(--q-muted); margin: 0 0 8px; }

/* fields */
#calculator .form { display: flex; flex-wrap: wrap; gap: 16px 18px; }
#calculator .field { display: flex; flex-direction: column; gap: 7px; flex: 1 1 100%; }
@media (min-width: 680px) { #calculator .field.is-half { flex: 1 1 calc(50% - 9px); } }
#calculator .field label { font-family: var(--q-mono); font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--q-ink); }
#calculator .field .req { color: var(--q-copper); }
#calculator .field-hint { font-size: .85rem; color: var(--q-muted); margin: 0; }
#calculator .field input, #calculator .field select {
  width: 100%; min-height: 48px; padding: 13px 15px;
  font-family: var(--q-body); font-size: 1rem; color: var(--q-ink);
  background: #fff; border: 1px solid var(--q-stoneline); border-radius: 2px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
#calculator .field input:hover, #calculator .field select:hover { border-color: var(--q-muted); }
#calculator .field input:focus, #calculator .field select:focus { outline: none; border-color: var(--q-copper); box-shadow: 0 0 0 3px rgba(168,64,24,.14); }
#calculator .field input[aria-invalid="true"], #calculator .field select[aria-invalid="true"] { border-color: #B3261E; }
#calculator .field-error { font-size: .88rem; color: #B3261E; margin: 0; font-weight: 500; }
#calculator .field-error:empty { display: none; }
#calculator .form-actions { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }

/* buttons — match the Elementor button widget */
#calculator .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 14px 26px;
  font-family: var(--q-mono); font-size: .78rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  border: 2px solid transparent; border-radius: 2px; cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
#calculator .btn--primary { background: var(--q-copper); border-color: var(--q-copper); color: #fff; }
#calculator .btn--primary:hover { background: var(--q-copperdeep); border-color: var(--q-copperdeep); }
#calculator .btn--outline { background: transparent; border-color: var(--q-charcoal); color: var(--q-charcoal); }
#calculator .btn--outline:hover { background: var(--q-charcoal); color: var(--q-warmwhite); }
#calculator .btn--ghost { background: transparent; border-color: currentColor; color: inherit; }
#calculator .btn--ghost:hover { background: var(--q-warmwhite); border-color: var(--q-warmwhite); color: var(--q-charcoal); }
#calculator .btn:focus-visible { outline: 3px solid var(--q-copperlight); outline-offset: 2px; }

/* result card */
#calculator .result-card { background: var(--q-charcoal); color: var(--q-warmwhite); border-top: 3px solid var(--q-copperlight); padding: 32px 24px; }
#calculator .result-card h3 { color: #fff; margin: 0 0 4px; }
#calculator .result-sub { font-family: var(--q-mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--q-muteddark); margin: 0 0 24px; }
#calculator .result-list { list-style: none; margin: 0 0 24px; padding: 0; }
#calculator .result-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--q-charcoal3); }
#calculator .result-label { font-size: .95rem; color: var(--q-muteddark); }
#calculator .result-value { font-family: var(--q-mono); font-size: 1.02rem; font-weight: 600; color: var(--q-copperlight); text-align: right; white-space: nowrap; }
#calculator .result-value .unit { font-size: .78rem; color: var(--q-muteddark); font-weight: 400; margin-left: 3px; }
#calculator .result-headline { display: flex; align-items: baseline; gap: 10px; padding: 16px 0 24px; border-bottom: 1px solid var(--q-charcoal3); margin-bottom: 16px; }
#calculator .result-headline .result-value { font-size: 1.9rem; }
#calculator .result-empty { color: var(--q-muteddark); font-size: .95rem; }
#calculator .cluster { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

@media (prefers-reduced-motion: reduce) {
  #calculator *, #calculator *::before, #calculator *::after { transition-duration: .001ms !important; }
}