/**
 * 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: #E8A317;       /* saffron */
    --foodly-accent-ink: #6B4A05;   /* text on accent */
    --foodly-ink: #23201B;          /* primary text */
    --foodly-muted: #6E675C;        /* secondary text */
    --foodly-line: #E6E1D6;         /* hairline borders */
    --foodly-surface: #FFFFFF;
    --foodly-surface-2: #F7F4ED;    /* 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. */
    height: 190px; 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%; height: 200px; object-fit: cover; 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; }
}