/*site.css*/
/* =========================================================
   1. ROOT / BASE TYPOGRAPHY
========================================================= */

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    margin-bottom: 60px;
}


/* =========================================================
   2. GLOBAL FOCUS STYLES
========================================================= */

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem #ffffff, 0 0 0 0.25rem #258cfb;
}


/* =========================================================
   GLOBAL FORM CONTROL RESPONSIVENESS FIX
   (prevents focus "stretch/jump" + flex overflow)
   ========================================================= */

/* Apply to all common text-like controls */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea,
select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Critical for flex/grid layouts: allow shrinking without overflow */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea,
select,
.form-control,
.form-select {
    min-width: 0;
}

/* iOS/Safari: prevent zoom + layout reflow when focusing inputs */
@media (max-width: 576px) {
    input,
    textarea,
    select,
    .form-control,
    .form-select {
        font-size: 16px !important;
    }
}


/* =========================================================
   3. BIRYANI ANIMATION
========================================================= */

.biryani-animation {
    position: relative;
    width: 150px;
    height: 150px;
    margin: 0 auto;
    transform: translateX(-10px);
}

    /* Handi (pot) */
    .biryani-animation::before {
        content: "";
        position: absolute;
        bottom: 40px;
        left: 56%;
        transform: translateX(-50%);
        width: 140px;
        height: 90px;
        background: #4a2c16;
        border-radius: 60% 60% 30% 30%;
        box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    }

    /* Lid */
    .biryani-animation::after {
        content: "";
        position: absolute;
        bottom: 120px;
        left: 56%;
        transform: translateX(-50%);
        width: 100px;
        height: 35px;
        background: #5c3a1d;
        border-radius: 50% 50% 10% 10%;
    }

    /* Fire flames */
    .biryani-animation div {
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 20px;
        height: 30px;
        background: orange;
        border-radius: 50%;
        animation: flame 0.6s infinite alternate ease-in-out;
        transform-origin: bottom center;
    }

        /* Flame positioning */
        .biryani-animation div:nth-child(4) {
            transform: translateX(0);
        }

        .biryani-animation div:nth-child(5) {
            transform: translateX(-30px);
            animation-delay: 0.1s;
        }

        .biryani-animation div:nth-child(6) {
            transform: translateX(30px);
            animation-delay: 0.15s;
        }

        .biryani-animation div:nth-child(7) {
            transform: translateX(-60px);
            animation-delay: 0.2s;
        }

        .biryani-animation div:nth-child(8) {
            transform: translateX(60px);
            animation-delay: 0.05s;
        }

@keyframes flame {
    0% {
        height: 25px;
        opacity: 0.6;
        background: #ff9800;
    }

    100% {
        height: 45px;
        opacity: 1;
        background: #ff5722;
    }
}

/* Steam */
.biryani-animation .steam {
    position: absolute;
    bottom: 120px;
    left: 50%;
    width: 8px;
    height: 20px;
    background: rgba(255,255,255,0.6);
    border-radius: 50%;
    filter: blur(3px);
    animation: steam-rise 2s infinite ease-out;
    opacity: 0;
}

    .biryani-animation .steam:nth-of-type(1) {
        transform: translateX(-20px);
        animation-delay: 0.2s;
    }

    .biryani-animation .steam:nth-of-type(2) {
        transform: translateX(0);
        animation-delay: 0.6s;
    }

    .biryani-animation .steam:nth-of-type(3) {
        transform: translateX(20px);
        animation-delay: 1s;
    }

@keyframes steam-rise {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0.2;
    }

    50% {
        opacity: 0.6;
    }

    100% {
        transform: translateY(-60px) scale(1.6);
        opacity: 0;
    }
}


/* =========================================================
   4. COOKIE CONSENT
========================================================= */

.cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #1f1f1f;
    color: #fff;
    z-index: 9999;
    padding: 12px 16px;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
}

.cookie-content {
    max-width: 1200px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 14px;
}

    .cookie-content a {
        color: #ffc107;
        text-decoration: underline;
    }

    .cookie-content button {
        white-space: nowrap;
    }

/* =========================================================
   5. LIGHT FORM SURFACE (Overrides Dark Theme)
   (Replace this whole section safely)
========================================================= */

/* Base surface + base text */
.light-form {
    background: #ffffff !important;
    color: #111827 !important;
    /* Optional (helps if Bootstrap vars are set dark globally) */
    --bs-body-bg: #ffffff;
    --bs-body-color: #111827;
    --bs-card-bg: #ffffff;
}

    /* Headings inside light surface */
    .light-form h1,
    .light-form h2,
    .light-form h3,
    .light-form h4,
    .light-form h5,
    .light-form h6 {
        color: #111827 !important;
    }

    /* Muted/help text inside light surface */
    .light-form .text-muted,
    .light-form .text-secondary,
    .light-form .form-text,
    .light-form small,
    .light-form .small {
        color: #6b7280 !important;
    }

    /* Validation */
    .light-form .text-danger,
    .light-form .field-validation-error,
    .light-form .validation-summary-errors,
    .light-form .validation-summary-errors li {
        color: #dc3545 !important;
    }

    /* Inputs */
    .light-form .form-control,
    .light-form .form-select,
    .light-form textarea {
        background-color: #ffffff !important;
        color: #111827 !important;
        border: 1px solid #d1d5db !important;
    }

        /* Placeholder */
        .light-form .form-control::placeholder,
        .light-form textarea::placeholder {
            color: #9ca3af !important;
        }

        /* Focus */
        .light-form .form-control:focus,
        .light-form .form-select:focus,
        .light-form textarea:focus {
            border-color: #2563eb !important;
            box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .15) !important;
        }

    /* Checkboxes / radios */
    .light-form .form-check-label {
        color: #111827 !important;
    }

    /* Cards inside light surface */
    .light-form .card,
    .light-form .app-card {
        background: #ffffff !important;
        border-color: #e5e7eb !important;
        color: #111827 !important;
    }

    /* Table text inside light surface (optional but helpful in dark themes) */
    .light-form .table,
    .light-form .table th,
    .light-form .table td {
        color: #111827 !important;
    }

    /* Divider */
    .light-form .form-divider {
        border-top: 1px solid #e5e7eb;
        opacity: 1;
    }


/* Light form: make unchecked checkboxes visible */
.light-form .form-check-input {
    border: 1px solid rgba(0,0,0,.35);
    background-color: #fff;
}

/* Checked state */
.light-form .form-check-input:checked {
    background-color: var(--accent, #e63946);
    border-color: var(--accent, #e63946);
}

/* Focus ring */
.light-form .form-check-input:focus {
    border-color: var(--accent, #e63946);
    box-shadow: 0 0 0 .2rem rgba(230, 57, 70, .25);
}

/* Optional: slightly larger for visibility */
.light-form .form-check-input {
    width: 1.1rem;
    height: 1.1rem;
}
    /* Stronger, higher-contrast tab links on light-form surfaces */
    .light-form .nav-tabs .nav-link {
        color: rgba(0,0,0,0.3) !important; /* dark text */
        font-weight: 600;
        opacity: 1;
    }

        .light-form .nav-tabs .nav-link:hover,
        .light-form .nav-tabs .nav-link:focus {
            color: gray; /* bootstrap primary-ish */
            background-color: grey !important;
            border-color: #dee2e6 #dee2e6 #ffffff;
        }

        /* Active tab: clear emphasis */
        .light-form .nav-tabs .nav-link.active {
            color: #0b5ed7;
            background-color: #ffffff;
            border-color: #dee2e6 #dee2e6 #ffffff;
        }

    /* Optional: ensure the tab row itself doesn’t look muddy */
    .light-form .nav-tabs {
        border-bottom-color: #dee2e6;
    }

    /* Force readable brown links inside light-form */
    .light-form a {
        color: #8b4513 !important; /* brown */
        text-decoration: none;
    }

        .light-form a:hover,
        .light-form a:focus {
            color: #5c2e0e !important; /* darker brown on hover */
            text-decoration: underline;
        }

        /* Optional: visited state */
        .light-form a:visited {
            color: #7a3b10 !important;
        }

/* =========================================================
   USER DETAILS FORM – polished light card
   ========================================================= */

/* Keep labels above + tight to inputs (scoped) */
#user-details-form .form-label {
    display: block;
    margin-bottom: .2rem !important; /* tighter than Bootstrap default */
    line-height: 1.15;
}

/* Optional: tighten overall spacing between fields for THIS form only */
#user-details-form .row.g-3 {
    --bs-gutter-y: .65rem; /* default is 1rem */
}

/* Optional: if some controls still look like they sit low */
#user-details-form .form-control,
#user-details-form .form-select,
#user-details-form textarea {
    margin-top: 0 !important;
}

.user-details-form {
    padding-bottom: 92px; /* keep content above fixed bottom bar */
}

/* Centered card container */
.user-details-card {
    max-width: 960px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 10px 30px rgba(17, 24, 39, 0.08);
}

/* On mobile, breathe */
@media (max-width: 576px) {
    .user-details-card {
        padding: 14px;
        border-radius: 14px;
    }
}

/* Phone row sizing */
.user-details-form .phone-row {
    max-width: 90%;
}

.user-details-form .phone-code {
    width: 38%;
    min-width: 140px;
}

@media (max-width: 576px) {
    .user-details-form .phone-row {
        max-width: 100%;
    }

    .user-details-form .phone-code {
        width: 42%;
        min-width: 120px;
    }
}

/* Rounded controls (force override Bootstrap) */
.light-form.user-details-form .form-control,
.light-form.user-details-form .form-select,
.light-form.user-details-form textarea {
    border-radius: 14px !important;
    border: 1px solid #d1d5db !important;
    background: #ffffff !important;
    color: #111827 !important;
}

/* Bigger controls feel premium */
.light-form.user-details-form .form-control-lg,
.light-form.user-details-form .form-select-lg {
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}

/* Focus style */
.light-form.user-details-form .form-control:focus,
.light-form.user-details-form .form-select:focus,
.light-form.user-details-form textarea:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 .25rem rgba(37, 99, 235, .14) !important;
}

/* Helper text */
.light-form.user-details-form .helper-text {
    display: inline-block;
    margin-top: 6px;
    color: #6b7280 !important;
    font-size: 0.9rem;
}

/* Make placeholders softer */
.light-form.user-details-form .form-control::placeholder,
.light-form.user-details-form textarea::placeholder {
    color: #9ca3af !important;
}

/* Optional: nicer headings */
.light-form.user-details-form h3 {
    font-weight: 700;
    letter-spacing: -0.01em;
}
/* =========================================================
   MENU PAGE (scoped styles) – layout only
   ========================================================= */

/* Hide floating buttons when any Bootstrap modal is open */
body.modal-open #menu-container.menu-page #order-context-sticky-btn,
body.modal-open #menu-container.menu-page #view-cart {
    display: none !important;
}

/* Remove spacing ONLY inside menu page */
#menu-container.menu-page,
#menu-container.menu-page #menu-groups,
#menu-container.menu-page section {
    margin: 0 !important;
    padding: 0 !important;
}

    /* Remove bootstrap row/col padding ONLY inside menu page */
    #menu-container.menu-page .row.g-0 > [class^="col"] {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Remove container padding ONLY inside menu page */
    #menu-container.menu-page .container,
    #menu-container.menu-page .container-fluid {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

   


    /* Group header */
    #menu-container.menu-page .group-title {
        padding: 6px 8px;
        background-color: #2b2f33;
        color: #e9ecef !important;
        font-weight: 500;
        border-bottom: 1px solid #3a3f44;
    }

    /* Menu group buttons */
    #menu-container.menu-page .menu-group-btn {
        white-space: nowrap;
    }

    /* Item details modal scroll behavior */
    #menu-container.menu-page #itemDetailsModal .modal-content {
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - 2rem);
    }

    #menu-container.menu-page #itemDetailsModal .modal-body-scroll {
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        min-height: 0;
    }

    #menu-container.menu-page #itemDetailsModal .modal-header,
    #menu-container.menu-page #itemDetailsModal .modal-footer {
        flex: 0 0 auto;
    }


/* MENU GROUP NAV – sticky at top */
#menu-group-bar {
    position: sticky;
    top: 0; /* stick to very top */
    z-index: 5000;
    background: #121212; /* ensure it paints over content */
    box-shadow: 0 2px 6px rgba(0,0,0,.3);
}

/* If you ever have a top alert/banner, bump this value */

/* =========================================================
   MENU GRID + MENU TILE (component, reusable)
   (NO dependency on #menu-container)
   ========================================================= */

:root {
    --menu-tile-radius: 1rem;
}

/* Safety */
.menu-tiles-row *,
.menu-tile *,
.menu-tile *::before,
.menu-tile *::after {
    box-sizing: border-box;
}

.menu-tiles-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    align-items: stretch;
}

/* 2-up on phones */
.menu-tile-wrapper {
    flex: 0 0 calc(50% - 8px);
    max-width: calc(50% - 8px);
    display: flex;
    justify-content: center;
}

/* Ultra-small fallback */
@media (max-width: 320px) {
    .menu-tile-wrapper {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* 3-up on tablets */
@media (min-width: 576px) {
    .menu-tile-wrapper {
        flex: 0 0 calc(33.333% - 8px);
        max-width: calc(33.333% - 8px);
    }
}

/* 4-up on desktop */
@media (min-width: 992px) {
    .menu-tile-wrapper {
        flex: 0 0 calc(25% - 8px);
        max-width: calc(25% - 8px);
    }
}

/* Tile card */
.menu-tile {
    min-width: 0;
    width: 100%;
    max-width: 240px;
    margin: 0 auto;
    border-radius: var(--menu-tile-radius) !important;
    overflow: hidden; /* ensures rounded corners clip background/border */
}

    /* Stable image area */
    .menu-tile .menu-tile-imgwrap {
        width: 100%;
        aspect-ratio: 4 / 3;
        position: relative;
        border-radius: var(--menu-tile-radius);
        overflow: hidden;
    }

    .menu-tile .menu-item-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        cursor: pointer;
    }

    /* Title */
    .menu-tile .menu-title-wrap {
        width: 100%;
    }

    .menu-tile .menu-title {
        font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
        font-weight: 500;
        font-size: clamp(0.8rem, 2.2vw, 0.95rem);
        text-align: center;
        display: block;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        letter-spacing: 0.3px;
    }

    /* Price badge (bigger) */
    .menu-tile .menu-price {
        font-size: clamp(1rem, 3.4vw, 1.25rem);
        font-weight: 800;
        padding: 5px 9px;
        border-radius: 0.45rem;
        line-height: 1.1;
    }

    /* Sold out */
    .menu-tile.sold-out {
        opacity: 0.65;
        filter: grayscale(0.2);
    }

    /* Main plus */
    .menu-tile .btnPlusMain {
        width: clamp(34px, 4.8vw, 40px);
        height: clamp(34px, 4.8vw, 40px);
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.55);
        border: none;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        cursor: pointer;
        transition: background 0.2s ease;
        line-height: 1;
        font-size: clamp(1.3rem, 3.8vw, 1.6rem);
    }

        .menu-tile .btnPlusMain:hover {
            background: rgba(0, 0, 0, 0.75);
        }

    /* Qty controls */
    .menu-tile .qty-section {
        margin-top: 0.6rem;
    }

    .menu-tile .qty-controls .btn-minus-regular,
    .menu-tile .qty-controls .btn-plus-regular {
        width: clamp(30px, 4.8vw, 36px);
        height: clamp(30px, 4.8vw, 36px);
        font-size: clamp(1.1rem, 3.4vw, 1.35rem);
        line-height: 1;
    }

    .menu-tile .item-count-regular {
        font-size: clamp(1.2rem, 3.6vw, 1.5rem);
        min-width: 26px;
        text-align: center;
    }

    .menu-tile .btn-minus-small,
    .menu-tile .btn-plus-small {
        width: clamp(20px, 3.4vw, 24px);
        height: clamp(20px, 3.4vw, 24px);
        font-size: clamp(0.85rem, 2.8vw, 1rem);
        line-height: 1;
    }

    /* Veg icon */
    .menu-tile .veg-icon {
        display: flex;
        justify-content: center;
        align-items: center;
    }

/* Micro-phone tweaks */
@media (max-width: 360px) {
    .menu-tile .menu-price {
        font-size: 0.9rem;
        padding: 4px 7px;
    }

    .menu-tile .counterMainContainer {
        gap: 8px !important;
    }
}