/* ============================================
   QrMenum - Global Styles
   ============================================ */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Reserve space for scrollbar so layout width stays constant whether
       content scrolls or not. Prevents "content shifts left on scroll"
       artifacts on desktop browsers. */
    scrollbar-gutter: stable;
}

/* When loaded in an iframe (dashboard / settings preview), kill the native
   scrollbar entirely. Scrolling still works via wheel/touch; the layout
   width never changes so content cannot shift sideways. Flag is set from
   JS (preview-bridge.js) to avoid affecting direct browser visits. */
html.in-iframe {
    scrollbar-gutter: auto;
    scrollbar-width: none;
}
html.in-iframe::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

body {
    font-family: var(--font-primary);
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.5;
    min-height: 100dvh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-family: inherit;
}

input, textarea, select {
    font-family: inherit;
    font-size: inherit;
}

ul, ol {
    list-style: none;
}

/* Container */
.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-md);
}

/* ============================================
   Hero / Homepage
   ============================================ */

.hero {
    position: relative;
    width: 100%;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    padding: var(--space-xl) var(--space-md);
    padding-bottom: calc(var(--nav-height) + var(--space-xl) + var(--safe-bottom));
}

.hero__video-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

.hero__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.3) 0%,
        rgba(0, 0, 0, 0.15) 40%,
        rgba(0, 0, 0, 0.4) 70%,
        rgba(0, 0, 0, 0.7) 100%
    );
}

.hero__logo {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-bottom: var(--space-2xl);
    animation: fadeInDown 0.8s ease;
    background: var(--hero-glass-bg, #fef7e663);
    width: 100%;
    backdrop-filter: var(--hero-glass-blur, var(--blur-md));
    -webkit-backdrop-filter: var(--hero-glass-blur, var(--blur-md));
    border-radius: 12px;
    padding: 10px;
}

.hero__logo-img {
    max-width: 180px;
    max-height: 180px;
    margin: 0 auto;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
}

.hero__logo-text {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 700;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.02em;
}

.hero__outlet {
    margin-top: 12px;
    text-align: center;
}

.hero__outlet-name {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

.hero__outlet-tagline {
    font-size: var(--text-sm);
    font-weight: 400;
    opacity: 0.85;
    margin-top: 4px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

body.theme-light .hero__outlet-name,
body.theme-light .hero__outlet-tagline {
    color: var(--color-text);
    text-shadow: 0 1px 6px rgba(255, 255, 255, 0.5);
}

.hero__categories {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--max-width);
    animation: fadeInUp 0.8s ease 0.2s both;
}

/* ============================================
   Category Grid (Homepage)
   ============================================ */

.category-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

.category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);

    background: var(--card-glass-bg, var(--color-bg-glass));
    backdrop-filter: var(--card-glass-blur, var(--blur-md));
    -webkit-backdrop-filter: var(--card-glass-blur, var(--blur-md));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
    text-align: center;
    min-height: 110px;
}

.category-card:active {
    transform: scale(0.97);
    background: var(--color-bg-glass-strong);
}

.category-card__icon {
    width: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.85;
    /* Drive `fill="currentColor"` paths via CSS color */
    color: var(--color-bg);
}
.category-card__icon img,
.category-card__icon svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    fill: var(--color-bg);
}

.category-card__name {
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-bg);
}

/* ============================================
   Page Content Area
   ============================================ */

.page-content {
    position: relative;
    z-index: 1;
    min-height: 100dvh;
    background: var(--color-bg);
    max-width: 1180px;
    margin: auto;
}

.page-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--color-bg);
    backdrop-filter: var(--blur-md);
    -webkit-backdrop-filter: var(--blur-md);
}

.page-header__back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: var(--color-bg-glass-strong);
    transition: background var(--transition-fast);
}

.page-header__back:active {
    background: var(--color-bg-card-hover);
}

.page-header__title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 600;
    flex: 1;
}

/* ============================================
   Modals Base
   ============================================ */

.search-modal,
.info-modal,
.lang-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.search-modal[hidden],
.info-modal[hidden],
.lang-modal[hidden] {
    display: none;
}

.search-modal__backdrop,
.info-modal__backdrop,
.lang-modal__backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: var(--blur-sm);
    -webkit-backdrop-filter: var(--blur-sm);
}

.search-modal__content {
    position: relative;
    width: 100%;
    max-width: var(--max-width);
    height: 100%;
    background: var(--color-bg-modal);
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s ease;
}

.info-modal__content,
.lang-modal__content {
    position: relative;
    width: 100%;
    max-width: var(--max-width);
    max-height: 80vh;
    background: var(--color-bg-modal);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: var(--space-lg);
    animation: slideUp 0.3s ease;
    overflow-y: auto;
}

.info-modal__header,
.lang-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-sm);
}

.info-modal__header h3,
.lang-modal__header h3 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
}

.info-modal__close,
.lang-modal__close {
    opacity: 0.6;
    transition: opacity var(--transition-fast);
}

.info-modal__logo {
    text-align: center;
    margin-bottom: var(--space-md);
}

.info-modal__logo img {
    max-width: 120px;
    margin: 0 auto;
}

.info-modal__business-name {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    text-align: center;
    margin-bottom: var(--space-lg);
}

/* Language Modal */
.lang-modal__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.lang-modal__form {
    display: contents;
}

.lang-modal__item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
    width: 100%;
    text-align: left;
}

.lang-modal__item:active {
    background: var(--color-bg-glass-strong);
}

.lang-modal__item--active {
    background: var(--color-bg-glass);
    border: 1px solid var(--color-primary);
}

.lang-modal__flag {
    font-size: 1.5rem;
}

.lang-modal__name {
    flex: 1;
    font-weight: 500;
}

.lang-modal__check {
    color: var(--color-primary);
}

/* ============================================
   Search Modal Specifics
   ============================================ */

.search-modal__header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    border-bottom: 1px solid var(--color-border);
}

.search-modal__input-wrap {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.search-modal__icon {
    position: absolute;
    left: var(--space-sm);
    width: 20px;
    height: 20px;
    opacity: 0.4;
}

.search-modal__input {
    width: 100%;
    padding: var(--space-md) var(--space-md);
    padding-left: 36px;
    background: var(--color-bg-glass);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-size: var(--text-base);
    outline: none;
    transition: border-color var(--transition-fast);
}

.search-modal__input:focus {
    border-color: var(--color-primary);
}

.search-modal__input::placeholder {
    color: var(--color-text-muted);
}

.search-modal__clear {
    position: absolute;
    right: var(--space-sm);
    width: 24px;
    height: 24px;
    opacity: 0.5;
}

.search-modal__close {
    color: var(--color-primary);
    font-size: var(--text-sm);
    font-weight: 600;
    padding: var(--space-sm);
    white-space: nowrap;
}

.search-modal__results {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-sm);
}

.search-modal__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    padding: var(--space-2xl);
    color: var(--color-text-muted);
    text-align: center;
}

.search-modal__empty[hidden] {
    display: none;
}

/* Search - Featured Products */
.search-featured {
    padding: var(--space-md);
}

.search-featured__title {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--space-md);
}

.search-featured__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
}

.search-featured__item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    transition: background var(--transition-fast);
}

.search-featured__item:active {
    background: var(--color-bg-glass);
}

.search-featured__img {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--color-bg-glass);
}

.search-featured__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.search-featured__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
}

.search-featured__info {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.search-featured__name {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.search-featured__price {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-primary);
    margin-top: 2px;
}

/* ============================================
   Animations
   ============================================ */

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--color-border-light);
    border-radius: 2px;
}

/* ============================================
   Powered By Badge
   ============================================ */

.powered-badge {
    display: flex;
    justify-content: flex-end;
    padding: var(--space-md) var(--space-md) calc(var(--nav-height) + var(--space-xl) + var(--safe-bottom));
}

.powered-badge__link {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 20px;
    opacity: 0.75;
    transition: opacity 0.3s ease;
    text-decoration: none;
}

.powered-badge__link:hover,
.powered-badge__link:active {
    opacity: 0.8;
}

.powered-badge__logo {
    height: 20px;
    width: auto;
}

/* ============================================
   Light Mode Overrides
   ============================================ */

/* Hero overlay - lighter for light mode */
body.theme-light .hero__overlay {
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.1) 0%,
        rgba(255, 255, 255, 0) 30%,
        rgba(0, 0, 0, 0.3) 65%,
        rgba(0, 0, 0, 0.85) 100%
    );
}

/* Hero text needs dark color in light mode */
body.theme-light .hero__logo-text {
    color: var(--color-text);
    text-shadow: 0 1px 8px rgba(255, 255, 255, 0.5);
}

body.theme-light .hero__logo-img {
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.1));
}

/* Category cards - light glass */
body.theme-light .category-card {
    background: var(--card-glass-bg, rgba(217, 189, 150, 0.5));
    backdrop-filter: var(--card-glass-blur, var(--blur-md));
    -webkit-backdrop-filter: var(--card-glass-blur, var(--blur-md));
    border-color: rgba(0, 0, 0, 0.06);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

body.theme-light .category-card:active {
    background: rgba(255, 255, 255, 0.9);
}

/* Page header */
body.theme-light .page-header {
    background: rgba(245, 245, 245, 0.9);
}

body.theme-light .page-header__back {
    background: rgba(0, 0, 0, 0.05);
}

/* Product section titles */
body.theme-light .product-section__title {
    color: var(--color-primary-dark);
    background: var(--color-bg);
}

/* Product card borders */
body.theme-light .product-card + .product-card {
    border-color: rgba(0, 0, 0, 0.06);
}

/* Search modal */
body.theme-light .search-modal__content {
    background: rgba(245, 245, 245, 0.98);
}

body.theme-light .search-modal__input {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.1);
    color: #1a1a1a;
}

/* Language modal */
body.theme-light .lang-modal__content {
    background: rgba(255, 255, 255, 0.98);
    color: #1a1a1a;
}

body.theme-light .lang-modal__item--active {
    background: rgba(0, 0, 0, 0.04);
}

/* Category tabs */
body.theme-light .category-tabs {
    background: var(--color-bg);
    border-color: rgba(0, 0, 0, 0.06);
}

body.theme-light .category-tab {
    background: rgba(0, 0, 0, 0.04);
    color: var(--color-text-secondary);
}

body.theme-light .category-tab--active {
    background: var(--color-primary);
    color: #fff;
}

/* Product detail - back button on image */
body.theme-light .page-content [style*="background: rgba(0,0,0,0.5)"] {
    background: rgba(255, 255, 255, 0.8) !important;
    color: #333;
}

/* Bottom nav icon colors for light footer */
body.theme-light .bottom-nav__icon {
    color: var(--color-footer-text, rgba(0, 0, 0, 0.5));
}

/* ============================================
   Desktop App Frame — tablet-feel column
   ============================================
   Activates ONLY on laptop/desktop (≥1100px). Real tablets (768-1099px)
   keep their native full-width feel — it's their natural habitat. On big
   monitors the menu stays in a centered ~800px "tablet-like" column with
   theme-tinted gradient edges. */
@media (min-width: 1100px) {
    body {
        background: linear-gradient(135deg,
            var(--color-footer-bg, #1a1a1a) 0%,
            var(--color-primary-dark, #8a6f47) 50%,
            var(--color-footer-bg, #1a1a1a) 100%);
        background-attachment: fixed;
        min-height: 100dvh;
    }

    /* Constrain ONLY the always-visible chrome — header, bottom nav, hero bg,
       and the content column. Menu panel + modals stay full-viewport so their
       backdrop scrim darkens everything behind (including the gradient edges). */
    .top-header,
    .bottom-nav-wrap,
    .hero__video-wrap,
    .hero__overlay {
        max-width: 800px;
        width: 100%;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
    }

    /* Menu panel drawer: stays full-viewport for proper scrim, but the
       sliding drawer content anchors to the frame's left edge. The drawer's
       inner element (usually .menu-panel__content) keeps its own width. */
    .menu-panel,
    .menu-panel-overlay,
    .search-modal,
    .info-modal,
    .lang-modal,
    .campaign-modal {
        /* no frame constraint — full viewport for backdrop */
    }

    /* Inner modal content blocks: center them with tablet width */
    .search-modal__content,
    .info-modal__content,
    .lang-modal__content,
    .campaign-modal__content {
        max-width: 800px !important;
        margin-left: auto;
        margin-right: auto;
    }

    /* Centered flow-layout column */
    .page-wrap {
        max-width: 800px;
        margin: 0 auto;
        background: var(--color-bg);
        min-height: 100dvh;
        box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
    }

    /* Light theme: softer gradient, no heavy shadow */
    body.theme-light {
        background: linear-gradient(135deg, #f5f5f0 0%, #e8e4d8 50%, #dbd6c5 100%);
        background-attachment: fixed;
    }
    body.theme-light .page-wrap {
        box-shadow: 0 0 60px rgba(0, 0, 0, 0.18);
    }
}