/* =====================================
   POLICY PARTNERS FRANCHISE APPLICATION
====================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root{
    --primary:#0d6efd;
    --secondary:#198754;
    --light:#f8f9fa;
    --border:#e9ecef;
    --text:#343a40;
    --muted:#6c757d;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

body{
    min-height:100vh;
    background:linear-gradient(-45deg,#0d6efd,#20c997,#4dabf7,#198754);
    background-size:400% 400%;
    animation:gradientMove 15s ease infinite;
    overflow-x:hidden;
    position:relative;
}

@keyframes gradientMove{

0%{
background-position:0% 50%;
}

50%{
background-position:100% 50%;
}

100%{
background-position:0% 50%;
}

}


/* =======================
Floating Background
======================= */

.background-animation::before,
.background-animation::after{

content:"";
position:fixed;
border-radius:50%;
filter:blur(90px);
z-index:-1;
opacity:.30;

}

.background-animation::before{

width:350px;
height:350px;

background:#ffffff;

top:-80px;
left:-80px;

animation:float1 14s infinite;

}

.background-animation::after{

width:420px;
height:420px;

background:#4dabf7;

bottom:-120px;
right:-120px;

animation:float2 18s infinite;

}

@keyframes float1{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(80px);
}

100%{
transform:translateY(0px);
}

}

@keyframes float2{

0%{
transform:translateX(0px);
}

50%{
transform:translateX(-80px);
}

100%{
transform:translateX(0px);
}

}


/* ==========================
Glass Card
========================== */

.glass-card{

background:rgba(255,255,255,.92);

backdrop-filter:blur(20px);

border:none;

box-shadow:0 25px 60px rgba(0,0,0,.18);

}


/* =====================
Heading
===================== */

h2{

font-weight:700;

color:var(--text);

}

.text-muted{

font-size:15px;

}


/* ======================
Wizard
====================== */

.wizard{

position:relative;

margin-bottom:50px;

}

.wizard-progress{

position:absolute;

width:100%;

top:25px;

left:0;

height:5px;

}

.progress-line{

height:5px;

background:#dee2e6;

border-radius:20px;

}

.progress-fill{

position:absolute;

top:0;

left:0;

height:5px;

width:0;

background:linear-gradient(90deg,#0d6efd,#20c997);

border-radius:20px;

transition:.4s;

}

.wizard-steps{

display:flex;

justify-content:space-between;

position:relative;

}

.step{

display:flex;

flex-direction:column;

align-items:center;

cursor:pointer;

}

.step span{

width:50px;

height:50px;

border-radius:50%;

background:#dee2e6;

display:flex;

align-items:center;

justify-content:center;

font-weight:700;

transition:.3s;

font-size:18px;

}

.step.active span{

background:#0d6efd;

color:#fff;

transform:scale(1.1);

box-shadow:0 10px 25px rgba(13,110,253,.4);

}

.step.completed span{

background:#198754;

color:#fff;

}

.step small{

margin-top:10px;

font-weight:600;

color:#555;

}


/* ======================
Step Content
====================== */

.step-content{

display:none;

animation:fadeSlide .5s ease;

}

.step-content.active{

display:block;

}

@keyframes fadeSlide{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:translateY(0);

}

}


/* ======================
Inputs
====================== */

.form-control,
.form-select{

height:52px;

border-radius:12px;

border:1px solid var(--border);

padding-left:15px;

}

textarea.form-control{

height:auto;

}

.form-control:focus{

border-color:#0d6efd;

box-shadow:0 0 0 .2rem rgba(13,110,253,.15);

}

label{

font-weight:600;

margin-bottom:8px;

}


/* ======================
Upload Box
====================== */

.upload-box{

position:relative;

border:2px dashed #cfd8dc;

border-radius:18px;

padding:30px;

text-align:center;

background:#fafafa;

transition:.35s;

cursor:pointer;

overflow:hidden;

}

.upload-box:hover{

border-color:#0d6efd;

background:#f2f8ff;

}

.upload-box input{

position:absolute;

width:100%;

height:100%;

left:0;

top:0;

opacity:0;

cursor:pointer;

}

.upload-placeholder i{

font-size:45px;

color:#0d6efd;

margin-bottom:15px;

}

.upload-placeholder p{

margin:0;

color:#6c757d;

}

.upload-box img{

display:none;

max-width:100%;

max-height:250px;

border-radius:15px;

margin:auto;

}


/* ======================
Buttons
====================== */

.btn{

border-radius:12px;

font-weight:600;

padding:12px 25px;

transition:.3s;

}

.btn-primary{

background:linear-gradient(135deg,#0d6efd,#0b5ed7);

border:none;

}

.btn-primary:hover{

transform:translateY(-2px);

box-shadow:0 12px 25px rgba(13,110,253,.35);

}

.btn-success{

background:linear-gradient(135deg,#198754,#20c997);

border:none;

}

.btn-success:hover{

transform:translateY(-2px);

box-shadow:0 12px 25px rgba(25,135,84,.35);

}


/* ======================
Review Card
====================== */

#reviewSection{

background:#f8f9fa;

border-radius:15px;

padding:25px;

border:1px solid #dee2e6;

}

.review-item{

display:flex;

justify-content:space-between;

padding:12px 0;

border-bottom:1px solid #eee;

}

.review-item:last-child{

border:none;

}


/* ======================
Alert
====================== */

.alert{

border-radius:15px;

}


/* ======================
Responsive
====================== */

@media(max-width:992px){

.card-body{

padding:30px !important;

}

.step small{

font-size:12px;

}

.step span{

width:42px;

height:42px;

}

}

@media(max-width:768px){

.wizard-steps{

flex-wrap:wrap;

gap:15px;

justify-content:center;

}

.progress-line,
.progress-fill{

display:none;

}

.card-body{

padding:20px !important;

}

h2{

font-size:28px;

}

}

@media(max-width:576px){

.btn{

width:100%;
margin-bottom:10px;
}

.d-flex.justify-content-between{

flex-direction:column;

}

}