/* TALUKDAR WIFI ZONE PREMIUM LOGIN V11 */

/* Only apply when login is displayed */
body:has(.twz-login-v11){
 background:
 radial-gradient(circle at 50% 0%,#dcecff 0%,transparent 48%),
 #f4f7fc;
 min-height:100dvh;
}

body:has(.twz-login-v11)>header{
 display:none!important;
}

body:has(.twz-login-v11) main{
 max-width:100%;
 min-height:100dvh;
 margin:0;
 padding:0!important;
 display:block;
}

.twz-login-v11{
 max-width:480px;
 min-height:100dvh;
 margin:auto;
 padding:25px 19px 36px;
 display:flex;
 flex-direction:column;
 justify-content:center;
 gap:17px;
 font-family:system-ui,"Noto Sans Bengali",sans-serif;
}

.twz11-visual{
 position:relative;
 border-radius:27px;
 overflow:hidden;
 background:linear-gradient(135deg,#062e75,#0759d4 65%,#1486fa);
 padding:25px 20px 22px;
 color:white;
 text-align:center;
 box-shadow:0 15px 36px #0956ca30;
 isolation:isolate;
}

.twz11-visual::before,
.twz11-visual::after{
 content:"";
 position:absolute;
 border:1px solid #ffffff18;
 border-radius:50%;
 z-index:-1;
}

.twz11-visual::before{
 width:240px;
 height:240px;
 top:-140px;
 right:-85px;
 animation:twz11Float 8s ease-in-out infinite alternate;
}

.twz11-visual::after{
 width:170px;
 height:170px;
 bottom:-115px;
 left:-65px;
}

.twz11-brand{
 font-size:23px;
 font-weight:900;
 letter-spacing:-.4px;
 line-height:1.35;
 margin:0;
}

.twz11-subtitle{
 font-size:12px;
 opacity:.86;
 margin:6px 0 15px;
}

.twz11-wifi{
 position:relative;
 width:95px;
 height:87px;
 margin:0 auto 10px;
 display:grid;
 place-items:center;
}

.twz11-wave{
 position:absolute;
 border:4px solid transparent;
 border-top-color:#a8eaff;
 border-radius:50%;
 transform:rotate(0deg);
 animation:twz11Signal 2.4s ease-in-out infinite;
}

.twz11-wave.w1{
 width:88px;
 height:88px;
 top:10px;
}

.twz11-wave.w2{
 width:62px;
 height:62px;
 top:24px;
 animation-delay:.18s;
}

.twz11-wave.w3{
 width:35px;
 height:35px;
 top:38px;
 animation-delay:.36s;
}

.twz11-dot{
 position:absolute;
 width:12px;
 height:12px;
 border-radius:50%;
 background:#fff;
 bottom:4px;
 box-shadow:0 0 18px #b9f2ff;
}

.twz11-visual h2{
 color:white;
 font-size:17px;
 margin:0 0 6px;
}

.twz11-visual p{
 font-size:12px;
 margin:0;
 color:#d9eaff;
}

.twz11-perks{
 display:flex;
 justify-content:center;
 gap:7px;
 margin-top:16px;
 flex-wrap:wrap;
}

.twz11-perks span{
 background:#ffffff17;
 border:1px solid #ffffff25;
 color:white;
 font-size:10px;
 padding:7px 10px;
 border-radius:99px;
 font-weight:750;
}

/* Login form card */
.twz11-form-card{
 background:white;
 border:1px solid #e4ebf6;
 border-radius:23px;
 padding:22px 19px;
 box-shadow:0 9px 30px #193f780d;
}

.twz11-form-card h2{
 margin:0 0 5px;
 font-size:21px;
 color:#122e54;
}

.twz11-form-card>p{
 font-size:12px;
 color:#74859c;
 margin:0 0 19px;
}

.twz11-field-label{
 display:block;
 color:#243e5f;
 font-size:13px;
 font-weight:800;
 margin:0 0 8px;
}

.twz11-input-wrap{
 display:flex;
 align-items:center;
 gap:10px;
 border:1.5px solid #dce5f3;
 background:#f8fbff;
 border-radius:14px;
 padding:0 12px;
 transition:border .2s,box-shadow .2s;
}

.twz11-input-wrap:focus-within{
 border-color:#1a76ee;
 box-shadow:0 0 0 4px #1875e911;
}

.twz11-input-icon{
 font-size:20px;
 color:#2e78d4;
}

.twz11-input-wrap input{
 border:0!important;
 box-shadow:none!important;
 background:transparent!important;
 font-size:16px!important;
 min-width:0;
 width:100%;
 padding:15px 0!important;
 outline:none!important;
 margin:0!important;
}

.twz11-login-btn{
 position:relative;
 width:100%;
 border:none;
 border-radius:14px;
 min-height:51px;
 margin-top:15px;
 padding:14px;
 background:linear-gradient(110deg,#0753cd,#087ff4);
 color:white;
 font-size:16px;
 font-weight:850;
 box-shadow:0 8px 20px #075ed52c;
 transition:transform .18s;
}

.twz11-login-btn:active{
 transform:scale(.98);
}

.twz11-login-btn:disabled{
 opacity:.65;
}

.twz11-hint{
 display:flex;
 justify-content:center;
 align-items:center;
 gap:7px;
 font-size:11px;
 color:#8292a8;
 margin-top:14px;
 text-align:center;
}

.twz11-admin{
 margin-top:15px;
 padding-top:13px;
 border-top:1px solid #e9edf5;
 display:flex;
 justify-content:center;
}

.twz11-admin button{
 background:transparent!important;
 color:#1262cc!important;
 font-size:12px;
 padding:6px 10px;
 font-weight:750;
}

.twz11-footer{
 text-align:center;
 color:#90a0b3;
 font-size:11px;
 margin:0;
}

@keyframes twz11Signal{
 0%,100%{opacity:.45;filter:brightness(1)}
 50%{opacity:1;filter:brightness(1.5)}
}

@keyframes twz11Float{
 from{transform:translate(0,0)}
 to{transform:translate(-20px,25px)}
}

@media(max-height:740px){
 .twz-login-v11{
  justify-content:flex-start;
  padding-top:14px;
 }
 .twz11-visual{
  padding:18px 16px;
 }
 .twz11-form-card{
  padding:17px;
 }
}

@media(prefers-reduced-motion:reduce){
 .twz11-wave,
 .twz11-visual::before{
  animation:none;
 }
}

/* Existing login card integration */

.twz-login-v11 .twz11-form-card{
 width:100%;
 max-width:100%;
 margin:0;
}

.twz-login-v11 .twz11-form-card input{
 box-sizing:border-box;
}

.twz-login-v11 .twz11-form-card button{
 max-width:100%;
}

.twz-login-v11 .twz11-admin-link{
 display:block;
 margin:13px auto 0!important;
 width:auto!important;
 background:#edf4ff!important;
 color:#115bbf!important;
 font-size:12px!important;
 border-radius:11px;
 padding:9px 14px!important;
 box-shadow:none!important;
}

.twz-login-v11 .twz11-footer{
 margin:2px auto 0;
}

.twz-login-v11 .twz11-visual{
 flex:none;
}

@media(max-width:480px){
 .twz-login-v11{
  width:100%;
  gap:13px;
 }
 .twz11-visual{
  border-radius:22px;
 }
 .twz11-form-card{
  border-radius:19px;
 }
}