/* styles.css - custom styles to match the mobile Figma look */
:root{
  --accent:#066bff;
  --accent-dark:#0a4ed6;
  --muted:#9aa0a6;
}
body{
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:#fff;
  color:#222;
}
.header-logo{
  display:flex;
  justify-content:center;
  padding-top:28px;
  padding-bottom:28px;
}
.logo-img{
  width:140px;
  height:auto;
  object-fit:contain;
}
.centered-area{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:40px 20px 120px 20px;
  min-height:60vh;
}
.forgot-link{
  color:var(--accent);
  margin-left:6px;
  font-size:14px;
}
.btn-primary-custom{
  background: linear-gradient(180deg,var(--accent),var(--accent-dark));
  border: none;
  border-radius:12px;
  padding:14px 20px;
  font-weight:600;
  box-shadow: 0 6px 18px rgba(10,78,214,0.18);
}
.bottom-action{
  position:fixed;
  left:16px;
  right:16px;
  bottom:20px;
}
.forgot-container{
  padding:40px 20px;
  text-align:center;
}
.forgot-title{
  font-size:20px;
  font-weight:700;
  color:#666;
  margin-bottom:26px;
}
.form-label-strong{
  font-weight:700;
  margin-bottom:10px;
}
.input-rounded{
  border-radius:12px;
  border:1px solid #ddd;
  padding:12px 16px;
  width:100%;
  max-width:360px;
  margin:8px 0 18px 0;
}
.small-muted{
  color:#9aa0a6;
  font-size:13px;
}
.pay-header{
  display:flex;
  align-items:center;
  gap:12px;
  padding:18px 16px;
  border-bottom:1px solid #eee;
}
.back-circle{
  width:36px;
  height:36px;
  border-radius:50%;
  background:#e8f7ff;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--accent);
  font-weight:700;
}
.pay-title{
  text-align:center;
  flex:1;
  font-size:22px;
  font-weight:700;
  color:#0a4ed6;
}
.list-option{
  border-top:1px solid #eee;
  border-bottom:1px solid #eee;
  background:#fafafa;
}
.list-item{
  display:flex;
  align-items:center;
  padding:14px 16px;
  gap:12px;
}
.icon-box{
  width:28px;
  text-align:center;
}
.badge-new{
  background:#ff5a5f;
  color:#fff;
  font-size:11px;
  padding:4px 8px;
  border-radius:8px;
  margin-left:auto;
}
.secure-block{
  margin-top:36px;
  text-align:center;
}
.lock-circle{
  width:56px;
  height:56px;
  margin:0 auto 12px auto;
  border-radius:12px;
  background:#e8f8ee;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#2ba05b;
  font-size:24px;
}
@media(min-width:768px){
  .centered-area{ padding:40px 80px 160px 80px; align-items:center; }
  .logo-img{ width:220px; }
  .input-rounded{ max-width:520px; }
  .btn-primary-custom{ max-width:520px; padding:16px 24px; border-radius:14px;}
  .forgot-container{ padding-top:80px;}
  .pay-title{ font-size:28px; }
}