/* ==========================================================================
   Contact page — Yvofit 2026
   (shared header / reviews live in theme.css)
   ========================================================================== */

/* Flash messages ----------------------------------------------------------- */
.flash-list {
    list-style: none;
    margin: 0 0 1.6rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .7rem;
}
.flash {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .95rem 1.1rem;
    border-radius: var(--radius);
    border: 1px solid transparent;
    box-shadow: var(--shadow-sm);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.4;
}
.flash > i { font-size: 1.2rem; flex-shrink: 0; }
.flash-text { flex: 1; }
.flash-close {
    flex-shrink: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.4rem;
    line-height: 1;
    color: inherit;
    opacity: .55;
    padding: 0 .15rem;
    transition: opacity .2s var(--ease);
}
.flash-close:hover { opacity: 1; }
.flash--success {
    background: var(--green-100);
    border-color: var(--green-300);
    color: var(--green-900);
}
.flash--success > i { color: var(--green-600); }
.flash--error {
    background: #fdecec;
    border-color: #f3b4b4;
    color: #8a1f1f;
}
.flash--error > i { color: #c0392b; }

/* Header band -------------------------------------------------------------- */
.container_Header_vitaliteit {
    width: 100%;
    text-align: center;
    padding: clamp(48px, 7vw, 90px) var(--gutter) 0;
    background: transparent;
}
.Header_vitaliteit_check h2 {
    font-family: var(--font-display);
    font-weight: 500;
    color: var(--ink);
    font-size: clamp(32px, 5vw, 54px);
    line-height: 1.08;
    letter-spacing: -0.02em;
    max-width: 16ch;
    margin: 0 auto;
}

/* Form + benefits ---------------------------------------------------------- */
.container_vitaliteit {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: clamp(32px, 5vw, 64px);
    max-width: var(--maxw);
    margin: clamp(32px, 5vw, 56px) auto 0;
    padding: 0 var(--gutter) clamp(48px, 7vw, 90px);
    box-sizing: border-box;
    background: transparent;
}

.left_section_vitaliteit {
    width: auto;
    max-width: none;
    margin: 0;
    padding: clamp(28px, 4vw, 44px);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.left_section_vitaliteit .messages,
.left_section_vitaliteit .alert {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}
.alert {
    background: var(--green-100);
    color: var(--green-900);
    border-radius: var(--radius-sm);
    padding: .9rem 1.1rem;
    font-family: var(--font-sans);
}

form { display: flex; flex-direction: column; gap: .35rem; }
form p { margin: 0 0 1rem; display: flex; flex-direction: column; }
form label { font-family: var(--font-sans); font-weight: 600; color: var(--ink); margin-bottom: .4rem; font-size: .92rem; }

input[type="text"], input[type="tel"], input[type="email"],
input:not([type]), textarea, select {
    width: 100%;
    padding: .85rem 1rem;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: 1rem;
    color: var(--ink);
    background: var(--cream);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
textarea { resize: vertical; min-height: 130px; }
input:focus, textarea:focus, select:focus {
    border-color: var(--green-500);
    background: #fff;
    outline: none;
    box-shadow: 0 0 0 4px var(--green-100);
}
::placeholder { color: var(--muted); }

.left_section_vitaliteit button,
button.btn-primary {
    margin-top: .5rem;
    padding: .9rem 1.6rem;
    background: var(--green-600);
    color: #fff;
    border: none;
    border-radius: var(--pill);
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    align-self: flex-start;
    box-shadow: 0 10px 24px -12px rgba(13,70,52,.65);
    transition: transform .25s var(--ease), background-color .25s var(--ease);
}
.left_section_vitaliteit button:hover,
button.btn-primary:hover { background: var(--green-700); transform: translateY(-2px); }

/* Benefits column ---------------------------------------------------------- */
.right_section_vitaliteit { margin: 0; padding-top: .5rem; }
.right_section_vitaliteit h2 {
    font-family: var(--font-display);
    font-weight: 500;
    color: var(--ink);
    font-size: clamp(26px, 3.4vw, 38px);
    line-height: 1.15;
    margin: 0 0 1.4rem;
}
.right_section_vitaliteit p {
    font-family: var(--font-sans);
    font-weight: 500;
    color: var(--body);
    font-size: 1.05rem;
    line-height: 1.6;
    display: grid;
    grid-template-columns: 28px 1fr;
    align-items: start;
    gap: .8rem;
    margin: 0 0 1rem;
}
.right_section_vitaliteit h1 {
    font-family: var(--font-display);
    font-weight: 500;
    color: var(--green-800);
    font-size: clamp(20px, 2.4vw, 26px);
    line-height: 1.35;
    width: auto;
    margin: 1.6rem 0 0;
}
.fas.fa-check {
    color: var(--green-700);
    background: var(--green-100);
    width: 28px; height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    margin: 0;
}

/* Stats band --------------------------------------------------------------- */
.container_evaring {
    background: linear-gradient(135deg, var(--green-800), var(--green-900));
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 4vw, 48px);
    max-width: var(--maxw);
    margin: 0 auto;
    padding: clamp(40px, 6vw, 72px) var(--gutter);
    border-radius: var(--radius-lg);
    text-align: center;
}
.first_section, .second_section, .third_section { margin: 0; }
.first_section h2, .second_section h2, .third_section h2 {
    font-family: var(--font-display);
    font-weight: 600;
    color: #fff;
    font-size: clamp(40px, 6vw, 64px);
    line-height: 1;
    margin: 0 0 .4rem;
}
.first_section h1, .second_section h1, .third_section h1 {
    font-family: var(--font-sans);
    font-weight: 500;
    color: var(--green-300);
    font-size: 1rem;
    line-height: 1.4;
    margin: 0;
}

/* Responsive --------------------------------------------------------------- */
@media (max-width: 860px) {
    .container_vitaliteit { grid-template-columns: 1fr; }
    .container_evaring { grid-template-columns: 1fr; gap: 2rem; }
}

/* Small phones: keep the fixed-width reCAPTCHA widget from overflowing the card */
@media (max-width: 420px) {
    .left_section_vitaliteit { padding: clamp(20px, 5vw, 28px); }
    .left_section_vitaliteit .g-recaptcha {
        transform: scale(0.85);
        transform-origin: 0 0;
        height: 66px; /* reclaim the space the scale leaves behind */
    }
}