/* ====================================================
   PRIMLY — Main Stylesheet
   Design tokens ported from primly-app.html
   ==================================================== */

/* ── CSS Variables ─────────────────────────────────── */
:root {
   --blue-dark:#023e58;  
  --green-deep:  #023e58;
  --green-mid:   #1a7a9a;
  --green-light: #219ebc;
  --gold:        #C9933A;
  --gold-light:  #E8B96A;
  --cream:       #FAF6EF;
  --cream-dark:  #F0EAE0;
  --white:       #FFFFFF;
  --text-dark:   #1C1C1C;
  --text-mid:    #4A4A4A;
  --text-muted:  #7A7A7A;
  --border:      #DDD5C8;
  --red:         #C0392B;
  --shadow-sm:   0 2px 12px rgba(2,62,88,0.08);
  --shadow-md:   0 6px 30px rgba(2,62,88,0.14);
  --shadow-lg:   0 16px 60px rgba(2,62,88,0.18);
  --radius:      14px;
  --radius-sm:   8px;
  --transition:  0.28s cubic-bezier(0.4,0,0.2,1);
}

/* ── Reset ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: 'DM Sans', sans-serif; background: var(--cream); color: var(--text-dark); min-height: 100vh; overflow-x: hidden; }
img { max-width: 100%; }
a { text-decoration: none; color: inherit; }
input, textarea, select, button { font-family: inherit; outline: none; border: none; }
button { cursor: pointer; }

/* ── Beta banner ──────────────────────────────────── */
.beta-banner { background: linear-gradient(90deg,var(--gold),var(--gold-light),var(--gold)); background-size:200% 100%; animation: shimmer 3s infinite; color:var(--green-deep); text-align:center; padding:7px 16px; font-size:0.75rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; position:sticky; top:0; z-index:1000; width:100%; }
.beta-banner span { background:rgba(255,255,255,0.35); padding:2px 10px; border-radius:20px; margin-right:6px; }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ── Top nav ──────────────────────────────────────── */
.topnav { background:var(--white); border-bottom:1px solid var(--border); padding:0 16px; height:60px; display:flex; align-items:center; justify-content:space-between; box-shadow:var(--shadow-sm); position:sticky; top:28px; z-index:100; }
.logo-text { font-family:'Playfair Display',serif; font-size:1.4rem; font-weight:700; color:var(--green-deep); }
.logo-text-dark { font-family:'Playfair Display',serif; font-size:1.4rem; font-weight:700; color:var(--white); }
.nav-actions { display:flex; align-items:center; gap:10px; }
.nav-icon-btn { position:relative; width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--cream); border:1px solid var(--border); font-size:1rem; cursor:pointer; }
.notif-badge { position:absolute; top:-2px; right:-2px; background:var(--red); color:#fff; font-size:0.6rem; font-weight:700; padding:1px 5px; border-radius:99px; min-width:16px; text-align:center; }
.nav-avatar, .avatar-img, .avatar-initials { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--gold); color:#fff; font-weight:700; font-size:0.85rem; cursor:pointer; overflow:hidden; }
.avatar-img { object-fit:cover; }

/* ── Main wrap ────────────────────────────────────── */
.main-wrap { min-height: calc(100vh - 60px - 68px); padding-bottom: 0; }

/* ── Bottom nav ───────────────────────────────────── */
.bottom-nav { position:fixed; bottom:0; left:0; right:0; height:68px; background:var(--white); border-top:1px solid var(--border); display:flex; align-items:stretch; z-index:200; box-shadow:0 -4px 20px rgba(2,62,88,0.08); }
.bn-item { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; cursor:pointer; color:var(--text-muted); font-size:0.68rem; font-weight:500; transition:color var(--transition); padding-top:4px; border-top:2px solid transparent; }
.bn-item.active { color:var(--green-deep); border-top-color:var(--green-deep); }
.bn-item:hover { color:var(--green-mid); }
.bn-icon { font-size:1.2rem; }
.bn-label { font-size:0.65rem; letter-spacing:0.02em; }

/* ── Buttons ──────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 20px; border-radius:50px; font-size:0.875rem; font-weight:600; transition:all var(--transition); cursor:pointer; }
.btn-primary { background:var(--green-deep); color:var(--white); }
.btn-primary:hover { background:var(--green-mid); transform:translateY(-1px); box-shadow:var(--shadow-md); }
.btn-secondary { background:transparent; color:var(--green-deep); border:2px solid var(--green-deep); }
.btn-secondary:hover { background:var(--green-deep); color:var(--white); }
.btn-gold { background:var(--gold); color:var(--white); }
.btn-gold:hover { background:var(--gold-light); }
.btn-outline-white { background:transparent; color:var(--white); border:2px solid rgba(255,255,255,0.6); }
.btn-outline-white:hover { background:rgba(255,255,255,0.15); }
.btn-sm { padding:7px 16px; font-size:0.8rem; }
.btn-lg { padding:14px 28px; font-size:1rem; }
.btn-full { width:100%; }

/* ── Auth pages ───────────────────────────────────── */
.auth-page { background:var(--green-deep); min-height:100vh; display:flex; flex-direction:column; }
.auth-topbar { padding:16px 20px; display:flex; align-items:center; justify-content:space-between; }
.auth-hero { position:relative; overflow:hidden; padding:40px 20px 60px; text-align:center; flex-shrink:0; }
.auth-hero::before { content:''; position:absolute; inset:0; background:url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=1200&q=80') center/cover no-repeat; opacity:0.15; }
.auth-hero-content { position:relative; z-index:1; }
.auth-hero h1 { font-family:'Playfair Display',serif; font-size:clamp(1.8rem,6vw,2.6rem); color:var(--white); line-height:1.2; margin-bottom:8px; }
.auth-hero p { color:rgba(255,255,255,0.7); font-size:0.95rem; }
.auth-card { background:var(--white); border-radius:28px 28px 0 0; flex:1; padding:28px 20px 40px; box-shadow:0 -8px 40px rgba(0,0,0,0.25); overflow-y:auto; }
@media(min-width:600px) { .auth-page { align-items:center; justify-content:center; } .auth-hero{display:none;} .auth-card{border-radius:20px;flex:none;width:100%;max-width:440px;padding:36px;margin:20px;} }
.auth-card h2 { font-family:'Playfair Display',serif; font-size:1.6rem; color:var(--green-deep); margin-bottom:4px; }
.auth-subtitle { color:var(--text-muted); font-size:0.875rem; margin-bottom:24px; }
.auth-subtitle a { color:var(--green-mid); font-weight:600; }
.auth-link-row { text-align:center; margin-top:18px; font-size:0.875rem; color:var(--text-muted); }
.auth-link-row a { color:var(--green-mid); font-weight:600; }
.divider { display:flex; align-items:center; gap:12px; margin:20px 0; color:var(--text-muted); font-size:0.8rem; }
.divider::before, .divider::after { content:''; flex:1; height:1px; background:var(--border); }
.type-toggle { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:20px; background:var(--cream-dark); border-radius:var(--radius-sm); padding:4px; }
.type-toggle-btn { padding:10px; border-radius:6px; font-size:0.875rem; font-weight:600; color:var(--text-muted); background:transparent; transition:all var(--transition); }
.type-toggle-btn.active { background:var(--white); color:var(--green-deep); box-shadow:var(--shadow-sm); }

/* ── Forms ────────────────────────────────────────── */
.form-group { margin-bottom:16px; }
.form-group label { display:block; font-size:0.8rem; font-weight:600; color:var(--text-mid); margin-bottom:6px; letter-spacing:0.03em; text-transform:uppercase; }
.form-control { width:100%; padding:13px 16px; border:1.5px solid var(--border); border-radius:var(--radius-sm); font-size:0.925rem; color:var(--text-dark); background:var(--cream); transition:border-color var(--transition),box-shadow var(--transition); }
.form-control:focus { border-color:var(--green-light); box-shadow:0 0 0 3px rgba(33,158,188,0.12); background:var(--white); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.input-icon-wrap { position:relative; }
.input-icon-wrap .form-control { padding-left:42px; }
.input-icon { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:1rem; }
.toggle-pass { position:absolute; right:13px; top:50%; transform:translateY(-50%); background:none; color:var(--text-muted); font-size:1rem; cursor:pointer; padding:0; }
.alert { border-radius:var(--radius-sm); padding:12px 16px; margin-bottom:16px; font-size:0.875rem; }
.alert-success { background:rgba(33,158,188,0.1); border:1.5px solid var(--green-light); color:var(--green-mid); }
.alert-error   { background:rgba(192,57,43,0.08); border:1.5px solid var(--red); color:var(--red); }
.alert-info    { background:rgba(201,147,58,0.1); border:1.5px solid var(--gold); color:var(--gold); }

/* ── Flash toast ──────────────────────────────────── */
.flash-toast { position:fixed; top:90px; left:50%; transform:translateX(-50%); background:var(--green-deep); color:#fff; padding:12px 24px; border-radius:50px; font-size:0.875rem; font-weight:600; z-index:3000; box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:10px; max-width:90vw; }
.flash-toast.flash-error { background:var(--red); }
.flash-toast.flash-info  { background:var(--gold); color:var(--green-deep); }
.flash-close { background:none; color:inherit; font-size:1.1rem; opacity:0.7; margin-left:8px; }

/* ── Section layout ───────────────────────────────── */
.section-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.section-title { font-family:'Playfair Display',serif; font-size:1.15rem; font-weight:700; color:var(--green-deep); }
.section-link { font-size:0.8rem; color:var(--green-mid); font-weight:600; }

/* ── Destination cards ────────────────────────────── */
.dest-scroll { display:flex; gap:12px; overflow-x:auto; padding-bottom:8px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.dest-scroll::-webkit-scrollbar { display:none; }
.dest-card { flex-shrink:0; width:160px; border-radius:var(--radius); overflow:hidden; cursor:pointer; box-shadow:var(--shadow-sm); transition:transform var(--transition); }
.dest-card:hover { transform:translateY(-2px); }
.dest-img-wrap { position:relative; height:120px; }
.dest-img { width:100%; height:100%; object-fit:cover; }
.dest-img-placeholder { width:100%; height:100%; background:linear-gradient(135deg,var(--green-deep),var(--green-mid)); display:flex; align-items:center; justify-content:center; font-size:2.5rem; }
.dest-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,0.6),transparent); display:flex; flex-direction:column; justify-content:flex-end; padding:10px; }
.dest-name { color:#fff; font-weight:700; font-size:0.875rem; }
.dest-region { color:rgba(255,255,255,0.7); font-size:0.72rem; }
.dest-rating { background:var(--white); padding:4px 10px; font-size:0.72rem; font-weight:700; color:var(--gold); }

/* ── Listing cards (horizontal scroll) ───────────── */
.listing-scroll { display:flex; gap:14px; overflow-x:auto; padding-bottom:8px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.listing-scroll::-webkit-scrollbar { display:none; }
.listing-card { flex-shrink:0; width:200px; background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden; transition:transform var(--transition); display:flex; flex-direction:column; }
.listing-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.listing-img-wrap { position:relative; height:130px; flex-shrink:0; }
.listing-img { width:100%; height:100%; object-fit:cover; }
.listing-img-placeholder { width:100%; height:100%; background:linear-gradient(135deg,var(--green-deep),var(--green-mid)); display:flex; align-items:center; justify-content:center; font-size:2.5rem; }
.listing-badge { position:absolute; top:8px; left:8px; background:rgba(2,62,88,0.85); color:#fff; font-size:0.68rem; font-weight:700; padding:3px 8px; border-radius:99px; text-transform:uppercase; }
.tour-badge { background:rgba(201,147,58,0.9); }
.transport-badge { background:rgba(33,158,188,0.9); }
.listing-info { padding:10px; flex:1; }
.listing-title { font-weight:700; font-size:0.875rem; margin-bottom:4px; color:var(--text-dark); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.listing-location { font-size:0.72rem; color:var(--text-muted); margin-bottom:6px; }
.listing-price-row { display:flex; align-items:baseline; gap:4px; margin-bottom:4px; }
.listing-price { font-weight:700; font-size:0.95rem; color:var(--green-deep); }
.listing-price-unit { font-size:0.72rem; color:var(--text-muted); }
.listing-old-price { font-size:0.72rem; color:var(--text-muted); text-decoration:line-through; }
.listing-rating { font-size:0.72rem; color:var(--gold); font-weight:600; }

/* ── Search page ──────────────────────────────────── */
.home-search-form { width:100%; }
.search-bar-home { display:flex; align-items:center; gap:10px; background:var(--white); border:1.5px solid var(--border); border-radius:50px; padding:8px 12px; box-shadow:var(--shadow-sm); }
.search-input-home { flex:1; border:none; background:none; font-size:0.9rem; color:var(--text-dark); }
.filter-chips { display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
.filter-chips::-webkit-scrollbar { display:none; }
.filter-chip { flex-shrink:0; padding:6px 16px; border-radius:50px; border:1.5px solid var(--border); background:var(--white); font-size:0.8rem; font-weight:600; color:var(--text-mid); cursor:pointer; transition:all var(--transition); }
.filter-chip.active { background:var(--green-deep); color:#fff; border-color:var(--green-deep); }
.filter-select { padding:6px 12px; border-radius:50px; border:1.5px solid var(--border); background:var(--white); font-size:0.8rem; font-weight:600; color:var(--text-mid); cursor:pointer; flex-shrink:0; }
.search-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(min-width:768px) { .search-grid { grid-template-columns:repeat(3,1fr); } }
@media(min-width:1024px) { .search-grid { grid-template-columns:repeat(4,1fr); } }
.search-card { background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden; display:flex; flex-direction:column; transition:transform var(--transition); }
.search-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.sc-img-wrap { position:relative; height:150px; }
.sc-img { width:100%; height:100%; object-fit:cover; }
.sc-img-placeholder { width:100%; height:100%; background:linear-gradient(135deg,var(--green-deep),var(--green-mid)); display:flex; align-items:center; justify-content:center; font-size:2.5rem; }
.sc-badge { position:absolute; top:8px; left:8px; background:rgba(2,62,88,0.85); color:#fff; font-size:0.65rem; font-weight:700; padding:2px 7px; border-radius:99px; text-transform:uppercase; }
.sc-body { padding:10px; flex:1; }
.sc-title { font-weight:700; font-size:0.875rem; margin-bottom:4px; }
.sc-meta { font-size:0.72rem; color:var(--text-muted); margin-bottom:6px; }
.sc-price-row { display:flex; align-items:baseline; gap:3px; margin-bottom:4px; }
.sc-price { font-weight:700; font-size:0.9rem; color:var(--green-deep); }
.sc-price-unit { font-size:0.7rem; color:var(--text-muted); }
.sc-rating { font-size:0.72rem; color:var(--gold); font-weight:600; }
.results-count { font-size:0.8rem; color:var(--text-muted); margin-bottom:14px; }
.empty-state { text-align:center; padding:60px 20px; }

/* ── Service detail page ──────────────────────────── */
.page-detail { display:flex; flex-direction:column; min-height:100vh; }
.detail-slider-wrap { position:relative; height:260px; overflow:hidden; background:var(--green-deep); flex-shrink:0; }
.detail-slider-track { display:flex; height:100%; transition:transform 0.4s cubic-bezier(0.4,0,0.2,1); }
.detail-slide-img { flex-shrink:0; width:100%; height:100%; object-fit:cover; }
.detail-img-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:5rem; }
.slider-arrow { position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,0.9); border:none; border-radius:50%; width:36px; height:36px; font-size:1.2rem; cursor:pointer; z-index:5; box-shadow:var(--shadow-sm); display:flex; align-items:center; justify-content:center; }
.slider-arrow.prev { left:10px; }
.slider-arrow.next { right:10px; }
.slider-counter { position:absolute; bottom:10px; right:14px; background:rgba(0,0,0,0.5); color:#fff; font-size:0.72rem; padding:3px 8px; border-radius:99px; }
.detail-back-btn { position:absolute; top:12px; left:12px; background:rgba(255,255,255,0.9); border:none; border-radius:50%; width:38px; height:38px; font-size:1.1rem; cursor:pointer; box-shadow:var(--shadow-sm); display:flex; align-items:center; justify-content:center; z-index:5; }
.detail-body { padding:20px; flex:1; }
.detail-type-pill { display:inline-flex; align-items:center; gap:6px; background:var(--cream-dark); color:var(--text-mid); padding:4px 12px; border-radius:99px; font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:10px; }
.detail-title { font-family:'Playfair Display',serif; font-size:1.5rem; color:var(--green-deep); margin-bottom:8px; line-height:1.3; }
.detail-meta-row { display:flex; align-items:center; gap:10px; margin-bottom:14px; font-size:0.82rem; flex-wrap:wrap; }
.detail-rating { color:var(--gold); font-weight:700; }
.detail-reviews { color:var(--text-muted); }
.detail-location { color:var(--text-muted); }
.detail-divider { border:none; border-top:1px solid var(--border); margin:18px 0; }
.detail-section-title { font-weight:700; font-size:0.85rem; color:var(--text-mid); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:12px; }
.detail-description { color:var(--text-mid); font-size:0.9rem; line-height:1.7; }
.amenities-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
@media(min-width:480px) { .amenities-grid { grid-template-columns:repeat(4,1fr); } }
.amenity-item { display:flex; align-items:center; gap:8px; font-size:0.82rem; color:var(--text-mid); }
.amenity-icon { font-size:1.1rem; width:24px; text-align:center; }
.host-card { display:flex; align-items:center; gap:14px; background:var(--cream); border-radius:var(--radius); padding:14px; }
.host-avatar { width:48px; height:48px; border-radius:50%; background:var(--gold); color:#fff; font-family:'Playfair Display',serif; font-size:1.1rem; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.host-name { font-weight:700; font-size:0.9rem; margin-bottom:2px; }
.host-since, .host-rating { font-size:0.75rem; color:var(--text-muted); }
.location-card { background:var(--white); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); }
.location-map-placeholder { background:linear-gradient(135deg,var(--green-deep),var(--green-mid)); height:100px; display:flex; align-items:center; justify-content:center; font-size:2rem; }
.location-text { padding:10px 14px; font-size:0.85rem; color:var(--text-mid); }
.review-card { background:var(--white); border-radius:var(--radius); padding:14px; margin-bottom:12px; box-shadow:var(--shadow-sm); }
.review-header { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.review-avatar { width:36px; height:36px; border-radius:50%; background:var(--green-mid); color:#fff; font-weight:700; font-size:0.8rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.review-meta { flex:1; }
.review-name { font-weight:600; font-size:0.875rem; }
.review-date { font-size:0.72rem; color:var(--text-muted); }
.review-stars { color:var(--gold); font-size:0.875rem; }
.review-text { font-size:0.85rem; color:var(--text-mid); line-height:1.6; }
.detail-book-bar { position:fixed; bottom:68px; left:0; right:0; background:var(--white); border-top:1px solid var(--border); padding:12px 20px; display:flex; align-items:center; gap:16px; box-shadow:0 -4px 20px rgba(2,62,88,0.1); z-index:150; }
.detail-price .amount { font-family:'Playfair Display',serif; font-size:1.3rem; font-weight:700; color:var(--green-deep); }
.detail-price .old-price { font-size:0.82rem; color:var(--text-muted); text-decoration:line-through; margin-left:6px; }
.detail-price .per { font-size:0.75rem; color:var(--text-muted); }

/* ── Modal overlay ────────────────────────────────── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:2000; display:none; align-items:flex-end; backdrop-filter:blur(4px); }
.modal-overlay.open { display:flex; }
@media(min-width:600px) { .modal-overlay { align-items:center; justify-content:center; } }
.modal-card { background:var(--white); border-radius:24px 24px 0 0; width:100%; max-height:90vh; overflow-y:auto; padding:24px 20px 40px; animation:slideUp 0.3s ease; }
@media(min-width:600px) { .modal-card { border-radius:20px; max-width:480px; padding:32px; } }
@keyframes slideUp { from{transform:translateY(100%)} to{transform:translateY(0)} }
.modal-handle { width:40px; height:4px; background:var(--border); border-radius:2px; margin:0 auto 20px; }
.modal-title { font-family:'Playfair Display',serif; font-size:1.3rem; color:var(--green-deep); margin-bottom:16px; }
.modal-actions-row { display:flex; gap:10px; margin-top:8px; }

/* ── Vendor / sub-pages ───────────────────────────── */
.vendor-page { display:flex; flex-direction:column; min-height:calc(100vh - 60px); }
.vendor-page-header { display:flex; align-items:center; gap:12px; padding:14px 20px; background:var(--white); border-bottom:1px solid var(--border); position:sticky; top:88px; z-index:10; }
.vendor-back-btn { background:none; font-size:1.3rem; color:var(--green-deep); padding:4px 8px; }
.vendor-page-title { font-family:'Playfair Display',serif; font-size:1.1rem; font-weight:700; color:var(--green-deep); flex:1; }
.vendor-page-body { flex:1; padding:16px 20px; }

/* ── Booking cards ────────────────────────────────── */
.booking-card { background:var(--white); border-radius:var(--radius); padding:16px; margin-bottom:12px; box-shadow:var(--shadow-sm); }
.bc-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.bc-listing { font-weight:700; font-size:0.9rem; flex:1; }
.bc-status { font-size:0.72rem; font-weight:700; padding:3px 10px; border-radius:99px; text-transform:uppercase; }
.bc-status-pending   { background:rgba(201,147,58,0.15); color:var(--gold); }
.bc-status-approved  { background:rgba(33,158,188,0.15); color:var(--green-mid); }
.bc-status-completed { background:rgba(10,158,110,0.12); color:#0a9e6e; }
.bc-status-rejected, .bc-status-cancelled_by_guest, .bc-status-cancelled_by_host { background:rgba(192,57,43,0.1); color:var(--red); }
.bc-dates, .bc-price, .bc-guest { font-size:0.82rem; color:var(--text-muted); margin-bottom:6px; }
.bc-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.tab-toggle { display:flex; gap:8px; background:var(--cream-dark); border-radius:var(--radius-sm); padding:4px; }
.tab-btn { flex:1; padding:8px; border-radius:6px; font-size:0.875rem; font-weight:600; color:var(--text-muted); background:transparent; transition:all var(--transition); }
.tab-btn.active { background:var(--white); color:var(--green-deep); box-shadow:var(--shadow-sm); }
.status-chips { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.status-chip { padding:5px 12px; border-radius:50px; border:1.5px solid var(--border); background:var(--white); font-size:0.78rem; font-weight:600; color:var(--text-mid); cursor:pointer; transition:all var(--transition); }
.status-chip.active { background:var(--green-deep); color:#fff; border-color:var(--green-deep); }

/* ── Conversation list ────────────────────────────── */
.conv-list-item { display:flex; align-items:center; gap:14px; padding:14px 20px; border-bottom:1px solid var(--border); background:var(--white); transition:background var(--transition); cursor:pointer; }
.conv-list-item:hover { background:var(--cream); }
.conv-avatar { width:48px; height:48px; border-radius:50%; background:var(--green-mid); color:#fff; font-weight:700; font-size:1rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.conv-body { flex:1; min-width:0; }
.conv-name { font-weight:700; font-size:0.9rem; margin-bottom:3px; }
.conv-listing { font-size:0.75rem; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── Chat view ────────────────────────────────────── */
.chat-page { display:flex; flex-direction:column; }
.chat-header { padding:12px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:12px; background:var(--white); position:sticky; top:88px; z-index:5; }
.chat-back { font-size:1.2rem; cursor:pointer; color:var(--green-deep); }
.chat-av { width:40px; height:40px; border-radius:50%; background:var(--green-mid); color:#fff; font-weight:700; font-size:0.9rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.chat-name { font-weight:700; font-size:0.9rem; }
.chat-listing-ref { font-size:0.75rem; color:var(--text-muted); }
.chat-messages { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; }
.msg-bubble { max-width:75%; padding:10px 14px; border-radius:16px; font-size:0.875rem; line-height:1.5; }
.msg-bubble.sent { background:var(--green-deep); color:#fff; align-self:flex-end; border-radius:16px 16px 4px 16px; }
.msg-bubble.recv { background:var(--white); color:var(--text-dark); align-self:flex-start; border-radius:16px 16px 16px 4px; box-shadow:var(--shadow-sm); }
.chat-input-row { padding:12px 16px; border-top:1px solid var(--border); display:flex; align-items:center; gap:10px; background:var(--white); }
.chat-input { flex:1; background:var(--cream); border:1.5px solid var(--border); border-radius:24px; padding:10px 16px; font-size:0.875rem; }
.chat-send { width:40px; height:40px; border-radius:50%; background:var(--green-deep); color:#fff; font-size:1rem; display:flex; align-items:center; justify-content:center; border:none; cursor:pointer; }

/* ── Profile ──────────────────────────────────────── */
.profile-wrap { padding:0 0 20px; }
.profile-cover { background:linear-gradient(135deg,var(--green-deep),var(--green-mid)); height:120px; }
.profile-avatar-wrap { padding:0 20px; position:relative; margin-top:-40px; margin-bottom:12px; }
.profile-avatar { width:80px; height:80px; border-radius:50%; background:var(--gold); color:#fff; font-family:'Playfair Display',serif; font-size:2rem; font-weight:700; display:flex; align-items:center; justify-content:center; border:4px solid var(--white); box-shadow:var(--shadow-md); }
.profile-avatar-img { width:80px; height:80px; border-radius:50%; object-fit:cover; border:4px solid var(--white); box-shadow:var(--shadow-md); }
.profile-name { padding:0 20px; font-family:'Playfair Display',serif; font-size:1.4rem; font-weight:700; color:var(--green-deep); }
.profile-type { padding:0 20px; color:var(--text-muted); font-size:0.875rem; margin-bottom:16px; }
.profile-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border-radius:var(--radius); overflow:hidden; margin:0 20px 20px; }
.stat-item { background:var(--white); padding:14px; text-align:center; }
.stat-val { font-family:'Playfair Display',serif; font-size:1.4rem; font-weight:700; color:var(--green-deep); }
.stat-label { font-size:0.72rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.04em; }
.profile-section { margin:0 20px 20px; }
.profile-section-title { font-weight:700; font-size:0.85rem; color:var(--text-mid); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:10px; }
.interests-grid { display:flex; flex-wrap:wrap; gap:8px; }
.interest-tag { display:flex; align-items:center; gap:6px; background:var(--cream-dark); border:1.5px solid var(--border); border-radius:50px; padding:6px 14px; font-size:0.8rem; font-weight:600; cursor:pointer; transition:all var(--transition); }
.interest-tag.selected { background:var(--green-deep); color:#fff; border-color:var(--green-deep); }
.menu-item { display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--border); cursor:pointer; transition:color var(--transition); }
.menu-item:last-child { border-bottom:none; }
.menu-item:hover { color:var(--green-mid); }
.mi-icon { font-size:1.2rem; width:30px; text-align:center; }
.mi-label { flex:1; font-size:0.9rem; font-weight:500; }
.mi-arrow { color:var(--text-muted); font-size:0.8rem; }

/* ── Settings ─────────────────────────────────────── */
.settings-section { background:var(--white); border-radius:var(--radius); padding:16px; margin-bottom:16px; box-shadow:var(--shadow-sm); }
.settings-section-header { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.settings-section-icon { font-size:1.2rem; }
.settings-section-title { font-weight:700; font-size:0.95rem; color:var(--green-deep); }
.settings-row { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--border); }
.settings-row:last-child { border-bottom:none; }
.settings-row-icon { font-size:1.1rem; width:28px; text-align:center; }
.settings-row-body { flex:1; }
.settings-row-label { font-size:0.875rem; font-weight:600; }
.settings-row-sub { font-size:0.75rem; color:var(--text-muted); }
.settings-row-action { flex-shrink:0; }
.settings-select { border:1.5px solid var(--border); border-radius:var(--radius-sm); padding:6px 10px; font-size:0.82rem; background:var(--cream); color:var(--text-dark); cursor:pointer; }
.toggle-switch { position:relative; display:inline-block; width:44px; height:24px; }
.toggle-switch input { opacity:0; width:0; height:0; }
.toggle-track { position:absolute; inset:0; background:var(--border); border-radius:24px; cursor:pointer; transition:background var(--transition); }
.toggle-switch input:checked + .toggle-track { background:var(--green-mid); }
.toggle-track::after { content:''; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:var(--shadow-sm); transition:transform var(--transition); }
.toggle-switch input:checked + .toggle-track::after { transform:translateX(20px); }

/* ── Host listing cards ───────────────────────────── */
.host-listing-card { display:flex; align-items:center; gap:12px; background:var(--white); border-radius:var(--radius); padding:12px; margin-bottom:12px; box-shadow:var(--shadow-sm); }
.hlc-img-wrap { width:72px; height:72px; border-radius:var(--radius-sm); overflow:hidden; flex-shrink:0; }
.hlc-img { width:100%; height:100%; object-fit:cover; }
.hlc-img-placeholder { width:100%; height:100%; background:linear-gradient(135deg,var(--green-deep),var(--green-mid)); display:flex; align-items:center; justify-content:center; font-size:1.5rem; }
.hlc-body { flex:1; min-width:0; }
.hlc-title { font-weight:700; font-size:0.875rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:3px; }
.hlc-meta { font-size:0.72rem; color:var(--text-muted); margin-bottom:3px; }
.hlc-price { font-size:0.8rem; font-weight:600; color:var(--green-deep); margin-bottom:4px; }
.hlc-status { font-size:0.68rem; font-weight:700; padding:2px 8px; border-radius:99px; display:inline-block; text-transform:uppercase; }
.hlc-status-active { background:rgba(10,158,110,0.12); color:#0a9e6e; }
.hlc-status-pending_review { background:rgba(201,147,58,0.15); color:var(--gold); }
.hlc-status-inactive, .hlc-status-suspended { background:rgba(192,57,43,0.1); color:var(--red); }
.hlc-actions { display:flex; flex-direction:column; gap:6px; flex-shrink:0; }

/* ── AI Agent ─────────────────────────────────────── */
.ai-tab-wrap { padding:20px; }
.ai-header-card { background:linear-gradient(135deg,var(--green-deep),#01526e); border-radius:var(--radius); padding:24px 20px; margin-bottom:20px; text-align:center; position:relative; overflow:hidden; }
.ai-header-card::before { content:'🌍'; font-size:8rem; position:absolute; right:-20px; top:-20px; opacity:0.1; }
.powered-by { color:var(--gold-light); font-size:0.72rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:6px; }
.ai-header-card h2 { font-family:'Playfair Display',serif; color:#fff; font-size:1.4rem; margin-bottom:8px; }
.ai-header-card p { color:rgba(255,255,255,0.7); font-size:0.85rem; line-height:1.6; }
.step-indicator { display:flex; align-items:center; gap:0; margin-bottom:24px; }
.step-dot { width:32px; height:32px; border-radius:50%; background:var(--border); color:var(--text-muted); font-size:0.8rem; font-weight:700; display:flex; align-items:center; justify-content:center; transition:all var(--transition); flex-shrink:0; }
.step-dot.active { background:var(--green-deep); color:#fff; }
.step-dot.done { background:var(--gold); color:#fff; }
.step-line { flex:1; height:2px; background:var(--border); transition:background var(--transition); }
.step-line.done { background:var(--gold); }
.ai-step { display:none; }
.ai-step.active { display:block; }
.ai-step-title { font-family:'Playfair Display',serif; font-size:1.15rem; color:var(--green-deep); margin-bottom:16px; }
.slider-wrap { margin-bottom:16px; }
.slider-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; font-size:0.875rem; }
.slider-val { font-weight:700; color:var(--green-mid); }
.slider { width:100%; height:6px; appearance:none; background:var(--cream-dark); border-radius:3px; outline:none; cursor:pointer; }
.slider::-webkit-slider-thumb { appearance:none; width:20px; height:20px; border-radius:50%; background:var(--green-deep); cursor:pointer; }
.style-btn { padding:8px 6px; border-radius:var(--radius-sm); border:1.5px solid var(--border); background:var(--white); font-size:0.8rem; font-weight:600; color:var(--text-mid); cursor:pointer; transition:all var(--transition); }
.style-btn.active { background:var(--green-deep); color:#fff; border-color:var(--green-deep); }
.spinner { width:36px; height:36px; border:3px solid var(--border); border-top-color:var(--green-mid); border-radius:50%; animation:spin 0.8s linear infinite; margin:0 auto; }
@keyframes spin { to{transform:rotate(360deg)} }
.route-card { background:var(--white); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow-sm); margin-bottom:14px; }
.route-stop { display:flex; gap:14px; margin-bottom:14px; align-items:flex-start; }
.route-stop:last-child { margin-bottom:0; }
.stop-num { width:30px; height:30px; border-radius:50%; background:var(--green-deep); color:#fff; font-size:0.8rem; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px; }
.stop-name { font-weight:700; font-size:0.9rem; }
.stop-time { color:var(--text-muted); font-size:0.78rem; }

/* ── Help page ────────────────────────────────────── */
.help-search-bar { display:flex; align-items:center; gap:10px; background:var(--cream-dark); border-radius:50px; padding:12px 16px; margin-bottom:20px; }
.help-search-bar input { flex:1; background:none; border:none; font-size:0.9rem; }
.help-quick-links { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:20px; }
.help-quick-card { background:var(--white); border-radius:var(--radius); padding:14px 8px; text-align:center; cursor:pointer; box-shadow:var(--shadow-sm); transition:transform var(--transition); }
.help-quick-card:hover { transform:translateY(-2px); }
.hq-icon { font-size:1.6rem; margin-bottom:6px; }
.hq-label { font-size:0.72rem; font-weight:700; color:var(--text-mid); }
.help-contact-methods { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.help-contact-method { background:var(--white); border-radius:var(--radius); padding:14px; text-align:center; cursor:pointer; box-shadow:var(--shadow-sm); }
.hcm-icon { font-size:1.4rem; margin-bottom:4px; }
.hcm-label { font-size:0.82rem; font-weight:700; margin-bottom:2px; }
.hcm-sub { font-size:0.68rem; color:var(--text-muted); }
.faq-category-label { font-size:0.78rem; font-weight:700; color:var(--green-mid); margin:0 0 8px; text-transform:uppercase; letter-spacing:0.04em; }
.help-faq-item { border-radius:var(--radius-sm); border:1px solid var(--border); margin-bottom:8px; overflow:hidden; cursor:pointer; background:var(--white); }
.help-faq-q { padding:14px 16px; font-size:0.875rem; font-weight:600; display:flex; justify-content:space-between; align-items:center; }
.help-faq-arrow { color:var(--text-muted); transition:transform var(--transition); }
.help-faq-item.open .help-faq-arrow { transform:rotate(180deg); }
.help-faq-a { display:none; padding:0 16px 14px; font-size:0.85rem; color:var(--text-mid); line-height:1.7; }

/* ── Notification drawer ──────────────────────────── */
.notif-drawer { position:fixed; top:0; right:0; bottom:0; width:340px; max-width:100vw; background:var(--white); z-index:500; box-shadow:var(--shadow-lg); transform:translateX(100%); transition:transform var(--transition); display:flex; flex-direction:column; }
.notif-drawer.open { transform:translateX(0); }
.notif-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.35); z-index:499; display:none; }
.notif-overlay.open { display:block; }
.notif-drawer-header { display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid var(--border); font-weight:700; font-size:1rem; color:var(--green-deep); flex-shrink:0; }
.close-btn { background:none; font-size:1.2rem; color:var(--text-muted); }
.notif-list { flex:1; overflow-y:auto; }
.notif-empty { padding:40px 20px; text-align:center; color:var(--text-muted); font-size:0.875rem; }
.notif-drawer-footer { padding:12px 20px; border-top:1px solid var(--border); text-align:center; font-size:0.82rem; }
.notif-drawer-footer a { color:var(--green-mid); font-weight:600; }

/* ── Pagination ───────────────────────────────────── */
.pagination { display:flex; gap:10px; justify-content:center; margin-top:24px; }

/* ── Utility ──────────────────────────────────────── */
.empty-state-sm { color:var(--text-muted); font-size:0.875rem; text-align:center; padding:20px; }
.owner-actions { display:flex; gap:8px; margin:12px 0; }

/* ── Landing page ─────────────────────────────────── */
.landing-body { margin:0; padding:0; background:var(--green-deep); }
.landing-hero { min-height:100vh; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.landing-hero::before { content:''; position:absolute; inset:0; background:url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=1600&q=80') center/cover no-repeat; opacity:0.25; }
.landing-overlay { position:absolute; inset:0; background:linear-gradient(to bottom,rgba(2,62,88,0.4),rgba(2,62,88,0.7)); }
.landing-content { position:relative; z-index:1; text-align:center; padding:40px 24px; max-width:600px; }
.landing-logo { display:flex; flex-direction:column; align-items:center; margin-bottom:16px; }
.landing-title { font-family:'Playfair Display',serif; font-size:clamp(2.5rem,8vw,4rem); color:#fff; font-weight:700; }
.landing-tagline { font-family:'Playfair Display',serif; font-size:clamp(1rem,3vw,1.5rem); color:var(--gold-light); margin-bottom:12px; }
.landing-sub { color:rgba(255,255,255,0.75); font-size:0.95rem; line-height:1.7; margin-bottom:32px; }
.landing-actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }