/* ═══════════════════════════════════════════════════════════════════════════
Morocco Services — application stylesheet
Extracted verbatim from the GLOBAL_CSS template literal that the React SPA
injected at runtime, so the rendered design is identical. The Google Fonts
@import that used to sit at the top now lives as a
pair in the layout — same fonts, one less serial round trip.
═══════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body { width:100%; max-width:100%; overflow-x:hidden; }
body { font-family: 'Outfit', sans-serif; background: #FAFAF8; color: #111827; -webkit-font-smoothing: antialiased; }
img, svg, video, canvas { max-width:100%; }
/* Lock scroll behind modals */
@media (pointer: coarse) {
}
:root {
--sand: #F5EDD6;
--sand-dark: #E8D9B8;
--terracotta: #D85151;
--terra-light: #E87575;
--terra-dark: #B03030;
--saffron: #E8A020;
--midnight: #111827;
--charcoal: #2C2825;
--warm-gray: #78716C;
--light-gray: #F5F4F2;
--border: #E7E5E1;
--white: #FFFFFF;
--green: #16A34A;
--red: #DC2626;
--blue: #2563EB;
--overlay: rgba(17,24,39,0.55);
}
input, textarea, select, button { font-family: 'Outfit', sans-serif; }
.scrollbar-hide { scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }
@keyframes fadeUp { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes shimmer { 0%{background-position:-400px 0} 100%{background-position:400px 0} }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }
@keyframes slideDown { from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:translateY(0)} }
@keyframes scaleIn { from{opacity:0;transform:scale(0.95)} to{opacity:1;transform:scale(1)} }
@keyframes slideUp { from{transform:translateY(60%);opacity:0} to{transform:translateY(0);opacity:1} }
.fade-up { animation: fadeUp 0.5s ease forwards; }
.fade-in { animation: fadeIn 0.3s ease forwards; }
.scale-in { animation: scaleIn 0.25s ease forwards; }
.skeleton {
background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
background-size: 400px 100%;
animation: shimmer 1.2s infinite;
border-radius: 8px;
}
/* Scrollable horizontal row */
.h-scroll { display:flex; gap:16px; overflow-x:auto; padding-bottom:8px; }
.h-scroll::-webkit-scrollbar { display:none; }
/* Star rating */
.star { color: #E8A020; }
.star-empty { color: #D1CFC9; }
/* Badge */
.badge { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:600; letter-spacing:.4px; text-transform:uppercase; }
.badge-terra { background:rgba(216,81,81,.12); color:var(--terracotta); }
.badge-green { background:rgba(22,163,74,.1); color:var(--green); }
.badge-sand { background:var(--sand); color:var(--charcoal); }
.badge-saffron { background:rgba(232,160,32,.12); color:#B07010; }
/* Button styles */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; cursor:pointer; font-weight:600; transition:all .2s; border-radius:12px; font-family:'Outfit',sans-serif; }
.btn:disabled { opacity:.55; cursor:not-allowed; }
.btn-primary { background:var(--terracotta); color:#fff; padding:13px 24px; font-size:15px; }
.btn-primary:hover:not(:disabled) { background:var(--terra-dark); transform:translateY(-1px); box-shadow:0 6px 20px rgba(216,81,81,.35); }
.btn-secondary { background:var(--midnight); color:#fff; padding:13px 24px; font-size:15px; }
.btn-secondary:hover:not(:disabled) { background:var(--charcoal); }
.btn-outline { background:transparent; color:var(--midnight); border:1.5px solid var(--border); padding:11px 22px; font-size:14px; }
.btn-outline:hover:not(:disabled) { border-color:var(--midnight); background:var(--light-gray); }
.btn-ghost { background:transparent; color:var(--warm-gray); padding:8px 16px; font-size:14px; }
.btn-ghost:hover { color:var(--midnight); background:var(--light-gray); }
.btn-sm { padding:8px 16px; font-size:13px; border-radius:9px; }
.btn-lg { padding:16px 32px; font-size:16px; border-radius:14px; }
/* Input styles */
.input { width:100%; padding:12px 16px; border:1.5px solid var(--border); border-radius:12px; font-size:14px; color:var(--midnight); background:#fff; transition:border-color .2s; outline:none; }
.input:focus { border-color:var(--terracotta); }
.input::placeholder { color:#A9A29D; }
.textarea { resize:vertical; min-height:100px; }
.label { display:block; font-size:13px; font-weight:600; color:var(--charcoal); margin-bottom:6px; }
.form-group { margin-bottom:20px; }
.error-text { font-size:12px; color:var(--red); margin-top:4px; }
/* Card */
.card { background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04); transition:transform .25s, box-shadow .25s; }
.card:hover { transform:translateY(-3px); box-shadow:0 4px 24px rgba(0,0,0,.1); }
/* The lift is for browsable cards you click. A card wrapping a form is not one:
it jumped every time the pointer crossed it while filling fields in, which is
what made the service wizard feel like it kept shifting under the cursor. */
.service-wizard-modal .card:hover,
.modal .card:hover,
form .card:hover,
.card:has(input, select, textarea):hover {
transform:none;
box-shadow:0 1px 4px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04);
}
/* Respect the OS setting — and stop every transition during a resize storm. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration:.01ms !important; animation-iteration-count:1 !important;
transition-duration:.01ms !important; scroll-behavior:auto !important;
}
}
/* Modal backdrop */
.modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.65); z-index:9000; display:flex; align-items:flex-end; justify-content:center; padding:160px 0 calc(60px + env(safe-area-inset-bottom)); animation:fadeIn .18s ease; overflow:hidden; touch-action:none; overscroll-behavior:none; pointer-events:all; }
.modal { background:#fff; border-radius:20px 20px 0 0; max-width:560px; width:100%; max-height:calc(100dvh - 160px - 60px - env(safe-area-inset-bottom)); overflow-y:auto; overflow-x:hidden; animation:slideUp .25s ease; -webkit-overflow-scrolling:touch; }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:16px 24px 0; }
.modal::before { content:""; display:block; width:36px; height:4px; background:#E0D8D0; border-radius:2px; margin:12px auto 0; flex-shrink:0; }
.modal-body { padding:16px 24px 24px; }
.modal-title { font-family:'Cormorant Garamond',serif; font-size:24px; font-weight:700; }
.notif-dropdown-panel { max-height:70vh; }
@media (min-width: 769px) {
.notif-dropdown-backdrop {
background: transparent!important;
align-items: flex-start!important;
justify-content: flex-end!important;
padding: 0!important;
overflow: visible!important;
pointer-events: auto!important;
}
.notif-dropdown-panel {
position: fixed;
top: 58px;
right: max(16px, calc((100vw - 1200px) / 2 + 74px));
width: min(420px, calc(100vw - 32px))!important;
max-height: min(72vh, 560px)!important;
border-radius: 14px!important;
box-shadow: 0 18px 50px rgba(17,24,39,.16), 0 0 0 1px rgba(17,24,39,.08);
animation: fadeIn .14s ease!important;
}
.notif-dropdown-panel::before {
content: "";
display: block!important;
position: absolute;
top: -7px;
right: 38px;
width: 14px;
height: 14px;
background: #fff;
border-left: 1px solid rgba(17,24,39,.08);
border-top: 1px solid rgba(17,24,39,.08);
transform: rotate(45deg);
margin: 0;
}
.notif-dropdown-panel .modal-header {
padding: 16px 18px 8px;
}
.notif-dropdown-panel .modal-title {
font-size: 21px;
}
.notif-dropdown-panel .modal-body {
padding: 4px 18px 14px;
overflow-y: auto;
max-height: calc(min(72vh, 560px) - 62px);
}
}
.support-backdrop { align-items:center!important; padding:20px!important; overflow-y:auto!important; touch-action:auto!important; }
.support-modal { width:min(560px, calc(100vw - 32px))!important; max-height:calc(100dvh - 40px)!important; border-radius:18px!important; animation:scaleIn .18s ease!important; }
.support-modal::before { display:none!important; }
.support-modal .modal-body { max-height:calc(100dvh - 132px); overflow-y:auto; }
@media (max-width:640px) {
.support-backdrop { align-items:flex-start!important; padding:12px!important; }
.support-modal { width:100%!important; max-height:calc(100dvh - 24px)!important; border-radius:16px!important; }
.support-modal .modal-header { padding:16px 18px 0; }
.support-modal .modal-body { padding:16px 18px 22px; max-height:calc(100dvh - 112px); }
}
/* Confirm dialog — replaces window.confirm() for destructive actions.
Centered card on desktop, thumb-reachable bottom sheet on phones. */
.confirm-backdrop { z-index:9500; align-items:center!important; padding:16px!important; touch-action:auto!important; }
.confirm-modal {
width:min(420px,100%)!important; max-width:420px!important; border-radius:20px!important;
max-height:calc(100dvh - 32px)!important; animation:scaleIn .16s ease!important;
box-shadow:0 24px 60px rgba(17,24,39,.28);
}
.confirm-modal::before { display:none!important; }
.confirm-body { padding:26px 24px 22px!important; text-align:center; }
.confirm-icon {
width:52px; height:52px; margin:0 auto 14px; border-radius:50%;
display:flex; align-items:center; justify-content:center; flex-shrink:0;
background:rgba(216,81,81,.1); color:var(--terracotta);
}
.confirm-modal[data-tone="danger"] .confirm-icon { background:rgba(220,38,38,.1); color:var(--red); }
.confirm-title { font-family:'Cormorant Garamond',serif; font-size:23px; font-weight:700; color:var(--midnight); line-height:1.25; margin:0 0 8px; }
.confirm-text { font-size:14.5px; line-height:1.6; color:var(--warm-gray); margin:0; }
.confirm-highlight {
margin-top:14px; padding:11px 14px; border-radius:12px; background:var(--light-gray);
color:var(--midnight); font-weight:700; font-size:16px; line-height:1.4;
}
.confirm-actions { display:flex; gap:10px; margin-top:22px; }
.confirm-actions .btn { flex:1; min-width:0; padding:13px 16px; font-size:15px; }
.confirm-ok { background:var(--terracotta); color:#fff; }
.confirm-ok:hover:not(:disabled) { background:var(--terra-dark); }
.confirm-modal[data-tone="danger"] .confirm-ok { background:var(--red); }
.confirm-modal[data-tone="danger"] .confirm-ok:hover:not(:disabled) { background:#B91C1C; }
@media (max-width:480px) {
.confirm-backdrop { align-items:flex-end!important; padding:0!important; }
.confirm-modal {
width:100%!important; max-width:none!important; border-radius:22px 22px 0 0!important;
animation:slideUp .22s ease!important;
}
.confirm-body { padding:24px 20px calc(20px + env(safe-area-inset-bottom))!important; }
/* Reversed so the destructive action sits away from the resting thumb. */
.confirm-actions { flex-direction:column-reverse; gap:8px; margin-top:20px; }
.confirm-actions .btn { width:100%; padding:15px 16px; }
}
/* Nav */
.nav { position:sticky; top:0; z-index:200; background:rgba(250,250,248,.92); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); }
.nav-inner { max-width:1200px; margin:0 auto; padding:0 14px; display:flex; align-items:center; justify-content:space-between; height:56px; }
/* Bottom nav (mobile) */
.bottom-nav { position:fixed; bottom:0; left:0; right:0; background:#fff; border-top:1px solid var(--border); display:flex; z-index:200; padding-bottom:env(safe-area-inset-bottom); }
.bottom-nav-item { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:10px 0; gap:3px; cursor:pointer; transition:color .2s; color:var(--warm-gray); font-size:10px; font-weight:500; border:none; background:none; }
.bottom-nav-item.active { color:var(--terracotta); }
/* Page containers */
.page { max-width:1200px; margin:0 auto; padding:0 24px 100px; }
.page-full { padding-bottom:100px; }
/* Section title */
.section-title { font-family:'Cormorant Garamond',serif; font-size:28px; font-weight:700; margin-bottom:6px; }
.section-sub { font-size:14px; color:var(--warm-gray); margin-bottom:24px; }
/* Experience card */
.exp-card { background:#fff; border-radius:20px; overflow:hidden; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.06); transition:all .25s; }
.exp-card:hover { transform:translateY(-4px); box-shadow:0 8px 32px rgba(0,0,0,.12); }
.exp-card-img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.exp-card-body { padding:14px 16px; }
.exp-card-cat { font-size:11px; font-weight:600; color:var(--terracotta); text-transform:uppercase; letter-spacing:.5px; margin-bottom:4px; }
.exp-card-title { font-size:15px; font-weight:600; color:var(--midnight); line-height:1.4; margin-bottom:6px; }
.exp-card-meta { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--warm-gray); }
.exp-card-price { font-size:16px; font-weight:700; color:var(--midnight); margin-top:8px; }
.exp-card-price span { font-size:13px; font-weight:400; color:var(--warm-gray); }
/* Hero */
.hero { position:relative; min-height:520px; display:flex; align-items:flex-end; }
.hero-bg { position:absolute; inset:0; background:linear-gradient(to bottom, rgba(17,24,39,.2) 0%, rgba(17,24,39,.65) 100%); }
.hero-content { position:relative; z-index:1; padding:48px 32px; color:#fff; max-width:640px; }
.hero-title { font-family:'Cormorant Garamond',serif; font-size:clamp(38px,7vw,62px); font-weight:700; line-height:1.1; margin-bottom:14px; }
.hero-sub { font-size:16px; opacity:.88; margin-bottom:28px; line-height:1.6; }
/* Search bar */
.search-bar { background:#fff; border-radius:16px; padding:8px; display:flex; align-items:center; gap:8px; box-shadow:0 4px 24px rgba(0,0,0,.15); flex-wrap:wrap; }
.search-input { border:none; outline:none; padding:10px 14px; font-size:15px; color:var(--midnight); flex:1; min-width:160px; background:transparent; }
.search-divider { width:1px; height:32px; background:var(--border); }
/* Filter chips */
.filter-chip { padding:8px 16px; border-radius:24px; border:1.5px solid var(--border); background:#fff; font-size:13px; font-weight:500; cursor:pointer; white-space:nowrap; transition:all .2s; color:var(--charcoal); }
.filter-chip:hover, .filter-chip.active { background:var(--midnight); color:#fff; border-color:var(--midnight); }
/* Tabs */
.tab-bar { display:flex; gap:0; border-bottom:1px solid var(--border); margin-bottom:24px; }
.tab { padding:12px 20px; border:none; background:none; font-size:14px; font-weight:500; color:var(--warm-gray); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; transition:all .2s; }
.tab.active { color:var(--terracotta); border-bottom-color:var(--terracotta); font-weight:600; }
/* Notification count */
.notif-count-badge {
position:absolute; top:-4px; right:-5px; min-width:19px; height:19px;
padding:0 5px; box-sizing:border-box; border-radius:999px; background:#E43F3F;
color:#fff; border:2px solid #fff; display:flex; align-items:center;
justify-content:center; font-size:9px; line-height:1; font-weight:800;
box-shadow:0 3px 8px rgba(228,63,63,.35);
}
.message-count-badge {
position:absolute; top:-7px; right:-10px; min-width:17px; height:17px;
padding:0 5px; box-sizing:border-box; border-radius:999px;
background:var(--terracotta); color:#fff; border:2px solid #fff;
font-size:10px; font-weight:800; line-height:13px; display:flex;
align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(216,81,81,.35);
}
/* Avatar */
.avatar { border-radius:50%; object-fit:cover; background:var(--sand); display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--terracotta); flex-shrink:0; }
/* Rating display */
.rating-row { display:flex; align-items:center; gap:4px; }
/* Divider */
.divider { height:1px; background:var(--border); margin:24px 0; }
/* Toast */
.toast-container { position:fixed; bottom:max(24px, calc(16px + env(safe-area-inset-bottom))); left:50%; transform:translateX(-50%); z-index:20000; width:min(520px, calc(100vw - 24px)); display:flex; flex-direction:column; gap:8px; align-items:stretch; pointer-events:none; }
.toast { width:100%; box-sizing:border-box; background:var(--midnight); color:#fff; padding:12px 16px; border-radius:12px; font-size:14px; font-weight:500; line-height:1.45; text-align:center; animation:slideDown .3s ease; white-space:normal; overflow-wrap:anywhere; box-shadow:0 4px 20px rgba(0,0,0,.25); }
.toast.success { background:#15803D; }
.toast.error { background:#DC2626; }
.form-upload-error { margin:4px 0 14px; padding:11px 13px; border:1px solid #fecaca; border-radius:11px; background:#fef2f2; color:#b91c1c; font-size:13px; font-weight:600; line-height:1.45; overflow-wrap:anywhere; }
/* Loading spinner */
.spinner { width:20px; height:20px; border:2px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; }
.spinner-dark { border-color:rgba(0,0,0,.1); border-top-color:var(--midnight); }
/* Chat bubble */
.bubble { max-width:75%; padding:10px 14px; border-radius:18px; font-size:14px; line-height:1.5; }
.bubble-sent { background:var(--terracotta); color:#fff; border-bottom-right-radius:4px; align-self:flex-end; }
.bubble-recv { background:var(--light-gray); color:var(--midnight); border-bottom-left-radius:4px; align-self:flex-start; }
/* Desktop detail, booking and chat screens */
.experience-screen,.booking-screen { background:#fff; }
@media (min-width:900px) {
.experience-screen,.booking-screen { background:#F7F4F1 !important; }
.exp-topbar,.booking-topbar { padding-left:32px !important; padding-right:32px !important; }
.exp-gallery-wrap { max-width:1180px; margin:0 auto; padding:24px 32px 18px !important; }
.experience-screen .gallery-grid { grid-template-columns:2fr 1fr !important; height:420px !important; border-radius:22px !important; box-shadow:0 16px 42px rgba(17,24,39,.08); }
.experience-screen .gallery-grid:has(> div:nth-child(2):last-child) { grid-template-rows:1fr !important; }
.experience-screen .gallery-grid:has(> div:nth-child(2):last-child) .gallery-main { grid-row:auto !important; }
.exp-detail-content { max-width:1180px; margin:0 auto; padding:0 32px 132px !important; }
.exp-detail-content > div { max-width:760px; }
.exp-bookbar,.booking-bottombar { left:50% !important; right:auto !important; bottom:20px !important; transform:translateX(-50%); width:min(1180px,calc(100vw - 64px)); border:1px solid var(--border) !important; border-radius:22px; box-shadow:0 16px 44px rgba(17,24,39,.14); padding:14px 16px !important; }
.booking-body { max-width:980px; margin:0 auto; padding:28px 32px 128px !important; }
.booking-summary { max-width:760px; margin:0 auto 24px !important; background:#fff !important; border:1px solid var(--border); box-shadow:0 8px 26px rgba(17,24,39,.05); }
.booking-step-panel { max-width:760px; margin:0 auto; }
.booking-date-card { max-width:760px; margin:0 auto 16px !important; box-shadow:0 10px 30px rgba(17,24,39,.06); }
.booking-date-card .cal-grid { max-width:660px; margin-left:auto !important; margin-right:auto !important; gap:8px !important; }
.booking-date-card .cal-day { height:52px !important; aspect-ratio:auto !important; border-radius:12px !important; font-size:14px !important; }
.booking-date-card > div:first-child button { width:42px !important; height:42px !important; border-radius:50% !important; font-size:28px !important; line-height:1 !important; padding:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; }
}
@media (max-width:899px) {
.exp-gallery-wrap { padding:16px 20px; }
.exp-detail-content { padding:0 20px 100px; }
}
/* Map placeholder */
.map-box { background:linear-gradient(135deg,#e8d9b8,#f5edd6); border-radius:16px; display:flex; align-items:center; justify-content:center; color:var(--warm-gray); font-size:14px; }
/* Price tag */
.price-tag { font-family:'Cormorant Garamond',serif; font-size:28px; font-weight:700; color:var(--midnight); }
.price-tag small { font-family:'Outfit',sans-serif; font-size:14px; font-weight:400; color:var(--warm-gray); }
/* Traveler service-page booking bar */
.exp-bookbar {
position:fixed; bottom:0; left:0; right:0; z-index:300;
box-sizing:border-box; padding:14px 20px;
display:flex; align-items:center; gap:14px;
background:#fff; border-top:1px solid var(--border);
}
.exp-bookbar-price { flex:1 1 auto; min-width:0; }
.exp-bookbar-price .price-tag { display:flex; align-items:baseline; flex-wrap:wrap; gap:0 4px; line-height:1; }
.exp-bookbar-duration { margin-top:5px; color:var(--warm-gray); font-size:13px; line-height:1.2; }
.exp-bookbar-actions { flex:0 0 auto; display:flex; align-items:center; gap:10px; min-width:0; }
.exp-bookbar-message { margin:0; }
.exp-bookbar-message .btn,
.exp-bookbar-primary { display:flex; align-items:center; justify-content:center; gap:6px; white-space:nowrap; text-decoration:none; }
.exp-bookbar-unavailable { min-width:0; text-align:right; }
.exp-bookbar-unavailable strong { display:block; padding:10px 16px; border-radius:12px; background:rgba(220,38,38,.1); color:var(--red); font-size:13px; }
.exp-bookbar-unavailable span { display:block; margin-top:4px; color:var(--warm-gray); font-size:11px; }
.exp-bookbar-spacer { height:100px; }
@media (max-width:640px) {
.experience-screen .exp-detail-content { padding-left:14px; padding-right:14px; padding-bottom:0; }
.exp-bookbar {
padding:10px 12px max(10px,env(safe-area-inset-bottom));
display:grid; grid-template-columns:1fr; gap:9px;
box-shadow:0 -8px 24px rgba(17,24,39,.08);
}
.exp-bookbar-price {
width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.exp-bookbar-price .price-tag { min-width:0; font-size:24px; }
.exp-bookbar-price .price-tag small { font-size:12px; }
.exp-bookbar-duration { flex-shrink:0; margin-top:0; font-size:12px; text-align:right; }
.exp-bookbar-actions { width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.exp-bookbar-actions > * { min-width:0; }
.exp-bookbar-actions > :only-child { grid-column:1 / -1; }
.exp-bookbar-message,
.exp-bookbar-message .btn,
.exp-bookbar-primary { width:100%; box-sizing:border-box; }
.exp-bookbar-message .btn,
.exp-bookbar-primary { min-height:46px; padding:11px 10px; }
.exp-bookbar-unavailable { grid-column:1 / -1; text-align:center; }
.exp-bookbar-unavailable strong { padding:10px 12px; }
.exp-bookbar-spacer { height:150px; }
}
@media (max-width:360px) {
.exp-bookbar { padding-left:9px; padding-right:9px; }
.exp-bookbar-price .price-tag { font-size:22px; }
.exp-bookbar-message .btn,
.exp-bookbar-primary { font-size:13px; }
}
/* Booking steps */
.step-pill { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; }
.step-active { background:var(--terracotta); color:#fff; }
.step-done { background:var(--green); color:#fff; }
.step-future { background:var(--border); color:var(--warm-gray); }
.step-line { flex:1; height:2px; }
/* Calendar */
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cal-day { aspect-ratio:1; display:flex; align-items:center; justify-content:center; border-radius:10px; font-size:13px; cursor:pointer; transition:all .15s; border:1.5px solid transparent; }
.cal-day:hover:not(.cal-disabled):not(.cal-selected) { background:var(--sand); }
.cal-day.cal-selected { background:var(--terracotta); color:#fff; border-color:var(--terracotta); }
.cal-day.cal-today { border-color:var(--terracotta); color:var(--terracotta); font-weight:700; }
.cal-day.cal-disabled { color:#D1CFC9; cursor:default; }
.cal-day.cal-available { background:#f0fdf4; }
/* Host calendar management */
.host-calendar-empty { padding:52px 20px; text-align:center; }
.host-calendar-empty p { margin:6px 0 18px; color:var(--warm-gray); }
.host-calendar-service-list { display:flex; flex-direction:column; gap:12px; }
.host-calendar-service-card {
display:flex; align-items:center; gap:14px; padding:14px; color:inherit;
background:#fff; border:1px solid var(--border); border-radius:16px; text-decoration:none;
transition:border-color .15s,transform .15s,box-shadow .15s;
}
.host-calendar-service-card:hover { transform:translateY(-1px); border-color:rgba(216,81,81,.45); box-shadow:0 8px 22px rgba(21,27,38,.06); }
.host-calendar-service-card>img { width:68px; height:68px; object-fit:cover; border-radius:12px; flex:none; }
.host-calendar-service-copy { min-width:0; flex:1; }
.host-calendar-service-copy>strong { display:block; font-size:15px; line-height:1.35; }
.host-calendar-service-copy>span { display:block; margin-top:4px; color:var(--warm-gray); font-size:12.5px; }
.host-calendar-service-copy>div { display:flex; flex-wrap:wrap; gap:7px; margin-top:8px; }
.host-calendar-service-arrow { flex:none; color:var(--terracotta); font-size:24px; }
.host-calendar-back { display:inline-flex; margin-bottom:14px; text-decoration:none; }
.host-calendar-card,.host-calendar-bookings-card { padding:22px 24px; }
.host-calendar-service-head { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.host-calendar-service-head>img { width:50px; height:50px; border-radius:11px; object-fit:cover; flex:none; }
.host-calendar-service-head>div { min-width:0; flex:1; }
.host-calendar-service-head>div strong,.host-calendar-service-head>div span { display:block; }
.host-calendar-service-head>div strong { font-size:16px; line-height:1.35; }
.host-calendar-service-head>div span { margin-top:2px; color:var(--warm-gray); font-size:12.5px; }
.host-calendar-service-head>a { text-decoration:none; }
.host-calendar-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:20px; }
.host-calendar-stats>div { padding:12px 14px; background:var(--light-gray); border:1px solid var(--border); border-radius:12px; }
.host-calendar-stats strong,.host-calendar-stats span { display:block; }
.host-calendar-stats strong { color:var(--midnight); font-size:20px; }
.host-calendar-stats span { color:var(--warm-gray); font-size:11px; }
.host-calendar-month-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.host-calendar-month-head>strong { font-family:'Cormorant Garamond',serif; font-size:22px; }
.host-calendar-month-head a { text-decoration:none; }
.host-calendar-next svg { transform:rotate(180deg); }
.host-calendar-tools { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 14px; margin-bottom:14px; background:#FCFAF8; border:1px solid var(--border); border-radius:12px; }
.host-calendar-tools>div:first-child strong,.host-calendar-tools>div:first-child span { display:block; }
.host-calendar-tools>div:first-child strong { font-size:13px; }
.host-calendar-tools>div:first-child span { color:var(--warm-gray); font-size:11px; }
.host-calendar-tools>div:last-child { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; }
.host-calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; margin-bottom:16px; }
.host-calendar-weekday { padding:4px 0; text-align:center; color:var(--warm-gray); font-size:11px; font-weight:700; text-transform:uppercase; }
.host-calendar-day {
position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
aspect-ratio:1; min-height:70px; padding:4px; border:1.5px solid var(--border); border-radius:11px;
background:#fff; color:var(--midnight); font:650 13px/1.2 'Outfit',sans-serif; cursor:pointer;
transition:background .12s,border-color .12s,transform .12s;
}
.host-calendar-day:hover:not(.is-past),.host-calendar-day:focus-visible:not(.is-past) { transform:translateY(-1px); border-color:rgba(216,81,81,.5); outline:none; }
.host-calendar-day.is-blocked { border-color:rgba(220,38,38,.4); background:rgba(220,38,38,.08); color:var(--red); }
.host-calendar-day.is-past { background:var(--light-gray); color:#C9C4BE; cursor:not-allowed; }
.host-calendar-day.has-booking { box-shadow:inset 0 -3px 0 rgba(22,163,74,.6); }
.host-calendar-day small { min-height:11px; margin-top:3px; font-size:9px; }
.host-calendar-day .host-calendar-guest-count { color:var(--green); font-weight:750; }
.host-calendar-legend { display:flex; flex-wrap:wrap; gap:12px 18px; margin-bottom:18px; color:var(--warm-gray); font-size:12px; }
.host-calendar-legend span { display:inline-flex; align-items:center; gap:6px; }
.host-calendar-legend i { width:12px; height:12px; border:1.5px solid var(--border); border-radius:3px; background:#fff; }
.host-calendar-legend i.is-blocked { border-color:rgba(220,38,38,.4); background:rgba(220,38,38,.12); }
.host-calendar-legend i.has-booking { border-color:rgba(22,163,74,.5); background:rgba(22,163,74,.15); }
.host-calendar-save { display:flex; align-items:center; gap:12px; }
.host-calendar-save [data-calendar-unsaved] { display:none; color:var(--terracotta); font-size:12px; font-weight:650; }
.host-calendar-bookings-card { margin-top:18px; }
.host-calendar-bookings-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.host-calendar-bookings-head>div strong,.host-calendar-bookings-head>div span { display:block; }
.host-calendar-bookings-head>div strong { font-size:16px; }
.host-calendar-bookings-head>div span { color:var(--warm-gray); font-size:12px; }
.host-calendar-bookings-head>a { text-decoration:none; }
.host-calendar-no-bookings { padding:22px; text-align:center; color:var(--warm-gray); background:var(--light-gray); border-radius:12px; }
.host-calendar-bookings { display:flex; flex-direction:column; }
.host-calendar-bookings>div { display:grid; grid-template-columns:72px 1fr auto; align-items:center; gap:12px; padding:12px 4px; border-top:1px solid var(--border); }
.host-calendar-booking-date { color:var(--terracotta); font-size:13px; font-weight:750; }
.host-calendar-booking-person strong,.host-calendar-booking-person small { display:block; }
.host-calendar-booking-person strong { font-size:13.5px; }
.host-calendar-booking-person small { margin-top:2px; color:var(--warm-gray); font-size:11px; }
@media (max-width:700px) {
.host-calendar-card,.host-calendar-bookings-card { padding:16px 12px; }
.host-calendar-service-head { align-items:flex-start; }
.host-calendar-service-head>a { width:100%; justify-content:center; }
.host-calendar-service-head { flex-wrap:wrap; }
.host-calendar-tools { align-items:flex-start; flex-direction:column; }
.host-calendar-tools>div:last-child { justify-content:flex-start; }
.host-calendar-grid { gap:4px; }
.host-calendar-day { min-height:50px; border-radius:9px; font-size:12px; }
.host-calendar-day small { font-size:8px; }
}
/* Traveler booking calendar */
.traveler-calendar {
border:1px solid var(--border); border-radius:16px; padding:16px;
background:linear-gradient(180deg,#fff 0%,#FCFAF8 100%);
}
.traveler-calendar-head {
display:grid; grid-template-columns:42px 1fr 42px; align-items:center;
gap:10px; margin-bottom:16px; text-align:center;
}
.traveler-calendar-month { color:var(--midnight); font-size:17px; font-weight:750; }
.traveler-calendar-selection { color:var(--warm-gray); font-size:12px; margin-top:2px; min-height:18px; }
.traveler-calendar-nav {
width:42px; height:42px; display:flex; align-items:center; justify-content:center;
border:1px solid var(--border); border-radius:50%; background:#fff;
color:var(--midnight); cursor:pointer; transition:all .15s;
}
.traveler-calendar-nav:hover:not(:disabled) { border-color:var(--terracotta); color:var(--terracotta); }
.traveler-calendar-nav:disabled { opacity:.3; cursor:default; }
.traveler-calendar-next svg { transform:rotate(180deg); }
.traveler-calendar-weekdays,
.traveler-calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; }
.traveler-calendar-weekdays { margin-bottom:6px; }
.traveler-calendar-weekdays span {
text-align:center; color:var(--warm-gray); font-size:11px; font-weight:700;
text-transform:uppercase; letter-spacing:.04em; padding:4px 0;
}
.traveler-calendar-day {
aspect-ratio:1; min-height:42px; border:1px solid transparent; border-radius:12px;
background:#F2FAF4; color:var(--midnight); font:600 13px/1 'Outfit',sans-serif;
cursor:pointer; transition:transform .12s,background .12s,border-color .12s;
}
.traveler-calendar-day:hover:not(:disabled):not(.is-selected),
.traveler-calendar-day:focus-visible:not(:disabled):not(.is-selected) {
transform:translateY(-1px); border-color:rgba(216,81,81,.45); background:#fff;
color:var(--midnight); outline:none;
}
.traveler-calendar-day.is-today { border-color:var(--terracotta); }
.traveler-calendar-day.is-selected {
background:var(--terracotta); border-color:var(--terracotta); color:#fff;
box-shadow:0 5px 14px rgba(216,81,81,.25);
}
.traveler-calendar-day.is-selected:hover,
.traveler-calendar-day.is-selected:focus-visible {
background:var(--terra-dark); border-color:var(--terra-dark); color:#fff;
outline:3px solid rgba(216,81,81,.18); outline-offset:2px;
}
.traveler-calendar-day:disabled {
background:var(--light-gray); color:#C2BEB8; text-decoration:line-through;
cursor:not-allowed;
}
.traveler-calendar-empty { min-height:42px; }
.traveler-calendar-legend {
display:flex; align-items:center; flex-wrap:wrap; gap:12px 18px;
margin-top:14px; color:var(--warm-gray); font-size:11px;
}
.traveler-calendar-legend span { display:inline-flex; align-items:center; gap:6px; }
.legend-dot { width:9px; height:9px; border-radius:3px; display:inline-block; }
.legend-available { background:#DDF3E2; }
.legend-selected { background:var(--terracotta); }
.legend-unavailable { background:var(--border); }
@media (max-width:480px) {
.booking-date-card { padding:15px !important; }
.traveler-calendar { padding:12px; margin:0 -2px; }
.traveler-calendar-weekdays,.traveler-calendar-grid { gap:4px; }
.traveler-calendar-day,.traveler-calendar-empty { min-height:38px; border-radius:10px; }
.traveler-calendar-head { grid-template-columns:38px 1fr 38px; }
.traveler-calendar-nav { width:38px; height:38px; }
}
/* Gallery */
.gallery-grid { display:grid; grid-template-columns:2fr 1fr 1fr; grid-template-rows:1fr 1fr; gap:8px; height:360px; border-radius:20px; overflow:hidden; }
.gallery-main { grid-row:1/3; }
.gallery-img { width:100%; height:100%; object-fit:cover; display:block; cursor:pointer; transition:opacity .2s; }
.gallery-img:hover { opacity:.92; }
/* Dashboard stat card */
.stat-card { background:#fff; border-radius:16px; padding:20px; border:1px solid var(--border); }
.stat-num { font-family:'Cormorant Garamond',serif; font-size:36px; font-weight:700; color:var(--midnight); }
.stat-label { font-size:13px; color:var(--warm-gray); margin-top:2px; }
.stat-change { font-size:12px; font-weight:600; margin-top:8px; }
.stat-up { color:var(--green); }
.stat-down { color:var(--red); }
/* Progress bar */
.progress { height:6px; background:var(--border); border-radius:3px; overflow:hidden; }
.progress-fill { height:100%; background:var(--terracotta); border-radius:3px; transition:width .4s; }
/* Amenity tag */
.amenity { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--charcoal); padding:6px 0; }
/* Host card */
.host-card { display:flex; align-items:center; gap:16px; padding:20px; background:var(--light-gray); border-radius:16px; }
/* Checkout summary */
.checkout-row { display:flex; justify-content:space-between; align-items:center; padding:10px 0; font-size:14px; }
.checkout-row.total { font-weight:700; font-size:16px; padding-top:16px; border-top:2px solid var(--midnight); margin-top:8px; }
/* Wishlist heart */
.heart-btn { position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.9); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:16px; transition:all .2s; box-shadow:0 2px 8px rgba(0,0,0,.15); }
.heart-btn:hover { transform:scale(1.1); }
/* Notification item */
.notif-item { display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--border); align-items:flex-start; }
.notif-item:last-child { border-bottom:none; }
.notif-dot-status { width:8px; height:8px; border-radius:50%; margin-top:6px; flex-shrink:0; }
.notif-unread { background:var(--terracotta); }
.notif-read { background:var(--border); }
/* Admin actionable notifications */
.admin-topbar-inner { overflow:visible; }
.admin-brand {
display:flex; align-items:center; gap:10px; min-width:0; text-decoration:none;
}
.admin-topbar-actions {
display:flex; align-items:center; gap:10px; flex-shrink:0;
}
.admin-staff-label {
font-size:13px; color:var(--warm-gray); white-space:nowrap;
}
.admin-menu-trigger {
display:none; width:40px; height:40px; padding:0; border:1px solid var(--border);
border-radius:12px; background:#fff; color:var(--charcoal); cursor:pointer;
align-items:center; justify-content:center;
}
.admin-shell {
max-width:1400px; margin:0 auto; padding:0 20px 80px;
display:flex; gap:24px; align-items:flex-start;
}
.admin-sidebar {
width:196px; flex-shrink:0; position:sticky; top:76px; padding-top:24px;
}
.admin-sidebar-mobile-head,
.admin-sidebar-account { display:none; }
.admin-sidebar-links { display:flex; flex-direction:column; gap:3px; }
.admin-sidebar-links > a {
display:flex; align-items:center; gap:10px; padding:10px 13px;
border-radius:11px; color:var(--charcoal); font-size:14px; font-weight:600;
text-decoration:none; transition:all .15s;
}
.admin-sidebar-links > a:hover { background:var(--light-gray); }
.admin-sidebar-links > a.active { color:#fff; background:var(--terracotta); }
.admin-sidebar-arrow { display:none; margin-left:auto; }
.admin-main { flex:1; min-width:0; padding-top:24px; }
.admin-mobile-nav { display:none; }
.admin-drawer-backdrop { display:none; }
.admin-alerts { position:relative; }
.admin-alert-trigger {
width:40px; height:40px; border:1px solid var(--border); border-radius:12px;
background:#fff; color:var(--charcoal); cursor:pointer; display:flex;
align-items:center; justify-content:center; position:relative; transition:.18s ease;
}
.admin-alert-trigger:hover,
.admin-alert-trigger[aria-expanded="true"] {
border-color:rgba(216,81,81,.45); color:var(--terracotta);
background:#FFF8F7; box-shadow:0 4px 15px rgba(216,81,81,.1);
}
.admin-alert-count {
position:absolute; top:-7px; right:-7px; min-width:20px; height:20px;
padding:0 5px; box-sizing:border-box; border-radius:999px; background:#E43F3F;
color:#fff; border:2px solid #fff; display:flex; align-items:center;
justify-content:center; font-size:10px; line-height:1; font-weight:800;
box-shadow:0 3px 9px rgba(228,63,63,.38);
}
.admin-alert-panel {
position:absolute; top:49px; right:0; z-index:9500; width:min(390px,calc(100vw - 24px));
background:#fff; border:1px solid rgba(17,24,39,.09); border-radius:16px;
box-shadow:0 20px 55px rgba(17,24,39,.18); overflow:hidden;
}
.admin-alert-panel::before {
content:""; position:absolute; top:-7px; right:13px; width:13px; height:13px;
background:#fff; border-left:1px solid rgba(17,24,39,.09);
border-top:1px solid rgba(17,24,39,.09); transform:rotate(45deg);
}
.admin-alert-head {
padding:16px 17px 13px; display:flex; align-items:flex-start;
justify-content:space-between; border-bottom:1px solid var(--border);
}
.admin-alert-title {
font-family:'Cormorant Garamond',serif; color:var(--midnight);
font-size:22px; line-height:1.1; font-weight:700;
}
.admin-alert-sub { color:var(--warm-gray); font-size:11.5px; margin-top:3px; }
.admin-alert-head-actions {
display:flex; align-items:center; gap:4px; margin-left:10px;
}
.admin-alert-read-all {
border:0; background:transparent; color:var(--terracotta); cursor:pointer;
padding:7px 8px; border-radius:8px; font:600 11px 'Outfit',sans-serif;
white-space:nowrap;
}
.admin-alert-read-all:hover { background:#FFF1EF; }
.admin-alert-close {
width:30px; height:30px; border:0; border-radius:9px; color:var(--warm-gray);
background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.admin-alert-close:hover { background:var(--cream); color:var(--charcoal); }
.admin-alert-list { max-height:min(520px,70vh); overflow-y:auto; }
.admin-alert-item {
display:flex; align-items:flex-start; gap:11px; padding:13px 15px;
color:inherit; text-decoration:none; border-bottom:1px solid var(--border);
transition:background .15s ease;
}
.admin-alert-item:last-child { border-bottom:0; }
.admin-alert-item:hover { background:#FFFAF8; }
.admin-alert-item.is-read { background:#FCFCFB; opacity:.72; }
.admin-alert-item.is-read:hover { background:#F8F6F3; opacity:1; }
.admin-alert-item.is-read .admin-alert-copy strong { font-weight:500; }
.admin-alert-icon {
width:34px; height:34px; border-radius:10px; flex:0 0 34px;
display:flex; align-items:center; justify-content:center;
}
.admin-alert-icon-terra { color:#C94545; background:#FDECEC; }
.admin-alert-icon-saffron { color:#A66B08; background:#FFF4D9; }
.admin-alert-icon-green { color:#2F7D5B; background:#E8F6EF; }
.admin-alert-icon-blue { color:#3372A8; background:#E9F3FC; }
.admin-alert-copy { flex:1; min-width:0; display:flex; flex-direction:column; }
.admin-alert-copy strong { color:var(--midnight); font-size:13.5px; line-height:1.35; }
.admin-alert-copy > span { color:var(--charcoal); font-size:12px; line-height:1.4; margin-top:2px; }
.admin-alert-copy small { color:var(--warm-gray); font-size:10.5px; margin-top:4px; }
.admin-alert-unread {
width:7px; height:7px; border-radius:50%; flex:0 0 7px;
background:#E43F3F; margin-top:6px;
}
.admin-alert-empty {
padding:38px 20px; color:var(--warm-gray); display:flex; flex-direction:column;
align-items:center; text-align:center; gap:6px;
}
.admin-alert-empty strong { color:var(--midnight); font-size:14px; margin-top:3px; }
.admin-alert-empty small { font-size:12px; }
/* Verified-host trust mark shared by public profiles and host dashboards. */
.verified-host-badge {
display:inline-flex; align-items:center; gap:6px; width:max-content;
padding:5px 10px 5px 6px; border-radius:999px;
color:#166534; background:#ECFDF3; border:1px solid #BBE8CA;
font-size:11.5px; line-height:1; font-weight:800; white-space:nowrap;
}
.verified-host-badge-icon {
width:19px; height:19px; border-radius:50%; display:inline-flex;
align-items:center; justify-content:center; background:var(--green);
box-shadow:0 2px 6px rgba(22,101,52,.2); flex-shrink:0;
}
.verified-host-badge-compact { padding:3px 8px 3px 4px; font-size:10.5px; gap:5px; }
.verified-host-badge-compact .verified-host-badge-icon { width:16px; height:16px; }
@media (max-width:900px) {
body { overflow-x:hidden; }
body.admin-nav-open { overflow:hidden; }
.admin-topbar { position:sticky; top:0; z-index:500; }
.admin-topbar-inner {
height:58px; padding:0 11px 0 13px; gap:8px; overflow:visible;
}
.admin-brand { flex:1; overflow:hidden; }
.admin-brand > svg { width:128px; max-width:100%; flex-shrink:1; }
.admin-brand .badge { display:none; }
.admin-topbar-actions { gap:7px; }
.admin-staff-label,
.admin-desktop-action { display:none!important; }
.admin-menu-trigger { display:flex; }
.admin-alert-trigger { width:40px; height:40px; }
.admin-alert-panel {
position:fixed; top:64px; right:10px; left:10px; width:auto;
max-height:calc(100dvh - 78px);
}
.admin-alert-panel::before { right:57px; }
.admin-alert-list { max-height:calc(100dvh - 156px); }
.admin-shell {
display:block; max-width:none; padding:0 12px calc(92px + env(safe-area-inset-bottom));
}
.admin-main { width:100%; padding-top:18px; }
.admin-main .section-title { font-size:25px; }
.admin-main .section-sub { font-size:12.5px; line-height:1.45; }
.admin-main .card { border-radius:15px; }
.admin-main .btn { min-height:42px; }
.admin-main .btn-sm { min-height:38px; padding:8px 12px; }
.admin-main .input { font-size:16px; }
.admin-drawer-backdrop {
position:fixed; inset:0; z-index:11900; display:block;
background:rgba(12,18,25,.58); backdrop-filter:blur(3px);
animation:fadeIn .16s ease;
}
.admin-sidebar {
position:fixed; z-index:12000; inset:0 auto 0 0; width:min(86vw,330px);
height:100dvh; box-sizing:border-box; padding:0; background:#fff;
box-shadow:18px 0 55px rgba(17,24,39,.22);
display:flex; flex-direction:column; transform:translateX(-105%);
transition:transform .22s ease; overflow:hidden;
}
.admin-sidebar.open { transform:translateX(0); }
.admin-sidebar-mobile-head {
min-height:70px; padding:12px 14px 11px 18px; box-sizing:border-box;
display:flex; align-items:center; justify-content:space-between;
border-bottom:1px solid var(--border);
}
.admin-sidebar-mobile-head > div { display:flex; flex-direction:column; gap:3px; }
.admin-sidebar-mobile-head span {
color:var(--warm-gray); font-size:10px; font-weight:700;
text-transform:uppercase; letter-spacing:.08em;
}
.admin-sidebar-mobile-head button {
width:38px; height:38px; border:0; border-radius:11px; background:var(--light-gray);
color:var(--charcoal); display:flex; align-items:center; justify-content:center;
}
.admin-sidebar-links {
flex:1; min-height:0; overflow-y:auto; padding:12px 10px; gap:4px;
}
.admin-sidebar-links > a {
min-height:46px; box-sizing:border-box; padding:11px 13px; border-radius:12px;
font-size:14px;
}
.admin-sidebar-arrow { display:flex; transform:rotate(180deg); opacity:.45; }
.admin-sidebar-links > a.active .admin-sidebar-arrow { opacity:.85; }
.admin-sidebar-account {
display:block; padding:12px 14px calc(15px + env(safe-area-inset-bottom));
border-top:1px solid var(--border); background:#FCFBFA;
}
.admin-sidebar-person { display:flex; align-items:center; gap:10px; margin-bottom:11px; }
.admin-sidebar-person > div:last-child { min-width:0; display:flex; flex-direction:column; }
.admin-sidebar-person strong {
color:var(--midnight); font-size:13px; overflow:hidden;
text-overflow:ellipsis; white-space:nowrap;
}
.admin-sidebar-person span { color:var(--warm-gray); font-size:11px; margin-top:2px; }
.admin-sidebar-account-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.admin-sidebar-account-actions a,
.admin-sidebar-account-actions button {
width:100%; min-height:40px; box-sizing:border-box; border:1px solid var(--border);
border-radius:10px; background:#fff; color:var(--charcoal); display:flex;
align-items:center; justify-content:center; gap:6px; font:600 12px 'Outfit',sans-serif;
text-decoration:none; cursor:pointer;
}
.admin-sidebar-account-actions form { margin:0; }
.admin-mobile-nav {
position:fixed; z-index:450; right:0; bottom:0; left:0;
min-height:64px; padding:7px 7px calc(6px + env(safe-area-inset-bottom));
box-sizing:border-box; background:rgba(255,255,255,.96);
border-top:1px solid var(--border); box-shadow:0 -8px 28px rgba(17,24,39,.08);
backdrop-filter:blur(12px); display:flex; align-items:flex-start;
justify-content:space-around;
}
.admin-mobile-nav a,
.admin-mobile-nav button {
min-width:52px; padding:3px 5px; border:0; background:none; color:#8B8580;
display:flex; flex-direction:column; align-items:center; gap:3px;
font:600 9.5px 'Outfit',sans-serif; text-decoration:none; cursor:pointer;
position:relative;
}
.admin-mobile-nav a.active { color:var(--terracotta); }
.admin-mobile-nav a.active::before {
content:""; position:absolute; width:28px; height:3px; margin-top:-10px;
border-radius:0 0 4px 4px; background:var(--terracotta);
}
.admin-main > div[style*="display:grid"],
.admin-main > form + div[style*="display:grid"],
.admin-main div[style*="grid-template-columns:repeat(auto-fit,minmax(300px"],
.admin-main div[style*="grid-template-columns:repeat(auto-fit,minmax(320px"] {
grid-template-columns:minmax(0,1fr)!important;
}
.admin-main div:has(> .stat-card) {
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:9px!important;
}
.admin-main .stat-card { min-width:0; padding:13px!important; }
.admin-main .stat-num { font-size:23px!important; overflow-wrap:anywhere; }
.admin-main .card { padding:15px!important; }
.admin-main .card[style*="padding:0"] { padding:0!important; }
.admin-main form[method="get"] { gap:8px!important; }
.admin-main form[method="get"] > .input {
flex:1 1 100%!important; width:100%!important; min-width:0!important;
}
.admin-main form[method="get"] > .btn { width:100%; }
.admin-main input[style*="width:230px"] { width:100%!important; }
.admin-main form[action*="/admin/payouts/"][method="post"] {
width:100%; flex:1 1 100%!important; flex-wrap:wrap;
}
.admin-main form[action*="/admin/payouts/"][method="post"] .input {
width:auto!important; min-width:0; flex:1 1 150px;
}
.admin-main form[action*="/admin/settings/test-email"],
.admin-main form[action="/admin/settings/reset"] {
flex-direction:column;
}
.admin-main form[action*="/admin/settings"] > .input,
.admin-main form[action*="/admin/settings"] > .btn {
width:100%!important; min-width:0!important;
}
.admin-main form[action*="/admin/hosts/"][method="post"] .input {
min-width:0!important;
}
.admin-main .bubble { max-width:90%!important; }
.admin-table-card {
overflow:visible!important; background:transparent!important;
border-radius:0!important; box-shadow:none!important;
}
.admin-responsive-table {
display:block; width:100%!important; min-width:0!important;
}
.admin-responsive-table thead { display:none; }
.admin-responsive-table tbody {
display:grid; grid-template-columns:minmax(0,1fr); gap:10px;
}
.admin-responsive-table tr {
display:block; overflow:hidden; border:1px solid var(--border)!important;
border-radius:14px; background:#fff; box-shadow:0 2px 10px rgba(17,24,39,.04);
}
.admin-responsive-table td {
min-height:39px; box-sizing:border-box; padding:9px 12px!important;
border-top:1px solid var(--border); display:flex; align-items:center;
justify-content:space-between; gap:14px; text-align:right!important;
white-space:normal!important; color:var(--charcoal);
}
.admin-responsive-table td:first-child {
min-height:58px; border-top:0; background:#FCFBFA; text-align:left!important;
}
.admin-responsive-table td::before {
content:attr(data-label); flex:0 0 auto; color:var(--warm-gray);
font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
}
.admin-responsive-table td:first-child::before { display:none; }
.admin-responsive-table td > a { min-width:0; }
.admin-bookings-table td:nth-child(2)::before { content:"Experience"; }
.admin-bookings-table td:nth-child(3)::before { content:"Guest"; }
.admin-bookings-table td:nth-child(4)::before { content:"Host"; }
.admin-bookings-table td:nth-child(5)::before { content:"Date"; }
.admin-bookings-table td:nth-child(6)::before { content:"Total"; }
.admin-bookings-table td:nth-child(7)::before { content:"Payout"; }
.admin-bookings-table td:nth-child(8)::before { content:"Status"; }
}
@media (max-width:370px) {
.admin-brand > svg { width:112px; }
.admin-topbar-actions { gap:5px; }
.admin-alert-trigger,
.admin-menu-trigger { width:38px; height:38px; }
.admin-mobile-nav a,
.admin-mobile-nav button { min-width:45px; padding-left:2px; padding-right:2px; }
}
/* Secure credential document lightbox */
.credential-doc-trigger { display:inline-flex; align-items:center; gap:6px; }
.credential-viewer {
position:fixed; inset:0; z-index:10000; padding:22px;
background:rgba(10,15,22,.9); backdrop-filter:blur(8px);
display:flex; align-items:center; justify-content:center;
animation:fadeIn .16s ease;
}
.credential-viewer-shell {
width:min(1180px,100%); height:min(820px,calc(100dvh - 44px));
border:1px solid rgba(255,255,255,.14); border-radius:20px;
background:#111821; box-shadow:0 28px 90px rgba(0,0,0,.48);
overflow:hidden; display:grid; grid-template-rows:auto minmax(0,1fr) auto;
}
.credential-viewer-head {
min-height:68px; padding:12px 16px 12px 20px; box-sizing:border-box;
display:flex; align-items:center; justify-content:space-between; gap:18px;
color:#fff; background:rgba(17,24,33,.96); border-bottom:1px solid rgba(255,255,255,.1);
}
.credential-viewer-eyebrow {
color:#EF9A8C; font-size:10px; line-height:1; font-weight:800;
letter-spacing:.12em; text-transform:uppercase; margin-bottom:5px;
}
.credential-viewer-title {
color:#fff; font-size:16px; line-height:1.2; font-weight:700;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.credential-viewer-tools { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.credential-viewer-tools button {
width:36px; height:36px; border:1px solid rgba(255,255,255,.15);
border-radius:10px; color:#fff; background:rgba(255,255,255,.07);
cursor:pointer; display:flex; align-items:center; justify-content:center;
font-size:20px; transition:.15s ease;
}
.credential-viewer-tools button:hover { background:rgba(255,255,255,.15); }
.credential-viewer-tools [data-credential-zoom-label] {
width:46px; color:#C8D0D9; font-size:11px; font-weight:700; text-align:center;
}
.credential-viewer-tools .credential-viewer-close {
margin-left:5px; color:#fff; border-color:rgba(232,94,83,.32);
background:rgba(232,94,83,.15);
}
.credential-viewer-stage { min-height:0; position:relative; display:flex; align-items:stretch; }
.credential-viewer-canvas {
flex:1; min-width:0; overflow:auto; position:relative; display:flex;
align-items:center; justify-content:center; padding:24px 64px;
background:
radial-gradient(circle at center,rgba(255,255,255,.06),transparent 60%),
#0A1017;
}
.credential-viewer-canvas img {
display:block; max-width:100%; max-height:100%; object-fit:contain;
border-radius:5px; box-shadow:0 12px 45px rgba(0,0,0,.45);
transform-origin:center; transition:transform .16s ease;
}
.credential-viewer-canvas iframe {
width:100%; height:100%; min-height:440px; border:0; border-radius:8px; background:#fff;
}
.credential-viewer-loading,
.credential-viewer-error {
position:absolute; inset:0; display:flex; flex-direction:column; gap:12px;
align-items:center; justify-content:center; color:#C8D0D9; font-size:13px;
}
.credential-viewer-loading .spinner {
width:26px; height:26px; border:3px solid rgba(255,255,255,.15);
border-top-color:#E87575; border-radius:50%; animation:spin .75s linear infinite;
}
.credential-viewer-error { color:#FFB5AD; }
.credential-viewer-nav {
position:absolute; z-index:2; top:50%; transform:translateY(-50%);
width:44px; height:54px; border:1px solid rgba(255,255,255,.14);
border-radius:13px; color:#fff; background:rgba(17,24,33,.78);
cursor:pointer; display:flex; align-items:center; justify-content:center;
backdrop-filter:blur(5px); transition:.15s ease;
}
.credential-viewer-nav:hover { background:rgba(216,81,81,.85); }
.credential-viewer-nav:disabled { opacity:.25; cursor:default; }
.credential-viewer-prev { left:16px; }
.credential-viewer-next { right:16px; }
.credential-viewer-next svg { transform:rotate(180deg); }
.credential-viewer-foot {
min-height:64px; box-sizing:border-box; padding:10px 16px 11px;
display:flex; align-items:center; gap:14px; background:#111821;
border-top:1px solid rgba(255,255,255,.1);
}
.credential-viewer-tabs {
flex:1; min-width:0; display:flex; gap:7px; overflow-x:auto;
scrollbar-width:thin; padding-bottom:1px;
}
.credential-viewer-tab {
border:1px solid rgba(255,255,255,.13); border-radius:10px;
background:rgba(255,255,255,.05); color:#B9C2CC; padding:8px 11px;
cursor:pointer; white-space:nowrap; font:600 11px 'Outfit',sans-serif;
}
.credential-viewer-tab:hover { color:#fff; background:rgba(255,255,255,.1); }
.credential-viewer-tab.active {
color:#fff; border-color:rgba(232,117,117,.7); background:rgba(216,81,81,.22);
}
.credential-viewer-count { flex-shrink:0; color:#9DA8B5; font-size:11px; font-weight:700; }
@media (max-width:640px) {
.credential-viewer { padding:0; }
.credential-viewer-shell { height:100dvh; width:100%; border:0; border-radius:0; }
.credential-viewer-head { padding:10px 11px 10px 14px; }
.credential-viewer-tools [data-credential-zoom-label],
.credential-viewer-tools [data-credential-zoom-out] { display:none; }
.credential-viewer-tools button { width:34px; height:34px; }
.credential-viewer-canvas { padding:18px 45px; }
.credential-viewer-nav { width:36px; height:48px; }
.credential-viewer-prev { left:6px; }
.credential-viewer-next { right:6px; }
.credential-viewer-foot { padding-left:10px; padding-right:10px; }
}
@keyframes spin { to { transform:rotate(360deg); } }
/* Admin service photo gallery */
.admin-service-photos-head {
margin-top:20px; padding-top:17px; border-top:1px solid var(--border);
display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
}
.admin-service-photos-head > div { display:flex; flex-direction:column; }
.admin-service-photos-head strong { color:var(--midnight); font-size:14px; }
.admin-service-photos-head span { color:var(--warm-gray); font-size:10.5px; margin-top:2px; }
.admin-service-gallery {
margin-top:10px; display:grid;
grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px;
}
.admin-service-gallery.single { grid-template-columns:1fr; }
.admin-service-gallery-item {
position:relative; min-width:0; padding:0; overflow:hidden; aspect-ratio:16 / 10;
border:0; border-radius:11px; background:var(--light-gray); cursor:pointer;
}
.admin-service-gallery.single .admin-service-gallery-item { aspect-ratio:16 / 7; }
.admin-service-gallery-item > img {
width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s ease;
}
.admin-service-gallery-item:hover > img { transform:scale(1.035); }
.admin-service-gallery-item > span {
position:absolute; left:10px; bottom:10px; padding:5px 8px; border-radius:8px;
color:#fff; background:rgba(17,24,39,.7); backdrop-filter:blur(5px);
font-size:10px; font-weight:800;
}
.admin-service-gallery-item > i {
position:absolute; inset:0; color:#fff; background:rgba(10,15,22,.2);
opacity:0; display:flex; align-items:center; justify-content:center;
transition:opacity .18s ease;
}
.admin-service-gallery-item:hover > i { opacity:1; }
.service-image-viewer {
position:fixed; inset:0; z-index:13000; padding:20px;
display:flex; align-items:center; justify-content:center;
background:rgba(7,11,16,.92); backdrop-filter:blur(9px); animation:fadeIn .16s ease;
}
.service-image-viewer-shell {
width:min(1120px,100%); height:min(820px,calc(100dvh - 40px));
overflow:hidden; border:1px solid rgba(255,255,255,.13); border-radius:19px;
background:#0C121A; display:grid; grid-template-rows:auto minmax(0,1fr) auto;
box-shadow:0 28px 90px rgba(0,0,0,.52);
}
.service-image-viewer-head {
min-height:64px; padding:11px 15px 11px 19px; box-sizing:border-box;
display:flex; align-items:center; justify-content:space-between; gap:15px;
border-bottom:1px solid rgba(255,255,255,.1);
}
.service-image-viewer-head > div:first-child { display:flex; flex-direction:column; }
.service-image-viewer-head > div:first-child span {
color:#EF9A8C; font-size:9px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
}
.service-image-viewer-head strong { color:#fff; font-size:15px; margin-top:3px; }
.service-image-viewer-head [data-service-gallery-count] {
color:#AEB7C2; font-size:11px; font-weight:700;
}
.service-image-viewer-head button,
.service-image-viewer-stage button {
border:1px solid rgba(255,255,255,.14); color:#fff;
background:rgba(255,255,255,.07); cursor:pointer;
display:flex; align-items:center; justify-content:center;
}
.service-image-viewer-head button { width:36px; height:36px; border-radius:10px; }
.service-image-viewer-stage {
position:relative; min-height:0; padding:20px 65px; overflow:hidden;
display:flex; align-items:center; justify-content:center;
background:radial-gradient(circle at center,rgba(255,255,255,.055),transparent 62%),#080D13;
}
.service-image-viewer-stage > img {
display:block; max-width:100%; max-height:100%; object-fit:contain;
border-radius:6px; box-shadow:0 14px 55px rgba(0,0,0,.5);
}
.service-image-viewer-stage button {
position:absolute; z-index:2; top:50%; width:43px; height:54px;
border-radius:13px; transform:translateY(-50%);
}
.service-image-viewer-stage button:disabled { opacity:.22; cursor:default; }
.service-image-viewer-prev { left:13px; }
.service-image-viewer-next { right:13px; }
.service-image-viewer-next svg { transform:rotate(180deg); }
.service-image-viewer-thumbs {
min-height:76px; padding:9px 13px; box-sizing:border-box;
display:flex; align-items:center; justify-content:center; gap:7px;
overflow-x:auto; border-top:1px solid rgba(255,255,255,.1);
}
.service-image-viewer-thumb {
width:66px; height:52px; flex:0 0 66px; padding:0; overflow:hidden;
border:2px solid transparent; border-radius:9px; background:#171F29; cursor:pointer;
}
.service-image-viewer-thumb img { width:100%; height:100%; object-fit:cover; display:block; opacity:.62; }
.service-image-viewer-thumb.active { border-color:#E87575; }
.service-image-viewer-thumb.active img { opacity:1; }
@media (max-width:700px) {
.admin-service-photos-head { align-items:flex-start; flex-direction:column; }
.admin-service-gallery {
grid-template-columns:1fr 1fr;
}
.admin-service-gallery.single { grid-template-columns:1fr; }
.service-image-viewer { padding:0; }
.service-image-viewer-shell { width:100%; height:100dvh; border:0; border-radius:0; }
.service-image-viewer-stage { padding:15px 45px; }
.service-image-viewer-stage button { width:34px; height:48px; }
.service-image-viewer-prev { left:5px; }
.service-image-viewer-next { right:5px; }
}
@media (max-width:460px) {
.admin-service-gallery { grid-template-columns:1fr; }
.admin-service-gallery-item,
.admin-service-gallery.single .admin-service-gallery-item { aspect-ratio:16 / 10; }
}
/* Shared traveler/host booking cards */
.booking-card {
display:grid; grid-template-columns:76px minmax(0,1fr); gap:14px;
padding:15px; box-sizing:border-box; background:#fff;
border:1px solid var(--border); border-radius:16px;
box-shadow:0 1px 2px rgba(17,24,39,.025);
}
.booking-card-image {
width:76px; height:82px; border-radius:12px; object-fit:cover; display:block;
}
.booking-card-body { min-width:0; }
.booking-card-head {
display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
}
.booking-card-title {
min-width:0; color:var(--midnight); font-size:15px; font-weight:800;
line-height:1.35; overflow-wrap:anywhere;
}
.booking-card-status {
flex-shrink:0; padding:4px 10px; border-radius:999px;
font-size:10.5px; font-weight:800; white-space:nowrap;
}
.booking-card-meta {
margin-top:5px; color:var(--warm-gray); font-size:12.5px; line-height:1.65;
}
.booking-card-footer {
display:flex; align-items:center; justify-content:space-between; gap:12px;
margin-top:9px;
}
.booking-card-amount { display:flex; align-items:baseline; gap:8px; min-width:0; }
.booking-card-amount strong { color:var(--midnight); font-size:15px; font-weight:800; }
.booking-card-amount span { color:var(--warm-gray); font-size:11px; white-space:nowrap; }
.booking-card-quick-actions { margin-left:auto; display:flex; flex-wrap:wrap; gap:8px; }
.booking-card-request {
margin-top:11px; padding:9px 12px; border-radius:10px;
color:var(--charcoal); background:var(--light-gray); font-size:12.5px; line-height:1.6;
}
/* Support threads sit in the same inbox as host chats, with their own mark. */
.support-inbox-avatar {
width:46px; height:46px; border-radius:50%; flex-shrink:0;
display:flex; align-items:center; justify-content:center;
background:linear-gradient(135deg,#E87575,#D85151);
}
/* Verified tick pinned to a host's photo. */
.avatar-verified { position:relative; display:inline-flex; flex-shrink:0; }
.avatar-verified-tick {
position:absolute; right:-1px; bottom:-1px;
display:flex; align-items:center; justify-content:center;
background:var(--green); border-radius:50%; border:2px solid #fff;
box-sizing:border-box; box-shadow:0 1px 3px rgba(0,0,0,.18);
}
/* Host profile photo — drag, crop, zoom and upload. */
.profile-photo-panel { margin:0; }
.profile-photo-heading {
display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
margin-bottom:16px;
}
.profile-photo-heading h2 {
margin:0; color:var(--midnight); font:700 22px/1.15 'Cormorant Garamond',serif;
}
.profile-photo-heading p { margin:4px 0 0; color:var(--warm-gray); font-size:12.5px; line-height:1.5; }
.profile-photo-format {
flex-shrink:0; padding:5px 9px; border-radius:999px;
color:var(--warm-gray); background:var(--light-gray); font-size:9.5px; font-weight:800;
letter-spacing:.35px;
}
.profile-photo-picker {
display:grid; grid-template-columns:112px minmax(0,1fr); align-items:center; gap:18px;
}
.profile-photo-current {
display:flex; flex-direction:column; align-items:center; gap:7px;
color:var(--warm-gray); font-size:10.5px; font-weight:600;
}
.profile-photo-avatar {
width:96px; height:96px; border-radius:50%; object-fit:cover; display:block;
box-shadow:0 0 0 5px #fff,0 0 0 6px var(--border),0 7px 18px rgba(17,24,39,.11);
}
.profile-photo-avatar > .avatar-verified { display:flex; }
.profile-photo-avatar-preview { background:var(--light-gray); }
.profile-photo-dropzone {
min-height:112px; box-sizing:border-box; padding:18px 20px;
display:flex; align-items:center; gap:14px; cursor:pointer;
border:2px dashed #D9D2CC; border-radius:16px; background:#FCFBFA;
transition:border-color .18s,background .18s,transform .18s,box-shadow .18s;
}
.profile-photo-dropzone:hover,
.profile-photo-dropzone:focus-visible,
.profile-photo-dropzone.is-dragging {
outline:none; border-color:var(--terracotta); background:#FFF8F7;
box-shadow:0 0 0 4px rgba(216,81,81,.07);
}
.profile-photo-dropzone.is-dragging { transform:scale(.995); }
.profile-photo-drop-icon {
width:46px; height:46px; flex:0 0 46px; border-radius:14px;
display:flex; align-items:center; justify-content:center;
color:var(--terracotta); background:rgba(216,81,81,.1);
}
.profile-photo-drop-copy { min-width:0; flex:1; display:flex; flex-direction:column; }
.profile-photo-drop-copy strong { color:var(--midnight); font-size:14px; }
.profile-photo-drop-copy small { margin-top:3px; color:var(--warm-gray); font-size:11px; }
.profile-photo-choose { flex-shrink:0; pointer-events:none; }
.profile-photo-error {
margin-top:10px; padding:10px 12px; border:1px solid #fecaca; border-radius:10px;
color:#b91c1c; background:#fef2f2; font-size:12px; font-weight:600;
}
.profile-photo-editor {
margin-top:18px; padding:18px; border:1px solid var(--border); border-radius:18px;
background:linear-gradient(145deg,#FCFBFA,#F7F4F1);
}
.profile-photo-editor-head {
display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:16px;
}
.profile-photo-editor-head > div { display:flex; flex-direction:column; }
.profile-photo-editor-head strong { color:var(--midnight); font-size:15px; }
.profile-photo-editor-head span { margin-top:3px; color:var(--warm-gray); font-size:11.5px; }
.profile-photo-change,
.profile-photo-reset {
padding:0; border:0; color:var(--terracotta); background:transparent;
cursor:pointer; font:700 11.5px 'Outfit',sans-serif;
}
.profile-photo-change:hover,
.profile-photo-reset:hover { text-decoration:underline; }
.profile-photo-crop-layout {
display:grid; grid-template-columns:minmax(230px,320px) minmax(210px,1fr);
align-items:center; justify-content:center; gap:28px;
}
.profile-photo-crop-shell {
position:relative; width:min(100%,320px); aspect-ratio:1; justify-self:center;
overflow:hidden; border-radius:50%; background:#E9E5E1;
box-shadow:0 0 0 7px #fff,0 0 0 8px #D8D0C8,0 16px 38px rgba(17,24,39,.16);
}
.profile-photo-crop-shell canvas {
width:100%; height:100%; display:block; cursor:grab; touch-action:none; user-select:none;
}
.profile-photo-crop-shell canvas:active { cursor:grabbing; }
.profile-photo-crop-ring {
position:absolute; inset:0; border:3px solid rgba(255,255,255,.92); border-radius:50%;
box-sizing:border-box; pointer-events:none;
}
.profile-photo-crop-grid {
position:absolute; inset:0; pointer-events:none; opacity:.3;
background:
linear-gradient(to right,transparent 33.1%,#fff 33.1%,#fff 33.7%,transparent 33.7%,transparent 66.3%,#fff 66.3%,#fff 66.9%,transparent 66.9%),
linear-gradient(to bottom,transparent 33.1%,#fff 33.1%,#fff 33.7%,transparent 33.7%,transparent 66.3%,#fff 66.3%,#fff 66.9%,transparent 66.9%);
}
.profile-photo-controls > label {
display:block; margin-bottom:9px; color:var(--charcoal); font-size:12px; font-weight:700;
}
.profile-photo-zoom-row { display:flex; align-items:center; gap:10px; color:var(--warm-gray); font-weight:700; }
.profile-photo-zoom-row input { width:100%; accent-color:var(--terracotta); cursor:pointer; }
.profile-photo-reset { margin-top:11px; }
.profile-photo-controls > p {
margin:16px 0 0; color:var(--warm-gray); font-size:11.5px; line-height:1.55;
}
.profile-photo-actions { display:flex; align-items:center; gap:9px; margin-top:22px; }
.profile-photo-actions .btn { flex:1; white-space:nowrap; }
.profile-photo-status {
min-height:17px; margin-top:11px; color:var(--warm-gray); font-size:11px; line-height:1.5;
}
.profile-photo-status.is-success { color:var(--green); font-weight:700; }
.profile-personal-divider { height:1px; margin:24px 0; background:var(--border); }
@media (max-width:700px) {
.profile-photo-card { padding:18px 15px !important; }
.profile-photo-heading { align-items:flex-start; }
.profile-photo-format { display:none; }
.profile-photo-picker { grid-template-columns:1fr; }
.profile-photo-dropzone { min-height:150px; flex-direction:column; text-align:center; padding:20px 14px; }
.profile-photo-drop-copy { flex:0 0 auto; }
.profile-photo-choose { width:100%; max-width:220px; box-sizing:border-box; }
.profile-photo-crop-layout { grid-template-columns:1fr; gap:24px; }
.profile-photo-editor { padding:16px 13px; }
.profile-photo-editor-head { align-items:flex-start; flex-direction:column; }
.profile-photo-actions { flex-direction:column-reverse; }
.profile-photo-actions .btn { width:100%; }
}
/* One-shot sign-in details after a moderator is created or reset. */
.credential-card {
padding:0; margin-bottom:20px; overflow:hidden;
border:1px solid rgba(176,112,16,.3); box-shadow:0 8px 24px rgba(176,112,16,.09);
}
.credential-card:hover { transform:none; box-shadow:0 8px 24px rgba(176,112,16,.09); }
.credential-head {
display:flex; align-items:flex-start; gap:13px; flex-wrap:wrap; padding:16px 20px;
background:linear-gradient(135deg,#FFF8E8 0%,#FFFDF8 70%); border-bottom:1px solid rgba(176,112,16,.18);
}
.credential-key {
width:38px; height:38px; border-radius:12px; background:#F2A91D; flex-shrink:0;
display:flex; align-items:center; justify-content:center;
}
.credential-rows { padding:6px 20px 16px; }
.credential-row {
display:flex; align-items:center; gap:12px; flex-wrap:wrap;
padding:11px 0; border-bottom:1px solid var(--border);
}
.credential-row:last-child { border-bottom:none; }
.credential-label { font-size:12px; font-weight:700; color:var(--warm-gray); width:74px; flex-shrink:0; }
.credential-value {
flex:1; min-width:170px; font-family:ui-monospace,Menlo,Consolas,monospace;
font-size:14.5px; font-weight:600; color:var(--midnight); letter-spacing:.4px;
background:var(--light-gray); border-radius:9px; padding:8px 12px;
overflow-wrap:anywhere; user-select:all;
}
@media (max-width:520px) {
.credential-label { width:100%; }
.credential-row .btn { width:100%; }
}
/* Permission toggle — a checkbox styled as a selectable card. */
.perm-toggle {
display:flex; align-items:flex-start; gap:10px; cursor:pointer;
padding:11px 13px; border:1.5px solid var(--border); border-radius:12px;
background:#fff; transition:border-color .16s, background .16s;
}
.perm-toggle:hover { border-color:var(--warm-gray); }
.perm-toggle.is-on { border-color:var(--terracotta); background:rgba(216,81,81,.045); }
.perm-toggle input[type=checkbox] { margin:2px 0 0; width:17px; height:17px; flex-shrink:0; accent-color:var(--terracotta); cursor:pointer; }
.perm-toggle-icon { flex-shrink:0; margin-top:1px; line-height:0; color:var(--warm-gray); }
.perm-toggle.is-on .perm-toggle-icon { color:var(--terracotta); }
.perm-toggle-copy { min-width:0; line-height:1.4; }
.perm-toggle-copy strong { display:block; font-size:13px; color:var(--midnight); }
.perm-toggle-copy small { display:block; font-size:11.5px; color:var(--warm-gray); margin-top:2px; }
@media (max-width:640px) {
.perm-toggle { padding:12px; }
}
/* Cancel is a plain destructive action — the refund amount is confirmed in the
dialog, and a refused cancellation explains itself on the disabled button. */
.booking-cancel { color:var(--red); }
.booking-cancel:hover:not(:disabled) { color:var(--red); background:rgba(220,38,38,.06); }
.booking-cancel:disabled { color:var(--warm-gray); }
.verify-banner {
display:flex; align-items:center; gap:13px; flex-wrap:wrap;
padding:14px 18px; margin-bottom:20px; border-radius:16px;
background:linear-gradient(135deg,#FFF8E8 0%,#FFFDF8 70%);
border:1px solid rgba(176,112,16,.3);
}
.verify-banner-icon {
width:36px; height:36px; border-radius:11px; flex-shrink:0;
display:flex; align-items:center; justify-content:center; background:#F2A91D;
}
/* Cancellation reasons — picked by the traveler, reviewed by staff. */
.cancel-refund-note {
padding:11px 14px; border-radius:12px; margin-bottom:18px;
background:#FFF8E4; border:1px solid #F0DCA6; color:#8A5A00;
font-size:13px; line-height:1.6;
}
.cancel-refund-note-muted { background:var(--light-gray); border-color:var(--border); color:var(--warm-gray); }
.cancel-reasons { display:grid; gap:8px; }
.cancel-reason {
display:flex; align-items:flex-start; gap:10px; cursor:pointer;
padding:10px 12px; border:1.5px solid var(--border); border-radius:12px;
background:#fff; transition:border-color .15s, background .15s;
}
.cancel-reason:hover { border-color:var(--warm-gray); }
.cancel-reason:has(input:checked) { border-color:var(--terracotta); background:rgba(216,81,81,.045); }
.cancel-reason input { margin:2px 0 0; width:16px; height:16px; flex-shrink:0; accent-color:var(--terracotta); cursor:pointer; }
.cancel-reason-copy { min-width:0; line-height:1.4; }
.cancel-reason-copy strong { display:block; font-size:13.5px; color:var(--midnight); }
.cancel-reason-copy small { display:block; font-size:11.5px; color:var(--warm-gray); margin-top:2px; }
.cancel-reason-pill {
display:inline-block; padding:3px 11px; border-radius:999px;
background:var(--light-gray); color:var(--charcoal);
font-size:11.5px; font-weight:800; white-space:nowrap;
}
.cancel-reason-pill.is-flagged { background:#FEE2E2; color:#991B1B; }
/* Time slots on the booking form, with live seats-left state. */
.slot-option { cursor:pointer; display:inline-flex; }
.slot-chip {
display:inline-flex; flex-direction:column; align-items:center; gap:3px;
padding:12px 18px; border-radius:14px; border:2px solid var(--border);
background:#fff; transition:border-color .15s, background .15s, opacity .15s;
}
.slot-chip-time { font-size:15px; font-weight:700; color:var(--midnight); }
.slot-chip-left { font-size:11px; color:var(--warm-gray); white-space:nowrap; }
.slot-option:hover:not(.is-full) .slot-chip { border-color:var(--warm-gray); }
.slot-option.is-selected .slot-chip { border-color:var(--terracotta); background:rgba(216,81,81,.05); }
.slot-option.is-selected .slot-chip-left { color:var(--terracotta); font-weight:700; }
.slot-option.is-full { cursor:not-allowed; }
.slot-option.is-full .slot-chip { opacity:.45; background:var(--light-gray); }
.slot-option.is-full .slot-chip-left { color:var(--red); }
.slot-option.is-past .slot-chip { opacity:.55; }
.slot-option.is-past .slot-chip-left { color:var(--warm-gray); }
.booking-time-alert {
display:flex; align-items:center; gap:12px; margin:-2px 0 15px; padding:13px 14px;
border:1px solid rgba(217,119,6,.28); border-radius:14px;
color:#78350F; background:linear-gradient(135deg,#FFF7E6 0%,#FFFBF2 100%);
box-shadow:0 7px 22px rgba(146,64,14,.08); animation:fadeIn .22s ease;
}
.booking-time-alert-icon {
width:42px; height:42px; flex:0 0 42px; border-radius:13px;
display:flex; align-items:center; justify-content:center;
color:#B45309; background:#FFEDD5; box-shadow:inset 0 0 0 1px rgba(217,119,6,.12);
}
.booking-time-alert-copy { min-width:0; flex:1; display:flex; flex-direction:column; }
.booking-time-alert-copy strong { color:#78350F; font-size:13.5px; line-height:1.35; }
.booking-time-alert-copy > span { margin-top:3px; color:#92400E; font-size:11.5px; line-height:1.5; }
.booking-time-alert-action {
flex-shrink:0; padding:8px 11px; border:1px solid rgba(180,83,9,.25); border-radius:10px;
color:#92400E; background:#fff; cursor:pointer; font:700 11px 'Outfit',sans-serif;
transition:border-color .15s,background .15s,transform .15s;
}
.booking-time-alert-action:hover { border-color:#D97706; background:#FFFDF8; transform:translateY(-1px); }
@media (max-width:640px) {
.slot-option, .slot-chip { width:100%; }
.slot-chip { flex-direction:row; justify-content:space-between; }
.booking-time-alert { align-items:flex-start; flex-wrap:wrap; }
.booking-time-alert-copy { min-width:calc(100% - 58px); }
.booking-time-alert-action { width:100%; }
}
/* Test/production switch and the demo tooling it gates. */
.mode-card { padding:0; margin-bottom:18px; overflow:hidden; border:1px solid var(--border); }
.mode-card:hover { transform:none; }
.mode-card.is-test { border-color:rgba(176,112,16,.3); box-shadow:0 8px 24px rgba(176,112,16,.08); }
.mode-head { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:16px 20px; }
.mode-card.is-test .mode-head {
background:linear-gradient(135deg,#FFF8E8 0%,#FFFDF8 70%);
border-bottom:1px solid rgba(176,112,16,.18);
}
.mode-pill {
flex-shrink:0; padding:3px 11px; border-radius:999px;
font-size:10.5px; font-weight:800; letter-spacing:.5px;
background:rgba(22,163,74,.12); color:var(--green);
}
.mode-pill.is-test { background:#B07010; color:#fff; }
.mode-body { padding:16px 20px; }
@media (max-width:640px) {
.mode-head form, .mode-head .btn { width:100%; }
}
/* The host's own cancellation choice, shown before anyone books. */
.policy-card {
background:#fff; border:1px solid var(--border); border-radius:16px;
padding:18px 20px; margin-bottom:24px;
}
.policy-card-head {
display:flex; align-items:center; justify-content:space-between;
gap:12px; flex-wrap:wrap; margin-bottom:10px;
}
.policy-card-title { font-family:'Cormorant Garamond',serif; font-size:20px; font-weight:700; }
.policy-card-badge {
flex-shrink:0; padding:4px 12px; border-radius:999px;
background:rgba(22,163,74,.1); color:var(--green);
font-size:11px; font-weight:800; letter-spacing:.4px;
}
.policy-card-line { font-size:13.5px; color:var(--warm-gray); line-height:1.8; }
/* What the host actually takes home, and the cut that came out of it. */
.payout-breakdown {
margin-top:11px; padding:12px 14px; border-radius:12px;
background:var(--light-gray); font-size:13px;
}
.payout-breakdown-title { font-weight:700; color:var(--midnight); margin-bottom:9px; }
.payout-breakdown-row {
display:flex; justify-content:space-between; align-items:baseline; gap:12px;
color:var(--charcoal); line-height:1.7;
}
.payout-breakdown-fee { color:var(--warm-gray); }
.payout-breakdown-total {
margin-top:8px; padding-top:8px; border-top:1px solid var(--border);
font-weight:800; color:var(--midnight);
}
.booking-card-host-actions {
display:flex; align-items:center; gap:8px; flex-wrap:wrap;
margin-top:12px; padding-top:12px; border-top:1px solid var(--border);
}
.booking-card-host-actions .badge { margin-right:auto; }
.booking-card-host-actions .booking-decline {
color:var(--red); border-color:rgba(220,38,38,.3);
}
@media (max-width:640px) {
.booking-card { grid-template-columns:62px minmax(0,1fr); gap:10px; padding:12px; }
.booking-card-image { width:62px; height:72px; border-radius:10px; }
.booking-card-head { gap:7px; }
.booking-card-title { font-size:13.5px; }
.booking-card-status { padding:3px 8px; font-size:9.5px; }
.booking-card-meta { font-size:11.5px; line-height:1.55; }
.booking-card-footer { align-items:flex-start; flex-direction:column; gap:9px; }
.booking-card-quick-actions { width:100%; margin-left:0; }
.booking-card-quick-actions .btn { flex:1; justify-content:center; }
.booking-card-host-actions { align-items:stretch; }
.booking-card-host-actions .badge { width:100%; margin-right:0; box-sizing:border-box; text-align:center; }
.booking-card-host-actions form { flex:1; }
.booking-card-host-actions form .btn { width:100%; justify-content:center; }
}
/* Review item */
.review-item { padding:20px 0; border-bottom:1px solid var(--border); }
.review-item:last-child { border-bottom:none; }
/* Overlay fullscreen */
.fullscreen { position:fixed; inset:0; z-index:500; background:#fff; overflow-y:auto; -webkit-overflow-scrolling:touch; }
@media (max-width: 640px) {
.nav-inner { height:56px; padding:0 10px; gap:8px; overflow:hidden; }
.nav-inner > button:first-child { min-width:0; flex:1 1 auto; justify-content:flex-start; overflow:hidden; }
.nav-inner > button:first-child svg { width:132px; flex-shrink:1; }
.nav-inner > div:last-child { flex:0 0 auto; gap:2px !important; }
.nav-inner .btn-ghost { padding:8px; font-size:0; }
.nav-inner .btn-ghost svg { margin:0; }
.page { max-width:100%; padding-left:16px; padding-right:16px; overflow-x:hidden; }
.host-dash-header { flex-wrap:wrap !important; align-items:flex-start !important; overflow:visible !important; margin-bottom:16px !important; }
.host-dash-header > div:first-child { flex-basis:100%; }
.host-dash-header .section-sub { margin-bottom:0; }
.host-dash-actions { width:100%; display:flex; justify-content:flex-start; }
.tab-bar { margin-left:-16px; margin-right:-16px; padding:0 16px; border-radius:0 !important; scrollbar-width:none; }
.tab-bar::-webkit-scrollbar { display:none; }
.tab { padding:12px 14px; font-size:12px !important; }
.host-service-card { padding:12px !important; border-radius:14px !important; }
.host-service-card-main { gap:10px !important; align-items:flex-start; }
.host-service-thumb { width:54px !important; height:64px !important; border-radius:10px !important; }
.host-service-title { font-size:14px !important; }
.host-service-meta { font-size:12px !important; line-height:1.35; white-space:normal; }
.host-service-actions { display:grid !important; grid-template-columns:1fr 1fr; gap:8px !important; }
.host-service-actions .btn { min-width:0; padding-left:8px; padding-right:8px; }
.host-service-actions .btn:last-child { grid-column:1 / -1; }
.stat-card { padding:14px; }
.stat-num { font-size:30px; }
}
@keyframes fall{0%{transform:translateY(-30px) rotate(0deg);opacity:1}100%{transform:translateY(110vh) rotate(540deg);opacity:0}}
/* ═══════════════════════════════════════════════════════════════════════════
Additions for the server-rendered version
(everything above this line is the original GLOBAL_CSS, unchanged)
═══════════════════════════════════════════════════════════════════════════ */
/* React mounted modals only while open, so they never existed in the DOM when
closed. Here they are always rendered and toggled with the `hidden`
attribute — but `hidden` comes from the user-agent stylesheet, which any
author `display` rule outranks. Without this, `.modal-backdrop{display:flex}`
wins and every modal shows on page load. */
[hidden] { display: none !important; }
/* ── File drop zones ─────────────────────────────────────────────────────────
The native is visually hidden inside the label, so the
whole card is the click target and there is no grey "Choose File" button. */
.upload-zone {
position: relative;
display: block;
border: 1.5px dashed var(--border);
border-radius: 14px;
background: #fff;
padding: 18px 16px;
cursor: pointer;
transition: border-color .15s, background .15s;
}
.upload-zone:hover { border-color: var(--terracotta); background: rgba(216,81,81,.03); }
.upload-zone.is-dragging { border-color: var(--terracotta); background: rgba(216,81,81,.07); }
.upload-zone.is-filled { border-style: solid; border-color: var(--green); background: rgba(22,163,74,.04); }
.upload-zone.is-invalid { border-color: var(--red); background: rgba(220,38,38,.04); }
.upload-zone-empty {
display: flex; flex-direction: column; align-items: center;
justify-content: center; gap: 4px; text-align: center; pointer-events: none;
}
.upload-zone-filled { display: flex; align-items: center; gap: 12px; }
.upload-zone-filled[hidden] { display: none; }
.upload-zone-filled img {
width: 52px; height: 52px; object-fit: cover; border-radius: 10px; display: block;
}
.upload-zone-filled .doc-chip {
width: 52px; height: 52px; border-radius: 10px; display: flex;
align-items: center; justify-content: center; font-size: 22px;
background: var(--light-gray);
}
/* Service photo uploader */
.service-photo-count {
flex-shrink:0; border-radius:999px; padding:5px 10px;
color:var(--terracotta); background:rgba(216,81,81,.08);
font-size:10.5px; font-weight:800;
}
.service-photo-existing-grid,
.service-photo-preview-grid {
display:grid; grid-template-columns:repeat(auto-fill,minmax(125px,1fr));
gap:10px; margin-bottom:10px;
}
.service-photo-existing {
position:relative; display:block; aspect-ratio:4/3; overflow:hidden;
border:2px solid transparent; border-radius:13px; cursor:pointer;
background:var(--light-gray); transition:.18s ease;
}
.service-photo-existing:hover { border-color:rgba(216,81,81,.55); }
.service-photo-existing > img { width:100%; height:100%; object-fit:cover; display:block; }
.service-photo-cover-label {
position:absolute; left:7px; bottom:7px; padding:4px 7px; border-radius:7px;
color:#fff; background:rgba(17,24,39,.86);
font-size:9.5px; line-height:1; font-weight:800;
}
.service-photo-remove {
position:absolute; top:7px; right:7px; width:29px; height:29px;
border-radius:9px; color:#fff; background:rgba(17,24,39,.85);
display:flex; align-items:center; justify-content:center;
}
.service-photo-existing.is-removed { border-color:rgba(220,38,38,.7); }
.service-photo-existing.is-removed > img { opacity:.28; filter:grayscale(1); }
.service-photo-existing.is-removed .service-photo-cover-label { background:var(--red); }
.service-photo-existing.is-removed .service-photo-remove { background:var(--red); }
.service-photo-existing-help {
margin:1px 0 14px; color:var(--warm-gray); font-size:11px;
}
.service-photo-uploader { margin-top:4px; }
/* The wizard covers the viewport, so the page under it must stop scrolling —
otherwise the sticky blurred nav behind keeps recompositing while you type. */
body:has(.service-wizard-backdrop) { overflow:hidden; }
/* No backdrop-filter anywhere in this wizard.
It used to stack four blur layers — the overlay plus three sticky bars inside
a scrolling container — so every scroll tick and every caret blink forced the
compositor to re-blur the whole modal. Typing lagged and the sticky bars
visibly jittered. Opaque backgrounds look the same here and cost nothing. */
.service-wizard-backdrop {
position:fixed; inset:0; z-index:12000; padding:24px;
display:flex; align-items:center; justify-content:center;
background:rgba(17,24,39,.72);
}
.service-wizard-modal {
width:min(900px,100%); max-height:calc(100dvh - 48px); overflow-y:auto;
padding:0 24px 24px; box-sizing:border-box; border-radius:22px;
background:#F8F6F3; box-shadow:0 28px 90px rgba(17,24,39,.3);
overscroll-behavior:contain;
/* Keep repaints inside the modal instead of the whole page. */
contain:paint;
}
.service-wizard-head {
position:sticky; top:0; z-index:5; margin:0 -24px !important; padding:20px 24px 15px;
display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
background:#F8F6F3;
}
.service-wizard-close {
width:38px; height:38px; flex:0 0 38px; border-radius:11px;
display:flex; align-items:center; justify-content:center; color:var(--charcoal);
border:1px solid var(--border); background:#fff; text-decoration:none;
}
.service-wizard-tabs {
position:sticky; top:82px; z-index:4; margin:0 -24px 18px; padding:0 24px 14px;
display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
background:#F8F6F3;
border-bottom:1px solid var(--border);
}
.service-wizard-tab {
min-width:0; padding:9px 10px; border:1px solid var(--border); border-radius:11px;
display:flex; align-items:center; justify-content:center; gap:7px;
color:var(--warm-gray); background:#fff; cursor:pointer;
font:600 12px 'Outfit',sans-serif;
}
.service-wizard-tab > span {
width:21px; height:21px; flex:0 0 21px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
color:var(--warm-gray); background:var(--light-gray); font-size:10px; font-weight:800;
}
.service-wizard-tab.active { color:var(--terracotta); border-color:rgba(216,81,81,.45); background:#FFF8F7; }
.service-wizard-tab.active > span { color:#fff; background:var(--terracotta); }
.service-wizard-tab.complete > span { color:#fff; background:var(--green); }
.service-wizard-actions {
position:sticky; bottom:-24px; z-index:4; margin:4px -24px -24px !important;
padding:14px 24px max(14px,env(safe-area-inset-bottom));
background:#fff;
border-top:1px solid var(--border);
}
@media (max-width:640px) {
.admin-mail-grid { grid-template-columns:1fr !important; }
.service-wizard-backdrop { padding:0; align-items:stretch; }
.service-wizard-modal { width:100%; max-height:100dvh; min-height:100dvh; padding:0 15px 20px; border-radius:0; }
.service-wizard-head { margin:0 -15px !important; padding:14px 15px 11px; }
.service-wizard-head .section-title { font-size:25px; }
.service-wizard-tabs { top:69px; margin:0 -15px 14px; padding:0 15px 11px; gap:5px; }
.service-wizard-tab { padding:8px 4px; font-size:10px; gap:4px; flex-direction:column; }
.service-wizard-tab > span { width:19px; height:19px; flex-basis:19px; }
.service-wizard-modal .card { padding:18px 15px !important; border-radius:15px; }
.service-wizard-modal [style*="grid-template-columns:1fr 1fr"] { grid-template-columns:1fr !important; }
.service-wizard-actions { bottom:-20px; margin:4px -15px -20px !important; padding-left:15px; padding-right:15px; }
.service-wizard-actions .btn { flex:1; padding-left:10px; padding-right:10px; }
.service-wizard-actions > a:first-child { display:none; }
}
.service-photo-dropzone {
min-height:132px; box-sizing:border-box; padding:22px;
border:2px dashed #D9D2CC; border-radius:16px; background:#FCFBFA;
display:flex; align-items:center; justify-content:center; gap:14px;
cursor:pointer; transition:border-color .17s,background .17s,transform .17s;
}
.service-photo-dropzone:hover,
.service-photo-dropzone.is-dragging {
border-color:var(--terracotta); background:rgba(216,81,81,.045);
}
.service-photo-dropzone.is-invalid {
border-color:var(--red); background:rgba(220,38,38,.045);
}
.meeting-map {
width:100%; height:310px; margin-top:10px; border:1px solid var(--border);
border-radius:14px; overflow:hidden; background:#F2F0ED;
}
.meeting-map-actions {
display:flex; align-items:center; justify-content:space-between; gap:10px;
margin-top:7px; color:var(--warm-gray); font-size:11.5px; line-height:1.5;
}
.meeting-map-unavailable {
margin-top:8px; padding:10px 12px; border-radius:10px;
border:1px solid rgba(232,160,32,.3); background:rgba(232,160,32,.08);
color:#8A5A10; font-size:11.5px; line-height:1.55;
}
/* Google appends the Places dropdown to . Keep it above the service
wizard (z-index 12000), otherwise autocomplete works but looks empty. */
.pac-container {
z-index:13050 !important; border:1px solid var(--border); border-radius:12px;
margin-top:4px; box-shadow:0 14px 35px rgba(17,24,39,.16);
font-family:'Outfit',sans-serif;
}
.pac-item { padding:9px 12px; cursor:pointer; font-family:'Outfit',sans-serif; }
.pac-item:hover, .pac-item-selected { background:#FFF5F3; }
@media (max-width:640px) {
.meeting-map { height:260px; }
.meeting-map-actions { align-items:flex-start; flex-direction:column; }
}
.service-photo-dropzone.is-dragging { transform:scale(.995); }
.service-photo-upload-icon {
width:48px; height:48px; border-radius:14px; flex:0 0 48px;
color:var(--terracotta); background:rgba(216,81,81,.1);
display:flex; align-items:center; justify-content:center;
}
.service-photo-drop-copy { flex:1; min-width:0; display:flex; flex-direction:column; }
.service-photo-drop-copy strong { color:var(--midnight); font-size:14px; }
.service-photo-drop-copy small { color:var(--warm-gray); font-size:11.5px; margin-top:3px; }
.service-photo-browse { flex-shrink:0; pointer-events:none; }
.service-photo-rules {
display:flex; flex-wrap:wrap; gap:6px 16px; padding:8px 3px 2px;
color:var(--warm-gray); font-size:10.5px;
}
.service-photo-rules span::before { content:"✓"; color:var(--green); font-weight:800; margin-right:5px; }
.service-photo-preview-grid { margin:12px 0 0; }
.service-photo-preview {
position:relative; overflow:hidden; min-width:0; border:1px solid var(--border);
border-radius:13px; background:#fff; box-shadow:0 2px 9px rgba(17,24,39,.05);
}
.service-photo-preview > img {
width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
}
.service-photo-preview-meta {
min-width:0; padding:7px 9px 8px; display:flex; flex-direction:column;
}
.service-photo-preview-meta strong {
color:var(--charcoal); font-size:10.5px; white-space:nowrap;
overflow:hidden; text-overflow:ellipsis;
}
.service-photo-preview-meta small { color:var(--warm-gray); font-size:9.5px; margin-top:2px; }
.service-photo-preview-remove {
position:absolute; top:7px; right:7px; width:28px; height:28px;
border:0; border-radius:9px; color:#fff; background:rgba(17,24,39,.72);
font-size:20px; line-height:1; cursor:pointer; backdrop-filter:blur(4px);
}
.service-photo-preview-remove:hover { background:var(--red); }
@media (max-width:640px) {
.service-photo-existing-grid,
.service-photo-preview-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.service-photo-dropzone { min-height:170px; flex-direction:column; text-align:center; padding:20px 14px; }
.service-photo-drop-copy { flex:0 0 auto; }
.service-photo-browse { width:100%; max-width:220px; box-sizing:border-box; }
.service-photo-rules { justify-content:center; }
}