/* home-sections.css — promos, digital, top-up, shopping, how-it-works, trust */

/* ── PROMO BANNERS ── */
.xb-promo{
  margin:20px 16px 0;
  border-radius:var(--xb-r-xl);
  padding:22px 20px;
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;position:relative;overflow:hidden;
  box-shadow:var(--xb-s-sm);
}
.xb-promo-blue{background:var(--xb-blue)}
.xb-promo-orange{background:var(--xb-accent)}
.xb-promo-circle{
  position:absolute;border-radius:50%;pointer-events:none;
  border:1px solid rgba(255,255,255,.06);
}
.xb-promo-c1{width:120px;height:120px;top:-40px;right:-30px}
.xb-promo-c2{width:80px;height:80px;bottom:-30px;right:30px;border-color:rgba(255,255,255,.05)}
.xb-promo-inner{position:relative;z-index:1}
.xb-promo-eye{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:rgba(255,255,255,.55);margin-bottom:4px}
.xb-promo-title{font-family:'Syne',sans-serif;font-size:18px;font-weight:800;color:#fff;line-height:1.12;letter-spacing:-.03em;margin-bottom:3px}
.xb-promo-sub{font-size:11px;color:rgba(255,255,255,.65)}
.xb-promo-btn{
  padding:9px 16px;border-radius:var(--xb-r-full);
  background:#fff;color:var(--xb-ink);font-family:'Syne',sans-serif;
  font-size:12px;font-weight:700;white-space:nowrap;flex-shrink:0;
  position:relative;z-index:1;transition:opacity .15s;
}
.xb-promo-btn:hover{opacity:.88}

/* ── DIGITAL CARDS ── */
.xb-digital-grid{padding-inline:16px;max-width:var(--xb-max);margin-inline:auto}
.xb-digital-card{
  background:var(--xb-surface);border:1px solid #eaeae6;border-radius:var(--xb-r-lg);
  padding:16px;display:flex;align-items:flex-start;gap:12px;
  box-shadow:var(--xb-s-xs);transition:box-shadow .15s;
}
.xb-digital-card:not(:last-child){margin-bottom:10px}
.xb-digital-card:hover{box-shadow:var(--xb-s-md)}
.xb-digital-icon{
  width:44px;height:44px;border-radius:var(--xb-r-sm);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;flex-shrink:0;
}
.xb-digital-info{flex:1;min-width:0}
.xb-digital-name{font-family:'Syne',sans-serif;font-size:13px;font-weight:700;color:var(--xb-ink);margin-bottom:2px}
.xb-digital-desc{font-size:11px;color:var(--xb-ink2);line-height:1.45;margin-bottom:8px}
.xb-digital-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.xb-digital-price{font-family:'Syne',sans-serif;font-size:14px;font-weight:700;color:var(--xb-ink)}

/* ── MOBILE TOP-UP ── */
.xb-topup{
  margin:20px 16px 0;background:var(--xb-surface);border:1px solid #eaeae6;
  border-radius:var(--xb-r-xl);overflow:hidden;box-shadow:var(--xb-s-sm);
}
.xb-topup-head{
  background:var(--xb-ink);padding:20px 20px 16px;position:relative;overflow:hidden;
}
.xb-topup-head::after{
  content:'';position:absolute;width:120px;height:120px;border-radius:50%;
  border:1px solid rgba(255,255,255,.05);right:-30px;top:-30px;
}
.xb-topup-eye{font-size:9px;font-weight:600;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:1px;margin-bottom:4px}
.xb-topup-title{font-family:'Syne',sans-serif;font-size:18px;font-weight:800;color:#fff;letter-spacing:-.03em;margin-bottom:2px}
.xb-topup-sub{font-size:11px;color:rgba(255,255,255,.45)}
.xb-topup-body{padding:16px}
.xb-net-row{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:14px}
.xb-net-btn{
  border:1.5px solid #eaeae6;border-radius:var(--xb-r-sm);padding:9px 4px;
  display:flex;flex-direction:column;align-items:center;gap:4px;background:#fff;
  font-family:'Syne',sans-serif;font-size:10px;font-weight:700;color:var(--xb-ink2);transition:all .13s;
}
.xb-net-btn.active{border-color:var(--xb-ink);background:var(--xb-ink);color:#fff}
.xb-net-dot{width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:#fff}
.xb-topup-form-row{display:flex;gap:8px;margin-bottom:12px}
.xb-topup-input{
  height:44px;border:1.5px solid #eaeae6;border-radius:var(--xb-r-sm);padding:0 12px;
  background:var(--xb-bg);outline:none;font-size:13px;color:var(--xb-ink);transition:border-color .15s,background .15s;
}
.xb-topup-input:focus{border-color:var(--xb-blue);background:#fff}
.xb-topup-input::placeholder{color:var(--xb-ink3)}
.xb-amounts{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:14px}
.xb-amt-btn{
  padding:9px 4px;border:1.5px solid #eaeae6;border-radius:var(--xb-r-xs);background:#fff;
  font-family:'Syne',sans-serif;font-size:12px;font-weight:700;color:var(--xb-ink2);transition:all .13s;
}
.xb-amt-btn.active{border-color:var(--xb-accent);background:var(--xb-accent);color:#fff}
.xb-btn-topup{
  width:100%;height:46px;border-radius:var(--xb-r-md);background:var(--xb-ink);color:#fff;
  font-family:'Syne',sans-serif;font-size:14px;font-weight:700;letter-spacing:-.02em;transition:opacity .15s;
}
.xb-btn-topup:hover{opacity:.88}

/* ── SHOPPING GRID ── */
.xb-shop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;padding-inline:16px;max-width:var(--xb-max);margin-inline:auto}
.xb-shop-tile{
  background:var(--xb-surface);border:1px solid #eaeae6;border-radius:var(--xb-r-md);
  padding:12px 6px 10px;display:flex;flex-direction:column;align-items:center;gap:7px;
  text-align:center;box-shadow:var(--xb-s-xs);transition:transform .15s;
}
.xb-shop-tile:hover{transform:scale(.98)}
.xb-shop-logo{
  width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-family:'Syne',sans-serif;font-size:10px;font-weight:800;color:#fff;
}
.xb-shop-name{font-family:'Syne',sans-serif;font-size:10px;font-weight:700;color:var(--xb-ink);line-height:1.2}
.xb-shop-from{font-size:9px;color:var(--xb-ink3)}

/* ── HOW IT WORKS ── */
.xb-how-wrap{padding:20px 16px 0;max-width:var(--xb-max);margin-inline:auto}
.xb-how-tag{font-size:10px}
.xb-how-card{
  background:var(--xb-surface);border:1px solid #eaeae6;border-radius:var(--xb-r-xl);
  padding:22px 18px;box-shadow:var(--xb-s-sm);
}
.xb-how-steps{display:flex;flex-direction:column;gap:0;margin-top:16px}
.xb-how-step{display:flex;align-items:flex-start;gap:14px;padding-bottom:20px;position:relative}
.xb-how-step:last-child{padding-bottom:0}
.xb-how-step::before{
  content:'';position:absolute;left:17px;top:36px;width:1px;bottom:0;background:#eaeae6;
}
.xb-how-step:last-child::before{display:none}
.xb-step-num{
  width:34px;height:34px;border-radius:50%;background:var(--xb-ink);color:#fff;
  font-family:'Syne',sans-serif;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;z-index:1;
}
.xb-step-info{padding-top:4px}
.xb-step-ttl{font-family:'Syne',sans-serif;font-size:13px;font-weight:700;color:var(--xb-ink);margin-bottom:2px}
.xb-step-dsc{font-size:12px;color:var(--xb-ink2);line-height:1.45}

/* ── TRUST ── */
.xb-trust-scroll{
  display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;
  padding:2px 16px 4px;margin:0 -16px;
}
.xb-trust-scroll::-webkit-scrollbar{display:none}
.xb-trust-tile{
  background:var(--xb-surface);border:1px solid #eaeae6;border-radius:var(--xb-r-lg);
  padding:16px 14px;min-width:140px;flex-shrink:0;box-shadow:var(--xb-s-xs);text-align:center;
}
.xb-trust-ico{font-size:22px;margin-bottom:7px}
.xb-trust-ttl{font-family:'Syne',sans-serif;font-size:12px;font-weight:700;color:var(--xb-ink);margin-bottom:2px}
.xb-trust-dsc{font-size:10px;color:var(--xb-ink3);line-height:1.4}

/* ── RESPONSIVE ── */
@media(min-width:600px){
  .xb-promo{margin-inline:24px}
  .xb-digital-grid{padding-inline:24px;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
  .xb-digital-card:not(:last-child){margin-bottom:0}
  .xb-topup{margin-inline:24px}
  .xb-shop-grid{grid-template-columns:repeat(6,1fr);padding-inline:24px}
  .xb-trust-scroll{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:0;margin:0}
  .xb-trust-tile{min-width:0}
}
@media(min-width:900px){
  .xb-digital-grid{grid-template-columns:repeat(3,1fr);padding-inline:32px}
  .xb-shop-grid{grid-template-columns:repeat(8,1fr);padding-inline:32px}
  .xb-how-steps{flex-direction:row;gap:0}
  .xb-how-step{flex-direction:column;flex:1;padding:0 16px 0 0}
  .xb-how-step::before{
    left:auto;top:17px;right:-8px;bottom:auto;width:calc(100% - 34px - 8px);height:1px;
  }
  .xb-how-step:last-child::before{display:none}
}