/*

	Rename this file to custom.css to start using it. This CSS file will automatically be loaded by the template and will allow you to override any CSS.

	Learn more about customizing CSS: https://www.zomex.com/docs/whmcs-templates/how-to-add-custom-css/

*/

/* =========================================================
   IPTVizion — Global Dark Cinematic Theme
   ---------------------------------------------------------
   Single source of truth for all non-homepage pages
   (cart, checkout, client area, invoices, login, contact,
   knowledge base, tickets, etc).
   The homepage has its own scoped .iptvz-root styles which
   are unaffected by anything here.
   ---------------------------------------------------------
   Color contract — keep in sync with tkweb/css/custom.css:
       Accent red      #c11c1f
       Page bg         #080b10
       Surface         #0e1218
       Surface alt     #141920
       Border          rgba(255,255,255,0.07)
       Border strong   rgba(255,255,255,0.12)
       Text            #f0f2f5
       Text muted      #c0c8d4
       Text faint      #6b7280
========================================================= */

/* ── 1. Override Zomex design tokens at the :root level ── */
/*    Doing it here means the original Zomex header/footer/
      cart/forms all pick up the dark theme automatically
      without us having to edit dozens of .tpl files.        */

:root {
    /* Page-level */
    --background-body: #080b10;
    --background-banner: #0e1218;
    --color-body: #c0c8d4;
    --color-heading: #f0f2f5;
    --color-border: rgba(255,255,255,0.07);

    /* Primary (CTAs, active states) — IPTVizion brand red */
    --color-primary-background: #c11c1f;
    --color-primary-background-gradient-top: #c11c1f;
    --color-primary-background-gradient-bottom: #c11c1f;
    --color-primary-background-border: #c11c1f;
    --color-primary-foreground: #ffffff;
    --color-primary-foreground-shadow: transparent;
    --color-primary-active-background: #a01718;
    --color-primary-active-background-gradient-top: #a01718;
    --color-primary-active-background-gradient-bottom: #a01718;
    --color-primary-active-background-border: #a01718;
    --color-primary-active-foreground: #ffffff;
    --color-primary-active-foreground-shadow: transparent;

    /* Secondary (subtle dark surface) */
    --color-secondary-background: #1f2833;
    --color-secondary-background-gradient-top: #1f2833;
    --color-secondary-background-gradient-bottom: #1f2833;
    --color-secondary-background-border: rgba(255,255,255,0.07);
    --color-secondary-foreground: #f0f2f5;
    --color-secondary-foreground-shadow: transparent;
    --color-secondary-active-background: #2a2c33;
    --color-secondary-active-foreground: #ffffff;

    /* Tertiary (replaces light grey panels) */
    --color-tertiary-background: #0e1218;
    --color-tertiary-background-gradient-top: #0e1218;
    --color-tertiary-background-gradient-bottom: #0e1218;
    --color-tertiary-background-border: rgba(255,255,255,0.07);
    --color-tertiary-foreground: #f0f2f5;
    --color-tertiary-active-background: #141920;
    --color-tertiary-active-foreground: #f0f2f5;

    /* Box (replaces all default white boxes/cards) */
    --color-box-background: #0e1218;
    --color-box-background-gradient-top: #0e1218;
    --color-box-background-gradient-bottom: #0e1218;
    --color-box-background-border: rgba(255,255,255,0.07);
    --color-box-background-shadow: rgba(0,0,0,0.4);
    --color-box-background-divider: rgba(255,255,255,0.05);
    --color-box-foreground: #c0c8d4;
    --color-box-foreground-bold: #f0f2f5;
    --color-box-head-background: #1f2833;
    --color-box-head-background-gradient-top: #1f2833;
    --color-box-head-background-gradient-bottom: #1f2833;
    --color-box-head-background-border: rgba(255,255,255,0.07);
    --color-box-head-foreground: #f0f2f5;
    --color-box-head-foreground-bold: #ffffff;
    --color-box-footer-background: #0b0e14;
    --color-box-footer-background-gradient-top: #0b0e14;
    --color-box-footer-background-gradient-bottom: #0b0e14;
    --color-box-footer-background-border: rgba(255,255,255,0.07);
    --color-box-footer-foreground: #9ca3af;

    /* Box hover */
    --color-box-active-background: #141920;
    --color-box-active-background-border: rgba(193,28,31,0.4);
    --color-box-active-foreground: #f0f2f5;
    --color-box-active-foreground-bold: #ffffff;

    /* Badges */
    --color-badge-popular-background: #c11c1f;
    --color-badge-popular-background-border: #c11c1f;
    --color-badge-popular-foreground: #ffffff;
    --color-badge-hot-background: #c11c1f;
    --color-badge-hot-background-border: #c11c1f;
    --color-badge-hot-foreground: #ffffff;

    /* Shadow */
    --shadow: 0 12px 40px rgba(0,0,0,0.45);
}


/* ── 2. Body baseline ──────────────────────────────────── */
body.whmcsbody {
    background-color: #080b10;
    color: #c0c8d4;
    /* Let homepage's scoped fonts win; everywhere else uses Zomex default */
}


/* ── 3. Form fields ─────────────────────────────────────
   Single rule — applies to every input on every page.
   Black-on-dark bug fix: text colour now #f0f2f5 not #000.
   ───────────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
textarea,
select {
    background-color: #141920 !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    color: #f0f2f5 !important;
    border-radius: 6px !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
    border-color: #c11c1f !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(193,28,31,0.15) !important;
}

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

label,
.control-label,
.form-group label {
    color: #c0c8d4 !important;
}

.text-muted,
.help-block,
p.text-muted,
small.text-muted {
    color: #6b7280 !important;
}


/* ── 4. Panels / boxes / cards
   Fixes the original black-on-dark bug (#000 -> #f0f2f5).
   ─────────────────────────────────────────────────────── */
.panel,
.panel-body,
.panel-default,
.box,
.box-content,
.portlet,
.portlet-body,
.card,
.card-body,
form .form-container,
.contact-form-wrap,
.summary-container,
.order-summary,
.order-summary-container,
.shopping-cart-product,
.cart-product,
.cart-item,
.product-card,
.product-info,
.product-info-card,
.product-item,
.product-listing,
.product-listing-item,
.package,
.package-card,
.package-info {
    background-color: #0e1218 !important;
    border-color: rgba(255,255,255,0.07) !important;
    color: #c0c8d4 !important;
    box-shadow: none !important;
}

.panel-heading,
.card-header,
.box-header,
.portlet-heading,
.product-header,
.summary-heading,
.order-summary-header,
.cart-heading,
.section-header {
    background-color: #1f2833 !important;
    color: #f0f2f5 !important;
    border-color: rgba(255,255,255,0.07) !important;
}

.panel-heading h1,
.panel-heading h2,
.panel-heading h3,
.panel-heading h4,
.panel-heading h5,
.panel-heading h6,
.panel-title,
.card-header h1, .card-header h2, .card-header h3, .card-header h4 {
    color: #f0f2f5 !important;
    margin: 0 !important;
}


/* ── 5. Headings on inner pages ────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    color: #f0f2f5;
}


/* ── 6. Breadcrumbs ────────────────────────────────────── */
.breadcrumb,
.breadcrumb a,
.breadcrumb li {
    background: transparent !important;
    color: #9ca3af !important;
}

.breadcrumb a:hover {
    color: #c11c1f !important;
}

.breadcrumb-item.active,
.breadcrumb > .active {
    color: #c0c8d4 !important;
}


/* ── 7. Tables (invoices, client area, etc.) ───────────── */
.table,
table {
    color: #f0f2f5 !important;
}

.table th,
table th {
    background-color: #1f2833 !important;
    color: #c0c8d4 !important;
    border-color: rgba(255,255,255,0.07) !important;
}

.table td,
.table tr,
table td {
    background-color: #0e1218 !important;
    border-color: rgba(255,255,255,0.05) !important;
    color: #c0c8d4 !important;
}

.table-striped tbody tr:nth-of-type(odd) td {
    background-color: #131820 !important;
}

.table-hover tbody tr:hover td {
    background-color: #1c2330 !important;
}


/* ── 8. Alerts ──────────────────────────────────────────── */
.alert {
    border-radius: 8px;
    border-width: 1px;
    border-style: solid;
}

.alert-info {
    background-color: rgba(56,189,248,0.08) !important;
    border-color: rgba(56,189,248,0.3) !important;
    color: #93c5fd !important;
}

.alert-success {
    background-color: rgba(16,185,129,0.08) !important;
    border-color: rgba(16,185,129,0.3) !important;
    color: #6ee7b7 !important;
}

.alert-warning {
    background-color: rgba(245,166,35,0.08) !important;
    border-color: rgba(245,166,35,0.3) !important;
    color: #fcd34d !important;
}

.alert-danger,
.alert-error {
    background-color: rgba(193,28,31,0.1) !important;
    border-color: rgba(193,28,31,0.3) !important;
    color: #fca5a5 !important;
}


/* ── 9. Buttons ─────────────────────────────────────────── */
.btn-primary {
    background-color: #c11c1f !important;
    border-color: #c11c1f !important;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(193,28,31,0.3) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #a01718 !important;
    border-color: #a01718 !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(193,28,31,0.45) !important;
}

.btn-default,
a.btn-default,
button.btn-default,
.btn-secondary,
.btn.btn-light,
#btnEmptyCart,
#btnGeneratePassword,
#btnValidateCode {
    background-color: #1f2833 !important;
    color: #f0f2f5 !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
}

.btn-default:hover,
button.btn-default:hover,
.btn-secondary:hover {
    background-color: #2a2c33 !important;
    border-color: rgba(255,255,255,0.25) !important;
    color: #ffffff !important;
}

.btn-success {
    background-color: #10b981 !important;
    border-color: #10b981 !important;
    color: #ffffff !important;
}

.btn-success:hover {
    background-color: #059669 !important;
    border-color: #059669 !important;
}

.btn-danger {
    background-color: #ef4444 !important;
    border-color: #ef4444 !important;
}


/* ── 10. Cart / checkout step indicator ────────────────── */
.order-steps,
.checkout-progress,
.step,
.cart-step,
.progress-step {
    background-color: transparent !important;
    color: #9ca3af !important;
}

.step.active,
.step-current,
.cart-step.active,
.checkout-step.active {
    background-color: #1f2833 !important;
    color: #ffffff !important;
}


/* ── 11. Bootstrap tabs (promo code / estimate taxes etc) ─ */
.nav-tabs {
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}

.nav-tabs > li > a {
    background-color: #1f2833 !important;
    color: #c0c8d4 !important;
    border-color: rgba(255,255,255,0.07) !important;
    border-radius: 6px 6px 0 0 !important;
    margin-right: 2px !important;
}

.nav-tabs > li > a:hover {
    background-color: #2a2c33 !important;
    color: #ffffff !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    background-color: #0e1218 !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.07) rgba(255,255,255,0.07) #0e1218 !important;
}

.tab-content,
.tab-pane {
    background-color: #0e1218 !important;
    color: #f0f2f5 !important;
    padding: 1.25rem !important;
}


/* ── 12. Input groups (promo code box, search etc.) ────── */
.input-group,
.input-group .form-control,
.input-group-addon,
.input-group-text {
    background-color: #141920 !important;
    color: #f0f2f5 !important;
    border-color: rgba(255,255,255,0.12) !important;
}


/* ── 13. Progress bars / password strength meter ───────── */
.progress,
.password-strength,
#passwordStrengthMeter,
.strength-meter {
    background-color: #1f2833 !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    height: 8px !important;
}

.progress-bar {
    background-color: #c11c1f !important;
}


/* ── 14. Pagination ─────────────────────────────────────── */
.pagination > li > a,
.pagination > li > span {
    background-color: #1f2833 !important;
    border-color: rgba(255,255,255,0.12) !important;
    color: #c0c8d4 !important;
}

.pagination > .active > a,
.pagination > .active > span {
    background-color: #c11c1f !important;
    border-color: #c11c1f !important;
    color: #ffffff !important;
}


/* ── 15. Links ──────────────────────────────────────────── */
a {
    color: #c0c8d4;
}

a:hover {
    color: #c11c1f;
}


/* ── 16. Modals ─────────────────────────────────────────── */
.modal-content {
    background-color: #0e1218 !important;
    color: #c0c8d4 !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
}

.modal-header,
.modal-footer {
    border-color: rgba(255,255,255,0.07) !important;
}

.modal-title {
    color: #f0f2f5 !important;
}


/* ── 17. Dropdown menus ────────────────────────────────── */
.dropdown-menu {
    background-color: #0e1218 !important;
    border-color: rgba(255,255,255,0.1) !important;
    box-shadow: 0 12px 32px rgba(0,0,0,0.5) !important;
}

.dropdown-menu > li > a,
.dropdown-item {
    color: #c0c8d4 !important;
}

.dropdown-menu > li > a:hover,
.dropdown-item:hover {
    background-color: #1f2833 !important;
    color: #ffffff !important;
}


/* ── 18. Brand-specific Client Area cleanup
   These rules already worked — preserved + cleaned up.
   Hides hosting/domain widgets that don't apply to IPTV.
   ─────────────────────────────────────────────────────── */
.brand-tkwebsolutions #Primary_Sidebar_Client_Shortcuts_Register_New_Domain,
.brand-tkwebsolutions #Primary_Sidebar_Client_Shortcuts_Order_New_Services {
    display: none !important;
}

.brand-tkwebsolutions .client-home-panels #Panel_Client_Home_Register_Domain,
.brand-tkwebsolutions .client-home-panels #Panel_Client_Home_Active_Addons {
    display: none !important;
}

.brand-tkwebsolutions #Panel_Client_Home_Active_Products_Services {
    border-color: #c11c1f !important;
    box-shadow: 0 4px 16px rgba(193,28,31,0.15) !important;
}

.brand-tkwebsolutions #Panel_Client_Home_Active_Products_Services .panel-heading {
    background-color: #c11c1f !important;
    color: #ffffff !important;
}

.brand-tkwebsolutions .tiles .tile {
    border-radius: 12px;
    transition: transform 0.2s ease;
}

.brand-tkwebsolutions .tiles .tile:hover {
    transform: translateY(-3px);
}


/* ── 19. Hide leaking spinner overlay
   The Zomex #fullpage-overlay sometimes flashes/sticks on
   page load. The .w-hidden class is supposed to hide it
   but a few pages render without that class.
   ─────────────────────────────────────────────────────── */
#fullpage-overlay,
.loading-overlay {
    display: none !important;
}


/* ── 20. Hide social sidewidget (if not used) ─────────── */
.social-sidewidget {
    display: none !important;
}


/* ── 21. Footer base (catches stray footers from Zomex) ─ */
body.whmcsbody footer,
body.whmcsbody .footer,
body.whmcsbody #footer {
    background-color: #080b10;
    color: #c0c8d4;
}


/* ── 22. Code / pre blocks (e.g. API docs in client area) ─ */
code,
pre {
    background-color: #0b0e14 !important;
    color: #f0a070 !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
}


/* ── 23. Selection highlight ───────────────────────────── */
::selection {
    background: #c11c1f;
    color: #ffffff;
}

::-moz-selection {
    background: #c11c1f;
    color: #ffffff;
}


/* ── 24. Scrollbar (Webkit only) ───────────────────────── */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #080b10;
}

::-webkit-scrollbar-thumb {
    background: #2a2c33;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #3a3c43;
}

/* ======================================================
   SECTION 25 — Force pure-dark backgrounds everywhere
   ----------------------------------------------------
   This section nails every common Zomex background slot
   to the brand bg color #080b10 with !important. Reason:
   the site was showing a subtle blue/navy tint in some
   areas (likely from a stale Zomex admin "header_bg" or
   "primary_bg_color" DB setting overriding our tokens at
   inline-style level). With !important we win regardless
   of where the override comes from.

   Important: scoped to body and major structural elements
   only. We do NOT touch .headermain (still white per Zomex
   default) or the cards/panels (still --tkws-surface).
====================================================== */
html, body,
body.primary-bg-color,
body.templatebody,
.fullwidthbanner,
.footerbg,
.maincontainer,
.contentbg,
.contentbg-banner,
.contentcontainer-fullwidth,
section.fullwidthbanner,
section.contentbg,
section.contentbg-banner,
main {
    background-color: #080b10 !important;
}

/* Make sure the body itself never inherits a blue cast */
body.brand-tkwebsolutions,
body.brand-tkwebsolutions .templatebody,
body.brand-tkwebsolutions main,
body.brand-tkwebsolutions .maincontainer {
    background-color: #080b10 !important;
}

/* Banner/hero wrappers Zomex sometimes paints with primary color */
.bannerbg,
.fullwidthbg,
.containerbg,
.pagebg {
    background-color: #080b10 !important;
}

/* ======================================================
   SECTION 26 — Header band white (matches IPTVizion)
   ----------------------------------------------------
   The Zomex .headermain wrapper sits between the red
   announcement bar and the dark hero. IPTVizion shows
   this band as white (Zomex default). TKWeb was somehow
   inheriting the dark body color into the header band —
   probably from a stale Zomex admin "Header BG" setting.

   Force the band to pure white so both sites have the
   same red-bar → white-header → dark-hero rhythm.
====================================================== */
.headermain,
.headermain.headermain-1,
.headermain.headermain-2,
.headermain .contentcontainer,
.headermain .headermain-inner {
    background-color: #ffffff !important;
}

/* Nav links must read dark on the white band */
.headermain .navmain > ul > li > a,
.headermain .navmain-basic > a,
.headermain .navmain-dropdown > a {
    color: #0e1218 !important;
}

.headermain .navmain > ul > li > a:hover,
.headermain .navmain-basic > a:hover,
.headermain .navmain-dropdown > a:hover {
    color: #c11c1f !important;
}

/* Home icon in nav stays dark on white */
.headermain .navmain-home a,
.headermain .navmain-home a i {
    color: #0e1218 !important;
}
.headermain .navmain-home a:hover,
.headermain .navmain-home a:hover i {
    color: #c11c1f !important;
}

/* CTA "Order" button stays brand red on white band */
.headermain .navmain-cta-button,
.headermain .navmain-cta a {
    background-color: #c11c1f !important;
    color: #ffffff !important;
}
.headermain .navmain-cta-button:hover,
.headermain .navmain-cta a:hover {
    background-color: #d62024 !important;
    color: #ffffff !important;
}

/* Mobile menu toggle icon dark on white */
.navmain-mobile-icon,
.navmain-mobile-home {
    color: #0e1218 !important;
}