/*
 * EU Withdrawal visual overrides for storefront pages.
 *
 * Scope is intentionally limited to the withdrawal flow and order-view
 * withdrawal section to avoid side effects on other pages that may use
 * utility class names like .bg-blue-600.
 */

:is(
    nav[aria-label="Voortgang herroeping"],
    nav[aria-label="Withdrawal progress"],
    section[aria-label="Herroepingsopties voor deze bestelling"],
    section[aria-label="Withdrawal options for this order"],
    div[x-show="step === '2'"],
    div[x-show="step === '3'"],
    div[x-show="step === '4'"]
) {
    --eu-brand: var(--primary-color, #ff7e00);
    --eu-brand-dark: var(--primary-color-dark, #d36a00);
    --eu-brand-soft: color-mix(in srgb, var(--eu-brand) 10%, #ffffff);
    --eu-brand-border: color-mix(in srgb, var(--eu-brand) 30%, #ffffff);
}

.column.main .mm-eu-w-step-number {
    background: #ffffff !important;
    border-color: #e4e7ec !important;
    color: #667085 !important;
}

.mm-eu-w-step-number {
    background: #ffffff !important;
    border-color: #e4e7ec !important;
    color: #667085 !important;
}

.column.main .mm-eu-w-step--done .mm-eu-w-step-number,
.column.main .mm-eu-w-step--active .mm-eu-w-step-number,
.column.main .mm-eu-w-step--current .mm-eu-w-step-number {
    background: var(--primary-color, #ff7e00) !important;
    border-color: var(--primary-color, #ff7e00) !important;
    color: #ffffff !important;
}

.mm-eu-w-step--done .mm-eu-w-step-number,
.mm-eu-w-step--active .mm-eu-w-step-number,
.mm-eu-w-step--current .mm-eu-w-step-number {
    background: var(--primary-color, #ff7e00) !important;
    border-color: var(--primary-color, #ff7e00) !important;
    color: #ffffff !important;
}

.column.main .mm-eu-w-step--done::after {
    background: var(--primary-color, #ff7e00) !important;
}

.mm-eu-w-step--done::after {
    background: var(--primary-color, #ff7e00) !important;
}

.column.main .mm-eu-w-step--active .mm-eu-w-step-title,
.column.main .mm-eu-w-step--current .mm-eu-w-step-title,
.column.main .mm-eu-w-link,
.column.main .mm-eu-w-help-footer a,
.column.main .mm-eu-w-review-action {
    color: var(--eu-brand) !important;
}

.column.main .mm-eu-w-link:hover,
.column.main .mm-eu-w-help-footer a:hover,
.column.main .mm-eu-w-review-action:hover {
    color: var(--eu-brand-dark) !important;
}

.column.main .mm-eu-w-btn--primary,
.column.main button.mm-eu-w-btn--primary,
.column.main a.mm-eu-w-btn--primary,
.column.main .mm-eu-w-btn.mm-eu-w-btn--primary {
    background: var(--primary-color, #ff7e00) !important;
    border-color: var(--primary-color, #ff7e00) !important;
    color: #ffffff !important;
}

.mm-eu-w-btn--primary,
button.mm-eu-w-btn--primary,
a.mm-eu-w-btn--primary,
.mm-eu-w-btn.mm-eu-w-btn--primary {
    background: var(--primary-color, #ff7e00) !important;
    border-color: var(--primary-color, #ff7e00) !important;
    color: #ffffff !important;
}

button.mm-eu-w-btn--primary[data-role="continue"],
.mm-eu-w-btn.mm-eu-w-btn--primary[data-role="continue"] {
    padding: 13px 24px;
    min-height: 46px;
}

.column.main .mm-eu-w-btn--primary:hover,
.column.main button.mm-eu-w-btn--primary:hover,
.column.main a.mm-eu-w-btn--primary:hover,
.column.main .mm-eu-w-btn.mm-eu-w-btn--primary:hover {
    background: var(--primary-color-dark, #d36a00) !important;
    border-color: var(--primary-color-dark, #d36a00) !important;
    color: #ffffff !important;
}

.mm-eu-w-btn--primary:hover,
button.mm-eu-w-btn--primary:hover,
a.mm-eu-w-btn--primary:hover,
.mm-eu-w-btn.mm-eu-w-btn--primary:hover {
    background: var(--primary-color-dark, #d36a00) !important;
    border-color: var(--primary-color-dark, #d36a00) !important;
    color: #ffffff !important;
}

.column.main .mm-eu-w-deadline-card {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
}

.mm-eu-w-deadline-card {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
}

.column.main .mm-eu-w-deadline-cta {
    justify-self: end;
}

.mm-eu-w-deadline-cta {
    justify-self: end;
}

.mm-eu-w-section {
    margin-bottom: 34px;
}

.column.main a.action.primary.mm-eu-w-start,
.column.main a.mm-eu-w-start,
.column.main .action.primary.mm-eu-w-start,
.column.main .mm-eu-w-start {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    color: #ffffff !important;
    background: var(--primary-color, #ff7e00) !important;
    border-color: var(--primary-color, #ff7e00) !important;
    min-height: 44px;
    line-height: 1.25;
}

a.action.primary.mm-eu-w-start,
a.mm-eu-w-start,
.action.primary.mm-eu-w-start,
.mm-eu-w-start {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    color: #ffffff !important;
    background: var(--primary-color, #ff7e00) !important;
    border-color: var(--primary-color, #ff7e00) !important;
    min-height: 44px;
    line-height: 1.25;
}

.column.main a.action.primary.mm-eu-w-start:hover,
.column.main a.mm-eu-w-start:hover,
.column.main .action.primary.mm-eu-w-start:hover,
.column.main .mm-eu-w-start:hover {
    color: #ffffff !important;
    background: var(--primary-color-dark, #d36a00) !important;
    border-color: var(--primary-color-dark, #d36a00) !important;
}

a.action.primary.mm-eu-w-start:hover,
a.mm-eu-w-start:hover,
.action.primary.mm-eu-w-start:hover,
.mm-eu-w-start:hover {
    color: #ffffff !important;
    background: var(--primary-color-dark, #d36a00) !important;
    border-color: var(--primary-color-dark, #d36a00) !important;
}

.column.main .mm-eu-w-btn--select-order,
.column.main a.mm-eu-w-btn--select-order {
    color: var(--eu-brand) !important;
    border-color: var(--eu-brand) !important;
}

.column.main .mm-eu-w-btn--select-order:hover,
.column.main a.mm-eu-w-btn--select-order:hover {
    background: var(--eu-brand) !important;
    border-color: var(--eu-brand) !important;
    color: #ffffff !important;
}

.column.main .mm-eu-w-banner--info {
    background: var(--eu-brand-soft) !important;
    border-color: var(--eu-brand-border) !important;
}

.column.main .mm-eu-w-banner-icon,
.column.main .mm-eu-w-info-icon {
    color: var(--eu-brand) !important;
}

:is(
    nav[aria-label="Voortgang herroeping"],
    nav[aria-label="Withdrawal progress"],
    section[aria-label="Herroepingsopties voor deze bestelling"],
    section[aria-label="Withdrawal options for this order"],
    div[x-show="step === '2'"],
    div[x-show="step === '3'"],
    div[x-show="step === '4'"]
) .bg-blue-600 {
    background-color: var(--eu-brand) !important;
}

:is(
    nav[aria-label="Voortgang herroeping"],
    nav[aria-label="Withdrawal progress"],
    section[aria-label="Herroepingsopties voor deze bestelling"],
    section[aria-label="Withdrawal options for this order"],
    div[x-show="step === '2'"],
    div[x-show="step === '3'"],
    div[x-show="step === '4'"]
) .hover\:bg-blue-700:hover {
    background-color: var(--eu-brand-dark) !important;
}

:is(
    nav[aria-label="Voortgang herroeping"],
    nav[aria-label="Withdrawal progress"],
    section[aria-label="Herroepingsopties voor deze bestelling"],
    section[aria-label="Withdrawal options for this order"],
    div[x-show="step === '2'"],
    div[x-show="step === '3'"],
    div[x-show="step === '4'"]
) .text-blue-600 {
    color: var(--eu-brand) !important;
}

:is(
    section[aria-label="Herroepingsopties voor deze bestelling"],
    section[aria-label="Withdrawal options for this order"],
    div[x-show="step === '2'"],
    div[x-show="step === '3'"],
    div[x-show="step === '4'"]
) .bg-blue-50 {
    background-color: var(--eu-brand-soft) !important;
}

:is(
    section[aria-label="Herroepingsopties voor deze bestelling"],
    section[aria-label="Withdrawal options for this order"],
    div[x-show="step === '2'"],
    div[x-show="step === '3'"],
    div[x-show="step === '4'"]
) .border-blue-200 {
    border-color: var(--eu-brand-border) !important;
}

:is(
    section[aria-label="Herroepingsopties voor deze bestelling"],
    section[aria-label="Withdrawal options for this order"],
    div[x-show="step === '2'"],
    div[x-show="step === '3'"],
    div[x-show="step === '4'"]
) .text-blue-900 {
    color: color-mix(in srgb, var(--eu-brand) 45%, #000000) !important;
}

:is(div[x-show="step === '2'"], div[x-show="step === '3'"], div[x-show="step === '4'"]) .focus\:border-blue-500:focus,
:is(div[x-show="step === '2'"], div[x-show="step === '3'"], div[x-show="step === '4'"]) .focus\:ring-blue-500:focus {
    border-color: var(--eu-brand) !important;
    --tw-ring-color: color-mix(in srgb, var(--eu-brand) 35%, #ffffff) !important;
}

section[aria-label="Herroepingsopties voor deze bestelling"] a[href*="/overeenkomst-herroepen/"],
section[aria-label="Withdrawal options for this order"] a[href*="/withdraw"],
section[aria-label="Herroepingsopties voor deze bestelling"] a[href*="/withdraw"] {
    padding: 15px 27px !important;
    background-color: var(--eu-brand) !important;
    border-color: var(--eu-brand) !important;
}

section[aria-label="Herroepingsopties voor deze bestelling"] a[href*="/overeenkomst-herroepen/"]:hover,
section[aria-label="Withdrawal options for this order"] a[href*="/withdraw"]:hover,
section[aria-label="Herroepingsopties voor deze bestelling"] a[href*="/withdraw"]:hover {
    background-color: var(--eu-brand-dark) !important;
    border-color: var(--eu-brand-dark) !important;
}

section[aria-label="Herroepingsopties voor deze bestelling"],
section[aria-label="Withdrawal options for this order"],
div[x-show="step === '2'"],
div[x-show="step === '3'"],
div[x-show="step === '4'"] {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

div[x-show="step === '2'"] .space-y-6,
div[x-show="step === '3'"] .space-y-6,
div[x-show="step === '4'"] .space-y-6,
div[x-show="step === '2'"] .lg\:grid-cols-\[1fr_320px\],
div[x-show="step === '3'"] .lg\:grid-cols-\[1fr_320px\],
div[x-show="step === '4'"] .lg\:grid-cols-\[1fr_320px\] {
    min-width: 0;
}

div[x-show="step === '2'"] .overflow-x-auto,
div[x-show="step === '3'"] .overflow-x-auto,
div[x-show="step === '4'"] .overflow-x-auto,
div[x-show="step === '2'"] .max-sm\:overflow-visible,
div[x-show="step === '3'"] .max-sm\:overflow-visible,
div[x-show="step === '4'"] .max-sm\:overflow-visible {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 1200px) {
    div[x-show="step === '2'"].grid,
    div[x-show="step === '3'"].grid,
    div[x-show="step === '4'"].grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .column.main .mm-eu-w-step::after {
        display: none !important;
        background: transparent !important;
    }

    .mm-eu-w-step::after {
        display: none !important;
        background: transparent !important;
    }

    .column.main .mm-eu-w-step--done::after {
        display: none !important;
        background: transparent !important;
    }

    .mm-eu-w-step--done::after {
        display: none !important;
        background: transparent !important;
    }

    .column.main .mm-eu-w-deadline-card {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 12px;
    }

    .mm-eu-w-deadline-card {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 12px;
    }

    .column.main .mm-eu-w-deadline-icon,
    .mm-eu-w-deadline-icon {
        justify-self: center;
        margin-left: auto;
        margin-right: auto;
    }

    .column.main .mm-eu-w-deadline-cta {
        justify-self: center;
        text-align: center;
    }

    .mm-eu-w-deadline-cta {
        justify-self: center;
        text-align: center;
    }

    .column.main .mm-eu-w-start,
    .mm-eu-w-start {
        margin-left: auto;
        margin-right: auto;
    }

    nav[aria-label="Voortgang herroeping"],
    nav[aria-label="Withdrawal progress"] {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    nav[aria-label="Voortgang herroeping"] > ol,
    nav[aria-label="Withdrawal progress"] > ol {
        display: flex !important;
        gap: 0.75rem;
        grid-template-columns: none !important;
        overflow-x: auto;
        padding: 0.125rem 0.125rem 0.5rem;
        scroll-snap-type: x mandatory;
        scrollbar-width: thin;
    }

    nav[aria-label="Voortgang herroeping"] > ol > li,
    nav[aria-label="Withdrawal progress"] > ol > li {
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 0.75rem;
        flex: 0 0 min(80vw, 280px);
        min-height: 86px;
        padding: 0.75rem 0.875rem;
        scroll-snap-align: center;
    }

    nav[aria-label="Voortgang herroeping"] > ol > li > span.absolute,
    nav[aria-label="Withdrawal progress"] > ol > li > span.absolute {
        display: none !important;
    }

    nav[aria-label="Voortgang herroeping"] > ol > li > span.block,
    nav[aria-label="Withdrawal progress"] > ol > li > span.block {
        text-align: left;
    }

    nav[aria-label="Voortgang herroeping"] > ol > li > span.max-sm\:hidden,
    nav[aria-label="Withdrawal progress"] > ol > li > span.max-sm\:hidden {
        display: block !important;
        font-size: 12px;
        margin-top: 0.25rem;
        text-align: left;
    }

    section[aria-label="Herroepingsopties voor deze bestelling"] > div,
    section[aria-label="Withdrawal options for this order"] > div {
        width: 100%;
    }
}