/* ============================================================
   Alabama Moving Bins — Bin Estimator (WordPress shortcode build)
   CSS copied 1:1 from the approved site mockup so the shortcode
   output matches the HTML file exactly: same colours, same type,
   same radii, same shadows, same icons.
   ============================================================ */

.amb-estimator-scope {
  /* Brand — navy (ink + dark surfaces) */
  --ink:        #002349;
  --navy:       #002349;
  --navy-800:   #001731;
  --navy-700:   #063562;
  --navy-600:   #0D4C86;
  --navy-500:   #1A66A8;

  /* Brand — bright green (RATIONED: CTAs + "included/eco" only) */
  --green:      #66FF00;
  --green-600:  #57DC00;
  --green-700:  #45AF00;
  --green-50:   #F2FFE3;

  /* Brand — light blue (accent + washes) */
  --blue:       #2496E3;
  --blue-600:   #1478C2;
  --blue-100:   #D2E9FA;
  --blue-50:    #EAF4FD;
  --wash:       #ECF4FC;

  /* Neutrals */
  --white:      #FFFFFF;
  --paper:      #F5F9FD;
  --line:       #DFE8F3;
  --line-strong:#C6D5E7;
  --muted:      #55677E;
  --muted-soft: #8494A6;

  /* Typography */
  --font-display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* Radii */
  --r-pill: 999px;
  --r-xl:   28px;
  --r-lg:   20px;
  --r-md:   14px;
  --r-sm:   10px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,35,73,.06), 0 1px 1px rgba(0,35,73,.04);
  --shadow-md: 0 14px 34px -14px rgba(0,35,73,.20);
  --shadow-lg: 0 34px 64px -22px rgba(0,35,73,.30);
  --shadow-green: 0 12px 26px -10px rgba(102,255,0,.42);

  --ease: cubic-bezier(.22,.61,.36,1);

  font-family: var(--font-body);
  color: var(--ink);
}

.amb-estimator-scope *, .amb-estimator-scope *::before, .amb-estimator-scope *::after { box-sizing: border-box; }
.amb-estimator-scope img, .amb-estimator-scope svg { display: block; max-width: 100%; }
.amb-estimator-scope a { color: inherit; text-decoration: none; }
.amb-estimator-scope button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
.amb-estimator-scope ul, .amb-estimator-scope ol { list-style: none; padding: 0; margin: 0; }
.amb-estimator-scope :focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 4px; }

.amb-estimator-scope h1, .amb-estimator-scope h2, .amb-estimator-scope h3, .amb-estimator-scope h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}

.amb-estimator-scope .eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue-600);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.amb-estimator-scope .eyebrow::before {
  content: "";
  width: 22px; height: 2px; border-radius: 2px;
  background: var(--green);
}
.amb-estimator-scope .eyebrow.no-rule::before { display: none; }

/* ---------- Buttons ---------- */
.amb-estimator-scope .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--font-body); font-weight: 600; font-size: 1rem;
  line-height: 1; padding: 1rem 1.6rem; border-radius: var(--r-pill);
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
  white-space: nowrap;
}
.amb-estimator-scope .btn svg { width: 1.1em; height: 1.1em; }
.amb-estimator-scope .btn--primary { background: var(--green); color: var(--navy); box-shadow: var(--shadow-green); }
.amb-estimator-scope .btn--primary:hover { background: var(--green-600); transform: translateY(-2px); }
.amb-estimator-scope .btn--primary:active { transform: translateY(0); }
.amb-estimator-scope .btn--secondary { background: var(--white); color: var(--navy); border-color: var(--line-strong); }
.amb-estimator-scope .btn--secondary:hover { border-color: var(--navy); transform: translateY(-2px); }
.amb-estimator-scope .btn--ghost { background: transparent; color: var(--navy); border-color: transparent; padding-inline: .5rem; }
.amb-estimator-scope .btn--ghost:hover { color: var(--green-700); }
.amb-estimator-scope .btn--lg { padding: 1.15rem 2rem; font-size: 1.06rem; }
.amb-estimator-scope .btn--sm { padding: .7rem 1.1rem; font-size: .9rem; }
.amb-estimator-scope .btn--block { width: 100%; }
.amb-estimator-scope .btn[disabled] { opacity: .45; cursor: not-allowed; transform: none !important; }

.amb-estimator-scope .hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.amb-estimator-scope .muted { color: var(--muted); }
.amb-estimator-scope .lead { font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.55; color: var(--muted); }

/* ---------- Estimator ---------- */
.amb-estimator-scope .est-wrap { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-md); overflow: hidden; }
.amb-estimator-scope .est-head { padding: 1.5rem clamp(1.4rem,3vw,2.2rem); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 1rem; justify-content: space-between; flex-wrap: wrap; }
.amb-estimator-scope .est-progress { display: flex; gap: .4rem; align-items: center; }
.amb-estimator-scope .est-dot { width: 34px; height: 5px; border-radius: 3px; background: var(--line-strong); transition: background .3s; }
.amb-estimator-scope .est-dot.active { background: var(--green); }
.amb-estimator-scope .est-body { padding: clamp(1.6rem, 3vw, 2.6rem); }
.amb-estimator-scope .est-step { display: none; }
.amb-estimator-scope .est-step.active { display: block; animation: amb-fadeUp .35s var(--ease); }
.amb-estimator-scope .est-step h3 { font-size: clamp(1.4rem,2.4vw,1.9rem); margin-bottom: .4rem; }
.amb-estimator-scope .est-step .est-sub { color: var(--muted); margin-bottom: 1.6rem; }
.amb-estimator-scope .opt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: .8rem; }
.amb-estimator-scope .opt {
  border: 1.5px solid var(--line-strong); border-radius: var(--r-lg); padding: 1.3rem 1rem; text-align: center;
  cursor: pointer; transition: .18s; background: #fff; display: flex; flex-direction: column; align-items: center; gap: .5rem;
}
.amb-estimator-scope .opt:hover { border-color: var(--blue); }
.amb-estimator-scope .opt.selected { border-color: var(--green); background: var(--green-50); box-shadow: 0 0 0 3px rgba(22,193,114,.15); }
.amb-estimator-scope .opt .opt-ico { width: 40px; height: 40px; color: var(--navy-700); }
.amb-estimator-scope .opt.selected .opt-ico { color: var(--green-700); }
.amb-estimator-scope .opt b { font-family: var(--font-display); font-size: 1.05rem; }
.amb-estimator-scope .opt span { font-size: .8rem; color: var(--muted); }
.amb-estimator-scope .est-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.3rem clamp(1.4rem,3vw,2.2rem); border-top: 1px solid var(--line); background: var(--paper); }
.amb-estimator-scope .est-result { text-align: center; padding: clamp(1.5rem,3vw,2.5rem); }
.amb-estimator-scope .est-result .est-big { font-family: var(--font-display); font-weight: 800; font-size: clamp(3.4rem,9vw,5.5rem); line-height: 1; color: var(--navy); letter-spacing: -.03em; }
.amb-estimator-scope .est-result .est-big .accent { color: var(--green-600); }
.amb-estimator-scope .est-rec-card { max-width: 440px; margin: 1.6rem auto 0; background: var(--wash); border-radius: var(--r-lg); padding: 1.4rem; }
.amb-estimator-scope .est-rec-card .erc-row { display: flex; justify-content: space-between; padding: .5rem 0; font-size: .95rem; }
.amb-estimator-scope .est-rec-card .erc-row + .erc-row { border-top: 1px solid var(--line); }

/* ---------- Modal (popup) ---------- */
.amb-est-modal-backdrop { position: fixed; inset: 0; background: rgba(12,35,64,.55); backdrop-filter: blur(3px); z-index: 99999; display: grid; place-items: center; padding: 1rem; opacity: 0; visibility: hidden; transition: .25s; }
.amb-est-modal-backdrop.open { opacity: 1; visibility: visible; }
.amb-est-modal { width: min(680px, 100%); max-height: 92dvh; overflow-y: auto; transform: translateY(14px) scale(.99); transition: transform .28s var(--ease); background: transparent; }
.amb-est-modal-backdrop.open .amb-est-modal { transform: none; }
.amb-est-modal-close {
  position: sticky; top: 0; margin-left: auto; display: flex; justify-content: flex-end;
}
.amb-est-modal-close button {
  width: 40px; height: 40px; border-radius: 999px; background: #fff; box-shadow: var(--shadow-md);
  display: grid; place-items: center; color: var(--navy);
}

@keyframes amb-fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (max-width: 640px) {
  .amb-estimator-scope .est-foot { flex-wrap: wrap; }
}