/* =============================
GLOBAL
============================= */

body{
font-family:Arial,"Segoe UI",sans-serif;
margin:0;
background:#f4f6f9;
color:#333;
line-height:1.6;
}

.container{
max-width:1000px;
margin:auto;
padding:20px;
}

/* =============================
HEADER
============================= */

header{
background:#0070f3;
color:white;
text-align:center;
padding:25px 15px 30px;
border-radius:16px 16px 0 0;
}

header img{
height:60px;
width:auto;
border-radius:8px;
background-color:white;
padding:5px 8px;
box-shadow:0 2px 8px rgba(255,255,255,0.2);
margin-bottom:10px;
}

header h1{
margin:0;
font-size:28px;
color:white;
}

/* =============================
FOOTER
============================= */

footer{
background:#0070f3;
color:#ffffff;
text-align:center;
padding:18px 10px 22px;
font-size:14px;
border-radius:0 0 12px 12px;
margin-top:40px;
}

footer a{
color:#ffffff;
text-decoration:none;
margin:0 6px;
}

footer a:hover{
color:#cce5ff;
}

footer p{
color:#ffffff;
margin:5px 0;
}

/* =============================
CARDS
============================= */

.card{
background:#ffffff;
padding:25px;
margin-bottom:25px;
border-radius:8px;
box-shadow:0 2px 6px rgba(0,0,0,0.08);
}

.header-card{
background:#0070f3;
color:white;
}

.box{
max-width:500px;
margin:80px auto;
background:#ffffff;
padding:35px;
border-radius:12px;
box-shadow:0 4px 14px rgba(0,0,0,0.15);
}

/* =============================
HEADINGS
============================= */

h1{
color:#0070f3;
margin-top:0;
}

h2{
color:#0070f3;
}

h3{
margin-top:25px;
}

/* =============================
HERO
============================= */

.hero{
text-align:center;
text-decoration:underline;
}

.hero h1{
margin:10px 0 15px 0;
font-size:28px;
}

/* =============================
BUTTONS
============================= */

.buttons{
display:flex;
justify-content:center;
gap:15px;
flex-wrap:wrap;
}

.btn{
padding:12px 22px;
border-radius:6px;
text-decoration:none;
font-weight:bold;
}

.primary{
background:#138808;
color:#ffffff;
}

.secondary{
background:#0c85d0;
color:white;
}

.button{
display:inline-block;
background:#0070f3;
color:white;
padding:14px 25px;
border:none;
border-radius:6px;
font-weight:bold;
cursor:pointer;
}

.button:disabled{
background:#9bbcd3;
color:#ffffff !important;
cursor:not-allowed;
}

.button.small-btn{
width:auto;
padding:12px 30px;
display:block;
margin:20px auto;
color:#ffffff !important;
}

.popup-buttons{
display:flex;
justify-content:center;
gap:10px;
margin-top:15px;
}

.popup-cancel{
background:#ff9933;
border:none;
padding:10px 16px;
border-radius:6px;
cursor:pointer;
margin-right:10px;
}

.popup-continue{
background:#138808;
color:white;
border:none;
padding:10px 16px;
border-radius:6px;
cursor:pointer;
}

/* =============================
WHATSAPP BUTTON
============================= */

.whatsapp-btn{
display:inline-block;
margin-top:20px;
padding:14px 22px;
background:#25D366;
color:white;
font-weight:600;
text-decoration:none;
border-radius:8px;
font-size:16px;
}

.whatsapp-btn:hover{
background:#1ebe5d;
}

/* =============================
FORM
============================= */

.form-body{
padding:25px 30px;
}

label{
font-weight:600;
display:block;
margin-top:15px;
}

input, select{
width:100%;
padding:10px;
border:1px solid #ccc;
border-radius:8px;
margin-top:5px;
font-size:15px;
box-sizing:border-box;
}

input:focus, select:focus{
outline:none;
border-color:#0070f3;
}

button{
width:100%;
background:#0070f3;
color:white;
border:none;
padding:14px;
font-size:16px;
border-radius:8px;
margin-top:25px;
cursor:pointer;
transition:0.3s;
}

button:hover{
background:#005bd1;
}

/* =============================
GRID
============================= */

.grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
}

/* =============================
PROCESS STEPS
============================= */

.steps{
display:flex;
justify-content:space-between;
flex-wrap:wrap;
margin-top:25px;
text-align:center;
position:relative;
}

/* Horizontal line connecting steps */

.steps::before{
content:"";
position:absolute;
top:48px;
left:7%;
right:7%;
height:4px;
background:#b8c2d1;
z-index:0;
}

.step{
flex:1;
min-width:140px;
margin-bottom:20px;
}

.step-title{
font-size:13px;
color:#1DA1F2;
font-weight:bold;
margin-bottom:6px;
}

.circle{
width:45px;
height:45px;
border-radius:50%;
background:#1DA1F2;
color:white;
display:flex;
align-items:center;
justify-content:center;
font-weight:bold;
margin:0 auto 8px auto;
position:relative;
z-index:1;
}

.user-circle{
width:45px;
height:45px;
border-radius:50%;
background:#FF9933;
color:white;
display:flex;
align-items:center;
justify-content:center;
font-weight:bold;
margin:0 auto 8px auto;
position:relative;
z-index:1;
}

.step p{
margin:0;
font-size:14px;
}

.legend{
display:flex;
justify-content:center;
gap:25px;
margin-bottom:15px;
}

.legend-item{
display:flex;
align-items:center;
gap:6px;
font-size:14px;
}

.legend-circle{
width:12px;
height:12px;
border-radius:50%;
display:inline-block;
}

.legend-user{
background:#FF9933;
}

.legend-service{
background:#1DA1F2;
}

/* =============================
NOTICE
============================= */

.notice{
background:#fff7e6;
border-left:5px solid #ffa500;
padding:15px;
margin-top:15px;
}

.note{
margin-top:15px;
font-size:14px;
color:#444;
}

/* =============================
ACKNOWLEDGEMENT
============================= */

.ack-box{
background:#eef6ff;
border:2px solid #1DA1F2;
padding:15px;
border-radius:8px;
margin:20px auto;
max-width:600px;
}

.ack-label{
display:flex;
align-items:flex-start;
gap:12px;
font-size:16px;
line-height:1.5;
cursor:pointer;
}

.ack-check{
width:22px;
height:22px;
cursor:pointer;
margin-top:3px;
}

.ack-confirmed{
border-color:#28a745;
background:#e9f7ef;
}

#proceedBtn{
display:inline-block;
color:#046A38;
margin:15px auto 0 auto;
}

/* =============================
RESPONSIVE
============================= */

@media(max-width:700px){

.grid{
grid-template-columns:1fr;
}

.form-body{
padding:20px;
}

label{
display:block;
width:100%;
}

input,
select,
button{
width:100%;
display:block;
box-sizing:border-box;
}

form{
width:100%;
}

footer{
width:100%;
box-sizing:border-box;
}

}

/* =============================
MOBILE LOGO
============================= */

@media (max-width:600px){

header img{
height:40px;
}

}

/* =============================
HORIZONTAL_LINE
============================= */

@media (max-width:700px){

.steps::before{
display:none;
}

}