/* ===== GLOBAL VARIABLES ===== */
/* Coxhoe Corner: the printed menu is pure black on paper (measured max saturation 2/255), and the
   logo is a black tile with white lettering - so the palette is monochrome, not the green/gold the
   site inherited from Kaani Express. */
:root {
    --primary: #111111;
    --primary-dark: #000000;
    --primary-light: #2b2b2b;
    --secondary: #111111;
    --accent: #111111;
    --accent-light: #f3f3f3;
    --accent-dark: #000000;
    /* --accent is the accent for LIGHT surfaces (black artwork on white). On the dark navbar,
       footer, hero and gift-voucher panel that same value is invisible, so dark surfaces use the
       inverse: a white fill with black text. Without this, every "accent fill + dark text"
       pairing rendered black-on-black - which is what made the voucher buttons unreadable. */
    --accent-inverse: #ffffff;
    --accent-inverse-dark: #e2e2e2;
    --bg: #ffffff;
    --card-bg: #ffffff;
    --text: #111111;
    --text-muted: #6b7280;
    --border: #e5e7eb;
    --success: #10b981;
    --radius: 12px;
    --shadow: 0 4px 20px rgba(0,0,0,.06);
    --shadow-lg: 0 8px 40px rgba(0,0,0,.1);
    --transition: all .25s ease;
    /* Base navbar height = .nav-container min-height (64px) + the navbar's 1px bottom border.
       Sticky elements that sit directly under the navbar use this so they cannot drift up
       behind it. site.js replaces it with the MEASURED height, which also covers the app's
       status-bar padding and the extra row the verification banner adds. */
    --navbar-height: 65px;
}

/* Coxhoe's logo is black artwork (white lettering on a black tile), so it needs a white plate to
   read against the black navbar and footer. */
img[src*="coxhoe-logo"] { background: #fff; border-radius: 6px; padding: 2px; }

/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Josefin Sans', sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
button, input, select, textarea, a, .btn, .form-control { font-family: inherit; }
h1, h2, h3, h4, h5, h6 { font-family: 'Josefin Sans', sans-serif; font-weight: 700; }
.menu-header h1, .menu-header p { font-family: 'Josefin Sans', sans-serif; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }

/* ===== NAVBAR ===== */
.navbar { background: var(--secondary); position: sticky; top: 0; z-index: 100; box-shadow: var(--shadow); padding: 0; }

/* Verification banner */
.verify-banner {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
    padding: .75rem 0;
    font-size: .9rem;
    border-bottom: 2px solid #fcd34d;
    text-align: center;
}
.verify-banner .btn-accent { background: #92400e; color: #fff; }
.verify-banner .btn-accent:hover { background: #78350f; }
.nav-container { display: flex; align-items: center; justify-content: space-between; min-height: 64px; }
.nav-brand { display: flex; align-items: center; padding: 0; margin: 0; line-height: 0; flex-shrink: 0; height: 56px; }
.nav-brand img { height: 100%; width: auto; display: block; object-fit: contain; object-position: left center; padding: 2px 0; }
.nav-links { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.nav-link { color: rgba(255,255,255,.85); padding: .5rem 1rem; border-radius: 8px; font-size: .9rem; font-weight: 500; transition: var(--transition); display: flex; align-items: center; gap: .35rem; text-decoration: none; }
.nav-link:hover { color: #fff; background: rgba(255,255,255,.1); }
.btn-register { background: var(--accent-inverse); color: var(--primary-dark) !important; font-weight: 600; }
.btn-register:hover { background: var(--accent-inverse-dark); color: var(--primary-dark) !important; }
.cart-link { position: relative; }
.cart-badge { position: absolute; top: -.1rem; right: -.1rem; background: var(--accent-inverse); color: var(--primary-dark); font-size: .65rem; font-weight: 700; min-width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 0 3px; }
.nav-toggle { display: none; background: none; border: none; color: #fff; font-size: 1.8rem; cursor: pointer; }
.nav-user-menu { position: relative; }
.nav-user-menu::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 10px; }
.user-btn { background: none; border: none; cursor: pointer; font-family: inherit; }
.user-dropdown { display: none; position: absolute; right: 0; top: 100%; background: var(--card-bg); min-width: 180px; border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; z-index: 50; margin-top: 4px; }
.nav-user-menu:hover .user-dropdown { display: block; }
.dropdown-item { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .65rem 1rem; background: none; border: none; text-align: left; font-size: .9rem; cursor: pointer; color: var(--text); transition: var(--transition); font-family: inherit; text-decoration: none; }
.dropdown-item:hover { background: var(--bg); }

/* Mobile */
@media (max-width: 768px) {
    .nav-container { flex-wrap: wrap; }
    .nav-brand { height: 50px; }
    .nav-links { display: none; flex-direction: column; width: 100%; background: var(--secondary); padding: 1rem; gap: .5rem; border-top: 1px solid rgba(255,255,255,.1); }
    .nav-links.active { display: flex; }
    .nav-toggle { display: block; }
    .user-dropdown { right: auto; left: 0; }
}

/* ===== HERO SECTION ===== */
.hero {
    position: relative;
    overflow: hidden;
    padding: 6rem 0;
    text-align: center;
    color: #fff;
    min-height: 420px;
    display: flex;
    align-items: center;
    /* Roughly the average colour of the hero video (rgb 112,87,50). While the video is still
       loading the hero then reads as a deliberate warm panel rather than an empty area, and the
       video fades in almost invisibly once it starts. */
    background: #705732;
}
.hero-video {
    position: absolute;
    top: 50%; left: 50%;
    min-width: 100%; min-height: 100%;
    width: auto; height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: 0;
    transition: opacity .5s ease;
}
/* site.js adds .hero-video-pending until the video can actually play. Some browsers paint a
   "play" glyph in the middle of a video that has not started yet, which flashed on the homepage
   while the video loaded - hiding the element until then removes it. The class is added by JS
   rather than being the default, so the video still shows if JavaScript never runs. */
.hero-video.hero-video-pending { opacity: 0; }
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(6,24,16,.55), rgba(14,48,32,.40));
    z-index: 1;
}
.hero-content {
    position: relative;
    z-index: 2;
}
.hero h1 { font-size: 3rem; margin-bottom: 1rem; }
.hero h1 span { color: var(--accent-inverse); }
.hero p { font-size: 1.15rem; color: rgba(255,255,255,.75); max-width: 600px; margin: 0 auto 2rem; }
.hero-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 1.75rem; border-radius: 50px; font-size: 1rem; font-weight: 600; cursor: pointer; border: none; transition: var(--transition); font-family: inherit; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.btn-outline { background: transparent; color: var(--text); border: 2px solid var(--border); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }
/* hero overrides for dark background */
.hero .btn-outline { color: #fff; border-color: rgba(255,255,255,.4); }
.hero .btn-outline:hover { border-color: #fff; background: rgba(255,255,255,.12); color: #fff; }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-dark); color: #fff; transform: translateY(-2px); }
.btn-reserve { background: var(--primary-light); color: #fff; }
.btn-reserve:hover { background: #0E3020; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(14,48,32,.35); }
.hero .btn-reserve { color: #fff; }
.hero .btn-reserve:hover { background: #2b2b2b; }
.btn-sm { padding: .45rem 1rem; font-size: .85rem; }
.btn-block { width: 100%; justify-content: center; }

/* ===== HALAL BADGE ===== */
.halal-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    border-radius: 12px;
    padding: .55rem 1rem;
    background: linear-gradient(135deg, #0E3020, #1A4D35);
    border: 2px solid var(--accent-inverse);
    box-shadow: 0 2px 12px rgba(255,255,255,.15);
    user-select: none;
}
.halal-arabic {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--accent-inverse);
    line-height: 1.1;
    font-family: 'Josefin Sans', 'Traditional Arabic', 'Segoe UI', sans-serif;
}
.halal-label {
    font-size: .65rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: .12em;
    text-transform: uppercase;
}
/* Footer placement */
.footer-halal {
    padding: .4rem .8rem;
    border-radius: 8px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    box-shadow: none;
}
.footer-halal .halal-arabic {
    font-size: 1.1rem;
}
.footer-halal .halal-label {
    font-size: .55rem;
    color: rgba(255,255,255,.8);
}

/* ===== SOCIAL FOLLOW ===== */
.social-follow {
    padding: 2.5rem 0;
    background: var(--secondary);
    text-align: center;
}
.social-follow h2 {
    font-size: 1.5rem;
    margin-bottom: .35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    color: #fff;
}
.social-follow h2 i {
    color: var(--accent-inverse);
}
.social-follow .section-sub {
    color: rgba(255,255,255,.7);
    font-size: .95rem;
    margin-bottom: 1.5rem;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}
.social-links {
    display: flex;
    gap: 1.25rem;
    justify-content: center;
    align-items: center;
}
.social-btn {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem 1.6rem;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all .25s ease;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
.social-btn i {
    font-size: 1.25rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
/* Facebook */
.social-btn.facebook {
    background: #1877F2;
    color: #fff;
}
.social-btn.facebook i {
    background: #fff;
    color: #1877F2;
}
.social-btn.facebook:hover {
    background: #1666d6;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(24,119,242,.35);
}
/* Instagram */
.social-btn.instagram {
    background: linear-gradient(135deg, #833AB4, #E1306C, #F77737);
    color: #fff;
}
.social-btn.instagram i {
    background: #fff;
    color: #E1306C;
}
.social-btn.instagram:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(225,48,108,.35);
}

/* ===== FOOD SHOWCASE ===== */
.food-showcase { padding: 3rem 0; background: var(--bg); }
.food-showcase h2 { text-align: center; margin-bottom: .4rem; font-size: 1.8rem; }
.food-showcase .section-sub { text-align: center; color: var(--text-muted); margin-bottom: 2rem; font-size: 1rem; }
.showcase-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; }
.showcase-item { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--shadow); }
.showcase-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; display: block; }
.showcase-item.showcase-contain img { object-fit: contain; background: var(--bg); }
.showcase-item:hover img { transform: scale(1.07); }
.showcase-label { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,.72)); color: #fff; padding: 1.5rem .75rem .5rem; font-weight: 600; font-size: .9rem; }

/* ===== FEATURES ===== */
.features { padding: 4rem 0; background: var(--secondary); }
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2rem; }
.feature-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius); padding: 2rem; text-align: center; transition: var(--transition); }
.feature-card:hover { transform: translateY(-4px); background: rgba(255,255,255,.1); }
.feature-icon { width: 60px; height: 60px; margin: 0 auto 1rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }
.feature-icon.red { background: rgba(255,255,255,.12); color: #fff; }
.feature-icon.amber { background: rgba(212,168,83,.25); color: var(--accent); }
.feature-icon.green { background: rgba(16,185,129,.2); color: var(--success); }
.feature-card h3 { font-size: 1.15rem; margin-bottom: .5rem; color: #fff; }
.feature-card p { color: rgba(255,255,255,.7); font-size: .9rem; }

/* ===== MENU PAGE ===== */
.menu-page { padding: 2rem 0; }
.menu-header { text-align: center; margin-bottom: 2rem; }
.menu-header h1 { font-size: 2.2rem; }
.menu-header p { color: var(--text-muted); }

/* Categories bar */
.categories-bar { display: flex; gap: .5rem; overflow-x: auto; padding: .75rem 0; margin-bottom: 2rem; border-bottom: 2px solid var(--border); scrollbar-width: none; }
.categories-bar::-webkit-scrollbar { display: none; }
.cat-btn { flex-shrink: 0; padding: .5rem 1.25rem; border-radius: 50px; font-size: .85rem; font-weight: 600; cursor: pointer; border: 2px solid transparent; transition: var(--transition); white-space: nowrap; font-family: 'Josefin Sans', sans-serif; font-size: .95rem; }
.cat-btn.active { color: #fff !important; box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.cat-btn:not(.active) { background: var(--card-bg); box-shadow: var(--shadow); }
.cat-btn:not(.active):hover { transform: translateY(-1px); }
.cat-btn.set-meals-btn { background: var(--accent-light); color: #92400e; border-color: var(--accent); }
.cat-btn.set-meals-btn.active { background: var(--accent); color: #fff; }

/* Sub-categories */
.subcategories-bar { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: 1rem; scrollbar-width: none; }
.subcategories-bar::-webkit-scrollbar { display: none; }
.sub-btn { flex-shrink: 0; padding: .35rem 1rem; border-radius: 50px; font-size: .8rem; font-weight: 500; cursor: pointer; border: 1px solid var(--border); background: #fff; color: var(--text-muted); transition: var(--transition); font-family: inherit; }
.sub-btn.active { background: var(--secondary); color: #fff; border-color: var(--secondary); }

/* Food grid */
.food-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .6rem; }
.food-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}
.food-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.food-card-body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; }
.food-card-name { font-family: 'Josefin Sans', sans-serif; font-size: 1.05rem; font-weight: 600; margin-bottom: .25rem; }
.food-card-desc { color: var(--text-muted); font-size: .85rem; margin-bottom: .75rem; flex: 1; }
.food-card-footer { display: flex; align-items: center; justify-content: space-between; }
.food-card-price { font-size: 1.2rem; font-weight: 700; color: var(--primary); }
.food-card-badges { display: flex; gap: .3rem; margin-bottom: .5rem; }
.badge { padding: .15rem .5rem; border-radius: 50px; font-size: .7rem; font-weight: 600; }
.badge-veg { background: #ecfdf5; color: #059669; }
.badge-vegan { background: #f0fdf4; color: #16a34a; }
.badge-gf { background: #fefce8; color: #ca8a04; }
.add-btn { width: 38px; height: 38px; border-radius: 50%; border: none; background: var(--primary); color: #fff; font-size: 1.1rem; cursor: pointer; transition: var(--transition); display: flex; align-items: center; justify-content: center; }
.add-btn:hover { background: var(--primary-dark); transform: scale(1.1); }

/* Set Meals */
.set-meal-card { background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.5rem; margin-bottom: 1.5rem; border-left: 4px solid var(--accent); }
.set-meal-card h3 { color: var(--secondary); margin-bottom: .25rem; }
.set-meal-price { font-size: 1.3rem; font-weight: 700; color: var(--primary); margin-bottom: .75rem; }
.set-meal-items { list-style: none; margin-bottom: 1rem; }
.set-meal-items li { padding: .35rem 0; font-size: .9rem; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.set-meal-items li:last-child { border: none; }
.choice-group-label { font-weight: 600; color: var(--secondary); font-size: .85rem; margin-top: .5rem; }

/* ===== CART ===== */
.cart-page { padding: 2rem 0; }
.cart-items { margin-bottom: 2rem; }
.cart-item { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: .75rem; }
.cart-item-info { flex: 1; }
.cart-item-name { font-weight: 600; }
.cart-item-details { font-size: .85rem; color: var(--text-muted); }
.cart-item-price { font-weight: 700; color: var(--primary); font-size: 1.1rem; min-width: 70px; text-align: right; }
.qty-controls { display: flex; align-items: center; gap: .5rem; }
.qty-btn { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); background: #fff; cursor: pointer; font-size: 1rem; display: flex; align-items: center; justify-content: center; transition: var(--transition); }
.qty-btn:hover { background: var(--bg); }
.qty-value { font-weight: 600; min-width: 20px; text-align: center; }
.cart-remove { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1.1rem; transition: var(--transition); }
.cart-remove:hover { color: var(--primary); }
.cart-summary { background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.5rem; }
.cart-summary-row { display: flex; justify-content: space-between; padding: .5rem 0; font-size: .95rem; }
.cart-summary-row.total { border-top: 2px solid var(--border); padding-top: 1rem; margin-top: .5rem; font-size: 1.2rem; font-weight: 700; }
.cart-empty { text-align: center; padding: 4rem 0; }
.cart-empty i { font-size: 4rem; color: var(--border); margin-bottom: 1rem; }

/* ===== CHECKOUT ===== */
.checkout-page { padding: 2rem 0; max-width: 800px; margin: 0 auto; }
.checkout-section { background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.5rem; margin-bottom: 1.5rem; }
.checkout-section h2 { font-size: 1.25rem; margin-bottom: 1rem; padding-bottom: .5rem; border-bottom: 2px solid var(--border); }
.order-type-toggle { display: flex; gap: .5rem; margin-bottom: 1rem; }
.order-type-btn { flex: 1; padding: .75rem; border-radius: var(--radius); border: 2px solid var(--border); background: #fff; font-size: .95rem; font-weight: 600; cursor: pointer; text-align: center; transition: var(--transition); }
.order-type-btn.active { border-color: var(--primary); background: rgba(14,48,32,.05); color: var(--primary); }
.time-estimate { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; background: var(--accent-light); border-radius: var(--radius); margin: 1rem 0; font-weight: 500; }
.time-estimate i { color: var(--accent); }

/* ===== FORMS ===== */
.form-page { padding: 3rem 0; max-width: 500px; margin: 0 auto; }
.form-card { background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); padding: 2rem; }
.form-card h1 { text-align: center; margin-bottom: 1.5rem; font-size: 1.75rem; }
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; font-weight: 500; font-size: .9rem; margin-bottom: .35rem; color: var(--secondary); }
.form-control { width: 100%; padding: .65rem .85rem; border: 2px solid var(--border); border-radius: 8px; font-size: .95rem; transition: var(--transition); font-family: inherit; }
.form-control:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(14,48,32,.1); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-error { color: var(--primary); font-size: .8rem; margin-top: .25rem; }
.form-footer { text-align: center; margin-top: 1.5rem; font-size: .9rem; color: var(--text-muted); }
.form-footer a { color: var(--primary); font-weight: 500; }
.validation-summary-errors ul { list-style: none; background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; padding: .75rem 1rem; margin-bottom: 1rem; }
.validation-summary-errors ul:empty { display: none; }
.validation-summary-errors ul:has(> li:only-child[style*="display:none"]) { display: none; }
.validation-summary-errors li { color: #dc2626; font-size: .9rem; }
.field-validation-error { color: #dc2626; font-size: .8rem; font-weight: 500; }
select.form-control { appearance: auto; }

/* ===== RESERVATIONS ===== */
.hidden { display: none !important; }

.reservation-page { padding: 2rem 0 4rem; }
.reservation-container { max-width: 960px; }
.reservation-hero {
    background: linear-gradient(135deg, rgba(6,24,16,.96), rgba(14,48,32,.88)), url('/images/food/restaurant-interior.jpg') center/cover no-repeat;
    color: #fff;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: var(--shadow-lg);
    margin-bottom: 1rem;
}
.reservation-kicker {
    display: inline-block;
    font-size: .75rem;
    letter-spacing: .14em;
    font-weight: 700;
    color: var(--accent-inverse);
    margin-bottom: .75rem;
}
.reservation-hero h1 { font-size: 2.3rem; margin-bottom: .5rem; }
.reservation-hero p { color: rgba(255,255,255,.82); max-width: 720px; }
.reservation-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .75rem;
    margin-top: 1.25rem;
}
.reservation-meta-item {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 14px;
    padding: .85rem 1rem;
}
.reservation-meta-item strong { display: block; color: #fff; margin-bottom: .15rem; }
.reservation-meta-item span { color: rgba(255,255,255,.78); font-size: .85rem; }

.booking-alert {
    border-radius: 14px;
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow);
}
.booking-alert strong { display: block; margin-bottom: .35rem; }
.booking-alert-info { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a8a; }
.booking-alert-error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.booking-alert .btn { margin-top: .75rem; }

.booking-steps { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.step-chip {
    padding: .55rem .9rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: .85rem;
    font-weight: 600;
    box-shadow: var(--shadow);
}
.step-chip-active {
    background: rgba(14,48,32,.08);
    border-color: rgba(14,48,32,.35);
    color: var(--primary);
}

.reservation-card {
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    padding: 1.35rem;
    margin-bottom: 1rem;
}
.reservation-card-head { margin-bottom: 1rem; }
.reservation-card-head h2 { font-size: 1.3rem; margin-bottom: .2rem; }
.reservation-card-head p { color: var(--text-muted); }
.reservation-grid { display: grid; gap: 1rem; margin-bottom: 1rem; }
.reservation-grid.two-col { grid-template-columns: 1fr 1fr; }
.form-help { font-size: .82rem; color: var(--text-muted); margin-top: .3rem; }

.slot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: .75rem;
}
.slot-btn {
    padding: .9rem .8rem;
    border-radius: 12px;
    border: 2px solid var(--border);
    font-size: .95rem;
    font-weight: 700;
    transition: var(--transition);
}
.slot-btn-available {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
    cursor: pointer;
}
.slot-btn-available:hover {
    background: #dbeafe;
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}
.slot-btn-disabled {
    background: #f9fafb;
    color: #9ca3af;
    border-color: #e5e7eb;
    cursor: not-allowed;
}
.slot-btn.is-selected {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 10px 25px rgba(14,48,32,.22);
}
.slot-loading,
.empty-note,
.selected-slot {
    margin-top: .85rem;
    border-radius: 12px;
    padding: .85rem 1rem;
    font-size: .92rem;
}
.slot-loading { background: #f8fafc; border: 1px dashed var(--border); color: var(--text-muted); }
.empty-note { background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; }
.selected-slot { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; font-weight: 600; }

.deposit-card {
    background: linear-gradient(135deg, #fff7ed, #fffbeb);
    border: 1px solid #fcd34d;
    border-radius: 16px;
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
}
.deposit-card-title { font-weight: 700; color: #92400e; margin-bottom: .35rem; }
.deposit-card p { color: #78350f; font-size: .92rem; }

@media (max-width: 768px) {
    .reservation-hero h1 { font-size: 1.9rem; }
    .reservation-grid.two-col,
    .form-row { grid-template-columns: 1fr; }
}

/* ===== CONFIRMATION ===== */
.confirmation-page { padding: 3rem 0; text-align: center; max-width: 600px; margin: 0 auto; }
.confirmation-icon { font-size: 4rem; color: var(--success); margin-bottom: 1rem; }
.confirmation-card { background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); padding: 2rem; margin-top: 2rem; text-align: left; }
.confirmation-row { display: flex; justify-content: space-between; padding: .5rem 0; border-bottom: 1px solid var(--border); }
.confirmation-row:last-child { border: none; }

/* ===== MY ORDERS ===== */
.orders-page { padding: 2rem 0; }
.order-card { background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.25rem; margin-bottom: 1rem; }
.order-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .75rem; }
.order-number { font-weight: 700; font-size: 1.05rem; }
.order-status { padding: .25rem .75rem; border-radius: 50px; font-size: .8rem; font-weight: 600; }
.status-pending { background: #fef3c7; color: #92400e; }
.status-confirmed { background: #d1fae5; color: #065f46; }
.status-paid { background: #d1fae5; color: #065f46; }

/* ===== FOOTER ===== */
.site-footer { background: var(--secondary); color: rgba(255,255,255,.7); padding: 3rem 0 1.5rem; }
.footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; margin-bottom: 2rem; }
.footer-brand h3 { color: #fff; font-size: 1.3rem; margin-bottom: .5rem; display: flex; align-items: center; gap: .5rem; }
.footer-logo { height: 56px; width: auto; border-radius: 6px; margin-bottom: .5rem; display: block; }
.footer-brand-top { display: flex; align-items: center; gap: 1rem; margin-bottom: .5rem; }
.footer-brand-top .footer-logo { margin-bottom: 0; }
.footer-links h4, .footer-contact h4, .footer-social h4 { color: #fff; font-size: 1rem; margin-bottom: .75rem; }
.footer-links a { display: block; padding: .2rem 0; font-size: .9rem; transition: var(--transition); }
.footer-links a:hover { color: var(--accent-inverse); }
.footer-social-links { display: flex; gap: .75rem; flex-wrap: wrap; }
.footer-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.1rem;
    color: #fff;
    text-decoration: none;
    transition: all .25s ease;
}
.footer-social-btn:hover {
    transform: translateY(-2px);
    color: #fff;
}
.footer-social-btn .fa-facebook-f { background: #1877F2; border-radius: 50%; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.footer-social-btn[title="Facebook"] { background: #1877F2; }
.footer-social-btn[title="Facebook"]:hover { background: #1666d6; box-shadow: 0 4px 14px rgba(24,119,242,.4); }
.footer-social-btn[title="Instagram"] { background: linear-gradient(135deg, #833AB4, #E1306C, #F77737); }
.footer-social-btn[title="Instagram"]:hover { box-shadow: 0 4px 14px rgba(225,48,108,.4); }
.footer-bottom { text-align: center; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.1); font-size: .85rem; }
.footer-allergy-disclaimer { margin-bottom: 1.25rem; padding: .9rem 1.1rem; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-left: 3px solid #f59e0b; border-radius: var(--radius); font-size: .8rem; line-height: 1.6; color: rgba(255,255,255,.75); }
.footer-allergy-disclaimer i { color: #f59e0b; margin-right: .4rem; }
.footer-allergy-disclaimer strong { color: rgba(255,255,255,.9); }
.allergy-note { margin-top: .5rem; padding: .5rem .75rem; background: #fffbeb; border: 1px solid #fcd34d; border-left: 3px solid #f59e0b; border-radius: var(--radius); font-size: .8rem; color: #78350f; line-height: 1.5; }
.allergy-note i { color: #d97706; margin-right: .35rem; }

/* ===== ADDRESS CARD ===== */
.address-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.address-card { padding: 1rem; border: 2px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: var(--transition); }
.address-card.selected { border-color: var(--primary); background: rgba(14,48,32,.03); }
.address-card:hover { border-color: var(--primary); }

/* ===== MODAL ===== */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.modal-content { background: var(--card-bg); border-radius: var(--radius); max-width: 500px; width: 100%; max-height: 85vh; overflow-y: auto; padding: 1.5rem; box-shadow: var(--shadow-lg); }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.modal-close { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--text-muted); }

/* ===== LOADING ===== */
.spinner { border: 3px solid var(--border); border-top: 3px solid var(--primary); border-radius: 50%; width: 24px; height: 24px; animation: spin .8s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }


/* ===== MOBILE CART BAR ===== */
.mobile-cart-bar { display: none; }
@media (max-width: 768px) {
    .mobile-cart-bar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: var(--primary); color: #fff; align-items: center; justify-content: space-between; padding: .9rem 1.25rem; z-index: 150; box-shadow: 0 -2px 16px rgba(0,0,0,.25); }
    .mobile-cart-info { font-size: .95rem; font-weight: 600; display: flex; align-items: center; gap: .4rem; }
    .mobile-cart-btn { background: #fff; color: var(--primary); padding: .45rem 1.1rem; border-radius: 50px; font-weight: 700; font-size: .9rem; text-decoration: none; display: flex; align-items: center; gap: .35rem; white-space: nowrap; }
}

/* ===== MENU CATEGORIES BAR ===== */
.menu-categories { background: var(--card-bg); border-bottom: 1px solid var(--border); padding: .5rem 0; position: sticky; top: calc(var(--navbar-height) + env(safe-area-inset-top, 0px)); z-index: 90; }
.category-bar { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; padding: .25rem 0; }
.category-bar::-webkit-scrollbar { display: none; }
.category-pill { flex-shrink: 0; padding: .35rem .85rem; border-radius: 50px; font-size: .82rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: var(--transition); background: var(--bg); color: var(--text-muted); border: 2px solid var(--border); font-family: 'Josefin Sans', sans-serif; }
.category-pill:hover { border-color: var(--primary); color: var(--primary); }
.category-pill.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.menu-subcategories { padding: .25rem 0; }
.subcategory-bar { gap: .35rem; }
.subcategory-pill { flex-shrink: 0; padding: .35rem 1rem; border-radius: 50px; font-size: .8rem; font-weight: 500; cursor: pointer; white-space: nowrap; transition: var(--transition); background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); font-family: inherit; }
.subcategory-pill.active { background: var(--secondary); color: #fff; border-color: var(--secondary); }

/* Category dropdown (icon-only button + menu) */
.category-dropdown-wrapper { position: sticky; left: 0; z-index: 10; flex-shrink: 0; background: var(--card-bg); padding-right: .25rem; }
.category-dropdown-btn {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 2px solid var(--primary);
    background: var(--primary);
    color: #fff;
    font-size: .85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: var(--transition);
}
.category-dropdown-btn:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.category-dropdown-menu {
    display: none;
    position: fixed;
    top: auto;
    left: auto;
    margin-top: 0;
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    min-width: 200px;
    max-height: 60vh;
    overflow-y: auto;
    z-index: 200;
    padding: .5rem;
}
.category-dropdown-menu.open { display: block; }
.cat-drop-item {
    display: block;
    padding: .6rem 1rem;
    border-radius: 8px;
    font-size: .9rem;
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
    transition: var(--transition);
}
.cat-drop-item:hover { background: var(--bg); }
.cat-drop-item.active { background: var(--primary); color: #fff; }

/* No :focus-within rule belongs here.
   One used to sit here (with a comment claiming it closed the dropdown on an outside click,
   which it never did). Because clicking the button focuses it, the wrapper matched
   :focus-within, so CSS forced display:block the instant the button was clicked. Removing the
   .open class therefore closed nothing, and the only way to dismiss the menu was to click
   somewhere else and blur the button.
   Open/close is JS only now: toggleCatDropdown() on the button, a document click for outside.
   Keyboard use is unaffected - Enter or Space on the focused button fires its click event. */

@media (max-width: 768px) {
    .menu-categories { padding: .25rem 0; }
    .category-pill { padding: .3rem .7rem; font-size: .78rem; }
}

/* ===== MENU CONTENT ===== */
.menu-content { padding: .75rem 0; }
.section-title { font-size: 1.25rem; margin-bottom: .6rem; padding-bottom: .35rem; border-bottom: 2px solid var(--border); }
.menu-category-section { scroll-margin-top: 120px; margin-bottom: 1.1rem; }
.menu-category-section:last-child { margin-bottom: 0; }
.menu-empty { text-align: center; padding: 3rem 0; color: var(--text-muted); font-size: 1.1rem; }
/* ===== MENU SEARCH ===== */
.menu-search-wrapper { margin-bottom: .85rem; }
.menu-search-field { position: relative; max-width: 480px; }
.menu-search-field i.fa-search { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; font-size: .9rem; }
.menu-search-field input { width: 100%; padding: .65rem 2.5rem .65rem 2.5rem; border: 2px solid var(--border); border-radius: 50px; font-size: .9rem; background: var(--bg); color: var(--text); transition: var(--transition); outline: none; font-family: inherit; }
.menu-search-field input:focus { border-color: var(--primary); background: #fff; box-shadow: 0 0 0 3px rgba(14,48,32,.1); }
.menu-search-field button { position: absolute; right: .75rem; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: .9rem; padding: .2rem .3rem; line-height: 1; }
.menu-search-field button:hover { color: var(--primary); }
@media (max-width: 600px) { .menu-search-field { max-width: 100%; } .menu-search-field input { font-size: 16px; } }
.food-body { padding: 1rem; flex: 1; display: flex; flex-direction: column; }
/* The dish name leads the card and its dietary/allergen icons follow on the same row, so the
   icons read as belonging to the name rather than as a separate block above it. */
.food-name-row { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin-bottom: .25rem; }
.food-name-row .food-name { margin-bottom: 0; }
.food-badges { display: inline-flex; align-items: center; gap: .3rem; }
.food-allergens { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .75rem; align-items: center; }
.food-allergens .allergen-label { font-size: .78rem; color: var(--text-muted); margin-right: .1rem; }
.allergen-tag { display: inline-block; padding: .15rem .55rem; border-radius: 50px; font-size: .75rem; background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.allergen-tag.allergen-icon { background: transparent; border: none; padding: 0 .06rem; font-size: 1rem; line-height: 1; }
.allergen-badge { display: inline-flex; align-items: center; justify-content: center; width: 1.55rem; height: 1.55rem; border-radius: 50%; background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; font-size: .8rem; line-height: 1; }
.heat-badge { display: inline-flex; align-items: center; font-size: .82rem; line-height: 1; color: #dc2626; }
.food-name { font-family: 'Josefin Sans', sans-serif; font-size: 1rem; font-weight: 600; margin-bottom: .25rem; }
.food-desc { color: var(--text-muted); font-size: .82rem; margin-bottom: .6rem; flex: 1; }
.food-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.food-price { font-size: 1.1rem; font-weight: 700; color: var(--primary); }
.food-image { height: 150px; background-size: cover; background-position: center; }
.food-items-preview { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .75rem; }
.meal-item-tag { display: inline-block; padding: .2rem .6rem; border-radius: 50px; font-size: .75rem; background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); }
.choice-tag { background: var(--accent-light); border-color: var(--accent); color: #92400e; }

/* ===== ALLERGEN & DIETARY GUIDE ===== */
.allergen-guide { background: var(--card-bg); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius); box-shadow: var(--shadow); padding: .65rem .85rem; margin-bottom: 1rem; }
.allergen-guide-title { display: flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .82rem; margin-bottom: .45rem; }
.allergen-guide-title i { color: var(--accent); }
.allergen-guide-items { display: flex; flex-wrap: wrap; gap: .3rem .75rem; margin-bottom: .45rem; }
.allergen-guide-item { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; color: var(--text); }
.allergen-guide-item .badge { font-size: .68rem; padding: .12rem .4rem; }
.allergen-guide-item .allergen-badge { width: 1.25rem; height: 1.25rem; font-size: .68rem; }
.allergen-guide-item .heat-badge { font-size: .75rem; }
/* The warning icon has to share its line with the sentence. This was display:flex, which made
   the whole sentence a single anonymous flex item: it could not fit beside the icon, so it
   wrapped onto the next line and left the icon stranded on a row of its own. Normal inline
   flow keeps the icon at the start of the text and lets the sentence wrap underneath it. */
.allergen-guide-disclaimer { margin: 0; font-size: .76rem; color: var(--text-muted); line-height: 1.5; }
.allergen-guide-disclaimer i { color: var(--accent); }
/* Direct child only, so the phone icon inside the link below keeps its own size. */
.allergen-guide-disclaimer > i { font-size: 1rem; margin-right: .4rem; vertical-align: -0.1em; }
.allergen-guide-phone { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; color: var(--primary); text-decoration: none; }
.allergen-guide-phone:hover { text-decoration: underline; }

/* Gift voucher panel */
.voucher-panel { background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 45%, var(--primary-dark) 100%); border: 1px solid rgba(255,255,255,.22); border-radius: 14px; box-shadow: 0 8px 26px rgba(0,0,0,.20); padding: .9rem 1rem; margin-bottom: 1.25rem; color: #fff; }
.voucher-panel-head { display: flex; align-items: center; gap: .7rem; cursor: pointer; user-select: none; }
.voucher-icon { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.4); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; color: var(--accent-inverse); flex-shrink: 0; }
.voucher-head-text { display: flex; flex-direction: column; gap: .1rem; }
.voucher-head-title { font-weight: 700; font-size: 1rem; letter-spacing: .2px; }
.voucher-head-sub { font-size: .78rem; color: rgba(255,255,255,.72); }
.voucher-chevron { margin-left: auto; color: var(--accent-inverse); transition: transform .2s; font-size: .9rem; }
.voucher-panel.open .voucher-chevron { transform: rotate(180deg); }
.voucher-panel-body { margin-top: .85rem; display: flex; flex-direction: column; gap: .75rem; }
.voucher-amounts { display: flex; flex-wrap: wrap; gap: .45rem; }
.voucher-amount-btn { padding: .45rem .95rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.45); background: rgba(255,255,255,.08); color: #fff; font-weight: 700; font-size: .85rem; cursor: pointer; transition: all .15s; }
.voucher-amount-btn:hover { background: rgba(255,255,255,.2); border-color: #fff; }
.voucher-amount-btn.active { background: var(--accent-inverse); border-color: var(--accent-inverse); color: var(--primary-dark); }
.voucher-inputs { display: flex; flex-direction: column; gap: .55rem; }
.voucher-panel .form-control { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.96); color: #111; }
.voucher-panel .form-control:focus { border-color: var(--accent-inverse); box-shadow: 0 0 0 3px rgba(255,255,255,.35); }
.voucher-panel .btn-primary { background: var(--accent-inverse); color: var(--primary-dark); font-weight: 700; border: none; }
.voucher-panel .btn-primary:hover { background: var(--accent-inverse-dark); transform: translateY(-1px); }
.voucher-panel .form-error { color: #ffd2d2; }

/* ===== MODAL STYLING ===== */
/* A flex column in which only the body scrolls.
   .modal-card used to carry overflow-y: auto itself, so the WHOLE dialog scrolled - footer
   included. On a dish with a long protein list the running total and the Add to Order button
   slid off the bottom as soon as the customer started reading, and they had to scroll back down
   to confirm what they had just chosen.
   Pinning the header and footer keeps the decision in view the whole time, and keeps the total
   beside the button that uses it - which a button floating over the options could not do
   without also covering the last option. */
.modal-card { background: var(--card-bg); border-radius: var(--radius); max-width: 500px; width: 100%; max-height: 85vh; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden; }
.modal-card > .modal-header { flex: 0 0 auto; }
.modal-card > .modal-footer { flex: 0 0 auto; box-shadow: 0 -4px 12px rgba(0,0,0,.06); }
.modal-card > .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.modal-wide { max-width: 600px; }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border); }
.modal-header h3 { margin: 0; }
.modal-body { padding: 1.5rem; }
.modal-footer { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-top: 1px solid var(--border); }
.modal-total { font-size: 1.3rem; font-weight: 700; color: var(--primary); }
.modal-section-title { font-size: .95rem; font-weight: 600; margin: 1rem 0 .5rem; color: var(--secondary); }
.modal-section-title:first-child { margin-top: 0; }
.additions-group-title { font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--primary); margin: .85rem 0 .25rem .75rem; }
.option-list { display: flex; flex-direction: column; gap: .35rem; }
.option-item { display: flex; align-items: center; gap: .6rem; padding: .5rem .75rem; border-radius: 8px; cursor: pointer; transition: var(--transition); }
.option-item:hover { background: var(--bg); }
.option-item input[type="radio"], .option-item input[type="checkbox"] { accent-color: var(--primary); }
.modal-qty-row { display: flex; align-items: center; gap: 1rem; margin: 1rem 0; }
.qty-control { display: flex; align-items: center; gap: .5rem; }
.qty-btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); background: #fff; cursor: pointer; font-size: 1rem; display: flex; align-items: center; justify-content: center; transition: var(--transition); }
.qty-btn:hover { background: var(--bg); border-color: var(--primary); }
.meal-included-item { padding: .35rem 0; font-size: .9rem; color: var(--text-muted); }
.meal-included-item i { color: var(--success); margin-right: .35rem; }

/* ===== CART PAGE ===== */
.cart-layout { display: grid; grid-template-columns: 1fr 340px; gap: 2rem; align-items: start; }
/* One white panel around the WHOLE order, not a card per item. A box per item read as a row of
   bubbles; a single panel with a hairline between rows keeps the order reading as one thing.
   gap 0 on purpose: the rows carry their own separator, so a gap here would leave each divider
   floating in the middle of empty space. The side padding is the panel's, so it is the same
   inset the rows had when they were cards - a long dish name keeps the width it had. */
.cart-items { display: flex; flex-direction: column; gap: 0; background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); padding: .35rem .7rem; }
/* Deliberately tight. A long dish name used to wrap over three or four lines on a phone, and every
   extra line made the card taller and pushed the rest of the order further down the page. The name
   now gets as much width as possible - the quantity control, price and remove button are kept
   compact, and every pixel saved there goes to the name, which is the thing that wraps. */
/* Flat rows inside that one panel: a hairline between them and none after the last, so the list
   does not end on a stray line. The rows carry no side padding of their own - the panel supplies
   the inset, which is what keeps the dividers clear of its edges. */
.cart-item-card { display: flex; gap: .55rem; align-items: center; padding: .6rem 0; border-bottom: 1px solid var(--border); }
.cart-item-card:last-child { border-bottom: none; }
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-name { font-weight: 600; font-size: .92rem; line-height: 1.28; margin-bottom: .1rem; overflow-wrap: break-word; }
.cart-item-detail { display: block; font-size: .72rem; color: var(--text-muted); line-height: 1.35; }
.cart-item-detail.notes { font-style: italic; }
.cart-item-actions { display: flex; align-items: center; gap: .35rem; flex-shrink: 0; }
.cart-item-price { font-weight: 700; color: var(--primary); font-size: .88rem; min-width: 42px; text-align: right; }
.btn-remove { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: .78rem; transition: var(--transition); padding: .1rem; }
.btn-remove:hover { color: var(--primary); }
/* Scoped to the cart on purpose: .qty-btn is shared with the dish modal, which is fine as it is. */
.cart-item-actions .qty-control { gap: .2rem; }
.cart-item-actions .qty-btn { width: 22px; height: 22px; font-size: .8rem; }
.cart-item-actions .qty-control > span { font-size: .8rem; font-weight: 600; min-width: 12px; text-align: center; }
.cart-summary-card { background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.5rem; position: sticky; top: 100px; }
.cart-summary-card h3 { margin-bottom: 1rem; }

/* ===== FLOATING CART ACTIONS =====
   Shown only on phones. Without it the customer had to scroll past the whole order to reach
   Proceed to Checkout or Continue Browsing, because in one column the summary card is the last
   thing on the page. Above 768px the summary card sticks in its own column, so it is not needed. */
.cart-action-bar { display: none; }

@media (max-width: 768px) {
    /* The cart page supplies its own fixed bar, so the generic one is suppressed: otherwise two
       fixed bars stack at the bottom, and the generic one links to the page you are already on. */
    body.cart-page .mobile-cart-bar { display: none !important; }

    .cart-action-bar {
        display: flex;
        gap: .5rem;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 160;
        padding: .45rem .8rem calc(.45rem + env(safe-area-inset-bottom, 0px));
        background: var(--card-bg);
        border-top: 1px solid var(--border);
        box-shadow: 0 -6px 20px rgba(0, 0, 0, .10);
    }
    .cart-action-bar .btn { padding: .55rem .85rem; font-size: .82rem; gap: .35rem; white-space: nowrap; }
    .cart-action-bar .cart-action-back { flex: 0 1 auto; }
    .cart-action-bar .cart-action-go { flex: 1 1 auto; justify-content: center; }

    /* Stand directly on top of the app's own tab bar. Measured on the live site that bar is 57.6px
       tall: 6px padding + a 45.6px tab row + 6px padding, plus the home-indicator inset.
       The inset must NOT be repeated in this bar's own padding - the tab bar underneath already
       accounts for it, and doing it twice is what left a band of white between these buttons and
       the nav bar on a phone with gesture navigation. */
    body.app-mode .cart-action-bar {
        bottom: calc(58px + env(safe-area-inset-bottom, 0px));
        padding-bottom: .45rem;
    }

    /* Leave room for the bar so the last card is never sitting underneath it. */
    .cart-page { padding-bottom: 5.5rem; }
    body.app-mode .cart-page { padding-bottom: calc(5.5rem + 57px); }

    /* The bar carries both buttons here, so the summary card shows only the money. */
    .cart-summary-actions { display: none; }

    /* Show the money first. In a single column the summary card was last - i.e. below every item -
       which is what made the totals need a scroll as well. Same trick the checkout page uses. */
    .cart-layout .cart-summary-card { order: -1; position: static; }
}

/* Two full-length labels on one row is tight below about 400px. Shave the type and padding rather
   than let the checkout button be pushed off the right edge, and give the dish name back a few
   pixels while we are here, since it is the thing that wraps. */
@media (max-width: 400px) {
    .cart-action-bar { gap: .35rem; padding-left: .6rem; padding-right: .6rem; }
    .cart-action-bar .btn { padding: .5rem .55rem; font-size: .78rem; gap: .3rem; }
    /* Same flat rows, just tighter - the panel still supplies the side inset. */
    .cart-item-card { padding: .55rem 0; gap: .4rem; }
    .cart-item-price { min-width: 38px; }
}

/* Below about 350px even the shaved labels do not fit, so the back button drops to just its arrow.
   The anchor keeps its aria-label, so it still reads as "Continue Browsing" to a screen reader. */
@media (max-width: 350px) {
    .cart-action-back-label { display: none; }
}
.summary-row { display: flex; justify-content: space-between; padding: .4rem 0; }
.summary-note { font-size: .8rem; color: var(--text-muted); margin-bottom: 1rem; }
.voucher-row { padding: .5rem 0; border-bottom: 1px dashed var(--border); margin-bottom: .25rem; }
.voucher-input-row { display: flex; gap: .5rem; }
.voucher-input { flex: 1; padding: .6rem .8rem; border: 2px solid var(--border); border-radius: 8px; font-size: .9rem; text-transform: uppercase; }
.voucher-input:focus { outline: none; border-color: var(--primary); }
.voucher-apply-btn { padding: .6rem 1.1rem; background: var(--primary); color: #fff; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; }
.voucher-apply-btn:disabled { opacity: .6; cursor: wait; }
.voucher-message { font-size: .8rem; margin-top: .4rem; }
.voucher-remove { background: none; border: none; color: var(--primary); cursor: pointer; font-size: .8rem; margin-left: .35rem; }
.btn-lg { padding: .9rem 2rem; font-size: 1.05rem; }

/* ===== CHECKOUT PAGE ===== */
.checkout-layout { display: grid; grid-template-columns: 1fr 340px; gap: 2rem; align-items: start; }
.checkout-options { }
.checkout-section { background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.5rem; margin-bottom: 1.25rem; }
.checkout-section h3 { font-size: 1.1rem; margin-bottom: .75rem; }
.order-type-toggle { display: flex; gap: .75rem; }
.type-option { cursor: pointer; flex: 1; min-width: 0; }
.type-option input[type="radio"] { display: none; }
.type-label { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: 1rem 1.25rem; border: 2px solid var(--border); border-radius: var(--radius); text-align: center; font-weight: 700; font-size: 1.05rem; transition: var(--transition); }
.type-label i { font-size: 1.15rem; }
.type-option input:checked + .type-label { border-color: var(--primary); color: var(--primary); background: rgba(0,0,0,.04); }
.estimated-time { margin-top: .5rem; font-size: .9rem; color: var(--text-muted); }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.stripe-card-element { padding: .75rem; border: 2px solid var(--border); border-radius: 8px; transition: var(--transition); }
.stripe-errors { color: var(--primary); font-size: .85rem; margin-top: .5rem; min-height: 1.2rem; }
.checkout-summary { position: sticky; top: 100px; }
.summary-item { display: flex; gap: .5rem; padding: .35rem 0; font-size: .9rem; }
.summary-item-qty { color: var(--text-muted); min-width: 28px; }
.summary-item-info { flex: 1; min-width: 0; }
.summary-item-name { display: block; font-weight: 500; }
.summary-item-detail { display: block; font-size: .78rem; color: var(--text-muted); line-height: 1.45; }
.summary-item-detail.notes { font-style: italic; }
.summary-setmeal-fixed { color: var(--text-muted); }
.summary-setmeal-choice { color: var(--primary); }
.summary-item-price { font-weight: 600; }
.summary-total { font-size: 1.2rem; padding-top: .75rem; border-top: 2px solid var(--border); margin-top: .5rem; }
.company-info-block { margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--border); font-size: .85rem; color: var(--text-muted); }
.company-info-block p { margin-bottom: .25rem; }

/* ===== CONFIRMATION PAGE ===== */
.confirmation-page { padding: 3rem 0; }
.confirm-card { background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); padding: 2.5rem; text-align: center; max-width: 600px; margin: 0 auto; }
.confirm-icon { font-size: 4rem; color: var(--success); margin-bottom: 1rem; }
.confirm-subtitle { color: var(--text-muted); font-size: 1.1rem; margin-bottom: 2rem; }
.confirm-details { text-align: left; margin-bottom: 2rem; }
.detail-row { display: flex; justify-content: space-between; padding: .6rem 0; border-bottom: 1px solid var(--border); }
.detail-row:last-child { border: none; }
.detail-label { color: var(--text-muted); }
.detail-value { font-weight: 600; }
.confirm-total { color: var(--primary); font-size: 1.15rem; }
.confirm-collection-info { background: var(--bg); border-radius: var(--radius); padding: 1.25rem; text-align: left; margin-bottom: 1.5rem; }
.confirm-collection-info h3 { margin-bottom: .5rem; font-size: 1rem; }
.confirm-collection-info p { font-size: .9rem; margin-bottom: .2rem; }
.confirm-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ===== ORDERS PAGE ===== */
.orders-list { display: flex; flex-direction: column; gap: 1rem; }
.order-card { background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.5rem; }
/* Collapsed older orders */
.order-card.collapsed .order-collapsible { display: none; }
.order-card.collapsed .rejection-notice { display: none; }
.order-toggle-btn { display: flex; align-items: center; gap: .4rem; width: 100%; padding: .5rem 0 0 0; background: none; border: none; border-top: 1px solid var(--border); color: var(--text-muted); font-size: .85rem; cursor: pointer; font-family: inherit; margin-top: .5rem; transition: color .2s; }
.order-toggle-btn:hover { color: var(--primary); }
.order-toggle-btn i { font-size: .75rem; transition: transform .2s; }
.order-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.order-number { font-weight: 700; font-size: 1.05rem; }
.order-date { display: block; font-size: .8rem; color: var(--text-muted); }
.order-badges { display: flex; gap: .4rem; flex-wrap: wrap; }
.badge-type { background: var(--bg); }
.badge-info { background: #dbeafe; color: #1d4ed8; }
.badge-success { background: #d1fae5; color: #065f46; }
.badge-warning { background: #fef3c7; color: #92400e; }
.badge-danger { background: #fee2e2; color: #991b1b; }
.order-items-list { margin-bottom: 1rem; }
.order-line-item { display: flex; gap: .5rem; padding: .35rem 0; font-size: .9rem; border-bottom: 1px solid var(--border); }
.order-line-item:last-child { border: none; }
.line-qty { color: var(--text-muted); min-width: 28px; }
.line-name { flex: 1; }
.line-name small { display: block; color: var(--text-muted); font-size: .8rem; }
.line-additions { color: var(--accent); }
.line-price { font-weight: 600; }
.setmeal-components { margin: .25rem 0 0 0; padding: 0; list-style: none; font-size: .8rem; color: var(--text-muted); }
.setmeal-components li { padding: .1rem 0; }
.setmeal-components li::before { content: "• "; }
.setmeal-components .comp-group { font-style: italic; margin-right: .2rem; }
.cart-setmeal-fixed { color: var(--text-muted); }
.cart-setmeal-choice { color: var(--primary); }
.order-footer { display: flex; justify-content: flex-end; gap: 1.5rem; padding-top: .5rem; border-top: 1px solid var(--border); font-size: .9rem; }
.order-total strong { color: var(--primary); }

/* ===== TOAST ===== */
.toast-notification { position: fixed; top: 2rem; right: 2rem; background: var(--secondary); color: #fff; padding: .75rem 1.5rem; border-radius: var(--radius); box-shadow: var(--shadow-lg); font-size: .9rem; z-index: 10000; transform: translateY(-20px); opacity: 0; transition: all .3s ease; border: 2px solid #fff; }
.toast-notification.show { transform: translateY(0); opacity: 1; }

/* ===== POSTCODE LOOKUP ===== */
.postcode-lookup-row { display: flex; gap: .5rem; align-items: center; }
.postcode-lookup-row .form-control { flex: 1; }
.postcode-lookup-row .btn { white-space: nowrap; }
.postcode-result { margin-top: .5rem; padding: .5rem .75rem; background: #ecfdf5; border-radius: 8px; font-size: .85rem; color: #065f46; }
.field-hint { margin-top: .35rem; font-size: .78rem; color: var(--text-muted); line-height: 1.35; }
.delivery-charge-info { display: flex; align-items: center; margin-top: 1rem; }
.delivery-charge-badge { display: flex; align-items: center; gap: .5rem; padding: .6rem 1rem; background: var(--accent-light); border-radius: var(--radius); font-size: .9rem; width: 100%; }
.delivery-charge-badge i { color: var(--accent); }
.delivery-distance { color: var(--text-muted); font-size: .8rem; margin-left: auto; }
.delivery-out-of-range { margin-top: 1rem; padding: .75rem 1rem; background: #fef2f2; border: 1px solid #fecaca; border-radius: var(--radius); color: #991b1b; font-size: .9rem; }

/* ===== PAYMENT METHOD TOGGLE ===== */
.payment-toggle { display: flex; gap: .75rem; flex-wrap: wrap; }
.payment-option { cursor: pointer; flex: 1; min-width: 140px; }
.payment-option input[type="radio"] { display: none; }
.payment-label { display: flex; align-items: center; gap: .5rem; padding: .75rem 1.25rem; border: 2px solid var(--border); border-radius: var(--radius); text-align: center; font-weight: 600; font-size: .9rem; transition: var(--transition); justify-content: center; }
.payment-option input:checked + .payment-label { border-color: var(--primary); color: var(--primary); background: rgba(0,0,0,.04); }
.cash-info { padding: .75rem 1rem; background: #fef3c7; border-radius: var(--radius); font-size: .85rem; color: #92400e; }
.cash-info i { margin-right: .35rem; }

/* ===== TIME SELECTION ===== */
.time-options { display: flex; gap: .5rem; flex-wrap: wrap; }
.time-option { cursor: pointer; }
.time-option input[type="radio"] { display: none; }
.time-label { display: inline-block; padding: .5rem 1rem; border: 2px solid var(--border); border-radius: 50px; font-size: .85rem; font-weight: 600; transition: var(--transition); }
.time-option input:checked + .time-label { border-color: var(--primary); color: var(--primary); background: rgba(0,0,0,.04); }
.time-label:hover { border-color: var(--primary); }

/* ===== ORDER STATUS TRACKING ===== */
.status-tracker { display: flex; justify-content: space-between; margin: 1.5rem 0; position: relative; }
.status-tracker::before { content: ''; position: absolute; top: 18px; left: 0; right: 0; height: 3px; background: var(--border); z-index: 0; }
.status-tracker-fill { position: absolute; top: 18px; left: 0; height: 3px; background: var(--success); z-index: 1; transition: width .5s ease; }
.status-step { display: flex; flex-direction: column; align-items: center; z-index: 2; }
.status-dot { width: 36px; height: 36px; border-radius: 50%; background: var(--card-bg); border: 3px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: .8rem; color: var(--text-muted); transition: var(--transition); margin-bottom: .35rem; }
.status-step.active .status-dot { border-color: var(--success); background: var(--success); color: #fff; }
/* The step the order is on right now. It used to be a dark outline over a faint
   rgba(200,16,46,.1) tint - a red borrowed from another business's palette - which made the
   current stage the least obvious marker on the whole tracker. It is solid green with a halo
   now, so the stage the customer is waiting on stands out as clearly as the completed ones. */
.status-step.current .status-dot { border-color: var(--success); background: var(--success); color: #fff; box-shadow: 0 0 0 4px rgba(16,185,129,.22); animation: pulse 1.5s infinite; }
.status-step-label { font-size: .7rem; color: var(--text-muted); text-align: center; max-width: 60px; }
.status-step.active .status-step-label { color: var(--success); font-weight: 600; }
.status-step.current .status-step-label { color: var(--success); font-weight: 700; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }

/* ===== REJECTION NOTICE ===== */
.rejection-notice { background: #fef2f2; border: 1px solid #fecaca; border-radius: var(--radius); padding: 1rem 1.25rem; margin: 1rem 0; }
.rejection-notice i { color: #991b1b; margin-right: .5rem; }
.rejection-notice strong { color: #991b1b; }

/* ===== ABOUT PAGE ===== */
.about-page { padding: 1rem 0 4rem; }
.about-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.75rem;
    margin-bottom: 1.5rem;
}
.about-card h2 { font-size: 1.2rem; margin-bottom: 1rem; display: flex; align-items: center; gap: .5rem; }
.about-contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.about-contact-item { display: flex; align-items: flex-start; gap: .75rem; padding: .75rem; background: var(--bg); border-radius: 10px; }
.about-contact-item i { font-size: 1.2rem; color: var(--primary); margin-top: 2px; }
.about-contact-item strong { display: block; font-size: .85rem; color: var(--text-muted); margin-bottom: 2px; }
.about-contact-item a, .about-contact-item span { font-size: .95rem; color: var(--text); text-decoration: none; }
.about-contact-item a:hover { color: var(--primary); }
.about-hours { display: flex; flex-direction: column; gap: .35rem; }
.about-hours-row { display: flex; justify-content: space-between; padding: .55rem .75rem; border-radius: 8px; }
.about-hours-row.today { background: var(--accent-light); font-weight: 600; }
.about-day { font-size: .95rem; }
.about-time { font-size: .95rem; color: var(--text-muted); }
.about-hours-row.today .about-time { color: var(--text); }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .container { padding: 0 1rem; }
    .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--secondary); flex-direction: column; padding: 1rem; gap: .25rem; border-top: 1px solid rgba(255,255,255,.1); }
    .nav-links.active, .nav-links.nav-open { display: flex; }
    .nav-toggle { display: block; }
    .hero h1 { font-size: 2rem; }
    .hero p { font-size: 1rem; }
    .food-grid { grid-template-columns: 1fr; }
    .form-row, .form-row-2 { grid-template-columns: 1fr; }
    .cart-item { flex-wrap: wrap; }
    .order-type-toggle { flex-direction: column; }
    .checkout-layout { grid-template-columns: 1fr; }
    .checkout-layout .checkout-summary { order: -1; position: static; }
    .cart-layout { grid-template-columns: 1fr; }
    .order-header { flex-direction: column; gap: .5rem; }
}

/* ===== BUSINESS STATUS BANNER ===== */
.business-status-banner {
    padding: .75rem 0;
    text-align: center;
    font-size: .95rem;
    font-weight: 500;
}
.business-status-banner .container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}
.business-status-banner.open {
    background: #ecfdf5;
    color: #065f46;
    border-bottom: 2px solid #10b981;
}
.business-status-banner.closed {
    background: #fef2f2;
    color: #991b1b;
    border-bottom: 2px solid #ef4444;
}

/* ===== OPENING TIMES ===== */
.opening-times {
    padding: 3rem 0 2rem;
    background: var(--surface);
}
.opening-times h2 {
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    color: var(--primary);
}
.hours-grid {
    max-width: 400px;
    margin: 0 auto;
}
.hours-row {
    display: flex;
    justify-content: space-between;
    padding: .6rem .75rem;
    border-bottom: 1px solid var(--border);
    font-size: .95rem;
}
.hours-row.today {
    background: rgba(200, 16, 46, .06);
    font-weight: 600;
    border-radius: 6px;
}
.hours-row.closed-day .day-hours {
    color: #9ca3af;
    font-style: italic;
}

/* ===== PREORDER BANNER (checkout) ===== */
.preorder-banner {
    background: #fffbeb;
    border: 1px solid #f59e0b;
    border-radius: 8px;
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    font-size: .9rem;
    color: #92400e;
    display: flex;
    align-items: flex-start;
    gap: .5rem;
}
.preorder-banner i { margin-top: 2px; }

.orders-paused-banner {
    background: var(--secondary);
    border-bottom: 2px solid var(--primary-light);
    padding: .85rem 0;
    font-size: .95rem;
    color: rgba(255,255,255,.85);
    text-align: center;
}
.orders-paused-banner .container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
}
.orders-paused-banner i { font-size: 1.4rem; margin-top: 1px; }

/* Disabled add-to-cart state when orders are paused */
.btn-add-item.orders-disabled,
.btn-add-setmeal.orders-disabled {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
}


/* ===== SET MEAL SWAP UI ===== */
.meal-included-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem 0;
}
.meal-item-label {
    flex: 1;
}
.btn-swap-item {
    background: none;
    border: 1px solid var(--primary);
    color: var(--primary);
    border-radius: 4px;
    padding: .2rem .5rem;
    font-size: .8rem;
    cursor: pointer;
    transition: background .2s, color .2s;
}
.btn-swap-item:hover {
    background: var(--primary);
    color: #fff;
}
.swap-charge-label {
    font-size: .8rem;
    color: var(--primary);
    font-weight: 600;
}
.swap-picker-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
}
.swap-picker-panel {
    background: #fff;
    border-radius: 12px;
    padding: 1.5rem;
    max-width: 480px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0,0,0,.2);
}
.swap-picker-panel h3 {
    margin: 0 0 .5rem;
    font-size: 1.1rem;
    color: var(--primary);
}
.swap-picker-info {
    font-size: .9rem;
    color: #6b7280;
    margin-bottom: .75rem;
}
.swap-category-list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1rem;
}
.swap-category-btn {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: .5rem 1rem;
    cursor: pointer;
    font-size: .9rem;
    transition: border-color .2s, background .2s;
}
.swap-category-btn:hover {
    border-color: var(--primary);
    background: rgba(200, 16, 46, .04);
}
.swap-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: .5rem;
    margin-bottom: 1rem;
}
.swap-item-btn {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: .5rem;
    cursor: pointer;
    font-size: .85rem;
    text-align: center;
    transition: border-color .2s, box-shadow .2s;
}
.swap-item-btn:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(200, 16, 46, .15);
}
.swap-item-btn small {
    display: block;
    color: #6b7280;
    font-size: .75rem;
}
.swap-picker-actions {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding-top: .5rem;
    border-top: 1px solid var(--border);
}

/* ===== MY PROFILE ===== */
.profile-page { max-width: 780px; padding: 3rem 1.5rem; }
.profile-page h1 { font-size: 1.9rem; margin-bottom: 1.5rem; display: flex; align-items: center; gap: .6rem; }
.profile-card { background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.75rem; margin-bottom: 1.5rem; }
.profile-card h2 { font-size: 1.25rem; margin-bottom: .35rem; }
.profile-page h3.profile-subhead { font-size: 1rem; margin: 1.75rem 0 .75rem; color: var(--secondary); }
.profile-hint { color: var(--text-muted); font-size: .85rem; margin-bottom: 1rem; }
.profile-details { display: grid; gap: .75rem; margin-bottom: .75rem; }
.profile-details > div { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; }
.profile-details dt { font-weight: 500; font-size: .9rem; color: var(--secondary); min-width: 130px; }
.profile-details dd { margin: 0; font-size: .95rem; }
.profile-badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; padding: .15rem .5rem; border-radius: 50px; margin-left: .35rem; vertical-align: middle; }
.profile-badge-ok { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.profile-badge-warn { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.profile-alert { border-radius: 10px; padding: .85rem 1rem; margin-bottom: 1.25rem; font-size: .9rem; display: flex; align-items: center; gap: .5rem; }
.profile-alert-ok { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }
.profile-alert-err { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
.profile-address-list { display: grid; gap: .85rem; margin-bottom: 1rem; }
.profile-address { border: 1px solid var(--border); border-radius: 10px; padding: 1rem; display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between; align-items: flex-start; }
.profile-address-body { display: flex; flex-direction: column; gap: .1rem; font-size: .92rem; }
.profile-address-line { display: block; }
.profile-address-note { color: var(--text-muted); font-size: .82rem; margin-top: .35rem; }
.profile-address-actions { display: flex; gap: .5rem; align-items: center; }
.profile-address-actions form { margin: 0; }
.profile-check { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.profile-check label { font-weight: 400; font-size: .9rem; color: var(--text); margin: 0; }
.profile-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.profile-danger { border: 1px solid #fecaca; }
.profile-danger h2 { color: #b91c1c; }
.profile-danger p { font-size: .9rem; color: var(--text-muted); margin-bottom: 1rem; }
.btn-danger { background: #b91c1c; color: #fff; }
.btn-danger:hover { background: #991b1b; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(185,28,28,.35); }
.profile-deleted { text-align: center; padding: 2.5rem 1.75rem; }
.profile-deleted-icon { font-size: 3rem; color: var(--success); margin-bottom: 1rem; }
.profile-deleted h1 { font-size: 1.6rem; margin-bottom: 1rem; justify-content: center; }
.profile-deleted p { font-size: .95rem; color: var(--text-muted); margin-bottom: .85rem; }
.profile-deleted .profile-actions { justify-content: center; margin-top: 1.5rem; }

@media (max-width: 600px) {
    .profile-address { flex-direction: column; }
    .profile-details dt { min-width: 100%; }
}

/* ===== APP BOTTOM TAB BAR ==============================================================
   Inside the Android app only. _Layout emits the bar solely when the request user agent
   carries the app's own token, so every rule below is inert for normal website visitors. */
.app-tabbar { display: none; }

body.app-mode {
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
}

/* The navbar carries the status-bar height as its OWN top padding, so its background fills
   the strip behind the status bar and scrolling content passes BEHIND it. Padding the body
   instead left a gap that content scrolled through, which showed above the navbar and
   behind the phone's clock and battery icons. */
body.app-mode .navbar {
    padding-top: env(safe-area-inset-top, 0px);
    top: 0;
}

/* No app-mode override is needed any more: the rule above already adds the status-bar inset,
   and site.js measures the rest. The old override hard-coded 54px while the navbar is actually
   65px, so the category bar jumped up 11px the moment it stuck and hid the top of its buttons
   behind the navbar. */

/* The app has the tab bar and the hamburger menu, so the site footer is redundant. */
body.app-mode .site-footer { display: none; }

/* Quick links on the About page: hidden on the website, where the footer already lists
   them, and shown in the app where that footer is hidden. */
.about-quicklinks { display: none; }
body.app-mode .about-quicklinks {
    display: block;
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-top: 1.5rem;
    overflow: hidden;
}
body.app-mode .about-quicklinks summary {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 1rem 1.25rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
body.app-mode .about-quicklinks summary::-webkit-details-marker { display: none; }
body.app-mode .about-quicklinks summary::after {
    content: '\f078';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-left: auto;
    font-size: .72rem;
    color: var(--text-muted);
    transition: transform .2s ease;
}
body.app-mode .about-quicklinks[open] summary::after { transform: rotate(180deg); }
body.app-mode .about-quicklinks ul {
    list-style: none;
    margin: 0;
    padding: 0 1.25rem 1rem;
}
body.app-mode .about-quicklinks a {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .75rem 0;
    border-top: 1px solid var(--border);
    font-size: .92rem;
    color: var(--text);
    text-decoration: none;
}
body.app-mode .about-quicklinks a i { color: var(--primary); width: 1.1rem; text-align: center; }

body.app-mode .app-tabbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    background: rgba(255,255,255,.94);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid var(--border);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -6px 24px rgba(0,0,0,.06);
}

.app-tab {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 3px 2px 1px;
    color: var(--text-muted);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: color .18s ease;
}

.app-tab-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 27px;
    border-radius: 14px;
    transition: background .2s ease, transform .12s ease;
}

/* Thin-stroke outline icons, drawn on a 24x24 grid with round caps and joins. */
.app-tab-icon svg {
    width: 21px;
    height: 21px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.app-tab-label {
    font-size: .66rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .01em;
}

.app-tab.active { color: var(--primary); }
.app-tab.active .app-tab-icon { background: var(--accent-light); }
.app-tab.active .app-tab-icon svg { stroke-width: 2.1; }
.app-tab:active .app-tab-icon { transform: scale(.93); }

.app-tab-badge {
    position: absolute;
    top: -5px;
    right: 1px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--primary);
    color: #fff;
    font-size: .62rem;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
}

/* In the app the top bar keeps the logo and a three-line hamburger menu, because the
   bottom tab bar already covers Home / Menu / Cart / Orders / Account. The hamburger holds
   the account and info items (My profile, My orders, About, etc.) instead of the desktop
   email dropdown. */
body.app-mode .nav-toggle { display: flex; }
body.app-mode .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    /* The site's own navbar colour. This was hard-coded to a cream (#F6EDE0) that belongs to
       another business's palette, so the app's hamburger drawer came out cream while the
       website's own navbar was a different colour. Always take it from the theme, never inline. */
    background: var(--secondary);
    flex-direction: column;
    padding: 1rem;
    gap: .25rem;
    border-top: 1px solid rgba(0,0,0,.08);
    z-index: 150;
    box-shadow: var(--shadow-lg);
}
body.app-mode .nav-links.active { display: flex; }
body.app-mode .install-app-btn { display: none; }

/* The Cart tab's badge replaces the floating basket bar, so they never stack. */
body.app-mode .mobile-cart-bar { display: none !important; }

/* ===== CHECKOUT SUBMIT BAR =====
   The payment choice and the Place Order button travel together. On a phone the order summary and
   the whole address form sit above them, so without this the customer had to scroll past all of it
   to pay. Above 768px the bar is ordinary flow and the button sits where it always did. */
.checkout-submit-bar { margin-top: 1rem; }
.checkout-submit-bar .stripe-errors { margin: 0 0 .5rem; }
.checkout-submit-bar .stripe-errors:empty { display: none; }

@media (max-width: 768px) {
    /* The generic bar links to the cart, which is behind you by now, and would stack under this one. */
    body.checkout-page .mobile-cart-bar { display: none !important; }

    .checkout-submit-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 160;
        margin: 0;
        padding: .45rem .8rem calc(.45rem + env(safe-area-inset-bottom, 0px));
        background: var(--card-bg);
        border-top: 1px solid var(--border);
        box-shadow: 0 -6px 20px rgba(0, 0, 0, .10);
    }
    .checkout-submit-bar .payment-toggle { margin-bottom: .45rem; }
    /* Keep both choices on one row on the narrowest phones, and trim the chip height: the point of
       the bar is to be reachable, not to cover a quarter of the screen. */
    .checkout-submit-bar .payment-option { min-width: 0; }
    .checkout-submit-bar .payment-label { padding: .5rem .9rem; }

    /* Stand on the app's tab bar, which is 57.6px plus the home-indicator inset. The inset is NOT
       repeated in this bar's own padding - the tab bar underneath already accounts for it, and
       doing it twice is what leaves a band of white on a phone with gesture navigation. */
    body.app-mode .checkout-submit-bar {
        bottom: calc(58px + env(safe-area-inset-bottom, 0px));
        padding-bottom: .45rem;
    }

    /* Room to scroll the last field clear of the bar. */
    .checkout-page { padding-bottom: 12rem; }
    body.app-mode .checkout-page { padding-bottom: calc(12rem + 58px); }
}
/* Inside the submit bar the Stripe note is kept to one tight line so the bar stays short. */
.checkout-submit-bar .card-stripe-info { margin: .4rem 0 0; padding: .35rem .5rem; font-size: .78rem; }
/* ===== ORDER TYPE: make it read as a decision, not a label =====
   It is the first thing on the page and the charges, the delivery fields and the estimated time all
   follow from it, so it is deliberately the loudest control: bigger targets, and while nothing has
   been chosen a dashed outline and a prompt. Selecting one fills it in solid. */
.order-type-toggle.needs-choice { outline: 2px dashed var(--primary); outline-offset: 5px; border-radius: var(--radius); }
.type-option:hover .type-label { border-color: var(--primary); }
.type-option input:checked + .type-label { border-color: var(--primary); background: var(--primary); color: #fff; box-shadow: var(--shadow); }
.type-option input:focus-visible + .type-label { outline: 3px solid var(--accent); outline-offset: 2px; }
.order-type-hint { margin: .6rem 0 0; font-size: .85rem; font-weight: 600; color: var(--primary); }
.order-type-hint i { margin-right: .3rem; }