/*!
 * Ezi Market — Mobile-first shell (Facebook Marketplace style)
 * Loaded AFTER tokens.css and the existing style.css.
 *
 * Goals:
 *   • Eliminate horizontal overflow on every viewport.
 *   • Provide a bottom-nav, install banner, and bottom-sheet primitives.
 *   • Keep desktop layout untouched (>= 992px).
 *   • Respect iOS safe-area insets so the bottom nav never sits behind the
 *     home indicator and the top bar never hides under the notch.
 */

/* ─── Global no-overflow + fluid base ────────────────────────── */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}
body {
    font-family: var(--ezi-font);
    font-size: var(--ezi-text-md);
    overflow-wrap: break-word;
    word-break: normal;
    background: var(--ezi-surface-muted);
    color: var(--ezi-ink-800);
}
img, video, canvas, svg {
    max-width: 100%;
    height: auto;
    display: block;
}
/*
 * Avatars / circular images: defeat the global `height:auto` above so
 * <img class="rounded-circle" width="N" height="N"> renders as an
 * actual circle instead of an ellipse, without affecting any other
 * image. We only target rounded-circle imgs that declare an explicit
 * pixel size via HTML attributes — every other image is left alone.
 */
img.rounded-circle[width][height] {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
}
/* Sidebar / drawer avatars that wrap a div around the img also need
 * the inner img to fill the sized parent and cover-crop. These wrappers
 * already define their own width/height, so this is safe. */
.sa-sidebar-avatar > img,
.mobile-menu-avatar > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
table {
    max-width: 100%;
}
.ezi-no-x { overflow-x: hidden; }
.ezi-clamp-1, .ezi-clamp-2, .ezi-clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}
.ezi-clamp-1 { -webkit-line-clamp: 1; line-clamp: 1; }
.ezi-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.ezi-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }
.ezi-break { overflow-wrap: anywhere; word-break: break-word; }

/* ─── Mobile safe-area padding helpers ───────────────────────── */
.ezi-safe-top    { padding-top: max(var(--ezi-space-2), var(--ezi-sat)); }
.ezi-safe-bottom { padding-bottom: max(var(--ezi-space-2), var(--ezi-sab)); }

/* ─── Container hardening ───────────────────────────────────── */
.container, .container-fluid, .container-xl, .container-lg, .container-md, .container-sm {
    max-width: 100%;
}
@media (min-width: 992px) {
    .container { max-width: var(--ezi-container-max); }
}

/* ─── Mobile <main> spacing: leave room for bottom nav + safe area */
main { padding-bottom: 24px; }
@media (max-width: 991.98px) {
    main {
        padding-bottom: calc(var(--ezi-bottomnav-h) + var(--ezi-sab) + 16px);
    }
    /* Prevent FAB-like content sticky bottom bars from being hidden too */
    .ezi-sticky-cta {
        bottom: calc(var(--ezi-bottomnav-h) + var(--ezi-sab) + 12px);
    }
}

/* ─── Bottom Navigation (mobile only) ────────────────────────── */
.ezi-bottom-nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: var(--ezi-z-bottomnav);
    display: none;
    background: var(--ezi-surface);
    border-top: 1px solid var(--ezi-divider);
    box-shadow: 0 -8px 24px rgba(15, 23, 42, .06);
    padding-bottom: var(--ezi-sab);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
}
.ezi-bottom-nav__inner {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: stretch;
    height: var(--ezi-bottomnav-h);
}
.ezi-bottom-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-decoration: none !important;
    color: var(--ezi-ink-500);
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    position: relative;
    padding: 6px 4px;
    transition: color .15s;
    min-width: 0;
}
.ezi-bottom-nav__item i { font-size: 1.35rem; }
.ezi-bottom-nav__item span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ezi-bottom-nav__item.is-active,
.ezi-bottom-nav__item:focus,
.ezi-bottom-nav__item:hover { color: var(--ezi-red-500); }
.ezi-bottom-nav__item .ezi-bottom-nav__badge {
    position: absolute;
    top: 4px;
    right: 18%;
    background: var(--ezi-danger);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 999px;
    padding: 0 4px;
    line-height: 16px;
    text-align: center;
}
.ezi-bottom-nav__sell {
    transform: translateY(-12px);
    background: linear-gradient(135deg, var(--ezi-red-500), var(--ezi-red-600));
    color: #fff !important;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    margin: 0 auto;
    align-self: center;
    box-shadow: 0 6px 16px rgba(216, 35, 42, .35);
}
.ezi-bottom-nav__sell i { font-size: 1.5rem; }

@media (max-width: 991.98px) {
    .ezi-bottom-nav { display: block; }
}

/* ─── Bottom sheet (replaces modal on mobile) ─────────────────── */
.ezi-sheet {
    position: fixed;
    inset: auto 0 0 0;
    z-index: var(--ezi-z-sheet);
    background: var(--ezi-surface);
    border-radius: 22px 22px 0 0;
    box-shadow: var(--ezi-shadow-pop);
    transform: translateY(100%);
    transition: transform .28s cubic-bezier(.22,1,.36,1);
    max-height: 92dvh;
    overflow: auto;
    padding-bottom: max(16px, var(--ezi-sab));
}
.ezi-sheet.is-open { transform: translateY(0); }
.ezi-sheet__handle {
    width: 44px; height: 4px;
    background: var(--ezi-ink-200);
    border-radius: 999px;
    margin: 10px auto 6px;
}
.ezi-sheet__title {
    font-size: var(--ezi-text-lg);
    font-weight: 700;
    padding: 6px 20px 12px;
}
.ezi-sheet__body { padding: 0 20px 16px; }
.ezi-sheet__backdrop {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, .55);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
    z-index: calc(var(--ezi-z-sheet) - 1);
}
.ezi-sheet__backdrop.is-open { opacity: 1; pointer-events: auto; }

/* ─── PWA install banner ─────────────────────────────────────── */
.ezi-install-banner {
    position: fixed;
    left: 12px; right: 12px;
    bottom: calc(var(--ezi-bottomnav-h) + var(--ezi-sab) + 12px);
    z-index: var(--ezi-z-banner);
    background: var(--ezi-surface);
    border: 1px solid var(--ezi-border);
    border-radius: var(--ezi-radius-lg);
    box-shadow: var(--ezi-shadow-3);
    padding: 12px 14px;
    display: none;
    align-items: center;
    gap: 12px;
}
.ezi-install-banner.is-visible { display: flex; }
.ezi-install-banner__icon {
    width: 36px; height: 36px;
    background: linear-gradient(135deg, var(--ezi-red-500), var(--ezi-red-700));
    color: #fff;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.ezi-install-banner__text {
    flex: 1;
    font-size: var(--ezi-text-sm);
    line-height: 1.3;
    color: var(--ezi-ink-800);
    overflow-wrap: anywhere;
}
.ezi-install-banner__cta,
.ezi-install-banner__dismiss {
    font-size: var(--ezi-text-sm);
    border-radius: var(--ezi-radius-md);
    padding: 6px 12px;
    border: 0;
    cursor: pointer;
}
.ezi-install-banner__cta {
    background: var(--ezi-red-500);
    color: #fff;
}
.ezi-install-banner__dismiss {
    background: transparent;
    color: var(--ezi-ink-500);
}

@media (min-width: 992px) {
    .ezi-install-banner {
        bottom: 24px;
        right: 24px;
        left: auto;
        max-width: 380px;
    }
}

/* ─── Offline banner ─────────────────────────────────────────── */
.ezi-offline-banner {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: var(--ezi-z-banner);
    padding: 6px 12px;
    padding-top: max(6px, var(--ezi-sat));
    background: var(--ezi-warn);
    color: #1f2937;
    font-size: var(--ezi-text-sm);
    text-align: center;
    transform: translateY(-100%);
    transition: transform .25s;
}
body.is-offline .ezi-offline-banner { transform: translateY(0); }

/* ─── Consent banner / preferences ───────────────────────────── */
.ezi-consent {
    position: fixed;
    left: 12px; right: 12px;
    bottom: 12px;
    z-index: var(--ezi-z-banner);
    background: var(--ezi-surface);
    border: 1px solid var(--ezi-border);
    border-radius: var(--ezi-radius-lg);
    box-shadow: var(--ezi-shadow-3);
    padding: 16px;
    display: none;
}
.ezi-consent.is-visible { display: block; }
.ezi-consent__title {
    font-weight: 700;
    margin-bottom: 6px;
    font-size: var(--ezi-text-lg);
}
.ezi-consent__body {
    font-size: var(--ezi-text-sm);
    color: var(--ezi-ink-700);
    margin-bottom: 12px;
}
.ezi-consent__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.ezi-consent__actions .btn {
    flex: 1 1 120px;
}
.ezi-consent__btn {
    padding: 10px 14px;
    border-radius: var(--ezi-radius-md);
    font-weight: 600;
    border: 1px solid var(--ezi-border);
    background: var(--ezi-surface);
    color: var(--ezi-ink-800);
    cursor: pointer;
    font-size: var(--ezi-text-sm);
    flex: 1 1 120px;
}
.ezi-consent__btn--primary {
    background: var(--ezi-red-500);
    color: #fff;
    border-color: var(--ezi-red-500);
}
.ezi-consent__btn--ghost {
    background: transparent;
}
.ezi-consent__cats {
    display: grid;
    gap: 8px;
    margin: 8px 0 12px;
}
.ezi-consent__cat {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: var(--ezi-surface-muted);
    border-radius: var(--ezi-radius-md);
    border: 1px solid var(--ezi-divider);
}
.ezi-consent__cat input[type="checkbox"] {
    width: 18px; height: 18px; accent-color: var(--ezi-red-500);
}
.ezi-consent__cat label {
    flex: 1;
    font-size: var(--ezi-text-sm);
    line-height: 1.3;
    margin: 0;
}
.ezi-consent__cat small {
    color: var(--ezi-ink-500);
    display: block;
    margin-top: 2px;
}
@media (min-width: 768px) {
    .ezi-consent {
        max-width: 460px;
        left: auto;
        right: 20px;
        bottom: 20px;
    }
}

/* ─── Card grid with object-fit covers ───────────────────────── */
.ezi-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ezi-grid-gap);
}
@media (min-width: 640px)  { .ezi-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 992px)  { .ezi-card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .ezi-card-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.ezi-card {
    background: var(--ezi-surface);
    border: 1px solid var(--ezi-divider);
    border-radius: var(--ezi-radius-md);
    overflow: hidden;
    box-shadow: var(--ezi-shadow-1);
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.ezi-card__media {
    aspect-ratio: 1 / 1;
    background: var(--ezi-ink-100);
    overflow: hidden;
}
.ezi-card__media img,
.ezi-card__media video {
    width: 100%; height: 100%;
    object-fit: cover;
}
.ezi-card__body { padding: 8px 10px; }
.ezi-card__title {
    font-size: var(--ezi-text-sm);
    font-weight: 600;
    color: var(--ezi-ink-800);
    margin: 0 0 2px;
}
.ezi-card__price {
    font-size: var(--ezi-text-md);
    font-weight: 700;
    color: var(--ezi-ink-900);
}
.ezi-card__meta {
    font-size: var(--ezi-text-xs);
    color: var(--ezi-ink-500);
}

/* ─── Table → card stacking on phones ─────────────────────────── */
@media (max-width: 640px) {
    table.ezi-stacked thead { display: none; }
    table.ezi-stacked, table.ezi-stacked tbody,
    table.ezi-stacked tr, table.ezi-stacked td {
        display: block;
        width: 100%;
    }
    table.ezi-stacked tr {
        background: var(--ezi-surface);
        border: 1px solid var(--ezi-divider);
        border-radius: var(--ezi-radius-md);
        padding: 8px 12px;
        margin-bottom: 8px;
    }
    table.ezi-stacked td {
        padding: 6px 0;
        border: 0;
        overflow-wrap: anywhere;
    }
    table.ezi-stacked td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 0.78rem;
        color: var(--ezi-ink-500);
        display: block;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }
}

/* ─── Modal-to-sheet on mobile ──────────────────────────────── */
@media (max-width: 575.98px) {
    .modal.fade .modal-dialog {
        transform: translate(0, 100%);
        margin: 0;
        position: fixed;
        bottom: 0;
        width: 100%;
        max-width: 100%;
    }
    .modal.show .modal-dialog { transform: none; }
    .modal-content {
        border-radius: 22px 22px 0 0;
        border: 0;
    }
}

/* ─── Mobile search bar — make sticky under top nav ──────────── */
.ebs-mobile-search-bar {
    position: sticky;
    top: var(--ezi-topbar-h);
    z-index: calc(var(--ezi-z-topbar) - 1);
    background: var(--ezi-surface);
    padding: 8px 0;
    border-bottom: 1px solid var(--ezi-divider);
}

/* ─── Utility focus ring (a11y / AODA) ───────────────────────── */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible,
[role="button"]:focus-visible {
    outline: 3px solid rgba(216, 35, 42, .35);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ─── Reduce-motion respect ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}

/* ─── Dark mode polish ──────────────────────────────────────── */
[data-bs-theme="dark"] {
    background: var(--ezi-surface);
    color: var(--ezi-ink-800);
}
[data-bs-theme="dark"] .ezi-card { background: var(--ezi-surface); }
[data-bs-theme="dark"] .ezi-card__media { background: rgba(255,255,255,.05); }
[data-bs-theme="dark"] .ezi-bottom-nav { background: #0f0f1a; }
[data-bs-theme="dark"] .ezi-consent  { background: #161625; color: #e5e5f0; }
[data-bs-theme="dark"] .ezi-install-banner { background: #161625; color: #e5e5f0; }

/* ════════════════════════════════════════════════════════════════════
   Mobile-only compact search bar (header)
   Wraps to its own row under the brand on < lg screens.
   All sizing uses clamp() so it fits 320px phones up to ~991px tablets
   without ever overflowing or wrapping internally.
   ════════════════════════════════════════════════════════════════════ */
.mobile-search-row {
    /* The .container is flex-wrap:wrap (Bootstrap navbar default), so a
       w-100 child drops to its own line. Compact paddings to keep the
       pill tucked tight under the brand without pushing the hero. */
    padding: clamp(4px, 1vw, 6px) clamp(2px, 1vw, 6px) clamp(2px, 0.8vw, 4px);
    margin-top: clamp(2px, 0.8vw, 4px);
    display: flex;
    justify-content: center;       /* centers the capped-width pill */
}

.mobile-search {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 420px;              /* never stretches edge-to-edge on tablets */
    height: clamp(30px, 7.8vw, 34px);
    padding: 0 4px 0 8px;          /* a touch more room around the icon */
    gap: 4px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 999px;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.05),
        0 4px 12px -6px rgba(15, 23, 42, 0.18);
    transition: box-shadow .18s ease, border-color .18s ease;
    /* Prevent the input from forcing horizontal overflow on tiny screens */
    min-width: 0;
}
.mobile-search:focus-within {
    border-color: rgba(99, 102, 241, 0.5);
    box-shadow:
        0 0 0 4px rgba(99, 102, 241, 0.15),
        0 6px 18px -8px rgba(99, 102, 241, 0.4);
}

.mobile-search-input {
    flex: 1 1 auto;
    min-width: 0;            /* critical for flex children that contain text */
    border: 0;
    outline: 0;
    background: transparent;
    color: #1f2937;
    font-size: clamp(0.78rem, 3.2vw, 0.88rem);
    line-height: 1.2;
    padding: 0 6px;
    -webkit-appearance: none;
    appearance: none;
}
.mobile-search-input::placeholder {
    color: #94a3b8;
    opacity: 1;
    /* Truncate placeholder if the screen is unusually narrow */
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
/* Strip the iOS/Edge built-in clear "x" so our layout stays clean */
.mobile-search-input::-webkit-search-cancel-button,
.mobile-search-input::-webkit-search-decoration { -webkit-appearance: none; }

.mobile-search-submit,
.mobile-search-mic {
    flex: 0 0 auto;
    width: clamp(22px, 6vw, 26px);
    height: clamp(22px, 6vw, 26px);
    border: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: transparent;
    transition: transform .15s ease, background .15s ease, color .15s ease;
}
.mobile-search-submit {
    color: #6b7280;                      /* ghost icon, no big colored disc */
    font-size: clamp(0.85rem, 4vw, 1rem);
}
.mobile-search-submit:hover,
.mobile-search-submit:active {
    color: #4338ca;
    transform: scale(0.92);
}
.mobile-search-mic {
    color: #6b7280;
    font-size: clamp(0.85rem, 4vw, 1rem);
}
.mobile-search-mic:hover,
.mobile-search-mic:active {
    color: #4338ca;
    transform: scale(0.92);
}
.mobile-search-mic.listening {
    background: #ef4444;
    color: #fff;
    animation: mobileMicPulse 1.1s ease-in-out infinite;
}
@keyframes mobileMicPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); }
    50%      { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
}

/* When the navbar is transparent (hero pages), give the pill a touch
   of backdrop blur so it reads against the imagery without fighting it. */
.navbar-transparent .mobile-search {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
}

/* Dark theme */
[data-bs-theme="dark"] .mobile-search {
    background: rgba(30, 30, 46, 0.92);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.4),
        0 6px 18px -8px rgba(0, 0, 0, 0.6);
}
[data-bs-theme="dark"] .mobile-search-input { color: #e5e5f0; }
[data-bs-theme="dark"] .mobile-search-input::placeholder { color: #6b7280; }
[data-bs-theme="dark"] .mobile-search-submit,
[data-bs-theme="dark"] .mobile-search-mic { color: #9ca3af; }
[data-bs-theme="dark"] .mobile-search-submit:hover,
[data-bs-theme="dark"] .mobile-search-submit:active,
[data-bs-theme="dark"] .mobile-search-mic:hover,
[data-bs-theme="dark"] .mobile-search-mic:active { color: #c7d2fe; }

/* Tiny screens: shorten the placeholder so it never spills */
@media (max-width: 360px) {
    .mobile-search-input::placeholder { content: 'Search'; }
}
/* Reduced-motion users get no scale animations */
@media (prefers-reduced-motion: reduce) {
    .mobile-search-submit,
    .mobile-search-mic { transition: none; }
    .mobile-search-submit:hover,
    .mobile-search-submit:active,
    .mobile-search-mic:hover,
    .mobile-search-mic:active { transform: none; }
}