/* ============================================================
   DAR — Public Registration screen
   Visual continuation of the welcome screen. Loaded together with
   welcome.css, which provides the self-hosted fonts, colour tokens,
   background and shared header/decoration classes.
   This file only styles the form + page layout for /registration.
   Mobile-first, app-like. Natural vertical scrolling is expected here.
   ============================================================ */

/* ---------------- Page shell ---------------- */
.registration,
.anmeldung {
    position: relative;
    overflow-x: clip;
    min-height: 100vh;      /* fallback */
    min-height: 100svh;
    min-height: 100dvh;     /* dynamic viewport */
    padding-inline: clamp(1rem, 5vw, 1.5rem);
    padding-top: calc(clamp(12px, 2.5vh, 24px) + env(safe-area-inset-top));
    padding-bottom: calc(clamp(18px, 4vh, 36px) + env(safe-area-inset-bottom));
}
.registration__inner,
.anmeldung__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 3vh, 1.5rem);
    animation: registrationIn .22s ease both;
}
@keyframes registrationIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
@keyframes anmeldungIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* ---------------- Top bar: back + language switch ---------------- */
.registration__topbar,
.anmeldung__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}
.registration__topbar .welcome__lang,
.anmeldung__topbar .welcome__lang { margin-bottom: 0; }
.registration__back,
.anmeldung__back {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--dar-surface);
    color: var(--dar-green-dark);
    border: 1px solid var(--dar-hairline);
    box-shadow: var(--dar-shadow);
    text-decoration: none;
    font-size: 1.15rem;
    transition: transform .15s ease, box-shadow .15s ease;
}
.registration__back:hover,
.anmeldung__back:hover {
    transform: translateY(-1px);
    box-shadow: var(--dar-shadow-hover);
    color: var(--dar-green-dark);
}
.registration__back:focus-visible,
.anmeldung__back:focus-visible { outline: 2px solid var(--dar-green); outline-offset: 2px; }
[dir="rtl"] .registration__back i,
[dir="rtl"] .anmeldung__back i { transform: scaleX(-1); }

/* Header (logo/title/subtitle) reuses .welcome__* from welcome.css. */
.registration .welcome__header,
.anmeldung .welcome__header { margin-top: clamp(.25rem, 1.5vh, .75rem); }

/* ---------------- Step indicator ---------------- */
.registration-stepper,
.anmeldung-stepper {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.step-indicator {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    text-align: center;
    color: var(--dar-muted);
}
.step-indicator .step-num {
    position: relative;
    z-index: 1;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    background: var(--dar-surface);
    color: var(--dar-muted);
    border: 2px solid #dfe3df;
    box-shadow: var(--dar-shadow);
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.step-indicator .step-label {
    font-size: clamp(.72rem, 3vw, .82rem);
    font-weight: 600;
    line-height: 1.2;
}
/* connector line entering each step (not the first) */
.step-indicator::before {
    content: "";
    position: absolute;
    top: 1.2rem;
    inset-inline-start: -50%;
    width: 100%;
    height: 2px;
    background: #dfe3df;
    z-index: 0;
    transition: background-color .2s ease;
}
.step-indicator:first-child::before { display: none; }

.step-indicator.active { color: var(--dar-green-dark); }
.step-indicator.active .step-num { background: var(--dar-green); color: #fff; border-color: var(--dar-green); }
.step-indicator.done { color: var(--dar-green); }
.step-indicator.done .step-num { background: var(--dar-green); color: #fff; border-color: var(--dar-green); }
.step-indicator.active::before,
.step-indicator.done::before { background: var(--dar-green); }

/* ---------------- Card ---------------- */
.registration-card,
.anmeldung-card {
    background: var(--dar-surface);
    border: 1px solid var(--dar-hairline);
    border-radius: var(--dar-radius-panel, 24px);
    box-shadow: var(--dar-shadow);
    padding: clamp(1.15rem, 4.5vw, 1.75rem);
}
.registration-card__title,
.anmeldung-card__title {
    color: var(--dar-green-dark);
    font-weight: 700;
    font-size: clamp(1.15rem, 4.5vw, 1.35rem);
    margin: 0 0 clamp(1rem, 3vw, 1.4rem);
}
.registration-section-title,
.anmeldung-section-title {
    color: var(--dar-green-dark);
    font-weight: 700;
    font-size: clamp(1.02rem, 4vw, 1.15rem);
    margin: clamp(1.1rem, 3.5vw, 1.5rem) 0 clamp(.75rem, 2.5vw, 1rem);
}
.anmeldung-section-title:first-child { margin-top: 0; }

/* ---------------- Form grid ---------------- */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(.85rem, 3vw, 1.15rem);
}
.form-row { display: flex; flex-direction: column; }
.form-row--full { grid-column: 1 / -1; }
@media (max-width: 480px) {
    .form-grid { grid-template-columns: 1fr; }
}

.form-label {
    font-weight: 600;
    font-size: .92rem;
    color: var(--dar-text);
    margin-bottom: .45rem;
    display: block;
}
.form-hint {
    font-size: .8rem;
    color: var(--dar-muted);
    margin-top: .4rem;
    line-height: 1.4;
}
.optional-tag { color: var(--dar-muted); font-weight: 500; font-size: .82rem; }

/* ---------------- Inputs / selects ---------------- */
.field { position: relative; }
.anmeldung .form-control,
.anmeldung .form-select {
    width: 100%;
    min-height: 3.4rem;
    border-radius: 16px;
    border: 1px solid #e6e9e5;
    background-color: #fff;
    background-image: none;
    color: var(--dar-text);
    font-size: 1.02rem;
    font-family: inherit;
    line-height: 1.3;
    padding: .8rem 1rem;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.field .form-control,
.field .form-select { padding-inline-start: 2.9rem; }
.field--select .form-select { padding-inline-end: 2.6rem; }

.anmeldung .form-control::placeholder { color: var(--dar-muted); opacity: 1; }
.anmeldung .form-control:focus,
.anmeldung .form-select:focus {
    outline: none;
    border-color: var(--dar-green);
    box-shadow: 0 0 0 4px rgba(26, 138, 87, .12);
    background-color: #fff;
}

/* Leading icon + select chevron */
.field__icon {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    height: 3.4rem;
    width: 2.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dar-muted);
    font-size: 1.05rem;
    pointer-events: none;
}
.field__chevron {
    position: absolute;
    top: 0;
    inset-inline-end: 1rem;
    height: 3.4rem;
    display: flex;
    align-items: center;
    color: var(--dar-muted);
    font-size: .95rem;
    pointer-events: none;
}

/* Neutralise Bootstrap valid/invalid backgrounds + green valid borders */
.anmeldung .form-control:valid,
.anmeldung .form-select:valid,
.anmeldung .was-validated .form-control:valid,
.anmeldung .was-validated .form-select:valid {
    border-color: #e6e9e5;
    background-image: none;
}
.anmeldung .was-validated .form-control:valid:focus,
.anmeldung .was-validated .form-select:valid:focus {
    border-color: var(--dar-green);
    box-shadow: 0 0 0 4px rgba(26, 138, 87, .12);
}
.anmeldung .form-control.is-invalid,
.anmeldung .form-select.is-invalid,
.anmeldung .was-validated .form-control:invalid,
.anmeldung .was-validated .form-select:invalid {
    border-color: var(--dar-red);
    background-image: none;
}
.anmeldung .form-control.is-invalid:focus,
.anmeldung .form-select.is-invalid:focus {
    box-shadow: 0 0 0 4px rgba(214, 69, 69, .12);
}

.anmeldung .invalid-feedback {
    display: none;
    width: 100%;
    color: var(--dar-red);
    font-size: .82rem;
    font-weight: 500;
    margin-top: .4rem;
}
.anmeldung .is-invalid ~ .invalid-feedback { display: block; }

.field-error {
    color: var(--dar-red);
    font-size: .82rem;
    font-weight: 500;
    margin-top: .4rem;
}

/* Group-level validation feedback (segmented radios, location, consent) */
.field-error--group { display: none; }
.seg.has-error + .field-error--group { display: block; }
.anmeldung .seg.has-error .seg__btn { border-color: var(--dar-red); color: var(--dar-red); }
.anmeldung .location-wrapper.has-error {
    outline: 1.5px solid var(--dar-red);
    outline-offset: 4px;
    border-radius: 16px;
}
.anmeldung .consent.has-error .form-check-input { border-color: var(--dar-red); }

/* ---------------- Segmented controls (salutation / language / gender) ---------------- */
.seg { display: flex; gap: .6rem; }
.seg__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
.seg__btn {
    flex: 1 1 0;
    min-height: 3.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .6rem 1rem;
    border-radius: 14px;
    border: 1px solid #e6e9e5;
    background: #fff;
    color: var(--dar-text);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    text-align: center;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.seg__input:checked + .seg__btn {
    border-color: var(--dar-green);
    background: var(--dar-green-soft);
    color: var(--dar-green-dark);
    box-shadow: inset 0 0 0 1px var(--dar-green);
}
.seg__input:focus-visible + .seg__btn { outline: 2px solid var(--dar-green); outline-offset: 2px; }
.seg__btn:hover { border-color: #cfd6cd; }

/* ---------------- Location option cards ---------------- */
.location-wrapper { margin-top: .25rem; }
.anmeldung .location-option {
    display: block;
    border: 1px solid #e6e9e5;
    border-radius: 16px;
    padding: .85rem 1rem;
    margin-bottom: .7rem;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.anmeldung .location-option:hover { border-color: #cfd6cd; }
.anmeldung .location-option:has(.form-check-input:checked) {
    border-color: var(--dar-green);
    background: var(--dar-green-soft);
}
.anmeldung .location-option.location-fixed { opacity: .6; }
.anmeldung .location-option.location-fixed .form-check-input { pointer-events: none; }
.anmeldung .form-check-label a { color: var(--dar-green); }

/* ---------------- Program picker cards (school) ---------------- */
.anmeldung .ac-seg {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: .6rem;
}
.anmeldung .ac-seg__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.anmeldung .ac-seg__btn {
    flex: 1 1 30%;
    min-width: 150px;
    min-height: 3.1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    padding: .85rem .8rem;
    border: 1.5px solid #e6e9e5;
    border-radius: 14px;
    background: #fff;
    color: var(--dar-text);
    cursor: pointer;
    text-align: center;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.anmeldung .ac-seg__btn:hover { border-color: #cfd6cd; }
.anmeldung .ac-seg__name {
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.3;
}
.anmeldung .ac-seg__subtitle {
    font-size: .9rem;
    font-weight: 600;
    color: var(--dar-green);
    line-height: 1.3;
}
.anmeldung .ac-seg__desc {
    font-size: .82rem;
    font-weight: 400;
    color: var(--dar-muted);
    line-height: 1.35;
}
.anmeldung .ac-seg__input:checked + .ac-seg__btn {
    border-color: var(--dar-green);
    background: var(--dar-green-soft);
    box-shadow: inset 0 0 0 1px var(--dar-green);
}
.anmeldung .ac-seg__input:checked + .ac-seg__btn .ac-seg__name,
.anmeldung .ac-seg__input:checked + .ac-seg__btn .ac-seg__subtitle {
    color: var(--dar-green-dark);
}
.anmeldung .ac-seg__input:focus-visible + .ac-seg__btn {
    outline: 2px solid var(--dar-green);
    outline-offset: 2px;
}
.anmeldung .ac-seg.has-error .ac-seg__btn { border-color: var(--dar-red); }
.ac-seg.has-error + .field-error--group { display: block; }

/* ---------------- Location cards (school) ---------------- */
.anmeldung .ac-loc-wrap {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin-top: .25rem;
}
.anmeldung .ac-loc-wrap.has-error {
    outline: 1.5px solid var(--dar-red);
    outline-offset: 4px;
    border-radius: 16px;
}
.anmeldung .ac-loc {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: .85rem 1rem;
    border: 1.5px solid #e6e9e5;
    border-radius: 16px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.anmeldung .ac-loc:hover { border-color: #cfd6cd; }
.anmeldung .ac-loc__radio {
    margin-top: 3px;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    cursor: pointer;
    accent-color: var(--dar-green);
}
.anmeldung .ac-loc:has(.ac-loc__radio:checked) {
    border-color: var(--dar-green);
    background: var(--dar-green-soft);
}
.anmeldung .ac-loc.location-fixed { opacity: .6; }
.anmeldung .ac-loc.location-fixed .ac-loc__radio { pointer-events: none; }
.anmeldung .ac-loc__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.anmeldung .ac-loc__name {
    font-weight: 700;
    color: var(--dar-text);
}
.anmeldung .ac-loc__addr {
    font-size: .82rem;
    color: var(--dar-muted);
}
.anmeldung .ac-loc__map {
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--dar-green-dark);
    text-decoration: none;
}
.anmeldung .ac-loc__map:hover { text-decoration: underline; }

/* ---------------- Native checkbox / radio accent ---------------- */
.anmeldung .form-check-input {
    width: 1.2rem;
    height: 1.2rem;
    accent-color: var(--dar-green);
}

/* Consent row */
.consent {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    margin-top: .25rem;
}
.consent .form-check-input { margin-top: .15rem; flex: 0 0 auto; }
.consent .form-check-label { font-size: .9rem; color: var(--dar-text); line-height: 1.45; }

/* ---------------- Alerts ---------------- */
.anmeldung .alert {
    border-radius: 14px;
    padding: .85rem 1rem;
    font-size: .9rem;
    border: 1px solid transparent;
    line-height: 1.45;
    margin-bottom: 0;
}
.anmeldung .alert-warning {
    background: var(--dar-yellow-soft);
    border-color: rgba(207, 148, 0, .3);
    color: #7a5b00;
}
.anmeldung .alert-danger {
    background: #fdecec;
    border-color: rgba(214, 69, 69, .3);
    color: #8f2b2b;
}
.anmeldung .alert a { color: inherit; font-weight: 700; }

/* Existing-account state: keep the cream notification, but present the two
   actions as large, touch-friendly stacked buttons that belong to it. */
.anmeldung .existing-account { text-align: start; }
.anmeldung .existing-account__msg { margin: 0; font-weight: 600; }
.anmeldung .existing-account__actions {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin-top: .9rem;
}
.anmeldung .existing-account .existing-account__btn {
    width: 100%;
}

/* Latin/German-script inputs stay LTR & left-aligned even on the Arabic (RTL)
   page. Only the field box flips direction; the label keeps the page direction. */
.anmeldung .field--ltr { direction: ltr; }
.anmeldung .field--ltr .form-control { text-align: left; }

/* ---------------- Review summary (step 3) ---------------- */
.anmeldung-subcard {
    background: var(--dar-bg);
    border: 1px solid var(--dar-hairline);
    border-radius: 16px;
    padding: clamp(.9rem, 3.5vw, 1.2rem);
}
.anmeldung-subcard + .anmeldung-subcard { margin-top: .9rem; }
.anmeldung-subcard__title {
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .72rem;
    font-weight: 700;
    color: var(--dar-muted);
    margin: 0 0 .75rem;
}
.anmeldung-review {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .4rem .9rem;
    margin: 0;
}
.anmeldung-review dt { font-weight: 600; color: var(--dar-muted); font-size: .85rem; }
.anmeldung-review dd { margin: 0; color: var(--dar-text); font-size: .92rem; word-break: break-word; }

#captcha-placeholder {
    margin-top: .75rem;
    color: var(--dar-muted);
    text-align: center;
    font-size: .78rem;
    line-height: 1.4;
}
.recaptcha-notice a {
    color: var(--dar-muted);
    text-decoration: underline;
}

/* ---------------- Buttons / actions ---------------- */
.registration-btn,
.anmeldung-btn {
    width: 100%;
}

.step-actions { margin-top: clamp(1.1rem, 3.5vw, 1.6rem); }
.step-nav {
    display: flex;
    gap: .8rem;
    margin-top: clamp(1.1rem, 3.5vw, 1.6rem);
}
.step-nav .registration-btn,
.step-nav .anmeldung-btn { width: auto; }
.step-nav .registration-btn--primary,
.step-nav .anmeldung-btn--primary { flex: 1 1 auto; }
.step-nav .registration-btn--ghost,
.step-nav .anmeldung-btn--ghost { flex: 0 0 auto; }

.registration-link,
.anmeldung-link {
    display: block;
    text-align: center;
    margin-top: 1rem;
    color: var(--dar-green);
    font-weight: 600;
    text-decoration: none;
}
.registration-link:hover,
.anmeldung-link:hover { color: var(--dar-green-dark); text-decoration: underline; }
.registration-link:focus-visible,
.anmeldung-link:focus-visible { outline: 2px solid var(--dar-green); outline-offset: 2px; border-radius: 8px; }

/* ---------------- Reserved bottom illustration region ---------------- */
.registration__illustration,
.anmeldung__illustration {
    position: relative;
    margin-top: clamp(.5rem, 2vh, 1rem);
    height: clamp(96px, 18vh, 150px);
    border-radius: 26px;
    background: linear-gradient(180deg, transparent, var(--dar-yellow-soft));
    overflow: hidden;
}
.registration__illustration .deco,
.anmeldung__illustration .deco { opacity: .5; }
.registration__illustration .illus-jasmine,
.anmeldung__illustration .illus-jasmine {
    position: absolute;
    bottom: 8px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    width: clamp(54px, 16vw, 72px);
    color: var(--dar-yellow);
    opacity: .5;
}
.registration__illustration .illus-jasmine .jasmine-center,
.anmeldung__illustration .illus-jasmine .jasmine-center { fill: var(--dar-green); }

/* ---------------- Decorative shapes (subtle, top corners) ---------------- */
.registration__deco,
.anmeldung__deco {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.registration__deco .deco,
.anmeldung__deco .deco { position: absolute; }
.registration__deco .deco--hex-tl,
.anmeldung__deco .deco--hex-tl { top: -30px; inset-inline-start: -34px; width: 104px; color: var(--dar-red); opacity: .06; }
.registration__deco .deco--hex-tr,
.anmeldung__deco .deco--hex-tr { top: 40px; inset-inline-end: -20px; width: 78px; color: var(--dar-yellow); opacity: .1; }

/* ---------------- Desktop / tablet ---------------- */
@media (min-width: 768px) {
    .anmeldung { padding-top: calc(clamp(1.5rem, 5vh, 3rem) + env(safe-area-inset-top)); }
    .anmeldung__inner { max-width: 600px; }
}

/* ---------------- Reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
    .anmeldung__inner { animation: none; }
    .anmeldung__back,
    .anmeldung-btn,
    .seg__btn,
    .step-indicator .step-num,
    .step-indicator::before { transition: none; }
    .anmeldung-btn--primary:hover { transform: none; }
}

/* ---------------- Program selection helper texts ---------------- */
.anmeldung-field-hint {
    margin: -.15rem 0 .55rem;
    font-size: .85rem;
    color: var(--dar-muted);
}
.anmeldung-shared-note {
    margin: .6rem 0 0;
    padding: .6rem .8rem;
    font-size: .82rem;
    color: var(--dar-text);
    background: var(--dar-green-soft);
    border-radius: 12px;
}

/* Grouped inside the program picker: the note spans the full row so it clearly
   belongs to the two Arabic-language programs above and pushes Future Makers below. */
.anmeldung .ac-seg .anmeldung-shared-note {
    flex: 1 1 100%;
    width: 100%;
    margin: 0;
}