/* ==========================================================================
   Mills Group portal theme
   Loaded last in _Layout.cshtml (body.mp-portal) and _Layout_Admin.cshtml
   (body.mp-admin) so it restyles the existing Bootstrap/Limitless markup
   without removing anything pages depend on.
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
    --navy: #1E3A8A;
    --navy-hover: #172D6C;
    --navy-deep: #0B1740;
    --navy-mid: #13286B;
    --orange: #F26522;
    --orange-hover: #E0561A;
    --orange-tint: #FDECE3;
    --orange-wash: #FFF4EE;
    --orange-ink: #C2410C;
    --navy-tint: #EEF2FB;
    --bg: #F4F6FA;
    --surface: #FFFFFF;
    --text: #0F1A3A;
    --text-2: #374151;
    --text-3: #4B5563;
    --muted: #6B7280;
    --faint: #9CA3AF;
    --border: #E5E7EB;
    --divider: #F0F1F4;
    --img-bg: #EEF0F4;
    --field-bg: #F9FAFB;
    --error: #DC2626;

    --status-open-bg: #EEF2FB;      --status-open-fg: #1E3A8A;
    --status-printed-bg: #ECFDF3;   --status-printed-fg: #047857;
    --status-cancelled-bg: #FEF2F2; --status-cancelled-fg: #B91C1C;

    --font: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

    --r-pill: 999px;
    --r-input: 12px;
    --r-icon: 10px;
    --r-card: 18px;
    --r-panel: 22px;
    --r-modal: 24px;

    --sh-card: 0 2px 8px rgba(15,30,77,.05);
    --sh-card-hover: 0 18px 36px rgba(15,30,77,.14);
    --sh-float: 0 18px 44px rgba(15,30,77,.12);
    --sh-navy: 0 10px 22px rgba(30,58,138,.25);
    --sh-orange: 0 10px 24px rgba(242,101,34,.32);
    --sh-modal: 0 40px 80px rgba(11,23,64,.35);

    --gutter: clamp(16px, 4vw, 40px);
    --max-w: 1320px;
}

@keyframes mp-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes mp-slidein { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }

/* ---------- Shared base (both areas) ---------- */
body.mp-portal,
body.mp-admin {
    font-family: var(--font);
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body.mp-portal h1, body.mp-portal h2, body.mp-portal h3, body.mp-portal h4, body.mp-portal h5, body.mp-portal h6,
body.mp-admin h1, body.mp-admin h2, body.mp-admin h3, body.mp-admin h4, body.mp-admin h5, body.mp-admin h6,
body.mp-portal .btn, body.mp-admin .btn,
body.mp-portal input, body.mp-portal select, body.mp-portal textarea, body.mp-portal button,
body.mp-admin input, body.mp-admin select, body.mp-admin textarea, body.mp-admin button {
    font-family: var(--font);
}
body.mp-portal ::selection, body.mp-admin ::selection { background: rgba(242,101,34,.2); }
body.mp-portal :focus-visible, body.mp-admin :focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
}
.mp-num { font-variant-numeric: tabular-nums; }

/* Brand motif: diagonal orange stripe. Parent needs position:relative; overflow:hidden. */
.mp-stripe {
    position: absolute;
    top: -20%;
    height: 140%;
    width: 18px;
    right: 12%;
    background: var(--orange);
    transform: skewX(-22deg);
    pointer-events: none;
}
.mp-stripe--thin { width: 8px; background: rgba(255,255,255,.5); }

/* Kicker / eyebrow */
.mp-kicker {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--orange);
}

/* Buttons (opt-in classes used by restyled screens) */
.mp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border: 0;
    border-radius: var(--r-input);
    font-family: var(--font);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color .15s, color .15s, box-shadow .15s, transform .2s;
}
.mp-btn--navy { background: var(--navy); color: #fff !important; box-shadow: var(--sh-navy); }
.mp-btn--navy:hover { background: var(--navy-hover); }
.mp-btn--orange { background: var(--orange); color: #fff !important; box-shadow: var(--sh-orange); font-weight: 800; }
.mp-btn--orange:hover { background: var(--orange-hover); }
.mp-btn--outline { background: #fff; color: var(--navy) !important; box-shadow: inset 0 0 0 1.5px var(--navy); }
.mp-btn--outline:hover { background: var(--navy-tint); }
.mp-btn--soft { background: var(--bg); color: var(--navy) !important; }
.mp-btn--soft:hover { background: var(--navy-tint); }
.mp-btn[disabled], .mp-btn.is-disabled { background: #D1D5DB !important; color: #fff !important; box-shadow: none; cursor: not-allowed; }

/* ==========================================================================
   CLIENT PORTAL CHROME  (body.mp-portal, _Layout.cshtml)
   ========================================================================== */
body.mp-portal {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.55;
}
body.mp-portal a { color: var(--navy); }
body.mp-portal a:hover { color: var(--orange); }

/* Header */
.mp-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255,255,255,.97);
    border-bottom: 1px solid var(--border);
}
.mp-header__inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 12px var(--gutter);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 24px;
}
.mp-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-right: auto;
    text-decoration: none !important;
}
.mp-brand__logo { height: 40px; width: auto; display: block; }
.mp-brand__label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
    border-left: 1px solid var(--border);
    padding-left: 14px;
    line-height: 1.3;
}
.mp-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.mp-nav__link {
    display: inline-flex;
    align-items: center;
    padding: 9px 14px;
    border-radius: var(--r-pill);
    font-size: 13px;
    font-weight: 600;
    color: #1f2a44 !important;
    text-decoration: none !important;
    transition: background-color .15s, color .15s;
}
.mp-nav__link:hover, .mp-nav__link.is-active { background: var(--navy-tint); color: var(--navy) !important; }
.mp-cart-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: 8px;
    padding: 8px 8px 8px 16px;
    border-radius: var(--r-pill);
    background: var(--navy);
    color: #fff !important;
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 6px 18px rgba(30,58,138,.28);
    cursor: pointer;
    text-decoration: none !important;
    transition: transform .15s, background-color .15s;
}
.mp-cart-pill:hover { transform: translateY(-1px); background: var(--navy-hover); }
.mp-cart-pill__count {
    background: var(--orange);
    border-radius: var(--r-pill);
    min-width: 26px;
    height: 26px;
    padding: 0 6px;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 800;
}
.mp-cart-pill[hidden] { display: none; }

/* Main content wrapper (existing .content-top-main kept for page CSS) */
body.mp-portal .content.content-top-main { flex: 1 0 auto; padding: 0; margin: 0; background: transparent; }

/* Footer */
.mp-footer { background: var(--navy-deep); color: #fff; margin-top: auto; }
.mp-footer__inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 22px var(--gutter);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 13px;
    font-weight: 500;
}
.mp-wordmark { display: inline-flex; flex-direction: column; line-height: 1; color: #fff !important; text-decoration: none !important; }
.mp-wordmark__name { font-weight: 900; font-size: 22px; letter-spacing: .01em; }
.mp-wordmark__tag {
    font-size: 11px;
    color: var(--orange);
    margin-top: 3px;
    border-top: 1.5px solid var(--orange);
    padding-top: 3px;
    align-self: flex-start;
}
.mp-footer .mp-footer__contact {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    align-items: center;
    color: rgba(255,255,255,.85) !important;
    font-weight: 500;
    text-decoration: none !important;
}
.mp-footer .mp-footer__contact:hover { color: #fff !important; }
.mp-footer .mp-footer__contact:hover span:last-child { color: var(--orange); }

/* Form fields (opt-in) */
.mp-field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; }
.mp-field__label { margin: 0; font-size: 12px; font-weight: 700; color: var(--text-2); }
body.mp-portal .mp-input,
body.mp-admin .mp-input {
    width: 100%;
    height: auto;
    padding: 14px 16px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-input);
    background: var(--field-bg);
    background-image: none;
    box-shadow: none;
    font-family: var(--font);
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
    transition: border-color .15s, background-color .15s;
}
body.mp-portal .mp-input::placeholder, body.mp-admin .mp-input::placeholder { color: var(--faint); }
body.mp-portal .mp-input:focus, body.mp-admin .mp-input:focus {
    outline: none;
    border-color: var(--navy) !important;
    background: #fff;
}
.mp-field__error { font-size: 11px; font-weight: 600; color: var(--error); }
.mp-btn--block { display: flex; width: 100%; }

/* Portal modals (Bootstrap 3) */
body.mp-portal .modal-content { border-radius: var(--r-modal); border: 0; box-shadow: var(--sh-modal); overflow: hidden; }
body.mp-portal .modal-backdrop.in { background: var(--navy-deep); opacity: .55; }
body.mp-portal .modal-header { border-bottom: 1px solid var(--divider); padding: 20px 24px; }
body.mp-portal .modal-header h3, body.mp-portal .modal-header h4 { margin: 0; font-size: 20px; font-weight: 800; color: var(--navy); }
body.mp-portal .modal-header .close { font-size: 26px; opacity: .5; margin-top: -2px; }
body.mp-portal .modal-body { padding: 20px 24px; font-size: 14px; color: var(--text-3); }
body.mp-portal .modal-footer { border-top: 0; padding: 0 24px 22px; }

/* ---------- Login ---------- */
body.mp-login { background: #fff; }
.mp-login-wrap { display: flex; flex-wrap: wrap; min-height: 100vh; }
.mp-login-hero {
    position: relative;
    overflow: hidden;
    flex: 1 1 420px;
    min-height: 320px;
    color: #fff;
    background:
        linear-gradient(160deg, rgba(13,27,69,.94), rgba(30,58,138,.82)),
        url("../img/mills/hero-nav.jpg") center / cover no-repeat;
}
.mp-login-hero .mp-stripe { right: 4%; width: 22px; }
.mp-login-hero__inner {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
    padding: clamp(28px, 5vw, 64px);
    animation: mp-rise .5s ease backwards;
}
.mp-login-hero__logo {
    height: 44px;
    width: auto;
    align-self: flex-start;
    background: #fff;
    padding: 8px 12px;
    border-radius: 12px;
    box-sizing: content-box;
}
.mp-login-hero .mp-kicker { margin: 0 0 14px; }
body.mp-portal .mp-login-hero__title {
    margin: 0;
    max-width: 11ch;
    font-size: clamp(40px, 6.4vw, 84px);
    font-weight: 900;
    line-height: .95;
    letter-spacing: -.035em;
    text-transform: uppercase;
    color: #fff;
}
.mp-login-panel {
    flex: 1 1 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(32px, 6vw, 72px) var(--gutter);
    background: #fff;
}
.mp-login-card { width: 100%; max-width: 380px; animation: mp-rise .4s ease backwards; }
body.mp-portal .mp-login-card__title { margin: 0 0 6px; font-size: 30px; font-weight: 800; color: var(--navy); letter-spacing: -.02em; }
.mp-login-card__sub { margin: 0 0 28px; font-size: 15px; color: var(--muted); }
.mp-login-form { margin: 0; }
.mp-login-form .mp-btn { margin-top: 8px; padding: 16px 20px; font-size: 15px; }
.mp-login-card__help { margin: 24px 0 0; font-size: 13px; color: var(--muted); text-align: center; }
.mp-login-card__help a { font-weight: 700; }

/* ---------- Home / category select ---------- */
.mp-accent { color: var(--orange); }
.mp-home-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        linear-gradient(100deg, var(--navy-deep) 0%, var(--navy) 52%, rgba(30,58,138,.35) 100%),
        url("../img/mills/hero-nav.jpg") center / cover no-repeat;
    background-color: var(--navy-deep);
}
.mp-home-hero .mp-stripe { right: 8%; width: 20px; }
.mp-home-hero .mp-stripe--thin { right: calc(8% + 44px); width: 8px; }
.mp-home-hero__inner {
    position: relative;
    max-width: var(--max-w);
    margin: 0 auto;
    padding: clamp(48px, 7vw, 104px) var(--gutter) 156px;
    animation: mp-rise .5s ease backwards;
}
body.mp-portal .mp-home-hero__pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 24px;
    padding: 8px 16px;
    border-radius: var(--r-pill);
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.22);
    font-size: 13px;
    font-weight: 600;
}
.mp-home-hero__pill strong { font-weight: 800; }
.mp-home-hero__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
body.mp-portal .mp-home-hero__title {
    margin: 0;
    max-width: 16ch;
    font-size: clamp(40px, 6.4vw, 84px);
    font-weight: 900;
    line-height: .95;
    letter-spacing: -.035em;
    text-transform: uppercase;
    color: #fff;
    overflow-wrap: anywhere;
}
body.mp-portal .mp-home-hero__title--long { max-width: 22ch; font-size: clamp(32px, 4.4vw, 60px); }
body.mp-portal .mp-home-hero__lead { margin: 22px 0 0; max-width: 46ch; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.55; color: rgba(255,255,255,.85); }

body.mp-portal .mp-home.page-container {
    max-width: var(--max-w);
    margin: -100px auto 0;
    padding: 0 var(--gutter) 80px;
    position: relative;
    float: none;
    width: 100%;
    box-sizing: border-box;
    background: transparent;
    box-shadow: none;
}
.mp-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 24px; }
body.mp-portal .mp-cat-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border-radius: var(--r-panel);
    box-shadow: var(--sh-float);
    color: var(--text);
    text-decoration: none;
    transition: transform .2s, box-shadow .2s;
    animation: mp-rise .45s ease backwards;
}
body.mp-portal .mp-cat-card:hover { transform: translateY(-6px); box-shadow: var(--sh-card-hover); color: var(--text); }
.mp-cat-card__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #fff; border-bottom: 1px solid var(--divider); }
.mp-cat-card__media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; padding: 14px; box-sizing: border-box; }
.mp-cat-card__body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 22px 24px 24px; }
.mp-cat-card__name { font-size: 26px; font-weight: 900; line-height: 1.1; letter-spacing: -.02em; color: var(--navy); }
.mp-cat-card__desc { font-size: 14px; line-height: 1.55; color: var(--text-3); }
.mp-cat-card__cta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: auto;
    padding-top: 14px;
    font-size: 15px;
    font-weight: 800;
    color: var(--navy);
}
.mp-cat-card__arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--orange);
    color: #fff;
    box-shadow: var(--sh-orange);
    transition: transform .2s;
}
body.mp-portal .mp-cat-card:hover .mp-cat-card__arrow { transform: translateX(3px); }

/* ---------- Ordering steps (Home/CategorySteps_ and siblings) ---------- */
body.mp-portal .mp-order.container-fluid { padding: 0; background: transparent; }
body.mp-portal .mp-wizard.wizard { margin: 0; width: auto; background: transparent; }
.mp-hide { display: none !important; }

/* Navy band */
body.mp-portal .mp-order .mp-order-band.wizard-inner {
    display: block;
    padding: 0;
}
body.mp-portal .mp-order-band {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(100deg, var(--navy-deep) 0%, var(--navy) 70%, #2a4aa3 100%);
}
.mp-order-band .mp-stripe { right: 6%; width: 16px; }
.mp-order-band__inner { position: relative; max-width: var(--max-w); margin: 0 auto; padding: 26px var(--gutter) 22px; }
.mp-order-band__top { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 20px; }
body.mp-portal a.mp-order-band__back {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.12);
    color: #fff;
    transition: background-color .15s;
}
body.mp-portal a.mp-order-band__back:hover { background: rgba(255,255,255,.22); color: #fff; }
.mp-order-band__title { flex: 1 1 260px; min-width: 0; }
.mp-order-band__title .mp-kicker { margin: 0 0 4px; }
body.mp-portal .mp-order-band__title h1 { margin: 0; font-size: 30px; font-weight: 900; letter-spacing: -.02em; line-height: 1.1; color: #fff; }
.mp-order-search {
    flex: 0 1 380px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 4px 4px 16px;
    border-radius: var(--r-pill);
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.22);
    color: rgba(255,255,255,.75);
}
body.mp-portal .mp-order-search input {
    flex: 1;
    min-width: 0;
    height: 36px;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    box-shadow: none;
    outline: none;
}
.mp-order-search input::placeholder { color: rgba(255,255,255,.6); }
.mp-order-search button {
    flex: none;
    border: 0;
    border-radius: var(--r-pill);
    padding: 8px 14px;
    background: #fff;
    color: var(--navy);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}
.mp-order-search button:hover { background: var(--orange-tint); }

/* Step progress pills */
body.mp-portal .mp-wizard .nav-tabs.mp-steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px 0;
    margin: 22px 0 0;
    padding: 0;
    border: 0;
    background: transparent;
}
body.mp-portal .mp-wizard .nav-tabs.mp-steps > li {
    float: none;
    display: flex;
    align-items: center;
    margin: 0;
}
body.mp-portal .mp-wizard .nav-tabs.mp-steps > li + li::before {
    content: "";
    position: static;
    opacity: 1;
    display: block;
    width: 22px;
    height: 2px;
    margin: 0 6px;
    border: 0;
    background: rgba(255,255,255,.3);
    transition: background-color .4s;
}
body.mp-portal .mp-wizard .nav-tabs.mp-steps > li.mp-done + li::before,
body.mp-portal .mp-wizard .nav-tabs.mp-steps > li.mp-done + li.active::before { background: var(--orange); }
body.mp-portal .mp-wizard .nav-tabs.mp-steps > li::after,
body.mp-portal .mp-wizard .nav-tabs.mp-steps > li.active::after { display: none; }
body.mp-portal .mp-wizard .nav-tabs.mp-steps > li > a,
body.mp-portal .mp-wizard .nav-tabs.mp-steps > li > a:hover,
body.mp-portal .mp-wizard .nav-tabs.mp-steps > li > a:focus,
body.mp-portal .mp-wizard .nav-tabs.mp-steps > li.active > a,
body.mp-portal .mp-wizard .nav-tabs.mp-steps > li.active > a:hover {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: auto;
    height: auto;
    margin: 0;
    padding: 5px 12px 5px 5px;
    border: 0;
    border-radius: var(--r-pill);
    background: transparent;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    opacity: .7;
    cursor: pointer;
    transition: background-color .15s, opacity .15s;
}
body.mp-portal .mp-wizard .nav-tabs.mp-steps > li > a:hover { background: rgba(255,255,255,.1); opacity: 1; }
body.mp-portal .mp-wizard .nav-tabs.mp-steps > li.active > a,
body.mp-portal .mp-wizard .nav-tabs.mp-steps > li.mp-done > a { opacity: 1; }
body.mp-portal .mp-wizard .nav-tabs.mp-steps > li.active > a { background: rgba(255,255,255,.14); }
body.mp-portal .mp-wizard .mp-steps span.round-tab,
body.mp-portal .mp-wizard .mp-steps span.round-tab:hover {
    position: static;
    flex: none;
    width: 30px;
    height: 30px;
    line-height: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 0;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.85);
    background: transparent !important;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
}
body.mp-portal .mp-wizard .mp-steps span.round-tab i { color: inherit; font-style: normal; font-size: 13px; }
body.mp-portal .mp-wizard .mp-steps span.round-tab img { width: 16px; height: 16px; filter: brightness(0) invert(1); }
body.mp-portal .mp-wizard .nav-tabs.mp-steps > li.active span.round-tab { background: #fff !important; box-shadow: none; color: var(--navy); }
body.mp-portal .mp-wizard .nav-tabs.mp-steps > li.active span.round-tab i { color: var(--navy); }
body.mp-portal .mp-wizard .nav-tabs.mp-steps > li.active span.round-tab img { filter: none; }
body.mp-portal .mp-wizard .nav-tabs.mp-steps > li.mp-done span.round-tab { background: var(--orange) !important; box-shadow: none; }
body.mp-portal .mp-wizard .nav-tabs.mp-steps > li.mp-done span.round-tab > * { display: none; }
body.mp-portal .mp-wizard .nav-tabs.mp-steps > li.mp-done span.round-tab::after { content: "\2713"; font-size: 14px; font-weight: 900; color: #fff; }
.mp-step-label { white-space: nowrap; }
.mp-step-count {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--r-pill);
    background: var(--orange);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    display: inline-grid;
    place-items: center;
    font-variant-numeric: tabular-nums;
}
.mp-step-count:empty { display: none; }

/* Important ordering information */
.mp-order-info { max-width: var(--max-w); margin: 20px auto 0; padding: 0 var(--gutter); }
.mp-order-info__toggle {
    all: unset;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--sh-card);
    cursor: pointer;
}
.mp-order-info__toggle[aria-expanded="true"] { border-radius: 16px 16px 0 0; border-bottom-color: transparent; }
.mp-order-info__toggle:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.mp-order-info__icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--orange-tint); color: var(--orange); flex: none; }
.mp-order-info__title { flex: 1; font-size: 14px; font-weight: 800; color: var(--navy); }
.mp-order-info__chev { color: var(--muted); transition: transform .2s; }
.mp-order-info__toggle[aria-expanded="true"] .mp-order-info__chev { transform: rotate(180deg); }
.mp-order-info__body {
    padding: 0 18px 16px 66px;
    background: #fff;
    border: 1px solid var(--border);
    border-top: 0;
    border-radius: 0 0 16px 16px;
    font-size: 13px;
    line-height: 1.65;
    color: var(--text-2);
}

/* Two-column layout */
.mp-order-layout {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 24px var(--gutter) 80px;
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    align-items: flex-start;
}
.mp-order-main { flex: 1 1 600px; min-width: 0; }
body.mp-on-review .mp-cart { display: none; }
/* Opacity-only: a transform here would trap the position:fixed option modals inside the pane. */
@keyframes mp-fade { from { opacity: 0; } to { opacity: 1; } }
body.mp-portal .mp-wizard .tab-content > .tab-pane { padding: 0; animation: mp-fade .3s ease backwards; }
body.mp-portal .mp-wizard .tab-content > .tab-pane.active { display: block; }

/* Step heading + banner images */
body.mp-portal .mp-wizard h4.mp-step-title {
    margin: 0 0 16px;
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -.02em;
    color: var(--navy);
}
body.mp-portal .mp-step-media.row { margin: 0 0 20px; }
body.mp-portal .mp-step-media [class*="col-"] { float: none; width: auto; padding: 0; margin: 0 0 12px; }
body.mp-portal .mp-step-media img { display: block; width: 100% !important; height: auto !important; border-radius: var(--r-panel); }
body.mp-portal .mp-step-media .row { margin: 0; }

/* Product grid + cards (existing .divSquare markup) */
body.mp-portal .mp-products.row {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 20px;
}
body.mp-portal .mp-products.row::before, body.mp-portal .mp-products.row::after { display: none; }
body.mp-portal .mp-products > [class*="col-"] { float: none; width: auto; padding: 0; margin: 0; min-width: 0; }
body.mp-portal .mp-products > br { display: none; }
body.mp-portal .mp-products .divSquare {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100% !important;
    height: 100% !important;
    margin: 0;
    float: none;
    overflow: hidden;
    border: 1.5px solid var(--border);
    border-radius: var(--r-card);
    background-color: #fff;
    background-size: 0 0 !important;
    box-shadow: var(--sh-card);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
body.mp-portal .mp-products .divSquare::before {
    content: "";
    display: block;
    flex: none;
    aspect-ratio: 4 / 3;
    background-color: var(--img-bg);
    background-image: inherit;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-origin: content-box;
    padding: 12px;
    box-sizing: border-box;
}
body.mp-portal .mp-products .divSquare:hover { transform: translateY(-4px); box-shadow: var(--sh-card-hover); }
body.mp-portal .mp-products .divSquare.mp-in-cart { border-color: var(--orange); }
body.mp-portal .mp-products .divSquare > br { display: none; }
body.mp-portal .mp-products .divSquare > div { flex: 1; display: flex; flex-direction: column; }
.mp-qty-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    background: var(--orange);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    box-shadow: var(--sh-orange);
}
.mp-qty-badge:empty { display: none; }
body.mp-portal .mp-products .TheElement {
    position: static;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    padding: 14px 16px 16px;
    border: 0;
    background: transparent;
    text-align: left;
    color: var(--text-3);
    font-size: 13px;
    line-height: 1.45;
}
body.mp-portal .mp-products .TheElement > br { display: none; }
body.mp-portal .mp-products .TheElement > font { display: inline; color: var(--muted) !important; font-size: 12.5px; }
body.mp-portal .mp-products .TheElement > font[onclick] {
    display: block;
    width: 100%;
    margin-bottom: 4px;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.3;
    color: var(--text) !important;
}
body.mp-portal .mp-products .TheElement > font[onclick][style*="x-large"] {
    margin: 0;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--orange) !important;
}
body.mp-portal .mp-products .TheElement > font[color="Red"] {
    display: block;
    width: 100%;
    margin: 2px 0 6px;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--orange-wash);
    color: var(--orange-ink) !important;
    font-size: 12px;
    font-weight: 600;
}
body.mp-portal .mp-products .TheElement > font[style*="font-weight:bold"] { color: var(--navy) !important; font-weight: 800 !important; font-variant-numeric: tabular-nums; }
body.mp-portal .mp-products .TheElement > hr { width: 100%; margin: 8px 0 !important; border-color: var(--divider); }
body.mp-portal .mp-products .TheElement .form-group {
    float: none;
    width: 100%;
    margin: 12px 0 0;
    padding: 0;
}
body.mp-portal .mp-products .TheElement .form-group + .form-group { margin-top: 8px; }
body.mp-portal .mp-wizard .control-label { margin: 0 0 6px; font-size: 12px; font-weight: 700; color: var(--text-2); }

/* Quantity stepper */
body.mp-portal .mp-stepper { display: flex; flex-wrap: wrap; align-items: center; gap: 0; }
body.mp-portal .mp-stepper > label { width: 100%; }
.mp-stepper__btn {
    flex: none;
    width: 38px;
    height: 38px;
    border: 1.5px solid var(--border);
    background: #fff;
    color: var(--navy);
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s;
}
.mp-stepper__btn:hover { background: var(--navy-tint); }
.mp-stepper__btn[data-mp-step="-1"] { border-radius: 12px 0 0 12px; border-right: 0; }
.mp-stepper__btn[data-mp-step="1"] { border-radius: 0 12px 12px 0; border-left: 0; }
body.mp-portal .mp-stepper input.ItemQuantity.form-control {
    flex: 1 1 48px;
    width: 56px;
    max-width: 90px;
    height: 38px;
    padding: 0 4px !important;
    border: 1.5px solid var(--border);
    border-radius: 0;
    background: var(--field-bg);
    background-image: none;
    box-shadow: none;
    text-align: center;
    font-size: 15px;
    font-weight: 800;
    color: var(--navy);
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
}
body.mp-portal .mp-stepper input.ItemQuantity::-webkit-inner-spin-button,
body.mp-portal .mp-stepper input.ItemQuantity::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
body.mp-portal .mp-wizard select.ItemQuantity.form-control,
body.mp-portal .mp-wizard .tab-pane .form-control:not([type=checkbox]):not([type=radio]):not(.ItemQuantity) {
    height: auto;
    padding: 10px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-input);
    background: var(--field-bg);
    background-image: none;
    box-shadow: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}
body.mp-portal .mp-wizard .tab-pane .form-control:focus { border-color: var(--navy); background: #fff; }

/* Installation checkbox (existing .ItemInstallation) */
body.mp-portal .mp-wizard input.ItemInstallation.form-control {
    display: inline-block;
    width: 18px !important;
    height: 18px;
    margin: 0 0 0 8px;
    padding: 0;
    vertical-align: middle;
    box-shadow: none;
    accent-color: var(--navy);
    cursor: pointer;
}
body.mp-portal .mp-products .form-group > label[for="Installation"],
body.mp-portal .mp-wizard .form-group > label[style*="color:red"] { color: var(--text-2) !important; display: inline; }

/* Out of stock */
body.mp-portal .mp-products .form-group > label[style*="background-color: red"] {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    background: var(--status-cancelled-bg) !important;
    color: var(--status-cancelled-fg) !important;
    font-size: 12px;
    font-weight: 800;
}

/* Options button */
body.mp-portal a.mp-options-btn.btn {
    align-self: stretch;
    margin-top: 12px;
    padding: 11px 16px;
    border: 0;
    border-radius: var(--r-input);
    background: #fff;
    color: var(--navy);
    box-shadow: inset 0 0 0 1.5px var(--navy);
    font-size: 13px;
    font-weight: 800;
    text-transform: none;
    letter-spacing: 0;
}
body.mp-portal a.mp-options-btn.btn:hover { background: var(--navy-tint); color: var(--navy); }
body.mp-portal a.mp-options-btn.btn.is-chosen { background: var(--navy); color: #fff; box-shadow: var(--sh-navy); }

/* Previous / next */
.mp-step-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; clear: both; }
body.mp-portal .mp-step-nav .btn { margin: 0; text-transform: none; letter-spacing: 0; }
body.mp-portal .mp-step-nav .btn.mp-btn--outline { background: #fff; color: var(--navy); }
body.mp-portal .mp-step-nav .btn.mp-btn--navy { background: var(--navy); color: #fff; margin-left: auto; }

/* Sticky cart */
.mp-cart {
    flex: 0 1 380px;
    max-width: 100%;
    overflow: hidden;
    background: #fff;
    border-radius: var(--r-panel);
    box-shadow: var(--sh-float);
    animation: mp-rise .4s ease backwards;
}
@media (min-width: 960px) { .mp-cart { position: sticky; top: 84px; } }
.mp-cart__head { position: relative; overflow: hidden; padding: 20px 22px; color: #fff; background: linear-gradient(140deg, var(--navy-deep), var(--navy)); }
.mp-cart__head .mp-stripe { right: 18px; width: 12px; }
.mp-cart__head > * { position: relative; }
.mp-cart__head-row { display: flex; justify-content: space-between; align-items: center; }
.mp-cart__kicker { font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.mp-cart__count { font-size: 12px; font-weight: 600; opacity: .8; }
.mp-cart__total { margin: 8px 0 12px; font-size: 38px; font-weight: 900; letter-spacing: -.02em; line-height: 1; }
.mp-progress { display: block; height: 8px; border-radius: var(--r-pill); background: rgba(255,255,255,.18); overflow: hidden; }
.mp-progress__fill { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--orange); transition: width .4s; }
.mp-cart__min { margin-top: 8px; font-size: 12px; font-weight: 600; opacity: .85; }
body.mp-portal .mp-cart__lines { list-style: none; margin: 0; padding: 6px 22px; max-height: 360px; overflow-y: auto; }
.mp-cart__line { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--divider); }
.mp-cart__line:last-child { border-bottom: 0; }
.mp-cart__line img { width: 44px; height: 44px; flex: none; object-fit: contain; border-radius: 10px; background: var(--img-bg); color: transparent; font-size: 0; overflow: hidden; }
.mp-cart__line-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mp-cart__line-name { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.3; }
.mp-cart__line-meta { font-size: 11.5px; color: var(--muted); }
.mp-cart__line-total { font-size: 13px; font-weight: 800; color: var(--navy); }
.mp-cart__empty { margin: 0; padding: 18px 22px; font-size: 13px; color: var(--muted); }
.mp-cart__foot { padding: 6px 22px 22px; }

/* ---------- Options dialog (.mp-opt-modal on the existing Bootstrap modal) ---------- */
body.mp-portal .mp-opt-modal.in { display: flex !important; align-items: center; justify-content: center; padding: 16px; }
body.mp-portal .mp-opt-modal .modal-dialog { width: min(720px, 100%); max-width: 100%; margin: 0; }
body.mp-portal .mp-opt-modal .modal-content {
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    border-radius: var(--r-modal);
    animation: mp-rise .25s ease backwards;
}
body.mp-portal .mp-opt-head.modal-header {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 56px 18px 22px;
    border-bottom: 1px solid var(--divider);
}
body.mp-portal .mp-opt-head::before, body.mp-portal .mp-opt-head::after { display: none; }
.mp-opt-thumb { flex: none; width: 84px; height: 84px; border-radius: 16px; background: var(--img-bg); overflow: hidden; display: grid; place-items: center; }
.mp-opt-thumb img { width: 100%; height: 100%; object-fit: contain; }
.mp-opt-head__text { min-width: 0; }
body.mp-portal .mp-opt-head__meta { margin: 0 0 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
body.mp-portal .mp-opt-head .modal-title { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.25; color: var(--navy); }
body.mp-portal .mp-opt-head__note { margin: 6px 0 0; font-size: 12.5px; font-weight: 600; color: var(--orange-ink); }
body.mp-portal .mp-opt-head .mp-opt-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    margin: 0;
    border-radius: 50%;
    background: var(--bg);
    opacity: 1;
    font-size: 22px;
    font-weight: 500;
    line-height: 36px;
    color: var(--text-2);
    text-shadow: none;
}
body.mp-portal .mp-opt-head .mp-opt-close:hover { background: var(--navy-tint); color: var(--navy); }
body.mp-portal .mp-opt-modal .modal-body { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 22px; }
.mp-opt-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    padding: 0 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-input);
    background: var(--field-bg);
    color: var(--faint);
}
.mp-opt-filter:focus-within { border-color: var(--navy); background: #fff; }
body.mp-portal .mp-opt-filter__input { flex: 1; height: 42px; border: 0; background: transparent; outline: none; font-size: 14px; color: var(--text); }
body.mp-portal .mp-opt-grid.card-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; padding: 0; }
.mp-opt-tile {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border-radius: 14px;
    background: var(--bg);
    transition: background-color .15s, box-shadow .15s;
}
.mp-opt-tile.is-selected { background: var(--navy-tint); box-shadow: inset 0 0 0 1.5px var(--navy); }
body.mp-portal .mp-opt-tile .mp-opt-tile__name { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--text-2); line-height: 1.3; }
body.mp-portal .mp-opt-tile.is-selected .mp-opt-tile__name { font-weight: 800; color: var(--navy); }
body.mp-portal .mp-opt-qty.mp-stepper { flex-wrap: nowrap; }
/* Material Dashboard wraps bare inputs in .form-group + .material-input */
body.mp-portal .mp-stepper > .form-group { flex: 0 1 90px; margin: 0; padding: 0; }
body.mp-portal .mp-stepper > .form-group .material-input { display: none; }
body.mp-portal .mp-stepper > .form-group input.ItemQuantity.form-control { width: 100%; max-width: none; }
body.mp-portal .mp-opt-tile .mp-stepper__btn { background: #fff; }
body.mp-portal .mp-opt-tile .mp-stepper input.ItemQuantity.form-control { background: #fff; max-width: none; }
body.mp-portal .mp-opt-install.form-group { margin: 0; padding: 0; display: flex; align-items: center; font-size: 12px; }
body.mp-portal .mp-opt-install .control-label { margin: 0; font-size: 12px; color: var(--text-2) !important; }
body.mp-portal .mp-opt-foot.modal-footer {
    display: flex !important;
    align-items: center;
    justify-content: space-between !important;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 22px !important;
    border-top: 1px solid var(--divider);
    box-shadow: none !important;
}
body.mp-portal .mp-opt-head.modal-header, body.mp-portal .mp-opt-foot.modal-footer { flex: none; }
.mp-opt-summary { margin-right: auto; font-size: 13px; color: var(--muted); font-weight: 600; }
.mp-opt-summary strong { color: var(--navy); font-weight: 900; }
.mp-opt-total { font-size: 18px; }
body.mp-portal .mp-opt-foot .btn { margin: 0; text-transform: none; letter-spacing: 0; }
body.mp-portal .mp-opt-foot .btn.mp-btn--orange { background: var(--orange); color: #fff; }

/* Product preview modal (#PreviewModal) */
body.mp-portal .image-see-v .modal-content .modal-header { box-shadow: none !important; border-bottom: 1px solid var(--divider); padding: 20px 56px 16px 22px !important; }
body.mp-portal .image-see-v .modal-header h4 { margin: 0 0 2px; font-size: 14px; font-weight: 700; color: var(--text-2); }
body.mp-portal .image-see-v .modal-header #modal_itemName { font-size: 18px; font-weight: 800; color: var(--navy); }
body.mp-portal .image-see-v.in .modal-header .close { background: var(--bg) !important; color: var(--text-2); width: 34px; height: 34px; top: 14px; right: 14px; font-size: 22px; }
body.mp-portal .image-see-v .modal-body { background: var(--img-bg); }
body.mp-portal .image-see-v .modal-body img { box-shadow: none; border-radius: 12px; }
body.mp-portal .modal-content .modal-footer { box-shadow: none !important; border-top: 1px solid var(--divider); gap: 10px; }
body.mp-portal .image-see-v .modal-footer .btn { margin: 0; border-radius: var(--r-input); text-transform: none; letter-spacing: 0; font-weight: 700; box-shadow: none; }
body.mp-portal .image-see-v .modal-footer .btn-primary { background: var(--navy); }
body.mp-portal .image-see-v .modal-footer .btn-default { background: var(--bg); color: var(--navy); }

/* ---------- Review & submit ---------- */
.mp-review { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.mp-review__main { flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.mp-card { background: #fff; border-radius: var(--r-panel); box-shadow: var(--sh-card); border: 1px solid var(--border); padding: 22px 24px; }
.mp-card__head { margin: 0 0 14px; }
.mp-card__head .mp-kicker { margin: 0 0 4px; }
body.mp-portal .mp-card__head h2 { margin: 0; font-size: 24px; font-weight: 900; letter-spacing: -.02em; color: var(--navy); }
body.mp-portal .mp-card h3.mp-card__sub { margin: 18px 0 10px; font-size: 17px; font-weight: 800; color: var(--navy); }
body.mp-portal .mp-card h3.mp-card__sub:first-child { margin-top: 0; }

/* Review lines: the existing table, laid out as rows */
body.mp-portal .mp-review-card .table-responsive { border: 0; margin: 0; overflow: visible; }
body.mp-portal .mp-review-card table.table { margin: 0; }
body.mp-portal .mp-review-card table thead,
body.mp-portal .mp-review-card table tfoot { display: none; }
body.mp-portal .mp-review-card tbody tr.mp-rev-row {
    display: grid;
    grid-template-columns: 72px auto 1fr auto auto;
    grid-template-areas:
        "img step step ctrl price"
        "img name name ctrl price"
        "img sku  unit ctrl price";
    column-gap: 16px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--divider);
}
body.mp-portal .mp-review-card tbody tr.mp-rev-row:last-child { border-bottom: 0; }
body.mp-portal .mp-review-card tbody tr.mp-rev-row[style*="display: none"] { display: none !important; }
body.mp-portal .mp-review-card tbody tr.mp-rev-row > td { padding: 0; border: 0; min-width: 0; white-space: normal; justify-self: stretch; }
body.mp-portal .mp-review-card tbody tr.mp-rev-row > td:not(:nth-child(4)) { width: auto !important; max-width: none; }
body.mp-portal .mp-review-card tbody tr.mp-rev-row > td:nth-child(1) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-img-missing { visibility: hidden; }
body.mp-portal .mp-review-card tbody tr.mp-rev-row > td label { margin: 0; font-weight: inherit; color: inherit; }
.mp-rev-row > td:nth-child(1) { grid-area: step; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); }
.mp-rev-row > td:nth-child(2) { grid-area: sku; font-size: 12px; font-weight: 600; color: var(--muted); }
.mp-rev-row > td:nth-child(3) { grid-area: name; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--text); }
.mp-rev-row > td:nth-child(4) { grid-area: img; align-self: start; width: 72px; height: 72px; border-radius: 14px; background: var(--img-bg); overflow: hidden; }
@media (max-width: 640px) { .mp-rev-row > td:nth-child(4) { width: 56px; height: 56px; } }
body.mp-portal .mp-rev-row > td:nth-child(4) img { display: block; width: 72px !important; height: 72px !important; object-fit: contain; border-radius: 14px; background: var(--img-bg); color: transparent; font-size: 0; }
.mp-rev-row > td:nth-child(5) { grid-area: unit; font-size: 12px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.mp-rev-row > td:nth-child(5) .SummaryUnitPrice:not(:empty)::before { content: "\00b7  $"; }
.mp-rev-row > td:nth-child(5) .SummaryUnitPrice:not(:empty)::after { content: " ea"; }
.mp-rev-row > td:nth-child(6), .mp-rev-row > td:nth-child(7) { display: none; }
.mp-rev-row > td:nth-child(8) { grid-area: price; min-width: 84px; text-align: right; font-size: 16px; font-weight: 900; color: var(--navy); font-variant-numeric: tabular-nums; }
.mp-rev-ctrl { grid-area: ctrl; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.mp-rev-stepper { display: inline-flex; align-items: center; border-radius: var(--r-pill); background: var(--navy-tint); }
.mp-rev-stepper button {
    width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent;
    color: var(--navy); font-size: 17px; font-weight: 800; line-height: 1; cursor: pointer;
}
.mp-rev-stepper button:hover { background: rgba(30,58,138,.12); }
.mp-rev-qty { min-width: 24px; text-align: center; font-size: 14px; font-weight: 800; color: var(--navy); }
.mp-rev-qty--static { padding: 6px 12px; border-radius: var(--r-pill); background: var(--navy-tint); }
.mp-rev-remove {
    width: 34px; height: 34px; border: 0; border-radius: 10px; background: transparent;
    display: grid; place-items: center; color: var(--faint); cursor: pointer;
}
.mp-rev-remove:hover { background: var(--status-cancelled-bg); color: var(--status-cancelled-fg); }
.mp-install-pill {
    padding: 6px 12px; border-radius: var(--r-pill); border: 1.5px solid var(--border); background: #fff;
    font-size: 12px; font-weight: 700; color: var(--text-3); cursor: pointer;
}
.mp-install-pill[aria-pressed="true"] { border-color: var(--navy); background: var(--navy); color: #fff; }
.mp-install-pill[aria-pressed="true"]::before { content: "\2713  "; }
@media (max-width: 640px) {
    body.mp-portal .mp-review-card tbody tr.mp-rev-row {
        grid-template-columns: 56px auto 1fr auto;
        grid-template-areas:
            "img step step price"
            "img name name price"
            "img sku  unit unit"
            "ctrl ctrl ctrl ctrl";
        row-gap: 2px;
    }
    body.mp-portal .mp-rev-row > td:nth-child(4) img { width: 56px !important; height: 56px !important; }
    .mp-rev-ctrl { justify-content: flex-start; margin-top: 10px; }
}

/* Installation / delivery summary (EnableAddOnStarterItem) */
body.mp-portal .mp-review-extra label.form-control {
    display: flex; justify-content: space-between; gap: 12px; height: auto;
    margin: 0; padding: 10px 0; border: 0; border-bottom: 1px solid var(--divider);
    background: none; box-shadow: none; font-size: 13px; font-weight: 600; color: var(--muted);
}
body.mp-portal .mp-review-extra label.form-control span { color: var(--text) !important; font-weight: 700 !important; }

/* Your details */
body.mp-portal .mp-details .form-group.row { margin: 0 0 16px; padding: 0; }
body.mp-portal .mp-details .form-group.row::before, body.mp-portal .mp-details .form-group.row::after { display: none; }
body.mp-portal .mp-details .form-group.row > [class*="col-"],
body.mp-portal .mp-details .form-group.row .row > [class*="col-"] { float: none; width: 100%; padding: 0; height: auto !important; }
body.mp-portal .mp-details .form-group.row .row { margin: 0; }
body.mp-portal .mp-details .form-group.row .form-group { margin: 0; padding: 0; }
body.mp-portal .mp-details .control-label { display: block; margin: 0 0 6px; padding: 0; text-align: left; font-size: 12px; font-weight: 700; color: var(--text-2); }
body.mp-portal .mp-details .control-label span[style*="red"] { color: var(--error) !important; }
body.mp-portal .mp-details .form-control,
body.mp-portal .mp-details select {
    width: 100%; height: auto; padding: 13px 16px; border: 1.5px solid var(--border); border-radius: var(--r-input);
    background: var(--field-bg); background-image: none; box-shadow: none; font-size: 14px; font-weight: 500; color: var(--text);
}
body.mp-portal .mp-details .form-control:focus, body.mp-portal .mp-details select:focus { border-color: var(--navy); background: #fff; outline: none; }
body.mp-portal .mp-details .form-control[style*="border-color: red"] { border-color: var(--error) !important; }
body.mp-portal .mp-details .is-focused .control-label, body.mp-portal .mp-details .material-input { display: none; }
body.mp-portal .mp-details .form-group.row label:not(.control-label) { display: block; margin-top: 8px; font-size: 12px; font-weight: 500; color: var(--muted); }
body.mp-portal .mp-details br { display: none; }
body.mp-portal .mp-details input[type=file] { padding: 10px; font-size: 13px; }
/* Store type: segmented control on the existing radios */
body.mp-portal .mp-details .radio {
    display: inline-flex; margin: 0; padding: 4px; gap: 4px; border-radius: var(--r-input); background: var(--bg);
}
body.mp-portal .mp-details .radio label {
    position: relative; display: inline-flex; align-items: center; margin: 0; padding: 9px 18px; border-radius: 10px;
    font-size: 13px; font-weight: 700; color: var(--text-3); cursor: pointer;
}
body.mp-portal .mp-details .radio label input[type=radio] { position: absolute; opacity: 0; width: 1px; height: 1px; }
body.mp-portal .mp-details .radio label .circle, body.mp-portal .mp-details .radio label .check { display: none; }
body.mp-portal .mp-details .radio label:has(input:checked) { background: #fff; color: var(--navy); box-shadow: var(--sh-card); }
body.mp-portal .mp-details .radio label:has(input:focus-visible) { outline: 2px solid var(--orange); outline-offset: 2px; }

/* Sticky summary */
.mp-summary { flex: 0 1 360px; max-width: 100%; overflow: hidden; background: #fff; border-radius: var(--r-panel); box-shadow: var(--sh-float); }
@media (min-width: 960px) { .mp-summary { position: sticky; top: 84px; } }
.mp-summary__head { position: relative; overflow: hidden; padding: 22px; color: #fff; background: linear-gradient(140deg, var(--navy-deep), var(--navy)); }
.mp-summary__head .mp-stripe { right: 18px; width: 12px; }
.mp-summary__head > * { position: relative; }
.mp-summary__total { margin: 8px 0 4px; font-size: 38px; font-weight: 900; letter-spacing: -.02em; line-height: 1; }
body.mp-portal .mp-summary__note { margin: 0 0 14px; font-size: 12px; font-weight: 600; opacity: .8; }
.mp-summary__rows { margin: 0; padding: 8px 22px; }
.mp-summary__rows > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--divider); font-size: 13px; }
.mp-summary__rows > div:last-child { border-bottom: 0; }
.mp-summary__rows dt { font-weight: 600; color: var(--muted); }
.mp-summary__rows dd { margin: 0; font-weight: 800; color: var(--text); text-align: right; }
body.mp-portal .mp-summary__actions { margin: 0; padding: 4px 22px 0; float: none; }
body.mp-portal .mp-summary__actions .btn { margin: 0; padding: 16px 20px; font-size: 15px; text-transform: none; letter-spacing: 0; }
body.mp-portal .mp-summary__actions .btn.mp-btn--orange { background: var(--orange); color: #fff; }
body.mp-portal .mp-summary__actions .btn[disabled] { background: #D1D5DB !important; box-shadow: none; cursor: not-allowed; opacity: 1; }
.mp-summary__short { margin: 8px 22px 0; font-size: 12px; font-weight: 700; color: var(--orange-ink); text-align: center; }
.mp-summary__back {
    display: block; width: calc(100% - 44px); margin: 10px 22px 20px; padding: 10px; border: 0; border-radius: var(--r-input);
    background: transparent; color: var(--navy); font-size: 13px; font-weight: 700; cursor: pointer;
}
.mp-summary__back:hover { background: var(--navy-tint); }
body.mp-on-review .mp-step-nav .next-step { display: none !important; }

/* ---------- Order confirmation ---------- */
.mp-confirm { max-width: var(--max-w); margin: 0 auto; padding: 40px var(--gutter) 80px; }
.mp-confirm[hidden] { display: none; }
.mp-confirm__card {
    max-width: 640px;
    margin: 0 auto;
    padding: 40px clamp(20px, 5vw, 48px);
    text-align: center;
    background: #fff;
    border-radius: var(--r-panel);
    box-shadow: var(--sh-float);
    animation: mp-rise .4s ease backwards;
}
.mp-confirm__tick {
    width: 76px; height: 76px; margin: 0 auto 18px; border-radius: 50%;
    display: grid; place-items: center; background: var(--orange); color: #fff; box-shadow: 0 14px 32px rgba(242,101,34,.35);
}
body.mp-portal .mp-confirm__kicker { margin: 0 0 6px; font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
body.mp-portal .mp-confirm__title { margin: 0 0 12px; font-size: clamp(30px, 4vw, 42px); font-weight: 900; letter-spacing: -.03em; color: var(--navy); }
body.mp-portal .mp-confirm__summary { margin: 0 auto 24px; max-width: 46ch; font-size: 15px; line-height: 1.6; color: var(--text-3); }
.mp-confirm__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.mp-confirm__terms {
    margin-top: 18px; padding: 16px 18px; text-align: left; border-radius: 14px; background: var(--field-bg);
    font-size: 13px; line-height: 1.65; color: var(--text-2);
}
.mp-confirm__terms[hidden] { display: none; }

/* ==========================================================================
   ADMIN CHROME  (body.mp-admin, _Layout_Admin.cshtml)
   Keeps Limitless hook classes (.sidebar-main, .nav-sidebar,
   .sidebar-main-toggle, .sidebar-mobile-main-toggle) so app.js still works.
   ========================================================================== */
body.mp-admin { font-size: 14px; }
body.mp-admin a { color: var(--navy); }
body.mp-admin .page-content { min-height: 100vh; background: var(--bg); }

/* Sidebar */
body.mp-admin .sidebar-main.mp-sidebar {
    width: 248px;
    background: linear-gradient(180deg, var(--navy-deep) 0%, var(--navy-mid) 100%);
    color: #fff;
    border: 0;
    box-shadow: none;
    transition: width .2s;
}
@media (min-width: 768px) {
    body.mp-admin .sidebar-main.mp-sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
        overflow-y: auto;
        overflow-x: hidden;
    }
}
body.mp-admin .mp-sidebar .sidebar-content { background: transparent; }
.mp-side-brand {
    position: relative;
    overflow: hidden;
    padding: 20px 18px 18px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.mp-side-brand .mp-stripe { top: -30%; height: 180%; right: 22px; width: 12px; }
.mp-side-brand__mark { position: relative; display: flex; flex-direction: column; line-height: 1; color: #fff !important; text-decoration: none !important; }
.mp-side-brand__name { font-weight: 900; font-size: 24px; letter-spacing: .01em; }
.mp-side-brand__name-short { display: none; font-weight: 900; font-size: 24px; }
.mp-side-brand__tag {
    font-size: 10.5px;
    color: var(--orange);
    margin-top: 4px;
    border-top: 1.5px solid var(--orange);
    padding-top: 4px;
    align-self: flex-start;
}
.mp-side-user {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
    width: 100%;
    padding: 0;
    background: none;
    border: 0;
    color: #fff;
    text-align: left;
    cursor: pointer;
}
.mp-side-user__avatar {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--orange);
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 15px;
}
.mp-side-user__name { font-size: 13px; font-weight: 700; line-height: 1.3; }
.mp-side-user__org { font-size: 11px; opacity: .65; font-weight: 600; }
.mp-side-user__chev { margin-left: auto; opacity: .6; transition: transform .2s; }
.mp-side-user[aria-expanded="true"] .mp-side-user__chev { transform: rotate(180deg); }

/* Nav */
body.mp-admin .mp-sidebar .nav-sidebar { padding: 14px 10px; background: transparent; }
body.mp-admin .mp-sidebar .card-sidebar-mobile { background: transparent; border: 0; box-shadow: none; }
body.mp-admin .mp-sidebar .nav-sidebar .nav-item-header {
    padding: 0;
    margin: 0;
    border: 0;
}
.mp-nav-group {
    all: unset;
    box-sizing: border-box;
    width: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 12px 6px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255,255,255,.45);
}
.mp-nav-group:hover { color: #fff; }
.mp-nav-group:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 6px; }
body.mp-admin .mp-sidebar .nav-sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin: 1px 0;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,.78);
    background: transparent;
    transition: background-color .15s, color .15s;
}
body.mp-admin .mp-sidebar .nav-sidebar .nav-link:hover {
    background: rgba(255,255,255,.1);
    color: #fff;
}
body.mp-admin .mp-sidebar .nav-sidebar .nav-link.active,
body.mp-admin .mp-sidebar .nav-sidebar .nav-link.active:hover {
    background: #fff;
    color: var(--navy);
    box-shadow: 0 6px 16px rgba(0,0,0,.18);
}
body.mp-admin .mp-sidebar .nav-sidebar .nav-link > svg { flex: none; }
body.mp-admin .mp-sidebar .nav-sidebar .nav-link > span { flex: 1; white-space: nowrap; }
/* old icon-font pseudo icons from style.css */
body.mp-admin .mp-sidebar .nav-link i:before,
body.mp-admin .mp-sidebar .nav-link i:after { content: none !important; }
.mp-nav-badge {
    flex: none !important;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: var(--r-pill);
    background: var(--orange);
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.mp-nav-badge:empty { display: none; }
.mp-ext { opacity: .6; flex: none; }
body.mp-admin .mp-sidebar .mp-user-nav .nav-link { padding-left: 16px; }

/* Collapsed (icons only) - Limitless toggles body.sidebar-xs */
@media (min-width: 768px) {
    body.mp-admin.sidebar-xs .sidebar-main.mp-sidebar { width: 76px; }
    body.mp-admin.sidebar-xs .mp-side-brand { padding: 20px 12px 18px; }
    body.mp-admin.sidebar-xs .mp-side-brand__name,
    body.mp-admin.sidebar-xs .mp-side-brand__tag,
    body.mp-admin.sidebar-xs .mp-side-user__text,
    body.mp-admin.sidebar-xs .mp-side-user__chev,
    body.mp-admin.sidebar-xs .mp-user-nav,
    body.mp-admin.sidebar-xs .nav-item-header,
    body.mp-admin.sidebar-xs .mp-sidebar .nav-link > span,
    body.mp-admin.sidebar-xs .mp-sidebar .mp-ext { display: none !important; }
    body.mp-admin.sidebar-xs .mp-side-brand__name-short { display: block; text-align: center; }
    body.mp-admin.sidebar-xs .mp-side-user { justify-content: center; pointer-events: none; }
    body.mp-admin.sidebar-xs .mp-sidebar .nav-sidebar .nav-link { justify-content: center; padding: 10px 0; position: relative; }
    body.mp-admin.sidebar-xs .mp-sidebar .nav-sidebar > .nav-item.is-group-hidden { display: block !important; }
    body.mp-admin.sidebar-xs .mp-sidebar .nav-sidebar .nav-link .mp-nav-badge {
        display: block;
        position: absolute;
        top: 4px;
        right: 8px;
        padding: 1px 5px;
        font-size: 9px;
    }
}
body.mp-admin .mp-sidebar .nav-sidebar > .nav-item.is-group-hidden { display: none; }

/* Content column */
body.mp-admin .content-wrapper { background: var(--bg); min-width: 0; display: flex; flex-direction: column; }

/* Top bar */
body.mp-admin .mp-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 16px;
    padding: 12px clamp(16px, 3vw, 32px);
    background: rgba(255,255,255,.97);
    border-bottom: 1px solid var(--border);
    box-shadow: none;
    min-height: 0;
}
.mp-icon-btn {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    width: 38px;
    height: 38px;
    border-radius: var(--r-icon);
    display: grid;
    place-items: center;
    color: var(--text-2) !important;
    flex: none;
}
.mp-icon-btn:hover { background: var(--bg); color: var(--navy) !important; }
.mp-icon-btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.mp-crumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
}
.mp-crumbs a { color: var(--navy) !important; text-decoration: none; }
.mp-crumbs a:hover { color: var(--orange) !important; }
.mp-crumbs__sep { opacity: .5; }
.mp-crumbs__current { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-public-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: var(--r-pill);
    background: var(--navy-tint);
    color: var(--navy) !important;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none !important;
}
.mp-public-pill:hover { color: var(--orange) !important; }
.mp-greeting {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
    white-space: nowrap;
}
.mp-greeting__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
@media (max-width: 767.98px) {
    .mp-greeting { display: none; }
    .mp-topbar .sidebar-main-toggle { display: none !important; }
}
@media (min-width: 768px) {
    .mp-topbar .sidebar-mobile-main-toggle { display: none !important; }
}

/* Per-page Limitless breadcrumb rows: replaced by the top bar breadcrumb
   (their title row is already hidden in style.css). */
body.mp-admin .page-header > .breadcrumb-line { display: none !important; }
body.mp-admin .page-header.page-header-light { background: transparent; border: 0; box-shadow: none; margin: 0; padding: 0; }

/* Admin footer */
body.mp-admin .mp-admin-footer {
    margin-top: auto;
    padding: 16px clamp(16px, 3vw, 32px);
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
    background: transparent;
    border-top: 1px solid var(--border);
}
body.mp-admin .mp-admin-footer a { color: var(--navy); font-weight: 600; }

/* Preloader on brand colours */
body.mp-admin .cssload-w.preloader { background: rgba(244,246,250,.9); }

/* ==========================================================================
   ADMIN PAGES
   ========================================================================== */
body.mp-admin .content.mp-page { padding: 24px clamp(16px, 3vw, 32px) 48px; max-width: 1480px; width: 100%; display: flex; flex-direction: column; gap: 20px; }
.mp-page-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; }
.mp-page-head .mp-kicker { margin: 0 0 4px; }
body.mp-admin .mp-page-title { margin: 0; font-size: 32px; font-weight: 900; letter-spacing: -.03em; line-height: 1.1; color: var(--navy); }
.mp-page-head__actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Segmented control + filters */
.mp-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.mp-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: var(--r-input); background: #fff; border: 1px solid var(--border); }
.mp-seg__btn { border: 0; background: transparent; padding: 8px 14px; border-radius: 9px; font-size: 13px; font-weight: 700; color: var(--text-3); cursor: pointer; }
.mp-seg__btn:hover { color: var(--navy); background: var(--bg); }
.mp-seg__btn.is-active { background: var(--navy); color: #fff; }
.mp-filters__custom { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--r-input); background: #fff; color: var(--faint); }
body.mp-admin .mp-filters__custom input.form-control { width: 220px; height: 42px; padding: 0; border: 0; background: transparent; box-shadow: none; font-size: 13px; font-weight: 600; color: var(--text); }
body.mp-admin select.mp-select {
    height: 36px; padding: 0 30px 0 12px; border: 1px solid var(--border); border-radius: 10px; background-color: #fff;
    font-size: 13px; font-weight: 700; color: var(--navy);
}

/* KPI tiles */
.mp-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
body.mp-admin a.mp-kpi {
    display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 18px; background: #fff;
    border: 1px solid var(--border); box-shadow: var(--sh-card); color: var(--text); text-decoration: none; transition: transform .2s, box-shadow .2s;
}
body.mp-admin a.mp-kpi:hover { transform: translateY(-3px); box-shadow: var(--sh-card-hover); color: var(--text); }
.mp-kpi__icon { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; }
.mp-kpi__icon--sky { background: #E0F2FE; color: #0369A1; }
.mp-kpi__icon--orange { background: var(--orange-tint); color: var(--orange); }
.mp-kpi__icon--navy { background: var(--navy-tint); color: var(--navy); }
.mp-kpi__icon--green { background: #ECFDF3; color: #047857; }
.mp-kpi__text { display: flex; flex-direction: column; min-width: 0; }
.mp-kpi__value { font-size: 26px; font-weight: 900; letter-spacing: -.02em; color: var(--navy); line-height: 1.1; min-height: 1.1em; }
.mp-kpi__label { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }

/* Status cards */
.mp-status { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
body.mp-admin a.mp-status__card {
    position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; border-radius: 20px;
    text-decoration: none; transition: transform .2s, box-shadow .2s;
}
body.mp-admin a.mp-status__card:hover { transform: translateY(-3px); box-shadow: var(--sh-card-hover); }
.mp-status__card > * { position: relative; }
body.mp-admin .mp-status__card > .mp-stripe { position: absolute; right: 26px; width: 14px; }
body.mp-admin a.mp-status__card--open { background: linear-gradient(140deg, var(--navy-deep), var(--navy)); color: #fff; }
body.mp-admin a.mp-status__card--printed { background: linear-gradient(140deg, #F26522, #F59E0B); color: #fff; }
body.mp-admin a.mp-status__card--cancelled { background: #fff; color: var(--text); border: 1px solid var(--border); box-shadow: var(--sh-card); }
.mp-status__card--cancelled::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--error); }
.mp-status__name { font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; opacity: .85; }
.mp-status__count { font-size: 40px; font-weight: 900; letter-spacing: -.03em; line-height: 1; min-height: 40px; }
.mp-status__card--cancelled .mp-status__count { color: var(--status-cancelled-fg); }
.mp-status__bar { display: block; height: 6px; margin-top: 6px; border-radius: var(--r-pill); background: rgba(255,255,255,.25); overflow: hidden; }
.mp-status__card--cancelled .mp-status__bar { background: var(--status-cancelled-bg); }
.mp-status__bar > span { display: block; height: 100%; width: 0; border-radius: inherit; background: #fff; transition: width .4s; }
.mp-status__card--cancelled .mp-status__bar > span { background: var(--error); }
.mp-status__pct { font-size: 12px; font-weight: 600; opacity: .85; }
.mp-status__spark { display: none !important; }

/* Panels */
.mp-dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); gap: 20px; }
.mp-panel { min-width: 0; background: #fff; border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--sh-card); overflow: hidden; }
.mp-panel--wide { grid-column: 1 / -1; }
.mp-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px 0; }
body.mp-admin .mp-panel__head h3 { margin: 0; font-size: 17px; font-weight: 800; color: var(--navy); }
body.mp-admin .mp-panel__head h3 label { margin: 0; font-weight: inherit; }
.mp-panel__body { padding: 16px 22px 22px; }

/* Ranked list */
.mp-rank { list-style: none; margin: 0; padding: 12px 22px 22px; display: flex; flex-direction: column; gap: 14px; }
.mp-rank__row { display: flex; align-items: center; gap: 14px; }
.mp-rank__n { flex: none; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--navy-tint); color: var(--navy); font-size: 13px; font-weight: 900; }
.mp-rank__row:first-child .mp-rank__n { background: var(--orange); color: #fff; }
.mp-rank__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.mp-rank__name { font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-rank__bar { display: block; height: 8px; border-radius: var(--r-pill); background: var(--bg); overflow: hidden; }
.mp-rank__bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--navy), #3B5BC9); transition: width .4s; }
.mp-rank__row:first-child .mp-rank__bar > span { background: linear-gradient(90deg, var(--orange), #F59E0B); }
.mp-rank__qty { flex: none; min-width: 64px; text-align: right; font-size: 14px; font-weight: 800; color: var(--navy); }
.mp-rank__empty { font-size: 13px; color: var(--muted); }

/* DataTables (stores table) */
body.mp-admin .mp-table-wrap { overflow-x: auto; }
body.mp-admin .mp-table-wrap .card { border: 0; box-shadow: none; margin: 0; }
body.mp-admin .mp-table-wrap table.dataTable, body.mp-admin .mp-table-wrap table.table { width: 100% !important; margin: 0 !important; border-collapse: collapse; }
body.mp-admin .mp-table-wrap table thead th {
    padding: 12px 20px; background: #FAFBFC; border-bottom: 1px solid var(--border) !important; border-top: 0;
    font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-align: left;
}
body.mp-admin .mp-table-wrap table tbody td { padding: 12px 20px; border-top: 1px solid var(--divider); font-size: 13.5px; color: var(--text); text-align: left; }
body.mp-admin .mp-table-wrap table tbody tr:hover td { background: var(--field-bg); }
body.mp-admin .dataTables_wrapper .dataTables_filter input {
    height: 38px; margin-left: 8px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--field-bg); font-size: 13px;
}
body.mp-admin .dataTables_wrapper .dataTables_paginate .paginate_button { min-width: 34px; height: 34px; margin: 0 2px; border-radius: 10px !important; border: 0 !important; }
body.mp-admin .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body.mp-admin .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: var(--navy) !important; color: #fff !important; }
body.mp-admin table.dataTable thead .sorting_asc, body.mp-admin table.dataTable thead .sorting_desc { color: var(--orange); }

/* Bootstrap 4 pagination (DataTables, admin) */
body.mp-admin .pagination { gap: 4px; flex-wrap: wrap; }
body.mp-admin .pagination .page-link { min-width: 34px; height: 34px; padding: 0 10px; display: grid; place-items: center; border: 0; border-radius: 10px !important; background: transparent; color: var(--text-2); font-size: 13px; font-weight: 700; }
body.mp-admin .pagination .page-link:hover { background: var(--navy-tint); color: var(--navy); }
body.mp-admin .pagination .page-item.active .page-link { background: var(--navy); color: #fff; }
body.mp-admin .pagination .page-item.disabled .page-link { color: var(--faint); background: transparent; }
body.mp-admin .dataTables_wrapper .dataTables_filter { text-align: right; }
body.mp-admin .dataTables_wrapper .dataTables_filter label { font-size: 12px; font-weight: 700; color: var(--muted); }

/* ---------- Admin list pages (Kendo grids) ---------- */
body.mp-admin .mp-list.card { margin: 0; border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--sh-card); overflow: hidden; }
body.mp-admin .mp-list > .card-body { padding: 0; }
body.mp-admin .mp-list > .card-body > .row { margin: 0; }
body.mp-admin .mp-list > .card-body > .row > [class*="col-"] { padding: 0; margin: 0; }
.mp-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--divider); }
.mp-search { flex: 1 1 260px; max-width: 420px; display: flex; align-items: center; gap: 8px; margin: 0; padding: 0 14px; border: 1.5px solid var(--border); border-radius: var(--r-input); background: var(--field-bg); color: var(--faint); }
.mp-search:focus-within { border-color: var(--navy); background: #fff; }
.mp-search input { flex: 1; min-width: 0; height: 40px; border: 0; outline: none; background: transparent; font-size: 13.5px; font-weight: 500; color: var(--text); }
.mp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mp-chip { border: 1px solid var(--border); background: #fff; border-radius: var(--r-pill); padding: 7px 12px; font-size: 12.5px; font-weight: 700; color: var(--text-3); cursor: pointer; }
.mp-chip span { margin-left: 4px; padding: 1px 7px; border-radius: var(--r-pill); background: var(--bg); color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.mp-chip:hover { border-color: var(--navy); color: var(--navy); }
.mp-chip.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
.mp-chip.is-active span { background: rgba(255,255,255,.2); color: #fff; }
.mp-groupby { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 0 auto; font-size: 12px; font-weight: 700; color: var(--muted); }

/* Status pills */
.mp-pill { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 800; background: var(--bg); color: var(--text-3); white-space: nowrap; }
.mp-pill--open { background: var(--status-open-bg); color: var(--status-open-fg); }
.mp-pill--printed, .mp-pill--shipped, .mp-pill--dispatched { background: var(--status-printed-bg); color: var(--status-printed-fg); }
.mp-pill--cancelled, .mp-pill--canceled { background: var(--status-cancelled-bg); color: var(--status-cancelled-fg); }
.mp-pill--pending, .mp-pill--requires-approval { background: var(--orange-wash); color: var(--orange-ink); }

/* Kendo grid skin */
body.mp-admin .mp-list .k-grid { border: 0; height: auto !important; font-family: var(--font); background: #fff; }
body.mp-admin .mp-list .k-grid .k-grid-content { height: auto !important; max-height: none; overflow-y: visible; }
body.mp-admin .mp-list .k-grid .k-grid-header { padding-right: 0 !important; background: #FAFBFC; border-bottom: 1px solid var(--border); }
body.mp-admin .mp-list .k-grid .k-grid-header-wrap { border: 0; }
body.mp-admin .mp-list .k-grid .k-grid-toolbar { display: none; }
body.mp-admin .mp-list .k-grid .k-grouping-header { display: none; }
body.mp-admin .mp-list .k-grid th.k-header {
    padding: 12px 20px; border: 0; background: #FAFBFC; font-size: 10.5px; font-weight: 800; letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
body.mp-admin .mp-list .k-grid th.k-header .k-link { color: inherit; padding: 0; margin: 0; display: inline; }
body.mp-admin .mp-list .k-grid th.k-header .k-icon.k-i-sort-asc-sm, body.mp-admin .mp-list .k-grid th.k-header .k-icon.k-i-sort-desc-sm,
body.mp-admin .mp-list .k-grid th.k-header .k-i-arrow-n, body.mp-admin .mp-list .k-grid th.k-header .k-i-arrow-s { color: var(--orange); }
body.mp-admin .mp-list .k-grid th.k-header[data-dir] { color: var(--navy); }
body.mp-admin .mp-list .k-grid th .k-grid-filter { margin: -4px -6px 0 0; border-radius: 8px; color: var(--faint); }
body.mp-admin .mp-list .k-grid th .k-grid-filter.k-state-active { background: var(--navy-tint); color: var(--navy); }
body.mp-admin .mp-list .k-grid td { padding: 12px 20px; border: 0; border-top: 1px solid var(--divider); font-size: 13.5px; color: var(--text); line-height: 1.4; vertical-align: middle; }
body.mp-admin .mp-list .k-grid tr.k-alt { background: #fff; }
body.mp-admin .mp-list .k-grid tbody tr:hover { background: var(--field-bg); }
body.mp-admin .mp-list .k-grid td a { font-weight: 800; color: var(--navy); }
body.mp-admin .mp-list .k-grid tr.k-grouping-row td { background: var(--bg); font-size: 12px; font-weight: 800; color: var(--navy); }
body.mp-admin .mp-list .k-grid .k-group-col, body.mp-admin .mp-list .k-grid .k-group-cell { width: 28px; background: var(--bg); }

/* Icon-only row actions (existing Kendo command buttons with Font Awesome classes) */
body.mp-admin .mp-list .k-grid td .k-button.btn-icon,
body.mp-admin .mp-list .k-grid td .k-button.btn-list-icon,
body.mp-admin .mp-list .k-grid td .k-button.btn-edit-icon,
body.mp-admin .mp-list .k-grid td .k-button.btn-delete-icon {
    width: 34px; min-width: 34px; height: 34px; margin: 0 4px 0 0; padding: 0; display: inline-grid; place-items: center;
    border: 0 !important; border-radius: 10px; background: transparent !important; box-shadow: none; color: var(--text-3) !important; font-size: 15px; line-height: 1;
}
body.mp-admin .mp-list .k-grid td .k-button.btn-icon:hover { background: var(--navy-tint) !important; color: var(--navy) !important; }
body.mp-admin .mp-list .k-grid td .k-button.btn-delete-icon:hover { background: var(--status-cancelled-bg) !important; color: var(--status-cancelled-fg) !important; }
body.mp-admin .mp-list .k-grid td .k-button .k-icon { display: none; }

/* Pager */
body.mp-admin .mp-list .k-pager-wrap { padding: 12px 20px; border: 0; border-top: 1px solid var(--divider); background: #fff; font-size: 12.5px; color: var(--muted); }
body.mp-admin .mp-list .k-pager-wrap .k-link, body.mp-admin .mp-list .k-pager-numbers .k-link, body.mp-admin .mp-list .k-pager-numbers .k-state-selected {
    min-width: 34px; height: 34px; line-height: 34px; border-radius: 10px; border: 0; color: var(--text-2); font-weight: 700;
}
body.mp-admin .mp-list .k-pager-numbers .k-link:hover, body.mp-admin .mp-list .k-pager-wrap .k-link:hover { background: var(--navy-tint); color: var(--navy); }
body.mp-admin .mp-list .k-pager-numbers .k-state-selected { background: var(--navy); color: #fff; box-shadow: none; }
@media (max-width: 767.98px) { .mp-groupby { margin-left: 0; } }
/* Action column: keep icon buttons on one line */
body.mp-admin .mp-list .k-grid colgroup col:last-child { width: 100px !important; }
body.mp-admin .mp-list #OrderGrid colgroup col:last-child { width: 210px !important; }
body.mp-admin .mp-list .k-grid td:last-child { white-space: nowrap; overflow: visible; }

/* Labelled row actions (Orders): icon + text, tinted per action */
body.mp-admin .mp-list .k-grid td .k-button.mp-act {
    --act-fg: var(--navy); --act-bg: var(--navy-tint);
    height: 34px; margin: 0 6px 0 0; padding: 0 12px; display: inline-flex; align-items: center; gap: 7px;
    border: 0 !important; border-radius: 10px; box-shadow: none; background: var(--act-bg) !important; color: var(--act-fg) !important;
    font-weight: 700; font-size: 12.5px; line-height: 1; font-family: inherit; text-transform: none; letter-spacing: 0; transition: filter .15s, transform .15s;
}
body.mp-admin .mp-list .k-grid td .k-button.mp-act:hover { filter: brightness(.95); transform: translateY(-1px); }
body.mp-admin .mp-list .k-grid td .k-button.mp-act:focus-visible { outline: 2px solid var(--act-fg); outline-offset: 2px; }
body.mp-admin .mp-list .k-grid td .k-button.mp-act::before {
    content: ""; flex: none; width: 15px; height: 15px; background: currentColor;
    -webkit-mask: var(--act-icon) center / contain no-repeat; mask: var(--act-icon) center / contain no-repeat;
}
body.mp-admin .mp-list .k-grid td .k-button.mp-act .k-icon { display: none; }
.mp-act--export { --act-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3Cpath d='M12 15V3'/%3E%3C/svg%3E"); }
body.mp-admin .mp-list .k-grid td .k-button.mp-act--ship { --act-fg: var(--status-printed-fg, #15803d); --act-bg: var(--status-printed-bg, #e8f7ee);
    --act-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 4h13v12H1z'/%3E%3Cpath d='M14 8h4l3 3v5h-7'/%3E%3Ccircle cx='5.5' cy='18.5' r='2'/%3E%3Ccircle cx='17.5' cy='18.5' r='2'/%3E%3C/svg%3E"); }
body.mp-admin .mp-list .k-grid td .k-button.mp-act--cancel,
body.mp-admin .mp-list .k-grid td .k-button.mp-act--delete { --act-fg: var(--status-cancelled-fg, #dc2626); --act-bg: var(--status-cancelled-bg, #fdecec); }
.mp-act--cancel { --act-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M5.6 5.6l12.8 12.8'/%3E%3C/svg%3E"); }
.mp-act--details { --act-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01'/%3E%3C/svg%3E"); }
.mp-act--delete { --act-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6M10 11v6M14 11v6'/%3E%3C/svg%3E"); }
body.mp-admin .mp-list #OrderGrid colgroup col:nth-last-child(6) { width: 84px !important; }
body.mp-admin .mp-list #OrderGrid colgroup col:nth-last-child(5) { width: 120px !important; }
body.mp-admin .mp-list #OrderGrid colgroup col:nth-last-child(4) { width: 124px !important; }
body.mp-admin .mp-list #OrderGrid colgroup col:nth-last-child(3),
body.mp-admin .mp-list #OrderGrid colgroup col:nth-last-child(2) { width: 150px !important; }
body.mp-admin .mp-list #OrderGrid colgroup col:last-child { width: 474px !important; }
body.mp-admin .mp-list #OrderGrid .k-grid-header-wrap > table,
body.mp-admin .mp-list #OrderGrid .k-grid-content > table { min-width: 1102px; }
body.mp-admin .mp-list #OrderGrid td .k-button.mp-act > span:empty { display: none; }
body.mp-admin .mp-list #OrderGrid td .k-button.mp-act { padding: 0 9px; margin-right: 4px; gap: 6px; }
body.mp-admin .mp-list #OrderGrid td:last-child { padding-right: 12px; }
body.mp-admin .mp-list #OrderGrid td, body.mp-admin .mp-list #OrderGrid th.k-header { padding-left: 14px; padding-right: 14px; }
body.mp-admin .mp-list #OrderGrid td:nth-last-child(4) { white-space: nowrap; }

/* ---------- Order detail ---------- */
.mp-page-head__lead { display: flex; align-items: center; gap: 14px; }
body.mp-admin a.mp-back { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid var(--border); color: var(--navy); }
body.mp-admin a.mp-back:hover { background: var(--navy-tint); }
body.mp-admin .mp-page-title .mp-pill { vertical-align: middle; font-size: 13px; letter-spacing: 0; }
body.mp-admin .mp-order-detail > .card-body { padding: 0; }
.mp-detail-stack { display: flex; flex-direction: column; gap: 20px; }
body.mp-admin .mp-order-detail .card { margin: 0; border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--sh-card); overflow: hidden; }
body.mp-admin .mp-order-detail .card .card { border: 0; box-shadow: none; border-radius: 0; }
body.mp-admin .mp-order-detail .card > .row { margin: 0; }
body.mp-admin .mp-order-detail .card > .row > .col-lg-12 { padding: 0; }
body.mp-admin .mp-card-head.card-header { padding: 18px 22px 0; background: #fff; border: 0; }
body.mp-admin .mp-card-head .card-title a { color: var(--navy) !important; font-size: 17px; font-weight: 800; }
body.mp-admin .mp-order-detail #accordion-styled-group3 > .card-body { padding: 16px 22px 22px; }
/* responsive field grid: label above control */
body.mp-admin .mp-order-detail #accordion-styled-group3 .card-body > .row { margin: 0 -8px; }
body.mp-admin .mp-order-detail #accordion-styled-group3 .card-body > .row > [class*="col-"] { flex: 1 1 260px; max-width: none; padding: 0 8px; margin-bottom: 14px; }
body.mp-admin .mp-order-detail #accordion-styled-group3 .form-group > .row { margin: 0; flex-direction: column; }
body.mp-admin .mp-order-detail #accordion-styled-group3 .form-group > .row > [class*="col-"] { max-width: 100%; flex: none; padding: 0; }
body.mp-admin .mp-order-detail .control-label { margin: 0 0 6px; padding: 0; font-size: 12px; font-weight: 700; color: var(--text-2); }
body.mp-admin .mp-order-detail .k-textbox, body.mp-admin .mp-order-detail input.form-control.k-textbox {
    width: 100%; height: auto; padding: 11px 14px; border: 1.5px solid var(--border); border-radius: var(--r-input); background: var(--field-bg); font-size: 14px; color: var(--text); box-shadow: none;
}
body.mp-admin .mp-order-detail .k-textbox:focus { border-color: var(--navy); background: #fff; }
body.mp-admin .mp-order-detail .k-textbox[disabled], body.mp-admin .mp-order-detail .k-textbox.k-state-disabled { background: var(--bg); color: var(--muted); border-color: var(--bg); opacity: 1; }
body.mp-admin .mp-order-detail .k-dropdown { width: 100%; }
body.mp-admin .mp-order-detail .k-dropdown .k-dropdown-wrap { border: 1.5px solid var(--border); border-radius: var(--r-input); background: var(--field-bg); box-shadow: none; padding: 4px 6px; }
body.mp-admin .mp-order-detail .form-actions { display: flex; gap: 10px; padding: 0 8px; }
body.mp-admin .mp-order-detail .form-actions br { display: none; }
/* order items */
body.mp-admin .mp-order-detail .card-outline-info > .card-header { padding: 18px 22px; border: 0; background: linear-gradient(140deg, var(--navy-deep), var(--navy)); color: #fff; }
.mp-items-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
body.mp-admin .mp-items-head h4 { margin: 0; flex: 1; font-size: 17px; font-weight: 800; color: #fff; }
.mp-items-head__meta { font-size: 12px; font-weight: 700; opacity: .8; }
.mp-items-head__total { font-size: 24px; font-weight: 900; }
body.mp-admin .mp-order-detail .card-outline-info > .card-body { padding: 0; }
body.mp-admin .mp-order-detail .card-outline-info hr { display: none; }
body.mp-admin .mp-order-detail #OptionsTable { margin: 0 !important; border: 0; }
body.mp-admin .mp-order-detail #OptionsTable thead th { padding: 12px 20px; background: #FAFBFC; border: 0; border-bottom: 1px solid var(--border); font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
body.mp-admin .mp-order-detail #OptionsTable td { padding: 12px 20px; border: 0; border-top: 1px solid var(--divider); background: #fff; vertical-align: middle; }
body.mp-admin .mp-order-detail #OptionsTable tbody tr:hover td { background: var(--field-bg); }
body.mp-admin .mp-order-detail .mp-th-qty, body.mp-admin .mp-order-detail #OptionsTable td:last-child { width: 110px; text-align: right; }
.mp-item-row { display: flex; align-items: center; gap: 14px; }
.mp-item-row__thumb { flex: none; width: 56px; height: 56px; border-radius: 12px; background: var(--img-bg); overflow: hidden; }
.mp-item-row__thumb img { width: 100%; height: 100%; object-fit: contain; }
.mp-item-row__text { display: flex; flex-direction: column; min-width: 0; }
.mp-item-row__name { font-size: 14px; font-weight: 700; color: var(--text); }
.mp-item-row__sku { font-size: 12px; font-weight: 600; color: var(--muted); }
.mp-qty-pill { display: inline-block; min-width: 40px; padding: 5px 12px; border-radius: var(--r-pill); background: var(--navy-tint); color: var(--navy); font-size: 13px; font-weight: 800; text-align: center; }
body.mp-admin .mp-order-detail .dataTables_wrapper .dataTables_filter, body.mp-admin .mp-order-detail .dataTables_wrapper .dataTables_length { padding: 14px 20px 6px; }
body.mp-admin .mp-order-detail .dataTables_wrapper .dataTables_info, body.mp-admin .mp-order-detail .dataTables_wrapper .dataTables_paginate { padding: 12px 20px; }
body.mp-admin .mp-order-detail .control-label { text-align: left !important; }
body.mp-admin .mp-order-detail input.form-control.k-textbox[disabled], body.mp-admin .mp-order-detail input.form-control.k-textbox.k-state-disabled { background: var(--bg); color: var(--muted); border-color: var(--bg); opacity: 1; }
body.mp-admin .mp-order-detail .dataTables_wrapper > .row:first-child { display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 10px 6px 4px; }
body.mp-admin .mp-order-detail .dataTables_wrapper > .row > [class*="col-"] { flex: 0 1 auto; max-width: none; width: auto; }
body.mp-admin .mp-order-detail .dataTables_wrapper label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; font-weight: 700; color: var(--muted); }
body.mp-admin .mp-order-detail .dataTables_wrapper .dataTables_length select { height: 36px; padding: 0 8px; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
body.mp-admin .mp-order-detail .dataTables_wrapper > .row:last-child { display: flex; justify-content: space-between; align-items: center; margin: 0; }
body.mp-admin .mp-order-detail .dataTables_info { font-size: 12.5px; color: var(--muted); }

/* ---------- Admin add / edit pages (.mp-form-page) ---------- */
body.mp-admin .mp-form-page > .card-body { padding: 0; }
body.mp-admin .mp-form-page #accordion-styled { display: flex; flex-direction: column; gap: 20px; }
body.mp-admin .mp-form-page .card { margin: 0; border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--sh-card); }
body.mp-admin .mp-form-page .card .card { border-radius: 14px; box-shadow: none; }
body.mp-admin .mp-form-page .card-header.bg-primary,
body.mp-admin .mp-form-page .card-header { padding: 18px 22px 0; background: #fff !important; border: 0; color: var(--navy); }
body.mp-admin .mp-form-page .card-header .card-title,
body.mp-admin .mp-form-page .card-header .card-title a,
body.mp-admin .mp-form-page .card-header h4 { margin: 0; color: var(--navy) !important; font-size: 17px; font-weight: 800; }
body.mp-admin .mp-form-page .card-body { padding: 16px 22px 22px; }
/* fields: label above control, two-up on wide screens */
body.mp-admin .mp-form-page form .card-body > .row,
body.mp-admin .mp-form-page .collapse > .card-body > .row { margin: 0 -8px; }
body.mp-admin .mp-form-page .form-group { margin-bottom: 14px; }
body.mp-admin .mp-form-page .form-group > .row { margin: 0; flex-direction: column; }
body.mp-admin .mp-form-page .form-group > .row > [class*="col-"] { max-width: 100%; flex: none; padding: 0; }
body.mp-admin .mp-form-page .control-label { margin: 0 0 6px; padding: 0; text-align: left !important; font-size: 12px; font-weight: 700; color: var(--text-2); }
body.mp-admin .mp-form-page input.form-control,
body.mp-admin .mp-form-page input.k-textbox,
body.mp-admin .mp-form-page textarea.form-control,
body.mp-admin .mp-form-page textarea.k-textbox,
body.mp-admin .mp-form-page select.form-control {
    width: 100%; height: auto; padding: 11px 14px; border: 1.5px solid var(--border); border-radius: var(--r-input);
    background: var(--field-bg); font-size: 14px; color: var(--text); box-shadow: none;
}
body.mp-admin .mp-form-page input.form-control:focus, body.mp-admin .mp-form-page input.k-textbox:focus,
body.mp-admin .mp-form-page textarea:focus { border-color: var(--navy); background: #fff; outline: none; }
body.mp-admin .mp-form-page input[disabled], body.mp-admin .mp-form-page input.k-state-disabled { background: var(--bg) !important; color: var(--muted); border-color: var(--bg) !important; }
body.mp-admin .mp-form-page .k-numerictextbox, body.mp-admin .mp-form-page .k-dropdown, body.mp-admin .mp-form-page .k-multiselect, body.mp-admin .mp-form-page .k-combobox { width: 100% !important; }
body.mp-admin .mp-form-page .k-numerictextbox .k-numeric-wrap,
body.mp-admin .mp-form-page .k-dropdown .k-dropdown-wrap,
body.mp-admin .mp-form-page .k-combobox .k-dropdown-wrap,
body.mp-admin .mp-form-page .k-multiselect .k-multiselect-wrap { border: 1.5px solid var(--border); border-radius: var(--r-input); background: var(--field-bg); box-shadow: none; padding: 4px 6px; }
body.mp-admin .mp-form-page .k-numerictextbox .k-numeric-wrap input { border: 0; padding: 6px 8px; background: transparent; }
body.mp-admin .mp-form-page .k-state-focused > .k-numeric-wrap,
body.mp-admin .mp-form-page .k-dropdown .k-state-focused,
body.mp-admin .mp-form-page .k-multiselect.k-state-focused .k-multiselect-wrap { border-color: var(--navy); background: #fff; }
body.mp-admin .mp-form-page input[type=file] { padding: 10px; border: 1.5px dashed var(--border); border-radius: var(--r-input); background: var(--field-bg); font-size: 13px; width: 100%; }
body.mp-admin .mp-form-page .card-body img { border-radius: 12px; max-width: 100%; }

/* Booleans: Kendo checkbox drawn as a toggle switch (42x24, navy when on) */
body.mp-admin .mp-form-page input.k-checkbox { position: absolute; opacity: 0; width: 1px; height: 1px; }
body.mp-admin .mp-form-page input.k-checkbox + label.k-checkbox-label {
    position: relative; display: inline-flex; align-items: center; min-height: 24px; padding: 0 0 0 54px; margin: 4px 0;
    font-size: 13.5px; font-weight: 700; color: var(--text-2); cursor: pointer; line-height: 24px;
}
body.mp-admin .mp-form-page input.k-checkbox + label.k-checkbox-label::before {
    content: ""; position: absolute; left: 0; top: 0; width: 42px; height: 24px; margin: 0; border: 0; border-radius: var(--r-pill);
    background: #D1D5DB; box-shadow: none; transition: background-color .2s; transform: none;
}
body.mp-admin .mp-form-page input.k-checkbox + label.k-checkbox-label::after {
    content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; transform: none; border: 0; opacity: 1;
}
body.mp-admin .mp-form-page input.k-checkbox:checked + label.k-checkbox-label::before { background: var(--navy); }
body.mp-admin .mp-form-page input.k-checkbox:checked + label.k-checkbox-label::after { transform: translateX(18px); }
body.mp-admin .mp-form-page input.k-checkbox:focus-visible + label.k-checkbox-label::before { outline: 2px solid var(--orange); outline-offset: 2px; }

/* Sticky Save / Cancel bar */
body.mp-admin .mp-form-page .form-actions {
    position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    margin: 8px 0 0; padding: 14px 8px; background: rgba(255,255,255,.97); border-top: 1px solid var(--divider);
}
body.mp-admin .mp-form-page .form-actions br { display: none; }
body.mp-admin .mp-form-page .form-actions .btn { margin: 0; padding: 12px 20px; border: 0; border-radius: var(--r-input); font-size: 14px; font-weight: 700; text-transform: none; box-shadow: none; }
body.mp-admin .mp-form-page .form-actions .btn-success { background: var(--navy) !important; color: #fff !important; box-shadow: var(--sh-navy); }
body.mp-admin .mp-form-page .form-actions .btn-success:hover { background: var(--navy-hover) !important; }
body.mp-admin .mp-form-page .form-actions .btn-danger,
body.mp-admin .mp-form-page .form-actions .btn-default { background: var(--bg) !important; color: var(--navy) !important; }
body.mp-admin .mp-form-page .form-actions .btn-danger:hover { background: var(--navy-tint) !important; }

/* Tables inside forms (item options / price lists) */
body.mp-admin .mp-form-page .table { margin: 0; }
body.mp-admin .mp-form-page .table thead th { padding: 10px 14px; background: #FAFBFC; border: 0; border-bottom: 1px solid var(--border); font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
body.mp-admin .mp-form-page .table td { padding: 10px 14px; border: 0; border-top: 1px solid var(--divider); background: #fff !important; vertical-align: middle; }
body.mp-admin .mp-form-page .card-body .btn.Blue, body.mp-admin .mp-form-page .card-body .btn-success:not(.submitBtn) { border-radius: var(--r-input); background: var(--navy) !important; color: #fff; border: 0; }
body.mp-admin .mp-form-page > .card-body { padding: 0 !important; }
body.mp-admin .mp-form-page input.k-checkbox + label.k-checkbox-label::after { display: block !important; content: "" !important; visibility: visible; }
body.mp-admin .mp-form-page .form-actions { flex: 1 1 100%; width: 100%; }
body.mp-admin .mp-form-page .row > .form-actions { margin-left: 8px; margin-right: 8px; }
body.mp-admin .mp-form-page input.k-checkbox + label.k-checkbox-label::before { z-index: 0 !important; }
body.mp-admin .mp-form-page input.k-checkbox + label.k-checkbox-label::after { z-index: 1 !important; }

/* ---------- Flow (Setup) ---------- */
.mp-stages { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mp-stage {
    flex: 1 1 200px; display: flex; align-items: center; gap: 12px; padding: 16px 18px; border: 1px solid var(--border); border-radius: 18px;
    background: #fff; box-shadow: var(--sh-card); text-align: left; cursor: pointer; transition: transform .2s, box-shadow .2s, background-color .2s;
}
.mp-stage:hover { transform: translateY(-2px); box-shadow: var(--sh-card-hover); }
.mp-stage__n { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--navy-tint); color: var(--navy); font-weight: 900; }
.mp-stage__text { display: flex; flex-direction: column; min-width: 0; }
.mp-stage__label { font-size: 14px; font-weight: 800; color: var(--text); }
.mp-stage__count { font-size: 12px; font-weight: 600; color: var(--muted); }
.mp-stage.is-active { background: linear-gradient(140deg, var(--navy-deep), var(--navy)); border-color: transparent; box-shadow: var(--sh-navy); }
.mp-stage.is-active .mp-stage__n { background: var(--orange); color: #fff; }
.mp-stage.is-active .mp-stage__label { color: #fff; }
.mp-stage.is-active .mp-stage__count { color: rgba(255,255,255,.75); }
.mp-stage__arrow { flex: none; color: var(--faint); }
body.mp-admin .mp-flow > .row { margin: 0; }
body.mp-admin .mp-flow > .row > .col-md-12 { padding: 0; }
body.mp-admin .mp-flow .mp-list > .card-body { padding: 0; }
body.mp-admin .mp-flow .mp-flow-pane { display: block; margin: 0 !important; }
body.mp-admin .mp-flow .mp-flow-pane > .t-ds { display: none; }
body.mp-admin .mp-flow .mp-flow-pane > [class*="col-lg-9"] { max-width: 100%; width: 100%; flex: none; padding: 0; }
body.mp-admin .mp-flow .mp-flow-pane .card-body { padding: 0; }
body.mp-admin .mp-flow .mp-flow-pane .row { margin: 0; }
body.mp-admin .mp-flow .mp-flow-pane .form-group { padding: 0; margin: 0; }
@media (max-width: 767.98px) { .mp-stage__arrow { display: none; } }

/* ---------- Columns (Setup) ---------- */
body.mp-admin .mp-columns > .card { margin: 0; border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--sh-card); }
body.mp-admin .mp-columns > .card > .card-body { padding: 20px 22px 22px; }
body.mp-admin .mp-columns .form-actions { display: flex; gap: 10px; margin: 0 0 16px; padding: 0; }
body.mp-admin .mp-columns .form-actions br, body.mp-admin .mp-columns .form-actions #loadDiv:empty { display: none; }
body.mp-admin .mp-columns .form-actions .btn-success { padding: 12px 22px; border: 0; border-radius: var(--r-input); background: var(--navy) !important; color: #fff; font-weight: 700; box-shadow: var(--sh-navy); text-transform: none; }
body.mp-admin .mp-columns .sd-block { margin-bottom: 16px; }
body.mp-admin .mp-columns .sd-block > div { height: 100%; padding: 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--field-bg); }
body.mp-admin .mp-columns .sd-block label.h4 { font-size: 15px; font-weight: 800; color: var(--navy); }
body.mp-admin .mp-columns .sd-block input.form-control { height: 38px; margin: 10px 0; border: 1.5px solid var(--border); border-radius: 10px; background: #fff; font-size: 13px; }
body.mp-admin .mp-columns .sd-block .btn-primary { margin: 10px 0; border: 0; border-radius: 10px; background: var(--orange) !important; color: #fff; font-weight: 700; text-transform: none; white-space: nowrap; }
body.mp-admin .mp-columns .sd-block hr { margin: 6px 0 10px; border-color: var(--divider); }
body.mp-admin .mp-columns .sd-block ul { margin: 0; padding: 0; list-style: none; overflow-y: auto !important; overflow-x: hidden !important; border-radius: 12px; background: #fff; border: 1px solid var(--divider); }
body.mp-admin .mp-columns .li-ct-list { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--divider); }
body.mp-admin .mp-columns .li-ct-list:hover { background: var(--field-bg); }
body.mp-admin .mp-columns .li-ct-list label { margin: 0 0 0 6px; font-size: 13px; font-weight: 600; color: var(--text); }
body.mp-admin .mp-columns .list-items-ct a { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: var(--text-3); }
body.mp-admin .mp-columns .list-items-ct a:hover { background: var(--navy-tint); color: var(--navy); }
body.mp-admin .mp-columns .list-items-ct a.btn-link-danger:hover { background: var(--status-cancelled-bg); color: var(--status-cancelled-fg); }
body.mp-admin .mp-columns .sd-block ul > li:not(.li-ct-list) { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--divider); }
body.mp-admin .mp-columns .sd-block ul > li:not(.li-ct-list):hover { background: var(--field-bg); }
body.mp-admin .mp-columns .sd-block ul > li:not(.li-ct-list) label { flex: 1; min-width: 0; margin: 0; font-size: 13px; font-weight: 600; color: var(--text); }
body.mp-admin .mp-columns .sd-block ul > li > a { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: var(--text-3); }
body.mp-admin .mp-columns .sd-block ul > li > a:hover { background: var(--navy-tint); color: var(--navy); }
body.mp-admin .mp-columns .sd-block > div > .row { margin: 0; gap: 8px; flex-wrap: nowrap; align-items: center; }
body.mp-admin .mp-columns .sd-block > div > .row > .col-12 { flex: 0 0 100%; }
body.mp-admin .mp-columns .sd-block > div > .row { flex-wrap: wrap; }
body.mp-admin .mp-columns .sd-block > div > .row > .col { flex: 1 1 0; max-width: none; padding: 0; }
body.mp-admin .mp-columns .sd-block > div > .row > .col:last-child { flex: 0 0 auto; }
/* Tenant card variant: real <img class="product-image"> instead of a background image (Dan Murphy) */
body.mp-portal .mp-products .divSquare:has(img.product-image)::before { display: none; }
body.mp-portal .mp-products .divSquare > .product-image-container { width: 100%; height: auto; margin: 0; padding: 0; border: 0; background: var(--img-bg) !important; }
body.mp-portal .mp-products .divSquare > .product-image-container > img.product-image { display: block; width: 100% !important; height: auto !important; max-height: none; aspect-ratio: 4 / 3; object-fit: contain; padding: 12px; box-sizing: border-box; margin: 0; border: 0; background: transparent; color: transparent; font-size: 0; }
body.mp-portal .mp-products .divSquare > img.product-image { display: block; width: 100% !important; height: auto !important; aspect-ratio: 4 / 3; object-fit: contain; padding: 12px; box-sizing: border-box; margin: 0; border: 0; background: var(--img-bg); color: transparent; font-size: 0; }
body.mp-portal .mp-products .TheElement { background: transparent !important; color: var(--text-3) !important; }
body.mp-portal .mp-products .divSquare { background-color: #fff !important; }
body.mp-portal .mp-step-media.line-heading { display: block; }
body.mp-portal .mp-step-media.line-heading img { margin-bottom: 12px; }
/* ---------- Multi-range cart (mills-cart.js) ---------- */
.mp-cat-card__media { position: relative; }
.mp-cat-card__badge { position: absolute; top: 12px; left: 12px; padding: 5px 11px; border-radius: var(--r-pill); background: var(--orange); color: #fff; font-size: 12px; font-weight: 800; box-shadow: var(--sh-orange); }
body.mp-portal .mp-cat-card.has-items { box-shadow: 0 0 0 2px var(--orange), var(--sh-float); }
.mp-ext-tag { padding: 4px 9px; border-radius: var(--r-pill); background: var(--orange-wash); color: var(--orange-ink); font-size: 11px; font-weight: 800; white-space: nowrap; }
body.mp-portal a.mp-summary__add { display: block; margin: -10px 22px 20px; padding: 10px; border-radius: var(--r-input); text-align: center; font-size: 13px; font-weight: 700; color: var(--orange-ink); }
body.mp-portal a.mp-summary__add:hover { background: var(--orange-wash); color: var(--orange-ink); }

/* ==========================================================================
   Design review fixes: pop-ups, mobile, alignment
   ========================================================================== */

/* ---------- SweetAlert2 (portal success / punchout messages) ---------- */
.swal2-container.in, .swal2-overlay, .sweet-overlay { background-color: rgba(11,23,64,.55) !important; }
.swal2-modal {
    border-radius: var(--r-modal) !important; padding: 32px 28px 26px !important; font-family: var(--font) !important;
    box-shadow: var(--sh-modal) !important;
}
.swal2-modal h2, .swal2-modal .swal2-title { font-family: var(--font) !important; font-size: 26px !important; font-weight: 900 !important; color: var(--navy) !important; letter-spacing: -.02em; }
.swal2-modal .swal2-content { font-family: var(--font) !important; font-size: 15px !important; color: var(--text-3) !important; }
.swal2-modal .swal2-icon.swal2-success { border-color: var(--orange) !important; }
.swal2-modal .swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(242,101,34,.25) !important; }
.swal2-modal .swal2-icon.swal2-success .swal2-success-line-tip,
.swal2-modal .swal2-icon.swal2-success .swal2-success-line-long,
.swal2-modal .swal2-icon.swal2-success [class^="swal2-success-line"] { background-color: var(--orange) !important; }
.swal2-modal .swal2-icon.swal2-success::before, .swal2-modal .swal2-icon.swal2-success::after,
.swal2-modal .swal2-icon.swal2-success .swal2-success-fix { background: #fff !important; }
.swal2-modal .swal2-buttonswrapper .btn, .swal2-modal .swal2-confirm, .swal2-modal .swal2-cancel {
    margin: 8px 6px 0 !important; padding: 12px 26px !important; border: 0 !important; border-radius: var(--r-input) !important;
    font-family: var(--font) !important; font-size: 14px !important; font-weight: 800 !important; text-transform: none !important;
    letter-spacing: 0 !important; box-shadow: var(--sh-navy) !important;
}
.swal2-modal .swal2-confirm, .swal2-modal .btn-success, .swal2-modal .btn-primary { background: var(--navy) !important; color: #fff !important; }
.swal2-modal .swal2-cancel, .swal2-modal .btn-danger, .swal2-modal .btn-default { background: var(--bg) !important; color: var(--navy) !important; box-shadow: none !important; }

/* ---------- Bootstrap modals: buttons (portal BS3 + admin BS4) ---------- */
body.mp-portal .modal-footer .btn:not(.mp-btn),
body.mp-admin .modal-footer .btn:not(.mp-btn) {
    margin: 0; padding: 11px 20px; border: 0; border-radius: var(--r-input); box-shadow: none;
    font-family: var(--font); font-size: 14px; font-weight: 700; text-transform: none; letter-spacing: 0;
    background: var(--bg) !important; color: var(--navy) !important;
}
body.mp-portal .modal-footer .btn.btn-primary:not(.mp-btn),
body.mp-admin .modal-footer .btn.btn-primary:not(.mp-btn),
body.mp-admin .modal-footer .btn.btn-success:not(.mp-btn) { background: var(--navy) !important; color: #fff !important; box-shadow: var(--sh-navy); }
body.mp-portal .modal-footer .btn:not(.mp-btn):hover, body.mp-admin .modal-footer .btn:not(.mp-btn):hover { filter: brightness(.96); }
body.mp-portal .modal-footer, body.mp-admin .modal-footer { gap: 10px; }

/* admin (Bootstrap 4) modals */
body.mp-admin .modal-backdrop.show { background: var(--navy-deep); opacity: .55; }
body.mp-admin .modal-content { border: 0; border-radius: 20px; box-shadow: var(--sh-modal); overflow: hidden; font-family: var(--font); }
body.mp-admin .modal-header { padding: 18px 22px; border-bottom: 1px solid var(--divider); align-items: center; }
body.mp-admin .modal-header h3, body.mp-admin .modal-header h5, body.mp-admin .modal-title { margin: 0; font-size: 18px; font-weight: 800; color: var(--navy); }
body.mp-admin .modal-header h3:empty { display: none; }
body.mp-admin .modal-header .close { margin: -6px -6px -6px auto; width: 34px; height: 34px; padding: 0; border-radius: 50%; background: var(--bg); opacity: 1; font-size: 20px; color: var(--text-2); text-shadow: none; }
body.mp-admin .modal-body { padding: 20px 22px; font-size: 14px; color: var(--text-2); }
body.mp-admin .modal-body p { margin: 0; font-weight: 600; }
body.mp-admin .modal-footer { padding: 0 22px 20px; border-top: 0; }

/* ---------- Kendo pop-ups (admin + portal) ---------- */
.k-animation-container .k-popup, .k-popup.k-list-container, .k-popup.k-calendar-container {
    border: 1px solid var(--border) !important; border-radius: 14px !important; box-shadow: var(--sh-float) !important;
    background: #fff !important; font-family: var(--font); overflow: hidden;
}
.k-list-container .k-list .k-item, .k-popup .k-list .k-item { padding: 9px 14px; font-size: 13.5px; color: var(--text); border-radius: 0; }
.k-list-container .k-list .k-item.k-state-hover, .k-popup .k-list .k-item:hover { background: var(--field-bg); color: var(--navy); }
.k-list-container .k-list .k-item.k-state-selected, .k-list-container .k-list .k-item.k-state-focused.k-state-selected,
.k-popup .k-list .k-item.k-state-selected { background: var(--navy-tint) !important; color: var(--navy) !important; font-weight: 700; box-shadow: none; }
.k-list-container .k-list-optionlabel, .k-popup .k-list-optionlabel { padding: 9px 14px; font-size: 12.5px; color: var(--muted); }
.k-list-container .k-list-filter { padding: 8px; }
.k-list-container .k-list-filter .k-textbox { width: 100%; height: 36px; border: 1.5px solid var(--border); border-radius: 10px; padding: 0 10px; }
body.mp-admin .k-dropdown .k-dropdown-wrap .k-input { border: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--text); font-size: 14px; }
body.mp-admin .k-dropdown .k-dropdown-wrap .k-select { border: 0; background: transparent; }

/* grid column filter menu */
.k-filter-menu .k-filter-menu-container, form.k-filter-menu { padding: 14px !important; font-family: var(--font); }
.k-filter-menu .k-filter-help-text { margin-bottom: 8px; font-size: 12px; font-weight: 700; color: var(--text-2); }
.k-filter-menu .k-widget.k-dropdown, .k-filter-menu .k-textbox, .k-filter-menu .k-numerictextbox, .k-filter-menu .k-datepicker { width: 100% !important; margin: 0 0 8px; }
.k-filter-menu .k-dropdown-wrap, .k-filter-menu .k-numeric-wrap, .k-filter-menu .k-picker-wrap, .k-filter-menu .k-textbox {
    border: 1.5px solid var(--border) !important; border-radius: 10px !important; background: var(--field-bg) !important; box-shadow: none !important;
}
.k-filter-menu .k-action-buttons, .k-filter-menu .k-columns-item + .k-action-buttons { display: flex; gap: 8px; margin: 6px 0 0; padding: 0; border: 0; }
.k-filter-menu .k-button {
    flex: 1; margin: 0; padding: 9px 12px; border: 0 !important; border-radius: 10px !important; box-shadow: none !important;
    font-family: var(--font); font-size: 13px; font-weight: 800; text-transform: none; letter-spacing: 0;
    background: var(--bg) !important; color: var(--navy) !important;
}
.k-filter-menu .k-button.k-primary { background: var(--navy) !important; color: #fff !important; }

/* Kendo window (grid pop-up editor, e.g. Flow > Add step item) */
.k-widget.k-window { border: 0 !important; border-radius: 20px !important; box-shadow: var(--sh-modal) !important; overflow: hidden; font-family: var(--font); padding-top: 58px; }
.k-window .k-window-titlebar, .k-window-titlebar.k-header {
    height: auto; margin-top: -58px; padding: 18px 56px 18px 22px !important; background: #fff !important; border-bottom: 1px solid var(--divider) !important; color: var(--navy) !important;
}
.k-window .k-window-title { font-size: 18px !important; font-weight: 800 !important; color: var(--navy) !important; }
.k-window .k-window-actions { top: 14px; right: 14px; }
.k-window .k-window-action { width: 32px; height: 32px; border-radius: 50%; background: var(--bg); color: var(--text-2) !important; }
.k-window .k-window-action .k-icon { color: var(--text-2); }
.k-window .k-edit-form-container { width: 100% !important; padding: 0; }
.k-window .card { border: 1px solid var(--border); border-radius: 16px; box-shadow: none; margin: 0; }
.k-window .card-header.bg-primary, .k-window .card-header { background: #fff !important; color: var(--navy) !important; border-bottom: 1px solid var(--divider); padding: 14px 18px; font-weight: 800; }
.k-window .card-header .card-title, .k-window .card-header h6 { color: var(--navy) !important; font-size: 15px; font-weight: 800; margin: 0; }
.k-window .control-label, .k-window .k-edit-label label { font-size: 12px; font-weight: 700; color: var(--text-2); text-align: left; }
.k-window .k-edit-buttons {
    display: flex; justify-content: flex-end; gap: 10px; margin: 0; padding: 14px 22px !important; border-top: 1px solid var(--divider); background: #fff !important;
}
.k-window .k-edit-buttons .k-button {
    margin: 0; padding: 11px 20px; border: 0 !important; border-radius: var(--r-input) !important; box-shadow: none !important;
    font-family: var(--font); font-size: 14px; font-weight: 700; text-transform: none; letter-spacing: 0;
    background: var(--bg) !important; color: var(--navy) !important;
}
.k-window .k-edit-buttons .k-button.k-grid-update, .k-window .k-edit-buttons .k-button.k-primary { background: var(--navy) !important; color: #fff !important; box-shadow: var(--sh-navy) !important; }
.k-window .k-edit-buttons .k-button::before, .k-window .k-edit-buttons .k-button .k-icon { display: none !important; }
.k-window .k-edit-buttons .k-button.fa::before { content: none !important; }
.k-window .k-tooltip-validation, .k-window .k-widget.k-tooltip-validation {
    border: 0; border-radius: 8px; background: var(--status-cancelled-bg); color: var(--status-cancelled-fg); font-size: 11.5px; font-weight: 600; box-shadow: none;
}
.k-overlay { background: var(--navy-deep) !important; opacity: .55 !important; }

/* ---------- Date range picker (dashboard) ---------- */
.daterangepicker { border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--sh-float); font-family: var(--font); padding: 6px; }
.daterangepicker::before, .daterangepicker::after { display: none; }
.daterangepicker .calendar-table th, .daterangepicker .calendar-table td { font-size: 12.5px; border-radius: 9px; }
.daterangepicker td.in-range { background: var(--navy-tint); color: var(--navy); }
.daterangepicker td.active, .daterangepicker td.active:hover, .daterangepicker td.start-date, .daterangepicker td.end-date { background: var(--navy) !important; color: #fff !important; }
.daterangepicker .drp-buttons { border-top: 1px solid var(--divider); padding: 10px; }
.daterangepicker .drp-buttons .btn { padding: 8px 16px; border-radius: 10px; font-family: var(--font); font-size: 13px; font-weight: 700; border: 0; }
.daterangepicker .drp-buttons .applyBtn { background: var(--navy); color: #fff; }
.daterangepicker .drp-buttons .cancelBtn { background: var(--bg); color: var(--navy); }
.daterangepicker .drp-selected { font-size: 12px; font-weight: 700; color: var(--text-2); }

/* ---------- DataTables search + length (all admin pages) ---------- */
body.mp-admin .dataTables_wrapper .dataTables_filter label,
body.mp-admin .dataTables_wrapper .dataTables_length label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; font-weight: 700; color: var(--muted); }
body.mp-admin .dataTables_wrapper .dataTables_filter input { margin-left: 0; }

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 640px) {
    /* portal header: logo + cart on one row, nav links below */
    .mp-header__inner { padding: 10px 16px; gap: 8px 12px; }
    .mp-brand__logo { height: 32px; }
    .mp-brand__label { display: none; }
    .mp-nav { width: 100%; justify-content: flex-start; gap: 2px; }
    .mp-nav__link { padding: 7px 11px; font-size: 12.5px; }
    .mp-cart-pill { margin-left: auto; padding: 6px 6px 6px 12px; font-size: 13px; }
    .mp-cart-pill__count { min-width: 22px; height: 22px; font-size: 11px; }

    /* ordering band */
    .mp-order-band__inner { padding: 18px 16px 16px; }
    body.mp-portal .mp-order-band__title h1 { font-size: 24px; }
    a.mp-order-band__back { width: 38px; height: 38px; }
    .mp-order-search { flex: 1 1 100%; }
    /* step pills: one swipeable row instead of wrapping */
    body.mp-portal .mp-wizard .nav-tabs.mp-steps {
        flex-wrap: nowrap; overflow-x: auto; margin: 16px -16px 0; padding: 0 16px 4px; scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    body.mp-portal .mp-wizard .nav-tabs.mp-steps::-webkit-scrollbar { display: none; }
    body.mp-portal .mp-wizard .nav-tabs.mp-steps > li { flex: none; }

    /* cards and panels */
    .mp-order-layout { padding: 16px 16px 56px; gap: 18px; }
    .mp-order-info { padding: 0 16px; margin-top: 14px; }
    body.mp-portal .mp-wizard h4.mp-step-title { font-size: 20px; }
    body.mp-portal .mp-products .divSquare::before,
    body.mp-portal .mp-products .divSquare > .product-image-container > img.product-image { aspect-ratio: 16 / 10; }
    .mp-cart__total, .mp-summary__total { font-size: 32px; }
    .mp-card { padding: 18px 16px; border-radius: 18px; }
    .mp-step-nav .mp-btn { padding: 11px 14px; font-size: 13px; }

    /* home */
    .mp-home-hero__inner { padding: 36px 16px 132px; }
    body.mp-portal .mp-home.page-container { padding: 0 16px 56px; }
    .mp-cat-grid { grid-template-columns: 1fr; gap: 16px; }

    /* options dialog: use the full screen width */
    body.mp-portal .mp-opt-modal.in { padding: 8px; }
    body.mp-portal .mp-opt-modal .modal-content { max-height: 94vh; }
    .mp-opt-thumb { width: 60px; height: 60px; }
    body.mp-portal .mp-opt-grid.card-body { grid-template-columns: 1fr; }

    /* confirmation */
    .mp-confirm { padding: 24px 16px 56px; }
    .mp-confirm__actions .mp-btn { flex: 1 1 100%; }

    /* admin top bar: compact "Public store" pill */
    .mp-public-pill { padding: 8px 10px; font-size: 0; gap: 0; }
    .mp-public-pill svg { width: 14px; height: 14px; }
    .mp-crumbs { font-size: 12px; }
    body.mp-admin .mp-page-title { font-size: 26px; }
    .mp-page-head__actions { width: 100%; }
    .mp-page-head__actions .mp-btn { flex: 1 1 auto; }
    .mp-stage { flex: 1 1 100%; padding: 12px 14px; }
    .mp-toolbar { padding: 12px; }
    .mp-search { max-width: none; }
}

/* Admin grids: scroll sideways on narrow screens instead of crushing columns */
@media (max-width: 900px) {
    body.mp-admin .mp-list > .card-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    body.mp-admin .mp-list .k-grid { min-width: 760px; }
    body.mp-admin .mp-flow .mp-list .k-grid { min-width: 560px; }
    body.mp-admin .mp-list #OrderGrid.k-grid { min-width: 1000px; }
    body.mp-admin .mp-list .k-grid td { white-space: nowrap; }
}
/* SweetAlert2 (older markup: .line / .placeholder / .fix) */
.swal2-modal .swal2-icon.swal2-success { border-color: rgba(242,101,34,.25) !important; }
.swal2-modal .swal2-icon.swal2-success .line { background-color: var(--orange) !important; }
.swal2-modal .swal2-icon.swal2-success .placeholder { border-color: rgba(242,101,34,.25) !important; }
.swal2-modal .swal2-icon.swal2-success .fix, .swal2-modal .swal2-icon.swal2-success::before, .swal2-modal .swal2-icon.swal2-success::after { background-color: #fff !important; }
/* Kendo window: section headers inside editor templates */
.k-window .card-header *, .k-window .card-header a { color: var(--navy) !important; }
.k-window .card { overflow: hidden; }
.k-window .card-header { border-radius: 16px 16px 0 0; }
.k-widget.k-window { max-width: calc(100vw - 16px); }
.k-window .k-window-content { padding: 18px 22px; }