/* ==========================================================
   KOKO Enterprise
   Forms
   ========================================================== */

/*--------------------------------------------------------------
# Form Layout
--------------------------------------------------------------*/

.form-group{
    margin-bottom:1.5rem;
}

.form-row{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1.5rem;
}

.form-actions{
    display:flex;
    align-items:center;
    gap:1rem;
    margin-top:2rem;
}

/*--------------------------------------------------------------
# Labels
--------------------------------------------------------------*/

label{
    display:block;
    margin-bottom:.6rem;

    color:var(--color-primary);

    font-size:.92rem;
    font-weight:600;
    line-height:1.4;
}

/*--------------------------------------------------------------
# Required Marker
--------------------------------------------------------------*/

.required{
    color:var(--color-accent);
}

/*--------------------------------------------------------------
# Form Controls
--------------------------------------------------------------*/

input,
textarea,
select{
    width:100%;

    padding:1rem 1.1rem;

    color:var(--color-text);
    background:#ffffff;

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

    font:inherit;
    line-height:1.5;

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        background-color .25s ease;
}

input::placeholder,
textarea::placeholder{
    color:rgba(0,0,0,.42);
}

/*--------------------------------------------------------------
# Focus States
--------------------------------------------------------------*/

input:focus,
textarea:focus,
select:focus{
    outline:none;

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

    box-shadow:
        0 0 0 4px rgba(201,162,39,.12);
}

/*--------------------------------------------------------------
# Textarea
--------------------------------------------------------------*/

textarea{
    min-height:180px;
    resize:vertical;
}

/*--------------------------------------------------------------
# Select
--------------------------------------------------------------*/

select{
    cursor:pointer;
}

/*--------------------------------------------------------------
# Checkbox and Radio
--------------------------------------------------------------*/

input[type="checkbox"],
input[type="radio"]{
    width:auto;
    margin-right:.6rem;

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

/*--------------------------------------------------------------
# Disabled Fields
--------------------------------------------------------------*/

input:disabled,
textarea:disabled,
select:disabled{
    cursor:not-allowed;

    color:rgba(0,0,0,.45);
    background:#f5f5f5;

    opacity:.75;
}

/*--------------------------------------------------------------
# Validation
--------------------------------------------------------------*/

.is-error,
input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"]{
    border-color:#b42318;
}

.form-error,
.validation-message{
    display:block;
    margin-top:.5rem;

    color:#b42318;

    font-size:.88rem;
    line-height:1.5;
}

.form-help{
    display:block;
    margin-top:.5rem;

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

    font-size:.88rem;
    line-height:1.5;
}

/*--------------------------------------------------------------
# WordPress Search Form
--------------------------------------------------------------*/

.search-form{
    display:flex;
    align-items:stretch;
    gap:.75rem;
}

.search-form label{
    flex:1;
    margin:0;
}

.search-field{
    height:100%;
}

.search-submit{
    flex-shrink:0;
}

/*--------------------------------------------------------------
# Contact Form 7
--------------------------------------------------------------*/

.wpcf7-form p{
    margin-bottom:1.5rem;
}

.wpcf7-form-control-wrap{
    display:block;
}

.wpcf7-not-valid{
    border-color:#b42318;
}

.wpcf7-not-valid-tip{
    margin-top:.5rem;

    color:#b42318;

    font-size:.88rem;
}

.wpcf7-response-output{
    margin:2rem 0 0 !important;
    padding:1rem 1.25rem !important;

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

/*--------------------------------------------------------------
# WPForms
--------------------------------------------------------------*/

.wpforms-container .wpforms-field{
    padding:0 0 1.5rem !important;
}

.wpforms-container .wpforms-field-label{
    margin-bottom:.6rem !important;

    color:var(--color-primary);

    font-size:.92rem !important;
    font-weight:600 !important;
}

.wpforms-container input,
.wpforms-container textarea,
.wpforms-container select{
    max-width:none !important;
}

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/

form button:focus-visible,
form input:focus-visible,
form textarea:focus-visible,
form select:focus-visible{
    outline:2px solid var(--color-accent);
    outline-offset:3px;
}

/*--------------------------------------------------------------
# Responsive
--------------------------------------------------------------*/

@media (max-width:768px){

    .form-row{
        grid-template-columns:1fr;
        gap:0;
    }

    .form-actions{
        flex-direction:column;
        align-items:stretch;
    }

    .form-actions .btn{
        width:100%;
    }

    .search-form{
        flex-direction:column;
    }

    .search-submit{
        width:100%;
    }

}