/* =========================================================
   Magic Bridge — Front-end styles
   Headless catalog/products UI for Digital theme
   ========================================================= */

.mb-breadcrumb{max-width:1320px;margin:18px auto 0;padding:14px 20px 16px;border-bottom:1px solid #ececec;font-size:13px;color:#666;display:flex;align-items:center;flex-wrap:wrap;gap:6px;direction:rtl;justify-content:flex-start;text-align:right;}
.mb-breadcrumb a{color:#666;text-decoration:none;transition:color .15s;}
.mb-breadcrumb a:hover{color:#ea593c;}
.mb-breadcrumb .mb-crumb-sep{color:#bbb;margin:0 2px;}
.mb-breadcrumb .mb-crumb-current{color:#1a1a1a;font-weight:600;}

/* =========================================================
   Hero / Premium banner — per MB page
   ========================================================= */
.mb-main{padding:0 0 60px !important;}
.mb-hero{position:relative;overflow:hidden;color:#fff;direction:rtl;isolation:isolate;margin:0 0 22px;
  --hero-from:#1f2138;--hero-to:#3a3f63;--hero-accent:#f5b14b;--hero-text:#fff;--hero-badge-bg:rgba(255,255,255,.16);--hero-badge-bd:rgba(255,255,255,.28);
  background:linear-gradient(135deg,var(--hero-from) 0%,var(--hero-to) 100%);}
.mb-hero--gold    {--hero-from:#1a1410;--hero-to:#3b2a16;--hero-accent:#f5b14b;}
.mb-hero--sapphire{--hero-from:#0f1d3a;--hero-to:#23437a;--hero-accent:#4cb5ff;}
.mb-hero--royal   {--hero-from:#1b1340;--hero-to:#4b2a8a;--hero-accent:#c8a8ff;}
.mb-hero--aurora  {--hero-from:#0c2a30;--hero-to:#1e6e63;--hero-accent:#5be0c8;}
.mb-hero--sunset  {--hero-from:#3a1418;--hero-to:#a23a2a;--hero-accent:#ffb37a;}
.mb-hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;}
.mb-hero-orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;}
.mb-hero-orb-1{width:340px;height:340px;background:var(--hero-accent);top:-100px;left:-80px;}
.mb-hero-orb-2{width:280px;height:280px;background:rgba(255,255,255,.18);bottom:-120px;right:10%;}
.mb-hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:42px 42px;mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);}
.mb-hero-inner{position:relative;display:flex;align-items:center;justify-content:space-between;gap:32px;padding:54px 20px 60px;max-width:1320px;}
.mb-hero-text{flex:1 1 auto;max-width:640px;}
.mb-hero-badge{display:inline-flex;align-items:center;gap:6px;background:var(--hero-badge-bg);border:1px solid var(--hero-badge-bd);color:#fff;font-size:12px;font-weight:600;letter-spacing:.3px;padding:6px 14px;border-radius:999px;backdrop-filter:blur(8px);}
.mb-hero-title{margin:14px 0 10px;font-size:clamp(26px,3.4vw,40px);line-height:1.2;font-weight:800;color:#fff;letter-spacing:-.3px;text-shadow:0 2px 10px rgba(0,0,0,.18);}
.mb-hero-sub{margin:0;font-size:clamp(14px,1.4vw,16px);line-height:1.7;color:rgba(255,255,255,.85);max-width:560px;}
.mb-hero-cta{display:inline-flex;align-items:center;gap:8px;margin-top:22px;padding:12px 22px;border-radius:12px;background:var(--hero-accent);color:#1a1410;font-weight:700;font-size:14px;text-decoration:none;box-shadow:0 10px 24px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.4);transition:transform .15s ease,box-shadow .15s ease;}
.mb-hero-cta:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.5);color:#1a1410;}
.mb-hero-cta svg{width:16px;height:16px;transform:scaleX(-1);}
.mb-hero-art{position:relative;flex:0 0 auto;width:160px;height:160px;display:flex;align-items:center;justify-content:center;}
.mb-hero-art-card{width:128px;height:128px;border-radius:28px;background:linear-gradient(160deg,rgba(255,255,255,.18),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(14px);box-shadow:0 18px 44px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;color:var(--hero-accent);transform:rotate(-6deg);transition:transform .4s ease;}
.mb-hero-art-card:hover{transform:rotate(0);}
.mb-hero-art-card svg{width:64px;height:64px;}
.mb-hero-art-dot{position:absolute;border-radius:50%;background:var(--hero-accent);opacity:.85;}
.mb-hero-art-dot-1{width:14px;height:14px;top:8px;right:6px;}
.mb-hero-art-dot-2{width:8px;height:8px;bottom:18px;left:0;background:#fff;}
.mb-hero-art-dot-3{width:10px;height:10px;bottom:6px;right:30px;opacity:.5;}
@media (max-width:720px){
  .mb-hero-inner{flex-direction:column;align-items:flex-start;padding:38px 18px 44px;gap:18px;}
  .mb-hero-art{width:110px;height:110px;align-self:flex-end;}
  .mb-hero-art-card{width:96px;height:96px;border-radius:22px;}
  .mb-hero-art-card svg{width:48px;height:48px;}
}

/* =========================================================
   Top progress bar (route navigation feedback)
   ========================================================= */
.mb-topbar{position:fixed;top:0;inset-inline:0;height:3px;z-index:9999;background:transparent;pointer-events:none;overflow:hidden;}
.mb-topbar .mb-topbar-fill{display:block;height:100%;width:0;background:linear-gradient(90deg,#ea593c,#f5b14b,#ea593c);background-size:200% 100%;box-shadow:0 0 12px rgba(234,89,60,.6);transform-origin:right center;transition:width .35s ease;}
.mb-topbar.is-active .mb-topbar-fill{width:85%;animation:mbBarShift 1.2s linear infinite;transition:width 12s cubic-bezier(.2,.8,.2,.99);}
.mb-topbar.is-done .mb-topbar-fill{width:100%;transition:width .25s ease;opacity:0;transition:opacity .35s ease .15s,width .25s ease;}
@keyframes mbBarShift{0%{background-position:0% 0;}100%{background-position:200% 0;}}

/* =========================================================
   Bottom mobile navigation (app-like)
   ========================================================= */
.mb-bottombar{display:none;}
@media (max-width:820px){
  .mb-bottombar{display:flex;position:fixed;bottom:0;inset-inline:0;z-index:998;background:#fff;border-top:1px solid #ececec;box-shadow:0 -6px 22px rgba(0,0,0,.06);direction:rtl;padding:6px 4px max(6px,env(safe-area-inset-bottom));transform:translate3d(0,0,0);transition:transform .35s cubic-bezier(.22,.61,.36,1),opacity .25s ease;will-change:transform,opacity;backface-visibility:hidden;-webkit-backface-visibility:hidden;}
  .mb-bottombar.is-hidden{transform:translate3d(0,120%,0);opacity:0;pointer-events:none;}
  .mb-sticky-cta{transform:translate3d(0,0,0);transition:transform .35s cubic-bezier(.22,.61,.36,1),opacity .25s ease;will-change:transform,opacity;backface-visibility:hidden;-webkit-backface-visibility:hidden;}
  .mb-bottombar.is-hidden ~ .mb-sticky-cta,
  body.mb-bar-hidden .mb-sticky-cta{transform:translate3d(0,calc(100% + 20px),0);opacity:0;}
  .mb-bottombar-item{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px 4px;color:#6b7280;text-decoration:none;font-size:11px;font-weight:600;line-height:1;border-radius:10px;transition:color .15s,background .15s;}
  .mb-bottombar-item:hover{color:#ea593c;background:rgba(234,89,60,.06);}
  .mb-bottombar-item.is-active{color:#ea593c;}
  .mb-bottombar-item.is-active .mb-bottombar-icon{background:linear-gradient(135deg,#ea593c,#f5b14b);color:#fff;box-shadow:0 6px 14px rgba(234,89,60,.35);}
  .mb-bottombar-icon{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;background:transparent;color:inherit;transition:all .2s;}
  .mb-bottombar-icon svg{width:22px;height:22px;}
  .mb-bottombar-label{display:block;}
  /* Avoid overlap with content */
  body.has-mb-bottombar,
  .mb-main{padding-bottom:74px !important;}
}

/* =========================================================
   Mobile sticky CTA bar on order form
   ========================================================= */
.mb-sticky-cta{display:none;}
@media (max-width:820px){
  .mb-sticky-cta{display:flex;position:fixed;bottom:64px;inset-inline:0;z-index:997;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px max(10px,env(safe-area-inset-bottom));background:#fff;border-top:1px solid #ececec;box-shadow:0 -10px 24px rgba(0,0,0,.08);direction:rtl;}
  .mb-sticky-cta-info{display:flex;flex-direction:column;line-height:1.2;}
  .mb-sticky-cta-label{font-size:11px;color:#6b7280;font-weight:600;}
  .mb-sticky-cta-price{font-size:18px;color:#1a1a1a;font-weight:800;}
  .mb-sticky-cta-btn{display:inline-flex;align-items:center;gap:6px;padding:12px 20px;font-size:14px;border-radius:12px;box-shadow:0 8px 20px rgba(234,89,60,.35);}
  .mb-sticky-cta-btn svg{transform:scaleX(-1);}
  /* When keyboard is open, hide the sticky bar so it doesn't overlap inputs */
  body.mb-kbd-open .mb-sticky-cta{transform:translateY(120%);}
  .mb-sticky-cta{transition:transform .25s ease;}
  /* Order form needs extra bottom padding so its own button isn't hidden */
  .mb-order{padding-bottom:110px;}
}

/* =========================================================
   Mobile footer slim-down for MB pages
   Theme footer ships 4 widget columns + prefooter sidebar that
   inflate every short page on the phone. On mobile MB views we
   keep only the copyright/payments bar so screens feel app-like.
   ========================================================= */
@media (max-width:820px){
  body.mb-active-page .widget-sections-footer,
  body.mb-active-page .nx-footer-inner,
  body.mb-active-page .footer-instagram,
  body.mb-active-page .footer-widgets,
  body.mb-active-page .site-footer .widget-area{display:none !important;}
  body.mb-active-page .nx-footer{padding-top:0 !important;margin-top:24px;}
  body.mb-active-page .nx-footer-bottom{padding:14px 16px;}
  body.mb-active-page .nx-footer-bottom-inner{flex-direction:column;gap:6px;font-size:12px;text-align:center;}
  /* Guarantee every MB page is scrollable on mobile so the bottom-nav
     auto-hide logic always has a scroll surface to react to. Without
     this, short pages have scrollHeight == innerHeight and the bar
     becomes stuck because no scroll events ever fire. */
  body.mb-active-page{min-height:calc(100vh + 120px);}
  body.mb-active-page .mb-bottombar{touch-action:pan-y;}
}

.mb-section {
  max-width: 1320px;
  margin: 40px auto;
  padding: 0 20px;
  direction: rtl;
  font-family: 'Cairo', 'Tajawal', system-ui, sans-serif;
}

/* ── Section headers ─────────────────────────────────────── */
.mb-section-head {
  text-align: center;
  margin-bottom: 40px;
}
.mb-section-title {
  font-size: 32px;
  font-weight: 800;
  color: #1a1426;
  margin: 0 0 8px;
  position: relative;
  display: inline-block;
  padding-bottom: 14px;
}
.mb-section-title::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 70px; height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, #ea593c 0%, #f59c4a 100%);
}
.mb-section-sub {
  color: #6e6884;
  font-size: 15px;
  margin: 12px 0 0;
}

/* ── Catalogs grid ──────────────────────────────────────── */
.mb-grid {
  display: grid;
  gap: 24px;
}
.mb-grid--catalogs {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.mb-grid--products {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* ── Catalog card ───────────────────────────────────────── */
.mb-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #ece8f1;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  position: relative;
}
.mb-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px -10px rgba(26, 20, 38, .22);
  border-color: #ea593c;
}
.mb-card.is-featured {
  border-color: #ea593c;
  box-shadow: 0 6px 18px -8px rgba(234, 89, 60, .35);
}
.mb-card-media {
  position: relative;
  aspect-ratio: 1/1;
  background: #fff;
  overflow: hidden;
}
.mb-card-media img {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  transition: transform .35s ease;
}
.mb-card:hover .mb-card-media img { transform: scale(1.05); }
.mb-card-media-fallback {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: #c8c0d4;
}
.mb-badge {
  position: absolute;
  top: 10px; inset-inline-start: 10px;
  background: linear-gradient(135deg, #ea593c 0%, #f59c4a 100%);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  letter-spacing: .3px;
}
.mb-card-body {
  padding: 16px 18px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mb-card-title {
  font-size: 16px;
  font-weight: 700;
  color: #1a1426;
  margin: 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mb-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  font-size: 13px;
  color: #6e6884;
  margin-top: auto;
}
.mb-meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.mb-meta--price strong {
  color: #ea593c;
  font-size: 15px;
  font-weight: 800;
  margin-inline-start: 2px;
}

/* ── Single catalog hero ────────────────────────────────── */
.mb-cat-hero {
  text-align: center;
  background: linear-gradient(135deg, #fff 0%, #faf8fd 100%);
  border: 1px solid #ece8f1;
  border-radius: 20px;
  padding: 32px 24px;
  margin-bottom: 32px;
  position: relative;
}
.mb-back {
  position: absolute;
  top: 16px; inset-inline-start: 16px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fff;
  color: #1a1426;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #ece8f1;
  text-decoration: none;
  transition: all .2s;
}
.mb-back:hover {
  background: #ea593c;
  color: #fff;
  border-color: #ea593c;
}
.mb-back svg { transform: scaleX(-1); }  /* RTL flip */

.mb-cat-hero-image {
  width: 100px; height: 100px;
  margin: 0 auto 16px;
  background: #fff;
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 4px 18px -6px rgba(26, 20, 38, .18);
}
.mb-cat-hero-image img {
  width: 100%; height: 100%; object-fit: contain;
}
.mb-cat-hero-title {
  font-size: 28px;
  font-weight: 800;
  color: #1a1426;
  margin: 0 0 6px;
}
.mb-cat-hero-sub {
  color: #6e6884;
  font-size: 14px;
  margin: 0;
}

/* ── Product card ───────────────────────────────────────── */
.mb-prod {
  background: #fff;
  border: 1px solid #ece8f1;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.mb-prod:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px -10px rgba(26, 20, 38, .2);
  border-color: #ea593c;
}
.mb-prod.is-inactive { opacity: .6; }
.mb-prod-media {
  position: relative;
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, #f8f6fb 0%, #efeaf6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mb-prod-media img { width: 100%; height: 100%; object-fit: contain; padding: 14px; }
.mb-prod-media-fallback { color: #c8c0d4; }
.mb-prod-type {
  position: absolute;
  top: 8px; inset-inline-end: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  padding: 3px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  background: #1a1426; color: #fff;
}
.mb-prod-type--imei   { background: #2d7ef7; }
.mb-prod-type--server { background: #ea593c; }
.mb-prod-type--smm    { background: #19c37d; }
.mb-prod-type--remote { background: #8b5cf6; }

.mb-prod-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.mb-prod-title {
  font-size: 15px;
  font-weight: 700;
  color: #1a1426;
  margin: 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mb-prod-title-en {
  font-size: 12px;
  color: #968ea9;
  margin: 0;
  font-weight: 500;
  direction: ltr;
  text-align: start;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mb-prod-meta {
  font-size: 12px;
  color: #6e6884;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 4px 0 0;
}
.mb-prod-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #ece8f1;
}
.mb-prod-price {
  font-size: 18px;
  font-weight: 800;
  color: #ea593c;
}

/* ── Buttons ────────────────────────────────────────────── */
.mb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 8px;
  text-decoration: none;
  transition: all .2s;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
.mb-btn--primary {
  background: linear-gradient(135deg, #ea593c 0%, #f59c4a 100%);
  color: #fff;
}
.mb-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -4px rgba(234, 89, 60, .5);
  color: #fff;
}
.mb-btn--disabled {
  background: #ece8f1;
  color: #968ea9;
  cursor: not-allowed;
}

/* ── Empty / error ─────────────────────────────────────── */
.mb-empty, .mb-error {
  text-align: center;
  padding: 60px 20px;
  color: #6e6884;
  background: #faf8fd;
  border: 1px dashed #ece8f1;
  border-radius: 16px;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .mb-section { margin: 24px auto; }
  .mb-section-title { font-size: 24px; }
  .mb-grid--catalogs { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .mb-grid--products { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .mb-card-body { padding: 12px 14px 14px; }
  .mb-card-title { font-size: 14px; }
  .mb-cat-hero { padding: 24px 16px; }
  .mb-cat-hero-title { font-size: 22px; }
  .mb-back { position: static; margin-bottom: 12px; }
}
@media (max-width: 420px) {
  .mb-grid--catalogs, .mb-grid--products { grid-template-columns: 1fr 1fr; gap: 10px; }
  .mb-card-meta { font-size: 11px; }
  .mb-prod-price { font-size: 16px; }
  .mb-btn { padding: 6px 12px; font-size: 12px; }
}


/* ========== Phase 2: Auth / Wallet / Orders ========== */
.mb-auth{display:flex;justify-content:center;}
.mb-auth-card{background:#fff;border:1px solid #eee;border-radius:14px;padding:32px;max-width:440px;width:100%;box-shadow:0 8px 24px rgba(0,0,0,.04);}
.mb-auth-card h2{margin:0 0 20px;color:#222;font-size:24px;}
.mb-auth-alt{margin-top:18px;color:#666;font-size:14px;text-align:center;}
.mb-auth-alt a{color:#ea593c;font-weight:700;text-decoration:none;margin-inline-start:6px;}
.mb-form{display:flex;flex-direction:column;gap:14px;}
.mb-field{display:flex;flex-direction:column;gap:6px;font-size:14px;color:#444;}
.mb-field span{font-weight:600;}
.mb-field input,.mb-field select,.mb-field textarea{padding:11px 14px;border:1.5px solid #e5e5e5;border-radius:10px;font:inherit;background:#fafafa;transition:border-color .15s,background .15s;}
.mb-field input:focus,.mb-field select:focus,.mb-field textarea:focus{outline:none;border-color:#ea593c;background:#fff;}
.mb-btn{display:inline-block;padding:11px 22px;border:none;border-radius:10px;font:inherit;font-weight:700;cursor:pointer;text-decoration:none;text-align:center;transition:transform .12s,box-shadow .12s,opacity .12s;}
.mb-btn--primary{background:linear-gradient(135deg,#ea593c,#f59c4a);color:#fff;box-shadow:0 4px 14px rgba(234,89,60,.3);}
.mb-btn--primary:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(234,89,60,.4);}
.mb-btn--primary:disabled{opacity:.5;cursor:not-allowed;transform:none;}
.mb-btn--ghost{background:transparent;border:1.5px solid #ea593c;color:#ea593c;}
.mb-form-status{font-size:14px;padding:8px 0;min-height:22px;}
.mb-status--info{color:#666;}
.mb-status--err{color:#c62828;}
.mb-status--ok{color:#2e7d32;}
.mb-status--warn{background:#fff7e6;border:1px solid #ffd591;color:#ad6800;padding:10px 14px;border-radius:8px;display:flex;justify-content:space-between;align-items:center;gap:12px;}
.mb-status--warn a{color:#ea593c;font-weight:700;text-decoration:underline;}

.mb-wallet{display:grid;grid-template-columns:1fr 1.4fr;gap:24px;}
@media(max-width:768px){.mb-wallet{grid-template-columns:1fr;}}
.mb-wallet-card{background:linear-gradient(135deg,#ea593c,#f59c4a);color:#fff;padding:32px;border-radius:18px;box-shadow:0 10px 30px rgba(234,89,60,.25);}
.mb-wallet-greet{font-size:14px;opacity:.9;}
.mb-wallet-balance-label{margin-top:18px;font-size:13px;opacity:.85;}
.mb-wallet-balance{font-size:44px;font-weight:800;letter-spacing:-1px;margin:8px 0 22px;}
.mb-wallet-card .mb-btn--ghost{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.6);color:#fff;}
.mb-wallet-recharge{background:#fff;border:1px solid #eee;border-radius:18px;padding:28px;}
.mb-wallet-recharge h3{margin:0 0 18px;color:#222;}
.mb-pay-methods{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:14px 0;}
.mb-pay-btn{padding:14px;border:1.5px solid #e5e5e5;background:#fafafa;border-radius:10px;font-weight:700;font:inherit;cursor:pointer;transition:all .15s;}
.mb-pay-btn:hover{border-color:#ea593c;background:#fff;color:#ea593c;}
.mb-pay-btn--paypal:hover{border-color:#0070ba;color:#0070ba;}
.mb-pay-btn--binance:hover{border-color:#f0b90b;color:#a17a00;}
.mb-pay-btn--usdt:hover{border-color:#26a17b;color:#26a17b;}
.mb-pay-btn--bank:hover{border-color:#1565c0;color:#1565c0;}
.mb-pay-result{background:#f8f9fa;border-radius:10px;padding:16px;margin-top:14px;font-size:14px;}
.mb-notice{border-radius:10px;padding:14px 18px;margin:0 0 18px;font-weight:600;}
.mb-notice--ok{background:#e8f5e9;border:1px solid #66bb6a;color:#1b5e20;}
.mb-notice--err{background:#ffebee;border:1px solid #ef5350;color:#b71c1c;}

/* ── Recharge form — redesigned ───────────────────────────────────── */
.mb-recharge-head{margin-bottom:22px;}
.mb-recharge-head h3{margin:0 0 6px;font-size:22px;color:#1a1a1a;}
.mb-recharge-sub{margin:0;color:#666;font-size:14px;}
.mb-recharge-form{display:flex;flex-direction:column;gap:24px;}
.mb-step{display:flex;flex-direction:column;gap:12px;}
.mb-step-label{display:flex;align-items:center;gap:10px;font-weight:700;color:#222;font-size:15px;}
.mb-step-num{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:#ea593c;color:#fff;font-size:13px;font-weight:700;}
.mb-amount-input{position:relative;display:flex;align-items:center;border:2px solid #e8e8e8;border-radius:12px;background:#fafafa;transition:border-color .15s,background .15s;}
.mb-amount-input:focus-within{border-color:#ea593c;background:#fff;}
.mb-amount-input .mb-amount-sign{position:absolute;left:18px;font-size:22px;font-weight:700;color:#666;pointer-events:none;}
.mb-amount-input .mb-amount-currency{position:absolute;right:18px;font-size:13px;font-weight:600;color:#888;letter-spacing:.5px;pointer-events:none;}
.mb-amount-input input{flex:1;border:0;background:transparent;padding:18px 60px 18px 38px;font-size:24px;font-weight:700;color:#1a1a1a;outline:0;font-family:inherit;width:100%;text-align:center;}
.mb-amount-input input::placeholder{color:#bbb;font-weight:500;}
/* RTL */
html[dir="rtl"] .mb-amount-input .mb-amount-sign{left:auto;right:18px;}
html[dir="rtl"] .mb-amount-input .mb-amount-currency{right:auto;left:18px;}
html[dir="rtl"] .mb-amount-input input{padding:18px 38px 18px 60px;}

.mb-amount-chips{display:flex;flex-wrap:wrap;gap:8px;}
.mb-chip{flex:1;min-width:64px;padding:9px 12px;border:1.5px solid #e8e8e8;background:#fff;border-radius:8px;font-weight:600;font:inherit;font-size:14px;color:#555;cursor:pointer;transition:all .15s;}
.mb-chip:hover{border-color:#ea593c;color:#ea593c;}
.mb-chip.is-active{background:#ea593c;border-color:#ea593c;color:#fff;}

.mb-recharge-form .mb-pay-methods{grid-template-columns:repeat(2,1fr);gap:12px;margin:0;}
.mb-pay-card{position:relative;display:flex;align-items:center;gap:14px;padding:16px 18px;border:2px solid #e8e8e8;border-radius:12px;background:#fff;cursor:pointer;transition:all .15s;overflow:hidden;}
.mb-pay-card input[type="radio"]{position:absolute;opacity:0;pointer-events:none;}
.mb-pay-card:hover{border-color:#cfcfcf;}
.mb-pay-card.is-selected{border-color:#ea593c;background:#fff7f4;box-shadow:0 4px 14px -6px rgba(234,89,60,.35);}
.mb-pay-card-icon{flex:0 0 44px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;}
.mb-pay-card-body{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;}
.mb-pay-card-body strong{font-size:15px;color:#1a1a1a;line-height:1.2;}
.mb-pay-card-body small{font-size:12px;color:#888;line-height:1.3;}
.mb-pay-card-check{flex:0 0 22px;width:22px;height:22px;border-radius:50%;background:#ea593c;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.6);transition:all .2s;}
.mb-pay-card.is-selected .mb-pay-card-check{opacity:1;transform:scale(1);}

.mb-recharge-submit{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px;font-size:16px;font-weight:700;border-radius:12px;background:#ea593c;color:#fff;border:0;cursor:pointer;transition:all .15s;}
.mb-recharge-submit:hover{background:#d44a30;}
.mb-recharge-submit:disabled{opacity:.6;cursor:not-allowed;}
.mb-recharge-submit svg{transition:transform .2s;}
.mb-recharge-submit:hover svg{transform:translateX(3px);}
html[dir="rtl"] .mb-recharge-submit:hover svg{transform:translateX(-3px) scaleX(-1);}
html[dir="rtl"] .mb-recharge-submit svg{transform:scaleX(-1);}

.mb-recharge-foot{display:flex;align-items:flex-start;gap:8px;padding:12px 14px;background:#f6f7f9;border-radius:10px;color:#666;font-size:12px;line-height:1.5;}
.mb-recharge-foot svg{flex:0 0 14px;margin-top:2px;color:#888;}

/* USDT result panel */
.mb-pay-result--usdt{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:14px;}
.mb-pay-result-head{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px dashed #e5e7eb;}
.mb-pay-result-head strong{display:block;color:#1a1a1a;font-size:15px;}
.mb-pay-result-head small{display:block;color:#888;font-size:12px;margin-top:2px;}
.mb-pay-row{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.mb-pay-row--col{flex-direction:column;align-items:stretch;}
.mb-pay-row-label{font-size:13px;color:#666;font-weight:600;}
.mb-pay-row-value{font-weight:700;color:#1a1a1a;font-size:15px;}
.mb-pay-amount{color:#26a17b;font-size:18px;}
.mb-pay-amount em{font-style:normal;font-size:13px;color:#888;font-weight:600;margin-left:4px;}
.mb-addr-wrap{position:relative;display:flex;align-items:center;gap:0;background:#f6f7f9;border:1px solid #e5e7eb;border-radius:10px;padding:0;overflow:hidden;}
.mb-addr-wrap .mb-addr{flex:1;padding:12px 14px;font-family:Menlo,Consolas,monospace;font-size:13px;color:#1a1a1a;word-break:break-all;background:transparent;}
.mb-copy-btn{display:flex;align-items:center;gap:6px;padding:0 14px;align-self:stretch;border:0;border-left:1px solid #e5e7eb;background:#fff;color:#555;font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s;}
html[dir="rtl"] .mb-copy-btn{border-left:0;border-right:1px solid #e5e7eb;}
.mb-copy-btn:hover{background:#ea593c;color:#fff;}
.mb-copy-btn.is-copied{background:#26a17b;color:#fff;}
.mb-pay-qr{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px;background:#fafafa;border-radius:10px;}
.mb-pay-qr img{display:block;border-radius:6px;background:#fff;padding:6px;}
.mb-pay-qr small{color:#888;font-size:12px;}
.mb-pay-hint{display:flex;align-items:flex-start;gap:8px;padding:12px 14px;background:#fff8e1;border:1px solid #ffe082;border-radius:10px;color:#7c5e10;font-size:12px;line-height:1.6;}
.mb-pay-hint svg{flex:0 0 14px;margin-top:3px;}

@media (max-width:520px){
	.mb-wallet-recharge{padding:20px 16px;}
	.mb-recharge-form .mb-pay-methods{grid-template-columns:1fr;}
	.mb-amount-chips .mb-chip{min-width:56px;font-size:13px;padding:8px 6px;}
	.mb-amount-input input{font-size:20px;padding:16px 50px;}
}
.mb-addr{display:block;background:#fff;border:1px dashed #ccc;padding:10px;border-radius:6px;font-family:monospace;word-break:break-all;margin:8px 0;}
.mb-qr{display:block;margin:12px auto;max-width:180px;}

.mb-order-head{margin-bottom:18px;}
.mb-back{color:#666;text-decoration:none;font-weight:600;}
.mb-back:hover{color:#ea593c;}
.mb-order-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:32px;align-items:start;}
@media(max-width:768px){.mb-order-grid{grid-template-columns:1fr;}}
.mb-order-product{background:#fff;border:1px solid #eee;border-radius:16px;padding:24px;text-align:center;}
.mb-order-product img{width:100%;max-width:240px;border-radius:10px;margin-bottom:14px;}
.mb-order-product h2{margin:8px 0;font-size:20px;color:#222;}
.mb-order-time{color:#666;font-size:13px;margin:6px 0;}
.mb-order-price{font-size:30px;font-weight:800;color:#ea593c;margin-top:10px;}
.mb-order-form{background:#fff;border:1px solid #eee;border-radius:16px;padding:28px;}
.mb-balance-summary{background:#f8f9fa;border-radius:10px;padding:14px 16px;display:flex;justify-content:space-between;font-size:15px;margin:8px 0;}
.mb-balance-summary strong{color:#ea593c;}

.mb-orders-list h2{margin-bottom:18px;}
.mb-table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,.04);}
.mb-table th,.mb-table td{padding:14px 16px;text-align:start;border-bottom:1px solid #f0f0f0;font-size:14px;}
.mb-table th{background:#fafafa;font-weight:700;color:#444;}
.mb-table tr:last-child td{border-bottom:none;}
.mb-status{display:inline-block;padding:4px 10px;border-radius:12px;font-size:12px;font-weight:700;}
.mb-status--completed,.mb-status--success{background:#e8f5e9;color:#2e7d32;}
.mb-status--pending,.mb-status--processing{background:#fff7e6;color:#ad6800;}
.mb-status--failed,.mb-status--cancelled{background:#fde8e8;color:#c62828;}

/* ── Google Sign-In ─────────────────────────────────────── */
.mb-auth-divider{display:flex;align-items:center;text-align:center;color:#999;font-size:13px;margin:18px 0;}
.mb-auth-divider::before,.mb-auth-divider::after{content:"";flex:1;height:1px;background:#e5e5e5;}
.mb-auth-divider span{padding:0 12px;}
.mb-google-btn{display:flex;justify-content:center;min-height:44px;}
.mb-google-btn[data-busy="1"]{opacity:.6;pointer-events:none;}
.mb-gbtn{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;max-width:340px;padding:11px 18px;border:1px solid #dadce0;border-radius:24px;background:#fff;color:#3c4043;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:box-shadow .15s,background .15s;}
.mb-gbtn:hover{box-shadow:0 1px 3px rgba(60,64,67,.15);background:#f8f9fa;}
.mb-gbtn:disabled{opacity:.6;cursor:not-allowed;}
.mb-gbtn svg{flex-shrink:0;}

/* Related products (single-product page) */
.mb-related{margin-top:32px}
.mb-related-title{font-size:18px;font-weight:700;margin:0 0 16px;color:#222;text-align:start}
.mb-related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.mb-related-card{display:flex;flex-direction:column;background:#fff;border:1px solid #ececec;border-radius:10px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .15s ease,box-shadow .15s ease}
.mb-related-card:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,.08);text-decoration:none}
.mb-related-img{aspect-ratio:1/1;overflow:hidden;background:#f6f7f8}
.mb-related-img img{width:100%;height:100%;object-fit:cover;display:block}
.mb-related-meta{padding:10px 12px;display:flex;flex-direction:column;gap:4px}
.mb-related-name{font-size:13.5px;font-weight:600;line-height:1.4;color:#222;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mb-related-price{font-size:13px;font-weight:700;color:#2563eb}


/* ── Reviews ─────────────────────────────────────────────── */
.mb-reviews{margin-top:32px;background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:22px}
.mb-reviews-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid #f0f0f0}
.mb-reviews-head h2{margin:0;font-size:18px;font-weight:700}
.mb-reviews-summary{display:flex;align-items:center;gap:8px;font-size:14px;color:#555}
.mb-reviews-avg{font-size:22px;font-weight:700;color:#111}
.mb-reviews-empty{color:#888;font-size:13px}
.mb-stars{display:inline-flex;letter-spacing:1px;font-size:16px;color:#fbbf24}
.mb-star--empty{color:#d1d5db}
.mb-star--half{background:linear-gradient(90deg,#fbbf24 50%,#d1d5db 50%);-webkit-background-clip:text;background-clip:text;color:transparent}
.mb-reviews-list{list-style:none;padding:0;margin:0 0 22px;display:flex;flex-direction:column;gap:14px}
.mb-review{background:#f9fafb;border-radius:10px;padding:12px 14px}
.mb-review-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.mb-review-name{font-weight:700;font-size:14px}
.mb-review-date{color:#999;font-size:12px;margin-inline-start:auto}
.mb-review-body{margin:0;font-size:14px;line-height:1.6;color:#333}
.mb-review-form{display:flex;flex-direction:column;gap:10px;padding-top:14px;border-top:1px dashed #e5e7eb;position:relative}
.mb-review-form h3{margin:0 0 6px;font-size:15px;font-weight:700}
.mb-review-rating{display:inline-flex;gap:4px;direction:ltr}
.mb-star-btn{background:none;border:0;font-size:26px;color:#d1d5db;cursor:pointer;padding:2px;line-height:1;transition:color .15s,transform .1s}
.mb-star-btn:hover,.mb-star-btn.is-on{color:#fbbf24;transform:scale(1.1)}


/* Reviews — verified buyer badge + identity row */
.mb-review-identity{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px;color:#555;background:#f3f4f6;border-radius:8px;padding:8px 12px}
.mb-review-identity strong{color:#111}
.mb-review-verified{display:inline-flex;align-items:center;gap:3px;background:#dcfce7;color:#15803d;font-size:12px;font-weight:700;padding:2px 8px;border-radius:999px;line-height:1.4}
.mb-review.is-verified{border-left:3px solid #16a34a}
[dir="rtl"] .mb-review.is-verified{border-left:0;border-right:3px solid #16a34a}


/* Reviews -- verified-purchase badge */
.mb-review-buyer{display:inline-flex;align-items:center;gap:3px;background:#0ea5e9;color:#fff;font-size:12px;font-weight:700;padding:2px 8px;border-radius:999px;line-height:1.4;box-shadow:0 1px 2px rgba(14,165,233,.3)}
.mb-review.is-buyer{border-left:3px solid #0ea5e9;background:#f0f9ff}
[dir="rtl"] .mb-review.is-buyer{border-left:0;border-right:3px solid #0ea5e9}