/*
 * Mobile "app-like" styling for the Website Panel.
 * Everything in here is scoped inside the max-width media query so the
 * desktop site is completely untouched — this only takes effect on phone
 * viewports. Color tokens are copied 1:1 from the Flutter customer app's
 * theme (customer/lib/themes/app_them_data.dart) so the site and the app
 * look like the same product side by side.
 */

@media (max-width: 992px) {
    :root {
        --mg-primary-50: #F0EBFD;
        --mg-primary-300: #9F6CE6;
        --mg-primary-600: #0F0918;
        --mg-secondary-50: #EBE5FF;
        --mg-secondary-300: #6839FF;
        --mg-info-300: #38D0FF;
        --mg-danger-300: #FF3840;
        --mg-success-300: #19FFA3;
        --mg-success-bg: #EFF9EB;
        --mg-success-text: #3F8826;
        --mg-warning-300: #FFCB39;
        --mg-grey-50: #FFFFFF;
        --mg-grey-100: #F3F4F6;
        --mg-grey-200: #E5E7EB;
        --mg-grey-400: #9CA3AF;
        --mg-grey-600: #4B5563;
        --mg-grey-700: #374151;
        --mg-grey-900: #111827;
        --mg-surface: #F9FAFB;
        --mg-bottom-nav-height: 62px;
    }

    body {
        font-family: 'Urbanist', sans-serif;
        background: var(--mg-surface);
        /* leave room so content isn't hidden behind the fixed bottom nav */
        padding-bottom: calc(var(--mg-bottom-nav-height) + env(safe-area-inset-bottom, 0px));
    }

    /* ---------- Bottom navigation bar ---------- */
    .mg-bottom-nav,
    .mg-bottom-nav * {
        box-sizing: border-box;
    }

    .mg-bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        display: flex;
        align-items: stretch;
        background: var(--mg-grey-50);
        border-top: 1px solid var(--mg-grey-200);
        /* min-height (not a fixed height) so the bar grows instead of
         * clipping/overflowing if a browser renders the icon font or label
         * text taller than expected (seen on Chrome/Android vs Safari). */
        min-height: var(--mg-bottom-nav-height);
        padding: 6px 0;
        padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -2px 10px rgba(17, 24, 39, 0.06);
        overflow: hidden;
    }

    .mg-bottom-nav a {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        color: var(--mg-grey-600);
        text-decoration: none;
        font-size: 11px;
        line-height: 1.2;
        font-family: 'Urbanist', sans-serif;
        white-space: nowrap;
    }

    .mg-bottom-nav a i {
        display: block;
        font-size: 18px;
        line-height: 1;
    }

    .mg-bottom-nav a.active {
        color: var(--mg-primary-300);
    }

    /* Cart tab: same layout as the other bottom-nav tabs, plus a badge that
     * only shows once there's something in the cart (see #mg-cart-badge,
     * updated live by layouts.cart_bar's mgRefreshCartCount()). */
    .mg-nav-cart-icon-wrap {
        position: relative;
        display: inline-flex;
    }

    .mg-nav-cart-tab.mg-active-cart i {
        color: var(--mg-primary-300);
    }

    /* ---------- Home screen: reorder sections to match the app ----------
     * App order (as described by the user, watching the real app): Stories
     * -> Categories -> Banner -> Biggest discounts (offers) -> New arrivals
     * -> a second banner slider (middle banner) -> Highlights for you ->
     * Popular/All restaurants toggle -> restaurant list. The banner div was
     * moved in home.blade.php to be the first child of .ecommerce-content
     * (was a separate block before it) specifically so it can be reordered
     * here — on desktop nothing changed, .ecommerce-content isn't flex there
     * so it just renders in that same (original) DOM order. Extra sections
     * the app doesn't have (most-popular-item, home-categories) are kept,
     * just pushed after the main flow instead of removed. */
    .ecommerce-content.multi-vendore-content {
        display: flex;
        flex-direction: column;
    }

    .restaurant_stories { order: 1; }
    .top-categories.top-categories-section { order: 2; }
    .ecommerce-banner.multivendor-banner { order: 3; }
    .offers-coupons-section { order: 4; }
    .new-arrivals-section { order: 5; }
    .middle-banners-section { order: 6; }
    .top-categories.highlights-section { order: 7; }
    .mg-restaurant-toggle-wrap { order: 8; }
    .most-popular-store-section { order: 9; }
    .all-stores-section { order: 10; }
    .home-categories-section { order: 11; }

    /* "Alimentos Populares" — the app's home has no equivalent section, and
     * the user asked to drop it from the mobile site rather than just push
     * it to the bottom. Desktop is untouched (rule is inside this media
     * query only). */
    .most-popular-item-section {
        display: none !important;
    }

    /* Search bar: already rendered near the top (before the banner/content),
     * which already matches the app's header -> search -> content order. */
    .mobile-filter.section-content {
        border-radius: 0 0 16px 16px;
    }

    /* ---------- Popular / All restaurants toggle ---------- */
    .mg-restaurant-toggle-wrap {
        display: block;
        padding: 4px 16px 14px;
    }

    .mg-restaurant-toggle {
        display: flex;
        background: var(--mg-grey-100);
        border-radius: 999px;
        padding: 4px;
        gap: 4px;
    }

    .mg-toggle-btn {
        flex: 1;
        border: 0;
        background: transparent;
        border-radius: 999px;
        padding: 9px 6px;
        font-size: 13px;
        font-family: 'Urbanist', sans-serif;
        font-weight: 600;
        color: var(--mg-grey-600);
        transition: background 0.2s ease, color 0.2s ease;
    }

    .mg-toggle-btn.active {
        background: var(--mg-primary-300);
        color: var(--mg-grey-50);
    }

    /* The toggle replaces these two sections' own titles/see-all links on
     * mobile (desktop keeps them, both sections stay statically visible
     * there as before). */
    .most-popular-store-section .title,
    .all-stores-section .title {
        display: none;
    }

    /* ================= Restaurant / menu page (Fase 2) ================= */

    /* Banner: single hero image (app doesn't show a side gallery), with
     * floating back/cart buttons overlaid like the app's collapsing header. */
    .resturant-banner {
        position: relative;
        padding: 0 !important;
    }

    .resturant-banner-inner .col-md-8#restaurant-pic,
    #restaurant-pic {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0;
    }

    .resturant-banner-inner #restaurant-pic img,
    .resturant-banner-inner .restaurant-pic {
        height: 220px;
        width: 100%;
        object-fit: cover;
        display: block;
    }

    #restaurant-gallery {
        display: none !important;
    }

    .mg-banner-back-btn {
        position: absolute;
        top: 14px;
        left: 14px;
        z-index: 20;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.92);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--mg-grey-900);
        box-shadow: 0 2px 6px rgba(17, 24, 39, 0.15);
    }

    .mg-cart-badge {
        position: absolute;
        top: -4px;
        right: -4px;
        min-width: 16px;
        height: 16px;
        padding: 0 3px;
        border-radius: 999px;
        background: var(--mg-danger-300);
        color: var(--mg-grey-50);
        font-size: 10px;
        line-height: 16px;
        text-align: center;
        font-family: 'Urbanist', sans-serif;
        font-weight: 700;
    }

    /* Category list: horizontal scrollable chips instead of the desktop
     * sidebar. Same markup (<ul class="vandorcat-list"><li class="category-item">),
     * only the layout changes here. */
    .restaurant-detail-left,
    .restaurant-detail-right {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .vandor-sidebar > h3 {
        display: none;
    }

    .vandorcat-list {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 8px;
        padding: 10px 16px;
        margin: 0;
        list-style: none;
        -webkit-overflow-scrolling: touch;
    }

    .vandorcat-list .category-item {
        flex: 0 0 auto;
    }

    .vandorcat-list .category-item a {
        display: flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
        background: var(--mg-grey-100);
        color: var(--mg-grey-700);
        border-radius: 999px;
        padding: 8px 14px;
        font-size: 13px;
        font-family: 'Urbanist', sans-serif;
        font-weight: 600;
    }

    .vandorcat-list .category-item a img {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        object-fit: cover;
    }

    .vandorcat-list .category-item.active a {
        background: var(--mg-primary-300);
        color: var(--mg-grey-50);
    }

    /* Product list: single column full-width cards (Bootstrap's col-md-4
     * already stacks below 768px, but our mobile mode goes up to 992px, so
     * force it here to avoid a 3-column layout in the 769-991px gap). */
    #product-list .col-md-4.product-list {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* ================= Search results (Fase 4) =================
     * Same single-column treatment as the restaurant/product listings above
     * — search.blade.php reuses the same .list-card markup, just wrapped in
     * col-md-3 instead of col-md-4, and had no mobile CSS at all before. */
    #append_list1 .col-md-3,
    #append_list2 .col-md-3 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Product detail bottom sheet (iframe embed of products/detail.blade.php) */
    .mg-product-sheet-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(15, 9, 24, 0.45);
        z-index: 1040;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }

    .mg-product-sheet-backdrop.mg-open {
        opacity: 1;
        pointer-events: auto;
    }

    .mg-product-sheet {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 88vh;
        background: var(--mg-grey-50);
        border-radius: 20px 20px 0 0;
        z-index: 1041;
        transform: translateY(100%);
        transition: transform 0.3s ease;
        box-shadow: 0 -6px 24px rgba(15, 9, 24, 0.25);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .mg-product-sheet.mg-open {
        transform: translateY(0);
    }

    .mg-product-sheet-handle {
        width: 40px;
        height: 4px;
        border-radius: 999px;
        background: var(--mg-grey-200);
        margin: 10px auto 4px;
        flex: 0 0 auto;
    }

    .mg-product-sheet iframe {
        flex: 1 1 auto;
        width: 100%;
        border: 0;
    }

    .mg-product-sheet-loading {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 14px;
        bottom: 0;
        z-index: 1;
        align-items: center;
        justify-content: center;
        background: var(--mg-grey-50);
    }

    .mg-product-sheet-loading.mg-visible {
        display: flex;
    }

    /* ================= Profile page (Fase 6) =================
     * Mobile shows an options menu first (mirrors the app's Profile tab);
     * tapping "Mi cuenta" reveals the existing edit form/sidebar
     * (#mg-profile-edit-view) that desktop always shows directly. */
    .mg-profile-menu {
        margin: 16px;
        background: var(--mg-grey-50);
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 2px 10px rgba(17, 24, 39, 0.06);
    }

    .mg-profile-menu-header {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 20px 16px;
        border-bottom: 1px solid var(--mg-grey-200);
    }

    .mg-profile-menu-avatar img {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        object-fit: cover;
    }

    .mg-profile-menu-name {
        font-family: 'Urbanist', sans-serif;
        font-weight: 700;
        font-size: 16px;
        color: var(--mg-grey-900);
    }

    .mg-profile-menu-email {
        font-family: 'Urbanist', sans-serif;
        font-size: 13px;
        color: var(--mg-grey-500);
    }

    .mg-profile-menu-list {
        display: flex;
        flex-direction: column;
    }

    .mg-profile-menu-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 15px 16px;
        border-bottom: 1px solid var(--mg-grey-100);
        color: var(--mg-grey-900);
        font-family: 'Urbanist', sans-serif;
        font-size: 15px;
        font-weight: 600;
        text-decoration: none;
    }

    .mg-profile-menu-item:last-child {
        border-bottom: 0;
    }

    .mg-profile-menu-item i:first-child {
        color: var(--mg-primary-300);
        font-size: 18px;
    }

    .mg-profile-menu-item .feather-chevron-right {
        color: var(--mg-grey-400);
        font-size: 16px;
    }

    .mg-profile-menu-danger,
    .mg-profile-menu-danger i:first-child {
        color: var(--mg-danger-300);
    }

    .mg-profile-back-btn {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 16px 0 0;
        font-family: 'Urbanist', sans-serif;
        font-weight: 700;
        font-size: 16px;
        color: var(--mg-grey-900);
        text-decoration: none;
    }

    /* Hidden until the user taps into it from the menu above. */
    #mg-profile-edit-view {
        display: none;
    }

    #mg-profile-edit-view.mg-open {
        display: block;
    }
}

@media (min-width: 993px) {
    .mg-bottom-nav {
        display: none !important;
    }

    .mg-restaurant-toggle-wrap {
        display: none !important;
    }

    .mg-banner-back-btn,
    .mg-product-sheet,
    .mg-product-sheet-backdrop {
        display: none !important;
    }

    .mg-profile-menu,
    .mg-profile-back-btn {
        display: none !important;
    }
}