/* Honest Abe Roofing — Instant Quote UI Kit
   Built on Bootstrap 5 + light custom layer
   Primary CTA stays Abe Blue
*/
:root{
  /* Brand */
  --abe-blue-600:#0062C5;
  --abe-blue-700:#0456AA;
  --abe-blue-900:#022950;
  --abe-gold-500:#D1CD5B;

  /* Neutrals */
  --surface-0:#FFFFFF;
  --surface-50:#F8FAFC;
  --surface-100:#F1F5F9;
  --line-200:#E5E7EB;
  --ink-900:#111827;
  --ink-700:#1F2937;
  --ink-600:#4B5563;
  --ink-500:#6B7280;

  /* Status */
  --success-600:#16A34A;
  --warning-600:#F59E0B;
  --danger-600:#DC2626;

  /* Typography */
  --font-head:"Paralucent", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body:"Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Radii & shadows */
  --radius-btn:0.65rem;
  --radius-input:0.75rem;
  --radius-card:1rem;
  --radius-pill:999px;

  --shadow-card:0 12px 30px rgba(15,23,42,.08);
  --shadow-float:0 16px 40px rgba(15,23,42,.14);

  /* Spacing */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem; --s6:2rem; --s7:3rem; --s8:4rem;

  /* Bootstrap overrides (scoped via utility classes below) */
  --bs-primary: var(--abe-blue-600);

  /* Convenience aliases used in a few components */
  --abe-blue: var(--abe-blue-600);
  --abe-border: var(--line-200);
  --abe-muted: var(--ink-600);

}

/* Base */
html,body{height:100%; max-width:100%; overflow-x:hidden;}
body{
  font-family:var(--font-body);
  color:var(--ink-900);
  background:var(--surface-0);
}

/* Utility helpers (used across pages) */
.fw-black{font-weight:1000}

/* Prevent horizontal "blow out" on wide elements */
img, svg, video, canvas{max-width:100%; height:auto;}
.table{max-width:100%;}
.table-responsive{width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;}
.table-responsive{overflow-x:auto; -webkit-overflow-scrolling:touch;}

/* Slightly narrower max width for readability, but keep full width on small screens */
.container{max-width:1160px;}
.container-fluid{padding-left:16px; padding-right:16px;}

/* Form controls (cleaner / more "Lemonade-like") */
.form-control,.form-select{
  border-radius:var(--radius-input);
  border-color:var(--line-200);
  padding:.85rem 1rem;
  background-color:var(--surface-0);
}
.form-control:focus,.form-select:focus{
  border-color:rgba(0,98,197,.5);
  box-shadow:0 0 0 .25rem rgba(0,98,197,.15);
}
.input-group-text{border-radius:var(--radius-input); border-color:var(--line-200); background:var(--surface-50);}
a{color:var(--abe-blue-600)}
a:hover{color:var(--abe-blue-700)}

/* Headings */
.h-abe-hero{
  font-family:var(--font-head);
  letter-spacing:-0.02em;
  line-height:1.05;
}
.h-abe{
  font-family:var(--font-head);
  letter-spacing:-0.01em;
}

/* Buttons */
.btn-abe-primary{
  background:var(--abe-blue-600);
  border-color:var(--abe-blue-600);
  color:#fff;
  font-weight:800;
  border-radius:var(--radius-btn);
  box-shadow:0 12px 24px rgba(0,98,197,.18);
}
.btn-abe-primary:hover{
  background:var(--abe-blue-700);
  border-color:var(--abe-blue-700);
  color:#fff;
}
.btn-abe-ghost{
  background:transparent;
  border-color:var(--line-200);
  color:var(--ink-900);
  font-weight:800;
  border-radius:var(--radius-btn);
}
.btn-abe-ghost:hover{background:var(--surface-50)}
.btn-abe-ghost.active{
  background:var(--abe-blue-700);
  border-color:var(--abe-blue-700);
  color:#fff;
}
.btn-abe-link{
  background:transparent;border:0;padding:0;
  color:var(--abe-blue-600);font-weight:800;
}
.btn-abe-link:hover{color:var(--abe-blue-700);text-decoration:underline}

/* Inputs */
.form-control, .form-select{
  border-radius:var(--radius-input);
  border-color:var(--line-200);
  padding:.75rem .9rem;
}
.form-control:focus,.form-select:focus{
  border-color:rgba(0,98,197,.45);
  box-shadow:0 0 0 .25rem rgba(0,98,197,.12);
}

/* Cards */
.card{
  border-radius:var(--radius-card);
  border-color:var(--line-200);
  box-shadow:var(--shadow-card);
}
.card-header{
  background:var(--surface-0);
  border-bottom:1px solid var(--line-200);
}
.card-footer{
  background:var(--surface-0);
  border-top:1px solid var(--line-200);
}

/* Sections */
.section{padding:var(--s8) 0}
.section-soft{background:var(--surface-50)}
.soft-box{
  background:var(--surface-0);
  border:1px solid var(--line-200);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
}
hr.soft{border-color:var(--line-200);opacity:1}

/* Stepbar (sticky) */
.stepbar{
  position:sticky;top:0;z-index:1030;
  background:rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line-200);
}
.stepbar .brandmark{
  height:44px;width:auto;
}
.stepbar .kicker{
  font-size:.75rem;color:var(--ink-500);font-weight:800;letter-spacing:.02em;
}
.stepbar .title{
  font-weight:900;color:var(--ink-900);
}
.stepbar .step{
  font-size:.85rem;color:var(--ink-600);font-weight:800;
}

/* Trust chips */
.chip-row{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.5rem .75rem;
  border-radius:var(--radius-pill);
  background:var(--surface-50);
  border:1px solid var(--line-200);
  font-weight:900;
  font-size:.825rem;
  color:var(--ink-900);
  user-select:none;
}
.chip .dot{width:.55rem;height:.55rem;border-radius:999px;background:var(--success-600)}
.chip.info .dot{background:var(--abe-blue-600)}
.chip.warn .dot{background:var(--warning-600)}

/* Anchor pills */
.anchorbar{display:flex;flex-wrap:wrap;gap:.5rem}
.anchor{
  display:inline-flex;align-items:center;
  padding:.5rem .75rem;
  border-radius:var(--radius-pill);
  border:1px solid var(--line-200);
  background:var(--surface-0);
  font-weight:900;
  font-size:.85rem;
  color:var(--ink-900);
}
.anchor:hover{background:var(--surface-50);text-decoration:none}

/* Package cards */
.pkg{
  border:1px solid var(--line-200);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
  overflow:hidden;background:#fff;
  height:100%;
  display:flex;flex-direction:column;
}
.pkg .top{padding:1.25rem;border-bottom:1px solid var(--line-200)}
.pkg .badge{
  display:inline-flex;align-items:center;
  padding:.35rem .65rem;border-radius:var(--radius-pill);
  background:rgba(0,98,197,.10);
  color:var(--abe-blue-900);
  font-weight:1000;
  font-size:.75rem;
}
.pkg .title{font-family:var(--font-head);font-weight:900;margin:.6rem 0 .35rem}
.pkg .desc{color:var(--ink-600);margin:0}
.pkg .price{font-size:1.9rem;font-weight:1000;margin:.9rem 0 .2rem}
.pkg .sub{margin:0;color:var(--ink-500);font-size:.85rem}
.pkg .mid{padding:1.25rem;display:grid;gap:.75rem}
.pkg .why{
  padding:.75rem .85rem;border-radius:.9rem;
  background:var(--surface-50);
  border:1px solid var(--line-200);
  color:var(--ink-700);
  font-size:.95rem;
}
.pkg .ft{padding:1.25rem;border-top:1px solid var(--line-200);margin-top:auto}

/* Swatches */
.swatches{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.swatch{
  width:22px;height:22px;border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
}
.swatch[aria-selected="true"]{outline:3px solid rgba(0,98,197,.35)}

/* Map placeholder */
.map-shell{
  height:460px;border-radius:var(--radius-card);
  border:1px dashed var(--line-200);
  background:linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-500);font-weight:800;
}

/* Status timeline */
.timeline{display:grid;gap:.75rem}
.titem{
  display:flex;gap:.75rem;align-items:flex-start;
  padding:.85rem;border:1px solid var(--line-200);
  border-radius:1rem;background:#fff;
}
.tdot{
  width:14px;height:14px;border-radius:999px;margin-top:.2rem;
  background:var(--line-200);
}
.titem.done .tdot{background:var(--success-600)}
.titem.active .tdot{background:var(--abe-blue-600)}
.titem .tmeta{font-weight:900}
.titem .tdesc{color:var(--ink-600);font-size:.95rem}

/* Help widget */
.help{
  position:fixed;right:18px;bottom:18px;z-index:1080;
  display:flex;flex-direction:column;align-items:flex-end;gap:.5rem;
}
.help-btn{
  border:0;border-radius:var(--radius-pill);
  padding:.75rem .95rem;
  background:var(--abe-blue-600);
  color:#fff;font-weight:1000;
  box-shadow:var(--shadow-float);
}
.help-panel{
  width:280px;
  border:1px solid var(--line-200);
  background:#fff;border-radius:1rem;
  box-shadow:var(--shadow-float);
  overflow:hidden;
  display:none;
}
.help-panel.open{display:block}
.help-hd{padding:.85rem .95rem;border-bottom:1px solid var(--line-200);font-weight:1000}
.help-a a{
  display:flex;gap:.5rem;align-items:center;
  padding:.75rem .95rem;border-bottom:1px solid var(--line-200);
  color:var(--ink-900);font-weight:900;
}
.help-a a:hover{background:var(--surface-50);text-decoration:none}
.help-a a:last-child{border-bottom:0}
.help-a svg{width:18px;height:18px;opacity:.85}

/* Mobile bottom CTA */
.bottom-cta{
  position:fixed;left:0;right:0;bottom:0;
  z-index:1070;
  padding:.75rem;
  background:rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-top:1px solid var(--line-200);
  display:none;
}
@media (max-width: 767.98px){
  .bottom-cta{display:block}
  .bottom-cta .btn{width:100%}
  body{padding-bottom:84px} /* space for bottom bar */
}

/* Small helpers */
.kv{
  display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;
}
.kv b{font-weight:1000}
.subtle{
  background:var(--surface-50);
  border:1px solid var(--line-200);
  border-radius:1rem;
  padding:1rem;
}



/* ===== v3 Enhancements (Retail) ===== */
.weather-grid{display:grid;gap:12px}
.weather-event{
  border:1px solid var(--line-200);
  border-radius:16px;
  padding:12px 14px;
  background:var(--surface-50);
  display:flex;gap:12px;align-items:flex-start;
}
.weather-event .ico{
  width:38px;height:38px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,98,197,.10);
  color:var(--abe-blue-900);
  flex:0 0 auto;
  font-size:18px;
}
.weather-event .t{font-weight:1000;margin:0}
.weather-event .d{margin:2px 0 0;color:var(--ink-600);font-size:14px}
.weather-event--warn{background:rgba(245,158,11,.10);border-color:rgba(245,158,11,.35)}
.weather-event--warn .ico{background:rgba(245,158,11,.18);color:#7C3E00}
.weather-event--danger{background:rgba(220,38,38,.08);border-color:rgba(220,38,38,.25)}
.weather-event--danger .ico{background:rgba(220,38,38,.14);color:#7F1D1D}

.pkg--recommended{
  border:2px solid rgba(0,98,197,.45) !important;
  box-shadow:0 14px 34px rgba(0,98,197,.14);
}
.pkg--recommended .pkg__badge{
  background:rgba(0,98,197,.14);
  color:var(--abe-blue-900);
}
.pkg--recommended .pkg__ft .btn{
  box-shadow:0 10px 22px rgba(0,98,197,.22);
}

.pkg--value{background:linear-gradient(180deg, rgba(0,98,197,.06), rgba(255,255,255,0));}
.pkg--good{background:linear-gradient(180deg, rgba(107,114,128,.06), rgba(255,255,255,0));}
.pkg--best{background:linear-gradient(180deg, rgba(209,205,91,.18), rgba(255,255,255,0));}

.addon-row{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.addon-left{display:flex;gap:12px;align-items:flex-start}
.addon-ico{
  width:36px;height:36px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface-100);
  border:1px solid var(--line-200);
  color:var(--abe-blue-900);
  font-size:18px;
}
.addon-title{font-weight:1000;margin:0}
.addon-sub{margin:2px 0 0;color:var(--ink-600);font-size:14px}

.guarantee-tiles{
  display:grid;
  /* Use auto-fit to avoid 3-up tiles overflowing narrower columns */
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:12px;
}
@media (max-width: 960px){.guarantee-tiles{grid-template-columns:1fr}}
.gtile{
  border:1px solid var(--line-200);
  border-radius:16px;
  background:var(--surface-50);
  padding:12px 14px;
  display:flex;gap:12px;align-items:flex-start;
}
.gtile .ico{
  width:38px;height:38px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,98,197,.10);
  color:var(--abe-blue-900);
  font-size:18px;
}
.gtile .t{font-weight:1000;margin:0}
.gtile .d{margin:2px 0 0;color:var(--ink-600);font-size:14px}



/* ===== v4 Additions: notification banner + resume modal + offer compare ===== */
.notice-banner{
  border:1px solid var(--line-200);
  border-radius:16px;
  background:linear-gradient(90deg, rgba(0,98,197,.10), rgba(255,255,255,0));
  padding:12px 14px;
  display:flex;gap:12px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;
  box-shadow:var(--shadow-card);
}
.notice-banner .left{display:flex;gap:12px;align-items:flex-start}
.notice-banner .ico{
  width:40px;height:40px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,98,197,.14);
  color:var(--abe-blue-900);
  font-size:18px;
}
.notice-banner .t{font-weight:1000;margin:0}
.notice-banner .d{margin:2px 0 0;color:var(--ink-600);font-size:14px}
.notice-banner--success{
  background:linear-gradient(90deg, rgba(22,163,74,.10), rgba(255,255,255,0));
  border-color:rgba(22,163,74,.25);
}
.notice-banner--success .ico{background:rgba(22,163,74,.14);color:#14532D}

.notice-banner--warn{
  background:linear-gradient(90deg, rgba(245,158,11,.12), rgba(255,255,255,0));
  border-color:rgba(245,158,11,.30);
}
.notice-banner--warn .ico{background:rgba(245,158,11,.18);color:#7C3E00}

.offer-compare{
  border:1px solid var(--line-200);
  border-radius:16px;
  overflow:hidden;
  background:var(--surface-0);
}
.offer-compare table{margin:0}
.offer-compare th{
  background:var(--surface-50);
  font-weight:1000;
}
.offer-compare td{color:var(--ink-700)}
.disclosure{
  border:1px solid var(--line-200);
  border-radius:16px;
  background:var(--surface-50);
  padding:12px 14px;
  font-size:14px;
  color:var(--ink-600);
}



/* ===== Shared helpers to prevent padding/margin issues ===== */
.section--soft{background:var(--surface-50);} /* alias */
.section-soft{background:var(--surface-50);}  /* keep original */
.section{padding:var(--s8) 0;}

.card__hd{padding:var(--s5);border-bottom:1px solid var(--line-200);background:var(--surface-0);}
.card__bd{padding:var(--s5);background:var(--surface-0);}
.card__ft{padding:var(--s5);border-top:1px solid var(--line-200);background:var(--surface-0);}

.card-header.p-4,.card-body.p-4,.card-footer.p-4{padding:var(--s5)!important;}
.card-header.p-3,.card-body.p-3,.card-footer.p-3{padding:calc(var(--s5) - .25rem)!important;}
/* Ensure consistent rounding + overflow so edges look clean */
.card{overflow:hidden;}


/* =========================================================
   Advisor-specific styles
   ========================================================= */
/* Advisor UI additions (shares Honest Abe consumer styling)
   ========================================================= */

.app-shell{
  min-height:100vh;
  background: linear-gradient(180deg, var(--surface-50), var(--surface-0));
}

.sidebar{
  position:sticky;
  top:72px;
}

.kpi{
  border:1px solid var(--line-200);
  border-radius:16px;
  background:var(--surface-0);
  box-shadow:var(--shadow-card);
  padding:16px;
}

.kpi .label{font-size:12px;color:var(--ink-500);font-weight:800;margin:0}
.kpi .value{font-size:20px;font-weight:1000;margin:0}

.badge-soft{
  border:1px solid var(--line-200);
  background:var(--surface-50);
  color:var(--ink-900);
  font-weight:900;
  padding:6px 10px;
  border-radius:999px;
}

.badge-status{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:900;font-size:12px;
  padding:6px 10px;border-radius:999px;
  border:1px solid var(--line-200);
  background:var(--surface-50);
}
.badge-status i{width:10px;height:10px;border-radius:999px;background:var(--abe-blue-600);display:inline-block}
.badge-status--ok i{background:var(--success-600)}
.badge-status--warn i{background:var(--warning-600)}
.badge-status--danger i{background:var(--danger-600)}


/* Appointment tiles (Advisor dashboard) */
.appt-item{
  display:block;
  border-radius:18px;
  border-color:var(--line-200);
  color:inherit;
  text-decoration:none;
  transition: transform .12s ease, box-shadow .12s ease;
}
.appt-item:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(0,0,0,.08);
  color:inherit;
}
.appt-item:focus-visible{
  outline:none;
  box-shadow:0 0 0 .25rem rgba(0,98,197,.14), var(--shadow-card);
}
.appt-item .card-body{padding:22px 22px}
.appt-time{font-weight:1000;font-size:1.05rem;letter-spacing:-.01em}
.appt-name{font-family:var(--font-head);font-size:1.65rem;font-weight:1000;line-height:1.12;margin:0}
.appt-sub{color:var(--ink-600);font-size:.98rem}
.appt-sub + .appt-sub{margin-top:2px}
.appt-chevron{color:var(--ink-500);font-size:1.3rem}
@media (max-width: 575.98px){
  .appt-item .card-body{padding:18px}
  .appt-name{font-size:1.35rem}
}

.appt-card{
  border:1px solid var(--line-200);
  border-radius:16px;
  background:var(--surface-0);
  box-shadow:var(--shadow-card);
  overflow:hidden;
}
.appt-card__hd{
  padding:14px 16px;
  border-bottom:1px solid var(--line-200);
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.appt-card__bd{padding:14px 16px}
.appt-meta{display:flex;flex-wrap:wrap;gap:10px;color:var(--ink-600);font-size:14px}
.appt-actions{display:flex;flex-wrap:wrap;gap:10px}
.btn-icon{
  display:inline-flex;align-items:center;gap:10px;
}

.nav-workspace{
  border:1px solid var(--line-200);
  border-radius:16px;
  background:var(--surface-0);
  overflow:hidden;
}
.nav-workspace .nav-link{
  border-radius:0;
  color:var(--ink-900);
  font-weight:900;
  padding:12px 14px;
  border-bottom:1px solid var(--line-200);
}
.nav-workspace .nav-link.active{
  background:rgba(0,98,197,.10);
  color:var(--abe-blue-900);
}

.checklist{
  border:1px solid var(--line-200);
  border-radius:16px;
  background:var(--surface-0);
  box-shadow:var(--shadow-card);
  overflow:hidden;
}
.checklist__hd{
  padding:14px 16px;
  border-bottom:1px solid var(--line-200);
  font-weight:1000;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.checklist__bd{padding:12px 16px}
.checkitem{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 0;
  border-bottom:1px dashed var(--line-200);
}
.checkitem:last-child{border-bottom:0}
.checkitem input{margin-top:4px}
.checkitem .t{font-weight:900}
.checkitem .d{font-size:13px;color:var(--ink-600)}

.timeline{
  display:grid;gap:10px;
}
.tl-item{
  display:flex;gap:10px;align-items:flex-start;
}
.tl-dot{
  width:12px;height:12px;border-radius:999px;background:var(--line-200);
  margin-top:6px;
}
.tl-dot.done{background:var(--success-600)}
.tl-dot.doing{background:var(--abe-blue-600)}
.tl-dot.todo{background:var(--line-200)}
.tl-main{flex:1}
.tl-title{font-weight:1000;margin:0}
.tl-sub{margin:2px 0 0;color:var(--ink-600);font-size:13px}

.photo-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
@media (max-width: 992px){ .photo-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width: 576px){ .photo-grid{grid-template-columns:1fr;} }

.photo-tile{
  border:1px dashed var(--line-200);
  border-radius:16px;
  background:var(--surface-50);
  padding:12px;
  min-height:120px;
  display:flex;flex-direction:column;justify-content:space-between;gap:10px;
}
.photo-tile .cap{font-weight:1000}
.photo-tile .hint{font-size:13px;color:var(--ink-600)}
.photo-tile input{width:100%}

.mini-table td, .mini-table th{vertical-align:middle}
.codebox{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:12px;
  background:var(--surface-50);
  border:1px solid var(--line-200);
  border-radius:12px;
  padding:10px 12px;
  overflow:auto;
}



/* ===== v4 Visual Components (Advisor) ===== */
.notice-banner{
  border:1px solid var(--line-200);
  border-radius:16px;
  background:linear-gradient(90deg, rgba(0,98,197,.10), rgba(255,255,255,0));
  padding:12px 14px;
  display:flex;gap:12px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;
  box-shadow:var(--shadow-card);
}
.notice-banner .left{display:flex;gap:12px;align-items:flex-start}
.notice-banner .ico{
  width:40px;height:40px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,98,197,.14);
  color:var(--abe-blue-900);
  font-size:18px;
}
.notice-banner .t{font-weight:1000;margin:0}
.notice-banner .d{margin:2px 0 0;color:var(--ink-600);font-size:14px}
.notice-banner--success{
  background:linear-gradient(90deg, rgba(22,163,74,.10), rgba(255,255,255,0));
  border-color:rgba(22,163,74,.25);
}
.notice-banner--success .ico{background:rgba(22,163,74,.14);color:#14532D}
.notice-banner--warn{
  background:linear-gradient(90deg, rgba(245,158,11,.12), rgba(255,255,255,0));
  border-color:rgba(245,158,11,.30);
}
.notice-banner--warn .ico{background:rgba(245,158,11,.18);color:#7C3E00}

.weather-grid{display:grid;gap:12px}
.weather-event{
  border:1px solid var(--line-200);
  border-radius:16px;
  padding:12px 14px;
  background:var(--surface-50);
  display:flex;gap:12px;align-items:flex-start;
}
.weather-event .ico{
  width:38px;height:38px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,98,197,.10);
  color:var(--abe-blue-900);
  flex:0 0 auto;
  font-size:18px;
}
.weather-event .t{font-weight:1000;margin:0}
.weather-event .d{margin:2px 0 0;color:var(--ink-600);font-size:14px}
.weather-event--warn{background:rgba(245,158,11,.10);border-color:rgba(245,158,11,.35)}
.weather-event--warn .ico{background:rgba(245,158,11,.18);color:#7C3E00}
.weather-event--danger{background:rgba(220,38,38,.08);border-color:rgba(220,38,38,.25)}
.weather-event--danger .ico{background:rgba(220,38,38,.14);color:#7F1D1D}

.pkg--recommended{
  border:2px solid rgba(0,98,197,.45) !important;
  box-shadow:0 14px 34px rgba(0,98,197,.14);
}
.pkg--recommended .pkg__badge{
  background:rgba(0,98,197,.14);
  color:var(--abe-blue-900);
}
.pkg--recommended .pkg__ft .btn{
  box-shadow:0 10px 22px rgba(0,98,197,.22);
}
.pkg--value{background:linear-gradient(180deg, rgba(0,98,197,.06), rgba(255,255,255,0));}
.pkg--good{background:linear-gradient(180deg, rgba(107,114,128,.06), rgba(255,255,255,0));}
.pkg--best{background:linear-gradient(180deg, rgba(209,205,91,.18), rgba(255,255,255,0));}

.addon-row{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.addon-left{display:flex;gap:12px;align-items:flex-start}
.addon-ico{
  width:36px;height:36px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface-100);
  border:1px solid var(--line-200);
  color:var(--abe-blue-900);
  font-size:18px;
}
.addon-title{font-weight:1000;margin:0}
.addon-sub{margin:2px 0 0;color:var(--ink-600);font-size:14px}

.guarantee-tiles{
  display:grid;
  /* Use auto-fit to avoid 3-up tiles overflowing narrower columns */
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:12px;
}
@media (max-width: 960px){.guarantee-tiles{grid-template-columns:1fr}}
.gtile{
  border:1px solid var(--line-200);
  border-radius:16px;
  background:var(--surface-50);
  padding:12px 14px;
  display:flex;gap:12px;align-items:flex-start;
}
.gtile .ico{
  width:38px;height:38px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,98,197,.10);
  color:var(--abe-blue-900);
  font-size:18px;
}
.gtile .t{font-weight:1000;margin:0}
.gtile .d{margin:2px 0 0;color:var(--ink-600);font-size:14px}

.offer-compare{
  border:1px solid var(--line-200);
  border-radius:16px;
  overflow:hidden;
  background:var(--surface-0);
}
.offer-compare table{margin:0}
.offer-compare th{
  background:var(--surface-50);
  font-weight:1000;
}
.offer-compare td{color:var(--ink-700)}
.disclosure{
  border:1px solid var(--line-200);
  border-radius:16px;
  background:var(--surface-50);
  padding:12px 14px;
  font-size:14px;
  color:var(--ink-600);
}



/* ---------------------------
   UI v6 enhancements
---------------------------- */

/* Help widget: support both legacy and BEM classnames */
.help__btn, .help-btn{
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 1080;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem .9rem;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  box-shadow: 0 12px 30px rgba(0,0,0,.14);
}
.help__btn:hover, .help-btn:hover{ transform: translateY(-1px); }

.help__panel, .help-panel{
  position: fixed;
  right: 18px;
  bottom: calc(78px + env(safe-area-inset-bottom));
  z-index: 1080;
  width: 360px;
  max-width: calc(100vw - 36px);
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  overflow: hidden;
  display: none;
}
.help-panel.show, .help__panel.show{ display:block; }

.help__hd, .help-hd{
  padding: .9rem 1rem;
  background: rgba(13,110,253,.06);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.help__actions, .help-actions{ padding: .85rem 1rem; display: grid; gap: .5rem; }
.help__a, .help-a{
  display:flex; align-items:center; justify-content:space-between;
  padding:.7rem .8rem; border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  text-decoration:none;
  color: inherit;
}
.help__a:hover, .help-a:hover{ background: rgba(13,110,253,.04); }
.help__close, .help-close{
  border:0; background: transparent; font-size: 1.2rem; line-height: 1;
}

/* Weather cards */
.wx-stack{ display: grid; gap: .75rem; }
.wx-card{
  display:flex; gap:.75rem; align-items:flex-start;
  padding:.85rem .9rem;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
}
.wx-ico{
  width:40px; height:40px; border-radius: 12px;
  display:grid; place-items:center;
  background: rgba(13,110,253,.08);
  color: #0d6efd;
  flex: 0 0 auto;
}
.wx-title{ margin:0; font-weight: 800; }
.wx-sub{ margin:0; color: rgba(0,0,0,.65); font-size: .92rem; }
.wx-sev-high{ background: rgba(220,53,69,.06); border-color: rgba(220,53,69,.25); }
.wx-sev-high .wx-ico{ background: rgba(220,53,69,.12); color: #dc3545; }
.wx-sev-med{ background: rgba(255,193,7,.08); border-color: rgba(255,193,7,.30); }
.wx-sev-med .wx-ico{ background: rgba(255,193,7,.14); color: #b78100; }
.wx-sev-low{ background: rgba(13,110,253,.04); }

/* Add-on pills */
.addon-pill{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.55rem .75rem;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 999px;
  background: #fff;
}
.addon-pill input{ margin-top:0; }
.addon-info-btn{
  width:28px; height:28px; border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(13,110,253,.06);
  color: #0d6efd;
  display:grid; place-items:center;
}
.addon-info-btn:hover{ background: rgba(13,110,253,.10); }

/* Offer cards */
.offer-card{
  width:100%;
  text-align:left;
  padding: 1rem 1rem;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  transition: transform .08s ease, border-color .08s ease, box-shadow .08s ease;
}
.offer-card:hover{ transform: translateY(-1px); box-shadow: 0 10px 25px rgba(0,0,0,.08); }
.offer-card.active{
  border-color: rgba(13,110,253,.60);
  box-shadow: 0 14px 30px rgba(13,110,253,.12);
}
.offer-kicker{ font-weight: 800; color: rgba(0,0,0,.70); }
.offer-big{ font-size: 2rem; font-weight: 900; letter-spacing: -.02em; margin-top:.15rem; }
.offer-sub{ color: rgba(0,0,0,.60); margin-top:.2rem; }

/* Package cards refinements (good/better/best) */
.packages{ display:grid; gap: 16px; }
@media (min-width: 992px){
  .packages{ grid-template-columns: 1fr 1fr 1fr; }
}
.pkg{
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.10);
  overflow: hidden;
  background: #fff;
}
.pkg__top{ padding: 1rem 1rem .75rem; }
.pkg__mid{ padding: .75rem 1rem; }
.pkg__ft{ padding: .9rem 1rem 1rem; display:flex; align-items:center; justify-content:space-between; gap: .75rem; flex-wrap: wrap; }
.pkg__pill{ margin-top: .5rem; }
.pkg--good{ background: rgba(13,110,253,.02); }
.pkg--value{ border-color: rgba(13,110,253,.55); box-shadow: 0 16px 30px rgba(13,110,253,.12); }
.pkg--best{ background: rgba(255,193,7,.08); border-color: rgba(255,193,7,.35); }
.pkg__btn{ border-radius: 14px; padding: .65rem 1rem; font-weight: 800; }
.pkg--value .pkg__btn{ background: #0d6efd; color:#fff; border:0; }

/* Advisor payment method tabs */
.pay-methods{
  display:flex;
  flex-wrap: wrap;
  gap:.5rem;
  align-items:center;
  margin-bottom:.75rem;
}
.pay-method{
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  padding: .55rem .75rem;
  border-radius: 999px;
  font-weight: 800;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
}
.pay-method.active{
  border-color: rgba(13,110,253,.60);
  background: rgba(13,110,253,.08);
  color: #0d6efd;
}
.pay-panel{ display:none; }
.pay-panel.active{ display:block; }

/* Tighten input-group to match system look */
.input-group-text{ font-weight: 800; }


/* === V7 polish: prevent horizontal blowouts, improve inputs, unified Help chatbot === */
html, body { width: 100%; overflow-x: hidden; }
img, svg, video, canvas { max-width: 100%; height: auto; }

/* Inputs: make any plain inputs look like Bootstrap form-controls */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], input[type="search"],
select, textarea,
.input, .select {
  width: 100%;
  border: 1px solid rgba(15, 23, 42, .16);
  border-radius: 14px;
  padding: .72rem .95rem;
  background: #fff;
  transition: box-shadow .15s ease, border-color .15s ease;
}
select, .select { padding-right: 2.2rem; }
input:focus, select:focus, textarea:focus, .input:focus, .select:focus {
  outline: none;
  border-color: rgba(11, 94, 215, .55);
  box-shadow: 0 0 0 .2rem rgba(11, 94, 215, .12);
}

/* Tables should scroll instead of blowing out layout */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Help floating button (consumer + advisor unified) */
.help { position: fixed; right: 20px; bottom: 20px; z-index: 1050; }
.help-btn, .help__btn {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: 999px;
  padding: 12px 14px;
  background: var(--abe-blue, #0B5ED7);
  color: #fff;
  border: 0;
  box-shadow: 0 10px 25px rgba(2, 6, 23, .18);
}
.help-btn:hover, .help__btn:hover { filter: brightness(.96); }
.help-btn:active, .help__btn:active { transform: translateY(1px); }
.help-btn i, .help__btn i { font-size: 1.05rem; }

.help-panel, .help__panel {
  position: absolute;
  right: 0;
  bottom: 56px;
  width: 360px;
  max-width: calc(100vw - 40px);
  max-height: min(560px, calc(100vh - 120px));
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .12);
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(2, 6, 23, .18);
  display: none;
}
.help-panel.open, .help__panel.open { display: block; }
.help-hd {
  padding: 14px 14px 10px 14px;
  border-bottom: 1px solid rgba(15, 23, 42, .08);
  background: linear-gradient(180deg, rgba(11,94,215,.07), rgba(11,94,215,0));
}
.help-title { font-weight: 800; letter-spacing: -.01em; }
.help-sub { font-size: .86rem; color: rgba(15, 23, 42, .72); }
.help-close {
  background: transparent;
  border: 0;
  color: rgba(15, 23, 42, .75);
  padding: 6px 8px;
  border-radius: 10px;
}
.help-close:hover { background: rgba(15, 23, 42, .06); }

.help-tabs {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(15, 23, 42, .06);
}
.help-tab {
  flex: 1;
  border: 1px solid rgba(15, 23, 42, .12);
  background: #fff;
  border-radius: 12px;
  padding: 10px 10px;
  font-weight: 700;
  font-size: .92rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  color: rgba(15, 23, 42, .85);
}
.help-tab.active {
  border-color: rgba(11, 94, 215, .35);
  background: rgba(11, 94, 215, .07);
  color: rgba(11, 94, 215, 1);
}

.help-body { padding: 12px 14px 14px; }
.help-messages {
  height: 290px;
  max-height: 290px;
  overflow: auto;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 14px;
  padding: 10px;
  background: rgba(248, 250, 252, 1);
}
.msg { display: flex; margin: 8px 0; }
.msg-bot { justify-content: flex-start; }
.msg-user { justify-content: flex-end; }
.msg-bubble {
  max-width: 78%;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: .95rem;
  line-height: 1.25rem;
  box-shadow: 0 6px 16px rgba(2, 6, 23, .06);
}
.msg-bot .msg-bubble { background: #fff; border: 1px solid rgba(15, 23, 42, .08); }
.msg-user .msg-bubble { background: var(--abe-blue, #0B5ED7); color: #fff; }

.help-input {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.help-input input {
  flex: 1;
  border-radius: 14px !important;
}
.help-input button {
  border-radius: 14px;
  padding: 10px 12px;
}
.help-hint { font-size: .8rem; color: rgba(15, 23, 42, .68); margin-top: 8px; }

/* Make sticky page header not push content off-screen on small devices */
.page-wrap, .app-main { max-width: 1200px; margin: 0 auto; }
@media (max-width: 992px) {
  .help-panel, .help__panel { width: 340px; }
  .help-messages { height: 250px; max-height: 250px; }
}


/* Lite header/footer (streamlined quote experience) */
.abe-logo{height:44px;width:auto}
.abe-hdr-title{font-weight:800; letter-spacing:.2px; color:#0b1b2a; line-height:1.1}
.abe-hdr-sub{font-size:.9rem; color:#4b5b6b}
.abe-progress .progress-bar{background: var(--abe-blue);}
.abe-lite-footer a:hover{opacity:.85}
@media (max-width: 575.98px){
  .abe-logo{height:40px}
  .abe-hdr-title{font-size:1rem}
}

.appt-icon{
  width:46px;
  height:46px;
  flex:0 0 46px;
  border-radius:14px;
  background:var(--surface-100);
  border:1px solid var(--line-200);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--ink-900);
  font-size:1.05rem;
}
.appt-card:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(0,0,0,.08)}

/* Roof map (satellite mock) */
.roof-map__canvas{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--abe-border);
  background: radial-gradient(circle at 20% 30%, rgba(255,255,255,.25), transparent 45%),
              radial-gradient(circle at 70% 60%, rgba(255,255,255,.18), transparent 40%),
              linear-gradient(135deg, rgba(9,62,118,.15), rgba(9,62,118,.05));
}

.roof-map__grid{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: .35;
  mix-blend-mode: overlay;
}

.roof-map__overlay{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.roof-map__overlay polygon{
  fill: rgba(9,62,118,.12);
  stroke: rgba(9,62,118,.65);
  stroke-width: 1.8;
  vector-effect: non-scaling-stroke;
  transition: fill .15s ease, stroke .15s ease, opacity .15s ease;
  opacity: .95;
}

.roof-map__overlay polygon.is-inactive{
  opacity: .28;
  fill: rgba(0,0,0,.06);
  stroke: rgba(0,0,0,.28);
}

.roof-map__label{
  position: absolute;
  font-size: 12px;
  line-height: 1;
  color: #0b1f33;
}
.roof-map__label span{
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.roof-map__label--main{ left: 38%; top: 24%; }
.roof-map__label--garage{ left: 16%; top: 70%; }

.roof-list{ display: grid; gap: 10px; }
.roof-item{
  display: grid;
  grid-template-columns: 20px 1fr auto;
  gap: 10px;
  align-items: start;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.7);
  cursor: pointer;
}
.roof-item:hover{ border-color: rgba(9,62,118,.25); }
.roof-item__meta{ display: grid; gap: 2px; }
.roof-item__title{ font-weight: 700; }
.roof-item__sub{ font-size: 12px; color: rgba(0,0,0,.6); }
.roof-pill{
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(9,62,118,.08);
  border: 1px solid rgba(9,62,118,.18);
  color: var(--abe-blue);
  white-space: nowrap;
}

.roof-outline-mock{
  height: 320px;
  border-radius: 18px;
  border: 1px solid var(--abe-border);
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.25), transparent 45%),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.18), transparent 40%),
    linear-gradient(135deg, rgba(9,62,118,.18), rgba(9,62,118,.06));
}

.roof-outline-mock__handles{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(0,0,0,.55);
  font-size: 13px;
}

/* Prevent tables / long strings from forcing horizontal overflow */
.table-responsive{ -webkit-overflow-scrolling: touch; }
.table td,.table th{ white-space: normal; word-break: break-word; }


/* --- UX helpers (prototype) --- */
.card-clickable{cursor:pointer; transition:transform .08s ease, box-shadow .08s ease;}
.card-clickable:hover{transform:translateY(-1px); box-shadow:0 10px 28px rgba(0,0,0,.08);}
.insurance-cta .btn{pointer-events:none;} /* anchor is the click target */
.repair-checkout-aside{position:relative;}

/* Keep the repair financing card readable on larger screens without covering content */
@media (min-width: 992px){
  .repair-checkout-aside{position:sticky; top:92px;}
}
.table-responsive{overflow-x:auto; -webkit-overflow-scrolling:touch;}

/* ----------------------------
   Retail landing page polish
   (Option A: clean + premium)
----------------------------- */

.retail-landing-hero{
  position: relative;
  overflow: hidden;
}

.retail-landing-hero::before{
  content: "";
  position: absolute;
  /* Background intentionally removed to keep the landing page clean
     (requested: "background is too busy"). */
  inset: 0;
  background: none;
  opacity: 0;
  pointer-events: none;
}

.retail-landing-hero .card{
  /* Avoid GPU-heavy backdrop filters (can be janky on some Macs). */
  backdrop-filter: none;
}

.retail-landing-hero .trust-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.retail-landing-hero .trust-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.9);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text);
  transition: transform .18s ease, box-shadow .18s ease;
}

.retail-landing-hero .trust-chip svg{
  width: 18px;
  height: 18px;
  color: var(--primary);
}

.retail-landing-hero .social-proof{
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.95rem;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.retail-landing-hero .stars{
  display: inline-flex;
  gap: 2px;
  transform: translateY(-1px);
}

.retail-landing-hero .landing-form{
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
}

.retail-landing-hero .landing-form .form-control{
  background: #fff;
  border-color: rgba(0,0,0,0.10);
}

.retail-landing-hero .landing-form .form-control:focus{
  border-color: rgba(11, 94, 215, 0.55);
  box-shadow: 0 0 0 4px rgba(11, 94, 215, 0.12);
}

.retail-landing-hero .primary-cta{
  width: 100%;
  border-radius: 12px;
  padding: 12px 14px;
  font-weight: 700;
  font-size: 1.02rem;
  box-shadow: 0 10px 24px rgba(11, 94, 215, 0.22);
}

.retail-landing-hero .what-next{
  margin-top: 10px;
  font-size: 0.95rem;
  color: var(--muted);
}

.retail-landing-hero .what-next strong{ color: var(--text); }

/* micro motion (respect reduced motion) */
@media (prefers-reduced-motion: no-preference){
  .retail-landing-hero .trust-chip:hover{ transform: translateY(-1px); box-shadow: 0 10px 18px rgba(15, 23, 42, 0.08); }
  .retail-landing-hero .primary-cta:hover{ transform: translateY(-1px); }
  .retail-landing-hero .primary-cta:active{ transform: translateY(0px); }
  .retail-landing-hero .reveal{ animation: fadeUp .45s ease both; }
  .retail-landing-hero .reveal.delay-1{ animation-delay: .06s; }
  .retail-landing-hero .reveal.delay-2{ animation-delay: .12s; }
  .retail-landing-hero .reveal.delay-3{ animation-delay: .18s; }
  @keyframes fadeUp{ from{ opacity:0; transform: translateY(8px);} to{opacity:1; transform: translateY(0);} }
}

@media (max-width: 991.98px){
  .retail-landing-hero::before{ background-position: center top; background-size: 760px auto; opacity: .9; }
}


/* Repair modal (Option A) */
.repair-hero-card{
  border:1px solid var(--abe-border);
  border-radius:18px;
  padding:18px;
  background: linear-gradient(180deg, rgba(13,110,253,.10), rgba(13,110,253,.03));
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.repair-hero-illustration{
  border-radius:16px;
  padding:14px;
  background: rgba(255,255,255,.65);
  border:1px solid rgba(13,110,253,.18);
  color: rgba(13,110,253,.75);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:160px;
}
.repair-hero-illustration svg{ width:100%; max-width:240px; height:auto; }
.repair-price{
  font-size:28px;
  font-weight:800;
  letter-spacing:-.02em;
}
.badge-soft{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.45rem .65rem;
  border-radius:999px;
  background: rgba(15,23,42,.04);
  border:1px solid rgba(15,23,42,.08);
  font-size:.86rem;
}
.repair-details{
  border:1px solid var(--abe-border);
  border-radius:16px;
  padding:14px 14px 10px 14px;
  background:#fff;
}
.repair-details[open]{ padding-bottom:14px; }
.repair-details-summary{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  cursor:pointer;
  font-weight:700;
  color: var(--abe-blue);
}
.repair-details-summary::-webkit-details-marker{ display:none; }
.repair-details .chev{
  width:10px;height:10px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .18s ease;
  opacity:.8;
}
.repair-details[open] .chev{ transform: rotate(-135deg); }
.loan-row{
  border:1px solid var(--abe-border);
  border-radius:16px;
  padding:14px;
  background: rgba(15,23,42,.02);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

/* Quote layout safety */
#addons .row, #addons .col-12 { max-width: 100%; }


/* Landing hero enhancements */
.retail-landing-hero{
  position: relative;
  overflow: hidden;
}
.hero-visual{
  position:absolute;
  left:-110px;
  top:-70px;
  width:560px;
  max-width:56vw;
  opacity:.95;
  pointer-events:none;
  transform: translateY(0);
  animation: floaty 7s ease-in-out infinite;
}
.hero-visual img{ width:100%; height:auto; display:block; }

@keyframes floaty{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(10px); }
}

.hero-headline strong{
  background: linear-gradient(180deg, rgba(13,110,253,.18), rgba(13,110,253,0));
  border-radius:10px;
  padding:0 .18em;
}

.form-help{ font-size:.9rem; color: var(--abe-muted); }

/* Micro-animations (premium) */
.card, .btn, .trust-chip{
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background-color .16s ease;
}
.card:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(15,23,42,.08);
}
.btn-primary:hover{
  transform: translateY(-1px);
}
.trust-chip:hover{
  transform: translateY(-1px);
}


/* --- Global performance + layout safety --- */
html, body { overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; }
.container { overflow-x: clip; }
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Skip link for keyboard users */
.skip-link{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus{ left:12px; top:12px; width:auto; height:auto; padding:10px 12px; background:#004488; color:#fff; z-index:2000; border-radius:10px; }

/* Focus styles (ADA) */
:focus-visible{ outline: 3px solid rgba(0,68,136,.45); outline-offset: 2px; border-radius: 10px; }

/* Steps modal visuals */
.step-dot{ width:28px; height:28px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; background:#f3f6f9; border:1px solid rgba(0,0,0,.08); color:#3b4a5a; }
.step-dot.active{ background:rgba(0,68,136,.12); border-color:rgba(0,68,136,.35); color:#004488; }
.step-dot.done{ background:rgba(25,135,84,.12); border-color:rgba(25,135,84,.35); color:#198754; }

/* Help panel stability */
.help-panel{ will-change: transform; transform: translateY(0); }
.help-panel.open{ transform: translateY(0); }

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms!important; animation-iteration-count:1!important; transition-duration:0.001ms!important; scroll-behavior:auto!important; }
}



/* Micro-animations & skeletons (lightweight, CSS-only) */
.btn-abe-primary,
.btn-abe-ghost,
.btn-outline-secondary,
.btn-outline-primary,
.btn-outline-dark {
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.btn-abe-primary:hover,
.btn-abe-ghost:hover,
.btn-outline-secondary:hover,
.btn-outline-primary:hover,
.btn-outline-dark:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.18);
}

.selectable-card,
.pkg,
.offer-card,
.card-hover {
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.selectable-card:hover,
.pkg:hover,
.offer-card:hover,
.card-hover:hover {
  box-shadow: 0 18px 30px rgba(15, 23, 42, 0.12);
  transform: translateY(-2px);
}

/* Progress shimmer for status bars */
.progress-bar--shimmer {
  position: relative;
  overflow: hidden;
}

.progress-bar--shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.7) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: shimmer 1.6s linear infinite;
  opacity: 0.65;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Skeleton loaders */
.skeleton {
  border-radius: 999px;
  background: linear-gradient(90deg, #e5e7eb 0%, #f3f4f6 40%, #e5e7eb 80%);
  background-size: 400% 100%;
  animation: skeleton-loading 1.2s ease-in-out infinite;
}

.skeleton-block {
  border-radius: 12px;
  background: linear-gradient(90deg, #e5e7eb 0%, #f3f4f6 40%, #e5e7eb 80%);
  background-size: 400% 100%;
  animation: skeleton-loading 1.2s ease-in-out infinite;
}

@keyframes skeleton-loading {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* Modal fade refinement */
.modal.fade .modal-dialog {
  transition: transform 0.18s ease-out, opacity 0.18s ease-out;
  transform: translateY(12px);
  opacity: 0;
}

.modal.show .modal-dialog {
  transform: translateY(0);
  opacity: 1;
}


/* Scroll-reveal for timeline sections */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease-out, transform 0.35s ease-out;
}

.reveal-on-scroll.reveal-visible {
  opacity: 1;
  transform: none;
}


/* Tiny confetti burst for scheduled success */
.confetti-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1080;
}

.confetti-piece {
  position: absolute;
  width: 6px;
  height: 12px;
  border-radius: 2px;
  background-color: #2563eb;
  opacity: 0.9;
  animation: confetti-fall 900ms ease-out forwards;
}

.confetti-piece:nth-child(3n) { background-color: #10b981; }
.confetti-piece:nth-child(4n) { background-color: #f97316; }
.confetti-piece:nth-child(5n) { background-color: #eab308; }

@keyframes confetti-fall {
  0% {
    transform: translate3d(0, -40px, 0) rotateZ(0deg);
  }
  100% {
    transform: translate3d(0, 120vh, 0) rotateZ(360deg);
    opacity: 0;
  }
}


/* Swatch picker */
.swatch-preview{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom: 8px;
}
.swatch-preview img{
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid rgba(15,23,42,.18);
  object-fit: cover;
}
.swatch-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.swatch-card{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 14px;
  padding: 10px;
  background: #fff;
  text-align:left;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.swatch-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(15,23,42,.10);
  border-color: rgba(37,99,235,.28);
}
.swatch-card img{
  width: 100%;
  height: 84px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid rgba(15,23,42,.08);
  margin-bottom: 8px;
}
.swatch-card .name{
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.2;
}
.swatch-card .meta{
  font-size: .78rem;
  color: rgba(15,23,42,.68);
}

/* Inspection list */
.inspect-list{
  display:grid;
  gap: 10px;
}
.inspect-item{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 14px;
  padding: 10px 12px;
  background: #fff;
}
.inspect-item summary{
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  list-style:none;
}
.inspect-item summary::-webkit-details-marker{ display:none; }
.inspect-num{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight: 800;
  background: rgba(37,99,235,.10);
  color: #0b3ea8;
  flex: 0 0 auto;
}
.inspect-text{
  flex: 1 1 auto;
  font-weight: 800;
  line-height: 1.15;
}
.inspect-badge{
  flex: 0 0 auto;
}
.inspect-body{
  border-top: 1px solid rgba(15,23,42,.08);
  padding-top: 10px;
}

/* Quote tables */
.quote-table .qty{
  min-width: 90px;
}

.pkg.selectable.active{ box-shadow: 0 18px 30px rgba(15,23,42,.14); border-color: rgba(37,99,235,.35); }