/* TALUKDAR WIFI - PREMIUM RECHARGE V10 */

/* Recharge summary */
.twz-customer-app:has(.twz-pay-sheet){
 padding-top:10px;
}

.twz-back{
 display:inline-flex;
 align-items:center;
 margin:0 0 10px;
 font-size:12px;
 font-weight:800;
 color:#1162d9;
 text-decoration:none;
}

.twz-pay-sheet{
 position:relative;
 overflow:hidden;
 margin-bottom:12px;
 border-radius:18px;
 padding:15px;
 color:white;
 background:linear-gradient(125deg,#073b91,#0659d5 68%,#1686ee);
 box-shadow:0 8px 24px #0a55bc26;
}

.twz-pay-sheet:before{
 content:"";
 position:absolute;
 height:135px;
 width:135px;
 border-radius:50%;
 right:-50px;
 top:-65px;
 border:20px solid #ffffff0a;
 animation:twz10Float 6s infinite alternate ease-in-out;
 pointer-events:none;
}

.twz-pay-sheet-top{
 position:relative;
 display:flex;
 justify-content:space-between;
 align-items:flex-start;
 gap:8px;
}

.twz-pay-sheet h3{
 color:white;
 font-size:16px;
 line-height:1.3;
 margin:0;
}

.twz-pay-sheet p{
 color:#e0eeff;
 font-size:11px;
 margin:4px 0 0;
}

.twz-pay-sheet .twz-pill{
 display:inline-flex!important;
 flex:none;
 border-radius:20px;
 padding:6px 9px;
 font-size:10px;
 background:#ffffff20!important;
 color:white!important;
}

.twz-amount-box{
 display:grid;
 grid-template-columns:repeat(3,minmax(0,1fr));
 gap:7px;
 margin-top:13px;
}

.twz-amount-box .box{
 border-radius:12px;
 padding:9px 5px;
 background:#ffffff16;
 border:1px solid #ffffff23;
 text-align:center;
}

.twz-amount-box .box strong{
 display:block;
 font-size:15px;
 font-weight:850;
 color:white;
 margin-bottom:3px;
 white-space:nowrap;
}

.twz-amount-box .box small{
 font-size:10px;
 color:#dbeaff;
}

/* Payment form */
.twz-form-shell{
 border:1px solid #e2eaf7;
 padding:14px;
 border-radius:19px;
 background:white;
 box-shadow:0 7px 20px #1746750a;
}

.twz-form-shell>h3{
 display:flex;
 align-items:center;
 gap:8px;
 font-size:16px;
 color:#193354;
 margin:0 0 11px;
}

.twz-form-shell>h3:before{
 content:"✓";
 display:grid;
 place-items:center;
 width:24px;
 height:24px;
 flex:none;
 background:#e4f8ef;
 color:#09925e;
 border-radius:9px;
 font-size:15px;
}

/* bKash/Nagad mini cards */
.twz-pay-grid{
 display:grid;
 grid-template-columns:repeat(2,minmax(0,1fr));
 gap:9px;
 margin-bottom:12px;
}

.twz-pay-channel{
 min-width:0;
 display:flex;
 flex-direction:column;
 gap:8px;
 border:1.5px solid #e2eafa;
 border-radius:15px;
 background:#f8faff;
 padding:10px;
 transition:border-color .2s,background .2s,transform .2s;
}

.twz-pay-channel.selected{
 border-color:#1677e9;
 background:linear-gradient(160deg,#eaf5ff,#f9fcff);
 box-shadow:0 3px 12px #1371e315;
}

.twz-pay-channel strong{
 font-size:13px;
 font-weight:850;
 color:#183552;
}

.twz-pay-channel .num{
 background:transparent;
 border:none;
 padding:0;
 text-align:left;
 font-size:13px;
 font-weight:850;
 color:#075fcf;
 white-space:nowrap;
 font-variant-numeric:tabular-nums;
 letter-spacing:-.3px;
}

.twz-pay-channel button{
 align-self:stretch;
 width:100%;
 margin:0;
 min-height:33px;
 border-radius:9px;
 border:1px solid #d3e5fc;
 background:#e8f2ff;
 color:#0958c6;
 padding:7px;
 font-size:11px;
 font-weight:850;
 box-shadow:none;
}

.twz-pay-channel button:active{
 transform:scale(.97);
}

/* Minimal instructions */
.twz-step-list{
 background:#f4f8ff;
 border:1px solid #e4ebf5;
 border-radius:12px;
 padding:9px 12px;
 margin:0 0 12px;
}

.twz-step-list ol{
 margin:0;
 padding-left:17px;
}

.twz-step-list li{
 font-size:11px;
 line-height:1.5;
 color:#60738b;
 margin:0 0 3px;
}

.twz-step-list li:last-child{
 margin:0;
}

/* Controls */
.twz-form-shell .twz-field{
 margin:10px 0;
}

.twz-form-shell .twz-field label{
 display:block;
 color:#233956;
 font-size:12px;
 font-weight:800;
 margin-bottom:6px;
}

.twz-form-shell .twz-field input,
.twz-form-shell .twz-field select{
 min-height:44px;
 width:100%;
 border:1px solid #dce5f1;
 border-radius:12px;
 padding:11px 12px;
 background:#fbfcff;
 color:#21334d;
 font-size:16px;
 box-shadow:none;
}

.twz-form-shell .twz-field input:focus,
.twz-form-shell .twz-field select:focus{
 outline:none;
 border-color:#1780ea;
 box-shadow:0 0 0 3px #1378e414;
}

.twz-or{
 display:flex;
 align-items:center;
 gap:10px;
 color:#8b9ab0;
 font-size:10px;
 font-weight:800;
 margin:8px 0;
}

.twz-or:before,.twz-or:after{
 content:"";
 height:1px;
 background:#e4eaf4;
 flex:1;
}

/* Upload */
.twz-form-shell input.twz-proof-file{
 padding:9px;
 border:1px dashed #a4c7ed;
 background:#f6faff;
 font-size:12px;
 min-height:44px;
}

.twz-proof-file::file-selector-button{
 background:#e2efff;
 color:#125cbe;
 border:0;
 border-radius:8px;
 padding:7px;
 font-weight:750;
 margin-right:8px;
}

.twz-form-shell>.twz-primary{
 min-height:47px;
 border-radius:13px!important;
 background:linear-gradient(110deg,#0756d1,#087ff3)!important;
 box-shadow:0 6px 15px #095ec52b!important;
 font-size:14px!important;
 margin-top:10px;
}

.twz-form-shell>.twz-primary:disabled{
 opacity:.55;
 box-shadow:none!important;
}

.twz-note{
 margin:10px 0 0;
 padding:10px;
 background:#f0f8f4;
 border:1px solid #daf0e2;
 color:#426b54;
 border-radius:11px;
 font-size:11px;
 line-height:1.5;
}

/* Animation */
.twz-pay-channel.selected{
 animation:twz10Select .25s ease-out;
}

@keyframes twz10Select{
 from{transform:scale(.98)}
 to{transform:scale(1)}
}

@keyframes twz10Float{
 from{transform:translate(0,0)}
 to{transform:translate(-16px,18px)}
}

@media(max-width:370px){
 .twz-pay-channel{padding:8px}
 .twz-pay-channel .num{font-size:11px}
 .twz-amount-box .box strong{font-size:13px}
 .twz-pay-sheet{padding:12px}
}

@media(prefers-reduced-motion:reduce){
 .twz-pay-sheet:before,
 .twz-pay-channel.selected{
  animation:none!important;
 }
}