/* ── Oren Newsletter Widget ──────────────────────────────────
   Intentionally uses NO hardcoded colours, backgrounds, or fonts.
   Everything inherits from the active WordPress theme so the widget
   blends naturally wherever it is placed (footer, sidebar, page, etc.)
──────────────────────────────────────────────────────────── */

.oren-nl-wrap {
    /* Inherit theme font stack, text colour, and background */
    font-family: inherit;
    color: inherit;
    background: transparent;
    max-width: 380px;
    box-sizing: border-box;
}

.oren-nl-title {
    font-size: 0.8em;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 8px;
    color: inherit;
    opacity: 0.9;
}

.oren-nl-desc {
    font-size: 0.9em;
    line-height: 1.55;
    margin: 0 0 16px;
    color: inherit;
    opacity: 0.75;
}

.oren-nl-form-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Input — neutral reset that picks up theme border/bg variables if set */
.oren-nl-input {
    width: 100%;
    padding: 10px 14px;
    font-family: inherit;
    font-size: 0.95em;
    box-sizing: border-box;
    outline: none;
    /* Let the theme supply border, background, and color */
    background-color: var(--wp--preset--color--background, inherit);
    color: var(--wp--preset--color--foreground, inherit);
    border: 1px solid currentColor;
    border-radius: var(--wp--preset--border-radius, 4px);
    opacity: 0.85;
    transition: opacity 0.2s, box-shadow 0.2s;
}

.oren-nl-input:focus {
    opacity: 1;
    box-shadow: 0 0 0 2px currentColor;
    outline: none;
}

/* Button — inherits theme's link/button styles where possible */
.oren-nl-btn {
    width: 100%;
    padding: 11px 20px;
    font-family: inherit;
    font-size: 0.95em;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: opacity 0.2s, transform 0.1s;
    /* Pull from theme button styles if present, otherwise fall back to
       a sensible invert-of-current-colour approach */
    background-color: var(--wp--preset--color--primary, currentColor);
    color: var(--wp--preset--color--background, #fff);
    border: 1px solid transparent;
    border-radius: var(--wp--preset--border-radius, 4px);
}

.oren-nl-btn:hover   { opacity: 0.85; }
.oren-nl-btn:active  { transform: scale(0.98); }
.oren-nl-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Spinner (inherits button text color) */
.oren-nl-spinner {
    display: none;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    opacity: 0.6;
    animation: oren-spin 0.6s linear infinite;
}

.oren-nl-wrap[data-state="loading"] .oren-nl-spinner { display: block; }
.oren-nl-wrap[data-state="loading"] .oren-nl-btn-label { opacity: 0.7; }

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

/* Feedback message — neutral, inherits surrounding text colour */
.oren-nl-message {
    margin: 10px 0 0;
    font-size: 0.85em;
    min-height: 18px;
    padding: 0;
    transition: all 0.3s;
    color: inherit;
}

.oren-nl-message.success { opacity: 0.9; }
.oren-nl-message.error   { opacity: 0.9; }

/* Dim the form after a successful submission */
.oren-nl-wrap[data-state="success"] .oren-nl-form-row {
    opacity: 0.4;
    pointer-events: none;
}

/* ── Widget / footer context: remove extra spacing ───────── */
.widget .oren-nl-wrap,
.footer-widget .oren-nl-wrap,
.wp-block-widget-area .oren-nl-wrap {
    max-width: 100%;
}