/* Final storefront top-up UI. Loads after the database theme to avoid legacy overrides. */
body[data-page="angpao"] .site-main,
body[data-page="slip"] .site-main,
body[data-page="redeem"] .site-main {
    position: relative;
    z-index: 2;
    background: transparent !important;
}
.topup-shell,
.topup-shell *,
.topup-shell *::before,
.topup-shell *::after { box-sizing: border-box; }
.topup-shell {
    position: relative !important;
    z-index: 4 !important;
    width: 100% !important;
    max-width: none !important;
    padding: 34px 0 60px !important;
    margin: 0 !important;
}
.topup-container {
    width: min(1180px, calc(100% - 32px)) !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}
.topup-layout {
    display: grid !important;
    grid-template-columns: minmax(260px, 305px) minmax(0, 1fr) !important;
    gap: 24px !important;
    align-items: start !important;
    width: 100% !important;
}
.topup-content,
.topup-method-column { min-width: 0 !important; width: 100% !important; }
.topup-method-sidebar {
    position: sticky !important;
    top: 92px !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 16px !important;
    overflow: hidden !important;
    border: 1px solid var(--border) !important;
    border-radius: 24px !important;
    background: linear-gradient(145deg, var(--surface), var(--surface-raised)) !important;
    box-shadow: 0 18px 45px rgba(0,0,0,.22) !important;
}
.topup-method-head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 14px !important;
    padding: 2px 2px 15px !important;
}
.topup-method-kicker,
.topup-eyebrow,
.topup-slip-eyebrow,
.topup-redeem-eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    color: var(--main) !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: .16em !important;
    line-height: 1.4 !important;
    text-transform: uppercase !important;
}
.topup-method-kicker {
    min-height: 22px !important;
    padding: 3px 9px !important;
    border: 1px solid var(--border) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.03) !important;
}
.topup-method-head h2 {
    margin: 10px 0 3px !important;
    color: var(--font) !important;
    font-size: 25px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    letter-spacing: -.03em !important;
}
.topup-method-head p { margin: 0 !important; color: var(--muted) !important; font-size: 12px !important; line-height: 1.7 !important; }
.topup-method-head-icon {
    display: grid !important;
    place-items: center !important;
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
    border-radius: 16px !important;
    color: var(--on-primary) !important;
    background: linear-gradient(135deg, var(--main), var(--sub)) !important;
}
.topup-method-list { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; width: 100% !important; }
.topup-method-card {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 74px !important;
    width: 100% !important;
    padding: 11px 12px !important;
    border: 1px solid var(--border) !important;
    border-radius: 18px !important;
    color: var(--font) !important;
    text-decoration: none !important;
    background: var(--surface) !important;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
}
.topup-method-card:hover {
    transform: translateY(-2px) !important;
    border-color: var(--main) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.18) !important;
}
.topup-method-card.is-active {
    border-color: var(--main) !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--main) 17%, var(--surface)), color-mix(in srgb, var(--sub) 10%, var(--surface))) !important;
}
.topup-method-icon {
    display: grid !important;
    place-items: center !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 16px !important;
    color: var(--on-primary) !important;
    background: linear-gradient(135deg, var(--main), var(--sub)) !important;
    font-size: 19px !important;
}
.topup-method-copy { display: grid !important; gap: 3px !important; min-width: 0 !important; }
.topup-method-copy strong { color: var(--font) !important; font-size: 13px !important; font-weight: 900 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.topup-method-copy small { color: var(--muted) !important; font-size: 10px !important; line-height: 1.45 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.topup-method-badge { display: inline-flex !important; padding: 4px 7px !important; border-radius: 999px !important; color: var(--main) !important; background: rgba(255,255,255,.04) !important; font-size: 9px !important; font-weight: 900 !important; white-space: nowrap !important; }
.topup-wallet-card,
.topup-slip-card,
.topup-redeem-card {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding: clamp(24px, 4vw, 38px) !important;
    border: 1px solid var(--border) !important;
    border-radius: 28px !important;
    background: linear-gradient(145deg, var(--surface), var(--surface-raised)) !important;
    box-shadow: 0 22px 60px rgba(0,0,0,.22) !important;
}
.topup-wallet-card::after,
.topup-slip-card::after,
.topup-redeem-card::after {
    content: '' !important;
    position: absolute !important;
    width: 300px !important;
    height: 300px !important;
    right: -125px !important;
    bottom: -150px !important;
    border-radius: 50% !important;
    background: color-mix(in srgb, var(--main) 12%, transparent) !important;
    pointer-events: none !important;
}
.topup-wallet-hero,
.topup-slip-hero,
.topup-redeem-hero {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    width: 100% !important;
}
.topup-wallet-title,
.topup-slip-hero > div:first-child,
.topup-redeem-hero > div:first-child { min-width: 0 !important; }
.topup-wallet-hero h1,
.topup-slip-hero h1,
.topup-redeem-hero h1 {
    margin: 6px 0 8px !important;
    color: var(--font) !important;
    font-size: clamp(29px, 4vw, 42px) !important;
    font-weight: 900 !important;
    letter-spacing: -.04em !important;
    line-height: 1.22 !important;
}
.topup-wallet-hero p,
.topup-slip-hero p,
.topup-redeem-hero p {
    max-width: 680px !important;
    margin: 0 !important;
    color: var(--muted) !important;
    font-size: 13px !important;
    line-height: 1.85 !important;
}
.topup-wallet-icon,
.topup-slip-icon,
.topup-redeem-icon {
    display: grid !important;
    place-items: center !important;
    width: 120px !important;
    height: 120px !important;
    flex: 0 0 120px !important;
    border-radius: 30px !important;
    color: var(--on-primary) !important;
    background: linear-gradient(135deg, var(--main), var(--sub)) !important;
    box-shadow: 0 16px 40px rgba(0,0,0,.18) !important;
    font-size: 48px !important;
}
.topup-wallet-status,
.topup-redeem-note,
.topup-bank-panel {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin: 26px 0 !important;
    padding: 15px 16px !important;
    border: 1px solid var(--border) !important;
    border-radius: 17px !important;
    background: var(--surface) !important;
}
.topup-wallet-status { justify-content: space-between !important; }
.topup-wallet-status span,
.topup-wallet-status strong,
.topup-redeem-note span { font-size: 12px !important; }
.topup-wallet-status span { display: inline-flex !important; align-items: center !important; gap: 8px !important; color: var(--muted) !important; }
.topup-wallet-status span i { display: inline-block !important; width: 8px !important; height: 8px !important; border-radius: 50% !important; background: var(--success) !important; }
.topup-wallet-status strong { color: var(--main) !important; }
.topup-wallet-form,
.topup-bank-number,
.topup-upload-area,
.topup-redeem-form { position: relative !important; z-index: 1 !important; }
.topup-wallet-form label,
.topup-bank-number label,
.topup-redeem-form label { display: block !important; margin-bottom: 9px !important; color: var(--font) !important; font-size: 13px !important; font-weight: 900 !important; }
.topup-input-wrap,
.topup-redeem-input-wrap,
.topup-copy-row { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; gap: 10px !important; width: 100% !important; }
.topup-input-wrap .form-control,
.topup-redeem-input-wrap .form-control,
.topup-copy-row .form-control,
.topup-upload-input {
    min-width: 0 !important;
    min-height: 54px !important;
    width: 100% !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    background: var(--surface) !important;
    color: var(--font) !important;
    font-size: 13px !important;
    box-shadow: none !important;
}
.topup-submit,
.topup-redeem-submit,
.topup-copy-btn {
    min-height: 54px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0 22px !important;
    border: 0 !important;
    border-radius: 16px !important;
    color: var(--on-primary) !important;
    background: linear-gradient(135deg, var(--main), var(--sub)) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}
.topup-wallet-form small,
.topup-upload-copy small { display: block !important; margin-top: 10px !important; color: var(--muted) !important; font-size: 11px !important; }
.topup-wallet-steps {
    position: relative !important;
    z-index: 1 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-top: 24px !important;
}
.topup-wallet-steps div {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 58px !important;
    padding: 12px !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.035) !important;
}
.topup-wallet-steps b {
    display: grid !important;
    place-items: center !important;
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
    border-radius: 11px !important;
    color: var(--on-primary) !important;
    background: var(--main) !important;
    font-size: 12px !important;
}
.topup-wallet-steps span { color: var(--font) !important; font-size: 11px !important; font-weight: 700 !important; line-height: 1.5 !important; }
.topup-bank-icon { display: grid !important; place-items: center !important; width: 52px !important; height: 52px !important; flex: 0 0 52px !important; border-radius: 17px !important; color: var(--on-primary) !important; background: linear-gradient(135deg, var(--main), var(--sub)) !important; }
.topup-bank-copy { display: grid !important; gap: 3px !important; min-width: 0 !important; }
.topup-bank-copy span { color: var(--muted) !important; font-size: 10px !important; font-weight: 800 !important; letter-spacing: .08em !important; }
.topup-bank-copy strong { color: var(--font) !important; font-size: 18px !important; font-weight: 900 !important; overflow-wrap: anywhere !important; }
.topup-bank-copy small { color: var(--muted) !important; font-size: 12px !important; }
.topup-upload-copy { display: grid !important; gap: 4px !important; margin: 20px 0 12px !important; }
.topup-upload-copy span { display: inline-flex !important; align-items: center !important; gap: 8px !important; color: var(--font) !important; font-size: 13px !important; font-weight: 900 !important; }
.topup-upload-box {
    display: grid !important;
    place-items: center !important;
    gap: 7px !important;
    min-height: 170px !important;
    padding: 24px !important;
    border: 1px dashed var(--border) !important;
    border-radius: 22px !important;
    color: var(--font) !important;
    background: rgba(255,255,255,.035) !important;
    cursor: pointer !important;
    text-align: center !important;
}
.topup-upload-box i { color: var(--main) !important; font-size: 34px !important; }
.topup-upload-box strong { font-size: 15px !important; font-weight: 900 !important; }
.topup-upload-box small { color: var(--muted) !important; font-size: 11px !important; }
.page-topup-slip-display-4 { display: none !important; }
@media (max-width: 991px) {
    .topup-shell { padding: 22px 0 44px !important; }
    .topup-layout { grid-template-columns: 1fr !important; gap: 16px !important; }
    .topup-method-sidebar { position: static !important; border-radius: 20px !important; padding: 14px !important; }
    .topup-method-head { align-items: center !important; }
    .topup-method-head h2 { margin: 0 !important; font-size: 21px !important; }
    .topup-method-head p { display: none !important; }
    .topup-method-list { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 9px !important; }
    .topup-method-card { grid-template-columns: 44px minmax(0, 1fr) !important; min-height: 66px !important; padding: 10px !important; }
    .topup-method-icon { width: 44px !important; height: 44px !important; font-size: 17px !important; }
    .topup-method-badge { display: none !important; }
}
@media (max-width: 760px) {
    .topup-wallet-hero,
    .topup-slip-hero,
    .topup-redeem-hero { align-items: flex-start !important; }
    .topup-wallet-icon,
    .topup-slip-icon,
    .topup-redeem-icon { width: 82px !important; height: 82px !important; flex-basis: 82px !important; border-radius: 22px !important; font-size: 32px !important; }
    .topup-wallet-status { display: grid !important; gap: 7px !important; }
    .topup-input-wrap,
    .topup-redeem-input-wrap,
    .topup-copy-row { grid-template-columns: 1fr !important; }
    .topup-submit,
    .topup-redeem-submit,
    .topup-copy-btn { width: 100% !important; }
    .topup-wallet-steps { grid-template-columns: 1fr !important; }
}
@media (max-width: 620px) {
    .topup-container { width: min(100% - 22px, 1180px) !important; }
    .topup-method-list { grid-template-columns: 1fr !important; }
    .topup-method-card { grid-template-columns: 42px minmax(0, 1fr) auto !important; min-height: 62px !important; }
    .topup-method-badge { display: inline-flex !important; }
}
@media (max-width: 430px) {
    .topup-shell { padding-top: 16px !important; }
    .topup-container { width: min(100% - 18px, 1180px) !important; }
    .topup-method-sidebar { padding: 12px !important; border-radius: 18px !important; }
    .topup-method-kicker { display: none !important; }
    .topup-method-card { grid-template-columns: 42px minmax(0, 1fr) !important; padding: 10px !important; }
    .topup-method-badge { display: none !important; }
    .topup-wallet-card,
    .topup-slip-card,
    .topup-redeem-card { padding: 20px !important; border-radius: 21px !important; }
    .topup-wallet-hero,
    .topup-slip-hero,
    .topup-redeem-hero { display: grid !important; }
    .topup-wallet-icon,
    .topup-slip-icon,
    .topup-redeem-icon { order: -1 !important; }
    .topup-wallet-hero h1,
    .topup-slip-hero h1,
    .topup-redeem-hero h1 { font-size: 27px !important; }
}

/* Prompt typography pass for storefront top-up pages. */
body[data-page="angpao"],
body[data-page="slip"],
body[data-page="redeem"],
.topup-shell,
.topup-shell input,
.topup-shell button,
.topup-shell textarea,
.topup-shell select {
    font-family: var(--site-font-family, 'Prompt','Noto Sans Thai',system-ui,sans-serif) !important;
    font-weight: 400 !important;
}
.topup-shell h1,
.topup-shell h2,
.topup-shell h3,
.topup-method-head h2,
.topup-wallet-hero h1,
.topup-slip-hero h1,
.topup-redeem-hero h1 {
    font-family: var(--site-font-family, 'Prompt','Noto Sans Thai',system-ui,sans-serif) !important;
    font-weight: 600 !important;
    letter-spacing: -.025em !important;
}
.topup-method-copy strong,
.topup-submit,
.topup-method-card,
.topup-method-badge,
.topup-eyebrow,
.topup-method-kicker {
    font-family: var(--site-font-family, 'Prompt','Noto Sans Thai',system-ui,sans-serif) !important;
    font-weight: 500 !important;
}

/* Global font from theme editor */
body, button, input, select, textarea { font-family: var(--site-font-family, 'Prompt','Noto Sans Thai',system-ui,sans-serif) !important; }