/*
 * Modus order flow — calm, focused, list-first (theme 1.4.0).
 * Choose -> Configure -> Review -> Pay. Presentation only: the accordion, forms, cart and
 * payment behaviour are the Orderbutton module's and are untouched. Loaded after
 * mc-design-language.css, before mc-dark.css.
 */
:root {
    --mc-o-surface: #ffffff;
    --mc-o-hairline: rgba(15, 23, 42, .08);
    --mc-o-press: rgba(15, 23, 42, .04);
    --mc-o-glass: rgba(248, 250, 252, .82);
    --mc-o-radius: 1.25rem;
}
[data-bs-theme="dark"] {
    --mc-o-surface: #172033;
    --mc-o-hairline: rgba(255, 255, 255, .10);
    --mc-o-press: rgba(255, 255, 255, .06);
    --mc-o-glass: rgba(15, 23, 42, .82);
}

/* ---------- Page head ---------- */
.mc-order { max-width: 56rem; margin-inline: auto; padding-block: .5rem 2rem; }
.mc-order__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.mc-order__heading { flex: 1 1 18rem; min-width: 0; }
.mc-order__title {
    margin: .25rem 0 .5rem;
    font-size: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
    font-weight: 700; letter-spacing: -.025em; line-height: 1.08;
    text-wrap: balance;
}
.mc-order__lead, .mc-choose__lead { margin: 0; color: var(--mc-text-secondary); font-size: 1.0625rem; line-height: 1.5; max-width: 40rem; }
.mc-order__currency label { margin: 0 !important; }
.mc-order__currency .currency_selector { margin: 0 !important; border-radius: 999px; padding-inline: 1.125rem; font-weight: 600; width: auto; }

/* ---------- Progress ---------- */
.mc-steps { margin-bottom: 1.75rem; }
.mc-steps__now { margin: 0 0 .5rem; font-size: .875rem; color: var(--mc-text-secondary); }
.mc-steps__now strong { color: var(--mc-text-primary); }
.mc-steps__bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: .375rem; margin: 0; padding: 0; list-style: none; }
.mc-steps__seg { height: .3125rem; border-radius: 999px; background: var(--mc-o-hairline); transition: background var(--mc-duration-normal) var(--mc-ease-standard); }
.mc-steps__seg.is-done, .mc-steps__seg.is-current { background: var(--mc-color-primary-600); }
.mc-steps__seg.is-current { box-shadow: 0 0 0 3px rgba(14, 165, 233, .18); }
.mc-steps__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Accordion = quiet steps ---------- */
#orderManager { --bs-accordion-border-width: 0; --bs-accordion-bg: transparent; display: grid; gap: .75rem; }
#orderbutton, #orderbutton > .card-body { background: transparent; border: 0; box-shadow: none; padding: 0 !important; }
#orderManager > .accordion-item { background: transparent; border: 0; border-radius: 0; box-shadow: none; }
#orderManager .accordion-button.collapsed {
    min-height: 3.5rem; padding-inline: 1.125rem;
    background: var(--mc-o-surface); color: var(--mc-text-secondary);
    border: 1px solid var(--mc-o-hairline); border-radius: 1rem; box-shadow: none; font-weight: 600;
}
#orderManager .accordion-button.collapsed:hover { background: var(--mc-o-press); color: var(--mc-text-primary); }
/* the open step reads as a section title, not a control */
#orderManager .accordion-button:not(.collapsed) {
    display: flex; align-items: center; min-height: 0; padding: .25rem 0 1rem; background: transparent; box-shadow: none; border: 0;
    color: var(--mc-text-primary); font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); font-weight: 700; letter-spacing: -.015em; pointer-events: none;
}
#orderManager .accordion-button:not(.collapsed)::after, #orderManager .accordion-button:not(.collapsed) .badge,
#orderManager .accordion-button:not(.collapsed) > .icon { display: none; }
#orderManager .mc-step--choose .accordion-button:not(.collapsed) { display: none; }
#orderManager .accordion-body { padding: 0; background: transparent; }
#orderManager .accordion-collapse { border: 0; }

/* ---------- Choose: chips ---------- */
.mc-chips {
    position: sticky; top: 4.5rem; z-index: 5;
    display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
    margin: 0 -1rem 1.5rem; padding: .625rem 1rem;
    background: var(--mc-o-glass); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
    border-bottom: 1px solid var(--mc-o-hairline);
}
.mc-chips::-webkit-scrollbar { display: none; }
.mc-chip {
    flex: 0 0 auto; scroll-snap-align: start; display: inline-flex; align-items: center; gap: .5rem;
    min-height: var(--mc-touch); padding: .5rem 1.125rem; border-radius: 999px;
    background: var(--mc-o-surface); border: 1px solid var(--mc-o-hairline);
    color: var(--mc-text-primary); font-weight: 600; font-size: .9375rem; text-decoration: none; white-space: nowrap;
    transition: background var(--mc-duration-fast), color var(--mc-duration-fast), border-color var(--mc-duration-fast);
}
.mc-chip small { color: var(--mc-text-secondary); font-weight: 600; }
.mc-chip:hover { background: var(--mc-o-press); }
.mc-chip.is-active { background: var(--mc-text-primary); border-color: var(--mc-text-primary); color: var(--mc-surface-page); }
.mc-chip.is-active small { color: inherit; opacity: .7; }
html { scroll-behavior: smooth; }
.mc-group { scroll-margin-top: 9rem; margin-bottom: 2rem; }
.mc-group:focus { outline: none; }

/* ---------- Choose: grouped lists ---------- */
.mc-group__title { margin: 0 0 .25rem; padding-inline: .25rem; font-size: 1.25rem; font-weight: 700; letter-spacing: -.015em; text-wrap: balance; }
.mc-group__desc { margin: 0 0 .875rem; padding-inline: .25rem; color: var(--mc-text-secondary); font-size: .9375rem; line-height: 1.5; max-width: 38rem; }
.mc-group__desc p { margin: 0; }
.mc-list { margin: 0; padding: 0; list-style: none; background: var(--mc-o-surface); border: 1px solid var(--mc-o-hairline); border-radius: var(--mc-o-radius); box-shadow: var(--mc-elev-1); overflow: hidden; }
.mc-list__item + .mc-list__item { border-top: 1px solid var(--mc-o-hairline); margin-left: 4.75rem; }
.mc-row {
    display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) auto; grid-template-areas: "icon text chev" "icon price chev";
    column-gap: 1rem; align-items: center; min-height: 4.75rem; margin-left: -4.75rem; padding: .875rem 1rem .875rem 1rem;
    color: inherit; text-decoration: none; transition: background var(--mc-duration-fast);
}
.mc-list__item:first-child .mc-row { margin-left: 0; }
.mc-list__item + .mc-list__item .mc-row { margin-left: -4.75rem; padding-left: 1rem; }
.mc-row:hover { background: var(--mc-o-press); color: inherit; }
.mc-row:active { background: var(--mc-o-hairline); }
.mc-row:focus-visible { outline: 3px solid rgba(56, 189, 248, .55); outline-offset: -3px; }
.mc-row__icon { grid-area: icon; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: .8125rem; }
.mc-row__icon .icon { width: 1.5rem; height: 1.5rem; }
.mc-row__text { grid-area: text; display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.mc-row__title { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.mc-row__desc { color: var(--mc-text-secondary); font-size: .9rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mc-row__price { grid-area: price; margin-top: .25rem; font-size: .875rem; color: var(--mc-text-secondary); }
.mc-row__amount { color: var(--mc-text-primary); font-weight: 650; }
.mc-row__chev { grid-area: chev; width: 1.25rem; height: 1.25rem; color: var(--mc-text-secondary); opacity: .6; }
.mc-row:hover .mc-row__chev { opacity: 1; transform: translateX(2px); transition: transform var(--mc-duration-fast); }
@media (min-width: 640px) {
    .mc-row { grid-template-columns: 2.75rem minmax(0, 1fr) auto auto; grid-template-areas: "icon text price chev"; min-height: 5rem; }
    .mc-row__price { margin: 0; text-align: right; white-space: nowrap; }
    .mc-row__from { display: block; font-size: .75rem; }
}
.mc-tint--sky { background: #e0f2fe; color: #0369a1; }
.mc-tint--rose { background: #ffe4e6; color: #be123c; }
.mc-tint--emerald { background: #d1fae5; color: #047857; }
.mc-tint--violet { background: #ede9fe; color: #6d28d9; }
.mc-tint--amber { background: #fef3c7; color: #b45309; }
[data-bs-theme="dark"] .mc-tint--sky { background: rgba(56,189,248,.16); color: #7dd3fc; }
[data-bs-theme="dark"] .mc-tint--rose { background: rgba(251,113,133,.16); color: #fda4af; }
[data-bs-theme="dark"] .mc-tint--emerald { background: rgba(52,211,153,.16); color: #6ee7b7; }
[data-bs-theme="dark"] .mc-tint--violet { background: rgba(167,139,250,.16); color: #c4b5fd; }
[data-bs-theme="dark"] .mc-tint--amber { background: rgba(251,191,36,.16); color: #fcd34d; }

/* ---------- Configure / Review: grouped, generous ---------- */
#orderManager .accordion-inner { background: transparent; }
#orderManager .well, #orderManager .accordion-inner > form > .well {
    background: var(--mc-o-surface); border: 1px solid var(--mc-o-hairline); border-radius: var(--mc-o-radius);
    box-shadow: var(--mc-elev-1); padding: 1.25rem; margin-bottom: 1rem;
}
#orderManager .accordion-inner h3 { font-size: clamp(1.375rem, 1.2rem + .8vw, 1.75rem); font-weight: 700; letter-spacing: -.02em; }
#orderManager .accordion-inner h4 { font-size: 1.0625rem; font-weight: 650; letter-spacing: -.01em; }
#orderManager .accordion-inner hr { border-color: var(--mc-o-hairline); opacity: 1; margin-block: 1.25rem; }
#orderManager .form-select, #orderManager .form-control { border-radius: .875rem; }
#orderManager .nav-pills { gap: .375rem; padding: .25rem; background: var(--mc-o-press); border-radius: 999px; }
#orderManager .nav-pills .nav-link { border-radius: 999px; font-weight: 600; color: var(--mc-text-secondary); }
#orderManager .nav-pills .nav-link.active { background: var(--mc-o-surface); color: var(--mc-text-primary); box-shadow: var(--mc-elev-1); }
#orderManager #config-next, #orderManager #checkoutButton { min-height: 3.25rem; border-radius: 999px; padding-inline: 2rem; font-size: 1.0625rem; }
@media (max-width: 767.98px) {
    #orderManager .accordion-inner form > .mt-2.mb-0 {
        position: sticky; bottom: calc(3.75rem + env(safe-area-inset-bottom, 0)); z-index: 6;
        margin: 1rem -1rem 0 !important; padding: .75rem 1rem;
        background: var(--mc-o-glass); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
        border-top: 1px solid var(--mc-o-hairline);
    }
    #orderManager #config-next { width: 100%; }
    .mc-chips { top: 4.25rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- Neutralise the legacy accordion "card" styling (mc-portal/mc-commerce) ----------
   Same specificity as those rules, loaded later. overflow must be visible or the sticky chips break. */
:is(body.order-index, body.order-product).mc-portal-body #orderManager > .accordion-item,
:is(body.order-index, body.order-product) #orderManager .accordion-item {
    overflow: visible; border: 0; border-radius: 0 !important; box-shadow: none; background: transparent; margin-bottom: 0;
}
:is(body.order-index, body.order-product).mc-portal-body #orderManager .accordion-body { padding: 0; background: transparent; }
:is(body.order-index, body.order-product).mc-portal-body #orderManager .accordion-button { border-radius: 1rem; }
:is(body.order-index, body.order-product).mc-portal-body #orderManager .accordion-button:not(.collapsed) {
    background: transparent; box-shadow: none; color: var(--mc-text-primary); border-radius: 0;
}
:is(body.order-index, body.order-product).mc-portal-body #orderManager .accordion-button.collapsed { background: var(--mc-o-surface); color: var(--mc-text-secondary); }
.mc-chips { margin-inline: -.5rem; padding-inline: .5rem; border-radius: 0 0 1rem 1rem; }
.mc-order__currency .currency_selector { padding-right: 2.5rem; background-position: right 1rem center; }
@media (max-width: 767.98px) { .mc-order { padding-inline: 1rem; } .mc-chips { margin-inline: -1rem; padding-inline: 1rem; } }

/* ---------- Step titles, configure and cart polish ---------- */
:is(body.order-index, body.order-product).mc-portal-body #orderManager .accordion-button:not(.collapsed) {
    font-family: var(--mc-font-display); font-size: clamp(1.375rem, 1.2rem + .7vw, 1.75rem); font-weight: 700; letter-spacing: -.02em; padding: .5rem 0 1rem;
}
#orderManager .accordion-inner { padding: 0; }
#orderManager .well p, #orderManager .well .markdown p { margin: .25rem 0 0; font-size: 1rem; line-height: 1.5; color: var(--mc-text-secondary); }
#orderManager .well h3 { margin: 0; }
#orderManager .control-group, #orderManager .well .row { row-gap: .5rem; }
#orderManager label.form-label, #orderManager .well .col-md-4 span { font-weight: 600; }

/* cart: rounded list instead of a bordered grid */
#checkout table, #checkout-inner table {
    --bs-table-bg: transparent; --bs-table-striped-bg: transparent; --bs-table-hover-bg: var(--mc-o-press);
    width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--mc-o-hairline);
    border-radius: var(--mc-o-radius); clip-path: inset(0 round var(--mc-o-radius)); background: var(--mc-o-surface);
}
#checkout table th { padding: .875rem 1rem; border: 0; border-bottom: 1px solid var(--mc-o-hairline); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mc-text-secondary); background: transparent; box-shadow: none; }
#checkout table td { padding: 1rem; border: 0; border-top: 1px solid var(--mc-o-hairline); background: transparent !important; box-shadow: none !important; vertical-align: middle; }
#checkout table tbody tr:first-child td { border-top: 0; }
#checkout table tfoot td, #checkout table tfoot th { font-size: 1.125rem; font-weight: 700; }
#checkout .btn-close, #checkout table .btn { border-radius: 999px; }
#checkout #checkoutButton { width: 100%; }
@media (min-width: 768px) { #checkout #checkoutButton { width: auto; min-width: 14rem; } }
#orderManager .nav-pills.flex-column { border-radius: 1rem; padding: .375rem; align-self: flex-start; }
#orderManager .nav-pills.flex-column .nav-link { border-radius: .75rem; margin: 0 !important; }

/* ---------- Dark mode: drop the legacy teal/blue step backgrounds ---------- */
html[data-bs-theme="dark"] :is(body.order-index, body.order-product).mc-portal-body #orderManager .accordion-item,
html[data-bs-theme="dark"] :is(body.order-index, body.order-product).mc-portal-body #orderManager .accordion-collapse,
html[data-bs-theme="dark"] :is(body.order-index, body.order-product).mc-portal-body #orderManager .accordion-body,
html[data-bs-theme="dark"] :is(body.order-index, body.order-product).mc-portal-body #orderManager .accordion-button:not(.collapsed) { background: transparent; box-shadow: none; color: var(--mc-text-primary); }
html[data-bs-theme="dark"] :is(body.order-index, body.order-product).mc-portal-body #orderManager .accordion-button.collapsed { background: var(--mc-o-surface); color: #cbd5e1; border-color: var(--mc-o-hairline); }
[data-bs-theme="dark"] #orderManager .well { background: var(--mc-o-surface); color: #e2e8f0; }
[data-bs-theme="dark"] .mc-chip.is-active { background: #f1f5f9; border-color: #f1f5f9; color: #0f172a; }
:is(body.order-index, body.order-product).mc-portal-body #orderManager .accordion-button:not(.collapsed) { min-height: var(--mc-touch); }