/* Level Check Register VC element — styling toevoegen.
   Hergebruikt tt-page-surface (beige bg + decoratieve shapes) en
   tt-course-page__title / tt-course-page__subtitle uit general/course.css. */

/* Plugin (AcademiaExtensions) zet zelf een hardcoded titel + subtitle in
   [taalthuis_registration_form]. Verberg die — het VC-element levert al
   eigen title/subtitle. */
.level-check-register .registration-title-wrapper {
    display: none;
}

.level-check-register .tt-course-page__title {
    margin-bottom: 6px;
}

.level-check-register .tt-course-page__subtitle {
    font-size: 20px;
    line-height: 27px;
    font-weight: 700;
    margin-bottom: 26px;
}

/* ============ Columns layout ============ */

.level-check-register__columns {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
}

.level-check-register__left {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 637px;
    padding-top: 24px;
}

.level-check-register__right {
    flex: 0 0 526px;
}

/* ============ Sidebar ============ */

.level-check-register__sidebar {
    position: relative;
    background: var(--light-green, #DCF1E0);
    border-radius: 15px;
    padding: 37px 32px 161px;
}

.level-check-register .level-check-register__sidebar-title {
    color: #000;
    font-size: 28px;
    line-height: 36px;
    margin: 0 0 18px;
}

.level-check-register__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 45px;
}

.level-check-register .level-check-register__step {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 20px;
    line-height: 29px;
    font-weight: 700;
    margin: 0;
}

.level-check-register__step-marker {
    flex: 0 0 55px;
    width: 55px;
    height: 55px;
    line-height: 0;
}

.level-check-register__step-marker svg {
    display: block;
    width: 100%;
    height: 100%;
}

.level-check-register__step-text {
    flex: 1 1 auto;
    min-width: 0;
}

/* ============ Video thumbnail (cirkel met blauwe rand) ============ */

.level-check-register__video-thumbnail {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
    width: 198px;
    height: 198px;
    border-radius: 50%;
    border: 20px solid var(--blue, #1A75BB);
    box-sizing: content-box;
    overflow: hidden;
    cursor: pointer;
}

.level-check-register__video-thumbnail-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 50%;
}

.level-check-register__video-thumbnail-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    line-height: 0;
}

.level-check-register__video-thumbnail-play svg {
    display: block;
}

/* ============ Form layout: 2 kolommen ============ */

.level-check-register__form #register,
.level-check-register__form #form-level-check {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
    row-gap: 16px;
    width: 100%;
    max-width: none;
    margin: 0 auto;
}

/* Reset WC's float-based form-row defaults zodat grid het overneemt. */
.level-check-register__form #register .form-row,
.level-check-register__form #register .woocommerce-form-row,
.level-check-register__form #form-level-check .form-row,
.level-check-register__form #form-level-check .woocommerce-form-row {
    float: none;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Labels die door JS naar placeholders zijn omgezet — visueel verbergen
   maar toegankelijk houden voor screenreaders. */
.level-check-register__form .lcr-label--hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Zichtbare labels (Level / Preferred contact moment / Notes) — boven het veld.
   Sluit hidden labels (sr-only) en checkbox-labels (newsletter) uit. */
.level-check-register__form label:not(.lcr-label--hidden):not(:has(input[type="checkbox"])) {
    display: block;
    margin: 7px 0 12px;
    padding-left: 17px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    letter-spacing: 0.42px;
    text-transform: uppercase;
    color: var(--font-color, #0A2636);
}

/* Field styling — input/select/textarea binnen het form. */
.level-check-register__form input[type="text"],
.level-check-register__form input[type="email"],
.level-check-register__form input[type="tel"],
.level-check-register__form select,
.level-check-register__form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 20px;
    border: 2px solid var(--font-color, #0A2636);
    border-radius: 34px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: var(--font-color, #0A2636);
    letter-spacing: 0.42px;
}

/* Selects houden uppercase (geselecteerde optie ziet eruit als placeholder). */
.level-check-register__form select {
    text-transform: uppercase;
}

.level-check-register__form textarea {
    height: 145px;
    border-radius: 24px;
    resize: vertical;
}

.level-check-register__form input[type="text"]:focus,
.level-check-register__form input[type="email"]:focus,
.level-check-register__form input[type="tel"]:focus,
.level-check-register__form select:focus,
.level-check-register__form textarea:focus {
    border-color: var(--blue, #1A75BB);
    outline: none;
}

.level-check-register__form input::placeholder,
.level-check-register__form textarea::placeholder {
    color: var(--font-color, #0A2636);
    text-transform: uppercase;
    letter-spacing: 0.42px;
    opacity: 1;
}

/* Email + telefoon krijgen een icoon rechts (18px van rand, verticaal gecentreerd).
   Extra padding-right zodat de tekst niet over het icoon heen typt. */
.level-check-register__form input[type="email"] {
    padding-right: 50px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='14' viewBox='0 0 18 14' fill='none'%3E%3Cpath d='M16.3125 0C17.2266 0 18 0.773438 18 1.6875V11.8125C18 12.7617 17.2266 13.5 16.3125 13.5H1.6875C0.738281 13.5 0 12.7617 0 11.8125V1.6875C0 0.773438 0.738281 0 1.6875 0H16.3125ZM16.3125 1.6875H1.6875V3.12891C2.46094 3.79688 3.72656 4.78125 6.39844 6.89062C6.99609 7.34766 8.15625 8.47266 9 8.4375C9.80859 8.47266 10.9688 7.34766 11.5664 6.89062C14.2383 4.78125 15.5039 3.79688 16.3125 3.12891V1.6875ZM1.6875 11.8125H16.3125V5.30859C15.5039 5.94141 14.3438 6.85547 12.6211 8.22656C11.8125 8.82422 10.4766 10.1602 9 10.125C7.48828 10.1602 6.11719 8.82422 5.34375 8.22656C3.62109 6.85547 2.46094 5.94141 1.6875 5.30859V11.8125Z' fill='%230A2636'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
}

/* Phone-veld is in plugin als input[type="text"] gerendeerd, dus we
   targeten op ID. */
.level-check-register__form #account_phone_number {
    padding-right: 50px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='19' viewBox='0 0 18 19' fill='none'%3E%3Cpath d='M17.0156 11.6016C17.5781 11.8477 18 12.4453 18 13.1133C18 13.2188 17.9648 13.3242 17.9297 13.4648L17.1914 16.7695C17.0156 17.4727 16.3828 18 15.6094 18C6.99609 18.0352 0 11.0391 0 2.39062C0 1.61719 0.527344 0.984375 1.23047 0.808594L4.53516 0.0703125C4.67578 0.0351562 4.78125 0 4.88672 0C5.55469 0 6.15234 0.421875 6.39844 0.984375L7.91016 4.57031C7.98047 4.74609 8.05078 4.95703 8.05078 5.20312C8.05078 5.69531 7.80469 6.15234 7.45312 6.43359L6.04688 7.59375C7.06641 9.45703 8.54297 10.9336 10.4062 11.9531L11.5664 10.5469C11.8477 10.1953 12.3047 9.94922 12.7969 9.94922C13.043 9.94922 13.2539 10.0195 13.4297 10.0898L17.0156 11.6016ZM15.5391 16.3477L16.2773 13.1484L12.832 11.6719L10.8633 14.0625C7.38281 12.4102 5.58984 10.6172 3.9375 7.13672L6.32812 5.16797L4.85156 1.72266L1.6875 2.46094C1.72266 10.0898 7.91016 16.3125 15.5391 16.3477Z' fill='%230A2636'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
}

/* Submit-knop: pink, full width, uppercase.
   Specificity opgevoerd zodat dit wint van WC's
   `button.woocommerce-Button.woocommerce-button.button.woocommerce-form-register__submit`. */
.level-check-register__form button.woocommerce-Button.woocommerce-button.button[type="submit"] {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 20px;
    background: var(--pink, #E4087E);
    background-color: var(--pink, #E4087E);
    color: #fff;
    border: none;
    border-radius: 34px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    letter-spacing: 0.42px;
    text-transform: uppercase;
    cursor: pointer;
}

/* Privacy / personal data disclaimer onderaan het form. */
.level-check-register__form .woocommerce-privacy-policy-text,
.level-check-register__form .woocommerce-privacy-policy-text p {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.42px;
    margin: 0;
}

.level-check-register__form .woocommerce-privacy-policy-text a {
    color: var(--font-color, #0A2636);
    font-weight: 700;
    text-decoration: none;
}

.level-check-register__form .woocommerce-privacy-policy-text a:hover {
    text-decoration: underline;
}

/* Ingelogde versie (form-level-check): phone solo op rij 1 (halve breedte),
   level + preferred contact moment naast elkaar op rij 2. Phone-rij spant
   de volle grid-breedte zodat level naar de volgende rij flowt; de input
   zelf is 50% breed (min half van column-gap) zodat het exact één kolom
   uitlijnt. */
.level-check-register__form #form-level-check .form-row:has(#account_phone_number) {
    grid-column: 1 / -1;
}
.level-check-register__form #form-level-check #account_phone_number {
    width: calc(50% - 12px);
}

/* Reorder: submit-knop boven, privacy-tekst eronder. Default order = 0
   voor de form-velden. 17px horizontale witruimte links/rechts voor
   newsletter checkbox, submit-knop en disclaimer. box-sizing: border-box
   zodat padding niet bij de breedte wordt opgeteld. */
.level-check-register__form #register .form-row:has(input[type="checkbox"]),
.level-check-register__form #form-level-check .form-row:has(input[type="checkbox"]) {
    padding: 0 17px;
    box-sizing: border-box;
}
.level-check-register__form #register .form-row:has(button[type="submit"]),
.level-check-register__form #form-level-check .form-row:has(button[type="submit"]) {
    order: 1;
    padding: 0 17px;
    box-sizing: border-box;
}
.level-check-register__form .woocommerce-privacy-policy-text {
    order: 2;
    padding: 0 17px;
    box-sizing: border-box;
}

/* Newsletter checkbox: gestijld als 18x18 box met 2px border. */
.level-check-register__form input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 2px solid var(--font-color, #0A2636);
    border-radius: 2px;
    background: #fff;
    box-sizing: border-box;
    cursor: pointer;
    flex: 0 0 18px;
}

.level-check-register__form input[type="checkbox"]:checked {
    background-color: var(--green, #1FA238);
    border-color: var(--lighter-green, #DDF1E1);
}

/* Newsletter label (input is genest in label, géén `for=` op tekst-zijde). */
.level-check-register__form label:has(input[type="checkbox"]) {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.42px;
    color: var(--font-color, #0A2636);
}

/* Full-width rows: textarea, checkbox, submit-knop, hidden-fields, privacy text. */
.level-check-register__form #register .form-row:has(textarea),
.level-check-register__form #register .form-row:has(input[type="checkbox"]),
.level-check-register__form #register .form-row:has(button[type="submit"]),
.level-check-register__form #form-level-check .form-row:has(textarea),
.level-check-register__form #form-level-check .form-row:has(input[type="checkbox"]),
.level-check-register__form #form-level-check .form-row:has(button[type="submit"]),
.level-check-register__form #form-level-check .form-row:has(input[type="hidden"]),
.level-check-register__form .woocommerce-privacy-policy-text,
.level-check-register__form .woocommerce-PrivacyPolicy-text {
    grid-column: 1 / -1;
}

/* ============ Responsive ============ */

@media (max-width: 991px) {
    .level-check-register .tt-course-page__breadcrumbs {
        padding-top: 14px;
        text-align: center;
        margin-bottom: 33px;
    }

    .level-check-register .tt-course-page__breadcrumbs .tt-breadcrumbs__list {
        justify-content: center;
    }

    .level-check-register .tt-course-page__title {
        text-align: center;
        font-size: 34px;
        line-height: 41px;
        margin-bottom: 41px;
    }

    .level-check-register__columns {
        flex-direction: column;
    }

    .level-check-register__left {
        padding-top: 0;
    }

    .level-check-register__form label:not(.lcr-label--hidden):not(:has(input[type="checkbox"])) {
        padding-left: 0;
    }

    .level-check-register__form #register .form-row:has(button[type="submit"]),
    .level-check-register__form #form-level-check .form-row:has(button[type="submit"]) {
        padding: 0;
    }

    .level-check-register .level-check-register__sidebar-title {
        text-align: center;
        font-size: 28px;
        line-height: 36px;
        margin-bottom: 18px;
    }

    .level-check-register .level-check-register__step {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 5px;
        font-size: 16px;
        line-height: 28px;
    }

    .level-check-register__steps {
        gap: 19px;
    }

    .level-check-register__step-marker {
        flex: 0 0 48px;
        width: 48px;
        height: 48px;
    }

    .level-check-register__video-thumbnail {
        width: 129px;
        height: 129px;
        border-width: 13px;
    }

    .level-check-register__video-thumbnail-play svg {
        width: 45px;
        height: auto;
    }

    .level-check-register__sidebar {
        padding-bottom: 110px;
    }

    .level-check-register__form .woocommerce-privacy-policy-text,
    .level-check-register__form #register .form-row:has(input[type="checkbox"]),
    .level-check-register__form #form-level-check .form-row:has(input[type="checkbox"]) {
        padding: 0;
    }
}

@media (max-width: 767px) {
    .level-check-register__form #register,
    .level-check-register__form #form-level-check {
        grid-template-columns: 1fr;
    }

    .level-check-register__form #form-level-check #account_phone_number {
        width: 100%;
    }
}