:root {
    --accent: #2457E6;        /* Aziza Blue */
    --accent-dark: #1a45c4;
    --navy: #012257;          /* Aziza Logo Navy */
    --lime: #9FE704;          /* Aziza Logo Lime */
    --lime-dark: #84C400;
    --accent-soft: #e8effe;
    --lime-soft: #f3fbdc;
    --ink: #0A2148;           /* Midnight Navy */
    --ink-2: #1e3050;
    --muted: #667085;         /* Slate Grey */
    --line: #e4e9f0;
    --bg: #F7F9FC;            /* Cloud White */
    --radius: 14px;
    --shadow-sm: 0 1px 3px rgba(16, 24, 40, .08);
    --shadow-md: 0 8px 24px rgba(16, 24, 40, .10);
    --shadow-lg: 0 16px 40px rgba(16, 24, 40, .14);
}

body {
    font-family: "Plus Jakarta Sans", "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    background: var(--bg);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6, .section-title, .brand-logo { letter-spacing: -.02em; }
main { min-height: 60vh; }
html, body { overflow-x: clip; max-width: 100%; }
img { max-width: 100%; }
input, select, textarea { font-size: 16px !important; } /* prevents iOS zoom on focus */
a { color: var(--accent); }
a:hover { color: var(--accent-dark); }

/* ---------- Accent utilities ---------- */
.text-accent { color: var(--accent) !important; }
.btn-accent {
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-bg: var(--accent-dark);
    --bs-btn-hover-border-color: var(--accent-dark);
    --bs-btn-active-bg: var(--accent-dark);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    font-weight: 600;
}
.bg-accent { background: var(--accent) !important; }
.bg-lime { background: var(--lime) !important; color: var(--ink) !important; }
.verified-badge {
    background: var(--lime); color: var(--ink);
    font-weight: 700; font-size: .68rem;
    border-radius: 8px; padding: 4px 8px;
}
.verified-icon { color: #1db954; font-size: .9rem; }
.fav-heart {
    position: absolute; top: 8px; right: 8px;
    width: 30px; height: 30px; border-radius: 50%;
    background: rgba(255,255,255,.92); display: grid; place-items: center;
    color: var(--muted); font-size: .85rem;
    box-shadow: var(--shadow-sm);
}
.bg-accent-subtle { background: var(--accent-soft) !important; }
.btn-wa {
    background: #25D366;
    border-color: #25D366;
    color: #fff;
    font-weight: 700;
}
.btn-wa:hover, .btn-wa:focus { background: #1fb457; border-color: #1fb457; color: #fff; }
.btn-lime {
    --bs-btn-bg: var(--lime);
    --bs-btn-border-color: var(--lime);
    --bs-btn-hover-bg: var(--lime-dark);
    --bs-btn-hover-border-color: var(--lime-dark);
    --bs-btn-color: var(--ink);
    --bs-btn-hover-color: var(--ink);
    --bs-btn-active-color: var(--ink);
    font-weight: 700;
}
.btn-outline-accent {
    color: var(--accent);
    border-color: var(--accent);
    font-weight: 600;
}
.btn-outline-accent:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.text-gradient {
    background: linear-gradient(90deg, var(--lime), #e0ff9a);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---------- Navbar (white, brand style) ---------- */
.glass-nav {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    transition: box-shadow .2s ease;
}
.glass-nav.scrolled {
    box-shadow: 0 4px 20px rgba(16, 24, 40, .14);
}
.brand-logo {
    font-weight: 800;
    font-size: 1.6rem;
    color: var(--ink) !important;
    letter-spacing: -1px;
    text-decoration: none;
}
.brand-logo .lz { color: var(--lime); }
.nav-search { flex: 1; max-width: 460px; }
.nav-search .form-control {
    border-radius: 24px 0 0 24px;
    border: 1.5px solid var(--line);
    border-right: none;
    background: var(--bg);
}
.nav-search .btn { border-radius: 0 24px 24px 0; }
.glass-nav .nav-link { color: var(--muted); font-weight: 500; }
.glass-nav .nav-link:hover, .glass-nav .nav-link:focus { color: var(--accent); }
.glass-nav .navbar-toggler { border-color: var(--line); }
.glass-nav .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%2314213D' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
.btn-post { border-radius: 10px; padding: .5rem 1.1rem; }
.mobile-search .input-group-text { border-radius: 24px 0 0 24px; border-color: #e4e7ec; }
.mobile-search .form-control { border-radius: 0 24px 24px 0; border-color: #e4e7ec; }
.nav-bell { position: relative; color: var(--ink); font-size: 1.2rem; padding: .35rem .5rem; }
.nav-bell .unread-dot {
    position: absolute; top: 0; right: -2px;
    background: var(--lime);
    color: var(--ink);
    font-size: .62rem; font-weight: 800;
    min-width: 17px; height: 17px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 4px;
}
.nav-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    color: #fff; font-weight: 700; font-size: .85rem;
    display: inline-flex; align-items: center; justify-content: center;
}

/* ---------- Hero (rounded banner card) ---------- */
.hero { padding: 28px 16px 8px; }
.hero-inner {
    position: relative;
    background:
        radial-gradient(700px 320px at 12% -10%, rgba(199, 243, 107, .25), transparent 60%),
        radial-gradient(600px 300px at 92% 0%, rgba(36, 87, 230, .45), transparent 60%),
        linear-gradient(150deg, var(--ink), var(--ink-2) 75%);
    color: #fff;
    border-radius: 28px;
    padding: clamp(48px, 8vw, 88px) 24px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}
.hero-inner::after {
    content: "";
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
    background-size: 22px 22px;
    pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }
.hero-title {
    font-weight: 800;
    font-size: clamp(1.9rem, 4.5vw, 3.2rem);
    letter-spacing: -.03em;
}
.hero-sub { color: rgba(255, 255, 255, .72); margin-bottom: 2rem; font-size: 1.05rem; }
.hero-search { max-width: 680px; }
.hero-search .input-group { border-radius: 30px; overflow: hidden; }
.hero-search-pill .input-group-text, .hero-search-pill .form-control { padding-left: 18px; }
.hero-search .form-control:focus, .hero-search .form-select:focus {
    box-shadow: none; border-color: transparent;
}
.hero-cta { border-radius: 30px; padding: 12px 32px; box-shadow: 0 8px 24px rgba(36,87,230,.5); }
.text-lime { color: var(--lime) !important; }
.see-all { font-size: .85rem; font-weight: 600; color: var(--accent); text-decoration: none; }
.see-all:hover { color: var(--accent-dark); }

/* ---------- Sections ---------- */
.section-title {
    font-weight: 800;
    letter-spacing: -.02em;
    font-size: 1.35rem;
    position: relative;
    padding-left: 14px;
}
.section-title::before {
    content: "";
    position: absolute;
    left: 0; top: 4px; bottom: 4px;
    width: 5px;
    border-radius: 4px;
    background: linear-gradient(180deg, var(--accent), var(--lime));
}
.btn { border-radius: 10px; }
.btn-lg { border-radius: 12px; }
.card { border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-sm); }
.card:hover { box-shadow: var(--shadow-md); }

/* ---------- Category cards ---------- */
.cat-card {
    display: block;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px 12px;
    text-align: center;
    color: var(--ink);
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cat-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent);
    box-shadow: var(--shadow-md);
    color: var(--ink);
    text-decoration: none;
}
.cat-icon {
    display: inline-flex;
    width: 52px; height: 52px;
    align-items: center; justify-content: center;
    font-size: 1.6rem;
    border-radius: 16px;
    background: var(--accent-soft);
    margin-bottom: 10px;
    transition: background .18s ease, transform .18s ease;
}
.cat-card:hover .cat-icon { background: rgba(159,231,4,.35); transform: scale(1.08); }
.cat-name { display: block; font-weight: 600; font-size: .88rem; }
.cat-count { display: block; color: var(--muted); font-size: .75rem; margin-top: 3px; }

/* ---------- Ad cards ---------- */
.ad-card {
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    color: var(--ink);
    background: #fff;
    transition: transform .18s ease, box-shadow .18s ease;
}
.ad-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); color: var(--ink); }
.ad-card::after {
    content: "Voir →";
    position: absolute;
    right: 12px; bottom: 12px;
    font-size: .72rem; font-weight: 700;
    color: var(--accent);
    opacity: 0;
    transition: opacity .18s ease;
}
.ad-card { position: relative; }
.ad-card:hover::after { opacity: 1; }
.ad-card:focus-visible, .cat-card:focus-visible, .bn-item:focus-visible {
    outline: 3px solid rgba(3,166,74,.45);
    outline-offset: 2px;
}
.ad-img {
    position: relative;
    height: 170px;
    background: linear-gradient(135deg, var(--accent-soft), var(--lime-soft));
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.ad-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}
.ad-card:hover .ad-img img { transform: scale(1.06); }
.ad-img-placeholder { font-size: 3.2rem; }
.ad-img-placeholder.big { font-size: 7rem; }
.ad-badge { position: absolute; top: 10px; left: 10px; }
.ad-price { color: var(--accent); font-weight: 800; font-size: 1.05rem; }
.ad-price.big { font-size: 1.7rem; }
.ad-title {
    margin-top: 4px;
    font-size: .9rem;
    color: var(--ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.4em;
}
.ad-meta { color: var(--muted); font-size: .78rem; margin-top: 8px; }

/* ---------- Filters / cards ---------- */
.card { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.filter-card { top: 90px; }
.form-label { font-weight: 600; font-size: .83rem; color: var(--ink-2); }
.form-control, .form-select {
    border-radius: 9px;
    border-color: var(--line);
}
.form-control:focus, .form-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(36, 87, 230, .1);
}

/* ---------- Ad detail ---------- */
.ad-gallery {
    background: linear-gradient(135deg, var(--accent-soft), var(--lime-soft));
    border-radius: var(--radius);
    min-height: 380px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.ad-gallery img { width: 100%; height: 100%; max-height: 520px; object-fit: cover; }
.ad-gallery .carousel-item { height: min(520px, 60vw); }
.ad-gallery .carousel-item img { height: 100%; object-fit: cover; }
.ad-desc-text { line-height: 1.7; color: #3d454e; margin-bottom: 0; }
.price-card { border-left: 4px solid var(--accent); }
.avatar {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    color: #fff;
    font-weight: 800; font-size: 1.2rem;
    display: flex; align-items: center; justify-content: center;
}
.avatar.lg { width: 88px; height: 88px; font-size: 2.4rem; border: 3px solid rgba(255,255,255,.35); margin-left: auto; margin-right: auto; }
.wizard-steps { display: flex; align-items: center; justify-content: space-between; }
.wstep { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: .7rem; color: var(--muted); font-weight: 600; }
.wstep span {
    width: 30px; height: 30px; border-radius: 50%;
    background: #e8ecf4; color: var(--muted);
    display: grid; place-items: center; font-weight: 700; font-size: .8rem;
    transition: all .2s;
}
.wstep.active span, .wstep.done span { background: var(--accent); color: #fff; }
.wstep.done span { background: var(--lime); color: var(--ink); }
.wstep.active { color: var(--accent); }
.wline { flex: 1; height: 2px; background: #e8ecf4; margin: 0 6px 14px; }
.wpanel { animation: fadeUp .3s ease; }
.profile-hero {
    background: linear-gradient(135deg, #1a2b52, var(--navy));
    border-radius: 20px; text-align: center; padding: 32px 20px;
    color: #fff;
}
.acct-verified {
    background: var(--lime); color: var(--ink);
    border-radius: 14px; padding: 12px 16px;
    font-weight: 700; font-size: .9rem;
    display: inline-flex; align-items: center; gap: 8px;
}
.account-menu .list-group-item { padding: 14px 18px; font-weight: 500; }
.bn-post i {
    background: var(--lime); color: var(--ink);
    width: 46px; height: 46px; border-radius: 50%;
    display: inline-grid; place-items: center;
    font-size: 1.3rem; margin-top: -20px;
    box-shadow: 0 4px 12px rgba(20,33,61,.25);
    border: 3px solid #fff;
}
.phone-number { text-align: center; font-size: 1.1rem; font-weight: 700; color: var(--accent); margin: 10px 0 0; }
.safety-card { background: var(--lime-soft); border-color: transparent; }
.breadcrumb { --bs-breadcrumb-divider-color: var(--muted); font-size: .88rem; }
.breadcrumb a { text-decoration: none; color: var(--muted); }
.breadcrumb a:hover { color: var(--accent); }

/* ---------- Auth ---------- */
.auth-card { max-width: 440px; border: none; box-shadow: var(--shadow-md); }
.auth-card.wide { max-width: 620px; }

/* ---------- Empty state ---------- */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--muted);
    background: #fff;
    border: 1px dashed var(--line);
    border-radius: 16px;
}
.empty-state i { font-size: 3rem; display: block; margin-bottom: 12px; opacity: .5; color: var(--accent); }

/* ---------- Flash ---------- */
.flash-alert { position: relative; z-index: 99; }

/* ---------- Footer ---------- */
.site-footer {
    background: linear-gradient(160deg, var(--ink), var(--ink-2));
    color: #aeb7c0;
    border-top: 3px solid var(--lime);
}
.site-footer .brand-logo { font-size: 1.5rem; }
.site-footer .brand-logo .lz { color: var(--lime); }
.footer-heading {
    color: #fff; font-weight: 700;
    font-size: .85rem; text-transform: uppercase;
    letter-spacing: .8px; margin-bottom: 14px;
}
.footer-link {
    display: block;
    color: #aeb7c0;
    text-decoration: none;
    margin-bottom: 9px;
    font-size: .9rem;
    transition: color .15s ease, transform .15s ease;
}
.footer-link:hover { color: var(--accent); transform: translateX(3px); }
.social-links a {
    display: inline-flex;
    width: 38px; height: 38px;
    align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    margin-right: 8px;
    transition: background .15s ease, transform .15s ease;
}
.social-links a:hover { background: var(--accent); transform: translateY(-3px); }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .08); font-size: .82rem; }

/* ---------- Trust strip ---------- */
.trust-strip {
    padding: 26px 0 10px;
    margin-bottom: 8px;
}
.trust-item {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 14px 16px;
    height: 100%;
    transition: transform .18s ease, border-color .18s ease;
}
.trust-item:hover { transform: translateY(-2px); border-color: var(--accent); }
.trust-item {
    display: flex;
    align-items: center;
    gap: 12px;
}
.trust-item i {
    font-size: 1.7rem;
    color: var(--accent);
    flex-shrink: 0;
}
.trust-item strong { display: block; font-size: .9rem; }
.trust-item small { color: var(--muted); font-size: .78rem; }

/* ---------- Back to top ---------- */
#backToTop {
    position: fixed;
    right: 18px; bottom: 88px;
    z-index: 1029;
    width: 44px; height: 44px;
    border: none; border-radius: 50%;
    background: var(--ink);
    color: #fff;
    font-size: 1.1rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
    box-shadow: var(--shadow-md);
}
#backToTop.show { opacity: .9; visibility: visible; transform: translateY(0); }
#backToTop:hover { background: var(--accent); }
@media (min-width: 768px) { #backToTop { bottom: 28px; } }

/* ---------- Auth card accent ---------- */
.auth-card { border-top: 4px solid var(--accent); border-radius: var(--radius); }

/* ---------- Smooth scroll ---------- */
html { scroll-behavior: smooth; }

/* ---------- Shop ---------- */
.shop-hero { padding: 24px 16px 0; }
.shop-hero > .container {
    background:
        radial-gradient(600px 260px at 15% -20%, rgba(199,243,107,.22), transparent 60%),
        radial-gradient(500px 260px at 92% 0%, rgba(36,87,230,.4), transparent 60%),
        linear-gradient(150deg, var(--ink), var(--ink-2));
    border-radius: 24px;
    padding: 36px 28px;
    box-shadow: var(--shadow-md);
}
.shop-avatar {
    width: 72px; height: 72px;
    border-radius: var(--radius);
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    color: #fff; font-weight: 800; font-size: 2rem;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.shop-meta { color: rgba(255,255,255,.7); font-size: .9rem; }
.shop-desc { color: rgba(255,255,255,.8); max-width: 720px; }

/* ---------- Mobile bottom navigation (app-like) ---------- */
.bottom-nav {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.bn-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 0 6px;
    color: var(--muted);
    font-size: .68rem;
    font-weight: 600;
    text-decoration: none;
    min-height: 52px;
}
.bn-item i { font-size: 1.25rem; }
.bn-item.active, .bn-item:active { color: var(--accent); }
.bn-post {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bn-post i {
    width: 46px; height: 46px;
    margin-top: -18px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    color: #fff;
    font-size: 1.35rem;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 16px rgba(36, 87, 230, .45);
    border: 3px solid #fff;
}
@media (max-width: 767.98px) {
    .site-footer { display: none !important; }
    #backToTop { display: none !important; }
    .bottom-nav { display: flex; }
    body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0)); }
    .site-footer { margin-bottom: 0; }
    .header-search { order: 3; }
    /* compact hero like the app promo card */
    .hero { padding: 12px 8px 4px; }
    .hero-inner { border-radius: 20px; padding: 32px 18px; text-align: left; }
    .hero-title { font-size: 1.55rem; }
    .hero-sub { font-size: .9rem; }
    .hero-search, .hero-cta { display: none; }
    .hero-arrow {
        display: inline-grid; place-items: center;
        width: 42px; height: 42px; border-radius: 50%;
        background: var(--lime); color: var(--ink);
        font-size: 1.15rem; margin-top: 14px;
        text-decoration: none;
    }
    .mobile-location { font-size: .9rem; }
    .mobile-location select { appearance: none; -webkit-appearance: none; outline: none; }
    /* compact category chips */
    .cat-card { padding: 14px 4px; border-radius: 14px; min-height: 44px; border: none; background: #eef1f6; }
    .cat-icon { width: 44px; height: 44px; font-size: 1.35rem; border-radius: 12px; margin-bottom: 6px; }
    .cat-name { font-size: .7rem; line-height: 1.15; }
    .cat-count { display: none; }
    .section-title { font-size: 1.15rem; padding-left: 12px; }
    .trust-strip { display: none; }
}

/* ---------- Favorites ---------- */
.fav-remove { position: absolute; top: 8px; right: 24px; z-index: 2; }

/* ---------- Messages ---------- */
.conv-list { overflow: hidden; }
.conv-list .list-group-item.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.thread-card { height: calc(100vh - 220px); min-height: 420px; display: flex; flex-direction: column; }
.thread-body { flex: 1; overflow-y: auto; background: var(--bg); }
.bubble {
    max-width: 75%;
    padding: 10px 14px;
    border-radius: 16px;
    margin-bottom: 8px;
    font-size: .92rem;
    line-height: 1.45;
    width: fit-content;
}
.bubble.me {
    margin-left: auto;
    background: var(--accent);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.bubble.them {
    background: #fff;
    border: 1px solid var(--line);
    border-bottom-left-radius: 4px;
}
.bubble small { display: block; font-size: .68rem; opacity: .65; margin-top: 3px; text-align: right; }
.bn-badge {
    position: absolute;
    top: 4px;
    margin-left: 14px;
    background: var(--lime);
    color: var(--ink);
    font-size: .6rem; font-weight: 800;
    min-width: 16px; height: 16px;
    border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 4px;
}
.bn-item { position: relative; }

/* ---------- Admin ---------- */
.admin-nav .nav-link { color: var(--ink); font-weight: 600; border-radius: 9px; }
.admin-nav .nav-link:hover { color: var(--accent); background: var(--accent-soft); }
.admin-nav .nav-link.active { background: var(--accent); color: #fff; }
.stat-card { border: none; box-shadow: var(--shadow-sm); }
.stat-icon { font-size: 1.6rem; }
.stat-value { font-size: 1.6rem; font-weight: 800; margin-top: 4px; }
.avatar.sm { width: 38px; height: 38px; font-size: 1rem; }

/* ---------- Animations ---------- */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ad-card, .cat-card { animation: fadeUp .4s ease both; }
.row > .col:nth-child(2) .ad-card, .row > .col:nth-child(2) .cat-card { animation-delay: .05s; }
.row > .col:nth-child(3) .ad-card, .row > .col:nth-child(3) .cat-card { animation-delay: .1s; }
.row > .col:nth-child(4) .ad-card, .row > .col:nth-child(4) .cat-card { animation-delay: .15s; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── Onboarding (mobile first-visit) ── */
.onboarding {
    position: fixed; inset: 0; z-index: 9999;
    background: var(--bg);
    display: none; flex-direction: column;
}
.onboarding.show { display: flex; }
.ob-slide {
    flex: 1; display: none; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 24px; text-align: center;
    animation: fadeUp .35s ease;
}
.ob-slide.active { display: flex; }
.ob-slide h2 { color: var(--ink); font-weight: 800; font-size: 1.5rem; margin-bottom: 10px; }
.ob-slide p { color: var(--muted); max-width: 300px; font-size: .95rem; }
.ob-splash {
    background: linear-gradient(160deg, #1a2b52, var(--navy));
    color: #fff;
}
.ob-splash .ob-logo { font-size: 3rem; font-weight: 800; color: #fff; }
.ob-splash .ob-logo .lz { color: var(--lime); }
.ob-tag { color: rgba(255,255,255,.8); margin-top: 6px; }
.ob-spinner {
    margin-top: 40px; width: 36px; height: 36px;
    border: 3px solid rgba(255,255,255,.2); border-top-color: var(--lime);
    border-radius: 50%; animation: obspin .8s linear infinite;
}
@keyframes obspin { to { transform: rotate(360deg); } }
.ob-skip {
    position: absolute; top: calc(14px + env(safe-area-inset-top,0)); right: 18px;
    background: none; border: none; color: var(--muted); font-weight: 600; font-size: .9rem;
}
.ob-art { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 36px; }
.ob-art.ob-single { display: flex; justify-content: center; }
.ob-hero-tile {
    width: 110px; height: 110px; border-radius: 24px;
    background: #e8ecf4; display: grid; place-items: center;
    font-size: 2.4rem; color: var(--accent);
    box-shadow: var(--shadow-sm);
}
.ob-hero-tile.big { width: 140px; height: 140px; font-size: 3.2rem; background: var(--lime); color: var(--ink); }
.ob-footer {
    padding: 20px 24px calc(24px + env(safe-area-inset-bottom,0));
    background: var(--bg);
}
.ob-dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 18px; }
.ob-dots span {
    width: 7px; height: 7px; border-radius: 50%;
    background: #d0d5dd; transition: all .25s;
}
.ob-dots span.active { width: 20px; border-radius: 4px; background: var(--accent); }
@media (min-width: 768px) { .onboarding { display: none !important; } }

/* Onboarding slide backgrounds + colored tiles */
.ob-slide { background: var(--bg); }
.ob-slide:not(.ob-splash)::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 46%;
    background: linear-gradient(160deg, var(--accent), var(--navy));
    border-radius: 0 0 40px 40px; z-index: 0;
}
.ob-slide > * { position: relative; z-index: 1; }
.ob-art { position: relative; z-index: 1; }
.ob-hero-tile { background: #fff; box-shadow: 0 8px 24px rgba(20,33,61,.18); }
.ob-art .ob-hero-tile:nth-child(1) { background:#dbe7ff; color:#2457E6; }
.ob-art .ob-hero-tile:nth-child(2) { background:#d8f5d0; color:#1db954; }
.ob-art .ob-hero-tile:nth-child(3) { background:#ffe3c2; color:#f79009; }
.ob-art .ob-hero-tile:nth-child(4) { background:#f5d9ff; color:#9a4fd8; }
.onboarding { flex-direction: column; }
.ob-slide { position: relative; }

/* Onboarding image + skip fix */
.ob-img-wrap {
    border-radius: 28px; overflow: hidden;
    width: min(78vw, 300px); margin-bottom: 34px;
    box-shadow: 0 16px 40px rgba(20,33,61,.22);
    position: relative; z-index: 1;
}
.ob-img { width: 100%; display: block; }
.ob-skip {
    position: absolute; top: calc(14px + env(safe-area-inset-top,0)); right: 18px;
    z-index: 5; background: rgba(255,255,255,.9); border: none;
    color: var(--ink); font-weight: 600; font-size: .85rem;
    padding: 6px 14px; border-radius: 20px;
}

/* ================= Auth screens (login / register / OTP / reset) ================= */
.auth-wrap { display: flex; justify-content: center; padding: 48px 16px 64px; }
.auth-panel {
    position: relative; width: 100%; max-width: 420px;
    background: #fff; border-radius: 24px; padding: 56px 32px 32px;
    box-shadow: 0 10px 40px rgba(20,33,61,.08);
    display: flex; flex-direction: column; text-align: center;
}
.auth-back {
    position: absolute; top: 16px; left: 16px; width: 40px; height: 40px;
    display: grid; place-items: center; border-radius: 50%;
    color: var(--ink); font-size: 1.2rem; text-decoration: none;
}
.auth-back:hover { background: var(--bg); color: var(--ink); }
.auth-logo { font-size: 2.4rem; font-weight: 800; color: var(--ink); letter-spacing: -1px; line-height: 1; margin-bottom: 18px; }
.auth-logo .lz { color: var(--lime); -webkit-text-stroke: 1px #9fcb3f; }
.auth-icon {
    width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%;
    display: grid; place-items: center; font-size: 1.6rem;
    background: rgba(36,87,230,.1); color: var(--accent);
}
.auth-icon-plain { background: none; font-size: 3rem; width: auto; height: auto; }
.auth-title { font-size: 1.45rem; font-weight: 800; color: var(--ink); margin-bottom: 6px; }
.auth-sub { color: var(--muted); font-size: .92rem; margin-bottom: 24px; }
.auth-panel form { text-align: left; }
.auth-field {
    position: relative; display: flex; align-items: center;
    background: #fff; border: 1.5px solid #E4E7EC; border-radius: 12px;
    margin-bottom: 14px; transition: border-color .15s, box-shadow .15s;
}
.auth-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(36,87,230,.1); }
.auth-field > i { padding: 0 4px 0 14px; color: var(--muted); font-size: 1.05rem; }
.auth-field input {
    flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
    padding: 14px 12px 14px 8px; font-size: .95rem; color: var(--ink);
}
.auth-eye { border: 0; background: none; color: var(--muted); padding: 0 14px; height: 100%; font-size: 1.05rem; }
.auth-eye:hover { color: var(--accent); }
.auth-btn { width: 100%; padding: 14px; border-radius: 12px; font-weight: 700; font-size: 1rem; }
.auth-panel .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.auth-foot { margin: 22px 0 0; font-size: .9rem; color: var(--muted); }
.auth-foot a { color: var(--accent); font-weight: 600; text-decoration: none; }
.auth-foot-bottom { margin-top: 40px; }
.otp-boxes { display: flex; justify-content: center; gap: 8px; margin-bottom: 22px; }
.otp-boxes input {
    width: 46px; height: 54px; text-align: center; font-size: 1.4rem; font-weight: 700;
    border: 1.5px solid #E4E7EC; border-radius: 10px; color: var(--ink); outline: 0;
}
.otp-boxes input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(36,87,230,.1); }
.otp-resend { border: 0; background: none; color: var(--accent); font-weight: 600; font-size: .9rem; }
.otp-resend:disabled { color: var(--muted); }
.otp-resend #otpTimer { color: var(--accent); }

.auth-row {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
    gap: 10px 12px; margin: 4px 0 24px; font-size: .88rem;
}
.auth-row a { color: var(--accent); font-weight: 600; text-decoration: none; }
.auth-check { display: flex; align-items: center; gap: 10px; color: var(--ink); cursor: pointer; font-size: .88rem; min-height: 44px; }
.auth-check .form-check-input { width: 20px; height: 20px; flex-shrink: 0; border-radius: 6px; border: 1.5px solid #D0D5DD; }
.auth-terms { margin-bottom: 20px; line-height: 1.4; }
.auth-btn { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.auth-btn.is-loading { pointer-events: none; opacity: .85; }
.auth-panel .alert { text-align: left; border-radius: 12px; border: 0; }
.otp-boxes input { flex: 1 1 0; max-width: 52px; min-width: 0; }

@media (max-width: 767.98px) {
    html:has(body.auth-page), body.auth-page { background: #fff; }
    body.auth-page .glass-nav,
    body.auth-page .bottom-nav { display: none !important; }
    body.auth-page { padding-bottom: 0 !important; overflow-x: hidden; }
    body.auth-page main { min-height: 0; }
    /* flash message becomes a floating toast instead of pushing the screen down */
    body.auth-page .flash-alert {
        position: fixed; left: 12px; right: 12px; z-index: 1080;
        top: calc(10px + env(safe-area-inset-top, 0));
        border-radius: 14px; box-shadow: 0 10px 30px rgba(20,33,61,.18);
        font-size: .88rem; padding-right: 44px;
    }
    .auth-wrap { padding: 0; min-height: 100vh; min-height: 100dvh; }
    .auth-panel {
        max-width: none; min-height: 100vh; min-height: 100dvh;
        border-radius: 0; box-shadow: none;
        padding: calc(60px + env(safe-area-inset-top, 0)) 22px calc(24px + env(safe-area-inset-bottom, 0));
    }
    .auth-panel > form, .auth-panel > .auth-foot, .auth-panel > .alert { width: 100%; max-width: 440px; margin-left: auto; margin-right: auto; }
    .auth-back { top: calc(10px + env(safe-area-inset-top, 0)); left: 6px; width: 44px; height: 44px; }
    .auth-logo { font-size: 2.2rem; margin-bottom: 14px; }
    .auth-title { font-size: 1.4rem; }
    .auth-sub { font-size: .9rem; margin-bottom: 22px; padding: 0 6px; }
    .auth-field { min-height: 54px; border-radius: 14px; }
    .auth-field input { padding-top: 15px; padding-bottom: 15px; }
    .auth-eye { min-width: 48px; min-height: 52px; padding: 0; }
    .auth-btn { border-radius: 14px; }
    .auth-foot-bottom { margin-top: auto; padding-top: 32px; }
    .otp-boxes { gap: 8px; }
    .otp-boxes input { height: 56px; border-radius: 12px; }
}
/* short phones (iPhone SE, small Android) — tighten vertical rhythm */
@media (max-width: 767.98px) and (max-height: 700px) {
    .auth-panel { padding-top: calc(52px + env(safe-area-inset-top, 0)); }
    .auth-logo { font-size: 1.9rem; margin-bottom: 8px; }
    .auth-icon { width: 54px; height: 54px; font-size: 1.35rem; margin-bottom: 12px; }
    .auth-icon-plain { font-size: 2.4rem; }
    .auth-sub { margin-bottom: 16px; }
    .auth-field { margin-bottom: 10px; min-height: 50px; }
    .auth-foot { margin-top: 16px; }
}
@media (max-width: 359.98px) {
    .auth-panel { padding-left: 16px; padding-right: 16px; }
    .otp-boxes { gap: 5px; }
    .otp-boxes input { height: 50px; font-size: 1.2rem; }
}

/* ================= Site-wide form & component system (all pages) ================= */
.form-control, .form-select {
    min-height: 48px; border-radius: 12px; border: 1.5px solid #E4E7EC;
    color: var(--ink); transition: border-color .15s, box-shadow .15s;
}
textarea.form-control { min-height: 110px; }
.form-control-sm, .form-select-sm { min-height: 38px; border-radius: 10px; }
.form-control::placeholder { color: #98A2B3; }
.form-label { font-size: .85rem; margin-bottom: 6px; }
.form-check-input { width: 1.15em; height: 1.15em; border: 1.5px solid #D0D5DD; }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.form-check-input:focus { box-shadow: 0 0 0 4px rgba(36,87,230,.1); border-color: var(--accent); }
.input-group > .form-control, .input-group > .form-select { min-height: 48px; }
.btn { font-weight: 600; }
.btn.is-loading { pointer-events: none; opacity: .85; }
.alert { border-radius: 12px; }
.modal-content { border: 0; border-radius: 20px; }
.modal-header, .modal-footer { border-color: var(--line); }

/* Password show/hide (auto-added by JS to every password field) */
.pw-wrap { position: relative; }
.pw-wrap .form-control { padding-right: 48px; }
.pw-wrap .pw-eye {
    position: absolute; top: 0; right: 0; bottom: 0; width: 48px;
    border: 0; background: none; color: var(--muted); font-size: 1.05rem;
}
.pw-wrap .pw-eye:hover { color: var(--accent); }

/* Simple status pages (verify, etc.) reuse the auth panel look */
.status-panel .auth-icon { width: 72px; height: 72px; font-size: 2rem; }
.status-panel .auth-icon.ok { background: rgba(199,243,107,.35); color: #4d7c0f; }
.status-panel .auth-icon.err { background: rgba(220,53,69,.1); color: #dc3545; }

@media (max-width: 767.98px) {
    /* Comfortable touch targets */
    .btn { min-height: 46px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
    .btn-sm { min-height: 38px; }
    .btn-lg { min-height: 52px; }
    .form-control, .form-select { min-height: 50px; border-radius: 14px; }
    .form-control-sm, .form-select-sm { min-height: 40px; }

    /* Tighter page rhythm on phones */
    main > .container.py-5, main > .container.py-4, main > .container.my-5 { padding-top: 16px !important; padding-bottom: 24px !important; margin-top: 0 !important; }
    main .card-body.p-4, main .card-body.p-5, main .card-body.p-md-5, main .card-body.p-lg-5 { padding: 20px !important; }
    main h1.h3 { font-size: 1.3rem; }
    main .card { border-radius: 18px; }

    /* Flash messages float as toasts everywhere instead of pushing content down */
    .flash-alert {
        position: fixed !important; left: 12px; right: 12px; z-index: 1080;
        top: calc(10px + env(safe-area-inset-top, 0));
        border-radius: 14px !important; box-shadow: 0 10px 30px rgba(20,33,61,.18);
        font-size: .88rem; padding-right: 44px;
    }

    /* Modals become app-style bottom sheets */
    .modal-dialog { margin: 0; position: fixed; left: 0; right: 0; bottom: 0; max-width: none; width: 100%; }
    .modal.fade .modal-dialog { transform: translateY(100%); transition: transform .25s ease-out; }
    .modal.show .modal-dialog { transform: none; }
    .modal-content {
        border-radius: 22px 22px 0 0; max-height: 92vh; max-height: 92dvh; overflow-y: auto;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
    .modal-content::before {
        content: ""; display: block; width: 40px; height: 4px; border-radius: 2px;
        background: #D0D5DD; margin: 10px auto 0;
    }
    .modal-footer .btn { flex: 1; }

    /* Never allow sideways scrolling */
    img, video { max-width: 100%; }
}

/* ================= Post-ad flow ================= */
.flow-wrap { display: flex; justify-content: center; padding: 40px 16px 64px; }
.flow-panel {
    position: relative; width: 100%; max-width: 620px; background: #fff;
    border-radius: 24px; box-shadow: 0 10px 40px rgba(20,33,61,.08);
    display: flex; flex-direction: column; overflow: hidden;
}
.flow-head { display: flex; align-items: center; gap: 4px; padding: 14px 16px 6px; }
.flow-back {
    width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center;
    border: 0; background: none; border-radius: 50%; color: var(--ink); font-size: 1.2rem; text-decoration: none;
}
.flow-back:hover { background: var(--bg); color: var(--ink); }
.flow-title { flex: 1; margin: 0 44px 0 0; text-align: center; font-size: 1.05rem; font-weight: 700; color: var(--ink); }

/* numbered stepper */
.flow-steps { display: flex; list-style: none; margin: 0; padding: 8px 20px 18px; counter-reset: s; }
.flow-steps .wstep {
    flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
    font-size: .72rem; font-weight: 600; color: var(--muted);
}
.flow-steps .wstep span {
    position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center; background: #fff; border: 2px solid #D0D5DD;
    color: var(--muted); font-size: .8rem; font-weight: 700; transition: all .2s;
}
.flow-steps .wstep:not(:last-child)::after {
    content: ""; position: absolute; top: 14px; left: calc(50% + 18px); right: calc(-50% + 18px);
    height: 2px; background: #E4E7EC; transition: background .2s;
}
.flow-steps .wstep.active { color: var(--accent); }
.flow-steps .wstep.active span { border-color: var(--accent); background: var(--accent); color: #fff; box-shadow: 0 0 0 5px rgba(36,87,230,.12); }
.flow-steps .wstep.done { color: var(--ink); }
.flow-steps .wstep.done span { border-color: var(--accent); color: var(--accent); }
.flow-steps .wstep.done::after { background: var(--accent); }

.flow-body { padding: 4px 24px 24px; flex: 1; }
.flow-h2 { font-size: 1.1rem; font-weight: 800; color: var(--ink); margin-bottom: 14px; }
.flow-error { display: none; color: #dc3545; font-size: .85rem; font-weight: 600; margin-top: 10px; }
.flow-error.show { display: block; }
.flow-actions { padding: 16px 24px 24px; display: flex; gap: 10px; }
.flow-actions.stacked { flex-direction: column; }
.flow-btn { width: 100%; min-height: 52px; border-radius: 14px; font-weight: 700; font-size: 1rem; }

/* category picker */
.cat-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cat-opt {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    min-height: 96px; padding: 12px 6px; border: 1.5px solid #E4E7EC; border-radius: 16px;
    text-align: center; cursor: pointer; transition: border-color .15s, background .15s, transform .1s;
}
.cat-opt:active { transform: scale(.97); }
.cat-opt input { position: absolute; opacity: 0; pointer-events: none; }
.cat-opt-ico { font-size: 1.7rem; line-height: 1; }
.cat-opt-name { font-size: .75rem; font-weight: 600; color: var(--ink); line-height: 1.2; }
.cat-opt:has(input:checked) { border-color: var(--accent); background: rgba(36,87,230,.06); }
.cat-opt:has(input:checked)::after {
    content: "\F26B"; font-family: "bootstrap-icons"; position: absolute; top: 6px; right: 8px;
    color: var(--accent); font-size: .9rem;
}
.cat-opt:has(input:focus-visible) { box-shadow: 0 0 0 4px rgba(36,87,230,.15); }

/* price + segmented control */
.price-field { position: relative; }
.price-field span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-weight: 700; color: var(--muted); font-size: .9rem; }
.price-field .form-control { padding-left: 46px; font-weight: 600; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: var(--bg); padding: 5px; border-radius: 14px; }
.seg label { margin: 0; cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: block; text-align: center; padding: 11px; border-radius: 10px; font-weight: 600; font-size: .9rem; color: var(--muted); transition: all .15s; }
.seg input:checked + span { background: #fff; color: var(--accent); box-shadow: 0 2px 8px rgba(20,33,61,.08); }
.seg input:focus-visible + span { outline: 2px solid var(--accent); }

/* photo picker */
.drop-zone {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    min-height: 220px; padding: 24px; text-align: center; cursor: pointer;
    border: 2px dashed #B9C7F5; border-radius: 18px; background: rgba(36,87,230,.03);
    transition: background .15s, border-color .15s;
}
.drop-zone:hover { background: rgba(36,87,230,.06); border-color: var(--accent); }
.drop-zone.compact { min-height: 110px; flex-direction: row; gap: 12px; }
.drop-zone.compact small { display: none; }
.dz-ico { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: rgba(36,87,230,.1); color: var(--accent); font-size: 1.4rem; }
.drop-zone strong { color: var(--ink); font-size: .95rem; }
.drop-zone small { color: var(--muted); }
.thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.thumbs:empty { display: none; }
.thumb { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--bg); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb-cover { position: absolute; left: 6px; bottom: 6px; background: var(--lime); color: var(--ink); font-size: .65rem; font-weight: 700; padding: 2px 8px; border-radius: 8px; }
.thumb-del {
    position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%; border: 0;
    background: rgba(20,33,61,.7); color: #fff; display: grid; place-items: center; font-size: 1.1rem; padding: 0;
}

/* review */
.review-card { border: 1.5px solid #E4E7EC; border-radius: 18px; padding: 16px; }
.rv-top { display: flex; gap: 14px; align-items: flex-start; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.rv-top img { width: 110px; height: 110px; object-fit: cover; border-radius: 14px; flex-shrink: 0; }
.rv-k { display: block; font-size: .72rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.rv-title { font-weight: 700; color: var(--ink); margin-bottom: 8px; word-break: break-word; }
.rv-price { font-weight: 800; color: var(--accent); font-size: 1.2rem; }
.rv-list { margin: 14px 0 0; display: grid; grid-template-columns: 110px 1fr; gap: 10px 12px; font-size: .9rem; }
.rv-list dt { color: var(--muted); font-weight: 600; }
.rv-list dd { margin: 0; color: var(--ink); font-weight: 600; word-break: break-word; }
.rv-desc { font-weight: 400 !important; white-space: pre-line; max-height: 160px; overflow-y: auto; }

/* published */
.flow-done { text-align: center; min-height: 520px; }
.flow-done .flow-back { position: absolute; top: 14px; left: 16px; }
.done-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 72px 28px 12px; }
.done-check {
    width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 22px;
    background: #22C55E; color: #fff; font-size: 3rem;
    box-shadow: 0 0 0 14px rgba(34,197,94,.14), 0 0 0 28px rgba(34,197,94,.06);
    animation: popIn .45s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes popIn { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

@media (min-width: 576px) { .cat-pick { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 767.98px) {
    .flow-wrap { padding: 0; min-height: 100vh; min-height: 100dvh; }
    .flow-panel { max-width: none; border-radius: 0; box-shadow: none; min-height: 100vh; min-height: 100dvh; overflow: visible; }
    .flow-head { position: sticky; top: 0; z-index: 5; background: #fff; padding-top: calc(10px + env(safe-area-inset-top, 0)); }
    .flow-body { padding: 4px 18px 110px; }
    .flow-actions {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; background: #fff;
        padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0));
        box-shadow: 0 -6px 20px rgba(20,33,61,.06);
    }
    .flow-done .flow-actions { position: static; box-shadow: none; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0)); }
    .flow-done .done-body { padding-top: 40px; }
    .flow-steps { padding: 4px 10px 16px; }
    .rv-top img { width: 92px; height: 92px; }
    .rv-list { grid-template-columns: 96px 1fr; }
}
@media (max-width: 359.98px) {
    .cat-opt { min-height: 86px; }
    .cat-opt-name { font-size: .7rem; }
    .flow-steps .wstep { font-size: .65rem; }
}

/* ================= Search & filters ================= */
body.no-scroll { overflow: hidden; }
.results-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.min-w-0 { min-width: 0; }
.btn-filter {
    flex-shrink: 0; border: 1.5px solid #E4E7EC; background: #fff; color: var(--ink);
    border-radius: 12px; font-weight: 600; padding: 8px 14px; position: relative;
}
.btn-filter:hover { border-color: var(--accent); color: var(--accent); }
.fc-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--accent); color: #fff; font-size: .72rem; }
.active-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 12px; scrollbar-width: none; }
.active-chips::-webkit-scrollbar { display: none; }
.achip {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; padding: 6px 8px 6px 12px;
    border-radius: 20px; background: rgba(36,87,230,.08); color: var(--accent); font-size: .82rem; font-weight: 600; text-decoration: none;
}
.achip:hover { background: rgba(36,87,230,.14); color: var(--accent-dark, var(--accent)); }
.achip-clear { flex-shrink: 0; align-self: center; font-size: .82rem; color: var(--muted); font-weight: 600; text-decoration: none; padding: 6px 4px; }

/* filter panel (desktop sidebar look) */
.filter-panel { background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-sm); }
.filter-sheet { position: sticky; top: 90px; }
.fs-head { display: flex; align-items: center; gap: 8px; padding: 18px 20px 6px; }
.fs-head h2 { flex: 1; margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--ink); }
.fs-close { display: none; width: 40px; height: 40px; border: 0; background: none; border-radius: 50%; color: var(--ink); font-size: 1.05rem; }
.fs-reset { color: var(--accent); font-weight: 600; font-size: .88rem; text-decoration: none; }
.fs-body { padding: 8px 20px; }
.fs-group { padding: 12px 0; }
.fs-group + .fs-group { border-top: 1px solid var(--line); }
.fs-label { display: block; font-weight: 700; font-size: .88rem; color: var(--ink); margin-bottom: 10px; }
.fs-foot { padding: 12px 20px 20px; }
.fs-apply { min-height: 50px; border-radius: 14px; font-weight: 700; }

/* chip radio group */
.chip-group { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-group label { margin: 0; cursor: pointer; }
.chip-group input { position: absolute; opacity: 0; pointer-events: none; }
.chip-group span {
    display: inline-block; padding: 9px 18px; border-radius: 12px; border: 1.5px solid #E4E7EC;
    font-weight: 600; font-size: .88rem; color: var(--ink); transition: all .15s;
}
.chip-group input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip-group input:focus-visible + span { box-shadow: 0 0 0 4px rgba(36,87,230,.15); }

/* location field with pin */
.loc-field { position: relative; }
.loc-field > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--accent); z-index: 1; }
.loc-field .form-select { padding-left: 40px; }

/* dual price slider */
.pr-values { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: .9rem; }
.pr-values strong { color: var(--accent); }
.pr-values span { color: var(--muted); }
.pr-track { position: relative; height: 28px; }
.pr-track::before { content: ""; position: absolute; left: 0; right: 0; top: 12px; height: 4px; border-radius: 2px; background: #E4E7EC; }
.pr-fill { position: absolute; top: 12px; height: 4px; border-radius: 2px; background: var(--accent); }
.pr-track input[type=range] {
    position: absolute; left: 0; top: 0; width: 100%; height: 28px; margin: 0;
    background: none; pointer-events: none; -webkit-appearance: none; appearance: none; min-height: 0 !important;
}
.pr-track input[type=range]::-webkit-slider-runnable-track { background: none; height: 28px; }
.pr-track input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; pointer-events: auto; width: 26px; height: 26px; margin-top: 1px; border-radius: 50%;
    background: #fff; border: 2.5px solid var(--accent); box-shadow: 0 2px 8px rgba(20,33,61,.18); cursor: grab;
}
.pr-track input[type=range]::-moz-range-track { background: none; }
.pr-track input[type=range]::-moz-range-thumb {
    pointer-events: auto; width: 22px; height: 22px; border-radius: 50%;
    background: #fff; border: 2.5px solid var(--accent); box-shadow: 0 2px 8px rgba(20,33,61,.18); cursor: grab;
}
.pr-track input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 6px rgba(36,87,230,.18); }

/* desktop suggestion dropdown */
.suggest-drop, .so-list { list-style: none; margin: 0; padding: 6px 0; }
.suggest-drop {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 1050; background: #fff;
    border-radius: 16px; box-shadow: 0 16px 40px rgba(20,33,61,.16); max-height: 420px; overflow-y: auto;
}
.suggest-drop li[role=option], .so-list li[role=option] {
    display: flex; align-items: center; gap: 14px; padding: 11px 16px; cursor: pointer; color: var(--ink); font-size: .92rem;
}
.suggest-drop li[role=option]:hover, .suggest-drop li.active,
.so-list li[role=option]:hover, .so-list li.active { background: var(--bg); }
[role=option] > i:first-child { color: var(--muted); font-size: 1rem; }
[role=option] > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[role=option] small { display: block; color: var(--muted); font-size: .72rem; }
[role=option] mark { background: none; padding: 0; color: inherit; font-weight: 700; }
[role=option] .sg-ico { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px; background: rgba(36,87,230,.08); display: grid; place-items: center; font-size: 1rem; }
[role=option] .bi-chevron-right, .sg-fill { color: #98A2B3; }
.sg-fill { padding: 6px; margin: -6px; border-radius: 8px; }
.sg-fill:hover { color: var(--accent); }
.sg-all span { color: var(--accent); }
.sg-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px 6px; font-size: .75rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.sg-clear { border: 0; background: none; color: var(--accent); font-size: .78rem; font-weight: 600; text-transform: none; letter-spacing: 0; }

/* phone full-screen search */
.search-overlay {
    position: fixed; inset: 0; z-index: 1070; background: #fff; display: flex; flex-direction: column;
    opacity: 0; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease;
}
.search-overlay.in { opacity: 1; transform: none; }
.so-bar { display: flex; align-items: center; gap: 6px; padding: calc(10px + env(safe-area-inset-top, 0)) 12px 10px 6px; border-bottom: 1px solid var(--line); }
.so-back { width: 44px; height: 44px; border: 0; background: none; color: var(--ink); font-size: 1.2rem; flex-shrink: 0; }
.so-input { flex: 1; display: flex; align-items: center; gap: 8px; background: var(--bg); border-radius: 14px; padding: 0 6px 0 14px; min-height: 46px; }
.so-input > i { color: var(--muted); }
.so-input input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--ink); padding: 10px 0; }
.so-input input::-webkit-search-cancel-button { display: none; }
.so-clear { border: 0; background: none; color: #98A2B3; width: 36px; height: 36px; font-size: 1.05rem; }
.so-list { flex: 1; overflow-y: auto; padding-bottom: env(safe-area-inset-bottom, 0); }
.so-list li[role=option] { padding: 14px 18px; font-size: .95rem; }

@media (max-width: 991.98px) {
    .fs-col { margin-top: 0 !important; padding: 0; }
    .filter-sheet {
        position: fixed; inset: 0; z-index: 1065; background: #fff; top: 0;
        transform: translateY(100%); transition: transform .28s cubic-bezier(.2,.8,.2,1); visibility: hidden;
    }
    .filter-sheet.open { transform: none; visibility: visible; }
    .filter-panel { height: 100%; display: flex; flex-direction: column; border: 0; border-radius: 0; box-shadow: none; }
    .fs-head { padding: calc(8px + env(safe-area-inset-top, 0)) 12px 8px 6px; border-bottom: 1px solid var(--line); }
    .fs-head h2 { text-align: center; }
    .fs-close { display: grid; place-items: center; }
    .fs-body { flex: 1; overflow-y: auto; padding: 4px 20px 12px; }
    .fs-foot { padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0)); box-shadow: 0 -6px 20px rgba(20,33,61,.06); }
}

/* pagination / load more */
.pager { display: flex; justify-content: center; gap: 10px; margin: 24px 0 8px; }
.pager:empty { display: none; }
.pager .btn { min-height: 48px; border-radius: 14px; padding: 10px 22px; font-weight: 600; }
.load-more { min-width: min(100%, 320px); }

/* ================= Messaging ================= */
.chat-shell {
    display: grid; grid-template-columns: 340px 1fr; height: calc(100vh - 150px); min-height: 520px;
    background: #fff; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-sm);
}
.conv-pane { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.conv-head { padding: 18px 16px 10px; }
.conv-head h1 { font-size: 1.35rem; font-weight: 800; color: var(--ink); margin-bottom: 12px; }
.conv-search { display: flex; align-items: center; gap: 8px; background: var(--bg); border-radius: 12px; padding: 0 12px; }
.conv-search i { color: var(--muted); }
.conv-search input { flex: 1; border: 0; outline: 0; background: none; padding: 10px 0; min-width: 0; }
.conv-items { flex: 1; overflow-y: auto; padding: 4px 8px 12px; }
.conv { display: flex; gap: 12px; align-items: flex-start; padding: 12px 10px; border-radius: 16px; text-decoration: none; color: var(--ink); }
.conv:hover { background: var(--bg); color: var(--ink); }
.conv.active { background: rgba(36,87,230,.08); }
.conv-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.conv-top, .conv-bottom { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.conv-top strong { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-top small { color: var(--muted); font-size: .72rem; flex-shrink: 0; }
.conv-preview { color: var(--muted); font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv.unread .conv-preview { color: var(--ink); font-weight: 600; }
.conv-badge { flex-shrink: 0; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--accent); color: #fff; font-size: .7rem; font-weight: 700; display: grid; place-items: center; }
.conv-ad { font-size: .72rem; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.chat-av {
    position: relative; flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%;
    display: grid; place-items: center; font-weight: 800; color: #fff; font-size: 1.05rem;
    background: linear-gradient(135deg, var(--accent), #14213D);
}
.chat-av.lg { width: 42px; height: 42px; }
.chat-av.sm { width: 28px; height: 28px; font-size: .75rem; align-self: flex-end; }
.chat-av .dot { position: absolute; right: 0; bottom: 1px; width: 12px; height: 12px; border-radius: 50%; background: #22C55E; border: 2px solid #fff; }

.thread-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg); }
.thread-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #fff; border-bottom: 1px solid var(--line); }
.th-who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.th-who strong { font-size: .98rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th-who small { font-size: .76rem; color: var(--muted); }
.th-who small.online { color: #16A34A; font-weight: 600; }
.th-btn { width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; color: var(--ink); font-size: 1.15rem; text-decoration: none; }
.th-btn:hover { background: var(--bg); color: var(--accent); }
.th-wa { color: #16A34A; }
.th-back { display: none; }
.thread-ad { display: flex; align-items: center; gap: 12px; margin: 10px 14px 0; padding: 8px 12px 8px 8px; background: #fff; border-radius: 14px; text-decoration: none; color: var(--ink); box-shadow: 0 1px 3px rgba(20,33,61,.06); }
.thread-ad img, .ta-ph { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: var(--bg); display: grid; place-items: center; color: var(--muted); }
.ta-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: .85rem; }
.ta-txt span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ta-txt strong { color: var(--accent); }
.thread-ad > i { color: var(--muted); }

.thread-body { flex: 1; overflow-y: auto; padding: 14px 14px 8px; display: flex; flex-direction: column; gap: 2px; overscroll-behavior: contain; }
.msg-day { text-align: center; margin: 14px 0 8px; }
.msg-day span { display: inline-block; padding: 4px 12px; border-radius: 10px; background: rgba(20,33,61,.06); color: var(--muted); font-size: .72rem; font-weight: 600; }
.msg { display: flex; align-items: flex-end; gap: 8px; margin-top: 8px; max-width: 82%; }
.msg.grouped { margin-top: 2px; }
.msg.grouped .chat-av { visibility: hidden; }
.msg.me { align-self: flex-end; justify-content: flex-end; }
.msg.them { align-self: flex-start; }
.msg-bubble { position: relative; padding: 8px 12px 6px; border-radius: 18px; font-size: .93rem; line-height: 1.4; word-break: break-word; box-shadow: 0 1px 2px rgba(20,33,61,.06); }
.msg.them .msg-bubble { background: #fff; color: var(--ink); border-bottom-left-radius: 6px; }
.msg.me .msg-bubble { background: #DCF8C6; color: #0F2A12; border-bottom-right-radius: 6px; }
.msg.grouped.them .msg-bubble { border-top-left-radius: 6px; }
.msg.grouped.me .msg-bubble { border-top-right-radius: 6px; }
.msg-text { white-space: pre-line; }
.msg-meta { display: block; text-align: right; font-size: .68rem; color: rgba(20,33,61,.5); margin-top: 2px; }
.msg-meta .bi-check2-all.read { color: var(--accent); }
.msg-img { display: block; margin: -2px -6px 4px; border-radius: 14px; overflow: hidden; }
.msg-img img { display: block; width: 100%; max-width: 240px; max-height: 300px; object-fit: cover; }

.chat-start { margin: auto; text-align: center; padding: 20px; max-width: 360px; }
.chat-start p { color: var(--muted); margin: 10px 0 14px; }
.quick-replies { display: flex; flex-direction: column; gap: 8px; }
.qr { border: 1.5px solid #D6E0FB; background: #fff; color: var(--accent); border-radius: 14px; padding: 10px 14px; font-weight: 600; font-size: .88rem; }
.qr:hover { background: rgba(36,87,230,.06); }
.chat-empty { margin: auto; text-align: center; padding: 40px 24px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.chat-empty p { color: var(--muted); font-size: .9rem; max-width: 280px; }
.chat-empty-ico { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: rgba(36,87,230,.1); color: var(--accent); font-size: 1.6rem; margin: 0 auto 6px; }
.thread-placeholder { height: 100%; justify-content: center; }

.composer { background: #fff; border-top: 1px solid var(--line); padding: 10px 12px; }
.cmp-row { display: flex; align-items: flex-end; gap: 8px; }
.cmp-btn { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; color: var(--muted); font-size: 1.25rem; cursor: pointer; margin: 0; }
.cmp-btn:hover { background: var(--bg); color: var(--accent); }
.composer textarea {
    flex: 1; min-width: 0; resize: none; border: 0; outline: 0; background: var(--bg); border-radius: 22px;
    padding: 11px 16px; max-height: 120px; line-height: 1.35; color: var(--ink); min-height: 44px !important;
}
.cmp-send { width: 44px; height: 44px; flex-shrink: 0; border: 0; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 1.05rem; transition: transform .1s, opacity .15s; }
.cmp-send:active { transform: scale(.92); }
.cmp-send:disabled, .composer.is-sending .cmp-send { opacity: .55; }
.cmp-preview { position: relative; display: inline-block; margin: 0 0 8px 52px; }
.cmp-preview img { width: 72px; height: 72px; object-fit: cover; border-radius: 12px; display: block; }
.cmp-preview button { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; background: var(--ink); color: #fff; display: grid; place-items: center; padding: 0; font-size: .95rem; }

@media (max-width: 991.98px) {
    .chat-page { padding: 0 !important; max-width: none; }
    .chat-shell { display: block; height: auto; min-height: 0; border: 0; border-radius: 0; box-shadow: none; }
    .conv-pane { border: 0; }
    .thread-pane { display: none; }
    .chat-shell.has-thread .conv-pane { display: none; }
    .chat-shell.has-thread .thread-pane { display: flex; position: fixed; inset: 0; z-index: 1040; }
    .th-back { display: grid; }
    .thread-head { padding-top: calc(8px + env(safe-area-inset-top, 0)); padding-left: 4px; }
    .composer { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0)); }
    .conv-head { padding: 16px 16px 8px; }
    body.chat-open .glass-nav, body.chat-open .bottom-nav { display: none !important; }
    body.chat-open { overflow: hidden; }
    .msg { max-width: 86%; }
}

/* ================= Seller profile ================= */
.profile-cover {
    height: 180px;
    background:
        radial-gradient(circle at 85% 20%, rgba(199,243,107,.35), transparent 40%),
        radial-gradient(circle at 10% 90%, rgba(36,87,230,.55), transparent 45%),
        linear-gradient(135deg, #14213D 0%, #1d3a8a 60%, #2457E6 100%);
}
.profile-wrap { margin-top: -90px; padding-bottom: 40px; position: relative; }
.profile-card { background: #fff; border-radius: 24px; box-shadow: 0 10px 40px rgba(20,33,61,.08); padding: 0 24px; margin-bottom: 20px; }
.pf-top { display: flex; align-items: flex-end; gap: 18px; padding-top: 0; }
.pf-avatar {
    position: relative; flex-shrink: 0; width: 112px; height: 112px; margin-top: -40px; border-radius: 50%;
    border: 5px solid #fff; box-shadow: 0 6px 20px rgba(20,33,61,.15);
    background: linear-gradient(135deg, var(--accent), #14213D); color: #fff;
    display: grid; place-items: center; font-size: 2.6rem; font-weight: 800;
}
.pf-avatar .dot { position: absolute; right: 8px; bottom: 8px; width: 18px; height: 18px; border-radius: 50%; background: #22C55E; border: 3px solid #fff; }
.pf-id { flex: 1; min-width: 0; padding: 16px 0 4px; }
.pf-id h1 { font-size: 1.5rem; font-weight: 800; color: var(--ink); margin: 0 0 4px; word-break: break-word; }
.pf-id h1 .verified-icon { font-size: 1.15rem; }
.pf-sub { color: var(--muted); font-size: .88rem; }
.pf-rating { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-size: .9rem; color: var(--ink); text-decoration: none; }
.pf-rating .bi-star-fill { color: #F5A524; }
.pf-rating .bi-star { color: var(--muted); }
.pf-rating:hover { color: var(--accent); }
.pf-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 20px 0 16px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; }
.pf-stats div + div { border-left: 1px solid var(--line); }
.pf-stats strong { display: block; font-size: 1.3rem; font-weight: 800; color: var(--ink); }
.pf-stats span { font-size: .8rem; color: var(--muted); }
.pf-actions { display: flex; gap: 10px; }
.pf-actions .btn { min-height: 48px; border-radius: 14px; font-weight: 700; }
.pf-actions > .btn:not(.pf-icon-btn) { flex: 1; }
.pf-icon-btn { width: 48px; padding: 0; flex-shrink: 0; display: grid; place-items: center; font-size: 1.15rem; background: var(--bg); border-color: var(--bg); }
.pf-wa { color: #16A34A; }
.btn-following { background: rgba(36,87,230,.08); color: var(--accent); border: 1.5px solid rgba(36,87,230,.25); }
.btn-following:hover { background: rgba(36,87,230,.14); color: var(--accent); }
.pf-tabs { display: flex; margin-top: 18px; border-top: 1px solid var(--line); }
.pf-tabs a { flex: 1; text-align: center; padding: 14px 6px; font-weight: 700; font-size: .92rem; color: var(--muted); text-decoration: none; position: relative; }
.pf-tabs a.active { color: var(--accent); }
.pf-tabs a.active::after { content: ""; position: absolute; left: 25%; right: 25%; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--accent); }
.pf-panel { animation: fadeUp .25s ease; }

/* reviews */
.rv-summary { background: #fff; border-radius: 20px; padding: 20px; text-align: center; box-shadow: var(--shadow-sm); }
.rv-big { font-size: 2.8rem; font-weight: 800; color: var(--ink); line-height: 1; }
.rv-stars { color: #F5A524; font-size: 1.05rem; letter-spacing: 2px; margin: 6px 0 2px; }
.rv-stars.sm { font-size: .8rem; letter-spacing: 1px; margin: 2px 0 6px; }
.rv-bar { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--muted); margin-top: 6px; }
.rv-bar span { width: 34px; text-align: left; white-space: nowrap; }
.rv-bar span i { color: #F5A524; font-size: .7rem; }
.rv-bar div { flex: 1; height: 6px; border-radius: 3px; background: var(--bg); overflow: hidden; }
.rv-bar div i { display: block; height: 100%; background: #F5A524; border-radius: 3px; }
.rv-bar small { width: 22px; text-align: right; }
.rv-form { background: #fff; border-radius: 20px; padding: 18px; margin-top: 16px; box-shadow: var(--shadow-sm); }
.star-input { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; margin: 8px 0 12px; }
.star-input input { position: absolute; opacity: 0; pointer-events: none; }
.star-input label { font-size: 1.9rem; color: #D0D5DD; cursor: pointer; line-height: 1; transition: color .1s, transform .1s; }
.star-input label:hover, .star-input label:hover ~ label, .star-input input:checked ~ label { color: #F5A524; }
.star-input label:active { transform: scale(.9); }
.star-input input:focus-visible + label { outline: 2px solid var(--accent); border-radius: 4px; }
.rv-item { display: flex; gap: 12px; background: #fff; border-radius: 18px; padding: 16px; margin-bottom: 10px; box-shadow: var(--shadow-sm); }
.rv-item .chat-av { width: 40px; height: 40px; font-size: .95rem; }
.rv-item p { margin: 0 0 4px; font-size: .92rem; color: var(--ink); }

/* about */
.pf-about { background: #fff; border-radius: 20px; padding: 22px; box-shadow: var(--shadow-sm); max-width: 720px; }
.pf-about ul { list-style: none; padding: 0; margin: 0; }
.pf-about li { display: flex; gap: 12px; align-items: center; padding: 10px 0; color: var(--ink); }
.pf-about li + li { border-top: 1px solid var(--line); }
.pf-about li i { color: var(--accent); font-size: 1.1rem; }
.pf-safety { margin-top: 16px; padding: 12px 14px; border-radius: 14px; background: rgba(199,243,107,.25); color: #3f6212; font-size: .88rem; display: flex; gap: 10px; }
.seller-link:hover .fw-bold { color: var(--accent); }

@media (max-width: 767.98px) {
    .profile-cover { height: 140px; }
    .profile-wrap { margin-top: -70px; padding: 0 12px 24px; }
    .profile-card { padding: 0 16px; border-radius: 22px; }
    .pf-top { flex-direction: column; align-items: center; text-align: center; gap: 0; }
    .pf-avatar { width: 96px; height: 96px; font-size: 2.2rem; margin-top: -48px; }
    .pf-id { padding-top: 10px; }
    .pf-id h1 { font-size: 1.3rem; }
    .pf-stats { margin-top: 14px; }
    .pf-tabs a.active::after { left: 15%; right: 15%; }
}

/* ================= Listing card (mockup v2) ================= */
.ad-wrap { position: relative; height: 100%; }
.ad-card { border: 0; border-radius: 18px; box-shadow: 0 2px 10px rgba(20,33,61,.06); }
.ad-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(20,33,61,.1); }
.ad-card .ad-img { height: 0; padding-top: 82%; border-radius: 18px 18px 0 0; }
.ad-card .ad-img img, .ad-card .ad-img-placeholder { position: absolute; inset: 0; }
.ad-card .ad-img-placeholder { display: grid; place-items: center; }
.ad-card .verified-badge { position: absolute; left: 8px; bottom: 8px; top: auto; font-size: .66rem; padding: 4px 8px; border-radius: 10px; box-shadow: 0 2px 6px rgba(20,33,61,.12); }
.ad-card .ad-title { margin-bottom: 2px; }
.ad-card .ad-meta { margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fav-heart {
    position: absolute; top: 8px; right: 8px; z-index: 3; border: 0; padding: 0;
    width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.95);
    display: grid; place-items: center; color: var(--ink); font-size: .95rem;
    box-shadow: 0 2px 8px rgba(20,33,61,.12); transition: transform .15s;
}
.fav-heart:hover { color: #E11D48; }
.fav-heart.on { color: #E11D48; }
.fav-heart.pop { transform: scale(1.25); }
.fav-heart:disabled { opacity: .7; }

/* ================= Home hero (split with illustration) ================= */
.hero-split { display: flex; align-items: center; gap: 24px; text-align: left; padding: 48px 0 0 56px !important; min-height: 340px; }
.hero-copy { flex: 1; min-width: 0; position: relative; z-index: 1; padding-bottom: 48px; }
.hero-split .hero-title { margin-bottom: 12px; }
.hero-split .hero-sub { margin-bottom: 26px; max-width: 520px; }
.hero-art { width: 320px; height: auto; align-self: flex-end; flex-shrink: 0; position: relative; z-index: 1; margin-right: 32px; filter: drop-shadow(0 18px 30px rgba(0,0,0,.25)); }
.hs-pill { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 18px; padding: 6px 6px 6px 18px; box-shadow: 0 14px 34px rgba(0,0,0,.2); max-width: 640px; }
.hs-pill > i { color: var(--muted); }
.hs-pill input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--ink); padding: 12px 0; }
.hs-pill select { border: 0; outline: 0; background: none; color: var(--ink); font-weight: 600; max-width: 150px; cursor: pointer; }
.hs-sep { width: 1px; height: 26px; background: var(--line); }
.hs-go { width: 48px; height: 48px; flex-shrink: 0; border: 0; border-radius: 14px; background: var(--lime); color: var(--ink); font-size: 1.1rem; display: grid; place-items: center; }
.hs-go:hover { filter: brightness(.95); }

/* Aziza Vérifié banner */
.verified-banner {
    display: flex; align-items: center; gap: 18px; padding: 22px 26px; border-radius: 24px; text-decoration: none; color: #fff;
    background: radial-gradient(circle at 90% 10%, rgba(199,243,107,.35), transparent 45%), linear-gradient(120deg, #14213D, #1d3a8a 70%, #2457E6);
    box-shadow: var(--shadow-md);
}
.verified-banner:hover { color: #fff; transform: translateY(-1px); }
.vb-ico { width: 58px; height: 58px; flex-shrink: 0; border-radius: 18px; background: var(--lime); color: var(--ink); display: grid; place-items: center; font-size: 1.8rem; }
.vb-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vb-txt strong { font-size: 1.15rem; }
.vb-txt span { color: rgba(255,255,255,.75); font-size: .9rem; }
.vb-cta { flex-shrink: 0; background: var(--lime); color: var(--ink); font-weight: 700; font-size: .85rem; padding: 10px 16px; border-radius: 12px; }

/* desktop primary links */
.main-links .nav-link { font-weight: 600; color: var(--muted); padding: 8px 12px !important; position: relative; }
.main-links .nav-link.active, .main-links .nav-link:hover { color: var(--ink); }
.main-links .nav-link.active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; border-radius: 2px; background: var(--accent); }

@media (max-width: 991.98px) {
    .hero-split { padding: 26px 0 0 20px !important; min-height: 0; gap: 0; }
    .hero-copy { padding-bottom: 24px; }
    .hero-art { width: 46%; max-width: 200px; margin-right: 0; }
}
@media (max-width: 767.98px) {
    .hero-split .hero-sub { font-size: .85rem; margin-bottom: 0; }
    .hero-split .hero-search { display: none; }
    .verified-banner { padding: 16px; gap: 12px; border-radius: 20px; }
    .vb-ico { width: 46px; height: 46px; font-size: 1.4rem; border-radius: 14px; }
    .vb-txt strong { font-size: 1rem; }
    .vb-txt span { font-size: .8rem; }
    .vb-cta { display: none; }
}

/* ================= Search results & category landing ================= */
.results-tools { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.loc-pill { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; font-weight: 700; color: var(--ink); padding: 8px 2px; font-size: .92rem; }
.loc-pill .bi-geo-alt-fill { color: var(--accent); }
.cat-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 10px; margin-bottom: 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.cat-chips::-webkit-scrollbar { display: none; }
.cchip { flex-shrink: 0; padding: 8px 14px; border-radius: 20px; background: #fff; border: 1.5px solid #E4E7EC; color: var(--ink); font-size: .85rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.cchip span { color: var(--muted); font-weight: 500; }
.cchip:hover { border-color: var(--accent); color: var(--accent); }
.cchip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.cchip.active span { color: rgba(255,255,255,.8); }
.cat-banner {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px;
    padding: 22px 24px; border-radius: 22px; color: #fff; overflow: hidden; position: relative;
    background: radial-gradient(circle at 100% 0%, rgba(199,243,107,.55), transparent 42%), linear-gradient(120deg, #1d3a8a, #2457E6);
}
.cb-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cb-kicker { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.7); font-weight: 700; }
.cb-txt strong { font-size: 1.45rem; font-weight: 800; line-height: 1.15; }
.cb-txt > span:last-child { color: rgba(255,255,255,.85); font-size: .9rem; }
.cb-txt b { color: var(--lime); }
.cb-ico { font-size: 3.4rem; line-height: 1; flex-shrink: 0; filter: drop-shadow(0 8px 16px rgba(0,0,0,.25)); }
@media (max-width: 767.98px) {
    .listing { padding-top: 12px !important; }
    .cat-banner { padding: 18px; border-radius: 20px; }
    .cb-txt strong { font-size: 1.2rem; }
    .cb-ico { font-size: 2.6rem; }
}

/* ================= Ad detail (mockup v2) ================= */
.ad-gallery { position: relative; }
.gal-actions { position: absolute; top: 14px; left: 14px; right: 14px; z-index: 5; display: flex; align-items: center; pointer-events: none; }
.gal-btn {
    pointer-events: auto; width: 42px; height: 42px; border-radius: 50%; border: 0; padding: 0;
    background: rgba(255,255,255,.95); color: var(--ink); display: grid; place-items: center; font-size: 1.1rem;
    box-shadow: 0 4px 14px rgba(20,33,61,.15); text-decoration: none; transition: transform .15s;
}
.gal-btn:hover { color: var(--accent); }
.gal-btn.on, .btn.js-fav.on { color: #E11D48; }
.gal-btn.pop { transform: scale(1.2); }
.ad-h1 { font-size: 1.35rem; font-weight: 800; color: var(--ink); margin-bottom: 6px; word-break: break-word; }
.seller-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.seller-cta .btn { min-height: 48px; border-radius: 14px; font-weight: 700; }
.btn-lime-wa { background: var(--lime); color: var(--ink); border: 0; font-weight: 700; }
.btn-lime-wa:hover { background: #b8e85a; color: var(--ink); }
.seller-call { display: block; text-align: center; margin-top: 12px; font-size: .88rem; font-weight: 600; color: var(--muted); text-decoration: none; }
.seller-call:hover { color: var(--accent); }
.ad-sticky { display: none; }

@media (min-width: 992px) { .gal-actions .js-back { visibility: hidden; } }
@media (max-width: 991.98px) {
    body.ad-page .glass-nav, body.ad-page .bottom-nav { display: none !important; }
    body.ad-page { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0)) !important; }
    body.ad-page main > .container:first-child { padding-top: 0 !important; }
    body.ad-page .breadcrumb { display: none; }
    body.ad-page .ad-gallery { margin: 0 calc(var(--bs-gutter-x, 1.5rem) * -.5); border-radius: 0 0 26px 26px; min-height: 0; }
    body.ad-page .ad-gallery .carousel-item, body.ad-page .ad-gallery > img { height: min(88vw, 460px); }
    body.ad-page .gal-actions { top: calc(12px + env(safe-area-inset-top, 0)); }
    .ad-sticky {
        display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; background: #fff;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0)); box-shadow: 0 -6px 20px rgba(20,33,61,.08);
    }
    .ad-sticky .btn { min-height: 52px; border-radius: 16px; font-weight: 700; font-size: 1rem; }
    .ad-sticky-wa { width: 56px; flex-shrink: 0; font-size: 1.35rem !important; }
}

/* messages tabs */
.conv-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.conv-tabs button { border: 0; padding: 7px 14px; border-radius: 18px; background: var(--bg); color: var(--muted); font-weight: 600; font-size: .85rem; }
.conv-tabs button.active { background: var(--accent); color: #fff; }
.cat-opt[hidden] { display: none !important; }

/* ad page — layout like the mockup */
.ad-loc { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--muted); font-size: .9rem; margin: 10px 0 0; }
.ad-loc .bi-geo-alt { color: var(--ink); font-size: 1rem; }
.ad-cond { margin-left: 4px; padding: 3px 10px; border-radius: 10px; background: rgba(36,87,230,.08); color: var(--accent); font-size: .75rem; font-weight: 700; }
.price-card .verified-badge { background: rgba(199,243,107,.45); color: #2f5e0a; padding: 6px 12px; border-radius: 20px; font-size: .8rem; }
.seller-cta .btn { border-radius: 50px; }
.ad-desc-mobile h2 { font-size: 1.1rem; font-weight: 800; color: var(--ink); margin-bottom: 6px; }
.ad-desc-mobile .ad-desc-text { color: #344054; font-size: .95rem; line-height: 1.55; margin-bottom: 18px; }
@media (max-width: 991.98px) {
    body.ad-page .price-card { background: none; border: 0; box-shadow: none; margin-bottom: 14px !important; }
    body.ad-page .price-card .card-body { padding: 4px 2px 0 !important; }
    body.ad-page .ad-h1 { font-size: 1.45rem; margin-bottom: 4px; }
    body.ad-page .ad-price.big { font-size: 1.9rem; }
    body.ad-page .seller-card { border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 2px 10px rgba(20,33,61,.05); margin-bottom: 18px !important; }
    body.ad-page .seller-card .card-body { padding: 16px !important; }
    body.ad-page .seller-card .avatar { width: 48px; height: 48px; }
    body.ad-page .seller-cta .btn { min-height: 50px; font-size: .95rem; }
    body.ad-page .ad-desc-mobile { padding: 0 2px; }
    body.ad-page .safety-card { border-radius: 18px; }
    body.ad-page .sticky-lg-top { position: static; }
    .ad-sticky .btn { border-radius: 50px; }
}

/* ================= Profile photos ================= */
.avatar, .chat-av, .nav-avatar, .pf-avatar { overflow: hidden; }
.has-img { background: #E4E7EC !important; padding: 0 !important; }
.has-img > img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.chat-av .dot, .pf-avatar .dot { z-index: 1; }
.chat-av.has-img, .pf-avatar.has-img { overflow: visible; }
.nav-avatar-link { text-decoration: none; display: inline-flex; }
.nav-avatar.has-img { display: inline-block; }
.avatar-edit { width: fit-content; }
.avatar-edit-btn { position: relative; display: inline-block; cursor: pointer; margin: 0; }
.avatar-edit-btn .avatar.lg { display: grid; place-items: center; }
.avatar-cam {
    position: absolute; right: -2px; bottom: 2px; width: 32px; height: 32px; border-radius: 50%;
    background: var(--lime); color: var(--ink); display: grid; place-items: center; font-size: .9rem;
    border: 3px solid var(--ink); box-shadow: 0 2px 8px rgba(0,0,0,.2); transition: transform .15s;
}
.avatar-edit-btn:hover .avatar-cam { transform: scale(1.1); }
.avatar-edit-btn:focus-within .avatar-cam { outline: 3px solid rgba(199,243,107,.6); }
.avatar.is-uploading { opacity: .6; }
#editModal .avatar { width: 56px; height: 56px; flex-shrink: 0; }

/* ================= Notifications ================= */
.notif-shell, .help-shell { max-width: 720px; margin: 0 auto; background: #fff; border-radius: 24px; padding: 20px; box-shadow: var(--shadow-sm); }
.notif-head { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.notif-head h1 { font-size: 1.35rem; font-weight: 800; color: var(--ink); margin: 0; }
.notif-list { list-style: none; margin: 0; padding: 0; }
.notif a { display: flex; align-items: center; gap: 12px; padding: 12px 10px; border-radius: 16px; text-decoration: none; color: var(--ink); }
.notif a:hover { background: var(--bg); }
.notif.unread a { background: rgba(36,87,230,.05); }
.notif + .notif { margin-top: 2px; }
.notif-ico { width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-size: 1.15rem; }
.notif-av { position: relative; flex-shrink: 0; }
.notif-av .chat-av { width: 46px; height: 46px; }
.notif-mini { position: absolute; right: -4px; bottom: -2px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .65rem; border: 2px solid #fff; }
.notif-ico.blue, .notif-mini.blue { background: rgba(36,87,230,.12); color: var(--accent); }
.notif-ico.green, .notif-mini.green { background: rgba(199,243,107,.45); color: #3f6212; }
.notif-ico.red, .notif-mini.red { background: #FEE4E2; color: #D92D20; }
.notif-ico.amber, .notif-mini.amber { background: #FEF0C7; color: #DC6803; }
.notif-ico.navy, .notif-mini.navy { background: rgba(20,33,61,.08); color: var(--ink); }
.notif-mini { background: #fff; }
.notif-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.notif-main strong { font-size: .93rem; }
.notif-main span { color: var(--muted); font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif.unread .notif-main span { color: #344054; }
.notif-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.notif-side small { color: var(--muted); font-size: .72rem; }
.notif-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }

/* ================= Help center & support ================= */
.help-title { font-size: 1.5rem; font-weight: 800; color: var(--ink); margin-bottom: 14px; }
.help-search { margin-bottom: 16px; }
.help-menu { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; margin-bottom: 24px; }
.help-menu a { display: flex; align-items: center; gap: 14px; padding: 14px 16px; text-decoration: none; color: var(--ink); }
.help-menu a + a { border-top: 1px solid var(--line); }
.help-menu a:hover { background: var(--bg); }
.help-menu a > .bi-chevron-right { color: #98A2B3; }
.hm-ico { width: 38px; height: 38px; flex-shrink: 0; border-radius: 12px; background: rgba(36,87,230,.08); color: var(--accent); display: grid; place-items: center; font-size: 1.1rem; }
.hm-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hm-txt strong { font-size: .95rem; font-weight: 600; }
.hm-txt small { color: var(--muted); font-size: .8rem; }
.help-h2 { font-size: 1.1rem; font-weight: 800; color: var(--ink); margin: 8px 0 10px; scroll-margin-top: 90px; }
.help-faq { margin-bottom: 18px; }
.help-faq details { border: 1px solid var(--line); border-radius: 14px; padding: 0 16px; margin-bottom: 8px; background: #fff; }
.help-faq summary { list-style: none; cursor: pointer; padding: 14px 24px 14px 0; font-weight: 600; color: var(--ink); position: relative; }
.help-faq summary::-webkit-details-marker { display: none; }
.help-faq summary::after { content: "\F282"; font-family: "bootstrap-icons"; position: absolute; right: 0; top: 14px; color: var(--muted); transition: transform .2s; }
.help-faq details[open] summary::after { transform: rotate(180deg); }
.help-faq details p, .help-faq details ul { color: #344054; font-size: .92rem; margin: 0 0 14px; }
.help-faq details ul { padding-left: 18px; }
.help-faq details li { margin-bottom: 6px; }
.support-shell { position: relative; max-width: 560px; text-align: center; padding-top: 28px; }
.support-back { position: absolute; top: 14px; left: 12px; }
.support-ico { position: relative; width: 76px; height: 76px; margin: 6px auto 16px; border-radius: 50%; background: rgba(36,87,230,.1); color: var(--accent); display: grid; place-items: center; font-size: 2rem; }
.support-ico > span { position: absolute; right: 2px; top: 6px; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 1rem; border: 3px solid #fff; }
.support-title { font-size: 1.35rem; font-weight: 800; color: var(--ink); margin-bottom: 6px; }
.support-sub { color: var(--muted); font-size: .93rem; margin: 0 auto 22px; max-width: 380px; }
.support-form { text-align: left; }
.support-from { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--bg); margin-bottom: 16px; }
.support-from .chat-av { width: 40px; height: 40px; font-size: .95rem; }
.support-from span:last-child { display: flex; flex-direction: column; min-width: 0; }
.support-from small { color: var(--muted); }
.support-btn { width: 100%; min-height: 52px; border-radius: 14px; font-weight: 700; }
.support-alt { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 18px; margin: 18px 0 0; font-size: .85rem; }
.support-alt a { color: var(--muted); text-decoration: none; }
.support-alt a:hover { color: var(--accent); }
@media (max-width: 767.98px) {
    .notif-page, .help-page { padding: 0 !important; }
    .notif-shell, .help-shell { border-radius: 0; box-shadow: none; padding: 16px; min-height: calc(100vh - 140px); }
    .support-shell { padding-top: 24px; }
}

/* ---------- Admin announcement bar ---------- */
.announce-bar {
    background: var(--lime); color: var(--ink);
    text-align: center; font-size: .85rem; font-weight: 600;
    padding: 8px 16px; line-height: 1.35;
}
.announce-bar i { margin-right: 6px; }

/* ---------- Account hero: clearer name & verified icon ---------- */
.profile-hero .verified-icon { color: var(--lime); font-size: 1.05rem; vertical-align: 2px; }
.profile-hero .text-white-50 { color: rgba(255,255,255,.82) !important; }
.profile-hero h1 { text-shadow: 0 1px 4px rgba(0,0,0,.25); }
.profile-hero .avatar.lg { border-color: rgba(199,243,107,.65); }

/* ---------- Account page: modern look & spacing ---------- */
.profile-hero {
    background:
        radial-gradient(420px 200px at 85% -10%, rgba(199,243,107,.16), transparent 60%),
        linear-gradient(135deg, #1a2b52, var(--navy));
    padding: 40px 20px 32px;
}
.profile-hero .avatar-edit { margin-bottom: 4px; }
.profile-hero h1 { font-size: 1.4rem; font-weight: 800; letter-spacing: -.01em; }
.acct-verified { border-radius: 50px; padding: 9px 18px; font-size: .82rem; }
.profile-hero .btn { margin-top: 4px; padding: 8px 20px; font-weight: 700; }

/* Menu list: icon chips + even rhythm */
.account-menu { box-shadow: var(--shadow-sm); }
.account-menu .list-group-item { padding: 12px 16px; border: 0; font-weight: 600; font-size: .95rem; }
.account-menu .list-group-item + .list-group-item { border-top: 1px solid var(--line); }
.account-menu .list-group-item:hover { background: var(--bg); }
.account-menu .list-group-item > i:first-child,
.account-menu form .btn > i:first-child {
    width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0;
    background: rgba(36,87,230,.09); color: var(--accent);
    display: inline-grid; place-items: center; font-size: 1.05rem;
    margin-right: 14px !important;
}
.account-menu form .btn > i:first-child { background: rgba(220,53,69,.1); color: #dc3545; }
.account-menu form .btn { font-weight: 600; font-size: .95rem; }
.account-menu form .btn:hover { background: rgba(220,53,69,.05); }
.account-menu .bi-chevron-right { font-size: .8rem; }
.account-menu .badge { font-size: .72rem; }

/* ---------- Aziza logo images ---------- */
.brand-img { height: 30px; width: auto; display: block; }
.auth-logo-img { height: 44px; width: auto; display: inline-block; }
.auth-logo { margin-bottom: 18px; }
.ob-logo-img { height: 84px; width: auto; }
@media (max-width: 767.98px) {
    .brand-img { height: 26px; }
    .auth-logo-img { height: 38px; }
    .ob-logo-img { height: 72px; }
}

/* ---------- Account pages: headers, my-ads cards, status pills ---------- */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head .section-title { margin-bottom: 0; }

.myad-list { display: flex; flex-direction: column; gap: 12px; }
.myad-card {
    display: flex; align-items: center; gap: 14px;
    background: #fff; border: 1px solid var(--line); border-radius: 16px;
    padding: 12px; box-shadow: var(--shadow-sm);
    transition: box-shadow .15s, transform .15s;
}
.myad-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.myad-thumb { width: 76px; height: 76px; border-radius: 12px; overflow: hidden; flex-shrink: 0; background: var(--bg); display: block; }
.myad-thumb img { width: 100%; height: 100%; object-fit: cover; }
.myad-nothumb { width: 100%; height: 100%; display: grid; place-items: center; color: var(--muted); font-size: 1.4rem; }
.myad-info { flex: 1; min-width: 0; }
.myad-title { display: block; font-weight: 700; color: var(--ink); text-decoration: none; font-size: .95rem; line-height: 1.3; margin-bottom: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.myad-title:hover { color: var(--accent); }
.myad-meta { font-size: .78rem; color: var(--muted); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.myad-price { font-weight: 800; color: var(--accent); font-size: .95rem; }
.myad-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex-shrink: 0; }
.myad-actions { display: flex; gap: 6px; }
.myad-btn {
    width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line);
    background: #fff; color: var(--muted); display: inline-grid; place-items: center;
    font-size: .95rem; cursor: pointer; transition: all .15s; text-decoration: none;
}
.myad-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.myad-btn.ok:hover { border-color: #16a34a; color: #16a34a; background: #f0fdf4; }
.myad-btn.del:hover { border-color: #dc3545; color: #dc3545; background: #fef2f2; }

.status-pill { font-size: .72rem; font-weight: 700; padding: 5px 12px; border-radius: 50px; white-space: nowrap; }
.status-pill.st-active { background: rgba(159,231,4,.25); color: #3f6603; }
.status-pill.st-pending { background: #FFF4DE; color: #B54708; }
.status-pill.st-sold { background: var(--bg); color: var(--muted); }
.status-pill.st-removed { background: #FEE4E2; color: #B42318; }

@media (max-width: 575.98px) {
    .myad-thumb { width: 64px; height: 64px; }
    .myad-side { align-items: flex-end; }
}

/* ---------- Input with leading icon + shop perks ---------- */
.input-icon { position: relative; }
.input-icon > i {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    color: var(--muted); font-size: 1.05rem; pointer-events: none;
}
.input-icon .form-control { padding-left: 44px; }
.input-icon:focus-within > i { color: var(--accent); }

.perk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.perk-list li { display: flex; gap: 12px; align-items: flex-start; }
.perk-list li > i {
    width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0;
    background: rgba(36,87,230,.09); color: var(--accent);
    display: grid; place-items: center; font-size: 1.05rem;
}
.perk-list strong { display: block; font-size: .9rem; }
.perk-list span { font-size: .8rem; color: var(--muted); }
.perk-note {
    margin-top: 18px; padding: 12px 14px; border-radius: 12px;
    background: var(--lime-soft); color: #3f6603; font-size: .82rem; font-weight: 600;
}
.perk-note i { margin-right: 6px; }

/* ---------- Info pages (about/terms/privacy) ---------- */
.info-hero { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.info-ico {
    width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0;
    background: rgba(36,87,230,.09); color: var(--accent);
    display: grid; place-items: center; font-size: 1.6rem;
}
.info-card { border-radius: 18px; }
.page-content { font-size: .95rem; line-height: 1.7; color: var(--ink-2); }
.page-content h5 {
    font-size: 1rem; font-weight: 800; color: var(--ink);
    margin: 24px 0 8px; padding-left: 14px; position: relative;
}
.page-content h5::before {
    content: ""; position: absolute; left: 0; top: 2px; bottom: 2px;
    width: 4px; border-radius: 2px; background: var(--lime);
}
.page-content h5:first-child { margin-top: 0; }
.page-content ul { padding-left: 0; list-style: none; }
.page-content ul li { padding: 6px 0 6px 26px; position: relative; }
.page-content ul li::before {
    content: ""; position: absolute; left: 8px; top: 15px;
    width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.page-content p { margin-bottom: 12px; }
.page-content p:last-child, .page-content ul:last-child { margin-bottom: 0; }
@media (max-width: 767.98px) {
    .info-ico { width: 46px; height: 46px; font-size: 1.3rem; border-radius: 14px; }
}

/* ---------- Empty states: consistent tinted icon chips ---------- */
.empty-state { padding: 48px 20px; }
.empty-state i {
    width: 76px; height: 76px; border-radius: 50%;
    background: var(--accent-soft); color: var(--accent);
    display: inline-grid; place-items: center;
    font-size: 2rem; opacity: 1; margin: 0 auto 16px;
}
.empty-state p { color: var(--muted); max-width: 380px; margin: 0 auto; }
.empty-state a { color: var(--accent); font-weight: 600; }

/* ---------- Category icons: lime-green brand treatment ---------- */
.cat-icon { background: var(--lime-soft); }
.cat-icon i { font-size: 1.35rem; color: #4d7c0f; }
.cat-card:hover .cat-icon i { color: #3f6603; }
.cchip i { font-size: .95rem; margin-right: 2px; color: #4d7c0f; }
.cchip.active i { color: #fff !important; }
.cb-ico i { font-size: 2.6rem; }
.cat-opt-ico i { font-size: 1.3rem; color: #4d7c0f; }
.cat-opt:has(input:checked) .cat-opt-ico i { color: var(--accent) !important; }
.ad-img-placeholder i { color: #7a9a2e; }
.myad-meta i { font-size: .85rem; color: #4d7c0f; }

/* ---------- Home: post CTA + mobile hero (mockup look) ---------- */
.post-cta {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    background: var(--accent); color: #fff;
    font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em;
    padding: 17px 20px; border-radius: 16px; margin-top: 20px;
    text-decoration: none; box-shadow: 0 12px 28px rgba(36,87,230,.35);
    transition: transform .15s, box-shadow .15s, background .15s;
}
.post-cta i { font-size: 1.25rem; }
.post-cta:hover { background: var(--accent-dark); color: #fff; transform: translateY(-1px); box-shadow: 0 14px 32px rgba(36,87,230,.42); }
.post-cta:active { transform: scale(.98); }

@media (max-width: 767.98px) {
    /* lime blob behind the hero art, like the mockup */
    .hero-split::before {
        content: ""; position: absolute; z-index: 0;
        right: -34px; bottom: -30px;
        width: 190px; height: 190px;
        background: var(--lime);
        border-radius: 62% 38% 55% 45% / 55% 48% 60% 40%;
    }
    .hero-copy { position: relative; z-index: 2; }
    .hero-title { font-size: 1.6rem; line-height: 1.15; }
    .hero-inner { border-radius: 22px; }
}
@media (min-width: 992px) {
    .post-cta { max-width: 480px; margin-left: auto; margin-right: auto; }
}

/* ---------- Larger Azizakit logo ---------- */
.brand-img { height: 38px; }
.auth-logo-img { height: 54px; }
.ob-logo-img { height: 96px; }
@media (max-width: 767.98px) {
    .brand-img { height: 32px; }
    .auth-logo-img { height: 44px; }
    .ob-logo-img { height: 80px; }
}

/* ---------- Even larger logo (round 2) ---------- */
.brand-img { height: 48px; }
.auth-logo-img { height: 66px; }
.ob-logo-img { height: 112px; }
@media (max-width: 767.98px) {
    .brand-img { height: 40px; }
    .auth-logo-img { height: 54px; }
    .ob-logo-img { height: 92px; }
}