/*
 * Color Theme V2 — Orange & White
 * Primary: #f26d1c  |  Dark: #d95a0a  |  Tint bg: #fff5ee
 * Loaded as the last <link> in <head> — !important wins over all inline <style> blocks.
 */

/* ── Body background ────────────────────────────────────── */
body { background: #f7f3ef !important; }

/* ── Arrow buttons (profile sliders) ────────────────────── */
.arrow-btn { color: #f26d1c !important; }
.arrow-btn:hover {
    background: #f26d1c !important;
    color: #fff !important;
    box-shadow: 0 0 8px rgba(242,109,28,0.8) !important;
}

/* ── Footer gradient (v1 & v2 footers) ──────────────────── */
.footer-gradient {
    background: linear-gradient(135deg, #b84a00 0%, #f26d1c 50%, #b84a00 100%) !important;
}
.footer-link:hover { color: #ffd5b0 !important; }

/* ── Navss bar ───────────────────────────────────────────── */
.navss { box-shadow: 0 4px 12px rgba(242,109,28,0.15) !important; }

/* ── Nav pill items ──────────────────────────────────────── */
li.nav-item { box-shadow: 0 4px 12px rgba(242,109,28,0.12) !important; }
li.nav-item:hover { background-color: #fff5ee !important; }

/* ── Bootstrap utility overrides ────────────────────────── */
.shadow-sm { box-shadow: 0 4px 12px rgba(242,109,28,0.12) !important; }
.bg-light   { box-shadow: 0 4px 12px rgba(242,109,28,0.12) !important; }

/* ── Mobile bottom card ──────────────────────────────────── */
.mobbottom3 {
    box-shadow: 0 4px 12px rgba(242,109,28,0.12) !important;
    border-color: #ffe0cc !important;
}

/* ── Active nav link ─────────────────────────────────────── */
.customnav .nav-linkcus.active {
    box-shadow: 0 4px 12px rgba(242,109,28,0.33) !important;
}

/* ── Dropdown items ──────────────────────────────────────── */
.dropdown-item:hover { color: #d95a0a !important; }
.clickable-card:hover { background-color: #fff5ee !important; }

/* ═══════════════════════════════════════════════════════════
   OBVIOUS ORANGE OVERRIDES — replaces #ff4d4d / #8b1538 / #c2185b
   These are the inline <style> colors used in header.php / header_v2.php / header_v3.php
   ═══════════════════════════════════════════════════════════ */

/* Anything that was #ff4d4d (bright red) → orange */
a[style*="#ff4d4d"],
span[style*="#ff4d4d"],
div[style*="#ff4d4d"] { color: #f26d1c !important; }

/* ── header.php inline CSS targets ──────────────────────── */
/* The notification dot / badge uses #ff4d4d */
.badge-notify { background: #f26d1c !important; }

/* Profile nav link hover (was #ff4d4d) */
.nav-linkcus:hover,
.nav-linkcus.active { color: #f26d1c !important; }

/* "Upgrade" / CTA button in nav (maroon gradient → orange) */
.upgrade-btn,
.btn-upgrade,
.cta-btn,
a.btn-danger,
button.btn-danger,
input[type="submit"].btn-danger {
    background: linear-gradient(135deg, #d95a0a, #f26d1c) !important;
    border-color: #d95a0a !important;
    color: #fff !important;
}
a.btn-danger:hover,
button.btn-danger:hover {
    background: linear-gradient(135deg, #b84a00, #d95a0a) !important;
    border-color: #b84a00 !important;
}

/* Bootstrap .btn-primary → orange */
.btn-primary {
    background-color: #f26d1c !important;
    border-color: #d95a0a !important;
    color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: #d95a0a !important;
    border-color: #b84a00 !important;
}

/* Bootstrap .btn-danger → orange */
.btn-danger {
    background-color: #f26d1c !important;
    border-color: #d95a0a !important;
    color: #fff !important;
}
.btn-danger:hover, .btn-danger:focus {
    background-color: #d95a0a !important;
    border-color: #b84a00 !important;
}

/* ── header.php : top-nav gradient bar (was maroon) ─────── */
/* The main navbar background gradient */
.navbar-maroon,
nav.navbar[style*="#8b1538"],
nav.navbar[style*="#c2185b"],
.top-nav-gradient {
    background: linear-gradient(135deg, #b84a00 0%, #f26d1c 50%, #b84a00 100%) !important;
}

/* ── header_v3.php hv3 components ───────────────────────── */
.hv3-links .hv3-link { box-shadow: 0 4px 12px rgba(242,109,28,0.12) !important; }
.hv3-links .hv3-link:hover,
.hv3-links .hv3-link.active {
    background: #fff5ee !important;
    box-shadow: 0 4px 16px rgba(242,109,28,0.22) !important;
    color: #d95a0a !important;
}
.hv3-links .hv3-link .hv3-badge { background: #f26d1c !important; }

.hv3-icon-btn { box-shadow: 0 4px 12px rgba(242,109,28,0.12) !important; }
.hv3-icon-btn:hover {
    background: #fff5ee !important;
    box-shadow: 0 4px 16px rgba(242,109,28,0.22) !important;
    color: #d95a0a !important;
}
.hv3-icon-btn .hv3-badge-dot { background: #f26d1c !important; }

.hv3-avatar-btn {
    border-color: rgba(242,109,28,0.30) !important;
    box-shadow: 0 4px 12px rgba(242,109,28,0.12) !important;
}
.hv3-avatar-btn:hover {
    border-color: #f26d1c !important;
    box-shadow: 0 0 0 3px rgba(242,109,28,0.15), 0 4px 12px rgba(242,109,28,0.18) !important;
}

.hv3-toggler { box-shadow: 0 4px 12px rgba(242,109,28,0.12) !important; }
.hv3-toggler:hover {
    background: #fff5ee !important;
    color: #d95a0a !important;
}

.hv3-drawer {
    border-top-color: rgba(242,109,28,0.10) !important;
    box-shadow: 0 6px 16px rgba(242,109,28,0.08) !important;
}
.hv3-drawer .hv3-link:hover,
.hv3-drawer .hv3-link.active {
    background: #fff5ee !important;
    color: #d95a0a !important;
}

/* ── Header V2 hv2 overrides ─────────────────────────────── */
.hv2-icon-btn:hover { color: #d95a0a !important; }
.hv2-avatar-btn:hover { border-color: #f26d1c !important; }

/* ═══════════════════════════════════════════════════════════
   FEMALE PRO LISTING PAGE (female_pro_view_v2)
   ═══════════════════════════════════════════════════════════ */

/* Page background (was pinkish #f9f3f0) */
.v2-page { background: #fff9f5 !important; }

/* Hero banner gradient (was #7d1525 → #a82035 → #c0334a) */
.v2-hero {
    background: linear-gradient(135deg, #b84a00 0%, #f26d1c 50%, #e8651a 100%) !important;
}

/* Hero wave cutout matches new page bg */
.v2-hero::after { background: #fff9f5 !important; }

/* Section label pill */
.v2-section-pill {
    background: linear-gradient(135deg, #d95a0a, #f26d1c) !important;
}

/* Browse more button */
.v2-browse {
    background: linear-gradient(135deg, #d95a0a, #f26d1c) !important;
    box-shadow: 0 5px 18px rgba(242,109,28,0.35) !important;
}

/* ── Links site-wide (was maroon) ────────────────────────── */
a { color: #d95a0a; }
a:hover { color: #f26d1c !important; }

/* ═══════════════════════════════════════════════════════════
   HOME PAGE — lh-* component overrides
   ═══════════════════════════════════════════════════════════ */

/* Hero banner gradient (was #8b1a2e → #b82d45 → #cc3d55) */
.lh-hero {
    background: linear-gradient(135deg, #b84a00 0%, #f26d1c 55%, #e8651a 100%) !important;
}

/* Maroon text utility */
.text-maroon { color: #d95a0a !important; }

/* Maroon buttons (main CTA on landing page) */
.btn-maroon {
    background: linear-gradient(135deg, #d95a0a, #f26d1c) !important;
    border-color: #d95a0a !important;
    color: #fff !important;
}
.btn-maroon:hover, .btn-maroon:focus {
    background: linear-gradient(135deg, #b84a00, #d95a0a) !important;
    border-color: #b84a00 !important;
    color: #fff !important;
}

/* Inline gradient links/buttons (e.g. "View Profiles" CTA pill) */
[style*="background:linear-gradient(135deg,#8b1a2e"],
[style*="background: linear-gradient(135deg, #8b1a2e"] {
    background: linear-gradient(135deg, #d95a0a, #f26d1c) !important;
    box-shadow: 0 4px 14px rgba(242,109,28,0.35) !important;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
}
[style*="background:linear-gradient(135deg,#8b1a2e"]:hover,
[style*="background: linear-gradient(135deg, #8b1a2e"]:hover {
    background: linear-gradient(135deg, #b84a00, #d95a0a) !important;
    box-shadow: 0 6px 20px rgba(242,109,28,0.50) !important;
    transform: translateY(-2px) !important;
    color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════
   SINGLE PROFILE VIEW — V2 (female & male)
   ═══════════════════════════════════════════════════════════ */

/* Override CSS variables — !important beats inline <style> defined later in <body> */
:root {
    /* Female profile (spf) — was rose/pink */
    --spf-rose:     #f26d1c !important;
    --spf-rose-dk:  #d95a0a !important;
    --spf-rose-lt:  #fff5ee !important;
    --spf-rose-med: #f5893f !important;
    --spf-border:   #ffe0cc !important;
    --spf-bg:       #fff9f5 !important;
}

/* Interest / Send Interest button — hardcoded pink in both female & male v2 */
.spfv2-cta-btn.interest,
.spmv2-cta-btn.interest {
    background: #f26d1c !important;
    color: #fff !important;
}
.spfv2-cta-btn.interest:hover,
.spmv2-cta-btn.interest:hover {
    background: #d95a0a !important;
}
.spfv2-cta-btn.interest.sent,
.spmv2-cta-btn.interest.sent {
    background: #b84a00 !important;
}

/* Section header gradient (was rose-lt → white) */
.spfv2-sec-hd {
    background: linear-gradient(90deg, #fff5ee, #fff) !important;
    border-bottom-color: #ffe0cc !important;
}
.spfv2-sec-hd h3 { color: #d95a0a !important; }

/* Tag/pill items */
.spfv2-tag {
    background: #fff5ee !important;
    color: #d95a0a !important;
    border-color: #ffe0cc !important;
}

/* Lock/upgrade prompt */
.spfv2-lock { color: #f26d1c !important; }

/* ═══════════════════════════════════════════════════════════
   SINGLE PROFILE VIEW — V1 (female & male)
   Arrow buttons and accent colors used #ff4d4d
   ═══════════════════════════════════════════════════════════ */
.btn-interest:hover { background: #f26d1c !important; color: #fff !important; }
