/*
 * WP Azure Forms — Frontend field layout
 *
 * Layout-only rules. All appearance (colors, borders, fonts, button styles)
 * is inherited from theme.json preset variables and style.css global rules.
 * This keeps form fields styled consistently with every active theme.
 */

/* ---- Field wrapper ---- */
.wpazure-form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}

/* ---- Labels ---- */
.wpazure-form-field > label,
.wpazure-form-field > fieldset > legend {
    font-family: var(--wp--preset--font-family--label, inherit);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wp--preset--color--text-secondary, #a3a3a3);
    line-height: 1.4;
}

/* Required asterisk */
.wpazure-required {
    color: var(--wp--preset--color--accent-gold, #c9a962);
    margin-left: 2px;
}

/* ---- Inputs inherit theme appearance ---- */
.wpazure-form-field input,
.wpazure-form-field textarea,
.wpazure-form-field select {
    width: 100%;
    box-sizing: border-box;
    /* Appearance (background, border, color, padding) from theme style.css */
}

/* ---- Fieldset / radio / checkbox resets ---- */
.wpazure-form-field fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

/* ---- Options list (radio + checkbox groups) ---- */
.wpazure-options-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}

.wpazure-choice-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    color: var(--wp--preset--color--text-primary, #fff);
    text-transform: none;
    letter-spacing: normal;
}

.wpazure-choice-label input[type="radio"],
.wpazure-choice-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    padding: 0;
    margin: 0;
    accent-color: var(--wp--preset--color--accent-gold, #c9a962);
    cursor: pointer;
}

/* ---- Submit row ---- */
.wpazure-form-submit-row {
    margin-top: 8px;
}

/* wp-element-button appearance is controlled entirely by theme.json */

/* ---- Result / feedback message ---- */
.wpazure-form-result {
    margin-top: 16px;
    min-height: 1.5em;
    font-size: 14px;
    transition: opacity 0.3s ease;
}

.wpazure-form-result:not(:empty) {
    padding: 12px 16px;
    border: 1px solid var(--wp--preset--color--border, #262626);
}