/* ── XKitchens instant countertop estimator ──────────────────────────
   Shared by /estimate/ and /free-quote-countertops/. Pricing lives in
   estimator.js (single source) — this file is presentation only.
   Uses the site tokens (--cream/--espresso/--red/--sand/--taupe/--walnut)
   with hardcoded fallbacks so it renders on any page. */

.est{background:var(--cream,#F5EFE4)}
.est .est-head{text-align:center;max-width:56ch;margin:0 auto 36px}
.est h2{font-family:var(--serif,'Instrument Serif',Georgia,serif);font-weight:400;
  line-height:1.08;font-size:clamp(2rem,4.5vw,3rem);margin-bottom:12px}
.est .est-lead{color:#574b3e;font-size:1.05rem}

.est-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:26px;align-items:start}

/* Controls card */
.est-controls,.est-panel{background:#fff;border:1px solid var(--sand,#E6D9BF);
  border-radius:16px;padding:26px 24px}
.est-label{display:block;font-family:var(--sans,'DM Sans',system-ui,sans-serif);
  font-weight:600;font-size:.92rem;margin:0 0 10px;color:var(--espresso,#2A211A)}
.est-label .opt{font-weight:400;color:var(--taupe,#A89478)}

/* Material tier cards */
.est-tiers{border:0;padding:0;margin:0 0 26px}
.est-tiers legend{padding:0}
.est-tier-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.est-tier{position:relative;text-align:left;background:var(--cream,#F5EFE4);
  border:1.5px solid var(--sand,#E6D9BF);border-radius:12px;padding:14px 12px 12px;
  cursor:pointer;font-family:var(--sans,'DM Sans',system-ui,sans-serif);
  color:var(--espresso,#2A211A);transition:border-color .15s ease,box-shadow .15s ease;
  min-height:44px}
.est-tier:hover{border-color:var(--taupe,#A89478)}
.est-tier[aria-pressed="true"]{border-color:var(--red,#B83D2F);border-width:2px;
  padding:13.5px 11.5px 11.5px;background:#fff;box-shadow:0 6px 18px rgba(184,61,47,.12)}
.est-tier .t-name{display:block;font-weight:600;font-size:.95rem;line-height:1.25}
.est-tier .t-sub{display:block;font-size:.78rem;color:#574b3e;margin-top:3px;line-height:1.3}
.est-tier .t-from{display:block;margin-top:9px;font-size:.83rem;color:#574b3e}
.est-tier .t-from b{font-weight:600;color:var(--red,#B83D2F);font-size:1rem}
.est-tier[aria-pressed="true"]::after{content:"✓";position:absolute;top:8px;right:10px;
  width:20px;height:20px;border-radius:50%;background:var(--red,#B83D2F);color:#fff;
  font-size:.72rem;line-height:20px;text-align:center}

/* Size slider */
.est-size{margin-bottom:24px}
.est-size .readout{float:right;font-weight:600;font-size:.95rem}
.est-size .readout b{color:var(--red,#B83D2F);font-size:1.05rem}
.est-slider{-webkit-appearance:none;appearance:none;width:100%;height:44px;
  background:transparent;cursor:pointer;margin:0}
.est-slider::-webkit-slider-runnable-track{height:6px;border-radius:3px;
  background:linear-gradient(to right,var(--red,#B83D2F) 0%,var(--red,#B83D2F) var(--fill,25%),var(--sand,#E6D9BF) var(--fill,25%))}
.est-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:28px;height:28px;
  border-radius:50%;background:#fff;border:3px solid var(--red,#B83D2F);
  box-shadow:0 2px 8px rgba(0,0,0,.18);margin-top:-11px}
.est-slider::-moz-range-track{height:6px;border-radius:3px;background:var(--sand,#E6D9BF)}
.est-slider::-moz-range-progress{height:6px;border-radius:3px;background:var(--red,#B83D2F)}
.est-slider::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;
  border:3px solid var(--red,#B83D2F);box-shadow:0 2px 8px rgba(0,0,0,.18)}
.est-scale{display:flex;justify-content:space-between;font-size:.78rem;color:var(--taupe,#A89478);margin-top:2px}
.est-hint{font-size:.83rem;color:var(--taupe,#A89478);margin-top:8px}

/* Options row: edge + sinks */
.est-opts{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:20px}
.est select{width:100%;font-family:var(--sans,'DM Sans',system-ui,sans-serif);font-size:1rem;
  color:var(--espresso,#2A211A);background:var(--cream,#F5EFE4);
  border:1.5px solid var(--sand,#E6D9BF);border-radius:9px;padding:11px 14px;min-height:48px}
.est select:focus{outline:0;border-color:var(--red,#B83D2F)}
.est-seg{display:grid;grid-template-columns:repeat(3,1fr);border:1.5px solid var(--sand,#E6D9BF);
  border-radius:9px;overflow:hidden;background:var(--cream,#F5EFE4)}
.est-seg button{min-height:48px;border:0;background:transparent;cursor:pointer;
  font-family:var(--sans,'DM Sans',system-ui,sans-serif);font-size:1rem;
  color:var(--espresso,#2A211A);border-right:1.5px solid var(--sand,#E6D9BF)}
.est-seg button:last-child{border-right:0}
.est-seg button[aria-pressed="true"]{background:var(--red,#B83D2F);color:#fff;font-weight:600}

/* Removal checkbox */
.est-check{display:flex;align-items:center;gap:10px;cursor:pointer;
  font-family:var(--sans,'DM Sans',system-ui,sans-serif);font-size:.98rem;min-height:44px}
.est-check input{width:22px;height:22px;accent-color:var(--red,#B83D2F);cursor:pointer;flex:none}

/* Mobile-only mini readout under the slider */
.est-mini{display:none}

/* Estimate panel */
.est-panel{text-align:center}
.est-panel .p-label{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--taupe,#A89478);margin-bottom:8px}
.est-range{font-family:var(--serif,'Instrument Serif',Georgia,serif);
  font-size:clamp(2.1rem,4.2vw,2.7rem);line-height:1.05;color:var(--espresso,#2A211A)}
.est-tax{font-size:.9rem;color:var(--taupe,#A89478);margin-top:6px}
.est-disc{font-size:.86rem;color:#574b3e;line-height:1.5;margin:16px 0 20px;text-align:left;
  padding:12px 14px;background:var(--cream,#F5EFE4);border-radius:10px}
.est-panel .btn{width:100%}

/* Lead form (revealed by the CTA) */
.est-form{display:none;text-align:left;margin-top:20px;padding-top:20px;
  border-top:1px solid var(--sand,#E6D9BF)}
.est-form.open{display:block}
.est-form .f-title{font-family:var(--serif,'Instrument Serif',Georgia,serif);
  font-size:1.4rem;margin-bottom:12px}
.est-form .field{margin-bottom:13px}
.est-form label{display:block;font-family:var(--sans,'DM Sans',system-ui,sans-serif);
  font-weight:600;font-size:.9rem;margin-bottom:5px}
.est-form label .opt{font-weight:400;color:var(--taupe,#A89478)}
.est-form input,.est-form select{width:100%;font-family:var(--sans,'DM Sans',system-ui,sans-serif);
  font-size:1rem;color:var(--espresso,#2A211A);background:var(--cream,#F5EFE4);
  border:1.5px solid var(--sand,#E6D9BF);border-radius:9px;padding:11px 14px;min-height:48px}
.est-form input:focus,.est-form select:focus{outline:0;border-color:var(--red,#B83D2F)}
.est-form .row{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.est-form .f-hint{font-size:.82rem;color:var(--taupe,#A89478);margin:-6px 0 12px}
.est-error{color:var(--red,#B83D2F);font-weight:600;font-size:.92rem;margin-bottom:12px;display:none}
.est-foot{text-align:center;font-size:.9rem;color:#574b3e;margin-top:12px}
.est-foot a{font-weight:600;color:inherit}

/* Confirmation */
.est-thanks{display:none;padding:26px 4px;text-align:center}
.est-thanks.open{display:block}
.est-thanks h3{font-family:var(--serif,'Instrument Serif',Georgia,serif);
  font-weight:400;font-size:1.8rem;margin-bottom:8px}
.est-thanks p{color:#574b3e;font-size:.97rem}

@media(max-width:860px){
  .est-grid{grid-template-columns:1fr;gap:16px}
  .est-tier-grid{grid-template-columns:1fr 1fr}
  .est-mini{display:block;text-align:center;font-size:.95rem;margin-top:10px;
    padding:9px 12px;background:var(--cream,#F5EFE4);border:1px solid var(--sand,#E6D9BF);
    border-radius:9px}
  .est-mini b{color:var(--red,#B83D2F)}
}
@media(max-width:480px){
  .est-opts{grid-template-columns:1fr}
  .est-controls,.est-panel{padding:20px 16px}
}

/* The estimator is JS-driven — hide it entirely without JS */
.no-js-hide{display:none}