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

*{
box-sizing:border-box;
}

body{
margin:0;
font-family:"Plus Jakarta Sans","Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial;
background:#f7f8fc;
color:#111827;
-webkit-font-smoothing:antialiased;
}


/* =========================
   LAYOUT
========================= */

.signup-wrapper{
display:flex;
min-height:100vh;
}


/* =========================
   LEFT BRAND SIDE
========================= */

.signup-brand{
flex:1;
background:
linear-gradient(135deg,#ff9b28 0%,#ff6a00 40%,#ff3b3b 100%);
color:#fff;
display:flex;
align-items:center;
justify-content:center;
padding:40px;
}

.brand-box{
max-width:420px;
}

.brand-logo{
font-weight:800;
font-size:26px;
margin-bottom:24px;
letter-spacing:.3px;
}

.brand-box h1{
font-size:36px;
line-height:1.25;
margin:0 0 14px;
font-weight:800;
}

.brand-box p{
opacity:.95;
font-size:15px;
line-height:1.7;
max-width:360px;
}


/* =========================
   RIGHT SIDE
========================= */

.signup-container{
flex:1;
display:flex;
align-items:center;
justify-content:center;
background:#ffffff;
padding:40px 20px;
}

.signup-form{
width:100%;
max-width:400px;
}


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

.form-header{
margin-bottom:22px;
}

.signup-form h2{
margin:0;
font-size:26px;
font-weight:800;
letter-spacing:.2px;
}

.signup-sub{
margin-top:6px;
color:#6b7280;
font-size:14px;
}


/* =========================
   GOOGLE BUTTON
========================= */

.google-btn{
width:100%;
padding:13px 14px;
border-radius:14px;
border:1px solid rgba(0,0,0,.08);
background:#fff;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
cursor:pointer;
font-weight:600;
font-size:14px;
transition:.2s;
box-shadow:0 8px 20px rgba(0,0,0,.04);
margin-bottom:10px;
}

.google-btn:hover{
transform:translateY(-1px);
box-shadow:0 14px 30px rgba(0,0,0,.08);
}

.google-btn img{
width:18px;
}


/* =========================
   APPLE BUTTON
========================= */

.apple-btn{
width:100%;
padding:13px 14px;
border-radius:14px;
border:1px solid rgba(0,0,0,.08);
background:#000;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
cursor:pointer;
font-weight:600;
font-size:14px;
transition:.2s;
box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.apple-btn:hover{
transform:translateY(-1px);
box-shadow:0 14px 30px rgba(0,0,0,.15);
background:#111;
}

.apple-logo{
font-size:16px;
display:flex;
align-items:center;
}


/* =========================
   DIVIDER
========================= */

.divider{
text-align:center;
margin:20px 0;
position:relative;
}

.divider::before{
content:"";
position:absolute;
left:0;
right:0;
top:50%;
height:1px;
background:#e5e7eb;
}

.divider span{
background:#fff;
padding:0 12px;
font-size:12px;
color:#9ca3af;
font-weight:600;
position:relative;
}


/* =========================
   INPUT GROUP
========================= */

.input-group{
margin-bottom:16px;
}

.input-group input{
width:100%;
padding:13px 14px;
border-radius:14px;
border:1px solid transparent;
font-size:14px;
font-weight:500;
transition:.25s ease;
background:#f9fafb;
color:#111827;
}

.input-group input::placeholder{
color:#9ca3af;
font-weight:500;
}

.input-group input:hover{
background:#ffffff;
border-color:#e5e7eb;
}

.input-group input:focus{
outline:none;
background:#ffffff;
border-color:#ff9b28;
box-shadow:
0 0 0 4px rgba(255,155,40,.12),
0 8px 20px rgba(0,0,0,.05);
transform:translateY(-1px);
}


/* =========================
   PASSWORD
========================= */

.password-box{
position:relative;
}

.toggle-password{
position:absolute;
right:14px;
top:50%;
transform:translateY(-50%);
cursor:pointer;
opacity:.6;
font-size:14px;
}

.toggle-password:hover{
opacity:1;
}


/* =========================
   SUBMIT BUTTON
========================= */

.signup-btn{
width:100%;
padding:15px;
margin-top:10px;
background:linear-gradient(135deg,#ff9b28,#ff3b3b);
color:#fff;
border:none;
border-radius:16px;
font-weight:800;
font-size:15px;
cursor:pointer;
transition:.2s;
box-shadow:0 14px 30px rgba(255,120,0,.25);
position:relative;
overflow:hidden;
}

.signup-btn:hover{
transform:translateY(-1px);
box-shadow:0 18px 40px rgba(255,120,0,.35);
}

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

.signup-btn::after{
content:"";
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.4),
transparent
);
transition:.6s;
}

.signup-btn:hover::after{
left:100%;
}


/* =========================
   LOGIN LINK
========================= */

.login-link{
margin-top:18px;
text-align:center;
color:#6b7280;
font-size:14px;
}

.login-link a{
color:#ff7a00;
font-weight:700;
text-decoration:none;
margin-left:4px;
}

.login-link a:hover{
text-decoration:underline;
}


/* =========================
   POLICY
========================= */

.signup-policy{
font-size:13px;
color:#6b7280;
text-align:center;
margin:10px 0 16px;
}

.signup-policy a{
color:#ff7a00;
font-weight:600;
text-decoration:none;
}

.signup-policy a:hover{
text-decoration:underline;
}


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

@media(max-width:900px){

.signup-brand{
display:none;
}

.signup-container{
padding:30px 18px;
}

.signup-form{
max-width:420px;
}

}