/*
 * DTS Theme — custom.css
 * Parent: twenty-one (Bootstrap 4.5)
 * Loaded by WHMCS via {assetExists file="custom.css"}.
 * Imports design tokens, then overrides twenty-one / Bootstrap 4 styles.
 */

@import url('tokens.css');

/* ── Base ──────────────────────────────────────────────────────────────── */

/* Widen Bootstrap 4 container to match --dts-container-max */
@media (min-width: 1320px) {
    .container {
        max-width: var(--dts-container-max);
    }
}

html,
body {
    font-family: var(--dts-font-family);
    font-size: var(--dts-font-size-base);
    color: var(--dts-text);
    background-color: var(--dts-bg-alt);
    line-height: var(--dts-line-height);
    scroll-behavior: auto;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--dts-text);
    font-family: var(--dts-font-family);
    font-weight: 500;
    line-height: var(--dts-line-height-heading);
}

a {
    color: var(--dts-accent);
    transition: var(--dts-transition-fast);
}

a:hover,
a:focus {
    color: var(--dts-primary);
    text-decoration: none;
}

/* ── Header / Navbar ───────────────────────────────────────────────────── */


/* Currency flags switcher */
.dts-currency-form {
    display: inline-flex;
    margin: 0;
    padding: 0;
}

.dts-currency-flag-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none !important;
    border-radius: var(--dts-radius-sm) !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 3px 8px;
    cursor: pointer;
    transition: var(--dts-transition-fast);
    color: var(--dts-primary);
    font-size: var(--dts-font-size-sm);
    font-weight: 500;
    font-family: var(--dts-font-family);
    font-weight: 500;
    line-height: 1;
    position: relative;
}

.dts-currency-flag-btn:hover,
.dts-currency-flag-btn:focus,
.dts-currency-flag-btn:focus-visible {
    color: var(--dts-accent);
    background: none;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.dts-currency-flag-img {
    display: block;
    width: 22px;
    height: auto;
    border-radius: 2px;
    flex-shrink: 0;
}

.dts-currency-flag-code {
    font-size: var(--dts-font-size-sm);
}

/* Tooltip */
.dts-currency-flag-btn::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: #0d1b2a;
    color: #fff;
    font-size: var(--dts-font-size-xs);
    font-weight: 400;
    white-space: nowrap;
    padding: 5px 10px;
    border-radius: var(--dts-radius-sm);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 1080;
    box-shadow: var(--dts-shadow-sm);
}

.dts-currency-flag-btn:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}


/* ── Page subheader ────────────────────────────────────────────────────── */

.dts-page-subheader {
    background: linear-gradient(90deg, #164e7d 0%, #5086b6 100%);
    padding: 48px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.dts-page-subheader-title {
    color: #e8edf2;
    font-size: 38px;
    font-weight: 900;
    margin: 0 0 6px;
    line-height: 52px;
}

.dts-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 4px;
}

.dts-breadcrumb-item {
    font-size: 11px;
    color: rgba(255,255,255,0.65);
}

.dts-breadcrumb-item a {
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    transition: var(--dts-transition-fast);
}

.dts-breadcrumb-item a:hover {
    color: #fff;
    text-decoration: none;
}

.dts-breadcrumb-item.active {
    color: rgba(255,255,255,0.9);
}

.dts-breadcrumb-item + .dts-breadcrumb-item::before {
    content: "/";
    margin-right: 4px;
    color: rgba(255,255,255,0.35);
}


/* ── Header structure ──────────────────────────────────────────────────── */

.dts-header {
    background-color: var(--dts-bg-header);
    position: sticky;
    top: 0;
    z-index: 1050;
    box-shadow: 0 1px 0 var(--dts-border);
}

/* Utility bar — account + cart row at the top of the header */
.dts-utility-bar {
    background-color: var(--dts-bg-header);
    border-bottom: 1px solid var(--dts-border);
    padding: 5px 0;
}

.dts-utility-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 2px;
}

.dts-utility-sep {
    color: var(--dts-border);
    font-size: var(--dts-font-size-sm);
    padding: 0 2px;
    user-select: none;
}

.dts-utility-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--dts-primary);
    font-size: var(--dts-font-size-sm);
    font-weight: 500;
    padding: 3px 8px;
    border-radius: var(--dts-radius-sm);
    text-decoration: none;
    transition: var(--dts-transition-fast);
    white-space: nowrap;
}

.dts-utility-link:hover {
    color: var(--dts-primary-hover);
    text-decoration: none;
}

/* ── Account dropdown ─────────────────────────────────────────────── */
.dts-utility-account .dropdown-toggle::after {
    display: none;
}

.dts-utility-account .dropdown-toggle .dts-utility-chevron {
    font-size: 10px;
    opacity: 0.7;
    margin-left: 1px;
    transition: transform var(--dts-transition-fast);
}

.dts-utility-account.show .dropdown-toggle .dts-utility-chevron {
    transform: rotate(180deg);
}

.dts-account-dropdown {
    min-width: 220px;
    border: 1px solid var(--dts-border);
    border-radius: var(--dts-radius);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    padding: 0;
    overflow: hidden;
}

.dts-account-dropdown-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background-color: var(--dts-bg-alt);
}

.dts-account-dropdown-icon {
    font-size: 2rem;
    color: var(--dts-primary);
    flex-shrink: 0;
}

.dts-account-dropdown-company {
    font-size: var(--dts-font-size-sm);
    color: var(--dts-text-secondary);
    line-height: 1.2;
}

.dts-account-dropdown-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--dts-text-primary);
    line-height: 1.3;
}

.dts-account-dropdown-email {
    font-size: var(--dts-font-size-sm);
    color: var(--dts-text-secondary);
    line-height: 1.3;
}

.dts-account-dropdown .dropdown-item {
    padding: 8px 16px;
    font-size: var(--dts-font-size-sm);
    color: var(--dts-text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.dts-account-dropdown .dropdown-item i {
    color: var(--dts-text-secondary);
    width: 16px;
    text-align: center;
}

.dts-account-dropdown .dropdown-item:hover {
    background-color: var(--dts-bg-alt);
    color: var(--dts-primary);
}

.dts-account-dropdown .dropdown-item:hover i {
    color: var(--dts-primary);
}

.dts-account-dropdown .dropdown-divider {
    margin: 4px 0;
    border-color: var(--dts-border);
}

.dts-dropdown-logout,
.dts-dropdown-admin {
    color: var(--dts-danger, #dc3545) !important;
}

.dts-dropdown-logout i,
.dts-dropdown-admin i {
    color: var(--dts-danger, #dc3545) !important;
}

.dts-utility-admin {
    color: var(--dts-danger);
}

.dts-utility-admin:hover {
    color: var(--dts-danger);
    opacity: 0.8;
}

.dts-utility-notif-btn {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    color: var(--dts-text-secondary);
    font-size: var(--dts-font-size-sm);
    padding: 3px 8px;
    position: relative;
    transition: var(--dts-transition-fast);
}

.dts-utility-notif-btn:hover {
    color: var(--dts-primary);
}

.dts-utility-cart {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--dts-primary);
    padding: 3px 8px;
    border-radius: var(--dts-radius-sm);
    text-decoration: none;
    transition: var(--dts-transition-fast);
    font-size: 0.95rem;
    position: relative;
}

.dts-utility-cart .dts-cart-icon-wrap {
    position: relative;
    display: inline-flex;
    transform: translateY(-3px);
}

.dts-utility-cart:hover {
    color: var(--dts-accent);
    text-decoration: none;
}

.dts-cart-label {
    font-size: 0.875rem;
    font-weight: 500;
    font-family: var(--dts-font-family);
    color: inherit;
    white-space: nowrap;
}

.dts-cart-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Cart item count badge */
.dts-cart-count {
    position: absolute;
    top: -7px;
    right: -9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--dts-accent);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 8px;
    line-height: 1;
}

/* Main navbar row */
.dts-navbar-main {
    min-height: var(--dts-nav-height);
    display: flex;
    align-items: center;
    position: relative;
}

.dts-navbar-main .container {
    display: flex;
    flex-direction: column;
    padding-top: 0;
    padding-bottom: 0;
}

.dts-navbar-main .container > .d-flex {
    min-height: var(--dts-nav-height);
}

/* Logo */
.dts-brand {
    display: flex;
    align-items: center;
    text-decoration: none;
    padding: 12px 0;
    flex-shrink: 0;
}

.dts-brand:hover {
    text-decoration: none;
}

.dts-logo-img {
    max-height: 42px;
    width: auto;
}

.dts-logo-text {
    color: var(--dts-text);
    font-family: var(--dts-font-family);
    font-weight: 700;
    font-size: 1.25rem;
}

/* Desktop nav links */
.dts-nav-desktop {
    flex-direction: row;
    align-items: center;
}

.dts-nav-desktop > li > a:not(.dts-btn-cta),
.dts-nav-desktop > .nav-item > a:not(.dts-btn-cta) {
    color: var(--dts-primary) !important;
    font-size: 18px;
    font-weight: 500;
    font-family: var(--dts-font-family);
    padding: 8px 14px;
    line-height: 1.4;
    white-space: nowrap;
    border-radius: var(--dts-radius-sm);
    transition: var(--dts-transition-fast);
}

.dts-nav-desktop > li > a:not(.dts-btn-cta):hover,
.dts-nav-desktop > li.active > a:not(.dts-btn-cta),
.dts-nav-desktop > .nav-item > a:not(.dts-btn-cta):hover,
.dts-nav-desktop > .nav-item.active > a:not(.dts-btn-cta) {
    background-color: transparent;
    color: var(--dts-accent) !important;
    text-decoration: none;
}

.dts-nav-desktop > li.open > a:not(.dts-btn-cta),
.dts-nav-desktop > .nav-item.show > a:not(.dts-btn-cta) {
    background-color: transparent;
    color: var(--dts-accent) !important;
}

/* Desktop dropdown menus */
.dts-nav-desktop .dropdown-menu {
    background-color: var(--dts-bg);
    border: 1px solid var(--dts-border);
    border-radius: var(--dts-radius);
    box-shadow: var(--dts-shadow-md);
    margin-top: 4px;
    min-width: 180px;
}

.dts-nav-desktop .dropdown-item {
    color: var(--dts-text);
    font-size: var(--dts-font-size-sm);
    padding: 8px 20px;
    transition: var(--dts-transition-fast);
}

.dts-nav-desktop .dropdown-item:hover,
.dts-nav-desktop .dropdown-item:focus {
    background-color: var(--dts-bg-alt);
    color: var(--dts-primary);
}

/* Right-side action buttons (mobile only — desktop CTA is in dts-nav-desktop) */
.dts-nav-actions {
    flex-direction: row;
    align-items: center;
    flex-shrink: 0;
}


/* CTA button — "Secure Client Login" — dark blue filled, white text */
.dts-cta-item {
    margin-left: 8px;
}

.dts-btn-cta {
    background-color: #164E7D;
    color: #ffffff !important;
    border: none;
    border-radius: 3px !important;
    font-weight: 500;
    font-size: 13px;
    font-family: var(--dts-font-family);
    padding: 12px 20px;
    transition: var(--dts-transition-fast);
    white-space: nowrap;
    line-height: 1.4;
}

.dts-btn-cta:hover,
.dts-btn-cta:focus {
    background-color: #1a5e94;
    color: #ffffff !important;
    text-decoration: none;
}

/* Hamburger */
.dts-hamburger {
    color: var(--dts-text);
    background: none;
    border: none;
    border-radius: var(--dts-radius-sm);
    padding: 6px 10px;
    font-size: 1rem;
}

.dts-hamburger:hover,
.dts-hamburger:focus {
    background-color: var(--dts-bg-alt);
    color: var(--dts-primary);
    outline: none;
}

/* Mobile nav */
.dts-mobile-nav {
    background-color: var(--dts-bg);
    border-top: 1px solid var(--dts-border);
    padding: 8px 0;
}

.dts-nav-mobile > li > a:not(.dts-btn-cta-mobile),
.dts-nav-mobile > .nav-item > a:not(.dts-btn-cta-mobile) {
    color: var(--dts-primary) !important;
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 500;
    font-family: var(--dts-font-family);
    display: block;
    transition: var(--dts-transition-fast);
}

.dts-nav-mobile > li > a:not(.dts-btn-cta-mobile):hover,
.dts-nav-mobile > .nav-item > a:not(.dts-btn-cta-mobile):hover {
    background-color: transparent;
    color: var(--dts-accent) !important;
    text-decoration: none;
}

.dts-nav-mobile .dropdown-menu {
    background-color: var(--dts-bg-alt);
    border: none;
    padding: 0;
}

.dts-nav-mobile .dropdown-item {
    color: var(--dts-text-secondary);
    padding: 10px 32px;
    font-size: var(--dts-font-size-sm);
}

.dts-nav-mobile .dropdown-item:hover {
    background-color: var(--dts-border);
    color: var(--dts-primary);
}

.dts-mobile-cta {
    padding: 8px 16px;
}

.dts-btn-cta-mobile {
    display: block;
    background-color: #164E7D;
    color: #ffffff !important;
    border: none;
    border-radius: 3px !important;
    font-weight: 500;
    font-size: 14px;
    font-family: var(--dts-font-family);
    padding: 12px 22px;
    text-align: center;
    text-decoration: none;
    transition: var(--dts-transition-fast);
}

.dts-btn-cta-mobile:hover {
    background-color: #1a5e94;
    color: #ffffff !important;
    text-decoration: none;
}

/* ── Breadcrumb ────────────────────────────────────────────────────────── */

.master-breadcrumb {
    background-color: var(--dts-bg);
    border-bottom: 1px solid var(--dts-border);
    padding: 6px 0;
}

.breadcrumb {
    background: transparent;
    margin: 0;
    padding: 4px 0;
    font-size: var(--dts-font-size-sm);
}

.breadcrumb-item a {
    color: var(--dts-accent);
}

.breadcrumb-item.active {
    color: var(--dts-text-secondary);
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--dts-text-muted);
}

/* ── Main body ─────────────────────────────────────────────────────────── */

#main-body {
    background-color: #eef1f5;
    padding: 40px 0 48px !important;
    min-height: 450px;
}

/* Marketing pages use skipMainBodyContainer — hero/sections own all spacing */
#main-body.dts-marketing-body {
    background-color: transparent;
    padding: 0 !important;
    margin: 0;
    width: 100%;
}

/* The three WHMCS wrapper divs between #main-body and the actual template content */
#main-body.dts-marketing-body > div:first-child,
#main-body.dts-marketing-body > div:first-child > div:first-child,
#main-body.dts-marketing-body > div:first-child > div:first-child > .primary-content {
    background-color: transparent;
    padding: 0 !important;
    margin-left: 0;
    margin-right: 0;
    max-width: none;
    width: 100%;
    flex: none;
}

/* Kill Bootstrap row negative margins that cause horizontal overflow on marketing pages */
#main-body.dts-marketing-body > div:first-child > div.row {
    margin-left: 0;
    margin-right: 0;
}

/* ── Cards / Panels ────────────────────────────────────────────────────── */

.card {
    border: 1px solid var(--dts-border);
    border-radius: var(--dts-radius);
    box-shadow: var(--dts-shadow-sm);
    background-color: var(--dts-bg);
}

.card-header {
    background-color: var(--dts-bg);
    border-bottom: 1px solid var(--dts-border);
    padding: 14px 20px;
    font-weight: 500;
    color: var(--dts-text);
    border-radius: var(--dts-radius) var(--dts-radius) 0 0 !important;
}

.card-body {
    padding: 20px;
}

/* Panel compatibility (twenty-one uses both .panel and .card) */
.panel {
    border: 1px solid var(--dts-border);
    border-radius: var(--dts-radius);
    box-shadow: var(--dts-shadow-sm);
    background-color: var(--dts-bg);
}

.panel-heading {
    background-color: var(--dts-bg) !important;
    border-bottom: 1px solid var(--dts-border);
    padding: 14px 20px;
}

.panel-title {
    font-size: var(--dts-font-size-base);
    font-weight: 500;
    color: var(--dts-text);
    margin: 0;
}

.panel-body {
    padding: 20px;
}

/* ── Sidebar ────────────────────────────────────────────────────────────── */

/* Suppress legacy card / list-group styles inside the sidebar wrapper */
.sidebar .card,
.sidebar .card-sidebar {
    background: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
}

.sidebar .card-header {
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

.sidebar .collapsable-card-body {
    padding: 0;
}

.sidebar .card-minimise {
    display: none !important;
}

.sidebar .list-group {
    background: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
}

.sidebar .list-group-item {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0 !important;
    margin: 0;
}

/* ── DTS sidebar card ───────────────────────────────────────────────────── */

/* Sticky sidebar column on desktop.
 *
 * The sticky target must be .dts-sidebar-col (the Bootstrap flex item),
 * NOT a child of it. Children of a flex item cannot reliably use sticky
 * because their containing block height equals their own content height.
 * Putting sticky on the col itself means its containing block is the .row
 * (the flex container), which is always as tall as the tallest column.
 *
 * .dts-sidebar-inner / .dts-sidebar-sticky are kept as plain wrappers.
 */
@media (min-width: 992px) {
    .dts-sidebar-col {
        position: sticky !important; /* Bootstrap sets position:relative on all .col-* — !important needed */
        top: calc(var(--dts-header-h, 110px) + 12px);
        align-self: flex-start;
    }
}

.dts-sidebar-card {
    background-color: #ffffff;
    border: 1px solid var(--dts-border);
    border-radius: var(--dts-radius);
    box-shadow: var(--dts-shadow-sm);
    margin-bottom: 16px;
    overflow: hidden;
}

.dts-sidebar-card-header {
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--dts-border);
    background-color: #f7f9fb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.dts-sidebar-card-header-action {
    flex-shrink: 0;
}

.dts-sidebar-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--dts-text-secondary);
    font-family: var(--dts-font-family);
    margin: 0 !important;
    padding: 0;
}

.dts-sidebar-section-icon {
    font-size: 11px;
    color: var(--dts-text-secondary);
    flex-shrink: 0;
}

.dts-sidebar-card-body {
    padding: 16px;
}

.dts-sidebar-card-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--dts-border);
    background-color: #f7f9fb;
}

/* ── DTS sidebar nav items ──────────────────────────────────────────────── */

.dts-sidebar-nav {
    display: flex;
    flex-direction: column;
    padding: 6px 0;
}

/* Hide sidebar nav items with empty labels (e.g. Downloads hidden via hook) */
.dts-sidebar-nav-item .dts-sidebar-nav-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.dts-sidebar-nav-item:has(.dts-sidebar-nav-label:empty) {
    display: none;
}

.dts-sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    font-size: 13.5px;
    font-weight: 400;
    font-family: var(--dts-font-family);
    color: var(--dts-text);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
    border-left: 3px solid transparent;
    cursor: pointer;
    position: relative;
}

.dts-sidebar-nav-item--disabled {
    cursor: default;
    pointer-events: none;
    color: var(--dts-text-muted) !important;
}

.dts-sidebar-nav-item--disabled .dts-sidebar-nav-icon-wrap {
    opacity: 0.4;
}

.dts-sidebar-nav-item--disabled .dts-soon-badge {
    opacity: 1 !important;
}

.dts-soon-badge {
    display: inline-block;
    padding: 1px 6px;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    vertical-align: middle;
    border-radius: 4px;
    background-color: var(--dts-primary);
    color: #fff !important;
    line-height: 1.6;
    opacity: 1 !important;
}

.dts-sidebar-nav-item:hover,
.dts-sidebar-nav-item:focus {
    background-color: #f0f4f8;
    color: var(--dts-primary);
    text-decoration: none;
    padding-left: 20px;
    border-left-color: transparent;
}

.dts-sidebar-nav-item.active {
    background-color: #e8f0f7;
    color: var(--dts-primary);
    font-weight: 500;
    border-left-color: var(--dts-primary);
    padding-left: 20px;
    text-decoration: none;
}

.dts-sidebar-nav-item.active:hover,
.dts-sidebar-nav-item.active:focus {
    background-color: #e1ecf6;
    color: var(--dts-primary);
    text-decoration: none;
}

.dts-sidebar-nav-item.disabled {
    opacity: 0.45;
    pointer-events: none;
}

.dts-sidebar-nav-item--static {
    cursor: default;
}

.dts-sidebar-logout,
.dts-sidebar-logout .dts-sidebar-nav-icon {
    color: var(--dts-danger, #dc3545) !important;
}

.dts-sidebar-logout:hover {
    background-color: rgba(220, 53, 69, 0.06) !important;
    color: var(--dts-danger, #dc3545) !important;
}

.dts-sidebar-nav-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    flex-shrink: 0;
}

.dts-sidebar-nav-icon {
    font-size: 13px;
    color: var(--dts-text-secondary);
    transition: color 0.15s ease;
}

.dts-sidebar-nav-icon--fallback {
    font-size: 9px;
    opacity: 0.5;
}

.dts-sidebar-nav-item:hover .dts-sidebar-nav-icon,
.dts-sidebar-nav-item.active .dts-sidebar-nav-icon {
    color: var(--dts-primary);
}

.dts-sidebar-nav-label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dts-sidebar-nav-badge {
    margin-left: auto;
    flex-shrink: 0;
}

.dts-sidebar-nav-spinner {
    display: none;
}

/* ── Main content card titles ───────────────────────────────────────────── */

/* Remove card styling from primary content — replaced by dts-field-box */
.primary-content .card {
    overflow: visible;
    border: none;
    box-shadow: none;
    background-color: transparent;
}

.primary-content .card .card-body {
    padding: 0;
}
.primary-content .card + .card {
    margin-top: 32px;
}

/* ── Support pages — restore card box styling ───────────────────────────── */
/* Support pages use WHMCS built-in .card/.card-body — not dts-field-box.  */
/* Re-apply the standard card box so content sits in a clean white panel.  */
.dts-support-page .card {
    border: 1px solid var(--dts-border);
    border-radius: var(--dts-radius);
    box-shadow: var(--dts-shadow-sm);
    background-color: var(--dts-bg);
    overflow: visible;
}

.dts-support-page .card .card-body {
    padding: 24px;
}

.dts-support-page .card .card-header {
    background-color: var(--dts-bg);
    border-bottom: 1px solid var(--dts-border);
    padding: 14px 20px;
    border-radius: var(--dts-radius) var(--dts-radius) 0 0 !important;
}

.dts-support-page .card .card-header h3,
.dts-support-page .card .card-header .card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--dts-text);
    margin: 0;
}

.dts-support-page .card + .card {
    margin-top: 24px;
}

/* Form labels inside support page cards */
.dts-support-page .card label {
    font-weight: 500;
    color: var(--dts-primary);
    font-size: 13px;
    margin-bottom: 4px;
}

/* Disabled/readonly inputs (pre-filled name/email on ticket form) */
.dts-support-page .card .form-control.disabled,
.dts-support-page .card .form-control[disabled] {
    background-color: var(--dts-bg-alt);
    color: var(--dts-text-secondary);
}

/* Submit / cancel button row */
.dts-support-page .card p.text-center:last-child {
    margin-top: 8px;
}

/* ── Bare support pages (Downloads, Server Status, Announcements) ───────── */
/* These pages output bare content with no .card wrapper — the hook injects  */
/* a .dts-support-bare div to give the content a white card appearance.      */
.dts-support-bare {
    background-color: var(--dts-bg);
    border: 1px solid var(--dts-border);
    border-radius: var(--dts-radius);
    box-shadow: var(--dts-shadow-sm);
    padding: 24px;
}

/* Search inputs inside bare pages */
.dts-support-bare .input-group.input-group-lg {
    margin-bottom: 16px;
}

/* Form labels inside bare pages */
.dts-support-bare label {
    font-weight: 500;
    color: var(--dts-primary);
    font-size: 13px;
    margin-bottom: 4px;
}

/* ── Knowledge base / support centre search bar ────────────────────────── */

.dts-support-search-wrap {
    width: 100%;
}

.dts-support-search-box {
    position: relative;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1.5px solid var(--dts-border);
    border-radius: 40px;
    box-shadow: var(--dts-shadow-sm);
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dts-support-search-box:focus-within {
    border-color: var(--dts-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dts-primary) 15%, transparent);
}

.dts-support-search-icon {
    position: absolute;
    left: 18px;
    color: var(--dts-text-muted);
    font-size: 15px;
    pointer-events: none;
    z-index: 2;
}

.dts-support-search-input {
    flex: 1;
    border: none !important;
    box-shadow: none !important;
    background: #fff !important;
    padding: 13px 16px 13px 46px !important;
    font-size: 15px;
    color: var(--dts-text-primary);
    border-radius: 0 !important;
}

.dts-support-search-input::placeholder {
    color: var(--dts-text-muted);
}

.dts-support-search-btn {
    flex-shrink: 0;
    border-radius: 0 40px 40px 0 !important;
    padding: 12px 24px !important;
    font-size: 14px;
    font-weight: 600;
    border: none !important;
}

/* Legacy alias */
.dts-kb-search-bar .input-group-text {
    border: 1px solid var(--dts-border);
    border-right: 0;
}

/* ── Knowledge base item rows ──────────────────────────────────────────── */

.dts-kb-cat-item {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 12px 16px !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
}

.dts-kb-cat-item:hover {
    background-color: var(--dts-bg-alt) !important;
}

.dts-kb-item-body {
    flex: 1;
    min-width: 0;
}

/* Section title — sits above the field box */
.dts-section-title {
    font-size: 24px;
    font-weight: 300;
    line-height: 24px;
    color: #164e7d;
    font-family: 'Roboto', var(--dts-font-family);
    margin: 0 0 12px 0;
    padding: 0;
}

/* White rounded field box */
.dts-field-box {
    background-color: #ffffff;
    border-radius: 8px;
    border: 1px solid #e4e8ed;
    padding: 24px;
    margin-bottom: 0;
}

/* ── Sidebar info panel (Your Info / contact details body) ──────────────── */

/* ── Buttons ───────────────────────────────────────────────────────────── */

.btn {
    border-radius: var(--dts-radius);
    font-weight: 500;
    font-family: var(--dts-font-family);
    transition: var(--dts-transition-fast);
}

.btn-primary {
    background-color: var(--dts-primary);
    border-color: var(--dts-primary);
    color: var(--dts-text-inverted);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--dts-primary-hover);
    border-color: var(--dts-primary-hover);
    color: var(--dts-text-inverted);
    box-shadow: var(--dts-shadow-btn);
}

.btn-default,
.btn-outline-secondary {
    background-color: var(--dts-bg);
    color: var(--dts-text);
    border: 1px solid var(--dts-border);
}

.btn-default:hover,
.btn-outline-secondary:hover {
    background-color: var(--dts-bg-alt);
    border-color: var(--dts-primary);
    color: var(--dts-primary);
}

.btn-success { background-color: var(--dts-success); border-color: var(--dts-success); }
.btn-danger  { background-color: var(--dts-danger);  border-color: var(--dts-danger); }
.btn-info    { background-color: var(--dts-accent);  border-color: var(--dts-accent); }

/* ── Forms ─────────────────────────────────────────────────────────────── */

.form-control {
    border: 1px solid var(--dts-border-input);
    border-radius: var(--dts-radius-sm);
    color: var(--dts-text);
    font-family: var(--dts-font-family);
    font-size: var(--dts-font-size-sm);
    padding: 0.5rem 0.875rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control:focus {
    border-color: var(--dts-border-focus);
    box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.12);
    outline: none;
}

.form-control::placeholder {
    color: var(--dts-text-muted);
}

label {
    color: var(--dts-text);
    font-size: var(--dts-font-size-sm);
    font-weight: 500;
    margin-bottom: 4px;
}

/* ── Tables ────────────────────────────────────────────────────────────── */

.table {
    color: var(--dts-text);
}

.table thead th {
    border-bottom: 2px solid var(--dts-border);
    color: var(--dts-text-secondary);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 9px 14px;
}

.table td {
    border-top: 1px solid var(--dts-border);
    padding: 9px 14px;
    vertical-align: middle;
    font-size: var(--dts-font-size-sm);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--dts-bg-alt);
}

.table-hover tbody tr:hover {
    background-color: rgba(74, 144, 217, 0.05);
}

/* ── Alerts ────────────────────────────────────────────────────────────── */

.alert {
    border-radius: var(--dts-radius);
    border: none;
    font-size: var(--dts-font-size-sm);
}

.alert-success { background-color: rgba(0, 166, 62, 0.1);   color: #015c1f; }
.alert-warning { background-color: rgba(245, 158, 11, 0.12); color: #92400e; }
.alert-danger  { background-color: rgba(231, 0, 11, 0.1);   color: #7f0006; }
.alert-info    { background-color: rgba(74, 144, 217, 0.1);  color: var(--dts-primary-dark); }

/* ── Badges ────────────────────────────────────────────────────────────── */

.badge-primary { background-color: var(--dts-primary); }
.badge-info    { background-color: var(--dts-accent); }
.badge-success { background-color: var(--dts-success); }
.badge-danger  { background-color: var(--dts-danger); }

/* ── Client area home tiles ────────────────────────────────────────────── */

/* add gutter between tile columns */
.tiles .row.no-gutters {
    margin: 0 -8px;
}

.tiles .row.no-gutters > [class*="col"] {
    padding: 0 8px;
}

/* twenty-one: a.tile IS the clickable card — override parent grey styles */
.tiles .tile,
a.tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 36px 12px;
    background-color: #ffffff !important;
    border: 1px solid var(--dts-border) !important;
    border-right: 1px solid var(--dts-border) !important;
    border-radius: var(--dts-radius);
    box-shadow: var(--dts-shadow-sm);
    overflow: hidden;
    text-align: center;
    text-decoration: none;
    color: var(--dts-text);
    transition: var(--dts-transition);
}

.tiles .tile:hover,
a.tile:hover {
    background-color: #ffffff !important;
    box-shadow: var(--dts-shadow-md);
    transform: translateY(-2px);
    border-color: var(--dts-primary) !important;
    text-decoration: none;
    color: var(--dts-text);
    cursor: pointer;
}

/* hide icons inside tiles */
a.tile > i,
.tiles .tile i {
    display: none !important;
}


/* six theme: div.tile > a — kept for backward compat */
.tile > a,
.tile a {
    display: block;
    background-color: var(--dts-bg);
    border: 1px solid var(--dts-border);
    border-radius: var(--dts-radius);
    padding: 24px 16px;
    text-align: center;
    text-decoration: none;
    transition: var(--dts-transition);
    box-shadow: var(--dts-shadow-sm);
    overflow: hidden;
    position: relative;
    color: var(--dts-text);
}

.tile > a:hover {
    box-shadow: var(--dts-shadow-md);
    transform: translateY(-2px);
    border-color: var(--dts-primary);
    text-decoration: none;
}

.tile .icon {
    font-size: 2rem;
    color: var(--dts-primary);
    margin-bottom: 10px;
}

.tile .stat {
    font-size: 2rem;
    font-weight: 700;
    color: var(--dts-text);
    line-height: 1;
    margin-top: 0 !important;
}

.tile .title {
    font-size: var(--dts-font-size-sm);
    color: var(--dts-text-secondary);
    margin-top: 6px;
}

.bg-color-blue  { background-color: var(--dts-primary); }
.bg-color-green { background-color: var(--dts-success); }
.bg-color-red   { background-color: var(--dts-danger); }
.bg-color-gold  { background-color: var(--dts-warning); }

/* ── Dashboard — domain search panel ───────────────────────────────────── */

.home-domain-search {
    background-color: var(--dts-blue-900) !important;
    border-radius: var(--dts-radius);
}

.home-domain-search h2,
.home-domain-search .p-5 {
    color: #fff;
}

.home-domain-search .input-group-wrapper {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

.home-domain-search .input-group-wrapper .form-control {
    background: #fff;
    color: var(--dts-text);
}

.home-domain-search .btn-primary {
    background-color: var(--dts-blue-700);
    border-color: var(--dts-blue-700);
    color: #fff;
}

.home-domain-search .btn-success {
    background-color: var(--dts-blue-800);
    border-color: var(--dts-blue-800);
    color: #fff;
}

/* ── Register a New Domain dashboard card ───────────────────────────────── */

/* Hint text above the input */
.dts-domain-hint {
    font-size: 12px;
    color: var(--dts-text-secondary);
    margin: 0 0 10px 0;
}

/* Empty state message (e.g. no announcements) */
.dts-empty-state {
    font-size: 13px;
    color: var(--dts-text-secondary);
    margin: 0;
}

/* No recent tickets — center the message */
div[menuitemname="Recent Support Tickets"] .card-body {
    text-align: center;
    font-size: 13px;
    color: var(--dts-text-secondary);
}

/* No announcements — center the empty state */
div[menuitemname="Recent News"] .card-body {
    text-align: center;
    font-size: 13px;
    color: var(--dts-text-secondary);
}

div[menuitemname="Register a New Domain"] .card-body {
    padding: 20px !important;
}

/* Input + buttons: same height, flush together */
div[menuitemname="Register a New Domain"] .input-group {
    display: flex;
    align-items: stretch;
}

div[menuitemname="Register a New Domain"] .form-control,
div[menuitemname="Register a New Domain"] input[type="text"] {
    height: 40px;
    font-size: 14px;
    border: 1px solid var(--dts-border-input) !important;
    border-right: none !important;
    border-radius: var(--dts-radius-sm) 0 0 var(--dts-radius-sm) !important;
    color: var(--dts-text) !important;
    background-color: #fff !important;
    padding: 0 14px;
    flex: 1;
}

div[menuitemname="Register a New Domain"] .form-control:focus,
div[menuitemname="Register a New Domain"] input[type="text"]:focus {
    border-color: var(--dts-border-focus) !important;
    box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.12) !important;
    outline: none;
    z-index: 1;
}

/* Register — primary blue, left side (left radius, right border joins input) */
div[menuitemname="Register a New Domain"] input[value="Register"] {
    background-color: var(--dts-primary) !important;
    border: 1px solid var(--dts-primary) !important;
    color: #ffffff !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    height: 40px;
    padding: 0 18px !important;
    border-radius: var(--dts-radius-sm) 0 0 var(--dts-radius-sm) !important;
    transition: var(--dts-transition-fast);
}

div[menuitemname="Register a New Domain"] input[value="Register"]:hover {
    background-color: var(--dts-primary-hover) !important;
    border-color: var(--dts-primary-hover) !important;
}

/* Transfer — outlined secondary, right side (right radius) */
div[menuitemname="Register a New Domain"] input[value="Transfer"] {
    background-color: #ffffff !important;
    border: 1px solid var(--dts-border) !important;
    color: var(--dts-text) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    height: 40px;
    padding: 0 16px !important;
    border-radius: 0 var(--dts-radius-sm) var(--dts-radius-sm) 0 !important;
    transition: var(--dts-transition-fast);
}

div[menuitemname="Register a New Domain"] input[value="Transfer"]:hover {
    background-color: var(--dts-bg-alt) !important;
    color: var(--dts-primary) !important;
}

/* ── Dashboard — card accent border colors (DTS token overrides) ────────── */

.card-accent-blue   { border-top-color: var(--dts-primary); }
.card-accent-green  { border-top-color: var(--dts-success); }
.card-accent-red    { border-top-color: var(--dts-danger); }
.card-accent-gold   { border-top-color: var(--dts-warning); }

/* ── Sidebar — info panel Update button ─────────────────────────────────── */

/* Target the Update/Edit button WHMCS renders as btn-success inside the Your Info panel */
.dts-sidebar-card-body .btn-success,
.dts-sidebar-card-body .btn-success:link,
.dts-sidebar-card-body .btn-success:visited,
.sidebar .btn-success,
.sidebar .btn-success:link,
.sidebar .btn-success:visited {
    background-color: var(--dts-primary) !important;
    border-color: var(--dts-primary) !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border-radius: var(--dts-radius-sm) !important;
    padding: 7px 16px !important;
    width: 100%;
    display: block;
    text-align: center;
    transition: var(--dts-transition-fast);
    margin-top: 12px;
}

.dts-sidebar-card-body .btn-success:hover,
.dts-sidebar-card-body .btn-success:focus,
.sidebar .btn-success:hover,
.sidebar .btn-success:focus {
    background-color: var(--dts-primary-hover) !important;
    border-color: var(--dts-primary-hover) !important;
    color: #ffffff !important;
    box-shadow: var(--dts-shadow-btn) !important;
    text-decoration: none;
}

/* New Contact link — same shape as Update button, keep its own color */
.dts-sidebar-card[menuitemname*="Contacts"] .dts-sidebar-card-body a,
.dts-sidebar-card[menuitemname*="Sub-Account"] .dts-sidebar-card-body a {
    display: inline-block;
    font-size: 13px !important;
    font-weight: 500 !important;
    border-radius: var(--dts-radius-sm) !important;
    padding: 7px 16px !important;
    margin-top: 8px;
    transition: var(--dts-transition-fast);
    text-decoration: none;
}

/* Sidebar info text */
.dts-sidebar-card-body p,
.dts-sidebar-card-body address {
    font-size: 13px;
    color: var(--dts-text-secondary);
    line-height: 1.6;
    margin-bottom: 4px;
}

/* ── Sidebar body HTML injected by WHMCS (VIEW filter, status links) ──── */

/* Strip padding from the body wrapper so nav items sit flush */
.dts-sidebar-card-body .list-group {
    margin: -16px;
}

/* Each list-group-item becomes a DTS-style nav row */
.dts-sidebar-card-body .list-group-item {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 9px 16px !important;
    border: none !important;
    border-left: 3px solid transparent !important;
    border-radius: 0 !important;
    background: none !important;
    font-size: 13.5px;
    font-weight: 400;
    font-family: var(--dts-font-family);
    color: var(--dts-text);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
}

.dts-sidebar-card-body .list-group-item:hover,
.dts-sidebar-card-body .list-group-item:focus {
    background-color: #f0f4f8 !important;
    color: var(--dts-primary) !important;
    text-decoration: none;
    padding-left: 20px !important;
}

.dts-sidebar-card-body .list-group-item.active {
    background-color: #e8f0f7 !important;
    color: var(--dts-primary) !important;
    font-weight: 500;
    border-left-color: var(--dts-primary) !important;
    padding-left: 20px !important;
}

/* Hide the radio/circle icon WHMCS prepends, replace with a chevron */
.dts-sidebar-card-body .list-group-item .fas.fa-circle,
.dts-sidebar-card-body .list-group-item .far.fa-circle,
.dts-sidebar-card-body .list-group-item i.fa-circle {
    display: none !important;
}

/* Count badge inside the filter links */
.dts-sidebar-card-body .list-group-item .badge {
    margin-left: auto;
    background-color: var(--dts-border);
    color: var(--dts-text-secondary);
    font-size: 11px;
    font-weight: 600;
    border-radius: 10px;
    padding: 2px 7px;
}

.dts-sidebar-card-body .list-group-item.active .badge {
    background-color: var(--dts-primary);
    color: #fff;
}

/* ── Client home cards (panels below the stat tiles) ───────────────────── */

/* Wrap the entire home cards area */
.client-home-cards {
    margin-top: 8px;
}

/* Each panel card: clean white, rounded, subtle border */
.client-home-cards .card {
    background-color: #ffffff;
    border: 1px solid var(--dts-border) !important;
    border-radius: var(--dts-radius) !important;
    box-shadow: var(--dts-shadow-sm) !important;
    margin-bottom: 24px;
    overflow: hidden;
}

/* Remove the colored left/top accent border WHMCS adds by default */
.client-home-cards .card[class*="card-accent-"] {
    border-top: 1px solid var(--dts-border) !important;
}

/* Card header: clean, light background, DTS title style */
.client-home-cards .card-header {
    background-color: #f7f9fb !important;
    border-bottom: 1px solid var(--dts-border) !important;
    padding: 14px 20px !important;
}

/* Card title: matches dts-section-title style */
.client-home-cards .card-header .card-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--dts-text);
    margin: 0 !important;
}

/* Hide card header icons */
.client-home-cards .card-header .card-title > i,
.client-home-cards .card-header .card-title > .fa,
.client-home-cards .card-header .card-title > [class*="fa-"] {
    display: none !important;
}

/* Float-right button in card header: restyle as a small link-style button */
.client-home-cards .card-header .float-right {
    display: inline-flex;
    align-items: center;
}

.client-home-cards .card-header .float-right .btn,
.client-home-cards .card-header .card-title .btn,
.client-home-cards .card-header .card-title a.btn {
    background-color: transparent !important;
    border: 1px solid var(--dts-border) !important;
    color: var(--dts-text-secondary) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    padding: 3px 10px !important;
    border-radius: var(--dts-radius-sm) !important;
    box-shadow: none !important;
    transition: var(--dts-transition-fast);
    text-decoration: none;
}

.client-home-cards .card-header .float-right .btn:hover,
.client-home-cards .card-header .card-title .btn:hover,
.client-home-cards .card-header .card-title a.btn:hover {
    background-color: var(--dts-bg-alt) !important;
    border-color: var(--dts-primary) !important;
    color: var(--dts-primary) !important;
    text-decoration: none;
}

/* Hide icon inside header buttons */
.client-home-cards .card-header .btn i,
.client-home-cards .card-header .btn .fa,
.client-home-cards .card-header .btn [class*="fa-"] {
    display: none !important;
}

/* Card footer: hide all "View More..." links */
.client-home-cards .card-footer {
    display: none !important;
}

/* List group inside cards: clean rows */
.client-home-cards .list-group {
    border-top: none;
}

.client-home-cards .list-group-item {
    border: none;
    border-bottom: 1px solid var(--dts-border);
    padding: 12px 20px;
    background-color: #ffffff;
    color: var(--dts-text);
    transition: background-color 0.15s ease;
}

.client-home-cards .list-group-item:last-child {
    border-bottom: none;
}

.client-home-cards a.list-group-item:hover,
.client-home-cards .list-group-item-action:hover {
    background-color: #f7f9fb;
    color: var(--dts-primary);
    text-decoration: none;
}

/* Card body padding */
.client-home-cards .card-body {
    padding: 16px 20px;
}

/* ── Active Products/Services card ─────────────────────────────────────── */

/* move status badge to the right, beside the Manage button */
.list-group-item-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

.list-group-item-name {
    order: 1;
    flex: 1;
    min-width: 0;
    font-size: 14px;
    color: var(--dts-text);
}

.list-group-item-status {
    order: 2;
}

.list-group-item-actions {
    order: 3;
}

/* Status badges inside list group items */
.client-home-cards .badge {
    font-size: 11px;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 12px;
    letter-spacing: 0.02em;
}

/* Active / status badge colors */
.client-home-cards .badge-success,
.client-home-cards .label-success,
.client-home-cards .badge.text-uppercase[style*="background"] {
    background-color: #e6f7ee !important;
    color: #00713a !important;
}

/* Action buttons (Manage) inside list group items */
.client-home-cards .list-group-item .btn-sm,
.client-home-cards .list-group-item .btn-xs,
.client-home-cards .list-group-item .btn-default {
    font-size: 12px !important;
    padding: 4px 12px !important;
    font-weight: 500 !important;
    border-radius: var(--dts-radius-sm) !important;
    border: 1px solid var(--dts-border) !important;
    background-color: #ffffff !important;
    color: var(--dts-text) !important;
    box-shadow: none !important;
    transition: var(--dts-transition-fast);
}

.client-home-cards .list-group-item .btn-sm:hover,
.client-home-cards .list-group-item .btn-xs:hover,
.client-home-cards .list-group-item .btn-default:hover {
    border-color: var(--dts-primary) !important;
    color: var(--dts-primary) !important;
    background-color: #f7f9fb !important;
    text-decoration: none;
}

/* Service name and domain text */
.client-home-cards .list-group-item strong,
.client-home-cards .list-group-item b {
    font-weight: 500;
    color: var(--dts-text);
}

.client-home-cards .list-group-item small,
.client-home-cards .list-group-item .text-muted {
    font-size: 12px;
    color: var(--dts-text-secondary);
}

/* "Powered by" text in OX App Suite card */
.client-home-cards .card-body small,
.client-home-cards .card-body .powered-by {
    font-size: 11px;
    color: var(--dts-text-muted);
}

/* Domain search box in Register card */
.client-home-cards .input-group .form-control {
    border-radius: var(--dts-radius-sm) 0 0 var(--dts-radius-sm) !important;
}

.client-home-cards .input-group .btn {
    border-radius: 0 var(--dts-radius-sm) var(--dts-radius-sm) 0 !important;
}

/* Register / Transfer buttons — override green to DTS blue */
.client-home-cards .btn-success:not(.badge) {
    background-color: var(--dts-primary) !important;
    border-color: var(--dts-primary) !important;
    color: #ffffff !important;
}

.client-home-cards .btn-success:not(.badge):hover,
.client-home-cards .btn-success:not(.badge):focus {
    background-color: var(--dts-primary-hover) !important;
    border-color: var(--dts-primary-hover) !important;
    color: #ffffff !important;
    box-shadow: var(--dts-shadow-btn) !important;
}

/* "Powered by WHMCompleteSolution" footer text */
.primary-content > p:last-child,
#main-body > .container > .row > .col > p:last-child {
    font-size: 12px;
    color: var(--dts-text-muted);
    text-align: center;
    margin-top: 8px;
}

/* Hide "Powered by" inside bare support page card — same as other pages */
.dts-support-bare > p:last-child,
.dts-support-bare > p[style*="text-align"],
.dts-support-page .card ~ p[style*="text-align"],
.dts-support-page > p:last-child {
    display: none;
}

/* ── Footer ────────────────────────────────────────────────────────────── */

.dts-footer {
    background-color: var(--dts-bg-footer);
    border-top: 1px solid var(--dts-border);
}

/* Main body: logo + 3 columns */
.dts-footer-body {
    padding: var(--dts-space-10) 0 var(--dts-space-5);
}

/* Brand column */
.dts-footer-brand {
    display: inline-block;
    margin-bottom: var(--dts-space-3);
    text-decoration: none;
}

.dts-footer-logo {
    max-height: 36px;
    width: auto;
}

.dts-footer-logo-text {
    font-size: var(--dts-font-size-lg);
    font-weight: 700;
    color: var(--dts-primary);
}

.dts-footer-tagline {
    font-size: var(--dts-font-size-sm);
    color: var(--dts-text-secondary);
    line-height: 1.5;
    margin: 0;
    max-width: 220px;
}

/* Column headings */
.dts-footer-heading {
    font-size: var(--dts-font-size-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dts-primary);
    margin-bottom: var(--dts-space-4);
}

/* Link lists */
.dts-footer-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dts-footer-nav li {
    margin-bottom: var(--dts-space-2);
}

.dts-footer-nav a {
    font-size: var(--dts-font-size-sm);
    font-weight: 500;
    color: var(--dts-text);
    text-decoration: none;
    transition: var(--dts-transition-fast);
}

.dts-footer-nav a:hover {
    color: var(--dts-accent);
    text-decoration: none;
}

/* Bottom bar */
.dts-footer-bottom {
    background-color: var(--dts-bg-alt);
    border-top: 1px solid var(--dts-border);
    padding: var(--dts-space-4) 0;
}

.dts-footer-copyright {
    font-size: var(--dts-font-size-sm);
    color: var(--dts-text-secondary);
}

.dts-footer-legal-links {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--dts-space-4);
}

.dts-footer-legal-links li {
    font-size: var(--dts-font-size-sm);
}

.dts-footer-legal-links a {
    color: var(--dts-text-secondary);
    text-decoration: none;
}

.dts-footer-legal-links a:hover {
    color: var(--dts-primary);
    text-decoration: underline;
}

.dts-back-to-top {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--dts-border);
    color: var(--dts-text-secondary);
    font-size: 0.7rem;
    flex-shrink: 0;
    margin-left: var(--dts-space-4);
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.dts-back-to-top:hover {
    background-color: var(--dts-primary);
    border-color: var(--dts-primary);
    color: #fff;
    text-decoration: none;
}

/* Mobile: all columns full-width, left-aligned, clean stack */
@media (max-width: 767px) {
    .dts-footer-body {
        padding: var(--dts-space-8) 0 var(--dts-space-6);
    }
    .dts-footer-brand-col,
    .dts-footer-col {
        flex: 0 0 100%;
        max-width: 100%;
        text-align: left;
        margin-bottom: var(--dts-space-6) !important;
    }
    .dts-footer-tagline {
        max-width: 100%;
    }
    .dts-footer-social {
        justify-content: flex-start;
        margin-top: 0;
    }
}

/* Social icons */
.dts-footer-social {
    display: flex;
    gap: var(--dts-space-4);
    align-items: flex-start;
    margin-top: -6px;
}

.dts-footer-social a {
    color: var(--dts-primary);
    font-size: 1.5rem;
    transition: var(--dts-transition-fast);
    text-decoration: none;
}

.dts-footer-social a:hover {
    color: var(--dts-accent);
    text-decoration: none;
}

/* ── DataTables / Table-list pages (Services, Domains, Invoices, Tickets) ── */

/* Wrap the table in a card-like shell */
.table-container {
    background-color: #ffffff;
    border: 1px solid var(--dts-border);
    border-radius: var(--dts-radius);
    box-shadow: var(--dts-shadow-sm);
    overflow: hidden;
    margin-bottom: 0;
}

/* DataTables wrapper: grey background everywhere, white only in data rows */
.dataTables_wrapper {
    background-color: #f7f9fb;
    border: 1px solid var(--dts-border);
    border-radius: var(--dts-radius);
    box-shadow: var(--dts-shadow-sm);
    overflow: hidden;
    margin-bottom: 0;
    padding: 0;
}

/* When DataTable sits inside a dts-sidebar-card, remove double border/shadow */
.dts-sidebar-card-body .dataTables_wrapper {
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* Top bar: filter left, info right, full grey background across */
.dataTables_wrapper .listtable {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr;
    padding: 0;
    background-color: #f7f9fb;
}

/* The filter sits top-left */
.dataTables_wrapper .listtable .dataTables_filter {
    grid-column: 1;
    grid-row: 1;
    float: none;
    padding: 8px 14px;
}

/* The info sits top-right */
.dataTables_wrapper .listtable .dataTables_info {
    grid-column: 2;
    grid-row: 1;
    float: none;
    display: flex;
    align-items: center;
    padding: 0 14px;
    line-height: normal;
    font-size: var(--dts-font-size-sm);
    color: var(--dts-text-secondary);
}

/* The table spans full width in its own row */
.dataTables_wrapper .listtable > table {
    grid-column: 1 / -1;
    grid-row: 2;
    clear: none;
    border-top: 1px solid var(--dts-border) !important;
    width: 100%;
    background-color: #fff;
}

/* DataTables filter label */
.dataTables_wrapper .dataTables_filter label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: var(--dts-font-size-sm);
    color: var(--dts-text-secondary);
    font-weight: 400;
}

/* Hide the "Search:" text node — keep only the input */
.dataTables_wrapper .dataTables_filter label > *:not(input):not(.form-control) {
    display: none;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_filter label .form-control {
    height: 28px;
    padding: 3px 10px !important;
    font-size: 12px !important;
    border: 1px solid var(--dts-border-input) !important;
    border-radius: var(--dts-radius-sm) !important;
    color: var(--dts-text) !important;
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
    width: 180px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dataTables_wrapper .dataTables_filter input::placeholder {
    color: var(--dts-text-muted);
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_filter label .form-control:focus {
    border-color: var(--dts-border-focus) !important;
    box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.12) !important;
    outline: none;
}

/* Bottom bar: pagination left, length right in a single contained row */
.dataTables_wrapper .dt-bottom-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--dts-border);
    background-color: #f7f9fb;
    padding: 0;
}

.dataTables_wrapper .dataTables_paginate {
    float: none;
    padding: 7px 14px;
    margin: 0;
}

.dataTables_wrapper .dataTables_length {
    float: none;
    margin: 0;
    padding: 7px 14px;
}

.dataTables_wrapper .dataTables_paginate .pagination {
    margin: 0;
}

.dataTables_wrapper .dataTables_paginate .page-item .page-link {
    font-size: 12px;
    padding: 3px 9px;
    border-color: var(--dts-border);
    color: var(--dts-primary);
    background-color: #ffffff;
    border-radius: var(--dts-radius-sm) !important;
    margin: 0 1px;
    transition: var(--dts-transition-fast);
}

.dataTables_wrapper .dataTables_paginate .page-item .page-link:hover {
    background-color: var(--dts-bg-alt);
    border-color: var(--dts-primary);
    color: var(--dts-primary);
}

.dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
    background-color: var(--dts-primary);
    border-color: var(--dts-primary);
    color: #ffffff;
}

.dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link {
    color: var(--dts-text-muted);
    background-color: #ffffff;
    border-color: var(--dts-border);
}

/* Length selector label */
.dataTables_wrapper .dataTables_length label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 12px;
    color: var(--dts-text-secondary);
    font-weight: 400;
}

.dataTables_wrapper .dataTables_length select {
    height: 26px;
    padding: 2px 24px 2px 8px;
    font-size: 12px;
    border: 1px solid var(--dts-border-input);
    border-radius: var(--dts-radius-sm);
    color: var(--dts-text);
    background-color: #ffffff;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7c93'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    cursor: pointer;
}

/* Table itself */
.dataTables_wrapper table.table-list,
.table-container table.table-list {
    margin: 0 !important;
    width: 100% !important;
    border: none !important;
    border-radius: 0;
}

table.table-list thead th,
.dataTables_wrapper table.table-list thead th {
    background-color: #f7f9fb;
    border-bottom: 2px solid var(--dts-border) !important;
    border-top: none;
    border-radius: 0 !important;
    color: var(--dts-text-secondary);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 9px 14px;
    text-align: left;
    white-space: nowrap;
}

/* Sorting arrows — keep them but tint to DTS */
.dataTables_wrapper table.table-list thead th.sorting_asc,
.dataTables_wrapper table.table-list thead th.sorting_desc {
    background-color: #edf2f7 !important;
    color: var(--dts-primary);
}

table.table-list tbody td,
.dataTables_wrapper table.table-list tbody td {
    background-color: #ffffff;
    border-top: 1px solid var(--dts-border) !important;
    color: var(--dts-text);
    font-size: var(--dts-font-size-sm);
    padding: 9px 14px;
    vertical-align: middle;
}

table.table-list tbody td.py-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Row hover */
.table-list > tbody > tr {
    cursor: pointer;
    transition: background-color 0.13s ease;
}

.table-list > tbody > tr:hover > td,
.dataTables_wrapper table.table-list tbody tr:hover > td {
    background-color: #f0f5fa !important;
    color: var(--dts-text);
}

/* First row: no top border */
.table-list > tbody > tr:first-child > td {
    border-top: none !important;
}

/* Ticket subject link (border-left style) */
.table-list > tbody > tr > td a.border-left {
    border-left: 3px solid var(--dts-accent);
    padding-left: 12px;
    display: block;
    text-decoration: none;
    color: var(--dts-text);
    transition: color 0.15s ease;
}

.table-list > tbody > tr > td a.border-left:hover {
    color: var(--dts-primary);
    text-decoration: none;
}

.ticket-number {
    font-size: 11px;
    font-weight: 600;
    color: var(--dts-text-secondary);
    display: block;
    margin-bottom: 2px;
}

.ticket-subject {
    font-size: 13.5px;
    color: var(--dts-text);
}

.ticket-subject.unread {
    font-weight: 600;
    color: var(--dts-primary);
}

/* Empty table message */
table.dataTable td.dataTables_empty {
    font-size: var(--dts-font-size-sm);
    color: var(--dts-text-secondary);
    padding: 28px 16px;
    text-align: center;
}

/* Loading spinner (before DataTable init) */
#tableLoading {
    padding: 32px 0;
    color: var(--dts-text-secondary);
    font-size: var(--dts-font-size-sm);
}

/* ── Status badges (label.status) ─── */

.label.status,
span.label.status {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 3px 10px;
    border-radius: 20px;
    text-transform: capitalize;
    white-space: nowrap;
    color: #ffffff;
    background-color: var(--dts-text-secondary);
}

/* Active / Open / Completed / Paid / Accepted */
.status-active,
.status-open,
.status-completed,
.status-paid,
.status-accepted,
.status-delivered {
    background-color: #d1fae5 !important;
    color: #065f46 !important;
}

/* Pending / Unpaid / In Progress */
.status-pending,
.status-unpaid,
.status-inprogress,
.status-payment-pending {
    background-color: #fef3c7 !important;
    color: #92400e !important;
}

/* Suspended / Pending Transfer / Refunded / Grace / Redemption */
.status-suspended,
.status-pending-transfer,
.status-refunded,
.status-grace,
.status-redemption,
.status-pending-registration {
    background-color: #ffedd5 !important;
    color: #9a3412 !important;
}

/* Expired / Fraud / Dead / Lost / Transferred Away / Terminated */
.status-expired,
.status-fraud,
.status-dead,
.status-lost,
.status-transferred-away,
.status-terminated {
    background-color: #fee2e2 !important;
    color: #991b1b !important;
}

/* Cancelled / Closed / On Hold */
.status-cancelled,
.status-closed,
.status-onhold,
.status-collections {
    background-color: #f3f4f6 !important;
    color: #374151 !important;
}

/* Answered / Customer Reply */
.status-answered {
    background-color: #d1fae5 !important;
    color: #065f46 !important;
}

.status-customer-reply {
    background-color: #fef9c3 !important;
    color: #854d0e !important;
}

/* Custom status color (inline style set by WHMCS) */
span.status-custom {
    color: #ffffff !important;
}

/* ── VIEW filter sidebar card (domains/services/etc) ────────────────────── */

/* Replace fa-circle with a solid colored dot */
.view-filter-btns .dts-sidebar-nav-icon {
    display: none !important;
}

.view-filter-btns .dts-sidebar-nav-icon-wrap::after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #adb5bd;
    flex-shrink: 0;
}

/* Active → green */
.view-filter-btns a[menuitemname*="active" i] .dts-sidebar-nav-icon-wrap::after {
    background-color: #28a745;
}

/* Pending → yellow */
.view-filter-btns a[menuitemname*="pending" i] .dts-sidebar-nav-icon-wrap::after {
    background-color: #ffc107;
}

/* Expired / suspended / terminated → red */
.view-filter-btns a[menuitemname*="expired" i] .dts-sidebar-nav-icon-wrap::after,
.view-filter-btns a[menuitemname*="suspended" i] .dts-sidebar-nav-icon-wrap::after,
.view-filter-btns a[menuitemname*="terminated" i] .dts-sidebar-nav-icon-wrap::after {
    background-color: #dc3545;
}

/* Cancelled → grey (default, explicit) */
.view-filter-btns a[menuitemname*="cancelled" i] .dts-sidebar-nav-icon-wrap::after {
    background-color: #adb5bd;
}

/* Paid → green */
.view-filter-btns a[menuitemname="Paid"] .dts-sidebar-nav-icon-wrap::after {
    background-color: #28a745;
}

/* Unpaid → red */
.view-filter-btns a[menuitemname="Unpaid"] .dts-sidebar-nav-icon-wrap::after {
    background-color: #dc3545;
}

/* Refunded → grey */
.view-filter-btns a[menuitemname="Refunded"] .dts-sidebar-nav-icon-wrap::after {
    background-color: #adb5bd;
}

/* Bulk action buttons above domain table */
.tab-content .btn-group.btn-group-sm {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px !important;
}

.tab-content .btn-group.btn-group-sm .btn {
    font-size: 12px !important;
    font-weight: 500 !important;
    padding: 5px 14px !important;
    border-radius: var(--dts-radius-sm) !important;
    border: 1px solid var(--dts-border) !important;
    background-color: #ffffff !important;
    color: var(--dts-text) !important;
    box-shadow: none !important;
    transition: var(--dts-transition-fast);
    white-space: nowrap;
}

.tab-content .btn-group.btn-group-sm .btn:hover {
    border-color: var(--dts-primary) !important;
    color: var(--dts-primary) !important;
    background-color: #f0f5fa !important;
}

.tab-content .btn-group.btn-group-sm .btn i {
    margin-right: 4px;
    font-size: 11px;
    color: var(--dts-text-secondary);
}

.tab-content .btn-group.btn-group-sm .btn:hover i {
    color: var(--dts-primary);
}

/* Dropdown inside bulk actions */
.tab-content .btn-group .dropdown-menu {
    border: 1px solid var(--dts-border);
    border-radius: var(--dts-radius);
    box-shadow: var(--dts-shadow-md);
    padding: 4px 0;
}

.tab-content .btn-group .dropdown-item {
    font-size: var(--dts-font-size-sm);
    color: var(--dts-text);
    padding: 8px 16px;
}

.tab-content .btn-group .dropdown-item:hover {
    background-color: var(--dts-bg-alt);
    color: var(--dts-primary);
}

/* ── Marketing / public pages ──────────────────────────────────────────── */

/* Domain search box in hero */
.dts-domain-search-form {
    margin-top: 32px;
}

.dts-domain-search-box {
    display: flex;
    max-width: 580px;
    margin: 0 auto;
    background: #fff;
    border-radius: var(--dts-radius-pill);
    box-shadow: 0 4px 24px rgba(0,0,0,0.18);
    overflow: hidden;
}

.dts-domain-search-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 14px 20px;
    font-size: var(--dts-font-size-base);
    font-family: var(--dts-font-family);
    color: var(--dts-text);
    background: transparent;
    min-width: 0;
}

.dts-domain-search-input::placeholder {
    color: var(--dts-text-muted);
}

.dts-domain-search-btn {
    flex-shrink: 0;
    background-color: #164e7d;
    color: #fff;
    border: none;
    padding: 14px 24px;
    font-size: var(--dts-font-size-base);
    font-weight: 600;
    font-family: var(--dts-font-family);
    cursor: pointer;
    border-radius: 0 var(--dts-radius-pill) var(--dts-radius-pill) 0;
    transition: background-color 0.15s ease;
    white-space: nowrap;
}

.dts-domain-search-btn:focus,
.dts-domain-search-btn:focus-visible {
    outline: none;
}

.dts-domain-search-btn:hover {
    background-color: #1a5e94;
}

.dts-domain-search-hint {
    margin: 12px auto 0;
    font-size: var(--dts-font-size-sm);
    color: rgba(255,255,255,0.6);
    max-width: 580px;
}

.dts-domain-search-hint span {
    color: rgba(255,255,255,0.9);
    font-style: italic;
}

@media (max-width: 480px) {
    .dts-domain-search-btn {
        padding: 14px 16px;
        font-size: var(--dts-font-size-sm);
    }
}

/* Anchor offset so sticky header doesn't overlap jump targets */
#dts-pricing {
    scroll-margin-top: calc(var(--dts-nav-height) + 16px);
}

/* Page hero banner — used on hosting, domains, email, contact */
.dts-page-hero {
    background: linear-gradient(90deg, #164e7d 0%, #5086b6 100%);
    padding: 112px 0;
    min-height: 320px;
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--dts-text-inverted);
}
.dts-page-hero > .container {
    width: 100%;
}

.dts-page-hero-eyebrow {
    display: inline-block;
    font-size: var(--dts-font-size-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    margin-bottom: 12px;
}

.dts-page-hero-title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    color: #fff;
    margin: 0 0 16px;
    line-height: 1.15;
}

.dts-page-hero-lead {
    font-size: var(--dts-font-size-lg);
    color: rgba(255,255,255,0.85);
    max-width: 600px;
    margin: 0 auto;
    line-height: var(--dts-line-height);
}

.dts-page-hero-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Marketing section */
.dts-marketing-section {
    padding: 64px 0;
}

.dts-marketing-section + .dts-marketing-section {
    border-top: 1px solid var(--dts-border);
}

.dts-marketing-section.bg-alt {
    background-color: var(--dts-bg-alt);
}

.dts-marketing-section-title {
    font-size: var(--dts-font-size-2xl);
    font-weight: 700;
    color: var(--dts-text);
    margin: 0 0 12px;
}

.dts-marketing-section-lead {
    font-size: var(--dts-font-size-lg);
    color: var(--dts-text-secondary);
    max-width: 560px;
    margin: 0 auto 40px;
    line-height: var(--dts-line-height);
}

/* Feature card */
.dts-feature-card {
    background-color: var(--dts-bg);
    border: 1px solid var(--dts-border);
    border-radius: var(--dts-radius-lg);
    padding: 28px 24px;
    height: 100%;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.dts-feature-card:hover {
    box-shadow: var(--dts-shadow-md);
    transform: translateY(-2px);
}

.dts-feature-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--dts-radius);
    background-color: rgba(30, 90, 142, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    font-size: 1.25rem;
    color: var(--dts-primary);
}

.dts-feature-card-title {
    font-size: var(--dts-font-size-lg);
    font-weight: 600;
    color: var(--dts-text);
    margin: 0 0 8px;
}

.dts-feature-card-text {
    font-size: var(--dts-font-size-sm);
    color: var(--dts-text-secondary);
    line-height: var(--dts-line-height);
    margin: 0;
}

/* Pricing card */
.dts-pricing-card {
    background-color: var(--dts-bg);
    border: 1px solid var(--dts-border);
    border-radius: var(--dts-radius-lg);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.dts-pricing-card:hover {
    box-shadow: var(--dts-shadow-md);
    transform: translateY(-2px);
}

.dts-pricing-card.featured {
    border-color: var(--dts-primary);
    box-shadow: 0 0 0 2px var(--dts-primary), var(--dts-shadow-md);
}

.dts-pricing-card-badge {
    background-color: var(--dts-primary);
    color: #fff;
    font-size: var(--dts-font-size-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    padding: 6px 0;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Reserve the same 30px slot on non-featured cards so headers align */
.dts-pricing-card:not(.featured)::before {
    content: '';
    display: block;
    height: 30px;
}

.dts-pricing-card-header {
    padding: 28px 24px 16px;
    border-bottom: 1px solid var(--dts-border);
}

.dts-pricing-plan-name {
    font-size: var(--dts-font-size-lg);
    font-weight: 600;
    color: var(--dts-text);
    margin: 0 0 4px;
}

.dts-pricing-price {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    margin: 12px 0 4px;
    flex-wrap: nowrap;
}

.dts-pricing-amount {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--dts-primary);
    line-height: 1;
    white-space: nowrap;
    letter-spacing: -0.02em;
}

.dts-pricing-price-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding-bottom: 2px;
}

.dts-pricing-period {
    font-size: var(--dts-font-size-sm);
    color: var(--dts-text-muted);
    white-space: nowrap;
}

.dts-pricing-tagline {
    font-size: var(--dts-font-size-sm);
    color: var(--dts-text-secondary);
    margin: 0;
}

.dts-pricing-card-body {
    padding: 20px 24px;
    flex: 1;
}

.dts-pricing-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dts-pricing-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: var(--dts-font-size-sm);
    color: var(--dts-text);
    line-height: 1.5;
}

.dts-pricing-features li i {
    color: var(--dts-success);
    font-size: 0.875rem;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Raw product description HTML from DB */
.dts-pricing-description {
    font-size: var(--dts-font-size-sm);
    color: var(--dts-text-secondary);
    line-height: var(--dts-line-height);
}

.dts-pricing-description p {
    margin: 0 0 8px;
    font-weight: 400 !important;
    color: var(--dts-text-secondary) !important;
}

.dts-pricing-description ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dts-pricing-description ul li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--dts-text);
    line-height: 1.5;
    padding-left: 22px;
    position: relative;
}

.dts-pricing-description ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2300a63e' d='M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.75.75 0 1 1 1.06-1.06L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

.dts-pricing-card--wide {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 24px;
}

.dts-pricing-card--wide .dts-pricing-card-header {
    flex: 0 0 220px;
    border-bottom: none;
    border-right: 1px solid var(--dts-border);
    padding-right: 24px;
}

.dts-pricing-card--wide .dts-pricing-card-body {
    flex: 1;
    padding: 16px 0;
}

.dts-pricing-card--wide .dts-pricing-card-footer {
    flex: 0 0 auto;
    padding: 16px 24px;
    display: flex;
    align-items: center;
}

.dts-pricing-features--cols {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 4px 16px;
}

.dts-enterprise-features-block {
    margin-top: 2px;
}

.dts-enterprise-features-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--dts-text-muted);
    margin: 0 0 12px;
}

.dts-enterprise-features-table {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
}

.dts-enterprise-feature-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    font-size: var(--dts-font-size-sm);
    color: var(--dts-text);
    line-height: 1.45;
}

.dts-enterprise-feature-row .dts-pricing-feature-check {
    margin-top: 2px;
}

/* If the final item is unpaired, make it full-width to avoid half-row divider */
.dts-enterprise-features-table > .dts-enterprise-feature-row:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

@media (max-width: 991px) {
    .dts-enterprise-features-table {
        grid-template-columns: 1fr;
    }
}

/* Premium enterprise styling */
.dts-pricing-card--enterprise {
    background:
        radial-gradient(900px 220px at 12% -20%, rgba(255, 255, 255, 0.16), transparent 62%),
        linear-gradient(140deg, #0a274a 0%, #154a80 52%, #216eb6 100%);
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: 0 18px 36px rgba(8, 30, 64, 0.32);
}

/* Enterprise layout: compact top row, features full-width below */
.dts-pricing-card--enterprise.dts-pricing-card--wide {
    display: grid;
    grid-template-columns: minmax(280px, 380px) auto;
    grid-template-areas:
        "header footer"
        "body body";
    gap: 0;
    align-items: start;
}

.dts-pricing-card--enterprise.dts-pricing-card--wide .dts-pricing-card-header {
    grid-area: header;
    border-right: none;
    border-bottom: none;
    padding: 24px 24px 16px;
}

.dts-pricing-card--enterprise.dts-pricing-card--wide .dts-pricing-card-footer {
    grid-area: footer;
    justify-content: flex-end;
    align-self: center;
    padding: 16px 24px 12px;
}

.dts-pricing-card--enterprise.dts-pricing-card--wide .dts-pricing-card-body {
    grid-area: body;
    border-top: 1px solid rgba(255, 255, 255, 0.24);
    padding: 16px 24px 22px;
}

.dts-pricing-card--enterprise .dts-pricing-plan-name,
.dts-pricing-card--enterprise .dts-pricing-tagline,
.dts-pricing-card--enterprise .dts-pricing-amount,
.dts-pricing-card--enterprise .dts-pricing-period,
.dts-pricing-card--enterprise .dts-enterprise-features-title,
.dts-pricing-card--enterprise .dts-enterprise-feature-row {
    color: #fff;
}

.dts-pricing-card--enterprise .dts-pricing-card-header {
    border-right-color: rgba(255, 255, 255, 0.28);
}

.dts-pricing-card--enterprise .dts-pricing-tagline,
.dts-pricing-card--enterprise .dts-pricing-period,
.dts-pricing-card--enterprise .dts-enterprise-features-title {
    color: rgba(255, 255, 255, 0.86);
}

.dts-pricing-card--enterprise .dts-enterprise-feature-row {
    border-color: rgba(255, 255, 255, 0.2);
}

.dts-pricing-card--enterprise .dts-pricing-feature-check {
    color: #9cf5c0;
}

.dts-pricing-card--enterprise .dts-plan-cta {
    min-width: 176px;
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.7);
    color: #fff;
}

.dts-pricing-card--enterprise .dts-plan-cta:hover,
.dts-pricing-card--enterprise .dts-plan-cta:focus {
    background: #fff;
    border-color: #fff;
    color: #124a84;
}

@media (max-width: 991px) {
    .dts-pricing-card--enterprise.dts-pricing-card--wide {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "footer"
            "body";
    }

    .dts-pricing-card--enterprise.dts-pricing-card--wide .dts-pricing-card-footer {
        justify-content: flex-start;
        padding-top: 0;
    }
}

.dts-pricing-card-footer {
    padding: 16px 24px 24px;
}

/* Contact cards */
.dts-contact-card {
    background-color: var(--dts-bg);
    border: 1px solid var(--dts-border);
    border-radius: var(--dts-radius-lg);
    padding: 32px 24px;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.dts-contact-card:hover {
    box-shadow: var(--dts-shadow-md);
    transform: translateY(-2px);
}

.dts-contact-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--dts-radius-pill);
    background: linear-gradient(90deg, #164e7d 0%, #5086b6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.375rem;
    color: #fff;
    margin-bottom: 16px;
    flex-shrink: 0;
}

.dts-contact-card-title {
    font-size: var(--dts-font-size-lg);
    font-weight: 600;
    color: var(--dts-text);
    margin: 0 0 8px;
}

.dts-contact-card-text {
    font-size: var(--dts-font-size-sm);
    color: var(--dts-text-secondary);
    line-height: var(--dts-line-height);
    margin: 0 0 20px;
    flex: 1;
}

/* Domain TLD grid */
.dts-tld-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    margin-top: 8px;
}

.dts-tld-card {
    background-color: var(--dts-bg);
    border: 1px solid var(--dts-border);
    border-radius: var(--dts-radius);
    padding: 16px 12px;
    text-align: center;
    text-decoration: none;
    display: block;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dts-tld-card:hover {
    border-color: var(--dts-primary);
    box-shadow: var(--dts-shadow-sm);
    text-decoration: none;
}

.dts-tld-name {
    display: block;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--dts-primary);
    margin-bottom: 4px;
}

.dts-tld-price {
    display: block;
    font-size: var(--dts-font-size-xs);
    color: var(--dts-text-secondary);
}

/* CTA strip */
.dts-cta-strip {
    background: linear-gradient(90deg, #164e7d 0%, #5086b6 100%);
    padding: 56px 0;
    text-align: center;
    color: #fff;
}

/* ── Billing period toggle ──────────────────────────────────────────────── */

/* Controls row: billing toggle + currency switcher stacked */
.dts-pricing-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
    margin-bottom: 8px;
}

/* Currency switcher pill */
.dts-pricing-currency-switch {
    display: inline-flex;
    background-color: var(--dts-bg-alt);
    border: 1px solid var(--dts-border);
    border-radius: var(--dts-radius-pill);
    padding: 3px;
    gap: 2px;
}

.dts-cur-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    border-radius: var(--dts-radius-pill);
    padding: 5px 12px;
    font-size: var(--dts-font-size-sm);
    font-weight: 500;
    font-family: var(--dts-font-family);
    color: var(--dts-text-secondary);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    line-height: 1;
}

.dts-cur-btn:hover {
    color: var(--dts-text);
}

.dts-cur-btn.active {
    background-color: var(--dts-bg);
    color: var(--dts-primary);
    box-shadow: var(--dts-shadow-sm);
}

.dts-cur-btn img {
    border-radius: 2px;
    flex-shrink: 0;
}

/* Price+tagline wrappers — same height so card header doesn't jump on toggle */
.dts-price-monthly,
.dts-price-annual {
    min-height: 72px;
}

.dts-billing-toggle {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    margin-bottom: 8px;
}

.dts-billing-label {
    font-size: var(--dts-font-size-sm);
    font-weight: 500;
    color: var(--dts-text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s ease;
    cursor: pointer;
}

.dts-billing-label--active {
    color: var(--dts-text);
}

.dts-billing-save-badge {
    display: inline-block;
    background-color: rgba(0, 166, 62, 0.12);
    color: var(--dts-success);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--dts-radius-pill);
    white-space: nowrap;
}

.dts-toggle-track {
    position: relative;
    width: 44px;
    height: 24px;
    border-radius: var(--dts-radius-pill);
    background-color: var(--dts-border);
    border: none;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.2s ease;
}

.dts-cur-btn:focus,
.dts-cur-btn:focus-visible {
    outline: none;
}

.dts-toggle-track:focus,
.dts-toggle-track:focus-visible {
    outline: none;
    box-shadow: none;
}

.dts-toggle-track.is-annual {
    background-color: var(--dts-primary);
}

.dts-toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    transition: transform 0.2s ease;
    pointer-events: none;
}

.dts-toggle-track.is-annual .dts-toggle-thumb {
    transform: translateX(20px);
}

.dts-cta-strip-title {
    font-size: var(--dts-font-size-2xl);
    font-weight: 700;
    color: #fff;
    margin: 0 0 12px;
}

.dts-cta-strip-text {
    font-size: var(--dts-font-size-lg);
    color: rgba(255,255,255,0.82);
    margin: 0 0 28px;
}

.dts-cta-strip .btn-light {
    background-color: #fff;
    color: var(--dts-primary);
    font-weight: 600;
    border: none;
    padding: 12px 28px;
    border-radius: var(--dts-radius);
}

.dts-cta-strip .btn-light:hover {
    background-color: var(--dts-bg-alt);
    color: var(--dts-primary-dark);
}

.dts-cta-strip .btn-outline-light {
    border-color: rgba(255,255,255,0.5);
    color: #fff;
    padding: 12px 28px;
    border-radius: var(--dts-radius);
}

.dts-cta-strip .btn-outline-light:hover {
    background-color: rgba(255,255,255,0.12);
    border-color: #fff;
}

/* Hero CTA buttons */
.dts-page-hero .btn-light {
    background-color: #fff;
    color: var(--dts-primary);
    font-weight: 600;
    border: none;
    padding: 12px 28px;
    border-radius: var(--dts-radius);
}

.dts-page-hero .btn-light:hover {
    background-color: var(--dts-bg-alt);
    color: var(--dts-primary-dark);
}

.dts-page-hero .btn-outline-light {
    border-color: rgba(255,255,255,0.55);
    color: #fff;
    padding: 12px 28px;
    border-radius: var(--dts-radius);
}

.dts-page-hero .btn-outline-light:hover {
    background-color: rgba(255,255,255,0.12);
    border-color: #fff;
}

@media (max-width: 767px) {
    .dts-page-hero { padding: 72px 0; }
    .dts-marketing-section { padding: 40px 0; }
    .dts-cta-strip { padding: 40px 0; }
    .dts-tld-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
}

/* ── Responsive table overrides ────────────────────────────────────────── */

@media (max-width: 767px) {
    .dataTables_wrapper .listtable {
        flex-direction: column;
        align-items: flex-start;
    }
    .dataTables_wrapper .dataTables_filter input,
    .dataTables_wrapper .dataTables_filter label .form-control {
        width: 100%;
    }
    .dataTables_wrapper .dataTables_info {
        margin-left: 0;
        padding: 6px 14px;
    }
    .dataTables_wrapper .dataTables_paginate {
        padding: 6px 14px;
    }
    .dataTables_wrapper .dataTables_length {
        padding: 6px 14px;
        width: 100%;
    }
    .dataTables_wrapper .dt-bottom-bar {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ── Modals ────────────────────────────────────────────────────────────── */

.modal-content {
    border: none;
    border-radius: var(--dts-radius-lg);
    box-shadow: var(--dts-shadow-lg);
}

.modal-header {
    border-bottom: 1px solid var(--dts-border);
    padding: 16px 20px;
}

.modal-title {
    font-size: 1.05rem;
    font-weight: 500;
}

.modal-footer {
    border-top: 1px solid var(--dts-border);
}

/* ── Pagination ────────────────────────────────────────────────────────── */

.page-link {
    color: var(--dts-primary);
    border-color: var(--dts-border);
}

.page-link:hover {
    color: var(--dts-primary-hover);
    background-color: var(--dts-bg-alt);
    border-color: var(--dts-primary);
}

.page-item.active .page-link {
    background-color: var(--dts-primary);
    border-color: var(--dts-primary);
}

/* ── Progress bars ─────────────────────────────────────────────────────── */

.progress {
    height: 8px;
    border-radius: var(--dts-radius-pill);
    background-color: var(--dts-border);
}

.progress-bar {
    background-color: var(--dts-primary);
    border-radius: var(--dts-radius-pill);
}

/* ── Contact form ─────────────────────────────────────────────────────── */

.dts-contact-form-wrap {
    background: #fff;
    border: 1px solid var(--dts-border, #dee2e6);
    border-radius: var(--dts-radius-lg, 12px);
    padding: 36px 40px;
}

.dts-contact-form-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--dts-text);
    margin-bottom: 6px;
}

.dts-contact-form-lead {
    font-size: 0.93rem;
    color: var(--dts-text-muted);
    margin-bottom: 28px;
}

.dts-contact-form .form-group label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--dts-text);
    margin-bottom: 5px;
}

.dts-contact-form .form-control {
    border-color: var(--dts-border, #dee2e6);
    border-radius: var(--dts-radius, 6px);
    font-size: 0.93rem;
    padding: 10px 14px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.dts-contact-form .form-control:focus {
    border-color: var(--dts-primary);
    box-shadow: 0 0 0 3px rgba(22, 78, 125, 0.12);
}

.dts-contact-success {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    border-radius: var(--dts-radius, 6px);
    color: #155724;
    padding: 18px 22px;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 12px;
}

.dts-contact-success .fa-check-circle {
    font-size: 1.4rem;
    flex-shrink: 0;
    color: #28a745;
}

.dts-contact-error {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: var(--dts-radius, 6px);
    color: #721c24;
    padding: 14px 18px;
    font-size: 0.9rem;
    margin-bottom: 20px;
}

@media (max-width: 575px) {
    .dts-contact-form-wrap {
        padding: 24px 20px;
    }
}

/* ── Email page stat blocks ────────────────────────────────────────────── */

.dts-email-stat-block {
    padding: 24px 16px;
}

.dts-email-stat {
    font-size: 3rem;
    font-weight: 800;
    color: var(--dts-primary);
    line-height: 1;
    letter-spacing: -0.02em;
}

.dts-email-stat-label {
    margin-top: 6px;
    font-size: var(--dts-font-size-sm);
    font-weight: 600;
    color: var(--dts-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ── Email pricing features list ──────────────────────────────────────── */

.dts-pricing-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dts-pricing-features li .fa-check {
    display: none;
}

.dts-pricing-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 0;
    font-size: 0.93rem;
    color: var(--dts-text);
    border-bottom: 1px solid var(--dts-border-light, rgba(0,0,0,0.06));
    padding-left: 22px;
    position: relative;
}

.dts-pricing-features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%2328a745' d='M10.3 2.3L4.5 8.1 1.7 5.3 0.3 6.7l4.2 4.2 7.2-7.2z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.dts-pricing-features li:last-child {
    border-bottom: none;
}

.dts-pricing-features li .fa-check {
    color: var(--dts-success, #28a745);
    flex-shrink: 0;
    margin-top: 3px;
}

.dts-pricing-card.featured .dts-pricing-features li .fa-check {
    color: var(--dts-primary);
}

.dts-pricing-card.featured .dts-pricing-features li {
    color: var(--dts-text);
    border-bottom-color: rgba(0,0,0,0.06);
}

/* ── FAQ accordion ────────────────────────────────────────────────────── */

.dts-faq-section-bg {
    background: linear-gradient(135deg, var(--dts-primary-dark, #0d2a4a) 0%, var(--dts-primary, #1a4a7a) 60%, #1e6fa8 100%);
}

.dts-faq {
    border: none;
    border-radius: var(--dts-radius);
    overflow: hidden;
}

.dts-faq-item + .dts-faq-item {
    border-top: 1px solid var(--dts-border, #dee2e6);
}

.dts-faq-q {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: #fff;
    border: none;
    outline: none;
    padding: 20px 28px;
    font-size: 0.97rem;
    font-weight: 600;
    color: var(--dts-text);
    text-align: left;
    cursor: pointer;
    transition: background 0.15s;
}

.dts-faq-q:focus,
.dts-faq-q:focus-visible {
    outline: none;
    box-shadow: none;
}

.dts-faq-q:hover {
    background: var(--dts-bg-alt, #f8f9fa);
}

.dts-faq-q::after {
    content: '+';
    font-size: 1.4rem;
    font-weight: 300;
    color: var(--dts-primary);
    flex-shrink: 0;
    margin-left: 12px;
    transition: transform 0.2s;
}

.dts-faq-q[aria-expanded="true"]::after {
    content: '−';
}

.dts-faq-a {
    display: none;
    padding: 14px 28px 20px;
    font-size: 0.93rem;
    color: var(--dts-text-muted);
    line-height: 1.65;
    background: #fff;
}

.dts-faq-a a {
    color: var(--dts-accent);
}

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 575px) {
    .tile .stat { font-size: 1.5rem; }
    #main-body  { padding: 28px 0 32px !important; }
}

/* ── Server status view-filter dot colours ─────────────────────────────── */
.dts-status-open      { color: var(--dts-danger) !important; }
.dts-status-scheduled { color: var(--dts-warning) !important; }
.dts-status-resolved  { color: var(--dts-success) !important; }
.dts-status-rss       { color: var(--dts-text-secondary) !important; }

/* Server status page: badge variants */
badge.dts-status-open,
span.badge.dts-status-open {
    background-color: var(--dts-danger);
    color: #fff;
}

span.badge.dts-status-scheduled {
    background-color: var(--dts-warning);
    color: #fff;
}

span.badge.dts-status-resolved {
    background-color: var(--dts-success);
    color: #fff;
}

span.badge.dts-status-rss {
    background-color: var(--dts-text-muted);
    color: #fff;
}

/* Server status table */
.dts-status-table thead th {
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--dts-text-secondary);
    border-bottom: 2px solid var(--dts-border);
    padding: 9px 14px;
}

.dts-status-table tbody td {
    padding: 9px 14px;
    border-bottom: 1px solid var(--dts-border);
    font-size: var(--dts-font-size-sm);
    vertical-align: middle;
}

.dts-status-issue {
    padding-bottom: 16px;
}

.view-filter-btns a[menuitemname="Open"]      .dts-sidebar-nav-icon-wrap::after { background-color: var(--dts-danger); }
.view-filter-btns a[menuitemname="Answered"]      .dts-sidebar-nav-icon-wrap::after { background-color: var(--dts-success); }
.view-filter-btns a[menuitemname="Customer-Reply"] .dts-sidebar-nav-icon-wrap::after { background-color: var(--dts-warning); }
.view-filter-btns a[menuitemname="Customer-Reply"] .dts-sidebar-nav-label > span { font-size: 0; }
.view-filter-btns a[menuitemname="Customer-Reply"] .dts-sidebar-nav-label > span::before { content: "Waiting for Customer"; font-size: var(--dts-font-size-sm); }
.view-filter-btns a[menuitemname="Closed"]        .dts-sidebar-nav-icon-wrap::after { background-color: var(--dts-text-muted); }
.view-filter-btns a[menuitemname="Scheduled"] .dts-sidebar-nav-icon-wrap::after { background-color: var(--dts-warning); }
.view-filter-btns a[menuitemname="Resolved"]  .dts-sidebar-nav-icon-wrap::after { background-color: var(--dts-success); }
.view-filter-btns a[menuitemname="View RSS Feed"] .dts-sidebar-nav-icon-wrap::after {
    background-color: var(--dts-text-muted);
}
.view-filter-btns a[menuitemname="View RSS Feed"] .dts-sidebar-nav-icon { display: none !important; }
.view-filter-btns a[menuitemname="View RSS Feed"] i.dts-rss-right {
    display: block !important;
    margin-left: auto;
    color: var(--dts-text-secondary);
    font-size: 11px;
}

/* ── Homepage ───────────────────────────────────────────────────────────── */

/* Hero — taller and with a vertical gradient for depth */
.dts-home-hero {
    background: linear-gradient(150deg, #0f3a60 0%, #1e5a8e 45%, #5086b6 100%);
    padding: 96px 0 80px;
    text-align: center;
    color: var(--dts-text-inverted);
}

.dts-home-search {
    margin-top: 36px;
    margin-bottom: 0;
}

.dts-home-hero-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

/* Trust bar — thin strip below the hero */
.dts-home-trust-bar {
    background: #fff;
    border-bottom: 1px solid var(--dts-border);
    padding: 18px 0;
}

.dts-home-trust-items {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
}

.dts-home-trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--dts-font-size-sm);
    font-weight: 500;
    color: var(--dts-text-secondary);
    padding: 6px 20px;
}

.dts-home-trust-item i {
    color: var(--dts-primary);
    font-size: 14px;
    flex-shrink: 0;
}

.dts-home-trust-divider {
    width: 1px;
    height: 20px;
    background: var(--dts-border);
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .dts-home-trust-item {
        padding: 6px 14px;
    }
    .dts-home-trust-divider {
        display: none;
    }
}

/* Service cards — richer than feature cards, used on the homepage services overview */
.dts-service-card {
    background: var(--dts-bg);
    border: 1px solid var(--dts-border);
    border-radius: var(--dts-radius-lg);
    padding: 36px 28px 28px;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
    position: relative;
}

.dts-service-card:hover {
    box-shadow: var(--dts-shadow-md);
    transform: translateY(-3px);
}

.dts-service-card--featured {
    border-color: var(--dts-primary);
    border-width: 2px;
    box-shadow: 0 4px 24px rgba(30, 90, 142, 0.12);
}

.dts-service-card-badge {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--dts-primary);
    color: #fff;
    font-size: var(--dts-font-size-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 14px;
    border-radius: var(--dts-radius-pill);
    white-space: nowrap;
}

.dts-service-card-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--dts-radius-md);
    background: var(--dts-blue-50);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 24px;
    color: var(--dts-primary);
    flex-shrink: 0;
}

.dts-service-card--featured .dts-service-card-icon {
    background: var(--dts-primary);
    color: #fff;
}

.dts-service-card-title {
    font-size: var(--dts-font-size-lg);
    font-weight: 600;
    color: var(--dts-text);
    margin-bottom: 12px;
}

.dts-service-card-text {
    font-size: var(--dts-font-size-sm);
    color: var(--dts-text-secondary);
    line-height: 1.65;
    margin-bottom: 20px;
}

.dts-service-card-list {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    flex: 1;
}

.dts-service-card-list li {
    font-size: var(--dts-font-size-sm);
    color: var(--dts-text-secondary);
    padding: 5px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dts-service-card-list li i {
    color: var(--dts-success);
    font-size: 12px;
    flex-shrink: 0;
}

.dts-service-card-cta {
    width: 100%;
    margin-top: auto;
}

/* Stats bar */
.dts-home-stats-bar {
    background: linear-gradient(135deg, var(--dts-primary-dark, #0d2a4a) 0%, var(--dts-primary, #1a4a7a) 60%, #1e6fa8 100%);
    padding: 56px 0;
    color: #fff;
}

.dts-home-stat-value {
    font-size: clamp(2.2rem, 5vw, 3rem);
    font-weight: 700;
    color: #fff;
    line-height: 1;
    margin-bottom: 8px;
}

.dts-home-stat-label {
    font-size: var(--dts-font-size-sm);
    color: rgba(255,255,255,0.7);
    font-weight: 400;
    line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DTS CART / ORDER FORM — comprehensive redesign
   Applies to: #order-standard_cart, all custom_cart order form templates
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Cart page wrapper ──────────────────────────────────────────────────── */

#order-standard_cart {
    font-family: var(--dts-font-family);
    color: var(--dts-text);
}

/* ── Cart layout: sidebar (categories) + main body ─────────────────────── */

#order-standard_cart .row {
    margin-left: 0;
    margin-right: 0;
}

.cart-sidebar {
    flex: 0 0 290px;
    max-width: 290px;
    padding-left: 0;
    padding-right: 20px;
    align-self: flex-start;
}

@media (min-width: 1200px) {
    .cart-sidebar {
        position: sticky;
        top: 1px;
    }
}

.cart-body {
    flex: 1 1 0%;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
}

/* Match product card grid width to full cart-body/alert width */
.dts-store-products > .row {
    margin-left: -8px;
    margin-right: -8px;
}

.dts-store-products > .row > [class*="col-"] {
    padding-left: 8px;
    padding-right: 8px;
}

@media (max-width: 767px) {
    .cart-sidebar {
        flex: 0 0 100%;
        max-width: 100%;
        padding-right: 0;
        margin-bottom: 20px;
    }
    .cart-body {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ── Cart section heading ───────────────────────────────────────────────── */

.header-lined {
    border-bottom: 2px solid var(--dts-border);
    margin-bottom: 24px;
    padding-bottom: 14px;
}

.header-lined h1,
.header-lined .font-size-36 {
    font-size: 1.65rem !important;
    font-weight: 600;
    color: var(--dts-text);
    margin: 0;
}

/* ── Mobile collapsed cart sidebar ─────────────────────────────────────── */

.dts-cart-collapsed-sidebar {
    margin-bottom: 20px;
}

.dts-cart-collapsed-sidebar .dts-sidebar-card {
    border: 1px solid var(--dts-border);
    border-radius: var(--dts-radius);
    overflow: hidden;
}

.dts-cart-collapsed-sidebar .dts-sidebar-card-header {
    padding: 10px 16px;
}

.dts-cart-collapsed-sidebar .dts-sidebar-card-body {
    padding: 12px 16px;
}

@media (min-width: 992px) {
    .dts-cart-collapsed-sidebar {
        display: none !important;
    }
}

/* ── Sub-headings inside checkout sections ──────────────────────────────── */

.sub-heading {
    margin: 28px 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--dts-border);
}

.sub-heading .primary-bg-color {
    font-size: var(--dts-font-size-sm);
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--dts-text-secondary);
}

/* ── Categories sidebar ─────────────────────────────────────────────────── */

.sidebar-categories {
    background: var(--dts-bg);
    border: 1px solid var(--dts-border);
    border-radius: var(--dts-radius);
    box-shadow: var(--dts-shadow-sm);
    overflow: hidden;
}

.sidebar-categories-header {
    background: var(--dts-bg-alt);
    border-bottom: 1px solid var(--dts-border);
    padding: 12px 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--dts-text-secondary);
}

.sidebar-categories ul {
    list-style: none;
    margin: 0;
    padding: 6px 0;
}

.sidebar-categories ul li a {
    display: block;
    padding: 9px 16px;
    color: var(--dts-text);
    font-size: var(--dts-font-size-sm);
    font-weight: 400;
    text-decoration: none;
    transition: var(--dts-transition-fast);
    border-left: 3px solid transparent;
}

.sidebar-categories ul li a:hover,
.sidebar-categories ul li.active a {
    color: var(--dts-primary);
    background: var(--dts-bg-alt);
    border-left-color: var(--dts-primary);
    text-decoration: none;
}

/* ── View cart: item list ───────────────────────────────────────────────── */

.view-cart-items-header {
    background: var(--dts-bg-alt);
    border: 1px solid var(--dts-border);
    border-bottom: none;
    border-radius: var(--dts-radius) var(--dts-radius) 0 0;
    padding: 10px 20px;
    font-size: var(--dts-font-size-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dts-text-secondary);
}

.view-cart-items {
    border: 1px solid var(--dts-border);
    border-radius: 0 0 var(--dts-radius) var(--dts-radius);
    background: var(--dts-bg);
    overflow: hidden;
}

.view-cart-items .item {
    padding: 16px 20px;
    border-bottom: 1px solid var(--dts-border);
    transition: background 0.15s ease;
}

.view-cart-items .item:last-child {
    border-bottom: none;
}

.view-cart-items .item:hover {
    background: #fafbfc;
}

.item-title {
    display: block;
    font-weight: 600;
    color: var(--dts-text);
    font-size: var(--dts-font-size-base);
    margin-bottom: 2px;
}

.item-group {
    display: block;
    font-size: var(--dts-font-size-xs);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--dts-accent);
    margin-bottom: 2px;
}

.item-domain {
    display: block;
    font-size: var(--dts-font-size-sm);
    color: var(--dts-text-secondary);
    font-style: italic;
}

.item-price {
    text-align: right;
    font-weight: 600;
    color: var(--dts-text);
    font-size: var(--dts-font-size-base);
}

.item-price .cycle {
    display: block;
    font-size: var(--dts-font-size-xs);
    font-weight: 400;
    color: var(--dts-text-secondary);
    text-transform: none;
    letter-spacing: 0.04em;
}

.item-qty {
    text-align: center;
}

.item-qty .form-control {
    max-width: 70px;
    margin: 0 auto 6px;
    text-align: center;
}

/* Edit / remove inline links */
.btn-remove-from-cart,
.btn-remove-from-cart:hover {
    color: var(--dts-danger) !important;
    font-size: var(--dts-font-size-xs);
    padding: 2px 6px;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

.btn-remove-from-cart:hover {
    opacity: 1;
    text-decoration: none;
}

.view-cart-items .btn-link {
    color: var(--dts-accent) !important;
    font-size: var(--dts-font-size-xs);
    padding: 2px 4px;
    text-decoration: none;
}

.view-cart-items .btn-link:hover {
    color: var(--dts-primary) !important;
}

/* Empty cart state */
.view-cart-empty {
    padding: 52px 24px;
    text-align: center;
    color: var(--dts-text-secondary);
    font-size: var(--dts-font-size-base);
    background: linear-gradient(180deg, #fbfdff 0%, #f7fafc 100%);
    border: 1px dashed #cfd8e3;
    border-radius: var(--dts-radius);
    margin: 6px;
}

.view-cart-empty p {
    color: var(--dts-text-secondary);
}

.view-cart-empty .btn {
    min-width: 170px;
    border-radius: var(--dts-radius);
    font-weight: 600;
    padding: 10px 16px;
    box-shadow: none !important;
}

/* Empty cart button */
.empty-cart {
    margin-top: 12px;
    text-align: left;
}

.empty-cart .btn-link {
    color: var(--dts-text-muted) !important;
    font-size: var(--dts-font-size-sm);
}

.empty-cart .btn-link:hover {
    color: var(--dts-danger) !important;
}

/* Empty-cart action should be subtle text-link style */
#order-standard_cart .empty-cart #btnEmptyCart {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent !important;
    color: var(--dts-text-muted) !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

#order-standard_cart .empty-cart #btnEmptyCart:hover,
#order-standard_cart .empty-cart #btnEmptyCart:focus {
    background: transparent !important;
    color: var(--dts-danger) !important;
    text-decoration: underline !important;
}

#order-standard_cart .empty-cart #btnEmptyCart i {
    opacity: 0.8;
}

/* ── View cart: split layout (items left, order summary right) ──────────── */

.secondary-cart-body {
    flex: 1 1 0%;
    min-width: 0;
    padding-right: 24px;
}

.secondary-cart-sidebar {
    flex: 0 0 300px;
    max-width: 300px;
    padding-left: 0;
}

@media (max-width: 991px) {
    .secondary-cart-body {
        flex: 0 0 100%;
        max-width: 100%;
        padding-right: 0;
        margin-bottom: 24px;
    }
    .secondary-cart-sidebar {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ── Renewal items (services + domains) ─────────────────────────────────── */

.dts-renewal-item {
    background: var(--dts-bg);
    border: 1px solid var(--dts-border);
    border-radius: var(--dts-radius);
    box-shadow: var(--dts-shadow-sm);
    padding: 16px 20px;
    margin-bottom: 12px;
}

.dts-renewal-item-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.dts-renewal-item-info {
    flex: 1;
    min-width: 0;
}

.dts-renewal-item-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--dts-text);
    margin: 0 0 2px;
}

.dts-renewal-item-domain {
    font-size: var(--dts-font-size-sm);
    color: var(--dts-text-secondary);
    margin: 0 0 4px;
}

.dts-renewal-item-meta {
    font-size: var(--dts-font-size-sm);
    color: var(--dts-text-muted);
    margin: 0;
}

.dts-renewal-item-status {
    flex-shrink: 0;
}

.dts-renewal-badge {
    font-size: 11px !important;
    padding: 4px 10px !important;
    border-radius: var(--dts-radius-sm) !important;
    font-weight: 500 !important;
}

span.badge.dts-status-open.dts-renewal-badge   { background-color: var(--dts-danger); color: #fff; }
span.badge.dts-status-scheduled.dts-renewal-badge { background-color: var(--dts-warning); color: #fff; }
span.badge.dts-status-resolved.dts-renewal-badge  { background-color: var(--dts-success); color: #fff; }
span.badge.dts-status-rss.dts-renewal-badge       { background-color: var(--dts-bg-alt); color: var(--dts-text-secondary); border: 1px solid var(--dts-border); }

.dts-renewal-item-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.dts-renewal-period {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    flex: 1;
}

.dts-renewal-period-label {
    font-size: var(--dts-font-size-sm);
    white-space: nowrap;
}

.dts-renewal-select {
    max-width: 260px;
    font-size: var(--dts-font-size-sm) !important;
}

.dts-renewal-ineligible {
    font-size: var(--dts-font-size-sm);
    margin: 0;
}

.dts-renewal-addons {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--dts-border);
}

.dts-renewal-addons-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--dts-text-secondary);
    margin-bottom: 8px;
}

.dts-renewal-addons .dts-renewal-item {
    margin-left: 16px;
    background: var(--dts-bg-alt);
    box-shadow: none;
}

/* ── Order Summary card ─────────────────────────────────────────────────── */

.order-summary {
    background: var(--dts-bg);
    border: 1px solid var(--dts-border);
    border-radius: var(--dts-radius-lg);
    box-shadow: none;
    overflow: hidden;
    position: sticky;
    top: 90px;
}

.order-summary h2,
.order-summary .font-size-30 {
    font-size: 1.2rem !important;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--dts-text);
    padding: 14px 18px;
    margin: 0;
    background: var(--dts-bg);
    border-bottom: 1px solid var(--dts-border);
}

.summary-container {
    padding: 18px;
}

.dts-summary-placeholder {
    font-size: var(--dts-font-size-sm);
    color: var(--dts-text-muted);
    text-align: center;
    padding: 12px 0 6px;
}

.summary-container .subtotal,
.summary-container .clearfix {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 5px 0;
    font-size: var(--dts-font-size-sm);
    color: var(--dts-text);
}

.summary-container .bordered-totals {
    border-top: 1px solid var(--dts-border);
    border-bottom: 1px solid var(--dts-border);
    padding: 8px 0;
    margin: 8px 0;
}

.summary-container .bordered-totals .clearfix {
    color: var(--dts-text-secondary);
    font-size: var(--dts-font-size-sm);
}

.summary-container .recurring-totals {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 8px 0;
    font-size: var(--dts-font-size-sm);
    color: var(--dts-text-secondary);
    border-top: 1px solid var(--dts-border);
    margin-top: 4px;
}

.recurring-charges {
    text-align: right;
    font-size: var(--dts-font-size-sm);
    color: var(--dts-text-secondary);
    font-style: normal;
}

.recurring-charges * {
    font-style: normal !important;
}

.recurring-charges .cost {
    font-weight: 600;
    color: var(--dts-text-secondary);
}

.total-due-today {
    background: linear-gradient(135deg, var(--dts-primary-dark) 0%, var(--dts-primary) 100%);
    border-radius: var(--dts-radius);
    padding: 16px;
    margin-top: 16px;
    text-align: center;
    color: #fff;
}

.total-due-today .amt {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
    margin-bottom: 4px;
}

.total-due-today > span:last-child {
    font-size: var(--dts-font-size-xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.8);
}

/* Enforce readable text on blue total panel, regardless of injected markup */
.total-due-today,
.total-due-today * {
    color: #fff !important;
}

/* Total-due also used inside summary-container at top of configureproduct */
.summary-container .total-due-today {
    margin-top: 12px;
    margin-bottom: 0;
}

/* Loader overlay for order summary AJAX */
.order-summary .loader {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255,255,255,0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--dts-primary);
    border-radius: var(--dts-radius-lg);
    z-index: 5;
}

.order-summary .loader.w-hidden {
    display: none !important;
}

/* Express checkout buttons */
.express-checkout-buttons {
    margin-top: 12px;
}

.express-checkout-buttons .separator {
    text-align: center;
    font-size: var(--dts-font-size-xs);
    color: var(--dts-text-muted);
    margin: 8px 0;
    letter-spacing: 0.05em;
}

/* Checkout + continue shopping buttons in summary */
.btn-checkout,
.btn-checkout.btn-success {
    display: block;
    width: 100%;
    margin-top: 16px;
    background: var(--dts-success) !important;
    border-color: var(--dts-success) !important;
    border-radius: var(--dts-radius) !important;
    font-size: var(--dts-font-size-base) !important;
    font-weight: 600 !important;
    padding: 12px 16px !important;
    letter-spacing: 0.01em;
    transition: var(--dts-transition-fast);
}

.btn-checkout:hover,
.btn-checkout.btn-success:hover {
    background: var(--dts-success) !important;
    border-color: var(--dts-success) !important;
    box-shadow: 0 4px 14px rgba(0,163,62,0.3) !important;
    transform: translateY(-1px);
}

.btn-checkout.disabled,
.btn-checkout:disabled {
    opacity: 0.55;
    pointer-events: none;
}

.btn-continue-shopping {
    display: block;
    text-align: center;
    color: var(--dts-text-muted) !important;
    font-size: var(--dts-font-size-sm);
    margin-top: 8px;
    text-decoration: none;
}

.btn-continue-shopping:hover {
    color: var(--dts-primary) !important;
}

/* Clean order summary variant for view cart */
#order-standard_cart .order-summary.dts-order-summary-clean {
    border: 1px solid var(--dts-border);
    border-radius: var(--dts-radius);
    background-color: #ffffff;
    box-shadow: var(--dts-shadow-sm);
    overflow: hidden;
}

#order-standard_cart .order-summary.dts-order-summary-clean h2,
#order-standard_cart .order-summary.dts-order-summary-clean .font-size-30 {
    font-size: 1rem !important;
    font-weight: 600;
    color: var(--dts-text-secondary) !important;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--dts-border);
    background: #f7f9fb;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

#order-standard_cart .order-summary.dts-order-summary-clean .dts-order-summary-title .dts-sidebar-card-title {
    font-size: 11px !important;
    line-height: 1.2 !important;
    color: var(--dts-text-secondary);
}

#order-standard_cart .order-summary.dts-order-summary-clean .summary-container {
    padding: 16px 26px 24px;
}

#order-standard_cart #frmConfigureProduct .order-summary.dts-order-summary-clean .dts-configure-continue-wrap {
    padding: 0 26px 24px;
    margin-top: 0;
    background: #ffffff;
    border-top: 0;
    padding-top: 14px;
    border-bottom-left-radius: var(--dts-radius);
    border-bottom-right-radius: var(--dts-radius);
}

#order-standard_cart #frmConfigureProduct .order-summary.dts-order-summary-clean #btnCompleteProductConfig {
    margin-top: 0;
}

#order-standard_cart #frmConfigureProduct .order-summary.dts-order-summary-clean .summary-container {
    padding-bottom: 0;
    background: #ffffff;
}

/* Configure product: flatten injected summary internals to match cart summary */
#order-standard_cart #frmConfigureProduct #producttotal .dts-order-summary-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

#order-standard_cart #frmConfigureProduct #producttotal .summary-totals {
    margin-top: 10px !important;
    padding: 10px 0 !important;
    border-top: 1px solid #e2e9f3 !important;
    border-bottom: 1px solid #e2e9f3 !important;
}

#order-standard_cart #frmConfigureProduct #producttotal .dts-order-summary-row {
    padding: 5px 0;
    font-size: var(--dts-font-size-sm);
    color: var(--dts-text);
}

#order-standard_cart #frmConfigureProduct #producttotal .dts-order-summary-row > span:last-child {
    text-align: right;
}

#order-standard_cart #frmConfigureProduct #producttotal .total-due-today {
    box-shadow: none !important;
}

#order-standard_cart .order-summary.dts-order-summary-clean .subtotal,
#order-standard_cart .order-summary.dts-order-summary-clean .recurring-totals,
#order-standard_cart .order-summary.dts-order-summary-clean .bordered-totals {
    border-color: #e2e9f3;
}

#order-standard_cart .order-summary.dts-order-summary-clean .subtotal > span {
    font-size: 1.03rem;
    color: var(--dts-text);
}

#order-standard_cart .order-summary.dts-order-summary-clean .subtotal > span:first-child {
    font-weight: 500;
}

#order-standard_cart .order-summary.dts-order-summary-clean .subtotal > span:last-child {
    font-weight: 500;
    text-align: right;
}

#order-standard_cart .order-summary.dts-order-summary-clean .bordered-totals {
    border-top: 1px solid #e2e9f3;
    border-bottom: 1px solid #e2e9f3;
}

#order-standard_cart .order-summary.dts-order-summary-clean .bordered-totals .clearfix {
    align-items: center;
}

#order-standard_cart .order-summary.dts-order-summary-clean .bordered-totals .clearfix > span:last-child {
    margin-left: auto;
    text-align: right;
    min-width: 110px;
    font-weight: 500;
}

#order-standard_cart .order-summary.dts-order-summary-clean .recurring-totals {
    border-top: none;
    margin-top: 0;
    padding-top: 10px;
}

#order-standard_cart .order-summary.dts-order-summary-clean .total-due-today {
    background: var(--dts-primary);
    box-shadow: 0 10px 24px rgba(16, 72, 146, 0.24);
}

#order-standard_cart .order-summary.dts-order-summary-clean .btn-checkout {
    margin-top: 14px;
    background: transparent !important;
    color: var(--dts-primary) !important;
    border: 1px solid var(--dts-primary) !important;
    box-shadow: none !important;
}

#order-standard_cart .order-summary.dts-order-summary-clean .btn-checkout:hover {
    background: transparent !important;
    border-color: var(--dts-primary) !important;
    color: var(--dts-primary) !important;
    box-shadow: none !important;
}

#order-standard_cart .order-summary.dts-order-summary-clean .btn-checkout.dts-checkout-disabled {
    background: transparent !important;
    color: var(--dts-primary) !important;
    border-color: var(--dts-primary) !important;
    box-shadow: none !important;
    transform: none !important;
    cursor: not-allowed;
}

#order-standard_cart .order-summary.dts-order-summary-clean .btn-checkout.dts-checkout-disabled i {
    color: var(--dts-primary) !important;
}

#order-standard_cart .order-summary.dts-order-summary-clean.dts-tos-agreed .btn-checkout:not(.dts-checkout-disabled) {
    background: var(--dts-primary) !important;
    color: #fff !important;
    border-color: var(--dts-primary) !important;
    box-shadow: 0 8px 20px rgba(19, 97, 184, 0.26) !important;
}

#order-standard_cart .order-summary.dts-order-summary-clean.dts-tos-agreed .btn-checkout:not(.dts-checkout-disabled) i {
    color: #fff !important;
}

#order-standard_cart .order-summary.dts-order-summary-clean.dts-tos-agreed .btn-checkout:not(.dts-checkout-disabled):hover {
    background: var(--dts-primary-hover) !important;
    border-color: var(--dts-primary-hover) !important;
    box-shadow: 0 10px 24px rgba(19, 97, 184, 0.32) !important;
}

#order-standard_cart .order-summary.dts-order-summary-clean .dts-summary-tos {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;
    margin-top: 14px;
    margin-bottom: 4px;
    font-size: 0.96rem;
    color: var(--dts-text-secondary);
    line-height: 1.45;
    cursor: pointer;
}

#order-standard_cart .order-summary.dts-order-summary-clean .dts-summary-tos-checkbox {
    grid-column: 1;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    margin: 0 !important;
    flex: 0 0 auto;
    display: block !important;
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    opacity: 1 !important;
    clip: auto !important;
    pointer-events: auto !important;
    cursor: pointer;
    padding: 0 !important;
    border: 1px solid #8f98a8 !important;
    background: #fff !important;
    box-sizing: border-box !important;
    accent-color: #1e63c9;
    -webkit-appearance: auto;
    appearance: auto;
}

#order-standard_cart .order-summary.dts-order-summary-clean .dts-summary-tos .icheckbox_square-blue {
    grid-column: 1;
    margin: -1px 0 0 0 !important;
    flex: 0 0 auto;
    position: static !important;
    float: none !important;
    display: block !important;
    overflow: visible !important;
}

#order-standard_cart .order-summary.dts-order-summary-clean .dts-summary-tos > span {
    grid-column: 2;
    display: block;
    padding-top: 0;
    padding-left: 2px;
    line-height: 1.5;
}

#order-standard_cart .order-summary.dts-order-summary-clean .dts-summary-tos a {
    color: #1e63c9;
    text-decoration: underline;
}

#order-standard_cart .order-summary.dts-order-summary-clean .dts-checkout-tooltip {
    display: flex;
    align-items: center;
    gap: 8px;
    position: fixed;
    left: 50%;
    top: 0;
    z-index: 2000;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid #111;
    background: #111;
    color: #fff;
    font-size: 0.85rem;
    white-space: nowrap;
    line-height: 1.3;
    box-shadow: 0 10px 26px rgba(15, 39, 71, 0.22);
    transform: translate(-50%, -100%) translateY(6px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

#order-standard_cart .order-summary.dts-order-summary-clean .dts-checkout-tooltip i {
    color: #fff;
}

#order-standard_cart .order-summary.dts-order-summary-clean .dts-checkout-tooltip.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -100%) translateY(0);
}

#order-standard_cart .order-summary.dts-order-summary-clean.dts-tos-agreed .total-due-today {
    background: transparent !important;
    border: 1px solid var(--dts-primary) !important;
    box-shadow: none !important;
}

#order-standard_cart .order-summary.dts-order-summary-clean.dts-tos-agreed .total-due-today,
#order-standard_cart .order-summary.dts-order-summary-clean.dts-tos-agreed .total-due-today * {
    color: var(--dts-primary) !important;
}

/* ── Promo / tax tabs below the items list ──────────────────────────────── */

.view-cart-tabs {
    margin-top: 18px;
}

.view-cart-tabs .nav-tabs {
    border-bottom: none;
    display: inline-flex;
    gap: 8px;
    background: transparent;
    margin-bottom: 0;
}

.view-cart-tabs .nav-tabs .nav-link {
    font-size: 13px;
    color: var(--dts-text-secondary);
    border: 1px solid var(--dts-border);
    padding: 8px 14px;
    border-radius: var(--dts-radius) var(--dts-radius) 0 0;
    border-bottom: none;
    background: #eef2f6;
    transition: var(--dts-transition-fast);
}

.view-cart-tabs .nav-tabs .nav-link:hover {
    color: var(--dts-text);
    border-color: var(--dts-border);
    background: #e6ebf2;
}

.view-cart-tabs .nav-tabs .nav-link.active {
    color: var(--dts-text);
    border-color: var(--dts-border);
    border-bottom: none;
    background: #fff;
    font-weight: 600;
}

/* Robust active-state matching for Bootstrap variants (link-active, li-active, aria) */
.view-cart-tabs .nav-tabs .nav-item.active .nav-link,
.view-cart-tabs .nav-tabs .nav-link[aria-selected="true"] {
    color: var(--dts-text);
    border-color: var(--dts-border);
    border-bottom: none;
    background: #fff;
    font-weight: 600;
}

#order-standard_cart .view-cart-tabs .nav-tabs .nav-link.active,
#order-standard_cart .view-cart-tabs .nav-tabs .nav-link[aria-selected="true"],
#order-standard_cart .view-cart-tabs .nav-tabs .nav-item.active .nav-link {
    color: var(--dts-text) !important;
    border-color: var(--dts-border) !important;
    background: #fff !important;
}

.view-cart-tabs .tab-content {
    background: #fff;
    border: 1px solid var(--dts-border);
    border-radius: var(--dts-radius);
    padding: 16px;
    margin-top: 0;
    box-shadow: none;
    border-top: none;
    border-top-left-radius: 0;
}

.view-cart-tabs .promo .form-control,
.view-cart-tabs #calcTaxes .form-control {
    border-radius: var(--dts-radius-sm);
    border-color: var(--dts-border-input);
    min-height: 44px;
}

.view-cart-tabs .promo .btn-outline-primary {
    border-radius: var(--dts-radius-sm);
    font-weight: 600;
    min-height: 44px;
    background: var(--dts-primary);
    border-color: var(--dts-primary);
    color: #fff;
}

.view-cart-tabs .promo .btn-outline-primary:hover,
.view-cart-tabs .promo .btn-outline-primary:focus {
    background: var(--dts-primary-hover);
    border-color: var(--dts-primary-hover);
    color: #fff;
}

.view-cart-tabs #calcTaxes .form-group {
    margin-bottom: 12px;
}

/* Estimate Taxes: cleaner stacked layout */
#order-standard_cart #calcTaxes .form-group.row {
    display: block;
    margin: 0 0 12px;
}

#order-standard_cart #calcTaxes .form-group.row > .col-sm-4,
#order-standard_cart #calcTaxes .form-group.row > .col-sm-7 {
    max-width: 100%;
    flex: 0 0 100%;
    padding-left: 0;
    padding-right: 0;
}

#order-standard_cart #calcTaxes label.col-form-label {
    display: block;
    text-align: left !important;
    font-size: 12px;
    font-weight: 600;
    color: var(--dts-text-secondary);
    margin: 0 0 6px;
    padding: 0;
}

#order-standard_cart #calcTaxes .form-control {
    max-width: 100%;
    background: #fff;
}

#order-standard_cart #calcTaxes .form-group.text-center {
    text-align: left !important;
    margin-top: 4px;
}

#order-standard_cart #calcTaxes .btn-outline-primary {
    width: 100%;
    min-height: 44px;
    padding: 10px 16px;
    border-radius: var(--dts-radius-sm);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.3;
    background: var(--dts-primary);
    border-color: var(--dts-primary);
    color: #fff;
}

#order-standard_cart #calcTaxes .btn-outline-primary:hover,
#order-standard_cart #calcTaxes .btn-outline-primary:focus {
    background: var(--dts-primary-hover);
    border-color: var(--dts-primary-hover);
    color: #fff;
}

/* Remove awkward floating icon in promo input for cleaner layout */
.view-cart-tabs .prepend-icon .field-icon {
    display: none !important;
}

.view-cart-tabs .prepend-icon .field.form-control {
    padding-left: 14px !important;
}

.view-cart-promotion-code {
    padding: 10px 14px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: var(--dts-radius-sm);
    color: var(--dts-success);
    font-weight: 600;
    margin-bottom: 10px;
    font-size: var(--dts-font-size-sm);
}

/* ── View-cart parity with configure-product look ────────────────────────── */
#order-standard_cart .view-cart-items-header {
    background: var(--dts-bg-alt) !important;
    border: 1px solid var(--dts-border) !important;
    border-bottom: none !important;
    border-radius: var(--dts-radius-lg) var(--dts-radius-lg) 0 0 !important;
    color: var(--dts-text-secondary) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    padding: 12px 20px !important;
}

#order-standard_cart .view-cart-items-header .row > div {
    color: inherit !important;
}

#order-standard_cart .view-cart-items {
    background: var(--dts-bg) !important;
    border: 1px solid var(--dts-border) !important;
    border-radius: 0 0 var(--dts-radius-lg) var(--dts-radius-lg) !important;
    box-shadow: none !important;
}

#order-standard_cart .view-cart-items .item {
    background: var(--dts-bg) !important;
    border-bottom: 1px solid var(--dts-border) !important;
    padding: 14px 20px !important;
}

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

#order-standard_cart .view-cart-tabs .nav-tabs .nav-link:not(.active):not([aria-selected="true"]) {
    color: var(--dts-text-secondary) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
    background: #eef2f6 !important;
    border-color: var(--dts-border) !important;
}

#order-standard_cart .view-cart-tabs .tab-content {
    background: var(--dts-bg) !important;
    border: 1px solid var(--dts-border) !important;
    border-radius: var(--dts-radius) !important;
}

/* ── Checkout form: already-registered toggle bar ───────────────────────── */

.cart-body #frmCheckout {
    margin-bottom: 20px;
}

#order-standard_cart.dts-checkout-focus .cart-body #frmCheckout .dts-checkout-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
    gap: 20px;
    align-items: start;
}

#order-standard_cart.dts-checkout-focus .cart-body #frmCheckout .dts-checkout-main {
    min-width: 0;
}

#order-standard_cart.dts-checkout-focus .cart-body #frmCheckout .dts-checkout-aside {
    min-width: 0;
    position: sticky;
    top: calc(var(--dts-header-h, 110px) + 12px);
    align-self: start;
}

@media (max-width: 1199px) {
    #order-standard_cart.dts-checkout-focus .cart-body #frmCheckout .dts-checkout-layout {
        grid-template-columns: 1fr;
    }

    #order-standard_cart.dts-checkout-focus .cart-body #frmCheckout .dts-checkout-aside {
        position: static;
        top: auto;
    }
}

.cart-body #frmCheckout .dts-checkout-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    padding: 12px 16px;
    border: 1px solid var(--dts-border);
    border-radius: var(--dts-radius);
    background: #f7f9fb;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--dts-text-secondary);
}

.cart-body #frmCheckout .dts-checkout-card-title i {
    color: var(--dts-text-secondary);
    font-size: 12px;
}

.cart-body #frmCheckout .dts-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 12px 16px 11px;
    border-bottom: 1px solid var(--dts-border);
    background: #f7f9fb;
    border-radius: var(--dts-radius) var(--dts-radius) 0 0;
    font-size: 11px !important;
    line-height: 1.2;
    font-weight: 600;
    color: var(--dts-text-secondary);
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.cart-body #frmCheckout .dts-section-title:first-of-type {
    margin-top: 0;
}

.cart-body #frmCheckout .form-group {
    margin-bottom: 12px;
}

.cart-body #frmCheckout .text-center.mt-4.pt-2 {
    margin-top: 14px !important;
    padding: 16px 16px 14px;
    border: 0 !important;
    border-radius: 0;
    background: transparent;
}

.cart-body #frmCheckout .dts-checkout-section-card {
    background: #ffffff;
    border: 1px solid var(--dts-border);
    border-radius: var(--dts-radius);
    box-shadow: var(--dts-shadow-sm);
    margin-bottom: 16px;
    overflow: visible;
}

.cart-body #frmCheckout .dts-checkout-notes-card {
    overflow: hidden;
}

/* Highlighted marketing opt-in card */
.cart-body #frmCheckout .dts-checkout-marketing-card {
    background: linear-gradient(135deg, var(--dts-primary-dark) 0%, var(--dts-primary) 100%);
    border-color: var(--dts-primary-dark);
}

.cart-body #frmCheckout .dts-checkout-marketing-card .dts-section-title {
    background: transparent;
    border-bottom-color: rgba(255,255,255,0.24);
    color: #ffffff;
}

.cart-body #frmCheckout .dts-checkout-marketing-card .dts-section-title i {
    color: #ffffff;
}

.cart-body #frmCheckout .dts-checkout-marketing-card .dts-checkout-section-body {
    background: transparent;
    color: #ffffff;
}

.cart-body #frmCheckout .dts-checkout-marketing-card .text-muted {
    color: rgba(255,255,255,0.9) !important;
}

.cart-body #frmCheckout .dts-checkout-marketing-card .dts-marketing-toggle-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 2px 4px;
    background: #ffffff;
    border: 0;
    border-radius: 6px;
}

.cart-body #frmCheckout .dts-checkout-marketing-card .dts-marketing-toggle-wrap .bootstrap-switch,
.cart-body #frmCheckout .dts-checkout-marketing-card .dts-marketing-toggle-wrap .toggle.btn {
    margin: 0 !important;
}

.cart-body #frmCheckout .dts-checkout-marketing-card .dts-marketing-toggle-wrap .bootstrap-switch .bootstrap-switch-handle-on,
.cart-body #frmCheckout .dts-checkout-marketing-card .dts-marketing-toggle-wrap .bootstrap-switch .bootstrap-switch-handle-off,
.cart-body #frmCheckout .dts-checkout-marketing-card .dts-marketing-toggle-wrap .btn-default {
    color: var(--dts-primary) !important;
    font-weight: 600;
}

.cart-body #frmCheckout .dts-checkout-marketing-card .dts-marketing-toggle-wrap .bootstrap-switch .bootstrap-switch-handle-on {
    color: #ffffff !important;
}

.cart-body #frmCheckout .dts-checkout-marketing-card .dts-marketing-toggle-wrap .bootstrap-switch,
.cart-body #frmCheckout .dts-checkout-marketing-card .dts-marketing-toggle-wrap .bootstrap-switch *,
.cart-body #frmCheckout .dts-checkout-marketing-card .dts-marketing-toggle-wrap .toggle.btn,
.cart-body #frmCheckout .dts-checkout-marketing-card .dts-marketing-toggle-wrap .toggle.btn *,
.cart-body #frmCheckout .dts-checkout-marketing-card .dts-marketing-toggle-wrap .btn,
.cart-body #frmCheckout .dts-checkout-marketing-card .dts-marketing-toggle-wrap .btn-default {
    border: 0 !important;
    box-shadow: none !important;
}

/* Checkout right rail: make payment card feel like order-summary-clean */
#order-standard_cart #frmCheckout .dts-checkout-payment-card {
    border: 1px solid #dbe5f3;
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 58%);
}

#order-standard_cart #frmCheckout .dts-checkout-payment-card .dts-checkout-section-body {
    padding-top: 14px;
}

#order-standard_cart #frmCheckout .dts-checkout-payment-card #totalDueToday {
    margin: 2px 0 14px;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    text-align: left;
}

#order-standard_cart #frmCheckout .dts-checkout-payment-card #totalDueToday strong {
    display: inline;
    font-size: 1.5rem;
    line-height: 1.2;
    margin-top: 0;
}

#order-standard_cart #frmCheckout .dts-checkout-payment-card #applyCreditContainer > div {
    border-color: #e2e9f3 !important;
    background: #ffffff !important;
}

/* Make checkout card-entry block more compact (less bulky) */
#order-standard_cart #frmCheckout .dts-checkout-payment-card .cc-input-container {
    padding: 10px 12px !important;
    border: 1px solid #e2e9f3;
    border-radius: 10px;
    margin-top: 8px;
}

#order-standard_cart #frmCheckout .dts-checkout-payment-card .cc-input-container .list-unstyled {
    margin: 0 0 8px;
}

#order-standard_cart #frmCheckout .dts-checkout-payment-card #newCardInfo,
#order-standard_cart #frmCheckout .dts-checkout-payment-card #newCardSaveSettings .row {
    margin-left: -4px;
    margin-right: -4px;
}

#order-standard_cart #frmCheckout .dts-checkout-payment-card #newCardInfo > [class*="col-"],
#order-standard_cart #frmCheckout .dts-checkout-payment-card #newCardSaveSettings .row > [class*="col-"] {
    padding-left: 4px;
    padding-right: 4px;
}

#order-standard_cart #frmCheckout .dts-checkout-payment-card #newCardInfo .form-group,
#order-standard_cart #frmCheckout .dts-checkout-payment-card #newCardSaveSettings .form-group {
    margin-bottom: 6px;
}

#order-standard_cart #frmCheckout .dts-checkout-payment-card #newCardInfo .form-control,
#order-standard_cart #frmCheckout .dts-checkout-payment-card #newCardSaveSettings .form-control {
    padding-top: 8px;
    padding-bottom: 8px;
}

/* Checkout payment radios: use DTS secondary filled checkmark style */
#order-standard_cart #frmCheckout .dts-checkout-payment-card .iradio_square-blue {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #477FB2;
    background: #ffffff !important;
    background-image: none !important;
    position: relative;
}

#order-standard_cart #frmCheckout .dts-checkout-payment-card .iradio_square-blue.checked {
    background: #477FB2 !important;
    border-color: #477FB2 !important;
}

#order-standard_cart #frmCheckout .dts-checkout-payment-card .iradio_square-blue.checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.cart-body #frmCheckout .dts-checkout-section-body {
    padding: 16px 18px;
    background: #ffffff;
    border-radius: 0 0 var(--dts-radius) var(--dts-radius);
}

/* Account security block: keep fields on white surface */
#order-standard_cart #frmCheckout #containerNewUserSecurity {
    background: #ffffff;
    border: 1px solid var(--dts-border);
    border-radius: var(--dts-radius);
    box-shadow: var(--dts-shadow-sm);
    margin-bottom: 16px;
    overflow: hidden;
}

#order-standard_cart #frmCheckout #containerNewUserSecurity > .dts-section-title {
    margin: 0 !important;
}

#order-standard_cart #frmCheckout #containerNewUserSecurity #containerPassword,
#order-standard_cart #frmCheckout #containerNewUserSecurity > .row.mt-2 {
    background: #ffffff;
    margin: 0;
    padding: 16px 18px 10px;
}

.cart-body #frmCheckout .dts-checkout-section-body > .row:last-child,
.cart-body #frmCheckout .dts-checkout-section-body > div:last-child {
    margin-bottom: 0;
}

.cart-body #frmCheckout .form-group.prepend-icon .field-icon {
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    justify-content: center;
    text-align: center;
}

.cart-body #frmCheckout .form-group.prepend-icon .field:not(#inputPhone),
.cart-body #frmCheckout .form-group.prepend-icon .form-control:not(#inputPhone) {
    padding-left: 40px !important;
}

.cart-body #frmCheckout .dts-section-title i {
    color: var(--dts-text-secondary);
    font-size: 12px;
    width: 14px;
    text-align: center;
    flex: 0 0 14px;
}

/* Duplicate fallback icon labels are output for state; hide the extra one. */
.cart-body #frmCheckout .form-group.prepend-icon label.field-icon + label.field-icon {
    display: none;
}

/* Phone input uses intl-tel-input prefix UI; hide our prepend icon there. */
.cart-body #frmCheckout .form-group.prepend-icon label[for="inputPhone"] {
    display: none;
}

.cart-body #frmCheckout .form-group.prepend-icon label[for="inputDCPhone"] {
    display: none;
}

.cart-body #frmCheckout #inputPhone,
.cart-body #frmCheckout #inputDCPhone {
    padding-left: 40px !important;
}

.cart-body #frmCheckout .intl-tel-input.allow-dropdown.separate-dial-code #inputPhone,
.cart-body #frmCheckout .intl-tel-input.allow-dropdown.separate-dial-code #inputDCPhone,
.cart-body #frmCheckout .iti.iti--allow-dropdown.iti--separate-dial-code #inputPhone,
.cart-body #frmCheckout .iti.iti--allow-dropdown.iti--separate-dial-code #inputDCPhone {
    padding-left: 88px !important;
}

.cart-body #frmCheckout .intl-tel-input,
.cart-body #frmCheckout .iti {
    width: 100%;
    z-index: 20;
}

.cart-body #frmCheckout .intl-tel-input .country-list,
.cart-body #frmCheckout .iti .iti__country-list {
    left: 0 !important;
    right: auto !important;
}

/* State/Province control alignment (text input or dynamic select). */
.cart-body #frmCheckout #inputState,
.cart-body #frmCheckout #stateselect {
    width: 100% !important;
    padding-left: 40px !important;
    text-align: left;
}

.cart-body #frmCheckout .form-group.prepend-icon.dts-state-field .dts-state-field-icon {
    display: inline-flex !important;
}

/* Checkout step: remove sidebar distractions and use full-width form area */
#order-standard_cart.dts-checkout-focus .cart-sidebar {
    display: none;
}

#order-standard_cart.dts-checkout-focus .cart-body {
    float: none;
    width: 100%;
}


.already-registered {
    background: var(--dts-bg);
    border: 1px solid var(--dts-border);
    border-radius: var(--dts-radius);
    padding: 14px 20px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.already-registered p {
    margin: 0;
    font-size: var(--dts-font-size-sm);
    color: var(--dts-text-secondary);
}

/* Guest vs logged-in state: login button */
#btnAlreadyRegistered {
    white-space: nowrap;
    background: var(--dts-bg-alt) !important;
    border: 1px solid var(--dts-border) !important;
    color: var(--dts-primary) !important;
    font-size: var(--dts-font-size-sm) !important;
    font-weight: 600 !important;
    padding: 8px 18px !important;
    border-radius: var(--dts-radius) !important;
    transition: var(--dts-transition-fast);
}

#btnAlreadyRegistered:hover {
    background: var(--dts-primary) !important;
    border-color: var(--dts-primary) !important;
    color: #fff !important;
}

#btnNewUserSignup {
    white-space: nowrap;
    background: var(--dts-bg-alt) !important;
    border: 1px solid var(--dts-border) !important;
    color: var(--dts-warning) !important;
    font-size: var(--dts-font-size-sm) !important;
    font-weight: 600 !important;
    padding: 8px 18px !important;
    border-radius: var(--dts-radius) !important;
    transition: var(--dts-transition-fast);
}

#btnNewUserSignup:hover {
    background: var(--dts-warning) !important;
    border-color: var(--dts-warning) !important;
    color: #fff !important;
}

/* Guest login panel */
#containerExistingUserSignin {
    background: var(--dts-bg);
    border: 1px solid var(--dts-border);
    border-left: 4px solid var(--dts-accent);
    border-radius: var(--dts-radius);
    padding: 20px;
    margin-bottom: 20px;
}

/* Account selector cards (logged-in multi-account) */
.account-select-container {
    gap: 12px;
    margin-bottom: 8px;
}

.account {
    background: var(--dts-bg);
    border: 2px solid var(--dts-border);
    border-radius: var(--dts-radius);
    padding: 14px 16px;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    margin-bottom: 12px;
}

.account.active,
.account:has(input:checked) {
    border-color: var(--dts-primary);
    box-shadow: 0 0 0 3px rgba(30,90,142,0.1);
}

.account .radio-inline {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-weight: normal;
    width: 100%;
}

.account .address {
    font-size: var(--dts-font-size-sm);
    color: var(--dts-text);
    line-height: 1.5;
}

.account .label-info {
    background: var(--dts-accent);
    color: #fff;
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 10px;
    font-weight: 600;
}

.account .label-default {
    background: var(--dts-text-muted);
    color: #fff;
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 10px;
    font-weight: 600;
}

/* ── Checkout form fields ───────────────────────────────────────────────── */

.form-group.prepend-icon {
    position: relative;
}

.form-group.prepend-icon .field-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--dts-text-muted);
    font-size: 14px;
    pointer-events: none;
    z-index: 4;
    width: auto;
    display: inline-flex;
    align-items: center;
}

.form-group.prepend-icon .form-control,
.form-group.prepend-icon .field {
    padding-left: 36px !important;
}

#order-standard_cart .form-control,
#order-standard_cart select.form-control {
    border: 1px solid var(--dts-border-input);
    border-radius: var(--dts-radius-sm);
    color: var(--dts-text);
    font-size: var(--dts-font-size-sm);
    background: var(--dts-bg);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    height: auto;
    padding: 9px 12px;
}

#order-standard_cart .form-control:focus {
    border-color: var(--dts-border-focus);
    box-shadow: 0 0 0 3px rgba(74,144,217,0.15);
    outline: none;
}

/* ── Payment gateway section ────────────────────────────────────────────── */

#paymentGatewaysContainer {
    margin-top: 8px;
}

#paymentGatewaysContainer .radio-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--dts-bg);
    border: 2px solid var(--dts-border);
    border-radius: var(--dts-radius);
    padding: 10px 16px;
    margin: 4px;
    cursor: pointer;
    font-size: var(--dts-font-size-sm);
    font-weight: 500;
    color: var(--dts-text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#paymentGatewaysContainer .radio-inline:has(input:checked) {
    border-color: var(--dts-primary);
    box-shadow: 0 0 0 3px rgba(30,90,142,0.1);
    color: var(--dts-primary);
}

/* Total due today highlight in checkout */
#order-standard_cart .alert.large-text#totalDueToday {
    background: linear-gradient(135deg, var(--dts-primary-dark) 0%, var(--dts-primary) 100%) !important;
    border: none !important;
    color: #fff !important;
    border-radius: var(--dts-radius) !important;
    font-size: var(--dts-font-size-base) !important;
    padding: 16px 20px !important;
    font-weight: 500;
}

#order-standard_cart .alert.large-text#totalDueToday strong {
    font-size: 1.5rem;
    font-weight: 700;
    margin-left: 6px;
}

/* Credit radio options */
.apply-credit-container label.radio {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 0;
    font-size: var(--dts-font-size-sm);
    color: var(--dts-text);
    cursor: pointer;
}

/* ToS checkbox */
#order-standard_cart .checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--dts-font-size-sm);
    color: var(--dts-text-secondary);
}

/* Complete order button */
#btnCompleteOrder {
    min-width: 220px;
    padding: 14px 32px !important;
    font-size: var(--dts-font-size-base) !important;
    font-weight: 700 !important;
    border-radius: var(--dts-radius) !important;
    background: var(--dts-primary) !important;
    border-color: var(--dts-primary) !important;
    letter-spacing: 0.01em;
    transition: var(--dts-transition-fast);
    box-shadow: var(--dts-shadow-btn);
}

#btnCompleteOrder:hover:not(:disabled) {
    background: var(--dts-primary-hover) !important;
    border-color: var(--dts-primary-hover) !important;
    box-shadow: 0 4px 16px rgba(30,90,142,0.28) !important;
    transform: translateY(-1px);
}

/* Security message */
.checkout-security-msg {
    border-left: 4px solid var(--dts-warning) !important;
    background: #fffbeb !important;
    border-radius: var(--dts-radius) !important;
    font-size: var(--dts-font-size-sm);
    margin-top: 20px;
    color: var(--dts-text-secondary);
}

/* ── Linked accounts / social sign-in ──────────────────────────────────── */

.dts-social-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 20px 0 12px;
    color: var(--dts-text-muted);
    font-size: var(--dts-font-size-sm);
}

.dts-social-divider::before,
.dts-social-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--dts-border);
}

.dts-social-divider::before { margin-right: 12px; }
.dts-social-divider::after  { margin-left: 12px; }

.dts-social-signin-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 8px;
}

.dts-linked-accounts-table {
    width: 100%;
    font-size: var(--dts-font-size-sm);
}

.dts-linked-accounts-table thead th {
    font-weight: 600;
    color: var(--dts-text-secondary);
    border-bottom: 2px solid var(--dts-border);
    padding: 10px 12px;
}

.dts-linked-accounts-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--dts-border);
    color: var(--dts-text);
}

/* ── Order confirmation page ────────────────────────────────────────────── */

.order-confirmation {
    text-align: center;
    background: linear-gradient(135deg, var(--dts-primary-dark) 0%, var(--dts-primary) 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--dts-radius-lg) !important;
    padding: 28px 20px !important;
    font-size: 1.2rem !important;
    font-weight: 600;
    box-shadow: var(--dts-shadow-md);
}

.order-confirmation span {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    margin-top: 6px;
}

/* ── Alert overrides within the cart ───────────────────────────────────── */

#order-standard_cart .alert {
    border-radius: var(--dts-radius) !important;
    font-size: var(--dts-font-size-sm);
}

#order-standard_cart .alert-danger {
    background: #fef2f2 !important;
    border-left: 4px solid var(--dts-danger) !important;
    border-top: none; border-right: none; border-bottom: none;
    color: #7f1d1d !important;
}

#order-standard_cart .alert-warning {
    background: #fffbeb !important;
    border-left: 4px solid var(--dts-warning) !important;
    border-top: none; border-right: none; border-bottom: none;
    color: #78350f !important;
}

#order-standard_cart .alert-success {
    background: #f0fdf4 !important;
    border-left: 4px solid var(--dts-success) !important;
    border-top: none; border-right: none; border-bottom: none;
    color: #14532d !important;
}

#order-standard_cart .alert-info {
    background: #eff6ff !important;
    border-left: 4px solid var(--dts-info) !important;
    border-top: none; border-right: none; border-bottom: none;
    color: #1e3a5f !important;
}

/* ── Modal overrides ────────────────────────────────────────────────────── */

.modal-remove-item .modal-content {
    border: none;
    border-radius: var(--dts-radius-lg);
    box-shadow: var(--dts-shadow-lg);
}

.modal-remove-item .modal-body {
    padding: 28px 28px 16px;
    text-align: center;
}

.modal-remove-item .modal-body .fas {
    color: var(--dts-danger);
    margin-bottom: 12px;
}

.modal-remove-item .modal-body .fas.fa-trash-alt {
    color: var(--dts-warning);
}

.modal-remove-item .modal-footer {
    border-top: 1px solid var(--dts-border);
    padding: 16px 28px;
    justify-content: center;
    gap: 12px;
}

.modal-remove-item .modal-footer .btn-default {
    border: 1px solid var(--dts-border);
    color: var(--dts-text);
    background: var(--dts-bg);
    border-radius: var(--dts-radius) !important;
    padding: 8px 24px;
    font-size: var(--dts-font-size-sm);
    font-weight: 500;
}

.modal-remove-item .modal-footer .btn-primary {
    background: var(--dts-danger) !important;
    border-color: var(--dts-danger) !important;
    border-radius: var(--dts-radius) !important;
    padding: 8px 24px;
    font-size: var(--dts-font-size-sm);
    font-weight: 600;
}

/* ── Password strength meter ────────────────────────────────────────────── */

.password-strength-meter .progress {
    height: 6px;
    border-radius: 3px;
    background: var(--dts-border);
    overflow: hidden;
}

.password-strength-meter .progress-bar {
    transition: width 0.3s ease;
}

/* ── Existing credit cards grid ─────────────────────────────────────────── */

.existing-cc-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

/* Selectable payment method card tiles */
.dts-paymethod-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--dts-bg);
    border: 2px solid var(--dts-border);
    border-radius: var(--dts-radius);
    padding: 12px 16px;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    min-width: 200px;
    flex: 1 1 200px;
    font-weight: normal;
    margin: 0;
}

.dts-paymethod-card:hover {
    border-color: var(--dts-primary);
    background: var(--dts-bg-alt);
}

.dts-paymethod-card:has(input:checked) {
    border-color: var(--dts-primary);
    box-shadow: 0 0 0 3px rgba(30,90,142,0.1);
    background: #eff6ff;
}

.dts-paymethod-card--expired {
    opacity: 0.55;
    cursor: not-allowed;
}

.dts-paymethod-radio {
    flex-shrink: 0;
    margin: 0;
}

.dts-paymethod-icon {
    font-size: 1.4rem;
    color: var(--dts-text-secondary);
    flex-shrink: 0;
    width: 28px;
    text-align: center;
}

.dts-paymethod-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.dts-paymethod-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--dts-text);
}

.dts-paymethod-desc {
    font-size: 12px;
    color: var(--dts-text-muted);
}

.dts-paymethod-expiry {
    font-size: 12px;
    color: var(--dts-text-secondary);
}

.dts-paymethod-expiry--expired {
    color: var(--dts-danger);
}

/* ── configureproduct domain tab styles ─────────────────────────────────── */

.store-domain-tabs {
    border-bottom: none;
    margin-bottom: 0 !important;
}

.store-domain-tabs .nav-link {
    font-size: var(--dts-font-size-sm);
    color: var(--dts-text-secondary);
    border: 1px solid var(--dts-border) !important;
    border-bottom: none !important;
    border-radius: var(--dts-radius-sm) var(--dts-radius-sm) 0 0 !important;
    padding: 8px 16px;
    background: var(--dts-bg-alt);
    transition: var(--dts-transition-fast);
}

.store-domain-tabs .nav-link:hover,
.store-domain-tabs .nav-link.active,
.store-domain-tabs .nav-link[aria-selected="true"] {
    color: var(--dts-primary);
    background: var(--dts-bg);
    font-weight: 600;
}

.store-domain-tab-content {
    border: 1px solid var(--dts-border);
    border-radius: 0 var(--dts-radius-sm) var(--dts-radius-sm) var(--dts-radius-sm);
    padding: 20px;
    background: var(--dts-bg);
    margin-bottom: 20px;
}

.domain-validation.ok {
    color: var(--dts-success);
    font-weight: 600;
    font-size: var(--dts-font-size-sm);
}

/* ── Marketing email opt-in ─────────────────────────────────────────────── */

.marketing-email-optin {
    background: #ffffff;
    border: 1px solid var(--dts-border);
    border-radius: var(--dts-radius);
    padding: 16px 20px;
    margin-bottom: 20px;
}

#order-standard_cart #frmCheckout #applyCreditContainer > div,
#order-standard_cart #frmCheckout .cc-input-container,
#order-standard_cart #frmCheckout #paymentGatewayInput > .panel,
#order-standard_cart #frmCheckout #paymentGatewayInput > .card {
    background: #ffffff !important;
}

.marketing-email-optin h4 {
    font-size: var(--dts-font-size-base) !important;
    font-weight: 600;
    margin-bottom: 6px;
}

/* ── Inline promo bar (view cart) ───────────────────────────────────────── */

.vc-section-heading {
    font-size: var(--dts-font-size-base);
    font-weight: 700;
    color: var(--dts-text);
    margin: 0 0 12px;
}

.vc-promo-section {
    margin-top: 24px;
}

.vc-promo-form {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.vc-promo-input-wrap {
    position: relative;
    flex: 1;
}

.vc-promo-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--dts-text-muted);
    font-size: 14px;
    pointer-events: none;
}

.vc-promo-input {
    width: 100%;
    padding: 10px 14px 10px 36px;
    border: 2px solid var(--dts-primary);
    border-radius: var(--dts-radius);
    font-size: var(--dts-font-size-sm);
    color: var(--dts-text);
    background: var(--dts-bg);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.vc-promo-input:focus {
    border-color: var(--dts-primary);
    box-shadow: 0 0 0 3px rgba(30,90,142,0.12);
}

.vc-promo-btn {
    white-space: nowrap;
    background: var(--dts-primary);
    border: none;
    border-radius: var(--dts-radius);
    color: #fff;
    font-size: var(--dts-font-size-sm);
    font-weight: 600;
    padding: 10px 20px;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.vc-promo-btn:hover {
    background: var(--dts-primary-dark);
    box-shadow: 0 3px 10px rgba(30,90,142,0.25);
}

.vc-promo-applied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: var(--dts-radius);
    font-size: var(--dts-font-size-sm);
    font-weight: 600;
    color: var(--dts-success);
}

.vc-promo-remove {
    color: var(--dts-text-muted) !important;
    font-size: var(--dts-font-size-xs);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.vc-promo-remove:hover {
    color: var(--dts-danger) !important;
    text-decoration: underline;
}

/* ── Checkout two-column layout ─────────────────────────────────────────── */

.checkout-two-col {
    display: flex;
    align-items: flex-start;
    gap: 28px;
}

.checkout-main-col {
    flex: 1 1 0%;
    min-width: 0;
}

.checkout-summary-col {
    flex: 0 0 290px;
    max-width: 290px;
}

@media (max-width: 991px) {
    .checkout-two-col {
        flex-direction: column;
    }
    .checkout-summary-col {
        flex: 0 0 100%;
        max-width: 100%;
        order: -1;
    }
}

/* ── Checkout section headings ──────────────────────────────────────────── */

.co-section-header {
    margin: 24px 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--dts-border);
}

.co-section-heading {
    font-size: var(--dts-font-size-base);
    font-weight: 700;
    color: var(--dts-text);
    margin: 0;
}

.co-section-note {
    font-weight: 400;
    font-style: normal;
    color: var(--dts-text-muted);
    font-size: var(--dts-font-size-xs);
}

/* ── Checkout order summary (sidebar, right column) ─────────────────────── */

.co-order-summary {
    position: sticky;
    top: 90px;
}

.co-total-due-today {
    margin: 16px 0 4px;
    padding: 16px;
    background: var(--dts-bg-alt);
    border: 1px solid var(--dts-border);
    border-radius: var(--dts-radius);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.co-total-label {
    font-size: var(--dts-font-size-xs);
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--dts-text-secondary);
}

.co-total-amount {
    font-size: 2rem;
    font-weight: 700;
    color: var(--dts-text);
    line-height: 1.1;
}

.co-tos-check {
    margin-top: 12px;
    font-size: var(--dts-font-size-sm);
    color: var(--dts-text-secondary);
}

.co-trust-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--dts-border);
}

.co-trust-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: var(--dts-font-size-xs);
    color: var(--dts-text-muted);
}

/* ── Upgrade credit row ─────────────────────────────────────────────────── */

.row-upgrade-credit {
    background: #f0fdf4;
    border-top: 1px dashed #bbf7d0;
    padding: 6px 0;
    margin-top: 0;
}

.upgrade-calc-msg {
    font-size: var(--dts-font-size-xs);
    color: var(--dts-text-muted);
    margin-top: 2px;
}

/* ── product recommendations modal ─────────────────────────────────────── */

#recommendationsModal .modal-content {
    border-radius: var(--dts-radius-lg);
    border: none;
    box-shadow: var(--dts-shadow-lg);
}

#recommendationsModal .modal-header {
    background: var(--dts-primary);
    color: #fff;
    border-radius: var(--dts-radius-lg) var(--dts-radius-lg) 0 0;
    border-bottom: none;
}

#recommendationsModal .modal-title {
    color: #fff;
    font-weight: 600;
}

#recommendationsModal .close {
    color: #fff;
    opacity: 0.8;
}

/* ── Collapsed sidebar (mobile strip) ──────────────────────────────────── */

.sidebar-categories-collapsed-container {
    display: none;
    background: var(--dts-bg);
    border: 1px solid var(--dts-border);
    border-radius: var(--dts-radius);
    padding: 12px 16px;
    margin-bottom: 16px;
}

@media (max-width: 767px) {
    .sidebar-categories-collapsed-container {
        display: block;
    }
}

/* ── Store product order page (store/order.tpl) ─────────────────────────── */

.store-order-container h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--dts-text);
    margin-bottom: 8px;
}

.store-order-container .payment-term h4 {
    font-size: var(--dts-font-size-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--dts-text-secondary);
    margin-bottom: 8px;
}

.store-order-container .payment-term select.form-control {
    border: 1px solid var(--dts-border-input);
    border-radius: var(--dts-radius-sm);
    color: var(--dts-text);
    font-size: var(--dts-font-size-sm);
    padding: 9px 12px;
}

/* Domain tabs on product page */
.store-order-container .responsive-tabs-sm-connector {
    display: none;
}

/* Promoted product / upsell card */
.store-promoted-product {
    border-left: 4px solid var(--dts-accent);
}

.store-promoted-product h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--dts-text);
}

.store-promoted-product h4 {
    font-size: var(--dts-font-size-base);
    color: var(--dts-text-secondary);
    font-weight: 400;
}

.store-promoted-product .features {
    list-style: none;
    padding: 0;
    margin: 10px 0 16px;
}

.store-promoted-product .features li {
    font-size: var(--dts-font-size-sm);
    color: var(--dts-text-secondary);
    padding: 3px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.store-promoted-product .features li i {
    color: var(--dts-success);
    font-size: 13px;
}

/* ── Cart / Checkout: guest banner ──────────────────────────────────────── */

.dts-guest-banner {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #93c5fd;
    border-left: 4px solid var(--dts-info);
    border-radius: var(--dts-radius);
    padding: 14px 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--dts-font-size-sm);
    color: #1e3a5f;
}

.dts-guest-banner i {
    font-size: 1.1rem;
    color: var(--dts-info);
    flex-shrink: 0;
}

.dts-guest-banner a {
    font-weight: 600;
    color: var(--dts-primary);
}

/* ── Cart sidebar overrides ─────────────────────────────────────────────── */

/* Currency select */
.dts-cart-sidebar-currency .form-control {
    width: 100%;
    font-size: 13px;
    height: auto;
    padding: 7px 10px;
}

.dts-cart-sidebar-currency .form-control:focus {
    border-color: var(--dts-border-focus);
    box-shadow: 0 0 0 3px rgba(74,144,217,0.15);
    outline: none;
}

/* ── Store products page ─────────────────────────────────────────────────── */

.dts-store-tagline {
    color: var(--dts-text-secondary);
    font-size: 1rem;
    margin-top: 4px;
}

.dts-store-stock {
    font-size: .8rem;
    color: var(--dts-text-muted);
    margin-top: 8px;
}
.dts-store-stock i {
    margin-right: 4px;
}

/* View Cart action item — highlight it */
.cart-sidebar .dts-sidebar-nav-item[menuitemname="View Cart"] {
    color: var(--dts-primary);
    font-weight: 600;
}

.cart-sidebar .dts-sidebar-nav-item[menuitemname="View Cart"] .dts-sidebar-nav-icon {
    color: var(--dts-primary);
}

/* Per-category cards — entire header is a link */
.dts-sidebar-cat-link {
    display: block;
    text-decoration: none;
    transition: background-color 0.15s ease;
}
.dts-sidebar-cat-link:hover {
    background-color: #eef3f9;
    text-decoration: none;
}
.dts-sidebar-cat-link.active,
.dts-sidebar-card--active .dts-sidebar-cat-link {
    background-color: #eef3f9;
    border-left: 3px solid var(--dts-primary);
}
.dts-sidebar-cat-link.active .dts-sidebar-card-title,
.dts-sidebar-card--active .dts-sidebar-card-title {
    color: var(--dts-primary);
}
.dts-sidebar-cat-link.active .dts-sidebar-section-icon,
.dts-sidebar-card--active .dts-sidebar-section-icon {
    color: var(--dts-primary);
}

/* ── Responsive adjustments ─────────────────────────────────────────────── */

@media (max-width: 575px) {
    .header-lined h1,
    .header-lined .font-size-36 {
        font-size: 1.35rem !important;
    }
    .order-summary {
        position: static;
    }
    .view-cart-items .item {
        padding: 12px 14px;
    }
    .total-due-today .amt {
        font-size: 1.6rem;
    }
    .btn-checkout {
        font-size: var(--dts-font-size-sm) !important;
    }
    .already-registered {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/* ── Configure Product page ─────────────────────────────────────────────── */

.dts-configure-subtitle {
    font-size: var(--dts-font-size-sm);
    color: var(--dts-text-secondary);
    margin: 6px 0 0;
}

.dts-configure-card {
    background: var(--dts-bg);
    border: 1px solid var(--dts-border);
    border-radius: var(--dts-radius-lg);
    box-shadow: none;
    margin-bottom: 20px;
    overflow: hidden;
}

.dts-configure-card-header {
    background: var(--dts-bg-alt);
    border-bottom: 1px solid var(--dts-border);
    padding: 12px 20px;
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.dts-configure-card-title {
    font-size: 11px !important;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--dts-text-secondary);
    margin: 0;
}

.dts-configure-card-hint {
    font-size: 11px;
    color: var(--dts-text-muted);
    font-style: italic;
}

.dts-configure-card-body {
    padding: 20px;
    background: var(--dts-bg) !important;
}

.dts-configure-card-body .form-group:last-child {
    margin-bottom: 0;
}

.dts-configure-product-info {
    border-left: none;
}

.dts-configure-product-info .dts-configure-card-body {
    padding: 16px 20px;
}

.dts-configure-desc {
    color: var(--dts-text-secondary);
    font-size: var(--dts-font-size-sm);
    margin: 0;
    line-height: 1.6;
}

.dts-configure-help {
    font-size: var(--dts-font-size-sm);
    margin-top: 8px;
    margin-left: 8px;
    margin-right: 8px;
}

.dts-configure-product-heading {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--dts-text);
    margin: 0 0 20px;
}

.dts-configure-divider {
    border: none;
    border-top: 1px solid var(--dts-border);
    margin: 20px 0;
}

.dts-configure-section {
    margin: 0;
}

.dts-configure-section-label {
    font-size: 11px !important;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--dts-text-secondary);
    margin: 0 0 12px;
}

/* ── Domain selection options inside DTS card ───────────────────────────── */

.dts-configure-card .domain-selection-options .option {
    padding: 14px 0;
    border-bottom: 1px solid var(--dts-border);
}

.dts-configure-card .domain-selection-options .option:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.dts-configure-card .domain-selection-options .option:first-child {
    padding-top: 0;
}

.dts-configure-card .domain-selection-options .option > label {
    font-weight: 600;
    color: var(--dts-text);
    margin-bottom: 10px;
    cursor: pointer;
}

.dts-configure-card .domain-input-group {
    margin-top: 10px;
    padding-left: 20px;
}

.dts-configure-card .domain-checker-bg,
.dts-configure-card .domain-input-group {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 10px 0 0 20px !important;
}

#order-standard_cart .dts-configure-card .domain-selection-options .option,
#order-standard_cart .dts-configure-card .domain-selection-options .option-selected {
    background-color: transparent !important;
    border-radius: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   DTS — Domain Register page
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Search box ─────────────────────────────────────────────────────────── */

.dts-domain-register-search {
    background: linear-gradient(135deg, var(--dts-primary) 0%, var(--dts-primary-dark, #1a3d66) 100%);
    border-radius: var(--dts-radius-lg, 10px);
    padding: 32px 36px;
    margin-bottom: 32px;
    color: #fff;
}

.dts-domain-register-lead {
    font-size: 1rem;
    color: rgba(255,255,255,0.85);
    margin-bottom: 16px;
}

.dts-domain-register-input-row {
    max-width: 700px;
}

.dts-domain-register-input {
    border-radius: var(--dts-radius) 0 0 var(--dts-radius) !important;
    border: none !important;
    font-size: 1rem;
    height: 48px;
}

.dts-domain-register-btn {
    border-radius: 0 var(--dts-radius) var(--dts-radius) 0 !important;
    height: 48px;
    padding: 0 24px;
    font-weight: 600;
    background-color: var(--dts-accent) !important;
    border-color: var(--dts-accent) !important;
}

.dts-domain-register-btn:hover {
    background-color: var(--dts-accent-hover, #e65c00) !important;
    border-color: var(--dts-accent-hover, #e65c00) !important;
}

/* ── Domain lookup result area ──────────────────────────────────────────── */

.dts-domain-lookup-result-headline {
    background: var(--dts-bg);
    border: 1px solid var(--dts-border);
    border-radius: var(--dts-radius);
    padding: 20px 24px;
    margin-bottom: 24px;
}

/* ── TLD pricing section ────────────────────────────────────────────────── */

.dts-domain-pricing-section {
    margin-top: 8px;
}

.dts-domain-pricing-heading {
    font-size: 1rem;
    font-weight: 600;
    color: var(--dts-text);
    margin: 0 0 12px;
}

.dts-tld-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.dts-tld-filter-btn {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: var(--dts-font-size-xs);
    font-weight: 500;
    background: var(--dts-bg-alt);
    color: var(--dts-text-secondary);
    border: 1px solid var(--dts-border);
    cursor: pointer;
    transition: var(--dts-transition-fast);
    text-decoration: none;
}

.dts-tld-filter-btn:hover,
.dts-tld-filter-btn.active {
    background: var(--dts-primary);
    color: #fff;
    border-color: var(--dts-primary);
    text-decoration: none;
}

/* ── TLD pricing table ──────────────────────────────────────────────────── */

.dts-tld-pricing-table {
    background: var(--dts-bg);
    border: 1px solid var(--dts-border);
    border-radius: var(--dts-radius);
    overflow: hidden;
    margin-bottom: 28px;
}

.dts-tld-pricing-header {
    display: grid;
    grid-template-columns: 1fr repeat(3, 1fr);
    background: var(--dts-bg-alt);
    border-bottom: 2px solid var(--dts-border);
    padding: 10px 16px;
}

.dts-tld-pricing-header > div {
    font-size: var(--dts-font-size-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dts-text-secondary);
    text-align: center;
}

.dts-tld-pricing-header > div:first-child {
    text-align: left;
}

.dts-tld-pricing-row {
    display: grid;
    grid-template-columns: 1fr repeat(3, 1fr);
    padding: 10px 16px;
    border-bottom: 1px solid var(--dts-border);
    align-items: center;
    transition: background var(--dts-transition-fast);
}

.dts-tld-pricing-row:last-child {
    border-bottom: none;
}

.dts-tld-pricing-row:hover {
    background: var(--dts-bg-alt);
}

.dts-tld-col-name {
    font-weight: 600;
    color: var(--dts-text);
    font-size: var(--dts-font-size-sm);
    display: flex;
    align-items: center;
    gap: 6px;
}

.dts-tld-col-price {
    text-align: center;
    font-size: var(--dts-font-size-sm);
}

.dts-tld-price-amount {
    display: block;
    font-weight: 600;
    color: var(--dts-text);
}

.dts-tld-price-period {
    display: block;
    font-size: var(--dts-font-size-xs);
    color: var(--dts-text-muted);
}

.dts-tld-price-free {
    color: var(--dts-success);
    font-weight: 600;
    font-size: var(--dts-font-size-xs);
}

.dts-tld-price-na {
    color: var(--dts-text-muted);
    font-size: var(--dts-font-size-xs);
}

.dts-tld-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dts-tld-badge-hot   { background: #fff3cd; color: #856404; }
.dts-tld-badge-new   { background: #d1e7dd; color: #0a3622; }
.dts-tld-badge-sale  { background: #f8d7da; color: #58151c; }

/* ── Featured TLD cards ─────────────────────────────────────────────────── */

.dts-featured-tlds {
    margin-bottom: 24px;
}

.dts-featured-tld-card {
    background: var(--dts-bg);
    border: 1px solid var(--dts-border);
    border-radius: var(--dts-radius);
    padding: 16px;
    text-align: center;
    transition: var(--dts-transition-fast);
}

.dts-featured-tld-card:hover {
    border-color: var(--dts-primary);
    box-shadow: var(--dts-shadow-sm);
}

.dts-featured-tld-img img {
    max-height: 40px;
    width: auto;
    margin-bottom: 8px;
}

.dts-featured-tld-price {
    font-size: var(--dts-font-size-sm);
    font-weight: 600;
    color: var(--dts-primary);
}

/* ── Domain promo cards ─────────────────────────────────────────────────── */

.dts-domain-promo-card {
    background: var(--dts-bg);
    border: 1px solid var(--dts-border);
    border-radius: var(--dts-radius);
    padding: 28px 24px;
    text-align: center;
    height: 100%;
}

.dts-domain-promo-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--dts-primary-light, rgba(30,82,148,0.08));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    font-size: 1.4rem;
    color: var(--dts-primary);
}

.dts-domain-promo-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--dts-text);
    margin-bottom: 6px;
}

.dts-domain-promo-lead {
    font-size: var(--dts-font-size-sm);
    color: var(--dts-text-secondary);
    margin-bottom: 16px;
}

.dts-domain-promo-note {
    font-size: var(--dts-font-size-xs);
    color: var(--dts-text-muted);
    margin-top: 10px;
    margin-bottom: 0;
}

/* Responsive: stack pricing table columns on small screens */
@media (max-width: 575px) {
    .dts-tld-pricing-header,
    .dts-tld-pricing-row {
        grid-template-columns: 1fr 1fr;
    }
    .dts-tld-col-price:last-child {
        display: none;
    }
    .dts-tld-pricing-header > div:last-child {
        display: none;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   DTS — Domain Transfer page
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Intro ──────────────────────────────────────────────────────────────── */

.dts-transfer-intro {
    text-align: center;
    margin-bottom: 28px;
}

.dts-transfer-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--dts-text);
    margin-bottom: 6px;
}

.dts-transfer-lead {
    font-size: var(--dts-font-size-sm);
    color: var(--dts-text-secondary);
    margin-bottom: 0;
}

/* ── Transfer form card ─────────────────────────────────────────────────── */

.dts-transfer-card {
    background: var(--dts-bg);
    border: 1px solid var(--dts-border);
    border-radius: var(--dts-radius-lg, 10px);
    box-shadow: var(--dts-shadow-sm);
    overflow: hidden;
    margin-bottom: 8px;
}

.dts-transfer-card-header {
    background: var(--dts-bg-alt);
    border-bottom: 1px solid var(--dts-border);
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.dts-transfer-card-icon {
    color: var(--dts-accent);
    font-size: 1.2rem;
}

.dts-transfer-card-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--dts-text);
    margin: 0;
}

.dts-transfer-card-body {
    padding: 24px;
}

.dts-transfer-card-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--dts-border);
    background: var(--dts-bg-alt);
}

.dts-field-label {
    font-size: var(--dts-font-size-sm);
    font-weight: 600;
    color: var(--dts-text);
    margin-bottom: 6px;
}

.dts-transfer-input {
    border-color: var(--dts-border) !important;
    border-radius: var(--dts-radius) !important;
    font-size: var(--dts-font-size-sm);
    transition: border-color var(--dts-transition-fast), box-shadow var(--dts-transition-fast);
}

.dts-transfer-input:focus {
    border-color: var(--dts-primary) !important;
    box-shadow: 0 0 0 3px rgba(30,82,148,0.12) !important;
}

.dts-auth-help {
    font-size: var(--dts-font-size-xs);
    color: var(--dts-text-muted);
    font-weight: 400;
}

.dts-auth-help:hover {
    color: var(--dts-primary);
}

.dts-transfer-exclusion {
    text-align: center;
    font-size: var(--dts-font-size-xs);
    color: var(--dts-text-muted);
    margin-top: 8px;
}

/* ── Info cards row ─────────────────────────────────────────────────────── */

.dts-transfer-info-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 32px;
}

.dts-transfer-info-card {
    background: var(--dts-bg);
    border: 1px solid var(--dts-border);
    border-radius: var(--dts-radius);
    padding: 18px 20px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.dts-transfer-info-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--dts-primary-light, rgba(30,82,148,0.08));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dts-primary);
    font-size: 0.9rem;
}

.dts-transfer-info-title {
    font-size: var(--dts-font-size-sm);
    font-weight: 600;
    color: var(--dts-text);
    margin-bottom: 3px;
}

.dts-transfer-info-text {
    font-size: var(--dts-font-size-xs);
    color: var(--dts-text-muted);
    line-height: 1.4;
}

@media (max-width: 767px) {
    .dts-transfer-info-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575px) {
    .dts-domain-register-search {
        padding: 20px 18px;
    }
}

/* ── Domain sidebar: why-list ───────────────────────────────────────────── */

.dts-domain-why-list {
    display: flex;
    flex-direction: column;
}

.dts-domain-why-list--row {
    flex-direction: row;
    flex-wrap: wrap;
}

.dts-domain-why-list--row .dts-domain-why-item {
    flex: 1 1 180px;
    border-bottom: none;
    border-right: 1px solid var(--dts-border);
    padding: 16px 20px;
}

.dts-domain-why-list--row .dts-domain-why-item:last-child {
    border-right: none;
}

@media (max-width: 767px) {
    .dts-domain-why-list--row .dts-domain-why-item {
        flex: 1 1 50%;
        border-right: none;
        border-bottom: 1px solid var(--dts-border);
    }
    .dts-domain-why-list--row .dts-domain-why-item:last-child {
        border-bottom: none;
    }
}

.dts-domain-why-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 20px;
    border-bottom: 1px solid var(--dts-border);
}

.dts-domain-why-icon {
    flex-shrink: 0;
    width: 20px;
    color: var(--dts-primary);
    font-size: 1rem;
    margin-top: 2px;
    text-align: center;
}

.dts-domain-why-title {
    font-size: var(--dts-font-size-sm);
    font-weight: 600;
    color: var(--dts-text);
    margin-bottom: 2px;
}

.dts-domain-why-text {
    font-size: var(--dts-font-size-xs);
    color: var(--dts-text-muted);
    line-height: 1.45;
}

/* ── Nav mega menu (Email → Pro Email / Google Workspace) ──────────────── */

.dts-nav-dropdown {
    position: static;
}

.dts-nav-dropdown-toggle::after {
    content: '\f078';
    font-family: 'Font Awesome 6 Pro';
    font-weight: 900;
    font-size: 0.65em;
    margin-left: 5px;
    vertical-align: middle;
    display: inline-block;
}

.dts-mega-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--dts-bg);
    border: 1px solid var(--dts-border);
    border-radius: var(--dts-radius-lg);
    box-shadow: var(--dts-shadow-lg);
    padding: 24px;
    z-index: 1050;
    display: none;
    flex-direction: column;
    gap: 0;
    width: 900px;
    margin-top: 0;
}

/* Bridge the gap between nav link and panel so hover stays alive */
.dts-mega-menu::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    height: 12px;
}

.dts-nav-dropdown:focus-within .dts-mega-menu,
.dts-nav-dropdown.dts-mega-open .dts-mega-menu {
    display: flex;
}

/* ── Mini dropdown (logged-in Billing / Support nav) ───────────────────── */

.dts-nav-dropdown:has(.dts-nav-mini-menu) {
    position: relative;
}

.dts-nav-mini-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--dts-bg);
    border: 1px solid var(--dts-border);
    border-radius: var(--dts-radius);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    padding: 6px 0;
    z-index: 1050;
    display: none;
    flex-direction: column;
    min-width: 190px;
    margin-top: 0;
}

.dts-nav-mini-menu::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    height: 12px;
}

.dts-nav-dropdown:focus-within .dts-nav-mini-menu,
.dts-nav-dropdown.dts-mega-open .dts-nav-mini-menu {
    display: flex;
}

.dts-nav-mini-menu .dropdown-item {
    padding: 8px 16px;
    font-size: var(--dts-font-size-sm);
    color: var(--dts-text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.dts-nav-mini-menu .dropdown-item i {
    color: var(--dts-text-secondary);
    width: 16px;
    text-align: center;
}

.dts-nav-mini-menu .dropdown-item:hover {
    background-color: var(--dts-bg-alt);
    color: var(--dts-primary);
}

.dts-nav-mini-menu .dropdown-item:hover i {
    color: var(--dts-primary);
}

/* Header row inside mega menu */
.dts-mega-header {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--dts-border);
}

.dts-mega-header-title {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--dts-primary);
    margin: 0 0 4px;
}

.dts-mega-header-lead {
    font-size: 0.9rem;
    color: var(--dts-primary);
    margin: 0;
    line-height: 1.45;
}

/* Cards row */
.dts-mega-cards {
    display: flex;
    gap: 10px;
}

.dts-mega-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex: 1;
    padding: 18px 20px;
    border-radius: var(--dts-radius);
    text-decoration: none !important;
    transition: background var(--dts-transition-fast), border-color var(--dts-transition-fast);
    border: 1px solid transparent;
}

.dts-mega-item:hover {
    background-color: var(--dts-bg-alt);
    border-color: var(--dts-border);
    text-decoration: none !important;
}

.dts-mega-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--dts-radius);
    background: linear-gradient(135deg, #e8f0fe 0%, #d2e3fc 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.35rem;
    color: var(--dts-primary);
}

.dts-mega-icon--google {
    background: linear-gradient(135deg, #fce8e6 0%, #fde8d0 100%);
    color: #ea4335;
}

.dts-mega-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dts-mega-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--dts-primary) !important;
    line-height: 1.2;
}

.dts-mega-desc {
    font-size: 0.8375rem;
    color: var(--dts-text-secondary) !important;
    font-weight: 400;
    line-height: 1.45;
    white-space: normal;
}

/* ── Hosting mega menu ─────────────────────────────────────────────────── */

.dts-mega-menu--hosting {
    width: 900px;
}

/* ── Domains mega menu ─────────────────────────────────────────────────── */

.dts-mega-menu--domains {
    width: 1000px;
}

.dts-mega-icon--wp {
    background: linear-gradient(135deg, #e8f3fb 0%, #c8dff5 100%);
    color: #21759b;
}

.dts-mega-icon--muted {
    background: var(--dts-bg-alt);
    color: var(--dts-text-muted);
}

.dts-mega-item--benefit {
    cursor: default;
    pointer-events: none;
}

.dts-mega-item--soon {
    opacity: 0.82;
    cursor: default;
    pointer-events: none;
}

.dts-mega-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: #fff3e6;
    color: #c2410c;
    border: 1px solid #fde8c8;
    border-radius: var(--dts-radius-pill);
    padding: 1px 7px;
    vertical-align: middle;
    margin-left: 6px;
    line-height: 1.6;
}

.dts-mobile-badge {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    background: #fff3e6;
    color: #c2410c;
    border: 1px solid #fde8c8;
    border-radius: var(--dts-radius-pill);
    padding: 1px 6px;
    margin-left: 4px;
    vertical-align: middle;
}

.dts-nav-mobile-sub--soon > a.nav-link {
    opacity: 0.75;
}

.dts-mega-menu--contact {
    width: 1000px;
}

.dts-mega-contact-grid {
    display: flex;
    gap: 0;
}

.dts-mega-contact-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dts-mega-col-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--dts-text-muted);
    margin: 0 0 6px 16px;
}

.dts-mega-contact-divider {
    width: 1px;
    background-color: var(--dts-border);
    margin: 0 12px;
    flex-shrink: 0;
}

.dts-mega-item--wide {
    padding: 12px 16px;
}

/* Icon colour variants */
.dts-mega-icon--green {
    background: linear-gradient(135deg, #e6f9f0 0%, #c8f0db 100%);
    color: #1a7a4a;
}

.dts-mega-icon--amber {
    background: linear-gradient(135deg, #fff8e6 0%, #feefc3 100%);
    color: #b45309;
}

.dts-mega-icon--purple {
    background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
    color: #7c3aed;
}

.dts-mega-icon--orange {
    background: linear-gradient(135deg, #fff3e6 0%, #fde8c8 100%);
    color: #c2410c;
}

.dts-mega-icon--teal {
    background: linear-gradient(135deg, #e6fafa 0%, #c8eef0 100%);
    color: #0f766e;
}

/* ── Mobile accordion nav ──────────────────────────────────────────────── */

.dts-mob-acc {
    list-style: none;
    border-bottom: 1px solid var(--dts-border);
}

.dts-mob-acc-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    padding: 14px 16px;
    cursor: pointer;
    text-align: left;
}

.dts-mob-acc-label {
    font-size: 16px;
    font-weight: 600;
    color: var(--dts-primary) !important;
    font-family: var(--dts-font-family);
    text-decoration: none;
    flex: 1;
}

.dts-mob-acc-label:hover {
    color: var(--dts-accent) !important;
    text-decoration: none;
}

.dts-mob-acc-chevron {
    color: var(--dts-text-muted);
    font-size: 0.7rem;
    transition: transform 0.2s ease;
    margin-left: 8px;
    flex-shrink: 0;
}

.dts-mob-acc-toggle.is-open .dts-mob-acc-chevron {
    transform: rotate(180deg);
}

.dts-mob-acc-sub {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
    background: var(--dts-bg-alt);
}

.dts-mob-sub-link {
    display: block;
    padding: 11px 16px 11px 28px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--dts-primary) !important;
    text-decoration: none;
    transition: var(--dts-transition-fast);
}

.dts-mob-sub-link:hover {
    color: var(--dts-accent) !important;
    text-decoration: none;
}

.dts-mob-sub-link i {
    width: 1.2em;
    text-align: center;
    margin-right: 6px;
    color: var(--dts-accent);
    font-size: 0.85em;
}

.dts-mob-sub-soon .dts-mob-sub-link {
    opacity: 0.6;
    pointer-events: none;
}

/* Mobile sub-items under Email / Contact */
.dts-nav-mobile-sub > a.nav-link {
    padding-left: 32px !important;
    font-size: 15px !important;
    color: var(--dts-text-secondary) !important;
    font-weight: 400 !important;
}

.dts-nav-mobile-sub > a.nav-link i {
    width: 1.15em;
    text-align: center;
    margin-right: 5px;
    color: var(--dts-accent);
}

/* ── Google Workspace page — trust bar app grid ─────────────────────────── */

.dts-gws-trust-bar {
    padding-top: 28px;
    padding-bottom: 28px;
    text-align: center;
}

.dts-gws-trust-label {
    font-size: var(--dts-font-size-sm);
    color: var(--dts-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
    margin-bottom: 20px;
}

.dts-gws-app-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px 32px;
}

.dts-gws-app {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: var(--dts-font-size-sm);
    color: var(--dts-text-secondary);
    font-weight: 500;
}

.dts-gws-app i {
    font-size: 1.6rem;
    color: var(--dts-accent);
}

/* ── Domain transfer steps ─────────────────────────────────────────────── */

.dts-transfer-step {
    padding: 12px;
}

.dts-transfer-step-num {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e8f0fe 0%, #d2e3fc 100%);
    color: var(--dts-primary);
    font-size: 1.4rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.dts-transfer-step-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--dts-primary);
    margin-bottom: 8px;
}

.dts-transfer-step-text {
    font-size: 0.9rem;
    color: var(--dts-text-secondary);
    line-height: 1.6;
}

.dts-hosting-hub-card {
    background: var(--dts-bg);
    border: 1px solid var(--dts-border);
    border-radius: var(--dts-radius-lg);
    padding: 32px 28px;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
}

.dts-hosting-hub-card--soon {
    opacity: 0.82;
}

.dts-hosting-hub-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: #fff3e6;
    color: #c2410c;
    border: 1px solid #fde8c8;
    border-radius: var(--dts-radius-pill);
    padding: 3px 10px;
}

.dts-hosting-hub-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--dts-radius);
    background: linear-gradient(135deg, #e8f0fe 0%, #d2e3fc 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--dts-primary);
    margin-bottom: 18px;
    flex-shrink: 0;
}

.dts-hosting-hub-icon--teal {
    background: linear-gradient(135deg, #e6fafa 0%, #c8eef0 100%);
    color: #0f766e;
}

.dts-hosting-hub-icon--muted {
    background: var(--dts-bg-alt);
    color: var(--dts-text-muted);
}

.dts-hosting-hub-icon--amber {
    background: linear-gradient(135deg, #fff8e6 0%, #feefc3 100%);
    color: #b45309;
}

.dts-hosting-hub-icon--google {
    background: linear-gradient(135deg, #fce8e6 0%, #fde8d0 100%);
    color: #ea4335;
}

.dts-hosting-hub-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--dts-primary);
    margin-bottom: 10px;
}

.dts-hosting-hub-desc {
    font-size: 0.9rem;
    color: var(--dts-text-secondary);
    line-height: 1.6;
    margin-bottom: 20px;
    flex-grow: 1;
}

/* ── Email comparison table ────────────────────────────────────────────── */

.dts-email-compare-table {
    border: 1px solid var(--dts-border);
    border-radius: var(--dts-radius-lg);
    overflow: hidden;
}

.dts-email-compare-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-bottom: 1px solid var(--dts-border);
}

.dts-email-compare-row:last-child {
    border-bottom: none;
}

.dts-email-compare-header {
    background: var(--dts-bg-alt);
}

.dts-email-compare-cell {
    padding: 14px 20px;
    font-size: 0.9rem;
    color: var(--dts-text);
    border-right: 1px solid var(--dts-border);
    display: flex;
    align-items: center;
}

.dts-email-compare-cell:last-child {
    border-right: none;
}

.dts-email-compare-header .dts-email-compare-cell {
    font-weight: 700;
    color: var(--dts-primary);
    font-size: 0.95rem;
}

.dts-compare-yes {
    color: #1a7a4a;
    font-size: 1rem;
}

.dts-compare-no {
    color: var(--dts-text-muted);
    font-size: 1rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DEDICATED LOGIN PAGE  (login.tpl)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Strip any browser/Bootstrap margin so the page truly fills the viewport */
html:has(.dts-login-page),
.dts-login-page {
    margin: 0;
    padding: 0;
}

/* Full-viewport split layout — no header/footer, fills the screen exactly */
.dts-login-page {
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100vh;
    width: 100vw;
}

.dts-login-wrap {
    display: flex;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

/* ── Left branding panel ─────────────────────────────────────────────────── */

.dts-login-brand {
    flex: 0 0 52%;
    background: linear-gradient(150deg, var(--dts-primary) 0%, var(--dts-blue-700) 50%, var(--dts-blue-900) 100%);
    display: flex;
    align-items: stretch;
    position: relative;
    overflow: hidden;
    height: 100vh;
}

/* Subtle geometric overlay */
.dts-login-brand::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 80%, rgba(255,255,255,0.04) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255,255,255,0.06) 0%, transparent 45%);
    pointer-events: none;
}

.dts-login-brand-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 56px 56px 48px;
    width: 100%;
    margin-top: -110px;
}

.dts-login-logo-link {
    display: inline-block;
    text-decoration: none;
}

.dts-login-brandmark {
    height: 56px;
    width: auto;
    margin-bottom: 36px;
    display: block;
}

.dts-login-logo-text {
    color: var(--dts-text-inverted);
    font-family: var(--dts-font-family);
    font-weight: 700;
    font-size: 1.4rem;
    letter-spacing: -0.02em;
}

.dts-login-brand-copy {
    margin-top: 0;
}

.dts-login-brand-headline {
    color: var(--dts-text-inverted);
    font-size: clamp(2rem, 3vw, 2.75rem);
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
}

.dts-login-brand-lead {
    color: rgba(255, 255, 255, 0.80);
    font-size: 1.05rem;
    line-height: 1.65;
    max-width: 380px;
    margin-bottom: 0;
}

.dts-login-trust {
    list-style: none;
    padding: 0;
    margin: 40px 0 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dts-login-trust li {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.9375rem;
    display: flex;
    align-items: center;
    gap: 12px;
}

.dts-login-trust li .fas {
    color: rgba(255, 255, 255, 0.55);
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.dts-login-brand-footer {
    margin-top: 56px;
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.dts-login-brand-footer span[aria-hidden] {
    color: rgba(255, 255, 255, 0.30);
}

.dts-login-brand-footer-link {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.8125rem;
    text-decoration: none;
    transition: var(--dts-transition-fast);
}

.dts-login-brand-footer-link:hover {
    color: rgba(255, 255, 255, 0.90);
    text-decoration: none;
}

/* ── Right form panel ────────────────────────────────────────────────────── */

.dts-login-form-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 32px;
    background: var(--dts-bg);
    overflow-y: auto;
    height: 100vh;
}

.dts-login-form-inner {
    width: 100%;
    max-width: 420px;
}

/* Colour logo above the form (always visible) */
.dts-login-form-logo-link {
    display: inline-block;
    text-decoration: none;
    margin-bottom: 28px;
}

.dts-login-form-logo {
    max-height: 40px;
    width: auto;
}

.dts-login-logo-text--form {
    color: var(--dts-primary);
    font-size: 1.25rem;
    font-weight: 700;
}

/* Form header */
.dts-login-form-header {
    margin-bottom: 32px;
}

.dts-login-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--dts-text);
    margin-bottom: 6px;
    letter-spacing: -0.02em;
}

.dts-login-subtitle {
    color: var(--dts-text-secondary);
    font-size: 0.9375rem;
    margin-bottom: 0;
}

/* Fields */
.dts-login-field {
    margin-bottom: 20px;
}

.dts-login-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--dts-text);
    margin-bottom: 6px;
}

.dts-login-label-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
}

.dts-login-forgot {
    font-size: 0.8125rem;
    color: var(--dts-accent);
    text-decoration: none;
    transition: var(--dts-transition-fast);
}

.dts-login-forgot:hover {
    color: var(--dts-primary);
    text-decoration: none;
}

.dts-login-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.dts-login-input-icon {
    position: absolute;
    left: 14px;
    color: var(--dts-text-muted);
    font-size: 0.875rem;
    pointer-events: none;
    z-index: 2;
}

.dts-login-input {
    width: 100%;
    height: 48px;
    padding: 0 44px 0 40px;
    font-size: 0.9375rem;
    border: 1.5px solid var(--dts-border-input);
    border-radius: var(--dts-radius);
    background: var(--dts-bg);
    color: var(--dts-text);
    transition: var(--dts-transition-fast);
    box-shadow: none;
}

.dts-login-input:focus {
    outline: none;
    border-color: var(--dts-border-focus);
    box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.15);
    background: var(--dts-bg);
}

.dts-login-input::placeholder {
    color: var(--dts-text-muted);
}

.dts-login-reveal {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    padding: 0;
    color: var(--dts-text-muted);
    cursor: pointer;
    font-size: 0.875rem;
    transition: var(--dts-transition-fast);
    z-index: 2;
    line-height: 1;
}

.dts-login-reveal:hover {
    color: var(--dts-text);
}

/* Captcha */
.dts-login-captcha {
    margin-bottom: 20px;
}

/* Actions row */
.dts-login-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 8px;
}

.dts-login-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    margin: 0;
}

.dts-login-checkbox {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: var(--dts-primary);
    cursor: pointer;
}

.dts-login-remember-text {
    font-size: 0.875rem;
    color: var(--dts-text-secondary);
    user-select: none;
}

.dts-login-submit {
    flex-shrink: 0;
    height: 48px;
    padding: 0 28px;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: var(--dts-radius);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
}

/* Register link */
.dts-login-register {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--dts-border);
    text-align: center;
}

.dts-login-register-text {
    color: var(--dts-text-secondary);
    font-size: 0.875rem;
    margin-right: 6px;
}

.dts-login-register-link {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--dts-accent);
    text-decoration: none;
    transition: var(--dts-transition-fast);
}

.dts-login-register-link:hover {
    color: var(--dts-primary);
    text-decoration: none;
}

/* Back link */
.dts-login-back {
    margin-top: 20px;
    text-align: center;
}

.dts-login-back-link {
    font-size: 0.8125rem;
    color: var(--dts-text-muted);
    text-decoration: none;
    transition: var(--dts-transition-fast);
}

.dts-login-back-link:hover {
    color: var(--dts-text-secondary);
    text-decoration: none;
}

/* Flash messages inside the login panel */
.dts-login-form-inner .alert {
    border-radius: var(--dts-radius);
    font-size: 0.875rem;
    margin-bottom: 20px;
}

/* Third-party linked accounts */
.dts-login-form-inner .provider-links {
    margin-top: 24px;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

/* Tablet: hide brand panel, full-width form */
@media (max-width: 1199.98px) {
    .dts-login-brand {
        display: none;
    }

    .dts-login-form-panel {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Mobile: reduce padding */
@media (max-width: 575.98px) {
    .dts-login-form-panel {
        padding: 32px 20px;
        align-items: flex-start;
    }

    .dts-login-form-inner {
        max-width: 100%;
    }

    .dts-login-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .dts-login-submit {
        width: 100%;
        justify-content: center;
    }

    .dts-login-remember {
        justify-content: center;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   Announcements
   ───────────────────────────────────────────────────────────────────────── */

.dts-announcement-card {
    background: var(--dts-card-bg);
    border: 1px solid var(--dts-border);
    border-radius: var(--dts-border-radius);
    padding: 24px 28px;
    box-shadow: var(--dts-shadow-sm);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.dts-announcement-card:hover {
    box-shadow: var(--dts-shadow-md);
    border-color: var(--dts-primary);
}

/* Announcement items inside a dts-sidebar-card */
.dts-announcement-item {
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--dts-border);
}

.dts-announcement-item:last-child {
    border-bottom: none;
}

.dts-announcement-cta {
    margin-top: 12px;
}

.dts-announcement-meta {
    margin-bottom: 10px;
}

.dts-announcement-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 0 12px 0;
    color: var(--dts-text-primary);
}

.dts-announcement-title a {
    color: inherit;
    text-decoration: none;
}

.dts-announcement-title a:hover {
    color: var(--dts-primary);
}

.dts-announcement-excerpt {
    font-size: var(--dts-font-size-sm);
    color: var(--dts-text-secondary);
    line-height: 1.65;
    margin-bottom: 16px;
}

.dts-announcement-footer {
    border-top: 1px solid var(--dts-border);
    padding-top: 14px;
    margin-top: 4px;
}

/* View announcement */
.dts-announcement-view-meta {
    margin-top: 4px;
}

.dts-announcement-body {
    font-size: 15px;
    line-height: 1.7;
    color: var(--dts-text-primary);
    padding: 4px 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   Support ticket list
   ───────────────────────────────────────────────────────────────────────── */

.dts-tickets-table {
    font-size: var(--dts-font-size-sm);
}

.dts-tickets-table thead th {
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--dts-text-muted);
    padding: 9px 14px;
    border-bottom: 2px solid var(--dts-border);
    background: var(--dts-bg-secondary);
}

.dts-tickets-table tbody td {
    padding: 9px 14px;
    vertical-align: middle;
    border-bottom: 1px solid var(--dts-border);
}

.dts-ticket-row:hover td {
    background: var(--dts-bg-secondary);
}

.dts-ticket-number {
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    letter-spacing: 0.02em;
}

.dts-ticket-title {
    font-weight: 500;
    color: var(--dts-text-primary);
}

.dts-ticket-unread {
    font-weight: 700;
    color: var(--dts-primary);
}

.dts-ticket-subject a {
    color: inherit;
    text-decoration: none;
}

.dts-ticket-subject a:hover .dts-ticket-title {
    color: var(--dts-primary);
}

.dts-ticket-badge.label {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* ─────────────────────────────────────────────────────────────────────────
   Ticket submit step 1 — department cards
   ───────────────────────────────────────────────────────────────────────── */

.dts-dept-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--dts-card-bg);
    border: 1px solid var(--dts-border);
    border-radius: var(--dts-border-radius);
    padding: 18px 22px;
    margin-bottom: 12px;
    text-decoration: none;
    color: var(--dts-text-primary);
    box-shadow: var(--dts-shadow-sm);
    transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.dts-dept-card:hover {
    border-color: var(--dts-primary);
    box-shadow: var(--dts-shadow-md);
    transform: translateY(-1px);
    color: var(--dts-text-primary);
    text-decoration: none;
}

.dts-dept-icon {
    width: 40px;
    height: 40px;
    background: var(--dts-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    font-size: 16px;
}

.dts-dept-info {
    flex: 1;
    min-width: 0;
}

.dts-dept-name {
    display: block;
    font-weight: 600;
    font-size: 15px;
    color: var(--dts-text-primary);
}

.dts-dept-desc {
    display: block;
    font-size: var(--dts-font-size-sm);
    color: var(--dts-text-muted);
    margin-top: 3px;
    line-height: 1.45;
}

.dts-dept-arrow {
    margin-left: auto;
    flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   View ticket — reply thread
   ───────────────────────────────────────────────────────────────────────── */

.dts-ticket-view-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.dts-ticket-view-actions {
    flex-shrink: 0;
    padding-top: 2px;
}

.dts-ticket-reply {
    background: var(--dts-card-bg);
    border: 1px solid var(--dts-border);
    border-radius: var(--dts-border-radius);
    overflow: hidden;
    box-shadow: var(--dts-shadow-sm);
}

.dts-ticket-reply--staff {
    border-left: 3px solid var(--dts-primary);
    background: color-mix(in srgb, var(--dts-primary) 4%, var(--dts-card-bg));
}

.dts-ticket-reply-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 18px;
    background: var(--dts-bg-secondary);
    border-bottom: 1px solid var(--dts-border);
    flex-wrap: wrap;
}

.dts-ticket-reply-meta {
    font-size: var(--dts-font-size-sm);
    color: var(--dts-text-secondary);
}

.dts-ticket-author {
    color: var(--dts-text-primary);
    font-size: 14px;
}

.dts-ticket-date {
    font-size: 12px;
}

.dts-ticket-role-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--dts-bg-tertiary, #e8ecf0);
    color: var(--dts-text-muted);
}

.dts-ticket-role-admin,
.dts-ticket-role-staff {
    background: color-mix(in srgb, var(--dts-primary) 15%, transparent);
    color: var(--dts-primary-dark, var(--dts-primary));
}

.dts-ticket-reply-body {
    padding: 18px 20px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--dts-text-primary);
}

.dts-ticket-reply-attachments {
    padding: 12px 20px;
    background: var(--dts-bg-secondary);
    border-top: 1px solid var(--dts-border);
}

.dts-ticket-attachment-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--dts-text-muted);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dts-ticket-attachment-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dts-ticket-attachment {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 4px;
    background: var(--dts-card-bg);
    border: 1px solid var(--dts-border);
    font-size: 12px;
    color: var(--dts-text-secondary);
    text-decoration: none;
    transition: border-color 0.15s;
}

.dts-ticket-attachment:hover {
    border-color: var(--dts-primary);
    color: var(--dts-primary);
}

.dts-ticket-attachment--removed {
    opacity: 0.5;
    text-decoration: line-through;
    cursor: default;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Legal pages — Privacy Policy & Terms of Service
   ───────────────────────────────────────────────────────────────────────────── */

/* Plain page title header (no gradient) */
.dts-legal-page-meta {
    font-size: 0.8125rem;
    color: var(--dts-text-secondary);
    margin: 0;
    flex-shrink: 0;
}

/* TOC anchor links inside sidebar card */
.dts-legal-toc-link .dts-sidebar-nav-label {
    font-size: 0.8125rem;
    font-weight: 400;
}

/* Document wrapper */
.dts-legal-doc {
    font-size: 0.9375rem;
    line-height: 1.75;
    color: var(--dts-text-primary);
}

/* Section spacing */
.dts-legal-section {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--dts-border-color, rgba(0,0,0,0.08));
}

.dts-legal-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Headings */
.dts-legal-section h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--dts-heading-color, var(--dts-text-primary));
    margin-bottom: 0.75rem;
    scroll-margin-top: calc(var(--dts-header-h, 110px) + 8px);
}

.dts-legal-section h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
    color: var(--dts-text-primary);
}

.dts-legal-section p,
.dts-legal-section ul,
.dts-legal-section ol {
    margin-bottom: 0.875rem;
}

.dts-legal-section ul,
.dts-legal-section ol {
    padding-left: 1.5rem;
}

.dts-legal-section li {
    margin-bottom: 0.375rem;
}

/* Address block */
.dts-legal-address {
    display: block;
    font-style: normal;
    background: var(--dts-bg-alt, #f8f9fa);
    border-left: 3px solid var(--dts-primary);
    padding: 1rem 1.25rem;
    border-radius: 0 var(--dts-radius, 6px) var(--dts-radius, 6px) 0;
    margin-top: 0.75rem;
    line-height: 1.8;
}

/* In-page TOC column */
.dts-legal-toc-col {
    margin-bottom: 2rem;
}

/* TOC card */
.dts-legal-toc {
    background: var(--dts-bg-alt, #f8f9fa);
    border: 1px solid var(--dts-border-color, rgba(0,0,0,0.08));
    border-radius: var(--dts-radius, 6px);
    padding: 1.25rem 1.25rem 1rem;
}

.dts-legal-toc-heading {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--dts-text-secondary);
    margin-bottom: 0.75rem;
}

.dts-legal-toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dts-legal-toc-list li {
    margin-bottom: 0;
}

.dts-legal-toc-list a {
    display: block;
    padding: 0.3rem 0.25rem;
    font-size: 0.875rem;
    color: var(--dts-text-secondary);
    text-decoration: none;
    border-left: 2px solid transparent;
    padding-left: 0.75rem;
    transition: color 0.15s, border-color 0.15s;
    line-height: 1.4;
}

.dts-legal-toc-list a:hover {
    color: var(--dts-primary);
    border-left-color: var(--dts-primary);
}

/* Tighten TOC on mobile */
@media (max-width: 991.98px) {
    .dts-legal-toc-col {
        margin-bottom: 1.5rem;
    }
}

/* ── Service & Domain detail pages ─────────────────────────────────────── */

/* Remove legacy twenty-one margin-bottom on the outer tab-content wrapper */
.tab-content.margin-bottom {
    margin-bottom: 0 !important;
}

/* Space between stacked cards on detail pages */
.tab-content > .tab-pane > .card,
.tab-content > .tab-pane > div > .card {
    margin-bottom: 20px;
}
.tab-content > .tab-pane > .card:last-child {
    margin-bottom: 0;
}

/* Detail page nav tabs — DTS style */
.tab-content .nav-tabs.responsive-tabs-sm,
ul.nav-tabs.responsive-tabs-sm {
    border-bottom: 2px solid var(--dts-border);
    margin-top: 20px;
    margin-bottom: 0;
    gap: 4px;
}

.tab-content .nav-tabs.responsive-tabs-sm .nav-link,
ul.nav-tabs.responsive-tabs-sm .nav-link {
    font-size: var(--dts-font-size-sm);
    font-weight: 500;
    color: var(--dts-text-secondary);
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: var(--dts-radius) var(--dts-radius) 0 0;
    padding: 8px 16px;
    margin-bottom: -2px;
    transition: color 0.15s, background 0.15s;
}

.tab-content .nav-tabs.responsive-tabs-sm .nav-link:hover,
ul.nav-tabs.responsive-tabs-sm .nav-link:hover {
    color: var(--dts-primary);
    background: var(--dts-bg-alt);
    border-color: var(--dts-border) var(--dts-border) transparent;
}

.tab-content .nav-tabs.responsive-tabs-sm .nav-link.active,
ul.nav-tabs.responsive-tabs-sm .nav-link.active {
    color: var(--dts-primary);
    background: var(--dts-bg);
    border-color: var(--dts-border) var(--dts-border) var(--dts-bg);
    font-weight: 600;
}

/* Tab panel content area below the tabs */
.product-details-tab-container {
    border: 1px solid var(--dts-border);
    border-top: none;
    border-radius: 0 0 var(--dts-radius) var(--dts-radius);
    padding: 20px 24px;
    background: var(--dts-bg);
}

/* Hide the decorative connector WHMCS outputs between tabs and panel */
.responsive-tabs-sm-connector {
    display: none !important;
}

/* Product status icon block */
.product-status {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
}

.product-icon {
    flex-shrink: 0;
}

.product-icon .fa-stack {
    font-size: 1.4rem;
}

.product-status h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: var(--dts-text);
}

.product-status h4 {
    font-size: var(--dts-font-size-sm);
    font-weight: 400;
    color: var(--dts-text-secondary);
    margin: 2px 0 0;
}

.product-status-text {
    margin-top: 8px;
}

/* Product action buttons */
.product-actions-wrapper {
    margin-top: 16px;
}

.product-actions-wrapper .btn {
    margin-bottom: 8px;
}

/* Detail page key-value rows */
.product-details .col-md-6 h4,
.clientareadomaindetails h5 {
    font-size: var(--dts-font-size-sm);
    font-weight: 600;
    color: var(--dts-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 16px 0 4px;
}

.product-details .col-md-6 h4:first-child,
.clientareadomaindetails h5:first-child {
    margin-top: 0;
}

/* Domain detail overview rows */
.clientareadomaindetails .row.mb-3 {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--dts-border);
}

.clientareadomaindetails .row.mb-3:last-of-type {
    border-bottom: none;
}

/* "Do Today" quick-action list */
.card-title + ul {
    padding-left: 20px;
    margin-top: 8px;
}

.card-title + ul li {
    margin-bottom: 6px;
    font-size: var(--dts-font-size-sm);
}

.card-title + ul li a {
    color: var(--dts-primary);
}

/* Module output area */
.moduleoutput {
    padding: 12px 0;
}

/* Hide module's own h2 title — card header replaces it */
.dts-sidebar-card-body .module-client-area h2:first-child,
.dts-sidebar-card-body > h2:first-child {
    display: none;
}

/* Addons card accent */
.card.bg-default.card-accent-blue {
    border-top: 3px solid var(--dts-primary);
}

/* Domain sub-page input-group suffix (.domain) */
.dts-sidebar-card-body .input-group-text {
    padding-top: 0;
    padding-bottom: 0;
    font-size: var(--dts-font-size-sm);
    height: calc(1.5em + 0.75rem + 2px);
    line-height: 1.5;
}

/* ── Product detail hero banner ─────────────────────────────────────────── */
.dts-product-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--dts-primary) 0%, #1a3a5c 100%);
    border-radius: 8px;
    color: #fff;
}

.dts-product-hero-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    background: rgba(255,255,255,0.15);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.dts-product-hero-info {
    flex: 1;
    min-width: 0;
}

.dts-product-hero-name {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dts-product-hero-group {
    font-size: var(--dts-font-size-sm);
    opacity: 0.75;
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dts-product-hero-status {
    flex-shrink: 0;
}

.dts-product-hero-actions {
    flex-shrink: 0;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Product billing info grid ──────────────────────────────────────────── */
.dts-product-billing-grid {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid var(--dts-border);
    border-radius: 6px;
    overflow: hidden;
    background: var(--dts-border);
    gap: 1px;
}

.dts-billing-item {
    display: flex;
    flex-direction: column;
    padding: 8px 14px;
    flex: 1 1 140px;
    background: #fff;
}

.dts-billing-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--dts-text-secondary);
    margin-bottom: 2px;
    white-space: nowrap;
}

.dts-billing-value {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--dts-text-primary);
}

.dts-billing-value--warn {
    color: #dc3545;
}

/* ── Pro Email (OX) manage page ─────────────────────────────────────────── */
.ox-table-accounts {
    margin-bottom: 0;
}

.ox-table-accounts thead th {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--dts-text-secondary);
    border-top: none;
    padding: 8px 12px;
}

.ox-table-accounts tbody tr td {
    padding: 10px 12px;
    vertical-align: middle;
    font-size: 0.875rem;
}

/* Full email address on one line, no box around username */
.ox-table-accounts span.account {
    display: inline;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-weight: 600;
    border-radius: 0 !important;
    font-size: inherit;
}

.ox-table-accounts td:first-child {
    white-space: nowrap;
}

.ox-account-email {
    font-size: 0.875rem;
    white-space: nowrap;
}

.ox-account-aliases {
    font-size: 0.75rem;
    color: var(--dts-text-secondary);
    margin-top: 2px;
}

.ox-table-accounts .email-aliases {
    font-size: 0.75rem;
    color: var(--dts-text-secondary);
}

/* Button group — replace Delete red with subtle outline */
.ox-table-accounts .btn-danger.ox-delete {
    background: transparent;
    border-color: var(--dts-border);
    color: var(--dts-text-secondary);
    font-size: 0.8rem;
}

.ox-table-accounts .btn-danger.ox-delete:hover {
    border-color: #dc3545;
    color: #dc3545;
    background: transparent;
}

.ox-table-accounts .btn-default {
    font-size: 0.8rem;
}

/* Account count line */
#accountCount {
    font-size: 0.85rem;
    color: var(--dts-text-secondary);
    margin-bottom: 8px;
}
.dts-cancel-row {
    margin-top: 12px;
    text-align: right;
}

.dts-cancel-link {
    font-size: var(--dts-font-size-sm);
    color: var(--dts-text-secondary);
    text-decoration: none;
    opacity: 0.7;
    transition: opacity 0.15s, color 0.15s;
}

.dts-cancel-link:hover {
    opacity: 1;
    color: #dc3545;
    text-decoration: none;
}

.dts-cancel-link i {
    margin-right: 4px;
}

.dts-cancel-link.disabled {
    pointer-events: none;
    opacity: 0.4;
}

/* ── Upgrade product cards ──────────────────────────────────────────────── */
.dts-upgrade-product-card {
    border: 1px solid var(--dts-border);
    border-radius: 8px;
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    transition: box-shadow 0.15s;
}

.dts-upgrade-product-card:hover {
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.dts-upgrade-product-card.dts-upgrade-current {
    border-color: var(--dts-primary);
    background: #f7faff;
}

.dts-upgrade-product-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.dts-upgrade-product-name {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    color: var(--dts-text-primary);
}

.dts-upgrade-product-desc {
    font-size: 0.85rem;
    color: var(--dts-text-secondary);
    margin-bottom: 12px;
}

.dts-upgrade-feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    flex: 1;
}

.dts-upgrade-feature-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px solid var(--dts-border);
    font-size: 0.85rem;
}

.dts-upgrade-feature-list li:last-child {
    border-bottom: none;
}

.dts-upgrade-product-footer {
    margin-top: auto;
}

/* ── Cart / Shop / Checkout utilities ───────────────────────────────────── */

/* Order summary card wrapper (configure step + view-cart sidebar) */
.dts-order-summary-card {
    background: var(--dts-bg);
    border: 1px solid var(--dts-border);
    border-radius: var(--dts-radius);
    padding: 16px;
}

.dts-order-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: var(--dts-font-size-sm);
    padding: 3px 0;
}

.dts-order-summary-row.total {
    font-weight: 600;
    font-size: 1rem;
    border-top: 1px solid var(--dts-border);
    margin-top: 6px;
    padding-top: 8px;
}

/* Trust signals list in cart sidebar */
.dts-trust-signals {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--dts-border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dts-trust-signal {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--dts-font-size-sm);
    color: var(--dts-text-muted);
}

.dts-trust-signal .fas.success  { color: var(--dts-success); font-size: 0.9rem; }
.dts-trust-signal .fas.primary  { color: var(--dts-primary); font-size: 0.9rem; }
.dts-trust-signal .fas.accent   { color: var(--dts-accent);  font-size: 0.9rem; }

/* Trust row under checkout submit button */
.dts-checkout-trust-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 14px;
}

.dts-checkout-trust-item {
    font-size: var(--dts-font-size-sm);
    color: var(--dts-text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
}

.dts-checkout-security-note {
    margin: 10px 0 0;
    text-align: center;
    font-size: var(--dts-font-size-sm);
    color: var(--dts-text-muted);
}

/* Logged-in banner at top of checkout */
.dts-checkout-logged-in-banner {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #93c5fd;
    border-left: 4px solid var(--dts-info);
    border-radius: var(--dts-radius);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--dts-text);
    margin-bottom: 16px;
}

/* Payment gateway option tiles */
.dts-gateway-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.dts-gateway-option {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--dts-border);
    border-radius: var(--dts-radius);
    padding: 10px 16px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    background: var(--dts-bg);
    font-size: 0.9rem;
    color: var(--dts-text);
    user-select: none;
}

.dts-gateway-option:hover {
    border-color: var(--dts-primary);
    background: #f0f6ff;
}

.dts-gateway-option input[type="radio"] {
    accent-color: var(--dts-primary);
}

.dts-gateway-option.selected {
    border-color: var(--dts-primary);
    background: #eff6ff;
}

/* Shop CTA icon spacing */
.dts-plan-cta-icon {
    margin-right: 6px;
}

/* Order complete success card */
.dts-order-success-card {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1px solid #86efac;
    border-radius: var(--dts-radius);
    padding: 32px 24px;
    text-align: center;
    margin-bottom: 24px;
}

.dts-order-success-icon {
    font-size: 3rem;
    color: var(--dts-success);
    margin-bottom: 12px;
}

.dts-order-success-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dts-text);
    margin-bottom: 6px;
}

.dts-order-success-number {
    font-size: 1rem;
    color: var(--dts-text-secondary);
}

.dts-order-success-number strong {
    color: var(--dts-primary);
}

/* What happens next steps */
.dts-next-steps {
    list-style: none;
    padding: 0;
    margin: 24px auto;
    max-width: 480px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dts-next-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.9rem;
    color: var(--dts-text);
}

.dts-next-step-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--dts-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.dts-next-step-text strong {
    display: block;
    font-weight: 600;
    margin-bottom: 2px;
}

.dts-order-cta-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

/* Configure product — addon cards */
.dts-configure-addon-card {
    border: 1px solid var(--dts-border);
    border-radius: var(--dts-radius);
    padding: 14px 16px;
    background: var(--dts-bg);
    transition: border-color 0.15s, background 0.15s;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
}

.dts-configure-addon-card:hover {
    border-color: var(--dts-primary);
    background: #f7faff;
}

.dts-configure-addon-card.selected {
    border-color: var(--dts-primary);
    background: #eff6ff;
}

.dts-configure-addon-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--dts-text);
}

.dts-configure-addon-desc {
    font-size: 0.82rem;
    color: var(--dts-text-secondary);
    flex: 1;
}

.dts-configure-addon-price {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--dts-primary);
}

/* Billing cycle toggle group (configure product step) */
.dts-billing-cycle-toggle {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.dts-billing-cycle-btn {
    border: 1px solid var(--dts-border);
    border-radius: var(--dts-radius);
    padding: 8px 16px;
    font-size: 0.875rem;
    cursor: pointer;
    background: var(--dts-bg);
    color: var(--dts-text);
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
}

.dts-billing-cycle-btn:hover {
    border-color: var(--dts-primary);
    background: #f0f6ff;
}

.dts-billing-cycle-btn.active {
    border-color: var(--dts-primary);
    background: var(--dts-primary);
    color: #fff;
}

/* Native checked-state styling fallback (in case JS class sync is delayed) */
.dts-billing-cycle-btn:has(input[type="radio"]:checked) {
    border-color: var(--dts-primary);
    background: var(--dts-primary);
    color: #fff;
}

/* Enforce readable text/icons on selected billing-cycle pill */
.dts-billing-cycle-btn.active,
.dts-billing-cycle-btn.active * {
    color: #fff !important;
}

.dts-billing-cycle-btn input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Hide any iCheck wrappers if they get re-injected by upstream scripts */
#billingCycleToggle .iradio_square-blue,
#billingCycleToggle .icheckbox_square-blue {
    display: none !important;
}

/* ── Stripe assisted-input fields (Add/Edit Payment Method page) ─────────── */

/* Full-width wrapper — undo col-md-8 offset centering */
.frm-credit-card-input .stripe-cards-inputs {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Lay out all three cc-billing-address rows in a 2-column CSS grid:
   row1 (card number) spans both columns,
   row2 (expiry) takes left col,
   row3 (cvv) takes right col                                                */
.frm-credit-card-input #stripeElements {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
    row-gap: 12px;
}

/* Card number row — spans full width */
.frm-credit-card-input #stripeElements .cc-billing-address:nth-child(1) {
    grid-column: 1 / -1;
}

/* Expiry row — left column */
.frm-credit-card-input #stripeElements .cc-billing-address:nth-child(2) {
    grid-column: 1;
}

/* CVV row — right column */
.frm-credit-card-input #stripeElements .cc-billing-address:nth-child(3) {
    grid-column: 2;
}

/* Each row: block, no Bootstrap col sizing, no negative margins */
.frm-credit-card-input .cc-billing-address {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0;
}

/* Labels above fields */
.frm-credit-card-input .cc-billing-address > label {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    padding: 0 0 4px !important;
    margin: 0 !important;
}

/* Field col wrappers — fill full grid cell, no Bootstrap gutter */
.frm-credit-card-input .cc-billing-address > div[class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    flex: none !important;
    min-width: 0;
}

/* Stripe iframe containers fill their wrapper */
.frm-credit-card-input #stripeCreditCard,
.frm-credit-card-input #stripeExpiryDate,
.frm-credit-card-input #stripeCvc {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* ── Stripe checkout cart (frmCheckout) — card 100%, expiry+cvv 50/50 ───── */

/* .stripe-cards-inputs has col-md-8 + col-md-offset-2 — both cause overflow
   inside the narrow aside. Zero out all Bootstrap col sizing. */
#order-standard_cart #stripeElements {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden;
}

#order-standard_cart .stripe-cards-inputs {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;   /* kill offset-md-2 */
    margin-right: 0 !important;
    float: none !important;
    flex: none !important;
}

/* .row inside stripe-cards-inputs — keep margins at 0 */
#order-standard_cart .stripe-cards-inputs .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Card number col (col-md-6) → full width, flush */
#order-standard_cart .stripe-cards-inputs .row > .col-md-6:first-child {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Expiry and CVV (col-md-3 each) → 50% each, same zero padding */
#order-standard_cart .stripe-cards-inputs .row > .col-md-3 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Small gap between expiry and CVV */
#order-standard_cart .stripe-cards-inputs .row > .col-md-3:first-of-type {
    padding-right: 6px !important;
}

#order-standard_cart .stripe-cards-inputs .row > .col-md-3:last-of-type {
    padding-left: 6px !important;
}

/* Stripe iframes fill their columns */
#order-standard_cart #stripeCreditCard,
#order-standard_cart #stripeExpiryDate,
#order-standard_cart #stripeCvc {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
}

/* #newCardSaveSettings (card name field) — also has col offset classes, flush it */
#order-standard_cart #newCardSaveSettings {
    width: 100% !important;
    max-width: 100% !important;
}

#order-standard_cart #newCardSaveSettings .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#order-standard_cart #newCardSaveSettings #inputDescriptionContainer {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    flex: 0 0 100% !important;
    margin-left: 0 !important;
}

#order-standard_cart #inputDescriptionContainer .prepend-icon,
#order-standard_cart #inputDescriptionContainer .form-control {
    width: 100% !important;
    box-sizing: border-box;
}