:root{
--bg: #f7f7fb;
--card: #ffffff;
--accent: #0b6cff;
--muted: #6b7280;
--shadow: 0 6px 18px rgba(12, 18, 29, 0.08);
}


*{box-sizing:border-box}
body{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; margin:0; background:var(--bg); color:#0b1220}
.container{max-width:820px; margin:6vh auto; padding:28px}
h1{margin:0 0 18px 0; font-size:28px}


.payment-wrapper{background:var(--card); padding:28px; border-radius:12px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:12px; align-items:flex-start}


.dropdown{position:relative}
.pay-btn{background:linear-gradient(180deg,var(--accent),#0356d6); color:white; border:0; padding:12px 18px; border-radius:10px; font-weight:700; cursor:pointer; box-shadow:0 6px 14px rgba(11,108,255,0.18);}
.pay-btn:focus{outline:3px solid rgba(11,108,255,0.2)}


.dropdown-menu{position:absolute; left:0; margin-top:12px; min-width:220px; background:var(--card); border-radius:10px; box-shadow:0 8px 20px rgba(8,12,30,0.12); padding:8px; display:none;}
.dropdown-menu.open{display:block}
.dropdown-item{display:block; padding:12px 14px; text-decoration:none; color:var(--muted); border-radius:8px; font-weight:600}
.dropdown-item:hover{background:rgba(11,108,255,0.06); color:var(--accent)}


.hint{margin-top:8px; color:var(--muted)}


/* Mobile tweaks */
@media (max-width:520px){
.container{padding:18px}
.pay-btn{width:100%}
.dropdown-menu{min-width:100%; left:0}
}