/* ═══════════════════════════════════════════════════════════════════
   TruAries Sourcing — Dark Brand Theme
   RAM logo + orange/ember fire accents
   Applied sitewide via <link> after inline <style> blocks
   ═══════════════════════════════════════════════════════════════════ */

/* ── FONTS ─────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Barlow:ital,wght@0,400;0,500;0,600;1,400&display=swap');

/* ── ROOT VARIABLE OVERRIDES ────────────────────────────────────────── */
:root {
    /* Dark backgrounds */
    --cream:      #0d0d0d;
    --white:      #141414;
    --gray-100:   #1a1a1a;
    --gray-200:   #272727;
    --gray-300:   #333333;

    /* Text — warm off-white on dark */
    --dark:       #f0e8df;
    --gray-900:   #090909;
    --gray-800:   #111111;
    --gray-700:   #aaa098;
    --gray-400:   #6a5f55;

    /* Ember / fire accents */
    --orange:       #e8770a;
    --orange-light: #ff9020;
    --orange-deep:  #c45f00;
    --orange-glow:  rgba(232, 119, 10, 0.22);
    --orange-bg:    rgba(232, 119, 10, 0.10);

    /* Status colors (dark-friendly) */
    --green:        #22c55e;
    --green-light:  rgba(34, 197, 94, 0.15);
    --green-dark:   #16a34a;
    --green-glow:   rgba(34, 197, 94, 0.12);
    --green-bg:     rgba(34, 197, 94, 0.08);
    --red:          #f87171;
    --red-bg:       rgba(239, 68, 68, 0.10);
    --blue:         #60a5fa;
    --blue-bg:      rgba(96, 165, 250, 0.10);
    --purple:       #a78bfa;

    /* Gradients */
    --gradient-hero:   linear-gradient(135deg, #0d0d0d 0%, #141414 50%, #1a0a00 100%);
    --gradient-accent: linear-gradient(135deg, #e8770a, #ff9020);
    --gradient-dark:   linear-gradient(135deg, #0d0d0d 0%, #141414 100%);
    --gradient-eco:    linear-gradient(135deg, #22c55e, #34d399);

    /* Shadows */
    --shadow-sm:   0 1px 4px rgba(0,0,0,0.6);
    --shadow-md:   0 4px 16px rgba(0,0,0,0.7);
    --shadow-lg:   0 12px 40px rgba(0,0,0,0.85);
    --shadow-glow: 0 0 40px rgba(232, 119, 10, 0.3);
}

/* ── BODY ───────────────────────────────────────────────────────────── */
html {
    background: #0d0d0d;
    color-scheme: dark;
}

body {
    background: #0d0d0d !important;
    color: #f0e8df !important;
}

/* ── TYPOGRAPHY ─────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    color: #f0e8df !important;
    font-family: 'Oswald', 'Space Grotesk', sans-serif !important;
    letter-spacing: 0.01em;
}

p {
    color: #c8b8a8;
}

a {
    color: var(--orange) !important;
}

a:hover {
    color: var(--orange-light) !important;
}

/* ── NAVIGATION ─────────────────────────────────────────────────────── */
nav {
    background: rgba(10, 10, 10, 0.97) !important;
    border-bottom: 1px solid #272727 !important;
    box-shadow: 0 1px 0 rgba(232, 119, 10, 0.06) !important;
}

nav.scrolled {
    background: rgba(10, 10, 10, 0.99) !important;
    box-shadow: 0 2px 20px rgba(0,0,0,0.8) !important;
}

.nav-logo img {
    /* subtle glow around RAM logo */
    filter: drop-shadow(0 0 8px rgba(232, 119, 10, 0.35));
}

.nav-link, .nav-search-link, .nav-name {
    color: #aaa098 !important;
}

.nav-link:hover, .nav-search-link:hover {
    color: var(--orange) !important;
}

.nav-avatar {
    background: var(--orange) !important;
    box-shadow: 0 0 12px rgba(232, 119, 10, 0.5) !important;
}

.btn-logout {
    background: transparent !important;
    border-color: #333 !important;
    color: #aaa098 !important;
}

.btn-logout:hover {
    background: #1a1a1a !important;
    border-color: #555 !important;
}

/* ── SIDEBAR ────────────────────────────────────────────────────────── */
.sidebar {
    background: #0a0a0a !important;
    border-right: 1px solid #1e1e1e !important;
}

.sidebar-label {
    color: #554c44 !important;
}

.sidebar-item {
    color: #aaa098 !important;
}

.sidebar-item:hover {
    background: #181818 !important;
    color: #f0e8df !important;
}

.sidebar-item.active {
    background: rgba(232, 119, 10, 0.12) !important;
    color: var(--orange) !important;
}

.plan-badge-sidebar {
    background: rgba(232, 119, 10, 0.08) !important;
    border: 1px solid rgba(232, 119, 10, 0.18) !important;
}

.plan-badge-sidebar .plan-name {
    color: var(--orange) !important;
}

.plan-badge-sidebar .plan-desc {
    color: #888 !important;
}

.plan-badge-sidebar.pro {
    background: rgba(124, 58, 237, 0.1) !important;
    border-color: rgba(124, 58, 237, 0.2) !important;
}

.plan-badge-sidebar.enterprise {
    background: rgba(245, 158, 11, 0.08) !important;
    border-color: rgba(245, 158, 11, 0.15) !important;
}

/* ── CARDS & PANELS ─────────────────────────────────────────────────── */
.auth-card,
.stat-card,
.card,
.pricing-card,
.product-card,
.dash-card,
.section-card,
.content-card,
.billing-section,
.blog-card,
.article-card,
.tool-card,
.info-card,
.feature-card,
.grid-card {
    background: #141414 !important;
    border-color: #272727 !important;
    color: #f0e8df !important;
}

.auth-form-panel {
    background: #0d0d0d !important;
}

/* ── FORM INPUTS ────────────────────────────────────────────────────── */
.form-group input,
.form-group select,
.form-group textarea,
input[type="email"],
input[type="password"],
input[type="text"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select {
    background: #1a1a1a !important;
    border-color: #363636 !important;
    color: #f0e8df !important;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
input:focus,
textarea:focus,
select:focus {
    background: #1e1e1e !important;
    border-color: var(--orange) !important;
    box-shadow: 0 0 0 3px rgba(232, 119, 10, 0.15) !important;
    outline: none !important;
}

input::placeholder,
textarea::placeholder {
    color: #555 !important;
}

.form-group label {
    color: #aaa098 !important;
}

/* ── PLAN SELECTION CARDS (register) ───────────────────────────────── */
.plan-card {
    background: #1a1a1a !important;
    border: 2px solid #363636 !important;
    color: #f0e8df !important;
}

.plan-card:hover {
    border-color: var(--orange) !important;
    background: rgba(232, 119, 10, 0.06) !important;
}

.plan-card.selected {
    border-color: var(--orange) !important;
    background: rgba(232, 119, 10, 0.10) !important;
}

.plan-name {
    color: #f0e8df !important;
}

.plan-price {
    color: #888 !important;
}

.plan-badge {
    background: var(--orange) !important;
    color: white !important;
}

.trial-note {
    background: rgba(232, 119, 10, 0.08) !important;
    border-color: rgba(232, 119, 10, 0.15) !important;
    color: #c8b8a8 !important;
}

/* ── BUTTONS ────────────────────────────────────────────────────────── */
.btn-primary,
button[type="submit"],
.cta-btn {
    background: var(--orange) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 20px rgba(232, 119, 10, 0.35) !important;
}

.btn-primary:hover,
button[type="submit"]:hover,
.cta-btn:hover {
    background: var(--orange-light) !important;
    box-shadow: 0 4px 28px rgba(232, 119, 10, 0.55) !important;
}

.btn-primary:disabled,
button[type="submit"]:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

.btn-secondary,
.btn-outline,
.btn-ghost {
    background: transparent !important;
    border-color: #363636 !important;
    color: #f0e8df !important;
}

.btn-secondary:hover,
.btn-outline:hover,
.btn-ghost:hover {
    border-color: var(--orange) !important;
    background: rgba(232, 119, 10, 0.08) !important;
}

.btn-upgrade {
    background: var(--orange) !important;
    box-shadow: 0 2px 12px rgba(232, 119, 10, 0.3) !important;
}

.btn-upgrade:hover {
    background: var(--orange-light) !important;
}

/* ── ALERT / TOAST / STATUS MESSAGES ───────────────────────────────── */
.error-msg,
.alert-error {
    background: rgba(248, 113, 113, 0.08) !important;
    border: 1px solid rgba(248, 113, 113, 0.25) !important;
    color: #fca5a5 !important;
}

.success-msg,
.toast-success,
.alert-success {
    background: rgba(34, 197, 94, 0.08) !important;
    border: 1px solid rgba(34, 197, 94, 0.25) !important;
    color: #86efac !important;
}

.toast,
.notification {
    background: #1a1a1a !important;
    border: 1px solid #2a2a2a !important;
    color: #f0e8df !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.8) !important;
}

/* ── MODALS ─────────────────────────────────────────────────────────── */
.modal-bg,
.modal-overlay,
.modal-backdrop {
    background: rgba(0, 0, 0, 0.88) !important;
}

.modal,
.modal-content,
.modal-panel,
.product-modal {
    background: #141414 !important;
    border: 1px solid #272727 !important;
    box-shadow: 0 24px 80px rgba(0,0,0,0.9) !important;
}

.modal-header,
.modal-title {
    border-bottom-color: #272727 !important;
    color: #f0e8df !important;
}

.modal-close,
.close-btn {
    color: #666 !important;
}

.modal-close:hover,
.close-btn:hover {
    color: #f0e8df !important;
    background: #272727 !important;
}

/* ── TABS ───────────────────────────────────────────────────────────── */
.tab-bar,
.nav-tabs,
.tabs {
    background: #0a0a0a !important;
    border-color: #1e1e1e !important;
}

.tab-btn,
.tab-item,
.tab-link {
    color: #666 !important;
}

.tab-btn:hover,
.tab-item:hover {
    color: #aaa098 !important;
}

.tab-btn.active,
.tab-item.active,
.tab-link.active {
    color: var(--orange) !important;
    border-bottom-color: var(--orange) !important;
    background: rgba(232, 119, 10, 0.05) !important;
}

/* ── TABLES ─────────────────────────────────────────────────────────── */
table {
    background: transparent !important;
}

thead,
th {
    background: #111 !important;
    color: #888 !important;
    border-color: #272727 !important;
}

td {
    border-color: #1e1e1e !important;
    color: #c8b8a8 !important;
}

tr:hover td,
tbody tr:hover {
    background: #181818 !important;
}

/* ── FILTER PILLS / CATEGORY PILLS ─────────────────────────────────── */
.filter-pill,
.category-pill,
.tag-pill,
.badge {
    background: #1a1a1a !important;
    border-color: #363636 !important;
    color: #aaa098 !important;
}

.filter-pill:hover,
.filter-pill.active,
.category-pill.active {
    background: rgba(232, 119, 10, 0.12) !important;
    border-color: var(--orange) !important;
    color: var(--orange) !important;
}

/* ── PRODUCT CARDS ──────────────────────────────────────────────────── */
.product-card {
    background: #141414 !important;
    border-color: #272727 !important;
    transition: transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.28s ease, border-color 0.2s !important;
    will-change: transform;
}

.product-card:hover {
    border-color: var(--orange) !important;
    box-shadow: 0 18px 52px rgba(0,0,0,0.75), 0 0 0 1px rgba(232, 119, 10, 0.28), 0 0 28px rgba(232,101,26,0.14) !important;
    transform: translateY(-9px) !important;
}

.product-name,
.product-title {
    color: #f0e8df !important;
}

.product-price,
.price {
    color: var(--orange) !important;
}

.product-supplier,
.supplier-label {
    color: #666 !important;
}

/* ── SEARCH BAR ─────────────────────────────────────────────────────── */
.search-bar,
.search-container,
.search-wrapper {
    background: #1a1a1a !important;
    border-color: #363636 !important;
}

.search-bar:focus-within,
.search-container:focus-within {
    border-color: var(--orange) !important;
    box-shadow: 0 0 0 3px rgba(232, 119, 10, 0.15) !important;
}

.search-input input,
.search-bar input {
    background: transparent !important;
    color: #f0e8df !important;
}

/* ── HERO SECTION ───────────────────────────────────────────────────── */
.hero,
.hero-section {
    background: linear-gradient(135deg, #0d0d0d 0%, #141414 50%, #1a0a00 100%) !important;
}

/* ── PRICING ────────────────────────────────────────────────────────── */
.pricing-card {
    background: #141414 !important;
    border-color: #272727 !important;
}

.pricing-card.featured,
.pricing-card.popular,
.pricing-card.highlighted {
    border-color: var(--orange) !important;
    box-shadow: 0 0 50px rgba(232, 119, 10, 0.2) !important;
    background: #181818 !important;
}

.price-amount,
.pricing-price {
    color: #f0e8df !important;
}

.price-feature,
.pricing-feature {
    color: #aaa098 !important;
}

.price-check,
.feature-check {
    color: var(--orange) !important;
}

/* ── FOOTER ─────────────────────────────────────────────────────────── */
footer,
.footer,
.site-footer {
    background: #080808 !important;
    border-top: 1px solid #1e1e1e !important;
    color: #555 !important;
}

.footer-link,
footer a,
.site-footer a {
    color: #666 !important;
}

.footer-link:hover,
footer a:hover,
.site-footer a:hover {
    color: var(--orange) !important;
}

.footer-brand,
.footer-logo {
    color: #f0e8df !important;
}

/* ── BLOG / ARTICLES ────────────────────────────────────────────────── */
.blog-card,
.article-card,
.post-card {
    background: #141414 !important;
    border-color: #272727 !important;
}

.blog-card:hover,
.article-card:hover {
    border-color: var(--orange) !important;
}

.article-title,
.post-title,
.blog-title {
    color: #f0e8df !important;
}

.article-excerpt,
.post-excerpt {
    color: #aaa098 !important;
}

.article-meta,
.post-meta {
    color: #666 !important;
}

.article-body p,
.post-body p,
.article-content p {
    color: #c8b8a8 !important;
}

.article-body h2,
.article-body h3,
.post-body h2,
.post-body h3 {
    color: #f0e8df !important;
}

/* ── STATS / TRACTION BADGES ────────────────────────────────────────── */
.traction-badge,
.stat-badge,
.traction-stat {
    background: rgba(232, 119, 10, 0.08) !important;
    border-color: rgba(232, 119, 10, 0.18) !important;
    color: var(--orange) !important;
}

.stat-number,
.traction-number {
    color: #f0e8df !important;
}

.stat-label,
.traction-label {
    color: #777 !important;
}

/* ── DASHBOARD OVERVIEW ─────────────────────────────────────────────── */
.dash-stat,
.overview-card,
.kpi-card {
    background: #141414 !important;
    border-color: #272727 !important;
}

.kpi-value,
.stat-value {
    color: #f0e8df !important;
}

.kpi-label,
.stat-key {
    color: #666 !important;
}

/* ── CONTRACTOR DIRECTORY ───────────────────────────────────────────── */
.contractor-card {
    background: #141414 !important;
    border-color: #272727 !important;
}

.contractor-card:hover {
    border-color: var(--orange) !important;
}

.contractor-name {
    color: #f0e8df !important;
}

.contractor-trade,
.contractor-location {
    color: #888 !important;
}

/* ── ADMIN ──────────────────────────────────────────────────────────── */
.admin-sidebar,
.admin-nav {
    background: #0a0a0a !important;
    border-right-color: #1e1e1e !important;
}

.admin-nav-item:hover {
    background: #181818 !important;
}

.admin-nav-item.active {
    background: rgba(232, 119, 10, 0.10) !important;
    color: var(--orange) !important;
}

.admin-panel,
.admin-card {
    background: #141414 !important;
    border-color: #272727 !important;
}

/* ── DECK / PITCH (investor deck) ───────────────────────────────────── */
.deck-slide,
.pitch-slide,
.slide {
    background: #0d0d0d !important;
    color: #f0e8df !important;
}

.slide-nav-btn {
    background: rgba(232, 119, 10, 0.15) !important;
    border-color: rgba(232, 119, 10, 0.3) !important;
    color: var(--orange) !important;
}

.slide-nav-btn:hover {
    background: var(--orange) !important;
    color: white !important;
}

/* ── MISC UTILITY OVERRIDES ─────────────────────────────────────────── */
.divider,
hr {
    border-color: #272727 !important;
}

.section-divider {
    background: #272727 !important;
}

.tag,
.chip {
    background: #1a1a1a !important;
    color: #aaa098 !important;
    border-color: #333 !important;
}

.tag.orange,
.chip.orange,
.tag.accent {
    background: rgba(232, 119, 10, 0.12) !important;
    color: var(--orange) !important;
    border-color: rgba(232, 119, 10, 0.25) !important;
}

.tooltip,
.popover {
    background: #1a1a1a !important;
    color: #f0e8df !important;
    border-color: #363636 !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.8) !important;
}

/* ── LOADING / SKELETONS ────────────────────────────────────────────── */
.skeleton,
.loading-placeholder {
    background: linear-gradient(90deg, #1a1a1a 25%, #242424 50%, #1a1a1a 75%) !important;
    background-size: 200% 100% !important;
}

/* ── SCROLLBAR ──────────────────────────────────────────────────────── */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: #0d0d0d;
}

::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--orange);
}

/* ── SELECTION ──────────────────────────────────────────────────────── */
::selection {
    background: rgba(232, 119, 10, 0.3);
    color: #fff;
}

/* ── SUBTLE EMBER ATMOSPHERE ────────────────────────────────────────── */
/* Grain overlay for depth */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
    opacity: 0.018;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    background-repeat: repeat;
}

/* ── AUTH PHOTO PANEL OVERLAY (login/register) ──────────────────────── */
.auth-photo-panel::after {
    background: linear-gradient(135deg, rgba(13,13,13,0.82) 0%, rgba(26,10,0,0.55) 100%) !important;
}

/* ── TIER BADGES (dark-friendly) ───────────────────────────────────── */
.tier-starter,
.tier-basic {
    background: rgba(96, 165, 250, 0.15) !important;
    color: #93c5fd !important;
}

.tier-pro {
    background: rgba(167, 139, 250, 0.15) !important;
    color: #c4b5fd !important;
}

.tier-enterprise {
    background: rgba(232, 119, 10, 0.15) !important;
    color: var(--orange) !important;
}

/* ── HERO / LANDING SECTIONS ────────────────────────────────────────── */
.hero-wrapper,
.landing-hero,
.hero-bg {
    background: linear-gradient(135deg, #0d0d0d 0%, #141414 60%, #1a0a00 100%) !important;
}

/* ── FEATURE SECTIONS ───────────────────────────────────────────────── */
.features-section,
.benefits-section,
.how-it-works {
    background: #0d0d0d !important;
}

.feature-icon-wrap {
    background: rgba(232, 119, 10, 0.10) !important;
    color: var(--orange) !important;
}

/* ── SECTION ALTERNATING BACKGROUNDS ───────────────────────────────── */
section {
    background: transparent;
}

.section-alt,
.bg-gray,
.bg-light {
    background: #111 !important;
}

/* ── PAIN CARDS / AUDIENCE CARDS ────────────────────────────────────── */
.pain-card,
.audience-card {
    background: #141414 !important;
    border-color: #272727 !important;
}

/* ── CATEGORY LANDING SECTIONS ──────────────────────────────────────── */
.materials-hero,
.category-hero {
    background: linear-gradient(135deg, #0d0d0d, #1a0a00) !important;
}

/* ── TOOL RENTAL ─────────────────────────────────────────────────────── */
.tool-rental-section,
.tool-rental-hero {
    background: #0a0a0a !important;
}

.tool-category-card {
    background: #141414 !important;
    border-color: #272727 !important;
}

.tool-category-card:hover {
    border-color: var(--orange) !important;
    background: #1a1a1a !important;
}

/* ── PRICING PAGE ────────────────────────────────────────────────────── */
.pricing-hero {
    background: linear-gradient(135deg, #0d0d0d, #1a0a00) !important;
}

/* ── CONTRACTOR PAGES ────────────────────────────────────────────────── */
.contractor-hero {
    background: linear-gradient(135deg, #0d0d0d, #141414) !important;
}

/* ── MISC INLINE STYLE OVERRIDES ────────────────────────────────────── */
/* Footer copyright */
footer p[style*="color:#555"],
footer p[style*="color: #555"] {
    color: #888 !important;
}

/* Quote form */
.quote-overlay {
    background: rgba(0, 0, 0, 0.9) !important;
}

.quote-form-card {
    background: #141414 !important;
    border-color: #272727 !important;
}

.quote-guest-divider span {
    background: #141414 !important;
    color: #888 !important;
}

.quote-guest-divider {
    border-color: #272727 !important;
}

/* ── DROPDOWN MENUS ──────────────────────────────────────────────────── */
.dropdown,
.dropdown-menu,
.user-dropdown {
    background: #1a1a1a !important;
    border-color: #2a2a2a !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.8) !important;
}

.dropdown-item {
    color: #c8b8a8 !important;
}

.dropdown-item:hover {
    background: #242424 !important;
    color: #f0e8df !important;
}

/* ── INPUT DATE PICKER ───────────────────────────────────────────────── */
input[type="date"] {
    color-scheme: dark;
}

/* ── QUANTITY CONTROLS ───────────────────────────────────────────────── */
.qty-input-wrap {
    background: #1a1a1a !important;
    border-color: #363636 !important;
}

.qty-btn {
    color: #aaa098 !important;
}

.qty-btn:hover {
    background: #242424 !important;
}

/* ── SAVE BUTTON HOVER ───────────────────────────────────────────────── */
.save-btn:hover {
    background: #1a1a1a !important;
}

/* ── PAGINATION ──────────────────────────────────────────────────────── */
.page-btn {
    background: #1a1a1a !important;
    border-color: #363636 !important;
    color: #c8b8a8 !important;
}

.page-btn:hover,
.page-btn.active {
    background: var(--orange) !important;
    border-color: var(--orange) !important;
    color: white !important;
}

/* ── PROGRESS BARS ───────────────────────────────────────────────────── */
.progress-bar {
    background: #1a1a1a !important;
}

.progress-fill {
    background: var(--orange) !important;
}

/* ── RANGE INPUTS ────────────────────────────────────────────────────── */
input[type="range"] {
    accent-color: var(--orange);
}

/* ── CHECKBOXES / RADIOS ─────────────────────────────────────────────── */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--orange);
}

/* ── PITCH PAGE ──────────────────────────────────────────────────────── */
.pitch-hero,
.pitch-section {
    background: #0d0d0d !important;
    color: #f0e8df !important;
}

.pitch-card,
.traction-card,
.metric-card {
    background: #141414 !important;
    border-color: #272727 !important;
}

/* ── NO ACCOUNT NEEDED BADGE ─────────────────────────────────────────── */
.no-account-badge,
.anon-badge {
    background: rgba(34, 197, 94, 0.1) !important;
    border-color: rgba(34, 197, 94, 0.2) !important;
    color: #86efac !important;
}

/* ── SUPPLIER TOGGLE CHIPS ───────────────────────────────────────────── */
.supplier-chip {
    background: #1a1a1a !important;
    border-color: #363636 !important;
    color: #aaa098 !important;
}

.supplier-chip.active {
    background: rgba(232, 119, 10, 0.12) !important;
    border-color: var(--orange) !important;
    color: var(--orange) !important;
}

/* ── BRAND NAME FOOTER SLOGAN ────────────────────────────────────────── */
.brand-slogan {
    color: #888 !important;
}

/* ── HERO PHOTO SECTION OVERRIDES ───────────────────────────────────── */
/* Override the cream-tinted photo overlay with dark ember overlay */
.hero-photo-section {
    background: #0d0d0d !important;
}

.hero-photo-section::before {
    opacity: 0.15 !important;
}

/* Replace the cream overlay gradient with a dark one */
.hero-photo-section::after {
    background: linear-gradient(to bottom, rgba(13,13,13,0.6) 0%, rgba(13,13,13,0.35) 40%, rgba(13,13,13,0.8) 100%) !important;
}

/* Enhance hero orb glows for dark mode */
.hero::before {
    background: radial-gradient(circle, rgba(232, 119, 10, 0.15) 0%, transparent 70%) !important;
}

.hero::after {
    background: radial-gradient(circle, rgba(232, 119, 10, 0.08) 0%, transparent 70%) !important;
}

/* ── PWA INSTALL PROMPT ─────────────────────────────────────────────── */
.pwa-install-banner {
    display: none;
    position: fixed;
    right: 0;
    bottom: 4.5rem;
    left: 0;
    z-index: 10000;
    padding: 0.75rem 1rem calc(1rem + env(safe-area-inset-bottom));
    background: #111827;
    border-top: 2px solid var(--orange);
    box-shadow: 0 -4px 20px rgba(232, 119, 10, 0.25);
    color: #f8fafc;
}

.pwa-install-banner.pwa-install-visible {
    display: block;
    animation: pwa-install-enter 0.25s ease-out;
}

.pwa-install-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: min(100%, 640px);
    margin: 0 auto;
}

.pwa-install-content {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.75rem;
}

.pwa-install-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 10px;
    object-fit: cover;
}

.pwa-install-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.15rem;
}

.pwa-install-title {
    color: #f8fafc;
    font-size: 0.95rem;
    line-height: 1.2;
}

.pwa-install-description {
    overflow-wrap: anywhere;
    color: #94a3b8;
    font-size: 0.8rem;
    line-height: 1.35;
}

.pwa-install-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.6rem;
}

.pwa-install-button,
.pwa-install-dismiss {
    min-height: 44px;
    border-radius: 10px;
    cursor: pointer;
    font: inherit;
    -webkit-tap-highlight-color: transparent;
}

.pwa-install-button {
    padding: 0.75rem 1rem;
    border: 0;
    background: var(--gradient-accent);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
}

.pwa-install-button:hover {
    background: var(--orange-light);
}

.pwa-install-dismiss {
    padding: 0.75rem 1rem;
    border: 1px solid #374151;
    background: #1f2937;
    color: #cbd5e1;
    font-size: 0.85rem;
    white-space: nowrap;
}

.pwa-install-dismiss:hover {
    border-color: var(--orange);
    color: #f8fafc;
}

.pwa-install-button:focus-visible,
.pwa-install-dismiss:focus-visible {
    outline: 3px solid var(--orange-light);
    outline-offset: 3px;
}

@keyframes pwa-install-enter {
    from { opacity: 0; transform: translateY(0.75rem); }
    to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 769px) {
    .pwa-install-banner {
        bottom: 0;
    }
}

@media (max-width: 520px) {
    .pwa-install-inner {
        display: block;
    }

    .pwa-install-content {
        margin-bottom: 0.75rem;
    }

    .pwa-install-actions {
        width: 100%;
    }

    .pwa-install-button {
        flex: 1;
    }
}

@media (max-width: 359px) {
    .pwa-install-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .pwa-install-button,
    .pwa-install-dismiss {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pwa-install-banner.pwa-install-visible {
        animation: none;
    }
}

/* ── EMBER GLOW on focused RAM logo ─────────────────────────────────── */
.logo img,
.nav-logo img,
.logo-img {
    filter: drop-shadow(0 0 8px rgba(232, 119, 10, 0.4));
    transition: filter 0.3s ease;
}

.logo:hover img,
.nav-logo:hover img {
    filter: drop-shadow(0 0 14px rgba(232, 119, 10, 0.65));
}

/* ── BACKGROUND FALLBACKS ────────────────────────────────────────────── */
/* Catch-all for any element that explicitly sets bg to white */
[style*="background: white"],
[style*="background:white"],
[style*="background: #fff"],
[style*="background:#fff"],
[style*="background: #FFF"],
[style*="background: #FFFFFF"],
[style*="background:#FFFFFF"] {
    background-color: #141414 !important;
}

/* Catch-all for text set to dark text colors */
[style*="color: #333"],
[style*="color:#333"],
[style*="color: #222"],
[style*="color:#222"],
[style*="color: #111"],
[style*="color:#111"],
[style*="color: #000"],
[style*="color:#000"] {
    color: #c8b8a8 !important;
}