/* ============================================================
   shanet-checkout.css  —  Self-serve checkout flow.
   Visual system mirrors shanet-package.css (Poppins, green primary,
   light grey page, BEM-style .shanet-co-* prefix).
   !important on layout properties to override Elementor reset.

   NOTE: every clickable element in this flow is a <div role="button"
   tabindex="0"> (card headers, CTA, calendar day cells, back arrows,
   "remove this service"). That is intentional — Hello Elementor's
   reset.css paints every <button> with a #c36 (magenta) border + color
   and cramped padding (.5rem 1rem) + white-space: nowrap that we cannot
   beat without specificity wars, because the reset loads AFTER our
   stylesheet. Avoiding <button> elements sidesteps the whole conflict.
   Keyboard a11y is provided by a delegated keydown handler in
   shanet-checkout.js that converts Enter/Space → click for role="button".
   "Disabled" state is expressed as the .is-disabled class (not the
   :disabled pseudo-class, which only matches real form controls).
   ============================================================ */

/* ----------  Page wrapper  ---------- */
.shanet-co-page {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  width: 100vw !important;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background: #f3f4f3;
  padding-bottom: 80px;
  box-sizing: border-box;
  color: #111827;
}
.shanet-co-page *,
.shanet-co-page *::before,
.shanet-co-page *::after { box-sizing: border-box; }

/* ----------  Hero  ---------- */
.shanet-co-hero { text-align: center; padding: 56px 24px 32px; }
.shanet-co-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px;
  background: rgba(241,85,18,0.10);
  color: #9c3e1a;
  border-radius: 40px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 16px;
}
.shanet-co-badge svg { width: 14px; height: 14px; color: #f15512; }
.shanet-co-hero h1 {
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 800;
  color: #111;
  margin: 0 0 12px;
  line-height: 1.1;
}
.shanet-co-hero-sub {
  font-size: clamp(15px, 2vw, 17px);
  color: #4b5563;
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.5;
}

/* ----------  Layout: services + summary  ---------- */
.shanet-co-services {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}
.shanet-co-services-grid {
  display: grid !important;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 14px;
}
@media (min-width: 720px) {
  .shanet-co-services-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Each column is an independent vertical stack so expansion in one cannot
   bleed into the other via shared row heights. */
.shanet-co-services-col {
  display: flex !important;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.shanet-co-loading,
.shanet-co-error {
  text-align: center;
  padding: 48px 24px;
  color: #6b7280;
  font-size: 15px;
  grid-column: 1 / -1;
}
.shanet-co-error { color: #b91c1c; }

/* ----------  Service card  ---------- */
/* Match the OLD package builder's card visual pattern exactly. The OLD uses
   a slightly thicker border, a faint gray hover, and a 5% orange-tinted
   background on the selected card so the orange border reads against an
   orange-tinted surface (not pure white) — which is what made the OLD read
   as "orange" instead of "magenta." We're swapping our pattern to match. */
.shanet-co-card {
  background: #fff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 14px;
  overflow: hidden;
  transition: all 0.15s;
  box-shadow: none !important;
}
.shanet-co-card:hover {
  border-color: #94a3b8 !important;
  background: #f8fafc !important;
}
.shanet-co-card.is-selected {
  border-color: #f15512 !important;
  background: rgba(241, 85, 18, 0.05) !important;
  box-shadow: none !important;
}

.shanet-co-card-header {
  display: flex !important;
  align-items: center;
  width: 100%;
  padding: 18px 20px;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  gap: 12px;
}
.shanet-co-card-header:focus-visible {
  outline: 2px solid #f15512;
  outline-offset: -2px;
}
.shanet-co-card-header-text { flex: 1 1 0; min-width: 0; }
.shanet-co-card { min-width: 0; }
.shanet-co-card-name {
  font-size: 17px;
  font-weight: 700;
  color: #111;
  line-height: 1.25;
}
.shanet-co-card-tagline {
  font-size: 13px;
  color: #6b7280;
  margin-top: 2px;
  line-height: 1.4;
}
.shanet-co-card-header-right {
  display: flex !important;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.shanet-co-card-price { text-align: right; }
.shanet-co-card-from {
  font-size: 12px;
  color: #6b7280;
  font-weight: 500;
}
.shanet-co-card-from::before {
  content: '';
  display: block;
  font-size: 10px;
  color: #9ca3af;
}
.shanet-co-card-selected-price {
  font-size: 18px;
  font-weight: 700;
  color: #f15512;
}
.shanet-co-card-chevron {
  width: 18px;
  height: 18px;
  color: #9ca3af;
  transition: transform 0.2s;
  flex-shrink: 0;
}
.shanet-co-card-header[aria-expanded="true"] .shanet-co-card-chevron { transform: rotate(180deg); }

/* ----------  Card body (tiers)  ---------- */
.shanet-co-card-body {
  display: none !important;
  border-top: 1px solid #f3f4f6;
  padding: 14px 14px 16px;
  background: #fafafa;
}
.shanet-co-card-body.is-open { display: block !important; }

.shanet-co-tier-list {
  display: flex !important;
  flex-direction: column;
  gap: 8px;
}
.shanet-co-tier {
  display: flex !important;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 0.12s, background-color 0.12s;
}
.shanet-co-tier:hover { border-color: #f15512; background: rgba(241,85,18,0.03); }
.shanet-co-tier.is-selected {
  border-color: #f15512;
  background: rgba(241,85,18,0.06);
}
.shanet-co-tier input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #d1d5db;
  border-radius: 50%;
  margin: 0;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
  background: #fff;
}
.shanet-co-tier input[type="radio"]:checked { border-color: #f15512; }
.shanet-co-tier input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: #f15512;
  border-radius: 50%;
}
.shanet-co-tier-inner {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 12px;
}
.shanet-co-tier-left { flex: 1 1 0; min-width: 0; }
.shanet-co-tier-label {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  line-height: 1.25;
}
.shanet-co-tier-range {
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px;
  line-height: 1.3;
}
.shanet-co-tier-right { text-align: right; flex-shrink: 0; }
.shanet-co-tier-price {
  font-size: 16px;
  font-weight: 700;
  color: #111;
}
.shanet-co-tier-verify {
  font-size: 12px;
  font-weight: 600;
  color: #b45309;
  background: #fef3c7;
  padding: 3px 8px;
  border-radius: 6px;
}
.shanet-co-tier.is-verify .shanet-co-tier-price { display: none; }

.shanet-co-card-disclaimer {
  margin-top: 12px;
  font-size: 12px;
  color: #6b7280;
  line-height: 1.5;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}
.shanet-co-card-disclaimer strong { color: #374151; }

.shanet-co-card-clear-wrap { margin-top: 12px; text-align: center; }
.shanet-co-card-clear {
  background: none;
  border: 0;
  color: #6b7280;
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  padding: 4px 8px;
}
.shanet-co-card-clear:hover { color: #b91c1c; }

/* ----------  Summary (sticky on desktop, stacked on mobile)  ---------- */
.shanet-co-summary {
  position: sticky;
  bottom: 0;
  margin: 24px auto 0;
  max-width: 1180px;
  padding: 0 24px;
  z-index: 10;
}
@media (min-width: 1080px) {
  .shanet-co-page {
    display: grid !important;
    grid-template-columns: minmax(0, 720px) 360px;
    grid-template-areas: 'hero hero' 'services summary';
    column-gap: 24px;
    justify-content: center;
    max-width: none;
    padding-left: 24px;
    padding-right: 24px;
  }
  .shanet-co-hero { grid-area: hero; }
  .shanet-co-services { grid-area: services; padding: 0; max-width: none; }
  .shanet-co-summary {
    grid-area: summary;
    position: sticky;
    top: 24px;
    align-self: start;
    margin: 0;
    padding: 0;
  }
  /* #64 (2026-07-20): cap the sticky sidebar so long quotes (verified
     failure mode: 6+ services at ~$2,650+ subtotal) can't extend past
     the viewport bottom or, when the user scrolls up to see the H1,
     overlap the "Book Your Pressure Wash..." title. 48px = 24px sticky
     top + 24px bottom breathing room. Inner scroll keeps totals + CTA
     reachable regardless of quote length. */
  .shanet-co-summary-inner {
    max-height: calc(100vh - 48px);
    overflow-y: auto;
  }
  /* Follow-up 2026-07-31 (E2E test with 8 services): the max-height cap
     alone didn't stop visual overlap between the sticky summary panel
     and the H1 "Book Your Pressure Wash". Root cause: the summary's
     mobile-first z-index: 10 (line 302) carries over into desktop, and
     when the panel sticks at top: 24px it paints ABOVE the H1 that's
     still in the .shanet-co-hero flow above. Fix: give the hero its
     own stacking context above the summary. Layout is unchanged (grid
     areas already keep them separated horizontally); this just wins
     the paint-order fight for the few pixels where the hero H1's
     hanging descenders overlap the summary panel's top edge. */
  .shanet-co-hero {
    position: relative;
    z-index: 20;
  }
  .shanet-co-summary {
    z-index: 1;
  }
}

.shanet-co-summary-inner {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}

/* ---------- Compact summary — collapse when not in 2-column layout ----------
   The desktop 2-column sidebar layout kicks in at 1080px+; below that,
   the summary would otherwise stack below the services grid and eat
   60%+ of the viewport. Compact-bar collapse handles anything below
   the 2-column threshold — mobile AND narrow desktop windows. Tap the
   bar to expand to full details in place. */
@media (max-width: 1079px) {
  .shanet-co-summary {
    position: fixed !important;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: none;
    padding: 0;
    z-index: 100;
    /* Undo the "extend to viewport edges" desktop treatment. */
    margin: 0;
  }
  .shanet-co-summary-inner {
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.12);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    /* Cap height so an accidentally-huge quote can still scroll internally. */
    max-height: 70vh;
    overflow-y: auto;
  }

  /* When collapsed: hide details, keep only the compact bar. When
     expanded (default state on desktop, tap-to-toggle on mobile): show
     everything. */
  .shanet-co-summary.is-collapsed .shanet-co-summary-header,
  .shanet-co-summary.is-collapsed .shanet-co-summary-items,
  .shanet-co-summary.is-collapsed .shanet-co-summary-totals,
  .shanet-co-summary.is-collapsed .shanet-co-summary-minimum,
  .shanet-co-summary.is-collapsed .shanet-co-summary-verify,
  .shanet-co-summary.is-collapsed .shanet-co-disclaimer {
    display: none !important;
  }

  /* Compact bar — only visible on mobile. Shows total + count + a small
     up-chevron indicating tap-to-expand. */
  .shanet-co-summary-compact { display: flex !important; }
  .shanet-co-summary.is-collapsed .shanet-co-summary-compact-chevron {
    transform: rotate(0deg);
  }
  .shanet-co-summary:not(.is-collapsed) .shanet-co-summary-compact-chevron {
    transform: rotate(180deg);
  }
}

/* True desktop (2-column layout): hide the compact bar — desktop uses
   the always-expanded sidebar summary. */
@media (min-width: 1080px) {
  .shanet-co-summary-compact { display: none !important; }
}

/* Enough bottom padding so the last service card / form field isn't
   hidden behind the fixed summary bar. Applies to anything not in the
   2-column layout. */
@media (max-width: 1079px) {
  .shanet-co-page { padding-bottom: 160px !important; }
}

.shanet-co-summary-compact {
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0 10px;
  cursor: pointer;
  user-select: none;
}
.shanet-co-summary-compact-text {
  display: flex !important;
  align-items: baseline;
  gap: 8px;
  font-size: 15px;
  color: #111827;
}
.shanet-co-summary-compact-total {
  font-size: 18px;
  font-weight: 700;
  color: #111;
}
.shanet-co-summary-compact-count {
  font-size: 12px;
  color: #6b7280;
  font-weight: 500;
}
.shanet-co-summary-compact-chevron {
  width: 16px;
  height: 16px;
  color: #9ca3af;
  transition: transform 0.15s ease;
  flex-shrink: 0;
}
.shanet-co-summary-header {
  display: flex !important;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
}
.shanet-co-summary-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #111;
}
.shanet-co-summary-count {
  font-size: 12px;
  color: #6b7280;
  font-weight: 500;
}
.shanet-co-summary-items {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  display: flex !important;
  flex-direction: column;
  gap: 8px;
}
.shanet-co-summary-empty {
  font-size: 13px;
  color: #9ca3af;
  text-align: center;
  padding: 16px 8px;
  background: #f9fafb;
  border-radius: 8px;
}
.shanet-co-summary-item {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #f3f4f6;
}
.shanet-co-summary-item:last-child { border-bottom: 0; }
.shanet-co-summary-item-text { flex: 1; min-width: 0; }
.shanet-co-summary-item-name {
  font-size: 14px;
  font-weight: 600;
  color: #111;
  line-height: 1.25;
}
.shanet-co-summary-item-tier {
  font-size: 12px;
  color: #6b7280;
  margin-top: 1px;
}
.shanet-co-summary-item-price {
  font-size: 14px;
  font-weight: 700;
  color: #111;
  flex-shrink: 0;
}

.shanet-co-summary-totals {
  border-top: 1px solid #e5e7eb;
  padding-top: 12px;
  margin-bottom: 12px;
}
.shanet-co-summary-row {
  display: flex !important;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 0;
  font-size: 14px;
  color: #4b5563;
}
/* Override needed because our display:flex !important above beats the
   default user-agent [hidden] { display: none } — without this, JS
   setting `row.hidden = true` is silently ignored. */
.shanet-co-summary-row[hidden] { display: none !important; }
.shanet-co-summary-discount span:last-child { color: #f15512; font-weight: 600; }
.shanet-co-summary-total {
  font-size: 18px;
  font-weight: 700;
  color: #111;
  padding-top: 8px;
  margin-top: 4px;
  border-top: 1px solid #f3f4f6;
}

.shanet-co-summary-minimum,
.shanet-co-summary-verify {
  font-size: 13px;
  line-height: 1.5;
  padding: 12px 14px;
  border-radius: 10px;
  margin-bottom: 12px;
}
.shanet-co-summary-minimum {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}
.shanet-co-summary-minimum strong { display: block; margin-bottom: 2px; color: #78350f; }
.shanet-co-summary-minimum a { color: #b45309; font-weight: 600; }
.shanet-co-summary-verify {
  background: rgba(241,85,18,0.06);
  color: #9c3e1a;
  border: 1px solid rgba(241,85,18,0.25);
}
.shanet-co-summary-verify strong { display: block; margin-bottom: 2px; color: #9c3e1a; }

.shanet-co-summary-actions { display: block; }
.shanet-co-cta {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: #f15512;
  color: #fff;
  border: 0;
  border-radius: 12px;
  padding: 14px 18px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.12s, transform 0.06s;
}
.shanet-co-cta:hover:not(.is-disabled) { background: #dc4910; }
.shanet-co-cta:active:not(.is-disabled) { transform: translateY(1px); }
.shanet-co-cta.is-disabled {
  background: #d1d5db;
  color: #6b7280;
  cursor: not-allowed;
}
.shanet-co-cta-arrow { width: 18px; height: 18px; }
.shanet-co-cta.is-disabled .shanet-co-cta-arrow { display: none; }
.shanet-co-disclaimer {
  font-size: 11px;
  color: #6b7280;
  line-height: 1.5;
  margin: 10px 4px 0;
  text-align: center;
}
.shanet-co-disclaimer-deposit {
  display: block;
  margin-top: 6px;
}

/* ----------  Schedule step (calendar)  ---------- */
.shanet-co-schedule {
  max-width: 720px;
  margin: 0 auto;
  padding: 8px 24px 24px;
}
@media (min-width: 1080px) {
  .shanet-co-schedule { grid-area: services; padding: 0; }
}

.shanet-co-back {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 6px 0;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  margin-bottom: 12px;
}
.shanet-co-back:hover { color: #f15512; }
.shanet-co-back svg { width: 14px; height: 14px; }

.shanet-co-schedule-header { margin-bottom: 18px; }
.shanet-co-schedule-header h2 {
  font-size: 24px;
  font-weight: 800;
  color: #111;
  margin: 0 0 6px;
  line-height: 1.2;
}
.shanet-co-schedule-header p {
  font-size: 14px;
  color: #4b5563;
  line-height: 1.5;
  margin: 0;
}

.shanet-co-cal-legend {
  display: flex !important;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12px;
  color: #4b5563;
  margin-bottom: 18px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}
.shanet-co-cal-legend-item {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}
.shanet-co-cal-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 4px;
  border: 1px solid transparent;
}
.shanet-co-cal-swatch-open    { background: #fff; border-color: #d1d5db; }
.shanet-co-cal-swatch-limited { background: #fef3c7; border-color: #fde68a; }
.shanet-co-cal-swatch-full    { background: #f3f4f6; border-color: #d1d5db; }

.shanet-co-cal-month {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 14px;
}
.shanet-co-cal-month-name {
  font-size: 15px;
  font-weight: 700;
  color: #111;
  margin: 0 0 10px;
  text-align: center;
}
.shanet-co-cal-dow-row {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 6px;
}
.shanet-co-cal-dow-cell {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.shanet-co-cal-grid {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.shanet-co-cal-cell {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #111;
  cursor: pointer;
  transition: background-color 0.12s, border-color 0.12s, transform 0.06s;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.shanet-co-cal-cell:hover:not(.is-disabled) {
  border-color: #f15512;
  background: rgba(241,85,18,0.04);
}
.shanet-co-cal-cell:active:not(.is-disabled) { transform: scale(0.96); }
.shanet-co-cal-cell.is-disabled { cursor: not-allowed; }

.shanet-co-cal-cell-num { line-height: 1; }

.shanet-co-cal-cell-pad {
  background: transparent;
  border: 0;
  cursor: default;
  pointer-events: none;
}

.shanet-co-cal-cell-open    { /* default white */ }
.shanet-co-cal-cell-limited { background: #fef3c7; border-color: #fde68a; }
.shanet-co-cal-cell-full    { background: #f3f4f6; border-color: #e5e7eb; color: #9ca3af; }
.shanet-co-cal-cell-closed  { background: #f9fafb; border-color: #e5e7eb; color: #d1d5db; }

/* Selected day. !important + explicit background-color to defeat iOS
   Safari 17+ which sometimes drops the orange fill on <div role="button">
   cells (2026-07-05 report), leaving the day number as unreadable white
   text on white. -webkit-appearance:none kills any default box-styling
   that might paint over our color on iOS. */
.shanet-co-cal-cell.is-selected {
  background: #f15512 !important;
  background-color: #f15512 !important;
  border-color: #f15512 !important;
  color: #fff !important;
  box-shadow: 0 4px 10px rgba(241,85,18,0.25);
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.shanet-co-cal-cell.is-selected .shanet-co-cal-cell-num {
  color: #fff !important;
}

/* ----------  Customer info form (step 3)  ---------- */
.shanet-co-customer,
.shanet-co-confirmation {
  max-width: 720px;
  margin: 0 auto;
  padding: 8px 24px 24px;
}
@media (min-width: 1080px) {
  .shanet-co-customer,
  .shanet-co-confirmation { grid-area: services; padding: 0; }
}

.shanet-co-form {
  display: flex !important;
  flex-direction: column;
  gap: 14px;
}
.shanet-co-field-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.shanet-co-field-row-3 {
  grid-template-columns: 1fr 90px 130px;
}
@media (max-width: 520px) {
  .shanet-co-field-row { grid-template-columns: 1fr; }
  .shanet-co-field-row-3 { grid-template-columns: 1fr 1fr 1fr; }
}
.shanet-co-field {
  display: flex !important;
  flex-direction: column;
  gap: 6px;
}
.shanet-co-field-label {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  letter-spacing: 0.2px;
}
.shanet-co-field-optional {
  font-weight: 400;
  color: #9ca3af;
  letter-spacing: 0;
}
.shanet-co-field input,
.shanet-co-field textarea {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  font-size: 16px; /* 16+ to avoid iOS auto-zoom */
  color: #111;
  transition: border-color 0.12s, box-shadow 0.12s;
  width: 100%;
  box-sizing: border-box;
}
.shanet-co-field input:focus,
.shanet-co-field textarea:focus {
  outline: none;
  border-color: #f15512;
  box-shadow: 0 0 0 3px rgba(241,85,18,0.12);
}
.shanet-co-field input::placeholder,
.shanet-co-field textarea::placeholder { color: #9ca3af; }

/* Google PlaceAutocompleteElement (new Places API web component). It
   replaces our <input name="street"> at runtime when a Maps API key is
   set. Style its internal input via ::part(input) so it matches the
   other form fields. ::part() is the only supported styling hook —
   Google explicitly scopes the rest of the shadow DOM. */
gmp-place-autocomplete,
.shanet-co-pac {
  display: block;
  width: 100%;
}
gmp-place-autocomplete::part(input),
.shanet-co-pac::part(input) {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  font-size: 16px;
  color: #111;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.12s, box-shadow 0.12s;
}
gmp-place-autocomplete::part(input):focus,
.shanet-co-pac::part(input):focus {
  outline: none;
  border-color: #f15512;
  box-shadow: 0 0 0 3px rgba(241,85,18,0.12);
}

/* Google Places search helper — sits above the individual address fields
   as a "shortcut to fill in all four" rather than replacing the street
   input. Visually distinct + tinted so customers understand it's optional. */
.shanet-co-address-search {
  margin-bottom: 8px;
  padding: 10px;
  background: #f9fafb;
  border: 1px solid #f1f5f9;
  border-radius: 10px;
}
.shanet-co-address-search-inner {
  margin-bottom: 6px;
}
.shanet-co-address-search-hint {
  font-size: 12px;
  color: #6b7280;
  padding: 0 2px;
}

.shanet-co-checkbox {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: #4b5563;
  line-height: 1.5;
  cursor: pointer;
  padding: 4px 0;
}
.shanet-co-checkbox input[type="checkbox"] {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  accent-color: #f15512;
  flex-shrink: 0;
}

.shanet-co-form-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
}

/* ----------  Payment (Stripe Element) — customer step  ---------- */
/* Base variant (legacy: payment below form). Phase 2b moved payment to
   the TOP of the customer step, so shanet-co-payment-primary drops the
   top border/margin that was separating it from the form above. */
.shanet-co-payment {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
}
.shanet-co-payment-primary {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  margin-bottom: 24px;
}

/* Section heading above the service-address block. Slightly less
   prominent than the step's h2; consistent weight with the payment header. */
.shanet-co-section-heading {
  margin: 24px 0 12px;
  font-size: 15px;
  font-weight: 700;
  color: #111827;
}
.shanet-co-service-address-section {
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
}

/* ----------  Two-flowpath customer step  ----------
   Sections are stacked in DOM order (wallet, contact, address, payment).
   JS toggles the .is-path-* class on .shanet-co-customer and sets each
   section's `hidden` attribute. CSS below styles the visible pieces —
   the hidden ones are already hidden by the HTML5 `hidden` attribute. */

.shanet-co-section {
  padding: 12px 0;
}
.shanet-co-section + .shanet-co-section {
  border-top: 1px solid #e5e7eb;
  margin-top: 4px;
}
.shanet-co-section:first-of-type {
  padding-top: 0;
}
.shanet-co-section-heading {
  margin: 6px 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.shanet-co-section .shanet-co-field {
  margin-bottom: 8px;
}
.shanet-co-section .shanet-co-field:last-child {
  margin-bottom: 0;
}
.shanet-co-section .shanet-co-checkbox {
  margin-top: 10px;
}

/* Path-switch link ("credit card instead"). Underlined text link, not a
   button — deliberately understated so wallet buttons stay the primary CTA. */
.shanet-co-path-switch {
  text-align: center;
  margin-top: 14px;
}
.shanet-co-path-switch-link {
  display: inline-block !important;
  font-size: 14px;
  color: #6b7280;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
}
.shanet-co-path-switch-link:hover,
.shanet-co-path-switch-link:focus {
  color: #111827;
  background: #f9fafb;
}
.shanet-co-payment-header {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.shanet-co-payment-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #111827;
}
.shanet-co-payment-secure {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #6b7280;
  font-weight: 500;
}
.shanet-co-payment-secure svg { width: 12px; height: 12px; }
.shanet-co-payment-element {
  min-height: 60px;
  padding: 4px 0;
}

/* Express Checkout Element — sits above the card form. Stripe renders
   Apple Pay / Google Pay / Link buttons inside; we own the wrapper's
   spacing + the "or pay with card" divider below. */
.shanet-co-express-checkout {
  min-height: 48px;
  margin-bottom: 4px;
}
.shanet-co-express-loading {
  padding: 12px;
  color: #6b7280;
  font-size: 13px;
  text-align: center;
}
.shanet-co-payment-divider {
  display: flex !important;
  align-items: center;
  gap: 12px;
  margin: 18px 0 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #9ca3af;
}
.shanet-co-payment-divider::before,
.shanet-co-payment-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e5e7eb;
}
.shanet-co-payment-divider[hidden] { display: none !important; }
.shanet-co-express-checkout[hidden] { display: none !important; }
.shanet-co-payment-loading {
  padding: 24px 12px;
  color: #6b7280;
  font-size: 14px;
  text-align: center;
}
.shanet-co-payment-error {
  margin-top: 10px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
}

/* Deposit / balance rows in the summary panel — same visual weight as
   subtotal / discount rows; the "Due today" line is emphasized in orange
   to draw the eye to the actual amount charged at booking. */
.shanet-co-summary-due-today span:last-child {
  color: #f15512;
  font-weight: 700;
}
.shanet-co-summary-balance span:last-child { color: #374151; }

/* ----------  Confirmation step (step 4)  ---------- */
.shanet-co-confirmation-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 32px 28px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.05);
  text-align: center;
}
.shanet-co-confirmation-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(22,163,74,0.10);
  color: #16a34a;
  margin-bottom: 14px;
}
.shanet-co-confirmation-icon svg { width: 28px; height: 28px; }
.shanet-co-confirmation-card h2 {
  font-size: 26px;
  font-weight: 800;
  color: #111;
  margin: 0 0 8px;
}
.shanet-co-confirmation-lead {
  font-size: 15px;
  color: #4b5563;
  margin: 0 0 20px;
  line-height: 1.5;
}
.shanet-co-confirmation-meta {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
  text-align: left;
}
.shanet-co-confirmation-meta > div {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 12px;
}
.shanet-co-confirmation-meta span {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.shanet-co-confirmation-meta strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #111;
  margin-top: 2px;
}
/* Shared header/body/footer/form styles for the confirmation contact +
   address block (per user feedback: the correction link should NOT be
   inline with the label). Editable state swaps in a small inline form.
   The outer container is styled separately (.shanet-co-confirmation-details). */
.shanet-co-confirmation-address-header {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.shanet-co-confirmation-address-body {
  font-size: 15px;
  font-weight: 600;
  color: #111827;
  line-height: 1.45;
}
.shanet-co-confirmation-address-footer {
  margin-top: 8px;
}
.shanet-co-confirmation-address-edit-link {
  font-size: 13px;
  color: #f15512;
  font-weight: 600;
  text-decoration: none;
}
.shanet-co-confirmation-address-edit-link:hover { text-decoration: underline; }
.shanet-co-confirmation-address-edit-form {
  display: flex !important;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}
.shanet-co-confirmation-address-actions {
  display: flex !important;
  gap: 8px;
  margin-top: 4px;
}
.shanet-co-confirmation-address-error {
  padding: 8px 10px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  color: #b91c1c;
  font-size: 13px;
  line-height: 1.4;
}
.shanet-co-conf-addr-save,
.shanet-co-conf-addr-cancel {
  padding: 8px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  border: 0;
}
.shanet-co-conf-addr-save {
  background: #f15512;
  color: #fff;
}
.shanet-co-conf-addr-save:hover { background: #dc4910; }
.shanet-co-conf-addr-cancel {
  background: #fff;
  color: #374151;
  border: 1px solid #e5e7eb;
}
.shanet-co-conf-addr-cancel:hover { background: #f9fafb; }

/* Combined contact + address block on confirmation. Surfaces phone/email
   (missing phone shows a warning so it's visible, not silently absent)
   and the service address under one shared edit link. The two sub-sections
   share this one container; the second header gets breathing room via the
   adjacent-sibling rule below since there's no divider between them. */
.shanet-co-confirmation-details {
  text-align: left;
  padding: 14px 0;
  margin: 0 0 12px;
  border-top: 1px solid #f3f4f6;
}
.shanet-co-confirmation-details:empty { display: none; }
.shanet-co-confirmation-details .shanet-co-confirmation-address-body + .shanet-co-confirmation-address-header,
.shanet-co-confirmation-details .shanet-co-confirmation-address-edit-form + .shanet-co-confirmation-address-header {
  margin-top: 14px;
}
.shanet-co-confirmation-details .shanet-co-confirmation-address-body > div {
  font-size: 14px;
  color: #111827;
  padding: 2px 0;
}
.shanet-co-confirmation-contact-missing {
  color: #b45309 !important;
  background: #fef3c7;
  padding: 6px 10px !important;
  border-radius: 6px;
  font-size: 13px !important;
  font-weight: 500;
}

/* Inline glyphs in the confirmation contact block (phone / envelope).
   Sized in em so they track the surrounding text. */
.shanet-co-inline-icon {
  width: 1em !important;
  height: 1em !important;
  display: inline-block !important;
  vertical-align: -0.125em;
  flex-shrink: 0;
}

/* Defensive backstop. WordPress's emoji script rewrites emoji characters
   into <img class="emoji"> tags, and Hello Elementor's reset applies
   `img { width: 100% }` — which rendered the phone glyph at full container
   width on a live booking confirmation (2026-08-13, reported from mobile).
   The glyphs are inline SVG now, but any emoji that reaches this subtree
   later must not be able to do that again. */
.shanet-co-page img.emoji,
.shanet-co-page img.wp-smiley {
  width: 1em !important;
  height: 1em !important;
  max-width: 1em !important;
  display: inline-block !important;
  vertical-align: -0.1em;
  margin: 0 0.15em;
  padding: 0 !important;
  border: none !important;
}

.shanet-co-confirmation-items {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  text-align: left;
  border-top: 1px solid #f3f4f6;
}
.shanet-co-confirmation-items li {
  display: flex !important;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #f3f4f6;
  font-size: 14px;
}
.shanet-co-confirmation-items li span:first-child { color: #374151; }
.shanet-co-confirmation-items li span:last-child { color: #111; font-weight: 700; }
.shanet-co-confirmation-next {
  text-align: left;
  background: #fff7f2;
  border: 1px solid #fed7c2;
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 18px;
}
.shanet-co-confirmation-next h3 {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: #9c3e1a;
}
.shanet-co-confirmation-next ol {
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
  color: #4b5563;
  line-height: 1.6;
}
.shanet-co-confirmation-next ol li { padding-left: 2px; }
.shanet-co-confirmation-contact {
  font-size: 13px;
  color: #6b7280;
  margin: 0;
}
.shanet-co-confirmation-contact a {
  color: #f15512;
  font-weight: 700;
  text-decoration: none;
}
.shanet-co-confirmation-contact a:hover { text-decoration: underline; }

/* ----------  Debug panel (only when ?debug=wilson2026 on the URL) ---------- */
.shanet-co-debug-panel {
  margin-top: 18px;
  padding: 14px 16px;
  background: #111827;
  color: #e5e7eb;
  border-radius: 12px;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
}
.shanet-co-debug-header { color: #fbbf24; margin-bottom: 10px; }
.shanet-co-debug-header strong { color: #fde68a; }
.shanet-co-debug-empty { color: #9ca3af; padding: 4px 0; }
.shanet-co-debug-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex !important;
  flex-direction: column;
  gap: 8px;
}
.shanet-co-debug-list li {
  background: rgba(255,255,255,0.04);
  border-left: 3px solid #f15512;
  padding: 8px 10px;
  border-radius: 6px;
}
.shanet-co-debug-time { color: #fff; font-weight: 700; }
.shanet-co-debug-meta { color: #cbd5e1; margin-top: 2px; font-size: 11.5px; }