/* 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); }
/* Storefront banner: show the whole image (never cropped). When it is
   shorter than the card is wide, a blurred copy fills the sides. */
body.public-shell .auth-card > .storefront-banner { position: relative; display: flex; justify-content: center; margin: 0 !important; overflow: hidden; border-radius: 18px 18px 0 0; background: #0b0d12; }
body.public-shell .auth-card > .storefront-banner::before { content: ""; position: absolute; inset: -30px; background: var(--storefront-banner) center / cover no-repeat; filter: blur(24px) brightness(.55); }
body.public-shell .auth-card > .storefront-banner img { position: relative; display: block; width: auto; max-width: 100%; height: auto; max-height: 400px; }
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; }

/* Order form: dropdown fields, QRIS payment cards, notice and Turnstile */
body.public-shell .order-field-hint { display: block; margin-top: 6px; color: var(--public-muted); font-size: .7rem; line-height: 1.45; }
body.public-shell .order-pay-grid { display: grid; gap: 8px; }

/* Payment cards. The radio stays in the DOM for keyboard use and form posts. */
body.public-shell .auth-card-flush label.order-option { position: relative; display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 14px; border: 1px solid var(--public-border); border-radius: 12px; background: var(--public-surface); color: var(--public-text) !important; font-size: .8rem; font-weight: 600; line-height: 1.35; cursor: pointer; transition: border-color 150ms ease, background 150ms ease; }
body.public-shell .auth-card-flush label.order-option:hover { border-color: var(--public-primary); }
body.public-shell .auth-card-flush label.order-option:focus-within { box-shadow: 0 0 0 3px rgba(36, 87, 255, .18); }
body.public-shell .auth-card-flush label.order-option.is-selected { border-color: var(--public-primary); background: var(--public-primary); color: #fff !important; }
body.public-shell label.order-option > input[type="radio"] { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
body.public-shell .order-option__body { min-width: 0; display: flex; flex: 1; flex-direction: column; gap: 1px; }
body.public-shell .order-option__title { font-size: .82rem; font-weight: 800; }
body.public-shell .order-option__desc { color: var(--public-muted); font-size: .68rem; font-weight: 500; }
body.public-shell label.order-option.is-selected .order-option__desc { color: rgba(255, 255, 255, .82); }
body.public-shell .order-option__check { flex: 0 0 auto; margin-left: auto; color: transparent; font-size: 20px; line-height: 1; }
body.public-shell label.order-option.is-selected .order-option__check { color: #fff; }
body.public-shell .order-pay__logo { width: 66px; flex: 0 0 66px; display: flex; justify-content: center; padding: 5px 7px; border: 1px solid #e4eaf2; border-radius: 8px; background: #fff; }

body.public-shell .order-notice { padding: 14px 16px; border: 1px solid var(--public-border); border-radius: 12px; background: var(--public-soft); }
body.public-shell .order-notice__title { display: block; margin-bottom: 4px; color: var(--public-text); font-size: .78rem; font-weight: 800; }
body.public-shell .order-notice ul { margin: 0; padding-left: 18px; }
body.public-shell .tab-pane .order-notice li { font-size: .75rem; line-height: 1.55; }
body.public-shell .order-verify { margin: 0 0 12px; }
body.public-shell .jbc-turnstile { min-height: 65px; }
body.public-shell .tab-pane p.order-verify__error { margin: 6px 0 0; color: #d64545; font-size: .72rem; }
body.public-shell .auth-card-flush .btn.order-submit { min-height: 50px; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; }
body.public-shell .auth-card-flush .btn.order-submit:disabled { opacity: .75; cursor: wait; }
body.public-shell .order-back { margin-top: 14px; font-size: .8rem; font-weight: 700; text-align: center; }

/* Lookup rows (license search, receipt check): input and button side by side */
body.public-shell .lookup-field { max-width: 560px; }
body.public-shell .lookup-row { display: flex; align-items: stretch; gap: 10px; }
body.public-shell .lookup-row .form-control { flex: 1 1 auto; width: auto; min-width: 0; }
body.public-shell .auth-card-flush .btn.lookup-row__btn { flex: 0 0 auto; min-height: 48px; padding: 0 22px; font-size: .8rem; letter-spacing: .04em; white-space: nowrap; }

body.public-shell .price-package-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; background: rgba(36, 87, 255, .10); color: var(--public-primary); font-size: .68rem; font-weight: 800; white-space: nowrap; }
body.public-shell .price-package-badge.is-exclusif { background: rgba(217, 119, 6, .12); color: #b45309; }

/* Public footer (template shared by order, FAQ, terms and refund pages) */
body.public-shell .public-footer { display: grid; gap: 10px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--public-border); }
body.public-shell .public-footer.public-footer-order { margin: 12px 28px 0; padding: 18px 0 24px; }
body.public-shell .public-footer__eyebrow { color: var(--public-muted); font-size: .66rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
body.public-shell .public-footer__links { display: flex; flex-wrap: wrap; gap: 8px; }
body.public-shell .public-footer__contact { display: flex; flex-wrap: wrap; gap: 4px 18px; color: var(--public-muted); font-size: .74rem; }

/* 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; }
[data-theme="dark"] body.public-shell .auth-card-flush label.order-option.is-selected { border-color: #3b5bdb; background: #3b5bdb; }
[data-theme="dark"] body.public-shell .order-pay__logo { border-color: transparent; }
[data-theme="dark"] body.public-shell .price-package-badge.is-exclusif { color: #fbbf24; }

@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 .public-footer.public-footer-order { margin: 8px 16px 0; padding-bottom: 20px; }
    body.public-shell .auth-card > .storefront-banner { border-radius: 14px 14px 0 0; }
    body.public-shell .lookup-row { flex-direction: column; }
    body.public-shell .auth-card-flush .btn.lookup-row__btn { width: 100%; }
    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; }
}