/* ══════════════════════════════════════════════════════════════
   Food Junction — features.css
   Offers & labels, ads, pop-ups, "Ask for a recommendation", order chat,
   location picker, uploads, maps, account notices, new pages (deals, budget,
   help, policies) and shared bits for the dashboards. Phones first-class.
   ══════════════════════════════════════════════════════════════ */

/* Elements marked hidden stay hidden even when a class sets display */
[hidden] { display: none !important; }

/* ── Prices, offer tags, stock ─────────────────────────────── */
.fj-price-now { color: var(--theme-primary); font-weight: 800; }
.fj-price-was { margin-left: 6px; font-size: .78em; font-weight: 600; color: var(--theme-muted); }
.fj-tags { position: absolute; left: 10px; bottom: 10px; z-index: 3; display: flex; flex-wrap: wrap; gap: 5px; max-width: calc(100% - 20px); pointer-events: none; }
.fj-tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 999px; font-size: .68rem; font-weight: 800; line-height: 1.1; white-space: nowrap; color: #fff; background: #0f172a; box-shadow: 0 4px 12px rgba(2, 6, 23, .25); }
.fj-tag svg { width: 12px; height: 12px; }
.fj-tag-off { background: linear-gradient(135deg, #ef4444, #f97316); }
.fj-tag-flash { background: linear-gradient(135deg, #7c3aed, #db2777); animation: fjFlashPulse 1.6s ease-in-out infinite; }
.fj-tag-sponsored { background: rgba(15, 23, 42, .78); backdrop-filter: blur(4px); }
.fj-tag-limited { background: linear-gradient(135deg, #b45309, #f59e0b); }
.fj-tag-fj { background: linear-gradient(135deg, #15803d, #22c55e); }
@keyframes fjFlashPulse { 50% { box-shadow: 0 0 0 4px rgba(219, 39, 119, .25); } }
.fj-stock { display: inline-flex; align-items: center; gap: 5px; margin: 4px 0 0; font-size: .74rem; font-weight: 700; }
.fj-stock svg { width: 13px; height: 13px; }
.fj-stock.low { color: #ea580c; }
.fj-stock.out { color: #dc2626; }
.is-sold-out img { filter: grayscale(.85); opacity: .75; }
.is-sold-out .pc-cart[disabled] { opacity: .4; cursor: not-allowed; }
.fj-dish-mini-img .fj-tags { bottom: auto; top: 8px; left: 8px; }
.fj-rail:has(> .fj-dish-mini) { grid-auto-columns: 196px; }
@media (max-width: 600px) { .fj-rail:has(> .fj-dish-mini) { grid-auto-columns: 168px; } }
.fj-tags.inline { position: static; max-width: 100%; margin: 0 0 6px; pointer-events: auto; }
.fj-tags.inline .fj-tag { box-shadow: none; }
.fj-dish-mini .fj-tags.inline { margin: 8px 0 0; gap: 4px; flex-wrap: nowrap; overflow: hidden; }
.fj-dish-mini .fj-tags.inline .fj-tag { padding: 3px 7px; font-size: .64rem; flex: none; }
.fj-dish-mini .fj-tags.inline .fj-tag:nth-child(n+3) { display: none; }
@media (max-width: 600px) { .fj-tags.inline { gap: 4px; margin-bottom: 4px; } .fj-tags.inline .fj-tag { padding: 3px 7px; font-size: .64rem; } .fj-tags.inline .fj-tag svg { width: 11px; height: 11px; } }
.fj-price-now, .fj-price-was { white-space: nowrap; }
.fj-dish-mini-price { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 6px; }
.fj-dish-mini-price .fj-price-was { margin-left: 0; }
.product-price .fj-price-was { display: block; margin: 1px 0 0; font-size: .72rem; line-height: 1; }
.fj-dish-mini-price .fj-price-was { font-size: .74rem; }
.fj-rest-wide-tag.sponsored { background: rgba(15, 23, 42, .82); color: #fff; display: inline-flex; align-items: center; gap: 4px; }
.fj-rest-wide-tag.sponsored svg { width: 12px; height: 12px; }
.fj-rest-closed { position: absolute; right: 10px; top: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 999px; background: rgba(15, 23, 42, .82); color: #fff; font-size: .7rem; font-weight: 700; }
.fj-rest-closed.busy { background: #ea580c; }
.fj-rest-closed svg { width: 12px; height: 12px; }

/* ── Size picker add-ons ───────────────────────────────────── */
.fj-opt-offer { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fj-opt-offer .fj-tag { position: static; }
.fj-addons { display: grid; gap: 8px; margin-bottom: 6px; }
.fj-addon { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 13px; border: 1.5px solid var(--line); cursor: pointer; transition: .15s; }
.fj-addon:has(input:checked) { border-color: var(--theme-primary); background: color-mix(in srgb, var(--theme-primary) 8%, transparent); }
.fj-addon input { width: 18px; height: 18px; accent-color: var(--theme-primary); flex: none; }
.fj-addon-name { flex: 1; min-width: 0; font-weight: 600; font-size: .9rem; }
.fj-addon-price { font-weight: 700; font-size: .84rem; color: var(--theme-muted); white-space: nowrap; }
.fj-addon.off { opacity: .5; cursor: not-allowed; }
.fj-variant-price s { color: var(--theme-muted); font-weight: 500; font-size: .85em; }
.fj-cart-item-addons { font-size: .74rem; color: var(--theme-muted); line-height: 1.35; margin-top: 2px; }
.fj-free-hint.warn { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
html[data-mode="dark"] .fj-free-hint.warn { background: rgba(239, 68, 68, .12); color: #fca5a5; border-color: rgba(239, 68, 68, .3); }
.fj-combo-deal { border-color: color-mix(in srgb, #f97316 45%, var(--line)); background: color-mix(in srgb, #f97316 7%, var(--theme-card-bg)); }
.fj-combo-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 8px 0 10px; }
.fj-combo-price s { color: var(--theme-muted); }
.fj-combo-price b { font-size: 1.1rem; color: var(--theme-primary); }
.fj-combo-price em { font-style: normal; font-size: .75rem; font-weight: 800; color: #ea580c; }

/* ── Price range slider + dish filter bar ─────────────────── */
.fj-range { display: grid; gap: 8px; }
.fj-range-track { position: relative; height: 28px; }
.fj-range-track::before { content: ''; position: absolute; left: 0; right: 0; top: 12px; height: 5px; border-radius: 9px; background: var(--line); }
.fj-range-track i { position: absolute; top: 12px; height: 5px; border-radius: 9px; background: linear-gradient(90deg, #7c3aed, #db2777); }
.fj-range-track input { position: absolute; inset: 0; width: 100%; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.fj-range-track input::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 3px solid #7c3aed; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); cursor: grab; }
.fj-range-track input::-moz-range-thumb { pointer-events: auto; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid #7c3aed; cursor: grab; }
.fj-range-track input::-webkit-slider-runnable-track { background: none; }
.fj-range-track input::-moz-range-track { background: none; }
.fj-range-vals { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .84rem; }
.fj-range-vals output { padding: 5px 10px; border-radius: 9px; background: var(--surface-2); font-weight: 800; color: #7c3aed; }
.fj-range-vals span { color: var(--theme-muted); }
.fj-fbar { margin: 0 0 18px; }
.fj-fbar .fj-filter-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin: 0; scrollbar-width: none; }
.fj-fbar .fj-filter-chips::-webkit-scrollbar { display: none; }
.fj-fbar .fj-filter-chips button, .fj-fbar .fj-filter-chips a { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--theme-card-bg); color: var(--theme-text); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; }
.fj-fbar .fj-filter-chips svg { width: 15px; height: 15px; }
.fj-fbar .fj-filter-chips button.on { background: var(--theme-primary); border-color: var(--theme-primary); color: #fff; }
.fj-fbar .fj-filter-chips [data-ask] { border-color: transparent; background: linear-gradient(135deg, #7c3aed, #db2777); color: #fff; }
.fj-fbar .fj-filter-chips a { border-color: #db2777; color: #db2777; }
.fj-fbar .fj-fclear { color: #dc2626 !important; border-style: dashed !important; }
.fj-fbar-range { margin-top: 10px; padding: 16px; border-radius: 18px; border: 1px solid var(--line); background: var(--theme-card-bg); box-shadow: var(--sh-2, 0 8px 24px rgba(0, 0, 0, .08)); display: grid; gap: 12px; max-width: 520px; }
.fj-fbar-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.fj-fbar-presets button { padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--theme-text); font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; }
.fj-fbar-actions { display: flex; gap: 8px; }
.fj-fbar-actions .btn { flex: 1; width: auto !important; justify-content: center; }
.fj-ask-range-head { display: flex; align-items: center; gap: 6px; margin: 16px 0 8px; font-weight: 800; font-size: .88rem; }
.fj-ask-range-head svg { width: 16px; height: 16px; color: #16a34a; }
.fj-ask-range-head a { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; color: var(--theme-primary); text-decoration: none; }
.fj-ask-range-head a svg { width: 14px; height: 14px; color: inherit; }
.fj-ask-rail { padding-bottom: 6px; }
.fj-ask-rail .fj-dish-mini { width: 168px; }

/* ── "Complete your meal" sheet after adding a dish ────────── */
.fj-ms-box { max-width: 460px; gap: 12px; max-height: 88vh; overflow-y: auto; }
.fj-ms-head { display: flex; align-items: center; gap: 10px; }
.fj-ms-head > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(135deg, #16a34a, #22c55e); color: #fff; flex: none; }
.fj-ms-head > span svg { width: 19px; height: 19px; }
.fj-ms-head div { flex: 1; min-width: 0; display: grid; }
.fj-ms-head small { color: var(--theme-muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fj-ms-label { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--theme-muted); }
.fj-ms-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fj-ms-chips button { display: inline-flex; align-items: center; gap: 5px; padding: 8px 12px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--theme-card-bg); color: var(--theme-text); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; }
.fj-ms-chips button svg { width: 14px; height: 14px; color: var(--theme-primary); }
.fj-ms-chips button em { font-style: normal; color: var(--theme-muted); font-weight: 500; }
.fj-ms-chips button:disabled { border-color: var(--theme-primary); color: var(--theme-primary); }
.fj-ms-deal { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; border: 1.5px dashed #f97316; background: rgba(249, 115, 22, .07); }
.fj-ms-deal > svg { width: 22px; height: 22px; color: #f97316; flex: none; }
.fj-ms-deal div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.fj-ms-deal small { font-size: .76rem; color: var(--theme-muted); }
.fj-ms-items { display: grid; gap: 8px; }
.fj-ms-item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 13px; background: var(--surface-2); }
.fj-ms-item img { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; flex: none; }
.fj-ms-item span { flex: 1; min-width: 0; display: grid; }
.fj-ms-item small { color: var(--theme-primary); font-weight: 700; }
.fj-ms-item .fj-icon-btn { background: var(--theme-primary) !important; color: #fff !important; }

/* ── Location picker ───────────────────────────────────────── */
.fj-loc-modal { max-width: 560px; }
.fj-loc-gps { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 14px; border-radius: 15px; border: 1.5px dashed color-mix(in srgb, var(--theme-primary) 55%, var(--line)); background: color-mix(in srgb, var(--theme-primary) 7%, transparent); color: var(--theme-text); font: inherit; text-align: left; cursor: pointer; }
.fj-loc-gps svg { width: 24px; height: 24px; color: var(--theme-primary); flex: none; }
.fj-loc-gps b { display: block; font-size: .92rem; }
.fj-loc-gps small { color: var(--theme-muted); font-size: .76rem; }
.fj-loc-gps.busy svg { animation: fjSpin 1s linear infinite; }
@keyframes fjSpin { to { transform: rotate(360deg); } }
.fj-loc-cities { display: flex; flex: none; gap: 7px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.fj-loc-modal > .fj-modal-head, .fj-loc-modal > .fj-loc-gps, .fj-loc-modal > label, .fj-loc-modal > .fj-loc-note { flex: none; }
.fj-loc-city { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--theme-card-bg); color: var(--theme-text); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; }
.fj-loc-city small { padding: 1px 6px; border-radius: 99px; background: var(--surface-2); font-size: .68rem; }
.fj-loc-city.on { background: var(--theme-primary); border-color: var(--theme-primary); color: #fff; }
.fj-loc-city.on small { background: rgba(255, 255, 255, .25); color: #fff; }
.fj-loc-option.on { border-color: var(--theme-primary); color: var(--theme-primary); font-weight: 700; }
.fj-loc-soon, .fj-loc-note { display: flex; align-items: center; gap: 6px; margin: 4px 0; font-size: .78rem; color: var(--theme-muted); }
.fj-loc-soon { color: #b45309; }
.fj-loc-soon svg, .fj-loc-note svg { width: 15px; height: 15px; flex: none; }

/* ── Ads: carousel and cards ───────────────────────────────── */
.fj-adc { position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 3 / 1; min-height: 170px; background: #0f172a; box-shadow: var(--sh-2, 0 10px 30px rgba(0, 0, 0, .12)); margin: 0 0 22px; }
.fj-adc[hidden] { display: none; }
.fj-adc-track { position: absolute; inset: 0; }
.fj-adc-slide { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 26px; background: var(--bg) center / cover no-repeat; color: #fff; text-decoration: none; opacity: 0; transform: scale(1.03); transition: opacity .6s ease, transform 1.2s ease; pointer-events: none; }
.fj-adc-slide.on { opacity: 1; transform: none; pointer-events: auto; }
.fj-adc-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2, 6, 23, .82) 0%, rgba(2, 6, 23, .45) 45%, transparent 75%); }
.fj-adc-text { position: relative; display: grid; gap: 6px; max-width: 520px; }
.fj-adc-text small { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 700; letter-spacing: .03em; opacity: .9; }
.fj-adc-text small svg { width: 13px; height: 13px; }
.fj-adc-text b { font-size: clamp(1.25rem, 3vw, 2rem); line-height: 1.15; }
.fj-adc-text span { font-size: .92rem; opacity: .9; }
.fj-adc-text em { justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 9px 16px; border-radius: 999px; background: #22c55e; font-style: normal; font-weight: 800; font-size: .85rem; }
.fj-adc-text em svg { width: 15px; height: 15px; }
.fj-adc-dots { position: absolute; right: 18px; bottom: 16px; display: flex; gap: 6px; }
.fj-adc-dots button { width: 8px; height: 8px; padding: 0; border: none; border-radius: 99px; background: rgba(255, 255, 255, .5); cursor: pointer; transition: .25s; }
.fj-adc-dots button.on { width: 24px; background: #fff; }
@media (max-width: 640px) {
  .fj-adc { aspect-ratio: auto; min-height: 190px; border-radius: 18px; }
  .fj-adc-slide { padding: 18px; }
  .fj-adc-shade { background: linear-gradient(0deg, rgba(2, 6, 23, .88) 0%, rgba(2, 6, 23, .4) 60%, transparent 100%); }
  .fj-adc-text span { font-size: .82rem; }
}
.fj-adcards { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 300px); gap: 14px; overflow-x: auto; padding: 4px 2px 12px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.fj-adcard { scroll-snap-align: start; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--theme-card-bg); border: 1px solid var(--line); color: var(--theme-text); text-decoration: none; box-shadow: var(--sh-1); transition: transform .2s; }
.fj-adcard:hover { transform: translateY(-3px); }
.fj-adcard-img { position: relative; aspect-ratio: 16 / 8; background: var(--surface-2); }
.fj-adcard-img img { width: 100%; height: 100%; object-fit: cover; }
.fj-adcard-img i { position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 99px; background: rgba(15, 23, 42, .78); color: #fff; font-size: .66rem; font-style: normal; font-weight: 700; }
.fj-adcard-img i svg { width: 11px; height: 11px; }
.fj-adcard-body { display: grid; gap: 3px; padding: 12px 14px 14px; }
.fj-adcard-body b { font-size: .98rem; }
.fj-adcard-body small { color: var(--theme-muted); font-size: .8rem; }
.fj-adcard-body em { display: inline-flex; align-items: center; gap: 2px; margin-top: 4px; font-style: normal; font-size: .76rem; font-weight: 700; color: var(--theme-primary); }
.fj-adcard-body em svg { width: 14px; height: 14px; }

/* ── Pop-up campaigns ──────────────────────────────────────── */
.fj-popup { z-index: 4500; }
.fj-popup-box { padding: 0; overflow: hidden; max-width: 420px; gap: 0; position: relative; }
.fj-popup-x { position: absolute; right: 12px; top: 12px; z-index: 2; background: rgba(255, 255, 255, .92) !important; color: #0f172a !important; }
.fj-popup-img { aspect-ratio: 16 / 10; background: linear-gradient(135deg, #15803d, #22c55e); display: grid; place-items: center; }
.fj-popup-img img { width: 100%; height: 100%; object-fit: cover; }
.fj-popup-img.plain svg { width: 70px; height: 70px; color: #fff; }
.fj-popup-body { padding: 20px 22px 18px; display: grid; gap: 8px; }
.fj-popup-kicker { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 5px 11px; border-radius: 99px; background: color-mix(in srgb, var(--theme-primary) 12%, transparent); color: var(--theme-primary); font-size: .74rem; font-weight: 800; }
.fj-popup-kicker svg { width: 14px; height: 14px; }
.fj-popup-body h3 { margin: 4px 0 0; font-size: 1.3rem; line-height: 1.25; }
.fj-popup-body p { margin: 0; color: var(--theme-muted); font-size: .92rem; line-height: 1.55; }
.fj-popup-acts { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.fj-popup-acts .btn { flex: 1; justify-content: center; min-width: 140px; }
.fj-popup-mute { justify-self: center; margin-top: 2px; border: none; background: none; color: var(--theme-muted); font: inherit; font-size: .76rem; text-decoration: underline; cursor: pointer; }

/* ── "What should I eat?" button + modal ───────────────────── */
.fj-ask-fab { position: fixed; left: 20px; bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 900; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px 12px 14px; border: none; border-radius: 999px; background: linear-gradient(135deg, #7c3aed, #db2777); color: #fff; font: inherit; font-weight: 800; font-size: .88rem; box-shadow: 0 12px 30px -8px rgba(124, 58, 237, .6); cursor: pointer; transition: transform .2s; animation: fjAskIn .6s 1s both cubic-bezier(.2, .8, .2, 1); }
.fj-ask-fab:hover { transform: translateY(-3px); }
.fj-ask-fab svg { width: 18px; height: 18px; }
@keyframes fjAskIn { from { opacity: 0; transform: translateY(20px); } }
@media (max-width: 768px) { body.fj-has-tabbar .fj-ask-fab { bottom: calc(166px + env(safe-area-inset-bottom)); } }
@media (max-width: 640px) { .fj-ask-fab { left: auto; right: 12px; padding: 11px 14px 11px 12px; font-size: .8rem; } }
@media (max-width: 380px) { .fj-ask-fab span { display: none; } .fj-ask-fab { padding: 13px; } }
.fj-ask-box { max-width: 560px; }
.fj-ask-head { display: flex; align-items: flex-start; gap: 12px; }
.fj-ask-head h3 { margin: 0; font-size: 1.15rem; }
.fj-ask-head p { margin: 2px 0 0; color: var(--theme-muted); font-size: .84rem; }
.fj-ask-head .fj-icon-btn { margin-left: auto; flex: none; }
.fj-ask-ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(135deg, #7c3aed, #db2777); color: #fff; }
.fj-ask-ico svg { width: 22px; height: 22px; }
.fj-ask-body { display: grid; gap: 14px; overflow-y: auto; }
.fj-ask-q b { display: block; margin-bottom: 7px; font-size: .86rem; }
.fj-ask-budget { display: flex; align-items: center; gap: 12px; }
.fj-ask-budget input { flex: 1; min-width: 0; accent-color: #7c3aed; }
.fj-ask-budget output { min-width: 96px; text-align: right; font-weight: 800; color: #7c3aed; }
.fj-ask-chips { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.fj-ask-chip { display: inline-flex; align-items: center; gap: 5px; padding: 8px 12px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--theme-card-bg); color: var(--theme-text); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }
.fj-ask-chip svg { width: 14px; height: 14px; }
.fj-ask-chip.on { border-color: #7c3aed; background: color-mix(in srgb, #7c3aed 10%, transparent); color: #7c3aed; }
.fj-ask-veg { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; margin-left: 4px; }
.fj-ask-go { width: 100%; justify-content: center; background: linear-gradient(135deg, #7c3aed, #db2777) !important; border: none !important; }
.fj-ask-msg { display: flex; gap: 6px; align-items: flex-start; margin: 4px 0 8px; font-size: .84rem; color: var(--theme-muted); }
.fj-ask-msg svg { width: 16px; height: 16px; color: #22c55e; flex: none; margin-top: 1px; }
.fj-ask-pick { display: flex; align-items: center; gap: 12px; padding: 10px; margin-bottom: 8px; border-radius: 15px; border: 1px solid var(--line); background: var(--surface-2); }
.fj-ask-pick-imgs { display: flex; flex: none; }
.fj-ask-pick-imgs img { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; border: 2px solid var(--theme-card-bg); }
.fj-ask-pick-imgs img + img { margin-left: -18px; }
.fj-ask-pick-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.fj-ask-pick-body b { font-size: .86rem; line-height: 1.3; }
.fj-ask-pick-body small { font-size: .72rem; color: var(--theme-muted); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.fj-ask-pick-body small svg { width: 12px; height: 12px; color: #7c3aed; }
.fj-ask-total { font-weight: 800; font-size: .88rem; color: var(--theme-primary); }
.fj-ask-total em { font-style: normal; font-weight: 500; font-size: .7rem; color: var(--theme-muted); }
.fj-ask-more { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 6px; font-weight: 700; font-size: .86rem; color: #7c3aed; text-decoration: none; }
.fj-ask-more svg { width: 16px; height: 16px; }
@media (max-width: 420px) { .fj-ask-pick { flex-wrap: wrap; } .fj-ask-pick .btn { width: 100%; justify-content: center; } }

/* ── Order chat ────────────────────────────────────────────── */
.fj-chat { z-index: 4600; }
.fj-chat-box { max-width: 460px; height: min(640px, 88vh); padding: 0; gap: 0; overflow: hidden; }
.fj-chat-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.fj-chat-head div { flex: 1; min-width: 0; }
.fj-chat-head b { display: block; font-size: .95rem; }
.fj-chat-head small { color: var(--theme-muted); font-size: .74rem; }
.fj-chat-ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: color-mix(in srgb, var(--theme-primary) 14%, transparent); color: var(--theme-primary); }
.fj-chat-ico svg { width: 19px; height: 19px; }
.fj-chat-call { color: var(--theme-primary) !important; }
.fj-chat-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 16px; background: var(--surface-2); }
.fj-msg { max-width: 82%; display: grid; gap: 3px; align-self: flex-start; }
.fj-msg span { padding: 9px 13px; border-radius: 16px 16px 16px 4px; background: var(--theme-card-bg); border: 1px solid var(--line); font-size: .88rem; line-height: 1.45; overflow-wrap: anywhere; }
.fj-msg small { font-size: .66rem; color: var(--theme-muted); padding: 0 4px; }
.fj-msg.mine { align-self: flex-end; text-align: right; }
.fj-msg.mine span { background: var(--theme-primary); border-color: var(--theme-primary); color: #fff; border-radius: 16px 16px 4px 16px; text-align: left; }
.fj-tick { font-style: normal; letter-spacing: -2px; margin-left: 2px; color: var(--theme-muted); }
.fj-tick.read { color: #3b82f6; font-weight: 800; }
.fj-msg.mine small .fj-tick.read { color: #2563eb; }
/* cities: one row you swipe left / right (never a tall block that squeezes the area list) */
.fj-loc-cities { flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden; scroll-snap-type: x proximity; scroll-padding: 0 8px; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; padding-bottom: 6px; mask-image: linear-gradient(90deg, #000 92%, transparent); }
.fj-loc-cities > .fj-loc-city { scroll-snap-align: start; }
.fj-loc-cities::-webkit-scrollbar { height: 5px; } .fj-loc-cities::-webkit-scrollbar-thumb { background: var(--line); border-radius: 9px; }
.fj-chat-empty { margin: auto; display: flex; align-items: center; gap: 6px; color: var(--theme-muted); font-size: .86rem; }
.fj-chat-empty svg { width: 16px; height: 16px; }
.fj-chat-note { margin: 0; padding: 9px 16px; font-size: .78rem; color: #b45309; background: #fffbeb; }
html[data-mode="dark"] .fj-chat-note { background: rgba(245, 158, 11, .12); color: #fcd34d; }
.fj-chat-form { display: flex; gap: 8px; padding: 10px 12px 4px; border-top: 1px solid var(--line); }
.fj-chat-form[hidden], .fj-chat-quick[hidden] { display: none; }
.fj-chat-form input { flex: 1; min-width: 0; padding: 12px 14px; border-radius: 13px; border: 1.5px solid var(--line); background: var(--theme-card-bg); color: var(--theme-text); font: inherit; font-size: 16px; outline: none; }
.fj-chat-form input:focus { border-color: var(--theme-primary); }
.fj-chat-form .btn { padding: 0 16px !important; flex: none; width: auto !important; min-width: 52px; }
.fj-chat-quick { display: flex; gap: 6px; overflow-x: auto; padding: 6px 12px 12px; }
.fj-chat-quick button { flex: none; padding: 6px 11px; border-radius: 99px; border: 1px solid var(--line); background: var(--theme-card-bg); color: var(--theme-text); font: inherit; font-size: .74rem; cursor: pointer; }
@media (max-width: 640px) { .fj-chat-box { height: 92vh; border-radius: 20px 20px 0 0; } }

/* Chat / call buttons on order cards */
.fj-contact { display: flex; flex-wrap: wrap; gap: 8px; }
.fj-contact a, .fj-contact button { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 11px; border: 1px solid var(--line); background: var(--theme-card-bg); color: var(--theme-text); font: inherit; font-size: .8rem; font-weight: 700; text-decoration: none; cursor: pointer; }
.fj-contact svg { width: 15px; height: 15px; color: var(--theme-primary); }
.fj-contact .n { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: #ef4444; color: #fff; font-size: .66rem; display: grid; place-items: center; }

/* ── Uploads, private images ───────────────────────────────── */
.fj-upbox { display: flex; align-items: center; gap: 12px; padding: 11px; border-radius: 14px; border: 1.5px dashed var(--line); background: var(--surface-2); cursor: pointer; transition: .15s; }
.fj-upbox:hover { border-color: var(--theme-primary); }
.fj-upbox.done { border-style: solid; border-color: color-mix(in srgb, var(--theme-primary) 60%, var(--line)); }
.fj-upbox.busy { opacity: .7; pointer-events: none; }
.fj-upbox-prev { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 11px; background: var(--theme-card-bg); color: var(--theme-primary); overflow: hidden; }
.fj-upbox-prev svg { width: 22px; height: 22px; }
.fj-upbox-prev img { width: 100%; height: 100%; object-fit: cover; }
.fj-upbox-txt { min-width: 0; display: grid; }
.fj-upbox-txt b { font-size: .86rem; }
.fj-upbox-txt small { font-size: .74rem; color: var(--theme-muted); }
.fj-imgview { z-index: 5000; align-items: center !important; padding: 16px; }
.fj-imgview-box { position: relative; max-width: min(520px, 100%); max-height: 90vh; }
.fj-imgview-box img { display: block; max-width: 100%; max-height: 86vh; border-radius: 16px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.fj-imgview-box button { position: absolute; right: 10px; top: 10px; background: #fff !important; color: #0f172a !important; }
.fj-proof-thumb { width: 64px; height: 64px; border-radius: 11px; object-fit: cover; border: 1px solid var(--line); cursor: zoom-in; background: var(--surface-2); }

/* ── Map pins ──────────────────────────────────────────────── */
.fj-map { height: 260px; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); z-index: 0; }
.fj-pin span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg); background: #16a34a; color: #fff; box-shadow: 0 6px 14px rgba(0, 0, 0, .3); border: 2px solid #fff; }
.fj-pin span svg { width: 16px; height: 16px; transform: rotate(45deg); }
.fj-pin-home span { background: #2563eb; }
.fj-pin-bike span { background: #f97316; animation: fjBike 1.6s ease-in-out infinite; }
.fj-pin-me span { background: #7c3aed; }
@keyframes fjBike { 50% { box-shadow: 0 0 0 8px rgba(249, 115, 22, .25); } }

/* ── Favourite heart ───────────────────────────────────────── */
.fj-heart { position: absolute; right: 10px; top: 10px; z-index: 4; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: none; background: rgba(255, 255, 255, .92); color: #64748b; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, .15); transition: transform .15s; }
.fj-heart svg { width: 17px; height: 17px; }
.fj-heart:hover { transform: scale(1.08); }
.fj-heart.on { color: #ef4444; }
.fj-heart.on svg { fill: currentColor; }
.fj-heart.inline { position: static; box-shadow: none; border: 1px solid var(--line); background: var(--theme-card-bg); }

/* ── Account notices ───────────────────────────────────────── */
.fj-acct-banner { position: relative; z-index: 1100; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 10px 16px; background: #fef2f2; color: #991b1b; font-size: .86rem; }
.fj-acct-banner svg { width: 17px; height: 17px; }
.fj-acct-banner .btn { padding: 6px 12px !important; border-radius: 9px !important; background: #991b1b !important; color: #fff !important; border: none !important; }
.fj-warnpop { z-index: 4800; }
.fj-warn-box { max-width: 420px; text-align: center; align-items: center; }
.fj-warn-ico { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #fef3c7; color: #d97706; }
.fj-warn-ico svg { width: 30px; height: 30px; }
.fj-warn-box h3 { margin: 4px 0 0; }
.fj-warn-box p { margin: 0; font-size: .95rem; line-height: 1.55; }
.fj-warn-box small { color: var(--theme-muted); font-size: .78rem; }
.fj-warn-box .btn { width: 100%; justify-content: center; }
.fj-warn-mark { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 99px; background: #fef3c7; color: #b45309; font-size: .7rem; font-weight: 800; }
.fj-warn-mark svg { width: 12px; height: 12px; }

/* ── Footer policies ───────────────────────────────────────── */
.fj-foot-policies { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.fj-foot-policies a { color: inherit; opacity: .8; font-size: .82rem; text-decoration: none; }
.fj-foot-policies a:hover { opacity: 1; text-decoration: underline; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between; align-items: center; }

/* ── Page sections (deals, budget, help, policies) ─────────── */
.fj-page { padding: calc(var(--nav-h, 72px) + 22px) 0 70px; }
.fj-page-hero { position: relative; overflow: hidden; display: grid; gap: 8px; padding: 30px; margin-bottom: 26px; border-radius: 26px; color: #fff; background: radial-gradient(600px 300px at 90% 0%, rgba(250, 204, 21, .35), transparent 60%), linear-gradient(135deg, #15803d, #16a34a 45%, #f97316); box-shadow: var(--sh-2, 0 16px 40px rgba(0, 0, 0, .15)); }
.fj-page-hero.violet { background: radial-gradient(600px 300px at 90% 0%, rgba(250, 204, 21, .3), transparent 60%), linear-gradient(135deg, #6d28d9, #9333ea 50%, #db2777); }
.fj-page-hero.slate { background: linear-gradient(135deg, #0f172a, #1e293b 55%, #15803d); }
.fj-page-hero small { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; opacity: .9; }
.fj-page-hero small svg { width: 15px; height: 15px; }
.fj-page-hero h1 { margin: 0; font-size: clamp(1.6rem, 4vw, 2.6rem); line-height: 1.1; color: #fff; }
.fj-page-hero p { margin: 0; max-width: 620px; opacity: .92; }
.fj-sec { margin: 0 0 30px; }
.fj-sec[hidden] { display: none; }
.fj-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.fj-sec-head h2 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: clamp(1.15rem, 2.4vw, 1.45rem); }
.fj-sec-head h2 .ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--c, var(--theme-primary)); color: #fff; }
.fj-sec-head h2 .ic svg { width: 18px; height: 18px; }
.fj-sec-head p { margin: 4px 0 0; color: var(--theme-muted); font-size: .86rem; }
.fj-cdown { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; background: linear-gradient(135deg, #7c3aed, #db2777); color: #fff; font-weight: 800; font-size: .82rem; }
.fj-cdown svg { width: 15px; height: 15px; }
.fj-hrow { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 230px); gap: 14px; overflow-x: auto; padding: 4px 2px 12px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.fj-hrow > * { scroll-snap-align: start; }
@media (max-width: 640px) { .fj-hrow { grid-auto-columns: minmax(165px, 72vw); } .fj-page-hero { padding: 22px; border-radius: 20px; } }
.fj-chips-nav { display: flex; gap: 8px; overflow-x: auto; margin: -8px 0 22px; padding-bottom: 6px; }
.fj-chips-nav a { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--theme-card-bg); color: var(--theme-text); font-weight: 600; font-size: .82rem; text-decoration: none; }
.fj-chips-nav a svg { width: 15px; height: 15px; color: var(--theme-primary); }

/* Coupon tickets */
.fj-coupons { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.fj-coupon { position: relative; display: flex; align-items: stretch; border-radius: 16px; overflow: hidden; background: var(--theme-card-bg); border: 1px solid var(--line); box-shadow: var(--sh-1); }
.fj-coupon-l { display: grid; place-items: center; padding: 0 14px; min-width: 76px; background: linear-gradient(160deg, #f97316, #ef4444); color: #fff; font-weight: 900; font-size: 1.05rem; text-align: center; line-height: 1.1; }
.fj-coupon-l small { display: block; font-size: .62rem; font-weight: 700; opacity: .9; }
.fj-coupon-r { flex: 1; min-width: 0; padding: 12px 14px; display: grid; gap: 4px; border-left: 2px dashed var(--line); }
.fj-coupon-r b { font-size: .88rem; }
.fj-coupon-r small { color: var(--theme-muted); font-size: .74rem; }
.fj-coupon-code { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 9px; border: 1.5px dashed var(--theme-primary); background: color-mix(in srgb, var(--theme-primary) 7%, transparent); color: var(--theme-primary); font: inherit; font-weight: 800; font-size: .8rem; letter-spacing: .05em; cursor: pointer; }
.fj-coupon-code svg { width: 13px; height: 13px; }

/* Combo cards */
.fj-combos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.fj-combo-card { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--theme-card-bg); border: 1px solid var(--line); box-shadow: var(--sh-1); }
.fj-combo-card-img { position: relative; aspect-ratio: 16 / 9; background: var(--surface-2); }
.fj-combo-card-img img { width: 100%; height: 100%; object-fit: cover; }
.fj-combo-card-img .fj-tag { position: absolute; left: 10px; top: 10px; }
.fj-combo-card-body { flex: 1; display: grid; gap: 6px; padding: 13px 14px 14px; align-content: start; }
.fj-combo-card-body b { font-size: 1rem; }
.fj-combo-card-body small { color: var(--theme-muted); font-size: .78rem; line-height: 1.4; }
.fj-combo-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.fj-combo-card-foot .btn { padding: 8px 14px !important; }

/* Budget page */
.fj-budget-form { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr auto; gap: 14px; align-items: end; padding: 18px; border-radius: 22px; background: var(--theme-card-bg); border: 1px solid var(--line); box-shadow: var(--sh-1); margin-bottom: 24px; }
.fj-budget-form label { display: grid; gap: 6px; font-size: .78rem; font-weight: 700; color: var(--theme-muted); min-width: 0; }
.fj-budget-form input, .fj-budget-form select { width: 100%; min-width: 0; padding: 11px 12px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--theme-card-bg); color: var(--theme-text); font: inherit; font-size: 16px; }
.fj-budget-range { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; }
.fj-budget-range span { color: var(--theme-muted); }
.fj-budget-form .btn { height: 46px; justify-content: center; }
@media (max-width: 900px) { .fj-budget-form { grid-template-columns: 1fr 1fr; } .fj-budget-form label:first-child, .fj-budget-form .btn { grid-column: 1 / -1; } }
.fj-meals { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.fj-meal { display: grid; gap: 10px; padding: 14px; border-radius: 18px; background: var(--theme-card-bg); border: 1px solid var(--line); box-shadow: var(--sh-1); }
.fj-meal-imgs { display: flex; gap: 8px; }
.fj-meal-imgs img { flex: 1; min-width: 0; height: 96px; object-fit: cover; border-radius: 12px; }
.fj-meal b { font-size: .95rem; line-height: 1.35; }
.fj-meal small { color: var(--theme-muted); font-size: .78rem; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.fj-meal small svg { width: 13px; height: 13px; color: #7c3aed; }
.fj-meal-break { display: grid; gap: 3px; padding: 9px 11px; border-radius: 12px; background: var(--surface-2); font-size: .8rem; }
.fj-meal-break div { display: flex; justify-content: space-between; gap: 8px; }
.fj-meal-break .tot { font-weight: 800; color: var(--theme-primary); border-top: 1px dashed var(--line); padding-top: 5px; margin-top: 2px; }
.fj-meal .btn { justify-content: center; }

/* Help & policies */
.fj-help-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-bottom: 26px; }
.fj-help-card { display: grid; gap: 6px; padding: 16px; border-radius: 18px; background: var(--theme-card-bg); border: 1px solid var(--line); box-shadow: var(--sh-1); color: var(--theme-text); text-decoration: none; font: inherit; text-align: left; cursor: pointer; }
.fj-help-card svg { width: 24px; height: 24px; color: var(--theme-primary); }
.fj-help-card b { font-size: .95rem; }
.fj-help-card small { color: var(--theme-muted); font-size: .8rem; line-height: 1.45; }
.fj-faq details { border-radius: 14px; border: 1px solid var(--line); background: var(--theme-card-bg); margin-bottom: 8px; }
.fj-faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px; font-weight: 700; font-size: .92rem; cursor: pointer; }
.fj-faq summary::-webkit-details-marker { display: none; }
.fj-faq summary svg { width: 17px; height: 17px; flex: none; transition: transform .2s; color: var(--theme-muted); }
.fj-faq details[open] summary svg { transform: rotate(180deg); }
.fj-faq details p { margin: 0; padding: 0 16px 14px; color: var(--theme-muted); font-size: .9rem; line-height: 1.6; }
.fj-faq-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.fj-faq-tabs button { padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--theme-card-bg); color: var(--theme-text); font: inherit; font-weight: 600; font-size: .84rem; cursor: pointer; }
.fj-faq-tabs button.on { background: var(--theme-primary); border-color: var(--theme-primary); color: #fff; }
.fj-doc { max-width: 820px; margin: 0 auto; padding: 28px; border-radius: 22px; background: var(--theme-card-bg); border: 1px solid var(--line); box-shadow: var(--sh-1); line-height: 1.7; }
.fj-doc h2 { margin: 26px 0 8px; font-size: 1.15rem; }
.fj-doc h2:first-child { margin-top: 0; }
.fj-doc p, .fj-doc li { color: var(--theme-text); font-size: .94rem; }
.fj-doc ul { padding-left: 20px; }
.fj-doc .meta { color: var(--theme-muted); font-size: .82rem; }
.fj-doc-nav { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 18px; }
.fj-doc-nav a { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--theme-card-bg); color: var(--theme-text); font-weight: 600; font-size: .84rem; text-decoration: none; }
.fj-doc-nav a.on { background: var(--theme-primary); border-color: var(--theme-primary); color: #fff; }
@media (max-width: 640px) { .fj-doc { padding: 20px 16px; border-radius: 18px; } }

/* Generic small form bits used by several pages */
.fj-field { display: grid; gap: 6px; font-size: .8rem; font-weight: 700; color: var(--theme-muted); min-width: 0; }
.fj-field input, .fj-field select, .fj-field textarea { width: 100%; min-width: 0; padding: 11px 12px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--theme-card-bg); color: var(--theme-text); font: inherit; font-size: 16px; outline: none; }
.fj-field input:focus, .fj-field select:focus, .fj-field textarea:focus { border-color: var(--theme-primary); }
.fj-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 520px) { .fj-row2 { grid-template-columns: minmax(0, 1fr); } }
.fj-note { display: flex; gap: 8px; align-items: flex-start; padding: 11px 13px; border-radius: 13px; font-size: .84rem; line-height: 1.5; background: color-mix(in srgb, var(--theme-primary) 8%, transparent); color: var(--theme-text); }
.fj-note svg { width: 17px; height: 17px; flex: none; color: var(--theme-primary); margin-top: 1px; }
.fj-note.warn { background: #fffbeb; color: #92400e; }
.fj-note.warn svg { color: #d97706; }
.fj-note.bad { background: #fef2f2; color: #991b1b; }
.fj-note.bad svg { color: #dc2626; }
html[data-mode="dark"] .fj-note.warn { background: rgba(245, 158, 11, .12); color: #fcd34d; }
html[data-mode="dark"] .fj-note.bad { background: rgba(239, 68, 68, .12); color: #fca5a5; }
.fj-copy { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 8px; border: 1px solid var(--line); background: var(--theme-card-bg); color: var(--theme-text); font: inherit; font-size: .76rem; font-weight: 700; cursor: pointer; }
.fj-copy svg { width: 13px; height: 13px; }
.fj-empty-sm { display: grid; justify-items: center; gap: 8px; padding: 26px 12px; color: var(--theme-muted); text-align: center; font-size: .9rem; }
.fj-empty-sm svg { width: 30px; height: 30px; opacity: .6; }

/* ── Header: room for the Deals link on every desktop width ── */
.fj-header .fj-nav { flex-wrap: nowrap; min-width: 0; }
.fj-header .fj-actions { flex: none; }
@media (min-width: 1px) {
  .fj-header .fj-support-txt { display: none; }
  .fj-header .fj-support-btn { width: 42px; padding: 0; justify-content: center; }
  .fj-header .fj-account-name { display: none; }
  .fj-header .fj-account { padding: 4px; min-width: 42px; justify-content: center; }
  .fj-header .fj-links { gap: 0; margin-left: 4px; }
  .fj-header .fj-link { padding: 8px 10px; font-size: .9rem; }
  .fj-header .fj-loc-text { max-width: 120px; }
}
@media (max-width: 1440px) {
  .fj-header .fj-link { padding: 7px 8px; font-size: .86rem; }
  .fj-header .fj-actions { gap: 6px; }
  .fj-header .fj-loc-text { max-width: 96px; }
}
@media (max-width: 1300px) {
  .fj-header .fj-links { display: none; }
  .fj-header .fj-burger { display: inline-flex; }
}
@media (max-width: 1300px) and (min-width: 1101px) {
  .fj-header .fj-loc-text { max-width: 150px; display: inline-block; }
  .fj-header .fj-loc-caret { display: inline-block; }
  .fj-header .fj-loc { width: auto; padding: 0 12px; }
}

/* ── Hero "Deliver to" row: one tidy line on every screen ─── */
.fj-deliver-to { display: flex; width: 100%; max-width: 560px; contain: inline-size; box-sizing: border-box; gap: 8px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); text-align: left; white-space: nowrap; }
.fj-deliver-to svg { flex: none; }
.fj-deliver-to .fj-loc-text { flex: 1; min-width: 0; max-width: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fj-deliver-to span { flex: none; margin-left: auto; }
@media (max-width: 480px) {
  .fj-deliver-to { font-size: .84rem; padding: 9px 12px; gap: 6px; }
}

/* Phones: the profile lives at the top of the side menu, not in the header */
.fj-drawer-avatar { overflow: hidden; }
.fj-drawer-avatar img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 768px) {
  .fj-header .fj-account { display: none !important; }
}

/* Phones: search suggestions stay compact — one swipeable row of small chips per section */
@media (max-width: 640px) {
  .fj-sugg { padding: 6px; border-radius: 16px; max-height: min(60vh, 420px); }
  .fj-sugg-sec { padding: 2px 2px 6px; }
  .fj-sugg-head { padding: 6px 6px 5px; font-size: .66rem; }
  .fj-sugg-chips { flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding: 0 4px 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .fj-sugg-chips::-webkit-scrollbar { display: none; }
  .fj-sugg-chip { flex: none; padding: 6px 10px; gap: 5px; font-size: .78rem; white-space: nowrap; }
  .fj-sugg-chip svg { width: 13px; height: 13px; }
  .fj-sugg-row { padding: 7px 8px; gap: 10px; }
  .fj-sugg-row img, .fj-sugg-ico, .fj-sugg-all > svg:first-child { width: 38px; height: 38px; border-radius: 10px; }
  .fj-sugg-all > svg:first-child { padding: 10px; }
  .fj-sugg-main b { font-size: .86rem; }
}

/* Taste pop-up price range + "What should I eat?" button on shelves */
.fj-taste-range { margin: 6px 0 14px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface-2); }
.fj-shelf-head > .fj-link-more { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border: none; border-radius: 999px; background: linear-gradient(135deg, #7c3aed, #db2777); color: #fff; font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.fj-shelf-head > .fj-link-more svg { width: 14px; height: 14px; }
@media (max-width: 640px) { .fj-shelf-head:has(> .fj-link-more) { flex-wrap: wrap; align-items: center; } .fj-shelf-head:has(> .fj-link-more) .fj-shelf-arrows { display: none; } }
.fj-ask-inline { background: linear-gradient(135deg, #7c3aed, #db2777) !important; color: #fff !important; border-color: transparent !important; }
.fj-ask-body { grid-template-columns: minmax(0, 1fr); } .fj-ask-body > *, .fj-range, .fj-fbar-range { min-width: 0; }

/* Sponsored tag in search suggestions + ads on the restaurants page */
.fj-sugg-ad { display: inline-flex; align-items: center; gap: 3px; margin-right: 6px; padding: 1px 7px; border-radius: 999px; background: rgba(14, 165, 233, .12); color: #0284c7; font-style: normal; font-size: .66rem; font-weight: 800; }
.fj-sugg-ad svg { width: 10px !important; height: 10px !important; }
.fj-sugg-row em s { color: var(--theme-muted); font-weight: 500; font-size: .76rem; }
.fj-shop-ads { margin: 0 0 26px; }
.pd-section-head h2 svg { width: 20px; height: 20px; vertical-align: -3px; color: var(--theme-primary); }
.fj-sugg { background-color: var(--theme-bg, #fff); background-image: linear-gradient(var(--theme-card-bg), var(--theme-card-bg)); backdrop-filter: blur(14px); }

/* ── Ad label — the way social apps mark ads: [Ad] Sponsored ── */
.fj-ad { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 2px; border-radius: 7px; background: rgba(255, 255, 255, .96); color: #0f172a;
  font-family: inherit; font-size: .68rem; font-weight: 700; line-height: 1.4; letter-spacing: .01em; white-space: nowrap; box-shadow: 0 1px 2px rgba(15, 23, 42, .18), 0 0 0 1px rgba(15, 23, 42, .08); vertical-align: middle; font-style: normal; }
.fj-ad b { display: inline-grid; place-items: center; min-width: 20px; height: 16px; padding: 0 4px; border-radius: 5px; background: #0f172a; color: #facc15; font-size: .6rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
[data-mode="dark"] .fj-ad { background: rgba(15, 23, 42, .92); color: #f8fafc; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); }
[data-mode="dark"] .fj-ad b { background: #facc15; color: #0f172a; }
/* where it sits */
.fj-tags .fj-ad, .fj-tags.inline .fj-ad { margin: 0; }
.fj-adcard-img .fj-ad { position: absolute; left: 10px; top: 10px; }
.fj-adc-text small .fj-ad { margin-right: 4px; }
.fj-popup-body .fj-ad { margin: 0 6px 6px 0; }
.fj-sugg-main small .fj-ad { margin-right: 6px; padding-top: 1px; padding-bottom: 1px; }
.fj-rest-wide-img > .fj-ad { position: absolute; left: 10px; top: 10px; z-index: 2; }
.fj-ad-sort { order: -1; }
/* Ad cards keep their wide photo shape (the image no longer stretches the card) */
.fj-adcard-img { overflow: hidden; flex: none; }
.fj-adcard-img img { position: absolute; inset: 0; }
@media (max-width: 480px) { .fj-adcards { grid-auto-columns: 78%; } }

/* ── PDF viewer (reports open in the page first) ── */
.fj-pdf { align-items: center; padding: 16px; }
.fj-pdf-box { width: min(1100px, 100%); height: min(92vh, 1200px); display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--theme-card-bg); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .55); }
.fj-pdf-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--line); }
.fj-pdf-bar b { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: .9rem; }
.fj-pdf-bar b span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fj-pdf-bar b svg { width: 18px; height: 18px; color: #dc2626; flex: none; }
.fj-pdf-bar > div { display: flex; align-items: center; gap: 6px; }
.fj-pdf-bar .btn { width: auto !important; display: inline-flex; align-items: center; gap: 6px; }
.fj-pdf-bar .btn svg { width: 15px; height: 15px; }
.fj-pdf-ghost { background: var(--surface-2) !important; color: var(--theme-text) !important; border: 1px solid var(--line) !important; text-decoration: none; }
.fj-pdf-box iframe { flex: 1; width: 100%; border: none; background: #525659; }
@media (max-width: 640px) { .fj-pdf { padding: 0; } .fj-pdf-box { height: 100%; border-radius: 0; } .fj-pdf-bar > div { width: 100%; } .fj-pdf-bar .fj-icon-btn { margin-left: auto; } }

/* Spending section on the profile page */
.pf-spending .pf-sub { margin: -4px 0 14px; color: var(--theme-muted); font-size: .86rem; }
.pf-spending .rp-types { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.pf-spending .rp-bar { position: static; }
.fj-pdf-pages { flex: 1; overflow: auto; display: grid; justify-items: center; align-content: start; gap: 14px; padding: 14px 12px; background: #525659; }
.fj-pdf-pages canvas { max-width: 100%; height: auto; background: #fff; box-shadow: 0 6px 22px rgba(0, 0, 0, .35); border-radius: 3px; }
.fj-pdf-pages iframe { width: 100%; height: 100%; min-height: 70vh; border: none; }
.fj-pdf-wait { display: flex; align-items: center; gap: 8px; margin-top: 40px; color: #e2e8f0; font-weight: 600; }
.fj-pdf-wait svg { animation: fjSpin 1s linear infinite; }
@keyframes fjSpin { to { transform: rotate(360deg); } }
.fj-pdf-acts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fj-pdf-acts .fj-pdf-ghost { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px; font: inherit; font-size: .82rem; font-weight: 700; white-space: nowrap; cursor: pointer; }
.fj-pdf-acts .fj-pdf-ghost svg { width: 15px; height: 15px; }
@media (max-width: 640px) { .fj-pdf-acts .btn, .fj-pdf-acts .fj-pdf-ghost { padding: 8px 10px; font-size: .78rem; } }

/* ── Notifications (all roles): rows, read switch, "View all" and the full list ── */
.fj-n { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 10px 10px 12px; border-radius: 14px; cursor: pointer; transition: background .15s; }
.fj-n + .fj-n { margin-top: 2px; }
.fj-n:hover { background: var(--surface-2); }
.fj-n.unread { background: color-mix(in srgb, var(--nc, #16a34a) 7%, transparent); }
.fj-n.unread::before { content: ''; position: absolute; left: 3px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--nc, #16a34a); }
.fj-n-ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: color-mix(in srgb, var(--nc, #16a34a) 14%, transparent); color: var(--nc, #16a34a); flex: none; }
.fj-n-ico svg { width: 17px; height: 17px; }
.fj-n-body { min-width: 0; display: grid; gap: 2px; }
.fj-n-body b { font-size: .85rem; font-weight: 600; color: var(--theme-text); }
.fj-n.unread .fj-n-body b { font-weight: 800; }
.fj-n-body p { margin: 0; font-size: .78rem; line-height: 1.4; color: var(--theme-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fj-n-body small { font-size: .7rem; color: var(--theme-muted); font-weight: 600; }
.fj-n.unread .fj-n-body small { color: var(--nc, #16a34a); }
.fj-n-toggle { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; border: 1px solid transparent; background: none; color: var(--theme-muted); cursor: pointer; opacity: .55; transition: .15s; }
.fj-n:hover .fj-n-toggle, .fj-n-toggle:focus-visible { opacity: 1; border-color: var(--line); background: var(--theme-card-bg); }
.fj-n-toggle svg { width: 15px; height: 15px; }
@media (hover: none) { .fj-n-toggle { opacity: .9; } }
.fj-n-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 8px; }
.fj-n-head b { font-size: .92rem; }
.fj-n-head button { display: inline-flex; align-items: center; gap: 5px; border: none; background: none; color: var(--theme-primary); font: inherit; font-size: .76rem; font-weight: 700; cursor: pointer; }
.fj-n-head button svg { width: 14px; height: 14px; }
.fj-n-all { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 6px; padding: 11px; border: none; border-top: 1px solid var(--line); border-radius: 0 0 12px 12px; background: var(--surface-2); color: var(--theme-primary); font: inherit; font-size: .82rem; font-weight: 800; cursor: pointer; }
.fj-n-all svg { width: 15px; height: 15px; }
.fj-n-all:hover { background: color-mix(in srgb, var(--theme-primary) 10%, var(--surface-2)); }
.fj-bell-list .fj-n, .dash-notifs .fj-n { margin: 0 4px; }

.fj-ncenter { align-items: center; padding: 16px; }
.fj-nc-box { width: min(640px, 100%); max-height: min(88vh, 900px); display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: var(--theme-card-bg); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .5); }
.fj-nc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 16px 10px 20px; }
.fj-nc-head h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1.15rem; }
.fj-nc-head h3 svg { width: 20px; height: 20px; color: var(--theme-primary); }
.fj-nc-head p { margin: 2px 0 0; color: var(--theme-muted); font-size: .8rem; }
.fj-nc-acts { display: flex; align-items: center; gap: 6px; }
.fj-nc-btn { display: inline-flex; align-items: center; gap: 5px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); color: var(--theme-text); font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.fj-nc-btn svg { width: 14px; height: 14px; color: var(--theme-primary); }
.fj-nc-chips { display: flex; gap: 6px; overflow-x: auto; padding: 0 16px 12px 20px; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.fj-nc-chips::-webkit-scrollbar { display: none; }
.fj-nc-chip { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 7px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--theme-card-bg); color: var(--theme-text); font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; }
.fj-nc-chip svg { width: 14px; height: 14px; color: var(--nc); }
.fj-nc-chip em { min-width: 18px; padding: 0 5px; border-radius: 99px; background: var(--nc); color: #fff; font-style: normal; font-size: .66rem; text-align: center; }
.fj-nc-chip.on { border-color: var(--nc); background: color-mix(in srgb, var(--nc) 12%, var(--theme-card-bg)); }
.fj-nc-list { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 8px 10px 14px; }
.fj-nc-empty { display: grid; justify-items: center; gap: 4px; padding: 50px 20px; text-align: center; color: var(--theme-muted); }
.fj-nc-empty svg { width: 34px; height: 34px; opacity: .5; }
.fj-nc-empty b { color: var(--theme-text); }
.fj-nc-more { display: block; margin: 10px auto 0; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--theme-text); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; }
@media (max-width: 640px) { .fj-ncenter { padding: 0; align-items: stretch; } .fj-nc-box { max-height: none; height: 100%; border-radius: 0; } .fj-nc-btn { padding: 7px 9px; } }

/* Help & Support: call the helpline first */
.fj-support-call { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 14px 16px; border-radius: 16px; background: linear-gradient(135deg, #16a34a, #22c55e); color: #fff !important; text-decoration: none; box-shadow: 0 12px 26px -12px rgba(22, 163, 74, .7); }
.fj-support-call-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .2); flex: none; animation: fjRing 2.6s ease-in-out infinite; }
.fj-support-call-ico svg { width: 21px; height: 21px; }
.fj-support-call > span:nth-child(2) { flex: 1; min-width: 0; display: grid; }
.fj-support-call b { font-size: 1rem; }
.fj-support-call small { opacity: .9; font-size: .8rem; }
.fj-support-call em { padding: 8px 16px; border-radius: 999px; background: #fff; color: #15803d; font-style: normal; font-weight: 800; font-size: .85rem; }
.fj-support-callmini { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .2); color: #fff; flex: none; }
.fj-support-callmini svg { width: 18px; height: 18px; }
@keyframes fjRing { 0%, 80%, 100% { transform: rotate(0); } 84% { transform: rotate(-14deg); } 88% { transform: rotate(12deg); } 92% { transform: rotate(-8deg); } }
@media (prefers-reduced-motion: reduce) { .fj-support-call-ico { animation: none; } }
/* Wishlist card at the top of the profile */
.quick-links a.ql-wish { position: relative; background: linear-gradient(135deg, rgba(236, 72, 153, .12), rgba(244, 63, 94, .08)) !important; }
.quick-links a.ql-wish svg { color: #e11d48 !important; fill: rgba(225, 29, 72, .15); }
.ql-count { position: absolute; top: 10px; right: 10px; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: #e11d48; color: #fff; font-size: .72rem; font-weight: 800; text-align: center; }
.ql-count[hidden] { display: none; }
.pf-anchor { position: relative; top: -90px; display: block; }

/* ── Add-on photos ── */
.fj-addon { align-items: center; }
.fj-addon-img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; flex: none; background: var(--surface-2); box-shadow: 0 0 0 1px var(--line); }
.fj-addon .fj-addon-name { flex: 1; min-width: 0; }
.fj-ms-chips button img { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; }

/* ── Deal card: what it covers, what it adds, what you save ── */
.fj-deals-head, .pd-pairs-head { display: flex; align-items: center; gap: 6px; margin: 14px 0 8px; font-size: .78rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--theme-muted); }
.fj-deals-head svg, .pd-pairs-head svg { width: 15px; height: 15px; color: #f97316; }
.fj-deal { display: grid; gap: 10px; padding: 14px; margin-bottom: 10px; border-radius: 18px; border: 1.5px solid rgba(249, 115, 22, .45); background: linear-gradient(135deg, rgba(249, 115, 22, .07), rgba(236, 72, 153, .05)); }
.fj-deal-top { display: grid; gap: 3px; }
.fj-deal-tag { justify-self: start; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: #f97316; color: #fff; font-size: .7rem; font-weight: 800; }
.fj-deal-tag svg { width: 13px; height: 13px; }
.fj-deal-top b { font-size: .98rem; }
.fj-deal-top small { color: var(--theme-muted); font-size: .8rem; line-height: 1.4; }
.fj-deal-items { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.fj-deal-items::-webkit-scrollbar { display: none; }
.fj-deal-item { flex: 0 0 84px; display: grid; justify-items: center; gap: 3px; text-align: center; }
.fj-deal-img { position: relative; width: 64px; height: 64px; border-radius: 14px; overflow: visible; display: grid; place-items: center; background: var(--surface-2); }
.fj-deal-img img { width: 100%; height: 100%; border-radius: 14px; object-fit: cover; }
.fj-deal-img > svg { width: 24px; height: 24px; color: var(--theme-muted); }
.fj-deal-img i { position: absolute; right: -5px; bottom: -5px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--theme-card-bg); color: #fff; }
.fj-deal-img i svg { width: 12px; height: 12px; }
.fj-deal-item.have .fj-deal-img i { background: #16a34a; }
.fj-deal-item.add .fj-deal-img i { background: #f97316; }
.fj-deal-item small { font-size: .72rem; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fj-deal-item em { font-style: normal; font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.fj-deal-item.have em { color: #16a34a; }
.fj-deal-item.add em { color: #f97316; }
.fj-deal-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.fj-deal-foot > div { display: grid; }
.fj-deal-foot s { color: var(--theme-muted); font-size: .8rem; }
.fj-deal-foot b { font-size: 1.15rem; color: var(--theme-primary); }
.fj-deal-foot small { color: var(--theme-muted); font-size: .72rem; }
.fj-deal-foot .btn { width: auto !important; display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; }
.fj-deal-foot .btn svg { width: 16px; height: 16px; }

/* ── Dish page: deals + "goes well with" ── */
#pdPairs:empty { display: none; }
#pdPairs { margin-top: 16px; }
.pd-sides { display: grid; gap: 8px; }
.pd-side { display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 8px; border-radius: 14px; border: 1px solid var(--line); background: var(--theme-card-bg); }
.pd-side img { width: 54px; height: 54px; border-radius: 12px; object-fit: cover; flex: none; }
.pd-side span { flex: 1; min-width: 0; display: grid; }
.pd-side small { color: var(--theme-primary); font-weight: 700; }
.pd-side-add { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: none; background: var(--theme-primary); color: #fff; cursor: pointer; flex: none; }
.pd-side-add svg { width: 17px; height: 17px; }
.pd-side-add:disabled { background: #16a34a; }
.fj-deal-img img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none; } .fj-deal-img i { z-index: 1; } .fj-deal-item { align-content: start; }

/* Cart: finding deals + coupon cards */
.fj-cart-finding { display: flex; align-items: center; gap: 8px; padding: 14px; border-radius: 14px; background: var(--surface-2); color: var(--theme-muted); font-size: .84rem; font-weight: 600; }
.fj-cart-finding svg { width: 16px; height: 16px; color: #f97316; animation: fjSpin 2s linear infinite; }
.fj-cart-coupons { display: grid; gap: 8px; }
.fj-cart-coupon { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; border: 1.5px dashed #16a34a; background: rgba(22, 163, 74, .05); }
.fj-cart-coupon.locked { border-color: var(--line); background: var(--surface-2); opacity: .85; }
.fj-cc-l { flex: none; display: grid; place-items: center; min-width: 64px; padding: 8px 6px; border-radius: 10px; background: #16a34a; color: #fff; font-size: .72rem; font-weight: 800; text-align: center; line-height: 1.2; }
.fj-cart-coupon.locked .fj-cc-l { background: #94a3b8; }
.fj-cart-coupon > div { flex: 1; min-width: 0; display: grid; }
.fj-cart-coupon b { font-size: .88rem; letter-spacing: .04em; }
.fj-cart-coupon small { color: var(--theme-muted); font-size: .74rem; }
.fj-cc-btn { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 7px 12px; border-radius: 999px; border: none; background: var(--theme-primary); color: #fff; font: inherit; font-size: .78rem; font-weight: 800; cursor: pointer; }
.fj-cc-btn svg { width: 13px; height: 13px; }
.fj-cc-btn:disabled { background: var(--line); color: var(--theme-muted); cursor: not-allowed; }

/* Location picker: other city + custom place */
.fj-loc-city.other { border-style: dashed !important; color: var(--theme-primary) !important; display: inline-flex; align-items: center; gap: 4px; }
.fj-loc-city.other svg { width: 14px; height: 14px; }
.fj-loc-city.other.on { color: #fff !important; border-style: solid !important; }
.fj-loc-city.other.on svg { stroke: #fff; color: #fff; }
.fj-loc-custom { display: grid; gap: 8px; padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface-2); }
.fj-loc-custom b { display: flex; align-items: center; gap: 6px; }
.fj-loc-custom b svg { width: 16px; height: 16px; color: var(--theme-primary); }
.fj-loc-custom small { color: var(--theme-muted); font-size: .8rem; line-height: 1.4; }
.fj-loc-custom input, .fj-loc-addplace input { width: 100%; padding: 11px 13px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--theme-card-bg); color: var(--theme-text); font: inherit; outline: none; }
.fj-loc-custom input:focus, .fj-loc-addplace input:focus { border-color: var(--theme-primary); }
.fj-loc-custom .btn { width: 100%; justify-content: center; display: inline-flex; align-items: center; gap: 6px; }
.fj-loc-addplace { margin: 0 0 10px; background: var(--theme-card-bg); border-radius: 14px; border: 1px dashed var(--line); padding: 10px 12px; }
.fj-loc-addplace summary { display: flex; min-height: 28px; user-select: none; align-items: center; gap: 6px; cursor: pointer; color: var(--theme-primary); font-weight: 700; font-size: .85rem; list-style: none; }
.fj-loc-addplace summary::-webkit-details-marker { display: none; }
.fj-loc-addplace summary svg { width: 15px; height: 15px; }
.fj-loc-addplace form { display: grid; gap: 8px; margin-top: 10px; }
.fj-loc-addplace form > div { display: flex; gap: 8px; }
.fj-loc-addplace .btn { flex: 1; width: auto !important; justify-content: center; display: inline-flex; align-items: center; gap: 6px; }
.fj-loc-addplace .btn svg, .fj-loc-custom .btn svg { width: 15px; height: 15px; }
.fj-place-h { font-weight: inherit; color: inherit; } .fj-eyebrow b[data-place] { font-weight: 800; }
/* first-visit "finding your location" note */
.fj-locating { position: fixed; left: 50%; top: 84px; z-index: 3500; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; border-radius: 999px; background: var(--theme-card-bg); border: 1px solid var(--line); box-shadow: 0 12px 30px -10px rgba(2, 6, 23, .3); font-size: .86rem; font-weight: 700; white-space: nowrap; animation: fjFade .3s ease both; }
.fj-locating svg { width: 18px; height: 18px; color: var(--theme-primary); animation: fjSpin 1.6s linear infinite; }
.fj-locating button { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--theme-text); font: inherit; font-size: .78rem; cursor: pointer; }

/* ── Tags on photos never run off the card: one line, ends in "…" (every screen) ── */
.pc-badge-popular, .pc-badge-prep, .fj-free-badge, .fj-rest-wide-tag, .fj-rest-closed, .pc-img-wrap > [class*="badge"], .fj-dish-mini [class*="badge"], .fj-ad {
  max-width: calc(100% - 20px); min-width: 0; box-sizing: border-box; overflow: hidden;
}
.pc-badge-popular { display: flex !important; align-items: center; gap: 5px; }
.pc-badge-popular > svg, .pc-badge-prep > svg, .fj-free-badge > svg { flex: none; }
.pc-badge-popular > span, .pc-reason > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-reason { display: flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%; }
.pc-reason > svg { flex: none; }
/* time + free-delivery tags share the bottom of the photo without overlapping */
.pc-img-wrap .pc-badge-prep { max-width: calc(50% - 14px); white-space: nowrap; text-overflow: ellipsis; }
.pc-img-wrap .fj-free-badge.pc { max-width: calc(50% - 14px); white-space: nowrap; text-overflow: ellipsis; }
@media (max-width: 480px) { .pc-badge-popular { font-size: .62rem !important; padding: 4px 8px !important; } }
/* Phones (list-style cards, narrow photo): the reason is already written beside the photo, so the photo
   tag would only repeat it — hide it, and let the prep time use the photo's full width */
@media (max-width: 640px) {
  .grid-4 .product-card .pc-reason ~ * { }
  .grid-4 .product-card .pc-img-wrap .pc-badge-popular { display: none !important; }
  .grid-4 .product-card .pc-img-wrap .pc-badge-prep { max-width: calc(100% - 12px); }
  .grid-4 .product-card .pc-img-wrap .fj-free-badge.pc { display: none; }
}
.fj-place { font: inherit; color: inherit; letter-spacing: inherit; }

.fj-loc-head { display: flex; align-items: center; gap: 6px; margin: 2px 0 8px; font-size: .78rem; font-weight: 600; color: var(--theme-muted); }
.fj-loc-head svg { width: 14px; height: 14px; color: var(--theme-primary); }
.fj-loc-modal .fj-loc-list { flex: 1 1 auto; }
.fj-link-btn { background: none; border: 0; padding: 0; color: var(--theme-primary); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }

.fj-flash-next { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 18px 0; padding: 14px 16px; border-radius: 16px; background: linear-gradient(135deg, #fdf2f8, #fff1f2); border: 1px solid #fbcfe8; color: #831843; }
.fj-flash-next > svg { width: 26px; height: 26px; color: #db2777; flex: none; }
.fj-flash-next div { flex: 1; min-width: 180px; display: grid; gap: 2px; }
.fj-flash-next small { color: #9d174d; opacity: .85; }
[data-theme="dark"] .fj-flash-next { background: #3b0a24; border-color: #831843; color: #fbcfe8; }

/* pop-up: photo fills the top; without a photo a short branded strip (no big empty green block) */
.fj-popup-box .fj-popup-img { flex: none; position: relative; overflow: hidden; }
.fj-popup-img > svg { display: none; }
.fj-popup-img.plain { aspect-ratio: auto; height: 96px; background: radial-gradient(circle at 85% 20%, rgba(255,255,255,.22) 0 40px, transparent 41px), radial-gradient(circle at 10% 110%, rgba(255,255,255,.15) 0 60px, transparent 61px), linear-gradient(135deg, #15803d, #22c55e); }
.fj-popup-img.plain > svg { display: block; width: 44px; height: 44px; color: #fff; }

.fj-empty-acts { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.fj-empty-acts .btn { display: inline-flex; align-items: center; gap: 6px; width: auto; }
.fj-empty-acts .btn svg { width: 15px; height: 15px; }

/* phones: live chat is a round icon so it never hides page text (label returns when the card is open) */
@media (max-width: 600px) {
  .fj-fab-wa { padding: 5px; gap: 0; }
  .fj-fab-wa-text { display: none; }
  .fj-fabs.wa-open .fj-fab-wa { padding: 5px 14px 5px 5px; gap: 8px; }
  .fj-fabs.wa-open .fj-fab-wa-text { display: block; }
}

/* Badges never overlap: small cards show the "Ad" badge alone; any other badge row shrinks with "…" instead of spilling */
.fj-dish-mini .fj-tags.inline .fj-ad ~ *, .fj-rail .fj-tags.inline .fj-ad ~ * { display: none !important; }
.fj-tags.inline { flex-wrap: nowrap; overflow: hidden; min-width: 0; }
.fj-tags.inline > * { flex: 0 1 auto; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fj-tags.inline > .fj-ad { flex: none; }
@media (max-width: 600px) { .product-card .fj-tags.inline .fj-ad ~ * { display: none !important; } }
/* rails of dish cards (For You rows etc.): "Free" goes to the top corner so it never sits on the time badge */
.fy-row .product-card .pc-img-wrap .fj-free-badge.pc, .fj-rail .product-card .pc-img-wrap .fj-free-badge.pc { top: 8px; bottom: auto; right: 8px; padding: 3px 7px; font-size: 0; max-width: none; }
.fy-row .product-card .pc-img-wrap .fj-free-badge.pc::after, .fj-rail .product-card .pc-img-wrap .fj-free-badge.pc::after { content: 'Free'; font-size: .62rem; }
/* password strength meter */
.fj-pw-meter { display: grid; gap: 4px; margin: 6px 0 2px; font-size: .74rem; }
.fj-pw-bar { height: 5px; border-radius: 99px; background: var(--surface-2, #e2e8f0); overflow: hidden; }
.fj-pw-bar i { display: block; height: 100%; width: 0; border-radius: 99px; transition: width .25s, background .25s; }
.fj-pw-meter small { font-weight: 700; min-height: 1em; }
.fj-pw-meter ul { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 0; list-style: none; color: var(--theme-muted); }
.fj-pw-meter li.ok { color: #16a34a; font-weight: 600; }
.fj-verify-box { max-width: 440px; text-align: center; align-items: center; }
.fj-verify-ico { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: color-mix(in srgb, var(--theme-primary) 14%, transparent); color: var(--theme-primary); }
.fj-verify-ico svg { width: 32px; height: 32px; }
.fj-verify-box h3 { margin: 4px 0 0; }
.fj-verify-box p { margin: 0; color: var(--theme-muted); line-height: 1.55; }
.fj-verify-acts { display: grid; gap: 8px; width: 100%; margin-top: 6px; }
.fj-verify-acts .btn { justify-content: center; display: inline-flex; align-items: center; gap: 6px; }
.fj-verify-msg { font-weight: 600; color: var(--theme-primary) !important; min-height: 1.2em; }
.fj-cat-badge[hidden] { display: none !important; }
/* ad cards / banners: the "Ad" tag sits in line before the shop name — never on top of it */
.fj-adc-text small { display: flex !important; align-items: center; gap: 6px; flex-wrap: wrap; line-height: 1.3; }
.fj-adc-text small .fj-ad { margin: 0 !important; position: static !important; flex: none; }
@media (max-width: 600px) { .fj-adc-text small .fj-ad { font-size: 0; gap: 0; padding: 2px; } .fj-adc-text small .fj-ad b { font-size: .6rem; } }
/* first-visit location prompt */
.fj-wl-box { max-width: 420px; text-align: center; align-items: center; gap: 12px; }
.fj-wl-ico { width: 68px; height: 68px; border-radius: 22px; display: grid; place-items: center; background: color-mix(in srgb, var(--theme-primary) 14%, transparent); color: var(--theme-primary); }
.fj-wl-ico svg { width: 34px; height: 34px; }
.fj-wl-box h3 { margin: 0; font-size: 1.3rem; }
.fj-wl-box > p { margin: 0; color: var(--theme-muted); line-height: 1.55; }
.fj-wl-step { display: grid; gap: 10px; width: 100%; justify-items: center; }
.fj-wl-step[hidden] { display: none; }
.fj-wl-btn { width: 100% !important; justify-content: center; display: inline-flex; align-items: center; gap: 8px; padding: 13px 16px; }
.fj-wl-btn svg { width: 18px; height: 18px; }
.fj-wl-step small { color: var(--theme-muted); }
.fj-wl-spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--theme-primary) 20%, transparent); border-top-color: var(--theme-primary); animation: fjWlSpin .8s linear infinite; }
@keyframes fjWlSpin { to { transform: rotate(360deg); } }
.fj-wl-found { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; border-radius: 16px; background: color-mix(in srgb, var(--theme-primary) 8%, transparent); border: 1px solid color-mix(in srgb, var(--theme-primary) 30%, transparent); text-align: left; }
.fj-wl-found > svg { width: 26px; height: 26px; color: var(--theme-primary); flex: none; }
.fj-wl-found div { display: grid; gap: 2px; min-width: 0; }
.fj-wl-found small, .fj-wl-found span { color: var(--theme-muted); font-size: .8rem; }
.fj-wl-found b { font-size: 1.05rem; }
.fj-wl-msg { margin: 0; color: #b45309 !important; font-size: .85rem; font-weight: 600; min-height: 0; }
.fj-wl-msg:empty { display: none; }

/* guest bell: offer list */
.fj-bell-panel .fj-note { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; color: inherit; text-decoration: none; }
.fj-bell-panel .fj-note:hover { background: var(--surface-2); }
.fj-bell-panel .fj-note.unread { background: color-mix(in srgb, var(--theme-primary) 7%, transparent); }
.fj-note-img { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; flex: none; }
.fj-note-ico { width: 46px; height: 46px; border-radius: 10px; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--theme-primary) 12%, transparent); color: var(--theme-primary); }
.fj-note-body { display: grid; gap: 2px; min-width: 0; }
.fj-note-body b { font-size: .86rem; line-height: 1.3; }
.fj-note-body small { color: var(--theme-muted); font-size: .76rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fj-bell-foot { padding: 10px 12px; border-top: 1px solid var(--line); }
.fj-bell-foot .btn { width: 100% !important; justify-content: center; display: inline-flex; gap: 6px; align-items: center; }

/* maps inside the location pop-ups */
.fj-wl-map { width: 100%; height: 190px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
.fj-loc-pickmap { width: 100%; height: 200px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); margin-top: 4px; }
.fj-wl-hint { display: flex; align-items: center; gap: 5px; color: var(--theme-muted); font-size: .74rem; }
.fj-wl-hint svg { width: 13px; height: 13px; }
.fj-loc-areamap { margin: 0 0 10px; border-radius: 14px; border: 1px solid var(--line); padding: 10px 12px; background: var(--theme-card-bg); }
.fj-loc-areamap summary { display: flex; align-items: center; gap: 6px; cursor: pointer; color: var(--theme-primary); font-weight: 700; font-size: .85rem; list-style: none; }
.fj-loc-areamap summary::-webkit-details-marker { display: none; }
.fj-loc-areamap summary svg { width: 15px; height: 15px; }
.fj-loc-areamap .fj-loc-pickmap { margin-top: 10px; }

/* ═════ Blog ═════ */
.fj-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 18px 0 10px; font-size: .8rem; color: var(--theme-muted); }
.fj-crumbs a { color: var(--theme-muted); text-decoration: none; } .fj-crumbs a:hover { color: var(--theme-primary); }
.fj-crumbs svg { width: 13px; height: 13px; } .fj-crumbs span { color: var(--theme-text); font-weight: 600; }
.fj-blog-hero { text-align: left; }
.fj-blog-hero p { max-width: 640px; }
.fj-blog-search { display: flex; align-items: center; gap: 8px; max-width: 520px; margin-top: 14px; padding: 4px 14px; border-radius: 14px; background: var(--theme-card-bg); border: 1px solid var(--line); }
.fj-blog-search svg { width: 17px; height: 17px; color: var(--theme-muted); flex: none; }
.fj-blog-search input { flex: 1; min-width: 0; border: 0; background: none; padding: 11px 0; font: inherit; color: var(--theme-text); outline: none; }
.fj-blog-cats { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 10px; margin: 6px 0 14px; scrollbar-width: thin; }
.fj-blog-cats a { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--theme-card-bg); color: var(--theme-text); font-size: .84rem; font-weight: 600; text-decoration: none; }
.fj-blog-cats a small { padding: 1px 7px; border-radius: 99px; background: var(--surface-2); font-size: .7rem; }
.fj-blog-cats a.on { background: var(--theme-primary); border-color: var(--theme-primary); color: #fff; }
.fj-blog-cats a.on small { background: rgba(255, 255, 255, .25); color: #fff; }
.fj-blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.fj-blog-card { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: var(--theme-card-bg); border: 1px solid var(--line); box-shadow: 0 8px 24px -16px rgba(15, 23, 42, .35); transition: transform .2s, box-shadow .2s; }
.fj-blog-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -18px rgba(15, 23, 42, .45); }
.fj-blog-card-img { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--surface-2); overflow: hidden; }
.fj-blog-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.fj-blog-card:hover .fj-blog-card-img img { transform: scale(1.04); }
.fj-blog-cat { position: absolute; left: 12px; top: 12px; padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, .95); color: #15803d; font-size: .72rem; font-weight: 800; text-decoration: none; }
.fj-blog-cat.static { position: static; display: inline-block; justify-self: start; background: color-mix(in srgb, var(--theme-primary) 12%, transparent); color: var(--theme-primary); }
.fj-blog-card-body { display: grid; gap: 8px; padding: 16px 18px 18px; flex: 1; align-content: start; }
.fj-blog-card-body h3 { margin: 0; font-size: 1.05rem; line-height: 1.35; }
.fj-blog-card-body h3 a { color: var(--theme-text); text-decoration: none; }
.fj-blog-card-body h3 a:hover { color: var(--theme-primary); }
.fj-blog-card-body p { margin: 0; color: var(--theme-muted); font-size: .88rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fj-blog-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--theme-muted); font-size: .76rem; }
.fj-blog-meta span { display: inline-flex; align-items: center; gap: 5px; }
.fj-blog-meta svg { width: 14px; height: 14px; }
.fj-blog-more { display: inline-flex; align-items: center; gap: 5px; color: var(--theme-primary); font-weight: 700; font-size: .85rem; text-decoration: none; margin-top: auto; }
.fj-blog-more svg { width: 15px; height: 15px; }
.fj-blog-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 30px 0; padding: 22px 24px; border-radius: 22px; background: linear-gradient(135deg, #14532d, #16a34a); color: #fff; }
.fj-blog-cta h2 { margin: 0 0 4px; color: #fff; font-size: 1.25rem; }
.fj-blog-cta p { margin: 0; opacity: .9; }
.fj-blog-cta .btn { display: inline-flex; align-items: center; gap: 6px; background: #fff !important; color: #15803d !important; }
.fj-blog-cta.side { display: grid; gap: 10px; margin: 0; }
.fj-blog-cta.side .btn { justify-content: center; }
.fj-blog-cta.side .fj-btn-ghost { background: rgba(255, 255, 255, .14) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, .35); }
.fj-post-head { display: grid; gap: 10px; max-width: 820px; margin: 6px 0 18px; }
.fj-post-head h1 { margin: 0; font-size: clamp(1.6rem, 4vw, 2.5rem); line-height: 1.2; }
.fj-post-lead { margin: 0; font-size: 1.05rem; color: var(--theme-muted); line-height: 1.6; }
.fj-post-cover { margin: 0 0 22px; border-radius: 22px; overflow: hidden; aspect-ratio: 1200 / 520; background: var(--surface-2); }
.fj-post-cover img { width: 100%; height: 100%; object-fit: cover; }
.fj-post-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; }
.fj-post-side { position: sticky; top: 90px; }
.fj-post-toc { padding: 16px 18px; border-radius: 16px; background: var(--surface-2); margin-bottom: 20px; }
.fj-post-toc ol { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 5px; }
.fj-post-toc a { color: var(--theme-text); text-decoration: none; font-size: .9rem; }
.fj-post-toc a:hover { color: var(--theme-primary); }
.fj-post-content { font-size: 1.02rem; line-height: 1.8; color: var(--theme-text); }
.fj-post-content h2 { margin: 30px 0 10px; font-size: 1.45rem; line-height: 1.3; scroll-margin-top: 90px; }
.fj-post-content h3 { margin: 22px 0 8px; font-size: 1.15rem; }
.fj-post-content p { margin: 0 0 16px; }
.fj-post-content ul, .fj-post-content ol { margin: 0 0 18px; padding-left: 22px; display: grid; gap: 6px; }
.fj-post-content a { color: var(--theme-primary); font-weight: 600; }
.fj-post-content img { max-width: 100%; height: auto; border-radius: 14px; }
.fj-post-content blockquote { margin: 0 0 18px; padding: 12px 18px; border-left: 4px solid var(--theme-primary); background: var(--surface-2); border-radius: 0 12px 12px 0; }
.fj-post-content table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: .92rem; }
.fj-post-content th, .fj-post-content td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; }
.fj-post-tags, .fj-post-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; font-size: .84rem; }
.fj-post-tags a, .fj-post-share a, .fj-post-share button { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--theme-card-bg); color: var(--theme-text); text-decoration: none; font: inherit; font-size: .8rem; cursor: pointer; }
.fj-post-share svg { width: 14px; height: 14px; }
.fj-post-related { margin: 40px 0 10px; }
.fj-post-related h2 { margin: 0 0 14px; }
@media (max-width: 900px) { .fj-post-layout { grid-template-columns: 1fr; } .fj-post-side { position: static; } .fj-post-cover { aspect-ratio: 16 / 9; border-radius: 16px; } }
.fj-home-blog .fj-blog-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
@media (max-width: 600px) {
  .fj-home-blog .fj-blog-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 6px; }
  .fj-home-blog .fj-blog-card { flex: 0 0 82%; scroll-snap-align: start; }
}

/* ═════ Cookie consent (bottom-left) ═════ */
.fj-cookie { position: fixed; left: 20px; bottom: 20px; z-index: 4200; width: min(400px, calc(100vw - 32px)); display: grid; gap: 12px; padding: 18px; border-radius: 20px; background: var(--theme-card-bg); color: var(--theme-text); border: 1px solid var(--line); box-shadow: 0 24px 60px -18px rgba(15, 23, 42, .45); opacity: 0; transform: translateY(16px); transition: opacity .3s, transform .3s; }
.fj-cookie.show { opacity: 1; transform: none; }
.fj-cookie-top { display: flex; gap: 12px; align-items: flex-start; }
.fj-cookie-ico { width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid; place-items: center; background: #fef3c7; color: #b45309; }
.fj-cookie-ico svg { width: 24px; height: 24px; }
.fj-cookie-top b { display: block; font-size: 1rem; margin-bottom: 3px; }
.fj-cookie-top p { margin: 0; color: var(--theme-muted); font-size: .82rem; line-height: 1.5; }
.fj-cookie-top a { color: var(--theme-primary); font-weight: 600; }
.fj-cookie-opts { display: grid; gap: 8px; max-height: 44vh; overflow-y: auto; }
.fj-cookie-opts[hidden] { display: none; }
.fj-cookie-opt { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); cursor: pointer; }
.fj-cookie-opt span { display: grid; gap: 2px; }
.fj-cookie-opt b { font-size: .84rem; }
.fj-cookie-opt small { color: var(--theme-muted); font-size: .74rem; line-height: 1.4; }
.fj-cookie-opt input { position: absolute; opacity: 0; pointer-events: none; }
.fj-cookie-sw { flex: none; width: 40px; height: 22px; border-radius: 99px; background: #cbd5e1; position: relative; transition: background .2s; }
.fj-cookie-sw::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.fj-cookie-opt input:checked + .fj-cookie-sw { background: var(--theme-primary); }
.fj-cookie-opt input:checked + .fj-cookie-sw::after { transform: translateX(18px); }
.fj-cookie-opt input:disabled + .fj-cookie-sw { opacity: .6; }
.fj-cookie-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fj-cookie-acts .btn { width: auto !important; display: inline-flex; align-items: center; gap: 6px; }
.fj-cookie-acts .btn svg, .fj-cookie-link svg { width: 15px; height: 15px; }
.fj-cookie-link { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; color: var(--theme-primary); font: inherit; font-size: .84rem; font-weight: 700; cursor: pointer; padding: 6px 4px; }
.fj-cookie-link[hidden], .fj-cookie-acts [hidden] { display: none; }
/* phones: full width above the bottom menu */
@media (max-width: 600px) {
  .fj-cookie { left: 10px; right: 10px; width: auto; bottom: 86px; padding: 14px; border-radius: 18px; }
  .fj-cookie-acts .btn { flex: 1; justify-content: center; }
}
.fj-foot-cookie { border: 0; background: none; color: inherit; font: inherit; cursor: pointer; padding: 0; opacity: inherit; }
body:has(#fjCookies.show) .fj-fabs { opacity: 0; pointer-events: none; }

/* ── Card photos: one fixed size everywhere, the picture crops to fit (a tall photo never stretches a card) ── */
.fj-combo-card-img, .fj-adcard-img { position: relative; flex: none; height: 170px; aspect-ratio: auto; overflow: hidden; }
.fj-combo-card-img img, .fj-adcard-img img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; object-position: center; }
.fj-combo-card-img .fj-tag, .fj-adcard-img .fj-ad { z-index: 1; }
.fj-combos { align-items: stretch; }
.fj-combo-card { min-width: 0; }
.fj-combo-card-body > b { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.fj-combo-card-body > small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fj-combo-card-foot { margin-top: auto; }
.fj-combo-card-foot > span { display: flex; flex-direction: column; line-height: 1.15; white-space: nowrap; }
.fj-combo-card-foot > span s { font-size: .78rem; }
.fj-combo-card-foot .btn { flex: none; width: auto !important; }
.fj-dish-mini-img { flex: none; }
.fj-dish-mini-img img, .fj-rest-banner img, .shop-banner img { object-fit: cover; object-position: center; }
.shop-banner { overflow: hidden; }
@media (max-width: 600px) { .fj-combo-card-img, .fj-adcard-img { height: 150px; } }
/* "What should I eat?": never wider than the phone; the results row scrolls sideways inside the box */
.fj-ask-box { width: min(560px, 100%); min-width: 0; }
.fj-ask-box > *, #fjAskOut { min-width: 0; max-width: 100%; }
.fj-ask-rail { overflow-x: auto; max-width: 100%; }
#fjAskOut { scroll-margin-top: 12px; }