/* ============================================================
   Insurance Calculator — 2026
   Scoped under .calc-2026 so it composes with site.css tokens
   without touching any other page. Enqueued only on
   page-calculator.php (see functions.php → gi_assets()).
   ============================================================ */

.calc-2026 .calc-container{
  max-width:1120px; margin-inline:auto; padding-inline:var(--pad-x);
}
/* Narrower column for the lean lead form (Name / Phone / Car / Value). */
.calc-2026 .calc-container--narrow{ max-width:760px; }
.calc-2026 .txt-accent{ color:var(--accent); }
.calc-2026 .req{ color:#e0483d; }
.calc-2026 .calc-section{ padding-block:clamp(2.5rem,5vw,4rem); }
.calc-2026 .calc-section--tight{ padding-top:0; }

/* ---------- HERO ---------- */
.calc-2026 .calc-hero{
  position:relative; overflow:hidden;
  background:linear-gradient(115deg,#eef4f1 0%,#f5f9f7 55%,#eef4f1 100%);
  padding-block:clamp(1.5rem,3vw,2.25rem);
}
.calc-2026 .calc-hero__grid{
  display:grid; grid-template-columns:1fr 1.12fr; gap:clamp(1.5rem,4vw,2.5rem);
  align-items:center; min-height:clamp(300px,32vw,430px);
}
.calc-2026 .calc-crumb{ font-size:.82rem; color:var(--gray); margin-bottom:1rem; display:flex; align-items:center; gap:.5rem; }
.calc-2026 .calc-crumb a{ color:var(--gray); text-decoration:none; }
.calc-2026 .calc-crumb a:hover{ color:var(--accent); }
.calc-2026 .calc-hero__title{
  font-size:clamp(2.3rem,5vw,3.4rem); font-weight:700; line-height:1.06; color:var(--dark); margin:0 0 1rem;
}
.calc-2026 .calc-hero__lead{ font-size:1.02rem; color:var(--gray); max-width:30em; margin:0 0 1.6rem; }

.calc-2026 .calc-chips{
  list-style:none; margin:0; padding:1rem 1.1rem; display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh); max-width:34rem;
}
.calc-2026 .calc-chip{ display:flex; align-items:center; gap:.6rem; padding:.15rem .5rem; border-left:1px solid var(--line); }
.calc-2026 .calc-chip:first-child{ border-left:0; }
.calc-2026 .calc-chip__ico{ display:grid; place-items:center; width:36px; height:36px; flex:none; border-radius:50%; background:var(--accent-soft); color:var(--accent); }
.calc-2026 .calc-chip__ico .ico{ width:18px; height:18px; }
.calc-2026 .calc-chip__txt strong{ display:block; font-size:.9rem; color:var(--dark); line-height:1.15; }
.calc-2026 .calc-chip__txt span{ display:block; font-size:.76rem; color:var(--gray); }

/* The hero artwork (car + calculator + shield) is a single composed image.
   It bleeds to the right edge of the section, echoing the mockup. */
/* Full-bleed the composed artwork to the viewport's right edge so the hero
   fills the space instead of leaving the container's right margin blank.
   Absolutely positioned against .calc-hero (the full-width section), while the
   grid's second track still reserves the right half so the copy stays left. */
.calc-2026 .calc-hero__media{
  position:absolute; top:0; right:0; bottom:0; margin:0;
  width:clamp(360px,48vw,760px);
}
.calc-2026 .calc-hero__img{
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:center;
}

/* ---------- CARD (Vehicle Details) ---------- */
.calc-2026 .calc-card{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-sm);
  padding:clamp(1.4rem,3vw,2.4rem);
}
.calc-2026 .calc-card__head{ display:flex; align-items:center; gap:1rem; margin-bottom:1.8rem; }
.calc-2026 .calc-card__ico{ display:grid; place-items:center; width:58px; height:58px; flex:none; border-radius:50%; background:var(--accent-soft); color:var(--accent); }
.calc-2026 .calc-card__ico .ico{ width:28px; height:28px; }
.calc-2026 .calc-card__title{ font-size:clamp(1.2rem,2.4vw,1.5rem); font-weight:700; color:var(--dark); margin:0; }
.calc-2026 .calc-card__sub{ font-size:.92rem; color:var(--gray); margin:.2rem 0 0; }

.calc-2026 .calc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.25rem 1.5rem; }
.calc-2026 .calc-field--full{ grid-column:1 / -1; }
.calc-2026 .calc-field label{ display:block; font-size:.9rem; font-weight:600; color:var(--dark); margin-bottom:.5rem; }
.calc-2026 .calc-field select,
.calc-2026 .calc-field input,
.calc-2026 .calc-price input{
  width:100%; font:inherit; color:var(--dark);
  padding:.85rem 1rem; border:1px solid var(--line); border-radius:var(--r);
  background:var(--white); transition:border-color var(--t), box-shadow var(--t);
}
.calc-2026 .calc-field input:focus{ outline:0; border-color:var(--accent); box-shadow:0 0 0 3px rgba(23,166,115,.14); }
/* Validation states (shared .field markup) legible on the white card. */
.calc-2026 .field__error{ color:#e0483d; }
.calc-2026 .form-status.is-ok{ color:#12805a; }
.calc-2026 .form-status.is-err{ color:#e0483d; }
.calc-2026 .form-status{ text-align:center; }
.calc-2026 .calc-submit{ margin-top:1.6rem; font-size:1.02rem; }
.calc-2026 .calc-submit .ico{ width:20px; height:20px; }
.calc-2026 .calc-field select{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; background-size:1.1rem; padding-right:2.6rem;
}
.calc-2026 .calc-field select:focus,
.calc-2026 .calc-price input:focus{ outline:0; border-color:var(--accent); box-shadow:0 0 0 3px rgba(23,166,115,.14); }
.calc-2026 .calc-price{ position:relative; }
.calc-2026 .calc-price input{ padding-right:3.4rem; }
.calc-2026 .calc-price__unit{
  position:absolute; right:1rem; top:50%; transform:translateY(-50%);
  font-size:.85rem; font-weight:600; color:var(--gray);
}

.calc-2026 .calc-note{
  display:flex; gap:.85rem; margin-top:1.6rem; padding:1.1rem 1.25rem;
  background:var(--accent-soft); border-radius:var(--r);
}
.calc-2026 .calc-note__ico{ color:var(--accent); flex:none; }
.calc-2026 .calc-note__ico .ico{ width:24px; height:24px; }
.calc-2026 .calc-note strong{ display:block; color:var(--primary); font-size:.95rem; margin-bottom:.2rem; }
.calc-2026 .calc-note p{ margin:0; font-size:.88rem; color:var(--gray); line-height:1.55; }

/* ---------- RESULT ---------- */
.calc-2026 .calc-result{
  margin-top:1.5rem; padding:clamp(1.4rem,3vw,2rem);
  background:linear-gradient(180deg,#f0f9f4,#e9f5ef);
  border:1px solid #d7ebe0; border-radius:var(--r-lg);
}
.calc-2026 .calc-result[hidden]{ display:none; }
.calc-2026 .calc-result.is-shown{ animation:calc-fade .3s ease; }
@keyframes calc-fade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.calc-2026 .calc-result__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:1rem;
  text-align:center; margin-bottom:1.4rem;
}
.calc-2026 .calc-result__cell{ padding:.4rem 1rem; }
.calc-2026 .calc-result__cell + .calc-result__cell{ border-left:1px dashed #bcdccb; }
.calc-2026 .calc-result__label{ display:block; font-size:.92rem; color:var(--gray); margin-bottom:.4rem; }
.calc-2026 .calc-result__value{ display:block; font-size:clamp(1.7rem,3.6vw,2.3rem); font-weight:800; color:var(--accent); line-height:1.1; }
.calc-2026 .calc-result__note{ display:block; font-size:.8rem; color:var(--gray-light); margin-top:.35rem; }
/* WhatsApp CTA uses the brand green (--accent) to match the mockup, not the
   dark --primary forest green that .btn--primary ships by default. */
.calc-2026 .calc-result__cta{ font-size:1.02rem; background:var(--accent); border-color:var(--accent); }
.calc-2026 .calc-result__cta:hover{ background:#128a5f; border-color:#128a5f; }
.calc-2026 .calc-result__cta .ico{ width:20px; height:20px; }

/* ---------- FEATURE STRIP ---------- */
.calc-2026 .calc-features{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem;
}
.calc-2026 .calc-feature{ display:flex; gap:.85rem; align-items:flex-start; }
.calc-2026 .calc-feature__ico{ display:grid; place-items:center; width:48px; height:48px; flex:none; border-radius:50%; background:var(--accent-soft); color:var(--accent); }
.calc-2026 .calc-feature__ico .ico{ width:24px; height:24px; }
.calc-2026 .calc-feature__txt strong{ display:block; font-size:.98rem; color:var(--dark); margin-bottom:.15rem; }
.calc-2026 .calc-feature__txt p{ margin:0; font-size:.85rem; color:var(--gray); line-height:1.5; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .calc-2026 .calc-hero__grid{ grid-template-columns:1fr; min-height:0; }
  .calc-2026 .calc-hero__media{ position:static; width:auto; order:-1; margin-inline:calc(-1 * var(--pad-x)); }
  .calc-2026 .calc-hero__img{ height:auto; aspect-ratio:16/8; min-height:180px; }
  .calc-2026 .calc-features{ grid-template-columns:repeat(2,1fr); gap:1.5rem 1.25rem; }
}
@media (max-width:640px){
  .calc-2026 .calc-grid{ grid-template-columns:1fr; }
  .calc-2026 .calc-chips{ grid-template-columns:1fr; gap:.2rem; }
  .calc-2026 .calc-chip{ border-left:0; border-top:1px solid var(--line); padding-block:.55rem; }
  .calc-2026 .calc-chip:first-child{ border-top:0; }
  .calc-2026 .calc-result__grid{ grid-template-columns:1fr; }
  .calc-2026 .calc-result__cell + .calc-result__cell{ border-left:0; border-top:1px dashed #bcdccb; padding-top:1rem; }
  .calc-2026 .calc-features{ grid-template-columns:1fr; }
}