/*
 * TVHub MC — Royal Blue + Mint streaming SaaS palette.
 * Loaded after the base hostx-child styles to remap old purple+gold → blue+mint
 * without editing every file. Variables apply to the homepage (which uses var(--blue))
 * and the explicit selectors below cover the rest of the theme.
 *
 * Palette:
 *   Primary  — Royal Blue  #2563eb  (trust, tech, broadcast)
 *   Hover    — Lighter     #3b82f6
 *   Active   — Deeper      #1d4ed8
 *   Accent   — Mint        #10b981  (live/recording/success)
 *   Warning  — Amber       #f59e0b
 *   Danger   — Red         #ef4444
 */

:root {
    /* TVHub brand palette — Royal Blue + Mint */
    --tvh-blue:          #2563eb;
    --tvh-blue-light:    #3b82f6;
    --tvh-blue-dark:     #1d4ed8;
    --tvh-blue-soft:     rgba(37, 99, 235, 0.12);
    --tvh-blue-glow:     rgba(37, 99, 235, 0.32);

    --tvh-mint:          #10b981;
    --tvh-mint-dark:     #059669;
    --tvh-mint-soft:     rgba(16, 185, 129, 0.12);

    /* Legacy variable aliases (kept so any older purple references still resolve) */
    --tvh-purple:        var(--tvh-blue);
    --tvh-purple-dark:   var(--tvh-blue-dark);
    --tvh-purple-soft:   var(--tvh-blue-soft);
    --tvh-gold:          var(--tvh-mint);
    --tvh-gold-dark:     var(--tvh-mint-dark);

    /* Override homepage CSS variables (defined in homepage.tpl :root block) */
    --blue:              #2563eb;
    --blue-dark:         #1d4ed8;
}

/* ================== Homepage hero + buttons ================== */
.tvh-hero-badge {
    background: var(--tvh-blue-soft) !important;
    border-color: rgba(37, 99, 235, 0.18) !important;
    color: var(--tvh-mint) !important;
    letter-spacing: .08em;
}
.tvh-btn-primary {
    background: var(--tvh-blue) !important;
    color: #fff !important;
    box-shadow: 0 8px 24px var(--tvh-blue-glow);
}
.tvh-btn-primary:hover {
    background: var(--tvh-blue-light) !important;
    box-shadow: 0 12px 32px rgba(37, 99, 235, 0.42);
}
.tvh-btn-outline {
    border-color: rgba(37, 99, 235, 0.45) !important;
    color: var(--tvh-blue) !important;
}
.tvh-btn-outline:hover {
    background: var(--tvh-blue-soft) !important;
    color: var(--tvh-blue-light) !important;
}
.tvh-logo em {
    color: var(--tvh-blue) !important;
}

/* ================== Hostx core: header, links, primary actions ================== */
a, a:hover, a:focus { color: var(--tvh-blue); }
.btn-primary,
.btn-info,
button.btn-primary {
    background-color: var(--tvh-blue) !important;
    border-color: var(--tvh-blue-dark) !important;
    color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--tvh-blue-dark) !important;
    border-color: var(--tvh-blue-dark) !important;
}

/* Success uses MINT (the secondary accent) — for "Active", "Recording", confirmations */
.btn-success,
button.btn-success {
    background-color: var(--tvh-mint) !important;
    border-color: var(--tvh-mint-dark) !important;
    color: #fff !important;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background-color: var(--tvh-mint-dark) !important;
    border-color: var(--tvh-mint-dark) !important;
}

/* Outline / ghost variants */
.btn-outline-primary,
.btn-outline-info {
    color: var(--tvh-blue) !important;
    border-color: var(--tvh-blue) !important;
}
.btn-outline-primary:hover,
.btn-outline-info:hover {
    background-color: var(--tvh-blue) !important;
    color: #fff !important;
}
.btn-outline-success {
    color: var(--tvh-mint) !important;
    border-color: var(--tvh-mint) !important;
}
.btn-outline-success:hover {
    background-color: var(--tvh-mint) !important;
    color: #fff !important;
}

/* "Order now" / "Learn more" CTA buttons in hostx use these classes */
.btn-fill,
.button-fill,
.theme-btn,
a.theme-btn,
.button-default {
    background-color: var(--tvh-blue) !important;
    border-color: var(--tvh-blue-dark) !important;
    color: #fff !important;
}
.btn-fill:hover,
.button-fill:hover,
.theme-btn:hover {
    background-color: var(--tvh-blue-dark) !important;
}

/* IPTV nav theme classes (newHeader.tpl) */
.iptv-nav-cta,
.btn-iptv-primary {
    background: var(--tvh-blue) !important;
    border-color: var(--tvh-blue) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px var(--tvh-blue-glow) !important;
}
.iptv-nav-cta:hover,
.btn-iptv-primary:hover {
    background: var(--tvh-blue-light) !important;
    border-color: var(--tvh-blue-light) !important;
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.42) !important;
    color: #fff !important;
}
.btn-iptv-outline {
    border-color: var(--tvh-blue) !important;
    color: var(--tvh-blue) !important;
}
.btn-iptv-outline:hover {
    background: var(--tvh-blue-soft) !important;
    color: var(--tvh-blue-light) !important;
}

/* "Live" pulse dot — was orange/red, now mint to mean "Active/Recording" */
.iptv-live-dot {
    background: var(--tvh-mint) !important;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.25);
}
.iptv-cart-badge,
.iptv-mega-badge {
    background: var(--tvh-blue) !important;
    color: #fff !important;
}

/* Hostx accent text utilities */
.text-primary,
.text-info,
.text-blue,
.color-primary {
    color: var(--tvh-blue) !important;
}
.text-success { color: var(--tvh-mint) !important; }
.bg-primary,
.bg-info,
.bg-blue {
    background-color: var(--tvh-blue) !important;
}
.bg-success { background-color: var(--tvh-mint) !important; }

/* Hero / banner gradients used on hostx default pages */
.banner-section,
.section-bg,
.colored-section {
    background-image: linear-gradient(135deg, var(--tvh-blue) 0%, var(--tvh-blue-dark) 100%) !important;
}

/* ================== Cart (hostx_cart) ================== */
.hostx-cart .step-active,
.hostx-cart .order-summary-total,
.hostx-cart .btn-checkout,
.cp-gradient-text {
    background: linear-gradient(135deg, var(--tvh-blue), var(--tvh-mint)) !important;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.cart-summary .total-amount,
.cart-totals .total {
    color: var(--tvh-blue) !important;
}

/* ================== Client area accents ================== */
.client-area .btn-primary,
.dropdown-menu .active a {
    background-color: var(--tvh-blue) !important;
}
.alert-info {
    background-color: var(--tvh-blue-soft) !important;
    border-color: var(--tvh-blue) !important;
    color: var(--tvh-blue-dark) !important;
}
.alert-success {
    background-color: var(--tvh-mint-soft) !important;
    border-color: var(--tvh-mint) !important;
    color: var(--tvh-mint-dark) !important;
}

/* Status labels — keep semantic meaning */
.label-success, .badge-success, .status-active { color: var(--tvh-mint) !important; }
.label-info, .badge-info { color: #fff !important; background: var(--tvh-blue) !important; }

/* ================== Selection + scrollbar tints ================== */
::selection { background: var(--tvh-blue); color: #fff; }
::-moz-selection { background: var(--tvh-blue); color: #fff; }

/* Price highlights — use MINT to mean "active/affordable/value" */
.price,
.product-price,
.amount-due {
    color: var(--tvh-mint) !important;
}

/* "Live"/"Recording" indicators across the platform */
.live-indicator,
.recording-indicator,
.status-recording {
    color: var(--tvh-mint) !important;
}

/* ================================================================
 * LIGHT-MODE FIX FOR HOMEPAGE
 * homepage.tpl forces a dark palette via body.whmcs-templatefile-homepage
 * !important rules and a global :root color block. When the user toggles
 * data-bs-theme="light", those stay dark. Override here.
 * ============================================================== */

/* Step 1: flip the CSS vars in light mode (the homepage uses var(--bg), var(--text) etc.) */
html[data-bs-theme="light"] {
    --bg:              #ffffff;
    --bg-card:         #f8fafc;
    --bg-card-hover:   #f1f5f9;
    --text:            #0f172a;
    --text-dim:        #475569;
    --text-muted:      #64748b;
    --border:          rgba(15, 23, 42, 0.08);
    --blue:            var(--tvh-blue);
    --blue-dark:       var(--tvh-blue-dark);
}

/* Step 2: defeat the hardcoded !important rules in homepage.tpl */
html[data-bs-theme="light"] body.whmcs-templatefile-homepage,
html[data-bs-theme="light"] body.whmcs-templatefile-homepage html {
    background: #ffffff !important;
    color: #0f172a !important;
}
html[data-bs-theme="light"] body.whmcs-templatefile-homepage.primary-bg-color {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

/* Step 3: nav / mobile menu / cards in light mode */
html[data-bs-theme="light"] .tvh-nav.scrolled {
    background: rgba(255, 255, 255, 0.97) !important;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.08), 0 4px 16px rgba(15, 23, 42, 0.04);
}
html[data-bs-theme="light"] .tvh-mobile-menu {
    background: rgba(255, 255, 255, 0.98) !important;
}
html[data-bs-theme="light"] .tvh-logo {
    color: #0f172a;
}
html[data-bs-theme="light"] .tvh-hamburger span {
    background: #0f172a;
}

/* Step 4: hero — drop the Pexels stock background image entirely.
 * Use a clean gradient (royal blue → dark in dark mode, white in light mode). */
.tvh-hero {
    background: linear-gradient(180deg,
        rgba(37, 99, 235, 0.18) 0%,
        rgba(10, 14, 23, 0.95) 60%,
        var(--bg) 100%) !important;
}
html[data-bs-theme="light"] .tvh-hero {
    background: linear-gradient(180deg,
        rgba(37, 99, 235, 0.06) 0%,
        rgba(255, 255, 255, 0.95) 50%,
        #ffffff 100%) !important;
}
html[data-bs-theme="light"] .tvh-hero::after {
    background: linear-gradient(to top, #ffffff, transparent) !important;
}

/* Cards / sections that used dark surfaces in homepage */
html[data-bs-theme="light"] [class*="tvh-card"],
html[data-bs-theme="light"] [class*="tvh-section-dark"] {
    background: var(--bg-card) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

/* Step 5: hardcoded white headings in homepage.tpl — flip to dark in light mode. */
html[data-bs-theme="light"] .tvh-logo,
html[data-bs-theme="light"] .tvh-hero h1,
html[data-bs-theme="light"] .tvh-hero h1 *,
html[data-bs-theme="light"] .tvh-section-header h2,
html[data-bs-theme="light"] .tvh-section-header h2 *,
html[data-bs-theme="light"] .tvh-step-card h3,
html[data-bs-theme="light"] .tvh-feature-card h3,
html[data-bs-theme="light"] .tvh-format-card h4,
html[data-bs-theme="light"] .tvh-showcase-card h3,
html[data-bs-theme="light"] .tvh-device-card h4,
html[data-bs-theme="light"] .tvh-testimonial-card .name {
    color: #0f172a !important;
}

/* Inline-styled headings — defeat with attribute selectors */
html[data-bs-theme="light"] body.whmcs-templatefile-homepage h2[style*="color:#fff"],
html[data-bs-theme="light"] body.whmcs-templatefile-homepage h1[style*="color:#fff"],
html[data-bs-theme="light"] body.whmcs-templatefile-homepage h3[style*="color:#fff"],
html[data-bs-theme="light"] body.whmcs-templatefile-homepage [style*="color:#fff"] {
    color: #0f172a !important;
}

/* Body text + paragraphs in light mode */
html[data-bs-theme="light"] .tvh-wrap,
html[data-bs-theme="light"] .tvh-wrap p,
html[data-bs-theme="light"] .tvh-wrap li,
html[data-bs-theme="light"] .tvh-wrap span:not([class*="badge"]):not([class*="logo"]) {
    color: #1e293b;
}
html[data-bs-theme="light"] .tvh-wrap p {
    color: var(--text-dim) !important;
}

/* Card backgrounds in light mode — flip from dark surfaces to soft light slate */
html[data-bs-theme="light"] .tvh-step-card,
html[data-bs-theme="light"] .tvh-feature-card,
html[data-bs-theme="light"] .tvh-format-card,
html[data-bs-theme="light"] .tvh-showcase-card,
html[data-bs-theme="light"] .tvh-device-card,
html[data-bs-theme="light"] .tvh-testimonial-card {
    background: #f8fafc !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* Inline-styled section/container backgrounds that hardcode dark — flip them too. */
html[data-bs-theme="light"] body.whmcs-templatefile-homepage section[style*="background:#0a0e17"],
html[data-bs-theme="light"] body.whmcs-templatefile-homepage section[style*="background:#060912"],
html[data-bs-theme="light"] body.whmcs-templatefile-homepage section[style*="background:#111827"],
html[data-bs-theme="light"] body.whmcs-templatefile-homepage div[style*="background:#0a0e17"],
html[data-bs-theme="light"] body.whmcs-templatefile-homepage div[style*="background:#111827"] {
    background: #ffffff !important;
}

/* Footer / nav inline backgrounds */
html[data-bs-theme="light"] .tvh-footer {
    background: #f8fafc !important;
    color: #1e293b !important;
}

/* ================================================================
 * LOGIN PAGE — TV"Hub" wordmark accent uses brand blue
 * (header.tpl line 11 has inline color:#3ba3fc — sync it here too) */
.ent-login-hero h1 span,
.ent-login-form-header h2 span {
    color: var(--tvh-blue) !important;
}
.ent-login-feature-icon {
    color: var(--tvh-blue) !important;
    background: var(--tvh-blue-soft) !important;
}
.ent-login-submit {
    background: var(--tvh-blue) !important;
    border-color: var(--tvh-blue) !important;
    box-shadow: 0 4px 14px var(--tvh-blue-glow) !important;
}
.ent-login-submit:hover {
    background: var(--tvh-blue-light) !important;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.42) !important;
}
.ent-login-forgot,
.ent-login-footer a {
    color: var(--tvh-blue) !important;
}
.ent-login-field input:focus {
    border-color: var(--tvh-blue) !important;
    box-shadow: 0 0 0 3px var(--tvh-blue-soft) !important;
}