/* Keep the existing header and certification hooks available to country CSS. */
.panel-header .step-next-link {
    position: absolute;
    inset-inline-end: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    min-height: 40px;
    border-radius: var(--radius-small);
    color: var(--panel-header-text, var(--primary-fill-text));
    font-size: 22px;
    line-height: 1;
    text-decoration: none;
}

.panel-header .step-next-link:hover,
.panel-header .step-next-link:focus-visible {
    text-decoration: none;
}

:where(.panel-header) a:where(.step-next-link):focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

.panel-header .step-next-link:focus-visible {
    outline: 2px solid var(--panel-header-text, var(--primary-fill-text));
    outline-offset: 2px;
}

.panel-header .inner:where(.has-next-step) .resumeTitle,
.panel-header .inner:where(.has-next-step) h2.instep {
    padding-inline-end: 44px;
}

.panel-header .inner:where(.has-next-step.has-step-certification) h2.instep {
    padding-inline-end: 104px;
}

:where(.panel-header .has-next-step) .certified-bar {
    inset-inline-end: 48px;
}

:where([dir="rtl"]) .step-next-link i {
    transform: scaleX(-1);
}

@media print {
    .step-next-link { display: none; }
}

/* The arrow follows the header text; the legacy rule (#headerDetails .inner a i) gave it a fixed light gray. */
#headerDetails .inner a:where(.step-next-link) i {
    color: var(--panel-header-text, var(--primary-fill-text));
}

#headerDetails .inner a:where(.step-next-link:hover, .step-next-link:focus-visible) i {
    color: var(--panel-header-text, var(--primary-fill-text));
    opacity: 1;
}