/* =========================================
   CSS Variables & Resets
   ========================================= */
:root {
    --primary: #f5a623; /* Golden Yellow */
    --primary-hover: #e0961c;
    --secondary: #111827; /* Dark Navy */
    --whatsapp: #22c55e;
    --whatsapp-hover: #16a34a;
    --text-dark: #1f2937;
    --text-light: #6b7280;
    --bg-light: #f9fafb;
    --white: #ffffff;
    --border: #e5e7eb;

    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-premium: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.08);
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    color: var(--text-dark);
    line-height: 1.5;
    background-color: var(--white);
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--secondary);
    line-height: 1.2;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

ul {
    list-style: none;
}

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

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.section-padding {
    padding: 80px 0;
}

.bg-light {
    background-color: var(--bg-light);
}

.text-yellow {
    color: var(--primary);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--bg-light);
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

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

/* On-load Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.fade-in-load {
    opacity: 0;
    animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.hero-content h1.fade-in-load {
    animation-delay: 0.15s;
}
.hero-content .subtitle.fade-in-load {
    animation-delay: 0.25s;
}
.hero-content .hero-features.fade-in-load {
    animation-delay: 0.4s;
}
.hero-content .hero-actions.fade-in-load {
    animation-delay: 0.55s;
}
/* hero-image fade-in removed — image is now a background */

/* Scroll Animations CSS */
.scroll-animate {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-animate.in-view {
    opacity: 1;
    transform: none;
}

/* Element-specific starting transforms — apply only BEFORE in-view */
.about-text.scroll-animate:not(.in-view)  { transform: translateX(-48px); }
.about-image.scroll-animate:not(.in-view) { transform: translateX(48px); }
.plan-card.scroll-animate:not(.in-view)   { transform: scale(0.92) translateY(28px); }
.stat-box.scroll-animate:not(.in-view)    { transform: scale(0.85) translateY(20px); }

/* On mobile, disable side-slide transforms — they cause overflow on narrow screens */
@media (max-width: 768px) {
    .about-text.scroll-animate:not(.in-view),
    .about-image.scroll-animate:not(.in-view) {
        transform: translateY(36px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .scroll-animate {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* =========================================
   Buttons
   ========================================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 50px; /* Modern pill style */
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

/* Glow/Shine effect */
.btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    width: 200%;
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg);
    transition: 0.75s;
    opacity: 0;
}

.btn:hover::after {
    left: 125%;
    opacity: 1;
}

.btn-primary {
    background-color: var(--primary);
    color: var(--white);
    box-shadow: 0 4px 15px rgba(245, 166, 35, 0.3);
}

.btn-primary:hover {
    background-color: var(--primary-hover);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(245, 166, 35, 0.5);
}

.btn-whatsapp {
    background-color: var(--whatsapp);
    color: var(--white);
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3);
}

.btn-whatsapp:hover {
    background-color: var(--whatsapp-hover);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(34, 197, 94, 0.5);
}

.btn-outline {
    background-color: transparent;
    border-color: var(--whatsapp);
    color: var(--whatsapp);
}

.btn-outline:hover {
    background-color: var(--whatsapp);
    color: var(--white);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(34, 197, 94, 0.3);
}

.btn-full {
    width: 100%;
}

.btn-small {
    padding: 10px 20px;
    font-size: 0.875rem;
}

/* =========================================
   Header & Navigation
   ========================================= */
header {
    background-color: var(--white);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-sm);
    padding: 15px 0;
    transition: padding 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.35s ease;
}

header.scrolled {
    padding: 8px 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Override container constraints — Logo flush to screen edge */
header > .header-container {
    max-width: 100% !important;
    padding-left: 20px;
    padding-right: 20px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.logo:hover {
    transform: scale(1.03);
}

.logo img {
    height: 68px;
    width: auto;
    flex-shrink: 0;
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.brand-name {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 900;
    letter-spacing: -0.5px;
    line-height: 1.05;

    /* Premium golden gradient with shimmer animation */
    background: linear-gradient(
        90deg,
        #f5a623 0%,
        #fbbf24 25%,
        #f59e0b 50%,
        #fbbf24 75%,
        #f5a623 100%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: brand-shimmer 4s ease-in-out infinite;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.12));
}

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

.brand-tagline {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--secondary);
    letter-spacing: 3.5px;
    text-transform: uppercase;
    margin-top: 5px;
    opacity: 0.7;
}

.main-nav {
    display: flex;
    gap: 30px;
}

.main-nav a {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--secondary);
    position: relative;
    padding: 5px 0;
}

.main-nav a:hover, .main-nav a.active {
    color: var(--primary);
}

.main-nav a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.main-nav a:hover::after, .main-nav a.active::after {
    width: 100%;
}

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--secondary);
    cursor: pointer;
}

/* =========================================
   Hero Section
   ========================================= */
.hero {
    position: relative;
    overflow: hidden;
    background-color: var(--secondary);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 0;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.78) 0%,
        rgba(0, 0, 0, 0.55) 55%,
        rgba(0, 0, 0, 0.35) 100%
    );
    z-index: 1;
}

.hero-container {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 2;
    padding-top: 130px;
    padding-bottom: 130px;
}

.hero-content {
    max-width: 680px;
    z-index: 2;
}

/* ---- Hero Greeting Badge (top-left of hero) ---- */
.hero-greeting-badge {
    position: absolute;
    top: 28px;
    left: 32px;
    z-index: 3;
    font-family: var(--font-body);
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-shadow: 0 1px 6px rgba(0,0,0,0.55);
}

.hero-greeting-badge span {
    font-size: 1rem;
}

.hero h1 {
    font-size: 4.2rem;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 20px;
    letter-spacing: -1.5px;
    line-height: 1.1;
    color: var(--white);
}

.hero h1 .highlight {
    color: var(--primary);
}

.hero .subtitle {
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 40px;
    font-weight: 500;
    line-height: 1.6;
}

.hero-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.feature-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    transition: transform 0.3s ease;
}

.feature-badge:hover {
    transform: translateY(-5px);
}

.feature-badge i {
    font-size: 1.8rem;
    color: var(--primary); /* Accentuate icons with gold */
    background: rgba(245, 166, 35, 0.1);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.feature-badge:hover i {
    background: var(--primary);
    color: var(--white);
}

.feature-badge span {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--white);
    line-height: 1.3;
}

.feature-badge small {
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.75rem;
    display: block;
    margin-top: 2px;
}

.hero-actions {
    display: flex;
    gap: 20px;
}

/* hero-image panel removed — now uses full-width background */

/* =========================================
   Section Headers
   ========================================= */
.section-header {
    text-align: center;
    margin-bottom: 50px;
}

.section-header h2 {
    font-size: 2.5rem;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
    padding-bottom: 15px;
    letter-spacing: -0.5px;
}

.section-header h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: var(--primary);
}

/* =========================================
   Meal Plans Section
   ========================================= */
.plans-grid {
    display: grid;
    /* Each track sized 260px–320px (capped) so cards don't stretch absurdly
       wide when there are only 1–3 plans. justify-content:center then centers
       the whole row of cards in the container — 3 plans look balanced, 4 still
       fill the row, and the info-card-wrapper now lives outside this grid so
       it can't force a phantom 4th column when there are only 3 plans. */
    grid-template-columns: repeat(auto-fit, minmax(260px, 320px));
    justify-content: center;
    gap: 30px;
    align-items: stretch;
}

.plan-card {
    background: var(--white);
    border-radius: 20px;
    padding: 40px 30px;
    box-shadow: var(--shadow-md);
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

.plan-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-premium);
}

.plan-card.popular {
    border: 2px solid var(--primary);
    transform: scale(1.03);
    z-index: 10;
    box-shadow: var(--shadow-lg);
}

.plan-card.popular:hover {
    transform: scale(1.03) translateY(-10px);
}

.popular-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--primary);
    color: var(--white);
    padding: 6px 18px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 10px rgba(245, 166, 35, 0.3);
}

.plan-header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

.plan-header h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    letter-spacing: -0.5px;
}

.plan-header p {
    color: var(--text-light);
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.price {
    font-size: 3rem;
    font-weight: 800;
    color: var(--whatsapp);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    font-family: var(--font-heading);
}

.price .currency {
    font-size: 1.5rem;
    margin-top: 10px;
}

.price .period {
    font-size: 1rem;
    color: var(--text-light);
    font-weight: 500;
    margin-top: 25px;
}

.plan-features {
    margin-bottom: 30px;
    flex: 1;
}

.plan-features li {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
}

.plan-features li i {
    color: var(--primary);
    font-size: 0.85rem;
}

/* ============================================
   "OR" Choice Highlight (e.g., "OR Dinner")
   - NOTHING extends outside the border
   - Triple-blink + sustained pop + rest cycle
   - Subtitle OR and features OR blink together
   ============================================ */

/* The list item with "OR ..." */
.plan-features li.plan-feature-or {
    margin: 8px 0;
    padding: 10px 14px;
    background: rgba(245, 166, 35, 0.04);
    border: 2px solid transparent;        /* invisible until blink */
    border-radius: 12px;
    gap: 12px;
    font-weight: 600;
    position: relative;
    overflow: hidden;                     /* keep everything inside */
    box-shadow: none;                     /* nothing extends outside */
    cursor: default;
    animation: or-row-blink 3.5s ease-in-out infinite;
}

.plan-features li.plan-feature-or .or-rest {
    color: var(--text-dark);
}

/* Triple-flash blink, then sustained pop, then rest */
@keyframes or-row-blink {
    0%, 65%, 100% {
        border-color: transparent;
        background-color: rgba(245, 166, 35, 0.04);
    }
    /* Blink 1 ON */
    6% {
        border-color: var(--primary);
        background-color: rgba(245, 166, 35, 0.22);
    }
    /* Blink 1 OFF */
    11% {
        border-color: transparent;
        background-color: rgba(245, 166, 35, 0.04);
    }
    /* Blink 2 ON */
    16% {
        border-color: var(--primary);
        background-color: rgba(245, 166, 35, 0.22);
    }
    /* Blink 2 OFF */
    21% {
        border-color: transparent;
        background-color: rgba(245, 166, 35, 0.04);
    }
    /* Blink 3 ON (sustained pop until 55%) */
    26%, 55% {
        border-color: var(--primary);
        background-color: rgba(245, 166, 35, 0.22);
    }
}

/* The "OR" badge — synced with row blinks */
.or-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    padding: 4px 10px;
    background: var(--primary);
    color: #ffffff;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    transform-origin: center;
    flex-shrink: 0;
    animation: or-badge-blink 3.5s ease-in-out infinite;
}

@keyframes or-badge-blink {
    0%, 65%, 100% { transform: scale(1); }
    6%   { transform: scale(1.2); }     /* Blink 1 pop */
    11%  { transform: scale(1); }       /* Blink 1 settle */
    16%  { transform: scale(1.2); }     /* Blink 2 pop */
    21%  { transform: scale(1); }       /* Blink 2 settle */
    26%  { transform: scale(1.28); }    /* Blink 3 big pop */
    55%  { transform: scale(1.2); }     /* Sustained */
}

/* On HOVER: fast continuous blink (twice per second) */
.plan-card:hover .plan-feature-or {
    animation: or-row-blink-hover 1s ease-in-out infinite;
}

.plan-card:hover .or-badge {
    animation: or-badge-blink-hover 1s ease-in-out infinite;
}

@keyframes or-row-blink-hover {
    0%, 100% {
        border-color: var(--primary);
        background-color: rgba(245, 166, 35, 0.22);
    }
    50% {
        border-color: rgba(245, 166, 35, 0.35);
        background-color: rgba(245, 166, 35, 0.08);
    }
}

@keyframes or-badge-blink-hover {
    0%, 100% { transform: scale(1.22); }
    50%      { transform: scale(1); }
}

/* The "OR" pill inside the plan subtitle — same blink rhythm as features OR */
.detail-or-highlight {
    display: inline-block;
    margin: 0 4px;
    padding: 1px 9px;
    background: var(--primary);
    color: #ffffff;
    border-radius: 999px;
    font-size: 0.78em;
    font-weight: 800;
    letter-spacing: 1px;
    vertical-align: 1px;
    animation: or-subtitle-blink 3.5s ease-in-out infinite;
}

@keyframes or-subtitle-blink {
    0%, 65%, 100% { transform: scale(1); }
    6%   { transform: scale(1.22); }
    11%  { transform: scale(1); }
    16%  { transform: scale(1.22); }
    21%  { transform: scale(1); }
    26%  { transform: scale(1.3); }
    55%  { transform: scale(1.2); }
}

/* Reduced-motion: no animation, just static highlight */
@media (prefers-reduced-motion: reduce) {
    .plan-features li.plan-feature-or,
    .or-badge,
    .detail-or-highlight,
    .plan-card:hover .plan-feature-or,
    .plan-card:hover .or-badge {
        animation: none;
    }
    .plan-features li.plan-feature-or {
        border-color: var(--primary);
        background-color: rgba(245, 166, 35, 0.12);
    }
}

.info-card-wrapper {
    display: flex;
    /* Side-by-side: info on the left, WhatsApp on the right. Lives outside
       .plans-grid now, so we add explicit top margin instead of relying on
       grid gap. align-items:stretch keeps the two cards the same height even
       when one has more content than the other. Generous top margin (72px)
       gives a clear visual break from the plan cards above — without it the
       two rows looked like they were touching, especially on the popular
       middle plan whose orange border ran right up to the info row. */
    flex-direction: row;
    align-items: stretch;
    gap: 24px;
    margin-top: 72px;
}
.info-card-wrapper > .info-card,
.info-card-wrapper > .contact-card {
    flex: 1 1 0;
    /* Use column flex inside each card so content centers vertically — the
       info list (3 items) no longer floats at the top while the WhatsApp card
       (icon + text + button) fills more space; both now look balanced. */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.info-card {
    background: var(--white);
    border-radius: 20px;
    padding: 32px;
    box-shadow: var(--shadow-md);
}

.info-list li {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    font-weight: 600;
}

.info-list li:last-child {
    margin-bottom: 0;
}

.contact-card {
    background: #eefdf4;
    border-radius: 20px;
    padding: 32px;
    text-align: center;
    box-shadow: var(--shadow-md);
}

/* Solid green circle around the WhatsApp icon so it stands out clearly against
   the pale-green card background (was almost invisible: green icon on green
   tint). Mirrors the style used elsewhere on the site for chat CTAs. */
.contact-card-icon {
    width: 64px;
    height: 64px;
    background: var(--whatsapp);
    border-radius: 50%;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 22px rgba(37, 211, 102, 0.35);
}

.contact-card-icon i {
    font-size: 1.85rem;
    color: #ffffff;
    margin: 0;
    line-height: 1;
}

.contact-card-text h4 {
    font-size: 1.2rem;
    margin-bottom: 5px;
}

.contact-card-text p {
    color: var(--text-light);
    font-size: 0.9rem;
    margin-bottom: 20px;
}

/* =========================================
   Daily Menu Section
   ========================================= */
.menu-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.menu-item {
    text-align: center;
}

.menu-img-container {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 24px;
    overflow: hidden;
    margin-bottom: 15px;
    box-shadow: var(--shadow-md);
    position: relative;
}

.menu-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.menu-item:hover .menu-img-container img {
    transform: scale(1.15);
}

.menu-item h3 {
    font-size: 1.25rem;
    margin-bottom: 5px;
    letter-spacing: -0.3px;
}

.menu-item p {
    font-size: 0.85rem;
    color: var(--text-light);
}

/* Subtitle under section heading (used for daily menu intro) */
.section-subtitle {
    margin-top: 10px;
    font-size: 0.95rem;
    color: var(--text-light);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.section-subtitle i {
    color: var(--primary);
    font-size: 1.05rem;
}

/* Roti count badge on Lunch / Dinner cards */
.menu-roti-info {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(245, 166, 35, 0.12);
    color: var(--primary);
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.menu-roti-info i {
    font-size: 0.9rem;
}

.menu-roti-info strong {
    font-weight: 800;
    font-size: 0.95rem;
}

/* ============================================
   Custom Roti SVG icon (used wherever rotis
   are referenced — replaces fa-bread-slice).
   Sizes itself to the surrounding text via em.
   ============================================ */
.i-roti {
    width: 1.25em;
    height: 1.25em;
    vertical-align: -0.25em;
    display: inline-block;
    flex-shrink: 0;
}

/* Slight size tweaks per context */
.section-subtitle .i-roti     { width: 1.4em; height: 1.4em; vertical-align: -0.3em; }
.menu-roti-info .i-roti       { width: 1.3em; height: 1.3em; }
.week-table th .th-sub .i-roti { width: 1.25em; height: 1.25em; margin-right: 1px; }
.swiper-meal-label .meal-roti-tag .i-roti { width: 1.15em; height: 1.15em; vertical-align: -0.22em; margin-right: 1px; }

/* =========================================
   How It Works Section
   ========================================= */
.steps-container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
}

.step {
    flex: 1;
    text-align: center;
    position: relative;
    z-index: 2;
    padding: 0 15px;
}

.step-icon {
    width: 80px;
    height: 80px;
    background-color: var(--white);
    border: 2px dashed var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
    font-size: 2rem;
    color: var(--primary);
    background-color: #fffaf0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-sm);
}

.step:hover .step-icon {
    background-color: var(--primary);
    color: var(--white);
    transform: scale(1.1) rotate(10deg);
    border-style: solid;
}

.step h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.step p {
    font-size: 0.9rem;
    color: var(--text-light);
}

.step-connector {
    flex: 1;
    height: 2px;
    background-image: linear-gradient(to right, var(--primary) 50%, transparent 50%);
    background-size: 10px 2px;
    background-repeat: repeat-x;
    margin-top: 40px;
    min-width: 50px;
}

/* =========================================
   About Section
   ========================================= */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.about-text h3 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.3;
    color: var(--secondary);
}

.about-text p {
    color: var(--text-light);
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 16px;
}

.about-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 32px;
}

.stat-box {
    background: var(--bg-light);
    border-radius: 16px;
    padding: 20px 16px;
    text-align: center;
    transition: all 0.3s ease;
}

.stat-box:hover {
    background: var(--primary);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(245, 166, 35, 0.3);
}

.stat-box h4 {
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--primary);
    margin-bottom: 4px;
    transition: color 0.3s ease;
}

.stat-box:hover h4 {
    color: var(--white);
}

.stat-box p {
    font-size: 0.8rem;
    color: var(--text-light);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
}

.stat-box:hover p {
    color: rgba(255,255,255,0.85);
}

.about-image img {
    width: 100%;
    border-radius: 32px;
    box-shadow: var(--shadow-premium);
    /* Show the whole uploaded photo without center-cropping it.
       Portrait/landscape both render naturally now. */
    object-fit: contain;
    max-height: 560px;
    background: #f8f9fa;
}

/* =========================================
   Contact Section
   ========================================= */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 20px;
    background: var(--white);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
}

.contact-item:hover {
    box-shadow: var(--shadow-md);
    transform: translateX(4px);
}

.contact-icon {
    width: 44px;
    height: 44px;
    background: rgba(245, 166, 35, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 1.1rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.contact-item:hover .contact-icon {
    background: var(--primary);
    color: var(--white);
}

.contact-item h4 {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-light);
    margin-bottom: 4px;
}

.contact-item p {
    font-size: 0.95rem;
    color: var(--text-dark);
    font-weight: 500;
}

.contact-action-hint {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--primary);
    text-transform: none;
    letter-spacing: 0;
    margin-left: 6px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.contact-item:hover .contact-action-hint {
    opacity: 1;
}

a.contact-item {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

/* Button-style contact-item (e.g., Terms & Conditions modal trigger) */
button.contact-item.contact-item-link {
    width: 100%;
    text-align: left;
    border: none;
    font: inherit;
    cursor: pointer;
}

.contact-wa-btn {
    margin-top: 8px;
    justify-content: center;
    font-size: 1rem;
}

/* ============================================
   Terms & Conditions Modal
   ============================================ */
.terms-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.terms-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

.terms-modal[hidden] {
    display: none;
}

.terms-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 15, 20, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.terms-modal-box {
    position: relative;
    background: var(--white);
    border-radius: 18px;
    width: 100%;
    max-width: 640px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.35);
    transform: translateY(20px) scale(0.97);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.terms-modal.is-open .terms-modal-box {
    transform: translateY(0) scale(1);
}

.terms-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-dark);
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease;
    z-index: 2;
}

.terms-modal-close:hover {
    background: var(--primary);
    color: #fff;
    transform: rotate(90deg);
}

.terms-modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 24px 28px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.terms-modal-header i {
    color: var(--primary);
    font-size: 1.3rem;
}

.terms-modal-header h2 {
    margin: 0;
    font-size: 1.35rem;
    color: var(--text-dark);
    letter-spacing: -0.3px;
}

.terms-modal-body {
    padding: 20px 28px 28px;
    overflow-y: auto;
    color: var(--text-dark);
    line-height: 1.65;
    font-size: 0.95rem;
}

.terms-modal-body p {
    margin: 0 0 14px;
}

.terms-modal-body p:last-child {
    margin-bottom: 0;
}

/* Mobile: full-screen feel */
@media (max-width: 600px) {
    .terms-modal { padding: 0; }
    .terms-modal-box {
        max-height: 100vh;
        max-height: 100dvh;
        height: 100%;
        border-radius: 0;
    }
    .terms-modal-header { padding: 20px 20px 14px; }
    .terms-modal-body { padding: 16px 20px 24px; font-size: 0.92rem; }
    .terms-modal-close { top: 12px; right: 12px; }
}

.contact-map {
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-premium);
    height: 100%;
    min-height: 400px;
}

.map-placeholder {
    width: 100%;
    height: 100%;
    min-height: 400px;
    background: linear-gradient(135deg, #e8f4fd 0%, #d1e8f0 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--text-light);
}

.map-placeholder i {
    font-size: 4rem;
    color: var(--primary);
}

.map-placeholder p {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--secondary);
}

.map-placeholder span {
    font-size: 0.9rem;
    color: var(--text-light);
    text-align: center;
    padding: 0 20px;
}

/* Responsive for About & Contact */
@media (max-width: 992px) {
    .about-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .about-image { order: -1; }
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .contact-map { min-height: 280px; }
    .map-placeholder { min-height: 280px; }
}

@media (max-width: 768px) {
    .about-stats { grid-template-columns: repeat(3, 1fr); }
    .about-text h3 { font-size: 1.5rem; }
}

@media (max-width: 480px) {
    .about-stats { grid-template-columns: 1fr; }
}

/* =========================================
   Footer
   ========================================= */
footer {
    position: relative;
    background-color: var(--secondary);
    color: var(--white);
}

.footer-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.footer-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.35;
}

.footer-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(17, 24, 39, 0.82) 0%, rgba(17, 24, 39, 0.65) 100%);
}

.footer-content {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 2fr 1fr 1.5fr 1fr;
    gap: 40px;
    padding: 80px 20px 40px 20px;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.footer-logo {
    height: 64px;
    width: 64px;
    flex-shrink: 0;
    background: #ffffff;
    border-radius: 50%;
    padding: 8px;
    box-shadow: 0 6px 20px rgba(245, 166, 35, 0.35),
                0 0 0 3px rgba(245, 166, 35, 0.4);
    object-fit: contain;
}

.footer-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.footer-brand-name {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 900;
    letter-spacing: -0.4px;

    /* Same shimmer gradient as header */
    background: linear-gradient(
        90deg,
        #f5a623 0%,
        #fbbf24 25%,
        #fde68a 50%,
        #fbbf24 75%,
        #f5a623 100%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: brand-shimmer 4s ease-in-out infinite;
}

.footer-brand-tagline {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(255,255,255,0.85);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-top: 4px;
}

.brand-col p {
    color: #9ca3af;
    font-size: 0.9rem;
    line-height: 1.6;
}

.footer-col h4 {
    color: var(--white);
    margin-bottom: 25px;
    font-size: 1.1rem;
    position: relative;
    padding-bottom: 10px;
}

.footer-col h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background-color: var(--primary);
}

.footer-col ul li {
    margin-bottom: 15px;
}

.footer-col ul li a {
    color: #9ca3af;
    font-size: 0.95rem;
}

.footer-col ul li a:hover {
    color: var(--primary);
    padding-left: 5px;
}

.contact-col li {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    color: #9ca3af;
    font-size: 0.95rem;
    line-height: 1.5;
}

.contact-col li i {
    color: var(--primary);
    margin-top: 4px;
}

/* Footer-style button (Terms & Conditions trigger) — looks like a footer link */
.footer-link-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: #9ca3af;
    font: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-align: left;
    transition: color 0.2s ease;
}

.footer-link-btn:hover {
    color: var(--primary);
}

.footer-link-btn i {
    color: var(--primary);
    margin-top: 0;
}

.contact-col li.footer-terms-li {
    align-items: center;
}

/* Inline link in copyright bar */
.footer-link-btn.footer-link-inline {
    font-size: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.footer-sep {
    margin: 0 6px;
    color: rgba(255, 255, 255, 0.3);
}

.footer-whatsapp-link {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #d1d5db;
    margin-bottom: 20px;
    font-size: 0.95rem;
    text-decoration: none;
}

/* Official-style WhatsApp icon — green circle with white icon inside */
.footer-whatsapp-link i {
    width: 34px;
    height: 34px;
    background: #25d366;
    color: #ffffff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.35);
    flex-shrink: 0;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.footer-whatsapp-link:hover {
    color: #ffffff;
}

.footer-whatsapp-link:hover i {
    transform: scale(1.08);
    box-shadow: 0 6px 18px rgba(37, 211, 102, 0.55);
}

.social-icons {
    display: flex;
    gap: 15px;
    margin-top: 25px;
}

.social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: #fff;
    font-size: 17px;
    text-decoration: none;
    /* Subtle white ring + soft drop shadow → pops on the dark footer */
    box-shadow: 0 0 0 1.5px rgba(255,255,255,0.25), 0 4px 12px rgba(0,0,0,0.35);
    transition: transform 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.social-icons a:hover {
    transform: translateY(-4px) scale(1.1);
    filter: brightness(1.15);
    box-shadow: 0 0 0 2px rgba(255,255,255,0.55), 0 10px 24px rgba(0,0,0,0.5);
}

/* ============================================
   Brand-colored social icons
   ============================================ */

.social-icons a.social-icon-facebook  { background: #1877f2; color: #fff; }
.social-icons a.social-icon-facebook:hover  { background: #1565c0; }

.social-icons a.social-icon-instagram {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: #fff;
}

.social-icons a.social-icon-tiktok    { background: #010101; color: #fff; position: relative; }
.social-icons a.social-icon-tiktok i  {
    /* Iconic TikTok cyan/pink offset effect */
    text-shadow: 1.2px 1.2px 0 #25f4ee, -1.2px -1.2px 0 #fe2c55;
}

.social-icons a.social-icon-youtube   { background: #ff0000; color: #fff; }
.social-icons a.social-icon-youtube:hover   { background: #cc0000; }

.social-icons a.social-icon-twitter   { background: #000; color: #fff; }
.social-icons a.social-icon-twitter:hover   { background: #1a1a1a; }

.social-icons a.social-icon-linkedin  { background: #0a66c2; color: #fff; }
.social-icons a.social-icon-linkedin:hover  { background: #084a8c; }

.social-icons a.social-icon-pinterest { background: #e60023; color: #fff; }
.social-icons a.social-icon-pinterest:hover { background: #b3001b; }

.social-icons a.social-icon-snapchat  { background: #fffc00; color: #000; }
.social-icons a.social-icon-snapchat:hover  { background: #f0ed00; }

.social-icons a.social-icon-whatsapp  { background: #25d366; color: #fff; }
.social-icons a.social-icon-whatsapp:hover  { background: #1da851; }

.social-icons a.social-icon-telegram  { background: #2aabee; color: #fff; }
.social-icons a.social-icon-telegram:hover  { background: #1a92cf; }

/* Placeholder state — same vibrant look as live icons, just non-interactive */
.social-icons a.social-icon-placeholder {
    cursor: default;
}
.social-icons a.social-icon-placeholder:hover {
    transform: none;
    filter: none;
    box-shadow: 0 0 0 1.5px rgba(255,255,255,0.25), 0 4px 12px rgba(0,0,0,0.35);
}

.footer-bottom {
    position: relative;
    z-index: 2;
    background-color: #0d121d;
    padding: 20px 0;
    text-align: center;
    color: #6b7280;
    font-size: 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* =========================================
   Responsive Design
   ========================================= */
@media (max-width: 1200px) {
    .plans-grid {
        /* Same centering pattern at tablet sizes — cap track width so 3
           plans don't stretch to fill, and let the row center itself. */
        grid-template-columns: repeat(auto-fit, minmax(240px, 300px));
        justify-content: center;
    }

    .info-card-wrapper {
        flex-direction: row;
    }

    .info-card, .contact-card {
        flex: 1;
    }

    .menu-grid {
        grid-template-columns: repeat(3, 1fr);
        justify-content: center;
    }
}

@media (max-width: 992px) {
    .hero h1 {
        font-size: 3.2rem;
    }

    .hero-container {
        text-align: center;
        padding-top: 40px;
        justify-content: center;
    }

    .hero-content {
        max-width: 100%;
    }

    .hero-features {
        justify-content: center;
    }

    .hero-actions {
        justify-content: center;
    }

    .footer-content {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    /* ---- Global spacing (tight, native-app feel) ---- */
    .container { padding: 0 14px; }
    .section-padding { padding: 34px 0; }
    .bg-light { padding: 34px 0; }

    /* ---- Section headers ---- */
    .section-header { margin-bottom: 20px; }
    .section-header h2 {
        font-size: 1.55rem;
        padding-bottom: 8px;
        letter-spacing: 0;
    }
    .section-header h2::after { width: 38px; height: 2px; }

    /* ---- Navigation ---- */
    .main-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: var(--white);
        flex-direction: column;
        padding: 18px;
        box-shadow: var(--shadow-md);
        gap: 12px;
        text-align: center;
    }
    .main-nav.show { display: flex; }
    .main-nav a { font-size: 1rem; padding: 6px 0; }
    .header-btn { display: none; }
    .mobile-menu-btn { display: block; }
    header { padding: 8px 0; }
    header > .header-container { padding-left: 12px !important; padding-right: 12px !important; }
    .logo img { height: 48px; }
    .logo { gap: 10px; }
    .brand-name { font-size: 1.2rem; letter-spacing: -0.3px; }
    .brand-tagline { font-size: 0.6rem; letter-spacing: 2px; margin-top: 2px; }

    /* ---- Hero ---- */
    .hero-container {
        padding-top: 90px !important;
        padding-bottom: 70px !important;
    }
    .hero h1 {
        font-size: 2.1rem !important;
        line-height: 1.15;
        margin-bottom: 14px !important;
    }
    .hero .subtitle {
        font-size: 1rem !important;
        margin-bottom: 22px !important;
    }
    .hero-features {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
        margin-bottom: 22px !important;
    }
    .feature-badge i { font-size: 1.8rem !important; }
    .feature-badge span { font-size: 0.85rem !important; }
    .feature-badge small { font-size: 0.75rem !important; }
    .hero-actions {
        flex-direction: column;
        gap: 10px !important;
    }
    .hero-actions .btn { width: 100%; padding: 14px 20px !important; font-size: 0.95rem !important; }

    /* ---- Meal plans (compact, 3 visible per screen) ---- */
    .plans-grid {
        grid-template-columns: 1fr;
        gap: 12px !important;
    }
    .plan-card {
        padding: 16px 16px !important;
        border-radius: 14px !important;
        text-align: left !important;
    }
    .plan-header { margin-bottom: 10px !important; text-align: left !important; padding: 0 !important; }
    .plan-header h3 { font-size: 1.1rem !important; margin-bottom: 4px !important; }
    .plan-header p { font-size: 0.8rem !important; line-height: 1.3 !important; margin: 0 !important; }
    .plan-header p br { display: none; }
    .plan-header .price {
        font-size: 1.6rem !important;
        margin-top: 8px !important;
        display: inline-block !important;
    }
    .price .currency { font-size: 1rem !important; }
    .price .period { font-size: 0.8rem !important; }
    .plan-features {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px 12px !important;
        margin: 8px 0 12px !important;
        padding: 8px 0 0 !important;
        border-top: 1px solid var(--border) !important;
    }
    .plan-features li {
        font-size: 0.78rem !important;
        padding: 0 !important;
        margin: 0 !important;
        color: var(--text-light) !important;
    }
    .plan-features li i { font-size: 0.7rem !important; margin-right: 3px !important; }
    .plan-card .btn-full {
        padding: 10px !important;
        font-size: 0.9rem !important;
    }
    .info-card-wrapper {
        /* Mobile: stack the two cards (info above, contact below — but
           contact is hidden on mobile anyway). Reduce the top gap to 36px
           so the section break is still clear but doesn't waste viewport. */
        flex-direction: column;
        gap: 10px !important;
        margin-top: 36px;
    }
    .info-card { padding: 16px 18px !important; }
    .info-card li { padding: 5px 0 !important; font-size: 0.88rem !important; }
    /* Hide redundant "Have Questions" WhatsApp card on mobile — already in bottom nav, FAB, hero */
    .contact-card { display: none !important; }
    .plan-card.popular { transform: none; }
    .plan-card.popular:hover { transform: translateY(-3px); }
    .popular-badge {
        font-size: 0.65rem !important;
        padding: 3px 12px !important;
        top: -8px !important;
    }

    /* ---- Menu photo grid ---- */
    .menu-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .menu-item h3 { font-size: 0.95rem !important; margin-top: 10px !important; }
    .menu-item p { font-size: 0.78rem !important; }
    .menu-img-container { aspect-ratio: 1; }

    /* ---- How It Works (2x2 grid) ---- */
    .steps-container {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        align-items: stretch;
    }
    .step {
        display: flex !important;
        flex-direction: column !important;
        text-align: center !important;
        gap: 6px !important;
        padding: 14px 10px !important;
        background: var(--white);
        border-radius: 12px;
        box-shadow: var(--shadow-sm);
        align-items: center !important;
        flex: none !important;
    }
    .step .step-icon {
        margin: 0 !important;
        width: 42px !important;
        height: 42px !important;
        font-size: 1.05rem !important;
        border-width: 1.5px !important;
    }
    .step h3 { font-size: 0.85rem !important; margin: 0 !important; line-height: 1.2 !important; }
    .step p  { font-size: 0.72rem !important; line-height: 1.3 !important; }
    .step-icon {
        margin: 0 !important;
        flex-shrink: 0;
        width: 56px !important;
        height: 56px !important;
        font-size: 1.4rem !important;
    }
    .step h3 { font-size: 1.05rem !important; margin-bottom: 4px !important; }
    .step p { font-size: 0.9rem !important; }
    .step-connector { display: none; }

    /* ---- About ---- */
    .about-grid { gap: 20px !important; }
    .about-text h3 { font-size: 1.25rem !important; margin-bottom: 10px !important; }
    .about-text p { font-size: 0.9rem !important; margin-bottom: 10px !important; line-height: 1.55 !important; }
    .about-stats {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        margin-top: 14px !important;
    }
    .stat-box {
        padding: 12px 6px !important;
        border-radius: 10px !important;
    }
    .stat-box h4 { font-size: 1.25rem !important; margin-bottom: 2px !important; }
    .stat-box p { font-size: 0.68rem !important; line-height: 1.2 !important; letter-spacing: 0.3px !important; }

    /* ---- Contact (compact list, no big cards) ---- */
    .contact-grid { gap: 16px !important; }
    .contact-info { gap: 8px !important; display: flex !important; flex-direction: column !important; }
    .contact-item {
        padding: 12px 14px !important;
        gap: 12px !important;
        border-radius: 10px !important;
    }
    .contact-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 0.85rem !important;
        flex-shrink: 0;
    }
    .contact-item h4 {
        font-size: 0.7rem !important;
        margin-bottom: 1px !important;
        letter-spacing: 0.5px !important;
    }
    .contact-item p { font-size: 0.9rem !important; margin: 0 !important; }
    .contact-action-hint { display: none !important; }
    .contact-wa-btn {
        padding: 12px !important;
        font-size: 0.95rem !important;
        margin-top: 4px !important;
    }
    .map-placeholder { padding: 26px 16px !important; }
    .map-placeholder i { font-size: 2rem !important; }
    .map-placeholder p { font-size: 1rem !important; }
    .map-placeholder span { font-size: 0.8rem !important; }

    /* ---- Footer (compact, 2-column links) ---- */
    .footer-content {
        grid-template-columns: 1fr;
        gap: 20px !important;
        padding: 36px 16px 18px !important;
    }
    .footer-col h4 {
        font-size: 0.85rem !important;
        margin-bottom: 10px !important;
        letter-spacing: 1px !important;
    }
    .footer-col p { font-size: 0.85rem !important; line-height: 1.5 !important; }
    .footer-col ul {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 6px 14px !important;
    }
    .footer-col.contact-col ul { grid-template-columns: 1fr; }
    .footer-col ul li,
    .footer-col ul li a { font-size: 0.85rem !important; padding: 2px 0 !important; }
    .footer-logo { height: 54px !important; width: 54px !important; padding: 6px !important; }
    .footer-brand { gap: 12px !important; margin-bottom: 14px !important; }
    .footer-brand-name { font-size: 1.15rem !important; }
    .footer-brand-tagline { font-size: 0.62rem !important; letter-spacing: 2px !important; }
    .footer-whatsapp-link { font-size: 0.85rem !important; padding: 6px 0 !important; }
    .footer-col .btn-small { padding: 10px 16px !important; font-size: 0.85rem !important; }
    .social-icons { gap: 12px !important; margin-top: 12px !important; }
    .social-icons a { width: 40px !important; height: 40px !important; font-size: 15px !important; }
    .footer-whatsapp-link i { width: 30px !important; height: 30px !important; font-size: 15px !important; }
    .footer-bottom { padding: 14px 16px !important; }
    .footer-bottom p { font-size: 0.75rem !important; }

    /* ---- Today's Menu top section ---- */
    .delivery-banner {
        font-size: 0.88rem;
        padding: 10px 18px;
        max-width: none;
        margin-bottom: 20px;
        gap: 10px;
        white-space: normal;
    }
    .delivery-banner i { font-size: 1.1rem; }
    .menu-info-strip {
        flex-direction: row;
        gap: 8px;
        margin: 14px 0 16px;
    }
    .info-pill {
        padding: 8px 12px;
        font-size: 0.82rem;
        flex: 1;
        justify-content: center;
        gap: 6px;
    }
    .info-pill i { font-size: 1rem; }
    .today-date { font-size: 0.9rem; margin-top: 6px; }
}

@media (max-width: 480px) {
    .hero-greeting-badge {
        font-size: 0.8rem;
        top: 14px;
        left: 14px;
        padding: 6px 12px 6px 10px;
    }

    .hero h1 {
        font-size: 1.85rem !important;
    }

    .hero-container {
        padding-top: 80px !important;
        padding-bottom: 60px !important;
    }

    .section-header h2 { font-size: 1.55rem; }

    .delivery-banner { font-size: 0.85rem; padding: 10px 16px; white-space: normal; }
    .delivery-banner span { line-height: 1.2; }
    .info-pill { font-size: 0.78rem; padding: 8px 12px; }
    .info-pill i { font-size: 1rem; }

    .menu-grid {
        grid-template-columns: 1fr;
    }

    /* ---- Mobile: Transform table into compact day cards ---- */
    .week-table-wrapper {
        padding: 16px 12px;
        margin-top: 24px;
        overflow: hidden;
    }
    .week-table-title {
        font-size: 1.05rem;
        margin-bottom: 12px;
    }
    .week-table-scroll {
        overflow: visible;
        overflow-x: visible;
        width: 100%;
    }
    .week-table {
        min-width: 0 !important;
        width: 100%;
        max-width: 100%;
        display: block;
    }
    .week-table thead { display: none; }
    .week-table tbody {
        display: block;
        width: 100%;
    }
    .week-table tbody tr {
        display: block;
        width: 100%;
        box-sizing: border-box;
        border: 1.5px solid var(--border);
        border-radius: 12px;
        margin-bottom: 10px;
        padding: 12px 14px;
        background: var(--white);
        box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }
    .week-table tbody tr.today-row {
        border-color: var(--primary);
        background: rgba(245, 166, 35, 0.06);
        box-shadow: 0 3px 12px rgba(245, 166, 35, 0.18);
    }
    .week-table tbody tr:hover { background: var(--white); }
    .week-table tbody tr.today-row:hover { background: rgba(245,166,35,0.06); }
    .week-table tbody td {
        display: block;
        width: 100%;
        box-sizing: border-box;
        padding: 9px 0;
        border-bottom: 1px solid var(--border);
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    .week-table tbody td:last-child { border-bottom: none; }
    .week-table tbody td.day-cell {
        padding: 0 0 8px 0;
        border-bottom: 2px solid var(--primary);
        margin-bottom: 2px;
        white-space: normal;
    }
    .week-table tbody td:not(.day-cell)::before {
        content: attr(data-label);
        display: inline-block;
        font-size: 10px;
        font-weight: 800;
        color: var(--primary);
        letter-spacing: 0.9px;
        text-transform: uppercase;
        margin-bottom: 4px;
        padding: 2px 8px;
        background: rgba(245, 166, 35, 0.1);
        border-radius: 4px;
    }
    .day-en, .day-pa, .meal-en, .meal-pa {
        word-wrap: break-word;
        overflow-wrap: break-word;
        white-space: normal;
    }
    .day-en {
        font-size: 16px;
        display: inline-block;
        font-weight: 700;
    }
    .day-pa {
        font-size: 13.5px;
        display: inline-block;
        margin: 0 0 0 8px !important;
        color: var(--primary);
        font-weight: 500;
    }
    .meal-en {
        font-size: 14.5px;
        line-height: 1.35;
        font-weight: 600;
        color: var(--text-dark);
    }
    .meal-pa {
        font-size: 12.5px;
        padding-top: 3px;
        margin-top: 3px;
        line-height: 1.35;
        border-top: none;
        color: var(--text-light);
        font-weight: 500;
    }
    .today-badge {
        font-size: 8.5px !important;
        padding: 1px 6px !important;
        margin-left: 6px !important;
    }

    /* ---- Mobile: Section / banner / pills ---- */
    .delivery-banner {
        font-size: 1rem;
        padding: 14px 20px;
        gap: 12px;
        margin-bottom: 32px;
    }
    .delivery-banner i { font-size: 1.25rem; }
    .info-pill {
        padding: 12px 20px;
        font-size: 0.95rem;
    }
    .info-pill i { font-size: 1.15rem; }
    .menu-info-strip { gap: 10px; }
    .today-date { font-size: 1rem; }
}

/* =========================================
   Today's Menu + Weekly Schedule Section
   ========================================= */
.delivery-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: linear-gradient(135deg, var(--primary) 0%, #f7b748 100%);
    color: var(--secondary);
    padding: 14px 22px;
    border-radius: 50px;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    max-width: 520px;
    margin: 0 auto 40px;
    box-shadow: 0 6px 18px rgba(245, 166, 35, 0.28);
    text-align: center;
}

.delivery-banner i {
    font-size: 1.4rem;
}

.menu-info-strip {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin: 28px 0 36px;
}

.info-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--white);
    padding: 12px 22px;
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-dark);
    box-shadow: var(--shadow-sm);
    border: 2px solid var(--border);
    transition: all 0.25s ease;
}

.info-pill:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.info-pill i {
    font-size: 1.1rem;
}

.info-pill.veg i      { color: #22c55e; }
.info-pill.veg        { border-color: rgba(34, 197, 94, 0.25); }
.info-pill.nonveg i   { color: #dc2626; }
.info-pill.nonveg     { border-color: rgba(220, 38, 38, 0.25); }
.info-pill.order i    { color: var(--primary); }
.info-pill.order      { border-color: rgba(245, 166, 35, 0.3); }
/* "+5 Rotis" sub-label inside Lunch/Dinner table headers */
.week-table th .th-sub {
    display: block;
    margin-top: 5px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: rgba(255, 255, 255, 0.92);
    text-transform: none;
}
.week-table th .th-sub i {
    color: #f5a623;
    margin-right: 3px;
}

/* "+5 Rotis" tag in mobile swiper meal labels */
.swiper-meal-label .meal-roti-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    background: rgba(245, 166, 35, 0.15);
    border-radius: 999px;
    font-size: 0.7rem;
    color: #b45309;
    font-weight: 700;
    vertical-align: middle;
}
.swiper-meal-label .meal-roti-tag i {
    margin-right: 2px;
    font-size: 0.7rem;
}

.today-date {
    text-align: center;
    color: var(--primary);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-top: 12px;
}

/* ---- Full Weekly Schedule Table ---- */
.week-table-wrapper {
    margin-top: 60px;
    background: var(--white);
    border-radius: 16px;
    padding: 28px;
    box-shadow: var(--shadow-md);
}

.week-table-title {
    text-align: center;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--secondary);
    margin-bottom: 22px;
    letter-spacing: 0.5px;
}

.week-table-scroll {
    overflow-x: auto;
}

.week-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
    min-width: 700px;
}

.week-table thead th {
    background: var(--secondary);
    color: var(--white);
    padding: 14px 16px;
    text-align: left;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.week-table thead th:first-child { border-top-left-radius: 10px; }
.week-table thead th:last-child  { border-top-right-radius: 10px; }
.week-table thead th i { color: var(--primary); margin-right: 6px; }

.week-table tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background 0.2s;
}

.week-table tbody tr:hover { background: #fffbf0; }
.week-table tbody tr:last-child { border-bottom: none; }

.week-table tbody td {
    padding: 18px 18px;
    color: var(--text-dark);
    line-height: 1.5;
    vertical-align: middle;
}

.week-table .day-cell {
    white-space: nowrap;
}

.day-en {
    font-weight: 700;
    color: var(--secondary);
    font-size: 17px;
}

.day-pa {
    font-weight: 500;
    color: var(--primary);
    font-size: 15px;
    margin-top: 3px;
}

.meal-en {
    font-weight: 600;
    color: var(--text-dark);
    font-size: 16px;
    line-height: 1.45;
}

.meal-pa {
    font-weight: 500;
    color: var(--text-light);
    font-size: 14.5px;
    margin-top: 6px;
    line-height: 1.5;
    padding-top: 6px;
    border-top: 1px dashed var(--border);
}

.week-table thead th {
    font-size: 14px;
}

.week-table .today-row .day-en { color: var(--primary); }
.week-table .today-row .day-pa { color: #d4831c; }

.week-table .today-row {
    background: rgba(245, 166, 35, 0.08);
}

.week-table .today-row:hover { background: rgba(245, 166, 35, 0.14); }
.week-table .today-row .day-cell { color: var(--primary); }

.today-badge {
    display: inline-block;
    background: var(--primary);
    color: var(--white);
    font-size: 9.5px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 20px;
    margin-left: 6px;
    letter-spacing: 0.6px;
    vertical-align: middle;
}

/* =========================================
   MOBILE NATIVE-APP EXPERIENCE
   ========================================= */

/* Hide mobile-specific elements on desktop */
.mobile-quick-actions,
.mobile-bottom-nav,
.fab-whatsapp,
.mobile-only-week {
    display: none;
}

@media (max-width: 768px) {
    /* Reserve space for bottom nav */
    body { padding-bottom: 72px; }

    /* Hide desktop weekly table on mobile, show swiper */
    .desktop-only-week { display: none !important; }
    .mobile-only-week { display: block !important; }

    /* ---------------------------------------
       Mobile Quick Actions Strip — REMOVED
       (redundant: bottom nav already has Call + Order)
       --------------------------------------- */
    .mobile-quick-actions {
        display: none !important;
    }
    .mobile-quick-actions-disabled {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        padding: 16px 14px 0;
        background: var(--white);
    }
    .quick-action {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 14px 6px;
        border-radius: 14px;
        font-size: 12px;
        font-weight: 600;
        text-decoration: none;
        transition: transform 0.2s, box-shadow 0.2s;
        color: var(--text-dark);
    }
    .quick-action:active { transform: scale(0.96); }
    .quick-action i {
        font-size: 20px;
        margin-bottom: 2px;
    }
    .quick-action.call {
        background: #eef2ff;
        color: #4338ca;
    }
    .quick-action.whatsapp {
        background: #dcfce7;
        color: #15803d;
    }
    .quick-action.maps {
        background: #ffedd5;
        color: #c2410c;
    }

    /* ---------------------------------------
       Sticky Bottom Navigation Bar
       --------------------------------------- */
    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--white);
        box-shadow: 0 -2px 20px rgba(0,0,0,0.08);
        z-index: 1000;
        padding: 6px 4px calc(8px + env(safe-area-inset-bottom));
        justify-content: space-around;
        align-items: flex-end;
        border-top: 1px solid var(--border);
    }
    .bn-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        flex: 1;
        text-align: center;
        font-size: 10px;
        font-weight: 600;
        color: #9ca3af;
        text-decoration: none;
        /* 10px top/bottom keeps the tap target over iOS 44pt minimum */
        padding: 10px 4px;
        transition: color 0.2s, transform 0.2s;
        position: relative;
    }
    .bn-item:active { transform: scale(0.92); }
    .bn-item i { font-size: 19px; }
    .bn-item.active {
        color: var(--primary);
    }
    .bn-item.active::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 28px;
        height: 3px;
        background: var(--primary);
        border-radius: 0 0 4px 4px;
    }
    /* ---- Order button — clean WhatsApp logo, NO green circle around it ----
       Just the iconic WhatsApp glyph in its official green, slightly larger
       than the other nav icons so it still reads as the primary action.
       "Order" label sits below in normal flex flow — always fully visible. */
    .bn-item.bn-primary {
        flex: 1;
        position: relative;
        background: transparent;
        border-radius: 0;
        margin-top: 0;
        padding: 8px 4px;
        width: auto;
        height: auto;
        box-shadow: none;
        font-size: 11px;
        font-weight: 700;
        color: #128c7e;
        animation: none;
        overflow: visible;
    }
    /* Kill any leftover decorative circle / active bar from earlier styles */
    .bn-item.bn-primary::before { display: none; content: none; }
    .bn-item.bn-primary i {
        position: static;
        font-size: 30px;
        color: #25d366;          /* official WhatsApp green */
        margin: 0 0 3px 0;
        line-height: 1;
        filter: drop-shadow(0 2px 5px rgba(37, 211, 102, 0.35));
        transition: transform 0.18s ease;
    }
    .bn-item.bn-primary:active i { transform: scale(0.92); }
    .bn-item.bn-primary span {
        position: static;
        color: #128c7e;
        font-weight: 700;
        font-size: 11px;
        letter-spacing: 0.3px;
    }
    .bn-item.bn-primary.active { color: #128c7e; }
    .bn-item.bn-primary.active::before { display: none; content: none; }

    /* ---------------------------------------
       Floating WhatsApp Button (FAB)
       --------------------------------------- */
    .fab-whatsapp {
        display: none; /* Disabled — bottom nav has WhatsApp instead */
    }

    /* ---------------------------------------
       Swipeable Weekly Menu (Mobile)
       --------------------------------------- */
    .week-swiper-wrapper {
        margin: 24px -14px 0;
    }
    .week-swiper-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 14px 12px;
    }
    .week-swiper-title {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--secondary);
        margin: 0;
    }
    .week-swiper-hint {
        font-size: 11px;
        font-weight: 600;
        color: var(--text-light);
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }
    .week-swiper-hint i {
        font-size: 11px;
        color: var(--primary);
        animation: swipeHint 1.6s ease-in-out infinite;
    }
    @keyframes swipeHint {
        0%, 100% { transform: translateX(0); }
        50% { transform: translateX(4px); }
    }
    .week-swiper-track {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        gap: 12px;
        padding: 4px 14px 14px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .week-swiper-track::-webkit-scrollbar { display: none; }
    .swiper-day-card {
        scroll-snap-align: center;
        flex: 0 0 calc(100vw - 56px);
        background: var(--white);
        border-radius: 18px;
        padding: 18px 18px 16px;
        box-shadow: 0 6px 22px rgba(0,0,0,0.06);
        border: 2px solid transparent;
        box-sizing: border-box;
    }
    .swiper-day-card.is-today {
        border-color: var(--primary);
        box-shadow: 0 8px 28px rgba(245,166,35,0.22);
    }
    .swiper-day-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 12px;
        margin-bottom: 14px;
        border-bottom: 2px solid var(--primary);
    }
    .swiper-day-header .day-name {
        display: flex;
        align-items: baseline;
        gap: 8px;
    }
    .swiper-day-header .day-en {
        font-size: 18px;
        font-weight: 700;
        color: var(--secondary);
    }
    .swiper-day-header .day-pa {
        font-size: 14px;
        color: var(--primary);
        font-weight: 500;
    }
    .swiper-day-header .today-pill {
        background: var(--primary);
        color: var(--white);
        font-size: 9.5px;
        font-weight: 800;
        padding: 3px 9px;
        border-radius: 20px;
        letter-spacing: 0.7px;
    }
    .swiper-meal {
        padding: 10px 0;
        border-bottom: 1px solid var(--border);
    }
    .swiper-meal:last-child { border-bottom: none; padding-bottom: 0; }
    .swiper-meal-header {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 6px;
    }
    .swiper-meal-icon {
        width: 28px;
        height: 28px;
        border-radius: 8px;
        background: rgba(245,166,35,0.12);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--primary);
        font-size: 13px;
        flex-shrink: 0;
    }
    .swiper-meal-label {
        font-size: 10.5px;
        font-weight: 800;
        color: var(--primary);
        letter-spacing: 1px;
        text-transform: uppercase;
    }
    .swiper-meal-en {
        font-size: 14.5px;
        font-weight: 600;
        color: var(--text-dark);
        line-height: 1.35;
        margin-left: 36px;
    }
    .swiper-meal-pa {
        font-size: 12.5px;
        color: var(--text-light);
        line-height: 1.35;
        margin-top: 3px;
        margin-left: 36px;
    }

    .week-swiper-dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
        margin-top: 6px;
    }
    .week-swiper-dots .dot {
        width: 7px;
        height: 7px;
        background: var(--border);
        border-radius: 50%;
        transition: background 0.3s, width 0.3s;
        cursor: pointer;
    }
    .week-swiper-dots .dot.active {
        background: var(--primary);
        width: 22px;
        border-radius: 4px;
    }
}

/* =========================================
   PHASE 2: Today's Special, Open Now,
   Refer a Friend, Smart Conversions
   ========================================= */

/* ---- Today's Special Ticker Banner ---- */
.today-special-banner {
    display: flex;
    align-items: stretch;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 50%, #fbbf24 100%);
    color: var(--secondary);
    text-decoration: none;
    border-top: 3px solid var(--primary);
    border-bottom: 3px solid var(--primary);
    overflow: hidden;
    position: relative;
    min-height: 56px;
}

.tsb-prefix {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 20px;
    background: var(--secondary);
    color: var(--white);
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}
.tsb-prefix::after {
    content: '';
    position: absolute;
    right: -14px;
    top: 0;
    bottom: 0;
    width: 28px;
    background: var(--secondary);
    transform: skewX(-18deg);
    z-index: 1;
}
.tsb-icon {
    font-size: 1.3rem;
    animation: fire-bounce 2s ease-in-out infinite;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}
.tsb-label { position: relative; z-index: 2; }
@keyframes fire-bounce {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-2px) scale(1.1); }
}

.tsb-ticker-mask {
    flex: 1;
    overflow: hidden;
    position: relative;
    padding: 0 24px;
    display: flex;
    align-items: center;
    min-width: 0;
}
.tsb-ticker-mask::before,
.tsb-ticker-mask::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 30px;
    z-index: 2;
    pointer-events: none;
}
.tsb-ticker-mask::before {
    left: 24px;
    background: linear-gradient(to right, #fde68a, transparent);
}
.tsb-ticker-mask::after {
    right: 24px;
    background: linear-gradient(to left, #fbbf24, transparent);
}

.tsb-ticker-track {
    display: inline-flex;
    align-items: center;
    gap: 50px;
    animation: ticker-scroll 28s linear infinite;
    white-space: nowrap;
    will-change: transform;
}
.today-special-banner:hover .tsb-ticker-track {
    animation-play-state: paused;
}

@keyframes ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.tsb-ticker-item {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--secondary);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.tsb-ticker-item .item-icon {
    font-size: 0.85rem;
    color: var(--primary);
}
.tsb-ticker-sep {
    color: var(--primary);
    font-weight: 900;
    font-size: 1.2rem;
    opacity: 0.6;
}

.tsb-cta {
    background: var(--secondary);
    color: var(--white);
    padding: 0 18px;
    font-weight: 700;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    transition: all 0.25s;
    position: relative;
    z-index: 2;
}
.tsb-cta::before {
    content: '';
    position: absolute;
    left: -14px;
    top: 0;
    bottom: 0;
    width: 28px;
    background: var(--secondary);
    transform: skewX(-18deg);
    z-index: 1;
}
.tsb-cta > * { position: relative; z-index: 2; }
.today-special-banner:hover .tsb-cta {
    background: var(--primary);
}
.today-special-banner:hover .tsb-cta::before {
    background: var(--primary);
}

/* ---- Open Now Status (inline) ---- */
.open-status-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 12px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    vertical-align: middle;
}
.open-status-inline.is-open {
    background: rgba(34, 197, 94, 0.12);
    color: #15803d;
}
.open-status-inline.is-closed {
    background: rgba(239, 68, 68, 0.1);
    color: #b91c1c;
}
.open-status-inline .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 0 currentColor;
}
.open-status-inline.is-open .status-dot {
    animation: pulse-dot 1.8s ease-in-out infinite;
}
@keyframes pulse-dot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}

/* ---- Refer a Friend Section ---- */
.refer-section {
    padding: 50px 0;
    background: var(--white);
}
.refer-card {
    background: linear-gradient(135deg, #fff7ed 0%, #fed7aa 100%);
    border-radius: 20px;
    padding: 36px;
    position: relative;
    overflow: hidden;
    border: 2px dashed var(--primary);
}
.refer-decoration {
    position: absolute;
    top: -30px;
    right: -30px;
    width: 140px;
    height: 140px;
    background: radial-gradient(circle, rgba(245,166,35,0.25), transparent 70%);
    border-radius: 50%;
}
.refer-content {
    display: flex;
    align-items: center;
    gap: 28px;
    position: relative;
}
.refer-emoji {
    font-size: 3.2rem;
    flex-shrink: 0;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
}
.refer-text {
    flex: 1;
}
.refer-text h3 {
    font-size: 1.4rem;
    color: var(--secondary);
    margin-bottom: 6px;
    letter-spacing: -0.3px;
}
.refer-text p {
    font-size: 0.95rem;
    color: var(--text-light);
    line-height: 1.5;
}
.refer-text strong {
    color: var(--primary);
    font-weight: 700;
}
.refer-btn {
    flex-shrink: 0;
    white-space: nowrap;
}

/* ---- Mobile adjustments for new features ---- */
@media (max-width: 768px) {
    .today-special-banner {
        border-top-width: 2px;
        border-bottom-width: 2px;
        min-height: 46px;
    }
    .tsb-prefix {
        padding: 0 14px;
        font-size: 0.65rem;
        letter-spacing: 1.2px;
        gap: 8px;
    }
    .tsb-prefix::after { right: -10px; width: 20px; }
    .tsb-icon { font-size: 1.1rem; }
    .tsb-label-text { display: none; } /* On very small screens, hide text label, keep icon */
    .tsb-ticker-mask { padding: 0 16px; }
    .tsb-ticker-mask::before { left: 16px; width: 20px; }
    .tsb-ticker-mask::after { right: 16px; width: 20px; }
    .tsb-ticker-track {
        gap: 36px;
        animation-duration: 22s;
    }
    .tsb-ticker-item { font-size: 0.82rem; }
    .tsb-ticker-sep { font-size: 1rem; }
    .tsb-cta {
        padding: 0 14px;
        font-size: 0.75rem;
        gap: 4px;
    }
    .tsb-cta::before { left: -10px; width: 20px; }
    .tsb-cta i { font-size: 0.7rem; }

    .open-status-inline {
        display: flex;
        justify-content: center;
        margin: 6px auto 0;
        width: fit-content;
        font-size: 0.78rem;
        padding: 3px 10px;
    }
    .today-date {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

    .refer-section { padding: 28px 0; }
    .refer-card { padding: 20px 16px; border-radius: 16px; }
    .refer-content {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }
    .refer-emoji { font-size: 2.6rem; }
    .refer-text h3 { font-size: 1.1rem; }
    .refer-text p { font-size: 0.85rem; }
    .refer-btn { width: 100%; padding: 12px 18px; font-size: 0.9rem; }
}

/* =========================================
   Admin Floating Widget (Professional design)
   ========================================= */
.admin-widget {
    position: fixed;
    /* Vertically centered with the WhatsApp Us pill.
       Iterated: 24px sat slightly high, 30px slightly low — 26px is the sweet spot. */
    top: 26px;
    right: 20px;
    z-index: 9999;
    font-family: var(--font-body);
}

/* When admin is logged in, shift the header WhatsApp button left so the
   floating widget sits cleanly to its right with a comfortable gap.
   Public visitors never see this — only the logged-in admin. */
body.is-admin-mode .header-btn {
    margin-right: 145px;
}

/* Pill-shaped trigger that pairs visually with the green WhatsApp pill */
.admin-widget-trigger {
    position: relative;
    height: 44px;
    padding: 0 18px 0 22px;
    border-radius: 999px;
    background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
    color: #fff;
    border: 2px solid rgba(245, 166, 35, 0.75);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.4px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.22);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    animation: admin-pulse 2.4s ease-in-out infinite;
    font-family: inherit;
}
@keyframes admin-pulse {
    0%, 100% { box-shadow: 0 8px 24px rgba(0,0,0,0.22), 0 0 0 0 rgba(245,166,35,0.45); }
    50% { box-shadow: 0 8px 24px rgba(0,0,0,0.22), 0 0 0 8px rgba(245,166,35,0); }
}
.admin-widget-trigger:hover {
    transform: translateY(-1px);
    border-color: var(--primary);
}
.admin-widget-label-text {
    color: var(--primary);
    font-weight: 800;
    letter-spacing: 1.6px;
    line-height: 1;
}

.admin-widget-dot {
    width: 9px;
    height: 9px;
    background: #22c55e;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #111827, 0 0 6px rgba(34,197,94,0.7);
    flex-shrink: 0;
}

.admin-widget-menu {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 270px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 16px 50px rgba(0,0,0,0.20), 0 4px 10px rgba(0,0,0,0.06);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(0.95);
    transform-origin: top right;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(0,0,0,0.04);
}
.admin-widget-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.admin-widget-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #fff;
    border-bottom: 2px solid var(--primary);
}
.admin-widget-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(245, 166, 35, 0.15);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.admin-widget-user {
    min-width: 0;
    flex: 1;
}
.admin-widget-label {
    font-size: 10px;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: 2px;
}
.admin-widget-email {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-widget-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #fff;
    border: none;
    color: #1f2937;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    text-align: left;
    transition: background 0.15s;
    border-bottom: 1px solid #f3f4f6;
}
.admin-widget-item:last-child { border-bottom: none; }
.admin-widget-item:hover { background: #f9fafb; }
.admin-widget-item > i:first-child {
    width: 18px;
    text-align: center;
    color: #6b7280;
    font-size: 14px;
}
.admin-widget-item .item-arrow {
    margin-left: auto;
    color: #d1d5db;
    font-size: 11px;
    transition: transform 0.2s, color 0.2s;
}
.admin-widget-item.primary {
    background: linear-gradient(135deg, #fffbef 0%, #fef3c7 100%);
    color: #92400e;
}
.admin-widget-item.primary:hover {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
}
.admin-widget-item.primary > i:first-child { color: var(--primary); }
.admin-widget-item.primary:hover .item-arrow {
    color: var(--primary);
    transform: translateX(3px);
}

@media (max-width: 768px) {
    .admin-widget {
        top: auto;
        bottom: 86px;
        right: 14px;
    }
    /* Slightly smaller pill on mobile */
    .admin-widget-trigger {
        height: 40px;
        padding: 0 16px 0 18px;
        font-size: 12px;
        letter-spacing: 1.3px;
        gap: 8px;
    }
    .admin-widget-label-text {
        letter-spacing: 1.4px;
    }
    .admin-widget-menu {
        width: 240px;
        bottom: calc(100% + 10px);
        top: auto;
        transform-origin: bottom right;
        transform: translateY(10px) scale(0.96);
    }
    .admin-widget-menu.open {
        transform: translateY(0) scale(1);
    }
    /* On mobile, the header WhatsApp button is hidden (display:none),
       so we don't need the desktop margin-right shim — make sure it's reset
       in case any specificity issues bleed in. */
    body.is-admin-mode .header-btn {
        margin-right: 0;
    }
}

/* ============================================
   FAQ Section (accordion using <details>/<summary>)
   ============================================ */
.faq-list {
    max-width: 820px;
    margin: 30px auto 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-item {
    background: var(--white);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.faq-item:hover {
    box-shadow: var(--shadow-md);
}

.faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 18px 56px 18px 22px;
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-dark);
    position: relative;
    user-select: none;
    transition: color 0.2s ease, background 0.2s ease;
}

.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { display: none; }

/* Chevron indicator */
.faq-item summary::after {
    content: "";
    position: absolute;
    right: 22px;
    top: 50%;
    width: 10px;
    height: 10px;
    border-right: 2.5px solid var(--primary);
    border-bottom: 2.5px solid var(--primary);
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-item[open] summary {
    color: var(--primary);
    background: rgba(245, 166, 35, 0.04);
}

.faq-item[open] summary::after {
    transform: translateY(-30%) rotate(-135deg);
}

.faq-item summary:hover {
    color: var(--primary);
}

.faq-item p {
    margin: 0;
    padding: 0 22px 20px;
    color: var(--text-light);
    line-height: 1.7;
    font-size: 0.95rem;
    animation: faqSlideIn 0.3s ease-out;
}

.faq-item p strong {
    color: var(--text-dark);
    font-weight: 700;
}

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

/* Mobile tuning */
@media (max-width: 600px) {
    .faq-list { gap: 10px; margin-top: 22px; }
    .faq-item summary { padding: 15px 50px 15px 18px; font-size: 0.95rem; }
    .faq-item p { padding: 0 18px 16px; font-size: 0.92rem; }
    .faq-item summary::after { right: 18px; width: 9px; height: 9px; }
}