/**
 * Mathersoft_FormsAndPopups — unified huisstijl v1.7.0
 * Alle popups en cards renderen in één consistente stijl.
 *
 * Design tokens aangelijnd op KiyOH reviews + stapelkorting cards:
 * - Primary: orange-800 (#9a3412) — Horeca brand
 * - Text: #1A2E52 — donkerblauw, zelfde als CMS-blocks
 * - Font: Inter / system stack
 * - Radius: 8px (wrapper), 6px (buttons, inputs)
 * - Shadow: brand-tinted soft shadow
 */

:root {
    --msfp-primary: #9a3412;
    --msfp-primary-hover: #7c2d12;
    --msfp-text: #1A2E52;
    --msfp-text-muted: #64748b;
    --msfp-bg: #ffffff;
    --msfp-bg-subtle: #f8fafc;
    --msfp-border: #e2e8f0;
    --msfp-border-strong: #cbd5e1;
    --msfp-radius: 8px;
    --msfp-radius-sm: 6px;
    --msfp-shadow: 0 10px 40px rgba(26, 46, 82, 0.18);
    --msfp-shadow-sm: 0 2px 8px rgba(26, 46, 82, 0.08);
    --msfp-font: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

    --msfp-success-bg: #d1fae5;
    --msfp-success-text: #065f46;
    --msfp-error-bg: #fee2e2;
    --msfp-error-text: #991b1b;
    --msfp-error-border: #ef4444;
    --msfp-warning-bg: #fffbeb;
    --msfp-warning-border: #fbbf24;
    --msfp-warning-text: #78350f;
}

/* ============ WRAPPER + CARD ============ */
.msfp-popup {
    font-family: var(--msfp-font);
    color: var(--msfp-text);
    line-height: 1.5;
    box-sizing: border-box;
}
.msfp-popup * { box-sizing: border-box; }

/* ============ TITLE + TEXT ============ */
.msfp-popup h2.msfp-title {
    margin: 0 0 16px;
    color: var(--msfp-text);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.msfp-popup p, .msfp-popup .msfp-body {
    margin: 0 0 12px;
    color: var(--msfp-text);
    font-size: 15px;
}
.msfp-popup .msfp-description {
    color: var(--msfp-text-muted);
    font-size: 14px;
    margin: 0 0 16px;
}

/* ============ FORM FIELDS ============ */
.msfp-popup .msfp-field { margin-bottom: 12px; }
.msfp-popup .msfp-field label {
    display: block;
    margin-bottom: 4px;
    font-weight: 500;
    font-size: 14px;
    color: var(--msfp-text);
}
.msfp-popup .msfp-field input[type="text"],
.msfp-popup .msfp-field input[type="email"],
.msfp-popup .msfp-field input[type="tel"],
.msfp-popup .msfp-field input[type="number"],
.msfp-popup .msfp-field textarea,
.msfp-popup .msfp-field select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--msfp-border-strong);
    border-radius: var(--msfp-radius-sm);
    font-family: inherit;
    font-size: 14px;
    color: var(--msfp-text);
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.msfp-popup .msfp-field input:focus,
.msfp-popup .msfp-field textarea:focus,
.msfp-popup .msfp-field select:focus {
    outline: none;
    border-color: var(--msfp-primary);
    box-shadow: 0 0 0 3px rgba(154, 52, 18, 0.12);
}
.msfp-popup .msfp-error {
    display: none;
    margin-top: 4px;
    font-size: 12px;
    color: var(--msfp-error-text);
}
.msfp-popup .msfp-field.has-error input,
.msfp-popup .msfp-field.has-error textarea,
.msfp-popup .msfp-field.has-error select {
    border-color: var(--msfp-error-border);
}

/* ============ SUBMIT BUTTON ============ */
.msfp-popup .msfp-submit {
    margin-top: 16px;
    width: 100%;
    background: var(--msfp-primary);
    color: #fff;
    border: 0;
    padding: 12px 20px;
    border-radius: var(--msfp-radius-sm);
    font-family: inherit;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: background .15s ease, transform .05s ease;
}
.msfp-popup .msfp-submit:hover:not(:disabled) { background: var(--msfp-primary-hover); }
.msfp-popup .msfp-submit:active:not(:disabled) { transform: translateY(1px); }
.msfp-popup .msfp-submit:disabled { opacity: .6; cursor: not-allowed; }

/* ============ CLOSE BUTTON ============ */
.msfp-popup .msfp-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    background: transparent;
    border: 0;
    color: var(--msfp-text-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    border-radius: var(--msfp-radius-sm);
    transition: background .15s ease, color .15s ease;
}
.msfp-popup .msfp-close:hover { background: var(--msfp-bg-subtle); color: var(--msfp-text); }

/* ============ SUCCESS / MESSAGE BOXES ============ */
.msfp-popup .msfp-message {
    display: none;
    padding: 12px 16px;
    border-radius: var(--msfp-radius-sm);
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 500;
}
.msfp-popup .msfp-message--success { background: var(--msfp-success-bg); color: var(--msfp-success-text); }
.msfp-popup .msfp-message--error { background: var(--msfp-error-bg); color: var(--msfp-error-text); }

/* ============ CART OPT-IN + EMPTY WARNING ============ */
.msfp-popup .msfp-cart-optin {
    background: var(--msfp-bg-subtle);
    border: 1px solid var(--msfp-border);
    border-radius: var(--msfp-radius-sm);
    padding: 10px 12px;
    font-size: 13px;
    color: var(--msfp-text);
    margin: 8px 0 12px;
}
.msfp-popup .msfp-cart-optin input[type="checkbox"] { margin-right: 8px; vertical-align: middle; }
.msfp-popup .msfp-context-empty {
    background: var(--msfp-warning-bg);
    border: 1px solid var(--msfp-warning-border);
    color: var(--msfp-warning-text);
    border-radius: var(--msfp-radius-sm);
    padding: 10px 12px;
    font-size: 13px;
    margin: 8px 0 12px;
}

/* ============ POPUP CARD CONTAINER (wrapper) ============ */
.msfp-popup.msfp-card {
    background: var(--msfp-bg);
    border-radius: var(--msfp-radius);
    box-shadow: var(--msfp-shadow);
    padding: 24px;
    position: relative;
}