/* ═════════════════════════════════════════════
 * Fluent Forms · estilo aplicado al diseño MSV
 * Sobrescribe la apariencia por defecto del plugin
 * para que cualquier formulario que pongas en la
 * landing herede la estética de la marca.
 *
 * Selectores reales que usa Fluent Forms:
 *   .fluentform                      → wrapper raíz
 *   .ff-el-input--label              → label
 *   .ff-el-input--content            → wrapper input
 *   .ff_form_instance_*              → cada instancia
 *   .ff-btn-submit                   → botón enviar
 * ═══════════════════════════════════════════ */

body.msv-landing .fluentform,
body.msv-landing .fluentform * {
    font-family: var(--msv-font-body) !important;
    color: var(--msv-ink);
    box-sizing: border-box;
}

/* Estructura general */
body.msv-landing .fluentform {
    background: transparent;
    padding: 0;
    margin: 0;
}
body.msv-landing .fluentform .ff-el-group {
    margin-bottom: 18px;
}

/* Labels */
body.msv-landing .fluentform .ff-el-input--label label,
body.msv-landing .fluentform .ff-el-input--label > label {
    font-family: var(--msv-font-body) !important;
    font-size: 10px !important;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--msv-ink);
    font-weight: 600;
    margin: 0 0 8px;
    display: block;
}

/* Asterisco de requerido en magenta */
body.msv-landing .fluentform .ff-el-is-required.asterisk-right label:after,
body.msv-landing .fluentform .ff_required {
    color: var(--msv-magenta) !important;
}

/* Inputs / selects / textareas */
body.msv-landing .fluentform input[type="text"],
body.msv-landing .fluentform input[type="email"],
body.msv-landing .fluentform input[type="tel"],
body.msv-landing .fluentform input[type="url"],
body.msv-landing .fluentform input[type="number"],
body.msv-landing .fluentform input[type="password"],
body.msv-landing .fluentform input[type="date"],
body.msv-landing .fluentform select,
body.msv-landing .fluentform textarea,
body.msv-landing .fluentform .ff-el-form-control {
    width: 100% !important;
    padding: 16px 18px !important;
    border: 1px solid var(--msv-line) !important;
    background: #fff !important;
    color: var(--msv-ink) !important;
    font-family: var(--msv-font-body) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease;
    height: auto !important;
    outline: none !important;
}
body.msv-landing .fluentform textarea {
    min-height: 130px !important;
    resize: vertical;
}

/* Focus */
body.msv-landing .fluentform input:focus,
body.msv-landing .fluentform select:focus,
body.msv-landing .fluentform textarea:focus,
body.msv-landing .fluentform .ff-el-form-control:focus {
    border-color: var(--msv-magenta) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(210, 0, 131, 0.08) !important;
}

/* Placeholders */
body.msv-landing .fluentform ::placeholder { color: var(--msv-ink-soft); opacity: 0.8; }

/* Select arrow */
body.msv-landing .fluentform select {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--msv-ink) 50%),
        linear-gradient(135deg, var(--msv-ink) 50%, transparent 50%) !important;
    background-position:
        calc(100% - 18px) 50%,
        calc(100% - 13px) 50% !important;
    background-size: 5px 5px !important;
    background-repeat: no-repeat !important;
    padding-right: 36px !important;
}

/* Filas múltiples (dos columnas) */
body.msv-landing .fluentform .ff-t-cell { padding: 0 9px; }
body.msv-landing .fluentform .ff-t-container { margin: 0 -9px; }

/* Checkbox / radio */
body.msv-landing .fluentform input[type="checkbox"],
body.msv-landing .fluentform input[type="radio"] {
    accent-color: var(--msv-magenta);
    width: 18px !important;
    height: 18px !important;
    margin-right: 8px;
}
body.msv-landing .fluentform .ff-el-form-check-label {
    font-size: 14px !important;
    color: var(--msv-ink-soft) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    font-weight: 400 !important;
}

/* Help text */
body.msv-landing .fluentform .ff-el-help-message {
    font-size: 12px !important;
    color: var(--msv-ink-soft) !important;
    margin-top: 6px;
    letter-spacing: 0;
    text-transform: none;
}

/* Error states */
body.msv-landing .fluentform .ff-el-is-error input,
body.msv-landing .fluentform .ff-el-is-error select,
body.msv-landing .fluentform .ff-el-is-error textarea {
    border-color: #c03030 !important;
    background: #fff5f5 !important;
}
body.msv-landing .fluentform .error,
body.msv-landing .fluentform .text-danger {
    color: #c03030 !important;
    font-size: 12px !important;
    margin-top: 4px;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 500;
}

/* Submit button — usar estilo .msv-btn.btn-primary */
body.msv-landing .fluentform .ff-btn,
body.msv-landing .fluentform .ff-btn-submit {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--msv-magenta) !important;
    color: #fff !important;
    border: none !important;
    padding: 16px 30px !important;
    font-family: var(--msv-font-body) !important;
    font-size: 12px !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
    border-radius: 0 !important;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
    width: auto !important;
    box-shadow: none !important;
    height: auto !important;
}
body.msv-landing .fluentform .ff-btn:hover,
body.msv-landing .fluentform .ff-btn-submit:hover {
    background: var(--msv-magenta-dark) !important;
    transform: translateY(-2px);
    color: #fff !important;
}
body.msv-landing .fluentform .ff_submit_btn_wrapper {
    text-align: left;
    margin-top: 8px;
}

/* Mensaje de éxito */
body.msv-landing .ff-message-success,
body.msv-landing .fluentform_wrapper_general .ff-message-success {
    background: var(--msv-cream) !important;
    border-left: 4px solid var(--msv-magenta) !important;
    color: var(--msv-ink) !important;
    padding: 22px 28px !important;
    font-size: 15px !important;
    line-height: 1.6;
    border-radius: 0;
}
body.msv-landing .ff-message-success * { color: var(--msv-ink) !important; }

/* Secciones tipo "Step" (multi-step forms) */
body.msv-landing .fluentform .ff-step-header { background: transparent !important; padding: 0 !important; }
body.msv-landing .fluentform .ff-step-titles { gap: 0 !important; }
body.msv-landing .fluentform .ff-step-titles .ff-active {
    color: var(--msv-magenta) !important;
}
body.msv-landing .fluentform .ff-step-titles li {
    font-size: 11px !important;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
}

/* Section breaks / titles dentro del form */
body.msv-landing .fluentform .ff-section-title h2,
body.msv-landing .fluentform .ff-section-title h3 {
    font-family: var(--msv-font-display) !important;
    font-style: italic;
    color: var(--msv-magenta) !important;
    font-weight: 500;
    font-size: 24px !important;
    margin: 24px 0 12px;
}

/* GDPR / consent — link style */
body.msv-landing .fluentform .ff-el-form-check-label a {
    color: var(--msv-magenta);
    text-decoration: underline;
}

/* Honeypot / hidden */
body.msv-landing .fluentform .ff-honeypot-wrap { display: none !important; }

/* Star rating */
body.msv-landing .fluentform .ff-el-rating { color: var(--msv-magenta) !important; }

/* Date picker (flatpickr) */
body.msv-landing .flatpickr-day.selected,
body.msv-landing .flatpickr-day.selected.inRange {
    background: var(--msv-magenta) !important;
    border-color: var(--msv-magenta) !important;
}
body.msv-landing .flatpickr-day:hover {
    background: var(--msv-cream) !important;
    border-color: var(--msv-cream) !important;
    color: var(--msv-ink) !important;
}

/* Responsive */
@media (max-width: 720px) {
    body.msv-landing .fluentform .ff-t-cell {
        width: 100% !important;
        padding: 0 !important;
    }
    body.msv-landing .fluentform .ff-t-container { margin: 0 !important; }
}