/* =====================================================================
   QloudRDP — theme-custom.css
   Official Lagom "Includes & Overwrites" mechanism — this file is NOT part
   of the vendor package, so it is never touched/overwritten by future
   lagom2 theme updates. Loaded automatically by includes/head.tpl after
   theme.css/site.css, with proper cache-busting.
   ===================================================================== */

/* ---- 1. Brand color variables (Primary=olive, Secondary=mint, gradient, buttons) ---- */
:root {
    --brand-primary: #3A422A;
    --brand-primary-lighter: #7DE3AC;
    --brand-primary-lighter-2: #85B2A0;
    --brand-primary-lighter-3: #556B60;
    --brand-primary-lighter-4: #FFF6D2;
    --brand-primary-darker: #F7CA00;
    --brand-primary-gradient-start: #3A422A;
    --brand-primary-gradient-end: #4AD48A;

    --brand-secondary: #4AD48A;
    --brand-secondary-lighter: #7DE3AC;
    --brand-secondary-lighter-2: #85B2A0;
    --brand-secondary-lighter-3: #556B60;
    --brand-secondary-darker: #3A422A;
    --brand-secondary-gradient-start: #3A422A;
    --brand-secondary-gradient-end: #4AD48A;

    --gray-gradient-start: #FFFDF5;
    --gray-gradient-end: #EAFBF1;

    /* "Light" button (used on dark/colored cards, e.g. "Pay Now") */
    --btn-light-bg: #fff;
    --btn-light-border: #fff;
    --btn-light-color: #3A422A;
    --btn-light-hover-bg: #F7CA00;
    --btn-light-hover-border: #F7CA00;
    --btn-light-hover-color: #3A422A;
    --btn-light-active-bg: #F7CA00;
    --btn-light-active-border: #F7CA00;
}

.lagom-dark-mode {
    --brand-primary: #3A422A;
    --brand-primary-darker: #F7CA00;
    --brand-primary-gradient-start: #3A422A;
    --brand-primary-gradient-end: #4AD48A;
    --brand-secondary: #4AD48A;
    --brand-secondary-darker: #3A422A;
    --brand-secondary-gradient-start: #3A422A;
    --brand-secondary-gradient-end: #4AD48A;
}

body {
    background: linear-gradient(rgb(255, 253, 245) 0%, rgb(234, 251, 241) 100%);
}



/* ---- 2. Sidebar boxes (Contacts / Shortcuts / all panel-sidebar except Client Details) ---- */
div[menuitemname="Contacts"].panel-sidebar,
div[menuitemname="Contacts"].panel-sidebar-primary,
div[menuitemname="Contacts"].panel-sidebar-secondary,
div[menuitemname="Contacts"].panel-sidebar-default,
div[menuitemname="Shortcuts"].panel-sidebar,
div[menuitemname="Shortcuts"].panel-sidebar-primary,
div[menuitemname="Shortcuts"].panel-sidebar-secondary,
div[menuitemname="Shortcuts"].panel-sidebar-default,
.panel-sidebar:not(.panel-summary):not([menuitemname="Client Details"]) {
    background: #fff !important;
    border: 1px solid rgba(0, 0, 0, .06) !important;
    border-radius: 14px !important;
    box-shadow: 0 0 32.4px rgba(19, 66, 137, .07) !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
}

.panel-sidebar:not(.panel-summary):not([menuitemname="Client Details"]) .panel-heading {
    padding-bottom: 14px !important;
    margin-bottom: 14px !important;
    border-bottom: 1px solid rgba(0, 0, 0, .08) !important;
}

/* Client Details - dark gradient card (per latest reference design) */
div[menuitemname="Client Details"].panel-sidebar {
    background: linear-gradient(160deg, rgb(58, 66, 42) 0%, rgb(85, 107, 96) 70%, rgb(74, 212, 138) 160%) !important;
    border: none !important;
    border-radius: 14px !important;
    box-shadow: 0 0 32.4px rgba(19, 66, 137, .07) !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
}

div[menuitemname="Client Details"] .panel-body,
div[menuitemname="Client Details"] .panel-body * {
    color: #fff !important;
}

.section-title,
.main-header-title {
    font-size: 20px !important;
    font-weight: 900 !important;
}

.main-header {
    padding-top: 20px;
}

.main-body {
    padding: 20px 0;
}

div[menuitemname="Client Details"] .panel-body .text-muted,
div[menuitemname="Client Details"] .panel-body small,
div[menuitemname="Client Details"] .panel-body address,
div[menuitemname="Client Details"] .panel-body p {
    color: rgba(255, 255, 255, .8) !important;
}

div[menuitemname="Client Details"] .btn,
div[menuitemname="Client Details"] button,
div[menuitemname="Client Details"] input[type="submit"],
div[menuitemname="Client Details"] input[type="button"] {
    background: #fff !important;
    border: 1px solid #fff !important;
    color: #17301F !important;
}

div[menuitemname="Client Details"] .btn:hover,
div[menuitemname="Client Details"] button:hover,
div[menuitemname="Client Details"] input[type="submit"]:hover,
div[menuitemname="Client Details"] input[type="button"]:hover {
    background: #F7CA00 !important;
    border-color: #F7CA00 !important;
}

/* Logout ("btn-outline") - transparent, cream outline instead of solid white */
div[menuitemname="Client Details"] .btn.btn-outline {
    background: transparent !important;
    border: 1px solid rgba(255, 246, 210, 0.3) !important;
    color: rgb(255, 246, 210) !important;
}

div[menuitemname="Client Details"] .btn.btn-outline:hover {
    background: rgba(255, 246, 210, 0.12) !important;
    border-color: rgba(255, 246, 210, 0.5) !important;
    color: rgb(255, 246, 210) !important;
}

div[menuitemname="Client Details"] .panel-footer {
    background: transparent !important;
    border-top: none !important;
}

/* ---- 3. "Light" button on dark/colored cards (Pay Now etc.) ---- */

.btn {
    border-radius: 10px !important;
}

.btn.btn-light,
a.btn-light,
button.btn-light,
input.btn-light {
    background: #fff !important;
    border-color: #fff !important;
    color: #3A422A !important;
}

.panel-footer {
    background: #fff;
}

.panel-cart .cart-heading .title-col,
.panel-cart .cart-heading .price-col {
    color: #000;
    font-weight: 800;
    font-size: 16px;
}

@media (min-width: 992px) {

    .lagom-layout-left-wide .app-nav-primary,
    .lagom-layout-left .app-nav-primary {
        background: linear-gradient(165deg, rgb(58, 66, 42) 0%, rgb(46, 53, 33) 55%, rgb(85, 107, 96) 100%);
    }
}

.main-top {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 40px;
    background: rgba(255, 253, 245, 0.85);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(58, 66, 42, 0.08);
    position: sticky;
    top: 0px;
    z-index: 100;
    box-shadow: 0 0 32.4px rgba(19, 66, 137, .07);
}


.btn.btn-light:hover,
.btn.btn-light:focus,
.btn.btn-light:active,
a.btn-light:hover,
a.btn-light:focus,
a.btn-light:active,
button.btn-light:hover,
button.btn-light:focus,
button.btn-light:active {
    background: #F7CA00 !important;
    border-color: #F7CA00 !important;
    color: #3A422A !important;
}

/* ---- 4. Panel title text style ---- */
.panel-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1f2129 !important;
}

/* ---- 5. Alerts: rounded corners everywhere + white/left-bar style for the
   dashboard Overdue/Unpaid Invoices banner (works even without the
   alert-primary class, in case the clientareahome.tpl edit is reverted) ---- */
.alert {
    border-radius: 12px !important;
}

.table-top {
    background: var(--ui-block-header-bg) !important;
}

.form-control {
    border-radius: 10px !important;
}


/* Generic rule: EVERY alert on the site (e.g. "Verify your email address" banner)
   gets the same white bg + colored left-bar look, regardless of where it's
   rendered from or which classes it carries */
.alert.alert-warning,
.alert.alert-danger,
.alert.alert-success,
.alert.alert-info {
    background: #fff !important;
    border-color: rgba(0, 0, 0, .08) !important;
    position: relative;
}

.alert.alert-warning:before,
.alert.alert-danger:before,
.alert.alert-success:before,
.alert.alert-info:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    border-radius: 16px 0 0 16px;
}

.alert.alert-warning:before {
    background: var(--brand-warning) !important;
}

.email-verification.alert {
    margin: 30px 40px 0px;
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff !important;
    border-width: 0px 0px 0px 5px !important;
    border-style: solid !important;
    border-color: var(--brand-warning) !important;
    border-image: none;
    border-radius: 14px;
    padding: 14px 18px;
    box-shadow: 0 0 32.4px rgba(19, 66, 137, .07);
}

.alert.alert-warning:before {
    background: transparent !important;
}

.email-verification.alert .container {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.dropdown-menu>li>a>img {
    height: 18px !important;
    margin-right: 8px !important;
}

@media (min-width: 992px) {

    .lagom-layout-left-wide .app-nav-menu .menu>li>a:not(.btn)>img,
    .lagom-layout-left-wide .app-nav-menu .menu>li>a:not(.btn)>svg {
        width: 20px !important;
    }
}

.email-verification.alert .alert-body>div {
    display: flex;
    align-items: center;
    gap: 12px;
}

.email-verification.alert .alert-body>div>i {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50% !important;
    background: rgba(247, 202, 0, .15) !important;
    color: rgb(184, 75, 0) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    margin: 0 !important;
    padding: 0 !important;
}

.email-verification.alert p,
.email-verification.alert .alert-body,
.email-verification.alert .alert-body * {
    color: #1f2129 !important;
    font-weight: 600 !important;
}

.email-verification.alert .alert-actions .close,
.email-verification.alert .alert-actions .close i {
    color: var(--brand-warning) !important;
    opacity: 1 !important;
}

@media (max-width: 767px) {
    .email-verification.alert {
        position: relative;
        padding: 16px 44px 16px 16px;
    }

    .email-verification.alert .container {
        display: block;
        width: 100%;
    }

    .email-verification.alert .alert-body {
        display: block !important;
    }

    .email-verification.alert .alert-body>div {
        display: block !important;
        margin-bottom: 12px;
    }

    .email-verification.alert .alert-body>div>i {
        margin-bottom: 8px !important;
    }

    .email-verification.alert #btnResendVerificationEmail {
        width: 100%;
        justify-content: center;
    }

    .email-verification.alert .alert-actions {
        position: absolute;
        top: 14px;
        right: 14px;
        margin: 0;
    }
}

.qloud-order-new-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #4AD48A;
    color: #17301F !important;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 999px;
    text-decoration: none !important;
    flex-shrink: 0;
    white-space: nowrap;
}

.qloud-order-new-btn:hover {
    background: #F7CA00;
}

/* Contacts panel - empty state wrapped in a dashed box (JS-built) */
.qloud-contacts-empty-box {
    border: 1px dashed rgba(0, 0, 0, .15);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.qloud-contacts-empty-box p,
.qloud-contacts-empty-box span {
    color: #9ca3af;
    margin-bottom: 8px;
}

.qloud-contacts-empty-box .btn,
.qloud-contacts-empty-box a {
    background: transparent !important;
    border: none !important;
    color: #B8860B !important;
    text-decoration: underline !important;
    font-weight: 600;
    padding: 0 !important;
    box-shadow: none !important;
}

.alert.alert-danger:before {
    background: var(--brand-danger) !important;
}

.alert.alert-success:before {
    background: var(--brand-success) !important;
}

.alert.alert-info:before {
    background: var(--brand-info) !important;
}

.alert.alert-warning .btn,
.alert.alert-warning .btn:hover {
    background: #3A422A !important;
    border-color: #3A422A !important;
    color: #fff !important;
}

/* When an alert sits inside the sticky .main-top bar, that container's own
   cream/blur background was showing through as a frame around the alert's
   white box - make it match white in that specific case only */
.main-top:has(.alert) {
    background: #fff !important;
    backdrop-filter: none !important;
}

.main-top .alert {
    margin: 0 !important;
}

/* ---- 6. Dashboard stat tiles (Services / Domains / Unpaid Invoices / Tickets) ---- */
.tiles .tile {
    display: block !important;
    position: relative !important;
    border: 1px solid rgba(0, 0, 0, .06) !important;
    border-radius: 14px !important;
    padding: 20px !important;
    box-shadow: 0 0 32.4px rgba(19, 66, 137, .07) !important;
    background: #fff !important;
    min-height: auto !important;
    text-align: left !important;
}

.tiles .tile-title {
    order: 1 !important;
    margin-bottom: 4px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #6b7280 !important;
    text-align: left !important;
}

.tiles .tile-stat {
    order: 2 !important;
    margin-left: 0 !important;
    padding-top: 0 !important;
    font-size: 32px !important;
    font-weight: 700 !important;
}

.tiles .tile-stat:not(.text-danger) {
    color: #1f2129 !important;
}

.tiles .tile-icon-absolute {
    top: 16px !important;
    right: 16px !important;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #EAFBF1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tiles .tile-icon-absolute i {
    font-size: 18px;
    line-height: 1;
}

.tiles .tile-icon-absolute i:not(.text-danger) {
    color: #3A422A !important;
}

@media (max-width: 767px) {
    .tiles .tile {
        position: relative !important;
    }

    .tiles .tile-icon-absolute {
        position: absolute !important;
        top: 16px !important;
        right: 16px !important;
        left: auto !important;
        bottom: auto !important;
        margin: 0 !important;
    }

    .tiles .tile-stat,
    .tiles .tile-stat.text-danger {
        color: #1f2129 !important;
    }
}

/* ---- 7. Panel container style (all .panel boxes) ---- */
.panel {
    border-radius: 16px !important;
    box-shadow: 0 0 32.4px rgba(19, 66, 137, .07) !important;
    border: none !important;
}

/* ---- 8. Panel-default heading transparent background ---- */
.panel-default>.panel-heading {
    background: transparent !important;
}

.panel-check.checked,
.panel-form {
    background: #fff;
}

input.form-control,
select.form-control {
    border-radius: 10px;
}

/* ---- 9b. Native select/checkbox/radio accent color (checkboxes/radios only - browsers don't
   let CSS control the native select popup's row-highlight color) ---- */
input[type="checkbox"],
input[type="radio"] {
    accent-color: #3A422A;
}

/* ---- 9c. Custom dropdown (replaces native select popup, injected by core/hooks/qloudrdp-custom.php) ---- */
.qloud-select-wrap {
    position: relative;
    width: 100%;
    flex: 1 1 auto;
    min-width: 0;
}

.qloud-select-native {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
}

.qloud-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 10px;
    padding: 10px 16px;
    cursor: pointer;
    font-size: 14px;
    color: #1f2129;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qloud-select-trigger:after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid #6b7280;
    border-bottom: 2px solid #6b7280;
    transform: rotate(45deg);
    margin-left: 12px;
    flex-shrink: 0;
    transition: transform .15s ease;
}

.qloud-select-trigger.open:after {
    transform: rotate(-135deg);
}

.qloud-select-list {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(19, 66, 137, .12);
    z-index: 20;
    max-height: 240px;
    overflow-y: auto;
}

.qloud-select-list.open {
    display: block;
}

.qloud-select-option {
    padding: 10px 16px;
    font-size: 14px;
    color: #1f2129;
    cursor: pointer;
}

.qloud-select-option:hover {
    background: #EAFBF1;
}

.qloud-select-option.active {
    background: #3A422A;
    color: #fff;
    font-weight: 600;
    position: relative;
}

.qloud-select-option.active:after {
    content: "";
    position: absolute;
    right: 16px;
    top: 50%;
    width: 6px;
    height: 10px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: translateY(-65%) rotate(45deg);
}

/* ---- 9. Configure Product page sections (Server Location dropdown, Configure Server
   hostname/password/nameservers, etc.) - unified white card look ---- */
#frmConfigureProduct .section:not(:has(> #productConfigurableOptions)) {
    background: #fff !important;
    border: none !important;
    border-radius: 14px !important;
    box-shadow: 0 0 32.4px rgba(19, 66, 137, .07) !important;
    padding: 20px !important;
    margin-bottom: -30px !important;
}

/* Outer wrapper that just groups the configurable-option cards - no card look of its own */
#frmConfigureProduct .section:has(> #productConfigurableOptions) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
}

#frmConfigureProduct .section-header {
    margin-bottom: 16px !important;
}

/* All section titles (e.g. "Server Location", "Configure Server") - bold heading with divider */
#frmConfigureProduct .section-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1f2129 !important;
    margin: 0 !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid rgba(0, 0, 0, .08) !important;
}

#frmConfigureProduct .section .panel.panel-form {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

#frmConfigureProduct .section .panel-body {
    padding: 0 !important;
}

/* Nested panels inside a card (e.g. billing-cycle Monthly/Semi-Annually/Annually
   choice boxes) inherit the global .panel shadow - remove it so cards don't show
   a "shadow within a shadow" / extra background box look */
#frmConfigureProduct .section .panel {
    box-shadow: none !important;
}

#frmConfigureProduct .section .panel.panel-check {
    position: relative;
    border: 1px solid rgba(0, 0, 0, .08) !important;
    border-radius: 10px !important;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

#frmConfigureProduct .section .panel.panel-check:hover {
    border-color: #F7CA00 !important;
}

#frmConfigureProduct .section .panel.panel-check.checked {
    border: 2px solid rgba(74, 212, 138, .5) !important;
    background: rgba(74, 212, 138, .06) !important;
    box-shadow: 0 8px 20px rgba(74, 212, 138, .2) !important;
}

#frmConfigureProduct .section .panel.panel-check.checked:hover {
    border-color: #F7CA00 !important;
}

#frmConfigureProduct .section .panel.panel-check.checked:after {
    content: "";
    position: absolute;
    top: 12px;
    right: 12px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #4AD48A;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 11px 11px;
}

/* Hide a field's label whenever its input is visually hidden, so no orphan labels
   remain when a field is conditionally hidden (now or in any future scenario) */
#frmConfigureProduct .form-group:has(> input.hidden),
#frmConfigureProduct .form-group:has(> input[hidden]),
#frmConfigureProduct .form-group:has(> input[type="hidden"]),
#frmConfigureProduct .row.hidden .form-group,
#frmConfigureProduct .row[style*="display: none"] .form-group,
#frmConfigureProduct .row[style*="display:none"] .form-group {
    display: none !important;
}

/* Hide the whole hidden row itself (not just the label/input inside it),
   so no empty input boxes are left visible */
#frmConfigureProduct .row.hidden {
    display: none !important;
}

/* Remove the row/column's own left-right padding inside a card, so its content
   aligns flush with the card's own padding (was creating an extra inset gap) */
#frmConfigureProduct .section .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#frmConfigureProduct .section .row>[class*="col-"]:first-child {
    padding-left: 0 !important;
}

#frmConfigureProduct .section .row>[class*="col-"]:last-child {
    padding-right: 0 !important;
}

/* ---- 10. Order/Configuration Summary card - light background instead of dark gradient ---- */
.panel.panel-summary {
    --primary-block-bg: #fff;
    --primary-block-title-color: #1f2129;
    --primary-block-subtitle-color: #6b7280;
    --primary-block-text-color: #6b7280;
    --primary-block-text-faded-color: #9ca3af;
    --primary-block-total-font-color: #1f2129;
    --primary-block-divider-color: rgba(0, 0, 0, .08);
    --primary-block-divider-active-color: rgba(0, 0, 0, .08);
    --primary-block-link-color: #3A422A;
    --primary-block-link-hover-color: #F7CA00;
    --primary-block-link-active-color: #F7CA00;
    --primary-block-link-icon-color: #3A422A;
    --primary-block-link-icon-hover-color: #F7CA00;
    --primary-block-link-icon-active-color: #F7CA00;
    --primary-block-btn-bg: #3A422A;
    --primary-block-btn-color: #fff;
    --primary-block-btn-border-color: #3A422A;
    --primary-block-btn-hover-bg: #F7CA00;
    --primary-block-btn-hover-color: #3A422A;
    --primary-block-btn-hover-border-color: #F7CA00;
    --primary-block-btn-active-bg: #F7CA00;
    --primary-block-btn-active-border-color: #F7CA00;
    --primary-block-btn-outline-color: #3A422A;
    --primary-block-btn-outline-border-color: rgba(0, 0, 0, .16);
    --primary-block-btn-outline-hover-bg: rgba(0, 0, 0, .06);
    --primary-block-btn-outline-hover-border-color: rgba(0, 0, 0, .16);
    --primary-block-btn-outline-hover-color: #3A422A;
}

.panel.panel-summary {
    background: #fff !important;
    border: 1px solid rgba(247, 202, 0, .35) !important;
    box-shadow: 0 0 32.4px rgba(19, 66, 137, .07) !important;
}

/* Included config-option row (e.g. "Server Location: India  $0.00 USD") -
   its background/text variables were designed for the old dark gradient card,
   so force a plain readable light-gray row here */
.panel-summary .summary-list-configoptions {
    background: #f3f4f6 !important;
}

.panel-summary .summary-list-configoptions .item-name,
.panel-summary .summary-list-configoptions .item-optionname,
.panel-summary .summary-list-configoptions .item-value,
.panel-summary .summary-list-configoptions .item-value * {
    color: #374151 !important;
}

/* Product name + price line (e.g. "Admin RDP - Nova   $107.89 USD/yr") -
   force visible text regardless of which CSS-variable chain resolves */
.panel-summary .summary-list .list-item,
.panel-summary .summary-list .list-item-main,
.panel-summary .summary-list .list-item-main .item-name,
.panel-summary .summary-list .list-item-main .item-value,
.panel-summary .summary-list .list-item-main .item-value * {
    color: #1f2129 !important;
}

.panel-summary .summary-list .list-item.faded,
.panel-summary .summary-list .list-item .item-value .line-through {
    color: #9ca3af !important;
}

/* #producttotal is filled entirely by JS (recalctotals()) - blanket-force every
   text node inside it to a readable dark color, then restore muted/badge/button
   colors afterwards with more specific rules */
#producttotal,
#producttotal * {
    color: #1f2129 !important;
}

#producttotal .faded,
#producttotal .text-faded,
#producttotal .line-through,
#producttotal small {
    color: #9ca3af !important;
}

#producttotal .btn,
#producttotal .btn * {
    color: #fff !important;
}

#producttotal .btn.btn-light,
#producttotal .btn.btn-light * {
    color: #3A422A !important;
}

/* ---- 11. Product validation-errors alert - circular icon badge, bold red heading ---- */
#containerProductValidationErrors {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px !important;
}

#containerProductValidationErrors .alert-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(220, 38, 38, .1);
    color: #dc2626 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    position: static;
}

#containerProductValidationErrors .alert-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #dc2626 !important;
    margin-bottom: 8px !important;
}

#containerProductValidationErrors .alert-body,
#containerProductValidationErrors ul,
#containerProductValidationErrors li {
    color: #dc2626 !important;
}

#containerProductValidationErrors ul {
    margin: 0;
    padding-left: 18px;
}

/* ---- 12. Left sidebar navigation - bold rounded active-item pill ---- */
.lagom-layout-left .app-nav-default .app-nav-menu .menu>li,
.lagom-layout-left-wide .app-nav-default .app-nav-menu .menu>li {
    margin: 2px 12px !important;
}

.lagom-layout-left .app-nav-default .app-nav-menu .menu>li>a,
.lagom-layout-left-wide .app-nav-default .app-nav-menu .menu>li>a {
    border-radius: 10px !important;
}

.lagom-layout-left .app-nav-default .app-nav-menu .menu>li.active:not(.open)>a:not(.btn),
.lagom-layout-left .app-nav-default .app-nav-menu .menu>li.open:not(.open)>a:not(.btn),
.lagom-layout-left-wide .app-nav-default .app-nav-menu .menu>li.active:not(.open)>a:not(.btn),
.lagom-layout-left-wide .app-nav-default .app-nav-menu .menu>li.open:not(.open)>a:not(.btn) {
    background: #4AD48A !important;
    border-radius: 10px !important;
}

.lagom-layout-left .app-nav-default .app-nav-menu .menu>li.active:not(.open)>a:not(.btn),
.lagom-layout-left .app-nav-default .app-nav-menu .menu>li.active:not(.open)>a:not(.btn) i,
.lagom-layout-left-wide .app-nav-default .app-nav-menu .menu>li.active:not(.open)>a:not(.btn),
.lagom-layout-left-wide .app-nav-default .app-nav-menu .menu>li.active:not(.open)>a:not(.btn) i {
    color: #17301F !important;
    font-weight: 600 !important;
}

/* ---- 13. Topbar - rounded search input ---- */
.app-nav-top-search input,
.top-nav-search input,
input[name="search"],
.search-form input {
    border-radius: 10px !important;
}

/* ---- 15. Sidebar shortcut-style lists (Client Shortcuts, Actions, etc.) -
   colored bullet dot instead of the default icon, on any plain white
   panel-sidebar list-group (not the colored gradient Client Details card). ---- */
.panel-sidebar:not(.panel-summary):not([menuitemname="Client Details"]) .list-group-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.panel-sidebar:not(.panel-summary):not([menuitemname="Client Details"]) .list-group-item i,
.panel-sidebar:not(.panel-summary):not([menuitemname="Client Details"]) .list-group-item .ls {
    display: none;
}

.panel-sidebar:not(.panel-summary):not([menuitemname="Client Details"]) .list-group-item:before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4AD48A;
    flex-shrink: 0;
}

.panel-sidebar:not(.panel-summary):not([menuitemname="Client Details"]) .list-group-item,
.panel-sidebar:not(.panel-summary):not([menuitemname="Client Details"]) .list-group-item a {
    color: #1f2129 !important;
    font-weight: 600 !important;
}

/* ---- 16. Profile card avatar circle with initials (built by qloudrdp-custom.php JS) ---- */
.qloud-avatar-row {
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 246, 210, 0.16);
    padding-bottom: 13px;
}

.panel-sidebar.panel-client-details strong {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.4px;
    margin-bottom: 0px;
}

.qloud-avatar-row h1,
.qloud-avatar-row h2,
.qloud-avatar-row h3,
.qloud-avatar-row h4,
.qloud-avatar-row h5 {
    margin: 0 !important;
}

.qloud-avatar,
div[menuitemname="Client Details"] .qloud-avatar {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #4AD48A;
    color: rgb(37, 48, 29) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
    margin-bottom: 0 !important;
}

/* ---- 17. Dashboard home panels (Active Products/Services, Recent Support Tickets,
   Recent News) - header row with title + "View all" link, clean list rows ---- */
.panel-active-services .panel-heading,
.panel-support-tickets .panel-heading,
.panel-default .panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px !important;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    margin-bottom: 0;
}

.panel-active-services .panel-heading .panel-title,
.panel-support-tickets .panel-heading .panel-title,
.panel-default .panel-heading .panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.panel-active-services .panel-heading .panel-title>i,
.panel-support-tickets .panel-heading .panel-title>i {
    display: none;
}

.panel-active-services .panel-heading .pull-right,
.panel-support-tickets .panel-heading .pull-right {
    margin-left: auto;
}

.panel-active-services .panel-heading .pull-right .btn,
.panel-support-tickets .panel-heading .pull-right .btn {
    background: transparent !important;
    border: none !important;
    color: #3A422A !important;
    font-weight: 600 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.panel-active-services .list-group-item {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px;
    padding: 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, .06) !important;
    background: #fff !important;
    border-radius: 16px !important;
}

.panel-support-tickets .list-group-item {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px;
    padding: 16px 4px !important;
    border-bottom: 1px solid rgba(0, 0, 0, .06) !important;
    background: #fff !important;
}

/* Real DOM (confirmed via inspector): icon/name/status/actions are nested
   inside .list-group-item-content, not direct children of .list-group-item */
.panel-active-services .list-group-item-content {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center !important;
    width: 100%;
    padding: 16px 4px;
    gap: 12px;
}

.panel-active-services .list-group-item-name {
    flex: 1 1 auto;
    min-width: 0;
}

/* Push the status badge (and everything after it: our billing block, the
   Manage button) to the right, leaving the icon+name on the left.
   Order: Renews/Price, then Active badge, then Manage. */
.panel-active-services .list-group-item-status {
    flex: 0 0 auto;
    order: 2;
}

/* Fallback: if a row has no Renews/Price block (data unavailable), the
   status badge itself needs the auto-push instead */
.panel-active-services .list-group-item-content:not(:has(.qloud-service-billing)) .list-group-item-status {
    margin-left: auto !important;
}

.panel-active-services .list-group-item-actions {
    flex: 0 0 auto;
    order: 3;
    margin-left: 16px !important;
}

.panel-active-services .qloud-service-billing {
    margin-left: auto !important;
    order: 1;
}

.panel-active-services .list-group-item:last-child,
.panel-support-tickets .list-group-item:last-child {
    border-bottom: none !important;
}

.panel-active-services .list-group-item>i,
.panel-support-tickets .list-group-item>i {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    background: #EAFBF1;
    color: #3A422A;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

/* Empty-state block ("No tickets open", "No recent news") - centered icon + text + link */
.no-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 32px 16px !important;
}

.no-data-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #EAFBF1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3A422A;
    margin-bottom: 4px;
}

.no-data .text-light {
    color: #1f2129;
    font-weight: 600;
}

/* ---- 18. Cart config-option row (e.g. "Server Location: India") - bullet point
   instead of a highlighted background box ---- */
.cart-item-config {
    background: transparent !important;
    padding: 0 !important;
    margin-top: 4px !important;
    border-radius: 0 !important;
}

.config-option {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 4px 0 !important;
}

.config-option-title {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding-left: 0 !important;
    font-size: 14px !important;
    font-weight: bold;
}

.config-option-title:before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4AD48A;
    flex-shrink: 0;
}

.panel-sidebar.panel-client-contacts .panel-footer .btn:not(.btn-outline) {
    color: #fff !important;
}

/* ---- 19. Generic form-validation alerts (register/checkout/login etc., via
   includes/alert.tpl) - same circular-badge + bold-heading + red-list look as
   the product configure-page validation errors. Scoped to alerts that actually
   contain error text/list - an empty placeholder alert (e.g. unused promo-code
   error box) stays untouched/hidden instead of showing an empty card+icon. ---- */
.alert.alert-danger.hidden,
.alert.alert-danger.d-none,
.alert.alert-danger:not(:has(.alert-body li:not(.d-none):not(.hidden))) {
    display: none !important;
}

.alert.alert-danger:not(.hidden):not(.d-none):has(.alert-body li:not(.d-none):not(.hidden)) {
    display: flex !important;
    align-items: flex-start;
    gap: 16px;
    padding: 20px !important;
}

.alert.alert-danger:not(:has(> .alert-icon))::before {
    content: "!";
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    flex-shrink: 0;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px;
    border-radius: 50% !important;
    background: rgba(220, 38, 38, .1) !important;
    color: #dc2626;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    margin: 0 !important;
}

.alert.alert-danger .alert-body strong,
.alert.alert-danger .alert-title {
    display: block !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #dc2626 !important;
    margin-bottom: 8px !important;
}

.alert.alert-danger .alert-body ul {
    margin: 0 !important;
    padding-left: 18px !important;
}

.alert.alert-danger .alert-body ul li,
.alert.alert-danger .alert-body p {
    color: #dc2626 !important;
}

/* ---- 20. Promotion / promo-code search bar ---- */
.search-box {
    background: linear-gradient(160deg, rgb(58, 66, 42) 0%, rgb(85, 107, 96) 70%, rgb(74, 212, 138) 160%) !important;
}

.search-box .btn,
.search-box button {
    background: #fff !important;
    border-color: #fff !important;
    color: #17301F !important;
}

.search-box .btn:hover,
.search-box button:hover {
    background: #F7CA00 !important;
    border-color: #F7CA00 !important;
    color: #17301F !important;
}

/* ---- 21. Checkout Billing Address - only Country stays visible, all other
   fields (Company Name, Tax ID, Street Address, Address 2, City, State,
   Postcode) are removed from view. Their "required" attribute is stripped
   and a placeholder value is auto-filled by qloudrdp-custom.php JS, so
   checkout doesn't get blocked by WHMCS's server-side validation either. ---- */
[class*="col-"]:has(#inputCompanyName),
[class*="col-"]:has(#inputTaxId),
[class*="col-"]:has(#inputAddress1),
[class*="col-"]:has(#inputAddress2),
[class*="col-"]:has(#inputCity),
[class*="col-"]:has(#state),
[class*="col-"]:has(#stateselect),
[class*="col-"]:has(#inputPostcode) {
    display: none !important;
}

.form-group:has(#inputCompanyName),
.form-group:has(#inputTaxId),
.form-group:has(#inputAddress1),
.form-group:has(#inputAddress2),
.form-group:has(#inputCity),
.form-group:has(#state),
.form-group:has(#stateselect),
.form-group:has(#inputPostcode) {
    display: none !important;
}

/* State is sometimes swapped by WHMCS's own JS from a text input (#state)
   to a country-specific <select id="stateselect"> - hide it directly too,
   in case it isn't a direct child of the same .form-group structure */
#stateselect,
#stateselect+* {
    display: none !important;
}

/* ---- 22. Payment Method selector - all gateways side by side in one row
   instead of stacked full-width cards. Scoped to #paymentGatewaysDetails only
   - [data-inputs-container] is a SHARED attribute also used by the unrelated
   "Billing Details" existing-account/new-account selector, which must keep
   its normal stacked/expandable behavior untouched. ---- */
#paymentGatewaysDetails [data-inputs-container] {
    display: flex !important;
    flex-wrap: wrap;
    gap: 14px;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible;
}

#paymentGatewaysDetails [data-inputs-container] .panel.panel-check {
    position: relative;
    flex: 1 1 0;
    min-width: 160px;
    border-radius: 12px !important;
    border: 1px solid rgba(0, 0, 0, .08) !important;
    box-shadow: 0 0 20px rgba(19, 66, 137, .06) !important;
    background: #fff !important;
    margin: 0 !important;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

#paymentGatewaysDetails [data-inputs-container] .panel.panel-check:hover {
    border-color: rgba(74, 212, 138, .5) !important;
}

#paymentGatewaysDetails [data-inputs-container] .panel.panel-check.checked {
    border: 2px solid #4AD48A !important;
    background: rgba(74, 212, 138, .06) !important;
    box-shadow: 0 8px 20px rgba(74, 212, 138, .18) !important;
}

#paymentGatewaysDetails [data-inputs-container] .panel.panel-check .check-content {
    display: none !important;
}

#paymentGatewaysDetails [data-inputs-container] .panel.panel-check .panel-heading.check label {
    display: flex !important;
    align-items: center;
    justify-content: end;
    gap: 10px;
}

#paymentGatewaysDetails [data-inputs-container] .panel.panel-check .panel-heading.check label>* {
    margin: 0 !important;
}

#paymentGatewaysDetails [data-inputs-container] .panel.panel-check .check-icon {
    max-width: none;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

#paymentGatewaysDetails [data-inputs-container] .panel.panel-check .check-icon img,
#paymentGatewaysDetails [data-inputs-container] .panel.panel-check .check-icon svg {
    width: auto !important;
    height: 22px !important;
    max-width: 180px;
}

.no-data a {
    display: inline-block;
    margin-top: 4px !important;
    background: rgb(255, 246, 210) !important;
    border: 1px solid rgb(247, 202, 0) !important;
    color: rgb(58, 66, 42) !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    padding: 9px 18px !important;
    border-radius: 10px !important;
    text-decoration: none !important;
}

/* ---- 23. Active Products/Services row - Renews/Price block (injected by
   qloudrdp-custom.php JS from live hosting data) ---- */
.qloud-service-billing {
    display: flex;
    gap: 24px;
    margin-left: auto;
    padding-right: 16px;
}

.qloud-service-billing-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.qloud-service-billing-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #9ca3af;
}

.qloud-service-billing-value {
    font-size: 13px;
    font-weight: 600;
    color: #1f2129;
}

/* ---- 23b. Active Products/Services row - clean stacked layout on mobile
   (icon+name+status on row 1, Renews/Price on row 2, Manage full-width on
   row 3), using display:contents to flatten .list-group-item-content so
   its children become direct grid items alongside the icon. ---- */
@media (max-width: 767px) {
    .panel-active-services .list-group-item {
        display: grid !important;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "icon name status"
            "billing billing billing"
            "actions actions actions";
        column-gap: 12px;
        row-gap: 10px;
        padding: 16px 4px !important;
    }

    .panel-active-services .list-group-item>i {
        grid-area: icon;
    }

    .panel-active-services .list-group-item-content {
        display: contents;
    }

    .panel-active-services .list-group-item-name {
        grid-area: name;
        align-self: center;
    }

    .panel-active-services .list-group-item-status {
        grid-area: status;
        align-self: center;
        margin-left: 0 !important;
    }

    .panel-active-services .qloud-service-billing {
        grid-area: billing;
        margin-left: 0 !important;
        padding-right: 0;
        justify-content: flex-start;
        gap: 32px;
    }

    .panel-active-services .qloud-service-billing-col {
        align-items: flex-start;
    }

    .panel-active-services .qloud-service-billing-value,
    .panel-active-services .qloud-service-billing-label {
        white-space: nowrap;
    }

    .panel-active-services .list-group-item-actions {
        grid-area: actions;
        margin-left: 0 !important;
        width: 100%;
    }

    .panel-active-services .list-group-item-actions .btn {
        width: 100%;
    }
}

/* ---- 24. Active Products/Services row icon - rounded light badge square ---- */
.panel-active-services .graphic-item {
    display: flex !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 10px;
    background: #EAFBF1;
    align-items: center;
    justify-content: center;
    color: #3A422A;
}

.panel-active-services .graphic-item i {
    font-size: 18px;
    color: #3A422A;
}

.panel-active-services .graphic-item svg {
    width: 20px;
    height: 20px;
}

/* ---- 25. Topbar - Cart / Notifications / My Account as bordered pills ---- */
.main-top li {
    margin-right: 0 !important;
}

li[menuitemname="View Cart"]>a,
li[menuitemname="Notifications"]>a,
li[menuitemname="My Account"]>a,
li[menuitemname="Currency"]>a,
.main-top li:nth-last-child(2)>a,
.main-top li:last-child>a {
    display: flex !important;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    border-radius: 10px;
    padding: 8px 14px;
    box-shadow: none;
    transition: background .15s ease;
}

li[menuitemname="View Cart"]>a:hover,
li[menuitemname="Notifications"]>a:hover,
li[menuitemname="Currency"]>a:hover,
.main-top li:nth-last-child(2)>a:not(.qloud-account-toggle):hover {
    background: rgba(74, 212, 138, .14) !important;
}

/* Mint tint is now always-on for this item, not just on hover - the
   menuitemname="My Account" attribute wasn't actually present/matching on
   this topbar link (it's only confirmed to exist on the sidebar box of
   the same name), so this is tagged directly via
   tagAccountDropdownToggle() in qloudrdp-custom.php, matched by its
   "Client #..." text instead. */
li[menuitemname="My Account"]>a,
.qloud-account-toggle,
li[menuitemname="My Account"]>a:hover,
.qloud-account-toggle:hover {
    background: rgba(74, 212, 138, .14) !important;
}

li[menuitemname="View Cart"]>a .item-text,
li[menuitemname="Currency"]>a .item-text,
.main-top li:nth-last-child(2)>a .item-text {
    font-weight: 700 !important;
    color: #1f2129 !important;
}

.main-top .ls-caret {
    color: #9ca3af;
    font-size: 10px;
}

li[menuitemname="View Cart"]>a>i,
li[menuitemname="View Cart"]>a img.qloud-topbar-svg-icon,
.main-top li:last-child>a>i,
.main-top li:last-child>a>svg,
.main-top li:last-child>a img.qloud-topbar-svg-icon,
li[menuitemname="Notifications"]>a img.qloud-topbar-svg-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    background: #EAFBF1;
    color: #3A422A !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.qloud-topbar-svg-icon {
    padding: 6px;
    box-sizing: border-box;
    object-fit: contain;
}

/* Account dropdown (and any other dropdown-menu-item list) - darker,
   bolder text + darker icons for better readability */
.main-top .dropdown-menu-item>a,
.main-top .dropdown-menu-item>a * {
    color: #000 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    opacity: 1 !important;
}

.main-top .dropdown-menu-item>a {
    display: flex !important;
    align-items: center;
    gap: 10px;
}

.main-top .dropdown-menu-item>a i {
    width: 18px;
    flex-shrink: 0;
    text-align: center;
    font-size: 15px;
    color: #000 !important;
}

.main-top .dropdown-menu-item>a:hover,
.main-top .dropdown-menu-item>a:hover * {
    color: #2f9e63 !important;
}

.main-top .dropdown-menu-item>a:hover {
    background: rgba(74, 212, 138, .08) !important;
}

li[menuitemname="Notifications"]>a {
    padding: 8px;
}

li[menuitemname="Notifications"]>a span:not(.badge) {
    display: none;
}

.qloud-topbar-avatar {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 8px;
    background: #4AD48A;
    color: #17301F;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
}

.qloud-topbar-account-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    text-align: left;
}

.qloud-topbar-account-name {
    font-size: 13px;
    font-weight: 600;
    color: #1f2129;
}

.qloud-topbar-account-id {
    font-size: 11px;
    color: #9ca3af;
}

.qloud-topbar-caret {
    width: 8px;
    height: 8px;
    border-right: 2px solid #6b7280;
    border-bottom: 2px solid #6b7280;
    transform: rotate(45deg);
    flex-shrink: 0;
    margin-left: 4px;
    margin-right: 10px;
}

/* "New Contact..." button (Contacts panel) - white instead of dark */
div[menuitemname="Contacts"] .btn {
    background: #fff !important;
    border: 1px solid rgba(0, 0, 0, .12) !important;
    color: #1f2129 !important;
}

/* ---- 26. Dark-background solid buttons (Primary/Success, e.g. "Add New") -
   white text/icon guaranteed. Does NOT include the "-faded" variants
   (btn-primary-faded/btn-success-faded), which are genuinely light-background
   buttons (fixed at the source: brand.css Lighter-3 value) and need their
   existing dark text, not white. ---- */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-success,
.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    color: #fff !important;
}

.btn-primary i,
.btn-primary span,
.btn-success i,
.btn-success span {
    color: inherit !important;
}

/* ---- 27. Universal button color - match the Login page's Submit button
   (.btn-primary) exactly everywhere, overriding any semantic variant
   (success/info/warning/danger/default). Explicitly excludes the buttons we
   deliberately made white/cream elsewhere in this file. ---- */
.btn:not(.btn-light):not(.btn-outline):not(.no-data a):not(div[menuitemname="Contacts"] .btn):not(div[menuitemname="Client Details"] .btn):not(.cart-item-pricing-dropdown .btn):not(.cart-item-actions .btn-icon):not(#btnEmptyCart):not(.btn-close-alert):not(.close):not(#btnEmailVerificationClose):not(.view-filter-btns .dropdown-toggle):not(.qloud-view-details-btn),
button[type="submit"]:not(.btn-light):not(.btn-outline),
input[type="submit"]:not(.btn-light):not(.btn-outline) {
    background: #4AD48A !important;
    border-color: #4AD48A !important;
    color: #fff !important;
}

.btn:not(.btn-light):not(.btn-outline):not(.no-data a):not(div[menuitemname="Contacts"] .btn):not(div[menuitemname="Client Details"] .btn):not(.cart-item-pricing-dropdown .btn):not(.cart-item-actions .btn-icon):not(#btnEmptyCart):not(.btn-close-alert):not(.close):not(#btnEmailVerificationClose):not(.view-filter-btns .dropdown-toggle):not(.qloud-view-details-btn) i,
.btn:not(.btn-light):not(.btn-outline):not(.no-data a):not(div[menuitemname="Contacts"] .btn):not(div[menuitemname="Client Details"] .btn):not(.cart-item-pricing-dropdown .btn):not(.cart-item-actions .btn-icon):not(#btnEmptyCart):not(.btn-close-alert):not(.close):not(#btnEmailVerificationClose):not(.view-filter-btns .dropdown-toggle):not(.qloud-view-details-btn) span {
    color: inherit !important;
}

.btn:not(.btn-light):not(.btn-outline):not(.no-data a):not(div[menuitemname="Contacts"] .btn):not(div[menuitemname="Client Details"] .btn):not(.cart-item-pricing-dropdown .btn):not(.cart-item-actions .btn-icon):not(#btnEmptyCart):not(.btn-close-alert):not(.close):not(#btnEmailVerificationClose):not(.view-filter-btns .dropdown-toggle):not(.qloud-view-details-btn):hover,
button[type="submit"]:not(.btn-light):not(.btn-outline):hover,
input[type="submit"]:not(.btn-light):not(.btn-outline):hover {
    background: #F7CA00 !important;
    border-color: #F7CA00 !important;
    color: #3A422A !important;
}

.table-container {
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 0 32.4px rgba(19, 66, 137, .07) !important;
}

/* ---- 27. Footer copyright text - black+bold, brand name in theme green
   (span injected by qloudrdp-custom.php's wrapFooterBrand()) ---- */
.main-footer {
    margin-top: 26px !important;
}

.footer-copyright {
    color: #1f2129 !important;
    font-weight: 700 !important;
}

.footer-copyright .qloud-footer-brand {
    color: #4AD48A !important;
    font-weight: 700 !important;
}

/* ---- 28. Store product cards (/store/... product list) - horizontal
   layout: title+price (left) | feature chips (middle) | Order Now (right).
   Flattens .package-side-left/.package-body/.package-content with
   display:contents so .package-header, ul.package-features and
   .package-footer become direct grid items of .package. ---- */
.section.products .row {
    display: block !important;
}

.section.products .row>.col {
    width: 100% !important;
    flex: none !important;
    max-width: 100% !important;
}

.section.products .package {
    display: grid !important;
    grid-template-columns: minmax(180px, 240px) 1fr auto;
    grid-template-areas: "header features footer";
    align-items: center !important;
    gap: 28px;
    height: auto !important;
    min-height: auto !important;
    padding: 28px 32px !important;
    border: 1px solid rgba(0, 0, 0, .06) !important;
    border-radius: 16px !important;
    box-shadow: 0 0 32.4px rgba(19, 66, 137, .07) !important;
    background: #fff !important;
    margin-bottom: 20px !important;
}

.section.products .package-side-left,
.section.products .package-body,
.section.products .package-content {
    display: contents !important;
}

.product-info ul,
.section.products .package-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.section.products .package-content ul li {
    border-radius: 5px !important;
}

.section.products .package-header {
    grid-area: header;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    text-align: left !important;
}

.section.products .package-header * {
    text-align: left !important;
    justify-content: flex-start !important;
}

.section.products .package-title {
    position: relative;
    font-size: 22px !important;
    font-weight: 800 !important;
    letter-spacing: -.3px;
    color: #1f2129 !important;
    margin: 0 0 14px !important;
    padding-left: 14px !important;
}

.section.products .package-title:before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    bottom: 3px;
    width: 4px;
    border-radius: 2px;
    background: linear-gradient(180deg, #3A422A, #4AD48A);
}

.section.products .package-header .price-starting-from {
    display: inline-block;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #2f9e63 !important;
    font-weight: 800 !important;
    background: rgba(74, 212, 138, .14) !important;
    padding: 4px 10px;
    border-radius: 6px;
    margin-bottom: 10px;
}

.section.products .package-header .price {
    color: #1f2129 !important;
}

.section.products .package-header .price-amount {
    font-size: 30px !important;
    font-weight: 800 !important;
    letter-spacing: -.5px;
    color: #1f2129 !important;
}

.section.products .package-header .price-cycle {
    display: inline-block;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #6b7280 !important;
    background: #f3f4f6;
    padding: 3px 10px;
    border-radius: 6px;
    margin-top: 8px;
}

.section.products .package-features {
    grid-area: features;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(140px, 1fr));
    gap: 10px;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 28px !important;
    border-left: 1px solid rgba(0, 0, 0, .08);
    border-right: 1px solid rgba(0, 0, 0, .08);
}

.section.products .package-features li {
    display: flex !important;
    align-items: center;
    gap: 8px;
    background: #f7f7f5 !important;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #1f2129 !important;
}

.qloud-feature-icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: #3A422A;
}

.qloud-feature-icon svg {
    width: 100%;
    height: 100%;
}

.section.products .package-footer {
    grid-area: footer;
    display: flex !important;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

.section.products .package-footer .package-price,
.section.products .package-footer .package-qty {
    display: none !important;
}

.section.products .btn-order-now {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #3A422A !important;
    border-color: #3A422A !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 15px 34px !important;
    border-radius: 999px !important;
    white-space: nowrap;
    box-shadow: 0 10px 22px rgba(58, 66, 42, .25);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}

.section.products .btn-order-now:after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
}

.section.products .btn-order-now:hover {
    background: #F7CA00 !important;
    border-color: #F7CA00 !important;
    color: #3A422A !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(247, 202, 0, .35);
}

@media (max-width: 991px) {
    .section.products .package {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "features"
            "footer";
    }

    .section.products .package-features {
        grid-template-columns: repeat(2, 1fr);
    }

    .section.products .package-footer {
        align-items: stretch;
    }

    .section.products .btn-order-now {
        width: 100%;
        text-align: center;
    }
}

/* ---- 29. Left-nav Products submenu - custom SVG icon per product group
   (Admin RDP / Tally on Cloud), swapped in by qloudrdp-custom.php's
   swapProductGroupIcons() since these auto-generated menu items have no
   admin-exposed icon field. ---- */
.qloud-menu-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    margin-right: 6px;
    vertical-align: middle;
}

/* ---- 30. Contact Us page - visual polish. Scoped to body.page-contact
   (WHMCS adds this class automatically for contact.php) so it never
   touches the shared .login wrapper markup used by the real login page. ---- */
body.page-contact .login.login-lg {
    max-width: 640px;
    margin: 40px auto !important;
}

body.page-contact .login-wrapper {
    position: relative;
    border-radius: 20px !important;
    box-shadow: 0 0 40px rgba(19, 66, 137, .08) !important;
    border: 1px solid rgba(0, 0, 0, .06) !important;
    overflow: hidden;
}

body.page-contact .login-wrapper:before {
    content: "";
    display: block;
    height: 6px;
    background: linear-gradient(90deg, #3A422A, #4AD48A);
}

body.page-contact .login-body {
    padding: 44px 48px !important;
}

body.page-contact .login-header {
    text-align: left !important;
    margin-bottom: 28px !important;
}

body.page-contact .login-title {
    font-size: 28px !important;
    font-weight: 800 !important;
    letter-spacing: -.5px;
    color: #1f2129 !important;
    margin-bottom: 6px !important;
}

body.page-contact .login-header:after {
    content: "We'd love to hear from you.";
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    margin-top: 4px;
}

body.page-contact .form-group {
    margin-bottom: 22px !important;
}

body.page-contact .control-label {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #1f2129 !important;
    margin-bottom: 6px !important;
}

body.page-contact .form-control {
    border: 1px solid rgba(0, 0, 0, .1) !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}

body.page-contact .form-control:focus {
    border-color: #4AD48A !important;
    box-shadow: 0 0 0 3px rgba(74, 212, 138, .15) !important;
    outline: none;
}

body.page-contact #inputName,
body.page-contact #inputEmail,
body.page-contact #inputSubject {
    padding-left: 42px !important;
    background-repeat: no-repeat;
    background-position: 14px center;
    background-size: 18px 18px;
}

body.page-contact #inputName {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='1.8'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 3.5-6 8-6s8 2 8 6'/%3E%3C/svg%3E");
}

body.page-contact #inputEmail {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='1.8'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E");
}

body.page-contact #inputSubject {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='1.8'%3E%3Cpath d='M3 12l9-9h7v7l-9 9-7-7z'/%3E%3Ccircle cx='15' cy='6' r='1.3' fill='%239ca3af'/%3E%3C/svg%3E");
}

body.page-contact #inputMessage {
    padding-left: 42px !important;
    padding-top: 14px !important;
    background-repeat: no-repeat;
    background-position: 14px 16px;
    background-size: 18px 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='1.8'%3E%3Cpath d='M21 12a8 8 0 10-3.5 6.6L21 20l-1.2-3.5A8 8 0 0021 12z'/%3E%3C/svg%3E");
}

body.page-contact .form-actions {
    margin-top: 8px !important;
    justify-content: flex-start !important;
}

body.page-contact .form-actions .btn-primary {
    display: inline-flex !important;
    align-items: center;
    background: #3A422A !important;
    border-color: #3A422A !important;
    color: #fff !important;
    font-weight: 700 !important;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: 13px !important;
    padding: 14px 40px !important;
    border-radius: 999px !important;
    box-shadow: 0 10px 22px rgba(58, 66, 42, .22);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}

body.page-contact .form-actions .btn-primary:hover {
    background: #F7CA00 !important;
    border-color: #F7CA00 !important;
    color: #3A422A !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(247, 202, 0, .35);
}

@media (max-width: 767px) {
    body.page-contact .login-body {
        padding: 32px 24px !important;
    }
}

/* ---- 31. Breadcrumb - more readable link text, current page in brand green ---- */
.breadcrumb li a {
    color: #3A422A !important;
    font-weight: 600 !important;
}

.breadcrumb li a:hover {
    color: #4AD48A !important;
    text-decoration: underline;
}

.breadcrumb li.active {
    color: #4AD48A !important;
    font-weight: 700 !important;
}

/* ---- 32. Generic "message" component (empty-states like News/Tickets/
   Invoices/Domains/Downloads/KB, but also success/processing/redirect
   messages like "Order placed" and the gateway-redirect "Pay Now" screen -
   they all share this .message markup) - icon in a soft mint circle badge
   + bolder centered title, instead of a bare icon floating on its own.
   The svg-icon.tpl partial reads color from these CSS vars, so overriding
   them locally recolors the icon without touching the shared global
   default. ---- */
.message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 56px 24px !important;
}

.message .message-image,
.message .message-icon {
    --svg-icon-color-2: #3A422A;
    --svg-icon-color-3: #3A422A;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #EAFBF1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 18px !important;
}

.message .message-image svg {
    width: 32px !important;
    height: 32px !important;
}

.message .message-icon i {
    font-size: 30px;
    color: #3A422A;
}

.message .message-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1f2129 !important;
    margin: 0 0 8px !important;
}

.message .message-desc {
    font-size: 14px !important;
    color: #6b7280 !important;
    margin: 0 0 20px !important;
    max-width: 480px;
}

/* ---- 33. Dashboard stat tile icons (Services/Quotes/Unpaid Invoices/
   Tickets) - custom SVGs swapped in by qloudrdp-custom.php's
   swapDashboardTileIcons(), sized to sit inside the existing
   .tile-icon-absolute circle badge. ---- */
.qloud-tile-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

/* ---- 34. Card wrapping the "no data" empty-state - same soft shadow used
   on panels/sidebar boxes everywhere else. Uses :has() to grab whichever
   wrapper element it is without needing to know its exact class. ---- */
.product-config-info .panel-body h2 {
    font-size: 18px;
    border-bottom: 1px solid rgba(0, 0, 0, .08) !important;
    margin-bottom: 20px !important;
}

ul.top-nav>li>a:not(.btn)>.ls-caret {
    margin-left: 0px;
}

/* ---- 35. "Server Location" + "Operating System" side by side as two
   separate cards in one row (moved together by qloudrdp-custom.php's
   pairServerLocationAndOS()) ---- */
.qloud-paired-row {
    display: flex;
    gap: 20px;
    align-items: stretch;
    margin-bottom: -30px !important;
}

.qloud-paired-row:last-child {
    margin-bottom: initial !important;
}

/* The row itself now also carries the plain "section" class (for whatever
   else in the page keys off it), which would otherwise pick up the global
   white-card look (section 9) too - it should stay a transparent flex
   container; the two children inside it are the actual visible cards. */
#frmConfigureProduct .qloud-paired-row.section:not(:has(> #productConfigurableOptions)) {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.qloud-paired-row>.section {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    margin-top: 0px;
}

/* The section-level negative margin-bottom hack (section 9) is ID-scoped
   and out-specificities a plain class override, so it was still pulling
   "Configure Server" up and overlapping it. Cancel it here with a
   matching-specificity selector - the row itself now carries that same
   -30px offset instead (above), applied once instead of per-card. */
#frmConfigureProduct .qloud-paired-row>.section:not(:has(> #productConfigurableOptions)) {
    margin-bottom: 0 !important;
}

.qloud-paired-row>.section>.section-body {
    flex: 1;
    display: flex;
}

.qloud-paired-row>.section>.section-body>.panel {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.qloud-paired-row>.section>.section-body>.panel>.panel-body {
    flex: 1;
}

@media (max-width: 767px) {
    .qloud-paired-row {
        flex-direction: column;
    }
}

/* ---- 36. "Save X%" billing-cycle label - success green instead of danger red/pink ---- */
.label.label-save {
    background: rgba(74, 212, 138, .15) !important;
    color: #2f9e63 !important;
}

#frmConfigureProduct .section:not(:has(> #productConfigurableOptions)):last-child {
    margin-bottom: initial;
}

/* ---- 37. Review & Checkout cart row - price/cycle dropdown without a
   filled background, more breathing room around the edit/delete icon
   buttons, and a red "Empty Cart" button (destructive action) ---- */
.cart-item-pricing-dropdown .btn.dropdown-toggle {
    background: transparent !important;
    border: 1px solid rgba(0, 0, 0, .12) !important;
    color: #1f2129 !important;
}

.cart-item-pricing-dropdown .btn.dropdown-toggle:hover {
    background: rgba(74, 212, 138, .08) !important;
    border-color: #4AD48A !important;
    color: #1f2129 !important;
}

.cart-item-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 16px;
}

.cart-item-actions a.btn-icon {
    background: #fff !important;
    border: 1px solid #4AD48A !important;
    color: #4AD48A !important;
}

.cart-item-actions a.btn-icon i {
    color: inherit !important;
}

.cart-item-actions a.btn-icon:hover {
    background: rgba(74, 212, 138, .1) !important;
    border-color: #4AD48A !important;
    color: #4AD48A !important;
}

.cart-item-actions button.btn-icon.btn-hover-danger {
    background: #fff !important;
    border: 1px solid #dc3545 !important;
    color: #dc3545 !important;
}

.cart-item-actions button.btn-icon.btn-hover-danger i {
    color: inherit !important;
}

.cart-item-actions button.btn-icon.btn-hover-danger:hover {
    background: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #fff !important;
}

#btnEmptyCart {
    background: #fff !important;
    border: 1px solid rgba(220, 53, 69, .35) !important;
    color: #dc3545 !important;
}

#btnEmptyCart i {
    color: inherit !important;
}

#btnEmptyCart:hover {
    background: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #fff !important;
}

/* ---- 38. "View Cart" item-count badge - small crisp pill instead of the
   plain dark circle, matching brand colors ---- */
li[menuitemname="View Cart"] .badge {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    margin: 0 !important;
    border-radius: 999px !important;
    background: #4AD48A !important;
    color: #17301F !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1;
}

/* ---- 39. Checkout "secure environment / IP logged" notice - same card
   design as the email-verification banner (white card, colored left
   border, circular icon badge) instead of plain unstyled text. ---- */
.alert.checkout-security-msg {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff !important;
    border-width: 0px 0px 0px 5px !important;
    border-style: solid !important;
    border-color: var(--brand-warning) !important;
    border-image: none;
    border-radius: 14px !important;
    padding: 14px 18px !important;
    box-shadow: 0 0 32.4px rgba(19, 66, 137, .07);
}

.alert.checkout-security-msg .alert-body {
    position: relative;
    display: block;
    padding-left: 50px;
    color: #1f2129 !important;
}

.alert.checkout-security-msg .alert-body strong {
    display: inline-block;
    background: rgba(247, 202, 0, .15) !important;
    color: rgb(184, 75, 0) !important;
    padding: 2px 8px;
    border-radius: 6px;
}

.alert.checkout-security-msg .alert-body>i {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50% !important;
    background-color: rgba(247, 202, 0, .15) !important;
    margin: 0 !important;
    padding: 0 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(184,75,0)' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 018 0v4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
}

.alert.checkout-security-msg .alert-body>i:before {
    content: none !important;
}

.panel-switch {
    margin-bottom: -23px !important;
}

.section .section-header {
    margin-bottom: 18px !important;
}

.section .section-header>:last-child {
    margin-bottom: 0px !important;
}


.search-box,
.panel.panel-cart {
    margin-bottom: -20px !important;
}

#paymentGatewaysDetails {
    margin-top: 22px !important;
    margin-bottom: -20px !important;
}

/* ---- 40. Login page (side-illustration layout) - fit exactly within the
   viewport instead of scrolling. The native theme forces
   overflow-y:scroll on .main-body-content unconditionally, which reserves
   a scrollbar/lets the pane grow taller than the viewport even when the
   form itself fits fine. ---- */
html:has(body.page-login .main-body-has-sidebar-illustration) {
    height: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
}

body.page-login:has(.main-body-has-sidebar-illustration) {
    height: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
}

.main-body-has-sidebar-illustration {
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    overflow-x: hidden;
}

.main-body-has-sidebar-illustration .main-body-content {
    position: relative;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: scroll;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box;
}

.main-body-has-sidebar-illustration .main-body-content .login {
    position: absolute;
    top: 50% !important;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0 !important;
    max-width: 100%;
    box-sizing: border-box;
}

/* ---- 41. Login card - more attractive/professional presentation instead
   of a plain bordered box floating in a lot of empty space ---- */
body.page-login .login-wrapper,
body.page-register .login-wrapper {
    position: relative;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06) !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 50px rgba(19, 66, 137, .1) !important;
    overflow: hidden;
}

body.page-login .login-body,
body.page-register .login-body {
    padding: 32px 40px 20px !important;
}

body.page-login .login-footer,
body.page-register .login-footer {
    margin-bottom: 0 !important;
}

body.page-login .login-language,
body.page-register .login-language {
    padding: 14px 0 !important;
    margin: 0 !important;
}

body.page-login .login-form .form-group,
body.page-register .login-form .form-group {
    margin-bottom: 16px !important;
}

.login-header {
    margin-bottom: 20px;
}



body.page-login .login-form label,
body.page-register .login-form label,
body.page-login .login-footer .text-light,
body.page-register .login-footer .text-light,
body.page-login .login-language,
body.page-register .login-language {
    color: #4b4f58 !important;
    font-weight: 600 !important;
}

body.page-login .login-body>p:first-child,
body.page-register .login-body>p:first-child {
    display: table;
    background: rgba(74, 212, 138, .12) !important;
    color: #2f9e63 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 5px 14px;
    border-radius: 999px;
    margin: 0 auto 2px !important;
}

body.page-login .login-title,
body.page-register .login-title {
    font-size: 28px !important;
    font-weight: 800 !important;
    letter-spacing: -.5px;
    color: #1f2129 !important;
    margin-bottom: -12px !important;
}

body.page-login .form-control.input-lg,
body.page-register .form-control.input-lg {
    border-radius: 10px !important;
    padding: 12px 16px !important;
    border: 1px solid rgba(0, 0, 0, .1) !important;
}

body.page-login .form-control.input-lg:focus,
body.page-register .form-control.input-lg:focus {
    border-color: #4AD48A !important;
    box-shadow: 0 0 0 3px rgba(74, 212, 138, .15) !important;
}

body.page-login .btn.btn-lg.btn-primary.btn-block,
body.page-register .btn.btn-lg.btn-primary.btn-block {
    border-radius: 999px !important;
    padding: 14px !important;
    font-weight: 700 !important;
    letter-spacing: .02em;
    box-shadow: 0 10px 22px rgba(58, 66, 42, .18);
}

@media (max-width: 767px) {
    html:has(body.page-login .main-body-has-sidebar-illustration) {
        height: auto;
        overflow: visible;
    }

    body.page-login:has(.main-body-has-sidebar-illustration) {
        height: auto;
        overflow: visible;
    }

    .main-body-has-sidebar-illustration {
        height: auto !important;
        min-height: 100vh !important;
        max-height: none !important;
    }

    .main-body-has-sidebar-illustration .main-body-content {
        position: static;
        height: auto;
        overflow-y: visible;
    }

    .main-body-has-sidebar-illustration .main-body-content .login {
        position: static;
        top: auto !important;
        left: auto;
        transform: none;
    }
}

/* ---- 42. Login page links (Forgot?, Create a New Account) - brand green ---- */
body.page-login .login-body a,
body.page-register .login-body a,
body.page-login .login-footer a,
body.page-register .login-footer a {
    color: #2f9e63 !important;
    font-weight: 600 !important;
}

body.page-login .login-body a:hover,
body.page-register .login-body a:hover,
body.page-login .login-footer a:hover,
body.page-register .login-footer a:hover {
    color: #4AD48A !important;
    text-decoration: underline;
}

/* ---- 43. Register page section headings (Personal Information, Billing
   Address, Additional Information, Account Security) - smaller, matching
   the rest of the site's section-title sizing instead of the oversized
   native default. ---- */
body.page-register .section-title {
    font-size: 18px !important;
}

/* ---- 44. Payment gateway logos (Razorpay/PayPal/CoinPayments) - the
   native theme forces .check-icon img through filter:brightness(0)
   invert(1), turning the logo pure white. That was meant for the old
   dark-background tab style; our cards (section 22) are white now, so a
   white-on-white logo was invisible (e.g. razorpay.png). ---- */
#paymentGatewaysDetails .check-icon img {
    filter: none !important;
}

/* ---- 45. Order Summary sidebar (checkout page) - force sticky, since it
   scrolled away with the page instead of staying in view ---- */
.main-sidebar .sidebar-sticky {
    position: sticky !important;
    top: 96px !important;
    align-self: flex-start;
    z-index: 2;
}

/* ---- 46. "Secure environment / IP logged" notice - hidden on checkout ---- */
.alert.checkout-security-msg {
    display: none !important;
}

/* ---- 47. Alert close ("X") buttons - consistent dark green everywhere,
   regardless of which alert type it's closing ---- */
.btn-close-alert,
.alert .btn.btn-icon.close,
#btnEmailVerificationClose {
    background: #1a7a4c !important;
    border-color: #1a7a4c !important;
    color: #fff !important;
}

.btn-close-alert i,
.alert .btn.btn-icon.close i,
#btnEmailVerificationClose i {
    color: #fff !important;
}

.btn-close-alert:hover,
.alert .btn.btn-icon.close:hover,
#btnEmailVerificationClose:hover {
    background: #145c3a !important;
    border-color: #145c3a !important;
}


.client-home-alert.alert-warning {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff !important;
    border-width: 1px 1px 1px 4px !important;
    border-style: solid !important;
    border-color: rgba(0, 0, 0, .06) rgba(0, 0, 0, .06) rgba(0, 0, 0, .06) var(--brand-warning) !important;
    padding: 14px 18px !important;
}

.client-home-alert.alert-warning:before {
    content: none !important;
}

.client-home-alert.alert-warning>.alert-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, .05) !important;
    color: var(--brand-warning) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    margin: 0 !important;
}

.client-home-alert.alert-warning>.alert-body {
    color: #1f2129 !important;
    flex: 1;
    margin: 0 !important;
}

.client-home-alert.alert-warning>.alert-body * {
    color: #1f2129 !important;
}

.client-home-alert.alert-warning>.alert-body strong {
    color: #2f9e63 !important;
    font-weight: 700 !important;
}

.client-home-alert.alert-warning>.alert-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin: 0 !important;
}

/* ---- 48. "Billing Details" existing/new-account accordion (checkout page)
   - each option as its own gapped rounded card, instead of directly-touching
   stacked panels whose individual shadows were bleeding into a diagonal
   seam artifact between them. #paymentGatewaysDetails's own [data-inputs-
   container] is styled separately (section 22) with higher (ID-scoped)
   specificity, so it's unaffected by this. ---- */
.panel-group.panel-group-condensed[data-inputs-container]:not(#paymentGatewaysDetails *) {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.panel-group.panel-group-condensed[data-inputs-container]:not(#paymentGatewaysDetails *)>.panel.panel-check {
    border-radius: 14px !important;
    border: 1px solid rgba(0, 0, 0, .08) !important;
    box-shadow: 0 0 20px rgba(19, 66, 137, .06) !important;
    overflow: hidden;
}

.panel-group.panel-group-condensed[data-inputs-container]:not(#paymentGatewaysDetails *)>.panel.panel-check.checked {
    border-color: #4AD48A !important;
}

.panel-group-condensed {
    background: transparent !important;
}

.panel-body.social-wide h6 {
    font-weight: 800 !important;
    margin-bottom: 10px !important;
    font-size: 16px;
}

/* ---- 49. "Join our mailing list" section (checkout page) - title+desc and
   the Receive Emails toggle in one row, instead of stacked. Matched
   structurally via :has() (the only .section on the page whose body holds
   a .panel-switch) so no template edit or JS class injection is needed -
   effectively a "custom class" scoped purely in CSS. ---- */
.qloud-mailinglist-row.section,
.section:has(>.section-body>.panel.panel-switch) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.section:has(>.section-body>.panel.panel-switch)>.section-header {
    margin-bottom: 0 !important;
    flex: 1;
}

.section:has(>.section-body>.panel.panel-switch)>.section-body {
    flex-shrink: 0;
}

@media (max-width: 599px) {
    .section:has(>.section-body>.panel.panel-switch) {
        flex-direction: column;
        align-items: stretch;
    }
}

.section:has(>.section-body>.panel.panel-switch) .section-desc,
.section:has(>.section-body>.panel.panel-switch) .section-desc * {
    color: #4b4f58 !important;
}

/* ---- 51. Products & Services table - "View" filter pill (border only),
   bold table headers, visible pagination ---- */
.view-filter-btns .dropdown-toggle {
    background: transparent !important;
    border: 1px solid rgba(0, 0, 0, .15) !important;
}

.view-filter-btns .dropdown-toggle,
.view-filter-btns .dropdown-toggle .filter-name,
.view-filter-btns .dropdown-toggle i {
    color: #1f2129 !important;
}

.table-container th {
    font-weight: 700 !important;
    color: #1f2129 !important;
}

.dataTables_paginate .pagination>li>a,
.dataTables_paginate .pagination>li>span {
    color: #1f2129 !important;
    background: #fff !important;
    border: 1px solid rgba(0, 0, 0, .12) !important;
}

.dataTables_paginate .pagination>li.active>a,
.dataTables_paginate .pagination>li.active>span {
    background: #3A422A !important;
    border-color: #3A422A !important;
    color: #fff !important;
}

.dataTables_paginate .pagination>li.disabled>a,
.dataTables_paginate .pagination>li.disabled>span {
    color: #9ca3af !important;
    background: #f7f7f5 !important;
}

/* "View Details" link built by qloudrdp-custom.php's simplifyProductActionsMenu(),
   replacing the three-dot menu when there's only one action */
.qloud-view-details-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    background: #fff !important;
    border: 1px solid rgba(0, 0, 0, .12) !important;
    border-radius: 10px !important;
    color: #1f2129 !important;
    font-weight: 700 !important;
    padding: 8px 18px !important;
    box-shadow: 0 4px 12px rgba(74, 212, 138, .3);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}

.qloud-view-details-btn:after {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
}

.qloud-view-details-btn:hover {
    background: #F7CA00 !important;
    border-color: #F7CA00 !important;
    color: #3A422A !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(247, 202, 0, .3);
}

/* ---- 52. Products & Services table - general polish (row hover, spacing,
   sort-arrow color, length/pagination controls) ---- */
.table-list td,
.table-list th {
    padding: 16px 12px !important;
    border-color: rgba(0, 0, 0, .06) !important;
}

.table-list tbody tr {
    transition: background .15s ease;
}

.table-list tbody tr:hover,
.table-list tbody tr:hover td {
    background: #f9f9f9 !important;
    cursor: pointer;
}

.table-list th .sorting-arrows {
    opacity: .5;
}

.table-list td:first-child {
    font-weight: 600;
}

.dataTables_length .form-control,
.dataTables_length select {
    border-radius: 8px !important;
}

.dataTables_paginate .pagination>li>a,
.dataTables_paginate .pagination>li>span {
    border-radius: 8px !important;
    margin: 0 2px;
}

/* ---- 53. Products & Services table - product icon badge (matching the
   dashboard's Active Products/Services row) and Status as a pill instead
   of bare dot+text. Icon injected by qloudrdp-custom.php's
   addProductRowIcon() only when the product has no admin-configured
   graphic of its own. ---- */
.table-list .graphic-item {
    display: flex !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 10px;
    background: #EAFBF1;
    align-items: center;
    justify-content: center;
    color: #3A422A;
}

.table-list .graphic-item i {
    font-size: 18px;
    color: #3A422A;
}

.table-list .graphic-item svg {
    width: 20px;
    height: 20px;
}

.table-list .status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .04);
    font-weight: 600;
}

/* Pricing column ($15.99 USD / Monthly) and Next Due Date column - bolder,
   darker primary value + a small muted uppercase label for the cycle */
.table-list td[data-order] {
    font-weight: 700 !important;
    color: #1f2129 !important;
}

.table-list td[data-order] .small {
    display: block;
    margin-top: 3px;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #9ca3af !important;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.table-list td>span.text-nowrap {
    font-weight: 700 !important;
    color: #1f2129 !important;
}

/* "View [All Entries]" filter label + "Show [10] entries" length control -
   readable dark text instead of low-contrast gray */
.table-top label,
.dataTables_length,
.dataTables_length label {
    color: #1f2129 !important;
    font-weight: 600 !important;
}

.view-filter-btns .dropdown-toggle .filter-name {
    font-weight: 700 !important;
}

.dataTables_length select {
    color: #1f2129 !important;
    font-weight: 700 !important;
}

/* "My Invoices" unpaid-balance summary card - the message text was white
   on a white panel-summary background, invisible until selected */
.panel.panel-summary .price-title {
    color: #1f2129 !important;
    font-weight: 600 !important;
}

/* ---- 54. Left sidebar nav - remove the native rightward-shift-on-hover/
   active animation on both top-level items (Dashboard/Services/Billing/
   Support) and submenu items (My Invoices/My Quotes/...). Every one of
   those shifts is driven by transform:translateX(var(--...-hover-padding-h))
   and every one of those variables ultimately aliases back to this single
   root token - overriding it here avoids fighting the native rules'
   selector specificity entirely (a plain transform:none override would
   lose to their much more specific compound selectors). ---- */
:root {
    --ui-nav-v-link-hover-padding-h: 0px !important;
}

/* ---- 55. Recent Support Tickets dashboard panel - real DOM (confirmed via
   inspector): each row is an <a> containing one <span class="status-modern">
   that wraps <b>ID</b><strong> - title</strong><label class="status">badge
   </label><br><small>date</small> in that source order. Styled IN NATURAL
   ORDER (no flex/order tricks - an earlier attempt at reordering rendered
   wrong and is not worth fighting further) - the badge floats right so it
   sits at the top regardless of title length, id+title flow normally
   before it, and the date drops to its own line below via clear:both. ---- */
.panel-support-tickets .list-group-item {
    display: block !important;
    padding: 18px 20px 18px 24px !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid rgba(0, 0, 0, .06) !important;
    border-left: 3px solid rgba(0, 0, 0, .06);
    transition: background .15s ease, border-color .15s ease;
}

.panel-support-tickets .list-group-item:hover {
    background: #f9f9f9 !important;
    border-left-color: #4AD48A;
}

.panel-support-tickets .status-modern {
    display: block !important;
    width: 100%;
}

.panel-support-tickets .status-modern>b {
    color: #9ca3af !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    margin-right: 6px;
}

.panel-support-tickets .status-modern>strong {
    font-weight: 700 !important;
    font-size: 15px !important;
    font-style: normal !important;
    color: #1f2129 !important;
}

.panel-support-tickets .status-modern>small {
    display: block;
    clear: both;
    margin-top: 6px !important;
    color: #9ca3af !important;
    font-size: 12px !important;
}

.panel-support-tickets .status-modern>label.status {
    float: right;
    margin-left: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--status-color, #6b7280) 14%, white) !important;
    color: var(--status-color, #6b7280) !important;
    font-weight: 700 !important;
    font-size: 10px !important;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.panel-support-tickets .status-modern>label.status:before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}

.main-top .container {
    padding-left: 0px;
    padding-right: 0px;
}

/* ---- 56. "Knowledgebase" sidebar link - hidden everywhere it appears ---- */
[menuitemname="Knowledgebase"] {
    display: none !important;
}

/* ---- 57. Open Ticket page - "Choose a Support Department" list, using
   the confirmed template markup (supportticketsubmit-stepone.tpl):
   a.list-group-item.has-icon > i.list-group-item-icon + div.list-group-
   item-body > div.list-group-item-heading + p.list-group-item-text.
   Redesigned as gapped rounded cards with an icon badge, matching the
   card pattern used elsewhere on the site. ---- */
.section-body>.list-group:has(>.list-group-item.has-icon) {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    align-items: start !important;
    gap: 16px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.list-group-item.has-icon {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 24px !important;
    border: 1px solid rgba(0, 0, 0, .08) !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 0 20px rgba(19, 66, 137, .05);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.list-group-item.has-icon:hover {
    border-color: #4AD48A !important;
    box-shadow: 0 8px 20px rgba(74, 212, 138, .15);
    transform: translateY(-1px);
}

.list-group-item.has-icon>.list-group-item-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 14px;
    background: #EAFBF1;
    color: #3A422A !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin: 0 0 16px !important;
}

/* Department icon swapped for a real PNG (discount.png/help.png) by
   updateDepartmentCardIcons() in qloudrdp-custom.php. The badge box and
   the <img> are the same element, so shrinking width/height directly
   shrank the whole badge (losing the mint background around it) instead
   of just the visible icon - pad inward instead, keeping the box at 52px. */
.list-group-item.has-icon>img.list-group-item-icon {
    padding: 12px;
    box-sizing: border-box;
    object-fit: contain;
}

.list-group-item.has-icon .list-group-item-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    margin-left: 7px;
}

.list-group-item.has-icon .list-group-item-heading {
    font-weight: 700 !important;
    font-size: 16px !important;
    color: #1f2129 !important;
    margin: 0 !important;
}

.list-group-item.has-icon .list-group-item-text {
    color: #6b7280 !important;
    font-size: 13px !important;
    line-height: 1.5;
    margin: 6px 0 0 !important;
}

/* Visual "Open Ticket" button injected by addDepartmentCardButtons() in
   qloudrdp-custom.php - the whole card is already the clickable link, so
   this is a styled span, not a second anchor, matching the reference
   design's per-card call-to-action but in the site's own brand color. */
.list-group-item.has-icon .qloud-dept-open-btn {
    display: block;
    width: 100%;
    margin-top: 20px;
    padding: 10px 0;
    text-align: center;
    background: #3A422A;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    border-radius: 10px;
    transition: background .15s ease;
}

.list-group-item.has-icon:hover .qloud-dept-open-btn {
    background: #4AD48A;
    color: #3A422A;
}

/* ---- 58. "Your Recent Tickets" sidebar preview widget (Open Ticket page)
   - shares the same .status-modern markup as the dashboard's Recent
   Support Tickets panel, so reuse the same safe (natural-order, no flex
   reorder) styling here too instead of a section-scoped one-off. ---- */
.status-modern {
    display: block !important;
    width: 100%;
}

.status-modern>b {
    color: #9ca3af !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    margin-right: 6px;
}

.status-modern>strong {
    font-weight: 700 !important;
    font-style: normal !important;
    color: #1f2129 !important;
}

.status-modern>small {
    display: block;
    clear: both;
    margin-top: 4px !important;
    color: #9ca3af !important;
    font-size: 12px !important;
}

.status-modern>label.status {
    float: right;
    margin-left: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--status-color, #6b7280) 14%, white) !important;
    color: var(--status-color, #6b7280) !important;
    font-weight: 700 !important;
    font-size: 10px !important;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.status-modern>label.status:before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}

/* ---- 59. Account Details page - global input focus ring (same green
   glow used on the login/contact pages, now applied everywhere instead of
   being scoped to just those two) + consistent spacing between sections. ---- */
.form-control:focus,
.form-control:focus-visible {
    border-color: #4AD48A !important;
    box-shadow: 0 0 0 3px rgba(74, 212, 138, .15) !important;
    outline: none;
}

body.page-clientareadetails .section+.section {
    margin-top: 28px !important;
}

body.page-clientareadetails .section-title {
    margin-bottom: 16px !important;
}

/* ---- 60. Account Details page - "Join our mailing list" toggle card:
   the unscoped .panel-switch{margin-bottom:-23px} (added for the checkout
   page's side-by-side layout) was eating the space below the toggle box
   here. Box itself stays put on the left (full width of its card) - only
   the on/off switch inside it moves to the right, label stays left. ---- */
body.page-clientareadetails .panel.panel-switch.m-w-xs {
    margin: 0 !important;
    max-width: none !important;
    width: 100%;
}

body.page-clientareadetails .panel.panel-switch .panel-body {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
}

body.page-clientareadetails .panel.panel-form:has(.panel-switch)>.panel-body {
    padding-bottom: 28px !important;
}

/* ---- 61. Form input labels - back to the theme's own default color/weight
   (not bold/dark) per explicit feedback; only keep spacing consistent. ---- */
.control-label {
    font-size: 13px !important;
    margin-bottom: 6px !important;
}

/* ---- 62. User Management page ("1 Users Found" list) - card-style rows
   matching the rest of the portal (rounded, subtle shadow, hover lift)
   instead of the theme's bare bootstrap list rows. Same classes are reused
   for the "Pending Invites" list below, so this covers both for free. ---- */
body.page-account-user-management .panel-users,
body.page-user-switch-account .panel-users {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

body.page-account-user-management .panel-users>.panel-body,
body.page-user-switch-account .panel-users>.panel-body {
    background: transparent !important;
    padding: 0 !important;
}

body.page-account-user-management .user-list,
body.page-user-switch-account .user-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

body.page-account-user-management .user-list-item,
body.page-user-switch-account .user-list-item {
    display: flex !important;
    align-items: center;
    gap: 16px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 14px !important;
    padding: 18px 20px !important;
    margin: 0 !important;
    box-shadow: 0 0 20px rgba(19, 66, 137, .05);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

body.page-account-user-management .user-list-item:hover,
body.page-user-switch-account .user-list-item:hover {
    border-color: #4AD48A;
    box-shadow: 0 8px 20px rgba(74, 212, 138, .15);
    transform: translateY(-1px);
}

body.page-account-user-management .user-list-item-avatar img,
body.page-user-switch-account .user-list-item-avatar img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}

body.page-account-user-management .user-list-item-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    gap: 16px;
    flex-wrap: wrap;
}

/* Vendor default caps .user-list-item-info at 60% width - once the body
   wrapper isn't stretched to the card's full width (e.g. shrink-wrapped),
   that 60% resolves against a small box and wraps "Maneerat Jaroongjitaree"
   onto two lines. Let it size to its own content instead. */
body.page-account-user-management .user-list-item-info,
body.page-user-switch-account .user-list-item-info {
    width: auto !important;
    max-width: none !important;
}

/* Switch Account page has no .user-list-item-body wrapper - info/date/
   actions sit as direct flex children of .user-list-item instead, so
   .user-list-item-info needs its own flex:1 to push date+actions right. */
body.page-user-switch-account .user-list-item-info {
    flex: 1;
}

body.page-account-user-management .user-list-item-name,
body.page-user-switch-account .user-list-item-name {
    font-weight: 700;
    font-size: 15px;
    color: #1f2129;
}

body.page-account-user-management .user-list-item-email,
body.page-user-switch-account .user-list-item-email {
    color: #6b7280;
    font-size: 13px;
    margin-top: 2px;
}

body.page-account-user-management .user-list-item-date,
body.page-user-switch-account .user-list-item-date {
    text-align: right;
    font-size: 13px;
    color: #1f2129;
}

body.page-account-user-management .user-list-item-date>.text-light,
body.page-user-switch-account .user-list-item-date>.text-light {
    color: #9ca3af !important;
    font-size: 12px;
}

body.page-account-user-management .user-list-item-actions,
body.page-user-switch-account .user-list-item-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

body.page-account-user-management .user-list-item-actions .label-info,
body.page-user-switch-account .user-list-item-date .label-info {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    background: color-mix(in srgb, #3A422A 18%, white) !important;
    color: #3A422A !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 5px 12px !important;
    border-radius: 999px !important;
}

body.page-account-user-management .user-list-item-actions .label-info:before,
body.page-user-switch-account .user-list-item-date .label-info:before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}

body.page-user-switch-account .user-list-item-date .label-active {
    background: color-mix(in srgb, #4AD48A 16%, white) !important;
    color: #3A422A !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 5px 12px !important;
    border-radius: 999px !important;
}

body.page-user-switch-account .user-list-item-date .label-danger {
    background: color-mix(in srgb, #e05252 14%, white) !important;
    color: #e05252 !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 5px 12px !important;
    border-radius: 999px !important;
}

body.page-user-switch-account .user-list-item-actions .btn {
    border-radius: 999px !important;
}

body.page-account-user-management .btn-manage-permissions,
body.page-account-user-management .btn-remove-user,
body.page-account-user-management .user-list-invites .btn-icon {
    border-radius: 50% !important;
    width: 34px;
    height: 34px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 0, 0, .1) !important;
    background: transparent !important;
    color: #6b7280 !important;
}

body.page-account-user-management .btn-manage-permissions:hover {
    border-color: #4AD48A !important;
    color: #3A422A !important;
}

body.page-account-user-management .btn-remove-user:hover,
body.page-account-user-management .btn-cancel-invite:hover {
    border-color: #e05252 !important;
    color: #e05252 !important;
}

body.page-account-user-management .section-body>p.text-small {
    color: #9ca3af !important;
    margin-top: 14px !important;
}

/* ---- 63. Account Details / Contacts / Profile pages - same unified white
   card pattern as the "Configure Server" section on the product
   configuration page (section 9): title + divider live INSIDE the same
   card as the fields, instead of floating above a separate boxed panel. ---- */
body.page-clientareadetails .section,
body.page-account-contacts-new .section,
body.page-account-contacts-manage .section,
body.page-user-profile .section {
    background: #fff !important;
    border: none !important;
    border-radius: 14px !important;
    box-shadow: 0 0 32.4px rgba(19, 66, 137, .07) !important;
    padding: 20px !important;
}

body.page-clientareadetails .section-header,
body.page-account-contacts-new .section-header,
body.page-account-contacts-manage .section-header,
body.page-user-profile .section-header {
    margin-bottom: 0 !important;
}

body.page-clientareadetails .section-title,
body.page-account-contacts-new .section-title,
body.page-account-contacts-manage .section-title,
body.page-user-profile .section-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1f2129 !important;
    margin: 0 !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid rgba(0, 0, 0, .08) !important;
}

/* The gap after the divider was relying on the title's margin-bottom
   collapsing through .section-header to push .section-body down - this
   worked for top-level sections but silently failed for ones nested a
   level deeper (e.g. "Contact Details"), leaving "First Name" sitting
   right on the divider. Put the margin directly on the next element
   instead of depending on collapse-through-parent behavior, covering
   both the wrapped (.section-header) and bare (.section-title) cases. */
body.page-clientareadetails .section-header+.section-body,
body.page-account-contacts-new .section-header+.section-body,
body.page-account-contacts-manage .section-header+.section-body,
body.page-user-profile .section-header+.section-body,
body.page-clientareadetails .section-title+.section-body,
body.page-account-contacts-new .section-title+.section-body,
body.page-account-contacts-manage .section-title+.section-body,
body.page-user-profile .section-title+.section-body {
    margin-top: 16px !important;
}

body.page-clientareadetails .section .panel.panel-form,
body.page-account-contacts-new .section .panel.panel-form,
body.page-account-contacts-manage .section .panel.panel-form,
body.page-user-profile .section .panel.panel-form {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

body.page-clientareadetails .section .panel.panel-form>.panel-body,
body.page-account-contacts-new .section .panel.panel-form>.panel-body,
body.page-account-contacts-manage .section .panel.panel-form>.panel-body,
body.page-user-profile .section .panel.panel-form>.panel-body {
    padding: 0 !important;
}

/* A .section nested INSIDE another .section (e.g. "Email Preferences" living
   inside the Contact Details form) was getting the card treatment twice -
   white-box-inside-a-white-box. Flatten the inner one back to a plain
   block that just continues inside its parent's card, with its own
   title+divider for separation instead of a second card. */
body.page-clientareadetails .section .section,
body.page-account-contacts-new .section .section,
body.page-account-contacts-manage .section .section,
body.page-user-profile .section .section {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-top: 0 !important;
}

/* Only add the gap when a nested section actually FOLLOWS another block
   (e.g. "Email Preferences" coming after the Contact Details fields) - a
   nested section that's the first/only thing in its parent (e.g. "Contact
   Details" itself) must not get extra top space pushing its title down. */
body.page-clientareadetails .section-body+.section,
body.page-account-contacts-new .section-body+.section,
body.page-account-contacts-manage .section-body+.section,
body.page-user-profile .section-body+.section {
    margin-top: 28px !important;
}

/* ---- 64. Same pages - the vendor default's huge margin-top on
   .form-actions (Save/Cancel row) left a big gap after the last field,
   inconsistent with the tighter spacing used everywhere else in these
   cards. The last field row's own margin-bottom was ALSO stacking with
   this margin-top (double gap) - zero that one out so the bottom gap
   matches the 16px used above the title's divider exactly. ---- */
body.page-clientareadetails .panel.panel-form .panel-body>.row:last-child .form-group,
body.page-account-contacts-new .panel.panel-form .panel-body>.row:last-child .form-group,
body.page-account-contacts-manage .panel.panel-form .panel-body>.row:last-child .form-group,
body.page-user-profile .panel.panel-form .panel-body>.row:last-child .form-group {
    margin-bottom: 0 !important;
}

body.page-clientareadetails .form-actions,
body.page-account-contacts-new .form-actions,
body.page-account-contacts-manage .form-actions,
body.page-user-profile .form-actions {
    margin-top: 16px !important;
}

/* ---- 65. Change Password page - this page has no title of its own in the
   markup at all (JS injects one - see addPasswordPageHeading), so give the
   bare .panel-form the same unified-card look used on the other account
   pages instead of the vendor's plain bordered panel + separate footer bar. ---- */
body.page-user-password .panel.panel-form {
    background: #fff !important;
    border: none !important;
    border-radius: 14px !important;
    box-shadow: 0 0 32.4px rgba(19, 66, 137, .07) !important;
    padding: 20px !important;
}

body.page-user-password .panel.panel-form>.section-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: #1f2129 !important;
    margin: 0 !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid rgba(0, 0, 0, .08) !important;
}

body.page-user-password .panel.panel-form>.section-title+.panel-body {
    margin-top: 16px !important;
}

body.page-user-password .panel.panel-form .panel-body {
    padding: 0 !important;
}

body.page-user-password .panel.panel-form .panel-footer {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 16px 0 0 !important;
    padding: 0 !important;
}

/* ---- 66. Security Settings page - the tab bar (Two-Factor Authentication /
   Linked Accounts / Security Question) used a flat gray header bar with a
   black active-underline, clashing with the rest of the portal's brand
   colors. Rebuilt in the site's own mint/olive palette. ---- */
body.page-user-security .panel-tabs a {
    color: #6b7280 !important;
    font-weight: 600 !important;
    padding: 16px 4px !important;
}

body.page-user-security .panel-tabs a:hover {
    color: #3A422A !important;
}

body.page-user-security .panel-tabs a>i {
    color: #9ca3af !important;
}

body.page-user-security .panel-tabs a.active,
body.page-user-security .panel-tabs li.show a {
    color: #3A422A !important;
}

body.page-user-security .panel-tabs a.active>i,
body.page-user-security .panel-tabs li.show a>i {
    color: #4AD48A !important;
}

body.page-user-security .panel-tabs a.active:after,
body.page-user-security .panel-tabs li.show a:after {
    background: #4AD48A !important;
    height: 2px !important;
}

body.page-user-security .panel-body.tab-content {
    padding: 24px 20px !important;
}

/* ---- 67. "Two-factor authentication is currently disabled/enabled" - turn
   the plain colored word into a proper status pill (dot + rounded badge),
   matching the same status-badge language already used for tickets/roles
   elsewhere in the portal, instead of a bare bold word. Scoped to the <p>
   specifically - the enable/disable BUTTONS below share this same
   "twofa-config-link" class in the markup, so a bare selector would have
   reshaped them too. ---- */
body.page-user-security p.twofa-config-link {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #1f2129;
    margin-bottom: 16px !important;
}

body.page-user-security p.twofa-config-link strong {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    padding: 3px 12px !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: .03em;
}

body.page-user-security p.twofa-config-link strong:before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}

body.page-user-security p.twofa-config-link strong.text-danger {
    background: color-mix(in srgb, #e05252 14%, white) !important;
    color: #e05252 !important;
}

body.page-user-security p.twofa-config-link strong.text-success {
    background: color-mix(in srgb, #4AD48A 14%, white) !important;
    color: #3A422A !important;
}

/* The "Click here to Enable" button carries .btn-lg from the vendor markup -
   scale it down to a normal button size instead of the oversized default. */
body.page-user-security a.twofa-config-link.enable.btn-lg {
    font-size: 14px !important;
    padding: 10px 24px !important;
}

/* ---- 68. Recommendation alert ("We recommend enabling two-factor...") -
   was plain default Bootstrap blue text/icon, out of step with the rest
   of the redesigned page. Icon becomes a mint circle badge (matching the
   status pill above it) and body copy becomes normal dark text. ---- */
body.page-user-security .alert.alert-info {
    padding: 16px 20px !important;
    gap: 14px;
}

body.page-user-security .alert.alert-info .alert-body {
    color: #1f2129 !important;
}

body.page-user-security .alert.alert-info .alert-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    background: color-mix(in srgb, #4AD48A 15%, white) !important;
    color: #3A422A !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    padding-left: 0 !important;
}

/* ---- 69. Product Details page - full redesign to match the reference:
   compact dark hero card (icon + name + status badge + domain) instead of
   the vendor's tall centered box, "Billing Overview" moved out of the tab
   bar into a persistent sidebar card, and the remaining tabs restyled to
   match the site's mint/olive palette. The DOM move (extracting billing
   fields into the sidebar, relocating the status badge) is handled by
   redesignProductDetails() in qloudrdp-custom.php - the "qloud-pd-*" and
   "qloud-bo-*" classes here are the elements it creates. ---- */
body.page-clientareaproductdetails .product-details {
    margin: 0 0 20px !important;
}

body.page-clientareaproductdetails .product-icon {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    min-height: 0 !important;
    background: linear-gradient(135deg, #3A422A, #262B1B) !important;
    border-radius: 16px !important;
    padding: 24px 28px !important;
    gap: 4px;
    margin-bottom: 0 !important;
}

body.page-clientareaproductdetails .qloud-pd-hero-col-full {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

body.page-clientareaproductdetails .product-icon .product-content {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 16px;
    width: 100%;
}

body.page-clientareaproductdetails .product-image {
    width: 56px;
    height: 56px;
    margin: 0 !important;
    flex: 0 0 auto !important;
}

body.page-clientareaproductdetails .product-icon .graphic-item {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
}

body.page-clientareaproductdetails .product-icon .graphic-item-bg {
    background: rgba(255, 255, 255, .08) !important;
    border-radius: 14px !important;
}

body.page-clientareaproductdetails .product-icon .product-name {
    display: flex !important;
    align-items: center !important;
    gap: 12px;
    color: #fff !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    margin: 0 !important;
}

body.page-clientareaproductdetails .product-icon .product-name .product-group-name {
    color: rgba(255, 255, 255, .5) !important;
    font-weight: 500 !important;
}

body.page-clientareaproductdetails .product-icon .product-footer {
    color: rgba(255, 255, 255, .6) !important;
    border-top: none !important;
    text-align: left !important;
    display: block !important;
    font-size: 13px !important;
    margin: 0 !important;
}

body.page-clientareaproductdetails .product-icon .product-footer:before {
    content: "\1F310  ";
}

/* Status badge - relocated next to the product name by JS. Background
   tints to whatever color the status class already carries (active/
   suspended/pending/etc use different colors), so no need to hardcode
   a color per status. */
body.page-clientareaproductdetails .product-icon .product-name .status {
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 4px 12px !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, currentColor 20%, transparent) !important;
}

body.page-clientareaproductdetails .product-icon .product-name .status:before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    margin-right: 5px;
}

body.page-clientareaproductdetails .qloud-pd-lastupdated {
    text-align: center;
    color: #9ca3af;
    font-size: 13px;
    margin: 16px 0;
}

/* Two-column layout: main content (hero + tabs) + Billing Overview sidebar */
body.page-clientareaproductdetails .qloud-pd-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 24px;
    align-items: start;
}

@media (max-width: 900px) {
    body.page-clientareaproductdetails .qloud-pd-layout {
        grid-template-columns: 1fr;
    }
}

body.page-clientareaproductdetails .qloud-billing-overview {
    background: #fff !important;
    border: none !important;
    border-radius: 14px !important;
    box-shadow: 0 0 32.4px rgba(19, 66, 137, .07) !important;
    overflow: hidden;
}

body.page-clientareaproductdetails .qloud-bo-header {
    font-size: 16px;
    font-weight: 700;
    color: #1f2129;
    padding: 20px 20px 16px;
}

body.page-clientareaproductdetails .qloud-bo-body {
    padding: 0 20px 20px;
}

body.page-clientareaproductdetails .qloud-bo-item {
    padding: 12px 0;
    border-top: 1px solid rgba(0, 0, 0, .06);
}

body.page-clientareaproductdetails .qloud-bo-item:first-child {
    border-top: none;
    padding-top: 0;
}

body.page-clientareaproductdetails .qloud-bo-label {
    font-size: 12px;
    color: #9ca3af;
    margin-bottom: 4px;
}

body.page-clientareaproductdetails .qloud-bo-value {
    font-size: 15px;
    font-weight: 700;
    color: #1f2129;
}

/* Tabs bar (Server Information / Configurable Options / Additional
   Information) - same mint/olive treatment already used on Security
   Settings, instead of the vendor's default purple active-underline. */
body.page-clientareaproductdetails .panel-nav .nav-tabs {
    flex-wrap: nowrap !important;
}

body.page-clientareaproductdetails .panel-nav .nav-tabs>li {
    white-space: nowrap;
}

body.page-clientareaproductdetails .panel-nav .nav-tabs a {
    color: #6b7280 !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 12px 14px !important;
    white-space: nowrap !important;
}

body.page-clientareaproductdetails .panel-nav .nav-tabs a:hover {
    color: #3A422A !important;
}

body.page-clientareaproductdetails .panel-nav .nav-tabs a>i {
    color: #9ca3af !important;
}

body.page-clientareaproductdetails .panel-nav .nav-tabs a.active,
body.page-clientareaproductdetails .panel-nav .nav-tabs li.show a {
    color: #3A422A !important;
}

body.page-clientareaproductdetails .panel-nav .nav-tabs a.active>i,
body.page-clientareaproductdetails .panel-nav .nav-tabs li.show a>i {
    color: #4AD48A !important;
}

body.page-clientareaproductdetails .panel-nav .nav-tabs a.active:after,
body.page-clientareaproductdetails .panel-nav .nav-tabs li.show a:after {
    background: #4AD48A !important;
    height: 2px !important;
}

/* ---- 70. Sidebar boxes disabled sitewide, wherever they render - each one
   duplicates a dropdown already available in the top nav, so it's just
   reclaimed space, not lost navigation:
   - "Billing" -> My Invoices, My Quotes, Add Funds, Mass Payment
   - "My Services Actions" -> My Services (clientarea.php?action=services)
   - "Support" -> Support Tickets, Submit Ticket (and Knowledgebase/
     Downloads/Announcements/Network Status, which share the same box)
   - "My Account" / "Account" / "Profile" -> Account Details, User
     Management, Contacts, Email History, Change Password, Security
     Settings, Your Profile (the exact name WHMCS uses varies by page)
   Each menuItemName is a stable, theme-generated attribute - no template
   edit needed. ---- */
div[menuitemname="Billing"],
div[menuitemname="My Services Actions"],
div[menuitemname="Support"],
div[menuitemname="My Account"],
div[menuitemname="Account"],
div[menuitemname="Profile"] {
    display: none !important;
}

/* Each of these boxes was the ONLY thing in its sidebar column on most of
   the pages above, so hiding it alone just left an empty blank column -
   collapse the column itself and let the main content expand to fill the
   freed-up width. EXCEPT when "Recent Tickets" shares that same column
   (submitticket.php) - that box must stay visible, so the column must
   stay too. (Using a descendant match, not :only-child, since that
   condition wasn't matching reliably.) */
.main-grid:has(>.main-sidebar-right :is(div[menuitemname="Billing"], div[menuitemname="My Services Actions"], div[menuitemname="Support"], div[menuitemname="My Account"], div[menuitemname="Account"], div[menuitemname="Profile"])):not(:has(>.main-sidebar-right div[menuitemname="Recent Tickets"]))>.main-sidebar-right,
.main-grid:has(>.main-sidebar :is(div[menuitemname="Billing"], div[menuitemname="My Services Actions"], div[menuitemname="Support"], div[menuitemname="My Account"], div[menuitemname="Account"], div[menuitemname="Profile"])):not(:has(>.main-sidebar div[menuitemname="Recent Tickets"]))>.main-sidebar {
    display: none !important;
}

.main-grid:has(>.main-sidebar-right :is(div[menuitemname="Billing"], div[menuitemname="My Services Actions"], div[menuitemname="Support"], div[menuitemname="My Account"], div[menuitemname="Account"], div[menuitemname="Profile"])):not(:has(>.main-sidebar-right div[menuitemname="Recent Tickets"]))>.main-content,
.main-grid:has(>.main-sidebar :is(div[menuitemname="Billing"], div[menuitemname="My Services Actions"], div[menuitemname="Support"], div[menuitemname="My Account"], div[menuitemname="Account"], div[menuitemname="Profile"])):not(:has(>.main-sidebar div[menuitemname="Recent Tickets"]))>.main-content {
    max-width: 100% !important;
    flex: 1 1 100% !important;
}

/* ---- 71. Message editor toolbar (bootstrap-markdown, Open Ticket /
   ticket reply forms) - buttons come from Bootstrap's .btn-group, which
   merges adjacent buttons edge-to-edge with a negative margin and squared
   shared sides. Since every .btn on the site is already forced to a full
   pill shape (universal button rule), that merge just made the pills
   look like they were overlapping/touching instead. Give them real gaps. ---- */
.md-header.btn-toolbar {
    gap: 10px !important;
}

.md-header .btn-group {
    display: flex !important;
    gap: 6px !important;
    margin-left: 0 !important;
}

.md-header .btn-group>.btn,
.md-header .btn-group>.btn-group {
    margin-left: 0 !important;
}

/* ---- 72. "Knowledgebase Suggestions" sidebar box (Open Ticket page) -
   title was wrapping to 2 lines inside the narrow sidebar column. ---- */
div[menuitemname="Knowledgebase Suggestions"] .panel-title {
    font-size: 15px !important;
    white-space: nowrap !important;
}

/* ---- 73. "Your Recent Tickets" sidebar widget - rebuilt into per-ticket
   cards (icon badge + colored ticket ID + status pill, subject, date)
   by redesignRecentTicketsWidget() in qloudrdp-custom.php, which parses
   the row's plain text (ticket ID / status / relative date) since this
   widget's real markup couldn't be confirmed via DevTools. ---- */
/* Container of a rebuilt row - the JS only marks the ROW itself with
   data-qloud-rebuilt, so its parent list is matched via :has(). */
*:has(>[data-qloud-rebuilt]) {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

[data-qloud-rebuilt] {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px;
    background: #fff !important;
    border: 1px solid rgba(0, 0, 0, .06) !important;
    border-radius: 12px !important;
    padding: 14px !important;
    margin: 0 !important;
    box-shadow: 0 0 16px rgba(19, 66, 137, .05);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

[data-qloud-rebuilt]:hover {
    border-color: #4AD48A !important;
    box-shadow: 0 6px 16px rgba(74, 212, 138, .15);
    transform: translateY(-1px);
}

.qloud-rt-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 10px;
    background: #EAFBF1;
    color: #3A422A;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.qloud-rt-body {
    flex: 1;
    min-width: 0;
}

.qloud-rt-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.qloud-rt-id {
    color: #3A422A;
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qloud-rt-status {
    flex-shrink: 0;
    background: color-mix(in srgb, var(--qloud-rt-color, #9ca3af) 16%, white);
    color: var(--qloud-rt-color, #9ca3af);
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 3px 10px;
    border-radius: 999px;
}

.qloud-rt-subject {
    color: #1f2129;
    font-weight: 700;
    font-size: 13px;
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qloud-rt-date {
    color: #9ca3af;
    font-size: 12px;
    margin-top: 4px;
}

.cart-item-config .config-option.hoverable .config-option-price{
    opacity:1;
    font-weight:500;
}