/* =============================================================================
   MVLTD — System Pages Compatibility Stylesheet  (MVLTD Glass)
   -----------------------------------------------------------------------------
   Restyles the WHMCS "six"-derived system pages (announcements, affiliates,
   support tickets, knowledgebase, contact, invoices, product details, profile,
   etc.) to match the MVLTD Glass design used by the rest of the site.

   It provides:
     1. A minimal Bootstrap-compatible grid (.container/.row/.col-*) so the
        imported page markup lays out correctly WITHOUT loading full Bootstrap.
     2. MVLTD Glass restyling of every six/Bootstrap component the pages use
        (panels, tables, buttons, forms, alerts, labels, tabs, list-groups,
        breadcrumbs, pagination, wells, badges).

   Loaded AFTER theme.css so it can rely on the --mvltd-* tokens.
   ============================================================================= */

/* ---- System-page content wrapper ----------------------------------------
   The shell (.mvltd-system-shell) is ALWAYS emitted by header/footer. By
   default it is a transparent, zero-padding pass-through so the marketing
   pages (homepage, login, register, clientareahome) look exactly as before.
   Padding, max-width, the branded page header and glass styling are switched
   ON only for the WHMCS system pages via the body `tpl-*` class.
-------------------------------------------------------------------------- */
.mvltd-system-shell { padding: 0; }
.mvltd-system-inner { width: 100%; }

/* Hide the auto page-header everywhere by default (marketing pages own theirs) */
.mvltd-system-pagehead { display: none; }

/* Marketing / custom pages that must stay full-width & untouched */
body.tpl-homepage .mvltd-system-inner,
body.tpl-login .mvltd-system-inner,
body.tpl-register .mvltd-system-inner,
body.tpl-clientareahome .mvltd-system-inner { max-width: none; padding: 0; }

/* ------- Turn the shell into a branded container for SYSTEM pages ------- */
/* Any page that is NOT one of the custom marketing templates. We opt-in the
   known WHMCS system templates below, and also provide a broad fallback. */
body:not(.tpl-homepage):not(.tpl-login):not(.tpl-register):not(.tpl-clientareahome):not(.tpl-cart) .mvltd-system-inner {
    max-width: var(--mvltd-maxw, 1120px);
    margin: 0 auto;
    padding: 34px 20px 64px;
    width: 100%;
    color: var(--mvltd-text, #eef0ff);
    font-family: var(--mvltd-font, 'Inter', sans-serif);
}
body:not(.tpl-homepage):not(.tpl-login):not(.tpl-register):not(.tpl-clientareahome):not(.tpl-cart) .mvltd-system-pagehead {
    display: block;
    margin: 0 0 26px;
    padding: 0 0 16px;
    border-bottom: 1px solid var(--mvltd-glass-border, rgba(255,255,255,.13));
}
body:not(.tpl-homepage):not(.tpl-login):not(.tpl-register):not(.tpl-clientareahome):not(.tpl-cart) .mvltd-system-pagehead h1 {
    margin: 0 0 6px;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -.02em;
    background: var(--mvltd-grad-head, linear-gradient(120deg,#fff,#b9a9ff 55%,#7fe9ff));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}

.mvltd-system .container,
#main-body .container {
    max-width: var(--mvltd-maxw, 1120px);
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}

/* =============================================================================
   1. MINIMAL GRID  (Bootstrap-compatible subset)
   ============================================================================= */
.container-fluid { width: 100%; padding: 0 20px; margin: 0 auto; }
.row { display: flex; flex-wrap: wrap; margin: 0 -12px; }
.row > [class*="col-"] { padding: 0 12px; }
[class*="col-"] { position: relative; width: 100%; min-height: 1px; box-sizing: border-box; }

.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
.col-md-9  { flex: 0 0 75%;  max-width: 75%; }
.col-md-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
.col-md-6, .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
.col-md-4, .col-sm-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
.col-md-3  { flex: 0 0 25%; max-width: 25%; }
.col-md-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }

.pull-md-right { order: 2; }
.pull-md-left  { order: 1; }
.clearfix::after { content: ""; display: table; clear: both; }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-left   { text-align: left; }
.hidden { display: none !important; }
.margin-bottom { margin-bottom: 18px; }
.margin-top { margin-top: 18px; }

@media (max-width: 768px) {
    .row { display: block; margin: 0; }
    .row > [class*="col-"] { padding: 0; }
    [class*="col-"] { flex: 0 0 100% !important; max-width: 100% !important; }
    .pull-md-right, .pull-md-left { order: 0; }
}

/* =============================================================================
   2. TYPOGRAPHY / PAGE HEADERS
   ============================================================================= */
#main-body,
.mvltd-system {
    color: var(--mvltd-text, #eef0ff);
    font-family: var(--mvltd-font, 'Inter', sans-serif);
}
.mvltd-system h1, .mvltd-system h2, .mvltd-system h3,
#main-body h1, #main-body h2, #main-body h3 { color: var(--mvltd-text, #eef0ff); }

.header-lined,
.page-header {
    margin: 0 0 26px;
    padding: 0 0 16px;
    border-bottom: 1px solid var(--mvltd-glass-border, rgba(255,255,255,.13));
}
.header-lined h1,
.page-header h1 {
    margin: 0;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -.02em;
    background: var(--mvltd-grad-head, linear-gradient(120deg,#fff,#b9a9ff 55%,#7fe9ff));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.header-lined h1 small,
.page-header h1 small { color: var(--mvltd-muted, #a2a6c8); font-size: 15px; -webkit-text-fill-color: var(--mvltd-muted,#a2a6c8); }

a { color: var(--mvltd-accent2, #00e0ff); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--mvltd-accent, #7c5cff); }

/* =============================================================================
   3. PANELS / CARDS / WELLS  ->  glass
   ============================================================================= */
.panel,
.well,
.card {
    background: var(--mvltd-glass, rgba(255,255,255,.06));
    border: 1px solid var(--mvltd-glass-border, rgba(255,255,255,.13));
    border-radius: var(--mvltd-radius, 16px);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 6px 22px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
    margin-bottom: 22px;
    overflow: hidden;
}
.panel-heading {
    padding: 15px 20px;
    border-bottom: 1px solid var(--mvltd-glass-border, rgba(255,255,255,.13));
    background: rgba(255,255,255,.03);
}
.panel-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--mvltd-text, #eef0ff); }
.panel-body { padding: 20px; }
.panel-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--mvltd-glass-border, rgba(255,255,255,.13));
    background: rgba(255,255,255,.03);
}
.panel-default > .panel-heading { color: var(--mvltd-text, #eef0ff); }
.panel-primary > .panel-heading,
.panel-info > .panel-heading { background: var(--mvltd-grad-nav, linear-gradient(120deg,color-mix(in srgb, var(--mvltd-accent) 28%, transparent),color-mix(in srgb, var(--mvltd-accent2) 16%, transparent))); }
.well { padding: 20px; }

/* Announcement list items */
.announcement-single {
    background: var(--mvltd-glass, rgba(255,255,255,.06));
    border: 1px solid var(--mvltd-glass-border, rgba(255,255,255,.13));
    border-radius: var(--mvltd-radius, 16px);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 6px 22px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
    padding: 22px 24px;
    margin-bottom: 18px;
}
.announcement-single .title { font-size: 20px; font-weight: 700; color: var(--mvltd-text, #eef0ff); display: inline-block; margin-bottom: 8px; }
.announcement-single .title:hover { color: var(--mvltd-accent2, #00e0ff); }
.announcement-single p { color: var(--mvltd-muted, #a2a6c8); line-height: 1.65; }
.announcement-single .article-items { color: var(--mvltd-muted, #a2a6c8); font-size: 13px; margin-top: 10px; }

/* =============================================================================
   4. BUTTONS  ->  glass / gradient
   ============================================================================= */
.btn {
    display: inline-block;
    font-family: var(--mvltd-font, 'Inter', sans-serif);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.4;
    padding: 10px 18px;
    border-radius: var(--mvltd-radius-btn, 11px);
    border: 1px solid var(--mvltd-glass-border, rgba(255,255,255,.13));
    background: var(--mvltd-glass-strong, rgba(255,255,255,.09));
    color: var(--mvltd-text, #eef0ff);
    cursor: pointer;
    transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s, background .25s;
    text-decoration: none;
}
.btn:hover { transform: translateY(-2px); color: #fff; background: var(--mvltd-glass-strong, rgba(255,255,255,.14)); }
.btn:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--mvltd-accent) 35%, transparent); }

.btn-primary,
.btn-success {
    color: #fff;
    border: none;
    background: var(--mvltd-grad, linear-gradient(120deg,#7c5cff,#00e0ff));
    box-shadow: 0 3px 14px color-mix(in srgb, var(--mvltd-accent) 40%, transparent);
}
.btn-primary:hover,
.btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--mvltd-accent) 60%, transparent), 0 0 14px color-mix(in srgb, var(--mvltd-accent2) 45%, transparent);
    color: #fff;
}
.btn-danger { background: var(--mvltd-err, #ff5c7c); border: none; color: #fff; }
.btn-warning { background: var(--mvltd-warn, #ffcf5c); border: none; color: #111; }
.btn-info { background: var(--mvltd-info, #00e0ff); border: none; color: #06121a; }
.btn-link { background: none; border: none; color: var(--mvltd-accent2, #00e0ff); }
.btn-sm, .btn-xs { padding: 6px 12px; font-size: 13px; }
.btn-lg { padding: 13px 24px; font-size: 16px; }
.btn-block { display: block; width: 100%; }
.btn.active { box-shadow: inset 0 0 0 2px var(--mvltd-accent, #7c5cff); }
.btn[disabled], .btn.disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-group { display: inline-flex; }
.btn-group .btn { border-radius: 0; }
.btn-group .btn:first-child { border-top-left-radius: var(--mvltd-radius-btn,11px); border-bottom-left-radius: var(--mvltd-radius-btn,11px); }
.btn-group .btn:last-child { border-top-right-radius: var(--mvltd-radius-btn,11px); border-bottom-right-radius: var(--mvltd-radius-btn,11px); }

/* =============================================================================
   5. TABLES  ->  glass
   ============================================================================= */
.table {
    width: 100%;
    border-collapse: collapse;
    background: var(--mvltd-glass, rgba(255,255,255,.05));
    border: 1px solid var(--mvltd-glass-border, rgba(255,255,255,.13));
    border-radius: var(--mvltd-radius, 16px);
    overflow: hidden;
    color: var(--mvltd-text, #eef0ff);
    margin-bottom: 22px;
}
.table > thead > tr > th,
.table th {
    text-align: left;
    padding: 13px 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mvltd-muted, #a2a6c8);
    background: rgba(255,255,255,.04);
    border-bottom: 1px solid var(--mvltd-glass-border, rgba(255,255,255,.13));
}
.table > tbody > tr > td,
.table td {
    padding: 13px 16px;
    border-top: 1px solid rgba(255,255,255,.06);
    vertical-align: middle;
}
.table > tbody > tr:hover { background: rgba(255,255,255,.04); }
.table-striped > tbody > tr:nth-child(odd) { background: rgba(255,255,255,.02); }
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* =============================================================================
   6. FORMS  ->  glass inputs
   ============================================================================= */
.form-group { margin-bottom: 16px; }
.control-label, label { display: inline-block; margin-bottom: 6px; font-weight: 600; color: var(--mvltd-text, #eef0ff); }
.form-control,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="tel"], input[type="url"], input[type="search"],
select, textarea {
    display: block;
    width: 100%;
    padding: 11px 14px;
    font-family: var(--mvltd-font, 'Inter', sans-serif);
    font-size: 14px;
    color: var(--mvltd-text, #eef0ff);
    background: rgba(0,0,0,.25);
    border: 1px solid var(--mvltd-glass-border, rgba(255,255,255,.13));
    border-radius: var(--mvltd-radius-btn, 11px);
    transition: border-color .2s, box-shadow .2s;
    box-sizing: border-box;
}
.form-control:focus,
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--mvltd-accent, #7c5cff);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mvltd-accent) 25%, transparent);
}
.form-control::placeholder, input::placeholder, textarea::placeholder { color: var(--mvltd-muted, #a2a6c8); opacity: .7; }
select option { background: var(--mvltd-bg2, #141414); color: var(--mvltd-text, #eef0ff); }
.input-group { display: flex; }
.input-group .form-control { border-radius: var(--mvltd-radius-btn,11px) 0 0 var(--mvltd-radius-btn,11px); }
.input-group-addon,
.input-group-btn { display: flex; align-items: center; }
.help-block, .text-muted { color: var(--mvltd-muted, #a2a6c8); font-size: 13px; }
.checkbox, .radio { color: var(--mvltd-text, #eef0ff); }

/* =============================================================================
   7. ALERTS / LABELS / BADGES
   ============================================================================= */
.alert {
    padding: 14px 18px;
    border-radius: var(--mvltd-radius-btn, 11px);
    border: 1px solid transparent;
    margin-bottom: 18px;
    background: var(--mvltd-glass, rgba(255,255,255,.06));
    color: var(--mvltd-text, #eef0ff);
}
.alert-success { border-color: var(--mvltd-ok, #3ddc84);   background: rgba(61,220,132,.12); color: #b6f5d2; }
.alert-info    { border-color: var(--mvltd-info, #00e0ff);  background: color-mix(in srgb, var(--mvltd-accent2) 12%, transparent);  color: #b3f2ff; }
.alert-warning { border-color: var(--mvltd-warn, #ffcf5c);  background: rgba(255,207,92,.12); color: #ffe9b3; }
.alert-danger  { border-color: var(--mvltd-err, #ff5c7c);   background: rgba(255,92,124,.12); color: #ffc4d0; }

.label, .badge {
    display: inline-block;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 999px;
    color: #fff;
    background: var(--mvltd-glass-strong, rgba(255,255,255,.12));
}
.label-success, .badge-success { background: var(--mvltd-ok, #3ddc84); color: #06210f; }
.label-info, .badge-info       { background: var(--mvltd-info, #00e0ff); color: #06121a; }
.label-warning, .badge-warning { background: var(--mvltd-warn, #ffcf5c); color: #241a00; }
.label-danger, .badge-danger   { background: var(--mvltd-err, #ff5c7c); color: #2a0009; }
.label-default { background: var(--mvltd-glass-strong, rgba(255,255,255,.12)); }

/* Status pills used across client area */
.status-active, .label-active { background: var(--mvltd-ok, #3ddc84); color: #06210f; }
.status-pending { background: var(--mvltd-warn, #ffcf5c); color: #241a00; }
.status-suspended, .status-cancelled { background: var(--mvltd-err, #ff5c7c); color: #2a0009; }

/* =============================================================================
   8. TABS / NAV / LIST-GROUP
   ============================================================================= */
.nav-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    border-bottom: 1px solid var(--mvltd-glass-border, rgba(255,255,255,.13));
    margin-bottom: 20px;
    padding: 0;
    list-style: none;
}
.nav-tabs > li > a, .nav-tabs > li a {
    display: block;
    padding: 10px 16px;
    border-radius: var(--mvltd-radius-btn,11px) var(--mvltd-radius-btn,11px) 0 0;
    color: var(--mvltd-muted, #a2a6c8);
    font-weight: 600;
}
.nav-tabs > li.active > a, .nav-tabs > li > a:hover {
    color: #fff;
    background: var(--mvltd-grad-nav, linear-gradient(120deg,color-mix(in srgb, var(--mvltd-accent) 28%, transparent),color-mix(in srgb, var(--mvltd-accent2) 16%, transparent)));
}
.list-group { list-style: none; padding: 0; margin: 0 0 20px; }
.list-group-item {
    padding: 13px 16px;
    background: var(--mvltd-glass, rgba(255,255,255,.05));
    border: 1px solid var(--mvltd-glass-border, rgba(255,255,255,.13));
    color: var(--mvltd-text, #eef0ff);
}
.list-group-item + .list-group-item { border-top: none; }
.list-group-item:first-child { border-radius: var(--mvltd-radius,16px) var(--mvltd-radius,16px) 0 0; }
.list-group-item:last-child  { border-radius: 0 0 var(--mvltd-radius,16px) var(--mvltd-radius,16px); }
.list-group-item.active { background: var(--mvltd-grad-nav, linear-gradient(120deg,color-mix(in srgb, var(--mvltd-accent) 28%, transparent),color-mix(in srgb, var(--mvltd-accent2) 16%, transparent))); }

/* =============================================================================
   9. BREADCRUMB / PAGINATION
   ============================================================================= */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--mvltd-muted, #a2a6c8);
}
.breadcrumb > li + li::before { content: "/"; padding: 0 6px; color: var(--mvltd-muted, #a2a6c8); }
.breadcrumb a { color: var(--mvltd-accent2, #00e0ff); }
.pagination { display: inline-flex; gap: 4px; list-style: none; padding: 0; }
.pagination > li > a, .pagination > li > span {
    display: block; padding: 8px 13px;
    border: 1px solid var(--mvltd-glass-border, rgba(255,255,255,.13));
    border-radius: var(--mvltd-radius-btn,11px);
    color: var(--mvltd-text, #eef0ff);
    background: var(--mvltd-glass, rgba(255,255,255,.05));
}
.pagination > li.active > a, .pagination > li.active > span {
    background: var(--mvltd-grad, linear-gradient(120deg,#7c5cff,#00e0ff)); border: none; color: #fff;
}

/* =============================================================================
   10. MISC WHMCS BITS
   ============================================================================= */
.jumbotron { background: var(--mvltd-glass, rgba(255,255,255,.06)); border-radius: var(--mvltd-radius,16px); padding: 34px; border: 1px solid var(--mvltd-glass-border, rgba(255,255,255,.13)); }
hr { border: none; border-top: 1px solid var(--mvltd-glass-border, rgba(255,255,255,.13)); margin: 20px 0; }
.back-to-top { color: var(--mvltd-accent2, #00e0ff); }
code, pre { background: rgba(0,0,0,.35); border: 1px solid var(--mvltd-glass-border, rgba(255,255,255,.13)); border-radius: 8px; color: #b9a9ff; }
.dropdown-menu { background: var(--mvltd-bg2, #141414); border: 1px solid var(--mvltd-glass-border, rgba(255,255,255,.13)); border-radius: var(--mvltd-radius-btn,11px); }
.dropdown-menu > li > a { color: var(--mvltd-text, #eef0ff); padding: 9px 14px; display: block; }
.dropdown-menu > li > a:hover { background: rgba(255,255,255,.06); }
.progress { background: rgba(0,0,0,.3); border-radius: 999px; overflow: hidden; height: 10px; }
.progress-bar { background: var(--mvltd-grad, linear-gradient(120deg,#7c5cff,#00e0ff)); height: 100%; }

/* =============================================================================
   11. SIDEBAR (WHMCS primary/secondary sidebars on system pages)
   ============================================================================= */
.sidebar { margin-bottom: 24px; }
.panel-sidebar { margin-bottom: 18px; }
.panel-sidebar .panel-heading { cursor: default; }
.panel-sidebar .panel-title { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.panel-sidebar .panel-minimise { margin-left: auto; opacity: .5; font-size: 12px; }
.panel-sidebar .list-group { margin: 0; border-radius: 0 0 var(--mvltd-radius,16px) var(--mvltd-radius,16px); }
.panel-sidebar .list-group-item { border-left: none; border-right: none; background: transparent; display: flex; align-items: center; gap: 9px; transition: background .2s, color .2s; }
.panel-sidebar .list-group-item:hover { background: rgba(255,255,255,.05); color: var(--mvltd-accent2, #00e0ff); }
.panel-sidebar .list-group-item.active { background: var(--mvltd-grad-nav, linear-gradient(120deg,color-mix(in srgb, var(--mvltd-accent) 28%, transparent),color-mix(in srgb, var(--mvltd-accent2) 16%, transparent))); color: #fff; }
.panel-sidebar .list-group-item.active .sidebar-menu-item-icon,
.panel-sidebar .list-group-item.active i { color: #fff; }
.sidebar-menu-item-icon { width: 16px; text-align: center; color: var(--mvltd-accent2, #00e0ff); }
.panel-sidebar .badge { margin-left: auto; }

/* Support-ticket & KB list rows, contact form etc. inherit .panel/.form-control above */
.main-content { min-height: 40vh; }
.margin-bottom { margin-bottom: 18px; }

/* ============================================================
   Section 12 — Client area dashboard home panels (MVLTD)
   ============================================================ */

/* stat cards as links keep card look, no underline */
.mvltd-clientarea .mvltd-stat,
.mvltd-clientarea a.mvltd-stat { text-decoration: none; color: inherit; transition: transform .15s ease, box-shadow .15s ease; }
.mvltd-clientarea a.mvltd-stat:hover { transform: translateY(-2px); box-shadow: 0 10px 30px color-mix(in srgb, var(--mvltd-accent) 18%, transparent); }

/* KB search */
.mvltd-home-kb { margin: 0 0 22px; }
.mvltd-home-kb-inner { position: relative; }
.mvltd-home-kb-inner i {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    color: var(--mvltd-accent2, #00e0ff); opacity: .8; font-size: 1rem;
}
.mvltd-home-kb .mvltd-input {
    width: 100%; padding: 14px 16px 14px 44px;
    background: var(--mvltd-glass, rgba(255,255,255,.06));
    border: 1px solid rgba(255,255,255,.10);
    border-radius: var(--mvltd-radius, 16px);
    color: #fff; font-family: var(--mvltd-font, 'Inter', sans-serif); font-size: .95rem;
}
.mvltd-home-kb .mvltd-input::placeholder { color: rgba(255,255,255,.45); }
.mvltd-home-kb .mvltd-input:focus {
    outline: none; border-color: var(--mvltd-accent, #7c5cff);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mvltd-accent) 22%, transparent);
}

/* Home panels grid */
.mvltd-home-panels { margin-top: 4px; }
.mvltd-hp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 900px) { .mvltd-hp-cols { grid-template-columns: 1fr; } }

/* Panel glass restyle */
.mvltd-home-panels .panel,
.panel.mvltd-hp {
    background: var(--mvltd-glass, rgba(255,255,255,.06));
    border: 1px solid rgba(255,255,255,.10);
    border-radius: var(--mvltd-radius, 16px);
    margin-bottom: 20px; overflow: hidden;
    box-shadow: 0 8px 28px rgba(0,0,0,.28);
    backdrop-filter: blur(10px);
}
.mvltd-home-panels .panel-heading {
    padding: 16px 18px; background: rgba(255,255,255,.03);
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.mvltd-home-panels .panel-title {
    margin: 0; font-size: 1.02rem; font-weight: 700; color: #fff;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.mvltd-home-panels .panel-title i { color: var(--mvltd-accent2, #00e0ff); }
.mvltd-home-panels .panel-title .pull-right { order: 2; }
.mvltd-home-panels .panel-body { padding: 16px 18px; color: rgba(255,255,255,.86); }
.mvltd-home-panels .panel-footer {
    padding: 12px 18px; background: rgba(255,255,255,.02);
    border-top: 1px solid rgba(255,255,255,.08); font-size: .88rem;
}
.mvltd-home-panels .badge {
    background: var(--mvltd-grad, linear-gradient(135deg,#7c5cff,#00e0ff));
    color: #fff; border-radius: 999px; padding: 2px 9px; font-size: .72rem; font-weight: 700;
}

/* list-group items inside panels (active services, invoices, tickets rows) */
.mvltd-home-panels .list-group { border-top: 0; }
.mvltd-home-panels .list-group-item {
    display: block; padding: 13px 18px; color: rgba(255,255,255,.88);
    background: transparent; border: 0; border-top: 1px solid rgba(255,255,255,.06);
    text-decoration: none; transition: background .12s ease, color .12s ease;
}
.mvltd-home-panels .list-group-item:first-child { border-top: 0; }
a.list-group-item:hover { background: color-mix(in srgb, var(--mvltd-accent) 12%, transparent); color: #fff; }
.mvltd-home-panels .list-group-item.active {
    background: color-mix(in srgb, var(--mvltd-accent) 18%, transparent); color: #fff;
    box-shadow: inset 3px 0 0 var(--mvltd-accent, #7c5cff);
}
.mvltd-home-panels .list-group-item i { color: var(--mvltd-accent2, #00e0ff); }

/* colored accent bars per panel type */
.mvltd-home-panels .panel-accent-blue    { box-shadow: inset 4px 0 0 #3b82f6, 0 8px 28px rgba(0,0,0,.28); }
.mvltd-home-panels .panel-accent-green   { box-shadow: inset 4px 0 0 #22c55e, 0 8px 28px rgba(0,0,0,.28); }
.mvltd-home-panels .panel-accent-red     { box-shadow: inset 4px 0 0 #ef4444, 0 8px 28px rgba(0,0,0,.28); }
.mvltd-home-panels .panel-accent-gold,
.mvltd-home-panels .panel-accent-orange  { box-shadow: inset 4px 0 0 #f59e0b, 0 8px 28px rgba(0,0,0,.28); }

/* ============================================================
   Section 13 — Store product listing + order pages (MVLTD)
   Covers: index.php?rp=/store/* group pages (body.tpl-products),
   product cards, sidebar, order form, cart.
   ============================================================ */

/* page wrapper for store/order/cart bodies */
body.tpl-products .mvltd-system-inner,
body.tpl-configureproduct .mvltd-system-inner,
body.tpl-cart .mvltd-system-inner,
body.tpl-viewcart .mvltd-system-inner {
    max-width: var(--mvltd-maxw, 1200px);
    margin: 0 auto;
    padding: 34px 20px 64px;
}

/* ---- Product listing ---- */
/* NOTE: WHMCS wraps products in Bootstrap `.products > .row.row-eq-height > .col-md-*`.
   Do NOT turn `.products` into a grid — that fights the Bootstrap flex row and
   breaks the card shape. Instead we keep the Bootstrap layout and only make the
   columns equal-height + style the inner `.product` card. */
.products { margin: 8px 0 28px; }
.products .row,
.products .row-eq-height {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;   /* cards size to own content, not tallest */
    margin-left: -11px;
    margin-right: -11px;
}
.products .row > [class*="col-"],
.products .row-eq-height > [class*="col-"] {
    display: flex;
    align-items: flex-start;
    padding: 11px;
}
@media (max-width: 680px) {
    .products .row > [class*="col-"],
    .products .row-eq-height > [class*="col-"] { width: 100%; flex: 0 0 100%; max-width: 100%; }
}

/* ---------------------------------------------------------------------
   COMPACT product card (single source of truth — cart.css matches this).
   A simple vertical stack that sizes to its content: header, then the
   description, then a full-width footer row with the PRICE on the LEFT and
   "Order Now" on the RIGHT. No grid, no stretch, no forced height — that is
   what kept the cards huge and stacked "Order Now" below the price.
   --------------------------------------------------------------------- */
.product,
.product.clearfix {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    align-self: flex-start !important;   /* don't stretch to the tallest card */
    height: auto !important;
    background: var(--mvltd-glass, rgba(255,255,255,.06)) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: var(--mvltd-radius, 16px) !important;
    padding: 0 !important;
    color: rgba(255,255,255,.88) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,.28);
    backdrop-filter: blur(10px);
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
/* description: full-width block, capped preview image */
.product > .product-desc,
.product .product-desc {
    float: none !important;
    clear: both !important;
    width: 100% !important;
    display: block !important;
    flex: 0 0 auto !important;
    padding: 12px 18px !important;
    margin: 0 !important;
}
.product > .product-desc > p,
.product .product-desc > p,
.product > .product-desc > ul { margin: 0 0 8px !important; flex: none !important; }
.product > .product-desc img,
.product .product-desc img {
    display: block !important;
    float: none !important;
    order: 0 !important;
    max-width: 100% !important;
    max-height: 120px !important;
    width: auto !important; height: auto !important;
    object-fit: contain !important;
    margin: 8px 0 !important;
}
/* footer: full-width ROW — price left, Order Now right, no void, no stacking */
.product > footer,
.product footer {
    float: none !important;
    clear: both !important;
    width: 100% !important;
    height: auto !important;
    margin-top: 0 !important;
    padding: 12px 18px 14px !important;
    border-top: 1px solid rgba(255,255,255,.10) !important;
    border-left: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-align: left !important;
    gap: 12px !important;
}
.product > footer .product-pricing,
.product footer .product-pricing {
    text-align: left !important;
    margin: 0 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}
.product > footer .btn-order-now,
.product footer .btn-order-now,
.product > footer > a.btn,
.product footer > a.btn {
    margin: 0 !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
    padding: 9px 16px !important;
    font-size: .9rem !important;
}
/* mobile: stack price above a full-width button */
@media (max-width: 520px) {
    .product,
    .product.clearfix { max-width: 100%; }
    .product > footer,
    .product footer {
        flex-direction: column !important;
        align-items: stretch !important;
        text-align: center !important;
        gap: 10px !important;
    }
    .product > footer .btn-order-now,
    .product footer .btn-order-now,
    .product > footer > a.btn,
    .product footer > a.btn { width: 100% !important; }
}
/* header (product name) — kill the stock white title bar */
.product > header,
.product header {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 12px !important;
    text-align: center;
}
.product > header span,
.product header span,
.product > header [id$="-name"] {
    color:#fff !important;
    font-weight:800;
    font-size:1.15rem;
    background: transparent !important;
    display: block;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,.10);
}
/* NOTE: the footer's placement is defined ONCE in the grid block above
   (grid-area: action, sitting to the RIGHT of the description). We must NOT
   re-declare display/margin here or it overrides the grid and drops the
   price + Order Now back to the bottom of the card. */
.product:hover {
    transform: translateY(-3px);
    border-color: var(--mvltd-accent, #7c5cff) !important;
    box-shadow: 0 14px 36px color-mix(in srgb, var(--mvltd-accent) 22%, transparent);
}
.product h3,
.product .product-name,
.product h2 { color: #fff !important; font-weight: 800; margin: 0 0 10px; }

/* description text — force readable on dark */
.product .product-desc,
.product .product-desc * ,
.product p,
.product li,
.product .product-desc ul li {
    color: rgba(255,255,255,.78) !important;
    background: transparent !important;
}
.product .product-desc { margin-bottom: 14px; font-size: .9rem; line-height: 1.5; }
.product img { max-width: 100%; height: auto; border-radius: 10px; margin: 8px 0; }

/* pricing */
.product .product-pricing,
.product .price,
.product .breakdown-price,
.product .cycle,
.product .product-pricing * {
    color: #fff !important;
    background: transparent !important;
}
.product .product-pricing { margin: 0; color: rgba(255,255,255,.6) !important; font-size:.85rem; }
.product .price,
.product .breakdown-price {
    display: inline-block;
    font-size: 1.55rem !important;
    font-weight: 800 !important;
    background: var(--mvltd-grad, linear-gradient(135deg,#7c5cff,#00e0ff));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.product .cycle, .product small { color: rgba(255,255,255,.6) !important; -webkit-text-fill-color: rgba(255,255,255,.6); }
.product .setup-fee { color: rgba(255,255,255,.55) !important; }

/* order button */
.btn-order-now,
.product .btn-success,
.product a.btn {
    background: var(--mvltd-grad, linear-gradient(135deg,#7c5cff,#00e0ff)) !important;
    border: 0 !important;
    color: #fff !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
    padding: 10px 22px !important;
    margin-top: auto;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--mvltd-accent) 35%, transparent);
    transition: transform .12s ease, box-shadow .12s ease;
}
.btn-order-now:hover, .product .btn-success:hover { transform: translateY(-2px); box-shadow: 0 10px 26px color-mix(in srgb, var(--mvltd-accent) 50%, transparent); color:#fff !important; }

/* ---- Store sidebar (Categories / Actions) ---- */
.panel-sidebar,
.card-sidebar,
.products-sidebar {
    background: var(--mvltd-glass, rgba(255,255,255,.06)) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: var(--mvltd-radius, 16px) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,.28);
    overflow: hidden;
    margin-bottom: 18px;
}
.panel-sidebar .panel-heading,
.card-sidebar .card-header,
.panel-sidebar .card-header {
    background: rgba(255,255,255,.03) !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    color: #fff !important;
}
.panel-sidebar .panel-title,
.card-sidebar .panel-title { color: #fff !important; font-weight: 700; }
.panel-sidebar .list-group-item,
.card-sidebar .list-group-item {
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid rgba(255,255,255,.06) !important;
    color: rgba(255,255,255,.85) !important;
}
.panel-sidebar .list-group-item a,
.card-sidebar .list-group-item a { color: rgba(255,255,255,.85) !important; }
.panel-sidebar .list-group-item:hover,
.card-sidebar .list-group-item:hover { background: color-mix(in srgb, var(--mvltd-accent) 12%, transparent) !important; }

/* generic panels on store pages that still use bootstrap panel/card */
body.tpl-products .panel,
body.tpl-products .card,
body.tpl-configureproduct .panel,
body.tpl-configureproduct .card {
    background: var(--mvltd-glass, rgba(255,255,255,.06)) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: var(--mvltd-radius, 16px) !important;
    color: rgba(255,255,255,.88) !important;
}
body.tpl-products .panel-heading,
body.tpl-products .card-header,
body.tpl-configureproduct .panel-heading,
body.tpl-configureproduct .card-header {
    background: rgba(255,255,255,.03) !important;
    color: #fff !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
body.tpl-products .panel-title,
body.tpl-configureproduct .panel-title { color:#fff !important; }

/* recommendation modal / upsell text readable */
.product-recommendations, .product-recommendations * { color: rgba(255,255,255,.85); }

/* =====================================================================
   THEMED MODALS  (Added-to-Cart, Empty-Cart, cross-sell recommendations)
   ---------------------------------------------------------------------
   WHMCS appends these modals to <body>, OUTSIDE the store/cart wrappers,
   so the scoped store CSS never reaches them and they fell back to the
   stock purple/white Bootstrap look. These body-level rules make every
   modal follow the ACTIVE THEME via --mvltd-* variables.
   ===================================================================== */
.modal-content {
    background: var(--mvltd-bg, #14141c) !important;
    /* subtle theme tint (accent -> accent2), NOT hardcoded purple */
    background-image: linear-gradient(180deg,
        color-mix(in srgb, var(--mvltd-accent, #7c5cff) 12%, transparent),
        color-mix(in srgb, var(--mvltd-accent2, #00e0ff) 6%, transparent)) !important;
    border: 1px solid var(--mvltd-glass-border, rgba(255,255,255,.14)) !important;
    border-radius: var(--mvltd-radius, 16px) !important;
    color: var(--mvltd-text, #eef0ff) !important;
    box-shadow: 0 24px 70px rgba(0,0,0,.65) !important;
}
.modal-header {
    border-bottom: 1px solid var(--mvltd-glass-border, rgba(255,255,255,.12)) !important;
    background: transparent !important;
}
.modal-title,
.modal-header h1, .modal-header h2, .modal-header h3, .modal-header h4, .modal-header h5 {
    color: var(--mvltd-text, #eef0ff) !important;
    font-weight: 800;
}
.modal-body { color: var(--mvltd-text, #eef0ff) !important; }
.modal-footer { border-top: none !important; background: transparent !important; }
.modal .close, .modal .btn-close {
    color: var(--mvltd-muted, #a2a6c8) !important;
    opacity: .85; text-shadow: none;
}
.modal .close:hover { color: var(--mvltd-text, #eef0ff) !important; opacity: 1; }
/* the "Product Added" summary row + any panel inside a modal */
.modal .alert, .modal .panel, .modal .card,
.modal .product-added, .modal .item-added {
    background: var(--mvltd-glass-strong, rgba(255,255,255,.08)) !important;
    border: 1px solid var(--mvltd-glass-border, rgba(255,255,255,.14)) !important;
    color: var(--mvltd-text, #eef0ff) !important;
    border-radius: var(--mvltd-radius-sm, 11px) !important;
}
.modal .alert-success, .modal .text-success { color: var(--mvltd-ok, #3ddc84) !important; }
/* primary / order buttons inside modals follow the theme gradient */
.modal .btn-primary, .modal .btn-success, .modal .btn-order, .modal .btn-add {
    background: var(--mvltd-grad, linear-gradient(120deg,#7c5cff,#00e0ff)) !important;
    border: none !important; color: #fff !important;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--mvltd-accent, #7c5cff) 40%, transparent) !important;
}
.modal .btn-default, .modal .btn-secondary {
    background: rgba(255,255,255,.07) !important;
    border: 1px solid var(--mvltd-glass-border, rgba(255,255,255,.14)) !important;
    color: var(--mvltd-text, #eef0ff) !important;
}
/* SweetAlert (used by some Empty-Cart confirmations) */
.swal2-popup, .swal-modal {
    background: var(--mvltd-bg, #14141c) !important;
    border: 1px solid var(--mvltd-glass-border, rgba(255,255,255,.14)) !important;
    border-radius: var(--mvltd-radius, 16px) !important;
    color: var(--mvltd-text, #eef0ff) !important;
}
.swal2-title, .swal-title, .swal2-html-container, .swal-text { color: var(--mvltd-text, #eef0ff) !important; }
.swal2-confirm, .swal-button--confirm {
    background: var(--mvltd-grad, linear-gradient(120deg,#7c5cff,#00e0ff)) !important;
    color: #fff !important;
}

/* ---------------------------------------------------------------------
   CROSS-SELL / RECOMMENDATIONS modal — make it WIDER + SHORTER so the
   "Continue" button is always reachable without zooming out.
   The stock modal is narrow + tall; we widen it and lay the recommended
   products out in a responsive grid, with an internal scroll safety net.
   --------------------------------------------------------------------- */
/* COMPACT cross-sell modal. Small, centred, never scrolls the page: the modal
   content is capped to the viewport, only the body scrolls (if ever needed),
   and the Continue footer stays fixed + visible. Selectors are ID-scoped so
   they win over Bootstrap/cart.css without fighting them. */
#recommendationsModal .modal-dialog,
.modal.product-recommendations-modal .modal-dialog {
    max-width: 470px !important;
    width: auto !important;
    margin: 0 auto !important;
    min-height: calc(100% - 20px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px !important;
    pointer-events: none;
}
#recommendationsModal .modal-content {
    width: 100% !important;
    max-height: calc(100vh - 20px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    pointer-events: auto;
}
#recommendationsModal .modal-header { flex: 0 0 auto !important; padding: 9px 16px !important; }
#recommendationsModal .modal-header h4 { font-size: 1rem !important; margin: 0 !important; }
#recommendationsModal .modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    text-align: left !important;
    padding: 10px 16px !important;
}
/* --- COMPACT: keep the whole popup on-screen with NO internal scrolling ---
   The default markup stacks the "Added to Cart" summary, a large promo graphic
   (the "click here" TV) and the recommended-product card. Shrink the promo
   graphic hard and tighten every vertical gap so nothing overflows. --------- */
#recommendationsModal .modal-body img {
    max-width: 84px !important;
    max-height: 54px !important;
    width: auto !important; height: auto !important;
    object-fit: contain !important;
    margin: 2px auto 6px !important; display: block !important;
}
#recommendationsModal .modal-body h1,
#recommendationsModal .modal-body h2,
#recommendationsModal .modal-body h3,
#recommendationsModal .modal-body h4 { font-size: .92rem !important; margin: 3px 0 !important; line-height: 1.25 !important; }
#recommendationsModal .modal-body p  { margin: 2px 0 !important; font-size: .82rem !important; line-height: 1.3 !important; }
#recommendationsModal .modal-body hr { margin: 6px 0 !important; }
/* the "Added to Cart" summary + promo link blocks: pull them in tight */
#recommendationsModal .modal-body > *:first-child { margin-top: 0 !important; }
#recommendationsModal .modal-body a { display: inline-block; margin: 0 auto !important; }
#recommendationsModal .product-recommendations {
    display: grid;
    grid-template-columns: 1fr;   /* single column = compact + mobile-friendly */
    gap: 8px;
}
#recommendationsModal .product-recommendation {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--mvltd-glass-strong, rgba(255,255,255,.08)) !important;
    border: 1px solid var(--mvltd-glass-border, rgba(255,255,255,.14)) !important;
    border-radius: var(--mvltd-radius-sm, 11px) !important;
}
#recommendationsModal .product-recommendation img { max-width: 48px !important; max-height: 36px !important; margin: 0 !important; }
/* footer (Continue) always visible at the bottom of the card */
#recommendationsModal .modal-footer {
    flex: 0 0 auto !important;
    position: static !important;
    padding: 9px 16px 12px !important;
    background: transparent !important;
    z-index: 2;
}
@media (max-width: 560px) {
    #recommendationsModal .modal-dialog { max-width: 96vw !important; padding: 8px !important; }
    #recommendationsModal .modal-body img { max-width: 76px !important; max-height: 50px !important; }
    #recommendationsModal .modal-footer .btn { width: 100%; }
}

/* ---- WHMCS core store shell (cart-body / header-lined / sidebar) ---- */
body.tpl-products .cart-body { color: rgba(255,255,255,.9); }
body.tpl-products .header-lined { border-bottom: 1px solid rgba(255,255,255,.10); margin-bottom: 22px; padding-bottom: 12px; }
body.tpl-products .header-lined h1,
body.tpl-products .header-lined .font-size-36 { color:#fff !important; font-weight:800; }

/* any bootstrap panel/card inside the store shell (Categories / Actions dropdown boxes) */
body.tpl-products .panel.panel-default,
body.tpl-products .panel.card,
body.tpl-products .card {
    background: var(--mvltd-glass, rgba(255,255,255,.06)) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: var(--mvltd-radius, 16px) !important;
    color: rgba(255,255,255,.9) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,.28);
    overflow: hidden;
    margin-bottom: 16px;
}
body.tpl-products .panel-heading,
body.tpl-products .card-header {
    background: rgba(255,255,255,.03) !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
body.tpl-products .panel-title,
body.tpl-products .panel-title * { color:#fff !important; }
body.tpl-products .panel-body,
body.tpl-products .card-body { background: transparent !important; color: rgba(255,255,255,.85) !important; }

/* form controls (select dropdowns for Categories / Actions, promo, etc.) */
body.tpl-products .form-control,
body.tpl-products .custom-select,
body.tpl-products select,
body.tpl-products input[type=text],
body.tpl-products input[type=email],
body.tpl-products input[type=number] {
    background: rgba(0,0,0,.25) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    color: #fff !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}
body.tpl-products .form-control option,
body.tpl-products select option { background: #1a1626 !important; color: #fff !important; }

/* the minimise chevrons on sidebar cards */
body.tpl-products .panel-minimise,
body.tpl-products .card-minimise { color: rgba(255,255,255,.5) !important; }

/* ---- Order form (order.tpl) controls ---- */
.store-order-container h2,
.store-order-container h4,
.store-order-container label,
.store-order-container p { color: rgba(255,255,255,.9); }
.store-order-container .form-control,
.store-order-container select,
.store-order-container input[type=text] {
    background: var(--mvltd-glass, rgba(255,255,255,.06)) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    color: #fff !important;
    border-radius: 12px !important;
}
.store-order-container .nav-tabs { border-bottom: 1px solid rgba(255,255,255,.12); }
.store-order-container .nav-tabs > li > a,
.store-domain-tabs > li > a { color: rgba(255,255,255,.7) !important; border:0 !important; }
.store-order-container .nav-tabs > li.active > a,
.store-domain-tabs > li.active > a {
    color:#fff !important;
    background: color-mix(in srgb, var(--mvltd-accent) 15%, transparent) !important;
    border-radius: 10px 10px 0 0 !important;
}
.store-order-container .btn-primary {
    background: var(--mvltd-grad, linear-gradient(135deg,#7c5cff,#00e0ff)) !important;
    border:0 !important; color:#fff !important; border-radius:999px !important; font-weight:700;
}
.store-order-container .btn-default {
    background: rgba(255,255,255,.08) !important; border:1px solid rgba(255,255,255,.15) !important;
    color:#fff !important; border-radius:999px !important;
}

/* ============================================================
   Section 14 — WHMCS core checkout step indicator (Choose Package /
   Configure / Review & Checkout / Complete). This markup is emitted by
   WHMCS core on the standard cart flow, not by our custom templates, so
   we style it defensively here. Covers common WHMCS step classes.
   ============================================================ */
body.tpl-products .checkout-steps,
body.tpl-viewcart .checkout-steps,
body.tpl-cart .checkout-steps,
body.tpl-configureproduct .checkout-steps,
body .checkout-order-summary .checkout-steps,
.order-steps, ul.checkout-steps, ol.checkout-steps, .cart-checkout-steps {
    list-style: none !important;
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    padding: 0 !important;
    margin: 0 auto 34px !important;
    max-width: 820px;
    counter-reset: step;
}
.checkout-steps > li, .order-steps > li, .cart-checkout-steps > li {
    flex: 1 1 0;
    min-width: 120px;
    text-align: center;
    position: relative;
    padding: 12px 8px !important;
    color: rgba(255,255,255,.55) !important;
    font-weight: 600;
    font-size: .9rem;
    background: var(--mvltd-glass, rgba(255,255,255,.06)) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 12px;
    list-style: none !important;
}
.checkout-steps > li a, .order-steps > li a { color: inherit !important; text-decoration: none !important; }
.checkout-steps > li.active, .checkout-steps > li.current,
.order-steps > li.active, .cart-checkout-steps > li.active {
    color: #fff !important;
    background: var(--mvltd-grad, linear-gradient(135deg,#7c5cff,#00e0ff)) !important;
    border-color: transparent !important;
    box-shadow: var(--mvltd-glow, 0 6px 18px rgba(124,92,255,.35));
}
.checkout-steps > li.done, .checkout-steps > li.complete,
.order-steps > li.done {
    color: #fff !important;
    background: color-mix(in srgb, var(--mvltd-accent) 22%, transparent) !important;
    border-color: color-mix(in srgb, var(--mvltd-accent) 40%, transparent) !important;
}

/* ------------------------------------------------------------------
   BOOTSTRAP-3 TAB PANES  (added 2.4.6)

   The suite bundles Bootstrap 3.4.1 JAVASCRIPT (in js/scripts.min.js)
   but deliberately loads NO Bootstrap CSS. The BS3 tab plugin only
   toggles the .active / .in classes - all of the actual show/hide
   behaviour lives in Bootstrap's stylesheet, which we do not ship.

   Result before this block: NOTHING hid an inactive .tab-pane, so on
   clientarea.php?action=productdetails every pane (Overview, Downloads,
   Addons) rendered stacked on top of each other, and clicking a sidebar
   tab link appeared to "do nothing" because the target pane was already
   on screen further down the page.

   These are the minimal BS3 rules needed, scoped to .tab-content so we
   cannot disturb the custom .mvltd-tab-pane widgets in theme.js.
   ------------------------------------------------------------------ */
.tab-content > .tab-pane {
    display: none;
}
.tab-content > .tab-pane.active {
    display: block;
}
/* BS3 uses .fade + .in for the opacity transition. Guard against a pane
   that is .active but never receives .in (e.g. activated by a deep link
   before the JS runs) so content can never be left invisible. */
.tab-content > .tab-pane.fade {
    opacity: 0;
    transition: opacity .15s linear;
}
.tab-content > .tab-pane.fade.in,
.tab-content > .tab-pane.fade.active {
    opacity: 1;
}


/* =============================================================================
   2.7.4 - LAYOUT FIXES FOR BOOTSTRAP-3 PIECES THE THEME USES BUT DID NOT STYLE
   -----------------------------------------------------------------------------
   The theme bundles Bootstrap 3 JAVASCRIPT but no Bootstrap CSS. Several WHMCS
   pages rely on a few Bootstrap CSS rules, so they drew wrongly:
     A. List rows that are links (Downloads, Knowledgebase...) were inline boxes.
     B. Dropdown menus were always open (dashboard "Log in to cPanel" buttons).
     C. The hidden spacer label in a service row was shown (double "Suspended").
     D. Many grid column sizes were missing (col-sm-5 / 7 / 8 / 10 ...).
   ============================================================================= */

/* ---- A. list-group rows that are <a> or <span> must be real blocks ---------- */
.list-group-item { display: block; position: relative; text-decoration: none; }
a.list-group-item, a.list-group-item strong { color: var(--mvltd-text, #eef0ff); }
a.list-group-item:hover, a.list-group-item:focus { text-decoration: none; }
.list-group-item > strong { display: inline-block; margin-bottom: 4px; }
.list-group-item small { color: var(--mvltd-muted, #a2a6c8); }
.list-group-item .text-muted { color: var(--mvltd-muted, #a2a6c8); }
.list-group-item-heading { margin: 0 0 5px; }
.list-group-item-danger  { background: rgba(255,92,124,.12); }
.list-group-item-success { background: rgba(61,220,132,.12); }
.list-group-item-warning { background: rgba(255,207,92,.12); }
.list-group-item-info    { background: color-mix(in srgb, var(--mvltd-accent2) 12%, transparent); }
.list-group + h2, h2 + .list-group { margin-top: 12px; }

/* ---- B. dropdown menus: closed until Bootstrap's script adds .open ---------- */
.btn-group, .dropdown { position: relative; }
.btn-group { vertical-align: middle; }
.btn-group > .btn-group { margin-left: -1px; }
.dropdown-menu {
    display: none; position: absolute; top: 100%; left: 0; z-index: 1000;
    float: left; min-width: 190px; margin: 6px 0 0; padding: 6px;
    list-style: none; text-align: left; font-size: .9rem;
    box-shadow: 0 14px 34px rgba(0,0,0,.45);
}
.open > .dropdown-menu, .dropdown-menu.show { display: block; }
.dropdown-menu-right, .dropdown-menu.pull-right { left: auto; right: 0; }
.dropdown-menu > li { list-style: none; }
.dropdown-menu .dropdown-item, .dropdown-menu > li > a {
    display: block; padding: 9px 12px; border-radius: 8px; cursor: pointer;
    color: var(--mvltd-text, #eef0ff); white-space: nowrap; clear: both;
}
.dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus {
    background: color-mix(in srgb, var(--mvltd-accent) 14%, transparent); color: #fff;
}
.dropdown-menu .dropdown-item.disabled, .dropdown-menu .dropdown-item[disabled] {
    opacity: .45; cursor: not-allowed; pointer-events: none;
}
.dropdown-menu .divider { height: 1px; margin: 6px 0; background: var(--mvltd-glass-border, rgba(255,255,255,.13)); }
.caret {
    display: inline-block; width: 0; height: 0; margin-left: 2px; vertical-align: middle;
    border-top: 5px solid currentColor; border-right: 5px solid transparent; border-left: 5px solid transparent;
}
.dropup .caret { border-top: 0; border-bottom: 5px solid currentColor; }
.dropdown-toggle::after { display: none; }
.sr-only {
    position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.dropdown-backdrop { position: fixed; inset: 0; z-index: 990; }

/* ---- C. dashboard "My services" rows ---------------------------------------- */
.div-service-item {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
    padding: 14px 18px; cursor: pointer;
    border-top: 1px solid rgba(255,255,255,.07);
    transition: background .12s ease;
}
.div-service-item:first-child { border-top: 0; }
.div-service-item:hover { background: color-mix(in srgb, var(--mvltd-accent) 8%, transparent); }
.div-service-status { flex: 0 0 auto; min-width: 84px; }
.div-service-status .label-placeholder { display: none; }   /* invisible width-spacer in WHMCS */
.div-service-name { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.div-service-name .text-domain { color: var(--mvltd-muted, #a2a6c8); font-size: .86rem; }
.font-weight-bold { font-weight: 700; }
.div-service-buttons { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.div-service-buttons .btn-group { display: inline-flex; }
.div-service-buttons .btn-group > .btn { white-space: nowrap; }
.div-service-buttons .btn-group-secondary > .btn-group { margin-left: 0; }
.div-service-buttons .loading { margin-right: 4px; }
.btn-view-details i { margin-right: 4px; color: var(--mvltd-accent2, #ffd23f); }
.label-suspended, .label-cancelled, .label-terminated, .label-fraud { background: var(--mvltd-err, #ff5c7c); color: #2a0009; }
.label-pending { background: var(--mvltd-warn, #ffcf5c); color: #241a00; }
.label-completed { background: var(--mvltd-ok, #3ddc84); color: #06210f; }
@media (max-width: 640px) {
    .div-service-item { align-items: flex-start; }
    .div-service-name { flex-basis: 100%; order: 1; }
    .div-service-status { order: 0; }
    .div-service-buttons { order: 2; flex-basis: 100%; justify-content: flex-start; }
}

/* ---- D. the rest of the Bootstrap-3 grid (tablet and up) ------------------- */
.pull-right { float: right; }
.pull-left  { float: left; }
.text-danger  { color: var(--mvltd-err, #ff5c7c); }
.text-success { color: var(--mvltd-ok, #3ddc84); }
.text-warning { color: var(--mvltd-warn, #ffcf5c); }
.text-info    { color: var(--mvltd-info, #00e0ff); }
.text-red     { color: var(--mvltd-err, #ff5c7c); }
@media (min-width: 769px) {
    /* only inside a real .row, so stacked form fields keep their full width */
    .row > .col-xs-1,.row > .col-sm-1,.row > .col-md-1,.row > .col-lg-1   { flex: 0 0 8.3333%;  max-width: 8.3333%; }
    .row > .col-xs-2,.row > .col-sm-2,.row > .col-md-2,.row > .col-lg-2   { flex: 0 0 16.6667%; max-width: 16.6667%; }
    .row > .col-xs-3,.row > .col-sm-3,.row > .col-md-3,.row > .col-lg-3   { flex: 0 0 25%;      max-width: 25%; }
    .row > .col-xs-4,.row > .col-sm-4,.row > .col-md-4,.row > .col-lg-4   { flex: 0 0 33.3333%; max-width: 33.3333%; }
    .row > .col-xs-5,.row > .col-sm-5,.row > .col-md-5,.row > .col-lg-5   { flex: 0 0 41.6667%; max-width: 41.6667%; }
    .row > .col-xs-6,.row > .col-sm-6,.row > .col-md-6,.row > .col-lg-6   { flex: 0 0 50%;      max-width: 50%; }
    .row > .col-xs-7,.row > .col-sm-7,.row > .col-md-7,.row > .col-lg-7   { flex: 0 0 58.3333%; max-width: 58.3333%; }
    .row > .col-xs-8,.row > .col-sm-8,.row > .col-md-8,.row > .col-lg-8   { flex: 0 0 66.6667%; max-width: 66.6667%; }
    .row > .col-xs-9,.row > .col-sm-9,.row > .col-md-9,.row > .col-lg-9   { flex: 0 0 75%;      max-width: 75%; }
    .row > .col-xs-10,.row > .col-sm-10,.row > .col-md-10,.row > .col-lg-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
    .row > .col-xs-11,.row > .col-sm-11,.row > .col-md-11,.row > .col-lg-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
    .row > .col-xs-12,.row > .col-sm-12,.row > .col-md-12,.row > .col-lg-12 { flex: 0 0 100%;     max-width: 100%; }
    .row > .col-sm-offset-1,.row > .col-md-offset-1,.row > .col-xs-offset-1 { margin-left: 8.3333%; }
    .row > .col-sm-offset-2,.row > .col-md-offset-2,.row > .col-xs-offset-2 { margin-left: 16.6667%; }
    .row > .col-sm-offset-3,.row > .col-md-offset-3,.row > .col-xs-offset-3 { margin-left: 25%; }
    .row > .col-sm-offset-4,.row > .col-md-offset-4,.row > .col-xs-offset-4 { margin-left: 33.3333%; }
    .row > .col-sm-offset-6,.row > .col-md-offset-6,.row > .col-xs-offset-6 { margin-left: 50%; }
}
@media (max-width: 768px) {
    [class*="col-"][class*="-offset-"] { margin-left: 0 !important; }
}

/* Image-code box (contact form, register, domain checker): picture and field side by side */
#default-captcha-domainchecker { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; }
#default-captcha-domainchecker > p { flex: 0 0 100%; margin: 0 0 4px; }
#default-captcha-domainchecker > [class*="col-"] { flex: 0 1 auto !important; width: auto; max-width: 100% !important; padding: 0; }
#default-captcha-domainchecker .captchaimage img { display: block; max-width: 100%; border-radius: 8px; }
#default-captcha-domainchecker #inputCaptcha { width: 190px; max-width: 100%; text-align: center; letter-spacing: .12em; }

/* =============================================================================
   2.7.5 - CLIENT AREA CLEAN-UP (found by walking the real logged-in client area)
   -----------------------------------------------------------------------------
     E. Dashboard + Invoices drew a second WHMCS sidebar and a second title.
        (header.tpl now skips the stock sidebar on those two pages; the rules
        below hide the stock page title and remove the double padding.)
     F. Tables made by DataTables (Services, Domains, Tickets, Quotes...) were
        narrower than their box and the Search box had no label.
     G. Product Details: usage dials, shortcut icons, spacing helper classes.
     H. A few more Bootstrap helper classes the WHMCS templates use.
   ============================================================================= */

/* ---- E. invoices page owns its own title + sidebar ------------------------- */
html body.mvltd-body.tpl-clientareainvoices .mvltd-system-pagehead { display: none !important; }
html body.mvltd-body.tpl-clientareainvoices .mvltd-system-inner { max-width: none !important; padding: 0 !important; }
html body.mvltd-body.tpl-clientareainvoices .mvltd-clientarea { padding-top: 34px; padding-bottom: 64px; }

/* ---- F. DataTables ---------------------------------------------------------- */
.dataTables_wrapper .listtable { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
.dataTables_wrapper .dataTables_info   { order: 1; margin: 0; color: var(--mvltd-muted, #a2a6c8); font-size: .9rem; }
.dataTables_wrapper .dataTables_filter { order: 2; margin: 0 0 0 auto; }
.dataTables_wrapper table.dataTable    { order: 3; flex: 0 0 100%; width: 100% !important; max-width: 100%; margin: 0; }
.dataTables_wrapper .dataTables_length { order: 4; margin: 0; }
.dataTables_wrapper .dataTables_paginate { order: 5; margin: 0 0 0 auto; }
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 500; color: var(--mvltd-muted, #a2a6c8); }
.dataTables_wrapper .dataTables_filter label::before { content: "Search"; }
.dataTables_wrapper .dataTables_filter input { width: 220px; max-width: 100%; }
.dataTables_wrapper .dataTables_length select { width: auto; min-width: 74px; }
.dataTables_wrapper .pagination { display: inline-flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.dataTables_wrapper .pagination > li { list-style: none; }
.dataTables_wrapper .pagination > li > a { display: block; padding: 7px 14px; border-radius: var(--mvltd-radius-btn, 11px); border: 1px solid var(--mvltd-glass-border, rgba(255,255,255,.13)); background: var(--mvltd-glass-strong, rgba(255,255,255,.09)); color: var(--mvltd-text, #eef0ff); text-decoration: none; }
.dataTables_wrapper .pagination > li.active > a { background: var(--mvltd-grad, linear-gradient(120deg,#ff2d95,#ffd23f)); border-color: transparent; color: #fff; }
.dataTables_wrapper .pagination > li.disabled > a { opacity: .45; pointer-events: none; }
table.dataTable th, table.dataTable td { vertical-align: middle; }
table.dataTable td.text-center, table.dataTable th.text-center { text-align: center; }
/* the sort arrows were stacking on top of the column names */
table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc { white-space: nowrap; padding-right: 26px; }
table.dataTable thead .sorting::after, table.dataTable thead .sorting_asc::after, table.dataTable thead .sorting_desc::after { right: 8px; }
/* the "Manage Product" row button: match the other pink buttons */
.responsive-edit-button .btn-info, td .btn.btn-block.btn-info { background: var(--mvltd-grad, linear-gradient(120deg,#ff2d95,#ffd23f)); color: #fff; box-shadow: 0 3px 14px color-mix(in srgb, var(--mvltd-accent) 40%, transparent); }
.table-container { overflow-x: auto; }

/* ---- G. Product Details ------------------------------------------------------ */
.cpanel-usage-stats .usage-dial { color: var(--mvltd-text, #eef0ff) !important; }
.cpanel-usage-stats #diskUsage > div, .cpanel-usage-stats #bandwidthUsage > div { position: relative; display: inline-block !important; width: 100px !important; height: 80px !important; }
.cpanel-usage-stats canvas { opacity: .55; }
.cpanel-usage-stats input.usage-dial { position: absolute !important; left: 50% !important; top: 50% !important; margin: 0 !important; transform: translate(-50%,-50%); }
.cpanel-feature-row { justify-content: center; }
.cpanel-feature-row > [class*="col-"] { text-align: center; margin-bottom: 8px; }
.cpanel-feature-row a { display: block; text-decoration: none; }
.cpanel-feature-row img { display: block; height: 40px; width: auto; max-width: 100%; margin: 0 auto 8px; object-fit: contain; }
.input-group-addon, .input-group-text { display: flex; align-items: center; padding: 0 12px; color: var(--mvltd-muted, #a2a6c8); }
.input-group .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .input-group-addon, .input-group > .input-group-append { border: 1px solid var(--mvltd-glass-border, rgba(255,255,255,.13)); border-left: 0; border-radius: 0 var(--mvltd-radius-btn,11px) var(--mvltd-radius-btn,11px) 0; background: var(--mvltd-glass, rgba(255,255,255,.05)); }
.input-group-append .input-group-text { height: 100%; }
.licensing-addon-latest-download { margin-bottom: 18px; }
.card, .card-body { box-sizing: border-box; }
.card-body h4 { margin: 14px 0 6px; font-size: 1rem; }
.card-body .form-control[readonly] { opacity: .9; }

/* ---- H. more Bootstrap helper classes --------------------------------------- */
:not(.row).d-block { display: block; }
.d-none { display: none !important; }
.d-inline { display: inline; } .d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.float-right, .float-md-right { float: right; } .float-left, .float-md-left { float: left; }
.m-0 { margin: 0 !important; } .mt-0 { margin-top: 0 !important; } .mb-0 { margin-bottom: 0 !important; }
.mt-1 { margin-top: .25rem; } .mt-2 { margin-top: .5rem; } .mt-3 { margin-top: 1rem; } .mt-4 { margin-top: 1.5rem; } .mt-5 { margin-top: 3rem; }
.mb-1 { margin-bottom: .25rem; } .mb-2 { margin-bottom: .5rem; } .mb-3 { margin-bottom: 1rem; } .mb-4 { margin-bottom: 1.5rem; } .mb-5 { margin-bottom: 3rem; }
.ml-1 { margin-left: .25rem; } .ml-2 { margin-left: .5rem; } .mr-1 { margin-right: .25rem; } .mr-2 { margin-right: .5rem; }
.margin-bottom-5 { margin-bottom: 5px; }
.w-100 { width: 100%; }
.img-responsive, .img-fluid { max-width: 100%; height: auto; }
.btn-large { padding: 13px 24px; font-size: 16px; }
.input-lg, .input-group-lg .form-control { padding: 13px 16px; font-size: 16px; }
.radio-inline, .checkbox-inline { display: inline-flex; align-items: center; gap: 6px; margin-right: 14px; font-weight: 500; }
.checkbox label, .radio label { font-weight: 500; }
.alert-error { background: rgba(255,92,124,.12); border: 1px solid rgba(255,92,124,.4); color: var(--mvltd-text, #eef0ff); }
.collapse:not(.in):not(.show) { display: none; }
.collapse.in, .collapse.show { display: block; }
.collapsing { overflow: hidden; transition: height .25s ease; }
.panel-collapse.collapse.in { display: block; }
.panel-group > .panel + .panel { margin-top: 12px; }
.panel-warning > .panel-heading { border-color: var(--mvltd-warn, #ffcf5c); }
.panel-danger  > .panel-heading { border-color: var(--mvltd-err, #ff5c7c); }
.panel-success > .panel-heading { border-color: var(--mvltd-ok, #3ddc84); }
.progress { height: 10px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; }
.progress-bar { height: 100%; background: var(--mvltd-grad, linear-gradient(120deg,#ff2d95,#ffd23f)); }
.progress-bar-success { background: var(--mvltd-ok, #3ddc84); } .progress-bar-warning { background: var(--mvltd-warn, #ffcf5c); } .progress-bar-danger { background: var(--mvltd-err, #ff5c7c); }
@media (max-width: 767px) { .hidden-xs { display: none !important; } .visible-xs, .visible-xs-block { display: block !important; } }
@media (min-width: 768px) and (max-width: 991px) { .hidden-sm { display: none !important; } }
@media (min-width: 992px) and (max-width: 1199px) { .hidden-md { display: none !important; } }
@media (min-width: 1200px) { .hidden-lg { display: none !important; } }
@media (min-width: 768px) { .visible-xs, .visible-xs-block { display: none !important; } }

/* 2.7.5 shortcut grid: 4 across on desktop, 3 on tablet, 2 on phone */
.cpanel-feature-row > [class*="col-"] { flex: 0 0 50%; max-width: 50%; }
@media (min-width: 768px) { .cpanel-feature-row > [class*="col-"] { flex: 0 0 33.3333%; max-width: 33.3333%; } }
@media (min-width: 992px) { .cpanel-feature-row > [class*="col-"] { flex: 0 0 25%; max-width: 25%; } }

/* =============================================================================
   2.7.6 - POP-UP WINDOWS (MODALS) ON EVERY CLIENT AREA PAGE
   -----------------------------------------------------------------------------
   The suite bundles Bootstrap's JAVASCRIPT but no Bootstrap CSS. The rules that
   HIDE a pop-up until it is opened, and float it over the page, only existed in
   the cart style file, which loads on the cart page only. Everywhere else
   (Payment Methods, Contacts, Users, Domain contact info...) every pop-up sat
   OPEN on the page with live buttons. On Payment Methods that let a client
   press "Yes" before choosing a card, which posted to the wrong address and
   gave "HTTP ERROR 405". These rules are the same ones the cart already uses.
   ============================================================================= */
.modal {
    position: fixed !important; top: 0; left: 0; z-index: 1050;
    display: none; width: 100%; height: 100%;
    overflow-x: hidden; overflow-y: auto; outline: 0;
    -webkit-overflow-scrolling: touch;
}
.modal.fade { opacity: 0; transition: opacity .15s linear; }
.modal.fade.in, .modal.fade.show { opacity: 1; }
.modal.in, .modal.show { display: block !important; }
.modal.fade .modal-dialog { transform: translateY(-24px); transition: transform .25s ease-out; }
.modal.in .modal-dialog, .modal.show .modal-dialog { transform: none; }
.modal-open { overflow: hidden; }
.modal-dialog {
    position: relative; width: auto; max-width: 520px;
    margin: 72px auto 24px; padding: 0 12px; pointer-events: none;
}
.modal-dialog.modal-lg { max-width: 860px; }
.modal-dialog.modal-sm { max-width: 340px; }
.modal-content { position: relative; display: flex; flex-direction: column; width: 100%; pointer-events: auto; outline: 0; }
.modal-header { position: relative; display: block; padding: 14px 46px 12px 18px; }
.modal-header .close { position: absolute; top: 10px; right: 14px; }
.modal-title { margin: 0; font-size: 1.15rem; line-height: 1.3; }
.modal-body { position: relative; flex: 1 1 auto; padding: 16px 18px; }
.modal-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; padding: 12px 18px 16px; }
.modal .close {
    background: transparent !important; border: 0; font-size: 1.6rem; line-height: 1;
    color: var(--mvltd-muted, #a2a6c8) !important; opacity: .85; cursor: pointer; padding: 0;
}
.modal-footer .btn { min-width: 90px; }
.modal-backdrop { position: fixed; top: 0; left: 0; z-index: 1040; width: 100vw; height: 100vh; background: #05060c; }
.modal-backdrop.fade { opacity: 0; transition: opacity .15s linear; }
.modal-backdrop.in, .modal-backdrop.show { opacity: .72; }
@media (max-width: 576px) { .modal-dialog { margin-top: 24px; } }

/* =============================================================================
   2.7.8 - PAYMENT METHODS: Set as Default / Edit / Delete were cut off on phones
   The table hides anything wider than the screen, so the Actions column (and the
   Delete button) was clipped. On phones each saved card is now its own block with
   the buttons wrapping underneath. Desktop keeps the table, but buttons may wrap.
   ============================================================================= */
#payMethodList { overflow: visible; }
#payMethodList td { vertical-align: middle; }
#payMethodList td:last-child { display: table-cell; }
#payMethodList td:last-child .btn { margin: 2px 4px 2px 0; }
@media (max-width: 768px) {
    #payMethodList, #payMethodList tbody { display: block; width: 100%; background: none; border: 0; }
    #payMethodList tr:first-child:has(th) { display: none; }
    #payMethodList tr {
        display: block; margin: 0 0 14px; padding: 12px 14px;
        border: 1px solid var(--mvltd-glass-border, rgba(255,255,255,.13));
        border-radius: var(--mvltd-radius, 16px);
        background: var(--mvltd-glass, rgba(255,255,255,.05));
    }
    #payMethodList td { display: block; padding: 4px 0; border: 0; }
    #payMethodList td:first-child { display: inline-block; margin-right: 8px; }
    #payMethodList td:nth-child(2) { display: inline-block; font-weight: 700; }
    #payMethodList td:last-child { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 10px; }
    #payMethodList td:last-child .btn { margin: 0; }
    #payMethodList td[colspan] { text-align: center; }
}