/* ==========================================================================
   WMS Visual Facelift — design tokens + shared components (AB#178393)
   Loaded on top of the existing stylesheets. Tokens are global custom
   properties (harmless on their own); every component rule is scoped
   under .wms-facelift so it only applies to pages that opt in, never to
   unrelated legacy pages that happen to share the same master page.
   ========================================================================== */

:root {
    /* Primary indigo / blue / cyan */
    --wms-indigo-700: #4C3DE0;
    --wms-indigo-600: #5B4FE8;
    --wms-indigo-500: #6A5CF9;
    --wms-blue-500: #4E7FE0;
    --wms-blue-400: #3E6FE0;
    --wms-cyan-400: #3FC6D9;

    /* Amber (Delayed) */
    --wms-amber-500: #F0A73B;
    --wms-amber-600: #E8734B;
    --wms-amber-700: #D85A6A;
    --wms-amber-text: #8A6D1F;
    --wms-amber-bg: #FFF8EC;
    --wms-amber-border: #F6E3B8;

    /* Navy (On Hold) */
    --wms-navy-700: #35407A;
    --wms-navy-bg: #EEF1FE;
    --wms-navy-border: #D7DEF7;

    /* Success green */
    --wms-green-600: #1FA971;
    --wms-green-bg: #DFFBEA;

    /* Ink / text */
    --wms-ink-900: #211F3D;
    --wms-ink-800: #2B2B45;
    --wms-ink-700: #4A4A66;
    --wms-ink-600: #666681;
    --wms-ink-550: #666681;
    --wms-ink-500: #666681;
    --wms-ink-450: #A6A6C0;
    --wms-ink-400: #B0AFCB;
    --wms-placeholder: #666681;

    /* Borders / surfaces */
    --wms-border-100: #EFEDFB;
    --wms-border-200: #E4E3F3;
    --wms-border-300: #F0EFF9;
    --wms-surface-50: #FAFAFE;
    --wms-surface-100: #FBFBFF;
    --wms-page-bg: #F5F6FB;

    /* Footer */
    --wms-footer-bg: #201E3A;
    --wms-footer-text: #B3B3D1;

    /* Gradients */
    --wms-gradient-hero: linear-gradient(150deg, #4C3DE0 0%, #5B4FE8 30%, #3E6FE0 65%, #3FC6D9 100%);
    --wms-gradient-banner: linear-gradient(150deg, #5B4FE8, #3E6FE0 60%, #3FC6D9);
    --wms-gradient-banner-delayed: linear-gradient(150deg, #F0A73B, #E8734B 70%, #D85A6A);
    /* AB#179643: end stop darkened from #4E7FE0 (3.86:1 with white) to #3F6AD0 (5.02:1). */
    --wms-gradient-button: linear-gradient(135deg, #6A5CF9, #3F6AD0);
    --wms-gradient-footer-border: linear-gradient(90deg, #6A5CF9, #4FC3D9);

    /* Radii */
    --wms-radius-sm: 10px;
    --wms-radius-md: 12px;
    --wms-radius-lg: 16px;
    --wms-radius-xl: 18px;
    --wms-radius-2xl: 22px;
    --wms-radius-3xl: 24px;
    --wms-radius-icon: 13px;

    /* Spacing */
    --wms-pad-desktop: 32px;
    --wms-pad-mobile: 22px;
    --wms-maxw-default: 1120px;
    --wms-maxw-tracking: 1000px;
    /* BDODetail/Main.aspx is a two-column (map + contact) layout, so it needs
       more room than the single-column tracking panels in the mockup. */
    --wms-maxw-tracking-page: 1180px;
    --wms-maxw-faq: 760px;

    /* Shadows */
    --wms-shadow-flat: 0 6px 20px rgba(30,20,90,0.05);
    --wms-shadow-elevated: 0 20px 40px rgba(30,20,90,0.12);
    --wms-shadow-hero-card: 0 30px 60px rgba(20,15,80,0.35);
    --wms-shadow-btn-primary: 0 10px 20px rgba(90,80,230,0.3);
    --wms-shadow-btn-primary-hover: 0 14px 26px rgba(90,80,230,0.4);
    --wms-shadow-btn-primary-lg: 0 14px 24px rgba(90,80,230,0.4);
    --wms-shadow-btn-primary-lg-hover: 0 18px 30px rgba(90,80,230,0.5);
    --wms-shadow-banner: 0 20px 40px rgba(70,60,200,0.28);
    --wms-shadow-icon-tile: 0 8px 16px rgba(90,80,230,0.25);
    --wms-shadow-card-hover: 0 16px 32px rgba(90,80,230,0.12);
    --wms-shadow-secondary-hover: 0 8px 16px rgba(30,20,90,0.08);
    --wms-shadow-contact-hover: 0 12px 24px rgba(90,80,230,0.1);
    --wms-shadow-driver-avatar: 0 6px 14px rgba(90,80,230,0.3);
    --wms-shadow-pin-origin: 0 10px 20px rgba(30,20,90,0.3);
    --wms-shadow-pin-dest: 0 10px 20px rgba(90,80,230,0.35);

    /* Typography */
    --wms-font: Arial, Helvetica, sans-serif;
}

/* ==========================================================================
   Base layer
   Converted views no longer load the legacy presentational sheets
   (Site.css / main.css and its six device-width clones / default.css) --
   WheresMySuitcaseMVC.Extensions.Facelift decides that per view and the
   master pages honour it. So this file has to supply the reset, the page
   chrome layout and the legacy class names the server helpers still emit
   (.button, .textBox, .homepage_infoinput, #homepage_submitdiv ...).
   Element ids and names are untouched -- code-behind and Scripts/ bind to
   them -- only their appearance changes.
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
}
html {
    -webkit-text-size-adjust: 100%;
}
body {
    margin: 0;
    background: var(--wms-page-bg);
    color: var(--wms-ink-800);
    font-family: var(--wms-font);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
img {
    max-width: 100%;
    border: 0;
}

/* Page chrome wrappers inherited from the master pages. Site.css used to
   give #header a fixed 75%/1005px shell and #main a decorative plane
   background; the new design is full-bleed and flows in normal document
   order, with the footer pinned to the bottom on short pages. */
body.wms-facelift-body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
body.wms-facelift-body #header,
body.wms-facelift-body .container {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 0;
    background: transparent;
    height: auto !important;
}
body.wms-facelift-body #main {
    flex: 1 0 auto;
    width: 100%;
    max-width: none;
    min-height: 0;
    margin: 0;
    padding: 0;
    background: var(--wms-page-bg);
    background-image: none;
}
/* Neutralize the legacy fixed-width/boxed wrappers that Main.Master renders
   around the content placeholder. Materialize modals are rendered as direct
   children of #main too, so they must be excluded -- otherwise this rule
   strips their width (55%), background and radius and they render as a
   transparent full-bleed band instead of a centered dialog. */
body.wms-facelift-body #main > div:not(.modal):not(.modal-overlay),
body.wms-facelift-body #main > div:not(.modal):not(.modal-overlay) > div:not(.modal):not(.modal-overlay) {
    width: 100%;
    max-width: none;
    border-radius: 0;
    background: transparent;
}
.wms-facelift-page {
    width: 100%;
    max-width: none;
    padding: 0;
    background: var(--wms-page-bg);
}
/* Main.Master renders an always-present #topmenu2 strip whose only job was
   to host a page header that the redesigned pages supply themselves; left
   alone it shows up as an empty white band under the sticky header. */
body.wms-facelift-body #topmenu2:empty,
body.wms-facelift-body #topmenu2 > h1:empty {
    display: none;
}
/* Where the converted view renders its own .wms-hero, the legacy #topmenu2
   page-title strip is a straight duplicate of the hero <h1> (this is what
   printed "Contact Us" twice). Hide the legacy title only in that case, so
   any page still relying on #topmenu2 for its heading keeps it. */
body.wms-facelift-body:has(.wms-hero) #topmenu2 > h1 {
    display: none;
}
body.wms-facelift-body #topmenu2 {
    padding: 0;
    background: transparent;
}
body.wms-facelift-body #topmenu2 > h1 {
    margin: 0;
    float: none;
}

/* ---------- scope reset ---------- */
.wms-facelift, .wms-facelift * {
    box-sizing: border-box;
}
.wms-facelift {
    font-family: var(--wms-font);
}
.wms-facelift h1, .wms-facelift h2, .wms-facelift h3 {
    font-family: var(--wms-font);
    margin: 0;
}
.wms-facelift p {
    margin: 0;
}
.wms-facelift a {
    color: var(--wms-indigo-600);
    text-decoration: none;
}
.wms-facelift a:hover {
    color: var(--wms-indigo-700);
    text-decoration: underline;
}
/* The generic link colour above is a class+type selector, so it outranks
   the single-class .wms-btn--* rules further down and would repaint every
   anchor-based button indigo-on-indigo. Re-assert the button colours at
   matching specificity. */
.wms-facelift a.wms-btn--primary,
.wms-facelift a.wms-btn--primary:hover {
    color: #fff;
    text-decoration: none;
}
.wms-facelift a.wms-btn--secondary,
.wms-facelift a.wms-btn--secondary:hover {
    color: var(--wms-ink-800);
    text-decoration: none;
}
/* Materialize (still loaded on Master.Master/Tracking.Master because its JS
   components depend on it) sets global tag-level defaults --
   nav{background-color:#377fbd;height:56px;...} and
   button:focus{background-color:#2ab7a9} -- that leak into any bare
   <nav>/<button> we add. This class-scoped selector outranks those bare
   tag/tag+pseudo-class rules regardless of stylesheet order, so any new
   <button> under .wms-facelift is covered without a per-component override. */
.wms-facelift nav {
    background: transparent;
    height: auto;
    line-height: normal;
    box-shadow: none;
}
.wms-facelift button:focus, .wms-facelift button:active {
    outline: none;
}

/* ---------- header / nav (site-wide chrome, not scope-gated) ---------- */
.wms-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,0.97);
    border-bottom: 1px solid rgba(90,80,230,0.1);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 14px 32px;
    box-shadow: 0 2px 20px rgba(30,20,90,0.04);
    font-family: var(--wms-font);
}
.wms-header__logo {
    height: 34px;
    display: block;
}
.wms-header__nav {
    /* Reset Materialize's global `nav{...}` tag defaults (blue background,
       fixed height/position, box-shadow), AND every one of the ~8 legacy
       responsive stylesheets (mainmb.css, mainipad.css, etc.), which each
       carry their own device-width-scoped `nav{height:40px!important;
       line-height:50px!important;vertical-align:middle!important}` --
       together those cover every possible viewport width, so only
       `!important` reliably wins here regardless of specificity. */
    position: static !important;
    background-color: transparent !important;
    box-shadow: none !important;
    height: auto !important;
    line-height: normal !important;
    vertical-align: baseline !important;
    width: auto !important;
    color: inherit !important;
    display: flex !important;
    align-items: center;
    margin-left: auto;
    gap: 32px;
}
/* AB#179643: the header carries .wms-facelift, so `.wms-facelift a` (indigo) outranked
   this rule; the extra class restores the intended dark ink. */
.wms-facelift .wms-header__link,
.wms-header__link {
    color: #3A3A55;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.01em;
}
.wms-header__link:hover {
    color: var(--wms-indigo-600);
    text-decoration: none;
}
.wms-header #lang-container {
    margin-left: 20px;
    margin-right: 0;
}
.wms-header #lang {
    width: auto;
    height: auto;
    padding: 8px;
    border: 1px solid var(--wms-border-300) !important;
    border-radius: 6px;
    background: #fff;
    color: var(--wms-ink-600);
    font: inherit;
    font-weight: 700;
    appearance: auto !important;
    -webkit-appearance: auto !important;
}
.wms-header__menu-btn {
    display: none;
    background: none;
    border: none;
    border-radius: 0;
    padding: 6px;
    cursor: pointer;
}
.wms-header__menu-btn:focus, .wms-header__menu-btn:active {
    /* Materialize sets a global button:focus{background-color:#2ab7a9} -- override it. */
    outline: none;
    background: none;
}
.wms-header__menu-btn img {
    width: 24px;
    height: 24px;
}
.wms-mobile-nav {
    /* Nested inside .wms-header, which is display:flex; flex-wrap:wrap.
       flex-basis:100% forces this item onto its own new row when shown,
       flowing directly below the logo/hamburger row in normal document
       flow -- avoids the sizing/positioning edge cases of taking a
       dropdown out of flow (fixed/absolute) inside a flex header nested in
       legacy fixed-height wrapper divs on some master pages.
       !important here for the same reason as .wms-header__nav above: the
       ~8 legacy responsive stylesheets each set a device-width-scoped
       `nav{height:40px!important;...}` that otherwise squashes this
       element (and did, silently, for hours of debugging -- do not remove
       these !important overrides without re-testing every breakpoint). */
    flex-basis: 100%;
    order: 10;
    height: auto !important;
    line-height: normal !important;
    vertical-align: baseline !important;
    width: auto !important;
    color: inherit !important;
    display: none;
    background: #fff;
    border-top: 1px solid var(--wms-border-100);
    margin-top: 10px;
}
.wms-mobile-nav.is-open {
    display: block;
}
.wms-mobile-nav__link {
    display: block;
    padding: 14px 24px;
    color: #3A3A55;
    font-weight: 700;
    font-size: 15px;
    border-top: 1px solid var(--wms-border-300);
}
.wms-mobile-nav__link:hover {
    background: #FAF9FF;
    text-decoration: none;
}
@media (max-width: 760px) {
    .wms-header { padding: 14px 16px; }
    .wms-header__logo { max-width: calc(100vw - 160px); height: auto; max-height: 34px; }
    .wms-header__nav { display: none !important; }
    .wms-header__menu-btn { display: block; }
    .wms-header #lang-container { margin-left: auto; margin-right: 12px; }
}

/* ---------- footer (site-wide chrome) ---------- */
.wms-footer {
    margin-top: auto;
    background: var(--wms-footer-bg);
    padding: 32px 24px;
    color: var(--wms-footer-text);
    border-top: 2px solid;
    border-image: var(--wms-gradient-footer-border) 1;
    font-family: var(--wms-font);
}
.wms-footer__inner {
    max-width: var(--wms-maxw-default);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}
.wms-footer__copy {
    font-size: 13px;
}
.wms-footer__links {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.wms-footer__links a {
    color: var(--wms-footer-text);
    font-size: 13px;
}

/* ---------- hero (home + faq) ---------- */
.wms-hero {
    position: relative;
    overflow: hidden;
    background: var(--wms-gradient-hero);
    padding: 80px 40px 90px;
}
.wms-hero--faq {
    background: var(--wms-gradient-banner);
    padding: 48px 24px 60px;
    text-align: center;
}
.wms-hero__dotgrid {
    position: absolute;
    inset: 0;
    opacity: 0.5;
    background-image: radial-gradient(rgba(255,255,255,0.14) 1px, transparent 1px);
    background-size: 26px 26px;
}
.wms-hero__glow-a {
    position: absolute;
    right: -100px;
    top: -120px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.16), transparent 70%);
}
.wms-hero__glow-b {
    position: absolute;
    left: -80px;
    bottom: -140px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(80,230,220,0.22), transparent 70%);
}
.wms-hero__inner {
    position: relative;
    max-width: var(--wms-maxw-default);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 40px;
}
.wms-hero__copy {
    flex: 1;
}
.wms-hero__title {
    color: #fff;
    font-size: 46px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-weight: 700;
    margin: 0 0 14px 0;
}
.wms-hero--faq .wms-hero__title {
    position: relative;
    margin: 0 0 10px 0;
}
.wms-hero__sub {
    color: #fff;
    /* AB#179644: 400 was too thin on the gradient. Arial has no 500 face, so 600
       is the first weight that renders heavier. */
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    max-width: 480px;
}
.wms-hero--faq .wms-hero__sub {
    position: relative;
    max-width: none;
    font-size: 15px;
}
@media (max-width: 760px) {
    .wms-hero { padding: 48px 20px 40px; }
    .wms-hero__inner { flex-direction: column; }
    .wms-hero__title { font-size: 30px; }
    .wms-hero__sub { font-size: 16px; }
}

/* ---------- lookup card (home) ---------- */
.wms-lookup {
    flex: 1;
    max-width: 460px;
    width: 100%;
}
.wms-lookup-card {
    background: rgba(255,255,255,0.98);
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: var(--wms-radius-3xl);
    padding: var(--wms-pad-desktop);
    box-shadow: var(--wms-shadow-hero-card);
}
@media (max-width: 760px) {
    .wms-lookup-card { padding: var(--wms-pad-mobile); }
}
.wms-lookup-card__title {
    margin: 0 0 4px 0;
    color: var(--wms-ink-900);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.wms-lookup-card__helper {
    margin: 0 0 20px 0;
    color: var(--wms-ink-550);
    font-size: 13px;
    font-weight: 400;
}
.wms-lookup-card label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--wms-ink-700);
    margin-bottom: 6px;
}
.wms-lookup-card .wms-field {
    margin-bottom: 16px;
}
.wms-lookup-card__what-is {
    text-align: center;
    margin-top: 14px;
    font-size: 13px;
}
.wms-lookup-card__what-is a {
    font-weight: 700;
}

/* Re-skin the existing .textBox / .button / .disabledButton classes used
   by Html.TextBox / the submit input. The legacy sheets that used to size
   these (Site.css: .textBox{width:600px}, .button{width:180px}) are no
   longer loaded on converted views, so no !important is needed. */
.wms-facelift .wms-field {
    width: 100%;
}
.wms-facelift input.textBox,
.wms-facelift .wms-lookup-card input[type="text"],
.wms-facelift #lastName,
.wms-facelift #referenceNumber {
    /* Materialize sets box-sizing:content-box on text inputs, which the
       generic `.wms-facelift *` reset loses to. Left alone the horizontal
       padding is added ON TOP of width:100%, so the field overhangs the
       lookup card's right padding by exactly its padding-x. */
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 48px;
    border-radius: var(--wms-radius-md);
    border: 1.5px solid var(--wms-border-200);
    padding: 0 16px;
    font-family: var(--wms-font);
    font-size: 15px;
    background: var(--wms-surface-50);
    color: var(--wms-ink-800);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.wms-facelift input.textBox:focus,
.wms-facelift .wms-lookup-card input[type="text"]:focus,
.wms-facelift #lastName:focus,
.wms-facelift #referenceNumber:focus {
    border-color: var(--wms-indigo-500);
    box-shadow: 0 0 0 4px rgba(106,92,249,0.15);
    outline: none;
}
.wms-facelift ::-webkit-input-placeholder,
body.wms-facelift-body .modal ::-webkit-input-placeholder {
    color: var(--wms-placeholder);
    opacity: 1;
}
.wms-facelift :-ms-input-placeholder,
body.wms-facelift-body .modal :-ms-input-placeholder {
    color: #666681;
    opacity: 1;
}
.wms-facelift ::-ms-input-placeholder,
body.wms-facelift-body .modal ::-ms-input-placeholder {
    color: #666681;
    opacity: 1;
}
.wms-facelift ::placeholder,
body.wms-facelift-body .modal ::placeholder {
    color: var(--wms-placeholder);
    opacity: 1;
}
.wms-facelift .button,
.wms-facelift input.button,
.wms-facelift .wms-btn-primary {
    width: auto;
    height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: var(--wms-radius-sm);
    background: var(--wms-gradient-button);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    padding: 12px 20px;
    box-shadow: var(--wms-shadow-btn-primary);
    transition: transform 0.15s, box-shadow 0.15s;
}
.wms-facelift .button:hover,
.wms-facelift input.button:hover,
.wms-facelift .wms-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--wms-shadow-btn-primary-hover);
    color: #fff;
    text-decoration: none;
}
.wms-facelift .disabledButton {
    width: auto;
    height: auto;
    border: none;
    border-radius: var(--wms-radius-sm);
    background: var(--wms-border-200);
    color: var(--wms-ink-400);
    font-size: 14px;
    font-weight: 700;
    cursor: not-allowed;
    padding: 12px 20px;
}
.wms-lookup-card__submit,
.wms-lookup-card #homepage_submitdiv input[type="submit"],
.wms-lookup-card #homepage_submitdiv input.button {
    display: block;
    width: 100%;
    height: 52px;
    padding: 0;
    border: none;
    border-radius: var(--wms-radius-md);
    background: var(--wms-gradient-button);
    color: #fff;
    font-family: var(--wms-font);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--wms-shadow-btn-primary-lg);
    transition: transform 0.15s, box-shadow 0.15s;
}
.wms-lookup-card__submit:hover,
.wms-lookup-card #homepage_submitdiv input[type="submit"]:hover,
.wms-lookup-card #homepage_submitdiv input.button:hover {
    transform: translateY(-2px);
    box-shadow: var(--wms-shadow-btn-primary-lg-hover);
}
.wms-lookup-card #homepage_submitdiv {
    width: 100%;
    margin: 4px 0 0 0;
    height: auto;
}
/* Server-side validation messages surfaced through TempData["Error"]. */
.wms-facelift .errorContainer {
    margin: 0 0 16px 0;
    padding: 12px 14px;
    border-radius: var(--wms-radius-sm);
    background: var(--wms-amber-bg);
    border: 1px solid var(--wms-amber-border);
    color: var(--wms-amber-text);
    font-size: 13px;
    font-weight: 700;
}

/* ---------- marquee (home) ---------- */
.wms-marquee-section {
    background: #fff;
    padding: 36px 24px 8px;
    text-align: center;
}
.wms-marquee-eyebrow {
    color: var(--wms-ink-500);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: none;
    margin-bottom: 22px;
}
.wms-marquee {
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.wms-marquee__track {
    display: flex;
    align-items: center;
    gap: 64px;
    width: max-content;
    animation: wmsMarquee 22s linear infinite;
}
.wms-marquee__track img {
    height: 46px;
    max-width: 150px;
    object-fit: contain;
}
@keyframes wmsMarquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ---------- service advisory strip (tracking) ---------- */
/* LookupD advisory messages, rendered above the site header through Master.Master's
   AdvisoryContent slot (mockup "A - Top strip"). The legacy .alertContainer rules live
   in main.css/Site.css, which the facelift does not load. #main scoping outranks the
   facelift rule that makes #main's child divs full-width and transparent. */
body.wms-facelift-body #main > div.alertContainer.wms-advisory {
    margin: 0;
    padding: 12px 16px;
    background: var(--wms-amber-border);
    color: var(--wms-ink-900);
    text-align: center;
}
body.wms-facelift-body #main > div.alertContainer.wms-advisory > div.wms-advisory__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: left;
}
body.wms-facelift-body .wms-advisory__icon {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--wms-amber-text);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
}
body.wms-facelift-body .wms-advisory__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
}
body.wms-facelift-body .wms-advisory__text strong {
    font-weight: 700;
}
body.wms-facelift-body .wms-advisory__item + .wms-advisory__item::before {
    content: "\00B7";
    margin: 0 8px;
}
body.wms-facelift-body .wms-advisory__item a {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
}
@media (max-width: 600px) {
    body.wms-facelift-body #main > div.alertContainer.wms-advisory > div.wms-advisory__inner {
        align-items: flex-start;
    }
    body.wms-facelift-body .wms-advisory__text {
        font-size: 13px;
    }
}

/* ---------- value-prop cards (home) ---------- */
.wms-value-cards {
    max-width: var(--wms-maxw-default);
    margin: 0 auto;
    padding: 52px 24px 64px;
    display: flex;
    gap: 24px;
}
@media (max-width: 760px) {
    .wms-value-cards { flex-direction: column; }
}
.wms-value-card {
    flex: 1;
    background: var(--wms-surface-100);
    border: 1px solid var(--wms-border-100);
    border-radius: var(--wms-radius-xl);
    padding: 28px;
    transition: transform 0.2s, box-shadow 0.2s;
}
.wms-value-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--wms-shadow-card-hover);
    border-color: var(--wms-border-200);
}
.wms-icon-tile {
    width: 46px;
    height: 46px;
    border-radius: var(--wms-radius-icon);
    background: var(--wms-gradient-button);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    box-shadow: var(--wms-shadow-icon-tile);
}
.wms-icon-tile img {
    width: 22px;
    height: 22px;
    filter: brightness(10);
}

/* WMS Facelift (AB#178393) -- small inline icons for form labels, detail rows,
   and modal headings. Reuses the existing brand-purple icon set already shipped
   under images/Icon so icon style stays consistent sitewide. */
.wms-label-icon {
    width: 15px;
    height: 15px;
    margin-right: 6px;
    vertical-align: -2px;
    display: inline-block;
    flex-shrink: 0;
}
.wms-row-icon {
    width: 17px;
    height: 17px;
    margin-right: 8px;
    vertical-align: -3px;
    display: inline-block;
    flex-shrink: 0;
    opacity: 0.85;
}
.wms-heading-icon {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    vertical-align: -4px;
    display: inline-block;
}
.wms-value-card__title {
    margin: 0 0 8px 0;
    color: var(--wms-ink-800);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.wms-value-card__body {
    margin: 0;
    color: var(--wms-ink-700); /* AB#179643: was ink-600 (5.4:1), read as faint at 14px */
    font-size: 14px;
    line-height: 1.5;
}

/* ---------- tracking banner ---------- */
.wms-tracking-wrap {
    background: var(--wms-page-bg);
    padding: 28px 24px 40px;
}
.wms-tracking-inner {
    max-width: var(--wms-maxw-tracking);
    margin: 0 auto;
}
.wms-banner {
    position: relative;
    overflow: hidden;
    background: var(--wms-gradient-banner);
    border-radius: var(--wms-radius-2xl);
    padding: 28px;
    color: #fff;
    margin-bottom: 18px;
    box-shadow: var(--wms-shadow-banner);
}
.wms-banner--delayed {
    background: var(--wms-gradient-banner-delayed);
}
.wms-banner__glow {
    position: absolute;
    right: -40px;
    top: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.14), transparent 70%);
}
.wms-banner__row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.wms-banner__tag {
    font-size: 13px;
    font-weight: 700;
    /* AB#179647: full-strength white; the 0.85 opacity dropped it below 4.5:1 on the gradient. */
    text-transform: none;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
}
.wms-banner__title {
    font-size: 27px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.wms-banner__sub {
    font-size: 14px;
    /* AB#179647: opacity removed, same reason as .wms-banner__tag. */
    margin-top: 4px;
}
/* AB#179927: problem states (Attempted Delivery, Cancelled, ...) have no subtitle. */
.wms-banner__sub:empty {
    display: none;
}
.wms-banner__pill {
    /* AB#179647: the pill sits on the cyan end of the gradient, where white text is ~2:1.
       A dark translucent fill keeps the glass look and lifts white text to ~5.3:1. */
    background: rgba(33,31,61,0.5);
    border-radius: 14px;
    padding: 12px 18px;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.3);
}
.wms-banner__pill-label {
    font-size: 12px; /* AB#179647: was 11px at 0.8 opacity */
    text-transform: none;
    font-weight: 700;
}
.wms-banner__pill-value {
    font-size: 16px;
    font-weight: 700;
}

/* ---------- generic card ---------- */
.wms-card {
    background: #fff;
    border: 1px solid var(--wms-border-100);
    border-radius: var(--wms-radius-xl);
    padding: var(--wms-pad-desktop);
    margin-bottom: 18px;
    box-shadow: var(--wms-shadow-flat);
}
@media (max-width: 760px) {
    .wms-card { padding: var(--wms-pad-mobile); }
}
.wms-card__eyebrow-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.wms-card__eyebrow {
    font-size: 12px;
    font-weight: 700;
    color: var(--wms-ink-500);
    text-transform: none;
    letter-spacing: 0.06em;
}
.wms-card__status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
}
.wms-card__status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
}
.wms-card__status--live { color: var(--wms-green-600); }
.wms-card__status--live .wms-card__status-dot { background: var(--wms-green-600); }
.wms-card__status--muted { color: var(--wms-ink-500); }
.wms-card__status--muted .wms-card__status-dot { background: var(--wms-ink-400); }

/* ---------- stepper ---------- */
.wms-stepper {
    display: flex;
    align-items: center;
    gap: 0;
}
@media (max-width: 760px) {
    .wms-stepper { flex-direction: column; align-items: flex-start; }
}
.wms-step {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.wms-step--grow { flex: 1 1 auto; }
.wms-step--fixed { flex: 0 0 auto; }
@media (max-width: 760px) {
    .wms-step { width: 100%; padding: 6px 0; }
}
.wms-step__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
@media (max-width: 760px) {
    .wms-step__item { flex-direction: row; }
}
.wms-step__badge {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}
.wms-step__badge--done { background: var(--wms-green-bg); color: var(--wms-green-600); }
.wms-step__badge--current { background: var(--wms-indigo-500); color: #fff; }
.wms-step__badge--upcoming { background: var(--wms-border-300); color: var(--wms-ink-600); } /* AB#179647: number was ink-400 (~1.9:1) */
.wms-step__badge--delayed { background: var(--wms-amber-border); color: var(--wms-amber-text); }
.wms-step__badge--hold { background: var(--wms-navy-border); color: var(--wms-navy-700); }
.wms-step__label-wrap {
    text-align: center;
    margin-top: 6px;
}
@media (max-width: 760px) {
    .wms-step__label-wrap { text-align: left; margin-top: 0; }
}
.wms-step__label {
    font-size: 14px; /* AB#179647: was 13px */
    font-weight: 700;
    white-space: nowrap;
}
.wms-step__time {
    /* AB#179647: was 11px ink-450 (#A6A6C0, ~2.4:1); ink-600 is 5.5:1 on white. */
    font-size: 12px;
    font-weight: 600;
    color: var(--wms-ink-600);
    white-space: nowrap;
}
.wms-connector {
    flex: 1;
    height: 3px;
    margin: 0 10px;
    border-radius: 2px;
    background: var(--wms-border-300);
}
.wms-connector--done {
    background: var(--wms-green-600);
}
@media (max-width: 760px) {
    .wms-connector { display: none; }
}

/* ---------- state cards: map / photo / notices ---------- */
.wms-map-box {
    width: 100%;
    height: 320px;
    border-radius: var(--wms-radius-md);
    overflow: hidden;
    position: relative;
}
@media (max-width: 760px) {
    .wms-map-box { height: 220px; }
}
.wms-map-box--static {
    background: #EEF0FB;
    background-image: radial-gradient(#D7D9F2 1.5px, transparent 1.5px);
    background-size: 22px 22px;
}
.wms-pin {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.wms-pin__marker {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wms-pin__marker img { width: 20px; height: 20px; filter: brightness(10); }
.wms-pin__marker--origin { background: var(--wms-ink-800); box-shadow: var(--wms-shadow-pin-origin); }
.wms-pin__marker--dest { background: var(--wms-gradient-button); box-shadow: var(--wms-shadow-pin-dest); }
.wms-pin__label {
    background: #fff;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--wms-ink-800);
    box-shadow: 0 4px 10px rgba(30,20,90,0.1);
    white-space: nowrap;
}
.wms-notice {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.wms-notice--delayed { background: var(--wms-amber-bg); border: 1px solid var(--wms-amber-border); }
.wms-notice--hold { background: var(--wms-navy-bg); border: 1px solid var(--wms-navy-border); }
.wms-notice__icon {
    width: 44px;
    height: 44px;
    border-radius: var(--wms-radius-icon);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: 700;
}
.wms-notice--delayed .wms-notice__icon { background: var(--wms-amber-border); color: var(--wms-amber-text); font-size: 20px; }
.wms-notice--hold .wms-notice__icon { background: var(--wms-navy-border); color: var(--wms-navy-700); font-size: 18px; }
.wms-notice__title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 4px;
}
.wms-notice--delayed .wms-notice__title, .wms-notice--delayed .wms-notice__body { color: var(--wms-amber-text); }
.wms-notice--hold .wms-notice__title, .wms-notice--hold .wms-notice__body { color: var(--wms-navy-700); }
.wms-notice__body {
    font-size: 14px;
    line-height: 1.5;
}
.wms-info-row {
    display: flex;
    align-items: center;
    gap: 14px;
}
.wms-info-row__icon {
    width: 44px;
    height: 44px;
    border-radius: var(--wms-radius-icon);
    background: #EDEBFF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.wms-info-row__body {
    font-size: 14px;
    color: var(--wms-ink-700);
    line-height: 1.5;
}

/* ---------- trip info + driver cards ---------- */
.wms-split-cards {
    display: flex;
    gap: 18px;
    margin-bottom: 18px;
}
@media (max-width: 760px) {
    .wms-split-cards { flex-direction: column; }
}
.wms-split-cards > .wms-card { margin-bottom: 0; }
.wms-trip-card { flex: 1.4; }
.wms-driver-card { flex: 1; }
.wms-timeline {
    position: relative;
    padding-left: 2px;
}
.wms-timeline__rail {
    position: absolute;
    left: 9px;
    top: 16px;
    bottom: 16px;
    width: 2px;
    background: var(--wms-border-200);
}
.wms-timeline__row {
    display: flex;
    gap: 14px;
    position: relative;
}
.wms-timeline__row + .wms-timeline__row { margin-top: 0; }
.wms-timeline__row--origin { margin-bottom: 18px; }
.wms-timeline__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-top: 4px;
    flex-shrink: 0;
}
.wms-timeline__dot--solid { background: var(--wms-ink-800); box-shadow: 0 0 0 3px #fff; }
.wms-timeline__dot--outline { background: #fff; border: 3px solid var(--wms-indigo-500); }
.wms-timeline__label { font-size: 13px; color: var(--wms-ink-500); font-weight: 700; }
.wms-timeline__value { font-size: 14px; color: var(--wms-ink-800); font-weight: 700; }
.wms-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--wms-gradient-button);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fff;
    box-shadow: var(--wms-shadow-driver-avatar);
    flex-shrink: 0;
}
.wms-driver-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.wms-driver-name { font-size: 14px; font-weight: 700; color: var(--wms-ink-800); }
.wms-driver-body { font-size: 12px; color: var(--wms-ink-500); }
.wms-driver-card__note {
    margin: 0 0 14px 0;
    font-size: 13px;
    color: var(--wms-ink-500);
    line-height: 1.5;
}
.wms-driver-card__viewmore {
    font-size: 13px;
    font-weight: 700;
}

/* ---------- action buttons row ---------- */
.wms-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.wms-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: var(--wms-radius-sm);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
    border: none;
}
.wms-btn img { width: 16px; height: 16px; }
.wms-btn--primary {
    background: var(--wms-gradient-button);
    color: #fff;
    box-shadow: var(--wms-shadow-btn-primary);
}
.wms-btn--primary img { filter: brightness(10); }
.wms-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--wms-shadow-btn-primary-hover);
    color: #fff;
    text-decoration: none;
}
.wms-btn--secondary {
    background: #fff;
    color: var(--wms-ink-800);
    border: 1.5px solid var(--wms-border-200);
}
.wms-btn--secondary:hover {
    transform: translateY(-2px);
    box-shadow: var(--wms-shadow-secondary-hover);
    border-color: #C9C4F5;
    color: var(--wms-ink-800);
    text-decoration: none;
}

/* ---------- FAQ accordion ---------- */
.wms-faq-section {
    /* No negative top margin: FAQ.aspx has a legacy conditional
       ".row.mobile" contact block between the hero and this section that
       becomes visible at narrow widths (via its own device-specific CSS
       files) -- a negative margin here would pull this section up and
       overlap that block unpredictably across breakpoints. */
    max-width: var(--wms-maxw-faq);
    margin: 24px auto 0;
    padding: 0 24px 48px;
    position: relative;
}
.wms-accordion {
    background: #fff;
    border: 1px solid var(--wms-border-100);
    border-radius: var(--wms-radius-xl);
    box-shadow: var(--wms-shadow-elevated);
    padding: 8px;
    margin-bottom: 28px;
}
.wms-accordion-row {
    border-bottom: 1px solid var(--wms-border-300);
    transition: background 0.15s;
}
.wms-accordion-row:last-child {
    border-bottom: none;
}
.wms-accordion-row:hover {
    background: #FAF9FF;
}
.wms-accordion-toggle {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-radius: 0;
    padding: 18px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    gap: 12px;
    font-family: var(--wms-font);
}
.wms-accordion-toggle:focus, .wms-accordion-toggle:active {
    /* Materialize sets a global button:focus{background-color:#2ab7a9} -- override it. */
    outline: none;
    background: none;
}
.wms-accordion-question {
    font-size: 16.5px;
    font-weight: 600;
    color: var(--wms-ink-800);
}
.wms-accordion-symbol {
    color: var(--wms-indigo-500);
    font-size: 18px;
    font-weight: 700;
    flex-shrink: 0;
}
.wms-accordion-panel {
    margin: 0;
    padding: 0 16px 18px;
    color: var(--wms-ink-600);
    font-size: 15.5px;
    line-height: 1.6;
    display: none;
}
.wms-accordion-row.is-open .wms-accordion-panel {
    display: block;
}

/* ---------- contact cards ---------- */
.wms-contact-cards {
    display: flex;
    gap: 16px;
}
@media (max-width: 760px) {
    .wms-contact-cards { flex-direction: column; }
}
.wms-contact-card {
    flex: 1;
    background: var(--wms-surface-100);
    border: 1px solid var(--wms-border-100);
    border-radius: var(--wms-radius-lg);
    padding: 22px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    transition: transform 0.2s, box-shadow 0.2s;
}
.wms-contact-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--wms-shadow-contact-hover);
}
.wms-contact-card img {
    width: 24px;
    height: 24px;
    margin-top: 2px;
}
.wms-contact-card__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--wms-ink-800);
}
.wms-contact-card__value {
    font-size: 13px;
    font-weight: 700;
}
.wms-contact-card__hours {
    font-size: 13px;
    color: var(--wms-ink-600);
    font-weight: 700;
}

/* ==========================================================================
   Conservative reskin of the EXISTING BDODetail card/button classes.
   BDODetail/Main.aspx and its state-detail partials (DeliveryInformation,
   DeliveryInformationWithDriver, BagsOnHoldInformation, BDODeliveredInformation,
   WaiveSignature, HoldBags, Tracking) contain deep, business-critical status
   branching (~15+ granular status codes). Rather than restructure that logic,
   these rules re-skin the classes those pages ALREADY render with
   (.card / .cardcontact / .cardtripinfo* / .button / .disabledButton) so the
   facelift applies with zero risk of changing which content shows for which
   status. Scoped under .wms-facelift like everything else above.
   ========================================================================== */
.wms-facelift .card {
    background: #fff;
    border: 1px solid var(--wms-border-100);
    border-radius: var(--wms-radius-xl);
    padding: var(--wms-pad-desktop);
    margin-bottom: 18px;
    box-shadow: var(--wms-shadow-flat);
}
@media (max-width: 760px) {
    .wms-facelift .card { padding: var(--wms-pad-mobile); }
}
.wms-facelift .card.cardcontact {
    background: var(--wms-surface-100);
}
.wms-facelift .card.cardtripinfo,
.wms-facelift .card.cardtripinfoDeliveries,
.wms-facelift .card.cardtripinfoDeliveriesBags,
.wms-facelift .card.cardtripinfooffmap {
    box-shadow: var(--wms-shadow-flat);
}
/* .google-maps / #map_canvas / .picbagslandscapemap are absolutely
   positioned (top/left/width/height, all !important) against a
   height:607px .cardtripinfo -- but that sizing only exists in main.css,
   which BDODetail/Main.aspx's master (Master.Master) never loads; only
   Site.css or a per-airline stylesheet loads here, and none of them
   redefine these rules. Net effect on every airline: the map/placeholder
   image is absolutely positioned with no sized, positioned ancestor to
   anchor to, so it renders detached from -- and visually overlapping --
   the trip-info card below it. Fix: give the map/image its own normal-flow,
   sized, position:relative box instead of depending on the missing 607px
   card height. */
.wms-facelift .card.cardtripinfo .google-maps,
.wms-facelift .card.cardtripinfooffmap .google-maps,
.wms-facelift .card.cardtripinfooffmap .picbagslandscapemap {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: 320px !important;
    margin-top: 16px;
    border-radius: var(--wms-radius-md);
    overflow: hidden;
}
.wms-facelift .card.cardtripinfo #map_canvas {
    height: 100% !important;
    width: 100% !important;
    box-shadow: none;
}
.wms-facelift .card.cardtripinfooffmap .imglandscapemap {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border: 0;
    margin-left: 0;
    display: block;
}

/* BDODetail/Main.aspx's action buttons (Waive Signature, Hold Bags/
   Reschedule Delivery, and the various modal submit/cancel buttons) render
   as .btn.rectangle-ws (filled) / .btn.rectangle-2 (outline) -- both
   inherit a broken padding:8px 16px 40px (huge, lopsided bottom padding)
   and sharp 2px corners from main.css-family rules, none of which this
   page's master (Master.Master) even loads; only Materialize's own .btn
   tag styling applies. Re-skin to match the .wms-btn design language.
   Scoped to BOTH .wms-facelift and .modal: this page's Materialize modals
   (Waive Signature, Hold Bags, Contact Us, etc.) are structured as
   top-level siblings of #containers, not descendants of it, so they sit
   entirely outside the .wms-facelift scope -- .modal (Materialize's own
   dialog wrapper class) is specific enough to reach them safely. */
.wms-facelift .btn.rectangle-ws,
.wms-facelift .btn.rectangle-2,
.modal .btn.rectangle-ws,
.modal .btn.rectangle-2 {
    height: auto !important;
    line-height: normal !important;
    padding: 12px 20px !important;
    border-radius: var(--wms-radius-sm) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    transition: transform 0.15s, box-shadow 0.15s;
}
.wms-facelift .btn.rectangle-ws,
.modal .btn.rectangle-ws {
    background: var(--wms-gradient-button) !important;
    color: #fff !important;
    box-shadow: var(--wms-shadow-btn-primary);
}
.wms-facelift .btn.rectangle-ws:hover,
.modal .btn.rectangle-ws:hover {
    transform: translateY(-2px);
    box-shadow: var(--wms-shadow-btn-primary-hover);
    color: #fff;
    text-decoration: none;
}
.wms-facelift .btn.rectangle-2,
.modal .btn.rectangle-2 {
    background: #fff !important;
    color: var(--wms-ink-800) !important;
    border: 1.5px solid var(--wms-border-200) !important;
}
.wms-facelift .btn.rectangle-2:hover,
.modal .btn.rectangle-2:hover {
    transform: translateY(-2px);
    box-shadow: var(--wms-shadow-secondary-hover);
    border-color: #C9C4F5 !important;
    color: var(--wms-ink-800);
    text-decoration: none;
}
.wms-facelift .btn.rectangle-ws .icons,
.wms-facelift .btn.rectangle-2 .icons,
.modal .btn.rectangle-ws .icons,
.modal .btn.rectangle-2 .icons {
    width: 16px !important;
    height: 16px !important;
    vertical-align: middle;
}
.wms-facelift .btn.rectangle-ws .icons,
.modal .btn.rectangle-ws .icons {
    filter: brightness(10);
}
/* QA fix #178991: disabled submit buttons (Waive Signature,
   Require Signature, Hold Bags) must look disabled -- the gradient rule above
   otherwise makes them indistinguishable from the enabled state. */
.wms-facelift .btn.rectangle-ws:disabled,
.wms-facelift .btn.rectangle-ws[disabled],
.modal .btn.rectangle-ws:disabled,
.modal .btn.rectangle-ws[disabled],
.modal .btn:disabled,
.modal .btn[disabled] {
    background: #E4E2EE !important;
    color: #8B87A3 !important;
    box-shadow: none !important;
    transform: none !important;
    cursor: not-allowed !important;
    pointer-events: auto;
    opacity: 1;
}
.wms-facelift .btn.rectangle-ws:disabled:hover,
.wms-facelift .btn.rectangle-ws[disabled]:hover,
.modal .btn.rectangle-ws:disabled:hover,
.modal .btn.rectangle-ws[disabled]:hover,
.modal .btn:disabled:hover,
.modal .btn[disabled]:hover {
    transform: none !important;
    box-shadow: none !important;
    color: #8B87A3 !important;
}
.modal .wms-btn-hint {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    color: var(--wms-ink-500, #6B6785);
}
.modal .btn:not([disabled]) ~ .wms-btn-hint {
    display: none;
}
/* #178989: "Update" phone link in the Require Signature modal is a real link. */
.modal a.wms-update-link {
    cursor: pointer;
    font-weight: 700;
    text-decoration: underline;
    margin-left: 8px;
}

/* ==========================================================================
   Conservative reskin of the AA/WN master pages' EXISTING branded header
   and footer (real airline links/logos -- e.g. aa.com, oneworld, social
   icons -- are legitimately different content per the facelift README's
   own rule and are left completely untouched). Only color/spacing/shadow/
   font applied via the classes those masters already render with.
   ========================================================================== */
.wms-facelift #header.header {
    background: #fff;
    box-shadow: 0 2px 20px rgba(30,20,90,0.04);
    border-bottom: 1px solid rgba(90,80,230,0.1);
    padding: 10px 24px;
    font-family: var(--wms-font);
}
.wms-facelift #header .action-links {
    margin: 0 0 6px 0;
}
.wms-facelift #header .action-links a {
    color: var(--wms-ink-700);
    font-weight: 700;
    font-size: 13px;
}
.wms-facelift #header .action-links a:hover {
    color: var(--wms-indigo-600);
}
.wms-facelift #header .aa-logo img {
    height: 34px;
    width: auto;
}
.wms-facelift #header .border-shadow {
    background: none;
    height: 2px;
    background-image: var(--wms-gradient-footer-border) !important;
}
.wms-facelift #footer.footer {
    background: var(--wms-footer-bg);
    color: var(--wms-footer-text);
    padding: 24px;
    font-family: var(--wms-font);
    border-top: 2px solid;
    border-image: var(--wms-gradient-footer-border) 1;
}
.wms-facelift #footer a {
    color: var(--wms-footer-text);
    font-size: 13px;
}
.wms-facelift #footer a:hover {
    color: #fff;
}

/* AA's BDODetail tracking-detail partials use their own card-like class
   names (not .card/.cardcontact) -- conservative reskin, same spirit as
   the .card reskin above, background/border/radius/shadow only. */
.wms-facelift .delivery-summary-section,
.wms-facelift .customer-info-section {
    background: #fff;
    border: 1px solid var(--wms-border-100);
    border-radius: var(--wms-radius-xl);
    box-shadow: var(--wms-shadow-flat);
}
.wms-facelift .page-section {
    box-shadow: var(--wms-shadow-flat);
    border-radius: var(--wms-radius-lg);
}
.wms-facelift .section-header {
    color: var(--wms-ink-500);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: none;
}

/* ==========================================================================
   Default.aspx (the actual default/whitelabel homepage) -- brings its
   airline-partner grid and legacy photo banner in line with the same
   visual language as the airline-specific Main.aspx homepage, without
   touching the row/column-counting loop that builds the grid.
   ========================================================================== */
.wms-facelift .wms-banner-photo {
    padding: 0 24px;
    margin: 8px 0;
}
.wms-facelift .wms-banner-photo img.wmsbg {
    border-radius: var(--wms-radius-xl);
    max-width: 100%;
}
/* The partner strip is a logo marquee, not a card grid, so it is allowed to
   run wider than the standard content column -- the logos otherwise float in
   a narrow band with large empty gutters on wide monitors. Stepped up rather
   than full-bleed so the edge mask still has room to fade. */
.wms-facelift #homepage_partners,
.wms-facelift #homepage_partnersmb {
    max-width: var(--wms-maxw-default);
    margin: 0 auto;
    padding: 24px 24px 8px;
}
@media (min-width: 1200px) {
    .wms-facelift #homepage_partners {
        max-width: 1600px;
    }
}
@media (min-width: 1700px) {
    .wms-facelift #homepage_partners {
        max-width: 1920px;
        padding-left: 40px;
        padding-right: 40px;
    }
}
/* Logo plate: intentionally transparent. Each logo sits directly on the page
   background so the strip reads as a row of partner marks rather than a row
   of boxed cards. Flex centering replaces the legacy
   text-align:-webkit-center + inline .verticalalign hack, which only
   approximated centering and left short/wide logos sitting off-centre. */
.wms-facelift .imgsquare {
    height: 100px;
    margin: 8px;
    background: transparent;
    border: 0;
    border-radius: var(--wms-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}
.wms-facelift .imgsquare .verticalalign {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    line-height: 0;
}
.wms-facelift .imgsquare:hover {
    transform: translateY(-3px);
}
.wms-facelift .imgairline {
    max-width: 100px;
    max-height: 60px;
    width: auto;
    display: block;
    margin: 0 auto;
    /* Most JPG/24-bit PNG partner logos had an opaque white plate baked in.
       The transform-animated marquee track creates its own stacking context,
       which breaks mix-blend-mode against the page background, so the
       previously white-plated logos (BA, Copa, Sun Country, Sunwing, Canada
       Jetlines, etc.) were re-exported as true transparent PNGs instead of
       relying on blending. Multiply is kept as a safety net for any
       remaining/future opaque assets. Logos whose plate is a real brand
       colour (Porter navy, Emirates red) are intentionally left opaque. */
    mix-blend-mode: multiply;
}

/* Turn the airline-partner grid into an auto-scrolling horizontal
   marquee, matching Main.aspx's airline strip -- .wms-partners-marquee
   is the fixed-width viewport (added around the existing #homepage_partners/
   #homepage_partnersmb), .wms-partners-track is a new wrapper around the
   loop's output that lays its untouched .row/.col children out in one
   continuous flex line and animates it. The row/column-counting loop
   itself is not touched, only how its output is laid out and clipped. */
.wms-facelift .wms-partners-marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.wms-facelift .wms-partners-track {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: max-content;
    animation: wmsPartnersMarquee 35s linear infinite;
}
.wms-facelift .wms-partners-track:hover {
    animation-play-state: paused;
}
.wms-facelift .wms-partners-track > .row {
    display: flex !important;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    align-items: center;
    margin: 0 !important;
}
.wms-facelift .wms-partners-track > .row > .col {
    width: auto !important;
    flex: 0 0 auto;
    padding: 0 !important;
    margin: 0 !important;
    left: auto !important;
}
@keyframes wmsPartnersMarquee {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

/* ==========================================================================
   Full-bleed page width + sticky footer (site-wide chrome)
   ========================================================================== */
/* main.css caps .container (Master.Master) / .containerdefault (Default.Master,
   Tracking.Master) at max-width:1440px!important -- a legacy fixed-width
   constraint that leaves visible gutters on wide viewports. Scoped via
   :has() to only the wrapper that actually contains our new footer, so
   unrelated .container usages elsewhere (the Bootstrap grid inside the
   AA-branded Main.Master, which never renders a .wms-footer) are untouched. */
.container:has(.wms-footer),
.containerdefault:has(.wms-footer) {
    max-width: none !important;
}
/* The chrome wrapper that directly parents .wms-footer becomes a
   full-height flex column so the footer's margin-top:auto (set below)
   pins it to the viewport bottom on short-content pages instead of riding
   up under the content. Scoped to a DIRECT footer child (> .wms-footer,
   not the broader > .wms-facelift used elsewhere) because on Main.Master
   #main is only an inner wrapper around the content placeholder -- the
   footer is #main's SIBLING, not its child, so #main must NOT get this
   min-height:100vh (it did briefly, and forced a full-viewport-tall empty
   #main on short pages like ContactUs.aspx). #header/#Div1 is Main.Master's
   true outer wrapper and is the one that directly parents the footer there;
   #main/#maindefault are the true outer wrapper on the other three masters. */
#main:has(> .wms-footer),
#maindefault:has(> .wms-footer),
#header:has(> .wms-footer),
#Div1:has(> .wms-footer) {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
}
/* main.css has a pre-existing `@media (min-width:1400px) { div, h1, h2, h3 {
   margin: 0 auto } }` rule -- harmless on normal block children (auto
   margins on a width:auto block do nothing), but the flex column above
   turns every direct <div> child into a flex item, where CSS auto cross-
   axis margins take precedence over align-items:stretch and instead
   shrink the item to fit-content width, centering it (this is what
   silently squashed .bar -- the header row -- down to ~30% width). Force
   full width + zero margin on direct-child <div>s of the four sticky-
   footer wrappers so that legacy rule can't act on them. */
#main:has(> .wms-footer) > div,
#maindefault:has(> .wms-footer) > div,
#header:has(> .wms-footer) > div,
#Div1:has(> .wms-footer) > div {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ---------- FAQ / Contact / legal pages ---------- */
.wms-help-page {
    min-width: 0;
    overflow-x: hidden;
}
.wms-help-hero {
    padding: 56px 24px 72px;
}
.wms-hero {
    background-image: linear-gradient(rgba(33, 31, 61, .12), rgba(33, 31, 61, .12)), var(--wms-gradient-hero);
}
.wms-hero--faq {
    background-image: linear-gradient(rgba(33, 31, 61, .5), rgba(33, 31, 61, .5)), var(--wms-gradient-banner);
}
.wms-hero--faq .wms-page-eyebrow,
.wms-hero--faq .wms-marquee-eyebrow,
.wms-hero--faq .wms-page-eyebrow span {
    color: #fff;
}
.wms-help-hero .wms-marquee-eyebrow,
.wms-help-hero .wms-page-eyebrow,
.wms-help-hero .wms-hero__sub a,
.wms-help-hero .wms-hero__sub strong {
    color: #fff;
}
.wms-help-hero .wms-hero__sub a {
    text-decoration: underline;
}
.wms-help-hero__inner {
    position: relative;
    max-width: var(--wms-maxw-faq);
    margin: 0 auto;
    text-align: center;
}
.wms-page-eyebrow {
    color: rgba(255,255,255,0.9);
    font-size: 13px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
}
.wms-faq-shell,
.wms-facelift .containerHelp,
.wms-facelift .row.bg.desktop.wms-contact-section {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    background: transparent;
}
.wms-faq-section {
    margin: -30px auto 0;
    padding: 0 24px 40px;
}
.wms-faq-shell > .row.mobile:empty {
    display: none;
}
.wms-section-heading {
    text-align: center;
    color: var(--wms-ink-900);
    font-family: var(--wms-font);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 24px;
}
.wms-contact-section {
    padding: 0 24px 58px;
}
.wms-contact-cards--support {
    max-width: var(--wms-maxw-faq);
    margin: 0 auto;
    justify-content: center;
    align-items: stretch;
}
.wms-contact-card {
    color: var(--wms-ink-800);
    text-decoration: none;
    min-width: 0;
}
.wms-contact-card:hover {
    color: var(--wms-ink-800);
    text-decoration: none;
    border-color: #DDD8FA;
}
.wms-contact-card__icon {
    width: 42px;
    height: 42px;
    border-radius: var(--wms-radius-icon);
    background: var(--wms-gradient-button);
    box-shadow: var(--wms-shadow-icon-tile);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.wms-contact-card__icon img,
.wms-contact-card .wms-contact-card__icon img {
    width: 20px;
    height: 20px;
    margin: 0;
    filter: brightness(10);
}
.wms-contact-card__content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.wms-contact-card__value {
    color: var(--wms-indigo-600);
    overflow-wrap: anywhere;
}
.wms-content-shell {
    width: 100%;
    max-width: var(--wms-maxw-faq);
    margin: -30px auto 0;
    padding: 0 24px 56px;
    position: relative;
}
.wms-legal-card {
    background: #fff;
    border: 1px solid var(--wms-border-100);
    border-radius: var(--wms-radius-xl);
    box-shadow: var(--wms-shadow-elevated);
    padding: var(--wms-pad-desktop);
    color: var(--wms-ink-600);
    font-size: 15px;
    line-height: 1.6;
}
.wms-legal-card p {
    color: var(--wms-ink-600);
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 16px;
}
.wms-legal-card p:last-child {
    margin-bottom: 0;
}
.wms-legal-card h1,
.wms-legal-card h2,
.wms-legal-card h3,
.wms-legal-card .entry-title {
    color: var(--wms-ink-900);
    font-family: var(--wms-font);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.wms-legal-card h1,
.wms-legal-card .entry-title {
    font-size: 26px;
    margin: 0 0 14px;
}
.wms-legal-card h2 {
    font-size: 22px;
    margin: 0 0 12px;
}
.wms-legal-card h3 {
    font-size: 18px;
    margin: 26px 0 10px;
}
.wms-legal-card strong {
    color: var(--wms-ink-800);
}
.wms-legal-card a {
    color: var(--wms-indigo-600);
    font-weight: 700;
    overflow-wrap: anywhere;
}
.wms-legal-updated {
    color: var(--wms-indigo-600);
    font-weight: 700;
}
.wms-contact-main {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.wms-contact-intro-card {
    margin-bottom: 0;
}
@media (max-width: 760px) {
    .wms-help-hero {
        padding: 44px 20px 58px;
    }
    .wms-help-hero__inner,
    .wms-faq-section,
    .wms-contact-cards--support,
    .wms-content-shell {
        max-width: 100%;
    }
    .wms-faq-section,
    .wms-content-shell {
        padding-left: 20px;
        padding-right: 20px;
    }
    .wms-contact-section {
        padding-left: 20px;
        padding-right: 20px;
    }
    .wms-section-heading {
        font-size: 22px;
    }
    .wms-legal-card {
        padding: var(--wms-pad-mobile);
    }
    .wms-legal-card h1,
    .wms-legal-card .entry-title {
        font-size: 22px;
    }
    .wms-legal-card h2 {
        font-size: 20px;
    }
    .wms-contact-card {
        width: 100%;
    }
}
@media (max-width: 420px) {
    .wms-help-hero {
        padding: 38px 18px 54px;
    }
    .wms-faq-section,
    .wms-content-shell,
    .wms-contact-section {
        padding-left: 18px;
        padding-right: 18px;
    }
    .wms-accordion-toggle {
        padding: 16px 14px;
    }
    .wms-accordion-panel {
        padding: 0 14px 16px;
    }
}


/* ==========================================================================
   Legacy responsive visibility classes (.desktop / .mobile)
   Home/Default.aspx and BDODetail/Main.aspx ship paired desktop/mobile
   variants of the same block (hero banner art, the participating-airlines
   marquee, several tracking panels) and relied on main.css / mainmb*.css to
   show exactly one of them. Those sheets no longer load in facelift mode, so
   BOTH variants rendered at once -- the homepage showed the banner twice and
   the airline marquee twice. Re-establish the toggle at the facelift
   breakpoint.
   ========================================================================== */
/* Scoped to the BODY class rather than the .wms-facelift wrapper: Materialize
   modals (#editCustomerDeliveryInfo, #deliveryInfoMd) are siblings of the
   content wrapper, not descendants of it, so a .wms-facelift-scoped rule never
   reached them and their paired .desktop/.mobile button rows both rendered. */
body.wms-facelift-body .mobile:not(.wms-responsive),
body.wms-facelift-body #homepage_partnersmb {
    display: none;
}
@media (max-width: 760px) {
    body.wms-facelift-body .desktop:not(.wms-responsive),
    body.wms-facelift-body #homepage_partners {
        display: none;
    }
    body.wms-facelift-body .mobile:not(.wms-responsive),
    body.wms-facelift-body #homepage_partnersmb {
        display: block;
    }
    /* Legacy .desktop/.mobile button rows inside the Materialize modals need
       an explicit hide: the .modal .marginbutton display:flex rule below is
       more specific than the generic toggle above and would otherwise show
       BOTH the desktop and mobile Save/Cancel rows on small screens. */
    body.wms-facelift-body .modal .desktop:not(.wms-responsive) {
        display: none;
    }
}
/* Sections that were rebuilt as facelift components keep their legacy
   .desktop/.mobile class only for backwards compatibility with old scripts --
   they are responsive on their own, so they must be exempt from the legacy
   show/hide toggle. Without this the FAQ "contact us" block (which is markup
   `class="row bg desktop wms-contact-section"`) disappeared entirely on
   mobile. Matching on [class*="wms-"] covers every converted component. */

/* ==========================================================================
   Empty / error states (BDODetail/Main.aspx)
   "Not Recognized", "Session Expired" and "Something Went Wrong" all render
   through .containertracking1 with .session-expired + .sorry-for-security.
   These were styled only by the legacy sheets, so in facelift mode they came
   out as bare unstyled text on a blank page.
   ========================================================================== */
.wms-facelift .containertracking1 {
    max-width: 560px;
    margin: 48px auto;
    padding: 40px 32px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--wms-border-100);
    border-radius: var(--wms-radius-2xl);
    box-shadow: var(--wms-shadow-flat);
}
@media (max-width: 760px) {
    .wms-facelift .containertracking1 {
        margin: 28px auto;
        padding: 28px 20px;
    }
}
.wms-facelift .session-expired {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--wms-ink-900);
}
.wms-facelift .sorry-for-security {
    margin-top: 10px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--wms-ink-600);
}
.wms-facelift .marginbuttonsession {
    margin-top: 24px;
}

/* ==========================================================================
   Tracking page shell (BDODetail/Main.aspx)
   The view renders its whole body inside #containers.wms-facelift. Site.css
   used to give the page its width via #content{width:1000px}; that sheet no
   longer loads in facelift mode, so without this the banner, stepper and
   card grid stretch the full viewport (2000px+ on a wide monitor) and the
   stepper labels drift far apart from their badges.
   ========================================================================== */
body.wms-facelift-body #containers.wms-facelift {
    width: 100%;
    max-width: var(--wms-maxw-tracking-page);
    margin: 0 auto;
    padding: 28px 24px 48px;
}
@media (max-width: 760px) {
    body.wms-facelift-body #containers.wms-facelift {
        padding: 18px 16px 32px;
    }
}

/* ---------- status notice (legacy .out-for-delivery / .wemissedyou) ----------
   These two siblings carry the per-status headline and sub-copy. They had no
   styling of their own once the legacy sheets stopped loading, so they
   rendered as bare unstyled text between the stepper and the cards. */
#containers.wms-facelift .col:has(> .out-for-delivery) {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    background: #fff;
    border: 1px solid var(--wms-border-100);
    border-left: 4px solid var(--wms-indigo-600, #5B4FE8);
    border-radius: var(--wms-radius-lg);
    padding: 18px 22px;
    margin-bottom: 18px;
    box-shadow: var(--wms-shadow-flat);
}
#containers.wms-facelift .col:has(> .wemissedyou) {
    border-left-color: #F0A73B;
    background: #FFFBF3;
}
.wms-facelift .out-for-delivery {
    font-size: 17px;
    font-weight: 700;
    color: var(--wms-ink-900, #1E1B4B);
    line-height: 1.35;
}
.wms-facelift .wemissedyou {
    margin-top: 4px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--wms-ink-600, #5C5C7A);
}

/* ---------- trip info card ---------- */
.wms-facelift .paddingtripinfo,
.wms-facelift .contact-info,
.wms-facelift .driver-info,
.wms-facelift .delivery-info-note {
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: none;
    /* AB#179647: was 12px ink-500, which read as faint on the white/near-white cards. ink-700 is ~8.5:1. */
    color: var(--wms-ink-700, #4A4A66);
}
.wms-facelift .mco-airport {
    font-size: 15px;
    font-weight: 700;
    color: var(--wms-ink-900, #1E1B4B);
    line-height: 1.4;
}
.wms-facelift .paddingmco-airport,
.wms-facelift .paddingmco-airport2 {
    margin-top: 14px;
}
.wms-facelift .pick-up-today-12-p,
.wms-facelift .pick-up-today-12-p2 {
    margin-top: 2px;
    font-size: 13px;
    color: var(--wms-ink-550, #8686A3);
}
.wms-facelift .airportinfo {
    padding-left: 4px;
}

/* ---------- contact / airline card ---------- */
.wms-facelift .alaska-air {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--wms-ink-900, #1E1B4B);
}
.wms-facelift .alk-123-abc-456-de {
    display: inline-block;
    margin-left: 8px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--wms-surface-100, #FBFBFF);
    border: 1px solid var(--wms-border-200, #E4E3F3);
    font-size: 12px;
    font-weight: 600;
    color: var(--wms-ink-600, #5C5C7A);
}
.wms-facelift .rectangle-5 {
    height: 1px;
    margin: 14px 0;
    background: var(--wms-border-200, #E4E3F3);
    font-size: 0;
    line-height: 0;
}
.wms-facelift .contact-info-padding {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.wms-facelift a.update {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
    color: var(--wms-indigo-600, #5B4FE8);
    text-decoration: none;
    white-space: nowrap;
}
.wms-facelift a.update:hover {
    text-decoration: underline;
}
.wms-facelift .john-smith-johnsmith,
.wms-facelift .john-smith-123-anywh {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--wms-ink-700, #4A4A66);
}
.wms-facelift .delivery-info-note {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.wms-facelift .please-drop-it-off-n {
    margin-top: 8px;
    padding: 10px 14px;
    border-radius: var(--wms-radius-md);
    background: var(--wms-surface-100, #FBFBFF);
    border: 1px solid var(--wms-border-200, #E4E3F3);
    font-size: 13px;
    line-height: 1.6;
    color: var(--wms-ink-600, #5C5C7A);
}
.wms-facelift .your-bag-s-will-be {
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--wms-ink-700, #4A4A66);
}
.wms-facelift .boldname {
    font-weight: 700;
    color: var(--wms-ink-900, #1E1B4B);
}
.wms-facelift .view-vehicle {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--wms-indigo-600, #5B4FE8);
}

/* ---------- session expired overlay ----------
   AB#179598: default.css owns the full-screen rule but is not loaded for facelift
   views, so the timeout card rendered above the still-visible order details. */
#sessionexpired {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding-top: 4% !important;
    background-color: #fff !important;
    z-index: 9999 !important;
    overflow: hidden !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ---------- disclaimer footnotes ---------- */
/* AB#179619: match the pre-facelift 16px #505050 footnote; 12.5px light grey was unreadable. */
.wms-facelift .noteoutdelivery {
    margin-top: 6px;
    font-size: 16px;
    line-height: 1.6;
    color: #505050;
}

/* ===== AIRLINE VARIANTS (AA / WN) — owned by airline-variants agent ===== */
body.wms-facelift-body .container:has(> #mainContent),
body.wms-facelift-body #container,
body.wms-facelift-body #mainContent {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    background: var(--wms-page-bg);
}
body.wms-facelift-body #container {
    min-height: 100vh;
}
body.wms-facelift-body #mainContent {
    flex: 1 0 auto;
}
body.wms-facelift-body #footer.footer {
    background: var(--wms-footer-bg);
    color: var(--wms-footer-text);
    padding: 24px;
    font-family: var(--wms-font);
    border-top: 2px solid;
    border-image: var(--wms-gradient-footer-border) 1;
}
body.wms-facelift-body #footer.footer .container {
    width: 100%;
    max-width: var(--wms-maxw-default);
    margin: 0 auto;
    padding: 0 24px;
    background: transparent;
}
body.wms-facelift-body #footer.footer a {
    color: var(--wms-footer-text);
    font-size: 13px;
}
body.wms-facelift-body #footer.footer a:hover {
    color: #fff;
}
body.wms-facelift-body #header.header {
    width: 100%;
    max-width: none;
    margin: 0;
    background: rgba(255,255,255,0.97);
    border-bottom: 1px solid rgba(90,80,230,0.1);
    box-shadow: 0 2px 20px rgba(30,20,90,0.04);
    padding: 10px 24px;
    font-family: var(--wms-font);
}
body.wms-facelift-body #header.header .action-links,
body.wms-facelift-body #header.header .logo {
    max-width: var(--wms-maxw-default);
    margin-left: auto;
    margin-right: auto;
}
body.wms-facelift-body #header.header .border-shadow {
    height: 2px;
    margin-top: 8px;
    background-image: var(--wms-gradient-footer-border);
}
body.wms-facelift-body #header.header .action-links a {
    color: var(--wms-ink-700);
    font-weight: 700;
    font-size: 13px;
}
.wms-airline-home,
.wms-airline-confirm,
.wms-airline-message,
.wms-airline-contact,
.wms-airline-hold,
.wms-airline-tracking,
.wms-airline-delivered,
.wms-airline-onhold {
    min-height: 100%;
    padding: 0 24px 56px;
    background: var(--wms-page-bg);
}
.wms-airline-home .wms-hero,
.wms-airline-confirm .wms-hero {
    margin-left: -24px;
    margin-right: -24px;
}
.wms-airline-shell,
.wms-airline-form-card,
.wms-airline-message-card,
.wms-airline-confirm .wms-card,
.wms-airline-confirm .wms-lookup-card,
.wms-airline-hold .wms-card,
.wms-airline-tracking .wms-card,
.wms-airline-delivered .wms-card,
.wms-airline-onhold .wms-card {
    max-width: var(--wms-maxw-default);
    margin-left: auto;
    margin-right: auto;
}
.wms-airline-form-card,
.wms-airline-message-card {
    margin-top: 28px;
    padding: var(--wms-pad-desktop);
    background: #fff;
    border: 1px solid var(--wms-border-100);
    border-radius: var(--wms-radius-xl);
    box-shadow: var(--wms-shadow-elevated);
}
.wms-airline-card-title h1,
.wms-airline-message-title,
.wms-airline-message-card h1,
.wms-airline-message-card h3 {
    color: var(--wms-ink-900);
    font-family: var(--wms-font);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
}
.wms-airline-card-body,
.wms-airline-fields,
.wms-airline-fields .data-row {
    width: 100%;
}
.wms-airline-fields .data-row {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin: 0;
}
.wms-airline-fields .data-row > div,
.wms-airline-fields .customer-info-cell,
.wms-airline-fields .login-last-name {
    float: none;
    flex: 1 1 230px;
    width: auto;
    max-width: none;
    padding: 0;
    margin: 0;
}
.wms-airline-fields .data-label,
.wms-airline-fields label {
    color: var(--wms-ink-700);
    display: block;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 8px;
}
.wms-airline-fields input[type="text"],
.wms-airline-confirm input[type="text"],
.wms-airline-tracking input[type="text"],
.wms-airline-onhold input[type="text"],
.wms-airline-delivered input[type="text"] {
    width: 100% !important;
    min-height: 44px;
    border: 1px solid var(--wms-border-200);
    border-radius: var(--wms-radius-md);
    padding: 11px 13px;
    color: var(--wms-ink-800);
    background: #fff;
    box-shadow: inset 0 1px 2px rgba(30,20,90,0.03);
}
.wms-airline-fields input[type="text"]:focus,
.wms-airline-confirm input[type="text"]:focus {
    border-color: var(--wms-indigo-500);
    box-shadow: 0 0 0 3px rgba(106,92,249,0.12);
    outline: none;
}
.wms-airline-home .login-form-btn,
.wms-airline-confirm .login-form-btn,
.wms-airline-confirm #confirmBDO-button-section,
.wms-airline-hold .wms-card input[type="submit"] {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 22px;
}
.wms-airline-home input.button,
.wms-airline-confirm input.button,
.wms-airline-confirm input.button-Cancel,
.wms-airline-hold input.button,
.wms-airline-hold input.holdBag-disabledButton {
    height: auto;
    min-height: 44px;
    line-height: normal;
    border: 0;
    border-radius: var(--wms-radius-md);
    padding: 12px 22px;
    font-family: var(--wms-font);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.wms-airline-home input.button,
.wms-airline-confirm input.button,
.wms-airline-hold input.button {
    color: #fff;
    background: var(--wms-gradient-button);
    box-shadow: var(--wms-shadow-btn-primary);
}
.wms-airline-confirm input.button-Cancel,
.wms-airline-hold input.holdBag-disabledButton {
    color: var(--wms-ink-800);
    background: #fff;
    border: 1.5px solid var(--wms-border-200);
}
.wms-airline-hold input.holdBag-disabledButton[disabled] {
    color: var(--wms-ink-500);
    background: var(--wms-surface-50);
    cursor: not-allowed;
}
.wms-airline-confirm .confirmBDO-topbar-info,
.wms-airline-hold .holdBag-Topcolored-bar,
.wms-airline-delivered .bdodeliveredinformation-Topcolored-bar,
.wms-airline-onhold .bagOnHold-Topcolored-bar,
.wms-airline-tracking .sub-heading-section,
.wms-airline-delivered .sub-heading-section,
.wms-airline-onhold .sub-heading-section {
    max-width: var(--wms-maxw-tracking-page);
    margin: 28px auto 20px;
    padding: 28px 32px;
    color: #fff;
    background: var(--wms-gradient-banner);
    border-radius: var(--wms-radius-2xl);
    box-shadow: var(--wms-shadow-banner);
}
.wms-airline-onhold .bagOnHold-Topcolored-bar,
.wms-airline-onhold .sub-heading-section {
    background: linear-gradient(150deg, var(--wms-navy-700), var(--wms-indigo-600) 65%, var(--wms-cyan-400));
}
.wms-airline-confirm .topbar-lowertext,
.wms-airline-confirm .wms-lookup-card,
.wms-airline-hold .holdBags-SectionBelowTopBar,
.wms-airline-hold #TOC,
.wms-airline-delivered .customerinfo,
.wms-airline-delivered .bdoinfo,
.wms-airline-onhold .customerinfo,
.wms-airline-onhold .bdoinfo,
.wms-airline-tracking .delivery-summary-section,
.wms-airline-tracking .page-section,
.wms-airline-delivered .delivery-summary-section,
.wms-airline-onhold .delivery-summary-section {
    background: #fff;
    border: 1px solid var(--wms-border-100);
    border-radius: var(--wms-radius-xl);
    box-shadow: var(--wms-shadow-flat);
    padding: var(--wms-pad-desktop);
}
.wms-airline-delivered .wms-split-cards,
.wms-airline-onhold .wms-split-cards {
    max-width: var(--wms-maxw-tracking-page);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
}
.wms-airline-delivered .row,
.wms-airline-onhold .row,
.wms-airline-tracking .row,
.wms-airline-hold .row {
    margin-left: 0;
    margin-right: 0;
}
.wms-airline-delivered .label,
.wms-airline-delivered .label2,
.wms-airline-onhold .label,
.wms-airline-onhold .label2,
.wms-airline-tracking .summary-detail-label,
.wms-airline-hold label {
    color: var(--wms-ink-600);
    font-size: 13px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0.04em;
}
.wms-airline-delivered .data,
.wms-airline-onhold .data,
.wms-airline-tracking .details-align-right,
.wms-airline-tracking .details-align-left {
    color: var(--wms-ink-800);
    font-weight: 700;
}
.wms-airline-delivered .subheading,
.wms-airline-onhold .subheading,
.wms-airline-hold h1,
.wms-airline-hold h3,
.wms-airline-hold #TOC h1,
.wms-airline-tracking .section-header,
.wms-airline-tracking h1 {
    color: var(--wms-ink-900);
    font-family: var(--wms-font);
    font-weight: 700;
    letter-spacing: -0.01em;
}
.wms-airline-hold .holdBag-Topcolored-bar h1,
.wms-airline-hold .holdBag-Topcolored-bar label,
.wms-airline-hold .holdBag-Topcolored-bar .topbar-baginfo,
.wms-airline-tracking .sub-heading-section h2,
.wms-airline-tracking .sub-heading-section p,
.wms-airline-delivered .sub-heading-section h2,
.wms-airline-delivered .sub-heading-section p,
.wms-airline-onhold .sub-heading-section h2,
.wms-airline-onhold .sub-heading-section p {
    color: #fff;
}
@media (max-width: 760px) {
    .wms-airline-home,
    .wms-airline-confirm,
    .wms-airline-message,
    .wms-airline-contact,
    .wms-airline-hold,
    .wms-airline-tracking,
    .wms-airline-delivered,
    .wms-airline-onhold {
        padding-left: 18px;
        padding-right: 18px;
    }
    .wms-airline-form-card,
    .wms-airline-message-card,
    .wms-airline-confirm .topbar-lowertext,
    .wms-airline-confirm .wms-lookup-card,
    .wms-airline-hold .holdBags-SectionBelowTopBar,
    .wms-airline-hold #TOC,
    .wms-airline-delivered .customerinfo,
    .wms-airline-delivered .bdoinfo,
    .wms-airline-onhold .customerinfo,
    .wms-airline-onhold .bdoinfo,
    .wms-airline-tracking .delivery-summary-section,
    .wms-airline-tracking .page-section,
    .wms-airline-delivered .delivery-summary-section,
    .wms-airline-onhold .delivery-summary-section {
        padding: var(--wms-pad-mobile);
    }
    .wms-airline-delivered .wms-split-cards,
    .wms-airline-onhold .wms-split-cards {
        display: block;
    }
    .wms-airline-delivered .bdoinfo,
    .wms-airline-onhold .bdoinfo {
        margin-top: 18px;
    }
}

/* ==========================================================================
   Materialize modals -- "Update" contact / delivery editors
   (#editCustomerDeliveryInfo, #deliveryInfoMd on BDODetail/Main.aspx)
   These modals are siblings of the .wms-facelift content wrapper, so none of
   the scoped component styles reached them and in facelift mode they rendered
   as raw Materialize: zero padding, red default tabs, and -- because
   Materialize .row carries a -11.25px horizontal margin -- every field label
   was clipped off the left edge with a stray horizontal scrollbar.
   Everything here is presentational only; no ids, names or tab wiring change.
   ========================================================================== */
body.wms-facelift-body .modal {
    border-radius: var(--wms-radius-lg, 18px);
    border: 1px solid var(--wms-border, #E4E6F0);
    box-shadow: 0 24px 64px rgba(21, 23, 66, .22);
    background: var(--wms-surface, #fff);
    padding: 28px 32px 24px;
    overflow-x: hidden;
    max-height: 86vh;
    /* Materialize sizes modals at width:55%, which on a 1920 monitor is a
       1000px+ dialog holding a single short form. Cap it and keep it
       horizontally centered regardless of the legacy wrapper it sits in. */
    width: 100%;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}
/* The contact-support modal is a single message field -- keep it compact. */
body.wms-facelift-body #ContactUs {
    max-width: 520px;
}
@media (min-width: 993px) {
    body.wms-facelift-body #requireSignature .please-ensure-your-c {
        font-size: 14px;
        line-height: 1.4;
    }
}
/* Cancel Materialize's negative row gutters inside the modal. They are what
   pushed the first column (and therefore every field label) to -11.25px. */
body.wms-facelift-body .modal .row {
    margin-left: 0;
    margin-right: 0;
}
/* Same content-box trap as the homepage lookup fields: width:100% plus
   horizontal padding overflowed the modal and created the scrollbar. */
body.wms-facelift-body .modal input[type="text"],
body.wms-facelift-body .modal input[type="email"],
body.wms-facelift-body .modal input[type="tel"],
body.wms-facelift-body .modal select,
body.wms-facelift-body .modal textarea {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    height: auto;
    padding: 11px 14px;
    border: 1px solid var(--wms-border, #E4E6F0);
    border-radius: var(--wms-radius-sm, 10px);
    background: var(--wms-surface, #fff);
    font-size: 15px;
    color: var(--wms-text, #151742);
    box-shadow: none;
    margin: 0 0 4px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
body.wms-facelift-body .modal input[type="text"]:focus,
body.wms-facelift-body .modal input[type="email"]:focus,
body.wms-facelift-body .modal input[type="tel"]:focus,
body.wms-facelift-body .modal select:focus,
body.wms-facelift-body .modal textarea:focus {
    outline: none;
    border-color: var(--wms-primary, #4B3FD4);
    box-shadow: 0 0 0 3px rgba(75, 63, 212, .16);
}
body.wms-facelift-body .modal label,
body.wms-facelift-body .modal .labeltext {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: none;
    color: var(--wms-text-muted, #6B6E8F);
    margin-bottom: 6px;
}
body.wms-facelift-body .modal .input-field,
body.wms-facelift-body .modal .rowwidthtabinfo > .col {
    margin-bottom: 14px;
}
/* Modal heading + subcopy (rendered as bare text nodes in the markup). */
body.wms-facelift-body .modal .modaltitle,
body.wms-facelift-body .modal h4,
body.wms-facelift-body .modal h5 {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--wms-text, #151742);
    margin: 0 0 4px;
}
/* Tabs: Materialize ships these in its red accent. Re-tint to the brand
   indigo and flatten the uppercase/letterspacing to match the rest of the UI. */
body.wms-facelift-body .modal .tabs {
    background: transparent;
    border-bottom: 1px solid var(--wms-border, #E4E6F0);
    margin: 14px 0 20px;
    height: auto;
}
body.wms-facelift-body .modal .tabs .tab a {
    color: var(--wms-text-muted, #6B6E8F);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    background: transparent;
}
body.wms-facelift-body .modal .tabs .tab a:hover,
body.wms-facelift-body .modal .tabs .tab a.active {
    color: var(--wms-primary, #4B3FD4);
    background: transparent;
}
/* Materialize measures .indicator when a tab is selected. The Update handlers select
   while the modal is still hidden (0 width), so on first open it spanned both tabs.
   Draw the underline on the active tab itself instead of the measured indicator. */
body.wms-facelift-body .modal .tabs .indicator {
    display: none;
}
body.wms-facelift-body .modal .tabs .tab a.active {
    box-shadow: inset 0 -3px 0 var(--wms-primary, #4B3FD4);
}
/* Action row. .databtn/.marginbutton are the existing wrappers; the paired
   .desktop/.mobile duplicates are resolved by the visibility toggle above. */
body.wms-facelift-body .modal .marginbutton {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--wms-border, #E4E6F0);
}
body.wms-facelift-body .modal .marginbutton .waivesignaturemargin {
    margin: 0;
}
body.wms-facelift-body .modal input[type="submit"],
body.wms-facelift-body .modal button.btn,
body.wms-facelift-body .modal a.btn {
    box-sizing: border-box;
    height: auto;
    line-height: 1.2;
    padding: 12px 22px;
    border: 0;
    border-radius: 999px;
    background: var(--wms-primary, #4B3FD4);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: none;
    box-shadow: none;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}
body.wms-facelift-body .modal input[type="submit"]:hover,
body.wms-facelift-body .modal button.btn:hover,
body.wms-facelift-body .modal a.btn:hover {
    background: var(--wms-primary-dark, #3B31A8);
    transform: translateY(-1px);
}
/* Secondary / dismiss actions render as .waivesignaturemargin wrapped links. */
body.wms-facelift-body .modal .waivesignaturemargin input[type="submit"],
body.wms-facelift-body .modal .waivesignaturemargin button,
body.wms-facelift-body .modal .waivesignaturemargin a,
body.wms-facelift-body .modal a.modal-close.btn-flat,
body.wms-facelift-body .modal .modal-close:not(.wms-modal-x):not(.closebtn) {
    background: var(--wms-surface, #fff);
    color: var(--wms-text, #151742);
    border: 1px solid var(--wms-border, #E4E6F0);
}
body.wms-facelift-body .modal .waivesignaturemargin input[type="submit"]:hover,
body.wms-facelift-body .modal .waivesignaturemargin button:hover,
body.wms-facelift-body .modal .waivesignaturemargin a:hover {
    background: var(--wms-surface-alt, #F5F6FB);
    color: var(--wms-text, #151742);
}
/* The close "X" is an inline image/anchor pinned top-left in the legacy
   markup; float it to the top-right corner of the new padded shell. */
body.wms-facelift-body .modal > .closemodal,
body.wms-facelift-body .modal > a > img[src*="close"],
body.wms-facelift-body .modal .closeicon {
    position: absolute;
    top: 18px;
    right: 20px;
    width: 18px;
    height: 18px;
    opacity: .55;
    cursor: pointer;
    transition: opacity .15s ease;
}
body.wms-facelift-body .modal > .closemodal:hover,
body.wms-facelift-body .modal .closeicon:hover {
    opacity: 1;
}
body.wms-facelift-body .modal-overlay {
    background: rgba(21, 23, 66, .55);
}
@media (max-width: 760px) {
    body.wms-facelift-body .modal {
        width: 94%;
        padding: 22px 18px 20px;
        border-radius: var(--wms-radius-md, 14px);
    }
    body.wms-facelift-body .modal .marginbutton {
        flex-direction: column;
        align-items: stretch;
    }
    body.wms-facelift-body .modal .marginbutton input[type="submit"],
    body.wms-facelift-body .modal .marginbutton button,
    body.wms-facelift-body .modal .marginbutton a {
        width: 100%;
        text-align: center;
    }
}

/* Close control + heading for the delivery/contact modals. The markup is
   `a.modal-close.closebtn > img.icons` followed by `.containerWaiveSignature`
   holding `.waive-signaturemd` (title) and a sibling line of subcopy. The
   close anchor must be excluded from the generic secondary-button styling
   above, otherwise it renders as a large bordered box over the title. */
body.wms-facelift-body .modal .closebtn {
    position: absolute;
    top: 16px;
    right: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    opacity: .5;
    transition: opacity .15s ease, background .15s ease;
}
body.wms-facelift-body .modal .closebtn:hover {
    opacity: 1;
    background: var(--wms-surface-alt, #F5F6FB);
}
body.wms-facelift-body .modal .closebtn img.icons {
    width: 14px;
    height: 14px;
    display: block;
}
body.wms-facelift-body .modal .waive-signaturemd {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--wms-text, #151742);
    margin: 0 0 6px;
    padding-right: 40px;
}
/* Subcopy line directly after the title inside .containerWaiveSignature. */
body.wms-facelift-body .modal .waive-signaturemd + div {
    font-size: 14px;
    line-height: 1.5;
    color: var(--wms-text-muted, #6B6E8F);
    margin-bottom: 4px;
}

/* Two stragglers in the Location tab that are plain DIVs rather than the
   <label>/.labeltext elements the rule above targets: `div.label` (the
   "Location Type" caption) and `#mustmatch` (helper copy under the name
   fields). Align them with the rest of the modal's label / helper scale. */
body.wms-facelift-body .modal div.label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: none;
    color: var(--wms-text-muted, #6B6E8F);
    margin-bottom: 6px;
}
body.wms-facelift-body .modal #mustmatch,
body.wms-facelift-body .modal .must-match-the-name {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--wms-text-muted, #6B6E8F);
    margin: -8px 0 14px;
}

/* ===== BDODETAIL STATE VIEWS — owned by bdodetail-states agent ===== */
.wms-bdodetail-state {
    min-height: 100%;
    padding: 28px 24px 42px;
    overflow-x: hidden;
}
.wms-bdodetail-state > .alertContainer,
.wms-bdodetail-state > .errorContainer {
    max-width: var(--wms-maxw-tracking-page);
    margin: 0 auto 16px;
}
.wms-bdodetail-state .wms-state-options,
.wms-bdodetail-state > .wms-card,
.wms-bdodetail-state > form > .wms-card,
.wms-bdodetail-state #editCustomerInfo.wms-card,
.wms-bdodetail-state .wms-detail-card,
.wms-bdodetail-state .wms-form-card,
.wms-bdodetail-state .wms-terms-card {
    max-width: var(--wms-maxw-tracking-page);
    margin-left: auto;
    margin-right: auto;
}
.wms-bdodetail-state .wms-state-options {
    padding: 28px 32px;
}
.wms-bdodetail-state .wms-state-options h1,
.wms-bdodetail-state .wms-state-options h2,
.wms-bdodetail-state .wms-state-options h3,
.wms-bdodetail-state .wms-state-options p,
.wms-bdodetail-state .wms-state-options li,
.wms-bdodetail-state .wms-state-options .info,
.wms-bdodetail-state .wms-state-options div {
    color: #fff;
}
.wms-bdodetail-state .wms-state-options h1,
.wms-bdodetail-state .wms-state-options h3 {
    font-family: var(--wms-font);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 12px;
}
.wms-bdodetail-state .wms-state-options p {
    max-width: 820px;
    font-size: 15px;
    line-height: 1.55;
    opacity: .94;
}
.wms-bdodetail-state .wms-state-options form {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}
.wms-bdodetail-state .wms-state-options li.info {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: var(--wms-radius-lg);
    background: rgba(255,255,255,.13);
}
.wms-bdodetail-state .wms-state-options li.info > div {
    float: none !important;
    text-align: left !important;
}
.wms-bdodetail-state .wms-banner--hold {
    background: linear-gradient(150deg, var(--wms-navy-700), var(--wms-indigo-600) 65%, var(--wms-cyan-400));
}
.wms-bdodetail-state .customerinfo,
.wms-bdodetail-state .bdoinfo,
.wms-bdodetail-state .wms-form-card,
.wms-bdodetail-state .wms-terms-card,
.wms-bdodetail-state .wms-edit-card,
.wms-bdodetail-state .wms-driver-card,
.wms-bdodetail-state .wms-map-card,
.wms-bdodetail-state .wms-email-card,
.wms-bdodetail-state .wms-confirm-card {
    width: 100%;
    min-width: 0;
    float: none !important;
    clear: none !important;
}
.wms-bdodetail-state > .customerinfo.wms-card,
.wms-bdodetail-state > .bdoinfo.wms-card,
.wms-bdodetail-state > .wms-driver-card,
.wms-bdodetail-state > .wms-map-card {
    display: block;
}
.wms-bdodetail-state > .customerinfo.wms-card + .bdoinfo.wms-card,
.wms-bdodetail-state > .bdoinfo.wms-card + .wms-driver-card,
.wms-bdodetail-state > .wms-driver-card + .wms-map-card {
    margin-top: 0;
}
.wms-bdodetail-state .wms-card h1,
.wms-bdodetail-state .wms-card h3,
.wms-bdodetail-state #TOC h1 {
    color: var(--wms-ink-900);
    font-family: var(--wms-font);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin: 0 0 18px !important;
    padding: 0 !important;
}
.wms-bdodetail-state .row {
    display: grid;
    grid-template-columns: minmax(150px, .42fr) minmax(0, 1fr);
    gap: 10px 18px;
    align-items: start;
    margin: 0;
    padding: 10px 0;
    border-bottom: 1px solid var(--wms-border-100);
}
.wms-bdodetail-state .row:last-child,
.wms-bdodetail-state .row:empty {
    border-bottom: 0;
}
.wms-bdodetail-state .label,
.wms-bdodetail-state .label2,
.wms-bdodetail-state label,
.wms-bdodetail-state .summary-detail-label {
    color: var(--wms-ink-600);
    float: none !important;
    font-size: 12px;
    font-weight: 700 !important;
    letter-spacing: .06em;
    line-height: 1.35;
    margin: 0;
    padding: 0;
    text-transform: none;
    width: auto !important;
}
.wms-bdodetail-state .data,
.wms-bdodetail-state .details-align-right,
.wms-bdodetail-state .details-align-left {
    color: var(--wms-ink-800);
    float: none !important;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: 0 !important;
    width: auto !important;
}
.wms-bdodetail-state input[type="text"],
.wms-bdodetail-state input[type="email"],
.wms-bdodetail-state input[type="tel"],
.wms-bdodetail-state select,
.wms-bdodetail-state textarea {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100%;
    min-height: 44px;
    border: 1px solid var(--wms-border-200);
    border-radius: var(--wms-radius-md);
    padding: 11px 13px;
    color: var(--wms-ink-800);
    background: #fff;
    box-shadow: inset 0 1px 2px rgba(30,20,90,.03);
}
.wms-bdodetail-state textarea {
    min-height: 130px;
    resize: vertical;
}
.wms-bdodetail-state input[type="text"]:focus,
.wms-bdodetail-state select:focus,
.wms-bdodetail-state textarea:focus {
    border-color: var(--wms-indigo-500);
    box-shadow: 0 0 0 3px rgba(106,92,249,.12);
    outline: none;
}
.wms-bdodetail-state input.button,
.wms-bdodetail-state input.disabledButton,
.wms-bdodetail-state input[type="button"],
.wms-bdodetail-state input[type="submit"] {
    box-sizing: border-box;
    min-height: 44px;
    border: 0;
    border-radius: 999px;
    padding: 12px 22px;
    font-family: var(--wms-font);
    font-size: 14px;
    font-weight: 700;
    line-height: normal;
    text-transform: none;
}
.wms-bdodetail-state input.button,
.wms-bdodetail-state input[type="button"],
.wms-bdodetail-state input[type="submit"]:not([disabled]) {
    color: #fff;
    background: var(--wms-gradient-button);
    box-shadow: var(--wms-shadow-btn-primary);
    cursor: pointer;
}
.wms-bdodetail-state input.disabledButton,
.wms-bdodetail-state input[disabled] {
    color: var(--wms-ink-500) !important;
    background: var(--wms-surface-50) !important;
    border: 1px solid var(--wms-border-200) !important;
    box-shadow: none !important;
    cursor: not-allowed;
}
.wms-bdodetail-state .wms-state-options input.button,
.wms-bdodetail-state .wms-state-options input[type="submit"] {
    color: var(--wms-indigo-700);
    background: #fff;
    box-shadow: 0 10px 22px rgba(21,23,66,.14);
}
.wms-bdodetail-state .wms-form-card li {
    margin: 0 0 10px 18px;
    color: var(--wms-ink-700);
    line-height: 1.55;
}
.wms-bdodetail-state .wms-form-card p,
.wms-bdodetail-state .wms-terms-card p {
    color: var(--wms-ink-700);
    line-height: 1.65;
    margin: 0 0 12px;
}
.wms-bdodetail-state .wms-form-card p label {
    color: var(--wms-ink-800);
    display: inline;
    text-transform: none;
    letter-spacing: normal;
    font-size: 14px;
}
.wms-bdodetail-state .wms-map-box,
.wms-bdodetail-state #map_canvas {
    width: 100% !important;
    max-width: 100%;
    height: 320px !important;
    border-radius: var(--wms-radius-lg);
    overflow: hidden;
    background: var(--wms-surface-50);
}
.wms-bdodetail-state #driverInformation img {
    width: 150px;
    height: 150px;
    border-radius: var(--wms-radius-lg);
    object-fit: cover;
    box-shadow: var(--wms-shadow-flat);
}
.wms-bdodetail-state #emailDriver {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    border: 1px solid var(--wms-border-200);
    border-radius: 999px;
    padding: 10px 18px;
    font-weight: 700;
    text-decoration: none;
}
.wms-state-hold-form form,
.wms-state-waive-form form {
    max-width: var(--wms-maxw-tracking-page);
    margin: 0 auto;
}
.wms-state-hold-form #customerInformationContainer,
.wms-state-waive-form #customerInformationContainer {
    padding: var(--wms-pad-desktop) !important;
}
.wms-state-update #editCustomerInfo,
.wms-state-interstitial .wms-loading-card {
    max-width: 680px;
}
.wms-state-interstitial {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 62vh;
}
.wms-state-interstitial .wms-loading-card {
    text-align: center;
    padding: 36px 32px;
}
.wms-state-interstitial .hi-john {
    color: var(--wms-ink-900);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}
.wms-state-interstitial .we-found-your-info,
.wms-state-interstitial .tracking {
    color: var(--wms-ink-600);
    font-size: 15px;
    font-weight: 700;
}
.wms-state-interstitial .imgairlinetracking {
    max-width: 160px;
    max-height: 80px;
    margin: 22px auto;
    object-fit: contain;
}
/* The Bags (VIP) mark is a near-square badge with a small tagline, so the 80px
   cap sized for wide airline wordmarks left it small. */
.wms-state-interstitial .imgairlinetracking[src$="bags-logo.svg"] {
    width: auto;
    height: 140px;
    max-width: none;
    max-height: none;
}
.wms-loading-spinner {
    width: 44px;
    height: 44px;
    margin: 18px auto 12px;
    border-radius: 50%;
    border: 4px solid var(--wms-border-200);
    border-top-color: var(--wms-indigo-500);
    animation: wms-spin .85s linear infinite;
}
@keyframes wms-spin { to { transform: rotate(360deg); } }
@media (min-width: 761px) {
    .wms-state-delivery,
    .wms-state-driver,
    .wms-state-onhold,
    .wms-state-delivered {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 20px;
    }
    .wms-state-delivery > .alertContainer,
    .wms-state-delivery > .errorContainer,
    .wms-state-delivery > .wms-state-options,
    .wms-state-delivery > #editCustomerInfo,
    .wms-state-driver > .alertContainer,
    .wms-state-driver > .errorContainer,
    .wms-state-driver > .wms-state-options,
    .wms-state-driver > #editCustomerInfo,
    .wms-state-onhold > .alertContainer,
    .wms-state-onhold > .errorContainer,
    .wms-state-onhold > .wms-state-options,
    .wms-state-onhold > #editCustomerInfo,
    .wms-state-delivered > .wms-state-options,
    .wms-state-delivered > #confirmationContainer {
        grid-column: 1 / -1;
    }
}
@media (max-width: 760px) {
    .wms-bdodetail-state {
        padding: 18px 16px 30px;
    }
    .wms-bdodetail-state .wms-state-options,
    .wms-state-hold-form #customerInformationContainer,
    .wms-state-waive-form #customerInformationContainer {
        padding: var(--wms-pad-mobile) !important;
    }
    .wms-bdodetail-state .wms-state-options li.info,
    .wms-bdodetail-state .row {
        grid-template-columns: 1fr;
    }
    .wms-bdodetail-state .wms-state-options li.info > div {
        text-align: left !important;
    }
    .wms-bdodetail-state input.button,
    .wms-bdodetail-state input.disabledButton,
    .wms-bdodetail-state input[type="button"],
    .wms-bdodetail-state input[type="submit"] {
        width: 100%;
        margin-top: 8px;
    }
    .wms-state-interstitial .hi-john {
        font-size: 24px;
    }
}


/* Materialize gives every .row a -11.25px horizontal margin. Where a legacy
   .row is used purely as a wrapper around a new facelift component (e.g. the
   AA FAQ mobile "contact support" row wrapping .wms-contact-cards) that
   negative margin pushes the component ~11px past the viewport and creates a
   horizontal scrollbar on phones. Zero it only for rows that actually wrap a
   facelift component, so untouched legacy grid rows keep their gutters. */
body.wms-facelift-body .row:has(> [class*="wms-"]) {
    margin-left: 0;
    margin-right: 0;
}

/* ==========================================================================
   Duplicate page titles + contact-section rhythm
   ========================================================================== */
/* PrivacyPolicy.aspx / TermsOfService.aspx keep the original SP Plus legal
   copy verbatim, which opens with its own <h1> ("SP Plus Corporation Privacy
   Policy"). The facelift hero above it already states the page name, so the
   legacy heading rendered as a second, smaller title. Hide only the first
   heading of the legal body -- every subsequent heading is real section
   structure and must stay. Covers the EN and FR blocks, and the FR Terms
   variant whose <h1> carries no .entry-title class. */
body.wms-facelift-body .wms-legal-shell .entry-content > h1:first-of-type {
    display: none;
}
/* Breathing room between "Can't find what you're looking for?" and the
   support cards. The heading previously sat directly on top of the cards. */
body.wms-facelift-body .wms-contact-section .wms-section-heading {
    margin: 0 0 32px;
}
body.wms-facelift-body .wms-contact-section {
    padding-top: 8px;
}
@media (max-width: 760px) {
    body.wms-facelift-body .wms-contact-section .wms-section-heading {
        margin-bottom: 24px;
    }
}

/* BDODetail map card split from the trip-info card. */
body.wms-facelift-body .wms-map-card {
    background: #fff;
    border: 1px solid var(--wms-border-100);
    border-radius: var(--wms-radius-xl);
    box-shadow: var(--wms-shadow-flat);
    margin-top: 18px;
    overflow: hidden;
}

body.wms-facelift-body .wms-map-card__header {
    margin-bottom: 16px;
}

body.wms-facelift-body .wms-map-card .google-maps,
body.wms-facelift-body .wms-map-card .picbagslandscapemap {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: 320px !important;
    border-radius: var(--wms-radius-md);
    overflow: hidden;
}

body.wms-facelift-body .wms-map-card #map_canvas {
    width: 100% !important;
    height: 100% !important;
    box-shadow: none;
}

body.wms-facelift-body .wms-map-card .imglandscapemap {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border: 0;
    margin-left: 0;
    display: block;
}

@media (max-width: 760px) {
    body.wms-facelift-body .wms-map-card .google-maps,
    body.wms-facelift-body .wms-map-card .picbagslandscapemap {
        height: 240px !important;
    }
}

/* Contact-support modal heading. The legacy .contact-support / .we-ll-get-
   back-to-yo divs inherited plain body type (15px/400) from the modal shell,
   so the dialog opened with no visual title. Mirrors the .waive-signaturemd
   treatment used by the delivery modals. */
body.wms-facelift-body .modal .contact-support {
    font-family: var(--wms-font);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--wms-ink-900);
    text-transform: none;
    margin: 0 0 4px;
    padding-right: 40px;
}
body.wms-facelift-body .modal .we-ll-get-back-to-yo {
    font-size: 14px;
    color: var(--wms-ink-500, #6B6F8D);
    margin: 0 0 18px;
    padding-right: 40px;
}

/* BDODetail tracking info cards: contact, delivery, airline/reference refresh. */
body.wms-facelift-body .wms-tracking-info-card {
    overflow: hidden;
}

body.wms-facelift-body .wms-tracking-info-card .driverpadding {
    margin-bottom: 0;
}

body.wms-facelift-body .wms-tracking-reference {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 16px;
    border: 1px solid var(--wms-border-100);
    border-radius: var(--wms-radius-lg);
    background: linear-gradient(135deg, #fff, var(--wms-surface-50));
}

body.wms-facelift-body .wms-tracking-reference__number {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    min-width: 0;
}

body.wms-facelift-body .wms-tracking-airline {
    display: block;
    margin-top: 2px;
    letter-spacing: 0.03em;
}

body.wms-facelift-body .wms-tracking-bdo-chip {
    margin-left: 0;
    padding: 7px 12px;
    border-color: var(--wms-navy-border);
    background: var(--wms-navy-bg);
    color: var(--wms-indigo-700);
    font-family: var(--wms-font);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
}

body.wms-facelift-body .wms-tracking-card-header {
    margin-top: 18px;
    margin-bottom: 10px;
}

body.wms-facelift-body .wms-tracking-info-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

body.wms-facelift-body .wms-tracking-info-row {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px;
    border: 1px solid var(--wms-border-100);
    border-radius: var(--wms-radius-lg);
    background: #fff;
    box-shadow: 0 8px 18px rgba(30,20,90,0.04);
}

body.wms-facelift-body .wms-tracking-info-row .wms-contact-card__icon,
body.wms-facelift-body .wms-tracking-reference .wms-contact-card__icon {
    width: 40px;
    height: 40px;
    border: 1px solid var(--wms-navy-border);
    background: var(--wms-navy-bg);
    box-shadow: none;
}

body.wms-facelift-body .wms-tracking-info-row .wms-contact-card__icon img {
    width: 20px;
    height: 20px;
    filter: none;
}

body.wms-facelift-body .wms-tracking-info-row__glyph {
    color: var(--wms-indigo-600);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}

body.wms-facelift-body .wms-tracking-info-row .wms-contact-card__content,
body.wms-facelift-body .wms-tracking-reference .wms-contact-card__content {
    flex: 1 1 auto;
    min-width: 0;
}

body.wms-facelift-body .wms-tracking-info-row .wms-contact-card__title,
body.wms-facelift-body .wms-tracking-reference .wms-contact-card__title {
    font-size: 11px;
    letter-spacing: 0.09em;
    text-transform: none;
    color: var(--wms-ink-500);
}

body.wms-facelift-body .wms-tracking-info-row .wms-contact-card__value {
    margin-top: 3px;
    color: var(--wms-ink-900);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

body.wms-facelift-body .wms-tracking-info-row .john-smith-johnsmith,
body.wms-facelift-body .wms-tracking-info-row .john-smith-123-anywh,
body.wms-facelift-body .wms-tracking-info-row .please-drop-it-off-n {
    margin-top: 3px;
}

body.wms-facelift-body .wms-tracking-info-row .please-drop-it-off-n {
    padding: 0;
    border: 0;
    background: transparent;
}

@media (max-width: 760px) {
    body.wms-facelift-body .wms-tracking-reference {
        grid-template-columns: auto minmax(0, 1fr);
    }

    body.wms-facelift-body .wms-tracking-reference__number {
        grid-column: 1 / -1;
        align-items: flex-start;
        padding-top: 4px;
    }

    body.wms-facelift-body .wms-tracking-info-row {
        padding: 12px;
    }
}

/* ==========================================================================
   Header logo scale-up + homepage lookup-card rhythm
   ========================================================================== */

/* Grow the wordmark without growing the bar. The header's height was being
   set by its tallest flex child (the nav links / language select on desktop,
   the 39px hamburger on mobile) plus 14px of vertical padding. Pinning
   min-height to the previously-measured height and trading padding for logo
   height keeps the bar visually identical while the mark gets ~40% larger. */
body.wms-facelift-body .wms-header {
    padding-top: 8px;
    padding-bottom: 8px;
    min-height: 74px;
    box-sizing: border-box;
}
body.wms-facelift-body .wms-header__logo {
    height: 48px;
    width: auto;
}
@media (max-width: 760px) {
    body.wms-facelift-body .wms-header {
        min-height: 68px;
    }
    body.wms-facelift-body .wms-header__logo {
        height: 44px;
    }
}

/* Breathing room between the hero headline and its supporting line. */
body.wms-facelift-body .wms-hero__title {
    margin-bottom: 20px;
}

/* Lookup-card vertical rhythm: title -> helper -> first field label. */
body.wms-facelift-body .wms-lookup-card__title {
    margin-bottom: 10px;
}
body.wms-facelift-body .wms-lookup-card__helper {
    margin-bottom: 26px;
}

/* "What is this?" help affordance. It previously rendered as plain 13px grey
   text with no cursor change, so nothing signalled that it carried a tooltip.
   Rendered as a bordered chip with a circled question mark instead. */
body.wms-facelift-body .wms-lookup-card__what-is {
    text-align: left;
    margin-top: 10px;
}
body.wms-facelift-body .wms-help-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px 6px 7px;
    border: 1px solid var(--wms-border, #E4E6F0);
    border-radius: 999px;
    background: var(--wms-surface-100, #F6F7FB);
    color: var(--wms-ink-700, #3D4166);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1;
    cursor: help;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
body.wms-facelift-body .wms-help-chip:hover,
body.wms-facelift-body .wms-help-chip:focus-visible {
    background: var(--wms-brand-050, #EEEBFF);
    border-color: var(--wms-brand-500, #5B4FE8);
    color: var(--wms-brand-600, #4A3FD4);
    outline: none;
}
body.wms-facelift-body .wms-help-chip__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border-radius: 50%;
    background: var(--wms-brand-500, #5B4FE8);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

/* Materialize renders tooltips into a body-level div; the legacy sheets that
   used to style it are no longer loaded on converted views. */
body.wms-facelift-body .material-tooltip {
    max-width: 280px;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--wms-ink-900, #211F3D);
    color: #fff;
    font-family: var(--wms-font);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.45;
    text-align: left;
    box-shadow: 0 10px 28px rgba(20,18,50,.28);
}

/* ==========================================================================
   Tracking: last-status summary + "Didn't receive your baggage?" action
   --------------------------------------------------------------------------
   #outdelivery previously rendered as bare text floating directly on the page
   background between the stepper and the trip-info card, with the support
   button hanging off to the right. Promoted to a real card so the row reads
   as one unit and matches .cardtripinfo / .wms-map-card.
   ========================================================================== */
body.wms-facelift-body #outdelivery {
    background: #fff;
    border: 1px solid var(--wms-border, #E4E6F0);
    border-radius: var(--wms-radius-lg, 16px);
    box-shadow: var(--wms-shadow-card, 0 1px 3px rgba(20,18,50,.06));
    padding: 20px 24px;
    margin: 20px 0 0;
}
body.wms-facelift-body #outdelivery > .row {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
body.wms-facelift-body #outdelivery > .row > .col {
    width: auto;
    flex: 1 1 auto;
    padding: 0;
    margin: 0;
    min-width: 0;
}
body.wms-facelift-body #outdelivery .out-for-delivery {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--wms-ink-900, #211F3D);
    margin-bottom: 2px;
}
body.wms-facelift-body #outdelivery .picked-up-2-bags-tod {
    font-size: 14px;
    font-weight: 500;
    color: var(--wms-ink-550, #6B6F8D);
    line-height: 1.5;
}
body.wms-facelift-body #outdelivery .boldNoBags {
    font-weight: 700;
    color: var(--wms-ink-700, #3D4166);
}
body.wms-facelift-body #outdelivery #statusbtns {
    flex: 0 0 auto;
}
body.wms-facelift-body #outdelivery .buttonbox,
body.wms-facelift-body #outdelivery .waivesignature {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    width: auto;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
}
body.wms-facelift-body #outdelivery .didnotreceiveyour {
    font-size: 13px;
    font-weight: 600;
    color: var(--wms-ink-550, #6B6F8D);
    text-align: right;
}
@media (max-width: 760px) {
    body.wms-facelift-body #outdelivery {
        padding: 18px;
    }
    body.wms-facelift-body #outdelivery > .row {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }
    body.wms-facelift-body #outdelivery .buttonbox,
    body.wms-facelift-body #outdelivery .waivesignature {
        align-items: stretch;
    }
    body.wms-facelift-body #outdelivery .didnotreceiveyour {
        text-align: left;
    }
    body.wms-facelift-body #outdelivery .holdbag .btn {
        width: 100%;
    }
}

/* An earlier pass promoted `.col:has(> .out-for-delivery)` to a card of its
   own. Now that #outdelivery itself is the card, that inner treatment renders
   as a nested white box -- flatten it back to a plain block. */
body.wms-facelift-body #outdelivery > .row > .col:has(> .out-for-delivery) {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
    width: auto;
    max-width: none;
    flex: 1 1 auto;
}

/* Same trap as `.modal .marginbutton`: the #outdelivery .buttonbox display:flex
   rule above is more specific than the generic .desktop/.mobile toggle, so it
   resurrected the hidden half and rendered BOTH Waive Signature buttons.
   Re-assert the toggle at matching specificity inside this scope. */
body.wms-facelift-body #outdelivery .buttonbox.mobile,
body.wms-facelift-body #outdelivery .waivesignature.mobile {
    display: none;
}
@media (max-width: 760px) {
    body.wms-facelift-body #outdelivery .buttonbox.desktop,
    body.wms-facelift-body #outdelivery .waivesignature.desktop {
        display: none;
    }
    body.wms-facelift-body #outdelivery .buttonbox.mobile,
    body.wms-facelift-body #outdelivery .waivesignature.mobile {
        display: flex;
    }
}
/* The mobile variant nests its button one level deeper (.buttonbox.mobile >
   .row > .col) than the desktop one, so give that wrapper the same treatment. */
@media (max-width: 760px) {
    body.wms-facelift-body #outdelivery .buttonbox.mobile > .row {
        display: flex;
        flex-direction: column;
        margin: 0;
        width: 100%;
    }
    body.wms-facelift-body #outdelivery .buttonbox.mobile > .row > .col {
        width: 100%;
        padding: 0;
    }
    body.wms-facelift-body #outdelivery .buttonbox.mobile .btn {
        width: 100%;
    }
}

/* ==========================================================================
   Tracking action buttons (.rectangle-2)
   --------------------------------------------------------------------------
   These were small, uniformly grey and visually indistinguishable. The 18
   inline `style="padding:0 16px!important"` attributes they carried existed
   only to out-rank the legacy sheets, which converted views no longer load,
   so they were removed from the markup and sizing now lives here.
   Buttons are keyed off their modal target since all four share one class.
   ========================================================================== */
body.wms-facelift-body .wms-facelift a.btn.rectangle-2,
body.wms-facelift-body #outdelivery a.btn.rectangle-2 {
    height: auto;
    min-height: 46px;
    line-height: 1.2;
    padding: 0 22px;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: none;
    box-shadow: 0 1px 2px rgba(20,18,50,.08);
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
body.wms-facelift-body a.btn.rectangle-2 .valign-wrapper {
    height: auto;
    min-height: 0;
    line-height: normal;
}
body.wms-facelift-body a.btn.rectangle-2 .icons {
    width: 18px;
    height: 18px;
}
body.wms-facelift-body a.btn.rectangle-2:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(20,18,50,.16);
}

/* The base rule above is out-ranked by an earlier `background:#fff !important`
   on .rectangle-2, so the colour variants have to match that weight. */

/* Reschedule Delivery -- primary action. */
body.wms-facelift-body a.btn.rectangle-2[href="#holdBag"] {
    background: var(--wms-indigo-600) !important;
    color: #fff !important;
    border-color: var(--wms-indigo-600) !important;
    box-shadow: var(--wms-shadow-btn-primary) !important;
}
body.wms-facelift-body a.btn.rectangle-2[href="#holdBag"]:hover {
    background: var(--wms-indigo-700) !important;
    box-shadow: var(--wms-shadow-btn-primary-hover) !important;
}
body.wms-facelift-body a.btn.rectangle-2[href="#holdBag"] .icons {
    filter: brightness(0) invert(1);
}

/* Waive / Require Signature -- secondary, tinted rather than solid. */
body.wms-facelift-body a.btn.rectangle-2[href="#waiveSignature"],
body.wms-facelift-body a.btn.rectangle-2[href="#requireSignature"] {
    background: #F0EEFF !important;
    color: var(--wms-indigo-700) !important;
    border-color: #C9C2FA !important;
}
body.wms-facelift-body a.btn.rectangle-2[href="#waiveSignature"]:hover,
body.wms-facelift-body a.btn.rectangle-2[href="#requireSignature"]:hover {
    background: #E4E0FF !important;
    border-color: var(--wms-indigo-500) !important;
}

/* Contact Support -- neutral dark. */
body.wms-facelift-body a.btn.rectangle-2[href="#ContactUs"] {
    background: var(--wms-ink-900) !important;
    color: #fff !important;
    border-color: var(--wms-ink-900) !important;
}
body.wms-facelift-body a.btn.rectangle-2[href="#ContactUs"]:hover {
    background: #322F57 !important;
}
body.wms-facelift-body a.btn.rectangle-2[href="#ContactUs"] .icons {
    filter: brightness(0) invert(1);
}
/* The signature/reschedule pair sits in one row; keep them on one line on
   desktop and full-width stacked on phones. */
body.wms-facelift-body #outdelivery .waivesignaturepadding,
body.wms-facelift-body #outdelivery .holdbag {
    display: inline-flex;
    margin: 0;
}
body.wms-facelift-body #outdelivery .waivesignature {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
}
@media (max-width: 760px) {
    body.wms-facelift-body #outdelivery .waivesignature {
        justify-content: stretch;
    }
    body.wms-facelift-body #outdelivery .waivesignaturepadding,
    body.wms-facelift-body #outdelivery .holdbag {
        display: flex;
        flex: 1 1 100%;
    }
    body.wms-facelift-body #outdelivery a.btn.rectangle-2 {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   Banner status pill (merged from the old third banner)
   ========================================================================== */
body.wms-facelift-body .wms-banner__pill--status {
    text-align: right;
}
body.wms-facelift-body .wms-banner__pill--status .wms-banner__pill-value {
    white-space: nowrap;
}
/* Once the status half is lifted into the banner, #outdelivery is only an
   action bar -- drop the card chrome so it reads as a toolbar, not a panel. */
body.wms-facelift-body #outdelivery.wms-actions-only {
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: 16px 0 0;
}
body.wms-facelift-body #outdelivery.wms-actions-only > .row {
    justify-content: flex-end;
}
@media (max-width: 760px) {
    body.wms-facelift-body #outdelivery.wms-actions-only > .row {
        justify-content: stretch;
    }
}

/* With the status column lifted into the banner, the leftover grid column must
   reclaim the full row so the action buttons can sit side by side instead of
   wrapping in a 227px stub. Width only -- `display` is deliberately untouched
   here so the .desktop/.mobile toggle keeps working. */
body.wms-facelift-body #outdelivery.wms-actions-only > .row > #statusbtns {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    left: auto;
}
body.wms-facelift-body #outdelivery.wms-actions-only .buttonbox {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: flex-end;
}
@media (max-width: 760px) {
    body.wms-facelift-body #outdelivery.wms-actions-only .buttonbox {
        flex-direction: column;
        align-items: stretch;
    }
}

/* One of the two buttons was still rendering title-case because an earlier
   rule pins text-transform; normalise both to sentence case, which reads
   better at this size than the half-uppercase mix. */
body.wms-facelift-body a.btn.rectangle-2 {
    text-transform: none !important;
    font-size: 14.5px !important;
}
/* Flex `gap` is not reaching the stacked buttons (they sit inside per-button
   wrapper spans), so space them explicitly on phones. */
@media (max-width: 760px) {
    body.wms-facelift-body #outdelivery.wms-actions-only .waivesignaturepadding,
    body.wms-facelift-body #outdelivery.wms-actions-only .holdbag,
    body.wms-facelift-body #outdelivery.wms-actions-only .buttonbox > * {
        margin-bottom: 12px;
    }
    body.wms-facelift-body #outdelivery.wms-actions-only .buttonbox > *:last-child {
        margin-bottom: 0;
    }
}

/* ==========================================================================
   Error / session-expired pages
   Folded in from page-scoped <style> blocks so every converted view is styled
   from one cacheable sheet.
   ========================================================================== */

.wms-state-stage {
  align-items: center;
  background:
    radial-gradient(circle at 14% 22%, rgba(129, 107, 255, 0.24), transparent 32%),
    radial-gradient(circle at 88% 78%, rgba(55, 194, 227, 0.19), transparent 30%),
    linear-gradient(145deg, #24204a 0%, #4d49aa 58%, #326d9d 100%);
  display: flex;
  justify-content: center;
  min-height: 600px;
  overflow: hidden;
  padding: clamp(64px, 9vw, 108px) 24px;
  position: relative;
}

body.wms-facelift-body #containers.wms-facelift-page.wms-notavailable-page {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  margin: 0;
  max-width: none;
  padding: 0;
  width: 100%;
}

.wms-notavailable-page .wms-state-stage {
  flex: 1 0 auto;
  width: 100%;
}

.wms-state-stage .wms-hero__dotgrid {
  opacity: 0.16;
}

.wms-state-card {
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(18, 14, 57, 0.28);
  max-width: 620px;
  padding: clamp(34px, 5vw, 52px);
  position: relative;
  text-align: center;
  width: 100%;
  z-index: 2;
}

.wms-state-card__icon {
  align-items: center;
  background: linear-gradient(135deg, var(--wms-brand-500), #4589e6);
  border-radius: 20px;
  box-shadow: 0 12px 28px rgba(93, 83, 224, 0.28);
  display: flex;
  height: 72px;
  justify-content: center;
  margin: 0 auto 24px;
  transform: rotate(-3deg);
  width: 72px;
}

.wms-state-card__icon img {
  height: 34px;
  transform: rotate(3deg);
  width: 34px;
}

.wms-state-card .wms-card__eyebrow {
  color: var(--wms-brand-600);
  margin-bottom: 10px;
}

.wms-state-card h1 {
  color: var(--wms-ink-900);
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.1;
  margin: 0;
}

.wms-state-card__message {
  color: var(--wms-ink-700);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.55;
  margin: 20px auto 0;
  max-width: 470px;
}

.wms-state-card__hint {
  color: var(--wms-ink-600);
  font-size: 15px;
  line-height: 1.6;
  margin: 10px auto 0;
  max-width: 470px;
}

.wms-state-card__actions {
  justify-content: center;
  margin-top: 30px;
}

.wms-state-card__actions .wms-btn {
  border-radius: 999px;
  text-transform: none;
}

.wms-state-card__actions .wms-btn--secondary img {
  filter: none;
}

@media (max-width: 600px) {
  .wms-state-stage {
    min-height: 540px;
    padding: 42px 16px;
  }

  .wms-state-card {
    border-radius: 20px;
    padding: 32px 22px;
  }

  .wms-state-card__icon {
    height: 64px;
    width: 64px;
  }

  .wms-state-card__actions {
    flex-direction: column;
  }

  .wms-state-card__actions .wms-btn {
    justify-content: center;
    width: 100%;
  }
}

    .wms-error-page .wms-error-card {
      margin-top: 0;
      text-align: left;
    }

    .wms-error-page .wms-error-card h2 {
      color: var(--wms-ink-900);
      font-size: 26px;
      font-weight: 700;
      letter-spacing: -0.02em;
      line-height: 1.15;
      margin: 0 0 12px;
    }

    .wms-error-page .wms-error-card p,
    .wms-error-page .wms-error-detail {
      color: var(--wms-ink-600);
      font-size: 15px;
      line-height: 1.6;
      margin: 0;
    }

    .wms-error-page .wms-error-detail {
      background: var(--wms-surface-50);
      border: 1px solid var(--wms-border-200);
      border-radius: var(--wms-radius-md);
      margin-top: 18px;
      overflow-wrap: anywhere;
      padding: 14px 16px;
    }

    .wms-error-page .wms-error-actions {
      justify-content: center;
      margin-top: 24px;
    }

    .wms-error-page .wms-error-actions .wms-btn {
      border-radius: 999px;
      text-transform: none;
    }

    @media (max-width: 760px) {
      .wms-error-page .wms-error-actions .wms-btn {
        justify-content: center;
        width: 100%;
      }
    }

/* ==========================================================================
   Driver update error
   ========================================================================== */

#main > .wms-driver-error {
  background: transparent;
  margin: 0 auto;
  max-width: 620px;
  padding: clamp(56px, 11vh, 118px) 24px;
  width: 100%;
}

.wms-driver-error__card {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--wms-radius-lg);
  box-shadow: 0 20px 44px rgba(22, 75, 135, 0.28);
  padding: clamp(28px, 5vw, 46px);
  text-align: center;
}

.wms-driver-error__eyebrow {
  color: var(--wms-brand-600);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin: 0 0 12px;
  text-transform: none;
}

.wms-driver-error__card h1 {
  color: var(--wms-ink-900);
  font-size: clamp(26px, 4vw, 36px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.12;
  margin: 0;
}

.wms-driver-error__card > p:not(.wms-driver-error__eyebrow) {
  color: var(--wms-ink-600);
  font-size: 16px;
  line-height: 1.6;
  margin: 18px auto 0;
  max-width: 470px;
}

.wms-driver-error__actions {
  justify-content: center;
  margin-top: 28px;
}

.wms-driver-error__actions .wms-btn {
  border-radius: 999px;
  text-transform: none;
}

@media (max-width: 560px) {
  #main > .wms-driver-error {
    padding: 36px 16px;
  }

  .wms-driver-error__card {
    padding: 28px 22px;
  }

  .wms-driver-error__actions .wms-btn {
    justify-content: center;
    width: 100%;
  }
}


/* ==========================================================================
   Airline / BDO row: stack on card width, not viewport width
   --------------------------------------------------------------------------
   The three-column grid (icon | airline | reference) needs roughly 460px. The
   existing stacking rule fired at a 760px *viewport*, but this card sits in a
   41.66% Materialize column, so between about 760px and 1100px the card itself
   is only ~300px wide: the middle track collapsed to 0 and "UNITED AIRLINES"
   printed straight over the BDO number. Sizing off the container instead means
   it reflows whenever the card is actually too narrow, at any viewport.
   ========================================================================== */
body.wms-facelift-body .wms-tracking-info-card {
    container-type: inline-size;
    container-name: wmsinfocard;
}

/* Defensive regardless of breakpoint: grid and flex children default to
   min-width:auto, which refuses to shrink below their content and pushes the
   overflow onto a neighbour instead of wrapping. */
body.wms-facelift-body .wms-tracking-reference > .wms-contact-card__content,
body.wms-facelift-body .wms-tracking-reference__number {
    min-width: 0;
}
body.wms-facelift-body .wms-tracking-airline,
body.wms-facelift-body .wms-tracking-bdo-chip {
    overflow-wrap: anywhere;
}

@container wmsinfocard (max-width: 460px) {
    body.wms-facelift-body .wms-tracking-reference {
        grid-template-columns: auto minmax(0, 1fr);
        row-gap: 10px;
    }

    body.wms-facelift-body .wms-tracking-reference__number {
        grid-column: 1 / -1;
        align-items: flex-start;
        padding-top: 4px;
    }
}

/* ==========================================================================
   Lead with the map, and give it real screen space on small viewports
   --------------------------------------------------------------------------
   The map is the thing customers actually look at, so it sits above Trip Info
   at every width. The column is switched to flex purely so `order` applies;
   only the two known cards are reordered, so any other child of #mbtripinfo
   keeps its document position.

   Flex items do not collapse margins, so the cards' own vertical margins are
   zeroed and the spacing is handed to `gap` -- otherwise the 18px gutter the
   cards previously shared would double to 36px.
   ========================================================================== */
body.wms-facelift-body #mbtripinfo {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

body.wms-facelift-body #mbtripinfo > .wms-map-card {
    order: 1;
}

body.wms-facelift-body #mbtripinfo > .cardtripinfo,
body.wms-facelift-body #mbtripinfo > .cardtripinfooffmap {
    order: 2;
}

body.wms-facelift-body #mbtripinfo > .wms-map-card,
body.wms-facelift-body #mbtripinfo > .cardtripinfo,
body.wms-facelift-body #mbtripinfo > .cardtripinfooffmap {
    margin-top: 0;
    margin-bottom: 0;
}

/* The map was previously being *reduced* to 240px on small screens -- it now
   scales with the viewport instead, clamped so it can never grow tall enough
   to push the trip details off-screen. */
@media (max-width: 760px) {
    /* 52vh fills most of the screen while leaving the banner and the top of
       the trip card visible; svh tracks the collapsing mobile browser chrome
       where supported, with vh as the fallback. */
    body.wms-facelift-body .wms-map-card .google-maps,
    body.wms-facelift-body .wms-map-card .picbagslandscapemap {
        height: clamp(300px, 52vh, 460px) !important;
        height: clamp(300px, 52svh, 460px) !important;
    }

    /* Trim the card's own padding so the map itself gets the extra width
       rather than the gutters growing with it. */
    body.wms-facelift-body .wms-map-card {
        padding-left: 14px;
        padding-right: 14px;
    }
}

/* ==========================================================================
   "What is this?" help marker -- icon only, inline with the field label
   --------------------------------------------------------------------------
   Previously a bordered pill sitting on its own line under the input, which
   added a third block of text to a two-field form. It is now just the circled
   question mark riding next to the Reference # label, so the tooltip is still
   discoverable but the form reads as two clean rows. The pill chrome and the
   label text are switched off here rather than deleted from the shared chip
   styles, which other views still use.
   ========================================================================== */
body.wms-facelift-body .wms-field .label .wms-help-chip {
    display: inline-flex;
    vertical-align: middle;
    margin: -2px 0 0 6px;
    padding: 3px;
    min-width: 24px;
    min-height: 24px;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    border: 0;
    background: none;
    box-shadow: none;
    line-height: 0;
}

body.wms-facelift-body .wms-field .label .wms-help-chip .wms-help-chip__label {
    display: none;
}

body.wms-facelift-body .wms-field .label .wms-help-chip .wms-help-chip__mark {
    margin: 0;
}

/* The mark is the whole affordance now, so give it the hover feedback the
   pill used to carry. */
body.wms-facelift-body .wms-field .label .wms-help-chip:hover .wms-help-chip__mark,
body.wms-facelift-body .wms-field .label .wms-help-chip:focus-visible .wms-help-chip__mark {
    background: var(--wms-indigo-600);
    border-color: var(--wms-indigo-600);
    color: #fff;
}

body.wms-facelift-body .wms-field .label .wms-help-chip:focus-visible {
    outline: 2px solid var(--wms-indigo-600);
    outline-offset: 3px;
}

body.wms-facelift-body :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--wms-indigo-600, #5B4FE8) !important;
    outline-offset: 3px;
}

body.wms-facelift-body .wms-value-card__body {
    margin-top: 8px !important;
}

/* ---------------------------------------------------------------------------
   Tracking info card - three labelled sections
   Adds an "Order info" micro-label above the airline / BDO block so it reads as
   a peer of "Contact info" and "Delivery info", and lets the divider that now
   sits above "Delivery info" breathe.
   --------------------------------------------------------------------------- */
body.wms-facelift-body .wms-order-info-note {
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: none;
    color: var(--wms-ink-700, #4A4A66); /* AB#179647: matches .paddingtripinfo */
}

/* First label in the card should sit flush with the card padding. */
body.wms-facelift-body .wms-tracking-info-card .wms-order-info-note.wms-tracking-card-header {
    margin-top: 0;
    margin-bottom: 10px;
}

/* The heading already provides the gap, so drop the note's own top margin. */
body.wms-facelift-body .wms-tracking-info-card .rectangle-5 + .delivery-info-note.wms-tracking-card-header {
    margin-top: 0;
}

/* Match the rhythm of the existing divider above "Contact info". */
body.wms-facelift-body .wms-tracking-info-card .wms-tracking-info-list + .rectangle-5 {
    margin: 18px 0 14px;
}

/* ==========================================================================
   Action buttons sit under Trip Info
   --------------------------------------------------------------------------
   The Contact Support / Waive Signature / Hold Bag panel is relocated into the
   left column by the script at the foot of Main.aspx (it ships as a sibling
   that renders above the cards). These rules finish the job: it takes the third
   slot in the flex column, sheds the Materialize column width that used to cap
   it at 41.66%, and right-aligns with the cards above it.
   ========================================================================== */
body.wms-facelift-body #mbtripinfo > #outdelivery {
    order: 3;
    width: 100%;
    margin: 0;
}

body.wms-facelift-body #mbtripinfo > #outdelivery .row.paddingtop-outdelivery {
    margin: 0;
    padding: 0;
}

body.wms-facelift-body #mbtripinfo > #outdelivery #statusbtns {
    width: 100%;
    max-width: none;
    flex: 0 0 100%;
    margin: 0;
    padding: 0;
}

/* Keep the buttons flush with the right edge of the cards on desktop, and let
   them run full width once the column stacks. */
body.wms-facelift-body #mbtripinfo > #outdelivery .buttonbox {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
}

body.wms-facelift-body #mbtripinfo > #outdelivery .waivesignature {
    justify-content: flex-end;
}

@media (max-width: 760px) {
    body.wms-facelift-body #mbtripinfo > #outdelivery .buttonbox,
    body.wms-facelift-body #mbtripinfo > #outdelivery .waivesignature {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
    }
}

/* The .buttonbox rule above sets `display`, and being id-scoped it outranks the
   generic .desktop/.mobile toggle -- which would render BOTH button rows. The
   toggle is therefore re-asserted here at matching specificity. Same trap as the
   modal Save/Cancel rows; see the toggle block earlier in this file. */
body.wms-facelift-body #mbtripinfo > #outdelivery .mobile:not(.wms-responsive) {
    display: none;
}

@media (max-width: 760px) {
    body.wms-facelift-body #mbtripinfo > #outdelivery .desktop:not(.wms-responsive) {
        display: none;
    }

    body.wms-facelift-body #mbtripinfo > #outdelivery .mobile:not(.wms-responsive) {
        display: flex;
    }
}

/* The buttons are not direct children of .buttonbox -- they sit inside a nested
   Materialize .row > .col pair, so the gap set on .buttonbox never reached them
   and the stacked mobile buttons ended up flush against each other. The spacing
   is applied on the row that actually contains them, and the columns are flattened
   to full width so the gap is the only thing separating them. Scoped to mobile so
   the desktop row, which already spaces correctly via the column padding, is left
   alone. */
@media (max-width: 760px) {
    body.wms-facelift-body #mbtripinfo > #outdelivery .buttonbox > .row {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin: 0;
    }

    body.wms-facelift-body #mbtripinfo > #outdelivery .buttonbox > .row > .col {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
    }

    /* Legacy spacer on the wrapper span -- the row gap now owns this. */
    body.wms-facelift-body #mbtripinfo > #outdelivery .buttonbox .holdbag {
        margin-bottom: 0;
    }
}

/* ==========================================================================
   Notice card -- long status explanations
   --------------------------------------------------------------------------
   Problem states (Something is Off, We Missed You, Unable to Reach Passenger)
   emit a multi-sentence explanation plus a list of likely causes in the slot
   that short states use for a timestamp. Cramming that into the banner pill
   pushed it several thousand pixels wide, so the script at the foot of
   Main.aspx relocates it here: an amber alert card directly under the banner.
   ========================================================================== */
body.wms-facelift-body .wms-notice {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0 0 18px;
    padding: 18px 20px;
    border: 1px solid #F5D9A8;
    border-left: 4px solid #E8A33D;
    border-radius: var(--wms-radius-lg, 18px);
    background: #FFF9EF;
    box-shadow: var(--wms-shadow-flat, 0 1px 2px rgba(16, 15, 42, 0.04));
}

body.wms-facelift-body .wms-notice__icon {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #E8A33D;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 26px;
    text-align: center;
}

body.wms-facelift-body .wms-notice__body {
    flex: 1 1 auto;
    min-width: 0;
}

body.wms-facelift-body .wms-notice__title {
    margin-bottom: 4px;
    font-size: 15px;
    font-weight: 700;
    color: var(--wms-ink-900, #16152E);
}

/* The relocated node keeps its legacy class, so its old sizing is reset here. */
body.wms-facelift-body .wms-notice__text,
body.wms-facelift-body .wms-notice .wemissedyou {
    margin: 0;
    padding: 0;
    width: auto;
    font-size: 14px;
    line-height: 1.55;
    color: var(--wms-ink-700, #4A4869);
    overflow-wrap: anywhere;
}

body.wms-facelift-body .wms-notice ul.somethingisoff {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

body.wms-facelift-body .wms-notice ul.somethingisoff li {
    position: relative;
    padding-left: 18px;
    margin-bottom: 4px;
}

/* Dot bullets rather than discs, to match the stepper markers. */
body.wms-facelift-body .wms-notice ul.somethingisoff li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 9px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #E8A33D;
}

/* ==========================================================================
   Tracking forms -- compact, readable field rhythm
   --------------------------------------------------------------------------
   These two editors contain the densest forms in the tracking experience.
   Keep their controls comfortably tappable while reducing the oversized
   legacy type and excess vertical space that made the forms feel crowded.
   ========================================================================== */
body.wms-facelift-body #editCustomerContact,
body.wms-facelift-body #editCustomerDeliveryInfo {
    max-width: 620px;
}

body.wms-facelift-body #editCustomerContact .row,
body.wms-facelift-body #editCustomerDeliveryInfo .rowwidth {
    margin-bottom: 12px;
}

body.wms-facelift-body #editCustomerContact label,
body.wms-facelift-body #editCustomerDeliveryInfo label,
body.wms-facelift-body #editCustomerDeliveryInfo div.label {
    font-size: 11.5px;
    line-height: 1.35;
    letter-spacing: .045em;
    margin-bottom: 5px;
}

body.wms-facelift-body #editCustomerContact input[type="text"],
body.wms-facelift-body #editCustomerContact input[type="email"],
body.wms-facelift-body #editCustomerContact input[type="tel"],
body.wms-facelift-body #editCustomerDeliveryInfo input[type="text"],
body.wms-facelift-body #editCustomerDeliveryInfo input[type="email"],
body.wms-facelift-body #editCustomerDeliveryInfo input[type="tel"],
body.wms-facelift-body #editCustomerDeliveryInfo select,
body.wms-facelift-body #editCustomerDeliveryInfo textarea {
    min-height: 42px;
    padding: 9px 12px;
    font-size: 14px;
    line-height: 1.35;
}

body.wms-facelift-body #editCustomerDeliveryInfo .marginleft,
body.wms-facelift-body #editCustomerDeliveryInfo .marginright {
    min-width: 0;
}

body.wms-facelift-body #editCustomerDeliveryInfo .get-notified-of-the,
body.wms-facelift-body #editCustomerContact .get-notified-of-the {
    margin: 0 0 16px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--wms-ink-500);
}

body.wms-facelift-body #editCustomerDeliveryInfo #mustmatch {
    margin: -3px 0 10px;
    font-size: 12px;
}

/* ==========================================================================
   Reschedule Delivery modal
   ========================================================================== */
body.wms-facelift-body #holdBag {
    max-width: 600px;
    padding: 26px 28px 24px;
}

body.wms-facelift-body #holdBag .have-your-bags-deliv {
    height: auto;
    margin: 0 0 16px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--wms-ink-500);
}

body.wms-facelift-body #holdBag .what-should-we-do-wi {
    height: auto;
    margin: 0 0 12px !important;
    font-size: 14px;
    line-height: 1.4;
    color: var(--wms-ink-800);
}

body.wms-facelift-body #holdBag .rectangle-reschedule {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    width: 100%;
    min-height: 112px;
    margin: 0 0 12px !important;
    border: 1px solid var(--wms-border-100);
    border-radius: var(--wms-radius-md);
    background: var(--wms-surface-50);
    overflow: hidden;
}

body.wms-facelift-body #holdBag .rectangle-reschedule.paddingtop {
    padding-top: 0 !important;
}

body.wms-facelift-body #holdBag .rectangle-reschedule > .col.s3,
body.wms-facelift-body #holdBag .rectangle-reschedule > .col.s9 {
    float: none;
    width: 100% !important;
    margin: 0 !important;
    justify-self: stretch;
}

body.wms-facelift-body #holdBag .rectangle-reschedule > .col.s3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 10px;
    background: #F0EEFF;
}

body.wms-facelift-body #holdBag .jun {
    padding: 0 !important;
    color: var(--wms-indigo-700);
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: .08em;
    text-transform: none;
}

body.wms-facelift-body #holdBag .reschedule08 {
    color: var(--wms-ink-900);
    font-size: 29px;
    font-weight: 700;
    line-height: 1.1;
}

body.wms-facelift-body #holdBag .boderdate,
body.wms-facelift-body #holdBag .boderdatenextday {
    height: auto !important;
    min-height: 112px;
    padding: 10px 14px !important;
    border-left: 1px solid var(--wms-border-100) !important;
}

body.wms-facelift-body #holdBag .radio-default {
    height: auto;
    margin: 0;
    padding: 7px 0;
    font-size: 13px !important;
    line-height: 1.35;
}

body.wms-facelift-body #holdBag .radio-default label {
    margin: 0;
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
}

body.wms-facelift-body #holdBag .radio-default label span {
    font-size: 13px;
    line-height: 20px;
}

/* WMS phone inputs use a country-aware formatter; keep its wrapper aligned
   with the existing full-width form fields inside the edit dialogs. */
body.wms-facelift-body .modal .data > .iti {
    display: block;
    width: 100%;
}
body.wms-facelift-body .modal .iti input[type="tel"] {
    box-sizing: border-box;
    width: 100%;
}
body.wms-facelift-body .wms-phone-format-error {
    display: block;
    margin-top: 6px;
    color: #A32828;
    font-size: 12px;
    line-height: 1.4;
}

/* The signature and reschedule dialogs use sentence case, with keyboard-
   accessible brand-colored links and radio controls. */
body.wms-facelift-body #waiveSignature .waive-signaturemd,
body.wms-facelift-body #holdBag .waive-signaturemd {
    text-transform: none;
    letter-spacing: normal;
}
body.wms-facelift-body #waiveSignature .have-your-bags-deliv,
body.wms-facelift-body #waiveSignature .what-should-we-do-wi,
body.wms-facelift-body #waiveSignature .need-even-longer-co,
body.wms-facelift-body #holdBag .have-your-bags-deliv,
body.wms-facelift-body #holdBag .what-should-we-do-wi,
body.wms-facelift-body #holdBag .need-even-longer-co {
    text-transform: none;
    letter-spacing: normal;
}
body.wms-facelift-body #waiveSignature .radio-default label,
body.wms-facelift-body #waiveSignature .radio-default label span,
body.wms-facelift-body #waiveSignature .instructions,
body.wms-facelift-body #waiveSignature .i-have-verified-that,
body.wms-facelift-body #holdBag .radio-default label,
body.wms-facelift-body #holdBag .radio-default label span {
    text-transform: none !important;
    letter-spacing: normal;
}
body.wms-facelift-body #waiveSignature .john-smith-123-anywhmd {
    line-height: 1.55;
}
body.wms-facelift-body #waiveSignature .margin2checkbox > .row {
    margin-top: 24px;
    margin-bottom: 24px;
}
body.wms-facelift-body #waiveSignature .updateWaiveSignature {
    margin: 0;
    float: none;
    font-size: inherit;
    line-height: inherit;
    vertical-align: baseline;
}
body.wms-facelift-body #waiveSignature .wms-waive-customer {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}
body.wms-facelift-body #waiveSignature .margin2checkbox {
    margin-bottom: 24px;
}
body.wms-facelift-body #waiveSignature a.termWaiveSignature,
body.wms-facelift-body #waiveSignature a.updateWaiveSignature,
body.wms-facelift-body #holdBag a.contactsupportreschedule {
    color: var(--wms-indigo-700, #3B31A8) !important;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
body.wms-facelift-body #waiveSignature a.termWaiveSignature:focus-visible,
body.wms-facelift-body #waiveSignature a.updateWaiveSignature:focus-visible,
body.wms-facelift-body #holdBag a.contactsupportreschedule:focus-visible {
    outline: 2px solid var(--wms-indigo-600, #4B3FD4);
    outline-offset: 2px;
}
/* Shared across current and legacy WMS views; leave map layer toggles untouched. */
body.wms-checkbox-theme input[type="checkbox"]:not(.leaflet-control-layers-selector) {
    accent-color: var(--wms-indigo-600, #5B4FE8);
}
body.wms-checkbox-theme input[type="checkbox"]:disabled:not(.leaflet-control-layers-selector) {
    accent-color: #9490D8;
}
body.wms-checkbox-theme input[type="checkbox"].filled-in:checked + span:not(.lever):after,
body.wms-checkbox-theme input[type="checkbox"].filled-in:indeterminate + span:not(.lever):after {
    border-color: var(--wms-indigo-600, #5B4FE8) !important;
    background-color: var(--wms-indigo-600, #5B4FE8) !important;
}
body.wms-checkbox-theme input[type="checkbox"].filled-in:indeterminate + span:not(.lever):before {
    top: 9px;
    left: 5px;
    width: 10px;
    height: 0;
    border: 0;
    border-bottom: 2px solid #fff;
    transform: none;
    transform-origin: center;
}
body.wms-checkbox-theme input[type="checkbox"]:not(.filled-in):not(.leaflet-control-layers-selector):checked + span:not(.lever):before {
    border-right-color: var(--wms-indigo-600, #5B4FE8);
    border-bottom-color: var(--wms-indigo-600, #5B4FE8);
}
body.wms-checkbox-theme input[type="checkbox"]:not(.filled-in):not(.leaflet-control-layers-selector):indeterminate + span:not(.lever):before {
    top: 10px;
    left: 0;
    width: 14px;
    height: 0;
    border: 0;
    border-bottom: 2px solid var(--wms-indigo-600, #5B4FE8);
    transform: none;
}
body.wms-checkbox-theme input[type="checkbox"].filled-in:checked:disabled + span:not(.lever):after,
body.wms-checkbox-theme input[type="checkbox"].filled-in:indeterminate:disabled + span:not(.lever):after {
    border-color: #9490D8 !important;
    background-color: #9490D8 !important;
}
body.wms-checkbox-theme input[type="checkbox"]:not(.filled-in):not(.leaflet-control-layers-selector):checked:disabled + span:not(.lever):before {
    border-right-color: #9490D8;
    border-bottom-color: #9490D8;
}
body.wms-checkbox-theme input[type="checkbox"]:not(.filled-in):not(.leaflet-control-layers-selector):indeterminate:disabled + span:not(.lever):before {
    border-bottom-color: #9490D8;
}
body.wms-checkbox-theme input[type="checkbox"].filled-in:focus-visible + span:not(.lever):after,
body.wms-checkbox-theme input[type="checkbox"]:not(.filled-in):focus-visible + span:not(.lever):before {
    outline: 2px solid var(--wms-indigo-600, #5B4FE8);
    outline-offset: 2px;
}
body.wms-checkbox-theme input[type="checkbox"]:not(.filled-in):not(.leaflet-control-layers-selector):focus-visible {
    outline: 2px solid var(--wms-indigo-600, #5B4FE8);
    outline-offset: 2px;
}
body.wms-facelift-body #waiveSignature input[type="radio"].with-gap:checked + span:before,
body.wms-facelift-body #holdBag input[type="radio"].with-gap:checked + span:before {
    border-color: var(--wms-indigo-600, #4B3FD4) !important;
}
body.wms-facelift-body #waiveSignature input[type="radio"].with-gap:checked + span:after,
body.wms-facelift-body #holdBag input[type="radio"].with-gap:checked + span:after {
    background-color: var(--wms-indigo-600, #4B3FD4) !important;
    border-color: var(--wms-indigo-600, #4B3FD4) !important;
}
body.wms-facelift-body #waiveSignature .buttonmargin input[type="submit"],
body.wms-facelift-body #waiveSignature .buttonmargin a,
body.wms-facelift-body #holdBag .buttonmargin input[type="submit"],
body.wms-facelift-body #holdBag .buttonmargin a {
    text-transform: none;
    letter-spacing: normal;
}

body.wms-facelift-body #holdBag .need-even-longer-co {
    margin: 14px 0 18px !important;
    font-size: 13px;
    line-height: 1.45;
    color: var(--wms-ink-500);
}

body.wms-facelift-body #holdBag .buttonmargin {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 0 !important;
    padding-top: 18px;
    border-top: 1px solid var(--wms-border-100);
}

body.wms-facelift-body #holdBag .buttonmargin .waivesignaturemargin {
    margin: 0;
}

/* ==========================================================================
   About page -- branded visual treatment without changing approved copy
   ========================================================================== */
body.wms-facelift-body .wms-about-shell {
    max-width: 1040px;
}

body.wms-facelift-body .wms-about-card {
    display: grid;
    grid-template-columns: minmax(280px, .85fr) minmax(0, 1.15fr);
    padding: 0;
    overflow: hidden;
}

body.wms-facelift-body .wms-about-card__visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 340px;
    padding: 42px;
    background: var(--wms-surface-50);
}

body.wms-facelift-body .wms-about-card__logo {
    display: block;
    width: 100%;
    max-width: 400px;
    height: auto;
}

body.wms-facelift-body .wms-about-card__content {
    position: relative;
    display: flex;
    align-items: center;
    padding: 48px;
}

body.wms-facelift-body .wms-about-card__content p {
    margin: 0;
    font-size: 17px;
    line-height: 1.75;
    color: var(--wms-ink-700);
}

body.wms-facelift-body .wms-about-card__accent {
    position: absolute;
    top: 48px;
    left: 48px;
    width: 46px;
    height: 4px;
    border-radius: 999px;
    background: var(--wms-gradient-button);
}

body.wms-facelift-body .wms-about-card__accent + p {
    padding-top: 24px;
}

@media (max-width: 760px) {
    body.wms-facelift-body #editCustomer,
    body.wms-facelift-body #editCustomerContact,
    body.wms-facelift-body #editCustomerDeliveryInfo,
    body.wms-facelift-body #holdBag {
        width: calc(100% - 24px);
        max-height: calc(100vh - 24px);
        padding: 20px 16px 18px;
    }

    body.wms-facelift-body #editCustomer {
        width: calc(100% - 24px) !important;
    }

    body.wms-facelift-body #editCustomerDeliveryInfo .rowwidth > .col {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    body.wms-facelift-body #holdBag .rectangle-reschedule {
        grid-template-columns: 72px minmax(0, 1fr);
    }

    body.wms-facelift-body #holdBag .boderdate,
    body.wms-facelift-body #holdBag .boderdatenextday {
        padding: 8px 10px !important;
    }

    body.wms-facelift-body #holdBag .buttonmargin {
        flex-direction: column;
        align-items: stretch;
    }

    body.wms-facelift-body #holdBag .buttonmargin input[type="submit"],
    body.wms-facelift-body #holdBag .buttonmargin .waivesignaturemargin,
    body.wms-facelift-body #holdBag .buttonmargin .waivesignaturemargin a {
        width: 100%;
        text-align: center;
    }

    body.wms-facelift-body .wms-about-card {
        grid-template-columns: 1fr;
    }

    body.wms-facelift-body .wms-about-card__visual {
        min-height: 230px;
        padding: 34px 28px;
    }

    body.wms-facelift-body .wms-about-card__logo {
        max-width: 260px;
    }

    body.wms-facelift-body .wms-about-card__content {
        padding: 34px 24px;
    }

    body.wms-facelift-body .wms-about-card__content p {
        font-size: 15px;
        line-height: 1.65;
    }

    body.wms-facelift-body .wms-about-card__accent {
        top: 34px;
        left: 24px;
    }
}

@media (max-width: 760px) {
    body.wms-facelift-body .wms-notice {
        gap: 12px;
        padding: 16px;
    }
}

/* AB#179646: Delivery confirmation photo. The facelift skips main.css, which is where
   .imglandscape and the carousel were sized, so the photo rendered at its natural
   height (often 1000px+) and buried "Contact support". Cap the frame and letterbox
   the photo (contain, not cover) so the whole proof of delivery stays visible.
   The carousel rules below are the functional subset of main.css's .wms-carousel-*
   block; without them every slide of a multi-photo delivery rendered stacked. */
body.wms-facelift-body #divBaggagePhoto {
    position: relative;
    width: 100%;
    height: 400px;
    border-radius: var(--wms-radius-md);
    overflow: hidden;
    background: var(--wms-surface-50);
}
body.wms-facelift-body #divBaggagePhoto img.imglandscape {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    border: 0;
    object-fit: contain;
}
body.wms-facelift-body .wms-photo-carousel,
body.wms-facelift-body .wms-carousel-track {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
body.wms-facelift-body .wms-carousel-slide {
    display: none;
    width: 100%;
    height: 100%;
}
body.wms-facelift-body .wms-carousel-slide.active {
    display: block;
}
body.wms-facelift-body .wms-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgba(33, 31, 61, 0.6);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
body.wms-facelift-body .wms-carousel-arrow:hover,
body.wms-facelift-body .wms-carousel-arrow:focus-visible {
    background-color: rgba(33, 31, 61, 0.85);
}
body.wms-facelift-body .wms-carousel-arrow i.material-icons {
    color: #fff;
    font-size: 28px !important;
    line-height: 44px;
}
body.wms-facelift-body .wms-carousel-prev { left: 8px; }
body.wms-facelift-body .wms-carousel-next { right: 8px; }
body.wms-facelift-body .wms-carousel-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    z-index: 3;
    text-align: center;
}
body.wms-facelift-body .wms-carousel-dot {
    display: inline-block;
    width: 11px;
    height: 11px;
    margin: 0 4px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.75);
    box-shadow: 0 0 2px rgba(33, 31, 61, 0.6);
    cursor: pointer;
}
body.wms-facelift-body .wms-carousel-dot.active {
    background-color: var(--wms-indigo-600);
}
@media (max-width: 760px) {
    body.wms-facelift-body #divBaggagePhoto {
        height: 300px;
    }
}

/* ==========================================================================
   AB#179783: readability
   The font stack is Arial-first, and Arial ships only Regular and Bold. On
   Windows, weights 800/900 switch to Arial Black: wide and heavy, with e/c
   closing up like o (the blurry, "pixelated" look). The sheet now tops out at
   700, and typography.css maps any heavier weight to Arial Bold site-wide.
   The banner, stepper, card headers and info rows (every tracking/delivery
   view that uses them) are also a step larger and darker.
   ========================================================================== */
body.wms-facelift-body .wms-banner__title {
    font-size: 28px;
    letter-spacing: 0;
}
body.wms-facelift-body .wms-banner__sub {
    font-size: 15px;
}
body.wms-facelift-body .wms-step__label {
    font-size: 15px;
}
body.wms-facelift-body .wms-step__time {
    font-size: 13px;
    color: var(--wms-ink-700);
}
body.wms-facelift-body .paddingtripinfo,
body.wms-facelift-body .contact-info,
body.wms-facelift-body .driver-info,
body.wms-facelift-body .delivery-info-note,
body.wms-facelift-body .wms-order-info-note {
    font-size: 15px;
    letter-spacing: 0.02em;
    color: var(--wms-ink-800);
}
body.wms-facelift-body .wms-tracking-info-row .wms-contact-card__title,
body.wms-facelift-body .wms-tracking-reference .wms-contact-card__title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--wms-ink-700);
}
body.wms-facelift-body .wms-tracking-info-row .wms-contact-card__value {
    font-size: 15px;
}
body.wms-facelift-body .wms-tracking-bdo-chip {
    font-size: 14px;
    letter-spacing: 0.02em;
}
body.wms-facelift-body .mco-airport {
    font-size: 16px;
}
body.wms-facelift-body .pick-up-today-12-p,
body.wms-facelift-body .pick-up-today-12-p2 {
    font-size: 14px;
    color: var(--wms-ink-700);
}
/* Lookup card helper ("We'll need two things to look up your bag.") on the generic and airline home pages. */
body.wms-facelift-body .wms-lookup-card__helper {
    font-size: 15px;
    color: var(--wms-ink-700);
}