:root {
  --ink: #172320;
  --muted: #697874;
  --paper: #f7f8f5;
  --surface: #ffffff;
  --line: #dde5df;
  --brand: #16745d;
  --brand-dark: #0f4e40;
  --mint: #e4f1eb;
  --coral: #e8755c;
  --shadow: 0 16px 42px rgba(25, 54, 44, .09);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Avenir Next", Avenir, "Helvetica Neue", sans-serif; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(232, 117, 92, .45); outline-offset: 3px; }

.site-header { max-width: 1240px; margin: 0 auto; padding: max(22px, env(safe-area-inset-top)) 24px 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.wordmark { font-size: 1.5rem; font-weight: 800; letter-spacing: -.04em; color: var(--brand-dark); }
.header-actions { display: flex; align-items: center; gap: 20px; color: var(--muted); font-size: .9rem; }
.dashboard-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; flex: 0 0 auto; }
.header-actions a:hover { color: var(--brand-dark); }
.account-name { color: var(--ink); font-weight: 700; }
.profile-menu { position: relative; z-index: 5; }
.profile-menu summary { list-style: none; }
.profile-menu summary::-webkit-details-marker { display: none; }
.profile-trigger { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 4px 8px 4px 5px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); cursor: pointer; box-shadow: 0 5px 15px rgba(25,54,44,.05); }
.profile-trigger-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .84rem; font-weight: 800; }
.menu-icon { color: var(--brand); font-size: 1.15rem; line-height: 1; }
.profile-avatar { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; }
.profile-avatar-fallback { background: var(--mint); color: var(--brand-dark); font-weight: 800; }
.profile-popover { position: absolute; top: calc(100% + 10px); right: 0; width: min(310px, calc(100vw - 28px)); padding: 17px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
.profile-menu-identity { display: flex; align-items: center; gap: 11px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.profile-avatar-large { width: 48px; height: 48px; flex-basis: 48px; }
.profile-menu-identity div, .profile-menu-address { display: grid; gap: 3px; }
.profile-menu-identity span, .profile-menu-address { color: var(--muted); font-size: .78rem; }
.profile-menu-address { margin: 14px 0; line-height: 1.4; }
.profile-menu-address span { color: var(--ink); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.profile-menu-links { display: grid; gap: 2px; border-top: 1px solid var(--line); padding-top: 8px; }
.profile-menu-links a, .profile-menu-logout { display: block; width: 100%; padding: 10px 4px; border: 0; background: transparent; color: var(--ink); text-align: left; font-weight: 750; cursor: pointer; }
.profile-menu-links a:hover, .profile-menu-logout:hover { color: var(--brand); }
.profile-menu form { border-top: 1px solid var(--line); margin-top: 7px; padding-top: 7px; }
.profile-menu-logout { color: var(--coral); }
.notification-bell { position: relative; z-index: 6; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; }
.notification-bell-button { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 999px; overflow: visible; color: var(--brand); }
.notification-bell-icon { font-size: 1.15rem; line-height: 1; }
.notification-badge { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--coral); color: white; font-size: .62rem; line-height: 1; font-weight: 800; box-shadow: 0 6px 14px rgba(217,110,84,.24); transform: translate(35%, -35%); white-space: nowrap; pointer-events: none; }
.notification-popover { position: absolute; top: calc(100% + 12px); left: var(--notification-popover-left, auto); right: auto; width: min(360px, calc(100vw - 24px)); max-width: calc(100vw - 24px); max-height: min(75vh, 560px); overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: white; box-shadow: 0 26px 60px rgba(25,54,44,.16); z-index: 7; }
.notification-popover[hidden] { display: none; }
.notification-popover-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.notification-popover-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.notification-close { min-height: 36px; padding: 0 12px; }
.notification-clear { min-height: 36px; padding: 0 12px; }
.notification-clear:disabled { opacity: .55; cursor: not-allowed; }
.notification-panel-content { min-height: 0; max-height: min(58vh, 420px); overflow-y: auto; display: grid; gap: 12px; padding-right: 4px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.notification-panel-message { margin: 0; color: var(--muted); }
.notification-panel-item { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: #fbfcfb; }
.notification-panel-item.is-unread { border-color: rgba(26,100,77,.18); background: #f4faf7; }
.notification-panel-item-body { display: grid; gap: 8px; }
.notification-panel-item-body p { margin: 0; color: var(--ink); line-height: 1.5; }
.notification-panel-item-body time { color: var(--muted); font-size: .78rem; }
.notification-read-button { justify-self: flex-start; }
.notification-read-state { color: var(--brand-dark); font-size: .78rem; font-weight: 700; }

.topbar { width: min(1240px, 100%); margin: 0 auto; padding: max(22px, env(safe-area-inset-top)) 24px 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.topbar h1 { flex: 0 0 auto; margin: 0; color: var(--brand-dark); font-size: 1.5rem; line-height: 1; letter-spacing: -.04em; }
.topbar-user { min-width: 0; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px 18px; color: var(--muted); font-size: .9rem; }
.topbar-user > span { min-width: 0; overflow-wrap: anywhere; color: var(--ink); font-weight: 700; }
.topbar-user form { margin: 0; }
.topbar-user a, .topbar-user button { color: var(--muted); font-weight: 700; }
.topbar-user button { border: 0; padding: 0; background: transparent; cursor: pointer; }
.topbar-user a:hover, .topbar-user button:hover { color: var(--brand-dark); }

.hero-shell { max-width: 1240px; margin: 30px auto 0; padding: 68px 7%; background: var(--brand-dark); color: white; border-radius: 28px; position: relative; overflow: hidden; }
.hero-shell::after { content: ""; position: absolute; width: 330px; height: 330px; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; right: -80px; top: -120px; box-shadow: 0 0 0 42px rgba(255,255,255,.03), 0 0 0 84px rgba(255,255,255,.02); }
.hero-copy { max-width: 650px; position: relative; z-index: 1; }
.eyebrow { margin: 0 0 12px; color: var(--coral); font-size: .72rem; font-weight: 800; letter-spacing: .16em; }
.hero-shell .eyebrow { color: #9fdec9; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(2.5rem, 6vw, 5.5rem); letter-spacing: -.065em; line-height: .95; margin-bottom: 20px; max-width: 700px; }
h2 { font-size: clamp(1.55rem, 3vw, 2.4rem); letter-spacing: -.045em; margin-bottom: 8px; }
h3 { letter-spacing: -.025em; }
.hero-lede { max-width: 500px; color: #d2e3dc; font-size: 1.08rem; line-height: 1.6; }
.hero-search { margin-top: 42px; display: grid; grid-template-columns: 1.5fr 1fr auto; gap: 10px; max-width: 920px; position: relative; z-index: 1; }
.search-field, form label { display: grid; gap: 7px; color: var(--muted); font-size: .78rem; font-weight: 700; }
.hero-search .search-field { color: #d8e8e1; }
.hero-search .search-field > div { display: flex; gap: 8px; align-items: center; }
.search-field input, .form-card input, .form-card select, .form-card textarea, .booking-panel input, .booking-panel select, .booking-panel textarea { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px; background: white; color: var(--ink); }
.hero-search input { border: 0; min-height: 54px; }
.search-status { min-height: 22px; margin: 15px 0 0; color: #b7dfd0; position: relative; z-index: 1; }

.content-section, .dashboard-shell, .profile-shell, .auth-panel { max-width: 1240px; margin: 0 auto; padding: 72px 24px 0; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.section-heading h2 { margin-bottom: 0; }
.text-button { border: 0; background: none; color: var(--brand); font-weight: 800; cursor: pointer; padding: 8px 0; }
.text-button:hover { color: var(--brand-dark); }
.service-rail { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 15px; scrollbar-width: thin; scroll-snap-type: x proximity; }
.service-card { flex: 0 0 142px; min-height: 122px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--ink); padding: 17px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 12px; text-align: left; font-weight: 750; cursor: pointer; box-shadow: 0 5px 15px rgba(25,54,44,.03); scroll-snap-align: start; transition: transform .2s, border-color .2s, box-shadow .2s; }
.service-card:hover { transform: translateY(-3px); border-color: #9cc9b8; box-shadow: var(--shadow); }
.service-icon { width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center; background: var(--mint); color: var(--brand); font-size: 1.25rem; }
.service-groups { display: grid; gap: 34px; margin-top: 38px; }
.group-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.group-heading h3 { margin: 0; font-size: 1.1rem; }
.group-heading span { color: var(--muted); font-size: .78rem; }

.results-section { padding-top: 40px; }
.results-heading { align-items: center; }
.results-controls { display: flex; align-items: center; gap: 8px; }
.compact-field select { border: 1px solid var(--line); border-radius: 10px; background: white; padding: 10px 32px 10px 12px; color: var(--ink); }
.icon-button { border: 1px solid var(--line); border-radius: 10px; background: white; color: var(--brand); min-width: 42px; min-height: 42px; cursor: pointer; }
.provider-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.provider-grid.list-layout { grid-template-columns: 1fr; }
.provider-card { min-width: 0; min-height: 420px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: 0 5px 15px rgba(25,54,44,.03); display: flex; flex-direction: column; }
.provider-card-top { height: 174px; background: var(--mint); position: relative; overflow: hidden; }
.provider-photo, .profile-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-fallback { width: 100%; height: 100%; display: grid; place-items: center; color: var(--brand); font-size: 3rem; font-weight: 800; background: linear-gradient(135deg, #e4f1eb, #d2e7dd); }
.availability { position: absolute; top: 12px; right: 12px; background: rgba(255,255,255,.9); color: var(--muted); border-radius: 999px; padding: 5px 9px; font-size: .68rem; font-weight: 800; text-transform: capitalize; }
.availability.is-available { color: #13724d; }
.provider-card-body { display: flex; flex: 1; flex-direction: column; padding: 17px; }
.provider-name-row { display: flex; align-items: center; gap: 8px; }
.provider-name-row h3 { margin: 0; font-size: 1.06rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.verified-mark { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: white; background: var(--brand); font-size: .72rem; vertical-align: middle; }
.provider-location, .booking-notes, .profile-note { color: var(--muted); font-size: .82rem; }
.provider-location { margin: 5px 0 14px; }
.provider-stats, .provider-meta, .provider-card-footer, .profile-stats { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: .75rem; }
.provider-stats { color: var(--ink); font-weight: 700; }
.provider-meta { margin-top: 10px; }
.provider-card-footer { align-items: center; margin-top: auto; padding: 18px 0 12px; border-top: 1px solid var(--line); }
.provider-card-footer strong { color: var(--ink); }
.distance-badge, .status-pill { border-radius: 999px; background: var(--mint); color: var(--brand-dark); padding: 5px 8px; font-size: .68rem; font-weight: 800; }
.full-button { width: 100%; text-align: center; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 0; border-radius: 11px; min-height: 46px; padding: 0 17px; font-weight: 800; cursor: pointer; transition: transform .2s, background .2s, color .2s; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--coral); color: white; }
.button-primary:hover { background: #d9644c; }
.button-secondary { background: var(--mint); color: var(--brand-dark); }
.button-quiet { min-height: 38px; background: transparent; color: var(--brand); border: 1px solid var(--line); }
.load-more { display: block; margin: 28px auto 0; }

.skeleton-card { padding: 0; }
.skeleton-photo, .skeleton-line { background: linear-gradient(90deg, #edf2ee 25%, #f8faf8 50%, #edf2ee 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
.skeleton-photo { height: 174px; }
.skeleton-line { height: 14px; border-radius: 8px; margin: 18px 17px 0; }
.skeleton-line.wide { margin-top: 22px; width: 68%; }.skeleton-line.short { width: 38%; margin-bottom: 18px; }
@keyframes shimmer { to { background-position: -200% 0; } }
.empty-state, .error-state { padding: 48px 24px; text-align: center; border: 1px dashed #b8cbc0; border-radius: 18px; background: rgba(255,255,255,.6); }
.wide-empty { grid-column: 1 / -1; }.empty-state h3, .error-state h3 { margin-bottom: 8px; }.empty-state p, .error-state p { color: var(--muted); }
.empty-mark { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--mint); color: var(--brand); font-size: 1.5rem; }

.auth-panel { margin-top: 70px; background: #e8f1eb; max-width: none; padding-left: max(24px, calc((100% - 1192px) / 2)); padding-right: max(24px, calc((100% - 1192px) / 2)); display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; }
.auth-intro p:last-child { color: var(--muted); line-height: 1.6; }.auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }.form-card { background: white; border-radius: 16px; padding: 22px; display: grid; gap: 13px; box-shadow: 0 5px 15px rgba(25,54,44,.04); }.form-card h3 { margin-bottom: 4px; }.error-banner { grid-column: 1 / -1; background: #fde8e8; color: #9b1c1c; padding: 12px 16px; border-radius: 10px; }

.dashboard-shell { padding-top: 52px; }.dashboard-shell > .content-section { padding-left: 0; padding-right: 0; }.dashboard-intro { max-width: 700px; }.dashboard-intro h1 { font-size: clamp(2.4rem, 5vw, 4rem); }.dashboard-intro > p:not(.eyebrow) { color: var(--muted); line-height: 1.6; margin-bottom: 24px; }.booking-section { margin-top: 68px; }.booking-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }.booking-card { background: white; border: 1px solid var(--line); border-radius: 16px; padding: 20px; min-height: 180px; }.booking-card-top { display: flex; justify-content: space-between; gap: 12px; align-items: center; }.booking-reference { color: var(--muted); font-size: .7rem; }.booking-card h3 { margin: 22px 0 4px; }.booking-card p { color: var(--muted); font-size: .85rem; }.status-confirmed { background: #dff2e7; color: #147149; }.status-pending { background: #fff0d2; color: #966100; }.status-cancelled { background: #fde8e8; color: #9b1c1c; }

.profile-shell { max-width: 1020px; padding-top: 56px; }.profile-card { display: grid; grid-template-columns: 340px 1fr; gap: 42px; align-items: center; background: white; border: 1px solid var(--line); border-radius: 24px; overflow: hidden; box-shadow: var(--shadow); }.profile-visual { min-height: 360px; background: var(--mint); }.profile-content { padding: 25px 35px 25px 0; }.profile-content h1 { font-size: clamp(2.2rem, 5vw, 4.5rem); margin-bottom: 14px; }.profile-stats { justify-content: flex-start; flex-wrap: wrap; margin: 24px 0; }.profile-rate { font-size: 1.35rem; font-weight: 800; margin-bottom: 20px; }.booking-panel { margin-top: 25px; padding: 28px; background: var(--mint); border-radius: 20px; max-width: 650px; }.booking-panel form { display: grid; gap: 14px; }.form-status { color: var(--brand-dark); font-weight: 700; }
.site-footer { max-width: 1240px; margin: 70px auto 0; padding: 24px; display: flex; justify-content: space-between; color: var(--muted); font-size: .75rem; border-top: 1px solid var(--line); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.directions-page { max-width: 980px; margin: 0 auto; padding: 28px 18px 50px; }.directions-page h1 { font-size: clamp(2rem, 5vw, 4rem); margin: 32px 0 10px; }.navigation-panel { margin: 18px 0 16px; padding: 18px 20px; background: linear-gradient(135deg, rgba(31,111,84,.08), rgba(47,128,237,.1)); border: 1px solid rgba(31,111,84,.12); border-radius: 20px; box-shadow: var(--shadow); }.navigation-panel h2 { margin: 8px 0 6px; font-size: clamp(1.3rem, 3vw, 2rem); }.navigation-panel p:last-child { margin-bottom: 0; }.map-frame { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: #dcebe5; box-shadow: var(--shadow); }.directions-map { height: min(68vh, 640px); min-height: 420px; overflow: hidden; }.directions-map.leaflet-container { background: #dcebe5; }.directions-controls { padding-top: 16px; display: grid; gap: 14px; }.directions-actions { display: flex; flex-wrap: wrap; gap: 10px; }.directions-controls p { margin-top: 0; }.leaflet-control-attribution { font-size: .68rem; }.leaflet-control-zoom a { color: var(--ink); }.leaflet-popup-content-wrapper, .leaflet-popup-tip { box-shadow: var(--shadow); }

@media (max-width: 980px) { .provider-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.auth-panel { grid-template-columns: 1fr; }.profile-card { grid-template-columns: 280px 1fr; }.booking-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .site-header { padding: 16px 18px; }.dashboard-header-actions { gap: 8px; }.notification-bell-button { width: 42px; min-width: 42px; height: 42px; min-height: 42px; }.notification-badge { min-width: 17px; height: 17px; padding: 0 4px; font-size: .58rem; }.notification-popover { width: min(340px, calc(100vw - 24px)); max-width: calc(100vw - 24px); }.topbar { align-items: flex-start; flex-wrap: wrap; padding: max(16px, env(safe-area-inset-top)) 18px 16px; }.topbar-user { width: 100%; justify-content: flex-start; gap: 8px 14px; }.topbar-user > span { flex: 1 1 100%; }.hero-shell { margin: 8px 12px 0; padding: 48px 22px 28px; border-radius: 22px; }.hero-search { grid-template-columns: 1fr; margin-top: 28px; }.content-section, .dashboard-shell, .profile-shell { padding: 50px 18px 0; }.dashboard-shell > .content-section { padding-left: 0; padding-right: 0; }.section-heading { align-items: flex-start; flex-direction: column; }.provider-grid { grid-template-columns: 1fr; }.provider-card { min-height: 395px; }.auth-panel { padding: 48px 18px; }.auth-grid { grid-template-columns: 1fr; }.profile-card { grid-template-columns: 1fr; gap: 0; }.profile-visual { min-height: 260px; }.profile-content { padding: 25px; }.booking-grid { grid-template-columns: 1fr; }.site-footer { margin-top: 45px; flex-direction: column; gap: 8px; }.results-controls { width: 100%; }.compact-field { flex: 1; }.compact-field select { width: 100%; } }
/* Approved customer mobile experience. The existing WebView uses this shell at every size. */
.customer-mobile-app { margin: 0; min-height: 100dvh; background: #edeae2; color: #1f2a24; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Arial, sans-serif; }
.compatibility-copy { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.customer-shell { width: 100%; min-height: 100dvh; margin: 0; background: #faf7f2; position: relative; }
.customer-screen { display: none; min-height: 100dvh; flex-direction: column; background: #faf7f2; }
.customer-screen.active { display: flex; }
.customer-scroll { flex: 1; overflow-y: auto; padding: max(10px, env(safe-area-inset-top)) 18px calc(80px + env(safe-area-inset-bottom)); }
.mobile-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 0 6px; }
.mobile-header h1, .back-header h1 { margin: 0; font-size: 20px; line-height: 1.2; font-weight: 650; }
.mobile-wordmark { color: #0f6e56; text-decoration: none; font-size: 19px; font-weight: 750; }
.header-icons { display: flex; align-items: center; gap: 13px; }
.icon-button { position: relative; min-width: 32px; min-height: 32px; padding: 4px; border: 0; background: transparent; color: #1f2a24; font-size: 22px; cursor: pointer; }
.bell-dot { position: absolute; top: 2px; right: 1px; width: 7px; height: 7px; border: 1.5px solid #faf7f2; border-radius: 50%; background: #e2643b; }
.mobile-avatar, .profile-avatar { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: #0f6e56; color: white; font-size: 12px; font-weight: 650; }
.mobile-greeting { margin: 4px 0 15px; color: #5b685f; font-size: 14px; }
.mobile-search-card { overflow: hidden; margin-bottom: 23px; border: 1px solid #e7e2d8; border-radius: 14px; background: #fff; }
.location-row, .mobile-search-row { display: flex; align-items: center; gap: 9px; min-height: 47px; padding: 0 14px; }
.location-row { border-bottom: 1px solid #e7e2d8; font-size: 13px; }
.location-row span:nth-child(2) { flex: 1; }
.field-icon { font-size: 18px; line-height: 1; }.field-icon.coral { color: #e2643b; }.field-icon.teal { color: #0f6e56; }
.chevron { color: #5b685f; font-size: 18px; }.mobile-search-row input { min-width: 0; flex: 1; border: 0; outline: 0; color: #1f2a24; font-size: 13px; }.mobile-search-row input::placeholder { color: #8a9089; }
.round-arrow { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: #e2643b; color: #fff; font-size: 17px; cursor: pointer; }
.location-action { margin: 0 14px 6px; padding: 0; border: 0; background: transparent; color: #0f6e56; font-size: 11px; cursor: pointer; }.location-input { display: block; width: calc(100% - 28px); margin: 0 14px 12px; padding: 8px 0; border: 0; border-bottom: 1px solid #e7e2d8; outline: 0; color: #1f2a24; background: transparent; font-size: 12px; }
.location-attribution { margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.35; }.location-attribution a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.location-info-button { padding: 0 2px; border: 0; background: transparent; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; }
.location-attribution-popover { position: relative; margin: -10px 14px 10px; padding: 10px 32px 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: 0 8px 20px rgba(0, 0, 0, .08); color: var(--muted); font-size: .75rem; line-height: 1.35; }
.location-attribution-popover p { margin: 0; }.location-attribution-popover a { color: inherit; text-decoration: underline; }.location-attribution-close { position: absolute; top: 5px; right: 7px; padding: 0 4px; border: 0; background: transparent; color: inherit; font-size: 18px; cursor: pointer; }
.mobile-section-heading { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 10px; }.mobile-section-heading h2 { margin: 0; font-size: 14px; font-weight: 650; }.text-link { padding: 2px 0; border: 0; background: transparent; color: #0f6e56; font-size: 12px; font-weight: 650; cursor: pointer; }
.service-chip-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }.service-chip-row::-webkit-scrollbar { display: none; }.service-card { flex: 0 0 66px; min-height: 70px; padding: 0; border: 0; background: transparent; box-shadow: none; font-size: 11px; font-weight: 400; color: #5b685f; text-align: center; }.service-icon { display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto 5px; border-radius: 50%; background: #e1f5ee; color: #0f6e56; font-size: 18px; }
.bottomnav { position: fixed; right: 0; bottom: 0; left: 0; z-index: 20; display: flex; justify-content: space-around; align-items: center; width: 100%; min-height: 66px; padding: 10px 0 max(14px, env(safe-area-inset-bottom)); border-top: 1px solid #e7e2d8; background: #fff; }.navitem { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 62px; color: #8a9089; font-size: 19px; cursor: pointer; }.navitem.active { color: #0f6e56; }.navitem span { font-size: 10px; font-weight: 650; }
.mobile-subtitle { margin: 0 0 15px; color: #5b685f; font-size: 13px; }.service-search { display: flex; gap: 8px; align-items: center; margin-bottom: 17px; padding: 11px 13px; border: 1px solid #e7e2d8; border-radius: 14px; background: #fff; color: #0f6e56; }.service-search input { flex: 1; border: 0; outline: 0; font-size: 13px; }.category-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }.category-grid .service-card { display: flex; align-items: center; gap: 10px; min-height: 68px; padding: 12px; border: 1px solid #e7e2d8; border-radius: 14px; background: #fff; color: #1f2a24; text-align: left; }.category-grid .service-icon { flex: 0 0 38px; width: 38px; height: 38px; margin: 0; }
.service-search, .home-service-search { position: relative; }.home-service-search { min-width: 0; flex: 1; }.service-suggestions { position: absolute; top: calc(100% + 5px); right: 0; left: 0; z-index: 25; overflow: hidden; border: 1px solid #e7e2d8; border-radius: 12px; background: #fff; box-shadow: 0 8px 20px rgba(31, 42, 36, .12); }.service-suggestion { display: block; width: 100%; padding: 11px 14px; border: 0; border-bottom: 1px solid #f1ede6; background: #fff; color: #1f2a24; text-align: left; cursor: pointer; }.service-suggestion:last-child { border-bottom: 0; }.service-suggestion:hover, .service-suggestion:focus { background: #f5fbf8; outline: 0; }
.location-row { position: relative; z-index: 3; }.location-autocomplete { position: relative; z-index: 1; min-width: 0; flex: 1; }.location-row .location-autocomplete input { position: relative; z-index: 1; width: 100%; pointer-events: auto; }.location-suggestions { position: absolute; top: calc(100% + 5px); right: 0; left: 0; z-index: 25; max-height: 240px; overflow-y: auto; border: 1px solid #e7e2d8; border-radius: 12px; background: #fff; box-shadow: 0 8px 20px rgba(31, 42, 36, .12); }.location-suggestion { display: block; width: 100%; padding: 12px 14px; border: 0; border-bottom: 1px solid #f1ede6; background: #fff; color: #1f2a24; text-align: left; cursor: pointer; }.location-suggestion:last-child { border-bottom: 0; }.location-suggestion:hover, .location-suggestion:focus { background: #f5fbf8; outline: 0; }.location-options { position: relative; z-index: 24; padding: 8px 14px 10px; border-top: 1px solid #e7e2d8; background: #fff; }.location-options button { padding: 0; border: 0; background: transparent; color: #0f6e56; font-size: 12px; cursor: pointer; }.results-end { margin: 14px 0 0; color: #8a9089; font-size: 12px; text-align: center; }
.back-header { display: flex; align-items: center; gap: 10px; padding: 7px 0 12px; }.back-btn { width: 25px; height: 30px; padding: 0; border: 0; background: transparent; color: #1f2a24; font-size: 29px; line-height: 1; cursor: pointer; }.back-header h1 { font-size: 17px; }
.results-controls { display: flex; justify-content: flex-end; margin-bottom: 12px; }.results-controls select { padding: 8px 10px; border: 1px solid #e7e2d8; border-radius: 10px; background: #fff; color: #5b685f; font-size: 12px; }.provider-list { display: grid; gap: 12px; }.provider-list .provider-card { min-height: 0; margin: 0; padding: 14px; border: 1px solid #e7e2d8; border-radius: 14px; background: #fff; box-shadow: none; }.provider-list .provider-card-top { display: none; }.provider-list .provider-card-body { padding: 0; }.provider-list .provider-name-row, .provider-list .provider-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }.provider-list .provider-name-row h3 { margin: 0; font-size: 14px; }.provider-list .provider-location, .provider-list .provider-meta, .provider-list .provider-stats { margin: 7px 0; color: #5b685f; font-size: 12px; }.provider-list .provider-stats, .provider-list .provider-meta { display: flex; justify-content: flex-start; gap: 12px; }.provider-list .provider-card-footer { margin-top: 9px; padding-top: 9px; border-top: 1px solid #e7e2d8; }.provider-list .button { margin-top: 10px; }.button-secondary, .button-outline { border: 1px solid #0f6e56; border-radius: 20px; background: transparent; color: #0f6e56; }.full-button { width: 100%; padding: 9px 14px; text-align: center; }
#load-more[hidden], #results-end[hidden] { display: none !important; }
.booking-tabs { display: flex; gap: 5px; margin: 8px 0 16px; padding: 4px; border: 1px solid #e7e2d8; border-radius: 12px; background: #fff; }.booking-tabs button { flex: 1; padding: 8px 0; border: 0; border-radius: 9px; background: transparent; color: #5b685f; font-size: 12px; font-weight: 650; cursor: pointer; }.booking-tabs button.active { background: #0f6e56; color: #fff; }.booking-list { display: grid; gap: 12px; }.booking-card { padding: 14px; border: 1px solid #e7e2d8; border-radius: 14px; background: #fff; }.booking-card-top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }.booking-card h2 { margin: 0; font-size: 14px; }.booking-card p { margin: 3px 0 0; color: #5b685f; font-size: 12px; }.booking-time { margin-top: 9px !important; }.booking-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }.booking-price { color: #1f2a24; font-size: 14px; font-weight: 700; }.status-pill { padding: 3px 10px; border-radius: 10px; font-size: 11px; font-weight: 650; white-space: nowrap; }.status-confirmed { background: #e1f5ee; color: #073b30; }.status-pending { background: #fbeae4; color: #993c1d; }.status-completed { background: #f1efe8; color: #5f5e5a; }.status-cancelled { background: #fcebeb; color: #a32d2d; }
.detail-block, .empty-block { padding: 16px; border: 1px solid #e7e2d8; border-radius: 14px; background: #fff; }.detail-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid #e7e2d8; font-size: 13px; }.detail-row:last-child { border-bottom: 0; }.detail-label { color: #5b685f; }.detail-value { color: #1f2a24; font-weight: 650; text-align: right; }.empty-block { text-align: center; }.empty-title { margin: 0 0 4px; color: #1f2a24 !important; font-size: 14px !important; font-weight: 650; }.empty-block p:not(.empty-title) { margin: 4px 0 14px; color: #5b685f; font-size: 12.5px; }
.profile-head { display: flex; align-items: center; gap: 12px; padding: 8px 0 17px; }.profile-head .profile-avatar { width: 56px; height: 56px; font-size: 18px; }.profile-head h2 { margin: 0; font-size: 17px; }.profile-head p { margin: 3px 0 0; color: #5b685f; font-size: 12px; }.account-group-label { margin: 18px 2px 8px; color: #8a9089; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }.account-list { overflow: hidden; margin-bottom: 8px; border: 1px solid #e7e2d8; border-radius: 14px; background: #fff; }.account-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; border: 0; border-bottom: 1px solid #e7e2d8; background: #fff; color: #1f2a24; font-size: 13.5px; text-align: left; cursor: pointer; }.account-row:last-child { border-bottom: 0; }.account-row span:nth-child(2) { flex: 1; }.account-row b { color: #8a9089; font-size: 18px; font-weight: 400; }.account-icon { color: #0f6e56; font-size: 18px; }.account-row.logout, .account-row.logout .account-icon { color: #a32d2d; }.logout-form { margin-top: 24px; }
.read-only-form { padding-top: 7px; }.read-only-form label { display: grid; gap: 6px; margin: 14px 0; color: #5b685f; font-size: 12px; font-weight: 650; }.read-only-form input { padding: 12px 14px; border: 1px solid #e7e2d8; border-radius: 12px; background: #fff; color: #1f2a24; font-size: 13.5px; }.field-hint { color: #8a9089; font-size: 11px; }.notification-list { padding-top: 3px; }.notification-row { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-bottom: 1px solid #e7e2d8; }.notification-row > div { flex: 1; }.notification-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; background: #e1f5ee; color: #0f6e56; }.notification-row p { margin: 0; color: #1f2a24; font-size: 13px; line-height: 1.4; }.notification-row time { display: block; margin-top: 3px; color: #8a9089; font-size: 11px; }.notification-row.unread .notification-icon { color: #e2643b; }.unread-dot { width: 7px; height: 7px; flex: 0 0 7px; margin-top: 5px; border-radius: 50%; background: #e2643b; }
/* Fidelity pass: measured directly from the approved customer prototype. */
.customer-mobile-app { background: #faf7f2; }
.customer-shell { width: 100%; max-width: none; }
.customer-scroll { padding: max(10px, env(safe-area-inset-top)) 18px calc(80px + env(safe-area-inset-bottom)); }
.mobile-header { min-height: 58px; padding: 16px 0 6px; }
.home-header { min-height: 48px; padding-top: 14px; }
.mobile-header h1 { font-size: 20px; font-weight: 600; }
.icon-button { width: 20px; min-width: 20px; min-height: 20px; padding: 0; }
.icon-button svg, .field-icon svg, .navitem svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.field-icon { display: grid; place-items: center; width: 16px; height: 16px; padding: 0; border: 0; background: transparent; }
.field-icon svg { width: 16px; height: 16px; }
.search-icon { position: relative; display: inline-block; width: 16px; height: 16px; flex: 0 0 16px; border: 1.8px solid #8a9089; border-radius: 50%; }
.search-icon::after { position: absolute; right: -4px; bottom: -2px; width: 6px; height: 1.8px; transform: rotate(45deg); transform-origin: left center; background: #8a9089; content: ""; }
.bell-icon { position: relative; display: inline-block; width: 18px; height: 17px; border: 1.8px solid currentColor; border-radius: 10px 10px 3px 3px; }
.bell-icon::before { position: absolute; right: -3px; bottom: -3px; left: -3px; height: 1.8px; background: currentColor; content: ""; }
.bell-icon::after { position: absolute; bottom: -6px; left: 6px; width: 4px; height: 2px; border-radius: 0 0 4px 4px; background: currentColor; content: ""; }
.location-row { min-height: 46px; padding: 0 14px; }
.location-row input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: #1f2a24; font: inherit; font-size: 13px; }
.location-row input::placeholder { color: #5b685f; }
.mobile-search-row { min-height: 46px; padding: 0 14px; }
.mobile-search-card { margin: 6px 0 18px; border-radius: 14px; }
.mobile-greeting { margin: 2px 0 14px; }
.mobile-section-heading { margin: 18px 0 10px; }
.service-chip-row { gap: 10px; }
.service-chip-row .service-card { min-width: 66px; }
.service-chip-row .service-icon { width: 46px; height: 46px; border-radius: 50%; }
.category-grid { gap: 10px; }
.category-grid .service-card { min-height: 66px; padding: 14px; border-radius: 14px; }
.category-grid .service-card > span:last-child { font-size: 13px; font-weight: 600; }
.category-grid .service-icon { width: 38px; height: 38px; }
.service-search { margin: 6px 0 18px; padding: 12px 14px; border-radius: 14px; }
.provider-list { gap: 0; }
.provider-list .provider-card { margin-bottom: 12px; padding: 14px; border-radius: 14px; }
.prov-row1 { display: flex; align-items: center; gap: 8px; }
.prov-avatar { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; background: #0f6e56; color: #fff; font-size: 13px; font-weight: 600; }
.prov-name { color: #1f2a24; font-size: 14px; font-weight: 600; }
.verified-mark { display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: #0f6e56; color: #fff; font-size: 9px; }
.prov-rating { display: flex; align-items: center; gap: 3px; margin-left: auto; color: #1f2a24; font-size: 12.5px; }.prov-rating:first-letter { color: #e2643b; }.prov-rating span { color: #8a9089; }
.prov-row2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 9px 0; color: #5b685f; font-size: 12px; }
.tag { padding: 2px 9px; border-radius: 10px; background: #e1f5ee; color: #073b30; font-size: 11px; font-weight: 600; text-transform: capitalize; }
.prov-row3 { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }.prov-price { color: #1f2a24; font-size: 15px; font-weight: 700; }.view-link { display: block; margin-top: 2px; color: #0f6e56; font-size: 12px; font-weight: 600; text-decoration: none; }.btn-coral, .btn-outline { display: inline-block; padding: 9px 20px; border-radius: 20px; font-size: 13px; font-weight: 600; text-decoration: none; }.btn-coral { border: 0; background: #e2643b; color: #fff; }.btn-outline { border: 1.4px solid #0f6e56; background: transparent; color: #0f6e56; }
.booking-tabs { gap: 6px; padding: 4px; margin: 8px 0 16px; border-radius: 12px; }.booking-tabs button { padding: 8px 0; border-radius: 9px; font-size: 12.5px; }.booking-card { margin-bottom: 12px; padding: 14px; border-radius: 14px; }.booking-card h2 { font-size: 14.5px; font-weight: 600; }.booking-card p, .booking-time { font-size: 12.5px; }.booking-bottom { margin-top: 10px; }.booking-price { font-size: 14px; }
.profile-head { padding: 6px 0 20px; }.profile-head .profile-avatar { width: 56px; height: 56px; font-size: 19px; }.profile-head h2 { font-size: 17px; font-weight: 600; }.account-group-label { margin: 18px 2px 8px; font-size: 11.5px; }.account-list { border-radius: 14px; }.account-row { min-height: 48px; padding: 14px; }.account-icon { width: 18px; }
.account-icon { position: relative; display: inline-block; width: 18px; height: 18px; flex: 0 0 18px; font-size: 0; }
.user-icon::before { position: absolute; top: 1px; left: 6px; width: 6px; height: 6px; border: 1.6px solid currentColor; border-radius: 50%; content: ""; }
.user-icon::after { position: absolute; bottom: 1px; left: 2px; width: 14px; height: 7px; border: 1.6px solid currentColor; border-radius: 9px 9px 3px 3px; content: ""; }
.calendar-icon { border: 1.6px solid currentColor; border-radius: 3px; }.calendar-icon::before { position: absolute; top: 4px; right: 0; left: 0; border-top: 1.6px solid currentColor; content: ""; }
.document-icon { border: 1.6px solid currentColor; border-radius: 2px; }.document-icon::before, .document-icon::after { position: absolute; right: 3px; left: 3px; border-top: 1.4px solid currentColor; content: ""; }.document-icon::before { top: 7px; }.document-icon::after { top: 11px; }
.logout-icon::before { position: absolute; top: 8px; left: 1px; width: 15px; border-top: 1.8px solid currentColor; content: ""; }.logout-icon::after { position: absolute; top: 4px; right: 0; width: 7px; height: 7px; border-top: 1.8px solid currentColor; border-right: 1.8px solid currentColor; transform: rotate(45deg); content: ""; }
.chevron-icon { position: relative; display: inline-block; width: 8px; height: 8px; border-top: 1.6px solid #8a9089; border-right: 1.6px solid #8a9089; transform: rotate(45deg); }
.help-icon::before { display: grid; place-items: center; width: 16px; height: 16px; border: 1.6px solid currentColor; border-radius: 50%; font-size: 12px; content: "?"; }
.back-btn { font-size: 0; }.back-btn::before { display: block; width: 10px; height: 10px; border-bottom: 1.8px solid currentColor; border-left: 1.8px solid currentColor; transform: rotate(45deg); content: ""; }
.notification-icon.check-icon::before { content: "✓"; font-size: 15px; }.notification-icon.unread-icon::before { width: 7px; height: 7px; border-radius: 50%; background: currentColor; content: ""; }
.bottomnav { min-height: 66px; padding: 10px 0 max(14px, env(safe-area-inset-bottom)); }.navitem { gap: 3px; min-width: 66px; padding: 0; border: 0; background: transparent; }.navitem svg { width: 20px; height: 20px; }.navitem span { font-size: 10px; font-weight: 600; }
.home-activity-card { display: flex; align-items: center; justify-content: space-between; padding: 14px; border: 1px solid #e7e2d8; border-radius: 14px; background: #fff; }.home-activity-card div { display: grid; gap: 2px; }.home-activity-card strong { font-size: 14px; }.home-activity-card div span { color: #5b685f; font-size: 12.5px; }.activity-heading { margin-top: 18px; }
.profile-header-actions > a:first-child { display: inline-flex; }

.map-fallback { padding: 30px; color: var(--muted); }

@media (max-width: 700px) {
  .site-header { padding: max(16px, env(safe-area-inset-top)) 18px 16px; }
  .profile-trigger-name { max-width: 100px; }
  .profile-trigger { gap: 8px; padding-right: 7px; }
  .directions-actions { flex-direction: column; }
  .directions-actions .button { width: 100%; justify-content: center; }
}
/* Booking updates stay local to the current authenticated page. */
.booking-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 2000; width: min(380px, calc(100vw - 32px)); max-height: 80vh; overflow-y: auto; }
.booking-toast { background: #fff; color: #183e35; border: 2px solid #1f6f54; border-radius: 16px; padding: 18px; margin-top: 12px; box-shadow: 0 4px 24px #0003; }
.booking-toast h2 { margin-top: 0; }
.booking-toast button, .booking-toast a { margin: 4px; }
.live-tracking-map { height: 220px; }
.service-description { white-space: pre-wrap; }

/* Customer-facing provider profiles use the same warm, compact visual language as the dashboard. */
.provider-profile-page {
  background: var(--customer-bg);
  color: var(--customer-text);
}
.provider-profile-page .profile-site-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  max-width: 560px;
  padding: max(12px, env(safe-area-inset-top)) 18px 8px;
}
.provider-profile-page .profile-site-header .wordmark {
  color: var(--customer-brand-dark);
  font-family: Sora, Inter, sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.04em;
}
.profile-back,
.profile-home-link,
.profile-logout {
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--customer-text);
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}
.profile-back { justify-self: start; padding: 8px 6px 8px 0; font-size: 14px; }
.profile-account-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.profile-home-link, .profile-logout { padding: 8px 6px; color: var(--customer-brand-dark); }
.profile-logout { color: var(--customer-secondary); }
.profile-back:focus-visible,
.profile-home-link:focus-visible,
.profile-logout:focus-visible { outline: 3px solid var(--customer-coral-tint); outline-offset: 2px; border-radius: 8px; }
.provider-profile-page .profile-shell { max-width: 560px; padding: 18px 18px 40px; }
.provider-profile-page .profile-card {
  display: block;
  overflow: hidden;
  border-color: var(--customer-border);
  border-radius: 16px;
  background: var(--customer-surface);
  box-shadow: 0 8px 24px rgba(154, 91, 0, .06);
}
.provider-profile-page .profile-visual { min-height: 230px; background: var(--customer-surface-2); }
.provider-profile-page .profile-content { padding: 22px 18px 20px; }
.provider-profile-page .profile-content h1 { margin-bottom: 10px; color: var(--customer-text); font-family: Sora, Inter, sans-serif; font-size: clamp(1.7rem, 8vw, 2.6rem); line-height: 1.1; overflow-wrap: anywhere; }
.provider-profile-page .profile-content section { margin-top: 24px; }
.provider-profile-page .profile-content section h2 { color: var(--customer-text); font-family: Sora, Inter, sans-serif; font-size: 16px; }
.provider-profile-page .profile-content section ul { margin: 0; padding-left: 20px; }
.provider-profile-page .profile-content section li { margin: 0 0 12px; overflow-wrap: anywhere; }
.provider-profile-page .profile-content section li p { margin: 4px 0 0; color: var(--customer-secondary); line-height: 1.45; }
.provider-profile-page .profile-rate { color: var(--customer-text); font-size: 1.15rem; }
.provider-profile-page .profile-note { color: var(--customer-secondary); line-height: 1.45; }
.provider-profile-page .profile-content .button-primary { width: 100%; justify-content: center; min-height: 46px; border-radius: 12px; }
.provider-profile-page .profile-photo { min-height: 230px; }
.provider-profile-page .booking-panel { max-width: none; margin-top: 14px; padding: 18px; border: 1px solid var(--customer-border); background: var(--customer-surface); border-radius: 16px; }
.provider-profile-page .booking-panel h2 { color: var(--customer-text); font-family: Sora, Inter, sans-serif; font-size: 20px; }
.provider-profile-page .booking-panel form { gap: 12px; }

@media (max-width: 420px) {
  .provider-profile-page .profile-site-header { grid-template-columns: auto 1fr auto; gap: 8px; }
  .provider-profile-page .profile-site-header .wordmark { justify-self: center; }
  .profile-account-actions { gap: 0; }
  .profile-home-link { font-size: 0; width: 40px; padding: 8px; }
  .profile-home-link::before { content: "⌂"; font-size: 20px; }
  .profile-logout { font-size: 11px; }
}

/* New approved customer prototype: warm orange/gold system, scoped to the app shell. */
.customer-mobile-app {
  --customer-brand: #DB8A16;
  --customer-brand-dark: #9A5B00;
  --customer-brand-tint: rgba(219, 138, 22, .14);
  --customer-coral: #E15B3D;
  --customer-coral-tint: rgba(225, 91, 61, .14);
  --customer-bg: #FBF3E6;
  --customer-surface: #FFFDF9;
  --customer-surface-2: #F5E9D8;
  --customer-text: #2A2018;
  --customer-secondary: #7C6F5F;
  --customer-muted: #A89A87;
  --customer-border: #EDE0C9;
  --customer-danger: #C1443B;
  --customer-warning: #9A5B00;
  background: var(--customer-bg);
  color: var(--customer-text);
  font-family: Inter, "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
}
.customer-mobile-app .customer-shell,
.customer-mobile-app .customer-screen { background: var(--customer-bg); color: var(--customer-text); }
.customer-mobile-app .customer-scroll { padding: max(12px, env(safe-area-inset-top)) 18px calc(84px + env(safe-area-inset-bottom)); }
.customer-mobile-app .mobile-header { min-height: 58px; padding: 16px 0 8px; }
.customer-mobile-app .mobile-wordmark { color: var(--customer-brand-dark); font-family: Sora, Inter, sans-serif; font-size: 20px; font-weight: 800; letter-spacing: -.04em; }
.customer-mobile-app .mobile-greeting { color: var(--customer-secondary); font-size: 14px; }
.customer-mobile-app .mobile-header h1,
.customer-mobile-app .back-header h1 { color: var(--customer-text); font-family: Sora, Inter, sans-serif; font-weight: 700; letter-spacing: -.03em; }
.customer-mobile-app .icon-button { color: var(--customer-text); }
.customer-mobile-app .mobile-avatar,
.customer-mobile-app .profile-avatar { background: var(--customer-brand); color: #fff; }
.customer-mobile-app .bell-dot { border-color: var(--customer-bg); background: var(--customer-coral); }
.customer-mobile-app .mobile-search-card,
.customer-mobile-app .service-search,
.customer-mobile-app .category-grid .service-card,
.customer-mobile-app .provider-list .provider-card,
.customer-mobile-app .booking-card,
.customer-mobile-app .detail-block,
.customer-mobile-app .empty-block,
.customer-mobile-app .account-list { border-color: var(--customer-border); background: var(--customer-surface); }
.customer-mobile-app .mobile-search-card { position: relative; z-index: 2; overflow: visible; border-radius: 16px; box-shadow: 0 8px 24px rgba(154, 91, 0, .06); }
.customer-mobile-app .location-row { border-bottom-color: var(--customer-border); }
.customer-mobile-app .field-icon.coral,
.customer-mobile-app .round-arrow { color: var(--customer-coral); }
.customer-mobile-app .field-icon.teal { color: var(--customer-brand); }
.customer-mobile-app .location-row input,
.customer-mobile-app .mobile-search-row input,
.customer-mobile-app .location-input { color: var(--customer-text); }
.customer-mobile-app .location-attribution { margin: -2px 14px 8px; color: var(--customer-secondary); font-size: 10px; }.customer-mobile-app .location-attribution a { color: var(--customer-brand-dark); }
.customer-mobile-app .location-info-button { color: var(--customer-secondary); }.customer-mobile-app .location-attribution-popover { margin: -10px 0 10px; border-color: var(--customer-border); background: var(--customer-surface); color: var(--customer-secondary); }
.customer-mobile-app .location-action,
.customer-mobile-app .text-link,
.customer-mobile-app .view-link { color: var(--customer-brand-dark); }
.customer-mobile-app .round-arrow { background: var(--customer-coral); color: #fff; }
.customer-mobile-app .mobile-section-heading h2 { color: var(--customer-text); font-family: Sora, Inter, sans-serif; font-size: 15px; }
.customer-mobile-app .service-card { color: var(--customer-secondary); }
.customer-mobile-app .service-icon { background: var(--customer-brand-tint); color: var(--customer-brand-dark); }
.customer-mobile-app .category-grid .service-card { color: var(--customer-text); }
.customer-mobile-app .service-search { color: var(--customer-brand); }
.customer-mobile-app .category-grid .service-icon { background: var(--customer-brand-tint); }
.customer-mobile-app .mobile-subtitle,
.customer-mobile-app .provider-location,
.customer-mobile-app .provider-list .provider-meta,
.customer-mobile-app .provider-list .provider-stats,
.customer-mobile-app .booking-card p,
.customer-mobile-app .profile-head p { color: var(--customer-secondary); }
.customer-mobile-app .results-controls select { border-color: var(--customer-border); color: var(--customer-secondary); }
.customer-mobile-app .provider-list .provider-card { box-shadow: 0 7px 20px rgba(154, 91, 0, .045); }
.customer-mobile-app .prov-avatar { background: var(--customer-brand); }
.customer-mobile-app .prov-name,
.customer-mobile-app .prov-price,
.customer-mobile-app .booking-price,
.customer-mobile-app .empty-title,
.customer-mobile-app .detail-value,
.customer-mobile-app .account-row { color: var(--customer-text); }
.customer-mobile-app .verified-mark { background: var(--customer-brand); }
.customer-mobile-app .tag { background: var(--customer-brand-tint); color: var(--customer-brand-dark); }
.customer-mobile-app .btn-coral,
.customer-mobile-app .button-primary { background: var(--customer-coral); color: #fff; }
.customer-mobile-app .btn-outline,
.customer-mobile-app .button-secondary,
.customer-mobile-app .button-outline { border-color: var(--customer-brand); color: var(--customer-brand-dark); background: transparent; }
.customer-mobile-app .booking-tabs,
.customer-mobile-app .booking-tabs button,
.customer-mobile-app .booking-card,
.customer-mobile-app .account-row { border-color: var(--customer-border); }
.customer-mobile-app .booking-tabs { background: var(--customer-surface); }
.customer-mobile-app .booking-tabs button { color: var(--customer-secondary); }
.customer-mobile-app .booking-tabs button.active { background: var(--customer-brand); color: #fff; }
.customer-mobile-app .status-confirmed { background: var(--customer-brand-tint); color: var(--customer-brand-dark); }
.customer-mobile-app .status-pending { background: var(--customer-coral-tint); color: #A3442E; }
.customer-mobile-app .status-completed { background: var(--customer-surface-2); color: var(--customer-secondary); }
.customer-mobile-app .status-cancelled,
.customer-mobile-app .account-row.logout { color: var(--customer-danger); }
.customer-mobile-app .detail-row,
.customer-mobile-app .account-row,
.customer-mobile-app .notification-row { border-bottom-color: var(--customer-border); }
.customer-mobile-app .detail-label,
.customer-mobile-app .account-group-label,
.customer-mobile-app .field-hint,
.customer-mobile-app .notification-row time { color: var(--customer-muted); }
.customer-mobile-app .account-group-label { letter-spacing: .08em; }
.customer-mobile-app .account-icon,
.customer-mobile-app .notification-icon { color: var(--customer-brand); }
.customer-mobile-app .notification-icon { background: var(--customer-brand-tint); }
.customer-mobile-app .notification-row.unread .notification-icon,
.customer-mobile-app .unread-dot { color: var(--customer-coral); background-color: var(--customer-coral); }
.customer-mobile-app .back-btn { color: var(--customer-text); }
.customer-mobile-app .bottomnav { border-top-color: var(--customer-border); background: var(--customer-surface); box-shadow: 0 -8px 24px rgba(154, 91, 0, .06); }
.customer-mobile-app .navitem { color: var(--customer-muted); }
.customer-mobile-app .navitem.active { color: var(--customer-brand-dark); }
.customer-mobile-app .home-activity-card { border-color: var(--customer-border); background: var(--customer-surface); }
.customer-mobile-app .home-activity-card div span { color: var(--customer-secondary); }
.customer-mobile-app .customer-scroll > .live-tracking,
.customer-mobile-app .live-tracking { border-color: var(--customer-border); background: var(--customer-surface); }
.customer-mobile-app .notification-panel-item { border-color: var(--customer-border); background: var(--customer-surface); }
.customer-mobile-app .notification-panel-item.is-unread { border-color: rgba(219, 138, 22, .28); background: #FFF8EC; }

@media (min-width: 701px) {
  .customer-mobile-app .customer-shell { max-width: 560px; margin: 0 auto; box-shadow: 0 0 0 1px rgba(237, 224, 201, .45); }
}

/* Welcome/auth prototype. Kept separate from the authenticated customer shell. */
.welcome-page {
  --welcome-brand: #DB8A16;
  --welcome-brand-dark: #9A5B00;
  --welcome-brand-tint: rgba(219, 138, 22, .14);
  --welcome-coral: #E15B3D;
  --welcome-bg: #FBF3E6;
  --welcome-surface: #FFFDF9;
  --welcome-surface-2: #F5E9D8;
  --welcome-text: #2A2018;
  --welcome-secondary: #7C6F5F;
  --welcome-muted: #A89A87;
  --welcome-border: #EDE0C9;
  min-height: 100dvh;
  padding: 28px 12px max(28px, env(safe-area-inset-bottom));
  background: radial-gradient(720px 420px at 20% -8%, rgba(255,182,72,.3), transparent 60%), radial-gradient(720px 480px at 85% 105%, rgba(226,99,29,.2), transparent 60%), var(--welcome-bg);
  color: var(--welcome-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Arial, sans-serif;
}
.welcome-shell { width: min(100%, 390px); margin: 0 auto; }
.welcome-hero { padding: 4px 28px 6px; text-align: center; }
.welcome-logo-mark { display: grid; place-items: center; width: 60px; height: 60px; margin: 0 auto; border-radius: 16px; background: var(--welcome-brand); color: #fff; font-family: Sora, Inter, sans-serif; font-size: 42px; font-weight: 800; line-height: 1; box-shadow: 0 8px 20px rgba(40,22,8,.18); }
.welcome-hero h1 { margin: 14px 0 6px; font-family: Sora, Inter, sans-serif; font-size: 24px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.welcome-hero p { margin: 0; color: var(--welcome-secondary); font-size: 13.5px; line-height: 1.5; }
.persona-toggle { display: flex; gap: 0; margin: 22px 20px 0; padding: 4px; border-radius: 14px; background: var(--welcome-surface-2); }
.persona-btn { display: flex; flex: 1; align-items: center; justify-content: center; gap: 7px; padding: 11px 4px; border: 0; border-radius: 10px; background: transparent; color: var(--welcome-secondary); font-size: 13.5px; font-weight: 700; cursor: pointer; }
.persona-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.persona-btn.active { background: linear-gradient(135deg, #FFB648 0%, #E2631D 100%); color: #fff; box-shadow: 0 4px 14px rgba(224,99,29,.25); }
.welcome-error { margin: 12px 20px 0; padding: 11px 13px; border: 1px solid rgba(193,68,59,.22); border-radius: 12px; background: rgba(193,68,59,.1); color: #9f332d; font-size: 12px; line-height: 1.45; }
.welcome-auth-card { margin: 16px 20px 0; padding: 22px 20px; border: 1px solid var(--welcome-border); border-radius: 18px; background: var(--welcome-surface); box-shadow: 0 10px 30px rgba(60,40,10,.06); }
.welcome-mode-toggle { display: flex; gap: 22px; margin-bottom: 18px; border-bottom: 1px solid var(--welcome-border); }
.welcome-mode-tab { padding: 0 0 11px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--welcome-muted); font-size: 14.5px; font-weight: 700; cursor: pointer; }
.welcome-mode-tab.active { border-bottom-color: var(--welcome-brand); color: var(--welcome-text); }
.welcome-form[hidden], .welcome-mode-toggle[hidden] { display: none; }
.welcome-form { display: grid; gap: 0; }
.welcome-field-label { margin: 0 0 6px; color: var(--welcome-secondary); font-size: 12px; font-weight: 600; }
.welcome-phone-row { display: flex; gap: 8px; }
.welcome-country-chip { display: flex; width: 54px; flex: 0 0 54px; align-items: center; justify-content: center; border: 1px solid var(--welcome-border); border-radius: 12px; background: var(--welcome-surface-2); color: var(--welcome-text); font-size: 13.5px; font-weight: 700; }
.welcome-field-input { width: 100%; min-width: 0; padding: 12px 14px; border: 1px solid var(--welcome-border); border-radius: 12px; outline: 0; background: var(--welcome-surface); color: var(--welcome-text); font: inherit; font-size: 14px; }
.welcome-field-input:focus { border-color: var(--welcome-brand); box-shadow: 0 0 0 3px var(--welcome-brand-tint); }
.welcome-field-input::placeholder { color: var(--welcome-muted); }
.welcome-primary-btn { width: 100%; margin-top: 16px; padding: 13px 0; border: 0; border-radius: 20px; background: linear-gradient(135deg, #FFB648 0%, #E2631D 100%); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 14px rgba(224,99,29,.3); }
.welcome-helper, .welcome-terms, .welcome-restricted-note { color: var(--welcome-muted); font-size: 11.5px; line-height: 1.5; text-align: center; }
.welcome-helper { margin: 10px 0 0; }
.welcome-terms { margin: 20px 30px 0; }
.welcome-terms a, .welcome-forgot-link { color: var(--welcome-brand-dark); font-weight: 600; text-decoration: none; }
.welcome-admin-gate { margin: 22px 0 0; text-align: center; }
.welcome-divider { display: flex; align-items: center; gap: 10px; margin: 0 32px 14px; }
.welcome-divider span { height: 1px; flex: 1; background: var(--welcome-border); }
.welcome-divider b { color: var(--welcome-muted); font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.welcome-admin-link, .welcome-back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--welcome-secondary); font-size: 12.5px; font-weight: 700; text-decoration: none; }
.welcome-admin-link svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.admin-login-shell { padding-top: 8px; }
.welcome-back-link { gap: 8px; margin: 0 20px; font-size: 14px; }
.welcome-back-link span { font-size: 27px; font-weight: 400; line-height: .7; }
.admin-login-body { padding: 44px 20px 0; }
.admin-login-body h1 { margin: 0 0 8px; font-family: Sora, Inter, sans-serif; font-size: 24px; letter-spacing: -.02em; }
.admin-login-body > p:not(.welcome-error) { margin: 0 0 24px; color: var(--welcome-secondary); font-size: 13.5px; line-height: 1.5; }
.admin-login-form { gap: 8px; }
.admin-login-form .welcome-field-label:not(:first-of-type) { margin-top: 10px; }
.welcome-forgot-link { justify-self: end; margin-top: 4px; font-size: 12px; }
.admin-login-form .welcome-primary-btn { margin-top: 14px; }
.welcome-restricted-note { margin: 18px 0 0; }
@media (min-width: 701px) { .welcome-shell { min-height: 0; padding: 18px 0; } }