/* ============================================================
   Public Payment Pages — Premium Redesign
   ============================================================
   Invoice-direct checkout (kanonik):
   Semua halaman /billing/invoice, /pay (lookup + satu kartu), operasional,
   renewal, dan ISP memakai markup yang sama dari PHP:
   pgs_public_invoice_direct_card_body_html() +
   pgs_public_invoice_direct_identity_html().
   Satu stylesheet ini adalah sumber gaya bersama; tema kartu/teal pada
   .pgs-pay-app--invoice-direct memakai variabel --pgs-inv-* (bagian di bawah).
   ============================================================ */

/* ---------- Variables ---------- */
:root {
    --pgs-public-bg: #f0f4f8;
    --pgs-public-accent: #0d9488;
    --pgs-public-accent-dark: #0f766e;
    --pgs-public-accent-light: #5eead4;
    --pgs-public-text: #0f172a;
    --pgs-public-muted: #64748b;
    --pgs-public-card: rgba(255, 255, 255, 0.72);
    --pgs-public-border: rgba(15, 23, 42, 0.07);
    --pgs-public-border-strong: rgba(15, 23, 42, 0.14);
    --pgs-public-soft: rgba(241, 245, 249, 0.6);
    --pgs-public-glow: rgba(13, 148, 136, 0.18);
    --pgs-public-shadow: 0 8px 32px rgba(15, 23, 42, 0.07);
    --pgs-public-shadow-lg: 0 20px 60px rgba(15, 23, 42, 0.1);
    --pgs-public-radius: 1rem;
    --pgs-public-radius-lg: 1.35rem;
    --pgs-public-radius-pill: 9999px;
    --pgs-public-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Animated gradient mesh background ---------- */
body.pgs-public-body {
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    background:
        radial-gradient(ellipse 80% 60% at 10% 20%, rgba(13, 148, 136, 0.07) 0%, transparent 60%),
        radial-gradient(ellipse 60% 80% at 90% 80%, rgba(59, 130, 246, 0.05) 0%, transparent 55%),
        radial-gradient(ellipse 70% 50% at 50% 50%, rgba(168, 85, 247, 0.04) 0%, transparent 50%),
        linear-gradient(175deg, #f0f4f8 0%, #e8ecf4 40%, #f1f5f9 100%);
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
    color: var(--pgs-public-text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.pgs-public-body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 50% 40% at 20% 70%, rgba(13, 148, 136, 0.06) 0%, transparent 70%),
        radial-gradient(ellipse 40% 60% at 80% 30%, rgba(99, 102, 241, 0.04) 0%, transparent 60%);
    animation: pgs-mesh-drift 20s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}

@keyframes pgs-mesh-drift {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(-2%, 3%) scale(1.03); }
    100% { transform: translate(2%, -1%) scale(0.98); }
}

/* ---------- Keyframes ---------- */
@keyframes pgs-attention-shake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-5px); }
    50%      { transform: translateX(5px); }
    75%      { transform: translateX(-3px); }
}

@keyframes pgs-payment-spin {
    to { transform: rotate(360deg); }
}

@keyframes pgs-fade-in-up {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes pgs-glow-pulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--pgs-public-glow); }
    50%      { box-shadow: 0 0 0 8px transparent; }
}

@keyframes pgs-border-shimmer {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ---------- Global entry animation ---------- */
.pgs-public-shell,
.pgs-public-shell--commerce {
    animation: pgs-fade-in-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.pgs-public-shell--commerce {
    animation-delay: 0.08s;
}

/* ---------- Shell ---------- */
.pgs-public-shell {
    max-width: 560px;
    position: relative;
    z-index: 1;
}

.pgs-public-shell--commerce {
    max-width: 1080px;
    position: relative;
    z-index: 1;
}

.pgs-public-shell--checkoutnew {
    max-width: 1200px;
    position: relative;
    z-index: 1;
}

/* ---------- Typography ---------- */
.pgs-public-kicker {
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--pgs-public-accent);
    font-weight: 800;
    margin-bottom: 0.5rem;
}

.pgs-public-lead {
    max-width: 720px;
    margin: 0 auto;
    color: var(--pgs-public-muted);
    font-size: 1.05rem;
    line-height: 1.65;
}

/* ---------- Glassmorphism card ---------- */
.pgs-public-card {
    border: 1px solid var(--pgs-public-border);
    border-radius: var(--pgs-public-radius-lg);
    background: var(--pgs-public-card) !important;
    background-image: none !important;
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    box-shadow:
        var(--pgs-public-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: box-shadow var(--pgs-public-transition), transform var(--pgs-public-transition);
}

.pgs-pay-mobile-shell,
.pgs-invoice-shell {
    overflow: hidden;
}

.pgs-card-kicker {
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--pgs-public-accent);
    font-weight: 800;
    margin-bottom: 0.6rem;
}

/* ---------- Mobile search ---------- */
.pgs-mobile-search {
    display: grid;
    gap: 0.85rem;
}

.pgs-mobile-search__input {
    min-height: 3.5rem;
    border-radius: var(--pgs-public-radius-pill);
    padding-inline: 1.25rem;
    border: 1px solid var(--pgs-public-border);
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
    transition: border-color var(--pgs-public-transition), box-shadow var(--pgs-public-transition), background var(--pgs-public-transition);
}

.pgs-mobile-search__input:focus {
    border-color: var(--pgs-public-accent);
    box-shadow: 0 0 0 4px var(--pgs-public-glow), 0 4px 16px rgba(15, 23, 42, 0.06);
    background: rgba(255, 255, 255, 0.95);
    outline: none;
}

.pgs-mobile-search__button {
    min-height: 3rem;
    border-radius: var(--pgs-public-radius-pill);
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* Invoice-direct card uses solid white bg — no glassmorphism needed inside */
.pgs-invoice-direct-card .pgs-mobile-search__input {
    background: rgba(255, 255, 255, 0.95);
}

/* ---------- Alerts ---------- */
.pgs-public-body .alert {
    border: 0;
    border-radius: var(--pgs-public-radius);
    line-height: 1.6;
    padding: 1rem 1.2rem;
    font-size: 0.9rem;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Provider belum diatur — pola alert Bootstrap seperti checkout / halaman lain (bukan banner .pgs-gateway-notice) */
.pgs-invoice-direct-card .pgs-gateway-unconfigured {
    text-align: left;
    border-radius: 10px;
    box-shadow: none;
}

.pgs-gateway-notice {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    width: 100%;
    margin-top: 0.85rem;
    padding: 0.8rem 1rem;
    border-radius: 0.95rem;
    text-align: center;
    border: 1px solid rgba(180, 83, 9, 0.18);
    box-shadow: 0 10px 24px rgba(217, 119, 6, 0.08);
}

.pgs-gateway-notice--sandbox {
    background: linear-gradient(180deg, #fef3c7 0%, #fde68a 100%);
    color: #854d0e;
}

.pgs-gateway-notice__label {
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1.1;
}

.pgs-gateway-notice__text {
    font-size: 0.8rem;
    line-height: 1.45;
    color: rgba(133, 77, 14, 0.92);
}

/* ---------- Payment methods ---------- */
.pgs-payment-methods {
    display: grid;
    gap: 0.9rem;
}

.pgs-payment-methods.is-attention {
    animation: pgs-attention-shake 0.38s ease;
}

.pgs-payment-methods__list {
    display: grid;
    gap: 0.9rem;
}

/* ---------- Payment method pill ---------- */
.pgs-payment-method {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1.1rem;
    border: 1.5px solid var(--pgs-public-border);
    border-radius: var(--pgs-public-radius-pill);
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-weight: 600;
    color: var(--pgs-public-text);
    cursor: pointer;
    transition:
        border-color var(--pgs-public-transition),
        background var(--pgs-public-transition),
        box-shadow var(--pgs-public-transition),
        transform var(--pgs-public-transition);
}

.pgs-payment-method__label {
    flex: 1 1 auto;
    min-width: 0;
}

.pgs-payment-method:hover {
    border-color: var(--pgs-public-accent);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 20px var(--pgs-public-glow);
    transform: translateY(-1px);
}

.pgs-payment-method input[type="radio"],
.pgs-payment-method input[type="checkbox"] {
    accent-color: var(--pgs-public-accent);
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
}

.pgs-payment-method input:disabled {
    cursor: not-allowed;
}

.pgs-payment-method.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    background: var(--pgs-public-soft);
    backdrop-filter: none;
}

.pgs-payment-method.is-disabled:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--pgs-public-border);
    background: var(--pgs-public-soft);
}

/* ---------- Payment method icon ---------- */
.pgs-payment-method__icon {
    width: 1.6rem;
    height: 1.6rem;
    flex: 0 0 1.6rem;
    border-radius: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 70% 70%;
}

.pgs-payment-method__icon--qris {
    background-color: rgba(13, 148, 136, 0.1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d9488' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='6' height='6'/%3E%3Crect x='14' y='4' width='6' height='6'/%3E%3Crect x='4' y='14' width='6' height='6'/%3E%3Cpath d='M14 14h3v3'/%3E%3Cpath d='M20 14v6h-6'/%3E%3C/svg%3E");
}

.pgs-payment-method__icon--gopay {
    background-color: rgba(2, 132, 199, 0.1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230284c7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10a3 3 0 0 1 3 3v1H4v-1a3 3 0 0 1 3-3Z'/%3E%3Cpath d='M4 11h16v3a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3z'/%3E%3Cpath d='M16 17v2a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-2'/%3E%3C/svg%3E");
}

.pgs-payment-method__icon--va {
    background-color: rgba(217, 119, 6, 0.1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d97706' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M7 15h4'/%3E%3C/svg%3E");
}

/* ---------- VA channel options ---------- */
.pgs-va-channel-options {
    display: grid;
    gap: 0.7rem;
    margin-top: 0.25rem;
    padding: 1rem 1.05rem 0.5rem;
    border: 1.5px dashed var(--pgs-public-border-strong);
    border-radius: var(--pgs-public-radius);
    background: rgba(241, 245, 249, 0.5);
    backdrop-filter: blur(10px);
}

.pgs-va-channel-options__label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--pgs-public-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pgs-va-channel-options__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.65rem;
}

.pgs-va-channel-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 2.85rem;
    padding: 0.75rem 0.9rem;
    border: 1.5px solid var(--pgs-public-border);
    border-radius: var(--pgs-public-radius-pill);
    background: rgba(255, 255, 255, 0.7);
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition:
        border-color var(--pgs-public-transition),
        background var(--pgs-public-transition),
        box-shadow var(--pgs-public-transition);
}

.pgs-va-channel-option:hover {
    border-color: var(--pgs-public-accent);
    background: rgba(255, 255, 255, 0.9);
}

.pgs-va-channel-option input {
    accent-color: var(--pgs-public-accent);
    margin: 0;
}

.pgs-va-channel-option.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    background: var(--pgs-public-soft);
}

/* ---------- Section head ---------- */
.pgs-section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

/* ---------- Summary list ---------- */
.pgs-summary-list {
    display: grid;
    gap: 0;
}

.pgs-summary-line {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--pgs-public-border);
}

.pgs-summary-line:last-child {
    border-bottom: 0;
}

.pgs-summary-line span {
    color: var(--pgs-public-muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

.pgs-summary-line strong {
    font-size: 0.92rem;
    font-weight: 700;
    text-align: right;
    line-height: 1.5;
}

/* ---------- Invoice cards ---------- */
.pgs-invoice-list {
    display: grid;
    gap: 0.9rem;
}

.pgs-invoice-card {
    position: relative;
    border: 0;
    border-radius: var(--pgs-public-radius-lg);
    background: linear-gradient(var(--pgs-public-card), var(--pgs-public-card)) padding-box,
                linear-gradient(135deg, rgba(13, 148, 136, 0.18), rgba(59, 130, 246, 0.12), rgba(168, 85, 247, 0.08)) border-box;
    padding: 1.15rem;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: var(--pgs-public-shadow);
    transition:
        transform var(--pgs-public-transition),
        box-shadow var(--pgs-public-transition);
}

.pgs-invoice-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(13, 148, 136, 0.2), rgba(59, 130, 246, 0.12), rgba(168, 85, 247, 0.06));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.6;
    transition: opacity var(--pgs-public-transition);
}

.pgs-invoice-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--pgs-public-shadow-lg);
}

.pgs-invoice-card:hover::before {
    opacity: 1;
}

.pgs-invoice-card.is-active {
    box-shadow:
        0 0 0 2px var(--pgs-public-accent),
        var(--pgs-public-shadow-lg);
}

.pgs-invoice-card.is-active::before {
    opacity: 1;
    background: linear-gradient(135deg, var(--pgs-public-accent), var(--pgs-public-accent-light));
}

.pgs-invoice-card.is-settled {
    box-shadow:
        0 0 0 2px rgba(22, 163, 74, 0.3),
        var(--pgs-public-shadow);
}

.pgs-invoice-card.is-settled::before {
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.4), rgba(34, 197, 94, 0.2));
    opacity: 1;
}

.pgs-invoice-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 0.75rem;
}

.pgs-invoice-card__ref {
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -0.01em;
}

.pgs-invoice-card__period {
    color: var(--pgs-public-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.pgs-invoice-card__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.85rem;
    padding: 0.45rem 0;
    border-top: 1px dashed var(--pgs-public-border);
}

.pgs-invoice-card__meta:first-of-type {
    border-top: 0;
}

.pgs-invoice-card__hint {
    margin-top: 0.7rem;
    color: var(--pgs-public-accent-dark);
    font-size: 0.82rem;
    line-height: 1.5;
}

.pgs-invoice-card__hint--center {
    text-align: center;
}

/* ---------- Pay button ---------- */
.pgs-pay-btn {
    min-height: 3.1rem;
    border-radius: var(--pgs-public-radius-pill);
    font-weight: 700;
    letter-spacing: 0.01em;
    transition:
        background var(--pgs-public-transition),
        border-color var(--pgs-public-transition),
        box-shadow var(--pgs-public-transition),
        transform var(--pgs-public-transition);
}

.pgs-pay-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 24px var(--pgs-public-glow);
}

.pgs-pay-btn:active {
    transform: translateY(0);
}

/* ---------- Legal text ---------- */
.pgs-inline-legal {
    color: var(--pgs-public-muted);
    font-size: 0.78rem;
    line-height: 1.7;
    text-align: center;
}

.pgs-inline-legal--compact {
    margin-top: 0.7rem;
}

.pgs-inline-legal a {
    color: var(--pgs-public-accent-dark);
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(15, 118, 110, 0.25);
    transition: text-decoration-color var(--pgs-public-transition);
}

.pgs-inline-legal a:hover {
    text-decoration-color: var(--pgs-public-accent);
}

/* ============================================================
   Invoice Langsung — pay.monbil.id (kartu/detail; background = mesh global body.pgs-public-body)
   ============================================================ */

.pgs-pay-app--invoice-direct {
    --pgs-inv-teal: #008080;
    --pgs-inv-teal-dark: #006666;
    --pgs-inv-text: #0f172a;
    --pgs-inv-muted: #64748b;
    --pgs-inv-border: #e2e8f0;
    --pgs-inv-card: #ffffff;
    --pgs-inv-warn-bg: #fde047;
    --pgs-inv-warn-text: #422006;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.pgs-pay-app--invoice-direct .pgs-mobile-search__input {
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.4;
}

.pgs-pay-app--invoice-direct .pgs-mobile-search__input::placeholder {
    font-size: 0.875rem;
    color: rgba(100, 116, 139, 0.95);
}

.pgs-pay-app--invoice-direct .pgs-mobile-search__button {
    font-size: 0.9375rem;
    font-weight: 700;
}

/* Lookup: jarak ringkasan setelah shell cek tagihan */
.pgs-pay-app--invoice-direct[data-page-mode='lookup'] .pgs-invoice-direct-lookup-shell + .pgs-invoice-direct-identity {
    margin-top: 0;
}

/* Lookup: daftar invoice di atas snap — area standby tidak perlu setinggi halaman penuh */
.pgs-pay-app--invoice-direct[data-page-mode='lookup'] .pgs-invoice-direct-detail-wrap .pgs-snap-container--standby {
    min-height: 9rem;
}

.pgs-invoice-direct-card {
    background: var(--pgs-inv-card);
    border: 1px solid var(--pgs-inv-border);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.pgs-invoice-direct-card__body {
    padding: 1.2rem 1.2rem 1.3rem;
}

/* Detail invoice dalam satu kartu dengan metode bayar (bukan kartu kedua) */
.pgs-invoice-direct-detail-wrap {
    margin-top: 1.35rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--pgs-inv-border);
}

.pgs-invoice-direct-detail-wrap.d-none {
    display: none !important;
}

/* Snap / Midtrans surface di atas tombol Bayar (satu blok dengan detail) */
.pgs-invoice-direct-detail-wrap .pgs-payment-surface-embed {
    margin-bottom: 1rem;
}

.pgs-invoice-direct-detail-wrap .pgs-payment-surface-embed__body {
    padding: 0;
}

.pgs-invoice-direct__doc-icon {
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    border-radius: 10px;
    background: rgba(0, 128, 128, 0.12);
    position: relative;
}

.pgs-invoice-direct__doc-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 1.15rem;
    height: 1.35rem;
    border: 2px solid var(--pgs-inv-teal);
    border-radius: 3px;
    background: linear-gradient(180deg, transparent 42%, var(--pgs-inv-teal) 42%, var(--pgs-inv-teal) 48%, transparent 48%);
}

.pgs-invoice-direct__doc-icon--sm {
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
}

.pgs-invoice-direct__doc-icon--sm::after {
    width: 0.9rem;
    height: 1.05rem;
    border-width: 1.5px;
}

.pgs-pay-app--invoice-direct .pgs-invoice-direct__methods-kicker {
    color: var(--pgs-inv-teal) !important;
    letter-spacing: 0.12em;
    font-size: 0.6875rem !important;
    font-weight: 700;
}

/* Form cek tagihan /pay — border & radius selaras blok identitas invoice */
.pgs-invoice-direct-lookup-shell {
    border: 1px solid var(--pgs-inv-border);
    border-radius: 12px;
    padding: 0.8rem 0.9rem 0.95rem;
    margin-bottom: 1.25rem;
    background: #fff;
}

.pgs-invoice-direct-lookup-shell .pgs-lookup-form--in-invoice-shell {
    margin-bottom: 0;
}

.pgs-invoice-direct-identity {
    border: 1px solid var(--pgs-inv-border);
    border-radius: 12px;
    padding: 0.4rem 0.8rem;
    margin-bottom: 1.25rem;
    background: #fff;
}

.pgs-invoice-direct-identity__row {
    display: grid;
    grid-template-columns: 1.35rem minmax(5.25rem, 6rem) minmax(0, 1fr);
    align-items: center;
    column-gap: 0.65rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid rgba(226, 232, 240, 0.85);
}

.pgs-invoice-direct-identity__row:last-child {
    border-bottom: 0;
}

.pgs-invoice-direct-identity__icon {
    width: 1.35rem;
    height: 1.35rem;
    flex-shrink: 0;
    border-radius: 6px;
    background: rgba(0, 128, 128, 0.1);
    position: relative;
}

.pgs-invoice-direct-identity__icon--id::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 0.65rem;
    height: 0.45rem;
    border: 1.5px solid var(--pgs-inv-teal);
    border-radius: 2px;
}

.pgs-invoice-direct-identity__icon--person::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    border: 1.5px solid var(--pgs-inv-teal);
    box-shadow: 0 -0.45rem 0 -0.15rem var(--pgs-inv-teal);
    clip-path: inset(-2px -10px 0 -10px);
}

.pgs-invoice-direct-identity__icon--phone::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 0.55rem;
    height: 0.85rem;
    border: 1.5px solid var(--pgs-inv-teal);
    border-radius: 3px;
}

.pgs-invoice-direct-identity__label {
    font-weight: 500;
    font-size: 0.8125rem;
    color: var(--pgs-inv-muted);
    line-height: 1.35;
}

.pgs-invoice-direct-identity__value {
    margin-left: 0;
    text-align: right;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--pgs-inv-text);
    line-height: 1.35;
    word-break: break-word;
    overflow-wrap: anywhere;
    justify-self: end;
}

.pgs-invoice-direct-identity__value--strong {
    font-weight: 700;
}

.pgs-invoice-direct-identity__value--total {
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--pgs-inv-teal);
}

.pgs-invoice-direct-identity__row--status {
    align-items: center;
}

.pgs-invoice-direct-identity__badge {
    margin-left: 0;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.35rem 0.65rem;
    border-radius: 8px;
    white-space: nowrap;
    justify-self: end;
}

.pgs-invoice-direct-identity__badge--unpaid {
    background: var(--pgs-inv-warn-bg);
    color: var(--pgs-inv-warn-text);
}

.pgs-invoice-direct-identity__badge--paid {
    background: #bbf7d0;
    color: #14532d;
}

.pgs-invoice-direct-identity__badge--processing {
    background: #e0f2fe;
    color: #0369a1;
}

.pgs-invoice-direct-identity__badge--pending {
    background: #f1f5f9;
    color: #475569;
}

.pgs-invoice-direct-identity__badge--neutral {
    background: #f1f5f9;
    color: #64748b;
}

.pgs-invoice-direct-identity__icon--invoice::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 0.75rem;
    height: 0.95rem;
    border: 1.5px solid var(--pgs-inv-teal);
    border-radius: 2px;
}

.pgs-invoice-direct-identity__icon--period::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 0.75rem;
    height: 0.75rem;
    border: 1.5px solid var(--pgs-inv-teal);
    border-radius: 2px;
    box-shadow: inset 0 -0.35rem 0 0 var(--pgs-inv-teal);
}

.pgs-invoice-direct-identity__icon--total::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 0.85rem;
    height: 0.85rem;
    border: 1.5px solid var(--pgs-inv-teal);
    border-radius: 50%;
    font-size: 0.45rem;
}

.pgs-invoice-direct-identity__icon--status::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--pgs-inv-teal);
}

.pgs-invoice-direct-detail--actions {
    margin: 0;
    padding: 0;
}

.pgs-invoice-direct-detail--actions .pgs-pay-btn--invoice-direct {
    margin-top: 0.35rem;
}

/* ─────────── Kupon Section (selaras dengan invoice-direct-identity) ─────────── */
.pgs-kupon {
    border: 1px solid var(--pgs-inv-border);
    border-radius: 12px;
    padding: 0.8rem 0.9rem 0.85rem;
    margin: 0 0 1rem;
    background: #fff;
}

.pgs-kupon__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.55rem;
}

.pgs-kupon__icon {
    width: 1.35rem;
    height: 1.35rem;
    flex-shrink: 0;
    border-radius: 6px;
    background: rgba(0, 128, 128, 0.1);
    position: relative;
}

.pgs-kupon__icon::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-30deg);
    width: 0.85rem;
    height: 0.55rem;
    border: 1.5px solid var(--pgs-inv-teal);
    border-radius: 2px;
}

.pgs-kupon__title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--pgs-inv-text);
    line-height: 1.35;
    letter-spacing: 0.01em;
}

.pgs-kupon__form {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

.pgs-kupon__input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--pgs-inv-border);
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
    font-size: 0.875rem;
    color: var(--pgs-inv-text);
    background: #fff;
    transition: border-color var(--pgs-public-transition), box-shadow var(--pgs-public-transition);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

.pgs-kupon__input::placeholder {
    color: #cbd5e1;
    text-transform: none;
    font-weight: 500;
    letter-spacing: 0;
}

.pgs-kupon__input:focus {
    outline: 0;
    border-color: var(--pgs-inv-teal);
    box-shadow: 0 0 0 3px rgba(0, 128, 128, 0.12);
}

.pgs-kupon__input:disabled {
    background: #f8fafc;
    color: var(--pgs-inv-teal);
    cursor: default;
}

.pgs-kupon__btn {
    flex-shrink: 0;
    border: 0;
    border-radius: 8px;
    padding: 0.55rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--pgs-public-transition), color var(--pgs-public-transition);
    line-height: 1;
}

.pgs-kupon__btn--apply {
    background: var(--pgs-inv-teal);
    color: #fff;
}

.pgs-kupon__btn--apply:hover:not(:disabled) {
    background: var(--pgs-inv-teal-dark);
}

.pgs-kupon__btn--apply:disabled {
    background: #94a3b8;
    cursor: progress;
}

.pgs-kupon__btn--clear {
    background: transparent;
    color: var(--pgs-inv-muted);
    border: 1px solid var(--pgs-inv-border);
    width: 2.4rem;
    padding: 0;
    font-size: 1.1rem;
    font-weight: 500;
}

.pgs-kupon__btn--clear:hover {
    background: #f8fafc;
    color: var(--pgs-inv-text);
}

.pgs-kupon__feedback {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--pgs-inv-border);
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--pgs-inv-muted);
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
}

.pgs-kupon__feedback[hidden] {
    display: none;
}

.pgs-kupon__feedback--success {
    color: #047857;
}

.pgs-kupon__feedback--error {
    color: #b91c1c;
}

.pgs-kupon__feedback-icon {
    width: 0.95rem;
    height: 0.95rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

/* Summary breakdown setelah kupon ter-apply (subtotal, diskon, total) */
.pgs-kupon-summary {
    margin: 0 0 1rem;
    padding: 0.65rem 0.9rem;
    border: 1px solid var(--pgs-inv-border);
    border-radius: 12px;
    background: #fff;
}

.pgs-kupon-summary__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0;
    font-size: 0.875rem;
    color: var(--pgs-inv-text);
}

.pgs-kupon-summary__row + .pgs-kupon-summary__row {
    border-top: 1px solid rgba(226, 232, 240, 0.7);
}

.pgs-kupon-summary__row--discount {
    color: #047857;
}

.pgs-kupon-summary__row--discount strong {
    color: #047857;
}

.pgs-kupon-summary__row--total {
    font-weight: 700;
    color: var(--pgs-inv-teal);
    font-size: 0.95rem;
}

.pgs-kupon-summary__row span {
    color: var(--pgs-inv-muted);
}

.pgs-kupon-summary__row strong {
    font-weight: 600;
    color: var(--pgs-inv-text);
}

.pgs-payment-methods--invoice-direct .pgs-card-kicker {
    margin-bottom: 0.75rem;
}

.pgs-payment-methods__list--invoice-row {
    gap: 0.65rem;
}

.pgs-pay-app--invoice-direct .pgs-payment-method--invoice-row {
    border-radius: 10px;
    border: 1px solid var(--pgs-inv-border);
    padding: 0.82rem 0.95rem;
    background: #fff;
    box-shadow: none;
    backdrop-filter: none;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.pgs-pay-app--invoice-direct .pgs-payment-method--invoice-row input[type="radio"] {
    width: 1.05rem;
    height: 1.05rem;
    flex-shrink: 0;
}

.pgs-pay-app--invoice-direct .pgs-payment-method--invoice-row:hover {
    border-color: rgba(0, 128, 128, 0.35);
    transform: none;
    box-shadow: none;
}

.pgs-pay-app--invoice-direct .pgs-payment-method--invoice-row:has(input:checked) {
    border-color: var(--pgs-inv-teal);
    box-shadow: 0 0 0 1px var(--pgs-inv-teal);
}

.pgs-pay-app--invoice-direct .pgs-payment-method__label {
    flex: 1 1 auto;
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.4;
}

.pgs-pay-app--invoice-direct .pgs-payment-method__icon {
    width: 1.55rem;
    height: 1.55rem;
    flex: 0 0 1.55rem;
}

.pgs-pay-app--invoice-direct .pgs-payment-method__chevron {
    color: var(--pgs-inv-muted);
    display: flex;
    align-items: center;
    flex-shrink: 0;
    opacity: 0.75;
}

.pgs-pay-app--invoice-direct .pgs-payment-method__icon--qris {
    background-color: rgba(0, 128, 128, 0.1);
}

.pgs-pay-app--invoice-direct .pgs-payment-method__icon--qris {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='6' height='6'/%3E%3Crect x='14' y='4' width='6' height='6'/%3E%3Crect x='4' y='14' width='6' height='6'/%3E%3Cpath d='M14 14h3v3'/%3E%3Cpath d='M20 14v6h-6'/%3E%3C/svg%3E");
}

.pgs-pay-app--invoice-direct .pgs-payment-method__icon--gopay {
    background-color: rgba(2, 132, 199, 0.08);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230284c7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10a3 3 0 0 1 3 3v1H4v-1a3 3 0 0 1 3-3Z'/%3E%3Cpath d='M4 11h16v3a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3z'/%3E%3Cpath d='M16 17v2a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-2'/%3E%3C/svg%3E");
}

.pgs-pay-app--invoice-direct .pgs-payment-method__icon--va {
    background-color: rgba(0, 128, 128, 0.1);
    background-image: none;
    font-size: 0.64rem;
    font-weight: 700;
    color: var(--pgs-inv-teal);
}

.pgs-pay-app--invoice-direct .pgs-payment-method__icon--va::after {
    content: 'VA';
}

.pgs-pay-app--invoice-direct .pgs-va-channel-options {
    border: 0;
    border-radius: 0;
    padding: 0.5rem 0 0;
    margin-top: 0.15rem;
    margin-left: 0;
    background: transparent;
    backdrop-filter: none;
}

.pgs-pay-app--invoice-direct .pgs-va-channel-options__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--pgs-inv-muted);
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 0.55rem;
}

.pgs-pay-app--invoice-direct .pgs-va-channel-options__list--invoice-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}

.pgs-pay-app--invoice-direct .pgs-va-channel-option--tile {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    min-height: 0;
    padding: 0.6rem 0.55rem;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    background: #fff;
    gap: 0.45rem;
}

.pgs-pay-app--invoice-direct .pgs-va-channel-option--tile:hover {
    border-color: rgba(0, 128, 128, 0.35);
}

.pgs-pay-app--invoice-direct .pgs-va-channel-option--tile:has(input:checked) {
    border-color: var(--pgs-inv-teal);
    box-shadow: 0 0 0 1px var(--pgs-inv-teal);
}

.pgs-pay-app--invoice-direct .pgs-va-channel-option--tile {
    position: relative;
}

.pgs-pay-app--invoice-direct .pgs-va-channel-option--tile input[type="radio"] {
    position: static;
    opacity: 1;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    margin: 0;
    accent-color: var(--pgs-inv-teal);
    cursor: pointer;
}

.pgs-pay-app--invoice-direct .pgs-va-channel-option--tile .pgs-va-channel-option__logo {
    margin-top: 0;
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
}

.pgs-pay-app--invoice-direct .pgs-va-channel-option--tile .pgs-va-channel-option__name {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    font-size: 0.825rem;
    font-weight: 600;
    line-height: 1.3;
}

/* Logo asli: file SVG lokal public/assets/img/VaBanks/ (sumber: Wikimedia Commons) */
.pgs-va-channel-option__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-top: 0.35rem;
    border-radius: 8px;
    background: #f8fafc;
}

.pgs-va-channel-option__logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.pgs-va-channel-option__name {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--pgs-inv-text);
    line-height: 1.2;
}

.pgs-invoice-direct-detail {
    margin: 0;
}

.pgs-invoice-direct-detail__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.pgs-invoice-direct-detail__head-main {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    min-width: 0;
}

.pgs-invoice-direct-detail__kicker {
    color: var(--pgs-inv-teal) !important;
    margin-bottom: 0.25rem !important;
    font-size: 0.6875rem;
    font-weight: 700;
}

.pgs-invoice-direct-detail__ref {
    font-size: 1rem;
    font-weight: 700;
    color: var(--pgs-inv-text);
    word-break: break-word;
}

.pgs-invoice-direct-detail__period {
    font-size: 0.875rem;
    color: var(--pgs-inv-muted);
    margin-top: 0.15rem;
}

.pgs-invoice-direct-detail__status {
    flex-shrink: 0;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.35rem 0.65rem;
    border-radius: 8px;
    background: var(--pgs-inv-warn-bg);
    color: var(--pgs-inv-warn-text);
}

.pgs-invoice-direct-detail__status.is-paid {
    background: #bbf7d0;
    color: #14532d;
}

.pgs-invoice-direct-detail__status.is-processing {
    background: #dbeafe;
    color: #1e3a8a;
}

.pgs-invoice-direct-detail__status.is-pending {
    background: #f1f5f9;
    color: #334155;
}

.pgs-invoice-direct-detail__divider {
    border-top: 1px dashed var(--pgs-inv-border);
    margin: 0 0 0.85rem;
}

.pgs-invoice-direct-detail--lookup-card {
    position: relative;
    border: 1px solid var(--pgs-inv-border);
    border-radius: 10px;
    padding: 1rem 1.1rem 1.1rem;
    background: #fff;
}

.pgs-invoice-direct-detail--lookup-card .pgs-invoice-direct-detail__head {
    margin-bottom: 0.65rem;
}

.pgs-invoice-direct-detail--lookup-card.is-active {
    box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.35);
}

.pgs-invoice-direct-detail--lookup-card.is-settled {
    box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.22);
}

.pgs-invoice-direct-detail__hint {
    margin: 0 0 0.85rem;
    color: var(--pgs-inv-teal);
    font-size: 0.82rem;
    line-height: 1.5;
}

.pgs-invoice-direct-detail__hint--center {
    text-align: center;
}

.pgs-invoice-direct-detail__rows {
    display: grid;
    gap: 0.65rem;
    margin-bottom: 1.15rem;
}

.pgs-invoice-direct-detail__row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    font-size: 0.875rem;
}

.pgs-invoice-direct-detail__row span {
    color: var(--pgs-inv-muted);
}

.pgs-invoice-direct-detail__row strong {
    font-weight: 700;
    color: var(--pgs-inv-text);
    text-align: right;
    line-height: 1.35;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.pgs-pay-btn--invoice-direct {
    min-height: 3rem;
    border-radius: 10px;
    background: var(--pgs-inv-teal) !important;
    border-color: var(--pgs-inv-teal) !important;
    font-weight: 700;
    font-size: 0.9375rem;
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-shadow: none;
}

.pgs-pay-btn--invoice-direct:hover {
    background: var(--pgs-inv-teal-dark) !important;
    border-color: var(--pgs-inv-teal-dark) !important;
    transform: none;
}

.pgs-pay-btn__lock {
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M7 11V8a5 5 0 0 1 10 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
}

.pgs-inline-legal--invoice-direct {
    margin-top: 1rem !important;
    font-size: 0.75rem;
    color: var(--pgs-inv-muted);
}

.pgs-inline-legal--invoice-direct a {
    color: var(--pgs-inv-teal);
    text-decoration: underline;
}

.pgs-invoice-direct__back-btn {
    border-radius: 8px;
}

/* ---------- Payment state ---------- */
.pgs-payment-state {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.15rem;
    border: 1px solid var(--pgs-public-border);
    border-radius: var(--pgs-public-radius);
    background: var(--pgs-public-soft);
    backdrop-filter: blur(12px);
}

.pgs-payment-state.is-pending {
    border-color: rgba(245, 158, 11, 0.22);
    background: rgba(254, 243, 199, 0.35);
}

.pgs-payment-state.is-paid {
    border-color: rgba(2, 132, 199, 0.2);
    background: rgba(224, 242, 254, 0.3);
}

.pgs-payment-state.is-success {
    border-color: rgba(22, 163, 74, 0.22);
    background: rgba(220, 252, 231, 0.3);
}

.pgs-payment-state.is-error {
    border-color: rgba(239, 68, 68, 0.2);
    background: rgba(254, 226, 226, 0.3);
}

.pgs-payment-state__badge {
    min-width: 76px;
    padding: 0.45rem 0.85rem;
    border-radius: var(--pgs-public-radius-pill);
    background: rgba(13, 148, 136, 0.1);
    color: var(--pgs-public-accent-dark);
    font-size: 0.72rem;
    font-weight: 800;
    text-align: center;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pgs-payment-state__title {
    font-size: 1.02rem;
    font-weight: 700;
    margin: 0 0 0.3rem;
    letter-spacing: -0.01em;
}

.pgs-payment-state__text {
    color: var(--pgs-public-muted);
    font-size: 0.88rem;
    line-height: 1.55;
}

.pgs-payment-state__summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-top: 0.85rem;
    font-size: 0.84rem;
    color: var(--pgs-public-muted);
}

.pgs-payment-state__summary strong {
    color: var(--pgs-public-text);
    font-weight: 600;
}

/* ---------- QRIS meta ---------- */
.pgs-qris-meta {
    margin-top: 1rem;
}

/* ---------- Direct pay ---------- */
.pgs-direct-pay {
    display: grid;
    gap: 1.1rem;
    justify-items: center;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.pgs-direct-pay__note {
    max-width: 26rem;
    margin: 0;
    color: var(--pgs-public-muted);
    font-size: 0.92rem;
    line-height: 1.55;
    text-align: center;
}

.pgs-direct-pay__amount {
    display: block;
    color: var(--pgs-public-accent-dark);
    font-size: clamp(1.35rem, 5vw, 1.9rem);
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    letter-spacing: -0.02em;
}

.pgs-direct-pay__qr,
.pgs-direct-pay__qr-canvas {
    width: min(280px, 100%);
    aspect-ratio: 1;
    object-fit: contain;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.08);
}

.pgs-direct-pay__qr-canvas {
    height: auto;
    padding: 0.6rem;
}

.pgs-direct-pay__code,
.pgs-direct-pay__va {
    width: 100%;
    padding: 1rem;
    border-radius: var(--pgs-public-radius);
    background: var(--pgs-public-soft);
    border: 1px solid var(--pgs-public-border);
}

.pgs-direct-pay__va-number {
    width: 100%;
    padding: 1rem;
    border: 1.5px solid var(--pgs-public-border);
    border-radius: var(--pgs-public-radius);
    background: rgba(255, 255, 255, 0.75);
    text-align: center;
    backdrop-filter: blur(10px);
    transition: border-color var(--pgs-public-transition), box-shadow var(--pgs-public-transition);
}

.pgs-direct-pay__va-number:hover {
    border-color: var(--pgs-public-accent);
    box-shadow: 0 0 0 3px var(--pgs-public-glow);
}

.pgs-direct-pay__va-number--secondary span {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--pgs-public-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pgs-direct-pay__actions {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

.pgs-direct-pay__actions .btn {
    min-width: 10rem;
}

.pgs-direct-pay__code span,
.pgs-direct-pay__va span {
    display: block;
    color: var(--pgs-public-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.4rem;
}

.pgs-direct-pay__code code {
    display: block;
    max-height: 7rem;
    overflow: auto;
    white-space: normal;
    word-break: break-all;
    color: var(--pgs-public-text);
    font-size: 0.76rem;
}

.pgs-direct-pay__va strong {
    display: block;
    color: var(--pgs-public-text);
    font-size: clamp(1.35rem, 4vw, 2rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    word-break: break-all;
}

.pgs-direct-pay__va-number strong {
    display: block;
    color: var(--pgs-public-text);
    font-size: clamp(1.4rem, 7vw, 2.2rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.04em;
    word-break: break-all;
}

/* ---------- SNAP container ---------- */
.pgs-snap-container {
    min-height: 360px;
    margin-top: 1rem;
    border-radius: var(--pgs-public-radius);
    border: 1px solid var(--pgs-public-border);
    background: var(--pgs-public-soft);
    backdrop-filter: blur(12px);
    padding: 1rem;
    transition: border-color var(--pgs-public-transition);
}

.pgs-snap-container--standby {
    min-height: 320px;
}

/* ---------- Direct payment shell overrides ---------- */
.pgs-payment-surface-shell.is-direct-payment #pgsQrisAlert,
.pgs-payment-surface-shell.is-direct-payment #pgsPaymentState,
.pgs-payment-surface-shell.is-direct-payment #pgsQrisMeta {
    display: none !important;
    margin: 0 !important;
}

.pgs-payment-surface-shell.is-direct-payment .pgs-snap-container {
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

/* ---------- Payment loading ---------- */
.pgs-payment-loading {
    display: grid;
    justify-items: center;
    gap: 0.65rem;
    padding: 1.35rem 0;
    text-align: center;
}

.pgs-payment-loading__spinner {
    width: 2.2rem;
    height: 2.2rem;
    border: 3px solid rgba(13, 148, 136, 0.12);
    border-top-color: var(--pgs-public-accent);
    border-radius: 50%;
    animation: pgs-payment-spin 0.8s linear infinite;
}

.pgs-payment-loading strong {
    color: var(--pgs-public-text);
    font-size: 1rem;
    font-weight: 700;
}

.pgs-payment-loading p {
    margin: 0;
    color: var(--pgs-public-muted);
    font-size: 0.88rem;
}

/* ---------- Payment modal ---------- */
.pgs-payment-modal {
    border: 0;
    border-radius: var(--pgs-public-radius-lg);
    background: var(--pgs-public-card) !important;
    background-image: none !important;
    backdrop-filter: blur(24px) saturate(170%);
    -webkit-backdrop-filter: blur(24px) saturate(170%);
    box-shadow:
        0 24px 80px rgba(15, 23, 42, 0.18),
        0 0 0 1px rgba(255, 255, 255, 0.5) inset;
}

#pgsPaymentModal .modal-dialog {
    max-width: 560px;
}

.pgs-payment-modal .modal-body {
    position: relative;
    padding: 2.2rem 1.4rem 1.4rem;
}

.pgs-payment-modal__close {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    z-index: 2;
    width: 2rem;
    height: 2rem;
    border-radius: var(--pgs-public-radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--pgs-public-border);
    background: rgba(255, 255, 255, 0.6);
    color: var(--pgs-public-muted);
    font-size: 0.85rem;
    transition: background var(--pgs-public-transition), color var(--pgs-public-transition), border-color var(--pgs-public-transition);
}

.pgs-payment-modal__close:hover {
    background: rgba(255, 255, 255, 0.9);
    color: var(--pgs-public-text);
    border-color: var(--pgs-public-border-strong);
}

#pgsPaymentModal.is-direct-payment #pgsQrisAlert,
#pgsPaymentModal.is-direct-payment #pgsPaymentState,
#pgsPaymentModal.is-direct-payment #pgsQrisMeta {
    display: none !important;
    margin: 0 !important;
}

.pgs-payment-modal .pgs-snap-container {
    min-height: 0;
    margin-top: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

/* ---------- Paid info modal ---------- */
.pgs-paid-info-modal {
    border: 1px solid var(--pgs-public-border);
    border-radius: var(--pgs-public-radius-lg);
    background: var(--pgs-public-card) !important;
    background-image: none !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: var(--pgs-public-shadow);
}

.pgs-paid-info-modal__icon {
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto 1rem;
    border-radius: var(--pgs-public-radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.14), rgba(34, 197, 94, 0.08));
    color: #15803d;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    box-shadow: 0 2px 12px rgba(22, 163, 74, 0.1);
}

.pgs-snap-embed-node {
    min-height: 320px;
}

/* ---------- Empty state ---------- */
.pgs-empty-state {
    border: 1.5px dashed var(--pgs-public-border-strong);
    border-radius: var(--pgs-public-radius);
    background: var(--pgs-public-soft);
    padding: 1.5rem;
    text-align: center;
    backdrop-filter: blur(10px);
}

.pgs-empty-state--success {
    border-color: rgba(22, 163, 74, 0.2);
    border-style: solid;
    background: rgba(220, 252, 231, 0.25);
}

.pgs-empty-state--error {
    border-color: rgba(239, 68, 68, 0.2);
    border-style: solid;
    background: rgba(254, 226, 226, 0.25);
}

.pgs-empty-state__title {
    font-weight: 700;
    margin-bottom: 0.35rem;
    font-size: 1rem;
    letter-spacing: -0.01em;
}

.pgs-empty-state__text {
    color: var(--pgs-public-muted);
    font-size: 0.88rem;
    line-height: 1.6;
}

/* ============================================================
   Commerce
   ============================================================ */

.pgs-commerce-stack {
    display: grid;
    gap: 0.9rem;
}

.pgs-commerce-section {
    overflow: hidden;
}

.pgs-commerce-picker {
    position: relative;
}

.pgs-commerce-picker__trial {
    margin-bottom: 1.1rem;
    border: 1px solid rgba(13, 148, 136, 0.12);
    border-radius: var(--pgs-public-radius);
    background: linear-gradient(180deg, rgba(13, 148, 136, 0.06) 0%, rgba(13, 148, 136, 0.02) 100%);
    padding: 1.1rem 1.15rem;
    backdrop-filter: blur(10px);
}

.pgs-commerce-picker__trial .form-check-label {
    color: var(--pgs-public-text);
    font-weight: 600;
}

.pgs-commerce-picker__head {
    display: grid;
    gap: 1rem;
}

.pgs-commerce-picker__title {
    margin: 0;
    color: var(--pgs-public-text);
    font-size: 1.18rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.02em;
}

.pgs-commerce-picker__text,
.pgs-commerce-slot-block__text {
    color: var(--pgs-public-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

/* ---------- Family switch (package pills) ---------- */
.pgs-commerce-family-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
}

.pgs-commerce-package-card {
    border: 1.5px solid var(--pgs-public-border);
    border-radius: var(--pgs-public-radius-pill);
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    padding: 0.6rem 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--pgs-public-muted);
    font-size: 0.8rem;
    font-weight: 600;
    transition:
        border-color var(--pgs-public-transition),
        background var(--pgs-public-transition),
        color var(--pgs-public-transition),
        box-shadow var(--pgs-public-transition),
        transform var(--pgs-public-transition);
}

.pgs-commerce-package-card:hover:not(:disabled) {
    border-color: var(--pgs-public-accent);
    color: var(--pgs-public-accent-dark);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 12px var(--pgs-public-glow);
    transform: translateY(-1px);
}

.pgs-commerce-package-card.is-active {
    border-color: var(--pgs-public-accent);
    background: linear-gradient(135deg, rgba(13, 148, 136, 0.1), rgba(13, 148, 136, 0.05));
    color: var(--pgs-public-accent-dark);
    box-shadow: 0 2px 16px var(--pgs-public-glow);
}

.pgs-commerce-package-card:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.pgs-commerce-package-card__label {
    white-space: nowrap;
}

.pgs-commerce-package-card__state {
    border-radius: var(--pgs-public-radius-pill);
    background: rgba(15, 23, 42, 0.05);
    padding: 0.18rem 0.5rem;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ---------- Slot block ---------- */
.pgs-commerce-slot-block {
    margin-top: 1.35rem;
}

.pgs-commerce-slot-block__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.pgs-commerce-slot-block__detail {
    flex-shrink: 0;
    border-radius: var(--pgs-public-radius-pill);
}

.pgs-commerce-slot-grid {
    --pgs-option-columns: 1;
    display: grid;
    grid-template-columns: repeat(var(--pgs-option-columns), minmax(0, 1fr));
    gap: 0.9rem;
}

/* CheckoutNew — auto 4-5 column price card grid */
#pgsNewPriceList.pgs-commerce-slot-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* CheckoutNew — smaller price + meta text for dense grid */
#pgsNewPriceList .pgs-commerce-slot-card__price {
    font-size: 1.15rem;
}
#pgsNewPriceList .pgs-commerce-slot-card__price small {
    font-size: 0.75rem;
}
#pgsNewPriceList .pgs-commerce-slot-card__meta-line {
    font-size: 0.78rem;
}
#pgsNewPriceList .pgs-commerce-slot-card__badge {
    font-size: 0.65rem;
}
#pgsNewPriceList .pgs-commerce-slot-card__title {
    font-size: 0.9rem;
}
#pgsNewPriceList .pgs-commerce-slot-card__cta-label {
    font-size: 0.82rem;
}

/* CheckoutNew — fewer columns on smaller screens */
@media (max-width: 900px) {
    #pgsNewPriceList.pgs-commerce-slot-grid {
        --pgs-option-columns: 3;
    }
}

@media (max-width: 768px) {
    #pgsNewPriceList.pgs-commerce-slot-grid {
        --pgs-option-columns: 2;
    }
}

@media (max-width: 420px) {
    #pgsNewPriceList.pgs-commerce-slot-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------- Slot card ---------- */
.pgs-commerce-slot-card {
    width: 100%;
    border: 1.5px solid var(--pgs-public-border);
    border-radius: var(--pgs-public-radius-lg);
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 1.15rem;
    display: grid;
    gap: 1rem;
    text-align: left;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
    transition:
        transform var(--pgs-public-transition),
        border-color var(--pgs-public-transition),
        box-shadow var(--pgs-public-transition),
        background var(--pgs-public-transition);
}

.pgs-commerce-slot-card:hover:not(:disabled) {
    transform: translateY(-2px);
    border-color: var(--pgs-public-accent);
    box-shadow: 0 12px 36px rgba(13, 148, 136, 0.1);
    background: rgba(255, 255, 255, 0.9);
}

.pgs-commerce-slot-card.is-selected {
    border-color: var(--pgs-public-accent);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(240, 253, 250, 0.85) 100%);
    box-shadow:
        0 0 0 2px var(--pgs-public-accent),
        0 16px 40px rgba(13, 148, 136, 0.12);
}

.pgs-commerce-slot-card:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.pgs-commerce-slot-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
}

.pgs-commerce-slot-card__title-wrap {
    min-width: 0;
}

.pgs-commerce-slot-card__badge {
    display: inline-flex;
    align-items: center;
    border-radius: var(--pgs-public-radius-pill);
    background: rgba(13, 148, 136, 0.08);
    color: var(--pgs-public-accent-dark);
    padding: 0.2rem 0.55rem;
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.pgs-commerce-slot-card__title {
    display: block;
    color: var(--pgs-public-text);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.pgs-commerce-slot-card__radio {
    width: 22px;
    height: 22px;
    border-radius: var(--pgs-public-radius-pill);
    border: 2px solid rgba(13, 148, 136, 0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.12rem;
    transition: border-color var(--pgs-public-transition);
}

.pgs-commerce-slot-card__radio::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: var(--pgs-public-radius-pill);
    background: transparent;
    transition: background var(--pgs-public-transition);
}

.pgs-commerce-slot-card.is-selected .pgs-commerce-slot-card__radio {
    border-color: var(--pgs-public-accent);
}

.pgs-commerce-slot-card.is-selected .pgs-commerce-slot-card__radio::after {
    background: var(--pgs-public-accent);
}

.pgs-commerce-slot-card__price {
    color: var(--pgs-public-text);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
}

.pgs-commerce-slot-card__price small {
    margin-left: 0.28rem;
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--pgs-public-muted);
    letter-spacing: 0;
}

.pgs-commerce-slot-card__meta {
    display: grid;
    gap: 0.5rem;
}

.pgs-commerce-slot-card__meta-line {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: #334155;
    font-size: 0.84rem;
    line-height: 1.4;
}

.pgs-commerce-slot-card__meta-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: var(--pgs-public-radius-pill);
    background: rgba(13, 148, 136, 0.12);
    border: 1px solid rgba(13, 148, 136, 0.22);
    flex-shrink: 0;
}

.pgs-commerce-slot-card__cta {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    border-radius: var(--pgs-public-radius-pill);
    padding: 0.75rem 0.95rem;
    background: rgba(13, 148, 136, 0.08);
    color: var(--pgs-public-accent-dark);
    font-size: 0.86rem;
    font-weight: 600;
    transition:
        background var(--pgs-public-transition),
        color var(--pgs-public-transition),
        box-shadow var(--pgs-public-transition);
}

.pgs-commerce-slot-card.is-selected .pgs-commerce-slot-card__cta {
    background: var(--pgs-public-accent);
    color: #fff;
    box-shadow: 0 4px 16px rgba(13, 148, 136, 0.25);
}

/* 5 kolom desktop: tinggi kartu tetap, teks diperkecil agar tidak naik baris */
@media (min-width: 1200px) {
    .pgs-commerce-slot-grid[data-option-columns="5"] .pgs-commerce-slot-card__badge {
        font-size: 0.56rem;
        font-weight: 600;
    }

    .pgs-commerce-slot-grid[data-option-columns="5"] .pgs-commerce-slot-card__title {
        font-size: 0.88rem;
        font-weight: 600;
    }

    .pgs-commerce-slot-grid[data-option-columns="5"] .pgs-commerce-slot-card__price {
        font-size: 1.3rem;
        font-weight: 700;
    }

    .pgs-commerce-slot-grid[data-option-columns="5"] .pgs-commerce-slot-card__price small {
        font-size: 0.66rem;
        font-weight: 500;
    }

    .pgs-commerce-slot-grid[data-option-columns="5"] .pgs-commerce-slot-card__meta-line {
        font-size: 0.74rem;
    }

    .pgs-commerce-slot-grid[data-option-columns="5"] .pgs-commerce-slot-card__cta {
        font-size: 0.78rem;
        font-weight: 600;
    }
}

/* ---------- Inline details ---------- */
.pgs-commerce-inline-tools {
    margin-top: 1rem;
    border-top: 1px solid var(--pgs-public-border);
    padding-top: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.pgs-commerce-inline-details {
    margin-top: 0;
    border-top: 0;
    padding-top: 0;
}

.pgs-commerce-inline-details summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--pgs-public-accent-dark);
    font-size: 0.82rem;
    font-weight: 600;
    transition: color var(--pgs-public-transition);
}

.pgs-commerce-inline-tools .pgs-commerce-slot-block__detail {
    flex-shrink: 0;
    font-weight: 500;
}

.pgs-commerce-inline-details summary::-webkit-details-marker {
    display: none;
}

.pgs-commerce-inline-details summary:hover {
    color: var(--pgs-public-accent);
}

/* ---------- Form grid ---------- */
.pgs-commerce-form-grid {
    display: grid;
    gap: 1rem;
}

.pgs-commerce-field--full {
    grid-column: 1 / -1;
}

.pgs-commerce-contact-row {
    display: grid;
    gap: 1rem;
}

.pgs-commerce-field .form-label {
    font-weight: 600;
    color: var(--pgs-public-text);
    font-size: 0.85rem;
    letter-spacing: 0.01em;
}

/* ---------- Choice grid ---------- */
.pgs-commerce-choice-grid {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pgs-commerce-choice-card {
    position: relative;
    display: block;
    cursor: pointer;
}

.pgs-commerce-choice-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pgs-commerce-choice-card__body {
    display: grid;
    gap: 0.22rem;
    min-height: 100%;
    border: 1.5px solid var(--pgs-public-border);
    border-radius: var(--pgs-public-radius);
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(12px);
    padding: 1rem 1.1rem;
    transition:
        border-color var(--pgs-public-transition),
        background var(--pgs-public-transition),
        box-shadow var(--pgs-public-transition),
        transform var(--pgs-public-transition);
}

.pgs-commerce-choice-card:hover .pgs-commerce-choice-card__body {
    border-color: var(--pgs-public-accent);
    transform: translateY(-1px);
    box-shadow: 0 6px 24px var(--pgs-public-glow);
    background: rgba(255, 255, 255, 0.9);
}

.pgs-commerce-choice-card input:checked + .pgs-commerce-choice-card__body {
    border-color: var(--pgs-public-accent);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(240, 253, 250, 0.8) 100%);
    box-shadow:
        0 0 0 2px var(--pgs-public-accent),
        0 10px 30px rgba(13, 148, 136, 0.1);
}

.pgs-commerce-choice-card__title {
    color: var(--pgs-public-text);
    font-size: 0.94rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.pgs-commerce-choice-card__text {
    color: var(--pgs-public-muted);
    font-size: 0.82rem;
    line-height: 1.5;
}

/* ---------- Label row & tooltip ---------- */
.pgs-commerce-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.55rem;
}

.pgs-commerce-tooltip-trigger {
    border: 0;
    border-radius: var(--pgs-public-radius-pill);
    background: rgba(13, 148, 136, 0.08);
    color: var(--pgs-public-accent-dark);
    padding: 0.28rem 0.65rem;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    transition: background var(--pgs-public-transition), color var(--pgs-public-transition);
}

.pgs-commerce-tooltip-trigger:hover {
    background: rgba(13, 148, 136, 0.14);
}

/* ---------- Form controls ---------- */
.pgs-commerce-field .form-control {
    min-height: 3.2rem;
    border-radius: var(--pgs-public-radius);
    border: 1.5px solid var(--pgs-public-border);
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(8px);
    padding: 0.6rem 1.1rem;
    font-size: 0.92rem;
    color: var(--pgs-public-text);
    transition:
        border-color var(--pgs-public-transition),
        box-shadow var(--pgs-public-transition),
        background var(--pgs-public-transition);
}

.pgs-commerce-field .form-control::placeholder {
    color: var(--pgs-public-muted);
    opacity: 0.7;
}

.pgs-commerce-field .form-control:focus {
    border-color: var(--pgs-public-accent);
    box-shadow: 0 0 0 4px var(--pgs-public-glow);
    background: rgba(255, 255, 255, 0.95);
    outline: none;
}

.pgs-commerce-field .form-control.is-attention {
    border-color: rgba(245, 158, 11, 0.5);
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.12);
    background: rgba(254, 243, 199, 0.4);
}

/* ---------- Inline action ---------- */
.pgs-commerce-inline-action {
    display: flex;
    align-items: stretch;
    gap: 0.6rem;
}

.pgs-commerce-inline-action .form-control {
    flex: 1 1 auto;
    min-width: 0;
}

.pgs-commerce-inline-action .btn {
    flex-shrink: 0;
    min-height: 3.2rem;
    border-radius: var(--pgs-public-radius-pill);
    padding-inline: 1.1rem;
    font-weight: 700;
    white-space: nowrap;
    transition:
        background var(--pgs-public-transition),
        box-shadow var(--pgs-public-transition),
        transform var(--pgs-public-transition);
}

.pgs-commerce-inline-action .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px var(--pgs-public-glow);
}

/* ---------- Verification status ---------- */
.pgs-commerce-verification-status {
    margin-top: 0.7rem;
    border-radius: var(--pgs-public-radius);
    padding: 0.75rem 0.95rem;
    font-size: 0.82rem;
    line-height: 1.5;
    backdrop-filter: blur(10px);
}

.pgs-commerce-verification-status.is-info {
    background: rgba(13, 148, 136, 0.06);
    color: var(--pgs-public-accent-dark);
}

.pgs-commerce-verification-status.is-success {
    background: rgba(22, 163, 74, 0.06);
    color: #166534;
}

.pgs-commerce-verification-status.is-warning {
    background: rgba(245, 158, 11, 0.08);
    color: #92400e;
}

.pgs-commerce-verification-status.is-danger {
    background: rgba(239, 68, 68, 0.06);
    color: #991b1b;
}

/* ---------- Subdomain ---------- */
.pgs-commerce-subdomain-wrap {
    display: flex;
    align-items: stretch;
    gap: 0.6rem;
}

.pgs-commerce-subdomain-wrap .form-control {
    flex: 1 1 auto;
    min-width: 0;
}

.pgs-commerce-subdomain-suffix {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-height: 3.2rem;
    border-radius: var(--pgs-public-radius);
    background: var(--pgs-public-soft);
    border: 1.5px solid var(--pgs-public-border);
    padding: 0 1rem;
    color: var(--pgs-public-text);
    font-size: 0.88rem;
    font-weight: 600;
    white-space: nowrap;
}

.pgs-commerce-subdomain-status {
    margin-top: 0.7rem;
    border-radius: var(--pgs-public-radius);
    padding: 0.75rem 0.95rem;
    font-size: 0.82rem;
    line-height: 1.5;
}

.pgs-commerce-subdomain-status.is-checking {
    background: rgba(13, 148, 136, 0.06);
    color: var(--pgs-public-accent-dark);
}

.pgs-commerce-subdomain-status.is-success {
    background: rgba(22, 163, 74, 0.06);
    color: #166534;
}

.pgs-commerce-subdomain-status.is-danger {
    background: rgba(239, 68, 68, 0.06);
    color: #991b1b;
}

.pgs-commerce-subdomain-status.is-warning {
    background: rgba(245, 158, 11, 0.08);
    color: #92400e;
}

/* ---------- Summary card ---------- */
.pgs-commerce-summary-card {
    display: grid;
    gap: 0.65rem;
    border: 1px solid var(--pgs-public-border);
    border-radius: var(--pgs-public-radius);
    background: var(--pgs-public-soft);
    backdrop-filter: blur(12px);
    padding: 0.9rem;
}

.pgs-commerce-summary-card .pgs-summary-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

.pgs-commerce-summary-card .pgs-summary-line {
    min-height: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.2rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--pgs-public-border);
    border-bottom: 0;
    border-radius: var(--pgs-public-radius);
    background: rgba(255, 255, 255, 0.6);
}

.pgs-commerce-summary-card .pgs-summary-line--wide {
    grid-column: 1 / -1;
}

.pgs-commerce-summary-card .pgs-summary-line--total {
    background: linear-gradient(135deg, rgba(13, 148, 136, 0.08), rgba(13, 148, 136, 0.03));
    border-color: rgba(13, 148, 136, 0.15);
}

.pgs-commerce-summary-card .pgs-summary-line span {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pgs-commerce-summary-card .pgs-summary-line strong {
    text-align: left;
    font-size: 0.92rem;
    line-height: 1.3;
    font-weight: 700;
}

.pgs-commerce-summary-card .pgs-summary-line--total strong {
    font-size: 1.05rem;
}

.pgs-commerce-summary-card .pgs-summary-line small {
    color: var(--pgs-public-muted);
    font-size: 0.74rem;
    line-height: 1.4;
}

.pgs-commerce-summary-card .pgs-summary-line:last-child {
    border-bottom: 0;
}

/* ---------- Summary meta ---------- */
.pgs-commerce-summary-meta,
.pgs-commerce-meta-grid {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ---------- Detail / OTP modals ---------- */
.pgs-commerce-detail-modal {
    border: 1px solid var(--pgs-public-border);
    border-radius: var(--pgs-public-radius-lg);
    background: #fff;
    box-shadow:
        0 24px 80px rgba(15, 23, 42, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

/*
 * public-pay.js memindahkan modal ke <body> agar lepas dari stacking context
 * .pgs-public-shell (animation/transform + z-index). Jangan pakai z-index: auto
 * di sini — itu mengalahkan .modal Bootstrap dan bisa menempatkan dialog
 * di bawah .modal-backdrop. Wajib di atas backdrop agar backdrop + konten OTP jelas.
 */
body.pgs-public-body > #pgsCommerceOtpModal.modal,
body.pgs-public-body > #pgsCommerceProductDetailModal.modal {
    z-index: var(--bs-modal-zindex, 1055);
}

.pgs-commerce-otp-modal {
    border: 1px solid var(--pgs-public-border);
    border-radius: var(--pgs-public-radius-lg);
    background: #fff;
    box-shadow:
        0 24px 80px rgba(15, 23, 42, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

/* OTP input spacing */
.pgs-commerce-otp-modal #pgsCommerceOtpCode {
    font-size: 1.75rem;
    letter-spacing: 0.5rem;
    padding: 0.75rem 1rem;
    max-width: 220px;
    margin-left: auto;
    margin-right: auto;
}

.pgs-commerce-otp-modal #pgsCommerceOtpCode::placeholder {
    letter-spacing: 0.35rem;
    color: #cbd5e1;
}

/* Resend button — subtle */
.pgs-commerce-otp-modal #pgsCommerceOtpResend {
    text-decoration: none;
    font-size: 0.875rem;
}
.pgs-commerce-otp-modal #pgsCommerceOtpResend:hover {
    text-decoration: underline;
}

.pgs-commerce-otp-note {
    color: var(--pgs-public-muted);
    line-height: 1.6;
    font-size: 0.9rem;
}

/* ---------- Detail grid ---------- */
.pgs-commerce-detail-grid {
    display: grid;
    gap: 1rem;
}

.pgs-commerce-detail-panel {
    border: 1px solid var(--pgs-public-border);
    border-radius: var(--pgs-public-radius);
    background: var(--pgs-public-soft);
    backdrop-filter: blur(10px);
    padding: 1.1rem;
}

.pgs-commerce-detail-list {
    margin: 0;
    padding-left: 0;
    list-style: none;
    display: grid;
    gap: 0.6rem;
    color: var(--pgs-public-text);
}

.pgs-commerce-detail-feature {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--pgs-public-border);
    border-radius: var(--pgs-public-radius);
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(8px);
}

.pgs-commerce-detail-feature.is-unavailable {
    color: #94a3b8;
    background: rgba(248, 250, 252, 0.4);
    border-style: dashed;
}

.pgs-commerce-detail-feature__icon {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--pgs-public-radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(13, 148, 136, 0.1);
    color: var(--pgs-public-accent-dark);
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
}

.pgs-commerce-detail-feature.is-unavailable .pgs-commerce-detail-feature__icon {
    background: rgba(148, 163, 184, 0.12);
    color: #94a3b8;
}

/* ---------- Chips ---------- */
.pgs-commerce-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.pgs-commerce-chip {
    border-radius: var(--pgs-public-radius-pill);
    background: rgba(13, 148, 136, 0.08);
    color: var(--pgs-public-accent-dark);
    padding: 0.4rem 0.8rem;
    font-size: 0.82rem;
    font-weight: 600;
}

.pgs-commerce-chip--muted {
    background: rgba(148, 163, 184, 0.1);
    color: #475569;
}

/* ---------- Recovery ---------- */
.pgs-commerce-recovery {
    border: 1px solid rgba(245, 158, 11, 0.18);
    border-radius: var(--pgs-public-radius);
    background: rgba(254, 243, 199, 0.25);
    backdrop-filter: blur(10px);
    padding: 1.1rem;
}

.pgs-commerce-recovery__title {
    font-weight: 700;
    margin-bottom: 0.3rem;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
}

.pgs-commerce-recovery__text,
.pgs-commerce-recovery__meta {
    color: var(--pgs-public-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

.pgs-commerce-recovery__meta strong {
    color: var(--pgs-public-text);
    font-weight: 600;
}

.pgs-commerce-recovery__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 0.9rem;
}

/* ---------- Result card ---------- */
.pgs-result-card {
    max-width: 860px;
    margin: 0 auto;
}

.pgs-result-icon {
    width: 92px;
    height: 92px;
    border-radius: var(--pgs-public-radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 1.4rem;
    font-weight: 700;
    backdrop-filter: blur(12px);
}

.pgs-result-icon.is-success {
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.12), rgba(34, 197, 94, 0.06));
    color: #166534;
    box-shadow: 0 4px 20px rgba(22, 163, 74, 0.1);
}

.pgs-result-icon.is-pending {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(251, 191, 36, 0.06));
    color: #b45309;
    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.1);
}

/* ---------- Buttons ---------- */
.btn-primary {
    background: linear-gradient(135deg, var(--pgs-public-accent) 0%, var(--pgs-public-accent-dark) 100%);
    border-color: var(--pgs-public-accent);
    box-shadow: 0 2px 12px rgba(13, 148, 136, 0.18);
    transition:
        background var(--pgs-public-transition),
        border-color var(--pgs-public-transition),
        box-shadow var(--pgs-public-transition),
        transform var(--pgs-public-transition);
}

.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, var(--pgs-public-accent-dark) 0%, #0c6b63 100%);
    border-color: var(--pgs-public-accent-dark);
    box-shadow: 0 6px 24px rgba(13, 148, 136, 0.28);
    transform: translateY(-1px);
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(13, 148, 136, 0.15);
}

.btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    border-radius: var(--pgs-public-radius-pill);
    font-weight: 700;
    letter-spacing: 0.01em;
}

.btn-block {
    width: 100%;
    display: block;
}

/* ---------- Utility classes ---------- */
.text-center { text-align: center; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.ms-auto { margin-left: auto !important; }
.me-2 { margin-right: 0.5rem !important; }
.d-none { display: none !important; }
.d-flex { display: flex !important; }
.justify-content-between { justify-content: space-between !important; }
.align-items-center { align-items: center !important; }
.gap-2 { gap: 0.5rem !important; }

/* ---------- Invoice total bump ---------- */
.pgs-invoice-card-bump {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.025);
    border-radius: 0.75rem;
    padding: 0.8rem 1.05rem;
    margin-bottom: 0.5rem;
    border: 1px solid var(--pgs-public-border);
    transition: background var(--pgs-public-transition);
}

.pgs-invoice-total-bump {
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(0, 0, 0, 0.5);
    width: 100%;
}

.pgs-invoice-total-bump__value {
    font-size: 1.15rem;
    font-weight: 800;
    color: rgba(0, 0, 0, 0.82);
    letter-spacing: -0.02em;
}

.pgs-invoice-total-bump strong {
    font-size: 0.88rem;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.78);
    text-transform: none;
    letter-spacing: 0;
}

/* ============================================================
   Checkout New (Scoped Redesign)
   ============================================================ */

.pgs-checkoutnew-app {
    --pgs-checkoutnew-accent: #0f9f8f;
    --pgs-checkoutnew-accent-dark: #0a8f80;
    --pgs-checkoutnew-border: #d9dee6;
    --pgs-checkoutnew-border-strong: #cdd5df;
    --pgs-checkoutnew-muted: #6b7280;
    --pgs-checkoutnew-soft: #f4f7f9;
    --pgs-checkoutnew-radius: 14px;
    --pgs-checkoutnew-radius-lg: 20px;
    --pgs-checkoutnew-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
}

.pgs-checkoutnew-app .pgs-checkoutnew-auth,
.pgs-checkoutnew-app .pgs-checkoutnew-step2 {
    border: 1px solid var(--pgs-checkoutnew-border);
    border-radius: 22px;
    background: #f8fafc !important;
    box-shadow: var(--pgs-checkoutnew-shadow);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.pgs-checkoutnew-app .pgs-checkoutnew-auth .card-body,
.pgs-checkoutnew-app .pgs-checkoutnew-step2 .card-body {
    padding: 1.6rem 1.55rem !important;
}

.pgs-checkoutnew-auth__kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--pgs-checkoutnew-accent-dark);
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 800;
}

.pgs-checkoutnew-auth__kicker-icon {
    width: 1rem;
    height: 1rem;
    display: inline-flex;
}

.pgs-checkoutnew-auth__kicker-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.pgs-checkoutnew-auth__title {
    margin: 0.7rem 0 0.3rem;
    color: #1f2937;
    font-size: clamp(1.6rem, 2.2vw, 2rem);
    line-height: 1.2;
    font-weight: 800;
}

.pgs-checkoutnew-auth__subtitle {
    margin: 0 0 1.4rem;
    color: var(--pgs-checkoutnew-muted);
    font-size: 1.01rem;
}

.pgs-checkoutnew-google-wrap {
    margin-bottom: 1rem;
}

.pgs-checkoutnew-google-btn {
    min-height: 3.05rem;
    border-radius: 12px;
    font-weight: 600;
}

.pgs-checkoutnew-login {
    display: grid;
    gap: 0.9rem;
}

.pgs-checkoutnew-field-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pgs-checkoutnew-field .form-label {
    margin-bottom: 0.4rem;
    color: #111827;
    font-size: 0.95rem;
    font-weight: 700;
}

.pgs-checkoutnew-input-wrap {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 3rem;
    border-radius: 10px;
    border: 1.5px solid var(--pgs-checkoutnew-border);
    background: #fff;
    padding: 0 0.7rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pgs-checkoutnew-input-wrap:focus-within {
    border-color: var(--pgs-checkoutnew-accent);
    box-shadow: 0 0 0 4px rgba(15, 159, 143, 0.13);
}

.pgs-checkoutnew-input-wrap .form-control {
    min-height: 2.3rem;
    width: 100%;
    border: 0;
    background: transparent;
    background-clip: padding-box;
    box-shadow: none;
    padding: 0;
    font-size: 0.98rem;
}

.pgs-checkoutnew-input-wrap .form-control:focus {
    border: 0;
    box-shadow: none;
    background: transparent;
}

.pgs-checkoutnew-input-wrap .form-control:-webkit-autofill,
.pgs-checkoutnew-input-wrap .form-control:-webkit-autofill:hover,
.pgs-checkoutnew-input-wrap .form-control:-webkit-autofill:focus,
.pgs-checkoutnew-input-wrap .form-control:-webkit-autofill:active {
    -webkit-text-fill-color: #111827;
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
    box-shadow: 0 0 0 1000px #ffffff inset;
    border-radius: 8px;
    transition: background-color 9999s ease-in-out 0s;
}

.pgs-checkoutnew-input-icon {
    width: 1.42rem;
    height: 1.42rem;
    color: #64748b;
    flex: 0 0 1.42rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border-radius: 999px;
    background: #f1f5f9;
    transition: background 0.2s ease, color 0.2s ease;
}

.pgs-checkoutnew-input-icon svg {
    width: 0.88rem;
    height: 0.88rem;
    fill: currentColor;
    display: block;
}

.pgs-checkoutnew-input-wrap:focus-within .pgs-checkoutnew-input-icon {
    background: #e8f8f5;
    color: var(--pgs-checkoutnew-accent-dark);
}

.pgs-checkoutnew-password-toggle {
    border: 0;
    padding: 0;
    background: transparent;
    width: 1.9rem;
    height: 1.9rem;
    color: #6b7280;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    transition: background 0.2s ease, color 0.2s ease;
    line-height: 1;
    align-self: center;
}

.pgs-checkoutnew-password-toggle:hover {
    background: #eef2f6;
    color: #4b5563;
}

.pgs-checkoutnew-password-toggle svg {
    width: 1.02rem;
    height: 1.02rem;
    fill: currentColor;
    display: block;
}

.pgs-checkoutnew-login-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
}

.pgs-checkoutnew-remember {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: #4b5563;
    font-size: 0.94rem;
    cursor: pointer;
}

.pgs-checkoutnew-remember input {
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: var(--pgs-checkoutnew-accent);
}

.pgs-checkoutnew-forgot-link {
    font-size: 0.94rem;
    color: var(--pgs-checkoutnew-accent-dark);
    text-decoration: none;
}

.pgs-checkoutnew-forgot-link:hover {
    text-decoration: underline;
}

.pgs-checkoutnew-login-btn {
    margin-top: 1rem;
    min-height: 3.05rem;
    border-radius: 10px;
    border-color: var(--pgs-checkoutnew-accent);
    background: linear-gradient(180deg, var(--pgs-checkoutnew-accent), var(--pgs-checkoutnew-accent-dark));
    box-shadow: 0 10px 24px rgba(15, 159, 143, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    font-size: 1rem;
    letter-spacing: 0.01em;
}

.pgs-checkoutnew-login-btn__icon {
    width: 1rem;
    height: 1rem;
    display: inline-flex;
}

.pgs-checkoutnew-login-btn__icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.pgs-checkoutnew-divider {
    position: relative;
    margin: 1.3rem 0;
    text-align: center;
    color: #9aa3b2;
    font-size: 0.95rem;
}

.pgs-checkoutnew-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #dde3ea;
}

.pgs-checkoutnew-divider span {
    position: relative;
    background: #f8fafc;
    padding: 0 0.85rem;
}

.pgs-checkoutnew-register {
    border: 1px solid var(--pgs-checkoutnew-border);
    border-radius: 20px;
    background: #fff;
    padding: 0.85rem;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}

.pgs-checkoutnew-register__head {
    display: grid;
    grid-template-columns: 3.85rem minmax(0, 1fr);
    gap: 0.55rem;
    align-items: center;
    margin-bottom: 0.75rem;
    border: 1px solid #e7edf4;
    border-radius: 14px;
    background: #fbfdff;
    padding: 0.5rem 0.66rem;
}

.pgs-checkoutnew-register__icon {
    width: 3.05rem;
    height: 3.05rem;
    border-radius: 999px;
    background: linear-gradient(180deg, #dcf6f2 0%, #d4eeec 100%);
    color: var(--pgs-checkoutnew-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.pgs-checkoutnew-register__icon svg {
    width: 1.45rem;
    height: 1.45rem;
    fill: currentColor;
}

.pgs-checkoutnew-register__title {
    margin: 0;
    color: #0b223f;
    font-size: clamp(0.98rem, 1.03vw, 1.2rem);
    font-weight: 680;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.pgs-checkoutnew-register__subtitle {
    margin: 0.08rem 0 0;
    color: #7f8ba0;
    font-size: clamp(0.75rem, 0.82vw, 0.88rem);
    line-height: 1.25;
}

.pgs-checkoutnew-otp-callout {
    min-height: 3rem;
    border-radius: 10px;
    background: #ecf8f5;
    border: 1px solid #d8efea;
    color: #1d6e67;
    padding: 0.65rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.86rem;
    line-height: 1.4;
}

.pgs-checkoutnew-otp-callout__icon {
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
}

.pgs-checkoutnew-otp-callout__icon svg {
    width: 100%;
    height: 100%;
    fill: #f59e0b;
}

.pgs-checkoutnew-otp-btn {
    margin-top: 1rem;
    min-height: 3.05rem;
    border-radius: 10px;
    border: 1.5px solid var(--pgs-checkoutnew-accent);
    color: var(--pgs-checkoutnew-accent-dark);
    background: #f8fffd;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.pgs-checkoutnew-otp-btn:hover,
.pgs-checkoutnew-otp-btn:focus {
    border-color: var(--pgs-checkoutnew-accent-dark);
    color: #fff;
    background: var(--pgs-checkoutnew-accent);
}

.pgs-checkoutnew-otp-btn__icon {
    width: 1rem;
    height: 1rem;
    display: inline-flex;
}

.pgs-checkoutnew-otp-btn__icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.pgs-checkoutnew-otp-section {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e6ebf1;
}

.pgs-checkoutnew-otp-section #pgsNewOtpCode {
    max-width: 170px;
    letter-spacing: 0.28rem;
    text-align: center;
    font-size: 1.1rem;
}

.pgs-checkoutnew-auth__footer {
    margin: 0.8rem 0 0;
    text-align: center;
    color: #8d99ab;
    font-size: 0.85rem;
}

/* Inline field validation errors */
#pgsCheckoutNewApp .pgs-field-error {
    display: block;
    color: #dc3545;
    font-size: 0.75rem;
    margin-top: 4px;
    animation: pgs-field-error-in 0.2s ease;
}
@keyframes pgs-field-error-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
#pgsCheckoutNewApp .pgs-has-error {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.2) !important;
}

/* Trial toggle */
.pgs-checkoutnew-trial-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.pgs-checkoutnew-trial-toggle .form-check-input {
    width: 2.5rem;
    height: 1.4rem;
    cursor: pointer;
}
.pgs-checkoutnew-trial-toggle .form-check-label {
    font-weight: 600;
    cursor: pointer;
}

.pgs-checkoutnew-auth-logged {
    border: 1px solid #e7edf4;
    border-radius: 14px;
    background: #fbfdff;
    padding: 0.58rem 0.72rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.pgs-checkoutnew-auth-logged__user {
    display: flex;
    align-items: center;
    gap: 1.15rem;
}

.pgs-checkoutnew-auth-logged__avatar {
    width: 3.05rem;
    height: 3.05rem;
    border-radius: 999px;
    background: linear-gradient(180deg, #dcf6f2 0%, #d4eeec 100%);
    color: var(--pgs-checkoutnew-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pgs-checkoutnew-auth-logged__avatar svg {
    width: 1.45rem;
    height: 1.45rem;
}

.pgs-checkoutnew-auth-logged__identity {
    display: flex;
    flex-direction: column;
}

.pgs-checkoutnew-auth-logged__label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pgs-checkoutnew-accent);
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.pgs-checkoutnew-auth-logged__name {
    margin: 0;
    color: #0b223f;
    font-size: clamp(1.04rem, 1.15vw, 1.4rem);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.01em;
}

.pgs-checkoutnew-auth-logged__email {
    margin: 0.11rem 0 0;
    color: #7f8ba0;
    font-size: clamp(0.8rem, 0.9vw, 0.96rem);
    line-height: 1.25;
}

.pgs-checkoutnew-auth-logged__logout {
    border-radius: 8px;
    border: 1px solid var(--pgs-checkoutnew-accent);
    color: var(--pgs-checkoutnew-accent);
    background: transparent;
    padding: 0.45rem 1.1rem;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all var(--pgs-public-transition);
}

.pgs-checkoutnew-auth-logged__logout:hover {
    background: var(--pgs-checkoutnew-accent);
    color: #fff;
}

.pgs-checkoutnew-step2__header {
    margin-bottom: 1rem;
}

.pgs-checkoutnew-step2__title {
    margin: 0.6rem 0 0.2rem;
    color: #1f2937;
    font-size: 1.45rem;
    font-weight: 800;
}

.pgs-checkoutnew-step2__subtitle {
    margin: 0;
    color: var(--pgs-checkoutnew-muted);
    font-weight: 700;
}

.pgs-checkoutnew-step2__label {
    margin-bottom: 0.55rem;
    color: #111827;
    font-size: 0.95rem;
    font-weight: 700;
}

.pgs-checkoutnew-step2__divider {
    height: 1px;
    margin: 1rem 0;
    background: #e2e8f0;
}

.pgs-checkoutnew-step2 .pgs-commerce-package-card {
    border-radius: 10px;
    border: 1px solid var(--pgs-checkoutnew-border);
    background: #fff;
    color: #4b5563;
}

.pgs-checkoutnew-step2 .pgs-commerce-package-card:hover:not(:disabled),
.pgs-checkoutnew-step2 .pgs-commerce-package-card.is-active {
    border-color: var(--pgs-checkoutnew-accent);
    background: #f2fbf9;
    color: #0f766e;
    box-shadow: none;
}

.pgs-checkoutnew-step2 .pgs-commerce-slot-block {
    margin-top: 0.85rem;
}

.pgs-checkoutnew-step2 .pgs-commerce-slot-card {
    border-radius: 12px;
    border: 1px solid var(--pgs-checkoutnew-border);
    box-shadow: none;
    background: #fff;
}

.pgs-checkoutnew-step2 .pgs-commerce-slot-card:hover:not(:disabled),
.pgs-checkoutnew-step2 .pgs-commerce-slot-card.is-selected {
    border-color: var(--pgs-checkoutnew-accent);
    box-shadow: 0 0 0 1px rgba(15, 159, 143, 0.24);
    transform: none;
    background: #f9fffd;
}

.pgs-checkoutnew-step2 .pgs-commerce-subdomain-wrap {
    gap: 0.5rem;
}

.pgs-checkoutnew-step2 .pgs-commerce-subdomain-wrap .form-control,
.pgs-checkoutnew-step2 .pgs-commerce-subdomain-suffix {
    min-height: 3rem;
    border-radius: 10px;
    border-width: 1.5px;
}

.pgs-checkoutnew-step2 .pgs-payment-method {
    border-radius: 10px;
    border: 1.5px solid var(--pgs-checkoutnew-border);
    background: #fff;
    box-shadow: none;
    transform: none;
}

.pgs-checkoutnew-step2 .pgs-payment-method:hover {
    border-color: var(--pgs-checkoutnew-accent);
    box-shadow: none;
}

.pgs-checkoutnew-submit-btn {
    min-height: 3.05rem;
    border-radius: 10px;
}

.pgs-checkoutnew-app .pgs-commerce-subdomain-status,
.pgs-checkoutnew-app .pgs-commerce-verification-status {
    border-radius: 10px;
}

/* CheckoutNew cost summary */
.pgs-checkoutnew-cost-summary {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1rem;
}
.pgs-checkoutnew-cost-summary__row {
    display: flex;
    justify-content: space-between;
    padding: 0.35rem 0;
    font-size: 0.9rem;
    color: #475569;
}
.pgs-checkoutnew-cost-summary__row--total {
    border-top: 1px solid #e2e8f0;
    margin-top: 0.35rem;
    padding-top: 0.5rem;
    font-size: 1rem;
}

.pgs-checkoutnew-app .pgs-commerce-subdomain-status.text-secondary {
    background: #eef6f5;
    color: #206c65 !important;
}

.pgs-checkoutnew-app .pgs-commerce-subdomain-status.text-success {
    background: #e8f7ee;
    color: #237a4b !important;
}

.pgs-checkoutnew-app .pgs-commerce-subdomain-status.text-danger {
    background: #fcebec;
    color: #b42318 !important;
}

.pgs-checkoutnew-app .pgs-commerce-subdomain-status.text-warning {
    background: #fff5e8;
    color: #b54708 !important;
}

.pgs-checkoutnew-app #pgsCheckoutNewAlert {
    border-radius: 12px;
    backdrop-filter: none;
}

.pgs-checkoutnew-app #pgsCheckoutNewAlert.alert-danger {
    border: 1px solid #f5d0d3;
    background: #fff3f4;
    color: #b42318;
}

.pgs-checkoutnew-app #pgsCheckoutNewAlert.alert-success {
    border: 1px solid #cdeedb;
    background: #eefbf4;
    color: #1d6e45;
}

.pgs-checkoutnew-app #pgsCheckoutNewAlert.alert-warning {
    border: 1px solid #f5ddb7;
    background: #fff8eb;
    color: #9a3412;
}

.pgs-checkoutnew-app #pgsCheckoutNewAlert.alert-info {
    border: 1px solid #cfe5f8;
    background: #eef7ff;
    color: #1e5f95;
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 767.98px) {
    .pgs-payment-modal .modal-body {
        padding-inline: 0.9rem;
        padding-bottom: 1rem;
    }

    .pgs-commerce-otp-modal .modal-footer {
        flex-direction: column-reverse;
    }

    .pgs-commerce-otp-modal .modal-footer .btn {
        width: 100%;
    }

    .pgs-public-shell {
        max-width: 100%;
    }

    .pgs-lookup-form .input-group {
        flex-direction: column;
    }

    .pgs-lookup-form .btn {
        width: 100%;
    }

    .pgs-payment-state {
        grid-template-columns: 1fr;
    }

    .pgs-payment-state__badge {
        min-width: 0;
        width: fit-content;
    }

    .pgs-invoice-direct-card__body {
        padding: 1rem 0.95rem 1.1rem;
    }

    .pgs-invoice-direct-lookup-shell {
        padding: 0.75rem 0.75rem 0.9rem;
    }

    .pgs-invoice-direct-identity {
        padding: 0.35rem 0.7rem;
    }

    .pgs-invoice-direct-identity__row {
        grid-template-columns: 1.25rem minmax(4.5rem, 5.1rem) minmax(0, 1fr);
        column-gap: 0.55rem;
        padding: 0.58rem 0;
    }

    .pgs-invoice-direct-identity__label {
        font-size: 0.775rem;
    }

    .pgs-invoice-direct-identity__value {
        font-size: 0.85rem;
    }

    .pgs-invoice-direct-identity__badge {
        font-size: 0.625rem;
    }

    .pgs-pay-app--invoice-direct .pgs-payment-method--invoice-row {
        align-items: flex-start;
        padding: 0.75rem 0.8rem;
    }

    .pgs-pay-app--invoice-direct .pgs-payment-method__label {
        font-size: 0.86rem;
    }

    .pgs-pay-app--invoice-direct .pgs-va-channel-options__list--invoice-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pgs-pay-app--invoice-direct .pgs-va-channel-option--tile {
        padding: 0.52rem 0.45rem;
    }

    .pgs-invoice-direct-detail__head {
        flex-wrap: wrap;
        gap: 0.55rem;
    }

    .pgs-invoice-direct-detail__ref {
        font-size: 0.95rem;
    }

    .pgs-invoice-direct-detail__period {
        font-size: 0.82rem;
    }

    .pgs-invoice-direct-detail__row {
        gap: 0.7rem;
        font-size: 0.84rem;
    }

    .pgs-pay-btn--invoice-direct {
        min-height: 2.9rem;
        font-size: 0.9rem;
    }

    .pgs-snap-container {
        min-height: 300px;
    }

    .pgs-commerce-picker__head,
    .pgs-commerce-slot-block__head {
        grid-template-columns: 1fr;
    }

    .pgs-commerce-slot-block__head {
        display: grid;
    }

    .pgs-commerce-family-switch {
        overflow-x: auto;
        padding-bottom: 0.15rem;
        scrollbar-width: none;
        flex-wrap: nowrap;
    }

    .pgs-commerce-family-switch::-webkit-scrollbar {
        display: none;
    }

    .pgs-commerce-slot-grid {
        --pgs-option-columns: 1 !important;
    }

    .pgs-commerce-inline-tools {
        align-items: flex-start;
        flex-direction: column;
    }

    .pgs-commerce-inline-tools .pgs-commerce-slot-block__detail {
        width: auto;
    }

    .pgs-commerce-label-row,
    .pgs-commerce-subdomain-wrap,
    .pgs-commerce-inline-action {
        flex-direction: column;
        align-items: stretch;
    }

    .pgs-commerce-choice-grid {
        grid-template-columns: 1fr;
    }

    .pgs-commerce-summary-meta,
    .pgs-commerce-meta-grid {
        grid-template-columns: 1fr;
    }

    .pgs-commerce-summary-card .pgs-summary-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .pgs-checkoutnew-app .pgs-checkoutnew-auth,
    .pgs-checkoutnew-app .pgs-checkoutnew-step2 {
        border-radius: 16px;
    }

    .pgs-checkoutnew-app .pgs-checkoutnew-auth .card-body,
    .pgs-checkoutnew-app .pgs-checkoutnew-step2 .card-body {
        padding: 1.05rem !important;
    }

    .pgs-checkoutnew-auth__title {
        font-size: 1.68rem;
    }

    .pgs-checkoutnew-field-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .pgs-checkoutnew-login-row {
        flex-direction: row;
        gap: 0.5rem;
    }

    .pgs-checkoutnew-login-btn {
        font-size: 1rem;
    }

    .pgs-checkoutnew-divider {
        margin: 1.05rem 0;
    }

    .pgs-checkoutnew-register {
        padding: 0.85rem;
        border-radius: 14px;
    }

    .pgs-checkoutnew-register__head {
        grid-template-columns: 1fr;
        gap: 0.85rem;
        padding: 0.95rem;
        border-radius: 14px;
        text-align: left;
    }

    .pgs-checkoutnew-register__icon {
        width: 3rem;
        height: 3rem;
    }

    .pgs-checkoutnew-register__icon svg {
        width: 1.35rem;
        height: 1.35rem;
    }

    .pgs-checkoutnew-register__title {
        font-size: 0.98rem;
    }

    .pgs-checkoutnew-register__subtitle {
        font-size: 0.78rem;
    }

    .pgs-checkoutnew-otp-callout {
        font-size: 0.8rem;
    }

    .pgs-checkoutnew-otp-section #pgsNewOtpCode {
        max-width: 100%;
        font-size: 1rem;
        letter-spacing: 0.22rem;
    }

    .pgs-checkoutnew-otp-action {
        flex-direction: column;
    }

    .pgs-checkoutnew-otp-action .btn {
        width: 100%;
    }

    .pgs-checkoutnew-auth-logged {
        flex-direction: column;
        align-items: stretch;
        gap: 0.8rem;
    }

    .pgs-checkoutnew-auth-logged__logout {
        width: 100%;
    }
}

@media (min-width: 768px) {
    .pgs-commerce-picker__head {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .pgs-commerce-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pgs-commerce-contact-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .pgs-commerce-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ============================================================
   Dark Mode
   ============================================================ */

body.dark-mode,
[data-bs-theme="dark"] {
    --pgs-public-bg: #0c1222;
    --pgs-public-accent: #14b8a6;
    --pgs-public-accent-dark: #0d9488;
    --pgs-public-accent-light: #5eead4;
    --pgs-public-text: #e2e8f0;
    --pgs-public-muted: #94a3b8;
    --pgs-public-card: rgba(30, 41, 59, 0.65);
    --pgs-public-border: rgba(148, 163, 184, 0.08);
    --pgs-public-border-strong: rgba(148, 163, 184, 0.15);
    --pgs-public-soft: rgba(15, 23, 42, 0.5);
    --pgs-public-glow: rgba(20, 184, 166, 0.15);
    --pgs-public-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    --pgs-public-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.3);
}

body.dark-mode::before,
[data-bs-theme="dark"]::before {
    background:
        radial-gradient(ellipse 50% 40% at 20% 70%, rgba(20, 184, 166, 0.05) 0%, transparent 70%),
        radial-gradient(ellipse 40% 60% at 80% 30%, rgba(99, 102, 241, 0.03) 0%, transparent 60%);
}

body.dark-mode .pgs-public-body,
[data-bs-theme="dark"] .pgs-public-body {
    background:
        radial-gradient(ellipse 80% 60% at 10% 20%, rgba(20, 184, 166, 0.06) 0%, transparent 60%),
        radial-gradient(ellipse 60% 80% at 90% 80%, rgba(59, 130, 246, 0.04) 0%, transparent 55%),
        radial-gradient(ellipse 70% 50% at 50% 50%, rgba(168, 85, 247, 0.03) 0%, transparent 50%),
        linear-gradient(175deg, #0c1222 0%, #111827 40%, #0f172a 100%);
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
}

body.dark-mode .pgs-mobile-search__input {
    background: rgba(30, 41, 59, 0.7);
    border-color: var(--pgs-public-border);
    color: var(--pgs-public-text);
}

body.dark-mode .pgs-mobile-search__input::placeholder {
    color: var(--pgs-public-muted);
}

body.dark-mode .pgs-mobile-search__input:focus {
    background: rgba(30, 41, 59, 0.85);
    border-color: var(--pgs-public-accent);
}

body.dark-mode .pgs-payment-method {
    background: rgba(30, 41, 59, 0.6);
    border-color: var(--pgs-public-border);
    color: var(--pgs-public-text);
}

body.dark-mode .pgs-payment-method:hover {
    background: rgba(30, 41, 59, 0.8);
    border-color: var(--pgs-public-accent);
}

body.dark-mode .pgs-payment-method.is-disabled {
    background: rgba(15, 23, 42, 0.5);
}

body.dark-mode .pgs-invoice-card {
    background: linear-gradient(var(--pgs-public-card), var(--pgs-public-card)) padding-box,
                linear-gradient(135deg, rgba(20, 184, 166, 0.2), rgba(59, 130, 246, 0.12), rgba(168, 85, 247, 0.06)) border-box;
}

body.dark-mode .pgs-commerce-package-card {
    background: rgba(30, 41, 59, 0.6);
    border-color: var(--pgs-public-border);
    color: var(--pgs-public-muted);
}

body.dark-mode .pgs-commerce-package-card:hover:not(:disabled) {
    background: rgba(30, 41, 59, 0.8);
    color: var(--pgs-public-accent-light);
}

body.dark-mode .pgs-commerce-package-card.is-active {
    background: rgba(20, 184, 166, 0.1);
    color: var(--pgs-public-accent-light);
}

body.dark-mode .pgs-commerce-slot-card {
    background: rgba(30, 41, 59, 0.55);
    border-color: var(--pgs-public-border);
}

body.dark-mode .pgs-commerce-slot-card:hover:not(:disabled) {
    background: rgba(30, 41, 59, 0.75);
    border-color: var(--pgs-public-accent);
}

body.dark-mode .pgs-commerce-slot-card.is-selected {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.7) 0%, rgba(20, 184, 166, 0.08) 100%);
    border-color: var(--pgs-public-accent);
}

body.dark-mode .pgs-commerce-slot-card__cta {
    background: rgba(20, 184, 166, 0.08);
    color: var(--pgs-public-accent-light);
}

body.dark-mode .pgs-commerce-slot-card.is-selected .pgs-commerce-slot-card__cta {
    background: var(--pgs-public-accent);
    color: #0c1222;
}

body.dark-mode .pgs-commerce-choice-card__body {
    background: rgba(30, 41, 59, 0.55);
    border-color: var(--pgs-public-border);
}

body.dark-mode .pgs-commerce-choice-card:hover .pgs-commerce-choice-card__body {
    background: rgba(30, 41, 59, 0.75);
    border-color: var(--pgs-public-accent);
}

body.dark-mode .pgs-commerce-choice-card input:checked + .pgs-commerce-choice-card__body {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.7) 0%, rgba(20, 184, 166, 0.08) 100%);
    border-color: var(--pgs-public-accent);
}

body.dark-mode .pgs-commerce-field .form-control {
    background: rgba(30, 41, 59, 0.6);
    border-color: var(--pgs-public-border);
    color: var(--pgs-public-text);
}

body.dark-mode .pgs-commerce-field .form-control::placeholder {
    color: var(--pgs-public-muted);
}

body.dark-mode .pgs-commerce-field .form-control:focus {
    background: rgba(30, 41, 59, 0.8);
    border-color: var(--pgs-public-accent);
}

body.dark-mode .pgs-commerce-detail-feature {
    background: rgba(30, 41, 59, 0.5);
    border-color: var(--pgs-public-border);
}

body.dark-mode .pgs-commerce-detail-feature.is-unavailable {
    background: rgba(15, 23, 42, 0.4);
}

body.dark-mode .pgs-commerce-summary-card .pgs-summary-line {
    background: rgba(30, 41, 59, 0.5);
    border-color: var(--pgs-public-border);
}

body.dark-mode .pgs-empty-state {
    background: rgba(15, 23, 42, 0.4);
    border-color: var(--pgs-public-border-strong);
}

body.dark-mode .pgs-empty-state--success {
    background: rgba(22, 163, 74, 0.06);
}

body.dark-mode .pgs-empty-state--error {
    background: rgba(239, 68, 68, 0.06);
}

body.dark-mode .pgs-direct-pay__va-number {
    background: rgba(30, 41, 59, 0.55);
    border-color: var(--pgs-public-border);
}

body.dark-mode .pgs-direct-pay__va-number:hover {
    border-color: var(--pgs-public-accent);
}

body.dark-mode .pgs-direct-pay__code,
body.dark-mode .pgs-direct-pay__va {
    background: rgba(15, 23, 42, 0.4);
    border-color: var(--pgs-public-border);
}

body.dark-mode .pgs-payment-modal__close {
    background: rgba(30, 41, 59, 0.6);
    border-color: var(--pgs-public-border);
    color: var(--pgs-public-muted);
}

body.dark-mode .pgs-payment-modal__close:hover {
    background: rgba(30, 41, 59, 0.85);
    color: var(--pgs-public-text);
}

body.dark-mode .pgs-commerce-tooltip-trigger {
    background: rgba(20, 184, 166, 0.08);
    color: var(--pgs-public-accent-light);
}

body.dark-mode .pgs-commerce-tooltip-trigger:hover {
    background: rgba(20, 184, 166, 0.14);
}

body.dark-mode .pgs-commerce-subdomain-suffix {
    background: rgba(15, 23, 42, 0.5);
    border-color: var(--pgs-public-border);
    color: var(--pgs-public-text);
}

body.dark-mode .btn-primary {
    background: linear-gradient(135deg, var(--pgs-public-accent) 0%, #0f766e 100%);
    box-shadow: 0 2px 16px rgba(20, 184, 166, 0.2);
}

body.dark-mode .btn-primary:hover,
body.dark-mode .btn-primary:focus {
    background: linear-gradient(135deg, #0d9488 0%, #0a6c5f 100%);
    box-shadow: 0 6px 28px rgba(20, 184, 166, 0.3);
}

body.dark-mode .pgs-result-icon.is-success {
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.1), rgba(34, 197, 94, 0.05));
    box-shadow: 0 4px 20px rgba(22, 163, 74, 0.08);
}

body.dark-mode .pgs-result-icon.is-pending {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(251, 191, 36, 0.05));
    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.08);
}

body.dark-mode .pgs-invoice-card-bump {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--pgs-public-border);
}

body.dark-mode .pgs-invoice-total-bump {
    color: rgba(255, 255, 255, 0.45);
}

body.dark-mode .pgs-invoice-total-bump__value {
    color: rgba(255, 255, 255, 0.88);
}

body.dark-mode .pgs-invoice-total-bump strong {
    color: rgba(255, 255, 255, 0.82);
}

body.dark-mode .pgs-va-channel-options {
    background: rgba(15, 23, 42, 0.35);
    border-color: var(--pgs-public-border-strong);
}

body.dark-mode .pgs-va-channel-option {
    background: rgba(30, 41, 59, 0.5);
    border-color: var(--pgs-public-border);
}

body.dark-mode .pgs-va-channel-option:hover {
    background: rgba(30, 41, 59, 0.7);
    border-color: var(--pgs-public-accent);
}

body.dark-mode .pgs-va-channel-option.is-disabled {
    background: rgba(15, 23, 42, 0.4);
}

body.dark-mode .pgs-snap-container {
    background: var(--pgs-public-soft);
    border-color: var(--pgs-public-border);
}

body.dark-mode .pgs-paid-info-modal__icon {
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.12), rgba(34, 197, 94, 0.05));
    color: #4ade80;
}

body.dark-mode .pgs-commerce-recovery {
    background: rgba(245, 158, 11, 0.06);
    border-color: rgba(245, 158, 11, 0.15);
}

body.dark-mode .pgs-chip {
    background: rgba(20, 184, 166, 0.08);
    color: var(--pgs-public-accent-light);
}

body.dark-mode .pgs-chip--muted {
    background: rgba(148, 163, 184, 0.08);
    color: var(--pgs-public-muted);
}

body.dark-mode .pgs-commerce-inline-details summary {
    color: var(--pgs-public-accent-light);
}

body.dark-mode .pgs-inline-legal a {
    color: var(--pgs-public-accent-light);
    text-decoration-color: rgba(20, 184, 166, 0.2);
}

body.dark-mode .pgs-inline-legal a:hover {
    text-decoration-color: var(--pgs-public-accent);
}

body.dark-mode .pgs-payment-state.is-pending {
    background: rgba(245, 158, 11, 0.06);
    border-color: rgba(245, 158, 11, 0.18);
}

body.dark-mode .pgs-payment-state.is-paid {
    background: rgba(2, 132, 199, 0.06);
    border-color: rgba(2, 132, 199, 0.18);
}

body.dark-mode .pgs-payment-state.is-success {
    background: rgba(22, 163, 74, 0.06);
    border-color: rgba(22, 163, 74, 0.18);
}

body.dark-mode .pgs-payment-state.is-error {
    background: rgba(239, 68, 68, 0.06);
    border-color: rgba(239, 68, 68, 0.18);
}

body.dark-mode .pgs-commerce-picker__trial {
    background: linear-gradient(180deg, rgba(20, 184, 166, 0.06) 0%, rgba(20, 184, 166, 0.02) 100%);
    border-color: rgba(20, 184, 166, 0.1);
}

body.dark-mode .pgs-commerce-detail-panel {
    background: rgba(15, 23, 42, 0.4);
    border-color: var(--pgs-public-border);
}

body.dark-mode .pgs-commerce-verification-status.is-info {
    background: rgba(20, 184, 166, 0.06);
    color: var(--pgs-public-accent-light);
}

body.dark-mode .pgs-commerce-verification-status.is-success {
    background: rgba(22, 163, 74, 0.06);
    color: #4ade80;
}

body.dark-mode .pgs-commerce-verification-status.is-warning {
    background: rgba(245, 158, 11, 0.06);
    color: #fbbf24;
}

body.dark-mode .pgs-commerce-verification-status.is-danger {
    background: rgba(239, 68, 68, 0.06);
    color: #f87171;
}

body.dark-mode .pgs-commerce-subdomain-status.is-checking {
    background: rgba(20, 184, 166, 0.06);
    color: var(--pgs-public-accent-light);
}

body.dark-mode .pgs-commerce-subdomain-status.is-success {
    background: rgba(22, 163, 74, 0.06);
    color: #4ade80;
}

body.dark-mode .pgs-commerce-subdomain-status.is-danger {
    background: rgba(239, 68, 68, 0.06);
    color: #f87171;
}

body.dark-mode .pgs-commerce-subdomain-status.is-warning {
    background: rgba(245, 158, 11, 0.06);
    color: #fbbf24;
}

/* ============================================================
   Premium Components — Invoice, Success, Commerce Summary
   ============================================================ */

/* ---------- Invoice Premium Summary ---------- */
.pgs-invoice-premium-summary {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--pgs-public-border-strong);
    border-radius: var(--pgs-public-radius);
    background: rgba(255, 255, 255, 0.85);
    box-shadow: var(--pgs-public-shadow);
}
body.dark-mode .pgs-invoice-premium-summary {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
}
.pgs-summary-avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--pgs-public-accent) 0%, var(--pgs-public-accent-dark) 100%);
    color: #fff;
    font-size: 1.1rem;
    box-shadow: 0 4px 16px rgba(13, 148, 136, 0.25);
}
.pgs-summary-body { flex: 1; min-width: 0; }
.pgs-summary-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--pgs-public-text);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pgs-summary-meta-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.35rem; }
.pgs-summary-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: var(--pgs-public-soft);
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--pgs-public-muted);
    border: 1px solid var(--pgs-public-border);
}
.pgs-summary-chip.muted { opacity: 0.7; }
body.dark-mode .pgs-summary-chip { background: rgba(51, 65, 85, 0.4); border-color: rgba(255,255,255,0.06); }

.pgs-summary-total {
    text-align: right;
    flex-shrink: 0;
    padding-left: 0.75rem;
    border-left: 1px dashed var(--pgs-public-border-strong);
}
.pgs-total-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pgs-public-muted);
    margin-bottom: 0.2rem;
}
.pgs-total-value {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--pgs-public-accent-dark);
    line-height: 1.2;
}
body.dark-mode .pgs-total-value { color: var(--pgs-public-accent-light); }

/* ---------- Success Premium Summary ---------- */
.pgs-success-premium-summary {
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--pgs-public-border-strong);
    border-radius: var(--pgs-public-radius);
    background: rgba(255, 255, 255, 0.8);
    box-shadow: var(--pgs-public-shadow);
}
body.dark-mode .pgs-success-premium-summary {
    background: rgba(30, 41, 59, 0.55);
    border-color: rgba(255, 255, 255, 0.08);
}
.pgs-success-amount-row {
    display: flex;
    align-items: flex-start;
    gap: 0;
}
.pgs-success-amount-row > div { flex: 1; text-align: center; padding: 0 0.5rem; }
.pgs-success-amount-row > div:first-child { padding-left: 0; }
.pgs-success-amount-row > div:last-child { padding-right: 0; }
.pgs-success-divider {
    width: 1px;
    align-self: stretch;
    background: var(--pgs-public-border-strong);
    flex-shrink: 0;
}
body.dark-mode .pgs-success-divider { background: rgba(255,255,255,0.08); }
.pgs-success-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pgs-public-muted);
    margin-bottom: 0.3rem;
}
.pgs-success-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--pgs-public-text);
    line-height: 1.3;
    word-break: break-word;
}
.pgs-success-value.amount {
    font-size: 1.15rem;
    color: var(--pgs-public-accent-dark);
    font-weight: 800;
}
body.dark-mode .pgs-success-value.amount { color: var(--pgs-public-accent-light); }

.pgs-success-sub-info {
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--pgs-public-border);
    font-size: 0.85rem;
    color: var(--pgs-public-muted);
    text-align: center;
}
.pgs-success-sub-info strong { color: var(--pgs-public-text); font-weight: 600; }
body.dark-mode .pgs-success-sub-info { border-color: rgba(255,255,255,0.06); }

/* ---------- Commerce Summary Placeholder ---------- */
.pgs-commerce-summary-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
    text-align: center;
    color: var(--pgs-public-muted);
}
.pgs-commerce-summary-placeholder i {
    font-size: 2.5rem;
    opacity: 0.15;
    color: var(--pgs-public-accent);
}
.pgs-commerce-summary-placeholder span {
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.4;
}

/* ---------- Mobile responsive for premium components ---------- */
@media (max-width: 767.98px) {
    .pgs-invoice-premium-summary {
        flex-wrap: wrap;
        gap: 0.7rem;
        padding: 0.85rem 0.9rem;
    }
    .pgs-summary-total {
        width: 100%;
        text-align: left;
        padding-left: 0;
        border-left: 0;
        border-top: 1px dashed var(--pgs-public-border-strong);
        padding-top: 0.5rem;
        margin-top: 0.2rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .pgs-success-amount-row {
        flex-direction: column;
        gap: 0.75rem;
    }
    .pgs-success-amount-row > div { padding: 0 !important; }
    .pgs-success-divider {
        width: 100%;
        height: 1px;
    }
}

/* ============================================================
   Checkoutnew redesign for payment methods (matches image)
   ============================================================ */
.pgs-checkoutnew-app .pgs-payment-method--invoice-row {
    border-radius: 10px;
    border: 1px solid var(--pgs-public-border-strong);
    padding: 0.82rem 0.95rem;
    background: #fff;
    box-shadow: none;
    backdrop-filter: none;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.pgs-checkoutnew-app .pgs-payment-methods__list--invoice-row {
    gap: 1rem;
}

.pgs-checkoutnew-app .pgs-payment-method--invoice-row + .pgs-payment-method--invoice-row {
    margin-top: 0.95rem;
}

.pgs-checkoutnew-app .pgs-payment-method--invoice-row input[type="radio"] {
    width: 1.05rem;
    height: 1.05rem;
    flex-shrink: 0;
    margin: 0;
    accent-color: var(--pgs-public-accent);
}

.pgs-checkoutnew-app .pgs-payment-method--invoice-row:hover {
    border-color: rgba(13, 148, 136, 0.35);
    transform: none;
    box-shadow: none;
}

.pgs-checkoutnew-app .pgs-payment-method--invoice-row:has(input:checked) {
    border-color: var(--pgs-public-accent);
    box-shadow: 0 0 0 1px var(--pgs-public-accent);
    background-color: rgba(13, 148, 136, 0.03);
}

.pgs-checkoutnew-app .pgs-payment-method__label {
    flex: 1 1 auto;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--pgs-public-text);
}

.pgs-checkoutnew-app .pgs-payment-method__icon {
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    border-radius: 0.4rem;
}

.pgs-checkoutnew-app .pgs-payment-method__chevron {
    color: var(--pgs-public-accent);
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.pgs-checkoutnew-app .pgs-payment-method__icon--qris {
    background-color: rgba(13, 148, 136, 0.1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d9488' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='6' height='6'/%3E%3Crect x='14' y='4' width='6' height='6'/%3E%3Crect x='4' y='14' width='6' height='6'/%3E%3Cpath d='M14 14h3v3'/%3E%3Cpath d='M20 14v6h-6'/%3E%3C/svg%3E");
    background-size: 60% 60%;
}

.pgs-checkoutnew-app .pgs-payment-method__icon--gopay {
    background-color: rgba(2, 132, 199, 0.08);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230284c7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10a3 3 0 0 1 3 3v1H4v-1a3 3 0 0 1 3-3Z'/%3E%3Cpath d='M4 11h16v3a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3z'/%3E%3Cpath d='M16 17v2a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-2'/%3E%3C/svg%3E");
    background-size: 60% 60%;
}

.pgs-checkoutnew-app .pgs-payment-method__icon--va {
    background-color: rgba(13, 148, 136, 0.1);
    background-image: none;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--pgs-public-accent);
}
.pgs-checkoutnew-app .pgs-payment-method__icon--va::after {
    content: 'VA';
}

.pgs-checkoutnew-app .pgs-va-channel-options {
    border: 0;
    border-radius: 0;
    padding: 0.75rem 0 0;
    margin-top: 0.95rem;
    margin-left: 0;
    background: transparent;
    backdrop-filter: none;
}

.pgs-checkoutnew-app .pgs-va-channel-options__label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--pgs-public-muted);
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 0.75rem;
}

.pgs-checkoutnew-app .pgs-va-channel-options__list--invoice-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.7rem;
}

.pgs-checkoutnew-app .pgs-va-channel-option--tile {
    display: grid;
    grid-template-columns: 1.05rem 2rem minmax(0, 1fr);
    align-items: center;
    justify-content: stretch;
    text-align: left;
    min-height: 3.5rem;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--pgs-public-border-strong);
    background: #fff;
    gap: 0.55rem;
}

.pgs-checkoutnew-app .pgs-va-channel-option--tile:hover {
    border-color: rgba(13, 148, 136, 0.35);
}

.pgs-checkoutnew-app .pgs-va-channel-option--tile:has(input:checked) {
    border-color: var(--pgs-public-accent);
    box-shadow: 0 0 0 1px var(--pgs-public-accent);
    background-color: rgba(13, 148, 136, 0.03);
}

.pgs-checkoutnew-app .pgs-va-channel-option--tile input[type="radio"] {
    grid-column: 1;
    position: static;
    opacity: 1;
    width: 1.05rem;
    height: 1.05rem;
    flex-shrink: 0;
    margin: 0;
    accent-color: var(--pgs-public-accent);
    cursor: pointer;
}

.pgs-checkoutnew-app .pgs-va-channel-option--tile .pgs-va-channel-option__logo {
    grid-column: 2;
    margin-top: 0;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

.pgs-checkoutnew-app .pgs-va-channel-option--tile .pgs-va-channel-option__logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.pgs-checkoutnew-app .pgs-va-channel-option--tile .pgs-va-channel-option__name {
    grid-column: 3;
    min-width: 0;
    text-align: left;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--pgs-public-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pgs-payment-method__text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 0.2rem;
}

.pgs-payment-method__text .pgs-payment-method__label {
    flex: none;
    line-height: 1.2;
}

.pgs-payment-method__subtitle {
    font-size: 0.8rem;
    color: var(--pgs-public-muted);
    font-weight: 400;
    line-height: 1.3;
}

/* ==========================================================================
   Checkoutnew enhancements (kontras, state, loading, trial, alert)
   ========================================================================== */

/* [1] Subdomain hint contrast (WCAG AA on white background) */
.pgs-checkoutnew-step2__block .small.text-secondary {
    color: #4b5563 !important;
}
.pgs-commerce-field--subdomain .small.text-secondary,
.pgs-commerce-field--subdomain .text-secondary {
    color: #4b5563 !important;
}

/* [2] Resend OTP cooldown dead-state */
#pgsCheckoutNewResendOtpBtn.is-cooldown {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;
}

/* [3] Submit button inline loading spinner */
.pgs-pay-btn.is-loading::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 8px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: pgsSpin 0.8s linear infinite;
    vertical-align: middle;
}
@keyframes pgsSpin {
    to { transform: rotate(360deg); }
}
.pgs-pay-btn.is-loading {
    pointer-events: none;
    opacity: 0.85;
}

/* [4] Hide VA channels & payment method radios when trial is active */
#pgsCheckoutNewStep2.is-trial-active [data-pgs-va-channel-options],
#pgsCheckoutNewStep2.is-trial-active .pgs-payment-method {
    display: none;
}

/* [5] Empty state catalog alert helper styling */
#pgsCheckoutNewAlert {
    border-radius: 8px;
}
#pgsCheckoutNewAlert a {
    text-decoration: underline;
    font-weight: 600;
    color: inherit;
}

/* [6] is-invalid state (pgs-field-error already styled above at line ~3167) */
.is-invalid {
    border-color: #dc2626 !important;
}

/* [7] pgs-lock-badge: styling injected inline by JS, do not duplicate */

/* [8] Success card setelah trial/paid sukses (rendered by JS renderSuccessCard) */
.pgs-checkoutnew-success {
    text-align: center;
    padding: 0.5rem 0;
}
.pgs-checkoutnew-success__icon {
    margin-bottom: 0.75rem;
}
.pgs-checkoutnew-success__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #16a34a;
    margin: 0 0 1.25rem;
}
.pgs-checkoutnew-success__details {
    background: #f8fafc;
    border-radius: 10px;
    padding: 0.85rem 1rem;
    margin-bottom: 1.25rem;
    text-align: left;
}
.pgs-checkoutnew-success__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid #e5e7eb;
    font-size: 0.92rem;
}
.pgs-checkoutnew-success__row:last-child {
    border-bottom: none;
}
.pgs-checkoutnew-success__row span:first-child {
    color: #4b5563;
}
.pgs-checkoutnew-success__row code {
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 0.15rem 0.4rem;
    font-size: 0.82rem;
    color: #111827;
}
.pgs-checkoutnew-success__cred {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    padding: 0.85rem 1rem;
    margin-bottom: 1.25rem;
    text-align: left;
}
.pgs-checkoutnew-success__cred-title {
    font-weight: 600;
    color: #1e3a8a;
    font-size: 0.92rem;
    margin-bottom: 0.5rem;
}
.pgs-checkoutnew-success__cred-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid #dbeafe;
    font-size: 0.88rem;
    flex-wrap: wrap;
}
.pgs-checkoutnew-success__cred-row:last-child {
    border-bottom: none;
}
.pgs-checkoutnew-success__cred-row span:first-child {
    color: #4b5563;
    flex-shrink: 0;
    min-width: 80px;
}
.pgs-checkoutnew-success__cred-row a {
    color: #1d4ed8;
    text-decoration: underline;
    word-break: break-all;
    text-align: right;
    flex: 1;
}
.pgs-checkoutnew-success__cred-row code {
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 0.15rem 0.45rem;
    font-size: 0.82rem;
    color: #111827;
    flex-shrink: 0;
}
.pgs-checkoutnew-success__cred-row--masked em {
    color: #92400e;
    font-style: normal;
    font-size: 0.84rem;
    text-align: right;
    flex: 1;
    line-height: 1.3;
}

.pgs-checkoutnew-success__email-notice {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    background: #fef3c7;
    border: 1px solid #fbbf24;
    border-radius: 10px;
    padding: 0.85rem 1rem;
    margin-bottom: 1.25rem;
    text-align: left;
    color: #78350f;
    font-size: 0.92rem;
    line-height: 1.5;
}
.pgs-checkoutnew-success__email-notice-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    line-height: 1;
}
.pgs-checkoutnew-success__btn {
    margin-bottom: 0.75rem;
}
.pgs-checkoutnew-success__hint {
    font-size: 0.82rem;
    color: #6b7280;
    margin: 0;
}