/* OrderNao 2.2.82 — consolidated mobile responsiveness fixes (frontend).
 * Additive only: every rule here is scoped to OrderNao classes or the
 * WooCommerce checkout, and only tightens layout on narrow screens. */

/* ---------- Live order tracking ---------- */
.fe-tracking-wrapper { box-sizing: border-box; max-width: 100%; }
.fe-track-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 30px 0 10px;
    padding-bottom: 6px;
    scroll-snap-type: x proximity;
}
.fe-track-row { display: flex; justify-content: space-between; position: relative; }
.fe-track-line {
    position: absolute; top: 20px; left: 8%; right: 8%;
    height: 4px; background: #e2e8f0; z-index: 1;
}
.fe-track-step {
    text-align: center; position: relative; z-index: 2;
    min-width: 88px; flex: 1 1 0; scroll-snap-align: center;
}
.fe-track-history-row {
    display: flex; flex-wrap: wrap; justify-content: space-between;
    gap: 4px 12px; padding: 7px 0; border-bottom: 1px solid #f1f5f9; font-size: 12px;
}
@media (max-width: 480px) {
    .fe-tracking-wrapper { padding: 14px !important; margin: 16px 0 !important; border-radius: 10px !important; }
    .fe-tracking-wrapper h3 { font-size: 15px !important; }
    .fe-track-step { min-width: 84px; }
}

/* ---------- Checkout ---------- */
/* 2.2.108: WooCommerce/the theme print a default "Your order" heading right
 * before #order_review; the plugin also injects its own styled "Your Order"
 * heading inside the card. Keep ours, drop the native one — on every width,
 * not just mobile. */
body.woocommerce-checkout #order_review_heading { display: none; }

@media (max-width: 600px) {
    body.woocommerce-checkout .fe-delivery-time-wrapper { padding: 14px; margin: 16px 0; }
    body.woocommerce-checkout #order_review,
    body.woocommerce-checkout #payment { padding: 14px; }
    body.woocommerce-checkout .fe-checkout-section-title,
    body.woocommerce-checkout .fe-checkout-order-heading h3 { font-size: 18px; }
    /* 16px stops iOS Safari zooming the page when a field is focused. */
    body.woocommerce-checkout .fe-checkout-date-row input[type=date],
    body.woocommerce-checkout .fe-delivery-time-select { font-size: 16px; min-height: 48px; }
    body.woocommerce-checkout .fe-delivery-mode label { min-height: 44px; }

    /* 2.2.108: the review-order table on narrow phones. Earlier this used
     * overflow-wrap:anywhere on every cell, which let the browser break
     * price text mid-number ("599.00৳" → "599" / ".00" / "৳"). Long text
     * (product names, item notes, the restaurant/variation pills) may
     * still wrap normally; the amount column must not. If both columns
     * together still don't fit, the table scrolls sideways inside its own
     * box instead of squeezing numbers apart. */
    body.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table {
        display: block; width: 100%; max-width: 100%;
        overflow-x: auto; -webkit-overflow-scrolling: touch;
    }
    body.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table > thead,
    body.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table > tbody,
    body.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table > tfoot {
        display: table; width: 100%; min-width: 320px; table-layout: auto;
    }
    body.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table th,
    body.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table td {
        overflow-wrap: break-word;
    }
    body.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table th.product-total,
    body.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table td.product-total,
    body.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table .woocommerce-Price-amount,
    body.woocommerce-checkout #order_review .shop_table.woocommerce-checkout-review-order-table tfoot td {
        white-space: nowrap; overflow-wrap: normal;
    }
}

/* ---------- Product add-ons / variation groups (product page) ---------- */
.fe-addon-group-head { flex-wrap: wrap; }
.fe-addon-options li { gap: 10px; }
.fe-addon-options label { flex: 1 1 auto; min-width: 0; }
.fe-addon-option-label-text { min-width: 0; overflow-wrap: anywhere; }
.fe-addon-option-price { flex: 0 0 auto; margin-left: auto; }
@media (max-width: 480px) {
    .fe-addon-group { padding: 12px; border-radius: 10px; }
    .fe-addon-options li { padding: 11px 0; min-height: 44px; }
    .fe-addon-options input[type=checkbox],
    .fe-addon-options input[type=radio] { width: 20px; height: 20px; flex: 0 0 auto; }
}

/* ---------- Item instruction note ---------- */
.fe-item-note-input { max-width: 100%; }
@media (max-width: 600px) { .fe-item-note-input { font-size: 16px; } }

/* ---------- Location modal ---------- */
#fe-modal-map { height: min(320px, 42vh) !important; min-height: 220px; }
#fe-location-save-bar { position: sticky; bottom: 0; }
#fe-save-location-btn { min-height: 44px; }
#fe-gps-btn, #fe-location-back { min-height: 40px; }
@media (max-width: 480px) {
    #fe-location-modal { padding: 0 !important; align-items: flex-end !important; }
    #fe-location-modal > .fe-loc-modal-box {
        max-width: 100% !important;
        border-radius: 16px 16px 0 0 !important;
        padding-bottom: env(safe-area-inset-bottom);
    }
    #fe-save-location-btn { width: 100%; }
}

/* ---------- Header search suggestions ---------- */
.fe-rqs-panel { max-width: calc(100vw - 16px); box-sizing: border-box; }

/* ---------- Home restaurant cards on very small phones ---------- */
@media (max-width: 359px) {
    body .fe-home-restaurant-grid { gap: 10px !important; }
    body .fe-home-restaurant-name { font-size: 15px !important; margin: 8px 6px 2px !important; }
    body .fe-home-restaurant-view-menu { font-size: 15px !important; min-height: 46px !important; }
    body .fe-home-restaurant-card .fe-restaurant-favorite {
        width: 44px !important; height: 44px !important;
        min-width: 44px !important; min-height: 44px !important;
        max-width: 44px !important; max-height: 44px !important;
        top: 8px !important; right: 8px !important;
    }
    body .fe-home-restaurant-card .fe-restaurant-favorite .fe-favorite-heart {
        width: 22px !important; height: 22px !important; min-width: 22px !important; min-height: 22px !important;
    }
    body .fe-home-feed-insert .fe-home-insert-title { font-size: 19px !important; }
}

/* ---------- Single restaurant page header on narrow phones ---------- */
@media (max-width: 380px) {
    .fe-restaurant-single-head { flex-wrap: wrap; }
    .fe-restaurant-single-head h1 { font-size: 19px; overflow-wrap: anywhere; }
}

/* ---------- "-X%" sale badge: left side, green, plain (replaces the
   default "Sale!" ribbon wherever WooCommerce prints woocommerce_sale_flash) ---------- */
.fe-percent-off-badge {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    background: #1DB954 !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    padding: 5px 9px !important;
    border-radius: 6px !important;
    text-transform: none !important;
    min-height: 0 !important;
    min-width: 0 !important;
    width: auto !important;
    height: auto !important;
    display: inline-block !important;
    z-index: 2;
}

/* ---------- Add to Cart button: green (site-wide — single product page
   and product grid/loop cards both use these WooCommerce classes) ---------- */
.single_add_to_cart_button,
a.add_to_cart_button,
.add_to_cart_button.ajax_add_to_cart {
    background-color: #1DB954 !important;
    border-color: #1DB954 !important;
    color: #ffffff !important;
}
.single_add_to_cart_button:hover,
a.add_to_cart_button:hover,
.add_to_cart_button.ajax_add_to_cart:hover {
    background-color: #169c46 !important;
    border-color: #169c46 !important;
    color: #ffffff !important;
}

/* ---------- Product grid/loop cards: smaller title, tighter spacing
   under the image, smaller centered Add to cart button. Only the loop
   button (.add_to_cart_button) is touched — the big single-product-page
   button (.single_add_to_cart_button) is left as is. ---------- */
.products li.product .woocommerce-loop-product__title,
.products li.product .wd-entities-title,
.products li.product h3,
.products li.product h2 {
    font-size: 14px !important;
    line-height: 1.25 !important;
    margin-top: 2px !important;
    margin-bottom: 2px !important;
    text-align: left !important;
}
.products li.product .product-element-bottom,
.products li.product .wd-product-cart,
.products li.product .product-element-top + * {
    padding: 2px 4px !important;
}
.products li.product a.product-image-link,
.products li.product .product-element-top {
    margin-bottom: 0 !important;
}
.products li.product {
    text-align: left !important;
}
.products li.product .price {
    margin: 0 0 4px !important;
    text-align: left !important;
    display: block !important;
}
.products li.product a.add_to_cart_button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-width: 0 !important;
    margin: 2px auto 0 !important;
    padding: 7px 20px !important;
    font-size: 12.5px !important;
    min-height: 0 !important;
    line-height: 1.4 !important;
}

/* ---------- Keep "Add to cart" pinned to the same spot on every card,
   regardless of how many lines the title wraps to ---------- */
.products li.product {
    display: flex !important;
    flex-direction: column !important;
    padding-bottom: 12px !important;
}
.products li.product a.add_to_cart_button {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Price (not the title) is what gets pushed down to sit right above the
   button, so the price-to-button gap stays identical on every card. */
.products li.product .price {
    margin-top: auto !important;
    margin-bottom: 6px !important;
}

/* ---------- Price text: blue (the struck-through original price stays
   muted grey so the discount is still easy to read at a glance) ---------- */
.products li.product .price {
    color: #1D4ED8 !important;
}
.products li.product .price del {
    color: #9CA3AF !important;
}

/* ---------- Force every card in a row to the same height, so the
   margin-top:auto push on price+button actually has room to work —
   without this, a short-title card stays short and its button sits
   higher than its row neighbours. ---------- */
.products {
    align-items: stretch !important;
}
.products li.product {
    align-self: stretch !important;
    height: auto !important;
}