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

    ** Custom Stylesheet for readycheap CLOUD **
    
    This stylesheet overrides the default WHMCS Six theme
    to match your website styles from assets/css/style.css.

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

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* --- 1. Reset and Fonts --- */
/* Bulletproof global font-family unification for the entire Readycheap template */
body, 
p, 
span:not(.fas):not(.far):not(.fab):not(.fa):not([class*="fa-"]):not(.glyphicon),
div:not([class*="fa-"]):not([class*="glyphicon"]),
h1, h2, h3, h4, h5, h6,
a, 
button, 
input, 
select, 
textarea,
label,
table,
td,
th,
li,
ul,
ol,
dt,
dd,
blockquote,
small,
strong,
b,
i:not(.fas):not(.far):not(.fab):not(.fa):not([class*="fa-"]):not(.glyphicon):not(.ri):not([class*="ri-"]):not(.ti):not([class*="ti-"]) {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

i.ri, i[class*="ri-"] {
    font-family: 'remixicon' !important;
    font-style: normal !important;
    display: inline-block !important;
}

body {
    background-color: #f3f6fb !important;
    color: #475569 !important;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    color: #15095e !important;
    font-weight: 600;
}

/* --- 2. Top Contact & Support Bar (.xs-top-bar) --- */
#header {
    padding: 0 !important;
    min-height: auto !important;
    background-color: #0b062b !important;
}

.xs-top-bar {
    background-color: #0b062b !important;
    padding: 12px 0 !important;
    line-height: normal !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.xs-top-bar-info {
    margin: 0;
    padding: 0;
    list-style: none;
}

.xs-top-bar-info li {
    display: inline-block;
    font-size: 13.5px;
    margin-right: 40px;
    color: #ffffff !important;
}

.xs-top-bar-info li:last-child {
    margin-right: 0px;
}

.xs-top-bar-info li p, 
.xs-top-bar-info li a {
    color: #ffffff !important;
    display: inline-block;
    margin: 0;
    text-decoration: none !important;
}

.xs-top-bar-info li i {
    padding-right: 8px;
    color: #705ceb !important; /* Brand Violet */
}

/* Top menu right links */
.top-menu {
    text-align: right;
    margin: 0;
    padding: 0;
    list-style: none;
}

.top-menu li {
    display: inline-block;
    margin-right: 25px;
}

.top-menu li:last-child {
    margin-right: 0px;
}

.top-menu li a {
    color: #ffffff !important;
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.top-menu li a:hover {
    color: #705ceb !important;
}

.top-menu li a i {
    font-size: 12px;
    position: relative;
    top: 1px;
    padding-right: 5px;
    color: #705ceb !important;
}

/* Language Dropdown */
.top-menu li.language-dropdown a {
    cursor: pointer;
}

/* Shopping Cart styling */
.top-menu li.primary-action a {
    background-color: #705ceb !important;
    color: #ffffff !important;
    padding: 6px 14px !important;
    border-radius: 4px;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(112, 92, 235, 0.2);
    transition: all 0.2s ease;
}

.top-menu li.primary-action a:hover {
    background-color: #5d69d9 !important;
    box-shadow: 0 6px 14px rgba(112, 92, 235, 0.35);
}

/* --- 3. Main Navigation Header (.xs-header) --- */
.xs-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    /* Use the exact linear gradient color palette from your website style.css */
    background: linear-gradient(-45deg, #5d69d9 0%, #705ceb 60%, #15095e 99%) !important;
}

.navbar-main {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    padding: 10px 0 !important;
}

.navbar-main .navbar-brand.xs-logo {
    padding: 12px 15px !important;
    height: auto !important;
    display: inline-flex;
    align-items: center;
}

.navbar-main .navbar-brand.xs-logo img {
    max-height: 48px !important;
    object-fit: contain;
}

/* Nav Menu links */
.navbar-main ul.navbar-nav.navbar-menu > li > a {
    color: #ffffff !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    padding: 24px 16px !important;
    background-color: transparent !important;
    transition: color 0.2s ease !important;
}

.navbar-main ul.navbar-nav.navbar-menu > li > a:hover,
.navbar-main ul.navbar-nav.navbar-menu > li.open > a,
.navbar-main ul.navbar-nav.navbar-menu > li.active > a {
    color: #ffffff !important;
    opacity: 0.8;
}

.navbar-main .navbar-toggle {
    border: none !important;
    margin-top: 15px !important;
    background-color: transparent !important;
}

.navbar-main .navbar-toggle .icon-bar {
    background-color: #ffffff !important;
    width: 24px !important;
    height: 3px !important;
}

/* Dropdown styling */
.navbar-main .dropdown-menu {
    background-color: #15095e !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25) !important;
    padding: 8px 0 !important;
    border-radius: 8px !important;
}

.navbar-main .dropdown-menu > li > a {
    color: rgba(255, 255, 255, 0.8) !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease;
}

.navbar-main .dropdown-menu > li > a:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
    padding-left: 24px !important;
}

/* --- 4. Home Page Banner --- */
#home-banner {
    background: linear-gradient(-45deg, #5d69d9 0%, #705ceb 60%, #15095e 99%) !important;
    padding: 80px 0 !important;
    color: #ffffff !important;
}

#home-banner h2 {
    color: #ffffff !important;
    font-size: 38px !important;
    font-weight: 800 !important;
    margin-bottom: 25px !important;
}

#home-banner .form-control {
    border-radius: 8px 0 0 8px !important;
    border: none !important;
    height: 56px !important;
    font-size: 16px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
}

#home-banner .btn {
    height: 56px !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    padding: 10px 30px !important;
    border: none !important;
}

#home-banner .btn.search {
    background-color: #705ceb !important;
    color: #ffffff !important;
    border-radius: 0 8px 8px 0 !important;
}

#home-banner .btn.search:hover {
    background-color: #5d69d9 !important;
}

#home-banner .btn.transfer {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 8px !important;
    margin-left: 10px !important;
}

/* --- 5. Main Body Layout & Sidebars --- */
#main-body {
    padding: 30px 0 !important;
}

/* --- 6. Standalone Custom Login Page Layout --- */
.login-page-bg {
    min-height: 100vh;
    background-color: #f3f6fb !important;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 15px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.login-card-container {
    width: 100%;
    max-width: 460px;
    position: relative;
    z-index: 10;
    margin-top: 40px !important;
    margin-bottom: 40px !important;
}

/* Full screen body background stretch on guest auth pages */
body.login-page-body {
    background-color: #f3f6fb !important;
}

body.login-page-body #main-body,
body.login-page-body .main-content,
body.login-page-body .main-content > .container,
body.login-page-body #main-body > .container {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
}

/* Bulletproof Fail-safe: Restore dashboard card panels and hide canvas if inside portal wrapper */
.portal-wrapper #auth-canvas,
.portal-sidebar #auth-canvas,
body:has(.portal-wrapper) #auth-canvas,
body:has(.portal-sidebar) #auth-canvas {
    display: none !important;
}

/* Top bar navigation links */
.login-top-bar {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
    padding: 0 5px;
}

.login-top-bar a {
    color: #64748b !important;
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.login-top-bar a:hover {
    color: #705ceb !important;
}

.login-top-bar a i {
    margin-right: 5px;
}

/* Logo block inside the card - Styled with Dark Gradient Header for contrast */
.login-card .login-logo {
    background: linear-gradient(-45deg, #5d69d9 0%, #705ceb 60%, #15095e 99%) !important;
    margin: -40px -40px 30px -40px;
    padding: 30px 0;
    border-radius: 7px 7px 0 0 !important;
    text-align: center;
    border-bottom: none;
    box-shadow: inset 0 -5px 15px rgba(0, 0, 0, 0.05);
}

.login-card .login-logo img {
    max-height: 52px;
    object-fit: contain;
    /* Soft white outer glow to make the dark elements of the logo highly visible on the gradient */
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.75)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

/* Main Card */
.login-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px !important;
    box-shadow: 0 10px 25px -5px rgba(21, 9, 94, 0.04), 0 8px 10px -6px rgba(21, 9, 94, 0.04);
    padding: 40px;
    width: 100%;
}

/* Lock circle header */
.card-icon-header {
    text-align: center;
    margin-bottom: 35px;
}

.card-icon-header .icon-circle {
    width: 64px !important;
    height: 64px !important;
    background: linear-gradient(135deg, rgba(112, 92, 235, 0.15) 0%, rgba(112, 92, 235, 0.05) 100%) !important;
    border: 1px solid rgba(112, 92, 235, 0.25) !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    color: #705ceb !important;
    margin-bottom: 18px !important;
    box-shadow: 0 4px 12px rgba(112, 92, 235, 0.08) !important;
}

.card-icon-header .icon-circle i,
.card-icon-header .icon-circle span {
    font-size: 26px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.card-icon-header h2 {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #15095e !important;
    margin: 0 0 6px 0 !important;
}

.card-icon-header p {
    color: #64748b;
    font-size: 14.5px;
    margin: 0;
}

/* Input Fields styling */
.custom-input-group {
    margin-bottom: 24px !important;
}

.custom-input-group label {
    font-weight: 600 !important;
    font-size: 13.5px !important;
    color: #334155 !important;
    margin-bottom: 8px !important;
    display: block;
}

.input-icon-wrapper {
    position: relative;
}

.input-icon-left {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 16px;
    z-index: 10;
}

.input-icon-right {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 16px;
    z-index: 10;
    transition: color 0.2s ease;
}

.input-icon-right:hover {
    color: #705ceb;
}

/* Input text override */
.input-custom {
    height: 50px !important;
    background-color: #f1f5f9 !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 8px !important;
    padding-left: 46px !important;
    padding-right: 46px !important;
    font-size: 14.5px !important;
    color: #1e293b !important;
    box-shadow: none !important;
    transition: all 0.2s ease-in-out !important;
}

.input-custom:focus {
    background-color: #ffffff !important;
    border-color: #705ceb !important;
    box-shadow: 0 0 0 3px rgba(112, 92, 235, 0.12) !important;
}

/* Options row (Remember me & Forgot Password) */
.form-options-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    font-size: 13.5px;
}

.custom-checkbox {
    margin: 0 !important;
    padding: 0 !important;
}

.custom-checkbox label {
    font-weight: 500 !important;
    color: #64748b !important;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.custom-checkbox input[type="checkbox"] {
    margin: 0 8px 0 0 !important;
    position: static !important;
    cursor: pointer;
}

.forgot-pwd-link a {
    color: #705ceb !important;
    font-weight: 600;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.forgot-pwd-link a:hover {
    color: #5d69d9 !important;
}

/* Centering Captcha */
.captcha-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 25px;
}

/* Sign In Button */
.btn-signin,
.login-page-bg .btn-primary {
    background: linear-gradient(90deg, #705ceb, #5d69d9, #705ceb) !important;
    background-size: 200% auto !important;
    border: none !important;
    color: #ffffff !important;
    height: 50px !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 14px rgba(112, 92, 235, 0.25) !important;
    transition: all 0.4s ease !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    position: relative !important;
    overflow: hidden !important;
}

.btn-signin i,
.login-page-bg .btn-primary i {
    margin-left: 8px;
    font-size: 14px;
    transition: transform 0.2s ease;
}

.btn-signin:hover,
.login-page-bg .btn-primary:hover {
    background-position: right center !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(112, 92, 235, 0.4) !important;
}

/* Metallic shimmer reflection sweep on hover */
.btn-signin::after,
.login-page-bg .btn-primary::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -50% !important;
    width: 200% !important;
    height: 100% !important;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0) 100%
    ) !important;
    transform: skewX(-25deg) !important;
    transition: 0.75s !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.btn-signin:hover::after,
.login-page-bg .btn-primary:hover::after {
    left: 125% !important;
    opacity: 1 !important;
    transition: 0.75s ease-in-out !important;
}

.btn-signin:hover i {
    transform: translateX(3px);
}

/* Card Divider */
.card-divider {
    text-align: center;
    margin: 30px 0 20px 0;
    position: relative;
}

.card-divider::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
    background-color: #e2e8f0;
    z-index: 1;
}

.card-divider span {
    background-color: #ffffff;
    padding: 0 15px;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 500;
    position: relative;
    z-index: 2;
}

/* Create Account outline button */
.btn-create-account {
    background-color: transparent !important;
    border: 1px solid #705ceb !important;
    color: #705ceb !important;
    height: 50px !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.btn-create-account:hover {
    background-color: rgba(112, 92, 235, 0.05) !important;
    border-color: #5d69d9 !important;
    color: #5d69d9 !important;
}

/* Secure connection message */
.secure-connection {
    text-align: center;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 500;
    margin-top: 25px;
}

.secure-connection i {
    color: #10b981;
    margin-right: 4px;
}

/* Standalone footer */
.login-footer-links {
    margin-top: 30px;
    font-size: 13px;
    color: #94a3b8;
}

.login-footer-links p {
    margin-bottom: 8px;
}

.footer-sub-links a {
    color: #94a3b8;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.footer-sub-links a:hover {
    color: #705ceb;
}

.dot-separator {
    padding: 0 8px;
    color: #cbd5e1;
}

/* =====================================================
   --- 7. Modern Client Portal Dashboard Wrapper Layout ---
   ===================================================== */

.portal-wrapper {
    display: flex;
    height: 100vh;          /* Full viewport height */
    overflow: hidden;       /* Prevent wrapper from scrolling — each panel scrolls independently */
    font-family: 'Inter', sans-serif;
    background-color: #f3f6fb;
}

/* --- Sidebar (Light layout to match website) --- */
.portal-sidebar {
    width: 260px;
    background-color: #ffffff;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #e2e8f0;
    z-index: 1000;
    position: sticky;       /* Stick to top of viewport */
    top: 0;
    height: 100vh;          /* Full viewport height */
    overflow-y: auto;       /* Sidebar scrolls its own content independently */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Branded Gradient Logo Container for perfect contrast */
.sidebar-logo {
    background: linear-gradient(-45deg, #5d69d9 0%, #705ceb 60%, #15095e 99%) !important;
    height: 70px;
    padding: 0 16px;
    border-bottom: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sidebar-logo img {
    max-height: 45px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.75)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

.sidebar-nav {
    flex-grow: 1;
    padding: 15px 0;
    overflow-y: auto;
}

.sidebar-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu-header {
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.8px;
    padding: 22px 25px 8px 25px;
}

.sidebar-nav-link {
    display: flex;
    align-items: center;
    padding: 12px 25px;
    color: #475569 !important;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none !important;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.sidebar-nav-link i {
    margin-right: 12px;
    font-size: 16px;
    width: 20px;
    text-align: center;
    color: #94a3b8;
    transition: color 0.2s ease;
}

.sidebar-nav-link:hover {
    background-color: #f8fafc;
    color: #705ceb !important;
}

.sidebar-nav-link:hover i {
    color: #705ceb;
}

/* Active Nav Link */
.sidebar-menu li.active .sidebar-nav-link {
    background-color: rgba(112, 92, 235, 0.08) !important;
    color: #705ceb !important;
    border-left-color: #705ceb;
    font-weight: 600;
}

.sidebar-menu li.active .sidebar-nav-link i {
    color: #705ceb;
}

/* --- Main content area — scrolls independently from sidebar --- */
.portal-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background-color: #f3f6fb;
    height: 100vh;          /* Fill viewport */
    overflow-y: auto;       /* Right side scrolls independently */
    overflow-x: hidden;
}

/* --- Header --- */
.portal-header {
    height: 70px;
    background-color: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    flex-shrink: 0;
}

.header-left {
    display: flex;
    align-items: center;
}

.sidebar-toggle-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 8px !important;
    background-color: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #475569 !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 15px !important;
    padding: 0 !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
    display: none !important; /* Hidden on desktop */
}

.sidebar-toggle-btn:hover {
    background-color: rgba(112, 92, 235, 0.08) !important;
    color: #705ceb !important;
}

@media (max-width: 991px) {
    .sidebar-toggle-btn {
        display: inline-flex !important; /* Visible on mobile */
    }
}

/* Header search bar */
.header-search-form {
    width: 320px;
}

.portal-header .search-input-wrapper {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    background-color: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important; /* Unified 8px standard */
    height: 38px !important;
    padding: 0 12px !important;
    transition: all 0.2s ease !important;
}

.portal-header .search-input-wrapper:focus-within {
    background-color: #ffffff !important;
    border-color: #705ceb !important;
    box-shadow: 0 0 0 3px rgba(112, 92, 235, 0.15) !important;
}

.portal-header .search-input-wrapper .search-icon {
    color: #94a3b8 !important;
    font-size: 14px !important;
    margin-right: 10px !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: static !important; /* Disable any absolute overrides */
    transform: none !important;
    line-height: 1 !important;
}

.portal-header .search-input-wrapper .header-search-input {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    height: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    font-size: 13px !important;
    color: #1e293b !important;
    display: block !important;
}

.header-right {
    display: flex;
    align-items: center;
}

/* Util buttons (Notifications) */
.header-util-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 8px !important; /* Unified 8px standard */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #f1f5f9 !important;
    color: #64748b !important;
    border: 1px solid #e2e8f0 !important;
    margin-right: 15px !important;
    position: relative !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.header-util-btn:hover {
    background-color: rgba(112, 92, 235, 0.08) !important;
    border-color: rgba(112, 92, 235, 0.2) !important;
    color: #705ceb !important;
}

.header-util-btn.notification-btn {
    padding: 0 !important;
}

.header-util-btn.notification-btn > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    color: inherit !important;
    text-decoration: none !important;
}

.bell-badge,
.cart-badge {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 4px !important;
    background-color: #ef4444 !important; /* Premium red accent */
    color: #ffffff !important;
    border-radius: 10px !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 2px 5px rgba(239, 68, 68, 0.25) !important;
    line-height: 1 !important;
    z-index: 10 !important;
}

/* Client Alerts dropdown */
.client-alerts-dropdown {
    width: 320px !important;
    padding: 8px 0 !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 25px rgba(21, 9, 94, 0.08) !important;
    border: 1px solid #e2e8f0 !important;
}

.client-alerts-dropdown li a {
    padding: 10px 18px !important;
    display: flex !important;
    align-items: flex-start !important;
    white-space: normal !important;
}

.client-alerts-dropdown li a i {
    margin-top: 3px;
    margin-right: 10px;
    color: #705ceb;
}

/* Profile trigger details */
.profile-dropdown {
    position: relative;
}

.profile-trigger {
    display: flex !important;
    align-items: center !important;
    height: 38px !important;
    padding: 0 12px 0 6px !important;
    border-radius: 8px !important; /* Unified 8px standard */
    background-color: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.profile-trigger:hover {
    background-color: rgba(112, 92, 235, 0.08) !important;
    border-color: rgba(112, 92, 235, 0.2) !important;
}

.profile-avatar {
    width: 26px !important;
    height: 26px !important;
    border-radius: 6px !important; /* 6px radius nested inside 8px border-radius */
    background-color: #705ceb !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-right: 8px !important;
    flex-shrink: 0 !important;
}

.profile-info-text {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    text-align: left !important;
    margin-right: 6px !important;
}

.user-greeting {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    line-height: 1.2 !important;
}

.user-company {
    font-size: 9.5px !important;
    color: #64748b !important;
    line-height: 1.1 !important;
}

.profile-dropdown .caret {
    color: #64748b !important;
    margin-left: 2px !important;
}

/* Premium Profile Dropdown Menu Styling */
.profile-dropdown .dropdown-menu {
    border-radius: 8px !important;
    box-shadow: 0 10px 25px rgba(21, 9, 94, 0.08) !important;
    border: 1px solid #e2e8f0 !important;
    padding: 8px 0 !important;
    min-width: 210px !important;
    margin-top: 5px !important;
}

.profile-dropdown .dropdown-menu li a {
    padding: 10px 20px !important;
    color: #475569 !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    transition: all 0.2s ease !important;
}

.profile-dropdown .dropdown-menu li a:hover {
    background-color: #f8fafc !important;
    color: #705ceb !important;
}

.profile-dropdown .dropdown-menu li a i.ti,
.profile-dropdown .dropdown-menu li a i {
    margin-right: 10px !important;
    font-size: 16px !important;
    color: #94a3b8 !important;
    width: 18px !important;
    text-align: center !important;
    transition: color 0.2s ease !important;
}

.profile-dropdown .dropdown-menu li a:hover i.ti,
.profile-dropdown .dropdown-menu li a:hover i {
    color: #705ceb !important;
}

.profile-dropdown .dropdown-menu .divider {
    margin: 6px 0 !important;
    background-color: #f1f5f9 !important;
}

/* --- Portal body --- */
.portal-body {
    padding: 30px 20px;
    flex-grow: 1;
}

/* --- Welcome Hero Card --- */
.portal-welcome-banner {
    background: linear-gradient(135deg, #f0ecfc 0%, #f6f8fb 100%);
    border: 1px solid #e2e8f0;
    border-radius: 8px !important;
    padding: 35px 40px;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
}

.banner-tag {
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 700;
    color: #705ceb;
    letter-spacing: 0.6px;
    display: inline-block;
    margin-bottom: 5px;
}

.portal-welcome-banner h1 {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #15095e !important;
    margin: 0 0 8px 0 !important;
}

.portal-welcome-banner p {
    color: #64748b;
    font-size: 14.5px;
    margin-bottom: 22px;
}

.banner-buttons {
    display: flex;
    gap: 12px;
}

.btn-banner-services {
    background-color: #705ceb !important;
    border-color: #705ceb !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    padding: 10px 22px !important;
    font-size: 14px !important;
    box-shadow: 0 4px 12px rgba(112, 92, 235, 0.25) !important;
    transition: all 0.2s ease !important;
}

.btn-banner-services:hover {
    background-color: #5d69d9 !important;
    box-shadow: 0 6px 16px rgba(112, 92, 235, 0.35) !important;
    transform: translateY(-1px);
}

.btn-outline-banner {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    padding: 10px 22px !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
}

.btn-outline-banner:hover {
    border-color: #94a3b8 !important;
    background-color: #f8fafc !important;
    color: #1e293b !important;
    transform: translateY(-1px);
}

/* Banner Vector Graphic Mock */
.banner-visual-card {
    position: relative;
    height: 120px;
    width: 100%;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
}

.dashboard-banner-graphic {
    max-height: 130px !important;
    width: auto !important;
    object-fit: contain !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(112, 92, 235, 0.12) !important;
    animation: floatShield 5s ease-in-out infinite !important;
}

@keyframes floatShield {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
    100% { transform: translateY(0px); }
}

/* --- Stat Tiles overrides (Flexbox Row Layout) --- */
.tiles {
    margin-bottom: 15px !important;
}

.tiles .row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 -10px !important;
}

.tiles .tile {
    flex: 1 1 0px !important;
    padding: 0 10px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 25px !important;
}

@media (max-width: 767px) {
    .tiles .row {
        flex-direction: column !important;
    }
    .tiles .tile {
        flex: none !important;
        width: 100% !important;
        margin-bottom: 15px !important;
    }
}

.tiles .tile a {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 20px !important;
    box-shadow: 0 4px 6px rgba(21, 9, 94, 0.01) !important;
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    transition: all 0.2s ease-in-out !important;
}

.tiles .tile a:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(21, 9, 94, 0.03) !important;
    border-color: #cbd5e1 !important;
}

.tiles .tile .icon {
    width: 48px;
    height: 48px;
    border-radius: 8px !important;
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    margin-right: 15px;
    flex-shrink: 0;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    float: none !important;
}

/* Distinct color layouts for tiles matching Screenshot 4 */
.tiles .tile:nth-child(1) .icon { background-color: rgba(0, 112, 243, 0.08) !important; color: #0070f3 !important; }
.tiles .tile:nth-child(2) .icon { background-color: rgba(16, 185, 129, 0.08) !important; color: #10b981 !important; }
.tiles .tile:nth-child(3) .icon { background-color: rgba(112, 92, 235, 0.08) !important; color: #705ceb !important; }
.tiles .tile:nth-child(4) .icon { background-color: rgba(245, 158, 11, 0.08) !important; color: #f59e0b !important; }

.tiles .tile .stat {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #15095e !important;
    display: block !important;
    margin: 0 !important;
    margin-right: 6px !important;
    text-align: left !important;
}

.tiles .tile .title {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    display: block !important;
    margin: 0 !important;
    text-align: left !important;
}

.tiles .tile .highlight {
    display: none !important;
}

/* --- Panel & List Card styling overrides --- */
.panel {
    border-radius: 8px !important;
    box-shadow: 0 4px 6px rgba(15, 23, 42, 0.015), 0 10px 15px -3px rgba(15, 23, 42, 0.025), 0 0 0 1px rgba(15, 23, 42, 0.03) !important;
    border: none !important;
    margin-bottom: 25px !important;
}

.panel-default > .panel-heading {
    background-color: #ffffff !important;
    border-bottom: 1px solid #f1f5f9 !important;
    color: #15095e !important;
    font-weight: 700 !important;
    padding: 14px 20px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

/* Redesigned panel-heading button alignment */
.panel-default > .panel-heading .pull-right,
.panel-default > .panel-heading .btn-container {
    margin: 0 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    order: 1 !important;
    float: none !important;
}

.panel-default > .panel-heading .panel-title {
    font-weight: 700 !important;
    color: #15095e !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
}

.panel-default > .panel-heading .panel-title i {
    color: #705ceb !important;
    margin-right: 8px !important;
    order: 0 !important;
}

/* Custom premium secondary buttons inside panels */
.portal-wrapper .panel .btn-default,
.portal-wrapper .card .btn-default,
.portal-wrapper .panel a.btn-default,
.portal-wrapper .card a.btn-default,
.portal-wrapper .panel .btn-default:focus,
.portal-wrapper .card .btn-default:focus {
    background-color: rgba(112, 92, 235, 0.06) !important;
    border: 1px solid rgba(112, 92, 235, 0.12) !important;
    color: #705ceb !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    border-radius: 8px !important;
    transition: all 0.2s ease-in-out !important;
    padding: 6px 14px !important;
    box-shadow: none !important;
}

.portal-wrapper .panel .btn-default:hover,
.portal-wrapper .card .btn-default:hover,
.portal-wrapper .panel a.btn-default:hover,
.portal-wrapper .card a.btn-default:hover {
    background-color: #705ceb !important;
    border-color: #705ceb !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(112, 92, 235, 0.2) !important;
}

.list-group-item {
    border-color: #f1f5f9 !important;
    padding: 14px 20px !important;
    font-size: 13.5px !important;
    color: #475569 !important;
    transition: all 0.2s ease;
    background-color: #ffffff !important;
}

.list-group-item:hover {
    background-color: #f8fafc !important;
    color: #705ceb !important;
}

/* Color-coded status labels inside list elements */
.portal-wrapper .list-group-item .label,
.portal-wrapper .list-group-item span[class*="label-"] {
    border-radius: 6px !important;
    padding: 4px 10px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border: none !important;
    display: inline-block !important;
    line-height: 1.4 !important;
}

.portal-wrapper .label-default, 
.portal-wrapper .status-closed,
.portal-wrapper .label-dark {
    background-color: rgba(148, 163, 184, 0.15) !important;
    color: #475569 !important;
}
.portal-wrapper .label-success,
.portal-wrapper .status-answered {
    background-color: rgba(16, 185, 129, 0.15) !important;
    color: #10b981 !important;
}
.portal-wrapper .label-info,
.portal-wrapper .status-open {
    background-color: rgba(14, 165, 233, 0.15) !important;
    color: #0ea5e9 !important;
}
.portal-wrapper .label-warning,
.portal-wrapper .status-customer-reply {
    background-color: rgba(245, 158, 11, 0.15) !important;
    color: #f59e0b !important;
}

.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
    background-color: rgba(112, 92, 235, 0.05) !important;
    border-left: 3px solid #705ceb !important;
    color: #705ceb !important;
}

/* --- Premium Quick Action Buttons Grid --- */
.panel-btn-row {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    margin-top: 20px !important;
}

.panel-btn {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 14px 10px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    transition: all 0.2s ease-in-out !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.01) !important;
}

.panel-btn:hover {
    background-color: #ffffff !important;
    border-color: #705ceb !important;
    color: #705ceb !important;
    box-shadow: 0 4px 12px rgba(112, 92, 235, 0.08) !important;
    transform: translateY(-1px) !important;
}

.panel-btn i {
    font-size: 18px !important;
    color: #64748b !important;
    transition: color 0.2s ease !important;
}

.panel-btn:hover i {
    color: #705ceb !important;
}

/* --- Responsive Sidebar toggling --- */
@media (max-width: 991px) {
    .portal-wrapper {
        height: auto;       /* Allow body scroll on mobile */
        overflow: visible;
    }

    .portal-sidebar {
        position: fixed;
        left: -260px;
        top: 0;
        bottom: 0;
        height: 100vh;
        overflow-y: auto;   /* Sidebar scrolls independently on mobile too */
    }

    .portal-sidebar.active {
        left: 0;
    }

    .portal-content {
        height: auto;       /* Content takes natural height on mobile */
        overflow-y: visible;
    }
    
    .portal-header {
        padding: 0 15px;
    }
}

/* =====================================================
   --- 8. Premium Client Registration Page Styling ---
   ===================================================== */
#registration {
    background: transparent !important;
    padding: 0 !important;
}

#registration .form-group {
    margin-bottom: 22px !important;
}

#registration label:not(.field-icon):not(.checkbox):not(.toggle-switch-success) {
    font-weight: 600 !important;
    font-size: 13.5px !important;
    color: #334155 !important;
    margin-bottom: 8px !important;
    display: block;
}

#registration .prepend-icon {
    position: relative;
}

#registration .prepend-icon .field-icon {
    position: absolute;
    left: 16px;
    bottom: 0 !important;
    top: auto !important;
    height: 50px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: none !important;
    color: #94a3b8;
    font-size: 15px;
    z-index: 20 !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent;
    border: none;
    line-height: 1;
}

#registration .prepend-icon .field-icon i,
#registration .prepend-icon .field-icon span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Push text to the right inside bootstrap-select buttons that have prepended icons */
#registration .prepend-icon .bootstrap-select > .btn,
.prepend-icon .bootstrap-select > .btn {
    padding-left: 46px !important;
}

/* Specific styling for Security Answer field to prevent overlap */
#inputSecurityQAns,
input#inputSecurityQAns,
#registration #inputSecurityQAns {
    padding-left: 48px !important;
}

#registration .field,
#registration .form-control {
    height: 50px !important;
    background-color: #f1f5f9 !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 8px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    line-height: 48px !important;
    font-size: 14px !important;
    color: #1e293b !important;
    box-shadow: none !important;
    transition: all 0.2s ease-in-out !important;
    width: 100%;
}

/* Apply 46px left padding only if prepended icon exists */
#registration .prepend-icon .field,
#registration .prepend-icon .form-control {
    padding-left: 46px !important;
}

/* Align select dropdowns (both native and bootstrap-select) to match inputs exactly */
#registration select,
#registration select.field,
#registration select.form-control,
#registration .bootstrap-select > .btn {
    height: 50px !important;
    background-color: #f1f5f9 !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    color: #1e293b !important;
    font-weight: 500 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 16px !important;
    padding-right: 36px !important; /* Space for caret */
    line-height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2364748b' viewBox='0 0 16 16'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: all 0.2s ease-in-out !important;
    width: 100% !important;
}

#registration .prepend-icon select,
#registration .prepend-icon select.field,
#registration .prepend-icon select.form-control,
#registration .prepend-icon .bootstrap-select > .btn {
    padding-left: 46px !important;
}

#registration .field:focus,
#registration .form-control:focus,
#registration select.field:focus {
    background-color: #ffffff !important;
    border-color: #705ceb !important;
    box-shadow: 0 0 0 3px rgba(112, 92, 235, 0.12) !important;
    outline: none;
}

/* Phone number flag container alignment in registration page */
#registration .intl-tel-input .flag-container,
#registration .iti .iti__flag-container {
    height: 50px !important;
    top: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

#registration .intl-tel-input .selected-flag,
#registration .iti .iti__selected-flag {
    height: 50px !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* For fields without icons */
#registration .form-group:not(.prepend-icon) .field,
#registration .form-group:not(.prepend-icon) .form-control {
    padding-left: 16px !important;
}

/* Specific styling for Phone Number field (WHMCS includes flag dropdown inside input sometimes) */
#inputPhone,
input#inputPhone,
#registration #inputPhone,
#registration input[type="tel"].field,
#registration input[type="tel"].form-control {
    padding-left: 95px !important;
}

#registration .intl-tel-input .selected-flag,
#registration .iti .iti__selected-flag {
    padding-left: 16px !important;
}

/* Subheadings */
#registration .sub-heading {
    height: 0 !important;
    border-top: 1px solid #e2e8f0 !important;
    border-bottom: none !important;
    text-align: center !important;
    margin: 35px 0 25px 0 !important;
    padding: 0 !important;
}

#registration .sub-heading span {
    display: inline-block !important;
    position: relative !important;
    padding: 0 20px !important;
    top: -11px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #15095e !important;
    background-color: #ffffff !important;
    text-transform: capitalize !important;
    letter-spacing: -0.2px !important;
}

.required-fields-label {
    font-size: 12px !important;
    color: #64748b !important;
    font-weight: 600 !important;
    font-style: italic !important;
}

/* Password strength and layout */
#registration .password-strength-meter {
    margin-top: 12px;
}

#registration .password-strength-meter .progress {
    height: 6px;
    border-radius: 3px;
    background-color: #e2e8f0;
    margin-bottom: 6px;
    box-shadow: none;
}

#registration .password-strength-meter .progress-bar {
    box-shadow: none;
    border-radius: 3px;
}

#registration #passwordStrengthTextLabel {
    font-size: 12px;
    color: #64748b;
}

/* Generate Password Button */
#registration .generate-password {
    background-color: transparent !important;
    border: 1px solid #705ceb !important;
    color: #705ceb !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    transition: all 0.2s ease !important;
}

#registration .generate-password:hover {
    background-color: rgba(112, 92, 235, 0.05) !important;
    color: #5d69d9 !important;
    border-color: #5d69d9 !important;
}

/* Marketing opt-in panel & checkboxes */
#registration .marketing-email-optin {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px !important;
    padding: 24px;
    margin: 30px 0 25px 0;
}

#registration .marketing-email-optin h4 {
    margin-top: 0;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #15095e !important;
}

#registration .marketing-email-optin p {
    color: #64748b;
    font-size: 13px;
    margin-bottom: 15px;
}

/* TOS panel */
#registration .tospanel {
    background: #fff8f8;
    border: 1px solid #fecaca;
    border-radius: 8px !important;
    box-shadow: none;
    margin-top: 20px;
}

#registration .tospanel .panel-heading {
    background: #fef2f2 !important;
    border-bottom: 1px solid #fecaca !important;
    color: #991b1b !important;
    padding: 12px 20px !important;
    font-weight: 700 !important;
}

#registration .tospanel .panel-body {
    padding: 15px 20px !important;
}

#registration .tospanel .checkbox {
    margin: 0;
    color: #991b1b;
    font-size: 13.5px;
}

#registration .tospanel .checkbox input {
    margin-top: 3px !important;
}

#registration .tospanel .checkbox a {
    color: #b91c1c;
    font-weight: 600;
    text-decoration: underline;
}

/* Captcha alignment */
#registration .captcha-container {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

/* General form overrides inside auth login-cards (e.g. Password Reset, 2FA prompt) */
.login-card form .form-control {
    height: 50px !important;
    background-color: #f1f5f9 !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 8px !important;
    font-size: 14.5px !important;
    color: #1e293b !important;
    box-shadow: none !important;
    transition: all 0.2s ease-in-out !important;
}

.login-card form .form-control:focus {
    background-color: #ffffff !important;
    border-color: #705ceb !important;
    box-shadow: 0 0 0 3px rgba(112, 92, 235, 0.12) !important;
}

.login-card form label {
    font-weight: 600 !important;
    font-size: 13.5px !important;
    color: #334155 !important;
    margin-bottom: 8px !important;
    display: block;
}

.login-card form .btn-primary,
.login-card form input[type="submit"].btn-primary,
.login-card .btn,
.login-card a.btn {
    background-color: #705ceb !important;
    border: none !important;
    color: #ffffff !important;
    height: 50px !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 14px rgba(112, 92, 235, 0.25) !important;
    transition: all 0.25s ease !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.login-card form .btn-primary:hover,
.login-card form input[type="submit"].btn-primary:hover,
.login-card .btn:hover {
    background-color: #5d69d9 !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(112, 92, 235, 0.35) !important;
}

.login-card form .btn-default,
.login-card .btn-outline-primary,
.login-card a.btn-outline-primary {
    height: 50px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

/* =====================================================
   --- 9. Support Department Grid & Clickable Cards ---
   ===================================================== */
.ticket-dep-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    margin: 20px 0 30px 0;
}

@media (max-width: 767px) {
    .ticket-dep-grid {
        grid-template-columns: 1fr;
    }
}

.ticket-dep-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px !important;
    padding: 24px;
    display: flex;
    align-items: center;
    text-decoration: none !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px rgba(21, 9, 94, 0.01);
    position: relative;
    cursor: pointer;
}

.ticket-dep-card:hover {
    transform: translateY(-2px);
    border-color: #705ceb;
    box-shadow: 0 8px 20px rgba(112, 92, 235, 0.06);
}

.ticket-dep-card .dep-icon {
    width: 52px;
    height: 52px;
    border-radius: 8px !important;
    background-color: rgba(112, 92, 235, 0.08);
    color: #705ceb;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 18px;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.ticket-dep-card:hover .dep-icon {
    background-color: #705ceb;
    color: #ffffff;
}

.ticket-dep-card .dep-details {
    flex-grow: 1;
    min-width: 0;
}

.ticket-dep-card .dep-details h4 {
    margin: 0 0 6px 0 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #15095e !important;
}

.ticket-dep-card .dep-details p {
    margin: 0 !important;
    font-size: 13px !important;
    color: #64748b !important;
    line-height: 1.4 !important;
}

.ticket-dep-card .dep-arrow {
    font-size: 14px;
    color: #cbd5e1;
    margin-left: 15px;
    transition: all 0.2s ease;
}

.ticket-dep-card:hover .dep-arrow {
    color: #705ceb;
    transform: translateX(3px);
}

/* =====================================================
   --- 10. Premium Portal Dashboard Forms & Controls ---
   ===================================================== */
.portal-body label {
    font-weight: 600 !important;
    font-size: 13.5px !important;
    color: #334155 !important;
    margin-bottom: 8px !important;
    display: block;
}

.portal-body .form-control:not(.header-search-input),
.portal-body textarea.form-control {
    height: 48px !important;
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    color: #1e293b !important;
    box-shadow: none !important;
    transition: all 0.2s ease-in-out !important;
}

.portal-body select.form-control,
.login-page-bg select.form-control,
.login-page-bg select.field,
#registration select.field {
    height: 48px !important;
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 10px 32px 10px 16px !important;
    font-size: 14px !important;
    color: #1e293b !important;
    box-shadow: none !important;
    transition: all 0.2s ease-in-out !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2364748b' viewBox='0 0 16 16'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    cursor: pointer !important;
}

/* Style custom JS bootstrap-select buttons */
.portal-body .bootstrap-select > .btn,
.login-page-bg .bootstrap-select > .btn {
    height: 48px !important;
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 10px 32px 10px 16px !important;
    font-size: 14px !important;
    color: #1e293b !important;
    box-shadow: none !important;
    transition: all 0.2s ease-in-out !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2364748b' viewBox='0 0 16 16'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    cursor: pointer !important;
}

.portal-body .bootstrap-select > .btn:focus,
.portal-body .bootstrap-select > .btn:active,
.login-page-bg .bootstrap-select > .btn:focus,
.login-page-bg .bootstrap-select > .btn:active,
#registration select:focus,
#registration select.field:focus,
#registration select.form-control:focus,
#registration .bootstrap-select > .btn:focus,
#registration .bootstrap-select > .btn:active {
    background-color: #ffffff !important;
    border-color: #705ceb !important;
    box-shadow: 0 0 0 3px rgba(112, 92, 235, 0.12) !important;
    outline: none !important;
}

.portal-body .bootstrap-select .caret,
.login-page-bg .bootstrap-select .caret,
#registration .bootstrap-select .caret {
    display: none !important;
}

/* Force-hide native selects when bootstrap-select or select2 JS handles styling to prevent double rendering */
select.bs-select-hidden,
select.select2-hidden-accessible,
.bs-select-hidden,
.select2-hidden-accessible,
.bootstrap-select select,
.bootstrap-select select.form-control,
.bootstrap-select select.field {
    display: none !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
    position: absolute !important;
}

.portal-body textarea.form-control {
    height: auto !important;
}

.portal-body .form-control:not(.header-search-input):focus,
.portal-body select.form-control:focus,
.portal-body textarea.form-control:focus {
    background-color: #ffffff !important;
    border-color: #705ceb !important;
    box-shadow: 0 0 0 3px rgba(112, 92, 235, 0.12) !important;
    outline: none;
}

.portal-body input[type="checkbox"],
.login-page-bg input[type="checkbox"],
#registration input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 4px !important;
    background-color: #ffffff !important;
    cursor: pointer !important;
    position: relative !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin-right: 8px !important;
    transition: all 0.2s ease !important;
}

.portal-body input[type="checkbox"]:checked,
.login-page-bg input[type="checkbox"]:checked,
#registration input[type="checkbox"]:checked {
    background-color: #705ceb !important;
    border-color: #705ceb !important;
}

.portal-body input[type="checkbox"]:checked::after,
.login-page-bg input[type="checkbox"]:checked::after,
#registration input[type="checkbox"]:checked::after {
    content: "" !important;
    position: absolute !important;
    top: 3px !important;
    left: 6px !important;
    width: 5px !important;
    height: 9px !important;
    border: solid #ffffff !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
}

.portal-body .form-control:disabled,
.portal-body .form-control[disabled] {
    background-color: #f1f5f9 !important;
    color: #94a3b8 !important;
    border-color: #e2e8f0 !important;
    cursor: not-allowed !important;
}

.portal-body input[type="file"].form-control {
    padding: 12px 16px !important;
    height: auto !important;
    line-height: normal !important;
}

.portal-body .btn-primary {
    background-color: #705ceb !important;
    border: none !important;
    color: #ffffff !important;
    height: 48px !important;
    border-radius: 8px !important;
    padding: 10px 28px !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 14px rgba(112, 92, 235, 0.2) !important;
    transition: all 0.25s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.portal-body .btn-primary:hover {
    background-color: #5d69d9 !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(112, 92, 235, 0.3) !important;
}

.portal-body .btn-default {
    height: 48px !important;
    border-radius: 8px !important;
    padding: 10px 28px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #475569 !important;
    transition: all 0.2s ease-in-out !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.portal-body .btn-default:hover {
    background-color: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #1e293b !important;
}

/* =====================================================
   --- 11. Datatables & Table List styling overrides ---
   ===================================================== */
.table-container {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 30px !important;
    box-shadow: 0 4px 6px rgba(21, 9, 94, 0.01) !important;
    margin-bottom: 30px !important;
}

.dataTables_wrapper .listtable {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.dataTables_wrapper table.table-list {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
    margin: 15px 0 !important;
    border: none !important;
}

.dataTables_wrapper table.table-list thead tr th,
.dataTables_wrapper table.table-list thead th {
    background-color: #f8fafc !important;
    color: #475569 !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-bottom: 2px solid #e2e8f0 !important;
    border-top: none !important;
    padding: 14px 16px !important;
}

.dataTables_wrapper table.table-list tbody tr {
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    background-color: #ffffff !important;
}

.dataTables_wrapper table.table-list tbody tr:hover {
    background-color: #f8fafc !important;
}

.dataTables_wrapper table.table-list tbody tr td {
    padding: 16px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    color: #334155 !important;
    font-size: 14px !important;
    vertical-align: middle !important;
    border-top: none !important;
}

/* Status Labels */
.status,
.label.status {
    padding: 6px 12px !important;
    border-radius: 30px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    display: inline-block !important;
    text-transform: capitalize !important;
    border: 1px solid transparent !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

.status-active, 
.status-paid, 
.status-answered, 
.status-open,
.label.status-active,
.label.status-paid,
.label.status-answered,
.label.status-open {
    background-color: rgba(16, 185, 129, 0.1) !important;
    color: #10b981 !important;
    border-color: rgba(16, 185, 129, 0.15) !important;
}

.status-pending, 
.status-unpaid,
.label.status-pending,
.label.status-unpaid {
    background-color: rgba(245, 158, 11, 0.1) !important;
    color: #d97706 !important;
    border-color: rgba(245, 158, 11, 0.15) !important;
}

.status-suspended, 
.status-closed,
.status-overdue,
.label.status-suspended,
.label.status-closed,
.label.status-overdue {
    background-color: rgba(239, 68, 68, 0.1) !important;
    color: #ef4444 !important;
    border-color: rgba(239, 68, 68, 0.15) !important;
}

.status-terminated, 
.status-cancelled,
.label.status-terminated,
.label.status-cancelled {
    background-color: #f1f5f9 !important;
    color: #64748b !important;
    border-color: #cbd5e1 !important;
}

/* Datatable Filters & Pagination */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    margin-bottom: 15px !important;
    color: #64748b !important;
    font-size: 13.5px !important;
    background-color: transparent !important;
}

.dataTables_wrapper .dataTables_filter label {
    margin: 0 !important;
    padding: 0 !important;
}

.dataTables_wrapper .dataTables_filter label .form-control,
.dataTables_wrapper .dataTables_filter input {
    height: 38px !important;
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 8px 14px 8px 14px !important;
    font-size: 13.5px !important;
    color: #1e293b !important;
    width: 220px !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}

.dataTables_wrapper .dataTables_filter label .form-control:focus,
.dataTables_wrapper .dataTables_filter input:focus {
    border-color: #705ceb !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(112, 92, 235, 0.12) !important;
}

.dataTables_wrapper .dataTables_info,
div.dataTables_wrapper div.dataTables_info {
    background-color: transparent !important;
    background: none !important;
    color: #64748b !important;
    font-size: 13.5px !important;
    padding: 10px 0 !important;
    border: none !important;
    float: left !important;
    text-align: left !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.dataTables_wrapper .dataTables_paginate {
    padding-top: 10px !important;
    float: right !important;
}

/* Hide duplicate native DataTables pagination helper buttons when Bootstrap paging is active */
.dataTables_wrapper .dataTables_paginate > .paginate_button,
.dataTables_wrapper .dataTables_paginate > span,
.dataTables_wrapper .dataTables_paginate > a {
    display: none !important;
}

/* Remove duplicate paddings and borders from Bootstrap pagination list wrapper items */
.dataTables_wrapper .dataTables_paginate .pagination > li.paginate_button {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 6px 12px !important;
    margin-left: 5px !important;
    border-radius: 6px !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    color: #475569 !important;
    font-size: 13px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #1e293b !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: #705ceb !important;
    color: #ffffff !important;
    border-color: #705ceb !important;
}

/* Support Bootstrap standard pagination overrides inside datatable wrappers */
.dataTables_wrapper .dataTables_paginate .pagination > li > a,
.dataTables_wrapper .dataTables_paginate .pagination > li > span {
    border: 1px solid #e2e8f0 !important;
    background-color: #ffffff !important;
    color: #475569 !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    margin-left: 4px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.dataTables_wrapper .dataTables_paginate .pagination > li > a:hover,
.dataTables_wrapper .dataTables_paginate .pagination > li.active > a,
.dataTables_wrapper .dataTables_paginate .pagination > li.active > span {
    background-color: #705ceb !important;
    border-color: #705ceb !important;
    color: #ffffff !important;
}

/* Fail-safe sidebar suppression on pages with auth containers */
body:has(.login-page-bg) .sidebar,
body:has(.login-page-bg) .sidebar-secondary,
body:has(.login-page-bg) #footer,
body:has(.login-page-bg) #main-body .sidebar,
body:has(.login-page-bg) aside.portal-sidebar {
    display: none !important;
}

body:has(.login-page-bg) .main-content {
    width: 100% !important;
    float: none !important;
}

/* =====================================================
   --- 12. Service Details & Product Status styling overrides ---
   ===================================================== */
.product-details {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 30px !important;
    box-shadow: 0 4px 6px rgba(21, 9, 94, 0.01) !important;
    margin-bottom: 30px !important;
}

.product-status {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 24px !important;
    margin-bottom: 20px !important;
    text-align: center !important;
}

.product-status .product-icon {
    margin-bottom: 15px !important;
}

.product-status .product-icon .fa-circle {
    color: rgba(112, 92, 235, 0.08) !important;
}

.product-status .product-icon .fa-stack-1x {
    color: #705ceb !important;
}

.product-status h3 {
    margin: 12px 0 4px 0 !important;
    font-size: 20px !important;
    color: #15095e !important;
    font-weight: 700 !important;
}

.product-status h4 {
    margin: 0 !important;
    font-size: 13px !important;
    color: #64748b !important;
    font-weight: 500 !important;
}

.product-status-text {
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    padding: 6px 16px !important;
    border-radius: 20px !important;
    display: inline-block !important;
    margin-top: 15px !important;
}

.product-status-active .product-status-text {
    background-color: rgba(16, 185, 129, 0.1) !important;
    color: #10b981 !important;
}

.product-status-suspended .product-status-text {
    background-color: rgba(239, 68, 68, 0.1) !important;
    color: #ef4444 !important;
}

.product-status-pending .product-status-text {
    background-color: rgba(245, 158, 11, 0.1) !important;
    color: #d97706 !important;
}

.product-status-terminated .product-status-text {
    background-color: #f1f5f9 !important;
    color: #64748b !important;
}

/* Actions buttons under product status */
.product-actions-wrapper {
    margin-top: 15px !important;
}

.product-actions-wrapper .btn {
    height: 44px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
}

/* Right Overview column */
.col-md-6.text-center h4 {
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: #94a3b8 !important;
    letter-spacing: 0.5px !important;
    margin-top: 20px !important;
    margin-bottom: 5px !important;
}

.col-md-6.text-center {
    font-size: 15px !important;
    color: #1e293b !important;
    font-weight: 500 !important;
}

/* Tabs list on service detail page */
.nav-tabs {
    border-bottom: 2px solid #cbd5e1 !important;
    margin-bottom: 25px !important;
    display: flex !important;
    flex-wrap: wrap !important;
}

.nav-tabs > li {
    margin-bottom: -2px !important;
}

.nav-tabs > li > a {
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    color: #64748b !important;
    font-weight: 600 !important;
    font-size: 14.5px !important;
    padding: 12px 20px !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
}

.nav-tabs > li > a:hover {
    color: #705ceb !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    border: none !important;
    border-bottom: 2px solid #705ceb !important;
    color: #705ceb !important;
    background-color: transparent !important;
}

.product-details-tab-container {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 30px !important;
    box-shadow: 0 4px 6px rgba(21, 9, 94, 0.01) !important;
    margin-bottom: 30px !important;
}

.product-details-tab-container .row {
    margin-bottom: 12px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.product-details-tab-container .row:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.product-details-tab-container .row strong {
    font-size: 14px !important;
    color: #475569 !important;
    font-weight: 600 !important;
}

/* Customer Reply status badge colors */
.status-customerreply,
.label.status-customerreply {
    background-color: rgba(0, 112, 243, 0.08) !important;
    color: #0070f3 !important;
    border-color: rgba(0, 112, 243, 0.12) !important;
}

/* =====================================================
   --- 13. Ticket Reply & Message Threads overrides ---
   ===================================================== */
.ticket-reply {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 24px 24px 24px 28px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 4px 6px rgba(21, 9, 94, 0.01) !important;
    position: relative !important;
    overflow: hidden !important;
}

.ticket-reply::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 4px !important;
    background-color: #cbd5e1 !important; /* Muted slate for standard/owner */
}

.ticket-reply.staff {
    background-color: #f8fafc !important; /* Soft backdrop for staff */
    border: 1px solid rgba(112, 92, 235, 0.15) !important;
    box-shadow: 0 4px 10px rgba(112, 92, 235, 0.02) !important;
}

.ticket-reply.staff::before {
    background-color: #705ceb !important; /* Brand Violet for support agents */
}

.ticket-reply .date {
    float: right !important;
    font-size: 12.5px !important;
    color: #94a3b8 !important;
    font-weight: 500 !important;
}

.ticket-reply .user {
    border-bottom: 1px solid #f1f5f9 !important;
    padding-bottom: 12px !important;
    margin-bottom: 15px !important;
    font-size: 14px !important;
    color: #475569 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.ticket-reply.staff .user {
    border-bottom-color: rgba(112, 92, 235, 0.08) !important;
}

.ticket-reply .user i {
    color: #94a3b8 !important;
    font-size: 15px !important;
}

.ticket-reply.staff .user i {
    color: #705ceb !important;
}

.ticket-reply .user .name {
    font-weight: 700 !important;
    color: #15095e !important;
}

.ticket-reply .user .type {
    color: #94a3b8 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

/* Requestor labels styling */
.ticket-reply .label {
    padding: 3px 8px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-left: 6px !important;
}

.ticket-reply .label.requestor-type-owner {
    background-color: rgba(112, 92, 235, 0.1) !important;
    color: #705ceb !important;
}

.ticket-reply .label.requestor-type-operator {
    background-color: rgba(16, 185, 129, 0.1) !important;
    color: #10b981 !important;
}

.ticket-reply .message {
    font-size: 14.5px !important;
    line-height: 1.6 !important;
    color: #334155 !important;
}

.ticket-reply.staff .message {
    color: #1e293b !important;
}

/* Conversation Attachments styling */
.ticket-reply .attachments {
    margin-top: 20px !important;
    padding-top: 15px !important;
    border-top: 1px dashed #e2e8f0 !important;
}

.ticket-reply.staff .attachments {
    border-top-color: rgba(112, 92, 235, 0.12) !important;
}

.ticket-reply .attachments strong {
    font-size: 13px !important;
    color: #475569 !important;
    display: block !important;
    margin-bottom: 8px !important;
}

.ticket-reply .attachments ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.ticket-reply .attachments ul li {
    display: inline-flex !important;
    align-items: center !important;
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    padding: 8px 14px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    transition: all 0.2s ease !important;
}

.ticket-reply.staff .attachments ul li {
    background-color: #ffffff !important;
    border-color: rgba(112, 92, 235, 0.15) !important;
}

.ticket-reply .attachments ul li:hover {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
}

.ticket-reply .attachments ul li i {
    margin-right: 8px !important;
    color: #64748b !important;
}

.ticket-reply .attachments ul li a {
    color: #334155 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.ticket-reply .attachments ul li a:hover {
    color: #705ceb !important;
}

/* =====================================================
   --- 14. Knowledgebase & Categories Styling ---
   ===================================================== */
.kb-search {
    margin-bottom: 35px !important;
}

.kb-search .form-control {
    height: 52px !important;
    border-radius: 10px 0 0 10px !important;
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-right: none !important;
    font-size: 15px !important;
}

.kb-search .form-control:focus {
    border-color: #705ceb !important;
}

.kb-search .btn-primary {
    height: 52px !important;
    border-radius: 0 10px 10px 0 !important;
    background-color: #705ceb !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    padding: 10px 30px !important;
}

/* Category Grid Cards */
.kbcategories {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

/* Override bootstrap row clearfix for grid flex compatibility */
.kbcategories .col-sm-4 {
    width: 100% !important;
    float: none !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 20px !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 4px 6px rgba(21, 9, 94, 0.01) !important;
}

.kbcategories .col-sm-4:hover {
    transform: translateY(-2px);
    border-color: #705ceb;
    box-shadow: 0 8px 20px rgba(112, 92, 235, 0.05);
}

.kbcategories .col-sm-4 > a {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #15095e !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    margin-bottom: 6px !important;
}

.kbcategories .col-sm-4 > a i {
    color: #705ceb !important;
    font-size: 16px !important;
}

.kbcategories .col-sm-4 p {
    margin: 0 !important;
    font-size: 13px !important;
    color: #64748b !important;
    line-height: 1.4 !important;
}

/* KB Popular articles list */
.kbarticles {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 24px !important;
    box-shadow: 0 4px 6px rgba(21, 9, 94, 0.01) !important;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.kbarticles a {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: color 0.2s ease !important;
    margin-top: 15px !important;
}

.kbarticles a:first-of-type {
    margin-top: 0 !important;
}

.kbarticles a:hover {
    color: #705ceb !important;
}

.kbarticles a span.glyphicon {
    color: #cbd5e1 !important;
    font-size: 13px !important;
}

.kbarticles p {
    margin: 5px 0 15px 22px !important;
    font-size: 13.5px !important;
    color: #64748b !important;
    line-height: 1.5 !important;
}

.kbarticles p:last-child {
    margin-bottom: 0 !important;
}

/* Dynamic styling for KB articles content (future-proof) */
.kb-article-content {
    font-size: 14.5px !important;
    line-height: 1.75 !important;
    color: #334155 !important;
}

.kb-article-content p {
    margin-top: 0 !important;
    margin-bottom: 18px !important;
    color: #334155 !important;
    line-height: 1.75 !important;
}

.kb-article-content h1,
.kb-article-content h2,
.kb-article-content h3,
.kb-article-content h4 {
    color: #15095e !important;
    font-weight: 700 !important;
    margin-top: 28px !important;
    margin-bottom: 14px !important;
    line-height: 1.3 !important;
}

.kb-article-content h1 { font-size: 22px !important; }
.kb-article-content h2 { 
    font-size: 19px !important;
    border-left: 4px solid #705ceb !important;
    padding-left: 12px !important;
}
.kb-article-content h3 { font-size: 16.5px !important; }

.kb-article-content a {
    color: #705ceb !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
}

.kb-article-content a:hover {
    color: #5d69d9 !important;
    text-decoration: underline !important;
}

/* Code & Preformatted Text */
.kb-article-content pre {
    background-color: #0f172a !important;
    color: #f8fafc !important;
    border: 1px solid #1e293b !important;
    border-radius: 8px !important;
    padding: 14px 18px !important;
    margin: 20px 0 !important;
    overflow-x: auto !important;
    font-family: 'Fira Code', 'Courier New', monospace !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
}

.kb-article-content code {
    background-color: #f1f5f9 !important;
    color: #3730a3 !important; /* High contrast deep indigo */
    border: 1px solid #e2e8f0 !important;
    border-radius: 4px !important;
    padding: 2px 6px !important;
    font-family: 'Fira Code', 'Courier New', monospace !important;
    font-size: 13px !important;
    font-weight: 600 !important; /* Thickens the font for sharp legibility */
}

/* Lists */
.kb-article-content ul,
.kb-article-content ol {
    margin-top: 0 !important;
    margin-bottom: 18px !important;
    padding-left: 24px !important;
}

.kb-article-content ul {
    list-style-type: disc !important;
}

.kb-article-content ol {
    list-style-type: decimal !important;
}

.kb-article-content li {
    margin-bottom: 8px !important;
    color: #334155 !important;
    line-height: 1.7 !important;
}

/* Blockquotes / Tips / Warnings */
.kb-article-content blockquote {
    background-color: rgba(112, 92, 235, 0.04) !important;
    border-left: 4px solid #705ceb !important;
    border-radius: 0 8px 8px 0 !important;
    padding: 16px 20px !important;
    margin: 22px 0 !important;
}

.kb-article-content blockquote p {
    margin-bottom: 0 !important;
    font-style: italic !important;
    color: #475569 !important;
}

/* Tables inside articles */
.kb-article-content table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 24px 0 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

.kb-article-content table th {
    background-color: #f8fafc !important;
    color: #15095e !important;
    font-weight: 700 !important;
    padding: 12px 16px !important;
    border-bottom: 2px solid #e2e8f0 !important;
    text-align: left !important;
    font-size: 13.5px !important;
}

.kb-article-content table td {
    padding: 12px 16px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    color: #475569 !important;
    font-size: 13.5px !important;
}

.kb-article-content table tr:last-child td {
    border-bottom: none !important;
}

/* Images inside articles */
.kb-article-content img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04) !important;
    border: 1px solid #e2e8f0 !important;
    margin: 20px 0 !important;
    display: block !important;
}

/* --- WHMCS Store Product Cards Customization --- */
#order-standard_cart .products .product,
.order-standard_cart .products .product,
#frmCheckout .products .product,

#order-standard_cart .product {
    background-color: #ffffff !important;
    border-radius: 12px !important;
    border: none !important;
    box-shadow: 0 4px 6px rgba(15, 23, 42, 0.015), 0 10px 15px -3px rgba(15, 23, 42, 0.025), 0 0 0 1px rgba(15, 23, 42, 0.03) !important;
    padding: 24px !important;
    margin-bottom: 24px !important;
    transition: all 0.25s ease-in-out !important;
    overflow: hidden;
}

#order-standard_cart .products .product:hover,
.order-standard_cart .products .product:hover,
#frmCheckout .products .product:hover,

#order-standard_cart .product:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 20px rgba(112, 92, 235, 0.05), 0 4px 6px rgba(112, 92, 235, 0.02), 0 0 0 1px rgba(112, 92, 235, 0.15) !important;
}

/* Header inside product card */
#order-standard_cart .product header,
.order-standard_cart .product header,
#frmCheckout .product header,

#order-standard_cart .product .header,
.order-standard_cart .product .header,
#frmCheckout .product .header,

#order-standard_cart .product-header {
    background: none !important;
    border: none !important;
    padding: 0 0 16px 0 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    margin-bottom: 16px !important;
}

#order-standard_cart .product header h3,
.order-standard_cart .product header h3,
#frmCheckout .product header h3,

#order-standard_cart .product .header h3,
.order-standard_cart .product .header h3,
#frmCheckout .product .header h3,

#order-standard_cart .product-header h3,
.order-standard_cart .product-header h3,
#frmCheckout .product-header h3,

#order-standard_cart .product .product-name {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #15095e !important;
    margin: 0 !important;
}

/* Product specifications text list */
#order-standard_cart .product .product-desc,
.order-standard_cart .product .product-desc,
#frmCheckout .product .product-desc,

#order-standard_cart .product ul,
.order-standard_cart .product ul,
#frmCheckout .product ul,

#order-standard_cart .product p {
    color: #475569 !important;
    font-size: 13.5px !important;
    line-height: 1.8 !important;
}

/* Pricing box alignment and styling */
#order-standard_cart .product .price,
.order-standard_cart .product .price,
#frmCheckout .product .price,

#order-standard_cart .product .price-container,
.order-standard_cart .product .price-container,
#frmCheckout .product .price-container,

#order-standard_cart .product .product-pricing {
    color: #15095e !important;
    font-weight: 700 !important;
}

/* Re-theme the green "Order Now" button to brand violet with shimmer/gradients */
#order-standard_cart .product .btn-order-now,
.order-standard_cart .product .btn-order-now,
#frmCheckout .product .btn-order-now,

#order-standard_cart .product a.btn-order-now,
.order-standard_cart .product a.btn-order-now,
#frmCheckout .product a.btn-order-now,

#order-standard_cart .product .btn-signup,
.order-standard_cart .product .btn-signup,
#frmCheckout .product .btn-signup,

#order-standard_cart .product a.btn-signup,
.order-standard_cart .product a.btn-signup,
#frmCheckout .product a.btn-signup,

#order-standard_cart .product .btn-success,
.order-standard_cart .product .btn-success,
#frmCheckout .product .btn-success,

#order-standard_cart .product a.btn-success {
    background: linear-gradient(135deg, #705ceb 0%, #533cc6 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    padding: 10px 24px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(112, 92, 235, 0.25) !important;
    transition: all 0.2s ease-in-out !important;
}

#order-standard_cart .product .btn-order-now:hover,
.order-standard_cart .product .btn-order-now:hover,
#frmCheckout .product .btn-order-now:hover,

#order-standard_cart .product a.btn-order-now:hover,
.order-standard_cart .product a.btn-order-now:hover,
#frmCheckout .product a.btn-order-now:hover,

#order-standard_cart .product .btn-signup:hover,
.order-standard_cart .product .btn-signup:hover,
#frmCheckout .product .btn-signup:hover,

#order-standard_cart .product a.btn-signup:hover,
.order-standard_cart .product a.btn-signup:hover,
#frmCheckout .product a.btn-signup:hover,

#order-standard_cart .product .btn-success:hover,
.order-standard_cart .product .btn-success:hover,
#frmCheckout .product .btn-success:hover,

#order-standard_cart .product a.btn-success:hover {
    background: linear-gradient(135deg, #816ff0 0%, #614bd1 100%) !important;
    box-shadow: 0 6px 16px rgba(112, 92, 235, 0.4) !important;
    transform: translateY(-1px) !important;
}

/* Restore standard_cart layout columns (sidebar 25%, main content 75%) */
#order-standard_cart .sidebar {
    width: 25% !important;
    float: left !important;
    max-width: 25% !important;
    padding-right: 15px !important;
}

#order-standard_cart .main-content {
    width: 75% !important;
    float: right !important;
    max-width: 75% !important;
    padding-left: 15px !important;
}

/* Redesign Categories Panel as a clean dropdown style menu */
#order-standard_cart .sidebar .panel[menuItemName*="Categories"] {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 20px !important;
    overflow: visible !important;
    position: relative !important;
}

/* Header styled as a select dropdown button */
#order-standard_cart .sidebar .panel[menuItemName*="Categories"] .panel-heading {
    display: block !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important; /* Fully rounded when collapsed */
    padding: 12px 18px !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
}

#order-standard_cart .sidebar .panel[menuItemName*="Categories"] .panel-heading:hover {
    background-color: #f8fafc !important;
    border-color: #cbd5e1 !important;
}

/* Expanded state heading styling */
#order-standard_cart .sidebar .panel[menuItemName*="Categories"] .panel-heading:has(a:not(.collapsed)) {
    border-radius: 8px 8px 0 0 !important;
}

#order-standard_cart .sidebar .panel[menuItemName*="Categories"] .panel-title,
.order-standard_cart .sidebar .panel[menuItemName*="Categories"] .panel-title,
#frmCheckout .sidebar .panel[menuItemName*="Categories"] .panel-title,

#order-standard_cart .sidebar .panel[menuItemName*="Categories"] .panel-title a {
    color: #15095e !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
}

#order-standard_cart .sidebar .panel[menuItemName*="Categories"] .panel-title i {
    color: #705ceb !important;
    margin-right: 8px !important;
}

/* Chevron arrow styling */
#order-standard_cart .sidebar .panel[menuItemName*="Categories"] .panel-heading .fa-chevron-up,
.order-standard_cart .sidebar .panel[menuItemName*="Categories"] .panel-heading .fa-chevron-up,
#frmCheckout .sidebar .panel[menuItemName*="Categories"] .panel-heading .fa-chevron-up,

#order-standard_cart .sidebar .panel[menuItemName*="Categories"] .panel-heading .fa-chevron-down {
    display: inline-block !important;
    font-size: 11px !important;
    color: #64748b !important;
    transition: transform 0.25s ease !important;
}

/* Rotate chevron when collapsed */
#order-standard_cart .sidebar .panel[menuItemName*="Categories"] .panel-heading a.collapsed .fa-chevron-up,
.order-standard_cart .sidebar .panel[menuItemName*="Categories"] .panel-heading a.collapsed .fa-chevron-up,
#frmCheckout .sidebar .panel[menuItemName*="Categories"] .panel-heading a.collapsed .fa-chevron-up,

#order-standard_cart .sidebar .panel[menuItemName*="Categories"] .panel-heading a.collapsed .fa-chevron-down {
    transform: rotate(180deg) !important;
}

/* Dropdown list-group items wrapper */
#order-standard_cart .sidebar .panel[menuItemName*="Categories"] .list-group {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-top: none !important;
    border-radius: 0 0 8px 8px !important;
    box-shadow: 0 10px 25px rgba(21, 9, 94, 0.06) !important;
    margin-top: 0 !important;
    padding: 6px 0 !important;
    overflow: hidden !important;
}

/* Category list items */
#order-standard_cart .sidebar .panel[menuItemName*="Categories"] .list-group-item {
    border: none !important;
    border-radius: 0 !important;
    padding: 10px 18px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #475569 !important;
    background-color: #ffffff !important;
    transition: all 0.15s ease !important;
    width: 100% !important;
    text-align: left !important;
    display: block !important;
}

#order-standard_cart .sidebar .panel[menuItemName*="Categories"] a.list-group-item:hover {
    background-color: #f8fafc !important;
    color: #705ceb !important;
    padding-left: 22px !important;
}

#order-standard_cart .sidebar .panel[menuItemName*="Categories"] a.list-group-item.active,
.order-standard_cart .sidebar .panel[menuItemName*="Categories"] a.list-group-item.active,
#frmCheckout .sidebar .panel[menuItemName*="Categories"] a.list-group-item.active,

#order-standard_cart .sidebar .panel[menuItemName*="Categories"] a.list-group-item.active:hover,
.order-standard_cart .sidebar .panel[menuItemName*="Categories"] a.list-group-item.active:hover,
#frmCheckout .sidebar .panel[menuItemName*="Categories"] a.list-group-item.active:hover,

#order-standard_cart .sidebar .panel[menuItemName*="Categories"] a.list-group-item.active:focus {
    background-color: rgba(112, 92, 235, 0.05) !important;
    color: #705ceb !important;
    font-weight: 600 !important;
    border-left: 3px solid #705ceb !important;
    padding-left: 22px !important;
    box-shadow: none !important;
}

/* Reset products grid overrides so standard Bootstrap 2-column layout renders correctly */
#order-standard_cart .products,
.order-standard_cart .products,
#frmCheckout .products,

#order-standard_cart .products #products {
    display: block !important;
}

/* Header Cart Button text view styles */
.header-util-btn.cart-btn {
    width: auto !important;
    height: 38px !important;
    border-radius: 8px !important; /* Strict 8px standard */
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background-color: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #475569 !important;
}

.header-util-btn.cart-btn:hover {
    background-color: rgba(112, 92, 235, 0.08) !important;
    border-color: rgba(112, 92, 235, 0.2) !important;
    color: #705ceb !important;
}

.header-util-btn.cart-btn .cart-btn-text {
    font-size: 13px !important;
    font-weight: 600 !important;
}

/* Permanently remove Actions & Social Media panels from store sidebar */
#order-standard_cart .sidebar .panel[menuItemName*="Actions"],
.order-standard_cart .sidebar .panel[menuItemName*="Actions"],
#frmCheckout .sidebar .panel[menuItemName*="Actions"],

#order-standard_cart .sidebar .panel[menuItemName*="Social Media"],
.order-standard_cart .sidebar .panel[menuItemName*="Social Media"],
#frmCheckout .sidebar .panel[menuItemName*="Social Media"],

#order-standard_cart .sidebar .panel:has(.fa-plus),
.order-standard_cart .sidebar .panel:has(.fa-plus),
#frmCheckout .sidebar .panel:has(.fa-plus),

#order-standard_cart .sidebar .panel:has(.fa-thumbs-up),
.order-standard_cart .sidebar .panel:has(.fa-thumbs-up),
#frmCheckout .sidebar .panel:has(.fa-thumbs-up),

#order-standard_cart .sidebar .panel:has(a[href*="action=viewcart"]) {
    display: none !important;
}

/* Ensure clean transition states for panel collapse */
#order-standard_cart .sidebar .panel[menuItemName*="Categories"] .panel-collapse {
    transition: all 0.25s ease !important;
}


/* --- WHMCS Invoices Page Customization (Square Card Layout) --- */
#tableInvoicesList_wrapper .table-container,
#tableInvoicesList_wrapper,
.table-container:has(#tableInvoicesList) {
    border-radius: 0 !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.015), 0 10px 15px -3px rgba(15, 23, 42, 0.02) !important;
    padding: 24px !important;
}

/* Invoices Table styling overrides */
#tableInvoicesList {
    border-collapse: collapse !important;
    width: 100% !important;
    border-radius: 0 !important;
}

#tableInvoicesList thead th {
    background-color: #f8fafc !important;
    color: #15095e !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 11.5px !important;
    letter-spacing: 0.5px !important;
    padding: 16px 20px !important;
    border-bottom: 2px solid #cbd5e1 !important;
    border-top: none !important;
}

#tableInvoicesList tbody td {
    padding: 18px 20px !important;
    font-size: 13.5px !important;
    color: #334155 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    vertical-align: middle !important;
}

#tableInvoicesList tbody tr:hover {
    background-color: #f8fafc !important;
}

/* Status Badges */
#tableInvoicesList .status,
#tableInvoicesList .label {
    border-radius: 4px !important; /* Flat square-ish badges */
    padding: 6px 12px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: inline-block !important;
}

/* Paid status theme styling */
#tableInvoicesList .status-paid,
#tableInvoicesList .label-success {
    background-color: rgba(16, 185, 129, 0.1) !important;
    color: #059669 !important;
    border: 1px solid rgba(16, 185, 129, 0.2) !important;
}

/* Unpaid status theme styling */
#tableInvoicesList .status-unpaid,
#tableInvoicesList .label-danger,
#tableInvoicesList .label-warning {
    background-color: rgba(249, 115, 22, 0.1) !important;
    color: #ea580c !important;
    border: 1px solid rgba(249, 115, 22, 0.2) !important;
}

/* Refunded status theme styling */
#tableInvoicesList .status-refunded,
#tableInvoicesList .label-info {
    background-color: rgba(14, 165, 233, 0.1) !important;
    color: #0284c7 !important;
    border: 1px solid rgba(14, 165, 233, 0.2) !important;
}

/* Cancelled status theme styling */
#tableInvoicesList .status-cancelled,
#tableInvoicesList .label-default {
    background-color: rgba(148, 163, 184, 0.1) !important;
    color: #475569 !important;
    border: 1px solid rgba(148, 163, 184, 0.2) !important;
}

/* Pagination and controls */
#tableInvoicesList_wrapper .dataTables_info,
#tableInvoicesList_wrapper .dataTables_paginate {
    margin-top: 20px !important;
    font-size: 13px !important;
    color: #64748b !important;
}

#tableInvoicesList_wrapper .dataTables_filter input {
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    outline: none !important;
    transition: border-color 0.2s ease !important;
}

#tableInvoicesList_wrapper .dataTables_filter input:focus {
    border-color: #705ceb !important;
    box-shadow: 0 0 0 2px rgba(112, 92, 235, 0.1) !important;
}

#tableInvoicesList_wrapper .paginate_button.active a,
#tableInvoicesList_wrapper .paginate_button.active a:hover,
#tableInvoicesList_wrapper .paginate_button.active a:focus {
    background: linear-gradient(135deg, #705ceb 0%, #533cc6 100%) !important;
    border-color: #705ceb !important;
    color: #ffffff !important;
    border-radius: 6px !important;
}


/* --- WHMCS Support Tickets Page Customization (Redesigned Card Layout) --- */
#tableTicketsList_wrapper .table-container,
#tableTicketsList_wrapper,
.table-container:has(#tableTicketsList) {
    border-radius: 8px !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.015), 0 10px 15px -3px rgba(15, 23, 42, 0.02) !important;
    padding: 24px !important;
}

/* Tickets Table styling overrides */
#tableTicketsList {
    border-collapse: collapse !important;
    width: 100% !important;
    border-radius: 8px !important;
}

#tableTicketsList thead th {
    background-color: #f8fafc !important;
    color: #15095e !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 11.5px !important;
    letter-spacing: 0.5px !important;
    padding: 16px 20px !important;
    border-bottom: 2px solid #cbd5e1 !important;
    border-top: none !important;
}

#tableTicketsList tbody td {
    padding: 18px 20px !important;
    font-size: 13.5px !important;
    color: #334155 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    vertical-align: middle !important;
}

#tableTicketsList tbody tr:hover {
    background-color: #f8fafc !important;
}

/* Ticket Subjects Link Styling */
#tableTicketsList tbody td a {
    color: #705ceb !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

#tableTicketsList tbody td a:hover {
    color: #533cc6 !important;
    text-decoration: underline !important;
}

/* Ticket Status Badges */
#tableTicketsList .status,
#tableTicketsList .label {
    border-radius: 8px !important; /* Unified 8px status labels */
    padding: 6px 12px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: inline-block !important;
}

/* Open status theme styling */
#tableTicketsList .status-open,
#tableTicketsList .label-success {
    background-color: rgba(16, 185, 129, 0.1) !important;
    color: #059669 !important;
    border: 1px solid rgba(16, 185, 129, 0.2) !important;
}

/* Closed status theme styling */
#tableTicketsList .status-closed,
#tableTicketsList .label-danger,
#tableTicketsList .label-default {
    background-color: rgba(239, 68, 68, 0.1) !important;
    color: #ef4444 !important;
    border: 1px solid rgba(239, 68, 68, 0.2) !important;
}

/* Answered status theme styling */
#tableTicketsList .status-answered,
#tableTicketsList .label-info {
    background-color: rgba(14, 165, 233, 0.1) !important;
    color: #0284c7 !important;
    border: 1px solid rgba(14, 165, 233, 0.2) !important;
}

/* Customer-Reply status theme styling */
#tableTicketsList .status-customer-reply,
#tableTicketsList .label-warning {
    background-color: rgba(249, 115, 22, 0.1) !important;
    color: #ea580c !important;
    border: 1px solid rgba(249, 115, 22, 0.2) !important;
}

/* Pagination and controls */
#tableTicketsList_wrapper .dataTables_info,
#tableTicketsList_wrapper .dataTables_paginate {
    margin-top: 20px !important;
    font-size: 13px !important;
    color: #64748b !important;
}

#tableTicketsList_wrapper .dataTables_filter input {
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    outline: none !important;
    transition: border-color 0.2s ease !important;
}

#tableTicketsList_wrapper .dataTables_filter input:focus {
    border-color: #705ceb !important;
    box-shadow: 0 0 0 2px rgba(112, 92, 235, 0.1) !important;
}

#tableTicketsList_wrapper .dataTables_length select {
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 6px 10px !important;
    outline: none !important;
}

#tableTicketsList_wrapper .paginate_button.active a,
#tableTicketsList_wrapper .paginate_button.active a:hover,
#tableTicketsList_wrapper .paginate_button.active a:focus {
    background: linear-gradient(135deg, #705ceb 0%, #533cc6 100%) !important;
    border-color: #705ceb !important;
    color: #ffffff !important;
    border-radius: 8px !important;
}

/* Expand support ticket message typing area height */
#inputMessage,
textarea[name="message"],
.markdown-editor textarea,
.CodeMirror,
.CodeMirror-scroll {
    min-height: 200px !important;
}

.CodeMirror {
    height: 250px !important;
    border-radius: 8px !important;
    border: 1px solid #cbd5e1 !important;
}

/* Style and align the markdown editor preview button */
.md-header [data-handler="bootstrap-markdown-preview"],
.markdown-editor [data-handler="bootstrap-markdown-preview"],
.md-header .btn-primary,
.markdown-editor .btn-primary,
.editor-toolbar .btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    background-color: #705ceb !important;
    border-color: #705ceb !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    border-radius: 8px !important; /* Unified 8px corner radius */
    padding: 6px 14px !important;
    height: auto !important;
}

/* Ensure the icon inside is also aligned and sized correctly */
.md-header [data-handler="bootstrap-markdown-preview"] i,
.md-header [data-handler="bootstrap-markdown-preview"] span,
.md-header .btn-primary i,
.md-header .btn-primary span {
    font-size: 13px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* --- WHMCS Configure Product Cart Layout Redesign (Square Panels & Brand Colors) --- */

/* Force square corners on all sidebar and main content panels inside ordering steps */
#order-standard_cart .sidebar .panel,
.order-standard_cart .sidebar .panel,
#frmCheckout .sidebar .panel,

.order-standard_cart .sidebar .panel,
#order-standard_cart .panel,
.order-standard_cart .panel,
#frmCheckout .panel,

.order-standard_cart .panel,
.product-info,
.order-summary,
#orderSummary,
.panel-summary {
    border-radius: 0 !important;
}

/* Hide redundant sidebar categories/actions/social media panels in cart config step */
#order-standard_cart .sidebar .panel[menuItemName*="Actions"],
.order-standard_cart .sidebar .panel[menuItemName*="Actions"],
#frmCheckout .sidebar .panel[menuItemName*="Actions"],

#order-standard_cart .sidebar .panel[menuItemName*="Social Media"],
.order-standard_cart .sidebar .panel[menuItemName*="Social Media"],
#frmCheckout .sidebar .panel[menuItemName*="Social Media"],

#order-standard_cart .sidebar .panel:has(.fa-plus),
.order-standard_cart .sidebar .panel:has(.fa-plus),
#frmCheckout .sidebar .panel:has(.fa-plus),

#order-standard_cart .sidebar .panel:has(.fa-share-alt),
.order-standard_cart .sidebar .panel:has(.fa-share-alt),
#frmCheckout .sidebar .panel:has(.fa-share-alt),

.order-standard_cart .sidebar .panel[menuItemName*="Actions"],
.order-standard_cart .sidebar .panel[menuItemName*="Social Media"] {
    display: none !important;
}

/* Redesign Right Sidebar Order Summary Card */
#orderSummary,
.order-summary,
.panel-summary {
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.015) !important;
    background-color: #ffffff !important;
    overflow: hidden !important;
}

#orderSummary .panel-heading,
.order-summary .panel-heading,
.panel-summary .panel-heading,
#orderSummary .title,
.order-summary .title {
    background: #f8fafc !important;
    border-bottom: 2px solid #cbd5e1 !important;
    color: #15095e !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 12.5px !important;
    letter-spacing: 0.5px !important;
    padding: 16px 20px !important;
}

#orderSummary .panel-heading h3,
.order-summary .panel-heading h3,
.panel-summary .panel-heading h3,
#orderSummary .title h3,
.order-summary .title h3,
#orderSummary .panel-title {
    color: #15095e !important;
    font-weight: 700 !important;
    margin: 0 !important;
    font-size: 12.5px !important;
}

#orderSummary .panel-body,
.order-summary .panel-body,
.panel-summary .panel-body {
    padding: 20px !important;
    font-size: 13.5px !important;
    color: #334155 !important;
}

/* Style main product details specifications block (left card) */
#order-standard_cart .product-info,
.order-standard_cart .product-info,
#frmCheckout .product-info,

#order-standard_cart .product-details,
.order-standard_cart .product-details,
#frmCheckout .product-details,

#order-standard_cart .info-card,
.order-standard_cart .info-card,
#frmCheckout .info-card,

.product-info {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-left: 4px solid #705ceb !important;
    padding: 20px !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.01) !important;
    margin-bottom: 25px !important;
}

#order-standard_cart .product-info h3,
.order-standard_cart .product-info h3,
#frmCheckout .product-info h3,

.product-info h3,
#order-standard_cart .product-info h2 {
    color: #15095e !important;
    font-weight: 700 !important;
    margin-top: 0 !important;
    font-size: 18px !important;
}

/* Style Section headers like Configurable Options and Additional Information */
#order-standard_cart .header-themed,
.order-standard_cart .header-themed,
#frmCheckout .header-themed,

.order-standard_cart .header-themed {
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    border-left: 3px solid #705ceb !important;
    padding: 12px 18px !important;
    color: #15095e !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 35px 0 20px 0 !important;
}

/* Style Config product buttons */
#order-standard_cart .btn-continue,
.order-standard_cart .btn-continue,
#frmCheckout .btn-continue,

#order-standard_cart .btn-primary,
.order-standard_cart .btn-primary,
#frmCheckout .btn-primary,

.btn-continue,
#btnCompleteProductConfig {
    background: linear-gradient(135deg, #705ceb 0%, #533cc6 100%) !important;
    border: 1px solid #705ceb !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    padding: 12px 28px !important;
    font-size: 13.5px !important;
    box-shadow: 0 4px 12px rgba(112, 92, 235, 0.2) !important;
    transition: all 0.2s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

#order-standard_cart .btn-continue:hover,
.order-standard_cart .btn-continue:hover,
#frmCheckout .btn-continue:hover,

#order-standard_cart .btn-primary:hover,
.order-standard_cart .btn-primary:hover,
#frmCheckout .btn-primary:hover,

.btn-continue:hover,
#btnCompleteProductConfig:hover {
    background: linear-gradient(135deg, #816ff0 0%, #614bd1 100%) !important;
    border-color: #816ff0 !important;
    box-shadow: 0 6px 16px rgba(112, 92, 235, 0.3) !important;
}

/* Yellow warning message panel overrides */
#order-standard_cart .alert-warning,
.order-standard_cart .alert-warning,
#frmCheckout .alert-warning,

.order-standard_cart .alert-warning {
    border-radius: 0 !important;
    background-color: rgba(245, 158, 11, 0.1) !important;
    color: #d97706 !important;
    border: 1px solid rgba(245, 158, 11, 0.15) !important;
    font-size: 13.5px !important;
}

/* Hide left sidebar entirely on the product configuration page step */
body.page-configure-product #order-standard_cart .sidebar,
body.page-configure-product .order-standard_cart .sidebar,
body.page-configure-product #frmCheckout .sidebar,

body.page-configure-product .order-standard_cart .sidebar,
body.page-configure-product #order-standard_cart .pull-md-left.sidebar,
body.page-configure-product .order-standard_cart .pull-md-left.sidebar,
body.page-configure-product #frmCheckout .pull-md-left.sidebar,

body.page-configure-product .order-standard_cart .pull-md-left.sidebar,
body.page-configure-product .sidebar,
body:has(#frmConfigureProduct) .sidebar,
html:has(#frmConfigureProduct) .sidebar,
body:has(#frmConfigureProduct) .pull-md-left.sidebar,
html:has(#frmConfigureProduct) .pull-md-left.sidebar {
    display: none !important;
}

/* Expand the main content to fill the space when left sidebar is hidden */
body.page-configure-product #order-standard_cart .main-content,
body.page-configure-product .order-standard_cart .main-content,
body.page-configure-product #frmCheckout .main-content,

body.page-configure-product .order-standard_cart .main-content,
body.page-configure-product #order-standard_cart .pull-md-right,
body.page-configure-product .order-standard_cart .pull-md-right,
body.page-configure-product #frmCheckout .pull-md-right,

body.page-configure-product .order-standard_cart .pull-md-right,
body.page-configure-product .main-content,
body:has(#frmConfigureProduct) .main-content,
html:has(#frmConfigureProduct) .main-content,
body:has(#frmConfigureProduct) .pull-md-right,
html:has(#frmConfigureProduct) .pull-md-right {
    width: 100% !important;
    float: none !important;
}

/* Force white text and icon color on login and register sign-in buttons to match password reset submit style */
.btn-signin,
.btn-signin *,
#login,
#login *,
.login-page-bg .btn-signin,
.login-page-bg .btn-signin *,
.login-page-bg button[type="submit"],
.login-page-bg button[type="submit"] * {
    color: #ffffff !important;
}

/* Authentication Pages Typography Standardization (Login, Register, Password Reset) */
.login-page-bg,
.login-page-bg div,
.login-page-bg p,
.login-page-bg span:not(.fas):not(.far):not(.fab):not(.fa):not([class*="fa-"]),
.login-page-bg h1,
.login-page-bg h2,
.login-page-bg h3,
.login-page-bg h4,
.login-page-bg h5,
.login-page-bg h6,
.login-page-bg label,
.login-page-bg input,
.login-page-bg select,
.login-page-bg textarea,
.login-page-bg a,
.login-page-bg button {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Titles */
.login-page-bg h2,
.login-page-bg h3,
.login-page-bg .card-icon-header h2,
.login-page-bg .password-reset-container h2 {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #15095e !important;
    line-height: 1.35 !important;
    letter-spacing: -0.5px !important;
}

/* Descriptions & Paragraphs */
.login-page-bg p,
.login-page-bg .card-icon-header p,
.login-page-bg .text-center {
    font-size: 14.5px !important;
    font-weight: 400 !important;
    color: #475569 !important;
    line-height: 1.6 !important;
}

/* Form Labels */
.login-page-bg label,
.login-page-bg .custom-input-group label,
.login-page-bg .form-group label {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #15095e !important;
    margin-bottom: 8px !important;
}

/* Text Inputs & Select Fields */
.login-page-bg input.form-control,
.login-page-bg textarea.form-control,
.login-page-bg select.form-control,
.login-page-bg .input-custom {
    font-size: 14.5px !important;
    font-weight: 400 !important;
    color: #1e293b !important;
}

/* Submit Buttons & Primary Actions */
.login-page-bg .btn-signin,
.login-page-bg .btn-primary,
.login-page-bg button[type="submit"] {
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px !important;
}

/* Secondary Links */
.login-page-bg .back-to-website,
.login-page-bg .need-help,
.login-page-bg .forgot-password a,
.login-page-bg a {
    font-size: 13.5px !important;
    font-weight: 500 !important;
}

/* Force standard icon spacing inside template buttons */
.btn i,
.btn-primary i,
.btn-signin i,
.btn-banner-services i {
    margin-right: 8px !important;
}

/* Card Redesigns for Product Configuration Page */
.product-info,
.product-details,
.info-card {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-left: 5px solid #705ceb !important;
    padding: 24px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(21, 9, 94, 0.02) !important;
    margin-bottom: 30px !important;
}

.product-info h3,
.product-details h3 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #15095e !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
}

.product-info p,
.product-info ul,
.product-details p,
.product-details ul {
    font-size: 13.5px !important;
    color: #475569 !important;
    line-height: 1.6 !important;
}

/* Configure Page Title & Header Styling */
.page-configure-product .header-lined h1,
.page-configure-product h1 {
    color: #15095e !important;
    font-weight: 800 !important;
    font-size: 26px !important;
    letter-spacing: -0.5px !important;
    margin-bottom: 6px !important;
}

.page-configure-product .header-lined p,
.page-configure-product .tagline {
    color: #64748b !important;
    font-size: 14px !important;
}

/* Product Info Card Styling (Compact summary card) */
#order-standard_cart .product-info,
.order-standard_cart .product-info,
#frmCheckout .product-info,

.order-standard_cart .product-info,
.product-info-box,
div.product-info {
    background: #ffffff !important;
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    border-left: 5px solid #705ceb !important;
    padding: 20px 24px !important;
    box-shadow: 0 4px 16px rgba(112, 92, 235, 0.04) !important;
    margin-bottom: 24px !important;
    max-width: 620px !important;
}

#order-standard_cart .product-title,
.order-standard_cart .product-title,
#frmCheckout .product-title,

.order-standard_cart .product-title,
.product-info .product-title {
    color: #15095e !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    margin-bottom: 12px !important;
}

#order-standard_cart .product-info ul,
.order-standard_cart .product-info ul,
#frmCheckout .product-info ul,

.product-info ul {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px 14px !important;
    list-style: none !important;
    padding-left: 0 !important;
    margin-bottom: 0 !important;
}

#order-standard_cart .product-info li,
.order-standard_cart .product-info li,
#frmCheckout .product-info li,

.product-info li {
    font-size: 13px !important;
    color: #475569 !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    padding: 5px 12px !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Section Headings Styling - Clean Spacing & Alignment */
#order-standard_cart .sub-heading,
.order-standard_cart .sub-heading,
#frmCheckout .sub-heading,

.order-standard_cart .sub-heading,
.sub-heading {
    border-bottom: 1px dashed #cbd5e1 !important;
    margin: 36px 0 24px 0 !important;
    padding-bottom: 10px !important;
    position: static !important;
    text-align: left !important;
    background: transparent !important;
    display: block !important;
    width: 100% !important;
    clear: both !important;
    float: none !important;
}

#order-standard_cart .sub-heading span,
.order-standard_cart .sub-heading span,
#frmCheckout .sub-heading span,

.order-standard_cart .sub-heading span,
.sub-heading span {
    background: transparent !important;
    color: #15095e !important;
    font-weight: 700 !important;
    font-size: 15.5px !important;
    letter-spacing: 0.2px !important;
    padding: 0 !important;
    padding-left: 12px !important;
    border: none !important;
    border-left: 4px solid #705ceb !important;
    display: inline-block !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

#order-standard_cart .sub-heading span small,
.order-standard_cart .sub-heading span small,
#frmCheckout .sub-heading span small,

.order-standard_cart .sub-heading span small,
.sub-heading span small,
#order-standard_cart .sub-heading small,
.order-standard_cart .sub-heading small,
#frmCheckout .sub-heading small,

.sub-heading small {
    color: #64748b !important;
    font-size: 12.5px !important;
    font-weight: 400 !important;
    font-style: italic !important;
    margin-left: 8px !important;
}

/* Form Inputs, Dropdown Selects & Balanced Sizing */
#order-standard_cart .field-container,
.order-standard_cart .field-container,
#frmCheckout .field-container,

.order-standard_cart .field-container,
#order-standard_cart .form-group,
.order-standard_cart .form-group,
#frmCheckout .form-group,

.order-standard_cart .form-group {
    width: 100% !important;
    margin-bottom: 20px !important;
    clear: both !important;
}

#order-standard_cart label,
.order-standard_cart label,
#frmCheckout label,

.order-standard_cart label,
.page-configure-product label {
    color: #15095e !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    margin-top: 14px !important;
    margin-bottom: 6px !important;
    display: block !important;
    clear: both !important;
}

#order-standard_cart select,
.order-standard_cart select,
#frmCheckout select,

#order-standard_cart input[type="text"],
.order-standard_cart input[type="text"],
#frmCheckout input[type="text"],

#order-standard_cart input[type="password"],
.order-standard_cart input[type="password"],
#frmCheckout input[type="password"],

#order-standard_cart textarea,
.order-standard_cart textarea,
#frmCheckout textarea,

#order-standard_cart .form-control,
.order-standard_cart .form-control,
#frmCheckout .form-control,

.order-standard_cart select,
.order-standard_cart .form-control {
    width: 100% !important;
    max-width: 520px !important;
    height: 42px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    background-color: #ffffff !important;
    color: #1e293b !important;
    font-size: 13.5px !important;
    padding: 8px 14px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03) !important;
    transition: all 0.2s ease !important;
    display: block !important;
}

#order-standard_cart select:focus,
.order-standard_cart select:focus,
#frmCheckout select:focus,

#order-standard_cart .form-control:focus,
.order-standard_cart .form-control:focus,
#frmCheckout .form-control:focus,

.order-standard_cart select:focus,
.order-standard_cart .form-control:focus {
    border-color: #705ceb !important;
    box-shadow: 0 0 0 3px rgba(112, 92, 235, 0.15) !important;
    outline: none !important;
}

#order-standard_cart .field-help-text,
.order-standard_cart .field-help-text,
#frmCheckout .field-help-text,

.order-standard_cart .field-help-text,
.order-standard_cart small {
    color: #64748b !important;
    font-size: 12px !important;
    margin-top: 4px !important;
    display: block !important;
}

/* Hide duplicate bottom checkout bar on desktop screens */
@media (min-width: 992px) {
#order-standard_cart .total-due-today-container,
.order-standard_cart .total-due-today-container,
#frmCheckout .total-due-today-container,

    .order-standard_cart .total-due-today-container,
    #orderSummaryMob,
    .order-summary-mob {
        display: none !important;
    }
}

/* Sticky Order Summary Card (Right Side) */
#orderSummary,
.order-summary,
.panel-summary {
    position: sticky !important;
    top: 24px !important;
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 12px 30px rgba(112, 92, 235, 0.08) !important;
    background-color: #ffffff !important;
    overflow: hidden !important;
}

#orderSummary .panel-heading,
.order-summary .panel-heading,
.panel-summary .panel-heading,
#orderSummary .title,
.order-summary .title {
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
    color: #15095e !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 13.5px !important;
    letter-spacing: 0.6px !important;
    padding: 18px 20px !important;
}

#orderSummary h3,
.order-summary h3,
.panel-summary h3 {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #15095e !important;
    margin: 0 !important;
    text-align: center !important;
}

#orderSummary .panel-body,
.order-summary .panel-body,
.panel-summary .panel-body {
    padding: 20px !important;
    font-size: 13.5px !important;
    color: #334155 !important;
}

/* Primary continue button theme overrides */
#order-standard_cart .btn-continue,
.order-standard_cart .btn-continue,
#frmCheckout .btn-continue,

#order-standard_cart .btn-primary,
.order-standard_cart .btn-primary,
#frmCheckout .btn-primary,

.btn-continue,
#btnCompleteProductConfig,
#orderSummary button,
#orderSummary .btn,
#orderSummary .btn-primary {
    background: linear-gradient(135deg, #705ceb 0%, #533cc6 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    padding: 14px 28px !important;
    font-size: 14px !important;
    box-shadow: 0 4px 14px rgba(112, 92, 235, 0.3) !important;
    transition: all 0.2s ease-in-out !important;
    text-transform: uppercase !important;
    width: 100% !important;
    display: block !important;
    letter-spacing: 0.6px !important;
}

#order-standard_cart .btn-continue:hover,
.order-standard_cart .btn-continue:hover,
#frmCheckout .btn-continue:hover,

#order-standard_cart .btn-primary:hover,
.order-standard_cart .btn-primary:hover,
#frmCheckout .btn-primary:hover,

.btn-continue:hover,
#btnCompleteProductConfig:hover,
#orderSummary button:hover,
#orderSummary .btn:hover,
#orderSummary .btn-primary:hover {
    background: linear-gradient(135deg, #816ff0 0%, #614bd1 100%) !important;
    box-shadow: 0 8px 20px rgba(112, 92, 235, 0.4) !important;
    transform: translateY(-1px) !important;
}

/* Help / Contact Sales Banner Styling */
#order-standard_cart .alert-warning,
.order-standard_cart .alert-warning,
#frmCheckout .alert-warning,

.order-standard_cart .alert-warning,
#order-standard_cart .alert-info,
.order-standard_cart .alert-info,
#frmCheckout .alert-info,

.order-standard_cart .alert-info {
    background: #f5f3ff !important;
    border: 1px solid #ddd6fe !important;
    color: #4c1d95 !important;
    border-radius: 10px !important;
    padding: 16px 20px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    text-align: center !important;
    margin-top: 30px !important;
}

#order-standard_cart .alert-warning a,
.order-standard_cart .alert-warning a,
#frmCheckout .alert-warning a,

.order-standard_cart .alert-warning a {
    color: #705ceb !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
}

/* Scope cart sidebar suppression and 100% layout expansion strictly to configure/checkout pages */
body.page-configure-product .cart-sidebar,
body.page-configure-product #order-standard_cart .cart-sidebar,
body.page-configure-product .order-standard_cart .cart-sidebar,
body.page-configure-product #frmCheckout .cart-sidebar,

body.page-configure-product .order-standard_cart .cart-sidebar,
body.page-configure-product div.cart-sidebar {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    flex: 0 0 0% !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.page-configure-product .cart-body,
body.page-configure-product #order-standard_cart .cart-body,
body.page-configure-product .order-standard_cart .cart-body,
body.page-configure-product #frmCheckout .cart-body,

body.page-configure-product .order-standard_cart .cart-body,
body.page-configure-product div.cart-body {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    float: none !important;
}

/* ==========================================================================
   Review & Checkout Page Redesign (viewcart.tpl) - High Specificity Overrides
   ========================================================================== */

/* Items Table Container Card */
html body #order-standard_cart .view-cart-items,
html body .order-standard_cart .view-cart-items,
html body #frmCheckout .view-cart-items,

html body .order-standard_cart .view-cart-items,
html body #order-standard_cart .table-container,
html body .order-standard_cart .table-container,
html body #frmCheckout .table-container,

html body .order-standard_cart .table-container {
    background: #ffffff !important;
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    border-left: 5px solid #705ceb !important;
    box-shadow: 0 4px 16px rgba(112, 92, 235, 0.04) !important;
    overflow: hidden !important;
    margin-bottom: 24px !important;
}

/* Header Row of Review Table (Overrides all.min.css #005689) */
html body #order-standard_cart .view-cart-items-header,
html body .order-standard_cart .view-cart-items-header,
html body #frmCheckout .view-cart-items-header,

html body .order-standard_cart .view-cart-items-header,
html body #order-standard_cart .view-cart-items .header-bg,
html body .order-standard_cart .view-cart-items .header-bg,
html body #frmCheckout .view-cart-items .header-bg,

html body .order-standard_cart .view-cart-items .header-bg,
html body #order-standard_cart table.cart th,
html body .order-standard_cart table.cart th,
html body #frmCheckout table.cart th,

html body .order-standard_cart table.cart th,
html body #order-standard_cart .view-cart-items table th,
html body .order-standard_cart .view-cart-items table th,
html body #frmCheckout .view-cart-items table th,

html body .order-standard_cart .view-cart-items .row.header,
html body #order-standard_cart .view-cart-items div[class*="header"],
html body .order-standard_cart .view-cart-items div[class*="header"],
html body #frmCheckout .view-cart-items div[class*="header"],

html body .order-standard_cart .view-cart-items div[class*="header"],
html body #order-standard_cart .header-bg,
html body .order-standard_cart .header-bg,
html body #frmCheckout .header-bg,

html body .header-bg,
html body .view-cart-items-header {
    background-color: #f8fafc !important;
    background: #f8fafc !important;
    color: #15095e !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-bottom: 1px solid #cbd5e1 !important;
    padding: 14px 16px !important;
}

html body #order-standard_cart .view-cart-items-header *,
html body .order-standard_cart .view-cart-items-header *,
html body #frmCheckout .view-cart-items-header *,

html body .order-standard_cart .view-cart-items-header *,
html body #order-standard_cart .view-cart-items .header-bg *,
html body .order-standard_cart .view-cart-items .header-bg *,
html body #frmCheckout .view-cart-items .header-bg *,

html body .order-standard_cart .view-cart-items .header-bg *,
html body #order-standard_cart .header-bg span,
html body .order-standard_cart .header-bg span,
html body #frmCheckout .header-bg span,

html body #order-standard_cart .header-bg div {
    color: #15095e !important;
    font-weight: 700 !important;
}

/* Table Item Rows */
html body #order-standard_cart .view-cart-items table td,
html body .order-standard_cart .view-cart-items table td,
html body #frmCheckout .view-cart-items table td,

html body .order-standard_cart .view-cart-items table td,
html body #order-standard_cart .view-cart-items .order-summary-item {
    padding: 16px !important;
    vertical-align: middle !important;
    border-bottom: 1px solid #f1f5f9 !important;
    color: #334155 !important;
    font-size: 13.5px !important;
}

/* Product Title & Edit Link */
html body #order-standard_cart .item-title,
html body .order-standard_cart .item-title,
html body #frmCheckout .item-title,

html body .order-standard_cart .item-title,
html body #order-standard_cart .view-cart-items strong {
    color: #15095e !important;
    font-size: 16px !important;
    font-weight: 700 !important;
}

html body #order-standard_cart .btn-link,
html body .order-standard_cart .btn-link,
html body #frmCheckout .btn-link,

html body .order-standard_cart .btn-link,
html body #order-standard_cart a.btn-link {
    color: #705ceb !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-decoration: none !important;
}

html body #order-standard_cart .btn-link:hover {
    color: #533cc6 !important;
    text-decoration: underline !important;
}

/* Empty Cart & Update Buttons (Overrides all.min.css #005689) */
html body #order-standard_cart .btn-empty-cart,
html body .order-standard_cart .btn-empty-cart,
html body #frmCheckout .btn-empty-cart,

html body .order-standard_cart .btn-empty-cart,
html body #btnEmptyCart,
html body #order-standard_cart button.btn-empty-cart,
html body .order-standard_cart button.btn-empty-cart,
html body #frmCheckout button.btn-empty-cart,

html body .btn-empty-cart {
    background-color: #fef2f2 !important;
    background: #fef2f2 !important;
    color: #ef4444 !important;
    border: 1px solid #fca5a5 !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    padding: 6px 14px !important;
    font-size: 12.5px !important;
    transition: all 0.2s ease !important;
}

html body #order-standard_cart .btn-empty-cart:hover,
html body .order-standard_cart .btn-empty-cart:hover,
html body #frmCheckout .btn-empty-cart:hover,

html body #btnEmptyCart:hover {
    background-color: #fee2e2 !important;
    background: #fee2e2 !important;
    color: #dc2626 !important;
}

/* Update Quantity Button */
html body #order-standard_cart .view-cart-items .btn-default,
html body .order-standard_cart .view-cart-items .btn-default,
html body #frmCheckout .view-cart-items .btn-default,

html body #order-standard_cart .view-cart-items input[type="submit"] {
    background: #f5f3ff !important;
    color: #705ceb !important;
    border: 1px solid #ddd6fe !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
}

/* Promo Code Section & Tabs */
html body #order-standard_cart .nav-tabs,
html body .order-standard_cart .nav-tabs,
html body #frmCheckout .nav-tabs,

html body #order-standard_cart .view-cart-tabs {
    border-bottom: 2px solid #e2e8f0 !important;
    margin-bottom: 20px !important;
}

html body #order-standard_cart .nav-tabs > li.active > a,
html body .order-standard_cart .nav-tabs > li.active > a,
html body #frmCheckout .nav-tabs > li.active > a,

html body #order-standard_cart .nav-tabs > li.active > a:focus,
html body .order-standard_cart .nav-tabs > li.active > a:focus,
html body #frmCheckout .nav-tabs > li.active > a:focus,

html body #order-standard_cart .nav-tabs > li.active > a:hover {
    border: none !important;
    border-bottom: 3px solid #705ceb !important;
    color: #705ceb !important;
    font-weight: 700 !important;
    background: transparent !important;
    font-size: 14.5px !important;
}

html body #order-standard_cart .promo-code-container,
html body .order-standard_cart .promo-code-container,
html body #frmCheckout .promo-code-container,

html body .order-standard_cart .promo-code-container,
html body #order-standard_cart .apply-promo-code {
    background: #ffffff !important;
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
    padding: 24px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03) !important;
}

html body #order-standard_cart #inputPromoCode,
html body .order-standard_cart #inputPromoCode,
html body #frmCheckout #inputPromoCode,

html body .order-standard_cart #inputPromoCode {
    height: 44px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 8px 14px !important;
    font-size: 14px !important;
    max-width: 480px !important;
}

/* Continue Shopping Button */
html body #order-standard_cart .btn-continue-shopping,
html body .order-standard_cart .btn-continue-shopping,
html body #frmCheckout .btn-continue-shopping,

html body .order-standard_cart .btn-continue-shopping,
html body #btnContinueShopping,
html body .btn-continue-shopping {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #15095e !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    padding: 14px 28px !important;
    font-size: 13.5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    width: 100% !important;
    display: block !important;
    margin-top: 12px !important;
    transition: all 0.2s ease !important;
    text-align: center !important;
}

html body #order-standard_cart .btn-continue-shopping:hover,
html body .order-standard_cart .btn-continue-shopping:hover,
html body #frmCheckout .btn-continue-shopping:hover,

html body #btnContinueShopping:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}

/* Prevent double overlapping CHECKOUT text */
html body #btnCheckout,
html body .btn-checkout {
    position: relative !important;
    overflow: hidden !important;
    line-height: 1.4 !important;
}

/* ==========================================================================
   Universal 8px Corner Radius Standardization (All Cards & Card Components)
   ========================================================================== */

/* 1. Structural Cards, Panels & Outer Containers */
html body .card,
html body .panel,
html body .panel-default,
html body .panel-info,
html body .panel-primary,
html body .panel-success,
html body .panel-warning,
html body .panel-danger,
html body .panel-sidebar,
html body .sidebar-panel,
html body .client-home-panels .panel,
html body .portal-welcome-banner,
html body .dashboard-banner-card,
html body .dashboard-banner-graphic,
html body .product-info,
html body .product-info-box,
html body div.product-info,
html body #orderSummary,
html body .order-summary,
html body .panel-summary,
html body #order-standard_cart .view-cart-items,
html body .order-standard_cart .view-cart-items,
html body #frmCheckout .view-cart-items,

html body .order-standard_cart .view-cart-items,
html body #order-standard_cart .view-cart-items-header,
html body .order-standard_cart .view-cart-items-header,
html body #frmCheckout .view-cart-items-header,

html body .order-standard_cart .view-cart-items-header,
html body #order-standard_cart .table-container,
html body .order-standard_cart .table-container,
html body #frmCheckout .table-container,

html body .order-standard_cart .table-container,
html body #order-standard_cart .promo-code-container,
html body .order-standard_cart .promo-code-container,
html body #frmCheckout .promo-code-container,

html body .order-standard_cart .promo-code-container,
html body #order-standard_cart .apply-promo-code,
html body .order-standard_cart .apply-promo-code,
html body #frmCheckout .apply-promo-code,

html body .table-container,
html body .product-details,
html body .product-status,
html body .product-details-tab-container,
html body .ticket-reply,
html body .ticket-dep-card,
html body .store-domain-search,
html body .store-promotional-banner,
html body .marketing-email-optin,
html body .tospanel,
html body .login-container,
html body .signup-container,
html body .auth-card,
html body .clientarea-container,
html body .kb-article-card,
html body .invoice-container,
html body .products .product,
html body #order-standard_cart .product,
html body .order-standard_cart .product,
html body #frmCheckout .product,

html body .order-standard_cart .product,
html body div.product,
html body .panel-add-funds,
html body #frmAddFunds,
html body .dataTables_wrapper {
    border-radius: 8px !important;
}

/* 2. Inner Card Items & Sub-Elements */
html body .tiles .tile a,
html body .tiles .tile .icon,
html body .ticket-dep-card .dep-icon,
html body .dep-icon,
html body .banner-tag,
html body .banner-buttons .btn,
html body .product-status-text,
html body .ticket-reply .label {
    border-radius: 8px !important;
}

/* 3. Form Inputs, Select Dropdowns & Buttons inside Cards */
html body .form-control,
html body select.form-control,
html body textarea.form-control,
html body input[type="text"],
html body input[type="password"],
html body input[type="email"],
html body input[type="tel"],
html body input[type="number"],
html body input[type="search"],
html body select,
html body textarea,
html body .input-group .form-control,
html body .input-group-text,
html body .input-group-addon,
html body .input-group-prepend,
html body .input-group-append,
html body .header-search-input,
html body #order-standard_cart select,
html body .order-standard_cart select,
html body #frmCheckout select,

html body #order-standard_cart input[type="text"],
html body .order-standard_cart input[type="text"],
html body #frmCheckout input[type="text"],

html body #order-standard_cart input[type="password"],
html body .order-standard_cart input[type="password"],
html body #frmCheckout input[type="password"],

html body #order-standard_cart textarea,
html body .order-standard_cart textarea,
html body #frmCheckout textarea,

html body .btn,
html body a.btn,
html body button,
html body input[type="submit"],
html body input[type="button"],
html body input[type="reset"],
html body .btn-primary,
html body .btn-default,
html body .btn-secondary,
html body .btn-outline-primary,
html body .btn-outline-secondary,
html body .btn-outline-info,
html body .btn-outline-warning,
html body .btn-outline-danger,
html body .btn-success,
html body .btn-info,
html body .btn-warning,
html body .btn-danger,
html body .btn-custom,
html body .btn-block,
html body .btn-submit,
html body .btn-login,
html body .btn-register,
html body .btn-order-now,
html body #btnCheckout,
html body .btn-checkout,
html body .btn-continue-shopping,
html body #btnContinueShopping {
    border-radius: 8px !important;
}

/* 4. Datatables Search, Pagination & Page Entry Controls */
html body .dataTables_wrapper .dataTables_filter input,
html body .dataTables_wrapper .dataTables_length select,
html body .dataTables_wrapper .dataTables_paginate .paginate_button,
html body .dataTables_wrapper .dataTables_paginate .pagination > li > a,
html body .dataTables_wrapper .dataTables_paginate .pagination > li > span,
html body .pagination > li > a,
html body .pagination > li > span {
    border-radius: 8px !important;
}

/* ==========================================================================
   Option 3 (Template-Wide): Custom 3D & Vibrant Vector SVG Icon System
   ========================================================================== */

/* 1. Dashboard Stat Tiles Styling (Using Tabler Icons instead of 3D SVGs) */
.tiles .tile .icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.25s ease-in-out !important;
}

.tiles .tile:nth-child(1) .icon {
    background-color: rgba(0, 112, 243, 0.08) !important;
    border: 1px solid rgba(0, 112, 243, 0.15) !important;
}
.tiles .tile:nth-child(1) .icon i { opacity: 1 !important; visibility: visible !important; }

.tiles .tile:nth-child(2) .icon {
    background-color: rgba(16, 185, 129, 0.08) !important;
    border: 1px solid rgba(16, 185, 129, 0.15) !important;
}
.tiles .tile:nth-child(2) .icon i { opacity: 1 !important; visibility: visible !important; }

.tiles .tile:nth-child(3) .icon {
    background-color: rgba(112, 92, 235, 0.08) !important;
    border: 1px solid rgba(112, 92, 235, 0.15) !important;
}
.tiles .tile:nth-child(3) .icon i { opacity: 1 !important; visibility: visible !important; }

.tiles .tile:nth-child(4) .icon {
    background-color: rgba(245, 158, 11, 0.08) !important;
    border: 1px solid rgba(245, 158, 11, 0.15) !important;
}
.tiles .tile:nth-child(4) .icon i { opacity: 1 !important; visibility: visible !important; }

/* Interactive Hover Elevation for 3D SVG Icons */
.tiles .tile:hover .icon {
    transform: translateY(-3px) scale(1.08) !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1) !important;
}

/* 2. Global Universal 3D SVG Icon Replacement across Sidebar & Panels (DISABLED to let Tabler Icons render)
html body i[class*="fa-"].fa-cube,
html body i[class*="fa-"].fa-cubes,
html body i[class*="fa-"].fa-server,
html body .fa-cube, html body .fa-cubes, html body .fa-server {
    background: url('../images/icons/services_3d.svg') no-repeat center center / contain !important;
    display: inline-block !important;
    width: 22px !important;
    height: 22px !important;
    vertical-align: middle !important;
}

html body i[class*="fa-"].fa-file-invoice,
html body i[class*="fa-"].fa-file-invoice-dollar,
html body i[class*="fa-"].fa-file-alt,
html body .fa-file-invoice, html body .fa-file-alt {
    background: url('../images/icons/quotes_3d.svg') no-repeat center center / contain !important;
    display: inline-block !important;
    width: 22px !important;
    height: 22px !important;
    vertical-align: middle !important;
}

html body i[class*="fa-"].fa-ticket-alt,
html body i[class*="fa-"].fa-headset,
html body i[class*="fa-"].fa-comments,
html body i[class*="fa-"].fa-life-ring,
html body .fa-ticket-alt, html body .fa-comments {
    background: url('../images/icons/tickets_3d.svg') no-repeat center center / contain !important;
    display: inline-block !important;
    width: 22px !important;
    height: 22px !important;
    vertical-align: middle !important;
}

html body i[class*="fa-"].fa-credit-card,
html body i[class*="fa-"].fa-credit-card-alt,
html body i[class*="fa-"].fa-wallet,
html body .fa-credit-card {
    background: url('../images/icons/invoices_3d.svg') no-repeat center center / contain !important;
    display: inline-block !important;
    width: 22px !important;
    height: 22px !important;
    vertical-align: middle !important;
}
*/

/* 3. Support Ticket Departments Styling (Using Tabler Icons instead of 3D SVGs) */
.ticket-dep-card:nth-child(1) .dep-icon {
    background-color: rgba(56, 189, 248, 0.08) !important;
    border: 1px solid rgba(56, 189, 248, 0.2) !important;
}
.ticket-dep-card:nth-child(1) .dep-icon i { opacity: 1 !important; visibility: visible !important; }

.ticket-dep-card:nth-child(2) .dep-icon {
    background-color: rgba(244, 114, 182, 0.08) !important;
    border: 1px solid rgba(244, 114, 182, 0.2) !important;
}
.ticket-dep-card:nth-child(2) .dep-icon i { opacity: 1 !important; visibility: visible !important; }

.ticket-dep-card:nth-child(3) .dep-icon {
    background-color: rgba(251, 146, 60, 0.08) !important;
    border: 1px solid rgba(251, 146, 60, 0.2) !important;
}
.ticket-dep-card:nth-child(3) .dep-icon i { opacity: 1 !important; visibility: visible !important; }
/* Absolute Font-Face for Tabler Icons to prevent relative path CDN 404s */
@font-face {
    font-family: "tabler-icons";
    font-style: normal;
    font-weight: 400;
    src: url("https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/fonts/tabler-icons.woff2") format("woff2"),
         url("https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/fonts/tabler-icons.woff") format("woff"),
         url("https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/fonts/tabler-icons.ttf") format("truetype");
}

/* Tabler Icons (v3.11.0) High-Specificity Accent Styling */
html body i.ti,
html body .ti,
html body [class*="ti-"] {
    font-family: "tabler-icons" !important;
    display: inline !important;
    font-style: normal !important;
    vertical-align: middle !important;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    font-size: 19px !important;
    line-height: 1 !important;
    transition: color 0.2s ease-in-out !important;
}

/* 0. Form Field Overlay Icons (.prepend-icon .field-icon i.ti) */
html body .prepend-icon .field-icon i.ti,
html body .field-icon i.ti,
html body #registration .prepend-icon .field-icon i.ti {
    font-size: 15px !important;
    display: inline !important;
    vertical-align: middle !important;
    line-height: 1 !important;
    color: #94a3b8 !important;
}

/* Input group addon icons */
html body .input-group-text i.ti,
html body .input-group-addon i.ti {
    font-size: 16px !important;
    display: inline !important;
    vertical-align: middle !important;
}

/* 1. Sidebar Menu Navigation Icons */
html body .sidebar-nav-link i.ti,
html body .portal-sidebar .nav > li > a > i.ti {
    font-size: 22px !important;
    margin-right: 12px !important;
    color: #705ceb !important;
    flex-shrink: 0 !important;
    width: 22px !important;
    text-align: center !important;
}

/* 2. Dashboard Stat Tile Icons */
html body .tiles .tile .icon i.ti {
    font-size: 32px !important;
    -webkit-text-stroke: 0.5px !important;
}

html body .tiles .tile:nth-child(1) .icon i.ti { color: #0070f3 !important; }
html body .tiles .tile:nth-child(2) .icon i.ti { color: #10b981 !important; }
html body .tiles .tile:nth-child(3) .icon i.ti { color: #705ceb !important; }
html body .tiles .tile:nth-child(4) .icon i.ti { color: #f59e0b !important; }

/* 3. Panel & Card Header Icons */
html body .panel-default > .panel-heading .panel-title i.ti,
html body .panel-title i.ti,
html body .card-header i.ti {
    font-size: 21px !important;
    margin-right: 10px !important;
    color: #705ceb !important;
}

/* 4. Support Ticket Department Grid Icons */
html body .ticket-dep-card .dep-icon i.ti {
    font-size: 32px !important;
    color: #705ceb !important;
    -webkit-text-stroke: 0.5px !important;
}

/* 5. Button & Action Link Icons */
html body .btn i.ti,
html body a.btn i.ti,
html body .btn-block i.ti {
    font-size: 18px !important;
    margin-right: 8px !important;
}

/* 6. List Groups & General Pages */
html body .list-group-item i.ti {
    font-size: 19px !important;
    margin-right: 10px !important;
}

/* Universal 8px Card Corner Radius Standardization for Auth Layout Pages */
html body .login-card,
html body .login-container,
html body .pwreset-container,
html body .register-container,
html body .two-factor-challenge-container,
html body .auth-card {
    border-radius: 8px !important;
}


/* ==========================================================================
   CHECKOUT PAGE REDESIGN (cart.php?a=checkout)
   Phase 13 — Correct selectors WITHOUT .cart-body (doesn't exist in checkout)
All selectors use #order-standard_cart directly,
All selectors use .order-standard_cart directly,
All selectors use #frmCheckout directly
   ========================================================================== */

/* ===== 1. PAGE TITLE & SUBTITLE ===== */
#order-standard_cart h1 {
    color: #15095e !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    margin-bottom: 6px !important;
}

#order-standard_cart p.text-center {
    color: #64748b !important;
    font-size: 13.5px !important;
}

/* ===== 2. CHOOSE ACCOUNT SECTION ===== */
#containerExistingAccountSelect {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
    margin-top: 15px !important;
    margin-bottom: 25px !important;
    justify-content: flex-start !important;
}

#containerExistingAccountSelect > div[class*="col-"] {
    display: flex !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    flex: 1 1 300px !important;
}

#containerExistingAccountSelect .account {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 20px 24px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    width: 100% !important;
    min-height: 110px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important;
    box-sizing: border-box !important;
}

#containerExistingAccountSelect .account:hover {
    border-color: #705ceb !important;
    box-shadow: 0 4px 12px rgba(112, 92, 235, 0.08) !important;
    transform: translateY(-2px);
}

/* Active State for Account Cards */
#containerExistingAccountSelect .account.account-active,
#containerExistingAccountSelect .account.agy-radio-active {
    border: 2px solid #705ceb !important;
    background: rgba(112, 92, 235, 0.04) !important;
    box-shadow: 0 4px 12px rgba(112, 92, 235, 0.1) !important;
}

/* Typography inside Choose Account */
#containerExistingAccountSelect .account label {
    margin: 0 !important;
    width: 100% !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

#containerExistingAccountSelect .account strong {
    color: #1e293b !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    display: block !important;
    margin-bottom: 6px !important;
}

#containerExistingAccountSelect .account span.small {
    color: #64748b !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    display: block !important;
}

#order-standard_cart .account span.small {
    color: #64748b !important;
    font-size: 12.5px !important;
    font-style: normal !important;
    line-height: 1.6 !important;
    margin-bottom: 0 !important;
    display: block !important;
}

/* Currency badge (Bootstrap .label class) */
#order-standard_cart .account .label {
    background: rgba(112, 92, 235, 0.1) !important;
    color: #705ceb !important;
    border: 1px solid rgba(112, 92, 235, 0.22) !important;
    border-radius: 6px !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin-left: 6px !important;
}

/* "Create a New Account" text adjustment */
#order-standard_cart .account label.agy-radio-card:has(input[value="new"]),
.order-standard_cart .account label.agy-radio-card:has(input[value="new"]),
#frmCheckout .account label.agy-radio-card:has(input[value="new"]),

#order-standard_cart .account label.agy-radio-card:has(input[value="newaccount"]) {
    color: #475569 !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
}

/* ===== 3. RADIO + CHECKBOX INPUTS ===== */
#order-standard_cart input[type="radio"],
.order-standard_cart input[type="radio"],
#frmCheckout input[type="radio"],

#order-standard_cart input[type="checkbox"] {
    accent-color: #705ceb !important;
    width: 16px !important;
    height: 16px !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}

/* ===== 4. TOTAL DUE TODAY BANNER ===== */
#order-standard_cart .alert.alert-success,
.order-standard_cart .alert.alert-success,
#frmCheckout .alert.alert-success,

#order-standard_cart div.alert-success,
.order-standard_cart div.alert-success,
#frmCheckout div.alert-success,

#order-standard_cart #totalDueToday,
.order-standard_cart #totalDueToday,
#frmCheckout #totalDueToday {
    background: linear-gradient(135deg, rgba(112, 92, 235, 0.06) 0%, rgba(21, 9, 94, 0.04) 100%) !important;
    border: 1px solid rgba(112, 92, 235, 0.2) !important;
    border-left: 4px solid #705ceb !important;
    border-radius: 8px !important;
    color: #334155 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    padding: 16px 22px !important;
    margin-bottom: 20px !important;
    text-align: center !important;
    box-shadow: none !important;
}

#order-standard_cart .alert.alert-success strong,
.order-standard_cart .alert.alert-success strong,
#frmCheckout .alert.alert-success strong,

#order-standard_cart div.alert-success strong,
.order-standard_cart div.alert-success strong,
#frmCheckout div.alert-success strong,

#order-standard_cart #totalDueToday strong {
    color: #705ceb !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    margin-left: 6px !important;
}


/* Overriding the text-center alignment from WHMCS */
#order-standard_cart #paymentGatewaysContainer,
.order-standard_cart #paymentGatewaysContainer,
#paymentGatewaysContainer {
    text-align: left !important;
}

/* ===== 6. ADDITIONAL NOTES TEXTAREA ===== */
#order-standard_cart textarea[name="notes"],
.order-standard_cart textarea[name="notes"],
#frmCheckout textarea[name="notes"] {
    width: 100% !important;
    max-width: 520px !important; /* Limit width to align with standard inputs */
    min-height: 120px !important;
    height: auto !important; /* Override global 42px height rule */
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    font-size: 13.5px !important;
    color: #334155 !important;
    background: #f8fafc !important;
    resize: vertical !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
    font-family: inherit !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

#order-standard_cart textarea[name="notes"]:focus,
.order-standard_cart textarea[name="notes"]:focus,
#frmCheckout textarea[name="notes"]:focus {
    border-color: #705ceb !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(112, 92, 235, 0.12) !important;
    outline: none !important;
}

/* ===== 7. TERMS OF SERVICE (TOS) ===== */
#order-standard_cart label[for="accepttos"],
.order-standard_cart label[for="accepttos"],
#frmCheckout label[for="accepttos"],

#order-standard_cart #accepttos + label,
.order-standard_cart #accepttos + label,
#frmCheckout #accepttos + label,

#order-standard_cart .checkbox-inline:has(#accepttos),
.order-standard_cart .checkbox-inline:has(#accepttos),
#frmCheckout .checkbox-inline:has(#accepttos) {
    color: #475569 !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 0 !important;
}

#order-standard_cart a[href*="terms"],
.order-standard_cart a[href*="terms"],
#frmCheckout a[href*="terms"],

#order-standard_cart a[href*="tos"],
.order-standard_cart a[href*="tos"],
#frmCheckout a[href*="tos"] {
    color: #705ceb !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
}

/* ===== 8. RECAPTCHA + BLANK INPUT BELOW IT ===== */
#order-standard_cart .g-recaptcha ~ input[type="text"],
.order-standard_cart .g-recaptcha ~ input[type="text"],
#frmCheckout .g-recaptcha ~ input[type="text"],

#order-standard_cart .g-recaptcha + input,
.order-standard_cart .g-recaptcha + input,
#frmCheckout .g-recaptcha + input,

#order-standard_cart [id*="recaptcha"] ~ input[type="text"],
.order-standard_cart [id*="recaptcha"] ~ input[type="text"],
#frmCheckout [id*="recaptcha"] ~ input[type="text"],

#order-standard_cart div.g-recaptcha + input,
.order-standard_cart div.g-recaptcha + input,
#frmCheckout div.g-recaptcha + input,

#order-standard_cart input[style*="width: 300"],
.order-standard_cart input[style*="width: 300"],
#frmCheckout input[style*="width: 300"],

#order-standard_cart input[style*="width:300"],
.order-standard_cart input[style*="width:300"],
#frmCheckout input[style*="width:300"] {
    display: none !important;
    height: 0 !important;
    width: 0 !important;
    visibility: hidden !important;
    position: absolute !important;
    pointer-events: none !important;
    opacity: 0 !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ===== 9. COMPLETE ORDER BUTTON ===== */
#order-standard_cart #btnCompleteOrder,
.order-standard_cart #btnCompleteOrder,
#frmCheckout #btnCompleteOrder,

#order-standard_cart button[type="submit"]#btnCompleteOrder,
.order-standard_cart button[type="submit"]#btnCompleteOrder,
#frmCheckout button[type="submit"]#btnCompleteOrder {
    background: linear-gradient(135deg, #705ceb 0%, #533cc6 100%) !important;
    background-color: #705ceb !important;
    border: none !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    padding: 18px 36px !important;
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 20px rgba(112, 92, 235, 0.3) !important;
    margin-top: 20px !important;
    -webkit-appearance: none !important;
}

#order-standard_cart #btnCompleteOrder:hover,
.order-standard_cart #btnCompleteOrder:hover,
#frmCheckout #btnCompleteOrder:hover,

#order-standard_cart button[type="submit"]#btnCompleteOrder:hover,
.order-standard_cart button[type="submit"]#btnCompleteOrder:hover,
#frmCheckout button[type="submit"]#btnCompleteOrder:hover {
    background: linear-gradient(135deg, #533cc6 0%, #3d28a8 100%) !important;
    background-color: #533cc6 !important;
    box-shadow: 0 8px 28px rgba(112, 92, 235, 0.45) !important;
    transform: translateY(-1px) !important;
    color: #ffffff !important;
}

/* ===== 10. SECURITY / IP-LOGGING NOTICE ===== */
#order-standard_cart .checkout-security-msg,
.order-standard_cart .checkout-security-msg,
#frmCheckout .checkout-security-msg {
    background: #fffbeb !important;
    border: 1px solid #fde68a !important;
    border-radius: 8px !important;
    color: #92400e !important;
    font-size: 12.5px !important;
    padding: 12px 20px 12px 40px !important;
    margin: 24px auto 0 auto !important;
    text-align: center !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: 520px !important;
    position: relative !important;
}

#order-standard_cart .checkout-security-msg i,
.order-standard_cart .checkout-security-msg i,
#frmCheckout .checkout-security-msg i {
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #92400e !important;
}

/* ===== 11. FORM HELPER TEXT ===== */
#order-standard_cart .help-block,
.order-standard_cart .help-block,
#frmCheckout .help-block,

#order-standard_cart .text-muted,
.order-standard_cart .text-muted,
#frmCheckout .text-muted {
    color: #94a3b8 !important;
    font-size: 12px !important;
    margin-top: 4px !important;
}

/* Guaranteed Cart Overrides */
#frmCheckout {
    max-width: 850px !important;
    margin: 0 auto !important;
}

/* Payment Gateway Cards Container */
#paymentGatewaysContainer,
#paymentGatewaysContainer .text-center,
#paymentGatewaysContainer .row,
#paymentGatewaysContainer .payment-methods {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 15px !important;
    flex-direction: row !important;
    margin-top: 15px !important;
    margin-bottom: 25px !important;
    width: 100% !important;
}

#paymentGatewaysContainer .text-center::before,
#paymentGatewaysContainer .text-center::after {
    display: none !important;
    content: none !important;
}

/* Ensure columns/divs inside payment container do not force full width stack */
#paymentGatewaysContainer div[class*="col-"],
#paymentGatewaysContainer .row > div,
#paymentGatewaysContainer .text-center > div,
#paymentGatewaysContainer .payment-methods > div {
    width: auto !important;
    flex: 0 0 auto !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-block !important;
}

/* Payment Gateway Cards */
#paymentGatewaysContainer label.agy-radio-card {
    margin: 0 !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    width: 180px !important;
    height: 135px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-align: center !important;
    box-sizing: border-box !important;
    position: relative !important;
    padding: 12px !important;
}

/* Hover and Active States */
#paymentGatewaysContainer label.agy-radio-card:hover {
    border-color: #705ceb !important; /* Theme purple hover */
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

#paymentGatewaysContainer label.agy-radio-card.agy-radio-active {
    border: 2px solid #705ceb !important; /* Exact theme purple border */
    box-shadow: 0 4px 15px rgba(112, 92, 235, 0.15) !important;
    background: rgba(112, 92, 235, 0.02) !important;
}

/* Hide the default radio circle completely */
#paymentGatewaysContainer label.agy-radio-card .iradio_square-blue,
#paymentGatewaysContainer label.agy-radio-card input[type="radio"] {
    display: none !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

/* Icon and Text Styling */
#paymentGatewaysContainer label.agy-radio-card .payment-icon {
    font-size: 2rem !important;
    color: #1e293b !important;
    margin-bottom: 8px !important;
    display: block !important;
}

#paymentGatewaysContainer label.agy-radio-card.agy-radio-active .payment-icon {
    color: #705ceb !important; /* Theme purple when active */
}

#paymentGatewaysContainer label.agy-radio-card .payment-icon-img {
    width: 32px !important;
    height: 32px !important;
    margin-bottom: 8px !important;
    display: block !important;
}

#paymentGatewaysContainer label.agy-radio-card .payment-text {
    color: #0f172a !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    display: block !important;
    line-height: 1.2 !important;
}

/* Total Due Badge */
#frmCheckout #totalDueToday {
    background: rgba(112, 92, 235, 0.06) !important;
    border: 1px dashed rgba(112, 92, 235, 0.3) !important;
    border-radius: 8px !important;
    color: #15095e !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    padding: 15px !important;
    max-width: 450px !important;
    margin: 0 auto 25px auto !important;
    display: block !important;
}

/* Sub-headings */
#frmCheckout .sub-heading {
    border-bottom: 1px solid #e2e8f0 !important;
    margin-top: 35px !important;
    margin-bottom: 25px !important;
    padding-bottom: 10px !important;
}
#frmCheckout .sub-heading .primary-bg-color {
    display: inline-block !important;
    background: transparent !important;
    color: #15095e !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    padding: 5px 0px 5px 12px !important;
    border-left: 5px solid #705ceb !important;
    line-height: 1.2 !important;
}

/* Inputs */
#frmCheckout textarea, 
#frmCheckout input[type="text"], 
#frmCheckout input[type="email"], 
#frmCheckout input[type="tel"], 
#frmCheckout select {
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
    padding: 12px 15px !important;
}
#frmCheckout textarea[name="notes"] {
    width: 100% !important;
    max-width: 520px !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
#frmCheckout textarea:focus, 
#frmCheckout input:focus, 
#frmCheckout select:focus {
    border-color: #705ceb !important;
    box-shadow: 0 0 0 3px rgba(112, 92, 235, 0.1) !important;
}

/* Complete Order Button */
#frmCheckout > .text-center {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}
#frmCheckout #btnCompleteOrder {
    background: linear-gradient(135deg, #705ceb, #5d4ccb) !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 6px 15px rgba(112, 92, 235, 0.25) !important;
    color: #fff !important;
    padding: 16px 40px !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    margin-top: 25px !important;
    width: auto !important;
    max-width: 100% !important;
    letter-spacing: 0.5px !important;
    display: inline-block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
#frmCheckout #btnCompleteOrder:hover {
    background: linear-gradient(135deg, #5d4ccb, #4b3d99) !important;
    box-shadow: 0 8px 20px rgba(112, 92, 235, 0.35) !important;
}

/* Utils */
#frmCheckout .recaptcha-container {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 15px 0 !important;
}
#frmCheckout textarea[name="g-recaptcha-response"],
#frmCheckout .g-recaptcha-response {
    display: none !important;
    height: 0 !important;
    opacity: 0 !important;
}
#frmCheckout .alert:empty,
#frmCheckout .alert-danger[style*="display: none"] {
    display: none !important;
}