/* --- Seastay design system: ocean + warm cream ---
   Variable names kept (--coral / --teal etc.) for backward compatibility;
   their values now hold ocean-blue tones with warm accents preserved on chips. */
:root {
    /* Primary action colour (was coral, now ocean sky blue) */
    --coral: #3a99c9;
    --coral-dark: #2a7ea8;
    /* Secondary (was teal, now deep navy) */
    --teal: #154b73;
    --teal-dark: #0d324f;
    /* Backgrounds (warm cream stays - keeps the welcoming feel) */
    --cream: #fbfaf6;
    --warm-100: #eef5fa;   /* pale sky tint */
    --warm-200: #dbe9f3;   /* soft sky */
    --warm-300: #b9d3e6;   /* medium sky */
    /* Kept warm accents for trust chips / featured highlights */
    --sand-50:  #fff5e8;
    --sand-100: #ffe4c2;
    --sand-300: #f0b27a;
    /* Grays */
    --gray-900: #1a2a3a;
    --gray-700: #3e4c59;
    --gray-500: #7b8794;
    --gray-300: #cbd2d9;
    --gray-100: #f5f7fa;
    /* Status */
    --green: #2f9e6c;
    --red: #c83e3e;
    /* Shadows tuned for the lighter / blue look */
    --shadow-sm: 0 1px 2px rgba(13,50,80,0.04), 0 1px 3px rgba(13,50,80,0.06);
    --shadow-md: 0 6px 16px rgba(13,50,80,0.08), 0 2px 6px rgba(13,50,80,0.04);
    --shadow-lg: 0 18px 40px rgba(13,50,80,0.10), 0 6px 14px rgba(13,50,80,0.06);
    --radius: 12px;
    --radius-lg: 18px;
    --radius-xl: 22px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", "Mulish", system-ui, sans-serif;
    color: var(--gray-900);
    background: var(--cream);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--coral); }

img { max-width: 100%; display: block; }

h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; margin: 0 0 0.5em; }
h1 { font-size: 2.5rem; }
h2 { font-size: 1.8rem; }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1rem; color: var(--gray-700); }

/* --- Top nav --- */
.nav {
    position: sticky; top: 0; z-index: 50;
    background: rgba(251,250,246,0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--warm-200);
}
.nav-inner {
    max-width: 1200px; margin: 0 auto; padding: 14px 24px;
    display: flex; align-items: center; gap: 24px;
}
.brand {
    display: flex; align-items: center; gap: 10px;
    font-size: 1.25rem; font-weight: 800; color: var(--teal); letter-spacing: -0.02em;
}
.brand-mark {
    width: 30px; height: 30px; border-radius: 8px;
    background: linear-gradient(135deg, var(--coral), var(--coral-dark));
    display: grid; place-items: center; color: white; font-weight: 800;
}
.nav-links { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.nav-links a {
    padding: 8px 14px; border-radius: 8px; color: var(--gray-700); font-weight: 500;
    transition: background 0.15s;
}
.nav-links a:hover { background: var(--warm-200); color: var(--teal); }
.nav-links .name-tag { color: var(--gray-500); font-size: 0.9rem; padding: 0 6px; }
.cur-select {
    border: 1px solid var(--gray-300); border-radius: 8px; padding: 6px 8px;
    background: white; font-family: inherit; font-size: 0.85rem; color: var(--gray-700); cursor: pointer;
}
.cur-select:hover { border-color: var(--coral); }

/* --- Header auth buttons (Login outline + Create Account primary) --- */
.btn-auth {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 0.9rem; font-weight: 600;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.06s;
    border: 1.5px solid transparent;
    white-space: nowrap;
    cursor: pointer;
    font-family: inherit;
}
.btn-auth:active { transform: translateY(1px); }
.btn-auth-secondary {
    color: var(--coral);
    background: white;
    border-color: var(--coral);
}
.btn-auth-secondary:hover { background: var(--warm-100); color: var(--coral-dark); border-color: var(--coral-dark); }
.btn-auth-primary {
    background: var(--coral);
    color: white;
    border-color: var(--coral);
}
.btn-auth-primary:hover { background: var(--coral-dark); border-color: var(--coral-dark); color: white; }

/* --- Custom language picker (globe + flag + arrow) --- */
.lang-picker { position: relative; }
.lang-trigger {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 10px;
    background: white;
    border: 1px solid var(--gray-300);
    border-radius: 999px;
    font: inherit; color: var(--gray-700); cursor: pointer;
    font-size: 0.9rem; line-height: 1;
    transition: border-color 0.15s, background 0.15s;
}
.lang-trigger:hover { border-color: var(--coral); background: var(--warm-100); }
.lang-trigger:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.lang-globe { font-size: 1rem; }
.lang-flag  { font-size: 1.05rem; line-height: 1; }
.lang-arrow { color: var(--gray-500); font-size: 0.85rem; transition: transform 0.18s ease; }
.lang-picker[data-state="open"] .lang-arrow { transform: rotate(180deg); }

.lang-menu {
    position: absolute; right: 0; top: calc(100% + 8px);
    background: white;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(13,50,80,0.12), 0 2px 6px rgba(13,50,80,0.06);
    border: 1px solid var(--warm-200);
    padding: 6px;
    min-width: 210px;
    max-width: calc(100vw - 28px);
    z-index: 70;
}
.lang-menu[hidden] { display: none; }
.lang-option {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    padding: 9px 12px;
    background: none; border: none;
    font: inherit; color: var(--gray-700); cursor: pointer;
    border-radius: 10px;
    font-size: 0.92rem;
    text-align: left;
    transition: background 0.12s;
}
.lang-option:hover { background: var(--warm-100); }
.lang-option.active { background: var(--warm-200); color: var(--teal); font-weight: 600; }
.lang-option .flag { font-size: 1.05rem; line-height: 1; }

/* --- Buttons --- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 22px; border-radius: 10px; font-weight: 600; font-size: 0.95rem;
    border: none; cursor: pointer; transition: transform 0.06s, background 0.15s, color 0.15s, box-shadow 0.15s;
    font-family: inherit;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--coral); color: white; }
.btn-primary:hover { background: var(--coral-dark); color: white; }
.btn-secondary { background: var(--teal); color: white; }
.btn-secondary:hover { background: var(--teal-dark); color: white; }
.btn-ghost { background: transparent; color: var(--teal); border: 1px solid var(--gray-300); }
.btn-ghost:hover { background: var(--warm-200); }
.btn-danger { background: white; color: var(--red); border: 1px solid var(--red); }
.btn-danger:hover { background: var(--red); color: white; }
.btn-block { width: 100%; }
.btn-sm { padding: 8px 14px; font-size: 0.85rem; }
.btn-lg { padding: 14px 26px; font-size: 1rem; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* --- Hero --- */
.hero {
    position: relative;
    min-height: 460px;
    background:
      linear-gradient(180deg, rgba(42,71,71,0.55), rgba(42,71,71,0.30)),
      url('https://images.unsplash.com/photo-1502672023488-70e25813eb80?w=1600') center/cover no-repeat;
    color: white;
    display: flex; align-items: center; justify-content: center; text-align: center;
    padding: 80px 24px;
}
.hero h1 {
    font-size: clamp(2.2rem, 4.5vw, 3.6rem);
    color: white; max-width: 850px; margin: 0 auto 14px; text-shadow: 0 2px 16px rgba(0,0,0,0.25);
}
.hero p { color: rgba(255,255,255,0.95); font-size: 1.15rem; max-width: 600px; margin: 0 auto 28px; }
.hero-search {
    background: white; border-radius: 14px; padding: 8px;
    display: flex; gap: 6px; max-width: 640px; margin: 0 auto;
    box-shadow: var(--shadow-lg);
}
.hero-search input {
    flex: 1; border: none; padding: 14px 16px; font-size: 1rem; border-radius: 10px;
    background: transparent; outline: none; color: var(--gray-900);
    font-family: inherit;
}

/* --- Layout --- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.section { padding: 64px 0; }
.section h2 { font-size: 1.9rem; margin-bottom: 8px; }
.section .lead { color: var(--gray-500); margin-bottom: 32px; }

/* --- Listing card grid (Airbnb-style: photo dominates, card chrome minimal) --- */
.grid {
    display: grid; gap: 32px 20px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.card {
    background: transparent; border-radius: 0; overflow: visible;
    box-shadow: none; transition: transform 0.18s ease;
    display: flex; flex-direction: column;
    text-decoration: none; color: inherit;
}
.card:hover { transform: translateY(-3px); }
.card-photo {
    height: 260px; background: var(--warm-200); position: relative; overflow: hidden;
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(13,50,80,0.04);
}
.card-photo img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.4s ease;
}
.card:hover .card-photo img { transform: scale(1.04); }
.card-body { padding: 14px 4px 4px; display: flex; flex-direction: column; gap: 4px; }
.card-location {
    color: var(--gray-500); font-size: 0.85rem; font-weight: 500;
    text-transform: none; letter-spacing: 0; display: flex; gap: 6px; align-items: center;
}
.card-title {
    font-size: 1.05rem; font-weight: 600; color: var(--gray-900); margin: 0;
    line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.card-meta-icons {
    display: flex; gap: 14px; flex-wrap: wrap;
    color: var(--gray-700); font-size: 0.85rem;
    margin-top: 2px;
}
.card-meta-icons span { display: inline-flex; align-items: center; gap: 4px; }
.card-price-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; }
.card-price { color: var(--gray-900); }
.card-price strong { font-size: 1.1rem; font-weight: 700; }
.card-price small { color: var(--gray-500); font-weight: 500; }
.card-cta {
    color: var(--coral-dark); font-weight: 600; font-size: 0.9rem; white-space: nowrap;
}
.card:hover .card-cta { color: var(--teal-dark); }
/* Old card-meta kept as fallback for any unmigrated card */
.card-meta { display: flex; gap: 14px; color: var(--gray-500); font-size: 0.88rem; margin-top: auto; }

.badge {
    display: inline-block; padding: 4px 10px; border-radius: 999px;
    font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
}
.badge-pending { background: #fff3d6; color: #946800; }
.badge-accepted { background: #d6f0e3; color: #1f6d4a; }
.badge-rejected { background: #f9dcdc; color: #8a2828; }
.badge-paid { background: #d8e8f7; color: #1c4f88; }
.badge-available { background: #d6f0e3; color: #1f6d4a; }
.badge-unavailable { background: #eee; color: #666; }

.card-badges { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 999px; font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em; box-shadow: var(--shadow-sm);
}
.chip-featured { background: var(--coral); color: white; }
.chip-verified { background: var(--teal); color: white; }
.chip-premium  { background: #f3c32a; color: #5a4400; }
.chip-pending  { background: #f9dcdc; color: #8a2828; }
.chip-pro-inline { background: var(--teal); color: white; padding: 2px 8px; border-radius: 6px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; }
.chip-pro-enhanced { background: linear-gradient(135deg, #f3c32a, #c89c00); color: #3a2c00; padding: 2px 8px; border-radius: 6px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
.chip-verified-inline { background: #d6f0e3; color: #1f6d4a; padding: 2px 8px; border-radius: 6px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; }

/* Trust chip row (on listing detail host card) */
.trust-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.trust-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 999px;
    background: var(--warm-100); color: var(--gray-700);
    font-size: 0.78rem; font-weight: 600;
    border: 1px solid var(--warm-200);
}
.trust-chip-new  { background: #fff3d6; color: #946800; border-color: #f3e0a7; }
.trust-chip-good { background: #d6f0e3; color: #1f6d4a; border-color: #b9e0cd; }

/* "Ideal for X" pill row under card title */
.ideal-pill-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; margin-bottom: 4px; }
.ideal-pill {
    display: inline-flex; align-items: center;
    padding: 2px 9px; border-radius: 999px;
    background: rgba(42,71,71,0.08); color: var(--teal);
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em;
}

/* Early-access banner (used on listing + checkout) */
.early-access {
    background: linear-gradient(90deg, rgba(226,114,91,0.10), rgba(42,71,71,0.05));
    border: 1px solid var(--warm-300);
    border-radius: var(--radius);
    padding: 10px 14px;
    font-size: 0.88rem;
    color: var(--gray-700);
    display: flex; gap: 10px; align-items: center;
}
.early-access::before { content: '◐'; color: var(--coral); font-size: 1.1rem; }

/* Lifestyle tag chips on profile */
.lifestyle-grid { display: flex; gap: 8px; flex-wrap: wrap; }
.lifestyle-chip {
    cursor: pointer; user-select: none;
    padding: 6px 12px; border-radius: 999px;
    border: 1.5px solid var(--gray-300); background: white;
    font-size: 0.85rem; color: var(--gray-700);
    transition: all 0.15s;
}
.lifestyle-chip:hover { border-color: var(--coral); }
.lifestyle-chip.on { background: var(--teal); color: white; border-color: var(--teal); }
.lifestyle-chip input { display: none; }

/* Permit-status chip */
.permit-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px; border-radius: 999px;
    font-size: 0.78rem; font-weight: 600;
}
.permit-not_applied { background: #f0f0f0; color: #555; }
.permit-submitted   { background: #fff3d6; color: #946800; }
.permit-approved    { background: #d6f0e3; color: #1f6d4a; }
.permit-refused     { background: #f9dcdc; color: #8a2828; }

/* SEA newcomer cards on homepage */
.sea-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.sea-card { background: white; border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); }
.sea-card .icon { font-size: 1.8rem; margin-bottom: 8px; }
.sea-card h3 { margin-bottom: 8px; }

/* Trust strip - subtle student-safety section */
.trust-strip { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 14px; }
.trust-card {
    background: white; border-radius: var(--radius-lg); padding: 22px;
    border: 1px solid var(--warm-200);
    box-shadow: 0 1px 2px rgba(13,50,80,0.03);
}
.trust-card .icon { font-size: 1.5rem; margin-bottom: 8px; display: block; }
.trust-card h4 { margin: 0 0 6px; font-size: 1.02rem; color: var(--gray-900); }
.trust-card p { margin: 0; font-size: 0.92rem; color: var(--gray-700); line-height: 1.55; }

/* Front-landing choice cards (Student vs Home Stay) */
.choice-grid { display: grid; gap: 22px; grid-template-columns: 1fr 1fr; max-width: 880px; margin: 0 auto; }
.choice-card {
    background: white; border-radius: var(--radius-xl); padding: 36px 28px;
    box-shadow: var(--shadow-sm);
    text-decoration: none; color: inherit;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    border: 1px solid var(--warm-200);
    display: flex; flex-direction: column; gap: 12px;
}
.choice-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--warm-300); }
.choice-card .big-icon { font-size: 2.4rem; line-height: 1; }
.choice-card h2 { margin: 0; font-size: 1.5rem; }
.choice-card p { margin: 0; color: var(--gray-700); font-size: 0.95rem; line-height: 1.55; }
.choice-card .arrow { margin-top: auto; padding-top: 14px; color: var(--coral-dark); font-weight: 600; font-size: 0.95rem; }

/* "Home Stay" host pitch bullets */
.host-pitch ul { list-style: none; padding: 0; margin: 14px 0 22px; }
.host-pitch ul li { padding: 8px 0; display: flex; gap: 10px; align-items: flex-start; }
.host-pitch ul li::before { content: '✓'; color: var(--coral); font-weight: 700; flex-shrink: 0; }

/* FB-Marketplace-style listing form bits */
.fb-photo-zone {
    border: 2px dashed var(--warm-300);
    background: var(--warm-100);
    border-radius: var(--radius-lg);
    padding: 28px 20px;
    text-align: center;
    margin-bottom: 18px;
    transition: border-color 0.15s, background 0.15s;
}
.fb-photo-zone:hover { border-color: var(--coral); background: var(--warm-200); }
.fb-photo-icon { font-size: 2.2rem; margin-bottom: 8px; }
.fb-yesno { display: flex; gap: 10px; }
.fb-yesno label {
    flex: 1; padding: 12px 14px; border: 1.5px solid var(--gray-300);
    border-radius: 10px; cursor: pointer; text-align: center;
    font-size: 0.92rem; color: var(--gray-700);
    transition: all 0.15s;
}
.fb-yesno label:hover { border-color: var(--coral); }
.fb-yesno input { display: none; }
.fb-yesno label:has(input:checked) {
    background: var(--coral); color: white; border-color: var(--coral);
}

/* Off-platform warning on checkout */
.warning-box {
    background: #fff3d6; border: 1px solid #f3e0a7; color: #6b4900;
    border-radius: 10px; padding: 12px 14px; font-size: 0.88rem; margin: 14px 0;
}
.warning-box strong { color: #6b4900; }

/* --- Forms / cards --- */
.panel {
    background: white; border-radius: var(--radius-lg); padding: 32px;
    box-shadow: var(--shadow-sm);
}
.form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-row label { font-weight: 600; font-size: 0.9rem; color: var(--gray-700); }
.form-row input, .form-row select, .form-row textarea {
    padding: 11px 14px; border: 1px solid var(--gray-300); border-radius: 10px;
    font-size: 1rem; font-family: inherit; color: var(--gray-900); background: white;
    transition: border 0.15s, box-shadow 0.15s;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
    outline: none; border-color: var(--coral); box-shadow: 0 0 0 3px rgba(226,114,91,0.15);
}
.form-row textarea {
    resize: none;
    height: 140px;
    min-height: 140px;
    max-height: 140px;
    line-height: 1.5;
}
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }

.role-toggle { display: flex; gap: 10px; }
.role-toggle label {
    flex: 1; cursor: pointer; padding: 14px 14px; border: 2px solid var(--gray-300);
    border-radius: 10px; text-align: center; font-weight: 600; transition: all 0.15s;
}
.role-toggle input { display: none; }
.role-toggle input:checked + span { color: white; }
.role-toggle label:has(input:checked) { background: var(--teal); border-color: var(--teal); color: white; }
.role-desc { font-size: 0.78rem; font-weight: 400; opacity: 0.85; display: block; margin-top: 2px; }

/* --- Listing detail --- */
.detail-hero { width: 100%; height: 420px; border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 24px; }
.detail-hero img { width: 100%; height: 100%; object-fit: cover; }
.detail-grid { display: grid; grid-template-columns: 1fr 360px; gap: 32px; }
.detail-meta { display: flex; gap: 20px; color: var(--gray-500); margin-bottom: 16px; flex-wrap: wrap; }
.detail-meta span { display: flex; align-items: center; gap: 6px; }
.detail-amenities { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 24px; }
.detail-amenities span { padding: 6px 12px; background: var(--warm-100); border-radius: 999px; font-size: 0.85rem; color: var(--gray-700); }
.host-card {
    background: var(--warm-100); border-radius: var(--radius); padding: 18px;
    display: flex; gap: 14px; align-items: center; margin-top: 24px;
}
.host-avatar {
    width: 50px; height: 50px; border-radius: 50%; background: var(--teal); color: white;
    display: grid; place-items: center; font-weight: 700; font-size: 1.1rem;
}
.detail-side { position: sticky; top: 90px; align-self: start; }
.price-card { background: white; border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); }
.price-card .big-price { font-size: 1.7rem; font-weight: 800; color: var(--gray-900); }
.price-card .deposit-note { background: var(--warm-100); border-radius: 10px; padding: 12px 14px; font-size: 0.88rem; color: var(--gray-700); margin: 14px 0; }

/* --- Tables --- */
.list { display: flex; flex-direction: column; gap: 14px; }
.list-row {
    background: white; border-radius: var(--radius); padding: 18px;
    display: flex; gap: 18px; align-items: center; box-shadow: var(--shadow-sm);
}
.list-row .thumb {
    width: 90px; height: 70px; border-radius: 8px; overflow: hidden; background: var(--warm-200); flex: 0 0 90px;
}
.list-row .thumb img { width: 100%; height: 100%; object-fit: cover; }
.list-row .body { flex: 1; min-width: 0; }
.list-row .body .title { font-weight: 700; margin: 0 0 2px; }
.list-row .body .meta  { color: var(--gray-500); font-size: 0.88rem; }
.list-row .actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* --- Tabs --- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--warm-200); margin-bottom: 24px; }
.tab {
    padding: 12px 18px; cursor: pointer; font-weight: 600; color: var(--gray-500);
    border-bottom: 2px solid transparent; background: none; border-top: none; border-left: none; border-right: none;
    font-family: inherit; font-size: 0.95rem;
}
.tab.active { color: var(--coral); border-bottom-color: var(--coral); }

/* --- Message thread --- */
.thread {
    background: var(--warm-100); border-radius: var(--radius);
    padding: 14px; margin-top: 12px;
    display: flex; flex-direction: column; gap: 10px;
}
.thread-empty { color: var(--gray-500); font-size: 0.88rem; text-align: center; padding: 8px 0; }
.bubble {
    max-width: 78%; padding: 8px 12px; border-radius: 12px; font-size: 0.92rem;
    background: white; box-shadow: var(--shadow-sm); align-self: flex-start;
}
.bubble.mine { background: var(--coral); color: white; align-self: flex-end; }
.bubble .meta { font-size: 0.72rem; opacity: 0.75; margin-top: 4px; }
.thread form { display: flex; gap: 8px; margin-top: 6px; }
.thread form textarea {
    flex: 1; resize: none; min-height: 38px; padding: 9px 12px; border-radius: 10px;
    border: 1px solid var(--gray-300); font-family: inherit; font-size: 0.92rem;
}
.thread form textarea:focus { outline: none; border-color: var(--coral); }

/* --- Misc --- */
.empty {
    background: white; border-radius: var(--radius-lg); padding: 60px 24px; text-align: center;
    color: var(--gray-500);
}
.alert {
    padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; font-size: 0.95rem;
}
.alert-error { background: #fde8e8; color: var(--red); border: 1px solid #f5c6c6; }
.alert-success { background: #d6f0e3; color: #1f6d4a; border: 1px solid #b9e0cd; }
.alert-info { background: #fff3d6; color: #6b4900; border: 1px solid #f3e0a7; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 28px; }
.step {
    background: white; border-radius: var(--radius-lg); padding: 24px; text-align: center;
    box-shadow: var(--shadow-sm);
}
.step-num {
    width: 44px; height: 44px; border-radius: 50%; background: var(--coral);
    color: white; display: grid; place-items: center; font-weight: 800; margin: 0 auto 14px; font-size: 1.1rem;
}

footer {
    background: var(--teal); color: rgba(255,255,255,0.78);
    padding: 40px 0; margin-top: 60px; text-align: center; font-size: 0.9rem;
}
footer a { color: rgba(255,255,255,0.9); }

/* --- Beta notice (footer) --- */
.beta-notice {
    display: inline-block;
    padding: 6px 14px;
    margin-bottom: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.92);
    font-size: 0.85rem;
    font-weight: 500;
}

/* --- Payments-disabled beta panel --- */
.payments-disabled {
    border: 1px dashed var(--warm-300);
    background: var(--warm-100);
    border-radius: var(--radius);
    padding: 22px 20px;
    text-align: center;
    color: var(--gray-700);
}
.payments-disabled .icon { font-size: 1.8rem; display: block; margin-bottom: 8px; }
.payments-disabled strong { display: block; color: var(--gray-900); margin-bottom: 4px; }
.payments-disabled small { color: var(--gray-500); }

/* --- Flag badges --- */
.flag-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 9px; border-radius: 999px; background: var(--warm-100);
    font-size: 0.82rem; color: var(--gray-700);
}
.flag-emoji { font-size: 1.05em; line-height: 1; }
.flag-name { font-weight: 500; }

/* --- Mobile bottom nav --- */
.bottom-nav {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0;
    height: 64px;
    background: white;
    border-top: 1px solid var(--warm-200);
    box-shadow: 0 -2px 12px rgba(0,0,0,0.05);
    z-index: 60;
}
.bottom-nav a {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-decoration: none; color: var(--gray-500); padding: 6px 4px; font-size: 0.7rem;
    transition: color 0.15s;
}
.bottom-nav a:hover { color: var(--coral); }
.bottom-nav a.active { color: var(--coral); }
.bottom-nav .bn-icon { font-size: 1.4rem; line-height: 1; margin-bottom: 2px; }
.bottom-nav .bn-label { font-weight: 600; letter-spacing: 0.02em; }

/* --- Swipeable photo gallery (mobile-first) --- */
.gallery {
    display: flex; gap: 8px; overflow-x: auto;
    scroll-snap-type: x mandatory;
    border-radius: var(--radius-lg);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.gallery::-webkit-scrollbar { height: 6px; }
.gallery::-webkit-scrollbar-thumb { background: var(--warm-300); border-radius: 6px; }
.gallery img {
    flex: 0 0 100%; width: 100%; height: 420px; object-fit: cover;
    scroll-snap-align: start; border-radius: var(--radius-lg);
}
.gallery-dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.gallery-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warm-300); }
.gallery-dot.on { background: var(--coral); }

/* --- Sticky mobile CTA --- */
.mobile-cta {
    display: none;
    position: fixed; bottom: 64px; left: 0; right: 0;
    background: white; border-top: 1px solid var(--warm-200);
    padding: 12px 14px; box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
    z-index: 55;
}
.mobile-cta-inner { display: flex; align-items: center; gap: 10px; }
.mobile-cta-price { flex: 1; }
.mobile-cta-price strong { font-size: 1.1rem; }
.mobile-cta-price small { color: var(--gray-500); display: block; font-size: 0.75rem; }

/* --- Pricing tiers + fee breakdown --- */
.tier-options { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tier-card {
    border: 2px solid var(--gray-300); border-radius: var(--radius); padding: 16px; cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.tier-card:has(input:checked) { border-color: var(--coral); background: var(--warm-100); }
.tier-card .tier-price { font-size: 1.5rem; font-weight: 800; color: var(--gray-900); }
.tier-card .tier-name { font-weight: 700; margin-bottom: 4px; }
.tier-card .tier-features { font-size: 0.85rem; color: var(--gray-700); margin-top: 8px; }
.tier-card input { display: none; }

.fee-breakdown { background: var(--warm-100); border-radius: 10px; padding: 12px 14px; }
.fee-breakdown .row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 0.92rem; }
.fee-breakdown .row.total { border-top: 1px solid var(--warm-300); margin-top: 6px; padding-top: 8px; font-weight: 700; color: var(--gray-900); }

/* --- WhatsApp --- */
.btn-whatsapp { background: #25d366; color: white; }
.btn-whatsapp:hover { background: #1da851; color: white; }

/* --- FAQ --- */
.faq-section { margin-top: 24px; }
.faq-item {
    background: white; border-radius: var(--radius); padding: 16px 20px; margin-bottom: 10px;
    box-shadow: var(--shadow-sm);
}
.faq-item summary {
    cursor: pointer; font-weight: 600; color: var(--gray-900); list-style: none; outline: none;
    display: flex; justify-content: space-between; align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 1.4rem; color: var(--coral); transition: transform 0.2s; }
.faq-item[open] summary::after { content: '−'; }
.faq-item .answer { padding-top: 12px; color: var(--gray-700); }

/* --- Stat tiles --- */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 24px; }
.stat-tile { background: white; border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-sm); }
.stat-tile .label { color: var(--gray-500); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; }
.stat-tile .value { font-size: 1.5rem; font-weight: 800; color: var(--gray-900); margin-top: 4px; }
.stat-tile .delta { font-size: 0.82rem; color: var(--gray-500); margin-top: 4px; }

/* --- Stars --- */
.star-row { display: flex; gap: 4px; }
.star-row button {
    background: none; border: none; cursor: pointer; padding: 0; font-size: 1.6rem; color: var(--gray-300); transition: color 0.1s;
}
.star-row button.on, .star-row button:hover, .star-row button:hover ~ button { color: #f3c32a; }
.star-row { flex-direction: row-reverse; justify-content: flex-end; }
.star-row button.on ~ button { color: #f3c32a; }

/* --- Responsive --- */
@media (max-width: 800px) {
    .detail-grid { grid-template-columns: 1fr; }
    .form-grid-2, .form-grid-3 { grid-template-columns: 1fr; }
    .steps { grid-template-columns: 1fr; }
    .nav-links a.hide-sm, .nav-links .hide-sm { display: none; }
    /* Browse lives in the bottom-nav on mobile - hide the inline header link */
    .nav-links a[href="/browse.html"] { display: none; }
    /* Compact auth buttons and language picker on small screens */
    .btn-auth { padding: 7px 12px; font-size: 0.83rem; }
    .lang-trigger { padding: 6px 8px; font-size: 0.85rem; gap: 4px; }
    .lang-globe { font-size: 0.9rem; }
    .hero { padding: 60px 16px; min-height: 320px; }
    .hero h1 { font-size: 1.9rem; }
    .hero-search { flex-direction: column; padding: 10px; }
    .hero-search .btn { width: 100%; }
    .list-row { flex-wrap: wrap; }
    .tier-options { grid-template-columns: 1fr; }
    .nav-inner { padding: 10px 14px; gap: 10px; flex-wrap: wrap; }
    .brand { font-size: 1.1rem; }
    .container { padding: 0 14px; }
    .section { padding: 40px 0; }
    h1 { font-size: 1.9rem; }
    .panel { padding: 20px; border-radius: 14px; }
    .grid { gap: 14px; }

    /* Reveal mobile-specific shells */
    .bottom-nav { display: flex; }
    .mobile-cta { display: block; }
    body { padding-bottom: 64px; }
    body.has-cta { padding-bottom: 144px; }

    /* Lighter section padding for SEA slow networks */
    .gallery img { height: 280px; }
    .detail-hero { display: none; }

    /* Airbnb-style cards on mobile: single column, big photos */
    .grid { grid-template-columns: 1fr; gap: 26px 0; }
    .card-photo { height: 240px; border-radius: 16px; }
    .card-title { font-size: 1.08rem; }

    /* Choice cards stack */
    .choice-grid { grid-template-columns: 1fr; gap: 14px; }
    .choice-card { padding: 22px 20px; }
    .choice-card h2 { font-size: 1.25rem; }

    /* Sea + trust strips: single column */
    .sea-grid, .trust-strip { grid-template-columns: 1fr; gap: 14px; }
}
@media (min-width: 801px) {
    .gallery img { height: 460px; }
}