/* ===== RFQ MARKETPLACE - MAIN STYLESHEET ===== */
:root {
    --primary: #2563EB;
    --primary-dark: #1D4ED8;
    --secondary: #64748B;
    --accent: #F59E0B;
    --success: #10B981;
    --danger: #EF4444;
    --bg-light: #F8FAFC;
    --card-shadow: 0 2px 12px rgba(0,0,0,.08);
    --radius: 6px;
}

body {
    background: var(--bg-light);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: #1E293B;
    overflow-x: clip; /* stray horizontal scroll left part of the modal backdrop uncovered */
    /* Sticky footer: fill at least the viewport so the footer stays at the bottom
       even when a page has little content (e.g. a short orders list). */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
body > main { flex: 1 0 auto; }
body > footer { flex-shrink: 0; }

/* Modal dark overlay: anchor to all four viewport edges (not 100vw/100vh, which
   mis-sizes at non-100% browser zoom) and sit above all page content. */
.modal-backdrop {
    position: fixed !important;
    inset: 0 !important;          /* top/right/bottom/left: 0 — full viewport at any zoom */
    width: auto !important;
    height: auto !important;
    z-index: 2000 !important;
}
.modal-backdrop.show { opacity: .5; }
.modal { z-index: 2001 !important; }

/* ── CARDS ── */
.card {
    border: none;
    border-radius: var(--radius);
    box-shadow: var(--card-shadow);
    transition: transform .2s, box-shadow .2s;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.card-header { border-radius: var(--radius) var(--radius) 0 0 !important; }

/* ── REQUEST CARDS ── */
.request-card { border-left: 4px solid var(--primary); }
.request-card .badge-category {
    background: #EFF6FF;
    color: var(--primary);
    border-radius: 20px;
    font-size: .75rem;
    padding: .3em .8em;
}
.request-card .budget-tag {
    background: #ECFDF5;
    color: var(--success);
    font-weight: 600;
    border-radius: 20px;
    padding: .3em .8em;
    font-size: .85rem;
}

/* ── HERO ── */
.hero-section {
    background: linear-gradient(135deg, #1E3A8A 0%, #2563EB 60%, #3B82F6 100%);
    color: #fff;
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}
.hero-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: rgba(255,255,255,.05);
    border-radius: 50%;
}
/* Hero image slideshow — sits behind the hero content, filling the exact same box. Images
   cross-fade on a timer; a dark tint keeps the white heading/search readable over any photo. */
.hero-section.hero-has-images { background: #1E3A8A; }
.hero-slideshow { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-slide {
    position: absolute; inset: 0;
    background-size: cover; background-position: center; background-repeat: no-repeat;
    opacity: 0; transition: opacity var(--hero-fade, 1200ms) ease;
}
.hero-slide.active { opacity: var(--hero-op, 1); }
/* No darkening overlay and no text shadow — at 100% opacity the image shows its original colours. */
/* Slide indicator dots — bottom-right of the hero; the current image's dot is larger. */
.hero-dots {
    position: absolute; right: 18px; bottom: 14px; z-index: 3;
    display: flex; align-items: center; gap: 8px;
}
.hero-dot {
    width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%;
    background: rgba(255,255,255,.5); cursor: pointer;
    transition: width .2s ease, height .2s ease, background .2s ease;
}
.hero-dot:hover { background: rgba(255,255,255,.8); }
.hero-dot.active { width: 14px; height: 14px; background: #FCD34D; }
.hero-section .search-bar {
    background: #fff;
    border-radius: 50px;
    padding: 8px 8px 8px 20px;
    box-shadow: 0 8px 32px rgba(0,0,0,.2);
}
.hero-section .search-bar input {
    border: none;
    outline: none;
    font-size: 1rem;
    background: transparent;
    width: 100%;
}

/* ── STATS ── */
.stat-card {
    background: #fff;
    border-radius: var(--radius);
    padding: 24px;
    text-align: center;
    box-shadow: var(--card-shadow);
}
.stat-card .stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1;
}
.stat-card .stat-label { color: var(--secondary); font-size: .9rem; }

/* ── SELLER BADGES ── */
.badge-basic { background: #DBEAFE; color: #1D4ED8; }
.badge-professional { background: #FEF3C7; color: #B45309; }
.badge-enterprise { background: #F0FDF4; color: #166534; }
.badge-verified { background: #EDE9FE; color: #6D28D9; }
.verified-tick { color: #7C3AED; font-size: .85em; }
/* Founding Seller — deliberately the loudest badge (gold gradient, not a flat
   tint like the plan badges): it marks the earliest sellers and is the reward
   /sell advertises, so it must not read as just another plan tier. */
.badge-founding {
    background: linear-gradient(135deg, #F59E0B, #FCD34D);
    color: #78350F; border: 1px solid #D97706; font-weight: 600;
    /* Fully rounded pill — the gold capsule reads as an award, not a label chip.
       Padding is nudged up so the text keeps clear of the rounded ends. */
    border-radius: 999px; padding: .35em .8em;
}

/* ── OFFER CARDS ── */
.offer-card { border: 1px solid #E2E8F0; }
.offer-card.accepted { border-color: var(--success); background: #F0FDF4; }
.offer-card.rejected { border-color: #E2E8F0; background: #F8FAFC; opacity: .75; }

/* ── CHAT ── */
.chat-container { height: 360px; overflow-y: auto; padding: 16px; background: #F8FAFC; border-radius: var(--radius); }
.chat-bubble { max-width: 70%; padding: 10px 14px; border-radius: 16px; margin-bottom: 8px; word-wrap: break-word; }
.chat-bubble.sent { background: var(--primary); color: #fff; margin-left: auto; border-bottom-right-radius: 4px; }
.chat-bubble.received { background: #fff; color: #1E293B; border-bottom-left-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.chat-time { font-size: .7rem; opacity: .7; margin-top: 4px; }

/* ── PRICING CARDS ── */
.pricing-card { position: relative; }
.pricing-card.featured { border: 2px solid var(--accent); }
.pricing-card .popular-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: #fff;
    padding: 4px 16px;
    border-radius: 20px;
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
}
.price-amount { font-size: 2.2rem; font-weight: 700; color: var(--primary); }
.price-period { font-size: .85rem; color: var(--secondary); }

/* ── SIDEBAR ── */
.sidebar-widget { margin-bottom: 24px; }

/* ── QUOTE PROGRESS ── */
.quote-progress { height: 8px; border-radius: 4px; }

/* ── NOTIFICATIONS ── */
.notif-item { border-left: 3px solid transparent; transition: all .2s; }
.notif-item.unread { border-left-color: var(--primary); background: #EFF6FF; }
.notif-item:hover { background: #F1F5F9; }

/* ── ADMIN ── */
.admin-sidebar { background: #1E293B; min-height: 100vh; }
.admin-sidebar .nav-link { color: #94A3B8; padding: 10px 16px; border-radius: 8px; margin: 2px 8px; }
.admin-sidebar .nav-link:hover, .admin-sidebar .nav-link.active { background: #334155; color: #fff; }
.admin-sidebar .nav-link i { width: 20px; }

/* ── FORMS ── */
.form-control, .form-select {
    border-radius: 8px;
    border: 1px solid #E2E8F0;
    padding: 10px 14px;
}
.form-control:focus, .form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.btn { border-radius: 8px; font-weight: 500; }
.btn-primary { background: var(--primary); border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }

/* ── AVATAR ── */
.avatar-sm { width: 36px; height: 36px; object-fit: cover; border-radius: 50%; }
.avatar-md { width: 56px; height: 56px; object-fit: cover; border-radius: 50%; }
.avatar-lg { width: 96px; height: 96px; object-fit: cover; border-radius: 50%; }

/* ── ADS ── */
.ad-container { background: #F1F5F9; border: 1px dashed #CBD5E1; border-radius: 8px; min-height: 90px; display: flex; align-items: center; justify-content: center; }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
    .hero-section { padding: 48px 0; }
    .stat-card .stat-number { font-size: 1.8rem; }
    .chat-bubble { max-width: 85%; }
}

/* ── ANIMATIONS ── */
.fade-in { animation: fadeIn .3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── LOADING ── */
.spinner-overlay {
    position: fixed; inset: 0; background: rgba(255,255,255,.7);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999; display: none;
}

/* ── TIGHTER SPACING (site-wide, public pages only — scoped to <main>) ── */
main { padding-top: 1rem !important; padding-bottom: 1rem !important; }
main .py-5 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
main .py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
main .my-5 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
main .mt-5 { margin-top: 1.5rem !important; }
main .mb-5 { margin-bottom: 1.5rem !important; }
main .p-5  { padding: 1.5rem !important; }
main .g-4  { --bs-gutter-x: .5rem; --bs-gutter-y: .5rem; }
main .g-3  { --bs-gutter-x: .5rem; --bs-gutter-y: .5rem; }

/* ── FOOTER TEXT & LINKS (visible on dark bg) ── */
footer .text-muted { color: #CBD5E1 !important; }
footer a.text-muted { transition: color .15s; }
footer a.text-muted:hover { color: #fff !important; text-decoration: underline !important; }

/* Bootstrap's row-cols stops at 6; these extend it for the home-page product grids. */
@media (min-width: 992px) { .row-cols-lg-8 > * { flex: 0 0 auto; width: 12.5%; } }
@media (min-width: 992px) { .row-cols-lg-7 > * { flex: 0 0 auto; width: 14.2857%; } }
/* Card grids that want 5 per row instead of the request/product grid partials'
   col-lg-2 (6 per row). Put on the .row; the partial cells stay untouched. */
@media (min-width: 992px) { .grid-lg-5 > * { flex: 0 0 auto; width: 20%; } }

/* ── PAGE INSET ──
   Pulls a full_width page's body into a narrower column: 8% breathing room each side.
   Header, hero and footer stay full width. Dropped below 992px, where 16% of the
   width is too much to give away. */
.page-inset { padding-left: 8%; padding-right: 8%; }
@media (max-width: 991.98px) { .page-inset { padding-left: 0; padding-right: 0; } }

/* ── BACK TO TOP ──
   Site-wide floating button (markup + behaviour live in includes/footer.php).
   Hidden until the page is scrolled; .show is toggled by the scroll handler. */
#backToTop {
    position: fixed; right: 24px; bottom: 24px; z-index: 1030;
    width: 44px; height: 44px; padding: 0;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem; box-shadow: 0 6px 16px rgba(15, 23, 42, .28);
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
#backToTop.show { opacity: 1; visibility: visible; transform: none; }
#backToTop.show:hover { transform: translateY(-2px); }
@media (max-width: 575px) { #backToTop { right: 14px; bottom: 14px; width: 40px; height: 40px; } }
@media (prefers-reduced-motion: reduce) { #backToTop { transition: none; } }
/* Never let it print. */
@media print { #backToTop { display: none; } }

/* ── TEXT LOGO ──
   Markup comes from site_name_html() in includes/functions.php, which splits the
   admin's site name at the first space. The tail word is shrunk and rotated, then
   pulled back with a negative margin so it tucks into the last letter of the head
   word instead of trailing after it. */
.brand-name { display: inline-flex; align-items: baseline; white-space: nowrap; }
/* The margin-left is tuned against the rotation: spinning the box about its
   bottom-left corner swings the glyphs back over the head word, so the margin
   pushes them clear again. Change one and the other needs retuning. */
.brand-tail {
    display: inline-block;
    font-size: .62em;
    margin-left: .6em;
    transform: rotate(-20deg) translateY(-.62em);
    transform-origin: left bottom;
}

/* Sale-type badge overlaid on a For-Sale product card image (index + requests pages).
   Shown when any seller set a sale type on the product; multiple different types → "Sale". */
.fs-sale-badge{position:absolute;top:8px;left:8px;z-index:2;display:inline-block;
    background:linear-gradient(135deg,#ff5f6d,#c1122d);color:#fff;font-size:.72rem;font-weight:600;
    letter-spacing:.3px;padding:2px 9px;border-radius:9px;line-height:1.4;white-space:nowrap;
    box-shadow:0 1px 4px rgba(0,0,0,.3)}
.fs-sale-badge-sm{top:3px;left:3px;font-size:.64rem;padding:2px 7px}