/* ===========================================================================
   Speedy — site + quote wizard styles.
   Rebuilt from design_handoff_speedy_movers_site/README.md (§1e).
   Depends on organic.css for tokens and component classes.
   ======================================================================== */

.sp-section       { max-width:1200px; margin:0 auto; padding:var(--space-8) var(--space-6); }
.sp-section-tight { max-width:1200px; margin:0 auto; padding:var(--space-4) var(--space-6) var(--space-8); }

.speedy-imgslot {
  display:flex; align-items:center; justify-content:center;
  font-size:14px; color:var(--color-text); opacity:.55;
}

/* ---------- animations ---------- */
@keyframes om-fadein { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@keyframes om-lift   { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-3px); } }
@keyframes om-box    { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-2px); } }
@keyframes om-drive  { 0%,100% { transform:translateX(0); } 50% { transform:translateX(3px); } }
@keyframes om-wheel  { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-1px); } }
@keyframes om-road   { from { background-position:0 0; } to { background-position:-18px 0; } }

/* ===========================================================================
   Quote wizard
   ======================================================================== */

.sp-quote {
  background:var(--color-neutral-900);
  color:var(--color-neutral-100);
  border-radius:var(--radius-lg);
  padding:var(--space-8) var(--space-6);
}
.sp-quote-inner { max-width:1100px; margin:0 auto; }

.sp-quote h6 { color:var(--color-accent-400); margin-bottom:var(--space-2); }
.sp-quote h2 { color:var(--color-neutral-100); margin-bottom:var(--space-2); }
.sp-quote .sp-sub { color:var(--color-neutral-100); opacity:.7; font-size:15px; margin-bottom:var(--space-6); }

/* ---------- progress pills ---------- */
.sp-steps { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-2); margin-bottom:var(--space-6); }
.sp-step {
  font-size:12px; font-weight:700; padding:6px 14px; border-radius:var(--radius-full);
  background:rgba(245,234,216,.08); color:var(--color-neutral-100); opacity:.55; white-space:nowrap;
}
.sp-step.is-current { background:var(--color-accent); color:var(--color-neutral-900); opacity:1; }
.sp-step.is-done    { opacity:.85; }

/* ---------- two-column body ---------- */
.sp-quote-body { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:var(--space-6); align-items:start; }
.sp-quote-main { animation:om-fadein .3s ease; min-width:0; }

/* ---------- service cards (step 0) ---------- */
.sp-jobs { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--space-3); }
.sp-job {
  text-align:left; cursor:pointer; border-radius:var(--radius-lg); padding:var(--space-4);
  background:var(--color-surface); border:2px solid var(--color-divider); color:var(--color-text);
  display:flex; flex-direction:column; gap:8px; position:relative;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.sp-job:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.sp-job-icon { width:40px; height:40px; border-radius:12px; background:var(--color-neutral-200);
  display:flex; align-items:center; justify-content:center; font-size:20px; }
.sp-job-dot { position:absolute; top:var(--space-4); right:var(--space-4); width:20px; height:20px;
  border-radius:50%; border:2px solid var(--color-neutral-300); background:transparent; }
.sp-job-label { font-family:var(--font-heading); font-size:19px; line-height:1.2; }
.sp-job-desc  { font-size:13px; opacity:.75; }
.sp-job.is-on { background:var(--color-accent-100); border-color:var(--color-accent); }
.sp-job.is-on .sp-job-icon { background:var(--color-accent); }
.sp-job.is-on .sp-job-dot  { border-color:var(--color-accent); background:var(--color-accent); }

/* ---------- size tiers (step 1) ---------- */
.sp-sizes { display:flex; flex-direction:column; gap:var(--space-2); }
.sp-size {
  text-align:left; cursor:pointer; border-radius:var(--radius-md); padding:var(--space-3) var(--space-4);
  background:var(--color-surface); border:2px solid var(--color-divider); color:var(--color-text);
  display:flex; align-items:center; gap:var(--space-3); transition:background .18s ease, border-color .18s ease;
}
.sp-size:hover  { border-color:var(--color-accent-300); }
.sp-size.is-on  { background:var(--color-accent-100); border-color:var(--color-accent); }
.sp-size-title  { font-weight:700; font-size:16px; }
.sp-size-desc   { font-size:13px; opacity:.75; }

/* ---------- form fields ---------- */
.sp-quote .field label { color:var(--color-neutral-100); opacity:.75; }
.sp-quote .input {
  background:rgba(245,234,216,.1); border-color:rgba(245,234,216,.3); color:var(--color-neutral-100);
}
.sp-quote .input::placeholder { color:var(--color-neutral-100); opacity:.45; }
.sp-grid2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--space-3); }
.sp-note  { font-size:12px; opacity:.65; margin-top:4px; }
.sp-err   { color:var(--color-accent-400); font-size:13px; margin-top:var(--space-3); }

/* ---------- access pills (step 3) ---------- */
.sp-access { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:8px; }
.sp-acc {
  cursor:pointer; display:flex; align-items:center; gap:8px; font-size:14px;
  padding:10px var(--space-3); border-radius:var(--radius-full);
  background:var(--color-surface); border:2px solid var(--color-divider); color:var(--color-text);
}
.sp-acc-box { width:16px; height:16px; border-radius:5px; border:2px solid var(--color-neutral-300);
  flex:none; display:flex; align-items:center; justify-content:center; font-size:11px; color:transparent; }
.sp-acc.is-on { background:var(--color-accent-100); border-color:var(--color-accent); font-weight:700; }
.sp-acc.is-on .sp-acc-box { background:var(--color-accent); border-color:var(--color-accent); color:#fff; }

.sp-check { display:flex; align-items:flex-start; gap:8px; font-size:14px; margin-top:var(--space-3); cursor:pointer; }
.sp-check input { margin-top:3px; accent-color:var(--color-accent); }

/* ===========================================================================
   Summary side card
   ======================================================================== */
.sp-summary {
  background:var(--color-neutral-900); color:var(--color-neutral-100);
  border:1px solid rgba(245,234,216,.2); border-radius:var(--radius-lg);
  padding:var(--space-6); align-self:start; display:flex; flex-direction:column; gap:var(--space-4);
}
.sp-summary h6 { color:var(--color-accent-400); margin:0; }

/* crew */
.sp-crew-row { display:flex; align-items:flex-end; gap:var(--space-3); }
.sp-crew { display:flex; align-items:flex-end; gap:5px; }
.sp-person { display:flex; flex-direction:column; align-items:center; gap:1px; animation:om-lift 1.6s ease-in-out infinite; }
.sp-person i { display:block; background:var(--color-accent-300); width:7px; height:4px; border-radius:1px;
  animation:om-box 1.6s ease-in-out infinite; }
.sp-person u { display:block; width:9px; height:9px; border-radius:50%; background:var(--color-neutral-100); }
.sp-person s { display:block; width:16px; height:18px; border-radius:8px 8px 4px 4px; background:var(--color-neutral-100); }
.sp-person.is-extra u, .sp-person.is-extra s { background:var(--color-accent); }
.sp-meta-strong { font-weight:700; font-size:15px; }
.sp-meta-sub { opacity:.7; font-size:12px; }

/* vehicle */
.sp-veh-row { display:flex; align-items:center; gap:var(--space-3); }
.sp-veh { position:relative; height:30px; }
.sp-veh-road { position:absolute; left:0; right:0; bottom:0; height:2px;
  background:repeating-linear-gradient(90deg, rgba(245,234,216,.45) 0 8px, transparent 8px 18px);
  animation:om-road .6s linear infinite; }
.sp-veh-body { position:absolute; inset:0; animation:om-drive 1.6s ease-in-out infinite; }
.sp-veh-cargo { position:absolute; left:0; top:2px; height:16px; border-radius:3px; background:var(--color-neutral-100); }
.sp-veh-cab { position:absolute; top:7px; width:11px; height:11px; border-radius:3px 4px 2px 2px; background:var(--color-neutral-100); }
.sp-veh-wheel { position:absolute; bottom:2px; width:7px; height:7px; border-radius:50%; background:var(--color-accent);
  animation:om-wheel .35s ease-in-out infinite; }
.sp-veh-wheel:nth-of-type(2) { animation-delay:.12s; }

/* slider */
.sp-slider { width:100%; accent-color:var(--color-accent); }
.sp-ticks { display:flex; justify-content:space-between; font-size:10px; opacity:.6; }
.sp-hint { font-size:11px; opacity:.65; }

/* extra movers */
.sp-stepper { background:rgba(245,234,216,.08); border-radius:var(--radius-md); padding:var(--space-3);
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); }
.sp-stepper-btns { display:flex; align-items:center; gap:8px; }
.sp-round { width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:16px; line-height:1;
  background:transparent; border:1px solid rgba(245,234,216,.35); color:var(--color-neutral-100); }
.sp-round:hover { background:rgba(245,234,216,.15); }
.sp-round.is-add { background:var(--color-accent); border-color:var(--color-accent); color:var(--color-neutral-900); }
.sp-round.is-add:hover { background:var(--color-accent-400); }
.sp-round[disabled] { opacity:.35; cursor:not-allowed; }

/* included + services */
.sp-included { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:6px; font-size:13px; }
.sp-divider { height:1px; background:rgba(245,234,216,.2); }
.sp-svc-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.sp-badge { font-size:10px; text-transform:uppercase; font-weight:700; padding:3px 9px; border-radius:var(--radius-full);
  background:var(--color-accent); color:var(--color-neutral-900); }
.sp-pills { display:flex; flex-wrap:wrap; gap:6px; }
.sp-pill { font-size:13px; padding:7px 14px; border-radius:var(--radius-full); cursor:pointer;
  background:transparent; border:1px solid rgba(245,234,216,.35); color:var(--color-neutral-100); }
.sp-pill.is-on { background:var(--color-accent); border-color:var(--color-accent); color:var(--color-neutral-900); font-weight:700; }
.sp-pill.sm { padding:6px 13px; }

.sp-supplies { background:rgba(245,234,216,.08); border-radius:var(--radius-md); padding:var(--space-3);
  animation:om-fadein .25s ease; display:flex; flex-direction:column; gap:8px; }
.sp-footnote { font-size:12px; opacity:.7; }

/* ---------- bulk branch ---------- */
.sp-bulk { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--space-6); }
.sp-why { background:var(--color-neutral-900); color:var(--color-neutral-100); border:1px solid rgba(245,234,216,.2);
  border-radius:var(--radius-lg); padding:var(--space-6); align-self:start; }
.sp-why h6 { font-size:11px; color:var(--color-accent-400); }
.sp-why-row { display:flex; gap:10px; align-items:flex-start; margin-top:var(--space-3); }
.sp-why-tick { width:18px; height:18px; border-radius:6px; background:var(--color-accent); color:var(--color-neutral-900);
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex:none; }

/* ---------- nav ---------- */
.sp-nav { display:flex; justify-content:space-between; gap:var(--space-3); margin-top:var(--space-6); }
.sp-quote .btn-secondary { color:var(--color-neutral-100); border-color:rgba(245,234,216,.35); }
.sp-quote .btn-secondary:hover { background:rgba(245,234,216,.15); }

/* ---------- success ---------- */
.sp-done { text-align:center; padding:var(--space-8) 0; animation:om-fadein .3s ease; }
.sp-done-tick { width:56px; height:56px; border-radius:50%; background:var(--color-accent);
  color:var(--color-neutral-900); display:flex; align-items:center; justify-content:center;
  font-size:28px; margin:0 auto var(--space-4); }
.sp-done p { max-width:48ch; margin:0 auto; opacity:.85; }

/* ===========================================================================
   Contact form
   ======================================================================== */
.sp-contact { display:flex; flex-direction:column; gap:var(--space-3); }
.sp-contact h4 { margin-bottom:var(--space-2); }

@media (max-width:600px) {
  .sp-quote { padding:var(--space-6) var(--space-4); }
  .sp-nav .btn { padding:12px 18px; }
}

/* ===========================================================================
   Mobile fixes
   ======================================================================== */

/* 1. The shortcode wrapper and the JS-rendered root both carry .sp-quote,
      which doubled the padding, background and radius. Neutralise the inner. */
.sp-quote .sp-quote {
  padding:0;
  background:transparent;
  border-radius:0;
}

/* 2. Fixed-minimum grid tracks overflowed their container below ~380px.
      min() lets every track shrink to the available width instead. */
.sp-quote-body { grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); }
.sp-jobs       { grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); }
.sp-grid2      { grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr)); }
.sp-access     { grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr)); }
.sp-included   { grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr)); }
.sp-bulk       { grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); }

/* 3. Long words in the wizard must not force a horizontal scroll. */
.sp-quote, .sp-summary, .sp-job, .sp-size, .sp-acc { overflow-wrap:anywhere; }
.sp-badge { white-space:nowrap; }

/* 4. Photo frames: crop to a consistent height rather than letting a portrait
      shot stretch its card to twice the height of its neighbours. */
.elementor-element-f0401b7 img,
.elementor-element-162fcd4 img { width:100% !important; height:300px !important; object-fit:cover; }
.elementor-element-3f91a49 img,
.elementor-element-deef391 img,
.elementor-element-f9292eb img { width:100% !important; height:180px !important; object-fit:cover; }
.elementor-element-926b7fd img { width:100% !important; height:220px !important; object-fit:cover; }

/* Hero slide overlay: white type sat over a white truck cab at 0.45–0.55. */
.elementor-slides .elementor-background-overlay { background-color:rgba(32,30,29,0.62) !important; }
.elementor-slides .elementor-slide-heading,
.elementor-slides .elementor-slide-description { text-shadow:0 2px 12px rgba(32,30,29,0.75); }

/* Header logo sizing (the brand is an image widget, not a heading). */
[data-elementor-type="header"] .elementor-widget-image { flex:0 0 auto; }
[data-elementor-type="header"] .elementor-widget-image img {
  display:block;
  width:200px;
  height:auto;
  max-width:100%;
}

@media (max-width:767px) {
  .elementor-element-f0401b7 img,
  .elementor-element-162fcd4 img { height:220px !important; }
  .elementor-element-3f91a49 img,
  .elementor-element-deef391 img,
  .elementor-element-f9292eb img { height:190px !important; }

  /* Those photo frames carry a desktop min-height (160–340px), which left a
     grey band above and below the cropped image on a phone. */
  .elementor-element-30adc99,
  .elementor-element-fa8c070,
  .elementor-element-38c538d,
  .elementor-element-6df40c1,
  .elementor-element-eb04c94,
  .elementor-element-b3addd7 { min-height:0 !important; }

  /* 5. Header: brand, menu toggle and the call button wrapped onto three
        separate rows (221px tall). Keep them on one row. */
  [data-elementor-type="header"] .e-con-inner {
    flex-wrap:nowrap !important;
    align-items:center !important;
    gap:10px !important;
  }
  [data-elementor-type="header"] .elementor-widget-image { flex:0 1 auto; min-width:0; }
  [data-elementor-type="header"] .elementor-widget-image img { width:150px; }
  [data-elementor-type="header"] .elementor-widget-nav-menu,
  [data-elementor-type="header"] .elementor-widget-button {
    flex:0 0 auto !important;
    width:auto !important;
  }
  /* The collapsed dropdown panel is a static sibling of the toggle, so it kept
     reserving ~144px of inline width and squeezed the brand to three lines.
     Take it out of flow and anchor it under the toggle instead. */
  [data-elementor-type="header"] > .e-con { position:relative !important; }
  [data-elementor-type="header"] .elementor-widget-nav-menu { position:static !important; }
  [data-elementor-type="header"] .elementor-nav-menu--dropdown.elementor-nav-menu__container {
    position:absolute !important;
    top:100% !important;
    left:0 !important;
    right:auto !important;
    width:100% !important;
    max-width:none !important;
    z-index:99;
    box-shadow:var(--shadow-lg);
  }
  [data-elementor-type="header"] .elementor-widget-button .elementor-button {
    padding:8px 12px !important;
    font-size:12px !important;
    white-space:nowrap;
  }
  [data-elementor-type="header"] .elementor-menu-toggle {
    padding:6px !important;
    font-size:18px !important;
  }
  [data-elementor-type="header"] > .e-con {
    padding-left:16px !important;
    padding-right:16px !important;
  }

  /* 6. Footer columns were locked to 29% and sat as three thin strips. */
  [data-elementor-type="footer"] .e-con-inner > .e-con { width:100% !important; }

  /* 7. Display type was set for desktop (42–56px) and ate a whole phone
        screen per heading. Scale it down for narrow viewports. */
  .elementor-widget-heading h1.elementor-heading-title { font-size:32px !important; line-height:1.14 !important; }
  .elementor-widget-heading h2.elementor-heading-title { font-size:26px !important; line-height:1.18 !important; }
  .elementor-widget-heading h3.elementor-heading-title { font-size:22px !important; line-height:1.2 !important; }
  .elementor-slides .elementor-slide-heading { font-size:30px !important; line-height:1.15 !important; }
  .elementor-slides .elementor-slide-description { font-size:14px !important; }

  /* 8. iOS Safari zooms the whole page when a focused field is under 16px.
        Bump the wizard and contact-form inputs to 16px on phones. */
  .input,
  input.input,
  textarea.input,
  select.input { font-size:16px !important; }

  /* 9. The kicker pills are inline spans with white-space:nowrap, so the
        longest one ("Auckland-Wide · Furniture & Item Movers") pushed the
        page 33px wide on a 320px screen. Let them wrap when they must. */
  .elementor-widget-html span { white-space:normal !important; }
}