/* Sarali custom theme overrides for the QR menu page.
   Kept separate from the shared Menu.cshtml styles so this restaurant's
   look can be swapped or removed without touching the base template.

   NOTE: this replaces sarali-theme-v38.css (renamed) - v2 through v38 all
   got stuck on the deployed server the same way at various points: some
   publishes did not upload edits made to them, even though other changed
   files went through fine. Renaming again forces the publish tool to
   treat this as a brand new file.

   v23 rewrites this file to match the "Sarayli Digital Menu — Category
   Page" developer handoff spec (Iznik Blue palette, Sept 2026), which is
   now the source of truth for this screen instead of the earlier
   screenshot-by-screenshot mockup matching.

   --sarali-green, --sarali-gold and --sarali-cream map to the spec's
   --ink / --metal / --cream tokens and are admin-configurable via
   RestaurantSettings (Card Background/Accent/Text Color) - set in
   Menu.cshtml's :root block. The spec's other 6 tokens (--deep,
   --surface, --line, --ink-soft, --metal-lift, --metal-ink) have no
   admin field yet, so they're hardcoded below for the Iznik Blue palette
   specifically - swap the values here (or wire up new admin fields) if
   the restaurant ever switches to one of the spec's other 4 documented
   palettes. */

:root {
    --sarali-deep: #12243A;
    --sarali-surface: #F6F2E7;
    --sarali-line: rgba(201, 169, 97, 0.45);
    --sarali-ink-soft: #566A7E;
    --sarali-metal-lift: #DCC183;
    --sarali-metal-ink: #8A6C2E;
}

/* ---- Page background: this is the mobile layout at every real phone
   width - per spec there is no separate desktop version, so on a wider
   browser the content column is capped and centered instead of
   stretching or being redesigned. --sarali-deep fills the margin outside
   it. Scoped to this page only since this stylesheet only loads on
   Menu.cshtml. ---- */
/* html (not just body) needs the background too - iOS Safari's elastic
   "bounce" overscroll past the top/bottom of the page reveals whatever is
   behind the body content, which is otherwise the browser's default
   white, causing a white flash/flicker while scrolling. */
html,
body {
    background-color: var(--sarali-deep) !important;
}

html {
    min-height: 100%;
}

.qr-menu-container {
    max-width: 480px !important;
    margin: 0 auto !important;
    background: var(--sarali-cream) !important;
}

.qr-menu-section {
    background: var(--sarali-cream) !important;
}

/* ---- Top bar: search + language toggle ---- */
.qr-menu-search-lang {
    background: var(--sarali-surface) !important;
    border-bottom: 1px solid var(--sarali-line) !important;
    padding: 13px 14px !important;
}

.qr-search-box input {
    border-radius: 999px !important;
    /* Extra right-padding (RTL, icon sits at right:1rem via ::before)
       clears space so the search icon doesn't overlap the placeholder
       text - without it the icon sat on top of "...بحث". */
    padding: 8px 2.5rem 8px 13px !important;
    border: 1px solid var(--sarali-line) !important;
    background: var(--sarali-surface) !important;
    color: var(--sarali-ink-soft) !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

.qr-lang-switcher a {
    font-family: 'Jost', sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    background: var(--sarali-surface) !important;
    border: 1px solid var(--sarali-line) !important;
    color: var(--sarali-green) !important;
    border-radius: 999px !important;
}

.qr-lang-switcher a:hover,
.qr-lang-switcher a.active {
    background: var(--sarali-green) !important;
    color: #FFFFFF !important;
    border-color: var(--sarali-green) !important;
}

/* ---- Category navigation: horizontal scroll strip, not the spec's fixed
   3-column grid - with restaurants that have many categories (this one
   has 9+), a non-scrolling grid stacks into a very tall block before you
   even reach the menu content, so a scrolling row is the better call in
   practice despite the spec's "never scrolls" note. ---- */
.qr-menu-categories {
    background: var(--sarali-surface) !important;
    border-bottom: 1px solid var(--sarali-line) !important;
    display: flex !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    gap: 9px !important;
    padding: 14px !important;
}

.category-card {
    display: inline-flex !important;
    width: 110px !important;
    min-width: 110px !important;
    max-width: 110px !important;
    flex-shrink: 0;
    padding: 4px !important;
    /* Full-opacity gold rather than the faint --sarali-line (45% alpha) -
       that was too subtle to read as a border against the cream page. */
    border: 1px solid var(--sarali-gold) !important;
    border-radius: 4px !important;
    background: transparent !important;
}

/* Selected category: border switches to --ink plus an inset ring in the
   same colour - a subtle highlight box rather than a colour fill or a
   glowing shadow. */
.category-card.active {
    border: 1px solid var(--sarali-green) !important;
    box-shadow: inset 0 0 0 1px var(--sarali-green) !important;
}

.category-image,
.category-no-image {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 4px !important;
    /* The base (non-Sarali) rule adds margin-bottom: 0.75rem here, which
       stacked with .category-name's own margin-top and pushed the label
       further down than intended. */
    margin-bottom: 0 !important;
}

.category-name {
    /* text-transform/letter-spacing moved to .qr-menu-latin-text below -
       applying them unconditionally here broke Arabic letter-joining. */
    font-family: 'Jost', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: var(--sarali-green) !important;
    min-height: auto !important;
    margin-top: 4px;
    display: block;
    width: 100%;
    text-align: center !important;
}

.category-card.active .category-name {
    color: var(--sarali-green) !important;
}

.category-name.qr-menu-latin-text {
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

/* Page-scroll compact mode: the sticky nav strip shrinks to a row of
   small pills and hides the thumbnails once the page is scrolled down. */
.qr-menu-categories.scrolled {
    padding: 8px 14px !important;
}

.qr-menu-categories.scrolled .category-card {
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;
    padding: 6px 12px !important;
}

.qr-menu-categories.scrolled .category-image,
.qr-menu-categories.scrolled .category-no-image {
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    aspect-ratio: unset !important;
    margin: 0 !important;
    overflow: hidden;
}

/* ---- Category banner: double gold frame (outer 1px border + 4px pad,
   then a second 1px border directly on the image/placeholder) - two
   distinct gold lines with a visible gap between them. ---- */
.qr-menu-banner-frame {
    /* No left/right margin here - the parent .qr-menu-section already has
       its own 1rem (16px) side padding, so adding 14px on top of that
       made the banner noticeably narrower than the category nav row
       above it, which only has its own 14px padding and nothing else. */
    margin: 16px 0;
    position: relative;
    /* The classic padding-bottom-percentage aspect-ratio technique
       instead of the modern aspect-ratio property - three attempts using
       aspect-ratio (on the image, then the wrapper, with flex, with
       absolute positioning) all left an unexplained gap specifically at
       the bottom. This older technique forces the ratio through the box
       model directly (height:0 + padding-bottom as a % of width) and has
       been reliable across browsers for over a decade - it can't have
       the same class of bug since it doesn't use aspect-ratio at all. */
    height: 0;
    padding-bottom: 56.25%; /* 9/16 = 16:9 */
    border: 1px solid var(--sarali-gold) !important;
    border-radius: 12px;
    overflow: hidden;
}

.qr-menu-banner-frame .category-banner,
.qr-menu-banner-frame .category-banner-placeholder {
    display: block;
    position: absolute;
    top: 4px;
    right: 4px;
    bottom: 4px;
    left: 4px;
    /* Manually tuned in DevTools by the user: explicit 98%/97% instead of
       auto, and object-fit removed entirely (defaults to fill - stretches
       to exactly fill that box rather than preserving aspect ratio). */
    width: 98%;
    /* !important: a base mobile media-query rule sets a fixed 150px
       height on .category-banner, which would otherwise fight the
       sizing above on small screens. */
    height: 97% !important;
    object-position: center center;
    background: var(--sarali-cream);
    border: 1px solid var(--sarali-gold) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

/* ---- Category header: title + Arabic subtitle + divider ----
   !important is required here: this stylesheet loads before the base
   inline <style> block in Menu.cshtml, so for properties both declare
   (border-bottom, text-align, color) the later base rule would otherwise
   win the specificity tie regardless of load order. */
.qr-menu-section-heading {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: -1rem;
    margin-left: -1rem;
    margin-right: -1rem;
    margin-bottom: 0.75rem;
    width: calc(100% + 2rem);
    padding: 16px 1rem 0.5rem;
    position: sticky;
    top: calc(var(--sticky-header-height, 140px));
    z-index: 95;
    background: var(--sarali-cream) !important;
    box-shadow: none !important;
}

[data-theme="dark"] .qr-menu-section-heading {
    background: var(--sarali-cream) !important;
}

.qr-menu-section-title {
    /* English glyphs render in Cormorant Garamond; Arabic glyphs (which
       that font doesn't cover) automatically fall through to Amiri - this
       element shows either language depending on the current UI language.
       text-transform/letter-spacing are NOT set here - they break Arabic
       cursive letter-joining (Arabic letters render as disconnected,
       isolated forms whenever letter-spacing is applied), so those are
       only added via .qr-menu-latin-text when this element is English. */
    font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif !important;
    text-align: center !important;
    font-weight: 700 !important;
    font-size: 27px !important;
    color: var(--sarali-green) !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
}

.qr-menu-section-title.qr-menu-latin-text {
    letter-spacing: 0.14em;
}

/* The wrapper above now owns sticky/background/shadow for the whole
   heading (title + subtitle together); cancel the base rule's own
   sticky positioning on the title so it doesn't stick independently
   and split away from the subtitle while scrolling. */
.qr-menu-section-heading .qr-menu-section-title {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
    background: none !important;
    box-shadow: none !important;
    padding-top: 0 !important;
}

.qr-menu-section-subtitle {
    display: inline;
    font-family: 'Amiri', Georgia, serif !important;
    color: var(--sarali-metal-ink) !important;
    font-size: 13px;
    margin: 0;
}

.qr-menu-section-divider {
    /* Nested inside the sticky .qr-menu-section-heading flex row (alongside
       the title/subtitle) so it stays visible with them while scrolling;
       flex-basis: 100% forces it onto its own line below the text. */
    flex-basis: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin: 11px auto 0;
    color: var(--sarali-gold);
}

.qr-menu-section-divider::before,
.qr-menu-section-divider::after {
    content: '';
    width: 50px;
    height: 1px;
    background: var(--sarali-gold);
}

.qr-menu-section-divider .dot {
    width: 4px;
    height: 4px;
    background: var(--sarali-gold);
    transform: rotate(45deg);
    flex-shrink: 0;
}

.qr-menu-section-divider .dot-lg {
    width: 7px;
    height: 7px;
}

/* ---- Item cards ---- */
.qr-menu-items:not(.list-view) {
    grid-template-columns: 1fr;
    max-width: 900px;
    margin: 0 auto;
    gap: 12px;
}

.qr-menu-items:not(.list-view) .qr-menu-item {
    flex-direction: row;
    align-items: stretch;
    background: var(--sarali-green);
    border: 1px solid color-mix(in srgb, var(--sarali-gold) 46%, transparent);
    border-radius: 4px;
    padding: 10px;
    gap: 11px;
    box-shadow: none;
}

.qr-menu-items:not(.list-view) .qr-menu-item:hover {
    transform: none;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.qr-menu-items:not(.list-view) .qr-menu-item-image,
.qr-menu-items:not(.list-view) .qr-menu-item-no-image {
    width: 105px;
    height: 105px;
    min-width: 105px;
    border-radius: 4px;
    margin: 0;
    flex-shrink: 0;
    /* A box-shadow ring instead of a real border, per spec, so it doesn't
       add to the box's own size. */
    border: none !important;
    box-shadow: 0 0 0 2px var(--sarali-gold);
}

@media (max-width: 419px) {
    .qr-menu-items:not(.list-view) .qr-menu-item-image,
    .qr-menu-items:not(.list-view) .qr-menu-item-no-image {
        width: 85px;
        height: 85px;
        min-width: 85px;
    }
}

/* The item detail popup (tap a card to open it) has its own separate
   image element, not styled by the card rule above - give it the same
   thin gold border for consistency. */
.qr-menu-modal-image {
    border: 1px solid var(--sarali-gold) !important;
    border-radius: 10px !important;
}

.qr-menu-items:not(.list-view) .qr-menu-item-content {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    /* Without flex-grow, this box only sizes to fit its own content -
       items with a long description forced it wide, but items without
       one (Mixed Cheese, Sarayli Labneh...) shrank to fit just the short
       name/price text, leaving the price short of the true edge. Forcing
       it to always fill the space next to the image fixes that for every
       card consistently. */
    flex: 1;
    min-width: 0;
    /* Start from the top instead of centering vertically - centering left
       the price/name floating with empty space above and below whenever
       the text block was shorter than the image beside it. */
    justify-content: flex-start;
}

.qr-menu-items:not(.list-view) .qr-menu-item-name-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    /* Force full width explicitly - without this, the row could shrink to
       fit its content on some items, leaving the price short of the true
       left/right edge instead of flush against it like the others. */
    width: 100%;
}

/* The secondary (other-language) name row has no price next to it - align
   it to the exact same edge the price sits on. Using text-align tied to
   which language element this is (rather than flex justify-content, whose
   behavior was inconsistent here) guarantees a pixel-exact match: price is
   on the left in Arabic UI, so the English secondary name aligns left;
   price is on the right in English UI, so the Arabic secondary name
   aligns right. */
.qr-menu-items:not(.list-view) .qr-menu-item-name-row-secondary {
    display: block;
    margin-top: 2px;
}

.qr-menu-items:not(.list-view) .qr-menu-item-name-row-secondary .qr-menu-item-name {
    text-align: left;
    width: 100%;
}

.qr-menu-items:not(.list-view) .qr-menu-item-name-row-secondary .qr-menu-item-name-ar {
    text-align: right;
    width: 100%;
}

.qr-menu-items:not(.list-view) .qr-menu-item-name {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    color: #FFFFFF !important;
    font-size: 17px;
    font-weight: 600;
    margin: 0;
}

.qr-menu-items:not(.list-view) .qr-menu-item-name-ar {
    font-family: 'Amiri', Georgia, serif !important;
    color: var(--sarali-gold) !important;
    font-size: 14.5px;
    font-weight: 400;
    margin: 0;
}

/* When Arabic is the primary name (Arabic UI - top row, next to the
   price) it should read larger than the secondary English name below it,
   not the other way around. */
.qr-menu-items:not(.list-view) .qr-menu-item-name-row:not(.qr-menu-item-name-row-secondary) .qr-menu-item-name-ar {
    font-size: 18px;
    font-weight: 600;
}

.qr-menu-items:not(.list-view) .qr-menu-item-price {
    font-family: 'Jost', sans-serif !important;
    color: #FFFFFF !important;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.qr-menu-items:not(.list-view) .qr-menu-item-price-prefix {
    color: var(--sarali-gold);
    font-size: 10px;
    font-weight: 500;
}

.qr-menu-items:not(.list-view) .qr-menu-item-description,
.qr-menu-items:not(.list-view) .qr-menu-item-description-ar {
    font-family: 'Jost', sans-serif !important;
    color: rgba(255, 255, 255, 0.74) !important;
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.5;
    margin: 5px 0 0;
    -webkit-line-clamp: 2;
}