/*

	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 Theme & Streaming UI Overrides 
=========================================================
*/

:root {
    /* Base Dark Cinematic Palette */
    --background-body: #0b0c10;
    --color-body: #c5c6c7;
    
    /* Primary Accent - Vibrant Streaming Red/Purple/Blue (Adjust as needed) */
    --color-primary-background: #e50914; /* Netflix-style red for strong CTAs */
    --color-primary-active-background: #b20710;
    --color-primary-background-border: #e50914;
    
    /* Secondary Accents - Deep dark layers */
    --color-secondary-background: #1f2833;
    --color-box-background: #15161a;
    --color-box-background-border: #2a2c33;
    
    /* Typography Overrides */
    --color-heading: #ffffff;
    --color-default: #ffffff;
}

/* Force dark background globally for front-facing pages */
body.whmcsbody {
    background-color: var(--background-body);
    color: var(--color-body);
    font-family: 'Open Sans', sans-serif; /* Maintain existing font, or change to Poppins/Inter later */
}

/* Glassmorphism utility for modern streaming cards */
.iptv-glass-card {
    background: rgba(31, 40, 51, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.iptv-glass-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-primary-background);
}

/* Cinematic Gradient Button */
.btn-cinematic {
    background: linear-gradient(135deg, var(--color-primary-background) 0%, #ff5e62 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(229, 9, 20, 0.4);
}

.btn-cinematic:hover {
    box-shadow: 0 6px 20px rgba(229, 9, 20, 0.6);
    transform: scale(1.02);
    color: #fff;
}

/* =========================================================
   IPTVizion Hero Section - Cinematic Static Background
   ========================================================= */

.iptv-hero-section {
    position: relative;
    /* Updated path to point to your specific image location */
    background-image: url('../images/ChatGPT.png'); 
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 160px 0 140px 0; 
    z-index: 1;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Dark vignette/gradient overlay. 
   This is critical: it fades from dark at the top (blending with the header), 
   to semi-transparent in the middle, to solid dark at the bottom (blending into the features section).
*/
.iptv-hero-section::before {
    content: '';
    position: absolute;
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0;
    background: linear-gradient(to bottom, 
        rgba(11, 12, 16, 0.95) 0%, 
        rgba(11, 12, 16, 0.4) 50%, 
        rgba(11, 12, 16, 1) 100%
    );
    z-index: -1;
}

/* Elevate the text above the overlay and add deep shadows */
.iptv-hero-section .hero-content {
    position: relative;
    z-index: 2;
}

.iptv-hero-section h1 {
    font-weight: 800;
    letter-spacing: -1px;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.9);
}

.iptv-hero-section .lead {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
    font-weight: 400;
}

/* =========================================================
   IPTVizion Client Area Dashboard Cleanup
   Hide irrelevant hosting/domain panels for standard users
   ========================================================= */

/* Hide the Domain Registration & Order New Services shortcuts in the sidebar */
.brand-tkwebsolutions #Primary_Sidebar_Client_Shortcuts_Register_New_Domain,
.brand-tkwebsolutions #Primary_Sidebar_Client_Shortcuts_Order_New_Services {
    display: none !important;
}

/* Hide Domain Search panel on the main dashboard */
.brand-tkwebsolutions .client-home-panels #Panel_Client_Home_Register_Domain {
    display: none !important;
}

/* Hide Active Addons panel (unless you sell specific IPTV addons) */
.brand-tkwebsolutions .client-home-panels #Panel_Client_Home_Active_Addons {
    display: none !important;
}

/* Style the Active Products/Services panel to look more like a streaming portal */
.brand-tkwebsolutions #Panel_Client_Home_Active_Products_Services {
    border-color: var(--color-primary-background) !important;
    box-shadow: 0 4px 15px rgba(229, 9, 20, 0.1) !important;
}

.brand-tkwebsolutions #Panel_Client_Home_Active_Products_Services .panel-heading {
    background-color: var(--color-primary-background) !important;
    color: white !important;
}

/* Clean up the main dashboard grids / tiles */
.brand-tkwebsolutions .tiles .tile {
    border-radius: 12px;
    transition: transform 0.2s ease;
}

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