/* ============================================================
   DAR — Help page ("Registration steps" journey)
   Vertical timeline of the enrolment journey + video guides
   + portal support CTA. RTL/LTR safe, DAR tokens only.
   ============================================================ */

.help-page {
    background: var(--dar-bg);
    padding: clamp(1rem, 3vw, 2rem) 0 clamp(2rem, 6vw, 3rem);
    font-family: var(--dar-font-display, var(--dar-font-latin));
}

.help-shell {
    max-width: 680px;
    margin-inline: auto;
    padding-inline: clamp(.5rem, 3vw, 1rem);
}

/* ---------------- Page header (matches the app-wide pattern) ---------------- */
.help-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: clamp(1rem, 3vw, 1.5rem);
}
.help-header__icon {
    width: 44px;
    height: 44px;
    border-radius: var(--dar-radius-pill, 9999px);
    background: var(--dar-green-subtle, rgba(26, 138, 87, 0.1));
    color: var(--dar-green-deep, #144e33);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}
.help-header__title {
    margin: 0;
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--dar-green-deep, #144e33);
    line-height: 1.2;
}
.help-header__subtitle {
    margin: 0;
    font-size: .88rem;
    color: var(--dar-text-muted, #5f7168);
    line-height: 1.5;
}

/* ---------------- Journey timeline ---------------- */
.help-journey {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(.7rem, 2vw, 1rem);
}

.help-step {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: clamp(.6rem, 2vw, .9rem);
    align-items: stretch;

    /* Per-step palette, overridden by the .help-step--* modifiers below. */
    --step-soft: var(--dar-green-soft);
    --step-ink: var(--dar-green-dark);
    --step-line: rgba(26, 138, 87, .30);
}
.help-step--green  { --step-soft: var(--dar-green-soft);  --step-ink: var(--dar-green-dark);  --step-line: rgba(26, 138, 87, .30); }
.help-step--amber  { --step-soft: var(--dar-yellow-soft); --step-ink: var(--dar-yellow-deep); --step-line: rgba(246, 183, 11, .45); }
.help-step--red    { --step-soft: var(--dar-red-soft);    --step-ink: var(--dar-red-dark);    --step-line: rgba(220, 38, 38, .30); }
.help-step--blue   { --step-soft: var(--dar-blue-soft);   --step-ink: var(--dar-blue-deep);   --step-line: rgba(37, 99, 235, .30); }
.help-step--purple { --step-soft: #f3eefe;                --step-ink: #5b3fbf;                --step-line: rgba(91, 63, 191, .30); }

.help-step__marker {
    position: relative;
    display: flex;
    justify-content: center;
    padding-top: .95rem;
}
.help-step__num {
    position: relative;
    z-index: 1;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1rem;
    background: var(--step-soft);
    color: var(--step-ink);
    border: 1.5px solid var(--step-line);
    flex-shrink: 0;
}
/* Dashed connector to the next step. Centred, so it works in RTL and LTR. */
.help-step:not(:last-child) .help-step__marker::after {
    content: "";
    position: absolute;
    top: calc(.95rem + 44px);
    bottom: calc(-1 * clamp(.7rem, 2vw, 1rem));
    left: 50%;
    margin-left: -1px;
    border-left: 2px dashed var(--dar-border);
}

.help-step__card {
    background: var(--dar-surface);
    border: 1px solid var(--dar-border-light);
    border-radius: var(--dar-radius-card, 20px);
    box-shadow: 0 6px 18px rgba(20, 70, 45, .05);
    padding: clamp(.85rem, 2.5vw, 1.05rem);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(.6rem, 2vw, .9rem);
    align-items: center;
}

.help-step__body { min-width: 0; }

.help-step__title {
    margin: 0 0 .25rem;
    font-size: clamp(.98rem, 2.8vw, 1.08rem);
    font-weight: 800;
    color: var(--dar-green-deep);
    line-height: 1.35;
}
.help-step__desc {
    margin: 0;
    font-size: clamp(.82rem, 2.4vw, .9rem);
    color: var(--dar-text-muted);
    line-height: 1.55;
}

.help-step__tag {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .65rem;
    padding: .35rem .75rem;
    border-radius: var(--dar-radius-pill, 9999px);
    background: var(--step-soft);
    color: var(--step-ink);
    font-size: .78rem;
    font-weight: 700;
}

.help-step__icon {
    width: clamp(44px, 12vw, 54px);
    height: clamp(44px, 12vw, 54px);
    border-radius: var(--dar-radius-icon, 16px);
    background: var(--step-soft);
    color: var(--step-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.3rem, 4vw, 1.6rem);
    flex-shrink: 0;
}

/* ---------------- Waiting-time note ---------------- */
.help-note {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-top: clamp(.9rem, 3vw, 1.25rem);
    padding: clamp(.85rem, 2.5vw, 1rem);
    background: var(--dar-green-soft);
    border: 1px solid rgba(26, 138, 87, .18);
    border-radius: var(--dar-radius-card, 20px);
    color: var(--dar-green-deep);
    font-size: clamp(.82rem, 2.4vw, .9rem);
    line-height: 1.55;
}
.help-note__icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--dar-surface);
    color: var(--dar-green);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    flex-shrink: 0;
}

/* ---------------- Still need help? ---------------- */
.help-support {
    margin-top: clamp(1.25rem, 4vw, 1.75rem);
    text-align: center;
    background: var(--dar-surface);
    border: 1px solid var(--dar-border-light);
    border-radius: var(--dar-radius-panel, 24px);
    box-shadow: 0 6px 18px rgba(20, 70, 45, .05);
    padding: clamp(1.25rem, 4vw, 1.75rem) clamp(1rem, 3vw, 1.5rem);
}
.help-support__title {
    margin: 0 0 .35rem;
    font-size: clamp(1.05rem, 3vw, 1.2rem);
    font-weight: 800;
    color: var(--dar-green-deep);
}
.help-support__desc {
    margin: 0 0 1rem;
    font-size: clamp(.85rem, 2.5vw, .93rem);
    color: var(--dar-text-muted);
    line-height: 1.6;
}
/* Same pill treatment as the landing page "Help" mini action. */
.help-support__btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1.1rem;
    border-radius: var(--dar-radius-pill, 9999px);
    background: var(--dar-green-soft);
    color: var(--dar-green);
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none;
    transition: color .15s ease, background-color .15s ease, transform .15s ease;
}
.help-support__btn:hover {
    background: #dbede3;
    color: var(--dar-green-dark);
    transform: translateY(-1px);
}
.help-support__btn:focus-visible {
    outline: 2px solid var(--dar-green);
    outline-offset: 2px;
}
.help-support__address {
    display: block;
    margin-top: .7rem;
    font-size: .82rem;
    color: var(--dar-muted);
    word-break: break-word;
}

/* ---------------- Narrow phones ---------------- */
@media (max-width: 420px) {
    .help-step { grid-template-columns: 34px minmax(0, 1fr); }
    .help-step__num { width: 32px; height: 32px; font-size: .9rem; }
    .help-step:not(:last-child) .help-step__marker::after { top: calc(.95rem + 38px); }
    .help-step__card { grid-template-columns: minmax(0, 1fr) auto; }
    /* German compounds wrap to two lines here, so buy back some vertical space. */
    .help-header__title { font-size: 1.4rem; }
    .help-step__icon { width: 40px; height: 40px; font-size: 1.2rem; }
    .help-step__tag { margin-top: .5rem; }
    .help-support__desc { margin-bottom: .85rem; }
}

/* ---------------- Fonts inherit everywhere ---------------- */
.help-page button,
.help-page input,
.help-page select,
.help-page textarea { font-family: inherit; }