/* ============================================================
   A2YMART FOOD — professional food-delivery experience
   ============================================================ */
#fdxApp {
  --fdxa: #f5b400;      /* a2ymart food yellow accent */
  --fdxa-d: #d99a00;    /* darker yellow */
  --fdxa-l: #fff4d6;    /* light yellow tint */
  --fdxa-t: #2b2200;    /* text on yellow */
  position: fixed; inset: 0; z-index: 1000; background: #f7f7f9;
  display: none; flex-direction: column; overflow: hidden;
  font-family: 'Segoe UI', 'Inter', Roboto, Helvetica, Arial, sans-serif;
  color: #1c1c28;
}
#fdxApp.open { display: flex; }
#fdxApp * { box-sizing: border-box; }
#fdxApp button { font-family: inherit; cursor: pointer; border: none; background: none; }
#fdxApp input, #fdxApp textarea, #fdxApp select { font-family: inherit; }

/* icons */
.fdx-ic { display: inline-flex; width: 1.15em; height: 1.15em; vertical-align: -0.2em; }
.fdx-ic svg { width: 100%; height: 100%; }

/* ---------- HEADER ---------- */
.fdx-head {
  background: #fff; border-bottom: 1px solid #ececf1; padding: 12px 16px;
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
}
.fdx-back {
  width: 38px; height: 38px; border-radius: 10px; background: #f1f1f5;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: background .15s;
}
.fdx-back:hover { background: #e5e5ec; }
.fdx-title { font-size: 17px; font-weight: 800; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fdx-loc {
  display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
  color: var(--fdxa); background: var(--fdxa-l); padding: 8px 12px; border-radius: 20px;
  max-width: 220px; overflow: hidden;
}
.fdx-loc span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fdx-cartbtn {
  position: relative; width: 38px; height: 38px; border-radius: 10px; background: #1c1c28;
  color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.fdx-badge {
  position: absolute; top: -6px; right: -6px; background: var(--fdxa); color: #fff;
  font-size: 10px; font-weight: 800; border-radius: 10px; padding: 2px 6px; min-width: 18px; text-align: center;
}

/* ---------- BODY / SCROLL ---------- */
.fdx-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 84px; }
.fdx-wrap { max-width: 1100px; margin: 0 auto; padding: 16px; }

/* ---------- SEARCH ---------- */
.fdx-search {
  position: relative; background: #fff; border: 1.5px solid #e5e5ec; border-radius: 14px;
  display: flex; align-items: center; padding: 0 14px; height: 50px; gap: 10px;
  transition: border .15s, box-shadow .15s;
}
.fdx-search:focus-within { border-color: var(--fdxa); box-shadow: 0 0 0 4px rgba(245,180,0,.08); }
.fdx-search input { flex: 1; border: none; outline: none; font-size: 15px; background: none; min-width: 0; }
.fdx-sug {
  position: absolute; top: 54px; left: 0; right: 0; background: #fff; border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.14); z-index: 40; overflow: hidden; display: none;
}
.fdx-sug.show { display: block; }
.fdx-sug-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer;
  font-size: 14px; border-bottom: 1px solid #f4f4f7;
}
.fdx-sug-item:hover { background: #faf7f7; }
.fdx-sug-item .t { font-weight: 700; }
.fdx-sug-item .s { font-size: 11px; color: #8b8b99; }

/* ---------- SECTION ---------- */
.fdx-sec { margin-top: 26px; }
.fdx-sec-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.fdx-sec-title { font-size: 18px; font-weight: 800; letter-spacing: -.3px; }
.fdx-sec-link { font-size: 13px; font-weight: 700; color: var(--fdxa); }

/* ---------- CATEGORY CHIPS ---------- */
.fdx-cats { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.fdx-cats::-webkit-scrollbar { display: none; }
.fdx-cat {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: 88px; padding: 14px 6px; background: #fff; border-radius: 16px;
  border: 1.5px solid transparent; box-shadow: 0 1px 4px rgba(0,0,0,.05);
  transition: transform .15s, border .15s; cursor: pointer;
}
.fdx-cat:hover { transform: translateY(-2px); border-color: #f0dfa0; }
.fdx-cat.active { border-color: var(--fdxa); background: var(--fdxa-l); }
.fdx-cat .ci {
  width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; color: #fff;
}
.fdx-cat .cn { font-size: 11px; font-weight: 700; color: #444; text-align: center; line-height: 1.2; }

/* ---------- PROMO BANNERS ---------- */
.fdx-promos { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.fdx-promos::-webkit-scrollbar { display: none; }
.fdx-promo {
  flex: 0 0 300px; border-radius: 18px; padding: 20px; color: #fff; position: relative; overflow: hidden;
  min-height: 116px; display: flex; flex-direction: column; justify-content: center; cursor: pointer;
}
.fdx-promo .pt { font-size: 18px; font-weight: 800; }
.fdx-promo .ps { font-size: 12px; opacity: .85; margin-top: 4px; }
.fdx-promo .pc {
  margin-top: 10px; align-self: flex-start; background: rgba(255,255,255,.22); border: 1px dashed rgba(255,255,255,.7);
  font-size: 12px; font-weight: 800; letter-spacing: 2px; padding: 4px 12px; border-radius: 8px;
}

/* ---------- RESTAURANT CARDS ---------- */
.fdx-rests { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }
.fdx-rest {
  background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 1px 5px rgba(0,0,0,.06);
  cursor: pointer; transition: transform .16s, box-shadow .16s; position: relative;
}
.fdx-rest:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,.12); }
.fdx-rest-cover { height: 140px; background: linear-gradient(120deg,#2b2b38,#454556); position: relative; overflow: hidden; }
.fdx-rest-cover img { width: 100%; height: 100%; object-fit: cover; }
.fdx-rest-offer {
  position: absolute; top: 10px; left: 10px; background: var(--fdxa); color: #fff;
  font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 8px;
}
.fdx-rest-status {
  position: absolute; top: 10px; right: 10px; font-size: 10px; font-weight: 800; padding: 4px 10px;
  border-radius: 8px; background: rgba(255,255,255,.92);
}
.fdx-rest-status.open { color: #14883f; }
.fdx-rest-status.closed { color: #8b8b99; }
.fdx-rest-logo {
  position: absolute; bottom: -18px; left: 14px; width: 48px; height: 48px; border-radius: 12px;
  background: #fff; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.18);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px;
  color: var(--fdxa); overflow: hidden;
}
.fdx-rest-logo img { width: 100%; height: 100%; object-fit: cover; }
.fdx-rest-body { padding: 26px 14px 14px; }
.fdx-rest-name { font-weight: 800; font-size: 15px; }
.fdx-rest-cuisine { font-size: 12px; color: #8b8b99; margin-top: 2px; }
.fdx-rest-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; font-size: 12px; color: #55556a; font-weight: 600; }
.fdx-rest-meta .m { display: inline-flex; align-items: center; gap: 4px; }
.fdx-star { color: #f5a623; }

/* ---------- FOOD CARDS ---------- */
.fdx-foods { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.fdx-food {
  background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 1px 5px rgba(0,0,0,.06);
  cursor: pointer; transition: transform .16s, box-shadow .16s; position: relative; display: flex; flex-direction: column;
}
.fdx-food:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,.12); }
.fdx-food-img { height: 130px; background: #f1f1f5; overflow: hidden; position: relative; }
.fdx-food-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.fdx-food:hover .fdx-food-img img { transform: scale(1.05); }
.fdx-fav {
  position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.94); display: flex; align-items: center; justify-content: center;
  color: #b9b9c6; transition: color .15s, transform .15s;
}
.fdx-fav:hover { transform: scale(1.12); }
.fdx-fav.on { color: var(--fdxa); }
.fdx-food-body { padding: 12px 14px 14px; flex: 1; display: flex; flex-direction: column; }
.fdx-food-name { font-weight: 800; font-size: 14px; line-height: 1.3; min-height: 36px; }
.fdx-food-desc { font-size: 11.5px; color: #8b8b99; margin-top: 3px; height: 30px; overflow: hidden; }
.fdx-food-rest { font-size: 11px; color: var(--fdxa); font-weight: 700; margin-top: 4px; }
.fdx-food-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.fdx-food-price { font-weight: 800; font-size: 15px; }
.fdx-add {
  width: 34px; height: 34px; border-radius: 10px; background: var(--fdxa); color: #fff;
  display: flex; align-items: center; justify-content: center; transition: background .15s, transform .12s;
}
.fdx-add:hover { background: var(--fdxa-d); }
.fdx-add:active { transform: scale(.92); }
.fdx-food.oos { opacity: .55; }
.fdx-food .fdx-oos-tag {
  position: absolute; top: 8px; left: 8px; background: #55556a; color: #fff;
  font-size: 10px; font-weight: 800; padding: 4px 9px; border-radius: 7px;
}

/* ---------- RESTAURANT PAGE ---------- */
.fdx-rp-cover { height: 190px; position: relative; background: linear-gradient(120deg,#2b2b38,#454556); }
.fdx-rp-cover img { width: 100%; height: 100%; object-fit: cover; }
.fdx-rp-head { background: #fff; padding: 0 16px 16px; border-bottom: 1px solid #ececf1; }
.fdx-rp-inner { max-width: 1100px; margin: 0 auto; position: relative; }
.fdx-rp-logo {
  position: absolute; top: -30px; left: 0; width: 64px; height: 64px; border-radius: 16px;
  background: #fff; border: 3px solid #fff; box-shadow: 0 3px 12px rgba(0,0,0,.18);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 24px; color: var(--fdxa);
  overflow: hidden;
}
.fdx-rp-logo img { width: 100%; height: 100%; object-fit: cover; }
.fdx-rp-name { font-size: 22px; font-weight: 800; padding-top: 42px; }
.fdx-rp-sub { font-size: 13px; color: #8b8b99; margin-top: 2px; }
.fdx-rp-meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 13px; color: #444; font-weight: 600; }
.fdx-rp-meta .m { display: inline-flex; align-items: center; gap: 5px; }
.fdx-rp-tabsbar {
  position: sticky; top: 0; z-index: 30; background: #fff; border-bottom: 1px solid #ececf1;
  overflow-x: auto; scrollbar-width: none; display: flex; gap: 4px; padding: 0 16px;
}
.fdx-rp-tabsbar::-webkit-scrollbar { display: none; }
.fdx-rp-tab {
  flex: 0 0 auto; padding: 14px 14px 11px; font-size: 13.5px; font-weight: 700; color: #8b8b99;
  border-bottom: 3px solid transparent; transition: color .15s;
}
.fdx-rp-tab.active { color: var(--fdxa); border-bottom-color: var(--fdxa); }
.fdx-rp-secttl { font-size: 16px; font-weight: 800; margin: 22px 0 12px; }

/* ---------- FOOD DETAIL MODAL ---------- */
.fdx-modal-ov {
  position: fixed; inset: 0; background: rgba(15,15,25,.6); z-index: 1200;
  display: none; align-items: flex-end; justify-content: center;
}
.fdx-modal-ov.show { display: flex; }
.fdx-modal {
  background: #fff; width: 640px; max-width: 100%; max-height: 92vh; overflow-y: auto;
  border-radius: 22px 22px 0 0; animation: fdxUp .28s cubic-bezier(.3,1.1,.5,1);
}
@keyframes fdxUp { from { transform: translateY(60px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (min-width: 720px) {
  .fdx-modal-ov { align-items: center; padding: 20px; }
  .fdx-modal { border-radius: 22px; }
}
.fdx-fd-img { height: 240px; background: #f1f1f5; position: relative; }
.fdx-fd-img img { width: 100%; height: 100%; object-fit: cover; }
.fdx-fd-close {
  position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.95); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
}
.fdx-fd-body { padding: 20px 22px 130px; }
.fdx-fd-name { font-size: 21px; font-weight: 800; }
.fdx-fd-rest { font-size: 12.5px; color: var(--fdxa); font-weight: 700; margin-top: 3px; cursor: pointer; }
.fdx-fd-desc { font-size: 13.5px; color: #66667a; line-height: 1.6; margin-top: 8px; }
.fdx-fd-stats { display: flex; gap: 16px; margin-top: 10px; font-size: 12.5px; color: #55556a; font-weight: 600; }
.fdx-fd-price { font-size: 19px; font-weight: 800; margin-top: 10px; }
.fdx-opt-group { margin-top: 20px; border-top: 1px solid #f0f0f4; padding-top: 16px; }
.fdx-opt-title { font-size: 14px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.fdx-opt-req { font-size: 10px; font-weight: 800; color: var(--fdxa); background: var(--fdxa-l); padding: 2px 8px; border-radius: 6px; }
.fdx-opt-opt { font-size: 10px; font-weight: 700; color: #8b8b99; background: #f1f1f5; padding: 2px 8px; border-radius: 6px; }
.fdx-opt-row {
  display: flex; align-items: center; justify-content: space-between; padding: 11px 0;
  border-bottom: 1px solid #f7f7fa; cursor: pointer;
}
.fdx-opt-row .l { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.fdx-opt-row .p { font-size: 13px; color: #55556a; font-weight: 700; }
.fdx-check {
  width: 22px; height: 22px; border-radius: 6px; border: 2px solid #d5d5de; display: inline-flex;
  align-items: center; justify-content: center; color: transparent; transition: all .12s; flex-shrink: 0;
}
.fdx-check.radio { border-radius: 50%; }
.fdx-check.on { background: var(--fdxa); border-color: var(--fdxa); color: #fff; }
.fdx-note {
  width: 100%; border: 1.5px solid #e5e5ec; border-radius: 12px; padding: 12px; font-size: 14px;
  outline: none; resize: vertical; min-height: 64px; margin-top: 10px;
}
.fdx-note:focus { border-color: var(--fdxa); }
.fdx-fd-foot {
  position: sticky; bottom: 0; background: #fff; border-top: 1px solid #ececf1; padding: 14px 22px;
  display: flex; gap: 12px; align-items: center; margin: 0 -22px -130px; 
}
.fdx-qty { display: flex; align-items: center; gap: 2px; background: #f1f1f5; border-radius: 12px; padding: 4px; }
.fdx-qty button { width: 36px; height: 36px; border-radius: 9px; font-size: 19px; font-weight: 800; color: var(--fdxa); }
.fdx-qty button:hover { background: #fff; }
.fdx-qty span { min-width: 34px; text-align: center; font-weight: 800; font-size: 15px; }
.fdx-cta {
  flex: 1; background: var(--fdxa); color: #fff; border-radius: 999px; padding: 15px 22px; font-size: 15px;
  font-weight: 800; display: flex; justify-content: space-between; align-items: center; gap: 8px;
  transition: background .15s, transform .1s; box-shadow: 0 4px 14px rgba(245,180,0,.35);
}
.fdx-cta:hover { background: var(--fdxa-d); }
.fdx-cta:active { transform: scale(.98); }
.fdx-cta:disabled { background: #d5d5de; box-shadow: none; cursor: not-allowed; }
.fdx-cta2 { background: #1c1c28; box-shadow: 0 4px 14px rgba(28,28,40,.3); }
.fdx-cta2:hover { background: #000; }

/* ---------- FILTER BAR ---------- */
.fdx-filters { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 8px; }
.fdx-filters::-webkit-scrollbar { display: none; }
.fdx-fchip {
  flex: 0 0 auto; padding: 9px 15px; border-radius: 22px; background: #fff; font-size: 12.5px;
  font-weight: 700; color: #444; border: 1.5px solid #e5e5ec; display: inline-flex; align-items: center; gap: 6px;
  transition: all .13s;
}
.fdx-fchip:hover { border-color: var(--fdxa); color: var(--fdxa); }
.fdx-fchip.on { background: var(--fdxa); border-color: var(--fdxa); color: #fff; }

/* ---------- CART DRAWER ---------- */
.fdx-cart-ov { position: fixed; inset: 0; background: rgba(15,15,25,.5); z-index: 1150; display: none; }
.fdx-cart-ov.show { display: block; }
.fdx-cart {
  position: fixed; top: 0; right: -460px; width: 440px; max-width: 96vw; height: 100%;
  background: #fff; z-index: 1160; display: flex; flex-direction: column;
  transition: right .26s cubic-bezier(.3,1,.5,1); box-shadow: -8px 0 32px rgba(0,0,0,.2);
}
.fdx-cart.open { right: 0; }
.fdx-cart-head { padding: 18px 20px; border-bottom: 1px solid #ececf1; display: flex; justify-content: space-between; align-items: center; }
.fdx-cart-head h3 { margin: 0; font-size: 17px; font-weight: 800; }
.fdx-cart-body { flex: 1; overflow-y: auto; padding: 14px 20px; }
.fdx-ci { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f4f4f7; }
.fdx-ci-img { width: 62px; height: 62px; border-radius: 12px; background: #f1f1f5; overflow: hidden; flex-shrink: 0; }
.fdx-ci-img img { width: 100%; height: 100%; object-fit: cover; }
.fdx-ci-info { flex: 1; min-width: 0; }
.fdx-ci-name { font-weight: 800; font-size: 13.5px; }
.fdx-ci-custom { font-size: 11px; color: #8b8b99; margin-top: 3px; line-height: 1.45; }
.fdx-ci-price { font-weight: 800; font-size: 13.5px; margin-top: 5px; }
.fdx-ci-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.fdx-ci-edit { font-size: 11px; font-weight: 800; color: var(--fdxa); }
.fdx-cart-rest { font-size: 12px; font-weight: 800; color: #55556a; margin: 14px 0 4px; display: flex; align-items: center; gap: 6px; }
.fdx-cart-foot { border-top: 1px solid #ececf1; padding: 16px 20px; }
.fdx-sumrow { display: flex; justify-content: space-between; font-size: 13.5px; color: #55556a; margin-bottom: 7px; }
.fdx-sumrow.total { font-size: 17px; font-weight: 800; color: #1c1c28; margin-top: 4px; }
.fdx-coupon { display: flex; gap: 8px; margin-bottom: 12px; }
.fdx-coupon input {
  flex: 1; border: 1.5px solid #e5e5ec; border-radius: 10px; padding: 10px 12px; font-size: 13px;
  outline: none; text-transform: uppercase;
}
.fdx-coupon button { background: #1c1c28; color: #fff; border-radius: 10px; padding: 0 16px; font-weight: 800; font-size: 12px; }

/* ---------- CHECKOUT ---------- */
.fdx-steps { display: flex; gap: 6px; margin-bottom: 18px; }
.fdx-step { flex: 1; text-align: center; font-size: 10.5px; font-weight: 800; color: #b9b9c6; padding: 8px 2px; border-radius: 8px; background: #f1f1f5; }
.fdx-step.active { background: var(--fdxa); color: #fff; }
.fdx-step.done { background: var(--fdxa-l); color: var(--fdxa); }
.fdx-addr {
  border: 1.5px solid #e5e5ec; border-radius: 14px; padding: 14px; margin-bottom: 10px; cursor: pointer;
  display: flex; gap: 12px; align-items: flex-start; transition: border .13s;
}
.fdx-addr:hover, .fdx-addr.on { border-color: var(--fdxa); background: var(--fdxa-l); }
.fdx-addr .at { font-weight: 800; font-size: 13.5px; }
.fdx-addr .ad { font-size: 12.5px; color: #66667a; margin-top: 2px; }
.fdx-radio2 { display: flex; gap: 10px; }
.fdx-radio2 > div {
  flex: 1; border: 1.5px solid #e5e5ec; border-radius: 14px; padding: 16px; text-align: center;
  cursor: pointer; font-weight: 800; font-size: 14px; transition: all .13s;
}
.fdx-radio2 > div.on { border-color: var(--fdxa); background: var(--fdxa-l); color: var(--fdxa); }
.fdx-input {
  width: 100%; border: 1.5px solid #e5e5ec; border-radius: 12px; padding: 12px 14px; font-size: 14px;
  outline: none; margin-bottom: 10px;
}

/* ---------- MAP ADDRESS PICKER ---------- */
#fdxMap {
  position: relative; height: 240px; border-radius: 16px; overflow: hidden;
  border: 1.5px solid #e5e5ec; margin: 10px 0; background: #eef0f3; z-index: 1;
}
.fdx-map-pin {
  position: absolute; left: 50%; top: 50%; width: 40px; height: 40px;
  transform: translate(-50%, -92%); z-index: 800; pointer-events: none;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.3));
}
.fdx-map-pin svg { width: 100%; height: 100%; }
.fdx-map-loading {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #8b8b99; z-index: 700;
}
.fdx-locate {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px; border-radius: 999px; background: #fff; border: 1.5px solid var(--fdxa);
  color: var(--fdxa-d); font-size: 13px; font-weight: 800; margin-bottom: 4px;
}
.fdx-locate:hover { background: var(--fdxa-l); }
.fdx-mapsearch { position: relative; display: flex; gap: 8px; align-items: center; }
.fdx-mapsearch .fdx-input { flex: 1; }
.fdx-mapsug {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: #fff;
  border: 1.5px solid #e5e5ec; border-radius: 12px; box-shadow: 0 10px 30px rgba(15,15,25,.15);
  z-index: 1300; display: none; overflow: hidden; max-height: 220px; overflow-y: auto;
}
.fdx-mapsug.show { display: block; }
.fdx-mapsug > div {
  padding: 11px 14px; font-size: 12.5px; cursor: pointer; border-bottom: 1px solid #f1f1f5; line-height: 1.4;
}
.fdx-mapsug > div:last-child { border-bottom: none; }
.fdx-mapsug > div:hover { background: var(--fdxa-l); }
.fdx-mapsug > div.s { color: #8b8b99; cursor: default; }
.fdx-mapsug > div.s:hover { background: none; }
.fdx-emailwrap { position: relative; }
body.dark #fdxMap { border-color: #2c2c36; background: #1b1b22; }
body.dark .fdx-locate { background: #12121a; }
body.dark .fdx-mapsug { background: #1b1b22; border-color: #2c2c36; }
body.dark .fdx-mapsug > div { border-bottom-color: #26262f; color: #e0e0ea; }
body.dark .fdx-mapsug > div:hover { background: #26262f; }
.fdx-input:focus { border-color: var(--fdxa); }
.fdx-label { font-size: 12px; font-weight: 800; color: #55556a; margin: 8px 0 6px; display: block; }

/* ---------- TRACKING ---------- */
.fdx-track-steps { position: relative; margin: 20px 0; }
.fdx-ts { display: flex; gap: 14px; padding-bottom: 26px; position: relative; }
.fdx-ts:last-child { padding-bottom: 0; }
.fdx-ts::before {
  content: ""; position: absolute; left: 15px; top: 32px; bottom: 0; width: 3px; background: #ececf1;
}
.fdx-ts:last-child::before { display: none; }
.fdx-ts.done::before { background: var(--fdxa); }
.fdx-ts .dot {
  width: 32px; height: 32px; border-radius: 50%; background: #ececf1; color: #b9b9c6;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; z-index: 1;
}
.fdx-ts.done .dot { background: var(--fdxa); color: #fff; }
.fdx-ts.current .dot { background: var(--fdxa); color: #fff; box-shadow: 0 0 0 6px rgba(245,180,0,.15); animation: fdxPulse 1.6s infinite; }
@keyframes fdxPulse { 0%,100% { box-shadow: 0 0 0 6px rgba(245,180,0,.15); } 50% { box-shadow: 0 0 0 10px rgba(245,180,0,.06); } }
.fdx-ts .tt { font-weight: 800; font-size: 14px; padding-top: 5px; }
.fdx-ts .ts2 { font-size: 12px; color: #8b8b99; margin-top: 2px; }

/* ---------- ORDER CARDS ---------- */
.fdx-order {
  background: #fff; border-radius: 16px; padding: 16px; margin-bottom: 12px;
  box-shadow: 0 1px 5px rgba(0,0,0,.06);
}
.fdx-order-head { display: flex; justify-content: space-between; align-items: center; }
.fdx-order-rest { font-weight: 800; font-size: 14.5px; }
.fdx-status-pill { font-size: 11px; font-weight: 800; padding: 5px 12px; border-radius: 20px; }
.fdx-st-active { background: #fff3d6; color: #b07b00; }
.fdx-st-done { background: #e2f5ea; color: #14883f; }
.fdx-st-cancel { background: #f1f1f5; color: #8b8b99; }
.fdx-order-items { font-size: 12.5px; color: #66667a; margin-top: 6px; line-height: 1.5; }
.fdx-order-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.fdx-order-total { font-weight: 800; }
.fdx-order-btns { display: flex; gap: 8px; }
.fdx-btn-sm {
  padding: 10px 16px; border-radius: 999px; font-size: 12px; font-weight: 800;
  background: #f1f1f5; color: #1c1c28; border: 1.5px solid #dcdce4; transition: background .13s;
}
.fdx-btn-sm:hover { background: #e5e5ec; }
.fdx-btn-sm.red { background: var(--fdxa); color: #fff; }
.fdx-btn-sm.red:hover { background: var(--fdxa-d); }

/* ---------- REVIEWS ---------- */
.fdx-review { padding: 12px 0; border-bottom: 1px solid #f4f4f7; }
.fdx-review .rh { display: flex; justify-content: space-between; font-size: 13px; font-weight: 800; }
.fdx-review .rb { font-size: 13px; color: #55556a; margin-top: 4px; line-height: 1.5; }
.fdx-review .rv { font-size: 10px; color: #14883f; font-weight: 800; background: #e2f5ea; padding: 2px 8px; border-radius: 6px; }
.fdx-stars { display: inline-flex; gap: 3px; }
.fdx-stars button { font-size: 26px; color: #d5d5de; transition: color .1s, transform .1s; }
.fdx-stars button.on { color: #f5a623; }
.fdx-stars button:hover { transform: scale(1.15); }

/* ---------- BOTTOM NAV (mobile) ---------- */
.fdx-nav {
  position: absolute; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid #ececf1;
  display: flex; z-index: 50; padding-bottom: env(safe-area-inset-bottom);
}
.fdx-nav button {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 4px 8px; font-size: 10px; font-weight: 700; color: #8b8b99; position: relative;
}
.fdx-nav button.active { color: var(--fdxa); }
.fdx-nav .fdx-badge { top: 4px; right: calc(50% - 22px); }

/* ---------- SKELETONS / EMPTY ---------- */
.fdx-skel { background: linear-gradient(90deg,#efeff3 25%,#f8f8fb 50%,#efeff3 75%); background-size: 200% 100%; animation: fdxShimmer 1.3s infinite; border-radius: 14px; }
@keyframes fdxShimmer { to { background-position: -200% 0; } }
.fdx-empty { text-align: center; padding: 60px 20px; color: #8b8b99; }
.fdx-empty .ei { width: 64px; height: 64px; margin: 0 auto 14px; color: #d5d5de; }
.fdx-empty .et { font-weight: 800; font-size: 15px; color: #55556a; }
.fdx-empty .es { font-size: 12.5px; margin-top: 4px; }

/* ---------- TOAST inside food app ---------- */
#fdxToast {
  position: fixed; bottom: 96px; left: 50%; transform: translateX(-50%) translateY(90px);
  background: #1c1c28; color: #fff; padding: 12px 22px; border-radius: 28px; font-size: 13.5px;
  font-weight: 700; z-index: 1300; transition: transform .28s; box-shadow: 0 8px 24px rgba(0,0,0,.3);
  max-width: 92vw; text-align: center;
}
#fdxToast.show { transform: translateX(-50%) translateY(0); }

/* success check */
.fdx-tick { width: 84px; height: 84px; display: block; margin: 0 auto; }
.fdx-tick .c1 { fill: none; stroke: #14883f; stroke-width: 3; stroke-dasharray: 166; stroke-dashoffset: 166; animation: fdxC .7s ease forwards; }
.fdx-tick .c2 { fill: none; stroke: #14883f; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 48; stroke-dashoffset: 48; animation: fdxK .4s .6s ease forwards; }
@keyframes fdxC { to { stroke-dashoffset: 0; } }
@keyframes fdxK { to { stroke-dashoffset: 0; } }

/* desktop tweaks */
@media (min-width: 900px) {
  .fdx-nav { display: none; }
  .fdx-body { padding-bottom: 20px; }
}
@media (max-width: 640px) {
  .fdx-loc { max-width: 130px; }
  .fdx-rests { grid-template-columns: 1fr; }
  .fdx-foods { grid-template-columns: repeat(2, 1fr); }
  .fdx-food-img { height: 108px; }
  .fdx-wrap { padding: 12px; }
}

/* dark mode inherit from site */
body.dark #fdxApp { background: #101014; color: #e8e8ee; }
body.dark .fdx-head, body.dark .fdx-rest, body.dark .fdx-food, body.dark .fdx-order,
body.dark .fdx-modal, body.dark .fdx-cart, body.dark .fdx-rp-head, body.dark .fdx-rp-tabsbar,
body.dark .fdx-nav, body.dark .fdx-sug, body.dark .fdx-cat { background: #1b1b22; }
body.dark .fdx-search, body.dark .fdx-fchip, body.dark .fdx-addr, body.dark .fdx-note,
body.dark .fdx-input, body.dark .fdx-coupon input { background: #12121a; border-color: #2c2c36; color: #e8e8ee; }
body.dark .fdx-title, body.dark .fdx-sec-title, body.dark .fdx-rest-name, body.dark .fdx-food-name,
body.dark .fdx-fd-name, body.dark .fdx-rp-name, body.dark .fdx-order-rest, body.dark .fdx-food-price,
body.dark .fdx-cart-head h3, body.dark .fdx-ci-name { color: #f0f0f5; }
body.dark .fdx-back, body.dark .fdx-qty, body.dark .fdx-btn-sm, body.dark .fdx-step { background: #26262f; color: #ccc; }
body.dark .fdx-cat .cn { color: #ccccd6; }


/* ---------- extra shared cards ---------- */
.fdx-cosum { background: #f7f7fa; border-radius: 14px; padding: 14px; margin-top: 14px; font-size: 12.5px; }
.fdx-infocard { background: #fff; border-radius: 16px; padding: 16px; box-shadow: 0 1px 5px rgba(0,0,0,.06); }

/* ---------- FULL DARK MODE (all buttons visible!) ---------- */
body.dark #fdxApp { --fdxa: #4d74e8; --fdxa-d: #3a5fd0; --fdxa-l: #1b2440; }
body.dark .fdx-head { border-bottom-color: #26262f; }
body.dark .fdx-title, body.dark .fdx-rp-secttl, body.dark .fdx-opt-title,
body.dark .fdx-ts .tt, body.dark .fdx-order-total, body.dark .fdx-food-desc,
body.dark .fdx-sumrow.total, body.dark .fdx-fd-price { color: #f0f0f5; }
body.dark .fdx-rest-cuisine, body.dark .fdx-rest-meta, body.dark .fdx-rp-meta,
body.dark .fdx-fd-desc, body.dark .fdx-fd-stats, body.dark .fdx-order-items,
body.dark .fdx-ci-custom, body.dark .fdx-sumrow, body.dark .fdx-review .rb { color: #a8a8b8; }
body.dark .fdx-opt-row { border-bottom-color: #26262f; }
body.dark .fdx-opt-row .l, body.dark .fdx-opt-row .p, body.dark .fdx-radio2 > div,
body.dark .fdx-addr .at, body.dark .fdx-fchip { color: #e0e0ea; }
body.dark .fdx-opt-group { border-top-color: #26262f; }
body.dark .fdx-check { border-color: #3a3a48; }
body.dark .fdx-fchip { background: #1b1b22; border-color: #2c2c36; }
body.dark .fdx-fchip.on { background: var(--fdxa); border-color: var(--fdxa); color: #fff; }
body.dark .fdx-radio2 > div { border-color: #2c2c36; background: #1b1b22; }
body.dark .fdx-radio2 > div.on { border-color: var(--fdxa); background: var(--fdxa-l); color: #cdd8ff; }
body.dark .fdx-addr { border-color: #2c2c36; background: #1b1b22; }
body.dark .fdx-addr.on, body.dark .fdx-addr:hover { border-color: var(--fdxa); background: var(--fdxa-l); }
body.dark .fdx-cosum { background: #14141c; }
body.dark .fdx-infocard { background: #1b1b22; }
body.dark .fdx-infocard div { color: #e0e0ea; }
body.dark .fdx-cart-head, body.dark .fdx-cart-foot { border-color: #26262f; }
body.dark .fdx-ci { border-bottom-color: #26262f; }
body.dark .fdx-ci-price { color: #f0f0f5; }
body.dark .fdx-coupon button { background: #4d74e8; }
body.dark .fdx-fd-foot { background: #1b1b22; border-top-color: #26262f; }
body.dark .fdx-qty button { color: #8fa8f5; }
body.dark .fdx-qty button:hover { background: #2c2c36; }
body.dark .fdx-qty span { color: #f0f0f5; }
body.dark .fdx-btn-sm { background: #26262f; color: #e0e0ea; border-color: #3a3a48; }
body.dark .fdx-btn-sm:hover { background: #33333f; }
body.dark .fdx-btn-sm.red { background: var(--fdxa); color: #fff; }
body.dark .fdx-step { background: #26262f; color: #8b8b99; }
body.dark .fdx-step.active { background: var(--fdxa); color: #fff; }
body.dark .fdx-step.done { background: var(--fdxa-l); color: #8fa8f5; }
body.dark .fdx-ts::before { background: #26262f; }
body.dark .fdx-ts.done::before { background: var(--fdxa); }
body.dark .fdx-ts .dot { background: #26262f; color: #55556a; }
body.dark .fdx-ts.done .dot, body.dark .fdx-ts.current .dot { background: var(--fdxa); color: #fff; }
body.dark .fdx-ts .ts2 { color: #8b8b99; }
body.dark .fdx-rp-tab { color: #8b8b99; }
body.dark .fdx-rp-tab.active { color: #8fa8f5; border-bottom-color: var(--fdxa); }
body.dark .fdx-sug-item { border-bottom-color: #26262f; }
body.dark .fdx-sug-item:hover { background: #22222c; }
body.dark .fdx-sug-item .t { color: #f0f0f5; }
body.dark .fdx-nav button { color: #8b8b99; }
body.dark .fdx-nav button.active { color: #8fa8f5; }
body.dark .fdx-fav { background: rgba(27,27,34,.94); }
body.dark .fdx-rest-status { background: rgba(27,27,34,.92); }
body.dark .fdx-food-img, body.dark .fdx-ci-img, body.dark .fdx-fd-img { background: #22222c; }
body.dark .fdx-review { border-bottom-color: #26262f; }
body.dark .fdx-review .rh { color: #e0e0ea; }
body.dark .fdx-cat .ci { opacity: .9; }
body.dark .fdx-empty .et { color: #a8a8b8; }
body.dark .fdx-skel { background: linear-gradient(90deg,#1e1e28 25%,#26262f 50%,#1e1e28 75%); background-size: 200% 100%; }


/* ---------- YELLOW THEME OVERRIDES (dark text on yellow) ---------- */
.fdx-add, .fdx-cta, .fdx-fchip.on, .fdx-check.on, .fdx-step.active,
.fdx-ts.done .dot, .fdx-ts.current .dot, .fdx-btn-sm.red, .fdx-rest-offer { color: var(--fdxa-t) !important; }
.fdx-cta:disabled { color: #8b8b99 !important; }
.fdx-sec-link, .fdx-food-rest, .fdx-fd-rest, .fdx-ci-edit { color: #b8860b; }
.fdx-loc { color: #8a6d00; background: var(--fdxa-l); }
.fdx-rp-tab.active { color: #b8860b; }
.fdx-step.done { color: #8a6d00; }
.fdx-radio2 > div.on { color: #8a6d00; }
.fdx-coupon button { background: #2b2200; color: #ffd54d; }
.fdx-cartbtn { background: #2b2200; color: #ffd54d; }
body.dark #fdxApp { --fdxa: #f5c542; --fdxa-d: #dba912; --fdxa-l: #33290a; --fdxa-t: #241c00; }
body.dark .fdx-sec-link, body.dark .fdx-food-rest, body.dark .fdx-fd-rest,
body.dark .fdx-ci-edit, body.dark .fdx-rp-tab.active, body.dark .fdx-step.done,
body.dark .fdx-loc, body.dark .fdx-radio2 > div.on { color: #f5c542; }
body.dark .fdx-qty button { color: #f5c542; }
body.dark .fdx-nav button.active { color: #f5c542; }
body.dark .fdx-coupon button { background: #f5c542; color: #241c00; }