/* ============================================
   Ramadan Decorations — Garland with Lanterns, Crescents & Stars
   ============================================ */

.ramadan-garland {
    position: relative;
    width: 100%;
    height: 120px;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
    margin-top: -4px;
    margin-bottom: -8px;
}

/* --- Multiple catenary strings (6 layers) --- */
.garland-string {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 42px;
    background:
        /* 1: Main solid — deep, 5 U-droops */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 30' preserveAspectRatio='none'%3E%3Cpath d='M0,4 C60,28 180,28 240,4 C300,28 420,28 480,4 C540,28 660,28 720,4 C780,28 900,28 960,4 C1020,28 1140,28 1200,4' fill='none' stroke='%23c8a97e' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center top / 100% 30px,
        /* 2: Dashed — medium, 4 wider U-droops */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 22' preserveAspectRatio='none'%3E%3Cpath d='M0,3 C75,20 225,20 300,3 C375,20 525,20 600,3 C675,20 825,20 900,3 C975,20 1125,20 1200,3' fill='none' stroke='%23c8a97e' stroke-width='0.9' stroke-dasharray='6,4' opacity='0.5'/%3E%3C/svg%3E") no-repeat center 2px / 96% 22px,
        /* 3: Dotted (round dots) — shallow, 6 small U-droops */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 16' preserveAspectRatio='none'%3E%3Cpath d='M0,2 C50,14 150,14 200,2 C250,14 350,14 400,2 C450,14 550,14 600,2 C650,14 750,14 800,2 C850,14 950,14 1000,2 C1050,14 1150,14 1200,2' fill='none' stroke='%23c8a97e' stroke-width='2' stroke-dasharray='1,10' stroke-linecap='round' opacity='0.35'/%3E%3C/svg%3E") no-repeat center 0 / 92% 16px,
        /* 4: Thin solid — slight, 3 wide U-droops */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 24' preserveAspectRatio='none'%3E%3Cpath d='M0,3 C100,20 300,20 400,3 C500,20 700,20 800,3 C900,20 1100,20 1200,3' fill='none' stroke='%23c8a97e' stroke-width='0.7' opacity='0.4'/%3E%3C/svg%3E") no-repeat center 4px / 100% 24px,
        /* 5: Dotted — deep sag, 4 U-droops */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 38' preserveAspectRatio='none'%3E%3Cpath d='M0,2 C75,36 225,36 300,2 C375,36 525,36 600,2 C675,36 825,36 900,2 C975,36 1125,36 1200,2' fill='none' stroke='%23c8a97e' stroke-width='1.8' stroke-dasharray='2,8' stroke-linecap='round' opacity='0.4'/%3E%3C/svg%3E") no-repeat center 0 / 100% 38px,
        /* 6: Fine dots — very deep, 3 wide U-droops */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0,2 C100,38 300,38 400,2 C500,38 700,38 800,2 C900,38 1100,38 1200,2' fill='none' stroke='%23c8a97e' stroke-width='1.5' stroke-dasharray='1.5,12' stroke-linecap='round' opacity='0.3'/%3E%3C/svg%3E") no-repeat center 0 / 94% 40px;
}

/* --- Hanging item — starts at --top (catenary position) --- */
.garland-item {
    position: absolute;
    top: var(--top, 4px);
    left: var(--left, 50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    transform-origin: top center;
    animation: sway var(--duration, 4s) ease-in-out infinite;
    animation-delay: var(--delay, 0s);
}

/* ======================
   LANTERN — star on thread + flipped lantern
   ====================== */

/* Thread from catenary attachment to lantern, star near bottom */
.garland-item.lantern::before {
    content: '';
    display: block;
    width: 16px;
    height: var(--height, 20px);
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10,2 L11.8,7.5 L17.5,8.2 L13.2,12 L14.5,17.8 L10,15 L5.5,17.8 L6.8,12 L2.5,8.2 L8.2,7.5 Z' fill='%23c8a97e'/%3E%3C/svg%3E") no-repeat center bottom / 14px 14px,
        linear-gradient(#c8a97e, #c8a97e) no-repeat center / 1px 100%;
}

/* Lantern SVG flipped — with connecting line to thread */
.garland-item.lantern::after {
    content: '';
    display: block;
    flex-shrink: 0;
    width: calc(28px * var(--size, 1));
    height: calc(40px * var(--size, 1));
    transform: scaleY(-1);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 56' fill='none'%3E%3Cline x1='20' y1='48' x2='20' y2='56' stroke='%23c8a97e' stroke-width='1'/%3E%3Cpath d='M20,0 L20,3' stroke='%23b8995e' stroke-width='1.2'/%3E%3Cpath d='M14,6 Q14,3 20,3 Q26,3 26,6' fill='%23c8a97e'/%3E%3Crect x='11' y='6' width='18' height='30' rx='3' fill='%23c8a97e' opacity='0.9'/%3E%3Crect x='14' y='9' width='5' height='24' rx='1.5' fill='%23F5EFE6' opacity='0.45'/%3E%3Crect x='21' y='9' width='5' height='24' rx='1.5' fill='%23F5EFE6' opacity='0.45'/%3E%3Cellipse cx='20' cy='21' rx='6' ry='10' fill='%23F5EFE6' opacity='0.2'/%3E%3Cpath d='M11,36 Q11,44 20,48 Q29,44 29,36' fill='%23c8a97e'/%3E%3Cline x1='11' y1='12' x2='29' y2='12' stroke='%23b8995e' stroke-width='0.7'/%3E%3Cline x1='11' y1='30' x2='29' y2='30' stroke='%23b8995e' stroke-width='0.7'/%3E%3Ccircle cx='20' cy='48' r='1.2' fill='%23b8995e'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ======================
   CRESCENT MOON — two-circle approach
   ====================== */

/* Thread from catenary to moon */
.garland-item.moon::before {
    content: '';
    display: block;
    width: 1px;
    height: var(--height, 20px);
    background: #c8a97e;
    opacity: 0.7;
}

/* Crescent — shifted right so visual center aligns with thread */
.garland-item.moon::after {
    content: '';
    display: block;
    flex-shrink: 0;
    width: calc(24px * var(--size, 1));
    height: calc(28px * var(--size, 1));
    transform: translateX(20%);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 0 40 36'%3E%3Ccircle cx='14' cy='18' r='16' fill='%23c8a97e'/%3E%3Ccircle cx='23' cy='18' r='13' fill='%23FAF7F2'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* --- Sway --- */
@keyframes sway {
    0%, 100% { transform: rotate(-2deg); }
    50%      { transform: rotate(2deg); }
}

.garland-item.lantern { --duration: 4.5s; }
.garland-item.moon    { --duration: 3.8s; }

/* Lantern without star on thread */
.garland-item.lantern.no-star::before {
    background: linear-gradient(#c8a97e, #c8a97e) no-repeat center / 1px 100%;
}

/* ===========================================
   Responsive
   =========================================== */

@media (max-width: 480px) {
    .ramadan-garland {
        height: 110px;
    }
    .garland-item.lantern::after {
        width: calc(24px * var(--size, 1));
        height: calc(34px * var(--size, 1));
    }
    .garland-item.moon::after {
        width: calc(20px * var(--size, 1));
        height: calc(24px * var(--size, 1));
    }
    .garland-item.lantern::before {
        width: 14px;
        background:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10,2 L11.8,7.5 L17.5,8.2 L13.2,12 L14.5,17.8 L10,15 L5.5,17.8 L6.8,12 L2.5,8.2 L8.2,7.5 Z' fill='%23c8a97e'/%3E%3C/svg%3E") no-repeat center bottom / 12px 12px,
            linear-gradient(#c8a97e, #c8a97e) no-repeat center / 1px 100%;
    }
    .garland-item.desktop-only {
        display: none;
    }
}

@media (min-width: 769px) {
    .ramadan-garland {
        height: 145px;
    }
    .garland-item.lantern::after {
        width: calc(34px * var(--size, 1));
        height: calc(48px * var(--size, 1));
    }
    .garland-item.moon::after {
        width: calc(28px * var(--size, 1));
        height: calc(34px * var(--size, 1));
    }
    .garland-item.lantern::before {
        width: 18px;
        background:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10,2 L11.8,7.5 L17.5,8.2 L13.2,12 L14.5,17.8 L10,15 L5.5,17.8 L6.8,12 L2.5,8.2 L8.2,7.5 Z' fill='%23c8a97e'/%3E%3C/svg%3E") no-repeat center bottom / 16px 16px,
            linear-gradient(#c8a97e, #c8a97e) no-repeat center / 1px 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .garland-item { animation: none; }
}

/* ============================================
   Ramadan Arches (Mihrab frames) on Menu Cards
   Condition: body.ramadan-frames-active
   Frame styles via: body[data-ramadan-frame="arch1"] etc.
   The arch top extends ABOVE the card image.
   ============================================ */

/* Space above image for the arch top to extend into */
body.ramadan-frames-active .menu-item {
    padding-top: 55px;
}

/* Allow arch to overflow above image area */
body.ramadan-frames-active .item-image {
    overflow: visible;
}

/* Arch overlay — extends above the image */
body.ramadan-frames-active .item-image::after {
    content: '';
    position: absolute;
    top: -55px;
    left: -3px;
    right: -3px;
    bottom: 0;
    z-index: 2;
    pointer-events: none;
}

/* Delivery page — same approach */
body.ramadan-frames-active .menu-item-image {
    position: relative;
    overflow: visible;
}

body.ramadan-frames-active .menu-item-image::after {
    content: '';
    position: absolute;
    top: -55px;
    left: -3px;
    right: -3px;
    bottom: 0;
    z-index: 2;
    pointer-events: none;
}

/* --- Frame style: arch1 (geometric SVG arch) --- */
body.ramadan-frames-active[data-ramadan-frame="arch1"] .item-image::after,
body.ramadan-frames-active[data-ramadan-frame="arch1"] .menu-item-image::after {
    background: url('/images/ramadan-arch.svg') no-repeat center top / 100% 100%;
}

/* --- Frame style: arch2 (golden detailed PNG arch) --- */
body.ramadan-frames-active[data-ramadan-frame="arch2"] .item-image::after,
body.ramadan-frames-active[data-ramadan-frame="arch2"] .menu-item-image::after {
    background: url('/images/ramadan-arch-1.png') no-repeat center top / 100% 100%;
}

/* Raise badges above arch overlay */
body.ramadan-frames-active .item-badge,
body.ramadan-frames-active .item-ribbon {
    z-index: 3;
}

body.ramadan-frames-active .menu-item-image .item-badge {
    z-index: 3;
}

/* List view — hide arches (too small) */
body.ramadan-frames-active .menu-grid.list-view .item-image::after,
body.ramadan-frames-active .menu-grid.list-view .menu-item-image::after {
    display: none;
}

body.ramadan-frames-active .menu-grid.list-view .menu-item {
    padding-top: 0;
}

/* No-image cards — skip arch */
body.ramadan-frames-active .menu-item.no-image .item-image::after,
body.ramadan-frames-active .menu-item.no-image .menu-item-image::after {
    display: none;
}

body.ramadan-frames-active .menu-item.no-image {
    padding-top: 0;
}

/* ============================================
   Ramadan Themed Loading Screen
   Condition: .loading-screen.ramadan-loading
   Uses: /images/ramadan-loading-bg.jpg
   ============================================ */

.loading-screen.ramadan-loading {
    background: #f5efe6 url('/images/ramadan-loading-bg.jpg') no-repeat center center;
    background-size: cover;
    justify-content: flex-end;
    padding-bottom: 15vh;
}

/* Hide default elements that don't fit */
.loading-screen.ramadan-loading .loading-icon {
    display: none;
}

.loading-screen.ramadan-loading .loading-status {
    display: none;
}

/* Restaurant name over the image */
.loading-screen.ramadan-loading .loading-brand {
    position: relative;
    z-index: 1;
    color: #8b6d3a;
    font-size: 1.5em;
    text-shadow: 0 1px 4px rgba(255, 255, 255, 0.6);
    letter-spacing: 0.04em;
}

.loading-screen.ramadan-loading .loading-brand span {
    color: #a0814e;
    font-style: italic;
}

/* Crescent — hidden, not needed with image background */
.loading-ramadan-crescent {
    display: none;
}