/* styles.css - Centered fixed popups, stable positions */
:root{
  --bg:#fff;
  --accent:#ff2d55;
  --muted:#666;
  --overlay: rgba(0,0,0,0.4);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, Arial, sans-serif;
  background: linear-gradient(180deg,#fff,#f7f7f8);
  color:#111;
  -webkit-font-smoothing:antialiased;
}

.page{max-width:920px;margin:40px auto;padding:16px}
.header h1{margin:0;font-size:28px;color:var(--accent)}
.subtitle{margin:6px 0 18px;color:var(--muted)}

.recharge-card{
  background:#fff;border-radius:12px;padding:20px;box-shadow:0 6px 18px rgba(0,0,0,0.06);
}
.search-row{display:flex;gap:8px;align-items:center}
.search-row input{flex:1;padding:12px;border-radius:8px;border:1px solid #e6e6e9}
.primary{background:var(--accent);color:#fff;border:0;padding:10px 14px;border-radius:8px;cursor:pointer}
.secondary{background:#fff;border:1px solid #ddd;padding:8px 12px;border-radius:8px;cursor:pointer}
.price{padding:12px 18px;border-radius:10px;border:1px solid #eee;margin:6px;cursor:pointer}

.payments{margin-top:12px;display:flex;gap:10px;align-items:center}
.logo{background:#f1f1f1;padding:6px 10px;border-radius:6px;font-size:13px}

/* overlay */
.overlay{
  position:fixed;inset:0;z-index:40;display:block;
}
.hidden{display:none}

/* popup base - fixed center so it never jumps position relative to viewport */
.popup{
  position:fixed;
  z-index:50;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:min(520px,92%);
  background:#fff;
  border-radius:12px;
  padding:18px;
  box-shadow:0 18px 40px rgba(0,0,0,0.18);
  transition:opacity .18s ease, transform .18s ease;
  opacity:1;
}

/* When hidden we keep the same positioning but hide with visibility/opacity for easier animations */
.popup[data-hidden="true"]{
  opacity:0;pointer-events:none;visibility:hidden;transform:translate(-50%,-48%);
}

/* controls row */
.controls{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}

/* small screens ensure it fits */
@media (max-width:420px){
  .popup{width:92%;padding:14px}
}