Pet Drop In Visits Near You

⏱ Last
Minute

🐾 All Services

🐕 Dog Walk – 30 Min

🦮 Dog Walk – 60 Min

🏠 Drop-In Visit

🌙 Overnight Boarding

☀️ Doggy Daycare

🐈 Cat Drop-In Visit

🐇 Small Animal Care

🛏️ In-Home Overnight Sitting

🐶 Puppy Care

🦴 Senior Dog Care

💊 Medication Administration

🚗 Pet Taxi

🐴 Farm Animal Care

🎯 Obedience Reinforcement Walk

✂️ Full Dog Groom

💅 Nail Trim & Buffing

🌀 De-Shedding Treatment

🐱 Cat Groom

🦷 Teeth Brushing

🎓 Private Obedience Training

🦎 Exotic Pet Care

💉 Insulin Injection

💧 Subcutaneous Fluid Therapy

🏅 Certified Dog Trainer

🎖️ AKC CGC Prep

👩‍⚕️ Vet Tech Escort

🏊 Canine Hydrotherapy

✨ Certified Professional Groom

🏥 Post-Operative Home Care

that DashboardLayout renders just below the shell. Its own scrollbar is hidden so the internal results list keeps the only visible bar (no double scrollbar). (This selector only ever matches the Explore page — it is the only .ph-page-shell.) */ main.ph-page-content:has(.ph-page-shell) { overflow-x: hidden; overflow-y: auto; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* legacy Edge */ } main.ph-page-content:has(.ph-page-shell)::-webkit-scrollbar { width: 0; height: 0; } /* WebKit */ /* ── Leaflet popup — caregiver hover card ── */ .ph-map-popup .leaflet-popup-content-wrapper { padding: 0; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,.18); overflow: hidden; } .ph-map-popup .leaflet-popup-content { margin: 0; } .ph-map-popup .leaflet-popup-close-button { display: none; } .ph-map-popup .leaflet-popup-tip-container { display: none; } /* ── Page shell: 2-col × 2-row grid (split = default) ── */ .ph-page-shell { display: grid; grid-template-columns: 60% 40%; grid-template-rows: auto auto 1fr; overflow: hidden; } /* default (split) grid placements */ .ph-search-section { grid-column: 1; grid-row: 1; } .ph-view-toggle-bar { grid-column: 1; grid-row: 2; } .ph-provider-list { grid-column: 1; grid-row: 3; } .ph-map-container { grid-column: 2; grid-row: 1 / 4; } /* ── Desktop: list-only view ── */ .ph-page-shell.ph-mobile-list { grid-template-columns: 1fr; } .ph-page-shell.ph-mobile-list .ph-map-container { display: none; } .ph-page-shell.ph-mobile-list .ph-provider-list { grid-column: 1; } /* ── Desktop: map-only view ── */ .ph-page-shell.ph-mobile-map { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; } .ph-page-shell.ph-mobile-map .ph-search-section { grid-column: 1; grid-row: 1; } .ph-page-shell.ph-mobile-map .ph-view-toggle-bar { grid-column: 1; grid-row: 2; z-index: 250; } .ph-page-shell.ph-mobile-map .ph-map-container { grid-column: 1; grid-row: 3; display: block; height: 100%; } .ph-page-shell.ph-mobile-map .ph-provider-list { display: none; } /* ── Search bar ── */ .ph-search-section { background: var(--ph-surface); border-bottom: 1px solid var(--ph-border-subtle); border-right: 1px solid var(--ph-border-subtle); padding: .5rem 1rem; box-shadow: 0 2px 6px rgba(0,0,0,.05); position: relative; z-index: 40; /* stacking context; filter panel lives here; toggle bar at z-index:250 paints above */ min-width: 0; /* prevent grid item from expanding beyond its allocated column */ } .ph-search-bar { display: flex; flex-direction: column; gap: .4rem; overflow: hidden; /* clip content during collapse */ max-height: 185px; /* upper bound — fields + strip + optional desc bar */ transition: max-height .26s cubic-bezier(.4,0,.2,1), opacity .22s ease; } /* ── Service card strip ── */ /* Group backgrounds — declared before --sel so the cascade lets --sel's orange border win */ .ph-svc-card--all { background: var(--ph-gray-50); border-color: var(--ph-gray-200); } .ph-svc-card--core { background: var(--ph-amber-50); border-color: rgba(253,97,26,.12); } .ph-svc-card--ext { background: var(--ph-blue-50); border-color: rgba(59,130,246,.12); } .ph-svc-card--spec { background: var(--ph-fuchsia-50); border-color: rgba(168,85,247,.12); } .ph-svc-card--pro { background: var(--ph-green-50); border-color: rgba(34,197,94,.12); } .ph-svc-strip { display: flex; gap: .4rem; overflow-x: auto; padding: .3rem 4px .5rem; scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; touch-action: pan-x; /* explicit horizontal-only touch scroll on mobile */ min-width: 0; /* allow flex item to be narrower than sum of card widths */ width: 100%; /* fill parent; combined with min-width:0 enables overflow-x scroll */ } .ph-svc-strip::-webkit-scrollbar { display: none; } .ph-svc-card { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .18rem; padding: .5rem .4rem .42rem; width: 74px; border-radius: 10px; border: 2.5px solid transparent; cursor: pointer; user-select: none; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; text-align: center; position: relative; overflow: hidden; } .ph-svc-card:hover:not(.ph-svc-card--sel) { border-color: rgba(253,97,26,.22); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,.07); } .ph-svc-card--sel { border-color: var(--ph-accent); box-shadow: 0 3px 14px rgba(253,97,26,.3), 0 0 0 1px rgba(253,97,26,.1); transform: scale(1.07) translateY(-1px); z-index: 1; } .ph-svc-card-emoji { font-size: 1.5rem; line-height: 1.2; display: block; } .ph-svc-card-name { font-size: .62rem; font-weight: 600; color: var(--ph-text-gray-600); line-height: 1.25; display: block; /* no clamp: the card grows, so wider spacing never cuts a name (1.4.12) */ word-break: break-word; } .ph-svc-card--sel .ph-svc-card-name { color: var(--ph-text); font-weight: 700; } /* Glass glint — diagonal white strip sweeping bottom-left → top-right every 15 s */ .ph-svc-card--sel::after { content: ''; position: absolute; inset: 0; background: linear-gradient( to top right, transparent 30%, rgba(255,255,255,.55) 50%, /* ph-fixed: shine sweep, reads on both schemes */ transparent 70% ); transform: translate(-100%, 100%); animation: ph-card-shine 15s ease-in-out infinite; pointer-events: none; } @keyframes ph-card-shine { 0% { transform: translate(-100%, 100%); } 4% { transform: translate(100%, -100%); } 4.1%, 100% { transform: translate(-100%, 100%); } } /* Description bar */ .ph-svc-desc-bar { display: flex; align-items: flex-start; gap: .3rem; font-size: .71rem; color: var(--ph-text-gray-400); padding: .05rem 0 .3rem; line-height: 1.45; font-style: italic; } .ph-svc-desc-text { flex: 1; min-width: 0; } .ph-svc-desc-x { flex-shrink: 0; background: none; border: none; color: var(--ph-text-x-c9ced6); cursor: pointer; font-size: .85rem; line-height: 1; padding: 0 .1rem; font-family: inherit; transition: color .1s; } .ph-svc-desc-x:hover { color: var(--ph-text-muted); } /* ── Strip wrapper — pins LM card, scrolls the rest ── */ .ph-svc-strip-wrap { display: flex; align-items: stretch; overflow: visible; width: 100%; } .ph-svc-strip-sep { width: 1.5px; background: var(--ph-border-subtle); flex-shrink: 0; margin: .45rem .3rem; border-radius: 2px; } /* ── Last Minute card (pinned) ── */ .ph-svc-card--lm { background: transparent; border: 1.5px dashed var(--ph-blue-300); } .ph-svc-card--lm .ph-svc-card-name { color: var(--ph-text-blue-500); } .ph-svc-card--lm .ph-svc-card-emoji { color: var(--ph-text-blue-500); } .ph-svc-card--lm:hover:not(.ph-svc-card--lm-sel) { background: rgba(59,130,246,.06); border-color: var(--ph-blue-400) !important; border-style: dashed !important; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(59,130,246,.15); } .ph-svc-card--lm-sel { border: 1.5px solid var(--ph-amber-500) !important; background: linear-gradient(160deg, var(--ph-amber-100), var(--ph-amber-200)) !important; box-shadow: 0 3px 14px rgba(245,158,11,.35), 0 0 0 1px rgba(245,158,11,.15) !important; z-index: 1; } .ph-svc-card--lm-sel .ph-svc-card-name { color: var(--ph-text-amber-900) !important; font-weight: 700 !important; } .ph-svc-card--lm-sel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top right, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); /* ph-fixed: shine sweep, reads on both schemes */ transform: translate(-100%, 100%); animation: ph-card-shine 15s ease-in-out infinite; pointer-events: none; } /* ── Last Minute results panel ── */ .ph-lm-panel { padding: 1.1rem 1rem 1.5rem; display: flex; flex-direction: column; gap: .95rem; overflow-y: auto; height: 100%; } .ph-lm-badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ph-text-amber-800); background: var(--ph-amber-200); padding: .18rem .55rem; border-radius: 999px; margin-bottom: .3rem; } .ph-lm-title { font-size: 1.05rem; font-weight: 800; color: var(--ph-text); margin-bottom: .2rem; } .ph-lm-sub { font-size: .8rem; color: var(--ph-text-muted); line-height: 1.5; } .ph-lm-steps { display: flex; flex-direction: column; gap: .45rem; } .ph-lm-step { display: flex; align-items: flex-start; gap: .55rem; font-size: .8rem; color: var(--ph-text-secondary); line-height: 1.45; } .ph-lm-step-n { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--ph-amber-200); color: var(--ph-text-amber-800); font-size: .7rem; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-top: .05rem; } .ph-lm-checks { display: flex; flex-direction: column; gap: .28rem; } .ph-lm-check { font-size: .75rem; padding: .3rem .55rem; border-radius: 6px; font-weight: 500; display: flex; flex-wrap: wrap; align-items: center; gap: .2rem; } .ph-lm-check--ok { color: var(--ph-text-green-700); background: var(--ph-green-50); } .ph-lm-check--err { color: var(--ph-text-amber-800); background: var(--ph-amber-50); } .ph-lm-check-link { color: var(--ph-text-amber-700); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; } .ph-lm-check-link:hover { color: var(--ph-text-amber-900); } .ph-lm-pets-section { display: flex; flex-direction: column; } .ph-lm-pets { display: flex; flex-wrap: wrap; gap: .45rem; } .ph-lm-pet-card { display: flex; flex-direction: column; align-items: center; gap: .18rem; cursor: pointer; padding: .5rem .7rem; border: 1.5px solid var(--ph-gray-200); border-radius: 10px; background: var(--ph-surface); transition: all .12s; min-width: 66px; user-select: none; } .ph-lm-pet-card:hover:not(.ph-lm-pet-card--add) { border-color: var(--ph-amber-500); background: var(--ph-amber-50); } .ph-lm-pet-card--sel { border-color: var(--ph-amber-500) !important; background: var(--ph-amber-100) !important; box-shadow: 0 2px 8px rgba(245,158,11,.22); } .ph-lm-pet-card--locked { opacity: .45; cursor: not-allowed; } .ph-lm-pet-card--vax { border-color: var(--ph-amber-300); cursor: default; } .ph-lm-pet-card--vax .ph-lm-pet-size { color: var(--ph-text-amber-800); font-weight: 700; text-align: center; } .ph-lm-pet-vax { background: none; border: none; padding: 0; font-family: inherit; cursor: pointer; font-size: .64rem; font-weight: 700; color: var(--ph-primary); text-decoration: underline; } .ph-lm-pet-card--add { background: transparent; border: 1.5px dashed var(--ph-blue-300); } .ph-lm-pet-card--add:hover { background: rgba(59,130,246,.06); border-color: var(--ph-blue-400); } .ph-lm-pet-card--add .ph-lm-pet-name { color: var(--ph-text-blue-500); } .ph-lm-pet-avatar--add { background: transparent !important; color: var(--ph-text-blue-500); font-size: 1.4rem; font-weight: 300; line-height: 1; } .ph-lm-pet-avatar { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; overflow: hidden; } /* Real pet photo fills the circle; the colored bg + emoji remain the fallback. */ .ph-lm-pet-avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; } .ph-lm-pet-name { font-size: .73rem; font-weight: 700; color: var(--ph-text); } .ph-lm-pet-size { font-size: .64rem; color: var(--ph-text-gray-400); } .ph-lm-preview { display: flex; flex-direction: column; gap: .35rem; } .ph-lm-preview-head { font-size: .71rem; font-weight: 700; color: var(--ph-text-muted); text-transform: uppercase; letter-spacing: .04em; } .ph-lm-preview-card { background: var(--ph-surface); border: 1.5px solid var(--ph-amber-200); border-radius: 10px; padding: .75rem; display: flex; flex-direction: column; gap: .45rem; } .ph-lm-preview-badge { display: inline-flex; align-items: center; gap: .25rem; background: var(--ph-amber-100); color: var(--ph-text-amber-800); font-size: .68rem; font-weight: 800; padding: .18rem .5rem; border-radius: 20px; align-self: flex-start; } .ph-lm-preview-svc { font-size: .88rem; font-weight: 700; color: var(--ph-text); } .ph-lm-preview-rows { display: flex; flex-direction: column; gap: .22rem; font-size: .75rem; color: var(--ph-text-gray-600); } .ph-lm-preview-note { font-size: .67rem; color: var(--ph-text-gray-400); line-height: 1.45; border-top: 1px dashed var(--ph-gray-100); padding-top: .4rem; margin-top: .05rem; } .ph-lm-prow-head { font-weight: 700; color: var(--ph-text); margin-bottom: .05rem; } /* Preview tab bar */ .ph-lm-preview-tabs { display: flex; gap: .3rem; overflow-x: auto; scrollbar-width: none; padding-bottom: .3rem; border-bottom: 1.5px solid var(--ph-gray-100); } .ph-lm-preview-tabs::-webkit-scrollbar { display: none; } .ph-lm-ptab { flex-shrink: 0; font-size: .68rem; font-weight: 600; font-family: inherit; cursor: pointer; padding: .22rem .6rem; border-radius: 999px; border: 1.5px solid var(--ph-gray-200); background: var(--ph-gray-50); color: var(--ph-text-muted); transition: background .15s, border-color .15s, color .15s; white-space: nowrap; } .ph-lm-ptab:hover:not(.ph-lm-ptab--on) { background: var(--ph-amber-100); border-color: var(--ph-amber-300); color: var(--ph-text-amber-800); } .ph-lm-ptab--on { background: var(--ph-amber-100); border-color: var(--ph-amber-500); color: var(--ph-text-amber-900); font-weight: 700; } /* Pet preview layout */ .ph-lm-pet-preview { display: flex; gap: .65rem; align-items: flex-start; } .ph-lm-pet-preview-avatar { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; overflow: hidden; } .ph-lm-form-row { display: flex; flex-direction: column; gap: .22rem; } .ph-lm-label { font-size: .72rem; font-weight: 700; color: var(--ph-text-secondary); } .ph-lm-textarea { width: 100%; box-sizing: border-box; padding: .4rem .65rem; border: 1px solid var(--ph-gray-200); border-radius: 7px; font-size: .84rem; font-family: inherit; color: var(--ph-text); background: var(--ph-surface); transition: border-color .15s, box-shadow .15s; } .ph-lm-textarea:focus { border-color: var(--ph-amber-500); box-shadow: 0 0 0 3px rgba(245,158,11,.12); } .ph-lm-textarea { resize: none; line-height: 1.45; } .ph-lm-mode-tag { font-size: .72rem; font-weight: 700; color: var(--ph-text-amber-800); background: var(--ph-amber-200); padding: .2rem .65rem; border-radius: 999px; letter-spacing: .02em; } .ph-fp-price-slider { padding: .6rem 0; display: flex; flex-direction: column; gap: .35rem; } .ph-fp-price-readout { display: flex; justify-content: space-between; font-size: .74rem; font-weight: 700; color: var(--ph-text); } .ph-fp-price-basis { font-size: .68rem; color: var(--ph-text-muted); line-height: 1.35; } .ph-fp-clear-one { margin-top: .3rem; align-self: flex-start; font-size: .7rem; color: var(--ph-accent); background: none; border: none; cursor: pointer; padding: 0; font-family: inherit; text-decoration: underline; } .ph-lm-price-section { display: flex; flex-direction: column; background: var(--ph-zinc-50); border: 1.5px solid var(--ph-gray-100); border-radius: 10px; padding: .8rem .85rem .6rem; } .ph-lm-price-display { float: right; font-size: .78rem; font-weight: 800; color: var(--ph-text-amber-500); } .ph-lm-price-scale { display: flex; justify-content: space-between; font-size: .66rem; color: var(--ph-text-gray-400); margin-top: .35rem; } /* Async payment failure banner (payment_intent.payment_failed webhook) */ .ph-lm-dispatch-error { display: flex; align-items: center; justify-content: space-between; gap: .5rem; background: var(--ph-red-50); border: 1.5px solid var(--ph-red-300); border-radius: 10px; padding: .6rem .85rem; font-size: .8rem; color: var(--ph-text-red-700); font-weight: 600; } .ph-lm-dispatch-error-close { background: none; border: none; padding: 0; line-height: 1; font-size: 1rem; color: var(--ph-text-red-700); cursor: pointer; flex-shrink: 0; } .ph-lm-dispatch-error-close:hover { opacity: .7; } .ph-lm-fee-box { background: var(--ph-amber-50); border: 1.5px solid var(--ph-amber-200); border-radius: 10px; padding: .7rem .85rem; display: flex; flex-direction: column; gap: .28rem; } .ph-lm-fee-row { display: flex; justify-content: space-between; align-items: center; font-size: .85rem; font-weight: 700; color: var(--ph-text); } .ph-lm-fee-note { font-size: .72rem; color: var(--ph-text-amber-800); line-height: 1.4; } .ph-lm-fee-rules { font-size: .72rem; color: var(--ph-text-amber-900); line-height: 1.5; display: flex; flex-direction: column; gap: .12rem; margin-top: .1rem; } .ph-lm-fee-rules-head { font-weight: 700; color: var(--ph-text-amber-800); font-size: .73rem; margin-top: .1rem; } .ph-lm-fee-rule-row { display: flex; gap: .4rem; } .ph-lm-fee-rule-tier { min-width: 6rem; font-weight: 600; } .ph-lm-decision-btns { display: flex; gap: .5rem; margin-top: .1rem; } .ph-lm-decision-accept { flex: 1; padding: .38rem .5rem; border-radius: 7px; border: 1.5px solid var(--ph-green-600); background: var(--ph-green-50); color: var(--ph-text-green-700); font-size: .78rem; font-weight: 700; cursor: pointer; } .ph-lm-decision-decline { flex: 1; padding: .38rem .5rem; border-radius: 7px; border: 1.5px solid var(--ph-red-600); background: var(--ph-red-50); color: var(--ph-text-red-600); font-size: .78rem; font-weight: 700; cursor: pointer; } .ph-lm-optout-btns { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .15rem; } .ph-lm-optout { padding: .28rem .55rem; border-radius: 6px; border: 1px solid var(--ph-gray-300); background: var(--ph-gray-50); color: var(--ph-text-secondary); font-size: .72rem; cursor: pointer; } /* Caregiver pool indicator */ .ph-lm-pool { display: flex; align-items: flex-start; gap: .6rem; border-radius: 10px; padding: .65rem .8rem; font-size: .78rem; line-height: 1.45; } .ph-lm-pool--loading { background: var(--ph-slate-100); border: 1.5px solid var(--ph-slate-300); color: var(--ph-text-slate-500); } .ph-lm-pool--zero { background: var(--ph-red-50); border: 1.5px solid var(--ph-red-300); color: var(--ph-text-red-800); } .ph-lm-pool--low { background: var(--ph-amber-50); border: 1.5px solid var(--ph-amber-200); color: var(--ph-text-amber-800); } .ph-lm-pool--ok { background: var(--ph-green-50); border: 1.5px solid var(--ph-green-300); color: var(--ph-text-green-800); } .ph-lm-pool-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: .05rem; } .ph-lm-pool-label { font-weight: 700; margin-bottom: .1rem; } .ph-lm-pool-hint { font-size: .72rem; opacity: .85; } .ph-lm-pool-fix { margin-top: .3rem; padding: .25rem .65rem; border-radius: 7px; border: 1.5px solid currentColor; background: var(--ph-surface); color: inherit; font-family: inherit; font-size: .74rem; font-weight: 700; cursor: pointer; } .ph-lm-replies-head { display: flex; justify-content: space-between; align-items: center; font-size: .8rem; font-weight: 700; color: var(--ph-text); padding: .35rem 0; } .ph-lm-sel-timer { font-size: .72rem; color: var(--ph-text-amber-800); font-weight: 600; } .ph-lm-reply-card { cursor: default !important; } .ph-lm-replies-hint { font-size: .72rem; color: var(--ph-text-amber-800); margin: -.15rem 0 .35rem; } .ph-lm-reply-name { color: inherit; text-decoration: none; } .ph-lm-reply-name:hover { text-decoration: underline; } /* A reply that just landed: amber glow pulses a few times, then settles on a tinted card with the "Just replied" pill — so a new caregiver never slips silently into the list. */ @keyframes ph-lm-reply-pulse { 0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, .55); } 70% { box-shadow: 0 0 0 12px rgba(245, 158, 11, 0); } 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); } } @keyframes ph-lm-reply-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .ph-lm-reply-card--new { border-color: var(--ph-amber-500) !important; background: var(--ph-amber-50) !important; animation: ph-lm-reply-in .35s ease-out, ph-lm-reply-pulse 1.4s ease-out .35s 4; } .ph-lm-new-pill { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--ph-text-amber-800); background: var(--ph-amber-200); border-radius: 999px; padding: .1rem .45rem; white-space: nowrap; } @media (prefers-reduced-motion: reduce) { .ph-lm-reply-card--new { animation: none; } } .ph-lm-reply-book { flex-shrink: 0; padding: .38rem .9rem; background: var(--ph-amber-500); color: var(--ph-on-solid); border: none; border-radius: 8px; font-size: .78rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: background .12s; white-space: nowrap; align-self: center; } .ph-lm-reply-book:hover { background: var(--ph-amber-600); } .ph-lm-waiting { display: flex; flex-direction: column; align-items: center; gap: .55rem; padding: 2rem 1rem; font-size: .83rem; color: var(--ph-text-gray-400); font-style: italic; } .ph-lm-cancel-row { display: flex; flex-direction: column; gap: .35rem; padding-top: .25rem; } .ph-lm-cancel { font-size: .76rem; font-weight: 600; color: var(--ph-text-red-600); background: none; border: 1.5px solid var(--ph-red-300); border-radius: 8px; padding: .38rem .85rem; cursor: pointer; font-family: inherit; transition: all .12s; align-self: flex-start; } .ph-lm-cancel:hover { background: var(--ph-red-50); } .ph-lm-cancel-note { font-size: .69rem; color: var(--ph-text-gray-400); } .ph-search-field { display: flex; flex-direction: column; flex: 1; min-width: 0; } .ph-field-date { flex: 0 0 auto; width: 155px; } .ph-field-zip { flex: 1; min-width: 130px; } /* Backup-mode banner */ .ph-backup-bar { display: flex; align-items: flex-start; gap: .85rem; padding: .35rem .25rem; } .ph-backup-bar-icon { font-size: 1.3rem; flex-shrink: 0; margin-top: .1rem; } .ph-backup-bar-body { flex: 1; min-width: 0; } .ph-backup-bar-title { font-size: .82rem; font-weight: 700; color: var(--ph-text); margin-bottom: .12rem; } .ph-backup-bar-detail { font-size: .78rem; color: var(--ph-text-secondary); } .ph-backup-bar-hint { font-size: .73rem; color: var(--ph-text-muted); margin-top: .18rem; } .ph-backup-bar-cancel { flex-shrink: 0; background: none; border: 1.5px solid var(--ph-gray-300); border-radius: 7px; padding: .35rem .75rem; font-size: .76rem; font-weight: 600; color: var(--ph-text-muted); cursor: pointer; white-space: nowrap; transition: border-color .12s, color .12s; } .ph-backup-bar-cancel:hover { border-color: var(--ph-red-500); color: var(--ph-text-red-500); } /* ── Zip input ── */ .ph-city-chip--newline { } .ph-zip-input { width: 110px; padding: .375rem .75rem; font-size: max(16px, 1rem); /* 16px minimum prevents iOS Safari auto-zoom on focus */ font-family: inherit; color: var(--ph-text); transition: border-color .15s, box-shadow .15s; height: 2.357em; box-sizing: border-box; } .ph-zip--unknown { border-color: var(--ph-accent); } .ph-city-chip { font-size: .75rem; font-weight: 600; color: var(--ph-text-sky-700); background: var(--ph-sky-100); border: 1px solid var(--ph-sky-200); padding: .22rem .6rem; border-radius: 999px; white-space: nowrap; } .ph-city-chip--unknown { color: var(--ph-accent); background: var(--ph-orange-50); border-color: rgba(249,115,22,.3); } /* ── Filter toggle button ── */ .ph-filter-btn { display: flex; align-items: center; gap: .35rem; padding: .42rem .85rem; border: 1.5px solid var(--ph-gray-300); border-radius: 8px; background: var(--ph-surface); color: var(--ph-text-secondary); font-size: .8rem; font-weight: 600; cursor: pointer; font-family: inherit; white-space: nowrap; transition: all .12s; position: relative; } .ph-filter-btn:hover { border-color: var(--ph-accent); color: var(--ph-accent); } .ph-filter-btn--active { background: var(--ph-accent) !important; border-color: var(--ph-accent) !important; color: var(--ph-on-accent) !important; } .ph-filter-btn--active svg { stroke: var(--ph-surface) !important; } .ph-filter-badge { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--ph-surface); color: var(--ph-accent); font-size: .65rem; font-weight: 800; flex-shrink: 0; } .ph-filter-btn--active .ph-filter-badge { color: var(--ph-accent); } /* ── Filter panel — absolute overlay below toggle bar ── */ .ph-fp-panel { position: absolute; /* starts just below the toggle bar; --ph-toggle-height measured by phUpdateLayout JS */ top: calc(100% + var(--ph-toggle-height, 52px) + 2px); left: 0; right: 0; z-index: 10; /* inside ph-search-section stacking ctx (z:40); toggle bar at 250 > 40 */ border: 1.5px solid var(--ph-accent); border-radius: 10px; background: var(--ph-zinc-50); overflow-y: auto; overflow-x: hidden; /* never wider than its containing block */ max-height: 60vh; /* bounded: on any screen, filter stays scrollable */ box-shadow: 0 6px 20px rgba(0,0,0,.13); -webkit-overflow-scrolling: touch; box-sizing: border-box; } /* ── Filter-active mode: collapse strip area + hide results ── */ .ph-search-section { transition: padding-top .26s cubic-bezier(.4,0,.2,1), padding-bottom .26s cubic-bezier(.4,0,.2,1), box-shadow .2s ease; } .ph-filter-active .ph-search-bar { max-height: 0; opacity: 0; } .ph-filter-active .ph-search-section { padding-top: 0 !important; padding-bottom: 0 !important; box-shadow: none; } .ph-filter-active .ph-provider-list { visibility: hidden; } .ph-fp-row { display: flex; align-items: center; gap: .5rem; padding: .5rem .85rem; cursor: pointer; border-bottom: 1px solid var(--ph-x-f0f0f0); transition: background .1s; user-select: none; } .ph-fp-row:last-of-type { border-bottom: none; } .ph-fp-row:hover { background: var(--ph-gray-100); } .ph-fp-row--open { background: var(--ph-gray-50); } .ph-fp-label { font-size: .78rem; font-weight: 700; color: var(--ph-text-secondary); min-width: 120px; } .ph-fp-val { flex: 1; min-width: 0; /* allow flex item to shrink past content width */ font-size: .78rem; color: var(--ph-text-gray-400); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ph-fp-val--active { color: var(--ph-accent); font-weight: 600; } .ph-fp-chevron { flex-shrink: 0; opacity: .5; transition: transform .15s; } .ph-fp-row--open .ph-fp-chevron { transform: rotate(90deg); opacity: 1; } .bkf-sep { height:1px; background:var(--ph-border); margin:.15rem 0; } .ph-fp-subopts { display: flex; flex-wrap: wrap; gap: .35rem; padding: .45rem .85rem .65rem; background: var(--ph-surface); border-bottom: 1px solid var(--ph-x-f0f0f0); box-sizing: border-box; max-width: 100%; } .ph-fp-opt { padding: .28rem .65rem; border-radius: 999px; border: 1.5px solid var(--ph-gray-200); background: var(--ph-gray-50); color: var(--ph-text-gray-600); font-size: .76rem; font-weight: 600; cursor: pointer; font-family: inherit; white-space: nowrap; transition: all .12s; } .ph-fp-opt:hover { border-color: var(--ph-accent); color: var(--ph-accent); } .ph-fp-opt--active { border-color: var(--ph-accent); background: var(--ph-accent); color: var(--ph-on-accent) !important; } .ph-fp-help { background: none; border: 0; padding: .2rem 0; font-size: .76rem; font-weight: 600; color: var(--ph-text-blue-700); text-decoration: underline; cursor: pointer; font-family: inherit; } /* Resolved clock time beside a relative LM chip ("in 30 min · 4:15 PM"). */ .ph-fp-opt-hint { opacity: .7; font-weight: 500; margin-left: .3rem; } /* ── LM quick-set shortcuts — momentary buttons that stamp "Exact time", NOT selectable filter options, so they never carry the orange --active state. ── */ .ph-fp-quickset-row { display: flex; flex-wrap: wrap; gap: .35rem; width: 100%; } .ph-fp-quickset { padding: .28rem .65rem; border-radius: 8px; border: 1.5px dashed var(--ph-slate-300); background: var(--ph-slate-50); color: var(--ph-text-slate-600); font-size: .76rem; font-weight: 600; cursor: pointer; font-family: inherit; white-space: nowrap; transition: all .12s; } .ph-fp-quickset:hover { border-color: var(--ph-accent); color: var(--ph-accent); background: var(--ph-orange-50); } .ph-fp-quickset:active { transform: scale(.97); } .ph-fp-exact-lbl { display: block; font-size: .72rem; font-weight: 700; color: var(--ph-text-muted); margin-bottom: .25rem; } .ph-fp-timepicker--lm { margin-top: .5rem; } /* ── Lockout state ── */ .ph-lm-lockout { display: flex; flex-direction: column; align-items: center; gap: .55rem; padding: 1.5rem 1rem; text-align: center; background: var(--ph-red-50); border: 1.5px solid var(--ph-red-300); border-radius: 12px; } .ph-lm-lockout-icon { font-size: 2rem; } .ph-lm-lockout-head { font-size: .95rem; font-weight: 800; color: var(--ph-text-red-800); } .ph-lm-lockout-body { font-size: .78rem; color: var(--ph-text-red-900); line-height: 1.55; max-width: 320px; } .ph-lm-lockout-until { font-size: .78rem; color: var(--ph-text-red-800); margin-top: .25rem; } /* ── Pending dispatch (payment submitted, waiting for webhook) ── */ .ph-lm-pending { display: flex; flex-direction: column; align-items: center; gap: .55rem; padding: 1.5rem 1rem; text-align: center; background: var(--ph-amber-50); border: 1.5px dashed var(--ph-amber-500); border-radius: 12px; } .ph-lm-pending-pulse { font-size: 2rem; line-height: 1; animation: ph-lm-pulse 1.2s ease-in-out infinite; } @keyframes ph-lm-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .6; transform: scale(.88); } } .ph-lm-pending-head { font-size: .95rem; font-weight: 800; color: var(--ph-text-amber-800); } .ph-lm-pending-body { font-size: .78rem; color: var(--ph-text-amber-900); line-height: 1.55; max-width: 320px; } .ph-lm-pending-timeout { display: flex; flex-direction: column; gap: .45rem; background: var(--ph-amber-100); border: 1px solid var(--ph-amber-200); border-radius: 8px; padding: .65rem .8rem; margin-top: .4rem; } .ph-lm-pending-timeout-note { font-size: .74rem; color: var(--ph-text-amber-900); line-height: 1.5; } .ph-lm-pending-cancel { align-self: flex-start; padding: .38rem .85rem; background: var(--ph-surface); color: var(--ph-text-amber-700); border: 1.5px solid var(--ph-amber-500); border-radius: 8px; font-size: .76rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: all .12s; } .ph-lm-pending-cancel:hover { background: var(--ph-amber-50); } /* ── Cancel confirmation ── */ .ph-lm-cancel-confirm { background: var(--ph-orange-50); border: 1.5px solid var(--ph-orange-200); border-radius: 12px; padding: .85rem 1rem; display: flex; flex-direction: column; gap: .55rem; } .ph-lm-cancel-confirm-head { font-size: .82rem; font-weight: 800; color: var(--ph-text-orange-800); } .ph-lm-cancel-confirm-body { font-size: .76rem; color: var(--ph-text-orange-900); line-height: 1.55; } .ph-lm-cancel-confirm-btns { display: flex; gap: .5rem; flex-wrap: wrap; } .ph-lm-cancel-confirm-yes { flex: 1; padding: .42rem .75rem; background: var(--ph-red-600); color: var(--ph-on-solid); border: none; border-radius: 8px; font-size: .76rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: background .12s; white-space: nowrap; } .ph-lm-cancel-confirm-yes:hover { background: var(--ph-red-700); } .ph-lm-cancel-confirm-no { flex: 1; padding: .42rem .75rem; background: var(--ph-green-50); color: var(--ph-text-green-700); border: 1.5px solid var(--ph-green-300); border-radius: 8px; font-size: .76rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: all .12s; white-space: nowrap; } .ph-lm-cancel-confirm-no:hover { background: var(--ph-green-100); } .ph-fp-timepicker { width: 100%; margin-top: .35rem; } .ph-fp-timepicker .ph-rdz-input { max-width: 160px; } .ph-fp-foot { padding: .45rem .85rem; border-top: 1px solid var(--ph-gray-200); display: flex; justify-content: flex-end; } .ph-fp-clear { font-size: .76rem; font-weight: 600; color: var(--ph-text-muted); background: none; border: none; cursor: pointer; font-family: inherit; text-decoration: underline; text-underline-offset: 2px; } .ph-fp-clear:hover { color: var(--ph-text); } /* ── Provider list ── */ .ph-provider-list { overflow-y: auto; height: 100%; background: var(--ph-surface); border-right: 1px solid var(--ph-border-subtle); } /* ── Vertical result cards — wrapping grid (CaregiverResultCardVertical) ── */ .ph-vcard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(390px, 100%), 1fr)); gap: .85rem; padding: .85rem; align-items: stretch; } /* FeeNotice above the results: the grid's own side padding, so its edges line up with the cards. No bottom margin — the grid's top padding is the gap. */ .ph-fee-notice.ph-fee-notice--vcards { margin: .85rem .85rem 0; } @media (max-width: 560px) { .ph-vcard-grid { padding: .6rem; gap: .65rem; } .ph-fee-notice.ph-fee-notice--vcards { margin: .6rem .6rem 0; } } /* ── Caregiver card (v2) ── */ .ph-provider-card { display: flex; gap: .9rem; padding: 1rem 1.1rem; border-bottom: 1px solid var(--ph-border-faint); cursor: pointer; transition: background .15s; align-items: flex-start; min-height: 120px; } .ph-provider-card:hover { background: var(--ph-slate-50); } .ph-card-highlighted { background: var(--ph-blue-50) !important; border-left: 3px solid var(--ph-primary); } .ph-avatar-wrap { position: relative; flex-shrink: 0; } .ph-shield-row { position: absolute; bottom: -4px; left: -3px; display: flex; gap: 3px; align-items: center; } .ph-avatar-shield { display: flex; align-items: center; justify-content: center; cursor: default; } .ph-avatar-shield--bg { filter: drop-shadow(0 1px 3px rgba(249,115,22,.5)); } .ph-avatar-shield--cpr { filter: drop-shadow(0 1px 3px rgba(26,86,219,.45)); } .ph-provider-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; display: block; box-shadow: 0 0 0 3px #fd611a, 0 0 0 6px rgba(253,97,26,.18); } .ph-avatar-initials { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, var(--ph-blue-500), var(--ph-blue-700)); display: flex; align-items: center; justify-content: center; font-size: 1.35rem; font-weight: 800; color: var(--ph-on-solid); letter-spacing: -.02em; user-select: none; box-shadow: 0 0 0 3px #fd611a, 0 0 0 6px rgba(253,97,26,.18); } .ph-avatar-initials--sm { font-size: .72rem; } .ph-provider-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .3rem; } .ph-card-top-row { display: flex; align-items: center; gap: .42rem; } .ph-provider-name { font-size: 1rem; font-weight: 700; color: var(--ph-text); letter-spacing: -.01em; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ph-fav-btn { margin-left: auto; flex-shrink: 0; background: none; border: none; cursor: pointer; padding: .15rem; color: var(--ph-text-gray-300); display: flex; align-items: center; line-height: 1; transition: color .12s, transform .12s; border-radius: 50%; } .ph-fav-btn:hover { color: var(--ph-text-rose-500); transform: scale(1.18); } .ph-card-rating-row { display: flex; align-items: center; gap: .28rem; font-size: .78rem; flex-wrap: wrap; } .ph-rating-star { color: var(--ph-text-amber-500); font-size: .9rem; line-height: 1; } .ph-rating-val { font-weight: 700; color: var(--ph-text); font-size: .82rem; } .ph-rating-sep { color: var(--ph-text-gray-300); } .ph-rating-reviews { color: var(--ph-text-muted); } .ph-rating-repeat { display: flex; align-items: center; gap: .2rem; color: var(--ph-text-sky-700); font-weight: 600; } .ph-card-location { display: flex; align-items: center; gap: .3rem; font-size: .76rem; color: var(--ph-text-muted); } .ph-card-location svg { flex-shrink: 0; opacity: .6; } .ph-card-active { display: flex; align-items: center; gap: .38rem; font-size: .7rem; color: var(--ph-text-emerald-600); font-weight: 500; } .ph-active-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ph-emerald-500); flex-shrink: 0; box-shadow: 0 0 0 2px rgba(16,185,129,.2); } .ph-provider-right { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; flex-shrink: 0; padding-top: .05rem; } .ph-price-v2 { font-size: 1.3rem; font-weight: 800; line-height: 1; white-space: nowrap; font-family: system-ui, -apple-system, sans-serif; /* color injected inline: orange below avg, blue avg+ */ } /* ── Map ── */ .ph-map-container { position: relative; height: 100%; overflow: hidden; background: var(--ph-border-subtle); z-index: 0; } .ph-back-btn { position: absolute; top: .75rem; left: .75rem; z-index: 20; box-shadow: 0 2px 8px rgba(0,0,0,.18); } /* ── View-toggle bar — always visible, above filter panel ── */ .ph-view-toggle-bar { display: flex; justify-content: space-between; align-items: center; padding: .45rem .75rem; background: var(--ph-surface); border-bottom: 1px solid var(--ph-border-subtle); gap: .5rem; flex-wrap: wrap; position: relative; /* stacking context so z-index is respected */ z-index: 250; /* above filter panel (search-section stacking ctx = 40) */ } /* Services / Bundles mode pill moved to the shared

component (components.css → .ph-mode-pill / .ph-pill-btn / .ph-pill-active). */ /* ── Toggle bar left cluster (filter + view chip) ── */ .ph-tb-left { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; } /* ── View-mode cycling chip — same height as .ph-filter-btn ── */ .ph-view-chip { display: inline-flex; flex-direction: row; /* horizontal: icon then dots */ align-items: center; gap: .32rem; padding: .42rem .65rem; /* matches filter btn vertical padding exactly */ border-radius: 8px; /* matches filter btn */ border: 1.5px solid var(--ph-accent); background: var(--ph-x-fff5f0); color: var(--ph-accent); cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease; user-select: none; font-family: inherit; line-height: 1; white-space: nowrap; } .ph-view-chip:hover { background: var(--ph-x-ffe8dc); } .ph-vc-icon { font-size: .95rem; line-height: 1; display: block; } .ph-vc-dots { display: flex; gap: 2.5px; align-items: center; } .ph-vc-dot { width: 3.5px; height: 3.5px; border-radius: 50%; background: currentColor; opacity: .22; transition: opacity .15s; } .ph-vc-dot--on { opacity: 1; } /* On narrow screens split mode is hidden — hide the split indicator dot */ @media (max-width: 479px) { .ph-vc-dot--split { display: none; } } /* ── Bundle cards ── */ /* ── Care Bundle cards — visual language borrowed from the profile wizard's bundle slide (sp-bdb-*), violet themed ── */ .ph-bdl-card { margin: .8rem .9rem; background: var(--ph-surface); border: 1.5px solid var(--ph-violet-200); border-radius: 14px; padding: .85rem .95rem; display: flex; flex-direction: column; gap: .55rem; box-shadow: 0 2px 10px rgba(124,58,237,.07); transition: box-shadow .15s; } .ph-bdl-card:hover { box-shadow: 0 6px 20px rgba(124,58,237,.14); } /* FeeNotice above the bundles: the cards' side margins; the first card's top margin is the gap. */ .ph-fee-notice.ph-fee-notice--bundles { margin: .8rem .9rem 0; } .ph-bdl-caregiver { display: flex; align-items: center; gap: .55rem; padding-bottom: .55rem; border-bottom: 1px solid var(--ph-x-f3f0ff); } .ph-bdl-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .ph-bdl-ava-wrap { position: relative; display: inline-flex; flex-shrink: 0; } .ph-bdl-caregiver-info { flex: 1; display: flex; align-items: center; gap: .35rem; min-width: 0; flex-wrap: wrap; } .ph-bdl-caregiver-name { font-size: .85rem; font-weight: 700; color: var(--ph-text); } .ph-bdl-stars { font-size: .75rem; color: var(--ph-text-amber-500); } .ph-bdl-reviews { font-size: .72rem; color: var(--ph-text-gray-400); } .ph-bdl-distance { font-size: .72rem; color: var(--ph-text-muted); white-space: nowrap; flex-shrink: 0; } .ph-bdl-head { display: flex; align-items: center; gap: .6rem; } .ph-bdl-icon { font-size: 1.65rem; flex-shrink: 0; line-height: 1; } .ph-bdl-head-text { flex: 1; min-width: 0; } .ph-bdl-name { display: block; font-size: .93rem; font-weight: 800; color: var(--ph-text-violet-900); letter-spacing: -.01em; } .ph-bdl-kicker { display: block; font-size: .65rem; color: var(--ph-text-violet-500); font-weight: 600; margin-top: .08rem; text-transform: uppercase; letter-spacing: .07em; } .ph-bdl-slots { font-size: .68rem; color: var(--ph-text-muted); white-space: nowrap; flex-shrink: 0; } .ph-bdl-slots--urgent { color: var(--ph-text-amber-700); font-weight: 700; } .ph-bdl-desc { margin: 0; padding-left: .65rem; border-left: 2px solid var(--ph-violet-100); font-size: .775rem; color: var(--ph-text-gray-600); line-height: 1.55; } .ph-bdl-validity { font-size: .7rem; color: var(--ph-text-violet-600); font-weight: 600; } .ph-bdl-breakdown { background: linear-gradient(135deg, var(--ph-violet-50) 0%, var(--ph-x-faf8ff) 100%); border: 1.5px solid var(--ph-violet-200); border-radius: 10px; overflow: hidden; } .ph-bdl-svc-row { display: grid; grid-template-columns: auto 1fr auto auto auto; align-items: center; gap: .3rem .45rem; padding: .42rem .7rem; border-bottom: 1px solid var(--ph-violet-100); font-size: .76rem; } .ph-bdl-svc-emoji { font-size: .9rem; line-height: 1; } .ph-bdl-svc-name { color: var(--ph-text-violet-900); font-weight: 600; } .ph-bdl-svc-qty { color: var(--ph-text-violet-600); font-weight: 700; white-space: nowrap; } .ph-bdl-svc-each { color: var(--ph-text-gray-400); font-size: .67rem; white-space: nowrap; } .ph-bdl-svc-total { color: var(--ph-text-violet-900); font-weight: 800; white-space: nowrap; text-align: right; min-width: 30px; } .ph-bdl-total-row { display: flex; align-items: center; justify-content: space-between; padding: .38rem .7rem; font-size: .77rem; font-weight: 700; } .ph-bdl-total-ind { color: var(--ph-text-muted); border-top: 1px dashed var(--ph-violet-200); } .ph-bdl-total-bundle { color: var(--ph-text-violet-900); background: var(--ph-violet-100); font-size: .84rem; } .ph-bdl-bundle-price { font-weight: 900; font-size: 1.05rem; color: var(--ph-text-violet-600); } .ph-bdl-savings { font-size: .67rem; font-weight: 700; color: var(--ph-text-emerald-600); background: var(--ph-emerald-100); padding: .1rem .45rem; border-radius: 999px; } .ph-bdl-meta-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; } .ph-bdl-window { font-size: .7rem; color: var(--ph-text-amber-800); background: var(--ph-amber-50); border-radius: 7px; padding: .22rem .5rem; } .ph-bdl-cta { width: 100%; background: linear-gradient(135deg, var(--ph-violet-600) 0%, var(--ph-violet-500) 100%); color: var(--ph-on-solid); border: none; border-radius: 10px; padding: .6rem 1.1rem; font-size: .85rem; font-weight: 800; cursor: pointer; box-shadow: 0 4px 14px rgba(124,58,237,.32); transition: filter .15s, transform .12s, box-shadow .15s; } .ph-bdl-cta:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(124,58,237,.46); } .ph-bundle-sizes { display: flex; gap: .3rem; } .ph-size-chip { width: 26px; height: 26px; border-radius: 6px; border: 1.5px solid var(--ph-gray-200); display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 800; flex-shrink: 0; } .ph-size-chip--on { } .ph-size-chip--off { background: var(--ph-gray-50); color: var(--ph-text-gray-300); border-color: var(--ph-gray-200) !important; } /* ── Search messages ── */ .ph-search-msg { padding: 2.5rem 1.5rem; text-align: center; color: var(--ph-text-gray-400); font-size: .85rem; font-style: italic; } .ph-search-msg--loading { color: var(--ph-accent); font-style: normal; font-weight: 600; } /* ── Empty search state ── .ph-empty-state / -lottie / -title / -sub are now the shared globals in app.css (EmptyState.razor); only Explore's page-specific CTA button is kept local. */ .ph-empty-cta { display: inline-block; margin-top: .35rem; padding: .45rem 1.2rem; border-radius: 8px; background: var(--ph-accent); color: var(--ph-on-accent); font-size: .78rem; font-weight: 700; text-decoration: none; transition: background .15s; } .ph-empty-cta:hover { background: var(--ph-accent-hover); } /* ── Mobile ── */ @media (max-width: 768px) { .ph-page-shell { grid-template-columns: 1fr; grid-template-rows: auto auto auto 1fr; } .ph-search-section { grid-column: 1; grid-row: 1; } .ph-view-toggle-bar { grid-column: 1; grid-row: 2; } .ph-mobile-split .ph-map-container { grid-column: 1; grid-row: 3; display: block; height: 40vh; min-height: 220px; } .ph-mobile-split .ph-provider-list { grid-column: 1; grid-row: 4; height: 100%; } .ph-mobile-list .ph-map-container { display: none; } .ph-mobile-list .ph-provider-list { grid-column: 1; grid-row: 3 / 5; height: 100%; } .ph-mobile-map .ph-view-toggle-bar { grid-column: 1; grid-row: 2; } .ph-mobile-map .ph-map-container { grid-column: 1; grid-row: 3 / 5; display: block; height: 100%; } .ph-mobile-map .ph-provider-list { display: none; } .ph-field-date { flex: 0 0 auto; width: 155px; } .ph-field-zip { flex: 1; min-width: 100px; } .ph-fp-label { min-width: 100px; } .ph-svc-strip { padding: .25rem 4px .45rem; } .ph-city-chip--newline { flex: 0 0 100%; } } /* ── Skeleton cards (initial load) — shimmer via the shared Skeleton component (.ph-skeleton) ── */ .ph-skeleton-card { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--ph-border); } .ph-sk-avatar { width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; } .ph-sk-body { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; } .ph-sk-line { height: 12px; border-radius: 4px; } .ph-sk-line--name { width: 52%; height: 14px; } .ph-sk-line--rating { width: 68%; } .ph-sk-line--loc { width: 38%; } .ph-sk-price { width: 36px; height: 22px; border-radius: 4px; flex-shrink: 0; } /* ── Thin progress bar for subsequent re-searches (keeps results visible) ── */ @keyframes ph-bar-sweep { from { background-position: 200% 0; } to { background-position: -200% 0; } } .ph-list-loading-bar { height: 2px; background: linear-gradient(90deg, transparent 0%, var(--ph-accent) 40%, var(--ph-accent) 60%, transparent 100%); background-size: 300% 100%; animation: ph-bar-sweep 1.1s ease infinite; flex-shrink: 0; }