/* RF Bit Payments - Payment Page UI (Module 3) */

:root{
  --rfbit-bg1:#07101c;
  --rfbit-bg2:#0b1626;
  --rfbit-card-top:#2d6d77;
  --rfbit-card-bot:#1a2f4b;
  --rfbit-accent:#63d7ff;
  --rfbit-accent2:#4fc6ff;
  --rfbit-text:#ffffff;
  --rfbit-muted:rgba(255,255,255,.70);
  --rfbit-border:rgba(99,215,255,.35);
  --rfbit-shadow: rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1200px 600px at 30% 10%, rgba(99,215,255,.10), transparent 60%),
    radial-gradient(900px 500px at 90% 20%, rgba(80,200,255,.08), transparent 60%),
    linear-gradient(180deg, var(--rfbit-bg2) 0%, var(--rfbit-bg1) 100%);
  color:var(--rfbit-text);
  overflow-x:hidden;
}

.rfbit-page{
  min-height:100%;
  padding:24px 18px 48px;
}

.rfbit-page-title{
  position:fixed;
  top:14px;
  left:18px;
  font-size:14px;
  letter-spacing:.3px;
  color:rgba(255,255,255,.55);
  user-select:none;
  pointer-events:none;
}

.rfbit-wrap{
  max-width: 980px;
  margin: 0 auto;
  padding-top: 10px;
}

.rfbit-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top: 14px;
}

/* RTL helpers */
html[dir="rtl"] .rfbit-page-title{left:auto;right:18px;}
html[dir="rtl"] .rfbit-topbar{flex-direction:row-reverse;}
html[dir="rtl"] .rfbit-backrow{justify-content:flex-end;}
html[dir="rtl"] .rfbit-btn-back .rfbit-ic{transform: rotate(180deg);}

.rfbit-logo{
  font-weight:900;
  letter-spacing:1px;
  font-size:36px; /* ~30% larger */
  line-height:1;
  background: linear-gradient(180deg, var(--rfbit-accent) 0%, rgba(99,215,255,.45) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow: 0 10px 30px rgba(99,215,255,.08);
}

.rfbit-logo-img{
  display:block;
  max-height:52px; /* ~30% larger */
  max-width:220px;
}

.rfbit-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:10px;
  text-decoration:none;
  color:var(--rfbit-text);
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.rfbit-btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22);}
.rfbit-btn:active{transform: translateY(0px);}
.rfbit-ic{display:inline-block}

.rfbit-btn-support{
  background: linear-gradient(180deg, rgba(120,240,255,.28) 0%, rgba(70,180,255,.18) 100%);
  border-color: rgba(99,215,255,.30);
  color: rgba(255,255,255,.92);
  padding: 10px 16px;
}

.rfbit-backrow{
  margin-top: 18px;
  display:flex;
  justify-content:flex-start;
}

.rfbit-btn-back{
  padding: 8px 12px;
  border-color: rgba(99,215,255,.26);
}

.rfbit-card{
  margin-top: 22px;
  border-radius: 16px;
  border: 1px solid var(--rfbit-border);
  background:
    linear-gradient(180deg, rgba(45,109,119,.75) 0%, rgba(26,47,75,.85) 100%);
  box-shadow: 0 35px 80px var(--rfbit-shadow);
  padding: 46px 22px 30px;
  text-align:center;
  position:relative;
}

.rfbit-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:16px;
  background: radial-gradient(800px 350px at 50% 0%, rgba(99,215,255,.15), transparent 55%);
  pointer-events:none;
}

/* --- New layout blocks (Module 3.1) --- */
.rfbit-bit-logo{
  position:relative;
  margin: 0 auto 18px;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height: 60px; /* ~30% larger */
}

.rfbit-bit-img{
  display:block;
  max-height:60px; /* ~30% larger */
  max-width:200px;
}

.rfbit-bit-text{
  font-size: 58px; /* ~30% larger */
  font-weight: 800;
  letter-spacing:.5px;
  color: var(--rfbit-accent);
}

.rfbit-row{
  position:relative;
  margin: 0 auto 16px;
  max-width: 520px;
}

.rfbit-row-label{
  font-size: 18px; /* ~30% larger */
  color: var(--rfbit-muted);
  margin-bottom: 8px;
}

.rfbit-row-value{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

/* Amount block should display currency symbol to the LEFT of the number even on RTL pages */
.rfbit-row-value-amount{
  direction: ltr;
  unicode-bidi: isolate;
}

.rfbit-currency{
  font-size: 16px;
  color: rgba(255,255,255,.80);
}

.rfbit-value{
  font-size: 26px;
  font-weight: 750;
  letter-spacing:.2px;
  direction:ltr;
  unicode-bidi: plaintext;
}

.rfbit-value-amount{
  color: rgba(99,215,255,.92);
}

.rfbit-copy-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  cursor:pointer;
}

.rfbit-copy-btn:hover{background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22);}
.rfbit-copy-btn:active{transform: translateY(1px);}

.rfbit-warning{
  position:relative;
  margin: 6px auto 18px;
  max-width: 560px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,85,85,.55);
  background: rgba(255,85,85,.10);
  color: rgba(255,190,190,.98);
  font-size: 13px;
  line-height: 1.45;
}

.rfbit-info{
  margin: 14px auto 0;
  max-width: 620px;
  font-size: 12px;
  color: rgba(255,255,255,.55);
  line-height: 1.45;
}

.rfbit-toast{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 9998;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.72);
  color: rgba(255,255,255,.92);
  font-size: 13px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}

.rfbit-bit{
  position:relative;
  font-size: 44px;
  font-weight: 800;
  letter-spacing:.5px;
  color: var(--rfbit-accent);
  margin-bottom: 8px;
}

.rfbit-subtitle{
  position:relative;
  font-size: 14px;
  color: var(--rfbit-muted);
  margin-bottom: 10px;
}

.rfbit-phone{
  position:relative;
  font-size: 26px;
  font-weight: 700;
  letter-spacing:.2px;
  margin-bottom: 10px;
}

.rfbit-amount{
  position:relative;
  font-size: 18px;
  font-weight: 600;
  color: rgba(99,215,255,.85);
  margin-bottom: 18px;
}

.rfbit-amount span{
  font-size: 22px;
  font-weight: 700;
}

.rfbit-coupon{
  position:relative;
  margin: 6px auto 18px;
  max-width: 420px;
}

#rfbitCouponForm{
  display:flex;
  gap:10px;
  justify-content:center;
  align-items:center;
}

#rfbitCouponInput{
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(8,16,28,.30);
  color: rgba(255,255,255,.92);
  outline:none;
}

#rfbitCouponInput::placeholder{color:rgba(255,255,255,.45)}

.rfbit-btn-apply{
  flex: 0 0 auto;
  padding: 10px 14px;
  border-color: rgba(99,215,255,.30);
  background: rgba(99,215,255,.10);
}

.rfbit-coupon-msg{
  margin-top:8px;
  font-size: 13px;
  color: rgba(255,255,255,.80);
  min-height: 18px;
}

.rfbit-progress{
  position:relative;
  margin-top: 6px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

.rfbit-progress-track{
  width: 62%;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  overflow:hidden;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.25);
}

.rfbit-progress-fill{
  height: 100%;
  width: 40%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(99,215,255,.95) 0%, rgba(99,215,255,.35) 100%);
  box-shadow: 0 0 18px rgba(99,215,255,.30);
  transition: width .5s ease;
}

.rfbit-expiry{
  font-size: 13px;
  color: rgba(255,255,255,.70);
}

.rfbit-divider{
  margin: 18px auto 14px;
  height: 1px;
  width: 86%;
  background: rgba(99,215,255,.18);
}

.rfbit-footer{
  font-size: 12px;
  color: rgba(255,255,255,.58);
  line-height: 1.45;
  max-width: 620px;
  margin: 0 auto;
}

.rfbit-card-error{
  padding: 28px 18px;
  text-align:left;
}

html[dir="rtl"] .rfbit-card-error{ text-align:right; }

.rfbit-error-title{
  font-size: 20px;
  font-weight: 750;
}

.rfbit-error-detail{
  margin-top:8px;
  color: rgba(255,255,255,.75);
  font-size: 14px;
}

/* Overlay for success/expired */
.rfbit-overlay{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
  z-index: 9999;
}

.rfbit-overlay-card{
  width: 100%;
  max-width: 520px;
  border-radius: 16px;
  border: 1px solid rgba(99,215,255,.22);
  background: linear-gradient(180deg, rgba(20,38,56,.96) 0%, rgba(12,20,32,.96) 100%);
  box-shadow: 0 40px 90px rgba(0,0,0,.55);
  padding: 20px 18px;
}

.rfbit-overlay-title{
  font-size: 18px;
  font-weight: 780;
  margin-bottom: 8px;
}

.rfbit-overlay-body{
  font-size: 14px;
  color: rgba(255,255,255,.82);
  line-height: 1.45;
}

.rfbit-overlay-actions{
  margin-top: 14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* Mobile tweaks */
@media (max-width: 640px) {
  .rfbit-wrap{max-width: 420px;}
  .rfbit-card{padding: 34px 16px 22px;}
  .rfbit-progress-track{width: 78%;}
  .rfbit-back-text{display:none;}
  .rfbit-btn-support{padding: 9px 12px;}
  .rfbit-logo-img{max-height:46px;}
  .rfbit-bit-text{font-size: 52px;}
  .rfbit-bit-img{max-height:54px;}
  .rfbit-row-label{font-size:16px;}
  .rfbit-row{max-width: 100%;}
  .rfbit-value{font-size: 22px;}
  .rfbit-copy-btn{width:34px;height:34px;}
}