/*
 * Tarificador Vida Hipoteca v2 — Entry form styles.
 *
 * Editorial-financial direction. Fraunces is used only for the main
 * branching question heading + the question titles within each step.
 * Everything else is system-ui so load weight stays minimal.
 *
 * Brand color is injected via --tvhm-primary inline by PHP so this
 * single stylesheet works for all brands (Piensin, SegurChollo, GF).
 *
 * Elementor-safe: mode-visibility rules use !important so Elementor's
 * generic `label { display: block }` doesn't bleed through.
 */

/* ── Design tokens (scoped to .tvhm-form) ─────────────────────────── */

.tvhm-form,
.tvhm-contratar-form {
    --tvhm-primary:       #2EA64C;
    --tvhm-primary-dark:  #1f7836;
    --tvhm-text:          #14171f;
    --tvhm-text-muted:    #5b6470;
    --tvhm-text-subtle:   #8a93a0;
    --tvhm-bg:            #ffffff;
    --tvhm-bg-soft:       #f7f8f9;
    --tvhm-border:        #e6e8ec;
    --tvhm-border-strong: #c8ccd2;
    --tvhm-error:         #7a2c1f;
    --tvhm-radius:        10px;
    --tvhm-radius-lg:     16px;
    --tvhm-spacing-xs:    6px;
    --tvhm-spacing-sm:    10px;
    --tvhm-spacing:       16px;
    --tvhm-spacing-lg:    24px;
    --tvhm-spacing-xl:    40px;
    --tvhm-font:          inherit;
    --tvhm-display:       'Fraunces', Georgia, "Times New Roman", serif;
}

.tvhm-form {
    color: var(--tvhm-text);
    font-family: var(--tvhm-font);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
.tvhm-form *,
.tvhm-form *::before,
.tvhm-form *::after { box-sizing: inherit; }

/* ── Steps ─────────────────────────────────────────────────────────── */

.tvhm-step {
    margin: 0 0 var(--tvhm-spacing-xl);
    padding: 0;
    border: 0;
    animation: tvhm-step-reveal 360ms cubic-bezier(0.2, 0.7, 0.1, 1) backwards;
}
.tvhm-step[hidden] { display: none; }
@keyframes tvhm-step-reveal {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Questions ─────────────────────────────────────────────────────── */

.tvhm-question {
    margin: 0 0 var(--tvhm-spacing-xs);
    font-family: var(--tvhm-font);
    font-size: clamp(16px, 2.2vw, 19px);
    font-weight: 700;
    line-height: 1.3;
    color: var(--tvhm-text);
}
/* Section headings (after branching) keep a bit more presence */
.tvhm-step-hipoteca .tvhm-question,
.tvhm-step-fechas   .tvhm-question,
.tvhm-step-contacto .tvhm-question {
    font-size: clamp(17px, 2.2vw, 20px);
    color: var(--tvhm-primary-dark, #1f7836);
}

/* ── Mode-aware copy (tiene / busca) ──────────────────────────────────
 *
 * ALL .tvhm-only-tiene and .tvhm-only-busca elements start hidden.
 * When the user picks a branch the form gets data-mode="tiene" or
 * data-mode="busca" and only the matching set becomes visible.
 *
 * IMPORTANT: scoped to .tvhm-entry-form (the standalone shortcode form)
 * so this rule never bleeds into .tvhm-recalc-form inside the results
 * page, which has its own visibility rules in tvhm-results.css.
 *
 * Using !important on the hide rule so Elementor's generic
 *   label { display: block }
 * or similar high-specificity theme rules can't bleed through.
 *
 * Show rules use explicit element selectors (div, h2, label, span) plus
 * attribute selector to get enough specificity to override !important.
 * ─────────────────────────────────────────────────────────────────── */

/* Default: hide everything branch-conditional. */
.tvhm-entry-form .tvhm-only-tiene,
.tvhm-entry-form .tvhm-only-busca { display: none !important; }

/* Reveal block-level elements. */
.tvhm-entry-form[data-mode="tiene"] div.tvhm-only-tiene,
.tvhm-entry-form[data-mode="tiene"] h2.tvhm-only-tiene,
.tvhm-entry-form[data-mode="tiene"] h3.tvhm-only-tiene,
.tvhm-entry-form[data-mode="tiene"] fieldset.tvhm-only-tiene { display: block !important; }
/* tvhm-field-inline uses flex, so restore flex (not block) when revealed */
.tvhm-entry-form[data-mode="tiene"] div.tvhm-field-inline.tvhm-only-tiene { display: flex !important; }

.tvhm-entry-form[data-mode="busca"] div.tvhm-only-busca,
.tvhm-entry-form[data-mode="busca"] h2.tvhm-only-busca,
.tvhm-entry-form[data-mode="busca"] h3.tvhm-only-busca,
.tvhm-entry-form[data-mode="busca"] fieldset.tvhm-only-busca { display: block !important; }
.tvhm-entry-form[data-mode="busca"] div.tvhm-field-inline.tvhm-only-busca { display: flex !important; }
/* tvhm-field-pair is a grid container — must be restored as grid, not block */
.tvhm-entry-form[data-mode="busca"] div.tvhm-field-pair.tvhm-only-busca  { display: grid !important; }

/* Reveal inline / label elements. */
.tvhm-entry-form[data-mode="tiene"] label.tvhm-only-tiene,
.tvhm-entry-form[data-mode="tiene"] span.tvhm-only-tiene { display: inline-block !important; }

.tvhm-entry-form[data-mode="busca"] label.tvhm-only-busca,
.tvhm-entry-form[data-mode="busca"] span.tvhm-only-busca { display: inline-block !important; }

/* ── Branching buttons (step 1) ──────────────────────────────────────
 * Always green, white text, compact. Not tall cards — more like
 * prominent CTAs that clearly communicate the two paths.
 * ─────────────────────────────────────────────────────────────────── */
.tvhm-branching {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 400px) {
    .tvhm-branching { grid-template-columns: 1fr; }
}

#tvhm-form .tvhm-branch-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 16px 20px 20px;
    border: 2px solid var(--tvhm-primary, #2EA64C);
    border-radius: var(--tvhm-radius-lg);
    background: var(--tvhm-primary, #2EA64C);
    color: #fff;
    text-align: left;
    cursor: pointer;
    font: inherit;
    overflow: hidden;
    transition: background 150ms ease, border-color 150ms ease,
                box-shadow 150ms ease, transform 80ms ease;
}
#tvhm-form .tvhm-branch-btn:hover,
#tvhm-form .tvhm-branch-btn:focus-visible {
    background: var(--tvhm-primary-dark, #1f7836);
    border-color: var(--tvhm-primary-dark, #1f7836);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--tvhm-primary) 30%, transparent);
    outline: none;
}
#tvhm-form .tvhm-branch-btn:active { transform: translateY(1px); }
#tvhm-form .tvhm-branch-btn.tvhm-active {
    background: var(--tvhm-primary-dark, #1f7836);
    border-color: var(--tvhm-primary-dark, #1f7836);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tvhm-primary) 30%, transparent);
}
#tvhm-form .tvhm-branch-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}
#tvhm-form .tvhm-branch-sub {
    font-size: 13px;
    color: rgba(255,255,255,0.8);
    line-height: 1.4;
}

/* ── Fields ────────────────────────────────────────────────────────── */

#tvhm-form .tvhm-field {
    margin: 0 0 var(--tvhm-spacing-sm);
}
#tvhm-form .tvhm-field > label,
#tvhm-form .tvhm-question-label {
    display: block;
    margin-bottom: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--tvhm-text);
    line-height: 1.3;
}
#tvhm-form .tvhm-question-label {
    font-size: 16px;
    margin-bottom: 12px;
}

/* ── Inline question row: [label] [Sí/No] [conditional-input] ──────
 * Used for all the "¿Sabes...?" questions so everything sits on one
 * horizontal line instead of stacking. On narrow screens the conditional
 * wraps below naturally via flex-wrap.
 * ─────────────────────────────────────────────────────────────────── */
#tvhm-form .tvhm-field-inline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 16px;
    padding: 5px 0;
    margin: 0;
}
.tvhm-field-inline:last-child { }

/* Question text inside the inline row */
.tvhm-question-inline {
    flex: 1 1 180px;
    font-size: 15px;
    font-weight: 500;
    color: var(--tvhm-text);
    line-height: 1.4;
    /* mode-conditional spans inside this */
}

/* Radios inside inline row — no margin */
.tvhm-field-inline .tvhm-radios {
    flex: 0 0 auto;
    margin: 0;
}

/* Conditional inside inline row — no background, no animation, inline */
.tvhm-field-inline .tvhm-conditional {
    margin: 0;
    padding: 0;
    background: transparent;
    animation: none;
    border-radius: 0;
}
.tvhm-field-inline .tvhm-conditional[hidden] { display: none; }
/* The short input inside the conditional */
.tvhm-field-inline .tvhm-conditional .tvhm-input {
    padding: 10px 14px;
    font-size: 15px;
}
.tvhm-field-inline .tvhm-conditional label { display: none; }

/* ── Field pair: two fields side by side (e.g. capital + años busca) ── */
.tvhm-field-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 420px) {
    .tvhm-field-pair { grid-template-columns: 1fr; }
}
.tvhm-field-pair .tvhm-field { margin: 0; }

/* ── Date pair: titular + pareja side by side ──────────────────────── */
.tvhm-date-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}
@media (max-width: 420px) {
    .tvhm-date-pair { grid-template-columns: 1fr; }
}
.tvhm-date-pair .tvhm-conditional {
    margin: 0;
    padding: 0;
    background: transparent;
    animation: none;
    border-radius: 0;
}
.tvhm-date-pair .tvhm-conditional[hidden] { display: none; }

/* ── Placeholder-only fields (contact section) ─────────────────────
 * No visible label above — the placeholder carries the label role.
 * The <label> is kept in HTML for a11y but visually hidden.
 * ─────────────────────────────────────────────────────────────────── */
.tvhm-field-nolabel > label {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
}
.tvhm-field-nolabel .tvhm-input {
    font-size: 16px;
}
.tvhm-field-nolabel .tvhm-input::placeholder {
    color: var(--tvhm-text-muted, #5b6470);
    font-weight: 400;
}
/* Group contact fields into 2-col where they pair up (telefono + email) */
.tvhm-contact-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 480px) {
    .tvhm-contact-row { grid-template-columns: 1fr; }
}
.tvhm-optional {
    font-weight: 400;
    color: var(--tvhm-text-muted);
    font-size: 0.9em;
}
.tvhm-required-mark {
    border: 0;
    text-decoration: none;
    color: var(--tvhm-primary);
    font-weight: 700;
    margin-left: 2px;
}

/* ── Inputs ─────────────────────────────────────────────────────────── */

.tvhm-input {
    display: block;
    width: 100%;
    padding: 14px 16px;
    font: inherit;
    font-size: 17px;
    color: var(--tvhm-text);
    background: var(--tvhm-bg);
    border: 1px solid var(--tvhm-border-strong);
    border-radius: var(--tvhm-radius);
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.tvhm-input:focus {
    outline: none;
    border-color: var(--tvhm-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tvhm-primary) 20%, transparent);
}
.tvhm-input.tvhm-error-input {
    border-color: var(--tvhm-error);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tvhm-error) 20%, transparent);
}
.tvhm-input-short { max-width: 180px; }
.tvhm-input-nif   { text-transform: uppercase; }
.tvhm-textarea { resize: vertical; min-height: 100px; }
.tvhm-field-hint {
    margin: 4px 0 10px;
    font-size: 0.84em;
    line-height: 1.55;
    color: var(--tvhm-text-muted, #5b6470);
}

/* Input + suffix wrapper (€ / %) */
.tvhm-input-wrap {
    position: relative;
    display: flex;
    align-items: stretch;
}
.tvhm-input-wrap-short  { max-width: 180px; }
.tvhm-input-wrap-medium { max-width: 240px; }
.tvhm-input-wrap .tvhm-input { padding-right: 42px; }
.tvhm-input-suffix {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--tvhm-text-muted);
    font-size: 15px;
    font-weight: 500;
    pointer-events: none;
}

.tvhm-input[type="number"]::-webkit-inner-spin-button,
.tvhm-input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.tvhm-input[type="number"] {
    -moz-appearance: textfield;
}

/* ── Radios — segmented pill group ───────────────────────────────────
 * The radio inputs are visually hidden but remain in the a11y tree.
 * Each <label> becomes a pill. The checked state is shown via :has().
 * The pill track background + border creates the "segmented control" look.
 * ─────────────────────────────────────────────────────────────────── */
.tvhm-radios {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0;
    margin: var(--tvhm-spacing-xs) 0 var(--tvhm-spacing-sm);
    padding: 4px;
    background: var(--tvhm-bg-soft);
    border: 1px solid var(--tvhm-border);
    border-radius: 12px;
}
.tvhm-radios label {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    font-weight: 500;
    font-size: 15px;
    margin: 0;
    padding: 10px 22px;
    border-radius: 8px;
    color: var(--tvhm-text-muted);
    transition: color 120ms ease, background 120ms ease;
    user-select: none;
    min-width: 64px;
}
.tvhm-radios label:hover {
    color: var(--tvhm-text);
}
/* The native radio stays clickable (fills the label) but is invisible. */
.tvhm-radios input[type="radio"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
/* Checked pill: white surface lifts above the track. */
.tvhm-radios label:has(input[type="radio"]:checked) {
    background: var(--tvhm-bg);
    color: var(--tvhm-text);
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08),
                0 0 0 1px var(--tvhm-border-strong);
}
.tvhm-radios label:has(input[type="radio"]:focus-visible) {
    box-shadow: 0 1px 3px rgba(0,0,0,0.06),
                0 0 0 2px var(--tvhm-primary);
}

/* ── Checkbox ──────────────────────────────────────────────────────── */

.tvhm-checkbox-label {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500 !important;
    padding: 8px 0;
}
.tvhm-checkbox-label input[type="checkbox"] {
    accent-color: var(--tvhm-primary);
    margin: 0;
    flex: 0 0 auto;
}

/* ── Conditional reveals ──────────────────────────────────────────── */

.tvhm-conditional {
    margin-top: var(--tvhm-spacing);
    padding: var(--tvhm-spacing) var(--tvhm-spacing-lg);
    background: var(--tvhm-bg-soft);
    border-radius: var(--tvhm-radius);
    animation: tvhm-conditional-reveal 240ms ease-out backwards;
}
@keyframes tvhm-conditional-reveal {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.tvhm-conditional[hidden] { display: none; }
.tvhm-conditional > label {
    display: block;
    margin-bottom: var(--tvhm-spacing-xs);
    font-weight: 500;
}

.tvhm-tipo-interes-wrapper .tvhm-conditional,
.tvhm-sabes-anos-wrapper .tvhm-conditional {
    max-width: 90px;
    flex: 1;
}

/* ── Errors ────────────────────────────────────────────────────────── */

.tvhm-error {
    display: block;
    margin-top: var(--tvhm-spacing-xs);
    color: var(--tvhm-error);
    font-size: 0.88rem;
    min-height: 1em;
}
.tvhm-error:empty { display: none; }

.tvhm-form-error {
    margin: var(--tvhm-spacing) 0;
    padding: var(--tvhm-spacing);
    background: color-mix(in srgb, var(--tvhm-error) 10%, white);
    border-left: 4px solid var(--tvhm-error);
    border-radius: var(--tvhm-radius);
    color: var(--tvhm-error);
    font-weight: 500;
}
.tvhm-form-error[hidden] { display: none; }

/* ── Actions + Submit ──────────────────────────────────────────────── */

.tvhm-actions {
    margin-top: var(--tvhm-spacing-xl);
    text-align: center;
}
.tvhm-actions[hidden] { display: none; }

/* Prefixed with .tvhm-container so Elementor button styles don't win. */
.tvhm-container .tvhm-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 380px;
    padding: 18px 32px;
    font-family: var(--tvhm-font);
    font-size: 17px;
    font-weight: 600;
    color: #fff;
    background: var(--tvhm-primary);
    border: 0;
    border-radius: var(--tvhm-radius);
    cursor: pointer;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--tvhm-primary) 28%, transparent);
    transition: background 120ms ease, transform 80ms ease, box-shadow 200ms ease;
}
.tvhm-container .tvhm-submit:hover,
.tvhm-container .tvhm-submit:focus-visible {
    background: var(--tvhm-primary-dark);
    color: #fff;
    box-shadow: 0 6px 20px color-mix(in srgb, var(--tvhm-primary) 38%, transparent);
    outline: none;
}
.tvhm-container .tvhm-submit:active { transform: translateY(1px); }
.tvhm-container .tvhm-submit:disabled {
    cursor: not-allowed;
    opacity: 0.65;
    transform: none;
}

.tvhm-submit-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: tvhm-spin 700ms linear infinite;
}
.tvhm-submit-spinner[hidden] { display: none; }

.tvhm-disclaimer {
    margin: var(--tvhm-spacing) 0 0;
    color: var(--tvhm-text-muted);
    font-size: 0.85rem;
    line-height: 1.4;
}

/* ── Animations ────────────────────────────────────────────────────── */

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

/* ── Reduce motion ─────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .tvhm-form *,
    .tvhm-form *::before,
    .tvhm-form *::after {
        transition: none !important;
        animation: none !important;
    }
}