/* Shared Steps v2. Country variables and explicit v2 selectors remain overridable.
   The compatibility adapter retires only documented legacy presentation rules.
   Text colours use the -text names; the earlier names (--steps-heading-color, --steps-text-color,
   --steps-active-link-color, --steps-entity-color) are still read as fallbacks for one release. */
:where([data-steps-design="2"], [data-steps-design="2"] *) {
    /* A component-only bridge keeps the old shared RTL rule from applying
       a public Steps font variable to unrelated headings outside the card. */
    --steps-rtl-font-family: var(--steps-font-family, var(--ereg-font-family-rtl));
}
.step-list-container:where([data-steps-design="2"]) {
    font-family: var(--steps-font-family, inherit);
    background-color: var(--steps-card-background, var(--gray-0));
    border-radius: var(--steps-card-radius, var(--radius-large));
}
:where([data-steps-design="2"]) .panel-header > .inner {
    background: var(--steps-heading-background, transparent);
    padding: var(--steps-heading-padding, 0);
}
.step-list-container:where([data-steps-design="2"]) .panel-header > .inner::before {
    border-top-color: var(--steps-heading-arrow-color, transparent);
}
:where([data-steps-design="2"]) .panel-header .inner .losSummary {
    color: var(--steps-heading-text, var(--steps-heading-color, var(--gray-900)));
    font-family: var(--steps-font-family, var(--steps-legacy-font-family, inherit));
    font-size: var(--steps-heading-size, 22px);
    font-weight: var(--steps-heading-weight, 600);
    line-height: 1.4;
}
.step-list-container:where([data-steps-design="2"]) .row-block .inner {
    font-family: var(--steps-font-family, var(--steps-legacy-font-family, inherit));
    font-size: var(--steps-group-size, 14px);
    font-weight: var(--steps-group-weight, 600);
}
:where([data-steps-design="2"]) .row-step .inner {
    padding: var(--steps-row-padding, 12px 12px 12px 0);
}
:where([data-steps-design="2"]) .row-step .inner:where(:dir(rtl)) {
    padding: var(--steps-row-padding, 12px 0 12px 12px);
}
:where([data-steps-design="2"]) .row-step .inner a {
    color: var(--ereg-link-color, var(--steps-link-text, var(--steps-text-color, var(--steps-legacy-link-color, var(--gray-900)))));
    font-family: var(--steps-font-family, var(--steps-legacy-font-family, inherit));
    font-size: var(--steps-link-size, var(--ereg-body-font-size, 15px));
    font-weight: var(--ereg-link-weight, var(--steps-link-weight, 600));
    line-height: 1.45;
}
:where([data-steps-design="2"]) .row-step .inner a:hover,
:where([data-steps-design="2"]) .row-step.selected .inner a {
    color: var(--ereg-link-color, var(--steps-active-link-text, var(--steps-active-link-color, var(--steps-accent-color, var(--steps-legacy-active-link-color, var(--steps-legacy-accent-color, var(--primary-500)))))));
}
:where([data-steps-design="2"]) .row-step .inner .nb {
    min-width: var(--steps-marker-size, 26px);
    height: auto;
    min-height: var(--steps-marker-size, 26px);
    aspect-ratio: 1;
    padding: 0 2px;
    font-variant-numeric: tabular-nums;
    line-height: calc(var(--steps-marker-size, 26px) - 2px);
    border-radius: var(--steps-marker-radius, var(--radius-circle));
    font-size: var(--steps-marker-text-size, 14px);
}
:where([data-steps-design="2"]) .row-step.selected .inner .nb {
    background: var(--steps-active-marker-background, var(--steps-accent-color, var(--steps-legacy-active-marker-background, var(--steps-legacy-accent-background, var(--steps-legacy-accent-color, var(--primary-fill))))));
    --step-marker-border: var(--steps-accent-color, var(--steps-legacy-accent-color, var(--steps-legacy-accent-border-color, var(--primary-500))));
    --step-marker-foreground: var(--steps-active-marker-text, var(--steps-legacy-active-marker-text, var(--primary-fill-text)));
}
:where([data-steps-design="2"]) .step-entity {
    font-family: var(--steps-font-family, inherit);
    color: var(--steps-entity-text, var(--steps-entity-color, var(--gray-600)));
}
@media (max-width: 767px) {
    :where([data-steps-design="2"]) .row-step .inner a {
        font-size: var(--steps-link-size, 15px);
    }
}

/* Retire only the old triangle on the procedure summary/step stripe.
   Keep the pseudo-element and an explicit country override available. */
:where([data-procedure-heading-design="2"]).panel-header > .inner::before {
    border-top-color: var(--procedure-heading-arrow-color, transparent);
}

/* Keep the legacy one-class priority so country flag colours still win. */
:where(.step-list-container) .color-secondary {
    color: var(--secondary-600, #d97560);
}