/* JBC VVIP public storefront and payment surfaces */
body.public-shell { --public-bg: #f6f8fc; --public-surface: #fff; --public-soft: #f1f5fb; --public-border: #e4eaf2; --public-text: #0b1220; --public-muted: #667085; --public-primary: #2457ff; background: var(--public-bg); color: var(--public-text); }
body.public-shell .auth-frame-wide { max-width: 1120px; }
body.public-shell :focus-visible { outline: 3px solid rgba(36, 87, 255, .22); outline-offset: 3px; }
body.public-shell .alert[role="status"] { display: block; }
body.public-shell .table-responsive { scrollbar-color: #cbd5e1 transparent; scrollbar-width: thin; }
body.public-shell .auth-card { background: var(--public-surface); }
body.public-shell .auth-card > .mb-4.text-center:first-child { margin: 0 !important; }
body.public-shell .auth-card > .mb-4.text-center:first-child img {
    width: 100% !important; max-height: 265px; object-fit: cover; border-radius: 18px 18px 0 0;
}
body.public-shell .auth-card-flush > .px-4,
body.public-shell .auth-card-flush > .px-sm-5 { padding-left: 28px !important; padding-right: 28px !important; }
body.public-shell .auth-card-flush > .px-4 { padding-top: 22px; }
body.public-shell .auth-card-flush .card { margin: 0 0 16px !important; border: 1px solid var(--public-border) !important; border-radius: 16px !important; background: var(--public-surface) !important; box-shadow: 0 8px 24px rgba(15, 23, 42, .05) !important; }
body.public-shell .auth-card-flush .card-body { padding: 20px !important; }
body.public-shell .auth-card-flush .form-control, body.public-shell .auth-card-flush select.form-control {
    min-height: 48px; border: 1px solid var(--public-border) !important; border-radius: 11px; background: var(--public-soft) !important; color: var(--public-text) !important; box-shadow: none !important;
}
body.public-shell .auth-card-flush .form-control:focus { border-color: var(--public-primary) !important; box-shadow: 0 0 0 3px rgba(36, 87, 255, .12) !important; background: #fff !important; }
body.public-shell .auth-card-flush label { display: block; margin-bottom: 7px; color: var(--public-text) !important; font-size: .74rem; font-weight: 800; }
body.public-shell .auth-card-flush .btn { min-height: 44px; border-radius: 11px !important; font-weight: 800; }
body.public-shell .auth-card-flush .btn-primary { background: var(--public-primary) !important; border-color: var(--public-primary) !important; color: #fff !important; }
body.public-shell .auth-card-flush .btn-primary:hover { background: #1b44d5 !important; border-color: #1b44d5 !important; }
body.public-shell .auth-card-flush .text-muted { color: var(--public-muted) !important; }
body.public-shell .auth-card-flush .border-top, body.public-shell .auth-card-flush .border-bottom { border-color: var(--public-border) !important; }

/* Public portal header and navigation */
body.public-shell #themeLabelText { color: var(--public-text) !important; font-size: .82rem !important; font-weight: 850 !important; letter-spacing: -.01em; }
body.public-shell #themeToggleBtn { min-height: 38px; border: 1px solid var(--public-border) !important; border-radius: 999px !important; background: var(--public-soft) !important; color: var(--public-text) !important; }
body.public-shell .scrollable-tabs-container { margin: 0 0 20px; padding: 0 0 2px; overflow-x: auto; scrollbar-width: none; }
body.public-shell .scrollable-tabs-container::-webkit-scrollbar { display: none; }
body.public-shell .scrollable-tabs-container .nav-tabs { display: flex; flex-wrap: nowrap; gap: 8px !important; border: 0 !important; }
body.public-shell .scrollable-tabs-container .nav-link { min-height: 40px; display: inline-flex; align-items: center; border: 1px solid var(--public-border) !important; border-radius: 999px !important; background: var(--public-surface) !important; color: var(--public-muted) !important; padding: 8px 14px !important; font-size: .74rem !important; font-weight: 800 !important; }
body.public-shell .scrollable-tabs-container .nav-link:hover { border-color: var(--public-primary) !important; color: var(--public-primary) !important; }
body.public-shell .scrollable-tabs-container .nav-link.active { border-color: var(--public-primary) !important; background: rgba(36, 87, 255, .08) !important; color: var(--public-primary) !important; }
body.public-shell .tab-content { padding-top: 0 !important; }
body.public-shell .tab-pane > .text-left > h5, body.public-shell .tab-pane h5, body.public-shell .tab-pane h6 { color: var(--public-text) !important; }
body.public-shell .tab-pane p, body.public-shell .tab-pane li { color: var(--public-muted); font-size: .80rem; line-height: 1.65; }
body.public-shell .tab-pane .badge { border-radius: 999px; font-weight: 800; }

/* Pricing, orders, selectors and data */
body.public-shell .table-responsive { overflow-x: auto; border: 1px solid var(--public-border) !important; border-radius: 12px !important; }
body.public-shell .table { min-width: 560px; margin: 0 !important; color: var(--public-text) !important; font-size: .76rem; }
body.public-shell .table th { background: var(--public-soft) !important; color: var(--public-muted) !important; border-color: var(--public-border) !important; font-size: .67rem; font-weight: 850; text-transform: uppercase; letter-spacing: .05em; }
body.public-shell .table td { border-color: var(--public-border) !important; vertical-align: middle; }
body.public-shell .table tbody tr, body.public-shell .table-striped tbody tr { background: var(--public-surface) !important; }
body.public-shell .table tbody tr:hover { background: rgba(36, 87, 255, .04) !important; }
body.public-shell .qris-card-selector { display: grid; gap: 8px; }
body.public-shell .qris-card { min-height: 58px; display: flex; align-items: center; gap: 12px; padding: 12px 14px !important; border: 1px solid var(--public-border) !important; border-radius: 12px !important; background: var(--public-surface) !important; color: var(--public-text) !important; cursor: pointer; transition: border-color 150ms ease, background 150ms ease, transform 150ms ease; }
body.public-shell .qris-card:hover { border-color: var(--public-primary) !important; transform: translateY(-1px); }
body.public-shell .qris-card.qris-selected { border-color: var(--public-primary) !important; background: var(--public-primary) !important; color: #fff !important; }
body.public-shell .order-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
body.public-shell .order-grid .full { grid-column: 1 / -1; }
body.public-shell .form-shell, body.public-shell .order-shell { width: 100%; }
body.public-shell .help-block { color: #d64545 !important; }
body.public-shell .alert { border-radius: 12px !important; border: 1px solid var(--public-border) !important; color: var(--public-text) !important; font-size: .78rem; }
body.public-shell .alert-info { background: rgba(36, 87, 255, .08) !important; border-color: rgba(36, 87, 255, .22) !important; }
body.public-shell .alert-success { background: rgba(14, 159, 110, .08) !important; border-color: rgba(14, 159, 110, .22) !important; }
body.public-shell .alert-danger { background: rgba(214, 69, 69, .08) !important; border-color: rgba(214, 69, 69, .22) !important; }
body.public-shell .alert-warning { background: rgba(217, 119, 6, .08) !important; border-color: rgba(217, 119, 6, .22) !important; }

/* Content pages */
body.public-shell .public-copy { color: var(--public-muted); font-size: .82rem; line-height: 1.7; }
body.public-shell .auth-card:not(.auth-card-flush) h4 { margin: 0 0 7px; font-size: 1.12rem; font-weight: 850; letter-spacing: -.025em; }
body.public-shell .auth-card:not(.auth-card-flush) h5, body.public-shell .auth-card:not(.auth-card-flush) h6 { font-weight: 800; }
body.public-shell .auth-card:not(.auth-card-flush) ul { padding-left: 18px; }
body.public-shell .auth-card:not(.auth-card-flush) .text-primary { color: var(--public-primary) !important; }
body.public-shell .auth-card:not(.auth-card-flush) .text-success { color: #0e9f6e !important; }

/* Invoice */
body.public-shell .invoice-card { border: 1px solid var(--public-border) !important; border-radius: 16px !important; background: var(--public-surface) !important; box-shadow: 0 12px 32px rgba(15, 23, 42, .06) !important; }
body.public-shell .invoice-title, body.public-shell .invoice-qr-label, body.public-shell .invoice-detail-val { color: var(--public-text) !important; }
body.public-shell .invoice-subtitle, body.public-shell .invoice-detail-label, body.public-shell .invoice-card-title { color: var(--public-muted) !important; }
body.public-shell .invoice-details-list, body.public-shell .invoice-pay-box { border: 1px solid var(--public-border) !important; border-radius: 12px !important; background: var(--public-soft) !important; }
body.public-shell .invoice-detail-row { border-color: var(--public-border) !important; }
body.public-shell .invoice-notice-box { border: 1px solid rgba(36, 87, 255, .20) !important; border-radius: 12px !important; background: rgba(36, 87, 255, .07) !important; color: #1d4ed8 !important; }
body.public-shell .invoice-notice-title { color: #1d4ed8 !important; }
body.public-shell .invoice-btn-status { min-height: 46px; border-radius: 11px !important; background: var(--public-primary) !important; box-shadow: none !important; }
body.public-shell .invoice-btn-status:hover { background: #1b44d5 !important; }
body.public-shell .invoice-btn-back { min-height: 46px; border: 1px solid var(--public-border) !important; border-radius: 11px !important; background: var(--public-surface) !important; color: var(--public-text) !important; }
body.public-shell .invoice-btn-copy { border: 1px solid var(--public-border) !important; border-radius: 9px !important; background: var(--public-surface) !important; color: var(--public-text) !important; }

body.public-shell .float-wa { width: 48px; height: 48px; right: 18px; bottom: 18px; box-shadow: 0 10px 24px rgba(15, 23, 42, .18); }
body.public-shell .float-wa .my-float { font-size: 23px; }
body.public-shell .auth-card > .mt-4.text-center { margin-top: 20px !important; }

[data-theme="dark"] body.public-shell, body.public-shell[data-theme="dark"] { --public-bg: #0b1220; --public-surface: #111a2b; --public-soft: #172238; --public-border: rgba(226, 232, 240, .12); --public-text: #f8fafc; --public-muted: #a8b3c5; --public-primary: #6d8cff; }
[data-theme="dark"] body.public-shell .auth-card-flush .form-control { background: var(--public-soft) !important; color: var(--public-text) !important; }
[data-theme="dark"] body.public-shell .table tbody tr, [data-theme="dark"] body.public-shell .table-striped tbody tr { background: var(--public-surface) !important; }
[data-theme="dark"] body.public-shell .table th { background: var(--public-soft) !important; }
[data-theme="dark"] body.public-shell .invoice-notice-box { color: #bfdbfe !important; }
[data-theme="dark"] body.public-shell .invoice-notice-title { color: #bfdbfe !important; }

@media (max-width: 767.98px) {
    body.public-shell .auth-card-flush > .px-4, body.public-shell .auth-card-flush > .px-sm-5 { padding-left: 16px !important; padding-right: 16px !important; }
    body.public-shell .auth-card-flush > .px-4 { padding-top: 16px; }
    body.public-shell .auth-card-flush .card-body { padding: 16px !important; }
    body.public-shell .order-grid { grid-template-columns: 1fr; }
    body.public-shell .order-grid .full { grid-column: auto; }
    body.public-shell .auth-card > .mb-4.text-center:first-child img { max-height: 190px; border-radius: 14px 14px 0 0; }
    body.public-shell .float-wa { right: 14px; bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    body.public-shell *, body.public-shell *::before, body.public-shell *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}