/* ============================================================
   Meison Bistro — Custom Component Styles
   Tailwind utilities come from CDN script in layout.
   ============================================================ */

/* --- Base --- */
[x-cloak] { display: none !important; }
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
.line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* --- Disable pinch-to-zoom & double-tap zoom on mobile/tablet ---
   iOS Safari ignores user-scalable=no, but respects touch-action.
   pan-x pan-y = allow scroll, block pinch/double-tap zoom. */
html, body {
    touch-action: pan-x pan-y;
}
/* Prevent iOS auto-zoom when focusing form inputs (only triggers if font < 16px) */
input, select, textarea {
    font-size: 16px;
}

/* --- Hide scrollbar (keep scroll functionality) --- */
.scrollbar-hide,
.scrollbar-hide * {
    -ms-overflow-style: none !important;   /* IE / Edge */
    scrollbar-width: none !important;      /* Firefox */
}
.scrollbar-hide::-webkit-scrollbar,
.scrollbar-hide::-webkit-scrollbar-thumb,
.scrollbar-hide::-webkit-scrollbar-track,
.scrollbar-hide::-webkit-scrollbar-corner,
.scrollbar-hide *::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    display: none !important;              /* Chrome / Safari / Opera */
    -webkit-appearance: none !important;
}

/* --- Product image shimmer (while loading) --- */
.product-card picture {
    position: relative;
    display: block;
    width: 100%; height: 100%;
}
.product-card picture::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(
        90deg,
        rgba(245, 237, 224, 0) 0%,
        rgba(212, 168, 75, 0.12) 50%,
        rgba(245, 237, 224, 0) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.6s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
    opacity: 1;
    transition: opacity 300ms ease-out;
}
.product-card picture img {
    position: relative;
    z-index: 1;
}
/* Hide shimmer once img has dimensions (loaded) */
.product-card picture:has(img[src]:not([src=""])) {
    /* fallback for browsers without :has — keeps shimmer until JS removes parent */
}
.product-card picture img.is-loaded ~ ::before,
.product-card.img-ready picture::before {
    opacity: 0;
    animation: none;
}
@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* --- Cart sidecart — mobile-safe sizing & interaction --- */
.cart-aside {
    /* Use dynamic viewport height so iOS Safari's URL bar doesn't hide the footer.
       Fallbacks: 100vh for older browsers, then svh for very old iOS. */
    height: 100vh;
    height: 100svh;       /* small viewport when URL bar visible */
    height: 100dvh;       /* dynamic — follows URL bar collapse */
    max-height: 100vh;
    max-height: 100dvh;
    /* Stable layout when the on-screen keyboard appears in the delivery modal */
    overscroll-behavior: contain;
}
.cart-footer {
    /* Respect iPhone safe-area (home indicator) */
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
}
.cart-cta {
    /* Remove 300ms tap delay on iOS, prevent accidental double-tap zoom */
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(212, 168, 75, 0.2);
    /* Ensure tap target is at least 44pt (Apple HIG) */
    min-height: 52px;
    /* Make sure buttons are always interactable above anything else inside the cart */
    position: relative;
    z-index: 1;
}
/* Delivery modal must appear ABOVE the cart sidecart (z:50) */
.cart-modal-backdrop {
    z-index: 60;
    /* Same dynamic viewport handling */
    height: 100vh;
    height: 100dvh;
    /* Stop the underlying page from scrolling when the modal is open */
    overscroll-behavior: contain;
}

/* --- Hero video banner --- */
.hero-video video {
    /* Smooth fade-in when video starts playing */
    animation: hero-video-in 900ms cubic-bezier(.2,.7,.2,1) both;
    /* Aspect-aware sizing: video keeps its native ratio, full width */
    width: 100%;
    max-height: 80vh;
}
.hero-video {
    /* Keep the section flush to its surroundings */
    line-height: 0;
}
@keyframes hero-video-in {
    from { opacity: 0; transform: scale(1.02); }
    to   { opacity: 1; transform: scale(1); }
}
@media (max-width: 640px) {
    .hero-video video {
        max-height: 70vh;
    }
}
@media (prefers-reduced-motion: reduce) {
    .hero-video video { animation: none; }
}

/* --- Premium menu search --- */
.menu-search {
    position: relative;
}
.menu-search-glow {
    background: linear-gradient(135deg,
        rgba(212,168,75,0.0) 0%,
        rgba(212,168,75,0.18) 50%,
        rgba(212,168,75,0.0) 100%);
    opacity: 0;
    transition: opacity 300ms cubic-bezier(.2,.7,.2,1);
    filter: blur(8px);
    z-index: 0;
}
.menu-search:focus-within .menu-search-glow {
    opacity: 1;
}
.menu-search-input {
    box-shadow: 0 1px 2px rgba(23,42,58,0.04);
}
.menu-search-input:focus {
    box-shadow:
        0 8px 24px -8px rgba(212,168,75,0.35),
        0 2px 4px rgba(23,42,58,0.06),
        inset 0 0 0 1px rgba(212,168,75,0.4);
}
.menu-search-input::placeholder {
    font-style: italic;
    letter-spacing: 0.02em;
}

/* --- Reveal Animations (triggered by Alpine x-intersect) --- */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 800ms cubic-bezier(.2,.7,.2,1),
                transform 800ms cubic-bezier(.2,.7,.2,1);
    will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: translateY(0); }

.reveal-left  { transform: translateX(-30px); }
.reveal-right { transform: translateX(30px); }
.reveal-left.is-in,
.reveal-right.is-in { transform: translateX(0); }

.reveal-scale { transform: scale(.94); }
.reveal-scale.is-in { transform: scale(1); }

/* --- Ken Burns hero zoom --- */
@keyframes kenburns {
    0%   { transform: scale(1)    translate(0, 0); }
    100% { transform: scale(1.12) translate(-1%, -2%); }
}
.kenburns { animation: kenburns 22s ease-out infinite alternate; }

/* --- Floating animation --- */
@keyframes float {
    0%, 100% { transform: translateY(-50%) translateX(-50%); }
    50%       { transform: translateY(calc(-50% - 6px)) translateX(-50%); }
}
@keyframes float-simple {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-6px); }
}
.animate-float { animation: float-simple 3s ease-in-out infinite; }

/* --- Underline grow --- */
.link-underline {
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size .35s;
}
.link-underline:hover { background-size: 100% 1px; }

/* --- Marquee text strip --- */
@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.marquee > div {
    animation: marquee 30s linear infinite;
    display: flex;
    gap: 4rem;
    width: max-content;
}

/* --- Card hover lift --- */
.card-lift {
    transition: transform .4s cubic-bezier(.2,.7,.2,1),
                box-shadow .4s;
}
.card-lift:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px -20px rgba(12,28,42,.35);
}

/* --- Decorative divider with lines --- */
.divider-ornament {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: #bf9437;
}
.divider-ornament::before,
.divider-ornament::after {
    content: '';
    flex: 1;
    height: 1px;
    background: currentColor;
    opacity: .35;
}

/* --- Image zoom (base + hover) ---
   --zoom        : set per-product via inline style (default 1.0 = normal)
   --zoom-hover  : auto-computed in PHP as --zoom * 1.07
   The class must be on the CONTAINER div (not the img itself) so that
   overflow:hidden clips the scaled element correctly. */
.img-zoom { overflow: hidden; }
.img-zoom img,
.img-zoom picture img {
    transform: scale(var(--zoom, 1));
    transform-origin: center center;
    transition: transform 700ms cubic-bezier(.2,.7,.2,1);
}
.img-zoom:hover img,
.img-zoom:hover picture img {
    transform: scale(var(--zoom-hover, 1.07));
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    .reveal, .reveal-left, .reveal-right, .reveal-scale {
        opacity: 1; transform: none; transition: none;
    }
    .kenburns, .animate-float, .marquee > div {
        animation: none;
    }
}

/* --- Admin sidebar active state helper --- */
.admin-nav-active {
    background-color: #1e3a50;
    color: #fbf7ee;
}

/* ============================================================
   HERO BRAND LOCKUP — now the primary hero heading (replaces
   both the old welcome paragraphs AND the old "Kush të do..."
   slogan). "MEISON BISTRO" sweeps with a slow gold shimmer
   (text-clip gradient), sized as the page's main <h1>; the
   poetic line beneath rises softly into view in the brand's
   script font, just after the page settles.
   ============================================================ */
/* Hero brand lockup — always centred, compact height */
.hero-brandblock { margin-top: 0; text-align: center; }

.hero-brand-name {
    font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
    font-weight: 500;
    font-size: clamp(1.9rem, 5vw, 3.4rem);
    letter-spacing: 0.22em;
    line-height: 1.1;
    margin: 0;
    display: inline-block;
    background: linear-gradient(100deg, #a07c2a 0%, #d4a84b 30%, #f7e6bc 50%, #d4a84b 70%, #a07c2a 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: hero-brand-shimmer 5.5s ease-in-out infinite;
    will-change: background-position;
}

@keyframes hero-brand-shimmer {
    0%   { background-position: 220% 50%; }
    50%  { background-position: 0% 50%; }
    100% { background-position: -220% 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-brand-name { animation: none; background-position: 0% 50%; }
}

/* ============================================================
   FOOTER TAGLINE — elegant script font + shimmer animation
   ============================================================ */

.footer-tagline {
    font-family: 'Sacramento', 'Dancing Script', cursive;
    /* Sacramento is visually thin — push the min up so it doesn't look tiny on mobile */
    font-size: clamp(3.2rem, 9vw, 4.4rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: 0.01em;
    margin: 0;
    /* Allow long tagline to wrap on narrow screens */
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: none;
}

.footer-tagline-text {
    display: inline-block;
    background: linear-gradient(
        90deg,
        #172a3a 0%,
        #172a3a 30%,
        #bf9437 50%,
        #172a3a 70%,
        #172a3a 100%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: footer-shimmer 6s ease-in-out infinite;
    will-change: background-position;
    padding: 0 0.15em 0.1em;
}

@keyframes footer-shimmer {
    0%   { background-position: 200% 50%; }
    50%  { background-position:   0% 50%; }
    100% { background-position: -200% 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .footer-tagline-text {
        animation: none;
        background: none;
        -webkit-text-fill-color: #172a3a;
        color: #172a3a;
    }
}

/* ============================================================
   "POROSIT" BUTTON — fill-from-left + lift + click pulse
   ============================================================ */

.btn-porosit {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background-color: transparent;
    transition: color 0.35s cubic-bezier(.2,.7,.2,1),
                transform 0.35s cubic-bezier(.2,.7,.2,1),
                box-shadow 0.35s cubic-bezier(.2,.7,.2,1),
                border-color 0.35s cubic-bezier(.2,.7,.2,1);
    cursor: pointer;
    will-change: transform;
}

/* Fill swipe from left */
.btn-porosit::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #172a3a;
    transform: translateX(-101%);
    transition: transform 0.45s cubic-bezier(.7,.2,.2,1);
    z-index: -1;
}

.btn-porosit:hover::before,
.btn-porosit:focus-visible::before {
    transform: translateX(0);
}

.btn-porosit:hover,
.btn-porosit:focus-visible {
    color: #fbf7ee;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -10px rgba(12,28,42,0.35);
    border-color: #172a3a;
    outline: none;
}

/* Subtle pulse on label */
.btn-porosit-label {
    display: inline-block;
    position: relative;
    transition: transform 0.35s cubic-bezier(.2,.7,.2,1), letter-spacing 0.35s cubic-bezier(.2,.7,.2,1);
}

.btn-porosit:hover .btn-porosit-label {
    letter-spacing: 0.22em;
}

/* Click pulse — radial ripple */
.btn-porosit:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px -6px rgba(12,28,42,0.4);
}

.btn-porosit:active::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(212,168,75,0.5) 0%, transparent 60%);
    animation: btn-ripple 0.5s ease-out forwards;
    pointer-events: none;
}

@keyframes btn-ripple {
    0%   { opacity: 1; transform: scale(0.4); }
    100% { opacity: 0; transform: scale(1.4); }
}

/* Gentle attention pulse when idle (one cycle per 6s) */
@keyframes btn-porosit-attention {
    0%, 90%, 100% { box-shadow: 0 0 0 0 rgba(23,42,58,0); }
    93%           { box-shadow: 0 0 0 6px rgba(23,42,58,0.08); }
    96%           { box-shadow: 0 0 0 0 rgba(23,42,58,0); }
}

.btn-porosit {
    animation: btn-porosit-attention 6s ease-in-out infinite;
}

.btn-porosit:hover {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .btn-porosit,
    .btn-porosit::before,
    .btn-porosit-label {
        animation: none;
        transition: background-color 0.2s, color 0.2s;
    }
    .btn-porosit:hover {
        background-color: #172a3a;
        color: #fbf7ee;
    }
    .btn-porosit::before { display: none; }
}

/* ============================================================
   PRODUCT CARDS (menu) — soft shadow + lift + side accent
   ============================================================ */

.product-card {
    position: relative;
    box-shadow:
        0 1px 3px rgba(12, 28, 42, 0.06),
        0 8px 24px -12px rgba(12, 28, 42, 0.12);
    transition:
        transform 0.5s cubic-bezier(.2,.7,.2,1),
        box-shadow 0.5s cubic-bezier(.2,.7,.2,1);
    will-change: transform;
}

/* Gold accent stripe on the left edge — fades in & extends on hover */
.product-card::before {
    content: '';
    position: absolute;
    top: 12%;
    bottom: 12%;
    left: 0;
    width: 3px;
    background: linear-gradient(180deg, transparent 0%, #d4a84b 30%, #bf9437 70%, transparent 100%);
    border-radius: 0 3px 3px 0;
    opacity: 0;
    transform: scaleY(0.5);
    transform-origin: center;
    transition:
        opacity 0.5s cubic-bezier(.2,.7,.2,1),
        transform 0.6s cubic-bezier(.2,.7,.2,1);
    pointer-events: none;
}

/* Soft outer glow on hover */
.product-card::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: radial-gradient(circle at 0% 50%, rgba(212, 168, 75, 0.18) 0%, transparent 40%);
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(.2,.7,.2,1);
    pointer-events: none;
    z-index: -1;
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 4px 12px rgba(12, 28, 42, 0.08),
        0 24px 48px -20px rgba(12, 28, 42, 0.25),
        0 0 0 1px rgba(212, 168, 75, 0.15);
}

.product-card:hover::before {
    opacity: 1;
    transform: scaleY(1);
}

.product-card:hover::after {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .product-card { transition: box-shadow 0.2s; }
    .product-card:hover { transform: none; }
    .product-card::before, .product-card::after { transition: opacity 0.2s; }
}

/* ============================================================
   ABOUT PAGE — value cards with soft shadow + lift on hover
   ============================================================ */

.value-card {
    box-shadow:
        0 2px 6px rgba(12, 28, 42, 0.04),
        0 12px 30px -16px rgba(12, 28, 42, 0.12);
    transition:
        transform 0.5s cubic-bezier(.2,.7,.2,1),
        box-shadow 0.5s cubic-bezier(.2,.7,.2,1);
    will-change: transform;
}

.value-card:hover {
    transform: translateY(-6px);
    box-shadow:
        0 4px 12px rgba(12, 28, 42, 0.06),
        0 30px 60px -24px rgba(12, 28, 42, 0.22),
        0 0 0 1px rgba(212, 168, 75, 0.2);
}

/* Stats numbers — slide-up entry */
.stat-in {
    animation: stat-pop 0.8s cubic-bezier(.2,.7,.2,1) backwards;
}

@keyframes stat-pop {
    0%   { opacity: 0; transform: translateY(20px) scale(0.92); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .value-card { transition: box-shadow 0.2s; }
    .value-card:hover { transform: none; }
    .stat-in { animation: none; }
}