/*
 * Zerova × Contact Form 7
 * All colors use CSS custom properties — no hardcoded values.
 * Hierarchy: Dashboard vars → Elementor widget overrides → Custom CSS
 */

/* ── Shared base tokens ──────────────────────────────────── */
.zv-form-wrap {
    /* Accent — from Dashboard color system */
    --zf-accent:        var(--lime,         #B4ED5F);
    --zf-accent-fg:     var(--lime-ink,     #0A0B0F);

    /* Status */
    --zf-error:         var(--zv-danger,    #EF4444);
    --zf-success:       var(--zv-success,   #10B981);

    /* Radius — from Dashboard */
    --zf-radius:        var(--r-btn,        10px);

    /* Gap */
    --zf-gap:           16px;

    font-family: var(--zv-font-body, 'Inter', sans-serif);
}

/* ── Style: DARK ─────────────────────────────────────────── */
.zv-form--dark {
    --zf-text:          var(--paper,            rgba(247,245,240,1));
    --zf-label:         var(--fg-mute,          rgba(247,245,240,0.5));
    --zf-placeholder:   var(--fg-mute,          rgba(247,245,240,0.3));
    --zf-field-bg:      var(--card-bg,          rgba(255,255,255,0.04));
    --zf-field-border:  var(--line,             rgba(255,255,255,0.10));
    --zf-field-bg-focus:var(--card-bg,          rgba(255,255,255,0.07));
    color: var(--zf-text);
}

/* ── Style: LIGHT ────────────────────────────────────────── */
.zv-form--light {
    --zf-text:          var(--ink,              rgba(10,11,15,1));
    --zf-label:         var(--fg-mute,          rgba(10,11,15,0.45));
    --zf-placeholder:   var(--fg-mute,          rgba(10,11,15,0.35));
    --zf-field-bg:      var(--card-bg,          #ffffff);
    --zf-field-border:  var(--line,             rgba(10,11,15,0.15));
    --zf-field-bg-focus:var(--card-bg,          #ffffff);
    color: var(--zf-text);
}

/* ── Style: MINIMAL ──────────────────────────────────────── */
.zv-form--minimal {
    --zf-text:          currentColor;
    --zf-label:         currentColor;
    --zf-placeholder:   currentColor;
    --zf-field-bg:      transparent;
    --zf-field-border:  currentColor;
    --zf-field-bg-focus:transparent;
}

/* ── Style: GLASS ────────────────────────────────────────── */
.zv-form--glass {
    --zf-text:          var(--paper,            rgba(247,245,240,1));
    --zf-label:         var(--fg-mute,          rgba(255,255,255,0.5));
    --zf-placeholder:   var(--fg-mute,          rgba(255,255,255,0.4));
    --zf-field-bg:      rgba(255,255,255,0.08);
    --zf-field-border:  rgba(255,255,255,0.18);
    --zf-field-bg-focus:rgba(255,255,255,0.14);
    color: var(--zf-text);
}

/* ── Header ──────────────────────────────────────────────── */
.zv-form-header { margin-bottom: 32px; }

.zv-form-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; border-radius: 999px;
    font-family: var(--zv-font-mono, 'JetBrains Mono', monospace);
    font-size: 10px; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    background: color-mix(in srgb, var(--zf-accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--zf-accent) 28%, transparent);
    color: var(--zf-accent);
    margin-bottom: 14px;
}
.zv-form-badge::before {
    content: ''; width: 5px; height: 5px; border-radius: 50%;
    background: var(--zf-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--zf-accent) 20%, transparent);
}
.zv-form-heading {
    font-family: var(--zv-font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: clamp(26px, 3vw, 42px);
    font-weight: 700; letter-spacing: -.03em; line-height: 1.05;
    color: var(--zf-text, currentColor);
    margin: 0 0 10px;
}
.zv-form-sub {
    font-size: 15px; line-height: 1.6;
    color: var(--zf-label, currentColor);
    margin: 0;
}

/* ── Layout ──────────────────────────────────────────────── */
.zv-form--two-col .wpcf7-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--zf-gap);
    align-items: start;
}
.zv-form--two-col .wpcf7-form > p { margin: 0; }
.zv-form--two-col .wpcf7-form > p[data-width="full"],
.zv-form--two-col .wpcf7-form > p:last-of-type,
.zv-form--two-col .wpcf7-form > p:has(textarea),
.zv-form--two-col .wpcf7-form > .wpcf7-response-output { grid-column: 1 / -1; }
.zv-form--one-col .wpcf7-form > p { margin: 0 0 var(--zf-gap); }

/* ── Labels ──────────────────────────────────────────────── */
.zv-form-wrap label {
    display: block !important;
    font-size: 11px !important; font-weight: 600 !important;
    letter-spacing: .09em !important; text-transform: uppercase !important;
    margin-bottom: 7px !important;
    color: var(--zf-label, currentColor) !important;
    opacity: 1 !important;
}

/* ── Inputs ──────────────────────────────────────────────── */
.zv-form-wrap input[type="text"],
.zv-form-wrap input[type="email"],
.zv-form-wrap input[type="tel"],
.zv-form-wrap input[type="number"],
.zv-form-wrap select,
.zv-form-wrap textarea {
    width: 100% !important;
    background: var(--zf-field-bg) !important;
    border: 1px solid var(--zf-field-border) !important;
    border-radius: var(--zf-radius) !important;
    padding: 13px 16px !important;
    font-family: var(--zv-font-body, 'Inter', sans-serif) !important;
    font-size: 14px !important;
    color: var(--zf-text, currentColor) !important;
    outline: none !important;
    transition: border-color .2s, background .2s, box-shadow .2s !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
}
.zv-form-wrap input::placeholder,
.zv-form-wrap textarea::placeholder {
    color: var(--zf-placeholder, currentColor) !important;
    opacity: 1 !important;
}
.zv-form-wrap input:focus,
.zv-form-wrap textarea:focus,
.zv-form-wrap select:focus {
    border-color: var(--zf-accent) !important;
    background: var(--zf-field-bg-focus) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--zf-accent) 15%, transparent) !important;
}
.zv-form-wrap textarea {
    resize: vertical !important;
    min-height: 130px !important;
    line-height: 1.6 !important;
}

/* Minimal: underline only */
.zv-form--minimal input[type="text"],
.zv-form--minimal input[type="email"],
.zv-form--minimal input[type="tel"],
.zv-form--minimal input[type="number"],
.zv-form--minimal select,
.zv-form--minimal textarea {
    border: none !important;
    border-bottom: 1.5px solid var(--zf-field-border) !important;
    border-radius: 0 !important;
    padding: 10px 0 !important;
    opacity: .7;
}
.zv-form--minimal input:focus,
.zv-form--minimal textarea:focus {
    border-bottom-color: var(--zf-accent) !important;
    box-shadow: none !important;
    opacity: 1;
}

/* Glass: backdrop blur */
.zv-form--glass input[type="text"],
.zv-form--glass input[type="email"],
.zv-form--glass input[type="tel"],
.zv-form--glass input[type="number"],
.zv-form--glass select,
.zv-form--glass textarea {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

/* ── Submit button ───────────────────────────────────────── */
/* Ultra-high specificity to beat Elementor's dynamic inline styles
   which have specificity (0,5,0,1): .elementor-X .elementor-element.elementor-element-HASH .wpcf7 input[type="submit"]
   Our counter: (0,6,0,1) minimum */
.zv-form-wrap input[type="submit"],
.zv-form-wrap .wpcf7-submit,
.elementor-widget.elementor-widget-zerova_contact_form .elementor-widget-container .zv-form-wrap .wpcf7 input[type="submit"],
.elementor .elementor-element .elementor-widget-container .zv-form-wrap .wpcf7-form input[type="submit"] {
    background: var(--zf-accent) !important;
    color: var(--zf-accent-fg) !important;
    border: none !important;
    border-radius: var(--zf-radius) !important;
    padding: 13px 28px !important;
    font-family: var(--zv-font-body, 'Inter', sans-serif) !important;
    font-size: 14px !important; font-weight: 600 !important;
    cursor: pointer !important;
    transition: transform .2s, box-shadow .2s !important;
    box-shadow: 0 4px 18px -6px color-mix(in srgb, var(--zf-accent) 50%, transparent) !important;
    letter-spacing: .01em !important;
}
.zv-form-wrap input[type="submit"]:hover,
.zv-form-wrap .wpcf7-submit:hover,
.elementor .elementor-element .elementor-widget-container .zv-form-wrap .wpcf7-form input[type="submit"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px -6px color-mix(in srgb, var(--zf-accent) 65%, transparent) !important;
}
.zv-form-wrap .wpcf7-spinner { display: none !important; }

/* ── Validation ──────────────────────────────────────────── */
.zv-form-wrap .wpcf7-not-valid-tip {
    font-size: 11px !important;
    color: var(--zf-error) !important;
    margin-top: 5px !important;
}
.zv-form-wrap .wpcf7-not-valid input,
.zv-form-wrap .wpcf7-not-valid textarea {
    border-color: var(--zf-error) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--zf-error) 12%, transparent) !important;
}
.zv-form-wrap .wpcf7-response-output {
    grid-column: 1 / -1;
    padding: 12px 16px !important;
    border-radius: var(--zf-radius) !important;
    font-size: 13px !important; font-weight: 500 !important;
    margin: 0 !important; border: 1px solid !important;
}
.zv-form-wrap .wpcf7-response-output.wpcf7-mail-sent-ok {
    background: color-mix(in srgb, var(--zf-success) 10%, transparent) !important;
    border-color: color-mix(in srgb, var(--zf-success) 35%, transparent) !important;
    color: var(--zf-success) !important;
}
.zv-form-wrap .wpcf7-response-output.wpcf7-validation-errors,
.zv-form-wrap .wpcf7-response-output.wpcf7-mail-sent-ng {
    background: color-mix(in srgb, var(--zf-error) 10%, transparent) !important;
    border-color: color-mix(in srgb, var(--zf-error) 35%, transparent) !important;
    color: var(--zf-error) !important;
}

/* ── Checkboxes & Radio ──────────────────────────────────── */
.zv-form-wrap .wpcf7-checkbox label,
.zv-form-wrap .wpcf7-radio label,
.zv-form-wrap .wpcf7-acceptance label {
    display: inline-flex !important;
    align-items: center !important; gap: 10px !important;
    font-size: 14px !important; font-weight: 400 !important;
    text-transform: none !important; letter-spacing: 0 !important;
    color: var(--zf-text, currentColor) !important;
    cursor: pointer !important;
}
.zv-form-wrap .wpcf7-checkbox input[type="checkbox"],
.zv-form-wrap .wpcf7-radio input[type="radio"],
.zv-form-wrap .wpcf7-acceptance input[type="checkbox"] {
    width: 18px !important; height: 18px !important;
    border: 1px solid var(--zf-field-border) !important;
    border-radius: 5px !important;
    background: var(--zf-field-bg) !important;
    appearance: none !important; -webkit-appearance: none !important;
    cursor: pointer !important; padding: 0 !important;
    flex-shrink: 0 !important; transition: all .15s !important;
    position: relative !important;
}
.zv-form-wrap .wpcf7-radio input[type="radio"] { border-radius: 50% !important; }
.zv-form-wrap .wpcf7-checkbox input[type="checkbox"]:checked,
.zv-form-wrap .wpcf7-radio input[type="radio"]:checked,
.zv-form-wrap .wpcf7-acceptance input[type="checkbox"]:checked {
    background: var(--zf-accent) !important;
    border-color: var(--zf-accent) !important;
}
.zv-form-wrap .wpcf7-checkbox input[type="checkbox"]:checked::after,
.zv-form-wrap .wpcf7-acceptance input[type="checkbox"]:checked::after {
    content: '' !important; position: absolute !important;
    left: 5px !important; top: 2px !important;
    width: 5px !important; height: 9px !important;
    border: 2px solid var(--zf-accent-fg) !important;
    border-top: none !important; border-left: none !important;
    transform: rotate(45deg) !important;
}
.zv-form-wrap .wpcf7-radio input[type="radio"]:checked::after {
    content: '' !important; position: absolute !important;
    inset: 4px !important; background: var(--zf-accent-fg) !important;
    border-radius: 50% !important;
}

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 640px) {
    .zv-form--two-col .wpcf7-form { grid-template-columns: 1fr !important; }
}