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

    ** WHMCS Six Template Custom Stylesheet **
    - Native WHMCS Font Sizes (No custom font-size overrides)
    - Clean White Theme (#ffffff) & Royal Blue Accent (#2563eb)
    - Pastel Badges, Rounded Cards & Montserrat Font Family

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

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

/* --- 1. Global Reset & Font Family --- */
html,
body,
.navbar-main,
button,
input,
select,
textarea,
a,
p,
span,
h1,
h2,
h3,
h4,
h5,
h6,
.btn,
.label,
.table {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

body {
    color: #334155 !important;
    background-color: #ffffff !important;
    -webkit-font-smoothing: antialiased;
}

/* Headings Colors */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #020617 !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em;
}

/* Links */
a {
    color: #2563eb;
    transition: all 0.2s ease;
}

a:hover {
    color: #1d4ed8;
    text-decoration: none;
}

/* Global Outline & Focus Ring Reset */
a,
button,
input,
select,
textarea,
.btn,
.list-group-item,
.panel,
.panel-heading,
.panel-body,
.panel-footer,
.tile,
.tile-card,
*:focus,
*:active,
*:focus-visible,
a:focus,
a:active,
a:focus-visible,
.list-group-item:focus,
.list-group-item:active,
.list-group-item:focus-visible,
.panel-body a:focus,
.panel-body a:active,
.panel-body div:focus,
.panel-body div:active {
    outline: none !important;
    outline-style: none !important;
    outline-width: 0 !important;
    -webkit-tap-highlight-color: transparent !important;
}

.list-group-item,
.list-group-item:focus,
.list-group-item:active,
.list-group-item:focus-visible {
    box-shadow: none !important;
}

/* --- 2. Top Header & Brand Logo --- */
section#header {
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 16px 0 !important;
}

section#header .logo-text,
section#header .logo {
    font-weight: 900 !important;
    color: #020617 !important;
    letter-spacing: -0.03em;
    text-decoration: none !important;
}

section#header .logo-text span,
section#header .logo span {
    color: #2563eb !important;
}

ul.top-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
}

ul.top-nav>li>a {
    color: #334155 !important;
    font-weight: 700 !important;
    padding: 8px 16px !important;
    border-radius: 9999px !important;
}

ul.top-nav>li>a:hover {
    background: #eff6ff !important;
    color: #2563eb !important;
}

/* View Cart / Client Area Primary Pill Button */
ul.top-nav>li.primary-action>a.btn {
    background: #2563eb !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-radius: 9999px !important;
    padding: 10px 22px !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25) !important;
    border: none !important;
}

ul.top-nav>li.primary-action>a.btn:hover {
    background: #1d4ed8 !important;
    color: #ffffff !important;
    box-shadow: 0 8px 22px rgba(37, 99, 235, 0.35) !important;
    transform: translateY(-2px);
}

/* Logged-In Account / Profile Pill Button */
.navbar-main li.account,
.navbar-main ul.nav>li.account,
.navbar-main ul.navbar-right>li.account,
.navbar-main ul.nav>li[menuitemname="Account"],
.navbar-main ul.nav>li[menuitemname="User Account"] {
    background: transparent !important;
}

.navbar-main li.account>a,
.navbar-main ul.nav>li.account>a,
.navbar-main ul.navbar-right>li.account>a,
.navbar-main ul.nav>li[menuitemname="Account"]>a,
.navbar-main ul.nav>li[menuitemname="User Account"]>a {
    color: #020617 !important;
    font-weight: 700 !important;
    padding: 8px 14px !important;
    border-radius: 9999px !important;
    white-space: nowrap !important;
    border: 1px solid transparent !important;
    box-sizing: border-box !important;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}

.navbar-main li.account>a:hover,
.navbar-main li.account>a:focus,
.navbar-main li.account.open>a,
.navbar-main li.account.open>a:hover,
.navbar-main li.account.open>a:focus,
.navbar-main ul.nav>li.account.open>a,
.navbar-main ul.nav>li[menuitemname="Account"].open>a,
.navbar-main ul.nav>li[menuitemname="User Account"].open>a {
    color: #2563eb !important;
    background-color: #ffffff !important;
    background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%) !important;
    border: 1px solid #bbf7d0 !important;
}

.navbar-main li.account>a i,
.navbar-main li.account.open>a i,
.navbar-main ul.nav>li[menuitemname="Account"].open>a i,
.navbar-main ul.nav>li[menuitemname="Account"]>a i {
    color: #2563eb !important;
}

/* --- 3. Main Navigation Bar --- */
.navbar-main {
    background: #ffffff !important;
    border-top: 1px solid #f1f5f9 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.02) !important;
    margin-bottom: 0 !important;
    padding: 6px 0 !important;
}

/* DESKTOP VIEW (Screen >= 768px): Single Row Flex Alignment */
@media (min-width: 768px) {
    .navbar-main .container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
    }

    .navbar-main .navbar-collapse {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        box-shadow: none !important;
        float: none !important;
    }

    .navbar-main ul.nav,
    .navbar-main ul.navbar-nav,
    .navbar-main ul.navbar-right {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 4px !important;
    }

    .navbar-main ul.nav>li,
    .navbar-main ul.navbar-nav>li,
    .navbar-main ul.navbar-right>li {
        float: none !important;
        display: inline-block !important;
        white-space: nowrap !important;
        margin: 0 !important;
    }

    .navbar-main ul.nav>li>a,
    .navbar-main ul.navbar-nav>li>a,
    .navbar-main ul.navbar-right>li>a {
        color: #020617 !important;
        font-weight: 700 !important;
        padding: 8px 14px !important;
        border-radius: 9999px !important;
        white-space: nowrap !important;
        border: 1px solid transparent !important;
        /* Reserve 1px border so hover never shifts layout */
        box-sizing: border-box !important;
        transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
    }
}

/* UNIVERSAL OVERRIDE FOR ALL VIEWPORTS (Desktop & Mobile): NO DARK NAVY (#043d5f) ON ACTIVE/OPEN */
.navbar-main .navbar-nav>.active>a,
.navbar-main .navbar-nav>.active>a:focus,
.navbar-main .navbar-nav>.active>a:hover,
.navbar-main .navbar-nav>.open>a,
.navbar-main .navbar-nav>.open>a:focus,
.navbar-main .navbar-nav>.open>a:hover,
.navbar-main .navbar-nav>li>a:focus,
.navbar-main .navbar-nav>li>a:hover,
.navbar-main ul.nav>li>a:hover,
.navbar-main ul.nav>li>a:focus,
.navbar-main ul.nav>.active>a,
.navbar-main ul.nav>.open>a,
.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:hover,
.navbar-default .navbar-nav>.open>a:focus,
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
    color: #2563eb !important;
    background-color: #ffffff !important;
    background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%) !important;
    border: 1px solid #bbf7d0 !important;
}

.navbar-main .navbar-nav>.open>a i,
.navbar-main .navbar-nav>.open>a:hover i,
.navbar-main .navbar-nav>.open>a:focus i,
.navbar-main .navbar-nav>.active>a i,
.navbar-main .navbar-nav>li>a:hover i,
.navbar-main .navbar-nav>li>a:focus i,
.navbar-main ul.nav>.open>a i,
.navbar-main ul.nav>.open>a:hover i,
.navbar-main ul.nav>.open>a:focus i,
.navbar-default .navbar-nav>.open>a i,
.navbar-default .navbar-nav>.open>a:hover i,
.navbar-default .navbar-nav>.open>a:focus i {
    color: #2563eb !important;
}

/* MOBILE VIEW (Screen < 768px): Vertical Dropdown */
@media (max-width: 767px) {
    section#header {
        padding: 12px 0 !important;
    }

    ul.top-nav {
        margin-top: 10px !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        justify-content: flex-end !important;
    }

    ul.top-nav>li.primary-action>a.btn {
        padding: 8px 16px !important;
    }

    .navbar-main .navbar-header {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        width: 100% !important;
        padding: 4px 15px !important;
        float: none !important;
    }

    .navbar-main .navbar-toggle {
        background: #eff6ff !important;
        border: 1.5px solid #bfdbfe !important;
        border-radius: 10px !important;
        margin: 0 !important;
        padding: 8px 12px !important;
        display: block !important;
    }

    .navbar-main .navbar-toggle .icon-bar {
        background-color: #2563eb !important;
        height: 2px !important;
        width: 22px !important;
    }

    .navbar-main .navbar-collapse {
        display: block !important;
        width: 100% !important;
        border-top: 1px solid #e2e8f0 !important;
        padding: 10px 15px !important;
        background: #ffffff !important;
    }

    .navbar-main .navbar-collapse.collapse:not(.in) {
        display: none !important;
    }

    .navbar-main ul.nav,
    .navbar-main ul.navbar-nav,
    .navbar-main ul.navbar-right {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 6px !important;
        float: none !important;
    }

    .navbar-main ul.nav>li,
    .navbar-main ul.navbar-nav>li,
    .navbar-main ul.navbar-right>li {
        width: 100% !important;
        display: block !important;
        float: none !important;
    }

    .navbar-main ul.nav>li>a,
    .navbar-main ul.navbar-nav>li>a,
    .navbar-main ul.navbar-right>li>a {
        display: block !important;
        width: 100% !important;
        padding: 12px 16px !important;
        font-weight: 700 !important;
        border-radius: 10px !important;
        color: #020617 !important;
        border: 1px solid transparent !important;
    }
}

/* Dropdown Menus (Floating Card with 12px Top Spacing Gap) */
.navbar-main .dropdown-menu {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 18px !important;
    box-shadow: 0 16px 45px rgba(15, 23, 42, 0.12) !important;
    padding: 8px !important;
    margin-top: 12px !important;
    /* Elegant 12px Gap Below Active Menu Pill */
    min-width: 240px !important;
    /* Proper Card Width to prevent line wrap */
}

.navbar-main .navbar-right .dropdown-menu {
    right: 0 !important;
    left: auto !important;
}

.navbar-main .dropdown-menu>li>a {
    color: #020617 !important;
    font-weight: 600 !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
}

.navbar-main .dropdown-menu>li>a:hover,
.navbar-main .dropdown-menu>li>a:focus,
.navbar-main .dropdown-menu>.active>a {
    background: #eff6ff !important;
    color: #2563eb !important;
}

.navbar-main .dropdown-menu>li>a i.fa,
.navbar-main .dropdown-menu>li>a i.fas,
.navbar-main .dropdown-menu>li>a i.far,
.navbar-main .dropdown-menu>li>a i.fab {
    color: #2563eb !important;
    width: 20px !important;
    min-width: 20px !important;
    text-align: center !important;
    margin-right: 0 !important;
    flex-shrink: 0 !important;
}

/* --- 4. Home Hero Banner & Domain Search --- */
#home-banner,
section#home-banner {
    background: #ffffff !important;
    padding: 50px 0 40px 0 !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

#home-banner h2 {
    color: #020617 !important;
    font-weight: 900 !important;
    margin-bottom: 20px !important;
}

#home-banner .form-control {
    height: 52px !important;
    border-radius: 9999px 0 0 9999px !important;
    border: 2px solid #cbd5e1 !important;
    padding-left: 24px !important;
    background: #ffffff !important;
    color: #020617 !important;
}

#home-banner .form-control:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15) !important;
}

/* Search Button */
#home-banner .btn.search,
section#home-banner .btn.search {
    height: 52px !important;
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    border-radius: 0 9999px 9999px 0 !important;
    padding: 0 30px !important;
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.25) !important;
}

#home-banner .btn.search:hover {
    background: #1d4ed8 !important;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.35) !important;
}

/* Transfer Button */
#home-banner .btn.transfer,
section#home-banner .btn.transfer {
    height: 52px !important;
    background: #eff6ff !important;
    border: 2px solid #bfdbfe !important;
    color: #2563eb !important;
    font-weight: 800 !important;
    border-radius: 9999px !important;
    padding: 0 30px !important;
    margin-left: 10px !important;
}

#home-banner .btn.transfer:hover {
    background: #dbeafe !important;
    border-color: #93c5fd !important;
    color: #1d4ed8 !important;
    transform: translateY(-2px);
}

/* --- 5. Light Soft Action Bar --- */
.home-shortcuts,
section.home-shortcuts,
div.home-shortcuts {
    background: #f8fafc !important;
    padding: 30px 0 !important;
    border-top: 1px solid #e2e8f0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.home-shortcuts p,
.home-shortcuts h3,
.home-shortcuts span,
.home-shortcuts a {
    color: #020617 !important;
    font-weight: 700 !important;
}

.home-shortcuts .icon-link,
.home-shortcuts a.btn-action,
.home-shortcuts div[class*="col-"] a {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 18px !important;
    padding: 16px 20px !important;
    color: #020617 !important;
    font-weight: 700 !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.03) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.home-shortcuts .icon-link:hover,
.home-shortcuts a.btn-action:hover,
.home-shortcuts div[class*="col-"] a:hover {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #2563eb !important;
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.15) !important;
    transform: translateY(-3px);
}

.home-shortcuts i.fa,
.home-shortcuts i.fas {
    color: #2563eb !important;
}

/* --- 6. Light Soft Pastel Badges --- */
.label,
.badge {
    border-radius: 9999px !important;
    padding: 0.45rem 0.9rem !important;
    font-weight: 700 !important;
}

.label-primary,
.badge-primary {
    background: #eff6ff !important;
    color: #2563eb !important;
    border: 1px solid #bfdbfe !important;
}

.label-success,
.badge-success {
    background: #f0fdf4 !important;
    color: #16a34a !important;
    border: 1px solid #bbf7d0 !important;
}

.label-warning,
.badge-warning {
    background: #fefce8 !important;
    color: #d97706 !important;
    border: 1px solid #fef08a !important;
}

.label-info,
.badge-info {
    background: #faf5ff !important;
    color: #9333ea !important;
    border: 1px solid #e9d5ff !important;
}

.label-default {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
}

/* --- 7. News & Announcement Section --- */
.home-announcements,
.announcement-single {
    margin-top: 35px !important;
}

.home-announcements h2,
.home-announcements h3 {
    font-weight: 900 !important;
    color: #020617 !important;
    margin-bottom: 20px !important;
}

.announcement-single {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    padding: 26px !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03) !important;
    margin-bottom: 20px !important;
    transition: all 0.3s ease !important;
}

.announcement-single:hover {
    border-color: #bfdbfe !important;
    box-shadow: 0 12px 35px rgba(37, 99, 235, 0.08) !important;
    transform: translateY(-3px);
}

.announcement-single h3 a,
.announcement-single h4 a {
    color: #2563eb !important;
    font-weight: 800 !important;
}

/* --- 8. Light Footer --- */
footer,
#footer,
section#footer {
    background: #ffffff !important;
    color: #475569 !important;
    padding: 40px 0 30px 0 !important;
    border-top: 1px solid #e2e8f0 !important;
}

footer p,
#footer p {
    color: #64748b !important;
}

footer a,
#footer a {
    color: #2563eb !important;
    font-weight: 600 !important;
}

footer a:hover,
#footer a:hover {
    color: #1d4ed8 !important;
}

.back-to-top i {
    background-color: #eff6ff !important;
    color: #2563eb !important;
    border: 1px solid #bfdbfe !important;
    border-radius: 50% !important;
}

/* --- 9. Navigation Menu Icons Styling --- */
.navbar-main i.fa,
.navbar-main i.fas,
.navbar-main i.far,
.navbar-main i.fab,
ul.top-nav i.fa,
ul.top-nav i.fas {
    color: #020617 !important;
    margin-right: 8px !important;
    transition: all 0.25s ease !important;
}

.navbar-main li>a:hover>i.fa,
.navbar-main li>a:hover>i.fas,
.navbar-main li>a:hover>i.far,
.navbar-main li>a:hover>i.fab {
    color: #2563eb !important;
    transform: scale(1.2);
}

/* --- 10. Modern Login & Auth Form Styling --- */
body.auth-page {
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    background-color: #f8fafc !important;
    margin: 0 !important;
    padding: 30px 15px !important;
    box-sizing: border-box !important;
}

body.auth-page #main-body {
    width: 100% !important;
    padding: 0 !important;
    margin: auto 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

body.auth-page #main-body > .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.logincontainer {
    max-width: 540px !important;
    width: 100% !important;
    margin: 0 auto !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 24px !important;
    padding: 40px 36px !important;
    box-shadow: 0 16px 45px rgba(15, 23, 42, 0.08) !important;
}

.logincontainer .header-lined,
.logincontainer .page-header {
    border-bottom: 1px solid #f1f5f9 !important;
    padding-bottom: 15px !important;
    margin-bottom: 25px !important;
    text-align: center !important;
}

.logincontainer .header-lined h1,
.logincontainer .page-header h1 {
    font-weight: 900 !important;
    color: #020617 !important;
    margin-bottom: 6px !important;
}

.logincontainer .header-lined small,
.logincontainer .page-header small {
    color: #64748b !important;
    font-weight: 500 !important;
}

.login-form .form-group {
    margin-bottom: 20px !important;
}

.login-form label {
    font-weight: 700 !important;
    color: #020617 !important;
    margin-bottom: 8px !important;
    display: block !important;
}

.login-form .form-control {
    height: 50px !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 12px !important;
    padding: 12px 18px !important;
    font-weight: 600 !important;
    color: #020617 !important;
    background: #ffffff !important;
    transition: all 0.25s ease !important;
}

.login-form .form-control:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15) !important;
}

/* Remember Me + Forgot Password inline row */
.login-remember-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 22px !important;
    flex-wrap: nowrap !important;
}

/* Override Bootstrap 3 .checkbox block display inside flex row */
.login-remember-row .checkbox,
.login-remember-row>.checkbox {
    display: inline-block !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.login-remember-row .checkbox label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.login-forgot-link {
    color: #2563eb !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.login-forgot-link:hover {
    color: #1d4ed8 !important;
    text-decoration: underline !important;
}

/* Login Button Container */
.login-actions {
    margin-top: 4px !important;
}

/* Submit Button (Login & Password Reset Forms) */
.logincontainer input[type="submit"],
.logincontainer button[type="submit"],
.logincontainer .btn-primary {
    display: block !important;
    width: 100% !important;
    height: 52px !important;
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    border-radius: 9999px !important;
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.3) !important;
    margin-bottom: 0 !important;
    transition: all 0.3s ease !important;
}

.logincontainer input[type="submit"]:hover,
.logincontainer button[type="submit"]:hover,
.logincontainer .btn-primary:hover {
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
    color: #ffffff !important;
    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.4) !important;
    transform: translateY(-2px);
}

/* OR Divider — using inner line divs to avoid pseudo-element !important issues */
.login-or-divider {
    display: flex !important;
    align-items: center !important;
    margin: 26px 0 22px 0 !important;
    gap: 0 !important;
}

.login-or-divider .or-line {
    flex: 1 !important;
    height: 1.5px !important;
    background: #e2e8f0 !important;
    display: block !important;
}

.login-or-divider .or-text {
    color: #94a3b8 !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    padding: 0 16px !important;
    line-height: 1 !important;
}

/* Social Login Section */
.login-social-section {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
}

.login-social-section .social-signin-btns,
.login-social-section .providerPreLinking {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
}

/* --- 11. Registration Form Card & Field Styling --- */
#registration,
#containerNewUserSignup {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 24px !important;
    padding: 35px 30px !important;
    box-shadow: 0 16px 45px rgba(15, 23, 42, 0.06) !important;
    margin-bottom: 50px !important;
}

/* Remove WHMCS legacy sub-heading brackets ::before and ::after */
#registration .sub-heading::before,
#registration .sub-heading::after,
#containerNewUserSignup .sub-heading::before,
#containerNewUserSignup .sub-heading::after,
.sub-heading::before,
.sub-heading::after {
    display: none !important;
    content: "" !important;
    width: 0 !important;
    height: 0 !important;
}

#registration .sub-heading,
#containerNewUserSignup .sub-heading,
.sub-heading {
    background: #eff6ff !important;
    border-left: 4px solid #2563eb !important;
    border-radius: 10px !important;
    padding: 12px 18px !important;
    margin: 30px 0 20px 0 !important;
    text-align: left !important;
    box-shadow: none !important;
}

#registration .sub-heading span,
#containerNewUserSignup .sub-heading span,
.sub-heading span {
    color: #020617 !important;
    font-weight: 800 !important;
    background: transparent !important;
    padding: 0 !important;
}

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

#registration label:not(.field-icon),
#containerNewUserSignup label:not(.field-icon) {
    font-weight: 700 !important;
    color: #020617 !important;
    margin-bottom: 8px !important;
}

/* Input Fields with Prepended Icons */
#registration .form-control,
#registration .field,
#containerNewUserSignup .form-control,
#containerNewUserSignup .field {
    height: 48px !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 12px !important;
    padding: 10px 16px !important;
    font-weight: 600 !important;
    color: #020617 !important;
    background: #ffffff !important;
    transition: all 0.25s ease !important;
}

#registration .prepend-icon .field,
#containerNewUserSignup .prepend-icon .field {
    padding-left: 45px !important;
}

#registration .prepend-icon .field-icon,
#containerNewUserSignup .prepend-icon .field-icon {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    color: #2563eb !important;
    height: 48px !important;
    line-height: 48px !important;
    width: 44px !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 5 !important;
    pointer-events: none !important;
}

#registration .form-control:focus,
#registration .field:focus,
#containerNewUserSignup .form-control:focus,
#containerNewUserSignup .field:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15) !important;
}

/* Phone Input (intl-tel-input / iti) Flag & Dropdown Fix */
#registration .form-group:has(#inputPhone) .field-icon,
#containerNewUserSignup .form-group:has(#inputPhone) .field-icon,
.prepend-icon:has(#inputPhone) .field-icon,
.prepend-icon:has(input[name="phonenumber"]) .field-icon {
    display: none !important;
}

.intl-tel-input,
.iti {
    width: 100% !important;
    display: block !important;
    position: relative !important;
}

.intl-tel-input .selected-flag,
.iti__selected-flag {
    width: 95px !important;
    height: 100% !important;
    padding: 0 8px 0 12px !important;
    border-radius: 10px 0 0 10px !important;
    background: #f8fafc !important;
    border-right: 1px solid #e2e8f0 !important;
    z-index: 10 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
}

.intl-tel-input .selected-flag .iti-arrow,
.intl-tel-input .selected-flag .arrow,
.iti__arrow {
    margin-left: 6px !important;
}

/* Country List Dropdown Menu */
.intl-tel-input .country-list,
.iti__country-list {
    z-index: 99999 !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 45px rgba(15, 23, 42, 0.15) !important;
    max-height: 240px !important;
    overflow-y: auto !important;
    margin-top: 6px !important;
    padding: 6px 0 !important;
    width: 320px !important;
}

.intl-tel-input .country-list .country,
.iti__country {
    padding: 8px 14px !important;
    color: #020617 !important;
    font-weight: 600 !important;
}

.intl-tel-input .country-list .country:hover,
.intl-tel-input .country-list .country.highlight,
.iti__country:hover,
.iti__country--highlight {
    background-color: #eff6ff !important;
    color: #2563eb !important;
}

#registration #inputPhone,
#containerNewUserSignup #inputPhone,
#registration input[name="phonenumber"],
#containerNewUserSignup input[name="phonenumber"],
#inputPhone,
input[name="phonenumber"],
.intl-tel-input input,
.intl-tel-input input[type=tel],
.iti input,
.iti input[type=tel] {
    padding-left: 115px !important;
    /* 115px padding cleanly clears the 95px flag container */
    width: 100% !important;
    height: 48px !important;
    border-radius: 12px !important;
}

/* Mailing List Optin Card */
.marketing-email-optin,
#registration .marketing-email-optin {
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 22px 24px !important;
    margin: 25px 0 !important;
}

.marketing-email-optin h4,
.marketing-email-optin .h4 {
    color: #020617 !important;
    font-weight: 800 !important;
    margin-bottom: 8px !important;
}

/* Generate Password & Caps Buttons */
#btnGeneratePassword,
.btn-caps {
    background: #eff6ff !important;
    border: 1.5px solid #bfdbfe !important;
    color: #2563eb !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    padding: 8px 16px !important;
    transition: all 0.2s ease !important;
}

#btnGeneratePassword:hover,
.btn-caps:hover {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
}

/* Registration Submit Button */
#registration input[type="submit"],
#registration button[type="submit"],
#containerNewUserSignup input[type="submit"],
#containerNewUserSignup button[type="submit"],
#registration .btn-primary,
#containerNewUserSignup .btn-primary {
    display: block !important;
    width: 100% !important;
    height: 52px !important;
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    border-radius: 9999px !important;
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.3) !important;
    margin-top: 25px !important;
    margin-bottom: 15px !important;
    transition: all 0.3s ease !important;
}

#registration input[type="submit"]:hover,
#registration button[type="submit"]:hover,
#containerNewUserSignup input[type="submit"]:hover,
#containerNewUserSignup button[type="submit"]:hover,
#registration .btn-primary:hover,
#containerNewUserSignup .btn-primary:hover {
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
    color: #ffffff !important;
    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.4) !important;
    transform: translateY(-2px);
}

/* --- 12. Contact Us Form Card Styling --- */
.contact-card-container {
    max-width: 720px !important;
    margin: 40px auto 60px auto !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 24px !important;
    padding: 40px 35px !important;
    box-shadow: 0 16px 45px rgba(15, 23, 42, 0.06) !important;
}

.contact-form .form-group {
    margin-bottom: 22px !important;
    position: relative !important;
}

.contact-form label:not(.field-icon) {
    font-weight: 700 !important;
    color: #020617 !important;
    margin-bottom: 8px !important;
    display: block !important;
}

.contact-form .form-control {
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 12px !important;
    padding: 12px 18px !important;
    font-weight: 600 !important;
    color: #020617 !important;
    background: #ffffff !important;
    transition: all 0.25s ease !important;
}

.contact-form input.form-control {
    height: 50px !important;
}

.contact-form textarea.form-control {
    height: auto !important;
    padding-top: 14px !important;
}

.contact-form .prepend-icon .field {
    padding-left: 48px !important;
}

.contact-form .prepend-icon .field-icon {
    position: absolute !important;
    left: 0 !important;
    top: 32px !important;
    color: #2563eb !important;
    height: 50px !important;
    width: 46px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 5 !important;
    pointer-events: none !important;
}

.contact-form .prepend-icon .field-icon.textarea-icon {
    top: 38px !important;
    height: 30px !important;
}

.contact-form .form-control:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15) !important;
}

.contact-form button[type="submit"] {
    display: block !important;
    width: 100% !important;
    height: 52px !important;
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    border-radius: 9999px !important;
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.3) !important;
    transition: all 0.3s ease !important;
}

.contact-form button[type="submit"]:hover {
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
    color: #ffffff !important;
    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.4) !important;
    transform: translateY(-2px);
}

/* --- 13. Modern Modal & Popup Styling --- */
.modal-backdrop,
.modal-backdrop.in {
    background-color: #0f172a !important;
    opacity: 0.65 !important;
}

.modal-dialog {
    margin-top: 60px !important;
}

.modal-content {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 24px !important;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25) !important;
    overflow: hidden !important;
    padding: 0 !important;
}

/* Modal Header */
.modal-header,
.modal-header.panel-heading {
    background: #ffffff !important;
    border-bottom: 1.5px solid #f1f5f9 !important;
    padding: 20px 28px !important;
    position: relative !important;
}

.modal-header .modal-title,
.modal-header h3,
.modal-header h4 {
    color: #020617 !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    margin: 0 !important;
}

.modal-header .close {
    font-weight: 700 !important;
    color: #64748b !important;
    opacity: 0.7 !important;
    transition: all 0.2s ease !important;
    margin-top: -4px !important;
}

.modal-header .close:hover {
    color: #ef4444 !important;
    opacity: 1 !important;
}

/* Modal Body */
.modal-body {
    padding: 28px !important;
    color: #334155 !important;
}

.modal-body label {
    font-weight: 700 !important;
    color: #020617 !important;
}

.modal-body .form-control {
    height: 48px !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 12px !important;
    padding: 10px 16px !important;
    font-weight: 600 !important;
    color: #020617 !important;
    background: #ffffff !important;
}

.modal-body .form-control:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15) !important;
}

/* Password Display Field in Modal */
#inputGeneratePassword {
    font-family: monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    background: #f8fafc !important;
    color: #1e293b !important;
}

/* Modal Buttons inside Body & Footer */
.modal-body .btn,
.modal-footer .btn {
    border-radius: 9999px !important;
    font-weight: 700 !important;
    padding: 10px 22px !important;
    transition: all 0.25s ease !important;
}

.modal-body .btn-default,
.modal-footer .btn-default {
    background: #eff6ff !important;
    border: 1.5px solid #bfdbfe !important;
    color: #2563eb !important;
}

.modal-body .btn-default:hover,
.modal-footer .btn-default:hover {
    background: #dbeafe !important;
    color: #1d4ed8 !important;
    border-color: #93c5fd !important;
}

.modal-footer .btn-primary,
.modal-body .btn-primary {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.3) !important;
}

.modal-footer .btn-primary:hover,
.modal-body .btn-primary:hover {
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
    color: #ffffff !important;
    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.4) !important;
}

/* Modal Footer Container */
.modal-footer {
    background: #f8fafc !important;
    border-top: 1.5px solid #f1f5f9 !important;
    padding: 18px 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
}

/* --- 14. Social Provider Button Styling --- */
.social-signin-btns,
.providerPreLinking {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
}

.btn-provider,
.btn-social,
.btn-provider-google,
[class*="btn-provider-"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 50px !important;
    padding: 10px 24px !important;
    border-radius: 9999px !important;
    border: 1.5px solid #cbd5e1 !important;
    background: #ffffff !important;
    color: #020617 !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05) !important;
    transition: all 0.25s ease !important;
    width: 100% !important;
    max-width: 400px !important;
    margin: 0 auto !important;
}

.btn-provider:hover,
.btn-social:hover,
.btn-provider-google:hover,
[class*="btn-provider-"]:hover {
    background: #f8fafc !important;
    border-color: #94a3b8 !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.1) !important;
    transform: translateY(-2px);
}

/* --- 15. Client Area & Cart Sidebar Panels --- */

/* Panel card wrapper (Client Area & Shopping Cart) */
/* ============================================================
   UNIVERSAL CLEAN SIDEBAR CARD STYLING FOR ALL PAGES & THEMES
   ============================================================ */

/* 1. Panel Container */
.cart-sidebar {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.panel-sidebar,
.panel.panel-sidebar,
.cart-sidebar .panel,
.cart-sidebar .card,
#order-standard_cart .cart-sidebar .card,
#order-standard_cart .cart-sidebar .card-sidebar,
#order-standard_cart .cart-sidebar .panel {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04) !important;
    overflow: hidden !important;
    margin-bottom: 20px !important;
}

/* 2. Panel Header: Text (order 0, Left), Header Icon (order 1, next to Text), Chevron (order 2, Far Right) */
.panel-sidebar>.panel-heading,
.cart-sidebar .panel-heading,
#order-standard_cart .cart-sidebar .panel-heading,
#order-standard_cart .cart-sidebar .card-header {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border-bottom: 1.5px solid #e2e8f0 !important;
    padding: 12px 16px !important;
    border-radius: 0 !important;
}

.panel-sidebar .panel-title,
.cart-sidebar .panel-title,
#order-standard_cart .cart-sidebar .panel-title {
    color: #0f172a !important;
    font-weight: 800 !important;
    display: flex !important;
    align-items: center !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    width: 100% !important;
    gap: 8px !important;
    margin: 0 !important;
}

.panel-sidebar .panel-title i:not(.panel-minimise):not(.fa-chevron-up):not(.fa-chevron-down),
.panel-sidebar .panel-title>.fas:not(.panel-minimise):not(.fa-chevron-up):not(.fa-chevron-down),
.panel-sidebar .panel-title>.far:not(.panel-minimise):not(.fa-chevron-up):not(.fa-chevron-down),
.panel-sidebar .panel-title>.fa:not(.panel-minimise):not(.fa-chevron-up):not(.fa-chevron-down),
#order-standard_cart .cart-sidebar .panel-title>i:first-child {
    color: #2563eb !important;
    order: 1 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.panel-sidebar .panel-title .panel-minimise,
.panel-sidebar .panel-title a.panel-minimise,
.panel-sidebar .panel-title .fa-chevron-up,
.panel-sidebar .panel-title .fa-chevron-down,
#order-standard_cart .cart-sidebar .panel-title .panel-minimise,
#order-standard_cart .cart-sidebar .panel-title .card-minimise {
    order: 2 !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    color: #64748b !important;
    float: none !important;
}

/* 3. Panel List Items: Clean Flexbox Layout with Far-Right Alignment */
.panel-sidebar .list-group .list-group-item,
.panel-sidebar a.list-group-item,
.panel-sidebar .list-group-item,
.cart-sidebar .list-group-item,
#order-standard_cart .cart-sidebar .list-group-item {
    border: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 12px 16px !important;
    background: #ffffff !important;
    color: #334155 !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transition: all 0.18s ease !important;
}

.panel-sidebar .list-group .list-group-item:last-child,
.cart-sidebar .list-group-item:last-child,
#order-standard_cart .cart-sidebar .list-group-item:last-child {
    border-bottom: none !important;
}

.panel-sidebar .list-group .list-group-item:hover,
.cart-sidebar .list-group-item:hover,
#order-standard_cart .cart-sidebar .list-group-item:hover {
    background: #f0f9ff !important;
    color: #2563eb !important;
}

.panel-sidebar .list-group .list-group-item.active,
.cart-sidebar .list-group-item.active,
#order-standard_cart .cart-sidebar .list-group-item.active {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
    font-weight: 800 !important;
}

.panel-sidebar .list-group .list-group-item.active:hover,
.cart-sidebar .list-group-item.active:hover,
#order-standard_cart .cart-sidebar .list-group-item.active:hover {
    background: #1d4ed8 !important;
}

/* NO pseudo-elements */
.panel-sidebar .list-group-item::before,
.panel-sidebar .list-group-item::after,
.cart-sidebar .list-group-item::before,
.cart-sidebar .list-group-item::after {
    display: none !important;
    content: "" !important;
}

/* Icons in list items -> Pushed cleanly to far right edge */
.panel-sidebar .list-group .list-group-item .sidebar-menu-item-icon,
.panel-sidebar .list-group-item>i,
.panel-sidebar .list-group-item>.fas,
.panel-sidebar .list-group-item>.far,
.panel-sidebar .list-group-item>.fa,
.panel-sidebar .list-group-item i,
.cart-sidebar .list-group-item i,
#order-standard_cart .cart-sidebar .list-group-item i {
    position: static !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    float: none !important;
    display: inline-block !important;
    width: 16px !important;
    text-align: center !important;
    color: #2563eb !important;
    flex-shrink: 0 !important;
    order: 10 !important;
}

.panel-sidebar .list-group-item:hover>i,
.panel-sidebar .list-group-item:hover>.fas,
.panel-sidebar .list-group-item:hover>.far,
.panel-sidebar .list-group-item:hover>.fa,
.panel-sidebar .list-group-item:hover .fas,
.panel-sidebar .list-group-item:hover .far,
.panel-sidebar .list-group-item:hover .fa,
.cart-sidebar .list-group-item:hover i,
.cart-sidebar .list-group-item:hover .fas,
.cart-sidebar .list-group-item:hover .far,
.cart-sidebar .list-group-item:hover .fa,
#order-standard_cart .cart-sidebar .list-group-item:hover i,
#order-standard_cart .cart-sidebar .list-group-item:hover .fas,
#order-standard_cart .cart-sidebar .list-group-item:hover .far,
#order-standard_cart .cart-sidebar .list-group-item:hover .fa {
    color: #2563eb !important;
}

.panel-sidebar .list-group-item.active i,
.panel-sidebar .list-group-item.active>i,
.panel-sidebar .list-group-item.active>.fas,
.panel-sidebar .list-group-item.active>.far,
.panel-sidebar .list-group-item.active>.fa,
.panel-sidebar .list-group-item.active .fas,
.panel-sidebar .list-group-item.active .far,
.panel-sidebar .list-group-item.active .fa,
.panel-sidebar .list-group-item.active:hover i,
.panel-sidebar .list-group-item.active:hover>i,
.panel-sidebar .list-group-item.active:hover>.fas,
.panel-sidebar .list-group-item.active:hover>.far,
.panel-sidebar .list-group-item.active:hover>.fa,
.panel-sidebar .list-group-item.active:hover .fas,
.panel-sidebar .list-group-item.active:hover .far,
.panel-sidebar .list-group-item.active:hover .fa,
.cart-sidebar .list-group-item.active i,
.cart-sidebar .list-group-item.active .fas,
.cart-sidebar .list-group-item.active .far,
.cart-sidebar .list-group-item.active .fa,
.cart-sidebar .list-group-item.active:hover i,
.cart-sidebar .list-group-item.active:hover .fas,
.cart-sidebar .list-group-item.active:hover .far,
.cart-sidebar .list-group-item.active:hover .fa,
#order-standard_cart .cart-sidebar .list-group-item.active i,
#order-standard_cart .cart-sidebar .list-group-item.active .fas,
#order-standard_cart .cart-sidebar .list-group-item.active .far,
#order-standard_cart .cart-sidebar .list-group-item.active .fa,
#order-standard_cart .cart-sidebar .list-group-item.active:hover i,
#order-standard_cart .cart-sidebar .list-group-item.active:hover .fas,
#order-standard_cart .cart-sidebar .list-group-item.active:hover .far,
#order-standard_cart .cart-sidebar .list-group-item.active:hover .fa {
    color: #ffffff !important;
}

/* Row Badges & Values */
.panel-sidebar .list-group-item .pull-right {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    float: none !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.panel-sidebar .list-group-item .badge,
.panel-sidebar .list-group-item>span.badge,
.cart-sidebar .list-group-item .badge,
#order-standard_cart .cart-sidebar .list-group-item .badge {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    float: none !important;
    background: #eff6ff !important;
    color: #2563eb !important;
    font-weight: 800 !important;
    padding: 3px 10px !important;
    border-radius: 9999px !important;
    display: inline-block !important;
}

.panel-sidebar .list-group-item.active .badge,
.cart-sidebar .list-group-item.active .badge,
#order-standard_cart .cart-sidebar .list-group-item.active .badge {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
}

/* Remove focus / click outline & box shadow */
.panel-sidebar .list-group .list-group-item:focus,
.panel-sidebar .list-group .list-group-item:active,
.panel-sidebar .list-group .list-group-item:focus-visible,
#order-standard_cart .cart-sidebar .list-group-item:focus,
#order-standard_cart .cart-sidebar .list-group-item:active,
#order-standard_cart .cart-sidebar .list-group-item:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* --- 16. Open / Submit Support Ticket Form Redesign --- */

/* Main Card Wrapper */
.ticket-submit-card {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 20px !important;
    padding: 36px 40px !important;
    box-shadow: 0 10px 36px rgba(15, 23, 42, 0.05) !important;
    margin-top: 10px !important;
    margin-bottom: 36px !important;
}

@media (max-width: 768px) {
    .ticket-submit-card {
        padding: 24px 20px !important;
        border-radius: 16px !important;
    }
}

/* Field Labels */
.ticket-submit-card label {
    font-weight: 700 !important;
    color: #020617 !important;
    margin-bottom: 8px !important;
}

/* Form Controls (Inputs, Selects) */
.ticket-submit-card .form-control {
    height: 48px !important;
    border-radius: 12px !important;
    border: 1.5px solid #cbd5e1 !important;
    background: #ffffff !important;
    color: #020617 !important;
    font-weight: 600 !important;
    padding: 0 16px !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
}

.ticket-submit-card .form-control:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12) !important;
}

.ticket-submit-card .form-control.disabled,
.ticket-submit-card .form-control[disabled] {
    background: #f8fafc !important;
    color: #64748b !important;
    border-color: #e2e8f0 !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
}

/* Textarea / Message */
.ticket-submit-card textarea.form-control {
    height: auto !important;
    min-height: 180px !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    line-height: 1.6 !important;
}

/* Markdown Editor Toolbar */
.ticket-submit-card .md-editor {
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    transition: border-color 0.2s ease !important;
}

.ticket-submit-card .md-editor.active,
.ticket-submit-card .md-editor:focus-within {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12) !important;
}

.ticket-submit-card .md-editor>.md-header {
    background: #f8fafc !important;
    border-bottom: 1.5px solid #e2e8f0 !important;
    padding: 8px 12px !important;
}

.ticket-submit-card .md-editor .btn-default,
.ticket-submit-card .md-editor .btn-group .btn {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
    border-radius: 8px !important;
    padding: 5px 10px !important;
    margin: 2px !important;
    transition: all 0.18s ease !important;
}

.ticket-submit-card .md-editor .btn-default:hover,
.ticket-submit-card .md-editor .btn-group .btn:hover {
    background: #eff6ff !important;
    color: #2563eb !important;
    border-color: #bfdbfe !important;
}

.ticket-submit-card .md-editor .btn-primary {
    background: #2563eb !important;
    border: 1px solid #2563eb !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
}

.ticket-submit-card .md-editor>textarea {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.ticket-submit-card .md-editor .md-footer {
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
    padding: 6px 14px !important;
    color: #94a3b8 !important;
}

/* Glyphicon to FontAwesome 5 Mapping for Markdown Toolbar */
.md-editor .glyphicon,
.md-editor [class^="glyphicon-"],
.md-editor [class*=" glyphicon-"] {
    font-family: "Font Awesome 5 Pro", "FontAwesome" !important;
    font-weight: 900 !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    display: inline-block !important;
}

.md-editor .glyphicon-bold::before {
    content: "\f032" !important;
}

.md-editor .glyphicon-italic::before {
    content: "\f033" !important;
}

.md-editor .glyphicon-heading::before,
.md-editor .glyphicon-header::before {
    content: "\f1dc" !important;
}

.md-editor .glyphicon-link::before {
    content: "\f0c1" !important;
}

.md-editor .glyphicon-picture::before {
    content: "\f03e" !important;
}

.md-editor .glyphicon-list::before {
    content: "\f0ca" !important;
}

.md-editor .glyphicon-th-list::before {
    content: "\f0cb" !important;
}

.md-editor .glyphicon-comment::before {
    content: "\f10d" !important;
}

.md-editor .glyphicon-share-alt::before,
.md-editor .glyphicon-console::before,
.md-editor .glyphicon-asterisk::before {
    content: "\f121" !important;
}

.md-editor .glyphicon-search::before {
    content: "\f002" !important;
}

.md-editor .glyphicon-fullscreen::before {
    content: "\f065" !important;
}

.md-editor .glyphicon-eye-open::before {
    content: "\f06e" !important;
}

.md-editor .glyphicon-question-sign::before {
    content: "\f059" !important;
}





/* Attachments Group Container */
.ticket-attachments-group {
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 22px 24px !important;
    margin-top: 26px !important;
    margin-bottom: 26px !important;
}

.ticket-attachments-group label {
    font-weight: 700 !important;
    color: #020617 !important;
    margin-bottom: 12px !important;
    display: block !important;
}

.ticket-attachments-group input[type="file"].form-control {
    height: 48px !important;
    padding: 9px 14px !important;
    background: #ffffff !important;
    border-radius: 10px !important;
}

.btn-add-more-file {
    height: 48px !important;
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #2563eb !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.btn-add-more-file:hover {
    background: #eff6ff !important;
    border-color: #2563eb !important;
    color: #1d4ed8 !important;
}

.ticket-attachments-message {
    color: #64748b !important;
    margin-top: 12px !important;
}

/* Captcha Container */
.ticket-captcha-container {
    margin: 24px 0 !important;
    padding: 16px !important;
    background: #f8fafc !important;
    border-radius: 14px !important;
    border: 1.5px solid #e2e8f0 !important;
    display: inline-block !important;
    width: 100% !important;
}

/* Action Buttons Row */
.ticket-actions-row {
    margin-top: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
}

.btn-submit-ticket {
    height: 52px !important;
    padding: 0 44px !important;
    background: #2563eb !important;
    border: none !important;
    border-radius: 9999px !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.3) !important;
    cursor: pointer !important;
}

.btn-submit-ticket:hover {
    background: #1d4ed8 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 30px rgba(37, 99, 235, 0.4) !important;
}

.btn-cancel-ticket {
    height: 52px !important;
    padding: 0 32px !important;
    background: #f1f5f9 !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 9999px !important;
    color: #475569 !important;
    font-weight: 700 !important;
    transition: all 0.25s ease !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.btn-cancel-ticket:hover {
    background: #e2e8f0 !important;
    color: #020617 !important;
    text-decoration: none !important;
}

/* --- 17. Client Area Dashboard Pastel Redesign --- */

/* Title & Breadcrumb Clean Up */
.header-lined {
    border-bottom: none !important;
    margin-bottom: 24px !important;
    padding-bottom: 0 !important;
}

.header-lined h1 {
    font-weight: 900 !important;
    color: #020617 !important;
    letter-spacing: -0.025em !important;
    margin-bottom: 4px !important;
}

/* --- Top Stat Tiles Grid --- */
.tiles {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 30px !important;
}

.tiles .row {
    margin-left: -10px !important;
    margin-right: -10px !important;
}

.tiles .tile {
    background: transparent !important;
    border: none !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin-bottom: 16px !important;
}

.tiles .tile-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 24px 26px !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-decoration: none !important;
    width: 100% !important;
    min-height: 100px !important;
    cursor: pointer !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

.tiles a,
.tiles .tile,
.tiles .tile-card,
.tiles .tile-card:focus,
.tiles .tile-card:active,
.tiles .tile-card:focus-visible,
.tiles a:focus,
.tiles a:active,
.tiles a:focus-visible {
    outline: none !important;
    outline-style: none !important;
    outline-width: 0 !important;
    -webkit-tap-highlight-color: transparent !important;
}

.tiles .tile-card:hover {
    transform: translateY(-5px) scale(1.02) !important;
    text-decoration: none !important;
}

.tiles .tile-card:hover .tile-icon i {
    transform: scale(1.18) rotate(-6deg) !important;
}

.tiles .tile-icon {
    width: 52px !important;
    height: 52px !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.tiles .tile-icon i {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.tiles .tile-details {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
}

.tiles .tile-stat {
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: -0.03em !important;
}

.tiles .tile-title {
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    margin-top: 5px !important;
}

/* 1. Services Tile - Pastel Blue */
.tiles .tile-blue {
    background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%) !important;
    border: 1.5px solid #bfdbfe !important;
}

.tiles .tile-blue .tile-icon {
    background: #dbeafe !important;
    color: #2563eb !important;
}

.tiles .tile-blue .tile-stat {
    color: #1e40af !important;
}

.tiles .tile-blue .tile-title {
    color: #2563eb !important;
}

.tiles .tile-blue:hover {
    border-color: #93c5fd !important;
    box-shadow: 0 14px 32px rgba(37, 99, 235, 0.16) !important;
}

/* 2. Domains Tile - Pastel Green */
.tiles .tile-green {
    background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%) !important;
    border: 1.5px solid #bbf7d0 !important;
}

.tiles .tile-green .tile-icon {
    background: #dcfce7 !important;
    color: #16a34a !important;
}

.tiles .tile-green .tile-stat {
    color: #15803d !important;
}

.tiles .tile-green .tile-title {
    color: #16a34a !important;
}

.tiles .tile-green:hover {
    border-color: #86efac !important;
    box-shadow: 0 14px 32px rgba(22, 163, 74, 0.16) !important;
}

/* 3. Tickets Tile - Pastel Red / Rose */
.tiles .tile-red {
    background: linear-gradient(135deg, #fff1f2 0%, #ffffff 100%) !important;
    border: 1.5px solid #fecdd3 !important;
}

.tiles .tile-red .tile-icon {
    background: #ffe4e6 !important;
    color: #e11d48 !important;
}

.tiles .tile-red .tile-stat {
    color: #be123c !important;
}

.tiles .tile-red .tile-title {
    color: #e11d48 !important;
}

.tiles .tile-red:hover {
    border-color: #fda4af !important;
    box-shadow: 0 14px 32px rgba(225, 29, 72, 0.16) !important;
}

/* 4. Invoices Tile - Pastel Yellow / Amber */
.tiles .tile-gold {
    background: linear-gradient(135deg, #fefce8 0%, #ffffff 100%) !important;
    border: 1.5px solid #fef08a !important;
}

.tiles .tile-gold .tile-icon {
    background: #fef3c7 !important;
    color: #d97706 !important;
}

.tiles .tile-gold .tile-stat {
    color: #b45309 !important;
}

.tiles .tile-gold .tile-title {
    color: #d97706 !important;
}

.tiles .tile-gold:hover {
    border-color: #fde047 !important;
    box-shadow: 0 14px 32px rgba(217, 119, 6, 0.16) !important;
}


/* --- Knowledgebase Search Bar --- */
.home-kb-search {
    margin-bottom: 30px !important;
}

.kb-search-input-wrapper {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
}

.kb-search-input-wrapper i {
    position: absolute !important;
    left: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #94a3b8 !important;
    pointer-events: none !important;
    z-index: 10 !important;
    margin: 0 !important;
    line-height: 1 !important;
}

.kb-search-input-wrapper .form-control {
    height: 54px !important;
    border-radius: 16px !important;
    border: 1.5px solid #cbd5e1 !important;
    background: #ffffff !important;
    padding-left: 52px !important;
    padding-right: 20px !important;
    font-weight: 600 !important;
    color: #020617 !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
    transition: all 0.2s ease !important;
    width: 100% !important;
}

.kb-search-input-wrapper .form-control:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12) !important;
}


/* --- Client Home Dashboard Panels --- */
.client-home-panels .panel {
    border-radius: 20px !important;
    overflow: hidden !important;
    margin-bottom: 24px !important;
    box-shadow: 0 6px 22px rgba(15, 23, 42, 0.05) !important;
    background: #ffffff !important;
    transition: all 0.25s ease !important;
}

.client-home-panels .panel-heading::before,
.client-home-panels .panel-heading::after {
    display: none !important;
    content: none !important;
}

.client-home-panels .panel-heading {
    border-radius: 0 !important;
    padding: 16px 22px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
}

.client-home-panels .panel-title-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    order: 1 !important;
}

.client-home-panels .panel-title-text {
    font-weight: 800 !important;
}

.client-home-panels .panel-action-wrapper {
    order: 2 !important;
    margin-left: auto !important;
}

.client-home-panels .btn-panel-action {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    border-radius: 9999px !important;
    font-weight: 800 !important;
    padding: 6px 16px !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

.client-home-panels .btn-panel-action:hover {
    transform: translateY(-1px) !important;
    text-decoration: none !important;
}

/* Panel Body & Footer */
.client-home-panels .panel-body {
    padding: 22px !important;
    color: #334155 !important;
    line-height: 1.6 !important;
}

.client-home-panels .panel-footer {
    background: #f8fafc !important;
    border-top: 1px solid #f1f5f9 !important;
    padding: 12px 22px !important;
    color: #64748b !important;
}

/* Orange / Gold Panel Theme (Active Products & Overdue Invoices) */
.client-home-panels .panel-accent-orange,
.client-home-panels .panel-accent-gold {
    border: 1.5px solid #fed7aa !important;
}

.client-home-panels .panel-accent-orange .panel-heading,
.client-home-panels .panel-accent-gold .panel-heading {
    background: linear-gradient(135deg, #fff7ed 0%, #ffffff 100%) !important;
    border-bottom: 1.5px solid #fed7aa !important;
}

.client-home-panels .panel-accent-orange .panel-title-text,
.client-home-panels .panel-accent-gold .panel-title-text {
    color: #c2410c !important;
}

.client-home-panels .panel-accent-orange .panel-title-wrapper i,
.client-home-panels .panel-accent-gold .panel-title-wrapper i {
    color: #ea580c !important;
}

.client-home-panels .panel-accent-orange .btn-panel-action,
.client-home-panels .panel-accent-gold .btn-panel-action {
    background: #ffedd5 !important;
    color: #c2410c !important;
    border: 1.5px solid #fdba74 !important;
}

.client-home-panels .panel-accent-orange .btn-panel-action:hover,
.client-home-panels .panel-accent-gold .btn-panel-action:hover {
    background: #fed7aa !important;
    color: #9a3412 !important;
}

/* Blue Panel Theme (Recent Support Tickets) */
.client-home-panels .panel-accent-blue {
    border: 1.5px solid #bfdbfe !important;
}

.client-home-panels .panel-accent-blue .panel-heading {
    background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%) !important;
    border-bottom: 1.5px solid #bfdbfe !important;
}

.client-home-panels .panel-accent-blue .panel-title-text {
    color: #1e40af !important;
}

.client-home-panels .panel-accent-blue .panel-title-wrapper i {
    color: #2563eb !important;
}

.client-home-panels .panel-accent-blue .btn-panel-action {
    background: #dbeafe !important;
    color: #1e40af !important;
    border: 1.5px solid #93c5fd !important;
}

.client-home-panels .panel-accent-blue .btn-panel-action:hover {
    background: #bfdbfe !important;
    color: #1e3a8a !important;
}

/* Green Panel Theme (Register a New Domain) */
.client-home-panels .panel-accent-green {
    border: 1.5px solid #bbf7d0 !important;
}

.client-home-panels .panel-accent-green .panel-heading {
    background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%) !important;
    border-bottom: 1.5px solid #bbf7d0 !important;
}

.client-home-panels .panel-accent-green .panel-title-text {
    color: #15803d !important;
}

.client-home-panels .panel-accent-green .panel-title-wrapper i {
    color: #16a34a !important;
}

.client-home-panels .panel-accent-green .btn-panel-action {
    background: #dcfce7 !important;
    color: #15803d !important;
    border: 1.5px solid #86efac !important;
}

.client-home-panels .panel-accent-green .btn-panel-action:hover {
    background: #bbf7d0 !important;
    color: #14532d !important;
}

/* Default / News Panel Theme */
.client-home-panels .panel-default {
    border: 1.5px solid #e2e8f0 !important;
}

.client-home-panels .panel-default .panel-heading {
    background: #f8fafc !important;
    border-bottom: 1.5px solid #e2e8f0 !important;
}

.client-home-panels .panel-default .panel-title-text {
    color: #020617 !important;
}

.client-home-panels .panel-default .btn-panel-action {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1.5px solid #cbd5e1 !important;
}

/* Client Home Panel Footer & Body Buttons Fix (Pay All, Add Funds, etc.) */
.client-home-panels .panel-footer,
.client-home-panels .panel-body {
    overflow: visible !important;
}

.client-home-panels .panel-footer .btn,
.client-home-panels .panel-body .btn,
.client-home-panels .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 9px 20px !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.3 !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    margin: 4px 6px 4px 0 !important;
    box-sizing: border-box !important;
}

.client-home-panels .panel-footer .btn i,
.client-home-panels .panel-body .btn i,
.client-home-panels .btn i {
    margin: 0 !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
}

/* Green Action Buttons (Pay All, Add Funds) */
.client-home-panels .btn-success,
.client-home-panels .btn-success.btn-sm,
.client-home-panels a.btn-success {
    background: #10b981 !important;
    color: #ffffff !important;
    border: 1.5px solid #10b981 !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25) !important;
}

.client-home-panels .btn-success:hover,
.client-home-panels a.btn-success:hover {
    background: #059669 !important;
    border-color: #059669 !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.35) !important;
}

/* Outline / Default Action Buttons (Add Funds) */
.client-home-panels .btn-default,
.client-home-panels .btn-default.btn-sm,
.client-home-panels a.btn-default {
    background: #ffffff !important;
    color: #1e293b !important;
    border: 1.5px solid #cbd5e1 !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04) !important;
}

.client-home-panels .btn-default:hover,
.client-home-panels a.btn-default:hover {
    background: #f8fafc !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08) !important;
}


/* --- Sidebar Panel Action Buttons Fix (Pay All, Add Funds, etc.) --- */
.panel-sidebar .panel-body,
.panel-sidebar .panel-footer,
.sidebar .panel-body,
.sidebar .panel-footer {
    overflow: visible !important;
}

.panel-sidebar .btn,
.panel-sidebar .btn-sm,
.panel-sidebar a.btn,
.sidebar .btn,
.sidebar .btn-sm,
.sidebar a.btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 8px 16px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.3 !important;
    width: auto !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    margin: 3px 4px 3px 0 !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.panel-sidebar .btn i,
.sidebar .btn i {
    margin: 0 !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
}

/* Green Buttons in Sidebar (Pay All, Add Funds) */
.panel-sidebar .btn-success,
.panel-sidebar a.btn-success,
.sidebar .btn-success,
.sidebar a.btn-success {
    background: #10b981 !important;
    color: #ffffff !important;
    border: 1.5px solid #10b981 !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2) !important;
}

.panel-sidebar .btn-success:hover,
.panel-sidebar a.btn-success:hover,
.sidebar .btn-success:hover,
.sidebar a.btn-success:hover {
    background: #059669 !important;
    border-color: #059669 !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}

/* Outline / Default Buttons in Sidebar (Add Funds) */
.panel-sidebar .btn-default,
.panel-sidebar a.btn-default,
.sidebar .btn-default,
.sidebar a.btn-default {
    background: #ffffff !important;
    color: #1e293b !important;
    border: 1.5px solid #cbd5e1 !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04) !important;
}

.panel-sidebar .btn-default:hover,
.panel-sidebar a.btn-default:hover,
.sidebar .btn-default:hover,
.sidebar a.btn-default:hover {
    background: #f8fafc !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08) !important;
}

/* Domain Search Register / Transfer Buttons in Panel */
#inputDomainRegister,
.panel-accent-green input[type="submit"],
.panel-accent-green .btn-primary {
    background: #dcfce7 !important;
    color: #15803d !important;
    border: 1.5px solid #86efac !important;
    border-radius: 12px !important;
    font-weight: 800 !important;
    padding: 8px 18px !important;
    height: 44px !important;
    transition: all 0.2s ease !important;
}

#inputDomainTransfer,
.panel-accent-green input[name="transfer"] {
    background: #ffffff !important;
    color: #475569 !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    padding: 8px 18px !important;
    height: 44px !important;
    transition: all 0.2s ease !important;
}


/* --- 18. DataTables & Client Area Table Redesign --- */

/* DataTables Outer Container Card */
.table-container,
.dataTables_wrapper {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 20px !important;
    box-shadow: 0 6px 22px rgba(15, 23, 42, 0.05) !important;
    overflow: hidden !important;
    margin-bottom: 30px !important;
    position: relative !important;
}

/* Top Header Control Bar (.listtable contains info & filter) */
.listtable {
    background: #f8fafc !important;
    border-bottom: 1.5px solid #e2e8f0 !important;
    padding: 0 !important;
    position: relative !important;
}

.listtable::before,
.listtable::after {
    content: "" !important;
    display: table !important;
    clear: both !important;
}

div.dataTables_info,
.dataTables_wrapper .dataTables_info,
.listtable>.dataTables_info {
    float: left !important;
    padding: 14px 22px !important;
    color: #475569 !important;
    font-weight: 600 !important;
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    height: 70px !important;
    line-height: 42px !important;
}

div.dataTables_filter,
.dataTables_wrapper .dataTables_filter,
.listtable>.dataTables_filter {
    float: right !important;
    padding: 14px 22px !important;
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    height: 70px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

div.dataTables_filter label,
.dataTables_wrapper .dataTables_filter label {
    margin: 0 !important;
    color: transparent !important;
    display: inline-flex !important;
    align-items: center !important;
}

div.dataTables_filter label::before,
.dataTables_wrapper .dataTables_filter label::before {
    display: none !important;
    content: none !important;
}

.dataTables_wrapper .dataTables_filter input,
.table-container .dataTables_filter input,
div.dataTables_filter input {
    height: 42px !important;
    width: 230px !important;
    border-radius: 9999px !important;
    border: 1.5px solid #cbd5e1 !important;
    padding-left: 42px !important;
    padding-right: 18px !important;
    background-color: #ffffff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z' /%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 14px center !important;
    background-size: 18px 18px !important;
    color: #020617 !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
    transition: all 0.22s ease !important;
    margin: 0 !important;
    outline: none !important;
}

.dataTables_wrapper .dataTables_filter input:focus,
.table-container .dataTables_filter input:focus,
div.dataTables_filter input:focus {
    width: 270px !important;
    border-color: #2563eb !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2.2' stroke='%232563eb'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z' /%3E%3C/svg%3E") !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12), 0 4px 14px rgba(37, 99, 235, 0.08) !important;
}

/* Table Element & Header Columns */
table.table-list,
.table-container table {
    margin-bottom: 0 !important;
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: none !important;
}

table.table-list th,
table.table-list thead th,
.table-container table th {
    background: #ffffff !important;
    color: #020617 !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    border-bottom: 1.5px solid #e2e8f0 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    padding: 16px 22px !important;
    vertical-align: middle !important;
}

/* Remove green indicator lines above table headers */
table.table-list th::before,
table.table-list th::after,
table.table-list thead::before {
    display: none !important;
    content: none !important;
}

/* Table Body Cells */
table.table-list td,
.table-container table td {
    padding: 16px 22px !important;
    vertical-align: middle !important;
    border-bottom: 1px solid #f1f5f9 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    color: #334155 !important;
    font-weight: 500 !important;
    background: #ffffff !important;
    transition: background 0.15s ease !important;
}

table.table-list tr:hover td,
.table-container table tr:hover td {
    background: #f8fafc !important;
}

table.table-list tr:last-child td,
.table-container table tr:last-child td {
    border-bottom: none !important;
}

/* Product Titles & Links */
table.table-list td strong,
table.table-list td a,
.table-container table td a {
    color: #020617 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

table.table-list td a:hover,
.table-container table td a:hover {
    color: #2563eb !important;
}

/* SSL Padlock Icon */
table.table-list td i.fa-lock,
table.table-list td i.fas.fa-lock,
table.table-list td .ssl-status {
    color: #cbd5e1 !important;
    transition: color 0.2s ease !important;
}

table.table-list tr:hover td i.fa-lock,
table.table-list tr:hover td i.fas.fa-lock {
    color: #2563eb !important;
}

/* Status Pill Badges */
.status,
span.status,
.label-status,
table.table-list .status,
table.table-list span.status {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 5px 16px !important;
    border-radius: 9999px !important;
    font-weight: 800 !important;
    text-transform: capitalize !important;
    letter-spacing: 0.02em !important;
    box-shadow: none !important;
}

/* Active Status - Pastel Green */
.status-active,
.status.status-active,
span.status-active,
table.table-list span.status-active {
    background: #dcfce7 !important;
    color: #15803d !important;
    border: 1.5px solid #86efac !important;
}

/* Pending Status - Pastel Orange */
.status-pending,
.status.status-pending,
span.status-pending,
table.table-list span.status-pending {
    background: #fff7ed !important;
    color: #c2410c !important;
    border: 1.5px solid #fed7aa !important;
}

/* Suspended / Terminated / Overdue Status - Pastel Red */
.status-suspended,
.status-terminated,
.status-unpaid,
.status-overdue,
span.status-suspended,
span.status-terminated,
span.status-unpaid {
    background: #ffe4e6 !important;
    color: #be123c !important;
    border: 1.5px solid #fecdd3 !important;
}

/* Cancelled / Inactive / Paid Status - Soft Grey / Blue */
.status-cancelled,
.status-inactive,
span.status-cancelled,
span.status-inactive {
    background: #f1f5f9 !important;
    color: #64748b !important;
    border: 1.5px solid #cbd5e1 !important;
}

.status-paid,
span.status-paid {
    background: #eff6ff !important;
    color: #1e40af !important;
    border: 1.5px solid #bfdbfe !important;
}

/* Footer Pagination & Length Controls */
div.dataTables_paginate,
div.dataTables_length {
    background: #f8fafc !important;
    border-top: 1.5px solid #e2e8f0 !important;
    padding: 14px 22px !important;
    color: #64748b !important;
    font-weight: 600 !important;
}

div.dataTables_length {
    float: left !important;
    line-height: 34px !important;
}

div.dataTables_paginate {
    float: right !important;
}

.dataTables_wrapper::after,
.table-container::after {
    content: "" !important;
    display: table !important;
    clear: both !important;
}

.dataTables_wrapper .dataTables_length select {
    border-radius: 10px !important;
    border: 1.5px solid #cbd5e1 !important;
    padding: 4px 10px !important;
    background: #ffffff !important;
    color: #020617 !important;
    font-weight: 700 !important;
}

.dataTables_paginate .pagination {
    margin: 0 !important;
    display: inline-flex !important;
    gap: 4px !important;
}

.dataTables_paginate .pagination>li>a,
.dataTables_paginate .pagination>li>span {
    border-radius: 10px !important;
    border: 1.5px solid #e2e8f0 !important;
    color: #475569 !important;
    font-weight: 700 !important;
    padding: 6px 14px !important;
    background: #ffffff !important;
    transition: all 0.2s ease !important;
}

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

.dataTables_paginate .pagination>li>a:hover {
    background: #eff6ff !important;
    color: #2563eb !important;
    border-color: #bfdbfe !important;
}


/* --- 19. Product Details & cPanel Management Page --- */

/* Overdue / Unpaid Invoice & System Alert Banners */
.alert-danger,
.alert-warning,
.alert-success,
.alert-info,
div[id^="alert"] {
    border-radius: 18px !important;
    padding: 18px 24px !important;
    font-weight: 600 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
    border-width: 1.5px !important;
}

/* Fix multi-line alert boxes and validation error containers when visible */
.alert:has(ul),
.alert:has(ol),
.alert:has(p + p),
#containerProductValidationErrors:not(.w-hidden):not(.hidden),
#order-standard_cart .alert:not(.w-hidden):not(.hidden):not(:empty),
#order-premium_comparison .alert:not(.w-hidden):not(.hidden):not(:empty),
.cart-body .alert:not(.w-hidden):not(.hidden):not(:empty) {
    display: block !important;
}

/* Strictly hide empty alerts, hidden alerts, and empty gateway-errors */
.alert:empty,
.alert-danger:empty,
.alert-warning:empty,
.alert-info:empty,
.alert-success:empty,
.alert.w-hidden,
.alert.hidden,
.alert-danger.w-hidden,
.alert-danger.hidden,
.alert-warning.w-hidden,
.alert-warning.hidden,
.gateway-errors:empty,
.gateway-errors.w-hidden,
#order-standard_cart .gateway-errors:empty,
#order-standard_cart .gateway-errors.w-hidden,
.cart-body .gateway-errors:empty,
.cart-body .gateway-errors.w-hidden,
#containerProductValidationErrors.w-hidden,
#containerProductValidationErrors.hidden,
#existingLoginMessage.w-hidden,
#existingLoginMessage:empty {
    display: none !important;
}

/* Only show gateway errors if it actually has content and is not hidden */
.gateway-errors:not(:empty):not(.w-hidden):not(.hidden),
#order-standard_cart .gateway-errors:not(:empty):not(.w-hidden):not(.hidden),
.cart-body .gateway-errors:not(:empty):not(.w-hidden):not(.hidden) {
    display: block !important;
}

#containerNewUserSignup:not(.w-hidden),
#containerExistingUserSignin:not(.w-hidden) {
    display: block !important;
}

#containerProductValidationErrorsList {
    margin: 10px 0 0 0 !important;
    padding-left: 20px !important;
    list-style: disc !important;
}

#containerProductValidationErrorsList li,
.alert-danger ul li,
.alert ul li {
    display: list-item !important;
    margin-bottom: 4px !important;
    color: #991b1b !important;
    font-weight: 600 !important;
}

/* Force text alignment left */
.alert {
    text-align: left !important;
}

/* Force action buttons / pull-right to right side via order: 2 */
.alert .pull-right,
div[id^="alert"] .pull-right {
    float: none !important;
    order: 2 !important;
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* Pay Invoice & Action Buttons inside Alert Banner */
.alert-danger .btn,
.alert-warning .btn,
.alert .btn {
    border-radius: 9999px !important;
    font-weight: 800 !important;
    padding: 10px 24px !important;
    background: #e11d48 !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(225, 29, 72, 0.25) !important;
    transition: all 0.22s ease !important;
    float: none !important;
    margin: 0 !important;
    display: inline-block !important;
}

.alert-danger .btn:hover,
.alert-warning .btn:hover {
    background: #be123c !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(225, 29, 72, 0.35) !important;
}

/* All Panels on Product Details Page */
#tabOverview .panel,
.product-details,
#cPanelPackagePanel,
#cPanelUsagePanel,
#cPanelQuickShortcutsPanel,
#cPanelQuickEmailPanel,
.panel-default {
    border-radius: 20px !important;
    border: 1.5px solid #e2e8f0 !important;
    box-shadow: 0 6px 24px rgba(15, 23, 42, 0.04) !important;
    overflow: hidden !important;
    background: #ffffff !important;
    margin-bottom: 28px !important;
}

.panel-default>.panel-heading {
    background: #f8fafc !important;
    border-bottom: 1.5px solid #e2e8f0 !important;
    padding: 16px 24px !important;
}

.panel-default>.panel-heading .panel-title {
    font-weight: 800 !important;
    color: #020617 !important;
    letter-spacing: -0.01em !important;
}

.panel-body {
    padding: 24px !important;
}

/* Form Controls & Credentials Input Fields */
.panel-body input.form-control,
.panel-body select.form-control,
.input-group input.form-control {
    height: 46px !important;
    border-radius: 12px !important;
    border: 1.5px solid #cbd5e1 !important;
    background: #ffffff !important;
    padding: 8px 16px !important;
    color: #020617 !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

.panel-body input.form-control:focus,
.panel-body select.form-control:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3.5px rgba(37, 99, 235, 0.12) !important;
}

/* Cpanel Package Details Box */
.cpanel-package-details {
    margin-bottom: 16px !important;
}

.cpanel-package-details em {
    display: inline-block !important;
    font-style: normal !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: #2563eb !important;
    background: #eff6ff !important;
    border: 1px solid #bfdbfe !important;
    padding: 3px 12px !important;
    border-radius: 9999px !important;
    margin-bottom: 8px !important;
}

.cpanel-package-details h4 {
    font-weight: 900 !important;
    color: #020617 !important;
    margin: 4px 0 6px 0 !important;
}

.cpanel-package-details a {
    color: #64748b !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.cpanel-package-details a:hover {
    color: #2563eb !important;
}

/* Package Action Buttons (Visit Website, WHOIS Info) */
#cPanelPackagePanel .btn-default {
    background: #ffffff !important;
    color: #475569 !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    padding: 8px 18px !important;
    transition: all 0.2s ease !important;
}

#cPanelPackagePanel .btn-default:hover {
    background: #f8fafc !important;
    color: #020617 !important;
    border-color: #94a3b8 !important;
}

#cPanelPackagePanel .btn-info {
    background: #eff6ff !important;
    color: #2563eb !important;
    border: 1.5px solid #bfdbfe !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    padding: 8px 18px !important;
    transition: all 0.2s ease !important;
}

#cPanelPackagePanel .btn-info:hover {
    background: #dbeafe !important;
    color: #1d4ed8 !important;
    border-color: #93c5fd !important;
}

/* Usage Stats Gauges */
.cpanel-usage-stats {
    padding-top: 10px !important;
}

.cpanel-usage-stats strong {
    font-weight: 800 !important;
    color: #020617 !important;
}

/* --- cPanel Quick Shortcuts Cards Grid --- */
.cpanel-feature-row {
    margin-left: -8px !important;
    margin-right: -8px !important;
}

.cpanel-feature-row>div,
#cPanelQuickShortcutsPanel .row>div {
    padding-left: 8px !important;
    padding-right: 8px !important;
    margin-bottom: 16px !important;
}

.cpanel-feature-row>div a,
#cPanelQuickShortcutsPanel .row>div a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 22px 14px !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 20px !important;
    text-decoration: none !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.03) !important;
    min-height: 120px !important;
    color: #1e293b !important;
    font-weight: 700 !important;
}

.cpanel-feature-row>div a:hover,
#cPanelQuickShortcutsPanel .row>div a:hover {
    transform: translateY(-5px) scale(1.02) !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.12) !important;
    background: #ffffff !important;
    color: #2563eb !important;
}

.cpanel-feature-row>div a img,
#cPanelQuickShortcutsPanel .row>div a img {
    max-height: 42px !important;
    width: auto !important;
    margin-bottom: 12px !important;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.cpanel-feature-row>div a:hover img,
#cPanelQuickShortcutsPanel .row>div a:hover img {
    transform: scale(1.12) !important;
}

/* Quick Create Email Account Form */
#frmCreateEmailAccount .btn-success,
#cPanelQuickEmailPanel .btn-success {
    background: #2563eb !important;
    color: #ffffff !important;
    border: 1.5px solid #1d4ed8 !important;
    border-radius: 12px !important;
    font-weight: 800 !important;
    height: 46px !important;
    padding: 8px 24px !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.2) !important;
    transition: all 0.2s ease !important;
}

#frmCreateEmailAccount .btn-success:hover,
#cPanelQuickEmailPanel .btn-success:hover {
    background: #1d4ed8 !important;
    border-color: #1e40af !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.3) !important;
}

.product-details .btn-info:hover {
    background: #dbeafe !important;
    color: #1d4ed8 !important;
}


/* --- 20. Account Cancellation Request Page --- */

/* Info Banner for Cancellation Product */
.alert-info,
div[id*="alert"].alert-info {
    background: #eff6ff !important;
    border: 1.5px solid #bfdbfe !important;
    color: #1e40af !important;
    border-radius: 16px !important;
    padding: 16px 22px !important;
    font-weight: 600 !important;
    margin-bottom: 28px !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.04) !important;
}

/* Cancellation Reason Label & Textarea */
form.form-stacked label,
label[for="cancellationreason"],
label.control-label {
    font-weight: 800 !important;
    color: #020617 !important;
    margin-bottom: 10px !important;
}

textarea#cancellationreason,
textarea.form-control {
    border-radius: 16px !important;
    border: 1.5px solid #cbd5e1 !important;
    padding: 16px !important;
    font-weight: 500 !important;
    color: #020617 !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03) !important;
    transition: all 0.2s ease !important;
    outline: none !important;
}

textarea#cancellationreason:focus,
textarea.form-control:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12) !important;
}

/* Select Dropdown for Cancellation Type */
select#type,
.form-inline select.form-control {
    height: 44px !important;
    border-radius: 12px !important;
    border: 1.5px solid #cbd5e1 !important;
    padding: 6px 16px !important;
    font-weight: 700 !important;
    color: #020617 !important;
    background: #ffffff !important;
    outline: none !important;
    transition: all 0.2s ease !important;
}

select#type:focus,
.form-inline select.form-control:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3.5px rgba(37, 99, 235, 0.12) !important;
}

/* Cancellation Action Buttons */
.form-group .btn-danger,
input[type="submit"].btn-danger,
button.btn-danger {
    background: #ef4444 !important;
    color: #ffffff !important;
    border: 1.5px solid #dc2626 !important;
    border-radius: 12px !important;
    font-weight: 800 !important;
    padding: 10px 24px !important;
    height: 46px !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2) !important;
    transition: all 0.2s ease !important;
}

.form-group .btn-danger:hover,
input[type="submit"].btn-danger:hover,
button.btn-danger:hover {
    background: #dc2626 !important;
    border-color: #b91c1c !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.3) !important;
}

.form-group .btn-default,
a.btn-default {
    background: #ffffff !important;
    color: #475569 !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    padding: 10px 24px !important;
    height: 46px !important;
    transition: all 0.2s ease !important;
}

.form-group .btn-default:hover,
a.btn-default:hover {
    background: #f8fafc !important;
    color: #020617 !important;
    border-color: #94a3b8 !important;
}

/* ============================================================
   PERFECT SIDEBAR & TICKET VIEW STYLING (CLEAN & ERROR-FREE)
   ============================================================ */

/* 1. Panel Container */
.panel-sidebar,
.panel.panel-sidebar {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
    margin-bottom: 20px !important;
    overflow: hidden !important;
}

/* 2. Panel Header: Text (order 0, Left), Icon (order 1, next to Text), Chevron (order 2, Far Right) */
.panel-sidebar>.panel-heading {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border-bottom: 1.5px solid #e2e8f0 !important;
    padding: 12px 16px !important;
}

.panel-sidebar .panel-title {
    color: #0f172a !important;
    font-weight: 800 !important;
    display: flex !important;
    align-items: center !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    width: 100% !important;
    gap: 8px !important;
    margin: 0 !important;
}

.panel-sidebar .panel-title i:not(.panel-minimise):not(.fa-chevron-up):not(.fa-chevron-down),
.panel-sidebar .panel-title>.fas:not(.panel-minimise):not(.fa-chevron-up):not(.fa-chevron-down),
.panel-sidebar .panel-title>.far:not(.panel-minimise):not(.fa-chevron-up):not(.fa-chevron-down),
.panel-sidebar .panel-title>.fa:not(.panel-minimise):not(.fa-chevron-up):not(.fa-chevron-down) {
    color: #2563eb !important;
    order: 1 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.panel-sidebar .panel-title .panel-minimise,
.panel-sidebar .panel-title a.panel-minimise,
.panel-sidebar .panel-title .fa-chevron-up,
.panel-sidebar .panel-title .fa-chevron-down {
    order: 2 !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    color: #64748b !important;
    float: none !important;
}

/* Clean Icon Styling (order: 10 -> pushed cleanly to far right edge) */
.panel-sidebar .list-group-item>i,
.panel-sidebar .list-group-item>.fas,
.panel-sidebar .list-group-item>.far,
.panel-sidebar .list-group-item>.fa {
    display: inline-block !important;
    order: 10 !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    width: 16px !important;
    text-align: center !important;
    color: #2563eb !important;
    flex-shrink: 0 !important;
}

.panel-sidebar .list-group-item:hover>i,
.panel-sidebar .list-group-item:hover>.fas,
.panel-sidebar .list-group-item:hover>.far,
.panel-sidebar .list-group-item:hover>.fa,
.panel-sidebar .list-group-item:hover i {
    color: #2563eb !important;
}

.panel-sidebar .list-group-item.active>i,
.panel-sidebar .list-group-item.active>.fas,
.panel-sidebar .list-group-item.active>.far,
.panel-sidebar .list-group-item.active>.fa,
.panel-sidebar .list-group-item.active i,
.panel-sidebar .list-group-item.active:hover>i,
.panel-sidebar .list-group-item.active:hover>.fas,
.panel-sidebar .list-group-item.active:hover>.far,
.panel-sidebar .list-group-item.active:hover>.fa,
.panel-sidebar .list-group-item.active:hover i {
    color: #ffffff !important;
}

/* Row Badges & Values */
.panel-sidebar .list-group-item .pull-right {
    order: 2 !important;
    margin-left: 8px !important;
    margin-right: 0 !important;
    float: none !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.panel-sidebar .list-group-item .badge,
.panel-sidebar .list-group-item>span.badge {
    order: 1 !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    float: none !important;
    background: #eff6ff !important;
    color: #2563eb !important;
    font-weight: 800 !important;
    padding: 3px 10px !important;
    border-radius: 9999px !important;
    display: inline-block !important;
}

.panel-sidebar .list-group-item.active .badge {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
}

/* Hide redundant radio/dot/check icons inside all sidebar items & badges to prevent overlap with numbers (e.g. 2☉ -> 2) */
.panel-sidebar .list-group-item .sidebar-menu-item-icon,
.panel-sidebar .list-group-item i.sidebar-menu-item-icon,
.panel-sidebar .list-group-item .badge i,
.panel-sidebar .list-group-item .pull-right i,
.panel-sidebar .list-group-item .fa-dot-circle-o,
.panel-sidebar .list-group-item .fa-circle-o,
.panel-sidebar .list-group-item .far.fa-circle,
.panel-sidebar .list-group-item .fas.fa-dot-circle,
.panel-sidebar .list-group-item .fas.fa-circle,
.panel-sidebar .list-group-item .fa-circle,
.panel-sidebar .list-group-item .fa-check-circle,
.panel-sidebar .list-group-item .fa-check,
.cart-sidebar .list-group-item .sidebar-menu-item-icon,
.cart-sidebar .list-group-item i.sidebar-menu-item-icon,
.cart-sidebar .list-group-item .badge i,
.cart-sidebar .list-group-item .pull-right i,
.cart-sidebar .list-group-item .fa-dot-circle-o,
.cart-sidebar .list-group-item .fa-circle-o,
.cart-sidebar .list-group-item .far.fa-circle,
.cart-sidebar .list-group-item .fas.fa-dot-circle,
.cart-sidebar .list-group-item .fas.fa-circle,
.cart-sidebar .list-group-item .fa-circle,
.cart-sidebar .list-group-item .fa-check-circle,
.cart-sidebar .list-group-item .fa-check,
#order-standard_cart .cart-sidebar .list-group-item .sidebar-menu-item-icon,
#order-standard_cart .cart-sidebar .list-group-item i.sidebar-menu-item-icon,
#order-standard_cart .cart-sidebar .list-group-item .badge i,
#order-standard_cart .cart-sidebar .list-group-item .pull-right i,
#order-standard_cart .cart-sidebar .list-group-item .fa-dot-circle-o,
#order-standard_cart .cart-sidebar .list-group-item .fa-circle-o,
#order-standard_cart .cart-sidebar .list-group-item .far.fa-circle,
#order-standard_cart .cart-sidebar .list-group-item .fas.fa-dot-circle,
#order-standard_cart .cart-sidebar .list-group-item .fas.fa-circle,
#order-standard_cart .cart-sidebar .list-group-item .fa-circle,
#order-standard_cart .cart-sidebar .list-group-item .fa-check-circle,
#order-standard_cart .cart-sidebar .list-group-item .fa-check {
    display: none !important;
}

/* Owner & Status Badges */
.label-owner,
.badge-owner {
    background: #dcfce7 !important;
    color: #15803d !important;
    border: 1px solid #86efac !important;
    font-weight: 800 !important;
    padding: 1px 6px !important;
    border-radius: 9999px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

.label.status,
.badge.status {
    border-radius: 9999px !important;
    font-weight: 800 !important;
    padding: 2px 7px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

.status-closed {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
}

.status-open {
    background: #dcfce7 !important;
    color: #15803d !important;
    border: 1px solid #86efac !important;
}

/* 4. Action Buttons (Reply & Close) - Full Rectangular Buttons */
.panel-sidebar .list-group-item:last-child:has(.btn),
.panel-sidebar .list-group-item:last-child {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 12px 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.panel-sidebar .list-group-item:last-child .btn,
.panel-sidebar .list-group-item:last-child a.btn {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    border-radius: 10px !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 16px !important;
    margin: 0 !important;
    border: none !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

.panel-sidebar .btn-success,
.panel-sidebar a.btn-success {
    background: #10b981 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2) !important;
}

.panel-sidebar .btn-success:hover,
.panel-sidebar a.btn-success:hover {
    background: #059669 !important;
    transform: translateY(-1px) !important;
}

.panel-sidebar .btn-danger,
.panel-sidebar a.btn-danger {
    background: #f43f5e !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(244, 63, 94, 0.2) !important;
}

.panel-sidebar .btn-danger:hover,
.panel-sidebar a.btn-danger:hover {
    background: #e11d48 !important;
    transform: translateY(-1px) !important;
}

/* 5. CC Recipients Sidebar Body & Connected Input Group & Artifact Cleanup */
.panel-sidebar .panel-body {
    display: block !important;
    width: 100% !important;
    padding: 12px 12px !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
}

.panel-sidebar .panel-body form {
    display: block !important;
    width: 100% !important;
    margin: 0 0 6px 0 !important;
}

.panel-sidebar .panel-body .input-group {
    display: table !important;
    width: 100% !important;
    border-collapse: separate !important;
}

.panel-sidebar .panel-body .input-group .form-control {
    display: table-cell !important;
    width: 100% !important;
    height: 38px !important;
    border-radius: 8px 0 0 8px !important;
    border: 1.5px solid #cbd5e1 !important;
    border-right: none !important;
    padding: 0 10px !important;
    box-shadow: none !important;
    float: left !important;
    box-sizing: border-box !important;
}

.panel-sidebar .panel-body .input-group-btn {
    display: table-cell !important;
    width: 1% !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}

.panel-sidebar .panel-body .input-group-btn .btn,
.panel-sidebar .panel-body input[type="submit"],
.panel-sidebar .panel-body button.btn-primary,
.panel-sidebar .panel-body .btn-default {
    height: 38px !important;
    padding: 0 16px !important;
    border-radius: 0 8px 8px 0 !important;
    background: #2563eb !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    border: 1.5px solid #2563eb !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    margin: 0 !important;
}

/* Hide empty / pink artifact divs inside panel-body */
.panel-sidebar .panel-body div:empty,
.panel-sidebar .panel-body p:empty,
.panel-sidebar .panel-body span:empty,
.panel-sidebar .panel-body .alert:empty,
.panel-sidebar .panel-body [class*="alert"]:empty {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* Alert Notification in CC Recipients */
.panel-sidebar .alert-success {
    display: block !important;
    width: 100% !important;
    clear: both !important;
    background: #f0fdf4 !important;
    color: #166534 !important;
    border: 1.5px solid #bbf7d0 !important;
    border-radius: 8px !important;
    padding: 8px 10px !important;
    font-weight: 600 !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    margin-top: 8px !important;
    margin-bottom: 0 !important;
}

/* ============================================================
   ULTRA-PREMIUM TICKET REPLY FORM & THREAD MESSAGES STYLING
   ============================================================ */

/* 1. Reply Panel Box */
.panel-collapsable,
.panel-info.panel-collapsable,
.panel-info:has(#frmReply) {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 18px !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05) !important;
    margin-bottom: 28px !important;
    overflow: hidden !important;
}

/* 2. Reply Panel Header */
.panel-collapsable>.panel-heading,
.panel-info>.panel-heading {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border-bottom: 1.5px solid #e2e8f0 !important;
    padding: 14px 20px !important;
    cursor: pointer !important;
}

.panel-collapsable .panel-title,
.panel-info .panel-title {
    color: #0f172a !important;
    font-weight: 800 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.panel-collapsable .panel-title i,
.panel-info .panel-title i {
    color: #2563eb !important;
}

.panel-collapsable .collapse-icon i {
    color: #64748b !important;
}

/* 3. Reply Form Body */
.panel-collapsable .panel-body,
.panel-info .panel-body {
    padding: 24px !important;
    background: #ffffff !important;
}

/* Form Group Labels */
#frmReply label {
    font-weight: 700 !important;
    color: #475569 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 8px !important;
    display: block !important;
}

/* Input Fields (Name & Email) */
#frmReply input.form-control[name="replyname"],
#frmReply input.form-control[name="replyemail"],
#frmReply input.form-control {
    height: 44px !important;
    border-radius: 12px !important;
    border: 1.5px solid #cbd5e1 !important;
    background: #ffffff !important;
    padding: 0 14px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.2s ease !important;
}

#frmReply input.form-control:disabled,
#frmReply input.form-control[disabled] {
    background: #f8fafc !important;
    color: #475569 !important;
    border-color: #e2e8f0 !important;
    cursor: not-allowed !important;
}

#frmReply input.form-control:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12) !important;
    outline: none !important;
}

/* 4. Markdown Editor Toolbar & Textarea Container */
.md-editor,
.markdown-editor {
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    margin-top: 4px !important;
}

.md-header,
.markdown-editor .md-header {
    background: #f8fafc !important;
    border-bottom: 1.5px solid #e2e8f0 !important;
    padding: 8px 12px !important;
}

.md-header .btn-group {
    margin-right: 6px !important;
}

.md-header .btn {
    border-radius: 8px !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    color: #334155 !important;
    font-weight: 700 !important;
    padding: 6px 12px !important;
    transition: all 0.18s ease !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

.md-header .btn:hover {
    background: #f1f5f9 !important;
    color: #2563eb !important;
    border-color: #bfdbfe !important;
}

.md-header .btn-primary,
.md-header .btn.active {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
}

/* Editor Textarea */
#inputMessage,
.md-input,
textarea.markdown-editor {
    border: none !important;
    border-radius: 0 !important;
    padding: 16px !important;
    line-height: 1.6 !important;
    color: #0f172a !important;
    background: #ffffff !important;
    box-shadow: none !important;
    min-height: 180px !important;
    resize: vertical !important;
}

#inputMessage:focus,
.md-input:focus {
    outline: none !important;
    box-shadow: none !important;
}

.md-footer {
    background: #f8fafc !important;
    border-top: 1px solid #f1f5f9 !important;
    padding: 6px 14px !important;
    color: #64748b !important;
}

/* 5. File Attachments Section */
#frmReply .row.form-group:has(#inputAttachments),
#frmReply .row.form-group {
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 16px 18px !important;
    margin: 20px 0 !important;
}

#frmReply input[type="file"],
#inputAttachments {
    height: 42px !important;
    border-radius: 10px !important;
    border: 1.5px solid #cbd5e1 !important;
    background: #ffffff !important;
    padding: 6px 12px !important;
    color: #475569 !important;
    box-shadow: none !important;
}

#frmReply button[onclick*="extraTicketAttachment"] {
    height: 42px !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: #0f172a !important;
    font-weight: 700 !important;
    border: 1.5px solid #cbd5e1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

#frmReply button[onclick*="extraTicketAttachment"]:hover {
    background: #f1f5f9 !important;
    border-color: #94a3b8 !important;
}

.ticket-attachments-message {
    color: #64748b !important;
    margin-top: 8px !important;
    font-weight: 600 !important;
}

/* 6. Submit & Cancel Action Buttons */
#frmReply .form-group.text-center {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    margin-top: 24px !important;
    margin-bottom: 0 !important;
}

#frmReply input[type="submit"][name="save"],
#frmReply input.btn-primary {
    height: 44px !important;
    padding: 0 32px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25) !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

#frmReply input[type="submit"][name="save"]:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35) !important;
}

#frmReply input[type="reset"],
#frmReply input.btn-default {
    height: 44px !important;
    padding: 0 28px !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    color: #475569 !important;
    font-weight: 700 !important;
    border: 1.5px solid #cbd5e1 !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

#frmReply input[type="reset"]:hover {
    background: #f8fafc !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
}

/* 7. Ticket Replies / Message Cards Below Form */
.ticket-reply {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 16px !important;
    box-shadow: 0 3px 12px rgba(15, 23, 42, 0.04) !important;
    margin-bottom: 20px !important;
    overflow: hidden !important;
}

.ticket-reply.staff {
    border-color: #bfdbfe !important;
    background: #f8fafc !important;
}

.ticket-reply .user {
    background: #f8fafc !important;
    border-bottom: 1.5px solid #f1f5f9 !important;
    padding: 12px 18px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}

.ticket-reply.staff .user {
    background: #eff6ff !important;
    border-bottom-color: #dbeafe !important;
}

.ticket-reply .user i {
    color: #2563eb !important;
}

.ticket-reply .date {
    float: right !important;
    color: #64748b !important;
    font-weight: 600 !important;
}

.ticket-reply .message {
    padding: 20px 22px !important;
    line-height: 1.65 !important;
    color: #1e293b !important;
}

/* ============================================================
   STORE PRODUCTS & PRICING TABLE - ULTRA PREMIUM MODERN UI
   ============================================================ */

/* Store Section Title */
.store-products .header-lined h1,
.product-group-headline h1,
.header-lined h1 {
    font-weight: 900 !important;
    color: #0f172a !important;
    letter-spacing: -0.6px !important;
    text-align: center !important;
    margin-bottom: 24px !important;
}

/* Products Row & Equal Height Grid (3-Column Layout) */
.products,
.products-container,
.store-products {
    margin: 30px 0 !important;
}

.products .row-eq-height,
.store-products .row-eq-height {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
}

.products .row-eq-height > div[class*="col-"],
.store-products .row-eq-height > div[class*="col-"] {
    flex: 1 1 calc(33.333% - 14px) !important;
    max-width: calc(33.333% - 14px) !important;
    min-width: 260px !important;
    padding: 0 !important;
}

/* Individual Product / Pricing Card */
.products .product,
.store-products .product,
.price-table,
.product-box,
.package {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05) !important;
    overflow: hidden !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100% !important;
    margin-bottom: 24px !important;
    position: relative !important;
    padding: 0 !important;
}

.products .product:hover,
.store-products .product:hover,
.price-table:hover,
.product-box:hover {
    transform: translateY(-6px) !important;
    border-color: #2563eb !important;
    box-shadow: 0 20px 40px rgba(37, 99, 235, 0.12) !important;
}

/* Card Header (Plan Name: S1, S2, S3, etc.) */
.products .product header,
.store-products .product header,
.product-header,
.price-table .header {
    background: linear-gradient(180deg, #f8fafc 0%, #eff6ff 100%) !important;
    padding: 20px 16px !important;
    border-bottom: 1.5px solid #e2e8f0 !important;
    text-align: center !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

.products .product header span,
.products .product header h3,
.store-products .product header span,
.price-table .header h3 {
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.3px !important;
    display: block !important;
    text-transform: capitalize !important;
}

.products .product header .qty,
.store-products .product header .qty {
    display: block !important;
    float: none !important;
    margin-top: 4px !important;
    color: #2563eb !important;
    font-weight: 700 !important;
    font-style: normal !important;
}

/* Pricing Header / Price Display Area */
.products .product div.product-pricing,
.store-products .product div.product-pricing,
.product-pricing,
.price-container {
    background: #ffffff !important;
    padding: 18px 16px 14px 16px !important;
    text-align: center !important;
    margin: 0 !important;
    border-bottom: 1px dashed #e2e8f0 !important;
}

.products .product div.product-pricing span.price,
.store-products .product div.product-pricing span.price,
.product-pricing .price,
.price-table .price {
    font-size: 1.8rem !important;
    font-weight: 900 !important;
    color: #2563eb !important;
    letter-spacing: -0.8px !important;
    line-height: 1.1 !important;
    display: inline-block !important;
}

.products .product div.product-pricing br+text,
.products .product div.product-pricing,
.store-products .product div.product-pricing {
    color: #64748b !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
}

/* Feature List Section */
.products .product div.product-desc,
.store-products .product div.product-desc,
.product-desc,
.price-table .features {
    float: none !important;
    width: 100% !important;
    padding: 16px 20px !important;
    flex-grow: 1 !important;
}

.products .product div.product-desc p,
.store-products .product div.product-desc p {
    color: #475569 !important;
    line-height: 1.6 !important;
    margin-bottom: 16px !important;
    text-align: center !important;
}

.products .product div.product-desc ul,
.store-products .product div.product-desc ul,
.product-desc ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.products .product div.product-desc ul li,
.store-products .product div.product-desc ul li,
.product-desc ul li {
    padding: 10px 0 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    color: #334155 !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-align: center !important;
}

.products .product div.product-desc ul li:last-child,
.store-products .product div.product-desc ul li:last-child {
    border-bottom: none !important;
}

/* Checkmark Icon before each feature */
.products .product div.product-desc ul li::before,
.store-products .product div.product-desc ul li::before {
    content: "\f00c" !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    color: #10b981 !important;
    flex-shrink: 0 !important;
    font-size: 0.85rem !important;
}

/* Feature Bold Values */
.products .product span.feature-value,
.store-products .product span.feature-value,
.product-desc span.feature-value {
    color: #0f172a !important;
    font-weight: 800 !important;
}

/* Footer & Order Button Container */
.products .product footer,
.store-products .product footer,
.product-footer {
    float: none !important;
    width: 100% !important;
    padding: 16px 20px 20px 20px !important;
    margin: 0 !important;
    text-align: center !important;
    background: #ffffff !important;
}

/* Order Now CTA Button */
.products .product a.btn-order-now,
.products .product a.btn-success,
.store-products .product a.btn-order-now,
.store-products .product a.btn-success,
.btn-order-now {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 48px !important;
    padding: 0 24px !important;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 0.95rem !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.products .product a.btn-order-now:hover,
.products .product a.btn-success:hover,
.store-products .product a.btn-order-now:hover,
.store-products .product a.btn-success:hover,
.btn-order-now:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 22px rgba(37, 99, 235, 0.4) !important;
    color: #ffffff !important;
}

/* ============================================================
   EXACT REPLICA DESIGN OF IMAGE 2 (RESELLER PRICING CARDS)
   ============================================================ */

#btnShowSidebar {
    background: #ffffff !important;
    color: #2563eb !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 9999px !important;
    font-weight: 700 !important;
    padding: 8px 20px !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05) !important;
    transition: all 0.2s ease !important;
}

#btnShowSidebar:hover {
    background: #eff6ff !important;
    border-color: #2563eb !important;
    color: #1d4ed8 !important;
}

#order-premium_comparison .price-table-container ul {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 24px !important;
    align-items: stretch !important;
}

#order-premium_comparison .price-table-container ul li {
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    display: flex !important;
}

/* Individual Card */
#order-premium_comparison .price-table-container .price-table {
    width: 320px !important;
    min-width: 300px !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 24px !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04) !important;
    padding: 24px 20px 20px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    text-align: center !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
}

#order-premium_comparison .price-table-container .price-table:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08) !important;
}

/* Featured / Middle Card Highlight (Card 2 / Pro) */
#order-premium_comparison .price-table-container .price-table.featured-card,
#order-premium_comparison .price-table-container .price-table.plan-pro {
    background: #f4f8ff !important;
    border: 2px solid #2563eb !important;
    box-shadow: 0 12px 36px rgba(37, 99, 235, 0.12) !important;
}

/* Top Head Area */
#order-premium_comparison .price-table .top-head {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    text-align: center !important;
}

#order-premium_comparison .price-table .top-head .top-area {
    border-bottom: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
}

/* Top Badges Row */
.top-badges-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-bottom: 6px !important;
    min-height: 28px !important;
}

/* Pill Badges */
.plan-pill {
    font-weight: 800 !important;
    padding: 4px 14px !important;
    border-radius: 9999px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.pill-starter {
    background: #e6f4ea !important;
    color: #166534 !important;
    border: 1px solid rgba(22, 101, 52, 0.15) !important;
}

.pill-pro {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25) !important;
}

.pill-ultimate {
    background: #f3e8ff !important;
    color: #7e22ce !important;
    border: 1px solid rgba(126, 34, 206, 0.15) !important;
}

.bestseller-badge {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    padding: 4px 12px !important;
    border-radius: 9999px !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
}

/* Plan Title & Tagline */
#order-premium_comparison .price-table .top-area h4 {
    font-weight: 900 !important;
    color: #0f172a !important;
    margin: 0 0 4px 0 !important;
    text-align: center !important;
    letter-spacing: -0.5px !important;
}

.plan-tagline {
    color: #64748b !important;
    line-height: 1.45 !important;
    margin-bottom: 6px !important;
    text-align: center !important;
}

/* Price Display Area */
#order-premium_comparison .price-table .price-area {
    border: none !important;
    padding: 2px 0 4px 0 !important;
    text-align: center !important;
}

#order-premium_comparison .price-table .price,
.price-table .price {
    font-size: 2.4rem !important;
    font-weight: 900 !important;
    color: #0f172a !important;
    letter-spacing: -0.8px !important;
    line-height: 1.1 !important;
    text-align: center !important;
}

#order-premium_comparison .price-table .price span,
.price-table .price span {
    font-size: 2.4rem !important;
    font-weight: 900 !important;
    color: #0f172a !important;
}

/* Features List - Compact & Centered (Exact WHMCS Output, NO gaps) */
#order-premium_comparison .price-table ul.features-list {
    padding: 4px 0 8px 0 !important;
    margin: 0 !important;
    background: transparent !important;
    flex-grow: 0 !important;
    text-align: center !important;
}

#order-premium_comparison .price-table ul.features-list li {
    padding: 0 !important;
    border: none !important;
    color: #334155 !important;
    font-weight: 600 !important;
    display: block !important;
    text-align: center !important;
    background: none !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

#order-premium_comparison .price-table ul.features-list li.description-single-block {
    display: block !important;
    text-align: center !important;
    line-height: 1.6 !important;
    color: #334155 !important;
    font-weight: 600 !important;
    padding: 0 !important;
    margin: 0 !important;
}

#order-premium_comparison .price-table ul.features-list li::before,
.feature-check-icon {
    display: none !important;
}

/* Bottom Action Area & Centered Buttons */
.bottom-action-area {
    margin-top: 16px !important;
    width: 100% !important;
    text-align: center !important;
}

#order-premium_comparison .price-table a.order-button,
.btn-plan {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 46px !important;
    width: 85% !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    font-weight: 800 !important;
    border: none !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    text-align: center !important;
}

/* Card 1 Button: Green */
.btn-plan-starter,
.plan-starter a.order-button {
    background: #10b981 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3) !important;
}

.btn-plan-starter:hover,
.plan-starter a.order-button:hover {
    background: #059669 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4) !important;
    color: #ffffff !important;
}

/* Card 2 Button: Blue */
.btn-plan-pro,
.plan-pro a.order-button {
    background: #2563eb !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3) !important;
}

.btn-plan-pro:hover,
.plan-pro a.order-button:hover {
    background: #1d4ed8 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.4) !important;
    color: #ffffff !important;
}

/* Card 3 Button: Purple */
.btn-plan-ultimate,
.plan-ultimate a.order-button {
    background: #8b5cf6 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(139, 92, 246, 0.3) !important;
}

.btn-plan-ultimate:hover,
.plan-ultimate a.order-button:hover {
    background: #7c3aed !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.4) !important;
    color: #ffffff !important;
}

/* Universal Orderform Action Buttons (Continue, Search, Add to Cart, Checkout, Check, Use, Transfer) */
#order-standard_cart .btn-primary,
#order-standard_cart .btn-success,
#order-standard_cart .btn-checkout,
#order-standard_cart #btnCheckout,
#order-standard_cart #btnCompleteOrder,
#order-standard_cart #btnCompleteProductConfig,
#order-standard_cart #btnDomainContinue,
#order-standard_cart #btnCheckAvailability,
#order-standard_cart #btnTransferDomain,
#order-standard_cart #btnGoToCart,
#order-standard_cart .btn-add-to-cart,
#order-standard_cart .domain-check-availability,
#order-standard_cart .field .btn,
#order-standard_cart .input-group-btn .btn,
#order-standard_cart .domain-selection-options .domain-input-group button[type="submit"],
#order-standard_cart .domain-selection-options .domain-input-group .btn-primary,
.domain-selection-options .domain-input-group button[type="submit"],
.domain-selection-options .domain-input-group .btn-primary,
.domain-input-group .btn-primary,
#domainregister .btn-primary,
#domaintransfer .btn-primary,
#domainowndomain .btn-primary,
#domainincart .btn-primary,
#domainsubdomain .btn-primary,
#frmProductDomain .domain-input-group button[type="submit"],
#frmProductDomain .btn-primary,
#useOwnDomain,
.cart-body .btn-primary,
.cart-body .btn-success,
.cart-sidebar .btn-primary,
.cart-sidebar .btn-success,
.order-summary .btn-success,
.order-summary .btn-primary,
.view-cart-items .btn-primary,
.view-cart-items .btn-success,
#order-premium_comparison .btn-primary,
#order-premium_comparison .btn-success {
    background: #2563eb !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-radius: 9999px !important;
    padding: 10px 22px !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25) !important;
    border: none !important;
    transition: all 0.2s ease !important;
    outline: none !important;
}

#order-standard_cart .btn-primary:hover,
#order-standard_cart .btn-success:hover,
#order-standard_cart .btn-checkout:hover,
#order-standard_cart #btnCheckout:hover,
#order-standard_cart #btnCompleteOrder:hover,
#order-standard_cart #btnCompleteProductConfig:hover,
#order-standard_cart #btnDomainContinue:hover,
#order-standard_cart #btnCheckAvailability:hover,
#order-standard_cart #btnTransferDomain:hover,
#order-standard_cart #btnGoToCart:hover,
#order-standard_cart .btn-add-to-cart:hover,
#order-standard_cart .domain-check-availability:hover,
#order-standard_cart .field .btn:hover,
#order-standard_cart .input-group-btn .btn:hover,
#order-standard_cart .domain-selection-options .domain-input-group button[type="submit"]:hover,
#order-standard_cart .domain-selection-options .domain-input-group .btn-primary:hover,
.domain-selection-options .domain-input-group button[type="submit"]:hover,
.domain-selection-options .domain-input-group .btn-primary:hover,
.domain-input-group .btn-primary:hover,
#domainregister .btn-primary:hover,
#domaintransfer .btn-primary:hover,
#domainowndomain .btn-primary:hover,
#domainincart .btn-primary:hover,
#domainsubdomain .btn-primary:hover,
#frmProductDomain .domain-input-group button[type="submit"]:hover,
#frmProductDomain .btn-primary:hover,
#useOwnDomain:hover,
.cart-body .btn-primary:hover,
.cart-body .btn-success:hover,
.cart-sidebar .btn-primary:hover,
.cart-sidebar .btn-success:hover,
.order-summary .btn-success:hover,
.order-summary .btn-primary:hover,
.view-cart-items .btn-primary:hover,
.view-cart-items .btn-success:hover,
#order-premium_comparison .btn-primary:hover,
#order-premium_comparison .btn-success:hover {
    background: #1d4ed8 !important;
    color: #ffffff !important;
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35) !important;
    transform: translateY(-1px) !important;
}

/* Sleek Modern Domain Input Row Alignment */
.domain-input-group .domains-row {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
}

.domain-input-group .input-group {
    display: flex !important;
    width: 100% !important;
    align-items: stretch !important;
}

.domain-input-group .input-group-addon,
.domain-input-group .input-group-prepend,
.domain-input-group .input-group-text {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    border-right: none !important;
    border-top-left-radius: 12px !important;
    border-bottom-left-radius: 12px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 600 !important;
    color: #64748b !important;
    height: 44px !important;
    font-size: 14px !important;
    margin: 0 !important;
}

.domain-input-group .input-group input.form-control,
.domain-input-group input[type="text"].form-control,
#registersld,
#transfersld,
#owndomainsld {
    border: 1px solid #cbd5e1 !important;
    border-radius: 0 12px 12px 0 !important;
    height: 44px !important;
    padding: 10px 16px !important;
    font-size: 15px !important;
    color: #0f172a !important;
    background-color: #ffffff !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.domain-input-group .input-group input.form-control:focus,
#registersld:focus,
#transfersld:focus,
#owndomainsld:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

.domain-input-group select.form-control,
#registertld,
#transfertld,
#owndomaintld {
    border: 1px solid #cbd5e1 !important;
    border-radius: 12px !important;
    height: 44px !important;
    padding: 8px 14px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    background-color: #ffffff !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: border-color 0.2s ease !important;
}

.domain-input-group select.form-control:focus,
#registertld:focus,
#transfertld:focus,
#owndomaintld:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

/* Order Summary Premium Light Gradient Card & Header */
#order-standard_cart .order-summary,
.order-summary {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.08), 0 4px 10px -6px rgba(15, 23, 42, 0.04) !important;
    overflow: hidden !important;
    margin-bottom: 24px !important;
}

/* Order Summary Header - Modern Gradient */
#order-standard_cart .order-summary h2,
#order-standard_cart .order-summary .header,
.order-summary h2,
.order-summary .header,
.order-summary h3 {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    padding: 14px 20px !important;
    margin: 0 !important;
    text-align: center !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-top-left-radius: 15px !important;
    border-top-right-radius: 15px !important;
}

/* Order Summary Inner Body */
#order-standard_cart .summary-container,
.summary-container {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
    padding: 18px 20px !important;
    border-radius: 0 0 15px 15px !important;
    font-size: 14px !important;
    border-top: none !important;
}

/* Total Due Today Highlight Box */
#order-standard_cart .order-summary .total-due-today,
.order-summary .total-due-today,
.summary-totals {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
    padding: 14px 18px !important;
    border-radius: 12px !important;
    border: 1px solid #bfdbfe !important;
    margin-top: 14px !important;
}

#order-standard_cart .order-summary .total-due-today .amt,
.order-summary .total-due-today .amt {
    color: #1e40af !important;
    font-weight: 800 !important;
    font-size: 24px !important;
}

/* Review & Checkout Cart Items Table & Gradient Header */
#order-standard_cart .view-cart-items-header,
.view-cart-items-header {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    padding: 14px 20px !important;
    margin: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

#order-standard_cart .view-cart-items,
.view-cart-items {
    margin: 0 0 24px 0 !important;
    border: 1px solid #cbd5e1 !important;
    border-top: none !important;
    border-radius: 0 0 16px 16px !important;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.06), 0 4px 10px -6px rgba(15, 23, 42, 0.04) !important;
    overflow: hidden !important;
    background: #ffffff !important;
}

#order-standard_cart .view-cart-items .item,
.view-cart-items .item {
    margin: 0 !important;
    padding: 16px 20px !important;
    background-color: #ffffff !important;
    border-bottom: 1px solid #f1f5f9 !important;
    font-size: 14px !important;
    transition: background-color 0.2s ease !important;
}

#order-standard_cart .view-cart-items .item:nth-child(even),
.view-cart-items .item:nth-child(even) {
    background-color: #f8fafc !important;
}

#order-standard_cart .view-cart-items .item:hover,
.view-cart-items .item:hover {
    background-color: #f1f5f9 !important;
}

#order-standard_cart .view-cart-items .item:last-child,
.view-cart-items .item:last-child {
    border-bottom: none !important;
}

/* Empty Cart Pill Button */
#order-standard_cart .empty-cart,
.empty-cart {
    margin-top: 12px !important;
}

#order-standard_cart .empty-cart .btn,
.empty-cart .btn {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    border-radius: 9999px !important;
    padding: 8px 18px !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25) !important;
    transition: all 0.2s ease !important;
}

#order-standard_cart .empty-cart .btn:hover,
.empty-cart .btn:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
    box-shadow: 0 6px 16px rgba(220, 38, 38, 0.35) !important;
    transform: translateY(-1px) !important;
}

/* Promo Code Tabs & Input Card */
#order-standard_cart .view-cart-tabs .nav-tabs,
.view-cart-tabs .nav-tabs {
    border-bottom: none !important;
}

#order-standard_cart .view-cart-tabs .nav-tabs a,
.view-cart-tabs .nav-tabs a {
    border-radius: 10px 10px 0 0 !important;
    font-weight: 600 !important;
    color: #475569 !important;
    padding: 10px 18px !important;
}

#order-standard_cart .view-cart-tabs .nav-tabs a.active,
.view-cart-tabs .nav-tabs a.active {
    background: #f8fafc !important;
    color: #2563eb !important;
    border: 1px solid #cbd5e1 !important;
    border-bottom-color: transparent !important;
}

#order-standard_cart .view-cart-tabs .tab-content,
.view-cart-tabs .tab-content {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 0 12px 12px 12px !important;
    padding: 18px !important;
}

/* Product Info Card - Soft Light Green Gradient Styling */
#order-standard_cart .product-info,
.product-info {
    background: linear-gradient(135deg, #f0fdf4 0%, #e6f4ea 50%, #dcfce7 100%) !important;
    border: 1.5px solid #bbf7d0 !important;
    border-radius: 18px !important;
    padding: 24px 28px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 10px 25px -5px rgba(22, 101, 52, 0.08), 0 4px 10px -6px rgba(22, 101, 52, 0.03) !important;
    color: #14532d !important;
    text-align: center !important;
}

#order-standard_cart .product-info .product-title,
.product-info .product-title {
    color: #15803d !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    margin-bottom: 14px !important;
    letter-spacing: -0.5px !important;
}

#order-standard_cart .product-info p,
.product-info p,
#order-standard_cart .product-info li,
.product-info li,
#order-standard_cart .product-info div,
.product-info div {
    color: #166534 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.6 !important;
}

/* ==========================================================================
   Konghosting Style Modern 2-Column Login Page
   ========================================================================== */
.miles-login-page-wrapper {
    min-height: calc(100vh - 80px);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 40px 20px !important;
    background-color: #f8fafc !important;
    width: 100% !important;
}

.miles-login-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 60px !important;
    max-width: 1080px !important;
    width: 100% !important;
    margin: 0 auto !important;
}

/* Left Column: Login Card */
.miles-login-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 24px !important;
    padding: 40px 36px !important;
    box-shadow: 0 20px 40px -15px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(15, 23, 42, 0.03) !important;
    width: 420px !important;
    max-width: 100% !important;
    flex: 0 0 420px !important;
    position: relative !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease !important;
    will-change: transform, box-shadow !important;
}

.miles-login-card:hover {
    transform: translateY(-6px) scale(1.008) !important;
    border-color: #bfdbfe !important;
    box-shadow: 0 30px 60px -15px rgba(37, 99, 235, 0.15), 0 12px 28px -5px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(37, 99, 235, 0.15) !important;
}

.miles-login-logo {
    text-align: center !important;
    margin-bottom: 28px !important;
    transition: transform 0.3s ease !important;
}

.miles-login-card:hover .miles-login-logo {
    transform: scale(1.03) !important;
}

.miles-login-logo img {
    max-height: 48px !important;
    width: auto !important;
}

.miles-login-logo .logo-text {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    text-decoration: none !important;
}

.miles-login-form .form-group {
    margin-bottom: 20px !important;
}

.miles-login-form label {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    margin-bottom: 6px !important;
    display: block !important;
}

.password-label-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 6px !important;
}

.password-label-row label {
    margin-bottom: 0 !important;
}

.forgot-pw-link {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #2563eb !important;
    text-decoration: none !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
    display: inline-block !important;
}

.forgot-pw-link:hover {
    color: #1d4ed8 !important;
    transform: translateX(2px) !important;
    text-decoration: underline !important;
}

.miles-login-form .form-control {
    height: 48px !important;
    border-radius: 12px !important;
    border: 1.5px solid #cbd5e1 !important;
    padding: 0 16px !important;
    font-size: 14px !important;
    color: #0f172a !important;
    background-color: #ffffff !important;
    box-shadow: none !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, background-color 0.25s ease !important;
}

.miles-login-form .form-control:hover {
    border-color: #93c5fd !important;
    background-color: #f8fafc !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.06) !important;
}

.miles-login-form .form-control:focus {
    border-color: #2563eb !important;
    background-color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.18), 0 6px 16px rgba(37, 99, 235, 0.12) !important;
    outline: none !important;
}

.miles-remember-row {
    margin: 16px 0 24px 0 !important;
}

.remember-me-label {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    cursor: pointer !important;
    margin-bottom: 0 !important;
    transition: color 0.2s ease !important;
}

.remember-me-label:hover {
    color: #1e293b !important;
}

.remember-me-label input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    accent-color: #2563eb !important;
    cursor: pointer !important;
    transition: transform 0.2s ease !important;
}

.remember-me-label:hover input[type="checkbox"] {
    transform: scale(1.15) !important;
}

.miles-login-btn {
    height: 48px !important;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    border: none !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px -4px rgba(37, 99, 235, 0.4) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    width: 100% !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
}

.miles-login-btn::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent) !important;
    transition: left 0.6s ease !important;
}

.miles-login-btn:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%) !important;
    transform: translateY(-3px) scale(1.015) !important;
    box-shadow: 0 14px 28px -4px rgba(37, 99, 235, 0.55), 0 6px 12px rgba(37, 99, 235, 0.3) !important;
}

.miles-login-btn:hover::after {
    left: 100% !important;
}

.miles-login-btn:active {
    transform: translateY(-1px) scale(0.99) !important;
    box-shadow: 0 6px 16px -2px rgba(37, 99, 235, 0.4) !important;
}

/* Divider & Social Section */
.miles-login-divider {
    position: relative !important;
    text-align: center !important;
    margin: 24px 0 20px 0 !important;
}

.miles-login-divider::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: 0 !important;
    height: 1px !important;
    background: #e2e8f0 !important;
}

.miles-login-divider span {
    position: relative !important;
    background: #ffffff !important;
    padding: 0 14px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}

.miles-social-section .btn {
    border-radius: 9999px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    color: #334155 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.25s ease !important;
}

.miles-social-section .btn:hover {
    border-color: #94a3b8 !important;
    background-color: #f8fafc !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08) !important;
}

/* Right Column: Promo Banner */
.miles-login-promo {
    flex: 1 !important;
    max-width: 560px !important;
    text-align: center !important;
    padding: 20px !important;
}

.promo-title {
    font-size: 34px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 0 10px 0 !important;
    letter-spacing: -0.5px !important;
    line-height: 1.2 !important;
}

.promo-desc {
    font-size: 16px !important;
    color: #64748b !important;
    margin-bottom: 22px !important;
    font-weight: 500 !important;
}

.miles-promo-buy-btn {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: #ffffff !important;
    border-radius: 9999px !important;
    padding: 10px 32px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    display: inline-block !important;
    text-decoration: none !important;
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    margin-bottom: 24px !important;
    border: none !important;
    position: relative !important;
    overflow: hidden !important;
}

.miles-promo-buy-btn::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent) !important;
    transition: left 0.5s ease !important;
}

.miles-promo-buy-btn:hover {
    transform: translateY(-3px) scale(1.03) !important;
    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.48) !important;
    color: #ffffff !important;
}

.miles-promo-buy-btn:hover::after {
    left: 100% !important;
}

/* Login Page Specific Background & Seamless Container */
body:has(.miles-login-page-wrapper) {
    background-color: #f8fafc !important;
}

body:has(.miles-login-page-wrapper) #main-body {
    background-color: #f8fafc !important;
    padding: 0 !important;
    margin: 0 !important;
}

body:has(.miles-login-page-wrapper) #main-body>.container {
    width: 100% !important;
    max-width: 1240px !important;
    padding: 0 20px !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

.miles-login-page-wrapper {
    min-height: calc(100vh - 60px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 40px 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.promo-svg-illustration {
    width: 100% !important;
    height: auto !important;
    max-height: 420px !important;
    filter: drop-shadow(0 20px 30px rgba(15, 23, 42, 0.06)) !important;
    transform: none !important;
    transition: none !important;
}

/* Responsive */
@media (max-width: 991px) {
    .miles-login-container {
        justify-content: center !important;
        padding: 10px !important;
    }

    .miles-login-promo {
        display: none !important;
    }
}