/* ==============================================================
   Vistaarly · base/gap-fixes.css
   -----------------------------------------------------------------
   2026-07 CSS audit: every class below is referenced by a real PHP
   template but had ZERO matching CSS anywhere in the codebase, so it
   rendered with browser defaults (unstyled forms, square avatars,
   unstyled danger buttons, no page padding, etc). This file is the
   fix — one place, loaded on every page (public + admin) so nothing
   like this goes unstyled again. Uses only tokens already defined in
   base/variables.css / style.css so it stays visually consistent with
   the rest of the design system.
   ============================================================== */

/* ---------- Generic simple-content wrapper ----------
   Used by: contact, terms, privacy, feature-listing, verify-email,
   forgot-password, reset-password, subscribe, profile (auth-page) —
   plain "read this / fill this form" pages that aren't the two-panel
   .v-auth-shell login/register layout. */
.auth-page {
    max-width: 560px;
    margin: 48px auto;
    padding: 0 24px 64px;
}
.auth-page h1 {
    font-family: var(--display, 'Fraunces', serif);
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--ink-950, #0b0f19);
}
.auth-page > p:first-of-type { color: var(--ink-500, #6b7280); margin-bottom: 24px; }
.auth-page form { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; }
.auth-page label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 500; color: var(--ink-700, #374151); }

/* Reused as-is by faq.php ("my-cart-page" was copy-pasted from the cart
   page markup as a quick centered wrapper) — harmless fallback; the
   real cart page still gets its own look from pages/cart-checkout.css,
   which loads after this file and wins. */
.my-cart-page { max-width: 820px; margin: 40px auto; padding: 0 24px 64px; }

/* Simple hero banner (pages/how-it-works.php) — smaller, lighter
   version of the landing page's .v-hero, for interior pages. */
.hero {
    max-width: 820px;
    margin: 48px auto 8px;
    padding: 0 24px;
    text-align: center;
}
.hero h1 { font-family: var(--display, 'Fraunces', serif); font-size: 2.1rem; margin-bottom: 12px; }
.hero p { color: var(--ink-500, #6b7280); font-size: 1.05rem; line-height: 1.6; }
.how-it-works-teaser {
    background: var(--cream-50, #fffdf9);
    border: 1px solid var(--ink-200, #e5e7eb);
    border-radius: var(--radius-lg, 20px);
    padding: 32px;
    margin: 32px auto;
}
.how-it-works-teaser ol { padding-left: 20px; display: flex; flex-direction: column; gap: 14px; }

/* ---------- Avatar + verified badge (public pages) ----------
   pages/listing.css / pages/reviews.css only style ".avatar-lg" when
   it's nested inside their own header wrapper; user/profile.php uses
   a bare .avatar with no such wrapper, so it needs its own base rule. */
.avatar {
    display: inline-block;
    border-radius: 999px;
    object-fit: cover;
    background: var(--cream-100, #fbf6ec);
    border: 2px solid var(--color-bg, #fff);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(11,15,25,0.06));
}
.avatar-lg { width: 72px; height: 72px; }

.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--radius-pill, 999px);
    font-size: 12px;
    font-weight: 600;
    background: var(--ink-100, #f3f4f6);
    color: var(--ink-700, #374151);
}
.badge-verified { background: var(--success-tint, #ecfdf5); color: var(--success, #059669); }

.escrow-seal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: 2px solid var(--success, #059669);
    color: var(--success, #059669);
    background: var(--success-tint, #ecfdf5);
    font-weight: 700;
}
.escrow-seal-hero { width: 48px; height: 48px; font-size: 1.1rem; margin-bottom: 12px; }

/* ---------- Dashboard page wrappers (buyer + seller) ---------- */
.dashboard-page { max-width: 1200px; margin: 0 auto; padding: 32px 24px 72px; }
.buyer-dashboard, .seller-dashboard { /* role hooks only — layout comes from .dashboard-page */ }

.dashboard-payout-summary {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin: 8px 0 24px;
}
.dashboard-recent-bookings { margin-top: 32px; }
.dashboard-recent-bookings h2 {
    font-family: var(--display, 'Fraunces', serif);
    font-size: 1.3rem;
    margin-bottom: 16px;
}

/* Generic centered "outcome" page (payment success / error / cancelled) */
.payment-success-page {
    max-width: 560px;
    margin: 64px auto;
    padding: 0 24px;
    text-align: center;
}

/* ---------- Post a listing form ---------- */
.post-ad-page { max-width: 760px; margin: 40px auto; padding: 0 24px 72px; }
.post-ad-page form { display: flex; flex-direction: column; gap: 16px; }
.post-ad-note { color: var(--ink-500, #6b7280); font-size: 13px; margin: -4px 0 12px; }
.niche-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    margin: 4px 6px 0 0;
    border: 1px solid var(--ink-200, #e5e7eb);
    border-radius: var(--radius-pill, 999px);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}
.package-row {
    border: 1px solid var(--ink-200, #e5e7eb);
    border-radius: var(--radius, 12px);
    padding: 20px;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.package-row h3 { font-size: 15px; margin: 0; color: var(--ink-800, #1f2937); }

/* ---------- My listings ---------- */
.my-listings-page { max-width: 1200px; margin: 0 auto; padding: 32px 24px 72px; }
.my-listings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.my-listings-header h1 { margin: 0; }
.my-listings-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.listing-rejection-reason {
    margin-top: 4px;
    font-size: 12px;
    color: var(--danger, #dc2626);
}

/* ---------- Wishlist ---------- */
.my-wishlist-page { max-width: 1200px; margin: 0 auto; padding: 32px 24px 72px; }
.wishlist-item { display: flex; flex-direction: column; gap: 10px; }

/* Inline action forms (Pause / Resume / Delete / Remove-from-wishlist)
   that sit next to buttons — without this they default to display:block
   and stack vertically instead of sitting in a row. */
.admin-inline-form { display: inline-flex; }

/* ---------- Buyer delivery hero (booking/booking-status.php) ----------
   Page already inlines most of the look; this just adds the responsive
   behaviour and default spacing the inline style doesn't cover. */
.v-delivery-hero { max-width: 100%; }
@media (max-width: 640px) {
    .v-delivery-hero { padding: 20px !important; }
}

/* ---------- Small utility ---------- */
.mb-0 { margin-bottom: 0 !important; }

/* ==============================================================
   Admin-only additions (harmless no-ops on public pages)
   ============================================================== */
.admin-page-head-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: -8px 0 20px;
}

.admin-listing-queue {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 32px;
}
.admin-listing-influencer,
.admin-listing-description,
.admin-listing-niches,
.admin-listing-packages {
    background: var(--surface, #fffdf9);
    border: 1px solid var(--line, #e5e7eb);
    border-radius: var(--radius-md, 10px);
    padding: 20px 22px;
    margin-bottom: 20px;
}
.admin-listing-influencer h3,
.admin-listing-description h3,
.admin-listing-niches h3,
.admin-listing-packages h3 {
    margin-top: 0;
    font-size: 1rem;
    color: var(--ink, #0b0f19);
}
.admin-listing-images { margin-bottom: 20px; }

/* ---------- Listing detail bio section (pages/listing.php) ---------- */
.seller-profile-bio {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--ink-200, #e5e7eb);
}
.seller-profile-bio h2 {
    font-family: var(--display, 'Fraunces', serif);
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 10px;
}
.seller-profile-bio p { color: var(--ink-700, #374151); line-height: 1.65; }