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

/* Frontend shared styles — aligned with temp/islamove_components.html */
:root {
    --orange-primary: #e07830;
    --orange-dark: #c96820;
    --orange-light: #f5c07a;
    --theme-bg: #f6f6f6;
    --theme-surface: #ffffff;
    --theme-border: #e4e4e4;
    --theme-border-strong: #cecece;
    --theme-text: #1a1a1a;
    --theme-text-muted: #5a5a5a;
    --theme-text-subtle: #a0a0a0;
    --theme-teal: #2a9d8f;
    --theme-success-light: #e8f8ee;
    --theme-success-dark: #0f5c28;
    --theme-danger-light: #fdeaea;
    --theme-danger-dark: #8b1010;
    --theme-info-light: #e0f7f2;
    --theme-info-dark: #0a5048;
    --theme-radius-md: 12px;
    --theme-radius-lg: 16px;
    --theme-radius-xl: 24px;
    --theme-shadow-card: 0 2px 12px rgba(0, 0, 0, .07), 0 1px 3px rgba(0, 0, 0, .05);
    --theme-shadow-focus: 0 0 0 3px rgba(224, 120, 48, .18);
}
.bg-orange-primary { background-color: var(--orange-primary); }
.bg-orange-dark { background-color: var(--orange-dark); }
.text-orange-primary { color: var(--orange-primary); }
.border-orange-primary { border-color: var(--orange-primary); }

/* Shared theme buttons inspired by islamove_components.html */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background .15s, color .15s, transform .1s, box-shadow .15s, opacity .15s;
    white-space: nowrap;
    line-height: 1;
    border-radius: 12px;
    text-decoration: none;
}
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled { opacity: .42; cursor: not-allowed; }

.btn-md {
    font-size: 14px;
    padding: 12px 22px;
}

.btn-primary {
    background: var(--orange-primary);
    color: #fff;
}
.btn-primary:hover:not(:disabled) { background: var(--orange-dark); }

.btn-sm {
    font-size: 12px;
    padding: 8px 16px;
    border-radius: 8px;
}

.btn-lg {
    font-size: 15px;
    padding: 15px 28px;
    border-radius: var(--theme-radius-lg);
}

.btn-outline {
    background: transparent;
    color: var(--orange-primary);
    border: 1.5px solid var(--orange-primary);
}
.btn-outline:hover:not(:disabled) {
    background: #fef0e2;
}

.btn-ghost {
    background: transparent;
    color: var(--theme-text-muted);
    border: 1.5px solid var(--theme-border);
}
.btn-ghost:hover:not(:disabled) {
    background: var(--theme-bg);
    border-color: var(--theme-border-strong);
}

.btn-teal {
    background: var(--theme-teal);
    color: #fff;
}
.btn-teal:hover:not(:disabled) { background: #208070; }

/* Order Again: icon-only below 768px; label from md up (does not rely on Tailwind responsive utilities). */
.order-again-label {
    display: none;
}
@media (min-width: 768px) {
    .order-again-label {
        display: inline;
    }
}

/*
 * End-user pages (body.bg-gray-50): typography, inputs, cards, alerts.
 * Header/layout/header.php is intentionally not edited; rules avoid styling
 * header chrome (e.g. modals use rounded-xl / ids; content cards live in section / containers).
 */
body.bg-gray-50 {
    font-family: 'Poppins', system-ui, sans-serif;
    color: var(--theme-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Sticky footer: fill the viewport on short pages; footer stays at the bottom */
body:has(> .site-footer-push) {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.site-footer-push {
    flex: 1 0 0;
}

body.bg-gray-50 .font-bold,
body.bg-gray-50 .font-semibold {
    letter-spacing: -0.01em;
}

body.bg-gray-50 label.block.text-gray-700 {
    color: var(--theme-text-muted);
    font-size: 13px;
    font-weight: 600;
}

body.bg-gray-50 input.shadow.appearance-none.border.rounded,
body.bg-gray-50 select.shadow.appearance-none.border.rounded,
body.bg-gray-50 textarea.shadow.appearance-none.border.rounded {
    background: var(--theme-surface);
    border: 1.5px solid var(--theme-border);
    border-radius: var(--theme-radius-md);
    box-shadow: none;
    color: var(--theme-text);
    font-size: 14px;
    font-weight: 500;
    transition: border-color .15s, box-shadow .15s;
}

body.bg-gray-50 input.shadow.appearance-none.border.rounded:hover,
body.bg-gray-50 select.shadow.appearance-none.border.rounded:hover,
body.bg-gray-50 textarea.shadow.appearance-none.border.rounded:hover {
    border-color: var(--theme-border-strong);
}

body.bg-gray-50 input.shadow.appearance-none.border.rounded:focus,
body.bg-gray-50 select.shadow.appearance-none.border.rounded:focus,
body.bg-gray-50 textarea.shadow.appearance-none.border.rounded:focus {
    border-color: var(--orange-primary);
    box-shadow: var(--theme-shadow-focus);
    outline: none;
}

body.bg-gray-50 .bg-orange-primary {
    background: var(--orange-primary);
    border-radius: var(--theme-radius-md);
    transition: background .15s ease, transform .1s ease;
}

body.bg-gray-50 .bg-orange-primary:hover {
    background: var(--orange-dark);
}

body.bg-gray-50 .bg-orange-primary:active {
    transform: scale(.99);
}

body.bg-gray-50 .text-orange-primary {
    color: var(--orange-primary);
}

body.bg-gray-50 .hover\:text-orange-dark:hover {
    color: var(--orange-dark);
}

body.bg-gray-50 .border-orange-primary {
    border-color: var(--orange-primary);
}

body.bg-gray-50 .bg-green-100.border.border-green-400,
body.bg-gray-50 .bg-green-100.border {
    background: var(--theme-success-light);
    border-color: rgba(46, 155, 85, .35);
    color: var(--theme-success-dark);
    border-radius: var(--theme-radius-md);
    font-size: 13px;
    font-weight: 500;
}

body.bg-gray-50 .bg-red-100.border.border-red-400,
body.bg-gray-50 .bg-red-100.border {
    background: var(--theme-danger-light);
    border-color: rgba(217, 64, 64, .35);
    color: var(--theme-danger-dark);
    border-radius: var(--theme-radius-md);
    font-size: 13px;
    font-weight: 500;
}

body.bg-gray-50 .bg-blue-100.border.border-blue-400,
body.bg-gray-50 .bg-blue-100.border {
    background: var(--theme-info-light);
    border-color: rgba(26, 144, 128, .35);
    color: var(--theme-info-dark);
    border-radius: var(--theme-radius-md);
    font-size: 13px;
    font-weight: 500;
}

/* Content “cards”: sections and main containers only (not #orders-popup etc.) */
body.bg-gray-50 section .bg-white.rounded-lg.shadow-md,
body.bg-gray-50 section .bg-white.rounded-lg.shadow-lg,
body.bg-gray-50 section .bg-white.rounded-lg.shadow,
body.bg-gray-50 .container.mx-auto .bg-white.rounded-lg.shadow:not(#orders-popup),
body.bg-gray-50 .container.mx-auto .bg-white.rounded-lg.shadow-md:not(#orders-popup),
body.bg-gray-50 .container.mx-auto .bg-white.rounded-lg.shadow-lg:not(#orders-popup),
body.bg-gray-50 .max-w-md.mx-auto .bg-white.rounded-lg,
body.bg-gray-50 .max-w-4xl.mx-auto .bg-white.rounded-lg.shadow,
body.bg-gray-50 .max-w-4xl.mx-auto .bg-white.rounded-lg.shadow-md,
body.bg-gray-50 .max-w-4xl.mx-auto .bg-white.rounded-lg.shadow-lg,
body.bg-gray-50 > div.max-w-md .bg-white.rounded-lg {
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius-lg);
    box-shadow: var(--theme-shadow-card);
}

body.bg-gray-50 .bg-gray-50.rounded-lg.overflow-hidden {
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius-lg);
}

/* Checkout overlay / success panels */
body.bg-gray-50 .bg-white.rounded-xl.shadow-xl.px-8 {
    border: 1px solid var(--theme-border);
    box-shadow: var(--theme-shadow-card);
    border-radius: var(--theme-radius-lg);
}

/* Auth screens — parity with admin login */
.frontend-login-page {
    background: var(--theme-bg);
    font-family: 'Poppins', system-ui, sans-serif;
    color: var(--theme-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.frontend-login-card {
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius-xl);
    box-shadow: var(--theme-shadow-card);
}

.frontend-login-title {
    color: var(--theme-text);
    font-weight: 800;
    letter-spacing: -.02em;
}

.frontend-login-subtitle {
    color: var(--theme-text-muted);
    font-weight: 500;
}

.frontend-login-label {
    color: var(--theme-text-muted);
    font-size: 13px;
    font-weight: 600;
}

.frontend-login-input {
    background: var(--theme-surface);
    border: 1.5px solid var(--theme-border);
    border-radius: var(--theme-radius-md);
    color: var(--theme-text);
    font-size: 14px;
    font-weight: 500;
    padding-top: .65rem;
    padding-bottom: .65rem;
    transition: border-color .15s, box-shadow .15s;
}

.frontend-login-input:hover {
    border-color: var(--theme-border-strong);
}

.frontend-login-input:focus {
    border-color: var(--orange-primary);
    box-shadow: var(--theme-shadow-focus);
    outline: none;
}

.frontend-login-button {
    background: var(--orange-primary);
    border: none;
    border-radius: var(--theme-radius-md);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    padding-top: .78rem;
    padding-bottom: .78rem;
    transition: background .15s ease, transform .1s ease;
}

.frontend-login-button:hover {
    background: var(--orange-dark);
}

.frontend-login-button:active {
    transform: scale(.99);
}

.frontend-login-alert-success {
    background: var(--theme-success-light);
    border: 1px solid rgba(46, 155, 85, .35);
    border-radius: var(--theme-radius-md);
    color: var(--theme-success-dark);
    font-size: 13px;
    font-weight: 500;
}

.frontend-login-alert-error {
    background: var(--theme-danger-light);
    border: 1px solid rgba(217, 64, 64, .35);
    border-radius: var(--theme-radius-md);
    color: var(--theme-danger-dark);
    font-size: 13px;
    font-weight: 500;
}

.frontend-login-alert-info {
    background: var(--theme-info-light);
    border: 1px solid rgba(26, 144, 128, .35);
    border-radius: var(--theme-radius-md);
    color: var(--theme-info-dark);
    font-size: 13px;
    font-weight: 500;
}

.frontend-login-tabs {
    border-color: var(--theme-border);
}

.frontend-mfa-modal-card {
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius-lg);
    box-shadow: 0 14px 36px rgba(0, 0, 0, .18);
}

.frontend-mfa-digit {
    border: 1.5px solid var(--theme-border);
    border-radius: var(--theme-radius-md);
    color: var(--theme-text);
    transition: border-color .15s, box-shadow .15s;
}

.frontend-mfa-digit:focus {
    border-color: var(--orange-primary);
    box-shadow: var(--theme-shadow-focus);
}

.frontend-mfa-cancel {
    border-radius: var(--theme-radius-md);
    color: var(--theme-text-muted);
    font-weight: 600;
}

/* Header-specific refinements */
.header-brand-name {
    font-size: 1.4rem;
    line-height: 1.2;
}

.header-auth-btn {
    min-height: 40px;
}

@media (max-width: 575.98px) {
    .header-brand-name {
        font-size: 1rem;
    }

    .header-auth-btn {
        font-size: 10px;
        padding: 5px 10px;
    }
}

.popular-item-price {
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.menu-item-favorite-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid rgba(229, 231, 235, 0.8);
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease;
}
.menu-item-favorite-btn:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: scale(1.05);
}
.menu-item-favorite-icon-outline {
    color: #4b5563;
    font-size: 0.95rem;
}
.menu-item-favorite-icon-filled {
    color: #fda4af;
    font-size: 0.95rem;
}

#favorite-toast {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%) translateY(120%);
    z-index: 1200;
    padding: 0.625rem 1.25rem;
    border-radius: 9999px;
    background: rgba(31, 41, 55, 0.92);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s ease, opacity 0.25s ease;
}
#favorite-toast.is-visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.favorites-menu-card.is-removing {
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.favorites-restaurant-group.is-removing {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    margin: 0;
    transition: opacity 0.25s ease, max-height 0.25s ease;
}

/* Home / browse mode tabs + restaurant search */
.home-browse-mode-tab {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--theme-text-muted);
    padding: 10px 4px;
    min-height: 44px;
    transition: color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.home-browse-mode-tab.is-active {
    color: var(--orange-primary);
}
.home-browse-mode-tab:focus-visible {
    outline: 2px solid var(--orange-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

.home-restaurant-search-input {
    display: block;
    width: 100%;
    font-size: 16px;
    line-height: 1.4;
    padding: 12px 14px;
    border: 1.5px solid var(--theme-border);
    border-radius: var(--theme-radius-md);
    background: var(--theme-surface);
    color: var(--theme-text);
}
.home-restaurant-search-input:focus {
    outline: none;
    border-color: var(--orange-primary);
    box-shadow: var(--theme-shadow-focus);
}

.home-restaurant-search-results {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    background: var(--theme-surface);
    border: 1.5px solid var(--theme-border);
    border-radius: var(--theme-radius-md);
    box-shadow: var(--theme-shadow-card);
    max-height: min(280px, 50vh);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.home-restaurant-search-result {
    display: block;
    width: 100%;
    text-align: left;
    padding: 12px 14px;
    min-height: 44px;
    border: none;
    border-bottom: 1px solid var(--theme-border);
    background: transparent;
    color: var(--theme-text);
    font-size: 15px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.home-restaurant-search-results li:last-child .home-restaurant-search-result {
    border-bottom: none;
}
.home-restaurant-search-result:hover,
.home-restaurant-search-result:focus {
    background: #fef0e2;
    outline: none;
}
.home-restaurant-search-empty {
    padding: 12px 14px;
    font-size: 14px;
    color: var(--theme-text-muted);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Dashboard featured-restaurant horizontal strip — plain CSS so card sizing
 * doesn't depend on Tailwind JIT having w-44/w-48/h-32 in the built bundle. */
.menu-card-strip {
    /* Mobile default: hide native scrollbars (cross-browser). */
    -ms-overflow-style: none;
    scrollbar-width: none;
    /* iOS momentum scroll. */
    -webkit-overflow-scrolling: touch;
    /* Don't hand off horizontal overscroll to parent / browser back-swipe. */
    overscroll-behavior-x: contain;
    /* Intentionally NOT setting touch-action: pan-x here — that would lock
     * the element to horizontal gestures only and block vertical page
     * scrolling when the user starts a swipe on a card. The default
     * (touch-action: auto) lets the browser route by gesture direction. */
}
.menu-card-strip::-webkit-scrollbar { display: none; }

/* Desktop / fine-pointer devices: show a thin horizontal scrollbar so
 * mouse users have a discoverable way to scroll the strip (click & drag
 * the bar, click the track, or use trackpad / Shift+wheel). Touch devices
 * keep the hidden look above. */
@media (hover: hover) and (pointer: fine) {
    .menu-card-strip {
        scrollbar-width: thin;
        scrollbar-color: rgba(0, 0, 0, 0.28) transparent;
    }
    .menu-card-strip::-webkit-scrollbar {
        display: block;
        height: 8px;
    }
    .menu-card-strip::-webkit-scrollbar-track {
        background: transparent;
    }
    .menu-card-strip::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.28);
        border-radius: 4px;
    }
    .menu-card-strip::-webkit-scrollbar-thumb:hover {
        background-color: rgba(0, 0, 0, 0.45);
    }
}

.menu-card-fixed {
    width: 176px;
    flex: 0 0 176px;
}
@media (min-width: 640px) {
    .menu-card-fixed {
        width: 192px;
        flex-basis: 192px;
    }
}
.menu-card-fixed .menu-card-image {
    position: relative;
    height: 128px;
}
.menu-card-fixed .menu-card-image img,
.menu-card-fixed .menu-card-image > .menu-card-image-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

@keyframes pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}
.animate-pop {
    animation: pop 0.3s ease-in-out;
}
#cart-icon {
    transition: transform 0.2s ease;
}

/* Magic link registration button */
.magic-link-btn {
    border-radius: var(--theme-radius-md);
    background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 50%, #6366f1 100%);
    background-size: 200% 200%;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.35);
}
.magic-link-btn:hover {
    background-position: 100% 50%;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.45);
}
.magic-link-btn:focus {
    outline: 2px solid #a78bfa;
    outline-offset: 2px;
}

/* Google OAuth sign-in / register button */
.oauth-google-btn {
    border: 1px solid #dadce0;
    border-radius: var(--theme-radius-md);
    background: #fff;
    color: #3c4043;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.625rem 1rem;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(60, 64, 67, 0.15);
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.oauth-google-btn:hover {
    background: #f8f9fa;
    box-shadow: 0 1px 3px rgba(60, 64, 67, 0.2);
}
.oauth-google-btn:focus {
    outline: 2px solid #4285f4;
    outline-offset: 2px;
}
.oauth-google-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

/* WhatsApp CTA — use plain CSS so it works even when Tailwind arbitrary colors are not in the built bundle */
.whatsapp-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: #25d366;
    color: #fff;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25;
    text-decoration: none;
    transition: background-color 0.15s ease, filter 0.15s ease;
}
.whatsapp-cta:hover {
    background-color: #20bd5a;
    color: #fff;
}
.whatsapp-cta:focus-visible {
    outline: 2px solid #128c7e;
    outline-offset: 2px;
}
.whatsapp-cta svg {
    flex-shrink: 0;
}

/* Restaurant dashboard brand test-drive (keeps Tailwind layout) */
.restaurant-dashboard-page {
    background: var(--theme-bg);
    color: #1a1a1a;
    font-family: 'Poppins', system-ui, sans-serif;
}

.restaurant-dashboard-card {
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .07), 0 1px 3px rgba(0, 0, 0, .05);
}

.restaurant-dashboard-title {
    color: #1a1a1a;
    font-weight: 800;
    letter-spacing: -.01em;
}

.restaurant-dashboard-subtitle {
    color: var(--theme-text-muted);
    font-weight: 500;
}

.restaurant-dashboard-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.restaurant-dashboard-actions .btn {
    min-height: 46px;
    border-radius: 12px;
}

.restaurant-dashboard-actions .btn-teal {
    background: var(--theme-teal);
    color: #fff;
}
.restaurant-dashboard-actions .btn-teal:hover:not(:disabled) {
    background: #208070;
}

/* Browse + menu: cuisine pill and Restaurant Info link */
.restaurant-browse-card-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 0.5rem;
}

.restaurant-browse-card-title-row h2 {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.restaurant-menu-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
}

.restaurant-cuisine-pill {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    padding: 6px 14px;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    background: var(--theme-bg);
    color: var(--theme-text-muted);
    border: 1px solid var(--theme-border);
}

.restaurant-info-pill {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    text-decoration: none;
    background: var(--theme-surface);
    color: var(--theme-text-muted);
    border: 1px solid var(--theme-border);
    transition: color .15s, border-color .15s, background .15s;
}

.restaurant-info-pill:hover {
    color: var(--orange-primary);
    border-color: var(--orange-primary);
    background: #fef6ee;
}

.restaurant-info-pill i {
    font-size: 14px;
    line-height: 1;
}

/* Restaurant menu — sticky category chip strip */
.restaurant-menu-category-nav {
    position: sticky;
    z-index: 20;
    margin: 0 -2px 1rem;
    padding: 0.5rem 2px;
    background: #f9fafb;
    box-shadow: 0 0 0 2px #f9fafb;
    isolation: isolate;
}

.restaurant-menu-category-strip {
    overflow-x: auto;
    background: #f9fafb;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.restaurant-menu-category-strip::-webkit-scrollbar {
    display: none;
}

.restaurant-menu-category-strip-track {
    display: flex;
    gap: 0.5rem;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    padding: 0 0.25rem 0.25rem;
    background: #f9fafb;
}

.restaurant-menu-category-strip .menu-category-chip {
    flex-shrink: 0;
    scroll-snap-align: start;
}

.restaurant-menu-category-section {
    scroll-margin-top: var(--menu-scroll-offset, 5rem);
}

/* Profile section tabs — icon-only on mobile, icon + label on desktop */
.profile-tab-nav {
    display: flex;
    border-bottom: 1px solid var(--theme-border);
    margin-inline: 5px;
}

.profile-tab-link {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
    padding: 0.75rem 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s ease;
    color: var(--theme-text-subtle);
}

.profile-tab-link:hover {
    color: var(--theme-text-muted);
}

.profile-tab-link.is-active {
    color: var(--orange-primary);
    border-bottom-color: var(--orange-primary);
}

.profile-tab-link i {
    font-size: 1.25rem;
    line-height: 1;
}

.profile-tab-label {
    display: none;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .profile-tab-link {
        flex: 0 1 auto;
        flex-direction: row;
        gap: 0.5rem;
        padding: 0.875rem 1.25rem;
    }

    .profile-tab-link i {
        font-size: 1.05rem;
    }

    .profile-tab-label {
        display: inline;
    }
}