:root{
  --primary-color:#2c3e50;
  --banreservas-gradient: linear-gradient(135deg,#27ae60,#2ecc71);
  --bhd-gradient: linear-gradient(135deg,#003087,#0052CC);
  --cedula-gradient: linear-gradient(135deg,#34495e,#2c3e50);
}

/* Reset + box sizing */
*{box-sizing:border-box;margin:0;padding:0}

/* Full-bleed safe area, center content */
html,body{height:100%}
body{
  font-family:'Roboto',sans-serif;
  background-color:#f0f2f5;
  /* keep safe-area insets and reserve space for fixed footer */
  padding:env(safe-area-inset-top) 12px calc(env(safe-area-inset-bottom) + 68px);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
}

/* Fixed footer (added) */
.fixed-footer{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  padding:calc(8px + env(safe-area-inset-bottom)) 12px 8px;
  background:linear-gradient(180deg, rgba(255,255,255,0.95), rgba(250,250,250,0.98));
  box-shadow:0 -6px 20px rgba(0,0,0,0.06);
  z-index:1200;
  backdrop-filter:blur(6px);
}
.footer-inner{
  max-width:980px;
  margin:0 auto;
  display:flex;
  gap:10px;
  justify-content:center;
  align-items:center;
}
.footer-btn{
  width:46px;
  height:46px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  box-shadow:0 6px 14px rgba(0,0,0,0.06);
  transition:transform .14s ease,box-shadow .14s ease;
}
.footer-btn:hover{transform:translateY(-3px)}
.footer-btn svg{width:22px;height:22px;display:block}

/* Container responsive sizing without changing structure */
.container{
  background:#fff;
  border-radius:14px;
  padding:clamp(12px,3.5vw,28px);
  box-shadow:0 12px 30px rgba(0,0,0,0.08);
  width:min(720px, 94%);
  max-height: calc(100vh - 28px);
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

/* Headline scales with viewport */
h1{
  color:var(--primary-color);
  text-align:center;
  font-weight:700;
  margin-bottom:clamp(12px,3.5vw,28px);
  font-size:clamp(1rem,3.4vw,1.7rem);
  text-transform:uppercase;
  text-shadow:1px 1px 2px rgba(0,0,0,0.06);
}

/* Account card */
.account{
  margin-bottom:14px;
  padding:clamp(12px,3vw,20px);
  border-radius:12px;
  position:relative;
  overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease;
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0));
}

/* decorative shine (kept) */
.account::before{
  content:'';
  position:absolute;
  top:-50%;left:-50%;
  width:200%;height:200%;
  background:radial-gradient(circle, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 70%);
  transform:rotate(45deg);
  transition:all .45s ease;
}
.account:hover::before{top:-75%;left:-75%}

/* Specific bank styles (kept same) */
.popular{background:var(--popular-gradient);color:#fff}
.banreservas{background:var(--banreservas-gradient);color:#fff;box-shadow:0 10px 20px rgba(39,174,96,0.14)}
.bhd{background:var(--bhd-gradient);color:#fff;box-shadow:0 10px 20px rgba(0,48,135,0.14)}
.cedula{background:var(--cedula-gradient);color:#fff;box-shadow:0 10px 20px rgba(52,73,94,0.14)}

.account:hover{transform:translateY(-4px)}

/* Titles & paragraphs scale */
.account h2{margin-top:0;font-weight:700;font-size:clamp(1rem,3vw,1.3rem);margin-bottom:8px}
.account p{
  margin:8px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  text-align:left;
  font-size:clamp(.85rem,2.4vw,1rem);
  gap:.5rem;
  flex-wrap:wrap;
}

/* Copy button */
.copy-btn{
  background:rgba(255,255,255,0.18);
  border:1px solid rgba(255,255,255,0.28);
  color:#fff;
  padding:6px 10px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:clamp(.72rem,2vw,.9rem);
  border-radius:8px;
  cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease,background .15s;
  backdrop-filter:blur(4px);
  /* nudge button slightly down so it doesn't overlap the top-right bank logo */
  position: relative;
  top: 10px;
}
.copy-btn svg{width:16px;height:16px;flex-shrink:0}
.copy-btn:active{transform:translateY(1px)}

/* Toast */
.toast{
  visibility:hidden;
  min-width:200px;
  background:rgba(51,51,51,.92);
  color:#fff;
  text-align:center;
  border-radius:20px;
  padding:10px 14px;
  position:fixed;
  z-index:1000;
  left:50%;
  transform:translateX(-50%);
  bottom:20px;
  font-size:.9rem;
  box-shadow:0 6px 18px rgba(0,0,0,0.15);
  opacity:0;
  transition:opacity .25s,transform .25s;
}
.toast.show{visibility:visible;opacity:1;transform:translateX(-50%) translateY(-6px)}

/* Protected text style */
.protected{font-family:monospace;letter-spacing:1px;background:rgba(255,255,255,0.14);padding:2px 6px;border-radius:4px}

/* Bank logo sizing responsive and accessible placement */
.bank-logo{
  position:absolute;
  top:10px;
  right:10px;
  width:clamp(44px,12vw,96px);
  height:auto;
  opacity:.9;
  transition:transform .2s ease,opacity .2s ease;
  background:rgba(255,255,255,0.9);
  padding:6px;border-radius:10px;box-shadow:0 2px 6px rgba(0,0,0,0.06);
}
.account:hover .bank-logo{transform:scale(1.06);opacity:1}
.account .bank-logo.cedula-logo{width:clamp(36px,9vw,64px);padding:4px}

/* Disclaimer and badges */
.disclaimer{
  font-size:clamp(.75rem,2.2vw,.95rem);
  color:#7f8c8d;text-align:center;margin-top:12px;
  line-height:1.5;padding:10px;background:#fbfbfb;border-radius:10px;box-shadow:inset 0 0 8px rgba(0,0,0,0.03)
}
.security-badge{
  display:flex;align-items:center;justify-content:center;margin-top:12px;padding:8px;background:#f1f8e9;border-radius:10px;color:#33691e;font-weight:700;gap:.5rem
}
.security-badge svg{width:20px;height:20px}

/* Creator info and social */
.creator-info{text-align:center;font-size:.9rem;color:#34495e;margin-top:10px;font-weight:500}
.social-buttons{display:flex;justify-content:center;gap:12px;margin-top:12px;flex-wrap:wrap}
.social-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:#f0f2f5;transition:transform .15s ease}
.social-btn:hover{transform:scale(1.06)}
.social-btn svg{width:20px;height:20px;fill:#34495e}

/* Smaller screens adjustments for touch */
@media (max-width:420px){
  body{padding:8px}
  .container{padding:12px;border-radius:12px}
  .bank-logo{top:8px;right:8px}
  .account{padding:10px}
  .copy-btn{padding:6px 8px;border-radius:7px; top: 8px;}
}