@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap');

:root {
    /* Brand */
    --v3-primary:        #e6710f;
    --v3-primary-dark:   #cc6009;
    --v3-primary-light:  #fff3e8;
    --v3-primary-ring:   rgba(230, 112, 14, .14);

    /* Text */
    --v3-text:           #1a1a1a;
    --v3-text-muted:     #9a9a9a;
    --v3-text-sub:       #555;

    /* Surfaces */
    --v3-bg-page:        #f2f5f7;
    --v3-bg-card:        #ffffff;
    --v3-bg-input:       #ffffff;
    --v3-bg-input-ro:    #f5f7fa;

    /* Borders */
    --v3-border:         #e0e0e0;
    --v3-border-focus:   #e6710f;

    /* Radius */
    --v3-radius-sm:      8px;
    --v3-radius:         10px;
    --v3-radius-lg:      14px;
    --v3-radius-pill:    50px;

    /* Shadows */
    --v3-shadow-card:    0 4px 32px rgba(0, 0, 0, .08);
    --v3-shadow-popup:   0 20px 60px rgba(0, 0, 0, .18);

    /* Typography */
    --v3-font:           "Source Sans Pro", sans-serif;

    /* Spacing */
    --v3-pad-x:          20px;
}

body { background-color: var(--v3-bg-page) !important;  font-family: "Source Sans Pro", sans-serif; cursor: pointer; }

.v3-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border: 1.5px solid transparent;
    border-radius: var(--v3-radius);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: background .15s, color .15s, border-color .15s;
    font-family: var(--v3-font);
    box-sizing: border-box;
    white-space: nowrap;
    -webkit-appearance: none;
    appearance: none;
}

.v3-btn:hover { text-decoration: none; }

.v3-btn:disabled,
.v3-btn[disabled] {
    background: #d4d4d4 !important;
    color: #888 !important;
    border-color: #d4d4d4 !important;
    cursor: not-allowed;
    pointer-events: none;
}

/* Variant: primary (orange filled) */
.v3-btn--primary {
    background: var(--v3-primary);
    color: #fff;
    border-color: var(--v3-primary);
}

.v3-btn--primary:hover:not(:disabled):not([disabled]) {
    background: var(--v3-primary-dark);
    border-color: var(--v3-primary-dark);
    color: #fff;
}

/* Variant: outline (transparent + orange border) */
.v3-btn--outline {
    background: transparent;
    color: var(--v3-primary);
    border-color: var(--v3-primary);
}

.v3-btn--outline:hover:not(:disabled):not([disabled]) {
    background: var(--v3-primary-light);
    color: var(--v3-primary);
}

.frame-secure {
    width: 100%;
}
/* Variant: ghost (white + gray border — cancel buttons) */
.v3-btn--ghost {
    background: #fff;
    color: #484848;
    border-color: var(--v3-border);
}

.close-pin {
    cursor: pointer;
    padding: 5px 7px;
    border: 1.5px solid var(--v3-border);
    border-radius: var(--v3-radius-sm);
    color: var(--v3-text-sub);
    transition: background 0.15s, border-color 0.15s;
}
.close-pin:hover {
    background: var(--v3-bg-input-ro);
    border-color: #bbb;
}

.v3-btn--ghost:hover:not(:disabled):not([disabled]) {
    background: #f5f5f5;
    color: #484848;
}

/* Size: small */
.v3-btn--sm {
    padding: 6px 16px;
    font-size: 13px;
}

.v3-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
    cursor: pointer;
    vertical-align: middle;
}
.v3-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.v3-toggle-track {
    position: absolute;
    inset: 0;
    background: #D1D5DB;
    border-radius: 999px;
    transition: background .18s;
}
.v3-toggle input:checked + .v3-toggle-track { background: var(--v3-primary, #e6710f); }
.v3-toggle-track::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
    transition: transform .18s;
}
.v3-toggle input:checked + .v3-toggle-track::after { transform: translateX(20px); }

/* Size: large */
.v3-btn--lg {
    padding: 13px 24px;
    font-size: 16px;
    font-weight: 700;
}

/* Shape: pill */
.v3-btn--pill { border-radius: var(--v3-radius-pill); }

/* Shape: block (full width) */
.v3-btn--block {
    display: block;
    width: 100%;
}

.v3-form-group {
    padding: 0 var(--v3-pad-x);
    margin-bottom: 14px;
}

.v3-form-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #3d3d3d;
    margin-bottom: 7px;
}

.v3-form-control {
    display: block;
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--v3-border);
    border-radius: var(--v3-radius);
    font-size: 15px;
    color: var(--v3-text);
    background: var(--v3-bg-input);
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
    font-family: var(--v3-font);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.v3-form-control:hover { border-color: var(--v3-primary); }

.v3-form-control:focus {
    border-color: var(--v3-border-focus);
    box-shadow: 0 0 0 3px var(--v3-primary-ring);
}

/* Modifier: read-only / display value */
.v3-form-control--ro {
    background: var(--v3-bg-input-ro);
    color: var(--v3-text-sub);
    cursor: default;
}

/* Modifier: code input (voucher, OTP — centered mono) */
.v3-form-control--code {
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 3px;
    padding: 12px 6px;
}

/* Form hint row (helper text + link) */
.v3-form-hint {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px var(--v3-pad-x) 0;
    margin-bottom: 18px;
}

.v3-form-hint__left,
.v3-hint-left {
    font-size: 12px;
    color: var(--v3-text-muted);
}

.v3-form-hint__right a,
.v3-hint-right a {
    color: var(--v3-primary);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}

.v3-form-hint__right a:hover,
.v3-hint-right a:hover {
    text-decoration: underline;
    color: var(--v3-primary-dark);
}

/* Email preview row (step 2: read-only email display) */
.v3-preview-email {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 14px;
    background: var(--v3-bg-input-ro);
    border: 1.5px solid var(--v3-border);
    border-radius: var(--v3-radius);
    margin-bottom: 0;
}

.v3-email-value {
    font-size: 14px;
    color: var(--v3-text);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.v3-email-change {
    color: var(--v3-primary);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: 10px;
}

.v3-email-change:hover {
    text-decoration: underline;
    color: var(--v3-primary-dark);
}

/* Form actions wrapper (submit button row) */
.v3-form-actions {
    padding: 6px var(--v3-pad-x) 0;
    margin-bottom: 0;
}

.v3-alert {
    padding: 10px 14px;
    border-radius: var(--v3-radius-sm);
    font-size: 14px;
    text-align: center;
    margin-bottom: 0;
}

.v3-alert--error {
    background: #fff0f0;
    color: #c0392b;
    border: 1px solid #f5c6cb;
}

.v3-alert--info {
    background: #e8f4fd;
    color: #1a6896;
    border: 1px solid #b8daff;
}

.v3-alert--success {
    background: #f0faf0;
    color: #1e7e34;
    border: 1px solid #c3e6cb;
}

.v3-alert--warning {
    background: #fffae6;
    color: #856404;
    border: 1px solid #ffeeba;
}

.v3-card {
    background: var(--v3-bg-card);
    border: 1px solid var(--v3-border);
    border-radius: var(--v3-radius);
    padding: 14px;
    box-sizing: border-box;
}

.v3-card--shadow {
    border: none;
    box-shadow: var(--v3-shadow-card);
}

/* Media card: horizontal thumb + body layout */
.v3-card--media {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.v3-card__thumb {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--v3-radius-sm);
    flex-shrink: 0;
}

.v3-card__body {
    flex: 1;
    min-width: 0;
}

.v3-card__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--v3-text);
    margin: 0 0 4px;
    line-height: 1.4;
}

.v3-card__title a {
    color: var(--v3-text);
    text-decoration: none;
}

.v3-card__title a:hover {
    color: var(--v3-primary);
    text-decoration: underline;
}

.v3-card__meta {
    font-size: 12px;
    color: var(--v3-text-muted);
    margin: 0 0 4px;
    line-height: 1.5;
}

.v3-card__price {
    font-size: 13px;
    font-weight: 700;
    color: var(--v3-primary);
    margin: 0;
}


.v3-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 19999;
}

.v3-dialog-wrap {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 20000;
    padding: 16px;
    box-sizing: border-box;
}

.v3-dialog {
    position: relative;
    background: var(--v3-bg-card);
    border-radius: var(--v3-radius-lg);
    padding: 28px 24px 24px;
    width: 100%;
    max-width: 400px;
    text-align: center;
    box-shadow: var(--v3-shadow-popup);
    box-sizing: border-box;
}

.v3-dialog__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--v3-text);
    margin: 8px 0 10px;
}

.v3-dialog__sub {
    font-size: 14px;
    color: var(--v3-text-sub);
    margin-bottom: 4px;
}

.v3-dialog__value {
    font-size: 15px;
    font-weight: 700;
    color: var(--v3-text);
}

.v3-dialog__footer {
    display: flex;
    gap: 10px;
    margin-top: 22px;
}

.v3-dialog__footer .v3-btn { flex: 1; }

.v3-divider {
    display: flex;
    align-items: center;
    padding: 20px var(--v3-pad-x);
    gap: 10px;
}

.v3-divider__line {
    flex: 1;
    height: 1px;
    background: #e3e8ef;
    display: block;
}

.v3-divider__text {
    font-size: 12px;
    color: var(--v3-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}
.v3-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.v3-stack--sm { gap: 8px; }
.v3-stack--lg { gap: 20px; }

.v3-list-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: var(--v3-text);
}

.v3-list-item--icon > i,
.v3-list-item--icon > svg {
    color: var(--v3-primary);
    margin-top: 2px;
    flex-shrink: 0;
}

.v3-empty-state {
    text-align: center;
    padding: 24px 16px;
}

.v3-empty-state__title {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--v3-text);
    margin-bottom: 8px;
}

.v3-empty-state__desc {
    display: block;
    font-size: 13px;
    color: var(--v3-text-muted);
    margin-bottom: 16px;
    line-height: 1.5;
}

.v3-empty-state__actions { margin-top: 16px; }

.v3-embed {
    position: relative;
    width: 100%;
    height: 0;
    border-radius: var(--v3-radius);
    overflow: hidden;
    background: #000;
}

.v3-embed--16-9 { padding-bottom: 56.25%; }
.v3-embed--4-3  { padding-bottom: 75%; }

.v3-embed iframe,
.v3-embed video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.v3-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--v3-radius-pill);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.v3-badge--success  { background: #eafaf1; color: #1e7e34; }
.v3-badge--warning  { background: #fffae6; color: #856404; }
.v3-badge--error    { background: #fff0f0; color: #c0392b; }
.v3-badge--info     { background: #e8f4fd; color: #1a6896; }
.v3-badge--muted    { background: #f0f0f0; color: #888; }
.v3-badge--primary  { background: var(--v3-primary-light); color: var(--v3-primary-dark); }


.v3-info-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    padding: 10px 0;
    border-bottom: 1px solid var(--v3-border);
    font-size: 14px;
}

.v3-info-row:last-child { border-bottom: none; }

.v3-info-row__label { color: var(--v3-text-sub); flex-shrink: 0; }
.v3-info-row__value { font-weight: 600; color: var(--v3-text); text-align: right; }


.v3-section-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--v3-text);
    margin: 0 0 12px;
    padding: 0;
    line-height: 1.4;
}

.v3-section-title--sm {
    font-size: 13px;
    color: var(--v3-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
}


.v3-input-group {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    flex-wrap: nowrap;
}

.v3-input-group .v3-form-control {
    flex: 1;
    min-width: 0;
    padding: 12px 6px;
}

.v3-input-group__sep {
    color: var(--v3-text-muted);
    font-size: 22px;
    font-weight: 300;
    flex-shrink: 0;
    line-height: 1;
    user-select: none;
}

.v3-search-bar {
    display: flex;
    gap: 8px;
    align-items: center;
}

.v3-search-input-wrap {
    position: relative;
    flex: 1;
}

.v3-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 13px;
    pointer-events: none;
}

.v3-search-input {
    padding-left: 30px !important;
    padding-right: 30px !important;
    height: 36px;
    font-size: 13px;
    border-color: #d1d5db;
    border-radius: 6px;
}

.v3-search-input:focus {
    border-color: var(--v3-primary);
    box-shadow: 0 0 0 2px var(--v3-primary-ring);
}

.v3-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 12px;
    line-height: 1;
    text-decoration: none;
    padding: 2px 4px;
    border-radius: 4px;
    transition: color .15s, background .15s;
}

.v3-search-clear:hover {
    color: #ef4444;
    background: #fef2f2;
}

.v3-search-btn {
    flex-shrink: 0;
    height: 36px;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 500;
    background: var(--v3-primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s;
    white-space: nowrap;
}

.v3-search-btn:hover { background: var(--v3-primary-dark); }

.v3-search-active-badge {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    color: var(--v3-primary);
    background: var(--v3-primary-light);
    border: 1px solid rgba(230, 112, 14, .25);
    border-radius: 6px;
    padding: 4px 10px;
}


.riwayat-transaksi .filter {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.riwayat-transaksi .filter .left {
    flex: 1;
    max-width: 180px;
}

.riwayat-transaksi .filter .right {
    flex-shrink: 0;
}

.date-range-picker-selector {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 37px;
    padding: 0 13px;
    font-size: 13px;
    color: #373737;
    text-decoration: none;
    border: 1px solid #d5d5d5;
    border-radius: 8px;
    white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s;
}

.date-range-picker-selector:hover {
    background: #f1f5f9;
    border-color: var(--v3-primary);
    color: var(--v3-primary);
}

.date-range-picker-selector i {
    font-size: 14px;
}
.pesanan-results-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    font-size: 22px;
    color: #cbd5e1;
}

.frame-table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.frame-table-responsive table {
    min-width: 600px;
}

.mutation-page-uniplay .pname {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
}

.mutation-page-uniplay .pname b   { font-size: 15px; }
.mutation-page-uniplay .pname small { font-size: 13px; color: #64748b; }

.mutation-page-uniplay .btn_view_mutation {
    outline: none !important;
    box-shadow: none !important;
    transition: color .2s ease;
}

.mutation-page-uniplay .btn_view_mutation:hover { color: #e6710f; }

.frame-price-with-icon {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

.frame-price-with-icon span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 5px;
    border-radius: 4px;
    background: var(--v3-primary);
    cursor: help;
}

.frame-price-with-icon span i { font-size: 11px; color: #fff; }

.clt-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

.clt-title span {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
}

.clt-title span.badge-green  { color: #03ac0e; background: #d5ffdd; }
.clt-title span.badge-warn   { color: #ab8103; background: #fff4d5; }
.clt-title span.badge-danger { color: #ab0303; background: #ffd5d5; }

#errorpage {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    padding: 2rem 1rem;
}

.errorpage {
    text-align: center;
    max-width: 420px;
    width: 100%;
    line-height: 1.5;
}

.errorpage img {
    max-width: 140px;
    display: block;
    margin: 0 auto 1rem;
    opacity: .85;
}

.errorpage h2  { font-size: 18px; font-weight: 600; margin-bottom: .5rem; color: #374151; }
.errorpage p   { font-size: 14px; color: #6b7280; margin: 0; }
.errorpage a   { color: var(--v3-primary); }
.errorpage a:hover { text-decoration: underline; }


.v3-page {
    width: 100%;
    box-sizing: border-box;
    padding-bottom: 40px;
}

/* ── Bonus Reseller page ─────────────────────────────────────────────────── */
.parent-list-bonus {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.child-list-bonus {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    padding: 20px 24px;
    background: #fff;
    border-radius: var(--v3-radius);
    box-shadow: 0 0 11px -6px #6e6e6e;
}

.child-list-bonus img {
    width: 135px;
    flex-shrink: 0;
    border-radius: var(--v3-radius-sm);
    object-fit: contain;
}

.child-list-bonus .desc {
    flex: 1;
    min-width: 0;
}

.child-list-bonus .desc h3 {
    font-size: 17px;
    color: #373737;
    font-weight: 600;
    margin-bottom: 10px;
    line-height: 1.4;
}

.child-list-bonus .desc h3 a {
    color: #373737;
    text-decoration: none;
    transition: color .15s;
}

.child-list-bonus .desc h3 a:hover { color: var(--v3-primary); }

.child-list-bonus .desc p {
    font-size: 14px;
    color: #555;
    line-height: 1.55;
    margin-bottom: 10px;
}

.child-list-bonus .desc p:last-child { margin-bottom: 0; }

.price-bonus {
    color: #c70000;
    font-weight: 600;
}

.list-benefit-upgrade-package {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 24px 0 32px;
}

.benefit-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--v3-radius);
    box-shadow: 0 0 5px -1px #ccc;
    background: #fff;
}

.benefit-info i {
    color: #22a33a;
    font-size: 24px;
    flex-shrink: 0;
}

.benefit-info b { font-size: 15px; color: var(--v3-text); }

/* ── Domain Manager page ──────────────────────────────────────────────────── */
.header-text {
    font-size: 18px;
    font-weight: 600;
    color: var(--v3-text);
    margin-bottom: 16px;
}

.actions-multi-canvas-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 30px;
    width: 100%;
}

.tooltip-information-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tooltip-information {
    position: relative;
    display: inline-block;
    cursor: pointer;
    color: gray;
}

.tooltip-information .tooltip-text {
    visibility: hidden;
    width: 300px;
    padding: 6px;
    background: #fff;
    border: 1px solid #ced4da;
    box-shadow: 0 4px 4px rgba(0,0,0,.2);
    border-radius: 6px;
    position: absolute;
    top: 161%;
    left: 50%;
    transform: translateX(-35%);
    opacity: 0;
    transition: opacity .3s;
    z-index: 1;
    text-align: center;
}

.tooltip-information .tooltip-text p {
    color: #4f4f4f;
    font-size: 13px;
    margin-bottom: 0;
    width: 100%;
}

.tooltip-information .tooltip-text::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #333 transparent;
    opacity: 0;
}

.tooltip-information:hover .tooltip-text { visibility: visible; opacity: 1; }

.tooltip-information-dns {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.tooltip-information-dns .tooltip-text {
    visibility: hidden;
    width: fit-content;
    padding: 6px;
    background: #fff;
    border: 1px solid #ced4da;
    box-shadow: 0 4px 4px rgba(0,0,0,.2);
    border-radius: 6px;
    position: fixed;
    transform: translateX(-35%);
    opacity: 0;
    transition: opacity .3s;
    z-index: 1;
    margin-top: -60px;
    margin-left: 20px;
    text-align: center;
}

.tooltip-information-dns .tooltip-text p {
    color: #4f4f4f;
    font-size: 13px;
    margin-bottom: 0;
    width: 100%;
}

.tooltip-information-dns .tooltip-text::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #333 transparent;
    opacity: 0;
}

.tooltip-information-dns:hover .tooltip-text { visibility: visible; opacity: 1; }

.customdomain-alert-lists .alert-cs {
    margin-top: 10px;
    width: 100%;
    border-radius: 10px;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.customdomain-alert-lists .alert-cs i    { font-size: 18px; }
.customdomain-alert-lists .alert-cs span { font-size: 14px; font-weight: 400; }
.customdomain-alert-lists .alert-cs.important-alert   { background: #e68e31; color: #580000; }
.customdomain-alert-lists .alert-cs.important-danger  { background: #fdf3f3; color: #580000; }
.customdomain-alert-lists .alert-cs.important-success { background: #f3fdf4; color: #005901; }
.customdomain-alert-lists .alert-cs.important-info    { background: #f3fafd; color: #003558; }

.widget-custom-domain {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 20px;
}

.widget-custom-domain .search-domain-bar {
    margin-top: 10px;
    background: #fef9f4;
    padding: 14px;
    border-radius: 10px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
}

.widget-custom-domain .search-domain-bar .frame-outer-domain-bar {
    border: 2px solid #e27e14;
    border-radius: 10px;
    padding: 6px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
}

.widget-custom-domain .search-domain-bar .frame-outer-domain-bar input {
    flex: 1;
    font-size: 16px;
    text-transform: lowercase;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    text-indent: 8px;
}

.widget-custom-domain .search-domain-bar .frame-outer-domain-bar input::placeholder {
    text-transform: none !important;
}

.widget-custom-domain .search-domain-bar .frame-outer-domain-bar select {
    background: #f3f3f3;
    border-radius: 5px;
    padding: 3px 26px 3px 9px;
    font-size: 15px;
    -webkit-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMjMzLjQgNDA2LjZjMTIuNSAxMi41IDMyLjggMTIuNSA0NS4zIDBsMTkyLTE5MmMxMi41LTEyLjUgMTIuNS0zMi44IDAtNDUuM3MtMzIuOC0xMi41LTQ1LjMgMEwyNTYgMzM4LjcgODYuNiAxNjkuNGMtMTIuNS0xMi41LTMyLjgtMTIuNS00NS4zIDBzLTEyLjUgMzIuOCAwIDQ1LjNsMTkyIDE5MnoiLz48L3N2Zz4=");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
    outline: none !important;
    box-shadow: none !important;
    border-color: transparent;
    color: #000 !important;
}

.widget-custom-domain .search-domain-bar .frame-outer-domain-bar button {
    border-radius: 5px;
    background: #e17d13;
    color: #fff;
    border-color: #e17d13;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    transition: background .2s;
    outline: none !important;
    box-shadow: none !important;
}

.widget-custom-domain .search-domain-bar .frame-outer-domain-bar button.disabled-submit {
    pointer-events: none;
    background: #b1b1b1 !important;
    border-color: #b1b1b1 !important;
}

.widget-custom-domain .search-domain-bar .frame-outer-domain-bar button:hover {
    background: #ff982b;
    border-color: #ff982b;
}

.domain-available-box {
    width: 80%;
    background: #e17d13;
    border-radius: 10px;
    margin: 10px 0 15px;
    padding: 5px;
}

.domain-available-box h5 {
    text-align: center;
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    margin: 5px 0 10px;
}

.domain-available-box .domain-ava-detils {
    background: #fff;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.domain-available-box .domain-ava-detils p {
    color: #636262;
    font-size: 16px;
    padding: 20px 25px 0;
}

.domain-available-box .domain-ava-detils .pricing-domain {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.domain-available-box .domain-ava-detils .pricing-domain .pd-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.domain-available-box .domain-ava-detils .pricing-domain .pd-left img { width: 30px; }
.domain-available-box .domain-ava-detils .pricing-domain .pd-left b  { font-size: 18px; font-weight: 500; }

.domain-available-box .domain-ava-detils .getthis-domain {
    border-radius: 5px;
    background: #e17d13;
    color: #fff;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    text-decoration: none;
    transition: background .2s;
}

.domain-available-box .domain-ava-detils .getthis-domain:hover { background: #ff982b; }
.domain-available-box .benefit-domain { padding: 20px; }
.domain-available-box .benefit-domain .benefit-lists { display: flex; justify-content: space-between; }
.domain-available-box .benefit-domain b { font-size: 16px; font-weight: 500; }

.w-100p { width: 100px !important; }
.w-150p { width: 150px !important; }

@media (max-width: 767px) {
    /* Root container: full viewport width */
    .dashboard-member {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 12px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    .dashboard-member .left-sidebar { display: none !important; }

    .dashboard-member .dashboard-right-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .dashboard-member .right-content {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;
        padding: 12px 14px !important;
        box-sizing: border-box !important;
        margin-top: 12px !important;
    }

    .list-denom .list-denom-frame { height: auto; min-height: 80px; }

    .area-topup-members { flex-direction: column; width: 100%; }
    .area-topup-members .sidebar-menu { display: none; }
    .area-topup-members .content-topup,
    .area-topup-members .content-topup.full-width { width: 100%; padding: 16px; }
    .area-topup-members .content-topup .input-area { flex-wrap: wrap; }
    .area-topup-members .content-topup .input-area .frame-input-inner { width: 100%; flex: 1 1 100%; }
    .area-topup-members .content-topup .input-area .frame-input-inner input,
    .area-topup-members .content-topup .input-area .frame-input-inner select { width: 100% !important; box-sizing: border-box; }
    .area-topup-members .content-topup .input-area .first-input { width: 100%; }
    .area-topup-members .content-topup .input-area .second-input { width: 100%; }
    .area-topup-members .content-topup .input-area .mlseparator input { width: 100% !important; }
    .popover-custom { left: 0; right: auto; max-width: min(235px, calc(100vw - 40px)); }
    .list-denom { grid-template-columns: repeat(2, 1fr); gap: 10px; }

    .v3-tg-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        width: 100%;
        overflow: hidden;
    }
    .v3-filter-tabs {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
    }
    .v3-tg-toolbar .v3-search-bar {
        min-width: unset;
        width: 100%;
    }
    .v3-game-item { gap: 10px; padding: 10px 12px; }
    .v3-game-img-wrap { width: 48px; height: 48px; }
    .v3-game-name { font-size: 13px; }
    .v3-game-profit { font-size: 11px; }
    .v3-btn-beli { padding: 6px 12px; font-size: 12px; }

    .header-text { margin-left: 0 !important; }
      
    .v3-reload-denom-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .v3-payment-cat__head { padding: 10px 12px; }
    .v3-payment-cat__preview { padding: 6px 12px; }
    .v3-payment-cat__body ul {
        grid-template-columns: repeat(2, 1fr);
    }

    .promo-slider .swiper-button-prev,
    .promo-slider .swiper-button-next { width: 32px; height: 32px; }

    .promo-slider { padding-top: 10px; padding-bottom: 30px !important; }

    .child-list-bonus {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        padding: 16px;
    }
    .child-list-bonus img { width: 100px; }
    .child-list-bonus .desc h3 { font-size: 15px; }
    .child-list-bonus .desc p  { font-size: 13px; }
    .benefit-info b { font-size: 14px; }

        .general-config-new-face { gap: 10px; }
    .general-config-new-face .child-general-config > .header-content {
        align-items: flex-start;
        gap: 10px;
        padding: 14px;
    }
    .general-config-new-face .left-content {
        gap: 10px;
        align-items: flex-start;
    }
    .general-config-new-face .frame-icon {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
        border-radius: 8px;
        font-size: 15px;
    }
    .general-config-new-face .frame-captions h4 { font-size: 15px; }
    .general-config-new-face .frame-captions p { font-size: 12px; }
    .general-config-new-face .child-general-config.is-open .body-content { padding: 14px; }
    .general-config-new-face .action_in_input { right: 14px; }
    .body-content-logo-upload-frame {
        align-items: flex-start;
        min-height: 0;
    }
    .img_elem_frame {
        width: 72px;
        height: 62px;
        flex-basis: 72px;
    }
    .btn-upload-logo,
    .btn-upload-logo label,
    .btn-reset-logo { flex: 1 1 120px; }
    .btn-upload-logo label { width: 100%; }
    .logo-anim-theme-row { align-self: flex-start; }
    .plf-simulate-group {
        padding: 14px;
        gap: 10px;
    }
    .plf-simulate-header { gap: 10px; }
    .plf-header-logo {
        width: 82px;
        max-height: 34px;
    }
    .plf-simulate-header .search-area {
        height: 34px;
        padding: 0 9px;
    }
    .plf-burger-menu {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }
    .area-connection-whatsapp-state { grid-template-columns: 1fr; }
    .cia-heading-wa { align-items: flex-start; }
    .cia-heading-wa h3 {
        flex: 1;
        min-width: 160px;
        line-height: 1.35;
    }
    .pssr-radios { gap: 8px 12px; }
    .area-settings-lcw-newface {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 10px !important;
    }
    .fa-icon-picker-dropdown {
        left: 12px !important;
        right: 12px !important;
        width: calc(100vw - 24px) !important;
        min-width: 0;
        max-width: calc(100vw - 24px);
        max-height: 45vh !important;
    }
    .fa-icon-picker-dropdown .icon-grid {
        grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
        max-height: none;
        flex: 1;
        overflow-y: auto;
    }
    #js-tooltip-v3config {
        max-width: calc(100vw - 24px);
        white-space: normal;
    }
    .actions-multi-canvas-footer {
        flex-direction: column-reverse;
        align-items: stretch;
        padding: 16px 0 0 !important;
    }

    .modal-footer .actions-multi-canvas-footer { 
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-end !important;
        width: 100% !important;
    }
    
    .actions-multi-canvas-footer .btn-reset-outline,
    .actions-multi-canvas-footer .btn-save-outline { width: 100%; }
    .plf-header-browser-mask .title-area-simulate { gap: 3px; }
    .plf-header-browser-mask .favicon-title-preview { min-width: 12px; }
}

/* Back-nav toolbar: mobile only (desktop has sidebar navigation) */
.toolbar-dashboard {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--v3-border);
    background: var(--v3-bg-card);
}



.v3-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}


@media (min-width: 1024px) {
    .v3-grid--3col { grid-template-columns: repeat(3, 1fr); }
    .v3-academy-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Page background (with decorative images on desktop) */
.v3-bg-login {
    min-height: 100vh;
    background-color: var(--v3-bg-page);
}

/* Outer centering wrapper — mobile-first: card floats with breathing room */
.v3-login-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 40px 16px 56px;
    box-sizing: border-box;
}

@media (min-width: 480px) {
    .v3-login-page {
        justify-content: center;
        padding: 32px 16px;
    }
}

/* Card container — rounded floating card on all screen sizes */
.v3-login-card {
    background: var(--v3-bg-card);
    width: 100%;
    max-width: 420px;
    border-radius: 20px;
    box-shadow: 0 4px 40px rgba(0, 0, 0, .10), 0 1px 4px rgba(0, 0, 0, .06);
    overflow: hidden;
    flex-shrink: 0;
}

@media (min-width: 480px) {
    .v3-login-card {
        max-width: 440px;
        border-radius: var(--v3-radius-lg);
        box-shadow: var(--v3-shadow-card);
    }
}

/* Inner content area (resets inherited margin from old .area-login) */
.v3-login-content { margin: 0 !important; }

/* Brand logo block above the card */
.v3-login-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 28px;
    text-align: center;
    flex-shrink: 0;
}

.v3-login-brand img {
    height: 38px;
    width: auto;
    display: block;
}

.v3-login-brand-sub {
    font-size: 11px;
    font-weight: 700;
    color: var(--v3-text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 8px;
}

/* Header / title */
.v3-login-header {
    text-align: center;
    padding: 32px var(--v3-pad-x) 16px;
}

.v3-login-header h1 {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    color: var(--v3-text);
    padding: 0 !important;
}

/* Form step wrappers (override Bootstrap px-3) */
.v3-login-step {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Register button wrapper */
.v3-btn-wrap { padding: 0 var(--v3-pad-x); }

/* Bottom help text */
.v3-login-help {
    text-align: center;
    font-size: 13px;
    color: var(--v3-text-muted);
    padding: 16px var(--v3-pad-x) 28px;
    margin: 0;
}

.v3-login-help a {
    color: var(--v3-primary);
    font-weight: 600;
    text-decoration: none;
}

#redeem {
    width: 100%;
}

.v3-login-help a:hover { text-decoration: underline; }

.v3-redeem-intro {
    font-size: 14px;
    color: var(--v3-text-sub);
    margin-bottom: 16px;
}

.v3-redeem-hint {
    font-size: 12px;
    color: var(--v3-text-muted);
    margin-top: 4px;
    display: block;
}

.v3-redeem-footer { margin-top: 20px; }

.v3-redeem-tnc {
    font-size: 12px;
    color: var(--v3-text-muted);
    text-align: center;
    margin-top: 10px;
    margin-bottom: 0;
}

.v3-redeem-tnc a {
    color: var(--v3-primary);
    text-decoration: none;
}

.v3-redeem-tnc a:hover { text-decoration: underline; }

/* Descendant selectors for .v3-card--media children that use old class names */
.v3-bonus-item .desc h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--v3-text);
    margin: 0 0 4px;
    line-height: 1.4;
}

.v3-bonus-item .desc h3 a {
    color: var(--v3-text);
    text-decoration: none;
}

.v3-bonus-item .desc h3 a:hover {
    color: var(--v3-primary);
    text-decoration: underline;
}

.v3-bonus-item .desc p {
    font-size: 12px;
    color: var(--v3-text-muted);
    margin: 0 0 4px;
    line-height: 1.5;
}

.v3-bonus-item .price-bonus {
    font-size: 13px;
    font-weight: 700;
    color: var(--v3-primary);
}
/* Page header: title on left, date picker on right */
.v3-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 0 20px;
}

/* Date range picker trigger */
.v3-date-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    background: var(--v3-bg-card);
    border: 1.5px solid var(--v3-border);
    border-radius: var(--v3-radius);
    font-size: 13px;
    font-weight: 600;
    color: var(--v3-text);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: border-color .15s, color .15s;
}

.v3-date-btn:hover { border-color: var(--v3-primary); color: var(--v3-primary); text-decoration: none; }
.v3-date-btn i { color: var(--v3-primary); }
.v3-overview-back {
    display: none;
}

/* ── Stat grid ────────────────────────────────────────────── */

/* 4-card grid: 2×2 on mobile, 4-col on desktop */
.v3-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}


/* 3-col revenue grid: stacks on very small, 3-col at ≥480px */
.v3-stat-grid--3col { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 479px) {
    .v3-stat-grid--3col { grid-template-columns: 1fr; }
    .v3-stat-card__value { font-size: 15px; }
    .body-content-logo-upload-frame { flex-direction: column; }
    .img_elem_frame,
    .img_elem_frame.favicon {
        width: 100%;
        height: 76px;
        flex-basis: auto;
    }
    .plf-simulate-header .parent-frame-search-area { display: none; }
    .plf-header-logo { width: 116px; }
    .fa-icon-input-group { flex-wrap: wrap; }
    .fa-icon-input-group .btn-fa-icon-picker,
    .fa-icon-input-group .form-control {
        width: 100%;
        border: 1px solid #dee2e6;
        border-radius: 6px;
    }
}

/* Individual stat card */
.v3-stat-card {
    background: var(--v3-bg-card);
    border: 1px solid var(--v3-border);
    border-radius: var(--v3-radius);
    padding: 12px 14px;
    box-sizing: border-box;
}

.v3-stat-card__value {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: var(--v3-text);
    margin-bottom: 6px;
    line-height: 1.2;
    word-break: break-all;
}

.v3-stat-card__label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--v3-text-muted);
}

.v3-stat-card__label img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
}

/* ── Chart ────────────────────────────────────────────────── */

.v3-chart-wrap {
    background: var(--v3-bg-card);
    border: 1px solid var(--v3-border);
    border-radius: var(--v3-radius);
    padding: 14px;
    box-sizing: border-box;
    position: relative;
    width: 100%;
    min-height: 280px;
    overflow: hidden;
}
.v3-chart-wrap canvas {
    display: block;
    width: 100% !important;
    height: 250px !important;
    max-width: 100%;
}

/* ── Best selling products ────────────────────────────────── */

.v3-section-block { margin-top: 8px; }

.v3-product-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--v3-border);
    border-radius: var(--v3-radius);
    overflow: hidden;
    background: var(--v3-bg-card);
}

.v3-product-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--v3-border);
}

.v3-product-row:last-child { border-bottom: none; }

.v3-product-row__info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.v3-product-row__img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: var(--v3-radius-sm);
    flex-shrink: 0;
}

.v3-product-row__name {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--v3-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.v3-product-row__pub {
    display: block;
    font-size: 11px;
    color: var(--v3-text-muted);
    font-style: italic;
}

.v3-product-row__stats {
    display: flex;
    gap: 16px;
    flex-shrink: 0;
}

.v3-product-row__stat {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.v3-product-row__stat b  { font-size: 13px; font-weight: 700; }
.v3-product-row__stat small { font-size: 10px; color: var(--v3-text-muted); }

/* Mobile: stack info above stats, left-align stats */
@media (max-width: 599px) {
    .v3-product-row { flex-direction: column; align-items: flex-start; }
    .v3-product-row__stats { gap: 12px; width: 100%; }
    .v3-product-row__stat  { align-items: flex-start; }
}

/* ── Promo slider (moved from inline <style> in box_v2_overview.php) ── */
.slider-container-fixed {
    width: 100%;
    margin: 0 auto 10px auto;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}

.promo-slider {
    width: 100%;
    padding-bottom: 30px !important;
    margin-bottom: 0 !important;
}

.promo-slider .swiper-pagination { bottom: 8px !important; }

.promo-slider .swiper-slide {
    border-radius: 12px;
    overflow: hidden;
}

.promo-slider .swiper-slide img {
    width: 100%;
    height: auto;
    aspect-ratio: 1200 / 450;
    /* object-fit: cover; */
    display: block;
    border-radius: 12px;
}

.promo-slider .swiper-pagination-bullet-active {
    background: #e6700f !important;
    width: 20px;
    border-radius: 5px;
}

.promo-slider .swiper-button-prev,
.promo-slider .swiper-button-next {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(255,255,255,.92);
    box-shadow: 0 2px 10px rgba(0,0,0,.35);
    top: calc(50% - 15px);
    transform: translateY(-50%);
    transition: background-color .2s, box-shadow .2s;
}

.promo-slider .swiper-button-prev:hover,
.promo-slider .swiper-button-next:hover { background-color: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.45); }

.promo-slider .swiper-button-prev::after,
.promo-slider .swiper-button-next::after { font-size: 13px; font-weight: 900; color: #111; }

.promo-slider .swiper-button-prev { left:  12px; }
.promo-slider .swiper-button-next { right: 12px; }

/* Single-slide: no pagination space needed */
.slider-container-fixed.single-slider .promo-slider { padding-bottom: 0 !important; }

/* Mobile */
@media (max-width: 576px) {
    .promo-slider .swiper-slide img { aspect-ratio: 16 / 7; }
    .promo-slider .swiper-button-prev,
    .promo-slider .swiper-button-next { display: none !important; }
}


.v3-btn-login,
.v3-redeem-btn {
    display: block;
    width: 100%;
    padding: 13px;
    background: var(--v3-primary);
    color: #fff;
    border: 1.5px solid var(--v3-primary);
    border-radius: var(--v3-radius-pill);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
    font-family: var(--v3-font);
    text-align: center;
    line-height: 1;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

.v3-btn-login:hover:not(:disabled):not([disabled]),
.v3-redeem-btn:hover:not(:disabled):not([disabled]) {
    background: var(--v3-primary-dark);
    color: #fff;
    text-decoration: none;
}

.v3-btn-login:disabled, .v3-btn-login[disabled],
.v3-redeem-btn:disabled, .v3-redeem-btn[disabled] {
    background: #d4d4d4;
    color: #888;
    border-color: #d4d4d4;
    cursor: not-allowed;
    pointer-events: none;
}

.v3-btn-daftar {
    display: block;
    width: 100%;
    padding: 12px;
    background: transparent;
    color: var(--v3-primary);
    border: 1.5px solid var(--v3-primary);
    border-radius: var(--v3-radius-pill);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, color .15s;
    font-family: var(--v3-font);
    text-align: center;
    box-sizing: border-box;
    text-decoration: none;
    line-height: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 40px;
}

.v3-btn-daftar:hover {
    background: var(--v3-primary-light);
    color: var(--v3-primary);
    text-decoration: none;
}

.v3-btn-orange-outline {
    background: white;
    border: 1px solid var(--v3-primary);
    color: var(--v3-primary);
    border-radius: var(--v3-radius-sm);
    font-size: 13px;
    padding: 4px 16px;
    font-weight: 600;
    line-height: 20px;
    cursor: pointer;
    transition: background .15s;
    font-family: var(--v3-font);
}

.v3-btn-orange-outline:hover {
    background: var(--v3-primary-light);
    color: var(--v3-primary);
    border-color: var(--v3-primary);
}

/* Alerts → .v3-alert */
.v3-login-error {
    margin: 0 var(--v3-pad-x) 12px;
    padding: 10px 14px;
    border-radius: var(--v3-radius-sm);
    font-size: 14px;
    text-align: center;
}

/* Divider → .v3-divider */
.v3-separator {
    display: flex !important;
    align-items: center;
    padding: 20px var(--v3-pad-x);
    gap: 10px;
    background: none !important;
    height: auto !important;
    border: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

.v3-sep-line {
    flex: 1;
    height: 1px;
    background: #e3e8ef;
    display: block;
    border-bottom: none;
    width: auto;
}

.v3-sep-text {
    font-size: 12px;
    color: var(--v3-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Dialog → .v3-dialog */
.v3-popup-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 19999;
}

.v3-popup-frame {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 20000;
    padding: 16px;
    box-sizing: border-box;
}

.v3-popup-modal {
    position: relative !important;
    display: block !important;
    background: var(--v3-bg-card);
    border-radius: var(--v3-radius-lg);
    padding: 28px 24px 24px;
    width: 100%;
    max-width: 400px;
    text-align: center;
    box-shadow: var(--v3-shadow-popup);
    box-sizing: border-box;
}

.v3-popup-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--v3-text);
    margin: 8px 0 10px;
}

.v3-popup-sub {
    font-size: 14px;
    color: var(--v3-text-sub);
    margin-bottom: 4px;
}

.v3-popup-content-val {
    font-size: 15px;
    font-weight: 700;
    color: var(--v3-text);
}

.v3-popup-actions {
    display: flex;
    gap: 10px;
    margin-top: 22px;
}

.v3-popup-cancel,
.v3-popup-confirm {
    flex: 1;
    padding: 12px 16px;
    border-radius: var(--v3-radius);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, color .15s;
    text-align: center;
    display: block;
    box-sizing: border-box;
    line-height: 1;
    font-family: var(--v3-font);
}

.v3-popup-cancel {
    color: #484848;
    background: #fff;
    border: 1.5px solid var(--v3-border);
}

.v3-popup-cancel:hover {
    background: #f5f5f5;
    color: #484848;
    text-decoration: none;
}

.v3-popup-confirm {
    background: var(--v3-primary);
    color: #fff;
    border: 1.5px solid var(--v3-primary);
}

.v3-popup-confirm:hover {
    background: var(--v3-primary-dark);
    border-color: var(--v3-primary-dark);
    color: #fff;
    text-decoration: none;
}

/* Layout → .v3-page */
.v3-panel-page {
    width: 100%;
    box-sizing: border-box;
    padding-bottom: 40px;
}

@media (min-width: 768px) {
    .v3-stat-grid { grid-template-columns: repeat(2, 1fr); }
    .v3-stat-grid--3col { grid-template-columns: repeat(3, 1fr); }
    .toolbar-dashboard { display: none !important; }
    .v3-page {
        max-width: 720px;
        margin: 0 auto;
        padding-top: 8px;
    }
    .v3-page--narrow {
        max-width: 520px;
        margin: 0 auto;
        padding: 8px 0 40px;
    }

    .v3-page--wide {
        max-width: 960px;
        margin: 0 auto;
    }
    .v3-bg-login {
        background-image: url(../../img/bg-login-left.png), url(../../img/bg-login-right.png);
        background-position: bottom left, bottom right;
        background-repeat: no-repeat;
        background-size: 20%;
    }

    .v3-perpanjangan-page {
        max-width: 680px;
        margin: 0 auto;
        padding: 8px 0 40px;
    }

    .v3-panel-page {
        max-width: 720px;
        margin: 0 auto;
    }
}

.v3-perpanjangan-page { box-sizing: border-box; }
/* Stack → .v3-stack */
.v3-bonus-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Card --media → .v3-card.v3-card--media */
.v3-bonus-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: var(--v3-bg-card);
    border: 1px solid var(--v3-border);
    border-radius: var(--v3-radius);
    padding: 14px;
    box-sizing: border-box;
}

.v3-bonus-item img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--v3-radius-sm);
    flex-shrink: 0;
}

/* Empty state → .v3-empty-state */
.v3-not-reseller-box {
    text-align: center;
    padding: 20px 16px;
}

.v3-not-reseller-box b {
    display: block;
    font-size: 16px;
    color: var(--v3-text);
    margin-bottom: 8px;
}

.v3-not-reseller-box small {
    display: block;
    font-size: 13px;
    color: var(--v3-text-muted);
    margin-bottom: 16px;
    line-height: 1.5;
}

/* List item --icon → .v3-list-item.v3-list-item--icon */
.v3-benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: var(--v3-text);
    text-align: left;
}

.v3-benefit-item i {
    color: var(--v3-primary);
    margin-top: 2px;
    flex-shrink: 0;
}

/* Grid --3col → .v3-grid.v3-grid--3col */
.v3-academy-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 600px) {
    .v3-academy-grid { grid-template-columns: repeat(2, 1fr); }
    .v3-grid--2col { grid-template-columns: repeat(2, 1fr); }
    .v3-grid--3col { grid-template-columns: repeat(2, 1fr); }
}


/* Embed --16-9 → .v3-embed.v3-embed--16-9 */
.v3-academy-item {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    border-radius: var(--v3-radius);
    overflow: hidden;
    background: #000;
}

.v3-academy-item iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Input group → .v3-input-group */
.v3-voucher-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    flex-wrap: nowrap;
}

.v3-voucher-input {
    flex: 1;
    min-width: 0;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 3px;
    padding: 12px 6px;
    border: 1.5px solid var(--v3-border);
    border-radius: var(--v3-radius);
    background: var(--v3-bg-input);
    color: var(--v3-text);
    box-sizing: border-box;
    font-family: var(--v3-font);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.v3-voucher-input:focus {
    border-color: var(--v3-border-focus);
    box-shadow: 0 0 0 3px var(--v3-primary-ring);
}

.v3-voucher-sep {
    color: var(--v3-text-muted);
    font-size: 22px;
    font-weight: 300;
    flex-shrink: 0;
    line-height: 1;
    user-select: none;
}

/* 5.1 — Header */
.header-uniplay {
    background: white;
    display: flex;
    align-items: center;
    box-shadow: 0 1px 10px #617d901c;
    position: relative;
    z-index: 100;
}
.header-uniplay .header-content {
    width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    padding: 15px 0;
}
.header-uniplay .header-content .logo {
    width: 148px;
    margin-right: 30px;
    flex-shrink: 0;
}
.header-uniplay .header-content .logo img {
    width: 100%;
    height: auto;
}
.header-uniplay .header-content .parent-frame-search-area {
    flex: 0 0 auto;
}
.header-uniplay .header-content .parent-frame-search-area .close-mobile {
    display: none;
}
.header-uniplay .header-content .search-area {
    width: 280px;
    border: 1px solid #e5e5e5;
    border-radius: 5em;
    padding: 6px 15px 6px 20px;
    color: #ababab;
    transition: 0.3s;
    box-sizing: border-box;
}
.header-uniplay .header-content .search-area:hover,
.header-uniplay .header-content .search-area:focus,
.header-uniplay .header-content .search-area.active { border: 1px solid orange; }
.header-uniplay .header-content .search-area .input-icon-group { font-size: 14px; }
.header-uniplay .header-content .search-area .input-icon-group i { margin-right: 5px; }
.header-uniplay .header-content .search-area .input-icon-group input {
    border: none;
    outline: none;
    font-size: 14px;
    width: 89%;
}
.result-quick-search {
    position: absolute;
    z-index: 3200;
    margin-top: 12px;
    padding: 8px 0;
    background: #fff;
    border: 1px solid var(--v3-border);
    border-radius: var(--v3-radius);
    box-shadow: var(--v3-shadow-popup);
    overflow: hidden;
    pointer-events: auto;
}
.result-quick-search ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.result-quick-search ul li .notfound {
    display: block;
    min-width: 260px;
    padding: 14px 18px;
    color: var(--v3-text-muted);
    font-size: 13px;
    text-align: center;
}
.result-quick-search ul li a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 340px;
    padding: 10px 14px;
    color: var(--v3-text);
    text-decoration: none;
    transition: background .15s ease;
    cursor: pointer;
    touch-action: manipulation;
}
.result-quick-search ul li a:hover,
.result-quick-search ul li a:focus {
    background: var(--v3-primary-light);
    color: var(--v3-text);
    text-decoration: none;
}
.result-quick-search ul li .left img {
    width: 42px;
    height: 42px;
    border-radius: var(--v3-radius-sm);
    object-fit: cover;
    display: block;
    flex-shrink: 0;
}
.result-quick-search ul li .right {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.result-quick-search ul li .right b {
    max-width: 245px;
    color: var(--v3-text);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.result-quick-search ul li .right small {
    color: var(--v3-text-muted);
    font-size: 11px;
    font-style: italic;
}
.header-uniplay .header-content .menu-right {
    flex: 1;
    width: 30px;
    position: relative;
}
.header-uniplay .header-content .menu-right .open-search-mobile {
    float: right;
    color: #ee8103;
    font-weight: bold;
    font-size: 25px;
    margin-right: 20px;
    display: none;
}

.header-uniplay .header-content .menu-right .menu-burgerbar {
    float: right;
    color: var(--v3-primary);
    font-weight: 700;
    font-size: 25px;
    cursor: pointer;
}
.open-profile-after-login {
    float: right;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    background: white;
    padding: 6px 10px;
    border-radius: 0.5em;
    margin-right: 20px;
    max-width: 250px;
}
.open-profile-after-login:hover { background: #f7f7f7; }
.open-profile-after-login.active { background: #f7f7f7; }
.open-profile-after-login img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    margin-right: 15px;
}
.open-profile-after-login .no-photo {
    width: 27px;
    height: 26px;
    border-radius: 50%;
    margin-right: 6px;
    background: #e6700f;
    text-align: center;
    line-height: 26px;
    font-weight: 600;
    font-size: 14px;
    color: white;
    flex: 0 0 27px;
    display: block;
}
.open-profile-after-login span {
    font-size: 16px;
    color: #373737;
}

/* 5.2 — Dashboard layout */
.dashboard-member {
    width: 1100px;
    margin: 30px auto;
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: flex-start;
}
.dashboard-member .left-sidebar {
    width: 230px;
    flex-shrink: 0;
    background: transparent !important;
    box-shadow: none !important;
}
.dashboard-member .sidebarleft {
    width: 230px;
    background: white;
    box-shadow: 0px 2px 10px -2px #0435631a;
    border-radius: 0.3em;
    position: relative;
}
.dashboard-member .dashboard-right-wrapper {
    flex: 1;
    min-width: 0;
}
.dashboard-member .right-content {
    border-radius: 0.3em;
    min-height: 699px;
    background-color: white;
    border: 1px solid --var(--v3-border);
    border-radius: 0.3em;
    padding: 20px;
}

/* 5.3 — Sidebar user info */
.primary-heading-new {
    display: flex;
    flex-direction: column;
    gap: 15px;
    border-bottom: 1px solid #ededed;
    padding: 20px;
}
.dashboard-member .left-sidebar .primary-heading {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}
.dashboard-member .left-sidebar .primary-heading img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
}
.dashboard-member .left-sidebar .primary-heading .no-photo {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #e6700f;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    flex-shrink: 0;
}
.dashboard-member .left-sidebar .primary-heading .right {
    flex: 1;
    min-width: 0;
}
.dashboard-member .left-sidebar .primary-heading .right b {
    display: block;
    color: #141414;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dashboard-member .left-sidebar .primary-heading .right small {
    color: #8b8b8b;
    font-size: 11px;
}
.dashboard-member .left-sidebar .secondary-heading { }
.dashboard-member .left-sidebar .secondary-heading .head-title {
    padding: 0 20px 10px 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.dashboard-member .left-sidebar .secondary-heading .head-title img {
    width: 21px;
    height: 21px;
    margin-right: 10px;
}
.dashboard-member .left-sidebar .secondary-heading .head-title b {
    color: #141414;
    font-size: 13px;
}
.dashboard-member .left-sidebar .secondary-heading .content {
    padding: 20px;
    padding-top: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}
.dashboard-member .left-sidebar .secondary-heading .content .left {
    font-size: 14px;
    color: #393939;
}
.dashboard-member .left-sidebar .secondary-heading .content .right {
    text-align: right;
}
.dashboard-member .left-sidebar .secondary-heading .content .right p {
    color: #393939;
    font-size: 14px;
    margin-bottom: 0;
}

/* 5.4 — Sidebar buttons */
.dashboard-member .left-sidebar .btn-topup {
    border: 1px solid #c46415;
    background: #e6700f;
    color: white;
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
    padding: 7px 12px;
    display: block;
    text-align: center;
    border-radius: 5px;
    width: 190px;
    margin: 0 auto 25px;
    transition: all .2s ease-in-out;
}
.dashboard-member .left-sidebar .btn-topup:hover { background: #c25c08; }
.dashboard-member .left-sidebar .btn-visit {
    border: 1px solid #c46415;
    background: #fff;
    color: #c25c08;
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
    padding: 7px 12px;
    display: block;
    text-align: center;
    border-radius: 5px;
    width: 190px;
    margin: 0 auto;
    transition: all .2s ease-in-out;
}
.dashboard-member .left-sidebar .btn-visit:hover { background: #FFF6EF; }
.dashboard-member .left-sidebar .btn-visit i { padding-left: 4px; }
.dashboard-member .left-sidebar .btn-feedback {
    border: 1px solid #c46415;
    background: #fff;
    color: #c46415;
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
    padding: 7px 12px;
    display: block;
    text-align: center;
    border-radius: 5px;
    width: 190px;
    margin: 10px auto 0;
    transition: all .2s ease-in-out;
}
.dashboard-member .left-sidebar .btn-feedback:hover {
    background: #FFF6EF;
    color: #c25c08;
    border-color: #c25c08;
    text-decoration: none;
}
.dashboard-member .left-sidebar .btn-feedback i { padding-left: 4px; }
.btn-upgrade-premium {
    border: 1px solid #2c2c2c;
    background: #393939;
    color: white;
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
    padding: 7px 12px;
    display: block;
    text-align: center;
    border-radius: 5px;
    width: 100%;
    margin: 0 auto 25px;
    transition: all .2s ease-in-out;
}
.btn-upgrade-premium:hover { background: #262626; color: #fff; }

/* 5.5 — Sidebar menu accordion */
.dashboard-member .left-sidebar .menu-list { }
.dashboard-member .left-sidebar .menu-list .child-menu {
    padding: 15px 20px;
    border-top: 1px solid #ededed;
}
.dashboard-member .left-sidebar .menu-list .child-menu .heading {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    margin-bottom: 0 !important;
}
.dashboard-member .left-sidebar .menu-list .child-menu .heading b {
    color: #141414;
    font-size: 14px;
    font-weight: 600;
}
.dashboard-member .left-sidebar .menu-list .child-menu .heading i {
    font-size: 10px;
    color: #8b8b8b;
    transition: transform 0.3s ease, color 0.2s ease;
}
.dashboard-member .left-sidebar .menu-list .child-menu .heading.is-open i {
    transform: rotate(180deg);
}
.dashboard-member .left-sidebar .menu-list .child-menu .heading:hover i { color: #141414; }
.dashboard-member .left-sidebar .menu-list .child-menu .heading:hover b { color: #000; }
.dashboard-member .left-sidebar .menu-list .child-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-top: 5px;
    overflow: hidden;
    max-height: 800px;
    opacity: 1;
    transition: max-height 0.35s ease, opacity 0.25s ease, margin-top 0.25s ease;
}
.dashboard-member .left-sidebar .menu-list .child-menu ul.is-collapsed {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
}
.dashboard-member .left-sidebar .menu-list .child-menu ul li { }
.dashboard-member .left-sidebar .menu-list .child-menu ul li a {
    text-decoration: none;
    color: #141414;
    font-size: 13px;
    padding: 5px;
    display: block;
    transition: 0.2s ease;
}
.dashboard-member .left-sidebar .menu-list .child-menu ul li a:hover,
.dashboard-member .left-sidebar .menu-list .child-menu ul li.active a {
    background: #f2f5f7;
    border-radius: 22px;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: -10px;
    margin-right: -10px;
}

/* 5.6 — Sidebar point badge */
.manfaat-uniplay-point-v4 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 12px;
    margin-top: -5px;
    margin-bottom: 10px;
}
.manfaat-uniplay-point-v4 img { width: 15px; }
.manfaat-uniplay-point-v4 a {
    color: #363636;
    text-decoration: none;
    cursor: pointer;
}
.manfaat-uniplay-point-v4 a:hover { color: #e6710f !important; }

/* 5.7 — Upgrade card */
.upgrade-card-paket {
    display: flex;
    width: 230px;
    padding: 13px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 5px;
    background: url('../../img/popup-uniplaypoint.png') lightgray 50% / cover no-repeat;
    box-shadow: 0px 2px 10px -2px rgba(4, 53, 99, 0.10);
    margin-top: 16px;
}
.upgrade-card-paket .txt-title {
    color: #E6700F;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 0;
}
.upgrade-card-paket .txt-content {
    color: #393939;
    text-align: center;
    font-size: 14px;
    margin-bottom: 0;
}
.upgrade-card-paket .button {
    display: flex;
    width: 190px;
    padding: 6px 12px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 5px;
    border: 1px solid #C46415;
    background: #E6700F;
    color: #fff;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    text-decoration: none;
}
.upgrade-card-paket .button:disabled { pointer-events: none; background: gray; border-color: gray; color: #ddd; }
.upgrade-card-paket .button:hover { background: #c25c08; color: #fff; }

/* 5.8 — Upgrade / Add-on modals */
.custom-modal-upgradelegend-overlay,
.custom-modal-upgradesupreme-overlay,
.custom-modal-addontema-overlay {
    background: rgba(0, 0, 0, 0.60);
    position: fixed;
    inset: 0;
    z-index: 888;
    opacity: 0;
    transition: opacity ease 0.3s;
    pointer-events: none;
}
.custom-modal-upgradelegend-overlay.show,
.custom-modal-upgradesupreme-overlay.show,
.custom-modal-addontema-overlay.show { opacity: 1; pointer-events: all; }
.custom-modal-upgradelegend-overlay.hide,
.custom-modal-upgradesupreme-overlay.hide,
.custom-modal-addontema-overlay.hide { opacity: 0; pointer-events: none; }

.custom-modal-upgradelegend-popup,
.custom-modal-upgradesupreme-popup,
.custom-modal-addontema-popup {
    width: 646px;
    height: 432px;
    flex-shrink: 0;
    border-radius: 15px;
    background: url('../../img/popup-uniplaypoint.png') lightgray 50% / cover no-repeat;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    transition: all ease .3s;
}
.custom-modal-upgradelegend-popup.hide,
.custom-modal-upgradesupreme-popup.hide,
.custom-modal-addontema-popup.hide { display: none; }

.custom-modal-upgradelegend-content,
.custom-modal-upgradesupreme-popup .custom-modal-upgradesupreme-content,
.custom-modal-addontema-popup .custom-modal-addontema-content {
    display: flex;
    width: 442px;
    flex-direction: column;
    align-items: center;
    gap: 36px;
    position: relative;
}
.custom-modal-upgradelegend-footer,
.custom-modal-upgradesupreme-popup .custom-modal-upgradesupreme-footer,
.custom-modal-addontema-popup .custom-modal-addontema-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    align-self: stretch;
}
.custom-modal-upgradelegend-popup img,
.custom-modal-upgradesupreme-popup img,
.custom-modal-addontema-popup img { width: 100px; height: 100px; }
.custom-modal-upgradelegend-popup h3,
.custom-modal-upgradesupreme-popup h3,
.custom-modal-addontema-popup h3 {
    color: #EE8103;
    text-align: center;
    font-size: 32px;
    font-weight: 600;
    line-height: 23px;
    align-self: stretch;
    margin: 0;
}
.custom-modal-upgradelegend-popup p,
.custom-modal-upgradesupreme-popup p,
.custom-modal-addontema-popup p {
    align-self: stretch;
    color: #393939;
    text-align: center;
    font-size: 18px;
    line-height: 28px;
    margin: 0;
}
.custom-modal-upgradelegend-popup .actions-button { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.custom-modal-upgradesupreme-popup .actions-button,
.custom-modal-addontema-popup .actions-button { display: flex; flex-direction: row; align-items: center; gap: 6px; }
.custom-modal-upgradelegend-popup .actions-button a.primary-act,
.custom-modal-upgradesupreme-popup .actions-button a.primary-act,
.custom-modal-addontema-popup .actions-button a.primary-act {
    display: flex;
    padding: 12px 18px;
    justify-content: center;
    align-items: center;
    border-radius: 42px;
    background: #EE8103;
    color: #fff;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    line-height: 21px;
    text-decoration: none !important;
    transition: all ease .3s;
}
.custom-modal-upgradelegend-popup .actions-button a.primary-act:hover,
.custom-modal-upgradesupreme-popup .actions-button a.primary-act:hover,
.custom-modal-addontema-popup .actions-button a.primary-act:hover { background: #d87a0c; }
.custom-modal-upgradelegend-popup .actions-button a.secondary-act {
    display: flex;
    width: 140px;
    padding: 12px 18px;
    justify-content: center;
    align-items: center;
    color: #717070;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    line-height: 21px;
    text-decoration: none !important;
}
.custom-modal-upgradelegend-popup .actions-button a.secondary-act:hover { color: #414040; }
.custom-modal-upgradesupreme-popup .actions-button a.secondary-act,
.custom-modal-addontema-popup .actions-button a.secondary-act {
    display: flex;
    width: 140px;
    padding: 12px 18px;
    justify-content: center;
    align-items: center;
    border: 1px solid #EE8103;
    background: #fff;
    border-radius: 42px;
    color: #EE8103;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    line-height: 21px;
    text-decoration: none !important;
}
.custom-modal-upgradesupreme-popup .actions-button a.secondary-act:hover,
.custom-modal-addontema-popup .actions-button a.secondary-act:hover {
    border-color: #C46415;
    color: #C46415;
    background: #FFF6EF;
}
.custom-modal-upgradelegend-popup .outside-right-close,
.custom-modal-upgradesupreme-popup .outside-right-close,
.custom-modal-addontema-popup .outside-right-close {
    display: flex;
    width: 32px;
    height: 32px;
    padding: 8px;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 20px;
    right: 20px;
    border-radius: 4px;
    opacity: 0.5;
    background: #fff;
    text-decoration: none;
    color: #212529;
    font-size: 16px;
    transition: all ease .3s;
    z-index: 999;
}
.custom-modal-upgradelegend-popup .outside-right-close:hover,
.custom-modal-upgradesupreme-popup .outside-right-close:hover,
.custom-modal-addontema-popup .outside-right-close:hover { opacity: 1; }

/* 5.9 — Header: burger dropdown + profile popup */
.header-uniplay .header-content .menu-right { position: relative; }

.frame-menu-burgerbar {
    position: relative;
    float: right;
    /* Extend layout box downward so moving from icon to dropdown
       items doesn't fire mouseleave on the parent */
    padding-bottom: 35px;
    margin-bottom: -35px;
    z-index: 2000;
}
.frame-menu-burgerbar .burgerbar-menu-frame-outer {
    position: absolute;
    right: -40px;
    top: 100%;
    margin-top: 4px;
    z-index: 3000 !important;
    background: transparent !important;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s ease, visibility .15s ease;
}
.frame-menu-burgerbar:hover .burgerbar-menu-frame-outer,
.frame-menu-burgerbar .burgerbar-menu-frame-outer.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.frame-menu-burgerbar .burgerbar-menu-frame {
    background: white;
    border-radius: 0.3em;
    box-sizing: border-box;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 14px 0 #223b502b;
    min-width: 220px;
}
.frame-menu-burgerbar .burgerbar-menu-frame .burgerbar-menu-inner {
    list-style: none;
    padding: 0;
    margin: 0;
}
.frame-menu-burgerbar .burgerbar-menu-frame .burgerbar-menu-inner li a {
    padding: 10px 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    text-decoration: none;
    color: black;
    font-weight: 600;
    font-size: 14px;
    border-bottom: 1px solid #e7e7e7;
    transition: all .3s ease-out;
}
.frame-menu-burgerbar .burgerbar-menu-frame .burgerbar-menu-inner li:last-child a { border-bottom: none; }
.frame-menu-burgerbar .burgerbar-menu-frame .burgerbar-menu-inner li a i { margin-right: 10px; }
.frame-menu-burgerbar .burgerbar-menu-frame .burgerbar-menu-inner li a:hover { background: #f7f7f7; }
/* Hide mobile-only elements from desktop dropdown */
@media (min-width: 769px) {
    .frame-menu-burgerbar .burgerbar-menu-frame .burgerbar-menu-inner li.bbar-panel-sep,
    .frame-menu-burgerbar .burgerbar-menu-frame .burgerbar-menu-inner li.bbar-group-wrap,
    .frame-menu-burgerbar .burgerbar-menu-frame .burgerbar-menu-inner li.bbar-panel-logout { display: none; }
    .bbar-drawer-close-btn { display: none; }
}

#nav-icon1,
#nav-icon2,
#nav-icon3,
#nav-icon4 {
    width: 23px;
    height: 19px;
    position: relative;
    margin: 5px auto 0;
    transform: rotate(0deg);
    transition: .5s ease-in-out;
    cursor: pointer;
}

#nav-icon4.after-login {
    margin-top: 11px;
}

#nav-icon1 span,
#nav-icon3 span,
#nav-icon4 span {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    background: var(--v3-primary);
    border-radius: 9px;
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: .25s ease-in-out;
}

#nav-icon4 span:nth-child(1) {
    top: 1px;
    transform-origin: left center;
}

#nav-icon4 span:nth-child(2) {
    top: 8px;
    transform-origin: left center;
}

#nav-icon4 span:nth-child(3) {
    top: 15px;
    transform-origin: left center;
}

#nav-icon4.open span:nth-child(1) {
    top: 0;
    left: 4px;
    transform: rotate(45deg);
}

#nav-icon4.open span:nth-child(2) {
    width: 0;
    opacity: 0;
}

#nav-icon4.open span:nth-child(3) {
    top: 16px;
    left: 4px;
    transform: rotate(-45deg);
}

.open-profile-after-login { position: relative; }

.overlay-frame-info-profile {
    position: fixed;
    background: transparent;
    left: 0;
    right: 0;
    top: 70px;
    height: 100vh;
    z-index: 1000;
    display: none;
    pointer-events: none;
}

.frame-info-profile {
    position: absolute;
    background: white;
    border-radius: 0.3em;
    right: -73px;
    top: 37px;
    box-shadow: 0 0 14px 0 #223b502b;
    width: 380px;
    z-index: 3000 !important;
    display: none;
}
.frame-info-profile.show { display: block; }
.frame-info-profile .header-new {
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: 1px solid #ededed;
    padding: 20px;
    padding-bottom: 15px;
    margin-bottom: 15px;
}
.frame-info-profile .header-new img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 12px;
}
.frame-info-profile .header-new .no-photo {
    width: 62px;
    height: 60px;
    border-radius: 50%;
    margin-right: 12px;
    background: #e6700f;
    text-align: center;
    line-height: 58px;
    font-weight: 600;
    font-size: 31px;
    color: white;
}
.frame-info-profile .header-new .right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 200px;
    word-break: break-word;
}
.frame-info-profile .header-new .right b { color: #272727; font-size: 16px; font-weight: 600; }
.frame-info-profile .header-new .right small { color: #898989; font-size: 12px; }

.frame-info-profile .content-info-profile {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    padding: 0 20px 10px 20px;
}
.frame-info-profile .content-info-profile .left {
    padding-right: 20px;
    border-right: 1px solid #ebebeb;
    margin-right: 20px;
    flex: 1;
}
.frame-info-profile .content-info-profile .left .secondary-heading {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    border-bottom: 1px solid #ebebeb;
    padding-bottom: 15px;
    margin-bottom: 15px;
}
.frame-info-profile .content-info-profile .left .secondary-heading .head-title {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.frame-info-profile .content-info-profile .left .secondary-heading .head-title img { width: 21px; height: 21px; margin-right: 10px; }
.frame-info-profile .content-info-profile .left .secondary-heading .head-title b { color: #505050; font-size: 12px; font-weight: 500; }
.frame-info-profile .content-info-profile .left .secondary-heading .right { text-align: right; flex: 1; }
.frame-info-profile .content-info-profile .left .secondary-heading .right p { color: #393939; font-size: 14px; margin-bottom: 0; }
.frame-info-profile .content-info-profile .left .menu-list-heading-left ul { list-style: none; margin: 0; padding: 0; }
.frame-info-profile .content-info-profile .left .menu-list-heading-left ul li.divider {
    width: 100%; height: 2px; overflow: hidden;
    background-color: #ebebeb; border-bottom: 1px solid #fff;
    line-height: 0; margin: 5px 0;
}
.frame-info-profile .content-info-profile .left .menu-list-heading-left ul li a,
.frame-info-profile .content-info-profile .right .menu-list-heading-right ul li a,
.frame-info-profile .content-info-profile .right .area-action-bottom a {
    text-decoration: none; font-size: 12px; color: #515151; display: block; padding: 5px;
}
.frame-info-profile .content-info-profile .left .menu-list-heading-left ul li.active a,
.frame-info-profile .content-info-profile .left .menu-list-heading-left ul li a:hover,
.frame-info-profile .content-info-profile .right .menu-list-heading-right ul li.active a,
.frame-info-profile .content-info-profile .right .menu-list-heading-right ul li a:hover { background: #f0f0f0; border-radius: 0.5em; }
.frame-info-profile .content-info-profile .right .menu-list-heading-right ul { list-style: none; padding: 0; margin: 0; }
.frame-info-profile .content-info-profile .right .area-action-bottom a i { font-size: 9px; margin-left: 5px; }
.frame-info-profile .content-info-profile .right .area-action-bottom a:hover { color: #000; }

/* 5.10 — Footer */
.sub-footer {
    background: var(--v3-primary-dark);
    color: #fff;
    cursor: default;
    position: relative;
}
.sub-footer .content {
    width: 1100px;
    max-width: 100%;
    padding: 20px 20px 30px;
    margin: 0 auto;
    box-sizing: border-box;
}
.sub-footer .content .title {
    display: block;
    margin: 10px 0 15px;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
}
.sub-footer .content .subtitle {
    display: block;
    margin-bottom: 30px;
    color: rgba(255, 255, 255, .82);
    font-size: 16px;
    line-height: 26px;
}
.sub-footer .content .uniplay-featured {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
    align-items: start;
}
.sub-footer .content .uniplay-featured .child-featured {
    display: flex;
    gap: 16px;
    min-width: 0;
}
.sub-footer .content .uniplay-featured .child-featured .icon {
    flex: 0 0 32px;
}
.sub-footer .content .uniplay-featured .child-featured .icon img,
.sub-footer .content .uniplay-featured .child-featured .icon svg {
    width: 32px;
    height: 32px;
    object-fit: contain;
}
.sub-footer .content .uniplay-featured .child-featured .icon img {
    filter: brightness(50%) invert(1) sepia(1);
}
.sub-footer .content .uniplay-featured .child-featured .desc b {
    display: block;
    margin-bottom: 5px;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
}
.sub-footer .content .uniplay-featured .child-featured .desc p {
    margin: 0;
    color: rgba(255, 255, 255, .74);
    font-size: 14px;
    line-height: 1.45;
}
.footer {
    background: #fff;
    cursor: default;
    position: relative;
}
.footer-for-cd {
    background: #fff;
    box-shadow: 0 1px 10px #617d901c;
}
.footer .content {
    width: 1100px;
    max-width: 100%;
    padding: 40px 15px 30px;
    margin: 0 auto;
    box-sizing: border-box;
}
.footer .content b {
    display: block;
    margin-bottom: 20px;
    color: #343434;
    font-size: 16px;
    font-weight: 700;
}
.footer .content .partner-uniplay {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 15px;
    margin-bottom: 30px;
}
.footer .content .partner-uniplay img {
    display: block;
    max-height: 30px;
    object-fit: contain;
}
.partner-uniplay a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}
.partner-uniplay a img {
    padding: 5px;
    transition: background .15s ease;
}
img.dot-tiga:hover {
    background: #e4e4e4;
    border-radius: 50px;
}
.sosmed-list-customdomain {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
}
.sosmed-list-customdomain a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}
.sosmed-list-customdomain a img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.footer .content .copyright-area b {
    font-size: 16px;
    color: #343434;
}
.footer .content .sitemap-link {
    list-style: none;
    padding: 0;
    margin: -10px 0 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 35px;
}
.footer .content .sitemap-link li {
    margin: 0;
}
.footer .content .sitemap-link li a {
    color: #565656;
    font-size: 15px;
    text-decoration: none;
}
.footer .content .sitemap-link li a:hover {
    color: #000;
    text-decoration: none;
}
.footer-no-content {
    width: 900px;
    max-width: calc(100% - 32px);
    margin: 20px auto 50px;
    display: block;
    position: relative;
    text-align: center;
}
.footer-no-content b {
    display: block;
    margin-bottom: 10px;
    color: #c5c5c5;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
}
.footer-no-content b[style] {
    margin-bottom: 8px;
}
.footer-no-content ul,
.footer-no-content .menu-list {
    width: 77%;
    list-style: none;
    padding: 0;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 35px;
}
.footer-no-content ul li,
.footer-no-content .menu-list li {
    margin: 0;
}
.footer-no-content ul li a,
.footer-no-content .menu-list li a {
    color: #565656;
    font-size: 15px;
    text-decoration: none;
}
.footer-no-content ul li a:hover,
.footer-no-content .menu-list li a:hover {
    color: #000;
    text-decoration: none;
}
.overlay-mobile-menu {
    display: none !important;
    pointer-events: none !important;
}

/* 5.10 — Misc panel utilities */
.btn-change-method {
    display: flex;
    padding: 8px 12px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 5px;
    border: 1px solid #C46415;
    background: #fff;
    color: rgba(230, 112, 15, 0.99);
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
}
.btn-change-method:hover { background: #FFF6EF; color: #C46415; }

/* 5.10 — Responsive panel (mobile-first) */
@media (max-width: 1140px) {
    .header-uniplay .header-content { width: 100%; padding: 15px 20px; }
    .dashboard-member { width: 100%; padding: 0 16px; box-sizing: border-box; }
    .layout-last p {display: none;}
    #nav-icon4.after-login { margin-top: 5px; }
}

@media (max-width: 768px) {
    .header-uniplay {
        position: sticky;
        top: 0;
        z-index: 1000;
    }
    .header-uniplay .header-content {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 10px;
        min-height: 56px;
        padding: 10px 14px;
    }
    .header-uniplay .header-content .logo {
        width: 128px;
        margin-right: auto;
        flex: 0 0 auto;
    }
    .header-uniplay .header-content .menu-right {
        width: auto;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 14px;
    }
    .header-uniplay .header-content .menu-right .open-search-mobile,
    .header-uniplay .header-content .menu-right .menu-burgerbar {
        float: none;
        margin: 0;
        width: 24px;
        height: 28px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--v3-primary);
        font-size: 24px;
        line-height: 1;
        text-decoration: none;
    }
    .header-uniplay .header-content .menu-right .open-search-mobile:hover,
    .header-uniplay .header-content .menu-right .open-search-mobile:focus,
    .header-uniplay .header-content .menu-right .open-search-mobile:active {
        color: var(--v3-primary);
        text-decoration: none;
    }
    .header-uniplay .header-content .menu-right .open-search-mobile {
        order: 1;
    }
    .header-uniplay .header-content .menu-right .area-profile-drawwer {
        order: 2;
        display: flex;
        align-items: center;
        flex: 0 0 auto;
    }
    .header-uniplay .header-content .menu-right .frame-menu-burgerbar {
        order: 3;
        flex: 0 0 auto;
    }
    .open-profile-after-login {
        float: none;
        margin: 0;
        padding: 0;
        background: transparent;
        max-width: none;
    }
    .open-profile-after-login:hover,
    .open-profile-after-login.active {
        background: transparent;
    }
    .open-profile-after-login span {
        display: none;
    }
    .open-profile-after-login img,
    .open-profile-after-login .no-photo {
        width: 27px;
        height: 27px;
        margin: 0;
        line-height: 27px;
        font-size: 14px;
        flex: 0 0 27px;
    }
    .header-uniplay .header-content .parent-frame-search-area {
        display: none;
        position: fixed;
        z-index: 2000;
        background: #fff;
        top: 0;
        left: 0;
        right: 0;
        height: 60px;
    }
    .header-uniplay .header-content .parent-frame-search-area .frame-search-area {
        position: relative;
        z-index: 2001;
        background: #fff;
        height: 60px;
        display: flex;
        align-items: center;
        padding: 0 20px;
    }
    .header-uniplay .header-content .parent-frame-search-area .search-area {
        display: block;
        width: calc(100% - 42px);
        flex: 1;
        border-color: #a3a3a3;
    }
    .header-uniplay .header-content .parent-frame-search-area .close-mobile {
        display: block;
        margin-left: 10px;
        flex-shrink: 0;
    }
    .header-uniplay .header-content .parent-frame-search-area .close-mobile a {
        color: var(--v3-primary);
        font-size: 24px;
    }
    .header-uniplay .header-content .parent-frame-search-area .result-quick-search {
        left: 10px;
        right: 10px;
        margin-top: 10px;
        max-height: calc(100vh - 80px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .header-uniplay .header-content .parent-frame-search-area .result-quick-search ul li a {
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
    }
    .header-uniplay .header-content .parent-frame-search-area .result-quick-search ul li .right b {
        max-width: calc(100vw - 110px);
    }
    .frame-menu-burgerbar {
        position: static;
        padding-bottom: 0;
        margin-bottom: 0;
        z-index: auto;
    }
    .frame-menu-burgerbar:hover .burgerbar-menu-frame-outer:not(.show) {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
    .frame-menu-burgerbar .burgerbar-menu-frame-outer {
        position: fixed;
        top: 0;
        left: auto;
        right: 0;
        z-index: 5001 !important;
        width: min(82vw, 320px);
        height: 100vh;
        margin-top: 0;
        padding: 0;
        opacity: 1;
        visibility: visible;
        pointer-events: none;
        transform: translateX(100%);
        transition: transform .24s ease;
    }
    .frame-menu-burgerbar .burgerbar-menu-frame-outer.show {
        pointer-events: auto;
        transform: translateX(0);
    }
    .frame-menu-burgerbar .burgerbar-menu-frame {
        height: 100%;
        background: #fff;
        border: none;
        border-radius: 0;
        border-top-left-radius: 14px;
        border-bottom-left-radius: 14px;
        box-shadow: -16px 0 40px rgba(15, 23, 42, .18);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        pointer-events: auto;
    }
    .frame-menu-burgerbar .burgerbar-menu-frame .burgerbar-menu-inner {
        background: #fff;
        border-radius: 0;
        padding: 70px 0 18px;
    }
    .bbar-drawer-close-btn {
        position: absolute;
        top: 16px;
        right: 18px;
        z-index: 10;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: #f1f1f1;
        cursor: pointer;
        font-size: 16px;
        color: #444;
    }
    .bbar-drawer-close-btn:hover {
        background: #e0e0e0;
    }
    .frame-menu-burgerbar .burgerbar-menu-frame .burgerbar-menu-inner li a {
        min-height: 56px;
        padding: 12px 22px;
        font-size: 14px;
    }
    /* ── Panel accordion groups in mobile burgerbar drawer ── */

    /* Thin separator above panel groups */
    .frame-menu-burgerbar .burgerbar-menu-frame .burgerbar-menu-inner li.bbar-panel-sep {
        height: 1px;
        background: #e7e7e7;
        margin: 0;
        padding: 0;
        pointer-events: none;
    }

    /* Group header button — same look as existing li a items */
    .frame-menu-burgerbar .burgerbar-menu-frame .burgerbar-menu-inner li.bbar-group-wrap { list-style: none; }
    .frame-menu-burgerbar .burgerbar-menu-frame .burgerbar-menu-inner .bbar-group-btn {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        padding: 10px 20px;
        background: none;
        border: none;
        border-bottom: 1px solid #e7e7e7;
        cursor: pointer;
        font-size: 14px;
        font-weight: 600;
        color: black;
        text-align: left;
        text-decoration: none;
        transition: all .3s ease-out;
        -webkit-tap-highlight-color: transparent;
        box-sizing: border-box;
    }
    .frame-menu-burgerbar .burgerbar-menu-frame .burgerbar-menu-inner .bbar-group-btn:hover { background: #f7f7f7; }
    .frame-menu-burgerbar .burgerbar-menu-frame .burgerbar-menu-inner .bbar-group-btn > i:first-child { margin-right: 10px; }
    .frame-menu-burgerbar .burgerbar-menu-frame .burgerbar-menu-inner .bbar-group-btn > span { flex: 1; }
    .frame-menu-burgerbar .burgerbar-menu-frame .burgerbar-menu-inner .bbar-chevron {
        font-size: 11px;
        color: #999;
        transition: transform .22s ease;
        margin-left: auto;
    }
    .frame-menu-burgerbar .burgerbar-menu-frame .burgerbar-menu-inner li.bbar-group-wrap.is-open .bbar-chevron {
        transform: rotate(180deg);
    }

    /* Sub-list */
    .frame-menu-burgerbar .burgerbar-menu-frame .burgerbar-menu-inner .bbar-sub-list {
        display: none;
        list-style: none;
        padding: 0;
        margin: 0;
        background: #fafafa;
    }
    .frame-menu-burgerbar .burgerbar-menu-frame .burgerbar-menu-inner .bbar-sub-list li a {
        padding: 9px 20px 9px 38px;
        display: flex;
        flex-direction: row;
        align-items: center;
        text-decoration: none;
        color: #333;
        font-weight: 500;
        font-size: 13px;
        border-bottom: 1px solid #efefef;
        transition: all .3s ease-out;
    }
    .frame-menu-burgerbar .burgerbar-menu-frame .burgerbar-menu-inner .bbar-sub-list li:last-child a { border-bottom: none; }
    .frame-menu-burgerbar .burgerbar-menu-frame .burgerbar-menu-inner .bbar-sub-list li a i { margin-right: 10px; color: #888; font-size: 13px; }
    .frame-menu-burgerbar .burgerbar-menu-frame .burgerbar-menu-inner .bbar-sub-list li a:hover { background: #f0f0f0; }

    /* Logout item */
    .frame-menu-burgerbar .burgerbar-menu-frame .burgerbar-menu-inner li.bbar-panel-logout > a {
        color: #B42318;
    }
    .frame-menu-burgerbar .burgerbar-menu-frame .burgerbar-menu-inner li.bbar-panel-logout > a i { color: #B42318; }

    /* Mobile overrides — match existing li a mobile sizing */
    @media (max-width: 768px) {
        .frame-menu-burgerbar .burgerbar-menu-frame .burgerbar-menu-inner .bbar-group-btn {
            min-height: 56px;
            padding: 12px 22px;
        }
        .frame-menu-burgerbar .burgerbar-menu-frame .burgerbar-menu-inner .bbar-sub-list li a {
            min-height: 48px;
            padding: 10px 22px 10px 42px;
            font-size: 13px;
        }
        .frame-menu-burgerbar .burgerbar-menu-frame .burgerbar-menu-inner li.bbar-panel-logout > a {
            min-height: 56px;
            padding: 12px 22px;
        }
        /* Hide nav items that are desktop-only when inside mobile drawer */
        .frame-menu-burgerbar .burgerbar-menu-frame .burgerbar-menu-inner li.bbar-nav-desktop-only {
            display: none !important;
        }
    }
    .overlay-frame-info-profile {
        top: 0;
        height: 100vh;
        background: rgba(15, 23, 42, .28);
        backdrop-filter: none;
        z-index: 90;
        pointer-events: auto;
    }
    .frame-info-profile {
        position: fixed;
        top: 64px;
        left: 12px;
        right: 12px;
        width: auto;
        max-height: calc(100vh - 84px);
        border-radius: 12px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        z-index: 5002 !important;
    }
    .frame-info-profile .header-new {
        padding: 16px;
        margin-bottom: 0;
    }
    .frame-info-profile .header-new img,
    .frame-info-profile .header-new .no-photo {
        width: 44px;
        height: 44px;
        line-height: 44px;
        font-size: 22px;
    }
    .frame-info-profile .header-new .right {
        max-width: calc(100vw - 112px);
    }
    .frame-info-profile .header-new .right b {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .frame-info-profile .content-info-profile {
        flex-direction: column;
        gap: 12px;
        padding: 14px 16px 16px;
    }
    .frame-info-profile .content-info-profile .left {
        padding-right: 0;
        margin-right: 0;
        border-right: 0;
        border-bottom: 1px solid #ebebeb;
        padding-bottom: 12px;
    }
    .sub-footer .content,
    .footer .content {
        width: 100%;
        padding-left: 16px;
        padding-right: 16px;
    }
    .sub-footer .content .title {
        font-size: 18px;
        line-height: 1.35;
    }
    .sub-footer .content .subtitle {
        font-size: 14px;
        line-height: 1.55;
    }
    .sub-footer .content .uniplay-featured {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .sub-footer .content .uniplay-featured .child-featured .desc b {
        font-size: 15px;
    }
    .sub-footer .content .uniplay-featured .child-featured .desc p {
        font-size: 13px;
    }
    .footer .content .partner-uniplay {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        align-items: center;
    }
    .footer .content .partner-uniplay img {
        max-width: 100%;
        margin: 0 auto;
    }
    .footer .content .sitemap-link {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .footer .content .sitemap-link li a {
        font-size: 13px;
    }
    .footer-no-content {
        width: 90%;
        max-width: 90%;
        margin-top: 20px;
        margin-bottom: 50px;
    }
    .footer-no-content b {
        font-size: 13px;
        line-height: 1.4;
    }
    .footer-no-content ul,
    .footer-no-content .menu-list {
        width: 100%;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 8px;
        text-align: center;
    }
    .footer-no-content ul li a,
    .footer-no-content .menu-list li a {
        font-size: 13px;
    }
    .overview-frame {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .overview-frame > .v3-chart-wrap {
        order: 1;
    }
    .overview-frame > .v3-stat-grid--3col {
        order: 2;
    }
    .overview-frame > .v3-stat-grid:not(.v3-stat-grid--3col) {
        order: 3;
    }
    .dashboard-member .right-content {
        background: #fff;
        border-radius: 10px;
        box-shadow: none;
    }
    .dashboard-member .dashboard-right-wrapper {
        background: #f3f6f8;
        padding: 12px;
    }

    .dashboard-member .right-content .heading.mb-3 {
        margin-bottom: 0 !important;
    }

    .mutation-page-uniplay .riwayat-transaksi {
        margin-top: 0 !important;
    }

    .dashboard-member .right-content .v3-page-header {
        background: #fff;
        padding: 0 16px;
    }
    .dashboard-right-wrapper > .v3-alert {
        margin: 12px 0 !important;
        padding: 12px !important;
    }
    .dashboard-member .right-content .v3-page-header {
        align-items: center;
    }
    .dashboard-member .right-content .v3-page-header .v3-section-title {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: var(--v3-text);
        font-size: 20px;
        font-weight: 400;
        line-height: 1.2;
    }
    .dashboard-member .toolbar-dashboard {
        display: none !important;
    }
    .dashboard-member .right-content .v3-page-header .v3-overview-back {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        color: #111;
        font-size: 16px;
        text-decoration: none;
        flex: 0 0 22px;
    }
    .dashboard-member .right-content .v3-page-header .v3-overview-back:hover,
    .dashboard-member .right-content .v3-page-header .v3-overview-back:focus,
    .dashboard-member .right-content .v3-page-header .v3-overview-back:active {
        color: #111;
        text-decoration: none;
    }
    .dashboard-member .right-content .v3-date-btn {
        min-width: 156px;
        justify-content: center;
        padding: 10px 14px;
        border-color: #dedede;
        border-radius: 6px;
        color: #555;
        font-size: 12px;
        font-weight: 600;
    }
    .dashboard-member .right-content .v3-date-btn i {
        color: #333;
    }
    .overview-frame > .v3-chart-wrap {
        border: 0;
        border-radius: 8px;
        padding: 14px 12px 16px;
        background: #fff;
        margin-bottom: 0 !important;
        min-height: 220px;
    }
    .overview-frame > .v3-chart-wrap canvas {
        width: 100% !important;
        height: 190px !important;
        max-height: 190px;
    }
    .overview-frame > .v3-stat-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 0 !important;
    }
    .overview-frame > .v3-stat-grid--3col {
        gap: 12px;
    }
    .overview-frame > .v3-stat-grid:not(.v3-stat-grid--3col) .v3-stat-card:nth-child(3) {
        order: 1;
    }
    .overview-frame > .v3-stat-grid:not(.v3-stat-grid--3col) .v3-stat-card:nth-child(1) {
        order: 2;
    }
    .overview-frame > .v3-stat-grid:not(.v3-stat-grid--3col) .v3-stat-card:nth-child(2) {
        order: 3;
    }
    .overview-frame > .v3-stat-grid:not(.v3-stat-grid--3col) .v3-stat-card:nth-child(4) {
        order: 4;
    }
    .overview-frame .v3-stat-card {
        min-height: 94px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 18px 14px;
        border-color: #dfe5ea;
        border-radius: 8px;
        box-shadow: 0 4px 0 #e9eef2;
        text-align: center;
    }
    .overview-frame .v3-stat-card__value {
        margin-bottom: 8px;
        color: var(--v3-primary);
        font-size: 22px;
        line-height: 1.1;
        word-break: normal;
    }
    .overview-frame .v3-stat-card__label {
        justify-content: center;
        color: #777;
        font-size: 14px;
        line-height: 1.3;
    }
    .overview-frame .v3-stat-card__label img {
        width: 16px;
        height: 16px;
    }
    .dashboard-member {
        flex-direction: column;
        margin-top: 16px;
        margin-bottom: 16px;
        gap: 0;
    }
    .dashboard-member .left-sidebar { display: none !important; }
    .dashboard-member .sidebarleft { display: none !important; }
    .dashboard-member .dashboard-right-wrapper { width: 100%; background: #f3f6f8; padding: 0 12px 12px; }
    .dashboard-member .right-content { min-height: unset; padding: 16px; background: #fff; border-radius: 10px; box-shadow: none; }
    .custom-modal-upgradelegend-popup,
    .custom-modal-upgradesupreme-popup,
    .custom-modal-addontema-popup { width: 94vw; height: auto; padding: 24px 16px; }
    .custom-modal-upgradelegend-content,
    .custom-modal-upgradesupreme-popup .custom-modal-upgradesupreme-content,
    .custom-modal-addontema-popup .custom-modal-addontema-content { width: 100%; gap: 20px; }
    .v3-search-bar { flex-direction: column; gap: 6px; }
    .v3-search-input-wrap { width: 100%; }
    .v3-search-btn { width: 100%; }
}


.swal-custom-confirm-delete {
    display: flex;
    padding: 12px 40px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    background: var(--v3-primary);
    color: #fff;
    text-align: center;
    font-family: var(--v3-font);
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    border: none;
    margin: .3125em;
    cursor: pointer;
}
.swal-custom-confirm-delete:hover {
    background-image: linear-gradient(rgba(0,0,0,.1), rgba(0,0,0,.1));
}

.swal-custom-cancel {
    display: flex;
    padding: 12px 40px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    border: 1px solid #7B7B7B;
    color: #7B7B7B;
    text-align: center;
    font-family: var(--v3-font);
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    margin: .3125em;
    background: #fff;
    cursor: pointer;
}
.swal-custom-cancel:hover { background: #cccccc30; }

/* MultiSelect dropdown inside Bootstrap modal must sit above the modal (z-index 1050) */
#modalCouponFormMaker .multi-select-options {
    z-index: 1100 !important;
}

/* Modal footer action buttons (front.css has these; skipped in v3_panel_mode) */
.actions-multi-canvas-footer {
    display: flex;
    align-items: center;
    gap: 8px;
}
.actions-multi-canvas-footer .btn-reset-outline {
    border: 1px solid transparent;
    background: #fff;
    color: #a6a6a6;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    padding: 12px 24px;
    text-align: center;
    border-radius: 5px;
    margin-bottom: 0;
    transition: all .2s ease-in-out;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.actions-multi-canvas-footer .btn-reset-outline:hover {
    border-color: #555;
    color: #555;
    text-decoration: none;
}
.actions-multi-canvas-footer .btn-reset-outline.disabled {
    pointer-events: none;
    color: #d9d9d9;
}
.actions-multi-canvas-footer .btn-save-outline {
    border: 1px solid var(--v3-primary-dark);
    background: var(--v3-primary);
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 24px;
    text-align: center;
    border-radius: 5px;
    margin-bottom: 0;
    transition: all .2s ease-in-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    width: 100%
}
.actions-multi-canvas-footer .btn-save-outline:hover { background: var(--v3-primary-dark); }
.actions-multi-canvas-footer .btn-save-outline.disabled {
    pointer-events: none;
    background: gray;
    border-color: gray;
    color: #ddd;
}
.w-150p { width: 150px !important; }

/* Toggle switch using primary color (replaces .switch-uniplay for v3 panel) */
.v3-switch {
    position: relative;
    height: 1.5rem;
    width: 3rem;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 9999px;
    background-color: rgba(100, 116, 139, .38);
    transition: background .3s ease;
    flex-shrink: 0;
}
.v3-switch:checked { background-color: var(--v3-primary); }
.v3-switch::before {
    position: absolute;
    content: "";
    left: calc(1.5rem - 1.6rem);
    top: calc(1.5rem - 1.6rem);
    display: block;
    height: 1.6rem;
    width: 1.6rem;
    border: 1px solid rgba(100, 116, 139, .53);
    border-radius: 9999px;
    background: #fff;
    box-shadow: 0 3px 10px rgba(100, 116, 139, .33);
    transition: transform .3s ease;
    cursor: pointer;
}
.v3-switch:checked::before {
    transform: translateX(100%);
    border-color: var(--v3-primary);
}
.v3-switch:disabled { opacity: .5; cursor: not-allowed; }
.v3-switch.loading { pointer-events: none; }

/* ─── Kupon Card (kpc) ────────────────────────────────────── */
.kpc-card {
    background: var(--v3-bg-card);
    border: 1.5px solid var(--v3-border);
    border-radius: var(--v3-radius-lg);
    margin-bottom: 12px;
    overflow: hidden;
}
.kpc-card.is-expired { opacity: .65; background: #fafafa; border-color: #e8e8e8; }

/* Mobile header */
.kpc-mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 14px 0;
}
.kpc-mobile-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}
.kpc-tag-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    background: var(--v3-primary-light);
    border-radius: var(--v3-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--v3-primary);
    font-size: 15px;
}
.kpc-code-text {
    font-size: 15px;
    font-weight: 700;
    color: var(--v3-text);
    letter-spacing: .3px;
}
.kpc-copy-btn {
    color: var(--v3-text-muted);
    font-size: 13px;
    text-decoration: none;
    flex-shrink: 0;
    transition: color .15s;
}
.kpc-copy-btn:hover { color: var(--v3-primary); text-decoration: none; }

/* Status badge */
.kpc-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}
.kpc-status-badge.kpc-active  { background: #e6f9e6; color: #1a7f1a; }
.kpc-status-badge.kpc-inactive { background: #f0f0f0; color: #888; }
.kpc-status-badge.kpc-expired  { background: #fef3f2; color: #b42318; }
.kpc-status-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
    flex-shrink: 0;
}

/* Main body */
.kpc-body {
    display: flex;
    align-items: stretch;
    gap: 12px;
    padding: 12px 14px;
}

/* Discount box */
.kpc-discount-box {
    flex-shrink: 0;
    width: 84px;
    background: var(--v3-primary-light);
    border-radius: var(--v3-radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 6px;
    gap: 3px;
}
.kpc-diskon-label {
    font-size: 9px;
    font-weight: 700;
    color: var(--v3-primary);
    text-transform: uppercase;
    letter-spacing: .5px;
}
.kpc-diskon-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--v3-primary);
    line-height: 1;
}
.kpc-ticket-wrap {
    background: var(--v3-primary);
    color: #fff;
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 14px;
    margin-top: 2px;
}

/* Product info */
.kpc-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}
.kpc-desktop-code {
    display: none;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}
.kpc-category-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--v3-primary-light);
    color: var(--v3-primary);
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 20px;
    width: fit-content;
}
.kpc-product-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--v3-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kpc-meta-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.kpc-expiry, .kpc-usage-desktop, .kpc-usage-mobile {
    font-size: 12px;
    color: var(--v3-text-muted);
    display: flex;
    align-items: center;
}
.kpc-usage-desktop { display: none; }

/* Desktop right column */
.kpc-desktop-right {
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-shrink: 0;
}
.kpc-atur-btn { white-space: nowrap; }
.kpc-status-group {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.kpc-status-group-label {
    font-size: 11px;
    color: var(--v3-text-muted);
}
.kpc-switch-status {
    display: flex;
    align-items: center;
    gap: 7px;
}
.kpc-sw-status-txt {
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}
.kpc-sw-status-txt.kpc-active  { color: #1a7f1a; }
.kpc-sw-status-txt.kpc-inactive { color: var(--v3-text-muted); }
.kpc-sw-status-txt.kpc-expired  { color: #b42318; }

/* Desktop delete icon button */
.kpc-delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border: 1.5px solid var(--v3-border);
    border-radius: var(--v3-radius-sm);
    color: #ccc;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
    flex-shrink: 0;
}
.kpc-delete-btn:hover {
    background: #fff0f0;
    color: #e53e3e;
    border-color: #fca5a5;
    text-decoration: none;
}

/* Divider */
.kpc-divider {
    height: 1px;
    background: var(--v3-border);
    margin: 0 14px;
}

/* Stats row */
.kpc-stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
}

/* Mobile footer actions */
.kpc-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
}
.kpc-atur-btn-mobile { flex: 1; }
.kpc-hapus-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 9px 14px;
    border: 1.5px solid var(--v3-border);
    border-radius: var(--v3-radius);
    color: #e53e3e;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s, border-color .15s;
}
.kpc-hapus-btn:hover {
    background: #fff0f0;
    border-color: #fca5a5;
    color: #c53030;
    text-decoration: none;
}

/* Desktop overrides */
@media (min-width: 768px) {
    .kpc-mobile-header { display: none; }
    .kpc-desktop-code  { display: flex; }
    .kpc-usage-desktop { display: flex; }
    .kpc-desktop-right { display: flex; }
    .kpc-product-name  { white-space: nowrap; }
    .kpc-divider.kpc-m,
    .kpc-stats.kpc-m,
    .kpc-footer.kpc-m  { display: none !important; }
}

.v3-kyc-alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #FEF3F2;
    border-radius: 8px;
    padding: 10px 16px;
    margin: 0 0 12px;
}
.v3-kyc-alert__text { display: flex; align-items: center; color: #B42318; gap: 6px; flex: 1; }
.v3-kyc-alert__link { font-weight: 600; color: #B42318; text-decoration: none; white-space: nowrap; }
.v3-kyc-alert__link:hover { text-decoration: underline; color: #B42318; }

/* Section label (payment method heading) */
.v3-section-label {
    font-size: 16px;
    font-weight: 700;
    color: var(--v3-text);
    margin: 20px 0 10px;
}

/* ── Reload wrapper ─────────────────────────────────────────────────────── */
.v3-reload-wrapper {
    padding: 16px 0;
}

/* Input section */
.v3-reload-input-section {
    margin-bottom: 16px;
}
.v3-reload-input-section > b {
    display: block;
    margin-bottom: 8px;
    color: var(--v3-text);
    font-size: 14px;
}
.v3-reload-input-wrap {
    display: flex;
    align-items: center;
    border: 2px solid var(--v3-border);
    border-radius: var(--v3-radius);
    background: #fff;
    padding: 8px 12px;
    gap: 10px;
    transition: border-color .2s;
}
.v3-reload-input-wrap.active,
.v3-reload-input-wrap:focus-within {
    border-color: var(--v3-primary);
}
.v3-reload-input-wrap img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
}
.v3-reload-input-wrap input {
    border: none;
    outline: none;
    flex: 1;
    font-size: 16px;
    font-weight: 600;
    color: var(--v3-text);
    background: transparent;
}
.v3-reload-input-wrap input::placeholder { color: #bbb; font-weight: 400; }

/* ── Denomination grid ──────────────────────────────────────────────────── */
.v3-reload-denom-grid {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
}
.v3-reload-denom-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    border: 2px solid var(--v3-border);
    border-radius: var(--v3-radius);
    background: #fff;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    text-align: center;
}
.v3-reload-denom-item img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}
.v3-reload-denom-item span {
    font-size: 13px;
    font-weight: 600;
    color: var(--v3-text);
}
.v3-reload-denom-item:hover {
    border-color: var(--v3-primary);
    background: #fff8f5;
}
.v3-reload-denom-item.active {
    border-color: var(--v3-primary);
    background: #fff3ed;
}
.v3-reload-denom-item.active span { color: var(--v3-primary); }

/* Skeleton loading state */
.v3-reload-denom-skeleton {
    height: 80px;
    border-radius: var(--v3-radius);
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: v3SkeletonShimmer 1.4s infinite;
}

/* Load error / empty */
.v3-reload-load-error {
    list-style: none;
    grid-column: 1 / -1;
    text-align: center;
    color: var(--v3-text-muted);
    font-size: 13px;
    padding: 16px 0;
}
.v3-reload-load-error a { color: var(--v3-primary); cursor: pointer; }

/* ── Payment channel categories ─────────────────────────────────────────── */
.v3-payment-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.v3-payment-cat {
    border: 1.5px solid var(--v3-border);
    border-radius: var(--v3-radius);
    background: #fff;
    overflow: hidden;
    transition: border-color .15s;
}
.v3-payment-cat.active { border-color: var(--v3-primary); }

/* Header row: category name + price range */
.v3-payment-cat__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    cursor: pointer;
    gap: 10px;
}
.v3-payment-cat__head-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.v3-payment-cat__head-left img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}
.v3-payment-cat__head-left b {
    font-size: 14px;
    color: var(--v3-text);
}
.v3-payment-cat__head-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.v3-badge-promo {
    background: var(--v3-primary);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    display: none;
}
.v3-price-range {
    font-size: 13px;
    color: var(--v3-text-muted);
}
.v3-tidak-tersedia {
    color: #aaa;
    font-style: italic;
    font-size: 12px;
}

/* Preview row: channel icons + chevron toggle */
.v3-payment-cat__preview {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-top: 1px solid var(--v3-border);
    cursor: pointer;
    flex-wrap: wrap;
}
.v3-payment-cat__preview img {
    height: 22px;
    object-fit: contain;
    max-width: 50px;
}
.v3-payment-cat__toggle {
    margin-left: auto;
    color: var(--v3-text-muted);
    font-size: 13px;
    flex-shrink: 0;
}
.v3-channel-unavail {
    font-size: 12px;
    color: #aaa;
    width: 100%;
}

/* Accordion body: list of individual channels */
.v3-payment-cat__body {
    display: none;
    border-top: 1px solid var(--v3-border);
}
.v3-payment-cat__body ul {
    list-style: none;
    padding: 8px;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 8px;
}
.v3-payment-cat__body li {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 8px;
    border: 1.5px solid var(--v3-border);
    border-radius: var(--v3-radius-sm);
    cursor: pointer;
    text-align: center;
    transition: border-color .15s, background .15s;
    overflow: hidden;
}
.v3-payment-cat__body li:hover { border-color: var(--v3-primary); background: #fff8f5; }
.v3-payment-cat__body li.active { border-color: var(--v3-primary); background: #fff3ed; }
.v3-payment-cat__body li.disabled {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
}
.v3-ch-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.v3-ch-top img { height: 28px; object-fit: contain; max-width: 70px; }
.v3-ch-top b  { font-size: 13px; font-weight: 700; color: var(--v3-text); }
.v3-ch-bottom b { font-size: 11px; color: var(--v3-text-muted); }

/* Promo ribbon — top-right corner tag inside li (position:relative; overflow:hidden) */
.v3-ribbon {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--v3-primary);
    color: #fff;
    font-size: 8px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 0 var(--v3-radius, 6px) 0 5px;
    text-transform: uppercase;
    pointer-events: none;
    letter-spacing: 0.3px;
    line-height: 1.4;
    z-index: 1;
}

/* Promo ribbon for AJAX-loaded payment channel li items.
   front.css is not loaded in v3_panel_mode — this rule covers panel pages.
   On non-panel pages front.css loads after and overrides with its own style. */
.ribbon__content {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--v3-primary, #E5700F);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 0 0.3em 0 0.4em;
    text-transform: uppercase;
    pointer-events: none;
    line-height: 1.4;
    letter-spacing: 0.3px;
    z-index: 1;
}

/* Skeleton for payment cat */
.v3-payment-cat-skeleton {
    height: 58px;
    border-radius: var(--v3-radius);
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: v3SkeletonShimmer 1.4s infinite;
}

@keyframes v3SkeletonShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}


/* ── Toolbar: tabs + search ───────────────────────────────────────────────── */
.v3-tg-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

/* Filter tabs */
.v3-filter-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-shrink: 0;
}
.v3-filter-tabs::-webkit-scrollbar { display: none; }

.v3-filter-tab {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1.5px solid var(--v3-border);
    font-size: 13px;
    font-weight: 500;
    color: var(--v3-text-muted);
    background: #fff;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s;
    text-decoration: none;
}
.v3-filter-tab:hover {
    border-color: var(--v3-primary);
    color: var(--v3-primary);
    text-decoration: none;
}
.v3-filter-tab.active {
    background: var(--v3-primary);
    border-color: var(--v3-primary);
    color: #fff;
}

/* Search bar (reuses v3-search-bar / v3-search-input / v3-search-clear) */
.v3-tg-toolbar .v3-search-bar {
    flex: 1;
    min-width: 160px;
    width: 100%
}
.v3-tg-toolbar .v3-search-input-wrap {
    width: 100%;
}

/* ── Game grid ────────────────────────────────────────────────────────────── */
.v3-game-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Individual game card */
.v3-game-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border: 1.5px solid var(--v3-border);
    border-radius: var(--v3-radius);
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
.v3-game-item:hover {
    border-color: var(--v3-primary);
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

/* Image container — fixed size with skeleton behind */
.v3-game-img-wrap {
    position: relative;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 10px;
    overflow: hidden;
    background: #f0f0f0;
}
.v3-game-img-skel {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: v3SkeletonShimmer 1.4s infinite;
}
.v3-game-img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .25s;
    display: block;
}

/* Info column */
.v3-game-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.v3-game-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--v3-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.v3-game-profit {
    font-size: 12px;
    color: var(--v3-text-muted);
    margin: 0;
}
.v3-game-profit strong { color: var(--v3-primary); }

/* Status badges */
.v3-game-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: .4px;
    align-self: flex-start;
}
.v3-game-badge.success { background: #ECFDF3; color: #027A48; }
.v3-game-badge.danger  { background: #FEF3F2; color: #B42318; }

/* BELI button */
.v3-game-actions { flex-shrink: 0; }
.v3-btn-beli {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 18px;
    border-radius: var(--v3-radius-sm);
    background: var(--v3-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: background .15s, opacity .15s;
    white-space: nowrap;
}
.v3-btn-beli:hover { background: var(--v3-primary-dark, #c85a00); color: #fff; text-decoration: none; }
.v3-btn-beli.disabled {
    background: #ccc;
    cursor: not-allowed;
    pointer-events: none;
}

/* Skeleton card while loading */
.v3-game-skeleton {
    height: 80px;
    border-radius: var(--v3-radius);
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: v3SkeletonShimmer 1.4s infinite;
}

/* Load error / empty */
.v3-game-load-error {
    text-align: center;
    color: var(--v3-text-muted);
    font-size: 13px;
    padding: 24px 0;
    grid-column: 1 / -1;
}
.v3-game-load-error a { color: var(--v3-primary); cursor: pointer; }

/* Empty state */
.v3-game-empty {
    flex-direction: column;
    align-items: center;
    padding: 32px 16px;
    text-align: center;
    color: var(--v3-text-muted);
}
.v3-game-empty img { width: 120px; opacity: .7; margin-bottom: 12px; }
.v3-game-empty h2  { font-size: 18px; color: var(--v3-text); margin-bottom: 6px; }
.v3-game-empty p   { font-size: 14px; }

/* ── Pagination ───────────────────────────────────────────────────────────── */
.v3-tg-pagination {
    margin-top: 16px;
    display: flex;
    justify-content: center;
}
/* Layout container */
.area-topup-members {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    min-height: inherit;
    min-width: 0;
}

/* Left sidebar: game/category list */
.area-topup-members .sidebar-menu {
    background: #e1e7eb;
    flex: 0 0 220px;
    width: 220px;
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow-y: auto;
    align-self: flex-start;
}
.area-topup-members .sidebar-menu::-webkit-scrollbar { width: 4px; }
.area-topup-members .sidebar-menu::-webkit-scrollbar-track { background: transparent; }
.area-topup-members .sidebar-menu::-webkit-scrollbar-thumb { background: #b0bec5; border-radius: 4px; }
.area-topup-members .sidebar-menu { scrollbar-width: thin; scrollbar-color: #b0bec5 transparent; }

.area-topup-members .sidebar-menu .header {
    width: 100%;
    margin-bottom: 30px;
    padding: 30px 30px 0;
}
.area-topup-members .sidebar-menu .header b {
    color: #000;
    font-weight: 600;
    font-size: 20px;
}
.area-topup-members .sidebar-menu ul {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}
.area-topup-members .sidebar-menu ul li a {
    font-size: 15px;
    color: #000;
    text-decoration: none;
    display: block;
    margin: 5px 0 5px 12px;
    padding: 11px 10px 11px 20px;
    transition: all .2s ease-in-out;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.area-topup-members .sidebar-menu ul li a:hover,
.area-topup-members .sidebar-menu ul li a.active {
    background: #fff;
    border-radius: 2em 0 0 2em;
}

/* Product name header at top of content area */
.detil-entitas-title {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0 16px;
    border-bottom: 1px solid var(--v3-border, #E3E8EF);
    margin-bottom: 18px;
}
.detil-entitas-thumb {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}
.detil-entitas-title b {
    font-size: 16px;
    font-weight: 700;
    color: var(--v3-text, #202939);
    line-height: 1.3;
}

/* Right content area */
.area-topup-members .content-topup {
    padding: 30px;
    flex: 0 1 430px;
    width: 430px;
}
.area-topup-members .content-topup.full-width {
    width: 100%;
    flex: 1;
}
.area-topup-members .content-topup .header b,
.area-topup-members .content-topup .header span {
    font-size: 14px;
    font-weight: 600;
}
.area-topup-members .content-topup .subtitle {
    color: #363636;
    font-size: 13px;
    margin-top: 13px;
    margin-bottom: 20px;
}

/* Input row */
.area-topup-members .content-topup .input-area {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
}
.area-topup-members .content-topup .input-area input { outline: 0 !important; }
.area-topup-members .content-topup .input-area i {
    font-size: 17px;
    position: absolute;
    margin-top: -9px;
    margin-left: -10px;
    color: #7f7f7f;
    cursor: pointer;
}
.area-topup-members .content-topup .input-area i:hover { color: var(--v3-primary, #e6700f); }
.area-topup-members .content-topup .input-area .first-input {
    width: 227px;
    border-radius: 7px;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
}
.area-topup-members .content-topup .input-area .mlseparator input { width: 110px; }
.area-topup-members .content-topup select { padding-right: 25px !important; }
.area-topup-members .content-topup .input-area .second-input {
    border-radius: 7px;
    text-align: center;
    appearance: initial;
    padding: 10px;
    width: 110px;
    box-shadow: none !important;
}

/* Error alert inside form */
.area-topup-members .content-topup .error-message-alert {
    width: 100%;
    border: 1px solid #d9a6a6;
    border-radius: 0.5em;
    background: #ffeded;
    padding: 15px;
    margin-top: 20px;
}
.area-topup-members .content-topup .error-message-alert i {
    color: #732c2c;
    font-size: 15px;
    margin-right: 15px;
}
.area-topup-members .content-topup .error-message-alert span,
.area-topup-members .content-topup .error-message-alert span a {
    color: #732d2d;
    font-size: 12px;
    text-decoration: none;
    font-weight: 600;
}

/* Price summary box */
.area-topup-members .content-topup .detil-price {
    border: 1px solid #d9c4a4;
    background: #fffaed;
    padding: 10px 20px;
    margin-top: 20px;
    margin-bottom: 15px;
}
.area-topup-members .content-topup .detil-price .header-detil-price { margin-bottom: 15px; }
.area-topup-members .content-topup .detil-price .header-detil-price b {
    font-size: 14px;
    color: #5c3a0d;
}
.area-topup-members .content-topup .detil-price .price-detil { width: 100%; }
.area-topup-members .content-topup .detil-price .price-detil tr th {
    text-align: right;
    font-weight: 600;
    color: #272727;
    font-size: 14px;
    padding: 5px 0;
}
.area-topup-members .content-topup .detil-price .price-detil tr td {
    text-align: left;
    font-size: 14px;
    color: #313131;
    padding: 5px 0;
}
.area-topup-members .content-topup .detil-price hr {
    background: #d9c4a4;
    height: 2px;
    margin: 10px 0;
}
.area-topup-members .content-topup .footer-action .btn-submit {
    border: 1px solid #c46415;
    background: var(--v3-primary, #e6700f);
    color: #fff;
    font-size: 16px;
    text-align: center;
    font-weight: bold;
    width: 100%;
    display: block;
    border-radius: 0.3em;
    padding: 12px;
    transition: all .2s ease-in-out;
    cursor: pointer;
}
.area-topup-members .content-topup .footer-action .btn-submit:hover { background: #c25c08; }
.area-topup-members .content-topup .footer-action .btn-submit:disabled {
    border: none;
    background: #9ca3af;
}

/* ── Denom product grid ───────────────────────────────────────────────────── */
.list-denom {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    align-content: baseline;
    gap: 15px;
}
.list-denom li,
.list-denom .list-denom-frame {
    display: flex;
    height: 94px;
    padding: 12px;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    flex: 1 0 0;
    border-radius: 8px;
    border: 1px solid var(--v3-border, #D9DFE2);
    background: #fff;
    cursor: pointer;
    transition: all ease .2s;
}
.list-denom li b,
.list-denom .list-denom-frame b {
    color: #1D1C23;
    font-size: 15px;
    font-weight: 600;
    line-height: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.list-denom li .pricing-icon {
    display: flex;
    padding-top: 2px;
    justify-content: space-between;
    align-items: flex-end;
    align-self: stretch;
}
.list-denom li .pricing-icon i {
    color: #E9E9E9;
    font-size: 18px;
    padding-bottom: 4px;
}
.list-denom li .pricing-icon .pricing-detil {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.list-denom li .pricing-icon .pricing-detil small {
    color: #ff1f1f !important;
    font-size: 10px;
    font-weight: 400;
    text-decoration: line-through;
}
.list-denom li .pricing-icon .pricing-detil span {
    color: var(--v3-primary, #E6700F);
    font-size: 15px;
    font-weight: 600;
}
.list-denom li:hover,
.list-denom li.active,
.list-denom .list-denom-frame:hover,
.list-denom .list-denom-frame.active {
    border-color: var(--v3-primary, #E06500);
}
.list-denom li.active,
.list-denom .list-denom-frame.active {
    background-image: url("../../img/gradient-fill-uniplay-box.svg");
}
.list-denom li i,
.list-denom .list-denom-frame i { font-size: 12px; margin-right: 5px; }

/* ── Order confirmation view ─────────────────────────────────────────────── */
.area-konfirmasi-pembelian-dashboard .nominal-tagihan {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
.area-konfirmasi-pembelian-dashboard .nominal-tagihan small {
    color: #1c1c1c;
    font-size: 12px;
}
.area-konfirmasi-pembelian-dashboard .nominal-tagihan b {
    color: #171717;
    font-size: 24px;
    background: #ffd43f;
    padding: 10px;
    border-radius: 2em;
    width: 230px;
    text-align: center;
    margin-top: 10px;
}
.area-konfirmasi-pembelian-dashboard .rincian-pesanan { width: 100%; }
.area-konfirmasi-pembelian-dashboard .rincian-pesanan tr td {
    text-align: left;
    padding: 5px 0;
    font-size: 14px;
    color: #4a4a4a;
}
.area-konfirmasi-pembelian-dashboard .rincian-pesanan tr th {
    text-align: right;
    padding: 5px 0;
    font-size: 14px;
    font-weight: 600;
    color: #1b1b1b;
}
.area-konfirmasi-pembelian-dashboard .footer-action { margin-top: 50px; }
.area-konfirmasi-pembelian-dashboard .footer-action .btn-submit {
    border: 1px solid #c46415;
    background: var(--v3-primary, #e6700f);
    color: #fff;
    font-size: 16px;
    text-align: center;
    font-weight: bold;
    width: 100%;
    display: block;
    border-radius: 0.3em;
    padding: 12px;
    transition: all .2s ease-in-out;
    cursor: pointer;
}
.area-konfirmasi-pembelian-dashboard .footer-action .btn-submit:hover { background: #c25c08; }
.area-konfirmasi-pembelian-dashboard .transaksi-aman-logo {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
}
.area-konfirmasi-pembelian-dashboard .transaksi-aman-logo img {
    width: 115px;
    margin-right: 20px;
}
.area-konfirmasi-pembelian-dashboard .transaksi-aman-logo img:last-child { margin-right: 0; }

/* ── Not-reseller placeholder ────────────────────────────────────────────── */
.area-not-reseller {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 30px 50px;
}
.area-not-reseller b { color: #292929; font-size: 20px; font-weight: 600; }
.area-not-reseller small { display: block; margin-top: 10px; text-align: center; }
.area-not-reseller img { margin-top: 30px; width: 80%; margin-bottom: 50px; }
.area-not-reseller .btn-goto-register-reseller {
    width: 200px;
    display: block;
    border-radius: 6px;
    border: none;
    background: var(--v3-primary, #e6710f);
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    padding: 10px;
    transition: all .3s ease-in-out;
    text-align: center;
    text-decoration: none;
}
.area-not-reseller .btn-goto-register-reseller:hover { background: #d2660c; }

.area-not-reseller .multiple-button {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    gap: 12px;
}
.area-not-reseller .multiple-button a {
    width: fit-content;
    min-width: 200px;
    padding-left: 20px;
    padding-right: 20px;
}
.area-not-reseller .multiple-button a i { margin-right: 5px; }

.area-not-reseller .single-button a {
    width: fit-content;
    min-width: 200px;
    padding-left: 20px;
    padding-right: 20px;
}
.area-not-reseller .single-button a i { margin-right: 5px; }

.area-not-reseller .area-progress {
    margin-top: 20px;
    margin-bottom: 20px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.area-not-reseller .area-progress b {
    display: block;
    text-align: center;
    margin-bottom: 10px;
    font-size: 16px;
}
.area-not-reseller .area-progress .progress-frame {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.area-not-reseller .area-progress .progress-frame .gem-1 { font-size: 12px; color: gray; }
.area-not-reseller .area-progress .progress-frame .progress {
    width: 200px;
    margin-left: 10px;
    margin-right: 10px;
    height: 10px;
}
.area-not-reseller .area-progress .progress-frame .progress .progress-bar { background-color: #e6700f; }
.area-not-reseller .area-progress .progress-frame .gem-2 { font-size: 12px; color: #e6700f; }

/* ── Not-reseller: mobile responsive ── */
@media (max-width: 767px) {
    .area-not-reseller {
        padding: 24px 16px;
    }
    .area-not-reseller img {
        width: 90%;
        margin-bottom: 30px;
    }
    .area-not-reseller .btn-goto-register-reseller {
        width: 100%;
    }
    .area-not-reseller .multiple-button {
        flex-direction: column;
        width: 100%;
    }
    .area-not-reseller .multiple-button a {
        width: 100%;
        min-width: unset;
        text-align: center;
    }
    .area-not-reseller .single-button a {
        width: 100%;
        min-width: unset;
        text-align: center;
    }
    .area-not-reseller .area-progress .progress-frame .progress {
        width: 140px;
    }
}

/* Tablet: 768px–999px — both panel sidebar (230px) and game sidebar (220px) */
@media (min-width: 768px) and (max-width: 999px) {
    .area-topup-members .sidebar-menu { display: none; }
    .area-topup-members .content-topup,
    .area-topup-members .content-topup.full-width {
        width: 100%;
        flex: 1;
        padding: 20px 16px;
    }
    .area-topup-members .content-topup .input-area { flex-wrap: wrap; }
    .area-topup-members .content-topup .input-area .frame-input-inner { width: 100%; flex: 1 1 100%; }
    .area-topup-members .content-topup .input-area .frame-input-inner input,
    .area-topup-members .content-topup .input-area .frame-input-inner select { width: 100% !important; box-sizing: border-box; }
    .area-topup-members .content-topup .input-area .first-input { width: 100%; }
    .area-topup-members .content-topup .input-area .second-input { width: auto; flex: 1; }
    .area-topup-members .content-topup .input-area .mlseparator input { width: 100% !important; }
    .list-denom { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
/* Denom item — AJAX uses class .list-denom-frame on <li> */
.list-denom .list-denom-frame {
    display: flex;
    height: 94px;
    padding: 12px;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    flex: 1 0 0;
    border-radius: 8px;
    border: 1px solid var(--v3-border, #D9DFE2);
    background: #fff;
    cursor: pointer;
    transition: all ease .2s;
}
.list-denom .list-denom-frame:hover,
.list-denom .list-denom-frame.active {
    border-color: var(--v3-primary, #E06500);
}
.list-denom .list-denom-frame.active {
    background-image: url("../../img/gradient-fill-uniplay-box.svg");
}

/* Category navigation bubbles */
.btn-category-primary {
    color: #ed7f00;
    border-color: #ed7f00;
}
.btn-category-primary:hover {
    color: #fff;
    background: #ed7f00;
}

/* Category section headings */
.category-heading {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 12px;
}

/* Top-border divider used between sections */
.divider-top {
    border-top: 1px solid var(--v3-border, #D9DFE2);
    padding-top: 1.5rem;
}

/* Input row wrapper */
.frame-input-inner { position: relative; }
.frame-input-inner label {
    color: #c90000;
    font-size: 14px;
    font-weight: 500;
    font-style: italic;
    display: none !important;
}

/* Help popover (how to get user ID) */
.area-help {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
}
.area-help a { cursor: help; }
.popover-custom {
    position: absolute;
    background: #fff;
    z-index: 1000;
    padding: 10px;
    border-radius: 0.5em;
    border: 1px solid #ccc;
    top: 22px;
    left: -99px;
    box-shadow: 0 0 13px 3px #ccc;
    display: none;
    width: 235px;
}
.area-help:hover .popover-custom { display: block; }
.popover-image { width: 100% !important; cursor: pointer; }
.popover-title { margin: 5px 0 0; text-align: center; font-size: 14px; }

/* ── Payment method accordion ─────────────────────────────────────────────── */
.area-list-payment-method .child-box {
    background: #F8F8F8;
    border: 1px solid #e6ebef;
    margin-bottom: 18px;
    border-radius: 7px !important;
    position: relative;
}
.area-list-payment-method .child-box.disabled { pointer-events: none; }
.area-list-payment-method .child-box.disabled .header { background: #f6f6f6 !important; }
.area-list-payment-method .child-box:hover,
.area-list-payment-method .child-box.active { border: 1px solid #ec7f00; }

/* Payment header row */
.area-list-payment-method .child-box .header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 20px 15px;
    background: #fff;
    border-radius: 7px 7px 0 0;
    cursor: pointer;
}

.card-body .form-check {
    overflow: auto;
}

.area-list-payment-method .child-box .header .left {
    display: flex;
    align-items: center;
}
.area-list-payment-method .child-box .header .left img {
    height: 23px;
    margin-right: 12px;
}
.area-list-payment-method .child-box .header .left b { font-size: 14px; }
.area-list-payment-method .child-box .header .right.price-range b {
    font-size: 14px;
    color: #073a65;
}

/* Payment footer: preview icons + chevron */
.area-list-payment-method .child-box .short-payment-support-info {
    background: #f6f6f6;
    padding: 11px 15px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    cursor: pointer;
    border-radius: 0 0 7px 7px;
}
.area-list-payment-method .child-box .short-payment-support-info img {
    height: 15px;
    margin-right: 15px;
    flex-shrink: 1;
    min-width: 0;
}
.area-list-payment-method .child-box .short-payment-support-info .open-button-action-payment {
    color: #414141;
    font-size: 13px;
    margin-left: 10px;
    text-decoration: none;
}

/* Expanded channel buttons (hidden by default) */
.area-list-payment-method .child-box .button-action-payment {
    padding: 15px;
    display: none;
}
.area-list-payment-method .child-box .button-action-payment ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.area-list-payment-method .child-box .button-action-payment ul li {
    border: 1px solid #c7d0d7;
    padding: 20px 10px 10px 10px;
    border-radius: 0.3em;
    background: #fff;
    cursor: pointer;
    position: relative;
    transition: border-color .15s;
}
.area-list-payment-method .child-box .button-action-payment ul li:hover,
.area-list-payment-method .child-box .button-action-payment ul li.active,
.area-list-payment-method .child-box .button-action-payment ul li:focus { border: 1px solid #ed7f00; }
.area-list-payment-method .child-box .button-action-payment ul li.active,
.area-list-payment-method .child-box .button-action-payment ul li:focus { background: #fff9f3; }
.area-list-payment-method .child-box .button-action-payment ul li.disabled {
    cursor: no-drop;
    background: #f0f0f0;
    pointer-events: none;
}
.area-list-payment-method .child-box .button-action-payment ul li.disabled .info-top img { opacity: 0.5; }
.area-list-payment-method .child-box .button-action-payment ul li.disabled .info-bottom b { color: #9ca3af; }

.area-list-payment-method .child-box .button-action-payment ul li .info-top {
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 10px;
    padding-right: 30px;
}
.area-list-payment-method .child-box .button-action-payment ul li .info-top img {
    height: 20px;
    object-fit: contain;
}
.area-list-payment-method .child-box .button-action-payment ul li .info-top b {
    color: #073a65;
    font-size: 14px;
    font-weight: 600;
}
.area-list-payment-method .child-box .button-action-payment ul li .info-bottom {
    font-size: 11px;
    color: #333;
    font-weight: 300;
    display: flex;
    justify-content: space-between;
}

/* Drawer active state */
.payment-drawwer.active .short-payment-support-info-head b,
.payment-drawwer.active .header b,
.payment-drawwer.active .header .desc { color: var(--v3-primary, #E5700F); }
.payment-drawwer.border-bottom.mb-3.active { border-bottom: 0 !important; }
.area-list-payment-method .payment-drawwer.active .accordion-header { border-bottom: 0 !important; }

/* Short header styles (used inside payment-drawwer) */
.short-payment-support-info-head {
    transition: all .2s ease;
    padding-right: 9px;
    cursor: pointer;
}
.short-payment-support-info-head .left img {
    width: 18px !important;
    height: 18px !important;
}
.short-payment-support-info-head:hover .left b,
.short-payment-support-info-head:hover i { color: var(--v3-primary, #E5700F); }

/* Promo badge on payment header */
.badge-promotion-on-head {
    box-shadow: 0 2px 6px #f99828;
    background: #ed7f00;
    color: #fff !important;
    padding: 3px 12px;
    font-size: 10px !important;
    font-weight: 600;
    display: none;
    position: absolute;
    top: -1px;
    right: -1px;
    border-radius: 0 6px 0 6px;
    z-index: 1;
}

/* Payment item child (Bootstrap accordion variant) */
li.payment-item-child {
    cursor: pointer;
    transition: all .1s ease;
}
li.payment-item-child:hover {
    border: 1px solid var(--v3-primary, #E5700F) !important;
    background: #FFF7F0;
}

/* Form focus/hover orange ring */
.area-topup-members .form-control:focus,
.area-topup-members .form-control:hover {
    box-shadow: none !important;
    border-color: var(--v3-primary, #ed7f00);
}
.area-topup-members .form-select:focus,
.area-topup-members .form-select:hover {
    box-shadow: none !important;
    border-color: var(--v3-primary, #ed7f00);
}

/* General config page */
.general-config-new-face {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.general-config-new-face .child-general-config {
    border: 1px solid var(--v3-border, #E3E8EF);
    border-radius: var(--v3-radius, 8px);
    background: #fff;
    overflow: hidden;
}
.general-config-new-face .child-general-config > .header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    cursor: pointer;
}
.general-config-new-face .child-general-config > .header-content:hover { background: #fff8f2; }
.general-config-new-face .left-content {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.general-config-new-face .frame-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    background: #FFF3E8;
    color: var(--v3-primary, #E6700F);
    font-size: 17px;
}
.general-config-new-face .frame-icon.contacts { background: #ECFDF3; color: #039855; }
.general-config-new-face .frame-icon.calculator { background: #EEF4FF; color: #444CE7; }
.general-config-new-face .frame-icon.featured { background: #FFFAEB; color: #DC6803; }
.general-config-new-face .frame-captions { min-width: 0; }
.general-config-new-face .frame-captions h4 {
    margin: 0 0 4px;
    color: var(--v3-text, #202939);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
}
.general-config-new-face .frame-captions p {
    margin: 0;
    color: var(--v3-text-muted, #697586);
    font-size: 13px;
    line-height: 1.45;
}
.general-config-new-face .frame-state-child {
    color: var(--v3-text-muted, #697586);
    flex: 0 0 auto;
}
.general-config-new-face .body-content {
    max-height: 0;
    overflow: hidden;
    padding: 0 18px;
    border-top: 0px solid var(--v3-border, #E3E8EF);
    transition: max-height 0.35s ease, padding 0.35s ease, border-top-width 0.1s ease;
}
.general-config-new-face .child-general-config.is-open .body-content {
    max-height: 4000px;
    padding: 18px;
    border-top-width: 1px;
}
.general-config-new-face .body-content .row { row-gap: 16px; }
.general-config-new-face .control-label,
.general-config-new-face .lbl-logo-upload,
.general-config-new-face .label-standart {
    display: block;
    color: var(--v3-text, #202939);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}
.general-config-new-face .form-control,
.general-config-new-face .form-select {
    min-height: 42px;
    border-color: var(--v3-border, #E3E8EF);
    border-radius: 8px;
    font-size: 14px;
}
.general-config-new-face textarea.form-control { min-height: 92px; }
.general-config-new-face .parent_action_in_input { position: relative; }
.general-config-new-face .action_in_input {
    position: absolute;
    right: 18px;
    bottom: 11px;
    color: var(--v3-primary, #E6700F);
}
.body-content-logo-upload-frame {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 116px;
    padding: 14px;
    border: 1px solid var(--v3-border, #E3E8EF);
    border-radius: var(--v3-radius, 8px);
    background: #FAFBFC;
}
.img_elem_frame {
    width: 94px;
    height: 72px;
    border-radius: 8px;
    background: #fff;
    border: 1px dashed #CDD5DF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 94px;
    overflow: hidden;
}
.img_elem_frame.favicon {
    width: 72px;
    flex-basis: 72px;
}
.img_elem_frame img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.action-button-logo-upload { flex: 1; min-width: 0; }
.flex-button-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.btn-upload-logo label,
.btn-reset-logo {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
.btn-upload-logo label {
    margin: 0;
    background: var(--v3-primary, #E6700F);
    color: #fff;
}
.btn-upload-logo label img {
    width: 16px;
    height: 16px;
    filter: brightness(0) invert(1);
}
.btn-reset-logo {
    border: 1px solid var(--v3-border, #E3E8EF);
    background: #fff;
    color: var(--v3-text-muted, #697586);
}
.btn-reset-logo:hover {
    color: var(--v3-text, #202939);
    text-decoration: none;
}
.btn-reset-logo.disabled {
    opacity: .45;
    pointer-events: none;
}
.desc-of-upload-logo {
    margin: 8px 0 0;
    color: var(--v3-text-muted, #697586);
    font-size: 12px;
    line-height: 1.4;
}
.logo-anim-preview-wrapper { display: flex; flex-direction: column; gap: 10px; }
.logo-anim-preview-box {
    width: 100%;
    min-height: 90px;
    padding: 28px 24px;
    border-radius: 12px;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .3s ease;
}
.logo-anim-preview-box.dark-bg { background: #1a1a2e; }
.logo-anim-preview-img {
    width: 115px;
    max-height: 60px;
    object-fit: contain;
    display: block;
}
.logo-anim-preview-label {
    margin-bottom: 0;
    color: #888;
    font-size: 12px;
    text-align: center;
}
.logo-anim-theme-row {
    display: flex;
    align-items: center;
    gap: 8px;
    align-self: flex-end;
}
.logo-anim-theme-lbl { color: #888; font-size: 12px; }
.logo-anim-switch {
    position: relative;
    width: 38px;
    height: 21px;
    flex-shrink: 0;
}
.logo-anim-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.logo-anim-switch-slider {
    position: absolute;
    inset: 0;
    border-radius: 21px;
    background: var(--v3-primary, #E6700F);
    cursor: pointer;
    transition: background .3s;
}
.logo-anim-switch-slider::before {
    content: "";
    position: absolute;
    width: 15px;
    height: 15px;
    left: 3px;
    bottom: 3px;
    border-radius: 50%;
    background: #fff;
    transition: transform .3s;
}
.logo-anim-switch input:checked + .logo-anim-switch-slider { background: #1a1a2e; }
.logo-anim-switch input:checked + .logo-anim-switch-slider::before { transform: translateX(17px); }
@keyframes logo-anim-fade { 0%,100%{opacity:1} 50%{opacity:.35} }
@keyframes logo-anim-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes logo-anim-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.12)} }
@keyframes logo-anim-glow { 0%,100%{filter:drop-shadow(0 0 0 transparent)} 50%{filter:drop-shadow(0 0 10px #4a90e2)} }
@keyframes logo-anim-shine { 0%,100%{filter:brightness(1)} 50%{filter:brightness(1.6) drop-shadow(0 0 6px rgba(255,220,80,.9))} }
@keyframes logo-anim-tilt { 0%,100%{transform:rotate(0deg)} 25%{transform:rotate(-6deg)} 75%{transform:rotate(6deg)} }
.logo-anim-fade { animation: logo-anim-fade 2s ease-in-out infinite; }
.logo-anim-float { animation: logo-anim-float 2s ease-in-out infinite; }
.logo-anim-pulse { animation: logo-anim-pulse 2s ease-in-out infinite; }
.logo-anim-glow { animation: logo-anim-glow 2s ease-in-out infinite; }
.logo-anim-shine { animation: logo-anim-shine 2s ease-in-out infinite; }
.logo-anim-tilt { animation: logo-anim-tilt 2s ease-in-out infinite; }
.plf-simulator {
    border: 1px solid var(--v3-border, #E3E8EF);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}
.plf-simulate-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px;
}
.plf-simulate-header {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}
.plf-left-area,
.plf-simulate-header .parent-frame-search-area {
    flex: 1;
    min-width: 0;
}
.plf-header-logo {
    width: 120px;
    max-height: 42px;
    object-fit: contain;
    flex: 0 0 auto;
}
.plf-simulate-header .search-area {
    height: 38px;
    border: 1px solid var(--v3-border, #E3E8EF);
    border-radius: 8px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    background: #FAFBFC;
}
.plf-simulate-header .input-icon-group {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    color: #98A2B3;
}
.plf-simulate-header .input-icon-group input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #667085;
    font-size: 13px;
}
.plf-burger-menu {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: 1px solid var(--v3-border, #E3E8EF);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--v3-text, #202939);
    flex: 0 0 38px;
}
.area-connection-whatsapp-state {
    display: grid;
    grid-template-columns: minmax(220px, 320px) 1fr;
    gap: 18px;
    align-items: stretch;
}
.area-connection-whatsapp-state .qr-area,
.area-connection-whatsapp-state .connection-info-wa,
.frame-fitur-unggulan-ch {
    border: 1px solid var(--v3-border, #E3E8EF);
    border-radius: var(--v3-radius, 8px);
    padding: 16px;
    background: #FAFBFC;
}
.area-connection-whatsapp-state .target_qr_code_wa {
    width: 100%;
    max-width: 180px;
    display: block;
    margin: 0 auto 12px;
}
.area-connection-whatsapp-state .qr-area-generate-qr,
.area-connection-whatsapp-state .follow-up {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    padding: 8px 12px;
    border-radius: 6px;
    background: var(--v3-primary, #E6700F);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}
.area-connection-whatsapp-state .disconnectedbtn { background: #D92D20; }
.cia-heading-wa {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.cia-heading-wa img {
    width: 28px;
    height: 28px;
}
.cia-heading-wa h3,
.how-to-connect h3 {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 700;
}
.cia-badge {
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}
.cia-badge.badge-success { background: #ECFDF3; color: #027A48; }
.cia-badge.badge-danger { background: #FEF3F2; color: #B42318; }
.cia-info-number,
.cia-info-ondisconnected { margin-top: 14px; }
.cia-info-number p,
.cia-info-ondisconnected p,
.how-to-connect td {
    margin-bottom: 8px;
    color: var(--v3-text-muted, #697586);
    font-size: 13px;
    line-height: 1.5;
}
.separator-with-caption {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0 12px;
}
.separator-with-caption::after {
    content: "";
    height: 1px;
    flex: 1;
    background: var(--v3-border, #E3E8EF);
}
.separator-with-caption h5 {
    margin: 0;
    color: var(--v3-text, #202939);
    font-size: 15px;
    font-weight: 700;
}
.input-withicon { position: relative; }
.input-withicon img {
    position: absolute;
    left: 12px;
    top: 50%;
    width: 20px;
    height: 20px;
    object-fit: contain;
    transform: translateY(-50%);
}
.input-withicon .form-control { padding-left: 42px; }
.pssr-radios {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.upl-toggle-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-top: 6px;
}

@media (min-width: 992px) {
    .upl-toggle-row {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        margin-top: 8px;
    }
}

.upl-toggle-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--v3-text-muted, #9a9a9a);
    transition: color .2s;
    white-space: nowrap;
    line-height: 1;
}

.upl-toggle-row:has(input:checked) .upl-toggle-label,
.upl-toggle-label[data-on="1"] {
    color: var(--v3-primary, #e6710f);
}
.area-settings-lcw-newface { flex-wrap: wrap; }
.live-chat-widget-settings {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #027A48;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}
.frame-fitur-unggulan-ch {
    height: 100%;
    background: #fff;
    border: 1.5px solid var(--v3-border, #E3E8EF);
    border-radius: var(--v3-radius, 10px);
    padding: 18px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: border-color .2s, box-shadow .2s;
}

.frame-fitur-unggulan-ch:hover {
    border-color: var(--v3-primary, #e6710f);
    box-shadow: 0 0 0 3px rgba(230,113,15,.08);
}

.frame-fitur-unggulan-ch > b {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    color: var(--v3-primary, #e6710f);
    background: var(--v3-primary-light, #fff3e8);
    border: 1px solid rgba(230,113,15,.18);
    border-radius: 20px;
    padding: 3px 10px 3px 4px;
    line-height: 1;
    width: fit-content;
}

.frame-fitur-unggulan-ch > b::before {
    content: attr(data-num);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--v3-primary, #e6710f);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    flex-shrink: 0;
}

.frame-fitur-unggulan-ch .form-frame {
    width: 100%;
    margin-bottom: 0;
}
.fa-icon-picker-wrap { position: relative; }
.btn-fa-icon-picker {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 42px;
    padding: 8px 12px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background: #fff;
    color: #495057;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.btn-fa-icon-picker:hover,
.btn-fa-icon-picker.active {
    border-color: #86b7fe;
    box-shadow: 0 0 0 .2rem rgba(13,110,253,.15);
}
.icon-picker-preview {
    min-width: 22px;
    font-size: 18px;
    text-align: center;
}
.icon-picker-label {
    flex: 1;
    overflow: hidden;
    color: #6c757d;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.icon-picker-chevron {
    color: #adb5bd;
    font-size: 11px;
    transition: transform .2s;
}
.btn-fa-icon-picker.active .icon-picker-chevron { transform: rotate(180deg); }
.fa-icon-input-group { flex-wrap: nowrap; }
.fa-icon-input-group .btn-fa-icon-picker {
    width: auto;
    gap: 6px;
    padding: 8px 10px;
    border-right: 0;
    border-radius: 6px 0 0 6px;
}
.fa-icon-input-group .btn-fa-icon-picker:hover,
.fa-icon-input-group .btn-fa-icon-picker.active {
    z-index: 1;
    border-right: 0;
}
.fa-icon-input-group .form-control {
    min-width: 0;
    border-radius: 0 6px 6px 0;
}
.fa-icon-picker-dropdown {
    position: fixed;
    top: 0;
    left: 0;
    min-width: 280px;
    z-index: 9999;
    padding: 10px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 4px 20px rgba(0,0,0,.12);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.fa-icon-picker-dropdown .icon-grid {
    flex: 1;
    overflow-y: auto;
}
.icon-search-wrap {
    position: relative;
    margin-bottom: 8px;
}
.icon-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    color: #adb5bd;
    font-size: 12px;
    transform: translateY(-50%);
}
.icon-search-input {
    width: 100%;
    padding: 7px 10px 7px 30px;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    outline: none;
    box-sizing: border-box;
    font-size: 13px;
}
.icon-search-input:focus { border-color: #86b7fe; }
.icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
    gap: 3px;
    max-height: 200px;
    overflow-y: auto;
    padding-bottom: 2px;
}
.icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 7px 4px;
    border-radius: 5px;
    color: #495057;
    font-size: 19px;
    text-align: center;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.icon-item:hover { background: #eef2ff; color: #4361ee; }
.icon-item span {
    width: 100%;
    overflow: hidden;
    color: #adb5bd;
    font-size: 9px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.icon-item:hover span { color: #4361ee; }
.icon-grid-loading,
.icon-grid-empty {
    grid-column: 1 / -1;
    padding: 20px;
    color: #6c757d;
    font-size: 13px;
    text-align: center;
}
#modalcropper .img-container {
    position: relative;
    max-height: 380px;
    overflow: hidden;
}
#modalcropper img {
    display: block;
    max-width: 100%;
}
.zoom-btn-cropper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    z-index: 10;
    gap: 2px;
}
.zoom-btn-cropper a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(0,0,0,.8);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    border-radius: 4px;
    transition: background .1s;
}
.zoom-btn-cropper a i { font-size: 13px; }
.zoom-btn-cropper a:hover  { background: #242424; }
.zoom-btn-cropper a:active { background: #454545; }
.modal-lg { max-width: 1000px !important; }
[data-tooltip] {
    position: relative;
    display: inline-flex;
    cursor: pointer;
}
#js-tooltip-v3config {
    position: fixed;
    z-index: 9999;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(20,20,20,.95);
    color: #fff;
    box-shadow: 0 8px 20px rgba(0,0,0,.25);
    font-size: 12px;
    font-weight: 400;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease;
}
#js-tooltip-v3config::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    border: 5px solid transparent;
    border-top-color: rgba(20,20,20,.95);
    transform: translateX(-50%);
}

/* ---- frame-icon color variants (new) ---- */
.general-config-new-face .frame-icon.appearance { background: #F4F0FF; color: #7C3AED; }
.general-config-new-face .frame-icon.social      { background: #E0F2FE; color: #0284C7; }

/* ---- logo-upload-frame ---- */
.logo-upload-frame {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
}

/* ---- browser simulator: header mask ---- */
.plf-header-browser-mask {
    position: relative;
    overflow: hidden;
}
.plf-header-browser-mask .header-prev {
    width: 100%;
    display: block;
}
.plf-header-browser-mask .title-area-simulate {
    position: absolute;
    left: 17%;
    top: 20%;
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    max-width: 25%;
    overflow: hidden;
}
.plf-header-browser-mask .favicon-title-preview {
    width: clamp(14px, 1.6vw, 20px);
    height: clamp(14px, 1.6vw, 20px);
    object-fit: contain;
    flex-shrink: 0;
}
.plf-header-browser-mask .title-area-simulate span {
    font-size: clamp(9px, 1.3vw, 13px);
    color: #343434;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.plf-header-browser-mask .domain-address {
    position: absolute;
    left: 17%;
    top: 67%;
    font-size: clamp(9px, 1.3vw, 13px);
    color: #667085;
    max-width: 38%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- editor-general-config: form context in modals ---- */
.editor-general-config .control-label,
.editor-general-config .label-standart {
    display: block;
    color: var(--v3-text, #202939);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}
.editor-general-config .form-control,
.editor-general-config .form-select {
    min-height: 42px;
    border-color: var(--v3-border, #E3E8EF);
    border-radius: 8px;
    font-size: 14px;
}
.editor-general-config textarea.form-control { min-height: 92px; }

/* ---- label-withicon: label row with icon/tooltip on the right ---- */
.label-withicon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.label-withicon .control-label { margin-bottom: 0; }
.label-withicon .fas.fa-info-circle { color: var(--v3-text-muted, #697586); font-size: 14px; }

/* ---- form-frame: field wrapper with bottom spacing ---- */
.form-frame { margin-bottom: 0; }

/* ---- Character counter (only-counting-text / char-counter) ---- */
.only-counting-text {
    position: relative;
}

.only-counting-text.oct-text .char-counter {
    bottom: 8px;
    right: 8px;
}

.only-counting-text.oct-text input.form-control {
    padding-right: 52px;
}

.only-counting-text.oct-textarea .char-counter {
    bottom: 10px;
    right: 8px;
}


.only-counting-text.oct-textarea textarea {
    resize: none;
    padding-bottom: 28px;
}

.only-counting-text .char-counter {
    position: absolute;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    background: var(--v3-bg-page, #f2f5f7);
    border: 1px solid var(--v3-border, #e0e0e0);
    border-radius: 20px;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--v3-text-muted, #9a9a9a);
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity .2s, transform .2s, background .2s, color .2s, border-color .2s;
    line-height: 1.6;
}

.only-counting-text:focus-within .char-counter,
.only-counting-text.is-focused .char-counter {
    opacity: 1;
    transform: translateY(0);
}

.only-counting-text .char-counter.outofrecomendedlen {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #dc2626;
}

/* ---- less-pad: reduced padding for table cells ---- */
.less-pad { padding: 3px 0 !important; }

/* ============================================================
   PAGE — SEO & Pixel Settings (v2_seo_settings.php)
   ============================================================ */

/* ---- Analytics & Tracking card ---- */
.seo-analytics-card {
    background: var(--v3-bg-card);
    border: 1px solid var(--v3-border);
    border-radius: var(--v3-radius);
    padding: 20px;
    margin-bottom: 20px;
}

.seo-analytics-card__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--v3-text);
    padding-bottom: 16px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--v3-border);
}

.seo-analytics-card__title i {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--v3-primary-light);
    color: var(--v3-primary);
    border-radius: 7px;
    font-size: 12px;
    flex-shrink: 0;
}

/* ---- Individual field wrapper ---- */
.seo-field-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
}

.seo-field-label-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Tool badge icons */
.seo-field-badge {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 11px;
    flex-shrink: 0;
}

.seo-field-badge--google { background: #e8f0fe; color: #1a73e8; }
.seo-field-badge--gtm    { background: #e6f4ea; color: #188038; }
.seo-field-badge--meta   { background: #e7f0ff; color: #0866ff; }

/* ---- Hint text ---- */
.editor-general-config .hint {
    display: block;
    font-size: 12px;
    color: var(--v3-text-muted);
    font-style: italic;
    line-height: 1.4;
    margin-top: 2px;
}

.editor-general-config .hint a {
    color: var(--v3-primary);
    font-style: italic;
    font-size: 12px;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color .15s;
}

.editor-general-config .hint a:hover { color: var(--v3-primary-dark); }

/* ---- META Pixel: input + button inline row ---- */
.seo-pixel-input-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.seo-pixel-input-row .form-control { flex: 1; min-width: 0; }

.seo-tracking-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    height: 38px;
    white-space: nowrap;
    flex-shrink: 0;
    background: #fff;
    color: var(--v3-text, #202939);
    border: 1.5px solid var(--v3-primary) !important;
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.seo-tracking-btn span {
    font-size: 14px;
    font-weight: 600;
}
.seo-tracking-btn i {
    font-size: 12px;
    color: #202939;
    transition: color .15s;
}
.seo-tracking-btn:hover { background: var(--v3-primary) !important; color: #fff !important; }
.seo-tracking-btn:hover i { color: #fff !important; }

/* ---- SEO Preview area ---- */
.sasrc-area { margin-top: 0; }

.search-apperances-searchengine {
    background: var(--v3-bg-card);
    border: 1px solid var(--v3-border);
    border-radius: var(--v3-radius);
    overflow: hidden;
}

.search-apperances-searchengine .sasrc-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--v3-border);
    margin: 0;
    cursor: default;
    transition: background .15s;
}

.search-apperances-searchengine .sasrc-heading .left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.search-apperances-searchengine .sasrc-heading img { width: 18px; height: 18px; object-fit: contain; }

.search-apperances-searchengine .sasrc-heading h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--v3-text);
    margin: 0;
}

.search-apperances-searchengine .sasrc-collapse {
    display: block;
    padding: 18px;
    margin: 0;
}

/* Browser chrome bar (favicon + site name + domain) */
.search-apperances-searchengine .sasrc-sub-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    background: #f1f3f4;
    border: 1px solid #dadce0;
    border-radius: 22px;
    margin-bottom: 14px;
    width: 100%;
}

.search-apperances-searchengine .sasrc-sub-heading img {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    border-radius: 2px;
    object-fit: contain;
}

.search-apperances-searchengine .sasrc-sub-heading .sasrc-sub-heading-ssr {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 0;
}

.search-apperances-searchengine .sasrc-sub-heading .sasrc-sub-heading-ssr h3 {
    font-size: 13px;
    font-weight: 500;
    color: #202124;
    margin: 0;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 360px;
}

.search-apperances-searchengine .sasrc-sub-heading .sasrc-sub-heading-ssr h4 {
    font-size: 11px;
    font-weight: 400;
    color: #4d5156;
    margin: 0;
    line-height: 1.3;
}

/* Google-style search result preview */
.search-apperances-searchengine .sasrc-prev-result-search {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 6px 0 16px;
    border-bottom: 1px solid var(--v3-border);
    margin-bottom: 18px;
}

.search-apperances-searchengine .sasrc-prev-result-search a {
    font-size: 18px;
    font-weight: 400;
    color: #1a0dab;
    text-decoration: none;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
    transition: color .15s;
}

.search-apperances-searchengine .sasrc-prev-result-search a:hover { text-decoration: underline; }

.search-apperances-searchengine .sasrc-prev-result-search p {
    font-size: 14px;
    color: #4d5156;
    line-height: 1.55;
    margin: 0;
}

/* Input area inside the SEO preview card */
.sasrc-input-area {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sasrc-input-area .form-frame { margin-bottom: 0; }

/* ---- Tracking Modal: Meta Pixel accordion ---- */
.frame-accordion-meta-pixel {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.accordion-meta-pixel {
    border: 1px solid var(--v3-border);
    border-radius: var(--v3-radius-sm);
    background: var(--v3-bg-card);
    overflow: hidden;
}

.accordion-meta-pixel .header-accordion-meta-pixel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    transition: background .15s;
    gap: 10px;
}

.accordion-meta-pixel .header-accordion-meta-pixel:hover { background: var(--v3-primary-light); }

.accordion-meta-pixel .header-accordion-meta-pixel h5 {
    font-size: 15px;
    font-weight: 600;
    color: var(--v3-text);
    margin: 0;
    flex: 1;
}

.accordion-meta-pixel .header-accordion-meta-pixel i {
    font-size: 13px;
    color: var(--v3-text-muted);
    flex-shrink: 0;
    transition: transform .2s;
}

.accordion-meta-pixel .header-accordion-meta-pixel i.fa-chevron-up { transform: rotate(180deg); }

.accordion-meta-pixel .super-parent-selector {
    padding: 0 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
}

.accordion-meta-pixel .parent-event-selector {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.accordion-meta-pixel .parent-event-selector .child-event-selector {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--v3-bg-page);
    border: 1px solid var(--v3-border);
    border-radius: 6px;
}

.accordion-meta-pixel .parent-event-selector .child-event-selector span {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: var(--v3-text);
    line-height: 1.4;
}

.accordion-meta-pixel .parent-event-selector .child-event-selector .actions-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.accordion-meta-pixel .parent-event-selector .child-event-selector .actions-right a.settings-event {
    color: var(--v3-primary);
    font-size: 14px;
    text-decoration: none;
    transition: opacity .15s;
}

.accordion-meta-pixel .parent-event-selector .child-event-selector .actions-right a.settings-event:hover { opacity: .7; }

.accordion-meta-pixel .parent-event-selector .child-event-selector .actions-right a.remove-event {
    color: #adb5bd;
    font-size: 14px;
    text-decoration: none;
    transition: color .15s;
}

.accordion-meta-pixel .parent-event-selector .child-event-selector .actions-right a.remove-event:hover { color: #dc3545; }

.accordion-meta-pixel .new_pixel_evt_frame { margin-top: 2px; }

/* ---- Responsive ---- */
@media (max-width: 991px) {
    .seo-pixel-input-row { flex-wrap: wrap; }
    .seo-tracking-btn { flex: 1 1 auto; justify-content: center; }
    .search-apperances-searchengine .sasrc-sub-heading { max-width: 100%; }
    .search-apperances-searchengine .sasrc-sub-heading .sasrc-sub-heading-ssr { width: 100%; }
}

@media (max-width: 767px) {
    .seo-analytics-card { padding: 14px; }
    .seo-analytics-card__title { padding-bottom: 12px; margin-bottom: 12px; }
    .search-apperances-searchengine .sasrc-collapse { padding: 14px; }
    .search-apperances-searchengine .sasrc-prev-result-search a { font-size: 16px; }
    .accordion-meta-pixel .header-accordion-meta-pixel { padding: 11px 14px; }
    .accordion-meta-pixel .super-parent-selector { padding: 0 14px 12px; }
}

@media (max-width: 479px) {
    .seo-analytics-card { padding: 12px; }
    .seo-pixel-input-row { flex-direction: column; }
    .seo-pixel-input-row .form-control { width: 100%; }
    .seo-tracking-btn { width: 100%; justify-content: center; flex-shrink: unset; }
    .search-apperances-searchengine .sasrc-sub-heading .sasrc-sub-heading-ssr { width: 100%; }
    .search-apperances-searchengine .sasrc-prev-result-search a { font-size: 15px; }
}

/* ---- cia-uuid-badge: shows truncated uuid identifier ---- */
.cia-uuid-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--v3-border, #E3E8EF);
    color: var(--v3-text-muted, #697586);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    letter-spacing: 0.5px;
    font-family: monospace;
    margin-top: 8px;
}

/* ---- Live Chat Widget: toggle + green button ---- */
.lcw-action-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    flex-wrap: wrap;
}

/* self-contained toggle switch — no dependency on front.css */
.lcw-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
    cursor: pointer;
    vertical-align: middle;
}
.lcw-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.lcw-toggle-track {
    position: absolute;
    inset: 0;
    background: #D1D5DB;
    border-radius: 999px;
    transition: background .18s;
}
.lcw-toggle input:checked + .lcw-toggle-track { background: #16a34a; }
.lcw-toggle-track::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
    transition: transform .18s;
}
.lcw-toggle input:checked + .lcw-toggle-track::after { transform: translateX(20px); }
.btn-lcw-setting {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: #16a34a;
    color: #fff !important;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    min-height: 36px;
    transition: background .15s;
}
.btn-lcw-setting:hover:not(.disabled) { background: #15803d; }
.btn-lcw-setting.disabled {
    background: #D1D5DB !important;
    color: #9CA3AF !important;
    cursor: not-allowed;
    pointer-events: none;
}

/* ---- WA Unified Card ---- */
.wa-unified-card {
    border: 1px solid var(--v3-border, #E3E8EF);
    border-radius: var(--v3-radius, 8px);
    background: #FAFBFC;
    overflow: hidden;
    margin-top: 16px;
    margin-bottom: 4px;
}
.wa-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--v3-border, #E3E8EF);
    background: #fff;
}
.wa-card-header img { width: 24px; height: 24px; flex-shrink: 0; }
.wa-card-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    flex: 1;
    color: var(--v3-text, #202939);
}
.wa-card-body {
    padding: 16px;
}
.wa-card-body p { margin-bottom: 4px; font-size: 13px; color: var(--v3-text-muted, #697586); }
.wa-card-body p b { color: var(--v3-text, #202939); }
.wa-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 16px;
    border-top: 1px solid var(--v3-border, #E3E8EF);
    background: #fff;
}
.wa-qr-layout {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 16px;
    align-items: start;
}
.wa-qr-col {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}
.wa-qr-col .target_qr_code_wa {
    width: 140px;
    height: 140px;
    display: block;
    object-fit: cover;
    border-radius: 6px;
}
/* blurred dummy state */
.before-generated .target_qr_code_wa {
    filter: blur(4px);
    opacity: 0.6;
}
/* generate button overlaid in center of image */
.before-generated .connectedbtn {
    position: absolute;
    top: 70px;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--v3-primary, #E6700F);
    color: #fff !important;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
    transition: background .15s;
    z-index: 1;
}
.before-generated .connectedbtn:hover { background: #c55c0a; }
.wa-steps-col { display: flex; flex-direction: column; gap: 6px; }
.wa-steps-list {
    margin: 0;
    padding-left: 18px;
    color: var(--v3-text-muted, #697586);
    font-size: 13px;
    line-height: 1.8;
}
.wa-steps-list li b { color: var(--v3-text, #202939); }
.wa-steps-hint {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--v3-text-muted, #697586);
}
.wa-card-desc {
    font-size: 12px;
    color: var(--v3-text-muted, #697586);
    line-height: 1.6;
    margin-bottom: 12px;
}
.wa-card-meta p { margin-bottom: 3px; }
@media (max-width: 576px) {
    .wa-qr-layout { grid-template-columns: 1fr; }
    .wa-qr-col { align-items: center; }
    .wa-card-footer { flex-direction: column; align-items: stretch; }
    .wa-card-footer .qr-area-generate-qr { justify-content: center; }
}

/* ---- tooltip: info icons ---- */
[data-tooltip] { cursor: pointer; }

/* ---- LCW modal: color picker buttons (v3 style) ---- */
#modal-livechatwidgetsettings .list-color-btn-theme-widget {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    flex-direction: row;
}
#modal-livechatwidgetsettings .color-btn.color-btn-left {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px !important;
    border: 1px solid var(--v3-border, #E3E8EF);
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
    min-height: 36px;
}
#modal-livechatwidgetsettings .color-btn.color-btn-left:hover {
    border-color: #86b7fe;
    box-shadow: 0 0 0 3px rgba(13,110,253,.12);
}
#modal-livechatwidgetsettings .color-btn.color-btn-left b {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 28px !important;
    height: 100% !important;
    border-radius: 8px 0 0 8px !important;
    border: none !important;
}

/* ---- Template Tampilan grid ---- */
.list-theme-custom {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    align-self: stretch;
}

.list-theme-custom .item-theme-custom {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    border-radius: 10px;
    border: 2px solid var(--v3-border, #e0e0e0);
    background: #fff;
    overflow: hidden;
    transition: border-color .18s, box-shadow .18s, transform .18s;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.list-theme-custom .item-theme-custom:hover {
    border-color: var(--v3-primary, #e6710f);
    box-shadow: 0 4px 16px rgba(230,113,15,.18);
    transform: translateY(-2px);
}

.list-theme-custom .item-theme-custom.active {
    border-color: var(--v3-primary, #e6710f);
    box-shadow: 0 0 0 3px var(--v3-primary-ring, rgba(230,113,15,.2));
}

.list-theme-custom .item-theme-custom img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    border-radius: 0;
    transition: opacity .18s;
}

.list-theme-custom .item-theme-custom:hover img { opacity: .92; }

.list-theme-custom .item-theme-custom .actions-title {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    flex-shrink: 0;
}

.list-theme-custom .item-theme-custom .actions-title .theme-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.list-theme-custom .item-theme-custom .actions-title .theme-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--v3-text, #1a1a1a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.list-theme-custom .item-theme-custom .actions-title .theme-desc {
    font-size: 11px;
    color: var(--v3-text-muted, #9a9a9a);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* active state: name turns primary */
.list-theme-custom .item-theme-custom.active .theme-name {
    color: var(--v3-primary, #e6710f);
}

/* icon/tag i default: gray, not blue */
.list-theme-custom .item-theme-custom .actions-title .show-settings {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 6px;
    background: var(--v3-bg-page, #f2f5f7);
    text-decoration: none !important;
    transition: background .15s;
}

.list-theme-custom .item-theme-custom .actions-title .show-settings i {
    font-size: 13px;
    color: #6b7280;
}

.list-theme-custom .item-theme-custom .actions-title .show-settings:hover {
    background: #e5e7eb;
}

.list-theme-custom .item-theme-custom .actions-title .show-settings:hover i {
    color: var(--v3-text, #1a1a1a);
}

.list-theme-custom .item-theme-custom.active .actions-title .show-settings {
    background: var(--v3-primary-light, #fff3e8);
}

.list-theme-custom .item-theme-custom.active .actions-title .show-settings i {
    color: var(--v3-primary, #e6710f) !important;
}

/* tablet: 3 col still fits (inherits), but shrinks gracefully */
@media (max-width: 900px) {
    .list-theme-custom { grid-template-columns: repeat(3, 1fr); gap: 10px; }
}

/* mobile: single column */
@media (max-width: 600px) {
    .list-theme-custom { grid-template-columns: 1fr; gap: 10px; }
    .list-theme-custom .item-theme-custom {
        flex-direction: row;
        border-radius: 10px;
        overflow: hidden;
        min-width: 0;
    }
    .list-theme-custom .item-theme-custom img {
        width: 90px;
        min-width: 90px;
        aspect-ratio: 4 / 3;
        border-radius: 8px 0 0 8px;
        object-fit: cover;
        flex-shrink: 0;
    }
    .list-theme-custom .item-theme-custom .actions-title {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        flex-shrink: 1;
        padding: 8px 10px;
        flex-direction: row;
        align-items: center;
        gap: 6px;
    }
    .list-theme-custom .item-theme-custom .actions-title .theme-info {
        min-width: 0;
        flex: 1;
        overflow: hidden;
    }
    .list-theme-custom .item-theme-custom .actions-title .theme-name,
    .list-theme-custom .item-theme-custom .actions-title .theme-desc {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
    }
    .list-theme-custom .item-theme-custom .actions-title .show-settings {
        flex-shrink: 0;
    }
    /* tap feedback on mobile */
    .list-theme-custom .item-theme-custom:active {
        transform: scale(.97);
        border-color: var(--v3-primary, #e6710f);
    }
}

.frame-social-proof-preview .social-proof-preview {
    max-width: 373px;
}

.frame-social-proof-preview .social-proof-preview.style-1 {
    display: flex;
    padding: 12px;
    align-items: flex-end;
    gap: 14px;
    border-radius: 7px;
    border: 1px solid #CED4DA;
    background: #FFF;
}

.frame-social-proof-preview .social-proof-preview.style-1 .thumb-proof {
    display: flex;
    width: 73.014px;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.frame-social-proof-preview .social-proof-preview.style-1 .thumb-proof img {
    width: 70px;
    height: 70px;
    border-radius: 4px;
}

.frame-social-proof-preview .social-proof-preview.style-1 .desc-proof {
    display: flex;
    width: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    flex: 1;
}

.frame-social-proof-preview .social-proof-preview.style-1 .desc-proof small {
    color: #98A6AD;
    font-family: "Source Sans Pro";
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 12px;
}

.frame-social-proof-preview .social-proof-preview.style-1 .desc-proof p {
    color: #212529;
    font-family: "Source Sans Pro";
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    margin: 0px;
    align-self: stretch;
}

.frame-social-proof-preview .social-proof-preview.style-1 .desc-proof .verification-area {
    display: flex;
    align-items: center;
    gap: 6px;
}

.frame-social-proof-preview .social-proof-preview.style-1 .desc-proof .verification-area i {
    font-size: 12px;
    color: #0069FF;
}

.frame-social-proof-preview .social-proof-preview.style-1 .desc-proof .verification-area span {
    color: #98A6AD;
    font-family: "Source Sans Pro";
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 12px;
}

.frame-social-proof-preview .social-proof-preview.style-1 .thumb-proof small {
    color: #212529;
    font-family: "Source Sans Pro";
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 12px;
    align-self: stretch;
}

/* STYLE 2 SCP */
.frame-social-proof-preview .social-proof-preview.style-2 {
    display: flex;
    gap: 10px;
    border: 1px solid #CED4DA;
    background: #FFF;
    border-radius: 60px;
    flex-direction: row-reverse;
    padding: 8px 12px;
    align-items: center;
}
.frame-social-proof-preview .social-proof-preview.style-2 .desc-proof {
    display: flex;
    width: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    flex: 1;
}
.frame-social-proof-preview .social-proof-preview.style-2 .desc-proof small {
    color: #98A6AD;
    font-family: "Source Sans Pro";
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 12px;
}
.frame-social-proof-preview .social-proof-preview.style-2 .desc-proof p {
    color: #212529;
    font-family: "Source Sans Pro";
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    margin: 0px;
    align-self: stretch;
}
.frame-social-proof-preview .social-proof-preview.style-2 .desc-proof p b {
    color: #212529;
    font-family: "Source Sans Pro";
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: 22px;
    align-self: stretch;
}
.frame-social-proof-preview .social-proof-preview.style-2 .desc-proof .verification-area {
    display: flex;
    align-items: center;
    gap: 6px;
}
.frame-social-proof-preview .social-proof-preview.style-2 .desc-proof .verification-area i {
    font-size: 12px;
    color: #0069FF;
}
.frame-social-proof-preview .social-proof-preview.style-2 .desc-proof .verification-area span {
    color: #98A6AD;
    font-family: "Source Sans Pro";
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 12px;
}
.frame-social-proof-preview .social-proof-preview.style-2 .desc-proof .verification-area span strong {
    color: #98A6AD;
    font-family: "Source Sans Pro";
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    line-height: 12px;
}
.frame-social-proof-preview .social-proof-preview.style-2 .thumb-proof {
    display: flex;
    width: 71px;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    justify-content: center;
}
.frame-social-proof-preview .social-proof-preview.style-2 .thumb-proof small {
    color: #212529;
    font-family: "Source Sans Pro";
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 12px;
    align-self: stretch;
}
.frame-social-proof-preview .social-proof-preview.style-2 .thumb-proof img {
    width: 70px;
    height: 70px;
    border-radius: 61px;
}
/* END STYLE 2 SCP */

.frame-social-proof-preview .notice {
    width: 70px;
    height: 70px;
    border-radius: 4px;
}

.parse-hidden {
    display: none !important;
}

.frame-social-proof-settings .form-check input[type="radio"]:checked {
    background-color: #e46e0d;
    border-color: #e6710f;
    box-shadow: none !important;
}

.frame-video-popup {
    position: relative;
    padding: 16px 16px 3px 16px;
}

/* Responsive 16:9 iframe */
.frame-video-popup iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
    border-radius: 6px;
}

/* Close button — circular pill floating top-right */
.frame-video-popup > a,
.frame-video-popup a.close {
    position: absolute;
    right: -14px;
    top: -14px;
    width: 36px;
    height: 36px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #555;
    font-size: 16px;
    line-height: 1;
    transition: background .15s, color .15s, box-shadow .15s;
    opacity: 1 !important;
    z-index: 10;
}

.frame-video-popup > a:hover,
.frame-video-popup a.close:hover {
    background: #f44336;
    color: #fff;
    box-shadow: 0 4px 12px rgba(244,67,54,.35);
    text-decoration: none;
}

/* "Jangan tampilkan lagi" row */
.frame-video-popup .frame-chck-no-showagain {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-radius: 8px;
}

.frame-video-popup .frame-chck-no-showagain .cacd-label {
    font-size: 13px;
    color: #555;
    cursor: pointer;
    margin: 0;
    line-height: 1.4;
    user-select: none;
}

.frame-video-popup .frame-chck-no-showagain .cacd-label:hover {
    color: var(--v3-primary, #e6710f);
}

/* ============================================================
   Checkbox wrapper-19 (animated green checkmark)
   ============================================================ */
.checkbox-wrapper-19 {
    box-sizing: border-box;
    --background-color: #F3FFF5;
    --checkbox-height: 20px;
    height: 20px;
    flex-shrink: 0;
}

@keyframes dothabottomcheck-19 {
    0%   { height: 0; }
    100% { height: calc(var(--checkbox-height) * 0.3); }
}
@-webkit-keyframes dothabottomcheck-19 {
    0%   { height: 0; }
    100% { height: calc(var(--checkbox-height) * 0.3); }
}

@keyframes dothatopcheck-19 {
    0%   { height: 0; }
    50%  { height: 0; }
    100% { height: calc(var(--checkbox-height) * 0.55); }
}
@-webkit-keyframes dothatopcheck-19 {
    0%   { height: 0; }
    50%  { height: 0; }
    100% { height: calc(var(--checkbox-height) * 0.55); }
}

.checkbox-wrapper-19 input[type=checkbox] { display: none; }

.checkbox-wrapper-19 .check-box {
    height: var(--checkbox-height);
    width: var(--checkbox-height);
    background-color: #fff;
    border: calc(var(--checkbox-height) * .09) solid #43A047;
    border-radius: 6px;
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    transition: border-color ease .2s;
    cursor: pointer;
}

.checkbox-wrapper-19 .check-box::before,
.checkbox-wrapper-19 .check-box::after {
    box-sizing: border-box;
    position: absolute;
    height: 0;
    width: calc(var(--checkbox-height) * .09);
    background-color: #43A047;
    display: inline-block;
    transform-origin: left top;
    border-radius: 5px;
    content: " ";
    transition: opacity ease .5s;
}

.checkbox-wrapper-19 .check-box::before {
    top: calc(var(--checkbox-height) * .65);
    left: calc(var(--checkbox-height) * .40);
    box-shadow: 0 0 0 calc(var(--checkbox-height) * .05) var(--background-color);
    transform: rotate(-145deg);
}

.checkbox-wrapper-19 .check-box::after {
    top: calc(var(--checkbox-height) * .45);
    left: calc(var(--checkbox-height) * .15);
    transform: rotate(-40deg);
}

.checkbox-wrapper-19 input[type=checkbox]:checked + .check-box,
.checkbox-wrapper-19 .check-box.checked {
    border-color: #43A047;
}

.checkbox-wrapper-19 input[type=checkbox]:checked + .check-box::after,
.checkbox-wrapper-19 .check-box.checked::after {
    height: calc(var(--checkbox-height) / 2);
    animation: dothabottomcheck-19 .2s ease 0s forwards;
}

.checkbox-wrapper-19 input[type=checkbox]:checked + .check-box::before,
.checkbox-wrapper-19 .check-box.checked::before {
    height: calc(var(--checkbox-height) * 1.2);
    animation: dothatopcheck-19 .4s ease 0s forwards;
}

/* ============================================================
   PAGE — Kustomisasi Produk
   ============================================================ */

.area-denom-product-items { margin-top: 20px; }

/* ── Header + filters row ─────────────────────────────────── */
.area-denom-product-items .adpi-headers-and-filters {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.area-denom-product-items .adpi-headers-and-filters .items-tabslink {
    display: flex;
    gap: 8px;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}

.area-denom-product-items .adpi-headers-and-filters .items-tabslink a {
    border: 1.5px solid var(--v3-border);
    padding: 7px 14px;
    border-radius: var(--v3-radius-sm);
    font-size: 13px;
    font-weight: 600;
    color: var(--v3-text-sub);
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
    white-space: nowrap;
}

.area-denom-product-items .adpi-headers-and-filters .items-tabslink a:hover {
    background: var(--v3-bg-input-ro);
    border-color: var(--v3-primary);
    color: var(--v3-primary);
}

.area-denom-product-items .adpi-headers-and-filters .items-tabslink a.active {
    border-color: rgba(230, 112, 15, .4);
    background: var(--v3-primary-light);
    color: var(--v3-primary-dark);
}

/* ── Search + sort row ────────────────────────────────────── */
.form-filter {
    display: flex;
    flex-direction: row;
    gap: 8px;
    flex: 1;
    max-width: 420px;
}

.area-denom-product-items .adpi-headers-and-filters .items-filters {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    border: 1.5px solid var(--v3-border);
    border-radius: var(--v3-radius-sm);
    padding: 7px 12px;
    gap: 8px;
    background: var(--v3-bg-input);
    transition: border-color .15s, box-shadow .15s;
}

.area-denom-product-items .adpi-headers-and-filters .items-filters:focus-within {
    border-color: var(--v3-primary);
    box-shadow: 0 0 0 3px var(--v3-primary-ring);
}

.area-denom-product-items .adpi-headers-and-filters .items-filters i {
    color: var(--v3-text-muted);
    font-size: 13px;
    flex-shrink: 0;
}

.area-denom-product-items .adpi-headers-and-filters .items-filters input {
    border: none;
    flex: 1;
    min-width: 0;
    box-shadow: none !important;
    outline: none !important;
    font-size: 14px;
    color: var(--v3-text);
    background: transparent;
    font-family: var(--v3-font);
}

.area-denom-product-items .adpi-headers-and-filters .items-filters input::placeholder {
    color: var(--v3-text-muted);
}

.items-sort {
    display: flex;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    border-radius: var(--v3-radius-sm);
    border: 1.5px solid var(--v3-border);
    background: var(--v3-bg-card);
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.items-sort:hover {
    background: var(--v3-bg-input-ro);
    border-color: var(--v3-primary);
}

/* ── Product table ────────────────────────────────────────── */
.riwayat-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--v3-bg-input-ro);
    border-radius: var(--v3-radius);
    overflow: visible;
    margin-top: 16px;
}

.riwayat-table th {
    background: var(--v3-bg-input-ro);
    padding: 10px 20px;
    border-bottom: 1px solid var(--v3-border);
    border-top: 1px solid var(--v3-border);
    color: var(--v3-text-muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
}

.riwayat-table td {
    padding: 14px 20px;
    border-bottom: 1px solid var(--v3-border);
    background: var(--v3-bg-card);
    vertical-align: middle;
}

.riwayat-table tr:first-child th:first-child { border-top-left-radius: var(--v3-radius); }
.riwayat-table tr:first-child th:last-child  { border-top-right-radius: var(--v3-radius); }
.riwayat-table tr:last-child td:first-child  { border-bottom-left-radius: var(--v3-radius); }
.riwayat-table tr:last-child td:last-child   { border-bottom-right-radius: var(--v3-radius); }

.riwayat-table td:first-child,
.riwayat-table th:first-child { border-left: 1px solid var(--v3-border); }

.riwayat-table td:last-child,
.riwayat-table th:last-child  { border-right: 1px solid var(--v3-border); }

/* Product cell */
.riwayat-table .produk {
    display: flex;
    align-items: center;
    gap: 12px;
}

.riwayat-table .produk .produk-img-wrapper {
    position: relative;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--v3-radius-sm);
    overflow: hidden;
    align-self: stretch;
}

.riwayat-table .produk .produk-img-skeleton {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #e8e8e8 25%, #f5f5f5 50%, #e8e8e8 75%);
    background-size: 200% 100%;
    animation: kp-shimmer 1.4s infinite linear;
    border-radius: var(--v3-radius-sm);
}

@keyframes kp-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.riwayat-table .produk img {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: var(--v3-radius-sm);
    position: relative;
    z-index: 1;
    opacity: 0;
    transition: opacity .2s ease;
    object-fit: cover;
}

.riwayat-table .produk img.img-loaded { opacity: 1; }

.riwayat-table .produk .detail {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.riwayat-table .produk .detail .text-nama-produk {
    font-size: 14px;
    font-weight: 600;
    color: var(--v3-text);
    margin-bottom: 2px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.riwayat-table .produk .detail .type-produk {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.riwayat-table .produk .detail .type-produk .text-type-produk {
    font-size: 12px;
    color: var(--v3-text-muted);
    margin-bottom: 0;
    line-height: 1.4;
}

/* Status badges */
.riwayat-table .status {
    display: inline-flex;
    padding: 2px 8px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: var(--v3-radius-pill);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.riwayat-table .status.active   { background: #ecfdf3; color: #027a48; }
.riwayat-table .status.no-active { background: #fef3f2; color: #b42318; }

/* ── Toggle switch ────────────────────────────────────────── */
.riwayat-table .adpi-switch-parent {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
}

.riwayat-table .adpi-switch-parent label {
    font-size: 13px;
    font-weight: 600;
    width: 18px;
    color: var(--v3-text-sub);
}

.riwayat-table .adpi-switch-parent .switch-uniplay {
    height: .8rem;
    width: 2.4rem;
}

.riwayat-table .adpi-switch-parent .switch-uniplay:disabled {
    pointer-events: none;
    background-color: #d0d0d0 !important;
}

.riwayat-table .adpi-switch-parent .switch-uniplay:disabled::before {
    background-color: #8f8f8f !important;
    border-color: #868686 !important;
}

.riwayat-table .adpi-switch-parent .switch-uniplay.loading,
.riwayat-table .adpi-switch-parent .switch-uniplay.loading::before { pointer-events: none; }

.riwayat-table .adpi-switch-parent .switch-uniplay { background-color: #f3bfbf; }

.riwayat-table .adpi-switch-parent .switch-uniplay::before {
    left: calc(.7rem - .8rem);
    top: calc(1.1rem - 1.3rem);
    height: 1.3rem;
    width: 1.3rem;
    background-color: #ad0a0a;
    border-color: #ad0a0a;
    transform: translateX(100%);
}

.riwayat-table .adpi-switch-parent .switch-uniplay:checked            { background-color: #bfd3f4; }
.riwayat-table .adpi-switch-parent .switch-uniplay:checked::before   { transform: translateX(0%); background: #1a66e6; border-color: #1a66e6; }

/* ── Action dropdown ──────────────────────────────────────── */
.riwayat-table .dropdown          { position: relative; display: inline-block; }

.riwayat-table .dropbtn {
    display: flex;
    padding: 6px 10px 6px 14px;
    justify-content: center;
    align-items: center;
    gap: 6px;
    border-radius: var(--v3-radius-sm);
    border: 1.5px solid var(--v3-primary);
    background: var(--v3-bg-card);
    color: var(--v3-primary);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: background .15s;
}

.riwayat-table .dropbtn:hover { background: var(--v3-primary-light); }

.icon-default { display: inline-block; }
.icon-hover   { display: none; }

.riwayat-table .dropdown:hover .icon-default { display: none; }
.riwayat-table .dropdown:hover .icon-hover   { display: inline-block; }

.riwayat-table .dropdown-content {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 170px;
    border-radius: var(--v3-radius-sm);
    border: 1px solid var(--v3-border);
    background: var(--v3-bg-card);
    box-shadow: var(--v3-shadow-card);
    z-index: 1000;
}

.riwayat-table .dropdown-content a {
    color: var(--v3-text);
    padding: 10px 14px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--v3-border);
    font-size: 14px;
    transition: background .15s;
}

.riwayat-table .dropdown-content a:last-child { border-bottom: none; }
.riwayat-table .dropdown-content a:hover      { background: var(--v3-primary-light); }
.riwayat-table .dropdown:hover .dropdown-content { display: block; }

/* Allow dropdown to escape the table's overflow:hidden on desktop */
.area-denom-product-items .riwayat-table { overflow: visible; }

/* Mobile: disable CSS hover-driven dropdown — JS handles it via position:fixed */
@media (max-width: 768px) {
    .riwayat-table .dropdown:hover .dropdown-content { display: none; }
    .riwayat-table .dropdown:hover .icon-default     { display: inline-block; }
    .riwayat-table .dropdown:hover .icon-hover       { display: none; }
    .riwayat-table .dropdown.is-open .icon-default   { display: none; }
    .riwayat-table .dropdown.is-open .icon-hover     { display: inline-block; }
}

/* ── Pagination ───────────────────────────────────────────── */
.adpi-pagination { margin-top: 16px; }

.btn-nav {
    display: flex;
    padding: 8px 12px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: var(--v3-radius-sm);
    border: 1.5px solid var(--v3-border);
    background: var(--v3-bg-card);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    color: var(--v3-primary);
    font-size: 18px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.btn-nav:hover {
    background: var(--v3-primary-light);
    border-color: var(--v3-primary);
}

.btn-nav:disabled {
    opacity: .4;
    cursor: not-allowed;
    pointer-events: none;
}

.page-info {
    font-size: 15px;
    color: var(--v3-text);
    font-weight: 500;
}

/* ── Modal: Atur Detail Produk ────────────────────────────── */
.heading-menu {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}

.tooltip-wrapper-supreme {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}

.tooltip-wrapper-supreme .badge {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    padding: 3px 10px;
    border-radius: var(--v3-radius-pill);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.tooltip-wrapper-supreme .tooltip-text {
    visibility: hidden;
    opacity: 0;
    width: 220px;
    padding: 10px 14px;
    background: var(--v3-bg-card);
    border: 1px solid var(--v3-border);
    box-shadow: var(--v3-shadow-card);
    border-radius: var(--v3-radius);
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    transition: opacity .2s;
    z-index: 100;
    text-align: center;
}

.tooltip-wrapper-supreme .tooltip-text.visible {
    visibility: visible;
    opacity: 1;
}

.tooltip-wrapper-supreme .tooltip-text p {
    color: var(--v3-text-sub);
    font-size: 13px;
    margin-bottom: 0;
    line-height: 1.5;
}

.tooltip-wrapper-supreme .tooltip-text a {
    color: var(--v3-primary);
    font-weight: 600;
    text-decoration: none;
}

.tooltip-wrapper-supreme .tooltip-text a:hover { text-decoration: underline; }

.modal-body-custom-detail-produk {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.modal-body-custom-detail-produk .logo-produk {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 20px;
}

.modal-body-custom-detail-produk .logo-produk > p {
    font-size: 15px;
    color: var(--v3-text-sub);
    margin-bottom: 0;
}

.modal-body-custom-detail-produk .logo-produk .form {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.modal-body-custom-detail-produk .logo-produk .form .card-logo {
    display: flex;
    width: 80px;
    height: 80px;
    padding: 14px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    border-radius: var(--v3-radius);
    background: var(--v3-bg-input-ro);
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

.modal-body-custom-detail-produk .logo-produk .form .card-logo img {
    width: 50px;
    height: 50px;
    border-radius: var(--v3-radius);
}

.modal-body-custom-detail-produk .logo-produk .form .action {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.modal-body-custom-detail-produk .logo-produk .form .action .btn-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.modal-body-custom-detail-produk .logo-produk .form .action .btn-group .btn-unggah {
    display: inline-flex;
    padding: 9px 20px;
    align-items: center;
    gap: 8px;
    border-radius: var(--v3-radius-sm);
    border: 1.5px solid var(--v3-primary);
    background: var(--v3-bg-card);
    color: var(--v3-primary);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.modal-body-custom-detail-produk .logo-produk .form .action .btn-group .btn-unggah img {
    width: 18px !important;
    height: 18px !important;
    background: none !important;
    object-fit: unset;
    filter: invert(65%) sepia(42%) saturate(7491%) hue-rotate(359deg) brightness(95%) contrast(91%);
}

.modal-body-custom-detail-produk .logo-produk .form .action .btn-group .btn-unggah:hover {
    background: var(--v3-primary);
    color: #fff;
}

.modal-body-custom-detail-produk .logo-produk .form .action .btn-group .btn-unggah:hover img {
    filter: invert(100%) sepia(92%) saturate(31%) hue-rotate(69deg) brightness(107%) contrast(107%);
}

.modal-body-custom-detail-produk .logo-produk .form .action .btn-group .btn-reset {
    display: inline-flex;
    padding: 9px 20px;
    align-items: center;
    gap: 8px;
    border-radius: var(--v3-radius-sm);
    border: 1.5px solid var(--v3-border);
    background: var(--v3-bg-card);
    color: var(--v3-text-sub);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .15s;
}

.modal-body-custom-detail-produk .logo-produk .form .action .btn-group .btn-reset:hover { background: rgba(92,92,92,.08); }

.modal-body-custom-detail-produk .logo-produk .form .action .btn-group .btn-reset:disabled {
    pointer-events: none;
    border-color: var(--v3-border);
    color: var(--v3-border);
}

.modal-body-custom-detail-produk .logo-produk .form .action > span {
    font-size: 12px;
    font-style: italic;
    color: var(--v3-text-muted);
    line-height: 1.5;
}

.modal-body-custom-detail-produk .desc-produk {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.modal-body-custom-detail-produk .desc-produk > p {
    font-size: 15px;
    color: var(--v3-text-sub);
    margin-bottom: 0;
}

.modal-body-custom-detail-produk .desc-produk .frame-quill-editor { width: 100%; }

.modal-footer                                                    { justify-content: space-between !important; }

.modal-footer .actions-multi-canvas-footer .btn-reset-detail {
    display: inline-flex;
    padding: 10px 20px;
    align-items: center;
    gap: 8px;
    border-radius: var(--v3-radius-sm);
    border: 1.5px solid var(--v3-border);
    background: var(--v3-bg-card);
    color: var(--v3-text-sub);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
}

.modal-footer .actions-multi-canvas-footer .btn-reset-detail:hover { background: rgba(92,92,92,.08); }

.modal-footer .actions-multi-canvas-footer .btn-reset-detail:disabled {
    pointer-events: none;
    border-color: var(--v3-border);
    color: var(--v3-border);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 767px) {
    .area-denom-product-items .adpi-headers-and-filters {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    /* Social proof preview — constrain to widget size on mobile */
    .frame-social-proof-preview .social-proof-preview {
        max-width: 300px !important;
        margin-bottom: 12px;
    }

    /* Style 1 mobile */
    .frame-social-proof-preview .social-proof-preview.style-1 .thumb-proof img {
        width: 48px !important;
        height: 48px !important;
    }
    .frame-social-proof-preview .social-proof-preview.style-1 .desc-proof {
        gap: 4px !important;
    }
    .frame-social-proof-preview .social-proof-preview.style-1 .desc-proof p {
        font-size: 12px !important;
        line-height: 16px !important;
    }

    /* Style 2 mobile */
    .frame-social-proof-preview .social-proof-preview.style-2 .thumb-proof img {
        width: 60px !important;
        height: 60px !important;
    }
    .frame-social-proof-preview .social-proof-preview.style-2 .thumb-proof {
        width: 52px !important;
    }
    .frame-social-proof-preview .social-proof-preview.style-2 .desc-proof {
        gap: 3px !important;
    }
    .frame-social-proof-preview .social-proof-preview.style-2 .desc-proof p,
    .frame-social-proof-preview .social-proof-preview.style-2 .desc-proof p b {
        font-size: 12px !important;
        line-height: 15px !important;
    }
    .form-filter {
        width: 100%;
        max-width: none;
        justify-content: space-between;
    }

    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .riwayat-table th,
    .riwayat-table td { padding: 10px 14px; }

    .modal-body-custom-detail-produk .logo-produk .form .card-logo {
        width: 56px;
        height: 56px;
        padding: 8px;
    }
}

@media (max-width: 440px) {
    .btn-reset-outline { display: none; }

    .form-filter {
        box-sizing: border-box;
        justify-content: space-between;
    }

    .adpi-pagination { display: flex; justify-content: center; margin-top: 20px; }
}


/* ═══════════════════════════════════════════════════════════════
   PAGE — Banner / Slider Manager  (v2_sliders.php)
   ══════════════════════════════════════════════════════════════ */

/* ── Main Container ────────────────────────────────────────────── */
.slider-home-banner-config {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 4px;
}

/* ── Slider State Toggle Row ───────────────────────────────────── */
.slider-home-banner-config .slider-state-config {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: var(--v3-bg-card);
    border: 1.5px solid var(--v3-border);
    border-radius: var(--v3-radius);
}
.slider-state-config-checkbox {
    display: inline-block;
    visibility: visible;
    accent-color: var(--v3-primary, #e6710f);
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
}
.slider-home-banner-config .slider-state-config .cbx {
    display: flex;
    align-items: center;
    margin: 0;
    cursor: pointer;
}

/* ── Slide List ────────────────────────────────────────────────── */
.list-exist-bannerv2 {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

/* ── Individual Slide Item ─────────────────────────────────────── */
.list-exist-bannerv2 .item-exist-bannerv2 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px;
    background: var(--v3-bg-card);
    border: 1.5px solid var(--v3-border);
    border-radius: var(--v3-radius);
    box-shadow: none;
    margin-bottom: 0;
    transition: border-color .18s, box-shadow .18s;
    cursor: default;
}

.list-exist-bannerv2 .item-exist-bannerv2:hover {
    border-color: rgba(230, 112, 15, .35);
    box-shadow: 0 2px 8px rgba(230, 112, 15, .08);
}

/* ── Content Area (left: drag handle + title) ──────────────────── */
.list-exist-bannerv2 .item-exist-bannerv2 .content-area {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    justify-content: flex-start;
}

/* ── Drag Handle ───────────────────────────────────────────────── */
.list-exist-bannerv2 .item-exist-bannerv2 .content-area .drag-sort-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    cursor: grab;
    padding: 5px 4px;
    border-radius: var(--v3-radius-sm);
    flex-shrink: 0;
    transition: background .15s;
}

.list-exist-bannerv2 .item-exist-bannerv2 .content-area .drag-sort-area:hover {
    background: var(--v3-bg-input);
}

.list-exist-bannerv2 .item-exist-bannerv2 .content-area .drag-sort-area i {
    color: var(--v3-border);
    font-size: 11px;
    line-height: 1;
    transition: color .15s;
}

.list-exist-bannerv2 .item-exist-bannerv2 .content-area .drag-sort-area:hover i {
    color: var(--v3-text-muted);
}

/* ── Slide Title ───────────────────────────────────────────────── */
.list-exist-bannerv2 .item-exist-bannerv2 .content-area b {
    font-weight: 500;
    font-size: 14px;
    color: var(--v3-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 360px;
    display: block;
    user-select: none;
}

/* ── Actions Area (right: preview, edit, delete) ───────────────── */
.list-exist-bannerv2 .item-exist-bannerv2 .actions-area {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-right: 0;
    flex-shrink: 0;
}

.list-exist-bannerv2 .item-exist-bannerv2 .actions-area a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--v3-radius-sm);
    font-size: 14px;
    color: var(--v3-text-sub);
    text-decoration: none;
    transition: background .15s, color .15s;
}

.list-exist-bannerv2 .item-exist-bannerv2 .actions-area a:hover {
    color: var(--v3-primary);
    background: var(--v3-primary-light);
}

.list-exist-bannerv2 .item-exist-bannerv2 .actions-area a.actions-area-preview:hover {
    color: #0284c7;
    background: #e0f2fe;
}

.list-exist-bannerv2 .item-exist-bannerv2 .actions-area a:hover .fa-trash-alt {
    color: #ef4444;
}

.list-exist-bannerv2 .item-exist-bannerv2 .actions-area a:has(.fa-trash-alt):hover {
    color: #ef4444;
    background: #fef2f2;
}

/* ── Add Slide Button (full-width dashed CTA) ──────────────────── */
a.btn-tambah-sliderv2-big {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 20px;
    border: 1.5px dashed var(--v3-primary);
    background: transparent;
    color: var(--v3-primary);
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--v3-radius);
    text-decoration: none;
    cursor: pointer;
    transition: background .18s, border-color .18s, color .18s;
    margin: 4px 0 0;
    box-shadow: none;
}

a.btn-tambah-sliderv2-big::before {
    content: '+';
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}

a.btn-tambah-sliderv2-big:hover {
    background: var(--v3-primary-light);
    border-style: solid;
    color: var(--v3-primary-dark);
}

a.btn-tambah-sliderv2-big.disabled {
    pointer-events: none;
    border-color: var(--v3-border);
    color: var(--v3-text-sub);
    background: var(--v3-bg-input-ro);
}

/* ── Modal ─────────────────────────────────────────────────────── */
#modalTambahSlider .modal-dialog {
    margin-top: 80px;
    max-width: 520px;
}

#modalTambahSlider .modal-content {
    border: 1.5px solid var(--v3-border);
    border-radius: var(--v3-radius-lg);
    box-shadow: var(--v3-shadow-popup);
    overflow: hidden;
}

#modalTambahSlider .modal-header {
    background: var(--v3-bg-card);
    border-bottom: 1px solid var(--v3-border);
    padding: 15px 20px;
}

#modalTambahSlider .modal-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--v3-text);
}

#modalTambahSlider .modal-body {
    background: var(--v3-bg-page);
    padding: 18px 20px;
}

/* ── Modal Form Fields ─────────────────────────────────────────── */
.area-create-new-sliders {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.area-create-new-sliders .form-group {
    margin-bottom: 0;
}

.area-create-new-sliders .form-group label.control-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--v3-text);
    margin-bottom: 6px;
    display: block;
}

.area-create-new-sliders .form-group .form-control {
    border: 1.5px solid var(--v3-border);
    border-radius: var(--v3-radius-sm);
    background: var(--v3-bg-input);
    color: var(--v3-text);
    font-size: 14px;
    padding: 9px 12px;
    transition: border-color .18s, box-shadow .18s;
    height: auto;
}

.area-create-new-sliders .form-group .form-control:focus {
    outline: none;
    border-color: var(--v3-border-focus);
    box-shadow: 0 0 0 3px var(--v3-primary-ring);
    background: var(--v3-bg-card);
}

/* ── Upload Zone ───────────────────────────────────────────────── */
.upload-image-area-popup {
    width: 100%;
    border: 1.5px dashed var(--v3-border);
    border-radius: var(--v3-radius);
    background: var(--v3-bg-input);
    overflow: hidden;
    transition: border-color .18s, background .18s;
}

.upload-image-area-popup:hover,
.upload-image-area-popup.highlight {
    border-color: var(--v3-primary);
    background: var(--v3-primary-light);
}

.upload-image-area-popup label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 130px;
    cursor: pointer;
    padding: 20px;
    gap: 5px;
    width: 100%;
}

.upload-image-area-popup label i {
    font-size: 26px;
    color: var(--v3-text-sub);
    margin-bottom: 4px;
    transition: color .18s;
}

.upload-image-area-popup:hover label i,
.upload-image-area-popup.highlight label i {
    color: var(--v3-primary);
}

.upload-image-area-popup label b {
    font-size: 14px;
    font-weight: 600;
    color: var(--v3-text);
}

.upload-image-area-popup label small {
    font-size: 12px;
    color: var(--v3-text-sub);
    text-align: center;
    line-height: 1.5;
}

/* ── Banner required error message ────────────────────────────── */
.banner-is-required-msg {
    font-size: 12px;
    color: #ef4444;
    font-weight: 500;
    margin-top: -6px;
    display: none;
}

/* ── Preview Image Area ────────────────────────────────────────── */
.preview-image-area-popup {
    position: relative;
    width: 100%;
    border-radius: var(--v3-radius);
    overflow: hidden;
    background: var(--v3-bg-input);
    border: 1.5px solid var(--v3-border);
}

.preview-image-area-popup img.uploaded-preview {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    aspect-ratio: 860 / 310;
}

.preview-image-area-popup .actions-preview-topright {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
}

.preview-image-area-popup .actions-preview-topright a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: rgba(0, 0, 0, .48);
    border-radius: var(--v3-radius-sm);
    color: #fff;
    font-size: 13px;
    text-decoration: none;
    backdrop-filter: blur(4px);
    transition: background .15s;
}

.preview-image-area-popup .actions-preview-topright a:hover {
    background: rgba(0, 0, 0, .72);
}

/* ── Modal Footer ──────────────────────────────────────────────── */
#modalTambahSlider .modal-footer {
    background: var(--v3-bg-card);
    border-top: 1px solid var(--v3-border);
    padding: 12px 20px;
}

#modalTambahSlider .actions-multi-canvas-footer {
    display: flex;
    gap: 8px;
    width: 100%;
    justify-content: flex-end;
    margin-top: 0;
    align-items: center;
}

#modalTambahSlider .btn-delete-from-popup {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid #fca5a5;
    background: transparent;
    color: #ef4444;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: var(--v3-radius-sm);
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, border-color .15s;
}

#modalTambahSlider .btn-delete-from-popup:hover {
    background: #fef2f2;
    border-color: #ef4444;
}

#modalTambahSlider .btn-submit-customization {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid var(--v3-primary);
    background: var(--v3-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: var(--v3-radius-sm);
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

#modalTambahSlider .btn-submit-customization:hover {
    background: var(--v3-primary-dark);
    border-color: var(--v3-primary-dark);
}

#modalTambahSlider .btn-submit-customization.disabled {
    pointer-events: none;
    background: var(--v3-border);
    border-color: var(--v3-border);
    color: var(--v3-text-sub);
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .list-exist-bannerv2 .item-exist-bannerv2 .content-area b {
        max-width: 180px;
    }

    #modalTambahSlider .modal-dialog {
        margin-top: 40px;
        margin-left: 12px;
        margin-right: 12px;
    }
}

/* ── Modal Produk Unggulan & Judul Section — equal-width footer buttons ── */
#modalTambahProdukUnggulan .actions-multi-canvas-footer .btn-reset-outline,
#modalTambahProdukUnggulan .actions-multi-canvas-footer .btn-save-outline,
#modalJudulSection .actions-multi-canvas-footer .btn-reset-outline,
#modalJudulSection .actions-multi-canvas-footer .btn-save-outline {
    flex: 1;
}

@media (max-width: 440px) {
    .list-exist-bannerv2 .item-exist-bannerv2 .content-area b {
        max-width: 120px;
        font-size: 13px;
    }

    a.btn-tambah-sliderv2-big {
        font-size: 13px;
        padding: 11px 16px;
    }
}

/* ── Main two-column layout ────────────────────────────────────── */
.frame-flash-sale {
    display: flex;
    gap: 20px;
    align-items: stretch;
    width: 100%;
    margin-top: 12px;
    background: white;
    border-radius: 8px;
}

.frame-flash-sale .content-one {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 0 0 55%;
    width: 55%;
}

.frame-flash-sale .content-two {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 0 0 calc(45% - 20px);
    width: calc(45% - 20px);
    justify-content: space-between;
    border-radius: var(--v3-radius);
    border: 1.5px solid var(--v3-border);
    background: var(--v3-bg-card);
    padding: 16px;
}

/* ── Preview card (left column) ────────────────────────────────── */
.preview-fs {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-radius: var(--v3-radius);
    border: 1.5px solid var(--v3-border);
    background: var(--v3-bg-card);
    padding: 16px;
}

/* ── Form groups ────────────────────────────────────────────────── */
.frame-flash-sale .form-group {
    width: 100%;
    margin-bottom: 0;
}

.frame-flash-sale .form-group-x {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    min-height: 39px;
    gap: 8px;
}

.form-group-x .form-select {
    max-width: 130px;
}

.frame-flash-sale .form-group label,
.frame-flash-sale .form-group-x label.control-label {
    color: var(--v3-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 0;
    width: 100%;
}

.frame-flash-sale .form-group .txt-error {
    color: #ef4444;
    font-size: 12px;
    font-style: italic;
    margin-bottom: 0;
}

/* ── Right column header (form fields) ─────────────────────────── */
.frame-flash-sale .content-two .header {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-self: stretch;
}

.frame-flash-sale .content-two .header .txt-contoh {
    color: var(--v3-text-muted);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 0;
}

/* ── Preview body (icon + title) ───────────────────────────────── */
.frame-flash-sale .content-one .body {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 55px;
    width: 100%;
}

.frame-flash-sale .content-one .txt-title {
    color: var(--v3-text);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 0;
    max-width: 180px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Radio buttons ─────────────────────────────────────────────── */
.frame-flash-sale .content-two .header .pssr-radios {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 14px;
    margin-top: 5px;
}

.frame-flash-sale .content-two .header input[type="radio"]:checked {
    background-color: var(--v3-primary);
    border-color: var(--v3-primary);
    box-shadow: none !important;
}

/* ── On/Off switch toggle ──────────────────────────────────────── */
.adpi-switch-parent {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    margin-top: 0;
}

.adpi-switch-parent label {
    font-size: 13px;
    font-weight: 600;
    width: 17px;
    color: var(--v3-text-muted);
    margin-bottom: 0;
    cursor: pointer;
}

.adpi-switch-parent .switch-uniplay {
    height: .8rem;
    width: 2.4rem;
    background-color: #f3bfbf;
    margin-top: 0;
    cursor: pointer;
}

.adpi-switch-parent .switch-uniplay::before {
    left: calc(.7rem - .8rem);
    top: calc(1.1rem - 1.3rem);
    height: 1.3rem;
    width: 1.3rem;
    background-color: #ad0a0a;
    border-color: #ad0a0a;
    transform: translateX(100%);
}

.adpi-switch-parent .switch-uniplay:checked {
    background-color: #bfd3f4;
}

.adpi-switch-parent .switch-uniplay:checked::before {
    transform: translateX(0%);
    background: #1a66e6;
    border-color: #1a66e6;
}

.adpi-switch-parent .switch-uniplay:disabled {
    pointer-events: none;
    background-color: #d0d0d0 !important;
}

.adpi-switch-parent .switch-uniplay:disabled::before {
    background-color: #8f8f8f !important;
    border-color: #868686 !important;
}

.adpi-switch-parent .switch-uniplay.loading,
.adpi-switch-parent .switch-uniplay.loading::before {
    pointer-events: none;
}

/* ── Date picker input group ────────────────────────────────────── */
.frame-flash-sale .input-group {
    border-radius: var(--v3-radius-sm);
    border: 1.5px solid var(--v3-border);
    background: var(--v3-bg-input);
    transition: border-color .18s, box-shadow .18s;
}

.frame-flash-sale .input-group:focus-within {
    border-color: var(--v3-border-focus);
    box-shadow: 0 0 0 3px var(--v3-primary-ring);
    background: var(--v3-bg-card);
}

.frame-flash-sale .input-group .input-group-text {
    background: transparent !important;
    border: none;
    color: var(--v3-text-muted);
}

.frame-flash-sale .input-group .form-control {
    border: 0 !important;
    background: transparent;
    padding-left: 0 !important;
    color: var(--v3-text);
    box-shadow: none !important;
}

/* ── Flatpickr primary color overrides ─────────────────────────── */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
    background-color: var(--v3-primary) !important;
    border-color: var(--v3-primary) !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months { font-size: 16px !important; font-weight: 400 !important; }
.flatpickr-current-month input.cur-year { font-size: 16px !important; font-weight: 400 !important; }
.flatpickr-current-month { padding-top: 10px !important; }

/* ── Save button group ──────────────────────────────────────────── */
.group-btn {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    align-self: stretch;
}

.btn-simpan {
    display: inline-flex;
    padding: 10px 24px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: var(--v3-radius-sm);
    border: 1.5px solid var(--v3-primary);
    background: var(--v3-primary);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: background .18s, border-color .18s;
}

.btn-simpan:disabled {
    pointer-events: none;
    background: var(--v3-border);
    border-color: var(--v3-border);
    color: var(--v3-text-sub);
}

.btn-simpan:hover {
    background: var(--v3-primary-dark);
    border-color: var(--v3-primary-dark);
}

/* ── Divider between form and product list ──────────────────────── */
.right-content > form > hr {
    border: none;
    border-top: 1.5px solid var(--v3-border);
    margin: 16px 0;
}

/* ── Product list section ───────────────────────────────────────── */
.add-produk-flash-sale {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.add-produk-flash-sale .text-title {
    color: var(--v3-text);
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 0;
}

.add-produk-flash-sale .text-subtitle {
    color: var(--v3-text-muted);
    text-align: center;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 0;
}

/* Full-width product list container */
.add-produk-flash-sale .list-exist-bannerv2 {
    width: 100%;
    align-items: stretch;
}

/* Override banner-manager content-area width for flash sale items */
.add-produk-flash-sale .list-exist-bannerv2 .item-exist-bannerv2 .content-area {
    width: 100%;
    gap: 0;
}

/* Inline product row */
.add-produk-flash-sale .list-produk {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 0 0;
    min-width: 0;
}

/* Product thumbnail */
.add-produk-flash-sale .thumimage {
    width: 44px;
    height: 44px;
    border-radius: var(--v3-radius-sm);
    border: 1.5px solid var(--v3-border);
    object-fit: contain;
    background: var(--v3-bg-input);
    flex-shrink: 0;
}

/* Detail column (label + value) */
.add-produk-flash-sale .list-produk .detail-produk {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 2px;
    align-self: stretch;
    min-width: 0;
}

.add-produk-flash-sale .list-produk .detail-produk p {
    color: var(--v3-text-muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 0;
    white-space: nowrap;
}

.add-produk-flash-sale .list-produk .detail-produk span {
    color: var(--v3-text);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Add product button ─────────────────────────────────────────── */
.add-produk-flash-sale .btn-add {
    display: inline-flex;
    padding: 10px 18px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: var(--v3-radius-sm);
    border: 1.5px solid var(--v3-primary);
    background: var(--v3-bg-card);
    color: var(--v3-primary);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: background .18s, border-color .18s, color .18s;
}

.add-produk-flash-sale .btn-add:hover {
    background: var(--v3-primary-light);
    color: var(--v3-primary-dark);
}

.add-produk-flash-sale .btn-add:disabled {
    pointer-events: none;
    border-color: var(--v3-border);
    color: var(--v3-text-sub);
    background: var(--v3-bg-input-ro);
}

/* ── List header (count + add button row) ──────────────────────── */
.header-list-flash-sale {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    width: 100%;
    gap: 12px;
}

.header-list-flash-sale p {
    color: var(--v3-text-muted);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    margin-bottom: 0;
}

.header-list-flash-sale span {
    color: var(--v3-text);
    font-weight: 700;
}

/* ── Empty state ────────────────────────────────────────────────── */
.data-not-found {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    padding: 28px 20px;
    border: 1.5px dashed var(--v3-border);
    border-radius: var(--v3-radius);
    background: var(--v3-bg-input-ro);
    width: 100%;
    text-align: center;
}

/* ── Flash Sale actions hover ───────────────────────────────────── */
.actions-area a:hover i.fas.fa-trash-alt { color: #ef4444; }

/* ── Flash Sale product skeleton ────────────────────────────────── */
.fs-skeleton-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.fs-sk-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px;
    background: var(--v3-bg-card);
    border: 1.5px solid var(--v3-border);
    border-radius: var(--v3-radius);
}

.fs-sk-item .fs-sk-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.fs-sk-drag {
    width: 18px;
    height: 28px;
    border-radius: 4px;
    flex-shrink: 0;
    background: linear-gradient(90deg, #f0f3f6 25%, #e4e9ef 50%, #f0f3f6 75%);
    background-size: 200% 100%;
    animation: mut-shimmer 1.4s infinite;
}

.fs-sk-thumb {
    width: 44px;
    height: 44px;
    border-radius: var(--v3-radius-sm);
    flex-shrink: 0;
    background: linear-gradient(90deg, #f0f3f6 25%, #e4e9ef 50%, #f0f3f6 75%);
    background-size: 200% 100%;
    animation: mut-shimmer 1.4s infinite;
}

.fs-sk-detail {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.fs-sk-line {
    height: 10px;
    border-radius: 6px;
    background: linear-gradient(90deg, #f0f3f6 25%, #e4e9ef 50%, #f0f3f6 75%);
    background-size: 200% 100%;
    animation: mut-shimmer 1.4s infinite;
}

.fs-sk-line.w-40 { width: 56px; }
.fs-sk-line.w-70 { width: 96px; }
.fs-sk-line.w-90 { width: 120px; }

.fs-sk-item .fs-sk-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.fs-sk-action {
    width: 30px;
    height: 30px;
    border-radius: var(--v3-radius-sm);
    background: linear-gradient(90deg, #f0f3f6 25%, #e4e9ef 50%, #f0f3f6 75%);
    background-size: 200% 100%;
    animation: mut-shimmer 1.4s infinite;
}

/* ── Flash sale responsive visibility ───────────────────────────── */
/* Desktop: show desktop elements, hide mobile wrap */
.fs-mobile-only  { display: none !important; }

/* Mobile: flip. Also force-hide desktop skeleton/list so JS swap
   doesn't accidentally reveal the desktop list on narrow screens. */
@media (max-width: 767px) {
    .fs-desktop-only   { display: none !important; }
    #fs-skeleton-list  { display: none !important; }
    #fs-real-content   { display: none !important; }
    .fs-mobile-only    { display: flex !important; flex-direction: column; }
}

/* ── Mobile flash sale card list ────────────────────────────────── */
.fs-mobile-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.fs-mobile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.fs-mobile-count {
    font-size: 13px;
    color: var(--v3-text-muted);
}

.fs-mobile-count b {
    color: var(--v3-text);
    font-weight: 600;
}

.btn-add--sm {
    padding: 7px 14px !important;
    font-size: 13px !important;
}

.fs-mobile-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fs-mobile-card {
    background: var(--v3-bg-card);
    border: 1.5px solid var(--v3-border);
    border-radius: var(--v3-radius);
    overflow: hidden;
}

/* top row: thumb + name + actions */
.fs-mc-top {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
}

.fs-mc-img {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: contain;
    background: var(--v3-bg-input);
    border: 1.5px solid var(--v3-border);
    flex-shrink: 0;
}

.fs-mc-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.fs-mc-game {
    font-size: 14px;
    font-weight: 600;
    color: var(--v3-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.fs-mc-denom {
    font-size: 12px;
    color: var(--v3-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.fs-mc-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.fs-mc-btn {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--v3-bg-input);
    color: var(--v3-text-muted);
    text-decoration: none;
    font-size: 14px;
    transition: background .15s, color .15s;
}

.fs-mc-btn:hover { background: var(--v3-primary-light); color: var(--v3-primary); text-decoration: none; }
.fs-mc-btn--del:hover { background: #fef2f2; color: #dc2626; }

/* price row */
.fs-mc-prices {
    display: flex;
    border-top: 1px solid var(--v3-border);
    background: var(--v3-bg);
}

.fs-mc-price-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 9px 12px;
}

.fs-mc-price-label {
    font-size: 11px;
    color: var(--v3-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.fs-mc-price-val {
    font-size: 14px;
    font-weight: 700;
    color: var(--v3-text);
}

.fs-mc-price-divider {
    width: 1px;
    background: var(--v3-border);
    margin: 6px 0;
}

/* sort row */
.fs-mc-sort {
    display: flex;
    border-top: 1px solid var(--v3-border);
}

.fs-mc-sort button {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--v3-text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.fs-mc-sort button:first-child {
    border-right: 1px solid var(--v3-border);
}

.fs-mc-sort button:hover {
    background: var(--v3-bg-input);
    color: var(--v3-primary);
}

/* ── Modal: Add/Edit product ────────────────────────────────────── */
#modalEditorProdukFlashSale .modal-dialog {
    max-width: 440px;
    margin-top: 80px;
}

#modalEditorProdukFlashSale .modal-content {
    border: 1.5px solid var(--v3-border);
    border-radius: var(--v3-radius-lg);
    box-shadow: var(--v3-shadow-popup);
    overflow: hidden;
}

#modalEditorProdukFlashSale .modal-header {
    background: var(--v3-bg-card);
    border-bottom: 1px solid var(--v3-border);
    padding: 15px 20px;
}

#modalEditorProdukFlashSale .modal-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--v3-text);
}

#modalEditorProdukFlashSale .modal-body {
    background: var(--v3-bg-page);
    padding: 18px 20px;
}

.modal-body-produk-flash-sale {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
}

.modal-body-produk-flash-sale .form-group {
    width: 100%;
    margin-bottom: 0;
}

.modal-body-produk-flash-sale .form-group label {
    font-size: 13px;
    font-weight: 600;
    color: var(--v3-text);
    margin-bottom: 6px;
    display: block;
}

.modal-body-produk-flash-sale .form-group .form-control {
    border: 1.5px solid var(--v3-border);
    border-radius: var(--v3-radius-sm);
    background: var(--v3-bg-input);
    color: var(--v3-text);
    font-size: 14px;
    padding: 9px 12px;
    height: auto;
    transition: border-color .18s, box-shadow .18s;
}

.modal-body-produk-flash-sale .form-group .form-control:focus {
    outline: none;
    border-color: var(--v3-border-focus);
    box-shadow: 0 0 0 3px var(--v3-primary-ring);
    background: var(--v3-bg-card);
}

.modal-body-produk-flash-sale .form-group .form-control[readonly] {
    background: var(--v3-bg-input-ro);
    color: var(--v3-text-muted);
}

#modalEditorProdukFlashSale .modal-footer {
    background: var(--v3-bg-card);
    border-top: 1px solid var(--v3-border);
    padding: 12px 20px;
}

/* ── Modal footer buttons ───────────────────────────────────────── */
.modal-footer .actions-multi-canvas-footer .btn-reset-detail {
    display: inline-flex;
    padding: 9px 20px;
    align-items: center;
    gap: 8px;
    border-radius: var(--v3-radius-sm);
    border: 1.5px solid var(--v3-primary);
    background: var(--v3-bg-card);
    color: var(--v3-primary);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

.modal-footer .actions-multi-canvas-footer .btn-reset-detail:hover {
    background: var(--v3-primary);
    border-color: var(--v3-primary);
    color: #fff;
}

.modal-footer .actions-multi-canvas-footer .btn-reset-detail:disabled {
    pointer-events: none;
    border-color: var(--v3-border);
    color: var(--v3-text-sub);
    background: var(--v3-bg-input-ro);
}

/* ── Responsive — Tablet ────────────────────────────────────────── */
@media (max-width: 767px) {
    .frame-flash-sale {
        flex-direction: column;
        gap: 16px;
    }

    .frame-flash-sale .content-one,
    .frame-flash-sale .content-two {
        width: 100%;
        flex: none;
    }

    .frame-flash-sale .content-two .header {
        flex-direction: column;
    }

    .group-btn {
        justify-content: stretch;
    }

    .btn-simpan {
        width: 100%;
        justify-content: center;
    }

    #modalEditorProdukFlashSale .modal-dialog {
        margin-top: 40px;
        margin-left: 12px;
        margin-right: 12px;
    }
}

/* ── Responsive — Mobile ────────────────────────────────────────── */
@media (max-width: 440px) {
    .form-group-x .form-select {
        max-width: none;
        width: 100% !important;
    }

    .frame-flash-sale .content-one .body {
        gap: 10px;
        min-height: auto;
    }

    .frame-flash-sale .content-one .txt-title { font-size: 17px; }

    .add-produk-flash-sale .list-produk { width: 100%; }

    .list-footer {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    .list-footer .detail-produk p {
        color: var(--v3-text-muted);
        font-size: 13px;
        font-weight: 700;
        margin-bottom: 0;
    }

    .list-footer .detail-produk span {
        color: var(--v3-text);
        font-size: 14px;
        font-weight: 400;
        line-height: 1.4;
    }

    .form-group.mobilecl {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        height: 33px;
        padding-right: 16px;
        margin-bottom: 10px;
    }

    .header-list-flash-sale {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .add-produk-flash-sale .btn-add { width: 100%; }
    .add-produk-flash-sale .text-title { font-size: 20px; }
    .add-produk-flash-sale .text-subtitle { margin-bottom: 8px; }
}

.mut-dm {
    border: none;
    border-radius: 20px !important;
    overflow: hidden;
    padding: 28px 24px 24px;
    box-shadow: 0 24px 64px rgba(0,0,0,.18);
    position: relative;
}

.mut-dm__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: #f1f5f9;
    color: #64748b;
    font-size: 13px;
    cursor: pointer;
    transition: background .15s, color .15s;
    padding: 0;
}
.mut-dm__close:hover { background: #e2e8f0; color: #1e293b; }

/* Type label + badge row */
.mut-dm__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 20px;
    padding-right: 28px;
}

.mut-dm__type {
    font-size: 13px;
    font-weight: 600;
    color: var(--v3-text-muted);
    text-transform: uppercase;
    letter-spacing: .4px;
}

/* Product hero */
.mut-dm__hero {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--v3-bg-page);
    border-radius: var(--v3-radius);
    padding: 14px;
    margin-bottom: 20px;
}

.mut-dm__img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: var(--v3-radius-sm);
    flex-shrink: 0;
    background: #e2e8f0;
}

.mut-dm__hero-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.mut-dm__title {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--v3-text);
    line-height: 1.3;
}

.mut-dm__sub {
    display: block;
    font-size: 12px;
    color: var(--v3-text-sub);
}

/* Amount */
.mut-dm__amount-wrap {
    text-align: center;
    margin-bottom: 22px;
}

.mut-dm__amount {
    display: block;
    font-size: 26px;
    font-weight: 800;
    color: var(--v3-text);
    letter-spacing: -.5px;
    line-height: 1.2;
}

.mut-dm__extra {
    display: block;
    font-size: 12px;
    color: var(--v3-text-muted);
    margin-top: 4px;
}

/* Info rows */
.mut-dm__rows {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--v3-border);
}

.mut-dm__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--v3-border);
}

.mut-dm__row:last-child { border-bottom: none; }

.mut-dm__row-label {
    font-size: 13px;
    color: var(--v3-text-muted);
    flex-shrink: 0;
}

.mut-dm__row-val {
    font-size: 13px;
    font-weight: 600;
    color: var(--v3-text);
    text-align: right;
    word-break: break-all;
}

.mut-dm__row-val--mono {
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 12px;
    color: var(--v3-primary);
    background: var(--v3-primary-light);
    padding: 3px 8px;
    border-radius: 6px;
}

/* ── Filter bar ─────────────────────────────────────────── */
.mut-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.mut-search-wrap {
    position: relative;
    flex: 1;
    min-width: 160px;
}

.mut-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 12px;
    pointer-events: none;
}

.mut-search-input {
    display: block;
    width: 100%;
    height: 36px;
    padding: 0 30px 0 30px;
    border: 1.5px solid var(--v3-border);
    border-radius: 8px;
    font-size: 13px;
    color: var(--v3-text);
    background: var(--v3-bg-input);
    box-sizing: border-box;
    outline: none;
    font-family: var(--v3-font);
    transition: border-color .15s, box-shadow .15s;
}

.mut-search-input:focus {
    border-color: var(--v3-primary);
    box-shadow: 0 0 0 3px var(--v3-primary-ring);
}

.mut-search-input::placeholder { color: #b0b7c3; }

.mut-type-wrap { flex-shrink: 0; }

.mut-type-select {
    height: 36px;
    padding: 0 10px;
    border: 1.5px solid var(--v3-border);
    border-radius: 8px;
    font-size: 13px;
    color: var(--v3-text);
    background: var(--v3-bg-input);
    cursor: pointer;
    outline: none;
    font-family: var(--v3-font);
    transition: border-color .15s;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMjMzLjQgNDA2LjZjMTIuNSAxMi41IDMyLjggMTIuNSA0NS4zIDBsMTkyLTE5MmMxMi41LTEyLjUgMTIuNS0zMi44IDAtNDUuM3MtMzIuOC0xMi41LTQ1LjMgMEwyNTYgMzM4LjcgODYuNiAxNjkuNGMtMTIuNS0xMi41LTMyLjgtMTIuNS00NS4zIDBzLTEyLjUgMzIuOCAwIDQ1LjNsMTkyIDE5MnoiLz48L3N2Zz4=");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 11px;
    padding-right: 28px;
    min-width: 130px;
}

.mut-type-select:focus { border-color: var(--v3-primary); }

.mut-date-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    background: var(--v3-bg-input);
    border: 1.5px solid var(--v3-border);
    border-radius: 8px;
    font-size: 13px;
    color: var(--v3-text);
    white-space: nowrap;
    cursor: pointer;
    font-family: var(--v3-font);
    text-decoration: none;
    transition: border-color .15s, color .15s;
    flex-shrink: 0;
}

.mut-date-btn:hover { border-color: var(--v3-primary); color: var(--v3-primary); text-decoration: none; }
.mut-date-btn i { color: var(--v3-primary); font-size: 13px; }

/* ── Transaction list ────────────────────────────────────── */
.mut-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.mut-row {
    display: grid;
    grid-template-columns: 44px 1fr auto auto auto;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--v3-bg-card);
    border: 1px solid var(--v3-border);
    border-radius: var(--v3-radius);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

.mut-row:hover {
    border-color: #d0d7e0;
    box-shadow: 0 2px 12px rgba(0,0,0,.07);
}

.mut-row__img {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: var(--v3-radius-sm);
    flex-shrink: 0;
    background: #f0f3f6;
}

.mut-row__main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mut-row__title {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--v3-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mut-row__sub {
    display: block;
    font-size: 12px;
    color: var(--v3-text-sub);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mut-row__invoice {
    display: block;
    font-size: 11px;
    color: var(--v3-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mut-row__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    flex-shrink: 0;
}

.mut-row__date {
    display: block;
    font-size: 11px;
    color: var(--v3-text-muted);
    white-space: nowrap;
}

.mut-row__time {
    display: block;
    font-size: 10px;
    color: #b0b7c3;
    white-space: nowrap;
}

.mut-row__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
    min-width: 90px;
    text-align: right;
}

.mut-row__amount {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--v3-text);
    white-space: nowrap;
}

/* Credit = topup, refund, voucher, cashback → green */
.mut-amount--credit { color: #16a34a; }

/* Debit = saldo used for purchase, package payment → red */
.mut-amount--debit  { color: #dc2626; }

.mut-row__extra {
    display: block;
    font-size: 10px;
    color: var(--v3-text-muted);
    white-space: nowrap;
}

.mut-row__actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}

.mut-btn-detail,
.mut-btn-report {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--v3-border);
    border-radius: 6px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    font-size: 12px;
    transition: color .15s, border-color .15s, background .15s;
    padding: 0;
}

.mut-btn-detail:hover  { color: var(--v3-primary); border-color: var(--v3-primary); background: var(--v3-primary-light); }
.mut-btn-report:hover  { color: #dc2626; border-color: #fca5a5; background: #fef2f2; }

/* ── Badge ───────────────────────────────────────────────── */
.mut-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .3px;
    white-space: nowrap;
    line-height: 1.5;
}

.mut-badge.badge-green  { background: #dcfce7; color: #15803d; }
.mut-badge.badge-warn   { background: #fef9c3; color: #a16207; }
.mut-badge.badge-danger { background: #fee2e2; color: #b91c1c; }

/* ── Skeleton loading ────────────────────────────────────── */
.mut-skeleton {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--v3-bg-card);
    border: 1px solid var(--v3-border);
    border-radius: var(--v3-radius);
}

.mut-sk-img {
    width: 44px;
    height: 44px;
    border-radius: var(--v3-radius-sm);
    background: linear-gradient(90deg, #f0f3f6 25%, #e4e9ef 50%, #f0f3f6 75%);
    background-size: 200% 100%;
    animation: mut-shimmer 1.4s infinite;
    flex-shrink: 0;
}

.mut-sk-body {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.mut-sk-right {
    display: flex;
    flex-direction: column;
    gap: 7px;
    align-items: flex-end;
}

.mut-sk-line {
    height: 11px;
    border-radius: 6px;
    background: linear-gradient(90deg, #f0f3f6 25%, #e4e9ef 50%, #f0f3f6 75%);
    background-size: 200% 100%;
    animation: mut-shimmer 1.4s infinite;
}

.mut-sk-line.w-40 { width: 40%; }
.mut-sk-line.w-50 { width: 50%; }
.mut-sk-line.w-60 { width: 60%; }
.mut-sk-line.w-80 { width: 80%; }

@keyframes mut-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Pagination ──────────────────────────────────────────── */
.mut-pagination { margin-top: 4px; }

.mut-pag {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.mut-pag__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1.5px solid var(--v3-border);
    border-radius: 7px;
    background: var(--v3-bg-card);
    color: var(--v3-text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--v3-font);
    transition: border-color .15s, background .15s, color .15s;
}

.mut-pag__btn:hover:not(:disabled):not(.active) {
    border-color: var(--v3-primary);
    color: var(--v3-primary);
    background: var(--v3-primary-light);
}

.mut-pag__btn.active {
    background: var(--v3-primary);
    border-color: var(--v3-primary);
    color: #fff;
    cursor: default;
}

.mut-pag__btn:disabled {
    opacity: .4;
    cursor: not-allowed;
    pointer-events: none;
}

.mut-pag__ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 32px;
    font-size: 13px;
    color: var(--v3-text-muted);
    user-select: none;
}

.mut-pag__info {
    margin-left: 6px;
    font-size: 12px;
    color: var(--v3-text-muted);
    white-space: nowrap;
}

/* ── Empty state ─────────────────────────────────────────── */
.mut-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
    text-align: center;
    background: var(--v3-bg-card);
    border: 1px solid var(--v3-border);
    border-radius: var(--v3-radius);
}

.mut-empty img {
    width: 80px;
    opacity: .55;
    margin-bottom: 14px;
}

.mut-empty b {
    display: block;
    font-size: 15px;
    color: var(--v3-text);
    margin-bottom: 6px;
}

.mut-empty p {
    font-size: 13px;
    color: var(--v3-text-muted);
    margin: 0;
    line-height: 1.5;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 599px) {
    .mut-filters { gap: 6px; }
    .mut-search-wrap { flex: 1 1 100%; order: -1; }
    .mut-type-select { min-width: 110px; }

    .mut-row {
        grid-template-columns: 40px 1fr auto;
        grid-template-rows: auto auto;
        gap: 8px;
        padding: 10px 12px;
    }

    .mut-row__img  { width: 40px; height: 40px; grid-row: 1 / 3; }
    .mut-row__main { grid-column: 2; grid-row: 1; }
    .mut-row__meta { grid-column: 3; grid-row: 1; }

    .mut-row__right {
        grid-column: 2;
        grid-row: 2;
        align-items: flex-start;
        min-width: 0;
    }

    .mut-row__actions {
        grid-column: 3;
        grid-row: 2;
        flex-direction: row;
    }

    .mut-row__amount { font-size: 13px; }
    .mut-row__title  { font-size: 13px; }
}

/* Dialog sizing */
.cfm-dialog {
    max-width: 440px !important;
    width: calc(100% - 24px);
    margin: 12px auto;
}

/* Card */
.cfm-content {
    border: none !important;
    border-radius: 16px !important;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.16);
}

/* Header */
.cfm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 16px !important;
    border-bottom: 1px solid var(--v3-border) !important;
    background: var(--v3-bg-card);
}

.cfm-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--v3-text) !important;
    margin: 0 !important;
    line-height: 1.3;
}

.cfm-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: #f1f5f9;
    color: #64748b;
    font-size: 12px;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    transition: background .15s, color .15s;
}
.cfm-close:hover { background: #e2e8f0; color: #1e293b; }

/* Body */
.cfm-body {
    padding: 20px !important;
    display: flex;
    flex-direction: column;
    gap: 18px;
    background: var(--v3-bg-card);
}

/* Two-column row */
.cfm-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Form group */
.cfm-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Label */
.cfm-label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    margin: 0 !important;
    line-height: 1.4;
}

.cfm-required {
    color: #dc2626;
    margin-left: 2px;
}

/* Input */
.cfm-input {
    display: block;
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid var(--v3-border);
    border-radius: 8px;
    font-size: 14px;
    color: var(--v3-text);
    background: var(--v3-bg-input);
    box-sizing: border-box;
    outline: none;
    font-family: var(--v3-font);
    transition: border-color .15s, box-shadow .15s;
    -webkit-appearance: none;
    appearance: none;
}

.cfm-input:hover { border-color: var(--v3-primary); }

.cfm-input:focus {
    border-color: var(--v3-primary);
    box-shadow: 0 0 0 3px var(--v3-primary-ring);
}

.cfm-input::placeholder { color: #b0b7c3; font-size: 13px; }

/* Input with addon (% suffix, calendar icon) */
.cfm-input-addon {
    display: flex;
    align-items: stretch;
    border: 1.5px solid var(--v3-border);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
    background: var(--v3-bg-input);
}

.cfm-input-addon:focus-within {
    border-color: var(--v3-primary);
    box-shadow: 0 0 0 3px var(--v3-primary-ring);
}

.cfm-input-addon .cfm-input {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    flex: 1;
    min-width: 0;
}

.cfm-addon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--v3-text-muted);
    background: #f8fafc;
    border-left: 1.5px solid var(--v3-border);
    white-space: nowrap;
    flex-shrink: 0;
}

.cfm-addon--left {
    border-left: none;
    border-right: 1.5px solid var(--v3-border);
}

.cfm-input--cal { background: transparent !important; }

/* Error text */
.cfm-error {
    font-size: 12px !important;
    color: #dc2626 !important;
    font-style: normal !important;
    line-height: 1.4;
    display: none;
}

/* Footer */
.cfm-footer {
    display: flex !important;
    gap: 10px;
    padding: 14px 20px !important;
    border-top: 1px solid var(--v3-border) !important;
    background: var(--v3-bg-card);
}

/* ── Featured Product page (.fp-*) ──────────────────────────────────────── */
.fp-card {
    background: var(--v3-bg-card);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Controls row: toggle + cog */
.fp-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.fp-toggle-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.fp-cog-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: var(--v3-radius-sm);
}

/* Skeleton */
.fp-skeleton-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fp-sk-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: var(--v3-bg-card);
    border: 1.5px solid var(--v3-border);
    border-radius: var(--v3-radius);
}

.fp-sk-block {
    background: linear-gradient(90deg, #f0f3f6 25%, #e4e9ef 50%, #f0f3f6 75%);
    background-size: 200% 100%;
    animation: mut-shimmer 1.4s infinite;
    border-radius: 6px;
    flex-shrink: 0;
}

.fp-sk-thumb {
    width: 44px;
    height: 44px;
    border-radius: 8px;
}

/* Empty state */
.fp-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    text-align: center;
    color: var(--v3-text-muted);
    font-size: 14px;
    line-height: 1.6;
}

/* Product thumbnail inside fp-card list */
.fp-card .list-exist-bannerv2 .thumimage {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: var(--v3-radius-sm);
    border: 1.5px solid var(--v3-border);
    object-fit: contain;
    background: linear-gradient(90deg, #f0f3f6 25%, #e4e9ef 50%, #f0f3f6 75%);
    background-size: 200% 100%;
    animation: mut-shimmer 1.4s infinite;
    flex-shrink: 0;
    transition: background 0.2s;
    display: block;
}

.fp-card .list-exist-bannerv2 .thumimage.loaded {
    background: var(--v3-bg-input);
    animation: none;
    background-size: unset;
}

/* Info popover inside fp-card */
.fp-card .info-image-pop {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.fp-card .info-image-pop i {
    color: var(--v3-text-muted);
    font-size: 14px;
    cursor: help;
}

.fp-card .info-image-pop i:hover,
.fp-card .info-image-pop i.active {
    color: var(--v3-primary);
}

.fp-card .info-image-pop .popover-custom {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: 240px;
    background: #fff;
    border: 1px solid var(--v3-border);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    padding: 10px;
    z-index: 1050;
    display: none;
}

/* Tap-to-reorder caret buttons */
.fp-sort-btn {
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 3px;
}
.fp-sort-btn:hover {
    color: var(--v3-primary) !important;
    background: var(--v3-primary-light);
}
.fp-sort-btn:active {
    background: var(--v3-primary);
    color: #fff !important;
}

/* Responsive: stack controls label on small screens */
@media (max-width: 767px) {
    .fp-card .drag-sort-area {
        gap: 6px;
        padding: 4px 6px;
        min-width: 32px;
    }
    .fp-card .drag-sort-area i {
        font-size: 16px !important;
    }
    .fp-sort-btn {
        padding: 4px 6px;
    }

    .mut-type-wrap {
        width: 100%;
    }

    .mut-date-btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .fp-toggle-group .cbx span:last-child {
        font-size: 13px;
    }
    .fp-card {
        padding: 14px;
    }
}

/* ── PIN Modal (modal-content-pin) ─────────────────────────────────────────── */

/* Backdrop overlay */
.overlay-modal-custom,
.overlay-modal-custom-pin {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .50);
    backdrop-filter: blur(3px);
    z-index: 2000;
}

/* Centering frame */
.frame-modal-custom-popup,
.frame-modal-custom-popup-pin {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 20000;
    padding: 16px;
}

/* Modal card — fix broken transform from front.css */
.modal-custom-popup {
    width: 100%;
    max-width: 420px;
    padding: 24px 24px 20px;
    background: var(--v3-bg-card);
    border: 1.5px solid var(--v3-border);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .14);
    transform: none;          /* fix: front.css has translate(-50%,-50%) */
    position: relative;
    cursor: default;
}

/* Back / close button in toolbar */
.modal-custom-popup .toolbar {
    position: absolute;
    top: 14px;
    left: 14px;
    margin: 0;
}
.modal-custom-popup .toolbar a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1.5px solid var(--v3-border);
    color: var(--v3-text-muted);
    text-decoration: none;
    transition: color .15s, background .15s, border-color .15s;
}
.modal-custom-popup .toolbar a:hover {
    border-color: var(--v3-primary);
    color: var(--v3-primary);
    background: var(--v3-primary-light);
}

.modal-custom-popup .inner-content-modal { margin-top: 8px; }

/* ── Header section ── */
.modal-content-pin .header {
    margin-top: 20px;
    margin-bottom: 24px;
    text-align: center;
}
.modal-content-pin .header i.fas,
.modal-content-pin .header i.far,
.modal-content-pin .header i.fa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--v3-primary-light);
    color: var(--v3-primary);
    font-size: 22px;
    margin: 0 auto 16px;
    box-shadow: 0 0 0 6px var(--v3-primary-light);
    /* reset front.css rule that sets display:block / width:32px */
    width: 56px;
}
.modal-content-pin .header h1 {
    font-size: 20px;
    font-weight: 700;
    color: var(--v3-text);
    margin: 0 0 6px;
    line-height: 1.3;
    text-align: center;
}
.modal-content-pin .header h4 {
    font-size: 14px;
    color: var(--v3-text-muted);
    font-weight: 400;
    text-align: center;
    margin: 0;
}

/* Error alert inside modal */
.modal-content-pin .invalid-message-parent {
    border-radius: 8px;
    font-size: 13px;
    padding: 8px 12px;
    margin-bottom: 12px;
}

/* Description paragraph */
.modal-content-pin p.description {
    font-size: 13px;
    color: var(--v3-text-muted);
    text-align: center;
    padding: 12px 8px 0;
    margin: 0;
    line-height: 1.5;
}

/* ── Pincode plugin individual boxes ── */
.pincode-input-container {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: nowrap;
}
.pincode-input-container .pincode-input-text {
    width: 46px !important;
    height: 52px !important;
    border: 1.5px solid var(--v3-border) !important;
    border-radius: 8px !important;
    background: var(--v3-bg-input) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--v3-text) !important;
    text-align: center;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.pincode-input-container .pincode-input-text:focus {
    border-color: var(--v3-primary) !important;
    background: #fff !important;
    outline: none !important;
    box-shadow: 0 0 0 3px var(--v3-primary-light) !important;
}

/* Fallback: single password input (non-pincode-plugin) */
.modal-content-pin .area-insert-pin .form-control {
    height: 52px;
    border: 1.5px solid var(--v3-border);
    border-radius: 8px;
    background: var(--v3-bg-input);
    font-size: 20px;
    letter-spacing: .2em;
    color: var(--v3-text);
    box-shadow: none;
    transition: border-color .15s;
}
.modal-content-pin .area-insert-pin .form-control:focus {
    border-color: var(--v3-primary);
    background: #fff;
    box-shadow: none;
    outline: none;
}

/* ── Footer & CTA button ── */
.modal-footer-pin {
    padding-top: 16px;
    padding-bottom: 0;
}
.modal-footer-pin .btn-action-modal-full {
    display: block;
    width: 100%;
    padding: 11px 16px;
    background: var(--v3-primary);
    border: 1.5px solid var(--v3-primary);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.modal-footer-pin .btn-action-modal-full:hover {
    background: var(--v3-primary-dark);
    border-color: var(--v3-primary-dark);
    color: #fff;
    text-decoration: none;
}
.modal-footer-pin .btn-action-modal-full:disabled {
    background: var(--v3-border);
    border-color: var(--v3-border);
    color: var(--v3-text-muted);
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Success state ── */
.pin-successfully-changed {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 0 8px;
    gap: 12px;
    text-align: center;
}
.pin-successfully-changed i {
    font-size: 28px;
    color: #16a34a;
    background: #f0fdf4;
    border-radius: 50%;
    width: 72px;
    height: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}
.pin-successfully-changed b {
    font-size: 17px;
    font-weight: 700;
    color: var(--v3-text);
    margin: 0;
}

/* Mobile: centered (same as desktop) */
@media (max-width: 480px) {
    .frame-modal-custom-popup,
    .frame-modal-custom-popup-pin {
        align-items: center;
        padding: 16px;
    }
    .modal-custom-popup {
        max-width: 100%;
        border-radius: 16px;
        border-bottom: 1.5px solid var(--v3-border);
        padding: 24px 16px 20px;
    }
    .pincode-input-container .pincode-input-text {
        width: 40px !important;
        height: 48px !important;
        font-size: 18px !important;
    }
    .pincode-input-container { gap: 6px; }
}

/* ── Payment Channel Settings (pcs-*) ─────────────────────────────────────── */
.pcs-panel {
    display: flex;
    gap: 0;
    background: var(--v3-bg-card);
    border: 1.5px solid var(--v3-border);
    border-radius: var(--v3-radius);
    overflow: hidden;
    min-height: 420px;
}

/* Sidebar nav */
.pcs-sidebar {
    width: 200px;
    flex-shrink: 0;
    border-right: 1.5px solid var(--v3-border);
    overflow-y: auto;
    background: var(--v3-bg);
}
.pcs-sidebar .channel-pembayaran {
    list-style: none;
    padding: 8px 0;
    margin: 0;
}
.pcs-sidebar .channel-pembayaran li hr {
    display: none;
}
.pcs-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    text-decoration: none;
    color: var(--v3-text);
    font-size: 13px;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: background .15s, color .15s, border-color .15s;
}
.pcs-nav-item img {
    width: 22px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}
.pcs-nav-item span { flex: 1; line-height: 1.3; }
.pcs-nav-item:hover {
    background: var(--v3-primary-light);
    color: var(--v3-primary);
    border-left-color: var(--v3-primary);
    text-decoration: none;
}
.pcs-nav-item.active {
    background: var(--v3-primary-light);
    color: var(--v3-primary);
    font-weight: 600;
    border-left-color: var(--v3-primary);
}

/* Content pane */
.pcs-content {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
}

/* Channel grid (AJAX-generated) */
.pcs-content .channel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
    align-content: start;
}
.pcs-content .channel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 10px;
    background: var(--v3-bg-card);
    border: 1.5px solid var(--v3-border);
    border-radius: var(--v3-radius);
    text-align: center;
    transition: border-color .15s, box-shadow .15s;
    box-shadow: none;
    width: auto;
    margin: 0;
}
.pcs-content .channel:hover {
    border-color: var(--v3-primary);
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.pcs-content .channel.disabled {
    opacity: 0.45;
    pointer-events: none;
    box-shadow: none;
}
.pcs-content .channel img {
    height: 24px;
    max-width: 80px;
    width: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}
.pcs-content .channel b {
    font-size: 11px;
    font-weight: 600;
    color: var(--v3-text);
    display: block;
    line-height: 1.3;
}

/* Toggle switch overrides */
.uniplay-switch-parent {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
}
.uniplay-switch-parent label {
    font-size: 11px;
    font-weight: 600;
    color: var(--v3-text-muted);
    width: 20px;
    text-align: center;
}
.uniplay-switch-parent .switch-uniplay {
    width: 36px;
    height: 20px;
    background-color: #e2e8f0;
    border-color: #e2e8f0;
    border-radius: 10px;
    cursor: pointer;
    transition: background .2s, border-color .2s;
}
.uniplay-switch-parent .switch-uniplay::before {
    width: 16px;
    height: 16px;
    top: 2px;
    left: 2px;
    background: #fff;
    border-color: #cbd5e0;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
    border-radius: 50%;
    transform: none;
    transition: transform .2s, background .2s, border-color .2s;
}
.uniplay-switch-parent .switch-uniplay:checked {
    background-color: var(--v3-primary);
    border-color: var(--v3-primary);
}
.uniplay-switch-parent .switch-uniplay:checked::before {
    background: #fff;
    border-color: var(--v3-primary);
    transform: translateX(16px);
}
.uniplay-switch-parent .switch-uniplay:disabled {
    background-color: #e2e8f0;
    pointer-events: none;
    opacity: 0.5;
}
.uniplay-switch-parent .switch-uniplay.loading {
    pointer-events: none;
    opacity: 0.7;
}

/* pcs-toggle: proper toggle for payment channel cards */
.pcs-toggle {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
}
.pcs-toggle-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.pcs-toggle-track {
    width: 40px;
    height: 22px;
    background: #e2e8f0;
    border-radius: 11px;
    position: relative;
    transition: background .2s;
    flex-shrink: 0;
}
.pcs-toggle-input:checked + .pcs-toggle-track {
    background: var(--v3-primary);
}
.pcs-toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: left .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.pcs-toggle-input:checked + .pcs-toggle-track .pcs-toggle-thumb {
    left: 21px;
}
.pcs-toggle-input:disabled + .pcs-toggle-track {
    background: #e2e8f0;
    opacity: 0.5;
    cursor: not-allowed;
}
.pcs-toggle--loading {
    pointer-events: none;
}
.pcs-toggle--loading .pcs-toggle-track {
    opacity: 0.55;
    animation: mut-shimmer 1s infinite;
}

/* Skeleton loader */
.pcs-skeleton {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
    align-content: start;
}
.pcs-sk-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 10px;
    border: 1.5px solid var(--v3-border);
    border-radius: var(--v3-radius);
    background: var(--v3-bg-card);
}
.pcs-sk-logo {
    width: 60px;
    height: 22px;
    border-radius: 4px;
    background: var(--v3-border);
    animation: mut-shimmer 1.4s infinite;
}
.pcs-sk-name {
    width: 70px;
    height: 10px;
    border-radius: 4px;
    background: var(--v3-border);
    animation: mut-shimmer 1.4s infinite;
}
.pcs-sk-toggle {
    width: 50px;
    height: 18px;
    border-radius: 9px;
    background: var(--v3-border);
    animation: mut-shimmer 1.4s infinite;
}

/* Mobile: sidebar → horizontal tab bar */
@media (max-width: 767px) {
    .pcs-panel {
        flex-direction: column;
        min-height: unset;
    }
    .pcs-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1.5px solid var(--v3-border);
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }
    .pcs-sidebar .channel-pembayaran {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        padding: 0 4px;
        gap: 0;
    }
    .pcs-sidebar .channel-pembayaran li { flex-shrink: 0; }
    .pcs-nav-item {
        flex-direction: column;
        gap: 4px;
        padding: 8px 12px;
        font-size: 11px;
        border-left: none;
        border-bottom: 3px solid transparent;
        white-space: nowrap;
    }
    .pcs-nav-item img { width: 20px; height: 18px; }
    .pcs-nav-item:hover,
    .pcs-nav-item.active {
        border-left-color: transparent;
        border-bottom-color: var(--v3-primary);
    }
    .pcs-content {
        padding: 12px;
    }
    .pcs-content .channel-grid,
    .pcs-skeleton {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 8px;
    }
    .pcs-content .channel { padding: 10px 6px; }
    .pcs-sk-card { padding: 10px 6px; }
}

/* Account security page */
.secure-kyc-alert {
    width: min(1100px, calc(100% - 32px));
    background: #fef3f2;
    border: 1px solid #fee4e2;
    border-radius: 10px !important;
    color: #b42318;
    padding: 10px 14px;
    gap: 12px;
}
.secure-kyc-alert__text,
.secure-kyc-alert__link {
    color: #b42318;
}
.secure-kyc-alert__link-short {
    display: none;
}

.secure-account-page {
    align-items: flex-start;
}
.secure-account-page .secure-mobile-toolbar {
    display: none;
}
.secure-account-page .dashboard-right-wrapper {
    min-width: 0;
}
.secure-panel {
    min-height: auto;
    border: 1px solid #e4e7ec;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
    overflow: hidden;
}
.secure-panel .heading {
    padding: 18px 20px 0;
}
.secure-panel .heading.mb-3 {
    margin-bottom: 0 !important;
}
.secure-panel .header-text {
    color: #101828;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}
.frame-secure {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.frame-otp-secure,
.riwayat-transaksi {
    padding: 16px 20px 20px;
}

.secure-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
    padding: 12px 14px;
    color: #b42318;
    background: #fef3f2;
    border: 1px solid #fee4e2;
    border-radius: 10px;
    text-decoration: none !important;
    transition: background .15s, border-color .15s, transform .15s;
}
.secure-banner:hover {
    color: #b42318;
    background: #fee4e2;
    border-color: #fecdca;
    transform: translateY(-1px);
}
.secure-banner__text,
.secure-banner__action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.secure-banner__text {
    font-size: 14px;
    line-height: 1.4;
}
.secure-banner__action {
    flex-shrink: 0;
    font-weight: 700;
    font-size: 13px;
}

.card-secure {
    margin-bottom: 0;
    border: 1px solid #d0d5dd;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}
.card-header-v2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 !important;
    padding: 14px 16px;
    color: #344054;
    background: #f8fafc;
    border-bottom: 1px solid #eaecf0;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
}
.status-fa-aktif,
.status-fa-nonaktif {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: max-content;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
}
.status-fa-aktif {
    color: #027a48;
    background: #ecfdf3;
}
.status-fa-nonaktif {
    color: #b42318;
    background: #fef3f2;
}
.card-grid,
.card-grid-remove {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}
.card-grid {
    align-items: center;
    padding: 18px 16px;
}
.card-grid .card-body,
.card-grid-remove .card-body {
    display: flex;
    min-width: 0;
}
.card-grid .card-body {
    align-items: center;
    gap: 14px;
    padding: 0 !important;
}
.card-grid-remove .card-body {
    width: 55%;
    flex-direction: column;
    gap: 12px;
    padding: 18px 16px;
    border-right: 1px solid #eaecf0;
}
.card-grid .card-icon,
.card-grid-remove .card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    border: 1px solid #e4e7ec;
    border-radius: 12px;
    background: #fff;
}
.card-grid .card-icon img,
.card-grid-remove .card-icon img {
    max-width: 34px;
    max-height: 34px;
}
.text-card-content-title {
    margin: 0 !important;
    color: #344054;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.45;
}
.text-card-content-sub {
    color: #667085;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
}
.button-group,
.btn-group {
    display: flex;
    align-items: center;
    gap: 8px;
}
.btn-orange,
.btn-nonaktif-two-fa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    transition: background .15s, border-color .15s, color .15s;
}
.btn-orange {
    color: #fff;
    background: var(--v3-primary);
    border: 1px solid var(--v3-primary);
}
.btn-orange:hover {
    color: #fff;
    background: var(--v3-primary-dark);
    border-color: var(--v3-primary-dark);
}
.btn-orange:disabled {
    color: #fff;
    background: #cecece;
    border-color: #cecece;
}
.btn-nonaktif-two-fa {
    width: fit-content;
    color: #b42318;
    background: #fff;
    border: 1px solid #b42318;
}
.btn-nonaktif-two-fa:hover {
    color: #b42318;
    background: #fef3f2;
}

.card-grid-remove .card-setting {
    display: flex;
    width: 45%;
    flex-direction: column;
    gap: 12px;
    padding: 18px 16px;
}
.card-grid-remove .card-setting .setting-menu-header {
    display: flex;
    padding-bottom: 12px;
    border-bottom: 1px solid #eaecf0;
}
.card-grid-remove .text-header,
.card-grid-remove .card-setting .setting-menu p {
    margin: 0 !important;
    color: #344054;
    font-size: 14px;
    line-height: 1.4;
}
.card-grid-remove .text-header {
    font-weight: 700;
}
.card-grid-remove .card-setting .setting-menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.card-grid-remove .card-setting .setting-menu .adpi-switch-parent {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
}
.card-grid-remove .card-setting .setting-menu .adpi-switch-parent label {
    width: auto;
    color: #667085;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    margin: 0;
    cursor: pointer;
    transition: color .15s;
}
.card-grid-remove .card-setting .setting-menu .adpi-switch-parent:has(.switch-uniplay:checked) label:first-child,
.card-grid-remove .card-setting .setting-menu .adpi-switch-parent:not(:has(.switch-uniplay:checked)) label:last-child {
    color: var(--v3-primary);
}
.card-grid-remove .card-setting .setting-menu .adpi-switch-parent .switch-uniplay {
    position: relative;
    width: 42px;
    height: 24px;
    flex: 0 0 42px;
    margin: 0;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    border-radius: 999px;
    outline: none;
    background-color: #e4e7ec;
    box-shadow: inset 0 0 0 1px #d0d5dd;
    cursor: pointer;
    transition: background .18s, box-shadow .18s, opacity .18s;
}
.card-grid-remove .card-setting .setting-menu .adpi-switch-parent .switch-uniplay::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .28);
    transform: translateX(0);
    transition: transform .18s;
}
.card-grid-remove .card-setting .setting-menu .adpi-switch-parent .switch-uniplay:checked {
    background-color: var(--v3-primary);
    box-shadow: inset 0 0 0 1px var(--v3-primary);
}
.card-grid-remove .card-setting .setting-menu .adpi-switch-parent .switch-uniplay:checked::before {
    background: #fff;
    transform: translateX(18px);
}
.card-grid-remove .card-setting .setting-menu .adpi-switch-parent .switch-uniplay:disabled {
    pointer-events: none;
    opacity: .55;
}
.card-grid-remove .card-setting .setting-menu .adpi-switch-parent .switch-uniplay.loading,
.card-grid-remove .card-setting .setting-menu .adpi-switch-parent .switch-uniplay.loading::before {
    pointer-events: none;
}

.secure-account-page .table-responsive {
    overflow-x: auto;
    border-radius: 12px;
}
.riwayat-table {
    width: 100%;
    border-spacing: 0;
    border-collapse: separate;
    overflow: hidden;
    background: #fff;
    border-radius: 12px;
}
.riwayat-table th,
.riwayat-table td {
    border-bottom: 1px solid #eaecf0;
}
.riwayat-table th {
    padding: 12px 16px;
    color: #667085;
    background: #f9fafb;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    white-space: nowrap;
}
.riwayat-table td {
    padding: 15px 16px;
    background: #fff;
    vertical-align: middle;
}
.riwayat-table tr:hover td {
    background: #fcfcfd;
}
.riwayat-table td:first-child,
.riwayat-table th:first-child {
    border-left: 1px solid #eaecf0;
}
.riwayat-table td:last-child,
.riwayat-table th:last-child {
    border-right: 1px solid #eaecf0;
}
.riwayat-table tr:first-child th:first-child {
    border-top-left-radius: 12px;
}
.riwayat-table tr:first-child th:last-child {
    border-top-right-radius: 12px;
}
.riwayat-table tr:last-child td {
    border-bottom: 1px solid #eaecf0;
}
.riwayat-table tr:last-child td:first-child {
    border-bottom-left-radius: 12px;
}
.riwayat-table tr:last-child td:last-child {
    border-bottom-right-radius: 12px;
}
.riwayat-table .header {
    color: #344054;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
}
.riwayat-table .subtext {
    display: inline-block;
    margin-top: 3px;
    color: #667085;
    font-size: 13px;
    line-height: 18px;
}
.riwayat-table .status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 82px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    white-space: nowrap;
}
.riwayat-table .active {
    color: #027a48;
    background: #ecfdf3;
}
.riwayat-table .device {
    color: #175cd3;
    background: #eff8ff;
}
.riwayat-table .expired {
    color: #b42318;
    background: #fef3f2;
}
.logout-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 6px 10px;
    color: #344054;
    background: #fff;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    line-height: 18px;
    cursor: pointer;
    transition: color .15s, background .15s, border-color .15s;
}
.logout-btn:hover {
    color: #b42318;
    background: #fef3f2;
    border-color: #fecdca;
}
.secure-session-cell--location { width: 22%; }
.secure-session-cell--browser { width: 24%; }
.secure-session-cell--login,
.secure-session-cell--expired { width: 20%; }
.secure-empty-session {
    vertical-align: middle;
    text-align: center;
    color: #667085;
}

.modal-turn-on-2fa-auth,
.modal-turn-off-2fa-auth {
    display: flex;
    width: 100%;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    background: #fff;
    border-radius: 12px;
}
.modal-turn-on-2fa-auth {
    max-width: 645px;
}
.modal-turn-on-2fa-auth h1,
.content-validate-otp-header h1,
.header-modal .text-header {
    width: 100%;
    margin: 0 !important;
    color: rgba(0, 0, 0, .72);
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
}
.modal-close {
    color: #777;
    cursor: pointer;
    transition: color .15s;
}
.modal-close:hover {
    color: #111827;
}
.secure-modal-close-row {
    display: flex;
    width: 100%;
    justify-content: flex-end;
}
.modal-turn-on-2fa-auth .modal-turn-on-2fa-auth-inner {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ddd;
}
.modal-turn-on-2fa-auth .modal-turn-on-2fa-auth-inner .modal-turn-on-2fa-auth-instructions {
    margin-top: 20px;
}
.modal-turn-on-2fa-auth .modal-turn-on-2fa-auth-inner .modal-turn-on-2fa-auth-instructions p,
.modal-turn-on-2fa-auth .modal-footer-2fa-auth-inner p,
.content-validate-otp-header p {
    margin: 0 !important;
    color: #6b7280;
    font-size: 15px;
    line-height: 1.5;
}
.modal-turn-on-2fa-auth .modal-turn-on-2fa-auth-inner .modal-turn-on-2fa-auth-instructions ol {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 10px 0 0 20px;
    color: #6b7280;
    font-size: 15px;
    line-height: 1.45;
}
.modal-turn-on-2fa-auth .modal-turn-on-2fa-auth-inner .modal-turn-on-2fa-auth-instructions ol span {
    font-weight: 700;
}
.modal-turn-on-2fa-auth .modal-turn-on-2fa-auth-inner .modal-turn-on-2fa-auth-qrcode {
    display: flex;
    justify-content: center;
    flex: 0 0 47%;
    margin-top: 20px;
    overflow: hidden;
    border: 1px solid #d9d9d9;
    border-radius: 10px;
}
.modal-turn-on-2fa-auth .modal-turn-on-2fa-auth-inner .modal-turn-on-2fa-auth-qrcode img {
    width: 180px;
    height: 180px;
}
.modal-turn-on-2fa-auth .modal-footer-2fa-auth-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding-bottom: 12px;
    margin-bottom: 15px;
    border-bottom: 1px solid #ddd;
}
.modal-turn-on-2fa-auth .modal-footer-2fa-auth-inner .modal-footer-2fa-auth-inner-flex {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    margin-bottom: 5px;
}
.modal-turn-on-2fa-auth .modal-footer-2fa-auth-inner .modal-footer-2fa-auth-inner-flex input {
    flex: 1 1 auto;
    width: 100px;
    height: 50px;
    margin: 0;
    padding: 0 17px;
    color: #757575;
    background: #f2f2f2;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-size: 13px;
    letter-spacing: .65px;
}
.modal-turn-on-2fa-auth .modal-footer-2fa-auth-inner .modal-footer-2fa-auth-inner-flex a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    color: #6b7280 !important;
    background: #fff;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-size: 22px;
    text-decoration: none !important;
}
.content-validate-otp-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    align-items: center;
}
.content-validate-otp-header span {
    margin-bottom: 20px;
    color: #0f0f0f;
    text-align: center;
    font-size: 17px;
    font-weight: 700;
}
.content-validate-otp-body {
    width: 100%;
}
.content-validate-otp-body input {
    width: 100%;
    padding: 14px 17px;
    color: #111827;
    background: #fff;
    border: 2px solid #ddd;
    border-radius: 10px;
    font-size: 15px;
}
.content-validate-otp-body input::placeholder {
    color: #b3b3b3;
}
.content-validate-otp-body .error-text,
.content-validate-otp-body .error-text-remove-fa {
    color: #fd2b2b;
    text-align: center;
    font-size: 13px;
}
.secure-otp-error {
    display: none;
    text-align: right;
}
.content-validate-otp-body .validate-text {
    display: block;
    margin-top: 8px;
    color: #545454;
    text-align: center;
    font-size: 13px;
}
.content-validate-otp-body span {
    color: #ee8103;
    font-weight: 700;
}
.secure-resend-disabled {
    cursor: not-allowed;
}
.btn-two-fa,
.btn-remove-fa,
.btn-default-fa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 47px;
    padding: 12px 24px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
}
.btn-two-fa {
    color: #fff;
    background: var(--v3-primary);
    border: 1px solid var(--v3-primary);
}
.btn-two-fa:hover {
    color: #fff;
    background: var(--v3-primary-dark);
}
.btn-two-fa:disabled,
.btn-remove-fa:disabled {
    background: #cecece;
    border-color: #cecece;
}
.btn-remove-fa {
    color: #fff;
    background: #ee3c3c;
    border: 1px solid #ee3c3c;
}
.btn-remove-fa:hover {
    color: #fff;
    background: #d93131;
}
.btn-default-fa {
    color: #667085;
    background: transparent;
    border: 1px solid #98a2b3;
}
.btn-default-fa:hover {
    color: #344054;
    background: #f2f4f7;
}
.btn-group-two-fa {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
}
.btn-group-two-fa--otp {
    margin-top: 20px;
}
.btn-two-fa--modal-action {
    width: min(180px, 34%);
}
.secure-loading-hidden {
    display: none;
}

/* Desktop: fix table column width distribution */
@media (min-width: 768px) {
    .secure-account-page .riwayat-table {
        table-layout: fixed;
        width: 100%;
    }
}

/* Truncate overflow in session cell header/subtext spans — desktop + mobile */
.secure-account-page .riwayat-table .secure-session-cell .header,
.secure-account-page .riwayat-table .secure-session-cell .subtext {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* ── KYC notification — responsive ── */
@media (max-width: 767px) {
    .dashboard-right-wrapper > .alert.d-flex.justify-content-between {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    .secure-kyc-alert {
        width: calc(100% - 24px);
        margin-top: 8px !important;
        margin-bottom: 8px !important;
        padding: 9px 10px;
        gap: 8px;
    }
    .secure-kyc-alert__text {
        flex: 1;
        min-width: 0;
        font-size: 13px;
    }
    .secure-kyc-alert__link {
        font-size: 13px;
    }
    .secure-kyc-alert__link-full {
        display: none;
    }
    .secure-kyc-alert__link-short {
        display: inline;
    }

    .secure-account-page {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0 12px 12px;
        box-sizing: border-box;
    }
    .secure-account-page .left-sidebar {
        display: none;
    }
    .secure-account-page .secure-mobile-toolbar {
        display: flex;
        margin: 4px 0 10px;
    }
    .secure-account-page .dashboard-right-wrapper {
        width: 100%;
        padding: 0;
        background: transparent;
    }
    .secure-panel {
        border-radius: 12px;
    }
    .secure-panel .heading {
        padding: 16px 16px 0;
    }
    .secure-panel .header-text {
        font-size: 18px;
    }
    .frame-secure {
        gap: 12px;
    }
    .frame-otp-secure,
    .riwayat-transaksi {
        padding: 14px 14px 16px;
    }

    .secure-banner {
        align-items: flex-start;
        padding: 10px;
    }
    .secure-banner__text {
        align-items: flex-start;
        font-size: 12px;
    }
    .secure-banner__action-label {
        display: none;
    }

    .card-header-v2 {
        flex-wrap: wrap;
        padding: 13px 14px;
    }
    .card-grid,
    .card-grid-remove {
        flex-direction: column;
    }
    .card-grid {
        align-items: stretch;
        padding: 16px 14px;
    }
    .card-grid .card-body {
        align-items: flex-start !important;
    }
    .card-grid-remove .card-body,
    .card-grid-remove .card-setting {
        width: 100%;
        padding: 16px 14px;
    }
    .card-grid-remove .card-body {
        border-right: 0;
        border-bottom: 1px solid #eaecf0;
    }
    .card-grid-remove .card-setting .setting-menu {
        align-items: flex-start;
    }
    .text-card-content-title {
        font-size: 15px;
    }
    .text-card-content-sub {
        font-size: 13px;
    }
    .button-group,
    .btn-orange,
    .btn-nonaktif-two-fa {
        width: 100%;
    }

    .secure-account-page .table-responsive {
        overflow: visible;
    }
    .secure-account-page .riwayat-table,
    .secure-account-page .riwayat-table tbody,
    .secure-account-page .riwayat-table tr,
    .secure-account-page .riwayat-table td {
        display: block;
        width: 100%;
    }
    .secure-account-page .riwayat-table {
        border-radius: 0;
        background: transparent;
    }
    .secure-account-page .riwayat-table thead {
        display: none;
    }
    .secure-account-page .riwayat-table tr {
        margin-bottom: 10px;
        padding: 12px;
        background: #fff;
        border: 1px solid #eaecf0;
        border-radius: 12px;
        box-shadow: 0 6px 18px rgba(15, 23, 42, .04);
    }
    .secure-account-page .riwayat-table td {
        display: grid;
        grid-template-columns: minmax(92px, 36%) 1fr;
        gap: 8px;
        padding: 8px 0;
        border: 0;
        background: transparent;
    }
    .secure-account-page .riwayat-table td:first-child,
    .secure-account-page .riwayat-table td:last-child {
        border: 0;
    }
    .secure-account-page .riwayat-table .secure-session-cell br {
        display: none;
    }
    .secure-account-page .riwayat-table td::before {
        color: #667085;
        font-size: 12px;
        font-weight: 700;
        line-height: 20px;
    }
    .secure-account-page .riwayat-table td:nth-child(1)::before { content: "IP/Location"; }
    .secure-account-page .riwayat-table td:nth-child(2)::before { content: "Browser"; }
    .secure-account-page .riwayat-table td:nth-child(3)::before { content: "Terakhir Login"; }
    .secure-account-page .riwayat-table td:nth-child(4)::before { content: "Keluar Pada"; }
    .secure-account-page .riwayat-table td:nth-child(5)::before { content: "Sesi"; }
    .secure-account-page .riwayat-table td:nth-child(6)::before { content: "Opsi"; }
    .secure-empty-session {
        display: block !important;
        text-align: center;
    }
    .secure-account-page .riwayat-table .secure-empty-session::before {
        content: none;
    }

    .modal-turn-on-2fa-auth,
    .modal-turn-off-2fa-auth {
        padding: 20px 16px;
    }
    .modal-turn-on-2fa-auth .modal-turn-on-2fa-auth-inner,
    .modal-turn-on-2fa-auth .modal-footer-2fa-auth-inner,
    .modal-turn-on-2fa-auth .modal-footer-2fa-auth-inner .modal-footer-2fa-auth-inner-flex {
        flex-direction: column;
    }
    .modal-turn-on-2fa-auth .modal-turn-on-2fa-auth-inner .modal-turn-on-2fa-auth-qrcode {
        width: min(70%, 220px);
        flex-basis: auto;
        margin: 0 auto;
    }
    .modal-turn-on-2fa-auth .modal-turn-on-2fa-auth-inner .modal-turn-on-2fa-auth-qrcode img {
        width: 100%;
        height: auto;
    }
    .content-validate-otp-header p {
        font-size: 14px;
    }
    .btn-group-two-fa {
        flex-direction: column;
    }
    .btn-two-fa--modal-action,
    .btn-two-fa,
    .btn-default-fa,
    .btn-remove-fa {
        width: 100% !important;
    }
}

/* ── API Playground (ported from front.css — needed when v3_panel_mode skips front.css) ── */
.area-api-playground .header h1 {
    color: #000000;
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 35px;
}
.area-api-playground .header h1.nomargin { margin-bottom: 0; }
.area-api-playground .sub-header { margin-top: 10px; font-size: 15px; }
.area-api-playground .sub-header.extra-margin-top { margin-top: 30px; }
.area-api-playground .sub-header a { color: #e6700f; text-decoration: none; font-weight: 600; }
.area-api-playground .sub-header a:hover { color: #c25c08; }
.area-api-playground .api-key-area b {
    margin-top: -1rem;
    color: #363636;
    background: #EEF1F3;
    padding: 6px 6px 6px 12px;
    height: 44px;
    margin: 0 auto;
    border-radius: 4px;
    margin-bottom: 5px;
    font-weight: 600;
    font-size: 18px;
    font-family: 'Source Sans Pro', sans-serif;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    border: 1px solid #CED4DA;
    position: relative;
    gap: 10px;
}
.area-api-playground .api-key-area b i {
    font-size: 15px;
    cursor: pointer;
    background: #fff;
    border-radius: 5px;
    padding: 8px;
    border: 1px solid #CED4DA;
    gap: 10px;
}
.area-api-playground .api-key-area b i:hover { color: #b4b4b4; }
.area-api-playground .api-key-area b i:focus,
.area-api-playground .api-key-area b i:active { color: gray; }
.area-api-playground .api-key-area.disabled b {
    background: #f1f3f5;
    border-color: #d6d9dc;
    color: #9e9e9e;
    opacity: 1;
}
.area-api-playground .api-key-area.disabled b span { filter: blur(3px); }
.area-api-playground .api-key-area.disabled b i {
    background: #e0e0e0;
    border-color: #d6d9dc;
    color: #9e9e9e;
    cursor: not-allowed;
    pointer-events: none;
}
.area-api-playground .area-tips-area {
    margin-top: 20px;
    padding: 15px 20px;
    background-color: #fff8f2;
    border-radius: 6px;
}
.area-api-playground .area-tips-area .tips-header {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
}
.area-api-playground .area-tips-area .tips-header i { color: #B42318; font-size: 14px; margin-right: 6px; }
.area-api-playground .area-tips-area .tips-header b { color: #B42318; font-size: 14px; font-weight: 400; font-family: 'Source Sans Pro', sans-serif; }
.area-api-playground .area-tips-area p { font-size: 14px; color: #000000; margin: 0; line-height: 16px; font-weight: 400; font-family: 'Source Sans Pro', sans-serif; }
.area-api-playground .btn-outline-orange {
    border: 1px solid #E5700F;
    color: #E5700F;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 14px;
    display: block;
    text-align: center;
    border-radius: 8px;
    line-height: 18px;
    margin-bottom: 25px;
    transition: all .2s ease-in-out;
}
.area-api-playground .btn-orange {
    background-color: #E5700F;
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 14px;
    display: block;
    text-align: center;
    border-radius: 8px;
    line-height: 18px;
    margin-bottom: 25px;
    transition: all .2s ease-in-out;
}
.area-api-playground .btn-outline-orange.disabled,
.area-api-playground .btn-outline-orange:disabled,
.area-api-playground .btn-orange.disabled,
.area-api-playground .btn-orange:disabled {
    background-color: gray;
    border-color: gray;
    color: #dddddd;
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}
.area-api-playground .area-action-button .change-api-key:disabled {
    border: 1px solid #d0d0d0;
    background-color: #ececec;
    color: #666666;
}
.area-api-playground .area-action-button .change-api-key:hover { background: #b4580c; }
.area-api-playground .area-action-button .change-api-key:disabled:hover {
    border: 1px solid #d0d0d0;
    background-color: #ececec;
    color: #666666;
}
.area-api-playground .saldo-uniplay-point {
    color: #E6700F;
    background: #FFF6ED;
    font-size: 14px;
    font-weight: 600;
    text-wrap: nowrap;
    text-align: center;
    padding: 2px 10px;
    border-radius: 0.5em;
    border: 1px solid #E6700F;
    display: block;
    width: 225px;
    float: left;
    margin-top: -23px;
    margin-left: 73px;
}
.area-api-playground .saldo-uniplay-point .saldo-uniplay-point-name { font-weight: 500 !important; }
.area-input-api { margin-bottom: 20px; }
.area-input-api .control-label { color: #404040; font-size: 14px; font-weight: 600; margin-bottom: 15px; }
.area-input-api .form-control { flex: 0 0 auto; width: 66.6666666667%; }

/* Toggle Custom (API page App Mode switch) */
.frame-toogle-custom {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    float: right;
    margin-top: -25px;
}
.frame-toogle-custom p { margin: 0; font-size: 15px; }
.toggle-custom {
    box-sizing: border-box;
    display: block;
    height: fit-content;
    width: fit-content;
    margin: auto;
    cursor: pointer;
    flex: 1;
    margin-left: 10px;
}
.toggle-custom-input { display: none; margin: 0; }
.toggle-custom-off,
.toggle-custom-on {
    height: 1.8125rem;
    width: 1.8125rem;
    color: rgba(46, 45, 44, 0.1);
    vertical-align: top;
    text-align: center;
    line-height: 1.8125rem !important;
}
.toggle-custom-input:checked + .toggle-custom-controller.default-success {
    border: 0.125rem solid #ff9800;
    background: #ff9800;
}
.toggle-custom-input:checked + .toggle-custom-controller.default-success:after { left: 22px; }
.toggle-custom-controller.default-success {
    margin-top: 5px;
    position: relative;
    display: inline-block;
    height: 19px;
    width: 45px;
    border: 0.125rem solid rgba(46, 45, 44, 0.05);
    border-radius: 1.5625rem;
    box-shadow: inset 0 0 0.1875rem rgb(46 45 44 / 25%);
    background: rgba(46, 45, 44, 0.025);
    transition: all 0.25s ease;
}
.toggle-custom-controller.default-success:after {
    position: absolute;
    top: -3px;
    left: 0;
    content: '';
    display: block;
    height: 22px;
    width: 22px;
    border-radius: 1.5625rem;
    box-shadow: 0 0.0625rem 0.125rem rgb(46 45 44 / 20%);
    background: white;
    transition: all 0.25s ease;
    border: 1px solid #ccc;
}
.toggle-custom-off.active { color: red; }
.toggle-custom-on.active { color: green; }

/* ── API Playground — API key text overflow fix (all viewports) ── */
.area-api-playground .api-key-area b {
    overflow: hidden;
}
.area-api-playground .api-key-area b .api-key-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-family: monospace;
}
.area-api-playground .api-key-area b .api-key-copy-btn {
    flex-shrink: 0;
}

/* ── API Playground — responsive ── */
@media (max-width: 767px) {
    /* Header: stack h1 / toggle / balance vertically */
    .area-api-playground .header {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .list-denom {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }

    .area-list-payment-method .child-box .short-payment-support-info img {
        height: auto;
        max-height: 15px;
        max-width: min(40px, 20%);
        margin-right: 8px;
    }
    .area-list-payment-method .child-box .button-action-payment ul {
        grid-template-columns: 1fr;
    }
    .area-list-payment-method .child-box .button-action-payment ul li {
        min-width: 0;
        box-sizing: border-box;
    }
    .area-api-playground .header .frame-toogle-custom {
        float: none;
        margin-top: 0;
        justify-content: flex-start;
    }
    .area-api-playground .header .saldo-uniplay-point {
        float: none;
        margin: 0;
        width: 100%;
        text-align: left;
    }

    /* API key row */
    .area-api-playground .api-key-area b {
        font-size: 13px;
        height: auto;
        min-height: 44px;
        padding: 8px 10px;
    }
    .area-api-playground .api-key-area b .api-key-text {
        font-size: 12px;
    }

    /* Buttons: full width on mobile */
    .area-api-playground .btn-outline-orange,
    .area-api-playground .btn-orange {
        display: block;
        width: 100%;
        text-align: center;
        margin-bottom: 10px;
    }
    .area-api-playground .btn-outline-orange.btn-dokumentasi,
    .area-api-playground .btn-outline-orange.change-api-key {
        width: 100%;
    }

    /* Row cards: full width, add spacing */
    .area-api-playground .row {
        row-gap: 0;
    }
    .area-api-playground .row .col-md-6 {
        margin-bottom: 8px;
    }

    /* Domain config input */
    .area-api-playground .input-configuration-dns .btn {
        width: 100%;
    }

    /* DNS table — allow horizontal scroll */
    .area-api-playground .table-configuration-dns {
        font-size: 12px;
    }
    .area-api-playground .table-configuration-dns td,
    .area-api-playground .table-configuration-dns th {
        white-space: nowrap;
        max-width: 180px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .area-api-playground .table-configuration-dns .d-flex {
        flex-direction: column;
    }
    .area-api-playground .table-configuration-dns .btn-outline-orange {
        width: 100%;
    }

    /* Generate API key form */
    .area-input-api .form-control {
        width: 100%;
    }
}

/* ── PIN modal verify button (ported from front.css) ── */
.modal-content-pin .btn-verifikasi {
    display: flex;
    height: 47px;
    padding: 12px 24px;
    justify-content: center;
    align-items: center;
    gap: 6px;
    border-radius: 65px;
    background: #EE8103;
    border: 1px solid #EE8103;
    color: #FFF;
    text-align: center;
    font-family: "Source Sans Pro";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.modal-content-pin .btn-verifikasi:hover { background: #DA6B0E; }
.modal-content-pin .btn-verifikasi:disabled {
    background: gray;
    border: 1px solid gray;
    color: #fff;
}
.modal-content-pin .button-group {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

/* ── 2FA button (global — needed on any panel page that opens the 2FA modal) ── */
.btn-two-fa {
    border: 1px solid #c46415;
    background: #e6700f;
    color: white;
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
    padding: 7px 12px;
    display: block;
    text-align: center;
    border-radius: 5px;
    width: 100%;
    margin: 0 auto;
    transition: all .2s ease-in-out;
    cursor: pointer;
}
.btn-two-fa:hover {
    background: #c25c08;
    color: #fff !important;
}
.btn-two-fa:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    pointer-events: none;
}

.multiple-button {
    display: flex;
    gap: 8px;
    width: 100%;
}

/* ── Rating modal ── */
#modalEditorCustomRating .modal-dialog { max-width: 420px; }

.v3-star-picker {
    display: flex;
    gap: 2px;
}
.v3-star-btn {
    background: none;
    border: none;
    font-size: 36px;
    line-height: 1;
    color: #e0e0e0;
    cursor: pointer;
    padding: 4px;
    flex: 1;
    text-align: center;
    transition: color .12s ease, transform .1s ease;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}
.v3-star-btn.active { color: #FBBF24; }
.v3-star-btn.v3-hover { color: #FCD34D; }
.v3-star-btn:hover { transform: scale(1.15); }

.v3-rating-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    background: var(--v3-primary-light);
    border-radius: 8px;
    font-size: 12.5px;
    color: var(--v3-primary-dark);
    line-height: 1.5;
}
.v3-rating-note i { margin-top: 2px; flex-shrink: 0; }

/* Modal widths */
#modalEditorCustomDenomPricing .modal-dialog  { max-width: 540px; }
#modalEditorCustomDetailProduk .modal-dialog  { max-width: 580px; }

/* ── Atur Harga Jual — modal content (v3 panel, front.css not loaded) ── */

/* Product header row */
.heading-change-denom {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--v3-border);
}
.heading-change-denom img.game-logo {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--v3-border);
}
.heading-change-denom h4 {
    flex: 1;
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--v3-text);
    line-height: 1.3;
}
.heading-change-denom .options-config-price {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.heading-change-denom .options-config-price b {
    font-size: 13px;
    font-weight: 600;
    color: var(--v3-text-sub);
    white-space: nowrap;
}
.heading-change-denom .options-config-price select {
    font-size: 13px;
    padding: 5px 10px;
    border: 1px solid var(--v3-border);
    border-radius: 6px;
    color: var(--v3-text);
    background: var(--v3-bg-input);
    outline: none;
    cursor: pointer;
}
.heading-change-denom .options-config-price select:focus {
    border-color: var(--v3-border-focus);
    box-shadow: 0 0 0 3px var(--v3-primary-ring);
}

/* Table */
.frame-table-integrated-modal {
    overflow-x: auto;
}
.table-integrated-modal {
    width: 100%;
    border-collapse: collapse;
}
.table-integrated-modal thead tr {
    background: var(--v3-bg-input-ro);
    border-bottom: 1px solid var(--v3-border);
}
.table-integrated-modal thead tr th {
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--v3-text-sub);
    white-space: nowrap;
}
.table-integrated-modal thead tr th:first-child { padding-left: 20px; }
.table-integrated-modal thead tr th:last-child  { padding-right: 20px; text-align: center; }

.table-integrated-modal tbody tr {
    border-bottom: 1px solid var(--v3-border);
    transition: background .12s;
}
.table-integrated-modal tbody tr:last-child { border-bottom: none; }
.table-integrated-modal tbody tr:hover { background: var(--v3-bg-input-ro); }

.table-integrated-modal tbody tr td {
    padding: 10px 14px;
    font-size: 14px;
    color: var(--v3-text);
    vertical-align: middle !important;
}
.table-integrated-modal tbody tr td:first-child { padding-left: 20px; }
.table-integrated-modal tbody tr td:last-child  { padding-right: 20px; text-align: center; }

/* Denom name + sort arrows */
.table-integrated-modal .header-area-flexsort {
    display: flex;
    align-items: center;
    gap: 8px;
}
.table-integrated-modal thead tr th .header-area-flexsort { justify-content: flex-start; }

.table-integrated-modal .drag-sort-area {
    display: flex;
    flex-direction: column;
    gap: 1px;
    cursor: pointer;
}
.table-integrated-modal .drag-sort-area i {
    font-size: 11px;
    color: var(--v3-text-muted);
    line-height: 1;
    transition: color .12s;
}
.table-integrated-modal .drag-sort-area i:hover { color: var(--v3-primary); }

/* Price input */
.table-integrated-modal tbody tr td input[type="text"] {
    width: 130px;
    min-width: 130px;
    max-width: 130px;
    height: 34px;
    padding: 4px 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--v3-text);
    border: 1.5px solid var(--v3-border);
    border-radius: 6px;
    background: var(--v3-bg-input);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.table-integrated-modal tbody tr td input[type="text"]:focus {
    border-color: var(--v3-border-focus);
    box-shadow: 0 0 0 3px var(--v3-primary-ring);
}
.table-integrated-modal tbody tr td input[type="text"][readonly] {
    color: var(--v3-text-muted);
    background: var(--v3-bg-input-ro);
    border-color: var(--v3-border);
    cursor: not-allowed;
    opacity: 1;
    box-shadow: none;
}
.table-integrated-modal tbody tr td input[type="text"][readonly]:focus {
    border-color: var(--v3-border);
    box-shadow: none;
}

/* Percentage input in header */
.table-integrated-modal .percentage-global-denom {
    width: 50px !important;
    max-width: 50px;
    height: 30px;
    padding: 3px 8px;
    font-size: 13px;
    border: 1.5px solid var(--v3-border);
    border-right: none;
    border-radius: 6px 0 0 6px;
    background: var(--v3-bg-input);
    outline: none;
}
.table-integrated-modal .percentage-global-denom:focus {
    border-color: var(--v3-border-focus);
}
.table-integrated-modal .input-group-sm .input-group-text {
    font-size: 12px;
    padding: 3px 8px;
    background: var(--v3-bg-input-ro);
    border-color: var(--v3-border);
    border-radius: 0 6px 6px 0;
    color: var(--v3-text-sub);
}

/* On/Off toggle (uniplay-switch-parent) */
.uniplay-switch-parent {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
}
.uniplay-switch-parent label {
    font-size: 12px;
    font-weight: 600;
    color: var(--v3-text-muted);
    cursor: pointer;
    min-width: 18px;
}
.uniplay-switch-parent .switch-uniplay {
    width: 2.2rem;
    height: 1.2rem;
    cursor: pointer;
    appearance: none;
    background: #d1d5db;
    border-radius: 50px;
    position: relative;
    transition: background .2s;
    flex-shrink: 0;
}
.uniplay-switch-parent .switch-uniplay::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0.125rem;
    transform: translateY(-50%);
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
    transition: left .2s;
}
.uniplay-switch-parent .switch-uniplay:checked {
    background: var(--v3-primary);
}
.uniplay-switch-parent .switch-uniplay:checked::before {
    left: calc(2.2rem - 0.9rem - 0.125rem);
}
.uniplay-switch-parent .switch-uniplay:disabled {
    opacity: .5;
    pointer-events: none;
}

/* Feedback labels under price input */
.table-integrated-modal .recomended-sellprice,
.table-integrated-modal .value-valid,
.table-integrated-modal .valuer-err {
    display: block;
    font-size: 11.5px;
    font-style: italic;
    margin-top: 3px;
    line-height: 1.3;
}
.table-integrated-modal .value-valid  { color: #2ea84e; }
.table-integrated-modal .valuer-err   { color: #d92d20; }
.table-integrated-modal .recomended-sellprice { color: var(--v3-text-muted); }
.table-integrated-modal .recomended-sellprice a {
    color: var(--v3-primary);
    text-decoration: none;
    font-weight: 600;
}
.table-integrated-modal .recomended-sellprice a:hover { text-decoration: underline; }

/* ── Pricing toggle (Atur Harga Jual modal) ── */
.pricing-toggle-wrap {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    justify-content: center;
}
.pricing-toggle-wrap label {
    font-size: 11px;
    font-weight: 600;
    color: #9ca3af;
    cursor: pointer;
    min-width: 16px;
    text-align: center;
    user-select: none;
}
.pricing-toggle-input {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    width: 36px;
    height: 20px;
    border-radius: 20px;
    background: #d1d5db;
    cursor: pointer;
    transition: background .2s ease;
    flex-shrink: 0;
    margin: 0;
}
.pricing-toggle-input::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
    transition: left .2s ease;
}
.pricing-toggle-input:checked {
    background: #f97316;
}
.pricing-toggle-input:checked::after {
    left: 18px;
}
.pricing-toggle-input:disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* ── Two-button modal footer ── */
.modal-footer-dual {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 10px;
    justify-content: space-between !important;
    flex-wrap: nowrap;
}
.modal-footer-dual .actions-multi-canvas-footer {
    flex: 1;
    display: flex !important;
    margin-top: 0 !important;
    width: auto !important;
}
.modal-footer-dual .actions-multi-canvas-footer button {
    flex: 1;
    height: 100%;
    justify-content: center;
    text-align: center;
}
@media (max-width: 767px) {
    .modal-footer-dual {
        flex-direction: column !important;
        gap: 8px;
    }
    .modal-footer-dual .actions-multi-canvas-footer {
        width: 100% !important;
        flex-direction: row !important;
    }
    .modal-footer-dual .actions-multi-canvas-footer button {
        width: 100%;
    }
}

/* ── Percentage input group (Harga Jual header) ── */
.pct-input-wrap {
    display: inline-flex;
    align-items: center;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}
.pct-input {
    width: 52px;
    padding: 3px 6px;
    font-size: 12px;
    border: none;
    outline: none;
    background: transparent;
    color: #374151;
    text-align: right;
}
.pct-input::placeholder {
    color: #9ca3af;
}
.pct-input-addon {
    padding: 3px 7px;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    background: #f3f4f6;
    border-left: 1px solid #d1d5db;
    line-height: 1;
    align-self: stretch;
    display: flex;
    align-items: center;
}

/* ═══════════════════════════════════════════════════════════════
   SweetAlert2 — reseller panel theme override
   ══════════════════════════════════════════════════════════════ */

/* Popup container */
div.swal2-popup {
    border-radius: var(--v3-radius-lg) !important;
    font-family: var(--v3-font) !important;
    box-shadow: var(--v3-shadow-popup) !important;
    padding-bottom: 28px !important;
}

/* Title */
div.swal2-popup .swal2-title {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--v3-text) !important;
}

/* Body text */
div.swal2-popup .swal2-html-container {
    font-size: 14px !important;
    color: var(--v3-text-sub) !important;
}

/* Confirm button — primary orange */
div.swal2-popup .swal2-confirm {
    background-color: var(--v3-primary) !important;
    border-color: var(--v3-primary) !important;
    border-radius: var(--v3-radius-sm) !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 10px 22px !important;
    box-shadow: none !important;
}
div.swal2-popup .swal2-confirm:hover {
    background-color: var(--v3-primary-dark) !important;
    border-color: var(--v3-primary-dark) !important;
}
div.swal2-popup .swal2-confirm:focus {
    box-shadow: 0 0 0 3px var(--v3-primary-ring) !important;
}

/* Cancel button — ghost neutral */
div.swal2-popup .swal2-cancel {
    background-color: transparent !important;
    border: 1.5px solid var(--v3-border) !important;
    border-radius: var(--v3-radius-sm) !important;
    color: var(--v3-text-sub) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 10px 22px !important;
    box-shadow: none !important;
}
div.swal2-popup .swal2-cancel:hover {
    background-color: var(--v3-bg-input-ro) !important;
    border-color: #bbb !important;
}
div.swal2-popup .swal2-cancel:focus {
    box-shadow: none !important;
}

/* Deny button — danger outline */
div.swal2-popup .swal2-deny {
    background-color: transparent !important;
    border: 1.5px solid #fca5a5 !important;
    border-radius: var(--v3-radius-sm) !important;
    color: #ef4444 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 10px 22px !important;
    box-shadow: none !important;
}
div.swal2-popup .swal2-deny:hover {
    background-color: #fef2f2 !important;
    border-color: #ef4444 !important;
}

/* Actions row spacing */
div.swal2-popup .swal2-actions {
    gap: 10px !important;
    margin-top: 4px !important;
}

/* KYC verification flow */
#kyc-steps-wrapper,
#step-success,
#step-failed {
    --kyc-primary: var(--v3-primary, #E6700F);
    --kyc-primary-dark: var(--v3-primary-dark, #C45F0C);
    --kyc-ring: rgba(230, 112, 15, .14);
    --kyc-border: var(--v3-border, #E3E8EF);
    --kyc-muted: var(--v3-text-muted, #697586);
    --kyc-text: var(--v3-text, #202939);
    --kyc-soft: #FFF7ED;
    --kyc-panel: #FFFFFF;
}
#kyc-steps-wrapper > .row,
#step-success,
#step-failed {
    margin-left: 0;
    margin-right: 0;
}
#kyc-steps-wrapper .card,
#step-success > div,
#step-failed > div {
    border: 1px solid var(--kyc-border);
    border-radius: 14px;
    background: var(--kyc-panel);
    box-shadow: 0 14px 34px rgba(15, 23, 42, .08) !important;
    overflow: hidden;
}
#kyc-steps-wrapper .card-body {
    padding: 24px;
}
#kyc-steps-wrapper .card-body > .mb-3.d-flex.justify-content-center img,
#kyc-steps-wrapper #ocr-loading-section img,
#step-success img,
#step-failed img {
    width: 88px;
    max-width: 100%;
    filter: drop-shadow(0 10px 18px rgba(230, 112, 15, .14));
}
#kyc-steps-wrapper .step-1-page .card-body > p.fw-bold.text-danger {
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin: 0 auto 14px;
    padding: 7px 12px;
    border: 1px solid #FED7AA;
    border-radius: 999px;
    color: #C2410C !important;
    background: var(--kyc-soft);
    font-size: 13px;
    line-height: 1.35;
}
#kyc-steps-wrapper .step-1-page ol {
    display: grid;
    gap: 10px;
    margin: 0;
    padding-left: 20px;
    color: var(--kyc-text);
    font-size: 14px;
    line-height: 1.55;
}
#kyc-steps-wrapper .step-1-page ol ul {
    margin-top: 8px;
    padding-left: 18px;
    color: var(--kyc-muted);
}
#kyc-steps-wrapper .step-1-page .form-check {
    margin-top: 18px;
    padding: 14px;
    border: 1px solid #FDE68A;
    border-radius: 12px;
    background: #FFFBEB;
}
#kyc-steps-wrapper .step-1-page .card > .d-flex.align-items-center {
    margin: 0 !important;
    padding: 14px 18px;
    border-top: 1px solid var(--kyc-border);
    background: #F8FAFC;
    color: var(--kyc-text);
}
#kyc-steps-wrapper .history-button {
    color: var(--kyc-primary);
    text-decoration: none;
}
#kyc-steps-wrapper .stepper-wrapper {
    position: relative;
    gap: 0;
    padding: 14px;
    border: 1px solid var(--kyc-border);
    border-radius: 14px;
    background: #F8FAFC;
    overflow: visible !important;
}
#kyc-steps-wrapper .stepper-item {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    min-width: 0;
    color: var(--kyc-muted);
    text-align: center;
}
#kyc-steps-wrapper .stepper-item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 18px;
    left: calc(50% + 24px);
    width: calc(100% - 48px);
    height: 2px;
    background: #D0D5DD;
    z-index: -1;
}
#kyc-steps-wrapper .stepper-item.completed:not(:last-child)::after,
#kyc-steps-wrapper .stepper-item.active:not(:last-child)::after {
    background: linear-gradient(90deg, var(--kyc-primary), #FDBA74);
}
#kyc-steps-wrapper .step-counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid #D0D5DD;
    border-radius: 50%;
    background: #FFFFFF;
    color: #98A2B3;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .05);
}
#kyc-steps-wrapper .stepper-item.active .step-counter,
#kyc-steps-wrapper .stepper-item.completed .step-counter {
    border-color: var(--kyc-primary);
    background: var(--kyc-primary);
    color: #FFFFFF;
    box-shadow: 0 0 0 5px var(--kyc-ring);
}
#kyc-steps-wrapper .step-name {
    max-width: 110px;
    color: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
}
#kyc-steps-wrapper .stepper-item.active .step-name,
#kyc-steps-wrapper .stepper-item.completed .step-name {
    color: var(--kyc-text);
}
#kyc-steps-wrapper .kyc-liveness-frame,
#kyc-steps-wrapper .ratio.ratio-16x9 {
    border: 1px dashed #FDBA74;
    border-radius: 14px !important;
    background: linear-gradient(180deg, #FFF7ED 0%, #FFFFFF 100%) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8);
}
#kyc-steps-wrapper .kyc-liveness-frame .btn-orange {
    box-shadow: 0 10px 20px rgba(230, 112, 15, .18);
}
#kyc-steps-wrapper #camera-preview,
#kyc-steps-wrapper #ocr-placeholder-image,
#kyc-steps-wrapper #liveness-iframe {
    border-radius: 14px;
}
#kyc-steps-wrapper .btn-orange,
#step-failed .btn-orange {
    min-height: 42px;
    border-radius: 10px;
    background: var(--kyc-primary);
    border-color: var(--kyc-primary);
    box-shadow: 0 8px 18px rgba(230, 112, 15, .18);
}
#kyc-steps-wrapper .btn-orange:hover,
#step-failed .btn-orange:hover {
    background: var(--kyc-primary-dark);
    border-color: var(--kyc-primary-dark);
}
#kyc-steps-wrapper .btn-orange:disabled {
    color: #FFFFFF;
    background: #D0D5DD;
    border-color: #D0D5DD;
    box-shadow: none;
}
#kyc-steps-wrapper .btn-outline-orange {
    min-height: 40px;
    border-radius: 10px;
    color: var(--kyc-primary);
    border-color: #FDBA74;
    background: #FFFFFF;
    font-weight: 700;
}
#kyc-steps-wrapper .btn-outline-orange:hover {
    color: #FFFFFF;
    border-color: var(--kyc-primary);
    background: var(--kyc-primary);
}
#kyc-steps-wrapper #ocr-loading-section,
#kyc-steps-wrapper .step-5-page .card-body > .d-flex.flex-column {
    margin: 0 !important;
    padding: 34px 22px;
    border: 1px solid var(--kyc-border);
    border-radius: 14px;
    background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
}
#kyc-steps-wrapper #ocr-loading-section span:last-child,
#kyc-steps-wrapper .step-5-page .card-body > .d-flex.flex-column span:last-child {
    max-width: 620px;
    margin-left: auto !important;
    margin-right: auto !important;
    color: var(--kyc-muted);
    font-size: 14px;
    line-height: 1.55;
}
#step-success > div,
#step-failed > div {
    width: min(100%, 720px);
    margin: 0 auto 16px;
    padding: 42px 24px;
}
#step-success > div {
    border-color: #BBF7D0;
    background: linear-gradient(180deg, #F0FDF4 0%, #FFFFFF 100%);
}
#step-failed > div {
    border-color: #FECACA;
    background: linear-gradient(180deg, #FEF2F2 0%, #FFFFFF 100%);
}
#step-success .fs-4,
#step-failed .fs-4 {
    color: var(--kyc-text);
    font-size: 24px !important;
    line-height: 1.3;
}
#step-success span:not(.fw-bold),
#step-failed span:not(.fw-bold) {
    color: var(--kyc-muted);
    font-size: 14px;
    line-height: 1.55;
}
#ocrModal .modal-content,
#kycHistoryModal .modal-content {
    border: 1px solid var(--v3-border, #E3E8EF);
    border-radius: 14px !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .18);
}
#ocrModal .category-item {
    border-bottom: 1px solid #EAECF0;
}
#ocrModal .category-item:last-child {
    border-bottom: 0;
}
#ocrModal .payment-item-child {
    border-color: #EAECF0 !important;
    border-radius: 10px !important;
    transition: border-color .15s, background .15s, box-shadow .15s, transform .15s;
}
#ocrModal .payment-item-child:not(.disabled):hover {
    border-color: #FDBA74 !important;
    background: #FFF7ED !important;
    transform: translateY(-1px);
}
#ocrModal .payment-item-child.selected {
    border-color: var(--v3-primary, #E6700F) !important;
    background: #FFF7ED !important;
    box-shadow: 0 0 0 3px rgba(230, 112, 15, .12);
}

@media (max-width: 767px) {
    #kyc-steps-wrapper .card-body {
        padding: 18px 14px;
    }
    #kyc-steps-wrapper .stepper-wrapper {
        padding: 12px 8px;
    }
    #kyc-steps-wrapper .step-counter {
        width: 34px;
        height: 34px;
        font-size: 13px;
    }
    #kyc-steps-wrapper .stepper-item:not(:last-child)::after {
        top: 16px;
        left: calc(50% + 20px);
        width: calc(100% - 40px);
    }
    #kyc-steps-wrapper .step-name {
        max-width: 82px;
        font-size: 10px;
    }
    #kyc-steps-wrapper .step-1-page ol {
        font-size: 13px;
    }
    #kyc-steps-wrapper .step-1-page .card > .d-flex.align-items-center,
    #kyc-steps-wrapper .step-1-page .card > .d-flex.align-items-center > div {
        flex-direction: row;
        align-items: center !important;
        gap: 8px;
    }
    #kyc-steps-wrapper .d-flex.justify-content-center.gap-3,
    #kyc-steps-wrapper .text-center.mb-3.d-flex {
        gap: 8px !important;
    }
    #kyc-steps-wrapper .btn-orange,
    #kyc-steps-wrapper .btn-outline-orange,
    #step-failed .btn-orange {
        width: 100%;
    }
    #step-success > div,
    #step-failed > div {
        padding: 30px 16px;
    }
}