PetHour

Pet Taxi in Vienna, VA

⏱ Last
Minute
🐾 All Services
🐕 Dog Walk – 30 Min
🦮 Dog Walk – 60 Min
🏠 Drop-In Visit
🌙 Overnight Boarding
☀️ Doggy Daycare
🛏️ In-Home Overnight Sitting
🐈 Cat Drop-In Visit
🐇 Small Animal Care
🐶 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 Nurse 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 — sitter 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: #fff; border-bottom: 1px solid #e8edf3; border-right: 1px solid #e8edf3; 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: #f9fafb; border-color: #e5e7eb; } .ph-svc-card--core { background: #fffbeb; border-color: rgba(253,97,26,.12); } .ph-svc-card--ext { background: #eff6ff; border-color: rgba(59,130,246,.12); } .ph-svc-card--spec { background: #fdf4ff; border-color: rgba(168,85,247,.12); } .ph-svc-card--pro { background: #f0fdf4; 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; min-height: 70px; 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: #fd611a; 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: #4b5563; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; } .ph-svc-card--sel .ph-svc-card-name { color: #111827; 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%, 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: #9ca3af; 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: #c9ced6; cursor: pointer; font-size: .85rem; line-height: 1; padding: 0 .1rem; font-family: inherit; transition: color .1s; } .ph-svc-desc-x:hover { color: #6b7280; } /* ── 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: #e8edf3; flex-shrink: 0; margin: .45rem .3rem; border-radius: 2px; } /* ── Last Minute card (pinned) ── */ .ph-svc-card--lm { background: transparent; border: 1.5px dashed #93c5fd; } .ph-svc-card--lm .ph-svc-card-name { color: #3b82f6; } .ph-svc-card--lm .ph-svc-card-emoji { color: #3b82f6; } .ph-svc-card--lm:hover:not(.ph-svc-card--lm-sel) { background: rgba(59,130,246,.06); border-color: #60a5fa !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 #f59e0b !important; background: linear-gradient(160deg, #fef3c7, #fde68a) !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: #78350f !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%); 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: #92400e; background: #fde68a; padding: .18rem .55rem; border-radius: 999px; margin-bottom: .3rem; } .ph-lm-title { font-size: 1.05rem; font-weight: 800; color: #111827; margin-bottom: .2rem; } .ph-lm-sub { font-size: .8rem; color: #6b7280; 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: #374151; line-height: 1.45; } .ph-lm-step-n { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: #fde68a; color: #92400e; 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: #15803d; background: #f0fdf4; } .ph-lm-check--err { color: #92400e; background: #fffbeb; } .ph-lm-check-link { color: #b45309; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; } .ph-lm-check-link:hover { color: #78350f; } .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 #e5e7eb; border-radius: 10px; background: #fff; transition: all .12s; min-width: 66px; user-select: none; } .ph-lm-pet-card:hover:not(.ph-lm-pet-card--add) { border-color: #f59e0b; background: #fffbeb; } .ph-lm-pet-card--sel { border-color: #f59e0b !important; background: #fef3c7 !important; box-shadow: 0 2px 8px rgba(245,158,11,.22); } .ph-lm-pet-card--add { background: transparent; border: 1.5px dashed #93c5fd; } .ph-lm-pet-card--add:hover { background: rgba(59,130,246,.06); border-color: #60a5fa; } .ph-lm-pet-card--add .ph-lm-pet-name { color: #3b82f6; } .ph-lm-pet-avatar--add { background: transparent !important; color: #3b82f6; 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: #111827; } .ph-lm-pet-size { font-size: .64rem; color: #9ca3af; } .ph-lm-preview { display: flex; flex-direction: column; gap: .35rem; } .ph-lm-preview-head { font-size: .71rem; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; } .ph-lm-preview-card { background: #fff; border: 1.5px solid #fde68a; 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: #fef3c7; color: #92400e; 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: #111827; } .ph-lm-preview-rows { display: flex; flex-direction: column; gap: .22rem; font-size: .75rem; color: #4b5563; } .ph-lm-preview-note { font-size: .67rem; color: #9ca3af; line-height: 1.45; border-top: 1px dashed #f3f4f6; padding-top: .4rem; margin-top: .05rem; } .ph-lm-prow-head { font-weight: 700; color: #111827; 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 #f3f4f6; } .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 #e5e7eb; background: #f9fafb; color: #6b7280; transition: background .15s, border-color .15s, color .15s; white-space: nowrap; } .ph-lm-ptab:hover:not(.ph-lm-ptab--on) { background: #fef3c7; border-color: #fcd34d; color: #92400e; } .ph-lm-ptab--on { background: #fef3c7; border-color: #f59e0b; color: #78350f; 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: #374151; } .ph-lm-textarea { width: 100%; box-sizing: border-box; padding: .4rem .65rem; border: 1px solid #e5e7eb; border-radius: 7px; font-size: .84rem; font-family: inherit; color: #111827; background: #fff; outline: none; transition: border-color .15s, box-shadow .15s; } .ph-lm-textarea:focus { border-color: #f59e0b; 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: #92400e; background: #fde68a; 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: #111827; } .ph-fp-clear-one { margin-top: .3rem; align-self: flex-start; font-size: .7rem; color: #fd611a; background: none; border: none; cursor: pointer; padding: 0; font-family: inherit; text-decoration: underline; } .ph-lm-price-section { display: flex; flex-direction: column; background: #fafafa; border: 1.5px solid #f3f4f6; border-radius: 10px; padding: .8rem .85rem .6rem; } .ph-lm-price-display { float: right; font-size: .78rem; font-weight: 800; color: #f59e0b; } .ph-lm-price-scale { display: flex; justify-content: space-between; font-size: .66rem; color: #9ca3af; 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: #fef2f2; border: 1.5px solid #fca5a5; border-radius: 10px; padding: .6rem .85rem; font-size: .8rem; color: #b91c1c; font-weight: 600; } .ph-lm-dispatch-error-close { background: none; border: none; padding: 0; line-height: 1; font-size: 1rem; color: #b91c1c; cursor: pointer; flex-shrink: 0; } .ph-lm-dispatch-error-close:hover { opacity: .7; } .ph-lm-fee-box { background: #fffbeb; border: 1.5px solid #fde68a; 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: #111827; } .ph-lm-fee-note { font-size: .72rem; color: #92400e; line-height: 1.4; } .ph-lm-fee-rules { font-size: .72rem; color: #78350f; line-height: 1.5; display: flex; flex-direction: column; gap: .12rem; margin-top: .1rem; } .ph-lm-fee-rules-head { font-weight: 700; color: #92400e; 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 #16a34a; background: #f0fdf4; color: #15803d; font-size: .78rem; font-weight: 700; cursor: pointer; } .ph-lm-decision-decline { flex: 1; padding: .38rem .5rem; border-radius: 7px; border: 1.5px solid #dc2626; background: #fef2f2; color: #dc2626; 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 #d1d5db; background: #f9fafb; color: #374151; font-size: .72rem; cursor: pointer; } /* Sitter 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: #f1f5f9; border: 1.5px solid #cbd5e1; color: #64748b; } .ph-lm-pool--zero { background: #fef2f2; border: 1.5px solid #fca5a5; color: #991b1b; } .ph-lm-pool--low { background: #fffbeb; border: 1.5px solid #fde68a; color: #92400e; } .ph-lm-pool--ok { background: #f0fdf4; border: 1.5px solid #86efac; color: #166534; } .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-replies-head { display: flex; justify-content: space-between; align-items: center; font-size: .8rem; font-weight: 700; color: #111827; padding: .35rem 0; } .ph-lm-sel-timer { font-size: .72rem; color: #92400e; font-weight: 600; } .ph-lm-reply-card { cursor: default !important; } .ph-lm-reply-book { flex-shrink: 0; padding: .38rem .9rem; background: #f59e0b; color: #fff; 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: #d97706; } .ph-lm-waiting { display: flex; flex-direction: column; align-items: center; gap: .55rem; padding: 2rem 1rem; font-size: .83rem; color: #9ca3af; 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: #dc2626; background: none; border: 1.5px solid #fca5a5; border-radius: 8px; padding: .38rem .85rem; cursor: pointer; font-family: inherit; transition: all .12s; align-self: flex-start; } .ph-lm-cancel:hover { background: #fef2f2; } .ph-lm-cancel-note { font-size: .69rem; color: #9ca3af; } .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: #111827; margin-bottom: .12rem; } .ph-backup-bar-detail { font-size: .78rem; color: #374151; } .ph-backup-bar-hint { font-size: .73rem; color: #6b7280; margin-top: .18rem; } .ph-backup-bar-cancel { flex-shrink: 0; background: none; border: 1.5px solid #d1d5db; border-radius: 7px; padding: .35rem .75rem; font-size: .76rem; font-weight: 600; color: #6b7280; cursor: pointer; white-space: nowrap; transition: border-color .12s, color .12s; } .ph-backup-bar-cancel:hover { border-color: #ef4444; color: #ef4444; } .ph-rdz-input { width: 100%; } /* ── Zip input ── */ .ph-city-chip--newline { } .ph-zip-input { width: 110px; padding: .375rem .75rem; border: 1px solid #00b1f3; border-radius: 4px; font-size: 16px; /* 16px minimum prevents iOS Safari auto-zoom on focus */ font-family: inherit; background: #fff; color: #111827; outline: none; transition: border-color .15s, box-shadow .15s; height: 2.357em; box-sizing: border-box; } .ph-zip-input:hover { border-color: #00b1f3; } .ph-zip-input:focus { border-color: #00b1f3; box-shadow: 0 0 0 3px rgba(0,177,243,.15); } .ph-zip--unknown { border-color: #f97316; } .ph-city-chip { font-size: .75rem; font-weight: 600; color: #0369a1; background: #e0f2fe; border: 1px solid #bae6fd; padding: .22rem .6rem; border-radius: 999px; white-space: nowrap; } .ph-city-chip--unknown { color: #f97316; background: #fff7ed; 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 #d1d5db; border-radius: 8px; background: #fff; color: #374151; 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: #fd611a; color: #fd611a; } .ph-filter-btn--active { background: #fd611a !important; border-color: #fd611a !important; color: #fff !important; } .ph-filter-btn--active svg { stroke: #fff !important; } .ph-filter-badge { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: #fff; color: #fd611a; font-size: .65rem; font-weight: 800; flex-shrink: 0; } .ph-filter-btn--active .ph-filter-badge { color: #fd611a; } /* ── 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 #fd611a; border-radius: 10px; background: #fafafa; 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 #f0f0f0; transition: background .1s; user-select: none; } .ph-fp-row:last-of-type { border-bottom: none; } .ph-fp-row:hover { background: #f3f4f6; } .ph-fp-row--open { background: #f9fafb; } .ph-fp-label { font-size: .78rem; font-weight: 700; color: #374151; min-width: 120px; } .ph-fp-val { flex: 1; min-width: 0; /* allow flex item to shrink past content width */ font-size: .78rem; color: #9ca3af; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ph-fp-val--active { color: #fd611a; 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: #fff; border-bottom: 1px solid #f0f0f0; box-sizing: border-box; max-width: 100%; } .ph-fp-opt { padding: .28rem .65rem; border-radius: 999px; border: 1.5px solid #e5e7eb; background: #f9fafb; color: #4b5563; font-size: .76rem; font-weight: 600; cursor: pointer; font-family: inherit; white-space: nowrap; transition: all .12s; } .ph-fp-opt:hover { border-color: #fd611a; color: #fd611a; } .ph-fp-opt--active { border-color: #fd611a; background: #fd611a; color: #fff !important; } /* 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 #cbd5e1; background: #f8fafc; color: #475569; font-size: .76rem; font-weight: 600; cursor: pointer; font-family: inherit; white-space: nowrap; transition: all .12s; } .ph-fp-quickset:hover { border-color: #fd611a; color: #fd611a; background: #fff7ed; } .ph-fp-quickset:active { transform: scale(.97); } .ph-fp-exact-lbl { display: block; font-size: .72rem; font-weight: 700; color: #6b7280; 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: #fef2f2; border: 1.5px solid #fca5a5; border-radius: 12px; } .ph-lm-lockout-icon { font-size: 2rem; } .ph-lm-lockout-head { font-size: .95rem; font-weight: 800; color: #991b1b; } .ph-lm-lockout-body { font-size: .78rem; color: #7f1d1d; line-height: 1.55; max-width: 320px; } .ph-lm-lockout-until { font-size: .78rem; color: #991b1b; 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: #fffbeb; border: 1.5px dashed #f59e0b; 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: #92400e; } .ph-lm-pending-body { font-size: .78rem; color: #78350f; line-height: 1.55; max-width: 320px; } .ph-lm-pending-timeout { display: flex; flex-direction: column; gap: .45rem; background: #fef3c7; border: 1px solid #fde68a; border-radius: 8px; padding: .65rem .8rem; margin-top: .4rem; } .ph-lm-pending-timeout-note { font-size: .74rem; color: #78350f; line-height: 1.5; } .ph-lm-pending-cancel { align-self: flex-start; padding: .38rem .85rem; background: #fff; color: #b45309; border: 1.5px solid #f59e0b; border-radius: 8px; font-size: .76rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: all .12s; } .ph-lm-pending-cancel:hover { background: #fffbeb; } /* ── Cancel confirmation ── */ .ph-lm-cancel-confirm { background: #fff7ed; border: 1.5px solid #fed7aa; 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: #9a3412; } .ph-lm-cancel-confirm-body { font-size: .76rem; color: #7c2d12; 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: #dc2626; color: #fff; 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: #b91c1c; } .ph-lm-cancel-confirm-no { flex: 1; padding: .42rem .75rem; background: #f0fdf4; color: #15803d; border: 1.5px solid #86efac; 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: #dcfce7; } .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 #e5e7eb; display: flex; justify-content: flex-end; } .ph-fp-clear { font-size: .76rem; font-weight: 600; color: #6b7280; background: none; border: none; cursor: pointer; font-family: inherit; text-decoration: underline; text-underline-offset: 2px; } .ph-fp-clear:hover { color: #111827; } /* ── Provider list ── */ .ph-provider-list { overflow-y: auto; height: 100%; background: #fff; border-right: 1px solid #e8edf3; } /* ── Vertical result cards — wrapping grid (SitterResultCardVertical) ── */ .ph-vcard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(390px, 100%), 1fr)); gap: .85rem; padding: .85rem; align-items: stretch; } @media (max-width: 560px) { .ph-vcard-grid { padding: .6rem; gap: .65rem; } } /* ── Sitter card (v2) ── */ .ph-provider-card { display: flex; gap: .9rem; padding: 1rem 1.1rem; border-bottom: 1px solid #f0f4f8; cursor: pointer; transition: background .15s; align-items: flex-start; min-height: 120px; } .ph-provider-card:hover { background: #f8fafc; } .ph-card-highlighted { background: #eff6ff !important; border-left: 3px solid var(--ph-primary, #1a56db); } .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, #3b82f6, #1d4ed8); display: flex; align-items: center; justify-content: center; font-size: 1.35rem; font-weight: 800; color: #fff; 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: #111827; letter-spacing: -.01em; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ph-badge-pro { flex-shrink: 0; font-size: .6rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: linear-gradient(135deg, #f97316, #ea580c); color: #fff; padding: .2rem .55rem; border-radius: 999px; white-space: nowrap; box-shadow: 0 1px 5px rgba(249,115,22,.3); } .ph-fav-btn { margin-left: auto; flex-shrink: 0; background: none; border: none; cursor: pointer; padding: .15rem; color: #d1d5db; display: flex; align-items: center; line-height: 1; transition: color .12s, transform .12s; border-radius: 50%; } .ph-fav-btn:hover { color: #f43f5e; 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: #f59e0b; font-size: .9rem; line-height: 1; } .ph-rating-val { font-weight: 700; color: #111827; font-size: .82rem; } .ph-rating-sep { color: #d1d5db; } .ph-rating-reviews { color: #6b7280; } .ph-rating-repeat { display: flex; align-items: center; gap: .2rem; color: #0369a1; font-weight: 600; } .ph-card-location { display: flex; align-items: center; gap: .3rem; font-size: .76rem; color: #6b7280; } .ph-card-location svg { flex-shrink: 0; opacity: .6; } .ph-card-active { display: flex; align-items: center; gap: .38rem; font-size: .7rem; color: #059669; font-weight: 500; } .ph-active-dot { width: 7px; height: 7px; border-radius: 50%; background: #10b981; 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: #e8edf3; 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: #fff; border-bottom: 1px solid #e8edf3; 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 #fd611a; background: #fff5f0; color: #fd611a; 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: #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: #fff; border: 1.5px solid #ddd6fe; 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); } .ph-bdl-sitter { display: flex; align-items: center; gap: .55rem; padding-bottom: .55rem; border-bottom: 1px solid #f3f0ff; } .ph-bdl-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .ph-bdl-sitter-info { flex: 1; display: flex; align-items: center; gap: .35rem; min-width: 0; flex-wrap: wrap; } .ph-bdl-sitter-name { font-size: .85rem; font-weight: 700; color: #111827; } .ph-bdl-stars { font-size: .75rem; color: #f59e0b; } .ph-bdl-reviews { font-size: .72rem; color: #9ca3af; } .ph-bdl-distance { font-size: .72rem; color: #6b7280; 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: #4c1d95; letter-spacing: -.01em; } .ph-bdl-kicker { display: block; font-size: .65rem; color: #8b5cf6; font-weight: 600; margin-top: .08rem; text-transform: uppercase; letter-spacing: .07em; } .ph-bdl-slots { font-size: .68rem; color: #6b7280; white-space: nowrap; flex-shrink: 0; } .ph-bdl-slots--urgent { color: #b45309; font-weight: 700; } .ph-bdl-desc { margin: 0; padding-left: .65rem; border-left: 2px solid #ede9fe; font-size: .775rem; color: #4b5563; line-height: 1.55; } .ph-bdl-validity { font-size: .7rem; color: #7c3aed; font-weight: 600; } .ph-bdl-breakdown { background: linear-gradient(135deg, #f5f3ff 0%, #faf8ff 100%); border: 1.5px solid #ddd6fe; 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 #ede9fe; font-size: .76rem; } .ph-bdl-svc-emoji { font-size: .9rem; line-height: 1; } .ph-bdl-svc-name { color: #4c1d95; font-weight: 600; } .ph-bdl-svc-qty { color: #7c3aed; font-weight: 700; white-space: nowrap; } .ph-bdl-svc-each { color: #9ca3af; font-size: .67rem; white-space: nowrap; } .ph-bdl-svc-total { color: #4c1d95; 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: #6b7280; border-top: 1px dashed #ddd6fe; } .ph-bdl-total-bundle { color: #4c1d95; background: #ede9fe; font-size: .84rem; } .ph-bdl-bundle-price { font-weight: 900; font-size: 1.05rem; color: #7c3aed; } .ph-bdl-savings { font-size: .67rem; font-weight: 700; color: #059669; background: #d1fae5; 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: #92400e; background: #fffbeb; border-radius: 7px; padding: .22rem .5rem; } .ph-bdl-cta { width: 100%; background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%); color: #fff; 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 #e5e7eb; 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: #f9fafb; color: #d1d5db; border-color: #e5e7eb !important; } /* ── Search messages ── */ .ph-search-msg { padding: 2.5rem 1.5rem; text-align: center; color: #9ca3af; font-size: .85rem; font-style: italic; } .ph-search-msg--loading { color: #fd611a; 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: #fd611a; color: #fff; font-size: .78rem; font-weight: 700; text-decoration: none; transition: background .15s; } .ph-empty-cta:hover { background: #e8530f; } /* ── 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%, #fd611a 40%, #fd611a 60%, transparent 100%); background-size: 300% 100%; animation: ph-bar-sweep 1.1s ease infinite; flex-shrink: 0; }