/* ═══════════════════════════════════════════════════════════
   SHOP — scoped styles (apply only when body.shop-page)
   Background image: hero-bg.jpg with dark overlay + ice glow
   ═══════════════════════════════════════════════════════════ */

body.shop-page{
  background-image:
    linear-gradient(180deg,
      rgba(3,6,15,.55) 0%,
      rgba(3,6,15,.72) 50%,
      rgba(3,6,15,.88) 100%),
    url('../img/hero-bg.jpg');
  background-position: center, center center;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
  background-color: var(--bg-0);
}
@media(max-width:900px){
  body.shop-page{background-attachment:scroll,scroll}
}

/* ─── Hero ─── */
body.shop-page .shop-hero{padding:120px 0 60px}
body.shop-page .shop-h1{
  font-family:'Cinzel Decorative',serif;font-weight:900;font-size:64px;
  letter-spacing:.12em;text-align:center;
  background:linear-gradient(180deg,#eaf2ff 0%,#9ec2ff 45%,#3b82f6 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 80px rgba(59,130,246,.3);position:relative
}
body.shop-page .shop-coins-pill{
  position:relative;display:inline-flex;align-items:center;gap:14px;
  margin:30px auto 0;padding:12px 24px;
  background:rgba(11,28,68,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(212,175,55,.4);border-radius:40px;
  font-family:'Cinzel',serif;font-size:14px;letter-spacing:.1em;color:#fff;
  box-shadow:0 8px 24px rgba(3,6,15,.5)
}
body.shop-page .shop-coins-pill i{color:var(--gold);font-size:18px}
body.shop-page .shop-coins-pill strong{color:var(--gold);font-weight:700}

/* ─── Section / grid ─── */
body.shop-page .shop-section{padding:50px 0 80px}
body.shop-page .shop-grid{
  display:grid;grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:24px;margin-bottom:60px
}

/* ─── Card ─── */
body.shop-page .shop-card{
  position:relative;
  background:linear-gradient(180deg,rgba(11,28,68,.6),rgba(5,12,32,.82));
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(96,165,250,.22);border-radius:12px;
  padding:32px 24px 28px;text-align:center;
  transition:all .3s ease;
  box-shadow:0 8px 28px rgba(3,6,15,.5),inset 0 1px 0 rgba(255,255,255,.05)
}
body.shop-page .shop-card:hover{
  transform:translateY(-6px);
  border-color:var(--cyan);
  box-shadow:0 24px 48px rgba(3,6,15,.7),0 0 32px rgba(96,165,250,.2),inset 0 1px 0 rgba(255,255,255,.08)
}
body.shop-page .shop-card.has-badge{padding-top:42px}

body.shop-page .shop-badge{
  position:absolute;top:14px;left:50%;transform:translateX(-50%);
  font-family:'Cinzel',serif;font-weight:700;font-size:10px;letter-spacing:.18em;
  background:linear-gradient(135deg,var(--gold),#f5d78e);color:#1a0e00;
  padding:5px 14px;border-radius:20px;
  box-shadow:0 4px 12px rgba(212,175,55,.4)
}

body.shop-page .shop-card-icon{
  width:90px;height:90px;margin:0 auto 18px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(96,165,250,.3) 0%, rgba(11,28,68,.6) 70%);
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(96,165,250,.3);
  box-shadow:0 0 24px rgba(96,165,250,.25)
}
body.shop-page .shop-card-icon i{font-size:36px;color:var(--gold);filter:drop-shadow(0 0 12px rgba(212,175,55,.5))}
body.shop-page .shop-card-icon img{width:60%;height:60%;object-fit:contain}

body.shop-page .shop-card-name{
  font-family:'Cinzel',serif;font-weight:700;font-size:20px;
  letter-spacing:.1em;color:#fff;margin-bottom:8px
}
body.shop-page .shop-card-desc{
  color:var(--muted);font-size:13px;line-height:1.6;margin-bottom:18px;min-height:34px
}

body.shop-page .shop-coins-line{
  display:flex;align-items:baseline;justify-content:center;gap:8px;
  margin:14px 0 6px
}
body.shop-page .shop-coins-num{
  font-family:'Cinzel',serif;font-weight:900;font-size:32px;
  background:linear-gradient(180deg,#f5d78e,#d4af37);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
body.shop-page .shop-coins-label{
  font-family:'Cinzel',serif;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted)
}
body.shop-page .shop-bonus{
  font-size:12px;color:var(--muted);margin-bottom:14px;letter-spacing:.04em
}
body.shop-page .shop-bonus strong{color:#4ade80;font-weight:600}

body.shop-page .shop-price{
  font-family:'Cinzel',serif;font-weight:700;font-size:26px;
  color:var(--cyan);margin:18px 0 18px;letter-spacing:.05em
}
body.shop-page .shop-buy-btn{width:100%;justify-content:center}

/* ─── Gateways info strip ─── */
body.shop-page .shop-gateways-info{
  text-align:center;
  padding:36px 24px;
  background:linear-gradient(180deg,rgba(11,28,68,.5),rgba(5,12,32,.7));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(96,165,250,.18);border-radius:12px;
  box-shadow:0 8px 24px rgba(3,6,15,.4)
}
body.shop-page .shop-gw-grid{
  display:flex;flex-wrap:wrap;justify-content:center;gap:14px;
  margin:24px 0 18px
}
body.shop-page .shop-gw{
  display:flex;align-items:center;gap:8px;
  padding:10px 16px;border:1px solid rgba(96,165,250,.2);border-radius:6px;
  background:rgba(8,18,42,.4);
  font-family:'Cinzel',serif;font-size:12px;letter-spacing:.1em;color:#cfe0ff
}
body.shop-page .shop-gw i{font-size:18px;color:var(--cyan)}
body.shop-page .shop-gw-note{
  font-size:12px;color:var(--muted);font-style:italic;letter-spacing:.04em
}

/* ─── Checkout page ─── */
body.shop-page .checkout-grid{
  display:grid;grid-template-columns:1fr 1.3fr;gap:32px;
  max-width:1000px;margin:0 auto
}
@media(max-width:800px){
  body.shop-page .checkout-grid{grid-template-columns:1fr}
}
body.shop-page .checkout-summary,
body.shop-page .checkout-methods{
  background:linear-gradient(180deg,rgba(11,28,68,.6),rgba(5,12,32,.82));
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(96,165,250,.22);border-radius:12px;
  padding:32px;
  box-shadow:0 8px 28px rgba(3,6,15,.5)
}
body.shop-page .checkout-h2{
  font-family:'Cinzel',serif;font-size:18px;letter-spacing:.12em;
  color:#fff;margin-bottom:18px;text-transform:uppercase
}
body.shop-page .checkout-summary .pkg-name{
  font-family:'Cinzel Decorative',serif;font-size:24px;color:#fff;margin-bottom:8px
}
body.shop-page .checkout-summary .pkg-coins{
  font-family:'Cinzel',serif;font-size:32px;
  background:linear-gradient(180deg,#f5d78e,#d4af37);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin:12px 0
}
body.shop-page .checkout-summary .pkg-bonus{color:#4ade80;font-size:13px;margin-bottom:18px}
body.shop-page .checkout-summary .pkg-line{
  display:flex;justify-content:space-between;
  padding:12px 0;border-top:1px solid rgba(96,165,250,.15);
  font-size:14px;color:var(--muted)
}
body.shop-page .checkout-summary .pkg-line.total{
  border-top-color:rgba(212,175,55,.4);margin-top:12px;
  font-size:18px;color:#fff;font-family:'Cinzel',serif;font-weight:700
}
body.shop-page .checkout-summary .pkg-line.total strong{color:var(--cyan)}

body.shop-page .pay-method{
  display:flex;align-items:center;gap:16px;
  padding:18px 22px;margin-bottom:12px;
  background:rgba(8,18,42,.5);border:1px solid rgba(96,165,250,.2);
  border-radius:10px;cursor:pointer;
  transition:all .25s
}
body.shop-page .pay-method:hover{border-color:var(--cyan);background:rgba(15,36,82,.6)}
body.shop-page .pay-method input[type=radio]{accent-color:var(--cyan);width:18px;height:18px;flex-shrink:0}
body.shop-page .pay-method.disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
body.shop-page .pay-method-icon{font-size:28px;color:var(--cyan);width:40px;text-align:center}
body.shop-page .pay-method-info{flex:1}
body.shop-page .pay-method-info strong{display:block;font-family:'Cinzel',serif;font-size:14px;color:#fff;letter-spacing:.08em;margin-bottom:2px}
body.shop-page .pay-method-info span{font-size:12px;color:var(--muted)}

body.shop-page .pay-method.selected{border-color:var(--gold);background:rgba(212,175,55,.05);box-shadow:0 0 16px rgba(212,175,55,.15)}

body.shop-page .pay-content{display:none;margin-top:18px;padding:20px;background:rgba(3,6,15,.4);border:1px solid rgba(96,165,250,.15);border-radius:8px}
body.shop-page .pay-content.active{display:block}
body.shop-page .pay-content pre{
  white-space:pre-wrap;word-break:break-word;
  font-family:'Inter',sans-serif;font-size:13px;color:var(--muted);
  line-height:1.7;margin-bottom:14px
}

/* ─── Result pages ─── */
body.shop-page .result-card{
  max-width:560px;margin:80px auto;text-align:center;
  background:linear-gradient(180deg,rgba(11,28,68,.6),rgba(5,12,32,.82));
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(96,165,250,.22);border-radius:14px;
  padding:60px 40px;
  box-shadow:0 12px 32px rgba(3,6,15,.6)
}
body.shop-page .result-card .result-icon{font-size:72px;margin-bottom:20px}
body.shop-page .result-card.success .result-icon{color:#4ade80;filter:drop-shadow(0 0 24px rgba(74,222,128,.5))}
body.shop-page .result-card.error .result-icon{color:#f87171;filter:drop-shadow(0 0 24px rgba(248,113,113,.5))}
body.shop-page .result-card.pending .result-icon{color:var(--gold);filter:drop-shadow(0 0 24px rgba(212,175,55,.5))}
body.shop-page .result-card h1{
  font-family:'Cinzel Decorative',serif;font-size:36px;margin-bottom:12px;
  background:linear-gradient(180deg,#eaf2ff 0%,#9ec2ff 60%,#3b82f6 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
body.shop-page .result-card p{color:var(--muted);font-size:15px;line-height:1.7;margin-bottom:24px}
body.shop-page .result-card .ref-box{
  display:inline-block;padding:10px 20px;margin:14px 0;
  background:rgba(3,6,15,.5);border:1px solid rgba(212,175,55,.3);border-radius:6px;
  font-family:monospace;font-size:14px;color:var(--gold);letter-spacing:.1em
}

/* ─── Mobile ─── */
@media(max-width:600px){
  body.shop-page .shop-h1{font-size:42px}
  body.shop-page .shop-grid{grid-template-columns:1fr;gap:18px}
  body.shop-page .shop-card{padding:24px 18px}
  body.shop-page .checkout-summary,body.shop-page .checkout-methods{padding:22px}
  body.shop-page .result-card{margin:40px 16px;padding:40px 24px}
  body.shop-page .result-card h1{font-size:26px}
}