/* *****************************************************

    ** Custom Stylesheet **

    Any custom styling you want to apply should be
    defined here.

***************************************************** */

/* Custom CSS for Nexus Theme
 *
 * This file allows you to customize the theme colors and styles for the entire Nexus template.
 *
 * To customize colors:
 * - Replace the var() references with your own hex colors or other CSS values.
 * - For example, instead of --primary: #4b5563; use --primary: #your-color;
 * - You can also override any CSS properties here.
 */

:root {
    --white: #fff;

    /* Neutral shades */
    --neutral-50: #fbf9fa;
    --neutral-100: #f4f5f7;
    --neutral-200: #e4e4e7;
    --neutral-300: #d0d5dd;
    --neutral-400: #9ca3af;
    --neutral-500: #6b7280;
    --neutral-600: #4b5563;
    --neutral-700: #374151;
    --neutral-800: #1f2937;
    --neutral-900: #111827;
    --neutral-950: #030712;

    /* Neutral shades */
    /* define own pallet with brand colors */
    --primary-50: var(--neutral-50);
    --primary-100: var(--neutral-100);
    --primary-200: var(--neutral-200);
    --primary-300: var(--neutral-300);
    --primary-400: var(--neutral-400);
    --primary-500: var(--neutral-500);
    --primary-600: var(--neutral-600);
    --primary-700: var(--neutral-700);
    --primary-800: var(--neutral-800);
    --primary-900: var(--neutral-900);
    --primary-950: var(--neutral-900);

    /* Primary colors */
    /* Use shades from comments if `primary` colors use other colors, then neutral */
    --primary: var(--neutral-900);          /* var(--primary-600) */
    --primary-lifted: var(--neutral-800);   /* var(--primary-700) */
    --primary-accented: var(--neutral-700); /* var(--primary-800) */

    /* Secondary colors */
    --secondary: var(--neutral-500);
    --secondary-lifted: var(--neutral-600);
    --secondary-accented: var(--neutral-700);

    /* Success colors */
    --success: #00a63e;
    --success-lifted: #008236;
    --success-accented: #016630;

    /* Info colors */
    --info: #155dfc;
    --info-lifted: #1447e6;
    --info-accented: #193cb8;

    /* Notice colors */
    --notice: #7f22fe;
    --notice-lifted: #7008e7;
    --notice-accented: #5d0ec0;

    /* Warning colors */
    --warning: #f54a00;
    --warning-lifted: #ca3500;
    --warning-accented: #9f2d00;

    /* Error colors */
    --error: #e7000b;
    --error-lifted: #c10007;
    --error-accented: #9f0712;

    /* Grayscale colors */
    --grayscale: var(--neutral-900);
    --grayscale-lifted: var(--neutral-800);
    --grayscale-accented: var(--neutral-700);

    /* Neutral colors */
    --neutral: var(--neutral-500);
    --neutral-lifted: var(--neutral-500);
    --neutral-accented: var(--neutral-600);

    /* Text neutral colors */
    --text-inverted: var(--white);
    --text-muted: var(--neutral-400);
    --text-lifted: var(--neutral-400);
    --text-accented: var(--neutral-500);
    --text: var(--color-slate-200);

    /* Border neutral colors */
    --border-muted: var(--neutral-200);
    --border: var(--neutral-300);
    --border-lifted: var(--neutral-400);
    --border-accented: var(--neutral-600);

    /* Background neutral colors */
    --bg: var(--white);
    --bg-muted: var(--neutral-50);
    --bg-lifted: var(--neutral-100);
    --bg-accented: var(--bg-surface);
    --bg-inverted: var(--color-slate-950);

    /* Additional colors */
    --yellow-200: #fff085;
    --yellow-300: #ffdf20;
    --teal-300: #46edd5;
    --teal-400: #00d5be;
    --emerald-300: #5ee9b5;
    --pink-400: #fb64b6;

    /* Additional custom properties */
    /* Font sizes */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-md: 1rem;
    --text-lg: 1.125rem;

    /* Spacing */
    --outline-sm: 1px;
    --outline-md: 2px;
    --outline-lg: 3px;

    /* Rounding */
    --rounding-sm: 0.25rem;
    --rounding-md: 0.5rem;
    --rounding-lg: 0.75rem;

    /* Other */
    --letter-spacing: 0em;
    --disabled-opacity: 25%;
}

body{
	color: #fff;
	font-family: var(--font-brand) !important;
	background-color: inherit;

}

h1, h2, h3, h4{
	font-weight: 700;
    letter-spacing: -0.02em;
    line-height: var(--tw-leading, var(--text-5xl--line-height)) !important;
	margin-top: 1.5rem;

}
#mobile-support-buttons p {
    margin-top: 0;
    margin-bottom: 0;
}
#homepage-service-buttons a {
    background-color: var(--bg-surface) !important; 
}
/* 1. Reset container layout */
#inputDescriptionContainer .prepend-icon {
    position: relative !important;
    display: block !important;
    width: 100% !important;
}

/* 2. Pin the icon strictly inside the left edge */
#inputDescriptionContainer .prepend-icon label.field-icon {
    position: absolute !important;
    top: 50% !important;
    left: 16px !important;
    transform: translateY(-50%) !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 20 !important;
    pointer-events: none !important;
    display: inline-block !important;
}

#inputDescriptionContainer .prepend-icon label.field-icon i {
    font-size: 14px !important;
    color: #94a3b8 !important;
    display: block !important;
}

/* 3. Force the inner text and cursor off the left wall via text-indent & padding */
#inputDescriptionContainer input#inputDescription {
    padding-left: 48px !important;
    text-indent: 0 !important;
}
#inputDomain::placeholder {
    color: #9ca3af !important;
    opacity: 1 !important;
}
#inputDomain::-webkit-input-placeholder {
    color: #9ca3af !important;
    opacity: 1 !important;
}
#inputDomain::-moz-placeholder {
    color: #9ca3af !important;
    opacity: 1 !important;
}
#inputDomain:-ms-input-placeholder {
    color: #9ca3af !important;
}
/*.input-group-text {
    background-color:transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}*/
/* Base style for unchecked iCheck elements */
.icheckbox_square-blue, 
.iradio_square-blue {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    width: 22px;
    height: 22px;
    background: url(blue.png) no-repeat;
    border: none;
    cursor: pointer;
}

/* 1. SHAPES: Keep Checkboxes as Rounded Squares and Radios as Permanent Circles */
.icheckbox_square-blue {
    border-radius: 4px !important;
}

.iradio_square-blue {
    border-radius: 9999px !important; /* Forces radio buttons to stay circular */
}

/* Scoped single announcement article styling */
.single-announcement-body ul {
    list-style-type: disc !important;
    list-style-position: outside !important;
    padding-left: 1.5rem !important;
    margin-top: 0.85rem !important;
    margin-bottom: 1.25rem !important;
}

.single-announcement-body li {
    display: list-item !important;
    margin-bottom: 0.5rem !important;
    line-height: 1.6 !important;
}

.single-announcement-body li::marker {
    color: #ff6a00 !important;
}

.single-announcement-body p {
    margin-bottom: 0.85rem !important;
    line-height: 1.6 !important;
}

.single-announcement-body strong {
    color: #ff6a00 !important;
}

/* Retina display support for base sprite */
@media (-o-min-device-pixel-ratio:5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi), (min-resolution: 1.25dppx) {
    .icheckbox_square-blue, 
    .iradio_square-blue {
        background-image: url(blue@2x.png);
        -webkit-background-size: 240px 24px;
        background-size: 240px 24px;
    }
}

/* 2. CHECKED STATES: Full opacity gradient fill */
body .icheckbox_square-blue.checked, 
body .iradio_square-blue.checked {
    background: linear-gradient(90deg, var(--brand-red), var(--brand-orange)) !important;
    position: relative;
    filter: none !important;
}

/* 3. TICK MARK: Draws the Slate-950 checkmark on TOP of both radios and checkboxes */
body .icheckbox_square-blue.checked::after,
body .iradio_square-blue.checked::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    background-color: var(--color-slate-950) !important;
    
    /* Standard checkmark mask */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
    
    -webkit-mask-size: 14px 14px !important;
    mask-size: 14px 14px !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
}

.master-breadcrumb { 
background-color: var(--color-slate-950);
text-transform: uppercase;
	
}

.master-breadcrumb .breadcrumb {
	background-color: var(--color-slate-950);
	color:#fff;
}

.master-breadcrumb .breadcrumb a {
  color: #ff6a00;
  text-transform: uppercase;
}

.promo-container {
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: var(--rounding-sm);
    margin-bottom: 10px;
    background-color: inherit;
}
.promo-banner {
    background-color: inherit;
}
/* 1. Style the container to match your theme */
.input-group-append .input-group-text {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.5) !important;
    border-left: none !important;
    border-top-right-radius: 999px !important;
    border-bottom-right-radius: 999px !important;
    padding: 0 12px !important;
}

/* 2. Style the small text inside */
.input-group-append small {
    font-size: 0.8rem !important;
    letter-spacing: 0.3px !important;
    font-weight: 500 !important;
}

/* 3. Ensure the input field connected to this addon has the matching corner radius */
.input-group .form-control:not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: none !important;
}

/* WHMCS Domain Checker Form Layout & Style Fixes */

/* Stack input field above the action buttons */
form[action="domainchecker.php"] .input-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
}

/* Default static state for the search bar */
form[action="domainchecker.php"] .input-group .form-control {
    width: 100% !important;
    border-radius: 50px !important;
    border-top-right-radius: 50px !important;
    border-bottom-right-radius: 50px !important;
    background-color: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important; /* Subtle default border */
    box-shadow: none !important;
    padding: 12px 20px !important;
    font-size: 16px !important;
    color: #ffffff !important;
    transition: border-color 0.2s ease-in-out;
}

/* Orange border applied strictly on Hover and Focus states */
form[action="domainchecker.php"] .input-group .form-control:hover,
form[action="domainchecker.php"] .input-group .form-control:focus {
    border-color: #ff5500 !important; /* Change #ff5500 to match your exact button orange */
    box-shadow: none !important;
    outline: none !important;
}

/* Align and un-nest the action buttons beneath the search bar */
form[action="domainchecker.php"] .input-group-btn,
form[action="domainchecker.php"] .input-group-append {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
    margin-left: 0 !important;
}

/* Ensure buttons remain pill-shaped and evenly proportioned */
form[action="domainchecker.php"] .btn {
    flex: 1 !important;
    max-width: 200px !important;
    border-radius: 50px !important;
    padding: 10px 24px !important;
}
/* ==========================================================================
   DESKTOP VIEW: Unified WHMCS Sub-Navigation Styles
   ========================================================================== */


    /* 1. Base Container Row Layout */
    #secondary-nav-items,
    #secondary-nav-items .grid,
    #secondary-nav-items ul {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        visibility: visible !important;
        height: auto !important;
        opacity: 1 !important;
        margin: 0 !important;
    }

    /* 2. Strip Tailwind's default vertical padding loop bloat */
    #secondary-nav-items ul.py-3 {
        padding-top: 0rem !important;
        padding-bottom: 0rem !important;
    }

    /* 3. Primary Links Style & Height Alignment (Strictly targeted to prevent menu leaking) */
    #secondary-nav-items > div > ul > li > a,
    #secondary-nav-items ul:not(.dropdown-menu) > li > a,
    #secondary-nav-items ul:not(.dropdown-menu) > li > button {
        display: flex !important;
        align-items: center !important;
        visibility: visible !important;
        opacity: 1 !important;
        
        /* Typography Styling */
        color: #ffffff !important;
        text-transform: uppercase !important;
        font-weight: 700 !important;
        font-size: 0.75rem !important;
        letter-spacing: 0.15em !important;
        text-decoration: none !important;
        
        /* Spacing & Compact Height Sizing */
        padding: 0.45rem 0 !important;
        margin-right: 2rem !important;
        background: transparent !important;
        transition: color 0.2s ease-in-out !important;
    }

    /* Primary Link Hover State */
    #secondary-nav-items ul:not(.dropdown-menu) > li > a:hover {
        color: var(--color-orange-500) !important;
    }

    /* Inline caret/chevron adjustment */
    #secondary-nav-items ul:not(.dropdown-menu) > li.dropdown > a::after {
        margin-left: 0.4rem !important;
        vertical-align: middle !important;
    }

    /* 4. Dropdown Container Layout (Hard-kills Popper.js Inline Layout Shifts) */
    #secondary-nav-items .dropdown {
        position: relative !important;
    }

    #secondary-nav-items .dropdown-menu,
    #secondary-nav-items .dropdown.show .dropdown-menu,
    #secondary-nav-items .dropdown-menu[data-popper-placement] {
        display: none !important;
        position: absolute !important;
        
        /* Force coordinates directly below navigation container bar */
        top: 100% !important;
        left: 0px !important;
        inset: 100% auto auto 0px !important; 
        
        /* CRITICAL: Wipe out dynamic Popper.js inline styles/translation shifts */
        transform: translate3d(0px, 0px, 0px) !important;
        margin: 0 !important;
        margin-top: 0 !important;
        will-change: auto !important;
        
        /* Container Cosmetics */
        background-color: #0f172a !important;
        min-width: 220px !important;
        padding: 0.5rem 0 !important;
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
        border-radius: 0.5rem !important;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5) !important;
        z-index: 1000 !important;
    }

    /* Unify display mechanisms across both Hover and Active Clicks */
    #secondary-nav-items .dropdown:hover .dropdown-menu,
    #secondary-nav-items .dropdown.show .dropdown-menu {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* ==========================================================================
       SUB-MENU RECONCILIATION: Structural protection against text shifts
       ========================================================================== */
    #secondary-nav-items .dropdown-menu a,
    #secondary-nav-items .dropdown-menu .dropdown-item {
        display: block !important;
        width: 100% !important;
        
        /* Lock down box model layout tracking */
        box-sizing: border-box !important;
        padding: 0.6rem 1.25rem !important;
        margin: 0 !important;
        
        /* Hard typography settings to block primary menu inheritance leakages */
        text-transform: none !important;
        font-weight: 500 !important;
        font-size: 0.85rem !important;
        letter-spacing: normal !important;
        text-align: left !important;
        color: #ffffff !important;
        
        /* Clean transitions */
        background-color: transparent !important;
        transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out !important;
    }

/* ==========================================================================
       SUB-MENU RECONCILIATION: Fixed Double Hover Loop Errors
       ========================================================================== */
    /* 1. Base Static Sub-Menu Item Structural Rules */
    #secondary-nav-items .dropdown-menu a,
    #secondary-nav-items .dropdown-menu .dropdown-item {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 0.6rem 1.25rem !important;
        margin: 0 !important;
        
        /* Typography overrides to kill parent inherits */
        text-transform: none !important;
        font-weight: 500 !important;
        font-size: 0.85rem !important;
        letter-spacing: normal !important;
        text-align: left !important;
        color: #ffffff !important;
        
        /* Clear background transitions */
        background-color: transparent !important;
        transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out !important;
    }

    /* 2. Neutralize the naked inner link element hover trigger entirely */
    #secondary-nav-items .dropdown-menu a:hover {
        background-color: transparent !important;
        /* Keeps text white so it doesn't flicker during parent cell hovers */
        color: #ffffff !important; 
    }

    /* 3. Main Target Cell Hover: Triggers ONLY on the explicit dropdown block */
    #secondary-nav-items .dropdown-menu .dropdown-item:hover,
    #secondary-nav-items .dropdown-menu .dropdown-item:focus {
        background-color: var(--color-orange-500) !important;
        color: #ffffff !important;
        margin: 0 !important;
        font-weight: 500 !important;
    }

    /* 4. Safe Fix: If WHMCS has links styled as dropdown-items, make sure it matches perfectly */
    #secondary-nav-items .dropdown-menu a.dropdown-item:hover {
        background-color: var(--color-orange-500) !important;
        color: #ffffff !important;
    }


/* ==========================================================================
   MOBILE & TABLET VIEW
   ========================================================================== */
@media (max-width: 1199px) {
    #secondary-nav-items.hidden {
        display: none !important;
    }
}


/* Refine massive WHMCS card headings globally */
.card-title.m-0,
.card-header .card-title {
    font-size: 0.95rem !important; /* Forces a clean text-xl size */
    line-height: 1.75rem !important;
    letter-spacing: -0.025em !important; /* Tightens text tracking to match font-brand */
    font-weight: 600 !important;
    color: var(--color-orange-500) !important; /* Ensures it stays readable against the bg-slate-950 */

}

/* --- Glassmorphism Main Content Cards (.card-body containers) --- */

/* 1. Target the parent card wrapper holding the card-body */
.card:has(.card-body) {
    background: var(--bg-surface) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important; /* Clean, subtle border */
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4) !important;
}

/* 2. Refine the internal card-body background and layout */
.card-body {
    background: transparent !important; /* Lets the parent container's glass surface show through */
    padding: 24px !important; /* Clean spacing for long text copy like announcements */
}

/* 3. Style nested elements inside the content body cleanly */
.card-body .card-title {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.025em !important;
    color: #ffffff !important;
}

/* 4. Smooth out dividing lines between multiple announcements inside the body */
.card-body .announcement {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding-bottom: 20px !important;
    margin-bottom: 20px !important;
}

.card-body .announcement:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* --- Card Body Link Typography --- */

/* Base style: clean white links with a smooth transition */
.card-body a {
    color: #ffffff !important;
    text-decoration: none !important; /* Cleans up default underlines */
    transition: color 0.2s ease-in-out !important;
}



/* --- Announcements Article Container Fix --- */
.announcements .announcement article {
    margin-bottom: 1rem;
    padding: 1rem;
    background-color: rgba(255, 255, 255, 0.03) !important; /* Semi-transparent dark glass depth */
    border-left: 4px solid var(--color-orange-500) !important; /* Premium matching orange accent line */
    border-top: 1px solid rgba(255, 255, 255, 0.04) !important;  /* Soft framing edges */
    border-right: 1px solid rgba(255, 255, 255, 0.04) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    border-radius: 0 8px 8px 0 !important; /* Smoothly rounds the right corners only */
    color: rgba(255, 255, 255, 0.85) !important; /* Highly readable off-white body text */
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
}

/* --- Announcements Action Buttons --- */

/* 1. Base Button Styling (Both regular buttons and smaller edit controls) */
.announcements .announcement .btn-group-sm > .btn, 
.announcements .announcement .btn-sm {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    border-radius: 6px !important;
    padding: 6px 14px !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important; /* Spaces the icons cleanly from the text */
    transition: all 0.2s ease-in-out !important;
}

/* 2. Hover Interactions */
.announcements .announcement .btn-group-sm > .btn:hover, 
.announcements .announcement .btn-sm:hover {
    background: var(--color-orange-500) !important; /* Fills button with theme orange */
    border-color: var(--color-orange-500) !important;
    color: #ffffff !important; /* Forces text white on background color match */
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.2) !important; /* Soft glowing edge */
    text-decoration: none !important; /* Prevents text from trying to underline */
}

/* 3. Focus/Active States */
.announcements .announcement .btn-group-sm > .btn:active, 
.announcements .announcement .btn-sm:active {
    transform: scale(0.97) !important; /* Small click bounce effect */
}

/* 4. Fine-tuning the icon sizes inside the links */
.announcements .announcement .btn-sm i {
    font-size: 0.8rem !important;
    opacity: 0.8;
}
.announcements .announcement .btn-sm:hover i {
    opacity: 1;
}

/* Safety override: protects standard theme buttons from turning white */
.card-body a.btn {
    text-decoration: none !important;
}
.card-body a.btn-primary {
    color: #ffffff !important;
}


/* Optional: Shrink down a bit more on mobile screens so they don't wrap awkwardly */
@media (max-width: 768px) {
    .card-title.m-0, .card-header .card-title {
        font-size: 1.25rem !important;
        line-height: 1.5rem !important;
        padding-left: 2.5px !important;
    }
}


/* --- Glassmorphism WHMCS Sidebar Styles --- */

/* 1. Main Sidebar Card Wrapper */
.card.card-sidebar {
    background: var(--bg-surface) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4) !important;
}

/* 2. Card Header Fixes */
.card.card-sidebar .card-header {
    background: rgba(255, 255, 255, 0.03) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 14px 18px !important;
}


.card.card-sidebar .card-title i {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* 4. Flush List Group Containers */
.card.card-sidebar .list-group-flush {
    background: transparent !important;
}

/* 5. Glass Interactive Sidebar Links */
.card.card-sidebar .list-group-item-action {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.7) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    padding: 12px 18px !important;
    font-size: 0.95rem !important;
    transition: all 0.2s ease-in-out !important;
    text-decoration: none !important; /* Forces no underline globally */
}

/* Remove border on the last item */
.card.card-sidebar .list-group-item-action:last-child {
    border-bottom: none !important;
}

/* 6. Subtle Hover and Active Interactive States */
.card.card-sidebar .list-group-item-action:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
    padding-left: 22px !important; /* Smooth indent shift effect */
}

.card.card-sidebar .list-group-item-action:active,
.card.card-sidebar .list-group-item-action.active {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    font-weight: 500 !important;
}

/* RSS feed icon color match */
.card.card-sidebar .icon-rss {
    color: #f59e0b !important; /* Clean amber accent instead of raw link blue */
}
/* Prevent global Tailwind card hover lift from affecting the sidebars */
.card.card-sidebar:hover {
    transform: none !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4) !important; /* Matches your default static shadow */
}

/* Freeze main content card layouts while keeping them stable when hovered */
.card:has(.card-body):hover {
    transform: none !important;
    box-shadow: none !important; /* Locks announcements and content containers in place */
}

/* 1. Eliminate the base "lift" effect that makes cards float */
.card {
    transform: none !important;
    box-shadow: none !important;
    margin-bottom: 24px; /* Adjust spacing as needed */
    transition: none !important; /* Disables the animation/movement */
}

/* 2. Explicitly override hover behaviors */
.card:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* ==========================================================================
   LOCKDOWN: Dashboard Panels Layout Stability
   ========================================================================== */

/* 1. Target all panels and their internal structural elements */
#servicesPanel, 
#ticketsPanel, 
#announcementsPanel,
#servicesPanel .list-group-item,
#ticketsPanel .list-group-item,
#announcementsPanel .list-group-item,
#servicesPanel .card-footer,
#ticketsPanel .card-footer,
#announcementsPanel .card-footer {
    transition: none !important; /* Kill any hover animations */
    transform: none !important;  /* Prevent any scaling or lifting */
    box-shadow: none !important; /* Ensure no 'pop-out' effects */
}

/* --- Glassmorphism Knowledgebase Categories Grid --- */

/* 1. Main Static Card Frames */
.card.kb-category {
    background: var(--bg-surface) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4) !important;
    transition: border-color 0.2s ease-in-out !important;
}

/* Explicitly locks the grid cards firmly in place to prevent layout jumping */
.card.kb-category:hover {
    transform: none !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4) !important;
}

/* 2. Anchor Wrapper Alignment & Default Text Controls */
.card.kb-category a.card-body {
    display: block !important;
    padding: 20px !important;
    color: #ffffff !important; /* Base titles to clean white */
    text-decoration: none !important; /* Removes structural lines */
}

/* 3. Typography Header States: Shifts smoothly to theme orange on hover */
.card.kb-category a.card-body .h5 {
    display: flex !important;
    align-items: center !important;
    gap: 8px;
    font-weight: 600 !important;
    letter-spacing: -0.015em !important;
    color: #ffffff !important;
    margin-bottom: 8px !important;
    transition: color 0.2s ease-in-out !important;
}

/* Target title changes cleanly when the card wrapper is hovered */
.card.kb-category a.card-body:hover .h5 {
    color: var(--color-orange-500) !important;
}

/* 4. Description Meta Text Strings */
.card.kb-category p.text-muted small {
    color: rgba(255, 255, 255, 0.6) !important; /* Highly legible soft off-white text */
    line-height: 1.5 !important;
    display: block;
}

/* 5. Folder Icon Accent Styling */
.card.kb-category a.card-body i.fa-folder {
    color: rgba(255, 255, 255, 0.4) !important;
    transition: color 0.2s ease-in-out !important;
}
.card.kb-category a.card-body:hover i.fa-folder {
    color: var(--color-orange-500) !important;
}

/* 6. Article Counters (Floating Badges) */
.card.kb-category .badge-info {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    margin-top: 2px;
}

/* 7. Inline Administrator Edit Controls */
.card.kb-category .btn-default.show-on-card-hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    font-size: 0.75rem !important;
    padding: 2px 10px !important;
    border-radius: 4px !important;
    margin-left: auto !important; /* Pushes button nicely to the far right next to the badge */
    transition: all 0.2s ease-in-out !important;
}

.card.kb-category .btn-default.show-on-card-hover:hover {
    background: var(--color-orange-500) !important;
    border-color: var(--color-orange-500) !important;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.25) !important;
}

/* --- Knowledgebase Article List Items (Perfect Inline Alignment) --- */

/* 1. Main List Container Reset */
.list-group.list-group-flush {
    background: transparent !important;
}

/* 2. Interactive Article Row Anchors */
.list-group-item.kb-article-item {
    background: transparent !important; 
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; 
    padding: 18px 20px !important;
    
    /* Force text layout block rendering instead of flex column blocks */
    display: block !important; 
    text-align: left !important;
    
    color: #ffffff !important; 
    text-decoration: none !important;
    position: relative;
    font-size: 1.05rem !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.4 !important;
    transition: background 0.2s ease-in-out, color 0.2s ease-in-out !important;
}

/* Row Hover State */
.list-group-item.kb-article-item:hover {
    background: rgba(255, 255, 255, 0.02) !important;
    color: var(--color-orange-500) !important;
}

/* Remove border line from final item */
.list-group-item.kb-article-item:last-child {
    border-bottom: none !important;
}

/* 3. Force Icon to remain Inline next to the text string */
.list-group-item.kb-article-item i.fa-file-alt {
    color: rgba(255, 255, 255, 0.4) !important; 
    margin-right: 8px !important; 
    display: inline-block !important;
    vertical-align: middle !important;
    position: relative;
    top: -1px; /* Precision fine-tuning alignment with text height */
    transition: color 0.2s ease-in-out !important;
}

.list-group-item.kb-article-item:hover i.fa-file-alt {
    color: var(--color-orange-500) !important; 
}

/* 4. Description Excerpt (Forced onto a new block line underneath) */
.list-group-item.kb-article-item small {
    display: block !important;
    clear: both !important;
    width: 100% !important;
    margin-top: 8px !important;
    padding-left: 24px !important; /* Indents description text cleanly under the title string, past the icon */
    color: rgba(255, 255, 255, 0.5) !important; 
    font-size: 0.85rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
}

/* Keep description color static on hover */
.list-group-item.kb-article-item:hover small {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* 5. Inline Administrator Edit Controls */
.list-group-item.kb-article-item .btn-default.show-on-card-hover {
    position: absolute !important;
    right: 20px !important;
    top: 14px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    font-size: 0.75rem !important;
    padding: 2px 10px !important;
    border-radius: 4px !important;
    transition: all 0.2s ease-in-out !important;
    z-index: 2; 
}

.list-group-item.kb-article-item .btn-default.show-on-card-hover:hover {
    background: var(--color-orange-500) !important;
    border-color: var(--color-orange-500) !important;
    color: #ffffff !important;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.25) !important;
}
/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn-primary {
    background: linear-gradient(90deg, var(--brand-red), var(--brand-orange));
    color: white;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(249, 115, 22, 0.4);
}

.btn-default {
    color: #fff;
    background-color: #ff6a00;
    border-color: #ff6a00;
    border-radius: var(--rounding-md);
}

.btn-default:hover {
    color: #fff;
    background: #ff8800;
    border-color: background: #ff8800;
    border-radius: var(--rounding-md);
}


.btn-outline {
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
}

.btn-outline:hover {
    background: rgba(255,255,255,0.05);
}
/* Style WHMCS Buttons to match your brand */
.btn-info, .btn-success, .btn-default {
    border-radius: 999px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    font-size: 0.7rem !important;
    padding: 0.6rem 1.5rem !important;
	margin: 2.5px !important;
    font-weight: 700 !important;
}
button.btn-link.btn-remove-from-cart {
    /* Pulling the button to the left */
    margin-left: -5px !important; 
    
    background: rgba(220, 53, 69, 0.1) !important;
    border: 1px solid rgba(220, 53, 69, 0.3) !important;
    color: #ff8e8e !important;
    border-radius: 6px !important;
    padding: 4px 8px !important; 
    padding-right: 0.5rem !important;
    font-size: 0.75rem !important;
    text-decoration: none !important;
    transition: all 0.2s ease;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

button.btn-link.btn-remove-from-cart:hover {
    background: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #ffffff !important;
}
/* Primary buttons should look like your brand orange */
.btn-primary {
    background: linear-gradient(90deg, var(--brand-red), var(--brand-orange)) !important;
    border: none !important;
}

.btn-xs {
    background: #ff6a00 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border-radius: 4px !important; /* Slightly tighter rounding for smaller size */
    font-size: 0.65rem !important;
    padding: 2px 8px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
}

.btn-xs:hover {
    background: #ff8800 !important;
    border-color: #ff6a00 !important;
    color: #ffffff !important;
}

body #order-standard_cart .text-right .btn-checkout {
    /* Branding and Color */
    background-color: #ff6a00 !important;
    border: 1px solid #ff6a00 !important;
    color: #ffffff !important;
    
    /* Layout and Sizing */
    display: block !important;
    width: 100% !important;
    padding: 12px 16px !important; /* Slightly increased for better "button" feel */
    border-radius: 8px !important;
    
    /* Typography */
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    font-size: 0.9rem !important;
    
    /* Transition for interactive feel */
    transition: all 0.2s ease !important;
}

/* Hover state to match your other interactive elements */
body #order-standard_cart .text-right .btn-checkout:hover {
    background-color: #e55f00 !important; /* Slightly darker orange for depth */
    border-color: #e55f00 !important;
    cursor: pointer;
}

/* Ensure the button breaks out of the default 'link' styling */
button.btn-link.btn-continue-shopping,
a.btn-link.btn-continue-shopping {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    font-size: 0.85rem !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center;
}

/* Hover effect to link it to your theme's secondary actions */
button.btn-link.btn-continue-shopping:hover,
a.btn-link.btn-continue-shopping:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #ff6a00 !important; /* Uses your accent color for interaction */
}

/* --- Synced Sidebar & Panel Header Styles --- */

/* 1. Main Container Wrapper (Targets both panels and modern cards) */
.card.card-sidebar,
.panel.panel-sidebar,
.panel-sidebar {
    background: var(--bg-surface) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4) !important;
	text-transform: uppercase !important;
}

/* 2. Unified Header Fixes (Merges card-header and panel-heading) */
.card.card-sidebar .card-header,
.panel.panel-sidebar .panel-heading,
.panel-sidebar .panel-heading {
    background: rgba(255, 255, 255, 0.03) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 14px 18px !important;
}

/* 3. Refined Typography & Layout Sync */
.card.card-sidebar .card-title,
.panel.panel-sidebar .panel-title,
.panel-sidebar .panel-title {
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 0 !important; /* Normalizes legacy panel line-height constraints */
}

/* 4. Global Icon Color Match inside Headers */
.card.card-sidebar .card-title i,
.panel.panel-sidebar .panel-title i,
.panel-sidebar .panel-title i {
    color: rgba(255, 255, 255, 0.6) !important;
}

header.header .topbar {
    margin: 0;
    padding: 2px 0;
    background: var(--bg-surface) !important;
    color: rgba(255, 255, 255, .65);
}
/* --- Glassmorphism Notifications Popover Styles --- */

/* 1. Main Popover Container */
.popover.popover-user-notifications {
    background: rgba(10, 17, 32, 0.75) !important; /* Matches your core dark surface depth */
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.6) !important;
    padding: 6px 0 !important; /* Clean inner vertical spacing */
    min-width: 320px !important;
}

/* 2. Inner Normalization & Clear Header Hide */
.popover-user-notifications .popover-inner {
    background: transparent !important;
}

.popover-user-notifications .popover-header:empty {
    display: none !important;
}

.popover-user-notifications .popover-body {
    padding: 0 !important; /* Allows list items to extend edge-to-edge seamlessly */
    color: #ffffff !important;
}

/* 3. Popover Structural Alignment Arrow Styling */
.popover.popover-user-notifications .arrow::before {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important; /* Syncs border tint */
}

.popover.popover-user-notifications .arrow::after {
    border-bottom-color: rgba(10, 17, 32, 0.75) !important; /* Syncs backdrop fill background */
}

/* 4. Interactive Alerts Unordered List */
.popover-user-notifications ul.client-alerts {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.popover-user-notifications ul.client-alerts li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}

.popover-user-notifications ul.client-alerts li:last-child {
    border-bottom: none !important;
}

/* 5. Anchor Clickable Blocks with Unified No-Line Structure */
.popover-user-notifications ul.client-alerts li a {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 14px 18px !important;
    color: rgba(255, 255, 255, 0.8) !important;
    text-decoration: none !important;
    font-size: 0.875rem !important;
    line-height: 1.4 !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
}

/* Hover and Focus Interactive States */
.popover-user-notifications ul.client-alerts li a:hover,
.popover-user-notifications ul.client-alerts li a:focus {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* 6. Dynamic Icon & Inner Message Typographic Polish */
.popover-user-notifications ul.client-alerts li a i {
    color: #f97316 !important; /* Pops WHMCS alert notice info icons using your brand orange */
    font-size: 1rem !important;
    margin-top: 2px !important; /* Crisp baseline row offset alignment */
    flex-shrink: 0 !important;
}

.popover-user-notifications ul.client-alerts li a .message {
    flex-grow: 1 !important;
    font-weight: 500 !important;
}
.sidebar .card-footer {
    background-color: inherit;
}

.client-home-cards .card-header {
    background-color: inherit;
}

body .primary-content .client-home-cards .card .card-footer {
	    background: inherit;
}
	
/* ==========================================================================
   WHMCS Recent Support Tickets Card - Orange Theme & Reordered Header
   ========================================================================== */

/* Main Card Wrapper Override */
body .primary-content .client-home-cards .card#ticketsPanel {
    background: var(--bg-surface) !important;
    border: 1px solid rgba(226, 232, 240, 0.15);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    margin-bottom: 24px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body .primary-content .client-home-cards .card#ticketsPanel:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

/* Fix Header Structure and SWAP Layout order */
body .primary-content .client-home-cards .card#ticketsPanel .card-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.15);
    padding: 16px 20px;
}

body .primary-content .client-home-cards .card#ticketsPanel .card-title {
    display: flex !important;
    justify-content: flex-start !important; /* Pulls text closer to the icon instead of spacing out */
    align-items: center !important;
    font-size: 1.25rem;
    font-weight: 600;
    color: #ff6a00; /* Matching the theme's vibrant orange */
    width: 100%;
}

/* Force the "Open New Ticket" button to the right side visually */
body .primary-content .client-home-cards .card#ticketsPanel .card-title .float-right {
    float: none !important; /* Cancel legacy float */
    margin-left: auto !important; /* Eats up empty space, pushing the button to the far right */
    order: 2; /* Pushes button to the right side of the text visually */
}

/* Icon Color Modification & Spacing */
body .primary-content .client-home-cards .card#ticketsPanel .card-title > i {
    color: #ff6a00;
    margin-right: 12px !important; /* Fixed tight gap between icon and title text */
}

/* Custom Orange "Open New Ticket" Button styling override */
body .primary-content .client-home-cards .card#ticketsPanel .btn-default.bg-color-blue {
    background-color: #ff6a00 !important;
    color: #ffffff !important;
    border: none;
    padding: 8px 16px;
    border-radius: 30px; /* Kept the pill shape layout from your image */
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: none;
    box-shadow: none;
    transition: background-color 0.15s ease;
}

body .primary-content .client-home-cards .card#ticketsPanel .btn-default.bg-color-blue:hover {
    background-color: #ff8800 !important;
}

/* List Item Rows Layout */
body .primary-content .client-home-cards .card#ticketsPanel .list-group-item {
    background: transparent !important;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid rgba(226, 232, 240, 0.1);
    padding: 16px 20px;
    color: inherit;
    opacity: 0.9;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

body .primary-content .client-home-cards .card#ticketsPanel .list-group-item:last-child {
    border-bottom: none;
}

body .primary-content .client-home-cards .card#ticketsPanel .list-group-item:hover {
    background-color: rgba(255, 255, 255, 0.04) !important;
    opacity: 1;
}

/* Status Labels Styling override */
body .primary-content .client-home-cards .card#ticketsPanel .list-group-item .label {
    float: right;
    font-size: 0.75rem;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 600;
    color: #ffffff;
    text-transform: uppercase;
}

/* Timestamp Text spacing */
body .primary-content .client-home-cards .card#ticketsPanel .list-group-item small {
    display: block;
    margin-top: 6px;
    color: inherit;
    opacity: 0.6;
    font-size: 0.8rem;
}

/* Remove empty padding / border if footer layer is empty */
body .primary-content .client-home-cards .card#ticketsPanel .card-footer {
    padding: 0;
    border-top: none;
    background: transparent !important;
}

/* ==========================================================================
   WHMCS Recent News Card - Orange Theme & Reordered Header
   ========================================================================== */

/* Main Card Wrapper Override */
body .primary-content .client-home-cards .card#announcementsPanel {
    background: var(--bg-surface) !important;
    border: 1px solid rgba(226, 232, 240, 0.15);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    margin-bottom: 24px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body .primary-content .client-home-cards .card#announcementsPanel:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

/* Fix Header Structure and SWAP Layout order */
body .primary-content .client-home-cards .card#announcementsPanel .card-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.15);
    padding: 16px 20px;
}

body .primary-content .client-home-cards .card#announcementsPanel .card-title {
    display: flex !important;
    justify-content: flex-start !important; /* Pulls text closer to the icon instead of spacing out */
    align-items: center !important;
    font-size: 1.25rem;
    font-weight: 600;
    color: #ff6a00; /* Matching the theme's vibrant orange */
    width: 100%;
}

/* Force the "View All" button container to the right side visually */
body .primary-content .client-home-cards .card#announcementsPanel .card-title .float-right {
    float: none !important; /* Cancel legacy float */
    margin-left: auto !important; /* Eats up empty space, pushing the button to the far right */
    order: 2; /* Pushes button to the right side of the text visually */
}

/* Icon Color Modification & Spacing */
body .primary-content .client-home-cards .card#announcementsPanel .card-title > i {
    color: #ff6a00;
    margin-right: 12px !important; /* Fixed tight gap between icon and title text */
}

/* Custom Orange "View All" Button styling override */
body .primary-content .client-home-cards .card#announcementsPanel .btn-default.bg-color-asbestos {
    background-color: #ff6a00 !important;
    color: #ffffff !important;
    border: none;
    padding: 8px 16px;
    border-radius: 30px; /* Modern pill shape layout */
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: none;
    box-shadow: none;
    transition: background-color 0.15s ease;
}

body .primary-content .client-home-cards .card#announcementsPanel .btn-default.bg-color-asbestos:hover {
    background-color: #ff8800 !important;
}

/* List Item Rows Layout */
body .primary-content .client-home-cards .card#announcementsPanel .list-group-item {
    background: transparent !important;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid rgba(226, 232, 240, 0.1);
    padding: 16px 20px;
    color: inherit;
    opacity: 0.9;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

body .primary-content .client-home-cards .card#announcementsPanel .list-group-item:last-child {
    border-bottom: none;
}

body .primary-content .client-home-cards .card#announcementsPanel .list-group-item:hover {
    background-color: rgba(255, 255, 255, 0.04) !important;
    opacity: 1;
}

/* Announcement Date Stamp Spacing */
body .primary-content .client-home-cards .card#announcementsPanel .list-group-item .text-last-updated {
    display: block;
    margin-top: 6px;
    color: inherit;
    opacity: 0.6;
    font-size: 0.8rem;
}

/* Remove empty padding / border if footer layer is empty */
body .primary-content .client-home-cards .card#announcementsPanel .card-footer {
    padding: 0;
    border-top: none;
    background: transparent !important;
}

.client-home-cards .list-group {
    border-top: 0 !important; 
    border-bottom: 0 !important; 
}

.tiles .tile {
   background: var(--bg-surface) !important;
}

.tiles .tile:hover {
    background: rgba(255, 255, 255, 0.03) !important;
    cursor: pointer;
}
.tiles .tile:hover i {
    font-size: 70px;
    color: var(--color-orange-500);
}

body .primary-content .client-home-cards .card .card-header .btn {
	background: var(--color-orange-500);
    border-color: var(--color-orange-500);
    color: #fff;
}
body .primary-content .client-home-cards .card .card-header .btn:hover {
	background: #ff8800;
    border-color: #ff8800;
    color: #fff;
}
body .primary-content .client-home-cards .card .btn-success {
	background: var(--color-orange-500);
    border-color: var(--color-orange-500);
    color: #fff;
	
}
body .primary-content .client-home-cards .card .btn-success:hover {
	background: #ff8800;
    border-color: #ff8800;
    color: #fff;
	
}
/* ==========================================================================
   WHMCS Domain DataTables Layout & Component Architecture Re-Skin
   ========================================================================== */

/* 1. Global Wrapper Cleanup */
.listtable {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
}

/* 2. DataTables Meta Infobar Components (Search / Stats counters) */
div#tableDomainsList_filter {
    float: right;
    margin-bottom: 15px;
}

div#tableDomainsList_filter label input[type="search"] {
    background: var(--bg-surface) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    font-size: 0.9rem;
    transition: border-color 0.2s ease;
}

div#tableDomainsList_filter label input[type="search"]:focus {
    border-color: #ff6a00 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(255, 106, 0, 0.15) !important;
}

.dataTables_info {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 0.85rem !important;
    margin-bottom: 15px;
    display: inline-block;
}

/* 3. Main Data Grid Reset */
table#tableDomainsList.dataTable {
    background: transparent !important;
    border-collapse: separate !important;
    border-spacing: 0 10px !important; /* Spacing between custom block pods */
    width: 100% !important;
    margin: 10px 0 !important;
    border: none !important;
}

/* 4. Table Header Overhauls (Fixes white bar artifact in chrome_acS24otkiQ.png) */
table#tableDomainsList thead,
table#tableDomainsList thead tr {
    background: transparent !important;
}

table#tableDomainsList thead th {
    color: #ff6a00 !important; /* Vibrant Orange Accents */
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
    letter-spacing: 1.2px !important;
    padding: 12px 16px !important;
    border: none !important;
    background: transparent !important;
}

/* Remove default heavy sorting arrow graphic assets */
table#tableDomainsList thead .sorting,
table#tableDomainsList thead .sorting_asc,
table#tableDomainsList thead .sorting_desc {
    background-image: none !important;
    position: relative;
}

/* 5. Row Pods & Layout Design */
table#tableDomainsList tbody tr {
    background: transparent !important; /* Prevent legacy background overrides */
}

table#tableDomainsList tbody td {
    background: var(--bg-surface) !important;
    color: rgba(255, 255, 255, 0.5) !important; /* Balanced neutral contrast for standard text dates */
    font-size: 0.88rem !important;
    padding: 16px 18px !important;
    vertical-align: middle !important;
    border-top: 1px solid rgba(255, 255, 255, 0.03) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
    border-left: none !important;
    border-right: none !important;
    transition: all 0.2s ease-in-out;
}

/* Round inner corners of row pods smoothly */
table#tableDomainsList tbody td:first-child {
    border-left: 1px solid rgba(255, 255, 255, 0.03) !important;
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}

table#tableDomainsList tbody td:last-child {
    border-right: 1px solid rgba(255, 255, 255, 0.03) !important;
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

/* 6. Dynamic Focus Hover State */
table#tableDomainsList tbody tr:hover td {
    background-color: rgba(255, 255, 255, 0.03) !important; /* Micro luminosity light lift */
    color: rgba(255, 255, 255, 0.85) !important; /* Pop standard text brightness on hover */
    border-top-color: rgba(255, 106, 0, 0.25) !important;
    border-bottom-color: rgba(255, 106, 0, 0.25) !important;
}

table#tableDomainsList tbody tr:hover td:first-child {
    border-left-color: #ff6a00 !important;
    box-shadow: inset 4px 0 0 0 #ff6a00; /* Distinct orange accent line indicator */
}

table#tableDomainsList tbody tr:hover td:last-child {
    border-right-color: rgba(255, 106, 0, 0.25) !important;
}

/* 7. Hyperlinks / Primary Domain Meta Data */
table#tableDomainsList tbody td a {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    text-decoration: none !important;
    letter-spacing: 0.2px;
    display: inline-block;
    transition: color 0.15s ease;
}

table#tableDomainsList tbody tr:hover td a {
    color: #ff8533 !important; /* Subtle tint step up on text focus */
}

/* 8. Subtext Auto Renew Info Elements */
table#tableDomainsList tbody td small {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    font-size: 0.78rem !important;
    font-weight: 500;
    color: #28a745 !important; /* Soft green success state */
    opacity: 0.85;
}

/* 9. Core Status Pills Engine Override */
table#tableDomainsList .label.status-active {
    background: rgba(40, 167, 69, 0.1) !important;
    color: #2ec85c !important;
    border: 1px solid rgba(40, 167, 69, 0.2) !important;
    padding: 5px 12px !important;
    border-radius: 50px !important; /* Clean modern pill format */
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block;
}

/* Hide native hidden data fields cleanly */
.w-hidden {
    display: none;
}

/* 10. Forms / Native Checkbox Elements */
table#tableDomainsList tbody td input[type="checkbox"].domids {
    accent-color: #ff6a00;
    cursor: pointer;
    transform: scale(1.1);
    vertical-align: middle;
}
.nav-tabs .nav-link.active {
    color: #495057;
    background-color: #ff6900;
    border-color: #ff6900;
}

/* ==========================================================================
   WHMCS Support Tickets DataTables Re-Skin (Identical UI Mapping)
   ========================================================================== */

/* 1. Global Structure & Spacing */
div#tableTicketsList_filter {
    float: right;
    margin-bottom: 15px;
}

.dataTables_info[id="tableTicketsList_info"] {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 0.85rem !important;
    margin-bottom: 15px;
    display: inline-block;
}

/* Main Table Container Design */
table#tableTicketsList.dataTable {
    background: transparent !important;
    border-collapse: separate !important;
    border-spacing: 0 10px !important; /* Floating row grid gap */
    width: 100% !important;
    margin: 10px 0 !important;
    border: none !important;
}

/* 2. Transparent Header Blocks */
table#tableTicketsList thead,
table#tableTicketsList thead tr {
    background: transparent !important;
}

table#tableTicketsList thead th {
    color: #ff6a00 !important; /* Brand Orange */
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
    letter-spacing: 1.2px !important;
    padding: 12px 16px !important;
    border: none !important;
    background: transparent !important;
}

/* Strip native sorting icons asset rules */
table#tableTicketsList thead .sorting,
table#tableTicketsList thead .sorting_asc,
table#tableTicketsList thead .sorting_desc {
    background-image: none !important;
}

/* 3. Row Blocks Layout */
table#tableTicketsList tbody tr {
    background: transparent !important;
    cursor: pointer;
}

table#tableTicketsList tbody td {
    background: var(--bg-surface) !important;
    color: rgba(255, 255, 255, 0.5) !important; /* Muted date/department elements */
    font-size: 0.88rem !important;
    padding: 16px 18px !important;
    vertical-align: middle !important;
    border-top: 1px solid rgba(255, 255, 255, 0.03) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
    border-left: none !important;
    border-right: none !important;
    transition: all 0.2s ease-in-out;
}

/* Rounded Corner Blocks Edge Handling */
table#tableTicketsList tbody td:first-child {
    border-left: 1px solid rgba(255, 255, 255, 0.03) !important;
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}

table#tableTicketsList tbody td:last-child {
    border-right: 1px solid rgba(255, 255, 255, 0.03) !important;
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

/* 4. Interactive Orange Pop Hover Engine */
table#tableTicketsList tbody tr:hover td {
    background-color: rgba(255, 255, 255, 0.03) !important;
    color: rgba(255, 255, 255, 0.85) !important; /* Illuminate dates/departments */
    border-top-color: rgba(255, 106, 0, 0.25) !important;
    border-bottom-color: rgba(255, 106, 0, 0.25) !important;
}

table#tableTicketsList tbody tr:hover td:first-child {
    border-left-color: #ff6a00 !important;
    box-shadow: inset 4px 0 0 0 #ff6a00; /* Identical vertical accent band */
}

table#tableTicketsList tbody tr:hover td:last-child {
    border-right-color: rgba(255, 106, 0, 0.25) !important;
}

/* 5. Subject and Meta Link Architecture */
table#tableTicketsList tbody td a {
    color: #ffffff !important;
    text-decoration: none !important;
    display: inline-flex;
    flex-direction: column; /* Stack Ticket ID cleanly over the main message string */
    gap: 2px;
    transition: color 0.15s ease;
}

table#tableTicketsList tbody td a.border-left {
    border-left: none !important; /* Strip default theme native rule artifacts */
    padding-left: 0 !important;
}

table#tableTicketsList tbody td span.ticket-number {
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    opacity: 0.6;
}

table#tableTicketsList tbody td span.ticket-subject {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
}

table#tableTicketsList tbody tr:hover td a span.ticket-subject {
    color: #ff8533 !important; /* Tint pop color shifts focus dynamically */
}

/* 6. Premium Badges For Ticket Statuses */
table#tableTicketsList .label.status {
    padding: 5px 12px !important;
    border-radius: 50px !important; /* Perfect Pill */
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block;
    text-shadow: none !important;
    box-shadow: none !important;
}

/* Closed Status Theme Accent Mapping */
table#tableTicketsList .label.status-closed {
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* Added Open/Replied fallbacks to ensure full uniform coverage */
table#tableTicketsList .label.status-open {
    background: rgba(40, 167, 69, 0.1) !important;
    color: #2ec85c !important;
    border: 1px solid rgba(40, 167, 69, 0.2) !important;
}

table#tableTicketsList .label.status-customer-reply {
    background: rgba(255, 106, 0, 0.1) !important;
    color: #ff6a00 !important;
    border: 1px solid rgba(255, 106, 0, 0.2) !important;
}

/* Clean structural utilities */
table#tableTicketsList .w-hidden {
    display: none;
}
/* ==========================================================================
   WHMCS Affiliates DataTables Layout & Component Architecture Re-Skin
   ========================================================================== */

/* 1. DataTables Meta Infobar Components (Search / Stats counters) */
div#tableAffiliatesList_filter {
    float: right;
    margin-bottom: 15px;
}

div#tableAffiliatesList_filter label input[type="search"] {
    background: var(--bg-surface) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    font-size: 0.9rem;
    transition: border-color 0.2s ease;
}

div#tableAffiliatesList_filter label input[type="search"]:focus {
    border-color: #ff6a00 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(255, 106, 0, 0.15) !important;
}

#tableAffiliatesList_info.dataTables_info {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 0.85rem !important;
    margin-bottom: 15px;
    display: inline-block;
}

/* 2. Main Data Grid Reset */
table#tableAffiliatesList.dataTable {
    background: transparent !important;
    border-collapse: separate !important;
    border-spacing: 0 10px !important; /* Spacing between custom block pods */
    width: 100% !important;
    margin: 10px 0 !important;
    border: none !important;
}

/* 3. Table Header Overhauls */
table#tableAffiliatesList thead,
table#tableAffiliatesList thead tr {
    background: transparent !important;
}

table#tableAffiliatesList thead th {
    color: #ff6a00 !important; /* Vibrant Orange Accents */
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
    letter-spacing: 1.2px !important;
    padding: 12px 16px !important;
    border: none !important;
    background: transparent !important;
}

/* Remove default heavy sorting arrow graphic assets */
table#tableAffiliatesList thead .sorting,
table#tableAffiliatesList thead .sorting_asc,
table#tableAffiliatesList thead .sorting_desc {
    background-image: none !important;
    position: relative;
}

/* 4. Row Pods & Layout Design */
table#tableAffiliatesList tbody tr {
    background: transparent !important;
}

table#tableAffiliatesList tbody td {
    background: var(--bg-surface) !important;
    color: rgba(255, 255, 255, 0.5) !important; /* Neutral contrast for standard date & text cells */
    font-size: 0.88rem !important;
    padding: 16px 18px !important;
    vertical-align: middle !important;
    border-top: 1px solid rgba(255, 255, 255, 0.03) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
    border-left: none !important;
    border-right: none !important;
    transition: all 0.2s ease-in-out;
}

/* Round inner corners of row pods smoothly */
table#tableAffiliatesList tbody td:first-child {
    border-left: 1px solid rgba(255, 255, 255, 0.03) !important;
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}

table#tableAffiliatesList tbody td:last-child {
    border-right: 1px solid rgba(255, 255, 255, 0.03) !important;
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

/* 5. Dynamic Focus Hover State */
table#tableAffiliatesList tbody tr:hover td {
    background-color: rgba(255, 255, 255, 0.03) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    border-top-color: rgba(255, 106, 0, 0.25) !important;
    border-bottom-color: rgba(255, 106, 0, 0.25) !important;
}

table#tableAffiliatesList tbody tr:hover td:first-child {
    border-left-color: #ff6a00 !important;
    box-shadow: inset 4px 0 0 0 #ff6a00; /* Distinct orange left accent line */
}

table#tableAffiliatesList tbody tr:hover td:last-child {
    border-right-color: rgba(255, 106, 0, 0.25) !important;
}

/* 6. Hyperlinks / Product & Service Titles */
table#tableAffiliatesList tbody td a {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    text-decoration: none !important;
    letter-spacing: 0.2px;
    display: inline-block;
    transition: color 0.15s ease;
}

table#tableAffiliatesList tbody tr:hover td a {
    color: #ff8533 !important;
}

/* 7. Empty State Styling ("No Records Found") */
table#tableAffiliatesList tbody td.dataTables_empty {
    text-align: center !important;
    color: rgba(255, 255, 255, 0.4) !important;
    font-style: italic;
    padding: 30px 18px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.03) !important;
}

/* 8. Status Pills Override Engine for Affiliates */
table#tableAffiliatesList .label.status-active,
table#tableAffiliatesList .label.status-completed {
    background: rgba(40, 167, 69, 0.1) !important;
    color: #2ec85c !important;
    border: 1px solid rgba(40, 167, 69, 0.2) !important;
    padding: 5px 12px !important;
    border-radius: 50px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block;
}

table#tableAffiliatesList .label.status-pending {
    background: rgba(255, 193, 7, 0.1) !important;
    color: #ffc107 !important;
    border: 1px solid rgba(255, 193, 7, 0.2) !important;
    padding: 5px 12px !important;
    border-radius: 50px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block;
}
/* ==========================================================================
   Custom Form Control - Brand Orange Re-Skin
   ========================================================================== */

/* Base input styling to match your dark UI */
.form-control,
div#tableDomainsList_filter label input[type="search"] {
    background: rgba(255, 255, 255, 0.03) ;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 50px; /* Perfect pill shape matching your buttons/fields */
    padding: 10px 20px !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    width: 100%;
    height: auto !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
}

/* Fix placeholder text contrast */
.form-control::placeholder,
div#tableDomainsList_filter label input[type="search"]::placeholder {
    color: rgba(255, 255, 255, 0.3) !important;
    font-weight: 400;
}

/* Brand Orange Hover State */
.form-control:hover,
div#tableDomainsList_filter label input[type="search"]:hover {
    border-color: rgba(255, 106, 0, 0.5) !important; /* Semi-transparent orange border on hover */
    background-color: rgba(255, 255, 255, 0.02) !important; /* Subtle lighting lift */
}

/* Brand Orange Active/Focus State (When clicking inside) */
.form-control:focus,
div#tableDomainsList_filter label input[type="search"]:focus {
    color: #ffffff !important;
    background-color: var(--bg-surface) !important;
    border-color: #ff6a00 !important; /* Full solid Brand Orange border */
    outline: none !important;
    /* Soft premium orange outer glow */
    box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.15), 
                inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* Autofill styling fix for Webkit browsers (prevents native yellow backgrounds) */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover, 
.form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff !important;
    -webkit-box-shadow: 0 0 0px 1000px var(--bg-surface) inset !important;
    transition: background-color 5000s ease-in-out 0s !important;
    border: 1px solid #ff6a00 !important;
}

.form-control:disabled {
    background-color: rgb(0 0 0 / 5%);
    opacity: 1;
    color: #808080 !important;
}

/* Custom Disabled Field Hover State */
.form-control:disabled:hover,
.form-control[disabled]:hover {
    background-color: rgb(0 0 0 / 5%) !important; /* Slightly lighter for better contrast in dark mode */
    cursor: not-allowed !important; /* Visual cue that it's disabled */
    opacity: 1 !important;
    color: #808080 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.form-control[readonly] {
    background-color: rgba(255, 255, 255, 0.03);
    opacity: 1;
}

/* ==========================================================================
   Bulk Actions Dropdown Menu Re-Skin
   ========================================================================== */

/* Main Dropdown Container Box */
div.dropdown-menu.show {
    background-color: var(--bg-surface) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 10px !important;
    padding: 6px 0 !important;
    margin-top: 5px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
    /* Optional sleek blur background effect */
    backdrop-filter: blur(8px);
}

/* Individual Dropdown Item Links */
div.dropdown-menu.show a.dropdown-item {
    color: rgba(255, 255, 255, 0.75) !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    padding: 10px 18px !important;
    display: flex !important;
    align-items: center;
    gap: 10px; /* Gives nice breathing room between font-awesome icon and text */
    background: transparent !important;
    transition: all 0.15s ease-in-out;
}

/* FontAwesome Icons Layer Coloration */
div.dropdown-menu.show a.dropdown-item i {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.95rem;
    width: 16px;
    text-align: center;
    transition: color 0.15s ease-in-out;
}

/* Interactive Brand Orange Hover State */
div.dropdown-menu.show a.dropdown-item:hover {
    color: #ffffff !important;
    background-color: rgba(255, 106, 0, 0.1) !important; /* Low opacity orange backing */
}

/* Make the icon pop when hovering over the row */
div.dropdown-menu.show a.dropdown-item:hover i {
    color: #ff6a00 !important; /* Full solid brand orange icon */
}

/* Active clicked/focus fallback reset */
div.dropdown-menu.show a.dropdown-item:active {
    background-color: #ff6a00 !important;
    color: #ffffff !important;
}

div.dropdown-menu.show a.dropdown-item:active i {
    color: #ffffff !important;
}

body #order-standard_cart .panel .panel-heading {
    background: inherit;
}

body #order-standard_cart .panel .panel-footer {
    background: inherit;
}

body #order-standard_cart .panel label {
    color: #fff;
}
body #order-standard_cart .cart-body .header-lined {
    margin-bottom: 16px;
    color: var(--color-orange-500);
	text-transform: uppercase;
}

/* ==========================================================================
   WHMCS Support Ticket Reply Form UI Re-Skin
   ========================================================================== */

/* 1. Global Form & Row Structure */
#frmReply {
    background: transparent !important;
    padding: 10px 0;
}

#frmReply .form-group {
    margin-bottom: 1.5rem !important;
}

#frmReply label {
    color: rgba(255, 255, 255, 0.85) !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    margin-bottom: 8px !important;
    letter-spacing: 0.3px;
}

/* 2. Form Controls & Disabled Meta States */
#frmReply .form-control {
    background-color: var(--bg-surface) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 6px !important;
    padding: 10px 14px !important;
    font-size: 0.9rem !important;
    transition: all 0.2s ease-in-out;
}

#frmReply .form-control:disabled, 
#frmReply .form-control[disabled] {
    background-color: rgba(255, 255, 255, 0.02) !important;
    border-color: rgba(255, 255, 255, 0.04) !important;
    color: rgba(255, 255, 255, 0.4) !important;
    cursor: not-allowed;
    box-shadow: none !important;
}

/* 3. Bootstrap Markdown Editor Layout Transformation */
#frmReply .md-editor {
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    background: var(--bg-surface) !important;
    border-radius: 8px !important;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* When typing inside the editor box */
#frmReply .md-editor.active {
    border-color: #ff6a00 !important;
    box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.15) !important;
}

/* Markdown Toolbar Button Container */
#frmReply .md-editor .md-header {
    background: rgba(0, 0, 0, 0.2) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 8px 10px !important;
    gap: 6px;
}

/* Toolbar Buttons Reskin */
#frmReply .md-editor .md-header .btn-group .btn-default {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    border-radius: 4px !important;
    padding: 5px 10px !important;
    font-size: 0.85rem;
    transition: all 0.15s ease;
}

#frmReply .md-editor .md-header .btn-group .btn-default:hover {
    background: rgba(255, 106, 0, 0.15) !important;
    border-color: rgba(255, 106, 0, 0.3) !important;
    color: #ffffff !important;
}


/* Main Textarea Writing Area */
#frmReply textarea.md-input {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-family: inherit;
    padding: 15px !important;
    line-height: 1.6;
}

#frmReply textarea.md-input:focus {
    box-shadow: none !important;
}

/* Markdown Word/Line Counter Footer */
#frmReply .md-editor .md-footer {
    background: rgba(0, 0, 0, 0.15) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
    padding: 6px 15px !important;
    color: rgba(255, 255, 255, 0.4) !important;
}

/* Fullscreen control styling anchor */
#frmReply .md-editor .md-controls .md-control-fullscreen {
    color: rgba(255, 255, 255, 0.4) !important;
    padding-top: 4px;
}
#frmReply .md-editor .md-controls .md-control-fullscreen:hover {
    color: #ff6a00 !important;
}

/* 4. Modern File Attachment Components */
#frmReply .attachment-group {
    background: var(--bg-surface) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 6px !important;
    padding: 6px !important;
    display: flex;
    align-items: center;
}

#frmReply .custom-file {
    height: auto !important;
}

#frmReply .custom-file-label {
    background: transparent !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.5) !important;
    position: relative !important;
    top: 0;
    left: 0;
    right: 0;
    margin-bottom: 0;
    padding: 8px 12px !important;
    height: auto !important;
    cursor: pointer;
}

#frmReply .custom-file-label::after {
    display: none !important; /* Hide legacy browser native label buttons */
}

#frmReply .custom-file-input {
    cursor: pointer;
}

/* "Add More" Action Button Element */
#frmReply button#btnTicketAttachmentsAdd {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
    color: #ffffff !important;
    padding: 8px 16px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

#frmReply button#btnTicketAttachmentsAdd:hover {
    background: #ff6a00 !important;
    border-color: #ff6a00 !important;
}

/* Allowed File Specifications Text Label */
#frmReply .text-muted {
    color: rgba(255, 255, 255, 0.35) !important;
    margin-top: 8px;
}

/* 5. Bottom Action Buttons Container (Pill Design Mapping) */
#frmReply .form-group.text-center {
    margin-top: 2rem !important;
    display: flex;
    justify-content: center;
    gap: 12px;
}

/* Submit Action Button */
#frmReply input[type="submit"].btn-primary {
    background: #ff6a00 !important;
    border: 1px solid #ff6a00 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 10px 30px !important;
    border-radius: 50px !important; /* Pill format matching table badges */
    box-shadow: 0 4px 12px rgba(255, 106, 0, 0.2) !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

#frmReply input[type="submit"].btn-primary:hover {
    background: #ff8533 !important;
    border-color: #ff8533 !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(255, 106, 0, 0.3) !important;
}

/* Cancel Action Button */
#frmReply input[type="reset"].btn-default {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    padding: 10px 24px !important;
    border-radius: 50px !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

#frmReply input[type="reset"].btn-default:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

.invoice-summary-table td.total-row {
    background-color: inherit !important;
    font-weight: 700;
	
}

.paypal_ppcpv-payment-form .selected {
    background-color: inherit !important;
}

/* ==========================================================================
   WHMCS Open Ticket Form - Matching Reply UI Architecture
   ========================================================================== */

/* 1. Editor Container Wrapper */
.md-editor {
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    background: var(--bg-surface) !important;
    border-radius: 8px !important;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Active/Focus State */
.md-editor.active {
    border-color: #ff6a00 !important;
    box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.15) !important;
}

/* 2. Toolbar Header */
.md-editor .md-header {
    background: rgba(0, 0, 0, 0.2) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 8px 10px !important;
    gap: 6px;
    display: flex;
}

/* 3. Toolbar Buttons */
.md-editor .md-header .btn-group .btn-default {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    border-radius: 4px !important;
    padding: 5px 10px !important;
    font-size: 0.85rem;
    transition: all 0.15s ease;
}

.md-editor .md-header .btn-group .btn-default:hover {
    background: rgba(255, 106, 0, 0.15) !important;
    border-color: rgba(255, 106, 0, 0.3) !important;
    color: #ffffff !important;
}


/* 4. Textarea Area */
.md-editor textarea.md-input {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    padding: 15px !important;
    line-height: 1.6;
}

/* 5. Footer/Status Bar */
.md-editor .md-footer {
    background: rgba(0, 0, 0, 0.15) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
    padding: 6px 15px !important;
    color: rgba(255, 255, 255, 0.4) !important;
}

/* Fullscreen control */
.md-editor .md-controls .md-control-fullscreen {
    color: rgba(255, 255, 255, 0.4) !important;
}
.md-editor .md-controls .md-control-fullscreen:hover {
    color: #ff6a00 !important;
}

/* ==========================================================================
   WHMCS Domain Pricing List - Matching Domain Table Architecture
   ========================================================================== */

/* 1. Filter and Info Positioning */
div#tableDomainPricing_filter {
    float: right;
    margin-bottom: 15px;
}

div#tableDomainPricing_filter label input[type="search"] {
    background: var(--bg-surface) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    font-size: 0.9rem;
}

/* 2. Main Data Grid Reset */
table#tableDomainPricing.dataTable {
    background: transparent !important;
    border-collapse: separate !important;
    border-spacing: 0 10px !important; 
    width: 100% !important;
    margin: 10px 0 !important;
    border: none !important;
}

/* 3. Table Header Overhauls */
table#tableDomainPricing thead th {
    color: #ff6a00 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
    letter-spacing: 1.2px !important;
    padding: 12px 16px !important;
    border: none !important;
    background: transparent !important;
}

/* 4. Row Pods Layout */
table#tableDomainPricing tbody tr {
    background: transparent !important;
}

table#tableDomainPricing tbody td {
    background: var(--bg-surface) !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 0.88rem !important;
    padding: 16px 18px !important;
    vertical-align: middle !important;
    border-top: 1px solid rgba(255, 255, 255, 0.03) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
}

/* Rounded corners for row pods */
table#tableDomainPricing tbody td:first-child {
    border-left: 1px solid rgba(255, 255, 255, 0.03) !important;
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
    color: #ffffff !important; /* Emphasizes the TLD name */
    font-weight: 600 !important;
}

table#tableDomainPricing tbody td:last-child {
    border-right: 1px solid rgba(255, 255, 255, 0.03) !important;
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

/* 5. Dynamic Focus Hover State */
table#tableDomainPricing tbody tr:hover td {
    background-color: rgba(255, 255, 255, 0.03) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    border-top-color: rgba(255, 106, 0, 0.25) !important;
    border-bottom-color: rgba(255, 106, 0, 0.25) !important;
}

table#tableDomainPricing tbody tr:hover td:first-child {
    border-left-color: #ff6a00 !important;
    box-shadow: inset 4px 0 0 0 #ff6a00;
}

/* 6. Domain Specific Category & Price Highlights */
table#tableDomainPricing .tld-category {
    padding: 4px 10px !important;
    border-radius: 50px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    display: inline-block;
    background: rgba(255, 106, 0, 0.1) !important;
    border: 1px solid rgba(255, 106, 0, 0.2) !important;
    color: #ff6a00 !important;
}

/* ==========================================================================
   WHMCS Search Input - Search Icon Integration
   ========================================================================== */

div#tableDomainPricing_filter label input[type="search"].form-control {
    /* Base Surface Styling */
    background-color: var(--bg-surface) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    font-size: 0.88rem !important;
    height: 38px;
    width: 240px;
    outline: none !important;
    box-shadow: none !important;
    transition: all 0.2s ease-in-out !important;

    /* Left Padding Shift so text doesn't overlap the icon */
    padding: 8px 14px 8px 36px !important;
}

/* Hover State */
div#tableDomainPricing_filter label input[type="search"].form-control:hover {
    border-color: rgba(255, 255, 255, 0.18) !important;
    background-color: rgba(255, 255, 255, 0.02) !important;
}

/* Focus State with Glow */
div#tableDomainPricing_filter label input[type="search"].form-control:focus {
    border-color: #ff6a00 !important;
    background-color: rgba(255, 255, 255, 0.04) !important;
    box-shadow: 0 0 10px rgba(255, 106, 0, 0.2) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   WHMCS TLD Filter Badges - Matching Dark Pod & Orange Accent Architecture
   ========================================================================== */

/* 1. Filter Container Layout */
.tld-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-bottom: 20px;
    padding: 4px 0;
}

/* 2. Base Badge Pill Styling (Inactive State) */
.tld-filters .badge,
.tld-filters a.badge-secondary {
    display: inline-flex;
    align-items: center;
    background: var(--bg-surface) !important;
    color: rgba(255, 255, 255, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 50px !important;
    padding: 8px 14px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px;
    text-decoration: none !important;
    transition: all 0.2s ease-in-out !important;
    cursor: pointer;
}

/* 3. Hover State */
.tld-filters .badge:hover,
.tld-filters a.badge-secondary:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(255, 106, 0, 0.3) !important;
    transform: translateY(-1px);
}

/* 4. Active State / Selected Badge (Overriding .badge-success) */
.tld-filters .badge.badge-success,
.tld-filters .badge.active {
    background: rgba(255, 106, 0, 0.12) !important;
    color: #ff6a00 !important;
    border: 1px solid #ff6a00 !important;
    box-shadow: 0 0 12px rgba(255, 106, 0, 0.15);
    font-weight: 700 !important;
}

/* 5. Active Hover State Adjustment */
.tld-filters .badge.badge-success:hover,
.tld-filters .badge.active:hover {
    background: rgba(255, 106, 0, 0.2) !important;
    color: #ffffff !important;
}

/* Container & Table Headers - Equalized Flex Alignment */
body #order-standard_cart .domain-pricing,
body #order-standard_cart .domain-pricing .tld-pricing-header,
body #order-standard_cart .domain-pricing .tld-pricing-header .tld-column,
body #order-standard_cart .domain-pricing .tld-pricing-header div,
.tld-pricing-header {
  background-color: var(--bg-inverted) !important;
  color: #ffffff !important;
  font-weight: 600;
}

/* Fix Header Row Vertical Alignment */
body #order-standard_cart .domain-pricing .tld-pricing-header {
  display: flex !important;
  align-items: center !important;
  border-bottom: 2px solid #1b2e4b !important;
  padding: 8px 0 !important;
}

body #order-standard_cart .domain-pricing .tld-pricing-header div {
  background-color: transparent !important;
  border-bottom: none !important;
  padding: 8px !important;
  text-align: center;
}

body #order-standard_cart .domain-pricing .tld-pricing-header div:first-child {
  text-align: left;
}

/* Data Rows - Force Uniform Dark State (Kill Zebra Striping) */
body #order-standard_cart .domain-pricing .tld-row,
body #order-standard_cart .domain-pricing .tld-row:nth-child(even),
body #order-standard_cart .domain-pricing .tld-row:nth-child(odd) {
  background-color: #0e1726 !important;
  color: #bfc9d4 !important;
  border-bottom: 1px solid #191e3a !important;
  align-items: center;
  transition: background-color 0.15s ease-in-out;
}

/* Row Text & Accent Colors */
body #order-standard_cart .domain-pricing .tld-row strong,
body #order-standard_cart .domain-pricing .tld-row .two-row-center {
  color: #ffffff !important;
}

body #order-standard_cart .domain-pricing .tld-row small,
body #order-standard_cart .domain-pricing .tld-row .text-muted {
  color: #888ea8 !important;
}

body #order-standard_cart .domain-pricing .tld-row.highlighted,
body #order-standard_cart .domain-pricing .tld-row.highlighted div {
  background-color: #191e3a !important;
}
body #order-standard_cart .domain-pricing .bg-white {
    border: 1px solid #ff6a00;
}


/* ==========================================================================
   Server Status Table - Modern Dark-UI Skin
   ========================================================================== */

/* 1. Reset Responsive Wrapper */
.table-responsive {
    background: transparent !important;
    padding: 0 !important;
}

/* 2. Main Table Grid */
table.table {
    background: transparent !important;
    border-collapse: separate !important;
    border-spacing: 0 10px !important; /* Elegant vertical row separation */
    width: 100% !important;
    margin: 10px 0 !important;
    border: none !important;
}

/* 3. Header Styling */
table.table thead th {
    color: #ff6a00 !important; /* Brand Orange */
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
    letter-spacing: 1.2px !important;
    padding: 12px 20px !important;
    border: none !important;
    background: transparent !important;
}

/* 4. Row Pods */
table.table tbody tr {
    background: var(--bg-surface) !important;
    transition: all 0.2s ease;
}

table.table tbody td {
    color: rgba(255, 255, 255, 0.7) !important;
    padding: 18px 20px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Rounded corners for the row blocks */
table.table tbody tr td:first-child {
    border-left: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}

table.table tbody tr td:last-child {
    border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

/* 5. Modern Status Icon Handling */
/* Replace default image sizes with subtle indicators */
table.table img[src*="statusok.gif"] {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2328a745'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3C/svg%3E");
    width: 12px !important;
    height: 12px !important;
    filter: drop-shadow(0 0 4px rgba(40, 167, 69, 0.4));
}

table.table img[src*="statusfailed.gif"] {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23dc3545'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3C/svg%3E");
    width: 12px !important;
    height: 12px !important;
    filter: drop-shadow(0 0 4px rgba(220, 53, 69, 0.4));
}

/* 6. Links & Active Actions */
table.table tbody td a {
    color: #ff6a00;
    font-weight: 600 !important;
    text-decoration: none !important;
    font-size: 0.85rem !important;
}

table.table tbody td a:hover {
    text-decoration: underline;
}

/* 7. Hover Pop Effect */
table.table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

table.table tbody tr:hover td {
    color: #ffffff !important;
    border-top-color: rgba(255, 106, 0, 0.2) !important;
    border-bottom-color: rgba(255, 106, 0, 0.2) !important;
}
/* ==========================================================================
   UNIFIED SERVICES TABLE: FINAL PATCH
   ========================================================================== */

/* 1. Container & Spacing: The "Floating Card" Foundation */
table#tableServicesList {
    background: transparent !important;
    border-collapse: separate !important;
    border-spacing: 0 10px !important; /* Creates the gap between rows */
    width: 100% !important;
    border: none !important;
}

/* 2. Header Uniformity */
table#tableServicesList thead th {
    color: #ff6a00 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
    letter-spacing: 1.2px !important;
    padding: 12px 18px !important;
    border: none !important;
    background: transparent !important;
}

/* 3. Row Card Styling */
table#tableServicesList tbody tr {
    background: var(--bg-surface) !important; /* Main Dark Background */
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 8px !important;
}

/* Ensure cells are transparent so row color shines through */
table#tableServicesList tbody td {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.7) !important;
    padding: 16px 18px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.03) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
}

/* Rounded Edges for the row card */
table#tableServicesList tbody tr td:first-child {
    border-left: 1px solid rgba(255, 255, 255, 0.03) !important;
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}

table#tableServicesList tbody tr td:last-child {
    border-right: 1px solid rgba(255, 255, 255, 0.03) !important;
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

/* 4. Hover Effect: Match the orange side-accent style */
table#tableServicesList tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    box-shadow: inset 4px 0 0 0 #ff6a00 !important; /* The signature orange bar */
}

/* 5. Override Bootstrap Striping */
table#tableServicesList.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--bg-surface) !important;
}

/* 6. Clean up text/links within the cards */
table#tableServicesList tbody td strong { color: #fff !important; }
table#tableServicesList tbody td a { color: #ff6a00 !important; text-decoration: none !important; }
/* ==========================================================================
   cPanel Usage Stats - Modern Re-Skin
   ========================================================================== */

.cpanel-usage-stats {
    padding: 25px !important;
}

.cpanel-usage-stats strong {
    color: #ffffff !important;
    font-size: 1rem !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Stats Container Cards */
.cpanel-usage-stats .col-md-6 {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 20px 10px;
    margin: 10px 0;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.2s ease;
}

.cpanel-usage-stats .col-md-6:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 106, 0, 0.3);
}

/* The Knob Input Styling */
.cpanel-usage-stats .usage-dial {
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Footer Metadata */
.cpanel-usage-stats .limit-near {
    margin-top: 20px !important;
    font-size: 0.75rem !important;
    color: rgba(255, 255, 255, 0.3) !important;
    font-style: italic;
}
/* ==========================================================================
   FIXED: CPanel Usage Statistics Overlap & Spacing
   ========================================================================== */

/* 1. Reset the wrapper to a clean Flexbox layout */
.cpanel-usage-stats .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* 2. Style the stat cards and use 'gap' instead of <br> tags */
.cpanel-usage-stats [class*="col-"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px !important;
}

/* 3. The CRITICAL fix: Target the Knob wrapper and its internal elements */
.cpanel-usage-stats div[style*="position: relative"] {
    position: relative !important;
    display: inline-block !important;
    margin: 15px 0 !important; /* Replaces the need for <br> */
}

/* 4. Force the input dial to sit naturally in the center */
.cpanel-usage-stats .usage-dial {
    position: static !important; /* Overrides the plugin's absolute positioning */
    margin: 0 !important;
    display: block !important;
    /* Clean up text layout */
    font-size: 20px !important;
    line-height: 1.2 !important;
}

/* 5. Improve vertical rhythm for the text below */
.cpanel-usage-stats strong {
    display: block;
    margin-bottom: 5px;
    font-size: 0.9rem;
}

.cpanel-usage-stats .usage-text, 
.cpanel-usage-stats div:not([class]):not([id]) {
    margin-top: 10px !important;
    line-height: 1.5 !important;
    font-size: 0.85rem;
}
/* 1. Target the wrapper generated by jQuery Knob */
/* This ensures the gauge stays centered and doesn't overlap text */
.knob-wrapper-fixed {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
    height: 100px !important;
    margin: 10px 0 !important;
}

/* 2. Override the plugin's absolute positioning on the input text */
/* This forces the percentage text to sit properly within the gauge */
.usage-dial {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    
    /* Modern Typography */
    font-family: 'Inter', sans-serif !important;
    font-weight: 800 !important;
    font-size: 22px !important;
    color: #ffffff !important; /* Forces white text for dark mode */
    background: transparent !important;
    border: none !important;
    width: 100% !important;
}

/* 3. Ensure the canvas remains responsive */
.knob-wrapper-fixed canvas {
    max-width: 100% !important;
    height: auto !important;
}
/* ==========================================================================
   UNIFIED PANEL STYLING: #servicesPanel
   ========================================================================== */

/* 1. Main Card Background & Border Cleanup */
#servicesPanel.card {
    background-color: var(--bg-surface) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 8px !important;
}

/* 2. Header: Transparent & Minimalist */
#servicesPanel .card-header {
    background-color: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding: 16px 20px !important;
}

/* 3. List Items: Ensure they blend with the panel background */
#servicesPanel .list-group-item {
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, 0.03) !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

/* 4. Footer: Clean up footer spacing */
#servicesPanel .card-footer {
    background-color: transparent !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding: 12px 20px !important;
}

/* 5. Service Name & Domain Typography */
#servicesPanel .div-service-name .font-weight-bold {
    color: #ffffff !important;
}

#servicesPanel .text-domain {
    color: rgba(255, 255, 255, 0.4) !important;
}
/* 1. Menu Container: Dark Surface & Rounded Corners */
.dropdown-menu {
    background-color: var(--bg-surface) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    padding: 8px 0 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

/* 2. Individual Items: Text and Hover State */
.dropdown-menu .dropdown-item {
    color: rgba(255, 255, 255, 0.7) !important;
    padding: 10px 20px !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* 3. Hover Effect: Brand-matching subtle highlight */
.dropdown-menu .dropdown-item:hover, 
.dropdown-menu .dropdown-item:focus {
    background-color: rgba(255, 106, 0, 0.1) !important; /* Soft orange tint */
    color: #ffffff !important;
}

/* 4. Spinner/Loading State */
.dropdown-menu .loading {
    margin-right: 8px;
    color: #ff6a00 !important;
}


/* Ensure the layout rows inside the payment area have spacing */
#creditCardInputFields .row, 
#paypal_acdc_input_container .row {
    margin-left: -10px;
    margin-right: -10px;
}

/* Add spacing for columns within the payment section */
#creditCardInputFields .col-sm-6, 
#creditCardInputFields .col-sm-3 {
    padding-left: 10px;
    padding-right: 10px;
}

/* Style the text inside the payment container */
.payment-instructions {
    color: var(--text-main);
    margin-bottom: 15px;
    font-size: 0.9em;
}

/* Ensure the PayPal iframe containers don't have stray borders */
#paypal_acdc_input_container iframe {
    border-radius: var(--rounding-md);
}
body #order-standard_cart #frmCheckout #creditCardInputFields {
    background-color: #020618;
    border: 1px solid #ffffff;
    border-radius: var(--rounding-md);
}

#creditCardInputFields, #paypal_acdc_input_container {
	background-color: transparent;
    border: inherit;
    border-radius: var(--rounding-md);
    padding: 16px;
    margin-top: 0;
    margin-bottom: 0;
}
}

.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label {
	background: rgb(255 255 255 / 6%) !important;
}

.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label {
	background: rgb(255 255 255 / 6%) !important;
	
}

#order-standard_cart .mc-promo {
	
	background: rgba(255, 255, 255, 0.03) !important;
	
}

#order-standard_cart .mc-promo .body {
background: rgba(255, 255, 255, 0.03) !important;
}

.table {
	color: #ff6a00 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
    letter-spacing: 1.2px !important;
    padding: 12px 16px !important;
    border: none !important;
    background: transparent !important;
}

/* ==========================================================================
   WHMCS Invoice List - Matching Domain Table Architecture
   ========================================================================== */

/* 1. Filter and Info Positioning */
div#tableInvoicesList_filter {
    float: right;
    margin-bottom: 15px;
}

div#tableInvoicesList_filter label input[type="search"] {
    background: var(--bg-surface) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    font-size: 0.9rem;
}

/* 2. Main Data Grid Reset */
table#tableInvoicesList.dataTable {
    background: transparent !important;
    border-collapse: separate !important;
    border-spacing: 0 10px !important; 
    width: 100% !important;
    margin: 10px 0 !important;
    border: none !important;
}

/* 3. Table Header Overhauls */
table#tableInvoicesList thead th {
    color: #ff6a00 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
    letter-spacing: 1.2px !important;
    padding: 12px 16px !important;
    border: none !important;
    background: transparent !important;
}

/* 4. Row Pods Layout */
table#tableInvoicesList tbody tr {
    background: transparent !important;
}

table#tableInvoicesList tbody td {
    background: var(--bg-surface) !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 0.88rem !important;
    padding: 16px 18px !important;
    vertical-align: middle !important;
    border-top: 1px solid rgba(255, 255, 255, 0.03) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
}

/* Rounded corners for row pods */
table#tableInvoicesList tbody td:first-child {
    border-left: 1px solid rgba(255, 255, 255, 0.03) !important;
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}

table#tableInvoicesList tbody td:last-child {
    border-right: 1px solid rgba(255, 255, 255, 0.03) !important;
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

/* 5. Dynamic Focus Hover State */
table#tableInvoicesList tbody tr:hover td {
    background-color: rgba(255, 255, 255, 0.03) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    border-top-color: rgba(255, 106, 0, 0.25) !important;
    border-bottom-color: rgba(255, 106, 0, 0.25) !important;
}

table#tableInvoicesList tbody tr:hover td:first-child {
    border-left-color: #ff6a00 !important;
    box-shadow: inset 4px 0 0 0 #ff6a00;
}

/* 6. Invoice Specific Status Pill Styling */
table#tableInvoicesList .label {
    padding: 5px 12px !important;
    border-radius: 50px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    display: inline-block;
}

/* Paid Status (Green) */
table#tableInvoicesList .status-paid {
    background: rgba(40, 167, 69, 0.1) !important;
    border: 1px solid rgba(40, 167, 69, 0.2) !important;
}
table#tableInvoicesList .status-paid .textgreen {
    color: #2ec85c !important;
}

/* Refunded Status (Yellow/Orange) */
table#tableInvoicesList .status-refunded {
    background: rgba(255, 193, 7, 0.1) !important;
    border: 1px solid rgba(255, 193, 7, 0.2) !important;
}
table#tableInvoicesList .status-refunded .textblack {
    color: #ffc107 !important;
}
/* ==========================================================================
   WHMCS Email History Table - Integrated Design
   ========================================================================== */

/* 1. Filter and Info Positioning */
div#tableEmailsList_filter {
    float: right;
    margin-bottom: 15px;
}

div#tableEmailsList_filter label input[type="search"] {
    background: var(--bg-surface) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    font-size: 0.9rem;
}

/* 2. Main Data Grid Reset */
table#tableEmailsList.dataTable {
    background: transparent !important;
    border-collapse: separate !important;
    border-spacing: 0 10px !important; 
    width: 100% !important;
    margin: 10px 0 !important;
    border: none !important;
}

/* 3. Table Header Overhauls */
table#tableEmailsList thead th {
    color: #ff6a00 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
    letter-spacing: 1.2px !important;
    padding: 12px 16px !important;
    border: none !important;
    background: transparent !important;
}

/* 4. Row Pods Layout */
table#tableEmailsList tbody tr {
    background: transparent !important;
}

table#tableEmailsList tbody td {
    background: var(--bg-surface) !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 0.88rem !important;
    padding: 16px 18px !important;
    vertical-align: middle !important;
    border-top: 1px solid rgba(255, 255, 255, 0.03) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
}

/* Rounded corners for row pods */
table#tableEmailsList tbody td:first-child {
    border-left: 1px solid rgba(255, 255, 255, 0.03) !important;
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}

table#tableEmailsList tbody td:last-child {
    border-right: 1px solid rgba(255, 255, 255, 0.03) !important;
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

/* 5. Dynamic Focus Hover State */
table#tableEmailsList tbody tr:hover td {
    background-color: rgba(255, 255, 255, 0.03) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    border-top-color: rgba(255, 106, 0, 0.25) !important;
    border-bottom-color: rgba(255, 106, 0, 0.25) !important;
}

table#tableEmailsList tbody tr:hover td:first-child {
    border-left-color: #ff6a00 !important;
    box-shadow: inset 4px 0 0 0 #ff6a00;
}

/* 6. Action Button Styling */
table#tableEmailsList .btn-info {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    font-size: 0.75rem !important;
    padding: 6px 12px !important;
    transition: all 0.2s ease;
}

table#tableEmailsList .btn-info:hover {
    background: #ff6a00 !important;
    border-color: #ff6a00 !important;
    color: #ffffff !important;
}
/* ==========================================================================
   WHMCS Quotes List - Matching Domain/Invoice Architecture
   ========================================================================== */

/* 1. Main Data Grid Reset */
table#tableQuotesList.dataTable {
    background: transparent !important;
    border-collapse: separate !important;
    border-spacing: 0 10px !important; 
    width: 100% !important;
    margin: 10px 0 !important;
    border: none !important;
}

/* 2. Table Header Overhauls */
table#tableQuotesList thead th {
    color: #ff6a00 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
    letter-spacing: 1.2px !important;
    padding: 12px 16px !important;
    border: none !important;
    background: transparent !important;
}

/* 3. Row Pods Layout */
table#tableQuotesList tbody tr {
    background: transparent !important;
}

table#tableQuotesList tbody td {
    background: var(--bg-surface) !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 0.88rem !important;
    padding: 16px 18px !important;
    vertical-align: middle !important;
    border-top: 1px solid rgba(255, 255, 255, 0.03) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
}

/* Rounded corners for row pods */
table#tableQuotesList tbody td:first-child {
    border-left: 1px solid rgba(255, 255, 255, 0.03) !important;
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}

table#tableQuotesList tbody td:last-child {
    border-right: 1px solid rgba(255, 255, 255, 0.03) !important;
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

/* 4. Hover State */
table#tableQuotesList tbody tr:hover td {
    background-color: rgba(255, 255, 255, 0.03) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    border-top-color: rgba(255, 106, 0, 0.25) !important;
    border-bottom-color: rgba(255, 106, 0, 0.25) !important;
}

table#tableQuotesList tbody tr:hover td:first-child {
    border-left-color: #ff6a00 !important;
    box-shadow: inset 4px 0 0 0 #ff6a00;
}

/* 5. Button & Action Column Styling */
table#tableQuotesList .btn-default {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    font-size: 0.75rem !important;
    transition: all 0.2s ease;
}

table#tableQuotesList .btn-default:hover {
    background: #ff6a00 !important;
    border-color: #ff6a00 !important;
}

/* 6. Quote Status Pill */
table#tableQuotesList .label {
    padding: 5px 12px !important;
    border-radius: 50px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
}

.card, .mc-promo-login, .mc-promo-manage {
    background-color: inherit;

}


/* 6. Pagination & Length UI */
.dataTables_paginate .pagination .page-link {
    background: var(--bg-surface) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    margin: 0 4px;
}

.dataTables_paginate .pagination .page-item.disabled .page-link {
    color: rgba(255, 255, 255, 0.2) !important;
}

div.dataTables_length select.custom-select {
    background-color: var(--bg-surface) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 6px !important;
}


body .secondary-cart-body #domainRenewals {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid #e4e4e71f;
    border-radius: var(--rounding-md);
}

body .secondary-cart-body #domainRenewals .domain-renewal {
    background: rgba(255, 255, 255, 0.03) !important;
    border-bottom: 1px #ffffff14 solid;
}

#order-standard_cart .field, #order-standard_cart .form-control {
     background-color: inherit !important;
} 
/* ==========================================================================
   Global Select & Option Styling - Unified Dark Theme
   ========================================================================== */

/* 1. Target all select elements */
select.form-control,
.form-control select {
    background-color: rgb(15 23 42) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important; /* Matches your table pod radius */
    padding: 10px 14px !important;
    font-size: 0.9rem !important;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

/* 2. Styling for individual options */
select.form-control option,
select option {
    background-color: rgb(15 23 42) !important;
    color: #ffffff !important;
    padding: 12px !important;
    border: none !important;
}

/* 3. Focus/Active State with Orange Accent */
select.form-control:focus,
select:focus {
    border-color: #ff6a00 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.15) !important;
}

/* 4. Disabled State */
select.form-control:disabled,
select[disabled] {
    background-color: #2a2a2a !important;
    color: #808080 !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
    cursor: not-allowed !important;
}

body #order-standard_cart .order-summary {
    margin: 0 0 20px 0;
    padding: 0;
    background-color: var(--bg-surface);
    border-bottom: none;
    border-radius: var(--rounding-md);
}

body #order-standard_cart .order-summary .summary-container {
    border-radius: 0 0 var(--rounding-md) var(--rounding-md);
    background-color: var(--bg-surface);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 0;
    padding: 16px;
}

body #order-standard_cart .order-summary h2 {
    color: var(--color-orange-500);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--rounding-md) var(--rounding-md) 0 0;
	text-transform: uppercase;
	font-weight: 700;
}

body #order-standard_cart .cart-body .view-cart-items-header {
    margin: 0;
    padding: 8px 10px;
    color: #ffffff; /* Consistent with your table text */
    background-color: var(--bg-surface); /* Matches your pod backgrounds */
    border: 1px solid rgba(255, 255, 255, 0.08); /* Consistent with your border logic */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    border-radius: 8px 8px 0 0;
    border-bottom: 2px solid #ff6a00; /* Adds the accent color to the header */
}

body #order-standard_cart .cart-body .view-cart-items .item {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 0;
}

#order-standard_cart .view-cart-items .item {
    margin: 0;
    padding: 10px;
    background-color: var(--bg-surface) !important;
    border-left: 0;
    border-right: 0;
    font-size: .8em;
}

body #order-standard_cart .cart-body .view-cart-items {
color: #ffffff; 
}
.modal-content {
    background-color: var(--bg-surface) !important; /* Matches your dashboard background */
    border: 1px solid rgba(255, 255, 255, 0.08) !important; /* Subtle border */
    border-radius: 12px !important; /* Slightly more rounded than standard rows for a modal feel */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important; /* Adds depth */
    color: #ffffff !important;
    outline: 0 !important;
}

/* Optional: If you have a header inside the modal */
.modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding: 16px 20px !important;
}

/* Optional: If you have a footer inside the modal */
.modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding: 16px 20px !important;
}

#order-standard_cart .modal-title {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers the icon horizontally */
    width: 100%;
}

#order-standard_cart .modal-title i {
    display: block; /* Keeping block is fine now that the parent handles alignment */
    padding-top: 25px;
    margin: 0 auto; /* Ensures it stays centered */
}

/* 1. Reset for the Active Tab (the selected one) */
body #order-standard_cart .secondary-cart-body .view-cart-tabs .nav-tabs a[aria-expanded=true],
#order-standard_cart .view-cart-tabs .nav-tabs a[aria-expanded=true], 
#order-standard_cart .view-cart-tabs .nav-tabs a[aria-selected=true] {
    background-color: var(--bg-surface) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-bottom: 2px solid #ff6a00 !important; /* Your signature accent color */
    border-radius: 8px 8px 0 0 !important;
    color: #ffffff !important;
    transition: all 0.2s ease;
}

/* 2. Style for the Non-Active (Inactive) Tabs */
#order-standard_cart .view-cart-tabs .nav-tabs a {
    color: rgba(255, 255, 255, 0.4) !important;
    border: 1px solid transparent !important;
    transition: all 0.2s ease;
}

/* 3. Hover state for Inactive Tabs */
#order-standard_cart .view-cart-tabs .nav-tabs a:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.03) !important;
    border-radius: 8px 8px 0 0 !important;
}

/* Styling the tab content area */
body #order-standard_cart .secondary-cart-body .view-cart-tabs .tab-content,
#order-standard_cart .view-cart-tabs .tab-content {
    background-color: var(--bg-surface) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 0 8px 8px 8px !important; /* Matches the tab header corners */
    padding: 20px !important; /* Slightly more breathing room for the content */
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Unified styling for product info blocks */
body #order-standard_cart .product-info {
    background-color: var(--bg-surface) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 8px !important;
    padding: 16px !important;
    margin: 0 0 20px 0 !important;
    font-size: 0.85rem !important;
    color: rgba(255, 255, 255, 0.7) !important;
    transition: all 0.2s ease;
}

/* Optional: Add a subtle hover effect if these are clickable or just to keep consistency */
body #order-standard_cart .product-info:hover {
    border-color: rgba(255, 106, 0, 0.25) !important;
}
#registration .field, #registration .form-control {
     background: inherit !important; 
	 

}


/* ==========================================
   1. FORM FIELDS (Inputs & Select Dropdowns)
   ========================================== */
#containerNewUserSignup .form-control,
#containerNewUserSignup select,
#containerNewUserSignup .field {
  position: relative !important;
  width: 100% !important;
  height: 54px !important;            /* Restores the proper tall inputs */
  font-size: 14px !important;
  color: #ffffff !important;
  padding-left: 48px !important;       /* Hard push past the left icon */
  padding-right: 16px !important;
  background-color: rgba(10, 17, 32, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  outline: 0 !important;
  transition: all 0.2s ease-in-out !important;
}

/* Active focus border effect */
#containerNewUserSignup .form-control:focus,
#containerNewUserSignup select:focus,
#containerNewUserSignup .field:focus {
  border-color: #f97316 !important;
  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.15) !important;
  background-color: rgba(10, 17, 32, 0.7) !important;
}

/* Clear the phone field for the flag layout */
#containerNewUserSignup .intl-tel-input input[type="tel"] {
  padding-left: 90px !important;
}


/* ==========================================
   2. ICON ALIGNMENTS
   ========================================== */
#containerNewUserSignup .prepend-icon .field-icon {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  left: 16px !important;
  z-index: 4 !important;
  width: 20px !important;
  height: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(255, 255, 255, 0.3) !important;
  pointer-events: none !important;
  transition: color 0.3s ease !important;
}

/* Light up the specific icon on focus */
#containerNewUserSignup .prepend-icon:focus-within .field-icon {
  color: #f97316 !important;
}


/* ==========================================
   3. BROWSER AUTOFILL & STATE FIXES
   ========================================== */
#containerNewUserSignup input:-webkit-autofill,
#containerNewUserSignup input:-webkit-autofill:focus {
  transition: background-color 600000s, color 600000s !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 0 0px 1000px rgba(10, 17, 32, 0.95) inset !important;
}

/* Hide WHMCS dynamic duplicate state fields */
#containerNewUserSignup input[name="state"] + select[name="state"],
#containerNewUserSignup select[name="state"] + input[name="state"] {
  display: none !important;
}

/* ==========================================
   1. TOTAL OVERFLOW UNBLOCK & CONTAINER PRIORITY
   ========================================== */
/* Force every possible wrapper parent layer within the signup form to allow dropdown overflows */
#containerNewUserSignup,
#containerNewUserSignup form,
#containerNewUserSignup .card,
#containerNewUserSignup .card-body,
#containerNewUserSignup .row,
#containerNewUserSignup [class*="col-"],
#containerNewUserSignup .form-group {
  overflow: visible !important;
  clip-path: none !important;
}

/* Force the entire structural section enclosing the phone element to sit on top of the sections below it */
#containerNewUserSignup .card:has(.intl-tel-input),
#containerNewUserSignup .row:has(.intl-tel-input),
#containerNewUserSignup .form-group:has(.intl-tel-input) {
  position: relative !important;
  z-index: 1 !important; /* This layer value forces the entire Personal Info card out in front of the Billing card */
}


/* ==========================================
   2. PLUGIN DROPDOWN LAYER ELEVATION
   ========================================== */
/* The absolute base container wrapper for the phone input system */
.intl-tel-input.allow-dropdown {
  position: relative !important;
  display: block !important;
  z-index: 10000 !important;
}

/* The actual dropdown flyout panel list */
.intl-tel-input .country-list {
  position: absolute !important;
  z-index: 100001 !important; /* Forces layout to stack past all cards and backgrounds */
  background-color: #0d1527 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 12px !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7) !important;
  max-height: 250px !important; /* Prevents long vertical list leakage */
  overflow-y: auto !important;   /* Allows internal panel scrolling safely */
}


/* ==========================================
   3. DROPDOWN ROW CLEANUP
   ========================================== */
/* Style inner country selector lines */
.intl-tel-input .country-list .country {
  background-color: #0d1527 !important;
  color: #ffffff !important;
  padding: 10px 14px !important;
}

/* Hover highlights */
.intl-tel-input .country-list .country:hover,
.intl-tel-input .country-list .country.highlight {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #f97316 !important;
}

/* Neutralize secondary custom icons leaking into the dropdown rows */
.intl-tel-input .country-list .field-icon,
.intl-tel-input .country-list i {
  display: none !important;
}

/* ==========================================
   4. FINAL PHONE FIELD ICON & BULLET CLEANUP
   ========================================== */

/* Nuke any icon overlapping the selected country code flag container */
#containerNewUserSignup .form-group:has(.intl-tel-input) .field-icon,
#containerNewUserSignup .form-group:has(.intl-tel-input) i {
  display: none !important;
}

/* Eliminate raw HTML browser bullet points leaking onto list rows */
.intl-tel-input .country-list,
.intl-tel-input .country-list li {
  list-style: none !important;
  list-style-type: none !important;
  margin: 0 !important;
}

/* ==========================================
   5. ACCOUNT SECURITY FIELDS (Password Group)
   ========================================== */

/* Apply the dark tall input design to password fields */
#containerPassword .field,
#containerPassword .form-control {
  position: relative !important;
  width: 100% !important;
  height: 54px !important;
  font-size: 14px !important;
  color: #ffffff !important;
  padding-left: 48px !important; /* Pushes text cleanly past the lock icon */
  padding-right: 16px !important;
  background-color: rgba(10, 17, 32, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  outline: 0 !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease-in-out !important;
}

/* Active focus state border colors matching your other inputs */
#containerPassword .field:focus,
#containerPassword .form-control:focus {
  border-color: #f97316 !important;
  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.15) !important;
  background-color: rgba(10, 17, 32, 0.7) !important;
}

/* Align and light up the lock icons within the password containers */
#containerPassword .prepend-icon .field-icon {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  left: 16px !important;
  z-index: 4 !important;
  width: 20px !important;
  height: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(255, 255, 255, 0.3) !important;
  pointer-events: none !important;
  margin-bottom: 0 !important; /* Removes label base margins */
}

/* Turn the lock orange when typing in that specific box */
#containerPassword .prepend-icon:focus-within .field-icon {
  color: #f97316 !important;
}


/* ==========================================
   6. GENERATE PASSWORD BUTTON & METER CLEANUP
   ========================================== */

/* Clean custom styling for WHMCS's default "Generate Password" button */
#containerPassword .generate-password {
  background-color: #f97316 !important; /* Accent orange button styling */
  color: #ffffff !important;
  border: none !important;
  height: 42px !important; /* Slightly smaller button height format */
  border-radius: 8px !important;
  font-weight: 600 !important;
  padding: 0 20px !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
  width: 100% !important; /* Adapts cleanly across columns */
}

#containerPassword .generate-password:hover {
  background-color: #ea580c !important; /* Darker orange state shift */
}

/* Align the text label color scheme of the strength indicator */
#containerPassword #passwordStrengthTextLabel {
  color: rgba(255, 255, 255, 0.6) !important;
  margin-top: 8px !important;
}
.modal-content .modal-header {
  background-color: inherit !important;
}

/* ==========================================
   10. MODAL OPEN BACKGROUND SHIFT FIXES
   ========================================== */

/* Prevent the background canvas from shifting right when modal opens */
body.modal-open, 
.modal-open {
  overflow: auto !important; /* Forces the browser scrollbar to stay alive */
  padding-right: 0px !important; /* Overrides Bootstrap's custom script injection padding calculation */
}

/* Fix for standard template wrappers that inherit the layout shift */
body.modal-open .navbar-fixed-top,
body.modal-open .navbar-fixed-bottom,
body.modal-open .header,
body.modal-open header {
  padding-right: 0px !important;
}

/* Ensure the modal window wrapper sits perfectly on top without forcing system scroll loops */
#modalGeneratePassword.modal {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.alert:has(form) {
    background: var(--bg-surface) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: var(--text);
}

.md-editor>.md-preview{
    padding: 15px !important;
    border-top: 1px solid #212121 !important;
    border-bottom: 1px solid #212121 !important;
    background-color: #212529 !important;
}
/* ==========================================
   COOKIE NOTICE MARGIN OVERRIDE
   ========================================== */
#cookie-main-view h3 {
  margin-top: 0px !important;
}

#cookie-main-view .btn-primary {
    border-radius: 0px !important;
}
#cookie-settings-view p {
	margin-bottom: 0px !important;
}
#cookie-settings-view .btn-primary {
    border-radius: 0px !important;
}

#cookie-settings-view label {
    margin-bottom: 0px;
}

#mobile-sidebar a {
	color: var(--color-slate-400) !important;
}
/* ==========================================
   THE SIMPLEST NAV HOVER FIXED PATCH
   ========================================== */

/* 1. Reset mega menu formatting to its clean layout bounds */
.mega-menu {
    transform: none !important;
}

/* 2. Create an invisible hover catch-canvas directly inside the mega menu wrapper */
.mega-menu::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    width: 100% !important;
    
    /* Reaches upwards 80px to safely cover the secondary menu gap */
    top: -80px !important; 
    height: 80px !important;
    
    /* Keeps it active for interactions but invisible to users */
    background: transparent !important;
    display: block !important;
    pointer-events: auto !important;
}
/* ==========================================================================
   REFINED JSHOSTING GLASS TILES WITH COMPACT PRICING & ROWS
   ========================================================================== */

/* 1. Core Card Layout */
body #order-standard_cart .products .product {
    padding: 2.25rem 2rem !important;
    margin: 0 0 30px 0 !important;
    background: rgba(255, 255, 255, 0.02) !important;
    backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 2.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    text-align: left !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body #order-standard_cart .products .product:hover {
    transform: translateY(-6px) !important;
    border-color: rgba(249, 115, 22, 0.25) !important;
    box-shadow: 0 25px 50px -12px rgba(249, 115, 22, 0.12) !important;
}

/* 2. Plan Header Label Styling */
body #order-standard_cart .products .product header {
    border-bottom: none !important;
    padding: 0 !important;
    margin: 0 0 2rem 0 !important;
    background: transparent !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

body #order-standard_cart .products .product header span[id*="-name"] {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: #f97316 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
}

/* 3. Drop WHMCS Multi-Line Breaks & Enforced Centers */
body #order-standard_cart .products .product .product-desc center {
    text-align: left !important;
}

body #order-standard_cart .products .product .product-desc br {
    display: none !important;
}

/* 4. Feature Rows (Clean Split Layout Layout) */
body #order-standard_cart .products .product .product-desc ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 2.5rem 0 !important;
}

body #order-standard_cart .products .product .product-desc ul li {
    font-size: 13px !important;
    color: #cbd5e1 !important; /* text-slate-300 */
    padding: 0.65rem 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    display: flex !important;
    justify-content: space-between !important; /* Pushes specs clean right, details clean left */
    align-items: center !important;
}

/* Style the text elements before specific text values if generated via template spans */
body #order-standard_cart .products .product .product-desc ul li::before {
    content: "\f00c" !important; 
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    color: #f97316 !important;
    margin-right: 8px !important;
    font-size: 10px !important;
    display: inline-block !important;
}

/* 5. Tighter Compact Pricing Section */
body #order-standard_cart .products .product footer {
    margin-top: auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

body #order-standard_cart .products .product .product-pricing {
    margin: 0 0 1.5rem 0 !important;
    padding: 0 !important;
    color: #64748b !important;
    text-align: center !important;
    display: block !important;
    position: relative !important;
    line-height: 1 !important;
}

/* Main Price Numeric Core (Scaled Down) */
body #order-standard_cart .products .product .product-pricing .price {
    font-size: 2.25rem !important; /* Reduced dramatically from 3rem+ to match standard size */
    font-weight: 800 !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: baseline !important;
    letter-spacing: -0.025em !important;
	text-transform: uppercase;
	margin:15px;
}


/* Re-inject clean explicit layout suffix */
body #order-standard_cart .products .product .product-pricing::after {
    content: "/mo" !important;
    color: #64748b !important;
    font-size: 0.875rem !important;
    margin-left: 4px !important;
    text-transform: none !important;
}

/* Hide legacy WHMCS string scraps explicitly */
body #order-standard_cart .products .product .product-pricing text,
body #order-standard_cart .products .product .product-pricing font {
    display: none !important;
}

/* 6. Action Button */
body #order-standard_cart .products .product .btn-order-now {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 0.85rem !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    border-radius: 1rem !important;
    text-transform: uppercase !important;
    font-size: 10px !important;
    letter-spacing: 0.15em !important;
    transition: all 0.3s ease-in-out !important;
    font-weight: 700 !important;
}

body #order-standard_cart .products .product .btn-order-now:hover {
    background: #ffffff !important;
    color: #000000 !important;
}

body #order-standard_cart .cart-body .header-lined {
    margin-bottom: 16px;
    color: var(--color-orange-500);
    text-transform: uppercase;
	text-align:center;
}
body #order-standard_cart .cart-body .header-lined p {
    margin-bottom: 16px;
	margin-top:10px;
	font-weight:900;
	color: #fff;
}

body #order-standard_cart .cart-body .header-lined h1 {
	font-size:1.5rem !important;
}
/* ==========================================
   WHMCS Standard Cart - Domain Selection Area
   ========================================== */

/* 1. Main Outer Wrapper (White Card Box) */
body #order-standard_cart .cart-body {
    padding: 0 !important;
}

body #order-standard_cart .domain-selection-options {
    background: var(--bg-surface) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 8px;
    padding: 5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* 2. Radio Options Structure & Custom Checkmarks */
body #order-standard_cart .domain-selection-options .option {
    margin-bottom: 25px;
    position: relative;
    background: rgba(255, 255, 255, 0.03) !important;
    border-radius: 6px;
    padding: 12px 16px;
}

body #order-standard_cart .domain-selection-options .option label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
    margin: 0;
    user-select: none;
}

body #order-standard_cart .domain-selection-options .option label input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border: 2px solid #cbd5e0;
    border-radius: 50%;
    outline: none;
    background: #fff;
    display: grid;
    place-content: center;
    transition: all 0.2s ease-in-out;
    flex-shrink: 0;
}

body #order-standard_cart .domain-selection-options .option label input[type="radio"]:checked {
    border-color: #f15a24;
    background: #f15a24;
}

body #order-standard_cart .domain-selection-options .option label input[type="radio"]:checked::before {
    content: "✓";
    color: white;
    font-size: 12px;
    font-weight: bold;
}

/* 3. Outer Light Gray Input Panel Wrapper */
body #order-standard_cart .domain-input-group {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 25px;
    margin: 20px 0;
    border: 1px solid #eef2f5;
}

/* 4. FORCED HORIZONTAL FLEX ROW (Fixes the broken alignment) */
body #order-standard_cart .domain-input-group .row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important; /* Prevents elements from dropping to the next line */
    gap: 15px;
}

/* Strips Bootstrap's float widths out so they don't break the layout line */
body #order-standard_cart .domain-input-group .row > [class*="col-"] {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-grow: 1; /* Allows the input block to expand naturally */
}

/* Make sure the button container doesn't stretch too wide */
body #order-standard_cart .domain-input-group .row > [class*="col-"]:has(.btn) {
    flex-grow: 0; 
}

/* 5. Seamless Integrated Input & Dropdown Bar (Dark Mode / Orange Accent) */
body #order-standard_cart .domain-input-group .input-group {
    display: flex !important;
    align-items: center;
    background: #0d1424; /* Deep dark background matching the image */
    border: 1px solid #1e293b; /* Subtle dark border */
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
    height: 48px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Addon prefix styling (the "www." portion) */
body #order-standard_cart .domain-input-group .input-group-text {
    background: transparent !important;
	text-transform:uppercase;
    color: #ffffff; /* Muted text color for icons/prefixes */
    border: none;
    font-weight: 500;
    padding-left: 1rem;
    padding-right: 0.5rem;
}

/* The Domain Input Field */
body #order-standard_cart .domain-input-group .form-control {
    background: transparent !important;
    color: #ffffff !important;
    border: none !important;
    height: 100%;
    font-size: 0.95rem;
    padding-left: 0.25rem;
    box-shadow: none !important;
}

/* Placeholder text color */
body #order-standard_cart .domain-input-group .form-control::placeholder {
    color: #4b5563;
    opacity: 1;
}

/* The Extension Dropdown (TLD Selector) */
body #order-standard_cart .domain-input-group .form-select {
    background-color: transparent !important;
    color: #ffffff !important;
    border: none !important;
    border-left: 1px solid #1e293b !important; /* Subtle dividing line */
    height: 100%;
    border-radius: 0;
    font-weight: 500;
    padding-right: 2rem; /* Spacing for the dropdown arrow */
    box-shadow: none !important;
    /* Custom modern dark dropdown arrow if supported */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* Clean up option background colors for dark mode dropdown lists */
body #order-standard_cart .domain-input-group .form-select option {
    background-color: #0d1424;
    color: #ffffff;
}

/* Active / Focus State (The Orange Glow from the screenshot) */
body #order-standard_cart .domain-input-group .input-group:focus-within {
    border-color: #ff7a00 !important; /* Vivid neon orange border */
    box-shadow: 0 0 0 2px rgba(255, 122, 0, 0.25) !important; /* Soft orange glow */
}

/* Domain TLD Dropdown Menus (Supports both Register & Transfer modes) */
body #order-standard_cart #registertld,
body #order-standard_cart #transfertld {
    border: none !important;
    border-left: 1px solid #1e293b !important; /* Muted dark divider line */
    background: #0d1424 !important; /* Deep dark background matching the image */
    height: 100% !important;
    font-size: 15px;
    font-weight: 600;
    color: #ffffff !important; /* Crisp white text */
    cursor: pointer;
    min-width: 100px;
    border-radius: 0 !important;
    -webkit-appearance: none;
    appearance: none;
    
    /* Clean custom select arrow dropdown look - Tinted white (%23ffffff) */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 14px !important;
    box-shadow: none !important;
}

/* Fixes the dropdown options list background in various browsers */
body #order-standard_cart #registertld option,
body #order-standard_cart #transfertld option {
    background-color: #0d1424 !important;
    color: #ffffff !important;
}

/* 6. Action Button Alignment (Check / Transfer) */
body #order-standard_cart .domain-input-group .btn-primary {
    background: linear-gradient(135deg, #ff6b35, #f15a24) !important;
    border: none !important;
    color: #ffffff !important;
    height: 48px;
	margin:5px !important;
    border-radius: 24px !important;
    padding: 0 35px !important;
    font-weight: 600;
    font-size: 16px;
    white-space: nowrap; /* Prevents text from breaking inside button */
    box-shadow: 0 4px 10px rgba(241, 90, 36, 0.2);
    transition: transform 0.15s ease, opacity 0.15s ease;
}

body #order-standard_cart .domain-input-group .btn-primary:hover {
    transform: translateY(-1px);
    opacity: 0.95;
}
/* 1. Target the wrapping row for the "Own Domain" tab to align cleanly */
body #order-standard_cart #domainregister .row {
    display: flex !important;
    align-items: center !important;
    gap: 15px;
}

/* 2. Style both the SLD (domain name) and TLD (.com) input boxes to match the dark theme */


/* 3. Specifically isolate the floating TLD box (.com input) */
body #order-standard_cart #owndomaintld {
    max-width: 95px !important; /* Prevents it from stretching awkwardly */
    text-align: center !important;
	background: #0d1424 !important; /* Deep dark background matching the image */
}

/* 4. Fix placeholders for both inputs */
body #order-standard_cart #owndomainsld::placeholder,
body #order-standard_cart #owndomaintld::placeholder {
    color: #4b5563 !important;
    opacity: 1 !important;
}

/* 1. Target the unified parent container wrapper for the main input group */
body #order-standard_cart #domainregister .input-group {
    border: 1px solid #1e293b; /* Match your default dark theme border */
    border-radius: 8px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* 2. Remove borders from individual inner elements so they don't fight the wrapper */
body #order-standard_cart #domainregister .input-group .input-group-addon,
body #order-standard_cart #owndomainsld {
    border: none !important;
    box-shadow: none !important;
}

/* 3. Apply the clean orange glow to the ENTIRE box when hovering or focusing */
body #order-standard_cart #domainregister .input-group:hover,
body #order-standard_cart #domainregister .input-group:focus-within {
    border-color: #ff7a00 !important;
    box-shadow: 0 0 0 2px rgba(255, 122, 0, 0.15) !important;
}

/* 4. Keep the separate standalone TLD box (.com) behaving identically */
body #order-standard_cart #owndomaintld:hover,
body #order-standard_cart #owndomaintld:focus {
    border: 1px solid #ff7a00 !important;
    box-shadow: 0 0 0 2px rgba(255, 122, 0, 0.15) !important;
    outline: 0 !important;
}


/* 6. Transform the WHMCS submit button into the pill-shaped orange "Use" button */
body #order-standard_cart #domainregister button[type="submit"],
body #order-standard_cart #domainregister .btn-primary {
    background-color: #ff7a00 !important;
    border: none !important;
    color: #ffffff !important;
    border-radius: 50px !important; /* Perfect round pill design */
    height: 44px !important;
    padding: 0 30px !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 4px 12px rgba(255, 122, 0, 0.2) !important;
    transition: transform 0.2s ease, background-color 0.2s ease !important;
}

/* 2. Smaller Sizing for Mobile Screens */
@media (max-width: 767px) {
    body #order-standard_cart #domainregister button[type="submit"],
    body #order-standard_cart #domainregister .btn-primary,
    body #order-standard_cart #useOwnDomain button[type="submit"],
    body #order-standard_cart #useOwnDomain .btn-primary,
    body #order-standard_cart .domain-transfer-container button[type="submit"],
    body #order-standard_cart button.btn-primary.btn-block {
        height: 36px !important;
        padding: 0 16px !important;
        font-size: 0.85rem !important;
        box-shadow: 0 2px 8px rgba(255, 122, 0, 0.2) !important;
    }
}
/* Mobile adjustments for the domain input group row */
@media (max-width: 767px) {
    body #order-standard_cart .domain-input-group .row {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-wrap: wrap !important; /* Change to nowrap if you want them side-by-side */
        gap: 15px !important;
    }
}

/* Button Hover State */
body #order-standard_cart #domainregister button[type="submit"]:hover,
body #order-standard_cart #domainregister .btn-primary:hover {
    background-color: #e56d00 !important;
    transform: translateY(-1px) !important;
}

/* 1. Target the main wrapper container and turn IT into the grid */
body #order-standard_cart .products {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px !important;
    width: 100% !important;
}

/* 2. Neutralize the Bootstrap row wrappers so they do not block the grid flow */
body #order-standard_cart .products .row-eq-height {
    display: contents !important; /* Forces the browser to ignore the row wrappers and use .products as the direct grid parent */
}

/* 3. Strip the block/column styling from the Bootstrap column divs */
body #order-standard_cart .products .col-md-6 {
    display: contents !important; /* Ignores the col-md-6 wrappers so the cards flow directly into the grid */
}

/* 4. Apply the styling directly to the individual product cards */
body #order-standard_cart .products .product {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    background: #0d1424 !important; /* Sleek dark card background */
    border: 1px solid #1e293b !important;
    border-radius: 12px !important;
    padding: 24px !important;
    height: 100% !important; /* Forces all three cards to be the exact same height */
    color: #ffffff !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

/* 5. Fluid Responsive Breakpoints (Tablet & Mobile fallbacks) */
@media (max-width: 991px) {
    body #order-standard_cart .products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* 2 columns on tablets */
    }
}

@media (max-width: 767px) {
    body #order-standard_cart .products {
        grid-template-columns: 1fr !important; /* 1 column on mobile screens */
    }
}

/* Custom Orange Order Buttons matching Registration Theme */
body #order-standard_cart .products .product footer .btn-order-now {
    background-color: #ff7a00 !important;
    border: none !important;
    color: #ffffff !important;
    border-radius: 50px !important; /* Perfect round pill shape */
    padding: 12px 24px !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 4px 12px rgba(255, 122, 0, 0.25) !important;
    display: block !important; /* Changes to block format to honor auto margins */
    width: 100% !important;
    max-width: 220px !important; /* Bounds the width cleanly */
    margin: 0 auto !important; /* Dynamically forces horizontal centering */
    text-align: center !important;
    transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* Hover & Interactive States */
body #order-standard_cart .products .product footer .btn-order-now:hover {
    background-color: #e56d00 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(255, 122, 0, 0.4) !important;
    color: #ffffff !important;
}

body #order-standard_cart .products .product footer .btn-order-now:active {
    transform: translateY(0) !important;
}

body #order-standard_cart .sub-heading span {
    color: #fff;
    background: linear-gradient(90deg, var(--brand-red), var(--brand-orange));
}

/* 7. Hard Overwrite for the Symantec / MarketConnect White Box Background */
.addon-promo-container.addon-promo-container-symantec,
.addon-promo-container.bg-white,
#order-standard_cart .addon-promo-container,
div.addon-promo-container-symantec {
    background-color: #0d1424 !important; /* Force deep dark theme background */
    background: #0d1424 !important;
    border: 1px solid #1e293b !important;
    border-radius: 12px !important;
    padding: 24px !important;
    color: #ffffff !important;
}

/* Fix main heading text color if it's hiding */
#order-standard_cart .addon-promo-container h3,
.addon-promo-container-symantec h3 {
    color: #ff6a00 !important;
    font-weight: 700 !important;
}

/* Fix the description body text color */
#order-standard_cart .addon-promo-container .description,
#order-standard_cart .addon-promo-container p {
    color: #94a3b8 !important; /* Light slate grey text */
}

/* Style the link to match your orange accent */
#order-standard_cart .addon-promo-container a {
    color: #ff7a00 !important;
    text-decoration: none !important;
}
#order-standard_cart .addon-promo-container a:hover {
    text-decoration: underline !important;
}

/* Fix option bars from washing out against the new background */
#order-standard_cart .addon-promo-container .radio-inline {
    background: rgba(30, 41, 59, 0.4) !important; /* Muted slate background row */
    border: 1px solid #1e293b !important;
    color: #ffffff !important; /* Crisp white item names */
    display: block !important;
    margin-bottom: 10px !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
}

#order-standard_cart .addon-promo-container .radio-inline:hover {
    border-color: #ff7a00 !important;
    background: rgba(30, 41, 59, 0.6) !important;
}

/* Make sure the pricing amounts on the right pull clear white contrast */
#order-standard_cart .addon-promo-container .radio-inline .float-right,
#order-standard_cart .addon-promo-container .radio-inline .pull-right {
    color: #ffffff !important;
    font-weight: bold !important;
}

.invoice-container {
    background-color: rgba(255, 255, 255, 0.05); /* ~0.05 is equivalent to your 0d hex alpha */
}

.invoice-container td.total-row {
    background-color: rgba(255, 255, 255, 0.13); /* ~0.13 is equivalent to your 21 hex alpha */
}

/* Row hover fix to keep text readable while applying your orange border highlights */
table.table tbody tr:hover td {
    color: inherit !important;
    border-top-color: rgba(255, 106, 0, 0.2) !important;
    border-bottom-color: rgba(255, 106, 0, 0.2) !important;
}

/* Row hover fix to keep text readable while applying your orange border highlights */
table.table tbody tr td {
    color: #fff !important;
}

/* Main wrapper - remove overflow: hidden so the dropdown can escape freely */
.intl-tel-input.separate-dial-code {
    display: block;
    width: 100%;
    position: relative;
    border-radius: 9999px;
    background: transparent !important;
}

.intl-tel-input, 
.intl-tel-input * {
    box-sizing: border-box;
}

/* Flag container handles the left-side rounding and clips just the background */
.intl-tel-input.separate-dial-code .flag-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    padding: 0;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    border-top-left-radius: 9999px;
    border-bottom-left-radius: 9999px;

}

/* Style the selected flag section */
.intl-tel-input.separate-dial-code .selected-flag {
    /*background-color: rgba(255, 255, 255, 0.05);*/
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0 14px;
    display: flex;
    align-items: center;
    height: 100%;
    border-top-left-radius: 9999px;
    border-bottom-left-radius: 9999px;
}

/* Phone input text box */
.intl-tel-input.separate-dial-code input[type="tel"],
.intl-tel-input.separate-dial-code input[type="text"] {
    padding-left: 95px !important;
    width: 100% !important;
    background: transparent !important;
}

/* Flag & Code spacing */
.intl-tel-input .selected-flag .iti-flag {
    margin-right: 6px;
}

.intl-tel-input.separate-dial-code .selected-dial-code {
    margin-left: 4px;
    color: inherit;
}

/* Dropdown list styling - now allowed to break outside the input completely */
.intl-tel-input .country-list {

    position: absolute;
    background-color: #0f172a;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    margin-top: 5px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.intl-tel-input .country-list .country {
    padding: 8px 10px;
}

.intl-tel-input .country-list .country:hover,
.intl-tel-input .country-list .country.highlight {
    background-color: rgba(255, 255, 255, 0.1);
}

.intl-tel-input .country-list .country-name,
.intl-tel-input .country-list .dial-code {
    color: inherit;
}

.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary {
	color: #ffffff;
    background-color: #dc3545;
    border-color: #ccc;
}

.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary:hover {
	color: #ffffff;
    background-color: #cc2434;
    border-color: #ccc;
}
div.product-details div.product-icon {
    margin: 0;
    background-color: rgb(23 30 49) !important;
    border-radius: var(--rounding-md);
    padding: 30px;
    line-height: 1em;
    font-size: 60px;
}
.fa-inverse {
    color: #ff6a00;
}
.list-group-item {
	background:var(--bg-surface);;
}

/* Optional: Shrink down a bit more on mobile screens so they don't wrap awkwardly */
@media (max-width: 768px) {
    .product-selection-sidebar {
        top: 15px !important;
       
    }
}
/* Target the Font Awesome spinner inside the continue button */
#btnCompleteProductConfig .fa-spinner {
    color: #ffffff !important; /* Matches your orange accent color */
}