/* ============================================================================
 * SL-n2g-brevonator — Frontend styles.
 *
 * v1.2 philosophy: stay out of the way. The plugin does NOT impose colors,
 * fonts, font sizes, or layout dimensions. Everything visual is inherited
 * from the theme or container (e.g. Elementor). Only purely functional
 * styles remain: honeypot hiding, loading spinner, message states.
 *
 * Optional style switches set in the admin backend are output as CSS
 * variables on the wrapper element (see shortcode.php). They override
 * the default `inherit`/transparent values only where the admin has
 * actively configured them.
 * ============================================================================ */

.sl-brev-form {
    /* All variables default to "inherit from context". Only when the admin
       sets a value in the Styling tab does it actually take effect.       */
    --sl-brev-form-width: 100%;
    --sl-brev-accent: currentColor;
    --sl-brev-radius: 0;
    --sl-brev-gap: 14px;

    box-sizing: border-box;
    width: var(--sl-brev-form-width);
    max-width: 100%;
    font: inherit;
    color: inherit;
}

.sl-brev-form *,
.sl-brev-form *::before,
.sl-brev-form *::after {
    box-sizing: inherit;
}

.sl-brev-form-inner {
    display: flex;
    flex-direction: column;
    gap: var(--sl-brev-gap);
    width: 100%;
}

/* ------------- Honeypot (must remain functional) -------------------------- */
.sl-brev-hp {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* ------------- Fields ----------------------------------------------------- */
.sl-brev-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.sl-brev-field label {
    font: inherit;
    color: inherit;
}

/* Inputs default to inheriting everything from the surrounding context.
   The plugin only ensures full-width and proper sizing.                    */
.sl-brev-field input[type="email"] {
    width: 100%;
    font: inherit;
    color: inherit;
    background: transparent;
    border-radius: var(--sl-brev-radius);
}

/* Optional field-style variants — opt-in via wrapper class */
.sl-brev-form.is-field-outline .sl-brev-field input[type="email"] {
    padding: 9px 12px;
    border: 1px solid currentColor;
    background: transparent;
}
.sl-brev-form.is-field-outline .sl-brev-field input[type="email"]:focus {
    outline: 2px solid var(--sl-brev-accent);
    outline-offset: 1px;
}

.sl-brev-form.is-field-underline .sl-brev-field input[type="email"] {
    padding: 9px 0;
    border: none;
    border-bottom: 1px solid currentColor;
    border-radius: 0;
    background: transparent;
}
.sl-brev-form.is-field-underline .sl-brev-field input[type="email"]:focus {
    outline: none;
    border-bottom-color: var(--sl-brev-accent);
    border-bottom-width: 2px;
}

/* ------------- Consent checkbox ------------------------------------------ */
.sl-brev-field-consent label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.sl-brev-field-consent input[type="checkbox"] {
    margin-top: 4px;
    flex-shrink: 0;
}

.sl-brev-consent-text {
    font: inherit;
    color: inherit;
}

.sl-brev-consent-text a,
.sl-brev-field-notice a {
    color: inherit;
    text-decoration: underline;
}

/* ------------- Notice text above button ---------------------------------- */
.sl-brev-field-notice {
    font: inherit;
    color: inherit;
}

/* ------------- Submit button --------------------------------------------- */
/* Default: keep the functional minimum and let the theme decide on visuals.
   The position/display rules below are required for the loading spinner.   */
.sl-brev-submit {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.sl-brev-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Opt-in button-style variants */
.sl-brev-form.is-button-filled .sl-brev-submit {
    padding: 11px 22px;
    background: var(--sl-brev-accent);
    color: #fff;
    border: 1px solid var(--sl-brev-accent);
    border-radius: var(--sl-brev-radius);
    transition: filter 0.15s ease;
}
.sl-brev-form.is-button-filled .sl-brev-submit:hover:not(:disabled) {
    filter: brightness(0.92);
}

.sl-brev-form.is-button-outline .sl-brev-submit {
    padding: 11px 22px;
    background: transparent;
    color: var(--sl-brev-accent);
    border: 1px solid var(--sl-brev-accent);
    border-radius: var(--sl-brev-radius);
    transition: background 0.15s ease, color 0.15s ease;
}
.sl-brev-form.is-button-outline .sl-brev-submit:hover:not(:disabled) {
    background: var(--sl-brev-accent);
    color: #fff;
}

.sl-brev-submit.is-loading .sl-brev-submit-label {
    visibility: hidden;
}

.sl-brev-submit-spinner {
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    opacity: 0;
    animation: sl-brev-spin 0.8s linear infinite;
}

.sl-brev-submit.is-loading .sl-brev-submit-spinner {
    opacity: 0.7;
}

@keyframes sl-brev-spin {
    to { transform: rotate(360deg); }
}

/* ------------- Status messages ------------------------------------------- */
.sl-brev-message {
    font: inherit;
    color: inherit;
}

.sl-brev-message:empty {
    display: none;
}

.sl-brev-message.is-success {
    padding: 10px 14px;
    background: rgba(0, 128, 0, 0.08);
    border-left: 3px solid currentColor;
    color: #157f3a;
    border-radius: var(--sl-brev-radius);
}

.sl-brev-message.is-error {
    padding: 10px 14px;
    background: rgba(178, 34, 34, 0.08);
    border-left: 3px solid currentColor;
    color: #b22222;
    border-radius: var(--sl-brev-radius);
}

/* ------------- Compact layout (single-row) ------------------------------- */
@media (min-width: 640px) {
    .sl-brev-form.sl-brev-compact .sl-brev-form-inner {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-end;
    }
    .sl-brev-form.sl-brev-compact .sl-brev-field-email {
        flex: 1 1 240px;
    }
    .sl-brev-form.sl-brev-compact .sl-brev-field-submit {
        flex: 0 0 auto;
    }
    .sl-brev-form.sl-brev-compact .sl-brev-field-consent,
    .sl-brev-form.sl-brev-compact .sl-brev-field-notice,
    .sl-brev-form.sl-brev-compact .sl-brev-message {
        flex: 1 0 100%;
    }
}