/* ============================================================================
   modern-ui.css — KredSafe "Soft Elevated Cards" design layer
   ----------------------------------------------------------------------------
   PURPOSE
   A surface-treatment override layer loaded LAST (after adminlte.min.css and
   style.css). It codifies the brand palette into tokens and applies a cohesive,
   modern look-and-feel — soft white cards, layered shadows, rounded corners,
   smooth transitions, consistent typography — across every blade at once.

   PRINCIPLES
   - Visual only. No structural/layout geometry that the AdminLTE shell relies on
     (sidebar width/offset, content-wrapper margins, fixed positioning) is touched.
   - Conservative on the legacy *material* form system (transparent inputs +
     floating labels + .bar underline). We polish focus/selects only; we do NOT
     restructure those inputs, to avoid functional/visual regressions.
   - Confident on cards, buttons, modals, tables, badges, chrome and type.
   - Palette is preserved: forest green #3f7a2f primary, purple #4E3396 hover,
     navy #0b2e4e text. Nothing new is introduced; we just apply them cleanly.
   ========================================================================== */

/* Design tokens — adapted from the EvictSure UI design system, with the iOS-blue
   primary swapped for the KredSafe brand green (#3f7a2f) and purple (#4E3396).
   Neutral grays, status colors, spacing, radii and shadows follow the system. */
:root {
    /* Brand accent (replaces the system's primary-500 blue) */
    --ks-primary-50:   #eef6ea;   /* tinted wash / hover                */
    --ks-primary-300:  #6aa257;   /* light interactive                  */
    --ks-primary:      #3f7a2f;   /* base primary (brand green)         */
    --ks-primary-700:  #356b28;   /* hover / active                     */
    --ks-primary-900:  #2a5520;   /* pressed                            */
    --ks-secondary:    #4E3396;   /* brand purple (secondary accent)    */

    /* Aliases kept for earlier rules in this file */
    --ks-green:        #3f7a2f;
    --ks-green-600:    #356b28;
    --ks-green-tint:   rgba(63, 122, 47, 0.08);
    --ks-green-ring:   rgba(63, 122, 47, 0.15);
    --ks-purple:       #4E3396;
    --ks-navy:         #0b2e4e;
    --ks-navy-soft:    #1e3a4c;

    /* Status colors (from the design system) */
    --ks-success:      #27AE60;   --ks-success-bg: #F0FDF4;
    --ks-warning:      #F39C12;   --ks-warning-bg: #FFFBEB;
    --ks-danger:       #E74C3C;   --ks-danger-bg:  #FEF2F2;
    --ks-info:         #3498DB;   --ks-info-bg:    #EFF6FF;

    /* Neutrals (from the design system) */
    --ks-bg:           #f4f6f9;   /* page (kept slightly cooler brand bg) */
    --ks-surface:      #FFFFFF;   /* card / page surface                  */
    --ks-bg-secondary: #F9FAFB;   /* subtle panel, table header/stripe    */
    --ks-bg-tertiary:  #F3F4F6;   /* recessed area, icon button rest      */
    --ks-text:         #111827;   /* body text                            */
    --ks-text-2:       #4B5563;   /* secondary labels                     */
    --ks-text-3:       #6B7280;   /* helper text, placeholders            */
    --ks-muted:        #6B7280;
    --ks-border:       #E5E7EB;   /* standard 1px border                  */
    --ks-border-strong:#D1D5DB;   /* stronger border / divider            */

    /* Gradients (135°) for stat banners */
    --ks-grad-primary: linear-gradient(135deg, #4a8f37 0%, #356b28 100%);
    --ks-grad-secondary: linear-gradient(135deg, #6a4fc0 0%, #4E3396 100%);
    --ks-grad-info:    linear-gradient(135deg, #66B0FF 0%, #3498DB 100%);
    --ks-grad-warning: linear-gradient(135deg, #FFB347 0%, #FF8C00 100%);

    /* Radius scale */
    --ks-radius-xs:    4px;
    --ks-radius-sm2:   6px;
    --ks-radius-sm:    8px;    /* buttons, inputs (alias used across this file) */
    --ks-radius-btn:   8px;    /* buttons, inputs            */
    --ks-radius-md:    12px;   /* cards, modals              */
    --ks-radius:       16px;   /* large cards                */

    /* Shadows (design-system scale) */
    --ks-shadow-xs:    0 1px 2px rgba(0,0,0,.05);
    --ks-shadow-sm:    0 1px 3px rgba(0,0,0,.10);
    --ks-shadow:       0 4px 6px rgba(0,0,0,.08);
    --ks-shadow-hover: 0 10px 15px rgba(0,0,0,.10);
    --ks-shadow-modal: 0 20px 25px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.06);
    --ks-shadow-primary: 0 4px 12px rgba(63,122,47,.30);

    /* Spacing (4-pt scale) */
    --ks-sp-xs: 4px;  --ks-sp-sm: 8px;  --ks-sp-md: 16px;
    --ks-sp-lg: 24px; --ks-sp-xl: 32px; --ks-sp-2xl: 48px;

    --ks-ease:         0.2s ease-in-out;
}

/* ---------------------------------------------------------------------------
   1. Typography & page canvas
   ------------------------------------------------------------------------- */
/* Questrial is the single brand typeface, applied site-wide. It is a single
   400-weight face, so "bold" headings render as the browser's synthesized
   bold — intentional, to keep one consistent voice across the UI. */
body,
button, input, select, textarea, optgroup,
.btn, .button, .form-control, .card-title, .popUpTitle,
h1, h2, h3, h4, h5, h6 {
    font-family: 'Questrial', sans-serif !important;
}

body {
    background: var(--ks-bg);
    color: var(--ks-navy);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.card-title, .popUpTitle, .content-header h1 {
    color: var(--ks-navy);
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Section/page heading sitting above content cards */
.content-header h1,
h1.welcomeH1 {
    font-weight: 800;
}

/* ---------------------------------------------------------------------------
   2. Cards — the heart of the "soft elevated" look
   The visible surface is .cardBoxBg (the .card wrapper is transparent by design).
   ------------------------------------------------------------------------- */
.card .cardBoxBg,
.card .cardBoxBg.otherCaradBg,
.cardBoxBg {
    background: var(--ks-surface) !important;
    border: 1px solid var(--ks-border);
    border-radius: var(--ks-radius);
    box-shadow: var(--ks-shadow);
    transition: box-shadow var(--ks-ease), transform var(--ks-ease);
}

/* Generic dashboard / stat tiles and inner panels that opt into the look */
.otherCaradBg,
.cardBoxBg.otherCaradBg {
    border-radius: var(--ks-radius);
}

/* AdminLTE info/stat boxes get the same soft surface */
.info-box,
.small-box {
    border-radius: var(--ks-radius) !important;
    box-shadow: var(--ks-shadow) !important;
    border: 1px solid var(--ks-border);
    transition: box-shadow var(--ks-ease), transform var(--ks-ease);
}
.info-box:hover,
.small-box:hover {
    box-shadow: var(--ks-shadow-hover) !important;
    transform: translateY(-2px);
}

/* ---------------------------------------------------------------------------
   3. Buttons
   .button = primary (green → purple hover). .btn-default = secondary/ghost.
   ------------------------------------------------------------------------- */
/* Only refine shape + interaction. We deliberately DON'T set padding or a
   resting box-shadow here: .button is used both as a solid green CTA *and* as
   borderless text-links (e.g. the Salesforce sync toolbar), and a blanket
   shadow/padding paints phantom boxes on the link-style ones and overrides
   their designed spacing. Each button keeps its own padding from style.css. */
.button,
a.button,
button.button {
    border-radius: var(--ks-radius-sm);
    transition: background-color var(--ks-ease), border-color var(--ks-ease),
                box-shadow var(--ks-ease), transform var(--ks-ease);
}
/* Hover lift applies only to SOLID buttons (those that still have a fill).
   Borderless link-buttons are exempted below so they never gain a box. */
.button:hover,
a.button:hover,
button.button:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(78, 51, 150, 0.26);
}
.button:active {
    transform: translateY(0);
}

/* Buttons intentionally rendered as borderless text-links must never gain a
   border-radius box, shadow, padding bump, or lift — keep them flat & flush. */
.bullhornBtnSlider button.button,
.bullhornBtnSlider button.button:hover,
.bullhornBtnSlider button.button:active,
.bullhornBtnSlider button.button:focus {
    box-shadow: none !important;
    transform: none !important;
    border-radius: 0 !important;
    background: none !important;
}

/* Bootstrap buttons used in modals / secondary actions */
.btn {
    border-radius: var(--ks-radius-sm);
    font-weight: 600;
    transition: all var(--ks-ease);
}
.btn-default {
    background: #ffffff;
    color: #5a6a72;
    border: 1.5px solid var(--ks-border-strong);
}
.btn-default:hover,
.btn-default:focus {
    /* !important needed to beat style.css `.btn-default:hover{color:#fff!important}`,
       which otherwise paints white text on this light hover background (invisible). */
    background: #f5f7f5 !important;
    color: var(--ks-navy-soft) !important;
    border-color: #b8c2c8 !important;
    /* Match the base .btn weight (600) so the label doesn't change width and
       make the button "dance" on hover (style.css forces 400 on hover). */
    font-weight: 600 !important;
}
.btn-primary,
.btn-success {
    background: var(--ks-green);
    border-color: var(--ks-green);
}
.btn-primary:hover,
.btn-success:hover {
    background: var(--ks-purple);
    border-color: var(--ks-purple);
    transform: translateY(-1px);
}

/* Small icon action links inside tables keep their semantic colors but smooth */
.table .iconLink,
.editIcon, .deleteIcon, .sendIcon {
    transition: color var(--ks-ease), transform var(--ks-ease);
}
.table .iconLink:hover {
    transform: translateY(-1px);
}

/* ---------------------------------------------------------------------------
   4. Modals — rounded, soft-shadowed, clean header
   ------------------------------------------------------------------------- */
.modal-content {
    border: none;
    border-radius: var(--ks-radius);
    box-shadow: var(--ks-shadow-modal);
    overflow: hidden;
}
.modal-content .card.card-default {
    border: none;
    box-shadow: none;
    margin-bottom: 0;
    background: transparent;
}
/* Neutral, clean modal header (pages that want a green gradient header scope
   their own higher-specificity rule, e.g. .addDocCredential .card-header). */
.modal-content .card-header,
.modal-header {
    background: #fbfcfd;
    border-bottom: 1px solid var(--ks-border);
    padding: 16px 22px;
}
.modal-content .card-header .popUpTitle,
.modal-title {
    color: var(--ks-navy);
    font-weight: 700;
    font-size: 1.1rem;
    margin: 0;
}
.modal-footer {
    border-top: 1px solid var(--ks-border);
    background: #fafbfc;
    padding: 14px 22px;
    gap: 10px;
}
/* Round, quiet close button */
.modal .close,
.closePopUp {
    transition: opacity var(--ks-ease), background-color var(--ks-ease);
    border-radius: 50%;
}
.modal .close:hover {
    opacity: 1;
}

/* Legacy custom modal (.custom-model-wrap) gets the same soft treatment */
.custom-model-wrap {
    border: none !important;
    border-radius: var(--ks-radius) !important;
    box-shadow: var(--ks-shadow-modal) !important;
}

/* ---------------------------------------------------------------------------
   5. Tables — clean header band, comfortable rows, subtle striping
   ------------------------------------------------------------------------- */
.table thead th {
    background: #f6f8fb;
    color: var(--ks-navy);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    border-top: none !important;
    border-bottom: 1px solid var(--ks-border) !important;
    vertical-align: middle;
}
.table td,
.table th {
    padding: 12px 14px;
    vertical-align: middle;
}
.table tbody tr {
    transition: background-color var(--ks-ease);
}
.table-hover tbody tr:hover {
    background-color: var(--ks-green-tint) !important;
}
/* Keep the existing striping tone, just soften it slightly */
.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(69, 105, 131, 0.05) !important;
}

/* DataTables controls (search box, length select, pagination) */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1.5px solid var(--ks-border-strong);
    border-radius: var(--ks-radius-sm);
    padding: 5px 10px;
    outline: none;
    transition: border-color var(--ks-ease), box-shadow var(--ks-ease);
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--ks-green);
    box-shadow: 0 0 0 3px var(--ks-green-ring);
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 8px !important;
    border: none !important;
    margin: 0 2px;
    transition: all var(--ks-ease);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--ks-green) !important;
    color: #fff !important;
    border: none !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--ks-green-tint) !important;
    color: var(--ks-navy) !important;
}

/* ---------------------------------------------------------------------------
   6. Badges & chips — pill shaped
   ------------------------------------------------------------------------- */
.badge {
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.2px;
    padding: 0.35em 0.7em;
}
/* The notification count bubble on the navbar bell/cart stays a tidy circle */
.navbar-badge {
    border-radius: 999px;
}

/* ---------------------------------------------------------------------------
   7. Forms — conservative polish only.
   The material inputs (transparent .form-group input + .bar) are left intact.
   We refine the non-material controls: .form-control selects, datepickers,
   search fields, and select2 — the bits that already look like real inputs.
   ------------------------------------------------------------------------- */
.form-control,
select.form-control,
input.form-control {
    border: 1.5px solid var(--ks-border-strong);
    border-radius: var(--ks-radius-sm);
    color: var(--ks-navy);
    transition: border-color var(--ks-ease), box-shadow var(--ks-ease),
                background-color var(--ks-ease);
}
.form-control:focus {
    border-color: var(--ks-green);
    box-shadow: 0 0 0 3px var(--ks-green-ring);
}

/* Select2 single dropdowns match the input language */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border: 1.5px solid var(--ks-border-strong) !important;
    border-radius: var(--ks-radius-sm) !important;
    min-height: 38px;
    transition: border-color var(--ks-ease), box-shadow var(--ks-ease);
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--ks-green) !important;
    box-shadow: 0 0 0 3px var(--ks-green-ring);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--ks-green) !important;
}
.select2-dropdown {
    border: 1px solid var(--ks-border-strong);
    border-radius: var(--ks-radius-sm);
    box-shadow: var(--ks-shadow);
    overflow: hidden;
}

/* The material focus underline picks up the brand green instead of bootstrap blue */
.form-group .bar::before,
.form-group .bar::after {
    background: var(--ks-green) !important;
}

/* Datepicker popup — soft card */
.datepicker.dropdown-menu {
    border: 1px solid var(--ks-border-strong);
    border-radius: var(--ks-radius-md);
    box-shadow: var(--ks-shadow);
    padding: 8px;
}
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.today {
    background: var(--ks-green) !important;
    border-radius: 8px;
}
.datepicker table tr td,
.datepicker table tr th {
    border-radius: 8px;
}

/* ---------------------------------------------------------------------------
   8. Chrome — top navbar & sidebar (palette preserved, polish only)
   ------------------------------------------------------------------------- */
.main-header.navbar,
.navbar-white {
    box-shadow: 0 2px 10px rgba(11, 46, 78, 0.08);
}

/* Sidebar nav: full-width rows so the hover/active highlight runs flush to the
   sidebar's right edge (no inset pill — that left an awkward gap). Smooth the
   colour transition only; geometry stays AdminLTE's. */
.nav-sidebar .nav-item > .nav-link {
    border-radius: 0;
    margin-left: 0;
    margin-right: 0;
    transition: background-color var(--ks-ease), color var(--ks-ease);
}
/* Collapsed icon-rail (sidebar not hovered): AdminLTE already centers the icon
   inside the narrow rail via its own padding and clips the label with
   overflow:hidden. Our pill margins (8px) shrink that rail and shove the icon
   off-center, so in the collapsed state we simply drop the side margins and let
   AdminLTE's native centering do its job. (Do NOT use flex/justify-content here:
   the hidden label is still a flow child and flex-centering the icon+label group
   pushes the icon out of the clipped rail, leaving it blank.) */
body.sidebar-collapse .main-sidebar:not(:hover) .sidebar,
body.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
body.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar .nav-item {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
body.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar .nav-item > .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;   /* centre the icon in the rail */
    width: 100%;               /* fill the full rail width so the highlight is flush right */
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    border-radius: 0;          /* flush square edges in the collapsed rail */
    font-size: 0;               /* collapse any bare-text label (icon keeps its own size) */
}
/* Hide every non-icon child (label <p>/<span>, treeview arrow) in the rail so
   only the icon remains and it sits dead-centre. */
body.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar .nav-item > .nav-link > *:not(.nav-icon) {
    display: none !important;
}
body.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar .nav-item > .nav-link > .nav-icon {
    margin: 0 !important;
    float: none !important;
}
/* Treeview children: full-width too (no inset gap on the right) */
.nav-sidebar .nav-treeview > .nav-item > .nav-link {
    border-radius: 0;
    margin-left: 0;
    margin-right: 0;
}
/* The sidebar's custom scroller wraps the nav in .scroller-content with a 9px
   right padding (to clear the scrollbar). That's what inset the active/hover
   highlight from the right edge — remove it for the sidebar only so nav rows run
   flush to the right gradient border (collapsed AND expanded). */
.main-sidebar .scroller-content { padding-right: 0 !important; }

/* User dropdown menu in navbar — soft card */
.navbar-nav .dropdown-menu,
.user-menu .dropdown-menu {
    border: 1px solid var(--ks-border);
    border-radius: var(--ks-radius-md);
    box-shadow: var(--ks-shadow);
    overflow: hidden;
}

/* ---------------------------------------------------------------------------
   9. Alerts & toasts — rounded with a tinted left accent
   ------------------------------------------------------------------------- */
.alert {
    border-radius: var(--ks-radius-md);
    border: 1px solid transparent;
}
.alert-success {
    background: #eef7ea;
    color: #2d5a22;
    border-color: #cfe6c4;
    border-left: 4px solid var(--ks-green);
}
.alert-danger {
    background: #fdecec;
    color: #8a1f1f;
    border-color: #f5c2c2;
    border-left: 4px solid #d9534f;
}
.alert-warning {
    background: #fff6e6;
    color: #8a5a12;
    border-color: #f5dca8;
    border-left: 4px solid #fbaa0e;
}
.alert-info {
    background: #eaf3fb;
    color: #1c4d74;
    border-color: #c5dcef;
    border-left: 4px solid #4dc0b5;
}
.toast {
    border-radius: var(--ks-radius-md);
    box-shadow: var(--ks-shadow-hover);
    overflow: hidden;
}

/* ---------------------------------------------------------------------------
   10. Progress bars
   ------------------------------------------------------------------------- */
.progress {
    border-radius: 999px;
    background: #eef1f5;
    border: none;
    overflow: hidden;
}
.progress-bar {
    background: var(--ks-green);
    border-radius: 999px;
}

/* ---------------------------------------------------------------------------
   11. Scrollbars — thin, subtle, on-brand
   ------------------------------------------------------------------------- */
* {
    scrollbar-width: thin;
    scrollbar-color: #c3cdd6 transparent;
}
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #c3cdd6;
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
    background: #9fb0bd;
    background-clip: content-box;
}

/* ---------------------------------------------------------------------------
   12. Reusable components from the design system (banners, soft badges, pills)
   Use these on any page for a consistent modern look.
   ------------------------------------------------------------------------- */

/* Gradient stat banners (design system §1.3) — full-width summary cards */
.ks-stat-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
}
/* Compact gradient stat strip — about half the previous height, with layered
   translucent "bubble" accents and a hover lift for depth. */
.ks-stat-banner {
    position: relative;
    flex: 1 1 240px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 22px;
    border-radius: 14px;
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
    overflow: hidden;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.ks-stat-banner:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.16);
}
/* Decorative translucent bubbles (clipped by overflow:hidden) */
.ks-stat-banner::before,
.ks-stat-banner::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.ks-stat-banner::before { width: 130px; height: 130px; right: -34px; top: -48px; background: rgba(255, 255, 255, 0.12); }
.ks-stat-banner::after  { width: 86px;  height: 86px;  right: 44px;  bottom: -46px; background: rgba(255, 255, 255, 0.07); }
.ks-stat-banner.is-primary   { background: var(--ks-grad-primary); }
.ks-stat-banner.is-secondary { background: var(--ks-grad-secondary); }
.ks-stat-banner.is-info      { background: var(--ks-grad-info); }
.ks-stat-banner.is-warning   { background: var(--ks-grad-warning); }
.ks-stat-banner > * { position: relative; z-index: 1; }
.ks-stat-banner .ks-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.22);
    font-size: 18px;
    flex-shrink: 0;
}
.ks-stat-banner .ks-stat-value {
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1.05;
    color: #fff;
    letter-spacing: -0.5px;
}
.ks-stat-banner .ks-stat-label {
    font-size: 0.78rem;
    font-weight: 600;
    opacity: 0.92;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Soft pill badges (design system §3.5 soft variants) */
.ks-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}
.ks-pill.is-success { background: var(--ks-success-bg); color: var(--ks-success); }
.ks-pill.is-warning { background: var(--ks-warning-bg); color: #9a6a06; }
.ks-pill.is-danger  { background: var(--ks-danger-bg);  color: var(--ks-danger); }
.ks-pill.is-info    { background: var(--ks-info-bg);    color: var(--ks-info); }
.ks-pill.is-primary { background: var(--ks-primary-50); color: var(--ks-primary-700); }
.ks-pill.is-default { background: var(--ks-bg-tertiary);color: var(--ks-text-2); }

/* ---------------------------------------------------------------------------
   13. Focus visibility for accessibility (keyboard users)
   ------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
.button:focus-visible,
.btn:focus-visible {
    outline: 2px solid var(--ks-green);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   14. Page exceptions
   The Option E subscription cart (.ks-cart-page) is a dark-themed page that
   provides its own card surface; §2's white .cardBoxBg !important would paint
   its light text invisible. Must stay after §2 to win the !important tie.
   ------------------------------------------------------------------------- */
.ks-cart-page .cardBoxBg,
.ks-cart-page .cardBoxBg.otherCaradBg {
    background: transparent !important;
    border: 0;
    box-shadow: none;
}