/*
 * Form styles.
 *
 * Two layers. The `.wing-popup-mc-form` rules below are the original Mailchimp
 * form look, kept exactly as they were because customer CSS is written against
 * them; every subscribe form still carries that class. The generic `.wdpop-form`
 * rules give the other form types (contact, login, registration) the same base
 * look, and the `.wdpop-form--custom` block reads the CSS custom properties a
 * form emits when its Appearance is set to "Custom style" - so a form set to
 * inherit from the theme gets neither the class nor the variables.
 */

/* Follow-up panels ---------------------------------------------------------- */

/*
 * The `form` popup type swaps its content for a follow-up message after a
 * submission by toggling the `hidden` attribute (WingPopup.showStep). The UA
 * rule behind `hidden` loses to any theme rule that sets `display` on the same
 * element, which would show the thank-you text underneath the reset form.
 * This stylesheet is loaded whenever a form renders, so it is where `hidden`
 * is made authoritative for the free plugin; Pro carries the same rule for the
 * panels its own action runtime drives.
 */
[data-wdpop-step-main][hidden],
[data-wdpop-step-panel][hidden] {
    display: none !important;
}
.wdpop-step {
    padding: 0.5rem 0;
}

/* Generic base for every form type ----------------------------------------- */

.wdpop-form {
    text-align: left;
    font-family: inherit;
}
.wdpop-form .wdpop-field {
    margin-bottom: var(--wdpop-form-gap, 15px);
}
.wdpop-form .wdpop-field--consent,
.wdpop-form .wdpop-field--remember {
    display: flex;
    align-items: center;
    gap: 8px;
}
.wdpop-form .wdpop-field--consent .wdpop-label,
.wdpop-form .wdpop-field--remember .wdpop-label {
    order: 2;
    margin: 0;
    font-weight: 400;
}
.wdpop-form .wdpop-label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
}
.wdpop-form .wdpop-required {
    color: #d63638;
}
/* A consent / remember-me row: box first, text beside it, wrapping under itself. */
.wdpop-form .wdpop-label--checkbox {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-weight: 400;
    font-size: 0.9em;
    line-height: 1.4;
    cursor: pointer;
}
.wdpop-form .wdpop-label--checkbox input[type="checkbox"] {
    flex: 0 0 auto;
    margin: 0.2em 0 0;
    accent-color: var(--wdpop-form-primary, #3498db);
}
.wdpop-form textarea.wdpop-input,
.wdpop-form select.wdpop-input,
.wdpop-form input.wdpop-input:not([type="checkbox"]):not([type="hidden"]) {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.4;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.wdpop-form textarea.wdpop-input:focus,
.wdpop-form select.wdpop-input:focus,
.wdpop-form input.wdpop-input:focus {
    outline: none;
    border-color: #0073aa;
    box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.12);
}
.wdpop-form .wdpop-form__submit {
    display: inline-block;
    padding: 12px 22px;
    background: #0073aa;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s ease, opacity 0.2s ease;
}
.wdpop-form .wdpop-form__submit:hover {
    background: #005d88;
}
.wdpop-form[data-wdpop-busy="1"] .wdpop-form__submit {
    opacity: 0.6;
    cursor: progress;
}
.wdpop-form .wdpop-form__message {
    margin-top: 8px;
    font-size: 14px;
}
.wdpop-form .wdpop-form__message:empty {
    display: none;
}
.wdpop-form .wdpop-form__message.success,
.wdpop-form .wdpop-form__message.error {
    padding: 8px 12px;
    border-radius: 6px;
}
.wdpop-form .wdpop-form__message.success {
    background: #e6f7e9;
    color: #256029;
    border: 1px solid #b6e0bd;
}
.wdpop-form .wdpop-form__message.error {
    background: #fdeaea;
    color: #b72c2c;
    border: 1px solid #f5b5b5;
}
.wdpop-form__links {
    margin: 8px 0 0;
    font-size: 13px;
}
.wdpop-form__admin-notice {
    margin: 0 0 12px;
    padding: 8px 12px;
    border-left: 3px solid #dba617;
    background: #fcf9e8;
    font-size: 13px;
}
.wdpop-form__done {
    padding: 12px 14px;
    border-radius: 6px;
    background: #e6f7e9;
    color: #256029;
    font-size: 14px;
}

/* Custom appearance ---------------------------------------------------------
 * Variables are emitted on the form element by WDPOP_Form_Types::style_attr()
 * only when the form's Appearance is "Custom style". Each rule falls back to
 * the base value above, so a partially filled panel still renders sensibly.
 */
.wdpop-form.wdpop-form--custom .wdpop-label,
.wdpop-form.wdpop-form--custom .wing-popup-mc-label {
    color: var(--wdpop-form-label, inherit);
}
.wdpop-form.wdpop-form--custom textarea.wdpop-input,
.wdpop-form.wdpop-form--custom select.wdpop-input,
.wdpop-form.wdpop-form--custom input.wdpop-input:not([type="checkbox"]):not([type="hidden"]),
.wing-popup-mc-form.wdpop-form--custom input[type="text"],
.wing-popup-mc-form.wdpop-form--custom input[type="email"] {
    background-color: var(--wdpop-form-input-bg, #fff);
    color: var(--wdpop-form-input-text, inherit);
    border-color: var(--wdpop-form-input-border, #ccc);
    border-radius: var(--wdpop-form-radius, 6px);
    margin-bottom: 0;
}
.wdpop-form.wdpop-form--custom .wdpop-input:focus {
    border-color: var(--wdpop-form-primary, #0073aa);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--wdpop-form-primary, #0073aa) 18%, transparent);
}
.wdpop-form.wdpop-form--custom .wdpop-form__submit,
.wing-popup-mc-form.wdpop-form--custom button[type="submit"] {
    background: var(--wdpop-form-primary, #0073aa) !important;
    color: var(--wdpop-form-button-text, #fff) !important;
    border-radius: var(--wdpop-form-radius, 6px);
}
.wdpop-form.wdpop-form--custom .wdpop-form__submit:hover,
.wing-popup-mc-form.wdpop-form--custom button[type="submit"]:hover {
    filter: brightness(0.92);
}
.wing-popup-mc-form.wdpop-form--custom .wing-popup-mc-field {
    margin-bottom: var(--wdpop-form-gap, 15px);
}

/* Original Mailchimp form look ----------------------------------------------- */

/* Form wrapper */
.wing-popup-mc-form {
    max-width: 400px;
    /* margin: 20px auto; */
    /* padding: 20px; */
    background: #fff;
    /* border: 1px solid #e5e5e5; */
    /* border-radius: 8px; */
    /* box-shadow: 0 2px 6px rgba(0,0,0,0.05); */
    font-family: inherit;
}

/* Labels */
.wing-popup-mc-form{
    text-align: left;
}
.wing-popup-mc-label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    color: #333;
    font-size: 14px;
}

/* Inputs */
.wing-popup-mc-form input[type="text"],
.wing-popup-mc-form input[type="email"] {
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.2s ease;
}

.wing-popup-mc-form input[type="text"]:focus,
.wing-popup-mc-form input[type="email"]:focus {
    border-color: #0073aa;
    outline: none;
}

/* Submit button */
.wing-popup-mc-form button[type="submit"] {
    display: inline-block;
    width: 100%;
    max-width: 150px;
    padding: 12px 15px;
    background: #0073aa;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.wing-popup-mc-form button[type="submit"]:hover {
    background: #005d88;
}

/* Success & error messages */
.wing-popup-mc-message {
    margin-top: 5px;
    font-size: 14px;
}

.wing-popup-mc-message.success {
    background: #e6f7e9;
    color: #256029;
    border: 1px solid #b6e0bd;
}

.wing-popup-mc-message.error {
    background: #fdeaea;
    color: #b72c2c;
    border: 1px solid #f5b5b5;
}