/* ==========================================================================
   MAAFLASH — SWIGGY-STYLE THEME
   Bold orange/coral, rounded pill buttons, playful energetic food-app feel.
   Sections marked [BEST-EFFORT] use generic selectors for your order
   tracking page since exact classes weren't available yet — send me those
   and I'll swap them in for pixel-perfect targeting.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap');

:root {
    --sw-orange: #FC8019;
    --sw-orange-deep: #E06E00;
    --sw-orange-light: #FFF1E4;
    --sw-red: #EA1D24;
    --sw-ink: #14161a;
    --sw-ink-soft: #3a3d44;
    --sw-muted: #6b6f76;
    --sw-line: #EFEFEF;
    --sw-surface: #FFFFFF;
    --sw-bg: #F8F8F8;
    --sw-green: #48A860;
    --sw-radius-lg: 16px;
    --sw-radius-md: 10px;
    --sw-radius-pill: 999px;
    --sw-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --sw-shadow-1: 0 1px 4px rgba(20, 22, 26, 0.06);
    --sw-shadow-2: 0 10px 28px rgba(20, 22, 26, 0.12);
    --sw-shadow-orange: 0 6px 18px rgba(252, 128, 25, 0.32);
}

* { font-family: 'Outfit', 'Segoe UI', sans-serif !important; }

body {
    background: var(--sw-bg) !important;
}

/* ===== HEADER ===== */
.sh-header-main {
    background: var(--sw-surface) !important;
    color: var(--sw-ink) !important;
    box-shadow: var(--sw-shadow-1);
    border-bottom: 1px solid var(--sw-line);
}

.sh-header-location-icon { fill: var(--sw-orange) !important; }
.sh-header-account-icon,
.sh-header-cart-icon,
.sh-header-search-icon { stroke: var(--sw-ink) !important; transition: stroke 0.2s var(--sw-ease); }
.sh-header-account-icon:hover,
.sh-header-cart-icon:hover,
.sh-header-search-icon:hover { stroke: var(--sw-orange) !important; }
.sh-header-arrow-icon { fill: var(--sw-orange) !important; }
.sh-header-mob-menu-icon { color: var(--sw-ink) !important; }

.sh-header-cart-badge {
    background: var(--sw-orange);
    color: #fff;
    font-weight: 700;
    font-size: 11px;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    box-shadow: var(--sw-shadow-orange);
    animation: swPop 0.3s var(--sw-ease);
}

@keyframes swPop {
    0% { transform: scale(0.6); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* ===== CATEGORIES ===== */
.sh-categories-container { background: var(--sw-bg) !important; }

.sh-category-card {
    margin: 0 10px 10px;
    padding-top: 8px;
    border-radius: var(--sw-radius-md);
    background: var(--sw-surface);
    border: 1px solid var(--sw-line);
    transition: transform 0.2s var(--sw-ease), box-shadow 0.2s var(--sw-ease);
}
.sh-category-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sw-shadow-2);
}

.sh-row-title-divider { display: none; }

/* ===== PRODUCT CARDS ===== */
.sh-product-card {
    border: 1px solid var(--sw-line);
    border-radius: var(--sw-radius-lg);
    background: var(--sw-surface);
    overflow: hidden;
    position: relative;
    transition: transform 0.25s var(--sw-ease), box-shadow 0.25s var(--sw-ease);
}
.sh-product-card:hover {
    box-shadow: var(--sw-shadow-2);
    transform: translateY(-4px);
}

.sh-product-card-name {
    color: var(--sw-ink) !important;
    font-weight: 600 !important;
    line-height: 1.4;
}

.sh-product-card-price {
    color: var(--sw-ink) !important;
    font-weight: 800 !important;
}

.sh-product-card-mrp {
    color: var(--sw-muted) !important;
    text-decoration: line-through;
    font-size: 0.85em;
}

/* Swiggy-style bold rectangular discount tag */
.sh-product-card-discount-tag {
    background: var(--sw-green);
    color: #fff !important;
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: 0.2px;
    border-radius: 6px 0 6px 0;
    right: auto;
    top: 0;
    left: 0;
    padding: 5px 10px;
}

.sh-product-discount-tag {
    background: var(--sw-orange-light);
    color: var(--sw-orange-deep);
    font-weight: 700;
    border-radius: var(--sw-radius-pill);
    padding: 4px 12px;
    font-size: 12px;
    border: 1px dashed var(--sw-orange);
}

/* ===== BUTTONS — pill-shaped, Swiggy signature ===== */
.sh-product-plus-minus-button {
    background: #fff;
    color: var(--sw-orange-deep);
    border: 1.5px solid var(--sw-orange);
    border-radius: var(--sw-radius-md);
    fill: var(--sw-orange);
    font-weight: 700;
    box-shadow: var(--sw-shadow-1);
    transition: all 0.15s var(--sw-ease);
}
.sh-product-plus-minus-button:hover {
    background: var(--sw-orange);
    color: #fff;
}
.sh-product-plus-minus-button:active { transform: scale(0.94); }

.sh-product-card-enquiry,
.sh-product-enquiry {
    border: 1.5px solid var(--sw-orange) !important;
    color: var(--sw-orange-deep) !important;
    background: #FFFFFF !important;
    border-radius: var(--sw-radius-pill);
    font-weight: 700;
}
.sh-product-card-enquiry:hover,
.sh-product-enquiry:hover {
    background: var(--sw-orange-light) !important;
}

.sh-solid-button,
.sh-product-buy-now-button {
    border-radius: var(--sw-radius-pill);
    border: none !important;
    background: var(--sw-orange);
    color: #FFFFFF;
    font-weight: 700;
    letter-spacing: 0.2px;
    padding: 13px 28px;
    box-shadow: var(--sw-shadow-orange);
    transition: all 0.2s var(--sw-ease);
}
.sh-solid-button:hover,
.sh-product-buy-now-button:hover {
    background: var(--sw-orange-deep) !important;
    transform: translateY(-2px);
}
.sh-solid-button:active,
.sh-product-buy-now-button:active { transform: translateY(0); }

.sh-outlined-button {
    border-radius: var(--sw-radius-pill);
}

/* ===== WISHLIST & SOCIAL ===== */
.sh-product-wishlist-desktop { border-color: var(--sw-red) !important; border-radius: 50%; }
.sh-product-share-icon { stroke: var(--sw-orange) !important; }
.sh-product-share-icon:hover { stroke: var(--sw-orange-deep) !important; }
.sh-product-social-button { background: var(--sw-orange); fill: var(--sw-orange); border-radius: 50%; }
.sh-product-social-button:hover { transform: scale(1.1); }
.sh-product-wishlisted-icon { fill: var(--sw-red) !important; animation: swPop 0.3s var(--sw-ease); }
.sh-product-not-wishlisted-icon { stroke: var(--sw-red) !important; }
.sh-product-not-wishlisted-icon:hover { transform: scale(1.15); }

/* ===== BOTTOM NAVIGATION ===== */
.sh-bottom-nav-main {
    background: var(--sw-surface);
    box-shadow: 0 -4px 16px rgba(20, 22, 26, 0.08);
    border-top: 1px solid var(--sw-line);
}
.sh-bottom-nav-selected {
    stroke: var(--sw-orange) !important;
    color: var(--sw-orange) !important;
    fill: none !important;
}
.sh-bottom-nav-unselected {
    stroke: var(--sw-muted) !important;
    color: var(--sw-muted) !important;
}
.sh-bottom-nav-cart-badge {
    background: var(--sw-orange) !important;
    color: #fff !important;
    font-weight: 700;
    font-size: 11px;
}

/* ===== FOOTER ===== */
.sh-footer-main {
    background: #FFF8F2;
    color: var(--sw-ink-soft) !important;
    border-top: 1px solid var(--sw-line);
}
.sh-footer-icon { color: var(--sw-orange) !important; }
.sh-footer-icon:hover { color: var(--sw-orange-deep) !important; }

/* ===== IMAGE QUALITY ===== */
img { image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; }
.sh-product-card img,
.sh-product-image {
    transform: translateZ(0);
    transition: transform 0.35s var(--sw-ease);
}
.sh-product-card:hover img { transform: scale(1.05) translateZ(0); }


/* ==========================================================================
   ORDER TRACKING ANIMATION — exact match to your MUI Stepper
   (Confirmed / Order Preparing / Out for Delivery)
   ========================================================================== */

.MuiStepper-root {
    padding: 24px 12px !important;
}

/* Step icon color is driven by the --primary-contrast-text CSS variable
   read inside the inline SVG — override it per state, scoped so it can't
   leak into anything else on the page. */
.MuiStep-root.Mui-completed .qonto-step-icon-root {
    --primary-contrast-text: var(--sw-green);
}
.MuiStep-root.Mui-active .qonto-step-icon-root {
    --primary-contrast-text: var(--sw-orange);
}
.MuiStep-root:not(.Mui-completed):not(.Mui-active) .qonto-step-icon-root {
    --primary-contrast-text: #C9C9C9;
}

/* Pulsing ring around the current/active step to signal "live" */
.MuiStep-root.Mui-active .MuiStepLabel-iconContainer {
    position: relative;
}
.MuiStep-root.Mui-active .MuiStepLabel-iconContainer::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 40px; height: 40px;
    margin: -20px 0 0 -20px;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(252, 128, 25, 0.45);
    animation: swPulse 1.5s ease-out infinite;
    pointer-events: none;
}
@keyframes swPulse {
    0% { box-shadow: 0 0 0 0 rgba(252, 128, 25, 0.45); }
    100% { box-shadow: 0 0 0 16px rgba(252, 128, 25, 0); }
}

/* Gentle bounce on the active step icon itself */
.MuiStep-root.Mui-active .qonto-step-icon-root {
    animation: swBounce 1.3s ease-in-out infinite;
}
@keyframes swBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* Connector line between steps */
.MuiStepConnector-line {
    border-top-width: 3px !important;
    transition: border-color 0.4s var(--sw-ease);
}
.MuiStepConnector-root.Mui-completed .MuiStepConnector-line {
    border-color: var(--sw-green) !important;
}
/* The connector leading into the current step animates like it's
   actively "filling" toward the next status */
.MuiStepConnector-root.Mui-active .MuiStepConnector-line {
    border-image: repeating-linear-gradient(
        90deg,
        var(--sw-orange) 0px,
        var(--sw-orange) 10px,
        rgba(252, 128, 25, 0.25) 10px,
        rgba(252, 128, 25, 0.25) 20px
    ) 1;
    animation: swDash 1s linear infinite;
}
@keyframes swDash {
    to { border-image-slice: 1; filter: hue-rotate(0deg); background-position: -20px 0; }
}

/* Step labels */
.MuiStepLabel-label {
    font-weight: 600 !important;
    color: var(--sw-muted) !important;
    letter-spacing: 0.2px;
    transition: color 0.3s var(--sw-ease);
}
.MuiStepLabel-label.Mui-completed {
    color: var(--sw-green) !important;
}
.MuiStepLabel-label.Mui-active {
    color: var(--sw-orange-deep) !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   DELIVERY TIME PROGRESS BAR
   A visual approximation only — CSS can't read your real ETA text or sync
   to actual remaining minutes, that needs app logic on Shoopy's side. This
   bar fills over a fixed duration you set below, restarting each time the
   tracking page is opened or refreshed. Change --sw-eta-minutes to match
   your typical delivery estimate.
   ========================================================================== */

:root {
    --sw-eta-minutes: 30;
}

.MuiStepper-root {
    position: relative;
    padding-bottom: 64px !important;
}

.MuiStepper-root::before {
    content: "";
    position: absolute;
    bottom: 6px;
    left: 24px;
    right: 24px;
    height: 6px;
    background: var(--sw-line);
    border-radius: 999px;
    z-index: 1;
}

.MuiStepper-root::after {
    content: "";
    position: absolute;
    bottom: 6px;
    left: 24px;
    width: 0%;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--sw-orange), var(--sw-green));
    z-index: 2;
    animation: swEtaFill calc(var(--sw-eta-minutes) * 60s) linear forwards;
}

@keyframes swEtaFill {
    from { width: 0%; }
    to { width: calc(100% - 48px); }
}

/* ==========================================================================
   VISUALLY SPLIT "OUT FOR DELIVERY / DELIVERED" INTO TWO STEPS
   Step 3 relabels to just "OUT FOR DELIVERY" and turns green once active
   (as if completed). A separate "Delivered" badge then appears below the
   stepper. Both fire off the exact same real status change — there is no
   real data distinguishing "still on the way" from "actually arrived".
   Requires :has() support (all modern browsers, 2023+).
   ========================================================================== */

.MuiStepper-root .MuiStep-root:last-child:not(.Mui-active) .MuiStepLabel-label {
    font-size: 0 !important;
}
.MuiStepper-root .MuiStep-root:last-child:not(.Mui-active) .MuiStepLabel-label::after {
    content: "OUT FOR DELIVERY";
    font-size: 12px;
    font-weight: 600;
    color: var(--sw-muted);
}

.MuiStepper-root .MuiStep-root:last-child.Mui-active .MuiStepLabel-label::after {
    content: "OUT FOR DELIVERY";
    color: var(--sw-green) !important;
}

.MuiStepper-root:has(.MuiStep-root:last-child.Mui-active)::before,
.MuiStepper-root:has(.MuiStep-root:last-child.Mui-active)::after {
    z-index: 1;
}

.MuiStepper-root:has(.MuiStep-root:last-child.Mui-active) {
    padding-bottom: 64px !important;
}

.MuiStepper-root:has(.MuiStep-root:last-child.Mui-active) .MuiStep-root:last-child::before {
    content: "\2713  DELIVERED";
    position: absolute;
    left: 50%;
    bottom: -58px;
    transform: translateX(-50%);
    display: block;
    white-space: nowrap;
    padding: 8px 18px;
    background: var(--sw-green);
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.3px;
    border-radius: 999px;
    box-shadow: 0 4px 10px rgba(29, 165, 108, 0.35);
    animation: swBadgeIn 0.4s var(--sw-ease) both;
    z-index: 3;
}

@keyframes swBadgeIn {
    from { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(0.9); }
    60% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.05); }
    to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

.MuiStepper-root:has(.MuiStep-root:last-child.Mui-active) .MuiStep-root:last-child::before {
    animation: swBadgeIn 0.5s var(--sw-ease) both, swBadgePulse 2s ease-in-out 0.5s infinite;
}

@keyframes swBadgePulse {
    0%, 100% { box-shadow: 0 4px 10px rgba(29, 165, 108, 0.35); }
    50% { box-shadow: 0 4px 18px rgba(29, 165, 108, 0.6); }
}

/* ==========================================================================
   "DELIVERED" VISUAL TRICK
   Shoopy combines Out for Delivery + Delivered into a single status, so
   this step turns active the moment the order leaves for delivery, not
   only once it arrives. This override makes that final step present as
   a completed, confident "Delivered" state — checkmark, green, no pulse —
   rather than the in-progress orange truck. Purely cosmetic; it does not
   change or fake your actual order status data.
   ========================================================================== */

.MuiStepper-root .MuiStep-root:last-child.Mui-active .qonto-step-icon-root {
    animation: none !important;
}

.MuiStepper-root .MuiStep-root:last-child.Mui-active .qonto-step-icon-root svg {
    opacity: 0 !important;
}

.MuiStepper-root .MuiStep-root:last-child.Mui-active .MuiStepLabel-iconContainer::after {
    content: "\2713" !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%; left: 50%;
    width: 44px; height: 44px;
    margin: -22px 0 0 -22px;
    border-radius: 50%;
    background: var(--sw-green);
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(29, 158, 117, 0.35);
    animation: none !important;
}

.MuiStepper-root .MuiStep-root:last-child.Mui-active .MuiStepConnector-line {
    border-image: none !important;
    border-color: var(--sw-green) !important;
    animation: none !important;
}