/**
 * SalesFision Forms — frontend styles.
 *
 * Every rendered form is scoped via .sf-form and styled through CSS
 * variables that the renderer sets inline on the form element. Editing
 * the design in admin updates the variables; everything else cascades.
 */

.sf-form {
    --sf-primary:        #e63946;
    --sf-bg:             #161616;
    --sf-text:           #ffffff;
    --sf-muted:          #888888;
    --sf-radius:         10px;
    --sf-opacity:        1;
    --sf-field-bg:       #0e0e0e;
    --sf-field-border:   #2a2a2a;
    --sf-field-text:     #ffffff;
    --sf-field-opacity:  1;
    --sf-button-bg:      var(--sf-primary);
    --sf-button-text:    #ffffff;
    --sf-font:           inherit;

    box-sizing: border-box;
    background: var(--sf-bg);
    color: var(--sf-text);
    padding: 32px;
    border-radius: calc(var(--sf-radius) * 2);
    font-family: var(--sf-font);
    line-height: 1.5;
    max-width: 620px;
    margin: 0 auto;
    opacity: var(--sf-opacity);
}

/* ===== Style presets =====================================================
   The "Glass" and "Neon" presets need effects that go beyond plain colour
   variables — backdrop-filter, glow, etc. They're keyed off the
   .sf-form-style-glass / .sf-form-style-neon class the renderer adds.
   ======================================================================= */

.sf-form-style-glass {
    background: color-mix(in srgb, var(--sf-bg) 65%, transparent);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid color-mix(in srgb, var(--sf-text) 15%, transparent);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.sf-form-style-glass input.sf-form-input,
.sf-form-style-glass select.sf-form-input,
.sf-form-style-glass textarea.sf-form-input,
.sf-form-style-glass .sf-form-option {
    background: color-mix(in srgb, var(--sf-field-bg) 50%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.sf-form-style-neon {
    border: 1px solid var(--sf-primary);
    box-shadow: 0 0 24px color-mix(in srgb, var(--sf-primary) 40%, transparent),
                inset 0 0 12px color-mix(in srgb, var(--sf-primary) 8%, transparent);
}

.sf-form-style-neon .sf-form-btn {
    box-shadow: 0 0 16px color-mix(in srgb, var(--sf-button-bg) 60%, transparent);
}

.sf-form-style-neon input.sf-form-input:focus,
.sf-form-style-neon select.sf-form-input:focus,
.sf-form-style-neon textarea.sf-form-input:focus {
    box-shadow: 0 0 12px color-mix(in srgb, var(--sf-primary) 50%, transparent);
}

.sf-form *,
.sf-form *::before,
.sf-form *::after { box-sizing: border-box; }

.sf-form-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--sf-text);
    margin: 0 0 16px;
}

.sf-form-description {
    color: var(--sf-muted);
    font-size: 14px;
    margin: 0 0 20px;
}

.sf-form-field {
    margin-bottom: 16px;
}

.sf-form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--sf-text);
    margin-bottom: 6px;
    letter-spacing: 0.2px;
}

.sf-form-label .sf-required {
    color: var(--sf-primary);
    margin-left: 2px;
}

.sf-form-help {
    display: block;
    color: var(--sf-muted);
    font-size: 12px;
    margin-top: 4px;
    line-height: 1.45;
}

/* High-specificity selectors so user-agent input[disabled]/[type] rules
   (used in the admin live preview) don't override our CSS variables. */
.sf-form input.sf-form-input,
.sf-form select.sf-form-input,
.sf-form textarea.sf-form-input,
.sf-form input.sf-form-input:disabled,
.sf-form select.sf-form-input:disabled,
.sf-form textarea.sf-form-input:disabled {
    width: 100%;
    background: var(--sf-field-bg);
    color: var(--sf-field-text);
    border: 1px solid var(--sf-field-border);
    border-radius: var(--sf-radius);
    padding: 12px 14px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    opacity: var(--sf-field-opacity);
    transition: border-color 0.18s, background 0.18s;
    /* webkit needs this to honour the color rule on disabled inputs */
    -webkit-text-fill-color: var(--sf-field-text);
    -webkit-opacity: var(--sf-field-opacity);
}

.sf-form .sf-form-input::placeholder { color: var(--sf-muted); }

.sf-form input.sf-form-input:focus,
.sf-form select.sf-form-input:focus,
.sf-form textarea.sf-form-input:focus {
    border-color: var(--sf-primary);
    background: color-mix(in srgb, var(--sf-field-bg) 92%, var(--sf-primary));
}

.sf-form textarea.sf-form-input {
    min-height: 110px;
    resize: vertical;
}

.sf-form-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

@media (max-width: 480px) {
    .sf-form-options { grid-template-columns: 1fr; }
}

/* Checkbox/radio "pills" use the SAME field variables as text inputs so
   the admin can change "Veld-achtergrond / Veld-rand / Veld-tekstkleur"
   in one place and every kind of field updates together. */
.sf-form-option {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--sf-field-bg);
    border: 1px solid var(--sf-field-border);
    border-radius: var(--sf-radius);
    padding: 12px 14px;
    font-size: 14px;
    font-family: inherit;
    color: var(--sf-field-text);
    opacity: var(--sf-field-opacity);
    cursor: pointer;
    transition: border-color 0.18s, background 0.18s, color 0.18s;
}

.sf-form-option:hover {
    border-color: var(--sf-primary);
}

.sf-form-option input { accent-color: var(--sf-primary); }

.sf-form-option:has(input:checked) {
    border-color: var(--sf-primary);
    background: color-mix(in srgb, var(--sf-field-bg) 88%, var(--sf-primary));
}

/* Honeypot — hide it visually + from assistive tech, but keep submittable. */
.sf-form-hp {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    height: 1px !important;
    width: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.sf-form-error,
.sf-form-success {
    border-radius: var(--sf-radius);
    padding: 12px 16px;
    font-size: 13px;
    margin: 12px 0;
}

.sf-form-error {
    background: rgba(230, 57, 70, 0.10);
    border: 1px solid rgba(230, 57, 70, 0.35);
    color: var(--sf-primary);
}

.sf-form-success {
    background: rgba(70, 180, 80, 0.08);
    border: 1px solid rgba(70, 180, 80, 0.30);
    color: #46b450;
}

.sf-form-btn {
    display: inline-block;
    background: var(--sf-button-bg);
    color: var(--sf-button-text);
    border: none;
    border-radius: var(--sf-radius);
    padding: 13px 22px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: filter 0.18s, transform 0.05s;
    width: 100%;
    margin-top: 8px;
}

.sf-form-btn:hover  { filter: brightness(0.92); }
.sf-form-btn:active { transform: scale(0.99); }
.sf-form-btn:disabled { opacity: 0.6; cursor: wait; }

/* Admin live-preview adjustments — slightly smaller padding to fit sidebar. */
.sf-form-preview .sf-form { padding: 20px; max-width: 100%; margin: 0; }
.sf-form-preview .sf-form-btn { padding: 11px 18px; }