/**
 * Sejoli Panel — Checkout Skin (polished)
 *
 * Applies the active Sejoli Panel theme to the Sejoli core checkout flow
 * (single product / thank-you / loading / renew / up-sell modal).
 *
 * HOW IT WINS THE CASCADE
 * ----------------------
 * Sejoli's v2/sejoli-checkout.css ships ~114 `!important` rules and 4-class
 * selectors (e.g. `.submit-button.ui.green.button` = 0,0,4,0). To override
 * reliably this skin:
 *   1. Anchors every rule on `body.body-checkout.sejoli-panel-checkout`
 *      (element + 2 classes) and re-states the target's own class chain where
 *      needed (e.g. `.submit-button.ui.button` → 0,0,5,1, beating 0,0,4,0).
 *   2. Uses `!important` ONLY on the handful of properties core itself marks
 *      `!important` (container max-width, CTA backgrounds, radio fill, the
 *      red dashed bump box, grid column widths).
 *
 * The skin is self-contained: it re-declares the base theme tokens because the
 * heavy panel.css is NOT loaded on the checkout page. Custom-brand-color
 * overrides are injected as inline CSS on top by Sejoli_Panel_Checkout.
 *
 * Target body classes (added by Sejoli_Panel_Checkout::filter_body_classes):
 *   body.body-checkout.sejoli-panel.sejoli-panel-checkout
 *        .sejoli-panel--theme-<slug>.sejoli-panel-checkout--<subpage>
 */

/* ======================================================================
   1. DESIGN TOKENS
   ====================================================================== */

/* Defaults = Horizon (light SaaS). Mirrors body.sejoli-panel in panel.css. */
body.sejoli-panel-checkout {
    --sejoli-panel-font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --sejoli-panel-font-size-base: 16px;
    --sejoli-panel-radius-lg: 1rem;
    --sejoli-panel-radius-md: 0.75rem;
    --sejoli-panel-radius-sm: 0.5rem;
    --sejoli-panel-shadow: 0 12px 40px -10px rgba(15, 23, 42, 0.06), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
    --sejoli-panel-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
    --sejoli-panel-bg: #fcfcfd;
    --sejoli-panel-surface: #ffffff;
    --sejoli-panel-surface-strong: #f8fafc;
    --sejoli-panel-border: #e2e8f0;
    --sejoli-panel-border-strong: #cbd5e1;
    --sejoli-panel-text: #0f172a;
    --sejoli-panel-muted: #64748b;
    --sejoli-panel-accent: #2563eb;
    --sejoli-panel-accent-soft: #eff6ff;
    --sejoli-panel-highlight: #2563eb;
    --sejoli-panel-success: #10b981;
    --sejoli-panel-warning: #f59e0b;
    --sejoli-panel-danger: #ef4444;
    --sejoli-panel-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.22);
    --sejoli-panel-input-bg: #ffffff;
    --sejoli-panel-primary: #2563eb;
    --sejoli-panel-primary-text: #ffffff;
    --sejoli-panel-ease: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quint */
}

body.sejoli-panel--theme-horizon {
    --sejoli-panel-accent: #2563eb;
    --sejoli-panel-highlight: #2563eb;
    --sejoli-panel-primary: #2563eb;
    --sejoli-panel-accent-soft: #eff6ff;
    --sejoli-panel-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.22);
}

/* Ember (warm) */
body.sejoli-panel--theme-ember {
    --sejoli-panel-radius-lg: 1.5rem;
    --sejoli-panel-radius-md: 1.25rem;
    --sejoli-panel-radius-sm: 0.875rem;
    --sejoli-panel-shadow: 0 16px 40px -8px rgba(234, 88, 12, 0.08), 0 8px 16px -6px rgba(234, 88, 12, 0.04);
    --sejoli-panel-shadow-sm: 0 1px 2px rgba(124, 45, 18, 0.05);
    --sejoli-panel-bg: #fffbf7;
    --sejoli-panel-surface: #ffffff;
    --sejoli-panel-surface-strong: #fff7ed;
    --sejoli-panel-border: #fed7aa;
    --sejoli-panel-border-strong: #fdba74;
    --sejoli-panel-text: #431407;
    --sejoli-panel-muted: #9a3412;
    --sejoli-panel-accent: #ea580c;
    --sejoli-panel-accent-soft: #ffedd5;
    --sejoli-panel-highlight: #ea580c;
    --sejoli-panel-input-bg: #ffffff;
    --sejoli-panel-primary: #ea580c;
    --sejoli-panel-primary-text: #ffffff;
    --sejoli-panel-focus-ring: 0 0 0 3px rgba(234, 88, 12, 0.22);
}

/* Midnight (dark premium) */
body.sejoli-panel--theme-midnight {
    --sejoli-panel-radius-lg: 0.5rem;
    --sejoli-panel-radius-md: 0.375rem;
    --sejoli-panel-radius-sm: 0.25rem;
    --sejoli-panel-shadow: none;
    --sejoli-panel-shadow-sm: 0 1px 0 rgba(255, 255, 255, 0.03);
    --sejoli-panel-bg: #09090b;
    --sejoli-panel-surface: #121214;
    --sejoli-panel-surface-strong: #18181b;
    --sejoli-panel-border: rgba(255, 255, 255, 0.08);
    --sejoli-panel-border-strong: rgba(255, 255, 255, 0.16);
    --sejoli-panel-text: #fafafa;
    --sejoli-panel-muted: #a1a1aa;
    --sejoli-panel-accent: #fafafa;
    --sejoli-panel-accent-soft: #27272a;
    --sejoli-panel-highlight: #fafafa;
    --sejoli-panel-input-bg: #18181b;
    --sejoli-panel-primary: #fafafa;
    --sejoli-panel-primary-text: #09090b;
    --sejoli-panel-focus-ring: 0 0 0 3px rgba(250, 250, 250, 0.22);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Neo-Brutal (playful, hard edges) */
body.sejoli-panel--theme-neo-brutal {
    --sejoli-panel-radius-lg: 0.5rem;
    --sejoli-panel-radius-md: 0.5rem;
    --sejoli-panel-radius-sm: 0.5rem;
    --sejoli-panel-shadow: 4px 4px 0px 0px #1a1a1a;
    --sejoli-panel-shadow-sm: 2px 2px 0px 0px #1a1a1a;
    --sejoli-panel-bg: #f4f6f8;
    --sejoli-panel-surface: #ffffff;
    --sejoli-panel-surface-strong: #f4f6f8;
    --sejoli-panel-border: #1a1a1a;
    --sejoli-panel-border-strong: #1a1a1a;
    --sejoli-panel-text: #1a1a1a;
    --sejoli-panel-muted: #4b5563;
    --sejoli-panel-accent: #3b82f6;
    --sejoli-panel-accent-soft: rgba(59, 130, 246, 0.12);
    --sejoli-panel-highlight: #3b82f6;
    --sejoli-panel-input-bg: #ffffff;
    --sejoli-panel-primary: #3b82f6;
    --sejoli-panel-primary-text: #ffffff;
    --sejoli-panel-focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.32);
}

/* Vault (enterprise clean) */
body.sejoli-panel--theme-vault {
    --sejoli-panel-radius-lg: 0.5rem;
    --sejoli-panel-radius-md: 0.375rem;
    --sejoli-panel-radius-sm: 0.25rem;
    --sejoli-panel-shadow: 0 4px 24px -6px rgba(15, 23, 42, 0.04), 0 2px 4px -2px rgba(15, 23, 42, 0.02);
    --sejoli-panel-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.03);
    --sejoli-panel-bg: #f8fafc;
    --sejoli-panel-surface: #ffffff;
    --sejoli-panel-surface-strong: #f1f5f9;
    --sejoli-panel-border: #e2e8f0;
    --sejoli-panel-border-strong: #cbd5e1;
    --sejoli-panel-text: #0f172a;
    --sejoli-panel-muted: #64748b;
    --sejoli-panel-accent: #1e3a8a;
    --sejoli-panel-accent-soft: #eff6ff;
    --sejoli-panel-highlight: #1e3a8a;
    --sejoli-panel-input-bg: #ffffff;
    --sejoli-panel-primary: #1e3a8a;
    --sejoli-panel-primary-text: #ffffff;
    --sejoli-panel-focus-ring: 0 0 0 3px rgba(30, 58, 138, 0.22);
}

/* Graphite (zen monochromatic) */
body.sejoli-panel--theme-graphite {
    --sejoli-panel-radius-lg: 0;
    --sejoli-panel-radius-md: 0;
    --sejoli-panel-radius-sm: 0;
    --sejoli-panel-shadow: none;
    --sejoli-panel-shadow-sm: none;
    --sejoli-panel-bg: #f5f5f5;
    --sejoli-panel-surface: #ffffff;
    --sejoli-panel-surface-strong: #fafafa;
    --sejoli-panel-border: #e5e5e5;
    --sejoli-panel-border-strong: #d4d4d4;
    --sejoli-panel-text: #171717;
    --sejoli-panel-muted: #737373;
    --sejoli-panel-accent: #171717;
    --sejoli-panel-accent-soft: #f5f5f5;
    --sejoli-panel-highlight: #171717;
    --sejoli-panel-input-bg: #ffffff;
    --sejoli-panel-primary: #171717;
    --sejoli-panel-primary-text: #ffffff;
    --sejoli-panel-focus-ring: 0 0 0 3px rgba(23, 23, 23, 0.22);
}

/* Back-compat alias: saas-dark -> midnight */
body.sejoli-panel--theme-saas-dark {
    --sejoli-panel-radius-lg: 0.5rem;
    --sejoli-panel-radius-md: 0.375rem;
    --sejoli-panel-radius-sm: 0.25rem;
    --sejoli-panel-shadow: none;
    --sejoli-panel-bg: #09090b;
    --sejoli-panel-surface: #121214;
    --sejoli-panel-surface-strong: #18181b;
    --sejoli-panel-border: rgba(255, 255, 255, 0.08);
    --sejoli-panel-text: #fafafa;
    --sejoli-panel-muted: #a1a1aa;
    --sejoli-panel-accent: #fafafa;
    --sejoli-panel-accent-soft: #27272a;
    --sejoli-panel-highlight: #fafafa;
    --sejoli-panel-input-bg: #18181b;
    --sejoli-panel-primary: #fafafa;
    --sejoli-panel-primary-text: #09090b;
}

/* ======================================================================
   2. PAGE SHELL
   ====================================================================== */
body.body-checkout.sejoli-panel-checkout {
    background: var(--sejoli-panel-bg) !important;
    color: var(--sejoli-panel-text);
    font-family: var(--sejoli-panel-font) !important;
    line-height: 1.55;
    -webkit-text-size-adjust: 100%;
}

body.body-checkout.sejoli-panel-checkout *,
body.body-checkout.sejoli-panel-checkout *::before,
body.body-checkout.sejoli-panel-checkout *::after {
    box-sizing: border-box;
}

body.body-checkout.sejoli-panel-checkout h1,
body.body-checkout.sejoli-panel-checkout h2,
body.body-checkout.sejoli-panel-checkout h3,
body.body-checkout.sejoli-panel-checkout h4 {
    font-family: var(--sejoli-panel-font) !important;
    color: var(--sejoli-panel-text) !important;
    line-height: 1.25;
    letter-spacing: -0.012em;
}

/* Neutralise core's coral links; theme accent wins (load order + specificity). */
body.body-checkout.sejoli-panel-checkout a,
body.body-checkout.sejoli-panel-checkout a:hover {
    color: var(--sejoli-panel-accent);
}

body.body-checkout.sejoli-panel-checkout p {
    color: var(--sejoli-panel-text);
}

/* ======================================================================
   3. LAYOUT — header band + container width override
   ====================================================================== */
body.body-checkout.sejoli-panel-checkout .header-logo {
    padding: 2rem 1rem 1.25rem;
    background: transparent;
    border: 0;
    text-align: center;
}

body.body-checkout.sejoli-panel-checkout .header-logo img {
    max-height: 52px;
    max-width: 220px;
    width: auto;
    height: auto;
    opacity: 1;
    filter: none;
}

/* Widen the narrow 550px core layout to a roomy single column. */
body.body-checkout.sejoli-panel-checkout .ui.text.container {
    font-family: var(--sejoli-panel-font) !important;
    max-width: 720px !important;
    padding: 0 !important;
    line-height: 1.55;
}

/* modern / smart grid layouts: allow more room. */
body.body-checkout.sejoli-panel-checkout .grid-container,
body.body-checkout.sejoli-panel-checkout .grid-container.grid-2,
body.body-checkout.sejoli-panel-checkout .grid-container.grid-3 {
    gap: 1.25rem;
    align-items: start;
}

body.body-checkout.sejoli-panel-checkout .ui.text.container .grid-container {
    max-width: none;
}

/*
 * Grid items default to min-width:auto (= their min-content). At larger font
 * sizes the form content's min-content can exceed the column track and the grid
 * item overflows its column — and the viewport on mobile. Let grid items shrink
 * to the track so the checkout stays responsive across the font-size range.
 * (The smart skin already did this scoped to --design-smart; this makes it
 * apply to every design.)
 */
body.body-checkout.sejoli-panel-checkout .grid-item,
body.body-checkout.sejoli-panel-checkout .metode-pembayaran .data-holder,
body.body-checkout.sejoli-panel-checkout .eight.wide.column,
body.body-checkout.sejoli-panel-checkout .ui.radio.checkbox {
    min-width: 0 !important;
}

/* ======================================================================
   4. SECTION CARDS
   Every checkout block becomes a consistent surfaced card with a soft
   shadow, hairline border, and generous padding.
   ====================================================================== */
body.body-checkout.sejoli-panel-checkout .deskripsi-produk,
body.body-checkout.sejoli-panel-checkout .produk-dibeli,
body.body-checkout.sejoli-panel-checkout .detail-pesanan,
body.body-checkout.sejoli-panel-checkout .kode-diskon,
body.body-checkout.sejoli-panel-checkout .login,
body.body-checkout.sejoli-panel-checkout .informasi-pribadi,
body.body-checkout.sejoli-panel-checkout .metode-pembayaran,
body.body-checkout.sejoli-panel-checkout .bump-produk,
body.body-checkout.sejoli-panel-checkout .g-recaptcha-area {
    background: var(--sejoli-panel-surface) !important;
    color: var(--sejoli-panel-text);
    border: 1px solid var(--sejoli-panel-border) !important;
    border-radius: var(--sejoli-panel-radius-lg) !important;
    padding: 1.25rem !important;
    margin: 0 0 1rem !important;
    box-shadow: var(--sejoli-panel-shadow) !important;
}

body.body-checkout.sejoli-panel-checkout .beli-sekarang {
    background: var(--sejoli-panel-surface) !important;
    color: var(--sejoli-panel-text);
    border: 1px solid var(--sejoli-panel-border) !important;
    border-radius: var(--sejoli-panel-radius-lg) !important;
    padding: 1.25rem !important;
    margin-top: 0.5rem !important;
    box-shadow: var(--sejoli-panel-shadow) !important;
    position: relative;
}

/* Remove core's perforated paper-tear pseudo border (clashes with themes). */
body.body-checkout.sejoli-panel-checkout .beli-sekarang::before {
    content: none !important;
    display: none !important;
}

/* Cards stack with comfortable rhythm. */
body.body-checkout.sejoli-panel-checkout .produk-dibeli,
body.body-checkout.sejoli-panel-checkout .detail-pesanan {
    border-radius: var(--sejoli-panel-radius-lg) !important;
    margin-bottom: 1rem !important;
}

/* Descriptive/intro block sits one tone apart. */
body.body-checkout.sejoli-panel-checkout .deskripsi-produk {
    background: var(--sejoli-panel-surface-strong) !important;
}

body.body-checkout.sejoli-panel-checkout .deskripsi-produk h2 {
    margin: 0 0 0.5rem;    font-weight: 700;
}

/* ======================================================================
   5. SECTION HEADINGS — accent eyebrow bar via ::before (CSS-only)
   ====================================================================== */
body.body-checkout.sejoli-panel-checkout .metode-pembayaran > h3,
body.body-checkout.sejoli-panel-checkout .informasi-pribadi h3,
body.body-checkout.sejoli-panel-checkout .login-form h3,
body.body-checkout.sejoli-panel-checkout .kode-diskon-form h3,
body.body-checkout.sejoli-panel-checkout .bump-produk-title,
body.body-checkout.sejoli-panel-checkout .beli-sekarang h3 {
    position: relative;
    padding-left: 0.75rem;
    margin: 0 0 1rem !important;    font-weight: 700 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sejoli-panel-muted) !important;
}

body.body-checkout.sejoli-panel-checkout .metode-pembayaran > h3::before,
body.body-checkout.sejoli-panel-checkout .informasi-pribadi h3::before,
body.body-checkout.sejoli-panel-checkout .login-form h3::before,
body.body-checkout.sejoli-panel-checkout .kode-diskon-form h3::before,
body.body-checkout.sejoli-panel-checkout .bump-produk-title::before,
body.body-checkout.sejoli-panel-checkout .beli-sekarang h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0.95em;
    border-radius: 2px;
    background: var(--sejoli-panel-accent);
}

/* ======================================================================
   6. ORDER SUMMARY TABLE (.produk-dibeli)
   ====================================================================== */
body.body-checkout.sejoli-panel-checkout .produk-dibeli .ui.table,
body.body-checkout.sejoli-panel-checkout .detail-pesanan .ui.table,
body.body-checkout.sejoli-panel-checkout .produk-dibeli .ui.unstackable.table {
    background: transparent !important;
    color: var(--sejoli-panel-text) !important;
    font-family: var(--sejoli-panel-font) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
}

body.body-checkout.sejoli-panel-checkout .produk-dibeli .ui.table thead th {
    background: transparent !important;
    color: var(--sejoli-panel-accent) !important;
    font-family: var(--sejoli-panel-font) !important;
    font-weight: 700 !important;    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.5rem 0.75rem 0.75rem !important;
    border: 0 !important;
    border-bottom: 1px solid var(--sejoli-panel-border) !important;
    text-align: left !important;
}

body.body-checkout.sejoli-panel-checkout .produk-dibeli .ui.table tbody td,
body.body-checkout.sejoli-panel-checkout .produk-dibeli .ui.table tfoot th {
    background: transparent !important;
    color: var(--sejoli-panel-text) !important;
    font-family: var(--sejoli-panel-font) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--sejoli-panel-border) !important;
    padding: 0.75rem !important;}

body.body-checkout.sejoli-panel-checkout .produk-dibeli .ui.table tbody tr:last-child td,
body.body-checkout.sejoli-panel-checkout .produk-dibeli .ui.table tfoot tr:last-child th {
    border-bottom: 0 !important;
}

/* Right-align the price column. */
body.body-checkout.sejoli-panel-checkout .produk-dibeli .ui.table tr td:last-child,
body.body-checkout.sejoli-panel-checkout .produk-dibeli .ui.table tr th:last-child {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Product row: image + title + price. */
body.body-checkout.sejoli-panel-checkout .produk-dibeli .ui.table tbody td img,
body.body-checkout.sejoli-panel-checkout .produk-dibeli .product-image {
    width: 56px !important;
    height: 56px !important;
    object-fit: cover !important;
    border-radius: var(--sejoli-panel-radius-md) !important;
    margin: 0 !important;
    border: 1px solid var(--sejoli-panel-border);
    background: var(--sejoli-panel-surface-strong);
}

body.body-checkout.sejoli-panel-checkout .produk-dibeli .product-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

body.body-checkout.sejoli-panel-checkout .produk-dibeli tbody h3,
body.body-checkout.sejoli-panel-checkout .produk-dibeli .product-details h3 {
    margin: 0 !important;    font-weight: 700 !important;
    color: var(--sejoli-panel-text) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    padding-left: 0 !important;
    line-height: 1.35;
}

body.body-checkout.sejoli-panel-checkout .produk-dibeli tbody h3::before,
body.body-checkout.sejoli-panel-checkout .produk-dibeli .product-details h3::before {
    content: none !important;
}

body.body-checkout.sejoli-panel-checkout .produk-dibeli tbody td:first-child {
    text-align: left !important;
}

body.body-checkout.sejoli-panel-checkout .produk-dibeli tbody td a.hapus-kupon,
body.body-checkout.sejoli-panel-checkout .produk-dibeli .hapus-kupon {    opacity: 0.8;
}

/* Fee rows (transaction fee, PPN) read as muted. */
body.body-checkout.sejoli-panel-checkout .produk-dibeli .biaya-transaksi td,
body.body-checkout.sejoli-panel-checkout .produk-dibeli .biaya-ppn td {
    color: var(--sejoli-panel-muted) !important;
}

/* ======================================================================
   7. GRAND TOTAL — the hero of the page
   Two .total-holder targets: order-summary table footer + amount-due block.
   ====================================================================== */
body.body-checkout.sejoli-panel-checkout .produk-dibeli tfoot .total-holder {    font-weight: 800 !important;
    color: var(--sejoli-panel-accent) !important;
    letter-spacing: -0.01em;
}

/* Amount-due block inside the CTA section (#sejoli-total-bayar / .total-bayar). */
body.body-checkout.sejoli-panel-checkout .total-bayar,
body.body-checkout.sejoli-panel-checkout #sejoli-total-bayar {
    background: var(--sejoli-panel-accent-soft) !important;
    border: 1px solid var(--sejoli-panel-border) !important;
    border-left: 3px solid var(--sejoli-panel-accent) !important;
    border-radius: var(--sejoli-panel-radius-md) !important;
    padding: 0.85rem 1rem !important;
    margin-bottom: 0.85rem;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 0.15rem !important;
}

body.body-checkout.sejoli-panel-checkout .total-bayar h4,
body.body-checkout.sejoli-panel-checkout .total-bayar h2 {
    margin: 0 0 0.15rem !important;    font-weight: 700 !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sejoli-panel-muted) !important;
}

body.body-checkout.sejoli-panel-checkout .total-bayar .total-holder,
body.body-checkout.sejoli-panel-checkout #sejoli-total-bayar .total-holder {    font-weight: 800 !important;
    line-height: 1.1;
    color: var(--sejoli-panel-accent) !important;
    letter-spacing: -0.02em;
    white-space: nowrap !important;
}

/* Quantity stepper — sit nicely under the total. */
body.body-checkout.sejoli-panel-checkout .produk-dibeli .ui.labeled.input.quantity {
    display: inline-flex;
    align-items: stretch;
    background: var(--sejoli-panel-input-bg);
    border: 1px solid var(--sejoli-panel-border);
    border-radius: var(--sejoli-panel-radius-md);
    overflow: hidden;
    margin-top: 0.5rem;
}

body.body-checkout.sejoli-panel-checkout .produk-dibeli .ui.labeled.input.quantity input {
    border: 0 !important;
    border-radius: 0 !important;
    text-align: center;
    width: 3.25rem;
    min-height: 44px;
    background: transparent !important;
    color: var(--sejoli-panel-text) !important;
}

body.body-checkout.sejoli-panel-checkout .produk-dibeli .button-minus,
body.body-checkout.sejoli-panel-checkout .produk-dibeli .button-plus {
    background: var(--sejoli-panel-surface-strong) !important;
    color: var(--sejoli-panel-text) !important;
    border: 0 !important;
    min-width: 44px;
    min-height: 44px;
    font-weight: 700;    cursor: pointer;
    transition: background 0.15s var(--sejoli-panel-ease), color 0.15s var(--sejoli-panel-ease);
}

body.body-checkout.sejoli-panel-checkout .produk-dibeli .button-minus {
    border-right: 1px solid var(--sejoli-panel-border) !important;
}

body.body-checkout.sejoli-panel-checkout .produk-dibeli .button-plus {
    border-left: 1px solid var(--sejoli-panel-border) !important;
}

body.body-checkout.sejoli-panel-checkout .produk-dibeli .button-minus:hover,
body.body-checkout.sejoli-panel-checkout .produk-dibeli .button-plus:hover,
body.body-checkout.sejoli-panel-checkout .produk-dibeli .button-minus:active,
body.body-checkout.sejoli-panel-checkout .produk-dibeli .button-plus:active {
    background: var(--sejoli-panel-accent) !important;
    color: var(--sejoli-panel-primary-text) !important;
}

/* Inline trust ticks under the total. */
body.body-checkout.sejoli-panel-checkout .produk-dibeli .secure-tagline-icon {
    color: var(--sejoli-panel-success) !important;
    margin-right: 0.75rem;    opacity: 0.9;
}

body.body-checkout.sejoli-panel-checkout .produk-dibeli .secure-tagline-icon .check.icon,
body.body-checkout.sejoli-panel-checkout .produk-dibeli .secure-tagline-icon .check.circle.icon {
    color: var(--sejoli-panel-success) !important;
}

/* ======================================================================
   8. FORM CONTROLS
   ====================================================================== */
body.body-checkout.sejoli-panel-checkout .ui.form .field,
body.body-checkout.sejoli-panel-checkout .ui.form .fields {
    margin-bottom: 0.85rem !important;
}

body.body-checkout.sejoli-panel-checkout .ui.form .field label,
body.body-checkout.sejoli-panel-checkout .ui.form .field > label {
    margin-bottom: 0.35rem !important;
    font-weight: 600 !important;    color: var(--sejoli-panel-text) !important;
}

/* Required asterisk recoloured from harsh red to the theme accent.
   Semantic UI only uses ::after for the required marker; do NOT add ::before
   (it would produce a spurious second asterisk before the label).
   The trailing "*" baked into buyer-data label TEXT by the core template is
   stripped by checkout.js (stripBuyerDataLabelStars) so only this accent-coloured
   ::after shows — consistent with login labels. */
body.body-checkout.sejoli-panel-checkout .ui.form .required.field > label::after,
body.body-checkout.sejoli-panel-checkout .ui.form .required.fields > label::after {
    content: '*' !important;
    color: var(--sejoli-panel-accent) !important;
    margin-left: 0.2em;
}

body.body-checkout.sejoli-panel-checkout .ui.form input:not([type]),
body.body-checkout.sejoli-panel-checkout .ui.form input[type="text"],
body.body-checkout.sejoli-panel-checkout .ui.form input[type="email"],
body.body-checkout.sejoli-panel-checkout .ui.form input[type="password"],
body.body-checkout.sejoli-panel-checkout .ui.form input[type="tel"],
body.body-checkout.sejoli-panel-checkout .ui.form input[type="number"],
body.body-checkout.sejoli-panel-checkout .ui.form input[type="search"],
body.body-checkout.sejoli-panel-checkout .ui.form select,
body.body-checkout.sejoli-panel-checkout .ui.form textarea,
body.body-checkout.sejoli-panel-checkout input[type="text"],
body.body-checkout.sejoli-panel-checkout input[type="email"],
body.body-checkout.sejoli-panel-checkout input[type="password"],
body.body-checkout.sejoli-panel-checkout input[type="tel"],
body.body-checkout.sejoli-panel-checkout input[type="number"],
body.body-checkout.sejoli-panel-checkout input[type="search"],
body.body-checkout.sejoli-panel-checkout select,
body.body-checkout.sejoli-panel-checkout textarea,
body.body-checkout.sejoli-panel-checkout .ui.input > input {
    background: var(--sejoli-panel-input-bg) !important;
    color: var(--sejoli-panel-text) !important;
    border: 1px solid var(--sejoli-panel-border-strong) !important;
    border-radius: var(--sejoli-panel-radius-md) !important;
    font-family: var(--sejoli-panel-font) !important;    padding: 0.7rem 0.85rem !important;
    min-height: 44px;
    transition: border-color 0.18s var(--sejoli-panel-ease), box-shadow 0.18s var(--sejoli-panel-ease), background 0.18s var(--sejoli-panel-ease);
}

/* Semantic `.ui.left.icon.input` puts a ~2.67em icon at the left; the input
   padding above (0.7rem 0.85rem) overrides Semantic's icon-clearing padding-left,
   so the placeholder/type sits under the icon. Restore enough left padding here. */
body.body-checkout.sejoli-panel-checkout .ui.left.icon.input > input,
body.body-checkout.sejoli-panel-checkout .ui.left.icon.input > select,
body.body-checkout.sejoli-panel-checkout .ui.left.icon.input > textarea {
    padding-left: 2.85rem !important;
}

body.body-checkout.sejoli-panel-checkout .ui.input > input::placeholder,
body.body-checkout.sejoli-panel-checkout input::placeholder,
body.body-checkout.sejoli-panel-checkout textarea::placeholder {
    color: var(--sejoli-panel-muted);
    opacity: 0.85;
}

body.body-checkout.sejoli-panel-checkout .ui.input > input:focus,
body.body-checkout.sejoli-panel-checkout input:focus,
body.body-checkout.sejoli-panel-checkout select:focus,
body.body-checkout.sejoli-panel-checkout textarea:focus,
body.body-checkout.sejoli-panel-checkout .ui.form input:focus,
body.body-checkout.sejoli-panel-checkout .ui.form select:focus,
body.body-checkout.sejoli-panel-checkout .ui.form textarea:focus {
    border-color: var(--sejoli-panel-accent) !important;
    box-shadow: var(--sejoli-panel-focus-ring) !important;
    background: var(--sejoli-panel-input-bg) !important;
    color: var(--sejoli-panel-text) !important;
    outline: none;
}

/* Password reveal eye. */
body.body-checkout.sejoli-panel-checkout .informasi-pribadi .eye.icon,
body.body-checkout.sejoli-panel-checkout .login-form .eye.icon,
body.body-checkout.sejoli-panel-checkout #togglePassword,
body.body-checkout.sejoli-panel-checkout #toggleLoginPassword {
    color: var(--sejoli-panel-muted) !important;
    cursor: pointer;
}

/* Informasi pribadi intro line. */
body.body-checkout.sejoli-panel-checkout .informasi-pribadi-info {
    margin-bottom: 0.5rem;
    color: var(--sejoli-panel-muted);}

/* ======================================================================
   9. SELECT2 (city/district pickers on physical checkout)
   ====================================================================== */
body.body-checkout.sejoli-panel-checkout .select2-container--default .select2-selection--single,
body.body-checkout.sejoli-panel-checkout .select2-container--default .select2-selection--multiple {
    background: var(--sejoli-panel-input-bg) !important;
    color: var(--sejoli-panel-text) !important;
    border: 1px solid var(--sejoli-panel-border-strong) !important;
    border-radius: var(--sejoli-panel-radius-md) !important;
    min-height: 44px;
}

body.body-checkout.sejoli-panel-checkout .select2-container--default.select2-container--focus .select2-selection--multiple,
body.body-checkout.sejoli-panel-checkout .select2-container--default .select2-selection--single:focus {
    border-color: var(--sejoli-panel-accent) !important;
    box-shadow: var(--sejoli-panel-focus-ring) !important;
}

body.body-checkout.sejoli-panel-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--sejoli-panel-text) !important;
    line-height: 42px;
}

body.body-checkout.sejoli-panel-checkout .select2-dropdown {
    background: var(--sejoli-panel-surface) !important;
    border: 1px solid var(--sejoli-panel-border) !important;
    color: var(--sejoli-panel-text) !important;
    border-radius: var(--sejoli-panel-radius-md) !important;
}

body.body-checkout.sejoli-panel-checkout .select2-results__option {
    color: var(--sejoli-panel-text) !important;
}

body.body-checkout.sejoli-panel-checkout .select2-results__option--highlighted[aria-selected],
body.body-checkout.sejoli-panel-checkout .select2-results__option--highlighted[aria-selected="true"] {
    background: var(--sejoli-panel-accent) !important;
    color: var(--sejoli-panel-primary-text) !important;
}

/* ======================================================================
   10. BUTTONS — beat core's .submit-button.ui.green.button (0,0,4,0)
   by re-stating the .ui.button chain under our body anchor (0,0,5,1).
   ====================================================================== */
body.body-checkout.sejoli-panel-checkout .ui.button,
body.body-checkout.sejoli-panel-checkout button.ui.button,
body.body-checkout.sejoli-panel-checkout .ui.button.primary,
body.body-checkout.sejoli-panel-checkout .ui.positive.button,
body.body-checkout.sejoli-panel-checkout .submit-button.ui.button,
body.body-checkout.sejoli-panel-checkout .submit-login.ui.button,
body.body-checkout.sejoli-panel-checkout .submit-coupon.ui.button,
body.body-checkout.sejoli-panel-checkout .popup-offer-button.ui.button {
    background: var(--sejoli-panel-primary) !important;
    color: var(--sejoli-panel-primary-text) !important;
    border-radius: var(--sejoli-panel-radius-md) !important;
    font-family: var(--sejoli-panel-font) !important;
    font-weight: 700 !important;
    border: 1px solid var(--sejoli-panel-primary) !important;
    box-shadow: none !important;
    transition: transform 0.15s var(--sejoli-panel-ease), box-shadow 0.18s var(--sejoli-panel-ease), filter 0.15s var(--sejoli-panel-ease), background 0.15s var(--sejoli-panel-ease);
}

body.body-checkout.sejoli-panel-checkout .ui.button:hover,
body.body-checkout.sejoli-panel-checkout button.ui.button:hover,
body.body-checkout.sejoli-panel-checkout .ui.button.primary:hover,
body.body-checkout.sejoli-panel-checkout .ui.positive.button:hover,
body.body-checkout.sejoli-panel-checkout .submit-button.ui.button:hover,
body.body-checkout.sejoli-panel-checkout .submit-login.ui.button:hover,
body.body-checkout.sejoli-panel-checkout .submit-coupon.ui.button:hover,
body.body-checkout.sejoli-panel-checkout .popup-offer-button.ui.button:hover {
    background: var(--sejoli-panel-primary) !important;
    color: var(--sejoli-panel-primary-text) !important;
    filter: brightness(0.93);
    transform: translateY(-1px);
    box-shadow: var(--sejoli-panel-shadow-sm) !important;
}

body.body-checkout.sejoli-panel-checkout .ui.button:active,
body.body-checkout.sejoli-panel-checkout .submit-button.ui.button:active,
body.body-checkout.sejoli-panel-checkout .submit-login.ui.button:active,
body.body-checkout.sejoli-panel-checkout .submit-coupon.ui.button:active {
    transform: translateY(0);
    filter: brightness(0.88);
}

body.body-checkout.sejoli-panel-checkout .ui.button:focus-visible,
body.body-checkout.sejoli-panel-checkout .submit-button.ui.button:focus-visible,
body.body-checkout.sejoli-panel-checkout .submit-login.ui.button:focus-visible {
    outline: none;
    box-shadow: var(--sejoli-panel-focus-ring) !important;
}

/* Basic/secondary buttons keep a ghost look. */
body.body-checkout.sejoli-panel-checkout .ui.basic.button {
    background: transparent !important;
    color: var(--sejoli-panel-accent) !important;
    border: 1px solid var(--sejoli-panel-border-strong) !important;
    box-shadow: none !important;
}

body.body-checkout.sejoli-panel-checkout .ui.basic.button:hover {
    background: var(--sejoli-panel-accent-soft) !important;
    color: var(--sejoli-panel-accent) !important;
    border-color: var(--sejoli-panel-accent) !important;
}

/* Main CTA — full-width, large, tactile. */
body.body-checkout.sejoli-panel-checkout .beli-sekarang .submit-button.ui.button,
body.body-checkout.sejoli-panel-checkout .beli-sekarang .submit-button {
    display: block;
    width: 100% !important;
    padding: 1rem 1.25rem !important;    letter-spacing: 0.01em;
    margin-top: 0.25rem !important;
}

/* CTA processing state (toggled by checkout.js). */
body.body-checkout.sejoli-panel-checkout .beli-sekarang .submit-button.sejoli-panel-checkout--processing {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

body.body-checkout.sejoli-panel-checkout .beli-sekarang .submit-button.sejoli-panel-checkout--processing::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.1rem;
    height: 1.1rem;
    margin: -0.55rem 0 0 -0.55rem;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    color: var(--sejoli-panel-primary-text);
    animation: sejoli-panel-checkout-spin 0.7s linear infinite;
}

body.body-checkout.sejoli-panel-checkout .ui.loading.button,
body.body-checkout.sejoli-panel-checkout .ui.button.loading {
    opacity: 0.85;
}

/* Coupon apply row. */
body.body-checkout.sejoli-panel-checkout .kode-diskon-form .ui.fluid.action.input,
body.body-checkout.sejoli-panel-checkout .kode-diskon .ui.action.input {
    height: auto !important;
    gap: 0.5rem;
}

body.body-checkout.sejoli-panel-checkout .kode-diskon-form .ui.fluid.action.input input,
body.body-checkout.sejoli-panel-checkout .kode-diskon #apply_coupon {
    border-radius: var(--sejoli-panel-radius-md) !important;
    flex: 1 1 auto;
}

body.body-checkout.sejoli-panel-checkout .kode-diskon-form .submit-coupon.ui.button,
body.body-checkout.sejoli-panel-checkout #sejoli-submit-coupon.submit-coupon.ui.button {
    padding: 0.7rem 1.25rem !important;    border-radius: var(--sejoli-panel-radius-md) !important;
}

/* ======================================================================
   11. PAYMENT METHOD TILES + SELECTED STATE
   ====================================================================== */
body.body-checkout.sejoli-panel-checkout .metode-pembayaran .ui.grid,
body.body-checkout.sejoli-panel-checkout .metode-pembayaran .ui.doubling.grid {
    margin: 0 !important;
}

/* Make every payment option a selectable card. */
body.body-checkout.sejoli-panel-checkout .metode-pembayaran .eight.wide.column,
body.body-checkout.sejoli-panel-checkout .metode-pembayaran .ui.grid > .column {
    padding: 0.4rem !important;
}

body.body-checkout.sejoli-panel-checkout .metode-pembayaran .ui.radio.checkbox {
    width: 100% !important;
    height: auto !important;
    min-height: 52px;
    padding: 0.65rem 0.85rem !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center;
    gap: 0.6rem;
    background: var(--sejoli-panel-surface-strong) !important;
    border: 1px solid var(--sejoli-panel-border) !important;
    border-radius: var(--sejoli-panel-radius-md) !important;
    transition: border-color 0.15s var(--sejoli-panel-ease), background 0.15s var(--sejoli-panel-ease), box-shadow 0.15s var(--sejoli-panel-ease);
    cursor: pointer;
}

body.body-checkout.sejoli-panel-checkout .metode-pembayaran .ui.radio.checkbox:hover {
    border-color: var(--sejoli-panel-border-strong) !important;
    background: var(--sejoli-panel-surface) !important;
}

/* SELECTED — both via Semantic .checked class and the native :has(input:checked). */
body.body-checkout.sejoli-panel-checkout .metode-pembayaran .ui.radio.checkbox.checked,
body.body-checkout.sejoli-panel-checkout .metode-pembayaran .ui.radio.checkbox:has(input:checked) {
    border-color: var(--sejoli-panel-accent) !important;
    background: var(--sejoli-panel-accent-soft) !important;
    box-shadow: var(--sejoli-panel-focus-ring);
}

body.body-checkout.sejoli-panel-checkout .metode-pembayaran .ui.radio.checkbox label {
    /* Reserve room for the native 25px radio dot (left:0) plus a small gap so it
       doesn't sit on top of the logo. Modern/compact override padding-left with
       their own !important, so only the base/default/v2/less/smart skins use this. */
    padding: 0 0 0 calc(25px + 0.5rem) !important;
    margin: 0 !important;
    color: var(--sejoli-panel-text) !important;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 1 1 auto;
    /* Core paints this label #f5f5f5 (a gray plate behind each gateway logo); on
       solid-color themes that gray box clashes with the themed tile. Drop it so
       the logo sits directly on the themed tile background. */
    background-color: transparent !important;
}

body.body-checkout.sejoli-panel-checkout .metode-pembayaran .ui.radio.checkbox label img {
    /* Normalise every gateway logo to one uniform box so wildly different
       artwork (tiny PayPal wordmark vs wide BRI/Permata banners) lines up.
       object-fit:contain keeps each logo's aspect ratio, centred in the box.
       Modern/compact override this with their own sizing. */
    height: 24px !important;
    width: 72px !important;
    max-width: 72px !important;
    object-fit: contain !important;
    opacity: 0.92;
}

body.body-checkout.sejoli-panel-checkout .metode-pembayaran .ui.radio.checkbox span,
body.body-checkout.sejoli-panel-checkout .metode-pembayaran .bank-label {
    font-weight: 600;
    color: var(--sejoli-panel-text);
    /*
     * Core clips these labels (white-space:nowrap + overflow:hidden + ellipsis), so
     * longer method names like "Permata Virtual Account" get truncated — especially
     * once the checkout font size is raised. Let them wrap so the full name shows.
     */
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

/* Radio dot recoloured from core green to theme accent. */
body.body-checkout.sejoli-panel-checkout .metode-pembayaran .ui.radio.checkbox .box::before,
body.body-checkout.sejoli-panel-checkout .metode-pembayaran .ui.radio.checkbox label::before,
body.body-checkout.sejoli-panel-checkout .ui.radio.checkbox input:checked ~ .box::before,
body.body-checkout.sejoli-panel-checkout .ui.radio.checkbox input:checked ~ label::before {
    border-color: var(--sejoli-panel-accent) !important;
    background: transparent !important;
}

body.body-checkout.sejoli-panel-checkout .metode-pembayaran .ui.radio.checkbox input:checked ~ .box::after,
body.body-checkout.sejoli-panel-checkout .metode-pembayaran .ui.radio.checkbox input:checked ~ label::after,
body.body-checkout.sejoli-panel-checkout .ui.radio.checkbox input:checked ~ .box:before,
body.body-checkout.sejoli-panel-checkout .ui.radio.checkbox input:checked ~ label:before {
    background-color: var(--sejoli-panel-accent) !important;
    color: var(--sejoli-panel-accent) !important;
}

/* Vertically centre the radio dot on the logo. Core anchors the dot with a
   fixed top + margin so it floats above/below the centred logo in the base
   skin; modern (§23) and compact (§24) already centre their own dots, so this
   only affects default/v2/less/smart. transform is size-independent. */
body.body-checkout.sejoli-panel-checkout .metode-pembayaran .ui.radio.checkbox label::before,
body.body-checkout.sejoli-panel-checkout .metode-pembayaran .ui.radio.checkbox label::after,
body.body-checkout.sejoli-panel-checkout .metode-pembayaran .ui.radio.checkbox .box::before,
body.body-checkout.sejoli-panel-checkout .metode-pembayaran .ui.radio.checkbox .box::after {
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
}

/* ======================================================================
   12. COUPON + LOGIN BLOCKS
   ====================================================================== */
body.body-checkout.sejoli-panel-checkout .kode-diskon-form-toggle,
body.body-checkout.sejoli-panel-checkout .login-form-toggle,
body.body-checkout.sejoli-panel-checkout .login-welcome {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 0 0.75rem !important;
    box-shadow: none !important;
}

body.body-checkout.sejoli-panel-checkout .kode-diskon-form-toggle p,
body.body-checkout.sejoli-panel-checkout .login-form-toggle p {
    margin: 0;    color: var(--sejoli-panel-muted);
}

body.body-checkout.sejoli-panel-checkout .kode-diskon-form-toggle img {
    display: none;
}

body.body-checkout.sejoli-panel-checkout .kode-diskon-form-toggle a,
body.body-checkout.sejoli-panel-checkout .login-form-toggle a {
    font-weight: 700;
    color: var(--sejoli-panel-accent);
    cursor: pointer;
}

body.body-checkout.sejoli-panel-checkout .login-form,
body.body-checkout.sejoli-panel-checkout .kode-diskon-form {
    background: var(--sejoli-panel-surface-strong) !important;
    border: 1px solid var(--sejoli-panel-border) !important;
    border-radius: var(--sejoli-panel-radius-md) !important;
    padding: 1rem !important;
    margin-top: 0.5rem !important;
}

body.body-checkout.sejoli-panel-checkout .login-form .field,
body.body-checkout.sejoli-panel-checkout .kode-diskon-form .field {
    margin-bottom: 0.75rem !important;
}

body.body-checkout.sejoli-panel-checkout .login-welcome .name {
    font-weight: 700;
    color: var(--sejoli-panel-accent);
}

/* Login submit smaller than main CTA. */
body.body-checkout.sejoli-panel-checkout .login-form .submit-login.ui.button {
    width: 100%;
    padding: 0.85rem 1rem !important;}

/* ======================================================================
   13. ORDER BUMP — neutralise core's red dashed box
   ====================================================================== */
body.body-checkout.sejoli-panel-checkout .bump-produk {
    border-left: 3px solid var(--sejoli-panel-accent) !important;
}

body.body-checkout.sejoli-panel-checkout .bump-produk .ui.table,
body.body-checkout.sejoli-panel-checkout .bump-produk table.ui.unstackable.table {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.body-checkout.sejoli-panel-checkout .bump-produk table tr td {
    border: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    display: revert !important;
    padding: 0.6rem 0.75rem !important;
    border-bottom: 1px solid var(--sejoli-panel-border) !important;
}

body.body-checkout.sejoli-panel-checkout .bump-produk table tr:last-child td {
    border-bottom: 0 !important;
}

body.body-checkout.sejoli-panel-checkout .bump-produk .bump-produk-title,
body.body-checkout.sejoli-panel-checkout h3.bump-produk-title {
    color: var(--sejoli-panel-accent) !important;
}

body.body-checkout.sejoli-panel-checkout .bump-produk [id^="bump-total-holder-"],
body.body-checkout.sejoli-panel-checkout .bump-produk [class*="bump-total-holder-"] {
    color: var(--sejoli-panel-accent) !important;
    font-weight: 800;
}

body.body-checkout.sejoli-panel-checkout .bump-produk .ui.radio.checkbox label[for^="bump-product"],
body.body-checkout.sejoli-panel-checkout .bump-produk label[style*="green"] {
    color: var(--sejoli-panel-accent) !important;
    font-weight: 700;
}

body.body-checkout.sejoli-panel-checkout .bump-produk .cancel-add-product-bump {
    color: var(--sejoli-panel-muted);    text-decoration: underline;
}

body.body-checkout.sejoli-panel-checkout .bump-produk td img {
    width: 48px !important;
    height: 48px !important;
    object-fit: cover;
    border-radius: var(--sejoli-panel-radius-sm);
}

/* ======================================================================
   14. ALERTS / MESSAGES
   ====================================================================== */
body.body-checkout.sejoli-panel-checkout .alert-holder,
body.body-checkout.sejoli-panel-checkout .checkout-alert-holder,
body.body-checkout.sejoli-panel-checkout .coupon-alert-holder,
body.body-checkout.sejoli-panel-checkout .login-alert-holder,
body.body-checkout.sejoli-panel-checkout .user-email-alert-holder,
body.body-checkout.sejoli-panel-checkout .user-phone-alert-holder {
    margin-top: 0.6rem;
}

body.body-checkout.sejoli-panel-checkout .ui.message,
body.body-checkout.sejoli-panel-checkout .alert-holder .ui.message {
    border-radius: var(--sejoli-panel-radius-md) !important;
    border: 1px solid var(--sejoli-panel-border) !important;
    background: var(--sejoli-panel-surface-strong) !important;
    color: var(--sejoli-panel-text) !important;
    box-shadow: none !important;
    padding: 0.85rem 1rem !important;
}

body.body-checkout.sejoli-panel-checkout .ui.message .header {
    color: inherit !important;
}

body.body-checkout.sejoli-panel-checkout .ui.message.positive,
body.body-checkout.sejoli-panel-checkout .ui.success.message,
body.body-checkout.sejoli-panel-checkout .ui.positive.message {
    background: var(--sejoli-panel-success) !important;
    color: #ffffff !important;
    border-color: var(--sejoli-panel-success) !important;
}

body.body-checkout.sejoli-panel-checkout .ui.message.negative,
body.body-checkout.sejoli-panel-checkout .ui.error.message,
body.body-checkout.sejoli-panel-checkout .ui.negative.message {
    background: var(--sejoli-panel-danger) !important;
    color: #ffffff !important;
    border-color: var(--sejoli-panel-danger) !important;
}

body.body-checkout.sejoli-panel-checkout .ui.message.warning {
    background: var(--sejoli-panel-warning) !important;
    color: #1a1a1a !important;
    border-color: var(--sejoli-panel-warning) !important;
}

body.body-checkout.sejoli-panel-checkout .ui.message .close.icon {
    color: currentColor;
    opacity: 0.7;
}

/* ======================================================================
   15. AFFILIATE + FOOTER (trust badges)
   ====================================================================== */
body.body-checkout.sejoli-panel-checkout .affiliate-name {
    margin: 1.25rem 0 0 !important;
    text-align: center;
    color: var(--sejoli-panel-muted);}

body.body-checkout.sejoli-panel-checkout .footer-secure {
    background: transparent !important;
    color: var(--sejoli-panel-muted);
    text-align: center;
    padding: 1.5rem 1rem 3rem !important;}

body.body-checkout.sejoli-panel-checkout .footer-secure .secure-tagline-img {
    display: inline-flex;
    align-items: center;
    padding: 0 1rem;
    margin: 0 0 0.5rem;
}

body.body-checkout.sejoli-panel-checkout .footer-secure .secure-tagline-img img {
    width: 20px !important;
    height: 20px !important;
    margin-right: 0.45rem !important;
    vertical-align: middle;
    opacity: 0.9;
}

body.body-checkout.sejoli-panel-checkout .footer-secure a {
    color: var(--sejoli-panel-muted);
}

/* ======================================================================
   16. LOADING SKELETON (.ui.placeholder) — themed shimmer
   ====================================================================== */
body.body-checkout.sejoli-panel-checkout .ui.placeholder,
body.body-checkout.sejoli-panel-checkout .ui.placeholder .image.header,
body.body-checkout.sejoli-panel-checkout .ui.placeholder .line,
body.body-checkout.sejoli-panel-checkout .ui.placeholder .paragraph .line {
    background: var(--sejoli-panel-surface-strong) !important;
}

body.body-checkout.sejoli-panel-checkout .ui.placeholder .image.header::before,
body.body-checkout.sejoli-panel-checkout .ui.placeholder .line::before,
body.body-checkout.sejoli-panel-checkout .ui.placeholder .paragraph::before {
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--sejoli-panel-accent-soft) 50%,
        transparent 100%
    ) !important;
    animation: sejoli-panel-checkout-shimmer 1.6s ease-in-out infinite;
}

/* ======================================================================
   17. UP-SELL MODAL (.order-modal-holder)
   ====================================================================== */
body.body-checkout.sejoli-panel-checkout .order-modal-holder.ui.modal,
body.body-checkout.sejoli-panel-checkout .ui.modal.order-modal-holder {
    background: var(--sejoli-panel-surface) !important;
    color: var(--sejoli-panel-text) !important;
    border-radius: var(--sejoli-panel-radius-lg) !important;
    box-shadow: var(--sejoli-panel-shadow) !important;
    overflow: hidden;
}

body.body-checkout.sejoli-panel-checkout .order-modal-holder .header,
body.body-checkout.sejoli-panel-checkout .product-offer .header {
    background: var(--sejoli-panel-accent) !important;
    color: var(--sejoli-panel-primary-text) !important;
    text-align: center;
    margin: 0 !important;
    padding: 1rem !important;
    border-radius: 0 !important;
}

body.body-checkout.sejoli-panel-checkout .order-modal-holder .content,
body.body-checkout.sejoli-panel-checkout .product-offer .content {
    background: var(--sejoli-panel-surface) !important;
    color: var(--sejoli-panel-text) !important;
}

body.body-checkout.sejoli-panel-checkout .order-modal-holder .product-thumbnail img {
    border-radius: var(--sejoli-panel-radius-md);
    width: 56px;
    height: 56px;
    object-fit: cover;
}

body.body-checkout.sejoli-panel-checkout .order-modal-holder .product-content .price,
body.body-checkout.sejoli-panel-checkout .product-offer .price {
    color: var(--sejoli-panel-accent) !important;
    font-weight: 800;
}

body.body-checkout.sejoli-panel-checkout .order-modal-holder .ui.divided.selection.list > .item,
body.body-checkout.sejoli-panel-checkout .product-offer .ui.divided.list > .item {
    border-top-color: var(--sejoli-panel-border) !important;
}

body.body-checkout.sejoli-panel-checkout .order-modal-holder .close-popup,
body.body-checkout.sejoli-panel-checkout .order-modal-holder .update-order-popup {
    border-radius: var(--sejoli-panel-radius-md) !important;
}

body.body-checkout.sejoli-panel-checkout .order-modal-holder .close-popup {
    background: transparent !important;
    color: var(--sejoli-panel-muted) !important;
    border: 1px solid var(--sejoli-panel-border-strong) !important;
}

body.body-checkout.sejoli-panel-checkout .order-modal-holder .close-popup:hover {
    background: var(--sejoli-panel-surface-strong) !important;
    color: var(--sejoli-panel-text) !important;
}

/* ======================================================================
   18. THANK-YOU + LOADING PAGES
   ====================================================================== */
body.body-checkout.sejoli-panel-checkout--thank-you .ui.icon.message,
body.body-checkout.sejoli-panel-checkout--thank-you .ui.positive.message,
body.body-checkout.sejoli-panel-checkout--thank-you .ui.success.message {
    background: var(--sejoli-panel-success) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: var(--sejoli-panel-radius-lg) !important;
    padding: 1.5rem !important;
}

body.body-checkout.sejoli-panel-checkout--thank-you .ui.icon.message .header,
body.body-checkout.sejoli-panel-checkout--thank-you .ui.icon.message p,
body.body-checkout.sejoli-panel-checkout--thank-you .ui.positive.message .header,
body.body-checkout.sejoli-panel-checkout--thank-you .ui.positive.message p {
    color: #ffffff !important;
}

body.body-checkout.sejoli-panel-checkout--thank-you .flip-clock-wrapper,
body.body-checkout.sejoli-panel-checkout--thank-you .flipclock,
body.body-checkout.sejoli-panel-checkout .flip-clock-wrapper,
body.body-checkout.sejoli-panel-checkout .flipclock {
    margin: 1.5rem auto;
}

body.body-checkout.sejoli-panel-checkout--loading .ui.text.container,
body.body-checkout.sejoli-panel-checkout--loading .ui.container {
    text-align: center;
    padding-top: 3rem;
}

/* ======================================================================
   19. BLOCK-UI OVERLAY (jQuery blockUI injected by sejoli-checkout.js)
   ====================================================================== */
body.body-checkout.sejoli-panel-checkout .sejolisa-block-ui,
body.body-checkout.sejoli-panel-checkout .blockUI {
    background: var(--sejoli-panel-surface) !important;
    color: var(--sejoli-panel-text) !important;
    border-radius: var(--sejoli-panel-radius-md) !important;
}

/* ======================================================================
   20. ENTRANCE ANIMATION (cards fade-up in sequence)
   ====================================================================== */
@keyframes sejoli-panel-checkout-rise {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes sejoli-panel-checkout-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes sejoli-panel-checkout-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

body.body-checkout.sejoli-panel-checkout .ui.text.container > .deskripsi-produk,
body.body-checkout.sejoli-panel-checkout .ui.text.container > .produk-dibeli,
body.body-checkout.sejoli-panel-checkout .ui.text.container > .kode-diskon,
body.body-checkout.sejoli-panel-checkout .ui.text.container > .login,
body.body-checkout.sejoli-panel-checkout .ui.text.container > .informasi-pribadi,
body.body-checkout.sejoli-panel-checkout .ui.text.container > .metode-pembayaran,
body.body-checkout.sejoli-panel-checkout .ui.text.container > .bump-produk,
body.body-checkout.sejoli-panel-checkout .ui.text.container > .beli-sekarang,
body.body-checkout.sejoli-panel-checkout .grid-item > .produk-dibeli,
body.body-checkout.sejoli-panel-checkout .grid-item > .beli-sekarang,
body.body-checkout.sejoli-panel-checkout .grid-item > .kode-diskon,
body.body-checkout.sejoli-panel-checkout .grid-item > .metode-pembayaran,
body.body-checkout.sejoli-panel-checkout .grid-item > .informasi-pribadi,
body.body-checkout.sejoli-panel-checkout .grid-item > .login {
    animation: sejoli-panel-checkout-rise 0.5s var(--sejoli-panel-ease) both;
}

body.body-checkout.sejoli-panel-checkout .ui.text.container > .produk-dibeli,
body.body-checkout.sejoli-panel-checkout .grid-item > .produk-dibeli { animation-delay: 0.04s; }
body.body-checkout.sejoli-panel-checkout .ui.text.container > .kode-diskon,
body.body-checkout.sejoli-panel-checkout .grid-item > .kode-diskon { animation-delay: 0.10s; }
body.body-checkout.sejoli-panel-checkout .ui.text.container > .login,
body.body-checkout.sejoli-panel-checkout .grid-item > .login { animation-delay: 0.16s; }
body.body-checkout.sejoli-panel-checkout .ui.text.container > .informasi-pribadi,
body.body-checkout.sejoli-panel-checkout .grid-item > .informasi-pribadi { animation-delay: 0.22s; }
body.body-checkout.sejoli-panel-checkout .ui.text.container > .metode-pembayaran,
body.body-checkout.sejoli-panel-checkout .grid-item > .metode-pembayaran { animation-delay: 0.28s; }
body.body-checkout.sejoli-panel-checkout .ui.text.container > .bump-produk { animation-delay: 0.34s; }
body.body-checkout.sejoli-panel-checkout .ui.text.container > .beli-sekarang,
body.body-checkout.sejoli-panel-checkout .grid-item > .beli-sekarang { animation-delay: 0.40s; }

@media (prefers-reduced-motion: reduce) {
    body.body-checkout.sejoli-panel-checkout *,
    body.body-checkout.sejoli-panel-checkout *::before,
    body.body-checkout.sejoli-panel-checkout *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* ======================================================================
   21. THEME-SPECIFIC FLOURISHES
   ====================================================================== */

/* Neo-Brutal: hard 2px borders everywhere + offset-shadow lift on interaction. */
body.body-checkout.sejoli-panel--theme-neo-brutal .ui.input > input,
body.body-checkout.sejoli-panel--theme-neo-brutal input,
body.body-checkout.sejoli-panel--theme-neo-brutal select,
body.body-checkout.sejoli-panel--theme-neo-brutal textarea,
body.body-checkout.sejoli-panel--theme-neo-brutal .ui.table,
body.body-checkout.sejoli-panel--theme-neo-brutal .metode-pembayaran .ui.radio.checkbox {
    border-width: 2px !important;
}

body.body-checkout.sejoli-panel--theme-neo-brutal .ui.button:hover,
body.body-checkout.sejoli-panel--theme-neo-brutal .beli-sekarang .submit-button.ui.button:hover,
body.body-checkout.sejoli-panel--theme-neo-brutal .submit-login.ui.button:hover,
body.body-checkout.sejoli-panel--theme-neo-brutal .submit-coupon.ui.button:hover {
    box-shadow: 4px 4px 0 0 var(--sejoli-panel-border-strong) !important;
    transform: translate(-2px, -2px);
    filter: none;
}

body.body-checkout.sejoli-panel--theme-neo-brutal .metode-pembayaran .ui.radio.checkbox.checked,
body.body-checkout.sejoli-panel--theme-neo-brutal .metode-pembayaran .ui.radio.checkbox:has(input:checked) {
    box-shadow: 3px 3px 0 0 var(--sejoli-panel-border-strong);
}

/* Graphite: zero radius + zero shadow everywhere. */
body.body-checkout.sejoli-panel--theme-graphite .ui.table,
body.body-checkout.sejoli-panel--theme-graphite .ui.button,
body.body-checkout.sejoli-panel--theme-graphite .ui.input > input,
body.body-checkout.sejoli-panel--theme-graphite input,
body.body-checkout.sejoli-panel--theme-graphite select,
body.body-checkout.sejoli-panel--theme-graphite .produk-dibeli,
body.body-checkout.sejoli-panel--theme-graphite .detail-pesanan,
body.body-checkout.sejoli-panel--theme-graphite .informasi-pribadi,
body.body-checkout.sejoli-panel--theme-graphite .metode-pembayaran,
body.body-checkout.sejoli-panel--theme-graphite .kode-diskon,
body.body-checkout.sejoli-panel--theme-graphite .login,
body.body-checkout.sejoli-panel--theme-graphite .beli-sekarang,
body.body-checkout.sejoli-panel--theme-graphite .bump-produk,
body.body-checkout.sejoli-panel--theme-graphite .deskripsi-produk,
body.body-checkout.sejoli-panel--theme-graphite .total-bayar,
body.body-checkout.sejoli-panel--theme-graphite .metode-pembayaran .ui.radio.checkbox {
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Dark themes: theme Semantic UI dropdowns, menus, modals, inputs. */
body.body-checkout.sejoli-panel--theme-midnight .ui.menu,
body.body-checkout.sejoli-panel--theme-graphite .ui.menu,
body.body-checkout.sejoli-panel--theme-midnight .ui.selection.dropdown,
body.body-checkout.sejoli-panel--theme-graphite .ui.selection.dropdown {
    background: var(--sejoli-panel-input-bg) !important;
    color: var(--sejoli-panel-text) !important;
    border-color: var(--sejoli-panel-border) !important;
}

body.body-checkout.sejoli-panel--theme-midnight .ui.selection.dropdown .menu,
body.body-checkout.sejoli-panel--theme-graphite .ui.selection.dropdown .menu {
    background: var(--sejoli-panel-surface) !important;
    color: var(--sejoli-panel-text) !important;
    border-color: var(--sejoli-panel-border) !important;
}

body.body-checkout.sejoli-panel--theme-midnight .ui.selection.dropdown .menu .item,
body.body-checkout.sejoli-panel--theme-graphite .ui.selection.dropdown .menu .item {
    color: var(--sejoli-panel-text) !important;
    border-top-color: var(--sejoli-panel-border) !important;
}

body.body-checkout.sejoli-panel--theme-midnight .ui.selection.dropdown .menu .item:hover,
body.body-checkout.sejoli-panel--theme-graphite .ui.selection.dropdown .menu .item:hover,
body.body-checkout.sejoli-panel--theme-midnight .ui.selection.dropdown .menu .item.active.selected,
body.body-checkout.sejoli-panel--theme-graphite .ui.selection.dropdown .menu .item.active.selected {
    background: var(--sejoli-panel-accent-soft) !important;
    color: var(--sejoli-panel-text) !important;
}

body.body-checkout.sejoli-panel--theme-midnight .ui.selection.dropdown > .dropdown.icon,
body.body-checkout.sejoli-panel--theme-graphite .ui.selection.dropdown > .dropdown.icon,
body.body-checkout.sejoli-panel--theme-midnight .footer-secure,
body.body-checkout.sejoli-panel--theme-graphite .footer-secure,
body.body-checkout.sejoli-panel--theme-midnight .affiliate-name,
body.body-checkout.sejoli-panel--theme-graphite .affiliate-name {
    color: var(--sejoli-panel-muted) !important;
}

/* Dark themes: keep logo legible. */
body.body-checkout.sejoli-panel--theme-midnight .header-logo img,
body.body-checkout.sejoli-panel--theme-graphite .header-logo img {
    mix-blend-mode: normal;
}

/* ======================================================================
   22. RESPONSIVE
   ====================================================================== */
@media (max-width: 767px) {
    body.body-checkout.sejoli-panel-checkout .ui.text.container {
        max-width: 100% !important;
        padding: 0 1rem !important;
    }

    body.body-checkout.sejoli-panel-checkout .deskripsi-produk,
    body.body-checkout.sejoli-panel-checkout .produk-dibeli,
    body.body-checkout.sejoli-panel-checkout .detail-pesanan,
    body.body-checkout.sejoli-panel-checkout .informasi-pribadi,
    body.body-checkout.sejoli-panel-checkout .metode-pembayaran,
    body.body-checkout.sejoli-panel-checkout .kode-diskon,
    body.body-checkout.sejoli-panel-checkout .login,
    body.body-checkout.sejoli-panel-checkout .beli-sekarang,
    body.body-checkout.sejoli-panel-checkout .bump-produk,
    body.body-checkout.sejoli-panel-checkout .deskripsi-produk {
        padding: 1rem !important;
        margin-bottom: 0.75rem !important;
    }

    body.body-checkout.sejoli-panel-checkout .header-logo {
        padding: 1.25rem 1rem 0.85rem;
    }

    body.body-checkout.sejoli-panel-checkout .grid-container,
    body.body-checkout.sejoli-panel-checkout .grid-container.grid-2,
    body.body-checkout.sejoli-panel-checkout .grid-container.grid-3 {
        grid-template-columns: 1fr !important;
        gap: 0.75rem;
    }

    body.body-checkout.sejoli-panel-checkout .sticky-sidebar,
    body.body-checkout.sejoli-panel-checkout .floating-side {
        position: static !important;
        width: 100% !important;
    }

    /* Payment tiles: one per row on small phones for tap comfort. */
    body.body-checkout.sejoli-panel-checkout .metode-pembayaran .ui.doubling.grid > .column,
    body.body-checkout.sejoli-panel-checkout .metode-pembayaran .eight.wide.column {
        width: 100% !important;
    }

    body.body-checkout.sejoli-panel-checkout .beli-sekarang .submit-button.ui.button {
        padding: 0.95rem 1rem !important;
    }
}

/* ======================================================================
   23. "MODERN" DESIGN OVERRIDES
   ----------------------------------------------------------------------
   The default skin (sections above) is written for Sejoli's v2/default
   checkout markup. The "modern" checkout design ships a DIFFERENT DOM:

     - Payment container is `.ui.doubling.data-holder` (NOT `.ui.grid`).
     - Each payment option is `.ui.radio.checkbox` whose `<label>` wraps
       ONLY the gateway icon, while the title sits in a sibling `<span>`.
     - The CTA lives in `.floating-side > .beli-sekarang.eight.wide.column`
       and the total sits inside `.produk-dibeli > .beli-sekarang`.

   The generic skin rules above therefore mis-fire on modern: card-in-card
   nesting, the radio dot overlapping the icon, and the title text being
   pushed to the far right. These scoped overrides (emitted only when the
   body carries `sejoli-panel-checkout--design-modern` from
   Sejoli_Panel_Checkout::filter_body_classes()) realign icon, label and
   button WITHOUT touching Sejoli core and WITHOUT affecting v2/other
   designs.
   ====================================================================== */

/* 23.1  Layout shell: give the 2-column modern grid room to breathe,
         and neutralise core's white .grid-container / .grid-item boxes so
         the surfaced section cards (section 4) don't end up boxed twice. */
body.body-checkout.sejoli-panel-checkout--product.sejoli-panel-checkout--design-modern .ui.text.container {
    max-width: 960px !important;
}

body.body-checkout.sejoli-panel-checkout--design-modern .grid-container {
    background: transparent !important;
    padding: 0 !important;
}

body.body-checkout.sejoli-panel-checkout--design-modern .grid-item {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}

/* 23.2  PAYMENT METHODS — flatten the inner holder (kill card-in-card). */
body.body-checkout.sejoli-panel-checkout--design-modern .metode-pembayaran .ui.doubling.data-holder {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

/* Each payment option full-width with a consistent gutter. */
body.body-checkout.sejoli-panel-checkout--design-modern .metode-pembayaran .ui.doubling.data-holder > .eight.wide.column {
    width: 100% !important;
    padding: 0.35rem !important;
}

/* Payment tile: left-aligned, auto height (core forces 56px + space-between). */
body.body-checkout.sejoli-panel-checkout--design-modern .metode-pembayaran .ui.radio.checkbox {
    justify-content: flex-start !important;
    height: auto !important;
    min-height: 52px;
    padding: 0.65rem 0.85rem !important;
    gap: 0.6rem !important;
}

/* The label wraps ONLY the icon (modern). Make room for the radio dot on
   its left and keep it from growing so the title <span> takes the rest. */
body.body-checkout.sejoli-panel-checkout--design-modern .metode-pembayaran .ui.radio.checkbox label {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    padding-left: 1.6rem !important;
    margin: 0 !important;
    position: relative !important;
}

/* Gateway icon: tidy, fixed height. */
body.body-checkout.sejoli-panel-checkout--design-modern .metode-pembayaran .ui.radio.checkbox label img {
    max-height: 26px !important;
    height: 26px !important;
    width: auto !important;
    max-width: 90px !important;
    padding: 0 !important;
    margin: 0 !important;
    object-fit: contain !important;
    opacity: 0.92;
}

/* Radio dot: reset core's oversized 25px + margin-top:14px so it sits
   vertically centred at the far left of the tile instead of overlapping
   the gateway icon. */
body.body-checkout.sejoli-panel-checkout--design-modern .metode-pembayaran .ui.radio.checkbox label:before,
body.body-checkout.sejoli-panel-checkout--design-modern .metode-pembayaran .ui.radio.checkbox label:after {
    width: 16px !important;
    height: 16px !important;
    margin-top: 0 !important;
    top: 50% !important;
    left: 0 !important;
    transform: translateY(-50%) !important;
}

/* Title span: reset core's `flex-basis:70%` + `text-align:right` so the
   payment name sits right after the icon instead of being shoved to the
   far right with a huge gap in the middle. */
body.body-checkout.sejoli-panel-checkout--design-modern .metode-pembayaran .ui.radio.checkbox span,
body.body-checkout.sejoli-panel-checkout--design-modern .metode-pembayaran .bank-label {
    flex: 1 1 auto !important;
    flex-basis: auto !important;
    text-align: left !important;
    padding-left: 0 !important;
    position: static !important;
    top: auto !important;    font-weight: 600;
    color: var(--sejoli-panel-text);
    /* Long gateway names (e.g. "CIMB Niaga Virtual Account") truncate
       cleanly instead of forcing the tile taller; the full label is
       surfaced as a native tooltip by checkout.js. */
    min-width: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Section heading: modern uses <h2>, the skin's eyebrow (section 5) targets
   <h3>. Mirror the accent-bar treatment so headings stay consistent. */
body.body-checkout.sejoli-panel-checkout--design-modern .metode-pembayaran > h2,
body.body-checkout.sejoli-panel-checkout--design-modern .grid-item > h2 {
    position: relative;
    padding-left: 0.75rem;
    margin: 0 0 1rem !important;    font-weight: 700 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sejoli-panel-muted) !important;
}

body.body-checkout.sejoli-panel-checkout--design-modern .metode-pembayaran > h2::before,
body.body-checkout.sejoli-panel-checkout--design-modern .grid-item > h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0.95em;
    border-radius: 2px;
    background: var(--sejoli-panel-accent);
}

/* 23.3  CTA — `.beli-sekarang` is a nested inner block in modern, not its
         own surfaced card. Flatten every instance so it blends into the
         parent order card (total) and the floating-side column (button). */
body.body-checkout.sejoli-panel-checkout--design-modern .beli-sekarang {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Total block sits at the foot of the order card — give it a little air. */
body.body-checkout.sejoli-panel-checkout--design-modern .produk-dibeli .beli-sekarang {
    padding-top: 0.5rem !important;
}

/* CTA wrapper inside .floating-side: small top gap before the button. */
body.body-checkout.sejoli-panel-checkout--design-modern .floating-side > .beli-sekarang {
    padding-top: 0.25rem !important;
}

/* 23.4  CTA button — neutralise Semantic's `right floated` + `.massive`
         (left over on the core button markup) so the button is a clean,
         full-width block that aligns with the order card above it. */
body.body-checkout.sejoli-panel-checkout--design-modern .floating-side > .beli-sekarang .ui.button {
    float: none !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 1rem 1.25rem !important;}

/* 23.5  Responsive — keep modern payment tiles comfortable on phones. */
@media (max-width: 767px) {
    body.body-checkout.sejoli-panel-checkout--design-modern .ui.text.container {
        max-width: 100% !important;
    }

    body.body-checkout.sejoli-panel-checkout--design-modern .metode-pembayaran .ui.doubling.data-holder > .eight.wide.column {
        width: 100% !important;
    }
}

/* ======================================================================
   24. "COMPACT" DESIGN OVERRIDES
   ----------------------------------------------------------------------
   Compact markup differs from both v2 and modern:

     - Payment options live in `.metode-pembayaran .data-holder` rendered as
       a real CSS grid (`grid-template-columns: repeat(2, 1fr)`), 2 columns.
     - Each tile is `.ui.radio.checkbox.metode` whose `<label>` wraps BOTH the
       gateway icon `<img>` AND the title `<span>`.
     - The radio dot is `position:absolute; top:30%; left:10px` (25px) with
       `label { padding-left:40px }` reserving its room.
     - The icon carries `margin: 8px 0 0 0` and the span is `display:block;
       width:100%; margin-top:5px`.

   The generic skin therefore mis-fires on compact: the absolute radio dot
   overlaps the icon, the icon sinks under its `margin-top`, and the span
   fights the flex layout. Everything below is scoped to `--design-compact`
   so other designs are untouched and no Sejoli core file is modified.
   ====================================================================== */

/* 24.1  Layout shell — neutralise core's boxed .grid-container so the
         surfaced section cards aren't wrapped a second time. */
body.body-checkout.sejoli-panel-checkout--product.sejoli-panel-checkout--design-compact .ui.text.container {
    max-width: 920px !important;
}

body.body-checkout.sejoli-panel-checkout--design-compact .grid-container {
    background: transparent !important;
    padding: 0 !important;
}

body.body-checkout.sejoli-panel-checkout--design-compact .grid-item {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}

/* 24.2  PAYMENT METHODS — keep the compact 2-column grid but flatten the
         inner holder so it isn't a card inside the .metode-pembayaran card,
         with a tidy, consistent gutter. */
body.body-checkout.sejoli-panel-checkout--design-compact .metode-pembayaran .data-holder {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
}

body.body-checkout.sejoli-panel-checkout--design-compact .metode-pembayaran .data-holder > .eight.wide.column {
    width: auto !important;
    padding: 0 !important;
}

/* 24.3  Payment tile — consistent box, left-aligned, vertically centred.
         A uniform min-height keeps every tile the same size even when a
         gateway name is long (the name is ellipsised in 24.6). */
body.body-checkout.sejoli-panel-checkout--design-compact .metode-pembayaran .ui.radio.checkbox,
body.body-checkout.sejoli-panel-checkout--design-compact .metode-pembayaran .ui.radio.checkbox.metode {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.6rem !important;
    height: auto !important;
    min-height: 56px;
    padding: 0.65rem 0.85rem !important;
    margin: 0 !important;
}

/* 24.4  Radio dot — re-anchor it cleanly inside the flex model so it never
         overlaps the icon. Core uses absolute top:30%/left:10px sized 25px. */
body.body-checkout.sejoli-panel-checkout--design-compact .metode-pembayaran .ui.radio.checkbox label:before,
body.body-checkout.sejoli-panel-checkout--design-compact .metode-pembayaran .ui.radio.checkbox label:after,
body.body-checkout.sejoli-panel-checkout--design-compact .metode-pembayaran .ui.radio.checkbox .box:before,
body.body-checkout.sejoli-panel-checkout--design-compact .metode-pembayaran .ui.radio.checkbox .box:after {
    width: 16px !important;
    height: 16px !important;
    top: 50% !important;
    left: 0.65rem !important;
    transform: translateY(-50%) !important;
}

/* Label holds both icon + title in compact. Reserve room for the radio dot
   on its left, then lay its children out inline. */
body.body-checkout.sejoli-panel-checkout--design-compact .metode-pembayaran .ui.radio.checkbox label,
body.body-checkout.sejoli-panel-checkout--design-compact .metode-pembayaran .ui.radio.checkbox .box {
    /* dot lives at left:0.65rem and is 16px wide, so its right edge is ~1.79rem.
       A flat 1.75rem under-reserved this at the 14px root (24.5px) and let the
       dot overlap the icon. calc() ties the reservation to the real geometry
       plus a 0.5rem gap so it can't regress if the root font changes again. */
    padding-left: calc(0.65rem + 16px + 0.5rem) !important;
    flex: 1 1 auto !important;
    flex-basis: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
    margin: 0 !important;
    position: relative !important;
}

/* 24.5  Gateway icon — drop core's `margin-top:8px` so the logo is truly
         vertically centred, and normalise its size. */
body.body-checkout.sejoli-panel-checkout--design-compact .metode-pembayaran .ui.radio.checkbox img {
    margin: 0 !important;
    max-width: 70px !important;
    width: auto !important;
    height: auto !important;
    max-height: 28px !important;
    object-fit: contain !important;
    flex: 0 0 auto !important;
}

/* 24.6  Title span — undo core's `display:block; width:100%; margin-top:5px`
         so the title sits inline after the icon. Long names ellipsise
         cleanly (full label revealed via native tooltip from checkout.js). */
body.body-checkout.sejoli-panel-checkout--design-compact .metode-pembayaran .ui.radio.checkbox span,
body.body-checkout.sejoli-panel-checkout--design-compact .metode-pembayaran .bank-label {
    display: block !important;
    width: auto !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin-top: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;    font-weight: 600 !important;
    color: var(--sejoli-panel-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 24.7  Section heading — compact uses <h2>; mirror the eyebrow treatment
         from section 5 so the heading matches the rest of the skin. */
body.body-checkout.sejoli-panel-checkout--design-compact .metode-pembayaran > h2,
body.body-checkout.sejoli-panel-checkout--design-compact .grid-item > h2 {
    position: relative;
    padding-left: 0.75rem;
    margin: 0 0 1rem !important;    font-weight: 700 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sejoli-panel-muted) !important;
}

body.body-checkout.sejoli-panel-checkout--design-compact .metode-pembayaran > h2::before,
body.body-checkout.sejoli-panel-checkout--design-compact .grid-item > h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0.95em;
    border-radius: 2px;
    background: var(--sejoli-panel-accent);
}

/* 24.8  CTA — `.beli-sekarang` is a nested inner block in compact (same as
         modern). Flatten every instance so it blends into its parent, then
         neutralise Semantic's `right floated` + `.massive` so the button is
         a clean, full-width block aligned with the order card above it. */
body.body-checkout.sejoli-panel-checkout--design-compact .beli-sekarang {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.body-checkout.sejoli-panel-checkout--design-compact .produk-dibeli .beli-sekarang {
    padding-top: 0.5rem !important;
}

body.body-checkout.sejoli-panel-checkout--design-compact .floating-side > .beli-sekarang {
    padding-top: 0.25rem !important;
}

body.body-checkout.sejoli-panel-checkout--design-compact .floating-side > .beli-sekarang .ui.button {
    float: none !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 1rem 1.25rem !important;}

/* 24.9  Tablet tier — compact's 2-column grid is content-driven (~785px min),
   so between the 767px phone breakpoint and the 920px container the right-hand
   order sidebar gets crushed to ~174px and the page overflows horizontally.
   Collapse to one column here so the order summary + CTA stay full-width and
   readable on tablets/narrow laptops. Modern uses equal 1fr 1fr tracks and
   already shrinks cleanly, so it is left untouched. */
@media (max-width: 920px) {
    body.body-checkout.sejoli-panel-checkout--design-compact .grid-container {
        grid-template-columns: 1fr !important;
    }

    body.body-checkout.sejoli-panel-checkout--design-compact .grid-container .sticky-sidebar,
    body.body-checkout.sejoli-panel-checkout--design-compact .grid-container .floating-side {
        position: static !important;
        width: 100% !important;
    }
}

/* 24.10  Responsive — one column of tiles on phones for tap comfort. */
@media (max-width: 767px) {
    body.body-checkout.sejoli-panel-checkout--design-compact .ui.text.container {
        max-width: 100% !important;
    }

    body.body-checkout.sejoli-panel-checkout--design-compact .metode-pembayaran .data-holder {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
    }
}

/* ======================================================================
   25. "LESS" DESIGN OVERRIDES
   ----------------------------------------------------------------------
   The `less` ("Less is More") markup shares the base v2 DOM but, like modern
   and compact, ships a different shell: core's less/sejoli-checkout.css paints
   `.grid-container`/`.grid-item` a hard #ffffff, the CTA button keeps Semantic's
   `.right.floated.massive`, the detail/metode toggles are pale-green, and the
   sejoli-social-login Google button is inline-styled white. The base skin
   (§§1-22) never neutralises these (only §23/§24 do, for their designs), so on
   `--design-less` the order sidebar renders as a white slab with a misaligned,
   right-floated buy button. Everything below is scoped to `--design-less` so
   the other designs are untouched and no Sejoli core file is modified.
   ====================================================================== */

/* 25.1  Layout shell — flatten core's white .grid-container/.grid-item so the
         surfaced section cards float instead of sitting in a white box. */
body.body-checkout.sejoli-panel-checkout--design-less .grid-container {
    background: transparent !important;
    padding: 0 !important;
}

body.body-checkout.sejoli-panel-checkout--design-less .grid-item,
body.body-checkout.sejoli-panel-checkout--design-less .sticky-sidebar,
body.body-checkout.sejoli-panel-checkout--design-less .floating-side {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}

/* 25.2  CTA — `.beli-sekarang` inside `.floating-side` is the buy-button
         wrapper (distinct from the .produk-dibeli total block). Flatten it so
         it isn't a card-inside-a-card, then neutralise Semantic's
         `.right.floated.massive` so the button is full-width, flush with the
         order card above it. */
body.body-checkout.sejoli-panel-checkout--design-less .floating-side > .beli-sekarang {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.body-checkout.sejoli-panel-checkout--design-less .floating-side > .beli-sekarang .ui.button {
    float: none !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 1rem 1.25rem !important;}

/* 25.2b  TOTAL wrapper — `.produk-dibeli > .beli-sekarang` is a §4 surfaced card
         that wraps the `.total-bayar` amount box (also a bordered card), producing
         a double/nested border. Flatten this wrapper so only the `.total-bayar`
         box shows. (Distinct from `.floating-side > .beli-sekarang` = the CTA.) */
body.body-checkout.sejoli-panel-checkout--design-less .produk-dibeli > .beli-sekarang {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0.75rem 0 0.5rem !important;
}

/* 25.3  Detail/metode toggles — recolour core's pale-green #e6f0eb to theme
         tokens so they match the rest of the skin. */
body.body-checkout.sejoli-panel-checkout--design-less .toggle-pesanan,
body.body-checkout.sejoli-panel-checkout--design-less .toggle-metode {
    background: var(--sejoli-panel-surface-strong) !important;
    border: 1px solid var(--sejoli-panel-border) !important;
    color: var(--sejoli-panel-muted) !important;
    border-radius: var(--sejoli-panel-radius-md) !important;
    font-weight: 600 !important;
}

/* 25.4  Google social-login button — sejoli-social-login injects it with an
         inline style="background:#fff;..." (no !important). The ID selector
         plus !important out-specifies the inline style and re-themes it. */
body.body-checkout.sejoli-panel-checkout--design-less #sejoli-checkout-social-main .sejoli-social-btn.google {
    background: var(--sejoli-panel-surface-strong) !important;
    border: 1px solid var(--sejoli-panel-border) !important;
    color: var(--sejoli-panel-text) !important;
    box-shadow: none !important;
    border-radius: var(--sejoli-panel-radius-md) !important;
}

body.body-checkout.sejoli-panel-checkout--design-less .sejoli-social-divider {
    color: var(--sejoli-panel-muted) !important;
}

/* Theme only the two 1px divider LINES (first/last span) — NOT the middle
   "atau" text span, which must keep no background so the text stays legible. */
body.body-checkout.sejoli-panel-checkout--design-less .sejoli-social-divider > span:first-child,
body.body-checkout.sejoli-panel-checkout--design-less .sejoli-social-divider > span:last-child {
    background: var(--sejoli-panel-border) !important;
}

/* 25.5  Responsive — core pins `.floating-side.fixed` to a 413px box on scroll;
         the base skin only releases it at ≤767px, so collapse it through the
         tablet band too. */
@media (max-width: 992px) {
    body.body-checkout.sejoli-panel-checkout--design-less .floating-side,
    body.body-checkout.sejoli-panel-checkout--design-less .floating-side.fixed {
        position: static !important;
        width: 100% !important;
    }
}

/* 25.6  Payment tiles — core (less/sejoli-checkout.css:734) makes
         `.metode-pembayaran .data-holder` a `repeat(2,1fr)` grid. The less card
         lives in a narrow sidebar column, so 2-per-row tiles (~140px) are too
         cramped for radio + logo + label — the label text overflows the tile (and
         the card), on desktop as well as phones. Force one-per-row at every width
         so each tile has room. Mirrors compact §24.9. */
body.body-checkout.sejoli-panel-checkout--design-less .metode-pembayaran .data-holder {
    grid-template-columns: 1fr !important;
}

/* ======================================================================
   26. "VERSI 2" (version-2) DESIGN — MOBILE CTA / TOTAL STACK
   ----------------------------------------------------------------------
   v2 puts the buy button inside `.beli-sekarang > .ui.stackable.grid >
   .eight.wide.column`. That grid does NOT stack on phones here, so the
   TOTAL column and the button column sit cramped side-by-side (each ~50%),
   and the button (`.right.floated.massive`) renders as a narrow right-floated
   button. Mobile-only fix: stack the grid and make the button full-width.
   Desktop (≥768px) keeps its 2-col layout. Scoped to --design-version-2.
   ====================================================================== */
@media (max-width: 767px) {
    body.body-checkout.sejoli-panel-checkout--design-version-2 .beli-sekarang .ui.stackable.grid {
        flex-direction: column !important;
    }

    body.body-checkout.sejoli-panel-checkout--design-version-2 .beli-sekarang .ui.stackable.grid > .column,
    body.body-checkout.sejoli-panel-checkout--design-version-2 .beli-sekarang .eight.wide.column {
        width: 100% !important;
    }

    body.body-checkout.sejoli-panel-checkout--design-version-2 .beli-sekarang .submit-button.ui.button {
        float: none !important;
        width: 100% !important;
        margin: 0.5rem 0 0 !important;
    }
}

/* ======================================================================
   27. "SMART" DESIGN — RESPONSIVE GRID + PAYMENT + TRANSPARENT SHELL
   ----------------------------------------------------------------------
   The smart template (sejoli/template/checkout/smart/checkout.php:44)
   renders `<div class="grid-container">` with NO `.grid-N` modifier, so
   core never sets grid-template-columns → one implicit auto column sized
   to the items' max-content (~1029px) overflows the 720px container at
   every width. Core also paints .grid-container/.grid-item/.sticky-sidebar
   a hard #ffffff. The payment .data-holder is repeat(~6) → far too wide.
   Scoped to --design-smart so other designs are untouched.
   ====================================================================== */

/* 27.1  Grid shell — one responsive column (fits container), transparent,
         min-width:0 so wide inner content can't force the track to overflow. */
body.body-checkout.sejoli-panel-checkout--design-smart .grid-container {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    background: transparent !important;
    padding: 0 !important;
}

body.body-checkout.sejoli-panel-checkout--design-smart .grid-item {
    min-width: 0 !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}

body.body-checkout.sejoli-panel-checkout--design-smart .sticky-sidebar,
body.body-checkout.sejoli-panel-checkout--design-smart .floating-side {
    background: transparent !important;
}

/* 27.1c  Vertical rhythm — `.floating-side` (the TOTAL + button CTA) is a
         sibling placed AFTER `.grid-container` under `.ui.text.container`.
         With no margin it glues straight onto the payment card above it (the
         "kurang jarak / tidak rapi" report) — its top even overlaps the grid's
         trailing margin by ~14px. Give it clear breathing room so the pink
         TOTAL box visibly separates from the payment section. */
body.body-checkout.sejoli-panel-checkout--design-smart .floating-side {
    margin-top: 1.5rem !important;
}

/* 27.1b  CTA wrapper — `.floating-side > .beli-sekarang` is a §4 card that
         wraps the `.total-bayar` box (also a card) → double/nested border,
         and the button carries a stray right margin. Flatten the wrapper and
         make the button full-width (mirrors less §25.2b / v2 §26). */
body.body-checkout.sejoli-panel-checkout--design-smart .floating-side > .beli-sekarang {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 0.5rem !important;
}

body.body-checkout.sejoli-panel-checkout--design-smart .floating-side > .beli-sekarang .ui.button {
    float: none !important;
    display: block !important;
    width: 100% !important;
    margin: 0.5rem 0 0 !important;
}

/* ======================================================================
   28. FONT-SCALE PIN — match the default-Sejoli reference (14px / 18px)
   ----------------------------------------------------------------------
   The skin no longer overrides font sizes (core applies), but core's per-design
   CSS plus the browser default (inputs render at 16px) drift a few elements
   1-2px off the reference (akses.midteknologi.com — plain Sejoli, smart design:
   14px body/labels, 18px headings/total/button). Pin the flat reference scale so
   every design + theme reads identically. Social-login/social-proof elements are
   intentionally not pinned (they keep their own core sizes).
   ====================================================================== */
body.body-checkout.sejoli-panel-checkout p,
body.body-checkout.sejoli-panel-checkout td,
body.body-checkout.sejoli-panel-checkout th,
body.body-checkout.sejoli-panel-checkout h3,
body.body-checkout.sejoli-panel-checkout label,
body.body-checkout.sejoli-panel-checkout input,
body.body-checkout.sejoli-panel-checkout select,
body.body-checkout.sejoli-panel-checkout textarea,
body.body-checkout.sejoli-panel-checkout .metode-pembayaran .ui.radio.checkbox span,
body.body-checkout.sejoli-panel-checkout .metode-pembayaran .bank-label,
body.body-checkout.sejoli-panel-checkout .secure-tagline-icon,
body.body-checkout.sejoli-panel-checkout .produk-dibeli .total-holder,
body.body-checkout.sejoli-panel-checkout .total-bayar h4,
body.body-checkout.sejoli-panel-checkout .total-bayar h2 {
    font-size: var(--sejoli-panel-checkout-font-size, 14px) !important;
}

body.body-checkout.sejoli-panel-checkout h2,
body.body-checkout.sejoli-panel-checkout .total-bayar .total-holder,
body.body-checkout.sejoli-panel-checkout #sejoli-total-bayar .total-holder {
    font-size: calc(var(--sejoli-panel-checkout-font-size, 14px) * 18 / 14) !important;
}

/* CTA button: 18px reads too large for a full-width button (user feedback) — use
   15px (one step above the 14px body) so it stays a clear action without shouting.
   Scales with the checkout font-size setting. */
body.body-checkout.sejoli-panel-checkout .submit-button {
    font-size: calc(var(--sejoli-panel-checkout-font-size, 14px) * 15 / 14) !important;
}

/* ======================================================================
   29. ORDER-SUMMARY TFOOT — collapse the hidden qty-input row
   ----------------------------------------------------------------------
   The produk-dibeli tfoot contains the qty as <input type="hidden"> inside its
   own <tr>. Although hidden, the cell still renders one blank line (the body
   line-height ~21px), opening an unintentional gap between the "Total" row and
   the trust badges and throwing off the card's vertical rhythm. Collapse that
   row to zero height (the input stays in the DOM and is still submitted).
   ====================================================================== */
body.body-checkout.sejoli-panel-checkout .produk-dibeli tfoot tr:has(input[type="hidden"].qty) th {
    line-height: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

/* Constrain the order-summary table to its card on every viewport. The table is
   display:table with table-layout:auto, so width alone can't stop it growing to
   its content width — it spills past the card's right edge in narrow contexts
   (mobile on version-2/default; the less sidebar column on desktop too).
   table-layout:fixed pinned to the card width forces columns to share it and
   content to wrap. */
body.body-checkout.sejoli-panel-checkout .produk-dibeli table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
}
body.body-checkout.sejoli-panel-checkout .produk-dibeli table td,
body.body-checkout.sejoli-panel-checkout .produk-dibeli table th {
    word-break: break-word;
}

/* Trust-badge row: the th is white-space:nowrap (table default), so the two
   inline-block badges ("Secure 100%" + "Money Back Guarantee") can't wrap and
   the second can spill past the card in narrow contexts. Let that row wrap. */
body.body-checkout.sejoli-panel-checkout .produk-dibeli tfoot th:has(.secure-tagline-icon) {
    white-space: normal !important;
}

/* 27.2  Payment tiles — core lays them out ~6-per-row (overflowing). Use a
         tidy 2-per-row on >=tablet and 1-per-row on phones. */
body.body-checkout.sejoli-panel-checkout--design-smart .metode-pembayaran .data-holder {
    grid-template-columns: repeat(2, 1fr) !important;
}

@media (max-width: 767px) {
    body.body-checkout.sejoli-panel-checkout--design-smart .metode-pembayaran .data-holder {
        grid-template-columns: 1fr !important;
    }
}