/* ============================================================
   RESTAURANT / FOOD TRUCK — Tenant UI CSS
   File:      public/css/restaurant-ui.css
   Namespace: rui-
   Version:   3.0 — Fully Organized & Documented

   ┌─────────────────────────────────────────────────────────┐
   │  TABLE OF CONTENTS                                      │
   │                                                         │
   │   PART A — THEME CONFIGURATION (edit colors here!)     │
   │      A1  Brand Colors & Accent                         │
   │      A2  Dark Mode Tones                               │
   │      A3  Light UI Tones                                │
   │      A4  Status Colors                                  │
   │      A5  Typography Fonts                               │
   │      A6  Spacing Scale                                  │
   │      A7  Border Radius Scale                            │
   │      A8  Shadow Presets                                 │
   │      A9  Animation Easing                               │
   │                                                         │
   │   PART B — BASE / RESET                                 │
   │      B1  Box-sizing Reset                               │
   │                                                         │
   │   PART C — LAYOUT WRAPPERS                              │
   │      C1  Page Wrapper (light)                           │
   │      C2  Container Widths                               │
   │      C3  Page Header                                    │
   │                                                         │
   │   PART D — UI COMPONENTS                                │
   │      D1  Cards                                          │
   │      D2  Buttons                                        │
   │      D3  Forms                                          │
   │      D4  Alerts                                         │
   │      D5  Badges                                         │
   │      D6  Tables                                         │
   │                                                         │
   │   PART E — GRID & UTILITY                               │
   │      E1  Grid Utilities                                 │
   │      E2  Spacing & Text Utilities                       │
   │                                                         │
   │   PART F — FEATURE SECTIONS                             │
   │      F1  Auth Pages (Login / Register)                  │
   │      F2  User Dashboard & Quick Tiles                   │
   │      F3  Cart                                           │
   │      F4  Checkout                                       │
   │      F5  Orders (User + Admin)                          │
   │      F6  Menu Board                                     │
   │      F7  Food Section Landing                           │
   │      F8  Promotions Gallery (horizontal scroll)        │
   │      F9  Hero Banner (full-screen, centred)             │
   │      F10 Admin Orders Extras                            │
   │      F11 Payment Form                                   │
   │                                                         │
   │   PART G — ANIMATIONS                                   │
   │      G1  Scroll Reveal                                  │
   │                                                         │
   │   PART H — SITE CHROME                                  │
   │      H1  Site Header (desktop + mobile)                 │
   │      H2  Header — Transparent Top / Solid on Scroll     │
   │      H3  Site Footer                                    │
   │                                                         │
   │   PART I — PAGE OVERRIDES                               │
   │      I1  Owners Page                                    │
   │                                                         │
   │   PART J — RESPONSIVE OVERRIDES                         │
   │      J1  Breakpoints                                    │
   └─────────────────────────────────────────────────────────┘
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap');


/* ============================================================
   PART A — THEME CONFIGURATION
   ─────────────────────────────────────────────────────────
   This is your single source of truth for all colors, fonts,
   spacing, and animation values used throughout the stylesheet.
   Change a value here and it updates everywhere automatically.
   ============================================================ */

:root {

    /* ── A1  BRAND COLORS & ACCENT ──────────────────────────
       These are the main "personality" colors of your site.
       --rui-accent        : used on buttons, badges, highlights
       --rui-accent-hover  : darker shade for hover states
       --rui-accent-text   : text version of accent (for light bg)
       --rui-accent-dim    : pale tinted background behind accents
    ─────────────────────────────────────────────────────── */
    --rui-accent:        #c8956c;
    --rui-accent-hover:  #d9a880;
    --rui-accent-text:   #7c4a25;
    --rui-accent-dim:    rgba(200, 149, 108, 0.12);

    /* ── A2  DARK MODE TONES ────────────────────────────────
       Used in dark sections like the header, footer, banners,
       and the promotions gallery.
    ─────────────────────────────────────────────────────── */
    --rui-dark:         #0f0f11;
    --rui-dark-2:       #161618;
    --rui-dark-3:       #1e1e22;
    --rui-border-dark:  rgba(255, 255, 255, 0.07);
    --rui-pub-muted:    rgba(255, 255, 255, 0.50);

    /* ── A3  LIGHT UI TONES ─────────────────────────────────
       Used in cards, forms, page backgrounds (the bright areas).
    ─────────────────────────────────────────────────────── */
    --rui-bg-page:      #f4f5f7;
    --rui-bg-card:      #ffffff;
    --rui-bg-subtle:    #f9fafb;
    --rui-border:       #e5e7eb;
    --rui-text-heading: #111827;
    --rui-text-body:    #374151;
    --rui-text-muted:   #6b7280;
    --rui-text-light:   #9ca3af;

    /* ── A4  STATUS COLORS ──────────────────────────────────
       Success / Danger / Warning / Info — used in alerts,
       badges, order statuses, and form validation.
    ─────────────────────────────────────────────────────── */
    --rui-success:    #16a34a;
    --rui-success-bg: #f0fdf4;
    --rui-success-br: #bbf7d0;

    --rui-danger:     #dc2626;
    --rui-danger-bg:  #fef2f2;
    --rui-danger-br:  #fecaca;

    --rui-warning:    #d97706;
    --rui-warning-bg: #fffbeb;
    --rui-warning-br: #fde68a;

    --rui-info:       #0284c7;
    --rui-info-bg:    #f0f9ff;
    --rui-info-br:    #bae6fd;

    /* ── A5  TYPOGRAPHY FONTS ───────────────────────────────
       --rui-font-display : used for headings, titles, badges
       --rui-font-body    : used for body text, labels, inputs
    ─────────────────────────────────────────────────────── */
    --rui-font-display: 'Syne', sans-serif;
    --rui-font-body:    'DM Sans', sans-serif;

    /* ── A6  SPACING SCALE ──────────────────────────────────
       A consistent set of spacing values used for padding
       and margins. xs → xl goes small to large.
    ─────────────────────────────────────────────────────── */
    --rui-space-xs:  6px;
    --rui-space-sm: 12px;
    --rui-space-md: 24px;
    --rui-space-lg: 48px;
    --rui-space-xl: 80px;

    /* ── A7  BORDER RADIUS SCALE ────────────────────────────
       Controls how rounded corners are across components.
    ─────────────────────────────────────────────────────── */
    --rui-radius-sm:   5px;
    --rui-radius-md:   10px;
    --rui-radius-lg:   16px;
    --rui-radius-xl:   24px;
    --rui-radius-full: 999px;

    /* ── A8  SHADOW PRESETS ─────────────────────────────────
       Used on cards, modals, and dropdowns.
    ─────────────────────────────────────────────────────── */
    --rui-shadow-sm: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
    --rui-shadow-md: 0 4px 16px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
    --rui-shadow-lg: 0 16px 40px rgba(0,0,0,.10);

    /* ── A9  ANIMATION EASING ───────────────────────────────
       --rui-ease       : smooth "spring" feel for transitions
       --rui-transition : shorthand used on most hover effects
    ─────────────────────────────────────────────────────── */
    --rui-ease:       cubic-bezier(0.22, 1, 0.36, 1);
    --rui-transition: 0.25s var(--rui-ease);
}


/* ============================================================
   PART B — BASE / RESET
   ─────────────────────────────────────────────────────────
   Minimal reset scoped only to rui- components so we don't
   accidentally break other styles on the page.
   ============================================================ */

/* B1 — BOX-SIZING RESET */
.rui-page *,
.rui-card *,
.rui-auth *,
.rui-form * {
    box-sizing: border-box;
}


/* ============================================================
   PART C — LAYOUT WRAPPERS
   ─────────────────────────────────────────────────────────
   Wrappers that control the overall page structure and
   max-width of content areas.
   ============================================================ */

/* C1 — PAGE WRAPPER (light background) */
.rui-page {
    min-height: 80vh;
    background: var(--rui-bg-page);
    padding: var(--rui-space-lg) 0 var(--rui-space-xl);
    color: var(--rui-text-body);
    font-family: var(--rui-font-body);
    -webkit-font-smoothing: antialiased;
}

/* C2 — CONTAINER WIDTHS */
.rui-container     { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 20px; }
.rui-container--sm { max-width: 680px; }
.rui-container--md { max-width: 900px; }

/* C3 — PAGE HEADER (title + action buttons row) */
.rui-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--rui-space-md);
    margin-bottom: var(--rui-space-lg);
    padding-bottom: var(--rui-space-md);
    border-bottom: 1px solid var(--rui-border);
}
.rui-page-header h1 {
    font-family: var(--rui-font-display);
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--rui-text-heading);
    margin: 0 0 4px;
    line-height: 1.1;
}
.rui-breadcrumb       { font-size: 0.82rem; color: var(--rui-text-muted); margin: 0; }
.rui-breadcrumb a     { color: var(--rui-accent-text); text-decoration: none; }
.rui-breadcrumb a:hover { text-decoration: underline; }
.rui-page-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rui-space-sm);
    align-items: center;
}


/* ============================================================
   PART D — UI COMPONENTS
   ─────────────────────────────────────────────────────────
   Reusable building blocks: cards, buttons, forms, alerts,
   badges, and tables.
   ============================================================ */

/* ── D1  CARDS ──────────────────────────────────────────── */
.rui-card {
    background: var(--rui-bg-card);
    border: 1px solid var(--rui-border);
    border-radius: var(--rui-radius-lg);
    overflow: hidden;
    box-shadow: var(--rui-shadow-sm);
    transition: transform var(--rui-transition), box-shadow var(--rui-transition);
}
.rui-card--hover:hover {
    transform: translateY(-3px);
    box-shadow: var(--rui-shadow-md);
}
.rui-card__header {
    padding: var(--rui-space-md);
    border-bottom: 1px solid var(--rui-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rui-space-sm);
    flex-wrap: wrap;
    background: var(--rui-bg-subtle);
}
.rui-card__header h2,
.rui-card__header h3 {
    font-family: var(--rui-font-display);
    font-weight: 700;
    color: var(--rui-text-heading);
    margin: 0;
    font-size: 1rem;
}
.rui-card__body   { padding: var(--rui-space-md); }
.rui-card__footer {
    padding: var(--rui-space-sm) var(--rui-space-md);
    border-top: 1px solid var(--rui-border);
    background: var(--rui-bg-subtle);
}
.rui-card__img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s var(--rui-ease);
}
.rui-card--hover:hover .rui-card__img { transform: scale(1.04); }
.rui-no-image {
    width: 100%;
    height: 160px;
    background: var(--rui-bg-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    color: var(--rui-text-light);
    border-bottom: 1px solid var(--rui-border);
}

/* Spacing shorthands used inside cards */
.rui-mb-sm { margin-bottom: var(--rui-space-sm); }
.rui-mb-md { margin-bottom: var(--rui-space-md); }
.rui-mb-lg { margin-bottom: var(--rui-space-lg); }
.rui-mt-md { margin-top: var(--rui-space-md); }
.rui-mt-lg { margin-top: var(--rui-space-lg); }


/* ── D2  BUTTONS ────────────────────────────────────────── */
.rui-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 20px;
    border-radius: var(--rui-radius-full);
    font-family: var(--rui-font-body);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all var(--rui-transition);
    white-space: nowrap;
    line-height: 1;
}

/* Size variants */
.rui-btn--sm { padding: 7px 14px; font-size: 0.8rem; }
.rui-btn--lg { padding: 14px 28px; font-size: 1rem; }

/* Style variants */
.rui-btn--primary {
    background: var(--rui-accent);
    color: #fff;
    box-shadow: 0 2px 8px rgba(200, 149, 108, 0.25);
}
.rui-btn--primary:hover {
    background: var(--rui-accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(200, 149, 108, 0.35);
    color: #fff;
    text-decoration: none;
}
.rui-btn--secondary {
    background: #fff;
    color: var(--rui-text-body);
    border: 1px solid var(--rui-border);
}
.rui-btn--secondary:hover {
    background: var(--rui-bg-subtle);
    border-color: #d1d5db;
    transform: translateY(-1px);
    color: var(--rui-text-heading);
    text-decoration: none;
}
.rui-btn--danger {
    background: var(--rui-danger-bg);
    color: var(--rui-danger);
    border: 1px solid var(--rui-danger-br);
}
.rui-btn--danger:hover {
    background: #fee2e2;
    transform: translateY(-1px);
    color: var(--rui-danger);
    text-decoration: none;
}
.rui-btn--ghost {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
}
.rui-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff;
    text-decoration: none;
}

/* Button row layout helpers */
.rui-btn-row       { display: flex; flex-wrap: wrap; gap: var(--rui-space-sm); align-items: center; justify-content: center; }
.rui-btn-row--left { justify-content: flex-start; }


/* ── D3  FORMS ──────────────────────────────────────────── */
.rui-form-group  { margin-bottom: var(--rui-space-md); }
.rui-form-label  { display: block; font-size: 0.82rem; font-weight: 600; color: var(--rui-text-heading); margin-bottom: 6px; }
.rui-required    { color: var(--rui-danger); margin-left: 3px; }
.rui-form-control {
    width: 100%;
    background: #fff;
    border: 1px solid var(--rui-border);
    border-radius: var(--rui-radius-md);
    color: var(--rui-text-heading);
    font-family: var(--rui-font-body);
    font-size: 0.95rem;
    padding: 10px 14px;
    outline: none;
    transition: border-color var(--rui-transition), box-shadow var(--rui-transition);
}
.rui-form-control:focus {
    border-color: var(--rui-accent);
    box-shadow: 0 0 0 3px var(--rui-accent-dim);
}
.rui-form-control::placeholder { color: var(--rui-text-light); }
textarea.rui-form-control       { resize: vertical; min-height: 110px; }
select.rui-form-control {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
}
.rui-form-hint   { font-size: 0.78rem; color: var(--rui-text-muted); margin-top: 5px; }
.rui-form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--rui-space-md); }


/* ── D4  ALERTS ─────────────────────────────────────────── */
.rui-alert {
    padding: 12px 16px;
    border-radius: var(--rui-radius-md);
    font-size: 0.9rem;
    margin-bottom: var(--rui-space-md);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.5;
}
.rui-alert--success { background: var(--rui-success-bg); border: 1px solid var(--rui-success-br); color: var(--rui-success); }
.rui-alert--danger,
.rui-alert--error   { background: var(--rui-danger-bg);  border: 1px solid var(--rui-danger-br);  color: var(--rui-danger);  }
.rui-alert--warning { background: var(--rui-warning-bg); border: 1px solid var(--rui-warning-br); color: var(--rui-warning); }
.rui-alert--info    { background: var(--rui-info-bg);    border: 1px solid var(--rui-info-br);    color: var(--rui-info);    }


/* ── D5  BADGES ─────────────────────────────────────────── */
.rui-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--rui-radius-full);
    font-size: 0.72rem;
    font-weight: 700;
    font-family: var(--rui-font-display);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    white-space: nowrap;
}
.rui-badge--success { background: var(--rui-success-bg); color: var(--rui-success); border: 1px solid var(--rui-success-br); }
.rui-badge--danger  { background: var(--rui-danger-bg);  color: var(--rui-danger);  border: 1px solid var(--rui-danger-br);  }
.rui-badge--warning { background: var(--rui-warning-bg); color: var(--rui-warning); border: 1px solid var(--rui-warning-br); }
.rui-badge--info    { background: var(--rui-info-bg);    color: var(--rui-info);    border: 1px solid var(--rui-info-br);    }
.rui-badge--neutral { background: #f3f4f6; color: #6b7280; border: 1px solid #e5e7eb; }
.rui-badge--accent  { background: var(--rui-accent-dim); color: var(--rui-accent-text); border: 1px solid rgba(200,149,108,0.25); }


/* ── D6  TABLES ─────────────────────────────────────────── */
.rui-table-wrapper {
    overflow-x: auto;
    border-radius: var(--rui-radius-lg);
    border: 1px solid var(--rui-border);
    box-shadow: var(--rui-shadow-sm);
    background: var(--rui-bg-card);
}
.rui-table          { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 560px; }
.rui-table thead    { background: var(--rui-bg-subtle); border-bottom: 1px solid var(--rui-border); }
.rui-table th       { padding: 12px 16px; text-align: left; font-family: var(--rui-font-display); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--rui-text-muted); white-space: nowrap; }
.rui-table td       { padding: 13px 16px; border-bottom: 1px solid var(--rui-border); color: var(--rui-text-body); vertical-align: middle; }
.rui-table tbody tr:last-child td { border-bottom: none; }
.rui-table tbody tr:hover         { background: var(--rui-bg-subtle); }
.rui-table-actions  { display: flex; gap: var(--rui-space-xs); align-items: center; flex-wrap: wrap; }

/* Table → stacked card layout on small screens */
@media (max-width: 640px) {
    .rui-table-wrapper { border: none; border-radius: 0; box-shadow: none; }
    .rui-table, .rui-table thead, .rui-table tbody,
    .rui-table th, .rui-table td, .rui-table tr { display: block; }
    .rui-table thead   { display: none; }
    .rui-table td {
        padding: 10px 16px 10px 50%;
        border-bottom: 1px solid var(--rui-border);
        position: relative;
        text-align: right;
        min-height: 44px;
    }
    .rui-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 16px;
        top: 10px;
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--rui-text-muted);
        width: calc(50% - 20px);
        text-align: left;
    }
    .rui-table tr {
        background: var(--rui-bg-card);
        border: 1px solid var(--rui-border);
        border-radius: var(--rui-radius-md);
        margin-bottom: 12px;
        overflow: hidden;
        box-shadow: var(--rui-shadow-sm);
    }
    .rui-table td:last-child { border-bottom: none; }
}


/* ============================================================
   PART E — GRID & UTILITY
   ============================================================ */

/* E1 — GRID UTILITIES */
.rui-grid-2    { display: grid; grid-template-columns: 1fr 1fr;          gap: var(--rui-space-md); }
.rui-grid-3    { display: grid; grid-template-columns: repeat(3, 1fr);   gap: var(--rui-space-md); }
.rui-grid-4    { display: grid; grid-template-columns: repeat(4, 1fr);   gap: var(--rui-space-md); }
.rui-grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--rui-space-md); }

@media (max-width: 900px) { .rui-grid-4, .rui-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .rui-grid-2, .rui-grid-3, .rui-grid-4 { grid-template-columns: 1fr; } }

/* E2 — SPACING & TEXT UTILITIES */
.rui-divider     { border: none; border-top: 1px solid var(--rui-border); margin: var(--rui-space-md) 0; }
.rui-text-center { text-align: center; }
.rui-text-muted  { color: var(--rui-text-muted); }
.rui-text-sm     { font-size: 0.875rem; }
.rui-text-xs     { font-size: 0.78rem; }
.rui-text-accent { color: var(--rui-accent-text); }
.rui-hidden      { display: none !important; }


/* ============================================================
   PART F — FEATURE SECTIONS
   ============================================================ */

/* ── F1  AUTH PAGES ─────────────────────────────────────── */
.rui-auth {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rui-bg-page);
    padding: 40px 20px;
    font-family: var(--rui-font-body);
}
.rui-auth__card {
    width: 100%;
    max-width: 440px;
    background: var(--rui-bg-card);
    border: 1px solid var(--rui-border);
    border-radius: var(--rui-radius-xl);
    padding: 40px 36px;
    box-shadow: var(--rui-shadow-md);
}
.rui-auth__brand        { text-align: center; margin-bottom: 24px; }
.rui-auth__brand-logo   { height: 52px; width: auto; object-fit: contain; display: block; margin: 0 auto 10px; }
.rui-auth__brand-name   { font-family: var(--rui-font-display); font-size: 1.3rem; font-weight: 800; color: var(--rui-text-heading); letter-spacing: -0.02em; margin: 0; }
.rui-auth__title        { font-family: var(--rui-font-display); font-size: 1.15rem; font-weight: 800; color: var(--rui-text-heading); text-align: center; margin: 0 0 4px; }
.rui-auth__subtitle     { font-size: 0.84rem; color: var(--rui-text-muted); text-align: center; margin: 0 0 28px; }
.rui-auth__desc         { font-size: 0.875rem; color: var(--rui-text-muted); line-height: 1.6; margin: 0 0 24px; text-align: center; }
.rui-auth__footer       { margin-top: 20px; text-align: center; font-size: 0.84rem; color: var(--rui-text-muted); }
.rui-auth__footer a     { color: var(--rui-accent-text); text-decoration: none; font-weight: 600; }
.rui-auth__footer a:hover { text-decoration: underline; }
.rui-auth__back         { display: block; text-align: center; font-size: 0.82rem; color: var(--rui-text-muted); text-decoration: none; margin-bottom: 24px; }
.rui-auth__back:hover   { color: var(--rui-text-body); }
.rui-auth__submit       { width: 100%; justify-content: center; padding: 13px; font-size: 1rem; }
.rui-auth__admin-badge  { display: flex; justify-content: center; margin-bottom: 20px; }

@media (max-width: 480px) { .rui-auth__card { padding: 28px 18px; } }


/* ── F2  USER DASHBOARD & QUICK TILES ───────────────────── */
.rui-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--rui-space-md);
    margin-bottom: var(--rui-space-lg);
}
.rui-stat-card {
    background: var(--rui-bg-card);
    border: 1px solid var(--rui-border);
    border-radius: var(--rui-radius-lg);
    padding: var(--rui-space-md);
    box-shadow: var(--rui-shadow-sm);
    transition: transform var(--rui-transition);
}
.rui-stat-card:hover     { transform: translateY(-3px); box-shadow: var(--rui-shadow-md); }
.rui-stat-card__icon     { font-size: 1.6rem; margin-bottom: 10px; }
.rui-stat-card__label    { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--rui-text-muted); margin-bottom: 4px; }
.rui-stat-card__value    { font-family: var(--rui-font-display); font-size: 1.6rem; font-weight: 800; color: var(--rui-text-heading); line-height: 1; }

.rui-tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--rui-space-md); }
.rui-tile {
    background: var(--rui-bg-card);
    border: 1px solid var(--rui-border);
    border-radius: var(--rui-radius-lg);
    padding: var(--rui-space-md) var(--rui-space-sm);
    text-align: center;
    text-decoration: none;
    color: var(--rui-text-body);
    transition: all var(--rui-transition);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: var(--rui-shadow-sm);
}
.rui-tile:hover  { border-color: var(--rui-accent); box-shadow: var(--rui-shadow-md); transform: translateY(-3px); color: var(--rui-text-heading); text-decoration: none; }
.rui-tile__icon  { font-size: 1.8rem; }
.rui-tile__label { font-size: 0.84rem; font-weight: 700; font-family: var(--rui-font-display); color: var(--rui-text-heading); }
.rui-tile__desc  { font-size: 0.76rem; color: var(--rui-text-muted); }
.rui-section-label {
    font-family: var(--rui-font-display);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--rui-text-muted);
    margin: 0 0 var(--rui-space-md);
    padding-bottom: var(--rui-space-xs);
    border-bottom: 1px solid var(--rui-border);
}


/* ── F3  CART ───────────────────────────────────────────── */
.rui-cart-item {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: var(--rui-space-md);
    align-items: center;
    padding: var(--rui-space-md);
    border-bottom: 1px solid var(--rui-border);
}
.rui-cart-item:last-child { border-bottom: none; }
.rui-cart-item__img   { width: 80px; height: 80px; object-fit: cover; border-radius: var(--rui-radius-md); border: 1px solid var(--rui-border); flex-shrink: 0; }
.rui-cart-item__name  { font-family: var(--rui-font-display); font-size: 0.96rem; font-weight: 700; color: var(--rui-text-heading); margin: 0 0 4px; }
.rui-cart-item__meta  { font-size: 0.84rem; color: var(--rui-text-muted); margin: 0; }
.rui-cart-item__price { font-family: var(--rui-font-display); font-size: 1.05rem; font-weight: 700; color: var(--rui-accent-text); white-space: nowrap; }
.rui-cart-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--rui-space-md);
    border-top: 1px solid var(--rui-border);
    background: var(--rui-bg-subtle);
    gap: var(--rui-space-md);
    flex-wrap: wrap;
}
.rui-cart-total__label  { font-size: 0.9rem; color: var(--rui-text-muted); font-weight: 500; }
.rui-cart-total__amount { font-family: var(--rui-font-display); font-size: 1.5rem; font-weight: 800; color: var(--rui-text-heading); }
.rui-cart-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--rui-accent);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    border-radius: var(--rui-radius-full);
    line-height: 1;
    margin-left: 5px;
    font-family: var(--rui-font-display);
}

@media (max-width: 560px) {
    .rui-cart-item { grid-template-columns: 64px 1fr; gap: var(--rui-space-sm); }
    .rui-cart-item__price { grid-column: 1 / -1; text-align: right; }
}


/* ── F4  CHECKOUT ───────────────────────────────────────── */
.rui-checkout-item {
    display: flex;
    align-items: center;
    gap: var(--rui-space-md);
    padding: var(--rui-space-sm) var(--rui-space-md);
    border-bottom: 1px solid var(--rui-border);
}
.rui-checkout-item:last-child    { border-bottom: none; }
.rui-checkout-item__img    { width: 52px; height: 52px; object-fit: cover; border-radius: var(--rui-radius-md); flex-shrink: 0; border: 1px solid var(--rui-border); }
.rui-checkout-item__name   { flex: 1; font-weight: 600; color: var(--rui-text-heading); font-size: 0.92rem; }
.rui-checkout-item__detail { font-size: 0.8rem; color: var(--rui-text-muted); }
.rui-checkout-item__price  { font-family: var(--rui-font-display); font-weight: 700; color: var(--rui-accent-text); font-size: 0.96rem; white-space: nowrap; }


/* ── F5  ORDERS ─────────────────────────────────────────── */
.rui-order-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rui-space-md);
    padding: var(--rui-space-md);
    border-bottom: 1px solid var(--rui-border);
    flex-wrap: wrap;
    transition: background var(--rui-transition);
}
.rui-order-row:hover      { background: var(--rui-bg-subtle); }
.rui-order-row:last-child { border-bottom: none; }
.rui-order-row__id   { font-family: var(--rui-font-display); font-weight: 700; color: var(--rui-text-heading); font-size: 0.96rem; margin: 0; }
.rui-order-row__meta { font-size: 0.82rem; color: var(--rui-text-muted); margin: 0; }
.rui-order-item {
    padding: var(--rui-space-sm) 0;
    border-bottom: 1px solid var(--rui-border);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--rui-space-sm);
}
.rui-order-item:last-child  { border-bottom: none; }
.rui-order-item__name  { font-weight: 600; color: var(--rui-text-heading); font-size: 0.92rem; }
.rui-order-item__qty   { font-size: 0.82rem; color: var(--rui-text-muted); }
.rui-order-item__price { font-family: var(--rui-font-display); font-weight: 700; color: var(--rui-accent-text); font-size: 0.96rem; white-space: nowrap; }
.rui-order-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--rui-space-md) 0 0;
    border-top: 1px solid var(--rui-border);
    margin-top: var(--rui-space-sm);
}
.rui-order-total__label  { font-size: 0.9rem; color: var(--rui-text-muted); font-weight: 500; }
.rui-order-total__amount { font-family: var(--rui-font-display); font-size: 1.4rem; font-weight: 800; color: var(--rui-text-heading); }
.rui-status-form         { display: flex; align-items: center; gap: var(--rui-space-sm); flex-wrap: wrap; }
.rui-status-form .rui-form-control { max-width: 180px; padding: 8px 12px; }
.rui-cust-num { font-family: var(--rui-font-display); font-size: 0.88rem; font-weight: 700; color: var(--rui-accent-text); }


/* ── F6  MENU BOARD ─────────────────────────────────────── */
.rui-menu-card {
    background: var(--rui-bg-card);
    border: 1px solid var(--rui-border);
    border-radius: var(--rui-radius-lg);
    overflow: hidden;
    box-shadow: var(--rui-shadow-sm);
    transition: transform var(--rui-transition), box-shadow var(--rui-transition);
    display: flex;
    flex-direction: column;
}
.rui-menu-card:hover { transform: translateY(-5px); box-shadow: var(--rui-shadow-md); }
.rui-menu-card__img-wrap { position: relative; height: 200px; overflow: hidden; }
.rui-menu-card__img  { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s var(--rui-ease); }
.rui-menu-card:hover .rui-menu-card__img { transform: scale(1.06); }
.rui-menu-card__no-img { width: 100%; height: 200px; background: var(--rui-bg-subtle); display: flex; align-items: center; justify-content: center; font-size: 0.82rem; color: var(--rui-text-light); }
.rui-menu-card__header { padding: 16px 18px 10px; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.rui-menu-card__name   { font-family: var(--rui-font-display); font-size: 1rem; font-weight: 700; color: var(--rui-text-heading); margin: 0; line-height: 1.3; }
.rui-menu-card__price  { font-family: var(--rui-font-display); font-size: 1.1rem; font-weight: 800; color: var(--rui-accent-text); white-space: nowrap; flex-shrink: 0; }
.rui-menu-card__body   { padding: 0 18px 16px; flex: 1; }
.rui-menu-card__desc   { font-size: 0.84rem; color: var(--rui-text-muted); line-height: 1.6; margin: 0 0 10px; }
.rui-menu-card__footer { padding: 14px 18px; border-top: 1px solid var(--rui-border); background: var(--rui-bg-subtle); }
.rui-add-to-cart { display: flex; gap: 8px; align-items: center; }
.rui-add-to-cart input[type="number"] {
    width: 72px;
    padding: 9px 12px;
    background: #fff;
    border: 1px solid var(--rui-border);
    border-radius: var(--rui-radius-md);
    color: var(--rui-text-heading);
    font-family: var(--rui-font-body);
    font-size: 0.95rem;
    text-align: center;
    outline: none;
}
.rui-add-to-cart input[type="number"]:focus { border-color: var(--rui-accent); }
.rui-add-to-cart .rui-btn { flex: 1; }


/* ── F7  FOOD SECTION LANDING ───────────────────────────── */
.food-menu-container { background: #f0f1f3; padding: var(--rui-space-xl) 0; }
.food-menu-wrapper   { max-width: 1160px; margin: 0 auto; padding: 0 20px; }
.food-menu-header    { text-align: center; margin-bottom: 52px; }
.food-menu-header__title {
    font-family: var(--rui-font-display);
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--rui-text-heading);
    margin: 0 0 10px;
}
.food-menu-header p   { color: var(--rui-text-muted); }
.food-menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}
.food-menu-card {
    background: #ffffff;
    border: 1px solid var(--rui-border);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
    transition: transform 0.28s var(--rui-ease), box-shadow 0.28s var(--rui-ease);
    display: flex;
    flex-direction: column;
}
.food-menu-card:hover { transform: translateY(-6px); box-shadow: 0 8px 28px rgba(0,0,0,0.12); }
.food-menu-card__image-wrapper { position: relative; height: 220px; overflow: hidden; background: var(--rui-bg-subtle); }
.food-menu-card__image { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.55s var(--rui-ease); }
.food-menu-card:hover .food-menu-card__image { transform: scale(1.07); }

/* Frosted dark badge — reads well over any image */
.food-menu-card__badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.18);
    font-family: var(--rui-font-display);
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    padding: 5px 13px;
    border-radius: 999px;
}
.food-menu-card__content     { padding: 22px 22px 20px; flex: 1; display: flex; flex-direction: column; }
.food-menu-card__title       { font-family: var(--rui-font-display); font-size: 1.1rem; font-weight: 800; color: var(--rui-text-heading); margin: 0 0 10px; line-height: 1.2; }
.food-menu-card__description { font-size: 0.875rem; color: var(--rui-text-muted); line-height: 1.65; flex: 1; margin: 0 0 22px; }
.food-menu-card__footer      { margin-top: auto; }
.food-menu-card__btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 11px 22px;
    background: var(--rui-accent);
    color: #fff;
    font-family: var(--rui-font-display);
    font-size: 0.84rem;
    font-weight: 700;
    border-radius: 999px;
    text-decoration: none;
    transition: all 0.25s var(--rui-ease);
    border: none;
    cursor: pointer;
}
.food-menu-card__btn:hover { background: var(--rui-accent-hover); transform: translateY(-2px); color: #fff; text-decoration: none; }

@media (max-width: 600px) { .food-menu-grid { grid-template-columns: 1fr; } }


/* ── F8  PROMOTIONS GALLERY ─────────────────────────────────
   Full-bleed horizontal scroll. Cards extend to screen edges.
   Soft fade pseudo-elements overlay the left and right edges
   so cards dissolve gracefully rather than hard-cutting.
   Background is a warm off-white, distinct from the food section.
──────────────────────────────────────────────────────────── */

.lp-promotions {
    background: #f2f0ee;
    padding: 48px 0 56px;
    overflow: hidden;
}

.lp-promotions__header {
    text-align: center;
    max-width: 1160px;
    margin: 0 auto 36px;
    padding: 0 24px;
}
.lp-promotions__title {
    font-family: var(--rui-font-display);
    font-size: clamp(1.4rem, 3.5vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--rui-text-heading);
    margin: 0 0 10px;
}
.lp-promotions__subtitle {
    font-size: 0.96rem;
    color: var(--rui-text-muted);
    margin: 0;
}

/* ── Slider wrapper ──
   Position:relative lets the fade overlays sit on top.
   No max-width here — we want the scroll to reach the screen edge.
*/
.lp-promotions__slider {
    position: relative;
    width: 100%;
}

/* Fade overlays — left and right edges
   These sit on top of the scrolling track as a visual effect only.
   They do NOT block pointer events, so scrolling still works. */
.lp-promotions__slider::before,
.lp-promotions__slider::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 16px; /* matches track padding-bottom */
    width: clamp(40px, 6vw, 100px);
    pointer-events: none;
    z-index: 2;
}
.lp-promotions__slider::before {
    left: 0;
    background: linear-gradient(to right, #f2f0ee, transparent);
}
.lp-promotions__slider::after {
    right: 0;
    background: linear-gradient(to left, #f2f0ee, transparent);
}

/* ── Scrollable track ──
   No max-width — bleeds to screen edges.
   Left/right padding aligns the first/last card with your content column
   on large screens, but shrinks gracefully on mobile. */
.lp-promotions__track {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    padding: 8px max(24px, calc((100vw - 1160px) / 2)) 20px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* hide scrollbar — gesture/drag is the UX */
}
.lp-promotions__track::-webkit-scrollbar {
    display: none;
}

/* ── Individual promo card ──
   clamp() makes cards wider on large screens, filling the row better. */
.lp-promo-card {
    min-width: clamp(280px, 28vw, 340px);
    max-width: clamp(280px, 28vw, 340px);
    background: #ffffff;
    border: 1px solid var(--rui-border);
    border-radius: 18px;
    overflow: hidden;
    flex-shrink: 0;
    scroll-snap-align: start;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    transition: transform 0.28s var(--rui-ease),
                box-shadow 0.28s var(--rui-ease),
                border-color 0.28s;
}
.lp-promo-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.10);
    border-color: rgba(200, 149, 108, 0.40);
}

/* Card image */
.lp-promo-card__image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s var(--rui-ease);
}
.lp-promo-card:hover .lp-promo-card__image {
    transform: scale(1.04);
}

/* Card text */
.lp-promo-card__content { padding: 18px 20px 22px; }
.lp-promo-card__badge {
    display: inline-block;
    padding: 3px 10px;
    background: var(--rui-accent-dim);
    color: var(--rui-accent-text);
    font-family: var(--rui-font-display);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-radius: 999px;
    margin-bottom: 10px;
}
.lp-promo-card__title {
    font-family: var(--rui-font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--rui-text-heading);
    margin: 0 0 8px;
    line-height: 1.3;
}
.lp-promo-card__description {
    font-size: 0.85rem;
    color: var(--rui-text-muted);
    line-height: 1.6;
    margin: 0;
}

/* ── Mobile tweak ──
   On small screens cards are full-width minus a peek of the next one. */
@media (max-width: 600px) {
    .lp-promo-card {
        min-width: calc(85vw);
        max-width: calc(85vw);
    }
}


/* ── F9  HERO BANNER ────────────────────────────────────── */
.lp-banner { position: relative; width: 100%; height: 100vh; min-height: 600px; overflow: hidden; background: #090909; }
.lp-banner__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s var(--rui-ease); }
.lp-banner__slide.lp-active { opacity: 1; z-index: 1; }
.lp-banner__image { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.04); transition: transform 8s linear; }
.lp-banner__slide.lp-active .lp-banner__image { transform: scale(1); }
.lp-banner__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(9,9,9,0.80) 0%, rgba(9,9,9,0.15) 60%, rgba(9,9,9,0.05) 100%);
    z-index: 2;
}
.lp-banner__content {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 0 24px 80px;
}
.lp-banner__eyebrow {
    display: inline-flex !important;
    align-items: center;
    align-self: center !important;
    gap: 10px;
    font-family: var(--rui-font-display);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--rui-accent);
    margin: 0 auto 20px !important;
}
.lp-banner__eyebrow::before,
.lp-banner__eyebrow::after { content: ''; display: block; width: 28px; height: 1.5px; background: var(--rui-accent); border-radius: 2px; }
.lp-banner__title {
    font-family: var(--rui-font-display);
    font-size: clamp(2rem, 6vw, 4.4rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    color: #fff;
    line-height: 1.02;
    margin: 0 auto 20px !important;
    text-shadow: 0 3px 30px rgba(0,0,0,0.35);
    max-width: 860px;
    text-align: center !important;
}
.lp-banner__subtitle {
    font-size: clamp(0.95rem, 2vw, 1.15rem);
    color: rgba(255,255,255,0.70);
    font-weight: 300;
    max-width: 520px;
    line-height: 1.7;
    margin: 0 auto 38px !important;
    text-align: center !important;
}
.lp-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
}

/* Banner CTA buttons — frosted glass so they read over any image */
.lp-banner__actions .rui-btn--primary {
    background: rgba(200, 149, 108, 0.88);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.22);
    box-shadow: 0 4px 20px rgba(0,0,0,0.28);
}
.lp-banner__actions .rui-btn--primary:hover {
    background: var(--rui-accent);
    box-shadow: 0 6px 28px rgba(0,0,0,0.38);
}
.lp-banner__actions .rui-btn--ghost {
    background: rgba(255,255,255,0.13);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.32);
}
.lp-banner__actions .rui-btn--ghost:hover { background: rgba(255,255,255,0.24); }

/* Navigation controls */
.lp-banner__controls { position: absolute; top: 50%; left: 0; right: 0; z-index: 10; display: flex; justify-content: space-between; padding: 0 20px; pointer-events: none; transform: translateY(-50%); }
.lp-banner__control  { width: 50px; height: 50px; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.18); border-radius: 50%; color: #fff; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; pointer-events: auto; transition: background 0.25s; backdrop-filter: blur(8px); }
.lp-banner__control:hover { background: rgba(255,255,255,0.22); }
.lp-banner__dots     { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; gap: 8px; }
.lp-banner__dot      { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.3); cursor: pointer; transition: background 0.3s, transform 0.3s; border: none; padding: 0; }
.lp-banner__dot.lp-active { background: #fff; transform: scale(1.3); }

@media (max-width: 600px) {
    .lp-banner { height: 88vh; min-height: 500px; }
    .lp-banner__content { padding-bottom: 60px; }
    .lp-banner__title   { font-size: 2rem; }
    .lp-banner__subtitle { font-size: 0.95rem; }
}


/* ── F10  ADMIN ORDERS EXTRAS ───────────────────────────── */
.rui-inline-status { display: flex; flex-direction: column; gap: 7px; }
.rui-inline-status .rui-form-control { padding: 7px 10px; font-size: 0.84rem; }


/* ── F11  PAYMENT FORM ──────────────────────────────────── */
.rui-payment-card {
    background: var(--rui-bg-card);
    border: 1px solid var(--rui-border);
    border-radius: var(--rui-radius-xl);
    padding: 36px 32px;
    max-width: 520px;
    margin: 0 auto;
    box-shadow: var(--rui-shadow-md);
}
.rui-payment-card__title { font-family: var(--rui-font-display); font-size: 1.3rem; font-weight: 800; color: var(--rui-text-heading); margin: 0 0 6px; text-align: center; }
.rui-payment-card__desc  { font-size: 0.88rem; color: var(--rui-text-muted); text-align: center; margin: 0 0 28px; line-height: 1.6; }
#card-element,
[data-shift4] { background: var(--rui-bg-subtle); border: 1px solid var(--rui-border); border-radius: var(--rui-radius-md); padding: 14px; transition: border-color var(--rui-transition); }
#card-element.StripeElement--focus,
[data-shift4]:focus-within { border-color: var(--rui-accent); }
#card-errors   { font-size: 0.85rem; color: var(--rui-danger); margin-top: 8px; min-height: 20px; }
#payment-error { font-size: 0.85rem; color: var(--rui-danger); display: block; margin-bottom: 12px; min-height: 18px; }

@media (max-width: 480px) { .rui-payment-card { padding: 24px 18px; } }


/* ============================================================
   PART G — ANIMATIONS
   ============================================================ */

/* G1 — SCROLL REVEAL
   Add .rui-reveal to any element. It starts invisible and
   slides up into view once it enters the viewport.
   Use .rui-reveal--d1/d2/d3 to stagger multiple elements.
*/
.rui-reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s var(--rui-ease), transform 0.6s var(--rui-ease); }
.rui-reveal.rui-revealed { opacity: 1; transform: translateY(0); }
.rui-reveal--d1 { transition-delay: 0.1s; }
.rui-reveal--d2 { transition-delay: 0.2s; }
.rui-reveal--d3 { transition-delay: 0.3s; }


/* ============================================================
   PART H — SITE CHROME
   ─────────────────────────────────────────────────────────
   Header and footer that wrap every page.
   ============================================================ */

/* ── H1  SITE HEADER (structure) ────────────────────────── */
.rui-header {
    position: sticky;
    top: 0;
    z-index: 500;
    width: 100%;
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--rui-border);
    box-shadow: 0 1px 8px rgba(0,0,0,0.06);
    font-family: var(--rui-font-body);
}
.rui-header__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    height: 64px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.rui-header__logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
    margin-right: auto;
}
.rui-header__logo-img  { height: 40px; width: auto; object-fit: contain; display: block; }
.rui-header__logo-text { font-family: var(--rui-font-display); font-size: 1.2rem; font-weight: 800; color: var(--rui-text-heading); letter-spacing: -0.02em; }
.rui-header__nav       { display: flex; align-items: center; gap: 4px; }
.rui-header__link {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--rui-text-body);
    text-decoration: none;
    border-radius: var(--rui-radius-md);
    transition: background var(--rui-transition), color var(--rui-transition);
    white-space: nowrap;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--rui-font-body);
    line-height: 1;
}
.rui-header__link:hover { background: var(--rui-bg-subtle); color: var(--rui-text-heading); text-decoration: none; }
.rui-header__link--cta {
    background: var(--rui-accent);
    color: #fff !important;
    font-weight: 700;
    padding: 8px 18px;
    border-radius: var(--rui-radius-full);
    margin-left: 6px;
    box-shadow: 0 2px 8px rgba(200,149,108,0.30);
}
.rui-header__link--cta:hover { background: var(--rui-accent-hover); color: #fff !important; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(200,149,108,0.40); }
.rui-header__user {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px 5px 8px;
    background: var(--rui-bg-subtle);
    border: 1px solid var(--rui-border);
    border-radius: var(--rui-radius-full);
    font-size: 0.8rem;
    color: var(--rui-text-muted);
    text-decoration: none;
    font-weight: 500;
    transition: border-color var(--rui-transition);
    white-space: nowrap;
}
.rui-header__user:hover { border-color: var(--rui-accent); text-decoration: none; color: var(--rui-text-heading); }
.rui-header__user-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--rui-accent-dim);
    color: var(--rui-accent-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    font-family: var(--rui-font-display);
    flex-shrink: 0;
}
.rui-header__sep    { width: 1px; height: 20px; background: var(--rui-border); flex-shrink: 0; margin: 0 4px; }

/* Hamburger (mobile) */
.rui-header__burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: var(--rui-radius-md);
    padding: 0;
    transition: background var(--rui-transition);
    flex-shrink: 0;
}
.rui-header__burger:hover { background: var(--rui-bg-subtle); }
.rui-header__burger span  { display: block; width: 22px; height: 2px; background: var(--rui-text-body); border-radius: 2px; transition: transform 0.3s, opacity 0.3s; transform-origin: center; }
.rui-header__burger.rui-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.rui-header__burger.rui-open span:nth-child(2) { opacity: 0; }
.rui-header__burger.rui-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile dropdown menu */
.rui-header__mobile {
    display: none;
    flex-direction: column;
    background: #ffffff;
    border-top: 1px solid var(--rui-border);
    padding: 20px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    color: #1f2937;
}
.rui-header__mobile.rui-open { display: flex; }
.rui-header__mobile .rui-header__link { padding: 11px 14px; border-radius: var(--rui-radius-md); font-size: 0.95rem; color: #1f2937 !important; }
.rui-header__mobile .rui-header__link--cta { text-align: center; justify-content: center; margin: 6px 0 0; background: var(--rui-accent) !important; color: #fff !important; border: none !important; }
.rui-header__mobile .rui-header__user     { margin: 4px 0 8px; }
.rui-header__mobile form  { margin: 0; }
.rui-header__mobile-sep   { height: 1px; background: #e5e7eb; margin: 8px 0; }

@media (max-width: 900px) { .rui-header__nav { display: none; } .rui-header__burger { display: flex; } }
@media (max-width: 480px) { .rui-header__inner { padding: 0 16px; } }


/* ── H2  HEADER — TRANSPARENT TOP / SOLID ON SCROLL ─────────
   The header starts fully transparent over the hero banner.
   When the user scrolls down, the class "rui-header--scrolled"
   is added (via JS) and the header becomes solid white.
   ── HOW TO ENABLE ──
   Make sure your header has id="ruiHeader" and that you include
   this JS snippet somewhere on the page (already in your blade):

     window.addEventListener('scroll', () => {
       document.getElementById('ruiHeader')
         .classList.toggle('rui-header--scrolled', window.scrollY > 40);
     });
──────────────────────────────────────────────────────────── */

/* Default transparent state */
#ruiHeader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: transparent !important;
    border-bottom: 1px solid transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

/* White nav text over the dark banner image */
#ruiHeader .rui-header__link,
#ruiHeader .rui-header__logo-text { color: #ffffff !important; }
#ruiHeader .rui-header__link:hover { background: rgba(255,255,255,0.18) !important; color: #ffffff !important; }
#ruiHeader .rui-header__burger span { background: #ffffff !important; }
#ruiHeader .rui-header__sep         { background: rgba(255,255,255,0.35) !important; }
#ruiHeader .rui-header__user        { background: rgba(255,255,255,0.15) !important; border-color: rgba(255,255,255,0.30) !important; color: #ffffff !important; }

/* CTA button frosted glass when transparent */
#ruiHeader .rui-header__link--cta {
    background: rgba(255,255,255,0.25) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.45) !important;
}

/* Solid white — applied when user scrolls down */
#ruiHeader.rui-header--scrolled {
    background: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
    box-shadow: 0 1px 10px rgba(0,0,0,0.08) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}
#ruiHeader.rui-header--scrolled .rui-header__link,
#ruiHeader.rui-header--scrolled .rui-header__logo-text { color: #1f2937 !important; }
#ruiHeader.rui-header--scrolled .rui-header__link:hover { background: var(--rui-bg-subtle) !important; color: var(--rui-text-heading) !important; }
#ruiHeader.rui-header--scrolled .rui-header__burger span { background: #1f2937 !important; }
#ruiHeader.rui-header--scrolled .rui-header__sep         { background: var(--rui-border) !important; }
#ruiHeader.rui-header--scrolled .rui-header__user        { background: var(--rui-bg-subtle) !important; border-color: var(--rui-border) !important; color: var(--rui-text-muted) !important; }
#ruiHeader.rui-header--scrolled .rui-header__link--cta   { background: var(--rui-accent) !important; color: #ffffff !important; border: none !important; }


/* ── H3  SITE FOOTER ────────────────────────────────────── */
.rui-footer {
    background: var(--rui-dark-2);
    border-top: 1px solid var(--rui-border-dark);
    padding: 56px 0 0;
    font-family: var(--rui-font-body);
    color: rgba(255,255,255,0.55);
}
.rui-footer__inner { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.rui-footer__grid  {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 48px;
}
.rui-footer__brand-name { font-family: var(--rui-font-display); font-size: 1.1rem; font-weight: 800; color: #fff; margin: 0 0 10px; letter-spacing: -0.02em; }
.rui-footer__brand-img  { height: 36px; width: auto; object-fit: contain; display: block; margin-bottom: 14px; }
.rui-footer__brand-desc { font-size: 0.86rem; line-height: 1.7; color: rgba(255,255,255,0.42); margin: 0 0 20px; max-width: 260px; }
.rui-footer__col-title  { font-family: var(--rui-font-display); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--rui-accent); margin: 0 0 16px; }
.rui-footer__links      { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.rui-footer__links a    { font-size: 0.875rem; color: rgba(255,255,255,0.50); text-decoration: none; transition: color var(--rui-transition); }
.rui-footer__links a:hover { color: #fff; }
.rui-footer__address    { font-size: 0.875rem; color: rgba(255,255,255,0.42); line-height: 1.7; margin: 0; }
.rui-footer__social     { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; }
.rui-footer__social-btn {
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: var(--rui-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background var(--rui-transition), border-color var(--rui-transition), transform var(--rui-transition);
}
.rui-footer__social-btn img { width: 18px; height: 18px; object-fit: contain; filter: brightness(0) invert(0.65); }
.rui-footer__social-btn:hover { background: var(--rui-accent-dim); border-color: rgba(200,149,108,0.4); transform: translateY(-2px); }
.rui-footer__social-btn:hover img { filter: none; }
.rui-footer__bottom {
    border-top: 1px solid rgba(255,255,255,0.07);
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}
.rui-footer__copy       { font-size: 0.8rem; color: rgba(255,255,255,0.28); }
.rui-footer__admin-link { font-size: 0.75rem; color: rgba(255,255,255,0.18); text-decoration: none; transition: color 0.2s; }
.rui-footer__admin-link:hover { color: rgba(255,255,255,0.5); }

@media (max-width: 900px) { .rui-footer__grid { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 560px) {
    .rui-footer { padding-top: 40px; }
    .rui-footer__grid   { grid-template-columns: 1fr; gap: 24px; }
    .rui-footer__bottom { flex-direction: column; align-items: flex-start; }
}


/* ============================================================
   PART I — PAGE OVERRIDES
   ============================================================ */

/* I1 — OWNERS PAGE */
.rui-owners-hero {
    background: var(--rui-bg-subtle);
    border-bottom: 1px solid var(--rui-border);
    padding: 56px 24px 44px;
    text-align: center;
    font-family: var(--rui-font-body);
}
.rui-owners-hero__label { display: inline-block; font-family: var(--rui-font-display); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--rui-accent-text); background: var(--rui-accent-dim); padding: 4px 14px; border-radius: var(--rui-radius-full); margin-bottom: 14px; }
.rui-owners-hero__title { font-family: var(--rui-font-display); font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 800; letter-spacing: -0.03em; color: var(--rui-text-heading); margin: 0 0 10px; }
.rui-owners-hero__sub   { font-size: 0.96rem; color: var(--rui-text-muted); margin: 0 auto; max-width: 500px; }
.rui-owners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 24px;
    padding: 48px 24px;
    max-width: 1160px;
    margin: 0 auto;
}
.rui-owner-card {
    background: var(--rui-bg-card);
    border: 1px solid var(--rui-border);
    border-radius: var(--rui-radius-lg);
    overflow: hidden;
    box-shadow: var(--rui-shadow-sm);
    transition: transform var(--rui-transition), box-shadow var(--rui-transition);
}
.rui-owner-card:hover { transform: translateY(-4px); box-shadow: var(--rui-shadow-md); }
.rui-owner-card__img-wrap { width: 100%; height: 200px; overflow: hidden; background: var(--rui-bg-subtle); display: flex; align-items: center; justify-content: center; }
.rui-owner-card__img  { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s var(--rui-ease); }
.rui-owner-card:hover .rui-owner-card__img { transform: scale(1.05); }
.rui-owner-card__body  { padding: 20px; }
.rui-owner-card__name  { font-family: var(--rui-font-display); font-size: 1rem; font-weight: 700; color: var(--rui-text-heading); margin: 0 0 4px; }
.rui-owner-card__title { font-size: 0.82rem; color: var(--rui-accent-text); font-weight: 600; margin: 0 0 8px; }
.rui-owner-card__since { font-size: 0.76rem; color: var(--rui-text-light); margin: 0 0 10px; }
.rui-owner-card__desc  { font-size: 0.875rem; color: var(--rui-text-muted); line-height: 1.65; margin: 0; }

@media (max-width: 600px) { .rui-owners-grid { grid-template-columns: 1fr; padding: 28px 16px; } }


/* ============================================================
   PART J — RESPONSIVE OVERRIDES
   ─────────────────────────────────────────────────────────
   Final breakpoint adjustments that apply globally.
   These come last so they can override anything above.
   ============================================================ */

@media (max-width: 768px) {
    .rui-page        { padding: var(--rui-space-md) 0 var(--rui-space-lg); }
    .rui-page-header { flex-direction: column; }
    .rui-form-grid-2 { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .rui-card__header { flex-direction: column; align-items: flex-start; }
    .rui-btn-row      { flex-direction: column; }
    .rui-btn-row .rui-btn { width: 100%; justify-content: center; }
    .rui-auth__card   { padding: 24px 16px; }
}


/* ============================================================
   MOBILE NAV FIX
   
   WHAT TO DO:
   Paste this entire block at the very END of restaurant-ui.css
   (after everything else, as the last lines in the file).
   This ensures it has the highest possible position in the
   cascade and overrides all earlier conflicting rules.
   ============================================================

   THE PROBLEM:
   Section H2 in restaurant-ui.css sets:
       #ruiHeader .rui-header__link { color: #ffffff !important; }
   
   Because #ruiHeader is an ID selector it beats ALL class-only
   selectors. So even the mobile drawer rule:
       .rui-header__mobile .rui-header__link { color: #1f2937 !important; }
   loses — and every link in the drawer turns white (invisible
   against the white drawer background).

   THE FIX:
   Match the same ID + add the mobile container class so the
   specificity is equal or higher, meaning this block wins.
   ============================================================ */


/* ─────────────────────────────────────────────────────────
   1. MOBILE DRAWER — always solid white, always dark text
   Applies at ALL scroll positions (transparent or scrolled)
───────────────────────────────────────────────────────── */

#ruiHeader .rui-header__mobile {
    background: #ffffff !important;
    border-top: 1px solid #e5e7eb !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10) !important;
}

/* All links inside the drawer → dark text */
#ruiHeader .rui-header__mobile .rui-header__link {
    color: #374151 !important;
    background: transparent !important;
}

#ruiHeader .rui-header__mobile .rui-header__link:hover {
    color: #111827 !important;
    background: #f3f4f6 !important;
}

/* CTA button inside drawer → accent colour */
#ruiHeader .rui-header__mobile .rui-header__link--cta {
    background: #c8956c !important;
    color: #ffffff !important;
    border: none !important;
}

#ruiHeader .rui-header__mobile .rui-header__link--cta:hover {
    background: #d9a880 !important;
    color: #ffffff !important;
}

/* Separator line */
#ruiHeader .rui-header__mobile .rui-header__mobile-sep {
    background: #e5e7eb !important;
}

/* User chip */
#ruiHeader .rui-header__mobile .rui-header__user {
    background: #f3f4f6 !important;
    border-color: #e5e7eb !important;
    color: #374151 !important;
}


/* ─────────────────────────────────────────────────────────
   2. HAMBURGER ICON — always visible on mobile
   At the top of the page the burger spans are white (for the
   dark hero image). On mobile screens the image behind the
   header may be lighter, making white bars hard to see.
   A semi-transparent dark pill gives the bars contrast at all
   times without looking heavy.
───────────────────────────────────────────────────────── */

@media (max-width: 900px) {

    /* Dark frosted pill behind the icon when header is transparent */
    #ruiHeader:not(.rui-header--scrolled) .rui-header__burger {
        background: rgba(0, 0, 0, 0.28) !important;
        border-radius: 8px !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
    }

    /* Scrolled state — white header, dark bars, no pill needed */
    #ruiHeader.rui-header--scrolled .rui-header__burger {
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    #ruiHeader.rui-header--scrolled .rui-header__burger span {
        background: #374151 !important;
    }
}


/* ============================================================
   ADD THESE LINES AT THE VERY BOTTOM OF restaurant-ui.css
   AFTER everything else already in the file.
   This is the ONLY change needed — do not remove anything else.
   ============================================================ */

/* At page top: transparent header, ALL elements white */
#ruiHeader                                          { background: transparent !important; border-bottom-color: transparent !important; box-shadow: none !important; }
#ruiHeader a                                        { color: #fff !important; }
#ruiHeader button.rui-header__link                  { color: #fff !important; }
#ruiHeader .rui-header__link                        { color: #fff !important; }
#ruiHeader .rui-header__link:hover                  { color: #fff !important; background: rgba(255,255,255,0.15) !important; }
#ruiHeader .rui-header__logo-text                   { color: #fff !important; }
#ruiHeader .rui-header__user                        { color: #fff !important; background: rgba(255,255,255,0.15) !important; border-color: rgba(255,255,255,0.25) !important; }
#ruiHeader .rui-header__sep                         { background: rgba(255,255,255,0.35) !important; }
#ruiHeader .rui-header__burger span                 { background: #fff !important; }
#ruiHeader .rui-header__link--cta                   { background: var(--rui-accent) !important; color: #fff !important; }

/* On scroll: solid white header, ALL elements dark */
#ruiHeader.rui-header--scrolled                     { background: rgba(255,255,255,0.97) !important; border-bottom: 1px solid var(--rui-border) !important; box-shadow: 0 1px 10px rgba(0,0,0,0.07) !important; backdrop-filter: blur(12px); }
#ruiHeader.rui-header--scrolled a                   { color: var(--rui-text-body) !important; }
#ruiHeader.rui-header--scrolled button.rui-header__link { color: var(--rui-text-body) !important; }
#ruiHeader.rui-header--scrolled .rui-header__link   { color: var(--rui-text-body) !important; }
#ruiHeader.rui-header--scrolled .rui-header__link:hover { color: var(--rui-text-heading) !important; background: var(--rui-bg-subtle) !important; }
#ruiHeader.rui-header--scrolled .rui-header__logo-text { color: var(--rui-text-heading) !important; }
#ruiHeader.rui-header--scrolled .rui-header__user   { color: var(--rui-text-muted) !important; background: var(--rui-bg-subtle) !important; border-color: var(--rui-border) !important; }
#ruiHeader.rui-header--scrolled .rui-header__sep    { background: var(--rui-border) !important; }
#ruiHeader.rui-header--scrolled .rui-header__burger span { background: var(--rui-text-body) !important; }
#ruiHeader.rui-header--scrolled .rui-header__link--cta { background: var(--rui-accent) !important; color: #fff !important; }

/* Mobile menu: always white background, dark text — never transparent */
#ruiHeader .rui-header__mobile                      { background: #fff !important; }
#ruiHeader .rui-header__mobile a,
#ruiHeader .rui-header__mobile button               { color: var(--rui-text-body) !important; }
#ruiHeader .rui-header__mobile .rui-header__link    { color: var(--rui-text-body) !important; }
#ruiHeader .rui-header__mobile .rui-header__link--cta { color: #fff !important; }




/* ============================================================
   MOBILE NAV FIX — paste at the VERY BOTTOM of restaurant-ui.css
   (after the last line already in the file — PART J breakpoints)

   WHY THIS WORKS:
   CSS specificity: ID selector (#ruiHeader) beats class selectors.
   But when TWO rules have the same ID specificity, the one that
   appears LATER in the file wins. By pasting this at the very
   bottom we guarantee these rules are always last and always win.
   ============================================================ */


/* ──────────────────────────────────────────────────────────
   HEADER — TRANSPARENT STATE (top of page, over hero banner)
   All nav elements are white so they show against the dark image.
────────────────────────────────────────────────────────── */
#ruiHeader {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    background: transparent !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

#ruiHeader .rui-header__link          { color: #fff !important; }
#ruiHeader .rui-header__link:hover    { color: #fff !important; background: rgba(255,255,255,0.15) !important; }
#ruiHeader .rui-header__logo-text     { color: #fff !important; }
#ruiHeader .rui-header__sep           { background: rgba(255,255,255,0.35) !important; }
#ruiHeader .rui-header__burger span   { background: #fff !important; }
#ruiHeader .rui-header__user          { color: #fff !important; background: rgba(255,255,255,0.15) !important; border-color: rgba(255,255,255,0.25) !important; }
#ruiHeader .rui-header__link--cta     { background: var(--rui-accent, #c8956c) !important; color: #fff !important; border: none !important; }


/* ──────────────────────────────────────────────────────────
   HEADER — SCROLLED STATE (solid white, dark text)
   Added by JS: document.getElementById('ruiHeader').classList.add('rui-header--scrolled')
────────────────────────────────────────────────────────── */
#ruiHeader.rui-header--scrolled {
    background: rgba(255,255,255,0.97) !important;
    border-bottom: 1px solid #e5e7eb !important;
    box-shadow: 0 1px 10px rgba(0,0,0,0.08) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

#ruiHeader.rui-header--scrolled .rui-header__link          { color: #374151 !important; }
#ruiHeader.rui-header--scrolled .rui-header__link:hover    { color: #111827 !important; background: #f9fafb !important; }
#ruiHeader.rui-header--scrolled .rui-header__logo-text     { color: #111827 !important; }
#ruiHeader.rui-header--scrolled .rui-header__sep           { background: #e5e7eb !important; }
#ruiHeader.rui-header--scrolled .rui-header__burger span   { background: #374151 !important; }
#ruiHeader.rui-header--scrolled .rui-header__user          { color: #6b7280 !important; background: #f9fafb !important; border-color: #e5e7eb !important; }
#ruiHeader.rui-header--scrolled .rui-header__link--cta     { background: var(--rui-accent, #c8956c) !important; color: #fff !important; border: none !important; }


/* ──────────────────────────────────────────────────────────
   MOBILE DRAWER — always white background, always dark text
   No matter what scroll position, the drawer is solid white.
   This is the key fix: the rules above set ALL .rui-header__link
   to white (#fff). These rules override that specifically inside
   the drawer with a more specific selector.
────────────────────────────────────────────────────────── */
#ruiHeader .rui-header__mobile {
    background: #ffffff !important;
    border-top: 1px solid #e5e7eb !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.10) !important;
}

#ruiHeader .rui-header__mobile .rui-header__link {
    color: #374151 !important;
    background: transparent !important;
}

#ruiHeader .rui-header__mobile .rui-header__link:hover {
    color: #111827 !important;
    background: #f3f4f6 !important;
}

#ruiHeader .rui-header__mobile .rui-header__link--cta {
    background: #c8956c !important;
    color: #ffffff !important;
    border: none !important;
    text-align: center !important;
    justify-content: center !important;
}

#ruiHeader .rui-header__mobile .rui-header__mobile-sep {
    background: #e5e7eb !important;
}

#ruiHeader .rui-header__mobile .rui-header__user {
    background: #f3f4f6 !important;
    border-color: #e5e7eb !important;
    color: #374151 !important;
}


/* ──────────────────────────────────────────────────────────
   HAMBURGER ICON — always visible on mobile
   At the top of the page the icon bars are white (correct for
   the dark hero image). But on some phones the hero image is
   lighter at the top edge, making white bars invisible.
   A semi-transparent pill behind the icon fixes this.
────────────────────────────────────────────────────────── */
@media (max-width: 900px) {

    /* Frosted dark pill when transparent (top of page) */
    #ruiHeader:not(.rui-header--scrolled) .rui-header__burger {
        background: rgba(0,0,0,0.30) !important;
        border-radius: 8px !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
    }

    /* Remove pill when scrolled — white header gives enough contrast */
    #ruiHeader.rui-header--scrolled .rui-header__burger {
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}