/* ==========================================================
   BabyChoice Nappies
   FORMS CSS
========================================================== */


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


.form-wrapper {


background:white;


padding:40px;


border-radius:var(--radius-lg);


box-shadow:

0 10px 30px rgba(0,0,0,.06);


}



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


.form-wrapper h2 {


font-size:32px;


margin-bottom:15px;


}



.form-wrapper p {


color:var(--ink-soft);


margin-bottom:30px;


}



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


.form-field {


margin-bottom:20px;


}



.form-field label {


display:block;


font-weight:800;


margin-bottom:8px;


}




/* ===============================
   INPUTS
================================ */


.form-field input,
.form-field textarea,
.form-field select {


width:100%;


padding:14px 18px;


border-radius:var(--radius-sm);


border:2px solid #F1E0E6;


font-family:'Quicksand',sans-serif;


font-size:15px;


background:white;


color:var(--ink);


transition:.25s;


}



.form-field textarea {


min-height:140px;


resize:vertical;


}




.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {


outline:none;


border-color:var(--pink-deep);


box-shadow:

0 0 0 4px rgba(255,143,174,.15);


}



/* ===============================
   CHECKBOX / OPTIONS
================================ */


.form-check {


display:flex;


align-items:center;


gap:10px;


margin-bottom:15px;


}



.form-check input {


width:auto;


}



/* ===============================
   FORM BUTTON AREA
================================ */


.form-actions {


display:flex;


gap:15px;


flex-wrap:wrap;


margin-top:25px;


}



.form-actions .btn {


justify-content:center;


}



/* ===============================
   CONTACT INFORMATION CARDS
================================ */


.contact-grid {


display:flex;


flex-wrap:wrap;


gap:25px;


}



.contact-card {


flex:1 1 250px;


background:white;


padding:30px;


border-radius:var(--radius-lg);


text-align:center;


box-shadow:

0 10px 25px rgba(0,0,0,.05);


}



.contact-card h3 {


font-size:24px;


margin-bottom:10px;


}



.contact-card p {


color:var(--ink-soft);


}



/* ===============================
   FORM ERROR / SUCCESS MESSAGES
================================ */


.form-message {


padding:15px 20px;


border-radius:var(--radius-sm);


font-weight:700;


margin-bottom:20px;


}



.form-message.success {


background:#E8F8EF;


color:#207A45;


}



.form-message.error {


background:#FFECEC;


color:#B42318;


}