/* 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: 19px;
    color: var(--primary-600);
}

/* 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;
    }
}

/* Section rhythm excludes the separate certification credit. */
:where(app-procedure-resume > *, app-step-resume > #stepDetailContent > *) > .box {
    padding-block: 28px 32px;
}
:where(app-procedure-resume) .box .sumTitle h2:where(.float-right) {
    color: var(--gray-900);
}
:where(app-procedure-resume > *) > .box:where(:has(> .sumTitle:not(.opened))) {
    padding-block: 28px;
}
:where(app-procedure-resume) .box:where(:not(.compact-disclosure)) .sumTitle:where(:not(.opened)) h2 {
    margin-block: 0;
}
@media (max-width: 767px) {
    :where(app-procedure-resume > *, app-step-resume > #stepDetailContent > *) > .box {
        padding-block: 24px 28px;
    }
    :where(app-procedure-resume > *) > .box:where(:has(> .sumTitle:not(.opened))) {
        padding-block: 24px;
    }
}

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

    :where(app-procedure-resume, app-step-resume) {
        padding-block-start: 16px;
    }

    :where(app-step-resume) > .panel-header .inner {
        padding: 12px;
    }

    :where(app-step-resume) > .online-container:where(.apply) {
        padding: 12px;
    }
}

@media screen and (max-width: 767px) {
    :where(app-procedure-resume:has(> .procedure-mobile-start), app-step-resume:has(> .procedure-mobile-adjacent)) {
        --summary-action-gap: 16px;
        --summary-action-height: max(44px, var(--button-md-height, 44px));
        position: relative;
        isolation: isolate;
        background-color: transparent;
    }

    :where(app-procedure-resume:has(> .procedure-mobile-start), app-step-resume:has(> .procedure-mobile-adjacent))::before {
        content: "";
        position: absolute;
        inset: 0 0 calc(var(--summary-action-height) + var(--summary-action-gap));
        z-index: -1;
        border-radius: inherit;
        background-color: var(--gray-0);
        pointer-events: none;
    }

    :where(app-procedure-resume, app-step-resume) > :is(.procedure-mobile-start, .procedure-mobile-adjacent) {
        margin-block-start: var(--summary-action-gap);
    }

    .step-footer-nav.procedure-mobile-adjacent {
        gap: 0;
    }

    :where(.procedure-mobile-adjacent).step-footer-floating::before {
        content: "";
        position: absolute;
        inset-inline: calc(50% - 50vw);
        inset-block: calc(0px - var(--procedure-start-gap, 12px) - env(safe-area-inset-bottom, 0px));
        z-index: -1;
        background-color: rgba(var(--gray-0-rgb), 0.8);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        pointer-events: none;
    }

    :where(.procedure-mobile-adjacent) > .step-footer-prev {
        justify-content: flex-start;
        padding-inline-start: max(0px, calc(var(--content-card-gutter) - var(--button-border-width, 1px)));
        text-align: start;
    }

    :where(.procedure-mobile-adjacent) > .step-footer-prev:where(:not(:only-child)) {
        border-start-end-radius: 0;
        border-end-end-radius: 0;
    }

    :where(.procedure-mobile-adjacent) > .step-footer-next:where(:not(:only-child)) {
        justify-content: flex-end;
        padding-inline-end: max(0px, calc(var(--content-card-gutter) - var(--button-border-width, 1px)));
        text-align: end;
        border-start-start-radius: 0;
        border-end-start-radius: 0;
    }

}

@media (max-width: 767px) {
    :where(app-step-resume) .panel-header .inner .instep .index-step {
        background-color: var(--gray-0);
        color: var(--primary-600);
    }
}

@media screen and (max-width: 767px) {
    :where(app-procedure-resume > *, app-step-resume > #stepDetailContent > *) > .box:where(.compact-disclosure) {
        margin-inline: var(--content-card-gutter);
        padding-inline: 0;
    }

    :where(app-step-resume > #stepDetailContent > app-step-certifier) > .certificationBox {
        margin-inline: var(--content-card-gutter);
        padding-inline: 0 var(--content-title-inset);
    }

    .box:where(.compact-disclosure:not(:has(> .sumTitle.opened))),
    :where(.box.compact-disclosure) > .sumTitle {
        cursor: pointer;
    }

    /* Keep the title centered against the touch target, including when it wraps. */
    :where(.compact-disclosure) .sumTitle:where(:has(> h2.float-right)),
    :where(.compact-disclosure .sumTitle) .clearfix:where(:has(> h2.float-right)) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    :where(.compact-disclosure .sumTitle) h2:where(.float-left) {
        flex: 1 1 0;
        min-inline-size: 0;
    }

    :where(.compact-disclosure .sumTitle) h2:where(.float-right) {
        flex: none;
    }

    :where(.compact-disclosure .sumTitle) .clear {
        flex-basis: 100%;
    }

    :where(.compact-disclosure) .sumTitle [role="button"] {
        display: grid;
        place-items: center;
        min-width: 44px;
        min-height: 44px;
        cursor: pointer;
    }

    :where(.compact-disclosure) .sumTitle h2:where([role="button"]) i.box-caret {
        position: static;
    }

    :where(app-step-contact > .row) > :where(.tdContactImage) + .tdContactImage {
        margin-block-start: 40px;
    }

    :where(app-procedure-resume, app-step-resume) .box:where(.compact-disclosure) .sumTitle h2.change {
        color: var(--gray-900);
    }
    :where(app-step-certifier) .blocItem {
        padding-inline-start: 0;
    }
}

/* Keep mobile accordion insets and heading spacing consistent across states. */
@media screen and (max-width: 767px) {
    :where(app-procedure-resume, app-step-resume) .box:where(.compact-disclosure) .sumTitle h2 {
        color: var(--gray-900);
    }

    :where(app-procedure-resume > *, app-step-resume > #stepDetailContent > *) > .box:where(.compact-disclosure) {
        padding-block: 24px;
    }

    .box:where(.compact-disclosure) .sumTitle h2 {
        margin-block: 0;
    }

    .accordion-hint {
        flex-basis: 100%;
        margin: 4px 0 0;
        color: var(--gray-700);
        font-size: 13.5px;
        line-height: 1.5;
    }

    /* Let the 44px caret target extend into the spacing around the title. */
    :where(app-procedure-resume) .box:where(.compact-disclosure) .sumTitle h2:where([role="button"]) {
        margin-block: -8px;
    }

    :where(app-procedure-resume) .accordion-hint {
        margin-block-start: 8px;
    }

    :where(.accordion-hint) [align] {
        text-align: inherit;
    }

    :where(.compact-disclosure) > .sumText {
        margin-block-start: 20px;
    }
}

@media screen and (max-width: 767px) {
    :where(app-costs-list .compact-disclosure > .sumText) > .explanatory-text:where(:has(.cost-text)) {
        margin-block-end: 32px;
    }

    :where(.compact-disclosure) table.costostable tr td:where(.costDetails, .costHypotesis) {
        vertical-align: top;
    }

    :where(.compact-disclosure) table.costostable:where(:has(tr.header)) {
        table-layout: fixed;
    }

    :where(.compact-disclosure) .cost-estimate {
        padding-inline-start: 8px;
    }

    .cost-estimate-label {
        margin-block-end: 4px;
        font-weight: 600;
    }

    :where(.compact-disclosure) .cost-estimate-controls {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    :where(.compact-disclosure) tr.cost td.costHypotesis strong.editableValue {
        min-inline-size: 0;
        overflow-wrap: anywhere;
    }

    :where(.compact-disclosure) tr.cost td.costHypotesis input.editableValue {
        width: 100%;
        min-inline-size: 0;
        padding-inline: 4px;
    }

    :where(.compact-disclosure) .cost-estimate-controls > a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: none;
        min-inline-size: 44px;
        min-block-size: 44px;
    }

    :where(.compact-disclosure) .cost-estimate-controls > a:where(.calculateCost, .cancelCalculation) {
        min-inline-size: 24px;
    }

    :where(.compact-disclosure) tr.cost td.costHypotesis a.editValue {
        display: inline-flex;
        margin-inline: 0;
    }

    :where(.costs-mobile-currency) .currency-selector {
        position: relative;
    }

    .box .sumTitle:where(.costs-mobile-currency) .currency-selector label {
        order: 1;
        display: grid;
        place-items: center;
        margin-inline-end: 0;
    }

    :where(.costs-mobile-currency .currency-selector label) > i,
    .currency-source-trigger {
        grid-area: 1 / 1;
    }

    .currency-source-trigger {
        inline-size: 44px;
        block-size: 44px;
        padding: 0;
        border: 0;
        background: transparent;
        cursor: pointer;
    }

    .currency-source-trigger:focus-visible {
        outline: 2px solid var(--primary-500);
        outline-offset: -2px;
    }

    .currency-source {
        inset-block-start: calc(100% + 4px);
        inset-inline-start: 0;
        width: max-content;
        max-inline-size: 100%;
    }

    .currency-source a {
        --ereg-link-color: var(--tooltip-color);
        --ereg-link-decoration: underline;
    }

    .currency-source::after {
        content: none;
    }
}