@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --ink: #1E293B;
    --ink-soft: #64748B;
    --paper: #FFFFFF;
    --card: #FFFFFF;
    --chili: #F97316;
    --chili-dark: #EA580C;
    --chili-light: #FFEDD5;
    --sage: var(--chili);
    --success: #16A34A;
    --danger: #DC2626;
    --danger-dark: #B91C1C;
    --danger-bg: #FEE2E2;
    --line: #E2E8F0;
    --shadow: 0 4px 16px rgba(30, 41, 59, 0.07);
    --radius: 14px;
    /* Chrome (site header, owner/master sidebars) is a light surface now —
       --header-bg is that surface colour. --navy is the fixed accent used
       for text/icons/buttons *within* that chrome (logo, nav links, login
       button), kept as its own variable rather than reusing --ink because
       chrome never participates in the per-restaurant dark mode below
       (same reasoning the old fixed --header-bg followed). */
    --header-bg: #FFFFFF;
    --navy: #334155;
}

/* Per-restaurant dark mode, set via the "Booking page appearance" option
   under restaurant setup. Only the page palette flips — --header-bg stays
   fixed so the site header/logo look the same in either mode. See
   includes/header.php: this is scoped to one restaurant's own
   customer-facing pages only — for the master's site-wide dark preset
   (every other page), see body.site-theme-dark below instead. */
body.theme-dark {
    --ink: #ECEDF2;
    --ink-soft: #A7AFC0;
    --paper: #12151C;
    --card: #1D2230;
    --line: #2E3444;
    --shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}

/* Master-only site-wide "Dark Mode" preset (master/site_theme.php) —
   applied to every page except an individual restaurant's own pages (those
   keep their own light/dark choice above). Same dark palette as
   body.theme-dark, plus the header chrome (--header-bg) that the
   per-restaurant version deliberately leaves alone — a site-wide dark mode
   needs the header to go dark too, or a bright white bar would sit above
   an otherwise-dark page. --navy itself is left alone (still the fixed
   navy #334155) since .top-banner uses it as a *background* — flipping it
   would break that instead of fixing it — so the header/logo/nav text that
   normally reads var(--navy) gets its own explicit light colour below
   instead of going through the variable. */
body.site-theme-dark {
    --ink: #ECEDF2;
    --ink-soft: #A7AFC0;
    --paper: #12151C;
    --card: #1D2230;
    --line: #2E3444;
    --shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
    --header-bg: #1D2230;
}
body.site-theme-dark .site-header,
body.site-theme-dark .logo,
body.site-theme-dark .main-nav a {
    color: #ECEDF2;
}

/* Master-only site-wide "Light Mode" preset (master/site_theme.php) — the
   same light backgrounds as the brand default, just without the orange:
   --chili shifts to blue instead, so every button/link/accent that already
   reads var(--chili) picks it up automatically. --sage is set explicitly
   here too rather than relying on :root's own "--sage: var(--chili)" to
   follow along — that indirection is declared on :root, so it resolves
   against :root's *own* --chili (still the brand orange, since :root never
   gets this class), not this element's override; --sage would silently
   stay orange without restating it here. Never applied on an individual
   restaurant's own pages — those keep their own accent colour (or the
   brand orange) regardless of this site-wide setting. */
body.theme-blue {
    --chili: #2563EB;
    --chili-dark: #1D4ED8;
    --chili-light: #DBEAFE;
    --sage: #2563EB;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: 'Inter', -apple-system, sans-serif;
    background: var(--paper);
    color: var(--ink);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Pushes .site-footer to the bottom of the viewport on short pages (e.g. an
   empty Find My Reservation page) instead of leaving a gap below it — the
   header/top-banner/main/footer stack in a flex column and main absorbs any
   extra vertical space. */
main {
    flex: 1 0 auto;
    width: 100%;
}

h1, h2, h3, h4 {
    font-family: 'Inter', -apple-system, sans-serif;
    color: var(--ink);
    margin: 0 0 0.4em;
}

a { color: inherit; text-decoration: none; }

.container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Slim announcement bar above the main header, linking to business.php
   ("For Restaurant Owners"). Deliberately not the brand orange — orange is
   already the site's one CTA colour (booking buttons, the Sign In pill,
   etc.), so a second orange element up here would visually compete with
   those instead of reading as a quieter, secondary strip. Uses --navy
   (already established elsewhere as the header/nav foreground colour)
   instead. Scrolls away with the page — only .site-header below it is
   sticky — since this is a lower-priority notice, not primary navigation. */
.top-banner {
    background: var(--navy);
    text-align: center;
    padding: 6px 0;
}
.top-banner a {
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.top-banner a:hover { text-decoration: underline; }

/* Header */
.site-header {
    background: var(--header-bg);
    color: var(--navy);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 10;
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    flex-wrap: wrap;
    gap: 10px;
}
.logo {
    font-family: 'Inter', -apple-system, sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--navy);
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
/* Brand mark (table + 4 chairs) used in the header, sidebar logos, and
   login/register page headings. Solid orange table with currentColor
   chairs, so it reads correctly against light chrome and the white login
   card alike without needing separate light/dark variants. */
.logo-mark { flex-shrink: 0; }
h1 .logo-mark { vertical-align: -5px; margin-right: 2px; }
.main-nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; row-gap: 10px; }
/* With a 4th nav item added (see the "For Restaurants" + "Sign In"/"My
   Reservations" additions), the nav can get tight on narrow phones — allow
   it to wrap onto a second line instead of squeezing the "Sign In"/"My
   Reservations" pill until its own text wraps illegibly. */
@media (max-width: 480px) {
    .main-nav { gap: 14px; }
}
.main-nav a { color: var(--navy); font-weight: 600; font-size: 0.85rem; }
.main-nav a:hover { color: var(--chili); }
/* .main-nav a's own color rule (class + element = higher specificity than
   a single class) would otherwise beat .owner-link's white text, since it
   comes later in the cascade but doesn't win on specificity — qualifying
   the selector with "a" here matches that specificity so this actually
   applies. */
.main-nav a.owner-link {
    background: var(--chili);
    color: #fff;
    border: 1px solid var(--chili);
    padding: 7px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
}
.main-nav a.owner-link:hover { background: var(--chili-dark); border-color: var(--chili-dark); color: #fff; }

/* Alerts */
.alert {
    padding: 12px 16px;
    border-radius: 10px;
    margin: 20px 0;
    font-weight: 500;
}
.alert-success { background: #E4F2E8; color: #24593C; }
.alert-error { background: var(--danger-bg); color: var(--danger-dark); }
.alert ul { margin: 0; padding-left: 18px; }

/* Hero / search */
.hero {
    padding: 48px 0 24px;
    text-align: center;
}
.hero h1 {
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    max-width: 900px;
    white-space: nowrap;
    margin: 0 auto 8px;
}
@media (max-width: 720px) {
    .hero h1 { white-space: normal; font-size: 1.7rem; }
}
.hero-sub {
    color: var(--ink-soft);
    font-size: 1.02rem;
    max-width: 520px;
    margin: 0 auto;
}

/* OpenTable-style inline search bar: a white rounded card holding date /
   time / party size / restaurant-or-cuisine, all as plain-looking fields
   separated by thin dividers, plus one prominent orange submit button.
   Field names (date, time, party_size) match restaurant.php's own booking
   bar exactly, so whatever's picked here rides along in the URL when a
   restaurant card is clicked and pre-fills that restaurant's own search —
   real carry-through, not just a cosmetic match. */
.search-card {
    max-width: 1180px;
    margin: 28px auto 0;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.search-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 16px;
    border-right: 1px solid var(--line);
}
.search-field:last-of-type { border-right: none; }
.search-field label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
}
.search-field input,
.search-field select {
    border: none;
    padding: 2px 0 0;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink);
    background: transparent;
}
.search-field input:focus,
.search-field select:focus { outline: none; }
.search-loc { flex: 1; min-width: 200px; }
.search-loc input { width: 100%; font-weight: 500; }
.search-btn {
    background: var(--chili);
    color: #fff;
    border: none;
    padding: 13px 28px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: 4px;
}
.search-btn:hover { background: var(--chili-dark); }

.filter-pills {
    max-width: 1180px;
    margin: 14px auto 0;
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}
.filter-pills select {
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--ink);
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-family: inherit;
}
.reset-filters-link {
    align-self: center;
    color: var(--ink-soft);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.reset-filters-link:hover { color: var(--chili); text-decoration: underline; }

@media (max-width: 780px) {
    .search-card { flex-direction: column; align-items: stretch; padding: 14px 16px; }
    .search-field { border-right: none; border-bottom: 1px solid var(--line); padding: 10px 4px; }
    .search-btn { margin-left: 0; width: 100%; padding: 14px; }
}

.location-status {
    text-align: center;
    font-size: 0.88rem;
    color: var(--ink-soft);
    margin: 14px 0 0;
}
.location-status a { color: var(--sage); font-weight: 600; }

.location-banner-title {
    text-align: center;
    margin: 16px 0 0;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--ink);
}

/* Restaurant grid */
.restaurant-grid {
    display: grid;
    /* auto-fit (not auto-fill) collapses any unused column tracks instead
       of leaving them as invisible-but-space-holding gaps, and capping the
       column at 300px (instead of 1fr, which would stretch cards to fill
       whatever's left) means a short row doesn't stretch either — combined
       with justify-content, a partial row (e.g. 3 cards) centers as a
       group instead of hugging the left edge with dead space on the right. */
    grid-template-columns: repeat(auto-fit, minmax(260px, 300px));
    justify-content: center;
    gap: 22px;
    padding: 20px 0 60px;
}
.restaurant-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform 0.15s ease;
    display: block;
}
.restaurant-card:hover { transform: translateY(-3px); }
.restaurant-card-hidden { display: none; }

.view-more-wrap { text-align: center; margin: -30px 0 50px; }
.view-more-btn {
    background: transparent;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    padding: 12px 28px;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--ink);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.view-more-btn:hover { border-color: var(--chili); color: var(--chili); }
.restaurant-card-img {
    height: 140px;
    background-color: #F1F5F9;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.restaurant-card-body { padding: 16px 18px 20px; }
.cuisine-tag {
    display: inline-block;
    color: var(--sage);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 6px;
}
.distance-tag { color: var(--ink-soft); text-transform: none; letter-spacing: normal; font-weight: 500; }
.description { color: var(--ink-soft); font-size: 0.92rem; margin: 0; }

.type-badges { margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.type-badge {
    display: inline-block;
    background: var(--line);
    color: var(--ink-soft);
    font-size: 0.78rem;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 999px;
}

.empty-state {
    text-align: center;
    color: var(--ink-soft);
    padding: 40px 0;
}
.muted { color: var(--ink-soft); font-size: 0.9rem; }

/* Generic "looks like a link but is a <button>" toggle — used to reveal a
   secondary form/section inline (e.g. manage_reservation.php's "Can't find
   your confirmation code?"). account.css has its own .account-box-scoped
   version of this same look for the login/register pages; this unscoped
   copy is for everywhere else that only loads this sitewide stylesheet. */
.link-toggle {
    background: none;
    border: none;
    color: var(--chili);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    text-align: left;
}
.link-toggle:hover { color: var(--chili-dark); text-decoration: underline; }

.lookup-code-panel {
    margin: -8px 0 24px;
    padding: 16px 18px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    max-width: 480px;
}
.lookup-code-panel .admin-form { margin: 10px 0 0; }

/* Restaurant detail page */
.restaurant-header {
    display: flex;
    gap: 24px;
    align-items: center;
    padding: 30px 0 10px;
    flex-wrap: wrap;
}
.restaurant-header-img {
    width: 160px;
    height: 120px;
    border-radius: var(--radius);
    background-color: #F1F5F9;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .restaurant-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
    .restaurant-header-img {
        width: 100%;
        height: 180px;
    }
}

/* Step indicator */
.step-indicator {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 0 8px;
    font-size: 0.92rem;
    color: var(--ink-soft);
}
.step { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.step-num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--line);
    color: var(--ink-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
}
.step.active { color: var(--ink); }
.step.active .step-num { background: var(--chili); color: #fff; }
.step.done .step-num { background: var(--success); color: #fff; }
.step-divider {
    width: 32px;
    height: 1px;
    background: var(--line);
}

/* Booking panel */
.booking-panel {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px 26px;
    margin: 24px 0 60px;
}

/* Compact inline search bar: icon + label + input per field */
.booking-bar {
    display: flex;
    align-items: stretch;
    gap: 0;
    flex-wrap: wrap;
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 8px;
}
.booking-field {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    flex: 1;
    min-width: 150px;
    border-right: 1px solid var(--line);
    cursor: pointer;
}
.booking-field-icon { font-size: 1.1rem; flex-shrink: 0; }
.booking-field-body { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.booking-field-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
    font-weight: 600;
}
.booking-field input, .booking-field select {
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink);
    background: transparent;
    width: 100%;
}
.booking-field input:focus, .booking-field select:focus { outline: none; }
.find-table-btn {
    background: var(--chili);
    color: #fff;
    border: none;
    padding: 0 32px;
    font-weight: 700;
    font-size: 0.98rem;
    cursor: pointer;
    flex-shrink: 0;
    min-width: 160px;
}
.find-table-btn:hover { background: var(--chili-dark); }

@media (max-width: 720px) {
    .booking-bar { flex-direction: column; }
    .booking-field { border-right: none; border-bottom: 1px solid var(--line); }
    .find-table-btn { padding: 14px; width: 100%; }
}

.slots-heading { font-weight: 600; margin: 20px 0 4px; }

.time-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}
.time-slot {
    background: var(--chili);
    border: none;
    border-radius: 8px;
    padding: 12px 18px;
    font-weight: 700;
    font-size: 0.92rem;
    color: #fff;
    transition: background 0.15s ease, box-shadow 0.15s ease;
    flex-shrink: 0;
}
.time-slot:hover { background: var(--chili-dark); }
.time-slot-match {
    box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--chili);
}

.notify-btn {
    display: inline-block;
    background: transparent;
    border: 1.5px solid var(--chili);
    border-radius: 8px;
    padding: 12px 18px;
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--chili);
    transition: all 0.15s ease;
}
.notify-btn:hover { background: var(--chili); color: #fff; }
.notify-btn-standalone { margin-top: 14px; }

.next-available-btn {
    display: inline-block;
    background: var(--chili);
    border: 1.5px solid var(--chili);
    border-radius: 8px;
    padding: 12px 18px;
    font-weight: 700;
    font-size: 0.92rem;
    color: #fff;
    transition: all 0.15s ease;
    margin-right: 10px;
}
.next-available-btn:hover { background: var(--chili-dark); border-color: var(--chili-dark); }

/* Quick-times: a couple of times closest to what the customer searched for,
   shown directly on the page so most people never need to open the full
   calendar. Replaces the old horizontally-scrolling strip of every slot. */
.quick-times-heading { font-weight: 600; margin: 20px 0 4px; }
.quick-times {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

.view-full-availability-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1.5px solid var(--line);
    border-radius: 8px;
    padding: 11px 18px;
    margin-top: 14px;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--ink);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.view-full-availability-btn:hover { border-color: var(--chili); color: var(--chili); }

/* Full-availability calendar popup — a date-picker plus every open time for
   the selected day, laid out as a wrapping grid (see .time-slots above)
   instead of the horizontal scroll strip, so nothing is hidden off-screen. */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.modal-overlay.modal-open { display: flex; }
.modal-panel {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    width: 100%;
    max-width: 660px;
    max-height: 88vh;
    overflow-y: auto;
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    background: var(--card);
}
.modal-header h3 { margin: 0; font-size: 1.1rem; }
.modal-close {
    background: none;
    border: none;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--ink-soft);
    cursor: pointer;
    padding: 0 2px;
}
.modal-close:hover { color: var(--chili); }
.modal-body {
    display: flex;
    gap: 24px;
    padding: 22px;
}

.avail-calendar {
    flex-shrink: 0;
    width: 240px;
    border-right: 1px solid var(--line);
    padding-right: 22px;
}
.avail-calendar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.cal-nav {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    text-decoration: none;
    font-size: 1.1rem;
    transition: background 0.15s ease, color 0.15s ease;
}
.cal-nav:hover { background: var(--chili-light); color: var(--chili-dark); }
.cal-month-label { font-weight: 700; font-size: 0.92rem; }
.avail-calendar-dow, .avail-calendar-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}
.avail-calendar-dow {
    margin-bottom: 4px;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ink-soft);
    text-align: center;
}
.avail-calendar-row { margin-bottom: 2px; }
.cal-day {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    font-size: 0.85rem;
    color: var(--ink);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.cal-day:hover { background: rgba(249, 115, 22, 0.15); }
.cal-day-selected, .cal-day-selected:hover { background: var(--chili); color: #fff; font-weight: 700; }
.cal-day-today:not(.cal-day-selected) { box-shadow: inset 0 0 0 1.5px var(--chili); font-weight: 700; }
.cal-day-disabled { color: var(--ink-soft); opacity: 0.4; cursor: default; }
.cal-day-empty { pointer-events: none; }

.avail-party-form { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.avail-party-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.avail-party-label select {
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ink);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 10px;
    text-transform: none;
    letter-spacing: normal;
}

.avail-times { flex: 1; min-width: 0; }
.avail-times h4 { margin: 0 0 12px; font-size: 1rem; }

@media (max-width: 640px) {
    .modal-body { flex-direction: column; padding: 18px; }
    .avail-calendar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--line);
        padding-right: 0;
        padding-bottom: 18px;
    }
}

.restaurant-about { padding: 10px 0 50px; border-top: 1px solid var(--line); margin-top: 10px; }
.restaurant-about h2 { margin-bottom: 10px; }

/* Reservation form / summary (reused checkout-style layout) */
.checkout-layout {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 30px;
    padding-bottom: 60px;
}
.checkout-form, .order-summary {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow);
}
.checkout-form label { display: block; margin-bottom: 16px; font-weight: 500; }
/* Anti-spam honeypot (see checkAntiSpam() in includes/functions.php) —
   off-screen rather than display:none/visibility:hidden, since some bots
   specifically skip filling fields hidden that way. aria-hidden and
   tabindex=-1 on the field itself keep it out of screen readers and
   keyboard tab order for real visitors. */
.hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
.checkout-form input, .checkout-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-top: 6px;
    font-family: inherit;
    font-size: 0.95rem;
}
.order-summary ul { list-style: none; padding: 0; margin: 0; }
.order-summary li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 0.92rem; }
.order-summary li:last-child { border-bottom: none; }

.restaurant-info {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}
.restaurant-info h4 {
    margin: 0 0 10px;
    font-size: 0.95rem;
}
.restaurant-info h4:not(:first-child) { margin-top: 18px; }
.restaurant-info-line {
    margin: 0 0 8px;
    font-size: 0.88rem;
    color: var(--ink-soft);
}
.restaurant-info-line a { color: var(--sage); text-decoration: none; }
.restaurant-info-line a:hover { text-decoration: underline; }
.hours-list { list-style: none; padding: 0; margin: 0; }
.hours-list li {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 0.85rem;
    color: var(--ink-soft);
    border-bottom: none;
}

.restaurant-hours-panel {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px 24px;
    box-shadow: var(--shadow);
    margin: 0 0 24px;
}
.restaurant-hours-panel h2 { margin: 0 0 10px; font-size: 1.05rem; }
.hours-list-wide { max-width: 360px; }
.hours-list-wide li { font-size: 0.9rem; padding: 6px 0; }
.hours-list-wide li.hours-today { color: var(--ink); font-weight: 700; }

@media (max-width: 720px) {
    .checkout-layout { grid-template-columns: 1fr; }
}

.btn-checkout {
    display: inline-block;
    padding: 12px 22px;
    border-radius: 8px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.95rem;
    background: var(--chili);
    color: #fff;
    text-decoration: none;
    margin-bottom: 60px;
}
.btn-checkout:hover { background: var(--chili-dark); }
.btn-secondary {
    display: inline-block;
    padding: 11px 20px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: #F8FAFC;
    color: var(--ink);
    font-weight: 600;
    cursor: pointer;
    font-size: 0.92rem;
    text-decoration: none;
}
.btn-secondary:hover { background: var(--line); }

.checkout-form-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.checkout-form-actions .btn-checkout,
.checkout-form-actions .btn-secondary {
    margin-bottom: 0;
}

/* Confirmation */
.confirmation { text-align: center; padding: 40px 0 20px; }
.confirmation-code {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    background: var(--card);
    border: 2px dashed var(--chili);
    border-radius: var(--radius);
    padding: 16px 32px;
    margin: 16px 0 24px;
}
.confirmation-code strong { font-size: 1.6rem; letter-spacing: 0.1em; color: var(--chili); }
.cart-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    margin: 20px 0;
    text-align: left;
}
.cart-table td { padding: 12px 16px; border-bottom: 1px solid var(--line); }
.cart-table tr:last-child td { border-bottom: none; }
.cart-table td:first-child { color: var(--ink-soft); font-weight: 500; width: 35%; }

/* Lookup / manage reservation form */
.lookup-form {
    display: flex;
    gap: 16px;
    align-items: flex-end;
    flex-wrap: wrap;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px;
    margin: 20px 0;
}
.lookup-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 500; font-size: 0.9rem; margin: 0; }
.lookup-form input {
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-family: inherit;
}

/* Reservation actions (Change / Cancel) on the manage-reservation page */
.reservation-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 20px 0 0;
}
.reservation-actions form { margin: 0; }
.btn-danger-outline { color: var(--danger-dark, #B42318); }
.btn-danger-outline:hover { background: var(--danger-bg, #FBEAE9); border-color: var(--danger-bg, #FBEAE9); }

.change-panel {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}
.change-panel h3 { margin: 0 0 14px; font-size: 1.05rem; }

/* Same calendar-popup layout restaurant.php's "See all available times"
   uses (a fixed-width calendar column beside a wrapping time grid) reused
   here inline — Change Reservation doesn't need the overlay/modal chrome
   since the whole panel is already toggled open/closed on its own. */
.change-avail-layout {
    display: flex;
    gap: 24px;
    margin-top: 16px;
}
@media (max-width: 640px) {
    .change-avail-layout {
        flex-direction: column;
    }
    .change-avail-layout .avail-calendar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--line);
        padding-right: 0;
        padding-bottom: 18px;
    }
}

/* .time-slot is normally an <a> (restaurant.php, index.php); here it's a
   <button> instead, since clicking one opens the confirm dialog below
   rather than navigating — needs the usual button reset on top. */
.change-time-slot {
    border: none;
    font-family: inherit;
    cursor: pointer;
}

/* Hides the real POST form that actually applies a change — nothing in
   it submits until "Yes, Change It" is clicked in the confirm dialog. */
.visually-hidden { display: none; }

/* "Are you sure?" dialog shown before a picked time is actually applied. */
.confirm-modal-panel { max-width: 460px; }
.confirm-modal-body { display: block; padding: 22px; }
.confirm-modal-body p { margin: 0 0 20px; line-height: 1.5; }
.confirm-modal-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}
.confirm-modal-actions .btn-checkout,
.confirm-modal-actions .btn-secondary {
    margin-bottom: 0;
}

/* Confirmation popup shown after a business.php lead form (Get Started /
   Free Trial) submits successfully — impossible to miss regardless of
   scroll position, unlike a flash banner up at the top of the page. */
.lead-success-panel { max-width: 420px; }
.lead-success-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 22px;
}
.lead-success-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--success);
    color: #fff;
    font-size: 1.5rem;
    line-height: 52px;
    margin-bottom: 16px;
}
.lead-success-body p { margin: 0 0 22px; line-height: 1.5; color: var(--ink-soft); }
.lead-success-body .btn-checkout { width: 100%; margin-bottom: 0; }

/* Status badges (shared with owner panel) */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
}
.badge-status-confirmed { background: #E1EEFB; color: #1D5A9C; }
.badge-status-seated { background: #F1E6FB; color: #6B2FA6; }
.badge-status-completed { background: #E4F2E8; color: #24593C; }
.badge-status-cancelled { background: var(--danger-bg); color: var(--danger-dark); }
.badge-status-no_show { background: #F1F5F9; color: #64748B; }

/* business.php — "For Restaurants" info/marketing page */
.biz-hero {
    display: flex;
    align-items: center;
    gap: 40px;
    max-width: 1180px;
    margin: 36px auto 56px;
    padding: 0 24px;
}
.biz-hero-text { flex: 1 1 420px; }
.biz-hero-text h1 {
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 14px;
}
.biz-hero-caption { color: var(--ink-soft); font-size: 1.05rem; max-width: 520px; }
.biz-hero-image { flex: 1 1 380px; }
.biz-hero-image img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--line);
}
@media (max-width: 780px) {
    .biz-hero { flex-direction: column; text-align: center; margin-top: 24px; }
    .biz-hero-caption { margin: 0 auto; }
    .biz-hero-image img { height: 220px; }
}

/* Full-bleed band (not capped by .container the way every other section on
   this page is) with a light neutral fill — the same #F8FAFC surface tone
   already used for .btn-secondary and the master-panel sidebar tint — so it
   reads as visually separate from the white hero above it, rather than
   floating as a small card on the same white background. */
.biz-why {
    width: 100%;
    background: #F8FAFC;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 48px 24px;
    margin: 0 0 56px;
    text-align: center;
}
.biz-why-inner { max-width: 980px; margin: 0 auto; }
.biz-why h2 { margin-bottom: 12px; }
.biz-why p { color: var(--ink-soft); margin: 0; font-size: 1.02rem; }

.biz-pricing { max-width: 1180px; margin: 0 auto 56px; padding: 0 24px; text-align: center; }
.biz-pricing h2 { margin-bottom: 6px; }
.biz-pricing-sub { color: var(--ink-soft); margin: 0 0 28px; }

/* Demo-mode stand-in for the pricing cards/comparison table (commented out
   in business.php, not deleted) — one simple centered box instead, matching
   the same card styling (background/border/radius/shadow) the pricing cards
   themselves use, and the same full content width as the Get Started form's
   own card below it (.lead-form — no max-width of its own, just fills its
   1180px-capped parent section) so the two boxes line up edge to edge. */
.pricing-coming-soon {
    margin: 0 0 28px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 40px 28px;
}
.pricing-coming-soon-title { margin: 0 0 8px; font-size: 1.3rem; font-weight: 700; color: var(--chili); }
.pricing-coming-soon-sub { margin: 0; color: var(--ink-soft); }
.pricing-cards {
    display: grid;
    /* Three equal columns spanning the full .biz-pricing width — matches
       the plan-compare table directly below it (same 1180px container),
       instead of the old auto-fit/minmax(260px,340px) layout that only
       ever grew cards to 340px and left them centered with empty space
       on either side. */
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 28px;
}
@media (max-width: 900px) {
    .pricing-cards { grid-template-columns: 1fr; }
}
.pricing-card {
    position: relative;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 32px 28px;
    box-shadow: var(--shadow);
    text-align: left;
}
.pricing-card-featured { border: 2px solid var(--chili); }
.pricing-badge {
    position: absolute;
    top: -12px;
    left: 28px;
    background: var(--chili);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 20px;
    margin: 0;
}
.pricing-card h3 { margin: 0 0 4px; font-size: 1.3rem; }
.pricing-price { font-size: 1.3rem; font-weight: 700; color: var(--chili); margin: 0 0 18px; }
.pricing-features { list-style: none; padding: 0; margin: 0 0 24px; }
.pricing-features li {
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: 0.92rem;
}
.pricing-features li:last-child { border-bottom: none; }
.pricing-cta { width: 100%; text-align: center; }

/* Free Trial card — same shape as Basic/Pro but in green rather than orange
   or the plain/neutral Basic style, so it reads as "not a paid tier" at a
   glance, matching the green used for the Free Trial column in the
   comparison table below. */
.pricing-card-trial { border: 2px solid var(--success); }
.pricing-badge-trial { background: var(--success); }
.pricing-price-trial { color: var(--success); }
.pricing-cta-trial { background: var(--success); }
.pricing-cta-trial:hover { background: #15803D; }

/* Side-by-side feature comparison table under the pricing cards — same
   feature lists the two .pricing-card bullets already show, just laid out
   so every feature (plus the Free Trial column) can be scanned at once.
   Deliberately as wide as the rest of the page's content (matches
   .biz-pricing's own 1180px cap) rather than the earlier, much narrower
   720px card — this section is meant to read as a big, hard-to-miss
   centerpiece, not a small aside. */
.plan-compare-wrap {
    max-width: 1180px;
    margin: 0 auto 20px;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.plan-compare {
    width: 100%;
    border-collapse: collapse;
    background: var(--card);
    table-layout: fixed;
}
.plan-compare th:not(.plan-compare-feature),
.plan-compare td:not(.plan-compare-feature) {
    width: 160px;
}
@media (max-width: 700px) {
    .plan-compare th:not(.plan-compare-feature),
    .plan-compare td:not(.plan-compare-feature) { width: 140px; }
}
.plan-compare th,
.plan-compare td {
    padding: 20px 16px;
    text-align: center;
    border-bottom: 1px solid var(--line);
}
.plan-compare tbody tr:last-child td { border-bottom: none; }
.plan-compare thead th {
    font-size: 1.05rem;
    color: var(--ink);
    background: #F8FAFC;
    border-bottom: 1px solid var(--line);
}
.plan-compare .plan-compare-sub { font-size: 0.75rem; font-weight: 400; color: var(--ink-soft); }
.plan-compare .plan-compare-feature {
    text-align: left;
    color: var(--ink-soft);
    font-size: 1rem;
    overflow-wrap: break-word;
}
.plan-compare th.plan-compare-feature { color: var(--ink); font-size: 1.05rem; }
.plan-compare .plan-compare-yes { color: var(--success); font-weight: 700; font-size: 1.2rem; }
.plan-compare .plan-compare-no { color: var(--ink-soft); }
.plan-compare .plan-compare-pro-col { background: var(--chili-light); }
.plan-compare thead th.plan-compare-pro-col { color: var(--chili-dark); font-weight: 700; }
.plan-compare .plan-compare-trial-col { background: #ECFDF5; }
.plan-compare thead th.plan-compare-trial-col { color: var(--success); font-weight: 700; }
.plan-compare-cta-row td { padding: 20px 16px; }
.plan-compare-cta-row .pricing-cta { width: auto; display: inline-block; padding: 10px 20px; margin: 0; }
.plan-compare-cta-row .plan-compare-trial-col .btn-checkout { background: var(--success); }
.plan-compare-cta-row .plan-compare-trial-col .btn-checkout:hover { background: #15803D; }
.plan-compare-note { text-align: center; margin: 0 0 12px; font-size: 0.85rem; }

/* Under 700px, nothing about this table scrolls sideways — instead each
   feature row collapses into its own bordered "card" with Basic/Pro/Free
   Trial stacked as labeled lines underneath the feature name, using each
   cell's data-label attribute (see business.php) as the visible label via
   ::before. Standard responsive-table technique, applied here instead of
   a horizontal-scroll table (which was tried first and rejected — a
   marketing page shouldn't ask a visitor to know to swipe sideways). */
@media (max-width: 700px) {
    .plan-compare-wrap { overflow-x: visible; border: none; }
    .plan-compare { width: 100%; table-layout: auto; }
    .plan-compare thead { display: none; }
    .plan-compare, .plan-compare tbody, .plan-compare tr, .plan-compare th, .plan-compare td {
        display: block;
        width: auto;
    }
    .plan-compare tbody tr {
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        margin-bottom: 12px;
        padding: 4px 16px;
    }
    .plan-compare td {
        padding: 10px 0;
        border-bottom: 1px solid var(--line);
        text-align: left;
        background: none !important;
    }
    .plan-compare tr td:last-child { border-bottom: none; }
    .plan-compare .plan-compare-feature {
        font-weight: 700;
        color: var(--ink);
        font-size: 1rem;
    }
    .plan-compare td:not(.plan-compare-feature) {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .plan-compare td:not(.plan-compare-feature)::before {
        content: attr(data-label);
        color: var(--ink-soft);
        font-size: 0.88rem;
    }
    .plan-compare td.plan-compare-pro-col::before { color: var(--chili-dark); font-weight: 600; }
    .plan-compare td.plan-compare-trial-col::before { color: var(--success); font-weight: 600; }
    /* The CTA row has no data-label (a "Choose Basic"/"Choose Pro"/"Start
       Free Trial" button doesn't need one) — full-width stacked buttons
       instead of the labeled-line layout every other row uses. */
    .plan-compare-cta-row { border: none !important; background: none !important; padding: 8px 0 0 !important; }
    .plan-compare-cta-row td {
        display: block;
        border-bottom: none;
        padding: 0 0 10px;
    }
    .plan-compare-cta-row td::before { content: none; }
    .plan-compare-cta-row .pricing-cta { width: 100%; display: block; margin: 0; }
}

.biz-get-started {
    /* Matches .biz-pricing/.plan-compare-wrap's own 1180px cap so this
       section's width lines up with the pricing cards and comparison
       table above it, instead of the old 640px that made it look like a
       much narrower, separate block. */
    max-width: 1180px;
    margin: 0 auto 56px;
    padding: 0 24px;
    text-align: center;
}
.biz-get-started h2 { margin-bottom: 8px; }
.biz-get-started p { color: var(--ink-soft); margin: 0 0 22px; }
.lead-form {
    text-align: left;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px;
    box-shadow: var(--shadow);
}
.lead-form label { display: block; margin-bottom: 16px; font-weight: 500; }
.lead-form input, .lead-form select, .lead-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-top: 6px;
    font-family: inherit;
    font-size: 0.95rem;
}
.lead-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
}
@media (max-width: 560px) {
    .lead-form-grid { grid-template-columns: 1fr; }
}
.lead-form button[type="submit"] { width: 100%; }

/* Footer */
.site-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--line);
    padding: 24px 0;
    color: var(--ink-soft);
    font-size: 0.85rem;
    text-align: center;
}