/* =======================================================
   YOUTH OF BIHAR - ULTRA PREMIUM MEMBERSHIP & QR CODE CSS
======================================================= */

.yob-membership-full-section{
padding:70px 20px;
background:linear-gradient(180deg,#f4f7fb 0%,#f8fafc 100%);
font-family:'Poppins',-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;
color:#1e293b;
position:relative;
overflow:hidden;
box-sizing:border-box;
}

.yob-membership-container{
max-width:1200px;
margin:0 auto;
box-sizing:border-box;
}

/* SECTION HEADER */

.yob-section-header{
text-align:center;
margin-bottom:45px;
}

.yob-badge-tag{
display:inline-block;
padding:7px 20px;
background:rgba(37,99,235,.10);
border-radius:50px;
color:#2563eb;
font-weight:700;
font-size:13px;
letter-spacing:1px;
text-transform:uppercase;
margin-bottom:12px;
}

.yob-section-header h2{
font-size:40px;
font-weight:800;
color:#0d3b8c;
margin:0 0 10px;
letter-spacing:-0.5px;
line-height:1.25;
}

.yob-section-header p{
max-width:760px;
margin:0 auto;
font-size:15.5px;
line-height:1.8;
color:#64748b;
}

/* GRID LAYOUT */

.yob-membership-grid{
display:grid;
grid-template-columns:minmax(320px,1fr) minmax(400px,1.25fr);
gap:35px;
align-items:start;
}

/* LEFT: QR CODE CARD */

.yob-qr-box{
background:#ffffff;
border:1.5px solid #e2e8f0;
border-radius:24px;
padding:38px 28px;
text-align:center;
box-shadow:0 15px 40px rgba(13,59,140,.06);
box-sizing:border-box;
}

.yob-badge-qr{
display:inline-block;
padding:5px 14px;
background:#fef3c7;
color:#b45309;
border-radius:50px;
font-size:11px;
font-weight:800;
letter-spacing:1px;
margin-bottom:12px;
text-transform:uppercase;
}

.yob-qr-header h4{
font-size:22px;
font-weight:800;
color:#0d3b8c;
margin:0 0 6px;
}

.yob-qr-header p{
font-size:13.5px;
line-height:1.6;
color:#64748b;
margin:0 0 20px;
}

.yob-qr-code-holder{
display:inline-flex;
padding:16px;
background:#ffffff;
border-radius:20px;
box-shadow:0 8px 25px rgba(13,59,140,.08);
border:2px solid #e2e8f0;
margin-bottom:18px;
}

.yob-qr-code-holder canvas,
.yob-qr-code-holder img{
display:block !important;
border-radius:8px;
margin:0 auto;
max-width:100%;
height:auto;
}

.yob-qr-url-badge{
background:#f8fafc;
padding:10px 14px;
border-radius:12px;
margin-bottom:22px;
font-size:12.5px;
color:#0d3b8c;
font-weight:600;
word-break:break-all;
border:1px dashed #cbd5e1;
}

.yob-qr-steps{
display:flex;
flex-direction:column;
gap:10px;
text-align:left;
margin-bottom:24px;
padding:0 6px;
}

.yob-step-item{
display:flex;
align-items:center;
gap:12px;
font-size:13.5px;
color:#334155;
font-weight:600;
}

.yob-step-num{
width:28px;
height:28px;
background:linear-gradient(135deg,#0d3b8c,#2563eb);
color:#ffffff !important;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:12px;
font-weight:800;
flex-shrink:0;
box-shadow:0 3px 8px rgba(37,99,235,.25);
}

.yob-qr-direct-link{
display:inline-block;
padding:11px 26px;
background:#f1f5f9;
color:#0d3b8c !important;
border:1px solid #cbd5e1;
border-radius:50px;
font-size:13.5px;
font-weight:700;
text-decoration:none !important;
transition:all .3s ease;
}

.yob-qr-direct-link:hover{
background:linear-gradient(135deg,#0d3b8c,#2563eb);
color:#ffffff !important;
border-color:transparent;
box-shadow:0 6px 18px rgba(37,99,235,.25);
transform:translateY(-2px);
}

/* =======================================================
   RIGHT: FORM WRAPPER (PREMIUM MODERN CARD)
======================================================= */

.yob-form-page-container{
width:100%;
padding:50px 16px;
box-sizing:border-box;
display:flex;
justify-content:center;
align-items:flex-start;
background:linear-gradient(180deg,#f8fbff 0%,#ffffff 100%);
min-height:500px;
}

.yob-form-wrapper{
background:#ffffff;
border:1.5px solid #e2e8f0;
border-radius:24px;
padding:42px 38px;
box-shadow:0 20px 50px rgba(13,59,140,.08);
position:relative;
box-sizing:border-box;
max-width:620px;
width:100%;
margin:0 auto;
}

.yob-form-header{
margin-bottom:28px;
border-bottom:1px solid #f1f5f9;
padding-bottom:18px;
}

.yob-form-badge{
display:inline-block;
padding:5px 14px;
background:rgba(37,99,235,.10);
color:#2563eb;
border-radius:50px;
font-size:11.5px;
font-weight:800;
letter-spacing:0.8px;
text-transform:uppercase;
margin-bottom:10px;
}

.yob-form-header h3{
font-size:26px;
font-weight:800;
color:#0d3b8c;
margin:0 0 6px;
line-height:1.3;
}

.yob-form-header p{
font-size:14px;
color:#64748b;
line-height:1.6;
margin:0;
}

/* FORM FIELDS WITH SEPARATE ICON BOX */

.yob-input-group{
margin-bottom:20px;
text-align:left;
}

.yob-input-group label{
display:block;
font-size:13.5px;
font-weight:700;
color:#1e293b;
margin-bottom:7px;
}

.yob-req{
color:#ef4444;
font-weight:800;
margin-left:2px;
}

/* THE INPUT CONTAINER (AVOIDS ANY OVERLAPPING) */

.yob-input-box{
display:flex !important;
align-items:center !important;
background:#f8fafc !important;
border:1.5px solid #cbd5e1 !important;
border-radius:14px !important;
transition:all .25s ease !important;
box-sizing:border-box !important;
overflow:hidden !important;
position:relative !important;
}

.yob-input-box:focus-within{
border-color:#2563eb !important;
background:#ffffff !important;
box-shadow:0 0 0 4px rgba(37,99,235,.14) !important;
}

/* ICON CONTAINER - FIXED WIDTH, CAN NEVER OVERLAP TEXT */

.yob-icon-col{
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:46px !important;
height:50px !important;
color:#2563eb !important;
flex-shrink:0 !important;
background:transparent !important;
}

.yob-icon-col svg{
width:20px !important;
height:20px !important;
display:block !important;
stroke:#2563eb !important;
}

/* MOBILE PREFIX PILL */

.yob-prefix-pill{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
background:#e2e8f0 !important;
color:#0d3b8c !important;
font-size:13.5px !important;
font-weight:700 !important;
padding:6px 12px !important;
border-radius:8px !important;
margin-right:10px !important;
flex-shrink:0 !important;
letter-spacing:.5px !important;
}

/* INPUT / SELECT OVERRIDES - CLEANS THEME DEFAULTS */

.yob-input-box input,
.yob-input-box select{
flex:1 1 auto !important;
width:100% !important;
height:50px !important;
padding:12px 14px 12px 0 !important;
margin:0 !important;
border:none !important;
outline:none !important;
background:transparent !important;
box-shadow:none !important;
font-family:'Poppins',sans-serif !important;
font-size:15px !important;
color:#1e293b !important;
font-weight:500 !important;
box-sizing:border-box !important;
line-height:1.5 !important;
}

.yob-input-box input::placeholder{
color:#94a3b8 !important;
font-weight:400 !important;
opacity:1 !important;
}

.yob-input-box select{
padding-right:35px !important;
cursor:pointer !important;
-webkit-appearance:none !important;
-moz-appearance:none !important;
appearance:none !important;
}

/* SELECT ARROW */

.yob-select-arrow{
position:absolute !important;
right:16px !important;
pointer-events:none !important;
color:#64748b !important;
display:flex !important;
align-items:center !important;
}

.yob-select-arrow svg{
width:16px !important;
height:16px !important;
stroke:#64748b !important;
}

.yob-field-hint{
display:block;
margin-top:6px;
font-size:12px;
color:#64748b;
}

/* ALERT BOX */

.yob-form-msg{
padding:14px 18px;
border-radius:12px;
font-size:14px;
line-height:1.5;
margin-bottom:18px;
font-weight:600;
text-align:left;
}

.yob-form-msg.yob-error{
background:#fef2f2 !important;
color:#b91c1c !important;
border:1.5px solid #fecaca !important;
}

.yob-form-msg.yob-success{
background:#f0fdf4 !important;
color:#15803d !important;
border:1.5px solid #bbf7d0 !important;
}

/* =======================================================
   SUBMIT BUTTON (GUARANTEED WHITE TEXT & LUXURY GRADIENT)
======================================================= */

.yob-btn-submit{
width:100% !important;
padding:16px 28px !important;
background:linear-gradient(135deg,#0d3b8c 0%,#2563eb 100%) !important;
border:none !important;
outline:none !important;
border-radius:50px !important;
cursor:pointer !important;
transition:all .3s ease !important;
box-shadow:0 12px 28px rgba(37,99,235,.30) !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
margin-top:10px !important;
}

.yob-btn-submit:hover{
transform:translateY(-2px) !important;
box-shadow:0 16px 36px rgba(37,99,235,.40) !important;
background:linear-gradient(135deg,#0b3277 0%,#1d4ed8 100%) !important;
}

.yob-btn-submit:active{
transform:translateY(0) !important;
}

.yob-btn-submit:disabled{
opacity:.75 !important;
cursor:not-allowed !important;
transform:none !important;
}

/* ENFORCE WHITE TEXT (OVERCOMING THEME RED OVERRIDES) */

.yob-btn-submit,
.yob-btn-submit *,
.yob-btn-text,
.yob-btn-loader{
color:#ffffff !important;
font-size:16px !important;
font-weight:700 !important;
letter-spacing:.3px !important;
font-family:'Poppins',sans-serif !important;
text-decoration:none !important;
line-height:1.2 !important;
}

.yob-privacy-note{
text-align:center;
font-size:12px;
color:#64748b;
margin:16px 0 0;
}

/* SPINNER */

.yob-spinner{
animation:yob-rotate 1.2s linear infinite;
width:18px;
height:18px;
margin-right:8px;
vertical-align:middle;
}

.yob-spinner .path{
stroke:#ffffff !important;
stroke-linecap:round;
animation:yob-dash 1.5s ease-in-out infinite;
}

@keyframes yob-rotate{
100%{transform:rotate(360deg);}
}

@keyframes yob-dash{
0%{stroke-dasharray:1,150;stroke-dashoffset:0;}
50%{stroke-dasharray:90,150;stroke-dashoffset:-35;}
100%{stroke-dasharray:90,150;stroke-dashoffset:-124;}
}

/* =======================================================
   SUCCESS CARD (DIGITAL MEMBERSHIP BADGE)
======================================================= */

.yob-success-card{
text-align:center;
padding:15px 5px;
}

.yob-success-icon{
width:70px;
height:70px;
background:linear-gradient(135deg,#16a34a,#22c55e);
color:#ffffff !important;
font-size:34px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
margin:0 auto 16px;
box-shadow:0 10px 25px rgba(22,163,74,.30);
}

.yob-success-card h3{
font-size:24px;
color:#0d3b8c;
margin:0 0 6px;
font-weight:800;
}

.yob-success-msg{
font-size:14px;
color:#15803d;
margin:0 0 22px;
font-weight:600;
}

.yob-member-badge-card{
background:linear-gradient(135deg,#0d3b8c,#2563eb);
color:#ffffff !important;
border-radius:18px;
padding:24px 26px;
text-align:left;
box-shadow:0 15px 35px rgba(13,59,140,.25);
margin-bottom:22px;
position:relative;
overflow:hidden;
}

.yob-member-badge-card:before{
content:'';
position:absolute;
width:150px;
height:150px;
background:rgba(255,255,255,.08);
border-radius:50%;
right:-40px;
top:-40px;
}

.yob-badge-header{
border-bottom:1px solid rgba(255,255,255,.2);
padding-bottom:10px;
margin-bottom:14px;
font-size:12px;
font-weight:800;
letter-spacing:1px;
text-transform:uppercase;
color:#fef08a !important;
}

.yob-badge-row{
font-size:14.5px;
line-height:2;
color:rgba(255,255,255,.95) !important;
}

.yob-badge-row strong{
display:inline-block;
width:95px;
color:#ffffff !important;
}

.yob-id-highlight{
background:#fef08a;
color:#0d3b8c !important;
font-weight:800;
padding:3px 10px;
border-radius:6px;
letter-spacing:1px;
}

.yob-btn-again{
padding:12px 28px;
background:#f1f5f9;
color:#0d3b8c !important;
border:1px solid #cbd5e1;
border-radius:50px;
font-size:13.5px;
font-weight:700;
cursor:pointer;
transition:.3s;
font-family:'Poppins',sans-serif;
}

.yob-btn-again:hover{
background:#0d3b8c;
color:#ffffff !important;
border-color:#0d3b8c;
}

/* RESPONSIVE */

@media(max-width:991px){
.yob-membership-grid{
grid-template-columns:1fr;
gap:30px;
}
.yob-section-header h2{
font-size:32px;
}
.yob-form-wrapper{
max-width:100%;
}
}

@media(max-width:768px){
.yob-membership-full-section{
padding:45px 12px;
}
.yob-section-header h2{
font-size:24px;
}
.yob-section-header p{
font-size:13.5px;
}
.yob-qr-box,
.yob-form-wrapper{
padding:26px 18px;
border-radius:20px;
}
.yob-form-header h3{
font-size:21px;
}
.yob-input-box input,
.yob-input-box select{
font-size:14px !important;
height:46px !important;
}
.yob-icon-col{
width:40px !important;
height:46px !important;
}
.yob-btn-submit,
.yob-btn-submit *{
font-size:15px !important;
padding:14px 20px !important;
}
}