/* ============================================================
   v3 admin UI — consolidated styles
   Used by index_v3.php, pageHeader_v3.php, uiChoose_v3.php, and
   any future *_v3.php pages.
   Extracted from _admin/_sketches/sketch_home_v3*.html and
   sketch_sidebar*.html.
   ============================================================ */


/* -------- Sidebar user-card: low-poly background container -------- */
/* Background image itself is generated dynamically via JS in pageHeader_v3.php.
   This CSS provides the fallback color, the dot overlay, and the z-index stack. */
.sidebar-user-material
{
    /* Bootstrap-limitless's .navbar has a 1px transparent border-bottom that
       .navbar-light colors to rgba(0,0,0,0.125). The sidebar's .sidebar-content
       is positioned at top:3.00003rem which uses the navbar's base height (not
       counting the border) — leaving a 1px gap. Pull the user-card up by 1px
       so it sits flush against the navbar's border. */
    margin-top: -1px;
}
.sidebar-user-material .sidebar-user-material-body
{
    background: #0a2e5e center center no-repeat;
    background-size: cover;
    position: relative;
    overflow: hidden;
    /* +1px to absorb the -1px margin-top above; keeps the bottom flush with the
       next sidebar element. */
    padding-bottom: 1px;
}
.sidebar-user-material .sidebar-user-material-body::after
{
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
    background-size: 14px 14px;
    pointer-events: none;
    opacity: 0.6;
}
.sidebar-user-material .sidebar-user-material-body > *
{
    position: relative;
    z-index: 1;
}


/* -------- Sidebar nav tweaks -------- */
.nav-sidebar .nav-group-sub .nav-link > i:first-child
{
    margin-right: 0 !important;
}

/* Small breathing room between the low-poly user-card and the first menu item */
.sidebar-content .card.card-sidebar-mobile
{
    margin-top: 2px;
}

/* -------- Active-link highlight (stronger than the default light grey) -------- */
/* Sidebar is on the right in RTL, so the inner-edge indicator sits on the LEFT
   of each link. */
.nav-sidebar .nav-link.active,
.nav-sidebar .nav-item.nav-item-submenu > .nav-link.active
{
    background-color: rgba(33,150,243,0.10) !important;
    color: #0d47a1 !important;
    font-weight: 600;
    box-shadow: inset 3px 0 0 #1976D2;
}
.nav-sidebar .nav-link.active > i
{
    color: #1976D2 !important;
}
/* Inner sub-items get a slightly softer tint to differentiate from top-level */
.nav-sidebar .nav-group-sub .nav-link.active
{
    background-color: rgba(33,150,243,0.07) !important;
}


/* -------- Hero balance ribbon (top of home) -------- */
.balance-ribbon
{
    background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
    color: #fff;
    border-radius: 6px;
    padding: 14px 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.balance-cell
{
    display: inline-flex;
    align-items: center;
    padding: 4px 16px;
    border-left: 1px solid rgba(255,255,255,0.25);
}
.balance-cell:last-child { border-left: 0; }
.balance-cell .num   { font-size: 22px; font-weight: 700; line-height: 1; }
.balance-cell .label { font-size: 12px; opacity: 0.85; margin-top: 2px; }
.balance-cell .icn   { font-size: 28px; opacity: 0.9; margin-left: 10px; }

.balance-note { font-size: 11.5px; opacity: 0.85; margin-top: 8px; color: #fff; }


/* -------- News strip (top one-liner) -------- */
.news-card
{
    border-left: 4px solid #2196F3;
    padding: 12px 16px;
    background: #fafbfc;
    border-radius: 4px;
}


/* -------- Admin-message banners (sub-user only) -------- */
/* Two distinct banners, stacked top→bottom:
   - .suadmin-banner            (default = dealer broadcast, $_su_sysMessage) — blue
   - .suadmin-banner.t-personal (manager-to-this-sub-user, $suAdminMsg)       — amber  */
.suadmin-banner
{
    background: linear-gradient(135deg, #E1F5FE 0%, #B3E5FC 100%);
    border-right: 4px solid #0288D1;
    border-radius: 6px;
    padding: 12px 16px;
    color: #01579B;
    font-size: 13.5px;
    line-height: 1.55;
}
.suadmin-banner i
{
    font-size: 22px;
    vertical-align: middle;
    margin-left: 6px;
    color: #0277BD;
}

.suadmin-banner.t-personal
{
    background: linear-gradient(135deg, #E0F2F1 0%, #B2DFDB 100%);
    border-right-color: #26A69A;
    color: #004D40;
}
.suadmin-banner.t-personal i { color: #00796B; }


/* -------- Section heading divider -------- */
.section-heading
{
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 12px 0;
    font-size: 13px;
    font-weight: 700;
    color: #555;
}
.section-heading::before, .section-heading::after
{
    content: "";
    flex: 1;
    height: 1px;
    background: #e0e3e7;
}
.section-heading > span { padding: 0 6px; }


/* -------- Domain cards (compact, no KPI rows) -------- */
.domain-card
{
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
    cursor: default;
    border: 1px solid #e0e3e7;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}
.domain-card:hover
{
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(0,0,0,0.10);
}
.domain-card .accent { height: 4px; background: #ccc; }
.domain-card .card-body { padding: 14px; }
.domain-card .domain-head
{
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}
.domain-card .domain-head .icon-wrap
{
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 18px;
    margin-left: 10px;
    flex-shrink: 0;
}
.domain-card .domain-head h6
{
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #222;
}
.domain-card .domain-head .full-link
{
    margin-right: auto;
    font-size: 11px;
    opacity: 0.75;
    white-space: nowrap;
}
.domain-card .full-link:hover { opacity: 1; }
.domain-card .actions
{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.domain-card .qa-btn
{
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 3px;
    line-height: 1.6;
    white-space: nowrap;
}
.domain-card .qa-primary
{
    color: #fff !important;
    font-weight: 600;
}


/* -------- Domain palette: one ruleset per domain -------- */
.dm-sms .accent    { background: #2196F3; }
.dm-sms .icon-wrap { background: rgba(33,150,243,0.12);  color: #2196F3; }
.dm-sms .qa-primary{ background: #2196F3; }
.dm-sms .full-link { color: #2196F3; }

.dm-voice .accent    { background: #EC407A; }
.dm-voice .icon-wrap { background: rgba(236,64,122,0.12);  color: #EC407A; }
.dm-voice .qa-primary{ background: #EC407A; }
.dm-voice .full-link { color: #EC407A; }

.dm-wa .accent    { background: #4CAF50; }
.dm-wa .icon-wrap { background: rgba(76,175,80,0.12);   color: #4CAF50; }
.dm-wa .qa-primary{ background: #4CAF50; }
.dm-wa .full-link { color: #4CAF50; }

.dm-mkt .accent    { background: #7E57C2; }
.dm-mkt .icon-wrap { background: rgba(126,87,194,0.12);  color: #7E57C2; }
.dm-mkt .qa-primary{ background: #7E57C2; }
.dm-mkt .full-link { color: #7E57C2; }

.dm-auto .accent    { background: #FFA726; }
.dm-auto .icon-wrap { background: rgba(255,167,38,0.14);  color: #F57C00; }
.dm-auto .qa-primary{ background: #FFA726; color: #3a2900 !important; }

.dm-aud .accent    { background: #26A69A; }
.dm-aud .icon-wrap { background: rgba(38,166,154,0.12);  color: #26A69A; }
.dm-aud .qa-primary{ background: #26A69A; }

.dm-acct .accent    { background: #78909C; }
.dm-acct .icon-wrap { background: rgba(120,144,156,0.14); color: #546E7A; }
.dm-acct .qa-primary{ background: #78909C; }

.dm-help .accent    { background: #BDBDBD; }
.dm-help .icon-wrap { background: rgba(120,120,120,0.10); color: #616161; }
.dm-help .qa-primary{ background: #9E9E9E; }

/* sub-user only: external-links card */
.dm-ext .accent    { background: #5C6BC0; }
.dm-ext .icon-wrap { background: rgba(92,107,192,0.12);  color: #5C6BC0; }


/* -------- External-links card body (sub-user "קישורים") -------- */
/* Compact spacing so the card height matches its siblings in the row */
.dm-ext .domain-head { margin-bottom: 4px; }
.dm-ext .card-body   { padding-bottom: 4px; }

.ext-links-list { list-style: none; margin: 0; padding: 0; }
.ext-links-list li
{
    padding: 3px 0;
    border-bottom: 1px dashed #eee;
    font-size: 12px;
    line-height: 1.35;
}
.ext-links-list li:last-child
{
    border-bottom: 0;
    padding-bottom: 0;
}
.ext-links-list li a { color: #3949AB; }
.ext-links-list li a i
{
    margin-left: 6px;
    color: #5C6BC0;
    font-size: 10px;
}
.ext-links-empty
{
    font-size: 11.5px;
    color: #999;
    text-align: center;
    padding: 6px 0;
    font-style: italic;
}


/* -------- Magazine-style tip cards (main-user homepage bottom, 2 cards) -------- */
.news-tip-card
{
    border: 1px solid #e0e3e7;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    display: flex;
    align-items: stretch;
    transition: transform 0.15s, box-shadow 0.15s;
    height: 100%;
}
.news-tip-card:hover
{
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(0,0,0,0.10);
}
.news-tip-card .tip-thumb
{
    width: 110px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    position: relative;
}
.news-tip-card .tip-thumb i { line-height: 1; }
.news-tip-card .tip-thumb::after
{
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.18), transparent 60%);
    pointer-events: none;
}
.news-tip-card.t-tip  .tip-thumb { background: linear-gradient(135deg, #1976D2, #42A5F5); }
.news-tip-card.t-know .tip-thumb { background: linear-gradient(135deg, #F57C00, #FFB74D); }

.news-tip-card .tip-body
{
    padding: 14px 16px;
    flex-grow: 1;
    min-width: 0;
}
.news-tip-card .tip-badge
{
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 2px 8px;
    border-radius: 10px;
    margin-bottom: 6px;
}
.news-tip-card.t-tip  .tip-badge { background: rgba(33,150,243,0.14); color: #1565C0; }
.news-tip-card.t-know .tip-badge { background: rgba(245,124,0,0.14);  color: #E65100; }

.news-tip-card .tip-title
{
    font-size: 14.5px;
    font-weight: 700;
    color: #222;
    margin: 0 0 4px 0;
    line-height: 1.35;
}
.news-tip-card .tip-excerpt
{
    font-size: 12.5px;
    color: #555;
    margin: 0;
    line-height: 1.5;
}


/* -------- uiChoose_v3.php — full-screen "pick your UI" page -------- */
/* Login-page-style centered layout with two big cards. */
.ui-choose-page
{
    min-height: 100vh;
    background: linear-gradient(135deg, #0a2e5e 0%, #1565C0 50%, #2e7d32 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
}
.ui-choose-logo
{
    margin-bottom: 28px;
    text-align: center;
}
.ui-choose-logo img
{
    max-width: 260px;
    height: auto;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25));
}
.ui-choose-title
{
    color: #fff;
    text-align: center;
    margin-bottom: 24px;
}
.ui-choose-title h3 { font-weight: 700; margin: 0 0 6px 0; text-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.ui-choose-title p  { margin: 0; opacity: 0.9; font-size: 14px; }

.ui-choose-cards
{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    max-width: 900px;
    width: 100%;
}
.ui-choose-card
{
    flex: 1 1 380px;
    max-width: 420px;
    background: #fff;
    border-radius: 10px;
    padding: 24px 22px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    transition: transform 0.18s, box-shadow 0.18s;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}
.ui-choose-card:hover
{
    transform: translateY(-4px);
    box-shadow: 0 14px 36px rgba(0,0,0,0.25);
    color: inherit;
    text-decoration: none;
}
.ui-choose-card .uic-badge
{
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 3px 10px;
    border-radius: 12px;
    margin-bottom: 14px;
    align-self: center;
}
.ui-choose-card.uic-new  .uic-badge { background: rgba(33,150,243,0.14); color: #1565C0; }
.ui-choose-card.uic-old  .uic-badge { background: rgba(120,144,156,0.18); color: #455A64; }
.ui-choose-card .uic-icon { font-size: 56px; margin-bottom: 12px; }
.ui-choose-card.uic-new .uic-icon { color: #1976D2; }
.ui-choose-card.uic-old .uic-icon { color: #607D8B; }

.ui-choose-card .uic-monster
{
    height: 130px;
    margin-bottom: 8px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.ui-choose-card .uic-monster img
{
    max-height: 130px;
    width: auto;
}
.ui-choose-card h5 { margin: 0 0 8px 0; font-weight: 700; color: #222; }
.ui-choose-card p
{
    color: #555;
    font-size: 13px;
    line-height: 1.6;
    margin: 0 0 18px 0;
    min-height: 60px;
}
.ui-choose-card .btn-enter
{
    margin-top: auto;
    font-weight: 600;
    padding: 8px 24px;
    border-radius: 4px;
}
.ui-choose-card.uic-new .btn-enter { background: #1976D2; color: #fff; }
.ui-choose-card.uic-old .btn-enter { background: #607D8B; color: #fff; }


/* ============================================================
   Snapshot pages (sms / wa / voice / marketing) — KPI tiles +
   period selector + chart cards. Shared layout across all 4
   snapshot pages so they look uniform.
   ============================================================ */
.kpi-card { border-radius: 6px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.kpi-card .kpi-body { padding: 16px; display: flex; align-items: center; }
.kpi-card .kpi-icon { width: 54px; height: 54px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; margin-left: 14px; flex-shrink: 0; }
/* KPI icon palette — use these instead of inline style="background:#hex" */
.kpi-card .kpi-icon.primary { background: var(--c-primary-1); }
.kpi-card .kpi-icon.success { background: var(--c-success-1); }
.kpi-card .kpi-icon.warning { background: var(--c-warn-1); }
.kpi-card .kpi-icon.danger  { background: var(--c-danger-1); }
.kpi-card .kpi-icon.info    { background: var(--c-info-1); }
.kpi-card .kpi-icon.accent  { background: var(--c-accent-1); }
.kpi-card .kpi-icon.neutral { background: var(--c-neutral-1); }
.kpi-card .kpi-icon.teal    { background: #26A69A; }
.kpi-card .kpi-icon > i { font-size: 32px; top: 0; vertical-align: baseline; line-height: 1; }
.kpi-card .kpi-num { font-size: 26px; font-weight: 700; line-height: 1.1; color: #333; }
.kpi-card .kpi-label { font-size: 12px; color: #666; }
.kpi-card .kpi-sub { font-size: 11px; color: #999; margin-top: 3px; }

.snapshot-chart-container { width: 100%; height: 280px; }

.period-btn { display: inline-block; padding: 7px 18px; border-radius: 4px; font-size: 13px; font-weight: 500; border: 1px solid #ddd; background: #fff; color: #555; cursor: pointer; text-decoration: none; }
.period-btn:hover { background: #f5f5f5; color: #555; text-decoration: none; }
.period-btn.active, .period-btn.active:hover { background: #2196F3; color: #fff; border-color: #2196F3; text-decoration: none; }


/* =============================================================
   Payment pages — payment_main.php / payment_pay.php / payment_finish.php
   System-wide (loaded regardless of v3 opt-in flag).
   ============================================================= */
.pay-hero {
    background: linear-gradient(135deg, #1976D2 0%, #2196F3 100%);
    color: #fff;
    border-radius: 8px;
    padding: 18px 24px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.pay-hero h4 { margin: 0; font-size: 19px; font-weight: 600; color: #fff; }
.pay-hero .sub { font-size: 12.5px; opacity: 0.9; margin-top: 4px; color: #fff; }
.pay-hero .step-pills { display: flex; gap: 6px; }
.pay-hero .step-pill {
    background: rgba(255,255,255,0.18);
    border-radius: 999px;
    padding: 5px 14px;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
}
.pay-hero .step-pill.active { background: #fff; color: #1976D2; font-weight: 600; }
.pay-hero .step-pill .num {
    background: rgba(255,255,255,0.25); border-radius: 50%; width: 18px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center; font-size: 11px;
}
.pay-hero .step-pill.active .num { background: #1976D2; color: #fff; }

.pay-notice {
    background: #f8fafd;
    border-right: 3px solid #2196F3;
    border-radius: 4px;
    padding: 10px 14px;
    font-size: 12.5px;
    color: #455a64;
    margin-bottom: 18px;
    line-height: 1.65;
}
.pay-notice a { color: #1976D2; font-weight: 600; }

/* ----- Product cards (Step 1) ----- */
.product-card {
    border: 1px solid #e0e3e7;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
    position: relative;
    height: 100%;
}
.product-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.08); transform: translateY(-2px); }
.product-card.is-active { border-color: #1976D2; box-shadow: 0 4px 14px rgba(33,150,243,0.18); }

.product-card .accent { height: 4px; }
.product-card .pc-body { padding: 16px 18px 14px; }
.product-card .pc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.product-card .pc-icn {
    width: 44px; height: 44px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px; flex-shrink: 0;
}
.product-card h6 { margin: 0; font-size: 15px; font-weight: 600; color: #222; }
.product-card .pc-price { font-size: 11.5px; color: #666; margin-top: 2px; }
.product-card .pc-price strong { color: #222; font-weight: 600; }

.qty-row { display: flex; align-items: stretch; gap: 6px; margin-top: 6px; }
.qty-row input[type=number] {
    flex: 1;
    border: 1px solid #d0d4d8;
    border-radius: 5px;
    padding: 7px 10px;
    font-size: 14px;
    text-align: right;
    direction: ltr;
}
.qty-row input[type=number]:focus { border-color: #1976D2; outline: none; box-shadow: 0 0 0 2px rgba(33,150,243,0.15); }
.qty-row input[type=number].is-invalid { border-color: #e53935; box-shadow: 0 0 0 2px rgba(229,57,53,0.15); }
.qty-chip {
    background: #f1f3f5; border: 1px solid #e0e3e7; border-radius: 5px;
    padding: 0 10px; font-size: 12px; color: #555; cursor: pointer; white-space: nowrap;
    display: inline-flex; align-items: center;
}
.qty-chip:hover { background: #e7eaef; }
.qty-presets { display: flex; gap: 4px; margin-top: 8px; flex-wrap: wrap; }
.qty-presets .qty-chip { padding: 3px 9px; font-size: 11.5px; }

.live-total {
    display: flex; justify-content: space-between; align-items: center;
    background: #f8fafd; border-radius: 5px; padding: 8px 10px; margin-top: 10px;
    font-size: 12.5px; color: #455a64;
}
.live-total .num { font-weight: 700; font-size: 14px; }

.pc-sms     .accent { background: #2196F3; } .pc-sms     .pc-icn { background: rgba(33,150,243,0.12); color: #2196F3; } .pc-sms     .live-total .num { color: #1976D2; }
.pc-vms     .accent { background: #4CAF50; } .pc-vms     .pc-icn { background: rgba(76,175,80,0.12);   color: #2E7D32; } .pc-vms     .live-total .num { color: #2E7D32; }
.pc-call    .accent { background: #00BCD4; } .pc-call    .pc-icn { background: rgba(0,188,212,0.12);   color: #00838F; } .pc-call    .live-total .num { color: #00838F; }
.pc-sms-svc .accent { background: #EC407A; } .pc-sms-svc .pc-icn { background: rgba(236,64,122,0.12);  color: #C2185B; } .pc-sms-svc .live-total .num { color: #C2185B; }
.pc-ivr-svc .accent { background: #FF9800; } .pc-ivr-svc .pc-icn { background: rgba(255,152,0,0.12);   color: #E65100; } .pc-ivr-svc .live-total .num { color: #E65100; }

.svc-note {
    background: #fff8f1; border-right: 3px solid #FFB74D;
    padding: 6px 10px; border-radius: 4px;
    font-size: 11.5px; color: #6d4c00; margin-top: 8px;
}

/* ----- Cart panel (Step 1) ----- */
.cart-card {
    border: 1px solid #e0e3e7;
    border-radius: 8px;
    background: #fff;
    position: sticky;
    top: 16px;
    overflow: hidden;
}
.cart-card .cart-head {
    background: #fafbfc; border-bottom: 1px solid #e0e3e7;
    padding: 12px 16px;
    display: flex; align-items: center; justify-content: space-between;
}
.cart-card .cart-head h6 { margin: 0; font-size: 14px; font-weight: 600; color: #333; }
.cart-card .cart-head i { color: #1976D2; font-size: 16px; }
.cart-card .cart-body { padding: 12px 16px; max-height: 320px; overflow-y: auto; }
.cart-card .cart-line {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 8px 0; border-bottom: 1px dashed #eef0f3; font-size: 13px;
}
.cart-card .cart-line:last-child { border-bottom: 0; }
.cart-card .cart-line .lbl { color: #555; }
.cart-card .cart-line .sub { font-size: 11px; color: #999; display: block; margin-top: 1px; }
.cart-card .cart-line .amt { color: #222; font-weight: 600; }
.cart-card .cart-empty { color: #999; text-align: center; padding: 24px 0; font-size: 12.5px; }
.cart-card .cart-total {
    background: #f8fafd; padding: 12px 16px;
    display: flex; justify-content: space-between; align-items: center;
    border-top: 1px solid #e0e3e7;
}
.cart-card .cart-total .lbl { font-size: 13px; color: #555; }
.cart-card .cart-total .amt { font-size: 19px; font-weight: 700; color: #1976D2; }
.cart-card .cart-vat { font-size: 11px; color: #999; padding: 0 16px 8px; text-align: left; }
.cart-card .cart-cta { padding: 12px 16px; text-align: left; }
.cart-card .cart-cta .btn {
    width: 100%; background: linear-gradient(135deg, #1976D2, #2196F3); color: #fff;
    border: 0; padding: 6px 12px; border-radius: 6px; font-size: 14px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.cart-card .cart-cta .btn:hover { background: linear-gradient(135deg, #1565C0, #1E88E5); color: #fff; }
.cart-card .cart-cta .btn:disabled { background: #b0bec5; cursor: not-allowed; }

/* ----- Invoice form + summary (Step 2) ----- */
.pay-section {
    border: 1px solid #e0e3e7; border-radius: 8px; background: #fff; overflow: hidden;
}
.pay-section .ps-head { background: #fafbfc; border-bottom: 1px solid #e0e3e7; padding: 12px 18px; display: flex; align-items: center; gap: 10px; }
.pay-section .ps-head h6 { margin: 0; font-size: 14px; font-weight: 600; color: #333; }
.pay-section .ps-head i { color: #1976D2; font-size: 16px; }
.pay-section .ps-body { padding: 16px 18px; }

.pay-field { margin-bottom: 14px; }
.pay-field .lbl { display: block; font-size: 12px; color: #555; margin-bottom: 4px; font-weight: 600; }
.pay-field input[type=text], .pay-field input[type=email], .pay-field select, .pay-field textarea {
    width: 100%; border: 1px solid #d0d4d8; border-radius: 5px; padding: 8px 11px; font-size: 13.5px;
}
.pay-field input:focus, .pay-field select:focus, .pay-field textarea:focus {
    border-color: #1976D2; outline: none; box-shadow: 0 0 0 2px rgba(33,150,243,0.15);
}
.pay-field .hint { font-size: 11px; color: #999; margin-top: 3px; }

.pay-summary {
    background: linear-gradient(135deg, #f8fafd 0%, #eef5fc 100%);
    border: 1px solid #d0e1f5; border-radius: 8px; padding: 18px;
}
.pay-summary h6 { font-size: 14px; font-weight: 600; color: #1976D2; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.pay-summary .sum-line { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13px; color: #455a64; }
.pay-summary .sum-line .amt { font-weight: 600; color: #222; }
.pay-summary .sum-divider { border-top: 1px dashed #c5d5e7; margin: 6px 0; }
.pay-summary .sum-vat { font-size: 11.5px; color: #78909c; padding: 4px 0; display: flex; justify-content: space-between; }
.pay-summary .sum-total {
    border-top: 2px solid #1976D2; padding-top: 10px; margin-top: 6px;
    display: flex; justify-content: space-between; align-items: center;
}
.pay-summary .sum-total .lbl { font-size: 13.5px; font-weight: 600; color: #1976D2; }
.pay-summary .sum-total .amt { font-size: 22px; font-weight: 700; color: #0d47a1; }
.pay-summary .sum-total .sub { font-size: 11px; color: #78909c; display: block; }

.pay-installments {
    background: #fff; border: 1px solid #e0e3e7; border-radius: 6px; padding: 10px 14px;
    margin-top: 14px; display: flex; align-items: center; gap: 10px;
}
.pay-installments .lbl { font-size: 12.5px; color: #555; flex-shrink: 0; }
.pay-installments select { flex: 1; border: 1px solid #d0d4d8; border-radius: 4px; padding: 5px 10px; font-size: 13px; }
.pay-installments .ico { color: #1976D2; font-size: 18px; }

.pay-actions-bar { display: flex; justify-content: space-between; margin-top: 18px; gap: 10px; flex-wrap: wrap; }
.pay-btn-back, .pay-btn-next {
    padding: 6px 12px; border-radius: 6px; font-size: 13.5px;
    border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
}
.pay-btn-back { background: #eceff1; color: #455a64; }
.pay-btn-back:hover { background: #cfd8dc; color: #455a64; text-decoration: none; }
.pay-btn-next { background: linear-gradient(135deg, #1976D2, #2196F3); color: #fff; }
.pay-btn-next:hover { background: linear-gradient(135deg, #1565C0, #1E88E5); color: #fff; text-decoration: none; }

/* ----- Saved-cards grid (Step 3 / payment_pay.php) ----- */
.cc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.cc-tile {
    border: 1px solid #e0e3e7; border-radius: 10px; background: #fff;
    padding: 16px; cursor: pointer;
    transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
    display: flex; flex-direction: column; min-height: 150px;
    position: relative; overflow: hidden;
}
.cc-tile:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.10); transform: translateY(-2px); border-color: #1976D2; }
.cc-tile .cc-brand {
    align-self: flex-end; font-size: 11px; padding: 3px 8px; border-radius: 4px;
    background: #eceff1; color: #455a64; font-weight: 600;
}
.cc-tile .cc-brand.visa { background: #1a1f71; color: #fff; }
.cc-tile .cc-brand.master { background: #eb001b; color: #fff; }
.cc-tile .cc-brand.amex { background: #2671b9; color: #fff; }
.cc-tile .cc-brand.isracard { background: #ed1c24; color: #fff; }
.cc-tile .cc-num {
    font-size: 16px; letter-spacing: 0.5px; color: #222; margin: 14px 0 6px;
    direction: ltr; font-family: 'Courier New', monospace; font-weight: 600;
    white-space: nowrap;
}
.cc-tile .cc-owner { font-size: 13px; color: #455a64; }
.cc-tile .cc-row {
    margin-top: auto; padding-top: 12px;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 11.5px; color: #78909c;
}
.cc-tile .cc-exp.expired { color: #c62828; font-weight: 600; }
.cc-tile .cc-pay-btn {
    background: linear-gradient(135deg, #1976D2, #2196F3); color: #fff; border: 0;
    padding: 5px 12px; border-radius: 4px; font-size: 12px;
    display: inline-flex; align-items: center; gap: 5px;
}
.cc-tile .cc-update-link { font-size: 11px; color: #1976D2; text-decoration: underline; cursor: pointer; }

.cc-tile-new {
    border: 2px dashed #b0bec5; background: #fafbfc;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: #546e7a; text-align: center; padding: 24px;
}
.cc-tile-new:hover { border-color: #1976D2; color: #1976D2; background: #f4f9ff; }
.cc-tile-new i { font-size: 32px; margin-bottom: 8px; }
.cc-tile-new .lbl { font-size: 13.5px; }

.cc-total-bar {
    background: linear-gradient(135deg, #1976D2 0%, #2196F3 100%);
    color: #fff; border-radius: 8px; padding: 14px 20px;
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
    margin-bottom: 18px;
}
.cc-total-bar .lbl { font-size: 14px; opacity: 0.9; }
.cc-total-bar .amt { font-size: 28px; font-weight: 700; line-height: 1.2; }
.cc-total-bar .sub { font-size: 14px; opacity: 0.95; font-weight: 600; }

/* ----- newCc modal (cardholder input) ----- */
.newcc-intro {
    background: #f8fafd; border-right: 3px solid #2196F3;
    padding: 10px 14px; border-radius: 4px;
    font-size: 12.5px; color: #455a64; margin-bottom: 14px; line-height: 1.55;
}
.newcc-iframe-wrap {
    border: 1px solid #e0e3e7; border-radius: 6px; overflow: hidden; background: #fafbfc;
}

/* ----- Result page (payment_finish.php — with monsters) ----- */
.pay-result-wrap {
    max-width: 720px; margin: 0 auto; text-align: center;
    background: #fff; border-radius: 12px; padding: 28px 24px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06); border: 1px solid #eceff1;
}
.pay-result-wrap.is-success { border-top: 6px solid #4CAF50; }
.pay-result-wrap.is-error   { border-top: 6px solid #e53935; }
.pay-result-monster { width: auto; height: 260px; display: block; margin: 0 auto 16px; }
.pay-result-title { font-size: 28px; font-weight: 700; margin: 0 0 10px; }
.pay-result-wrap.is-success .pay-result-title { color: #2E7D32; }
.pay-result-wrap.is-error   .pay-result-title { color: #c62828; }
.pay-result-msg { font-size: 15px; color: #455a64; line-height: 1.6; margin-bottom: 16px; }
.pay-result-pill {
    display: inline-block; padding: 9px 16px; border-radius: 6px;
    font-size: 14px; font-weight: 500; margin: 6px 0; line-height: 1.5;
}
.pay-result-pill.is-success { background: #e8f5e9; color: #1b5e20; }
.pay-result-pill.is-error   { background: #ffebee; color: #b71c1c; }
.pay-result-pill a { color: inherit; font-weight: 700; text-decoration: underline; }
.pay-result-cta { margin-top: 22px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }


/* =============================================================
   Credit / balance display — credit_report.php
   Built on top of the .product-card shell from the payment pages.
   ============================================================= */
.credit-amount {
    font-size: 36px; font-weight: 800; line-height: 1; margin: 6px 0 4px;
}
.pc-sms  .credit-amount { color: #1976D2; }
.pc-vms  .credit-amount { color: #2E7D32; }
.pc-call .credit-amount { color: #00838F; }
.credit-unit { font-size: 13px; color: #607d8b; font-weight: 500; margin-right: 4px; }

.credit-meta {
    font-size: 12.5px; color: #607d8b; line-height: 1.7;
    border-top: 1px dashed #eef0f3; padding-top: 10px; margin-top: 10px;
}
.credit-meta strong { color: #222; font-weight: 600; }

.credit-empty {
    background: #fafbfc; border: 1px dashed #cfd8dc;
    border-radius: 6px; padding: 14px; text-align: center;
    color: #78909c; font-size: 13px; font-weight: 500;
}

.credit-alert-box {
    background: linear-gradient(135deg, #f8fafd 0%, #eef5fc 100%);
    border: 1px solid #d0e1f5; border-radius: 6px;
    padding: 10px 12px; margin-top: 12px;
}
.credit-alert-box .lbl {
    display: block; font-size: 12px; color: #455a64; font-weight: 600; margin-bottom: 4px;
}
.credit-alert-box input[type=number] {
    width: 100%; border: 1px solid #d0d4d8; border-radius: 5px;
    padding: 7px 10px; font-size: 13.5px; direction: ltr; text-align: right;
}
.credit-alert-box input[type=number]:focus {
    border-color: #1976D2; outline: none; box-shadow: 0 0 0 2px rgba(33,150,243,0.15);
}

.credit-alert-warn {
    background: #fff8e1; border: 1px solid #ffe082; border-radius: 6px;
    padding: 9px 12px; margin-top: 12px;
    font-size: 12px; color: #6d4c00; line-height: 1.55;
}
.credit-alert-warn i { color: #f57c00; margin-left: 5px; }

.credit-card-action {
    margin-top: 8px;
    display: flex; justify-content: flex-end;
}
.credit-card-action a {
    font-size: 12px; color: #1976D2; text-decoration: none; font-weight: 600;
}
.credit-card-action a:hover { text-decoration: underline; }


/* =============================================================
   Account-info pages — account_report.php and other "view details"
   pages built around large headline tiles + clean label/value rows.
   ============================================================= */
.acct-tile {
    display: flex; align-items: center; gap: 14px;
    border-radius: 8px;
    padding: 16px 18px;
    height: 100%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.acct-tile .icn {
    width: 50px; height: 50px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
/* 32px inner glyph — same approach as the DS KPI tiles (set on child <i> to win
   the Limitless per-icon cascade). */
.acct-tile .icn > i { font-size: 32px; top: 0; vertical-align: baseline; line-height: 1; }
.acct-tile .val { font-size: 16px; font-weight: 600; color: #222; line-height: 1.3; word-break: break-word; }
.acct-tile .val a { color: inherit; text-decoration: none; }
.acct-tile .val a:hover { text-decoration: underline; }
.acct-tile .lbl { font-size: 12px; color: #607d8b; margin-top: 3px; }

.acct-tile.t-account { background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%); border: 1px solid #90caf9; }
.acct-tile.t-account .icn { background: #1976D2; color: #fff; }
.acct-tile.t-account .val { color: #0d47a1; }

.acct-tile.t-site { background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%); border: 1px solid #a5d6a7; }
.acct-tile.t-site .icn { background: #2E7D32; color: #fff; }
.acct-tile.t-site .val { color: #1b5e20; }

.acct-tile.t-user { background: linear-gradient(135deg, #ede7f6 0%, #d1c4e9 100%); border: 1px solid #b39ddb; }
.acct-tile.t-user .icn { background: #5E35B1; color: #fff; }
.acct-tile.t-user .val { color: #311b92; }

/* Section header — slightly richer gradient + colored left border accent.
   Overrides the plainer ps-head defined in the "Payment pages" block above. */
.pay-section { box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.pay-section .ps-head {
    background: linear-gradient(135deg, #eef5fc 0%, #e3f2fd 100%);
    border-bottom: 1px solid #bbdefb;
}
.pay-section .ps-head h6 { color: #0d47a1; }
.pay-section .ps-head i { color: #1976D2; font-size: 17px; }

/* Section header that needs an action button on the right */
.pay-section .ps-head-action { margin-right: auto; }
.pay-section .ps-head-action .pay-btn-next {
    padding: 5px 12px; font-size: 12.5px;
}

/* Make sure icons inside our buttons inherit the button text color.
   Some icomoon classes in the Limitless theme set their own color; this
   ensures the pencil/checkmark/arrow always matches the button text. */
.pay-btn-next i, .pay-btn-next > i,
.pay-btn-back i, .pay-btn-back > i { color: inherit !important; }

.info-list { list-style: none; padding: 0; margin: 0; }
.info-list .info-row {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 10px 0; border-bottom: 1px dashed #eef0f3;
    font-size: 13.5px;
}
.info-list .info-row:nth-child(even) {
    background: #f8fafd; margin: 0 -18px; padding-right: 18px; padding-left: 18px;
}
.info-list .info-row:last-child { border-bottom: 0; }
.info-list .info-row .k { color: #455a64; font-weight: 600; }
.info-list .info-row .v { color: #222; text-align: left; max-width: 60%; word-break: break-word; }
.info-list .info-row .v.muted { color: #999; font-weight: 400; }

/* Contact mini-table inside a pay-section */
.contact-table {
    width: 100%; border-collapse: collapse;
}
.contact-table th, .contact-table td {
    padding: 11px 14px; border-bottom: 1px solid #eef0f3;
    font-size: 13.5px; text-align: right; vertical-align: top;
}
.contact-table th { background: #f8fafd; color: #455a64; font-weight: 600; font-size: 12px; }
.contact-table tbody tr:nth-child(even) { background: #fafbfc; }
.contact-table tr:last-child td { border-bottom: 0; }
.contact-table .idx {
    width: 28px; height: 28px; border-radius: 50%;
    background: #1976D2; color: #fff; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
}

/* Block-link config — labeled select pairs */
.block-row {
    display: flex; align-items: center; gap: 10px;
    background: #f8fafd; border: 1px solid #e0e3e7;
    border-radius: 6px; padding: 10px 12px;
    margin-bottom: 8px;
    transition: border-color 0.15s, background 0.15s;
}
.block-row:hover { border-color: #bbdefb; background: #eef5fc; }
.block-row .b-lbl {
    flex: 0 0 130px; font-size: 13px; color: #455a64; font-weight: 600;
}
.block-row select {
    flex: 1; border: 1px solid #d0d4d8; border-radius: 5px;
    padding: 7px 10px; font-size: 13px; background: #fff;
}
.block-row select:focus { border-color: #1976D2; outline: none; box-shadow: 0 0 0 2px rgba(33,150,243,0.15); }

/* When Select2 wraps the native select, the original element is hidden and
   .select2-container takes its visual place — needs to flex the same way.
   Limitless theme adds vertical padding to .select2-selection__rendered which
   pushes the text down; we reset it and use line-height alone for centering. */
.block-row .select2-container { flex: 1; }
.block-row .select2-container--default .select2-selection--single {
    border: 1px solid #d0d4d8; border-radius: 5px; height: 34px;
    background: #fff;
    display: flex; align-items: center;
}
.block-row .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 32px !important; font-size: 13px; color: #222;
    padding-top: 0 !important; padding-bottom: 0 !important;
    flex: 1;
}
.block-row .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 32px; top: 0;
}

/* Locked row — soft slate-blue instead of amber. Conveys "fixed by policy"
   without the warning/error feel that the amber tone gave. */
.block-row.is-locked {
    background: linear-gradient(135deg, #eceff1 0%, #cfd8dc 100%);
    border-color: #b0bec5;
}
.block-row.is-locked:hover { background: linear-gradient(135deg, #eceff1 0%, #cfd8dc 100%); border-color: #b0bec5; }
.block-row.is-locked .b-lbl { color: #37474f; }
.block-row.is-locked .b-lbl::after {
    content: "\eb69";              /* icomoon icon-lock5 */
    font-family: 'icomoon';
    margin-right: 5px;
    font-size: 12px;
    vertical-align: middle;
    color: var(--c-danger-1);      /* red — signals locked/blocked */
}
.block-row.is-locked select { background: #f5f7f8; color: #455a64; cursor: not-allowed; }


/* =============================================================
   DESIGN SYSTEM (DS) — see DESIGN_SYSTEM.md
   First introduced for index_v3.php homepage rewrite (2026-05-24).
   ============================================================= */

/* ---- Color tokens ---- */
:root {
    --c-primary-1:#2196F3; --c-primary-2:#1976D2; --c-primary-3:#0d47a1; --c-primary-bg:#e3f2fd;
    --c-success-1:#4CAF50; --c-success-2:#2E7D32; --c-success-3:#1b5e20; --c-success-bg:#e8f5e9;
    --c-danger-1:#e53935;  --c-danger-2:#c62828;  --c-danger-3:#b71c1c;  --c-danger-bg:#ffebee;
    --c-warn-1:#FF9800;    --c-warn-2:#E65100;    --c-warn-3:#6d4c00;    --c-warn-bg:#fff8e1;
    --c-info-1:#00BCD4;    --c-info-2:#00838F;    --c-info-3:#006064;    --c-info-bg:#e0f7fa;
    --c-accent-1:#7E57C2;  --c-accent-2:#5E35B1;  --c-accent-3:#311b92;  --c-accent-bg:#ede7f6;
    --c-neutral-1:#607d8b; --c-neutral-2:#455a64; --c-neutral-bg:#eceff1;
    --c-text:#222; --c-text-soft:#607d8b; --c-text-muted:#90a4ae;
    --c-border:#e0e3e7; --c-border-soft:#eef0f3;
}

/* ---- .ds-btn (split-button: .t text zone + .i icon zone) ---- */
.ds-btn {
    display:inline-flex; align-items:stretch;
    border:none !important; outline:none !important; box-shadow:none !important;
    appearance:none; -webkit-appearance:none; -moz-appearance:none;
    border-radius:3px; overflow:hidden;
    font-size:13px; cursor:pointer; text-decoration:none;
    line-height:1; vertical-align:middle;
    transition:filter 0.15s ease; background:transparent;
}
.ds-btn::-moz-focus-inner { border:0; padding:0; }
.ds-btn:focus, .ds-btn:active { outline:none !important; box-shadow:none !important; }
.ds-btn:hover { filter:brightness(1.05); text-decoration:none; }
.ds-btn.outline:hover { filter:brightness(0.93); }
.ds-btn .t { padding:9px 12px; display:inline-flex; align-items:center; color:#fff; background-clip:padding-box; -webkit-background-clip:padding-box; }
.ds-btn .i { padding:9px 9px;  display:inline-flex; align-items:center; background:rgba(0,0,0,0.16); color:rgba(255,255,255,0.95); background-clip:padding-box; -webkit-background-clip:padding-box; }
.ds-btn .i i { font-size:14px; }

/* Sizes */
.ds-btn.sm { font-size:12px; }
.ds-btn.sm .t { padding:6px 9px; }
.ds-btn.sm .i { padding:6px 7px; }
.ds-btn.sm .i i { font-size:12px; }
.ds-btn.lg { font-size:14px; }
.ds-btn.lg .t { padding:11px 16px; font-weight:500; }
.ds-btn.lg .i { padding:11px 12px; }
.ds-btn.lg .i i { font-size:16px; }

/* Solid palettes */
.ds-btn.primary  .t{background:var(--c-primary-1);} .ds-btn.primary  .i{background:var(--c-primary-2);}
.ds-btn.success  .t{background:var(--c-success-1);} .ds-btn.success  .i{background:var(--c-success-2);}
.ds-btn.danger   .t{background:var(--c-danger-1);}  .ds-btn.danger   .i{background:var(--c-danger-2);}
.ds-btn.warning  .t{background:var(--c-warn-1);}    .ds-btn.warning  .i{background:var(--c-warn-2);}
.ds-btn.info     .t{background:var(--c-info-1);}    .ds-btn.info     .i{background:var(--c-info-2);}
.ds-btn.accent   .t{background:var(--c-accent-1);}  .ds-btn.accent   .i{background:var(--c-accent-2);}
.ds-btn.neutral  .t{background:var(--c-neutral-1);} .ds-btn.neutral  .i{background:var(--c-neutral-2);}
.ds-btn.pink     .t{background:#EC407A;}             .ds-btn.pink     .i{background:#C2185B;}

/* Outline (soft-tinted) variant */
.ds-btn.outline { border:0; }
.ds-btn.outline.primary .t{background:var(--c-primary-bg);color:var(--c-primary-2);} .ds-btn.outline.primary .i{background:#c5e1f9;color:var(--c-primary-2);}
.ds-btn.outline.success .t{background:var(--c-success-bg);color:var(--c-success-2);} .ds-btn.outline.success .i{background:#c8e6c9;color:var(--c-success-2);}
.ds-btn.outline.danger  .t{background:var(--c-danger-bg);color:var(--c-danger-2);}   .ds-btn.outline.danger  .i{background:#ffcdd2;color:var(--c-danger-2);}
.ds-btn.outline.warning .t{background:var(--c-warn-bg);color:var(--c-warn-2);}       .ds-btn.outline.warning .i{background:#ffe0b2;color:var(--c-warn-2);}
.ds-btn.outline.accent  .t{background:var(--c-accent-bg);color:var(--c-accent-2);}   .ds-btn.outline.accent  .i{background:#d1c4e9;color:var(--c-accent-2);}
.ds-btn.outline.neutral .t{background:var(--c-neutral-bg);color:var(--c-neutral-2);} .ds-btn.outline.neutral .i{background:#cfd8dc;color:var(--c-neutral-2);}

/* ---- .ds-section-divider (thin line with text in middle) ---- */
.ds-section-divider {
    display:flex; align-items:center; gap:10px;
    margin:8px 0 12px;
    font-size:13px; font-weight:700; color:var(--c-neutral-2);
}
.ds-section-divider::before,
.ds-section-divider::after { content:""; flex:1; height:1px; background:var(--c-border); }


/* =============================================================
   HOMEPAGE (index_v3.php) overrides
   - .accent collides with .domain-card .accent (top color strip)
     so the marketing-card buttons use .mkt instead.
   - Force .ds-btn.sm and legacy .qa-btn to the same height inside
     .domain-card .actions for visual consistency.
   ============================================================= */
.ds-btn.mkt  .t{background:var(--c-accent-1);}  .ds-btn.mkt  .i{background:var(--c-accent-2);}
.ds-btn.outline.mkt .t{background:var(--c-accent-bg);color:var(--c-accent-2);}
.ds-btn.outline.mkt .i{background:#d1c4e9;color:var(--c-accent-2);}

.domain-card .actions .ds-btn.sm { min-height:26px; }
.domain-card .actions .btn.qa-btn {
    font-size:12px;
    padding:0 11px !important;
    line-height:1;
    border-radius:3px;
    height:26px;
    display:inline-flex;
    align-items:center;
    white-space:nowrap;
}


/* =============================================================
   DATATABLES PAGINATION — DS-style override
   Targets DataTables' .dataTables_paginate > .paginate_button
   markup (the Limitless default rendering) and restyles it to
   match DESIGN_SYSTEM §4.1. Applies to every table system-wide.
   ============================================================= */
.dataTables_paginate .paginate_button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 10px !important;
    margin: 0 2px !important;
    background: #fff !important;
    border: 1px solid var(--c-border) !important;
    border-radius: 4px !important;
    color: var(--c-neutral-2) !important;
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none !important;
    cursor: pointer;
    transition: all 0.15s ease;
}
.dataTables_paginate .paginate_button:hover,
.dataTables_paginate .paginate_button:focus {
    background: var(--c-primary-bg) !important;
    color: var(--c-primary-2) !important;
    border-color: var(--c-primary-2) !important;
}
.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover,
.dataTables_paginate .paginate_button.current:focus {
    background: var(--c-primary-2) !important;
    color: #fff !important;
    border-color: var(--c-primary-2) !important;
}
.dataTables_paginate .paginate_button.disabled,
.dataTables_paginate .paginate_button.disabled:hover,
.dataTables_paginate .paginate_button.disabled:focus {
    background: #f7f8f9 !important;
    color: var(--c-text-muted) !important;
    border-color: var(--c-border) !important;
    cursor: not-allowed;
}
/* Ellipsis ("...") between page ranges */
.dataTables_paginate .ellipsis {
    display: inline-flex;
    align-items: center;
    padding: 0 6px;
    color: var(--c-text-muted);
    font-weight: 500;
}
/* Info text on the other side of the pagination row */
.dataTables_info {
    font-size: 12px !important;
    color: var(--c-text-soft) !important;
    padding-top: 0 !important;
}
.dataTables_info b, .dataTables_info strong { color: var(--c-text); }

/* The paging_simple variant (prev/next only) — same look */
.dataTables_paginate.paging_simple .paginate_button {
    padding: 0 14px !important;
}
.dataTables_paginate.paging_simple .paginate_button:not(.disabled):hover,
.dataTables_paginate.paging_simple .paginate_button:not(.disabled):focus {
    background: var(--c-primary-bg) !important;
    color: var(--c-primary-2) !important;
}


/* =============================================================
   DATATABLES TOOLBAR — softer rounded corners
   Bumps border-radius from Limitless default (3px) to 6px on the
   entries-per-page select, action buttons, and search input
   for a slightly softer, more modern look. Applies system-wide.
   ============================================================= */
.dataTables_length select,
.dataTables_length .select2-selection,
.dataTables_filter input,
.dataTables_wrapper .dt-buttons .dt-button,
.dataTables_wrapper .dt-buttons .btn {
    border-radius: 4px !important;
}
/* Also smooth the corners of the select2 dropdown trigger (if used for length) */
.dataTables_length .select2-container .select2-selection--single .select2-selection__rendered { border-radius: 4px !important; }


/* =============================================================
   .ds-badge — rectangular solid badge per DESIGN_SYSTEM §7
   ============================================================= */
.ds-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.55;
    border-radius: 3px;
    color: #fff;
}
a.ds-badge, a.ds-badge:hover, a.ds-badge:focus { color: #fff; text-decoration: none; }
a.ds-badge:hover { filter: brightness(0.93); }
.ds-badge.primary { background: var(--c-primary-2); }
.ds-badge.success { background: #43A047; }
.ds-badge.danger  { background: var(--c-danger-1); }
.ds-badge.warning { background: var(--c-warn-1); color: #fff; }
.ds-badge.info    { background: #0097A7; }       /* Cyan-700 midpoint between info-1 and info-2 */
.ds-badge.accent  { background: var(--c-accent-2); }
.ds-badge.neutral { background: var(--c-neutral-1); }


/* =============================================================
   Brand color extensions — for use across snapshot pages
   (voice, wa, marketing). Same shape as the core palette.
   ============================================================= */
.kpi-card .kpi-icon.pink         { background: #EC407A; }
.kpi-card .kpi-icon.deep-purple  { background: #9C27B0; }
.kpi-card .kpi-icon.wa-green     { background: #25D366; }
.kpi-card .kpi-icon.wa-blue      { background: #34B7F1; }

.ds-badge.pink         { background: #EC407A; }
.ds-badge.deep-purple  { background: #9C27B0; }
.ds-badge.wa-green     { background: #25D366; }
.ds-badge.wa-blue      { background: #34B7F1; }

/* Deep (-2) shade variants — for when more than 7 distinct hues are needed
   (e.g. wa_inReport per-type badges). Use sparingly. */
.ds-badge.danger-2     { background: var(--c-danger-2); }
.ds-badge.warn-2       { background: var(--c-warn-2); }
.ds-badge.info-2       { background: var(--c-info-2); }
.ds-badge.accent-2     { background: var(--c-accent-2); }

/* Yellow gap-filler — DS palette has no yellow; mustard fills that gap.
   Outside the formal 7-family palette. Use only when none of the families fits. */
.ds-badge.mustard      { background: #F9A825; }


/* =============================================================
   Buy-link inside a KPI tile: compact so the tile keeps the
   same height as the others (which show plain "היום" sub-text).
   ============================================================= */
.kpi-card .kpi-sub .ds-btn {
    font-size: 11px;
    line-height: 1.4;
}
.kpi-card .kpi-sub .ds-btn .t { padding: 1px 6px; }
.kpi-card .kpi-sub .ds-btn .i { padding: 1px 5px; }
.kpi-card .kpi-sub .ds-btn .i i { font-size: 11px; }


/* =============================================================
   .ds-btn.back — back-navigation variant
   Swaps visual order so the icon zone (.i) sits on the visual
   RIGHT in RTL. Use only when the icon is a directional back-arrow
   that points back (right in RTL). For non-directional icons
   (home, settings, etc.) use a regular .ds-btn (icon left).
   ============================================================= */
.ds-btn.back { flex-direction: row-reverse; }


/* =============================================================
   .ds-banner — page-level info/success/warning/danger messages
   with a monster image. See DESIGN_SYSTEM.md §5.
   Info uses the primary BLUE palette intentionally (not cyan).
   ============================================================= */
.ds-banner {
    display: flex; gap: 12px; align-items: center;
    padding: 10px 16px; border-radius: 6px;
    border-right: 4px solid var(--c-primary-2);
    background: var(--c-primary-bg);
    color: var(--c-primary-3); font-size: 12.5px; line-height: 1.5;
    margin-bottom: 10px;
}
.ds-banner .ds-banner-monster {
    width: 52px; height: 52px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.ds-banner .ds-banner-monster img { width: auto; height: 100%; max-width: 100%; display: block; }
.ds-banner .body strong { display: block; margin-bottom: 2px; font-size: 12.5px; }
.ds-banner .body a { color: inherit; font-weight: 700; text-decoration: underline; }
.ds-banner.info    { border-right-color: var(--c-primary-2); background: var(--c-primary-bg); color: var(--c-primary-3); }
.ds-banner.success { border-right-color: var(--c-success-2); background: var(--c-success-bg); color: var(--c-success-3); }
.ds-banner.warning { border-right-color: var(--c-warn-1);    background: var(--c-warn-bg);    color: var(--c-warn-3); }
.ds-banner.danger  { border-right-color: var(--c-danger-1);  background: var(--c-danger-bg);  color: var(--c-danger-3); }


/* =============================================================
   .ds-toast — floating notification with monster-on-top
   The monster image sticks above the toast (fixed HEIGHT so all
   monsters anchor at the same point regardless of aspect ratio).
   Position the toast container with `position: fixed; top: 72px;
   left: 16px` (in RTL) per DESIGN_SYSTEM §6.
   ============================================================= */
.ds-toast {
    background: #fff; border-radius: 4px;
    border: 1px solid var(--c-border);
    color: var(--c-text); pointer-events: auto; position: relative;
    margin-top: 90px;                /* room for the monster overhang */
    animation: ds-toast-in 0.25s ease-out;
}
@keyframes ds-toast-in {
    from { opacity: 0; transform: translateX(-12px); }
    to   { opacity: 1; transform: translateX(0); }
}
.ds-toast .ds-toast-monster {
    position: absolute; bottom: 100%; right: 16px;
    height: 90px; width: auto; z-index: 2;
    pointer-events: none; display: block;
}
.ds-toast .monster-row {
    background: var(--c-primary-bg); padding: 14px 16px;
    border-radius: 4px 4px 0 0;
    border-bottom: 1px solid var(--c-border-soft);
    min-height: 68px;
    display: flex; align-items: center;
}
.ds-toast .monster-row .body strong {
    display: block; font-size: 14px; margin-bottom: 3px; color: var(--c-text);
}
.ds-toast .monster-row .body span,
.ds-toast .monster-row .body span * {
    font-size: 12.5px; color: var(--c-text-soft); line-height: 1.5;
    font-weight: 400;
    white-space: pre-line;
}
.ds-toast .x {
    position: absolute; top: 6px; left: 8px;
    color: var(--c-text-muted); cursor: pointer;
    font-size: 18px; line-height: 1;
    background: none; border: 0; z-index: 3;
}
.ds-toast .progress {
    height: 4px; background: rgba(0,0,0,0.08);
    border-radius: 0 0 4px 4px; overflow: hidden;
}
.ds-toast .progress .bar {
    height: 100%; background: var(--c-primary-2);
    animation: ds-toast-prog 5s linear forwards;
}
/* Hovering the toast freezes the progress bar (and the auto-close timer
   that's wired to its animationend event in showNotify). */
.ds-toast:hover .progress .bar { animation-play-state: paused; }
@keyframes ds-toast-prog { from { width: 100%; } to { width: 0%; } }

/* Type variants — coloured monster-row tint + progress bar */
.ds-toast.success .monster-row { background: var(--c-success-bg); }
.ds-toast.success .progress .bar { background: var(--c-success-2); }
.ds-toast.danger  .monster-row { background: var(--c-danger-bg); }
.ds-toast.danger  .progress .bar { background: var(--c-danger-1); }
.ds-toast.warning .monster-row { background: var(--c-warn-bg); }
.ds-toast.warning .progress .bar { background: var(--c-warn-1); }

/* Fixed-position container holding all stacked toasts (top-left in RTL). */
.ds-toast-zone {
    position: fixed; top: 72px; left: 16px; z-index: 9999;
    display: flex; flex-direction: column; gap: 10px;
    max-width: 360px; width: calc(100vw - 32px); pointer-events: none;
}


/* =============================================================
   .ds-swal — confirmation dialog (per DESIGN_SYSTEM §14)
   Built from scratch on plain DOM (no sweet_alert lib dep).
   Mirrored into layout.css so confirmations also render under
   legacy chrome. Pairs with dsConfirm() in custom.js.php.
   ============================================================= */
.ds-swal-bg {
    position: fixed; inset: 0; background: rgba(0,0,0,0.6);
    z-index: 1100; display: none; align-items: center; justify-content: center;
    padding: 16px;
}
.ds-swal-bg.is-open { display: flex; }

.ds-swal {
    background: #fff; border-radius: 4px; padding: 28px 24px; text-align: center;
    width: 100%; max-width: 440px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.3);
    animation: ds-swal-in 0.2s ease-out;
}
@keyframes ds-swal-in {
    from { transform: scale(0.9); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

.ds-swal .swal-icn {
    width: 88px; height: 88px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    margin: 0 auto 18px; overflow: hidden;
}
.ds-swal .swal-icn i { font-size: 52px; line-height: 1; }

.ds-swal.warning  .swal-icn { background: var(--c-warn-bg);    color: var(--c-warn-1); }
.ds-swal.danger   .swal-icn { background: var(--c-danger-bg);  color: var(--c-danger-1); }
.ds-swal.success  .swal-icn { background: var(--c-success-bg); color: var(--c-success-2); }
.ds-swal.question .swal-icn { background: var(--c-primary-bg); color: var(--c-primary-2); }

.ds-swal h4 {
    font-size: 16px; font-weight: 600; color: var(--c-text);
    margin: 0 0 8px;
}
.ds-swal p {
    font-size: 13.5px; color: var(--c-text-soft);
    margin: 0 0 20px; line-height: 1.6;
}

.ds-swal .actions {
    display: flex; gap: 26px; justify-content: center; flex-wrap: wrap;
}
.ds-swal .actions .ds-btn[data-cd] .t span { opacity: 0.8; font-variant-numeric: tabular-nums; }

@media (max-width: 576px) {
    .ds-swal { padding: 24px 16px; }
    .ds-swal .actions { flex-direction: column-reverse; }
    .ds-swal .actions .ds-btn { width: 100%; justify-content: center; }
}

/* The legacy .pay-section .ps-head { i { color: #1976D2 } } rule applies to every
   <i> inside the header — including inside .ds-btn. Force white so the button's
   icon stays visible against its blue background. (Was 'inherit' but the inherited
   parent .i color didn't always win the cascade reliably in nested headers.) */
.pay-section .ps-head .ds-btn .i i,
.pay-section .ps-head .ds-btn .t i { color: #fff !important; }
/* And for outline variants the icon should match the colored text instead of white. */
.pay-section .ps-head .ds-btn.outline.primary .i i,
.pay-section .ps-head .ds-btn.outline.primary .t i { color: var(--c-primary-2) !important; }
.pay-section .ps-head .ds-btn.outline.neutral .i i,
.pay-section .ps-head .ds-btn.outline.neutral .t i { color: var(--c-neutral-2) !important; }
.pay-section .ps-head .ds-btn.outline.danger  .i i,
.pay-section .ps-head .ds-btn.outline.danger  .t i { color: var(--c-danger-2)  !important; }
.pay-section .ps-head .ds-btn.outline.success .i i,
.pay-section .ps-head .ds-btn.outline.success .t i { color: var(--c-success-2) !important; }


/* =============================================================
   .ds-mini — lightweight popup (NOT a modal, NOT a SWAL).
   For small focused interactions (inline audio player, tiny file picker).
   ~310px wide, white textured background. Backdrop-click closes.
   ============================================================= */
.ds-mini-bg {
    position: fixed; inset: 0; background: rgba(0,0,0,0.6);
    z-index: 1100; display: none; align-items: center; justify-content: center;
    padding: 16px;
}
.ds-mini-bg.is-open { display: flex; }

.ds-mini {
    background: #fff url('/_assets/images/backgrounds/seamless.png') repeat;
    border-radius: 4px;
    width: 100%; max-width: 310px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.3);
    overflow: hidden;
    animation: ds-mini-in 0.2s ease-out;
}
@keyframes ds-mini-in {
    from { transform: scale(0.92); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

.ds-mini-head      { padding: 14px 16px 6px; text-align: center; }
.ds-mini-head h4   { font-size: 15px; font-weight: 600; color: var(--c-text); margin: 0; }
.ds-mini-body      { padding: 12px 16px; text-align: center; }
.ds-mini-foot      { padding: 6px 16px 14px; text-align: center; }
.ds-mini-body > audio { width: 100%; max-width: 270px; }



/* ===========================================================================
   Legacy .badge.bg-* shim — restyles colored Bootstrap/Limitless badges to
   the DS visual treatment (rectangular 3px, font-weight 400, DS palette).
   Excludes form-label badges (float-left/right per DEV_RULES §26) so they
   keep their Limitless look. Status badges in tables / reports get the new
   look automatically with no PHP edits.
   =========================================================================== */
.badge.bg-primary:not(.float-left):not(.float-right),
.badge.bg-success:not(.float-left):not(.float-right),
.badge.bg-danger:not(.float-left):not(.float-right),
.badge.bg-warning:not(.float-left):not(.float-right),
.badge.bg-pink:not(.float-left):not(.float-right),
.badge.bg-pink-300:not(.float-left):not(.float-right),
.badge.bg-pink-400:not(.float-left):not(.float-right),
.badge.bg-purple:not(.float-left):not(.float-right),
.badge.bg-violet-400:not(.float-left):not(.float-right),
.badge.bg-teal:not(.float-left):not(.float-right),
.badge.bg-teal-300:not(.float-left):not(.float-right),
.badge.bg-teal-400:not(.float-left):not(.float-right),
.badge.bg-orange-400:not(.float-left):not(.float-right),
.badge.bg-orange-600:not(.float-left):not(.float-right),
.badge.bg-slate:not(.float-left):not(.float-right),
.badge.bg-grey:not(.float-left):not(.float-right),
.badge.bg-grey-300:not(.float-left):not(.float-right),
.badge.bg-grey-400:not(.float-left):not(.float-right),
.badge.bg-indigo-400:not(.float-left):not(.float-right),
.badge.bg-green:not(.float-left):not(.float-right) {
    border-radius: 3px !important;
    font-weight: 400 !important;
    padding: 2px 8px !important;
    color: #fff !important;
    font-size: 11.5px !important;
    letter-spacing: 0 !important;
    line-height: 1.55 !important;
}

.badge.bg-primary:not(.float-left):not(.float-right)     { background-color: #1976D2 !important; }
.badge.bg-success:not(.float-left):not(.float-right),
.badge.bg-green:not(.float-left):not(.float-right)       { background-color: #43A047 !important; }
.badge.bg-danger:not(.float-left):not(.float-right)      { background-color: #e53935 !important; }
.badge.bg-warning:not(.float-left):not(.float-right),
.badge.bg-orange-400:not(.float-left):not(.float-right),
.badge.bg-orange-600:not(.float-left):not(.float-right)  { background-color: #FF9800 !important; }
.badge.bg-pink:not(.float-left):not(.float-right),
.badge.bg-pink-300:not(.float-left):not(.float-right),
.badge.bg-pink-400:not(.float-left):not(.float-right)    { background-color: #ec407a !important; }
.badge.bg-purple:not(.float-left):not(.float-right),
.badge.bg-violet-400:not(.float-left):not(.float-right)  { background-color: #7E57C2 !important; }
.badge.bg-teal:not(.float-left):not(.float-right),
.badge.bg-teal-300:not(.float-left):not(.float-right),
.badge.bg-teal-400:not(.float-left):not(.float-right)    { background-color: #26A69A !important; }
.badge.bg-slate:not(.float-left):not(.float-right)       { background-color: #455a64 !important; }
.badge.bg-grey:not(.float-left):not(.float-right),
.badge.bg-grey-300:not(.float-left):not(.float-right)    { background-color: #607d8b !important; }
.badge.bg-grey-400:not(.float-left):not(.float-right)    { background-color: #b0bec5 !important; }
.badge.bg-indigo-400:not(.float-left):not(.float-right)  { background-color: #0d47a1 !important; }




/* bg-info added 2026-05-25 — info-cyan color for legacy badge-info renames */
.badge.bg-info:not(.float-left):not(.float-right) {
    border-radius: 3px !important;
    font-weight: 400 !important;
    padding: 2px 8px !important;
    color: #fff !important;
    font-size: 11.5px !important;
    letter-spacing: 0 !important;
    line-height: 1.55 !important;
    border: 0 !important;
    background-color: #0097A7 !important;
}

/* Also add border:none to the existing .bg-* shim entries (kills Limitless outlined borders) */
.badge.bg-primary:not(.float-left):not(.float-right),
.badge.bg-success:not(.float-left):not(.float-right),
.badge.bg-danger:not(.float-left):not(.float-right),
.badge.bg-warning:not(.float-left):not(.float-right),
.badge.bg-pink:not(.float-left):not(.float-right),
.badge.bg-pink-300:not(.float-left):not(.float-right),
.badge.bg-pink-400:not(.float-left):not(.float-right),
.badge.bg-purple:not(.float-left):not(.float-right),
.badge.bg-violet-400:not(.float-left):not(.float-right),
.badge.bg-teal:not(.float-left):not(.float-right),
.badge.bg-teal-300:not(.float-left):not(.float-right),
.badge.bg-teal-400:not(.float-left):not(.float-right),
.badge.bg-orange-400:not(.float-left):not(.float-right),
.badge.bg-orange-600:not(.float-left):not(.float-right),
.badge.bg-slate:not(.float-left):not(.float-right),
.badge.bg-grey:not(.float-left):not(.float-right),
.badge.bg-grey-300:not(.float-left):not(.float-right),
.badge.bg-grey-400:not(.float-left):not(.float-right),
.badge.bg-indigo-400:not(.float-left):not(.float-right),
.badge.bg-green:not(.float-left):not(.float-right) {
    border: 0 !important;
}




/* DS-palette extensions for badges — deep-purple, mustard (yellow gap-filler),
   plus -2 / deep shades of the main DS families (danger-2, warn-2, info-2). */
.badge.bg-deep-purple:not(.float-left):not(.float-right),
.badge.bg-mustard:not(.float-left):not(.float-right),
.badge.bg-danger-2:not(.float-left):not(.float-right),
.badge.bg-warn-2:not(.float-left):not(.float-right),
.badge.bg-info-2:not(.float-left):not(.float-right),
.badge.bg-accent-2:not(.float-left):not(.float-right) {
    border-radius: 3px !important;
    font-weight: 400 !important;
    padding: 2px 8px !important;
    color: #fff !important;
    font-size: 11.5px !important;
    letter-spacing: 0 !important;
    line-height: 1.55 !important;
    border: 0 !important;
}
.badge.bg-deep-purple:not(.float-left):not(.float-right)  { background-color: #9C27B0 !important; }
.badge.bg-mustard:not(.float-left):not(.float-right)      { background-color: #F9A825 !important; }
.badge.bg-danger-2:not(.float-left):not(.float-right)     { background-color: #c62828 !important; }
.badge.bg-warn-2:not(.float-left):not(.float-right)       { background-color: #E65100 !important; }
.badge.bg-info-2:not(.float-left):not(.float-right)       { background-color: #00838F !important; }
.badge.bg-accent-2:not(.float-left):not(.float-right)     { background-color: #5E35B1 !important; }



/* ===========================================================================
   .ds-kpi — canonical DS KPI tile (per DESIGN_SYSTEM §8.2)
   Border-right accent (4px) in the variant color + tinted-square icon.
   Ported from sketch_design_system.html 2026-05-25.
   Different from .kpi-card used by snapshots — .kpi-card is the simplified
   variant. Prefer .ds-kpi for new pages per the DS spec.
   =========================================================================== */
.ds-kpi {
    border: 1px solid var(--c-border); border-radius: 8px; background: #fff;
    padding: 16px; display: flex; align-items: center; gap: 14px;
    border-right: 4px solid var(--c-primary-2);
    height: 100%;
}
.ds-kpi .icn {
    width: 54px; height: 54px; border-radius: 8px;
    background: var(--c-primary-1); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ds-kpi .icn > i { font-size: 32px; top: 0; vertical-align: baseline; line-height: 1; }
.ds-kpi .num { font-size: 22px; font-weight: 700; color: var(--c-text); line-height: 1.1; }
.ds-kpi .lbl { font-size: 12px; color: var(--c-text-soft); margin-top: 3px; }
.ds-kpi .sub { font-size: 11px; color: var(--c-text-muted); margin-top: 3px; }
.ds-kpi.success { border-right-color: var(--c-success-2); }
.ds-kpi.success .icn { background: var(--c-success-1); color: #fff; }
.ds-kpi.danger  { border-right-color: var(--c-danger-1); }
.ds-kpi.danger  .icn { background: var(--c-danger-1);  color: #fff; }
.ds-kpi.warning { border-right-color: var(--c-warn-1); }
.ds-kpi.warning .icn { background: var(--c-warn-1);    color: #fff; }
.ds-kpi.info    { border-right-color: var(--c-info-1); }
.ds-kpi.info    .icn { background: var(--c-info-1);    color: #fff; }
.ds-kpi.accent  { border-right-color: var(--c-accent-1); }
.ds-kpi.accent  .icn { background: var(--c-accent-1);  color: #fff; }
.ds-kpi.neutral { border-right-color: var(--c-neutral-1); }
.ds-kpi.neutral .icn { background: var(--c-neutral-1); color: #fff; }
.ds-kpi.pink    { border-right-color: #EC407A; }
.ds-kpi.pink    .icn { background: #EC407A; color: #fff; }
.ds-kpi.deep-purple { border-right-color: #9C27B0; }
.ds-kpi.deep-purple .icn { background: #9C27B0; color: #fff; }
.ds-kpi.teal    { border-right-color: #26A69A; }
.ds-kpi.teal    .icn { background: #26A69A; color: #fff; }

/* WA brand variants for .ds-kpi (used by wa_snapshot) */
.ds-kpi.wa-green { border-right-color: #25D366; }
.ds-kpi.wa-green .icn { background: #25D366; color: #fff; }
.ds-kpi.wa-blue  { border-right-color: #34B7F1; }
.ds-kpi.wa-blue  .icn { background: #34B7F1; color: #fff; }

/* .ds-btn loading state — JS sets data-loading="1" during AJAX. Override with warning tones. */
.ds-btn[data-loading="1"] .t { background: var(--c-warn-1) !important; color: #fff !important; }
.ds-btn[data-loading="1"] .i { background: var(--c-warn-2) !important; color: #fff !important; }
.ds-btn[data-loading="1"] { pointer-events: none; opacity: 0.95; }

/* .ds-badge.teal — green-leaning teal, distinct from info (added 2026-05-25) */
.ds-badge.teal { background: #26A69A; color: #fff; }


/* Generic color variants for product-card (added 2026-05-25 for contact_add and similar) */
.pc-blue   .accent { background: #2196F3; } .pc-blue   .pc-icn { background: rgba(33,150,243,0.12); color: #1976D2; }
.pc-green  .accent { background: #4CAF50; } .pc-green  .pc-icn { background: rgba(76,175,80,0.12);  color: #2E7D32; }
.pc-cyan   .accent { background: #00BCD4; } .pc-cyan   .pc-icn { background: rgba(0,188,212,0.12);  color: #00838F; }
.pc-violet .accent { background: #7E57C2; } .pc-violet .pc-icn { background: rgba(126,87,194,0.12); color: #5E35B1; }
.pc-pink   .accent { background: #EC407A; } .pc-pink   .pc-icn { background: rgba(236,64,122,0.12); color: #C2185B; }



/* Fix: explicit min-height on .ds-btn ensures both .t and .i zones render
   at the same height. flex stretch alone can fail when one child has a
   larger intrinsic content size (icon 14px vs text 13px) — visible mismatch.
   Default size: 32px (matches the icon zone height: 14px icon + 9+9 padding). */
.ds-btn { min-height: 32px; }
.ds-btn.sm { min-height: 26px; }
.ds-btn.lg { min-height: 40px; }
.ds-btn .i i { top: 0 !important; vertical-align: middle; line-height: 1; }



/* Stronger fix: ensure .ds-btn .t and .i zones render same height regardless
   of flex-stretch behavior (some browsers misbehave with <button> + flex).
   With box-sizing: border-box + min-height 32px on each span, both zones
   always render at identical heights. */
.ds-btn .t, .ds-btn .i {
    min-height: 32px;
    box-sizing: border-box;
    align-self: stretch;
}
.ds-btn.sm .t, .ds-btn.sm .i { min-height: 26px; }
.ds-btn.lg .t, .ds-btn.lg .i { min-height: 40px; }



/* Fix: <button> elements have user-agent default padding/border that adds
   1-3px around the flex content. Reset explicitly to 0 so the button outer
   matches the spans inner. (Diagnosed via console: button height 35.1px
   while both spans 32px — 3.1px was UA button padding.) */
.ds-btn { padding: 0 !important; }



/* Final fix: with display reported as "block" (Chrome serializes inline-flex
   as block when blockified), the spans behave as inline-blocks with baseline
   alignment, adding ~1px of line-box overhead. Force vertical-align: top to
   align them by top edge instead of baseline. */
.ds-btn .t, .ds-btn .i { vertical-align: top; }



/* ===============================================================
   Help / info modal content — uniform typography across the system
   Body 12.5px, headings 15px, muted gray text 12.5px.
   Apply via <div class="help-content"> at the top of every help/info AJAX response.
   =============================================================== */
.help-content { font-size: 12.5px; line-height: 1.75; direction: rtl; text-align: right; }
.help-content h6 { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.help-content h5 { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.help-content p { font-size: 12.5px; margin-bottom: 8px; }
.help-content .text-muted { font-size: 12.5px; }
.help-content .font-size-sm { font-size: 12.5px; }
.help-content ul, .help-content ol { font-size: 12.5px; padding-right: 20px; }
.help-content li { margin-bottom: 3px; }
.help-content code { font-size: 12px; }
.help-content table { font-size: 12.5px; }
.help-content table th { font-size: 12.5px; font-weight: 600; }
.help-content table td { font-size: 12.5px; }
.help-content .card-body h6 { margin-bottom: 4px; }
.help-content .ds-banner { font-size: 12.5px; }
.help-content .ds-banner .body strong { font-size: 12.5px; }