/**
 * File: assets/foodly.css
 *
 * Self-contained styles for the Foodly ordering frontend.
 * Everything is namespaced under .foodly-app so it won't fight the host theme.
 * All values are scoped custom properties, so a reseller can re-theme by
 * overriding a handful of --foodly-* variables.
 */

.foodly-app {
    /* Palette: warm saffron accent on a clean neutral base.
       Deliberately not the terracotta/cream default — reads as "food" via
       the amber accent while staying legible on any theme. */
    --foodly-accent: #D62828;       /* saffron */
    --foodly-accent-ink: #FFFFFF;   /* text on accent */
    --foodly-ink: #0F3D2A;          /* primary text */
    --foodly-muted: #5B6F63;        /* secondary text */
    --foodly-line: #D9E6DD;         /* hairline borders */
    --foodly-surface: #FFFFFF;
    --foodly-surface-2: #F1F7F3;    /* cards / subtle fills */
    --foodly-radius: 14px;
    --foodly-shadow: 0 8px 30px rgba(30, 25, 15, 0.16);

    max-width: 1100px;
    margin: 0 auto;
    color: var(--foodly-ink) !important;
    font-family: inherit;
    box-sizing: border-box;
}
.foodly-app *,
.foodly-app *::before,
.foodly-app *::after { box-sizing: border-box; }

/* Theme-proofing: builders like Bricks set global light text colors that bleed
   into our panels and wash out the text. Force our own colors so the UI stays
   readable on ANY theme. These are scoped tightly so they don't leak out. */
.foodly-app,
.foodly-panel,
.foodly-cart,
.foodly-card-name,
.foodly-card-desc,
.foodly-panel-head h3,
.foodly-cart-head h3,
.foodly-group-name,
.foodly-choice,
.foodly-choice-name,
.foodly-field-label,
.foodly-cart-line-name,
.foodly-cart-line-price,
.foodly-cart-total,
.foodly-cart-total span,
.foodly-qty span,
.foodly-success h3,
.foodly-success p {
    color: var(--foodly-ink) !important;
}
.foodly-success strong {
    color: var(--foodly-accent-ink) !important;
    font-size: 1.1em;
}
.foodly-card-desc,
.foodly-choice-price,
.foodly-cart-line-opts { color: var(--foodly-muted) !important; }
.foodly-card-price { color: var(--foodly-ink) !important; }

/* Buttons keep their own on-accent color even against the theme. */
.foodly-add-btn,
.foodly-checkout-btn { color: var(--foodly-accent-ink) !important; }
.foodly-branch-btn.is-active { color: #fff !important; }

/* ── Toolbar (branch + category filters) ── */
.foodly-toolbar { margin-bottom: 20px; }
.foodly-branches,
.foodly-categories {
    display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px;
}
.foodly-branch-btn,
.foodly-cat-btn {
    border: 1px solid var(--foodly-line);
    background: var(--foodly-surface);
    color: var(--foodly-muted) !important;
    padding: 8px 16px; border-radius: 999px;
    font-size: 14px; cursor: pointer;
    transition: all .15s ease;
}
.foodly-branch-btn:hover,
.foodly-cat-btn:hover { border-color: var(--foodly-accent); color: var(--foodly-ink) !important; }
.foodly-branch-btn.is-active {
    background: var(--foodly-ink); color: #fff !important; border-color: var(--foodly-ink);
}
.foodly-cat-btn.is-active {
    background: var(--foodly-accent); color: var(--foodly-accent-ink) !important;
    border-color: var(--foodly-accent); font-weight: 500;
}

.foodly-branch-closed {
    margin-left: 7px; font-size: 10px; text-transform: uppercase;
    letter-spacing: .04em; color: #B3261E; background: #FCEBEB;
    padding: 1px 6px; border-radius: 999px; font-weight: 600;
}
.foodly-closed-banner {
    grid-column: 1 / -1;
    background: #FCEBEB; color: #8a1f1a;
    border: 1px solid #F3C9C6; border-radius: 12px;
    padding: 12px 16px; font-size: 14px; margin-bottom: 4px;
}

/* ── Closed-hours modal ── */
.foodly-closed-overlay {
    position: fixed; inset: 0; z-index: 99998;
    background: rgba(25, 20, 12, 0.6);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.foodly-closed-modal {
    background: var(--foodly-surface);
    border-radius: var(--foodly-radius);
    max-width: 380px; width: 100%;
    padding: 32px 28px; text-align: center;
    box-shadow: var(--foodly-shadow);
    animation: foodly-slide .2s ease;
}
.foodly-closed-icon { font-size: 40px; margin-bottom: 10px; }
.foodly-closed-modal h3 {
    margin: 0 0 10px; font-size: 20px; font-weight: 700;
    color: var(--foodly-ink) !important;
}
.foodly-closed-modal p {
    margin: 0 0 20px; font-size: 14px; line-height: 1.5;
    color: var(--foodly-muted) !important;
}
.foodly-closed-modal .foodly-checkout-btn { margin: 0; }

/* ── Menu grid ── */
.foodly-menu-grid {
    display: grid;
    /* Fixed max card width (not 1fr) so 1-3 cards stay normal-sized instead
       of stretching to fill the row. 4+ cards simply wrap to new rows. */
    grid-template-columns: repeat(auto-fill, minmax(240px, 280px));
    justify-content: start;
    gap: 18px;
}
.foodly-loading,
.foodly-empty { color: var(--foodly-muted) !important; padding: 40px 0; text-align: center; grid-column: 1 / -1; }

.foodly-card {
    background: var(--foodly-surface);
    border: 1px solid var(--foodly-line);
    border-radius: var(--foodly-radius);
    overflow: hidden; cursor: pointer;
    display: flex; flex-direction: column;
    transition: transform .15s ease, box-shadow .15s ease;
}
.foodly-card:hover { transform: translateY(-3px); box-shadow: var(--foodly-shadow); }
.foodly-card-img {
    /* cover fills the whole thumbnail. background-position left unset
       (not "center") — with plain product-only photos, unset gives a more
       natural crop than forcing center. */
    aspect-ratio: 1 / 1;
    height: auto;
    background-position: center; background-size: cover; background-repeat: no-repeat;
    background-color: var(--foodly-surface-2);
}
.foodly-card-img--none {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--foodly-surface-2) 25%, transparent 25%) -10px 0,
                linear-gradient(225deg, var(--foodly-surface-2) 25%, transparent 25%) -10px 0,
                linear-gradient(315deg, var(--foodly-surface-2) 25%, transparent 25%),
                linear-gradient(45deg, var(--foodly-surface-2) 25%, transparent 25%);
    background-size: 20px 20px;
    background-color: var(--foodly-surface);
}
/* No icon here anymore — items without their own photo now use a real
   dynamic fallback photo (see foodly_get_fallback_image_url() in
   rest-api.php). This plain pattern only ever shows on a brand-new site
   that has zero photos uploaded anywhere yet. */
.foodly-card-body { padding: 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.foodly-card-name { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; }
.foodly-card-desc {
    margin: 0; font-size: 13px; color: var(--foodly-muted) !important; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.foodly-card-foot {
    margin-top: auto; padding-top: 8px;
    display: flex; align-items: center; justify-content: space-between;
}
.foodly-card-price { font-weight: 700; font-size: 16px; color: var(--foodly-ink) !important; }
.foodly-card-add {
    font-size: 13px; font-weight: 600;
    color: #fff !important;
    background: var(--foodly-ink); padding: 6px 14px; border-radius: 999px;
}

/* ── Overlays (customizer + cart share this pattern) ── */
/* The [hidden] attribute must always win over display:flex below, or the
   overlays show on page load. This rule has to come first / be forced. */
.foodly-app [hidden] { display: none !important; }

.foodly-panel-overlay,
.foodly-cart-overlay {
    position: fixed; inset: 0; z-index: 99999;
    background: rgba(25, 20, 12, 0.5);
    display: flex; justify-content: flex-end;
}
.foodly-panel-overlay { justify-content: center; align-items: flex-end; }

.foodly-panel,
.foodly-cart {
    background: var(--foodly-surface);
    width: 100%; max-width: 460px;
    max-height: 100vh; overflow-y: auto;
    display: flex; flex-direction: column;
    animation: foodly-slide .2s ease;
}
.foodly-panel { border-radius: 18px 18px 0 0; max-height: 90vh; }
@keyframes foodly-slide { from { transform: translateY(20px); opacity: .6; } to { transform: none; opacity: 1; } }

.foodly-panel-head,
.foodly-cart-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px; border-bottom: 1px solid var(--foodly-line);
    position: sticky; top: 0; background: var(--foodly-surface); z-index: 1;
}
.foodly-panel-head h3,
.foodly-cart-head h3 { margin: 0; font-size: 19px; font-weight: 600; }
.foodly-panel-close {
    background: none; border: none; font-size: 26px; line-height: 1;
    cursor: pointer; color: var(--foodly-muted) !important; padding: 0 4px;
}
.foodly-panel-img { width: 100%; aspect-ratio: 1 / 1;
    height: auto;
    max-height: 340px; object-fit: cover;
    object-position: center; border-radius: 10px; }
.foodly-panel-desc { margin: 0; padding: 14px 20px 0; color: var(--foodly-muted) !important; font-size: 14px; }
.foodly-panel-body { padding: 12px 20px; }

/* ── Option groups ── */
.foodly-group { padding: 14px 0; border-bottom: 1px solid var(--foodly-line); }
.foodly-group:last-child { border-bottom: none; }
.foodly-group-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.foodly-group-name { font-weight: 600; font-size: 15px; }
.foodly-required {
    font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--foodly-accent-ink) !important; background: #FBEFCF;
    padding: 2px 8px; border-radius: 999px;
}
.foodly-choice {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 0; cursor: pointer; font-size: 15px;
}
.foodly-choice input { accent-color: var(--foodly-accent); width: 18px; height: 18px; }
.foodly-choice-name { flex: 1; }
.foodly-choice-price { color: var(--foodly-muted) !important; font-size: 14px; }

/* ── Panel footer (qty + add) ── */
.foodly-panel-foot {
    display: flex; gap: 12px; align-items: center;
    padding: 16px 20px; border-top: 1px solid var(--foodly-line);
    position: sticky; bottom: 0; background: var(--foodly-surface);
}
.foodly-qty {
    display: flex; align-items: center; gap: 4px;
    border: 1px solid var(--foodly-line); border-radius: 999px; padding: 4px;
}
.foodly-qty button {
    width: 30px; height: 30px; border: none; background: var(--foodly-surface-2);
    border-radius: 50%; cursor: pointer; font-size: 17px; line-height: 1;
    color: var(--foodly-ink) !important;
}
.foodly-qty span { min-width: 26px; text-align: center; font-weight: 600; color: var(--foodly-ink) !important; }
.foodly-qty--sm button { width: 24px; height: 24px; font-size: 14px; }

.foodly-add-btn {
    flex: 1; display: flex; align-items: center; justify-content: space-between;
    background: var(--foodly-accent); color: var(--foodly-accent-ink) !important;
    border: none; border-radius: 999px; padding: 13px 20px;
    font-size: 15px; font-weight: 600; cursor: pointer;
}
.foodly-add-btn:hover { filter: brightness(1.05); }

/* ── Cart FAB ── */
.foodly-cart-fab {
    position: fixed; right: 22px; bottom: 22px; z-index: 9998;
    width: 60px; height: 60px; border-radius: 50%;
    background: var(--foodly-ink); color: #fff !important; border: none;
    box-shadow: var(--foodly-shadow); cursor: pointer;
    font-size: 18px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    padding: 0; line-height: 1;
}
.foodly-cart-fab #foodly-cart-count { pointer-events: none; color: #fff !important; }

/* ── Cart drawer ── */
.foodly-cart-lines { padding: 8px 20px; }
.foodly-cart-line {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 14px 0; border-bottom: 1px solid var(--foodly-line);
}
.foodly-cart-line-name { display: block; font-weight: 600; font-size: 15px; }
.foodly-cart-line-opts { display: block; font-size: 12px; color: var(--foodly-muted) !important; margin-top: 2px; }
.foodly-cart-line-side { display: flex; align-items: center; gap: 10px; }
.foodly-cart-line-price { font-weight: 600; font-size: 14px; white-space: nowrap; }
.foodly-cart-line-del {
    background: none; border: none; color: var(--foodly-muted) !important;
    font-size: 20px; cursor: pointer; line-height: 1;
}
.foodly-cart-total {
    display: flex; justify-content: space-between;
    padding: 16px 20px; font-weight: 700; font-size: 17px;
    border-top: 1px solid var(--foodly-line);
}
.foodly-checkout-btn {
    margin: 0 20px 12px; padding: 14px;
    background: var(--foodly-accent); color: var(--foodly-accent-ink) !important;
    border: none; border-radius: 999px; font-size: 16px; font-weight: 600; cursor: pointer;
    display: block; width: calc(100% - 40px);
}
.foodly-checkout-btn:hover { filter: brightness(1.05); }
.foodly-back-btn {
    margin: 0 20px 18px; padding: 11px;
    background: none; color: var(--foodly-muted) !important;
    border: 1px solid var(--foodly-line); border-radius: 999px;
    font-size: 14px; cursor: pointer; display: block; width: calc(100% - 40px);
}

/* ── Checkout form ── */
.foodly-form { padding: 12px 20px; }
.foodly-field { margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.foodly-field-label { font-size: 13px; font-weight: 600; color: var(--foodly-muted) !important; }
.foodly-field input,
.foodly-field textarea {
    border: 1px solid var(--foodly-line); border-radius: 10px;
    padding: 11px 12px; font-size: 15px; font-family: inherit; width: 100%;
    background: var(--foodly-surface); color: var(--foodly-ink) !important;
}
.foodly-field input:focus,
.foodly-field textarea:focus { outline: 2px solid var(--foodly-accent); border-color: transparent; }

/* Override the browser's own autofill highlight (the light blue/yellow tint
   on phone, address, name fields) so it always matches our own field style,
   on any input anywhere in the plugin — not just checkout. */
.foodly-app input:-webkit-autofill,
.foodly-app input:-webkit-autofill:hover,
.foodly-app input:-webkit-autofill:focus,
.foodly-app textarea:-webkit-autofill {
    -webkit-text-fill-color: var(--foodly-ink);
    -webkit-box-shadow: 0 0 0 1000px var(--foodly-surface) inset;
    box-shadow: 0 0 0 1000px var(--foodly-surface) inset;
    transition: background-color 9999s ease-in-out 0s; /* delay browser's repaint */
}

.foodly-radio-row { display: flex; gap: 18px; }
.foodly-radio-row label { display: flex; align-items: center; gap: 6px; font-size: 15px; cursor: pointer; color: var(--foodly-ink) !important; }
.foodly-radio-row input[type="radio"] {
    accent-color: var(--foodly-accent);
    width: 18px;
    height: 18px;
    margin: 0;
    flex-shrink: 0;
    -webkit-appearance: none;
    appearance: none;
    border: 2px solid #ccc;
    border-radius: 50%;
    background-color: #fff;
    display: inline-block;
    position: relative;
}
.foodly-radio-row input[type="radio"]:checked {
    border-color: var(--foodly-accent);
}
.foodly-radio-row input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--foodly-accent);
}

.foodly-co-msg { margin: 0 20px 10px; font-size: 14px; color: var(--foodly-muted) !important; }
.foodly-co-msg.is-error { color: #B3261E; }

/* ── Success ── */
.foodly-success { padding: 40px 24px; text-align: center; }
.foodly-success-check {
    width: 64px; height: 64px; margin: 0 auto 16px;
    background: var(--foodly-accent); color: #fff !important;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 34px;
}
.foodly-success h3 { margin: 0 0 8px; font-size: 22px; }
.foodly-success p { margin: 4px 0; color: var(--foodly-muted) !important; }
.foodly-success .foodly-checkout-btn { margin-top: 20px; }

/* ── Mobile ── */
@media (max-width: 520px) {
    .foodly-panel, .foodly-cart { max-width: 100%; }
    .foodly-cart-overlay { justify-content: stretch; }
}


/* ===== Hardinn layout & polish ===== */
#brx-content:has(.foodly-app) > h1 { display: none; }
.foodly-app { max-width: 1200px; margin: 0 auto; padding: 28px 20px 96px; }
.foodly-app::before {
    content: "HARDINN MENU"; display: block; text-align: center; color: #fff;
    font-weight: 800; font-size: clamp(24px, 4.5vw, 40px); letter-spacing: .18em;
    padding: 34px 16px 30px; margin-bottom: 28px; border-radius: 18px;
    background: linear-gradient(135deg, #0B7A4B 0%, #0F3D2A 100%);
    border-bottom: 6px solid var(--foodly-accent);
}
.foodly-app .foodly-toolbar { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-bottom: 30px; text-align: center; }
.foodly-app .foodly-branches, .foodly-app .foodly-categories { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.foodly-app .foodly-cat-btn { font-weight: 600; padding: 9px 18px; }
.foodly-app .foodly-menu-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 24px; justify-content: center; }
.foodly-app .foodly-card { border-radius: 16px; overflow: hidden; box-shadow: 0 2px 14px rgba(15, 61, 42, .08); transition: transform .2s ease, box-shadow .2s ease; }
.foodly-app .foodly-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(15, 61, 42, .18); }


/* ===== Hardinn mobile & forms ===== */
.foodly-app .foodly-required { background: var(--foodly-accent); color: #fff; font-weight: 700; letter-spacing: .04em; }
.foodly-app input[type="checkbox"], .foodly-app input[type="radio"] { accent-color: var(--foodly-accent); }
.foodly-app input[type="text"], .foodly-app input[type="tel"], .foodly-app input[type="email"], .foodly-app textarea, .foodly-app select { color: var(--foodly-ink); border-color: var(--foodly-line); background: #fff; }
.foodly-app input:focus, .foodly-app textarea:focus, .foodly-app select:focus { outline: none; border-color: #0B7A4B; box-shadow: 0 0 0 3px rgba(11, 122, 75, .18); }
.foodly-app ::placeholder { color: #6B7F73; opacity: 1; }
.foodly-app .foodly-closed-banner, .foodly-app .foodly-co-msg.is-error { background: #FDECEC; color: #8A1313; border: 1px solid #F3B8B8; font-weight: 600; }
.foodly-app .foodly-branch-closed { color: #8A1313; }
.foodly-app .foodly-card-price { color: var(--foodly-ink); font-weight: 800; }
@media (max-width: 640px) {
    .foodly-app { padding: 14px 10px 96px; }
    .foodly-app::before { padding: 22px 12px 18px; letter-spacing: .1em; margin-bottom: 16px; border-radius: 14px; }
    .foodly-app .foodly-toolbar { gap: 12px; margin-bottom: 18px; }
    .foodly-app .foodly-categories { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding: 2px 2px 8px; max-width: 100%; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .foodly-app .foodly-categories::-webkit-scrollbar { display: none; }
    .foodly-app .foodly-cat-btn { flex-shrink: 0; white-space: nowrap; padding: 8px 14px; font-size: 13px; }
    .foodly-app .foodly-menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .foodly-app .foodly-card { border-radius: 12px; }
    .foodly-app .foodly-card-body { padding: 10px; }
    .foodly-app .foodly-card-name { font-size: 13.5px; line-height: 1.35; margin: 0 0 6px; }
    .foodly-app .foodly-card-desc { display: none; }
    .foodly-app .foodly-card-foot { flex-direction: column; align-items: stretch; gap: 8px; }
    .foodly-app .foodly-card-price { font-size: 14px; }
    .foodly-app .foodly-card-add { width: 100%; text-align: center; padding: 8px 6px; font-size: 13px; box-sizing: border-box; }
}

/* ===== Hardinn panel mobile ===== */
@media (max-width: 640px) {
    .foodly-panel-img { aspect-ratio: 16 / 10; max-height: 200px; }
}

/* Hardinn order tracking */
.foodly-track-link{display:inline-block;margin:0 auto 12px;padding:8px 18px;border:2px solid var(--foodly-ink);border-radius:999px;color:var(--foodly-ink);font-weight:700;font-size:14px;text-decoration:none;background:#fff}
.foodly-track-link.has-order{background:var(--foodly-ink);color:#fff}
.foodly-toolbar{text-align:center}
.foodly-track-btn{display:block;text-align:center;text-decoration:none;margin-bottom:10px}
.foodly-secondary-btn{display:block;width:100%;padding:12px;border:2px solid var(--foodly-ink);background:#fff;color:var(--foodly-ink);border-radius:10px;font-weight:700;cursor:pointer}
.foodly-success-note{font-size:14px;opacity:.8}
.foodly-track-page{max-width:640px;margin:0 auto;padding:16px}
.foodly-track-page::before{content:"TRACK YOUR ORDER";display:block;text-align:center;font-weight:800;letter-spacing:2px;margin-bottom:14px;color:var(--foodly-ink)}
.foodly-track-page .ft-card{background:#fff;border-radius:16px;padding:18px;box-shadow:0 4px 18px rgba(0,0,0,.08);margin-bottom:14px;color:#222}
.foodly-track-page .ft-head{font-size:22px;font-weight:800;margin:0}
.foodly-track-page .ft-sub{opacity:.7;font-size:14px;margin:4px 0}
.foodly-track-page .ft-eta{font-weight:700;color:var(--foodly-ink)}
.foodly-track-page .ft-steps{list-style:none;margin:16px 0 0;padding:0}
.foodly-track-page .ft-steps li{position:relative;padding:6px 0 14px 34px;color:#999;font-weight:600}
.foodly-track-page .ft-steps li.is-done{color:#222}
.foodly-track-page .ft-steps li.is-current{color:var(--foodly-ink);font-weight:800}
@keyframes ftpulse{0%{box-shadow:0 0 0 0 rgba(0,0,0,.25)}100%{box-shadow:0 0 0 12px rgba(0,0,0,0)}}
.foodly-track-page .ft-items{list-style:none;margin:0;padding:0}
.foodly-track-page .ft-items li{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid #eee}
.foodly-track-page .ft-total{font-weight:800;text-align:right;margin-top:10px}
.foodly-track-page .ft-actions{display:flex;flex-wrap:wrap;gap:10px}
.foodly-track-page .ft-btn{flex:1 1 140px;text-align:center;padding:12px;border:2px solid var(--foodly-ink);border-radius:10px;background:#fff;color:var(--foodly-ink);font-weight:700;text-decoration:none;cursor:pointer}
.foodly-track-page .ft-btn.ft-primary{background:var(--foodly-ink);color:#fff}
.foodly-track-page .ft-form input{display:block;width:100%;box-sizing:border-box;padding:12px;margin:8px 0;border:1px solid #ccc;border-radius:10px;font-size:16px;color:#222;background:#fff}
.foodly-track-page .ft-msg.is-error{color:#b00020;font-weight:600}
.foodly-track-page .ft-link{color:var(--foodly-ink);background:none;border:0;text-decoration:underline;cursor:pointer}

.foodly-track-page::before{color:#fff!important}
.foodly-track-page .ft-top{display:flex;justify-content:space-between;gap:10px;font-size:14px;opacity:.75;margin-bottom:6px}
.foodly-track-page .ft-steps li{display:flex;align-items:center;gap:12px;padding:8px 0 16px;position:relative}
.foodly-track-page .ft-dot{flex:0 0 16px;width:16px;height:16px;border-radius:50%;background:#ddd;position:relative;z-index:1}
.foodly-track-page .ft-steps li:not(:last-child)::after{content:"";position:absolute;left:7px;top:26px;width:2px;height:calc(100% - 18px);background:#ddd}
.foodly-track-page .ft-steps li.is-done .ft-dot,.foodly-track-page .ft-steps li.is-current .ft-dot{background:var(--foodly-accent)}
.foodly-track-page .ft-steps li.is-done:not(:last-child)::after{background:var(--foodly-accent)}
.foodly-track-page .ft-steps li.is-current .ft-dot{animation:ftpulse 1.4s infinite}
.foodly-track-page .ft-steps li.is-done .ft-label,.foodly-track-page .ft-steps li.is-current .ft-label{color:#0F3D2A}
.foodly-track-page .ft-steps li.is-current .ft-label{font-weight:800}
.foodly-track-link{background:#fff;color:#0F3D2A;border-color:#0F3D2A}
.foodly-track-link.has-order{background:#0F3D2A;color:#fff}
.foodly-track-page .ft-btn.ft-primary{color:#fff}

.foodly-track-page .ft-card.is-finished{text-align:center;background:#F1F7F3;border:2px solid #0F3D2A}
.foodly-track-page .ft-card.is-finished .ft-top{justify-content:center;gap:14px}
.foodly-track-page .ft-celebrate span{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:#0F3D2A;color:#fff;font-size:34px;margin:4px 0 8px}
.foodly-track-page .ft-card.is-finished .ft-head{font-size:28px;color:#0F3D2A}
.foodly-track-page .ft-card.is-finished .ft-steps li.is-current .ft-dot{animation:none;background:#0F3D2A}
.foodly-track-page .ft-card.is-finished .ft-steps{text-align:left;max-width:260px;margin:16px auto 0}

/* Hardinn delivery */
.foodly-zone,#co-search{display:block;width:100%;box-sizing:border-box;padding:12px;margin:8px 0;border:1px solid #cfd8d2;border-radius:10px;font-size:16px;color:#0F3D2A;background:#fff}
#co-map-wrap .foodly-secondary-btn{margin-top:6px}
#co-map{border:1px solid #cfd8d2}
#foodly-cart #co-fee-row{font-weight:600}

.foodly-addr-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}
.foodly-addr-grid input{width:100%;box-sizing:border-box;padding:12px;border:1px solid #cfd8d2;border-radius:10px;font-size:16px;color:#0F3D2A;background:#fff}
.foodly-addr-grid #co-bldg,.foodly-addr-grid #co-landmark{grid-column:1/-1}

.foodly-addr-grid #co-address{grid-column:1/-1}
.foodly-addr-grid #co-bldg,.foodly-addr-grid #co-landmark{grid-column:auto}
.foodly-addr-grid{grid-template-columns:1fr 1fr}

.foodly-addr-grid{display:grid;grid-template-columns:1fr;gap:10px;margin:8px 0}
.foodly-addr-col{display:block}
.foodly-addr-col input{margin-top:4px}
@media(min-width:560px){.foodly-addr-grid{grid-template-columns:1fr 1fr}}

.foodly-addr-grid #co-address,.foodly-addr-grid #co-landmark{grid-column:auto}

.foodly-success p,.foodly-success strong{color:#0F3D2A}
.foodly-success h3{color:#0F3D2A}

/* Hardinn storefront header + category pictures */
.foodly-app.has-hero::before{display:none!important}
.has-hero #foodly-branches:has(.foodly-branch-btn:only-child){display:none}
.hd-hero{position:relative;overflow:hidden;border-radius:20px;margin:0 0 18px;color:#fff;box-shadow:0 8px 24px rgba(15,61,42,.25);border-bottom:6px solid #D62828}
.hd-hero .hd-bg{position:absolute;inset:0;background:#0F3D2A center/cover no-repeat;transform:scale(1.05)}
.hd-hero .hd-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,61,42,.72),rgba(15,61,42,.92))}
.hd-in{position:relative;padding:34px 20px 26px;text-align:center}
.hd-logo{font-size:44px;font-weight:900;letter-spacing:4px;line-height:1;text-shadow:0 2px 8px rgba(0,0,0,.35)}
.hd-logo span{color:#fff;background:#D62828;border-radius:8px;padding:0 8px;margin-left:6px;display:inline-block;letter-spacing:3px}
.hd-tag{margin:10px 0 14px;font-size:15px;opacity:.92;letter-spacing:1px}
.hd-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:18px}
.hd-chip{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:6px 14px;font-size:13px;backdrop-filter:blur(4px)}
.hd-chip.hd-open{background:#1f9d57;border-color:#1f9d57;font-weight:700}
.hd-chip.hd-closed{background:#b3261e;border-color:#b3261e;font-weight:700}
.hd-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.hd-btn{display:inline-block;padding:12px 22px;border-radius:999px;font-weight:800;font-size:15px;text-decoration:none;background:#fff;color:#0F3D2A;border:2px solid #fff;transition:transform .15s}
.hd-btn:hover{transform:translateY(-2px)}
.hd-btn.hd-wa{background:#25D366;border-color:#25D366;color:#fff}
.hd-btn.hd-track{background:#D62828;border-color:#D62828;color:#fff}
.hd-btn.hd-track.has-order{background:#fff;color:#D62828}
@media(max-width:560px){.hd-in{padding:26px 14px 20px}.hd-logo{font-size:36px}.hd-btn{flex:1 1 40%;text-align:center;padding:12px 10px}.hd-btn.hd-track{flex-basis:100%}}
/* category bar with pictures */
#foodly-categories{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto;gap:14px;justify-content:flex-start!important;padding:10px 4px 14px;scrollbar-width:none;position:sticky;top:0;z-index:20;background:#fff}
#foodly-categories::-webkit-scrollbar{display:none}
#foodly-categories .foodly-cat-btn{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:6px;background:none!important;border:0!important;box-shadow:none!important;padding:0!important;width:76px;color:#0F3D2A!important;font-weight:700;font-size:12px;line-height:1.2;text-align:center}
.hd-cat-img{display:block;width:64px;height:64px;border-radius:50%;background:#e9f1ec center/cover no-repeat;border:3px solid #fff;box-shadow:0 0 0 2px #cfd8d2;transition:box-shadow .15s}
.foodly-cat-btn.is-active .hd-cat-img{box-shadow:0 0 0 3px #D62828}
.foodly-cat-btn.is-active .hd-cat-label{color:#D62828}
.hd-cat-label{display:block}

@media(max-width:560px){.hd-tag{margin:8px 0 10px;font-size:13px}.hd-chips{margin-bottom:12px;gap:6px}.hd-chip{padding:5px 10px;font-size:12px}.hd-actions{gap:8px}.hd-btn{padding:10px 8px;font-size:14px}.hd-in{padding:20px 12px 16px}}

/* Hardinn footer */
.hd-footer{margin:40px 0 24px;border-radius:20px;background:#0F3D2A;color:#fff;padding:30px 22px 18px;text-align:center;border-bottom:6px solid #D62828}
.hd-flogo{font-size:30px;font-weight:900;letter-spacing:3px}
.hd-flogo span{background:#D62828;border-radius:6px;padding:0 6px;margin-left:5px;display:inline-block}
.hd-ftag{margin:8px 0 22px;font-size:13px;opacity:.85;letter-spacing:1px}
.hd-fcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:22px;text-align:center}
.hd-fcol h4{margin:0 0 8px;font-size:14px;letter-spacing:2px;text-transform:uppercase;color:#ff9b9b}
.hd-fcol p{margin:0 0 6px;font-size:14px;line-height:1.5;opacity:.92}
.hd-fcol a{display:block;color:#fff;text-decoration:none;font-size:14px;padding:3px 0;opacity:.95}
.hd-fcol a:hover{text-decoration:underline}
.hd-fcopy{margin-top:24px;padding-top:14px;border-top:1px solid rgba(255,255,255,.18);font-size:12px;opacity:.7}

.hd-fcopy a{color:#fff;font-weight:700;text-decoration:underline}

.foodly-app.has-hero{padding-bottom:0!important}
.hd-footer{margin-bottom:0!important;margin-top:32px}

.hd-dev{display:block;margin-top:4px}
.hd-footer{padding-bottom:78px!important}

#foodly-categories{gap:10px!important}
#foodly-categories .foodly-cat-btn{width:84px!important;min-width:84px;white-space:normal!important;overflow:visible}
#foodly-categories .hd-cat-label{white-space:normal!important;word-break:normal;overflow-wrap:break-word;line-height:1.25;font-size:12px;min-height:30px;display:flex;align-items:flex-start;justify-content:center;width:100%;text-align:center}

/* logo, search, quick add, bottom cart bar, reorder */
.hd-logo-img{display:block;margin:0 auto 4px;width:min(300px,72%);height:auto;filter:drop-shadow(0 3px 8px rgba(0,0,0,.35))}
.hd-flogo-img{width:min(220px,60%);margin-bottom:6px}
.hd-cat-img.is-logo{background-color:#087854;background-size:78%;background-repeat:no-repeat;background-position:center}
.hd-search-wrap{margin:0 0 10px}
.hd-search{display:block;width:100%;box-sizing:border-box;padding:13px 16px;border:2px solid #d7e3dc;border-radius:999px;font-size:16px;color:#0F3D2A;background:#fff}
.hd-search:focus{outline:none;border-color:#0F3D2A}
.foodly-card-add{cursor:pointer}
.foodly-card-add.is-added{background:#1f9d57!important;color:#fff!important}
.foodly-cart-fab{position:fixed!important;left:12px!important;right:12px!important;bottom:12px!important;width:auto!important;height:58px!important;border-radius:16px!important;display:flex!important;align-items:center;justify-content:space-between;gap:12px;padding:0 18px!important;background:#0F3D2A!important;color:#fff!important;font-weight:800;box-shadow:0 8px 24px rgba(0,0,0,.3);max-width:640px;margin:0 auto;z-index:9990}
.foodly-cart-fab.hd-empty{display:none!important}
.hd-bar-count{background:#D62828;border-radius:999px;min-width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;font-size:15px}
.hd-bar-label{flex:1;text-align:center;font-size:16px}
.hd-bar-total{font-size:15px}
.hd-reorder{display:flex;align-items:center;gap:12px;margin:0 0 16px;padding:12px 14px;border-radius:16px;background:#fff7e6;border:2px solid #f3c969}
.hd-re-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:13px;color:#5b4a14}
.hd-re-text strong{font-size:15px;color:#0F3D2A}
.hd-re-text span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hd-re-btn{flex:0 0 auto;background:#D62828;color:#fff;border:0;border-radius:999px;padding:11px 16px;font-weight:800;font-size:14px;cursor:pointer}

/* v2 fixes */
.foodly-toolbar{display:contents}
.foodly-categories{position:sticky;top:0;z-index:30;background:#fff}
.admin-bar .foodly-categories{top:32px}
input.hd-search{width:100%;max-width:none;box-sizing:border-box}
.hd-hero a[href*="wa.me"],.hd-hero .hd-wa,.hd-footer a[href*="wa.me"]{display:none!important}

/* v3 fixes */
.foodly-app .foodly-toolbar{display:contents!important}
.foodly-app .foodly-categories{position:sticky!important;top:0!important;z-index:30;background:#fff}
body.admin-bar .foodly-app .foodly-categories{top:32px!important}
.foodly-app .hd-search-wrap{width:100%!important;display:block}
.foodly-app input.hd-search{width:100%!important;max-width:none!important;box-sizing:border-box;display:block}

/* ===== Arabic / RTL ===== */
#foodly-lang{position:absolute;top:12px;inset-inline-end:12px;z-index:6;border:0;border-radius:999px;padding:7px 14px;font:700 13px/1 system-ui,sans-serif;background:rgba(255,255,255,.94);color:#0F3D2A;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.18)}
#foodly-lang.is-fixed{position:fixed;top:12px;z-index:9999}
.hd-hero{position:relative}
html.foodly-ar body,html.foodly-ar .foodly-app,html.foodly-ar .foodly-app button,html.foodly-ar .foodly-app input,html.foodly-ar .foodly-app textarea,html.foodly-ar .foodly-app select{font-family:'Cairo',system-ui,-apple-system,'Segoe UI',Tahoma,sans-serif}
html.foodly-ar .leaflet-container,html.foodly-ar .foodly-map{direction:ltr}
html.foodly-ar .foodly-app{text-align:start}

html[dir=rtl] .foodly-track-page .ft-steps li:not(:last-child)::after{left:auto;right:7px}
html[dir=rtl] .foodly-track-page .ft-card.is-finished .ft-steps{text-align:right}