/* 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 ---------- */
@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; }
    body.woocommerce-checkout #order_review .shop_table { width: 100%; table-layout: auto; }
    body.woocommerce-checkout #order_review .shop_table th,
    body.woocommerce-checkout #order_review .shop_table td { overflow-wrap: anywhere; }
}

/* ---------- 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; }
}