/*
 * First Cradle
 * Mobile Storefront Polish v1
 *
 * Scope:
 * - mobile city switcher
 * - mobile WooCommerce shop/category spacing
 * - compact mobile category navigation
 *
 * Does NOT modify booking-request.css or booking workflow.
 */


/* =========================================================
 * MOBILE CITY SWITCHER
 * ========================================================= */

.fc-mobile-city-bar {
    display: none;
}

@media (max-width: 921px) {

    .fc-mobile-city-bar {
        position: relative;
        z-index: 80;
        display: block;
        width: 100%;
        border-bottom: 1px solid #e7edf3;
        background: #ffffff;
    }

    .fc-mobile-city-inner {
        position: relative;
        width: 100%;
        max-width: 100%;
        padding: 8px 18px;
    }

    .fc-mobile-city-trigger {
        display: flex;
        width: 100%;
        min-height: 44px;
        align-items: center;
        gap: 7px;
        padding: 8px 12px;
        border: 1px solid #cfe4f7;
        border-radius: 999px;
        background: #eef7ff;
        color: #18324f;
        box-shadow: none;
        font: inherit;
        line-height: 1.2;
        text-align: left;
        cursor: pointer;
    }

    .fc-mobile-city-trigger:hover,
    .fc-mobile-city-trigger:focus {
        border-color: #a9d1f2;
        background: #e8f4ff;
        color: #18324f;
    }

    .fc-mobile-city-pin {
        flex: 0 0 auto;
        font-size: 15px;
        line-height: 1;
    }

    .fc-mobile-city-prefix {
        flex: 0 0 auto;
        color: #5e6f82;
        font-size: 13px;
        font-weight: 500;
    }

    .fc-mobile-current-city {
        min-width: 0;
        overflow: hidden;
        color: #0969b7;
        font-size: 14px;
        font-weight: 800;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .fc-mobile-city-arrow {
        flex: 0 0 auto;
        margin-left: auto;
        color: #0969b7;
        font-size: 12px;
        transition: transform .18s ease;
    }

    .fc-mobile-city-trigger[aria-expanded="true"]
    .fc-mobile-city-arrow {
        transform: rotate(180deg);
    }

    .fc-mobile-city-menu {
        position: absolute;
        top: calc(100% - 3px);
        right: 18px;
        left: 18px;
        z-index: 9999;
        overflow: hidden;
        border: 1px solid #d8e2ec;
        border-radius: 13px;
        background: #ffffff;
        box-shadow: 0 12px 30px rgba(24, 50, 79, .16);
    }

    .fc-mobile-city-menu[hidden] {
        display: none !important;
    }

    .fc-mobile-city-option {
        display: flex;
        width: 100%;
        min-height: 46px;
        align-items: center;
        justify-content: space-between;
        padding: 11px 14px;
        border: 0;
        border-bottom: 1px solid #edf1f5;
        border-radius: 0;
        background: #ffffff;
        color: #253247;
        font: inherit;
        font-size: 14px;
        font-weight: 650;
        text-align: left;
        cursor: pointer;
    }

    .fc-mobile-city-option:last-child {
        border-bottom: 0;
    }

    .fc-mobile-city-option:hover,
    .fc-mobile-city-option:focus,
    .fc-mobile-city-option.is-active {
        background: #f2f8fe;
        color: #0969b7;
    }
}


/* =========================================================
 * SHOP / CATEGORY MOBILE SPACING
 * ========================================================= */

@media (max-width: 921px) {

    /*
     * Astra's default #primary margin is 4em. Combined with
     * WooCommerce container padding this creates the large blank
     * area visible under the mobile header.
     */
    body.woocommerce-shop #primary,
    body.tax-product_cat #primary,
    body.tax-product_tag #primary {
        margin-top: 0 !important;
    }

    body.woocommerce-shop.ast-separate-container #primary,
    body.tax-product_cat.ast-separate-container #primary,
    body.tax-product_tag.ast-separate-container #primary {
        padding-top: 0 !important;
    }

    body.woocommerce-shop
    .ast-woocommerce-container,
    body.tax-product_cat
    .ast-woocommerce-container,
    body.tax-product_tag
    .ast-woocommerce-container {
        padding-top: 20px !important;
    }

    body.woocommerce-shop
    .woocommerce-breadcrumb,
    body.tax-product_cat
    .woocommerce-breadcrumb,
    body.tax-product_tag
    .woocommerce-breadcrumb {
        margin-top: 0 !important;
        margin-bottom: 18px !important;
    }

    body.woocommerce-shop
    .woocommerce-products-header,
    body.tax-product_cat
    .woocommerce-products-header,
    body.tax-product_tag
    .woocommerce-products-header {
        margin-bottom: 18px;
    }


    /* First Cradle shop controls */

    .fc-shop-filters {
        margin-top: 14px;
        margin-bottom: 22px;
    }

    .fc-search-form {
        width: 100%;
        margin: 0;
    }

    /*
     * The new global mobile selector already shows the city.
     * Hide the old static city label only on mobile to avoid
     * repeating "Hyderabad" twice.
     */
    .fc-search-form .fc-selected-city {
        display: none !important;
    }

    .fc-search-form input[type="search"] {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 48px;
        margin: 0;
        padding: 10px 14px;
        border-radius: 8px;
        font-size: 16px;
    }


    /*
     * Keep categories in one horizontally scrollable row instead
     * of using four or five rows on a phone.
     */
    .fc-category-chips {
        display: flex !important;
        width: 100%;
        max-width: 100%;
        flex-wrap: nowrap !important;
        gap: 9px;
        overflow-x: auto;
        margin-top: 14px;
        padding: 0 0 8px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
    }

    .fc-category-chips::-webkit-scrollbar {
        display: none;
    }

    .fc-category-chips .fc-chip {
        flex: 0 0 auto;
        white-space: nowrap;
        scroll-snap-align: start;
    }


    /*
     * Keep Woo result count / sorting compact on narrow screens.
     */
    .woocommerce .woocommerce-result-count,
    .woocommerce-page .woocommerce-result-count {
        margin-bottom: 12px;
    }

    .woocommerce .woocommerce-ordering,
    .woocommerce-page .woocommerce-ordering {
        margin-bottom: 18px;
    }
}


/* Very small phones */
@media (max-width: 420px) {

    .fc-mobile-city-inner {
        padding-right: 14px;
        padding-left: 14px;
    }

    .fc-mobile-city-menu {
        right: 14px;
        left: 14px;
    }

    .fc-mobile-city-prefix {
        font-size: 12.5px;
    }

    .fc-mobile-current-city {
        font-size: 13.5px;
    }
}