/* ==========================================================================
   MathB Events Theme
   Forms
   ========================================================================== */

/* ==========================================================================
   Form
   ========================================================================== */

.mathb-form {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

}

/* ==========================================================================
   Form Row
   ========================================================================== */

.mathb-form-row {

    display: grid;

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

    gap: 1.5rem;

}

.mathb-form-row-full {

    grid-template-columns: 1fr;

}

/* ==========================================================================
   Form Group
   ========================================================================== */

.mathb-form-group {

    display: flex;

    flex-direction: column;

}

/* ==========================================================================
   Labels
   ========================================================================== */

.mathb-form label,
label {

    display: inline-block;

    margin-bottom: .65rem;

    color: var(--mathb-heading);

    font-weight: var(--mathb-fw-medium);

}

/* ==========================================================================
   Required
   ========================================================================== */

.required {

    color: var(--mathb-danger);

}

/* ==========================================================================
   Inputs
   ========================================================================== */

.mathb-form input:not([type="checkbox"]):not([type="radio"]),
.mathb-form textarea,
.mathb-form select {

    width: 100%;

    min-height: 54px;

    padding: 0 1rem;

    color: var(--mathb-text);

    background: var(--mathb-white);

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

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

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

}

.mathb-form textarea {

    min-height: 180px;

    padding: 1rem;

}

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

    outline: none;

    border-color: var(--mathb-primary);

    box-shadow:
        0 0 0 4px rgba(214,177,106,.15);

}

/* ==========================================================================
   Select
   ========================================================================== */

.mathb-form select {

    cursor: pointer;

    appearance: none;

    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);

    background-position:
        calc(100% - 22px) calc(50% - 3px),
        calc(100% - 16px) calc(50% - 3px);

    background-size: 6px 6px;

    background-repeat: no-repeat;

}

/* ==========================================================================
   Checkbox
   ========================================================================== */

.mathb-checkbox {

    display: flex;

    align-items: center;

    gap: .75rem;

}

.mathb-checkbox input {

    width: 18px;

    height: 18px;

}

/* ==========================================================================
   Radio
   ========================================================================== */

.mathb-radio {

    display: flex;

    align-items: center;

    gap: .75rem;

}

/* ==========================================================================
   Search Form
   ========================================================================== */

.mathb-search-form {

    display: flex;

    align-items: stretch;

    overflow: hidden;

    border-radius: var(--mathb-radius-pill);

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

    background: var(--mathb-white);

}

.mathb-search-field {

    flex: 1;

    border: 0;

    padding: 0 1.5rem;

    background: transparent;

}

.mathb-search-submit {

    min-width: 60px;

    border-radius: 0;

}

/* ==========================================================================
   Newsletter
   ========================================================================== */

.mathb-newsletter {

    display: flex;

    gap: 1rem;

}

.mathb-newsletter input {

    flex: 1;

}

/* ==========================================================================
   Contact Form
   ========================================================================== */

.mathb-contact-form {

    padding: 3rem;

    background: var(--mathb-white);

    border-radius: var(--mathb-radius-xl);

    box-shadow: var(--mathb-shadow-md);

}

/* ==========================================================================
   Validation
   ========================================================================== */

.mathb-form .is-valid {

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

}

.mathb-form .is-invalid {

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

}

.mathb-form .is-valid:focus {

    box-shadow:
        0 0 0 4px rgba(34,197,94,.15);

}

.mathb-form .is-invalid:focus {

    box-shadow:
        0 0 0 4px rgba(239,68,68,.15);

}

/* ==========================================================================
   Validation Messages
   ========================================================================== */

.mathb-form-error {

    margin-top: .5rem;

    color: var(--mathb-danger);

    font-size: .875rem;

}

.mathb-form-success {

    margin-top: .5rem;

    color: var(--mathb-success);

    font-size: .875rem;

}

.mathb-form-help {

    margin-top: .5rem;

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

    font-size: .875rem;

}

/* ==========================================================================
   Notices
   ========================================================================== */

.mathb-notice,
.mathb-alert {

    margin-bottom: 2rem;

    padding: 1rem 1.5rem;

    border-left: 4px solid var(--mathb-primary);

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

    background: var(--mathb-light);

}

.mathb-notice-success {

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

}

.mathb-notice-warning {

    border-left-color: var(--mathb-warning);

}

.mathb-notice-error {

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

}

/* ==========================================================================
   Contact Form 7
   ========================================================================== */

.wpcf7 {

    width: 100%;

}

.wpcf7 form {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

}

.wpcf7-spinner {

    margin-left: .75rem;

}

.wpcf7-not-valid-tip {

    margin-top: .5rem;

    color: var(--mathb-danger);

    font-size: .875rem;

}

.wpcf7-response-output {

    margin: 2rem 0 0;

    padding: 1rem 1.5rem;

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

}

/* ==========================================================================
   Gravity Forms
   ========================================================================== */

.gform_wrapper {

    width: 100%;

}

.gform_wrapper .gfield {

    margin-bottom: 1.5rem;

}

.gform_wrapper .validation_message {

    color: var(--mathb-danger);

    font-size: .875rem;

}

/* ==========================================================================
   WordPress Comment Form
   ========================================================================== */

.comment-form {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

}

.comment-form textarea {

    min-height: 220px;

}

.comment-form-cookies-consent {

    display: flex;

    align-items: flex-start;

    gap: .75rem;

}

.comment-form-cookies-consent input {

    margin-top: .25rem;

}

/* ==========================================================================
   Login / Register
   ========================================================================== */

.login form,
.woocommerce-form-login,
.woocommerce-form-register {

    padding: 2.5rem;

    background: var(--mathb-white);

    border-radius: var(--mathb-radius-xl);

    box-shadow: var(--mathb-shadow-md);

}

.login label,
.woocommerce-form-login label,
.woocommerce-form-register label {

    display: block;

}

/* ==========================================================================
   Lost Password
   ========================================================================== */

.lost_password {

    margin-top: 1rem;

    font-size: .95rem;

}

/* ==========================================================================
   WooCommerce Forms
   ========================================================================== */

.woocommerce form .form-row {

    margin-bottom: 1.5rem;

}

.woocommerce form .form-row label {

    font-weight: var(--mathb-fw-medium);

}

.woocommerce form .input-text,
.woocommerce form select,
.woocommerce form textarea {

    min-height: 54px;

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

}

.woocommerce form textarea {

    min-height: 180px;

}

/* ==========================================================================
   Placeholder
   ========================================================================== */

input::placeholder,
textarea::placeholder {

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

    opacity: 1;

}

/* ==========================================================================
   Disabled
   ========================================================================== */

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

    cursor: not-allowed;

    opacity: .65;

}

/* ==========================================================================
   End
   ========================================================================== */