/**
 * ==================================================
 * FORMS
 * Francesco Cugini Theme
 * Design System v1.0
 * ==================================================
 */


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

.form{

    display:flex;

    flex-direction:column;

    gap:var(--space-lg);

}


/*==================================================
FIELD GROUP
==================================================*/

.form-group{

    display:flex;

    flex-direction:column;

    gap:var(--space-sm);

}


/*==================================================
LABEL
==================================================*/

label{

    display:block;

    font-size:var(--font-size-sm);

    font-weight:var(--font-weight-semibold);

    color:var(--color-text);

}


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

input,
textarea,
select{

    width:100%;

    padding:1rem 1.2rem;

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

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

    background:var(--color-surface);

    color:var(--color-text);

    font-family:var(--font-body);

    font-size:var(--font-size-base);

    transition:
        border-color var(--transition),
        box-shadow var(--transition),
        background var(--transition);

}


/*==================================================
PLACEHOLDER
==================================================*/

input::placeholder,
textarea::placeholder{

    color:var(--color-text-light);

    opacity:.7;

}


/*==================================================
FOCUS
==================================================*/

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

    outline:none;

    border-color:var(--color-accent);

    box-shadow:0 0 0 4px rgba(91,122,99,.15);

}


/*==================================================
TEXTAREA
==================================================*/

textarea{

    min-height:180px;

    resize:vertical;

}


/*==================================================
SELECT
==================================================*/

select{

    cursor:pointer;

}


/*==================================================
CHECKBOX & RADIO
==================================================*/

input[type="checkbox"],
input[type="radio"]{

    width:auto;

    accent-color:var(--color-accent);

}


/*==================================================
SEARCH
==================================================*/

.search-form{

    display:flex;

    gap:var(--space-md);

}

.search-form input{

    flex:1;

}


/*==================================================
NEWSLETTER
==================================================*/

.newsletter-form{

    display:flex;

    gap:var(--space-md);

    max-width:700px;

    margin:auto;

}

.newsletter-form input{

    flex:1;

}


/*==================================================
VALIDATION
==================================================*/

input:invalid,
textarea:invalid{

    border-color:var(--color-danger);

}

input:valid,
textarea:valid{

    border-color:var(--color-success);

}


/*==================================================
HELP TEXT
==================================================*/

.form-help{

    font-size:var(--font-size-sm);

    color:var(--color-text-light);

}


/*==================================================
ERROR
==================================================*/

.form-error{

    font-size:var(--font-size-sm);

    color:var(--color-danger);

}


/*==================================================
SUCCESS
==================================================*/

.form-success{

    font-size:var(--font-size-sm);

    color:var(--color-success);

}


/*==================================================
DISABLED
==================================================*/

input:disabled,
textarea:disabled,
select:disabled{

    cursor:not-allowed;

    opacity:.6;

    background:var(--color-surface-alt);

}


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

@media (max-width:768px){

    .newsletter-form{

        flex-direction:column;

    }

    .search-form{

        flex-direction:column;

    }

}