/* ==========================================================
   FORMS
   SovereignAqua Research & Development Foundation
========================================================== */

form{

display:flex;
flex-direction:column;
gap:20px;

}

.form-group{

display:flex;
flex-direction:column;
gap:8px;

}

label{

font-weight:600;

color:var(--text-light);

}

input,
select,
textarea{

width:100%;

padding:15px 18px;

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

border:1px solid rgba(255,255,255,.12);

border-radius:12px;

font-size:1rem;

font-family:inherit;

color:var(--text-light);

transition:all .3s ease;

}

textarea{

resize:vertical;

min-height:160px;

}

input::placeholder,
textarea::placeholder{

color:rgba(255,255,255,.55);

}

input:focus,
select:focus,
textarea:focus{

outline:none;

border-color:var(--primary);

box-shadow:0 0 0 4px rgba(0,207,255,.18);

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

}

input:valid,
textarea:valid{

border-color:#22c55e;

}

input:invalid:focus,
textarea:invalid:focus{

border-color:#ef4444;

}

input[type="file"]{

padding:12px;

cursor:pointer;

}

.form-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:20px;

}

.form-grid-full{

grid-column:1/-1;

}

.checkbox-group,
.radio-group{

display:flex;

align-items:center;

gap:10px;

}

.checkbox-group input,
.radio-group input{

width:auto;

}

.form-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:20px;

}

.form-grid-full{

grid-column:1/-1;

}

.form-success{

padding:15px;

background:#16a34a;

color:white;

border-radius:10px;

}

.form-error{

padding:15px;

background:#dc2626;

color:white;

border-radius:10px;

}

form .button{

align-self:flex-start;

}

@media(max-width:768px){

.form-grid{

grid-template-columns:1fr;

}

form .button{

width:100%;

}

}