/* ============================================================
   KOTOR — Digital Menu
   Glass design system. Tailwind handles layout; this file owns
   the palette, glass surfaces, typography and motion.
   ============================================================ */

:root {
    /* Matches the page padding on <header>, <main> and <footer>; anything
       that bleeds to the screen edge cancels exactly this much */
    --gutter: 1rem;

    /* Brand palette */
    --page-bg: #004f7d;
    --splash-bg: #081a2c;
    --accent: #cacfcb;

    /* Derived tones */
    --page-deep: #003656;
    --page-lift: #13314f;
    --ink: #f4f7f5;
    --ink-soft: rgba(244, 247, 245, 0.72);
    --ink-faint: rgba(244, 247, 245, 0.48);

    /* Glass */
    --glass-bg: rgba(255, 255, 255, 0.08);
    --glass-bg-strong: rgba(255, 255, 255, 0.13);
    --glass-border: rgba(202, 207, 203, 0.22);
    --glass-border-lit: rgba(202, 207, 203, 0.45);
    --blur: 18px;

    --radius: 22px;
    --radius-sm: 14px;

    color-scheme: dark;
}

@media (min-width: 640px)  { :root { --gutter: 2rem; } }
@media (min-width: 768px)  { :root { --gutter: 3rem; } }
@media (min-width: 1024px) { :root { --gutter: 4rem; } }

/* ── Typography ──────────────────────────────────────────── */

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
}

/* Latin runs (phone numbers, prices, URLs) inside RTL text keep their own
   direction, so "+964 750…" does not come out reversed. */
.ltr-run {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: 'Outfit', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--ink);
    background: var(--page-bg);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body[dir='rtl'] {
    font-family: 'Cairo', 'Noto Kufi Arabic', 'Outfit', system-ui, sans-serif;
}

/* Kurdish and Arabic read better with a touch more line height */
body[dir='rtl'] p,
body[dir='rtl'] .desc {
    line-height: 1.9;
}

.font-display {
    font-family: 'Outfit', 'Cairo', system-ui, sans-serif;
    letter-spacing: -0.02em;
}

body[dir='rtl'] .font-display {
    font-family: 'Cairo', 'Outfit', system-ui, sans-serif;
    letter-spacing: 0;
}

/* ── Page background: layered light ──────────────────────── */

.page-bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    /* Clips the drifting orbs. Without this they overflow the viewport and,
       because they are fixed-position, body{overflow-x:hidden} cannot catch
       them — which shifts the whole page sideways in RTL. */
    overflow: hidden;
    background:
        radial-gradient(120% 80% at 12% -10%, var(--page-lift) 0%, transparent 55%),
        radial-gradient(90% 70% at 88% 8%, rgba(202, 207, 203, 0.16) 0%, transparent 60%),
        radial-gradient(120% 110% at 50% 110%, var(--splash-bg) 0%, transparent 62%),
        var(--page-bg);
}

/* Slow drifting orbs behind the glass */
.page-bg::before,
.page-bg::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.5;
    will-change: transform;
}

.page-bg::before {
    width: 46vmax;
    height: 46vmax;
    top: -14vmax;
    inset-inline-start: -12vmax;
    background: radial-gradient(circle, rgba(202, 207, 203, 0.4), transparent 70%);
    animation: drift 26s ease-in-out infinite alternate;
}

.page-bg::after {
    width: 40vmax;
    height: 40vmax;
    bottom: -16vmax;
    inset-inline-end: -10vmax;
    background: radial-gradient(circle, rgba(10, 98, 143, 0.85), transparent 70%);
    animation: drift 32s ease-in-out infinite alternate-reverse;
}

/* Fine grain keeps the large flat areas from banding */
.page-grain {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.35;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

@keyframes drift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(6vmax, 5vmax, 0) scale(1.15); }
}

/* ── Glass surfaces ──────────────────────────────────────── */

.glass {
    position: relative;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    /* backdrop-filter: blur(var(--blur)) saturate(155%);
    -webkit-backdrop-filter: blur(var(--blur)) saturate(155%); */
}

.glass-strong {
    background: var(--glass-bg-strong);
    border-color: var(--glass-border-lit);
}

/* Specular sheen along the top edge */
.glass-sheen::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    /* background: linear-gradient(155deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 38%); */
}

.glass-hover {
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.35s ease,
                background-color 0.35s ease;
}

.glass-hover:hover {
    transform: translateY(-6px);
    background: var(--glass-bg-strong);
    border-color: var(--glass-border-lit);
}

@media (hover: none) {
    .glass-hover:hover { transform: none; }
}

/* ── Splash screen ───────────────────────────────────────── */

.splash {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    background: var(--splash-bg);
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

/* Set by the server on <html>, cleared by app.js once the animation is done.
   It has to come from markup rather than a binding, or the page scrolls (and
   shows) for the frame before Alpine boots. */
.splash-on,
.splash-on body {
    overflow: hidden;
    height: 100%;
}

.splash.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* The mark is a frame sequence painted onto this canvas by app.js. It carries
   its own intro, so there is no CSS entrance — a fade-in would double it.

   The frames were exported on solid black. `lighten` keeps whichever is
   brighter, the frame or the splash behind it: black gives way to the navy,
   while the artwork — lighter than the navy everywhere — comes through as is. */
.splash-logo {
    display: block;
    width: min(58vw, 290px);
    height: auto;
    aspect-ratio: 1;
    mix-blend-mode: lighten;
    /* Blank until every frame has decoded and the first one is drawn */
    visibility: hidden;
}

.splash.is-ready .splash-logo {
    visibility: visible;
}

/* ── Form fields ─────────────────────────────────────────── */

/* Inputs wear the same glass as the panels around them, at a radius that
   suits one row of text rather than a whole card. :focus-within covers the
   wrappers that hold a bare input next to an icon. */
/* A field has to read as a place to type, not as another panel: it carries
   more glass and a lit edge than the card it sits on, plus a hairline
   highlight along the top so the row looks recessed. */
.field {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid var(--glass-border-lit);
    border-radius: var(--radius-sm);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
    color: var(--ink);
    transition: background 0.18s ease, border-color 0.18s ease;
}

.field:hover {
    background: rgba(255, 255, 255, 0.18);
}

.field:focus,
.field:focus-within {
    background: rgba(255, 255, 255, 0.2);
    border-color: var(--accent);
}

/* The descendant selector covers inputs sitting bare inside a field wrapper */
.field::placeholder,
.field ::placeholder {
    color: rgba(244, 247, 245, 0.5);
}

/* ── Footer illustration ─────────────────────────────────── */

.footer-art {
    display: block;
    width: min(100%, 702px);   /* its own intrinsic width, never wider */
    height: auto;
    contain: paint;
    transform: translateZ(0);
}

/* ── Language pills & buttons ────────────────────────────── */

/* The panel floats over the hero wordmark, so it needs a tinted frost of
   its own — the 13% white glass alone left the labels washed out */
.lang-menu {
    background: rgba(0, 44, 71, 0.72);
    border-color: var(--glass-border-lit);
    backdrop-filter: blur(26px) saturate(150%);
    -webkit-backdrop-filter: blur(26px) saturate(150%);
    box-shadow: 0 18px 40px rgba(2, 16, 28, 0.38);
}

.lang-pill {
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* Windows has no flag emoji font — a regional-indicator pair renders as
   bare letters — so the language is badged with its own code instead */
.lang-code {
    flex: none;
    min-width: 1.9rem;
    text-align: center;
    border: 1px solid var(--glass-border);
    border-radius: 7px;
    padding: 0.16rem 0.3rem;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    line-height: 1.25;
    color: var(--ink-soft);
}

.lang-pill.is-active .lang-code {
    border-color: rgba(8, 26, 44, 0.35);
    color: var(--splash-bg);
}

.lang-pill.is-active {
    background: var(--accent);
    color: var(--splash-bg);
    border-color: var(--accent);
    font-weight: 600;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    white-space: nowrap;
    border-radius: 999px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--ink-soft);
    padding: 0.6rem 1.05rem;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.chip:hover {
    color: var(--ink);
    border-color: var(--glass-border-lit);
    background: var(--glass-bg-strong);
}

/* Square-ish chip for a lone icon, where the label padding looks slack */
.chip-icon {
    padding: 0.6rem 0.75rem;
}

@media (max-width: 480px) {
    .chip-icon { padding: 0.5rem 0.6rem; }
}

.chip.is-active {
    background: linear-gradient(135deg, var(--accent), #e8ebe9);
    border-color: transparent;
    color: var(--splash-bg);
    font-weight: 600;
}

.btn-accent {
    background: linear-gradient(135deg, var(--accent), #e9ece9);
    color: var(--splash-bg);
    font-weight: 600;
    border-radius: 999px;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), filter 0.3s ease;
}

.btn-accent:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
}

/* ── Header search ───────────────────────────────────────── */

/* On phones the field lays over the header bar rather than adding a
   second row, so opening search never shifts the menu underneath.
   The sticky header is the positioning context. */
/* From 640px up the field sits inside the header bar, kept narrow and pushed
   over to the language button rather than stretched across the whole width —
   a search box as wide as the header reads like a second bar */
.search-shell {
    flex: 0 1 340px;
    min-width: 0;
    margin-inline-start: auto;
}

.search-field {
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    transition: background 0.2s ease, border-color 0.2s ease;
}

.search-field:hover,
.search-field:focus-within {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--glass-border-lit);
}

/* Below that there is no room for a mark, a field and a language button on
   one line, so the field covers the bar instead */
@media (max-width: 639px) {
    .search-shell {
        position: absolute;
        inset: 0;
        z-index: 10;
    }

    /* Fills the bar it covers; the glass tint alone is far too sheer
       to hide the logo behind it */
    .search-field {
        height: 100%;
        border-radius: var(--radius);
        background: rgba(0, 54, 86, 0.96);
        border-color: var(--glass-border-lit);
    }
}
/* ── Category rail ───────────────────────────────────────── */

.rail {
    display: flex;
    gap: 0.6rem;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Bleed past the column padding so a chip scrolls off the screen edge
       instead of being clipped inside the column, and keep both end chips
       inset by that same padding when the rail is at rest */
    margin-inline: calc(var(--gutter) * -1);
    padding: 0.25rem var(--gutter);
    scroll-padding-inline: var(--gutter);
    scroll-snap-type: x proximity;
}

.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: center; }

/* ── Swipeable category rows (menu_layout = carousel) ────── */

.carousel {
    display: flex;
    gap: 0.7rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Cards bleed to the screen edge so the row reads as "more this way" */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-block: 0.25rem;
    scroll-padding-inline-start: var(--gutter);
    -webkit-overflow-scrolling: touch;
}

.carousel::-webkit-scrollbar { display: none; }

.carousel-card {
    flex: none;
    width: 162px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    border-radius: 22px;
    overflow: hidden;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(var(--blur)) saturate(155%);
    -webkit-backdrop-filter: blur(var(--blur)) saturate(155%);
    cursor: pointer;
    transition: background-color 0.3s ease,
                border-color 0.3s ease,
                transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 640px) {
    .carousel-card { width: 196px; }
}

.carousel-card:hover {
    background: var(--glass-bg-strong);
    border-color: var(--glass-border-lit);
    transform: translateY(-4px);
}

.carousel-card:active { transform: scale(0.98); }

@media (hover: none) {
    .carousel-card:hover { transform: none; }
}

.carousel-media {
    position: relative;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: rgba(8, 26, 44, 0.45);
}

.carousel-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.carousel-card:hover .carousel-media img { transform: scale(1.06); }

.carousel-title {
    font-weight: 600;
    font-size: 0.87rem;
    line-height: 1.35;
}

/* Arrows are for pointers; touch users just swipe */
.carousel-nav {
    display: none;
    height: 34px;
    width: 34px;
    place-items: center;
    border-radius: 999px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    color: var(--ink-soft);
    transition: background-color 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}

.carousel-nav:hover {
    background: var(--glass-bg-strong);
    color: var(--ink);
}

.carousel-nav:disabled {
    opacity: 0.25;
    cursor: default;
}

@media (hover: hover) and (min-width: 768px) {
    .carousel-nav { display: grid; }
}

/* ── Stacked list rows (menu_layout = list) ──────────────── */

.list-row {
    display: flex;
    align-items: stretch;
    gap: 0.85rem;
    padding: 0.7rem;
    border-radius: 28px;
}

/* Rows sit shoulder to shoulder, so a big lift looks jumpy */
.list-row:hover {
    transform: translateY(-2px);
}

.list-row:active { transform: scale(0.995); }

@media (hover: none) {
    .list-row:hover { transform: none; }
}

/* The row stretches so the price can reach the bottom; the photo opts out of
   that and stays square, centred against however tall the text runs */
.list-media {
    flex: none;
    align-self: center;
    width: 78px;
    aspect-ratio: 1;
    border-radius: 21px;
}

/* A glass rim laid over the photo. The card's own 22% border vanished against
   a warm, bright image, so this one is drawn on top of it — a white hairline
   plus a brighter catch-light along the top edge — and reads on any photo. */
.list-media::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transition: box-shadow 0.3s ease;
}

.glass-hover:hover .list-media::after {
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

@media (min-width: 640px) {
    .list-media { width: 104px; border-radius: 24px; }
    .list-row   { gap: 1.1rem; padding: 0.85rem; border-radius: 32px; }
}

/* Three across from here, so the photo gives some width back to the name.
   Must follow the 640px block: both match at this width, and the later rule
   is the one that lands. */
@media (min-width: 1280px) {
    .list-media { width: 88px; border-radius: 22px; }
    .list-row   { gap: 0.9rem; }
}

.list-body {
    flex: 1 1 auto;
    min-width: 0;
    padding-inline-end: 0.5rem;
    padding-block: 0.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

/* Badges and price share the last line, and margin-top: auto holds it against
   the bottom of the card however long the description is */
.list-foot {
    margin-top: auto;
    padding-top: 0.4rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.6rem;
}

.list-price {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-inline-start: auto;
    line-height: 1.15;
    text-align: end;
}
/* ── Item cards ──────────────────────────────────────────── */

.item-media {
    position: relative;
    overflow: hidden;
    background: rgba(8, 26, 44, 0.45);
}

.item-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.glass-hover:hover .item-media img {
    transform: scale(1.07);
}

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.3rem;
    border-radius: 999px;
    padding: 0.25rem 0.6rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.badge-new     { background: rgba(202, 207, 203, 0.92); color: var(--splash-bg); }
.badge-spicy   { background: rgba(214, 74, 52, 0.85);  color: #fff; }
.badge-veg     { background: rgba(74, 168, 112, 0.85); color: #fff; }
.badge-save    { background: rgba(240, 178, 66, 0.9);  color: var(--splash-bg); }

.price-old {
    text-decoration: line-through;
    opacity: 0.5;
    font-size: 0.85em;
}

.sold-out {
    filter: grayscale(0.85);
    opacity: 0.55;
}

/* ── Hero wordmark ───────────────────────────────────────── */

/* Stands in for the brand name, so it scales with the viewport
   but never outgrows the column it sits in */
.hero-logo {
    display: block;
    /* Logical margin: hugs the left in LTR, the right in RTL */
    margin-inline: 0 auto;
    height: auto;
    width: min(62vw, 210px);
    max-width: 100%;
}

@media (min-width: 640px) {
    .hero-logo { width: 280px; }
}
/* ── Section headings ────────────────────────────────────── */

.rule {
    height: 1px;
    background: var(--glass-border);
}

.eyebrow {
    letter-spacing: 0.26em;
    text-transform: uppercase;
    font-size: 0.68rem;
    color: var(--ink-faint);
}

body[dir='rtl'] .eyebrow {
    letter-spacing: 0.08em;
}

/* ── Modal ───────────────────────────────────────────────── */

.modal-backdrop {
    background: rgba(4, 18, 31, 0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* ── Scrollbar ───────────────────────────────────────────── */

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(202, 207, 203, 0.28);
    border-radius: 99px;
    border: 3px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(202, 207, 203, 0.5); background-clip: content-box; }

::selection { background: var(--accent); color: var(--splash-bg); }

/* Alpine: hide elements until the component is ready */
[x-cloak] { display: none !important; }

/* ── Accessibility ───────────────────────────────────────── */

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Print: a clean paper menu straight from the browser ── */

@media print {
    .page-bg, .page-grain, .splash, .no-print { display: none !important; }
    body { background: #fff; color: #111; }
    .glass {
        background: #fff !important;
        border: 1px solid #ddd !important;
        backdrop-filter: none !important;
        break-inside: avoid;
    }
}