/* CarrierConnect wizard.
   Colours come from the --mp-* theme tokens only; nothing here hardcodes one.
   Sizing is relative throughout - the legacy page was fixed at 960px with spinners pinned to
   left:452px, which made it desktop-only on what is a carrier-facing acquisition funnel.

   Only the wizard panes (.connect-step) carry `card depth-8` in the markup - the same pair MpPanel
   uses, rather than a copy of the shadow here, so this page's elevation tracks the app's if it ever
   changes. Elevation is deliberately reserved for the pane the carrier is actually filling in; the
   marketing sections around it are flat, so the eye goes to the one raised box on the page.
   What is left below is layout. */

/* The page is a stack of full-width bands. AnonymousLayoutComponent is passed FullWidth="true", which
   makes its container width:100% + align-items:stretch, so this fills the viewport. No padding here:
   the footer band has to reach the very bottom edge. */
.connect-page {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    text-align: left;
}

/* Everything except the footer band is held to a readable column. This carries the width and centring
   that .connect-page used to, and its padding is what supplies the breathing room under the header
   band now that neither .anon-container nor .anon-body contributes a margin.

   The 60em here is the page's column width, and three other rules line up with it: .connect-awards,
   .connect-footer-inner, and AnonymousLayoutComponent's .anon-header-inner via its
   --anon-content-width default. Changing it means changing all four. */
.connect-column {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: min(60em, 100%);
    margin-inline: auto;
    padding: 1em;
}

/* The wizard card. One card holds the stepper and whichever pane is showing, rather than a card per
   pane - the stepper is part of what the carrier is working through, not chrome above it. The card
   classes were hoisted here out of all eight panes, so .connect-step below is now layout only. */
.connect-wizard {
    display: flex;
    flex-direction: column;
    gap: 1.5em;
    padding: 1.5em;
}

/* Language selector, top-right of the banner.

   Everything here inherits colour rather than declaring it. The banner's background is the customer's
   own branding value - DHL red today, anything tomorrow - so a hard-coded text or border colour is a
   contrast bug waiting for the next customer. currentColor resolves to whatever HeaderFontColor set,
   which is the value already chosen to be legible on that background. */
.connect-language {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5em;
    color: inherit;
}

.connect-language-icon {
    font-size: 1em;
    opacity: 0.9;
}

/* appearance:none removes the OS chrome, which on a coloured band renders as a grey slab. The border
   and caret are then drawn to match the header text instead. */
.connect-language-select {
    appearance: none;
    -webkit-appearance: none;
    padding: 0.25em 1.75em 0.25em 0.5em;
    border: 1px solid currentColor;
    border-radius: 4px;
    background-color: transparent;
    color: inherit;
    font-family: inherit;
    font-size: var(--mp-fs-small);
    line-height: 1.4;
    cursor: pointer;
}

/* Caret. Drawn on the wrapper, not on the select, and as a MASK rather than a background-image.
   currentColor inside a data-URI SVG is inert: an SVG referenced as an image is an isolated
   document, so fill='currentColor' resolves against that document's own initial color - black - not
   against this element. On the anonymous header band (background --mp-blue7, colour --mp-white) that
   drew a black arrow on dark navy, and any dark brand colour did the same. A mask takes its geometry
   from the SVG and its paint from background-color here, so currentColor genuinely applies.

   It sits on the wrapper because a mask clips the element's text and border too, and a <select>
   does not render ::after. */
.connect-language-field {
    position: relative;
    display: inline-flex;
}

.connect-language-field::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0.5em;
    width: 0.6em;
    height: 0.6em;
    transform: translateY(-50%);
    /* The select underneath must stay clickable through the caret. */
    pointer-events: none;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path d='M0 0l5 6 5-6z' fill='black'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path d='M0 0l5 6 5-6z' fill='black'/></svg>");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    /* contain, not a length: the glyph is 10x6, so a square box would stretch it. */
    -webkit-mask-size: contain;
    mask-size: contain;
}

.connect-language-select:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* The popup list is drawn by the OS on the page background, not the banner, so these two need real
   colours - inheriting the banner's white text here would render white-on-white options. */
.connect-language-select option {
    color: var(--mp-default-font-color);
    background-color: var(--mp-white);
}
.connect-stepper {
    /* Full card width, unlike the panes below it: a stepper spanning the card reads as progress
       through the whole thing, and constraining it to the form column would make it look like another
       field. The card's gap supplies the separation that margin-bottom used to.

       The inset pulls the first and last nodes off the card's corners so "Identify" and "Done" are not
       hard against the edge. No width here: as a stretched flex item of .connect-wizard the auto width
       already fills the card, and the width:100% this replaces would have added to the margins rather
       than making room for them, overflowing the card by 8em. */
    margin-inline: 4em;
}

/* Stepper states - the point of the restyle: a carrier should be able to tell at a glance what is
   done, where they are and what is still to come.

   Two things dictate the shape of these rules. The class names are Syncfusion's own and are not the
   obvious ones - the label is .e-label / .e-text, not .e-step-label. And the bootstrap5 theme declares
   these at up to five classes (.e-stepper .e-step-container:not(.e-step-focus).e-step-completed
   .e-step), which a .connect-stepper-prefixed rule cannot out-specify, so the colours carry
   !important. That is the precedent SyncFusionOverrides.css already sets for .e-input-focus, and for
   the same reason. The .connect-stepper prefix keeps all of this off the app's two other SfStepper
   instances. */
.connect-stepper .e-stepper .e-step-completed .e-step,
.connect-stepper .e-stepper .e-step-selected .e-step {
    color: var(--mp-white) !important;
    background-color: var(--mp-blue3) !important;
    border-color: var(--mp-blue3) !important;
}

/* Opaque, not transparent. The progressbar is one bar running the full width behind the row, so a
   transparent not-started circle let it draw straight through the middle of the node - the line
   "inside the circle" on steps 2-4. White is the card's own background (.connect-wizard carries
   bootstrap's .card), so the node masks the bar and the ring reads as a closed circle. */
.connect-stepper .e-stepper .e-step-notstarted .e-step {
    color: var(--mp-gray1) !important;
    background-color: var(--mp-white) !important;
    border-color: var(--mp-gray4) !important;
}

/* Labels are .e-label. Not .e-step-label - that class exists but sits on the step *container*, and
   .e-text is not rendered in this configuration at all; both were verified against the live DOM. */
.connect-stepper .e-stepper .e-step-selected .e-label {
    color: var(--mp-blue3) !important;
    font-weight: 600;
}

.connect-stepper .e-stepper .e-step-completed .e-label {
    color: var(--mp-default-font-color) !important;
}

.connect-stepper .e-stepper .e-step-notstarted .e-label {
    color: var(--mp-gray1) !important;
}

/* The connector between nodes: filled behind completed steps, muted ahead of them. Inert if the
   control turns out not to render a progress bar in this configuration. */
.connect-stepper .e-stepper .e-stepper-progressbar {
    background-color: var(--mp-gray4);
}

.connect-stepper .e-stepper .e-stepper-progressbar > .e-progressbar-value {
    background-color: var(--mp-blue3) !important;
}

/* Panes lay out as a centred column whose children all share one width, so the heading, the fields and
   the buttons line up on a single left edge with equal gutters either side - rather than the content
   hugging the left of a card much wider than it. */
.connect-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;
}

/* rem, deliberately, not em. em resolves against each element's OWN font-size, so the h5 heading at
   20px and the form at 14px both got "34em" and came out 680px and 476px - different widths, so no
   shared left edge, which is the whole point of the rule. rem is the same length for every child. */
.connect-step > * {
    width: min(var(--connect-body-width, 34rem), 100%);
}

.connect-step-heading {
    margin: 0;
    /* h5 renders bold, which is heavier than this needs to be next to the lightened labels below. */
    font-weight: 600;
}

.connect-step-question {
    margin: 0;
    line-height: 1.4em;
}

.connect-carrier-name,
.connect-provider-name {
    margin: 0;
    font-size: 1.6em;
}

.connect-provider-message {
    margin: 0;
    font-size: var(--mp-fs-small);
    font-style: italic;
}

.connect-provider-instructions {
    margin: 0;
    line-height: 1.4em;
}

/* No max-width of its own: the shared .connect-step > * width governs, so the form lines up with the
   heading and the buttons instead of sitting 1em narrower and breaking the common left edge. */
.connect-form {
    display: flex;
    flex-direction: column;
    gap: 0.75em;
    /* This carries a <form> now, not a <div> - see the comment in ConnectIdentifyStep for why. Some
       UA stylesheets give form a bottom margin, so it is zeroed here: swapping the element is meant
       to be invisible, and the pane's flex gap already owns the spacing. */
    margin: 0;
}

/* Field labels, lightened off the default navy.

   SCOPED TO .connect-wizard ON PURPOSE. .mp-input-label comes from MpInputBlock, which is shared right
   across the product, and nothing anywhere else styles that class - so an unscoped rule here would
   silently recolour every labelled field in the application. Keep the .connect-wizard prefix. */
.connect-wizard .mp-input-label {
    color: var(--mp-gray1);
}

/* Validation borders. Applied as CssClass on the Syncfusion control, which puts the class on the
   wrapper on some controls and on the input itself on others, so both are targeted. !important
   follows the precedent SyncFusionOverrides.css sets for .e-input-focus - Syncfusion's own border
   colours are themselves declared with high specificity.

   Three display states are preserved from the legacy page: a pristine field carries neither class and
   is left with Syncfusion's default border. */
.connect-input-valid,
.connect-input-valid .e-input,
.connect-input-valid input.e-input {
    border-color: var(--mp-success) !important;
}

.connect-input-invalid,
.connect-input-invalid .e-input,
.connect-input-invalid input.e-input {
    border-color: var(--mp-error) !important;
}

.connect-input-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5em;
    width: 100%;
}

/* Syncfusion wraps every control in .e-input-group.e-control-wrapper and sets width:100% on it, at two
   classes of specificity. A single-class rule loses that fight, which collapsed the identification
   number box to 10px while the identifier dropdown took the whole row. Both selectors below are
   two-class and this sheet loads after the Syncfusion theme, so they win on order. min-width:0 is what
   lets a flex item holding an input actually shrink below its content width. */
.connect-input-row > .e-control-wrapper {
    flex: 1 1 auto;
    min-width: 0;
}

.connect-input-row > .connect-identifier-select {
    flex: 0 0 8em;
    width: 8em;
}

.connect-field-error {
    margin-top: 0.25em;
    font-size: var(--mp-fs-small);
    line-height: 1.5;
    color: var(--mp-error);
}

/* The banner above the pane. line-height is the rule that centres the text, and it is not obvious why:
   the inherited 1.15 is tighter than the font's own line box at this size, so the half-leading goes
   slightly negative and lands unevenly - measured 7.2px above the text against 8.5px below. 1.5 brings
   that to 0.2px, which is the font's own ascender/descender asymmetry and cannot be removed.

   display:flex + align-items:center does NOT fix this and was measured doing nothing: the box is auto
   height, so its content box IS the line box and there is no free space to centre within. Raising the
   padding does not fix it either - padding is symmetric already, so it moves both edges equally and
   preserves the imbalance. */
.connect-error {
    /* The banner is a child of .connect-wizard, not of the pane, so nothing was holding it to the
       content column and it ran the full width of the card - past the edges of the pane content
       underneath it. Same width expression as .connect-step > * above, so the two line up exactly and
       stay lined up if the body width is ever changed. */
    width: min(var(--connect-body-width, 34rem), 100%);
    margin-inline: auto;
    padding: 0.6em 0.8em;
    font-size: var(--mp-fs-small);
    line-height: 1.5;
    text-align: center;
    color: var(--mp-error);
    border: 1px solid var(--mp-error);
    border-radius: var(--mp-default-radius);
}

.connect-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em;
    margin-top: 0.5em;
}

.connect-choice-list {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

/* An ordinary .connect-step: its content column is the shared body width, identical to steps 1, 2
   and 4, and the logo lives INSIDE that column rather than beside it.

   Two earlier arrangements are worth not going back to. The first made the pane a flex row with the
   logo as a second column, so the pane's width depended on whether a logo existed - which could only
   be known AFTER the browser tried to fetch it. The pane painted 44rem wide, the image failed, the
   column was dropped and everything snapped to 34rem: a visible bounce on every entry to step 3. The
   second took the logo out of the flow entirely and parked it in the margin beside the column, which
   fixed the bounce but tied the logo's size and its very existence to how much spare width happened
   to be left over - and that margin arithmetic is what let it paint over the welcome text.

   Neither problem can recur now. The logo is in the flow, so nothing measures the margin; and the
   row it sits in is height-locked, so nothing below it moves when the image loads or fails. */
.connect-credentials-main {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

/* The provider name and its mark on one row, the mark pushed to the right-hand edge of the content
   column so it lands in the same place for every provider rather than trailing the name - "Geotab"
   and "TrimbleTrustCenter" would otherwise put it 200px apart.

   min-height is the rule that keeps the pane still, and it has to be at least as tall as the capped
   logo. Without it the row is as tall as whatever is in it, so a logo arriving late, or failing and
   being dropped by @onerror, would change the row height and shift every field below it. With it the
   row is the same height whether the logo loads, fails, or was never configured. */
.connect-provider-identity {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75em;
    min-height: 3rem;
}

/* margin-left auto is what right-aligns the mark: the h1 takes its own width and this absorbs the rest
   of the row, so the logo's right edge is the content column's right edge - level with the right edge
   of the credential inputs below it.

   BOTH caps are needed, because provider logos are whatever the provider supplied and their aspect
   ratios are nothing alike - a square app icon next to a wide wordmark like TT ELD's. max-height stops
   a tall one growing the row past the min-height that holds the pane still; max-width stops a wide one
   crowding the name. Whichever binds first wins and the other dimension follows, because width and
   height are both auto - so every logo is letterboxed into the same box and none is distorted.

   No media query. The mark is inside the content column now, which is min(34rem, 100%) at every
   viewport, so there is no width at which it has to be given up - the previous arrangement hid it
   below 50em because there was no margin left to sit in. */
.connect-provider-logo {
    max-height: 3rem;
    max-width: 11rem;
    width: auto;
    height: auto;
    margin-left: auto;
}

.connect-waiting {
    align-items: center;
    text-align: center;
}

/* h4 carries a browser margin that fought the pane's flex gap and pushed the spinner off-centre
   vertically. The gap owns the spacing here, as it does in every other pane. */
.connect-waiting-message {
    margin: 0;
}

/* .connect-step > * stretches every direct child to the body width, which would stretch the spinner
   itself into an ellipse. Wrapping it means the wrapper takes the width and the spinner keeps its
   own square box, centred inside it. */
.connect-waiting-spinner {
    display: flex;
    justify-content: center;
}

/* The two closing sentences on the Done pane. 1rem rather than the page's 14px base is deliberate -
   this is the last thing a carrier reads and it carries the instruction for getting portal access, so
   it sits a step above body copy without being a heading.

   No font-weight declaration: these are p elements now, so normal weight is simply the default. That
   is the point of the change - the previous markup made them h5 and would have needed the weight
   overridden back down. */
.connect-success-message {
    margin: 0;
    font-size: 1rem;
    line-height: 1.4em;
}

.connect-optin {
    margin-top: 1em;
    font-size: var(--mp-fs-smaller);
    font-style: italic;
    font-weight: 700;
    line-height: 1.4em;
}

/* Inherits the centred column from .connect-step - it used to need align-items:flex-start to keep the
   message left-aligned in a full-width card, which the shared child width now does on its own. */
.connect-message-pane {
    text-align: left;
}

/* Centred, while the pane around it stays left-aligned. Deliberately the heading only: several of
   these terminal screens carry a full paragraph underneath - the Contact Us and no-TMS messages run to
   three lines - and centred prose of that length is markedly harder to read. A centred heading over
   left-aligned body is the usual pairing, and on the screens that show a heading and nothing else,
   which is what Thank You is, the result is simply a centred card. */
.connect-message-heading {
    margin: 0;
    text-align: center;
}

.connect-message-body {
    margin: 0;
    line-height: 1.4em;
}

.connect-help {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25em;
    margin-top: 1em;
}

.connect-link-button {
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    color: var(--mp-primary-color);
    background: none;
    border: none;
    text-decoration: underline;
    cursor: pointer;
}

.connect-dialog {
    display: flex;
    flex-direction: column;
    gap: 0.75em;
    padding: 1em;
    text-align: left;
}

.connect-dialog-note {
    margin: 0;
    font-size: var(--mp-fs-small);
    line-height: 1.4em;
}

/* Inline lookup indicator for the MPID, DOT and identification fields.

   Deliberately not SfSpinner: every SfSpinner in this repo is a block-level "show a spinner instead of
   the content" state, and SfTextBox has no busy affordance of its own. The colour is --mp-spinner,
   which is the token Syncfusion's own spinner uses, so this matches them without being one. */
.connect-spinner {
    display: inline-block;
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    border: 2px solid var(--mp-spinner);
    border-right-color: transparent;
    border-radius: 50%;
    animation: connect-spin 0.75s linear infinite;
}

/* Pane-sized variant, for the authenticating pane. Must sit AFTER .connect-spinner: same specificity,
   so source order decides, and above it the 1em width would win and this would silently do nothing.
   Border scales with the box - 2px reads as a hairline ring once the circle is this big. */
.connect-spinner-large {
    width: 2.5em;
    height: 2.5em;
    border-width: 3px;
}

@keyframes connect-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Marketing content surrounding the wizard.

   Flat, not carded: these are chrome, and raising them competes with the wizard pane for attention.
   They keep a 1.5em horizontal inset so their text lines up with the wizard card's inner content,
   while vertical rhythm comes from margins rather than card padding. Placement is unchanged - they
   render above and below every pane, exactly as before. */

.connect-banner {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 2em;
    margin-bottom: 2em;
    padding: 0 1.5em;
}

.connect-banner-copy {
    flex: 1 1 20em;
    text-align: left;
}

.connect-banner-title {
    margin: 0 0 0.5em;
    font-size: 2em;
    /* 700 rather than 900: at 2em the heaviest weight in the system reads as shouting on what is
       otherwise a calm page, and it competed with the wizard card for first attention. */
    font-weight: 700;
    line-height: 1.15em;
}

.connect-banner-subtext {
    margin: 0;
    line-height: 1.4em;
    color: var(--mp-gray1);
}

.connect-banner-video {
    flex: 0 1 22em;
    aspect-ratio: 16 / 9;
    width: 100%;
    max-width: 22em;
    border: 0;
    border-radius: var(--mp-default-radius);
}

.connect-benefits {
    margin-bottom: 2em;
    padding: 0 1.5em;
}

.connect-why-connect {
    margin: 0 auto 1.5em;
    max-width: 38em;
    font-size: 1.5em;
    font-weight: 700;
    line-height: 1.3em;
    text-align: center;
}

.connect-benefit-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 1.5em;
}

.connect-benefit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;
    flex: 0 1 9em;
    text-align: center;
    color: var(--dsg-blues-primary-500);
}

/* Font Awesome's size classes set a near-zero line-height - fa-2xl is 0.03125em, which at this font
   size collapsed the span's box to 0.9px while the glyph carried on drawing at its full 28px and
   overflowed well outside it. A flex gap is measured from the box, so the gap above was being applied
   correctly and then entirely swallowed by glyph overflow, leaving the caption hard against the
   artwork. line-height:1 gives the glyph a box its own size, which is what makes the gap real.

   Two classes, not one. The Font Awesome kit is a script that injects its stylesheet at runtime, so it
   lands after this module's sheet - a single-class .connect-benefit-icon ties .fa-2xl on specificity
   and then loses on source order. Verified in the CSSOM: this sheet is #15, Font Awesome's is #21. */
.connect-benefit > .connect-benefit-icon {
    line-height: 1;
}

/* The stacked "no cost" mark. fa-stack centres its two layers using a 2em line-height inside a 2em
   box, so unlike its four siblings this element must NOT take .connect-benefit-icon's line-height:1 -
   at line-height 1 the dollar and the slash stop being concentric. It carries its own class purely to
   stay out of the way of that rule; the line-height is restated so extending that rule here cannot
   happen silently.

   Deliberately no font-size. fa-stack's 2em box already measures the same 28px as the fa-2xl glyphs
   beside it at the strip's 14px base, and anything larger drops this caption below the other four -
   1.25em put it 7px low, which is visible in a row of five. */
.connect-benefit-stack {
    line-height: 2em;
}

/* Shrinks the slash so it crosses the dollar WITHIN the circle, touching neither the inner edge nor
   spilling past the outer one. The number is measured, not guessed: rendering both glyphs to a canvas
   at 100px gives a circle 100 across with a 6-unit stroke, so 88 of clear space inside, while the
   slash's diagonal is 165. Scaling to 0.45 makes it 74 long, leaving about 7 units of gap at each end.

   Above 0.533 it reaches the inner edge; at 1.0 it is the version that stuck out of both sides.
   fa-stack's layers are absolutely positioned, so the default 50% transform-origin keeps the scaled
   slash concentric with the circle without any further nudging. */
.connect-benefit-slash {
    transform: scale(0.45);
}

.connect-benefit-text {
    font-size: var(--mp-fs-small);
    line-height: 1.3em;
    color: var(--mp-gray1);
}

/* Sits outside .connect-column so its sibling <footer> can go full-bleed, so it constrains itself to
   the same width rather than spreading its badge row across a wide monitor. Stays on the light
   background: each G2 badge has fill="#000" text baked into its paths. */
.connect-awards {
    width: min(60em, 100%);
    margin-top: 2.5em;
    margin-inline: auto;
    padding: 0 1.5em;
    text-align: center;
}

.connect-awards-intro {
    margin: 0 auto 1.5em;
    max-width: 48em;
    line-height: 1.4em;
    color: var(--mp-gray1);
}

.connect-awards-badges {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
    gap: 1.5em;
}

.connect-award-badge {
    height: 6.5em;
    width: auto;
}

/* The footer band. Full-bleed by virtue of being a direct child of .connect-page, and the only part of
   this page besides the header bar that is.

   Fixed --mp-blue7 rather than the per-customer branding the header takes: the logo and both store
   badges here draw in white, so a customer with a pale brand colour would make them invisible - the
   defect this band exists to fix, relocated. The bands therefore match only for customers with no
   brand colour set, which is the accepted trade.

   No border-top: the colour change separates it from the awards strip on its own. */
.connect-footer {
    margin-top: 2.5em;
    padding: 1.5em;
    color: var(--mp-white);
    background-color: var(--mp-blue7);
}

/* A band cannot hold its own content to a width - flex children spread to its edges - so the row that
   .connect-footer used to be lives here, lined up with the column above. */
.connect-footer-inner {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5em;
    width: min(60em, 100%);
    margin-inline: auto;
}

.connect-footer-logo {
    height: 2.25em;
    width: auto;
}

.connect-footer-stores {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5em;
    text-align: right;
}

.connect-footer-stores-text {
    margin: 0;
    font-size: var(--mp-fs-small);
}

.connect-footer-store-badges {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75em;
}