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

    ** 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 --- */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    background-color: #f3f6fb !important;
    color: #475569 !important;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', sans-serif !important;
    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: 19px 19px 0 0;
    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: 20px;
    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: 56px;
    height: 56px;
    background-color: rgba(112, 92, 235, 0.1);
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #705ceb;
    font-size: 22px;
    margin-bottom: 15px;
}

.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: 10px !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: 10px !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: 10px !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;
    min-height: 100vh;
    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;
    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 20px;
    border-bottom: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sidebar-logo img {
    max-height: 40px;
    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 page --- */
.portal-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background-color: #f3f6fb;
}

/* --- 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 {
    background: none !important;
    border: none !important;
    font-size: 18px;
    color: #475569 !important;
    padding: 8px !important;
    margin-right: 15px;
    box-shadow: none !important;
}

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

.search-input-wrapper {
    position: relative;
    width: 100%;
}

.search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 14px;
}

.header-search-input {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    padding: 8px 16px 8px 38px !important;
    font-size: 13.5px !important;
    height: 38px !important;
    color: #1e293b !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}

.header-search-input:focus {
    background-color: #ffffff !important;
    border-color: #705ceb !important;
}

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

/* Util buttons (Cart & Notifications) */
.header-util-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #64748b !important;
    font-size: 16px;
    margin-right: 15px;
    position: relative;
    cursor: pointer;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.header-util-btn:hover {
    background-color: #f1f5f9;
    color: #15095e !important;
}

.bell-badge {
    position: absolute;
    top: 9px;
    right: 9px;
    width: 8px;
    height: 8px;
    background-color: #ef4444;
    border-radius: 50%;
    border: 2px solid #ffffff;
}

/* Client Alerts dropdown */
.client-alerts-dropdown {
    width: 320px !important;
    padding: 8px 0 !important;
    border-radius: 12px !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;
    align-items: center;
    text-decoration: none !important;
    padding: 4px;
    border-radius: 30px;
    transition: background-color 0.2s ease;
}

.profile-trigger:hover {
    background-color: #f8fafc;
}

.profile-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: rgba(112, 92, 235, 0.1);
    color: #705ceb;
    font-weight: 700;
    font-size: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    flex-shrink: 0;
}

.profile-info-text {
    display: flex;
    flex-direction: column;
    text-align: left;
    margin-right: 8px;
}

.user-greeting {
    font-size: 13.5px;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.25;
}

.user-company {
    font-size: 11px;
    color: #64748b;
}

.profile-dropdown .caret {
    color: #64748b;
}

/* --- 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: 20px;
    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%;
}

.visual-shield {
    position: absolute;
    right: 30px;
    top: 5px;
    width: 76px;
    height: 90px;
    background: linear-gradient(135deg, rgba(112, 92, 235, 0.16) 0%, rgba(112, 92, 235, 0.04) 100%);
    border: 1px solid rgba(112, 92, 235, 0.25);
    border-radius: 12px 12px 35px 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #705ceb;
    font-size: 38px;
    box-shadow: 0 8px 24px rgba(112, 92, 235, 0.1);
    animation: floatShield 4s ease-in-out infinite;
}

.visual-checkmark {
    position: absolute;
    right: -6px;
    bottom: 8px;
    width: 26px;
    height: 26px;
    background-color: #10b981;
    border: 3px solid #ffffff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    font-size: 9px;
    box-shadow: 0 4px 8px rgba(16, 185, 129, 0.25);
}

.visual-servers {
    position: absolute;
    left: 20px;
    top: 25px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.server-line {
    width: 130px;
    height: 12px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    position: relative;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.01);
}

.server-line::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 3px;
    width: 4px;
    height: 4px;
    background-color: #10b981;
    border-radius: 50%;
}

.server-line.s2::after { background-color: #705ceb; }
.server-line.s3::after { background-color: #cbd5e1; }

@keyframes floatShield {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-6px) rotate(2deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}

/* --- 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: 16px !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: 12px;
    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;
    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: 12px !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: 10px !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-sidebar {
        position: fixed;
        left: -260px;
        top: 0;
        bottom: 0;
        height: 100vh;
    }
    
    .portal-sidebar.active {
        left: 0;
    }
    
    .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;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 15px;
    z-index: 20 !important;
    pointer-events: none !important;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    line-height: 1;
}

/* 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,
#registration select.field {
    height: 50px !important;
    background-color: #f1f5f9 !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 10px !important;
    padding-left: 46px !important;
    padding-right: 16px !important;
    font-size: 14px !important;
    color: #1e293b !important;
    box-shadow: none !important;
    transition: all 0.2s ease-in-out !important;
    width: 100%;
}

#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;
}

/* 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: 12px;
    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: 12px;
    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: 10px !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 {
    background-color: #705ceb !important;
    border: none !important;
    color: #ffffff !important;
    height: 50px !important;
    border-radius: 10px !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 {
    background-color: #5d69d9 !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(112, 92, 235, 0.35) !important;
}

.login-card form .btn-default {
    height: 50px !important;
    border-radius: 10px !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: 16px;
    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: 12px;
    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: 10px !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: 10px !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,
#registration .bootstrap-select > .btn {
    height: 48px !important;
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !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 .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: 10px !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: 10px !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: 16px !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;
}

.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: 12px !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: 12px !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;
}

/* --- WHMCS Store Product Cards Customization --- */
#order-standard_cart .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 .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,
#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,
#order-standard_cart .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 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-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 a.btn-order-now,
#order-standard_cart .product .btn-signup,
#order-standard_cart .product a.btn-signup,
#order-standard_cart .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 a.btn-order-now:hover,
#order-standard_cart .product .btn-signup:hover,
#order-standard_cart .product a.btn-signup:hover,
#order-standard_cart .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 matching vertical card */
#order-standard_cart .sidebar .panel[menuItemName*="Categories"] {
    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;
    margin-bottom: 16px !important;
    overflow: hidden !important;
}

/* Restore Categories panel heading title */
#order-standard_cart .sidebar .panel[menuItemName*="Categories"] .panel-heading {
    display: block !important;
    background-color: #ffffff !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 14px 20px !important;
}

#order-standard_cart .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: 14px !important;
    text-decoration: none !important;
}

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

/* Restore Categories list-group vertical stack items */
#order-standard_cart .sidebar .panel[menuItemName*="Categories"] .list-group {
    display: block !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

#order-standard_cart .sidebar .panel[menuItemName*="Categories"] .list-group-item {
    border: none !important;
    border-bottom: 1px solid #f8fafc !important;
    border-radius: 0 !important;
    padding: 12px 20px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #475569 !important;
    background-color: #ffffff !important;
    transition: all 0.2s ease !important;
    width: 100% !important;
    text-align: left !important;
    display: block !important;
}

#order-standard_cart .sidebar .panel[menuItemName*="Categories"] .list-group-item:last-child {
    border-bottom: none !important;
}

#order-standard_cart .sidebar .panel[menuItemName*="Categories"] a.list-group-item:hover {
    background-color: #f8fafc !important;
    color: #705ceb !important;
    padding-left: 24px !important; /* Slide right effect on hover */
    border-color: transparent !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:hover,
#order-standard_cart .sidebar .panel[menuItemName*="Categories"] a.list-group-item.active:focus {
    background-color: rgba(112, 92, 235, 0.06) !important;
    color: #705ceb !important;
    font-weight: 600 !important;
    border-left: 3px solid #705ceb !important;
    padding-left: 24px !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 #products {
    display: block !important;
}

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

.header-util-btn.cart-btn:hover {
    background-color: rgba(112, 92, 235, 0.08) !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*="Social Media"],
#order-standard_cart .sidebar .panel:has(.fa-plus),
#order-standard_cart .sidebar .panel:has(.fa-thumbs-up),
#order-standard_cart .sidebar .panel:has(a[href*="action=viewcart"]) {
    display: none !important;
}

/* Force Categories panel to permanently pop down (expand) and override JavaScript hide actions */
#order-standard_cart .sidebar .panel[menuItemName*="Categories"] .list-group,
#order-standard_cart .sidebar .panel[menuItemName*="Categories"] .panel-body,
#order-standard_cart .sidebar .panel[menuItemName*="Categories"] .panel-collapse,
#order-standard_cart .sidebar .panel[menuItemName*="Categories"] .collapse {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
}

#order-standard_cart .sidebar .panel[menuItemName*="Categories"] .panel-heading a {
    pointer-events: none !important;
    cursor: default !important;
}

#order-standard_cart .sidebar .panel[menuItemName*="Categories"] .panel-heading .fa-chevron-up,
#order-standard_cart .sidebar .panel[menuItemName*="Categories"] .panel-heading .fa-chevron-down,
#order-standard_cart .sidebar .panel[menuItemName*="Categories"] .panel-heading .caret {
    display: none !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 (Square Card Layout) --- */
#tableTicketsList_wrapper .table-container,
#tableTicketsList_wrapper,
.table-container:has(#tableTicketsList) {
    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;
}

/* Tickets Table styling overrides */
#tableTicketsList {
    border-collapse: collapse !important;
    width: 100% !important;
    border-radius: 0 !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: 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;
}

/* 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: 6px !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 .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: 6px !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;
}

/* --- 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,
#order-standard_cart .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*="Social Media"],
#order-standard_cart .sidebar .panel:has(.fa-plus),
#order-standard_cart .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-details,
#order-standard_cart .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,
.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 {
    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-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-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 {
    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 #order-standard_cart .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 #order-standard_cart .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;
}