/* ==========================================================================
   Grow — Plan een proefles
   Stylesheet voor page-templates/proefles.php
   Wordt alleen geladen op pagina's die deze template gebruiken.
   ========================================================================== */

/* Design tokens uit het Figma design system (sluit aan op theme: $primary #022D26,
   $secondary #A2FF4B, $light #F5F0EC, $body-bg #FCF9F8). Hier alleen tokens die
   buiten Bootstrap vallen. */
.proefles-checkout {
    --grow-dark:           #022D26;
    --grow-dark-text:      #022D26;
    --grow-lime:           #A2FF4B;
    --grow-lime-text:      #A2FF4B;
    --grow-cream:          #F5F0EC;
    --grow-bg:             #FCF9F8;
    --grow-link:           #3B8605;
    --grow-border:         #E6E6E6;
    --grow-border-warm:    #E1D2C7;
    --grow-muted:          #757575;
    --grow-muted-soft:     #B2B2B2;
    --grow-muted-soft-2:   #B3B3B3;
    --grow-select-bg:      #DFF5FF;
    --grow-select-border:  #085472;
    --grow-select-text:    #085472;

    --grow-radius-card:    24px;
    --grow-radius-tag:     8px;
    --grow-radius-input:   4px;
    --grow-radius-pill:    9999px;
    --grow-card-pad-x:     32px;
    --grow-card-pad-y:     48px;

    background: var(--grow-bg);
    color: var(--grow-dark-text);
    min-height: 100vh;
}

/* Body reset on this template — we drop the site header/footer */
body.proefles-page {
    background: var(--grow-bg);
}
body.proefles-page #site-header,
body.proefles-page .grow-main,
body.proefles-page #site-footer { display: none; }

/* ==========================================================================
   Header — desktop (cream/off-white, no border — flows into page)
   ========================================================================== */
.proefles-header__desktop {
    background: var(--grow-bg);
}
.proefles-header__inner {
    max-width: 1512px;
    margin: 0 auto;
    padding: 24px 108px;
    height: 96px;
    display: flex;
    align-items: center;
}
.proefles-logo img { display: block; height: 40px; width: auto; }

/* ==========================================================================
   Header — mobile (dark green bar + progress strip)
   ========================================================================== */
.proefles-header__mobile-bar {
    background: var(--grow-dark);
    padding: 16px 24px;
    display: flex;
    align-items: center;
}
.proefles-logo--light img { filter: brightness(0) invert(1); }

.proefles-header__mobile-progress {
    background: var(--grow-bg);
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.proefles-mini-progress {
    position: relative;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}
.proefles-mini-progress__ring { display: block; }
.proefles-mini-progress__track { stroke: var(--grow-border); }
.proefles-mini-progress__fill {
    stroke: var(--grow-dark);
    stroke-dasharray: 113.097;          /* 2 * π * 18 */
    stroke-dashoffset: 75.398;          /* 1/3 filled: dash * 2/3 */
    transition: stroke-dashoffset 600ms cubic-bezier(.22,1,.36,1);
}
.proefles-mini-progress__label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--grow-dark);
    line-height: 1;
}
.proefles-header__mobile-progress .proefles-mini-progress__text {
    display: flex;
    flex-direction: column;
    font-size: 14px;
    line-height: 1.4;
    color: var(--grow-dark);
}
.proefles-header__mobile-progress .proefles-mini-progress__text strong { font-weight: 700; }
.proefles-header__mobile-progress .proefles-mini-progress__text span { font-weight: 400; }

/* ==========================================================================
   Page container
   ========================================================================== */
.proefles-container {
    max-width: 1512px;
    margin: 0 auto;
    padding: 0 108px;
}
@media (max-width: 1199.98px) {
    .proefles-container { padding: 0 32px; }
    .proefles-header__inner { padding: 24px 32px; }
}
@media (max-width: 991.98px) {
    .proefles-container { padding: 0; }
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */
.proefles-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    line-height: 1.4;
    padding-top: 32px;
}
.proefles-breadcrumbs a {
    color: var(--grow-link);
    text-decoration: none;
}
.proefles-breadcrumbs a:hover { text-decoration: underline; }
.proefles-breadcrumbs__sep { color: var(--grow-muted-soft-2); }
.proefles-breadcrumbs__current {
    color: var(--grow-dark);
    font-weight: 700;
}

/* ==========================================================================
   Step progress (desktop) — Figma: 50px item, 24px circle, labels above
   ========================================================================== */
.proefles-steps {
    display: flex;
    align-items: flex-end;
    list-style: none;
    padding: 0 80px;
    margin: 32px 0 0;
    gap: 0;
}
.proefles-steps__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    height: 50px;
    justify-content: flex-end;
    flex-shrink: 0;
    width: 24px;
    position: relative;
}
.proefles-steps__label {
    font-size: 16px;
    line-height: 1;
    color: var(--grow-muted-soft-2);
    white-space: nowrap;
    transition: color 250ms ease;
    font-weight: 400;
}
.proefles-steps__item.is-active .proefles-steps__label {
    color: var(--grow-dark);
    font-weight: 700;
}
.proefles-steps__item.is-completed {
    cursor: pointer;
}
.proefles-steps__item.is-completed .proefles-steps__label {
    color: var(--grow-link);
    font-weight: 400;
    transition: filter 0.15s ease;
}
.proefles-steps__item.is-completed:hover .proefles-steps__label {
    filter: brightness(0.92);
}
.proefles-steps__circle {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--grow-muted-soft);
    background: transparent;
    color: var(--grow-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    transition: background-color 250ms ease, border-color 250ms ease, color 250ms ease;
}
.proefles-steps__item.is-active .proefles-steps__circle,
.proefles-steps__item.is-completed .proefles-steps__circle {
    background: var(--grow-dark);
    border-color: var(--grow-dark);
    color: var(--grow-lime-text);
}
.proefles-steps__connector {
    flex: 1 1 0;
    height: 24px;
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0 -2px; /* overlap circle border so line meets cleanly */
}
.proefles-steps__line {
    position: relative;
    height: 2px;
    width: 100%;
    background: var(--grow-muted-soft);
    overflow: visible;
}
.proefles-steps__line-fill {
    position: absolute;
    inset: 0;
    background: var(--grow-dark);
    height: 2px;
    transition: width 700ms cubic-bezier(.22,1,.36,1);
}

/* ==========================================================================
   Grid: form (left) + sidebar (right)
   ========================================================================== */
.proefles-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 467px;
    gap: 24px;
    margin-top: 32px;
    padding-bottom: 108px;
    align-items: start;
}
.proefles-grid__main {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.proefles-grid__sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
/* Bootstrap's .d-lg-block forces display:block !important and kills flex gap.
   Lobotomized-owl spacing works regardless of display mode. */
.proefles-grid__sidebar > * + * { margin-top: 24px; }
@media (max-width: 1199.98px) {
    .proefles-grid { grid-template-columns: minmax(0, 1fr) 400px; }
}
@media (max-width: 991.98px) {
    .proefles-grid {
        grid-template-columns: 1fr;
        gap: 0;
        margin-top: 0;
        padding-bottom: 200px; /* room for sticky bar */
    }
}

/* ==========================================================================
   Cards
   ========================================================================== */
.proefles-card {
    border-radius: var(--grow-radius-card);
    padding: var(--grow-card-pad-y) var(--grow-card-pad-x);
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.proefles-card--form {
    background: var(--grow-cream);
}
.proefles-card--summary {
    background: #fff;
    border: 1px solid var(--grow-border);
}
.proefles-card--contact {
    background: transparent; /* cream body-bg shines through, per Figma */
    border: 1px solid var(--grow-border);
}
@media (max-width: 991.98px) {
    .proefles-card--form {
        border-top-left-radius: var(--grow-radius-card);
        border-top-right-radius: var(--grow-radius-card);
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        padding: 24px;
    }
    /* Op mobiel loopt de crème-achtergrond door t/m de sticky bar i.p.v.
       abrupt te stoppen onder de formulierkaart. */
    .proefles-checkout { background: var(--grow-cream); }
    .proefles-header__mobile-progress { background: var(--grow-cream); }
}

/* ==========================================================================
   Typography inside the form card
   ========================================================================== */
.proefles-title {
    font-size: 48px;
    line-height: 0.8;
    font-weight: 700;
    color: var(--grow-dark);
    margin: 0;
    letter-spacing: 0;
}
.proefles-lang-switch {
    display: inline-flex;
    font-size: 14px;
    line-height: 16px;
    font-weight: 700;
    color: var(--grow-dark);
    text-decoration: underline;
    align-self: flex-start;
}
.proefles-lang-switch:hover { color: var(--grow-dark); }
.proefles-intro {
    font-size: 16px;
    line-height: 1.4;
    color: var(--grow-dark);
    margin: 0;
}

.proefles-section { display: flex; flex-direction: column; gap: 16px; }
.proefles-section__title {
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: -0.48px;
    font-weight: 700;
    color: var(--grow-dark);
    margin: 0;
}
.proefles-section__title--sm { font-size: 24px; }
.proefles-section__intro {
    font-size: 16px;
    line-height: 1.4;
    color: var(--grow-dark);
    margin: 0;
}
.proefles-label {
    font-size: 14px;
    line-height: 16px;
    color: var(--grow-dark);
    font-weight: 400;
}
.proefles-label--mt { margin-top: 8px; }

/* ==========================================================================
   Dividers
   ========================================================================== */
.proefles-divider {
    border: 0;
    border-top: 1px solid var(--grow-border-warm);
    margin: 0;
    width: 100%;
    opacity: 1;
}
.proefles-divider--light { border-top-color: var(--grow-border); }

/* ==========================================================================
   Input fields
   ========================================================================== */
.proefles-card .form-control {
    height: 48px;
    border: 1px solid var(--grow-muted);
    border-radius: var(--grow-radius-input);
    padding: 12px 16px;
    font-size: 16px;
    color: var(--grow-dark);
    font-weight: 700;
    background: #fff;
    box-shadow: none;
}
.proefles-card .form-control::placeholder {
    color: var(--grow-muted);
    font-weight: 400;
}
.proefles-card .form-control:focus {
    border-color: var(--grow-dark);
    box-shadow: 0 0 0 3px rgba(2,45,38,.12);
}

.proefles-input { position: relative; }
.proefles-input--icon .form-control { padding-right: 48px; }
.proefles-input__icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--grow-dark);
    display: flex;
    pointer-events: none;
}

/* ==========================================================================
   Google Places Autocomplete — custom dropdown in huisstijl
   ========================================================================== */
.proefles-autocomplete {
    position: relative;
}
.proefles-autocomplete.is-open .form-control {
    border-color: var(--grow-dark);
    border-bottom-color: transparent;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: none; /* halo verwijderd om overlap met dropdown te voorkomen */
    position: relative;
    z-index: 31;
}
.proefles-autocomplete__dropdown {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: #fff;
    border: 1px solid var(--grow-dark);
    border-top: 0;
    border-bottom-left-radius: var(--grow-radius-input);
    border-bottom-right-radius: var(--grow-radius-input);
    z-index: 30;
    max-height: 360px;
    overflow-y: auto;
    display: none;
}
.proefles-autocomplete__dropdown.is-open {
    /* alleen elevation drop-shadow, geen halo (anders overlap met trigger seam) */
    box-shadow:
        0 20px 48px rgba(2,45,38,.18),
        0 4px 12px rgba(2,45,38,.08);
}
.proefles-autocomplete__dropdown.is-open { display: block; }
.proefles-autocomplete__item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    background: #fff;
    border: 0;
    border-top: 1px solid var(--grow-border);
    color: var(--grow-dark);
    text-align: left;
    cursor: pointer;
    transition: background-color 120ms ease;
    font-size: 16px;
    line-height: 1.4;
}
.proefles-autocomplete__item:first-child { border-top: 0; }
.proefles-autocomplete__item.is-hover,
.proefles-autocomplete__item:hover,
.proefles-autocomplete__item:focus-visible {
    background: var(--grow-select-bg);
    outline: none;
}
.proefles-autocomplete__item-icon {
    flex-shrink: 0;
    color: var(--grow-link);
    display: flex;
}
.proefles-autocomplete__item-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.proefles-autocomplete__item-text strong {
    font-weight: 700;
    font-size: 16px;
    color: var(--grow-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.proefles-autocomplete__item-text span {
    font-weight: 400;
    font-size: 14px;
    color: var(--grow-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.proefles-autocomplete__status {
    padding: 12px 16px;
    font-size: 14px;
    color: var(--grow-muted);
    background: var(--grow-bg);
    border: 1px solid var(--grow-border);
    border-radius: var(--grow-radius-input);
    margin-top: 8px;
    display: none;
}

.proefles-fields { display: flex; flex-direction: column; gap: 8px; }
.proefles-field { display: flex; flex-direction: column; gap: 8px; }
.proefles-field--postcode { max-width: 140px; }
.proefles-field-row { display: flex; gap: 8px; }
.proefles-field-row .proefles-field { flex: 1; }

/* ==========================================================================
   Radio / option cards
   ========================================================================== */
.proefles-radio-group { display: flex; flex-direction: column; gap: 8px; }

.proefles-radio {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 15px; /* 16 - 1 to compensate for border swap */
    min-height: 72px;
    background: #fff;
    border: 1px solid var(--grow-muted-soft);
    border-radius: var(--grow-radius-tag);
    cursor: pointer;
    margin: 0;
    transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
    text-align: left;
    position: relative;
}
.proefles-radio:hover { border-color: var(--grow-dark); }
.proefles-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.proefles-radio__indicator {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1.5px solid var(--grow-muted);
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color 180ms ease, background-color 180ms ease;
    position: relative;
}
/* Wit vinkje binnen de (blauwe) indicator wanneer geselecteerd */
.proefles-radio__indicator::after {
    content: "";
    width: 6px;
    height: 10px;
    margin-top: -2px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transform-origin: center;
    transition: transform 180ms cubic-bezier(.22,1,.36,1);
}

/* Active state — driven by :has(input:checked) OR explicit .is-active fallback */
.proefles-radio.is-active,
.proefles-radio:has(input[type="radio"]:checked) {
    background: var(--grow-select-bg);
    border-color: var(--grow-select-border);
    border-width: 2px;
    padding: 14px; /* 16 - 2 for thicker border */
}
.proefles-radio.is-active .proefles-radio__indicator,
.proefles-radio:has(input[type="radio"]:checked) .proefles-radio__indicator {
    border-color: var(--grow-select-border);
    background: var(--grow-select-border);
}
.proefles-radio.is-active .proefles-radio__indicator::after,
.proefles-radio:has(input[type="radio"]:checked) .proefles-radio__indicator::after {
    transform: rotate(45deg) scale(1);
}

.proefles-radio__content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    font-size: 16px;
    line-height: 1;
    color: var(--grow-dark);
}
.proefles-radio__content strong { font-weight: 700; }
.proefles-radio__content span { font-weight: 400; }
.proefles-radio.is-active .proefles-radio__content,
.proefles-radio:has(input[type="radio"]:checked) .proefles-radio__content { color: var(--grow-select-text); }

/* Keyboard focus */
.proefles-radio:has(input[type="radio"]:focus-visible) {
    box-shadow: 0 0 0 3px rgba(2,45,38,.15);
    border-color: var(--grow-dark);
}

.proefles-radio.is-block {
    width: 100%;
    background: #fff;
    border: 1px solid var(--grow-muted-soft);
    cursor: pointer;
}
.proefles-radio__chevron {
    margin-left: auto;
    color: var(--grow-dark);
    display: flex;
}
.proefles-radio__chevron svg {
    transition: transform 240ms cubic-bezier(.22,1,.36,1);
}

/* ==========================================================================
   Mobile time-dropdown — trigger + list als één visueel element
   ========================================================================== */
.proefles-time-dropdown {
    position: relative;
    background: #fff;
    border: 1px solid var(--grow-muted-soft);
    border-radius: var(--grow-radius-tag);
    overflow: hidden;
    transition: border-color 180ms ease;
}
.proefles-time-dropdown.is-open {
    border-color: var(--grow-dark);
}
.proefles-time-dropdown.is-open .proefles-radio__chevron svg {
    transform: rotate(180deg);
}

/* Trigger: geen eigen border, deel van de gedeelde container */
.proefles-time-dropdown .proefles-radio.is-block {
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 16px;
    min-height: 72px;
}
.proefles-time-dropdown.is-open .proefles-radio.is-block {
    border-bottom: 1px solid var(--grow-border);
}

/* List: open netjes vanuit de trigger zonder gap */
.proefles-time-dropdown__list {
    display: block;
    max-height: 0;
    overflow: hidden;
    transition: max-height 320ms cubic-bezier(.22,1,.36,1);
}
.proefles-time-dropdown.is-open .proefles-time-dropdown__list {
    max-height: 560px;
    overflow-y: auto;
}

/* Lijst-items: flush rows met dividers, GEEN individuele cards */
.proefles-time-dropdown__list .proefles-radio {
    width: 100%;
    border: 0;
    border-top: 1px solid var(--grow-border);
    border-radius: 0;
    background: #fff;
    padding: 16px;
    min-height: 64px;
}
.proefles-time-dropdown__list .proefles-radio:first-child {
    border-top: 0; /* trigger heeft al een bottom-border */
}
.proefles-time-dropdown__list .proefles-radio:hover {
    background: var(--grow-cream);
}
/* Override de standaard card-stijl voor selected state (in deze context: subtiele bg-tint, geen individuele border) */
.proefles-time-dropdown__list .proefles-radio.is-active,
.proefles-time-dropdown__list .proefles-radio:has(input[type="radio"]:checked) {
    background: var(--grow-select-bg);
    border: 0;
    border-top: 1px solid var(--grow-select-border);
    border-bottom: 1px solid var(--grow-select-border);
    padding: 16px;
    margin-top: -1px; /* overlap with divider above for clean look */
}
.proefles-time-dropdown__list .proefles-radio.is-active + .proefles-radio,
.proefles-time-dropdown__list .proefles-radio:has(input[type="radio"]:checked) + .proefles-radio {
    border-top: 0; /* avoid double-border below an active row */
}

/* Empty span in trigger collapses when no time selected */
[data-mobile-time-sub]:empty { display: none; }

/* Bij meer dan 8 opties: op desktop ook de dropdown tonen i.p.v. de grid,
   anders wordt het te veel. (Toggle-classes gezet door de JS.) */
@media (min-width: 992px) {
    .proefles-time-grid--hidden { display: none !important; }
    .proefles-time-dropdown--desktop { display: block !important; }
}

/* ==========================================================================
   Tag toggles ("Vandaag" / "Morgen" / "Specifieke datum")
   ========================================================================== */
.proefles-tag-toggles {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.proefles-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 12px 16px;
    border-radius: var(--grow-radius-tag);
    border: 2px solid var(--grow-muted);
    background: var(--grow-cream);
    color: var(--grow-dark);
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    transition: background-color 180ms ease,
                border-color 180ms ease,
                color 180ms ease,
                transform 180ms cubic-bezier(.22,1,.36,1);
}
.proefles-tag:hover {
    border-color: var(--grow-dark);
    background: #ECE5DE; /* slightly darker cream on hover */
}
.proefles-tag:focus-visible {
    outline: none;
    border-color: var(--grow-dark);
    box-shadow: 0 0 0 3px rgba(2,45,38,.15);
}
.proefles-tag.is-active {
    background: var(--grow-dark);
    border-color: var(--grow-dark);
    color: var(--grow-lime-text);
    font-weight: 700;
}
.proefles-tag.is-active:hover {
    background: #043930;
    border-color: #043930;
}
.proefles-tag svg { flex-shrink: 0; }

/* Check-icoon (vinkje) verschijnt alleen op de active tag */
.proefles-tag__check { display: none; }
.proefles-tag.is-active .proefles-tag__check { display: inline-flex; }

/* ==========================================================================
   Custom inline kalender — vervangt native date picker
   ========================================================================== */
.proefles-calendar {
    background: #fff;
    border: 1px solid var(--grow-border);
    border-radius: 16px;
    padding: 24px;
    width: 100%;
    display: none;
}
.proefles-calendar:not([hidden]) {
    display: block;
    animation: proefles-cal-in 220ms cubic-bezier(.22,1,.36,1);
}
@keyframes proefles-cal-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.proefles-calendar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.proefles-calendar__title {
    font-weight: 700;
    font-size: 16px;
    color: var(--grow-dark);
}
.proefles-calendar__nav {
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    border-radius: 50%;
    color: var(--grow-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 150ms ease;
}
.proefles-calendar__nav:hover,
.proefles-calendar__nav:focus-visible {
    background: var(--grow-cream);
    outline: none;
}

.proefles-calendar__weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 4px;
}
.proefles-calendar__weekdays > span {
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--grow-muted);
    padding: 6px 0;
    letter-spacing: 0.02em;
}

.proefles-calendar__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    justify-items: center;
}
.proefles-calendar__day {
    width: 100%;
    max-width: 56px;
    aspect-ratio: 1;       /* altijd vierkant → border-radius:50% blijft rond, ook op smalle (mobiele) kolommen */
    border: 0;
    background: transparent;
    border-radius: 50%;
    font-size: 15px;
    font-weight: 500;
    color: var(--grow-dark);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
    border: 2px solid transparent;
    padding: 0;
}
.proefles-calendar__day:hover:not(:disabled):not(.is-selected) {
    background: var(--grow-cream);
}
.proefles-calendar__day:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(2,45,38,.25);
}
.proefles-calendar__day.is-today {
    border-color: var(--grow-dark);
    font-weight: 700;
}
.proefles-calendar__day.is-selected {
    background: var(--grow-dark);
    border-color: var(--grow-dark);
    color: var(--grow-lime-text);
    font-weight: 700;
}
.proefles-calendar__day.is-selected:hover {
    background: #043930;
    border-color: #043930;
}
.proefles-calendar__day:disabled,
.proefles-calendar__day.is-disabled {
    color: var(--grow-muted-soft);
    cursor: not-allowed;
    opacity: 0.55;
}
.proefles-calendar__day--empty {
    visibility: hidden;
    pointer-events: none;
}

/* ==========================================================================
   Time grid (desktop)
   ========================================================================== */
.proefles-time-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

/* ==========================================================================
   Notification block
   ========================================================================== */
.proefles-notification {
    position: relative;
    background: var(--grow-bg);
    border: 1px solid var(--grow-border-warm);
    border-radius: var(--grow-radius-tag);
    padding: 16px;
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 12px;
    align-items: start;
}
.proefles-notification__icon { color: var(--grow-dark); display: flex; padding-top: 2px; }
.proefles-notification__body { display: flex; flex-direction: column; gap: 12px; }
.proefles-notification__body strong { font-size: 16px; line-height: 1.4; font-weight: 700; color: #1e1e1e; }
.proefles-notification__body p { font-size: 16px; line-height: 1.4; color: #1e1e1e; margin: 0; }
.proefles-notification__close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: var(--grow-dark);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.proefles-notification__close:hover { background: rgba(2,45,38,.08); }

/* ==========================================================================
   Buttons
   ========================================================================== */

/* WhatsApp pill (dark green with lime text) — matches site convention */
.proefles-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 12px 24px;
    border-radius: var(--grow-radius-pill);
    border: 0;
    background: var(--grow-dark);
    color: var(--grow-lime-text);
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: filter 0.2s ease;
    align-self: flex-start;
}
.proefles-btn:hover,
.proefles-btn:focus-visible {
    color: var(--grow-lime-text);
    filter: brightness(0.92);
    outline: none;
    text-decoration: none;
}

/* Lime CTA — override Bootstrap .btn-secondary hover, match site convention */
.proefles-checkout .btn-secondary,
.proefles-checkout .btn-secondary:focus,
.proefles-checkout .btn-secondary:active,
.proefles-checkout .btn-secondary:hover,
.proefles-checkout .btn-secondary.active,
.proefles-checkout .btn-secondary:not(:disabled):not(.disabled):active {
    background-color: var(--grow-lime);
    border-color: var(--grow-lime);
    color: var(--grow-dark);
    box-shadow: none;
}
.proefles-cta {
    height: 48px;
    padding: 16px 32px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    border: 0;
    color: var(--grow-dark);
    background: var(--grow-lime);
    border-radius: var(--grow-radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    transition: filter 0.2s ease;
}
.proefles-checkout .btn-secondary.proefles-cta:hover,
.proefles-checkout .btn-secondary.proefles-cta:focus-visible,
.proefles-cta:hover,
.proefles-cta:focus-visible {
    color: var(--grow-dark);
    filter: brightness(0.92);
    outline: none;
    text-decoration: none;
}

.proefles-cta-row {
    display: flex;
    justify-content: flex-end;
}

/* ==========================================================================
   Sidebar summary card
   ========================================================================== */
.proefles-summary-row {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}
.proefles-summary-row--with-link { align-items: center; }
.proefles-summary-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.proefles-summary-item strong {
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    color: var(--grow-dark);
}
.proefles-link {
    color: var(--grow-link);
    font-size: 16px;
    line-height: 1.4;
    text-decoration: underline;
    font-weight: 400;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}
.proefles-link--big { font-size: 16px; font-weight: 400; }
.proefles-link--with-icon {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: underline;
}
.proefles-toelichting {
    font-size: 14px;
    line-height: 1.4;
    color: #02658a;
    margin: 0;
    text-align: center;
}
/* Icoon inline i.p.v. flex-item, zodat de tekst + regio één doorlopende
   regel vormen die netjes afbreekt naar een nieuwe regel als het niet past. */
.proefles-toelichting svg {
    display: inline-block;
    vertical-align: -3px;
    margin-right: 4px;
    color: #02658a;
}

/* ==========================================================================
   Contact card
   ========================================================================== */
.proefles-contact-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.proefles-contact-item__heading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--grow-dark);
}
.proefles-contact-item__heading strong { font-size: 16px; font-weight: 700; }
.proefles-contact-item p {
    font-size: 14px;
    line-height: 1.4;
    color: var(--grow-dark);
    margin: 0;
}
.proefles-contact-item > strong { font-size: 16px; font-weight: 700; color: var(--grow-dark); }

/* ==========================================================================
   Mobile sticky bar + summary sheet
   ========================================================================== */
.proefles-sticky-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    pointer-events: none;
}
.proefles-sticky-bar__top,
.proefles-sticky-bar__bottom {
    pointer-events: auto;
    background: #fff;
    padding: 16px 24px;
    border-top-left-radius: var(--grow-radius-card);
    border-top-right-radius: var(--grow-radius-card);
    /* Soft elevation — top edge only (sticky bar zit aan de onderkant) */
    box-shadow: 0 -4px 16px rgba(12,12,13,.05);
}
.proefles-sticky-bar__top {
    background: #f8f5f3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 28px;
    margin-bottom: -16px;
}
.proefles-sticky-bar__bottom {
    position: relative;
    z-index: 1;
    padding-top: 16px;
}
.proefles-sticky-bar .proefles-link--with-icon { color: var(--grow-link); font-size: 16px; }

/* Generic mobile bottom-sheet — used voor zowel Samenvatting als Contact popups.
   Gebruikt CSS-transitions (ipv keyframes) zodat open EN close beide animeren:
   - container blijft altijd in DOM (pointer-events toggle voor interactie)
   - backdrop transitiet opacity
   - panel transitiet transform translateY
   Sluiten gebeurt automatisch via reverse-transitie wanneer .is-open wegvalt. */
.proefles-sheet {
    position: fixed;
    inset: 0;
    z-index: 60;
    pointer-events: none;
}
.proefles-sheet.is-open { pointer-events: auto; }

.proefles-sheet__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2,45,38,.45);
    opacity: 0;
    transition: opacity 220ms ease;
}
.proefles-sheet.is-open .proefles-sheet__backdrop { opacity: 1; }

.proefles-sheet__panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    border: 1px solid var(--grow-border);
    border-top-left-radius: var(--grow-radius-card);
    border-top-right-radius: var(--grow-radius-card);
    padding: 32px 24px 40px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-height: 90vh;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 320ms cubic-bezier(.22,1,.36,1);
}
.proefles-sheet.is-open .proefles-sheet__panel { transform: translateY(0); }
.proefles-sheet__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
}
.proefles-sheet__header .proefles-section__title { margin: 0; flex: 1; min-width: 0; }
.proefles-sheet__close {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 0;
    background: transparent;
    color: var(--grow-link);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}
.proefles-sheet__close svg { color: var(--grow-dark); }
.proefles-sheet__close:hover,
.proefles-sheet__close:focus-visible { color: var(--grow-link); outline: none; filter: brightness(0.92); }


/* ==========================================================================
   Step content visibility + fade-in animation
   ========================================================================== */
[data-step-content] { display: none; }
[data-step-content].is-active {
    display: flex;
    flex-direction: column;
    gap: 24px;
    animation: proefles-step-in 320ms cubic-bezier(.22,1,.36,1);
}
@keyframes proefles-step-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Hide elements wier data-show-on-step de huidige step niet bevat */
.proefles-checkout[data-current-step="1"] [data-show-on-step]:not([data-show-on-step*="1"]),
.proefles-checkout[data-current-step="2"] [data-show-on-step]:not([data-show-on-step*="2"]),
.proefles-checkout[data-current-step="3"] [data-show-on-step]:not([data-show-on-step*="3"]) {
    display: none !important;
}

/* ==========================================================================
   Step 2 — Persoonlijke gegevens form helpers
   ========================================================================== */
.proefles-fields-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.proefles-fields-row--triple { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 575.98px) {
    .proefles-fields-row { grid-template-columns: 1fr; }
    .proefles-fields-row--triple { grid-template-columns: 1fr 1fr; }
}
.proefles-field-hint {
    display: block;
    font-size: 14px;
    line-height: 1.4;
    color: var(--grow-muted);
    margin-top: 4px;
}
.proefles-input__state-icon,
.proefles-input__chevron {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    pointer-events: none;
}
.proefles-input__chevron { color: var(--grow-dark); }

/* Validation state-icon: beide SVGs in markup, één zichtbaar via .is-valid/.is-invalid */
.proefles-input__state-icon > svg { display: none; }
.proefles-input.is-valid   .proefles-input__icon-check { display: block; color: #4cb100; }
.proefles-input.is-invalid .proefles-input__icon-cross { display: block; color: #dc2626; }

/* Border + padding voor inputs met state-icon of chevron */
.proefles-card--form .proefles-input:has(.proefles-input__state-icon) .form-control,
.proefles-card--form .proefles-input:has(.proefles-input__chevron) .form-control { padding-right: 40px; }
.proefles-card--form .proefles-input.is-valid   .form-control { border-color: #4cb100; }
.proefles-card--form .proefles-input.is-invalid .form-control { border-color: #dc2626; }
.proefles-card--form .proefles-input.is-invalid .form-control:focus {
    box-shadow: 0 0 0 3px rgba(220,38,38,.12);
}
/* Fallback voor required inputs zonder eigen wrapper — markeer op .proefles-field */
.proefles-card--form .proefles-field.is-invalid .form-control { border-color: #dc2626; }
.proefles-card--form .proefles-field.is-invalid .form-control:focus {
    box-shadow: 0 0 0 3px rgba(220,38,38,.12);
}

.proefles-dob {
    display: grid;
    /* Proportionele kolommen — dag iets smal, maand breedst, jaar middel. Totale rij = 50% van form (via wrapping fields-row) */
    grid-template-columns: 88fr 140fr 96fr;
    gap: 8px;
}
@media (max-width: 575.98px) {
    .proefles-dob { grid-template-columns: 80px 1fr 96px; }
}

/* ==========================================================================
   Custom select (reusable) — used voor dob (dag/maand/jaar)
   ========================================================================== */
.proefles-csel {
    position: relative;
}
.proefles-csel__trigger {
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    text-align: left;
    cursor: pointer;
    /* matches .form-control look exactly */
    background: #fff;
    border: 1px solid var(--grow-muted);
    border-radius: var(--grow-radius-input);
    padding: 12px 12px 12px 16px;
    font-size: 16px;
    font-weight: 700;
    color: var(--grow-dark);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.proefles-csel__trigger:hover { border-color: var(--grow-dark); }
.proefles-csel__trigger:focus-visible {
    outline: none;
    border-color: var(--grow-dark);
    box-shadow: 0 0 0 3px rgba(2,45,38,.12);
}
.proefles-csel.is-open .proefles-csel__trigger {
    border-color: var(--grow-dark);
    border-bottom-color: transparent;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: none; /* halo verwijderd om seam-overlap te voorkomen */
    z-index: 31;
}
.proefles-csel.is-open .proefles-csel__chevron svg { transform: rotate(180deg); }
.proefles-csel__chevron { display: flex; color: var(--grow-dark); flex-shrink: 0; }
.proefles-csel__chevron svg { transition: transform 200ms cubic-bezier(.22,1,.36,1); }

.proefles-csel__list {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 20;
    background: #fff;
    border: 1px solid var(--grow-dark);
    border-top: 0;
    border-bottom-left-radius: var(--grow-radius-input);
    border-bottom-right-radius: var(--grow-radius-input);
    /* alleen elevation drop-shadow, geen halo (anders overlap met trigger seam) */
    box-shadow:
        0 20px 48px rgba(2,45,38,.18),
        0 4px 12px rgba(2,45,38,.08);
    max-height: 240px;
    overflow-y: auto;
    margin: 0;
    padding: 4px 0;
}
.proefles-csel__option {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    padding: 10px 16px;
    font-size: 15px;
    color: var(--grow-dark);
    text-align: left;
    cursor: pointer;
    line-height: 1.2;
    transition: background-color 120ms ease;
}
.proefles-csel__option:hover,
.proefles-csel__option.is-hover {
    background: var(--grow-cream);
}
.proefles-csel__option.is-selected {
    background: var(--grow-select-bg);
    color: var(--grow-select-text);
    font-weight: 700;
}
@media (max-width: 575.98px) {
    .proefles-dob { grid-template-columns: 88px 1fr 96px; }
}

/* CTA row with back-link variant */
.proefles-cta-row--with-back { justify-content: space-between; }
/* Op mobiel is de container full-bleed; lijn de cta-row (o.a. "Terug naar
   inplannen") uit met de interne padding van de formulierkaart i.p.v. tegen
   de schermrand. Waarden komen overeen met .proefles-card padding per breakpoint. */
@media (max-width: 991.98px) {
    .proefles-cta-row { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 575.98px) {
    .proefles-cta-row { padding-left: 16px; padding-right: 16px; }
}
.proefles-back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--grow-link);
    background: none;
    border: 0;
    padding: 0;
    font-size: 16px;
    text-decoration: underline;
    cursor: pointer;
    transition: filter 0.2s ease;
}
.proefles-back-link:hover,
.proefles-back-link:focus-visible { color: var(--grow-link); filter: brightness(0.92); outline: none; }
.proefles-back-link svg { color: var(--grow-link); }

/* ==========================================================================
   Step 3 — Overzicht card
   ========================================================================== */
.proefles-card--overzicht {
    background: #fff;
    border: 1px solid var(--grow-border);
}
.proefles-overzicht-price {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
}
.proefles-overzicht-price > span {
    font-size: 20px;
    font-weight: 700;
    color: var(--grow-dark);
}
.proefles-overzicht-price > strong {
    font-size: 24px;
    font-weight: 700;
    color: var(--grow-dark);
    letter-spacing: -0.48px;
}
.proefles-summary-row--with-link .proefles-link {
    flex-shrink: 0;
    align-self: center;
}
/* Rij eronder zonder Wijzig-link: indent zodat kolommen uitlijnen met rij bovenop */
/* Reserveer dezelfde ruimte als de "Wijzig"-link (42px) + gap (24px) in de rijen
   mét link, zodat de e-mail/telefoon-kolommen eronder uitlijnen — ook op mobiel.
   Hogere specificiteit (.proefles-card ...) is bewust: het thema bundelt een
   VEROUDERDE kopie van deze CSS (met padding-right:0 op mobiel) die ná onze CSS
   laadt; met enkel .proefles-summary-row--indent zou die kopie ons overschrijven. */
.proefles-card .proefles-summary-row--indent { padding-right: 66px; }

/* Step 3 sidebar: alleen Contact card zichtbaar, geen extra margin-top */
.proefles-checkout[data-current-step="3"] .proefles-grid__sidebar > .proefles-card--contact {
    margin-top: 0;
}

/* ==========================================================================
   Responsive tweaks
   ========================================================================== */
@media (max-width: 575.98px) {
    .proefles-title { font-size: 40px; }
    .proefles-card { padding: 24px 16px; }
}

/* ==========================================================================
   Foutmelding-banner (verzenden / mislukte betaling)
   ========================================================================== */
.proefles-alert {
    background: #FDECEC;
    border: 1px solid #F3B9B8;
    color: #842c2b;
    border-radius: var(--grow-radius-card);
    padding: 20px 24px;
    margin-bottom: 24px;
}
.proefles-alert p { margin: 0; font-weight: 600; }
.proefles-alert .proefles-cta { margin-top: 16px; }

/* ==========================================================================
   Bedankt-pagina — bouwt voort op de proefles-tokens en -componenten
   ========================================================================== */

/* Bevestigings-hero — donkergroene banner over de volle breedte */
.proefles-confirm-hero {
    display: flex;
    align-items: center;
    gap: 28px;
    background: var(--grow-dark);
    color: #fff;
    border-radius: var(--grow-radius-card);
    padding: 40px 44px;
    margin: 32px 0 24px;
}
.proefles-confirm-hero__badge {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--grow-lime);
    color: var(--grow-dark);
    display: flex;
    align-items: center;
    justify-content: center;
}
.proefles-confirm-hero--pending .proefles-confirm-hero__badge { background: #FF8710; color: #fff; }
.proefles-confirm-hero__text { flex: 1 1 auto; }
.proefles-confirm-hero__text h1 {
    color: #fff;
    font-size: 34px;
    line-height: 1.1;
    margin: 0 0 10px;
}
.proefles-confirm-hero__text p {
    color: rgba(255,255,255,.75);
    margin: 0;
    max-width: 48ch;
}
/* Afspraaknummer — rustige typografie, gescheiden door een hairline */
.proefles-confirm-hero__ticket {
    flex-shrink: 0;
    padding-left: 32px;
    border-left: 1px solid rgba(255,255,255,.16);
}
.proefles-confirm-hero__ticket span {
    display: block;
    font-size: 14px;
    color: rgba(255,255,255,.6);
    margin-bottom: 4px;
}
.proefles-confirm-hero__ticket strong {
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

/* Tijdlijn — "Wat gebeurt er nu?" */
.proefles-timeline { list-style: none; margin: 0; padding: 0; }
.proefles-timeline li {
    position: relative;
    padding: 0 0 28px 48px;
}
.proefles-timeline li:last-child { padding-bottom: 0; }
.proefles-timeline li::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 36px;
    bottom: 4px;
    width: 2px;
    background: var(--grow-border);
}
.proefles-timeline li:last-child::before { display: none; }
.proefles-timeline__num {
    position: absolute;
    left: 0;
    top: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--grow-cream);
    color: var(--grow-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
}
.proefles-timeline__text strong { display: block; color: var(--grow-dark); margin-bottom: 2px; }
.proefles-timeline__text span { color: var(--grow-muted); font-size: 15px; }

/* Instructielijst met vinkjes — "Wat neem je mee?" */
.proefles-info-list { list-style: none; margin: 0; padding: 0; }
.proefles-info-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--grow-border);
}
.proefles-info-list li:first-child { padding-top: 0; }
.proefles-info-list li:last-child { border-bottom: 0; }
.proefles-info-list__icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: var(--grow-link);
    margin-top: 2px;
}
.proefles-info-list__text strong { display: block; color: var(--grow-dark); }
.proefles-info-list__text span { color: var(--grow-muted); font-size: 15px; }

/* Betaalstatus-chip in de samenvatting */
.proefles-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}
.proefles-status-chip__dot { width: 10px; height: 10px; border-radius: 50%; }

/* Responsive — hero stapelt op tablet/mobiel */
@media (max-width: 991.98px) {
    .proefles-confirm-hero {
        flex-direction: column;
        align-items: flex-start;
        padding: 28px 24px;
        gap: 20px;
    }
    .proefles-confirm-hero__text h1 { font-size: 28px; }
    .proefles-confirm-hero__ticket {
        width: 100%;
        padding: 20px 0 0;
        border-left: 0;
        border-top: 1px solid rgba(255,255,255,.16);
    }
    /* Bedankt-pagina: zijspatie zodat hero + kaarten niet tegen de schermrand
       plakken. (Alleen hier — het proefles-formulier blijft bewust full-bleed.) */
    .proefles-bedankt .proefles-container { padding-left: 16px; padding-right: 16px; }
    .proefles-bedankt .proefles-card { padding: 28px 24px; }
}

/* Sectiekop met info-icoon (i) + tooltip — bv. "Adresgegevens" in stap 2.
   Tooltip is toegankelijk via hover én focus/tap (de knop is focusbaar),
   zodat het ook op touch-apparaten werkt. */
.proefles-heading-info {
    display: flex;
    align-items: center;
    gap: 8px;
}
.proefles-info {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--grow-muted);
    cursor: pointer;
    line-height: 0;
}
.proefles-info:hover,
.proefles-info:focus-visible { color: var(--grow-dark); }
.proefles-info__tooltip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);
    width: max-content;
    max-width: 260px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--grow-dark);
    color: #fff;
    font-size: 13px;
    line-height: 1.4;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease, visibility .15s ease;
    z-index: 10;
    pointer-events: none;
}
.proefles-info__tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--grow-dark);
}
.proefles-info:hover .proefles-info__tooltip,
.proefles-info:focus .proefles-info__tooltip,
.proefles-info:focus-within .proefles-info__tooltip {
    opacity: 1;
    visibility: visible;
}