/* One surface per summary/step, using the existing Angular hosts and section hooks.
 * :where keeps the scope from raising the priority of country .box/header rules.
 */
:where(app-procedure-resume, app-step-resume) {
    --content-card-gutter: 20px;
    --content-title-inset: 12px;
    display: block;
    overflow-wrap: anywhere;
    background-color: var(--gray-0);
    border-radius: var(--radius-large, 16px);
    padding-block: 20px 0;
    margin-block-end: 20px;
}

:where(app-procedure-resume, app-step-resume) > .panel-header {
    margin-inline: var(--content-card-gutter);
    margin-block-end: 8px;
}

/* Keep shared header padding and country sizing overrides effective. */
:where(app-procedure-resume, app-step-resume) > .panel-header .inner {
    border-radius: var(--radius-medium, 12px);
}

:where(app-procedure-resume > *, app-step-resume > #stepDetailContent > *) > .box,
:where(app-step-resume > #stepDetailContent > app-step-certifier) > .certificationBox {
    background-color: transparent;
    border: none;
    border-block-start: 1px solid var(--gray-200);
    border-radius: var(--radius-none, 0);
    box-shadow: none;
    margin: 0;
    padding: 24px calc(var(--content-card-gutter) + var(--content-title-inset));
}

:where(app-procedure-resume > app-collapsible-block:first-of-type,
       app-step-resume > #stepDetailContent > app-collapsible-block:first-child) > .box {
    border-block-start: none;
}

:where(app-procedure-resume, app-step-resume) > .stepSummaryResume {
    margin-inline: calc(var(--content-card-gutter) + var(--content-title-inset));
}

:where(app-step-resume) > .online-container {
    margin-top: 16px;
    padding: 8px 12px;
    margin-inline: var(--content-card-gutter);
    border-radius: var(--radius-medium, 12px);
}

:where(app-step-resume) > .online-container .apply-btn {
    border-radius: var(--radius-full, 50px);
    box-shadow: none;
}

/* Use the existing heading priority so country typography remains customisable. */
:where(app-procedure-resume, app-step-resume) .box .sumTitle h2 {
    margin-bottom: 20px;
    font-size: 20px;
    color: var(--gray-900);
}

/* Supplementary summary attachments keep their existing wrapper and alignment. */
:where(app-procedure-resume > div:has(> app-attachments-list)) {
    margin-inline: calc(var(--content-card-gutter) + var(--content-title-inset));
}

@media (max-width: 767px) {
    :where(app-procedure-resume, app-step-resume) {
        --content-card-gutter: 16px;
        padding-block-start: 16px;
    }
}