/* ============================================================
   Smart Infrastructure Quote Builder — client stylesheet
   Namespaced .sqb / #sqb-*  ·  Barreras IT
   Consumes Lagom's live --brand-primary first; falls back to the
   Barreras orange (--sqb-brand) injected by hooks.php. Self-contained:
   no Bootstrap/jQuery dependency. Light + dark (.lagom-dark-mode).
   ============================================================ */
.sqb{
  /* Inherit the site's live Lagom brand colour so the estimator matches each environment
     (blue on staging, orange on production). hooks.php sets the fallback to the admin's
     configured brand colour for sites/pages where --brand-primary isn't defined. */
  --sqb-brand: var(--brand-primary, #F7931D);
  --sqb-brand-600:#E07E0C;
  --sqb-surface:#fff; --sqb-surface-2:#FAFBFC; --sqb-border:#E4E8ED; --sqb-border-2:#EEF1F4;
  --sqb-heading:#1B2733; --sqb-body:#48566A; --sqb-muted:#8A96A6;
  --sqb-ok:#1E9E6A; --sqb-ok-050:#E6F6EF; --sqb-warn:#C8811A; --sqb-warn-050:#FCF3E3;
  --sqb-danger:#D64545; --sqb-danger-050:#FBE9E9; --sqb-info:#3B82B6; --sqb-info-050:#EAF3F9;
  --sqb-radius:12px; --sqb-radius-sm:8px;
  --sqb-ring: color-mix(in srgb, var(--sqb-brand) 35%, transparent);
  --sqb-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-family:var(--sqb-font); color:var(--sqb-body);
}
.lagom-dark-mode .sqb{
  --sqb-surface:#15202E; --sqb-surface-2:#111A25; --sqb-border:#243243; --sqb-border-2:#1C2836;
  --sqb-heading:#EAF0F6; --sqb-body:#AEBAC8; --sqb-muted:#71808F;
  --sqb-ok-050:#12291F; --sqb-warn-050:#2E2411; --sqb-danger-050:#2E1717; --sqb-info-050:#13232E;
}
.sqb *{box-sizing:border-box}
.sqb h2,.sqb h3{color:var(--sqb-heading);margin:0 0 .35em}
.sqb h2{font-size:1.35rem} .sqb h3{font-size:1rem}
.sqb p{margin:0 0 1em}
.sqb-mut{color:var(--sqb-muted)}

/* buttons */
.sqb-btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;font:inherit;font-weight:600;
  cursor:pointer;border:1px solid transparent;border-radius:var(--sqb-radius-sm);padding:11px 20px;transition:.15s;text-decoration:none}
.sqb .sqb-btn-primary{background:var(--sqb-brand);color:#fff}
.sqb .sqb-btn-primary:hover{background:var(--sqb-brand-600);color:#fff;text-decoration:none}
.sqb .sqb-btn-ghost{background:transparent;border-color:var(--sqb-border);color:var(--sqb-heading)}
.sqb .sqb-btn-ghost:hover{background:var(--sqb-surface-2)}
.sqb .sqb-btn-quiet{background:transparent;color:var(--sqb-body)}
.sqb-btn:focus-visible{outline:3px solid var(--sqb-ring);outline-offset:1px}
.sqb-btn[disabled]{opacity:.55;cursor:not-allowed}

/* modal shell */
.sqb-backdrop{position:fixed;inset:0;background:rgba(12,18,28,.55);display:grid;place-items:center;padding:20px;z-index:99999}
.sqb-modal{background:var(--sqb-surface);border:1px solid var(--sqb-border);border-radius:18px;
  width:min(920px,100%);max-height:92vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 16px 56px rgba(0,0,0,.35)}
.sqb-modal-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 22px;border-bottom:1px solid var(--sqb-border)}
.sqb-modal-head .sqb-count{font-size:.78rem;color:var(--sqb-muted);font-weight:600}
.sqb-modal-body{padding:24px;overflow:auto}
.sqb-modal-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 22px;border-top:1px solid var(--sqb-border);background:var(--sqb-surface-2)}
.sqb-x{width:34px;height:34px;border-radius:8px;border:none;background:transparent;color:var(--sqb-body);font-size:1.2rem;cursor:pointer}
.sqb-x:hover{background:var(--sqb-border-2)}
.sqb-logo{height:26px;width:auto}

/* standalone host (full page) */
.sqb-host{max-width:820px;margin:0 auto;background:var(--sqb-surface);border:1px solid var(--sqb-border);
  border-radius:var(--sqb-radius);overflow:hidden}
.sqb-host .sqb-modal-head,.sqb-host .sqb-modal-foot{background:var(--sqb-surface-2)}

/* progress */
.sqb-progress{height:6px;background:var(--sqb-border-2)}
.sqb-progress>i{display:block;height:100%;background:var(--sqb-brand);width:12%;transition:width .35s}

/* forms */
.sqb-field{margin-bottom:16px}
.sqb-label{display:block;font-weight:600;color:var(--sqb-heading);margin-bottom:6px;font-size:.9rem}
.sqb-req{color:var(--sqb-danger);margin-left:2px}
.sqb-help{font-size:.8rem;color:var(--sqb-muted);margin-top:4px}
.sqb-input,.sqb-select{width:100%;font:inherit;font-size:.95rem;color:var(--sqb-heading);background:var(--sqb-surface);
  border:1px solid var(--sqb-border);border-radius:var(--sqb-radius-sm);padding:11px 13px;transition:.15s}
.sqb-input:focus,.sqb-select:focus{outline:none;border-color:var(--sqb-brand);box-shadow:0 0 0 3px var(--sqb-ring)}
.sqb-input.sqb-invalid,.sqb-select.sqb-invalid{border-color:var(--sqb-danger);box-shadow:0 0 0 3px var(--sqb-danger-050)}
.sqb-errmsg{color:var(--sqb-danger);font-size:.8rem;margin-top:5px}
.sqb-grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.sqb-grid2{grid-template-columns:1fr}}

/* service cards & choice cards */
.sqb-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.sqb-cards{grid-template-columns:1fr}}
.sqb-card{border:1.5px solid var(--sqb-border);border-radius:var(--sqb-radius);background:var(--sqb-surface);
  padding:14px;cursor:pointer;transition:.15s;display:flex;gap:12px;align-items:flex-start;position:relative}
.sqb-card:hover{border-color:var(--sqb-brand)}
.sqb-card.sqb-on{border-color:var(--sqb-brand);background:color-mix(in srgb,var(--sqb-brand) 8%,var(--sqb-surface));box-shadow:0 0 0 3px var(--sqb-ring)}
.sqb-card .ic{width:40px;height:40px;flex:none;border-radius:10px;display:grid;place-items:center;font-size:1.25rem;
  background:color-mix(in srgb,var(--sqb-brand) 12%,var(--sqb-surface));color:var(--sqb-brand-600)}
.sqb-card .t{font-weight:700;color:var(--sqb-heading)} .sqb-card .d{font-size:.8rem;color:var(--sqb-muted)}
.sqb-card .chk{position:absolute;top:10px;right:10px;width:20px;height:20px;border-radius:50%;background:var(--sqb-brand);
  color:#fff;display:grid;place-items:center;font-size:.65rem;opacity:0;transition:.15s}
.sqb-card.sqb-on .chk{opacity:1}

/* chips (multiselect) */
.sqb-chips{display:flex;flex-wrap:wrap;gap:8px}
.sqb-chip{border:1.5px solid var(--sqb-border);border-radius:100px;padding:8px 14px;cursor:pointer;font-size:.85rem;
  color:var(--sqb-body);background:var(--sqb-surface);transition:.15s;user-select:none}
.sqb-chip:hover{border-color:var(--sqb-brand)}
.sqb-chip.sqb-on{border-color:var(--sqb-brand);background:color-mix(in srgb,var(--sqb-brand) 10%,var(--sqb-surface));color:var(--sqb-brand-600);font-weight:600}

/* notices & result states */
.sqb-notice{border-radius:var(--sqb-radius-sm);padding:14px 16px;font-size:.9rem;margin-top:8px}
.sqb-notice-info{background:var(--sqb-info-050);color:var(--sqb-info)}
.sqb-notice-warn{background:var(--sqb-warn-050);color:var(--sqb-warn)}
.sqb-result{text-align:center;padding:34px 10px}
.sqb-result .badge{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;font-size:1.8rem;margin:0 auto 14px}
.sqb-result.ok .badge{background:var(--sqb-ok-050);color:var(--sqb-ok)}
.sqb-result.out .badge{background:var(--sqb-warn-050);color:var(--sqb-warn)}
.sqb-spin{width:46px;height:46px;border-radius:50%;border:5px solid var(--sqb-border-2);border-top-color:var(--sqb-brand);
  animation:sqbspin 1s linear infinite;margin:24px auto}
@keyframes sqbspin{to{transform:rotate(360deg)}}