:root {
    --green: #0F5132;
    --green-light: #16A34A;
    --bg: #F8FAFC;
    --text: #1F2937;
    --muted: #6B7280;
    --border: #E5E7EB;
    --card: #FFFFFF;
    --shadow: 0 4px 12px rgba(0,0,0,.06);
    --shadow-hover: 0 8px 20px rgba(0,0,0,.10);
}
* { box-sizing: border-box; }
body {
    font-family: 'Inter', -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    margin: 0; background: var(--bg); color: var(--text);
    -webkit-font-smoothing: antialiased;
}
a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar { display: flex; justify-content: space-between; align-items: center; background: white; padding: 14px 28px; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; }
.topbar-right { display: flex; align-items: center; gap: 14px; }
.brand { font-size: 18px; }
.link-out { color: var(--muted); font-size: 14px; }

/* Account button (top-right): "Sign in" when logged out, "My bookings" when logged in. */
.account-link {
    display: inline-flex; align-items: center; gap: 6px;
    background: white; border: 1px solid var(--border);
    padding: 7px 14px; border-radius: 999px;
    font-size: 13.5px; color: var(--text); font-weight: 600;
    text-decoration: none; line-height: 1;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.account-link:hover { background: var(--green); color: white; border-color: var(--green); text-decoration: none; }
.account-link.signed-in { background: #ECFDF5; color: var(--green); border-color: #BBF7D0; }
.account-link.signed-in:hover { background: var(--green); color: white; border-color: var(--green); }

.container { max-width: 1200px; margin: 0 auto; padding: 28px 22px; box-sizing: border-box; }

/* ===== Home hero (kept from the new design — user wanted to keep this area) ===== */
.hero {
    text-align: center;
    padding: 56px 16px 36px;
    background: radial-gradient(ellipse at top, #F0FDF4 0%, var(--bg) 70%);
}
.hero h1 { font-size: 42px; margin: 0 0 10px; letter-spacing: -.02em; line-height: 1.1; }
.hero p  { color: var(--muted); margin: 0 0 28px; font-size: 17px; }
.filter-row {
    display: flex; gap: 8px; max-width: 720px; margin: 0 auto;
    background: white; border-radius: 999px; padding: 8px;
    box-shadow: var(--shadow); border: 1px solid var(--border);
}
.filter-row select, .filter-row input {
    flex: 1; padding: 10px 18px; border: 0; background: transparent;
    font-size: 15px; font-family: inherit; outline: none; min-width: 0;
    color: var(--text);
}
.filter-row select { -webkit-appearance: none; appearance: none; cursor: pointer; }
@media (max-width: 720px) {
    .hero { padding: 36px 14px 24px; }
    .hero h1 { font-size: 30px; }
    .filter-row { flex-direction: column; border-radius: 14px; gap: 4px; }
    .filter-row select, .filter-row input { padding: 12px 16px; }
}

.btn { display: inline-block; padding: 10px 18px; border: 1px solid var(--border); background: white; border-radius: 8px; font-size: 14px; cursor: pointer; color: var(--text); }
.btn:hover { background: #F1F5F9; }
.btn.primary { background: var(--green); color: white; border-color: var(--green); }
.btn.primary:hover { background: #0a3d27; }
.btn.big { font-size: 16px; padding: 12px 28px; }
.btn:disabled { opacity: .6; cursor: wait; }

/* ===== Franchise card grid ===== */
.franchise-grid { margin-top: 24px; display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.franchise-card { background: var(--card); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); display: block; color: inherit; transition: transform .15s ease, box-shadow .15s ease; }
.franchise-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); text-decoration: none; }
.franchise-card .hero { position: relative; height: 180px; background-size: cover; background-position: center; background-color: #DCFCE7; }
.franchise-card .hero.placeholder { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--green), #2D6A4F); }
.franchise-card .hero-icon { font-size: 56px; color: rgba(255,255,255,.7); }
.franchise-card .price-badge { position: absolute; bottom: 10px; left: 10px; background: rgba(15,81,50,.95); color: white; padding: 5px 11px; border-radius: 14px; font-size: 12.5px; }
.franchise-card .price-badge b { font-size: 13.5px; }
.franchise-card .body { padding: 14px 16px; }
.franchise-card .card-head { display: flex; justify-content: space-between; align-items: start; gap: 8px; margin-bottom: 4px; }
.franchise-card h3 { margin: 0; font-size: 17px; }
.franchise-card .bay-count { font-size: 11.5px; color: #065F46; background: #DCFCE7; padding: 4px 11px; border-radius: 999px; white-space: nowrap; font-weight: 700; border: 1px solid #BBF7D0; }
.franchise-card .loc-row-card { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0 0 6px; }
.franchise-card .loc { color: var(--muted); font-size: 13px; }
.franchise-card .desc { font-size: 13.5px; margin: 4px 0 0; line-height: 1.4; }
.amenities-row { display: flex; gap: 4px; justify-content: flex-end; flex-shrink: 0; }
.amenity-chip { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: #F1F5F9; border-radius: 7px; color: var(--green); }
.amenity-chip svg { width: 15px; height: 15px; stroke-width: 1.8; }

.loading, .empty { padding: 40px; text-align: center; color: var(--muted); }
.empty a { color: var(--green); }

/* ===== Venue page ===== */
.venue-page { padding-bottom: 20px; text-align: left; }
.venue-page section { text-align: left; }
.venue-hero-img { height: 320px; background-size: cover; background-position: center; border-radius: 14px; margin-bottom: 18px; box-shadow: var(--shadow); background-color: #DCFCE7; }
.venue-hero-img.placeholder { display: flex; align-items: center; justify-content: center; font-size: 80px; color: white; background: linear-gradient(135deg, var(--green), #2D6A4F); }
.venue-hero-img.placeholder span { opacity: .65; }
.venue-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--border); margin-bottom: 24px; flex-wrap: wrap; text-align: left; }
.venue-header h1 { margin: 0 0 6px; font-size: 30px; text-align: left; }
.loc-row { color: var(--muted); font-size: 14px; margin-bottom: 6px; text-align: left; }
.contact-row { display: flex; gap: 14px; flex-wrap: wrap; font-size: 14px; }
.contact-row a { color: var(--green); }
.from-price { background: var(--green); color: white; padding: 10px 18px; border-radius: 10px; font-size: 14px; white-space: nowrap; }
.from-price b { font-size: 22px; }

/* Two-column layout: main on left, sticky amenity rail on right (desktop only) */
.venue-layout { display: grid; grid-template-columns: 1fr 260px; gap: 36px; align-items: start; }
.venue-main { min-width: 0; text-align: left; }
.venue-main > section { text-align: left; }
.venue-about p { margin: 0 0 22px; line-height: 1.6; color: var(--text); text-align: left; }

.amenity-rail { position: sticky; top: 24px; background: white; border: 1px solid var(--border); border-radius: 12px; padding: 18px 18px 14px; box-shadow: var(--shadow); }
.amenity-rail h3 { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -.005em; }
.amenity-rail ul { list-style: none; margin: 0; padding: 0; }
.amenity-rail li { display: flex; align-items: center; gap: 12px; padding: 8px 0; font-size: 14px; color: var(--text); border-top: 1px solid #F1F5F9; }
.amenity-rail li:first-child { border-top: 0; padding-top: 4px; }
.amenity-rail li svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--green); stroke-width: 1.75; }

.venue-gallery { margin: 4px 0 28px; }
.venue-gallery h3 { margin: 0 0 10px; font-size: 15px; font-weight: 700; }
.gallery-strip { display: grid; grid-auto-flow: column; grid-auto-columns: 220px; gap: 10px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.gallery-thumb { display: block; height: 150px; background-size: cover; background-position: center; border-radius: 10px; cursor: zoom-in; transition: opacity .15s ease, transform .15s ease; }
.gallery-thumb:hover { opacity: .92; transform: translateY(-1px); }

@media (max-width: 900px) {
    .venue-layout { grid-template-columns: 1fr; }
    .amenity-rail { position: static; margin-bottom: 22px; }
}

/* ===== Image lightbox ===== */
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.5); user-select: none; }
.lb-btn { position: absolute; background: rgba(255,255,255,.10); color: white; border: 0; font-size: 26px; cursor: pointer; border-radius: 999px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; transition: background .12s ease; backdrop-filter: blur(4px); }
.lb-btn:hover { background: rgba(255,255,255,.22); }
.lb-close { top: 20px; right: 20px; font-size: 28px; line-height: 1; }
.lb-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 24px; top: 50%; transform: translateY(-50%); }
.lb-counter { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.85); font-size: 13px; background: rgba(0,0,0,.4); padding: 6px 14px; border-radius: 999px; backdrop-filter: blur(6px); }
@media (max-width: 720px) {
    .lb-prev { left: 8px; }
    .lb-next { right: 8px; }
    .lb-btn { width: 42px; height: 42px; }
}

.venue-book { background: white; border-radius: 14px; padding: 22px 24px; box-shadow: var(--shadow); margin-bottom: 22px; }
.venue-book h2 { margin: 0 0 6px; font-size: 22px; }
.venue-book .policy { color: var(--muted); font-size: 13px; margin-bottom: 16px; }
.venue-book .policy span { margin-right: 6px; }

.bay-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-bottom: 18px; }
.bay-card { background: white; border: 2px solid var(--border); border-radius: 12px; overflow: hidden; cursor: pointer; transition: border-color .15s ease, transform .15s ease; }
.bay-card:hover { border-color: var(--green-light); transform: translateY(-1px); }
.bay-card.sel { border-color: var(--green); background: #ECFDF5; }
.bay-img { height: 120px; background-size: cover; background-position: center; background-color: #DCFCE7; }
.bay-img.placeholder { display: flex; align-items: center; justify-content: center; font-size: 36px; color: rgba(255,255,255,.7); background: linear-gradient(135deg, var(--green), #2D6A4F); }
.bay-body { padding: 12px 14px; }
.bay-name { font-weight: 600; margin-bottom: 4px; font-size: 14.5px; }
.bay-desc { color: var(--muted); font-size: 12.5px; margin-bottom: 6px; line-height: 1.4; }
.bay-price { color: var(--text); font-size: 14px; font-weight: 600; }

.booking-controls { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.booking-controls label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.booking-controls input, .booking-controls select { width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 15px; }

.slots-box { margin-bottom: 6px; }
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; }
.slot-btn { padding: 10px; border: 1px solid var(--green); background: white; color: var(--green); border-radius: 8px; cursor: pointer; font-weight: 600; font-family: Menlo, Consolas, monospace; }
.slot-btn:hover { background: var(--green); color: white; }

#checkoutBox { background: white; border-radius: 14px; padding: 22px 24px; box-shadow: var(--shadow); }
#checkoutBox h2 { margin-top: 0; }
#checkoutBox .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#checkoutBox label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
#checkoutBox input { width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 15px; }
.email-hint { background: #ECFDF5; border: 1px solid #BBF7D0; color: #065F46; padding: 9px 13px; border-radius: 8px; font-size: 13px; margin: -4px 0 12px; }
.gc-redeem { margin: 8px 0 14px; padding: 12px 14px; background: #FEF9C3; border: 1px solid #FDE68A; border-radius: 10px; }
.gc-redeem a { color: #854D0E; font-weight: 600; text-decoration: none; }
.gc-redeem a:hover { text-decoration: underline; }
.email-hint a { color: var(--green); font-weight: 600; }
.price-summary { background: #F1F5F9; border-radius: 8px; padding: 12px 16px; margin: 14px 0; }
.price-summary .grand { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); font-size: 17px; }
.err { color: #B91C1C; font-size: 14px; margin-top: 8px; }

/* Confirm + cancel pages */
.confirm-card { background: white; border-radius: 12px; padding: 28px; max-width: 560px; margin: 30px auto; box-shadow: var(--shadow); text-align: center; }
.confirm-card h1 { margin: 0 0 6px; font-size: 26px; }
.confirm-card .venue-name { color: var(--muted); margin: 0 0 4px; }
.confirm-card .when { font-size: 17px; margin: 0 0 18px; }
.code-box { background: #ECFDF5; border-radius: 10px; padding: 18px; margin: 18px 0; }
.code-box .lbl { font-size: 12px; color: var(--muted); }
.code-box .code { font-family: Menlo, Consolas, monospace; font-size: 38px; font-weight: 700; color: var(--green); letter-spacing: 8px; }
.code-box small { color: var(--muted); }
.total { font-size: 15px; }
.badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; vertical-align: middle; }
.badge.ok { background: #16A34A; color: white; }
.badge.warn { background: #F59E0B; color: white; }
.actions { display: flex; gap: 12px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.ok-banner { background: #ECFDF5; border: 1px solid #BBF7D0; color: var(--green); padding: 12px; border-radius: 8px; margin-top: 14px; }

footer { text-align: center; color: var(--muted); padding: 20px; font-size: 12px; }

/* ============================================================================
   Mobile polish — tightened paddings, larger touch targets (44px+), iOS-safe
   16px input fonts (no auto-zoom), better stacked layouts.
   ============================================================================ */
@media (max-width: 720px) {
    .topbar { padding: 11px 14px; }
    .topbar-right { gap: 10px; }
    .brand { font-size: 17px; }
    .link-out { font-size: 13px; }
    .account-link { padding: 6px 12px; font-size: 12.5px; }

    .container { padding: 16px 14px; }

    .loading, .empty { padding: 0; }

    /* Home hero shrinks but stays sharp */
    .hero { padding: 28px 14px 22px; background: radial-gradient(ellipse at top, #F0FDF4 0%, var(--bg) 70%); }
    .hero h1 { font-size: 26px; line-height: 1.18; letter-spacing: -.015em; }
    .hero p { font-size: 14.5px; margin-bottom: 18px; }
    /* The filter row keeps the pill on tablet but stacks cleanly on small mobile. */
    .filter-row { flex-direction: column; gap: 6px; padding: 6px; border-radius: 14px; }
    .filter-row select, .filter-row input { padding: 12px 16px; font-size: 16px; min-height: 44px; }
    .filter-row .btn.primary { width: 100%; min-height: 46px; font-size: 15px; padding: 12px 16px; border-radius: 10px !important; }

    /* Venue card grid: snug gap, taller hero image, name+amenities can wrap */
    .franchise-grid { margin-top: 14px; gap: 14px; grid-template-columns: 1fr; }
    .franchise-card .hero { height: 200px; }
    .franchise-card .body { padding: 14px; }
    .franchise-card h3 { font-size: 16.5px; }
    .franchise-card .loc-row-card { flex-wrap: wrap; row-gap: 6px; }
    .franchise-card .amenities-row { flex-wrap: wrap; justify-content: flex-start; }
    .franchise-card .desc { font-size: 13.5px; }

    /* ===== Venue page ===== */
    .venue-page { padding-bottom: 40px; }
    .venue-hero-img { height: 220px; border-radius: 12px; margin-bottom: 14px; }
    .venue-hero-img.placeholder { font-size: 64px; }

    .venue-header { flex-direction: column; align-items: flex-start; gap: 10px; padding-bottom: 14px; margin-bottom: 16px; }
    .venue-header h1 { font-size: 22px; line-height: 1.25; margin: 0 0 4px; }
    .loc-row { font-size: 13.5px; }
    .contact-row { gap: 10px; font-size: 13.5px; flex-wrap: wrap; }
    .contact-row a {
        display: inline-flex; align-items: center; gap: 4px;
        background: #F1F5F9; padding: 6px 11px; border-radius: 999px;
        font-size: 13px; color: var(--green); text-decoration: none;
        min-height: 32px;
    }
    .from-price { padding: 8px 14px; font-size: 13px; align-self: flex-start; border-radius: 8px; }
    .from-price b { font-size: 17px; }

    /* About: cap line length */
    .venue-about p { font-size: 14.5px; line-height: 1.6; }

    /* Amenity rail (now inline above the main on mobile) */
    .amenity-rail { padding: 14px 14px 10px; border-radius: 10px; margin-bottom: 18px; }
    .amenity-rail h3 { margin-bottom: 8px; font-size: 14.5px; }
    .amenity-rail ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
    .amenity-rail li { padding: 7px 0; font-size: 13px; }
    .amenity-rail li svg { width: 18px; height: 18px; }

    /* Photo gallery: wide thumbs you can swipe through */
    .venue-gallery h3 { font-size: 14.5px; }
    .gallery-strip { grid-auto-columns: 72vw; gap: 8px; }
    .gallery-thumb { height: 180px; border-radius: 10px; }

    /* Booking section */
    .venue-book { padding: 18px 16px; border-radius: 12px; }
    .venue-book h2 { font-size: 19px; }
    .venue-book .policy { font-size: 12.5px; margin-bottom: 14px; }

    /* Bay cards: horizontal layout (small image left, text right) saves vertical space */
    .bay-list { grid-template-columns: 1fr; gap: 10px; }
    .bay-card { display: grid; grid-template-columns: 110px 1fr; align-items: stretch; }
    .bay-img { height: 100%; min-height: 100px; }
    .bay-img.placeholder { font-size: 28px; }
    .bay-body { padding: 12px 14px; }
    .bay-name { font-size: 14px; margin-bottom: 4px; }
    .bay-desc { -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; }
    .bay-price { font-size: 13.5px; }

    /* Booking controls: date full-width, duration+players half-half */
    .booking-controls { grid-template-columns: 1fr 1fr; gap: 10px; }
    .booking-controls > div:first-child { grid-column: 1 / -1; }
    .booking-controls label { font-size: 11.5px; }
    .booking-controls input, .booking-controls select { padding: 12px 14px; font-size: 16px; min-height: 44px; }

    /* Slot grid: 3 columns, tighter buttons but still 44px tall */
    .slot-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .slot-btn { padding: 12px 4px; font-size: 13.5px; min-height: 44px; border-radius: 8px; }

    /* Checkout block */
    #checkoutBox { padding: 18px 16px; border-radius: 12px; }
    #checkoutBox h2 { font-size: 19px; }
    #checkoutBox .row { grid-template-columns: 1fr; gap: 10px; }
    #checkoutBox input { padding: 12px 14px; font-size: 16px; min-height: 44px; }
    .price-summary { padding: 14px 16px; }
    .price-summary .grand { font-size: 16px; }

    /* Generic buttons: minimum 44px tap target */
    .btn { min-height: 42px; padding: 11px 18px; }
    .btn.big { min-height: 50px; font-size: 16px; }

    /* Confirm page */
    .confirm-card { padding: 22px 18px; margin: 18px auto; border-radius: 12px; }
    .confirm-card h1 { font-size: 22px; }
    .code-box .code { font-size: 32px; letter-spacing: 6px; }

    /* Lightbox: respect iOS safe areas + give close button more space */
    .lb-close { top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); }
    .lb-prev, .lb-next { width: 42px; height: 42px; font-size: 22px; }
    .lb-counter { bottom: max(18px, env(safe-area-inset-bottom)); }

    footer { padding: 16px; font-size: 11.5px; }
}

/* Very small phones (iPhone SE etc.) */
@media (max-width: 380px) {
    .hero h1 { font-size: 23px; }
    .venue-header h1 { font-size: 20px; }
    .amenity-rail ul { grid-template-columns: 1fr; }
    .slot-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Touch devices: disable hover lift on cards (otherwise gets stuck after tap) */
@media (hover: none) {
    .franchise-card:hover { transform: none; box-shadow: var(--shadow); }
    .bay-card:hover { transform: none; border-color: var(--border); }
    .bay-card.sel:hover { border-color: var(--green); }
    .gallery-thumb:hover { opacity: 1; transform: none; }
}

/* ============================================================================
   Venue templates — owner-selectable visual themes for the public venue page.
   All 3 share the same DOM structure (set by venue.js renderVenue) and JS handlers;
   the body class (set on render) routes which theme block applies.
   ============================================================================ */

/* ===== Width / container fix =====
   Every template uses .container as the centered wrap. Bumped to 1200 so wide screens don't feel
   cramped. Per-template overrides (further down) intentionally narrow Editorial to 920 and Studio
   to 760 for their typographic feel — Minimal stays at 1200 for the SaaS density. */
.venue-page { width: 100%; box-sizing: border-box; }

/* ===== Owner-branded nav (Phase 10 polish) =====
   Top nav for venue pages. Phase 10 changes:
     - Logo OR text branding (not both) — venue.js renders only one
     - Larger logo (44px tall, up from 32) so it doesn't look cramped on big monitors
     - Tighter container padding so wide screens don't sprawl
     - Hover transitions on nav links for a more responsive feel
     - Book Now button gets a hover lift */
.topbar { display: flex; align-items: center; gap: 20px; padding: 14px 28px; }
.topbar .brand.venue-brand { display: flex; align-items: center; gap: 10px; font-size: 18px; flex-shrink: 0; line-height: 1; }
.topbar .venue-logo { max-height: 44px; width: auto; display: block; }
.topbar .venue-nav { flex: 1; display: flex; gap: 26px; align-items: center; margin-left: 18px; flex-wrap: wrap; }
.topbar .venue-nav-link { color: inherit; text-decoration: none; font-size: 14px; font-weight: 500; opacity: 0.78; transition: opacity .15s, color .15s; }
.topbar .venue-nav-link:hover { opacity: 1; }
.topbar .venue-nav-right { flex-shrink: 0; }
.topbar .venue-book-btn { padding: 10px 22px; font-size: 13.5px; font-weight: 600; border-radius: 999px; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.topbar .venue-book-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(15,81,50,.18); }
@media (max-width: 720px) {
    .topbar .venue-nav { display: none; }
    .topbar { gap: 12px; padding: 10px 16px; }
    .topbar .venue-logo { max-height: 36px; }
}

/* ===== Shared additions (Contact section, Footer, brand logo) ===== */
.venue-contact-section { margin: 30px 0 14px; padding: 22px 24px; background: var(--card-bg, #ffffff); border-radius: 14px; box-shadow: var(--shadow, 0 1px 3px rgba(0,0,0,0.05)); }
.venue-contact-section h2 { margin: 0 0 14px; font-size: 22px; }
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.contact-item { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; }
.contact-item .contact-icon { font-size: 20px; line-height: 1; padding-top: 2px; }
.contact-item b { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted, #64748B); font-weight: 700; margin-bottom: 2px; }
.contact-item a { color: inherit; text-decoration: none; }
.contact-item a:hover { text-decoration: underline; }
.contact-layout { display: block; }
.contact-layout.has-form { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
@media (max-width: 720px) { .contact-layout.has-form { grid-template-columns: 1fr; gap: 18px; } }
.contact-form .cf-row { margin-bottom: 14px; }
.contact-form label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; color: var(--muted, #64748B); margin-bottom: 6px; }
.contact-form label small { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--muted, #64748B); }
.contact-form input, .contact-form textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border, #E5E7EB); border-radius: 8px; font-family: inherit; font-size: 14px; box-sizing: border-box; }
.cf-msg { margin-top: 10px; padding: 10px 14px; border-radius: 8px; font-size: 13.5px; }
.cf-msg.ok      { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }
.cf-msg.err     { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }
.cf-msg.sending { background: #EFF6FF; color: #1E40AF; border: 1px solid #BFDBFE; }

/* ===== Feature Boxes (between About and Bays) ===== */
.venue-features { margin: 18px 0; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.feature-box { padding: 22px 22px 20px; background: var(--card-bg, #FFFFFF); border-radius: 12px; border: 1px solid var(--border, #E5E7EB); }
.feature-box .feature-icon { font-size: 26px; line-height: 1; margin-bottom: 10px; }
.feature-box h3 { margin: 0 0 6px; font-size: 16px; }
.feature-box p { margin: 0; font-size: 13.5px; color: var(--muted, #64748B); line-height: 1.55; }

/* ===== Footer (Phase 10 tighter spacing — was leaving a huge gap below) ===== */
.venue-footer { margin-top: 40px; padding: 28px 22px 18px; border-top: 1px solid var(--border, #E5E7EB); }
.footer-inner { max-width: 1200px; margin: 0 auto; }
.footer-blocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; padding-bottom: 20px; }
.footer-block h4 { margin: 0 0 12px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--muted, #64748B); }
.footer-block ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.footer-block li { font-size: 13.5px; }
.footer-block li a { color: inherit; text-decoration: none; opacity: 0.85; }
.footer-block li a:hover { opacity: 1; text-decoration: underline; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 18px; border-top: 1px solid var(--border, #E5E7EB); }
.footer-copy { font-size: 13px; color: var(--muted, #64748B); }
.footer-right { font-size: 12.5px; color: var(--muted, #64748B); }
.footer-right a { color: inherit; }
.footer-logo { max-height: 32px; width: auto; opacity: 0.85; }
.footer-copy { font-size: 13px; color: var(--muted, #64748B); }
.footer-right { font-size: 13px; color: var(--muted, #64748B); }
.footer-right a { color: inherit; text-decoration: none; }
.footer-right a:hover { color: var(--accent, #2563EB); text-decoration: underline; }
.venue-logo { display: inline-block; }

/* Three modern-minimal templates. All share:
   - Generous whitespace (padding/margin)
   - Restrained palette (1 accent max, no gradients)
   - Thin 1px borders (no offset/colored shadows)
   - Clean typography
   They differ in: font choice, layout density, accent color, and how content is grouped.
*/

/* ===== Template: EDITORIAL (default) — modern magazine feel ===== */
/* Off-white background, dark text, serif display headlines, single-column flow. */
body.tmpl-editorial { background: #FAFAF7; color: #1A1A1A; font-family: 'Inter', system-ui, sans-serif; }
body.tmpl-editorial .topbar { background: rgba(250,250,247,0.92); border-bottom: 1px solid #E7E5DF; backdrop-filter: blur(8px); }
body.tmpl-editorial .topbar .brand { color: #1A1A1A; font-family: 'Fraunces', 'Playfair Display', Georgia, serif; font-weight: 600; }
body.tmpl-editorial .topbar .brand b { font-family: 'Fraunces', 'Playfair Display', Georgia, serif; }
body.tmpl-editorial .topbar .link-out, body.tmpl-editorial .topbar .account-link { color: #6B6862; }
body.tmpl-editorial .venue-page, body.tmpl-editorial .container { max-width: 1180px; }
body.tmpl-editorial .venue-hero-img { height: 360px; border-radius: 0; margin-bottom: 36px; }
body.tmpl-editorial .venue-header { padding: 0 0 28px; border-bottom: 1px solid #E7E5DF; margin-bottom: 36px; }
body.tmpl-editorial .venue-header h1 { font-family: 'Fraunces', 'Playfair Display', Georgia, serif; font-size: 52px; font-weight: 500; letter-spacing: -0.025em; line-height: 1.05; color: #1A1A1A; }
body.tmpl-editorial .venue-header .loc-row { color: #6B6862; font-size: 14px; margin-top: 12px; }
body.tmpl-editorial .venue-header .contact-row { margin-top: 14px; }
body.tmpl-editorial .venue-header .contact-row a { color: #1A1A1A; border-bottom: 1px solid #1A1A1A; padding-bottom: 1px; text-decoration: none; }
/* Phase 10: the .from-price pill uses the dark-green base bg (var(--green) = #0F5132).
   The previous template overrides set the text to gray, which had near-invisible contrast
   on the dark pill. Force white text + bold in every template so it's readable. */
body.tmpl-editorial .from-price { color: #FFFFFF; font-size: 14px; }
body.tmpl-editorial .from-price b { color: #FFFFFF; }
body.tmpl-editorial h2 { font-family: 'Fraunces', 'Playfair Display', Georgia, serif; font-size: 32px; font-weight: 500; letter-spacing: -0.015em; color: #1A1A1A; margin-bottom: 18px; }
body.tmpl-editorial h3 { font-family: 'Fraunces', 'Playfair Display', Georgia, serif; font-weight: 500; }
body.tmpl-editorial .venue-about p { font-size: 17px; line-height: 1.75; color: #2A2A2A; }
body.tmpl-editorial .venue-about, body.tmpl-editorial .venue-gallery,
body.tmpl-editorial .venue-book, body.tmpl-editorial .venue-packages,
body.tmpl-editorial .venue-contact-section, body.tmpl-editorial #checkoutBox {
    background: transparent; box-shadow: none; border: 0; border-top: 1px solid #E7E5DF; border-radius: 0;
    padding: 36px 0 0; margin: 0 0 36px;
}
body.tmpl-editorial .amenity-rail { background: transparent; border-left: 1px solid #E7E5DF; padding-left: 28px; }
body.tmpl-editorial .bay-card { background: #FFFFFF; border: 1px solid #E7E5DF; border-radius: 4px; box-shadow: none; }
body.tmpl-editorial .bay-card.sel { border-color: #1A1A1A; }
body.tmpl-editorial .bay-card .bay-name { font-family: 'Fraunces', Georgia, serif; font-size: 18px; }
body.tmpl-editorial .package-card { background: #FFFFFF !important; border: 1px solid #E7E5DF !important; border-radius: 4px !important; box-shadow: none !important; }
body.tmpl-editorial .btn { background: #FFFFFF; color: #1A1A1A; border: 1px solid #1A1A1A; border-radius: 4px; font-weight: 500; }
body.tmpl-editorial .btn.primary, body.tmpl-editorial .btn.big { background: #1A1A1A; color: #FAFAF7; border-color: #1A1A1A; }
body.tmpl-editorial .slot-pill { background: #FFFFFF; border: 1px solid #D5D2CB; border-radius: 4px; color: #1A1A1A; }
body.tmpl-editorial .slot-pill:hover { border-color: #1A1A1A; background: #1A1A1A; color: #FAFAF7; }
body.tmpl-editorial .venue-footer { background: transparent; border-top: 1px solid #E7E5DF; color: #6B6862; }
body.tmpl-editorial .footer-copy, body.tmpl-editorial .footer-right { color: #6B6862; }
body.tmpl-editorial .footer-right a:hover { color: #1A1A1A; }
body.tmpl-editorial .venue-contact-section h2 { font-family: 'Fraunces', Georgia, serif; }

/* ===== Template: MINIMAL — Linear / Stripe-style clean SaaS ===== */
/* Pure white, tight Inter throughout, 1px hairline borders, subtle indigo accent, dense grid. */
body.tmpl-minimal { background: #FFFFFF; color: #0A0A0A; font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
body.tmpl-minimal .topbar { background: rgba(255,255,255,0.96); border-bottom: 1px solid #EDEDED; backdrop-filter: blur(10px); padding: 14px 24px; }
body.tmpl-minimal .topbar .brand { color: #0A0A0A; font-weight: 600; letter-spacing: -0.01em; }
body.tmpl-minimal .topbar .link-out, body.tmpl-minimal .topbar .account-link { color: #6E6E6E; font-weight: 500; font-size: 13.5px; }
body.tmpl-minimal .topbar .link-out:hover, body.tmpl-minimal .topbar .account-link:hover { color: #0A0A0A; }
body.tmpl-minimal .venue-hero-img { height: 320px; border-radius: 8px; margin-bottom: 28px; }
body.tmpl-minimal .venue-header { padding: 0 0 20px; border: 0; margin-bottom: 28px; }
body.tmpl-minimal .venue-header h1 { font-size: 42px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.08; color: #0A0A0A; }
body.tmpl-minimal .venue-header .loc-row { color: #6E6E6E; font-size: 14px; margin-top: 8px; }
body.tmpl-minimal .venue-header .contact-row a { color: #6E6E6E; text-decoration: none; font-size: 13.5px; }
body.tmpl-minimal .venue-header .contact-row a:hover { color: #0A0A0A; }
body.tmpl-minimal .from-price { font-size: 13.5px; color: #FFFFFF; }
body.tmpl-minimal .from-price b { color: #FFFFFF; }
body.tmpl-minimal h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; color: #0A0A0A; margin-bottom: 14px; }
body.tmpl-minimal h3 { font-weight: 600; letter-spacing: -0.01em; }
body.tmpl-minimal .venue-about, body.tmpl-minimal .venue-gallery,
body.tmpl-minimal .venue-book, body.tmpl-minimal .venue-packages,
body.tmpl-minimal .venue-contact-section, body.tmpl-minimal #checkoutBox {
    background: #FFFFFF; border: 1px solid #EDEDED; border-radius: 12px; box-shadow: none;
    padding: 24px 26px; margin-bottom: 16px;
}
body.tmpl-minimal .amenity-rail { background: #FAFAFA; border: 1px solid #EDEDED; border-radius: 12px; box-shadow: none; padding: 22px 22px; }
body.tmpl-minimal .bay-card { background: #FFFFFF; border: 1px solid #EDEDED; border-radius: 10px; box-shadow: none; transition: border-color .15s; }
body.tmpl-minimal .bay-card:hover { border-color: #C7C7C7; }
body.tmpl-minimal .bay-card.sel { border-color: #0A0A0A; box-shadow: 0 0 0 1px #0A0A0A; }
body.tmpl-minimal .bay-card .bay-price { color: #0A0A0A; font-weight: 600; }
body.tmpl-minimal .package-card { background: #FFFFFF !important; border: 1px solid #EDEDED !important; border-radius: 10px !important; box-shadow: none !important; }
body.tmpl-minimal .btn { background: #FFFFFF; color: #0A0A0A; border: 1px solid #D4D4D4; border-radius: 8px; font-weight: 500; }
body.tmpl-minimal .btn:hover { border-color: #0A0A0A; }
body.tmpl-minimal .btn.primary, body.tmpl-minimal .btn.big { background: #0A0A0A; color: #FFFFFF; border-color: #0A0A0A; }
body.tmpl-minimal .btn.primary:hover, body.tmpl-minimal .btn.big:hover { background: #262626; }
body.tmpl-minimal .slot-pill { background: #FFFFFF; border: 1px solid #E5E5E5; border-radius: 8px; color: #0A0A0A; font-weight: 500; }
body.tmpl-minimal .slot-pill:hover { border-color: #0A0A0A; background: #0A0A0A; color: #FFFFFF; }
body.tmpl-minimal label { color: #6E6E6E; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; }
body.tmpl-minimal input, body.tmpl-minimal select, body.tmpl-minimal textarea { border: 1px solid #E5E5E5; border-radius: 8px; }
body.tmpl-minimal input:focus, body.tmpl-minimal select:focus, body.tmpl-minimal textarea:focus { border-color: #0A0A0A; outline: none; box-shadow: 0 0 0 3px rgba(10,10,10,0.04); }
body.tmpl-minimal .venue-footer { background: transparent; border-top: 1px solid #EDEDED; color: #6E6E6E; }

/* ===== Template: STUDIO — gallery minimalism, image-led, narrow column ===== */
/* Pure white, Inter light weights, lots of whitespace, narrow content column, almost no chrome. */
body.tmpl-studio { background: #FFFFFF; color: #111111; font-family: 'Inter', system-ui, sans-serif; font-weight: 400; -webkit-font-smoothing: antialiased; }
body.tmpl-studio .topbar { background: #FFFFFF; border-bottom: 0; padding: 22px 28px; }
body.tmpl-studio .topbar .brand { color: #111111; font-weight: 500; font-size: 15px; letter-spacing: -0.005em; }
body.tmpl-studio .topbar .link-out, body.tmpl-studio .topbar .account-link { color: #767676; font-weight: 400; font-size: 13px; letter-spacing: 0.02em; }
body.tmpl-studio .venue-page, body.tmpl-studio .container { max-width: 1080px; }
body.tmpl-studio .venue-layout { display: block; }
body.tmpl-studio .venue-main { width: 100%; }
body.tmpl-studio .amenity-rail { float: none; width: 100%; max-width: 100%; }
body.tmpl-studio .venue-hero-img { height: 460px; border-radius: 0; margin-bottom: 56px; }
body.tmpl-studio .venue-header { text-align: center; padding: 0 0 24px; border: 0; margin-bottom: 56px; }
body.tmpl-studio .venue-header h1 { font-size: 34px; font-weight: 300; letter-spacing: -0.015em; line-height: 1.2; color: #111111; }
body.tmpl-studio .venue-header .loc-row { color: #767676; font-size: 13.5px; margin-top: 14px; font-weight: 400; }
body.tmpl-studio .venue-header .contact-row { justify-content: center; margin-top: 18px; }
body.tmpl-studio .venue-header .contact-row a { color: #767676; font-size: 13px; }
body.tmpl-studio .from-price { color: #FFFFFF; font-size: 13px; font-weight: 500; }
body.tmpl-studio .from-price b { color: #FFFFFF; font-weight: 700; }
body.tmpl-studio h2 { text-align: center; font-size: 24px; font-weight: 400; letter-spacing: -0.005em; color: #111111; margin: 48px 0 28px; }
body.tmpl-studio h3 { font-weight: 500; font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em; color: #767676; }
body.tmpl-studio .venue-about p { font-size: 16px; line-height: 1.75; color: #2E2E2E; max-width: 580px; margin: 0 auto; text-align: center; }
body.tmpl-studio .venue-about, body.tmpl-studio .venue-gallery,
body.tmpl-studio .venue-book, body.tmpl-studio .venue-packages,
body.tmpl-studio .venue-contact-section, body.tmpl-studio #checkoutBox,
body.tmpl-studio .amenity-rail {
    background: transparent; border: 0; box-shadow: none; border-radius: 0;
    padding: 48px 0; margin: 0;
}
body.tmpl-studio .venue-book, body.tmpl-studio .venue-contact-section { border-top: 1px solid #ECECEC; }
body.tmpl-studio .bay-list { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
body.tmpl-studio .bay-card { background: transparent; border: 0; border-radius: 0; box-shadow: none; }
body.tmpl-studio .bay-card .bay-img { height: 180px; border-radius: 2px; }
body.tmpl-studio .bay-card.sel .bay-img { outline: 2px solid #111111; outline-offset: 4px; }
body.tmpl-studio .bay-card .bay-body { padding: 14px 0 0; }
body.tmpl-studio .bay-card .bay-name { font-weight: 500; font-size: 15px; }
body.tmpl-studio .bay-card .bay-price { color: #767676; font-size: 13px; font-weight: 400; }
body.tmpl-studio .package-card { background: #FFFFFF !important; border: 1px solid #ECECEC !important; border-radius: 0 !important; box-shadow: none !important; padding: 22px !important; }
body.tmpl-studio .btn { background: transparent; color: #111111; border: 1px solid #111111; border-radius: 0; font-weight: 400; letter-spacing: 0.02em; padding: 11px 22px; font-size: 13px; }
body.tmpl-studio .btn:hover { background: #111111; color: #FFFFFF; }
body.tmpl-studio .btn.primary, body.tmpl-studio .btn.big { background: #111111; color: #FFFFFF; }
body.tmpl-studio .btn.primary:hover, body.tmpl-studio .btn.big:hover { background: #2E2E2E; }
body.tmpl-studio .slot-pill { background: transparent; border: 1px solid #D8D8D8; border-radius: 0; color: #111111; font-weight: 400; }
body.tmpl-studio .slot-pill:hover { border-color: #111111; background: #111111; color: #FFFFFF; }
body.tmpl-studio label { color: #767676; font-size: 11.5px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em; }
body.tmpl-studio input, body.tmpl-studio select, body.tmpl-studio textarea { border: 0; border-bottom: 1px solid #D8D8D8; border-radius: 0; padding-left: 0; background: transparent; }
body.tmpl-studio input:focus, body.tmpl-studio select:focus, body.tmpl-studio textarea:focus { border-bottom-color: #111111; outline: none; box-shadow: none; }
body.tmpl-studio .venue-footer { background: transparent; border-top: 1px solid #ECECEC; color: #767676; margin-top: 72px; padding: 36px 0; }
body.tmpl-studio .footer-inner { font-size: 12.5px; letter-spacing: 0.02em; }
body.tmpl-studio .footer-right a:hover { color: #111111; }