.detail-panel { padding: 20px; border-color: rgba(164, 123, 255, .42); background: linear-gradient(145deg, var(--surface-raised), var(--surface-soft)); }.selection-section-heading { display: flex; align-items: center; gap: 13px; min-height: 42px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }.selection-section-heading h2 { font-size: 18px; letter-spacing: -.02em; }.section-number { display: grid; width: 34px; height: 34px; place-items: center; border: 2px solid #d5c4ff; color: #e6ddff; font-size: 12px; font-weight: 900; transform: rotate(45deg); }.section-number::first-letter { transform: rotate(-45deg); }.section-number { line-height: 34px; }.selection-grid { margin-top: 14px; gap: 9px; }.package-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.selection-card { min-height: 58px; padding: 12px; border-radius: 6px; border-color: transparent; background: var(--surface); box-shadow: none; }.selection-card:hover { border-color: #c4aaff; background: var(--surface-raised); box-shadow: 0 8px 16px rgba(0,0,0,.15); }.selection-card.is-selected { border-color: var(--accent); background: var(--primary-soft); box-shadow: 0 0 0 1px var(--accent); }.package-card strong { padding-right: 22px; font-size: 12px; letter-spacing: .01em; }.package-card b { margin-top: 4px; color: var(--text); font-size: 12px; }.selection-check { top: 9px; right: 9px; width: 17px; height: 17px; border-color: var(--border); font-size: 9px; }.is-selected .selection-check { background: var(--accent); border-color: var(--accent); color: #25200e; }.payment-category { margin-top: 14px; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; }.payment-category-title { padding: 11px 13px; border-bottom: 1px solid var(--border); color: #e6ddff; font-size: 13px; font-weight: 800; }.payment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 14px; background: rgba(0,0,0,.08); }.payment-card { min-height: 82px; padding: 12px; border-radius: 6px; }.bank-logo { display: flex; align-items: center; min-width: 90px; height: 38px; color: #fff; font-size: 23px; font-weight: 900; font-style: italic; letter-spacing: -1.5px; }.payment-card-logo { display: block; width: 90px; height: 44px; flex: 0 0 90px; object-fit: contain; }.bank-bca-va { color: #3b72df; }.bank-mandiri-va { color: #d5dcec; font-size: 17px; letter-spacing: -1px; }.payment-card-content strong { color: var(--text); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }.payment-card-content small { max-width: 180px; font-size: 10px; }.whatsapp-field { margin-top: 20px; } @media (max-width: 767.98px) { .package-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.payment-grid { grid-template-columns: 1fr; } } @media (max-width: 575.98px) { .detail-panel { padding: 15px; }.package-card { min-height: 62px; }.selection-section-heading h2 { font-size: 16px; }.bank-logo { min-width: 78px; }.payment-card-logo { min-width: 78px; flex-basis: 78px; } }

.bank-bca-va {
    color: #76a8ff;
}

.payment-final-price { color: var(--text); display: block; font-size: 15px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1.2; margin-top: 4px; }

.option-payment--disabled {
    cursor: not-allowed;
    opacity: 1;
    border-color: color-mix(in srgb, var(--border) 88%, transparent);
    background: color-mix(in srgb, var(--surface) 92%, #000);
}

.option-payment--disabled,
.option-payment--disabled * {
    cursor: not-allowed;
}

.option-payment--disabled:hover {
    border-color: color-mix(in srgb, var(--border) 88%, transparent);
    box-shadow: none;
    transform: none;
}

.option-payment--disabled .option-title { color: var(--text-secondary); }
.option-payment--disabled .payment-final-price { color: var(--text-muted); }