/*
 * components/profile.css
 *
 * What:  The signed-in "My Profile" dashboard (views/account/index.ejs):
 *        a left sidebar of account tabs + Invite card, and a main column
 *        with the editable profile card (avatar + outlined fields), the
 *        Update / Log Out actions, a stats row and an account-safety card.
 *        Built to the supplied mockup. Rendered WITH the site header.
 * Used:  AuthController.accountPage.
 */

/* ── Page shell: sidebar + main ─────────────────────────────────────── */
.acct {
    width: 100%; max-width: 1180px; margin: 0 auto;
    padding: var(--space-6) var(--space-4) var(--space-10);
    display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: var(--space-6);
    align-items: start;
}
/* Nothing inside may force the page wider than the screen. */
.acct, .acct-main, .acct-card, .acct-fields, .acct-stat { min-width: 0; }
.acct-main { max-width: 100%; }

/* ── Sidebar ────────────────────────────────────────────────────────── */
.acct-nav {
    position: sticky; top: 88px;
    display: flex; flex-direction: column; gap: var(--space-4);
}
.acct-nav__list {
    display: flex; flex-direction: column; gap: 2px;
    background: #fff; border: 1px solid var(--color-border-soft);
    border-radius: 18px; padding: var(--space-3);
}
.acct-nav__item {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 12px; border-radius: 12px; border: 0; background: none;
    cursor: pointer; font: inherit; font-weight: 600; color: var(--color-text);
    text-decoration: none; width: 100%; text-align: left;
}
.acct-nav__item:hover { background: var(--color-bg-alt); }
.acct-nav__item svg { flex: 0 0 auto; color: var(--color-text-soft); }
.acct-nav__item.is-active { background: var(--color-primary-soft); color: var(--color-primary); font-weight: 800; }
.acct-nav__item.is-active svg { color: var(--color-primary); }

.acct-invite { background: linear-gradient(140deg, #fde8e8, #fff3ec); border: 1px solid var(--color-border-soft); border-radius: 16px; padding: var(--space-4); }
.acct-invite__title { font-weight: 800; color: var(--color-primary); margin: 0; }
.acct-invite__sub { font-size: 0.85rem; color: var(--color-text-soft); margin: 4px 0 var(--space-3); }
.acct-invite__btn { background: #fff; border: 1px solid var(--color-primary); color: var(--color-primary); border-radius: 10px; padding: 8px 16px; font-weight: 800; cursor: pointer; }
.acct-invite__btn:hover { background: var(--color-primary); color: #fff; }

/* ── Main column ────────────────────────────────────────────────────── */
.acct-main { min-width: 0; }
.acct-head { margin-bottom: var(--space-5); }
.acct-head__title { font-size: 1.8rem; font-weight: 800; margin: 0; }
.acct-head__sub { color: var(--color-text-soft); margin: 4px 0 0; }

/* Profile card: avatar (left) + 2-column field grid. */
.acct-card {
    background: #fff; border: 1px solid var(--color-border-soft); border-radius: 18px;
    padding: var(--space-5); display: flex; gap: var(--space-5); align-items: flex-start;
}
.acct-card__avatar { flex: 0 0 auto; }
.acct-fields { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }

/* Avatar */
.profile-avatar { position: relative; }
.profile-avatar__circle { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-primary); font-size: 2rem; font-weight: 800; overflow: hidden; }
.profile-avatar__circle img { width: 100%; height: 100%; object-fit: cover; }
.profile-avatar__edit { position: absolute; right: -2px; bottom: -2px; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 1px solid var(--color-border); display: grid; place-items: center; box-shadow: var(--shadow-1); cursor: pointer; color: var(--color-text); }
.profile-avatar__edit:hover { color: var(--color-primary); }

/* ── Outlined fields (label on the border) — shared with the form JS ── */
.pf-field { position: relative; }
.pf-field__label { position: absolute; top: -9px; left: 14px; z-index: 1; background: #fff; padding: 0 6px; font-size: 0.8rem; color: var(--color-text-soft); }
.pf-field__control { display: flex; align-items: center; gap: 8px; border: 1px solid var(--color-border); border-radius: 12px; padding: 0 14px; min-height: 58px; background: #fff; }
.pf-field__control:focus-within { border-color: var(--color-primary); }
.pf-field__input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 1rem; padding: 14px 0; color: var(--color-text); }
.pf-field__input::placeholder { color: var(--color-text-soft); }
.pf-field__input--date { cursor: pointer; }

/* Custom gender dropdown (consistent across browsers). */
.pf-select__btn { width: 100%; background: #fff; cursor: pointer; justify-content: space-between; text-align: left; }
.pf-select__btn:focus-visible { outline: none; border-color: var(--color-primary); }
.pf-select__value { flex: 1 1 auto; min-width: 0; font-size: 1rem; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-select__value.is-placeholder { color: var(--color-text-soft); }
.pf-select__chev { flex: 0 0 auto; color: var(--color-text-soft); transition: transform 160ms ease; }
.pf-field--select.is-open .pf-select__btn { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(229, 37, 42, 0.12); }
.pf-field--select.is-open .pf-select__chev { transform: rotate(180deg); }
.pf-select__menu {
    position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40;
    margin: 0; padding: 6px; list-style: none;
    background: #fff; border: 1px solid var(--color-border);
    border-radius: 14px; box-shadow: var(--shadow-2);
    max-height: 280px; overflow-y: auto; animation: pf-select-in 120ms ease;
}
@keyframes pf-select-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.pf-select__opt { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 10px; cursor: pointer; font-size: 1rem; color: var(--color-text); user-select: none; }
.pf-select__opt:hover, .pf-select__opt.is-active { background: var(--color-bg-alt); }
.pf-select__opt.is-selected { color: var(--color-primary); font-weight: 700; }
.pf-select__opt.is-selected::after {
    content: ''; width: 16px; height: 16px; flex: 0 0 auto;
    background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23e5252a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

.pf-clear { flex: 0 0 auto; background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; }
.pf-change { flex: 0 0 auto; background: none; border: 0; padding: 0; color: var(--color-primary); font-weight: 800; font-size: 0.9rem; letter-spacing: 0.03em; cursor: pointer; }
.pf-readonly { flex: 1 1 auto; min-width: 0; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-readonly.is-empty { color: var(--color-text-soft); }
.pf-edit { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }
.pf-field--lock.is-editing .pf-readonly,
.pf-field--lock.is-editing .pf-change { display: none; }
/* Country chip inside the profile field: drop its own border/height
   (the field already has a box) and use a subtle right divider so it
   reads as one clean control instead of a box-in-a-box. */
.pf-edit .country-chip {
    flex: 0 0 auto; height: auto; border: 0; border-radius: 0;
    background: transparent; padding: 0 10px 0 0; margin-right: 4px;
    border-right: 1px solid var(--color-border-soft);
}

/* ── "Complete your profile" / About You card ──────────────────────── *
 * Optional preferences (customer_profile). Its controls are attached to
 * #account-form via form="account-form", so the single "Update Profile"
 * button saves them together with the basic fields. Reuses .pf-field /
 * .pf-select; adds pill groups for the multi-select + yes/no questions. */
.acct-about {
    background: #fff; border: 1px solid var(--color-border-soft); border-radius: 18px;
    padding: var(--space-5); margin-top: var(--space-5); min-width: 0;
}
.acct-about__title { font-size: 1.15rem; font-weight: 800; margin: 0; }
.acct-about__sub { color: var(--color-text-soft); margin: 4px 0 var(--space-5); font-size: 0.9rem; }
.acct-about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: start; }
.acct-about__field { min-width: 0; }
.acct-about__field--full { grid-column: 1 / -1; }
.acct-about__flabel { display: block; font-size: 0.85rem; font-weight: 700; color: var(--color-text); margin-bottom: 10px; }

/* Pills — checkbox (multi-select) + radio (yes/no). The native control is
   visually hidden; the <span> is the tappable pill. The .is-on class (set
   server-side + toggled by account.js) covers webviews without :has(). */
.pf-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-pill { position: relative; display: inline-flex; margin: 0; cursor: pointer; }
.pf-pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.pf-pill span {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 9px 15px; border: 1px solid var(--color-border); border-radius: 999px;
    font-size: 0.9rem; font-weight: 600; color: var(--color-text); background: #fff;
    user-select: none; transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}
.pf-pill:hover span { border-color: var(--color-primary); }
.pf-pill.is-on span,
.pf-pill input:checked ~ span {
    border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary);
}
.pf-pill input:focus-visible ~ span { box-shadow: 0 0 0 3px rgba(229, 37, 42, 0.18); }
.pf-pills--yn .pf-pill span { min-width: 78px; }

/* ── Actions ────────────────────────────────────────────────────────── */
.acct-actions { display: flex; gap: var(--space-3); margin: var(--space-5) 0; }
.acct-logout-form { margin: 0; }
.acct-btn { border-radius: 12px; padding: 13px 28px; font-weight: 800; font-size: 1rem; cursor: pointer; }
.acct-btn--update { background: var(--color-primary); color: #fff; border: 0; }
.acct-btn--update:hover { background: var(--color-primary-dark); }
.acct-btn--update[disabled] { background: #e5e7eb; color: var(--color-text-soft); cursor: not-allowed; }
.acct-btn--logout { background: #fff; border: 1px solid var(--color-border); color: var(--color-text); }
.acct-btn--logout:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* ── Stats ──────────────────────────────────────────────────────────── */
.acct-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); background: #fff; border: 1px solid var(--color-border-soft); border-radius: 18px; padding: var(--space-5); margin-bottom: var(--space-5); }
.acct-stat { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.acct-stat__icon { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; }
.acct-stat__icon--orders { background: #fde8e8; color: #e5252a; }
.acct-stat__icon--fav    { background: #e7f6ec; color: #16a34a; }
.acct-stat__icon--points { background: #fef3d7; color: #d97706; }
.acct-stat__icon--offers { background: #ede9fe; color: #7c3aed; }
.acct-stat__num { font-size: 1.5rem; font-weight: 800; }
.acct-stat__label { font-size: 0.85rem; color: var(--color-text-soft); }

/* ── Account safety ─────────────────────────────────────────────────── */
.acct-safe { display: flex; align-items: center; gap: var(--space-4); background: var(--color-primary-soft); border-radius: 16px; padding: var(--space-5); }
.acct-safe__icon { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--color-primary); display: grid; place-items: center; }
.acct-safe__text { flex: 1 1 auto; min-width: 0; }
.acct-safe__title { font-weight: 800; margin: 0; }
.acct-safe__sub { font-size: 0.88rem; color: var(--color-text-soft); margin: 2px 0 0; }
.acct-safe__btn { flex: 0 0 auto; background: #fff; border: 1px solid var(--color-primary); color: var(--color-primary); border-radius: 12px; padding: 10px 16px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.acct-safe__btn:hover { background: var(--color-primary); color: #fff; }

/* Placeholder screen for not-yet-built tabs (Payment / Orders / etc.). */
.acct-placeholder {
    background: #fff; border: 1px solid var(--color-border-soft); border-radius: 18px;
    padding: var(--space-8) var(--space-5); text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
}
.acct-placeholder__icon { width: 60px; height: 60px; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-primary); display: grid; place-items: center; margin-bottom: var(--space-2); }
.acct-placeholder__title { font-size: 1.2rem; font-weight: 800; margin: 0; }
.acct-placeholder__sub { color: var(--color-text-soft); margin: 0; max-width: 380px; }
.acct-placeholder .acct-btn { margin-top: var(--space-4); }

/* Addresses tab — saved-address list rendered inline on the account
   panel (same shape as the location-modal cards but with a stat-row
   above and inline action buttons). Add / Edit reuse the location
   modal's form view; Delete is a confirm + POST handled by
   /js/pages/account.js. */
.acct-addr { display: flex; flex-direction: column; gap: var(--space-4); }
.acct-addr__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.acct-addr__title { font-size: 1.1rem; font-weight: 800; margin: 0; }
.acct-addr__sub { color: var(--color-text-soft); margin: 2px 0 0; font-size: 0.88rem; }
.acct-addr__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.acct-addr__card {
    display: grid; grid-template-columns: 38px 1fr auto; gap: var(--space-3);
    align-items: start; padding: var(--space-3) var(--space-4);
    background: #fff; border: 1px solid var(--color-border-soft); border-radius: 14px;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.acct-addr__card:hover { border-color: var(--color-primary); box-shadow: 0 6px 18px rgba(229,37,42,0.08); }
.acct-addr__card.is-busy { opacity: 0.5; pointer-events: none; }
.acct-addr__icon {
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--color-primary-soft); color: var(--color-primary);
    display: grid; place-items: center; flex-shrink: 0;
}
.acct-addr__body { min-width: 0; }
.acct-addr__top { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.acct-addr__name { font-size: 1rem; font-weight: 800; margin: 0; }
.acct-addr__badge { font-size: 0.7rem; font-weight: 700; background: var(--color-primary-soft); color: var(--color-primary); padding: 2px 8px; border-radius: 999px; }
.acct-addr__line { color: var(--color-text-soft); margin: 4px 0 0; font-size: 0.9rem; }
.acct-addr__meta { color: var(--color-text-soft); margin: 2px 0 0; font-size: 0.82rem; }
.acct-addr__actions { display: flex; flex-direction: column; gap: 6px; }
.acct-addr__btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: #fff; border: 1px solid var(--color-border); color: var(--color-text);
    border-radius: 8px; padding: 6px 10px; font-size: 0.82rem; font-weight: 600; cursor: pointer;
    transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
}
.acct-addr__btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.acct-addr__btn--danger:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-soft); }
.acct-placeholder--inset { padding: var(--space-5) var(--space-4); border-radius: 14px; }

/* Inline add/edit form on the Addresses tab. Lives between the header
   and the saved-address list; hidden by default, opens on Add/Edit. */
.acct-addr__form-wrap { background: var(--color-primary-soft); border-radius: 16px; padding: var(--space-4); }
.acct-addr-form { display: flex; flex-direction: column; gap: var(--space-3); }
.acct-addr-form__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.acct-addr-form__title { margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--color-text); }
.acct-addr-form__close {
    background: transparent; border: 0; color: var(--color-text-soft); cursor: pointer;
    width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
}
.acct-addr-form__close:hover { background: rgba(0,0,0,0.05); color: var(--color-text); }
.acct-addr-form__grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3);
    background: #fff; border-radius: 12px; padding: var(--space-4);
}
.acct-addr-form__field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.acct-addr-form__field--full { grid-column: 1 / -1; }
.acct-addr-form__field label { font-size: 0.82rem; font-weight: 700; color: var(--color-text); }
.acct-addr-form__req { color: var(--color-primary); }
.acct-addr-form__field input,
.acct-addr-form__field select,
.acct-addr-form__field textarea {
    width: 100%; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 10px;
    font-size: 0.95rem; font-family: inherit; background: #fff; color: var(--color-text);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.acct-addr-form__field input:focus,
.acct-addr-form__field select:focus,
.acct-addr-form__field textarea:focus {
    outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(229,37,42,0.12);
}
.acct-addr-form__field textarea { resize: vertical; min-height: 60px; }
.acct-addr-form__phone {
    display: grid; grid-template-columns: minmax(110px, max-content) 1fr; gap: 8px;
}
.acct-addr-form__phone .acct-addr-form__dial,
.acct-addr-form__phone input {
    padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 10px;
    font-size: 0.95rem; background: #fff; color: var(--color-text);
}
.acct-addr-form__phone .acct-addr-form__dial { cursor: pointer; }
.acct-addr-form__phone .acct-addr-form__dial:focus,
.acct-addr-form__phone input:focus {
    outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(229,37,42,0.12);
}
.acct-addr-form__check { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.acct-addr-form__check input { width: 16px; height: 16px; accent-color: var(--color-primary); }
.acct-addr-form__error {
    margin: 0; padding: 10px 12px; background: #fee2e2; color: #991b1b;
    border-radius: 10px; font-size: 0.9rem; font-weight: 600;
}
.acct-addr-form__foot { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.acct-addr-form__spacer { flex: 1; }
.acct-addr-form__delete {
    background: #fff; border: 1px solid var(--color-primary); color: var(--color-primary);
    border-radius: 10px; padding: 8px 14px; font-weight: 700; cursor: pointer; font-size: 0.88rem;
}
.acct-addr-form__delete:hover { background: var(--color-primary); color: #fff; }
@media (max-width: 640px) {
    .acct-addr-form__grid { grid-template-columns: 1fr; }
}

/* Payment Methods tab — saved-card list + inline Stripe Elements form.
   Mirrors the addresses tab's shape so the two read consistently. */
.acct-pm { display: flex; flex-direction: column; gap: var(--space-4); }
.acct-pm__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.acct-pm__title { font-size: 1.1rem; font-weight: 800; margin: 0; }
.acct-pm__sub { color: var(--color-text-soft); margin: 2px 0 0; font-size: 0.88rem; }
.acct-pm__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.acct-pm__card {
    display: grid; grid-template-columns: 44px 1fr auto; gap: var(--space-3);
    align-items: center; padding: var(--space-3) var(--space-4);
    background: #fff; border: 1px solid var(--color-border-soft); border-radius: 14px;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.acct-pm__card:hover { border-color: var(--color-primary); box-shadow: 0 6px 18px rgba(229,37,42,0.08); }
.acct-pm__card.is-busy { opacity: 0.5; pointer-events: none; }
.acct-pm__brand {
    width: 44px; height: 30px; border-radius: 6px;
    background: linear-gradient(135deg, #1a1f36, #4b5563);
    color: #fff; display: grid; place-items: center;
}
.acct-pm__brand--visa       { background: linear-gradient(135deg, #1a1f71, #142158); }
.acct-pm__brand--mastercard { background: linear-gradient(135deg, #eb001b, #f79e1b); }
.acct-pm__brand--amex       { background: linear-gradient(135deg, #2e77bb, #1d4e89); }
.acct-pm__name { font-size: 1rem; font-weight: 800; margin: 0; letter-spacing: 0.5px; }
.acct-pm__meta { color: var(--color-text-soft); margin: 2px 0 0; font-size: 0.82rem; }
.acct-pm__actions { display: flex; gap: 6px; }
.acct-pm__form-wrap { background: var(--color-primary-soft); border-radius: 16px; padding: var(--space-4); }
.acct-pm__field { display: flex; flex-direction: column; gap: 6px; }
.acct-pm__field label { font-size: 0.82rem; font-weight: 700; color: var(--color-text); }
.acct-pm__stripe-mount {
    background: #fff; padding: 14px 12px; border: 1px solid var(--color-border); border-radius: 10px;
    min-height: 44px;
}
.acct-pm__secure {
    display: flex; align-items: center; gap: 6px; margin: 8px 0 0;
    font-size: 0.78rem; color: var(--color-text-soft);
}
@media (max-width: 640px) {
    .acct-pm__card { grid-template-columns: 38px 1fr; }
    .acct-pm__actions { grid-column: 1 / -1; justify-content: flex-end; }
}

@media (max-width: 640px) {
    .acct-addr__card { grid-template-columns: 34px 1fr; }
    .acct-addr__actions { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; }

    /* Edit/Delete/Remove on cards — bigger tap targets + share the row
       evenly so they're easy to hit on a phone. */
    .acct-addr__actions .acct-addr__btn,
    .acct-pm__actions .acct-addr__btn {
        flex: 1; min-height: 42px; padding: 10px 14px; justify-content: center;
    }

    /* The inline add/edit form footer: stack Save / Cancel / Delete
       full-width instead of the broken half-row + dropped-Save layout
       caused by the global `.acct-btn { width:100% }` rule. */
    .acct-addr-form__foot { flex-direction: column; align-items: stretch; gap: var(--space-2); }
    .acct-addr-form__spacer { display: none; }
    .acct-addr-form__foot .acct-addr__btn,
    .acct-addr-form__delete {
        width: 100%; text-align: center; min-height: 44px; padding: 11px 14px;
    }

    /* Section-header "+ Add new address/card" CTAs shouldn't go
       full-width (the global .acct-btn rule does that) — keep them
       compact, top-aligned under the title. */
    .acct-addr__head .acct-btn,
    .acct-pm__head .acct-btn { width: auto; align-self: flex-start; }
}

/* Favourites tab — restaurant cards in a responsive grid that fits the
   account panel (narrower than the home page). Overrides the home rail's
   4-column default. */
.acct-fav-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important; gap: var(--space-3); }
.acct-fav-grid > li { width: auto; max-width: none; }

/* Mobile-only back bar — hidden on desktop. */
.acct-mobilebar { display: none; }

/* ── Tablet + mobile (≤ 1024px): single column, tabs → horizontal pills ─ */
@media (max-width: 1024px) {
    /* Force a single column + clamp everything to the viewport width so the
       page can never scroll/cut sideways on a phone. */
    .acct { grid-template-columns: 1fr !important; padding: var(--space-3) var(--space-3) var(--space-10); gap: var(--space-4); overflow-x: hidden; }
    .acct-nav, .acct-main, .acct-card, .acct-fields, .acct-stats, .acct-safe, .acct-actions, .acct-nav__list, .acct-about { max-width: 100%; }
    .acct-about__grid { grid-template-columns: 1fr; }

    .acct-nav { position: static; }
    /* All tabs stay reachable on mobile as a swipeable pill row. */
    .acct-nav__list {
        flex-direction: row; overflow-x: auto; -webkit-overflow-scrolling: touch;
        gap: var(--space-2); scrollbar-width: none; padding: var(--space-2);
    }
    .acct-nav__list::-webkit-scrollbar { display: none; }
    .acct-nav__item { flex: 0 0 auto; white-space: nowrap; border: 1px solid var(--color-border-soft); border-radius: 999px; padding: 9px 14px; }
    .acct-nav__item.is-active { border-color: var(--color-primary); }
    .acct-invite { display: none; }   /* keep the mobile screen focused on the profile */

    .acct-head__title { font-size: 1.5rem; }
    .acct-card { flex-direction: column; align-items: stretch; }
    .acct-card__avatar { align-self: center; }
    .acct-fields { grid-template-columns: 1fr; gap: var(--space-4); }
    .acct-actions { flex-direction: column; }
    .acct-btn { width: 100%; }
    .acct-stats { grid-template-columns: repeat(2, 1fr); }
    .acct-safe { flex-direction: column; align-items: flex-start; }
    .acct-safe__btn { width: 100%; }
}

/* ── Phone (≤ 767px): a FOCUSED app screen, not the web dashboard. ─────
   Strip all site chrome (header, search, filter, bottom nav, sidebar
   tabs, stats, safety card) and show a clean "Your Profile" screen:
   a back bar, an avatar card with stacked fields, and a sticky
   "Update profile" action — matching the supplied mobile mockup. */
@media (max-width: 767px) {
    /* Strip the global site chrome ONLY on the focused Profile-edit screen
       (it owns a sticky "Update profile" bar at the bottom, so the site
       header + bottom-nav would clash). Every other account tab keeps the
       header + bottom-nav so it reads like the My Orders screen. The flag
       is the body class `view-profilefocus` (set by the controller's
       view_mode), NOT active_nav — active_nav still drives the bottom-nav
       highlight. */
    body.view-profilefocus .site-header,
    body.view-profilefocus .mobile-search,
    body.view-profilefocus .promo-strip,
    body.view-profilefocus .bottom-nav { display: none !important; }
    body.view-profilefocus.has-bottom-nav #app-main { padding-bottom: 0; }

    /* Page becomes a full-height app screen. The big 132px bottom gap is
       only needed on the Profile-edit screen (its sticky save bar). Other
       tabs keep a smaller gap that just clears the bottom-nav. */
    .acct { display: block; padding: 0 0 88px; background: #f3f4f6; min-height: 100dvh; overflow-x: hidden; }
    body.view-profilefocus .acct { padding-bottom: 132px; }
    /* No tabs / desktop heading / stats / safety on the focused screen. */
    .acct-nav, .acct-head, .acct-stats, .acct-safe { display: none !important; }

    /* Inset the tab CONTENT (rewards / addresses / payment / orders) so the
       cards don't touch the left/right screen edges — aligns with the
       back-bar's 16px gutter. The Profile-edit screen keeps its full-bleed
       card sheet, so it opts OUT via the view-profilefocus body class. */
    .acct-main { padding-left: var(--space-4); padding-right: var(--space-4); }
    body.view-profilefocus .acct-main { padding-left: 0; padding-right: 0; }

    /* About-You card sits below the profile sheet — give it side margins +
       a softer radius so it reads as a card on the full-bleed app screen. */
    .acct-about { margin: var(--space-4) var(--space-3) 0; border-radius: 16px; padding: var(--space-4); }

    /* Back bar. */
    .acct-mobilebar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4) 0; }
    .acct-mobilebar__back { display: inline-flex; color: var(--color-text); text-decoration: none; }
    .acct-mobilebar__title { font-size: 1.5rem; font-weight: 800; margin: 0; }

    /* Card with the avatar overlapping its top edge. */
    .acct-card { display: block; margin: 44px 0 0; border: 0; border-radius: 26px 26px 0 0; box-shadow: none; padding: 62px var(--space-5) var(--space-6); position: relative; }
    .acct-card__avatar { position: absolute; top: -46px; left: 50%; transform: translateX(-50%); }
    .profile-avatar__circle { width: 96px; height: 96px; font-size: 2.4rem; border: 4px solid #fff; box-shadow: var(--shadow-2); }
    .profile-avatar__edit { right: -2px; bottom: 2px; width: 34px; height: 34px; }
    .acct-fields { display: flex; flex-direction: column; gap: var(--space-5); }

    /* Sticky bottom actions. */
    .acct-actions { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; margin: 0; background: #fff; border-top: 1px solid var(--color-border-soft); padding: var(--space-3) var(--space-4) var(--space-4); flex-direction: column; gap: var(--space-2); }
    .acct-btn { width: 100%; }
    .acct-logout-form { width: 100%; }
    .acct-btn--logout { width: 100%; border: 0; background: none; color: var(--color-text-soft); padding: 6px; }
    .acct-btn--logout:hover { color: var(--color-primary); border: 0; }
}

/* ── Rewards tab — per-restaurant reward cards ──────────────────────── */
.rewards-intro { color: var(--color-text-soft); margin: 0 0 var(--space-4); font-size: 0.92rem; }
.rewards-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-4); }
.reward-card { min-width: 0; }
.reward-card__link {
    display: flex; flex-direction: column; gap: var(--space-3); min-height: 150px;
    background: linear-gradient(135deg, var(--rc-tint, #FFE0B2), #ffffff);
    border: 1px solid var(--color-border-soft); border-radius: 18px; padding: var(--space-5);
    text-decoration: none; color: var(--color-text); box-shadow: var(--shadow-1);
    transition: transform 140ms ease, box-shadow 140ms ease;
}
.reward-card__link:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.reward-card__top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.reward-card__logo { width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,0.7); display: grid; place-items: center; font-weight: 800; font-size: 1.1rem; flex: 0 0 auto; }
.reward-card__name { font-weight: 800; font-size: 1rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reward-card__balance { margin-top: auto; }
.reward-card__bal-label { display: block; font-size: 0.78rem; color: var(--color-text-soft); font-weight: 600; }
.reward-card__bal-amount { font-size: 1.8rem; font-weight: 800; }
.reward-card__foot { display: flex; gap: var(--space-4); font-size: 0.78rem; color: var(--color-text-soft); font-weight: 600; }

/* Invite & Earn — referral code card at the top of the Rewards tab. */
.invite-card {
    background: linear-gradient(135deg, #fff1f1, #ffe4e4);
    border: 1px solid #fecaca; border-radius: 16px;
    padding: 18px 20px; margin-bottom: 18px;
}
.invite-card__title { margin: 0 0 4px; font-size: 1.05rem; font-weight: 800; color: #b91c1c; }
.invite-card__sub { margin: 0 0 14px; font-size: 0.88rem; color: var(--color-text-soft); }
.invite-card__code-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.invite-card__code {
    font-family: monospace; font-size: 1.15rem; font-weight: 800; letter-spacing: 2px;
    background: #fff; border: 1px dashed #f87171; border-radius: 10px;
    padding: 8px 16px; color: #111;
}
.invite-card__copy {
    background: var(--color-primary); color: #fff; border: 0; border-radius: 10px;
    padding: 9px 18px; font-weight: 700; font-size: 0.9rem; cursor: pointer;
}
.invite-card__copy:hover { filter: brightness(0.95); }

/* Share-to-platform row under the code. */
.invite-card__share { margin-top: 14px; }
.invite-card__share-label {
    display: block; margin-bottom: 8px;
    font-size: 0.78rem; font-weight: 700; letter-spacing: 0.4px;
    text-transform: uppercase; color: var(--color-text-soft);
}
.invite-card__share-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.invite-share {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0;
    border: 0; border-radius: 50%; cursor: pointer; color: #fff;
    transition: transform 0.12s ease, filter 0.12s ease;
}
.invite-share:hover  { filter: brightness(1.08); transform: translateY(-2px); }
.invite-share:active { transform: translateY(0); }
.invite-share svg    { display: block; }
.invite-share--wa   { background: #25d366; }
.invite-share--fb   { background: #1877f2; }
.invite-share--x    { background: #000; }
.invite-share--tg   { background: #229ed9; }
.invite-share--mail { background: #ea4335; }
.invite-share--sms  { background: #16a34a; }
.invite-share--more { background: #6b7280; }

/* ── Order-history filter — search bar + filter-icon → bottom sheet ──── */
.ordf { margin-bottom: 16px; }
.ordf__bar { display: flex; gap: 10px; align-items: center; }
.ordf__search {
    flex: 1; display: flex; align-items: center; gap: 8px;
    background: #fff; border: 1.5px solid var(--color-border); border-radius: 12px; padding: 0 12px;
}
.ordf__search:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 4px var(--color-primary-soft); }
.ordf__search-ic { color: var(--color-text-soft); flex: 0 0 auto; }
.ordf__search-input { flex: 1; border: 0; outline: none; background: transparent; padding: 11px 2px; font: inherit; min-width: 0; }
.ordf__filter-btn {
    position: relative; flex: 0 0 auto;
    width: 46px; height: 46px; border-radius: 12px;
    border: 1.5px solid var(--color-border); background: #fff; color: var(--color-text);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    transition: border-color .14s ease, background .14s ease, color .14s ease;
}
.ordf__filter-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.ordf__filter-btn.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.ordf__dot { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-warn); border: 1.5px solid #fff; }

/* Bottom-sheet popup */
.ordf-sheet { position: fixed; inset: 0; z-index: var(--z-dialog, 1200); }
.ordf-sheet__backdrop { position: absolute; inset: 0; background: rgba(15,17,21,.45); }
.ordf-sheet__panel {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: #fff; border-radius: 20px 20px 0 0; box-shadow: var(--shadow-3);
    padding: 8px 16px calc(18px + env(safe-area-inset-bottom)); max-height: 88vh; overflow-y: auto; overflow-x: hidden;
    animation: ordf-slide .22s ease;
}
@keyframes ordf-slide { from { transform: translateY(100%); } to { transform: translateY(0); } }
.ordf-sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 10px 0 14px; }
.ordf-sheet__title { font-size: 1.1rem; font-weight: 800; }
.ordf-sheet__close { border: 0; background: var(--color-bg-alt); width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--color-text-muted); }
.ordf-sheet__close:hover { background: var(--color-border-soft); }
.ordf-sheet__label { display: block; font-size: 0.82rem; font-weight: 700; color: var(--color-text-muted); margin: 0 0 8px; }
.ordf-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.ordf-chip { position: relative; cursor: pointer; }
.ordf-chip input { position: absolute; opacity: 0; pointer-events: none; }
.ordf-chip span {
    display: inline-block; padding: 9px 16px; border-radius: 999px;
    border: 1.5px solid var(--color-border); font-size: 0.88rem; font-weight: 600; color: var(--color-text-muted); background: #fff;
}
.ordf-chip.is-on span, .ordf-chip input:checked + span {
    background: var(--color-primary-soft); border-color: var(--color-primary); color: var(--color-primary);
}
.ordf-sheet__dates { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 6px; min-width: 0; }
/* Grid children must be allowed to shrink (default is min-width:auto) or
   the wide native date input forces the column past the panel edge. */
.ordf-sheet__dates > div { min-width: 0; }
.ordf-sheet__date {
    width: 100%; min-width: 0; box-sizing: border-box;
    border: 1.5px solid var(--color-border); border-radius: 10px;
    padding: 11px 10px; font: inherit; background: #fff;
}
.ordf-sheet__date:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 4px var(--color-primary-soft); }
.ordf-sheet__foot { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.ordf-sheet__clear { flex: 0 0 auto; font-weight: 700; font-size: 0.9rem; color: var(--color-text-muted); padding: 12px 8px; }
.ordf-sheet__clear:hover { color: var(--color-primary); }
.ordf-sheet__apply {
    flex: 1; background: var(--color-primary); color: #fff; border: 0; border-radius: 12px;
    padding: 14px 18px; font-weight: 800; font-size: 0.95rem; cursor: pointer;
}
.ordf-sheet__apply:hover { filter: brightness(1.04); }
body.ordf-open { overflow: hidden; }

/* On wider screens, anchor the sheet as a centered card rather than a
   full-width bottom bar so it doesn't look stretched. */
@media (min-width: 768px) {
    .ordf-sheet__panel { left: 50%; right: auto; bottom: 50%; transform: translate(-50%, 50%); width: 440px; max-width: calc(100vw - 32px); border-radius: 18px; animation: none; }
}