/* ─── Spottler Subscribe Form ─── */

.spottler-subscribe-wrap {
    --spottler-accent: #4a2048;
    --spottler-accent-hover: #3a1838;
    --spottler-bg-bar: #cc8a2e;
    --spottler-bg-bar-border: #b87a28;
    --spottler-input-bg: #f5e6c8;
    --spottler-input-text: #8b6914;
    --spottler-label-color: #ffffff;
    --spottler-radius: 50px;
    --spottler-input-height: 46px;
    --spottler-success: #2e7d32;
    --spottler-error: #c62828;

    font-family: inherit;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Bar layout - force horizontal */
.spottler-subscribe-wrap .spottler-subscribe-form {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 14px 24px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* Label */
.spottler-subscribe-wrap .spottler-label {
    color: var(--spottler-label-color) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Fields */
.spottler-subscribe-wrap .spottler-field {
    margin: 0 !important;
    padding: 0 !important;
}

.spottler-subscribe-wrap .spottler-field--email {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.spottler-subscribe-wrap .spottler-field--button {
    flex-shrink: 0 !important;
}

/* Input */
.spottler-subscribe-wrap .spottler-input {
    display: block !important;
    width: 100% !important;
    height: var(--spottler-input-height) !important;
    padding: 0 20px !important;
    font-size: 15px !important;
    color: var(--spottler-input-text) !important;
    background: var(--spottler-input-bg) !important;
    border: none !important;
    border-radius: var(--spottler-radius) !important;
    outline: none !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    transition: box-shadow 0.2s ease;
}

.spottler-subscribe-wrap .spottler-input:focus {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3) !important;
}

.spottler-subscribe-wrap .spottler-input::placeholder {
    color: var(--spottler-input-text) !important;
    opacity: 0.7 !important;
}

/* Button */
.spottler-subscribe-wrap .spottler-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: var(--spottler-input-height) !important;
    padding: 0 32px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    background: var(--spottler-accent) !important;
    border: none !important;
    border-radius: var(--spottler-radius) !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    margin: 0 !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    transition: background 0.2s ease, transform 0.1s ease;
}

.spottler-subscribe-wrap .spottler-button:hover {
    background: var(--spottler-accent-hover) !important;
}

.spottler-subscribe-wrap .spottler-button:active {
    transform: scale(0.98);
}

.spottler-subscribe-wrap .spottler-button:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

/* Spinner */
.spottler-subscribe-wrap .spottler-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spottler-spin 0.6s linear infinite;
}

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

/* Message */
.spottler-subscribe-wrap .spottler-message {
    margin: 0 !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    border-radius: 0 !important;
    line-height: 1.4 !important;
    text-align: center !important;
    background: var(--spottler-bg-bar) !important;
    border-bottom: 4px solid var(--spottler-bg-bar-border) !important;
}

.spottler-subscribe-wrap .spottler-message--success {
    color: #ffffff !important;
    background: var(--spottler-success) !important;
    border-bottom-color: var(--spottler-success) !important;
}

.spottler-subscribe-wrap .spottler-message--error {
    color: #ffffff !important;
    background: var(--spottler-error) !important;
    border-bottom-color: var(--spottler-error) !important;
}

/* Responsive: stack on small screens */
@media (max-width: 600px) {
    .spottler-subscribe-wrap .spottler-subscribe-form {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    .spottler-subscribe-wrap .spottler-label {
        width: 100% !important;
    }

    .spottler-subscribe-wrap .spottler-field--email {
        flex: 1 1 100% !important;
    }

    .spottler-subscribe-wrap .spottler-field--button {
        width: 100% !important;
    }

    .spottler-subscribe-wrap .spottler-button {
        width: 100% !important;
    }
}