html { scroll-behavior: smooth; }
* { -webkit-tap-highlight-color: transparent; box-sizing: border-box; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } }

html, body { max-width: 100%; overflow-x: hidden; }
img, video, canvas, svg { max-width: 100%; height: auto; }
table { max-width: 100%; }
* { word-break: break-word; }

body { padding-bottom: 96px !important; }

.reveal {
  opacity: 0; transform: translate3d(0, 22px, 0);
  transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}
.reveal.in-view { opacity: 1; transform: translate3d(0,0,0); }
.card, .pkg-item, .pay-item { will-change: transform; transform: translateZ(0); }

.bm-bottom-nav{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  display: flex; justify-content: space-around; align-items: center;
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--glass-border);
  backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%);
}
.bm-nav-item{
  flex: 1; max-width: 110px; background: transparent; border: none; text-decoration: none;
  color: var(--sub); display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 10.5px; font-weight: 700; cursor: pointer; padding: 6px 0; border-radius: 12px; font-family: var(--font-body);
}
.bm-nav-item i { font-size: 17px; }
.bm-nav-item.active { color: var(--accent); background: rgba(var(--accent-rgb),.12); }

.bm-hamburger{
  width: 34px; height: 34px; border-radius: 12px; border: 1px solid var(--glass-border);
  background: var(--glass); color: var(--text); display: flex; align-items: center; justify-content: center;
  font-size: 14px; cursor: pointer;
}
.bm-hamburger:active { transform: scale(.9); }

.bm-toast{
  position: fixed; top: 20px; left: 50%; transform: translateX(-50%) translateY(-100px);
  background: rgba(20,24,40,0.88); backdrop-filter: blur(18px); border: 1px solid var(--glass-border);
  color: #fff; padding: 12px 20px; border-radius: 30px; box-shadow: 0 10px 30px rgba(0,0,0,.5);
  display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 700; z-index: 3500;
  opacity: 0; max-width: 90vw; transition: transform .4s cubic-bezier(.175,.885,.32,1.275), opacity .3s ease; pointer-events: none;
}
.bm-toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.bm-toast-icon { color: var(--accent); font-size: 16px; flex-shrink: 0; }

.bm-modal-overlay{
  position: fixed; inset: 0; background: rgba(4,6,14,0.72); backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center; z-index: 4000;
  opacity: 0; pointer-events: none; transition: opacity .3s ease; padding: 16px;
  touch-action: none;
}
.bm-modal-overlay.show { opacity: 1; pointer-events: auto; }
.bm-modal-card{
  border-radius: 22px; padding: 26px 20px; width: 100%; max-width: 360px; text-align: center;
  box-shadow: 0 25px 50px rgba(0,0,0,.6); transform: scale(.85);
  transition: transform .3s cubic-bezier(.175,.885,.32,1.275); max-height: 86vh; overflow-y: auto;
  touch-action: pan-y; overscroll-behavior: contain;
}
.bm-modal-overlay.show .bm-modal-card { transform: scale(1); }
.bm-modal-icon { font-size: 44px; color: var(--accent); margin-bottom: 12px; display: block; }
.bm-modal-title { font-family: var(--font-display); font-size: 16.5px; font-weight: 800; margin-bottom: 8px; }
.bm-modal-desc { font-size: 12.5px; color: var(--sub); margin-bottom: 16px; line-height: 1.55; white-space: pre-line; }
.bm-modal-input-wrap { margin-bottom: 14px; }
.bm-modal-input{
  width: 100%; padding: 12px; background: rgba(0,0,0,.2); border: 1px solid var(--glass-border);
  border-radius: 12px; color: var(--text); outline: none; font-size: 13.5px;
}
.bm-modal-btns { display: flex; gap: 10px; }
.bm-modal-btn{
  flex: 1; padding: 12px; border: none; border-radius: 12px; font-weight: 800; font-size: 13.5px; cursor: pointer;
}
.bm-modal-btn.primary { background: linear-gradient(120deg, var(--accent), var(--accent-2)); color: #0a0d18; }
.bm-modal-btn.secondary { background: rgba(255,255,255,.08); color: var(--text); border: 1px solid var(--glass-border); }

.bm-select-trigger{
  width:100%; min-width:0; padding:11px 14px; background:rgba(0,0,0,.2); border:1px solid var(--glass-border);
  border-radius:12px; color:var(--text); outline:none; margin-bottom:10px; font-size:13.5px; font-family:var(--font-body);
  cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:10px; text-align:left;
}
.bm-select-trigger span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bm-select-trigger i{ color:var(--sub); font-size:11px; flex-shrink:0; }
.bm-select-trigger:active{ border-color:var(--accent); }
.bm-select-picker-list{ display:flex; flex-direction:column; gap:6px; max-height:46vh; overflow-y:auto; margin:-4px 0 4px; }
.bm-select-picker-list::-webkit-scrollbar{ width:0; }
.bm-select-opt{
  display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px;
  background:rgba(0,0,0,.2); border:1px solid var(--glass-border); border-radius:12px; font-size:13.5px;
  font-weight:600; text-align:left; cursor:pointer;
}
.bm-select-opt i{ color:transparent; font-size:12px; }
.bm-select-opt.selected{ border-color:rgba(var(--accent-rgb),.5); color:var(--accent); background:rgba(var(--accent-rgb),.1); }
.bm-select-opt.selected i{ color:var(--accent); }

.bm-settings-row{
  display: flex; align-items: center; justify-content: space-between; padding: 11px 2px;
  font-size: 13px; font-weight: 700; border-bottom: 1px solid var(--glass-border);
}
.bm-settings-row i { color: var(--accent); margin-right: 6px; }
.bm-settings-link{
  display: flex; align-items: center; gap: 8px; padding: 11px 2px; font-size: 13px; font-weight: 700;
  color: var(--text); text-decoration: none; border-bottom: 1px solid var(--glass-border);
}
.bm-settings-link i { color: var(--accent); width: 16px; }

.bm-switch{
  width: 42px; height: 24px; border-radius: 20px; border: none; background: rgba(255,255,255,.12);
  position: relative; cursor: pointer; flex-shrink: 0; transition: background .25s ease;
}
.bm-switch-knob{
  position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; transition: transform .25s cubic-bezier(.4,0,.2,1); display: block;
}
.bm-switch.on { background: linear-gradient(120deg, var(--accent), var(--accent-2)); }
.bm-switch.on .bm-switch-knob { transform: translateX(18px); }

.bm-account-chip{
  display: flex; align-items: center; gap: 7px; background: var(--glass); border: 1px solid var(--glass-border);
  padding: 6px 12px 6px 6px; border-radius: 20px; font-size: 11.5px; font-weight: 800; color: var(--text);
  text-decoration: none; cursor: pointer;
}
.bm-account-chip i.avatar-fallback{
  width: 22px; height: 22px; border-radius: 50%; background: rgba(var(--accent-rgb),.18); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-size: 11px;
}

/* Store closed / maintenance status card.
   An in-page component (not an overlay): it sits at the top of the page content,
   just under the header, and stands in for the top-up flow while orders can't be taken, so the header and
   bottom navigation stay visible and usable. Background, border, radius and shadow
   come from the site's own `.card.glass`; everything here uses theme variables only,
   so it follows the Admin Panel theme in dark and light mode. */
.bm-store-closed-wrap{ display: none; max-width: 600px; margin: 16px auto 0; padding: 0 16px; width: 100%; }
.bm-store-closed-wrap.show{ display: block; animation: bmStatusIn .35s ease both; }
@keyframes bmStatusIn{ from{ opacity: 0; transform: translateY(8px); } to{ opacity: 1; transform: none; } }
.bm-store-closed-wrap .bm-store-closed-card{ text-align: center; padding: 28px 20px 24px; margin-bottom: 0; }
.bm-store-closed-icon{
  width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 16px; font-size: 22px;
  display: flex; align-items: center; justify-content: center;
  background: var(--glass); color: var(--danger);
  background: color-mix(in srgb, var(--danger) 15%, transparent);
}
.bm-store-closed-wrap .bm-store-closed-icon.maintenance{
  background: rgba(var(--accent-rgb), .15); color: var(--accent);
}
.bm-store-closed-card h2{
  font-family: var(--font-display); font-size: 20px; font-weight: 800; line-height: 1.25;
  margin: 0 0 8px; color: var(--text); text-wrap: balance;
}
.bm-store-closed-card p{ font-size: 13.5px; line-height: 1.6; color: var(--sub); margin: 0; text-wrap: balance; }
.bm-store-closed-hours{ /* display is toggled inline by applyStoreLock */
  margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  font-size: 12.5px; font-weight: 800; color: var(--accent); text-align: left;
  background: rgba(var(--accent-rgb), .10); border: 1px solid rgba(var(--accent-rgb), .30);
  padding: 8px 16px; border-radius: 20px;
}
/* While the store can't take orders, the status card replaces the top-up flow. */
body.bm-store-locked #stepper,
body.bm-store-locked #orderForm,
body.bm-store-locked #summaryBar{ display: none; }
@media (prefers-reduced-motion: reduce){
  .bm-store-closed-wrap.show{ animation: none; }
}
body.bm-store-locked .pkg-item, body.bm-store-locked #payGrid, body.bm-store-locked #btnBuy,
body.bm-store-locked .file-upload-box, body.bm-store-locked .btn-verify {
  pointer-events: none !important; filter: grayscale(.5) opacity(.5);
}

.pkg-group { margin-bottom: 18px; }
.pkg-group:last-child { margin-bottom: 0; }
.pkg-group-title{
  font-family: var(--font-display); font-size: 12.5px; font-weight: 800; letter-spacing: .4px;
  color: var(--accent); text-transform: uppercase; margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
}
.pkg-group-title::after{ content:''; flex:1; height:1px; background: var(--glass-border); }
.pkg-icon-wrap{ position:relative; width:44px; height:44px; margin:0 auto 8px; }
.pkg-item img.pkg-icon{ width: 44px; height: 44px; object-fit: contain; margin:0; display: block; border-radius: 10px; }

.pkg-icon-shimmer{
  position:absolute; inset:0; pointer-events:none;
  mask-repeat:no-repeat; mask-position:center; mask-size:contain;
  -webkit-mask-repeat:no-repeat; -webkit-mask-position:center; -webkit-mask-size:contain;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.95) 48%, rgba(255,255,255,.95) 52%, transparent 70%);
  background-size:260% 260%;
  mix-blend-mode:overlay;
  animation: diamondShimmer 2.6s ease-in-out infinite;
}
@keyframes diamondShimmer{
  0%{ background-position: -60% -60%; }
  100%{ background-position: 160% 160%; }
}
@media (prefers-reduced-motion: reduce){ .pkg-icon-shimmer{ animation:none; } }

.bm-receipt{
  border-radius: 20px; padding: 22px 20px; position: relative; overflow: hidden;
  background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border: 1px solid var(--glass-border);
}
.bm-receipt-head{ text-align: center; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px dashed var(--glass-border); }
.bm-receipt-head img{ width: 34px; height: 34px; border-radius: 10px; margin-bottom: 8px; }
.bm-receipt-head .shop{ font-family: var(--font-display); font-weight: 800; font-size: 15px; }
.bm-receipt-head .code{ font-size: 11.5px; color: var(--sub); margin-top: 4px; }
.bm-receipt-row{ display: flex; justify-content: space-between; font-size: 12.5px; padding: 6px 0; }
.bm-receipt-row span:first-child{ color: var(--sub); }
.bm-receipt-row span:last-child{ font-weight: 700; text-align: right; }
.bm-receipt-status{
  margin: 14px 0; text-align: center; padding: 10px; border-radius: 12px; font-weight: 800; font-size: 13px; letter-spacing: .3px;
}
.bm-receipt-foot{ margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--glass-border); text-align: center; font-size: 10.5px; color: var(--sub); }
.btn-download-receipt{
  width: 100%; margin-top: 12px; padding: 12px; border: none; border-radius: 12px; font-weight: 800; font-size: 13px;
  cursor: pointer; background: rgba(var(--accent-rgb),.14); color: var(--accent); border: 1px solid rgba(var(--accent-rgb),.4);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}

.auth-wrap{ min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.auth-card{ width: 100%; max-width: 380px; border-radius: 26px; padding: 30px 24px; box-shadow: 0 30px 70px rgba(0,0,0,.5); }
.auth-tabs{ display: flex; gap: 6px; background: rgba(0,0,0,.2); border-radius: 14px; padding: 4px; margin-bottom: 20px; }
.auth-tab{ flex: 1; padding: 9px; text-align: center; border-radius: 10px; font-size: 12.5px; font-weight: 800; cursor: pointer; color: var(--sub); }
.auth-tab.active{ background: linear-gradient(120deg,var(--accent),var(--accent-2)); color: #0a0d18; }
.auth-divider{ display: flex; align-items: center; gap: 10px; margin: 16px 0; color: var(--sub); font-size: 11px; font-weight: 700; }
.auth-divider::before, .auth-divider::after{ content:''; flex:1; height:1px; background: var(--glass-border); }
#googleBtnHost{ display: flex; justify-content: center; }
.auth-error{ color: var(--danger); font-size: 12px; font-weight: 700; margin-top: 8px; display: none; text-align: center; }


.bm-time-field{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:13px; background:rgba(0,0,0,.2); border:1px solid var(--glass-border); border-radius:12px;
  cursor:pointer; font-size:13.5px; font-weight:700; color:var(--text);
}
.bm-time-field i{ color:var(--accent); }
.bm-time-picker-body{ display:flex; align-items:center; justify-content:center; gap:14px; padding:10px 0 4px; }
.bm-time-col{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.bm-time-col-label{ font-size:10px; color:var(--sub); font-weight:800; text-transform:uppercase; letter-spacing:.4px; }
.bm-time-scroll{
  height:160px; width:64px; overflow-y:auto; scroll-snap-type:y mandatory; border-radius:12px;
  background:rgba(0,0,0,.18); border:1px solid var(--glass-border);
  touch-action: pan-y; overscroll-behavior: contain;
}
.bm-time-scroll::-webkit-scrollbar{ width:0; }
.bm-time-opt{
  scroll-snap-align:center; height:40px; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800; font-size:16px; color:var(--sub); cursor:pointer;
}
.bm-time-opt.selected{ color:var(--accent); }
.bm-time-sep{ font-family:var(--font-display); font-size:22px; font-weight:800; color:var(--accent); }

.bm-view-toggle{ display:flex; gap:6px; background:rgba(0,0,0,.18); border:1px solid var(--glass-border); border-radius:12px; padding:4px; }
.bm-view-toggle button{
  flex:1; border:none; background:transparent; color:var(--sub); padding:7px 10px; border-radius:9px;
  font-size:11.5px; font-weight:800; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px;
}
.bm-view-toggle button.active{ background:linear-gradient(120deg,var(--accent),var(--accent-2)); color:#0a0d18; }

.bm-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:14px; border:1px solid var(--glass-border); }
.bm-table{ width:100%; border-collapse:collapse; font-size:12.5px; min-width:640px; }
.bm-table th{ text-align:left; padding:10px 12px; font-size:10.5px; text-transform:uppercase; letter-spacing:.3px; color:var(--sub); background:rgba(0,0,0,.18); white-space:nowrap; }
.bm-table td{ padding:10px 12px; border-top:1px solid var(--glass-border); white-space:nowrap; }
.bm-table tr:hover td{ background:rgba(255,255,255,.03); }

.route-row, .key-row{
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  background:rgba(0,0,0,.18); border:1px solid var(--glass-border); padding:10px 12px; border-radius:12px; margin-bottom:8px;
}
.route-row .meta, .key-row .meta{ min-width:0; overflow:hidden; }
.route-row .meta .title, .key-row .meta .title{ font-weight:800; font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.route-row .meta .sub, .key-row .meta .sub{ font-size:10.5px; color:var(--sub); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.route-purpose-tag{ font-size:9px; font-weight:900; padding:2px 7px; border-radius:6px; text-transform:uppercase; flex-shrink:0; }
.route-purpose-tag.orders{ background:rgba(51,209,122,.15); color:var(--success); }
.route-purpose-tag.users{ background:rgba(91,141,239,.15); color:var(--accent); }
.row-actions{ display:flex; gap:6px; flex-shrink:0; }

.pw-strength-bar{ height:5px; border-radius:3px; background:rgba(255,255,255,.1); margin:-4px 0 10px; overflow:hidden; }
.pw-strength-bar span{ display:block; height:100%; width:0%; border-radius:3px; transition:width .25s ease, background .25s ease; }
.pw-rules{ font-size:10.5px; color:var(--sub); margin:-4px 0 10px; line-height:1.6; }
.pw-rules span{ margin-right:8px; }
.pw-rules span.ok{ color:var(--success); }

.bm-skel-block{
  display:inline-block; width:74px; height:14px; border-radius:5px;
  background:linear-gradient(90deg, rgba(255,255,255,.06) 25%, rgba(255,255,255,.16) 50%, rgba(255,255,255,.06) 75%);
  background-size:200% 100%; animation:bmSkelShimmer 1.3s ease-in-out infinite;
}
.bm-skel-logo{
  background:linear-gradient(90deg, rgba(255,255,255,.06) 25%, rgba(255,255,255,.16) 50%, rgba(255,255,255,.06) 75%);
  background-size:200% 100%; animation:bmSkelShimmer 1.3s ease-in-out infinite;
  border-radius:8px;
}
.brand-text, .logo-img{ transition: opacity .25s ease; }
@keyframes bmSkelShimmer{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }

.bm-loading-overlay{
  position: fixed; inset: 0; z-index: 5000; display: flex; align-items: center; justify-content: center;
  background: rgba(8,10,20,.32);
  backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.bm-loading-overlay.show{ opacity: 1; pointer-events: auto; }
.bm-loading-card{
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); border-radius: 20px;
  padding: 26px 36px; display: flex; flex-direction: column; align-items: center; gap: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,.45);
}
.bm-ios-spinner{ width: 34px; height: 34px; position: relative; }
.bm-ios-spinner div{
  position: absolute; left: 46%; top: 6%; width: 8%; height: 26%; border-radius: 4px;
  background: #fff; opacity: 0; animation: bmIosSpin 1s linear infinite;
  transform-origin: 50% 220%;
}
@keyframes bmIosSpin{ 0%{ opacity: 1; } 100%{ opacity: .15; } }
.bm-loading-text{ color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: .2px; }
@media (prefers-reduced-motion: reduce){ .bm-ios-spinner div{ animation-duration: 2s; } }