/* build: responsive-v30 — if this comment is missing in DevTools, the browser is serving a cached copy */
/* *****************************************************

    ** Custom Stylesheet **

    Any custom styling you want to apply should be
    defined here.

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

/* ============================================================
   GLOBAL FONT — Poppins (bold, modern, geometric)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

body,
input,
button,
select,
textarea,
.btn,
.form-control {
    font-family: 'Poppins', 'Open Sans', sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.panel-title,
.dashboard-hello,
.dashboard-hero-content h2,
.stat-circle,
.profile-card h3,
.quicklinks-card h3,
.footer-columns h4 {
    font-family: 'Poppins', 'Open Sans', sans-serif !important;
    font-weight: 700 !important;
}

section#main-menu .navbar-nav > li > a,
.dashboard-hero-btn,
.profile-btn,
.stat-card-title {
    font-weight: 600 !important;
}

/* ============================================================
   DASHBOARD REDESIGN — variables
   ============================================================ */
:root {
    --db-purple: #6c4ef5;
    --db-purple-dark: #5b3fe0;
    --db-purple-light: #ece7ff;
    --db-radius: 16px;
    --db-border: #eef0f4;
    --db-text-muted: #9a9aa5;
}

.dashboard-hello {
    font-size: 28px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 10px 0 20px;
}

/* ============================================================
   HERO BANNER
   ============================================================ */
.dashboard-hero {
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    padding: 36px 40px;
    margin-bottom: 24px;
    overflow: hidden;
}

.dashboard-hero-illustration {
    position: relative;
    min-height: 180px;
}

.hero-mock-cards {
    display: flex;
    gap: 14px;
}

.hero-mock-card {
    background: #fff;
    border: 1px solid var(--db-border);
    box-shadow: 0 6px 18px rgba(20, 20, 50, 0.06);
    border-radius: 12px;
    padding: 16px 12px;
    width: 100px;
    text-align: center;
}

.hero-mock-icon {
    width: 34px;
    height: 34px;
    margin: 0 auto 10px;
    border-radius: 50%;
    background: var(--db-purple-light);
    color: var(--db-purple);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.hero-mock-line {
    height: 6px;
    border-radius: 3px;
    background: #eef0f4;
    margin-bottom: 6px;
}
.hero-mock-line.short {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}

.hero-mock-btn {
    height: 10px;
    border-radius: 6px;
    background: var(--db-purple);
    margin-top: 10px;
    opacity: .85;
}

.hero-badge {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-weight: 700;
    font-size: 13px;
    color: #fff;
    border-radius: 50%;
    padding: 14px 8px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}
.hero-badge small { font-weight: 500; font-size: 9px; }

.hero-badge-1 { background: #f7b733; top: -6px; right: 30%; width: 56px; height: 56px; justify-content: center; }
.hero-badge-2 { background: var(--db-purple-light); color: var(--db-purple); top: 6px; right: 6%; width: 40px; height: 40px; justify-content: center; font-size: 11px; }
.hero-badge-3 { background: var(--db-purple); top: 60px; right: -2%; width: 34px; height: 34px; justify-content: center; font-size: 10px; }
.hero-badge-4 { background: var(--db-purple-light); color: var(--db-purple); top: 95px; right: 22%; width: 44px; height: 44px; justify-content: center; font-size: 11px; }

.dashboard-hero-content h2 {
    font-size: 26px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 14px;
}
.dashboard-hero-content h2 .text-accent {
    color: var(--db-purple);
}
.dashboard-hero-content p {
    color: var(--db-text-muted);
    font-size: 15px;
    margin-bottom: 22px;
    max-width: 480px;
}
.dashboard-hero-btn {
    background: var(--db-purple);
    color: #fff !important;
    border-radius: 10px;
    padding: 12px 26px;
    font-weight: 600;
    font-size: 14px;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none !important;
    transition: background .15s ease;
}
.dashboard-hero-btn:hover {
    background: var(--db-purple-dark);
    color: #fff;
}

@media (max-width: 767px) {
    .dashboard-hero-illustration { margin-bottom: 24px; }
    .hero-mock-cards { justify-content: center; }
}

/* ============================================================
   STAT CARDS (circular)
   ============================================================ */
.dashboard-stats {
    margin-bottom: 24px;
}
.dashboard-stats .row {
    margin-left: -8px;
    margin-right: -8px;
}
.dashboard-stats .row > div {
    padding-left: 8px;
    padding-right: 8px;
}

.stat-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    padding: 28px 16px 22px;
    text-align: center;
    cursor: pointer;
    margin-bottom: 16px;
    transition: box-shadow .15s ease, transform .15s ease;
}
.stat-card:hover {
    box-shadow: 0 10px 24px rgba(20,20,50,0.08);
    transform: translateY(-2px);
}
.stat-card-topicon {
    position: absolute;
    top: 16px;
    right: 18px;
    color: var(--db-purple);
    font-size: 15px;
    opacity: .8;
}
.stat-circle {
    width: 56px;
    height: 56px;
    line-height: 54px;
    margin: 0 auto 14px;
    border-radius: 50%;
    border: 2px solid var(--db-purple);
    color: var(--db-purple);
    font-size: 22px;
    font-weight: 700;
}
.stat-card-title {
    color: #55555f;
    font-size: 14.5px;
    font-weight: 500;
}

@media (max-width: 767px) {
    .stat-card { padding: 22px 10px 18px; }
    .stat-circle { width: 46px; height: 46px; line-height: 44px; font-size: 18px; }
}

/* ============================================================
   HOME PANELS (Profile / Recent Invoices / News / Tickets / Services)
   restyled as flat rounded purple-accent cards
   ============================================================ */
.client-home-panels .panel {
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    box-shadow: none;
    overflow: hidden;
}
.client-home-panels .panel.panel-accent-blue,
.client-home-panels .panel.panel-accent-green,
.client-home-panels .panel.panel-accent-red,
.client-home-panels .panel.panel-accent-gold,
.client-home-panels .panel.panel-accent-purple,
.client-home-panels .panel {
    border-top: 1px solid var(--db-border);
}

.client-home-panels .panel-heading,
.client-home-panels .panel > .panel-heading {
    background: #fff !important;
    border-bottom: 1px solid var(--db-border) !important;
    padding: 18px 22px !important;
}
.client-home-panels .panel-title,
.client-home-panels .panel > .panel-heading .panel-title {
    color: #1a1a2e !important;
    font-size: 15.5px;
    font-weight: 700;
}
/* Icon directly inside the title (not the header action button) becomes
   a small purple circle badge, matching the reference card style */
.client-home-panels .panel-title > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--db-purple-light);
    color: var(--db-purple) !important;
    font-size: 12.5px;
    margin-right: 4px;
    vertical-align: middle;
}
.client-home-panels .panel-title .btn,
.client-home-panels .panel > .panel-heading .panel-title .btn {
    background: transparent !important;
    border: none !important;
    color: var(--db-purple) !important;
    border-radius: 0 !important;
    font-weight: 600;
    font-size: 13px;
    padding: 0 !important;
}
.client-home-panels .panel-title .btn:hover,
.client-home-panels .panel > .panel-heading .panel-title .btn:hover {
    background: transparent !important;
    color: var(--db-purple-dark) !important;
    text-decoration: underline;
}
.client-home-panels .panel-title .btn i,
.client-home-panels .panel > .panel-heading .panel-title .btn i {
    width: auto;
    height: auto;
    background: none !important;
    border-radius: 0;
    color: var(--db-purple) !important;
    font-size: 12px;
    margin-right: 4px;
}

.client-home-panels .panel-body,
.client-home-panels .panel > .panel-body {
    padding: 20px 22px !important;
    color: #55555f;
    font-size: 14.5px;
    max-height: none !important;
    overflow: visible !important;
}
.client-home-panels .panel > .panel-body p {
    padding: 0 !important;
}

.client-home-panels .list-group,
.client-home-panels .panel > .list-group {
    max-height: none !important;
    overflow: visible !important;
    border-top: none !important;
    border-bottom: none !important;
}
.client-home-panels .list-group-item,
.client-home-panels .panel > .list-group .list-group-item {
    border-left: none;
    border-right: none;
    border-color: var(--db-border);
    padding: 14px 22px !important;
    font-size: 14.5px;
}
.client-home-panels .list-group-item:first-child {
    border-top: none;
}
.client-home-panels .list-group-item:last-child {
    border-bottom: none;
}


.client-home-panels .panel-footer {
    background: #fff;
    border-top: 1px solid var(--db-border);
}
.client-home-panels .panel-footer:empty {
    display: none;
    padding: 0;
    border: none;
}

/* Safety net: force readable dark text on any hook-generated content
   inside home panels (links, buttons, form labels) that doesn't carry
   its own explicit color — prevents "invisible" white-on-white text
   from WHMCS core widgets we don't control the markup of. */
.client-home-panels .panel-body,
.client-home-panels .panel-body p,
.client-home-panels .panel-body span,
.client-home-panels .panel-body label,
.client-home-panels .panel-body strong {
    color: #55555f !important;
}
.client-home-panels .panel-body a:not(.btn) {
    color: var(--db-purple) !important;
}
.client-home-panels .panel-body .btn-default,
.client-home-panels .panel-body .btn-white {
    background: #fff !important;
    border: 1px solid var(--db-border) !important;
    color: #55555f !important;
}
.client-home-panels .panel-body .btn-success {
    background: #17c690 !important;
    border-color: #17c690 !important;
    color: #fff !important;
}
.client-home-panels .panel-body .form-control {
    border: 1px solid var(--db-border) !important;
    border-radius: 8px !important;
    color: #1a1a2e !important;
    background: #fff !important;
}

/* ============================================================
   HOME PANEL CONTENT — richer styling for the 4 native WHMCS
   panels (Active Services / Register Domain / Recent News /
   Recent Support Tickets) that render via hook body-html
   ============================================================ */

/* --- List rows (Active Services items, Recent News items) --- */
.client-home-panels .list-group-item {
    padding: 12px 18px;
    color: #55555f;
}
.client-home-panels .list-group-item:hover {
    background: var(--db-purple-light);
}
/* Only rows built from multiple block-level children (icon/status/name/
   buttons columns) should be flex — plain text+date announcement links
   must stay in normal flow or the text collides with the date span */
.client-home-panels .list-group-item:has(> div) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.client-home-panels .list-group-item strong,
.client-home-panels .list-group-item b {
    color: #1a1a2e !important;
    font-weight: 600;
    font-size: 14.5px;
}
.client-home-panels .list-group-item small,
.client-home-panels .list-group-item .text-muted,
.client-home-panels .list-group-item .text-last-updated {
    color: #9a9aa5 !important;
    font-size: 12.5px;
}
.client-home-panels .list-group-item .badge {
    background: var(--db-purple) !important;
    color: #fff !important;
    border-radius: 20px;
    font-weight: 600;
    padding: 4px 10px;
    border: none !important;
}
.client-home-panels .list-group-item .label,
.client-home-panels .list-group-item .status {
    border-radius: 20px !important;
    padding: 4px 12px !important;
    font-weight: 600;
    font-size: 11.5px;
    border: none !important;
    color: #fff !important;
}
.client-home-panels .list-group-item .label-success,
.client-home-panels .list-group-item .status-active { background: #17c690 !important; }
.client-home-panels .list-group-item .label-warning,
.client-home-panels .list-group-item .status-pending { background: #f7a94a !important; }
.client-home-panels .list-group-item .label-danger,
.client-home-panels .list-group-item .status-suspended { background: #f0554e !important; }
.client-home-panels .list-group-item .label-default { background: #9a9aa5 !important; }

/* --- Empty-state messages ("No tickets found" etc.) --- */
.client-home-panels .panel-body .alert {
    background: var(--db-purple-light) !important;
    border: none !important;
    border-radius: 12px !important;
    color: #55555f !important;
    text-align: center;
    padding: 22px 18px;
}
.client-home-panels .panel-body .alert i,
.client-home-panels .panel-body .alert .fa,
.client-home-panels .panel-body .alert .fas,
.client-home-panels .panel-body .alert .far {
    color: var(--db-purple) !important;
    font-size: 26px;
    display: block;
    margin-bottom: 10px;
}
.client-home-panels .panel-body .alert a {
    color: var(--db-purple) !important;
    font-weight: 700;
    text-decoration: underline;
}

/* --- Register a New Domain widget (inline search form) --- */
/* Register-a-domain widget: keep Bootstrap's input-group intact
   (forcing display:flex on the form broke its table-cell layout
   and left the buttons floating out of place). */
.client-home-panels .panel-body form .input-group {
    display: flex !important;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}
.client-home-panels .panel-body form .input-group .form-control {
    flex: 1 1 auto;
    min-width: 0;
    height: 42px !important;
    border-radius: 10px 0 0 10px !important;
    border-right: none !important;
}
.client-home-panels .panel-body form .input-group-btn,
.client-home-panels .panel-body form .input-group-append {
    display: flex !important;
    flex: 0 0 auto;
    width: auto !important;
}
.client-home-panels .panel-body form .input-group .btn {
    height: 42px;
    border-radius: 0 !important;
    font-weight: 700;
    font-size: 13px;
    padding: 0 16px;
    white-space: nowrap;
    border: 1px solid var(--db-border);
    margin: 0;
}
.client-home-panels .panel-body form .input-group .btn:last-child {
    border-radius: 0 10px 10px 0 !important;
}
.client-home-panels .panel-body form .input-group .btn-success {
    background: #17c690 !important;
    border-color: #17c690 !important;
    color: #fff !important;
}
.client-home-panels .panel-body form .input-group .btn-success:hover {
    background: #13ac7c !important;
    border-color: #13ac7c !important;
}
.client-home-panels .panel-body form .input-group .btn-default {
    background: #fff !important;
    color: #55555f !important;
}
.client-home-panels .panel-body form .input-group .btn-default:hover {
    background: var(--db-purple-light) !important;
    color: var(--db-purple) !important;
    border-color: var(--db-purple) !important;
}

/* --- Generic "View More" / footer links --- */
.client-home-panels .panel-body > a,
.client-home-panels .panel-footer a {
    color: var(--db-purple) !important;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none !important;
}
.client-home-panels .panel-body > a:hover,
.client-home-panels .panel-footer a:hover {
    text-decoration: underline !important;
}

/* --- Icon accents in list rows (service/news icons) --- */
.client-home-panels .list-group-item > i:first-child,
.client-home-panels .list-group-item .item-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 50%;
    background: var(--db-purple-light);
    color: var(--db-purple) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

/* ============================================================
   EXACT WHMCS "Active Products/Services" widget markup
   (div-service-item / div-service-status / div-service-name)
   ============================================================ */
.client-home-panels .div-service-item {
    padding: 6px 4px;
}

/* ============================================================
   BEAUTIFIED EMPTY-STATE (Recent Tickets: "No tickets found")
   ============================================================ */
.client-home-panels .empty-state-block {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 30px 10px 10px !important;
}
.client-home-panels .empty-state-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--db-purple-light);
    color: var(--db-purple);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 16px;
}
.client-home-panels .empty-state-title {
    display: block;
    color: #1a1a2e;
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 14px;
}
.client-home-panels .empty-state-cta {
    display: inline-block;
    color: var(--db-purple) !important;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none !important;
}
.client-home-panels .empty-state-cta:hover {
    text-decoration: underline !important;
}
.tickets-new-btn {
    background: var(--db-purple);
    color: #fff !important;
    border: none;
    border-radius: 10px;
    padding: 11px 22px;
    font-weight: 600;
    font-size: 13.5px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none !important;
    box-shadow: 0 6px 18px rgba(108,78,245,0.25);
    transition: transform .15s ease, box-shadow .15s ease;
}
.tickets-new-btn:hover {
    background: var(--db-purple-dark);
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(108,78,245,0.32);
}

.tickets-card {
    background: transparent;
    border: none;
    padding: 0;
    margin-top: 18px;
}

.tickets-status-tabs {
    list-style: none;
    display: flex;
    gap: 8px;
    margin: 0 0 20px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: 14px;
    overflow-x: auto;
    width: fit-content;
    max-width: 100%;
}
.tickets-status-tabs li { margin: 0; white-space: nowrap; }
.tickets-status-tabs a {
    display: inline-block;
    padding: 10px 18px;
    color: #8a8a95;
    font-weight: 600;
    font-size: 13.5px;
    text-decoration: none !important;
    border-radius: 9px;
    transition: all .15s ease;
}
.tickets-status-tabs a.active {
    color: #fff;
    background: var(--db-purple);
    box-shadow: 0 4px 12px rgba(108,78,245,0.28);
}
.tickets-status-tabs a:not(.active):hover {
    color: var(--db-purple);
    background: var(--db-purple-light);
}

/* ---- The table is re-skinned into a stack of floating cards ---- */
.tickets-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 12px !important;
}
.tickets-table thead {
    /* keep in DOM for DataTables + accessibility, hide visually */
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
}
.tickets-table tbody tr {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: 16px;
    padding: 16px 20px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(20,20,50,0.03);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.tickets-table tbody tr:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(20,20,50,0.08);
    border-color: rgba(108,78,245,0.35);
}
.tickets-table tbody td {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Avatar / unread indicator column */
.tkt-dept-cell {
    flex: 0 0 auto;
    margin-right: 16px;
}
.tkt-avatar {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--db-purple-light);
    color: var(--db-purple);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
.tkt-avatar-unread {
    background: var(--db-purple);
    color: #fff;
    box-shadow: 0 0 0 4px var(--db-purple-light);
}

/* Subject + meta column */
.tkt-main-cell {
    flex: 1 1 auto;
    min-width: 0;
}
.tkt-subject-link {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-decoration: none !important;
}
.ticket-subject {
    color: #1a1a2e;
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ticket-subject.unread {
    font-weight: 700;
}
.tkt-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: #9a9aa5;
}
.tkt-dept-pill {
    background: var(--db-purple-light);
    color: var(--db-purple);
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 11.5px;
}
.tkt-sep { opacity: .6; }
.ticket-number { font-weight: 500; }

/* Status column */
.tkt-status-cell {
    flex: 0 0 auto;
    margin: 0 20px;
}
.tickets-table .label.status {
    display: inline-block;
    border-radius: 20px;
    padding: 6px 16px;
    font-weight: 600;
    font-size: 12px;
    color: #fff;
    border: none;
    white-space: nowrap;
}
.tickets-table .label.status-open { background: #17c690; }
.tickets-table .label.status-answered { background: var(--db-purple); }
.tickets-table .label.status-customer-reply,
.tickets-table .label.status-in-progress { background: #00bcd4; }
.tickets-table .label.status-closed { background: #9a9aa5; }
.tickets-table .label.status-on-hold { background: #f0554e; }
.tickets-table .label.status-custom {
    background: #fff;
    border: 1.5px solid currentColor !important;
    border-radius: 20px;
    padding: 4.5px 14px;
    font-weight: 600;
    font-size: 12px;
}

/* Last-reply + chevron column */
.tkt-lastreply {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    color: #9a9aa5;
    font-size: 12.5px;
    white-space: nowrap;
    text-align: right !important;
}
.tkt-chevron {
    color: #c8c8d0;
    font-size: 12px;
    transition: transform .15s ease, color .15s ease;
}
.tickets-table tbody tr:hover .tkt-chevron {
    color: var(--db-purple);
    transform: translateX(3px);
}

/* DataTables empty message */
#tableTicketsList_wrapper .dataTables_empty {
    text-align: center;
    padding: 50px 20px !important;
    color: #9a9aa5;
    font-size: 14.5px;
    background: #fff;
    border: 1px dashed var(--db-border);
    border-radius: 16px;
    display: block;
}

@media (max-width: 767px) {
    .tickets-table tbody tr { flex-wrap: wrap; gap: 10px; }
    .tkt-status-cell { margin: 0; order: 3; }
    .tkt-lastreply { order: 4; margin-left: auto; }
}
.client-home-panels .div-service-status .label:not(.label-placeholder) {
    color: #fff !important;
    border-radius: 20px !important;
    font-weight: 600;
    font-size: 11.5px;
    padding: 4px 12px !important;
}
.client-home-panels .div-service-status .label-success {
    background: #17c690 !important;
}
.client-home-panels .div-service-status .label-warning {
    background: #f7a94a !important;
}
.client-home-panels .div-service-status .label-danger {
    background: #f0554e !important;
}
.client-home-panels .div-service-status .label-default {
    background: #9a9aa5 !important;
}
.client-home-panels .div-service-name .font-weight-bold {
    color: #1a1a2e !important;
    font-weight: 700 !important;
    font-size: 14.5px;
}
.client-home-panels .div-service-name .text-domain {
    color: #9a9aa5 !important;
    font-size: 12.5px;
}
.client-home-panels .div-service-buttons .btn-view-details {
    background: #fff !important;
    border: 1px solid var(--db-border) !important;
    color: #55555f !important;
    border-radius: 8px !important;
    font-weight: 600;
    font-size: 12.5px;
}
.client-home-panels .div-service-buttons .btn-view-details i {
    color: var(--db-purple) !important;
}
.client-home-panels .btn-view-more {
    color: var(--db-purple) !important;
    font-weight: 700 !important;
    font-size: 13px;
}
.client-home-panels .btn-view-more.disabled {
    color: #9a9aa5 !important;
}

/* Panel-title action button (e.g. "My Services", "All News", "+ New Ticket") */
.client-home-panels .panel-title .pull-right .btn {
    background: transparent !important;
    border: none !important;
    color: var(--db-purple) !important;
    border-radius: 0 !important;
    font-weight: 600;
    font-size: 13px;
    padding: 0 !important;
}
.client-home-panels .panel-title .pull-right .btn:hover {
    background: transparent !important;
    color: var(--db-purple-dark) !important;
    text-decoration: underline;
}
.client-home-panels .panel-title .pull-right .btn i {
    color: var(--db-purple) !important;
}

/* Profile panel special-case: purple filled body (matches mockup) */
.client-home-panels .panel[id*="profile"] .panel-body,
.client-home-panels .panel .panel-body:has(.profile-summary) {
    background: var(--db-purple);
    color: #fff;
}

/* ============================================================
   GLOBAL HEADER / NAVBAR RESKIN (all pages)
   ============================================================ */
section#header {
    background: #fff;
    border-bottom: 1px solid var(--db-border);
    padding: 14px 0;
}
section#header .logo-text {
    color: #1a1a2e;
    font-weight: 700;
    font-size: 22px;
}
ul.top-nav > li > a {
    color: #555;
    font-size: 13.5px;
}
ul.top-nav > li.primary-action > a.btn {
    background: var(--db-purple);
    border-color: var(--db-purple);
    border-radius: 8px;
    color: #fff;
}
ul.top-nav > li.primary-action > a.btn:hover {
    background: var(--db-purple-dark);
    border-color: var(--db-purple-dark);
}

section#main-menu {
    background: var(--db-purple) !important;
    border: none;
}
section#main-menu .navbar-main {
    background: transparent;
    border: none;
    margin-bottom: 0;
}
section#main-menu .navbar-nav > li > a {
    color: #fff !important;
    font-weight: 500;
    font-size: 14px;
    padding: 16px 18px;
}
section#main-menu .navbar-nav > li > a:hover,
section#main-menu .navbar-nav > li > a:focus {
    background: rgba(255,255,255,0.12) !important;
    color: #fff !important;
}
section#main-menu .navbar-nav > li.active > a {
    background: rgba(255,255,255,0.18) !important;
}
section#main-menu .dropdown-menu {
    border-radius: 10px;
    border: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    overflow: hidden;
}
section#main-menu .dropdown-menu > li > a {
    font-size: 13.5px;
    padding: 10px 16px;
}


/* ============================================================
   HIDE LEFT SIDEBAR ON CLIENT DASHBOARD HOMEPAGE
   ============================================================ */
.page-clientareahome .sidebar,
body:has(.dashboard-hero) .sidebar {
    display: none !important;
}
body:has(.dashboard-hero) .main-content.col-md-9 {
    width: 100%;
}
.profile-card {
    background: var(--db-purple);
    border-radius: var(--db-radius);
    padding: 26px 28px;
    color: #fff;
    margin-bottom: 16px;
}
.profile-card h3 {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 18px;
    opacity: .9;
}
.profile-card h3 i { margin-right: 6px; }

.profile-card-body {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 18px;
}
.profile-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
}
.profile-main { display: flex; flex-direction: column; margin-right: auto; }
.profile-main strong { font-size: 15px; }
.profile-userid { font-size: 12.5px; opacity: .75; }

.profile-balance {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 12.5px;
    opacity: .9;
}
.profile-balance strong { font-size: 16px; margin-top: 2px; }

.profile-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    color: var(--db-purple) !important;
    border-radius: 8px;
    padding: 9px 18px;
    font-weight: 600;
    font-size: 13.5px;
    text-decoration: none !important;
    margin-bottom: 18px;
}
.profile-btn:hover { background: var(--db-purple-light); }

.profile-meta {
    list-style: none;
    margin: 0;
    padding: 16px 0 0;
    border-top: 1px solid rgba(255,255,255,0.2);
}
.profile-meta li {
    font-size: 13.5px;
    padding: 5px 0;
    opacity: .95;
}
.profile-meta li i {
    width: 18px;
    opacity: .8;
}

/* ============================================================
   GENERIC PAGE HEADER (title + breadcrumb) — all inner pages
   ============================================================ */
.header-lined,
div.header-lined {
    border-bottom: none;
    margin-bottom: 6px;
}
.header-lined h1,
div.header-lined h1 {
    color: #1a1a2e !important;
    font-weight: 700 !important;
    font-size: 28px;
    border-bottom: none !important;
    padding: 0 !important;
    margin-bottom: 10px;
}
.header-lined h1 small,
div.header-lined h1 small {
    color: #9a9aa5 !important;
    font-weight: 400;
    font-size: 15px;
}
.breadcrumb,
div.header-lined .breadcrumb {
    background: transparent;
    padding: 0 0 18px;
    margin-top: 0;
    font-size: 13px;
    color: #9a9aa5;
}
.breadcrumb a,
div.header-lined .breadcrumb li a { color: #9a9aa5 !important; }
.breadcrumb > .active,
div.header-lined .breadcrumb > .active { color: var(--db-purple) !important; }
.breadcrumb a:hover,
div.header-lined .breadcrumb li a:hover { color: var(--db-purple) !important; }

/* ============================================================
   FOOTER REDESIGN
   ============================================================ */
section#footer.site-footer {
    background: var(--db-purple-light);
    border-top: none;
    padding: 50px 0 20px;
    color: #444;
    font-size: 14px;
    line-height: normal !important;
}
.footer-columns {
    margin-bottom: 30px;
}
.footer-columns h4 {
    color: var(--db-purple);
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 16px;
}
.footer-link-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer-link-list li {
    margin-bottom: 10px;
}
.footer-link-list a {
    color: #444;
    text-decoration: none;
}
.footer-link-list a:hover {
    color: var(--db-purple);
    text-decoration: underline;
}
.footer-payment-icons {
    margin-bottom: 14px;
}
.footer-payment-icons i {
    font-size: 26px;
    color: var(--db-purple);
    margin-right: 10px;
}
.footer-contact {
    margin: 0 0 6px !important;
    color: #444;
}
.footer-contact i {
    color: var(--db-purple);
    width: 18px;
    margin-right: 4px;
}
.footer-bottom {
    border-top: 1px solid rgba(108,78,245,0.2);
    padding-top: 18px;
    font-size: 13px;
    color: #666;
}
.footer-bottom p { margin: 0; }
.footer-legal-links a {
    color: #444;
    text-decoration: none;
}
.footer-legal-links a:hover {
    color: var(--db-purple);
}
/* (back-to-top is now a floating element — styled near the end of this file) */
section#footer.site-footer .container {
    position: relative;
}

@media (max-width: 767px) {
    .footer-columns .col-sm-6 { margin-bottom: 24px; }
    .footer-bottom p.pull-left,
    .footer-bottom p.pull-right {
        float: none !important;
        margin-bottom: 8px;
    }
}

/* ============================================================
   CHECKOUT PAGE (orderforms/standard_cart/checkout.tpl)
   ============================================================ */
#order-standard_cart .checkout-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin: 0;
}
#order-standard_cart .checkout-main-col {
    flex: 1 1 62%;
    min-width: 300px;
}
#order-standard_cart .checkout-summary-col {
    flex: 1 1 30%;
    min-width: 260px;
}

#order-standard_cart .already-registered {
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    padding: 20px 24px;
    margin-bottom: 20px;
}
#order-standard_cart .already-registered p {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #1a1a2e;
}
#order-standard_cart .already-registered .btn-info,
#order-standard_cart .already-registered .btn-warning {
    background: var(--db-purple) !important;
    border-color: var(--db-purple) !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-weight: 600;
}

#order-standard_cart .sub-heading {
    background: #fff !important;
    border: 1px solid var(--db-border) !important;
    border-bottom: none !important;
    border-radius: var(--db-radius) var(--db-radius) 0 0 !important;
    padding: 18px 24px 4px !important;
    margin-top: 20px !important;
}
#order-standard_cart .sub-heading span.primary-bg-color {
    background: none !important;
    color: #1a1a2e !important;
    font-size: 19px;
    font-weight: 700;
    padding: 0 !important;
}
#order-standard_cart .sub-heading + .row,
#order-standard_cart .sub-heading + div {
    background: #fff;
    border: 1px solid var(--db-border);
    border-top: none;
    border-radius: 0 0 var(--db-radius) var(--db-radius);
    padding: 18px 24px 24px;
    margin: 0 0 0 0 !important;
}

#order-standard_cart .form-control {
    border: 1px solid var(--db-border) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    height: 44px !important;
}
#order-standard_cart label {
    color: #55555f;
    font-weight: 500;
    font-size: 13.5px;
}

/* Payment method boxes */
#order-standard_cart #paymentGatewaysContainer .text-center {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    text-align: left !important;
}
#order-standard_cart #paymentGatewaysContainer label.radio-inline {
    flex: 1 1 30%;
    min-width: 180px;
    margin: 0 !important;
    border: 1.5px solid var(--db-border);
    border-radius: 12px;
    padding: 14px 16px;
    font-weight: 600;
    color: #1a1a2e;
    cursor: pointer;
}
#order-standard_cart #paymentGatewaysContainer label.radio-inline:has(input:checked) {
    border-color: var(--db-purple);
    background: var(--db-purple-light);
    color: var(--db-purple);
}

/* Hide the redundant total box + original submit button (moved into
   sidebar). Checkout only: on the cart page #totalDueToday is the
   total itself, and #btnCompleteOrder does not exist there. */
#order-standard_cart.checkout-page #totalDueToday.alert-success {
    display: none !important;
}

/* Order Summary sidebar */
#order-standard_cart .checkout-order-summary {
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    padding: 28px;
    position: sticky;
    top: 20px;
}
#order-standard_cart .checkout-order-summary h2 {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 18px;
}
#order-standard_cart .checkout-order-summary .clearfix {
    padding: 8px 0;
    font-size: 14.5px;
    color: #55555f;
}
#order-standard_cart .checkout-order-summary .total-due-today {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--db-border);
    margin-top: 8px;
    padding: 16px 0;
}
#order-standard_cart .checkout-order-summary .total-due-today span:first-child {
    color: #8a8a95;
    font-size: 14px;
}
#order-standard_cart .checkout-order-summary .total-due-today .amt {
    font-size: 26px;
    font-weight: 800;
    color: #1a1a2e;
}
#order-standard_cart .btn-checkout-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: var(--db-purple);
    color: #fff !important;
    border: none;
    border-radius: 10px;
    padding: 14px;
    font-weight: 700;
    font-size: 15px;
    margin-top: 6px;
}
#order-standard_cart .btn-checkout-summary:hover {
    background: var(--db-purple-dark);
}
#order-standard_cart .checkout-back-link {
    display: block;
    text-align: center;
    margin-top: 14px;
    color: #8a8a95 !important;
    font-size: 13.5px;
    text-decoration: none !important;
}
#order-standard_cart .checkout-back-link:hover {
    color: var(--db-purple) !important;
}

@media (max-width: 991px) {
    #order-standard_cart .checkout-summary-col {
        order: -1;
    }
    #order-standard_cart .checkout-order-summary {
        position: static;
    }
}
#order-standard_cart .domain-checker-subtitle {
    text-align: center;
    color: #8a8a95;
    font-size: 15.5px;
    max-width: 560px;
    margin: 0 auto 30px;
}


/* Category filter pills */
#order-standard_cart .tld-filters {
    text-align: center;
    margin: 0 0 22px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--db-border);
}
#order-standard_cart .tld-filters a.badge {
    display: inline-block;
    background: #fff !important;
    border: 1.5px solid var(--db-purple);
    color: var(--db-purple) !important;
    border-radius: 30px;
    padding: 8px 20px !important;
    font-size: 13.5px;
    font-weight: 600;
    margin: 0 6px 10px;
    text-decoration: none !important;
    transition: all .15s ease;
}
#order-standard_cart .tld-filters a.badge:hover,
#order-standard_cart .tld-filters a.badge.badge-success {
    background: var(--db-purple) !important;
    border-color: var(--db-purple) !important;
    color: #fff !important;
}

/* Simplified price list */
#order-standard_cart .domain-price-list {
    background: transparent !important;
}
#order-standard_cart .domain-price-list .tld-row {
    align-items: center;
    padding: 18px 6px;
    border-bottom: 1px solid var(--db-border);
    transition: background .15s ease;
}


#order-standard_cart .domain-price-list .dpl-ext strong {
    color: #1a1a2e;
    font-size: 16px;
    font-weight: 700;
}
#order-standard_cart .domain-price-list .tld-sale-group {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    background: #ffe8b3;
    color: #a56a00;
}
#order-standard_cart .domain-price-list .dpl-price {
    font-weight: 700;
    color: #1a1a2e;
    font-size: 15px;
}
#order-standard_cart .domain-price-list .dpl-cycle {
    display: block;
    font-weight: 400;
    color: #8a8a95;
    font-size: 12.5px;
}
#order-standard_cart .btn-buy-now-tld {
    background: #fff;
    border: 1.5px solid var(--db-purple);
    color: var(--db-purple);
    border-radius: 8px;
    padding: 8px 20px;
    font-weight: 700;
    font-size: 13.5px;
    transition: all .15s ease;
}
#order-standard_cart .btn-buy-now-tld:hover {
    background: var(--db-purple);
    color: #fff;
}
#order-standard_cart .tld-row.no-tlds {
    padding: 30px 0;
    color: #8a8a95;
}

#order-standard_cart .transfer-search-row .form-control {
    flex: 1;
    height: 58px !important;
    border: 1px solid var(--db-border) !important;
    border-right: none !important;
    border-radius: 14px 0 0 14px !important;
    font-size: 15.5px;
    padding-left: 22px;
    box-shadow: none !important;
}
#order-standard_cart .btn.btn-transfer {
    background: #17c690 !important;
    border-color: #17c690 !important;
    color: #fff !important;
    border-radius: 0 14px 14px 0 !important;
    padding: 0 32px !important;
    font-weight: 700;
    font-size: 15px;
}
#order-standard_cart .btn.btn-transfer:hover {
    background: #13ac7c !important;
}
#order-standard_cart .btn.btn-transfer i {
    margin-right: 6px;
}
#order-standard_cart .transfer-auth-row .form-control {
    height: 46px !important;
    border: 1px solid var(--db-border) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}
.ticket-summary-chip.ticket-priority-high,
.ticket-summary-chip.ticket-priority-critical {
    background: #fde3e2;
    color: #d9453e;
}
.ticket-summary-chip.ticket-priority-medium {
    background: #fdecd2;
    color: #b3760f;
}
.ticket-summary-chip.ticket-priority-low {
    background: #dcf6ec;
    color: #12a374;
}

/* --- Reply form panel (collapsible "Add Reply") --- */
.panel.panel-info.panel-collapsable {
    background: #fff;
    border: 1px solid var(--db-border) !important;
    border-radius: var(--db-radius) !important;
    overflow: hidden;
    box-shadow: none !important;
    margin-bottom: 24px;
}
.panel.panel-info.panel-collapsable > .panel-heading {
    background: var(--db-purple) !important;
    border: none !important;
    padding: 16px 22px !important;
    cursor: pointer;
}
.panel.panel-info.panel-collapsable > .panel-heading .panel-title {
    color: #fff !important;
    font-size: 15px;
    font-weight: 600;
    margin: 0;
}

.panel.panel-info.panel-collapsable .panel-body {
    padding: 24px !important;
}
.panel.panel-info.panel-collapsable label {
    color: #55555f;
    font-weight: 600;
    font-size: 13px;
}
.panel.panel-info.panel-collapsable .form-control {
    border: 1px solid var(--db-border) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}
.panel.panel-info.panel-collapsable textarea.form-control {
    border-radius: 14px !important;
}
.panel.panel-info.panel-collapsable .btn-primary {
    background: var(--db-purple) !important;
    border-color: var(--db-purple) !important;
    border-radius: 10px !important;
    font-weight: 700;
    padding: 11px 30px;
}
.panel.panel-info.panel-collapsable .btn-primary:hover {
    background: var(--db-purple-dark) !important;
}
.panel.panel-info.panel-collapsable .btn-default {
    border-radius: 10px !important;
    font-weight: 600;
    border: 1px solid var(--db-border) !important;
    color: #55555f !important;
}
.panel.panel-info.panel-collapsable .ticket-attachments-message {
    font-size: 12px;
    margin-top: 8px;
}

/* --- Conversation thread bubbles --- */
.ticket-reply {
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    padding: 20px 24px;
    margin-bottom: 16px;
    position: relative;
}
.ticket-reply.staff {
    background: var(--db-purple-light);
    border-color: rgba(108,78,245,0.18);
}
.ticket-reply .date {
    position: static;
    float: right;
    color: #9a9aa5;
    font-size: 12.5px;
    font-weight: 500;
}
.ticket-reply .user {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.ticket-reply .user i {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--db-border);
    color: var(--db-purple);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
.ticket-reply.staff .user i {
    background: var(--db-purple);
    border-color: var(--db-purple);
    color: #fff;
}
.ticket-reply .user .name {
    color: #1a1a2e;
    font-weight: 700;
    font-size: 14.5px;
    display: block;
}
.ticket-reply .user .type {
    color: #9a9aa5;
    font-size: 12.5px;
    font-weight: 400;
    display: block;
}
.ticket-reply .user .label {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    background: var(--db-purple);
    color: #fff !important;
    vertical-align: middle;
}
.ticket-reply .message {
    color: #33333d;
    font-size: 14.5px;
    line-height: 1.7;
    clear: both;
}
.ticket-reply .message hr {
    border-color: var(--db-border);
    margin: 14px 0;
}

/* Attachments as chips */
.ticket-reply .attachments {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(0,0,0,0.06);
}
.ticket-reply .attachments strong {
    display: block;
    color: #55555f;
    font-size: 12.5px;
    margin-bottom: 8px;
}
.ticket-reply .attachments ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ticket-reply .attachments li {
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 12.5px;
}
.ticket-reply .attachments li a {
    color: var(--db-purple);
    text-decoration: none !important;
}
.ticket-reply .attachments li a:hover {
    text-decoration: underline !important;
}

/* Star rating */
.ticket-reply .rating span.star,
.ticket-reply .rating-done span.star {
    color: #d8d8e0;
    font-size: 20px;
}
.ticket-reply .rating span.star:hover,
.ticket-reply .rating span.star:hover ~ span.star,
.ticket-reply .rating-done span.star.active {
    color: #f7a94a;
}
.ticket-reply .rated {
    color: #9a9aa5;
    font-size: 12px;
    margin-top: 6px;
}

@media (max-width: 767px) {
    .ticket-reply .date { float: none; display: block; margin-bottom: 8px; }
}

/* ============================================================
   SUBMIT TICKET FLOW — step 1 (department cards)
   ============================================================ */
.dept-select-intro {
    color: #8a8a95;
    font-size: 15px;
    margin: 4px 0 22px;
}
.dept-select-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
@media (max-width: 767px) {
    .dept-select-grid { grid-template-columns: 1fr; }
}
.dept-select-card {
    position: relative;
    display: block;
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    padding: 24px 52px 22px 22px;
    text-decoration: none !important;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.dept-select-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(20,20,50,0.08);
    border-color: rgba(108,78,245,0.35);
}
.dept-select-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--db-purple-light);
    color: var(--db-purple);
    font-size: 17px;
    margin-bottom: 14px;
}
.dept-select-name {
    display: block;
    color: #1a1a2e;
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 6px;
}
.dept-select-desc {
    display: block;
    color: #8a8a95;
    font-size: 13.5px;
    line-height: 1.6;
}
.dept-select-arrow {
    position: absolute;
    top: 24px;
    right: 22px;
    color: #c8c8d0;
    font-size: 14px;
    transition: transform .15s ease, color .15s ease;
}
.dept-select-card:hover .dept-select-arrow {
    color: var(--db-purple);
    transform: translateX(3px);
}

/* ============================================================
   SUBMIT TICKET FLOW — step 2 (ticket form card)
   ============================================================ */
.ticket-form-card {
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    padding: 26px 28px 8px;
}
.ticket-form-card label {
    color: #55555f;
    font-weight: 600;
    font-size: 13px;
}
.ticket-form-card .form-control {
    border: 1px solid var(--db-border) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    height: 44px;
}
.ticket-form-card textarea.form-control {
    height: auto;
    border-radius: 14px !important;
}
.ticket-form-card .btn-primary {
    background: var(--db-purple) !important;
    border-color: var(--db-purple) !important;
    border-radius: 10px !important;
    font-weight: 700;
    padding: 12px 32px;
}
.ticket-form-card .btn-primary:hover {
    background: var(--db-purple-dark) !important;
}
.ticket-form-card .btn-default {
    border-radius: 10px !important;
    font-weight: 600;
    padding: 12px 26px;
    border: 1px solid var(--db-border) !important;
    color: #55555f !important;
}
.ticket-form-card .ticket-attachments-message {
    font-size: 12px;
    color: #9a9aa5;
    margin-top: 8px;
}

/* KB suggestions inside the form */
.kbarticles {
    background: var(--db-purple-light);
    border-radius: 12px;
    padding: 16px 20px;
    margin: 10px 0 20px;
}
.kbarticles p {
    margin: 0 0 10px;
    font-size: 13.5px;
    color: #55555f;
}
.kbarticles p:last-child { margin-bottom: 0; }
.kbarticles a {
    color: var(--db-purple);
    font-weight: 600;
    text-decoration: none !important;
}
.kbarticles a:hover { text-decoration: underline !important; }

/* ============================================================
   SUBMIT TICKET FLOW — step 3 (success confirmation)
   ============================================================ */
.ticket-confirm-card {
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    padding: 50px 30px;
    text-align: center;
    max-width: 560px;
    margin: 30px auto;
}
.ticket-confirm-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #17c690;
    color: #fff;
    font-size: 26px;
    margin-bottom: 20px;
}
.ticket-confirm-title {
    color: #1a1a2e;
    font-weight: 700;
    font-size: 20px;
    margin: 0 0 12px;
}
.ticket-confirm-title a {
    color: var(--db-purple);
    text-decoration: none !important;
}
.ticket-confirm-desc {
    color: #8a8a95;
    font-size: 14.5px;
    margin-bottom: 24px;
}
.ticket-confirm-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--db-purple);
    color: #fff !important;
    border: none;
    border-radius: 10px;
    padding: 12px 30px;
    font-weight: 700;
    text-decoration: none !important;
}
.ticket-confirm-btn:hover {
    background: var(--db-purple-dark);
}

/* ============================================================
   KILL ALL REMAINING STOCK "SIX BLUE" THEME COLOR — SITE WIDE
   The original theme sets `a { color: #058; }` globally, plus a
   handful of other hardcoded blue values (#006687, #00a3c6,
   #043d5f, #337ab7). Overriding every one of them here so no
   page/component can ever show the old blue again.
   ============================================================ */
a {
    color: var(--db-purple);
}
a:hover,
a:focus {
    color: var(--db-purple-dark);
}

/* Pre-login homepage banner (section#home-banner) + its tooltips */
section#home-banner {
    background-color: var(--db-purple-dark) !important;
}
section#home-banner .tooltip-inner {
    background-color: var(--db-purple) !important;
}
section#home-banner .tooltip.left .tooltip-arrow {
    border-left-color: var(--db-purple) !important;
}
section#home-banner .tooltip.bottom .tooltip-arrow {
    border-bottom-color: var(--db-purple) !important;
}
section#home-banner .tooltip.right .tooltip-arrow {
    border-right-color: var(--db-purple) !important;
}

/* Domain name text color used across service/domain widgets */
.text-domain {
    color: var(--db-purple) !important;
}

/* Two-factor-auth module selection border */
.twofa-module.active {
    border-color: var(--db-purple) !important;
}

/* Dropdown menu active item (e.g. inside .div-service-item actions)
   The tint goes on the <a>, never on the <li>. An <li> has no border
   radius, so painting it on :active left four square corners poking
   out from behind the <a>'s rounded background — the "brackets" that
   appeared on every menu click. */
.dropdown-menu > li.active > a,
.dropdown-menu > li:active > a {
    background-color: var(--db-purple) !important;
    color: #fff !important;
}
.dropdown-menu > li,
.dropdown-menu > li:active,
.dropdown-menu > li:focus,
.dropdown-menu > li:hover {
    background-color: transparent !important;
}

/* Generic Bootstrap "primary" blue leaks (buttons/links/badges that
   never got an explicit class from us) */
.btn-primary,
.label-primary,
.badge-primary,
.bg-primary {
    background-color: var(--db-purple) !important;
    border-color: var(--db-purple) !important;
    color: #fff !important;
}
.text-primary {
    color: var(--db-purple) !important;
}

/* ============================================================
   RECENT INVOICES home panel (conditional — only shows when the
   client has unpaid invoices). Standard WHMCS markup: a <table>
   inside .panel-body with columns Invoice# / Due Date / Total / Status.
   ============================================================ */
.client-home-panels .panel-body table {
    width: 100%;
    margin: -6px 0 0;
}
.client-home-panels .panel-body table thead th {
    border-bottom: 1px solid var(--db-border) !important;
    color: #9a9aa5 !important;
    font-weight: 600;
    font-size: 12.5px;
    padding: 10px 6px !important;
    text-align: left;
}
.client-home-panels .panel-body table tbody td {
    border-top: 1px solid var(--db-border) !important;
    padding: 14px 6px !important;
    font-size: 14px;
    color: #1a1a2e !important;
    vertical-align: middle !important;
}
.client-home-panels .panel-body table tbody tr:hover {
    background: var(--db-purple-light);
}
.client-home-panels .panel-body table .label,
.client-home-panels .panel-body table .status {
    display: inline-block;
    border-radius: 20px;
    padding: 5px 14px;
    font-weight: 600;
    font-size: 11.5px;
    color: #fff !important;
    border: none !important;
}
.client-home-panels .panel-body table .label-danger,
.client-home-panels .panel-body table .status-unpaid { background: #f0554e !important; }
.client-home-panels .panel-body table .label-success,
.client-home-panels .panel-body table .status-paid { background: #17c690 !important; }
.client-home-panels .panel-body table .label-warning,
.client-home-panels .panel-body table .status-overdue { background: #f7a94a !important; }
.client-home-panels .panel-body table .label-default,
.client-home-panels .panel-body table .status-cancelled { background: #9a9aa5 !important; }

/* ============================================================
   DASHBOARD HOME PANELS — forced layout order (CSS-only, safe)
   Row order matches the reference design:
   1) Recent News (left) + Recent Support Tickets (right)
   2) Active Products/Services — full width
   3) everything else (Register a New Domain, Unpaid Invoices...)
   ============================================================ */
.home-panels-flex-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin-left: -15px;
    margin-right: -15px;
}
.home-panels-flex-row > .home-panel-col {
    order: 5; /* default: unnamed panels flow after the known ones */
    display: flex;
    flex-direction: column;
    /* grow so a panel left alone on the last row fills the width
       instead of leaving dead space beside it */
    flex: 1 1 calc(50% - 30px);
    width: auto;
    max-width: 100%;
}
/* make the card inside each column fill the column height so paired
   cards (Profile | Invoices, News | Tickets) line up evenly */
.home-panels-flex-row > .home-panel-col > .panel,
.home-panels-flex-row > .home-panel-col > .profile-card {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.home-panels-flex-row > .home-panel-col > .panel > .panel-body,
.home-panels-flex-row > .home-panel-col > .panel > .list-group {
    flex: 1 1 auto;
}

.home-panels-flex-row > .home-panel-col[data-panel-name="__profile"] {
    order: 0;
}
.home-panels-flex-row > .home-panel-col[data-panel-name="Recent Invoices"],
.home-panels-flex-row > .home-panel-col[data-panel-name="Unpaid Invoices"],
.home-panels-flex-row > .home-panel-col[data-panel-name="Overdue Invoices"] {
    order: 1;
}
.home-panels-flex-row > .home-panel-col[data-panel-name="Recent News"] {
    order: 2;
}
.home-panels-flex-row > .home-panel-col[data-panel-name="Recent Support Tickets"] {
    order: 3;
}
/* full-width panels are pushed to the end: placed mid-list they cut a
   row in half and leave a hole beside the panel before them */
.home-panels-flex-row > .home-panel-col[data-panel-name="Active Products/Services"] {
    order: 20;
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

@media (max-width: 767px) {
    .home-panels-flex-row > .home-panel-col {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* ============================================================
   "Unpaid Invoices" summary panel — highlight the amount in red
   ============================================================ */
.invoice-summary-body {
    line-height: 1.7;
}
.invoice-amount-highlight {
    color: #f0554e;
    font-weight: 700;
}
.home-panel-col[data-panel-name="Unpaid Invoices"] .panel-title > i {
    background: #fde3e2 !important;
    color: #f0554e !important;
}

.ticket-view-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: flex-start;
}
.ticket-view-main {
    flex: 1 1 62%;
    min-width: 300px;
}
.ticket-view-side {
    flex: 1 1 28%;
    min-width: 260px;
}

.ticket-card-title {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 18px;
}

/* --- Reply / new-ticket form card --- */
.ticket-reply-card,
.ticket-form-card {
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    padding: 24px 26px;
    margin-bottom: 22px;
}
.ticket-reply-card label,
.ticket-form-card label {
    color: #55555f;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 6px;
}
.ticket-reply-card .form-control,
.ticket-form-card .form-control {
    border: 1px solid var(--db-border) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    color: #1a1a2e !important;
}
.ticket-reply-card textarea.form-control,
.ticket-form-card textarea.form-control {
    border-radius: 12px !important;
    min-height: 120px;
}
.ticket-reply-card select.form-control,
.ticket-form-card select.form-control,
.ticket-reply-card input.form-control,
.ticket-form-card input.form-control {
    height: 44px;
}

/* --- Attachment block (chip-style "Add File" button) --- */
.ticket-attach-block {
    margin: 4px 0 18px;
}

.ticket-attach-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: 10px;
    padding: 10px 18px;
    font-weight: 600 !important;
    font-size: 13.5px;
    color: #55555f !important;
    cursor: pointer;
    margin: 0 !important;
    transition: border-color .15s ease, color .15s ease;
}
.ticket-attach-btn:hover {
    border-color: var(--db-purple);
    color: var(--db-purple) !important;
}
.ticket-attach-btn i { color: var(--db-purple); }
.ticket-attach-input,
#fileUploadsContainer input[type="file"] {
    border: 1px solid var(--db-border);
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 13px;
    background: #fff;
    max-width: 260px;
}
.ticket-attach-more {
    background: transparent;
    border: none;
    color: var(--db-purple);
    font-weight: 600;
    font-size: 13px;
    padding: 6px 4px;
}
.ticket-attachments-message {
    font-size: 12px;
    color: #9a9aa5 !important;
    margin-top: 10px;
}

/* --- Send / cancel buttons --- */
.ticket-send-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    background: var(--db-purple) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 13px 20px !important;
    font-weight: 700 !important;
    font-size: 14.5px !important;
    box-shadow: 0 6px 18px rgba(108,78,245,0.22);
}
.ticket-send-btn:hover {
    background: var(--db-purple-dark) !important;
    color: #fff !important;
}
.ticket-form-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 6px;
}
.ticket-form-actions .ticket-send-btn { width: auto; padding: 13px 34px !important; }
.ticket-cancel-btn {
    border: 1px solid var(--db-border) !important;
    border-radius: 10px !important;
    color: #55555f !important;
    font-weight: 600;
    padding: 13px 26px !important;
    background: #fff !important;
}

/* --- Ticket information side card --- */
.ticket-info-card {
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    padding: 24px 26px;
    position: sticky;
    top: 20px;
}
.ticket-info-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ticket-info-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--db-border);
    font-size: 13.5px;
}
.ticket-info-list li:last-child { border-bottom: none; }
.ti-label {
    color: #9a9aa5;
    font-weight: 500;
    flex: 0 0 auto;
}
.ti-value {
    color: #1a1a2e;
    font-weight: 600;
    text-align: right;
}
.ticket-info-list .label.status {
    display: inline-block;
    border-radius: 20px;
    padding: 5px 14px;
    font-weight: 600;
    font-size: 11.5px;
    color: #fff !important;
    border: none !important;
    background: var(--db-purple);
}
.ticket-info-list .label.status-open { background: #17c690; }
.ticket-info-list .label.status-answered { background: #17c690; }
.ticket-info-list .label.status-customer-reply { background: #f7a94a; }
.ticket-info-list .label.status-closed { background: #9a9aa5; }

/* --- Support promo card (new ticket page) --- */
.support-promo-card .support-promo-text {
    color: #8a8a95;
    font-size: 13.5px;
    line-height: 1.85;
    margin-bottom: 20px;
}
.support-promo-contact {
    list-style: none;
    margin: 0;
    padding: 18px 0 0;
    border-top: 1px solid var(--db-border);
}
.support-promo-contact li {
    margin-bottom: 14px;
}
.spc-label {
    display: block;
    color: #9a9aa5;
    font-size: 12.5px;
    margin-bottom: 4px;
}
.support-promo-contact a {
    color: var(--db-purple) !important;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none !important;
}

@media (max-width: 991px) {
    .ticket-view-side { flex: 1 1 100%; }
    .ticket-info-card { position: static; }
}

/* ============================================================
   FOOTER — DED9 5-column layout
   ============================================================ */
.footer-columns h4.footer-subheading {
    margin-top: 22px;
}
.footer-brand-col .footer-logo {
    max-height: 46px;
    margin-bottom: 18px;
}
.footer-brand-col .footer-logo-text {
    font-size: 24px;
    font-weight: 800;
    color: #1a1a2e;
    margin-bottom: 18px;
}
.footer-payment-icons {
    display: flex;
    gap: 10px;
    margin-bottom: 22px;
}
.footer-payment-icons .pay-chip {
    background: #fff;
    border-radius: 8px;
    padding: 6px 12px;
    display: inline-flex;
    align-items: center;
    box-shadow: 0 2px 6px rgba(20,20,50,0.06);
}
.footer-payment-icons .pay-chip i {
    font-size: 24px;
    color: var(--db-purple);
    margin: 0;
}
.footer-contact-block .fc-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 14px;
}
.footer-contact-block .fc-label {
    font-weight: 700;
    color: #1a1a2e;
    font-size: 14px;
}
.footer-contact-block .fc-note {
    color: #8a8a95;
    font-size: 12.5px;
}
.footer-contact-block .fc-value {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--db-purple) !important;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none !important;
    margin-top: 6px;
}
.footer-contact-block .fc-value:hover { text-decoration: underline !important; }

/* ============================================================
   HEADER + MAIN MENU — polished pass
   ============================================================ */
section#header {
    background: #fff;
    border-bottom: 1px solid var(--db-border);
    padding: 16px 0;
    border-radius: 0;
}
section#header .logo img { max-height: 42px; }
section#header .logo-text {
    color: #1a1a2e;
    font-weight: 800;
    font-size: 23px;
    letter-spacing: -0.4px;
}

ul.top-nav { margin-top: 4px; }
ul.top-nav > li > a {
    color: #55555f;
    font-size: 13.5px;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 8px;
    transition: color .18s ease, background .18s ease;
}
ul.top-nav > li > a:hover {
    color: var(--db-purple);
    background: var(--db-purple-light);
}
ul.top-nav > li.primary-action > a.btn {
    background: var(--db-purple);
    border-color: var(--db-purple);
    border-radius: 10px;
    color: #fff;
    font-weight: 600;
    padding: 9px 22px;
    box-shadow: 0 6px 16px rgba(108,78,245,0.22);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
ul.top-nav > li.primary-action > a.btn:hover {
    background: var(--db-purple-dark);
    border-color: var(--db-purple-dark);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(108,78,245,0.3);
}
ul.top-nav .label-info {
    background: #17c690 !important;
    border-radius: 20px;
    font-size: 10px;
    padding: 3px 8px;
}

/* --- main purple menu bar --- */
section#main-menu {
    background: var(--db-purple) !important;
    border: none;
    box-shadow: 0 4px 16px rgba(108,78,245,0.18);
}
section#main-menu .navbar-nav > li > a {
    color: rgba(255,255,255,0.92) !important;
    font-weight: 600;
    font-size: 14px;
    padding: 17px 20px;
    position: relative;
    transition: background .18s ease, color .18s ease;
}
section#main-menu .navbar-nav > li > a i {
    margin-right: 7px;
    opacity: .9;
}
section#main-menu .navbar-nav > li > a:hover,
section#main-menu .navbar-nav > li > a:focus {
    background: rgba(255,255,255,0.14) !important;
    color: #fff !important;
}
/* animated underline on the active item */
section#main-menu .navbar-nav > li.active > a {
    background: rgba(255,255,255,0.18) !important;
    color: #fff !important;
}
section#main-menu .navbar-nav > li.active > a::after {
    content: "";
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 8px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    animation: db-underline-in .3s ease;
}
@keyframes db-underline-in {
    from { transform: scaleX(0); opacity: 0; }
    to   { transform: scaleX(1); opacity: 1; }
}
section#main-menu .dropdown-menu {
    border-radius: 12px;
    border: none;
    padding: 8px;
    margin-top: 4px;
    box-shadow: 0 16px 40px rgba(20,20,50,0.16);
    animation: db-dropdown-in .18s ease;
}
@keyframes db-dropdown-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
section#main-menu .dropdown-menu > li > a {
    font-size: 13.5px;
    padding: 10px 14px;
    border-radius: 8px;
    color: #55555f;
    transition: background .15s ease, color .15s ease;
}
section#main-menu .dropdown-menu > li > a:hover {
    background: var(--db-purple-light);
    color: var(--db-purple);
}
section#main-menu .dropdown-menu .divider { background: var(--db-border); }
section#main-menu .navbar-toggle .icon-bar { background: #fff; }

/* ============================================================
   GLOBAL MOTION — subtle, tasteful, respects reduced-motion
   ============================================================ */

/* smooth colour/shadow transitions everywhere */
a,
.btn,
.panel,
.stat-card,
.list-group-item,
.form-control,
.dept-select-card,
.tickets-table tbody tr,
.services-table tbody tr,
.footer-link-list a {
    transition: color .18s ease,
                background-color .18s ease,
                border-color .18s ease,
                box-shadow .2s ease,
                transform .2s ease;
}

/* page content fades up on load */
section#main-body .main-content {
    animation: db-page-in .38s ease both;
}
@keyframes db-page-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* dashboard cards stagger in */
.dashboard-hero { animation: db-fade-up .45s ease both; }
.dashboard-stats .stat-card { animation: db-fade-up .45s ease both; }
.dashboard-stats .row > div:nth-child(1) .stat-card { animation-delay: .04s; }
.dashboard-stats .row > div:nth-child(2) .stat-card { animation-delay: .10s; }
.dashboard-stats .row > div:nth-child(3) .stat-card { animation-delay: .16s; }
.dashboard-stats .row > div:nth-child(4) .stat-card { animation-delay: .22s; }
.home-panels-flex-row > .home-panel-col { animation: db-fade-up .45s ease both; animation-delay: .12s; }

@keyframes db-fade-up {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* card lift on hover */
.dept-select-card:hover,
.stat-card:hover,
.tickets-table tbody tr:hover {
    transform: translateY(-3px);
}

/* focus rings in brand colour */
.form-control:focus {
    border-color: var(--db-purple) !important;
    box-shadow: 0 0 0 3px rgba(108,78,245,0.14) !important;
    outline: none !important;
}

/* buttons get a gentle press feedback */
.btn:active { transform: translateY(1px); }

/* accessibility: users who prefer reduced motion get none of it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   MARKDOWN EDITOR — modernise the stock bootstrap-markdown widget
   ============================================================ */
.md-editor,
div.md-editor.active {
    border: 1px solid var(--db-border) !important;
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: none !important;
    transition: border-color .18s ease, box-shadow .18s ease;
}


/* toolbar */
.md-editor > .btn-toolbar {
    background-color: #fbfbfd !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid var(--db-border);
    margin: 0 !important;
}
.md-editor > .btn-toolbar .btn-group {
    margin-right: 8px;
}
.md-editor > .btn-toolbar .btn {
    background: #fff !important;
    border: 1px solid var(--db-border) !important;
    color: #55555f !important;
    border-radius: 8px !important;
    padding: 6px 11px !important;
    margin-right: 4px;
    font-size: 13px;
    box-shadow: none !important;
    transition: all .15s ease;
}
.md-editor > .btn-toolbar .btn:hover {
    background: var(--db-purple-light) !important;
    border-color: var(--db-purple) !important;
    color: var(--db-purple) !important;
}
.md-editor > .btn-toolbar .btn.active,
.md-editor > .btn-toolbar .btn-primary,
.md-editor > .btn-toolbar .btn-success {
    background: var(--db-purple) !important;
    border-color: var(--db-purple) !important;
    color: #fff !important;
}
.md-editor > .btn-toolbar .btn i { color: inherit !important; }

/* textarea + preview pane */
.md-editor > textarea.markdown-editor,
.md-editor > .md-preview {
    padding: 16px !important;
    border-top: none !important;
    border-bottom: 1px solid var(--db-border) !important;
    background-color: #fff !important;
    font-size: 14.5px;
    line-height: 1.7;
    color: #1a1a2e;
    resize: vertical;
}
.md-editor > textarea.markdown-editor:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* status bar (lines / words / autosaving) */
.markdown-editor-status {
    padding: 9px 14px !important;
    font-size: 12px !important;
    color: #a8a8b3 !important;
    background: #fbfbfd;
    text-align: right;
}

/* ============================================================
   HEADER — flex layout (logo | marketing nav | actions)
   ============================================================ */
section#header .header-inner {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
}
section#header .logo {
    float: none !important;
    margin: 0 !important;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    transition: transform .2s ease;
}
section#header .logo:hover { transform: scale(1.03); }

.header-marketing-nav {
    display: flex;
    align-items: center;
    gap: 26px;
    flex: 1 1 auto;
    flex-wrap: wrap;
}
.header-marketing-nav a {
    position: relative;
    color: #2b2b3a !important;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none !important;
    padding: 4px 0;
    transition: color .18s ease;
}
.header-marketing-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background: var(--db-purple);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .25s cubic-bezier(.4,0,.2,1);
}
.header-marketing-nav a:hover { color: var(--db-purple) !important; }
.header-marketing-nav a:hover::after { transform: scaleX(1); }

section#header ul.top-nav {
    float: none !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    list-style: none;
    padding: 0;
}
section#header ul.top-nav > li { float: none !important; }
section#header ul.top-nav > li > a i { margin-right: 5px; opacity: .8; }

@media (max-width: 991px) {
    section#header .header-inner { justify-content: center; gap: 16px; }
    .header-marketing-nav { order: 3; flex: 1 1 100%; justify-content: center; gap: 18px; }
    .header-marketing-nav a { font-size: 13px; }
}

/* ============================================================
   PURPLE MENU — icon chips + hover shimmer
   ============================================================ */
section#main-menu .navbar-nav > li > a i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    margin-right: 8px;
    opacity: .95;
    transition: transform .2s ease;
}
section#main-menu .navbar-nav > li > a:hover i {
    transform: translateY(-2px) scale(1.08);
}
section#main-menu .navbar-nav > li > a .badge {
    background: #f7b733 !important;
    color: #4a3000 !important;
    font-weight: 700;
    border-radius: 20px;
    padding: 3px 8px;
    font-size: 10.5px;
    margin-left: 4px;
}
section#main-menu .navbar-nav > li > a .caret {
    transition: transform .2s ease;
}
section#main-menu .navbar-nav > li.open > a .caret {
    transform: rotate(180deg);
}

/* ============================================================
   EXTRA MOTION — richer, still tasteful
   ============================================================ */

/* header slides down on first paint */
section#header  { animation: db-slide-down .45s ease both; }
section#main-menu { animation: db-slide-down .5s ease both; animation-delay: .05s; }
@keyframes db-slide-down {
    from { opacity: 0; transform: translateY(-14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* footer fades in */
section#footer.site-footer { animation: db-fade-in .5s ease both; }
@keyframes db-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* generic panels / cards rise in */
.panel,
.services-card,
.tickets-card,
.ticket-reply-card,
.ticket-form-card,
.ticket-info-card,
.profile-card,
.quicklinks-card,
.domain-pricing-panel,
.checkout-order-summary {
    animation: db-fade-up .45s ease both;
}

/* table rows cascade in */
.services-table tbody tr,
.tickets-table tbody tr {
    animation: db-row-in .35s ease both;
}
.services-table tbody tr:nth-child(1),
.tickets-table tbody tr:nth-child(1) { animation-delay: .03s; }
.services-table tbody tr:nth-child(2),
.tickets-table tbody tr:nth-child(2) { animation-delay: .06s; }
.services-table tbody tr:nth-child(3),
.tickets-table tbody tr:nth-child(3) { animation-delay: .09s; }
.services-table tbody tr:nth-child(4),
.tickets-table tbody tr:nth-child(4) { animation-delay: .12s; }
.services-table tbody tr:nth-child(5),
.tickets-table tbody tr:nth-child(5) { animation-delay: .15s; }
@keyframes db-row-in {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* status pills pop in */
.label.status {
    animation: db-pop-in .3s cubic-bezier(.34,1.56,.64,1) both;
    animation-delay: .18s;
}
@keyframes db-pop-in {
    from { opacity: 0; transform: scale(.7); }
    to   { opacity: 1; transform: scale(1); }
}

/* stat circles draw attention on hover */
.stat-card .stat-circle {
    transition: transform .25s cubic-bezier(.34,1.56,.64,1),
                background-color .2s ease,
                color .2s ease;
}
.stat-card:hover .stat-circle {
    transform: scale(1.08);
    background: var(--db-purple);
    color: #fff;
}
.stat-card .stat-card-topicon { transition: transform .25s ease, opacity .2s ease; }
.stat-card:hover .stat-card-topicon { transform: rotate(-8deg) scale(1.1); opacity: 1; }

/* hero illustration gentle float */
.hero-mock-cards { animation: db-float 5s ease-in-out infinite; }
.hero-badge-1 { animation: db-float 4.2s ease-in-out infinite; }
.hero-badge-2 { animation: db-float 5.4s ease-in-out infinite .3s; }
.hero-badge-3 { animation: db-float 4.8s ease-in-out infinite .6s; }
.hero-badge-4 { animation: db-float 5.8s ease-in-out infinite .9s; }
@keyframes db-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}

/* CTA buttons get a sliding sheen on hover */
.dashboard-hero-btn,
.tickets-new-btn,
.ticket-send-btn,
.btn-checkout-summary {
    position: relative;
    overflow: hidden;
}
.dashboard-hero-btn::after,
.tickets-new-btn::after,
.ticket-send-btn::after,
.btn-checkout-summary::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(120deg,
                rgba(255,255,255,0) 0%,
                rgba(255,255,255,0.35) 50%,
                rgba(255,255,255,0) 100%);
    transform: skewX(-20deg);
    transition: left .55s ease;
    pointer-events: none;
}
.dashboard-hero-btn:hover::after,
.tickets-new-btn:hover::after,
.ticket-send-btn:hover::after,
.btn-checkout-summary:hover::after {
    left: 130%;
}

/* smooth anchor scrolling site-wide */
html { scroll-behavior: smooth; }

/* nicer text selection */
/* text selection is defined once, near the end of this file */

/* branded scrollbar (WebKit) */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #f2f2f7; }
::-webkit-scrollbar-thumb {
    background: #c9c4e8;
    border-radius: 10px;
    border: 2px solid #f2f2f7;
}
::-webkit-scrollbar-thumb:hover { background: var(--db-purple); }

/* ============================================================
   TICKET ATTACHMENTS — working picker + visible file chips
   (see includes/ticket-attachments.tpl)
   ============================================================ */
.ticket-attach-block {
    margin: 4px 0 20px;
}
.ticket-attach-block .attach-title {
    display: block;
    color: #1a1a2e !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    margin-bottom: 10px;
}
.ticket-attach-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

/* both buttons share one look so they feel like a set */
.ticket-attach-block .ticket-attach-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: 10px;
    padding: 11px 20px;
    font-weight: 600;
    font-size: 13.5px;
    color: #55555f;
    cursor: pointer;
    margin: 0;
    line-height: 1;
    transition: border-color .16s ease, color .16s ease,
                background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.ticket-attach-block .ticket-attach-btn i { color: var(--db-purple); font-size: 14px; }
.ticket-attach-block .ticket-attach-btn:hover {
    border-color: var(--db-purple);
    color: var(--db-purple);
    background: var(--db-purple-light);
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(108,78,245,0.15);
}
.ticket-attach-block .ticket-attach-btn:active { transform: translateY(0); }

/* the real inputs stay in the DOM (so they submit) but are visually hidden */
.ticket-attach-block .ticket-attach-input,
.ticket-attach-block #fileUploadsContainer input[type="file"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* selected-file chips — this is the feedback that was missing */
.ticket-file-chips {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ticket-file-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--db-purple-light);
    border: 1px solid rgba(108,78,245,0.22);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 13px;
    color: #1a1a2e;
    max-width: 100%;
    animation: db-pop-in .25s cubic-bezier(.34,1.56,.64,1) both;
}
.ticket-file-chip > i { color: var(--db-purple); }
.ticket-file-chip .tfc-name {
    font-weight: 600;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ticket-file-chip .tfc-size {
    color: #8a8a95;
    font-size: 11.5px;
}
.ticket-file-chip .tfc-remove {
    background: transparent;
    border: none;
    color: #8a8a95;
    font-size: 18px;
    line-height: 1;
    padding: 0 0 0 2px;
    cursor: pointer;
    transition: color .15s ease, transform .15s ease;
}
.ticket-file-chip .tfc-remove:hover {
    color: #f0554e;
    transform: scale(1.15);
}

.ticket-attach-block .ticket-attachments-message {
    font-size: 12px;
    color: #9a9aa5 !important;
    margin-top: 12px;
}

/* ============================================================
   HEADER / MENU — final corrective pass
   Overrides css/overrides.css (a third stylesheet that ships with
   the theme and hard-codes the old blue palette on .navbar-main).
   ============================================================ */

/* --- 1. keep the top header on ONE line --- */
section#header .header-inner {
    flex-wrap: nowrap;
    gap: 20px;
}
section#header .logo { flex: 0 0 auto; }
.header-marketing-nav {
    flex: 1 1 auto;
    min-width: 0;
    gap: 20px;
    justify-content: flex-start;
    overflow: hidden;
}
.header-marketing-nav a {
    white-space: nowrap;
    font-size: 13.5px;
}
section#header ul.top-nav {
    flex: 0 0 auto;
    white-space: nowrap;
}
section#header ul.top-nav > li > a { white-space: nowrap; }

@media (max-width: 1199px) {
    .header-marketing-nav { gap: 14px; }
    .header-marketing-nav a { font-size: 13px; }
}
@media (max-width: 991px) {
    section#header .header-inner { flex-wrap: wrap; justify-content: space-between; }
    .header-marketing-nav {
        order: 3;
        flex: 1 1 100%;
        justify-content: center;
        overflow: visible;
        flex-wrap: wrap;
        margin-top: 6px;
    }
}

/* --- 2. purple menu bar: beat overrides.css on every state --- */
.navbar-main,
section#main-menu .navbar-main {
    background-color: transparent !important;
    border: 0 !important;
    min-height: 0 !important;
    font-family: 'Poppins', sans-serif !important;
    margin-bottom: 0 !important;
}
.navbar-main .navbar-nav > li > a,
section#main-menu .navbar-main .navbar-nav > li > a {
    color: rgba(255,255,255,0.94) !important;
    padding-top: 17px !important;
    padding-bottom: 17px !important;
}
.navbar-main .navbar-nav > li > a:hover,
.navbar-main .navbar-nav > li > a:focus,
.navbar-main .navbar-nav > .active > a,
.navbar-main .navbar-nav > .active > a:hover,
.navbar-main .navbar-nav > .active > a:focus,
.navbar-main .navbar-nav > .open > a,
.navbar-main .navbar-nav > .open > a:hover,
.navbar-main .navbar-nav > .open > a:focus {
    color: #fff !important;
    background-color: rgba(255,255,255,0.16) !important;
}

/* --- 3. the "Hello, username" account item (was dark navy) --- */
.navbar-main li.account,
section#main-menu li.account {
    background-color: rgba(255,255,255,0.14) !important;
    border-radius: 10px;
    margin: 7px 0 7px 8px;
    overflow: hidden;
    transition: background-color .18s ease;
}
.navbar-main li.account:hover,
section#main-menu li.account:hover {
    background-color: rgba(255,255,255,0.24) !important;
}
.navbar-main li.account > a,
section#main-menu li.account > a {
    color: #fff !important;
    font-weight: 600 !important;
    padding: 10px 18px !important;
    display: inline-flex !important;
    align-items: center;
    gap: 9px;
    background: transparent !important;
}
/* avatar bubble — inline SVG so it does not depend on the icon font */
.navbar-main li.account > a::before {
    content: "";
    display: inline-block;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 13px 13px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236c4ef5'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2c-4.42 0-8 2.24-8 5v1a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-1c0-2.76-3.58-5-8-5z'/%3E%3C/svg%3E");
    flex-shrink: 0;
}
.navbar-main li.account > a .caret { margin-left: 2px; }

/* --- 4. dropdown menus: rounded card instead of square grey box --- */
.navbar-main .dropdown-menu,
section#main-menu .navbar-main .dropdown-menu {
    padding: 8px !important;
    border: none !important;
    border-top: 0 !important;
    border-radius: 12px !important;
    min-width: 210px;
    margin-top: 6px !important;
    box-shadow: 0 16px 40px rgba(20,20,50,0.16) !important;
}
.navbar-main .navbar-nav .dropdown-menu > li > a {
    padding: 10px 14px !important;
    border-radius: 8px !important;
    color: #55555f !important;
    font-size: 13.5px !important;
    white-space: nowrap;
}
.navbar-main .navbar-nav .dropdown-menu > li > a:hover,
.navbar-main .navbar-nav .dropdown-menu > li > a:focus,
.navbar-main .navbar-nav .dropdown-menu > .active > a,
.navbar-main .navbar-nav .dropdown-menu > .active > a:hover,
.navbar-main .navbar-nav .dropdown-menu > .active > a:focus,
.navbar-main .navbar-nav .dropdown-menu > .open > a {
    color: var(--db-purple) !important;
    background-color: var(--db-purple-light) !important;
}
.navbar-main .dropdown-menu .divider {
    background-color: var(--db-border) !important;
    margin: 6px 4px;
}

/* remove the stock negative margins that made the menu hug the edges */
#main-menu .navbar-nav {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* --- 5. top-nav polish (language / notifications / logout) --- */
ul.top-nav > li.primary-action {
    padding-left: 14px;
    margin-left: 6px;
    border-left: 1px solid var(--db-border);
}
ul.top-nav > li.primary-action > a.btn {
    background-color: var(--db-purple) !important;
    border-radius: 10px !important;
    padding: 10px 22px !important;
    color: #fff !important;
}
ul.top-nav .label-info {
    background: #17c690 !important;
    color: #fff !important;
    border-radius: 20px;
    font-size: 9.5px;
    font-weight: 700;
    padding: 3px 9px;
    letter-spacing: .4px;
    vertical-align: middle;
}
ul.top-nav > li > a.btn-logged-in-admin {
    font-size: 1.15em;
    color: #8a8a95 !important;
    padding: 8px 10px;
}
ul.top-nav > li > a.btn-logged-in-admin:hover {
    color: var(--db-purple) !important;
}

/* ============================================================
   DROPDOWN VISIBILITY FIXES
   1) li.account must NOT clip its own dropdown (overflow:hidden
      on the <li> was hiding the account menu entirely).
   2) Cards animate with transform, which creates new stacking
      contexts that paint above the navbar — so the header and
      menu get an explicit, higher stacking layer.
   ============================================================ */
.navbar-main li.account,
section#main-menu li.account {
    overflow: visible !important;
}

/* header + menu sit above all page content */
section#header {
    position: relative;
    z-index: 1040;
}
section#main-menu {
    position: relative;
    z-index: 1035;
}
section#main-body,
section#footer {
    position: relative;
    z-index: 1;
}

/* the dropdown panels themselves */
.navbar-main .dropdown-menu,
section#main-menu .dropdown-menu,
ul.top-nav .popover {
    z-index: 1060 !important;
}

/* the open parent item stays above its siblings */
.navbar-main .navbar-nav > li.open,
section#main-menu .navbar-nav > li.open {
    z-index: 1050;
    position: relative;
}

/* account item: keep rounded corners without clipping children */
.navbar-main li.account > a,
section#main-menu li.account > a {
    border-radius: 10px;
}

/* ============================================================
   HEADER MARKETING NAV — never wrap to a second line on desktop
   (the links themselves still had flex-wrap:wrap, so they broke
   onto a second row once the row got tight)
   ============================================================ */
.header-marketing-nav {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -ms-overflow-style: none;   /* IE/Edge */
    scrollbar-width: none;      /* Firefox */
}
.header-marketing-nav::-webkit-scrollbar { display: none; }
.header-marketing-nav a { flex: 0 0 auto; }

/* progressively tighten instead of breaking the line */
@media (max-width: 1280px) {
    section#header .header-inner { gap: 16px; }
    .header-marketing-nav { gap: 16px; }
    .header-marketing-nav a { font-size: 13px; }
}
@media (max-width: 1100px) {
    .header-marketing-nav { gap: 12px; }
    .header-marketing-nav a { font-size: 12.5px; }
    ul.top-nav > li.primary-action > a.btn { padding: 9px 16px !important; }
}

/* below this the nav drops to its own full-width row and may wrap */
@media (max-width: 991px) {
    .header-marketing-nav {
        flex-wrap: wrap !important;
        overflow: visible;
        justify-content: center;
        gap: 16px;
    }
    .header-marketing-nav a { font-size: 13px; }
}

/* ============================================================
   PURPLE MENU BAR — definitive vertical alignment
   Forces every item onto one centred flex row so nothing can
   sit top-aligned or inflate the bar height.
   ============================================================ */
section#main-menu .navbar-main,
section#main-menu .navbar-main .container {
    min-height: 0 !important;
}
section#main-menu .navbar-collapse {
    padding-left: 0 !important;
    padding-right: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

@media (min-width: 768px) {
    section#main-menu .navbar-collapse {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }
    section#main-menu .navbar-nav {
        display: flex !important;
        align-items: center;
        float: none !important;
        margin: 0 !important;
    }
    section#main-menu .navbar-nav.navbar-right {
        margin-left: auto !important;
    }
    section#main-menu .navbar-nav > li {
        display: flex;
        align-items: center;
        float: none !important;
    }
    /* uniform link height across the whole bar */
    section#main-menu .navbar-nav > li > a,
    .navbar-main .navbar-nav > li > a {
        display: flex !important;
        align-items: center;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        height: 52px;
        line-height: 1 !important;
    }
    /* account chip: inset inside the bar, vertically centred */
    section#main-menu li.account,
    .navbar-main li.account {
        margin: 0 0 0 10px !important;
        align-self: center;
    }
    section#main-menu li.account > a,
    .navbar-main li.account > a {
        height: 38px;
        padding: 0 18px !important;
    }
}

/* dropdowns hang from the bottom edge of the bar */
@media (min-width: 768px) {
    section#main-menu .navbar-nav > li > .dropdown-menu {
        top: 100%;
        margin-top: 4px !important;
    }
}

/* ============================================================
   DASHBOARD DENSITY PASS
   The cards had generous padding relative to how little content
   they hold, which made the page read as "zoomed in". This
   tightens the vertical rhythm without losing the airy look.
   ============================================================ */

/* hero: less top/bottom air */
.dashboard-hero {
    padding: 26px 30px;
    margin-bottom: 18px;
}
.dashboard-hero-content h2 { font-size: 23px; margin-bottom: 10px; }
.dashboard-hero-content p  { font-size: 14px; margin-bottom: 18px; }
.dashboard-hero-btn { padding: 10px 22px; font-size: 13.5px; }
.dashboard-hero-illustration { min-height: 150px; }

/* stat cards: shorter */
.dashboard-stats { margin-bottom: 18px; }
.stat-card { padding: 20px 14px 16px; }
.stat-circle {
    width: 48px; height: 48px; line-height: 46px;
    font-size: 19px; margin-bottom: 10px;
}
.stat-card-title { font-size: 13.5px; }
.stat-card-topicon { top: 13px; right: 15px; font-size: 13px; }

/* panels: tighter body + consistent minimum height so paired
   cards don't look lopsided when one has little content */
.client-home-panels .panel-heading,
.client-home-panels .panel > .panel-heading {
    padding: 14px 18px !important;
}
.client-home-panels .panel-title,
.client-home-panels .panel > .panel-heading .panel-title {
    font-size: 14.5px;
}
.client-home-panels .panel-body,
.client-home-panels .panel > .panel-body {
    padding: 16px 18px !important;
    font-size: 13.5px;
}
.client-home-panels .list-group-item,
.client-home-panels .panel > .list-group .list-group-item {
    padding: 12px 18px !important;
    font-size: 13.5px;
}
.client-home-panels .panel-footer {
    padding: 10px 18px;
}

/* profile card: match the tightened panels */
.profile-card { padding: 20px 22px; }
.profile-card h3 { font-size: 14px; margin-bottom: 14px; }
.profile-card-body { margin-bottom: 14px; gap: 12px; }
.profile-avatar { width: 42px; height: 42px; font-size: 14px; }
.profile-btn { padding: 8px 16px; font-size: 13px; margin-bottom: 14px; }
.profile-meta { padding-top: 12px; }
.profile-meta li { font-size: 13px; padding: 4px 0; }

/* row gutters */
.home-panels-flex-row > .home-panel-col { margin-bottom: 4px; }
.client-home-panels .panel { margin-bottom: 18px; }

/* page heading */
.dashboard-hello { font-size: 25px; margin: 6px 0 16px; }

@media (max-width: 767px) {
    .dashboard-hero { padding: 20px; }
    .dashboard-hero-content h2 { font-size: 20px; }
}

/* ============================================================
   MY SUPPORT TICKETS — page intro, status summary, empty state
   ============================================================ */
.tickets-intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin: 2px 0 20px;
}
.tickets-intro-text h2 {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 700;
    color: #1a1a2e;
}
.tickets-intro-text p {
    margin: 0;
    color: #8a8a95;
    font-size: 14px;
}

/* --- status summary chips (also act as filters) --- */
.tkt-summary-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 22px;
}
@media (max-width: 900px) {
    .tkt-summary-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
    .tkt-summary-row { grid-template-columns: repeat(2, 1fr); }
}

.tkt-summary-chip {
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: 14px;
    padding: 16px 18px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.tkt-summary-chip::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--db-purple);
    opacity: .9;
}
.tkt-summary-chip:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(20,20,50,0.08);
    border-color: rgba(108,78,245,0.3);
}
.tkt-summary-chip .tsc-num {
    display: block;
    font-size: 24px;
    font-weight: 800;
    color: #1a1a2e;
    line-height: 1.1;
}
.tkt-summary-chip .tsc-label {
    display: block;
    margin-top: 4px;
    font-size: 12.5px;
    font-weight: 600;
    color: #8a8a95;
}
.tkt-summary-chip.is-progress::before  { background: #00bcd4; }
.tkt-summary-chip.is-open::before     { background: #17c690; }
.tkt-summary-chip.is-answered::before { background: var(--db-purple); }
.tkt-summary-chip.is-reply::before    { background: #f7a94a; }
.tkt-summary-chip.is-closed::before   { background: #9a9aa5; }

/* --- empty state --- */
.tickets-empty-state {
    background: #fff;
    border: 1px dashed var(--db-border);
    border-radius: var(--db-radius);
    padding: 54px 24px;
    text-align: center;
    margin-top: 4px;
}
.tickets-empty-state .tes-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: var(--db-purple-light);
    color: var(--db-purple);
    font-size: 26px;
    margin-bottom: 18px;
}
.tickets-empty-state h3 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
    color: #1a1a2e;
}
.tickets-empty-state p {
    color: #8a8a95;
    font-size: 14px;
    margin-bottom: 22px;
}

/* ============================================================
   HOME PANEL CONTENT — refinement pass (smaller, tidier)
   NOTE: .div-service-status uses an absolutely-positioned
   .label-placeholder that JS measures to size the status column,
   so padding/font changes are applied to BOTH labels equally to
   keep that measurement correct.
   ============================================================ */

/* header: smaller icon bubble + title */
.client-home-panels .panel-title > i {
    width: 24px;
    height: 24px;
    font-size: 11px;
    margin-right: 2px;
}
.client-home-panels .panel-title,
.client-home-panels .panel > .panel-heading .panel-title {
    font-size: 14px;
    letter-spacing: -0.1px;
}
.client-home-panels .panel-title .pull-right .btn,
.client-home-panels .panel-title .btn {
    font-size: 12.5px;
}

/* list rows: tighter */
.client-home-panels .list-group-item,
.client-home-panels .panel > .list-group .list-group-item {
    padding: 11px 18px !important;
    font-size: 13px;
    line-height: 1.55;
}

/* news / announcement rows */
.client-home-panels .list-group-item .text-last-updated {
    display: block;
    margin-top: 2px;
    color: #a5a5b0 !important;
    font-size: 11.5px;
}

/* --- Active Products/Services row --- */
.client-home-panels .div-service-item {
    padding: 3px 0;
    gap: 2px;
}
.client-home-panels .div-service-status .label {
    padding: 4px 10px !important;
    font-size: 10.5px !important;
    font-weight: 700;
    border-radius: 20px !important;
    letter-spacing: .2px;
}
.client-home-panels .div-service-name {
    margin-left: 12px;
    margin-right: 12px;
}
.client-home-panels .div-service-name .font-weight-bold {
    font-size: 13.5px !important;
    line-height: 1.4;
}
.client-home-panels .div-service-name .text-domain {
    font-size: 11.5px !important;
    color: #a5a5b0 !important;
    line-height: 1.4;
}
.client-home-panels .div-service-buttons .btn-view-details {
    font-size: 11.5px !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    line-height: 1.2;
}
.client-home-panels .div-service-buttons .btn-view-details i {
    margin-right: 4px;
    font-size: 11px;
}

/* --- Recent Support Tickets row --- */
.client-home-panels .recent-ticket,
.client-home-panels .list-group-item .label {
    vertical-align: middle;
}
.client-home-panels .list-group-item .label {
    padding: 3px 10px !important;
    font-size: 10.5px !important;
    font-weight: 700;
    border-radius: 20px !important;
    margin-left: 6px;
}

/* --- panel footer ("View More…") --- */
.client-home-panels .panel-footer {
    padding: 9px 18px !important;
    min-height: 0;
    background: #fcfcfe;
}
.client-home-panels .panel-footer a,
.client-home-panels .btn-view-more {
    font-size: 12px !important;
    font-weight: 600 !important;
}
.client-home-panels .panel-footer:empty {
    display: none !important;
}

/* empty-state block gets slimmer too */
.client-home-panels .empty-state-block {
    padding: 22px 10px 8px !important;
}
.client-home-panels .empty-state-icon {
    width: 46px; height: 46px; font-size: 18px; margin-bottom: 12px;
}
.client-home-panels .empty-state-title { font-size: 14.5px; margin-bottom: 10px; }
.client-home-panels .empty-state-cta { font-size: 13px; }

/* ============================================================
   MY PRODUCTS & SERVICES — card-row list
   ============================================================ */
.svc-summary-row { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1100px) { .svc-summary-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { .svc-summary-row { grid-template-columns: repeat(2, 1fr); } }
.svc-summary-chip.is-suspended::before  { background: #f0554e; }
.svc-summary-chip.is-terminated::before { background: #1a1a2e; }

.services-card {
    background: transparent;
    border: none;
    padding: 0;
    margin-top: 0;
}

/* tabs reuse the ticket pill styling via .tickets-status-tabs */
.services-card .tickets-status-tabs { margin-bottom: 18px; }

/* table becomes a stack of floating cards */
.services-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 12px !important;
}
.services-table thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
}
.services-table tbody tr {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: 16px;
    padding: 15px 20px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(20,20,50,0.03);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.services-table tbody tr:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(20,20,50,0.08);
    border-color: rgba(108,78,245,0.32);
    background: #fff;
}
.services-table tbody td {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
    vertical-align: middle;
}

/* icon */
.svc-icon-cell { flex: 0 0 auto; margin-right: 15px; }
.svc-avatar {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--db-purple-light);
    color: var(--db-purple);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
.svc-avatar img { max-width: 22px; max-height: 22px; }

/* name + domain */
.svc-main-cell {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.svc-name {
    color: #1a1a2e;
    font-size: 14.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.svc-domain-row {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}
.svc-domain {
    color: #9a9aa5;
    font-size: 12.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* small "open the site" action — keeps the row click free */
.svc-visit {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    color: #c4c4d0 !important;
    font-size: 10px;
    text-decoration: none !important;
    opacity: 0;
    transition: opacity .15s ease, background .15s ease, color .15s ease;
}
.services-table tbody tr:hover .svc-visit { opacity: 1; }
.svc-visit:hover {
    background: var(--db-purple-light);
    color: var(--db-purple) !important;
}
@media (hover: none) {
    .svc-visit { opacity: 1; }
}

/* price */
.svc-price-cell {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin: 0 24px;
    text-align: right;
}
.svc-amount {
    color: #1a1a2e;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
}
.svc-cycle {
    color: #9a9aa5;
    font-size: 11.5px;
    white-space: nowrap;
}

/* due date */
.svc-due-cell {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-right: 24px;
    text-align: right;
}
.svc-due-label {
    color: #a5a5b0;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .3px;
    white-space: nowrap;
}
.svc-due-date {
    color: #55555f;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

/* status pill */
.svc-status-cell { flex: 0 0 auto; }
.services-table .label.status {
    display: inline-block;
    border-radius: 20px;
    padding: 6px 15px;
    font-weight: 600;
    font-size: 11.5px;
    color: #fff;
    border: none;
    white-space: nowrap;
    min-width: 92px;
    text-align: center;
}
.services-table .label.status-active     { background: #17c690; }
.services-table .label.status-pending    { background: #f7a94a; }
.services-table .label.status-suspended  { background: #f0554e; }
.services-table .label.status-terminated { background: #1a1a2e; }
.services-table .label.status-cancelled  { background: #9a9aa5; }
.services-table .label.status-fraud      { background: #b02a24; }

@media (max-width: 900px) {
    .services-table tbody tr { flex-wrap: wrap; gap: 10px; padding: 14px 16px; }
    .svc-main-cell { flex: 1 1 60%; }
    .svc-price-cell, .svc-due-cell { margin: 0; align-items: flex-start; text-align: left; }
    .svc-price-cell { order: 3; flex: 1 1 40%; }
    .svc-due-cell   { order: 4; flex: 1 1 40%; }
    .svc-status-cell { order: 5; margin-left: auto; }
}

/* ============================================================
   DATATABLES CHROME — kill the stock dark toolbar / green rules
   (bundled all.min.css sets .dataTables_info to a #4f5360 bar
   with white text, plus green table header borders)
   ============================================================ */
.dataTables_wrapper .listtable {
    background: transparent !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper div.dataTables_info {
    margin: 0 !important;
    padding: 0 4px !important;
    background-color: transparent !important;
    border: 0 !important;
    color: #9a9aa5 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border-radius: 0 !important;
    text-align: left !important;
}
.dataTables_wrapper .dataTables_filter {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}
.dataTables_wrapper .dataTables_filter label { margin: 0; }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_filter .form-control {
    background: #fff !important;
    border: 1px solid var(--db-border) !important;
    border-radius: 10px !important;
    padding: 9px 14px !important;
    height: auto !important;
    width: 240px !important;
    box-shadow: none !important;
    font-size: 13.5px;
}


/* bottom bar: length menu + pagination */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_paginate {
    background: transparent !important;
    border: 0 !important;
    padding: 14px 4px 0 !important;
    color: #9a9aa5 !important;
    font-size: 13px;
}


.dataTables_wrapper .dataTables_paginate .pagination > li > a,
.dataTables_wrapper .dataTables_paginate .pagination > li > span {
    background: #fff !important;
    color: #55555f !important;
    border: 1px solid var(--db-border) !important;
    border-radius: 9px !important;
    margin-left: 5px;
    padding: 7px 13px;
    font-size: 13px;
    font-weight: 600;
    transition: all .15s ease;
}


/* remove the stock green/alternating header borders on card-style tables */
.dataTables_wrapper table.table-list thead th,
.dataTables_wrapper table.table-list thead th:nth-child(even),
.dataTables_wrapper table.table-list thead th.sorting_asc,
.dataTables_wrapper table.table-list thead th.sorting_desc {
    border-bottom: 1px solid var(--db-border) !important;
    background: transparent !important;
}

/* ============================================================
   DATATABLES TOOLBAR — hard override
   all.css sets: .dataTables_wrapper .dataTables_info {
       background-color:#4f5360; color:#fff; }  ← the dark bar
   and  div.dataTables_wrapper div.dataTables_info { padding:21px 30px }
   Both are matched below at equal-or-higher specificity.
   ============================================================ */
div.dataTables_wrapper div.dataTables_info,
.dataTables_wrapper .dataTables_info,
#tableServicesList_wrapper .dataTables_info,
#tableTicketsList_wrapper .dataTables_info {
    background: none !important;
    background-color: transparent !important;
    color: #9a9aa5 !important;
    border: 0 !important;
    border-bottom: 0 !important;
    border-radius: 0 !important;
    padding: 0 2px !important;
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-align: left !important;
    white-space: nowrap;
}

/* the wrapper row that holds "showing X entries" + the search box */
.dataTables_wrapper .listtable {
    background: transparent !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
    padding: 0 !important;
    border: 0 !important;
}

/* search box */
.dataTables_wrapper .dataTables_filter {
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    text-align: right;
}
.dataTables_wrapper .dataTables_filter label {
    margin: 0;
    font-weight: 400;
    color: #9a9aa5;
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_filter .form-control {
    background: #fff !important;
    border: 1px solid var(--db-border) !important;
    border-radius: 10px !important;
    padding: 9px 14px !important;
    height: auto !important;
    width: 230px !important;
    max-width: 100%;
    box-shadow: none !important;
    font-size: 13.5px;
    margin-left: 8px;
}
.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--db-purple) !important;
    box-shadow: 0 0 0 3px rgba(108,78,245,0.12) !important;
}

/* bottom row: length menu + pagination */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_paginate {
    background: transparent !important;
    border: 0 !important;
    padding: 14px 2px 0 !important;
    color: #9a9aa5 !important;
    font-size: 13px;
}
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--db-border) !important;
    border-radius: 8px !important;
    padding: 5px 8px !important;
    height: auto !important;
    color: #55555f;
    box-shadow: none !important;
}
.dataTables_wrapper .dataTables_paginate .pagination { margin: 0; }
.dataTables_wrapper .dataTables_paginate .pagination > li > a,
.dataTables_wrapper .dataTables_paginate .pagination > li > span {
    background: #fff !important;
    color: #55555f !important;
    border: 1px solid var(--db-border) !important;
    border-radius: 9px !important;
    margin-left: 5px;
    padding: 7px 13px;
    font-size: 13px;
    font-weight: 600;
}
.dataTables_wrapper .dataTables_paginate .pagination > li > a:hover {
    border-color: var(--db-purple) !important;
    color: var(--db-purple) !important;
    background: var(--db-purple-light) !important;
}
.dataTables_wrapper .dataTables_paginate .pagination > .active > a,
.dataTables_wrapper .dataTables_paginate .pagination > .active > span,
.dataTables_wrapper .dataTables_paginate .pagination > .active > a:hover,
.dataTables_wrapper .dataTables_paginate .pagination > .active > span:hover {
    background: var(--db-purple) !important;
    border-color: var(--db-purple) !important;
    color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .pagination > .disabled > a,
.dataTables_wrapper .dataTables_paginate .pagination > .disabled > span {
    color: #c8c8d0 !important;
    background: #fbfbfd !important;
}

/* stock green header borders on list tables */
.dataTables_wrapper table.table-list thead th,
.dataTables_wrapper table.table-list thead th:nth-child(even),
.dataTables_wrapper table.table-list thead th.sorting_asc,
.dataTables_wrapper table.table-list thead th.sorting_desc {
    border-bottom: 1px solid var(--db-border) !important;
    background: transparent !important;
}

/* intro block: no duplicate H2 anymore, so tighten it */
.tickets-intro { align-items: center; margin: 0 0 18px; }
.tickets-intro-text p { margin: 0; }

/* ============================================================
   ACCOUNT DETAILS — sectioned cards
   ============================================================ */
.account-form { max-width: 100%; }

.acct-card {
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    padding: 22px 24px 8px;
    margin-bottom: 18px;
    animation: db-fade-up .4s ease both;
}

.acct-card-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding-bottom: 18px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--db-border);
}
.acct-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 12px;
    background: var(--db-purple-light);
    color: var(--db-purple);
    font-size: 16px;
}
.acct-card-head h3 {
    margin: 0 0 3px;
    font-size: 16px;
    font-weight: 700;
    color: #1a1a2e;
}
.acct-card-head p {
    margin: 0;
    color: #9a9aa5;
    font-size: 13px;
}

/* two-column field grid */
.acct-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 20px;
}
.acct-grid .acct-span-2 { grid-column: 1 / -1; }
@media (max-width: 700px) {
    .acct-grid { grid-template-columns: 1fr; }
}

.acct-grid .form-group { margin-bottom: 18px; }
.acct-grid label {
    display: block;
    color: #55555f;
    font-weight: 600;
    font-size: 12.5px;
    margin-bottom: 7px;
}
.acct-grid .form-control,
.acct-grid select.form-control {
    border: 1px solid var(--db-border) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    height: 44px;
    font-size: 14px;
    color: #1a1a2e !important;
    background-color: #fff !important;
}
.acct-grid .form-control:disabled,
.acct-grid .form-control[disabled] {
    background-color: #f7f7fb !important;
    color: #9a9aa5 !important;
    cursor: not-allowed;
}
.acct-grid .form-control:focus {
    border-color: var(--db-purple) !important;
    box-shadow: 0 0 0 3px rgba(108,78,245,0.12) !important;
}

/* email preference cards */
.acct-pref-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding-bottom: 16px;
}
@media (max-width: 700px) {
    .acct-pref-grid { grid-template-columns: 1fr; }
}
.acct-pref {
    display: flex;
    align-items: center;
    gap: 11px;
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: 12px;
    padding: 13px 16px;
    margin: 0;
    font-weight: 500 !important;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.acct-pref:hover {
    border-color: rgba(108,78,245,0.4);
}
.acct-pref.is-on {
    border-color: var(--db-purple);
    background: var(--db-purple-light);
}
.acct-pref input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: #6c4ef5;
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
}
.acct-pref-text {
    font-size: 13.5px;
    color: #33333d;
}
.acct-pref.is-on .acct-pref-text {
    color: var(--db-purple);
    font-weight: 600;
}

/* marketing opt-in card */
.marketing-email-optin .acct-card-head { border-bottom: none; margin-bottom: 10px; }
.marketing-email-optin { padding-bottom: 20px; }

/* action bar */
.acct-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 4px 0 10px;
}
.acct-save-btn {
    background: var(--db-purple) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 10px !important;
    padding: 13px 34px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    box-shadow: 0 6px 18px rgba(108,78,245,0.22);
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.acct-save-btn:hover {
    background: var(--db-purple-dark) !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(108,78,245,0.3);
}
.acct-cancel-btn {
    background: #fff !important;
    border: 1px solid var(--db-border) !important;
    color: #55555f !important;
    border-radius: 10px !important;
    padding: 13px 26px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}
.acct-cancel-btn:hover {
    border-color: var(--db-purple) !important;
    color: var(--db-purple) !important;
}

/* ============================================================
   PHONE NUMBER FIELD (intl-tel-input)
   The country list ships with z-index:2, which loses against the
   card that follows it — each .acct-card creates its own stacking
   context because of the fade-up animation's transform. Raising
   the focused card and the list itself fixes the clipping.
   ============================================================ */
.acct-card { position: relative; z-index: 1; }
.acct-card:focus-within { z-index: 60; }

.intl-tel-input { width: 100%; display: block; }
.intl-tel-input .country-list {
    z-index: 1080 !important;
    border: 1px solid var(--db-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 16px 40px rgba(20,20,50,0.18) !important;
    max-height: 260px !important;
    overflow-y: auto !important;
    padding: 6px !important;
    margin-top: 4px !important;
    width: 320px;
    max-width: 90vw;
}
.intl-tel-input .country-list .country {
    padding: 9px 12px !important;
    border-radius: 8px;
    font-size: 13.5px;
    color: #33333d;
    line-height: 1.4;
    transition: background .12s ease, color .12s ease;
}
.intl-tel-input .country-list .country.highlight,
.intl-tel-input .country-list .country:hover {
    background-color: var(--db-purple-light) !important;
    color: var(--db-purple);
}
.intl-tel-input .country-list .country .country-name { margin-right: 6px; }
.intl-tel-input .country-list .country .dial-code { color: #9a9aa5; }
.intl-tel-input .country-list .divider {
    border-bottom: 1px solid var(--db-border) !important;
    margin: 6px 4px !important;
    padding-bottom: 6px !important;
}
.intl-tel-input .country-list::-webkit-scrollbar { width: 8px; }
.intl-tel-input .country-list::-webkit-scrollbar-thumb {
    background: #d5d0f0;
    border-radius: 8px;
}

/* the flag / dial-code selector button */
.intl-tel-input .flag-container { outline: none; }
.intl-tel-input .selected-flag {
    border-radius: 10px 0 0 10px;
    padding: 0 8px 0 12px;
    background: transparent;
    transition: background .15s ease;
}
.intl-tel-input .selected-flag:hover,
.intl-tel-input .flag-container:focus .selected-flag {
    background: var(--db-purple-light);
}
.intl-tel-input.allow-dropdown input,
.intl-tel-input.allow-dropdown input[type="tel"],
.intl-tel-input.allow-dropdown input[type="text"] {
    padding-left: 92px !important;
}

/* same protection anywhere else a phone field is used inside a card */
.ticket-form-card,
.ticket-reply-card,
.services-card,
.tickets-card { position: relative; }
.ticket-form-card:focus-within,
.ticket-reply-card:focus-within { z-index: 60; }

/* ============================================================
   USER MANAGEMENT AREA — shared styling
   Covers: Your Profile, Change Password, My Emails, Contacts,
   User Management, Security Settings. The last three keep their
   stock markup, so they are styled generically here rather than
   by rewriting their templates.
   ============================================================ */

/* verification / status badges */
.acct-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 3px 11px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    vertical-align: middle;
}
.acct-badge.is-ok   { background: #dcf6ec; color: #12a374; }
.acct-badge.is-warn { background: #fdecd2; color: #b3760f; }

/* generate-password button */
.acct-generate-btn {
    background: #fff !important;
    border: 1px solid var(--db-border) !important;
    color: #55555f !important;
    border-radius: 10px !important;
    padding: 11px 20px !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
}
.acct-generate-btn:hover {
    border-color: var(--db-purple) !important;
    color: var(--db-purple) !important;
    background: var(--db-purple-light) !important;
}
.acct-generate-btn i { color: var(--db-purple); margin-right: 6px; }

/* password strength meter */
.using-password-strength .progress {
    height: 6px;
    border-radius: 20px;
    background: #eceaf6;
    box-shadow: none;
    margin: 8px 0 4px;
}
.using-password-strength .progress-bar { border-radius: 20px; }
#pwStrengthText, .pwstrength-label {
    font-size: 12px;
    color: #8a8a95;
}
.has-feedback .form-control-feedback { top: 30px; color: #9a9aa5; }

/* --- My Emails list --- */
.emails-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 10px !important;
}
.emails-table thead {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0,0,0,0);
}
.emails-table tbody tr {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: 14px;
    padding: 13px 18px;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.emails-table tbody tr:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(20,20,50,0.07);
    border-color: rgba(108,78,245,0.3);
}
.emails-table tbody td {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
}
.eml-icon-cell { flex: 0 0 auto; margin-right: 14px; }
.eml-avatar {
    width: 38px; height: 38px;
    border-radius: 11px;
    background: var(--db-purple-light);
    color: var(--db-purple);
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
}
.eml-main-cell {
    flex: 1 1 auto; min-width: 0;
    display: flex; flex-direction: column; gap: 2px;
}
.eml-subject {
    color: #1a1a2e; font-size: 14px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.eml-clip { color: var(--db-purple); font-size: 11px; margin-left: 5px; }
.eml-date { color: #9a9aa5; font-size: 12px; }
.eml-action-cell { flex: 0 0 auto; margin-left: 14px; }
.eml-view-btn {
    background: #fff !important;
    border: 1px solid var(--db-border) !important;
    color: #55555f !important;
    border-radius: 9px !important;
    padding: 7px 15px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
}
.eml-view-btn:hover {
    border-color: var(--db-purple) !important;
    color: var(--db-purple) !important;
    background: var(--db-purple-light) !important;
}

/* --- generic pass for stock-markup pages (Contacts, Users, Security) --- */
.main-content > h2,
.main-content > form > h2 {
    font-size: 17px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 26px 0 14px;
}
.main-content > h2:first-child { margin-top: 4px; }

/* stock panels on those pages get the card treatment */
.main-content .panel:not(.panel-collapsable) {
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    box-shadow: none;
}
.main-content .panel:not(.panel-collapsable) > .panel-heading {
    background: #fff;
    border-bottom: 1px solid var(--db-border);
    padding: 15px 20px;
    border-radius: var(--db-radius) var(--db-radius) 0 0;
}
.main-content .panel:not(.panel-collapsable) > .panel-heading .panel-title {
    color: #1a1a2e;
    font-size: 14.5px;
    font-weight: 700;
}
.main-content .panel:not(.panel-collapsable) > .panel-body { padding: 20px; }

/* stock tables on those pages */
.main-content table.table:not(.table-list) {
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    overflow: hidden;
    background: #fff;
}
.main-content table.table:not(.table-list) > thead > tr > th {
    background: #fbfbfd !important;
    border-bottom: 1px solid var(--db-border) !important;
    color: #9a9aa5;
    font-weight: 600;
    font-size: 12.5px;
    padding: 13px 16px;
}
.main-content table.table:not(.table-list) > tbody > tr > td {
    border-top: 1px solid var(--db-border) !important;
    padding: 14px 16px;
    font-size: 13.5px;
    color: #33333d;
    vertical-align: middle;
}
.main-content table.table:not(.table-list) > tbody > tr:hover > td {
    background: var(--db-purple-light);
}

/* toggle switches (SSO, marketing opt-in) */
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary {
    background: var(--db-purple) !important;
    color: #fff !important;
}
.bootstrap-switch { border-radius: 20px !important; border-color: var(--db-border) !important; }
.bootstrap-switch .bootstrap-switch-handle-on,
.bootstrap-switch .bootstrap-switch-handle-off,
.bootstrap-switch .bootstrap-switch-label { padding: 6px 12px; font-size: 12.5px; }

/* linked-accounts tiles (Security Settings) */
.main-content .provider-link-container,
.main-content .linked-account {
    border: 1px solid var(--db-border) !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
}

/* generic primary/secondary buttons on these pages */
.main-content .btn-primary {
    background: var(--db-purple) !important;
    border-color: var(--db-purple) !important;
    border-radius: 10px !important;
    font-weight: 700;
    padding: 11px 26px;
}
.main-content .btn-primary:hover {
    background: var(--db-purple-dark) !important;
    border-color: var(--db-purple-dark) !important;
}
.main-content .btn-default {
    border-radius: 10px !important;
    border: 1px solid var(--db-border) !important;
    color: #55555f !important;
    background: #fff !important;
    font-weight: 600;
}
.main-content .btn-danger {
    border-radius: 10px !important;
    font-weight: 600;
}

/* ============================================================
   USER MANAGEMENT / CONTACTS / SECURITY — component styles
   ============================================================ */
.acct-card-body { padding-bottom: 16px; }

/* danger button used for 2FA disable / delete contact */
.acct-danger-btn {
    background: #fff !important;
    border: 1px solid #f5c2bf !important;
    color: #d9453e !important;
    border-radius: 10px !important;
    padding: 13px 24px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}
.acct-danger-btn:hover {
    background: #fde3e2 !important;
    border-color: #f0554e !important;
    color: #c23b34 !important;
}
.acct-danger-btn i { margin-right: 6px; }

/* inline note / warning block */
.acct-note {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    background: #fdf6e9;
    border: 1px solid #f5e2be;
    border-radius: 12px;
    padding: 14px 16px;
    color: #8a6412;
    font-size: 13.5px;
    line-height: 1.65;
    margin-bottom: 18px;
}
.acct-note i { color: #d99a1c; margin-top: 2px; }
.acct-note.is-required {
    background: #fde3e2;
    border-color: #f5c2bf;
    color: #a8332c;
}
.acct-note.is-required i { color: #e0554e; }

.acct-badge.is-owner { background: var(--db-purple-light); color: var(--db-purple); }

/* --- user rows (User Management) --- */
.user-list { padding-bottom: 8px; }
.user-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--db-border);
    flex-wrap: wrap;
}
.user-row:last-child { border-bottom: none; }
.user-avatar {
    width: 40px; height: 40px; min-width: 40px;
    border-radius: 12px;
    background: var(--db-purple-light);
    color: var(--db-purple);
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
}
.user-avatar.is-secured { background: #dcf6ec; color: #12a374; }
.user-avatar.is-pending { background: #fdecd2; color: #b3760f; }
.user-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.user-email {
    color: #1a1a2e;
    font-size: 14px;
    font-weight: 600;
    word-break: break-word;
}
.user-meta { color: #9a9aa5; font-size: 12px; }
.user-2fa { font-size: 12px; margin-left: 5px; }
.user-2fa.on  { color: #17c690; }
.user-2fa.off { color: #c8c8d0; }
.user-actions { flex: 0 0 auto; display: flex; gap: 8px; flex-wrap: wrap; }
.user-inline-form { display: flex; gap: 8px; margin: 0; }
.user-btn {
    background: #fff !important;
    border: 1px solid var(--db-border) !important;
    color: #55555f !important;
    border-radius: 9px !important;
    padding: 8px 15px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
}
.user-btn:hover {
    border-color: var(--db-purple) !important;
    color: var(--db-purple) !important;
    background: var(--db-purple-light) !important;
}
.user-btn.is-danger { border-color: #f5c2bf !important; color: #d9453e !important; }
.user-btn.is-danger:hover { background: #fde3e2 !important; border-color: #f0554e !important; color: #c23b34 !important; }
.user-btn[disabled] { opacity: .45; cursor: not-allowed; pointer-events: none; }
.user-subhead {
    margin: 18px 0 4px;
    color: #9a9aa5;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.user-row.is-pending { opacity: .92; }

/* --- invite permission choices --- */
.invite-perm-choice {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.invite-perm-choice .acct-pref { flex: 1 1 220px; }
.invite-perm-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}
@media (max-width: 700px) { .invite-perm-list { grid-template-columns: 1fr; } }
.invite-perm-list .acct-pref { align-items: flex-start; }
.invite-perm-list .acct-pref input { margin-top: 3px; }
.invite-perm-list .acct-pref-text { display: flex; flex-direction: column; gap: 2px; }
.invite-perm-list .acct-pref-text strong { font-size: 13px; color: #1a1a2e; }
.invite-perm-list .acct-pref-text em {
    font-style: normal;
    font-size: 12px;
    color: #9a9aa5;
    line-height: 1.5;
}
.invite-perm-list .acct-pref.is-on .acct-pref-text strong { color: var(--db-purple); }
.acct-pref input[type="radio"] {
    width: 16px; height: 16px;
    accent-color: #6c4ef5;
    margin: 0; flex-shrink: 0; cursor: pointer;
}

/* --- contact picker --- */
.contact-picker-card { padding: 20px 24px; }
.contact-picker {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
}
.contact-picker .acct-icon { margin-bottom: 3px; }
.contact-picker-field { flex: 1 1 320px; min-width: 0; }
.contact-picker-field label {
    display: block;
    color: #55555f;
    font-weight: 600;
    font-size: 12.5px;
    margin-bottom: 7px;
}
.contact-picker-field .form-control {
    border: 1px solid var(--db-border) !important;
    border-radius: 10px !important;
    height: 44px;
    box-shadow: none !important;
    color: #1a1a2e !important;
}
.contact-go-btn { flex: 0 0 auto; padding: 12px 26px !important; }

/* linked accounts block inside the security card */
.acct-card-body .provider-link-container,
.acct-card-body .linked-account,
.acct-card-body .btn-provider {
    border-radius: 10px !important;
}

/* ============================================================
   SERVICE DETAILS PAGE (clientareaproductdetails.tpl)
   ============================================================ */
.svc-detail-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 22px;
}
.svc-detail-main { flex: 1 1 58%; min-width: 300px; }
.svc-detail-side { flex: 1 1 34%; min-width: 260px; }

/* --- hero card --- */
.svc-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    padding: 22px 24px;
    position: relative;
    overflow: hidden;
    flex-wrap: wrap;
}
.svc-hero::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--db-purple);
}
.svc-hero.product-status-active::before     { background: #17c690; }
.svc-hero.product-status-pending::before    { background: #f7a94a; }
.svc-hero.product-status-suspended::before  { background: #f0554e; }
.svc-hero.product-status-terminated::before { background: #1a1a2e; }
.svc-hero.product-status-cancelled::before  { background: #9a9aa5; }

.svc-hero-icon {
    width: 56px; height: 56px; min-width: 56px;
    border-radius: 16px;
    background: var(--db-purple-light);
    color: var(--db-purple);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
}
.svc-hero-text { flex: 1 1 auto; min-width: 0; }
.svc-hero-text h3 {
    margin: 0 0 3px;
    font-size: 19px;
    font-weight: 700;
    color: #1a1a2e;
}
.svc-hero-text h4 {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: #9a9aa5;
}
.svc-hero-status {
    flex: 0 0 auto;
    display: inline-block;
    padding: 7px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: var(--db-purple);
    white-space: nowrap;
}
.svc-hero.product-status-active .svc-hero-status     { background: #17c690; }
.svc-hero.product-status-pending .svc-hero-status    { background: #f7a94a; }
.svc-hero.product-status-suspended .svc-hero-status  { background: #f0554e; }
.svc-hero.product-status-terminated .svc-hero-status { background: #1a1a2e; }
.svc-hero.product-status-cancelled .svc-hero-status  { background: #9a9aa5; }

/* --- action buttons --- */
.svc-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}
.svc-btn {
    flex: 1 1 160px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 10px !important;
    padding: 12px 18px !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
    border: 1px solid transparent !important;
}
.svc-btn.is-upgrade {
    background: #17c690 !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(23,198,144,0.22);
}
.svc-btn.is-upgrade:hover { background: #13ac7c !important; }
.svc-btn.is-renew {
    background: var(--db-purple) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(108,78,245,0.22);
}
.svc-btn.is-renew:hover { background: var(--db-purple-dark) !important; }
.svc-btn.is-cancel {
    background: #fff !important;
    border-color: #f5c2bf !important;
    color: #d9453e !important;
}
.svc-btn.is-cancel:hover { background: #fde3e2 !important; border-color: #f0554e !important; }
.svc-btn.disabled { opacity: .5; pointer-events: none; }

/* --- billing summary card --- */
.svc-info-card {
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    padding: 20px 22px;
}
.svc-info-title {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
    color: #1a1a2e;
}
.svc-info-list { list-style: none; margin: 0; padding: 0; }
.svc-info-list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 0;
    border-bottom: 1px solid var(--db-border);
    font-size: 13.5px;
}
.svc-info-list li:last-child { border-bottom: none; }
.sil-label { color: #9a9aa5; flex: 0 0 auto; }
.sil-value { color: #33333d; font-weight: 500; text-align: right; word-break: break-word; }
.sil-value.is-strong { color: #1a1a2e; font-weight: 700; }
.svc-info-list li.is-warn .sil-value { color: #d9453e; }

/* --- tabs below the overview --- */
.product-details-tab-container,
.tab-content.product-details-tab-container {
    background: #fff;
    border: 1px solid var(--db-border);
    border-top: none;
    border-radius: 0 0 var(--db-radius) var(--db-radius);
    padding: 22px 24px;
}
.nav-tabs.nav-tabs-overflow {
    border-bottom: 1px solid var(--db-border);
    background: #fff;
    border: 1px solid var(--db-border);
    border-bottom: 1px solid var(--db-border);
    border-radius: var(--db-radius) var(--db-radius) 0 0;
    padding: 6px 8px 0;
    margin-bottom: 0;
}
.nav-tabs.nav-tabs-overflow > li > a {
    border: none !important;
    border-radius: 9px 9px 0 0 !important;
    color: #8a8a95 !important;
    font-weight: 600;
    font-size: 13.5px;
    padding: 12px 18px;
    margin-right: 2px;
    background: transparent !important;
    transition: color .15s ease, background .15s ease;
}
.nav-tabs.nav-tabs-overflow > li > a:hover {
    background: var(--db-purple-light) !important;
    color: var(--db-purple) !important;
}
.nav-tabs.nav-tabs-overflow > li.active > a,
.nav-tabs.nav-tabs-overflow > li.active > a:hover,
.nav-tabs.nav-tabs-overflow > li.active > a:focus {
    color: var(--db-purple) !important;
    background: transparent !important;
    border-bottom: 2px solid var(--db-purple) !important;
}

/* label / value rows inside the tabs (stock col-sm-5 + col-sm-7 pattern) */
.product-details-tab-container .row {
    padding: 10px 0;
    border-bottom: 1px solid var(--db-border);
    margin: 0;
}
.product-details-tab-container .row:last-child { border-bottom: none; }
.product-details-tab-container .row .col-sm-5 strong {
    color: #9a9aa5;
    font-weight: 600;
    font-size: 13px;
}
.product-details-tab-container .row .col-sm-7 {
    color: #33333d;
    font-size: 13.5px;
}
.product-details-tab-container .text-center { text-align: left !important; }

/* unpaid-invoice notice at the top */
#alertUnpaidInvoice,
#alertOverdueInvoice {
    border: 1px solid #f5e2be;
    background: #fdf6e9;
    color: #8a6412;
    border-radius: 12px;
    padding: 15px 18px;
}
#alertOverdueInvoice {
    border-color: #f5c2bf;
    background: #fde3e2;
    color: #a8332c;
}
#alertUnpaidInvoice .btn,
#alertOverdueInvoice .btn {
    background: #fff !important;
    border: 1px solid var(--db-border) !important;
    border-radius: 8px !important;
    color: #55555f !important;
    font-weight: 600;
    padding: 6px 14px !important;
}

@media (max-width: 900px) {
    .svc-detail-side { flex: 1 1 100%; }
    .svc-hero { text-align: left; }
}

/* ============================================================
   PUBLIC HOMEPAGE — hero, shortcuts, news
   ============================================================ */

/* --- hero banner --- */
section#home-banner {
    background: linear-gradient(135deg, #6c4ef5 0%, #5b3fe0 55%, #4a32c4 100%) !important;
    padding: 70px 0 78px !important;
    position: relative;
    overflow: hidden;
}
section#home-banner::before,
section#home-banner::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    pointer-events: none;
}
section#home-banner::before {
    width: 380px; height: 380px;
    top: -150px; right: -90px;
}
section#home-banner::after {
    width: 260px; height: 260px;
    bottom: -130px; left: -70px;
}
section#home-banner .container { position: relative; z-index: 2; }
section#home-banner h2 {
    color: #fff;
    font-weight: 800;
    font-size: 34px;
    margin-bottom: 28px;
    letter-spacing: -0.5px;
}

/* search field */
section#home-banner .input-group-lg > .form-control {
    height: 60px !important;
    border: none !important;
    border-radius: 14px 0 0 14px !important;
    padding-left: 24px;
    font-size: 16px;
    box-shadow: none !important;
}
section#home-banner .input-group-lg > .form-control:focus {
    box-shadow: 0 0 0 3px rgba(255,255,255,0.35) !important;
}
section#home-banner .input-group-btn .btn {
    height: 60px !important;
    border: none !important;
    padding: 0 30px !important;
    font-weight: 700;
    font-size: 15px;
    border-radius: 0 !important;
    transition: background .16s ease;
}
section#home-banner .input-group-btn .btn.search {
    background: #17c690 !important;
    color: #fff !important;
}
section#home-banner .input-group-btn .btn.search:hover { background: #13ac7c !important; }
section#home-banner .input-group-btn .btn.transfer {
    background: rgba(255,255,255,0.18) !important;
    color: #fff !important;
    border-radius: 0 14px 14px 0 !important;
}
section#home-banner .input-group-btn .btn.transfer:hover { background: rgba(255,255,255,0.3) !important; }
section#home-banner .input-group-box,
section#home-banner .input-group {
    box-shadow: 0 18px 44px rgba(20,10,60,0.28);
    border-radius: 14px;
}

/* captcha area */
section#home-banner .captcha-container,
section#home-banner .default-captcha {
    color: #fff;
}
section#home-banner p,
section#home-banner .captcha-container p {
    color: rgba(255,255,255,0.85);
    font-size: 14px;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}
section#home-banner #inputCaptcha,
section#home-banner .default-captcha input {
    border: none !important;
    border-radius: 10px !important;
    height: 42px !important;
    padding: 0 14px !important;
    margin-left: 8px;
    box-shadow: none !important;
    vertical-align: middle;
}
section#home-banner #inputCaptchaImage {
    border-radius: 8px;
    vertical-align: middle;
}
section#home-banner .default-captcha > div {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* --- shortcuts strip -> cards --- */
.home-shortcuts {
    background: #fff !important;
    padding: 40px 0 34px !important;
    border-bottom: 1px solid var(--db-border);
}
.home-shortcuts-title {
    text-align: center;
    font-size: 21px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 26px;
}
.home-shortcut-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
@media (max-width: 900px) { .home-shortcut-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .home-shortcut-grid { grid-template-columns: 1fr; } }

.home-shortcut-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: 16px;
    padding: 18px 20px;
    text-decoration: none !important;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.home-shortcut-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(20,20,50,0.09);
    border-color: rgba(108,78,245,0.35);
}
.hsc-icon {
    width: 46px; height: 46px; min-width: 46px;
    border-radius: 14px;
    background: var(--db-purple-light);
    color: var(--db-purple);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    transition: background .16s ease, color .16s ease;
}
.home-shortcut-card:hover .hsc-icon {
    background: var(--db-purple);
    color: #fff;
}
.hsc-label {
    flex: 1 1 auto;
    color: #1a1a2e;
    font-weight: 600;
    font-size: 14.5px;
    line-height: 1.35;
}
.hsc-arrow {
    color: #c8c8d0;
    font-size: 13px;
    transition: transform .16s ease, color .16s ease;
}
.home-shortcut-card:hover .hsc-arrow {
    color: var(--db-purple);
    transform: translateX(4px);
}

/* --- news --- */
.home-news-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    margin: 30px 0 18px;
}
.home-section-title {
    margin: 0;
    font-size: 21px;
    font-weight: 700;
    color: #1a1a2e;
}
.home-news-all {
    color: var(--db-purple) !important;
    font-weight: 600;
    font-size: 13.5px;
    text-decoration: none !important;
    white-space: nowrap;
}
.home-news-all i { font-size: 11px; margin-left: 4px; }

.home-news-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 40px;
}
@media (max-width: 820px) { .home-news-grid { grid-template-columns: 1fr; } }

.home-news-card {
    display: flex;
    gap: 16px;
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    padding: 20px 22px;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.home-news-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(20,20,50,0.08);
    border-color: rgba(108,78,245,0.3);
}
.hnc-date {
    flex: 0 0 auto;
    width: 56px; height: 60px;
    border-radius: 14px;
    background: var(--db-purple-light);
    color: var(--db-purple);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
}
.hnc-day { font-size: 20px; font-weight: 800; }
.hnc-mon { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.hnc-body { flex: 1 1 auto; min-width: 0; }
.hnc-title { margin: 0 0 8px; font-size: 16px; font-weight: 700; line-height: 1.4; }
.hnc-title a { color: #1a1a2e !important; text-decoration: none !important; }
.hnc-title a:hover { color: var(--db-purple) !important; }
.hnc-text {
    color: #8a8a95;
    font-size: 13.5px;
    line-height: 1.75;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hnc-more {
    color: var(--db-purple) !important;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none !important;
}
.hnc-more i { font-size: 11px; margin-left: 4px; transition: transform .15s ease; }
.hnc-more:hover i { transform: translateX(3px); }

@media (max-width: 600px) {
    section#home-banner h2 { font-size: 25px; }
    section#home-banner { padding: 46px 0 52px !important; }
    section#home-banner .input-group-lg > .form-control,
    section#home-banner .input-group-btn .btn { height: 52px !important; }
}

/* ============================================================
   STORE / PRODUCT BROWSING (orderforms/standard_cart/products.tpl)
   NOTE: the category sidebar is hidden site-wide on the other cart
   pages; on the store page it carries an extra `.sidebar` class,
   so it is re-enabled here only.
   ============================================================ */
#order-standard_cart .cart-sidebar.sidebar {
    display: block !important;
    width: 25% !important;
    float: left !important;
    padding-right: 24px;
}
#order-standard_cart.store-page .cart-body {
    width: 75% !important;
    float: left !important;
    padding-left: 0 !important;
}
@media (max-width: 991px) {
    #order-standard_cart .cart-sidebar.sidebar,
    #order-standard_cart.store-page .cart-body {
        width: 100% !important;
        float: none !important;
        padding-right: 0;
    }
    #order-standard_cart .cart-sidebar.sidebar { margin-bottom: 20px; }
}

/* --- category sidebar --- */
#order-standard_cart .cart-sidebar .panel-sidebar,
#order-standard_cart .cart-sidebar .card-sidebar {
    background: #fff;
    border: 1px solid var(--db-border) !important;
    border-radius: var(--db-radius) !important;
    box-shadow: none !important;
    overflow: hidden;
}
#order-standard_cart .cart-sidebar .panel-heading {
    background: #fff !important;
    border-bottom: 1px solid var(--db-border) !important;
    padding: 16px 20px !important;
}
#order-standard_cart .cart-sidebar .panel-title {
    color: #1a1a2e !important;
    font-size: 14.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}
#order-standard_cart .cart-sidebar .panel-title > i:first-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--db-purple-light);
    color: var(--db-purple);
    font-size: 11px;
}
#order-standard_cart .cart-sidebar .panel-minimise,
#order-standard_cart .cart-sidebar .card-minimise {
    margin-left: auto;
    color: #c8c8d0;
    font-size: 12px;
    transition: transform .2s ease;
}
#order-standard_cart .cart-sidebar .list-group { border: none; margin: 0; }
#order-standard_cart .cart-sidebar .list-group-item {
    border: none !important;
    border-bottom: 1px solid var(--db-border) !important;
    padding: 13px 20px !important;
    color: #55555f !important;
    font-size: 13.5px;
    font-weight: 500;
    background: #fff;
    position: relative;
    transition: background .15s ease, color .15s ease, padding-left .15s ease;
}
#order-standard_cart .cart-sidebar .list-group-item:last-child { border-bottom: none !important; }
#order-standard_cart .cart-sidebar .list-group-item:hover {
    background: var(--db-purple-light);
    color: var(--db-purple) !important;
    padding-left: 24px !important;
}
#order-standard_cart .cart-sidebar .list-group-item.active,
#order-standard_cart .cart-sidebar .list-group-item.active:hover,
#order-standard_cart .cart-sidebar .list-group-item.active:focus {
    background: var(--db-purple-light) !important;
    color: var(--db-purple) !important;
    font-weight: 700;
    border-color: var(--db-border) !important;
}
#order-standard_cart .cart-sidebar .list-group-item.active::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--db-purple);
}
#order-standard_cart .cart-sidebar .list-group-item .badge {
    background: var(--db-purple-light) !important;
    color: var(--db-purple) !important;
    border-radius: 20px;
    font-weight: 700;
    font-size: 11px;
    padding: 3px 9px;
    float: right;
}
#order-standard_cart .cart-sidebar .list-group-item.disabled {
    opacity: .5;
    pointer-events: none;
}

/* --- store header --- */
#order-standard_cart .store-header { text-align: left; margin-bottom: 22px; }
#order-standard_cart .store-header h1 {
    font-size: 26px !important;
    font-weight: 700 !important;
    color: #1a1a2e !important;
    margin-bottom: 6px;
}
#order-standard_cart .store-tagline {
    color: #8a8a95;
    font-size: 14.5px;
    margin: 0;
}

/* --- product grid --- */
#order-standard_cart .store-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}
@media (max-width: 1200px) { #order-standard_cart .store-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { #order-standard_cart .store-grid { grid-template-columns: 1fr; } }

#order-standard_cart .store-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    padding: 24px 22px 22px;
    position: relative;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    animation: db-fade-up .45s ease both;
}
#order-standard_cart .store-card::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 3px;
    background: var(--db-purple);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .3s cubic-bezier(.4,0,.2,1);
}
#order-standard_cart .store-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(20,20,50,0.1);
    border-color: rgba(108,78,245,0.35);
}
#order-standard_cart .store-card:hover::before { transform: scaleX(1); }

.store-card-head { margin-bottom: 14px; }
.store-card-name {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1.35;
}
.store-stock {
    display: inline-block;
    margin-top: 7px;
    background: #dcf6ec;
    color: #12a374;
    border-radius: 20px;
    padding: 3px 11px;
    font-size: 11px;
    font-weight: 700;
}
.store-bundle-tag {
    display: inline-block;
    margin-top: 7px;
    background: #fdecd2;
    color: #b3760f;
    border-radius: 20px;
    padding: 3px 11px;
    font-size: 11px;
    font-weight: 700;
}

/* price block */
.store-card-price {
    padding: 14px 0 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--db-border);
}
.store-from {
    display: block;
    color: #9a9aa5;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 2px;
}
.store-card-price .price {
    display: inline-block;
    color: var(--db-purple);
    font-size: 28px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.5px;
}
.store-cycle {
    display: inline-block;
    color: #9a9aa5;
    font-size: 13px;
    margin-left: 5px;
}
.store-setup {
    display: block;
    color: #a5a5b0;
    font-size: 11.5px;
    margin-top: 5px;
}

/* description + features */
.store-card-body { flex: 1 1 auto; }
.store-desc {
    color: #8a8a95;
    font-size: 13px;
    line-height: 1.7;
    margin-bottom: 14px;
}
.store-features {
    list-style: none;
    margin: 0;
    padding: 0;
}
.store-features li {
    display: flex;
    align-items: baseline;
    gap: 9px;
    padding: 6px 0;
    font-size: 13px;
    color: #44444f;
    line-height: 1.5;
}
.store-features li i {
    color: #17c690;
    font-size: 11px;
    flex-shrink: 0;
}
.store-features .feature-value {
    font-weight: 700;
    color: #1a1a2e;
}
.store-features .feature-name { color: #8a8a95; }

/* order button */
.store-card-foot { padding-top: 18px; }
.store-order-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    background: var(--db-purple) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 11px !important;
    padding: 13px 20px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    box-shadow: 0 6px 18px rgba(108,78,245,0.2);
    position: relative;
    overflow: hidden;
    transition: background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.store-order-btn:hover {
    background: var(--db-purple-dark) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(108,78,245,0.3);
}
.store-order-btn::after {
    content: "";
    position: absolute;
    top: 0; left: -120%;
    width: 60%; height: 100%;
    background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-20deg);
    transition: left .55s ease;
}
.store-order-btn:hover::after { left: 130%; }

/* mobile category dropdown */
#order-standard_cart .sidebar-categories-selector,
#order-standard_cart .cart-sidebar select.form-control {
    border: 1px solid var(--db-border) !important;
    border-radius: 10px !important;
    height: 46px;
    box-shadow: none !important;
    color: #1a1a2e !important;
}

/* ============================================================
   STORE — neutralise the stock order-form card rules
   orderforms/standard_cart/css/style.css sets these at
   `#order-standard_cart .products .product` (higher specificity
   than my `.store-card` selectors), which zeroed the card padding
   and floated its parts. Matched here and reset.
   ============================================================ */
#order-standard_cart .products .product,
#order-standard_cart .products .store-card {
    padding: 24px 22px 22px !important;
    margin: 0 !important;
    border: 1px solid var(--db-border) !important;
    border-radius: var(--db-radius) !important;
    background: #fff !important;
    float: none !important;
    width: auto !important;
}
#order-standard_cart .products .product header,
#order-standard_cart .products .store-card .store-card-head {
    position: static !important;
    padding: 0 !important;
    margin: 0 0 14px !important;
    background: transparent !important;
    border-radius: 0 !important;
}
#order-standard_cart .products .product header span,
#order-standard_cart .products .store-card .store-card-name {
    margin: 0 !important;
    color: #1a1a2e !important;
    font-size: 17px !important;
    font-weight: 700 !important;
}
#order-standard_cart .products .product .store-card-body,
#order-standard_cart .products .product div.product-desc {
    float: none !important;
    width: auto !important;
    padding: 0 !important;
    font-size: 13px !important;
}
#order-standard_cart .products .product footer,
#order-standard_cart .products .store-card .store-card-foot {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding-top: 18px !important;
    font-size: inherit !important;
    text-align: left !important;
}
#order-standard_cart .products .product .store-card-price,
#order-standard_cart .products .product div.product-pricing {
    margin: 0 0 16px !important;
    padding: 14px 0 16px !important;
    border-bottom: 1px solid var(--db-border) !important;
}
#order-standard_cart .products .product .store-card-price .price,
#order-standard_cart .products .product div.product-pricing span.price {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: var(--db-purple) !important;
    line-height: 1.1 !important;
}
#order-standard_cart .products .product .qty,
#order-standard_cart .products .store-card .store-stock {
    float: none !important;
    font-style: normal !important;
    font-size: 11px !important;
    color: #12a374 !important;
}
#order-standard_cart .products {
    margin: 10px 0 30px !important;
}
#order-standard_cart .products .store-features li {
    padding: 6px 0 !important;
    font-size: 13px !important;
}
#order-standard_cart .products .store-features .feature-value {
    font-weight: 700 !important;
    color: #1a1a2e !important;
}

/* sidebar action items (Renew Domains / Register / Transfer / View Cart) */
#order-standard_cart .cart-sidebar .list-group-item i,
#order-standard_cart .cart-sidebar .list-group-item .fa,
#order-standard_cart .cart-sidebar .list-group-item .fas,
#order-standard_cart .cart-sidebar .list-group-item .far {
    color: var(--db-purple) !important;
    opacity: .85;
    font-size: 13px;
}
#order-standard_cart .cart-sidebar .list-group-item:hover i { opacity: 1; }
/* WHMCS floats these icons right on action panels */
#order-standard_cart .cart-sidebar .list-group-item .pull-right,
#order-standard_cart .cart-sidebar .list-group-item .float-right {
    color: var(--db-purple) !important;
    opacity: .8;
}

/* ============================================================
   MY INVOICES — summary chips + card-row list
   ============================================================ */
.inv-summary-chip.is-unpaid::before    { background: #f7a94a; }
.inv-summary-chip.is-refunded::before   { background: #6b7280; }
.inv-summary-chip.is-paid::before      { background: #17c690; }
.inv-summary-chip.is-cancelled::before { background: #9a9aa5; }

.invoices-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 12px !important;
}
.invoices-table thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
}
.invoices-table tbody tr {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: 16px;
    padding: 15px 20px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(20,20,50,0.03);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.invoices-table tbody tr:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(20,20,50,0.08);
    border-color: rgba(108,78,245,0.32);
}
.invoices-table tbody td {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
}

/* invoice number + icon */
.inv-num-cell {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 13px;
    margin-right: 22px;
}
.inv-avatar {
    width: 42px; height: 42px; min-width: 42px;
    border-radius: 12px;
    background: var(--db-purple-light);
    color: var(--db-purple);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
}
.inv-avatar.inv-paid      { background: #dcf6ec; color: #12a374; }
.inv-avatar.inv-unpaid    { background: #fdecd2; color: #b3760f; }
.inv-avatar.inv-overdue   { background: #fde3e2; color: #d9453e; }
.inv-avatar.inv-cancelled,
.inv-avatar.inv-refunded  { background: #f1f1f5; color: #8a8a95; }
.inv-number {
    color: #1a1a2e;
    font-size: 14.5px;
    font-weight: 700;
    white-space: nowrap;
}

/* date columns */
.inv-created-cell,
.inv-due-cell {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.inv-mini-label {
    color: #a5a5b0;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .3px;
    white-space: nowrap;
}
.inv-mini-value {
    color: #55555f;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

/* total */
.inv-total-cell {
    flex: 0 0 auto;
    margin: 0 22px;
    text-align: right;
}
.inv-total {
    color: #1a1a2e;
    font-size: 15.5px;
    font-weight: 800;
    white-space: nowrap;
}

/* status pill */
.inv-status-cell { flex: 0 0 auto; }
.invoices-table .label.status {
    display: inline-block;
    border-radius: 20px;
    padding: 6px 15px;
    font-weight: 600;
    font-size: 11.5px;
    color: #fff;
    border: none;
    white-space: nowrap;
    min-width: 92px;
    text-align: center;
}
.invoices-table .label.status-paid            { background: #17c690; }
.invoices-table .label.status-unpaid          { background: #f7a94a; }
.invoices-table .label.status-overdue         { background: #f0554e; }
.invoices-table .label.status-cancelled       { background: #9a9aa5; }
.invoices-table .label.status-refunded        { background: #6b7280; }
.invoices-table .label.status-collections     { background: #b02a24; }
.invoices-table .label.status-payment-pending { background: var(--db-purple); }

@media (max-width: 900px) {
    .invoices-table tbody tr { flex-wrap: wrap; gap: 12px; padding: 14px 16px; }
    .inv-num-cell { margin-right: 0; flex: 1 1 100%; }
    .inv-created-cell, .inv-due-cell { flex: 1 1 40%; }
    .inv-total-cell { margin: 0; order: 4; }
    .inv-status-cell { order: 5; margin-left: auto; }
}

/* ============================================================
   VIEW INVOICE (viewinvoice.tpl)
   Standalone page — it now loads custom.css, so everything below
   is scoped to body.invoice-page to avoid touching other pages.
   ============================================================ */
body.invoice-page {
    background: #f6f6fa;
    padding: 26px 0 40px;
}
body.invoice-page .invoice-container {
    max-width: 950px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: 18px;
    padding: 36px 40px 32px;
    box-shadow: 0 6px 30px rgba(20,20,50,0.05);
}

/* --- header --- */
body.invoice-page .invoice-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin: 0 0 6px;
}
body.invoice-page .invoice-header .invoice-col { float: none; width: auto; padding: 0; }
body.invoice-page .invoice-header img { max-height: 46px; margin-bottom: 10px; }
body.invoice-page .invoice-header h2 {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 800;
    color: #1a1a2e;
}
body.invoice-page .invoice-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #9a9aa5;
}
body.invoice-page .invoice-header .text-center { text-align: right !important; }

/* status pill */
body.invoice-page .invoice-status span {
    display: inline-block;
    padding: 8px 22px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #fff;
    border: none;
    background: var(--db-purple);
}
body.invoice-page .invoice-status .paid        { background: #17c690; }
body.invoice-page .invoice-status .unpaid      { background: #f7a94a; }
body.invoice-page .invoice-status .draft       { background: #9a9aa5; }
body.invoice-page .invoice-status .cancelled   { background: #9a9aa5; }
body.invoice-page .invoice-status .refunded    { background: #6b7280; }
body.invoice-page .invoice-status .collections { background: #f0554e; }

body.invoice-page .small-text { font-size: 13px; color: #8a8a95; }
body.invoice-page .payment-btn-container { margin-top: 14px; }
body.invoice-page .payment-btn-container .btn,
body.invoice-page .payment-btn-container input[type="submit"] {
    background: var(--db-purple) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 11px !important;
    padding: 13px 32px !important;
    font-weight: 700 !important;
    font-size: 14.5px !important;
    box-shadow: 0 8px 20px rgba(108,78,245,0.25);
}
body.invoice-page .payment-btn-container .btn:hover { background: var(--db-purple-dark) !important; }

body.invoice-page hr {
    border-color: var(--db-border);
    margin: 24px 0;
}

/* --- address / meta blocks --- */
body.invoice-page .row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-left: 0;
    margin-right: 0;
}
body.invoice-page .invoice-col {
    flex: 1 1 260px;
    float: none !important;
    width: auto !important;
    padding: 0 !important;
}
body.invoice-page .invoice-col strong {
    display: block;
    color: #9a9aa5;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 7px;
}
body.invoice-page address {
    color: #33333d;
    font-size: 13.5px;
    line-height: 1.8;
    margin: 0;
}

/* --- panels (line items / notes / credit) --- */
body.invoice-page .panel {
    border: 1px solid var(--db-border) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    overflow: hidden;
    margin-bottom: 20px;
}
body.invoice-page .panel > .panel-heading {
    background: #fbfbfd !important;
    border-bottom: 1px solid var(--db-border) !important;
    padding: 14px 20px !important;
    color: #1a1a2e !important;
}
body.invoice-page .panel .panel-title,
body.invoice-page .panel .panel-title strong {
    color: #1a1a2e !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
}
body.invoice-page .panel > .panel-body { padding: 0 !important; }
body.invoice-page .panel-success > .panel-heading { background: #dcf6ec !important; }
body.invoice-page .panel-info > .panel-heading { background: var(--db-purple-light) !important; }
body.invoice-page .panel-danger > .panel-heading { background: #fde3e2 !important; }

/* --- line item table --- */
body.invoice-page .table {
    margin: 0;
    background: #fff;
}
body.invoice-page .table > thead > tr > td {
    background: #fff;
    border-bottom: 1px solid var(--db-border) !important;
    padding: 13px 20px !important;
    color: #9a9aa5;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .3px;
}
body.invoice-page .table > thead > tr > td strong { font-weight: 700; }
body.invoice-page .table > tbody > tr > td {
    border-top: 1px solid var(--db-border) !important;
    padding: 14px 20px !important;
    font-size: 13.5px;
    color: #33333d;
    vertical-align: middle;
}
body.invoice-page .table > tbody > tr:first-child > td { border-top: none !important; }
body.invoice-page .total-row {
    background: #fbfbfd;
    font-size: 13.5px !important;
}
body.invoice-page .total-row strong { color: #55555f; font-weight: 600; }
/* the final total row stands out */
body.invoice-page .table > tbody > tr:last-child > td.total-row {
    background: var(--db-purple-light);
    color: #1a1a2e;
    font-weight: 800;
    font-size: 16px !important;
}
body.invoice-page .table > tbody > tr:last-child > td.total-row strong {
    color: #1a1a2e;
    font-weight: 800;
}

/* --- transactions --- */
body.invoice-page .transactions-container {
    border: 1px solid var(--db-border);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 22px;
}
body.invoice-page .transactions-container .table > thead > tr > td {
    background: #fbfbfd;
}

/* --- credit apply form --- */
body.invoice-page .panel-success .panel-body { padding: 20px !important; }
body.invoice-page .input-group .form-control {
    border: 1px solid var(--db-border) !important;
    border-radius: 10px 0 0 10px !important;
    height: 44px;
    box-shadow: none !important;
}
body.invoice-page .input-group .btn,
body.invoice-page .input-group input[type="submit"] {
    background: #17c690 !important;
    border: none !important;
    color: #fff !important;
    border-radius: 0 10px 10px 0 !important;
    height: 44px;
    padding: 0 20px !important;
    font-weight: 700;
}

/* gateway dropdown */
body.invoice-page select.form-control {
    border: 1px solid var(--db-border) !important;
    border-radius: 10px !important;
    height: 42px;
    box-shadow: none !important;
    color: #1a1a2e !important;
}

/* --- action bar --- */
body.invoice-page .invoice-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    float: none !important;
    padding-top: 6px;
    border-top: 1px solid var(--db-border);
    margin-top: 10px;
}
body.invoice-page .invoice-actions-right { display: flex; gap: 10px; }
body.invoice-page .inv-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff !important;
    border: 1px solid var(--db-border) !important;
    color: #55555f !important;
    border-radius: 10px !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    text-decoration: none !important;
    margin-top: 14px;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
body.invoice-page .inv-action-btn:hover {
    border-color: var(--db-purple) !important;
    color: var(--db-purple) !important;
    background: var(--db-purple-light) !important;
}
body.invoice-page .inv-action-btn i { font-size: 12px; }

@media (max-width: 700px) {
    body.invoice-page .invoice-container { padding: 24px 20px; border-radius: 14px; }
    body.invoice-page .invoice-header .text-center { text-align: left !important; }
    body.invoice-page .invoice-actions { flex-direction: column; align-items: stretch; }
    body.invoice-page .invoice-actions-right { justify-content: stretch; }
    body.invoice-page .inv-action-btn { justify-content: center; flex: 1; }
}

/* print: strip the chrome back out */
@media print {
    body.invoice-page { background: #fff; padding: 0; }
    body.invoice-page .invoice-container {
        border: none;
        box-shadow: none;
        border-radius: 0;
        max-width: none;
        padding: 0;
    }
}

/* ============================================================
   INVOICE — corrective pass
   invoice.css applies `.invoice-col.right { float:right; text-align:right }`
   inside a min-width:500px media query. Floats/width were already
   reset, but the right-alignment was not, which left the Pay To /
   Payment Method columns hanging in the middle of the sheet.
   ============================================================ */
@media (min-width: 500px) {
    body.invoice-page .invoice-col,
    body.invoice-page .invoice-col.right {
        float: none !important;
        width: auto !important;
        text-align: left !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* header keeps the status block on the right */
    body.invoice-page .invoice-header .invoice-col.text-center {
        text-align: right !important;
    }
}

/* address / meta text should be readable, not washed out */
body.invoice-page address,
body.invoice-page .small-text {
    color: #44444f !important;
    font-size: 13.5px !important;
    line-height: 1.85;
}
body.invoice-page .invoice-header .small-text {
    color: #8a8a95 !important;
}

/* even spacing between the two meta rows */
body.invoice-page .container-fluid > .row {
    margin-bottom: 6px;
}
body.invoice-page .invoice-col > br { display: none; }
body.invoice-page .invoice-col span.small-text { display: block; }

/* payment-method dropdown sits under its label, left aligned */
body.invoice-page .form-inline,
body.invoice-page .form-inline .form-control {
    display: block;
    width: auto;
    max-width: 240px;
    margin: 0;
}

/* status block spacing in the header */
body.invoice-page .invoice-container .invoice-status {
    margin: 0 0 10px 0;
    font-size: inherit;
    font-weight: normal;
    text-transform: none;
}
body.invoice-page .payment-btn-container {
    text-align: right !important;
    margin-top: 12px;
}
body.invoice-page .payment-btn-container form { display: inline-block; }

/* ============================================================
   INVOICE — make the Payment Method selector stand out
   It is the one interactive control in this meta area, so it gets
   its own bordered block instead of blending in with the addresses.
   ============================================================ */
body.invoice-page .invoice-col:has([data-role="paymethod-info"]) {
    background: var(--db-purple-light);
    border: 1px solid rgba(108,78,245,0.22);
    border-radius: 14px;
    padding: 16px 18px !important;
    flex: 0 1 320px;
}
body.invoice-page .invoice-col:has([data-role="paymethod-info"]) > strong {
    color: var(--db-purple) !important;
    margin-bottom: 10px;
}

/* the select itself: bigger, clearly clickable */
body.invoice-page [data-role="paymethod-info"] select.form-control,
body.invoice-page .form-inline select.form-control {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 46px !important;
    background: #fff !important;
    border: 1.5px solid var(--db-purple) !important;
    border-radius: 10px !important;
    color: #1a1a2e !important;
    font-size: 14.5px !important;
    font-weight: 600;
    padding: 0 14px !important;
    box-shadow: 0 4px 12px rgba(108,78,245,0.12);
    cursor: pointer;
    transition: box-shadow .16s ease, border-color .16s ease;
}
body.invoice-page [data-role="paymethod-info"] select.form-control:hover {
    box-shadow: 0 6px 18px rgba(108,78,245,0.22);
}
body.invoice-page [data-role="paymethod-info"] select.form-control:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(108,78,245,0.18) !important;
}

body.invoice-page [data-role="paymethod-info"] .form-inline {
    max-width: 100%;
    margin: 0;
}

/* when the gateway is NOT changeable it renders as plain text —
   show it as a solid chip rather than a bare line */
body.invoice-page [data-role="paymethod-info"]:not(:has(select)) {
    display: inline-block;
    background: #fff;
    border: 1px solid rgba(108,78,245,0.25);
    border-radius: 10px;
    padding: 10px 16px;
    color: #1a1a2e !important;
    font-weight: 600;
    font-size: 14px !important;
}

/* fallback for browsers without :has() — keeps the select prominent */
body.invoice-page select[name="gateway"] {
    height: 46px !important;
    border: 1.5px solid var(--db-purple) !important;
    border-radius: 10px !important;
    font-weight: 600;
    background: #fff !important;
}

/* payment method label icon */
body.invoice-page .invoice-col > strong i {
    margin-right: 6px;
    font-size: 13px;
}

/* ============================================================
   STANDALONE AUTH PAGE (login)
   header.tpl / footer.tpl skip all site chrome when
   $showingLoginPage is true; this styles the resulting shell.
   ============================================================ */
body.auth-page {
    background:
        radial-gradient(circle at 15% 20%, rgba(108,78,245,0.16) 0%, transparent 45%),
        radial-gradient(circle at 85% 75%, rgba(108,78,245,0.12) 0%, transparent 45%),
        #f6f6fb;
    min-height: 100vh;
    margin: 0;
}
body.auth-page .auth-stage {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 18px;
}

.auth-card {
    width: 100%;
    max-width: 440px;
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: 22px;
    padding: 38px 38px 32px;
    box-shadow: 0 24px 60px rgba(20,20,50,0.10);
    animation: db-fade-up .45s ease both;
}

.auth-logo {
    display: block;
    text-align: center;
    margin-bottom: 26px;
    text-decoration: none !important;
}
.auth-logo img { max-height: 46px; }
.auth-logo-text {
    font-size: 24px;
    font-weight: 800;
    color: #1a1a2e;
    letter-spacing: -0.4px;
}

.auth-head { text-align: center; margin-bottom: 26px; }
.auth-head h1 {
    margin: 0 0 7px;
    font-size: 23px;
    font-weight: 700;
    color: #1a1a2e;
}
.auth-head p {
    margin: 0;
    color: #8a8a95;
    font-size: 13.5px;
    line-height: 1.6;
}

/* fields */
.auth-field { margin-bottom: 16px; }
.auth-field label {
    display: block;
    color: #55555f;
    font-weight: 600;
    font-size: 12.5px;
    margin-bottom: 7px;
}
.auth-input-wrap { position: relative; }
.auth-input-wrap > i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #b8b8c4;
    font-size: 14px;
    pointer-events: none;
    transition: color .15s ease;
}
.auth-input-wrap .form-control {
    height: 48px !important;
    border: 1px solid var(--db-border) !important;
    border-radius: 12px !important;
    padding-left: 42px !important;
    padding-right: 42px !important;
    font-size: 14.5px;
    color: #1a1a2e !important;
    background: #fff !important;
    box-shadow: none !important;
}
.auth-input-wrap .form-control:focus {
    border-color: var(--db-purple) !important;
    box-shadow: 0 0 0 3px rgba(108,78,245,0.13) !important;
}
.auth-input-wrap .form-control:focus + .auth-reveal,
.auth-input-wrap .form-control:focus ~ i { color: var(--db-purple); }

.auth-reveal {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #b8b8c4;
    padding: 8px 10px;
    cursor: pointer;
    transition: color .15s ease;
}
.auth-reveal:hover { color: var(--db-purple); }

/* remember + forgot row */
.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 0 20px;
    flex-wrap: wrap;
}
.auth-remember {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-weight: 500 !important;
    color: #55555f;
    font-size: 13.5px;
    cursor: pointer;
}
.auth-remember input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: #6c4ef5;
    margin: 0;
    cursor: pointer;
}
.auth-forgot {
    color: var(--db-purple) !important;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none !important;
}
.auth-forgot:hover { text-decoration: underline !important; }

/* captcha */
.auth-captcha {
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
}
.auth-captcha input.form-control {
    height: 42px !important;
    border-radius: 10px !important;
    border: 1px solid var(--db-border) !important;
    max-width: 150px;
}

/* submit */
.auth-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    background: var(--db-purple) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 12px !important;
    padding: 14px 20px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    box-shadow: 0 10px 24px rgba(108,78,245,0.26);
    position: relative;
    overflow: hidden;
    transition: background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.auth-submit:hover {
    background: var(--db-purple-dark) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(108,78,245,0.34);
}
.auth-submit::after {
    content: "";
    position: absolute;
    top: 0; left: -120%;
    width: 60%; height: 100%;
    background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-20deg);
    transition: left .55s ease;
}
.auth-submit:hover::after { left: 130%; }
.auth-submit i { font-size: 12px; }

/* social / divider */
.auth-divider {
    position: relative;
    text-align: center;
    margin: 24px 0 18px;
}
.auth-divider::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 1px;
    background: var(--db-border);
}
.auth-divider span {
    position: relative;
    background: #fff;
    padding: 0 14px;
    color: #9a9aa5;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.auth-social .btn,
.auth-social .btn-provider {
    width: 100%;
    border-radius: 11px !important;
    padding: 11px 16px !important;
    font-weight: 600 !important;
    border: 1px solid var(--db-border) !important;
    margin-bottom: 9px;
}

/* footer bits */
.auth-alt {
    text-align: center;
    margin: 22px 0 0;
    color: #8a8a95;
    font-size: 13.5px;
}
.auth-alt a {
    color: var(--db-purple) !important;
    font-weight: 700;
    text-decoration: none !important;
}
.auth-alt a:hover { text-decoration: underline !important; }

.auth-footnote {
    text-align: center;
    margin: 22px 0 0;
    color: #a5a5b0;
    font-size: 12.5px;
}

/* alerts inside the auth card inherit the site-wide alert styles
   defined further down — only the spacing differs here */
body.auth-page .alert {
    margin-bottom: 18px;
}

@media (max-width: 480px) {
    .auth-card { padding: 28px 22px 24px; border-radius: 18px; }
    .auth-head h1 { font-size: 20px; }
}

/* ============================================================
   AUTH PAGES — register + password reset
   (login styles above; these extend the same shell)
   ============================================================ */

/* wider card for the registration form */
.auth-card-wide { max-width: 720px; }

.auth-lead {
    color: #8a8a95;
    font-size: 13.5px;
    line-height: 1.7;
    margin: 0 0 20px;
    text-align: center;
}

/* success state on password reset */
.auth-success { text-align: center; padding: 6px 0 4px; }
.auth-success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px; height: 62px;
    border-radius: 50%;
    background: #17c690;
    color: #fff;
    font-size: 24px;
    margin-bottom: 18px;
}
.auth-success h3 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
    color: #1a1a2e;
}
.auth-success p {
    color: #8a8a95;
    font-size: 13.5px;
    line-height: 1.7;
    margin-bottom: 22px;
}
.auth-success .auth-submit { text-decoration: none !important; }

/* password strength block */
.auth-strength { margin-bottom: 20px; }
.auth-strength > label {
    display: block;
    color: #55555f;
    font-weight: 600;
    font-size: 12.5px;
    margin-bottom: 7px;
}
.auth-strength .progress,
body.auth-page .progress {
    height: 7px;
    border-radius: 20px;
    background: #eceaf6;
    box-shadow: none;
    margin-bottom: 6px;
}
body.auth-page .progress-bar { border-radius: 20px; }
#inputNewPassword2Msg {
    font-size: 12px;
    margin-top: 6px;
    color: #8a8a95;
}

/* ============================================================
   REGISTRATION FORM
   Keeps its stock markup (custom fields, captcha, TOS, security
   question all rely on it) and is styled through those classes.
   ============================================================ */
body.auth-page #registration { margin: 0; }

body.auth-page .sub-heading {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 22px 0 14px !important;
}
body.auth-page .sub-heading:first-of-type { margin-top: 6px !important; }
body.auth-page .sub-heading span {
    background: none !important;
    padding: 0 !important;
    color: #1a1a2e !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    display: block;
    padding-bottom: 10px !important;
    border-bottom: 1px solid var(--db-border) !important;
}

/* icon-prefixed fields */
body.auth-page .form-group.prepend-icon {
    position: relative;
    margin-bottom: 14px;
}
/* (icon positioning for #registration lives in the corrective block
   further down — a single source of truth avoids the transform clash
   that previously pushed icons above their fields) */
body.auth-page .prepend-icon .field-icon i { color: inherit; }
body.auth-page .prepend-icon .field,
body.auth-page .prepend-icon .form-control,
body.auth-page #registration .form-control,
body.auth-page #registration select {
    height: 46px !important;
    border: 1px solid var(--db-border) !important;
    border-radius: 11px !important;
    background: #fff !important;
    color: #1a1a2e !important;
    font-size: 14px !important;
    box-shadow: none !important;
    width: 100%;
}
body.auth-page .prepend-icon .field,
body.auth-page .prepend-icon .form-control {
    padding-left: 42px !important;
}
body.auth-page #registration .form-control:focus,
body.auth-page #registration select:focus {
    border-color: var(--db-purple) !important;
    box-shadow: 0 0 0 3px rgba(108,78,245,0.13) !important;
}
body.auth-page .prepend-icon .field:focus + .field-icon,
body.auth-page .prepend-icon .field-icon:hover { color: var(--db-purple); }

body.auth-page #registration textarea.form-control { height: auto !important; padding: 12px 14px !important; }

/* labels that do exist (custom fields, security question) */
body.auth-page #registration label:not(.field-icon) {
    color: #55555f;
    font-weight: 600;
    font-size: 12.5px;
    margin-bottom: 6px;
}

/* checkboxes (TOS, marketing opt-in) */
body.auth-page #registration .checkbox label,
body.auth-page #registration .accept-tos label {
    display: inline-flex;
    align-items: flex-start;
    gap: 9px;
    font-weight: 500 !important;
    font-size: 13.5px;
    color: #44444f;
    line-height: 1.6;
}
body.auth-page #registration input[type="checkbox"],
body.auth-page #registration input[type="radio"] {
    width: 16px; height: 16px;
    accent-color: #6c4ef5;
    margin: 2px 0 0;
    flex-shrink: 0;
}
body.auth-page #registration a { color: var(--db-purple) !important; font-weight: 600; }

/* submit row */
body.auth-page #registration .form-group.text-center,
body.auth-page #registration .text-center {
    text-align: left !important;
}
body.auth-page #registration input[type="submit"],
body.auth-page #registration button[type="submit"],
body.auth-page #registration .btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    background: var(--db-purple) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 12px !important;
    padding: 14px 20px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    box-shadow: 0 10px 24px rgba(108,78,245,0.26);
    margin-top: 8px;
}
body.auth-page #registration input[type="submit"]:hover,
body.auth-page #registration .btn-primary:hover {
    background: var(--db-purple-dark) !important;
}

/* captcha inside registration */
body.auth-page #registration .captcha-container,
body.auth-page .recaptcha-container {
    display: flex;
    justify-content: center;
    margin: 14px 0 6px;
}

/* linked accounts (social sign-up) */
body.auth-page #registration .linked-accounts-container { margin-bottom: 18px; }

/* two-column rows inside the card */
body.auth-page #registration .row { margin-left: -8px; margin-right: -8px; }
body.auth-page #registration .row > [class^="col-"] { padding-left: 8px; padding-right: 8px; }

@media (max-width: 600px) {
    .auth-card-wide { max-width: 100%; }
}

/* ============================================================
   REGISTRATION — corrective pass
   styles.css targets these with `#registration ...` (ID
   specificity), which beat the earlier `body.auth-page ...`
   rules: headings stayed centred on a rule, and the field icons
   were pinned to top:0 / 36px height while the inputs were 46px,
   so they floated above the fields. Matched with #registration
   here so they actually apply.
   ============================================================ */

/* section headings: left aligned block titles, not a centred divider */
body.auth-page #registration .sub-heading {
    height: auto !important;
    border-top: none !important;
    text-align: left !important;
    margin: 24px 0 14px !important;
}
body.auth-page #registration .sub-heading:first-of-type { margin-top: 4px !important; }
body.auth-page #registration .sub-heading span {
    display: block !important;
    position: static !important;
    top: 0 !important;
    padding: 0 0 10px 0 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1a1a2e !important;
    background: none !important;
    border-bottom: 1px solid var(--db-border) !important;
}

/* inputs */
body.auth-page #registration .field,
body.auth-page #registration .form-control,
body.auth-page #registration select {
    height: 46px !important;
    border: 1px solid var(--db-border) !important;
    border-radius: 11px !important;
    font-size: 14px !important;
    color: #1a1a2e !important;
    background: #fff !important;
    box-shadow: none !important;
}
body.auth-page #registration textarea.field,
body.auth-page #registration textarea.form-control {
    height: auto !important;
    padding: 12px 14px !important;
}
body.auth-page #registration .form-control:focus,
body.auth-page #registration .field:focus,
body.auth-page #registration select:focus {
    border-color: var(--db-purple) !important;
    box-shadow: 0 0 0 3px rgba(108,78,245,0.13) !important;
}

/* icons: vertically centred inside the 46px field */
body.auth-page #registration .prepend-icon .field-icon {
    position: absolute !important;
    /* an earlier rule used top:50% + translateY(-50%); the transform
       must be cancelled here or the icon is pulled 23px above the field */
    transform: none !important;
    top: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    width: 42px !important;
    height: 46px !important;
    line-height: 46px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none;
}
body.auth-page #registration .prepend-icon .field-icon i {
    position: static !important;
    font-size: 14px !important;
    color: #b8b8c4 !important;
    transition: color .15s ease;
}
body.auth-page #registration .prepend-icon .field {
    padding-left: 42px !important;
}
body.auth-page #registration .prepend-icon .field:focus ~ .field-icon i,
body.auth-page #registration .prepend-icon:hover .field-icon i {
    color: var(--db-purple) !important;
}
body.auth-page #registration .form-group { margin-bottom: 14px; }

/* phone field (intl-tel-input) needs no left icon padding */
body.auth-page #registration .intl-tel-input { width: 100%; display: block; }
body.auth-page #registration .intl-tel-input .field-icon { display: none !important; }
body.auth-page #registration .intl-tel-input input.field {
    padding-left: 92px !important;
}

/* generate-password button */
body.auth-page #registration .generate-password,
body.auth-page #registration .btn-default {
    background: #fff !important;
    border: 1px solid var(--db-border) !important;
    color: #55555f !important;
    border-radius: 10px !important;
    padding: 10px 18px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    height: auto !important;
    width: auto !important;
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    margin-top: 2px;
}
body.auth-page #registration .generate-password:hover {
    border-color: var(--db-purple) !important;
    color: var(--db-purple) !important;
    background: var(--db-purple-light) !important;
}

/* password strength meter */
body.auth-page #registration .progress {
    height: 7px;
    border-radius: 20px;
    background: #eceaf6;
    box-shadow: none;
    margin: 10px 0 6px;
}
body.auth-page #registration .progress-bar { border-radius: 20px; }
body.auth-page #registration #pwStrengthText,
body.auth-page #registration .pwstrength-label {
    font-size: 12px;
    color: #8a8a95;
}

/* marketing opt-in / TOS panels */
body.auth-page #registration .panel,
body.auth-page #registration .well,
body.auth-page #registration .marketing-email-optin {
    background: var(--db-purple-light) !important;
    border: 1px solid rgba(108,78,245,0.18) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    padding: 18px 20px !important;
    margin: 18px 0 !important;
}
body.auth-page #registration .panel > .panel-heading {
    background: transparent !important;
    border: none !important;
    padding: 0 0 8px !important;
}
body.auth-page #registration .panel .panel-title,
body.auth-page #registration .panel h3 {
    color: #1a1a2e !important;
    font-size: 15px !important;
    font-weight: 700 !important;
}
body.auth-page #registration .panel > .panel-body { padding: 0 !important; }
body.auth-page #registration .panel .col-md-12 { padding: 0 !important; }

/* captcha */
body.auth-page #registration .captcha-container,
body.auth-page #registration .default-captcha {
    text-align: center;
    margin: 16px 0 10px;
}
body.auth-page #registration .default-captcha > div {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
}
body.auth-page #registration #inputCaptchaImage { border-radius: 8px; }
body.auth-page #registration #inputCaptcha {
    max-width: 140px;
    height: 42px !important;
    border-radius: 10px !important;
}

/* submit */
body.auth-page #registration p[align="center"] { text-align: left !important; margin: 6px 0 0; }
body.auth-page #registration input[type="submit"].btn-primary {
    display: block;
    width: 100%;
    background: var(--db-purple) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 12px !important;
    padding: 14px 20px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    box-shadow: 0 10px 24px rgba(108,78,245,0.26);
}
body.auth-page #registration input[type="submit"].btn-primary:hover {
    background: var(--db-purple-dark) !important;
}

/* ============================================================
   REGISTRATION — declutter pass
   The per-field icons repeated (the same building glyph for
   company / street / city) and added noise without meaning, so
   they are dropped in favour of soft filled fields that separate
   themselves from the card background.
   ============================================================ */

/* hide the decorative field icons entirely */
body.auth-page #registration .prepend-icon .field-icon,
body.auth-page #registration .field-icon {
    display: none !important;
}

/* fields: soft filled, borderless until focus */
body.auth-page #registration .field,
body.auth-page #registration .form-control,
body.auth-page #registration select,
body.auth-page #registration .prepend-icon .field {
    height: 48px !important;
    padding: 0 16px !important;
    background: #f7f7fb !important;
    border: 1.5px solid transparent !important;
    border-radius: 12px !important;
    font-size: 14.5px !important;
    color: #1a1a2e !important;
    box-shadow: none !important;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
body.auth-page #registration select {
    padding-right: 34px !important;
}
body.auth-page #registration .field::placeholder,
body.auth-page #registration .form-control::placeholder {
    color: #9a9aa5;
}
body.auth-page #registration .field:hover,
body.auth-page #registration .form-control:hover {
    background: #f2f2f8 !important;
}
body.auth-page #registration .field:focus,
body.auth-page #registration .form-control:focus,
body.auth-page #registration select:focus {
    background: #fff !important;
    border-color: var(--db-purple) !important;
    box-shadow: 0 0 0 3px rgba(108,78,245,0.12) !important;
}
body.auth-page #registration textarea.field,
body.auth-page #registration textarea.form-control {
    height: auto !important;
    padding: 13px 16px !important;
}

/* ---- phone field: keep the flag inside the box, no overlap ---- */
body.auth-page #registration .intl-tel-input {
    display: block !important;
    width: 100%;
    position: relative;
}
body.auth-page #registration .intl-tel-input .flag-container {
    top: 0; bottom: 0; left: 0;
    right: auto;
    padding: 0;
    z-index: 4;
}
body.auth-page #registration .intl-tel-input .selected-flag {
    height: 100%;
    display: flex !important;
    align-items: center;
    gap: 5px;
    padding: 0 10px 0 14px !important;
    background: transparent !important;
    border-right: 1.5px solid #e6e6ef !important;
    border-radius: 12px 0 0 12px;
    width: auto !important;
}
body.auth-page #registration .intl-tel-input .selected-flag .iti-arrow,
body.auth-page #registration .intl-tel-input .selected-flag .arrow {
    position: static !important;
    margin-left: 2px;
}
/* leave room for the flag block */
body.auth-page #registration .intl-tel-input input.field,
body.auth-page #registration .intl-tel-input input[type="tel"],
body.auth-page #registration .intl-tel-input.allow-dropdown input,
body.auth-page #registration .intl-tel-input.separate-dial-code input {
    padding-left: 78px !important;
}
body.auth-page #registration .intl-tel-input .country-list {
    z-index: 1080 !important;
    border: 1px solid var(--db-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 16px 40px rgba(20,20,50,0.18) !important;
    max-height: 240px !important;
    width: 320px;
    max-width: 90vw;
    padding: 6px !important;
}
body.auth-page #registration .intl-tel-input .country-list .country {
    padding: 9px 12px !important;
    border-radius: 8px;
    font-size: 13.5px;
}
body.auth-page #registration .intl-tel-input .country-list .country.highlight,
body.auth-page #registration .intl-tel-input .country-list .country:hover {
    background: var(--db-purple-light) !important;
    color: var(--db-purple);
}
/* the field row must sit above the next one so the list is not clipped */
body.auth-page #registration .form-group:focus-within { position: relative; z-index: 50; }

/* ---- breathing room / grouping ---- */
body.auth-page #registration .form-group { margin-bottom: 12px !important; }
body.auth-page #registration .sub-heading {
    margin: 30px 0 16px !important;
}
body.auth-page #registration .sub-heading:first-of-type { margin-top: 2px !important; }
body.auth-page #registration .sub-heading span {
    padding-bottom: 12px !important;
    letter-spacing: -0.2px;
}

/* generate-password row alignment */
body.auth-page #registration .generate-password { margin-top: 4px; }

/* ============================================================
   REGISTRATION — phone field, definitive fix
   intl-tel-input wraps the input in its own element, so styling
   the input alone left the row a different height to its
   neighbours. The WRAPPER is now the visual field and the input
   inside is fully transparent, which keeps the two identical.
   ============================================================ */
body.auth-page #registration .intl-tel-input {
    display: flex !important;
    align-items: center;
    width: 100% !important;
    height: 48px !important;
    background: #f7f7fb !important;
    border: 1.5px solid transparent !important;
    border-radius: 12px !important;
    padding: 0 !important;
    position: relative;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
body.auth-page #registration .intl-tel-input:hover {
    background: #f2f2f8 !important;
}
body.auth-page #registration .intl-tel-input:focus-within {
    background: #fff !important;
    border-color: var(--db-purple) !important;
    box-shadow: 0 0 0 3px rgba(108,78,245,0.12) !important;
}

/* the flag / dial-code selector sits inline, not absolutely */
body.auth-page #registration .intl-tel-input .flag-container {
    position: static !important;
    flex: 0 0 auto;
    height: 100%;
    padding: 0 !important;
}
body.auth-page #registration .intl-tel-input .selected-flag {
    height: 100% !important;
    width: auto !important;
    display: flex !important;
    align-items: center;
    gap: 6px;
    padding: 0 12px 0 14px !important;
    background: transparent !important;
    border: none !important;
    border-right: 1.5px solid #e4e4ee !important;
    border-radius: 0 !important;
    outline: none;
}
body.auth-page #registration .intl-tel-input:focus-within .selected-flag {
    border-right-color: #ded9f7 !important;
}
body.auth-page #registration .intl-tel-input .selected-flag .iti-flag { flex: 0 0 auto; }
body.auth-page #registration .intl-tel-input .selected-flag .selected-dial-code {
    padding: 0 !important;
    font-size: 14px;
    color: #55555f;
}
body.auth-page #registration .intl-tel-input .selected-flag .iti-arrow,
body.auth-page #registration .intl-tel-input .selected-flag .arrow {
    position: static !important;
    margin: 0 !important;
    border-top-color: #9a9aa5;
}

/* the actual input becomes transparent and fills the rest */
body.auth-page #registration .intl-tel-input input,
body.auth-page #registration .intl-tel-input input.field,
body.auth-page #registration .intl-tel-input input[type="tel"],
body.auth-page #registration .intl-tel-input.allow-dropdown input,
body.auth-page #registration .intl-tel-input.separate-dial-code input {
    flex: 1 1 auto;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 16px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    font-size: 14.5px !important;
    color: #1a1a2e !important;
}
body.auth-page #registration .intl-tel-input input:focus {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ============================================================
   REGISTRATION — phone flag/dial-code clipping fix
   The plugin pins the flag with position:absolute and then pads
   the dial code by 28px to clear it, inside a fixed 36/46px box.
   Inside our flex row that padding pushed the dial code out of
   the box and clipped it ("+353" rendering as "25"). Both the
   absolute flag and the compensating padding are undone here so
   the two simply sit side by side.
   ============================================================ */
body.auth-page #registration .intl-tel-input .selected-flag {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
    white-space: nowrap !important;
    background-color: transparent !important;
}
body.auth-page #registration .intl-tel-input .selected-flag .iti-flag {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    flex: 0 0 auto;
}
body.auth-page #registration .intl-tel-input .selected-flag .selected-dial-code {
    display: inline-block !important;
    vertical-align: middle !important;
    padding: 0 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    font-size: 14px !important;
    color: #55555f !important;
}
body.auth-page #registration .intl-tel-input .selected-flag .iti-arrow,
body.auth-page #registration .intl-tel-input .selected-flag .arrow {
    position: static !important;
    top: auto !important;
    right: auto !important;
    margin: 0 0 0 2px !important;
    flex: 0 0 auto;
}

/* ============================================================
   ALERTS — site-wide restyle
   includes/alert.tpl now emits an icon + content wrapper; the
   rules below also cover raw bootstrap alerts printed directly
   by WHMCS modules, so nothing is left looking stock.
   ============================================================ */
.alert {
    border: 1px solid transparent;
    border-radius: 14px;
    padding: 15px 18px;
    margin-bottom: 18px;
    font-size: 13.5px;
    line-height: 1.7;
    box-shadow: 0 2px 10px rgba(20,20,50,0.04);
}

/* iconised layout from alert.tpl */
.alert.alert-modern {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}
.alert.alert-modern.text-center {
    justify-content: center;
    text-align: left;
}
.alert-icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    background: rgba(255,255,255,0.65);
}
.alert-content { flex: 1 1 auto; min-width: 0; padding-top: 4px; }
.alert-title {
    display: block;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 4px;
}
.alert-list {
    margin: 6px 0 0;
    padding-left: 18px;
}
.alert-list li { margin-bottom: 4px; }
.alert-modern h2,
.alert-modern h3 {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
}

/* --- colour variants --- */
.alert-success {
    background: #e6f9f1;
    border-color: #b6e8d5;
    color: #10794f;
}
.alert-success .alert-icon { color: #17c690; }

.alert-info {
    background: var(--db-purple-light);
    border-color: rgba(108,78,245,0.22);
    color: #4634a8;
}
.alert-info .alert-icon { color: var(--db-purple); }

.alert-warning {
    background: #fdf4e5;
    border-color: #f5e2be;
    color: #8a6412;
}
.alert-warning .alert-icon { color: #d99a1c; }

.alert-danger,
.alert-error {
    background: #fdeceb;
    border-color: #f7cbc8;
    color: #a8332c;
}
.alert-danger .alert-icon,
.alert-error .alert-icon { color: #e0554e; }

/* links inherit the alert tone but stay obviously clickable */
.alert a:not(.btn) {
    color: inherit !important;
    font-weight: 700;
    text-decoration: underline;
}
.alert a:not(.btn):hover { opacity: .8; }
.alert .alert-link { color: inherit !important; }

/* buttons sitting inside alerts */
.alert .btn {
    border-radius: 9px !important;
    font-weight: 600 !important;
    font-size: 12.5px !important;
    padding: 7px 15px !important;
    background: rgba(255,255,255,0.9) !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    color: inherit !important;
}
.alert .btn:hover { background: #fff !important; }

/* dismissible close button */
.alert .close {
    opacity: .45;
    text-shadow: none;
    font-size: 20px;
    line-height: 1;
    margin-left: 8px;
}
.alert .close:hover { opacity: .85; }

/* left-accent variant used in a few places */
.alert-bordered-left {
    border: 1px solid transparent !important;
    border-left: 4px solid currentColor !important;
    border-radius: 12px !important;
}

/* alerts inside sidebars / panels stay compact */
.panel-sidebar .alert,
.panel .alert {
    padding: 12px 14px;
    font-size: 13px;
    border-radius: 11px;
    box-shadow: none;
}

/* entrance animation */
.alert { animation: db-fade-up .35s ease both; }

@media (max-width: 600px) {
    .alert.alert-modern { gap: 10px; padding: 13px 14px; }
    .alert-icon { width: 28px; height: 28px; font-size: 13px; }
}

/* ============================================================
   BACK TO TOP — floating action button
   Previously it sat inside the footer, so it only became visible
   once you had already scrolled to the bottom. It is now fixed to
   the viewport and fades in after ~320px of scroll.
   ============================================================ */
.back-to-top {
    position: fixed;
    right: 26px;
    bottom: 26px;
    z-index: 1030;

    width: 46px;
    height: 46px;
    border-radius: 50%;

    display: flex !important;
    align-items: center;
    justify-content: center;

    background: var(--db-purple);
    color: #fff !important;
    font-size: 15px;
    text-decoration: none !important;
    border: none;

    box-shadow: 0 8px 22px rgba(108,78,245,0.35);

    /* hidden until the user scrolls */
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px) scale(.9);
    pointer-events: none;
    transition: opacity .22s ease,
                transform .22s cubic-bezier(.34,1.56,.64,1),
                visibility .22s ease,
                background .16s ease,
                box-shadow .16s ease;
}
.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.back-to-top:hover,
.back-to-top:focus {
    background: var(--db-purple-dark);
    color: #fff !important;
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 14px 30px rgba(108,78,245,0.45);
}
.back-to-top:active { transform: translateY(-1px) scale(1); }
.back-to-top i {
    background: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #fff !important;
    opacity: 1 !important;
}

/* keep clear of the mobile viewport edges */
@media (max-width: 600px) {
    .back-to-top {
        right: 16px;
        bottom: 16px;
        width: 42px;
        height: 42px;
        font-size: 14px;
    }
}

/* never print it */
@media print {
    .back-to-top { display: none !important; }
}

/* ============================================================
   NOTIFICATIONS POPOVER (header bell / "Notifications" link)
   ============================================================ */
.popover {
    border: 1px solid var(--db-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 18px 44px rgba(20,20,50,0.16) !important;
    padding: 0 !important;
    font-family: 'Poppins', sans-serif !important;
}
.popover .popover-title,
.popover .popover-header {
    background: #fff !important;
    border-bottom: 1px solid var(--db-border) !important;
    border-radius: 14px 14px 0 0 !important;
    padding: 14px 18px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1a1a2e !important;
}
.popover .arrow,
.popover .popover-arrow { display: none !important; }

.popover-user-notifications {
    border-radius: 14px !important;
    padding: 0 !important;
    border-color: var(--db-border) !important;
    min-width: 330px;
    font-family: 'Poppins', sans-serif !important;
    overflow: hidden;
}
.popover-user-notifications .popover-content { padding: 0 !important; }

/* header row inside the notifications panel */
.popover-user-notifications .notifications-header,
.popover-user-notifications h3,
.popover-user-notifications .popover-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--db-border) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1a1a2e !important;
    background: #fff !important;
}
.popover-user-notifications a.mark-all-read,
.popover-user-notifications .mark-all-read {
    color: var(--db-purple) !important;
    font-weight: 600 !important;
    font-size: 12.5px !important;
    text-decoration: none !important;
}
.popover-user-notifications .mark-all-read:hover { text-decoration: underline !important; }

/* list rows */
.popover-user-notifications ul li {
    padding: 0 !important;
    min-height: 0 !important;
    border-bottom: 1px solid var(--db-border) !important;
}
.popover-user-notifications ul li:last-child { border-bottom: none !important; }
.popover-user-notifications ul li a {
    display: flex !important;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 18px !important;
    color: #44444f !important;
    font-size: 13.5px !important;
    line-height: 1.6;
    transition: background .14s ease;
}
.popover-user-notifications ul li a:hover {
    background-color: var(--db-purple-light) !important;
}
.popover-user-notifications ul li i.fas,
.popover-user-notifications ul li i.far {
    float: none !important;
    padding-top: 0 !important;
    font-size: 15px !important;
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--db-purple-light);
    color: var(--db-purple);
}
.popover-user-notifications ul li i.fa-check-circle {
    background: #dcf6ec !important; color: #12a374 !important;
}
.popover-user-notifications ul li i.fa-warning,
.popover-user-notifications ul li i.fa-exclamation-triangle {
    background: #fdecd2 !important; color: #b3760f !important;
}
.popover-user-notifications ul li i.fa-exclamation-circle {
    background: #fde3e2 !important; color: #d9453e !important;
}
.popover-user-notifications ul li .message {
    margin-left: 0 !important;
    flex: 1 1 auto;
    min-width: 0;
}

/* empty state */
.popover-user-notifications ul li.none,
.popover-user-notifications .no-notifications {
    padding: 30px 18px !important;
    text-align: center;
    font-weight: 500 !important;
    color: #9a9aa5 !important;
    font-size: 13.5px;
}

/* footer link ("See all notifications") */
.popover-user-notifications .notifications-footer,
.popover-user-notifications ul + a,
.popover-user-notifications > a:last-child {
    display: block;
    padding: 13px 18px !important;
    text-align: center;
    border-top: 1px solid var(--db-border);
    color: var(--db-purple) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-decoration: none !important;
}
.popover-user-notifications .notifications-footer:hover,
.popover-user-notifications > a:last-child:hover {
    background: var(--db-purple-light) !important;
}

/* the language chooser popover uses the same shell */
#languageChooserContent ul,
.popover ul.language-list {
    list-style: none;
    margin: 0;
    padding: 6px;
}
.popover ul li a,
#languageChooserContent ul li a {
    display: block;
    padding: 9px 14px;
    border-radius: 8px;
    color: #55555f !important;
    font-size: 13.5px;
    text-decoration: none !important;
}
.popover ul li a:hover,
#languageChooserContent ul li a:hover {
    background: var(--db-purple-light) !important;
    color: var(--db-purple) !important;
}

/* ============================================================
   HEADER NOTIFICATION BELL
   $clientAlerts holds real, actionable items (overdue invoice,
   expiring domain, unverified email, ticket awaiting reply...),
   so the trigger now shows a live count instead of plain text.
   ============================================================ */
.notif-item { position: relative; }

.notif-bell {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #55555f !important;
    font-size: 16px;
    padding: 0 !important;
    transition: background .16s ease, color .16s ease;
}
.notif-bell:hover,
.notif-bell:focus {
    background: var(--db-purple-light) !important;
    color: var(--db-purple) !important;
}

/* red count badge */
.notif-count {
    position: absolute;
    top: 2px;
    right: 1px;
    z-index: 3;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 20px;
    background: #f0554e;
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(240,85,78,0.4);
}

/* gentle pulse so a new alert is noticed without being obnoxious */
.notif-bell.has-alerts { color: var(--db-purple) !important; }
/* the pulse ring previously used z-index:-1, which pushed it behind the
   header background and left a clipped red wedge next to the badge */
.notif-bell.has-alerts .notif-count::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(240,85,78,0.55);
    animation: notif-pulse 2.2s ease-out infinite;
    pointer-events: none;
}
@keyframes notif-pulse {
    0%   { transform: scale(1);   opacity: .9; }
    70%  { transform: scale(1.9); opacity: 0; }
    100% { transform: scale(1.9); opacity: 0; }
}

/* ---- popover contents ---- */
.notif-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--db-border);
}
.notif-head-title {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a2e;
}
.notif-head-count {
    background: #fde3e2;
    color: #d9453e;
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 11.5px;
    font-weight: 700;
}

.popover-user-notifications .notif-row a {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 13px 18px !important;
}
.popover-user-notifications .notif-row .message {
    flex: 1 1 auto;
    margin-left: 0 !important;
    color: #33333d;
    font-size: 13.5px;
    line-height: 1.55;
}
.popover-user-notifications .notif-go {
    color: #c8c8d0;
    font-size: 11px;
    transition: transform .15s ease, color .15s ease;
}
.popover-user-notifications .notif-row a:hover .notif-go {
    color: var(--db-purple);
    transform: translateX(3px);
}

/* severity accent bar on each row */
.popover-user-notifications .notif-row { position: relative; }
.popover-user-notifications .notif-row::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--db-purple);
}
.popover-user-notifications .notif-danger::before  { background: #f0554e; }
.popover-user-notifications .notif-warning::before { background: #f7a94a; }
.popover-user-notifications .notif-success::before { background: #17c690; }
.popover-user-notifications .notif-info::before    { background: var(--db-purple); }

/* empty state */
.popover-user-notifications li.none {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 32px 18px !important;
}
.notif-empty-icon {
    width: 46px; height: 46px;
    border-radius: 50%;
    background: #f4f4f9;
    color: #b8b8c4;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.notif-empty-text { color: #9a9aa5; font-size: 13.5px; font-weight: 500; }

/* footer link */
.notif-foot {
    display: block;
    padding: 13px 18px;
    text-align: center;
    border-top: 1px solid var(--db-border);
    color: var(--db-purple) !important;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none !important;
    transition: background .14s ease;
}
.notif-foot:hover { background: var(--db-purple-light) !important; }
.notif-foot i { font-size: 11px; margin-left: 4px; }

@media (prefers-reduced-motion: reduce) {
    .notif-bell.has-alerts::after { animation: none; }
}

/* Our panel supplies its own header (.notif-head), so the built-in
   popover title is collapsed rather than removed — display:none on it
   can leave the popover with no measurable content. */
.popover-user-notifications .popover-title,
.popover-user-notifications > h3.popover-title {
    padding: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    border: none !important;
    font-size: 0 !important;
}

/* the panel must have real width even before its content paints */
.popover-user-notifications {
    min-width: 330px !important;
    max-width: 380px !important;
}
.popover-user-notifications .popover-content {
    min-width: 330px;
    padding: 0 !important;
}
/* keep bootstrap's arrow hidden but leave the box itself intact */
.popover-user-notifications > .arrow,
.popover-user-notifications > .popover-arrow { display: none !important; }

/* ============================================================
   LANGUAGE CHOOSER
   The stock popover uses a near-black panel with a world-map
   background image and floated 3-column links, which clashes with
   everything else. Rebuilt as a clean light grid.
   ============================================================ */
.language-popover {
    max-width: 480px !important;
    width: auto !important;
    background-color: #fff !important;
    background-image: none !important;
    border: 1px solid var(--db-border) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 50px rgba(20,20,50,0.18) !important;
    font-size: 14px !important;
    padding: 6px !important;
}
.language-popover .popover-content {
    padding: 8px !important;
}
.language-popover .popover-content ul {
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    overflow: visible !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
    list-style: none;
}
.language-popover .popover-content li {
    float: none !important;
    display: block !important;
    width: auto !important;
    padding: 0 !important;
    line-height: normal !important;
}
.language-popover .popover-content li a {
    display: block;
    padding: 9px 12px !important;
    border-radius: 9px;
    color: #44444f !important;
    font-size: 13.5px;
    text-decoration: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background .14s ease, color .14s ease;
}
.language-popover .popover-content li a:hover {
    background: var(--db-purple-light) !important;
    color: var(--db-purple) !important;
}
.language-popover .popover-title {
    background: #fff !important;
    border-bottom: 1px solid var(--db-border) !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 13px 16px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1a1a2e !important;
}

@media (max-width: 620px) {
    .language-popover { max-width: 300px !important; }
    .language-popover .popover-content ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* the trigger in the top bar */
.choose-language {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
}
.choose-language i { color: var(--db-purple); }

/* ============================================================
   "View More..." link in the Active Services home panel
   WHMCS marks it disabled when there is nothing further to show,
   but it still rendered as a dead link. Hide it instead.
   ============================================================ */
.client-home-panels .btn-view-more.disabled,
.client-home-panels a[aria-disabled="true"].btn-view-more {
    display: none !important;
}
.client-home-panels .panel-footer:not(:has(a:not(.disabled))) {
    display: none !important;
}

/* ============================================================
   MY DOMAINS — card-row list
   ============================================================ */
.dom-summary-row { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1100px) { .dom-summary-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { .dom-summary-row { grid-template-columns: repeat(2, 1fr); } }
.dom-summary-chip.is-expiring::before  { background: #f7a94a; }
.dom-summary-chip.is-suspended::before { background: #f0554e; }

.dom-intro-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.dom-secondary-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff !important;
    border: 1px solid var(--db-border) !important;
    color: #55555f !important;
    border-radius: 10px !important;
    padding: 11px 20px !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    text-decoration: none !important;
}
.dom-secondary-btn:hover {
    border-color: var(--db-purple) !important;
    color: var(--db-purple) !important;
    background: var(--db-purple-light) !important;
}

/* bulk bar — hidden until a row is ticked */
.dom-bulkbar {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: 12px;
    padding: 10px 16px;
    margin-bottom: 14px;
    opacity: .55;
    transition: opacity .16s ease, border-color .16s ease, background .16s ease;
}
.dom-bulkbar.is-active {
    opacity: 1;
    border-color: rgba(108,78,245,0.35);
    background: var(--db-purple-light);
}
.dom-selectall {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-weight: 600 !important;
    font-size: 13px;
    color: #55555f;
    cursor: pointer;
}
.dom-selectall input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: #6c4ef5;
    margin: 0;
    cursor: pointer;
}
.dom-bulk-btn {
    background: #fff !important;
    border: 1px solid var(--db-border) !important;
    color: #55555f !important;
    border-radius: 9px !important;
    padding: 8px 16px !important;
    font-weight: 600 !important;
    font-size: 12.5px !important;
}
.dom-bulk-btn:hover {
    border-color: var(--db-purple) !important;
    color: var(--db-purple) !important;
}

/* rows as cards */
.domains-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 12px !important;
}
.domains-table thead {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0,0,0,0);
}
.domains-table tbody tr {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: 16px;
    padding: 14px 18px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(20,20,50,0.03);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.domains-table tbody tr:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(20,20,50,0.08);
    border-color: rgba(108,78,245,0.32);
}
.domains-table tbody td {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
}

.dom-check-cell { flex: 0 0 auto; margin-right: 12px; }
.dom-check-cell input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: #6c4ef5;
    cursor: pointer;
}
.dom-icon-cell { flex: 0 0 auto; margin-right: 13px; }
.dom-avatar {
    width: 40px; height: 40px;
    border-radius: 12px;
    background: var(--db-purple-light);
    color: var(--db-purple);
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
}
.dom-avatar img { max-width: 20px; max-height: 20px; }

.dom-name-cell {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.dom-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.dom-name {
    color: #1a1a2e;
    font-size: 14.5px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* small "open the site" action — keeps the row click free for managing */
.dom-visit {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    color: #b8b8c4 !important;
    font-size: 10.5px;
    text-decoration: none !important;
    opacity: 0;
    transition: opacity .15s ease, background .15s ease, color .15s ease;
}
.domains-table tbody tr:hover .dom-visit { opacity: 1; }
.dom-visit:hover {
    background: var(--db-purple-light);
    color: var(--db-purple) !important;
}
/* always visible on touch devices, where there is no hover */
@media (hover: none) {
    .dom-visit { opacity: 1; }
}
.dom-expiring-tag {
    align-self: flex-start;
    background: #fdecd2;
    color: #b3760f;
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 10.5px;
    font-weight: 700;
}

.dom-date-cell {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0 20px;
    text-align: left;
}
.dom-mini-label {
    color: #a5a5b0;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .3px;
    white-space: nowrap;
}
.dom-mini-value {
    color: #55555f;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}

.dom-renew-cell { flex: 0 0 auto; margin-right: 18px; }
.dom-renew {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 20px;
    white-space: nowrap;
}
.dom-renew.is-on  { background: #dcf6ec; color: #12a374; }
.dom-renew.is-off { background: #f4f4f9; color: #8a8a95; }

.dom-status-cell { flex: 0 0 auto; margin-right: 14px; }
.domains-table .label.status {
    display: inline-block;
    border-radius: 20px;
    padding: 6px 15px;
    font-weight: 600;
    font-size: 11.5px;
    color: #fff;
    border: none;
    white-space: nowrap;
    min-width: 88px;
    text-align: center;
}
.domains-table .label.status-active    { background: #17c690; }
.domains-table .label.status-pending   { background: #f7a94a; }
.domains-table .label.status-expired   { background: #f0554e; }
.domains-table .label.status-cancelled { background: #9a9aa5; }
.domains-table .label.status-fraud     { background: #b02a24; }
.domains-table .label.status-transferred-away { background: #6b7280; }

.dom-action-cell { flex: 0 0 auto; }
.dom-manage-btn {
    background: #fff !important;
    border: 1px solid var(--db-border) !important;
    color: #55555f !important;
    padding: 8px 12px !important;
    font-size: 12.5px !important;
}
.dom-manage-btn:first-child { border-radius: 9px 0 0 9px !important; }
.dom-manage-btn:last-child  { border-radius: 0 9px 9px 0 !important; border-left: none !important; }
.dom-manage-btn:hover {
    border-color: var(--db-purple) !important;
    color: var(--db-purple) !important;
    background: var(--db-purple-light) !important;
}
.dom-actions .dropdown-menu {
    border-radius: 12px !important;
    border: none !important;
    padding: 6px !important;
    box-shadow: 0 16px 40px rgba(20,20,50,0.16) !important;
    min-width: 210px;
}
.dom-actions .dropdown-menu > li > a {
    padding: 9px 13px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    color: #55555f !important;
}
.dom-actions .dropdown-menu > li > a:hover {
    background: var(--db-purple-light) !important;
    color: var(--db-purple) !important;
}
.dom-actions .dropdown-menu > li > a i { width: 18px; color: var(--db-purple); }
.dom-actions .dropdown-menu > li.disabled > a { opacity: .45; }
.dom-actions .dropdown-menu .divider { background: var(--db-border); margin: 5px 4px; }

/* open row sits above its neighbours so the menu is not clipped */
.domains-table tbody tr:has(.open) { z-index: 40; position: relative; }

@media (max-width: 1000px) {
    .domains-table tbody tr { flex-wrap: wrap; gap: 10px; }
    .dom-name-cell { flex: 1 1 55%; }
    .dom-date-cell { margin: 0; flex: 1 1 40%; }
    .dom-renew-cell, .dom-status-cell { margin: 0; }
    .dom-action-cell { margin-left: auto; }
}

/* ============================================================
   Third-party notification widget ("nh-" prefixed)
   Duplicates the header bell, so it is hidden. If any part of it
   is still visible, send the wrapper's class and add it here.
   ============================================================ */
.nh-bell-button,
.nh-bell-count,
.nh-bell,
.nh-bell-wrapper,
.nh-panel,
.nh-popover,
.nh-dropdown,
.nh-notifications,
.nh-container,
.nh-root,
.nh-widget {
    display: none !important;
}

/* ============================================================
   DOMAIN DETAILS PAGE (clientareadomaindetails.tpl)
   ============================================================ */
.dom-detail-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 22px;
}
.dom-detail-main { flex: 1 1 58%; min-width: 300px; }
.dom-detail-side { flex: 1 1 34%; min-width: 260px; }

.dom-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    padding: 22px 24px;
    position: relative;
    overflow: hidden;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.dom-hero::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--db-purple);
}
.dom-hero-icon {
    width: 56px; height: 56px; min-width: 56px;
    border-radius: 16px;
    background: var(--db-purple-light);
    color: var(--db-purple);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
}
.dom-hero-text { flex: 1 1 auto; min-width: 0; }
.dom-hero-text h3 { margin: 0 0 3px; font-size: 19px; font-weight: 700; }
.dom-hero-text h3 a { color: #1a1a2e !important; text-decoration: none !important; }
.dom-hero-text h3 a:hover { color: var(--db-purple) !important; }
.dom-hero-sub {
    color: #9a9aa5;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.dom-hero-status {
    flex: 0 0 auto;
    display: inline-block;
    padding: 7px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: #17c690;
    white-space: nowrap;
}

/* quick facts strip */
.dom-quickfacts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
@media (max-width: 620px) { .dom-quickfacts { grid-template-columns: 1fr; } }
.dqf {
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: 14px;
    padding: 14px 16px;
}
.dqf-label {
    display: block;
    color: #a5a5b0;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .3px;
    margin-bottom: 4px;
}
.dqf-value { display: block; color: #33333d; font-size: 13.5px; font-weight: 600; }
.dqf-value.is-strong { color: #1a1a2e; font-weight: 800; }

/* management panels (nameservers / contacts / lock / addons) */
.tab-content .panel,
#tabNameservers .panel,
#tabAutorenew .panel {
    border: 1px solid var(--db-border) !important;
    border-radius: var(--db-radius) !important;
    box-shadow: none !important;
}
.moduleoutput {
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    padding: 20px 22px;
    margin: 18px 0;
}
.moduleoutput .btn {
    border-radius: 9px !important;
    font-weight: 600 !important;
}

/* ============================================================
   DOMAIN RENEWALS — superseded
   An earlier pass styled this page against the stock markup. The
   template now uses .dr-* classes and the current rules live further
   down this file; keeping both meant two sets of competing values for
   the same cards. The old block has been removed.
   ============================================================ */
/* ============================================================
   DOMAIN HUB — shared shell for register / transfer / renew
   ============================================================ */
#order-standard_cart .domain-hub-hero {
    text-align: center;
    padding: 6px 0 4px;
    margin-bottom: 26px;
}
#order-standard_cart .domain-hub-title {
    font-size: 30px !important;
    font-weight: 800 !important;
    color: #1a1a2e !important;
    letter-spacing: -0.6px;
    margin: 0 0 8px !important;
}
#order-standard_cart .domain-checker-subtitle {
    color: #8a8a95;
    font-size: 15px;
    max-width: 560px;
    margin: 0 auto 22px;
}

/* segmented switcher */
.domain-hub-tabs {
    display: inline-flex;
    gap: 4px;
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: 14px;
    padding: 5px;
    max-width: 100%;
    overflow-x: auto;
    box-shadow: 0 2px 10px rgba(20,20,50,0.04);
}
.domain-hub-tabs .dht {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 10px;
    color: #8a8a95 !important;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}
.domain-hub-tabs .dht i { font-size: 12px; }
.domain-hub-tabs .dht:hover {
    background: var(--db-purple-light);
    color: var(--db-purple) !important;
}
.domain-hub-tabs .dht.is-active {
    background: var(--db-purple);
    color: #fff !important;
    box-shadow: 0 5px 14px rgba(108,78,245,0.28);
}

/* ============================================================
   SEARCH RESULT PANEL (register page)
   ============================================================ */
#order-standard_cart .domain-checker-result-headline {
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    padding: 26px 24px;
    margin-bottom: 20px;
    text-align: center;
}
#order-standard_cart .domain-searching,
#order-standard_cart .domain-lookup-loader {
    color: #8a8a95;
    font-size: 14px;
    margin: 0;
}
#order-standard_cart .domain-checker-available {
    color: #12a374;
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 14px;
}
#order-standard_cart .domain-checker-unavailable,
#order-standard_cart .domain-checker-invalid {
    color: #d9453e;
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 10px;
}
#order-standard_cart .domain-length-restrictions {
    display: block;
    color: #8a8a95;
    font-size: 12.5px;
    font-weight: 400;
    margin-top: 5px;
}
#order-standard_cart .domain-price {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin: 0;
}
#order-standard_cart .domain-price .price {
    font-size: 22px;
    font-weight: 800;
    color: var(--db-purple);
}

/* add-to-cart buttons across the page */
#order-standard_cart .btn-add-to-cart {
    background: var(--db-purple) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 10px !important;
    padding: 11px 24px !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
    box-shadow: 0 6px 16px rgba(108,78,245,0.22);
    transition: background .15s ease, transform .15s ease;
}
#order-standard_cart .btn-add-to-cart:hover {
    background: var(--db-purple-dark) !important;
    transform: translateY(-1px);
}
#order-standard_cart .btn-add-to-cart.added,
#order-standard_cart .btn-add-to-cart .added {
    background: #17c690 !important;
}
#order-standard_cart .domain-contact-support {
    background: #fff !important;
    border: 1px solid var(--db-border) !important;
    color: #55555f !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
}

/* ============================================================
   SPOTLIGHT TLDs
   ============================================================ */
#order-standard_cart .spotlight-tlds-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}
#order-standard_cart .spotlight-tld-container { width: auto !important; float: none !important; padding: 0 !important; }
#order-standard_cart .spotlight-tld {
    position: relative;
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: 16px;
    padding: 20px 16px 18px;
    text-align: center;
    font-size: 19px;
    font-weight: 800;
    color: #1a1a2e;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
#order-standard_cart .spotlight-tld:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(20,20,50,0.09);
    border-color: rgba(108,78,245,0.35);
}
#order-standard_cart .spotlight-tld .price {
    display: block;
    color: var(--db-purple);
    font-size: 15px;
    font-weight: 700;
    margin: 8px 0 10px;
}
#order-standard_cart .spotlight-tld .btn {
    width: 100%;
    font-size: 12.5px !important;
    padding: 9px 12px !important;
}
#order-standard_cart [class^="spotlight-tld-"][class*="hot"],
#order-standard_cart [class^="spotlight-tld-"][class*="new"],
#order-standard_cart [class^="spotlight-tld-"][class*="sale"] {
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 20px;
    padding: 3px 12px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #fff;
    background: var(--db-purple);
}

/* ============================================================
   SUGGESTED DOMAINS
   ============================================================ */
#order-standard_cart .suggested-domains {
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    overflow: hidden;
    margin-bottom: 26px;
}
#order-standard_cart .suggested-domains .panel-heading {
    background: #fbfbfd !important;
    border-bottom: 1px solid var(--db-border) !important;
    padding: 15px 20px !important;
    font-size: 14.5px;
    font-weight: 700;
    color: #1a1a2e;
}
#order-standard_cart .domain-suggestion {
    display: flex !important;
    align-items: center;
    gap: 12px;
    border: none !important;
    border-bottom: 1px solid var(--db-border) !important;
    padding: 14px 20px !important;
    transition: background .14s ease;
}
#order-standard_cart .domain-suggestion:last-child { border-bottom: none !important; }
#order-standard_cart .domain-suggestion:hover { background: var(--db-purple-light); }
#order-standard_cart .domain-suggestion .domain {
    font-weight: 700;
    color: #1a1a2e;
    font-size: 14.5px;
}
#order-standard_cart .domain-suggestion .extension {
    font-weight: 700;
    color: var(--db-purple);
    font-size: 14.5px;
}
#order-standard_cart .domain-suggestion .promo span {
    background: #fdecd2;
    color: #b3760f;
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    margin-left: 6px;
}
#order-standard_cart .domain-suggestion .actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}
#order-standard_cart .domain-suggestion .price {
    font-weight: 700;
    color: #1a1a2e;
    font-size: 14px;
    white-space: nowrap;
}
#order-standard_cart .more-suggestions {
    background: #fbfbfd !important;
    border-top: 1px solid var(--db-border) !important;
    padding: 13px !important;
}
#order-standard_cart .more-suggestions a {
    color: var(--db-purple) !important;
    font-weight: 600;
    font-size: 13px;
}
#order-standard_cart .domain-suggestions-warning {
    padding: 12px 20px 0;
    font-size: 12px;
}

/* ============================================================
   RENEWALS — filter bar
   ============================================================ */
#order-standard_cart .domain-renew-filterbar {
    position: relative;
    max-width: 320px;
    margin: 0 0 18px;
}
#order-standard_cart .domain-renew-filterbar i {
    position: absolute;
    left: 15px; top: 50%;
    transform: translateY(-50%);
    color: #b8b8c4;
    font-size: 13px;
    pointer-events: none;
}
#order-standard_cart .domain-renew-filterbar .form-control {
    padding-left: 40px !important;
    height: 44px !important;
    border: 1px solid var(--db-border) !important;
    border-radius: 11px !important;
    box-shadow: none !important;
    max-width: none;
}
#order-standard_cart .domain-renew-filterbar .form-control:focus {
    border-color: var(--db-purple) !important;
    box-shadow: 0 0 0 3px rgba(108,78,245,0.12) !important;
}
#order-standard_cart .secondary-cart-body {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

@media (max-width: 600px) {
    #order-standard_cart .domain-hub-title { font-size: 24px !important; }
    .domain-hub-tabs .dht { padding: 9px 14px; font-size: 12.5px; }
    .domain-hub-tabs .dht span { display: none; }
    .domain-hub-tabs .dht.is-active span { display: inline; }
}

/* ============================================================
   FEATURED TLD CHIPS (register + transfer)
   Rebuilt from scratch: the stock .featured-tld carried a
   box-shadow and a grey .price bar, which read as two stacked
   boxes. One chip now holds both the extension and the price.
   ============================================================ */
#order-standard_cart .featured-tlds-container {
    margin: 26px 0 34px !important;
}
#order-standard_cart .tld-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}
#order-standard_cart .tld-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    background: #fff;
    border: 1.5px solid var(--db-border);
    border-radius: 14px;
    padding: 13px 22px;
    min-width: 118px;
    box-shadow: none;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
#order-standard_cart .tld-chip:hover {
    transform: translateY(-3px);
    border-color: var(--db-purple);
    box-shadow: 0 10px 24px rgba(108,78,245,0.14);
}
#order-standard_cart .tld-chip-ext {
    font-size: 15.5px;
    font-weight: 800;
    color: #1a1a2e;
    letter-spacing: -0.2px;
    line-height: 1.2;
}
#order-standard_cart .tld-chip-ext .dot {
    color: var(--db-purple);
    margin-right: 1px;
}
#order-standard_cart .tld-chip-price {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--db-purple);
    white-space: nowrap;
}

/* kill the legacy shell in case any cached markup still renders it */
#order-standard_cart .featured-tld {
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
}
#order-standard_cart .featured-tld .price {
    background-color: transparent !important;
    border-radius: 0 !important;
}
#order-standard_cart .featured-tld .img-container { display: none !important; }

/* ============================================================
   CAPTCHA — clean inline row instead of the grey stock panel
   ============================================================ */
#order-standard_cart .default-captcha,
#order-standard_cart .default-captcha-register-margin {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    max-width: none !important;
    margin: 18px auto 0 !important;
    padding: 0 !important;
    color: #8a8a95 !important;
    font-size: 13px !important;
    text-align: center;
}
#order-standard_cart .captcha-container p {
    margin-bottom: 10px !important;
    color: #8a8a95 !important;
    font-size: 13px;
}
#order-standard_cart .default-captcha > div {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
#order-standard_cart .captcha-container img,
#order-standard_cart #inputCaptchaImage {
    margin-top: 0 !important;
    border-radius: 10px;
    border: 1px solid var(--db-border);
    height: 42px;
}
#order-standard_cart .captcha-container .form-control,
#order-standard_cart #inputCaptcha {
    height: 42px !important;
    max-width: 120px !important;
    text-align: center;
    border: 1px solid var(--db-border) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    font-size: 15px;
    letter-spacing: 2px;
    font-weight: 600;
    color: #1a1a2e !important;
}
#order-standard_cart .captcha-container .form-control:focus {
    border-color: var(--db-purple) !important;
    box-shadow: 0 0 0 3px rgba(108,78,245,0.12) !important;
}
#order-standard_cart .recaptcha-container {
    display: flex;
    justify-content: center;
    margin: 16px 0 0 !important;
}

/* ============================================================
   DOMAIN PAGES — rebuilt shell (.domain-page)
   Register / Transfer share this hero + search design.
   ============================================================ */
#order-standard_cart.domain-page .cart-body { padding-top: 4px; }

.dm-hero {
    text-align: center;
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: 22px;
    padding: 38px 30px 32px;
    margin-bottom: 26px;
    box-shadow: 0 4px 24px rgba(20,20,50,0.04);
}
.dm-title {
    font-size: 30px !important;
    font-weight: 800 !important;
    color: #1a1a2e !important;
    letter-spacing: -0.6px;
    margin: 0 0 8px !important;
}
.dm-sub {
    color: #8a8a95;
    font-size: 15px;
    max-width: 560px;
    margin: 0 auto 22px;
    line-height: 1.7;
}

/* search bar */
.dm-searchform { margin: 0 auto; max-width: 680px; }
/* one flush control — input and button share a single frame, with no
   inner padding creating a "box inside a box" look */
#order-standard_cart .dm-searchbar {
    display: flex;
    align-items: stretch;
    position: relative;
    background: #fff;
    border: 1.5px solid var(--db-border);
    border-radius: 14px;
    padding: 0;
    overflow: hidden;
    transition: border-color .16s ease, box-shadow .16s ease;
}
#order-standard_cart .dm-searchbar:hover { border-color: #d9d9e6; }
#order-standard_cart .dm-searchbar:focus-within {
    border-color: var(--db-purple);
    box-shadow: 0 0 0 4px rgba(108,78,245,0.10);
}
#order-standard_cart .dm-searchicon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #b8b8c4;
    font-size: 15px;
    pointer-events: none;
    z-index: 2;
    transition: color .16s ease;
}
#order-standard_cart .dm-searchbar:focus-within .dm-searchicon { color: var(--db-purple); }
#order-standard_cart .dm-searchbar .form-control {
    flex: 1 1 auto;
    height: 54px !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 16px 0 46px !important;
    font-size: 15.5px;
    color: #1a1a2e !important;
}
#order-standard_cart .dm-searchbar .form-control.input-needs-domain {
    box-shadow: 0 0 0 3px rgba(240,85,78,0.2) inset !important;
    border-radius: 10px;
}
#order-standard_cart .dm-searchbar .btn {
    flex: 0 0 auto;
    align-self: stretch;
    background: #17c690 !important;
    border: none !important;
    color: #fff !important;
    border-radius: 0 !important;
    padding: 0 34px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    margin: 0 !important;
}
#order-standard_cart .dm-searchbar .btn:hover { background: #13ac7c !important; }

/* auth code (transfer) */
.dm-auth {
    max-width: 680px;
    margin: 14px auto 0;
    text-align: left;
}
.dm-auth label {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #55555f;
    font-weight: 600;
    font-size: 12.5px;
    margin-bottom: 7px;
}
.dm-auth label i { color: var(--db-purple); }
.dm-auth-help {
    margin-left: auto;
    color: var(--db-purple) !important;
    font-weight: 500;
    font-size: 12px;
}
.dm-auth .form-control {
    height: 48px !important;
    background: #f7f7fb !important;
    border: 1.5px solid transparent !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    padding: 0 16px !important;
    color: #1a1a2e !important;
}
.dm-auth .form-control:focus {
    background: #fff !important;
    border-color: var(--db-purple) !important;
    box-shadow: 0 0 0 3px rgba(108,78,245,0.12) !important;
}

.dm-captcha { margin-top: 18px; }

/* ============================================================
   RESULT CARD
   ============================================================ */
.dm-result-card {
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    padding: 28px 26px;
    margin-bottom: 20px;
    text-align: center;
}
.dm-idn-note { color: #8a8a95; font-size: 13px; margin: 14px 0 8px; }
.dm-idn-select {
    max-width: 320px;
    margin: 0 auto;
    height: 44px !important;
    border: 1px solid var(--db-border) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

/* ============================================================
   SPOTLIGHT TLD CARDS
   ============================================================ */
#order-standard_cart .spotlight-tld-container { width: auto !important; float: none !important; padding: 0 !important; }
#order-standard_cart .spotlight-tld .spotlight-ext {
    display: block;
    font-size: 20px;
    font-weight: 800;
    color: #1a1a2e;
    margin-bottom: 8px;
}
#order-standard_cart .spotlight-tld [class^="spotlight-tld-"] {
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--db-purple);
    color: #fff;
    border-radius: 20px;
    padding: 3px 12px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    white-space: nowrap;
}

/* ============================================================
   TLD PRICING LIST
   ============================================================ */
.dm-section-title {
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 34px 0 18px;
}
.dm-pricing-card {
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    padding: 24px 26px 10px;
    box-shadow: 0 4px 24px rgba(20,20,50,0.04);
}
#order-standard_cart .domain-price-list .tld-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 6px;
    border-bottom: 1px solid var(--db-border);
    transition: background .14s ease;
    margin: 0;
}
#order-standard_cart .domain-price-list .tld-row:last-of-type { border-bottom: none; }
#order-standard_cart .domain-price-list .tld-row:hover {
    background: var(--db-purple-light);
    border-radius: 10px;
}
#order-standard_cart .dpl-ext {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}
#order-standard_cart .dpl-ext strong {
    color: #1a1a2e;
    font-size: 16px;
    font-weight: 700;
}
#order-standard_cart .dpl-price {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}
#order-standard_cart .dpl-amount {
    color: #1a1a2e;
    font-weight: 700;
    font-size: 15px;
    white-space: nowrap;
}
#order-standard_cart .dpl-cycle {
    color: #9a9aa5;
    font-size: 12px;
    white-space: nowrap;
}
#order-standard_cart .btn-buy-now-tld {
    flex: 0 0 auto;
    background: #fff !important;
    border: 1.5px solid var(--db-purple) !important;
    color: var(--db-purple) !important;
    border-radius: 9px !important;
    padding: 8px 20px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    transition: all .15s ease;
}
#order-standard_cart .btn-buy-now-tld:hover {
    background: var(--db-purple) !important;
    color: #fff !important;
}
#order-standard_cart .tld-sale-group {
    background: #fdecd2;
    color: #b3760f;
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
}
#order-standard_cart .no-tlds { justify-content: center; padding: 34px 0 !important; }
#order-standard_cart .dm-empty { color: #9a9aa5; font-size: 14px; }

/* ============================================================
   TRANSFER BENEFITS + PROMOS
   ============================================================ */
.dm-benefits,
.dm-promos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin: 30px 0;
}
.dm-benefit,
.dm-promo {
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    padding: 26px 24px;
    text-align: center;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.dm-benefit:hover,
.dm-promo:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(20,20,50,0.08);
    border-color: rgba(108,78,245,0.3);
}
.dm-benefit-icon,
.dm-promo-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px; height: 52px;
    border-radius: 16px;
    background: var(--db-purple-light);
    color: var(--db-purple);
    font-size: 20px;
    margin-bottom: 14px;
}
.dm-benefit h4,
.dm-promo h3 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 700;
    color: #1a1a2e;
}
.dm-benefit p,
.dm-promo p {
    color: #8a8a95;
    font-size: 13.5px;
    line-height: 1.7;
    margin: 0 0 14px;
}
.dm-promo-btn {
    display: inline-block;
    background: var(--db-purple) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 10px !important;
    padding: 11px 26px !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
    text-decoration: none !important;
}
.dm-promo-btn:hover { background: var(--db-purple-dark) !important; }
.dm-promo-note {
    display: block;
    margin-top: 10px;
    color: #a5a5b0;
    font-size: 11.5px;
}
.dm-exclusions {
    text-align: center;
    color: #a5a5b0;
    font-size: 12.5px;
    margin-bottom: 30px;
}

@media (max-width: 600px) {
    .dm-hero { padding: 26px 18px 24px; border-radius: 16px; }
    .dm-title { font-size: 24px !important; }
    .dm-searchbar { flex-wrap: wrap; }
    .dm-searchbar .form-control { flex: 1 1 100%; }
    .dm-searchbar .btn { flex: 1 1 100%; margin-top: 6px; }
    #order-standard_cart .domain-price-list .tld-row { flex-wrap: wrap; gap: 10px; }
    #order-standard_cart .dpl-price { align-items: flex-start; text-align: left; }
}

/* ============================================================
   DOMAIN HERO — vertical rhythm fix
   The tab switcher sat directly against the search bar.
   ============================================================ */
.dm-hero .domain-hub-tabs {
    margin-bottom: 26px;
}
.dm-hero .dm-searchform {
    margin-top: 0;
}
.dm-hero .dm-captcha {
    margin-top: 22px;
}
.dm-hero .featured-tlds-container {
    margin: 28px 0 0 !important;
}

/* ============================================================
   DataTables search box: give it an icon and a visible affordance
   (it rendered as an unlabelled empty rounded box)
   ============================================================ */
.dataTables_wrapper .dataTables_filter label {
    position: relative;
    display: inline-block;
    font-size: 0; /* hides the stock "Search:" text node */
}
/* inline SVG magnifier: independent of whichever Font Awesome build
   is installed, so it can never fall back to a blank glyph box */
.dataTables_wrapper .dataTables_filter label::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    pointer-events: none;
    z-index: 2;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8b8c4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_filter .form-control {
    font-size: 13.5px !important;
    padding-left: 36px !important;
    margin-left: 0 !important;
}

/* ============================================================
   MARKDOWN EDITOR — corrective pass
   1) Double border: the wrapper got a purple ring on focus AND
      the textarea inside picked up the global .form-control:focus
      ring, so two outlines stacked.
   2) Fullscreen: our border-radius / overflow / padding fought the
      plugin's fixed-position fullscreen layout.
   ============================================================ */

/* --- 1. single, clean focus ring on the wrapper only --- */
.md-editor > textarea.markdown-editor,
.md-editor > textarea.md-input,
.md-editor textarea.form-control {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}
.md-editor > textarea.markdown-editor:focus,
.md-editor > textarea.md-input:focus,
.md-editor textarea.form-control:focus {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: #fff !important;
}
div.md-editor.active {
    border-color: var(--db-purple) !important;
    box-shadow: 0 0 0 3px rgba(108,78,245,0.12) !important;
}

/* --- 2. fullscreen mode: stand aside and let the plugin lay out --- */
.md-editor.md-fullscreen-mode {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 99999 !important;
    padding: 74px 30px 20px !important;
    margin: 0 !important;
    background: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: auto !important;
    box-shadow: none !important;
}
.md-editor.md-fullscreen-mode .md-header,
.md-editor.md-fullscreen-mode > .btn-toolbar {
    position: fixed !important;
    top: 16px !important;
    left: 0 !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
    display: flex;
    justify-content: center;
    gap: 6px;
}
.md-editor.md-fullscreen-mode > .btn-toolbar .btn {
    background: #fff !important;
    border: 1px solid var(--db-border) !important;
    color: #55555f !important;
}
.md-editor.md-fullscreen-mode > .btn-toolbar .btn:hover,
.md-editor.md-fullscreen-mode > .btn-toolbar .btn.active {
    background: var(--db-purple-light) !important;
    border-color: var(--db-purple) !important;
    color: var(--db-purple) !important;
}
.md-editor.md-fullscreen-mode > textarea.markdown-editor,
.md-editor.md-fullscreen-mode > textarea.md-input,
.md-editor.md-fullscreen-mode .md-preview {
    height: 100% !important;
    max-width: 900px;
    margin: 0 auto !important;
    padding: 24px !important;
    font-size: 17px !important;
    line-height: 1.75 !important;
    border: 1px solid var(--db-border) !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: #1a1a2e !important;
    resize: none !important;
}
.md-editor.md-fullscreen-mode .markdown-editor-status,
.md-editor.md-fullscreen-mode .md-footer {
    display: none !important;
}
.md-editor.md-fullscreen-mode .md-fullscreen-controls {
    position: fixed !important;
    top: 18px;
    right: 22px;
    z-index: 100000;
}
.md-editor.md-fullscreen-mode .md-fullscreen-controls a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid var(--db-border);
    color: #55555f !important;
    margin: 0;
}
.md-editor.md-fullscreen-mode .md-fullscreen-controls a:hover {
    background: var(--db-purple-light);
    border-color: var(--db-purple);
    color: var(--db-purple) !important;
}

/* stop the page behind scrolling while fullscreen is open */
body.md-fullscreen-mode { overflow: hidden !important; }

/* the expand/collapse icons in the normal toolbar */
.md-editor .md-controls {
    float: right;
    padding: 3px 6px;
}
.md-editor .md-controls .md-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    color: #b8b8c4 !important;
    transition: background .14s ease, color .14s ease;
}
.md-editor .md-controls .md-control:hover {
    background: var(--db-purple-light);
    color: var(--db-purple) !important;
}

/* ============================================================
   AFFILIATES
   ============================================================ */
.aff-link-card {
    background: linear-gradient(135deg, #6c4ef5 0%, #5b3fe0 100%);
    border-radius: var(--db-radius);
    padding: 26px 28px;
    margin-bottom: 20px;
    color: #fff;
    box-shadow: 0 12px 30px rgba(108,78,245,0.22);
}
.aff-link-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
}
.aff-link-icon {
    width: 44px; height: 44px; min-width: 44px;
    border-radius: 14px;
    background: rgba(255,255,255,0.18);
    display: flex; align-items: center; justify-content: center;
    font-size: 17px;
}
.aff-link-head h3 { margin: 0 0 4px; font-size: 17px; font-weight: 700; color: #fff; }
.aff-link-head p { margin: 0; font-size: 13px; opacity: .85; }

.aff-link-row { display: flex; gap: 10px; flex-wrap: wrap; }
.aff-link-row .form-control {
    flex: 1 1 260px;
    height: 48px !important;
    border: none !important;
    border-radius: 11px !important;
    background: rgba(255,255,255,0.95) !important;
    color: #1a1a2e !important;
    font-size: 14px;
    box-shadow: none !important;
    cursor: text;
}
.aff-copy-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff !important;
    border: none !important;
    color: var(--db-purple) !important;
    border-radius: 11px !important;
    padding: 0 24px !important;
    height: 48px;
    font-weight: 700 !important;
    font-size: 13.5px !important;
    transition: background .15s ease, color .15s ease;
}
.aff-copy-btn.is-copied {
    background: #17c690 !important;
    color: #fff !important;
}

/* stats */
.aff-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}
@media (max-width: 700px) { .aff-stats { grid-template-columns: 1fr; } }
.aff-stat {
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    padding: 22px 20px;
    text-align: center;
    transition: transform .16s ease, box-shadow .16s ease;
}
.aff-stat:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(20,20,50,0.08); }
.aff-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px; height: 46px;
    border-radius: 14px;
    font-size: 17px;
    margin-bottom: 12px;
}
.aff-stat-icon.is-visits  { background: var(--db-purple-light); color: var(--db-purple); }
.aff-stat-icon.is-signups { background: #dcf6ec; color: #12a374; }
.aff-stat-icon.is-rate    { background: #fdecd2; color: #b3760f; }
.aff-stat-num {
    display: block;
    font-size: 26px;
    font-weight: 800;
    color: #1a1a2e;
    line-height: 1.1;
}
.aff-stat-label {
    display: block;
    margin-top: 4px;
    color: #8a8a95;
    font-size: 13px;
    font-weight: 500;
}

/* earnings */
.aff-earnings {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 16px;
    margin-bottom: 26px;
}
@media (max-width: 820px) { .aff-earnings { grid-template-columns: 1fr; } }

.aff-balance {
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    padding: 24px 26px;
    text-align: center;
}
.aff-balance-label {
    display: block;
    color: #8a8a95;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 6px;
}
.aff-balance-value {
    display: block;
    font-size: 32px;
    font-weight: 800;
    color: var(--db-purple);
    letter-spacing: -0.8px;
    margin-bottom: 18px;
}
.aff-withdraw-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--db-purple) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 11px !important;
    padding: 13px 28px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    box-shadow: 0 8px 20px rgba(108,78,245,0.24);
}
.aff-withdraw-btn:hover { background: var(--db-purple-dark) !important; color: #fff !important; }
.aff-withdraw-btn.disabled {
    background: #f1f1f5 !important;
    color: #a5a5b0 !important;
    box-shadow: none;
    pointer-events: none;
}
.aff-withdraw-note {
    margin: 12px 0 0;
    color: #9a9aa5;
    font-size: 12.5px;
    line-height: 1.6;
}
.aff-withdraw-sent {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #dcf6ec;
    color: #12805e;
    border-radius: 11px;
    padding: 12px 20px;
    font-size: 13.5px;
    font-weight: 600;
}

.aff-earnings-list {
    list-style: none;
    margin: 0;
    padding: 8px 26px;
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
}
.aff-earnings-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--db-border);
    font-size: 14px;
}
.aff-earnings-list li:last-child { border-bottom: none; }
.ael-label { color: #8a8a95; }
.ael-value { color: #1a1a2e; font-weight: 600; }
.ael-value.is-strong { color: var(--db-purple); font-weight: 800; font-size: 16px; }

.aff-section-title {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 30px 0 16px;
}

/* referrals list */
.aff-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 10px !important;
}
.aff-table thead {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0,0,0,0);
}
.aff-table tbody tr {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: 14px;
    padding: 14px 18px;
    transition: transform .15s ease, box-shadow .15s ease;
}
.aff-table tbody tr:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(20,20,50,0.07);
}
.aff-table tbody td {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
}
.aff-service-cell {
    flex: 1 1 auto;
    min-width: 0;
    color: #1a1a2e;
    font-weight: 600;
    font-size: 14px;
}
.aff-date-cell,
.aff-amount-cell,
.aff-commission-cell {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0 20px;
    text-align: left;
}
.aff-mini-label {
    color: #a5a5b0;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .3px;
    white-space: nowrap;
}
.aff-mini-value { color: #55555f; font-size: 13px; font-weight: 600; white-space: nowrap; }
.aff-commission { color: #12a374; font-size: 14px; font-weight: 800; white-space: nowrap; }
.aff-status-cell { flex: 0 0 auto; }
.aff-table .label.status {
    display: inline-block;
    border-radius: 20px;
    padding: 6px 15px;
    font-weight: 600;
    font-size: 11.5px;
    color: #fff;
    border: none;
    min-width: 86px;
    text-align: center;
}
.aff-table .label.status-pending   { background: #f7a94a; }
.aff-table .label.status-cleared,
.aff-table .label.status-paid      { background: #17c690; }
.aff-table .label.status-cancelled { background: #9a9aa5; }

.aff-banners {
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    padding: 22px;
    text-align: center;
}
.aff-banners textarea,
.aff-banners input {
    border: 1px solid var(--db-border) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

@media (max-width: 800px) {
    .aff-table tbody tr { flex-wrap: wrap; gap: 10px; }
    .aff-service-cell { flex: 1 1 100%; }
    .aff-date-cell, .aff-amount-cell, .aff-commission-cell { margin: 0; }
    .aff-status-cell { margin-left: auto; }
}

/* ============================================================
   ANNOUNCEMENTS — list + single article
   ============================================================ */
.ann-list { display: flex; flex-direction: column; gap: 16px; }

.ann-card {
    display: flex;
    gap: 20px;
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    padding: 22px 24px;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.ann-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(20,20,50,0.08);
    border-color: rgba(108,78,245,0.3);
}

/* calendar block */
.ann-date {
    flex: 0 0 auto;
    width: 62px;
    height: 72px;
    border-radius: 14px;
    background: var(--db-purple-light);
    color: var(--db-purple);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.15;
}
.ann-day  { font-size: 22px; font-weight: 800; }
.ann-mon  { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.ann-year { font-size: 10.5px; opacity: .7; }

.ann-body { flex: 1 1 auto; min-width: 0; }
.ann-title { margin: 0 0 8px; font-size: 18px; font-weight: 700; line-height: 1.4; }
.ann-title a { color: #1a1a2e !important; text-decoration: none !important; }
.ann-title a:hover { color: var(--db-purple) !important; }

.ann-text {
    color: #8a8a95;
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ann-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ann-more {
    color: var(--db-purple) !important;
    font-weight: 700;
    font-size: 13.5px;
    text-decoration: none !important;
}
.ann-more i { font-size: 11px; margin-left: 4px; transition: transform .15s ease; }
.ann-more:hover i { transform: translateX(3px); }
.ann-edit {
    color: #9a9aa5 !important;
    font-size: 12.5px;
    text-decoration: none !important;
}
.ann-edit:hover { color: var(--db-purple) !important; }
.ann-social { margin-top: 12px; }

/* pagination */
.ann-pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 26px 0 10px;
}
.ann-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 14px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid var(--db-border);
    color: #55555f !important;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none !important;
    transition: all .15s ease;
}
.ann-page:hover {
    border-color: var(--db-purple);
    color: var(--db-purple) !important;
    background: var(--db-purple-light);
}
.ann-page.is-active {
    background: var(--db-purple);
    border-color: var(--db-purple);
    color: #fff !important;
}
.ann-page.is-disabled {
    opacity: .45;
    pointer-events: none;
}

/* ---- single article ---- */
.ann-article {
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    padding: 30px 34px;
}
.ann-article-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding-bottom: 18px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--db-border);
}
.ann-article-date {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #8a8a95;
    font-size: 13.5px;
}
.ann-article-date i { color: var(--db-purple); }
.ann-article-actions { display: flex; align-items: center; gap: 10px; }
.ann-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #fff !important;
    border: 1px solid var(--db-border) !important;
    color: #55555f !important;
    border-radius: 9px !important;
    padding: 7px 15px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}
.ann-edit-btn:hover {
    border-color: var(--db-purple) !important;
    color: var(--db-purple) !important;
    background: var(--db-purple-light) !important;
}

.ann-article-body {
    color: #33333d;
    font-size: 15px;
    line-height: 1.9;
}
.ann-article-body h1,
.ann-article-body h2,
.ann-article-body h3 {
    color: #1a1a2e;
    font-weight: 700;
    margin: 26px 0 12px;
}
.ann-article-body h2 { font-size: 20px; }
.ann-article-body h3 { font-size: 17px; }
.ann-article-body p { margin-bottom: 16px; }
.ann-article-body a { color: var(--db-purple) !important; font-weight: 600; }
.ann-article-body img { max-width: 100%; height: auto; border-radius: 12px; margin: 10px 0; }
.ann-article-body ul,
.ann-article-body ol { padding-left: 22px; margin-bottom: 16px; }
.ann-article-body li { margin-bottom: 7px; }
.ann-article-body blockquote {
    border-left: 3px solid var(--db-purple);
    background: var(--db-purple-light);
    border-radius: 0 12px 12px 0;
    padding: 14px 18px;
    margin: 18px 0;
    color: #44444f;
    font-size: 14px;
}
.ann-article-body code {
    background: #f4f4f9;
    color: #d6336c;
    border-radius: 6px;
    padding: 2px 7px;
    font-size: 13px;
}
.ann-article-body pre {
    background: #1a1a2e;
    color: #e8e8f0;
    border: none;
    border-radius: 12px;
    padding: 18px;
    font-size: 13px;
    overflow-x: auto;
}
.ann-article-body pre code { background: transparent; color: inherit; padding: 0; }

.ann-article-social {
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--db-border);
}

.ann-back { margin: 22px 0 10px; }
.ann-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: #fff !important;
    border: 1px solid var(--db-border) !important;
    color: #55555f !important;
    border-radius: 10px !important;
    padding: 11px 22px !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    text-decoration: none !important;
}
.ann-back-btn:hover {
    border-color: var(--db-purple) !important;
    color: var(--db-purple) !important;
    background: var(--db-purple-light) !important;
}

@media (max-width: 600px) {
    .ann-card { flex-direction: column; gap: 14px; }
    .ann-date { flex-direction: row; width: auto; height: auto; padding: 8px 14px; gap: 6px; align-self: flex-start; }
    .ann-article { padding: 22px 20px; }
}

/* ============================================================
   ACTIVATE AFFILIATE ACCOUNT
   ============================================================ */
.aff-signup {
    max-width: 640px;
    margin: 10px auto;
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    padding: 36px 34px 30px;
    text-align: center;
}
.aff-signup-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 68px; height: 68px;
    border-radius: 20px;
    background: var(--db-purple-light);
    color: var(--db-purple);
    font-size: 26px;
    margin-bottom: 18px;
}
.aff-signup-hero h2 {
    margin: 0 0 10px;
    font-size: 22px;
    font-weight: 700;
    color: #1a1a2e;
}
.aff-signup-hero p {
    color: #8a8a95;
    font-size: 14px;
    line-height: 1.8;
    margin: 0 0 26px;
}
.aff-signup-points {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    text-align: left;
}
.aff-signup-points li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--db-border);
}
.aff-signup-points li:last-child { border-bottom: none; }
.asp-num {
    flex: 0 0 auto;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--db-purple);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    font-weight: 700;
}
.asp-text { color: #44444f; font-size: 14px; line-height: 1.7; }
.aff-signup-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--db-purple) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 12px !important;
    padding: 14px 34px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    box-shadow: 0 10px 24px rgba(108,78,245,0.26);
    transition: background .16s ease, transform .16s ease;
}
.aff-signup-btn:hover {
    background: var(--db-purple-dark) !important;
    transform: translateY(-2px);
}
.aff-signup-btn i { font-size: 12px; }

/* ============================================================
   ADD FUNDS
   ============================================================ */
.funds-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-start;
}
.funds-main { flex: 1 1 55%; min-width: 300px; }
.funds-side { flex: 1 1 32%; min-width: 250px; }

.funds-card {
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    padding: 26px 28px 22px;
}
.funds-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding-bottom: 20px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--db-border);
}
.funds-icon {
    width: 46px; height: 46px; min-width: 46px;
    border-radius: 14px;
    background: var(--db-purple-light);
    color: var(--db-purple);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
}
.funds-head h3 { margin: 0 0 3px; font-size: 17px; font-weight: 700; color: #1a1a2e; }
.funds-head p { margin: 0; color: #9a9aa5; font-size: 13px; }

.funds-field { margin-bottom: 18px; }
.funds-field label {
    display: block;
    color: #55555f;
    font-weight: 600;
    font-size: 12.5px;
    margin-bottom: 7px;
}
.funds-field .form-control,
.funds-field select.form-control {
    height: 52px !important;
    border: 1.5px solid var(--db-border) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    font-size: 15px;
    color: #1a1a2e !important;
    background: #fff !important;
}
.funds-field .form-control:focus {
    border-color: var(--db-purple) !important;
    box-shadow: 0 0 0 3px rgba(108,78,245,0.12) !important;
}
/* the amount reads as the primary value on this page */
.funds-amount-wrap .form-control {
    font-size: 22px !important;
    font-weight: 700;
    height: 60px !important;
    letter-spacing: -0.3px;
}

.funds-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    background: var(--db-purple) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 12px !important;
    padding: 14px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    box-shadow: 0 10px 24px rgba(108,78,245,0.24);
}
.funds-submit:hover { background: var(--db-purple-dark) !important; }

.funds-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 18px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--db-border);
    color: #9a9aa5;
    font-size: 12.5px;
    line-height: 1.7;
}
.funds-note i { color: var(--db-purple); margin-top: 2px; }

@media (max-width: 820px) {
    .funds-side { flex: 1 1 100%; }
}

/* ============================================================
   DOWNLOADS
   ============================================================ */
.dl-searchwrap { text-align: center; margin-bottom: 8px; }
.dl-searchbar {
    display: flex;
    align-items: stretch;
    position: relative;
    max-width: 640px;
    margin: 0 auto;
    background: #fff;
    border: 1.5px solid var(--db-border);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.dl-searchbar:focus-within {
    border-color: var(--db-purple);
    box-shadow: 0 0 0 4px rgba(108,78,245,0.10);
}
.dl-searchicon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #b8b8c4;
    font-size: 14px;
    pointer-events: none;
    z-index: 2;
}
.dl-searchbar .form-control {
    flex: 1 1 auto;
    height: 52px !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 16px 0 46px !important;
    font-size: 14.5px;
    color: #1a1a2e !important;
}
.dl-searchbtn {
    flex: 0 0 auto;
    background: var(--db-purple) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 0 !important;
    padding: 0 30px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
}
.dl-searchbtn:hover { background: var(--db-purple-dark) !important; }
.dl-intro {
    color: #8a8a95;
    font-size: 14px;
    margin: 16px auto 0;
    max-width: 640px;
    line-height: 1.7;
}

.dl-section-title {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 30px 0 16px;
}

/* categories */
.dl-cat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
@media (max-width: 760px) { .dl-cat-grid { grid-template-columns: 1fr; } }
.dl-cat {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    padding: 18px 20px;
    text-decoration: none !important;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.dl-cat:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(20,20,50,0.08);
    border-color: rgba(108,78,245,0.32);
}
.dl-cat-icon {
    width: 44px; height: 44px; min-width: 44px;
    border-radius: 13px;
    background: var(--db-purple-light);
    color: var(--db-purple);
    display: flex; align-items: center; justify-content: center;
    font-size: 17px;
}
.dl-cat-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dl-cat-name {
    color: #1a1a2e;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}
.dl-cat-count {
    background: var(--db-purple-light);
    color: var(--db-purple);
    border-radius: 20px;
    padding: 1px 9px;
    font-size: 11px;
    font-weight: 700;
}
.dl-cat-desc {
    color: #8a8a95;
    font-size: 12.5px;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.dl-cat-arrow { color: #c8c8d0; font-size: 12px; transition: transform .15s ease, color .15s ease; }
.dl-cat:hover .dl-cat-arrow { color: var(--db-purple); transform: translateX(3px); }

/* popular files */
.dl-file-list { display: flex; flex-direction: column; gap: 10px; }
.dl-file {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: 14px;
    padding: 16px 20px;
    text-decoration: none !important;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.dl-file:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(20,20,50,0.07);
    border-color: rgba(108,78,245,0.3);
}
.dl-file-icon {
    width: 42px; height: 42px; min-width: 42px;
    border-radius: 12px;
    background: #dcf6ec;
    color: #12a374;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
}
.dl-file-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dl-file-title {
    color: #1a1a2e;
    font-size: 14.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}
.dl-file-lock { color: #b3760f; font-size: 11px; }
.dl-file-desc {
    color: #8a8a95;
    font-size: 12.5px;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.dl-file-meta { color: #a5a5b0; font-size: 11.5px; }
.dl-file-action {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    border-radius: 10px;
    background: #f4f4f9;
    color: #8a8a95;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    transition: background .15s ease, color .15s ease;
}
.dl-file:hover .dl-file-action { background: var(--db-purple); color: #fff; }

.dl-empty {
    text-align: center;
    color: #9a9aa5;
    font-size: 14px;
    padding: 30px 0;
    margin: 0;
}

/* ============================================================
   MAIN MENU — long translations must not wrap
   French / German / Spanish labels are noticeably longer than the
   English ones and were breaking each item onto two lines, which
   doubled the bar height. Items now stay on one line and the bar
   scrolls horizontally if it truly runs out of room.
   ============================================================ */
@media (min-width: 768px) {
    section#main-menu .navbar-collapse {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    section#main-menu .navbar-collapse::-webkit-scrollbar { display: none; }

    section#main-menu .navbar-nav {
        flex-wrap: nowrap !important;
    }
    section#main-menu .navbar-nav > li {
        flex: 0 0 auto;
    }
    section#main-menu .navbar-nav > li > a,
    .navbar-main .navbar-nav > li > a {
        white-space: nowrap !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    section#main-menu li.account > a,
    .navbar-main li.account > a {
        white-space: nowrap !important;
    }

    /* tighten progressively rather than wrapping */
    @media (max-width: 1300px) {
        section#main-menu .navbar-nav > li > a,
        .navbar-main .navbar-nav > li > a {
            padding-left: 12px !important;
            padding-right: 12px !important;
            font-size: 13.5px;
        }
    }
    @media (max-width: 1150px) {
        section#main-menu .navbar-nav > li > a,
        .navbar-main .navbar-nav > li > a {
            padding-left: 9px !important;
            padding-right: 9px !important;
            font-size: 13px;
        }
        section#main-menu .navbar-nav > li > a i { margin-right: 5px; }
        section#main-menu li.account > a,
        .navbar-main li.account > a { padding: 0 12px !important; }
    }
    /* last resort: drop the icons before the labels get unreadable */
    @media (max-width: 1000px) {
        section#main-menu .navbar-nav > li > a i:not(.caret) { display: none; }
    }
}

/* mobile: the collapsed menu stacks, so wrapping is fine there */
@media (max-width: 767px) {
    section#main-menu .navbar-nav > li > a,
    .navbar-main .navbar-nav > li > a {
        white-space: normal !important;
        height: auto !important;
        padding: 12px 16px !important;
    }
    section#main-menu li.account,
    .navbar-main li.account { margin: 6px 0 !important; }
}

/* ============================================================
   KNOWLEDGEBASE — index, category, article
   ============================================================ */
.kb-searchwrap { margin-bottom: 6px; }
.kb-searchbar {
    display: flex;
    align-items: stretch;
    position: relative;
    max-width: 680px;
    margin: 0 auto;
    background: #fff;
    border: 1.5px solid var(--db-border);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.kb-searchbar:focus-within {
    border-color: var(--db-purple);
    box-shadow: 0 0 0 4px rgba(108,78,245,0.10);
}
.kb-searchicon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #b8b8c4;
    font-size: 14px;
    pointer-events: none;
    z-index: 2;
}
.kb-searchbar .form-control {
    flex: 1 1 auto;
    height: 54px !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 16px 0 46px !important;
    font-size: 15px;
    color: #1a1a2e !important;
}
.kb-searchbtn {
    flex: 0 0 auto;
    background: var(--db-purple) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 0 !important;
    padding: 0 32px !important;
    font-weight: 700 !important;
    font-size: 14.5px !important;
}
.kb-searchbtn:hover { background: var(--db-purple-dark) !important; }

.kb-section-title {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 30px 0 16px;
}
.kb-tag {
    display: inline-block;
    background: var(--db-purple-light);
    color: var(--db-purple);
    border-radius: 20px;
    padding: 3px 14px;
    font-size: 13px;
    font-weight: 700;
    vertical-align: middle;
}

/* --- categories --- */
.kb-cat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
@media (max-width: 1000px) { .kb-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .kb-cat-grid { grid-template-columns: 1fr; } }

.kb-cat {
    display: flex;
    align-items: center;
    gap: 13px;
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    padding: 18px 18px;
    text-decoration: none !important;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.kb-cat:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(20,20,50,0.08);
    border-color: rgba(108,78,245,0.32);
}
.kb-cat-icon {
    width: 42px; height: 42px; min-width: 42px;
    border-radius: 13px;
    background: var(--db-purple-light);
    color: var(--db-purple);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
}
.kb-cat-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.kb-cat-name {
    color: #1a1a2e;
    font-size: 14.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}
.kb-cat-count {
    background: var(--db-purple-light);
    color: var(--db-purple);
    border-radius: 20px;
    padding: 1px 9px;
    font-size: 11px;
    font-weight: 700;
}
.kb-cat-desc {
    color: #8a8a95;
    font-size: 12.5px;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.kb-cat-arrow { color: #c8c8d0; font-size: 11px; transition: transform .15s ease, color .15s ease; }
.kb-cat:hover .kb-cat-arrow { color: var(--db-purple); transform: translateX(3px); }

/* --- article list --- */
.kb-article-list { display: flex; flex-direction: column; gap: 10px; }
.kb-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: 14px;
    padding: 16px 20px;
    text-decoration: none !important;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.kb-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(20,20,50,0.07);
    border-color: rgba(108,78,245,0.3);
}
.kb-item-icon {
    width: 40px; height: 40px; min-width: 40px;
    border-radius: 12px;
    background: var(--db-purple-light);
    color: var(--db-purple);
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
}
.kb-item-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.kb-item-title { color: #1a1a2e; font-size: 14.5px; font-weight: 700; }
.kb-item-excerpt {
    color: #8a8a95;
    font-size: 12.5px;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.kb-item-arrow { color: #c8c8d0; font-size: 11px; transition: transform .15s ease, color .15s ease; }
.kb-item:hover .kb-item-arrow { color: var(--db-purple); transform: translateX(3px); }

/* --- single article --- */
.kb-article {
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    padding: 30px 34px 26px;
}
.kb-article-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.kb-article-title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1.4;
    flex: 1 1 320px;
}
.kb-article-tools { display: flex; gap: 8px; flex: 0 0 auto; }
.kb-tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #fff !important;
    border: 1px solid var(--db-border) !important;
    color: #55555f !important;
    border-radius: 9px !important;
    padding: 8px 15px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}
.kb-tool-btn:hover {
    border-color: var(--db-purple) !important;
    color: var(--db-purple) !important;
    background: var(--db-purple-light) !important;
}

.kb-article-meta {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin: 14px 0 20px;
    padding: 0 0 18px;
    border-bottom: 1px solid var(--db-border);
}
.kb-article-meta li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #8a8a95;
    font-size: 13px;
}
.kb-article-meta li i { color: var(--db-purple); font-size: 12px; }

.kb-article-content {
    color: #33333d;
    font-size: 15px;
    line-height: 1.9;
}
.kb-article-content h1,
.kb-article-content h2,
.kb-article-content h3 {
    color: #1a1a2e;
    font-weight: 700;
    margin: 26px 0 12px;
}
.kb-article-content h2 { font-size: 20px; }
.kb-article-content h3 { font-size: 17px; }
.kb-article-content p { margin-bottom: 16px; }
.kb-article-content a { color: var(--db-purple) !important; font-weight: 600; }
.kb-article-content img { max-width: 100%; height: auto; border-radius: 12px; margin: 10px 0; }
.kb-article-content ul,
.kb-article-content ol { padding-left: 22px; margin-bottom: 16px; }
.kb-article-content li { margin-bottom: 7px; }
.kb-article-content blockquote {
    border-left: 3px solid var(--db-purple);
    background: var(--db-purple-light);
    border-radius: 0 12px 12px 0;
    padding: 14px 18px;
    margin: 18px 0;
    color: #44444f;
    font-size: 14px;
}
.kb-article-content code {
    background: #f4f4f9;
    color: #d6336c;
    border-radius: 6px;
    padding: 2px 7px;
    font-size: 13px;
}
.kb-article-content pre {
    background: #1a1a2e;
    color: #e8e8f0;
    border: none;
    border-radius: 12px;
    padding: 18px;
    font-size: 13px;
    overflow-x: auto;
}
.kb-article-content pre code { background: transparent; color: inherit; padding: 0; }
.kb-article-content table {
    width: 100%;
    border: 1px solid var(--db-border);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 16px;
}
.kb-article-content table th {
    background: #fbfbfd;
    padding: 10px 14px;
    font-size: 13px;
    color: #55555f;
    border-bottom: 1px solid var(--db-border);
}
.kb-article-content table td {
    padding: 10px 14px;
    font-size: 13.5px;
    border-top: 1px solid var(--db-border);
}

/* helpful? */
.kb-rate {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--db-border);
}
.kb-rate form {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    background: var(--db-purple-light);
    border-radius: 14px;
    padding: 18px 22px;
}
.kb-rate-q { color: #1a1a2e; font-size: 14.5px; font-weight: 600; }
.kb-rate-result { color: #55555f; font-size: 13.5px; }
.kb-rate-actions { display: flex; gap: 10px; }
.kb-vote {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff !important;
    border: 1.5px solid transparent !important;
    border-radius: 10px !important;
    padding: 10px 22px !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
    transition: all .15s ease;
}
.kb-vote.is-yes { color: #12a374 !important; }
.kb-vote.is-yes:hover { background: #17c690 !important; color: #fff !important; }
.kb-vote.is-no { color: #a8332c !important; }
.kb-vote.is-no:hover { background: #f0554e !important; color: #fff !important; }

@media (max-width: 600px) {
    .kb-article { padding: 22px 20px; }
    .kb-article-title { font-size: 20px; }
    .kb-searchbar { flex-wrap: wrap; }
    .kb-searchbar .form-control { flex: 1 1 100%; }
    .kb-searchbtn { flex: 1 1 100%; padding: 12px !important; }
}

@media print {
    .kb-article { border: none; padding: 0; }
    .kb-rate, .kb-article-tools { display: none !important; }
}

/* ============================================================
   NOTIFICATION BELL — clipping guard
   The bell sits inside .top-nav, whose ancestors must not clip
   the badge or the popover that opens beneath it.
   ============================================================ */
section#header,
section#header .container,
section#header .header-inner,
ul.top-nav,
.notif-item {
    overflow: visible !important;
}
.notif-item { position: relative; z-index: 5; }
.notif-bell { overflow: visible; }
.notif-count {
    /* keep the badge fully inside the header strip */
    top: 0;
    right: 0;
}

/* ============================================================
   NOTIFICATION BELL — trigger polish
   Clicking left a heavy default focus outline around the link and
   the badge overflowed the button's edge.
   ============================================================ */
.notif-bell,
.notif-bell:focus,
.notif-bell:active,
.notif-bell.active {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent;
}
/* keyboard users still get a clear ring, mouse users do not */
.notif-bell:focus-visible {
    box-shadow: 0 0 0 3px rgba(108,78,245,0.28) !important;
}
/* open state reads as a soft filled chip rather than an outline */
.notif-bell[aria-describedby] {
    background: var(--db-purple-light) !important;
    color: var(--db-purple) !important;
}

/* badge tucked inside the button so nothing spills over the edge */
.notif-bell { position: relative; }
.notif-count {
    top: 3px !important;
    right: 3px !important;
    min-width: 17px;
    height: 17px;
    line-height: 17px;
    font-size: 10px;
    padding: 0 4px;
    border-width: 2px;
}

/* ============================================================
   RENEW DOMAIN — rebuilt card layout
   The stock markup floated the status label and used a horizontal
   form grid, so the label, domain, dropdown and button all sat on
   different baselines. Everything is a flex column now.
   ============================================================ */
/* renewal cards: see the RENEW DOMAINS block at the end of this file */

/* ---- order summary sidebar ---- */
#order-standard_cart .secondary-cart-sidebar {
    padding-left: 20px;
}
#order-standard_cart #orderSummary .order-summary {
    background: #fff !important;
    border: 1px solid var(--db-border) !important;
    border-radius: var(--db-radius) !important;
    padding: 24px 26px !important;
    box-shadow: none !important;
    position: relative;
}
#order-standard_cart #orderSummary h2 {
    font-size: 19px !important;
    font-weight: 700 !important;
    color: #1a1a2e !important;
    margin: 0 0 16px !important;
    text-align: left;
}
#order-standard_cart #producttotal .subtotal,
#order-standard_cart #producttotal .clearfix,
#order-standard_cart #producttotal > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 0 !important;
    border-bottom: 1px solid var(--db-border);
    background: transparent !important;
    font-size: 13.5px;
    color: #55555f;
}
#order-standard_cart #producttotal > div:last-child { border-bottom: none; }
#order-standard_cart #producttotal .total-due-today {
    border-top: 1px solid var(--db-border);
    border-bottom: none !important;
    margin-top: 6px;
    padding-top: 16px !important;
    background: transparent !important;
}
#order-standard_cart #producttotal .total-due-today .amt,
#order-standard_cart #producttotal .amt {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #1a1a2e !important;
}
#order-standard_cart #orderSummaryLoader {
    position: absolute;
    top: 24px; right: 26px;
    color: var(--db-purple);
}
#order-standard_cart #btnGoToCart {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    background: var(--db-purple) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 12px !important;
    padding: 14px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    margin-top: 14px;
    box-shadow: 0 10px 24px rgba(108,78,245,0.24);
}
#order-standard_cart #btnGoToCart:hover { background: var(--db-purple-dark) !important; }

@media (max-width: 991px) {
    #order-standard_cart .secondary-cart-sidebar { padding-left: 0; margin-top: 20px; }
}


/* ============================================================
   DOMAINS CONFIGURATION (configuredomains.tpl)
   ============================================================ */
.cfg-hero { text-align: center; margin: 4px 0 26px; }
.cfg-title {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #1a1a2e !important;
    letter-spacing: -0.5px;
    margin: 0 0 8px !important;
}
.cfg-sub {
    color: #8a8a95;
    font-size: 14.5px;
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.7;
}

/* one card per domain */
.cfg-domain {
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    padding: 22px 24px;
    margin-bottom: 18px;
}
.cfg-domain-head {
    display: flex;
    align-items: center;
    gap: 13px;
    flex-wrap: wrap;
    padding-bottom: 16px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--db-border);
}
.cfg-domain-icon {
    width: 44px; height: 44px; min-width: 44px;
    border-radius: 13px;
    background: var(--db-purple-light);
    color: var(--db-purple);
    display: flex; align-items: center; justify-content: center;
    font-size: 17px;
}
.cfg-domain-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 17px;
    font-weight: 700;
    color: #1a1a2e;
    word-break: break-all;
}
.cfg-domain-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.cfg-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f4f4f9;
    color: #55555f;
    border-radius: 20px;
    padding: 6px 13px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
}
.cfg-chip i { font-size: 10.5px; }
.cfg-chip.is-ok   { background: #dcf6ec; color: #12a374; }
.cfg-chip.is-warn { background: #fdecd2; color: #b3760f !important; }
.cfg-chip.is-warn:hover { background: #fbe0b4; }

.cfg-label {
    display: block;
    color: #55555f;
    font-weight: 600;
    font-size: 12.5px;
    margin-bottom: 7px;
}
.cfg-label i { color: var(--db-purple); margin-right: 5px; }

.cfg-epp { margin-bottom: 18px; }
.cfg-epp .form-control,
.cfg-field-input .form-control,
.cfg-field-input input,
.cfg-field-input select,
.cfg-ns-field .form-control {
    width: 100%;
    height: 46px !important;
    border: 1.5px solid var(--db-border) !important;
    border-radius: 11px !important;
    box-shadow: none !important;
    padding: 0 14px !important;
    font-size: 14px;
    color: #1a1a2e !important;
    background: #fff !important;
}
.cfg-epp .form-control:focus,
.cfg-field-input input:focus,
.cfg-field-input select:focus,
.cfg-ns-field .form-control:focus {
    border-color: var(--db-purple) !important;
    box-shadow: 0 0 0 3px rgba(108,78,245,0.12) !important;
}
.cfg-help {
    display: block;
    margin-top: 7px;
    color: #9a9aa5;
    font-size: 12px;
    line-height: 1.6;
}

/* addon cards */
.cfg-addons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin: 0 0 18px;
}
.cfg-addon-col { width: auto !important; float: none !important; padding: 0 !important; }
#order-standard_cart .panel-addon {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff !important;
    border: 1.5px solid var(--db-border) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    overflow: hidden;
    margin: 0 !important;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
    cursor: pointer;
}
#order-standard_cart .panel-addon:hover {
    transform: translateY(-2px);
    border-color: rgba(108,78,245,0.4) !important;
    box-shadow: 0 10px 24px rgba(20,20,50,0.07) !important;
}
#order-standard_cart .panel-addon.panel-addon-selected {
    border-color: var(--db-purple) !important;
    background: var(--db-purple-light) !important;
}
#order-standard_cart .panel-addon .panel-body {
    flex: 1 1 auto;
    padding: 18px 18px 14px !important;
    color: #8a8a95 !important;
    font-size: 12.5px;
    line-height: 1.65;
    background: transparent !important;
}
#order-standard_cart .panel-addon .panel-body label {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #1a1a2e;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 7px;
    cursor: pointer;
}
#order-standard_cart .panel-addon input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: #6c4ef5;
    margin: 0;
    cursor: pointer;
}
#order-standard_cart .panel-addon .panel-price {
    padding: 12px 18px !important;
    border-top: 1px solid var(--db-border);
    color: var(--db-purple);
    font-size: 13.5px;
    font-weight: 700;
    background: transparent !important;
}
#order-standard_cart .panel-addon.panel-addon-selected .panel-price {
    border-top-color: rgba(108,78,245,0.2);
}
#order-standard_cart .panel-addon .panel-add {
    display: none !important;
}

/* per-domain custom fields */
.cfg-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    padding-top: 4px;
}
.cfg-field { min-width: 0; }

/* nameservers */
.cfg-ns {
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    padding: 22px 24px;
    margin-bottom: 18px;
}
.cfg-ns-head {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding-bottom: 16px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--db-border);
}
.cfg-ns-head h3 { margin: 0 0 4px; font-size: 16px; font-weight: 700; color: #1a1a2e; }
.cfg-ns-head p  { margin: 0; color: #8a8a95; font-size: 13px; line-height: 1.6; }
.cfg-ns-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}
.cfg-ns-field label {
    display: block;
    color: #55555f;
    font-weight: 600;
    font-size: 12.5px;
    margin-bottom: 7px;
}

.cfg-actions { display: flex; justify-content: flex-end; padding: 6px 0 10px; }
.cfg-continue {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--db-purple) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 12px !important;
    padding: 14px 36px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    box-shadow: 0 10px 24px rgba(108,78,245,0.24);
}
.cfg-continue:hover { background: var(--db-purple-dark) !important; }
.cfg-continue i { font-size: 12px; }

@media (max-width: 600px) {
    .cfg-title { font-size: 22px !important; }
    .cfg-actions { justify-content: stretch; }
    .cfg-continue { width: 100%; justify-content: center; }
}

/* ============================================================
   CHOOSE A DOMAIN (configureproductdomain.tpl)
   The stock options are flat grey strips with a tiny radio; the
   selected one only differs by a slightly darker grey. Rebuilt as
   selectable cards so the active choice is obvious.
   ============================================================ */
#order-standard_cart .domain-selection-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 4px;
}

#order-standard_cart .domain-selection-options .option {
    background-color: #fff !important;
    border: 1.5px solid var(--db-border);
    border-radius: 16px !important;
    padding: 18px 22px !important;
    margin: 0 !important;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
#order-standard_cart .domain-selection-options .option:hover {
    border-color: rgba(108,78,245,0.4);
    box-shadow: 0 8px 20px rgba(20,20,50,0.05);
}
#order-standard_cart .domain-selection-options .option-selected {
    background-color: #fff !important;
    border-color: var(--db-purple);
    box-shadow: 0 10px 26px rgba(108,78,245,0.12);
}

/* the choice label */
#order-standard_cart .domain-selection-options .option > label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    cursor: pointer;
    color: #55555f;
    font-size: 14.5px;
    font-weight: 600;
}
#order-standard_cart .domain-selection-options .option-selected > label {
    color: #1a1a2e;
    font-weight: 700 !important;
}
#order-standard_cart .domain-selection-options .option input[type="radio"] {
    width: 20px;
    height: 20px;
    accent-color: #6c4ef5;
    margin: 0;
    flex-shrink: 0;
    cursor: pointer;
}

/* the panel that opens under the selected choice */
#order-standard_cart .domain-input-group {
    margin: 18px 0 2px !important;
    padding-top: 18px;
    border-top: 1px solid var(--db-border);
}
#order-standard_cart .domain-input-group > .row {
    display: flex;
    align-items: stretch;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0;
}
#order-standard_cart .domain-input-group > .row > [class*="col-"] {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}
#order-standard_cart .domain-input-group > .row > [class*="col-sm-8"],
#order-standard_cart .domain-input-group > .row > [class*="col-sm-9"] {
    flex: 1 1 320px;
    min-width: 0;
}
#order-standard_cart .domain-input-group > .row > .col-sm-2 {
    flex: 0 0 auto;
    display: flex;
}

/* the sld / tld row itself */
#order-standard_cart .domains-row {
    display: flex !important;
    align-items: stretch;
    gap: 10px;
    margin: 0 !important;
    width: 100%;
}
#order-standard_cart .domains-row > [class*="col-"] {
    float: none !important;
    width: auto !important;
    padding: 0 !important;
}
#order-standard_cart .domains-row > .col-xs-9,
#order-standard_cart .domains-row > .col-9 { flex: 1 1 auto; min-width: 0; }
#order-standard_cart .domains-row > .col-xs-5,
#order-standard_cart .domains-row > .col-5 { flex: 1 1 0; min-width: 0; }
#order-standard_cart .domains-row > .col-xs-3,
#order-standard_cart .domains-row > .col-3 { flex: 0 0 130px; }
#order-standard_cart .domains-row > .col-xs-2,
#order-standard_cart .domains-row > .col-2 {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}
#order-standard_cart .domains-row .form-control-static {
    margin: 0;
    color: #9a9aa5;
    font-size: 14px;
    white-space: nowrap;
}

/* inputs */
#order-standard_cart .domain-input-group .form-control,
#order-standard_cart .domain-input-group select.form-control {
    height: 48px !important;
    border: 1.5px solid var(--db-border) !important;
    border-radius: 11px !important;
    box-shadow: none !important;
    font-size: 14.5px;
    color: #1a1a2e !important;
    background: #fff !important;
    padding: 0 14px !important;
}
#order-standard_cart .domain-input-group .form-control:focus,
#order-standard_cart .domain-input-group select.form-control:focus {
    border-color: var(--db-purple) !important;
    box-shadow: 0 0 0 3px rgba(108,78,245,0.12) !important;
}

/* the "www." prefix reads as part of the field, not a grey box */
#order-standard_cart .domain-input-group .input-group { display: flex; width: 100%; }
#order-standard_cart .domain-input-group .input-group-addon,
#order-standard_cart .domain-input-group .input-group-prepend {
    display: flex;
    align-items: center;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    width: auto !important;
}
#order-standard_cart .domain-input-group .input-group-text {
    display: flex;
    align-items: center;
    height: 48px;
    padding: 0 6px 0 14px !important;
    background: #f7f7fb !important;
    border: 1.5px solid var(--db-border) !important;
    border-right: none !important;
    border-radius: 11px 0 0 11px !important;
    color: #9a9aa5 !important;
    font-size: 14px;
    white-space: nowrap;
}
#order-standard_cart .domain-input-group .input-group .form-control {
    border-radius: 0 11px 11px 0 !important;
    border-left: none !important;
    flex: 1 1 auto;
    min-width: 0;
}
#order-standard_cart .domain-input-group .input-group:focus-within .input-group-text {
    border-color: var(--db-purple) !important;
}

/* action button */
#order-standard_cart .domain-input-group .btn-primary,
#order-standard_cart .domain-input-group .btn-block {
    width: auto !important;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--db-purple) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 11px !important;
    padding: 0 30px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    box-shadow: 0 6px 16px rgba(108,78,245,0.2);
    white-space: nowrap;
}
#order-standard_cart .domain-input-group .btn-primary:hover {
    background: var(--db-purple-dark) !important;
}


@media (max-width: 700px) {
    #order-standard_cart .domain-selection-options .option { padding: 16px !important; }
    #order-standard_cart .domains-row { flex-wrap: wrap; }
    #order-standard_cart .domains-row > .col-xs-3,
    #order-standard_cart .domains-row > .col-3 { flex: 1 1 120px; }
    #order-standard_cart .domain-input-group > .row > .col-sm-2 { flex: 1 1 100%; }
    #order-standard_cart .domain-input-group .btn-primary,
    #order-standard_cart .domain-input-group .btn-block { width: 100% !important; }
}

/* ============================================================
   CONFIGURE PRODUCT (configureproduct.tpl)
   ============================================================ */
#order-standard_cart .secondary-cart-body > p:first-of-type {
    color: #8a8a95;
    font-size: 14px;
    margin-bottom: 18px;
}

/* product summary block */
#order-standard_cart .product-info {
    background: #fff !important;
    border: 1px solid var(--db-border) !important;
    border-radius: var(--db-radius) !important;
    padding: 22px 24px !important;
    margin: 0 0 20px !important;
    font-size: 13.5px !important;
    position: relative;
    overflow: hidden;
}
#order-standard_cart .product-info::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--db-purple);
}
#order-standard_cart .product-info .product-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1a1a2e !important;
    margin: 0 0 12px !important;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--db-border);
}
#order-standard_cart .product-info p:not(.product-title) {
    color: #55555f;
    line-height: 2;
    margin: 0;
}

/* section headings inside the configurator */
#order-standard_cart .secondary-cart-body .sub-heading {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 26px 0 14px !important;
    height: auto !important;
    text-align: left !important;
}
#order-standard_cart .secondary-cart-body .sub-heading span,
#order-standard_cart .secondary-cart-body .sub-heading .primary-bg-color {
    display: block !important;
    position: static !important;
    background: none !important;
    padding: 0 0 10px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1a1a2e !important;
    border-bottom: 1px solid var(--db-border) !important;
}

/* billing cycle + configurable option fields */
#order-standard_cart .field-container { margin-bottom: 18px; }
#order-standard_cart .secondary-cart-body label {
    color: #55555f;
    font-weight: 600;
    font-size: 12.5px;
    margin-bottom: 7px;
}
#order-standard_cart .secondary-cart-body .form-control,
#order-standard_cart .secondary-cart-body select.form-control,
#order-standard_cart .custom-select {
    height: 48px !important;
    border: 1.5px solid var(--db-border) !important;
    border-radius: 11px !important;
    box-shadow: none !important;
    padding: 0 14px !important;
    font-size: 14.5px;
    color: #1a1a2e !important;
    background: #fff !important;
    max-width: 100%;
}
#order-standard_cart .secondary-cart-body .form-control:focus,
#order-standard_cart .custom-select:focus {
    border-color: var(--db-purple) !important;
    box-shadow: 0 0 0 3px rgba(108,78,245,0.12) !important;
}
#order-standard_cart .select-inline { width: auto; min-width: 260px; }

/* configurable options grid */
#order-standard_cart .product-configurable-options > .row,
#order-standard_cart .product-addons > .row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 6px 20px;
    margin: 0;
}
#order-standard_cart .product-configurable-options > .row > [class*="col-"],
#order-standard_cart .product-addons > .row > [class*="col-"] {
    float: none !important;
    width: auto !important;
    padding: 0 !important;
}
#order-standard_cart .product-configurable-options .form-group { margin-bottom: 16px; }
#order-standard_cart .product-configurable-options input[type="radio"],
#order-standard_cart .product-configurable-options input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: #6c4ef5;
    margin: 0 8px 0 0;
    vertical-align: middle;
    cursor: pointer;
}
#order-standard_cart .product-configurable-options .form-group label label,
#order-standard_cart .product-configurable-options label > input + * {
    font-weight: 500;
    color: #44444f;
}
#order-standard_cart .qty-field,
#order-standard_cart input[type="number"].form-control { max-width: 120px; }

/* addon cards */
#order-standard_cart .product-addons .panel,
#order-standard_cart .panel-addon-product {
    border: 1.5px solid var(--db-border) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    overflow: hidden;
}
#order-standard_cart .product-addons .panel-addon-selected,
#order-standard_cart .panel-addon-product.panel-addon-selected {
    border-color: var(--db-purple) !important;
    background: var(--db-purple-light) !important;
}

/* help / info notice */
#order-standard_cart .alert-info,
#order-standard_cart .secondary-cart-body .alert-warning {
    background: #fdf6e9 !important;
    border: 1px solid #f5e2be !important;
    border-radius: 12px !important;
    color: #8a6412 !important;
    font-size: 13px;
    padding: 14px 18px !important;
    text-align: center;
}
#order-standard_cart .alert-info a,
#order-standard_cart .secondary-cart-body .alert-warning a {
    color: #8a6412 !important;
    font-weight: 700;
    text-decoration: underline;
}

/* ---- order summary sidebar ---- */
#order-standard_cart .secondary-cart-sidebar .order-summary,
#order-standard_cart #orderSummary .order-summary {
    background: #fff !important;
    border: 1px solid var(--db-border) !important;
    border-bottom: 1px solid var(--db-border) !important;
    border-radius: var(--db-radius) !important;
    padding: 24px 26px !important;
    margin: 0 0 16px !important;
    box-shadow: none !important;
    color: #33333d !important;
}

#order-standard_cart #producttotal .product-name,
#order-standard_cart .order-summary .product-name {
    color: #1a1a2e !important;
    font-size: 15px;
    font-weight: 700;
}
#order-standard_cart #producttotal .product-group,
#order-standard_cart .order-summary .product-group {
    color: #9a9aa5 !important;
    font-size: 12.5px;
    font-style: normal;
    margin-bottom: 10px;
}
#order-standard_cart #producttotal .summary-container,
#order-standard_cart #producttotal > div {
    background: transparent !important;
}
#order-standard_cart #producttotal .cart-item-row,
#order-standard_cart #producttotal .clearfix {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    font-size: 13.5px;
    color: #55555f;
    border-bottom: 1px solid var(--db-border);
}
#order-standard_cart #producttotal .clearfix:last-child { border-bottom: none; }
#order-standard_cart #producttotal .total-due-today {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid var(--db-border);
    border-bottom: none !important;
    margin-top: 8px;
    padding-top: 16px !important;
    background: transparent !important;
}
#order-standard_cart #producttotal .total-due-today .amt,
#order-standard_cart .order-summary .amt {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #1a1a2e !important;
}

#order-standard_cart #btnCompleteProductConfig {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    background: var(--db-purple) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 12px !important;
    padding: 14px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    box-shadow: 0 10px 24px rgba(108,78,245,0.24);
}
#order-standard_cart #btnCompleteProductConfig:hover {
    background: var(--db-purple-dark) !important;
}

@media (max-width: 991px) {
    #order-standard_cart .secondary-cart-sidebar { margin-top: 20px; }
}

/* ============================================================
   REVIEW & CHECKOUT (viewcart.tpl) — rebuilt
   Each cart row is a bootstrap .row inside .item, so the grid is
   left intact and only re-skinned. Earlier passes forced .item to
   be flex, which fought that grid and broke the alignment.
   ============================================================ */

/* page shell — the category sidebar stays hidden here */
#order-standard_cart .cart-sidebar:not(.sidebar) { display: none !important; }
#order-standard_cart .cart-body {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
}
#order-standard_cart .header-lined { border-bottom: none !important; }
#order-standard_cart .header-lined h1 {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #1a1a2e !important;
    letter-spacing: -0.5px;
    border-bottom: none !important;
    padding: 0 !important;
    margin-bottom: 20px !important;
}

/* two-column shell: items left, summary right */
#order-standard_cart .secondary-cart-body {
    float: left;
    width: 64%;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}
#order-standard_cart .secondary-cart-sidebar {
    float: right;
    width: 34%;
    padding: 0 !important;
}
@media (max-width: 991px) {
    #order-standard_cart .secondary-cart-body,
    #order-standard_cart .secondary-cart-sidebar {
        float: none;
        width: 100%;
    }
    #order-standard_cart .secondary-cart-sidebar { margin-top: 20px; }
}

/* ---- items panel ---- */
#order-standard_cart .view-cart-items-header {
    background: #fff;
    border: 1px solid var(--db-border);
    border-bottom: none;
    border-radius: var(--db-radius) var(--db-radius) 0 0;
    padding: 14px 22px !important;
    margin: 0 !important;
    color: #9a9aa5;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
}
#order-standard_cart .view-cart-items {
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: 0 0 var(--db-radius) var(--db-radius);
    overflow: hidden;
}
#order-standard_cart .view-cart-items .item {
    padding: 18px 22px !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--db-border);
    transition: background .14s ease;
}
#order-standard_cart .view-cart-items .item:last-child { border-bottom: none; }
#order-standard_cart .view-cart-items .item:hover { background: #fbfbfe; }

/* keep the grid columns vertically centred */
#order-standard_cart .view-cart-items .item > .row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-left: -8px;
    margin-right: -8px;
}
#order-standard_cart .view-cart-items .item > .row > [class*="col-"] {
    padding-left: 8px;
    padding-right: 8px;
}

/* item text */
#order-standard_cart .item-title {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1.45;
    margin-bottom: 3px;
}
#order-standard_cart .item-title .btn-link {
    color: var(--db-purple) !important;
    font-weight: 600;
    font-size: 12px;
    padding: 0 0 0 8px !important;
    text-decoration: none !important;
    vertical-align: middle;
}
#order-standard_cart .item-title .btn-link:hover { text-decoration: underline !important; }
#order-standard_cart .item-group {
    display: block;
    color: #9a9aa5;
    font-size: 12px;
    margin-bottom: 2px;
}
#order-standard_cart .item-domain {
    display: block;
    color: var(--db-purple);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
}
#order-standard_cart .item small {
    display: block;
    color: #8a8a95;
    font-size: 12px;
    line-height: 1.9;
}

/* price column */
#order-standard_cart .item-price {
    text-align: right;
    color: #1a1a2e;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.4;
}
#order-standard_cart .item-price .cycle {
    display: block;
    color: #9a9aa5;
    font-weight: 400;
    font-size: 12px;
}

/* qty column */
#order-standard_cart .item-qty {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
}
#order-standard_cart .item-qty .form-control {
    height: 40px !important;
    width: 68px !important;
    border: 1.5px solid var(--db-border) !important;
    border-radius: 9px !important;
    box-shadow: none !important;
    text-align: center;
    font-weight: 600;
    padding: 0 !important;
    color: #1a1a2e !important;
}
#order-standard_cart .item-qty .form-control:focus {
    border-color: var(--db-purple) !important;
    box-shadow: 0 0 0 3px rgba(108,78,245,0.12) !important;
}
#order-standard_cart .item-qty .btn {
    background: #fff !important;
    border: 1px solid var(--db-border) !important;
    color: #55555f !important;
    border-radius: 9px !important;
    padding: 8px 10px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
}
#order-standard_cart .item-qty .btn:hover {
    border-color: var(--db-purple) !important;
    color: var(--db-purple) !important;
}

/* remove button */
#order-standard_cart .btn-remove-from-cart {
    color: #c4c4d0 !important;
    padding: 4px 8px !important;
    font-size: 13px;
    transition: color .15s ease;
}
#order-standard_cart .btn-remove-from-cart:hover { color: #d9453e !important; }

/* ---- promo / tax tabs ---- */
#order-standard_cart .coupon-toggle-wrap { padding: 14px 2px 0; }
#order-standard_cart .coupon-toggle-link {
    color: var(--db-purple) !important;
    font-weight: 600;
    font-size: 13.5px;
    text-decoration: none !important;
}
#order-standard_cart .coupon-toggle-link:hover { text-decoration: underline !important; }
#order-standard_cart .view-cart-tabs {
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    padding: 18px 20px;
    margin-top: 12px;
}
#order-standard_cart .view-cart-tabs .nav-tabs {
    border-bottom: 1px solid var(--db-border);
    margin-bottom: 16px;
}
#order-standard_cart .view-cart-tabs .nav-tabs > li > a {
    border: none !important;
    background: transparent !important;
    color: #8a8a95 !important;
    font-weight: 600;
    font-size: 13.5px;
    padding: 10px 14px !important;
    margin: 0 4px 0 0;
}
#order-standard_cart .view-cart-tabs .nav-tabs > li.active > a {
    color: var(--db-purple) !important;
    border-bottom: 2px solid var(--db-purple) !important;
}
#order-standard_cart .view-cart-tabs .form-control {
    height: 46px !important;
    border: 1.5px solid var(--db-border) !important;
    border-radius: 11px !important;
    box-shadow: none !important;
}
#order-standard_cart .view-cart-tabs .form-control:focus {
    border-color: var(--db-purple) !important;
    box-shadow: 0 0 0 3px rgba(108,78,245,0.12) !important;
}
#order-standard_cart .view-cart-tabs .btn,
#order-standard_cart .view-cart-tabs .btn-default {
    background: var(--db-purple) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 11px !important;
    height: 46px;
    padding: 0 24px !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
}
#order-standard_cart .view-cart-tabs .btn:hover { background: var(--db-purple-dark) !important; }

/* ---- order summary ---- */
#order-standard_cart .order-summary {
    background: #fff !important;
    border: 1px solid var(--db-border) !important;
    border-radius: var(--db-radius) !important;
    padding: 24px 26px !important;
    margin: 0 !important;
    box-shadow: none !important;
    color: #33333d !important;
    position: sticky;
    top: 20px;
}
#order-standard_cart .order-summary h2 {
    font-size: 19px !important;
    font-weight: 700 !important;
    color: #1a1a2e !important;
    margin: 0 0 16px !important;
    text-align: left !important;
}
#order-standard_cart .summary-container .subtotal,
#order-standard_cart .summary-container .recurring-totals,
#order-standard_cart .summary-container > .clearfix,
#order-standard_cart .bordered-totals > .clearfix {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    font-size: 13.5px;
    color: #55555f;
    background: transparent !important;
}
#order-standard_cart .bordered-totals {
    border-top: 1px solid var(--db-border);
    border-bottom: 1px solid var(--db-border);
    margin: 6px 0;
    padding: 2px 0;
}
#order-standard_cart .separator { border-top: 1px solid var(--db-border); margin: 10px 0; }
#order-standard_cart .total-due-today,
#order-standard_cart .total-due-today-padded {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 0 6px !important;
    background: transparent !important;
}
#order-standard_cart .total-due-today .amt,
#order-standard_cart .order-summary .amt {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #1a1a2e !important;
    letter-spacing: -0.5px;
}
#order-standard_cart .btn-checkout {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    background: var(--db-purple) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 12px !important;
    padding: 14px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    margin-top: 10px;
    box-shadow: 0 10px 24px rgba(108,78,245,0.24);
}
#order-standard_cart .btn-checkout:hover { background: var(--db-purple-dark) !important; }
#order-standard_cart .btn-continue-shopping {
    display: block;
    text-align: center;
    margin-top: 14px;
    color: #8a8a95 !important;
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none !important;
}
#order-standard_cart .btn-continue-shopping:hover { color: var(--db-purple) !important; }

#order-standard_cart .express-checkout-buttons {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--db-border);
    text-align: center;
}

/* empty cart */
#order-standard_cart .view-cart-items:empty,
#order-standard_cart .cart-empty {
    background: #fff;
    border: 1px dashed var(--db-border);
    border-radius: var(--db-radius);
    padding: 50px 24px;
    text-align: center;
    color: #8a8a95;
}

@media (max-width: 767px) {
    #order-standard_cart .view-cart-items-header { display: none !important; }
    #order-standard_cart .view-cart-items { border-radius: var(--db-radius); }
    #order-standard_cart .view-cart-items .item > .row { display: block; }
    #order-standard_cart .item-price { text-align: left; margin-top: 8px; }
    #order-standard_cart .item-qty { justify-content: flex-start; margin-top: 8px; }
    #order-standard_cart .order-summary { position: static; }
}

/* ============================================================
   MY QUOTES — summary chips + card-row list
   ============================================================ */
.quote-summary-chip.is-delivered::before { background: var(--db-purple); }
.quote-summary-chip.is-accepted::before  { background: #17c690; }
.quote-summary-chip.is-draft::before     { background: #9a9aa5; }
.quote-summary-chip.is-lost::before      { background: #f0554e; }

.quotes-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 12px !important;
}
.quotes-table thead {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0,0,0,0);
}
.quotes-table tbody tr {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: 16px;
    padding: 15px 20px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(20,20,50,0.03);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.quotes-table tbody tr:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(20,20,50,0.08);
    border-color: rgba(108,78,245,0.32);
}
.quotes-table tbody td {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
}

/* number + icon */
.q-num-cell {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-right: 18px;
}
.q-avatar {
    width: 42px; height: 42px; min-width: 42px;
    border-radius: 12px;
    background: var(--db-purple-light);
    color: var(--db-purple);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
}
.q-avatar.q-accepted { background: #dcf6ec; color: #12a374; }
.q-avatar.q-delivered { background: var(--db-purple-light); color: var(--db-purple); }
.q-avatar.q-draft { background: #f1f1f5; color: #8a8a95; }
.q-avatar.q-lost,
.q-avatar.q-dead { background: #fde3e2; color: #d9453e; }
.q-number {
    color: #1a1a2e;
    font-size: 14.5px;
    font-weight: 700;
    white-space: nowrap;
}

/* subject */
.q-subject-cell { flex: 1 1 auto; min-width: 0; margin-right: 18px; }
.q-subject {
    display: block;
    color: #1a1a2e;
    font-size: 14.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* dates */
.q-date-cell {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-right: 20px;
}
.q-mini-label {
    color: #a5a5b0;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .3px;
    white-space: nowrap;
}
.q-mini-value { color: #55555f; font-size: 12.5px; font-weight: 600; white-space: nowrap; }

/* stage pill */
.q-stage-cell { flex: 0 0 auto; margin-right: 14px; }
.quotes-table .label.status {
    display: inline-block;
    border-radius: 20px;
    padding: 6px 15px;
    font-weight: 600;
    font-size: 11.5px;
    color: #fff;
    border: none;
    white-space: nowrap;
    min-width: 92px;
    text-align: center;
}
.quotes-table .label.status-draft     { background: #9a9aa5; }
.quotes-table .label.status-delivered { background: var(--db-purple); }
.quotes-table .label.status-onhold,
.quotes-table .label.status-on-hold   { background: #f7a94a; }
.quotes-table .label.status-accepted  { background: #17c690; }
.quotes-table .label.status-lost,
.quotes-table .label.status-dead      { background: #f0554e; }

/* download */
.q-action-cell { flex: 0 0 auto; }
.q-dl-form { margin: 0; }
.q-dl-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #fff !important;
    border: 1px solid var(--db-border) !important;
    color: #55555f !important;
    border-radius: 9px !important;
    padding: 8px 16px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    white-space: nowrap;
}
.q-dl-btn:hover {
    border-color: var(--db-purple) !important;
    color: var(--db-purple) !important;
    background: var(--db-purple-light) !important;
}

@media (max-width: 900px) {
    .quotes-table tbody tr { flex-wrap: wrap; gap: 10px; padding: 14px 16px; }
    .q-num-cell { margin-right: 0; }
    .q-subject-cell { flex: 1 1 100%; margin-right: 0; }
    .q-date-cell { margin-right: 0; flex: 1 1 40%; }
    .q-stage-cell { margin-right: 0; }
    .q-action-cell { margin-left: auto; }
    .q-dl-btn span { display: none; }
    .q-dl-btn { padding: 8px 12px !important; }
}

/* ============================================================
   REVIEW & CHECKOUT (viewcart.tpl) — REBUILD v2
   NOTE: orderforms/standard_cart/css/all.css loads AFTER this
   file and uses the exact same specificity (#id + .class), so
   every rule here is scoped to body#... and marked !important.
   Without that the stock blue (#058) skin wins.
   ============================================================ */

/* ---- page shell ---- */
body #order-standard_cart .view-cart-items-header,
body #order-standard_cart .view-cart-items,
body #order-standard_cart .order-summary,
body #order-standard_cart .summary-container {
    background-image: none !important;
}

/* ---- items table head ---- */
body #order-standard_cart .view-cart-items-header {
    background: #fbfbfd !important;
    color: #9a9aa5 !important;
    border: 1px solid var(--db-border) !important;
    border-bottom: none !important;
    border-radius: var(--db-radius) var(--db-radius) 0 0 !important;
    padding: 13px 24px !important;
    margin: 0 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .6px !important;
}

/* ---- items list ---- */
body #order-standard_cart .view-cart-items {
    background: #fff !important;
    border: 1px solid var(--db-border) !important;
    border-bottom: 1px solid var(--db-border) !important;
    border-radius: 0 0 var(--db-radius) var(--db-radius) !important;
    margin: 0 !important;
    overflow: hidden !important;
}
body #order-standard_cart .view-cart-items .item,
body #order-standard_cart .view-cart-items .item:nth-child(even) {
    background: #fff !important;
    border: none !important;
    border-bottom: 1px solid var(--db-border) !important;
    margin: 0 !important;
    padding: 18px 24px !important;
    font-size: 14px !important;
    transition: background .15s ease !important;
}
body #order-standard_cart .view-cart-items .item:last-child {
    border-bottom: none !important;
}
body #order-standard_cart .view-cart-items .item:hover {
    background: #fbfaff !important;
}

/* keep bootstrap's grid, just centre it vertically */
body #order-standard_cart .view-cart-items .item > .row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

/* icon chip in front of every line item */
body #order-standard_cart .view-cart-items .item > .row > div:first-child {
    position: relative !important;
    padding-left: 68px !important;
}
body #order-standard_cart .view-cart-items .item > .row > div:first-child::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background-color: var(--db-purple-light);
    /* inline SVG (server/box) — independent of the FontAwesome build,
       the theme ships "Font Awesome 5 Pro" so glyph names are unreliable */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c4ef5' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='3' width='19' height='7' rx='2'/%3E%3Crect x='2.5' y='14' width='19' height='7' rx='2'/%3E%3Ccircle cx='6.6' cy='6.5' r='1'/%3E%3Ccircle cx='6.6' cy='17.5' r='1'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
}

/* ---- item text ---- */
body #order-standard_cart .view-cart-items .item-title {
    display: block !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1a1a2e !important;
    line-height: 1.45 !important;
    margin: 0 0 3px !important;
}
body #order-standard_cart .view-cart-items .item-title .btn-link {
    display: inline !important;
    color: var(--db-purple) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 0 0 0 9px !important;
    text-decoration: none !important;
    vertical-align: baseline !important;
}
body #order-standard_cart .view-cart-items .item-title .btn-link:hover {
    text-decoration: underline !important;
}
body #order-standard_cart .view-cart-items .item-group {
    display: block !important;
    font-size: 12px !important;
    color: #9a9aa5 !important;
    margin: 0 0 3px !important;
}
body #order-standard_cart .view-cart-items .item-domain {
    display: inline-block !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--db-purple) !important;
    background: var(--db-purple-light) !important;
    border-radius: 7px !important;
    padding: 3px 10px !important;
    margin: 2px 0 0 !important;
}
body #order-standard_cart .view-cart-items .item small {
    display: block !important;
    color: #8a8a95 !important;
    font-size: 12px !important;
    line-height: 1.85 !important;
    margin-top: 6px !important;
}

/* ---- price column ---- */
body #order-standard_cart .view-cart-items .item-price {
    text-align: right !important;
    color: #1a1a2e !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
}
body #order-standard_cart .view-cart-items .item-price span {
    display: block !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    letter-spacing: -0.4px !important;
    color: #1a1a2e !important;
}
body #order-standard_cart .view-cart-items .item-price .cycle {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #9a9aa5 !important;
    letter-spacing: 0 !important;
    margin-top: 2px !important;
}

/* ---- qty column ---- */
body #order-standard_cart .view-cart-items .item-qty {
    text-align: center !important;
}
body #order-standard_cart .view-cart-items .item-qty input {
    height: 40px !important;
    width: 66px !important;
    padding: 0 !important;
    margin: 0 auto 6px !important;
    text-align: center !important;
    font-weight: 600 !important;
    color: #1a1a2e !important;
    border: 1.5px solid var(--db-border) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}
body #order-standard_cart .view-cart-items .item-qty input:focus {
    border-color: var(--db-purple) !important;
    box-shadow: 0 0 0 3px rgba(108,78,245,.12) !important;
}
body #order-standard_cart .view-cart-items .item-qty button {
    background: #fff !important;
    border: 1px solid var(--db-border) !important;
    color: #55555f !important;
    border-radius: 9px !important;
    padding: 6px 12px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
}
body #order-standard_cart .view-cart-items .item-qty button:hover {
    border-color: var(--db-purple) !important;
    color: var(--db-purple) !important;
    background: var(--db-purple-light) !important;
}

/* ---- remove (x) button ---- */
body #order-standard_cart .btn-remove-from-cart {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    color: #c4c4d0 !important;
    background: transparent !important;
    text-decoration: none !important;
    transition: all .15s ease !important;
}
body #order-standard_cart .btn-remove-from-cart:hover {
    color: #e0463e !important;
    background: #fdeceb !important;
}

/* ---- actions bar: empty cart (left) + promo (right) ---- */
body #order-standard_cart .empty-cart {
    float: left !important;
    text-align: left !important;
    margin: 16px 0 0 !important;
    padding: 0 !important;
    line-height: normal !important;
}
body #order-standard_cart .empty-cart .btn {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    background: #fff !important;
    border: 1px solid var(--db-border) !important;
    color: #8a8a95 !important;
    border-radius: 10px !important;
    padding: 8px 15px !important;
    margin: 0 !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all .15s ease !important;
}
body #order-standard_cart .empty-cart .btn:hover {
    color: #e0463e !important;
    border-color: #f5c9c6 !important;
    background: #fdeceb !important;
}
body #order-standard_cart .coupon-toggle-wrap {
    float: right !important;
    padding: 16px 0 0 !important;
}
body #order-standard_cart .coupon-toggle-link {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    color: var(--db-purple) !important;
    background: var(--db-purple-light) !important;
    border-radius: 10px !important;
    padding: 8px 15px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all .15s ease !important;
}
body #order-standard_cart .coupon-toggle-link::before {
    content: "";
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c4ef5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 12 22 2.5 12.5V3h9.5l8.6 8.6a1.4 1.4 0 0 1 0 1.8z'/%3E%3Ccircle cx='7.4' cy='7.4' r='1.4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: filter .15s ease;
}
/* on hover the chip turns solid purple, so the icon must go white */
body #order-standard_cart .coupon-toggle-link:hover::before {
    filter: brightness(0) invert(1);
}
body #order-standard_cart .coupon-toggle-link:hover {
    background: var(--db-purple) !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* ---- promo panel ---- */
body #order-standard_cart .view-cart-tabs {
    clear: both !important;
    background: #fff !important;
    border: 1px solid var(--db-border) !important;
    border-radius: var(--db-radius) !important;
    padding: 20px 22px !important;
    margin: 14px 0 0 !important;
}
body #order-standard_cart .view-cart-tabs .nav-tabs {
    padding-left: 0 !important;
    font-size: 13.5px !important;
    border-bottom: 1px solid var(--db-border) !important;
    margin-bottom: 16px !important;
}
body #order-standard_cart .view-cart-tabs .nav-tabs > li > a,
body #order-standard_cart .view-cart-tabs .nav-tabs .nav-link {
    border: none !important;
    background: transparent !important;
    color: #8a8a95 !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    padding: 9px 4px !important;
    margin: 0 18px 0 0 !important;
}
body #order-standard_cart .view-cart-tabs .nav-tabs > li.active > a,
body #order-standard_cart .view-cart-tabs .nav-tabs a[aria-selected="true"],
body #order-standard_cart .view-cart-tabs .nav-tabs a[aria-expanded="true"] {
    color: var(--db-purple) !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid var(--db-purple) !important;
}
body #order-standard_cart .view-cart-tabs .tab-content {
    background: transparent !important;
    padding: 0 !important;
}
body #order-standard_cart .view-cart-tabs .form-control {
    height: 46px !important;
    border: 1.5px solid var(--db-border) !important;
    border-radius: 11px !important;
    box-shadow: none !important;
    font-size: 14px !important;
}
body #order-standard_cart .view-cart-tabs .form-control:focus {
    border-color: var(--db-purple) !important;
    box-shadow: 0 0 0 3px rgba(108,78,245,.12) !important;
}
body #order-standard_cart .view-cart-tabs .btn,
body #order-standard_cart .view-cart-tabs .btn-default {
    background: var(--db-purple) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 11px !important;
    height: 46px !important;
    padding: 0 26px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
}
body #order-standard_cart .view-cart-tabs .btn:hover {
    background: var(--db-purple-dark) !important;
}
body #order-standard_cart .view-cart-promotion-code {
    background: #f3fbf7 !important;
    border: 1px dashed #9ee0c2 !important;
    border-radius: 11px !important;
    padding: 13px 18px !important;
    margin: 0 0 10px !important;
    color: #17805c !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
}
body #order-standard_cart .view-cart-promotion-code .btn {
    background: #fff !important;
    border: 1px solid #cfe9dd !important;
    color: #17805c !important;
    border-radius: 8px !important;
    padding: 4px 12px !important;
    font-weight: 600 !important;
}

/* ---- order summary ---- */
body #order-standard_cart .order-summary {
    background: #fff !important;
    border: 1px solid var(--db-border) !important;
    border-bottom: 1px solid var(--db-border) !important;
    border-radius: var(--db-radius) !important;
    padding: 24px 26px !important;
    margin: 0 !important;
    box-shadow: 0 4px 20px rgba(20,20,50,.04) !important;
    position: sticky;
    top: 20px;
}
body #order-standard_cart .order-summary h2 {
    margin: 0 0 18px !important;
    padding: 0 !important;
    color: #1a1a2e !important;
    text-align: left !important;
    font-size: 19px !important;
    font-weight: 700 !important;
}
body #order-standard_cart .summary-container {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    font-size: 13.5px !important;
    color: #55555f !important;
}
body #order-standard_cart .summary-container .clearfix,
body #order-standard_cart .order-summary .subtotal,
body #order-standard_cart .order-summary .recurring-totals {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 9px 0 !important;
    margin: 0 !important;
    font-size: 13.5px !important;
    border: none !important;
}
body #order-standard_cart .summary-container .clearfix .pull-left,
body #order-standard_cart .summary-container .clearfix .pull-right,
body #order-standard_cart .summary-container .clearfix .float-left,
body #order-standard_cart .summary-container .clearfix .float-right {
    float: none !important;
}
body #order-standard_cart .summary-container .clearfix .pull-right,
body #order-standard_cart .summary-container .clearfix .float-right {
    font-weight: 700 !important;
    color: #1a1a2e !important;
    white-space: nowrap !important;
}
body #order-standard_cart .order-summary .product-name {
    display: block !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1a1a2e !important;
}
body #order-standard_cart .order-summary .product-group {
    display: block !important;
    font-style: normal !important;
    font-size: 12px !important;
    color: #9a9aa5 !important;
    margin: 0 0 10px !important;
}
body #order-standard_cart .order-summary .summary-totals,
body #order-standard_cart .order-summary .bordered-totals {
    margin: 6px 0 !important;
    padding: 4px 0 !important;
    border-top: 1px solid var(--db-border) !important;
    border-bottom: 1px solid var(--db-border) !important;
}
body #order-standard_cart .order-summary .recurring-charges {
    font-style: normal !important;
    font-size: 12px !important;
    color: #9a9aa5 !important;
    text-align: right !important;
    padding-top: 4px !important;
}

/* grand total block */
body #order-standard_cart .order-summary .total-due-today,
body #order-standard_cart .order-summary .total-due-today-padded {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    background: var(--db-purple-light) !important;
    border-radius: 12px !important;
    padding: 16px 18px !important;
    margin: 16px 0 !important;
}
body #order-standard_cart .order-summary .total-due-today span {
    display: block !important;
    text-align: left !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #6b6b8a !important;
}
body #order-standard_cart .order-summary .total-due-today .amt {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: var(--db-purple-dark) !important;
    letter-spacing: -0.8px !important;
}

/* checkout button */
body #order-standard_cart .btn-checkout {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    width: 100% !important;
    background: var(--db-purple) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 12px !important;
    padding: 15px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    box-shadow: 0 10px 24px rgba(108,78,245,.24) !important;
    transition: all .18s ease !important;
}
body #order-standard_cart .btn-checkout:hover {
    background: var(--db-purple-dark) !important;
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(108,78,245,.3) !important;
}
body #order-standard_cart .order-summary .btn-continue-shopping {
    display: block !important;
    text-align: center !important;
    margin-top: 14px !important;
    color: #9a9aa5 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}
body #order-standard_cart .order-summary .btn-continue-shopping:hover {
    color: var(--db-purple) !important;
}

/* express checkout / gateway blocks */
body #order-standard_cart .view-cart-gateway-checkout {
    background: #fbfbfd !important;
    border: 1px solid var(--db-border) !important;
    border-radius: var(--db-radius) !important;
    padding: 18px !important;
    margin: 14px 0 0 !important;
}

/* empty cart state */
body #order-standard_cart .view-cart-empty {
    padding: 56px 20px !important;
    text-align: center !important;
    color: #9a9aa5 !important;
    font-size: 14.5px !important;
}
body #order-standard_cart .view-cart-empty::before {
    content: "";
    display: block;
    width: 54px;
    height: 54px;
    margin: 0 auto 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d9d9e3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='18' cy='20' r='1.5'/%3E%3Cpath d='M1.5 2h3l2.7 12.4a2 2 0 0 0 2 1.6h8.9a2 2 0 0 0 2-1.6L22 6H6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* ---- responsive ---- */
@media (max-width: 767px) {
    body #order-standard_cart .view-cart-items-header { display: none !important; }
    body #order-standard_cart .view-cart-items {
        border-radius: var(--db-radius) !important;
    }
    body #order-standard_cart .view-cart-items .item > .row { display: block !important; }
    body #order-standard_cart .view-cart-items .item > .row > div:first-child {
        padding-left: 58px !important;
    }
    body #order-standard_cart .view-cart-items .item > .row > div:first-child::before {
        left: 8px;
        width: 38px;
        height: 38px;
        font-size: 14px;
    }
    body #order-standard_cart .view-cart-items .item-price {
        text-align: left !important;
        margin-top: 10px !important;
        padding-left: 58px !important;
    }
    body #order-standard_cart .view-cart-items .item-price span { display: inline-block !important; }
    body #order-standard_cart .view-cart-items .item-price .cycle {
        display: inline-block !important;
        margin-left: 8px !important;
    }
    body #order-standard_cart .view-cart-items .item-qty {
        text-align: left !important;
        padding-left: 58px !important;
        margin-top: 10px !important;
    }
    body #order-standard_cart .view-cart-items .item-qty input { margin-left: 0 !important; }
    body #order-standard_cart .empty-cart,
    body #order-standard_cart .coupon-toggle-wrap {
        float: none !important;
        display: block !important;
    }
    body #order-standard_cart .coupon-toggle-wrap { padding-top: 10px !important; }
    body #order-standard_cart .order-summary {
        position: static !important;
        margin-top: 20px !important;
    }
}


/* ============================================================
   REVIEW & CHECKOUT — spacing / rhythm corrective pass
   ============================================================ */

/* --- 1. Bootstrap's .clearfix::before/::after become flex items and
   push the real spans toward the middle of the summary card.
   Kill them wherever we made the parent a flex container. --- */
body #order-standard_cart .summary-container .clearfix::before,
body #order-standard_cart .summary-container .clearfix::after,
body #order-standard_cart .order-summary .subtotal::before,
body #order-standard_cart .order-summary .subtotal::after,
body #order-standard_cart .order-summary .recurring-totals::before,
body #order-standard_cart .order-summary .recurring-totals::after {
    display: none !important;
}
body #order-standard_cart .summary-container .clearfix .pull-left,
body #order-standard_cart .summary-container .clearfix .float-left {
    text-align: left !important;
}
body #order-standard_cart .summary-container .clearfix .pull-right,
body #order-standard_cart .summary-container .clearfix .float-right {
    text-align: right !important;
}

/* --- 2. the express-checkout wrapper is empty on most installs but still
   painted a border-top — a stray rule above the Checkout button --- */
body #order-standard_cart .express-checkout-buttons:empty {
    display: none !important;
}
body #order-standard_cart .order-summary .total-due-today,
body #order-standard_cart .order-summary .total-due-today-padded {
    margin: 18px 0 16px !important;
}
body #order-standard_cart .order-summary .btn-checkout { margin-top: 0 !important; }
body #order-standard_cart .order-summary .btn-checkout + br { display: none !important; }

/* --- 3. header label alignment: the item rows carry an extra col-sm-1
   (remove button) that the header row does not, so the header needs a
   real 1/12 margin, not padding inside its own box --- */
@media (min-width: 768px) {
    body #order-standard_cart .view-cart-items-header .row > div:last-child {
        padding-right: 15px !important;
        margin-right: 8.333% !important;
    }
}

/* --- 4. line-item vertical rhythm --- */
body #order-standard_cart .view-cart-items .item,
body #order-standard_cart .view-cart-items .item:nth-child(even) {
    padding: 20px 24px !important;
}
body #order-standard_cart .view-cart-items .item > .row > div:first-child {
    padding-left: 72px !important;
}
body #order-standard_cart .view-cart-items .item > .row > div:first-child::before {
    left: 15px;
    width: 44px;
    height: 44px;
}
body #order-standard_cart .view-cart-items .item-title {
    margin: 0 0 4px !important;
    letter-spacing: -0.2px !important;
}
body #order-standard_cart .view-cart-items .item-group {
    margin: 0 !important;
    line-height: 1.5 !important;
}
body #order-standard_cart .view-cart-items .item-domain {
    margin: 8px 0 0 !important;
    padding: 4px 11px !important;
    line-height: 1.4 !important;
}
body #order-standard_cart .view-cart-items .item small {
    margin-top: 8px !important;
    padding-top: 8px !important;
    border-top: 1px dashed var(--db-border) !important;
}

/* price column sits on the same optical line as the product title */
body #order-standard_cart .view-cart-items .item-price {
    padding-top: 2px !important;
}
body #order-standard_cart .view-cart-items .item-price .cycle {
    margin-top: 4px !important;
}
body #order-standard_cart .view-cart-items .item > .row > div:last-child {
    text-align: center !important;
}

/* --- 5. actions bar: match the two chips optically --- */
body #order-standard_cart .empty-cart { margin-top: 18px !important; }
body #order-standard_cart .coupon-toggle-wrap { padding-top: 18px !important; }
body #order-standard_cart .empty-cart .btn,
body #order-standard_cart .coupon-toggle-link {
    height: 38px !important;
    padding: 0 16px !important;
    line-height: 1 !important;
}

/* --- 6. summary card: even row rhythm --- */
body #order-standard_cart .order-summary h2 { margin-bottom: 6px !important; }
body #order-standard_cart .summary-container .clearfix,
body #order-standard_cart .order-summary .subtotal,
body #order-standard_cart .order-summary .recurring-totals {
    padding: 11px 0 !important;
}

body #order-standard_cart .order-summary .recurring-charges {
    padding-top: 0 !important;
    font-size: 12.5px !important;
    color: #55555f !important;
}
body #order-standard_cart .order-summary .recurring-charges .cost {
    font-weight: 700 !important;
    color: #1a1a2e !important;
}
body #order-standard_cart .order-summary .btn-continue-shopping {
    margin-top: 12px !important;
    padding: 6px !important;
}

/* ============================================================
   REVIEW & CHECKOUT — promo code panel
   The tpl renders: .form-group.prepend-icon > label.field-icon > i.fa
   followed by a separate .btn-block submit. The <i> relies on a
   FontAwesome glyph the theme's Pro build doesn't resolve, so the
   label gets an inline SVG instead and the form becomes one row.
   ============================================================ */

/* panel chrome */
body #order-standard_cart .view-cart-tabs {
    padding: 18px 22px 22px !important;
    margin-top: 16px !important;
}
body #order-standard_cart .view-cart-tabs .nav-tabs {
    margin: 0 0 18px !important;
}
body #order-standard_cart .view-cart-tabs .nav-tabs > li > a,
body #order-standard_cart .view-cart-tabs .nav-tabs .nav-link {
    padding: 0 2px 11px !important;
    margin: 0 22px 0 0 !important;
}

/* input + button on one line */
body #order-standard_cart .view-cart-tabs .tab-pane.promo form {
    display: flex !important;
    align-items: stretch !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
}
body #order-standard_cart .view-cart-tabs .tab-pane.promo .form-group {
    flex: 1 1 240px !important;
    position: relative !important;
    margin: 0 !important;
}

/* the icon: hide the unresolvable glyph, paint an SVG on the label */
body #order-standard_cart .view-cart-tabs .field-icon > i {
    display: none !important;
}
body #order-standard_cart .view-cart-tabs .field-icon {
    position: absolute !important;
    left: 15px !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 3;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b4b4c4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 9.2V6.5a1 1 0 0 1 1-1h17a1 1 0 0 1 1 1v2.7a2.8 2.8 0 0 0 0 5.6v2.7a1 1 0 0 1-1 1h-17a1 1 0 0 1-1-1v-2.7a2.8 2.8 0 0 0 0-5.6z'/%3E%3Cpath d='M9.4 9.4v.01M12 12v.01M14.6 14.6v.01'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 18px 18px;
    transition: filter .15s ease;
}
/* icon picks up the brand colour while the field is focused */
body #order-standard_cart .view-cart-tabs .form-group:focus-within .field-icon {
    filter: brightness(0) saturate(100%) invert(31%) sepia(84%) saturate(4200%) hue-rotate(243deg) brightness(99%) contrast(94%);
}
body #order-standard_cart .view-cart-tabs .tab-pane.promo .form-control {
    padding-left: 44px !important;
    width: 100% !important;
}
body #order-standard_cart .view-cart-tabs .tab-pane.promo .form-control::placeholder {
    color: #b4b4c4 !important;
    font-size: 13.5px !important;
}

/* submit button sits beside the field instead of underneath it */
body #order-standard_cart .view-cart-tabs .tab-pane.promo .btn,
body #order-standard_cart .view-cart-tabs .tab-pane.promo .btn-block {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 28px !important;
    white-space: nowrap !important;
}

/* applied-code state */
body #order-standard_cart .view-cart-tabs .tab-pane.promo .text-center {
    margin-top: 10px !important;
}

@media (max-width: 575px) {
    body #order-standard_cart .view-cart-tabs .tab-pane.promo .btn,
    body #order-standard_cart .view-cart-tabs .tab-pane.promo .btn-block {
        flex: 1 1 100% !important;
        width: 100% !important;
    }
}

/* ============================================================
   ACCOUNT CANCELLATION REQUEST (clientareacancelrequest.tpl)
   Markup rebuilt in the tpl — .cxl-* classes.
   ============================================================ */
.cxl-page { margin-bottom: 30px; }

.cxl-grid { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.cxl-main { flex: 1 1 420px; min-width: 0; }
.cxl-side { flex: 0 0 330px; max-width: 100%; }
@media (max-width: 900px) {
    .cxl-grid { flex-direction: column-reverse; }
    .cxl-side { flex: 1 1 100%; width: 100%; }
}

.cxl-card {
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    margin-bottom: 18px;
    overflow: hidden;
}
.cxl-card-head {
    padding: 16px 22px;
    border-bottom: 1px solid var(--db-border);
}
.cxl-card-head h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #1a1a2e;
}
.cxl-card-body { padding: 20px 22px; }

/* reason textarea */
.cxl-textarea {
    border: 1.5px solid var(--db-border) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    padding: 14px 16px !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    color: #33333d !important;
    resize: vertical;
    min-height: 130px;
}
.cxl-textarea:focus {
    border-color: var(--db-purple) !important;
    box-shadow: 0 0 0 3px rgba(108,78,245,.12) !important;
}

/* cancellation type — selectable cards */
.cxl-type-options { display: flex; gap: 14px; flex-wrap: wrap; }
.cxl-type-option { flex: 1 1 220px; margin: 0; cursor: pointer; font-weight: 400; }
.cxl-type-option input { position: absolute; opacity: 0; pointer-events: none; }
.cxl-type-inner {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 16px;
    border: 1.5px solid var(--db-border);
    border-radius: 13px;
    background: #fff;
    transition: all .16s ease;
}
.cxl-type-option:hover .cxl-type-inner { border-color: #d8d2ff; background: #fcfbff; }
.cxl-type-option input:checked + .cxl-type-inner {
    border-color: var(--db-purple);
    background: var(--db-purple-light);
    box-shadow: 0 0 0 3px rgba(108,78,245,.1);
}
.cxl-type-icon {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--db-purple-light);
    color: var(--db-purple);
    font-size: 14px;
}
.cxl-type-icon.is-warn { background: #fff2e2; color: #e08a1e; }
.cxl-type-text {
    flex: 1 1 auto;
    font-size: 13.5px;
    font-weight: 600;
    color: #1a1a2e;
    line-height: 1.45;
}
.cxl-type-check {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid var(--db-border);
    background: #fff;
    color: transparent;
    font-size: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .16s ease;
}
.cxl-type-option input:checked + .cxl-type-inner .cxl-type-check {
    background: var(--db-purple);
    border-color: var(--db-purple);
    color: #fff;
}

/* domain warning card */
.cxl-card-warn { border-color: #f7dcb6; }
.cxl-card-warn .cxl-card-head {
    background: #fff9ef;
    border-bottom-color: #f7dcb6;
}
.cxl-card-warn .cxl-card-head h3 { color: #a86a10; }
.cxl-warn-text {
    margin: 0 0 14px;
    font-size: 13.5px;
    line-height: 1.85;
    color: #55555f;
}
.cxl-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 13px 15px;
    border: 1.5px solid var(--db-border);
    border-radius: 12px;
    background: #fbfbfd;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 500;
    color: #33333d;
    line-height: 1.6;
    transition: all .16s ease;
}
.cxl-checkbox:hover { border-color: #d8d2ff; }
.cxl-checkbox input { margin: 3px 0 0; accent-color: var(--db-purple); width: 16px; height: 16px; }

/* side summary */
.cxl-summary {
    padding: 26px 24px;
    text-align: center;
    position: sticky;
    top: 20px;
}
.cxl-summary-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    border-radius: 16px;
    background: var(--db-purple-light);
    color: var(--db-purple);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
.cxl-summary-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #9a9aa5;
    margin-bottom: 8px;
}
.cxl-summary h4 {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1.4;
}
.cxl-summary-group {
    display: block;
    font-size: 12.5px;
    color: #9a9aa5;
}
.cxl-summary-domain {
    display: inline-block;
    margin-top: 12px;
    padding: 5px 13px;
    border-radius: 8px;
    background: var(--db-purple-light);
    color: var(--db-purple);
    font-size: 12.5px;
    font-weight: 600;
}
.cxl-actions {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--db-border);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* buttons */
.cxl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: 12px;
    padding: 13px 22px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
    transition: all .16s ease;
    cursor: pointer;
    width: 100%;
}
.cxl-btn-danger {
    background: #e0463e;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(224,70,62,.22);
}
.cxl-btn-danger:hover { background: #c93b34; transform: translateY(-1px); }
.cxl-btn-ghost {
    background: #fff;
    border: 1px solid var(--db-border);
    color: #55555f !important;
    font-weight: 600;
}
.cxl-btn-ghost:hover { border-color: var(--db-purple); color: var(--db-purple) !important; background: var(--db-purple-light); }

/* success / invalid states */
.cxl-state {
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    padding: 56px 30px;
    text-align: center;
    max-width: 560px;
    margin: 0 auto 30px;
}
.cxl-state-icon {
    width: 68px;
    height: 68px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}
.cxl-state-icon.is-success { background: #e6f8f1; color: #17c690; }
.cxl-state-icon.is-error { background: #fdeceb; color: #e0463e; }
.cxl-state h2 {
    margin: 0 0 24px;
    font-size: 18px;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1.6;
}
.cxl-state .cxl-btn { width: auto; display: inline-flex; }

/* ============================================================
   MASS PAYMENT (masspay.tpl)
   Markup rebuilt in the tpl — .mp-* classes.
   ============================================================ */
.mp-page { margin-bottom: 30px; }
.mp-grid { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.mp-main { flex: 1 1 420px; min-width: 0; }
.mp-side { flex: 0 0 340px; max-width: 100%; }
@media (max-width: 991px) {
    .mp-side { flex: 1 1 100%; width: 100%; }
}

/* invoice card */
.mp-invoice {
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    margin-bottom: 16px;
    overflow: hidden;
}
.mp-invoice-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    background: #fbfbfd;
    border-bottom: 1px solid var(--db-border);
}
.mp-invoice-icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: var(--db-purple-light);
    color: var(--db-purple);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
.mp-invoice-num {
    flex: 1 1 auto;
    font-size: 12.5px;
    color: #9a9aa5;
    font-weight: 500;
}
.mp-invoice-num strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #1a1a2e;
    letter-spacing: -0.2px;
}
.mp-invoice-count {
    flex: 0 0 auto;
    font-size: 11.5px;
    font-weight: 600;
    color: #8a8a95;
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: 8px;
    padding: 4px 11px;
}

.mp-lines { list-style: none; margin: 0; padding: 0; }
.mp-line {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 13px 20px;
    border-bottom: 1px solid var(--db-border);
    transition: background .14s ease;
}
.mp-line:last-child { border-bottom: none; }
.mp-line:hover { background: #fbfaff; }
.mp-line-desc {
    flex: 1 1 auto;
    font-size: 13.5px;
    color: #55555f;
    line-height: 1.6;
}
.mp-line-amt {
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 700;
    color: #1a1a2e;
    white-space: nowrap;
}

/* empty state */
.mp-empty {
    background: #fff;
    border: 1px dashed var(--db-border);
    border-radius: var(--db-radius);
    padding: 60px 24px;
    text-align: center;
}
.mp-empty-icon {
    display: block;
    font-size: 34px;
    color: #d9d9e3;
    margin-bottom: 14px;
}
.mp-empty p { margin: 0; color: #9a9aa5; font-size: 14.5px; }

/* summary card */
.mp-summary {
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    padding: 24px 26px;
    box-shadow: 0 4px 20px rgba(20,20,50,.04);
    position: sticky;
    top: 20px;
}
.mp-summary h3 {
    margin: 0 0 10px;
    font-size: 19px;
    font-weight: 700;
    color: #1a1a2e;
}
.mp-rows { margin-bottom: 4px; }
.mp-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 0;
    font-size: 13.5px;
    color: #55555f;
    border-bottom: 1px solid var(--db-border);
}
.mp-row:last-child { border-bottom: none; }
.mp-row .mp-val {
    font-weight: 700;
    color: #1a1a2e;
    white-space: nowrap;
}
.mp-row.is-credit .mp-val { color: #17c690; }

.mp-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--db-purple-light);
    border-radius: 12px;
    padding: 16px 18px;
    margin: 16px 0;
}
.mp-total-amt {
    font-size: 25px;
    font-weight: 800;
    color: var(--db-purple-dark);
    letter-spacing: -0.8px;
    line-height: 1.1;
}
.mp-total-label {
    font-size: 12.5px;
    font-weight: 600;
    color: #6b6b8a;
    text-align: right;
}

/* gateway picker */
.mp-gateway { margin-bottom: 16px; }
.mp-gateway label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #9a9aa5;
    margin-bottom: 8px;
}
.mp-select {
    height: 48px !important;
    border: 1.5px solid var(--db-border) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1a1a2e !important;
    padding: 0 42px 0 15px !important;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c4ef5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 15px center !important;
    background-size: 15px 15px !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.mp-select:focus {
    border-color: var(--db-purple) !important;
    box-shadow: 0 0 0 3px rgba(108,78,245,.12) !important;
}

.mp-pay-btn {
    display: block;
    width: 100%;
    background: var(--db-purple);
    border: none;
    color: #fff;
    border-radius: 12px;
    padding: 15px;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 10px 24px rgba(108,78,245,.24);
    transition: all .18s ease;
    cursor: pointer;
}
.mp-pay-btn:hover {
    background: var(--db-purple-dark);
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(108,78,245,.3);
}
.mp-back {
    display: block;
    text-align: center;
    margin-top: 14px;
    padding: 6px;
    color: #9a9aa5 !important;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none !important;
}
.mp-back:hover { color: var(--db-purple) !important; }

@media (max-width: 575px) {
    .mp-invoice-count { display: none; }
    .mp-summary { position: static; }
    .cxl-summary { position: static; }
}

/* ============================================================
   REVIEW & CHECKOUT — flex markup (viewcart.tpl rebuilt)
   The bootstrap .row/.col-sm-* grid and .clearfix wrappers were
   replaced with .cart-row/.cart-cell and .sum-row in the tpl, so
   spacing no longer depends on float/gutter maths.
   ============================================================ */

/* ---- rows & cells ---- */
body #order-standard_cart .cart-row {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    margin: 0 !important;
}
body #order-standard_cart .cart-cell { padding: 0 !important; }
body #order-standard_cart .cart-cell-main { flex: 1 1 auto !important; min-width: 0 !important; }
body #order-standard_cart .cart-cell-qty { flex: 0 0 92px !important; text-align: center !important; }
body #order-standard_cart .cart-cell-price { flex: 0 0 170px !important; text-align: right !important; }
body #order-standard_cart .cart-cell-remove { flex: 0 0 40px !important; text-align: center !important; }

/* head row: the column labels now line up with the cells below by
   construction, no phantom margins needed */
body #order-standard_cart .view-cart-items-header .cart-head-row {
    align-items: center !important;
}
body #order-standard_cart .view-cart-items-header .cart-cell-remove {
    display: block !important;
}

/* ---- icon chip: attach to the cell, not to a grid child ---- */
body #order-standard_cart .view-cart-items .item > .row > div:first-child { padding-left: 0 !important; }
body #order-standard_cart .view-cart-items .item > .row > div:first-child::before { content: none !important; }

body #order-standard_cart .view-cart-items .item .cart-cell-main {
    position: relative !important;
    padding-left: 58px !important;
}
body #order-standard_cart .view-cart-items .item .cart-cell-main::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background-color: var(--db-purple-light);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c4ef5' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='3' width='19' height='7' rx='2'/%3E%3Crect x='2.5' y='14' width='19' height='7' rx='2'/%3E%3Ccircle cx='6.6' cy='6.5' r='1'/%3E%3Ccircle cx='6.6' cy='17.5' r='1'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
}
/* the head row and the upgrade-credit sub-row carry no chip */
body #order-standard_cart .view-cart-items-header .cart-cell-main,
body #order-standard_cart .row-upgrade-credit .cart-cell-main {
    padding-left: 0 !important;
}
body #order-standard_cart .view-cart-items-header .cart-cell-main::before,
body #order-standard_cart .row-upgrade-credit .cart-cell-main::before {
    content: none !important;
}

/* upgrade credit sub-row reads as a nested note */
body #order-standard_cart .row-upgrade-credit {
    margin-top: 14px !important;
    padding: 12px 0 0 58px !important;
    border-top: 1px dashed var(--db-border) !important;
}
body #order-standard_cart .row-upgrade-credit .item-price span { color: #17c690 !important; }
body #order-standard_cart .upgrade-calc-msg {
    font-size: 12px !important;
    color: #9a9aa5 !important;
    line-height: 1.7 !important;
}

/* domain term dropdown inside the price cell */
body #order-standard_cart .cart-cell-price .dropdown { margin: 6px 0 4px !important; }
body #order-standard_cart .cart-cell-price .dropdown-toggle {
    background: #fff !important;
    border: 1px solid var(--db-border) !important;
    color: #55555f !important;
    border-radius: 9px !important;
    padding: 5px 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}
body #order-standard_cart .cart-cell-price .dropdown-toggle:hover {
    border-color: var(--db-purple) !important;
    color: var(--db-purple) !important;
}
body #order-standard_cart .cart-cell-price .renewal {
    display: block !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    color: #9a9aa5 !important;
    margin-top: 3px !important;
}
body #order-standard_cart .cart-cell-price .renewal-price {
    display: inline !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #8a8a95 !important;
}

/* ---- summary rows (clearfix removed in the tpl) ---- */
body #order-standard_cart .summary-container .sum-row,
body #order-standard_cart .order-summary .subtotal,
body #order-standard_cart .order-summary .recurring-totals {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 11px 0 !important;
    margin: 0 !important;
    font-size: 13.5px !important;
    color: #55555f !important;
    border: none !important;
}
body #order-standard_cart .order-summary .subtotal {
    border-bottom: 1px solid var(--db-border) !important;
}
body #order-standard_cart .summary-container .sum-row .pull-left,
body #order-standard_cart .summary-container .sum-row .float-left {
    float: none !important;
    text-align: left !important;
}
body #order-standard_cart .summary-container .sum-row .pull-right,
body #order-standard_cart .summary-container .sum-row .float-right {
    float: none !important;
    text-align: right !important;
    font-weight: 700 !important;
    color: #1a1a2e !important;
    white-space: nowrap !important;
}
body #order-standard_cart .summary-container .sum-row.is-discount .pull-right,
body #order-standard_cart .summary-container .sum-row.is-discount .float-right {
    color: #17c690 !important;
}
body #order-standard_cart .order-summary .bordered-totals {
    border-top: 1px solid var(--db-border) !important;
    border-bottom: 1px solid var(--db-border) !important;
    margin: 0 !important;
    padding: 2px 0 !important;
}

/* checkout block (the stray <br> is gone from the tpl) */
body #order-standard_cart .summary-actions { text-align: center !important; }

/* ---- responsive ---- */
@media (max-width: 767px) {
    body #order-standard_cart .cart-row {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    body #order-standard_cart .cart-cell-main { flex: 1 1 100% !important; }
    body #order-standard_cart .cart-cell-price {
        flex: 1 1 auto !important;
        text-align: left !important;
        padding-left: 58px !important;
    }
    body #order-standard_cart .cart-cell-qty {
        flex: 0 0 auto !important;
        text-align: left !important;
    }
    body #order-standard_cart .cart-cell-remove {
        flex: 0 0 auto !important;
        margin-left: auto !important;
    }
    body #order-standard_cart .view-cart-items .item .cart-cell-main {
        padding-left: 54px !important;
    }
    body #order-standard_cart .view-cart-items .item .cart-cell-main::before {
        width: 40px;
        height: 40px;
    }
    body #order-standard_cart .row-upgrade-credit { padding-left: 0 !important; }
}

/* ============================================================
   VIEW TICKET — thread bubbles + rating, corrective rebuild
   Staff replies were a flat lavender block with a mismatched
   header strip; the rating widget relied on "Font Awesome 5 Pro"
   glyphs and floated loose in the message body.
   ============================================================ */

/* ---- card shell: sections own their padding ---- */
.ticket-reply,
.ticket-reply.staff {
    background: #fff !important;
    border: 1px solid var(--db-border) !important;
    border-radius: var(--db-radius) !important;
    padding: 0 !important;
    margin-bottom: 16px !important;
    overflow: hidden !important;
    position: relative;
}
/* staff replies are marked with a brand accent instead of a full tint */
.ticket-reply.staff {
    border-color: rgba(108,78,245,.22) !important;
    box-shadow: 0 4px 18px rgba(108,78,245,.06) !important;
}
.ticket-reply.staff::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--db-purple);
}

/* ---- header strip ---- */
.ticket-reply .user {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 15px 22px !important;
    background: #fbfbfd !important;
    border-bottom: 1px solid var(--db-border) !important;
}
.ticket-reply.staff .user {
    background: var(--db-purple-light) !important;
    border-bottom-color: rgba(108,78,245,.16) !important;
}
.ticket-reply .user i {
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    background: #fff !important;
    border: 1px solid var(--db-border) !important;
    color: #9a9aa5 !important;
    font-size: 14px !important;
}
.ticket-reply.staff .user i {
    background: var(--db-purple) !important;
    border-color: var(--db-purple) !important;
    color: #fff !important;
}
.ticket-reply .user .name {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}
.ticket-reply .user .type {
    font-size: 12px !important;
    color: #9a9aa5 !important;
}
.ticket-reply .user .label {
    background: #b9b9c6 !important;
    letter-spacing: .4px !important;
}
.ticket-reply.staff .user .label { background: var(--db-purple) !important; }
.ticket-reply .date {
    float: none !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
    font-size: 12.5px !important;
    color: #9a9aa5 !important;
}

/* ---- message body ---- */
.ticket-reply .message {
    padding: 20px 22px !important;
    color: #33333d !important;
}
.ticket-reply .message hr {
    border: none !important;
    border-top: 1px solid var(--db-border) !important;
    margin: 16px 0 !important;
}
.ticket-reply .attachments {
    margin: 0 !important;
    padding: 15px 22px !important;
    background: #fbfbfd !important;
    border-top: 1px solid var(--db-border) !important;
    font-size: 13px !important;
}

/* ============================================================
   RATING WIDGET
   The tpl prints the stars in 5→1 order and the stock theme
   reversed them with direction:rtl so ":hover ~ .star" fills to
   the left. Flex row-reverse keeps that behaviour while letting
   the label read normally.
   ============================================================ */
.ticket-reply .message > .clearfix {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    margin-top: 18px !important;
    padding-top: 16px !important;
    border-top: 1px dashed var(--db-border) !important;
}
.ticket-reply .message > .clearfix::before,
.ticket-reply .message > .clearfix::after { content: none !important; }

.ticket-reply .rating,
.ticket-reply .rating-done {
    float: none !important;
    display: inline-flex !important;
    flex-direction: row-reverse !important;
    align-items: center !important;
    gap: 3px !important;
    direction: ltr !important;
    unicode-bidi: normal !important;
    font-size: 0 !important;
    padding: 7px 9px 7px 14px !important;
    background: #fff !important;
    border: 1px solid var(--db-border) !important;
    border-radius: 30px !important;
}
.ticket-reply.staff .rating,
.ticket-reply.staff .rating-done {
    border-color: rgba(108,78,245,.18) !important;
}
.ticket-reply .rating { padding: 7px 9px !important; }

/* the stars themselves — inline SVG, no icon-font dependency */
.ticket-reply .rating span.star,
.ticket-reply .rating-done span.star {
    display: block !important;
    width: 21px !important;
    height: 21px !important;
    font-size: 0 !important;
    color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d5d5e0' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8l2.9 5.9 6.5.95-4.7 4.58 1.11 6.47L12 17.65l-5.81 3.05 1.11-6.47-4.7-4.58 6.5-.95z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    transition: transform .12s ease !important;
}
.ticket-reply .rating span.star:before,
.ticket-reply .rating-done span.star:before {
    content: none !important;
}
.ticket-reply .rating span.star { cursor: pointer !important; }

/* filled state — hover cascade and already-submitted rating */
.ticket-reply .rating span.star:hover,
.ticket-reply .rating span.star:hover ~ span.star,
.ticket-reply .rating-done span.star.active {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f7b731' stroke='%23f7b731' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M12 2.8l2.9 5.9 6.5.95-4.7 4.58 1.11 6.47L12 17.65l-5.81 3.05 1.11-6.47-4.7-4.58 6.5-.95z'/%3E%3C/svg%3E") !important;
}
.ticket-reply .rating span.star:hover { transform: scale(1.12) !important; }

/* "you rated this response" label sits before the stars */
.ticket-reply .rating-done .rated {
    display: block !important;
    order: 99;
    margin: 0 8px 0 0 !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #9a9aa5 !important;
    white-space: nowrap !important;
}

@media (max-width: 767px) {
    .ticket-reply .user { flex-wrap: wrap !important; }
    .ticket-reply .date { flex: 1 1 100% !important; margin: 6px 0 0 50px !important; }
    .ticket-reply .message > .clearfix { justify-content: flex-start !important; }
    .ticket-reply .rating-done .rated { display: none !important; }
}

/* ============================================================
   GLOBAL MOTION FIX — modals were unclickable
   `section#main-body .main-content` kept `transform: translateY(0)`
   after its intro animation (fill-mode: both). A non-none transform
   on an ancestor makes descendant position:fixed elements resolve
   against it, so Bootstrap modals ended up trapped underneath the
   .modal-backdrop and every button inside them stopped responding.
   Fading opacity only removes the containing block entirely.
   ============================================================ */
@keyframes db-page-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
section#main-body .main-content {
    animation: db-page-in .32s ease both;
    transform: none !important;
}

/* belt and braces: keep modal stacking sane regardless of ancestors */
.modal { z-index: 1060 !important; }
.modal-backdrop { z-index: 1040 !important; }
.modal-dialog { z-index: 1061 !important; pointer-events: auto !important; }

/* ============================================================
   MODALS — site-wide restyle (remove item / empty cart / etc.)
   ============================================================ */
.modal-content {
    border: none !important;
    border-radius: 20px !important;
    box-shadow: 0 24px 60px rgba(20,20,50,.22) !important;
    overflow: hidden;
}
.modal-body {
    padding: 34px 32px 26px !important;
    text-align: center;
    font-size: 14.5px;
    color: #55555f;
    line-height: 1.75;
}
.modal-body .float-right,
.modal-body .pull-right {
    float: none !important;
    position: absolute;
    top: 14px;
    right: 16px;
}
.modal-body .close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f4f4f8 !important;
    color: #8a8a95 !important;
    opacity: 1 !important;
    font-size: 18px;
    font-weight: 400;
    text-shadow: none !important;
    border: none !important;
    transition: all .15s ease;
}
.modal-body .close:hover { background: #e9e9f1 !important; color: #1a1a2e !important; }

.modal-title {
    display: block;
    margin: 0 0 10px !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    color: #1a1a2e !important;
}
/* the oversized fa-3x glyph becomes a tidy circular badge */
.modal-title .fa-3x {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin: 0 auto 16px;
    border-radius: 50%;
    font-size: 22px !important;
    background: #fdeceb;
    color: #e0463e;
}
.modal-remove-item .modal-title .fa-3x { background: #fdeceb; color: #e0463e; }
.modal-title span { display: block; }

.modal-footer {
    display: flex !important;
    justify-content: center !important;
    gap: 10px;
    padding: 0 32px 30px !important;
    border-top: none !important;
    margin: 0 !important;
}
.modal-footer .btn {
    min-width: 118px;
    border-radius: 11px !important;
    padding: 12px 22px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    border: none !important;
}
.modal-footer .btn-default {
    background: #fff !important;
    border: 1px solid var(--db-border) !important;
    color: #55555f !important;
}
.modal-footer .btn-default:hover {
    border-color: #c9c9d6 !important;
    color: #1a1a2e !important;
    background: #fbfbfd !important;
}
.modal-footer .btn-primary {
    background: #e0463e !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(224,70,62,.24) !important;
}
.modal-footer .btn-primary:hover { background: #c93b34 !important; }
.modal-backdrop.in { opacity: .45 !important; }

/* ============================================================
   VIEW CART — column gutter (promo chip was touching the summary)
   The two cart columns were floats with percentage widths and no
   gutter between them; flex with a real gap fixes it for good.
   ============================================================ */
body #order-standard_cart .cart-body > .row {
    display: flex !important;
    align-items: flex-start !important;
    gap: 26px !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
}
body #order-standard_cart .secondary-cart-body {
    float: none !important;
    flex: 1 1 520px !important;
    width: auto !important;
    min-width: 0 !important;
}
body #order-standard_cart .secondary-cart-sidebar {
    float: none !important;
    flex: 0 0 340px !important;
    width: auto !important;
    max-width: 100% !important;
}
@media (max-width: 991px) {
    body #order-standard_cart .secondary-cart-body,
    body #order-standard_cart .secondary-cart-sidebar {
        flex: 1 1 100% !important;
    }
}

/* ============================================================
   MODAL TRAP — definitive fix
   Any element with a transform other than `none` becomes the
   containing block for its position:fixed descendants. The entry
   animations use `fill-mode: both`, so containers kept their final
   `transform: translateY(0)` forever — and any Bootstrap modal
   rendered inside one (cart remove/empty, ticket dialogs, payment
   method modals) was clipped behind .modal-backdrop with dead
   buttons. `fill-mode: backwards` keeps the entrance motion but
   drops the transform once the animation finishes.
   ============================================================ */
section#header,
section#main-menu,
section#footer.site-footer,
section#main-body .main-content,
.panel,
.services-card,
.tickets-card,
.ticket-reply-card,
.ticket-form-card,
.ticket-info-card,
.profile-card,
.quicklinks-card,
.domain-pricing-panel,
.checkout-order-summary,
.dashboard-hero,
.dashboard-stats .stat-card,
.home-panels-flex-row > .home-panel-col,
.services-table tbody tr,
.tickets-table tbody tr,
.label.status {
    animation-fill-mode: backwards !important;
}

/* modals never inherit a stacking context from their ancestors */
body .modal {
    z-index: 1060 !important;
    position: fixed !important;
}
body .modal-backdrop { z-index: 1040 !important; }
body .modal-dialog {
    z-index: 1061 !important;
    position: relative !important;
    pointer-events: auto !important;
}
body .modal-content { pointer-events: auto !important; }
body.modal-open { overflow: hidden !important; }

/* ---- checkout: leftovers ---- */
/* #totalDueToday is TWO different things depending on the page: on
   checkout it is a status <div class="alert">, on viewcart it is the
   <span class="amt"> holding the cart total. The rule that used to sit
   here hid it whenever it lacked .alert-success — which on the cart
   page meant hiding the price itself. Scoped to the checkout page. */
#order-standard_cart.checkout-page #totalDueToday.w-hidden,
#order-standard_cart.checkout-page #totalDueToday:not(.alert-success) { display: none !important; }
/* registrant-contact select gets the same treatment as other pickers */
#order-standard_cart #frmCheckout select.form-control {
    height: 46px !important;
    border: 1.5px solid var(--db-border) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1a1a2e !important;
    padding: 0 42px 0 15px !important;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c4ef5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 15px center !important;
    background-size: 15px 15px !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    max-width: 420px;
}
/* section descriptions read as helper text, not body copy */
#order-standard_cart #frmCheckout > p,
#order-standard_cart .domain-registrant-info > p:first-child {
    font-size: 13px !important;
    line-height: 1.75 !important;
    color: #8a8a95 !important;
}

/* ============================================================
   MODAL BACKDROP — removed entirely
   Bootstrap appends .modal-backdrop as a direct child of <body>,
   but the modals themselves live deep inside page containers
   (#order-standard_cart, .main-content, .panel …). Any of those
   that forms a stacking context confines the modal's z-index to
   itself, so the modal can never rise above a body-level backdrop:
   it renders dimmed and the backdrop eats every click.
   Rather than chase every ancestor, the backdrop element is
   dropped and .modal paints its own scrim. .modal is fixed and
   full-viewport, so it dims identically — and it is the element
   receiving the clicks, so the buttons work.
   ============================================================ */
.modal-backdrop,
.modal-backdrop.in,
.modal-backdrop.show,
.modal-backdrop.fade {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.modal,
.modal.in,
.modal.show {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 1060 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: rgba(22, 22, 48, .55) !important;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    pointer-events: auto !important;
}
/* only the open modal paints a scrim */
.modal:not(.in):not(.show) {
    background: transparent !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    pointer-events: none !important;
}

.modal-dialog {
    position: relative !important;
    z-index: 1 !important;
    margin: 7vh auto !important;
    max-width: 460px !important;
    width: auto !important;
    pointer-events: auto !important;
}
@media (max-width: 575px) {
    .modal-dialog { margin: 5vh 16px !important; }
}

.modal-content {
    background: #fff !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}
.modal-content .btn,
.modal-content button,
.modal-content a {
    position: relative;
    z-index: 2;
    pointer-events: auto !important;
}

/* Bootstrap adds inline padding-right to <body> to compensate for the
   scrollbar it hides; without a backdrop that shift is just a jump */
body.modal-open {
    padding-right: 0 !important;
    overflow: hidden !important;
}

/* ============================================================
   MODAL LAYERING — the last piece
   `section#main-body { position: relative; z-index: 1 }` caps every
   descendant at layer 1, so a modal inside it could never rise above
   section#header (1040) or the footer — hence the bright, undimmed
   header and footer over a dark page. While a modal is open the page
   sections give up their z-index and #main-body is promoted.
   ============================================================ */
body.modal-open section#main-body {
    z-index: 1060 !important;
}
body.modal-open section#header,
body.modal-open section#main-menu,
body.modal-open section#footer,
body.modal-open section#footer.site-footer {
    z-index: auto !important;
}

/* ---- dialog placement: centred, never clipped ---- */
.modal.in,
.modal.show {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px 16px !important;
}
.modal.in .modal-dialog,
.modal.show .modal-dialog {
    margin: auto !important;
    width: 100% !important;
    max-width: 430px !important;
}

/* ---- content polish ---- */
.modal-content {
    border-radius: 22px !important;
    box-shadow: 0 30px 70px rgba(16,16,44,.32) !important;
}
.modal-body {
    padding: 30px 32px 22px !important;
    font-size: 14.5px !important;
    line-height: 1.7 !important;
    color: #55555f !important;
}
/* the badge is inside the padding box now, so nothing is cut off */
.modal-title .fa-3x {
    width: 58px !important;
    height: 58px !important;
    margin: 2px auto 14px !important;
    font-size: 20px !important;
    border-radius: 18px !important;
}
.modal-title {
    font-size: 20px !important;
    letter-spacing: -0.3px !important;
    margin: 0 0 8px !important;
}
/* close button tucked into the corner, out of the title's way */
.modal-body .float-right,
.modal-body .pull-right {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    float: none !important;
    margin: 0 !important;
    z-index: 3;
}
.modal-content { position: relative !important; }
.modal-body .close {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    opacity: 1 !important;
    font-size: 19px !important;
    line-height: 1 !important;
    color: #b4b4c4 !important;
    background: #f6f6fa !important;
    text-shadow: none !important;
    border: none !important;
}
.modal-footer { padding: 4px 32px 28px !important; }
.modal-footer .btn { min-width: 112px !important; }

/* ============================================================
   HEADER CART ICON
   Sits immediately before the notification bell and mirrors its
   dimensions so the two read as a pair of icon buttons.
   ============================================================ */
ul.top-nav > li.cart-item { display: inline-block; }
.cart-link {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #55555f !important;
    font-size: 16px;
    padding: 0 !important;
    text-decoration: none !important;
    transition: background .16s ease, color .16s ease, transform .16s ease;
}
.cart-link:hover,
.cart-link:focus {
    background: var(--db-purple-light) !important;
    color: var(--db-purple) !important;
    outline: none !important;
    text-decoration: none !important;
}
.cart-link:hover i { transform: translateY(-1px); }
.cart-link i { transition: transform .16s ease; }
/* no focus slab on click, same as the bell */
.cart-link:active,
.cart-link:focus:not(:focus-visible) {
    box-shadow: none !important;
    outline: none !important;
}
@media (max-width: 767px) {
    .cart-link { width: 34px; height: 34px; font-size: 15px; }
}

/* ============================================================
   MODALS — open without the lag, and fix the icon badge
   The blur filter on a full-viewport layer forced a repaint of the
   whole page on every frame of the fade, which is what made the
   dialog crawl in. The scrim now fades on opacity alone, and the
   dialog uses a short scale-in instead of Bootstrap's -25% slide.
   ============================================================ */
.modal,
.modal.in,
.modal.show {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgba(22, 22, 48, .5) !important;
    transition: opacity .16s linear !important;
}
.modal.fade { opacity: 0 !important; }
.modal.fade.in,
.modal.fade.show { opacity: 1 !important; }
.modal:not(.in):not(.show) { background: transparent !important; }

.modal.fade .modal-dialog {
    transform: scale(.96) !important;
    opacity: 0;
    transition: transform .18s cubic-bezier(.34,1.3,.64,1), opacity .18s ease !important;
}
.modal.fade.in .modal-dialog,
.modal.fade.show .modal-dialog {
    transform: scale(1) !important;
    opacity: 1;
}

/* the icon badge: square-rounded, sized to the glyph, never clipped */
.modal-title .fa-3x,
.modal-body .modal-title i.fa-3x {
    width: 56px !important;
    height: 56px !important;
    margin: 0 auto 16px !important;
    border-radius: 18px !important;
    font-size: 19px !important;
    line-height: 1 !important;
    background: #fdeceb !important;
    color: #e0463e !important;
}
/* fa-3x forces a 3em glyph via a later stylesheet — pin it back */
.modal-title .fa-3x::before { font-size: 19px !important; }
.modal-remove-item .modal-title .fa-3x,
#modalEmptyCart .modal-title .fa-3x { background: #fdeceb !important; color: #e0463e !important; }

/* close button: quieter, aligned with the card's corner radius */
.modal-body .close {
    width: 30px !important;
    height: 30px !important;
    border-radius: 10px !important;
    font-size: 17px !important;
    color: #b4b4c4 !important;
    background: #f6f6fa !important;
    opacity: 1 !important;
    transition: background .15s ease, color .15s ease;
}
.modal-body .close:hover { background: #ececf3 !important; color: #55555f !important; }

/* ============================================================
   CONFIGURE PRODUCT — Continue button
   The button lives in a bare .text-center directly under the
   summary card, so it had no gap and stretched edge to edge.
   ============================================================ */
#order-standard_cart #orderSummary > .text-center {
    margin-top: 16px !important;
    padding: 0 !important;
}
#order-standard_cart #btnCompleteProductConfig {
    display: inline-flex !important;
    width: auto !important;
    min-width: 220px !important;
    max-width: 100% !important;
    padding: 14px 30px !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 24px rgba(108,78,245,.24) !important;
    transition: background .16s ease, transform .16s ease, box-shadow .18s ease !important;
}
#order-standard_cart #btnCompleteProductConfig:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(108,78,245,.3) !important;
}
#order-standard_cart #btnCompleteProductConfig i {
    font-size: 14px !important;
}
@media (max-width: 991px) {
    #order-standard_cart #btnCompleteProductConfig { width: 100% !important; }
}

/* ============================================================
   MODAL — clean exit, centred icon
   On close Bootstrap strips .in, so the flex centring switched off
   one frame before the element was hidden: the dialog snapped to
   the top of the viewport and *then* faded, which read as the box
   flying off. Closing is now instant — nothing to see mid-flight.
   ============================================================ */
.modal.fade:not(.in):not(.show) {
    opacity: 0 !important;
    transition: none !important;
}
.modal.fade:not(.in):not(.show) .modal-dialog {
    transition: none !important;
    transform: scale(1) !important;
    opacity: 0 !important;
}

/* the badge glyph: fa-3x ships its own line-height and a negative
   vertical-align, which pushed the icon down and to the right */
.modal-title .fa-3x,
.modal-body .modal-title i.fa-3x {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    text-align: center !important;
    padding: 0 !important;
}
.modal-title .fa-3x::before,
.modal-body .modal-title i.fa-3x::before {
    display: block !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    font-size: 20px !important;
    margin: 0 !important;
}

/* ============================================================
   FOCUS RINGS — no more browser default outlines
   Clicking a ticket row, a card link or a button left the black
   1px box the browser draws by default. Mouse users get nothing;
   keyboard users still get a visible brand-coloured ring, so the
   site stays navigable without a pointer.
   ============================================================ */
a:focus,
button:focus,
.btn:focus,
.btn:active:focus,
summary:focus,
[role="button"]:focus,
[tabindex]:focus,
.list-group-item:focus,
.panel a:focus,
.tickets-table a:focus,
.tickets-table tr:focus,
.services-table a:focus,
.services-table tr:focus,
.ticket-row:focus,
.ticket-list-item:focus,
.invoice-row:focus,
.domain-row:focus,
.card-link:focus,
.notif-bell:focus,
.cart-link:focus,
.dropdown-toggle:focus,
.close:focus {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
}

/* keyboard navigation keeps a ring */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible,
.list-group-item:focus-visible,
.notif-bell:focus-visible,
.cart-link:focus-visible,
.dropdown-toggle:focus-visible,
.close:focus-visible {
    outline: 2px solid var(--db-purple) !important;
    outline-offset: 2px !important;
    border-radius: 8px;
}

/* form fields keep their own purple ring — don't strip those */
.form-control:focus,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none !important;
}


/* ============================================================
   CHECKOUT — rebuilt template (.co-* classes)
   checkout.tpl no longer uses the bootstrap grid: every section is
   a .co-card with a .co-card-head and .co-card-body, and fields sit
   in a flex .co-row. Nothing here has to fight float gutters or
   negative margins, so no !important is needed.
   ============================================================ */

/* ---- layout ---- */
body #order-standard_cart.checkout-page .checkout-layout {
    display: flex !important;
    align-items: flex-start !important;
    gap: 26px !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
}
#order-standard_cart.checkout-page .checkout-main-col { flex: 1 1 520px; min-width: 0; }
#order-standard_cart.checkout-page .checkout-summary-col { flex: 0 0 340px; max-width: 100%; }
@media (max-width: 991px) {
    #order-standard_cart.checkout-page .checkout-main-col,
    #order-standard_cart.checkout-page .checkout-summary-col { flex: 1 1 100%; }
}

/* ---- intro strip ---- */
body #order-standard_cart.checkout-page .already-registered {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
    background: #fff !important;
    border: 1px solid var(--db-border) !important;
    border-radius: var(--db-radius) !important;
    padding: 16px 22px !important;
    margin-bottom: 16px !important;
}
body #order-standard_cart.checkout-page .already-registered p {
    margin: 0 !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #55555f !important;
}
#order-standard_cart.checkout-page .already-registered .pull-right,
#order-standard_cart.checkout-page .already-registered .float-right { float: none; }
body #order-standard_cart.checkout-page .already-registered .btn {
    background: var(--db-purple-light) !important;
    border: none !important;
    color: var(--db-purple) !important;
    border-radius: 10px !important;
    padding: 9px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}
#order-standard_cart.checkout-page .already-registered .btn:hover { background: var(--db-purple); color: #fff; }

/* ---- cards ---- */
body #order-standard_cart.checkout-page .co-card {
    background: #fff !important;
    border: 1px solid var(--db-border) !important;
    border-radius: var(--db-radius) !important;
    margin-bottom: 16px !important;
    overflow: hidden !important;
}
body #order-standard_cart.checkout-page .co-card-head {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    padding: 15px 22px !important;
    background: #fbfbfd !important;
    border-bottom: 1px solid var(--db-border) !important;
}
body #order-standard_cart.checkout-page .co-card-head::before {
    content: "" !important;
    flex: 0 0 4px !important;
    width: 4px !important;
    height: 16px !important;
    border-radius: 3px !important;
    background: var(--db-purple) !important;
}
body #order-standard_cart.checkout-page .co-card-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1a1a2e !important;
    letter-spacing: -0.2px !important;
}
#order-standard_cart.checkout-page .co-card-title small,
body #order-standard_cart.checkout-page .co-card-title i {
    display: block !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    font-style: normal !important;
    color: #9a9aa5 !important;
    margin-top: 3px !important;
}
#order-standard_cart.checkout-page .co-card-body { padding: 20px 22px; }
body #order-standard_cart.checkout-page .co-help {
    margin: 0 0 16px !important;
    font-size: 12.5px !important;
    line-height: 1.8 !important;
    color: #8a8a95 !important;
}

/* ---- flex grid ---- */
body #order-standard_cart.checkout-page .co-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
    margin: 0 !important;
}
#order-standard_cart.checkout-page .co-row-tight { gap: 12px; }
#order-standard_cart.checkout-page .co-col-12 { flex: 1 1 100%; min-width: 0; }
#order-standard_cart.checkout-page .co-col-8  { flex: 1 1 calc(66.666% - 5px); min-width: 0; }
#order-standard_cart.checkout-page .co-col-6  { flex: 1 1 calc(50% - 7px); min-width: 200px; }
#order-standard_cart.checkout-page .co-col-5  { flex: 1 1 calc(41.666% - 8px); min-width: 170px; }
#order-standard_cart.checkout-page .co-col-4  { flex: 1 1 calc(33.333% - 10px); min-width: 150px; }
#order-standard_cart.checkout-page .co-col-3  { flex: 1 1 calc(25% - 11px); min-width: 130px; }
#order-standard_cart.checkout-page .co-col-center { margin: 0 auto; }
#order-standard_cart.checkout-page .co-row .form-group { margin-bottom: 0; }
#order-standard_cart.checkout-page .co-no-margin { margin: 0; }

/* ---- fields ---- */
#order-standard_cart.checkout-page .prepend-icon { position: relative; }
body #order-standard_cart.checkout-page .prepend-icon .field-icon {
    position: absolute !important;
    left: 15px !important;
    top: 0 !important;
    bottom: 0 !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 17px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #b9b9c8 !important;
    font-size: 14px !important;
    pointer-events: none !important;
    transition: color .15s ease !important;
}
#order-standard_cart.checkout-page .prepend-icon:focus-within .field-icon { color: var(--db-purple); }
#order-standard_cart.checkout-page .prepend-icon .form-control { padding-left: 44px; }

#order-standard_cart.checkout-page .form-control,
body #order-standard_cart.checkout-page .field.form-control {
    height: 46px !important;
    border: 1.5px solid var(--db-border) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    font-size: 14px !important;
    color: #1a1a2e !important;
    background-color: #fff !important;
    padding: 0 15px !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
}
#order-standard_cart.checkout-page .form-control::placeholder { color: #b4b4c4; }
body #order-standard_cart.checkout-page .form-control:focus {
    border-color: var(--db-purple) !important;
    box-shadow: 0 0 0 3px rgba(108,78,245,.12) !important;
}
body #order-standard_cart.checkout-page textarea.form-control {
    height: auto !important;
    min-height: 112px !important;
    padding: 14px 16px !important;
    line-height: 1.7 !important;
    resize: vertical !important;
}
body #order-standard_cart.checkout-page select.form-control {
    padding-right: 42px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c4ef5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 15px center !important;
    background-size: 15px 15px !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}
#order-standard_cart.checkout-page .prepend-icon select.form-control { padding-left: 44px; }
#order-standard_cart.checkout-page .field-help-text,
body #order-standard_cart.checkout-page .field-error-msg {
    /* no `display` here: styles.css hides .field-error-msg by default and
       the card validator reveals it. Forcing it open pinned every error
       message on screen. */
    margin-top: 6px !important;
    font-size: 11.5px !important;
    line-height: 1.6 !important;
}
#order-standard_cart.checkout-page .field-help-text { color: #9a9aa5; }
#order-standard_cart.checkout-page .field-error-msg { color: #e0463e; }
#order-standard_cart.checkout-page .co-card-body > label,
body #order-standard_cart.checkout-page .form-group > label {
    display: block !important;
    margin-bottom: 7px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #55555f !important;
}

/* the CVV help button attached to its field */
#order-standard_cart.checkout-page .input-group { display: flex; width: 100%; }
body #order-standard_cart.checkout-page .input-group .form-control {
    flex: 1 1 auto !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
#order-standard_cart.checkout-page .input-group-btn,
#order-standard_cart.checkout-page .input-group-append { display: flex; }
body #order-standard_cart.checkout-page .input-group-btn .btn {
    height: 46px !important;
    border: 1.5px solid var(--db-border) !important;
    border-left: none !important;
    border-radius: 0 12px 12px 0 !important;
    background: #fbfbfd !important;
    color: #8a8a95 !important;
    font-weight: 700 !important;
    padding: 0 16px !important;
}
#order-standard_cart.checkout-page .input-group-btn .btn:hover { color: var(--db-purple); }

/* ---- account chooser ---- */
body #order-standard_cart.checkout-page .account-select-container .account {
    height: 100% !important;
    border: 1.5px solid var(--db-border) !important;
    border-radius: 13px !important;
    background: #fff !important;
    transition: border-color .16s ease, background .16s ease !important;
}
#order-standard_cart.checkout-page .account-select-container .account:hover { border-color: #d8d2ff; }
body #order-standard_cart.checkout-page .account-select-container .account.active {
    border-color: var(--db-purple) !important;
    background: var(--db-purple-light) !important;
}
body #order-standard_cart.checkout-page .account-select-container label.radio-inline {
    display: flex !important;
    align-items: flex-start !important;
    gap: 11px !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 14px 16px !important;
    cursor: pointer !important;
    font-size: 13.5px !important;
    color: #33333d !important;
}
body #order-standard_cart.checkout-page .account-select-container input[type="radio"] {
    position: static !important;
    flex: 0 0 16px !important;
    width: 16px !important;
    height: 16px !important;
    margin: 2px 0 0 !important;
    accent-color: var(--db-purple) !important;
}
body #order-standard_cart.checkout-page .account-select-container .address strong {
    font-size: 14px !important;
    color: #1a1a2e !important;
}
body #order-standard_cart.checkout-page .account-select-container .address .small {
    display: block !important;
    margin-top: 4px !important;
    font-size: 12.5px !important;
    line-height: 1.65 !important;
    color: #8a8a95 !important;
}
body #order-standard_cart.checkout-page .account-select-container .label {
    display: inline-block !important;
    margin-left: 6px !important;
    padding: 2px 9px !important;
    border-radius: 20px !important;
    background: var(--db-purple) !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .3px !important;
    vertical-align: middle !important;
}
#order-standard_cart.checkout-page .account-select-container .label-default { background: #b9b9c6; }

/* ---- credit balance + gateways ---- */
body #order-standard_cart.checkout-page #totalDueToday {
    background: var(--db-purple-light) !important;
    border: none !important;
    border-radius: 12px !important;
    color: var(--db-purple-dark) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    padding: 14px 18px !important;
    margin: 0 0 16px !important;
}
#order-standard_cart.checkout-page #totalDueToday strong { font-weight: 800; }
body #order-standard_cart.checkout-page .apply-credit-container > p {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    margin: 0 0 12px !important;
    padding: 11px 15px !important;
    border-radius: 11px !important;
    background: #f3fbf7 !important;
    border: 1px solid #cfe9dd !important;
    color: #17805c !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}
body #order-standard_cart.checkout-page .apply-credit-container > p::before {
    content: "" !important;
    flex: 0 0 16px !important;
    width: 16px !important;
    height: 16px !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317805c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2.5'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E") no-repeat center/contain !important;
}
body #order-standard_cart.checkout-page .apply-credit-container label.radio {
    display: flex !important;
    align-items: flex-start !important;
    gap: 11px !important;
    margin: 0 0 10px !important;
    padding: 13px 16px !important;
    border: 1.5px solid var(--db-border) !important;
    border-radius: 12px !important;
    font-size: 13.5px !important;
    line-height: 1.65 !important;
    color: #33333d !important;
    cursor: pointer !important;
    transition: border-color .16s ease, background .16s ease !important;
}
#order-standard_cart.checkout-page .apply-credit-container label.radio:last-child { margin-bottom: 0; }
#order-standard_cart.checkout-page .apply-credit-container label.radio:hover { border-color: #d8d2ff; }
body #order-standard_cart.checkout-page .apply-credit-container label.radio:has(input:checked) {
    border-color: var(--db-purple) !important;
    background: var(--db-purple-light) !important;
}
body #order-standard_cart.checkout-page .apply-credit-container input[type="radio"] {
    position: static !important;
    flex: 0 0 16px !important;
    width: 16px !important;
    height: 16px !important;
    margin: 2px 0 0 !important;
    accent-color: var(--db-purple) !important;
}

body #order-standard_cart.checkout-page #paymentGatewaysContainer > p.small {
    margin: 0 0 12px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .6px !important;
    text-transform: uppercase !important;
    color: #9a9aa5 !important;
}
body #order-standard_cart.checkout-page #paymentGatewaysContainer .text-center {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    text-align: left !important;
}
body #order-standard_cart.checkout-page #paymentGatewaysContainer label.radio-inline {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex: 1 1 190px !important;
    margin: 0 !important;
    padding: 13px 16px !important;
    border: 1.5px solid var(--db-border) !important;
    border-radius: 12px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #33333d !important;
    cursor: pointer !important;
    transition: border-color .16s ease, background .16s ease !important;
}
#order-standard_cart.checkout-page #paymentGatewaysContainer label.radio-inline:hover { border-color: #d8d2ff; }
body #order-standard_cart.checkout-page #paymentGatewaysContainer label.radio-inline:has(input:checked) {
    border-color: var(--db-purple) !important;
    background: var(--db-purple-light) !important;
}
body #order-standard_cart.checkout-page #paymentGatewaysContainer input[type="radio"] {
    position: static !important;
    margin: 0 !important;
    width: 16px !important;
    height: 16px !important;
    accent-color: var(--db-purple) !important;
}

/* card entry block */
#order-standard_cart.checkout-page .cc-input-container { margin-top: 16px; }
#order-standard_cart.checkout-page .cc-input-container > ul { list-style: none; margin: 14px 0; padding: 0; }
body #order-standard_cart.checkout-page .cc-input-container > ul label.radio-inline {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #33333d !important;
}
body #order-standard_cart.checkout-page .cc-input-container > ul input[type="radio"] {
    position: static; margin: 0; width: 16px; height: 16px; accent-color: var(--db-purple) !important;
}
#order-standard_cart.checkout-page #newCardSaveSettings { margin-top: 14px; }
body #order-standard_cart.checkout-page .co-switch-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    line-height: 1.4 !important;
}
#order-standard_cart.checkout-page .co-switch-row label { margin: 0; font-size: 13px; color: #55555f; }

/* password strength */
#order-standard_cart.checkout-page .password-strength-meter { padding-top: 4px; }
body #order-standard_cart.checkout-page .password-strength-meter .progress {
    height: 6px !important;
    border-radius: 20px !important;
    background: #f0f0f5 !important;
    box-shadow: none !important;
    margin-bottom: 7px !important;
}
#order-standard_cart.checkout-page .password-strength-meter .progress-bar { border-radius: 20px; }
body #order-standard_cart.checkout-page .generate-password {
    border: 1px solid var(--db-border) !important;
    background: #fff !important;
    color: #55555f !important;
    border-radius: 10px !important;
    padding: 9px 15px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
}
body #order-standard_cart.checkout-page .generate-password:hover {
    border-color: var(--db-purple) !important;
    color: var(--db-purple) !important;
    background: var(--db-purple-light) !important;
}

/* ---- alerts ---- */
body #order-standard_cart.checkout-page .checkout-main-col .alert {
    border-radius: var(--db-radius) !important;
    border-width: 1px !important;
    padding: 15px 20px !important;
    font-size: 13.5px !important;
    line-height: 1.75 !important;
}
#order-standard_cart.checkout-page .checkout-error-feedback p { margin: 0 0 6px; font-weight: 600; }
#order-standard_cart.checkout-page .checkout-error-feedback ul { margin: 0; padding-left: 18px; }

/* ---- submit ---- */
body #order-standard_cart.checkout-page .co-submit-area {
    background: #fff !important;
    border: 1px solid var(--db-border) !important;
    border-radius: var(--db-radius) !important;
    padding: 20px 22px !important;
    text-align: center !important;
}
body #order-standard_cart.checkout-page .co-submit-area label.checkbox-inline {
    font-size: 13.5px !important;
    color: #55555f !important;
}
#order-standard_cart.checkout-page .co-submit-area input[type="checkbox"] { accent-color: var(--db-purple); }
body #order-standard_cart.checkout-page #btnCompleteOrder {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    width: 100% !important;
    background: var(--db-purple) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 12px !important;
    padding: 15px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    box-shadow: 0 10px 24px rgba(108,78,245,.24) !important;
    transition: background .16s ease, transform .16s ease, box-shadow .18s ease !important;
}
body #order-standard_cart.checkout-page #btnCompleteOrder:hover:not([disabled]) {
    background: var(--db-purple-dark) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 14px 28px rgba(108,78,245,.3) !important;
}
#order-standard_cart.checkout-page #btnCompleteOrder[disabled] { opacity: .5; box-shadow: none; }
#order-standard_cart.checkout-page #btnCompleteOrder i { font-size: 13px; }

/* ---- security notice ---- */
body #order-standard_cart.checkout-page .checkout-security-msg {
    display: block !important;
    position: relative !important;
    background: #fffaf0 !important;
    border: 1px solid #f5e2bd !important;
    border-radius: var(--db-radius) !important;
    padding: 15px 20px 15px 50px !important;
    margin: 16px 0 0 !important;
    color: #8a6a24 !important;
    font-size: 12.5px !important;
    line-height: 1.85 !important;
}
body #order-standard_cart.checkout-page .checkout-security-msg > i {
    position: absolute !important;
    left: 19px !important;
    top: 17px !important;
    font-size: 15px !important;
    color: #c9922c !important;
}
#order-standard_cart.checkout-page .checkout-security-msg strong { color: #6d5218; white-space: nowrap; }
#order-standard_cart.checkout-page .checkout-security-msg .clearfix { display: none; }

/* ---- summary column ---- */
body #order-standard_cart.checkout-page .checkout-order-summary {
    background: #fff !important;
    border: 1px solid var(--db-border) !important;
    border-radius: var(--db-radius) !important;
    padding: 24px 26px !important;
    box-shadow: 0 4px 20px rgba(20,20,50,.04) !important;
    position: sticky !important;
    top: 20px !important;
}
body #order-standard_cart.checkout-page .checkout-order-summary h2 {
    margin: 0 0 8px !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    color: #1a1a2e !important;
}
body #order-standard_cart.checkout-page .checkout-order-summary .clearfix {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 10px 0 !important;
    font-size: 13.5px !important;
    color: #55555f !important;
    border-bottom: 1px solid var(--db-border) !important;
}
#order-standard_cart.checkout-page .checkout-order-summary .clearfix::before,
#order-standard_cart.checkout-page .checkout-order-summary .clearfix::after { display: none; }
#order-standard_cart.checkout-page .checkout-order-summary .clearfix .pull-left,
#order-standard_cart.checkout-page .checkout-order-summary .clearfix .float-left { float: none; }
#order-standard_cart.checkout-page .checkout-order-summary .clearfix .pull-right,
body #order-standard_cart.checkout-page .checkout-order-summary .clearfix .float-right {
    float: none !important;
    font-weight: 700 !important;
    color: #1a1a2e !important;
    white-space: nowrap !important;
}
body #order-standard_cart.checkout-page .checkout-order-summary .total-due-today {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    background: var(--db-purple-light) !important;
    border-radius: 12px !important;
    padding: 16px 18px !important;
    margin: 16px 0 !important;
}
body #order-standard_cart.checkout-page .checkout-order-summary .total-due-today span:first-child {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #6b6b8a !important;
}
body #order-standard_cart.checkout-page .checkout-order-summary .total-due-today .amt {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: var(--db-purple-dark) !important;
    letter-spacing: -0.7px !important;
}
body #order-standard_cart.checkout-page .checkout-order-summary .btn-continue-shopping {
    display: block !important;
    text-align: center !important;
    margin-top: 14px !important;
    padding: 6px !important;
    color: #9a9aa5 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}
#order-standard_cart.checkout-page .checkout-order-summary .btn-continue-shopping:hover { color: var(--db-purple); }
@media (max-width: 991px) {
    #order-standard_cart.checkout-page .checkout-order-summary { position: static; margin-top: 20px; }
}

/* ============================================================
   CHECKOUT — neutralising the order-form stylesheet
   orderforms/standard_cart/css/all.min.css is loaded AFTER
   custom.css and carries rules at identical specificity:
     .prepend-icon .field-icon  -> 42x36 box, line-height 36px
     .field / .form-control     -> 1px #DDD, radius 3px, inline-block
     .form-control:focus        -> border #ddd, box-shadow none
   Those are what pushed every field icon out of alignment.
   ============================================================ */
body #order-standard_cart.checkout-page .prepend-icon .field-icon {
    top: 0 !important;
    bottom: 0 !important;
    left: 15px !important;
    width: 17px !important;
    height: auto !important;
    line-height: 1 !important;
    text-align: center !important;
    transition: color .15s ease !important;
}
body #order-standard_cart.checkout-page .prepend-icon .field-icon i,
body #order-standard_cart.checkout-page .field-icon i {
    position: static !important;
    font-size: 14px !important;
    line-height: 1 !important;
    color: inherit !important;
}
body #order-standard_cart.checkout-page .prepend-icon .field,
body #order-standard_cart.checkout-page .prepend-icon .form-control {
    padding-left: 44px !important;
}
body #order-standard_cart.checkout-page .field,
body #order-standard_cart.checkout-page .form-control,
body #order-standard_cart.checkout-page input.field,
body #order-standard_cart.checkout-page select.field,
body #order-standard_cart.checkout-page textarea.field {
    /* no `display` here: an !important display would beat the inline
       style="display:none" that StatesDropdown.js sets, resurrecting
       hidden fields. Specificity alone is enough to win over the
       order-form stylesheet. */
    width: 100% !important;
    border: 1.5px solid var(--db-border) !important;
    border-radius: 12px !important;
    color: #1a1a2e !important;
}
body #order-standard_cart.checkout-page .field:focus,
body #order-standard_cart.checkout-page .form-control:focus {
    border-color: var(--db-purple) !important;
    box-shadow: 0 0 0 3px rgba(108,78,245,.12) !important;
}
body #order-standard_cart.checkout-page textarea.field,
body #order-standard_cart.checkout-page textarea.form-control {
    height: auto !important;
    min-height: 112px !important;
}
body #order-standard_cart.checkout-page .field[disabled],
body #order-standard_cart.checkout-page .form-control[disabled],
body #order-standard_cart.checkout-page .field[readonly],
body #order-standard_cart.checkout-page .form-control[readonly] {
    background-color: #fbfbfd !important;
    color: #9a9aa5 !important;
}
/* the intl-tel-input wrapper stretches, but its internal geometry
   (flag width / input padding) is left entirely to the plugin */
body #order-standard_cart.checkout-page .intl-tel-input { width: 100% !important; }
body #order-standard_cart.checkout-page .intl-tel-input .flag-container { z-index: 5 !important; }

/* ============================================================
   CHECKOUT — state / country selects
   StatesDropdown.js swaps the free-text state input for a
   <select id="stateselect" class="custom-select"> at runtime and
   hides #inputState inline. The stock template ships two icon
   labels for that one cell (both with id inputStateIcon, which is
   invalid) and the script only hides the first — leaving a second
   icon floating above the injected select.
   ============================================================ */

/* Exactly one state icon may show. The first label is the one the
   script hides inline when it swaps in the select, so the alternate
   label — which carries no inline style — is the one to reveal. */
body #order-standard_cart.checkout-page .co-state-field .co-state-icon-alt { display: none; }
body #order-standard_cart.checkout-page .co-state-field:has(#stateselect) .co-state-icon-alt { display: flex; }

/* the injected select must match every other field exactly */
body #order-standard_cart.checkout-page select.custom-select,
body #order-standard_cart.checkout-page #stateselect,
body #order-standard_cart.checkout-page #inputCountry,
body #order-standard_cart.checkout-page #inputDCCountry,
body #order-standard_cart.checkout-page #inputDomainContact,
body #order-standard_cart.checkout-page #inputSecurityQId,
body #order-standard_cart.checkout-page select.field,
body #order-standard_cart.checkout-page select.form-control {
    width: 100% !important;
    height: 46px !important;
    padding: 0 42px 0 15px !important;
    border: 1.5px solid var(--db-border) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1a1a2e !important;
    line-height: 44px !important;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c4ef5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 15px center !important;
    background-size: 15px 15px !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}
/* selects that sit inside an icon wrapper need room on the left */
body #order-standard_cart.checkout-page .prepend-icon select.custom-select,
body #order-standard_cart.checkout-page .prepend-icon select.field,
body #order-standard_cart.checkout-page .prepend-icon select.form-control,
body #order-standard_cart.checkout-page .prepend-icon #stateselect,
body #order-standard_cart.checkout-page .prepend-icon #inputCountry,
body #order-standard_cart.checkout-page .prepend-icon #inputDCCountry {
    padding-left: 44px !important;
}
body #order-standard_cart.checkout-page select.custom-select:focus,
body #order-standard_cart.checkout-page select.field:focus,
body #order-standard_cart.checkout-page select.form-control:focus {
    border-color: var(--db-purple) !important;
    box-shadow: 0 0 0 3px rgba(108,78,245,.12) !important;
}
/* the browser's own arrow, hidden for Edge/IE */
body #order-standard_cart.checkout-page select::-ms-expand { display: none !important; }

/* the standalone registrant-contact select has no icon wrapper */
body #order-standard_cart.checkout-page #inputDomainContact { padding-left: 15px !important; }

/* keep every control in a cell the same width, whichever is showing */
body #order-standard_cart.checkout-page .co-state-field .field,
body #order-standard_cart.checkout-page .co-state-field select {
    width: 100% !important;
    margin: 0 !important;
}

/* ============================================================
   JS-HIDDEN ELEMENTS — hands off
   WHMCS scripts hide and show fields by writing style="display:none"
   directly on the element. A stylesheet declaration marked
   !important outranks a non-important inline style, so any blanket
   `display: … !important` in this file silently resurrects things
   the scripts meant to hide (this is what put a stray text input
   above the state dropdown). This rule guarantees inline-hidden
   elements stay hidden no matter what else is declared.
   ============================================================ */
body #order-standard_cart.checkout-page [style*="display: none"],
body #order-standard_cart.checkout-page [style*="display:none"] {
    display: none !important;
}

/* ============================================================
   PHONE FIELD (intl-tel-input)
   The plugin wraps the input in .iti / .intl-tel-input and injects
   a flag button plus a dropdown list. Unstyled, the flag sat on top
   of the number and the country list rendered clipped behind the
   card, because .co-card uses overflow:hidden.
   ============================================================ */
/* the card must not clip the country list */
body #order-standard_cart.checkout-page .co-card:has(.iti) ,
body #order-standard_cart.checkout-page .co-card:has(.intl-tel-input) { overflow: visible; }
body #order-standard_cart.checkout-page .co-card-body:has(.iti),
body #order-standard_cart.checkout-page .co-card-body:has(.intl-tel-input) { overflow: visible; }

body #order-standard_cart.checkout-page .iti,
body #order-standard_cart.checkout-page .intl-tel-input {
    display: block !important;
    width: 100% !important;
}
/* the flag sits in its own zone; the number starts clear of it */
/* NOTE: the v17 `iti__*` class names are deliberately NOT styled.
   This install ships the older intl-tel-input build (`selected-flag`,
   `country-list`, `iti-flag`). The v17 rules that used to sit here were
   forcing display:flex and a custom width onto a .selected-flag the
   plugin lays out as a table at a fixed 70px — that mismatch is what
   put the dial code on top of the number. The rules for the older
   build live further up in this file.
   ============================================================ */

/* the plugin's own .flag-box keeps its inline layout */
body #order-standard_cart.checkout-page .intl-tel-input .country-list .flag-box {
    vertical-align: middle !important;
}

/* ============================================================
   CHECKOUT — payment details block
   The order-form stylesheet paints .cc-input-container #f3f3f3 with a
   #d9d9d9 border and gives .cc-input-container i a fixed 28px box,
   which is what left the grey slab and the drifting field icons.
   ============================================================ */
body #order-standard_cart.checkout-page .apply-credit-container {
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 18px !important;
}
body #order-standard_cart.checkout-page #paymentGatewaysContainer {
    margin: 0 0 16px !important;
    padding: 0 !important;
    background: transparent !important;
}

body #order-standard_cart.checkout-page .cc-input-container {
    background: #fbfbfd !important;
    border: 1px solid var(--db-border) !important;
    border-radius: var(--db-radius) !important;
    padding: 18px 20px !important;
    margin: 0 !important;
}
/* the blanket icon sizing in the order form knocks the field icons askew */
body #order-standard_cart.checkout-page .cc-input-container i {
    padding: 0 !important;
    width: auto !important;
    text-align: inherit !important;
}
body #order-standard_cart.checkout-page .cc-input-container .prepend-icon .field-icon {
    width: 17px !important;
    text-align: center !important;
}
body #order-standard_cart.checkout-page .cc-input-container .form-group {
    margin: 0 !important;
}
body #order-standard_cart.checkout-page .cc-input-container .co-row + ul,
body #order-standard_cart.checkout-page .cc-input-container > ul {
    margin: 14px 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
body #order-standard_cart.checkout-page .cc-input-container > ul li { padding: 0 !important; }
body #order-standard_cart.checkout-page .cc-input-container .radio-inline {
    margin: 0 !important;
    padding: 0 !important;
}
body #order-standard_cart.checkout-page #existingCardInfo { margin-bottom: 4px !important; }
body #order-standard_cart.checkout-page #newCardInfo { margin-bottom: 0 !important; }
body #order-standard_cart.checkout-page #newCardSaveSettings { margin-top: 14px !important; }

/* saved cards grid */
body #order-standard_cart.checkout-page .existing-cc-grid,
body #order-standard_cart.checkout-page .cc-input-container .existing-cc-grid {
    display: block !important;
    font-size: 13.5px !important;
    color: #33333d !important;
    font-weight: 400 !important;
}
body #order-standard_cart.checkout-page .paymethod-info {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 8px !important;
    padding: 12px 15px !important;
    border: 1.5px solid var(--db-border) !important;
    border-radius: 12px !important;
    background: #fff !important;
    cursor: pointer !important;
}
body #order-standard_cart.checkout-page .paymethod-info:hover { border-color: #d8d2ff !important; }
body #order-standard_cart.checkout-page .paymethod-info:has(input:checked) {
    border-color: var(--db-purple) !important;
    background: var(--db-purple-light) !important;
}
body #order-standard_cart.checkout-page .paymethod-info label {
    margin: 0 !important;
    font-weight: 500 !important;
    cursor: pointer !important;
}

/* card-number field keeps room for the card-brand artwork on the right */
body #order-standard_cart.checkout-page .cc-number-field {
    padding-right: 60px !important;
    background-position: right 12px center !important;
}

/* the CVV help button */
body #order-standard_cart.checkout-page .cc-input-container .input-group-btn .btn {
    height: 46px !important;
    border: 1.5px solid var(--db-border) !important;
    border-left: none !important;
    border-radius: 0 12px 12px 0 !important;
    background: #fff !important;
    color: #8a8a95 !important;
}

/* the save-card toggle row */
body #order-standard_cart.checkout-page .co-switch-row .bootstrap-switch {
    border-radius: 20px !important;
    border-color: var(--db-border) !important;
}

/* ============================================================
   iCHECK CONTROLS
   The theme runs iCheck, which hides the real input and paints a
   <div class="iradio_square-blue"> sprite in its place. That sprite
   is a blue PNG, so `accent-color` on the input has no effect and
   every radio and checkbox read as stock blue. These rules drop the
   sprite and draw the control instead, so state comes from the
   .checked class iCheck maintains.
   ============================================================ */
.icheckbox_square-blue,
.iradio_square-blue {
    position: relative !important;
    flex: 0 0 18px;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    background: #fff !important;
    border: 1.5px solid #d5d5e0 !important;
    transition: border-color .15s ease, background .15s ease;
}
.iradio_square-blue { border-radius: 50% !important; }
.icheckbox_square-blue { border-radius: 5px !important; }

.icheckbox_square-blue:hover,
.iradio_square-blue:hover,
.icheckbox_square-blue.hover,
.iradio_square-blue.hover {
    border-color: var(--db-purple) !important;
    background: #fff !important;
}

.icheckbox_square-blue.checked,
.iradio_square-blue.checked {
    background: var(--db-purple) !important;
    border-color: var(--db-purple) !important;
}
/* the mark */
.iradio_square-blue.checked::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    margin: -3px 0 0 -3px;
    border-radius: 50%;
    background: #fff;
}
.icheckbox_square-blue.checked::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 5px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(43deg);
}

.icheckbox_square-blue.disabled,
.iradio_square-blue.disabled,
.icheckbox_square-blue.checked.disabled,
.iradio_square-blue.checked.disabled {
    opacity: .45 !important;
    cursor: default !important;
}

/* iCheck wraps each control in a label with a hard-coded margin that
   assumed the 22px sprite */
.checkbox-inline.icheck-label,
.radio-inline.icheck-label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
}
.icheck-label .icheckbox_square-blue,
.icheck-label .iradio_square-blue {
    margin: 1px 0 0 !important;
}

/* inside the checkout the control sits in a selectable card row */
/* Bootstrap's .radio/.radio-inline reserve 20px on the left for the
   native control. iCheck replaces that control with an element in the
   normal flow, so the reservation is dead space — but zeroing the
   padding outright (as an earlier pass did) pinned the dot against the
   card border. These rows carry their own symmetric padding instead. */
body #order-standard_cart.checkout-page .apply-credit-container label.radio,
body #order-standard_cart.checkout-page .account-select-container label.radio-inline,
body #order-standard_cart.checkout-page #paymentGatewaysContainer label.radio-inline,
body #order-standard_cart.checkout-page .paymethod-info {
    padding: 14px 18px !important;
}
body #order-standard_cart.checkout-page .cc-input-container > ul label.radio-inline {
    padding: 0 !important;
}
body #order-standard_cart.checkout-page .iradio_square-blue,
body #order-standard_cart.checkout-page .icheckbox_square-blue {
    margin-top: 1px !important;
}
/* the &nbsp; iCheck leaves between control and text */
body #order-standard_cart.checkout-page .cc-input-container > ul label.radio-inline {
    gap: 4px !important;
}

/* ============================================================
   TEXT SELECTION
   The browser default is a hard blue that clashes with the brand
   palette and made selected copy look mis-rendered.
   ============================================================ */
::selection {
    background: var(--db-purple-light);
    color: #1a1a2e;
}
::-moz-selection {
    background: var(--db-purple-light);
    color: #1a1a2e;
}
/* One rule, everywhere. An earlier pass added inverted white-on-purple
   variants for "purple surfaces", but wrote them as descendant
   selectors — `section#main-menu ::selection` reached every dropdown
   under the menu bar, and `.total-due-today ::selection` covered a
   block that is light purple, not solid. Selected text turned white on
   near-white and vanished. Since the selection paints its own tinted
   background over whatever is behind it, dark text on that tint stays
   legible on light and purple surfaces alike. */

/* ============================================================
   CARD NUMBER FIELD — brand artwork
   WHMCS swaps a background image on .cc-number-field as it detects
   the card type. The stock artwork is ~51px wide and sat heavy
   against the field's right edge, reading as though it had escaped
   the input. Scaled down it works as a brand chip instead.
   ============================================================ */
body #order-standard_cart.checkout-page .cc-number-field {
    padding-right: 58px !important;
    background-size: 34px auto !important;
    background-position: right 14px center !important;
    background-repeat: no-repeat !important;
}
/* the detected-brand variants share the same geometry */
body #order-standard_cart.checkout-page .cc-number-field.visa,
body #order-standard_cart.checkout-page .cc-number-field.mastercard,
body #order-standard_cart.checkout-page .cc-number-field.amex,
body #order-standard_cart.checkout-page .cc-number-field.discover,
body #order-standard_cart.checkout-page .cc-number-field.dinersclub,
body #order-standard_cart.checkout-page .cc-number-field.jcb,
body #order-standard_cart.checkout-page .cc-number-field.unionpay,
body #order-standard_cart.checkout-page .cc-number-field.maestro,
body #order-standard_cart.checkout-page .cc-number-field.dankort,
body #order-standard_cart.checkout-page .cc-number-field.forbrugsforeningen {
    background-size: 34px auto !important;
    background-position: right 14px center !important;
}

/* ============================================================
   SELECTABLE ROWS — a consistent selected state
   ============================================================ */
body #order-standard_cart.checkout-page .apply-credit-container label.radio,
body #order-standard_cart.checkout-page #paymentGatewaysContainer label.radio-inline,
body #order-standard_cart.checkout-page .paymethod-info,
body #order-standard_cart.checkout-page .account-select-container .account {
    position: relative !important;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease !important;
}
body #order-standard_cart.checkout-page .apply-credit-container label.radio:has(input:checked),
body #order-standard_cart.checkout-page #paymentGatewaysContainer label.radio-inline:has(input:checked),
body #order-standard_cart.checkout-page .paymethod-info:has(input:checked),
body #order-standard_cart.checkout-page .account-select-container .account.active {
    border-color: var(--db-purple) !important;
    background: var(--db-purple-light) !important;
    box-shadow: 0 0 0 3px rgba(108,78,245,.10) !important;
}
/* the selected row's copy should carry the same weight as its state */
body #order-standard_cart.checkout-page .apply-credit-container label.radio:has(input:checked),
body #order-standard_cart.checkout-page #paymentGatewaysContainer label.radio-inline:has(input:checked) {
    color: #1a1a2e !important;
    font-weight: 600 !important;
}
body #order-standard_cart.checkout-page .apply-credit-container label.radio:not(:has(input:checked)),
body #order-standard_cart.checkout-page #paymentGatewaysContainer label.radio-inline:not(:has(input:checked)) {
    color: #55555f !important;
    font-weight: 500 !important;
}

/* the new-card radio row reads as a section divider, not a card */
body #order-standard_cart.checkout-page .cc-input-container > ul {
    border-top: 1px solid var(--db-border) !important;
    padding-top: 14px !important;
    margin: 4px 0 14px !important;
}
body #order-standard_cart.checkout-page .cc-input-container > ul:first-child {
    border-top: none !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}
body #order-standard_cart.checkout-page .cc-input-container > ul label.radio-inline {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1a1a2e !important;
}

/* ============================================================
   CVV HELP BUTTON (.input-group)
   The order-form stylesheet lays .input-group out as a table and
   bootstrap gives .input-group-btn a 1% width; the hardening pass
   dropped the rules that reconciled that with the 46px rounded
   fields, so the "?" ended up as bare text floating beside the box.
   ============================================================ */
body #order-standard_cart.checkout-page .input-group {
    display: flex !important;
    width: 100% !important;
    border-collapse: separate !important;
}
body #order-standard_cart.checkout-page .input-group > .form-control,
body #order-standard_cart.checkout-page .input-group > .field {
    flex: 1 1 auto !important;
    width: 1% !important;
    float: none !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: none !important;
}
body #order-standard_cart.checkout-page .input-group-btn,
body #order-standard_cart.checkout-page .input-group-append {
    display: flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    font-size: inherit !important;
}
body #order-standard_cart.checkout-page .input-group-btn > .btn,
body #order-standard_cart.checkout-page .input-group-append > .btn,
body #order-standard_cart.checkout-page .cc-input-container .input-group-btn .btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 46px !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1.5px solid var(--db-border) !important;
    border-left: 1px solid var(--db-border) !important;
    border-radius: 0 12px 12px 0 !important;
    background: #fbfbfd !important;
    color: #9a9aa5 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    box-shadow: none !important;
    transition: background .15s ease, color .15s ease !important;
}
body #order-standard_cart.checkout-page .input-group-btn > .btn:hover,
body #order-standard_cart.checkout-page .cc-input-container .input-group-btn .btn:hover {
    background: var(--db-purple-light) !important;
    color: var(--db-purple) !important;
}
/* focus on the field should read across the whole group */
body #order-standard_cart.checkout-page .input-group:focus-within > .form-control,
body #order-standard_cart.checkout-page .input-group:focus-within > .field {
    border-color: var(--db-purple) !important;
    box-shadow: none !important;
}
body #order-standard_cart.checkout-page .input-group:focus-within .input-group-btn > .btn {
    border-color: var(--db-purple) !important;
    border-left-color: var(--db-purple) !important;
}
body #order-standard_cart.checkout-page .input-group:focus-within {
    border-radius: 12px !important;
    box-shadow: 0 0 0 3px rgba(108,78,245,.12) !important;
}

/* the popover the "?" opens */
body .popover { border-radius: 14px !important; border-color: var(--db-border) !important; }
body .popover .popover-content { padding: 12px !important; }
body .popover img { max-width: 100% !important; border-radius: 8px !important; }

/* ============================================================
   iCHECK CONTROL — final sizing against the row padding
   ============================================================ */
body #order-standard_cart.checkout-page .apply-credit-container .iradio_square-blue,
body #order-standard_cart.checkout-page .account-select-container .iradio_square-blue,
body #order-standard_cart.checkout-page #paymentGatewaysContainer .iradio_square-blue,
body #order-standard_cart.checkout-page .paymethod-info .iradio_square-blue,
body #order-standard_cart.checkout-page .cc-input-container .iradio_square-blue {
    flex: 0 0 18px !important;
    width: 18px !important;
    height: 18px !important;
    margin: 1px 0 0 !important;
}

/* ============================================================
   NETWORK STATUS (serverstatus.tpl)
   Markup rebuilt in the tpl — .ns-* classes.
   ============================================================ */
.ns-page { margin-bottom: 30px; }
.ns-issues { margin-bottom: 20px; }

/* ---- issue card ---- */
.ns-issue {
    position: relative;
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    margin-bottom: 16px;
    overflow: hidden;
}
.ns-issue::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #b9b9c6;
}
.ns-issue-head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 15px 22px;
    background: #fbfbfd;
    border-bottom: 1px solid var(--db-border);
}
.ns-issue-dot {
    flex: 0 0 9px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #b9b9c6;
}
.ns-issue-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 15px;
    font-weight: 700;
    color: #1a1a2e;
    letter-spacing: -0.2px;
}
.ns-issue-state {
    flex: 0 0 auto;
    padding: 4px 12px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid var(--db-border);
    font-size: 11.5px;
    font-weight: 700;
    color: #55555f;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.ns-issue-body { padding: 18px 22px; }

/* priority accents */
.ns-priority-critical::before { background: #e0463e; }
.ns-priority-critical .ns-issue-dot { background: #e0463e; }
.ns-priority-critical .ns-issue-head { background: #fdeceb; border-bottom-color: #f7d6d3; }
.ns-priority-critical .ns-issue-state { border-color: #f0bdb9; color: #b1352f; }

.ns-priority-high::before { background: #e08a1e; }
.ns-priority-high .ns-issue-dot { background: #e08a1e; }
.ns-priority-high .ns-issue-head { background: #fff6ea; border-bottom-color: #f7e2c4; }
.ns-priority-high .ns-issue-state { border-color: #f0d3a6; color: #a3660f; }

.ns-priority-medium::before { background: var(--db-purple); }
.ns-priority-medium .ns-issue-dot { background: var(--db-purple); }
.ns-priority-medium .ns-issue-head { background: var(--db-purple-light); border-bottom-color: rgba(108,78,245,.16); }
.ns-priority-medium .ns-issue-state { border-color: rgba(108,78,245,.24); color: var(--db-purple-dark); }

.ns-priority-low::before { background: #17c690; }
.ns-priority-low .ns-issue-dot { background: #17c690; }
.ns-priority-low .ns-issue-head { background: #eafaf4; border-bottom-color: #cdeee1; }
.ns-priority-low .ns-issue-state { border-color: #b3e6d2; color: #12876a; }

/* an issue that touches this customer's own services */
.ns-issue.is-affecting-you .ns-issue-title::after {
    content: "affects your services";
    display: inline-block;
    margin-left: 10px;
    padding: 3px 9px;
    border-radius: 6px;
    background: #fdeceb;
    color: #c33c34;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    vertical-align: middle;
}

/* ---- issue detail ---- */
.ns-issue-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}
.ns-tag {
    padding: 5px 12px;
    border-radius: 8px;
    background: #f6f6fa;
    font-size: 12px;
    color: #8a8a95;
}
.ns-tag strong { color: #1a1a2e; font-weight: 700; }
.ns-tag-priority { background: var(--db-purple-light); color: #6b6b8a; }
.ns-tag-priority strong { color: var(--db-purple-dark); }

.ns-issue-desc {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.8;
    color: #33333d;
}
.ns-issue-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    padding-top: 14px;
    border-top: 1px dashed var(--db-border);
}
.ns-meta-label {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #9a9aa5;
    margin-bottom: 3px;
}
.ns-meta-value { font-size: 13px; font-weight: 600; color: #33333d; }

/* ---- all clear ---- */
.ns-clear {
    background: #fff;
    border: 1px solid #cdeee1;
    border-radius: var(--db-radius);
    padding: 46px 24px;
    text-align: center;
}
.ns-clear-icon {
    width: 62px;
    height: 62px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #eafaf4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317c690' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E") no-repeat center/26px 26px;
}
.ns-clear p {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #12876a;
}

/* ---- pager ---- */
.ns-pager { display: flex; gap: 10px; margin-bottom: 26px; }
.ns-pager-btn {
    padding: 9px 18px;
    border: 1px solid var(--db-border);
    border-radius: 10px;
    background: #fff;
    color: #55555f !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    transition: all .15s ease;
}
.ns-pager-btn:hover {
    border-color: var(--db-purple);
    color: var(--db-purple) !important;
    background: var(--db-purple-light);
}
.ns-pager-btn.disabled {
    opacity: .45;
    pointer-events: none;
}

/* ---- server table ---- */
.ns-servers {
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    overflow: hidden;
}
.ns-servers-head {
    padding: 20px 22px;
    border-bottom: 1px solid var(--db-border);
}
.ns-servers-head h3 {
    margin: 0 0 5px;
    font-size: 17px;
    font-weight: 700;
    color: #1a1a2e;
}
.ns-servers-head p {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: #8a8a95;
}
.ns-servers .table-responsive { border: none; margin: 0; }

.ns-table { margin: 0 !important; }
.ns-table > thead > tr > th {
    padding: 12px 16px !important;
    background: #fbfbfd !important;
    border: none !important;
    border-bottom: 1px solid var(--db-border) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #9a9aa5 !important;
    text-transform: uppercase;
    letter-spacing: .5px;
    white-space: nowrap;
}
.ns-table > tbody > tr > td {
    padding: 14px 16px !important;
    border: none !important;
    border-bottom: 1px solid var(--db-border) !important;
    vertical-align: middle !important;
    font-size: 13.5px !important;
    color: #33333d !important;
    background: #fff !important;
}
.ns-table > tbody > tr:last-child > td { border-bottom: none !important; }
.ns-table > tbody > tr:hover > td { background: #fbfaff !important; }

.ns-server-name {
    display: flex;
    align-items: center;
    gap: 11px;
    font-weight: 600 !important;
    color: #1a1a2e !important;
    white-space: nowrap;
}
.ns-server-icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--db-purple-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c4ef5' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='3' width='19' height='7' rx='2'/%3E%3Crect x='2.5' y='14' width='19' height='7' rx='2'/%3E%3Ccircle cx='6.6' cy='6.5' r='1'/%3E%3Ccircle cx='6.6' cy='17.5' r='1'/%3E%3C/svg%3E") no-repeat center/17px 17px;
}

/* port checks: the script drops a check or cross icon into these cells */
.ns-port .fa-check-circle,
.ns-port .fa-check,
.ns-port .text-success { color: #17c690 !important; font-size: 16px !important; }
.ns-port .fa-times-circle,
.ns-port .fa-times,
.ns-port .text-danger { color: #e0463e !important; font-size: 16px !important; }
.ns-port .fa-spinner,
.ns-stat .fa-spinner { color: #c9c9d4 !important; font-size: 13px !important; }
.ns-stat { font-weight: 600 !important; color: #1a1a2e !important; white-space: nowrap; }

.ns-phpinfo {
    display: inline-block;
    padding: 5px 13px;
    border-radius: 8px;
    background: var(--db-purple-light);
    color: var(--db-purple) !important;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none !important;
    transition: all .15s ease;
}
.ns-phpinfo:hover { background: var(--db-purple); color: #fff !important; }

.ns-empty {
    padding: 44px 20px !important;
    text-align: center;
    color: #9a9aa5 !important;
}

@media (max-width: 767px) {
    .ns-issue-head { flex-wrap: wrap; }
    .ns-issue-state { order: 3; }
    .ns-issue-meta { gap: 16px; }
    .ns-issue.is-affecting-you .ns-issue-title::after { display: block; margin: 6px 0 0; }
}

/* ============================================================
   DROPDOWN ITEMS — no focus artefacts
   Bootstrap ships `a:focus { outline: 5px auto -webkit-focus-ring-color;
   outline-offset: -2px }`. Drawn inset on a full-width menu item with a
   tinted background, the ring is mostly hidden behind that background
   and only its corners survive — the dark brackets around the item.
   The earlier focus reset covered plain links but not the menu items,
   which the theme selects with a more specific chain.
   ============================================================ */
.dropdown-menu > li > a,
.dropdown-menu .dropdown-item,
ul.top-nav .dropdown-menu > li > a,
.navbar-main .dropdown-menu > li > a,
#main-menu .dropdown-menu > li > a {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
}
.dropdown-menu > li > a:focus,
.dropdown-menu > li > a:active,
.dropdown-menu > li > a:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item:active,
.navbar-main .dropdown-menu > li > a:focus,
.navbar-main .dropdown-menu > li > a:active,
#main-menu .dropdown-menu > li > a:focus,
#main-menu .dropdown-menu > li > a:active,
ul.top-nav .dropdown-menu > li > a:focus,
ul.top-nav .dropdown-menu > li > a:active {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
}
/* keyboard users still get a marker, drawn inside so it can't be clipped */
.dropdown-menu > li > a:focus-visible,
.dropdown-menu .dropdown-item:focus-visible {
    outline: none !important;
    box-shadow: inset 3px 0 0 var(--db-purple) !important;
}
/* the toggle itself */
.dropdown-toggle:focus,
.dropdown-toggle:active,
.open > .dropdown-toggle,
.navbar-main .dropdown-toggle:focus,
#main-menu .dropdown-toggle:focus {
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
}

/* the same artefact can appear on any focused element with a tinted
   background, so the inset variant of the ring is retired site-wide */
a:focus,
button:focus,
.btn:focus,
.list-group-item:focus,
li > a:focus {
    outline-offset: 0 !important;
}

/* ============================================================
   CHECKOUT PHONE FIELD — same treatment as the registration form
   The plugin renders .selected-flag as a 70px display:table cell and
   offsets the dial code with padding-left:28px, which is what pushed
   "+1" hard against the number. Its .country-list also carries
   z-index:2, so later cards in the flow painted over it. Both are
   rebuilt here exactly as they were for #registration.
   ============================================================ */

/* the wrapper is the field: the input inside it goes transparent */
body #order-standard_cart.checkout-page .intl-tel-input {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    width: 100% !important;
    height: 46px !important;
    background: #fff !important;
    border: 1.5px solid var(--db-border) !important;
    border-radius: 12px !important;
    padding: 0 !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
}
body #order-standard_cart.checkout-page .intl-tel-input:focus-within {
    border-color: var(--db-purple) !important;
    box-shadow: 0 0 0 3px rgba(108,78,245,.12) !important;
}
body #order-standard_cart.checkout-page .intl-tel-input input,
body #order-standard_cart.checkout-page .intl-tel-input input[type="tel"],
body #order-standard_cart.checkout-page .intl-tel-input input.field {
    flex: 1 1 auto !important;
    width: 1% !important;
    min-width: 0 !important;
    height: 44px !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 12px 12px 0 !important;
    /* the plugin's 76px inset assumed an absolutely positioned flag.
       The flag is a flex sibling now, so the input only needs its own
       breathing room — without this the number butts against the
       divider and reads as though it has escaped the field. */
    padding: 0 15px !important;
}
body #order-standard_cart.checkout-page .intl-tel-input input:focus {
    border: none !important;
    box-shadow: none !important;
}

/* flag block: in the flow, sized by its content, with a real divider */
body #order-standard_cart.checkout-page .intl-tel-input .flag-container {
    position: static !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
    z-index: 4 !important;
}
body #order-standard_cart.checkout-page .intl-tel-input .selected-flag {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: auto !important;
    height: 44px !important;
    padding: 0 11px 0 14px !important;
    background: transparent !important;
    border-right: 1.5px solid var(--db-border) !important;
    border-radius: 12px 0 0 12px !important;
}
body #order-standard_cart.checkout-page .intl-tel-input .flag-container:hover .selected-flag,
body #order-standard_cart.checkout-page .intl-tel-input.allow-dropdown .flag-container:hover .selected-flag {
    background: var(--db-purple-light) !important;
}
/* the flag sprite is absolutely positioned by the plugin */
body #order-standard_cart.checkout-page .intl-tel-input .selected-flag .iti-flag {
    position: static !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
}
/* the dial code is a table-cell with a 28px inset by default */
body #order-standard_cart.checkout-page .intl-tel-input .selected-dial-code {
    display: block !important;
    padding: 0 !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #55555f !important;
    white-space: nowrap !important;
}
body #order-standard_cart.checkout-page .intl-tel-input .selected-flag .iti-arrow,
body #order-standard_cart.checkout-page .intl-tel-input .selected-flag .arrow {
    position: static !important;
    flex: 0 0 auto !important;
    margin: 0 0 0 2px !important;
    top: auto !important;
    right: auto !important;
}

/* the country list must clear everything below it */
body #order-standard_cart.checkout-page .intl-tel-input .country-list {
    z-index: 1080 !important;
    top: 100% !important;
    bottom: auto !important;
    left: 0 !important;
    margin: 6px 0 0 !important;
}
body #order-standard_cart.checkout-page .intl-tel-input .country-list.dropup {
    top: auto !important;
    bottom: 100% !important;
    margin: 0 0 6px !important;
}
/* …and the cell holding it has to outrank the rows that follow */
body #order-standard_cart.checkout-page .co-row .form-group:focus-within,
body #order-standard_cart.checkout-page .co-col-6:has(.intl-tel-input),
body #order-standard_cart.checkout-page .co-col-12:has(.intl-tel-input),
body #order-standard_cart.checkout-page .form-group:has(.intl-tel-input) {
    position: relative !important;
    z-index: 60 !important;
}
body #order-standard_cart.checkout-page .co-row:has(.intl-tel-input) {
    position: relative !important;
    z-index: 60 !important;
}
/* no ancestor may clip it */
body #order-standard_cart.checkout-page .co-card:has(.intl-tel-input),
body #order-standard_cart.checkout-page .co-card-body:has(.intl-tel-input),
body #order-standard_cart.checkout-page .co-card:has(.intl-tel-input) .co-card-body {
    overflow: visible !important;
}

/* with overflow unlocked, the card's own corners have to be drawn on
   its header and last child instead of clipped by the card */
body #order-standard_cart.checkout-page .co-card:has(.intl-tel-input) > .co-card-head {
    border-radius: var(--db-radius) var(--db-radius) 0 0 !important;
}
body #order-standard_cart.checkout-page .co-card:has(.intl-tel-input) > .co-card-body:last-child {
    border-radius: 0 0 var(--db-radius) var(--db-radius) !important;
}

/* the country list is a plain <ul>: keep its rows readable and stop
   long localised names from stretching it past the field */
body #order-standard_cart.checkout-page .intl-tel-input .country-list .country-name {
    margin-right: 6px !important;
}
body #order-standard_cart.checkout-page .intl-tel-input .country-list .flag-box {
    margin-right: 8px !important;
}
body #order-standard_cart.checkout-page .intl-tel-input .country-list .dial-code {
    color: #9a9aa5 !important;
}
body #order-standard_cart.checkout-page .intl-tel-input .country-list .country.highlight,
body #order-standard_cart.checkout-page .intl-tel-input .country-list .country:hover {
    background: var(--db-purple-light) !important;
    color: var(--db-purple) !important;
}
body #order-standard_cart.checkout-page .intl-tel-input .country-list .country.highlight .dial-code,
body #order-standard_cart.checkout-page .intl-tel-input .country-list .country:hover .dial-code {
    color: var(--db-purple) !important;
}

/* ============================================================
   DROPDOWN FOCUS RING — exhaustive reset
   Chrome draws `outline: 5px auto -webkit-focus-ring-color` with
   bootstrap's `outline-offset: -2px`. A negative offset shrinks the
   ring's corner radius faster than the box's, so the ring's square
   corners poke out past the item's 8px rounded background — the dark
   brackets. Rather than chase which element takes focus, every
   descendant of a dropdown is covered here, in every state.
   ============================================================ */
.dropdown-menu,
.dropdown-menu *,
.dropdown-menu li,
.dropdown-menu li > a,
.dropdown-menu .dropdown-item,
.dropdown-menu li > a > *,
.dropdown,
.dropdown > a,
.btn-group.open > .dropdown-toggle {
    outline: none !important;
    outline-width: 0 !important;
    outline-offset: 0 !important;
    -webkit-tap-highlight-color: transparent !important;
}
.dropdown-menu:focus,
.dropdown-menu *:focus,
.dropdown-menu li:focus,
.dropdown-menu li > a:focus,
.dropdown-menu li > a:active,
.dropdown-menu li > a:focus:active,
.dropdown-menu li > a:focus-visible,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item:active,
.dropdown-menu .dropdown-item:focus-visible,
.dropdown > a:focus,
.dropdown > a:active,
.dropdown-toggle:focus,
.dropdown-toggle:active,
.dropdown-toggle:focus-visible,
.open > .dropdown-toggle:focus {
    outline: none !important;
    outline-width: 0 !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
    text-decoration: none !important;
}
/* keyboard navigation still needs a marker — an inset bar, which has no
   corners to escape the rounded background */
.dropdown-menu li > a:focus-visible,
.dropdown-menu .dropdown-item:focus-visible {
    box-shadow: inset 3px 0 0 var(--db-purple) !important;
    background-color: var(--db-purple-light) !important;
}

/* the same negative-offset ring appears on any rounded, tinted target,
   so the offset is neutralised globally and the visible ring is the
   purple one defined earlier */
*:focus {
    outline-offset: 0 !important;
}

/* ============================================================
   CONFIGURE PRODUCT — Continue button overlap
   .order-summary is sticky, which suits the cart and checkout pages
   where the card is the last thing in its column. On the configure
   page the Continue button follows the card inside the same
   #orderSummary wrapper, so on scroll the sticky card slid down over
   it. That column also carries #scrollingPanelContainer, which WHMCS
   pins with its own script — two competing mechanisms on one element.
   The card gives up sticky inside that container; the wrapper takes
   it instead, so the button travels with the card.
   ============================================================ */
body #order-standard_cart.checkout-page #scrollingPanelContainer .order-summary,
body #order-standard_cart.checkout-page #orderSummary .order-summary {
    position: static !important;
    top: auto !important;
}
body #order-standard_cart.checkout-page #scrollingPanelContainer #orderSummary {
    position: sticky;
    top: 20px;
}
/* the button is a sibling of the card, not part of it */
body #order-standard_cart.checkout-page #orderSummary > .text-center {
    margin-top: 16px !important;
    padding: 0 !important;
    position: relative;
    z-index: 2;
}
body #order-standard_cart.checkout-page #orderSummary .order-summary {
    margin-bottom: 0 !important;
}

@media (max-width: 991px) {
    body #order-standard_cart.checkout-page #scrollingPanelContainer #orderSummary {
        position: static;
    }
}

/* ============================================================
   CONTACT US (contact.tpl)
   Markup rebuilt in the tpl — .ct-* classes. Every icon is an inline
   SVG so nothing depends on which FontAwesome build is installed.
   ============================================================ */
.ct-page { margin-bottom: 30px; }

.ct-wrap { max-width: 720px; margin: 0 auto; }

/* ---- form card ---- */
.ct-card {
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    overflow: hidden;
    margin: 0;
}
.ct-card-head {
    padding: 20px 24px;
    background: #fbfbfd;
    border-bottom: 1px solid var(--db-border);
}
.ct-card-head h3 {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 700;
    color: #1a1a2e;
    letter-spacing: -0.2px;
}
.ct-card-head p {
    margin: 0;
    font-size: 13px;
    color: #8a8a95;
}
.ct-card-body { padding: 22px 24px 24px; }

/* ---- fields ---- */
.ct-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.ct-row:last-of-type { margin-bottom: 0; }
.ct-col { flex: 1 1 220px; min-width: 0; }
.ct-col-full { flex: 1 1 100%; }

.ct-page label {
    display: block;
    margin-bottom: 7px;
    font-size: 12.5px;
    font-weight: 600;
    color: #55555f;
}
.ct-field { position: relative; }
.ct-field-icon {
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    width: 17px;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 17px 17px;
    pointer-events: none;
    transition: filter .15s ease;
}
.ct-field:focus-within .ct-field-icon {
    filter: brightness(0) saturate(100%) invert(31%) sepia(84%) saturate(4200%) hue-rotate(243deg) brightness(99%) contrast(94%);
}
.ct-icon-user  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b4b4c4' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.6-6 8-6s8 2 8 6'/%3E%3C/svg%3E"); }
.ct-icon-mail  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b4b4c4' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='19' height='15' rx='2.5'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); }
.ct-icon-tag   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b4b4c4' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 12 22 2.5 12.5V3h9.5l8.6 8.6a1.4 1.4 0 0 1 0 1.8z'/%3E%3Ccircle cx='7.4' cy='7.4' r='1.4'/%3E%3C/svg%3E"); }

.ct-page .form-control {
    height: 48px;
    border: 1.5px solid var(--db-border);
    border-radius: 12px;
    box-shadow: none;
    font-size: 14px;
    color: #1a1a2e;
    background: #fff;
    padding: 0 15px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ct-field .form-control { padding-left: 44px; }
.ct-page .form-control::placeholder { color: #b4b4c4; }
.ct-page .form-control:focus {
    border-color: var(--db-purple);
    box-shadow: 0 0 0 3px rgba(108,78,245,.12);
}
.ct-textarea {
    height: auto !important;
    min-height: 150px;
    padding: 14px 16px !important;
    line-height: 1.75;
    resize: vertical;
}

.ct-captcha {
    margin-top: 18px;
    padding: 16px;
    background: #fbfbfd;
    border: 1px solid var(--db-border);
    border-radius: 12px;
    display: flex;
    justify-content: center;
}

/* ---- buttons ---- */
.ct-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: 12px;
    padding: 14px 26px;
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none !important;
    cursor: pointer;
    transition: all .16s ease;
}
.ct-btn-primary {
    background: var(--db-purple);
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(108,78,245,.24);
}
.ct-btn-primary:hover {
    background: var(--db-purple-dark);
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(108,78,245,.3);
}
.ct-btn-ghost {
    background: #fff;
    border: 1px solid var(--db-border);
    color: #55555f !important;
    font-weight: 600;
}
.ct-btn-ghost:hover { border-color: var(--db-purple); color: var(--db-purple) !important; background: var(--db-purple-light); }
.ct-submit { width: 100%; margin-top: 20px; }

/* ---- sent state ---- */
.ct-sent {
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    padding: 56px 30px;
    text-align: center;
    max-width: 560px;
    margin: 0 auto;
}
.ct-sent-icon {
    width: 68px;
    height: 68px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: #eafaf4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317c690' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E") no-repeat center/28px 28px;
}
.ct-sent h2 {
    margin: 0 0 8px;
    font-size: 19px;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1.6;
}
.ct-sent p {
    margin: 0 0 24px;
    font-size: 14px;
    color: #8a8a95;
}
.ct-sent-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 575px) {
    .ct-card-body { padding: 20px 18px; }
    .ct-sent { padding: 44px 20px; }
    .ct-sent-actions .ct-btn { width: 100%; }
}

/* ============================================================
   DOMAIN SEARCH BAR — final geometry
   Two things were fighting the hero search field: the blanket
   `#order-standard_cart .form-control` (44px, 8px radius, visible
   border) which outranks any two-class selector because of the id,
   and the checkout field rules, which reached this page because every
   order-form template shares the #order-standard_cart id. The former
   is answered by matching the id here; the latter by scoping the
   checkout block to .checkout-page.
   ============================================================ */
#order-standard_cart .dm-searchbar {
    overflow: hidden;
}
#order-standard_cart .dm-searchbar .form-control,
#order-standard_cart .dm-searchbar input[type="text"] {
    height: 54px !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 16px 0 48px !important;
    font-size: 15.5px !important;
}
#order-standard_cart .dm-searchbar .form-control:focus {
    border: none !important;
    box-shadow: none !important;
}
#order-standard_cart .dm-searchicon {
    left: 20px;
    width: 18px;
    text-align: center;
}
#order-standard_cart .dm-searchbar .btn {
    border-radius: 0 !important;
    height: auto !important;
    min-height: 54px !important;
}

/* the transfer page's auth-code field and its own search row */
#order-standard_cart .transfer-search-row .form-control,
#order-standard_cart .transfer-auth-row .form-control,
#order-standard_cart .dm-auth .form-control {
    box-shadow: none !important;
}
#order-standard_cart .dm-auth .form-control {
    height: 48px !important;
    border: 1.5px solid var(--db-border) !important;
    border-radius: 12px !important;
    padding: 0 15px !important;
}
#order-standard_cart .dm-auth .form-control:focus {
    border-color: var(--db-purple) !important;
    box-shadow: 0 0 0 3px rgba(108,78,245,.12) !important;
}

/* browser autofill history was covering the results panel; the domain
   box should not offer previously typed values */
#order-standard_cart .dm-searchbar .form-control::-webkit-contacts-auto-fill-button,
#order-standard_cart .dm-searchbar .form-control::-webkit-credentials-auto-fill-button {
    display: none !important;
    visibility: hidden;
    pointer-events: none;
    position: absolute;
    right: 0;
}

/* ---- this page's modal uses .modal-header, not .modal-body ---- */
.modal-remove-item .modal-header {
    border-bottom: none !important;
    padding: 30px 32px 0 !important;
    text-align: center;
}
.modal-remove-item .modal-header .close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: #f6f6fa !important;
    color: #b4b4c4 !important;
    opacity: 1 !important;
    font-size: 17px !important;
    text-shadow: none !important;
    border: none !important;
}
.modal-remove-item .modal-header .modal-title {
    display: block;
    text-align: center;
}
.modal-remove-item .modal-body {
    text-align: center;
    padding: 10px 32px 20px !important;
}
.modal-remove-item .modal-footer {
    border-top: none !important;
    text-align: center !important;
    padding: 0 32px 28px !important;
}

/* ============================================================
   RENEW DOMAINS (domain-renewals.tpl)
   Template rebuilt: .rn-* classes. Two structural problems drove the
   rebuild — the View Cart button sat *outside* the summary card, so a
   sticky card slid over it, and the period <select> was a bare box
   with no affordance that it could be opened. The button now lives
   inside the card, and the select is styled like every other one.
   ============================================================ */

/* ---- layout ---- */
#order-standard_cart.renew-page .rn-layout {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
}
#order-standard_cart.renew-page .rn-main { flex: 1 1 520px; min-width: 0; padding: 0; }
#order-standard_cart.renew-page .rn-side { flex: 0 0 330px; max-width: 100%; padding: 0; }
@media (max-width: 991px) {
    #order-standard_cart.renew-page .rn-main,
    #order-standard_cart.renew-page .rn-side { flex: 1 1 100%; }
}

/* ---- filter ---- */
#order-standard_cart.renew-page .rn-filter {
    position: relative;
    max-width: 400px;
    margin: 0 0 18px;
}
#order-standard_cart.renew-page .rn-filter-icon {
    position: absolute;
    left: 16px;
    top: 0;
    bottom: 0;
    width: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b4b4c4' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4.2-4.2'/%3E%3C/svg%3E") no-repeat left center/16px 16px;
    pointer-events: none;
    z-index: 2;
}
#order-standard_cart.renew-page .domain-renewals-filter {
    width: 100% !important;
    max-width: none !important;
    height: 48px !important;
    border: 1.5px solid var(--db-border) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    background: #fff !important;
    font-size: 14px !important;
    padding: 0 16px 0 44px !important;
}
#order-standard_cart.renew-page .domain-renewals-filter:focus {
    border-color: var(--db-purple) !important;
    box-shadow: 0 0 0 3px rgba(108,78,245,.12) !important;
}
#order-standard_cart.renew-page .domain-renewals-filter::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    width: 15px; height: 15px; cursor: pointer;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b4b4c4' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* ---- "showing N of M" ---- */
#order-standard_cart.renew-page .rn-showing {
    margin: 0 0 16px;
    padding: 12px 18px;
    background: var(--db-purple-light);
    border-radius: 12px;
    font-size: 13px;
    color: #6b6b8a;
}
#order-standard_cart.renew-page #linkShowAll {
    margin-left: 6px;
    color: var(--db-purple) !important;
    font-weight: 700;
    text-decoration: none !important;
}
#order-standard_cart.renew-page #linkShowAll:hover { text-decoration: underline !important; }

/* ---- cards ---- */
#order-standard_cart.renew-page .rn-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
#order-standard_cart.renew-page .rn-card {
    background: #fff;
    border: 1px solid var(--db-border) !important;
    border-radius: var(--db-radius);
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}
#order-standard_cart.renew-page .rn-card:hover {
    border-color: rgba(108,78,245,.3) !important;
    box-shadow: 0 10px 26px rgba(20,20,50,.06);
}

#order-standard_cart.renew-page .rn-card-head {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 18px 22px;
    flex-wrap: wrap;
}
#order-standard_cart.renew-page .rn-card-icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: var(--db-purple-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c4ef5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14.5 14.5 0 0 1 0 18 14.5 14.5 0 0 1 0-18z'/%3E%3C/svg%3E") no-repeat center/20px 20px;
}
#order-standard_cart.renew-page .rn-card-id { flex: 1 1 240px; min-width: 0; }
#order-standard_cart.renew-page .rn-domain {
    margin: 0 0 4px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1a1a2e !important;
    word-break: break-all;
    line-height: 1.35 !important;
}
#order-standard_cart.renew-page .rn-expiry {
    display: block;
    font-size: 12.5px;
    color: #8a8a95;
}
#order-standard_cart.renew-page .rn-expiry strong { color: #33333d; font-weight: 600; }
#order-standard_cart.renew-page .rn-relative {
    color: #b4b4c4;
    margin-left: 4px;
}
#order-standard_cart.renew-page .rn-status { flex: 0 0 auto; margin-left: auto; }
#order-standard_cart.renew-page .rn-status .label {
    display: inline-block;
    border-radius: 20px !important;
    padding: 6px 13px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .2px;
    border: none !important;
    white-space: nowrap;
}
#order-standard_cart.renew-page .rn-status .label-success { background: #e6f8f1 !important; color: #12876a !important; }
#order-standard_cart.renew-page .rn-status .label-warning { background: #fff3e2 !important; color: #a3660f !important; }
#order-standard_cart.renew-page .rn-status .label-danger  { background: #fdeceb !important; color: #b1352f !important; }
#order-standard_cart.renew-page .rn-status .label-info    { background: var(--db-purple-light) !important; color: var(--db-purple-dark) !important; }
#order-standard_cart.renew-page .rn-status .label-grey    { background: #f2f2f6 !important; color: #6b6b78 !important; }

#order-standard_cart.renew-page .rn-note {
    margin: 0;
    padding: 0 22px 16px;
    font-size: 12.5px;
    line-height: 1.7;
    color: #8a8a95;
}

/* ---- footer row: period + action ---- */
#order-standard_cart.renew-page .rn-card-foot {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    padding: 16px 22px;
    background: #fbfbfd;
    border-top: 1px solid var(--db-border);
}
#order-standard_cart.renew-page .rn-period { flex: 1 1 280px; min-width: 0; }
#order-standard_cart.renew-page .rn-period-label {
    display: block;
    margin: 0 0 7px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #9a9aa5;
}
#order-standard_cart.renew-page .rn-select,
#order-standard_cart.renew-page select.select-renewal-pricing {
    width: 100% !important;
    height: 46px !important;
    border: 1.5px solid var(--db-border) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #1a1a2e !important;
    padding: 0 42px 0 15px !important;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c4ef5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 15px center !important;
    background-size: 15px 15px !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}
#order-standard_cart.renew-page .rn-select:focus {
    border-color: var(--db-purple) !important;
    box-shadow: 0 0 0 3px rgba(108,78,245,.12) !important;
}
#order-standard_cart.renew-page .rn-select::-ms-expand { display: none !important; }

#order-standard_cart.renew-page .rn-add {
    flex: 0 0 auto;
    height: 46px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--db-purple) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 12px !important;
    padding: 0 26px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    box-shadow: 0 6px 16px rgba(108,78,245,.2);
    transition: background .16s ease, transform .16s ease;
}
#order-standard_cart.renew-page .rn-add:hover {
    background: var(--db-purple-dark) !important;
    transform: translateY(-1px);
}
/* the template ships both labels; only one may show at a time */
#order-standard_cart.renew-page .rn-add .added,
#order-standard_cart.renew-page .rn-add .to-add .fa-spinner { display: none; }
#order-standard_cart.renew-page .rn-add.loading .to-add .fa-spinner { display: inline-block; }
#order-standard_cart.renew-page .rn-card.added .rn-add {
    background: #17c690 !important;
    box-shadow: none;
    pointer-events: none;
}
#order-standard_cart.renew-page .rn-card.added .rn-add .to-add { display: none; }
#order-standard_cart.renew-page .rn-card.added .rn-add .added { display: inline-flex; }
#order-standard_cart.renew-page .rn-card.added {
    border-color: rgba(23,198,144,.4) !important;
    background: #fbfffd;
}

#order-standard_cart.renew-page .rn-footnote {
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px dashed var(--db-border);
    font-size: 12px;
    line-height: 1.8;
    color: #9a9aa5;
}

/* ---- summary: the button is inside the card now ---- */
#order-standard_cart.renew-page .rn-summary { position: sticky; top: 20px; }
#order-standard_cart.renew-page .rn-summary-card {
    position: relative;
    background: #fff !important;
    border: 1px solid var(--db-border) !important;
    border-radius: var(--db-radius) !important;
    padding: 24px 26px !important;
    margin: 0 !important;
    box-shadow: 0 4px 20px rgba(20,20,50,.04) !important;
}
#order-standard_cart.renew-page .rn-summary-title {
    margin: 0 0 14px !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    color: #1a1a2e !important;
}
#order-standard_cart.renew-page .rn-summary-card .summary-container {
    font-size: 13.5px;
    color: #55555f;
}
#order-standard_cart.renew-page #btnGoToCart {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    margin: 18px 0 0 !important;
    background: var(--db-purple) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 12px !important;
    padding: 14px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    box-shadow: 0 10px 24px rgba(108,78,245,.24);
    transition: background .16s ease, transform .16s ease, box-shadow .18s ease;
}
#order-standard_cart.renew-page #btnGoToCart:hover {
    background: var(--db-purple-dark) !important;
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(108,78,245,.3);
}
#order-standard_cart.renew-page #orderSummaryLoader {
    position: absolute;
    top: 24px;
    right: 26px;
    color: var(--db-purple);
    font-size: 13px;
}
@media (max-width: 991px) {
    #order-standard_cart.renew-page .rn-summary { position: static; }
}

/* ---- empty state ---- */
#order-standard_cart.renew-page .rn-empty {
    background: #fff;
    border: 1px dashed var(--db-border);
    border-radius: var(--db-radius);
    padding: 56px 24px;
    text-align: center;
    max-width: 560px;
    margin: 0 auto;
}
#order-standard_cart.renew-page .rn-empty-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d9d9e3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M2.8 12h18.4M12 2.8a15 15 0 0 1 0 18.4 15 15 0 0 1 0-18.4z'/%3E%3C/svg%3E") no-repeat center/contain;
}
#order-standard_cart.renew-page .rn-empty p {
    margin: 0 0 22px;
    font-size: 14.5px;
    color: #8a8a95;
}

/* ---- buttons ---- */
#order-standard_cart.renew-page .rn-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--db-border);
    color: #55555f !important;
    border-radius: 11px;
    padding: 11px 22px;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none !important;
}
#order-standard_cart.renew-page .rn-btn-ghost:hover {
    border-color: var(--db-purple);
    color: var(--db-purple) !important;
    background: var(--db-purple-light);
}

@media (max-width: 575px) {
    #order-standard_cart.renew-page .rn-card-foot { padding: 14px 18px; }
    #order-standard_cart.renew-page .rn-add { flex: 1 1 100%; }
    #order-standard_cart.renew-page .rn-card-head { padding: 16px 18px; }
    #order-standard_cart.renew-page .rn-status { flex: 1 1 100%; margin: 8px 0 0; }
}

/* ============================================================
   CART SUMMARY — the empty "Totals" row
   Each recurring bucket (#recurringMonthly, #recurringAnnually …) is
   hidden with an inline style when its total is zero, so a cart of
   purely one-off items — a domain renewal, say — rendered the label
   with nothing beside it. Hiding the row in the template would be
   wrong: recalctotals() reveals those spans over AJAX and would never
   clear a class we added server-side. :has() re-evaluates live, so the
   row reappears the moment a recurring item enters the cart.
   ============================================================ */
body #order-standard_cart .order-summary .recurring-totals:not(:has(#recurring > span:not([style*="none"]))) {
    display: none !important;
}
/* browsers without :has() keep the current behaviour rather than
   risking a permanently hidden row */

/* ============================================================
   CART SUMMARY — total block wrapping
   The amount and its label share one flex row inside a 280px column.
   At 26px with no wrapping rule, "$10.00 USD" broke across two lines
   and the block grew to twice its height. The amount keeps its line;
   the label wraps instead, since it is the less important of the two.
   ============================================================ */
body #order-standard_cart .order-summary .total-due-today,
body #order-standard_cart .order-summary .total-due-today-padded {
    align-items: center !important;
    gap: 14px !important;
}
body #order-standard_cart .order-summary .total-due-today .amt,
body #order-standard_cart .order-summary #totalDueToday.amt {
    flex: 0 1 auto !important;
    font-size: 23px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.6px !important;
    white-space: nowrap !important;
}
body #order-standard_cart .order-summary .total-due-today > span:not(.amt) {
    flex: 1 1 auto !important;
    text-align: right !important;
    line-height: 1.4 !important;
}
/* very narrow columns: stack rather than shrink the figure */
@media (max-width: 1199px) and (min-width: 992px) {
    body #order-standard_cart .order-summary .total-due-today .amt { font-size: 21px !important; }
}

/* ============================================================
   DOMAIN MANAGEMENT (.dmp-*)
   One vocabulary shared by five templates: DNS records, email
   forwarders, private nameservers, the EPP code screen, and the
   addon buy/cancel screens. The stock markup used
   form-horizontal + table-striped, which collapses badly on phones
   and gives inputs no room; these are flex rows that turn into
   stacked, labelled fields below 768px.
   ============================================================ */
.dmp { margin-bottom: 30px; }

/* ---- page heading ---- */
.dmp-head { margin-bottom: 20px; }
.dmp-title {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 700;
    color: #1a1a2e;
    letter-spacing: -0.3px;
}
.dmp-desc {
    margin: 0;
    max-width: 760px;
    font-size: 13.5px;
    line-height: 1.8;
    color: #8a8a95;
}

/* ---- card ---- */
.dmp-card {
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    overflow: hidden;
}
.dmp-external {
    padding: 24px;
    text-align: center;
}

/* ---- record rows ---- */
.dmp-rows { display: block; }
.dmp-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--db-border);
}
.dmp-row:last-child { border-bottom: none; }
.dmp-row-head {
    background: #fbfbfd;
    padding: 12px 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #9a9aa5;
}
.dmp-row-new {
    background: #fcfbff;
    border-top: 1px dashed var(--db-border);
}
.dmp-c { display: block; min-width: 0; }

/* DNS column widths */
.dmp-dns .dmp-c-host { flex: 0 0 160px; }
.dmp-dns .dmp-c-type { flex: 0 0 150px; }
.dmp-dns .dmp-c-addr { flex: 1 1 auto; }
.dmp-dns .dmp-c-prio { flex: 0 0 110px; }

/* forwarder column widths */
.dmp-fwd .dmp-c-prefix { flex: 1 1 45%; }
.dmp-fwd .dmp-c-arrow  { flex: 0 0 22px; }
.dmp-fwd .dmp-c-to     { flex: 1 1 45%; }
.dmp-fwd .dmp-row:not(.dmp-row-head) .dmp-c-arrow {
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c4c4d0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center/16px 16px;
}

.dmp-na {
    display: block;
    padding: 12px 0;
    font-size: 12.5px;
    color: #b4b4c4;
}

/* ---- fields ---- */
.dmp .form-control {
    height: 42px;
    border: 1.5px solid var(--db-border);
    border-radius: 10px;
    box-shadow: none;
    font-size: 13.5px;
    color: #1a1a2e;
    background: #fff;
    padding: 0 13px;
    width: 100%;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.dmp .form-control::placeholder { color: #c0c0cc; }
.dmp .form-control:focus {
    border-color: var(--db-purple);
    box-shadow: 0 0 0 3px rgba(108,78,245,.12);
}
.dmp-select {
    padding-right: 38px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c4ef5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    background-size: 14px 14px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.dmp-select::-ms-expand { display: none; }

/* an input with a fixed domain suffix glued to it */
.dmp-suffix-field {
    display: flex;
    align-items: stretch;
    border: 1.5px solid var(--db-border);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.dmp-suffix-field:focus-within {
    border-color: var(--db-purple);
    box-shadow: 0 0 0 3px rgba(108,78,245,.12);
}
.dmp-suffix-field .form-control {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    flex: 1 1 auto;
    min-width: 0;
}
.dmp-suffix {
    display: flex;
    align-items: center;
    padding: 0 12px;
    background: #f6f6fa;
    border-left: 1px solid var(--db-border);
    font-size: 12.5px;
    font-weight: 600;
    color: #8a8a95;
    white-space: nowrap;
}

.dmp-hint {
    margin: 0;
    padding: 12px 20px;
    background: #fbfbfd;
    border-top: 1px solid var(--db-border);
    font-size: 12px;
    color: #9a9aa5;
    text-align: right;
}

/* ---- actions ---- */
.dmp-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 18px;
}
.dmp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: 11px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
    cursor: pointer;
    transition: all .16s ease;
}
.dmp-btn-primary {
    background: var(--db-purple);
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(108,78,245,.22);
}
.dmp-btn-primary:hover { background: var(--db-purple-dark); transform: translateY(-1px); }
.dmp-btn-ghost {
    background: #fff;
    border: 1px solid var(--db-border);
    color: #55555f !important;
    font-weight: 600;
}
.dmp-btn-ghost:hover { border-color: var(--db-purple); color: var(--db-purple) !important; background: var(--db-purple-light); }
.dmp-btn-danger {
    background: #e0463e;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(224,70,62,.2);
}
.dmp-btn-danger:hover { background: #c93b34; transform: translateY(-1px); }
.dmp-btn-block { width: 100%; }

/* ---- stacked forms (private nameservers) ---- */
.dmp-stack { display: flex; flex-direction: column; gap: 16px; }
.dmp-form-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: #fbfbfd;
    border-bottom: 1px solid var(--db-border);
}
.dmp-form-head h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #1a1a2e;
}
.dmp-form-icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background-color: var(--db-purple-light);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
}
.dmp-icon-add  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c4ef5' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.dmp-icon-edit { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c4ef5' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E"); }
.dmp-icon-del  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e0463e' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M9 7V5h6v2M6 7l1 13h10l1-13'/%3E%3C/svg%3E"); }
.dmp-form-danger .dmp-form-icon { background-color: #fdeceb; }
.dmp-form-danger .dmp-form-head { background: #fffafa; border-bottom-color: #f7dedc; }

.dmp-form-body {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 20px;
}
.dmp-field { flex: 1 1 240px; min-width: 0; }
.dmp-field label {
    display: block;
    margin-bottom: 7px;
    font-size: 12px;
    font-weight: 600;
    color: #55555f;
}
.dmp-form-foot {
    padding: 0 20px 20px;
    display: flex;
    justify-content: flex-end;
}

/* ---- EPP code ---- */
.dmp-epp {
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    padding: 30px 26px;
    text-align: center;
}
.dmp-epp-icon {
    display: block;
    width: 52px;
    height: 52px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background-color: #fff6ea;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e08a1e' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='19' height='15' rx='2.5'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
}
.dmp-epp-error .dmp-epp-icon {
    background-color: #fdeceb;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e0463e' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 7v7M12 17.5v.01'/%3E%3Ccircle cx='12' cy='12' r='9.2' stroke-width='1.8'/%3E%3C/svg%3E");
}
.dmp-epp p {
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
    color: #55555f;
}
.dmp-epp-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #9a9aa5;
    margin-bottom: 12px;
}
.dmp-epp-value {
    display: inline-block;
    padding: 14px 26px;
    border-radius: 12px;
    background: var(--db-purple-light);
    border: 1px dashed rgba(108,78,245,.35);
    color: var(--db-purple-dark);
    font-family: 'Courier New', monospace;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 1.5px;
    word-break: break-all;
    -webkit-user-select: all;
    user-select: all;
}
.dmp-epp-note {
    margin-top: 16px !important;
    font-size: 12.5px !important;
    color: #9a9aa5 !important;
}

/* ---- addon buy / cancel ---- */
.dmp-addon-card {
    max-width: 480px;
    margin: 0 auto;
    padding: 34px 30px;
    text-align: center;
}
.dmp-addon-icon {
    display: block;
    width: 60px;
    height: 60px;
    margin: 0 auto 18px;
    border-radius: 18px;
    background-color: var(--db-purple-light);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 26px 26px;
}
.dmp-icon-dns    { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c4ef5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14.5 14.5 0 0 1 0 18 14.5 14.5 0 0 1 0-18z'/%3E%3C/svg%3E"); }
.dmp-icon-mail   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c4ef5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='19' height='15' rx='2.5'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); }
.dmp-icon-shield { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c4ef5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5 20 6v6c0 5-3.4 8.5-8 9.5-4.6-1-8-4.5-8-9.5V6z'/%3E%3Cpath d='m8.8 12 2.2 2.2 4.2-4.4'/%3E%3C/svg%3E"); }
.dmp-addon-title {
    margin: 0 0 5px;
    font-size: 19px;
    font-weight: 700;
    color: #1a1a2e;
}
.dmp-addon-domain {
    display: inline-block;
    padding: 4px 13px;
    border-radius: 8px;
    background: var(--db-purple-light);
    color: var(--db-purple);
    font-size: 12.5px;
    font-weight: 600;
}
.dmp-addon-info {
    margin: 18px 0 0;
    font-size: 13.5px;
    line-height: 1.85;
    color: #55555f;
}
.dmp-addon-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    margin: 20px 0;
    padding: 16px;
    border-radius: 12px;
    background: #fbfbfd;
    border: 1px solid var(--db-border);
}
.dmp-addon-amount {
    font-size: 26px;
    font-weight: 800;
    color: var(--db-purple-dark);
    letter-spacing: -0.7px;
}
.dmp-addon-cycle { font-size: 13px; color: #9a9aa5; }
.dmp-addon-state {
    margin: 20px 0;
    padding: 14px 18px;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 600;
}
.dmp-addon-state.is-success { background: #eafaf4; color: #12876a; }
.dmp-addon-state.is-error   { background: #fdeceb; color: #b1352f; }
.dmp-addon-back {
    display: inline-block;
    margin-top: 16px;
    color: #9a9aa5 !important;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none !important;
}
.dmp-addon-back:hover { color: var(--db-purple) !important; }

/* ---- phones: rows become labelled stacks ---- */
@media (max-width: 767px) {
    .dmp-row-head { display: none; }
    .dmp-row {
        display: block;
        padding: 16px 18px;
    }
    .dmp-row .dmp-c { margin-bottom: 12px; }
    .dmp-row .dmp-c:last-child { margin-bottom: 0; }
    .dmp-row .dmp-c[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 6px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .4px;
        text-transform: uppercase;
        color: #9a9aa5;
    }
    .dmp-fwd .dmp-c-arrow { display: none; }
    .dmp-actions { flex-direction: column-reverse; }
    .dmp-actions .dmp-btn { width: 100%; }
    .dmp-hint { text-align: left; }
}

/* ============================================================
   PAYMENT (.pmt-* / .ipay-*)
   Covers the saved payment methods list, the add/edit form, the
   invoice payment screen, 3-D Secure and the subscription states.

   account-paymentmethods-manage.tpl is NOT rewritten: its
   .fieldgroup-creditcard / .fieldgroup-bankaccount / .fieldgroup-
   auxfields blocks are shown and hidden by WHMCS's own scripts as
   the customer switches method type, and the gateway modules inject
   markup into #paymentGatewayInput. It is restyled in place instead.
   ============================================================ */
.pmt { margin-bottom: 30px; }

/* ---- header ---- */
.pmt-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.pmt-intro {
    flex: 1 1 320px;
    margin: 0;
    font-size: 13.5px;
    line-height: 1.8;
    color: #8a8a95;
}
.pmt-head-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---- buttons ---- */
.pmt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: 11px;
    padding: 12px 20px;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none !important;
    cursor: pointer;
    transition: all .16s ease;
    white-space: nowrap;
}
.pmt-btn-primary {
    background: var(--db-purple);
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(108,78,245,.22);
}
.pmt-btn-primary:hover { background: var(--db-purple-dark); transform: translateY(-1px); }
.pmt-btn-ghost {
    background: #fff;
    border: 1px solid var(--db-border);
    color: #55555f !important;
    font-weight: 600;
}
.pmt-btn-ghost:hover { border-color: var(--db-purple); color: var(--db-purple) !important; background: var(--db-purple-light); }
.pmt-btn-icon {
    width: 15px;
    height: 15px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.pmt-icon-plus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.pmt-icon-bank { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355555f' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9.5 12 4l9 5.5M5 10v8M9.7 10v8M14.3 10v8M19 10v8M3 21h18'/%3E%3C/svg%3E"); }

/* ---- method cards ---- */
.pmt-list { display: flex; flex-direction: column; gap: 12px; }
.pmt-card {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    padding: 18px 20px;
    flex-wrap: wrap;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.pmt-card:hover { border-color: rgba(108,78,245,.3); box-shadow: 0 8px 22px rgba(20,20,50,.05); }
.pmt-card.is-default { border-color: rgba(108,78,245,.4); background: #fdfcff; }
.pmt-card.is-expired { border-color: #f5d9d6; background: #fffbfb; }

.pmt-card-icon {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--db-purple-light);
    color: var(--db-purple);
    font-size: 19px;
}
.pmt-card.is-expired .pmt-card-icon { background: #fdeceb; color: #c33c34; }

.pmt-card-id { flex: 1 1 240px; min-width: 0; }
.pmt-card-name {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 3px;
}
.pmt-card-desc {
    display: block;
    font-size: 12.5px;
    color: #9a9aa5;
}
.pmt-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    vertical-align: middle;
}
.pmt-badge-default { background: var(--db-purple-light); color: var(--db-purple-dark); }
.pmt-badge-expired { background: #fdeceb; color: #b1352f; }

/* ---- row actions ---- */
.pmt-card-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.pmt-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 38px;
    padding: 0 14px;
    border: 1px solid var(--db-border);
    border-radius: 10px;
    background: #fff;
    color: #55555f !important;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none !important;
    transition: all .15s ease;
}
.pmt-action:hover {
    border-color: var(--db-purple);
    color: var(--db-purple) !important;
    background: var(--db-purple-light);
}
.pmt-action.disabled {
    opacity: .4;
    pointer-events: none;
}
.pmt-action-danger:hover { border-color: #f0bdb9; color: #c33c34 !important; background: #fdeceb; }
.pmt-action-icon {
    width: 14px;
    height: 14px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    flex: 0 0 14px;
}
.pmt-icon-star  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a95' stroke-width='1.9' stroke-linejoin='round'%3E%3Cpath d='M12 3.2l2.7 5.5 6 .9-4.35 4.24 1.03 6L12 17l-5.38 2.84 1.03-6L3.3 9.6l6-.9z'/%3E%3C/svg%3E"); }
.pmt-icon-edit  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a95' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E"); }
.pmt-icon-trash { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a95' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M9 7V5h6v2M6 7l1 13h10l1-13'/%3E%3C/svg%3E"); }

/* ---- empty ---- */
.pmt-empty {
    background: #fff;
    border: 1px dashed var(--db-border);
    border-radius: var(--db-radius);
    padding: 54px 24px;
    text-align: center;
}
.pmt-empty-icon {
    display: block;
    width: 52px;
    height: 52px;
    margin: 0 auto 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d9d9e3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2.5'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E") no-repeat center/contain;
}
.pmt-empty p { margin: 0; color: #9a9aa5; font-size: 14.5px; }

/* ============================================================
   ADD / EDIT PAYMENT METHOD — restyled in place
   ============================================================ */
#frmManagePaymentMethod {
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    padding: 24px 26px;
    max-width: 720px;
}
#frmManagePaymentMethod .form-group {
    display: block;
    margin: 0 0 18px;
}
#frmManagePaymentMethod .form-group::before,
#frmManagePaymentMethod .form-group::after { display: none; }
#frmManagePaymentMethod .control-label,
#frmManagePaymentMethod label.col-sm-4 {
    display: block;
    width: 100% !important;
    float: none !important;
    padding: 0 0 7px !important;
    text-align: left !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #55555f !important;
}
#frmManagePaymentMethod [class*="col-sm-"],
#frmManagePaymentMethod [class*="col-xs-"],
#frmManagePaymentMethod [class*="col-md-"] {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
}
#frmManagePaymentMethod .row { margin: 0 !important; }
#frmManagePaymentMethod .form-control {
    height: 46px;
    width: 100% !important;
    max-width: 100% !important;
    border: 1.5px solid var(--db-border);
    border-radius: 12px;
    box-shadow: none;
    font-size: 14px;
    color: #1a1a2e;
    padding: 0 15px;
    display: block !important;
}
#frmManagePaymentMethod .form-control:focus {
    border-color: var(--db-purple);
    box-shadow: 0 0 0 3px rgba(108,78,245,.12);
}
#frmManagePaymentMethod select.form-control {
    padding-right: 42px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c4ef5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 15px 15px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
/* the type chooser reads as a row of selectable chips */
#frmManagePaymentMethod .radio-inline.icheck-label {
    display: inline-flex !important;
    align-items: center;
    gap: 9px;
    margin: 0 8px 8px 0 !important;
    padding: 11px 16px !important;
    border: 1.5px solid var(--db-border);
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 600;
    color: #33333d;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
#frmManagePaymentMethod .radio-inline.icheck-label:hover { border-color: #d8d2ff; }
#frmManagePaymentMethod .radio-inline.icheck-label:has(input:checked) {
    border-color: var(--db-purple);
    background: var(--db-purple-light);
}
#frmManagePaymentMethod .fieldgroup-loading { padding: 30px; text-align: center; color: #9a9aa5; }
#frmManagePaymentMethod .text-muted {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #9a9aa5 !important;
}
#frmManagePaymentMethod .cc-details,
#frmManagePaymentMethod .fieldgroup-bankaccount .form-group:first-child {
    padding-top: 4px;
}
#frmManagePaymentMethod #cvvWhereLink {
    padding: 0 !important;
    font-size: 12.5px !important;
    color: var(--db-purple) !important;
    font-weight: 600;
}
#frmManagePaymentMethod .input-inline-100 { max-width: 140px !important; }
#frmManagePaymentMethod .field-error-msg {
    margin-top: 6px;
    font-size: 12px;
    color: #e0463e;
}
#frmManagePaymentMethod .btn-primary,
#frmManagePaymentMethod input[type="submit"] {
    background: var(--db-purple) !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 14px 30px !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    box-shadow: 0 8px 20px rgba(108,78,245,.22);
}
#frmManagePaymentMethod .assisted-cc-input-feedback {
    border-radius: 12px !important;
    border: 1px solid #f7dcb6 !important;
    background: #fff9ef !important;
    color: #a86a10 !important;
}

/* ============================================================
   INVOICE PAYMENT (.ipay-*)
   ============================================================ */
.ipay { margin-bottom: 30px; }
.ipay-layout {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
}
.ipay-main { flex: 1 1 420px; min-width: 0; }
.ipay-side { flex: 0 0 340px; max-width: 100%; }
@media (max-width: 991px) {
    .ipay-main, .ipay-side { flex: 1 1 100%; }
}

.ipay-card {
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    overflow: hidden;
}
.ipay-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 22px;
    background: #fbfbfd;
    border-bottom: 1px solid var(--db-border);
}
.ipay-card-head h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #1a1a2e;
}
.ipay-card-icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--db-purple-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c4ef5' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2.5'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E") no-repeat center/16px 16px;
}
.ipay-card-body { padding: 20px 22px; }
.ipay-field { margin-bottom: 16px; }
.ipay-inputs .form-group { margin-bottom: 16px; }
.ipay .form-control {
    height: 46px;
    border: 1.5px solid var(--db-border);
    border-radius: 12px;
    box-shadow: none;
    font-size: 14px;
    padding: 0 15px;
    width: 100%;
}
.ipay .form-control:focus {
    border-color: var(--db-purple);
    box-shadow: 0 0 0 3px rgba(108,78,245,.12);
}
.ipay .control-label,
.ipay label {
    display: block;
    width: 100% !important;
    float: none !important;
    text-align: left !important;
    padding: 0 0 7px !important;
    font-size: 12.5px;
    font-weight: 600;
    color: #55555f;
}
.ipay [class*="col-sm-"] { width: 100% !important; float: none !important; padding: 0 !important; }

.ipay-secure {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-top: 16px;
    padding: 15px 18px;
    background: #fffaf0;
    border: 1px solid #f5e2bd;
    border-radius: var(--db-radius);
    font-size: 12.5px;
    line-height: 1.8;
    color: #8a6a24;
}
.ipay-secure-icon {
    flex: 0 0 17px;
    width: 17px;
    height: 17px;
    margin-top: 2px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9922c' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='10.5' width='17' height='11' rx='2.5'/%3E%3Cpath d='M7.5 10.5V7a4.5 4.5 0 0 1 9 0v3.5'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* the invoice summary include */
.ipay-side .invoice-summary {
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    padding: 22px 24px;
    box-shadow: 0 4px 20px rgba(20,20,50,.04);
}
.ipay-side .invoice-summary h2 {
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 700;
    color: #1a1a2e;
    text-align: left !important;
}
.ipay-side .invoice-summary .table { margin: 0 !important; }
.ipay-side .invoice-summary .table > tbody > tr > td {
    padding: 9px 0 !important;
    border: none !important;
    border-bottom: 1px solid var(--db-border) !important;
    font-size: 13px !important;
    color: #55555f !important;
    vertical-align: top;
}
.ipay-side .invoice-summary .table > tbody > tr:last-child > td { border-bottom: none !important; }
.ipay-side .invoice-summary .table td:last-child {
    text-align: right !important;
    white-space: nowrap;
    font-weight: 600;
    color: #1a1a2e !important;
}
.ipay-side .invoice-summary .total-row {
    font-weight: 700 !important;
    color: #1a1a2e !important;
}
.ipay-side .invoice-summary tr:last-child .total-row {
    font-size: 15px !important;
    color: var(--db-purple-dark) !important;
}

.ipay-submit { margin-top: 16px; }
.ipay-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: var(--db-purple);
    border: none;
    color: #fff;
    border-radius: 12px;
    padding: 15px;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 10px 24px rgba(108,78,245,.24);
    transition: background .16s ease, transform .16s ease, box-shadow .18s ease;
}
.ipay-btn:hover {
    background: var(--db-purple-dark);
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(108,78,245,.3);
}
.ipay-btn:disabled { opacity: .55; transform: none; box-shadow: none; }

/* ---- remote / 3-D Secure frames ---- */
.ipay-remote,
.ipay-3ds {
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    padding: 22px;
    margin-bottom: 30px;
}
.ipay-3ds-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--db-border);
}
.ipay-3ds-head h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #1a1a2e;
}
.ipay-3ds-icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: var(--db-purple-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c4ef5' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5 20 6v6c0 5-3.4 8.5-8 9.5-4.6-1-8-4.5-8-9.5V6z'/%3E%3Cpath d='m8.8 12 2.2 2.2 4.2-4.4'/%3E%3C/svg%3E") no-repeat center/17px 17px;
}
.ipay-3ds-frame,
.ipay-remote iframe {
    width: 100%;
    border: 1px solid var(--db-border);
    border-radius: 12px;
    background: #fff;
}

/* ============================================================
   SUBSCRIPTION / RESULT STATES
   ============================================================ */
.pmt-state-page { margin-bottom: 30px; }
.pmt-state {
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    padding: 52px 30px;
    text-align: center;
    max-width: 560px;
    margin: 0 auto;
}
.pmt-state-icon {
    display: block;
    width: 66px;
    height: 66px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 28px 28px;
}
.pmt-state.is-success .pmt-state-icon {
    background-color: #eafaf4;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317c690' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E");
}
.pmt-state.is-error .pmt-state-icon {
    background-color: #fdeceb;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e0463e' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
}
.pmt-state.is-info .pmt-state-icon {
    background-color: var(--db-purple-light);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c4ef5' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 11v6M12 7.5v.01'/%3E%3Ccircle cx='12' cy='12' r='9.2' stroke-width='1.8'/%3E%3C/svg%3E");
}
.pmt-state h2 {
    margin: 0 0 10px;
    font-size: 19px;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1.5;
}
.pmt-state p {
    margin: 0 0 6px;
    font-size: 14px;
    line-height: 1.8;
    color: #8a8a95;
}
.pmt-state-note a { color: var(--db-purple) !important; font-weight: 600; }
.pmt-state-actions { margin-top: 20px; text-align: center; }

@media (max-width: 767px) {
    .pmt-card { padding: 16px 18px; }
    .pmt-card-actions { flex: 1 1 100%; margin-top: 4px; }
    .pmt-action { flex: 1 1 auto; }
    .pmt-action-text { display: none; }
    .pmt-head-actions { width: 100%; }
    .pmt-head-actions .pmt-btn { flex: 1 1 auto; }
}

/* ============================================================
   UPGRADE / DOWNGRADE (.upg-*) and USAGE BILLING (.usg-*)
   The stock upgrade flow was three table-striped screens. Note that
   upgradesummary.tpl also had a real markup bug: its second <form>
   opened inside a .col-sm-6 and closed after that column, so the
   browser auto-closed the form early and the Continue button ended
   up outside it. The rebuilt template closes both forms correctly.
   ============================================================ */
.upg { margin-bottom: 30px; }

/* ---- current configuration strip ---- */
.upg-current {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--db-purple-light);
    border-radius: var(--db-radius);
    padding: 16px 20px;
    margin-bottom: 20px;
}
.upg-current-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #6b6b8a;
}
.upg-current-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--db-purple-dark);
}
.upg-current-domain {
    padding: 3px 11px;
    border-radius: 8px;
    background: #fff;
    color: var(--db-purple);
    font-size: 12.5px;
    font-weight: 600;
}
.upg-lead {
    margin: 0 0 16px;
    font-size: 14px;
    color: #55555f;
}

/* ---- package cards ---- */
.upg-packages {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.upg-package {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    overflow: hidden;
    margin: 0;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.upg-package:hover {
    border-color: rgba(108,78,245,.35);
    box-shadow: 0 12px 30px rgba(20,20,50,.07);
    transform: translateY(-2px);
}
.upg-package-body { flex: 1 1 auto; padding: 20px 22px; }
.upg-package-group {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #9a9aa5;
    margin-bottom: 6px;
}
.upg-package-name {
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 700;
    color: #1a1a2e;
    letter-spacing: -0.2px;
}
.upg-package-desc {
    font-size: 13px;
    line-height: 1.85;
    color: #8a8a95;
}
.upg-package-desc br { content: ""; display: block; margin-bottom: 2px; }
.upg-package-foot {
    padding: 18px 22px;
    background: #fbfbfd;
    border-top: 1px solid var(--db-border);
}
.upg-package-price {
    display: block;
    margin-bottom: 12px;
    font-size: 20px;
    font-weight: 800;
    color: var(--db-purple-dark);
    letter-spacing: -0.5px;
}
.upg-package-price small {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: #9a9aa5;
    letter-spacing: 0;
    margin-top: 2px;
}
.upg-package-foot .upg-select { margin-bottom: 12px; }

/* ---- config option rows ---- */
.upg-card {
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    overflow: hidden;
}
.upg-card-head {
    padding: 16px 22px;
    background: #fbfbfd;
    border-bottom: 1px solid var(--db-border);
}
.upg-card-head h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #1a1a2e;
}
.upg-opt {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 22px;
    border-bottom: 1px solid var(--db-border);
}
.upg-opt:last-child { border-bottom: none; }
.upg-opt-head {
    background: #fbfbfd;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #9a9aa5;
}
.upg-opt-name { flex: 0 0 180px; font-size: 13.5px; font-weight: 600; color: #1a1a2e; }
.upg-opt-from { flex: 1 1 130px; font-size: 13.5px; color: #8a8a95; }
.upg-opt-to   { flex: 1 1 200px; }
.upg-opt-arrow {
    flex: 0 0 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c4c4d0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center/16px 16px;
}
.upg-opt-head .upg-opt-arrow { background: none; }

.upg-check {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-size: 13.5px;
    font-weight: 500;
    color: #33333d;
    cursor: pointer;
}
.upg-check input { accent-color: var(--db-purple); width: 16px; height: 16px; }
.upg-qty { display: flex; align-items: center; gap: 9px; }
.upg-qty .form-control { width: 80px !important; text-align: center; }
.upg-qty-unit { font-size: 13px; color: #8a8a95; }

/* ---- fields ---- */
.upg .form-control,
.upg-select {
    height: 44px;
    border: 1.5px solid var(--db-border);
    border-radius: 11px;
    box-shadow: none;
    font-size: 13.5px;
    color: #1a1a2e;
    background-color: #fff;
    padding: 0 14px;
    width: 100%;
}
.upg .form-control:focus,
.upg-select:focus {
    border-color: var(--db-purple);
    box-shadow: 0 0 0 3px rgba(108,78,245,.12);
}
select.upg-select {
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c4ef5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px 14px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
select.upg-select::-ms-expand { display: none; }

/* ---- buttons ---- */
.upg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: 11px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
    cursor: pointer;
    transition: all .16s ease;
}
.upg-btn-primary {
    background: var(--db-purple);
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(108,78,245,.22);
}
.upg-btn-primary:hover { background: var(--db-purple-dark); transform: translateY(-1px); }
.upg-btn-ghost {
    background: #fff;
    border: 1px solid var(--db-border);
    color: #55555f !important;
    font-weight: 600;
}
.upg-btn-ghost:hover { border-color: var(--db-purple); color: var(--db-purple) !important; background: var(--db-purple-light); }
.upg-btn-danger { background: #e0463e; color: #fff !important; }
.upg-btn-danger:hover { background: #c93b34; }
.upg-btn-block { width: 100%; }
.upg-actions { margin-top: 18px; text-align: right; }

/* ---- summary step ---- */
.upg-sum-layout {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    flex-wrap: wrap;
}
.upg-sum-main { flex: 1 1 420px; min-width: 0; }
.upg-sum-side { flex: 0 0 330px; max-width: 100%; }
@media (max-width: 991px) {
    .upg-sum-main, .upg-sum-side { flex: 1 1 100%; }
}

.upg-line {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 15px 22px;
    border-bottom: 1px solid var(--db-border);
}
.upg-line:last-child { border-bottom: none; }
.upg-line-desc {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 13.5px;
}
.upg-line-label {
    flex: 1 1 100%;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #9a9aa5;
}
.upg-from { color: #9a9aa5; text-decoration: line-through; }
.upg-to { font-weight: 700; color: #1a1a2e; }
.upg-line-arrow {
    width: 15px;
    height: 15px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c4ef5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center/contain;
}
.upg-line-price {
    flex: 0 0 auto;
    font-size: 15px;
    font-weight: 700;
    color: #1a1a2e;
    white-space: nowrap;
}

.upg-note {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-top: 16px;
    padding: 14px 18px;
    background: #fffaf0;
    border: 1px solid #f5e2bd;
    border-radius: var(--db-radius);
    font-size: 12.5px;
    line-height: 1.8;
    color: #8a6a24;
}
.upg-note-icon {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9922c' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 11v6M12 7.5v.01'/%3E%3Ccircle cx='12' cy='12' r='9.2' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* promo */
.upg-promo-form { margin-top: 18px; }
.upg-promo-label {
    display: block;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #9a9aa5;
}
.upg-promo { display: flex; gap: 10px; flex-wrap: wrap; }
.upg-promo .form-control { flex: 1 1 200px; }
.upg-promo .upg-btn { flex: 0 0 auto; }

/* summary card */
.upg-summary {
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    padding: 24px 26px;
    box-shadow: 0 4px 20px rgba(20,20,50,.04);
    position: sticky;
    top: 20px;
    margin: 0;
}
.upg-summary-title {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 700;
    color: #1a1a2e;
}
.upg-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    font-size: 13.5px;
    color: #55555f;
    border-bottom: 1px solid var(--db-border);
}
.upg-row:last-child { border-bottom: none; }
.upg-row-val { font-weight: 700; color: #1a1a2e; white-space: nowrap; }
.upg-row.is-discount .upg-row-val { color: #17c690; }
.upg-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--db-purple-light);
    border-radius: 12px;
    padding: 16px 18px;
    margin: 16px 0;
}
.upg-total-amt {
    font-size: 22px;
    font-weight: 800;
    color: var(--db-purple-dark);
    letter-spacing: -0.6px;
    white-space: nowrap;
}
.upg-total-label {
    font-size: 12.5px;
    font-weight: 600;
    color: #6b6b8a;
    text-align: right;
}
.upg-pay-label {
    display: block;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #9a9aa5;
}
.upg-summary .upg-btn-block { margin-top: 16px; }
@media (max-width: 991px) { .upg-summary { position: static; } }

/* ---- blocked states ---- */
.upg-block {
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    padding: 50px 30px;
    text-align: center;
    max-width: 560px;
    margin: 0 auto 30px;
}
.upg-block-icon {
    display: block;
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #fff6ea url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e08a1e' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 8v5M12 16.5v.01'/%3E%3Ccircle cx='12' cy='12' r='9.2' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat center/28px 28px;
}
.upg-block-msg {
    margin: 0 0 22px;
    font-size: 14.5px;
    line-height: 1.8;
    color: #55555f;
}
.upg-block-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   USAGE BILLING (.usg-*)
   ============================================================ */
.usg { margin-bottom: 30px; }
.usg-intro {
    margin: 0 0 18px;
    font-size: 13.5px;
    line-height: 1.8;
    color: #8a8a95;
}
.usg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}
.usg-card {
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    padding: 20px 22px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.usg-card:hover { border-color: rgba(108,78,245,.3); box-shadow: 0 8px 22px rgba(20,20,50,.05); }
.usg-card-head {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 14px;
}
.usg-card-icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--db-purple-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c4ef5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17.5 9 11l4 4 8-8.5'/%3E%3Cpath d='M15 6.5h6v6'/%3E%3C/svg%3E") no-repeat center/17px 17px;
}
.usg-card-name {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a2e;
}
.usg-value {
    padding: 14px 16px;
    background: #fbfbfd;
    border-radius: 12px;
    margin-bottom: 14px;
}
.usg-amount {
    display: block;
    font-size: 24px;
    font-weight: 800;
    color: var(--db-purple-dark);
    letter-spacing: -0.6px;
    line-height: 1.2;
}
.usg-label {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #9a9aa5;
}
.usg-meta-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 0;
    font-size: 12.5px;
    border-bottom: 1px solid var(--db-border);
}
.usg-meta-row:last-child { border-bottom: none; }
.usg-meta-label { color: #9a9aa5; }
.usg-meta-value { color: #33333d; font-weight: 600; text-align: right; }
.usg-included {
    display: block;
    margin: 6px 0;
    padding: 6px 11px;
    border-radius: 8px;
    background: #eafaf4;
    color: #12876a;
    font-size: 11.5px;
    font-weight: 600;
}
.usg-pricing-btn {
    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 10px;
    border: 1px solid var(--db-border);
    border-radius: 10px;
    background: #fff;
    color: #55555f;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s ease;
}
.usg-pricing-btn:hover {
    border-color: var(--db-purple);
    color: var(--db-purple);
    background: var(--db-purple-light);
}

/* ---- phones ---- */
@media (max-width: 767px) {
    .upg-opt { display: block; padding: 16px 18px; }
    .upg-opt-head { display: none; }
    .upg-opt-name { margin-bottom: 10px; }
    .upg-opt-arrow { display: none; }
    .upg-opt-from, .upg-opt-to { margin-bottom: 10px; }
    .upg-opt-from[data-label]::before,
    .upg-opt-to[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 5px;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: .4px;
        text-transform: uppercase;
        color: #9a9aa5;
    }
    .upg-actions { text-align: stretch; }
    .upg-actions .upg-btn { width: 100%; }
    .upg-line { flex-wrap: wrap; }
}

/* ============================================================
   SHARED RESULT STATES (.st-*)
   One card used by logout, access-denied, ticket feedback results
   and the 404 page, so a "something happened" screen looks the same
   wherever it appears.
   ============================================================ */
.st-page { margin: 0 0 30px; }
.st-card {
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    padding: 52px 34px;
    text-align: center;
    max-width: 540px;
    margin: 0 auto;
}
.st-card-wide { max-width: 660px; }
.st-icon {
    display: block;
    width: 66px;
    height: 66px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 28px 28px;
}
.st-icon.is-success {
    background-color: #eafaf4;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317c690' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E");
}
.st-icon.is-warning {
    background-color: #fff6ea;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e08a1e' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 8v5M12 16.5v.01'/%3E%3Ccircle cx='12' cy='12' r='9.2' stroke-width='1.8'/%3E%3C/svg%3E");
}
.st-icon.is-locked {
    background-color: #fdeceb;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e0463e' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='10.5' width='17' height='11' rx='2.5'/%3E%3Cpath d='M7.5 10.5V7a4.5 4.5 0 0 1 9 0v3.5'/%3E%3C/svg%3E");
}
.st-icon.is-404 {
    background-color: var(--db-purple-light);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c4ef5' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7.2' stroke-width='1.8'/%3E%3Cpath d='m20 20-4.2-4.2M11 8v3.5M11 14.2v.01'/%3E%3C/svg%3E");
}
.st-card h2 {
    margin: 0 0 10px;
    font-size: 21px;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1.5;
    letter-spacing: -0.3px;
}
.st-card p {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.8;
    color: #8a8a95;
}
.st-sub {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #55555f !important;
}
.st-note { margin-top: 14px !important; font-size: 13px !important; }
.st-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 24px;
}
.st-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: 12px;
    padding: 13px 26px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
    cursor: pointer;
    transition: all .16s ease;
}
.st-btn-primary {
    background: var(--db-purple);
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(108,78,245,.22);
}
.st-btn-primary:hover { background: var(--db-purple-dark); transform: translateY(-1px); }
.st-btn-ghost {
    background: #fff;
    border: 1px solid var(--db-border);
    color: #55555f !important;
    font-weight: 600;
}
.st-btn-ghost:hover { border-color: var(--db-purple); color: var(--db-purple) !important; background: var(--db-purple-light); }

/* permission list on access-denied */
.st-perms {
    margin: 22px 0 6px;
    padding: 18px 20px;
    background: #fbfbfd;
    border: 1px solid var(--db-border);
    border-radius: 12px;
    text-align: left;
}
.st-perms-label {
    display: block;
    margin-bottom: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #9a9aa5;
}
.st-perms-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.st-perms-list li {
    padding: 5px 12px;
    border-radius: 8px;
    background: var(--db-purple-light);
    color: var(--db-purple-dark);
    font-size: 12.5px;
    font-weight: 600;
}

/* the 404 template keeps its stock classes alongside ours */
.error-container.boxed { border: 1px solid var(--db-border); }
.error-container h1 { font-size: 24px; font-weight: 800; color: #1a1a2e; }

/* ============================================================
   MARKDOWN GUIDE (.mdg-*)
   ============================================================ */
.mdg { margin-bottom: 30px; }
.mdg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
}
.mdg-card {
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    padding: 18px 20px;
}
.mdg-card-wide { grid-column: 1 / -1; }
.mdg-title {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 700;
    color: #1a1a2e;
}
.mdg-code {
    margin: 0 0 10px;
    padding: 14px 16px;
    background: #fbfbfd;
    border: 1px solid var(--db-border);
    border-radius: 11px;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 12.5px;
    line-height: 1.75;
    color: #4a4a58;
    white-space: pre;
    overflow-x: auto;
}
.mdg-out {
    padding: 12px 16px;
    border-radius: 11px;
    background: var(--db-purple-light);
    font-size: 13.5px;
    line-height: 1.8;
    color: var(--db-purple-dark);
}
.mdg-note {
    display: block;
    margin: 4px 0 10px;
    font-size: 12px;
    color: #9a9aa5;
    font-style: normal;
}

/* ============================================================
   TICKET FEEDBACK (.tfb-*)
   The stock rating control was a 12-column table of bare radios —
   unreadable on a phone and hard to hit. It becomes a row of
   numbered chips that wrap.
   ============================================================ */
.tfb { margin-bottom: 30px; }
.tfb-lead {
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.8;
    color: #55555f;
}
.tfb-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    align-items: center;
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    padding: 18px 22px;
    margin-bottom: 18px;
}
.tfb-meta { flex: 1 1 180px; min-width: 0; }
.tfb-meta-label {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #9a9aa5;
    margin-bottom: 3px;
}
.tfb-meta-value { font-size: 13.5px; font-weight: 600; color: #1a1a2e; }
.tfb-review {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: 11px;
    background: var(--db-purple-light);
    color: var(--db-purple) !important;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none !important;
    transition: all .15s ease;
}
.tfb-review::after {
    content: "";
    width: 14px;
    height: 14px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c4ef5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center/contain;
}
.tfb-review:hover { background: var(--db-purple); color: #fff !important; }
.tfb-review:hover::after { filter: brightness(0) invert(1); }

.tfb-card {
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    padding: 22px;
    margin-bottom: 14px;
}
.tfb-card-head {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 18px;
}
.tfb-avatar {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: var(--db-purple-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c4ef5' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.6-6 8-6s8 2 8 6'/%3E%3C/svg%3E") no-repeat center/20px 20px;
}
.tfb-staff strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #1a1a2e;
}
.tfb-staff span {
    display: block;
    font-size: 12.5px;
    color: #9a9aa5;
    margin-top: 2px;
}

.tfb-scale {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 16px;
    background: #fbfbfd;
    border-radius: 12px;
    margin-bottom: 18px;
}
.tfb-scale-end {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #9a9aa5;
}
.tfb-scale-options {
    flex: 1 1 auto;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}
.tfb-score { margin: 0; cursor: pointer; }
.tfb-score input { position: absolute; opacity: 0; pointer-events: none; }
.tfb-score span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1.5px solid var(--db-border);
    border-radius: 10px;
    background: #fff;
    font-size: 13.5px;
    font-weight: 700;
    color: #55555f;
    transition: all .14s ease;
}
.tfb-score:hover span { border-color: #d8d2ff; }
.tfb-score input:checked + span {
    background: var(--db-purple);
    border-color: var(--db-purple);
    color: #fff;
    transform: scale(1.06);
}
.tfb-comment label {
    display: block;
    margin-bottom: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: #55555f;
}
.tfb .form-control {
    border: 1.5px solid var(--db-border);
    border-radius: 12px;
    box-shadow: none;
    padding: 13px 15px;
    font-size: 14px;
    line-height: 1.7;
    resize: vertical;
}
.tfb .form-control:focus {
    border-color: var(--db-purple);
    box-shadow: 0 0 0 3px rgba(108,78,245,.12);
}
.tfb-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 18px;
}

/* ============================================================
   LINKED ACCOUNTS — restyled in place
   The table is DataTables-driven (data-ajax-url) and the provider
   buttons are wired by remote-auth JS, so only the skin is changed.
   ============================================================ */
#tableLinkedAccounts { margin: 0 !important; }
#tableLinkedAccounts > thead > tr > th {
    padding: 12px 16px !important;
    background: #fbfbfd !important;
    border: none !important;
    border-bottom: 1px solid var(--db-border) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #9a9aa5 !important;
    text-align: left !important;
}
#tableLinkedAccounts > tbody > tr > td {
    padding: 14px 16px !important;
    border: none !important;
    border-bottom: 1px solid var(--db-border) !important;
    font-size: 13.5px !important;
    color: #33333d !important;
    vertical-align: middle !important;
}
#tableLinkedAccounts > tbody > tr:last-child > td { border-bottom: none !important; }
#tableLinkedAccounts > tbody > tr:hover > td { background: #fbfaff !important; }
.provider-link-btn,
.btn-remote-auth-link {
    border-radius: 11px !important;
    padding: 11px 18px !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
}

@media (max-width: 767px) {
    .st-card { padding: 40px 22px; }
    .st-actions .st-btn { width: 100%; }
    .tfb-actions { flex-direction: column-reverse; }
    .tfb-actions .st-btn { width: 100%; }
    .tfb-scale-end { flex: 1 1 100%; text-align: center; }
    .tfb-score span { width: 34px; height: 34px; font-size: 12.5px; }
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE LAYER
   Everything below is mobile work. It sits at the end of the file
   on purpose: it has to win against the desktop rules above, and
   keeping it in one place means the phone layout can be read and
   changed without hunting through 18,000 lines.

   Breakpoints used throughout:
     1199  laptops / small desktops
      991  tablets landscape — sidebars stop being sidebars
      767  tablets portrait and phones — the real mobile layout
      575  small phones
      400  very small phones
   ════════════════════════════════════════════════════════════ */

/* ---- 1. global guards -------------------------------------
   A single element wider than the viewport gives the whole page a
   horizontal scrollbar, and on a phone that reads as "the site is
   broken". These rules make overflow impossible rather than
   chasing it element by element. */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    max-width: 100%;
    overflow-x: hidden;
}
img, svg, video, canvas, embed, object {
    max-width: 100%;
    height: auto;
}
iframe { max-width: 100%; }
pre, code, samp, kbd {
    max-width: 100%;
    overflow-x: auto;
    word-break: break-word;
}
/* long unbroken strings — domains, tokens, transaction ids, urls */
p, li, td, th, dd, dt, h1, h2, h3, h4, h5, h6, .panel-body, .card, label {
    overflow-wrap: break-word;
    word-wrap: break-word;
}
a { word-break: break-word; }
table { max-width: 100%; }

@media (max-width: 767px) {
    .container,
    .container-fluid { padding-left: 16px !important; padding-right: 16px !important; }
    .row { margin-left: -8px !important; margin-right: -8px !important; }
    .row > [class*="col-"] { padding-left: 8px !important; padding-right: 8px !important; }

    /* every flex column in this theme was written with a pixel
       min-width for the desktop grid; on a phone that is exactly
       what forces the page wider than the screen */
    [class$="-main"], [class$="-side"], [class$="-col"],
    .checkout-main-col, .checkout-summary-col,
    .ticket-view-main, .ticket-view-side,
    .svc-detail-main, .svc-detail-side,
    .dom-detail-main, .dom-detail-side,
    .funds-main, .funds-side,
    .cxl-main, .cxl-side, .mp-main, .mp-side,
    .rn-main, .rn-side, .ipay-main, .ipay-side,
    .upg-sum-main, .upg-sum-side, .ct-main, .ct-side {
        min-width: 0 !important;
        flex-basis: 100% !important;
        max-width: 100% !important;
    }

    /* nothing pins itself to the viewport on a phone: a sticky
       sidebar on a small screen just eats the scroll */
    [class*="-summary"], [class*="-side"], .order-summary,
    .checkout-order-summary, .rn-summary, .upg-summary,
    .mp-summary, .cxl-summary, .ticket-info-card {
        position: static !important;
        top: auto !important;
    }
}

/* ---- 2. tables ---------------------------------------------
   Data tables cannot reflow, so they scroll inside their card
   instead of stretching the page. */
@media (max-width: 767px) {
    .table-responsive {
        border: none !important;
        margin: 0 !important;
        -webkit-overflow-scrolling: touch;
    }
    .services-table, .tickets-table, .invoices-table, .domains-table,
    .quotes-table, .ns-table, .emails-table, .table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .services-table > thead > tr > th, .services-table > tbody > tr > td,
    .tickets-table > thead > tr > th, .tickets-table > tbody > tr > td,
    .invoices-table > thead > tr > th, .invoices-table > tbody > tr > td,
    .domains-table > thead > tr > th, .domains-table > tbody > tr > td,
    .quotes-table > thead > tr > th, .quotes-table > tbody > tr > td {
        padding-left: 12px !important;
        padding-right: 12px !important;
        font-size: 13px !important;
    }
    /* DataTables controls stack instead of sitting side by side */
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        float: none !important;
        width: 100% !important;
        text-align: left !important;
        margin-bottom: 10px !important;
    }
    .dataTables_wrapper .dataTables_filter input,
    .dataTables_wrapper .dataTables_length select {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ---- 3. header ---------------------------------------------
   The header is one flex row of three blocks: logo, marketing
   links, account actions. Below 992 the marketing links become a
   scrollable strip on their own line; below 768 the action
   buttons shed their text labels and keep their icons. */
@media (max-width: 1199px) {
    section#header .header-marketing-nav { gap: 16px; }
    section#header .header-marketing-nav a { font-size: 13px; }
}

@media (max-width: 991px) {
    section#header .header-inner {
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 10px 14px !important;
        padding-top: 12px !important;
        padding-bottom: 10px !important;
    }
    section#header .logo { flex: 0 0 auto; }
    section#header .logo img { max-height: 34px; width: auto; }

    section#header ul.top-nav {
        flex: 1 1 auto;
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        gap: 4px;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none;
    }

    /* the marketing links drop to their own line and scroll
       sideways rather than wrapping into a tall stack */
    section#header .header-marketing-nav {
        order: 3;
        flex: 1 1 100%;
        display: flex !important;
        /* without this the links wrap onto a second line instead of
           scrolling, which is what the strip exists to avoid */
        flex-wrap: nowrap !important;
        gap: 18px;
        margin: 2px -16px 0 !important;
        padding: 8px 16px 2px !important;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        border-top: 1px solid var(--db-border);
    }
    section#header .header-marketing-nav::-webkit-scrollbar { display: none; }
    section#header .header-marketing-nav a {
        flex: 0 0 auto;
        font-size: 12.5px;
    }
}

@media (max-width: 767px) {
    section#header ul.top-nav > li > a { padding: 6px 8px !important; }
    /* keep the icons, drop the words — three labelled buttons never
       fit across a phone */
    section#header ul.top-nav > li.primary-action > a.btn {
        padding: 9px 13px !important;
        font-size: 0 !important;
        gap: 0 !important;
    }
    section#header ul.top-nav > li.primary-action > a.btn i {
        font-size: 14px !important;
        margin: 0 !important;
    }
    section#header .choose-language span,
    section#header .choose-language .lang-name { display: none !important; }
    section#header .logo img { max-height: 30px; }
    section#header .logo.logo-text { font-size: 19px !important; }
}

@media (max-width: 400px) {
    section#header .header-inner { gap: 8px !important; }
    section#header ul.top-nav { gap: 0; }
    section#header ul.top-nav > li > a { padding: 6px !important; }
}

/* the notification and cart popovers must never exceed the screen */
@media (max-width: 575px) {
    .popover-user-notifications,
    .popover-user-notifications .popover-content {
        min-width: 0 !important;
        width: calc(100vw - 32px) !important;
        max-width: calc(100vw - 32px) !important;
    }
    .popover { max-width: calc(100vw - 32px) !important; }
}

/* ---- 4. main menu ------------------------------------------
   Bootstrap's collapse does the work; these rules only make the
   open panel look like the rest of the theme. */
@media (max-width: 991px) {
    section#main-menu .navbar-header { padding: 4px 0; }
    section#main-menu .navbar-toggle {
        display: block !important;
        float: none !important;
        margin: 6px 0 !important;
        padding: 9px 11px !important;
        border: 1px solid rgba(255,255,255,.35) !important;
        border-radius: 10px !important;
        background: rgba(255,255,255,.12) !important;
    }
    section#main-menu .navbar-toggle:hover,
    section#main-menu .navbar-toggle:focus { background: rgba(255,255,255,.2) !important; }
    section#main-menu .navbar-toggle .icon-bar {
        width: 20px;
        height: 2px;
        border-radius: 2px;
        background: #fff !important;
    }
    section#main-menu .navbar-toggle .icon-bar + .icon-bar { margin-top: 4px; }

    section#main-menu .navbar-collapse {
        border-top: 1px solid rgba(255,255,255,.18) !important;
        box-shadow: none !important;
        padding: 6px 0 12px !important;
        max-height: 78vh;
        overflow-y: auto;
    }
    section#main-menu .navbar-nav,
    .navbar-main .navbar-nav {
        float: none !important;
        margin: 0 !important;
        display: block !important;
    }
    section#main-menu .navbar-nav > li,
    .navbar-main .navbar-nav > li { float: none !important; display: block !important; }
    section#main-menu .navbar-nav > li > a,
    .navbar-main .navbar-nav > li > a {
        padding: 12px 14px !important;
        border-radius: 10px !important;
        font-size: 14.5px !important;
    }
    /* submenus open inline instead of floating off-screen */
    .navbar-main .navbar-nav .open .dropdown-menu,
    section#main-menu .navbar-nav .open .dropdown-menu {
        position: static !important;
        float: none !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 2px 0 6px !important;
        padding: 6px !important;
        background: rgba(255,255,255,.1) !important;
        border: none !important;
        box-shadow: none !important;
    }
    .navbar-main .navbar-nav .open .dropdown-menu > li > a,
    section#main-menu .navbar-nav .open .dropdown-menu > li > a {
        color: rgba(255,255,255,.9) !important;
        padding: 10px 14px !important;
    }
    .navbar-main .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-main .navbar-nav .open .dropdown-menu > li > a:focus {
        background: rgba(255,255,255,.16) !important;
        color: #fff !important;
    }
    .navbar-main .navbar-nav .dropdown-menu .divider { background: rgba(255,255,255,.2) !important; }
    section#main-menu .navbar-right { float: none !important; }
}

/* ---- 5. footer ---------------------------------------------
   The request: two columns on phones, three on tablets. The
   markup is a bootstrap row of col-sm-6/col-md-* blocks, so the
   columns are re-declared here as a grid, which keeps the link
   lists aligned no matter how many links each one holds. */
@media (max-width: 991px) {
    section#footer.site-footer { padding: 38px 0 18px; }
    .footer-columns {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        /* .footer-columns is a bootstrap .row, and .row::before /
           ::after are clearfix helpers with display:table. Turn the row
           into a grid and those two pseudo-elements become grid items,
           taking the first cell and pushing every column one place
           along — which is why the first column rendered empty. */
        gap: 26px 20px;
        margin: 0 0 26px !important;
    }
    .footer-columns::before,
    .footer-columns::after { display: none !important; }
    .footer-columns > [class*="col-"] {
        width: 100% !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    /* the brand block carries the logo, payment icons and contact
       details — it needs the full width, not a third of it */
    .footer-columns > .footer-brand-col { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
    .footer-columns {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px 18px;
    }
    .footer-columns h4 { font-size: 14px !important; margin-bottom: 12px !important; }
    .footer-columns .footer-subheading { margin-top: 18px !important; }
    .footer-columns a { font-size: 13px !important; }
    .footer-columns ul { margin: 0 !important; padding: 0 !important; list-style: none; }
    .footer-columns li { margin-bottom: 7px !important; }
}

/* two columns stay down to very small phones — 390px is the most
   common width there is, and a single column there turns the footer
   into a very long scroll */
@media (max-width: 319px) {
    .footer-columns { grid-template-columns: 1fr; }
}

/* brand column internals */
@media (max-width: 991px) {
    .footer-brand-col { text-align: left; }
    .footer-payment-icons {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 14px 0 18px !important;
    }
    .footer-contact-block .fc-row {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 4px 8px;
        margin-bottom: 10px;
    }
    .footer-bottom {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        text-align: center;
        padding-top: 18px !important;
    }
    .footer-bottom .pull-left,
    .footer-bottom .pull-right,
    .footer-bottom .float-left,
    .footer-bottom .float-right {
        float: none !important;
        margin: 0 !important;
    }
    .footer-bottom p { font-size: 12.5px !important; }
    .back-to-top {
        right: 14px !important;
        bottom: 14px !important;
        width: 40px !important;
        height: 40px !important;
    }
}

/* ---- 6. cards, grids and forms -----------------------------
   The theme's own layouts: everything two-up becomes one-up, and
   anything that was a fixed grid becomes an auto-fitting one. */
@media (max-width: 767px) {
    .dashboard-stats,
    .home-panels-flex-row,
    .upg-packages, .usg-grid, .mdg-grid,
    .dept-select-grid, .acct-grid, .dashboard-quicklinks {
        grid-template-columns: 1fr !important;
        display: grid !important;
        gap: 12px !important;
    }
    .dashboard-hero { padding: 22px 18px !important; }
    .dashboard-hero h1, .dashboard-hello { font-size: 21px !important; }

    .panel, .card, .co-card, .dmp-card, .pmt-card, .rn-card,
    .ns-issue, .ct-card, .tfb-card, .usg-card, .upg-card {
        border-radius: 14px !important;
    }
    .panel-body, .co-card-body, .dmp-form-body, .ct-card-body,
    .tfb-card, .usg-card, .upg-package-body { padding: 16px 16px !important; }
    .co-card-head, .dmp-form-head, .ct-card-head,
    .rn-card-head, .ns-issue-head { padding: 14px 16px !important; }

    /* action rows: buttons go full width and stack, primary last so
       it sits closest to the thumb */
    .dmp-actions, .cxl-actions, .tfb-actions, .st-actions,
    .upg-actions, .ct-actions, .modal-footer {
        display: flex !important;
        flex-direction: column-reverse !important;
        gap: 8px !important;
    }
    .dmp-actions .dmp-btn, .cxl-actions .cxl-btn, .tfb-actions .st-btn,
    .st-actions .st-btn, .upg-actions .upg-btn, .modal-footer .btn {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    /* inputs at 16px so iOS Safari stops zooming the page on focus */
    input[type="text"], input[type="email"], input[type="password"],
    input[type="tel"], input[type="number"], input[type="search"],
    input[type="url"], select, textarea, .form-control {
        font-size: 16px !important;
    }
    .form-horizontal .control-label {
        text-align: left !important;
        padding-bottom: 6px !important;
    }
    .form-horizontal [class*="col-sm-"] { width: 100% !important; float: none !important; }
}

/* ---- 7. modals ---------------------------------------------- */
@media (max-width: 575px) {
    .modal.in, .modal.show { padding: 12px !important; }
    .modal-dialog { margin: 0 auto !important; max-width: 100% !important; }
    .modal-body { padding: 24px 20px 18px !important; }
    .modal-footer { padding: 0 20px 22px !important; }
    .modal-title { font-size: 18px !important; }
}

/* ---- 8. typography scale ------------------------------------ */
@media (max-width: 767px) {
    h1, .page-header h1 { font-size: 23px !important; line-height: 1.35 !important; }
    h2 { font-size: 20px !important; }
    h3 { font-size: 17px !important; }
    .header-lined h1 { font-size: 22px !important; }
    body { font-size: 14px; }
}

/* ---- 9. touch targets --------------------------------------
   Anything tappable gets to 40px so it can actually be hit. */
@media (max-width: 767px) and (pointer: coarse) {
    .btn, .dmp-btn, .pmt-btn, .st-btn, .upg-btn, .ct-btn,
    .pmt-action, .dmp-actions input, .rn-add {
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .pagination > li > a, .pagination > li > span {
        min-width: 40px;
        min-height: 40px;
        line-height: 38px !important;
        text-align: center;
    }
}

/* ---- 10. fixes found by measuring real pages at 390px --------
   Three elements were still pushing past the viewport. Each is
   named here with what it was doing. */
@media (max-width: 767px) {

    /* the cancellation page's ghost button sat in a flex column but
       kept its intrinsic width from the desktop rule */
    .cxl-actions .cxl-btn,
    .cxl-state .cxl-btn {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
    }

    /* the network-status server table is genuinely wide (seven
       columns of live port checks) so it scrolls inside its card
       rather than being squeezed unreadably */
    .ns-servers .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        margin: 0 !important;
        border: none !important;
    }
    .ns-table {
        display: table !important;
        width: auto !important;
        min-width: 620px !important;
    }
    .ns-servers-head { padding: 16px 18px !important; }
    /* a hint that the table moves sideways */
    .ns-servers .table-responsive::after {
        content: "";
        display: block;
        height: 2px;
    }

    /* the promo-code field inside the cart: the input keeps its
       size attribute width unless it is told otherwise */
    #order-standard_cart .view-cart-tabs .form-control,
    #order-standard_cart .view-cart-tabs input.field,
    #order-standard_cart .promo-form .form-control {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    #order-standard_cart .view-cart-tabs .tab-pane.promo form {
        flex-wrap: wrap !important;
    }
    #order-standard_cart .view-cart-tabs .tab-pane.promo .form-group {
        flex: 1 1 100% !important;
    }
}

/* ---- 11. footer rhythm on small screens --------------------
   With two columns, a very long link list (Europe VPS has twelve
   entries) leaves its neighbour with a tall gap before the next
   row starts. Dense rows and a smaller line height keep the two
   columns closer in height without dropping any links. */
@media (max-width: 767px) {
    .footer-columns {
        grid-auto-rows: min-content;
        align-items: start;
    }
    .footer-columns > [class*="col-"] { align-self: start; }
    .footer-columns li { margin-bottom: 5px !important; line-height: 1.5 !important; }
    .footer-columns a { line-height: 1.5 !important; }
    .footer-columns h4 { margin: 0 0 10px !important; }
    .footer-columns .footer-subheading { margin-top: 16px !important; }
    section#footer.site-footer { padding: 30px 0 14px !important; }
}

/* the marketing strip gets a soft fade on its right edge so it is
   obvious that it scrolls rather than being cut off */
@media (max-width: 991px) {
    section#header .header-inner { position: relative; }
    section#header .header-marketing-nav {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
    }
}

/* ============================================================
   DASHBOARD — CAP THE RECENT TICKETS PANEL AT 4 ROWS
   The panel body is produced by {outputHomePanels}, so the row
   count can only be limited here.
   ============================================================ */
#ticketsPanel .list-group > .list-group-item:nth-child(n+5),
#ticketsPanel .panel-body > .list-group > a:nth-child(n+5),
#ticketsPanel table > tbody > tr:nth-child(n+5) {
    display: none !important;
}

/* ============================================================
   CONFIGURE PRODUCT (configureproduct.tpl) — LAYOUT
   The page carries no design of its own, so it fell back to the
   order form's stock stylesheet and the two columns collapsed,
   dropping the Continue button underneath the order summary.
   These rules rebuild the two-column shell and make the summary
   column sticky. Scoped to .configure-page so the renewals page,
   which shares the same class names, is untouched.
   ============================================================ */
#order-standard_cart.configure-page .cart-body > form > .row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-left: 0;
    margin-right: 0;
}

#order-standard_cart.configure-page .secondary-cart-body {
    flex: 1 1 0;
    min-width: 0;
    float: none !important;
    width: auto !important;
    padding: 0 24px 0 0 !important;
}

#order-standard_cart.configure-page .secondary-cart-sidebar {
    flex: 0 0 330px;
    max-width: 330px;
    float: none !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

#order-standard_cart.configure-page #orderSummary {
    position: sticky;
    top: 20px;
}

#order-standard_cart.configure-page #orderSummary .text-center {
    margin-top: 14px;
}

#order-standard_cart.configure-page .product-info {
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    padding: 20px 22px;
    margin-bottom: 20px;
}

#order-standard_cart.configure-page .product-info .product-title {
    font-size: 19px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 6px;
}

#order-standard_cart.configure-page .product-configurable-options,
#order-standard_cart.configure-page .addon-products {
    margin-left: 0;
    margin-right: 0;
}

#order-standard_cart.configure-page .panel-addon {
    border: 1px solid var(--db-border) !important;
    border-radius: var(--db-radius) !important;
    box-shadow: none !important;
}

#order-standard_cart.configure-page .panel-addon.panel-addon-selected {
    border-color: var(--db-purple) !important;
}

@media (max-width: 991px) {
    #order-standard_cart.configure-page .cart-body > form > .row {
        display: block;
    }
    #order-standard_cart.configure-page .secondary-cart-body,
    #order-standard_cart.configure-page .secondary-cart-sidebar {
        max-width: none;
        padding: 0 !important;
    }
    #order-standard_cart.configure-page .secondary-cart-sidebar {
        margin-top: 20px !important;
    }
    #order-standard_cart.configure-page #orderSummary {
        position: static;
    }
}

/* ============================================================
   MARKDOWN EDITOR — REMOVE THE FULLSCREEN CONTROL
   The editor is initialised inside the bundled scripts.min.js, so
   the option set in js/whmcs.js never reaches it. Removing the
   control here takes the button out of the toolbar for good, and
   the leftover fullscreen classes are neutralised in case an old
   cached bundle still applies one.
   ============================================================ */
.md-editor .md-controls,
.md-editor .md-control-fullscreen,
.md-header .md-control-fullscreen {
    display: none !important;
}

.md-editor.md-fullscreen-mode,
.md-editor.md-fullscreen-mode .md-input,
.md-editor.md-fullscreen-mode .md-preview {
    position: static !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    z-index: auto !important;
}

/* ============================================================
   CONFIGURE PRODUCT — CONTINUE BUTTON
   The button now sits inside the order summary card rather than
   floating underneath it.
   ============================================================ */
#order-standard_cart.configure-page .order-summary-action {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--db-border);
}

#order-standard_cart.configure-page #btnCompleteProductConfig {
    width: 100% !important;
    margin: 0 !important;
    box-shadow: none !important;
}

/* ============================================================
   12. MODULE PAGES CARRIED OVER FROM THE PREVIOUS THEME
   The IRNIC handle forms and the crypto gateway pages come from
   third-party modules and were never part of this design, so they
   had no rules at all. These give them the theme's card look and,
   more importantly, stop their old table markup from stretching
   the page on a phone.
   ============================================================ */

/* ---- IRNIC handle forms (table.frame) ---- */
table.frame {
    width: 100% !important;
    max-width: 100%;
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    border-collapse: separate;
    margin-bottom: 20px;
}

table.frame table {
    width: 100% !important;
    max-width: 100%;
}

table.frame td,
table.frame th {
    vertical-align: top;
}

table.frame .fieldarea {
    font-weight: 600;
    color: #1a1a2e;
}

table.frame .mandatory {
    color: #e5484d;
    margin-right: 3px;
}

table.frame .example {
    font-size: 12px;
    color: var(--db-text-muted);
    margin-top: 4px;
}

table.frame input[type="text"],
table.frame input[type="email"],
table.frame input[type="password"],
table.frame select,
table.frame textarea {
    width: 100%;
    max-width: 420px;
    border: 1px solid var(--db-border);
    border-radius: 10px;
    padding: 9px 12px;
    background: #fff;
}

table.frame input[type="text"]:focus,
table.frame select:focus,
table.frame textarea:focus {
    border-color: var(--db-purple);
    outline: none;
    box-shadow: 0 0 0 3px rgba(108, 78, 245, 0.12);
}

table.frame .admonition {
    background: var(--db-purple-light);
    border-radius: 12px;
}

table.frame h3 {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 18px 0 6px;
}

/* On a phone the label/value columns stack instead of squeezing. */
@media (max-width: 767px) {
    table.frame,
    table.frame > tbody,
    table.frame > tbody > tr,
    table.frame > tbody > tr > td,
    table.frame table,
    table.frame table > tbody,
    table.frame table > tbody > tr,
    table.frame table > tbody > tr > td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    table.frame colgroup { display: none !important; }
    table.frame table > tbody > tr {
        padding: 10px 0;
        border-bottom: 1px solid var(--db-border);
    }
    table.frame table > tbody > tr:last-child { border-bottom: 0; }
    table.frame td { padding: 4px 12px !important; }
    table.frame .fieldarea { padding-bottom: 2px !important; }
    table.frame input[type="text"],
    table.frame select,
    table.frame textarea { max-width: 100%; }
    table.frame img { max-width: 100%; height: auto; }
}

/* ---- crypto gateway payment pages ---- */
.crypto-payment-container {
    max-width: 620px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    padding: 26px 28px;
}

.crypto-payment-container h2 {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 18px;
}

.crypto-payment-container .qr-code {
    text-align: center;
    margin-bottom: 18px;
}

.crypto-payment-container .qr-code img {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--db-border);
    border-radius: 12px;
    padding: 8px;
    background: #fff;
}

.crypto-payment-container .instructions p {
    line-height: 1.8;
}

.crypto-payment-container .input-group,
.crypto-payment-container .form-control {
    max-width: 100%;
}

.crypto-payment-container .table-transaction {
    width: 100%;
    max-width: 100%;
}

@media (max-width: 767px) {
    .crypto-payment-container { padding: 20px 16px; }
    .crypto-payment-container .table-transaction {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ---- configure product: phone refinements ---- */
@media (max-width: 767px) {
    #order-standard_cart.configure-page .secondary-cart-body,
    #order-standard_cart.configure-page .secondary-cart-sidebar {
        flex-basis: 100% !important;
        min-width: 0 !important;
    }
    #order-standard_cart.configure-page .product-info { padding: 16px 14px; }
    #order-standard_cart.configure-page .addon-products > [class*="col-"] {
        width: 100% !important;
        float: none !important;
    }
}

/* ============================================================
   13. STORE GRID — SELF-BALANCING PLAN LAYOUT
   The grid was locked to three columns, so a category with four
   plans left a single orphan card on its own row. A wrapping flex
   row lets the cards decide how many fit, share the width evenly,
   and centre whatever is left over on the last row, so the block
   stays tidy at any plan count.
   ============================================================ */
#order-standard_cart .store-grid,
#order-standard_cart .products.store-grid {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 18px;
    grid-template-columns: none !important;
}

#order-standard_cart .store-grid > .store-card {
    flex: 1 1 240px;
    min-width: 230px;
    max-width: 300px;
    margin: 0;
}

/* A single plan keeps the same card size as any other page. */
#order-standard_cart .store-grid:not(:has(> .store-card:nth-child(2))) > .store-card {
    flex: 0 0 300px;
    max-width: 300px;
}

@media (max-width: 767px) {
    #order-standard_cart .store-grid {
        gap: 14px;
    }
    #order-standard_cart .store-grid > .store-card,
    #order-standard_cart .store-grid:not(:has(> .store-card:nth-child(2))) > .store-card {
        flex: 1 1 100%;
        min-width: 0;
        max-width: 420px;
    }
}

/* ---- stock badge states ---- */
#order-standard_cart .store-stock.is-low,
#order-standard_cart .products .store-card .store-stock.is-low {
    background: #fdf0dc !important;
    color: #b96f0a !important;
}

#order-standard_cart .store-stock.is-out,
#order-standard_cart .products .store-card .store-stock.is-out {
    background: #fdE7E8 !important;
    color: #d0353a !important;
    border: 1px solid rgba(208, 53, 58, 0.25);
}