/**
 * Darealmop_BackInStock - "notify me when it's back" form.
 *
 * A small, self-contained BEM component. Unlike a pure skeleton it ships USABLE
 * defaults (the form is a real conversion surface that must look right the
 * moment it appears), but every cosmetic value is a --dm-bis-* token the theme
 * can override, and the accent/ink fall back to the shared storefront tokens
 * (--dm-storefront-accent / --dm-storefront-ink) with brand-agnostic neutral
 * fallbacks, so it renders in a neutral palette out of the box and inherits the
 * accent via currentColor. Structure/layout is fixed; colour/shape/spacing is tokenised.
 */

.dm-bis {
    margin: var(--dm-bis-margin, 16px 0 0);
    padding: var(--dm-bis-padding, 16px);
    border: var(--dm-bis-border, 1px solid rgba(0, 0, 0, 0.12));
    border-radius: var(--dm-bis-radius, 10px);
    background: var(--dm-bis-bg, rgba(0, 0, 0, 0.04));
    color: var(--dm-bis-color, inherit);
    font: inherit;
}

.dm-bis__prompt {
    margin: 0 0 12px;
    font-weight: 600;
    color: var(--dm-bis-prompt-color, var(--dm-storefront-ink, #1f2937));
}

.dm-bis__form {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--dm-bis-gap, 10px);
}

.dm-bis__field {
    flex: 1 1 220px;
    display: block;
    min-width: 0;
}

.dm-bis__label {
    display: block;
    margin-bottom: 6px;
    font-size: var(--dm-bis-label-size, 0.8125rem);
    font-weight: 600;
    opacity: 0.85;
}

.dm-bis__input {
    width: 100%;
    padding: var(--dm-bis-input-padding, 11px 14px);
    border: var(--dm-bis-input-border, 1px solid rgba(0, 0, 0, 0.2));
    border-radius: var(--dm-bis-input-radius, 8px);
    background: var(--dm-bis-input-bg, #fff);
    color: inherit;
    font: inherit;
    line-height: 1.2;
}

.dm-bis__input:focus {
    outline: none;
    border-color: var(--dm-bis-accent, var(--dm-storefront-accent, currentColor));
    box-shadow: var(--dm-bis-input-focus-shadow, 0 0 0 3px rgba(0, 0, 0, 0.15));
}

.dm-bis__submit {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--dm-bis-submit-padding, 11px 22px);
    border: 0;
    border-radius: var(--dm-bis-submit-radius, 8px);
    background: var(--dm-bis-submit-bg, var(--dm-storefront-accent, #e5e7eb));
    color: var(--dm-bis-submit-color, var(--dm-storefront-ink, #1f2937));
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: opacity 0.15s ease, transform 0.1s ease;
}

.dm-bis__submit:hover {
    opacity: 0.9;
}

.dm-bis__submit:active {
    transform: translateY(1px);
}

.dm-bis__submit[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}

.dm-bis__status {
    flex: 1 0 100%;
    margin: 4px 0 0;
    font-size: var(--dm-bis-status-size, 0.8125rem);
    line-height: 1.4;
}

.dm-bis__status--ok {
    color: var(--dm-bis-status-ok-color, #2e7d16);
}

.dm-bis__status--error {
    color: var(--dm-bis-status-error-color, #b3261e);
}

@media (prefers-reduced-motion: reduce) {
    .dm-bis__submit {
        transition: none;
    }
}