/* =====================================================
ShiftFuel Concierge
Clean Website Design System
Desktop-first rebrand foundation
===================================================== */

/* ---------- 1. Design tokens ---------- */

:root {
color-scheme: light;

/* Brand palette — role identity now flows from theme.css tokens.
   These legacy vars are re-pointed at the active role ramp so every existing
   var(--sf-teal)/var(--sf-sage) consumer inherits green/blue/purple per role.
   Status colors (coral, green-success, danger, warning) stay role-neutral. */
--sf-teal: var(--sf-primary, #0D3B3B);
--sf-teal-dark: var(--sf-primary-dark, #062727);
--sf-sage: var(--sf-accent, #A7BFA6);
--sf-sage-dark: var(--sf-accent, #7F9D80);
--sf-sage-light: var(--sf-primary-muted, #EAF2EA);
--sf-coral: #FF6B5A;
--sf-coral-dark: #E85445;
--sf-green: #1F7A45;
--sf-green-dark: #155F34;
--sf-charcoal: #1F1F1F;
--sf-muted: #5F6F6D;
/* --sf-border is defined per-role in theme.css (neutral green-grey for customer) */
--sf-off-white: #F7F7F5;
--sf-white: #FFFFFF;
--sf-danger: #B42318;
--sf-warning: #8A5A00;
--sf-success: #1A7A3A;

/* Backward-compatible variables used by existing CSS/JS */
--bg: var(--sf-off-white);
--ink: var(--sf-charcoal);
--muted: var(--sf-muted);
--brand: var(--sf-teal);
--brand-dark: var(--sf-teal-dark);
--accent: var(--sf-coral);
--accent-strong: var(--sf-coral-dark);
--sage: var(--sf-sage);
--surface: var(--sf-white);
--surface-soft: var(--sf-sage-light);
--line: var(--sf-border);
--danger: var(--sf-danger);

/* Shape */
--sf-radius-xs: 6px;
--sf-radius-sm: 10px;
--sf-radius-md: 16px;
--sf-radius-lg: 24px;
--sf-radius-pill: 999px;

/* Shadows — tinted from the active role primary */
--sf-shadow-card: 0 16px 40px rgb(var(--sf-primary-rgb, 13 59 59) / 0.08);
--sf-shadow-soft: 0 8px 24px rgb(var(--sf-primary-rgb, 13 59 59) / 0.06);
--sf-shadow-header: 0 18px 44px rgb(var(--sf-primary-rgb, 13 59 59) / 0.2);

/* Layout */
--sf-page-width: 1600px;
--sf-page-pad: clamp(20px, 5vw, 72px);
--sf-sticky-header-offset: 112px;
}

/* ---------- 2. Base reset ---------- */

*,
*::before,
*::after {
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
scroll-padding-top: var(--sf-sticky-header-offset);
}

:target {
scroll-margin-top: var(--sf-sticky-header-offset);
}

body {
margin: 0;
color: var(--sf-charcoal);
background:
radial-gradient(circle at top left, rgb(var(--sf-accent-rgb, 167 191 166) / 0.18), transparent 34rem),
var(--sf-off-white);
font-family: Inter, "Segoe UI", Arial, Helvetica, sans-serif;
line-height: 1.6;
}

img,
svg {
max-width: 100%;
}

a {
color: inherit;
text-decoration: none;
}

button,
input,
select,
textarea {
font: inherit;
}

h1,
h2,
h3,
h4,
p {
margin-top: 0;
}

h1 {
margin-bottom: 20px;
color: var(--sf-teal-dark);
font-size: clamp(2.6rem, 5vw, 5.25rem);
line-height: 1;
letter-spacing: -0.03em;
}

h2 {
margin-bottom: 16px;
color: var(--sf-teal-dark);
font-size: clamp(2rem, 3vw, 3rem);
line-height: 1.1;
letter-spacing: -0.02em;
}

h3 {
margin-bottom: 10px;
color: var(--sf-teal-dark);
font-size: 1.25rem;
}

/* ---------- 3. Shared layout helpers ---------- */

.sf-container,
.section,
.trust-service-bar,
.returning-shortcut,
.availability-section,
.landing-final-cta,
.returning-flow-shell,
.booking-flow-shell {
width: min(var(--sf-page-width), calc(100% - 40px));
margin-inline: auto;
}

.section {
padding: 80px var(--sf-page-pad);
}

.section-heading {
max-width: 780px;
margin-bottom: 32px;
}

.section-heading.center {
margin-inline: auto;
text-align: center;
}

.eyebrow,
.sf-kicker {
display: inline-flex;
align-items: center;
width: fit-content;
margin: 0 0 12px;
padding: 6px 12px;
color: var(--sf-teal);
background: var(--sf-sage-light);
border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.14);
border-radius: var(--sf-radius-pill);
font-size: 0.78rem;
font-weight: 900;
letter-spacing: 0;
text-transform: none;
}

/* Eyebrow/kicker label pills removed site-wide (the small box above hero and
   section headings). Hidden in CSS rather than deleted from each page's markup
   so JS that updates their text (e.g. the admin greeting / request-queue label)
   keeps working without errors. .portal-login-badge is the same pill on the
   worker/admin sign-in pages ("Worker Access" / "Admin Access"). */
.eyebrow,
.sf-kicker {
  display: none !important;
}

.hero-copy,
.location-note,
.section-heading p,
.service-card p,
.price-card p,
.split p,
.trust p,
.booking-section p,
.payment-box p,
.field-help {
color: var(--sf-muted);
}

/* ---------- 4. Buttons ---------- */

.button,
.nav-cta,
.nav-returning,
.nav-outline,
.status-btn,
.portal-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 46px;
padding: 12px 18px;
border: 1px solid transparent;
border-radius: var(--sf-radius-sm);
font-weight: 800;
line-height: 1;
text-decoration: none;
cursor: pointer;
transition:
transform 0.15s ease,
box-shadow 0.15s ease,
background 0.15s ease,
border-color 0.15s ease,
color 0.15s ease;
}

/* The shared display rule above is an author style, so it overrides the
   browser's built-in [hidden] { display:none } — which means the `hidden`
   attribute is silently ignored on these controls. Restore it explicitly so
   JS toggling `el.hidden = true` actually hides them. */
.button[hidden],
.nav-cta[hidden],
.nav-returning[hidden],
.nav-outline[hidden],
.status-btn[hidden],
.portal-button[hidden] {
display: none;
}

.button:hover,
.nav-cta:hover,
.nav-returning:hover,
.nav-outline:hover,
.status-btn:hover,
.portal-button:hover {
transform: translateY(-1px);
box-shadow: var(--sf-shadow-soft);
}

.button.primary,
.nav-cta {
color: var(--sf-white);
background: linear-gradient(135deg, var(--sf-green), var(--sf-green-dark));
border-color: var(--sf-green-dark);
}

.button.primary:hover,
.nav-cta:hover {
background: linear-gradient(135deg, #239155, var(--sf-green-dark));
}

/* Hero "My Account" (light bg): a solid dark-teal secondary with white text.
   Strong visual weight against the white hero and clearly distinct from the
   green primary, replacing the old pale ghost fill that read as disabled. Only
   used on light heroes (index, hiring). */
.button.returning {
color: var(--sf-white);
background: var(--sf-teal);
border-color: var(--sf-teal);
}

.button.returning:hover {
background: var(--sf-primary-soft, #12504D);
border-color: var(--sf-primary-soft, #12504D);
}

.button.returning:focus-visible {
outline: 2px solid var(--sf-teal-dark);
outline-offset: 2px;
box-shadow: 0 0 0 4px rgb(var(--sf-primary-rgb, 13 59 59) / 0.28);
}

.button.returning:active {
background: var(--sf-teal-dark);
border-color: var(--sf-teal-dark);
transform: translateY(0);
box-shadow: none;
}

.button.returning:disabled,
.button.returning[disabled] {
opacity: 0.55;
cursor: not-allowed;
transform: none;
box-shadow: none;
}

/* Header "My Account" (dark teal header): the same dark-teal identity with white
   text, but one step lighter (--sf-primary-soft) so it reads as a solid, weighty
   chip against the dark header instead of the old washed-out sage pill. A literal
   --sf-teal fill would disappear into the header. */
.nav-returning {
color: var(--sf-white);
background: var(--sf-primary-soft, #12504D);
border-color: rgba(255, 255, 255, 0.32);
}

.nav-returning:hover {
border-color: rgba(255, 255, 255, 0.6);
}

.nav-returning:focus-visible {
outline: 2px solid var(--sf-white);
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3);
}

.nav-returning:active {
background: var(--sf-teal);
border-color: rgba(255, 255, 255, 0.32);
transform: translateY(0);
box-shadow: none;
}

.nav-returning:disabled,
.nav-returning[disabled],
.nav-returning[aria-disabled="true"] {
opacity: 0.55;
cursor: not-allowed;
transform: none;
box-shadow: none;
}

.button.tertiary,
.button.secondary,
.nav-outline {
color: var(--sf-teal);
background: var(--sf-white);
border-color: rgb(var(--sf-primary-rgb, 13 59 59) / 0.28);
}

.button.danger {
color: var(--sf-danger);
background: transparent;
border-color: #FCA5A5;
}

.button.danger:hover {
background: #FEF2F2;
border-color: var(--sf-danger);
}

.button:disabled,
.button[disabled],
.status-btn:disabled {
opacity: 0.55;
cursor: not-allowed;
transform: none;
box-shadow: none;
}

/* ---------- 5. Header ---------- */

.site-header {
position: sticky;
top: 18px;
z-index: 20;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
width: min(var(--sf-page-width), calc(100% - 40px));
margin: 18px auto 0;
padding: 18px 22px;
color: var(--sf-white);
background: linear-gradient(135deg, var(--sf-teal), var(--sf-teal-dark));
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--sf-radius-sm);
box-shadow: var(--sf-shadow-header);
}

.logo {
display: inline-flex;
align-items: center;
gap: 12px;
color: var(--sf-white);
font-size: 1.08rem;
font-weight: 900;
letter-spacing: 0;
/* Never wrap "ShiftFuel Concierge" to two lines — the signed-in header gives the
   logo min-width:0, which otherwise lets it break mid-name on Track/Book. */
white-space: nowrap;
}

.logo-mark {
display: inline-grid;
place-items: center;
width: 36px;
height: 36px;
flex: 0 0 auto;
color: var(--sf-sage);
font-size: 1.7rem;
font-weight: 900;
font-style: italic;
line-height: 1;
background: linear-gradient(135deg, rgba(234, 242, 234, 0.2), rgba(255,255,255,0.08));
border-radius: 10px;
padding: 2px;
}

.logo-mark img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}

.nav {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 20px;
color: rgba(255, 255, 255, 0.86);
font-size: 0.9rem;
font-weight: 700;
}

.nav a:hover {
color: var(--sf-white);
}

/* Separate the informational links from the action buttons so the cluster
   doesn't read as one squished block. (Reset on mobile, where nav stacks.) */
.site-header .nav-cta {
margin-left: 10px;
}

.site-header .nav-outline {
color: var(--sf-white);
background: transparent;
border-color: rgba(255, 255, 255, 0.72);
}

/* ---------- 6. Mobile menu ---------- */

.mobile-menu-button {
display: none;
align-items: center;
gap: 8px;
padding: 10px 12px;
color: var(--sf-white);
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: var(--sf-radius-sm);
font-weight: 800;
}

/* ---------- 7. Form fields ---------- */

label {
display: grid;
gap: 7px;
font-weight: 700;
}

input,
select,
textarea,
.sfp-trigger {
width: 100%;
min-height: 46px;
padding: 12px 13px;
color: var(--sf-charcoal);
background: var(--sf-white);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-sm);
font: inherit;
font-size: 1rem;
}

textarea {
resize: vertical;
}

input:focus,
select:focus,
textarea:focus,
.sfp-trigger:focus,
.sfp-trigger[aria-expanded="true"] {
outline: 3px solid rgba(255, 107, 90, 0.22);
border-color: var(--sf-coral);
}

/* ---------- 8. Shared cards ---------- */

.service-card,
.price-card,
.pricing-card,
.status-panel,
.request-card,
.track-search-card,
.returning-flow-card,
.booking-accordion-card,
.booking-summary-sidebar,
.portal-login-card,
fieldset,
.service-details-panel,
.payment-box,
.returning-modal-dialog {
background: var(--sf-white);
border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
border-radius: var(--sf-radius-sm);
box-shadow: var(--sf-shadow-card);
}

/* ---------- 9. Footer ---------- */

.site-footer {
width: min(var(--sf-page-width), calc(100% - 40px));
margin: 0 auto 22px;
padding: 32px var(--sf-page-pad);
color: rgba(255, 255, 255, 0.8);
background: linear-gradient(135deg, var(--sf-teal), var(--sf-teal-dark));
border: 0;
border-radius: var(--sf-radius-sm);
box-shadow: var(--sf-shadow-card);
font-size: 0.85rem;
}

.footer-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-copy {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.85rem;
}

.footer-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-links a,
.footer-links button {
  color: rgba(255, 255, 255, 0.78);
  padding: 0;
  background: transparent;
  border: 0;
  font-size: 0.85rem;
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
}

.footer-links a:hover,
.footer-links button:hover {
  color: var(--sf-white);
  text-decoration: underline;
}

/* Consolidated footer branding — left column holds the shield + tagline above
   the copyright; footer-links stays on the right. Stacks cleanly on mobile via
   the existing .footer-main column rule. */
.footer-brand-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-brand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--sf-white);
}

.footer-brand-icon svg {
  width: 22px;
  height: 22px;
}

.footer-brand-text strong {
  display: block;
  color: var(--sf-white);
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.2;
}

.footer-brand-text p {
  margin: 3px 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.85rem;
}

.support-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(340px, 1.15fr);
  gap: 28px;
  align-items: start;
}

.support-direct {
  font-weight: 800;
}

.support-direct a {
  color: var(--sf-teal);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.support-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(18px, 3vw, 40px);
  width: min(var(--sf-page-width), calc(100% - 40px));
  margin: 56px auto 22px;
  padding: clamp(20px, 3vw, 30px);
  color: var(--sf-white);
  background: linear-gradient(135deg, var(--sf-teal), var(--sf-teal-dark));
  border-radius: var(--sf-radius-sm);
  box-shadow: var(--sf-shadow-card);
}

.support-strip-copy {
  display: grid;
  gap: 6px;
  max-width: 760px;
}

.support-strip-kicker {
  margin: 0;
  color: var(--sf-sage);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.support-strip h2,
.support-modal-head h2 {
  margin: 0;
  line-height: 1.08;
  letter-spacing: 0;
}

.support-strip h2 {
  color: var(--sf-white);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
}

.support-strip p:not(.support-strip-kicker),
.support-modal-head p {
  margin: 0;
  line-height: 1.55;
}

.support-strip p:not(.support-strip-kicker) {
  color: rgba(255, 255, 255, 0.78);
}

.support-strip a {
  color: var(--sf-white);
  font-weight: 850;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.support-strip .button {
  flex: 0 0 auto;
  background: var(--sf-white);
  color: var(--sf-teal-dark);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: none;
}

.support-modal {
  width: min(760px, calc(100% - 32px));
  max-height: min(88vh, 860px);
  overflow: auto;
  padding: 0;
  color: var(--sf-charcoal);
  background: transparent;
  border: 0;
}

.support-modal::backdrop {
  background: rgb(var(--sf-primary-rgb, 13 59 59) / 0.58);
  backdrop-filter: blur(4px);
}

.support-modal-card {
  display: grid;
  gap: 18px;
  padding: clamp(18px, 3vw, 28px);
  background: var(--sf-white);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: var(--sf-radius-md);
  box-shadow: 0 24px 70px rgb(var(--sf-primary-rgb, 13 59 59) / 0.26);
}

.support-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.support-modal-head > div {
  display: grid;
  gap: 6px;
}

.support-modal-head p:not(.support-strip-kicker) {
  color: var(--sf-muted);
}

.support-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  padding: 0;
  color: var(--sf-teal-dark);
  background: var(--sf-sage-light);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: 12px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.support-modal-close:hover {
  background: #dfeade;
  border-color: rgb(var(--sf-primary-rgb, 13 59 59) / 0.22);
}

.support-modal-close:focus-visible {
  outline: 3px solid rgba(255, 107, 90, 0.45);
  outline-offset: 2px;
}

.support-form {
  display: grid;
  gap: 16px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.support-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.support-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.support-actions .form-status {
  margin: 0;
  color: var(--sf-muted);
  font-weight: 700;
}

.support-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

@media (max-width: 820px) {
  .support-layout,
  .support-form-grid {
    grid-template-columns: 1fr;
  }

  .support-strip {
    align-items: stretch;
    flex-direction: column;
    margin-top: 40px;
  }

  .support-strip .button {
    width: 100%;
    justify-content: center;
  }

  .support-modal {
    width: min(100% - 24px, 620px);
  }
}

.footer-groups {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}

.footer-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.footer-group-label {
  margin: 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.footer-group a {
  color: rgba(255, 255, 255, 0.76);
  text-decoration: none;
  font-size: 0.82rem;
}

.footer-group a:hover {
  color: var(--sf-white);
  text-decoration: underline;
}

/* Legal page styles moved to legal.css (2026-07-08). */

/* Public landing page styles moved to landing.css (2026-07-08). */

.landing-header {
  position: sticky;
  top: 12px;
  z-index: 20;
}

.mobile-menu-button {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  font-weight: 800;
}

.returning-flow-hero h1 {
  max-width: 620px;
  margin: 0;
  color: var(--brand-dark);
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: 0;
}

.returning-flow-hero p {
  max-width: 660px;
  color: var(--muted);
  font-size: 1.14rem;
  line-height: 1.7;
}

.button.tertiary {
  color: var(--brand);
  background: #ffffff;
  border-color: rgb(var(--sf-primary-rgb, 13 59 59) / 0.28);
}

/* NOTE: the duplicate `.button.returning` override that used to live here
   (white text on sage) was removed — it hid the green ghost style defined
   earlier in this file. Keep the single definition up there. */

.customer-account-prompt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding: 16px;
  color: var(--sf-teal-dark);
  background: var(--sf-sage-light);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.14);
  border-radius: var(--sf-radius-sm);
}

.customer-account-prompt div {
  display: grid;
  gap: 2px;
}

.customer-account-prompt strong {
  font-size: 0.95rem;
  font-weight: 900;
}

.customer-account-prompt span {
  color: var(--sf-muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.customer-account-prompt small {
  color: var(--sf-teal);
  font-size: 0.82rem;
  font-weight: 800;
}

.customer-account-prompt .button {
  flex-shrink: 0;
  min-height: 42px;
}

.customer-account-shell {
  display: grid;
  gap: 24px;
  width: min(1240px, calc(100% - 48px));
  margin: clamp(28px, 4vw, 48px) auto;
}

.customer-account-access {
  display: grid;
  gap: 22px;
}

.customer-account-intro {
  display: grid;
  justify-items: center;
  gap: 10px;
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.customer-account-intro h1 {
  margin: 0;
  color: var(--sf-teal-dark);
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1;
}

.customer-account-intro p:not(.customer-dashboard-kicker) {
  margin: 0;
  color: var(--sf-muted);
  font-size: 1rem;
  line-height: 1.6;
}

.customer-account-access-grid {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(280px, 0.8fr);
  gap: 18px;
  align-items: start;
}

.customer-account-options {
  display: grid;
  gap: 14px;
}

.customer-account-option-card {
  display: grid;
  gap: 14px;
  padding: clamp(20px, 3vw, 28px);
  background: var(--sf-white);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: 14px;
  box-shadow: var(--sf-shadow-card);
}

.customer-account-option-card h2 {
  margin: 0;
  color: var(--sf-teal-dark);
  font-size: 1.2rem;
  line-height: 1.15;
}

.customer-account-option-card p {
  margin: 6px 0 0;
  color: var(--sf-muted);
  font-size: 0.94rem;
  line-height: 1.5;
}

.customer-account-option-card .button {
  width: fit-content;
}

.customer-account-guest-card {
  background: linear-gradient(180deg, #ffffff 0%, var(--sf-sage-light) 100%);
}

.customer-account-guest-actions {
  display: grid;
  gap: 10px;
}

.customer-account-guest-actions .button {
  width: 100%;
  justify-content: center;
}

/* Action-first "What would you like to do?" card (guest actions lead). */
.customer-account-actions-card {
  display: grid;
  gap: 16px;
  align-content: start;
  padding: clamp(20px, 3vw, 30px);
  background: var(--sf-white);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: 16px;
  box-shadow: var(--sf-shadow-card);
}

.customer-account-actions-card > h2 {
  margin: 0;
  color: var(--sf-teal-dark);
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  line-height: 1.1;
}

.customer-account-action-list {
  display: grid;
  gap: 12px;
}

.customer-account-action {
  display: grid;
  gap: 4px;
  padding: 16px 18px;
  text-align: left;
  text-decoration: none;
  color: var(--sf-teal-dark);
  background: var(--sf-white);
  border: 1.5px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.16);
  border-radius: 14px;
  font: inherit;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.customer-account-action:hover {
  transform: translateY(-1px);
  border-color: rgb(var(--sf-primary-rgb, 13 59 59) / 0.3);
  box-shadow: 0 10px 22px rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
}

.customer-account-action-title {
  font-size: 1.05rem;
  font-weight: 900;
}

.customer-account-action-sub {
  color: var(--sf-muted);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.4;
}

.customer-account-action-primary {
  color: var(--sf-white);
  background: linear-gradient(135deg, #1e7d52, #166a44);
  border-color: transparent;
  box-shadow: 0 12px 26px rgba(30, 125, 82, 0.28);
}

.customer-account-action-primary .customer-account-action-sub {
  color: rgba(255, 255, 255, 0.9);
}

.customer-account-action-primary:hover {
  border-color: transparent;
  box-shadow: 0 16px 30px rgba(30, 125, 82, 0.34);
}

.customer-account-reassure {
  margin: 2px 0 0;
  padding: 10px 14px;
  color: var(--sf-teal-dark);
  background: var(--sf-sage-light);
  border-radius: 12px;
  font-size: 0.86rem;
  font-weight: 700;
  text-align: center;
}

.customer-account-side {
  display: grid;
  gap: 14px;
  align-content: start;
}

/* The `hidden` attribute must beat the display:grid on the base card/panel. */
.customer-account-benefits-card[hidden],
[data-account-form][hidden] {
  display: none;
}

.customer-account-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.customer-account-close {
  flex: none;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: var(--sf-sage-light);
  color: var(--sf-teal-dark);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.customer-account-close:hover {
  background: rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
}

.customer-account-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: 18px;
}

.customer-account-card {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: clamp(22px, 3vw, 32px);
  background: var(--sf-white);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: var(--sf-radius-sm);
  box-shadow: var(--sf-shadow-card);
}

.customer-account-card-primary {
  background: linear-gradient(180deg, #ffffff 0%, var(--sf-sage-light) 100%);
}

.customer-account-icon {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: var(--sf-teal-dark);
  background: var(--sf-sage-light);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: var(--sf-radius-sm);
}

.customer-account-icon svg {
  width: 24px;
  height: 24px;
}

.customer-account-card h2 {
  margin: 0;
  font-size: clamp(1.35rem, 2vw, 1.9rem);
  line-height: 1.1;
  letter-spacing: 0;
}

.customer-account-card p {
  margin: 0;
  color: var(--sf-muted);
}

.customer-account-card .button {
  width: fit-content;
  margin-top: 4px;
}

.customer-account-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 34px;
  padding: 8px 12px;
  color: var(--sf-teal-dark);
  background: var(--sf-sage-light);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.14);
  border-radius: var(--sf-radius-pill);
  font-size: 0.82rem;
  font-weight: 900;
}

.customer-account-panel,
.customer-dashboard {
  display: grid;
  gap: 22px;
  padding: clamp(22px, 3vw, 44px);
  background: var(--sf-white);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: var(--sf-radius-sm);
  box-shadow: var(--sf-shadow-card);
}

.customer-account-panel {
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
  align-items: start;
}

.customer-account-login-card {
  grid-template-columns: 1fr;
  gap: 18px;
}

.customer-account-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 6px;
  background: var(--sf-sage-light);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: 14px;
}

.customer-account-tab {
  min-height: 44px;
  padding: 10px 14px;
  color: var(--sf-teal);
  background: transparent;
  border: 0;
  border-radius: 10px;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.customer-account-tab.is-active {
  color: var(--sf-white);
  background: linear-gradient(135deg, var(--sf-teal), var(--sf-teal-dark));
  box-shadow: 0 8px 18px rgb(var(--sf-primary-rgb, 13 59 59) / 0.16);
}

.customer-account-mode-panel {
  display: grid;
}

.customer-account-mode-panel[hidden] {
  display: none;
}

.customer-account-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.customer-account-panel-copy h2,
.customer-dashboard-header h2 {
  margin: 0;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: 0;
}

.customer-account-panel-copy p {
  margin: 10px 0 0;
  color: var(--sf-muted);
}

.customer-account-benefits {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.customer-account-benefits li {
  position: relative;
  padding-left: 26px;
  color: var(--sf-muted);
  font-size: 0.92rem;
  line-height: 1.35;
}

.customer-account-benefits li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #1e7d52;
  font-weight: 800;
}

.customer-account-form {
  display: grid;
  gap: 14px;
}

.customer-account-form.is-compact {
  grid-template-columns: 1fr 1fr auto;
  align-items: end;
}

.customer-account-form.is-compact .form-status {
  grid-column: 1 / -1;
}

.customer-dashboard[hidden] {
  display: none;
}

.customer-dashboard.is-alt-view > .customer-dashboard-section:not(.customer-app-panel),
.customer-dashboard.is-alt-view > .customer-quickactions,
.customer-dashboard.is-alt-view > .customer-claim-panel,
.customer-dashboard.is-alt-view > .customer-recommend,
.customer-dashboard.is-alt-view > .customer-dashboard-summary,
.customer-dashboard.is-alt-view > .customer-dashboard-stats,
.customer-dashboard.is-alt-view > .customer-dashboard-layout,
.customer-dashboard.is-alt-view > .customer-support-link {
  display: none;
}

.customer-app-panel[hidden] {
  display: none;
}

.customer-app-panel {
  grid-column: 1 / -1;
}

.customer-app-panel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.customer-app-action-card {
  display: grid;
  align-content: space-between;
  gap: 18px;
  min-height: 210px;
  padding: 18px;
  background: var(--sf-white);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: var(--sf-radius-sm);
  box-shadow: var(--sf-shadow-soft);
}

.customer-app-action-card-primary {
  color: var(--sf-white);
  background: linear-gradient(135deg, var(--sf-teal), var(--sf-teal-dark));
  border-color: transparent;
}

.customer-app-action-card strong {
  display: block;
  color: inherit;
  font-size: 1.25rem;
  line-height: 1.15;
}

.customer-app-action-card p {
  margin: 8px 0 0;
  color: inherit;
  opacity: 0.78;
}

.customer-app-action-card .customer-dashboard-kicker {
  color: inherit;
  opacity: 0.72;
}

.customer-account-support-panel {
  margin-top: 16px;
}

.customer-account-link-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.customer-account-link-card {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: var(--sf-radius-sm);
  background: var(--sf-white);
  color: var(--sf-ink);
  font-size: 0.9rem;
  font-weight: 800;
  text-decoration: none;
}

.customer-app-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.customer-book-panel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
  gap: 14px;
  align-items: stretch;
}

.customer-book-start-card {
  display: grid;
  gap: 18px;
  padding: 18px;
  border-radius: var(--sf-radius-sm);
  box-shadow: var(--sf-shadow-soft);
}

.customer-book-start-card.customer-app-action-card-primary {
  color: var(--sf-ink);
  background: var(--sf-white);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
}

.customer-book-start-card .customer-dashboard-kicker {
  color: var(--sf-muted);
  opacity: 1;
}

.customer-book-start-card > div:first-child strong {
  color: var(--sf-teal-dark);
}

.customer-book-start-card > div:first-child p {
  color: var(--sf-muted);
  opacity: 1;
}

.customer-book-choice-block {
  display: grid;
  gap: 10px;
}

.customer-book-choice-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.customer-book-choice-head span {
  color: var(--sf-teal-dark);
  font-weight: 900;
}

.customer-book-choice-head a {
  color: var(--sf-teal-dark);
  font-size: 0.84rem;
  font-weight: 900;
}

.customer-book-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.customer-book-option,
.customer-book-empty-option {
  position: relative;
  display: grid;
  gap: 4px;
  min-height: 82px;
  padding: 12px 76px 12px 12px;
  color: var(--sf-charcoal);
  text-align: left;
  text-decoration: none;
  background: var(--sf-white);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.14);
  border-radius: var(--sf-radius-sm);
  box-shadow: none;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.customer-book-option:hover,
.customer-book-empty-option:hover {
  border-color: rgb(var(--sf-primary-rgb, 13 59 59) / 0.32);
  box-shadow: var(--sf-shadow-card);
}

.customer-book-empty-option {
  align-content: center;
  color: var(--sf-teal-dark);
  font-weight: 900;
}

.customer-book-option strong {
  color: var(--sf-teal-dark);
  font-size: 0.98rem;
  line-height: 1.25;
}

.customer-book-option span {
  color: var(--sf-muted);
  font-size: 0.84rem;
}

.customer-book-option.is-selected {
  border-color: var(--sf-teal);
  background: var(--sf-sage-light);
  box-shadow: 0 0 0 2px rgb(var(--sf-primary-rgb, 13 59 59) / 0.1);
}

.customer-book-option.is-selected::after,
.customer-book-service-picker label.is-selected::after,
.customer-book-addon.is-selected::after {
  content: "Selected";
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 3px 8px;
  color: var(--sf-white);
  background: var(--sf-teal);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.2;
}

.customer-book-addon.is-selected::after {
  content: "Added";
}

.customer-book-service-picker {
  display: grid;
  gap: 12px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.customer-book-service-picker legend {
  padding: 0;
  margin: 0;
  color: var(--sf-teal-dark);
  font-weight: 900;
}

.customer-book-service-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.customer-book-service-picker label {
  position: relative;
  display: grid;
  align-content: start;
  min-height: 92px;
  /* Right padding reserves room for the floating "Selected" badge so it never
     overlaps the card text. */
  padding: 18px 62px 18px 16px;
  color: var(--sf-charcoal);
  background: var(--sf-white);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.14);
  border-radius: var(--sf-radius-sm);
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.customer-book-service-picker label:hover {
  border-color: rgb(var(--sf-primary-rgb, 13 59 59) / 0.32);
  box-shadow: var(--sf-shadow-card);
}

.customer-book-service-picker label.is-selected {
  border-color: var(--sf-teal);
  background: var(--sf-sage-light);
  box-shadow: 0 0 0 2px rgb(var(--sf-primary-rgb, 13 59 59) / 0.1);
}

.customer-book-service-picker label:focus-within,
.customer-book-option:focus-visible,
.customer-book-addon:focus-within {
  outline: 3px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.22);
  outline-offset: 2px;
}

.customer-book-service-picker input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.customer-book-service-picker span {
  display: grid;
  gap: 4px;
}

.customer-book-service-picker strong {
  color: var(--sf-teal-dark);
  font-size: 0.98rem;
  line-height: 1.25;
}

.customer-book-service-picker small {
  color: var(--sf-muted);
  font-weight: 700;
}

.customer-book-addons {
  gap: 8px;
}

.customer-book-choice-head small {
  color: var(--sf-muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.customer-book-addon-options {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.customer-book-addon {
  position: relative;
  display: grid;
  min-height: 72px;
  padding: 14px 72px 14px 16px;
  color: var(--sf-charcoal);
  background: var(--sf-white);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.14);
  border-radius: var(--sf-radius-sm);
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.customer-book-addon:hover {
  border-color: rgb(var(--sf-primary-rgb, 13 59 59) / 0.32);
  box-shadow: var(--sf-shadow-card);
}

.customer-book-addon.is-selected {
  border-color: var(--sf-teal);
  background: var(--sf-sage-light);
  box-shadow: 0 0 0 2px rgb(var(--sf-primary-rgb, 13 59 59) / 0.1);
}

.customer-book-addon input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.customer-book-addon span {
  display: grid;
  gap: 4px;
}

.customer-book-addon strong {
  color: var(--sf-teal-dark);
  font-size: 0.98rem;
  line-height: 1.25;
}

.customer-book-addon small,
.customer-book-addons p {
  color: var(--sf-muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.customer-book-addons p {
  margin: 0;
}

.customer-book-start-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ── In-account embedded checkout (/account#customer-book-details) ──────────
   Hosts the full booking flow inside the signed-in dashboard so Continue
   booking never leaves /account. The flow itself uses its normal base styles. */
.customer-book-details-panel {
  display: grid;
  gap: 14px;
}

.customer-book-details-back {
  justify-self: start;
  padding: 8px 16px;
  color: var(--sf-teal-dark);
  background: var(--sf-white);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.18);
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 800;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.customer-book-details-back:hover {
  border-color: rgb(var(--sf-primary-rgb, 13 59 59) / 0.4);
  box-shadow: var(--sf-shadow-card);
}

.customer-dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 4vw, 48px);
}

.customer-dashboard-kicker {
  margin: 0 0 6px;
  color: var(--sf-muted);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.customer-dashboard-subtitle {
  margin: 8px 0 0;
  color: var(--sf-muted);
  max-width: 620px;
}

.customer-account-loaded .customer-account-access,
.customer-account-loaded .customer-account-hero,
.customer-account-loaded .customer-account-panel {
  display: none;
}

/* Auth pre-check gate (see the anti-FOUC script in customer.html's <head>): while
   sf-auth-pending is set, a saved session exists but hasn't been verified yet.
   Hide the sign-in/marketing screen and show a neutral spinner instead of
   flashing "Welcome back, sign in" before the dashboard loads. */
html.sf-auth-pending body.customer-account-page .customer-account-access {
  display: none;
}

html.sf-auth-pending body.customer-account-page .customer-account-shell::before {
  content: "";
  display: block;
  width: 32px;
  height: 32px;
  margin: 96px auto;
  border: 3px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.15);
  border-top-color: var(--sf-teal-dark);
  border-radius: 50%;
  animation: sf-auth-spin 0.8s linear infinite;
}

@keyframes sf-auth-spin {
  to { transform: rotate(360deg); }
}

.customer-dashboard-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.customer-dashboard-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.customer-dashboard-stats a {
  display: grid;
  gap: 2px;
  padding: 14px 16px;
  background: var(--sf-sage-light);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: var(--sf-radius-sm);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.customer-dashboard-stats a:hover,
.customer-dashboard-stats a:focus-visible {
  border-color: rgba(24, 128, 73, 0.32);
  box-shadow: var(--sf-shadow-sm);
  transform: translateY(-1px);
  outline: none;
}

.customer-dashboard-stats strong {
  color: var(--sf-teal-dark);
  font-size: 1.55rem;
  line-height: 1;
}

.customer-dashboard-stats span {
  color: var(--sf-muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.customer-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(4, 26, 24, 0.46);
}

.customer-preview-modal[hidden] {
  display: none;
}

.customer-preview-card {
  box-sizing: border-box;
  width: min(520px, calc(100vw - 28px));
  max-height: min(720px, calc(100vh - 36px));
  overflow-y: auto;
  display: grid;
  gap: 14px;
  padding: 18px;
  color: var(--sf-teal-dark);
  background: var(--sf-white);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: var(--sf-radius-sm);
  box-shadow: 0 24px 68px rgba(4, 26, 24, 0.28);
}

.customer-preview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.1);
}

.customer-preview-head h2 {
  margin: 0;
  font-size: 1.28rem;
  letter-spacing: 0;
}

.customer-preview-head p {
  margin: 4px 0 0;
  color: var(--sf-muted);
}

.customer-preview-eyebrow {
  margin: 0 0 5px !important;
  color: var(--sf-teal) !important;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.customer-preview-close {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--sf-muted);
  background: var(--sf-sage-light);
  border: 0;
  border-radius: 50%;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.customer-preview-close:hover,
.customer-preview-close:focus-visible {
  color: var(--sf-teal-dark);
  outline: 2px solid rgba(24, 128, 73, 0.28);
}

.customer-preview-list {
  display: grid;
  gap: 10px;
}

.customer-preview-item {
  display: grid;
  gap: 4px;
  padding: 13px 14px;
  background: #f9fbfa;
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.1);
  border-radius: var(--sf-radius-sm);
}

.customer-preview-item strong {
  color: var(--sf-teal-dark);
}

.customer-preview-item span,
.customer-preview-empty {
  margin: 0;
  color: var(--sf-muted);
  font-size: 0.92rem;
}

.customer-preview-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 4px;
}

.customer-dashboard-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
  gap: 28px;
  align-items: start;
}

.customer-dashboard-section-primary,
.customer-dashboard-section-soft,
#account-history {
  grid-column: 1 / -1;
}

/* Support is a small, secondary affordance at the very bottom of the dashboard —
   accessible without competing with Book/Track/Account for attention. */
.customer-support-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  padding: 14px 16px;
  color: var(--sf-teal-dark);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  opacity: 0.8;
}

.customer-support-link:hover,
.customer-support-link:focus-visible {
  opacity: 1;
  text-decoration: underline;
}

.customer-support-link-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--sf-teal-dark);
}

.customer-support-link-icon svg {
  width: 100%;
  height: 100%;
}

.customer-dashboard-section {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.customer-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.customer-section-heading h3 {
  margin: 0;
}

.customer-section-heading span {
  display: inline-grid;
  place-items: center;
  min-width: 32px;
  height: 32px;
  padding: 0 9px;
  color: var(--sf-teal-dark);
  background: var(--sf-sage-light);
  border-radius: var(--sf-radius-pill);
  font-weight: 900;
}

.customer-track-accordion {
  gap: 0;
}

.customer-track-accordion-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  justify-content: initial;
  cursor: pointer;
  gap: 12px;
  list-style: none;
}

.customer-track-accordion-summary::-webkit-details-marker {
  display: none;
}

.customer-track-accordion-summary::after {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.16s ease;
}

.customer-track-accordion[open] .customer-track-accordion-summary::after {
  transform: rotate(225deg);
}

.customer-track-accordion > .customer-track-list,
.customer-track-accordion > .customer-card-list {
  margin-top: 12px;
}

.customer-card-list {
  display: grid;
  gap: 12px;
}

.customer-dashboard-section-primary .customer-card-list,
.customer-dashboard-section-soft .customer-card-list,
#account-history .customer-card-list {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.customer-request-card,
.customer-data-card,
.customer-empty-card {
  display: grid;
  gap: 10px;
  padding: 16px;
  background: var(--sf-white);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: var(--sf-radius-sm);
  box-shadow: var(--sf-shadow-soft);
}

.customer-request-card > div:first-child {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.customer-request-card strong,
.customer-data-card strong {
  color: var(--sf-teal-dark);
  font-weight: 900;
}

.customer-saved-detail-card {
  gap: 6px;
}

.customer-saved-detail-card small {
  color: var(--sf-muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

/* Excludes the status pill: it carries its own colour (.customer-track-pill-*),
   and this muted rule out-specifies the single-class pill colours, which greyed
   out the "Cancelled" (white-on-red) and "Completed" (green) text. */
.customer-request-card > div:first-child span:not(.customer-track-pill),
.customer-data-card span,
.customer-empty-card p {
  color: var(--sf-muted);
}

.customer-request-card dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.customer-request-card dt {
  color: var(--sf-muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.customer-request-card dd {
  margin: 0;
  color: var(--sf-charcoal);
  font-weight: 800;
}

.customer-request-card .button,
.customer-empty-card .button {
  width: fit-content;
  margin-top: 2px;
}

.customer-track-list {
  display: grid;
  gap: 14px;
}

.customer-track-card {
  display: grid;
  gap: 16px;
  padding: 18px;
  background: var(--sf-white);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: var(--sf-radius-sm);
  box-shadow: var(--sf-shadow-soft);
}

.customer-track-card-head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  padding-right: 24px;
  cursor: pointer;
  list-style: none;
}

.customer-track-card-head::-webkit-details-marker {
  display: none;
}

.customer-track-card-head::marker {
  display: none;
}

.customer-track-card-head::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 8px;
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.16s ease;
}

.customer-track-card[open] > .customer-track-card-head::after {
  transform: rotate(225deg);
}

.customer-track-card-head > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.customer-track-card-head strong {
  color: var(--sf-teal-dark);
  font-size: 1.28rem;
  line-height: 1.15;
}

.customer-track-card-head p {
  margin: 0;
  color: var(--sf-muted);
  line-height: 1.4;
}

.customer-track-card-summary {
  display: grid;
  justify-items: end;
  align-content: start;
  gap: 8px;
}

.customer-track-card-summary > strong {
  color: var(--sf-teal-dark);
  font-size: 1.08rem;
  line-height: 1.1;
  white-space: nowrap;
}

.customer-track-card-preview {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.customer-track-card[open] > .customer-track-card-head .customer-track-card-preview {
  display: none;
}

.customer-track-card[open] > .customer-track-card-head .customer-track-pill {
  display: none;
}

.customer-track-card-preview div {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  background: var(--sf-sage-light);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.08);
  border-radius: 12px;
}

.customer-track-card-preview span {
  color: var(--sf-muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.customer-track-card-preview strong {
  color: var(--sf-teal-dark);
  font-size: 0.9rem;
  line-height: 1.25;
}

.customer-track-card-body {
  display: grid;
  gap: 16px;
}

.customer-track-status-hero {
  display: grid;
  gap: 14px;
  padding: 16px;
  background: var(--sf-sage-light);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.10);
  border-radius: var(--sf-radius-sm);
}

.customer-track-status-hero h3 {
  margin: 2px 0 4px;
  color: var(--sf-teal-dark);
  font-size: 1.35rem;
  line-height: 1.1;
}

.customer-track-status-hero p {
  margin: 0;
  color: var(--sf-muted);
  line-height: 1.45;
}

.customer-track-quickrow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.customer-track-quick {
  display: grid;
  gap: 4px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.08);
  border-radius: 12px;
}

.customer-track-concierge {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.customer-track-concierge-avatar {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #dcebe3;
  color: var(--sf-teal-dark);
  display: grid;
  place-items: center;
  overflow: visible;
  font-weight: 900;
}

.customer-track-concierge-avatar img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  display: block;
}

.customer-track-concierge-avatar em {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #208a5b;
  color: #fff;
  border: 2px solid #fff;
  font-size: 0.62rem;
  font-style: normal;
  line-height: 1;
}

.customer-track-quick span,
.customer-track-quick small {
  color: var(--sf-muted);
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.customer-track-quick strong {
  color: var(--sf-teal-dark);
  font-size: 0.98rem;
  line-height: 1.2;
}

.customer-track-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 6px 10px;
  color: var(--sf-teal-dark);
  background: var(--sf-sage-light);
  border-radius: var(--sf-radius-pill);
  font-size: 0.78rem;
  font-weight: 900;
  white-space: nowrap;
}

.customer-track-pill-completed {
  color: #0f5132;
  background: #d8f3e1;
}

.customer-track-pill-cancelled {
  color: var(--sf-white);
  background: #b4232f;
}

.customer-track-progress-wrap {
  width: 100%;
  overflow: visible;
  padding-bottom: 3px;
  -webkit-overflow-scrolling: touch;
}

.customer-track-timeline {
  display: grid;
  grid-template-columns: repeat(8, minmax(86px, 1fr));
  gap: 8px;
  min-width: 720px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.customer-track-timeline li {
  display: grid;
  grid-template-rows: 12px auto;
  gap: 6px;
  min-width: 0;
}

.customer-track-timeline li span {
  display: block;
  height: 8px;
  border-radius: var(--sf-radius-pill);
  background: rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
}

.customer-track-timeline li.is-done span,
.customer-track-timeline li.is-active span {
  background: #208a5b;
}

.customer-track-timeline li.is-active span {
  box-shadow: 0 0 0 4px rgba(32, 138, 91, 0.14);
}

.customer-track-timeline.is-cancellation-return li.is-cancel-done span {
  background: #d92d3a;
}

.customer-track-timeline.is-cancellation-return li.is-cancel-active span {
  background: #b4232f;
  box-shadow: 0 0 0 4px rgba(180, 35, 47, 0.16);
}

.customer-track-timeline em {
  color: var(--sf-muted);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .customer-track-timeline em {
    overflow: hidden;
    font-size: 0.58rem;
    line-height: 1.1;
    text-align: center;
    text-overflow: clip;
    white-space: nowrap;
  }
}

.customer-track-timeline li.is-active em {
  color: var(--sf-teal-dark);
}

.customer-track-timeline.is-cancellation-return li.is-cancel-done em {
  color: #842029;
}

.customer-track-timeline.is-cancellation-return li.is-cancel-active em {
  color: #842029;
}

.customer-track-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.customer-track-facts div {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 12px;
  background: var(--sf-sage-light);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.08);
  border-radius: var(--sf-radius-sm);
}

.customer-track-facts dt {
  color: var(--sf-muted);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.customer-track-facts dd {
  margin: 0;
  color: var(--sf-charcoal);
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.customer-track-facts-important {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.customer-track-facts-important div.is-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  grid-column: 1 / -1;
  background: #fff;
  box-shadow: 0 8px 18px rgb(var(--sf-primary-rgb, 13 59 59) / 0.06);
}

.customer-track-facts-important div.is-total dd {
  font-size: 1.05rem;
  color: var(--sf-teal-dark);
}

.customer-track-panel-section {
  display: grid;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.1);
}

.customer-track-subsection {
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.1);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

.customer-track-subsection-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}

.customer-track-subsection-head::-webkit-details-marker {
  display: none;
}

.customer-track-subsection-head::marker {
  display: none;
}

.customer-track-subsection-head strong {
  color: var(--sf-teal-dark);
  font-size: 0.94rem;
}

.customer-track-subsection-head span {
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.16s ease;
}

.customer-track-subsection[open] > .customer-track-subsection-head span {
  transform: rotate(225deg);
}

.customer-track-subsection-body {
  display: grid;
  gap: 10px;
  padding: 0 14px 14px;
}

.customer-track-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.customer-track-section-head strong {
  color: var(--sf-teal-dark);
  font-size: 1rem;
}

.customer-track-section-head span,
.customer-track-muted {
  margin: 0;
  color: var(--sf-muted);
  font-size: 0.88rem;
  line-height: 1.4;
}

.customer-track-panel-live .track-live-location-panel {
  margin: 0;
  box-shadow: none;
}

.customer-track-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.customer-track-photo-tile {
  display: grid;
  gap: 6px;
  color: var(--sf-teal-dark);
  font-size: 0.76rem;
  font-weight: 850;
  text-decoration: none;
}

.customer-track-photo-tile img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  background: var(--sf-sage-light);
}

.customer-track-photo-tile span {
  overflow-wrap: anywhere;
}

.customer-track-help {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.customer-track-help span {
  color: var(--sf-teal-dark);
  font-weight: 900;
}

.customer-empty-card {
  background: var(--sf-sage-light);
  box-shadow: none;
}

.customer-empty-card p {
  margin: 0;
}

.hero-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 20px;
}

.hero-trust-row span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 700;
}

.hero-trust-row svg {
  width: 18px;
  height: 18px;
  color: var(--brand);
  flex-shrink: 0;
}

.section-heading.center {
  text-align: center;
  margin-inline: auto;
}

.how-it-works-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 42px 0 0;
  padding: 0;
  list-style: none;
}

.how-it-works-grid li {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 0 18px;
  text-align: center;
}

.how-it-works-grid li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 42px;
  left: calc(50% + 48px);
  width: calc(100% - 96px);
  border-top: 2px dashed rgb(var(--sf-primary-rgb, 13 59 59) / 0.22);
}

.step-number {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-bottom: 6px;
  color: var(--sf-white);
  background: var(--sf-teal);
  border-radius: 50%;
  font-size: 0.74rem;
  font-weight: 900;
}

.step-icon {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  margin-bottom: 8px;
  color: var(--sf-teal-dark);
  background: var(--sf-sage-light);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: 50%;
  box-shadow: var(--sf-shadow-soft);
}

.step-icon svg {
  width: 26px;
  height: 26px;
}

.how-it-works-grid strong {
  color: var(--sf-teal-dark);
  font-size: 1.05rem;
  font-weight: 900;
}

.how-it-works-grid p {
  margin: 0;
  max-width: 230px;
  color: var(--sf-muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

.pricing-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 34px;
}

.pricing-card {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 30px;
  background: var(--sf-white);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: var(--sf-radius-md);
  box-shadow: var(--sf-shadow-card);
}

.pricing-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 6px;
  background: var(--sf-sage-light);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: 50%;
}

.pricing-icon svg {
  width: 24px;
  height: 24px;
}

.pricing-icon-fuel { color: var(--brand-dark); }
.pricing-icon-wash { color: #4f8f6b; }
.pricing-icon-inspect { color: var(--accent); }

.pricing-card h3 {
  margin: 0;
  color: var(--sf-teal-dark);
  font-size: 1.22rem;
  font-weight: 900;
}

.pricing-card p {
  margin: 0;
  color: var(--sf-muted);
  font-size: 0.94rem;
  line-height: 1.55;
}

.pricing-from {
  margin-top: 4px !important;
  color: var(--sf-teal-dark) !important;
  font-size: 0.95rem;
}

.pricing-from strong {
  color: var(--sf-teal-dark);
  font-size: 1.28rem;
  font-weight: 900;
}

.pricing-from span {
  color: var(--muted);
  font-size: 0.82rem;
}

.pricing-includes {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.pricing-includes li {
  position: relative;
  padding-left: 18px;
  color: var(--muted);
  font-size: 0.86rem;
}

.pricing-includes li::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  width: 7px;
  height: 7px;
  background: var(--brand);
  border-radius: 50%;
}

.pricing-package-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.pricing-package-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.08);
  font-size: 0.88rem;
}

.pricing-package-list li:last-child {
  border-bottom: 0;
}

.pricing-package-list span {
  color: var(--brand-dark);
  font-weight: 700;
}

.pricing-package-list strong {
  color: var(--brand-dark) !important;
}

.pricing-note {
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: 0.8rem !important;
}

.pricing-warning {
  margin: 0 !important;
  padding: 8px 10px;
  color: #8a5a00;
  background: #fff7e6;
  border: 1px solid #f0d9a8;
  border-radius: 6px;
  font-size: 0.8rem !important;
  font-weight: 700;
}

.pricing-warning a {
  color: inherit;
  text-decoration: underline;
}

.pricing-disclaimer {
  max-width: 880px;
  margin: 28px auto 0;
  color: var(--muted);
  font-size: 0.84rem;
  text-align: center;
}

.final-cta-main {
  display: flex;
  align-items: center;
  gap: 18px;
}

.final-cta-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  flex-shrink: 0;
  color: var(--sf-white);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
}

.final-cta-icon svg {
  width: 26px;
  height: 26px;
}

.final-cta-main strong {
  display: block;
  color: var(--sf-white);
  font-size: 1.25rem;
  font-weight: 900;
}

.final-cta-main p {
  margin: 2px 0 0;
  color: rgba(255, 255, 255, 0.78);
}

.final-cta-portals {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Desktop shows the full CTA row; mobile uses the compact customer actions. */
.final-cta-portals--mobile { display: none; }

@media (max-width: 760px) {
  .final-cta-portals--desktop { display: none; }
  .final-cta-portals--mobile { display: flex; }
}

.portal-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 12px 20px;
  color: var(--sf-white);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--sf-radius-sm);
  font-weight: 900;
}

.portal-button:hover {
  color: var(--sf-teal-dark);
  background: var(--sf-white);
  border-color: var(--sf-white);
}

/* "Join the Team" gets a filled dark-green treatment so the recruiting CTA leads
   the trio; Worker/Admin stay outlined. */
.portal-button.portal-button-primary {
  color: var(--sf-white);
  background: linear-gradient(135deg, var(--sf-green), var(--sf-green-dark));
  border-color: var(--sf-green-dark);
}

.portal-button.portal-button-primary:hover {
  color: var(--sf-white);
  background: linear-gradient(135deg, #239155, var(--sf-green-dark));
  border-color: var(--sf-green-dark);
}

.portal-button svg {
  width: 18px;
  height: 18px;
}

.portal-closing-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  width: min(var(--sf-page-width), calc(100% - 40px));
  margin: 56px auto 0;
  padding: clamp(26px, 4vw, 40px);
  color: var(--sf-white);
  background: linear-gradient(135deg, var(--sf-teal), var(--sf-teal-dark));
  border-radius: var(--sf-radius-md);
  box-shadow: var(--sf-shadow-card);
}

@media (max-width: 900px) {
  .worker-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    margin-top: 18px;
  }
}

.pricing-button {
  justify-content: center;
  margin-top: 10px;
  color: var(--sf-white);
  border-radius: var(--sf-radius-sm);
}

.pricing-button-fuel,
.pricing-button-wash,
.pricing-button-inspect {
  color: var(--sf-white);
  background: linear-gradient(135deg, var(--sf-green), var(--sf-green-dark));
  border-color: var(--sf-green-dark);
}

.safety-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin-top: 34px;
  padding: 30px;
  background: var(--sf-white);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: var(--sf-radius-md);
  box-shadow: var(--sf-shadow-card);
}

.safety-row > div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  align-items: start;
  padding-right: 18px;
  border-right: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.1);
}

.safety-row > div:last-child {
  padding-right: 0;
  border-right: 0;
}

.safety-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--sf-teal-dark);
  background: var(--sf-sage-light);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: var(--sf-radius-sm);
}

.safety-icon svg {
  width: 20px;
  height: 20px;
}

.safety-row strong {
  align-self: center;
  color: var(--sf-teal-dark);
  font-size: 0.98rem;
  font-weight: 900;
}

.safety-row p {
  grid-column: 2;
  margin: 0;
  color: var(--sf-muted);
  font-size: 0.86rem;
  line-height: 1.5;
}

/* Applicant background-check (Checkr) badges */
.checkr-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  vertical-align: middle;
  white-space: nowrap;
}
.checkr-clear {
  color: #0f7a3d;
  background: #e6f6ec;
  border: 1px solid #bfe6cd;
}
.checkr-consider {
  color: #b42318;
  background: #fdecea;
  border: 1px solid #f4c7c0;
}
.checkr-pending {
  color: #9a6700;
  background: #fff6e5;
  border: 1px solid #f3dca0;
}
.checkr-start-btn {
  margin-top: 4px;
}

/* Join the Team page styles moved to hiring.css (2026-07-08). */

@media (max-width: 980px) {
  .how-it-works-grid,
  .pricing-card-grid,
  .safety-row {
    grid-template-columns: 1fr;
  }

  .customer-account-grid {
    grid-template-columns: 1fr;
  }

  .customer-account-panel,
  .customer-account-form.is-compact,
  .customer-dashboard-layout,
  .customer-dashboard-section-primary .customer-card-list,
  .customer-dashboard-section-soft .customer-card-list {
    grid-template-columns: 1fr;
  }

  .customer-dashboard-section-primary,
  .customer-dashboard-section-soft {
    grid-column: auto;
  }

  .how-it-works-grid li:not(:last-child)::after {
    display: none;
  }
}

/* On phones, lay each step out as a compact row (number + icon left, text
   right) instead of a tall centered stack, so the four steps don't each take
   a full screen. */
@media (max-width: 640px) {
  .how-it-works-grid {
    gap: 14px;
    margin-top: 28px;
  }

  .how-it-works-grid li {
    grid-template-columns: auto 1fr;
    justify-items: start;
    align-items: center;
    gap: 4px 14px;
    padding: 0;
    text-align: left;
  }

  .step-number {
    grid-row: 1 / 3;
    margin-bottom: 0;
    align-self: center;
  }

  .step-icon {
    display: none;
  }

  .how-it-works-grid strong,
  .how-it-works-grid p {
    grid-column: 2;
    max-width: none;
  }

  .customer-account-prompt {
    align-items: stretch;
    flex-direction: column;
  }

  .customer-account-prompt .button,
  .customer-account-card .button,
  .customer-dashboard-actions .button,
  .customer-request-card .button,
  .customer-empty-card .button {
    width: 100%;
  }

  .customer-dashboard-header {
    flex-direction: column;
  }

  .customer-dashboard-actions {
    width: 100%;
  }

  .customer-dashboard-stats,
  .customer-request-card dl {
    grid-template-columns: 1fr 1fr;
  }
}

.trust-service-bar,
.returning-shortcut,
.availability-section,
.landing-final-cta,
.returning-flow-shell {
  width: min(var(--sf-page-width), calc(100% - 40px));
  margin-inline: auto;
}

.trust-service-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: 18px;
  background: #ffffff;
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.1);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgb(var(--sf-primary-rgb, 13 59 59) / 0.06);
}

.trust-service-bar div {
  display: grid;
  gap: 4px;
  padding: 18px 20px;
  border-right: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.08);
}

.trust-service-bar div:last-child {
  border-right: 0;
}

.trust-service-bar strong {
  color: var(--brand-dark);
}

.trust-service-bar span,
.availability-section p {
  color: var(--muted);
}

.returning-flow-card {
  background: #ffffff;
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: 10px;
  box-shadow: 0 12px 34px rgb(var(--sf-primary-rgb, 13 59 59) / 0.05);
}

.returning-shortcut,
.availability-section,
.landing-final-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 72px;
  padding: clamp(24px, 4vw, 44px);
  background: linear-gradient(135deg, rgb(var(--sf-primary-rgb, 13 59 59) / 0.96), rgba(0, 44, 44, 0.96));
  border-radius: 10px;
  color: #ffffff;
  box-shadow: var(--shadow);
}

.returning-shortcut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.returning-shortcut p,
.availability-section p,
.landing-final-cta p {
  max-width: 760px;
  color: rgba(255, 255, 255, 0.82);
}

.returning-shortcut .button,
.landing-final-cta .button.primary {
  background: var(--accent);
  border-color: var(--accent);
}

.safety-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.availability-section {
  background: #ffffff;
  color: var(--brand-dark);
}

.availability-section p {
  color: var(--muted);
  font-size: 1.08rem;
}


.returning-flow-shell {
  display: grid;
  gap: 18px;
  padding: 38px 0 72px;
}

.returning-flow-hero {
  padding: clamp(28px, 5vw, 56px);
  background: #ffffff;
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: 10px;
  box-shadow: var(--shadow);
}

.returning-flow-card {
  padding: clamp(22px, 4vw, 36px);
}

.returning-step-heading {
  display: flex;
  align-items: center;
  gap: 14px;
}

.returning-step-heading span {
  padding: 7px 10px;
  color: #ffffff;
  background: var(--brand);
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 900;
}

.returning-step-heading h2 {
  margin: 0;
  color: var(--brand-dark);
}

.returning-verification-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: end;
  gap: 14px;
  margin-top: 18px;
}

.returning-picker-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0;
}

.returning-option-card {
  display: grid;
  gap: 8px;
  padding: 18px;
  background: var(--surface-soft);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: 10px;
}

.returning-option-card.is-selected {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(0, 119, 102, 0.12);
}

.returning-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.returning-inline-form {
  display: grid;
  gap: 14px;
  margin-top: 16px;
  padding: 18px;
  background: #ffffff;
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: 10px;
}

@media (max-width: 980px) {
  .trust-service-bar,
  .safety-grid,
  .returning-verification-form,
  .returning-picker-grid,
  .returning-option-grid {
    grid-template-columns: 1fr;
  }

  .trust-service-bar div {
    border-right: 0;
    border-bottom: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.08);
  }

  .trust-service-bar div:last-child {
    border-bottom: 0;
  }

  .returning-shortcut {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 760px) {
  .mobile-menu-button {
    display: inline-flex;
  }

  .landing-header {
    align-items: center;
  }

  .landing-header .nav {
    display: none;
    width: 100%;
    padding-top: 12px;
  }

  .landing-header .nav.is-open {
    display: grid;
  }

  .landing-header .nav a {
    width: 100%;
  }

  .site-header .nav-cta {
    margin-left: 0;
  }

  .returning-flow-hero h1 {
    font-size: 2.55rem;
  }
}

/* Shared booking flow structure */
.booking-page {
  min-height: 100vh;
}

.booking-flow-shell {
  display: grid;
  gap: 22px;
  width: min(var(--sf-page-width), calc(100% - 40px));
  margin: 26px auto 74px;
}

.booking-flow-hero {
  display: grid;
  grid-template-columns: minmax(420px, 0.95fr) minmax(420px, 1.05fr);
  align-items: stretch;
  overflow: hidden;
  padding: 0;
  background: var(--sf-white);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: var(--sf-radius-md);
  box-shadow: var(--sf-shadow-card);
}

.booking-flow-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(42px, 6vw, 76px);
}

.booking-flow-hero-image {
  position: relative;
  margin: 0;
  min-height: 100%;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgb(var(--sf-primary-rgb, 13 59 59) / 0.04), rgb(var(--sf-primary-rgb, 13 59 59) / 0.18)),
    var(--sf-sage-light);
}

.booking-flow-hero-image img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 500px;
  object-fit: cover;
  object-position: center;
}

.booking-flow-hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.14),
    rgba(255, 255, 255, 0)
  );
  pointer-events: none;
}

.booking-flow-hero h1 {
  max-width: 720px;
  margin: 0;
  color: var(--sf-teal-dark);
  font-size: clamp(2.4rem, 5vw, 4.4rem);
  line-height: 1;
  letter-spacing: -0.035em;
}

.booking-flow-hero p:not(.eyebrow) {
  max-width: 660px;
  color: var(--sf-muted);
  font-size: 1.08rem;
  line-height: 1.7;
}

.booking-flow {
  display: grid;
  gap: 18px;
}

/* ─── Accordion booking flow (progress rail + cards + summary sidebar) ───── */

.booking-progress-rail {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0;
  margin: 0;
  padding: 24px clamp(12px, 2vw, 28px);
  background: var(--sf-white);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: var(--sf-radius-md);
  box-shadow: var(--sf-shadow-card);
  list-style: none;
  overflow-x: auto;
}

.booking-progress-rail li {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  flex: 1 1 0;
  min-width: 88px;
  text-align: center;
}

.booking-progress-rail li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 24px;
  left: calc(50% + 40px);
  width: calc(100% - 80px);
  border-top: 2px dashed rgb(var(--sf-primary-rgb, 13 59 59) / 0.22);
}

.booking-progress-rail li.is-complete:not(:last-child)::after {
  border-top-color: var(--sf-teal);
  border-top-style: solid;
}

.rail-step {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  color: var(--sf-teal-dark);
  background: var(--sf-sage-light);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.16);
  border-radius: 50%;
  cursor: pointer;
}

.rail-step svg {
  width: 20px;
  height: 20px;
}

.rail-step:disabled {
  color: var(--muted);
  cursor: not-allowed;
  opacity: 0.55;
}

.rail-number {
  position: absolute;
  top: -6px;
  left: -6px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: var(--sf-white);
  background: var(--sf-muted);
  border-radius: 50%;
  font-size: 0.64rem;
  font-weight: 900;
}

.booking-progress-rail li.is-active .rail-step {
  color: var(--sf-white);
  background: var(--sf-teal);
  border-color: var(--sf-teal);
  box-shadow: 0 0 0 4px rgb(var(--sf-primary-rgb, 13 59 59) / 0.14);
}

.booking-progress-rail li.is-active .rail-number {
  color: var(--sf-white);
  background: var(--sf-coral);
}

.booking-progress-rail li.is-complete .rail-step {
  color: var(--sf-white);
  background: var(--sf-teal);
  border-color: var(--sf-teal);
}

.booking-progress-rail li.is-complete .rail-number {
  background: var(--sf-teal-dark);
}

.rail-label {
  max-width: 96px;
  color: var(--sf-muted);
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.25;
}

.booking-progress-rail li.is-active .rail-label {
  color: var(--sf-teal-dark);
}

.booking-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: 22px;
  align-items: start;
}

.booking-cards {
  display: grid;
  gap: 16px;
}

/* Final Review & Payment step = focused, full-width checkout. The summary
   sidebar is hidden here (its info already lives in the payment card); earlier
   steps keep it for progress/edit navigation. */
.booking-layout.is-checkout {
  grid-template-columns: 1fr;
}
.booking-layout.is-checkout .booking-summary-sidebar {
  display: none !important;
}
/* On desktop the promo input normally lives in the (now hidden) sidebar, so
   surface the payment-card promo on the checkout step instead. */
.booking-layout.is-checkout .payment-promo-wrap {
  display: block;
}

.booking-accordion-card {
  overflow: hidden;
  background: var(--sf-white);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: var(--sf-radius-md);
  box-shadow: var(--sf-shadow-card);
}

/* The expanded step must not clip the date picker's calendar popup, which is
   absolutely positioned and can extend past the card's bottom edge (Schedule
   step). Collapsed cards keep overflow:hidden for clean rounded corners.
   Higher specificity (0,2,0) also wins over the mobile-polish override. */
.booking-accordion-card.is-active {
  overflow: visible;
}

.booking-accordion-card.is-locked {
  opacity: 0.6;
}

.booking-accordion-header {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 20px 22px;
  text-align: left;
  background: var(--sf-white);
  border: 0;
  cursor: pointer;
}

.booking-accordion-header:disabled {
  cursor: not-allowed;
}

.accordion-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  color: var(--sf-teal-dark);
  background: var(--sf-sage-light);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: 50%;
}

.booking-accordion-card.is-complete .accordion-icon {
  color: var(--sf-white);
  background: var(--sf-teal);
  border-color: var(--sf-teal);
}

.accordion-icon svg {
  width: 18px;
  height: 18px;
}

.accordion-heading {
  display: grid;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.accordion-heading strong {
  color: var(--sf-teal-dark);
  font-size: 1.04rem;
  font-weight: 900;
}

.accordion-heading small {
  overflow: hidden;
  color: var(--sf-muted);
  font-size: 0.84rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.accordion-chevron {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

.booking-accordion-card.is-active .accordion-chevron {
  transform: rotate(-135deg);
}

.booking-accordion-body {
  display: none;
  padding: 0 24px 26px;
}

.booking-accordion-card.is-active .booking-accordion-body {
  display: grid;
  gap: 18px;
}

.booking-summary-sidebar {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 16px;
  padding: 26px;
  background: var(--sf-white);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: var(--sf-radius-md);
  box-shadow: var(--sf-shadow-card);
}

/* The collapse toggle is mobile-only; on desktop the summary is always expanded. */
.booking-summary-toggle { display: none; }

/* Smooth-scroll a newly-opened step so its header lands just below the sticky
   nav instead of jumping under it. */
.booking-accordion-card { scroll-margin-top: 90px; }

.booking-summary-sidebar h3 {
  margin: 0;
  color: var(--sf-teal-dark);
  font-size: 1.22rem;
  font-weight: 900;
}

.summary-rows {
  display: grid;
  gap: 12px;
}

.summary-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.08);
}

.summary-row-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--sf-teal-dark);
  background: var(--sf-sage-light);
  border-radius: 50%;
}

.summary-row-icon svg {
  width: 15px;
  height: 15px;
}

.summary-row-body {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.summary-row-body strong {
  color: var(--sf-teal-dark);
  font-size: 0.88rem;
  font-weight: 900;
}

.summary-row-body span {
  overflow: hidden;
  color: var(--sf-muted);
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.summary-edit {
  padding: 5px 11px;
  color: var(--sf-teal);
  background: var(--sf-white);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.22);
  border-radius: var(--sf-radius-pill);
  font-size: 0.72rem;
  font-weight: 900;
  cursor: pointer;
}

/* Promo code control + applied discount in the Booking Summary. */
.summary-promo {
  margin: 12px 0;
  padding-top: 12px;
  border-top: 1px solid var(--line, #e5e7eb);
}
.summary-promo-input {
  display: flex;
  gap: 8px;
}
.summary-promo-input input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line, #d1d5db);
  border-radius: 8px;
  font: inherit;
  font-size: 0.95rem;
  text-transform: uppercase;
}
.summary-promo-input .button {
  flex: 0 0 auto;
  /* Beat the small-phone rule (.button { width: 100% } @ ≤420px) that otherwise
     expands Apply and squeezes the promo input to nothing. */
  width: auto;
  padding: 10px 16px;
}
.summary-promo-input input { width: auto; }
.summary-promo-msg {
  margin: 6px 0 0;
  min-height: 1em;
  font-size: 0.82rem;
  color: var(--danger, #dc2626);
}
.summary-promo.is-applied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.summary-promo-chip {
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--sf-green, #1f9d57);
}
.summary-promo-remove {
  background: none;
  border: 0;
  padding: 4px;
  color: var(--muted, #6b7280);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
}

.mobile-booking-summary-bar {
  display: none;
}

.customer-promo-card {
  gap: 10px;
}

.customer-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.customer-card-actions .button {
  min-height: 38px;
  padding: 8px 12px;
  font-size: 0.85rem;
}

.customer-card-actions .button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.customer-promo-code {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  background: rgb(var(--sf-primary-rgb, 13 59 59) / 0.08);
  color: var(--sf-teal-dark);
  font-weight: 800;
  padding: 6px 10px;
}

.customer-promo-card .button {
  width: fit-content;
}
.summary-discount-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--sf-green, #1f9d57);
}

/* Promo control + discount line shown inside the Payment Authorization step. */
.payment-promo-wrap { margin-top: 2px; }
.payment-promo-wrap .summary-promo { margin: 0; }
.review-summary-list .payment-promo-line dt,
.review-summary-list .payment-promo-line dd {
  color: var(--sf-green, #1f9d57);
  font-weight: 800;
}

/* One promo input per screen: desktop uses the always-visible summary sidebar;
   mobile (where the sidebar collapses) uses the Payment Authorization step. The
   discount line + total still show in both places. */
@media (max-width: 980px) {
  .summary-promo-wrap { display: none; }
}
@media (min-width: 981px) {
  .payment-promo-wrap { display: none; }
}

.summary-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 6px;
}

.summary-total-row small {
  display: block;
  color: var(--muted);
  font-size: 0.74rem;
}

.summary-total-amount {
  color: var(--sf-teal-dark);
  font-size: 1.6rem;
  font-weight: 900;
}

.summary-jump-review {
  width: 100%;
  justify-content: center;
}

.summary-secure-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  text-align: center;
}

@media (max-width: 980px) {
  .booking-flow-hero {
    grid-template-columns: 1fr;
  }

  .booking-flow-hero-image {
    min-height: 240px;
  }

  .booking-layout {
    grid-template-columns: 1fr;
  }

  .booking-summary-sidebar {
    position: static;
    order: -1;
    padding: 0;
    gap: 0;
    overflow: hidden;
  }
  .booking-summary-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 14px 18px;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
  }
  .booking-summary-toggle-label { font-weight: 900; color: var(--sf-teal-dark); }
  .booking-summary-toggle-total { margin-left: auto; font-weight: 900; color: var(--sf-teal-dark); }
  .booking-summary-chevron { transition: transform 0.2s; color: var(--sf-teal-dark); }
  .booking-summary-sidebar.is-open .booking-summary-chevron { transform: rotate(180deg); }
  .booking-summary-body { display: none; padding: 0 18px 22px; }
  .booking-summary-sidebar.is-open .booking-summary-body { display: grid; gap: 16px; }
  .booking-summary-body h3 { display: none; }

  .mobile-booking-summary-bar {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 80;
    width: calc(100% - 24px);
    min-height: 58px;
    /* Flex row, vertically centred: the label stack on the left, the amount on
       the right. (The old grid + grid-row:span trick never centred reliably.) */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.16);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 -10px 28px rgb(var(--sf-primary-rgb, 13 59 59) / 0.16);
    color: var(--sf-teal-dark);
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
    text-align: left;
  }

  .mobile-booking-summary-bar .mbs-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .mobile-booking-summary-bar .mbs-title,
  .mobile-booking-summary-bar .mbs-hint {
    font-size: 0.76rem;
    font-style: normal;
    color: var(--text-2);
  }

  .mobile-booking-summary-bar strong {
    flex: none;
    font-size: 1.15rem;
    font-weight: 900;
  }

  .booking-progress-rail {
    justify-content: flex-start;
  }

  .booking-progress-rail li {
    min-width: 78px;
  }
}

.booking-progress {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.booking-progress li {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 14px 10px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.1);
  border-radius: 10px;
}

.booking-progress span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--brand);
  background: var(--surface-soft);
  border-radius: 50%;
  font-size: 0.84rem;
  font-weight: 900;
}

.booking-progress strong {
  overflow: hidden;
  color: inherit;
  font-size: 0.86rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.booking-progress li.is-current {
  color: var(--brand-dark);
  border-color: rgba(0, 119, 102, 0.48);
  box-shadow: 0 0 0 3px rgba(0, 119, 102, 0.12);
}

.booking-progress li.is-current span,
.booking-progress li.is-complete span {
  color: #ffffff;
  background: var(--brand);
}

.booking-step-card {
  display: grid;
  gap: 18px;
  padding: clamp(24px, 4vw, 42px);
  background: #ffffff;
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: 10px;
  box-shadow: var(--shadow);
}

.booking-step-kicker {
  width: fit-content;
  padding: 7px 10px;
  color: #ffffff;
  background: var(--brand);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.booking-step-card h2 {
  margin: 0;
  color: var(--brand-dark);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
}

.booking-step-card p {
  max-width: 760px;
  color: var(--muted);
}

.booking-step-fields {
  display: grid;
  gap: 18px;
}

.booking-field-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.booking-suggestion-strip {
  display: grid;
  gap: 10px;
}
.booking-suggestion-strip:empty {
  display: none;
}
.booking-suggestion-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(31, 122, 69, .22);
  border-radius: 10px;
  background: #f3faf5;
}
.booking-suggestion-card span {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.booking-suggestion-card strong {
  color: var(--brand-dark);
}
.booking-suggestion-card small {
  color: var(--muted);
}

/* Up-front card-hold notice under the fuel preference (amber callout). */
.fuel-buffer-note {
  margin: 12px 0 0;
  padding: 12px 14px;
  background: #fff8e8;
  border: 1px solid #e7c46a;
  border-radius: 12px;
  color: #6b4e16;
  font-size: 0.9rem;
  line-height: 1.45;
}
.fuel-buffer-note[hidden] { display: none; }
.fuel-buffer-note strong { color: #5a3f0e; }

/* Book Now: returning-customer saved address/vehicle pickers */
.booknow-saved-block { margin-bottom: 18px; }
.booknow-welcome {
  margin: 0 0 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #e6f4ea;
  border: 1px solid #cfe6d8;
  color: #15803d;
  font-weight: 700;
  font-size: .9rem;
}

/* "Customer choice" gas-station picker (Service Details step) */
.station-picker {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #e2e9e5;
}
.station-picker-head strong {
  display: block;
  color: var(--brand-dark);
  font-weight: 800;
  margin-bottom: 2px;
}
.station-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin-top: 8px;
  border: 1px solid #d8e1dc;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.station-option:hover { border-color: var(--brand, #1f7a45); }
.station-option.is-selected {
  border-color: var(--brand, #1f7a45);
  background: #f1f8f3;
}
.station-option input[type="radio"] {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  accent-color: var(--brand, #1f7a45);
}
.station-option-info { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.station-option-name { font-weight: 700; color: var(--ink); }
.station-option-addr { font-size: .8rem; color: #6b7280; }
.station-badge {
  flex: 0 0 auto;
  font-size: .78rem;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.station-badge--free { background: #e6f4ea; color: #15803d; }
.station-badge--fee { background: #fef3e2; color: #b45309; }
.station-search {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.station-search input {
  flex: 1 1 200px;
  min-width: 0;
  min-height: 44px;
  padding: 10px 13px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid #d8e1dc;
  border-radius: 8px;
  font: inherit;
}
.station-search .button { flex: 0 0 auto; }
@media (max-width: 560px) {
  .station-search input { flex: 1 1 100%; }
  .station-search .button { flex: 1 1 100%; }
}

/* ── Admin Payroll tab ─────────────────────────────────────────────────────── */
.payroll-range-toggle { display: inline-flex; gap: 4px; background: #eef2ef; padding: 4px; border-radius: 10px; }
.payroll-range-btn {
  border: none; background: transparent; padding: 8px 16px; border-radius: 7px;
  font-weight: 700; color: var(--brand-dark, #1a3a2a); cursor: pointer;
}
.payroll-range-btn.active { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.payroll-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin: 16px 0; }
@media (max-width: 900px) { .payroll-summary-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.payroll-summary-card {
  display: flex; flex-direction: column; gap: 6px; padding: 16px 18px;
  border: 1px solid #e2e9e5; border-radius: 12px; background: #fff;
}
.payroll-summary-card--net { background: #f1f8f3; border-color: #cfe6d8; }
.payroll-summary-label { font-size: .82rem; color: #6b7280; font-weight: 600; }
.payroll-summary-value { font-size: 1.4rem; font-weight: 800; color: var(--brand-dark, #1a3a2a); }
.payroll-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.payroll-table th, .payroll-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid #eef2ef; }
.payroll-table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: #6b7280; }
.payroll-table td:last-child, .payroll-table th:last-child { text-align: right; }
.payroll-table td:nth-child(2), .payroll-table th:nth-child(2),
.payroll-table td:nth-child(3), .payroll-table th:nth-child(3) { text-align: center; }
.payroll-card-list { display: none; }
.payroll-worker-card {
  border: 1px solid #d9e6df;
  border-radius: 14px;
  background: #fff;
  padding: 14px;
  box-shadow: 0 8px 20px rgba(12, 45, 38, 0.08);
}
.payroll-worker-card-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}
.payroll-worker-card-head strong { color: var(--brand-dark, #1a3a2a); }
.payroll-worker-card-head span { color: #6b7280; font-size: 0.86rem; font-weight: 700; }
.payroll-worker-card dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}
.payroll-worker-card dt { color: #6b7280; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; }
.payroll-worker-card dd { margin: 2px 0 0; color: var(--brand-dark, #1a3a2a); font-weight: 900; }
@media (max-width: 640px) {
  .payroll-summary-grid { grid-template-columns: 1fr; }
  .payroll-table { display: none; }
  .payroll-card-list { display: grid; gap: 12px; margin-top: 12px; }
  .payroll-worker-card dl { grid-template-columns: 1fr; }
  .payroll-worker-card .payroll-payment-cell { text-align: left; white-space: normal; }
  .payroll-worker-card .payout-pay-btn,
  .payroll-worker-card .payout-stripe-btn { width: 100%; margin-top: 6px; }
}

/* ── Payout tracker (Payroll tab) ── */
.payroll-paid-summary {
  margin: 12px 0 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--brand-dark, #1a3a2a);
}
.payroll-table td.payroll-payment-cell { text-align: right; white-space: nowrap; }
.payout-pay-btn { min-height: 36px; padding: 7px 14px; font-size: 0.85rem; }
.payout-paid-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: 999px;
  background: #e7f5ec;
  color: #1a7a45;
  font-size: 0.82rem;
  font-weight: 800;
}
.payout-undo-link {
  margin-left: 8px;
  padding: 0;
  background: none;
  border: none;
  color: #6b7280;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}
.payout-undo-link:hover { color: var(--sf-danger, #b42318); }

/* Record-payment modal */
.sf-payout-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgb(var(--sf-primary-rgb, 13 59 59) / 0.55);
}
.sf-payout-modal-backdrop[hidden] { display: none; }
.sf-payout-modal {
  width: min(420px, 100%);
  display: grid;
  gap: 14px;
  padding: 26px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 26px 60px rgb(var(--sf-primary-rgb, 13 59 59) / 0.28);
}
.sf-payout-modal h3 { margin: 0; color: var(--brand-dark, #1a3a2a); font-size: 1.25rem; }
.sf-payout-modal-sub { margin: 0; color: #5f6f6d; font-size: 0.92rem; }
.sf-payout-modal label {
  display: grid;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--brand-dark, #1a3a2a);
}
.sf-payout-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.sf-payout-modal #payout-modal-status { margin: 0; min-height: 18px; color: var(--sf-danger, #b42318); font-size: 0.85rem; font-weight: 700; }

/* Stripe payouts + fuel card block on admin worker profiles */
.admin-stripe-block {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #eef2ef;
}
.admin-stripe-block .admin-sched-title { margin: 0 0 10px; }
.admin-stripe-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
}
.admin-stripe-row + .admin-stripe-row { border-top: 1px dashed #eef2ef; }
.admin-stripe-info { min-width: 0; }
.admin-stripe-info strong { color: var(--brand-dark, #1a3a2a); font-size: 0.95rem; }
.admin-stripe-info .field-help { margin: 2px 0 0; }
.admin-stripe-row .button { flex: 0 0 auto; min-height: 38px; padding: 8px 14px; font-size: 0.85rem; white-space: nowrap; }
.admin-stripe-status { margin: 8px 0 0; min-height: 16px; font-weight: 700; }
.payout-stripe-btn { min-height: 36px; padding: 7px 12px; font-size: 0.82rem; }
@media (max-width: 560px) {
  .admin-stripe-row { flex-direction: column; align-items: stretch; }
  .admin-stripe-row .button { width: 100%; }
}

.booking-field-grid .span-2 {
  grid-column: span 2;
}

.booking-field-grid label,
.booking-check {
  display: grid;
  gap: 7px;
  color: var(--brand-dark);
  font-weight: 800;
}

.booking-field-grid input,
.booking-field-grid select,
.booking-field-grid textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 13px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid #d8e1dc;
  border-radius: 8px;
  font: inherit;
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.choice-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 18px;
  background: #ffffff;
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.choice-card:hover {
  border-color: rgba(0, 119, 102, 0.35);
}

.choice-card:has(input:checked) {
  background: var(--surface-soft);
  border-color: var(--brand);
}

.choice-card input[type="radio"],
.choice-card input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin: 2px 0 0;
  accent-color: var(--brand);
}

.choice-card span {
  display: grid;
  gap: 4px;
}

.choice-card small,
.placeholder-note,
.payment-placeholder p,
.review-placeholder p {
  color: var(--muted);
}

.placeholder-note,
.payment-placeholder,
.review-placeholder {
  padding: 16px;
  background: #f8fbf9;
  border: 1px dashed rgb(var(--sf-primary-rgb, 13 59 59) / 0.18);
  border-radius: 10px;
}

.address-autocomplete {
  position: relative;
  display: block;
  width: 100%;
}

.address-suggest {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 30;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: #ffffff;
  border: 1px solid #d8e1dc;
  border-radius: 10px;
  box-shadow: 0 14px 32px rgba(0, 40, 35, 0.16);
  max-height: 280px;
  overflow-y: auto;
}

.address-suggest[hidden] {
  display: none;
}

.address-suggest-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 9px 11px;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  font: inherit;
}

.address-suggest-item:hover,
.address-suggest-item:focus-visible {
  background: var(--surface-soft, #eef6f2);
}

.address-suggest-name {
  font-weight: 700;
  color: var(--ink);
}

.address-suggest-place {
  font-size: 0.85em;
  color: var(--muted);
}

.address-validation-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: #f8fbf9;
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: 10px;
}

.booking-legal-notice {
  font-size: 0.75rem;
  color: var(--text-secondary, #666);
  margin: 0.25rem 0 0;
  line-height: 1.5;
}

.booking-legal-notice a {
  color: var(--sf-teal-dark, #003b3b);
  text-decoration: underline;
}

.booking-validation-message {
  margin: 0;
  font-weight: 800;
}

.booking-validation-message[data-status="warning"] {
  color: #8a5a00;
}

.booking-validation-message[data-status="success"] {
  color: var(--brand);
}

.booking-validation-message[data-status="error"] {
  color: #b42318;
}

/* Coverage-unavailable: an expected "we don't reach here yet" outcome, shown as
   one calm card rather than an alarm-red line clashing with a teal note. */
.booking-validation-message[data-status="unavailable"] {
  color: #344054;
  font-weight: 700;
  background: #f8fafb;
  border: 1px solid #e4e9ec;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0;
}

/* When a follow-up note is attached, merge the two into a single seamless box. */
.booking-validation-message[data-status="unavailable"]:has(+ .booking-coverage-note) {
  border-radius: 10px 10px 0 0;
  padding-bottom: 8px;
}

.booking-coverage-note {
  margin-top: 0;
  max-width: none;
  background: #f8fafb;
  border: 1px solid #e4e9ec;
  border-top: none;
  border-radius: 0 0 10px 10px;
  padding: 0 14px 12px;
}

.booking-coverage-note p {
  margin: 0;
  color: #667085;
  font-weight: 500;
}

/* "Join the waitlist" offer under a coverage-rejected address. */
.booking-waitlist-offer {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  max-width: 380px;
}

.booking-waitlist-offer input[type="email"] {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border: 1px solid #d1d7d5;
  border-radius: 8px;
  font-size: 0.95rem;
}

.booking-waitlist-offer .button {
  justify-self: start;
}

.booking-waitlist-offer [data-status="success"] {
  color: var(--brand);
  font-weight: 700;
}

.review-summary-list {
  display: grid;
  gap: 12px;
  margin: 14px 0 0;
}

.review-summary-list div {
  display: grid;
  gap: 4px;
  padding: 12px;
  background: #ffffff;
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.1);
  border-radius: 8px;
}

.review-summary-list dt {
  color: var(--brand-dark);
  font-weight: 900;
}

.review-summary-list dd {
  margin: 0;
  color: var(--muted);
}

/* ── Compact Review & Payment step ─────────────────────────────────────── */
/* Top card — the number the customer authorizes, shown before any scrolling. */
.pay-top {
  margin: 4px 0 14px;
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--brand-dark);
  color: #fff;
}
.pay-top-heading {
  margin: 0 0 8px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.82;
}
.pay-top-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 8px;
}
.pay-top-label { font-size: 0.92rem; opacity: 0.85; }
.pay-top-amount { font-size: 2rem; font-weight: 900; line-height: 1; letter-spacing: -0.01em; }
.pay-top-help { margin: 0; font-size: 0.8rem; line-height: 1.45; opacity: 0.8; }

/* Collapsible grouped review — compact by default, expandable to see everything. */
.pay-details {
  margin: 0 0 14px;
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: 10px;
  background: #ffffff;
  overflow: hidden;
}
.pay-details > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  font-weight: 800;
  color: var(--brand-dark);
}
.pay-details > summary::-webkit-details-marker { display: none; }
.pay-details-chevron { transition: transform 0.15s ease; }
.pay-details[open] .pay-details-chevron { transform: rotate(180deg); }
.pay-details > div { padding: 0 14px 12px; }

.review-groups { display: grid; gap: 14px; }
.review-group h4 {
  margin: 0 0 4px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 800;
}
.review-kv { display: grid; gap: 0; margin: 0; }
.review-kv > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
  border-bottom: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.06);
}
.review-kv > div:last-child { border-bottom: none; }
.review-kv dt { flex: 0 0 auto; color: var(--muted); font-weight: 600; }
.review-kv dd { margin: 0; text-align: right; color: var(--brand-dark); font-weight: 600; overflow-wrap: anywhere; }

/* Cost breakdown = compact rows, not bordered cards. */
.pay-costs-heading { display: block; margin: 0 0 4px; color: var(--brand-dark); }
.review-summary-list.review-summary-costs { display: block; gap: 0; margin: 0 0 4px; }
.review-summary-list.review-summary-costs > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
  background: none;
  border: 0;
  border-bottom: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.07);
  border-radius: 0;
}
.review-summary-list.review-summary-costs > div dt { font-weight: 600; color: var(--muted); }
.review-summary-list.review-summary-costs > div dd { margin: 0; text-align: right; color: var(--brand-dark); font-weight: 700; }
.review-summary-list.review-summary-costs > .pay-total-row {
  border-top: 2px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.18);
  border-bottom: 0;
  margin-top: 2px;
  padding-top: 9px;
}
.review-summary-list.review-summary-costs > .pay-total-row dt,
.review-summary-list.review-summary-costs > .pay-total-row dd { font-weight: 900; color: var(--brand-dark); font-size: 1.08rem; }
.review-summary-list.review-summary-costs > .pay-note-row { display: block; border: 0; padding: 8px 0 0; }
.review-summary-list.review-summary-costs > .pay-note-row dt { font-weight: 700; color: var(--brand-dark); }
.review-summary-list.review-summary-costs > .pay-note-row dd { text-align: left; color: var(--muted); font-weight: 500; font-size: 0.82rem; margin-top: 2px; }

.pay-consent { margin: 14px 0 0; }
.pay-consent .booking-check + .booking-check { margin-top: 10px; }
.pay-consent .payment-notice { margin: 8px 2px 0; }
.pay-actions { margin-top: 14px; }

.booking-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 16px;
  background: var(--surface-soft);
  border-radius: 10px;
  line-height: 1.45;
}

.booking-check input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 3px 0 0;
  accent-color: var(--brand);
}

.booking-check span {
  flex: 1;
}

.booking-addon-card {
  margin-top: 14px;
}

.booking-addon-card details {
  margin-top: 6px;
}

.booking-addon-card summary {
  color: var(--brand);
  cursor: pointer;
  font-weight: 900;
}

.wash-package-includes-list {
  display: grid;
  gap: 8px;
}

.wash-package-includes {
  padding: 10px 14px;
  background: var(--surface-soft);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.1);
  border-radius: 8px;
}

.wash-package-includes summary {
  color: var(--brand-dark);
  cursor: pointer;
  font-weight: 800;
  font-size: 0.9rem;
}

.wash-package-includes ul {
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 0.86rem;
}

.wash-package-includes li {
  margin-bottom: 2px;
}

.payment-card-box {
  display: grid;
  gap: 10px;
  padding: 16px;
  background: #ffffff;
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: 10px;
}

.payment-card-box label {
  display: grid;
  gap: 8px;
  color: var(--brand-dark);
  font-weight: 900;
}

.booking-card-element {
  min-height: 48px;
  padding: 14px 12px;
  border: 1px solid #d8e1dc;
  border-radius: 8px;
}

.payment-modal-open {
  overflow: hidden;
}

.booking-payment-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 18px;
}

.booking-payment-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 31, 31, 0.48);
}

.booking-payment-dialog {
  position: relative;
  z-index: 1;
  width: min(460px, 100%);
  display: grid;
  gap: 14px;
  padding: 24px;
  background: #ffffff;
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.14);
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0, 31, 31, 0.26);
}

.booking-payment-dialog h3,
.booking-payment-dialog p {
  margin: 0;
}

.booking-payment-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: #eef6f2;
  color: var(--brand-dark);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.payment-notice {
  padding: 14px 16px;
  color: var(--brand-dark);
  background: var(--surface-soft);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: 10px;
  font-weight: 800;
}

.submission-success {
  display: grid;
  gap: 8px;
  padding: clamp(22px, 4vw, 36px);
  background: var(--surface-soft);
  border: 1px solid rgba(0, 119, 102, 0.28);
  border-radius: 10px;
}

.submission-success h3 {
  margin: 0;
  color: var(--brand);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
}

.post-booking-account-prompt {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding: 16px;
  background: #ffffff;
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.14);
  border-radius: 10px;
}

.post-booking-account-prompt h4 {
  margin: 0;
  color: var(--sf-teal-dark);
  font-size: 1.05rem;
}

.post-booking-account-prompt p {
  margin: 4px 0 0;
  color: var(--sf-muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

.booking-step-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 8px;
}

.booking-step-actions .button {
  min-width: 132px;
}

/* Disabled Continue reads as clearly inert grey, so a complete/active step's
   Continue is unmistakably the solid dark-green primary button. */
.booking-step-actions .button.primary:disabled,
.booking-step-actions .button.primary[disabled] {
  cursor: not-allowed;
  opacity: 1;
  color: #8c9a96;
  background: #e7ece9;
  border-color: #d6ded9;
  box-shadow: none;
  transform: none;
}

@media (max-width: 980px) {
  .booking-progress {
    display: flex;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x mandatory;
  }

  .booking-progress li {
    min-width: 136px;
    scroll-snap-align: start;
  }

  .booking-field-grid,
  .choice-grid {
    grid-template-columns: 1fr;
  }

  .booking-suggestion-card {
    display: grid;
    align-items: stretch;
  }

  .booking-suggestion-card .button {
    width: 100%;
  }

  .booking-field-grid .span-2 {
    grid-column: auto;
  }
}

@media (max-width: 640px) {
  .booking-flow-shell {
    width: min(100% - 20px, 640px);
    margin-top: 22px;
  }

  .booking-step-actions {
    flex-direction: column-reverse;
  }

  .booking-step-actions .button {
    width: 100%;
  }
}

/* ─── Very small phones (< 400px) ───────────────────────────── */
@media (max-width: 400px) {
  .address-csz {
    grid-template-columns: 1fr;
  }

  .hero-points {
    gap: 6px;
  }

  .hero-points span {
    font-size: 0.8rem;
    padding: 4px 10px;
  }

  .pricing-grid,
  .service-grid {
    grid-template-columns: 1fr;
  }
}

.customer-timeline {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin: 24px 0;
  padding: 6px 4px 10px;
  list-style: none;
  overflow-x: auto;
}

.customer-timeline li {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-width: 96px;
  padding: 0 8px;
  text-align: center;
  background: none;
  border: 0;
}

.customer-timeline li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 17px;
  left: calc(50% + 30px);
  width: calc(100% - 60px);
  border-top: 2px dashed var(--line);
}

.customer-timeline li.done:not(:last-child)::after {
  border-top-color: var(--brand);
  border-top-style: solid;
}

.customer-timeline span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-weight: 900;
}

.customer-timeline li.done span {
  background: var(--brand);
  color: white;
}

.customer-timeline p {
  max-width: 110px;
  font-size: 0.78rem;
}

.customer-timeline li.done p {
  color: var(--brand-dark);
  font-weight: 800;
}

.customer-timeline li.timeline-step-nested {
  min-width: 78px;
  font-size: 0.93em;
}

.customer-timeline li.timeline-step-nested span {
  width: 26px;
  height: 26px;
  font-size: 0.8em;
}

.customer-timeline li.timeline-step-nested:not(:last-child)::after {
  top: 13px;
}

.timeline-status-message {
  font-size: 0.95rem;
  color: var(--text);
  margin: 0 0 12px;
  line-height: 1.5;
}

.customer-timeline p {
  margin: 0;
}

.timeline-progress-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-secondary, #555);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.customer-timeline li.active {
  border-color: var(--brand);
  background: var(--brand-tint, #f0f7ff);
}

.customer-timeline li.active span {
  background: var(--brand);
  color: white;
}

.customer-timeline li.active p {
  font-weight: 700;
  color: var(--brand-dark, #1a4a8a);
}

.customer-timeline li.future {
  opacity: 0.5;
}

.worker-phone {
  font-size: 0.9rem;
  color: var(--text-secondary, #555);
  margin: 2px 0 0;
}

.service-issue-banner {
  background: #fff8e1;
  border: 1px solid #f0c040;
  border-left: 4px solid #f0a000;
  border-radius: 6px;
  padding: 12px 14px;
  margin: 12px 0;
}

.service-issue-banner strong {
  display: block;
  margin-bottom: 4px;
  color: #7a4800;
}

.service-issue-banner p {
  margin: 0;
  font-size: 0.9rem;
  color: #555;
}

.return-request-banner {
  background: #fff0f0;
  border: 1px solid #e88;
  border-left: 4px solid #c0392b;
  border-radius: 6px;
  padding: 14px 16px;
  margin: 12px 0;
}

.return-request-banner h4 {
  margin: 0 0 6px;
  color: #8a2c1f;
}

/* Admin-created / special request awareness on the worker job card. */
.worker-service-area-warn {
  border-color: #f0c36d;
  border-left-color: #e0982f;
  background: #fffaf0;
}
.worker-service-area-warn h4 { color: #7a4800; }
.worker-service-area-danger {
  border-color: #e88;
  border-left-color: #c0392b;
  background: #fff0f0;
}
.worker-service-area-danger h4 { color: #8a2c1f; }
.service-package-details {
  margin: 12px 0;
  display: grid;
  gap: 8px;
}

.service-package-block {
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e0e0e0);
  border-radius: 6px;
  padding: 10px 14px;
}

.service-package-title {
  font-weight: 700;
  margin: 0 0 6px;
}

.service-package-list {
  margin: 0;
  padding-left: 18px;
  font-size: 0.88rem;
  color: var(--text-secondary, #555);
}

.estimated-total-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--surface-soft, #f5f5f5);
  border: 1px solid var(--line, #e0e0e0);
  border-radius: 8px;
  padding: 14px 16px;
  margin: 12px 0;
}

.estimated-total-label {
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-secondary, #555);
}

.estimated-total-amount {
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--brand-dark, #1a4a8a);
}

.estimated-total-card.estimated-total-released {
  background: #e8f5e9;
  border-color: #81c784;
  flex-wrap: wrap;
  gap: 4px;
}
.estimated-total-card.estimated-total-released .estimated-total-label {
  color: #1b5e20;
}
.estimated-total-card.estimated-total-released .estimated-total-amount {
  color: #2e7d32;
}
.estimated-total-note {
  width: 100%;
  margin: 0;
  font-size: 0.82rem;
  color: inherit;
  opacity: 0.8;
}

.estimated-total-card.estimated-total-release-failed {
  background: #fff8e1;
  border-color: #ffe082;
  flex-wrap: wrap;
  gap: 4px;
}
.estimated-total-card.estimated-total-release-failed .estimated-total-label {
  color: #5d4037;
}
.estimated-total-card.estimated-total-release-failed .estimated-total-amount {
  color: #4e342e;
}

.return-confirmation {
  background: #f0f7f0;
  border: 1px solid #b2dfc2;
  border-radius: 8px;
  padding: 14px 16px;
  margin: 12px 0;
}

.return-confirmation h4 {
  margin: 0 0 6px;
  color: #1a7a3a;
}

.return-confirmation p {
  margin: 4px 0 0;
  font-size: 0.9rem;
}

.status-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.status-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 18px;
  border: 1px solid var(--brand);
  border-radius: 8px;
  color: #ffffff;
  background: var(--brand);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.status-btn:hover {
  background: var(--brand-dark);
}

.status-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}
.photo-upload-panel {
  display: grid;
  gap: 12px;
  margin: 22px 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.photo-upload-panel h4 {
  margin: 0;
}

.photo-upload-panel input[type="file"] {
  background: white;
}

.worker-availability-window {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  box-shadow: 0 14px 34px rgba(22, 33, 29, 0.08);
}

.worker-window-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.worker-window-heading h3,
.worker-calendar-month h4 {
  margin: 0;
}

.worker-day-copy-actions .button {
  min-height: 42px;
  padding: 8px 12px;
}

.worker-day-copy-actions .button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.worker-days-grid.paste-ready .worker-paste-day:not(:disabled),
.worker-days-grid.copy-ready .worker-copy-day {
  color: #ffffff;
  background: var(--brand);
  box-shadow: 0 8px 18px rgba(8, 113, 95, 0.18);
}

.worker-days-grid.paste-ready .worker-copy-day,
.worker-days-grid.copy-ready .worker-paste-day {
  color: var(--brand-dark);
  background: white;
  box-shadow: none;
}

.worker-calendar-month {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.calendar-weekdays,
.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.calendar-weekdays span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-align: center;
}

.calendar-day,
.calendar-empty {
  display: grid;
  min-height: 38px;
  place-items: center;
}

.calendar-day {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.calendar-day:hover {
  border-color: var(--brand);
  color: var(--brand-dark);
}

.calendar-day.day-off {
  border-color: #a82020;
  background: #a82020;
  color: #ffffff;
}

.calendar-day:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.admin-view-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.summary-button {
  background: white;
  border: 1px solid #d9e1dc;
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
}

.summary-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

.summary-button.active {
  border: 2px solid var(--brand);
}

/* Add this to the bottom of styles.css */
.admin-edit-panel,
.return-location-panel,
.receipt-panel,
.inspection-panel,
.complete-panel,
.photo-panel {
  display: grid;
  gap: 14px;
  margin-top: 16px;
  padding: 18px;
  background: #fbfcfb;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.admin-edit-panel[hidden],
.return-location-panel[hidden],
.receipt-panel[hidden],
.inspection-panel[hidden],
.complete-panel[hidden],
.photo-panel[hidden] {
  display: none;
}

.guided-step {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.guided-step h4 {
  margin: 0;
}

.next-action-label {
  margin: 0;
  color: var(--text);
  font-size: 0.93rem;
}

.next-action-label strong {
  color: var(--muted);
  font-weight: 700;
}

.duplicate-photo-warning {
  color: #a33b20;
  font-weight: 700;
}

.total-edit-panel {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.total-edit-panel[hidden] {
  display: none;
}

.edit-total-charge-panel[hidden] {
  display: none;
}

.key-returned-other-wrap[hidden] {
  display: none;
}

.edit-total-charge-form {
  display: grid;
  gap: 14px;
  margin-top: 12px;
  padding: 18px;
  border: 1.5px solid var(--brand);
  border-radius: 10px;
  background: #f7faf8;
}

.edit-total-charge-title {
  margin: 0;
  font-size: 1rem;
  color: var(--brand-dark);
}

.edit-total-charge-desc {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
}

.etc-new-total-preview {
  margin: 0;
  font-size: 0.95rem;
  padding: 10px 14px;
  background: var(--surface-soft);
  border-radius: 6px;
  border: 1px solid var(--line);
}

.trouble-code-output,
.inspection-summary {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.trouble-code-output p,
.inspection-summary p {
  margin: 0;
}

.admin-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.admin-money-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}

.photo-proof-section {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.photo-proof-sections {
  display: grid;
  gap: 18px;
  margin-top: 18px;
}

.photo-proof-section h3 {
  margin: 0;
  font-size: 1rem;
}

.photo-proof-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.photo-proof-card {
  display: grid;
  gap: 8px;
  color: inherit;
  text-decoration: none;
}

.photo-proof-loaded {
  cursor: pointer;
}

.photo-proof-loaded img {
  transition: opacity 0.15s;
}

.photo-proof-loaded:hover img,
.photo-proof-loaded:focus-visible img {
  opacity: 0.85;
}

.photo-proof-loaded:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 8px;
}

.photo-proof-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.photo-proof-section-compact .photo-proof-grid {
  grid-template-columns: repeat(auto-fit, minmax(104px, 136px));
}

.photo-proof-section-compact .photo-proof-card img {
  max-width: 136px;
}

.photo-proof-card span {
  font-size: 0.85rem;
  text-transform: capitalize;
  color: var(--muted);
}

.photo-proof-missing {
  min-height: 120px;
  align-content: center;
  padding: 14px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.photo-proof-missing p {
  margin: 0;
  color: var(--muted);
}

.photo-proof-empty {
  margin: 0;
  padding: 18px;
  color: var(--muted);
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

#photo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

#photo-lightbox[hidden] {
  display: none;
}

.photo-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
}

.photo-lightbox-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: min(92vw, 900px);
  max-height: 92vh;
  padding: 16px;
}

.photo-lightbox-img {
  max-width: 100%;
  max-height: calc(92vh - 80px);
  object-fit: contain;
  border-radius: 8px;
  display: block;
}

.photo-lightbox-caption {
  margin: 0;
  color: #fff;
  font-size: 0.9rem;
  text-transform: capitalize;
  opacity: 0.85;
}

.photo-lightbox-close {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.photo-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.28);
}

.review-panel {
  display: grid;
  gap: 14px;
  margin-top: 18px;
  padding: 20px;
  border: 1px solid var(--sf-teal, #0d9488);
  border-radius: 12px;
  background: #f0fdf9;
}

.review-panel h3 {
  margin: 0;
  color: var(--sf-teal, #0d9488);
}

.review-panel--submitted {
  background: #f8fffe;
  border-color: var(--line);
}

/* Star rating widget */
.star-rating {
  display: flex;
  align-items: center;
  gap: 6px;
}

.star-btn {
  background: none;
  border: none;
  font-size: 2.2rem;
  color: #d1d5db;
  cursor: pointer;
  padding: 4px 2px;
  line-height: 1;
  transform-origin: center bottom;
  /* Bouncy easing so selected stars "pop" up as you add them. */
  transition: color 0.14s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Filled state set by JS via .filled class — selected stars grow. */
.star-btn.filled {
  color: #f59e0b;
  transform: scale(1.18);
}

/* The highest selected star (no filled star after it) pops the most, so the
   rating visibly grows toward your choice as you add more stars. */
.star-btn.filled:not(:has(~ .star-btn.filled)) {
  transform: scale(1.34);
}

/* Desktop: live hover-preview so the rating responds as you move across the row.
   Hovering a star fills + grows it and every star before it (the hovered one is
   the peak); stars after it fall back to empty — overriding any current
   selection so you see exactly what you'd pick. Touch devices have no hover, so
   they keep the tap-to-grow (.filled) behavior above. */
@media (hover: hover) {
  .star-rating:has(.star-btn:hover) .star-btn:hover,
  .star-rating:has(.star-btn:hover) .star-btn:has(~ .star-btn:hover) {
    color: #fbbf24;
    transform: scale(1.18);
  }
  .star-rating:has(.star-btn:hover) .star-btn:hover {
    transform: scale(1.4);
  }
  .star-rating:has(.star-btn:hover) .star-btn:hover ~ .star-btn {
    color: #d1d5db;
    transform: scale(1);
  }
}

.star-rating-label {
  font-size: 0.85rem;
  color: #888;
  margin: 0;
  min-height: 1.2em;
}

.star-rating-label.has-selection {
  color: #f59e0b;
  font-weight: 600;
}

/* Display-only star strip (submitted state) */
.star-display {
  font-size: 1.6rem;
  color: #f59e0b;
  letter-spacing: 2px;
}

.review-comment {
  color: #555;
  font-style: italic;
  margin: 0;
}

.review-thanks {
  font-weight: 600;
  color: var(--sf-teal, #0d9488);
  margin: 0;
  text-align: center;
  padding: 8px 0;
}

.applicant-status-control {
  min-width: min(100%, 220px);
}

.applicant-status-control select {
  min-height: 42px;
}

.assigned-worker-card {
  grid-template-columns: 72px minmax(0, 1fr);
  margin-top: 24px;
  scroll-margin-top: 80px;
}

.worker-assignment-panel h4,
.assigned-worker-card h3 {
  margin: 0;
}

.worker-select-label {
  min-width: 0;
}

.worker-profile-form input[type="file"]::file-selector-button,
.worker-profile-card input[type="file"]::file-selector-button {
  min-height: 38px;
  margin-right: 10px;
  padding: 8px 14px;
  border: 1px solid var(--brand);
  border-radius: 8px;
  color: #ffffff;
  background: var(--brand);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.worker-profile-preview {
  display: flex;
  align-items: center;
  min-height: 82px;
}

.form-action-row {
  display: flex;
  justify-content: flex-end;
}

.profile-photo-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-weight: 800;
}

.photo-boundary-panel {
  display: grid;
  gap: 10px;
  max-width: 360px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.photo-boundary-panel[hidden] {
  display: none;
}

.photo-boundary-preview {
  position: relative;
  width: min(320px, 100%);
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid var(--brand);
  border-radius: 8px;
  background: var(--surface-soft);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.photo-boundary-preview.is-dragging {
  cursor: grabbing;
}

.photo-boundary-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: translate(var(--profile-photo-x, 0%), var(--profile-photo-y, 0%)) scale(var(--profile-photo-zoom, 1));
  transform-origin: center;
  background: #e8eeeb;
}

.photo-boundary-panel input[type="range"] {
  accent-color: var(--brand);
}

.photo-boundary-overlay {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  pointer-events: none;
}

.photo-boundary-overlay::after {
  content: "";
  position: absolute;
  inset: 12%;
  border: 3px solid #ffffff;
  border-radius: 50%;
  box-shadow:
    0 0 0 2px var(--brand),
    0 0 0 999px rgba(70, 78, 74, 0.42);
}

.visually-hidden-file {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}

.photo-crop-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 2px solid rgba(0, 116, 93, 0.42);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 14px 32px rgba(0, 116, 93, 0.1);
}

.photo-crop-panel[hidden] {
  display: none;
}

.photo-crop-layout {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(160px, 220px);
  gap: 24px;
  align-items: start;
}

.photo-crop-frame {
  width: min(280px, 100%);
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid var(--brand);
  border-radius: 12px;
  background: var(--surface-soft);
  touch-action: none;
}

.photo-crop-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: grab;
  user-select: none;
  transform: translate(var(--crop-x, 0), var(--crop-y, 0)) scale(var(--crop-zoom, 1));
  transform-origin: center;
}

.photo-crop-frame img.is-dragging {
  cursor: grabbing;
}

.photo-crop-profile-preview {
  width: 150px;
  height: 150px;
  overflow: hidden;
  border: 2px solid var(--brand);
  border-radius: 50%;
  background: var(--surface-soft);
  touch-action: none;
}

.photo-crop-profile-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(var(--crop-x, 0), var(--crop-y, 0)) scale(var(--crop-zoom, 1));
  transform-origin: center;
}

.photo-crop-panel input[type="range"] {
  accent-color: var(--brand);
}

.worker-profile-card {
  cursor: pointer;
}

/* Admin worker-lifecycle grouping, rehire modal & entity-detail panel moved to admin-dashboard-polish.css (2026-07-08). */


/* ── Worker photo: clickable frame ───────────────────────────────────────── */
.worker-photo-clickable {
  cursor: zoom-in;
  outline-offset: 3px;
}
.worker-photo-clickable:focus-visible {
  outline: 2px solid var(--brand);
}

/* ── Worker photo: editor action buttons (Upload / Edit framing / Delete) ── */
/* ── Worker photo: large modal overlay ───────────────────────────────────── */
/* ── Service / receipt photo modal overrides (rectangular, contain) ─────── */
/* ── Worker profile photo frame: large variant ───────────────────────────── */
.worker-profile-card.active-worker-profile {
  border-color: var(--brand);
  box-shadow: 0 10px 26px rgba(8, 113, 95, 0.12);
}

.worker-job-card + h3,
#worker-job-list h3 {
  margin: 14px 0 0;
}

/* ── Worker open / available badge ───────────────────────────── */
@keyframes badge-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .55; transform: scale(.8); }
}

/* ── Worker address highlight ─────────────────────────────────── */
@media (max-width: 900px) {
  .photo-crop-layout {
    grid-template-columns: 1fr;
  }

  .worker-days-off-calendar {
    grid-template-columns: 1fr;
  }

  .worker-assignment-panel {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .worker-select-label {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .worker-schedule-actions,
  .worker-day-row {
    grid-template-columns: 1fr;
  }

  .worker-day-copy-actions .button {
    min-height: 44px;
  }

  .worker-assignment-panel {
    grid-template-columns: 1fr;
  }

  .worker-assignment-panel .worker-avatar {
    display: none;
  }
}

/* ─── Modal overlay ─────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.52);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-overlay[hidden] {
  display: none;
}

.modal-dialog {
  background: var(--surface);
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22);
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--line);
}

.modal-header h2 {
  margin: 0;
  font-size: 1.2rem;
}

.modal-close {
  width: 34px;
  height: 34px;
  border: none;
  background: none;
  font-size: 1.4rem;
  cursor: pointer;
  color: var(--muted);
  border-radius: 6px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* display:flex above would otherwise override the [hidden] attribute, so a close
   button hidden in code (e.g. a mandatory worker password change) would still show. */
.modal-close[hidden] { display: none !important; }

.modal-close:hover {
  background: var(--line);
  color: var(--text);
}

.modal-body {
  padding: 18px 22px 22px;
  overflow-y: auto;
}

.app-legal-content {
  color: #1c2b28;
}

/* Desktop: the account legal modal (Privacy / Terms / Liability from the footer)
   is a centred document viewer — larger than the phone sheet, with a comfortable
   reading measure, scaled-down section headings, and generous padding. The page
   behind stays dimmed; the header (title + X) sits above the scrolling body (flex
   column, only .modal-body scrolls) so the close button is always reachable.
   Phones keep mobile-polish.css's full-width sheet — this is desktop-only. */
@media (min-width: 761px) {
  .app-legal-modal .modal-dialog {
    width: min(1000px, calc(100vw - 96px));
    max-width: none;
    max-height: 90vh;
  }
  .app-legal-modal .modal-header {
    padding: 20px 40px 16px;
  }
  .app-legal-modal .modal-header h2 {
    font-size: 1.35rem;
  }
  .app-legal-modal .modal-body {
    /* Extra bottom padding so the last paragraph never sits against the edge. */
    padding: 24px 40px 40px;
  }
  .app-legal-modal .app-legal-content h2 {
    font-size: 1.6rem;
    line-height: 1.25;
    margin: 1.7rem 0 0.5rem;
  }
  .app-legal-modal .app-legal-content h2:first-of-type {
    margin-top: 0.25rem;
  }
  .app-legal-modal .app-legal-content h3 {
    font-size: 1.15rem;
    line-height: 1.3;
    margin: 1.2rem 0 0.4rem;
  }
  .app-legal-modal .app-legal-content p,
  .app-legal-modal .app-legal-content li {
    font-size: 1rem;
    line-height: 1.65;
  }
}

/* Legal-modal close button: a slightly larger, easier click target with a subtle
   hover so the X reads as interactive. Scoped to the legal modal, so it's identical
   across Terms / Privacy / Liability. */
.app-legal-modal .modal-close {
  min-width: 36px;
  min-height: 36px;
}
.app-legal-modal .modal-close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--sf-teal-dark);
}

/* The modal header already names the document, so hide the duplicate <h1> the
   loaded legal page repeats inside the body. Standalone /privacy.html etc. keep
   their own heading — this is scoped to the modal. */
.app-legal-modal .app-legal-content h1 {
  display: none;
}

.app-legal-content h1 {
  margin: 0 0 0.35rem;
  color: var(--sf-teal-dark);
}

.app-legal-content h2,
.app-legal-content h3 {
  color: var(--sf-teal-dark);
}

.app-legal-content p,
.app-legal-content li {
  line-height: 1.55;
  color: #1c2b28;
}

.app-legal-content .legal-updated {
  color: #8a9893;
  font-size: 0.82rem;
}

.temp-password-display {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 8px;
  padding: 12px 16px;
  background: var(--surface-soft, #f5f5f5);
  border-radius: 8px;
  border: 1px solid var(--line);
}

.temp-password-display code {
  flex: 1;
  font-family: monospace;
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  word-break: break-all;
}

.fuel-pricing-updated {
  font-size: 0.78rem;
  color: var(--muted);
  margin: 4px 0 0;
}

/* ─── Admin hero stats ──────────────────────────────────────────── */
.admin-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 28px;
}

.hero-stat-btn {
  background: none;
  border: none;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}
.hero-stat-btn:hover,
.hero-stat-btn:focus-visible {
  background: var(--hover, rgba(0,0,0,0.06));
  outline: none;
}

/* ─── Edit panel section labels ─────────────────────────────────── */
.edit-section-label {
  margin: 16px 0 6px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.edit-admin-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  background: #fef3c7;
  border: 1px solid #fbbf24;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #92400e;
  text-transform: none;
  letter-spacing: 0;
  vertical-align: middle;
}

/* ─── Ticket detail modal ────────────────────────────────────────── */
.ticket-detail-dialog {
  max-width: 680px;
  width: 100%;
}

.worker-modal-wide {
  max-width: 640px;
  width: 100%;
}

.ticket-detail-section {
  margin-top: 18px;
}

.ticket-photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

/* ─── Workers sections always-visible separator ──────────────────── */
.admin-workers-section {
  border-top: 2px solid var(--line);
}

/* ─── Admin page-level tab nav ──────────────────────────────────── */
.admin-page-tabs {
  display: flex;
  gap: 0;
  padding: 0 clamp(20px, 5vw, 72px);
  background: var(--bg);
  border-bottom: 2px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}

.admin-top-nav .portal-header-label {
  color: rgba(255, 255, 255, 0.75);
}

.admin-top-nav .portal-signout-btn {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.5);
}

.admin-top-nav .admin-page-tab:hover {
  color: #ffffff;
}

.page-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background: var(--brand);
  color: #fff;
  border-radius: 11px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}

/* ─── Find Tickets search row ────────────────────────────────────── */
.find-tickets-search-row {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.find-tickets-search-row input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 1rem;
}

.find-tickets-sort-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 0 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 12px;
}

.find-tickets-result-count {
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 600;
}

.find-tickets-sort-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--muted);
}

.find-tickets-sort-label select {
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 0.85rem;
}

/* ─── Find ticket result card ────────────────────────────────────── */
.find-ticket-result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
}

/* ─── Admin tab nav (legacy - kept for future use) ──────────────── */
.admin-tab-nav {
  display: flex;
  gap: 4px;
  padding: 0 clamp(20px, 5vw, 72px);
  border-bottom: 2px solid var(--line);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 10;
}

.admin-tab-btn {
  padding: 12px 20px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.admin-tab-btn:hover {
  color: var(--text);
}

.admin-tab-btn.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

/* ─── Summary cards – 6-card layout ────────────────────────────── */
@media (max-width: 900px) {
  .admin-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.find-tickets-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ─── Reviews section header ────────────────────────────────────── */
.review-filter-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.review-average {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--brand);
  white-space: nowrap;
}

.star-filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.star-filter-btn {
  padding: 5px 10px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 0.8rem;
  color: #b45309;
  cursor: pointer;
  transition: all 0.15s;
}

.star-filter-btn:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.star-filter-btn.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.star-filter-all {
  color: var(--muted);
}

.star-filter-all.active {
  color: #fff;
}

/* ─── Review stars in card ──────────────────────────────────────── */
.review-stars {
  color: #b45309;
  letter-spacing: 1px;
}

/* ─── Find Tickets modal ────────────────────────────────────────── */
.find-tickets-dialog {
  max-width: 560px;
  width: 100%;
}

.find-tickets-search-label {
  display: block;
  margin-bottom: 14px;
}

.find-tickets-search-label input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 1rem;
}

.find-tickets-results {
  display: grid;
  gap: 8px;
  max-height: 60vh;
  overflow-y: auto;
}

.find-ticket-result {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px 14px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
}

.find-ticket-result:hover {
  border-color: var(--brand);
  box-shadow: 0 2px 8px rgba(0, 116, 93, 0.12);
}

.find-ticket-name {
  font-weight: 700;
  font-size: 1rem;
}

.find-ticket-meta {
  font-size: 0.85rem;
  color: var(--muted);
}

.find-tickets-empty {
  color: var(--muted);
  text-align: center;
  padding: 20px;
}

/* ── Custom date picker (sfp = ShiftFuel Picker) ────────────────────────── */

.sfp-host {
  position: relative;
  display: block;
}

/* Trigger — styled to match app's <input>/<select> fields */
.sfp-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 46px;
  padding: 12px 13px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  font-size: 1rem; /* prevents iOS Safari auto-zoom */
  font-weight: 400;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.sfp-trigger--empty {
  color: var(--muted);
}

.sfp-trigger:focus {
  outline: 3px solid rgba(8, 113, 95, 0.18);
  border-color: var(--brand);
}

.sfp-trigger[aria-expanded="true"] {
  border-color: var(--brand);
  outline: 3px solid rgba(8, 113, 95, 0.18);
}

.sfp-trigger-label {
  flex: 1 1 auto;
}

.sfp-trigger-chevron {
  flex: 0 0 auto;
  font-size: 0.8rem;
  opacity: 0.6;
}

/* Popup calendar card */
.sfp-popup {
  position: absolute;
  z-index: 200;
  top: calc(100% + 4px);
  left: 0;
  min-width: 280px;
  width: 100%;
  max-width: 320px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(22, 33, 29, 0.16);
}

.sfp-popup--above {
  top: auto;
  bottom: calc(100% + 4px);
}

/* Month navigation header */
.sfp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 6px;
}

.sfp-month-title {
  font-weight: 700;
  font-size: 0.95rem;
  flex: 1 1 auto;
  text-align: center;
}

.sfp-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  color: var(--ink);
  -webkit-appearance: none;
  appearance: none;
}

.sfp-nav:hover:not([disabled]) {
  background: var(--surface-soft);
  border-color: var(--brand);
}

.sfp-nav[disabled] {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Day-of-week header row */
.sfp-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 4px;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sfp-weekdays span {
  padding: 2px 0;
}

/* Day grid — 7 equal columns */
.sfp-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

/* Base cell (both span and button days) */
.sfp-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  font-size: 0.875rem;
  line-height: 1;
}

/* Reset button defaults for clickable days */
button.sfp-cell {
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* Clickable / valid day */
.sfp-day--ok {
  color: var(--ink);
}

.sfp-day--ok:hover {
  background: var(--surface-soft);
  color: var(--brand-dark);
}

.sfp-day--ok:focus {
  outline: 2px solid var(--brand);
  outline-offset: -1px;
}

/* Disabled / out-of-range day */
.sfp-day--disabled {
  color: #b8c4be;
  background: transparent;
  cursor: not-allowed;
  pointer-events: none;
}

/* Today indicator */
.sfp-day--today:not(.sfp-day--selected) {
  border: 1.5px solid var(--brand);
  font-weight: 700;
  color: var(--brand-dark);
}

/* Selected day */
.sfp-day--selected {
  background: var(--brand) !important;
  color: #fff !important;
  font-weight: 700;
  border: none !important;
}

/* Empty leading cells (fill grid before day 1) */
.sfp-cell--empty {
  pointer-events: none;
  background: transparent;
}

/* =====================================================
   Step 12: Book Now form cleanup
   Added because old form blocks were removed
===================================================== */

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.cr-hidden {
  display: none !important;
}

.address-fields {
  display: grid;
  gap: 16px;
}

.address-csz {
  display: grid;
  grid-template-columns: 1fr 6rem 7rem;
  gap: 14px;
}

fieldset {
  margin: 0;
  padding: 26px;
  background: var(--sf-white);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: var(--sf-radius-md);
  box-shadow: var(--sf-shadow-soft);
}

legend {
  padding: 0 8px;
  color: var(--sf-teal-dark);
  font-weight: 900;
}

.field-help {
  color: var(--sf-muted);
  font-size: 0.84rem;
  font-weight: 400;
  line-height: 1.45;
}

.field-error {
  color: var(--sf-danger);
  font-size: 0.84rem;
  font-weight: 700;
}

.service-choice-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 20px;
  margin-bottom: 18px;
}

.service-controls {
  display: grid;
  gap: 16px;
}

.service-details-panel {
  align-self: start;
  padding: 24px;
  background: var(--sf-white);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: var(--sf-radius-md);
  box-shadow: var(--sf-shadow-soft);
}

.service-details-panel ul {
  margin: 12px 0 0;
  padding-left: 20px;
  color: var(--sf-muted);
}

.service-details-panel li {
  margin-bottom: 6px;
}

.required-mark,
.optional-mark {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: var(--sf-radius-pill);
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1.4;
}

.required-mark {
  color: var(--sf-white);
  background: var(--sf-teal);
}

.optional-mark {
  color: var(--sf-teal-dark);
  background: var(--sf-sage-light);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
}

@media (max-width: 900px) {
  .field-grid,
  .service-choice-grid {
    grid-template-columns: 1fr;
  }

  .address-csz {
    grid-template-columns: 1fr 1fr;
  }

  .address-csz label:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  fieldset {
    padding: 18px;
  }

  .address-csz {
    grid-template-columns: 1fr;
  }
}

/* Status pills */

.status-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 7px 12px;
  color: var(--sf-teal-dark);
  background: var(--sf-sage-light);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: var(--sf-radius-pill);
  font-size: 0.82rem;
  font-weight: 900;
}

.status-pill-complete {
  color: #1A7A3A;
  background: #E8F7EE;
  border-color: #B2DFC2;
}

.status-pill-denied {
  color: #7A1F1F;
  background: #FDF2F2;
  border-color: #F5C6C6;
}

.status-pill-payment {
  color: #7A4800;
  background: #FFF3CD;
  border-color: #F0C040;
}

/* Customer timeline */

.customer-timeline {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin: 24px 0;
  padding: 8px 4px 12px;
  list-style: none;
  overflow-x: auto;
}

.customer-timeline li {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-width: 112px;
  padding: 0 10px;
  text-align: center;
}

.customer-timeline li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 18px;
  left: calc(50% + 34px);
  width: calc(100% - 68px);
  border-top: 2px dashed var(--sf-border);
}

.customer-timeline li.done:not(:last-child)::after {
  border-top-color: var(--sf-teal);
  border-top-style: solid;
}

.customer-timeline span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: var(--sf-muted);
  background: var(--sf-sage-light);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: 50%;
  font-weight: 900;
}

.customer-timeline li.done span,
.customer-timeline li.active span {
  color: var(--sf-white);
  background: var(--sf-teal);
  border-color: var(--sf-teal);
}

.customer-timeline p {
  max-width: 120px;
  margin: 0;
  color: var(--sf-muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.customer-timeline li.done p,
.customer-timeline li.active p {
  color: var(--sf-teal-dark);
  font-weight: 900;
}

.customer-timeline li.future {
  opacity: 0.55;
}

.customer-timeline li.failed:not(:last-child)::after {
  border-top-color: #dc2626;
  border-top-style: solid;
}

.customer-timeline li.failed span {
  color: #fff;
  background: #dc2626;
  border-color: #dc2626;
  box-shadow: 0 0 0 5px rgba(220, 38, 38, 0.12);
}

.customer-timeline li.failed p {
  color: #991b1b;
}

.timeline-failure-reason {
  display: block;
  max-width: 120px;
  color: #991b1b;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.2;
}

/* Request detail panels */

.request-details {
  display: grid;
  gap: 8px;
  margin: 18px 0;
  padding: 18px;
  background: var(--sf-sage-light);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: var(--sf-radius-md);
}

.request-details p {
  margin: 0;
  color: var(--sf-muted);
}

.details-divider {
  border: none;
  border-top: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  margin: 6px 0;
}

/* Alert banners */

.return-request-banner,
.service-issue-banner,
.admin-warning-banner,
.track-auto-reversed-note,
.action-required-banner,
.payment-authorized-notice {
  border-radius: var(--sf-radius-sm);
  padding: 14px 16px;
  margin: 12px 0;
  font-size: 0.92rem;
}

.return-request-banner {
  background: #FFF0F0;
  border: 1px solid #E88;
  border-left: 4px solid var(--sf-danger);
}

.service-issue-banner,
.admin-warning-banner,
.action-required-banner,
.track-auto-reversed-note {
  color: #7A4800;
  background: #FFF8E1;
  border: 1px solid #F0C040;
  border-left: 4px solid #F0A000;
}

.payment-authorized-notice {
  color: #1B5E20;
  background: #E8F5E9;
  border: 1px solid #81C784;
}

@media (max-width: 760px) {
  .track-request-summary {
    align-items: flex-start;
  }

  .customer-timeline li {
    min-width: 96px;
  }

  .track-request-body {
    padding: 18px;
  }
}

/* =====================================================
   Step 15: Returning Customer page cleanup
===================================================== */

.returning-flow-shell {
  display: grid;
  gap: 22px;
  width: min(var(--sf-page-width), calc(100% - 40px));
  margin: 26px auto 74px;
  padding: 0;
}

.returning-flow-hero {
  display: grid;
  gap: 18px;
  padding: clamp(42px, 6vw, 76px);
  background: var(--sf-white);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: var(--sf-radius-md);
  box-shadow: var(--sf-shadow-card);
}

.returning-flow-hero h1 {
  max-width: 720px;
  margin: 0;
  color: var(--sf-teal-dark);
  font-size: clamp(2.4rem, 5vw, 4.4rem);
  line-height: 1;
  letter-spacing: -0.035em;
}

.returning-flow-hero p {
  max-width: 720px;
  color: var(--sf-muted);
  font-size: 1.08rem;
  line-height: 1.7;
}

/* Returning customer cards */

.returning-flow-card {
  display: grid;
  gap: 20px;
  padding: clamp(26px, 4vw, 38px);
  background: var(--sf-white);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: var(--sf-radius-md);
  box-shadow: var(--sf-shadow-card);
}

.returning-step-heading {
  display: flex;
  align-items: center;
  gap: 14px;
}

.returning-step-heading span {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  color: var(--sf-white);
  background: var(--sf-teal);
  border-radius: var(--sf-radius-pill);
  font-size: 0.84rem;
  font-weight: 900;
}

.returning-step-heading h2 {
  margin: 0;
  color: var(--sf-teal-dark);
  font-size: 1.55rem;
  font-weight: 900;
}

/* Lookup form */

.returning-verification-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  align-items: end;
  gap: 16px;
  margin-top: 4px;
}

.returning-verification-form .button {
  white-space: nowrap;
}

/* Saved address / vehicle options */

.returning-picker-grid,
.returning-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.returning-option-card,
.returning-customer-card {
  display: grid;
  gap: 10px;
  width: 100%;
  padding: 20px;
  color: inherit;
  text-align: left;
  background: var(--sf-white);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: var(--sf-radius-md);
  box-shadow: var(--sf-shadow-soft);
}

.returning-option-card:hover,
.returning-customer-card:hover {
  border-color: rgb(var(--sf-primary-rgb, 13 59 59) / 0.32);
  box-shadow: var(--sf-shadow-card);
}

.returning-option-card.is-selected,
.returning-customer-card.is-selected {
  border-color: var(--sf-teal);
  background: var(--sf-sage-light);
  box-shadow: 0 0 0 4px rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
}

.returning-customer-card span,
.returning-option-card strong {
  color: var(--sf-teal-dark);
  font-weight: 900;
}

.returning-customer-card small,
.returning-option-card small {
  color: var(--sf-muted);
  line-height: 1.45;
}

.returning-customer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

.returning-customer-actions .button {
  min-height: 40px;
  padding: 9px 14px;
  font-size: 0.86rem;
}

/* Add new address / vehicle inline forms */

.returning-inline-form {
  display: grid;
  gap: 16px;
  margin-top: 16px;
  padding: 20px;
  background: var(--sf-sage-light);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: var(--sf-radius-md);
}

/* Returning customer modal */

.returning-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(17, 24, 39, 0.45);
}

.returning-modal[hidden] {
  display: none;
}

.returning-modal-dialog {
  width: min(720px, 100%);
  max-height: min(92vh, 760px);
  overflow: auto;
  padding: 24px;
  background: var(--sf-white);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: var(--sf-radius-md);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22);
}

.returning-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.returning-modal-header h3 {
  margin: 0;
  color: var(--sf-teal-dark);
  font-weight: 900;
}

.returning-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

@media (max-width: 900px) {
  .returning-flow-shell {
    width: min(100% - 20px, 640px);
  }

  .returning-verification-form,
  .returning-picker-grid,
  .returning-option-grid {
    grid-template-columns: 1fr;
  }
}

/* =====================================================
   Step 16: Admin Portal visual cleanup
===================================================== */

.admin-portal-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, rgb(var(--sf-accent-rgb, 167 191 166) / 0.16), transparent 34rem),
    var(--sf-off-white);
}

/* Admin top navigation */

.admin-top-nav,
.admin-portal-page .portal-header {
  color: var(--sf-white);
  background: linear-gradient(135deg, var(--sf-teal), var(--sf-teal-dark));
  border-bottom: 0;
  box-shadow: var(--sf-shadow-header);
}

.admin-top-nav .logo,
.admin-portal-page .portal-header .logo {
  color: var(--sf-white);
}

.admin-top-nav .portal-header-label,
.admin-portal-page .portal-header-label {
  color: rgba(255, 255, 255, 0.76);
}

.admin-top-nav .portal-signout-btn,
.admin-portal-page .portal-signout-btn {
  color: var(--sf-white);
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  border-radius: var(--sf-radius-sm);
}

.admin-top-nav .portal-signout-btn:hover,
.admin-portal-page .portal-signout-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Admin page tabs */

.admin-page-tabs {
  display: flex;
  gap: 0;
  padding: 0 clamp(20px, 5vw, 72px);
  background: var(--sf-white);
  border-bottom: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  position: sticky;
  top: 0;
  z-index: 20;
}

.admin-page-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 15px 22px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  font-size: 0.95rem;
  font-weight: 900;
  color: var(--sf-muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.admin-page-tab:hover {
  color: var(--sf-teal-dark);
}

.admin-page-tab.active {
  color: var(--sf-teal);
  border-bottom-color: var(--sf-coral);
}

/* Admin hero/header */

.admin-hero {
  background: transparent;
  border-bottom: 0;
}

.admin-hero-top .section-heading {
  margin-bottom: 0;
}

.admin-hero .section-heading h1,
.admin-section .section-heading h2 {
  color: var(--sf-teal-dark);
}

.admin-hero .section-heading p,
.admin-section .section-heading p {
  color: var(--sf-muted);
}

/* Admin stat cards */

.admin-summary,
.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
}

.admin-summary div,
.admin-stat-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 20px;
  background: var(--sf-white);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: var(--sf-radius-md);
  box-shadow: var(--sf-shadow-card);
}

.admin-summary span,
.admin-stat-value {
  display: block;
  color: var(--sf-teal-dark);
  font-size: 1.8rem;
  font-weight: 900;
  line-height: 1;
}

.admin-summary p,
.admin-stat-label {
  margin: 6px 0 0;
  color: var(--sf-muted);
  font-size: 0.84rem;
  font-weight: 800;
}

/* Admin sections and toolbars */

.admin-section {
  background: transparent;
}

.admin-toolbar,
.request-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
}

.admin-view-buttons,
.admin-button-row,
.status-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Admin Marketing styles moved to admin-dashboard-polish.css (2026-07-08). */
.request-list {
  display: grid;
  gap: 18px;
  margin-top: 24px;
}

.request-card,
.empty-state {
  padding: 24px;
  background: var(--sf-white);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: var(--sf-radius-md);
  box-shadow: var(--sf-shadow-card);
}

.request-card-header h3 {
  margin-bottom: 0;
  color: var(--sf-teal-dark);
  font-weight: 900;
}

.request-details {
  display: grid;
  gap: 8px;
  margin: 20px 0;
  padding: 18px;
  background: var(--sf-sage-light);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: var(--sf-radius-md);
}

.request-details p {
  margin: 0;
  color: var(--sf-muted);
}

/* Admin action panels */

.admin-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-items: end;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
}

.admin-edit-panel,
.return-location-panel,
.receipt-panel,
.inspection-panel,
.complete-panel,
.photo-panel,
.worker-availability-window,
.total-edit-panel,
.edit-total-charge-form,
.guided-step {
  display: grid;
  gap: 14px;
  margin-top: 16px;
  padding: 18px;
  background: var(--sf-white);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: var(--sf-radius-md);
  box-shadow: var(--sf-shadow-soft);
}

.admin-edit-panel[hidden],
.return-location-panel[hidden],
.receipt-panel[hidden],
.inspection-panel[hidden],
.complete-panel[hidden],
.photo-panel[hidden],
.worker-availability-window[hidden],
.total-edit-panel[hidden],
.edit-total-charge-panel[hidden],
.key-returned-other-wrap[hidden] {
  display: none;
}

/* Admin warning/action banners */

.deny-panel,
.unable-panel,
.cancel-panel {
  display: grid;
  gap: 14px;
  margin-top: 16px;
  padding: 18px;
  background: #FFF7F7;
  border: 1px solid #E2B7B7;
  border-left: 4px solid var(--sf-danger);
  border-radius: var(--sf-radius-md);
}

.deny-panel[hidden],
.unable-panel[hidden],
.cancel-panel[hidden] {
  display: none;
}

.admin-warning-banner {
  background: #FFF8E1;
  border: 1px solid #F0C040;
  border-radius: var(--sf-radius-sm);
  padding: 12px 14px;
  margin: 8px 0 12px;
  color: #7A4800;
  font-size: 0.92rem;
  border-left: 4px solid #F0A000;
}

/* Admin worker assignment cards */

.worker-assignment-panel,
.assigned-worker-card {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) minmax(180px, 260px);
  gap: 14px;
  align-items: center;
  margin-top: 16px;
  padding: 16px;
  background: var(--sf-white);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: var(--sf-radius-md);
  box-shadow: var(--sf-shadow-soft);
}

.assigned-worker-card {
  grid-template-columns: 72px minmax(0, 1fr);
}

/* Admin modal cleanup */

.modal-dialog,
.ticket-detail-dialog,
.find-tickets-dialog {
  background: var(--sf-white);
  border-radius: var(--sf-radius-md);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22);
}

.modal-header {
  padding: 18px 22px 14px;
  border-bottom: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
}

.modal-header h2 {
  color: var(--sf-teal-dark);
  font-weight: 900;
}

@media (max-width: 900px) {
  .admin-toolbar,
  .request-card-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .worker-assignment-panel {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .worker-select-label {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .admin-summary,
  .admin-stat-grid {
    grid-template-columns: 1fr;
  }

  .worker-assignment-panel {
    grid-template-columns: 1fr;
  }

  .worker-assignment-panel .worker-avatar {
    display: none;
  }

  .request-card {
    padding: 18px;
  }
}

/* =====================================================
   Step 17: Worker Portal visual cleanup
===================================================== */

/* Worker top header */

.worker-portal-page .portal-header {
  color: var(--sf-white);
  background: linear-gradient(135deg, var(--sf-teal), var(--sf-teal-dark));
  border-bottom: 0;
  box-shadow: var(--sf-shadow-header);
}

.worker-portal-page .portal-header .logo {
  color: var(--sf-white);
}

.worker-portal-page .portal-header-label {
  color: rgba(255, 255, 255, 0.76);
}

.worker-portal-page .portal-signout-btn {
  color: var(--sf-white);
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  border-radius: var(--sf-radius-sm);
}

.worker-portal-page .portal-signout-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Worker hero */

.worker-portal-hero h1,
.worker-portal-hero h2 {
  color: var(--sf-teal-dark);
}

/* Worker account/status section */

.worker-account-section {
  background: transparent;
}

/* Worker job cards */

.worker-job-card,
.worker-profile-card,
.worker-availability-window,
.worker-calendar-month {
  background: var(--sf-white);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: var(--sf-radius-md);
  box-shadow: var(--sf-shadow-card);
}

/* Worker action panels */

.photo-upload-panel,
.review-panel,
.guided-step,
.return-location-panel,
.receipt-panel,
.inspection-panel,
.complete-panel,
.photo-panel,
.total-edit-panel {
  display: grid;
  gap: 14px;
  margin-top: 16px;
  padding: 18px;
  background: var(--sf-white);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: var(--sf-radius-md);
  box-shadow: var(--sf-shadow-soft);
}

.photo-upload-panel[hidden],
.review-panel[hidden],
.guided-step[hidden],
.return-location-panel[hidden],
.receipt-panel[hidden],
.inspection-panel[hidden],
.complete-panel[hidden],
.photo-panel[hidden],
.total-edit-panel[hidden] {
  display: none;
}

/* Worker status buttons */

.status-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.status-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 18px;
  color: var(--sf-white);
  background: var(--sf-teal);
  border: 1px solid var(--sf-teal);
  border-radius: var(--sf-radius-sm);
  font-weight: 900;
  cursor: pointer;
}

.status-btn:hover {
  background: var(--sf-teal-dark);
  border-color: var(--sf-teal-dark);
}

.status-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Worker profile photo area */

.worker-avatar,
.worker-profile-photo-frame {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: 50%;
  background: var(--sf-sage-light);
}

.worker-profile-photo-frame {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  position: relative;
  overflow: visible;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface-soft);
}

.worker-profile-photo-frame--large {
  width: 120px;
  height: 120px;
}

.worker-avatar-placeholder,
.worker-profile-photo-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  color: var(--sf-muted);
  font-size: 0.75rem;
  font-weight: 900;
  text-align: center;
}

.worker-profile-photo {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  object-position: center;
}

.worker-photo-editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.worker-photo-editor-actions[hidden] {
  display: none;
}

/* Worker calendar / availability */

.worker-schedule-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.worker-days-grid {
  display: grid;
  gap: 10px;
}

.worker-day-row {
  display: grid;
  grid-template-columns: minmax(150px, 220px) repeat(2, minmax(130px, 180px)) minmax(170px, auto);
  gap: 12px;
  align-items: end;
  padding: 14px;
  background: var(--sf-white);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: var(--sf-radius-md);
  box-shadow: var(--sf-shadow-soft);
}

.worker-day-toggle {
  justify-self: start;
  align-self: center;
  min-height: 46px;
  width: fit-content;
  padding: 8px 12px;
  color: var(--sf-teal-dark);
  background: var(--sf-sage-light);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: var(--sf-radius-sm);
  font-weight: 900;
  cursor: pointer;
}

.worker-day-copy-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
}

.worker-days-off-calendar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.calendar-day {
  display: grid;
  min-height: 38px;
  place-items: center;
  color: var(--sf-charcoal);
  background: var(--sf-sage-light);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: var(--sf-radius-sm);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.calendar-day:hover {
  color: var(--sf-teal-dark);
  border-color: var(--sf-teal);
}

.calendar-day.day-off {
  color: var(--sf-white);
  background: var(--sf-danger);
  border-color: var(--sf-danger);
}

.calendar-day:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Worker alerts */

.return-request-banner,
.service-issue-banner {
  border-radius: var(--sf-radius-sm);
  padding: 14px 16px;
  margin: 12px 0;
}

.return-request-banner {
  background: #FFF0F0;
  border: 1px solid #E88;
  border-left: 4px solid var(--sf-danger);
}

.return-request-banner h4 {
  margin: 0 0 6px;
  color: #8A2C1F;
}

.service-issue-banner {
  color: #7A4800;
  background: #FFF8E1;
  border: 1px solid #F0C040;
  border-left: 4px solid #F0A000;
}

.service-issue-banner strong {
  display: block;
  margin-bottom: 4px;
  color: #7A4800;
}

.service-issue-banner p {
  margin: 0;
  color: var(--sf-muted);
  font-size: 0.9rem;
}

@media (max-width: 900px) {
  .worker-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    margin-top: 18px;
  }

  .worker-day-row {
    grid-template-columns: 1fr;
  }

  .worker-days-off-calendar {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .worker-stat-grid,
  .worker-schedule-actions {
    grid-template-columns: 1fr;
  }

  .worker-job-card,
  .worker-profile-card {
    padding: 16px;
  }
}

/* =====================================================
   Step 18: Portal login pages cleanup
===================================================== */

.portal-login-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, rgb(var(--sf-accent-rgb, 167 191 166) / 0.2), transparent 34rem),
    linear-gradient(180deg, var(--sf-off-white), #ffffff);
}

.portal-login-page main {
  min-height: calc(100vh - 84px);
}

.portal-login-shell {
  display: grid;
  align-content: center;
  justify-content: center;
  min-height: calc(100vh - 84px);
  padding: 48px 20px;
}

.portal-login-card {
  display: grid;
  justify-items: center;
  gap: 10px;
  width: min(440px, 100%);
  padding: clamp(30px, 5vw, 44px);
  text-align: center;
  background: var(--sf-white);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: var(--sf-radius-md);
  box-shadow: var(--sf-shadow-card);
}

.portal-login-icon {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin-bottom: 8px;
  color: var(--sf-teal-dark);
  background: var(--sf-sage-light);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: 50%;
}

.portal-login-icon svg {
  width: 28px;
  height: 28px;
}

.portal-login-card h1 {
  margin: 0;
  color: var(--sf-teal-dark);
  font-size: 1.85rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.portal-login-intro {
  max-width: 340px;
  margin: 0 0 12px;
  color: var(--sf-muted);
  font-size: 0.94rem;
  line-height: 1.55;
}

/* ── Password show/hide toggle ── */
.password-field-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
}
.password-field-wrap input {
  flex: 1;
  padding-right: 44px;
}
.password-toggle-btn {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: #7a9696;
  padding: 0;
  border-radius: 6px;
  flex-shrink: 0;
}
.password-toggle-btn:hover { color: var(--sf-teal-dark, var(--sf-primary)); }
.password-toggle-btn svg { width: 18px; height: 18px; display: block; }

.portal-login-card .booking-form {
  display: grid;
  gap: 16px;
  width: 100%;
  text-align: left;
}

.portal-login-card .booking-form label {
  color: var(--sf-teal-dark);
  font-weight: 900;
}

.portal-login-card .booking-form .button {
  width: 100%;
  justify-content: center;
  margin-top: 4px;
}

.portal-login-card #login-message,
.portal-login-card #worker-login-message {
  margin: 0;
  min-height: 22px;
  color: var(--sf-danger);
  font-size: 0.9rem;
  font-weight: 700;
}

/* Portal login header */

.portal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: min(var(--sf-page-width), calc(100% - 40px));
  margin: 18px auto 0;
  padding: 18px 22px;
  color: var(--sf-white);
  background: linear-gradient(135deg, var(--sf-teal), var(--sf-teal-dark));
  border-radius: var(--sf-radius-sm);
  box-shadow: var(--sf-shadow-header);
}

.portal-header .logo {
  color: var(--sf-white);
}

.portal-back-link {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.88rem;
  font-weight: 800;
  text-decoration: none;
}

.portal-back-link:hover {
  color: var(--sf-white);
  text-decoration: underline;
}

.portal-header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.portal-header-label {
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.86rem;
  font-weight: 800;
}

.portal-signout-btn {
  color: var(--sf-white);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--sf-radius-sm);
  padding: 8px 14px;
  font-size: 0.86rem;
  font-weight: 900;
  cursor: pointer;
}

.portal-signout-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Older admin login layout fallback */

.portal-login-page .admin-hero {
  min-height: calc(100vh - 84px);
  display: grid;
  align-content: center;
  gap: 28px;
  background: transparent;
  border-bottom: 0;
}

.portal-login-page .admin-hero .section-heading {
  max-width: 640px;
  margin-bottom: 0;
}

.portal-login-page .admin-hero .section-heading h1 {
  color: var(--sf-teal-dark);
}

.portal-login-page .admin-hero .section-heading p {
  color: var(--sf-muted);
}

.portal-login-page .admin-hero .booking-form {
  width: min(100%, 640px);
  background: transparent;
  box-shadow: none;
}

.portal-login-page .admin-hero .booking-form fieldset {
  padding: 30px;
  background: var(--sf-white);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: var(--sf-radius-md);
  box-shadow: var(--sf-shadow-card);
}

@media (max-width: 640px) {
  .portal-header {
    width: min(100% - 20px, 640px);
    align-items: flex-start;
    flex-direction: column;
  }

  .portal-header-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .portal-login-card {
    padding: 26px 20px;
  }
}

/* =====================================================
   Step 19: Photo upload, receipt, and proof cleanup
===================================================== */

/* Upload / receipt panels */

.photo-upload-panel,
.photo-panel,
.receipt-panel,
.inspection-panel,
.complete-panel {
  display: grid;
  gap: 14px;
  margin-top: 18px;
  padding: 20px;
  background: var(--sf-white);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: var(--sf-radius-md);
  box-shadow: var(--sf-shadow-soft);
}

.photo-upload-panel[hidden],
.photo-panel[hidden],
.receipt-panel[hidden],
.inspection-panel[hidden],
.complete-panel[hidden] {
  display: none;
}

.photo-upload-panel h4,
.photo-panel h4,
.receipt-panel h4,
.inspection-panel h4,
.complete-panel h4 {
  margin: 0;
  color: var(--sf-teal-dark);
  font-weight: 900;
}

.photo-upload-panel p,
.photo-panel p,
.receipt-panel p,
.inspection-panel p,
.complete-panel p {
  color: var(--sf-muted);
}

/* Quick-inspection wizard: one field per screen (door-jamb PSI, then each tire). */
.inspection-step {
  display: grid;
  gap: 12px;
}

.inspection-step[hidden] {
  display: none;
}

.inspection-step-count {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sf-teal);
}

.inspection-step-nav {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 4px;
}

.inspection-step-nav .button.primary {
  margin-left: auto;
}

/* Fuel + Wash bundle "Save X%" badge on the service-selection card. */
.bundle-save-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e8f7ee;
  color: #137a3f;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  vertical-align: middle;
  white-space: nowrap;
}

.bundle-save-badge[hidden] {
  display: none;
}

/* Fuel + Wash bundle promo banner on the landing Services section. */
.bundle-landing-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 760px;
  margin: 0 auto 22px;
  padding: 12px 18px;
  border-radius: 14px;
  background: #e8f7ee;
  border: 1px solid #bfe6cd;
  color: var(--sf-primary);
  font-size: 0.95rem;
  text-decoration: none;
  transition: filter 0.15s ease;
}

.bundle-landing-banner:hover { filter: brightness(0.97); }
.bundle-landing-banner[hidden] { display: none; }

.bundle-landing-badge {
  padding: 3px 12px;
  border-radius: 999px;
  background: #137a3f;
  color: #fff;
  font-weight: 800;
  font-size: 0.82rem;
  white-space: nowrap;
}

/* File upload controls */

.file-button-control {
  display: grid;
  gap: 8px;
}

.file-button-control input[type="file"] {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.file-button-text,
.upload-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 44px;
  padding: 10px 16px;
  color: var(--sf-white);
  background: var(--sf-teal);
  border: 1px solid var(--sf-teal);
  border-radius: var(--sf-radius-sm);
  box-shadow: 0 10px 24px rgb(var(--sf-primary-rgb, 13 59 59) / 0.16);
  font-weight: 900;
  cursor: pointer;
}

.file-button-text:hover,
.upload-action-button:hover {
  background: var(--sf-teal-dark);
  border-color: var(--sf-teal-dark);
}

.upload-action-button {
  width: 100%;
  justify-self: stretch;
  grid-column: 1 / -1;
}

/* Browser default file button fallback */

.photo-panel input[type="file"]::file-selector-button,
.receipt-panel input[type="file"]::file-selector-button,
.photo-upload-panel input[type="file"]::file-selector-button,
.photo-action input[type="file"]::file-selector-button,
.worker-profile-form input[type="file"]::file-selector-button,
.worker-profile-card input[type="file"]::file-selector-button {
  min-height: 42px;
  margin-right: 10px;
  padding: 8px 14px;
  color: var(--sf-white);
  background: var(--sf-teal);
  border: 1px solid var(--sf-teal);
  border-radius: var(--sf-radius-sm);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.photo-panel input[type="file"]::file-selector-button:hover,
.receipt-panel input[type="file"]::file-selector-button:hover,
.photo-upload-panel input[type="file"]::file-selector-button:hover,
.photo-action input[type="file"]::file-selector-button:hover,
.worker-profile-form input[type="file"]::file-selector-button:hover,
.worker-profile-card input[type="file"]::file-selector-button:hover {
  background: var(--sf-teal-dark);
  border-color: var(--sf-teal-dark);
}

.selected-file-name {
  color: var(--sf-muted);
  font-size: 0.9rem;
}

/* Resume / worker application upload */

.resume-upload-control {
  display: grid;
  gap: 12px;
  padding: 18px;
  cursor: pointer;
  background: var(--sf-white);
  border: 1.5px dashed rgb(var(--sf-primary-rgb, 13 59 59) / 0.3);
  border-radius: var(--sf-radius-md);
  transition: background 0.15s, border-color 0.15s;
}

.resume-upload-control:hover,
.resume-upload-control:focus-within,
.resume-upload-control.drag-over {
  background: var(--sf-sage-light);
  border-color: var(--sf-teal);
}

.resume-upload-control .selected-file-name {
  color: var(--sf-teal-dark);
  font-weight: 800;
  font-size: 0.9rem;
  word-break: break-all;
}

.resume-upload-control .selected-file-name:empty::before,
.resume-upload-control .selected-file-name[data-empty]::before {
  content: "No file chosen";
  color: var(--sf-muted);
  font-weight: 400;
}

.resume-drop-hint {
  color: var(--sf-muted);
  font-size: 0.82rem;
}

/* Photo proof sections */

.photo-proof-section,
.photo-proof-sections {
  display: grid;
  gap: 14px;
  margin-top: 20px;
}

.photo-proof-section h3 {
  margin: 0;
  color: var(--sf-teal-dark);
  font-size: 1rem;
  font-weight: 900;
}

.photo-proof-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}

.photo-proof-card {
  display: grid;
  gap: 8px;
  color: inherit;
  text-decoration: none;
}

.photo-proof-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--sf-sage-light);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: var(--sf-radius-sm);
}

.photo-proof-card span {
  color: var(--sf-muted);
  font-size: 0.85rem;
  text-transform: capitalize;
}

.photo-proof-loaded {
  cursor: zoom-in;
}

.photo-proof-loaded img {
  transition: opacity 0.15s, transform 0.15s, box-shadow 0.15s;
}

.photo-proof-loaded:hover img,
.photo-proof-loaded:focus-visible img {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: var(--sf-shadow-soft);
}

.photo-proof-loaded:focus-visible {
  outline: 2px solid var(--sf-teal);
  outline-offset: 3px;
  border-radius: var(--sf-radius-sm);
}

.photo-proof-section-compact .photo-proof-grid {
  grid-template-columns: repeat(auto-fit, minmax(104px, 136px));
}

.photo-proof-section-compact .photo-proof-card img {
  max-width: 136px;
}

.photo-proof-missing {
  min-height: 120px;
  align-content: center;
  padding: 16px;
  background: var(--sf-sage-light);
  border: 1px dashed rgb(var(--sf-primary-rgb, 13 59 59) / 0.24);
  border-radius: var(--sf-radius-sm);
}

.photo-proof-missing p {
  margin: 0;
  color: var(--sf-muted);
}

/* Photo lightbox */

#photo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

#photo-lightbox[hidden] {
  display: none;
}

.photo-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
}

.photo-lightbox-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: min(92vw, 900px);
  max-height: 92vh;
  padding: 16px;
}

.photo-lightbox-img {
  display: block;
  max-width: 100%;
  max-height: calc(92vh - 80px);
  object-fit: contain;
  border-radius: var(--sf-radius-sm);
}

.photo-lightbox-caption {
  margin: 0;
  color: var(--sf-white);
  font-size: 0.9rem;
  text-transform: capitalize;
  opacity: 0.86;
}

.photo-lightbox-close {
  position: absolute;
  top: -10px;
  right: -10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--sf-white);
  background: rgba(255, 255, 255, 0.15);
  border: none;
  border-radius: 50%;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.photo-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.28);
}

/* Service / receipt photo modal */

.worker-photo-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.72);
}

.worker-photo-modal[hidden] {
  display: none;
}

.worker-photo-modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 420px;
}

.worker-photo-modal-content--service {
  max-width: min(90vw, 800px);
}

.worker-photo-modal-close {
  position: absolute;
  top: -12px;
  right: -12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--sf-charcoal);
  background: var(--sf-white);
  border: none;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  font-size: 1rem;
  cursor: pointer;
}

.worker-photo-modal-close:hover {
  background: var(--sf-sage-light);
}

.worker-photo-modal-image-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(240px, 75vw, 300px);
  height: clamp(240px, 75vw, 300px);
  overflow: hidden;
  background: var(--sf-sage-light);
  border-radius: 50%;
}

.worker-photo-modal-image-frame--service {
  width: min(85vw, 760px);
  height: auto;
  max-height: 80vh;
  border-radius: var(--sf-radius-sm);
  overflow: hidden;
  background: #111;
}

.worker-photo-modal-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.worker-photo-modal-image-frame--service .worker-photo-modal-img {
  width: 100%;
  height: 100%;
  max-height: 78vh;
  object-fit: contain;
  object-position: center;
  background: #111;
}

.worker-photo-modal-placeholder {
  color: var(--sf-muted);
  font-size: 0.875rem;
}

.worker-photo-modal-name {
  margin: 0;
  color: var(--sf-white);
  font-size: 1.1rem;
  font-weight: 800;
  text-align: center;
}

/* =====================================================
Step 20: Final desktop polish and mobile cleanup
===================================================== */

/* Global spacing polish */

.section,
.admin-section,
.worker-account-section,
.track-shell,
.booking-flow-shell,
.returning-flow-shell,
#worker-jobs {
scroll-margin-top: 110px;
}

.section-heading {
max-width: 820px;
}

.section-heading h1,
.section-heading h2 {
letter-spacing: -0.03em;
}

.section-heading p {
line-height: 1.65;
}

/* Prevent wide content from breaking layout */

img,
video,
canvas,
svg {
max-width: 100%;
}

table {
width: 100%;
border-collapse: collapse;
}

.card,
.request-card,
.track-request-card,
.worker-job-card,
.admin-stat-card,
.pricing-card,
.returning-flow-card,
.track-search-card,
.booking-accordion-card,
.booking-summary-sidebar {
min-width: 0;
}

/* Button polish */

.button,
.status-btn,
.admin-page-tab,
.portal-button,
.summary-edit,
.worker-day-toggle,
.calendar-day {
transition:
background 0.15s ease,
border-color 0.15s ease,
color 0.15s ease,
box-shadow 0.15s ease,
transform 0.15s ease;
}

.button:hover,
.status-btn:hover,
.portal-button:hover,
.summary-edit:hover {
transform: translateY(-1px);
}

.button:active,
.status-btn:active,
.portal-button:active,
.summary-edit:active {
transform: translateY(0);
}

/* Inputs final polish */

input,
select,
textarea {
min-width: 0;
}

input:focus,
select:focus,
textarea:focus {
outline: 3px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.16);
outline-offset: 1px;
}

/* Better card hover, but only on clickable cards */

.pricing-card,
.returning-option-card,
.returning-customer-card,
.track-request-card,
.worker-job-card,
.request-card {
transition:
border-color 0.15s ease,
box-shadow 0.15s ease,
transform 0.15s ease;
}

.pricing-card:hover,
.returning-option-card:hover,
.returning-customer-card:hover,
.track-request-card:hover,
.worker-job-card:hover {
transform: translateY(-2px);
}

/* Homepage responsive cleanup */

@media (max-width: 1100px) {
.booking-flow-hero {
grid-template-columns: 1fr;
}

.booking-flow-hero-image img {
min-height: 360px;
}

.how-it-works-grid,
.pricing-card-grid,
.safety-row {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.how-it-works-grid li:not(:last-child)::after {
display: none;
}

.safety-row > div {
padding-right: 0;
border-right: 0;
}
}

/* Booking responsive cleanup */

@media (max-width: 1100px) {
.booking-layout {
grid-template-columns: 1fr;
}

.booking-summary-sidebar {
position: static;
}

.booking-progress-rail {
overflow-x: auto;
}
}

/* Admin/worker responsive cleanup */

@media (max-width: 1000px) {
.admin-page-tabs {
overflow-x: auto;
padding-inline: 20px;
}

.admin-page-tab {
white-space: nowrap;
}

.admin-actions {
grid-template-columns: 1fr;
}

.worker-stat-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}

/* Tablet cleanup */

@media (max-width: 820px) {
.main-header,
.portal-header {
width: min(100% - 20px, 640px);
}

.header-inner {
min-height: auto;
padding: 14px 0;
}

.final-cta-portals,
.admin-view-buttons,
.admin-button-row,
.status-buttons,
.returning-customer-actions {
width: 100%;
}

.final-cta-portals .portal-button,
.admin-view-buttons .button,
.admin-button-row .button,
.status-buttons .button,
.status-buttons .status-btn,
.returning-customer-actions .button {
flex: 1 1 180px;
justify-content: center;
}

.portal-closing-banner {
align-items: flex-start;
flex-direction: column;
}

.final-cta-main {
align-items: flex-start;
}
}

/* Phone cleanup */

@media (max-width: 640px) {
body {
font-size: 15px;
}

.page-shell,
.section,
.track-shell,
.booking-flow-shell,
.returning-flow-shell,
.site-footer,
.portal-closing-banner {
width: min(100% - 20px, 640px);
}

.booking-flow-hero-copy,
.returning-flow-hero {
padding: 30px 20px;
}

.booking-flow-hero h1,
.returning-flow-hero h1 {
font-size: clamp(2.25rem, 13vw, 3rem);
}

.booking-flow-hero-image img {
min-height: 280px;
}

.how-it-works-grid,
.pricing-card-grid,
.safety-row,
.returning-picker-grid,
.returning-option-grid,
.worker-stat-grid {
grid-template-columns: 1fr;
}

.pricing-card,
.track-search-card,
.returning-flow-card,
.booking-summary-sidebar,
.request-card,
.worker-job-card,
.worker-profile-card {
padding: 20px;
}

.booking-progress-rail {
padding: 16px;
}

.rail-step {
width: 42px;
height: 42px;
}

.track-request-summary,
.track-section > summary {
padding: 16px;
}

.track-request-body,
.track-section-body {
padding: 16px;
}

.customer-timeline {
margin: 18px 0;
}

.footer-main,
.footer-groups,
.footer-links {
flex-direction: column;
align-items: flex-start;
gap: 20px;
}

.site-footer {
margin-bottom: 14px;
}
}

/* Very small phones */

@media (max-width: 420px) {
.button,
.status-btn,
.portal-button {
width: 100%;
}

.final-cta-portals,
.status-buttons,
.admin-button-row,
.returning-customer-actions {
flex-direction: column;
}

/* In a flex column, flex-grow:1 (from the desktop "share the row" rule) makes
   buttons balloon vertically. Pin booking buttons to their natural height. */
.booking-accordion-card .admin-button-row .button {
flex: 0 0 auto;
}

.track-search-heading,
.returning-step-heading,
.final-cta-main {
align-items: flex-start;
flex-direction: column;
}

.summary-row {
grid-template-columns: auto 1fr;
}

.summary-edit {
grid-column: 1 / -1;
justify-self: start;
}
}

.wash-summary-list {
  display: grid;
  gap: 10px;
  margin: 18px 0;
}

.wash-summary-item {
  padding: 10px 0;
  border-bottom: 1px solid rgba(0, 45, 42, 0.1);
}

.wash-summary-item:last-child {
  border-bottom: 0;
}

.wash-summary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  list-style: none;
}

/* Hide the default disclosure triangle; we use our own caret. */
.wash-summary-header::-webkit-details-marker { display: none; }

.wash-summary-header strong,
.wash-summary-header span {
  color: var(--ink, #002d2a);
  font-weight: 800;
}

/* Caret sits between the name and the price, rotating when open. */
.wash-summary-header strong::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 8px;
  border-right: 2px solid var(--muted, #56615f);
  border-bottom: 2px solid var(--muted, #56615f);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.15s ease;
  vertical-align: middle;
}

.wash-summary-item[open] .wash-summary-header strong::after {
  transform: rotate(-135deg) translateY(-1px);
}

.wash-summary-header span {
  white-space: nowrap;
  margin-left: auto;
}

.wash-summary-item p {
  margin: 6px 0 0;
  color: var(--muted, #56615f);
  font-size: 0.88rem;
  line-height: 1.45;
}

/* Customer-cancellation alert badge in the admin Requests Queue toolbar. */
.cancellation-alert-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 12px;
  border: 1px solid #f0b4a8;
  border-radius: 999px;
  background: #fdece8;
  color: #b42318;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  animation: cancellation-badge-pulse 1.8s ease-in-out infinite;
}

.cancellation-alert-badge:hover {
  background: #fbdcd4;
}

.cancellation-alert-badge[hidden] {
  display: none;
}

@keyframes cancellation-badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(180, 35, 24, 0.28); }
  50% { box-shadow: 0 0 0 6px rgba(180, 35, 24, 0); }
}

/* Admin portal redesign */
.admin-portal-page {
  /* Admin accent vars now flow from the active role ramp (theme.css / data-theme="admin").
     These drive focus rings, search borders, stat accents, nav active states, etc.,
     so the admin portal reads purple centrally. True success/danger use --sf-success/--sf-danger. */
  --admin-ink: var(--sf-primary-dark);
  --admin-green: var(--sf-primary);
  --admin-green-2: var(--sf-primary-soft);
  --admin-mint: var(--sf-primary-muted);
  --admin-line: rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  --admin-shadow: 0 18px 50px rgb(var(--sf-primary-rgb, 13 59 59) / 0.08);
  --admin-sticky-header-height: 96px;
  --admin-header-clearance: 24px;
  background: var(--sf-surface-soft);
  color: var(--admin-ink);
}

.admin-top-nav {
  color: #ffffff;
  background: linear-gradient(135deg, var(--sf-primary), var(--sf-primary-dark));
  border-bottom: 0;
  backdrop-filter: none;
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: 70px;
  align-items: center;
  gap: 22px;
  box-shadow: 0 12px 28px rgba(0, 45, 42, 0.18);
}

.admin-top-nav .logo {
  color: #ffffff;
  justify-self: start;
  white-space: nowrap;
}

.admin-top-nav .portal-header-actions {
  justify-self: end;
}

.admin-top-nav .logo,
.admin-top-nav .admin-page-tab,
.admin-top-nav .portal-header-label,
.admin-top-nav .portal-signout-btn {
  color: #fff;
}

.admin-top-nav .logo-mark,
.admin-avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--sf-accent);
  color: var(--sf-primary-dark);
  font-weight: 900;
}

.admin-top-nav .admin-page-tabs {
  position: static;
  padding: 0;
  background: none;
  border-bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto;
  min-width: 0;
}

.admin-top-nav .admin-page-tab {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.88rem;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  padding: 24px 8px 20px;
  font-weight: 800;
  opacity: 0.86;
  white-space: nowrap;
}

.admin-top-nav .admin-page-tab.active {
  color: #ffffff;
  border-bottom-color: #ff685a;
  opacity: 1;
}

.admin-notification-bell {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  color: #fff;
  font-weight: 900;
}

.admin-main {
  padding: var(--admin-header-clearance) 24px 32px;
}

.admin-hero,
.admin-section,
.admin-page-row,
.admin-shortcut-grid {
  max-width: var(--sf-page-width);
  margin-left: auto;
  margin-right: auto;
}

.admin-portal-page .section {
  padding: 14px 0;
  scroll-margin-top: calc(var(--admin-sticky-header-height) + var(--admin-header-clearance));
}

.admin-portal-page .admin-hero,
.admin-portal-page .admin-section,
.admin-portal-page .admin-queue-section,
.admin-portal-page .admin-marketing-section,
.admin-portal-page .admin-queue-card,
.admin-portal-page #request-list {
  scroll-margin-top: calc(var(--admin-sticky-header-height) + var(--admin-header-clearance));
}

.admin-hero {
  padding-top: 0;
  background: transparent;
  box-shadow: none;
}

.admin-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 28px;
}

.admin-hero-stats {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--admin-line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  flex-shrink: 0;
  margin-top: 14px;
  width: fit-content;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.admin-hero-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.admin-date-range select {
  padding: 11px 14px;
  border: 1px solid var(--admin-line);
  border-radius: 12px;
  background: #fff;
  color: var(--admin-ink);
  font-weight: 800;
  font-size: 0.86rem;
}

/* Mobile-only shortcut into the Find page from the queue toolbar (shown by a
   mobile rule in mobile-polish.css; hidden everywhere else). */
.queue-goto-find { display: none; }

.admin-find-tickets-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.admin-date-range-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.custom-range-inputs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.custom-range-inputs[hidden] {
  display: none;
}

.custom-range-inputs input[type="date"] {
  padding: 9px 10px;
  border: 1px solid var(--admin-line);
  border-radius: 12px;
  background: #fff;
  color: var(--admin-ink);
  font-weight: 700;
  font-size: 0.82rem;
}

.custom-range-sep {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--admin-muted, #5b6b6b);
}

.custom-range-apply {
  padding: 9px 16px;
  min-height: 0;
}

.admin-filters-wrap {
  position: relative;
}

.admin-filters-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.admin-filters-btn svg {
  width: 16px;
  height: 16px;
}

.admin-filters-btn.has-active-filters {
  border-color: var(--admin-green);
  color: var(--admin-green);
}

.admin-filters-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 50;
  display: grid;
  gap: 12px;
  width: 240px;
  padding: 16px;
  border: 1px solid var(--admin-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 24px 60px rgb(var(--sf-primary-rgb, 13 59 59) / 0.28), 0 2px 8px rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
}

.admin-filters-panel[hidden] {
  display: none;
}

.admin-filters-panel label {
  display: grid;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--admin-ink);
}

.admin-filters-panel select,
.admin-filters-panel input[type="search"] {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--admin-line);
  border-radius: 10px;
  font-size: 0.86rem;
}

.admin-filters-panel .filter-search-field {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--admin-line);
}

.admin-filters-panel #filter-clear-btn {
  margin-top: 2px;
}

.filter-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: 2px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--admin-green);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
}

/* Shared portal header for admin, worker, and portal login pages */

.unified-portal-header {
  position: sticky;
  top: 18px;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(14px, 2vw, 24px);
  width: min(var(--sf-page-width), calc(100% - 40px));
  min-height: auto;
  margin: 18px auto 0;
  padding: 18px 22px;
  color: var(--sf-white);
  background: linear-gradient(135deg, var(--sf-teal), var(--sf-teal-dark));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--sf-radius-sm);
  box-shadow: var(--sf-shadow-header);
}

.unified-portal-header .logo {
  flex: 0 0 auto;
  color: var(--sf-white);
  white-space: nowrap;
}

.admin-portal-page .unified-portal-header .logo,
.worker-portal-page .unified-portal-header .logo {
  cursor: pointer;
}

.unified-portal-header .logo-mark {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 0;
  background: transparent;
  color: var(--sf-sage);
  font-size: 1.7rem;
  font-weight: 900;
  font-style: italic;
  line-height: 1;
}

.unified-portal-header .portal-public-nav,
.unified-portal-header .portal-cta-links,
.unified-portal-header .portal-header-actions {
  display: flex;
  align-items: center;
}

.unified-portal-header .portal-public-nav {
  gap: 18px;
  margin-left: auto;
}

.unified-portal-header .portal-public-nav a {
  color: var(--sf-white);
  font-size: 0.86rem;
  font-weight: 850;
  text-decoration: none;
  white-space: nowrap;
}

.unified-portal-header .portal-public-nav a:hover {
  color: #ffffff;
  opacity: 0.82;
}

.unified-portal-header .portal-cta-links {
  gap: 10px;
}

.unified-portal-header .portal-cta-links .button,
.unified-portal-header .portal-signout-btn {
  min-height: 42px;
  padding: 10px 18px;
  white-space: nowrap;
}

.unified-portal-header .portal-cta-links .button.secondary,
.unified-portal-header .portal-signout-btn {
  color: var(--sf-white);
  background: transparent;
  border-color: rgba(255, 255, 255, 0.58);
}

.unified-portal-header .portal-header-actions {
  gap: 12px;
  margin-left: auto;
}

.unified-portal-header .portal-header-label {
  color: rgba(255, 255, 255, 0.86);
  font-weight: 900;
  line-height: 1.15;
  white-space: nowrap;
}

.unified-portal-header .portal-header-label small {
  color: rgba(255, 255, 255, 0.68);
  font-weight: 700;
}

.unified-portal-header .admin-page-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto;
  min-width: 0;
  padding: 0;
  background: transparent;
  border-bottom: 0;
  position: static;
}

.unified-portal-header .admin-page-tab {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  padding: 24px 8px 20px;
  color: var(--sf-white);
  font-weight: 800;
  opacity: 0.86;
  white-space: nowrap;
}

.unified-portal-header .admin-page-tab.active {
  border-bottom-color: #ff685a;
  color: var(--sf-white);
  opacity: 1;
}

.portal-login-header {
  margin: 0;
}

@media (max-width: 1100px) {
  .unified-portal-header {
    flex-wrap: wrap;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .unified-portal-header .portal-public-nav,
  .unified-portal-header .admin-page-tabs {
    order: 3;
    flex: 1 0 100%;
    justify-content: flex-start;
    overflow-x: auto;
    margin-left: 0;
    padding-bottom: 2px;
  }

  .unified-portal-header .portal-cta-links {
    margin-left: auto;
  }
}

@media (max-width: 760px) {
  .unified-portal-header {
    align-items: flex-start;
  }

  .unified-portal-header .logo {
    width: 100%;
  }

  .unified-portal-header .portal-public-nav,
  .unified-portal-header .portal-cta-links,
  .unified-portal-header .portal-header-actions {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .unified-portal-header .portal-cta-links .button,
  .unified-portal-header .portal-signout-btn {
    min-height: 38px;
    padding: 9px 14px;
  }
}

.hero-stat {
  display: grid;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.hero-stat-value {
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--brand);
  line-height: 1;
}

.hero-stat-label {
  font-size: 0.78rem;
  color: #5e6d69;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.hero-stat-divider {
  width: 1px;
  height: 34px;
  background: var(--admin-line);
}

.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.admin-stat-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 92px;
  padding: 16px;
  overflow: hidden;
  border: 1px solid var(--admin-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--admin-shadow);
}

.admin-stat-label,
.admin-stat-value {
  display: block;
}

.admin-stat-label {
  display: block;
  color: #314946;
  font-size: 0.78rem;
  font-weight: 850;
}

.admin-stat-value {
  display: block;
  margin-top: 4px;
  color: var(--admin-ink);
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  font-weight: 950;
}

.admin-stat-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  color: var(--admin-green);
  background: var(--admin-mint);
  border-radius: 50%;
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  flex: 0 0 40px;
}

.admin-stat-icon svg {
  width: 22px;
  height: 22px;
}

.admin-page-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.admin-page-content {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 16px;
}

.admin-page-content > .admin-hero {
  margin-bottom: 0;
}

.admin-queue-card,
.admin-side-card,
.admin-shortcut-card {
  border: 1px solid var(--admin-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--admin-shadow);
}

.admin-queue-card {
  padding: 16px;
}

.admin-pending-auth-section .admin-queue-card {
  border-color: #f0c36d;
  background: #fffaf0;
}

/* Action Needed — "what needs attention now" cards */
.action-needed-list {
  display: grid;
  gap: 10px;
}

.action-needed-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid #f0c36d;
  border-left: 4px solid #e0982f;
  border-radius: 12px;
  background: #fffaf0;
}

.action-needed-info {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.action-needed-title {
  color: #8a4b00;
  font-size: 0.98rem;
}

.action-needed-who {
  color: var(--admin-ink, #102a26);
  font-weight: 800;
  font-size: 0.9rem;
}

.action-needed-detail {
  color: #5e6d69;
  font-size: 0.85rem;
}

.action-needed-btn {
  flex: 0 0 auto;
}

/* Higher-severity issues read red instead of amber. */
.action-needed-payment,
.action-needed-stuck {
  border-color: #e9b3b0;
  border-left-color: #d9534f;
  background: #fdf4f3;
}

/* Awaiting-customer stubs are informational (not a problem) — read blue/neutral. */
.action-needed-awaiting {
  border-color: #b6d4ea;
  border-left-color: #2f7fbf;
  background: #f3f8fc;
}
.action-needed-awaiting .action-needed-title {
  color: #1d5b8a;
}
.action-needed-awaiting .action-needed-btn + .action-needed-btn {
  margin-left: 8px;
}

/* Admin-created stub banner + service-area awareness note (admin request card). */
.request-awaiting-banner {
  display: grid;
  gap: 8px;
  justify-items: start;
  padding: 12px 14px;
  margin: 10px 0;
  border: 1px solid #b6d4ea;
  border-left: 4px solid #2f7fbf;
  border-radius: 12px;
  background: #f3f8fc;
  font-size: 0.9rem;
}
.request-service-area-note,
.cr-service-area-badge {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  margin: 10px 0;
  border: 1px solid #d7dedb;
  border-left: 4px solid #7a8a86;
  border-radius: 10px;
  background: #f6f8f7;
  font-size: 0.88rem;
}
.request-service-area-ok,
.cr-service-area-ok {
  border-color: #bfe3cd;
  border-left-color: #1f7a4d;
  background: #f2faf5;
}
.request-service-area-warn,
.cr-service-area-warn {
  border-color: #f0c36d;
  border-left-color: #e0982f;
  background: #fffaf0;
}
.request-service-area-danger,
.cr-service-area-danger {
  border-color: #e9b3b0;
  border-left-color: #d9534f;
  background: #fdf4f3;
}

.admin-business-snapshot h2 {
  margin: 0 0 4px;
}

.settings-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  font-size: 0.86rem;
}
.settings-legal-label {
  font-weight: 800;
  color: #5e6d69;
}
.settings-legal a {
  color: var(--admin-green, #1f7a4d);
  text-decoration: none;
}
.settings-legal a:hover {
  text-decoration: underline;
}

/* Workers / Revenue stat drilldown: hide the request-only toolbar controls
   (Search Requests / date / filters / refresh) — they don't apply to workers. */
.admin-queue-section.stat-drilldown .admin-toolbar .admin-button-row {
  display: none;
}

/* Worker Snapshot rows are tappable (filter the Workers list by presence). */
.worker-snapshot-list li:hover,
.worker-snapshot-list li:focus-visible {
  background: rgba(31, 122, 77, 0.08);
  outline: none;
}

/* Presence-filter banner above the Workers list. */
.worker-filter-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin-bottom: 12px;
  border: 1px solid var(--admin-line, #e2e8e5);
  border-radius: 12px;
  background: #f4f8f6;
  font-size: 0.9rem;
}
.worker-filter-banner .button {
  flex: 0 0 auto;
}

/* Admin pending-auth + action-needed-title styles moved to admin-dashboard-polish.css (2026-07-08). */

.admin-dashboard-side {
  display: grid;
  gap: 14px;
  flex: 0 0 300px;
  width: 300px;
}

.admin-side-card {
  padding: 16px;
}

.admin-side-card h2 {
  margin: 0 0 12px;
  font-size: 1.02rem;
}

.admin-side-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-action-card {
  display: grid;
  width: 100%;
  gap: 4px;
  margin-top: 10px;
  padding: 15px 16px;
  border: 1px solid var(--admin-line);
  border-radius: 12px;
  background: #fff;
  color: var(--admin-ink);
  text-align: left;
}

.admin-action-card strong {
  font-size: 0.96rem;
}

.admin-action-card span {
  color: #66736f;
  font-size: 0.82rem;
}

.admin-link-button {
  border: 0;
  background: transparent;
  color: var(--admin-green);
  font-weight: 900;
}

.admin-request-tabs {
  display: flex;
  gap: 10px;
  margin: 18px 0;
  overflow-x: auto;
  border-bottom: 1px solid var(--admin-line);
}

.admin-request-tabs .summary-button {
  flex: 0 0 auto;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  padding: 12px 4px 13px;
  color: #40514e;
  font-weight: 850;
}

.admin-request-tabs .summary-button.active {
  border-bottom-color: var(--admin-green);
  color: var(--admin-ink);
}

.admin-requests-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.admin-requests-table th {
  padding: 0 12px 10px;
  text-align: left;
  color: #5e6d69;
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--admin-line);
}

.admin-requests-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--admin-line);
  vertical-align: middle;
}

.payment-indicator {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 5px 9px;
  border: 1px solid #d7dedb;
  border-radius: var(--sf-radius-pill);
  background: #f6f8f7;
  color: #40514e;
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1.2;
}

.payment-indicator--scheduled {
  border-color: #bfd4e8;
  background: #f2f7fc;
  color: #24506f;
}

.payment-indicator--authorized {
  border-color: #c7ddf6;
  background: #f0f6ff;
  color: #1d4f8f;
}

.payment-indicator--captured {
  border-color: #b2dfc2;
  background: #e8f7ee;
  color: #1a7a3a;
}

.payment-indicator--canceled {
  border-color: #d7dedb;
  background: #f3f4f4;
  color: #5e6d69;
}

.payment-indicator--attention {
  border-color: #f5c6c6;
  background: #fdf2f2;
  color: #b42318;
}

.queue-row:hover {
  background: var(--admin-mint);
}

.queue-row.is-expanded {
  background: var(--admin-mint);
}

/* Flash applied when a "Needs your attention" View request jump lands on the
   row, so the admin can spot the exact request the card pointed at. */
.queue-row.is-highlighted,
.queue-row.is-highlighted:hover {
  animation: queue-row-flash 2.4s ease-out;
}

@keyframes queue-row-flash {
  0%, 60% { background: #fff3cd; box-shadow: inset 3px 0 0 #f0c040; }
  100% { background: var(--admin-mint); box-shadow: inset 0 0 0 transparent; }
}

/* Floating notice for attention-card jump failures (no inline message area). */
.admin-action-notice {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 1200;
  max-width: min(92vw, 460px);
  padding: 12px 18px;
  border-radius: 12px;
  border: 1px solid #f0c040;
  background: #fff8e6;
  color: #6b4a00;
  font-weight: 600;
  box-shadow: 0 10px 24px rgb(var(--sf-primary-rgb, 13 59 59) / 0.18);
}

.queue-customer-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.queue-customer-cell div {
  display: grid;
}

.queue-customer-cell .field-help {
  margin: 0;
}

.queue-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--admin-mint);
  color: var(--admin-green);
  font-weight: 900;
  font-size: 0.78rem;
}

.status-pill-open {
  color: #8a5a00;
  background: #fff3cd;
  border-color: #f0c040;
}

.status-pill-progress {
  color: #1d4ed8;
  background: #e8eefe;
  border-color: #b9c9f7;
}

.queue-next-action-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.queue-row-kebab {
  border: 1px solid var(--admin-line);
  border-radius: 8px;
  background: #fff;
  width: 30px;
  height: 30px;
  line-height: 1;
  color: #5e6d69;
}

.queue-row-detail td {
  padding: 0 0 18px;
  border-bottom: 1px solid var(--admin-line);
}

.queue-row-detail .request-card {
  margin: 0;
  border-radius: 12px;
}

.admin-shortcut-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.admin-shortcut-card {
  display: grid;
  gap: 8px;
  min-height: 128px;
  padding: 20px;
  color: var(--admin-ink);
  text-align: left;
}

.admin-shortcut-card span {
  color: #66736f;
  font-size: 0.88rem;
  line-height: 1.45;
}

.admin-shortcut-card em {
  margin-top: auto;
  color: var(--admin-green);
  font-style: normal;
  font-weight: 900;
}

.worker-snapshot-list {
  display: grid;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.worker-snapshot-list li {
  cursor: pointer;
  border-radius: 8px;
  padding: 4px 6px;
  margin: 0 -6px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  color: #425450;
}

.worker-snapshot-list .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.dot.online { background: #26a269; }
.dot.break { background: #e6a700; }
.dot.busy { background: #4b8fd8; }
.dot.offline { background: #9aa7a3; }

.admin-summary.compact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.admin-summary.compact .summary-card {
  width: 100%;
  min-height: 0;
  padding: 13px 14px;
  text-align: left;
}

@media (max-width: 1180px) {
  .admin-stat-grid,
  .admin-shortcut-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-page-row {
    flex-direction: column;
  }

  .admin-dashboard-side {
    flex-basis: auto;
    width: 100%;
  }
}

/* Worker portal dashboard redesign */
.worker-portal-page {
  min-height: 100vh;
  background: var(--worker-soft);
  /* Local worker-portal vars now flow from the active role ramp (theme.css).
     On worker.html (data-theme="worker") this resolves to the blue palette. */
  --worker-ink: var(--sf-primary-dark);
  --worker-green: var(--sf-primary);
  --worker-red: #ff685a;
  --worker-soft: var(--sf-surface-soft);
  --worker-line: rgb(var(--sf-primary-rgb) / 0.12);
  --worker-shadow: 0 18px 48px rgb(var(--sf-primary-rgb) / 0.08);
  --worker-mint: var(--sf-primary-muted);
  --admin-ink: var(--worker-ink);
  --admin-green: var(--worker-green);
  --admin-line: var(--worker-line);
  --admin-shadow: var(--worker-shadow);
  --admin-mint: var(--worker-mint);
  color: var(--worker-ink);
}

.worker-top-nav .logo,
.worker-public-nav a,
.worker-portal-links .button.secondary,
.worker-top-nav .portal-header-label,
.worker-top-nav .portal-signout-btn {
  color: #fff;
}

.worker-public-nav,
.worker-portal-links {
  display: flex;
  align-items: center;
  gap: 18px;
}

.worker-public-nav {
  margin-left: auto;
}

.worker-public-nav a {
  font-size: 0.86rem;
  font-weight: 850;
  text-decoration: none;
}

.worker-portal-links .button {
  min-height: 42px;
  padding: 10px 20px;
  white-space: nowrap;
}

.worker-portal-links .button.secondary,
.worker-top-nav .portal-signout-btn {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.58);
}

.admin-portal-page .button.primary,
.worker-portal-page .button.primary {
  background: linear-gradient(135deg, var(--sf-teal), var(--sf-teal-dark));
  border-color: var(--sf-teal-dark);
  color: var(--sf-white);
}

.admin-portal-page .button.primary:hover,
.worker-portal-page .button.primary:hover {
  background: linear-gradient(135deg, var(--sf-teal-dark), var(--sf-teal-dark));
}

.worker-portal-links .button.primary {
  background: var(--worker-red);
  border-color: var(--worker-red);
}

.worker-portal-page main {
  display: grid;
  gap: 18px;
  padding: 18px 30px 28px;
}

.worker-portal-hero {
  min-height: 280px;
  display: grid;
  align-items: end;
  padding-top: 96px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.86) 42%, rgba(255, 255, 255, 0.12) 72%), url("/assets/shiftfuel-driving-hero.webp") center / cover;
  border-bottom: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  width: min(var(--sf-page-width), calc(100% - 40px));
  max-width: none;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--worker-line);
  border-radius: 16px;
  box-shadow: var(--worker-shadow);
}

.worker-hero-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 24px;
  align-items: center;
  min-height: 280px;
  padding: 32px;
}

.worker-portal-hero .section-heading {
  max-width: 620px;
}

.worker-portal-hero .eyebrow {
  color: #34514d;
  letter-spacing: 0;
  text-transform: none;
}

.worker-portal-hero h1 {
  margin: 6px 0 8px;
  color: var(--worker-ink);
  font-size: clamp(2.8rem, 7vw, 4.8rem);
  line-height: 0.95;
}

.worker-portal-hero p {
  color: #314946;
  font-size: 1.08rem;
}

.worker-portal-hero .actions {
  margin-top: 34px;
}

.worker-portal-hero .actions .button {
  min-width: 150px;
}

.worker-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.worker-card-heading h2,
.worker-profile-mini h2 {
  margin: 0;
  color: var(--worker-ink);
  font-size: 1.18rem;
}

.worker-shift-pill,
.worker-soft-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  border-radius: 999px;
  padding: 5px 10px;
  background: #e8f5ec;
  color: #277947;
  font-size: 0.78rem;
  font-weight: 900;
}

.worker-shift-pill::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #35a85a;
}

.worker-current-status-card dl,
.worker-profile-facts {
  display: grid;
  margin: 0;
}

.worker-current-status-card dl div,
.worker-profile-facts div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-top: 1px solid var(--worker-line);
}

.worker-current-status-card dt,
.worker-profile-facts dt {
  color: #5f6d69;
  font-size: 0.86rem;
}

.worker-current-status-card dd,
.worker-profile-facts dd {
  margin: 0;
  color: var(--worker-ink);
  font-weight: 850;
  text-align: right;
}

.worker-dashboard-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(360px, 0.95fr);
  gap: 18px;
  width: min(var(--sf-page-width), calc(100% - 40px));
  max-width: none;
  margin: 0 auto;
  padding: 0;
}

.worker-dashboard-main,
.worker-dashboard-side {
  display: grid;
  gap: 18px;
  align-content: start;
}

.worker-progress-card {
  overflow: hidden;
}

.worker-progress-dot {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 2px solid #d8e4df;
  border-radius: 50%;
  background: #fff;
  color: #485a56;
  font-size: 0.82rem;
  font-weight: 900;
}

.worker-progress-caption {
  color: #4e5f5b;
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.2;
}

.worker-progress-card .worker-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--worker-line);
}

.worker-progress-card .worker-stat-card {
  border: 0;
  border-right: 1px solid var(--worker-line);
  border-radius: 0;
  box-shadow: none;
}

.worker-progress-card .worker-stat-card:last-child {
  border-right: 0;
}

.worker-verified-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 900;
  color: #277947;
  background: #e8f7ee;
  border: 1px solid #b2dfc2;
  border-radius: 4px;
  padding: 2px 8px;
  margin-top: 4px;
  margin: 4px 0 10px;
}

.worker-profile-photo-frame .worker-verified-avatar-badge,
.tk-hero-avatar-wrap .worker-verified-avatar-badge,
.tk-partner-photo-wrap .worker-verified-avatar-badge {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  color: #fff;
  background: var(--sf-green, #1f7a45);
  border: 3px solid #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgb(var(--sf-primary-rgb, 13 59 59) / 0.2);
  z-index: 2;
}

.worker-profile-photo-frame:has(.worker-profile-photo-placeholder) .worker-verified-avatar-badge {
  display: none;
}

.worker-profile-photo-frame .worker-verified-avatar-badge svg,
.tk-hero-avatar-wrap .worker-verified-avatar-badge svg,
.tk-partner-photo-wrap .worker-verified-avatar-badge svg {
  width: 14px;
  height: 14px;
}

.tk-hero-avatar-wrap,
.tk-partner-photo-wrap {
  position: relative;
  display: inline-grid;
  flex: 0 0 auto;
}

.tk-hero-avatar-wrap .worker-verified-avatar-badge,
.tk-partner-photo-wrap .worker-verified-avatar-badge {
  right: -5px;
  bottom: -5px;
  width: 20px;
  height: 20px;
  border-width: 2px;
}

.tk-hero-avatar-wrap .worker-verified-avatar-badge svg,
.tk-partner-photo-wrap .worker-verified-avatar-badge svg {
  width: 12px;
  height: 12px;
}

.worker-portal-page .admin-section {
  width: min(var(--sf-page-width), calc(100% - 40px));
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid var(--worker-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--worker-shadow);
}

.worker-portal-page .portal-closing-banner {
  width: min(var(--sf-page-width), calc(100% - 40px));
  max-width: none;
  margin: 10px auto 0;
  border-radius: 14px;
}

@media (max-width: 1180px) {
  .worker-public-nav {
    display: none;
  }

  .worker-dashboard-layout,
  .worker-hero-content {
    grid-template-columns: 1fr;
  }

  .worker-current-status-card {
    max-width: 520px;
  }
}

@media (max-width: 760px) {
  .worker-portal-links {
    display: none;
  }

  .worker-portal-page main {
    padding: 14px;
  }

  .worker-hero-content {
    padding: 24px;
  }

  .worker-dashboard-layout {
    grid-template-columns: 1fr;
  }

  .worker-job-card .request-details,
  .worker-progress-card .worker-stat-grid {
    grid-template-columns: 1fr;
  }

  .worker-progress-line {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .admin-top-nav .admin-page-tabs {
    overflow-x: auto;
    flex-shrink: 1;
  }

  .admin-main {
    padding: 18px;
  }
}

@media (max-width: 640px) {
  .admin-hero-top {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-stat-grid,
  .admin-shortcut-grid {
    grid-template-columns: 1fr;
  }

  .admin-top-nav .portal-header-actions {
    gap: 8px;
  }

  .admin-top-nav .portal-header-label,
  .admin-top-nav .portal-signout-btn {
    display: none;
  }
}

/* Final shared-header overrides: keep public/admin/worker/login headers consistent. */

.site-header,
.unified-portal-header.worker-top-nav,
.portal-login-header.unified-portal-header {
  display: flex;
  align-items: center;
  min-height: 84px;
  width: min(var(--sf-page-width), calc(100% - 40px));
  margin: 18px auto 0;
  padding: 18px 22px;
  border-radius: var(--sf-radius-sm);
}

/* Compact staff (worker/admin) login header — logo + "Staff Access" + a small
   back link only. No customer marketing nav or CTA buttons. */
.portal-staff-header .portal-header-actions {
  margin-left: auto;
  align-items: center;
  gap: 16px;
}

.portal-back-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.portal-back-link svg { width: 16px; height: 16px; }
.portal-back-link:hover { color: #fff; text-decoration: underline; }

/* "Back to customer site" link under the login card. */
@media (max-width: 760px) {
  /* Keep the card near the top instead of vertically centered, so there's no
     large empty gap above the form on phones. */
  .portal-login-page .portal-login-shell {
    align-content: start;
    min-height: auto;
    padding: 24px 18px 40px;
  }

  .portal-staff-header .portal-header-actions {
    margin-left: 0;
    margin-top: 8px;
    width: 100%;
    justify-content: space-between;
  }
}

/* 3-column grid: equal-width side columns (1fr) keep the middle nav column at
   the true center of the header regardless of how wide the logo or actions
   cluster are. Reverts to flex on mobile (see max-width:760px block below). */
.unified-portal-header.admin-top-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 84px;
  width: min(var(--sf-page-width), calc(100% - 40px));
  margin: 18px auto 0;
  padding: 18px 22px;
  border-radius: var(--sf-radius-sm);
}

.unified-portal-header .portal-public-nav,
.unified-portal-header .portal-cta-links,
.unified-portal-header .portal-header-actions {
  display: flex;
}

@media (max-width: 1180px) {
  .unified-portal-header .portal-public-nav {
    display: flex;
  }
}

@media (max-width: 760px) {
  .unified-portal-header.worker-top-nav,
  .unified-portal-header.admin-top-nav,
  .portal-login-header.unified-portal-header {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 16px 18px;
  }

  .unified-portal-header .portal-cta-links,
  .unified-portal-header .portal-public-nav,
  .unified-portal-header .portal-header-actions {
    display: flex;
    width: 100%;
    justify-content: flex-start;
  }
}

.unified-portal-header .logo-mark {
  width: 36px;
  height: 36px;
  border-radius: 0;
  background: transparent;
  color: var(--sf-sage);
  font-size: 1.7rem;
  font-style: italic;
}

.unified-portal-header.admin-top-nav .admin-page-tab {
  min-height: 46px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
}

.unified-portal-header.admin-top-nav .admin-page-tabs {
  align-self: center;
}

.unified-portal-header.worker-top-nav .portal-header-actions {
  margin-left: auto;
}

/* Worker live-presence indicator (header) */
/* Keep customer-facing sub pages aligned with the header/footer width.
   Worker portal and admin login intentionally keep their own layouts. */

.booking-page .booking-flow-shell,
.track-page .booking-flow-shell,
.track-page .track-shell,
.worker-login-page .portal-login-shell {
  width: min(var(--sf-page-width), calc(100% - 40px));
  max-width: none;
  margin-inline: auto;
  place-items: center;
}

.worker-login-page .portal-login-card {
  width: min(640px, 100%);
}

.admin-portal-page .admin-hero,
.admin-portal-page .admin-section,
.admin-portal-page .admin-page-row,
.worker-portal-page .worker-portal-hero,
.worker-portal-page .worker-dashboard-layout,
.worker-portal-page .admin-section,
.worker-portal-page .portal-closing-banner {
  width: min(var(--sf-page-width), calc(100% - 40px));
  max-width: none;
}

/* ── Clickable stat cards ─────────────────────────────────────────────────── */

.admin-stat-card--clickable {
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.admin-stat-card--clickable:hover {
  border-color: rgb(var(--sf-primary-rgb, 13 59 59) / 0.28);
  box-shadow: 0 16px 40px rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  transform: translateY(-2px);
}

.admin-stat-card--clickable:active {
  transform: translateY(0);
  box-shadow: 0 8px 20px rgb(var(--sf-primary-rgb, 13 59 59) / 0.08);
}

.admin-stat-card--clickable.stat-card--active {
  border-color: var(--sf-teal, #0d9488);
  background: var(--sf-teal-lightest, #f0fdfa);
  box-shadow: 0 0 0 2px var(--sf-teal, #0d9488);
}

.admin-stat-card--clickable:focus-visible {
  outline: 2px solid var(--sf-teal);
  outline-offset: 2px;
}

/* ── Net Revenue breakdown inline panel ───────────────────────────────────── */

.revenue-breakdown-panel {
  background: #fff;
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.1);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgb(var(--sf-primary-rgb, 13 59 59) / 0.07);
  overflow: hidden;
  margin-top: 14px;
}

.revenue-breakdown-panel[hidden] {
  display: none;
}

.revenue-breakdown-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.08);
  background: rgb(var(--sf-accent-rgb, 167 191 166) / 0.1);
}

.revenue-breakdown-panel-header h3 {
  margin: 0 0 4px;
  font-size: 1rem;
  font-weight: 900;
  color: var(--sf-teal-dark);
}

.modal-close-btn {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: none;
  background: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: var(--muted);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.modal-close-btn:hover {
  background: rgb(var(--sf-primary-rgb, 13 59 59) / 0.07);
  color: var(--sf-teal-dark);
}

.revenue-breakdown-formula {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
}

#revenue-breakdown-body {
  padding: 0 20px 20px;
  overflow-x: auto;
}

.revenue-breakdown-empty {
  padding: 32px 0;
  text-align: center;
  color: var(--muted);
  font-size: 0.95rem;
}

.revenue-breakdown-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  margin-top: 16px;
}

.revenue-breakdown-table th {
  text-align: left;
  padding: 8px 10px;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 2px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.1);
}

.revenue-breakdown-table td {
  padding: 10px 10px;
  border-bottom: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.07);
  color: var(--sf-teal-dark);
  vertical-align: middle;
}

.revenue-breakdown-table tbody tr:hover td {
  background: rgb(var(--sf-accent-rgb, 167 191 166) / 0.1);
}

.revenue-row-total {
  font-weight: 800;
  color: var(--sf-teal-dark) !important;
}

.revenue-breakdown-table tfoot td {
  padding: 12px 10px;
  border-top: 2px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.15);
  border-bottom: none;
}

.revenue-grand-label {
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--sf-teal-dark);
}

.revenue-grand-total {
  font-weight: 900;
  font-size: 1.1rem;
  color: var(--sf-teal-dark);
}

/* ── Completed request inline summary ────────────────────────────────────── */

.queue-row-summary > td {
  padding: 0 0 12px 0;
  background: transparent;
}

.completed-summary-card {
  background: var(--sf-white, #fff);
  border: 1.5px solid var(--sf-border, #e2e8f0);
  border-radius: 10px;
  padding: 18px 20px 14px;
  margin: 0 2px 2px;
}

.completed-summary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.completed-summary-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.completed-summary-id {
  font-size: 0.78rem;
}

.completed-summary-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px 24px;
}

.completed-summary-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.summary-section-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sf-teal, #0d9488);
  margin: 8px 0 2px;
}

.completed-summary-col p:first-child.summary-section-label {
  margin-top: 0;
}

.summary-kv {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 0;
  border-bottom: 1px solid var(--sf-border, #e2e8f0);
  font-size: 0.88rem;
}

.summary-kv:last-child {
  border-bottom: none;
}

.summary-kv--total {
  margin-top: 4px;
  font-size: 0.95rem;
  color: var(--sf-teal-dark, #0f766e);
}

/* ── Dashboard drilldown mode ─────────────────────────────────────────────── */

.admin-portal-page.dashboard--drilldown .admin-hero-top,
.admin-portal-page.dashboard--drilldown .admin-stat-grid {
  display: none;
}

.admin-portal-page.dashboard--drilldown aside.admin-dashboard-side {
  display: none;
}

.admin-portal-page[data-drilldown="panel"] .admin-queue-section {
  display: none;
}

#dashboard-drilldown {
  padding: 0;
}

.drilldown-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.drilldown-header h2 {
  margin: 0;
  font-size: 1.4rem;
}

/* ── Admin Services pricing groups ────────────────────────────────────────── */
.services-settings-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.pricing-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.pricing-group-card {
  background: var(--sf-sage-light, #f4f7f4);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: 12px;
  padding: 1.25rem 1.25rem 1rem;
}

.pricing-group-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sf-teal-dark, #003b3b);
  margin: 0 0 1rem;
}

.pricing-group-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1rem;
}

.pricing-group-grid label,
.pricing-fee-row,
.pricing-group--single label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary, #555);
}

.pricing-group-grid label input,
.pricing-fee-row input,
.pricing-group--single label input {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-primary, #1a1a1a);
  background: #fff;
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.2);
  border-radius: 8px;
  padding: 0.55rem 0.75rem;
  width: 100%;
}

.pricing-fee-row {
  padding: 0.65rem 1rem;
  background: rgb(var(--sf-primary-rgb, 13 59 59) / 0.04);
  border: 1px dashed rgb(var(--sf-primary-rgb, 13 59 59) / 0.2);
  border-radius: 8px;
}

.pricing-group--single label {
  max-width: 260px;
}

@media (max-width: 540px) {
  .pricing-group-grid {
    grid-template-columns: 1fr;
  }
}

.pricing-effective-date-row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.1);
  margin-top: 0.5rem;
}

.pricing-effective-label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary, #555);
  max-width: 320px;
}

.pricing-effective-hint {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--text-tertiary, #888);
}

.pricing-effective-label input[type="datetime-local"] {
  font-size: 0.95rem;
  color: var(--text-primary, #1a1a1a);
  background: #fff;
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.2);
  border-radius: 8px;
  padding: 0.55rem 0.75rem;
  width: 100%;
}

.pricing-pending-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #fffbeb;
  border: 1px solid #f59e0b;
  border-radius: 10px;
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  color: #92400e;
  flex-wrap: wrap;
}

.pricing-pending-banner[hidden] {
  display: none;
}

.pricing-pending-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}

.pricing-pending-cancel {
  margin-left: auto;
  background: none;
  border: 1px solid #f59e0b;
  border-radius: 6px;
  padding: 0.3rem 0.75rem;
  font-size: 0.78rem;
  color: #92400e;
  cursor: pointer;
  white-space: nowrap;
}

.pricing-pending-cancel:hover {
  background: #fef3c7;
}

/* ─────────────────────────────────────────────────────────────────────────
   Worker Dashboard — app-style cards (replaces the old job tables).
   "Here is your job. Here is what to do next."
   ───────────────────────────────────────────────────────────────────────── */
.worker-card {
  border: 1px solid var(--worker-line);
  border-radius: 14px;
  background: #fff;
  padding: 16px;
  box-shadow: var(--worker-shadow);
}

.worker-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.worker-card-service {
  margin: 2px 0;
  color: var(--worker-ink);
  font-size: 1.02rem;
  font-weight: 800;
}

.worker-card-facts {
  display: grid;
  gap: 10px;
  margin: 12px 0 0;
}

.worker-card-facts > div {
  display: grid;
  gap: 2px;
}

.worker-card-facts dt {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #7c8b87;
  font-weight: 800;
}

.worker-card-facts dd {
  margin: 0;
  color: #28403b;
  font-weight: 600;
}

/* Current Job — the lead card; never let anything else outshine it. */
.worker-current-job-facts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
}

/* Worker dashboard-card styles moved to worker-app.css (2026-07-08). */

/* Special states (empty / inactive / incomplete-profile) */
.worker-state-card {
  border: 1px dashed var(--worker-line);
  border-radius: 14px;
  background: #f6faf8;
  padding: 22px;
  text-align: center;
  color: #42554f;
}

.worker-state-card h3 {
  margin: 0 0 6px;
  color: var(--worker-ink);
}

.worker-state-card p {
  margin: 0;
}

.worker-state-card .button {
  margin-top: 14px;
}

.status-pill-cancelled {
  background: #fde2e1;
  color: #a23b34;
}

/* Worker job-details vertical status tracker */
/* ─────────────────────────────────────────────────────────────────────────
   Booking flow polish — mobile-friendly progress, inline validation, and a
   shorter hero on the Book Now / Returning pages so the form is reachable fast.
   ───────────────────────────────────────────────────────────────────────── */

/* Compact step indicator (phones): "Step 1 of 9 · Customer Info". */
.booking-progress-compact {
  display: none;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  padding: 16px 18px;
  background: var(--sf-white);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: var(--sf-radius-md);
  box-shadow: var(--sf-shadow-card);
}

.booking-progress-compact-step {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sf-teal);
}

.booking-progress-compact-label {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--sf-teal-dark);
}

/* Inline field validation messages. */
.booking-field-error {
  display: block;
  margin-top: 6px;
  color: var(--sf-danger, #c0392b);
  font-size: 0.82rem;
  font-weight: 600;
}

.booking-step-fields input.has-error,
.booking-step-fields select.has-error,
.booking-step-fields textarea.has-error {
  border-color: var(--sf-danger, #c0392b);
  box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.12);
}

/* Shorter hero on the booking pages (vs. the public landing hero). */
.booking-page .booking-flow-hero-image img {
  min-height: 360px;
}

.booking-page .booking-flow-hero-copy {
  padding: clamp(28px, 4vw, 52px);
}

@media (max-width: 640px) {
  /* Swap the cramped icon rail for the compact one-line indicator. */
  .booking-progress-rail {
    display: none;
  }

  .booking-progress-compact {
    display: flex;
    flex-wrap: wrap;
  }

  /* Keep the hero short so the first step is visible with minimal scrolling. */
  .booking-page .booking-flow-hero-image {
    min-height: 150px;
  }

  .booking-page .booking-flow-hero-image img {
    min-height: 150px;
  }

  .booking-page .booking-flow-hero-copy {
    padding: 22px 20px;
  }
}

/* Admin Mobile Menu */
.admin-mobile-menu {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 2000;
  display: none;
}

.admin-mobile-menu:not([hidden]) {
  display: flex;
  align-items: flex-end;
}

.admin-menu-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
}

.admin-menu-panel {
  background: white;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  border-radius: 20px 20px 0 0;
  padding: 20px;
  box-shadow: 0 -10px 30px rgba(0,0,0,0.15);
}

.admin-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eee;
}

.admin-menu-links a,
.admin-menu-links button {
  display: block;
  padding: 16px 12px;
  color: #222;
  text-decoration: none;
  font-size: 1.1rem;
  border-radius: 12px;
  margin: 4px 0;
}

.admin-menu-links a:hover,
.admin-menu-links button:hover {
  background: #f8f9fa;
}

.logout-item {
  color: #d32f2f !important;
  font-weight: 600;
}

.menu-divider {
  height: 1px;
  background: #eee;
  margin: 12px 0;
}

.admin-menu-btn {
  width: 40px;
  height: 40px;
  font-size: 1.4rem;
  border: none;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.admin-avatar-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.2);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}
.admin-avatar-btn:hover,
.admin-avatar-btn:focus-visible {
  background: rgba(255,255,255,0.35);
  outline: 2px solid rgba(255,255,255,0.6);
  outline-offset: 2px;
}

/* Menu identity block */
.admin-menu-identity {
  display: flex;
  align-items: center;
  gap: 12px;
}
.admin-menu-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sf-teal, #0d9488);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.admin-menu-role {
  margin: 0;
  font-size: 0.78rem;
  color: #888;
}

/* Active page indicator in menu */
.admin-menu-item.is-active {
  background: #f0fdf4;
  color: var(--sf-teal, #0d9488) !important;
  font-weight: 600;
}
.admin-menu-item.is-active::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 8px;
  vertical-align: middle;
}
/* ── Staff Access page ── */
.staff-access-card {
  max-width: 460px;
  margin: 40px auto;
  padding: 40px 24px;
}
.staff-access-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 28px 0 24px;
}
/* The two staff cards each carry their destination role via data-theme
   (worker=blue, admin=purple) on the <a>, so these role tokens resolve per card
   from theme.css. Header/back-link stay customer-green (page data-theme=customer). */
.staff-portal-btn {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: var(--sf-primary-muted);
  border: 1.5px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.22);
  border-radius: 14px;
  text-decoration: none;
  color: var(--text, #1a2b24);
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s;
  min-height: 72px;
}
.staff-portal-btn:hover {
  background: var(--sf-primary-muted);
  border-color: var(--sf-primary);
  box-shadow: 0 4px 16px rgb(var(--sf-primary-rgb, 13 59 59) / 0.16);
  transform: translateY(-1px);
}
.staff-portal-btn:focus-visible {
  outline: 2px solid var(--sf-primary);
  outline-offset: 2px;
}
.staff-portal-btn-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: var(--sf-primary);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.staff-portal-btn-icon svg {
  width: 22px;
  height: 22px;
}
/* Brand-icon variant: the role SVG already carries its own tinted rounded tile,
   so fill the square and clip to the tile radius instead of a solid color chip. */
.staff-portal-btn-icon--brand {
  background: transparent;
  padding: 0;
  overflow: hidden;
}
.staff-portal-btn-icon--brand img {
  width: 100%;
  height: 100%;
  display: block;
}
.staff-portal-btn-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.staff-portal-btn-body strong {
  font-size: 1rem;
  font-weight: 700;
  color: var(--sf-primary-dark);
}
.staff-portal-btn-body small {
  font-size: 0.82rem;
  color: var(--sf-muted, #607a6e);
  font-weight: 400;
}
.staff-portal-chevron {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--sf-primary);
}
@media (max-width: 480px) {
  .staff-access-card {
    margin: 16px 12px;
    padding: 28px 18px;
  }
  .staff-portal-btn {
    min-height: 64px;
    padding: 14px 14px;
    gap: 12px;
  }
  .staff-portal-btn-icon {
    width: 40px;
    height: 40px;
  }
  .staff-portal-btn-body strong { font-size: 0.95rem; }
}

/* ============================================================
   Portal sign-in redesign (worker + admin login)
   Full-bleed dark-green hero with a rounded card overlapping it,
   pill badge, icon-leading inputs, shield divider, globe footer.
   Scoped to .portal-login-page so the worker/admin dashboards are
   untouched.
   ============================================================ */

.portal-login-page {
  background:
    linear-gradient(180deg, var(--sf-off-white), #ffffff);
}

.portal-login-page main {
  min-height: auto;
}

/* ── Hero header (stacked, centered, edge-to-edge) ── */
.portal-login-page .portal-login-hero {
  display: grid;
  justify-items: center;
  gap: 14px;
  width: 100%;
  margin: 0;
  padding: 44px 20px 84px;
  text-align: center;
  color: var(--sf-white);
  background:
    radial-gradient(120% 90% at 80% -10%, rgb(var(--sf-accent-rgb, 167 191 166) / 0.18), transparent 60%),
    linear-gradient(160deg, var(--sf-primary) 0%, var(--sf-primary-dark) 72%);
}

.portal-login-page .portal-hero-brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--sf-white);
  text-decoration: none;
}

.portal-hero-mark {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 54px;
flex: 0 0 auto;
color: var(--sf-sage);
font-size: 2.7rem;
font-weight: 900;
font-style: italic;
line-height: 1;
background: linear-gradient(135deg, rgba(234, 242, 234, 0.2), rgba(255,255,255,0.08));
border-radius: 12px;
padding: 2px;
}

.portal-hero-mark img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-align: left;
}

.portal-hero-role {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.28rem;
  font-weight: 900;
}

.portal-hero-role svg {
  width: 26px;
  height: 26px;
  color: var(--sf-sage);
}

.portal-hero-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--sf-sage);
  font-size: 1rem;
  font-weight: 800;
  text-decoration: none;
}

.portal-hero-back svg { width: 18px; height: 18px; }
.portal-hero-back:hover { color: #ffffff; }

/* ── Card pulled up to overlap the hero ── */
.portal-login-page .portal-login-shell {
  width: 100%;
  min-height: 0;
  align-content: start;
  justify-content: center;
  place-items: start center;
  padding: 0 18px 56px;
  margin-inline: auto;
}

.portal-login-page .portal-login-card {
  width: min(460px, 100%);
  gap: 8px;
  margin-top: -60px;
  padding: clamp(26px, 5vw, 40px);
  border-radius: 24px;
  box-shadow: 0 26px 60px rgb(var(--sf-primary-rgb, 13 59 59) / 0.20);
}

/* ── "Worker / Admin Access" pill badge ── */
.portal-login-card h1 {
  font-size: clamp(1.7rem, 4.6vw, 2.05rem);
}

/* ── Icon-leading inputs ── */
.portal-login-card .booking-form label {
  display: grid;
  gap: 7px;
}

.portal-login-card .booking-form[hidden],
.portal-login-card .portal-login-intro[hidden],
.portal-login-card .portal-mfa-step-head[hidden] {
  display: none !important;
}

.portal-mfa-step-head {
  display: grid;
  gap: 8px;
  margin-bottom: 4px;
  text-align: center;
}

.portal-mfa-step-head h2,
.portal-mfa-step-head p {
  margin: 0;
}

.portal-mfa-step-head h2 {
  color: var(--sf-teal-dark);
  font-size: 1.25rem;
  line-height: 1.15;
}

.portal-mfa-step-head p {
  color: var(--sf-muted);
  font-size: 0.98rem;
  line-height: 1.45;
}

.portal-step-pill {
  justify-self: center;
  padding: 5px 10px;
  color: var(--sf-teal-dark);
  background: var(--sf-sage-light);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 900;
}

.portal-login-card .portal-input-group {
  position: relative;
  display: block;
}

.portal-login-card .portal-input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: #6f8b8a;
  pointer-events: none;
  z-index: 1;
}

.portal-login-card .portal-input-group input {
  padding-left: 44px;
}

/* ── Sign In button: deep concierge green ── */
.portal-login-card .booking-form .button.primary {
  min-height: 54px;
  border-radius: 12px;
  font-size: 1.05rem;
  background: linear-gradient(135deg, var(--sf-primary), var(--sf-primary-dark));
  border-color: var(--sf-primary-dark);
}

.portal-login-card .booking-form .button.primary:hover {
  background: linear-gradient(135deg, var(--sf-primary-soft), var(--sf-primary));
}

.staff-mfa-qr-wrap {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: 14px;
  background: #f7fbfa;
}

.staff-mfa-qr-wrap[hidden] {
  display: none;
}

.staff-mfa-qr-wrap canvas {
  width: min(220px, 100%);
  height: auto;
  border: 10px solid #fff;
  border-radius: 12px;
  box-shadow: 0 10px 26px rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
}

.staff-mfa-qr-wrap .field-help {
  margin: 0;
  text-align: center;
}

/* ── Shield divider ── */
/* Login divider styles moved to login.css (2026-07-08). */

/* ── Globe "Back to customer site" ── */
/* Login card back-link styles moved to login.css (2026-07-08). */

@media (max-width: 560px) {
  .portal-login-page .portal-login-hero {
    padding: 32px 18px 76px;
    gap: 12px;
  }
  .portal-hero-wordmark { font-size: 1.42rem; }
  .portal-hero-role { font-size: 1.14rem; }
  .portal-login-page .portal-login-card { margin-top: -56px; }
  .staff-access-page .portal-login-card { margin-top: 16px; }
}

/* Staff Access uses the thin app-bar header, not the tall sign-in hero, so its
   card must sit BELOW the header. Without this it inherited the hero's negative
   top margin and pulled up under the header, clipping the shield badge. */
.staff-access-page .portal-login-card { margin-top: 24px; }

/* Pricing & payout simulator (admin Services tab) */
.pricing-sim { margin-top: 18px; border: 1px solid #e3ece8; border-radius: 12px; padding: 12px 14px; }
.pricing-sim > summary { cursor: pointer; font-size: 1rem; color: var(--sf-primary); }
.pricing-sim-inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 12px 0; }
.pricing-sim-inputs label { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; font-weight: 700; color: #334; }
.pricing-sim-inputs .sim-check { flex-direction: row; align-items: center; gap: 8px; }
.pricing-sim-inputs .sim-check input { width: auto; }
.sim-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.sim-card { background: #f6faf8; border: 1px solid #e3ece8; border-radius: 10px; padding: 10px 12px; }
.sim-card h5 { margin: 0 0 8px; color: var(--sf-primary); font-size: .95rem; }
.sim-row { display: flex; justify-content: space-between; gap: 12px; font-size: .88rem; padding: 3px 0; }
.sim-row-total { font-weight: 800; border-top: 1px solid #d7e3de; margin-top: 4px; padding-top: 6px; }
.sim-time { margin-top: 12px; font-size: .95rem; }

/* Booking-page hero balance moved to booking.css 2026-07-08. */

/* ── Customer dashboard: top-right identity avatar + account menu (Phase 1) ── */
.customer-dashboard-header { flex-direction: row; align-items: flex-start; }
.customer-dashboard-heading { flex: 1 1 auto; min-width: 0; }
.customer-identity { position: relative; flex: 0 0 auto; }
.customer-avatar-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px 4px 4px; border: 0; border-radius: 999px;
  background: transparent; color: inherit; cursor: pointer;
}
.customer-avatar-btn:hover { background: rgba(125,125,125,.12); }
.customer-avatar {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; background: linear-gradient(135deg, #14904c, #0b6b3d);
  color: #fff; font-weight: 800; font-size: 1rem; letter-spacing: .02em;
  box-shadow: 0 2px 8px rgba(10,116,63,.3);
}
.customer-avatar-chevron { width: 18px; height: 18px; opacity: .75; }
/* Account popup — centered modal card matching the worker/admin "Account" popup:
   dark backdrop, white rounded card, a header with title + name + close (×),
   clean divided action rows, and a danger sign-out at the bottom. The outer
   element is the full-screen backdrop; the card sits centered inside it. */
.customer-account-menu {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(4,26,24,.45);
}
.customer-account-menu[hidden] { display: none; }
.customer-account-menu-card {
  /* Viewport-safe sizing so a wider-than-viewport parent can't force a horizontal
     scrollbar inside the account menu on mobile. */
  box-sizing: border-box;
  width: min(440px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  overflow-x: hidden;
  background: #fff; color: #0f2a28;
  border-radius: 16px; box-shadow: 0 24px 64px rgba(0,0,0,.30);
  max-height: 90vh; overflow-y: auto;
}
/* Long names/emails wrap instead of forcing horizontal overflow. */
.customer-account-menu-card,
.customer-account-menu-item { overflow-wrap: anywhere; }
.customer-account-menu-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; padding: 1.1rem 1.25rem; border-bottom: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / .1);
}
.customer-account-menu-head h2 { margin: 0; font-size: 1.2rem; color: #073233; }
.customer-account-menu-name {
  margin: 3px 0 0; font-size: .9rem; font-weight: 800; color: #073233; overflow-wrap: anywhere;
}
.customer-account-menu-contact {
  display: block; margin-top: 1px; font-size: .82rem; color: #5b6b67; overflow-wrap: anywhere;
}
.customer-account-menu-contact:empty { display: none; }
.customer-account-menu-close {
  flex: 0 0 auto; background: none; border: 0; font-size: 1.7rem; line-height: 1;
  color: #5b6b67; cursor: pointer; padding: 0 2px;
}
.customer-account-menu-actions { display: flex; flex-direction: column; padding-bottom: .75rem; }
/* Each action is a full-width divided row; links get a › to signal navigation. */
.customer-account-menu-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; box-sizing: border-box; text-align: left;
  min-height: 44px; padding: 1rem 1.25rem; border: 0;
  border-bottom: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / .1);
  background: transparent; color: #0f2a28; font: inherit; font-size: .95rem;
  font-weight: 600; text-decoration: none; cursor: pointer;
}
.customer-account-menu-item:not(.customer-account-menu-signout)::after {
  content: "\203A"; color: #9bb0ab; font-size: 1.3rem; font-weight: 400;
}
.customer-account-menu-item:hover { background: #f7fbfa; }
/* Sign out: danger button in its own padded row at the bottom.
   It also carries .customer-account-menu-item, which sets width:100%. Combined
   with the horizontal margin below, a full-width box + 1.25rem side margins
   overflowed the card by ~40px (clipped on the right under overflow-x:hidden).
   width:auto lets the column-flex stretch fill the card MINUS the margins, so the
   button stays fully inside at any width (incl. 375px, iOS/Android PWA). */
.customer-account-menu-signout {
  width: auto; align-self: stretch; max-width: 100%; box-sizing: border-box;
  justify-content: center; margin: 1rem 1.25rem; padding: .8rem; min-height: 0;
  border: 1px solid #dc2626; border-radius: 10px; color: #dc2626; background: none;
  font-weight: 800;
}
.customer-account-menu-signout:hover { background: #fef2f2; }
.customer-dashboard-quickactions { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 4px; }

/* ── Signed-in customer: header cluster (nav + MU avatar, top-right) ──────────
   Revealed by body.customer-account-loaded; the guest marketing nav is hidden. */
.customer-header-signed { display: none; }
body.customer-account-loaded .site-header .nav[data-nav],
body.customer-account-loaded .mobile-menu-button { display: none !important; }
body.customer-account-loaded .customer-header-signed {
  display: flex; align-items: center; gap: 16px; margin-left: auto;
}
.customer-section-toggle { display: none; }
.customer-header-nav { display: flex; align-items: center; gap: 4px; }
.customer-header-nav a {
  padding: 8px 12px; border-radius: 10px; text-decoration: none;
  color: rgba(255,255,255,.88); font-weight: 700; font-size: .95rem;
}
.customer-header-nav a:hover { background: rgba(255,255,255,.14); color: #fff; }
.customer-header-nav a[aria-current="page"] { background: rgba(255,255,255,.2); color: #fff; }
/* MU avatar: white disc with green initials so it reads on the green/dark header. */
.customer-header-signed .customer-avatar { background: #fff; color: #0b6b3d; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.customer-header-signed .customer-avatar-btn { color: #fff; }

.portal-section-toggle {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.portal-section-toggle span {
  font-size: 0.72rem;
  opacity: 0.72;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.portal-section-toggle strong {
  margin-left: auto;
  font-size: 0.95rem;
  white-space: nowrap;
}

.portal-section-toggle::after {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.16s ease;
}

.portal-section-toggle[aria-expanded="true"]::after {
  transform: translateY(2px) rotate(225deg);
}

/* Account section toggle styles moved to account.css (2026-07-08). */

/* ── Welcome-back banner (dismissible, only shown when away > 7 days) ── */
.customer-welcome-banner {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 18px; padding: 12px 14px; border-radius: 14px;
  background: rgba(20,144,76,.1); border: 1px solid rgba(20,144,76,.22); color: #0f3b3b;
}
.customer-welcome-banner[hidden] { display: none; }
.customer-welcome-banner-icon {
  flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 10px; background: rgba(20,144,76,.16); color: #0b6b3d;
}
.customer-welcome-banner-icon svg { width: 20px; height: 20px; }
.customer-welcome-banner-text { flex: 1 1 auto; font-weight: 700; font-size: .95rem; }
.customer-welcome-banner-close {
  flex: 0 0 auto; border: 0; background: transparent; color: inherit;
  font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0 4px; opacity: .7;
}
.customer-welcome-banner-close:hover { opacity: 1; }

/* ── Quick actions (4-up grid) ── */
.customer-quickactions {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 4px 0 22px;
}
.customer-quickaction {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 12px;
  min-height: 108px; box-sizing: border-box;
  padding: 16px; border-radius: 16px; text-decoration: none;
  background: #fff; color: #0f2a28; border: 1px solid rgba(4,26,24,.08);
  box-shadow: 0 6px 18px rgba(4,26,24,.08); font-weight: 800; font-size: .98rem;
  transition: transform .12s ease, box-shadow .12s ease;
}
.customer-quickaction:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(4,26,24,.14); }
.customer-quickaction-icon {
  flex: 0 0 auto;
  display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 12px; background: rgba(20,144,76,.12); color: #0b6b3d;
}
.customer-quickaction-icon svg { width: 22px; height: 22px; display: block; }
.customer-quickaction-label { align-self: flex-start; }
.customer-quickaction-primary { background: linear-gradient(135deg, #14904c, #0b6b3d); color: #fff; border: 0; }
.customer-quickaction-primary .customer-quickaction-icon { background: rgba(255,255,255,.18); color: #fff; }

/* ── Section heading "+ Add" affordance ── */
.customer-section-heading-actions { display: inline-flex; align-items: center; gap: 10px; }
.customer-section-add {
  text-decoration: none; font-weight: 800; font-size: .84rem; color: #0b6b3d;
  padding: 5px 11px; border-radius: 999px; background: rgba(20,144,76,.12); white-space: nowrap;
}
.customer-section-add:hover { background: rgba(20,144,76,.2); }
.customer-section-manage {
  color: var(--sf-teal-dark);
  background: var(--sf-white);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.14);
}
.customer-section-manage:hover { background: #f4faf8; }

/* ── Account shortcuts (Profile / Security / Notifications) ── */
.customer-shortcuts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.customer-shortcut {
  display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 14px;
  text-decoration: none; background: #fff; color: #0f2a28; border: 1px solid rgba(4,26,24,.08);
  box-shadow: 0 6px 18px rgba(4,26,24,.08); font-weight: 700;
}
.customer-shortcut:hover { background: #f4faf8; }
.customer-shortcut-icon {
  display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 10px; background: rgba(20,144,76,.12); color: #0b6b3d;
}
.customer-shortcut-icon svg { width: 20px; height: 20px; }

@media (max-width: 760px) {
  body.customer-account-loaded .site-header.landing-header,
  body.customer-account-loaded .site-header.account-header {
    position: sticky;
    top: 0;
    z-index: 200;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    padding: 8px 12px !important;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 10px;
  }
  body.customer-account-loaded .site-header.landing-header > .logo,
  body.customer-account-loaded .site-header.account-header > .logo {
    order: 0;
    flex: 1 1 auto;
    min-width: 0;
    margin-right: auto;
  }
  body.customer-account-loaded .customer-header-signed {
    display: contents;
  }
  body.customer-account-loaded .customer-section-toggle {
    display: flex;
    order: 2;
    flex: 1 0 100%;
    width: 100%;
    margin-top: 8px;
    padding: 10px 12px;
  }
  body.customer-account-loaded .customer-header-nav {
    display: none;
  }
  body.customer-account-loaded .customer-header-nav.is-mobile-open {
    position: absolute;
    left: 12px;
    right: 12px;
    top: calc(100% + 6px);
    z-index: 220;
    display: grid;
    gap: 6px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    background: var(--sf-primary);
    box-shadow: 0 18px 40px rgba(4, 26, 24, 0.24);
  }
  body.customer-account-loaded .customer-header-nav.is-mobile-open a {
    min-height: 40px;
    padding: 10px 12px;
    border-radius: 10px;
  }
  body.customer-account-loaded .customer-identity {
    order: 1;
    flex: 0 0 auto;
    margin-left: auto;
  }
  body.customer-account-loaded .customer-avatar-chevron {
    display: none;
  }
  .customer-app-panel-grid,
  .customer-app-summary,
  .customer-account-link-grid,
  .customer-book-panel-grid,
  .customer-book-service-options {
    grid-template-columns: 1fr;
  }
  .customer-app-action-card {
    min-height: 0;
  }
  /* Stacked single-column service cards: fixed min-height reads as dead space
     on phones — let the padding set the rhythm instead. */
  .customer-book-service-picker label {
    min-height: 0;
    padding: 16px 62px 16px 16px;
  }
  .customer-book-addon {
    min-height: 0;
    padding: 16px 62px 16px 16px;
  }
  .customer-book-start-actions {
    display: grid;
  }
  .customer-track-card-head,
  .customer-track-card .customer-card-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .customer-track-card-head {
    grid-template-columns: 1fr;
  }
  .customer-track-card-summary {
    justify-items: start;
  }
  .customer-track-card-summary > strong {
    font-size: 1.15rem;
  }
  .customer-track-card-preview {
    grid-template-columns: 1fr;
  }
  .customer-track-quickrow {
    grid-template-columns: 1fr;
  }
  .customer-track-timeline {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 5px;
    min-width: 0;
  }
  .customer-track-facts {
    grid-template-columns: 1fr;
  }
  .customer-track-section-head {
    display: grid;
    gap: 3px;
  }
  .customer-track-photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .customer-track-panel-live .track-live-map-canvas {
    height: 210px;
  }
  .customer-quickactions { grid-template-columns: repeat(2, 1fr); }
  .customer-shortcuts { grid-template-columns: 1fr; }
}

/* ── Customer dashboard: "Recommended for you" cards (Phase 3b) ── */
.customer-recommend { margin: 0 0 4px; }
.customer-recommend-card {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border-radius: 16px; margin-bottom: 10px;
  background: #fff; color: #0f2a28; box-shadow: 0 8px 22px rgba(4,26,24,.12);
}
.customer-recommend-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.customer-recommend-copy strong { font-weight: 800; }
.customer-recommend-copy span { font-size: .84rem; opacity: .78; }
.customer-recommend-card .button { flex: none; }

/* "Confirm details" repeat card shows the actual saved details being confirmed
   (service, location, wash, station, return) so it's a real summary, not a label.
   The taller content top-aligns the CTA instead of floating it mid-card. */
.customer-recommend-card-repeat { align-items: flex-start; }
.customer-recommend-meta {
  display: grid; gap: 4px 12px; margin: 6px 0 0; padding: 0; list-style: none;
}
.customer-recommend-meta li {
  display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; align-items: baseline;
}
.customer-recommend-meta li span {
  font-size: .68rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase;
  color: var(--sf-muted); opacity: 1;
}
.customer-recommend-meta li strong {
  font-size: .86rem; font-weight: 700; color: #0f2a28; overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .customer-recommend-card {
    display: grid;
    align-items: stretch;
  }
  .customer-recommend-card .button {
    width: 100%;
  }
}

/* Customer layout QA repair: active services, recent activity, support, and
   booking choice cards. Scoped to customer pages to avoid admin/worker churn. */
.customer-account-page #account-active-services .customer-card-list {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.customer-active-service-card {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 18px;
  background: var(--sf-white);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.12);
  border-radius: var(--sf-radius-sm);
  box-shadow: var(--sf-shadow-soft);
}

/* Active-service card is a compact <details> accordion (see currentServiceCard):
   the summary shows everything at a glance — service + ticket, then a 2-col grid
   of Vehicle/Date and Return/Status — and only the action buttons live behind the
   expand. The ticket appears once (top-right); it is not repeated in the body. */
.customer-active-summary {
  display: grid;
  gap: 12px;
  list-style: none;
  cursor: pointer;
}
.customer-active-summary::-webkit-details-marker { display: none; }

.customer-active-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.customer-active-head-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.customer-active-head .customer-current-ticket { flex: none; }

.customer-active-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
  margin: 0;
}
.customer-active-meta > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 6px;
  min-width: 0;
}
.customer-active-meta dt {
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--sf-muted);
}
.customer-active-meta dt::after { content: ":"; }
.customer-active-meta dd {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--sf-charcoal);
  overflow-wrap: anywhere;
}
.customer-active-meta-status { justify-content: flex-start; }
.customer-active-meta-status dd { display: inline-flex; max-width: 100%; }
.customer-active-meta-status .customer-track-pill { white-space: normal; max-width: 100%; }

.customer-active-body { display: grid; gap: 12px; }
.customer-active-caret { display: none; }

/* "Your concierge" row — photo + name + verified, so the customer sees who is
   handling their car. The photo frame's corner badge (shared worker photo frame)
   only appears when there is a real photo. */
.customer-concierge-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--sf-primary-muted, #e2e8e6);
  border-radius: 12px;
  background: var(--sf-primary-muted, #eaf2ea);
}
.customer-concierge-photo .worker-profile-photo-frame {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
}
.customer-concierge-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.customer-concierge-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--sf-muted, #5b6b66);
}
.customer-concierge-name {
  font-size: 1rem;
  color: var(--sf-text, #12303a);
}
.customer-concierge-verified {
  align-self: flex-start;
  margin-top: 2px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #277947;
  background: #e8f7ee;
  border: 1px solid #b2dfc2;
  border-radius: 999px;
  padding: 1px 8px;
}

/* Tablet/desktop: full card, always expanded. Neutralise the toggle so a header
   click can't collapse the always-open card (nothing interactive in the summary). */
@media (min-width: 761px) {
  .customer-active-caret { display: none; }
  .customer-active-summary { cursor: default; pointer-events: none; }
}

/* Phones: collapsed by default (rendered without [open]); the summary is the
   at-a-glance card and the caret (bottom-centre) rotates when expanded. */
@media (max-width: 760px) {
  .customer-active-caret {
    display: block;
    justify-self: center;
    width: 11px;
    height: 11px;
    border-right: 2px solid var(--sf-muted);
    border-bottom: 2px solid var(--sf-muted);
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.18s ease;
  }
  .customer-active-service-card[open] .customer-active-caret {
    transform: translateY(2px) rotate(-135deg);
  }
}

.customer-current-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
}

.customer-current-card-head > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.customer-current-card-head strong,
.customer-current-ticket {
  overflow-wrap: anywhere;
}

.customer-current-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.customer-current-details div {
  min-width: 0;
  padding: 10px 12px;
  background: rgba(236, 245, 239, 0.72);
  border-radius: 10px;
}

.customer-current-details dt,
.customer-recent-activity-card dt {
  color: var(--sf-muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.customer-current-details dd,
.customer-recent-activity-card dd {
  margin: 2px 0 0;
  color: var(--sf-charcoal);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.customer-active-service-card .button,
.customer-recent-activity-card .button {
  width: 100%;
  justify-content: center;
}

.customer-recent-activity-card dl {
  grid-template-columns: minmax(0, 1fr);
}

.customer-support-link {
  justify-content: flex-start;
  width: 100%;
  max-width: 520px;
  margin: 0;
  padding: 14px 16px;
  background: var(--sf-white);
  border: 1px solid rgb(var(--sf-primary-rgb, 13 59 59) / 0.1);
  border-radius: var(--sf-radius-sm);
  box-shadow: var(--sf-shadow-soft);
  opacity: 1;
}

.customer-support-link span:last-child {
  display: grid;
  gap: 2px;
}

.customer-support-link small {
  color: var(--sf-muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.booking-page .booking-accordion-card.is-active .booking-accordion-body {
  gap: 22px;
}

.booking-page .booking-step-fields {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.booking-page .choice-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-items: stretch;
}

.booking-page .choice-card {
  min-width: 0;
  min-height: 86px;
  align-items: flex-start;
}

.booking-page .choice-card span {
  min-width: 0;
}

.booking-page .choice-card strong,
.booking-page .choice-card small,
.booking-page .choice-card summary,
.booking-page .choice-card li,
.booking-page .choice-card p {
  overflow-wrap: anywhere;
}

.booking-page .booking-addon-card {
  margin-top: 2px;
}

.booknow-saved-block {
  display: grid;
  gap: 12px;
}

.booknow-saved-block .returning-options-grid,
.booknow-saved-block .returning-saved-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.booking-page .returning-option-card,
.booking-page .returning-customer-card,
.customer-book-option,
.customer-book-empty-option {
  min-width: 0;
}

@media (max-width: 899px) {
  :root {
    --sf-content-width-mobile: calc(100% - 32px);
  }

  .customer-account-page #account-active-services .customer-card-list,
  .customer-account-page #account-history .customer-card-list,
  .booking-page .choice-grid,
  .booknow-saved-block .returning-options-grid,
  .booknow-saved-block .returning-saved-grid {
    grid-template-columns: 1fr;
  }

  .customer-current-card-head,
  .customer-request-card > div:first-child {
    flex-direction: column;
    align-items: stretch;
  }

  .customer-current-ticket {
    width: fit-content;
  }

  .customer-current-details,
  .customer-request-card dl {
    grid-template-columns: 1fr;
  }

  .customer-support-link {
    max-width: none;
  }

  .booking-page .booking-flow,
  .booking-page .booking-accordion-body,
  .booking-page .booking-summary-sidebar {
    min-width: 0;
  }
}

@media (display-mode: standalone) {
  .booking-page .booking-flow-shell,
  .track-page .track-shell,
  .customer-account-page .customer-account-shell,
  .account-page .account-layout {
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }
}

@media (display-mode: standalone) and (max-width: 899px) {
  .booking-page .site-footer,
  .track-page .site-footer,
  .customer-account-page .site-footer,
  .account-page .site-footer {
    margin-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  }

  .booking-page .booking-step-actions {
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }

  .customer-active-service-card,
  .customer-recent-activity-card,
  .customer-support-link {
    border-radius: 18px;
  }
}