/* =========================================================================
   details-tab.css -- paso "Details" del wizard (lista de paquetes, suplementos,
   fecha y CTA Explore/Request), en cargo y express, modo detallado y simple.

   Plan: docs/plans/PLAN_RESPONSIVE_DETAILS_PAQUETES_2026-09-29.md
   Verificación: node bin/visual-probe-details.mjs (matriz de resoluciones,
   sale con código 1 si falla algún criterio de aceptación).

   Se carga DESPUÉS de tmwewueform.css (register_common_styles() en
   action/class.wp-enqueue-scripts.php): a igual especificidad gana este
   archivo. Todo lo del paso Details vive aquí -- no añadir reglas de
   .package-*, .pkg-* ni .package-tab en tmwewueform.css.

   Breakpoints (el ancho de la tarjeta es el mismo que en Origin/Destination
   en todas las resoluciones: sin saltos de layout al cambiar de paso):
     <= 600px          mobile. La página crece con los bultos (sin scroll
                       anidado); la barra de acciones va al final, en flujo.
     >= 601px          el tab es título + cuerpo con scroll + barra de acciones
                       fija al pie (resumen Pkg/Chg + Explore/Request). En el
                       cuerpo, la lista se encoge hasta un suelo de 3 chips.
     alto <= 820px     (solo >= 601px) modo compacto: fecha en una fila y
                       menos aire vertical.

   Estructura (resource/app/unified_page.js, igual en cargo y express):
     .package-tab.v-window-item
       > .title-class
       > .details-body          zona con scroll (>= 601px)
           > .details-main-col  > .pkg-add-row, .shipment-package-wrapper
           > .details-side-col  > .shipment-supplements-wrapper,
                                  .shipment-date-wrapper,
                                  customs/type-of-goods (diálogos)
       > .details-action-bar    > .details-summary,
                                  .package-details-btn-container-wrapper

   Por qué la barra no es sticky (versión anterior, 2026-09-29): un sticky
   solo se desplaza dentro de su bloque contenedor y tapa lo que queda
   debajo; con poco alto cortaba el CTA o tapaba el 3er chip. Como hermana
   del cuerpo con scroll, la barra nunca tapa contenido y siempre se ve.

   Por qué no se bloquea la lista al alto del viewport (Refinamiento 6,
   2026-09-19, retirado): con todo lo demás de alto fijo, la lista recibía
   "alto del viewport - 637px" -- 131px en 1366x768, 83px en 1280x720 (1,5
   chips), y el tab con overflow:hidden recortaba cualquier contenido que
   creciera (aviso de fin de semana, DGR).
   ========================================================================= */

:root {
    /* Paso vertical de un chip: 54px de alto + 10px de separación. */
    --pkg-chip-step: 64px;
    /* Suelo de la lista en >= 601px: 3 chips completos. */
    --pkg-list-floor: 200px;
}

/* Suelo efectivo de la lista: 3 chips, o menos si hay menos bultos.
   --pkg-count lo pone unified_page.js en .details-main-col (0 en modo simple). */
.details-main-col {
    --pkg-list-min: min(var(--pkg-list-floor), calc(var(--pkg-count, 0) * var(--pkg-chip-step) + 8px));
}

/* --- Base (todos los anchos) ------------------------------------------- */

/* Antes en tmwewueform.css (~L4090). El padding-top: 18px que llevaba nunca
   aplicaba: `div.package-list-container { padding: 0 !important }` (~L1708)
   tiene más especificidad. Se conserva solo lo efectivo. */
.package-list-container {
    max-width: 320px !important;
    margin: auto !important;
}

/* Antes en tmwewueform.css (~L1718). */
div.package-list-container .v-row .v-col.package-list-wrapper {
    padding: 4px 12px 4px 12px !important;
    overflow-x: hidden;
}

/* Antes en tmwewueform.css (~L1972, Refinamiento 5): sin alto fijo, la lista
   crece con sus chips. Es el comportamiento mobile; >= 601px lo sustituye
   el bloque de más abajo. */
.package-list-wrapper {
    min-height: 0;
    height: auto;
    max-height: none;
    overflow: visible;
}

/* --- Mobile (<= 600px): movido tal cual de tmwewueform.css ------------- */
/* --- Fase 2/3/4/7 (2026-09-18): paso "Peso y dimensiones" (package_component.js,
   packages_component.js, package_simple_component.js, packages_simple_component.js)
   en móvil. Grid de columnas -> tarjetas apiladas, sin breakpoint mobile hasta
   ahora. Comparte clases con ambos modos (simple y detallado) y ambos tabs
   (cargo/express): probar las 4 combinaciones tras cualquier cambio aquí. --- */
@media (max-width: 600px) {
    /* Contenedor: ya usa max-width (no width fijo), solo se libera min-width. */
    div.package-list-container {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* Columnas de separación vacías del modo simple (centran el layout en
       desktop) no aportan nada en una tarjeta apilada. */
    .package-spacer-col {
        display: none !important;
    }

    /* Cada v-col de campo pasa de columna de tabla a bloque apilado. */
    .package-list-row .package-description-row {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
    }

    .package-list-row .package-description-row > .v-col {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 4px 0 !important;
        /* En mobile los campos se apilan en columna (ver arriba): el
           margin-right/margin-left de 10px pensado para el gap horizontal
           en desktop (.qty-field-col/.weight-field-col) no aplica aquí. */
        margin: 0 !important;
    }

    /* Tarjeta visual por bulto en modo simple (2 campos, sigue usando la fila
       de inputs): package_component.js (detallado) ya no necesita esto -- es
       un chip (.pkg-chip) con su propio borde/padding en ambos breakpoints,
       ver más abajo en este archivo; aplicarle esta regla también le daría un
       doble borde anidado. */
    .package-list-row:not(:has(.pkg-chip)) {
        border: 1px solid #e1e1e1;
        border-radius: 4px;
        padding: 8px !important;
        margin-bottom: 12px !important;
    }

    /* Mobile usa su propia altura (36px) independiente de la de desktop
       (40px, ver regla base fuera de este @media -- Propuesta A,
       2026-09-19), con targets táctiles algo más generosos. */
    .package-list-row .v-col .package-description-row input {
        height: auto !important;
        max-height: none !important;
        min-height: 36px !important;
        --v-input-control-height: 36px !important;
    }

    /* Refinamiento 5 (2026-09-19): .package-list-wrapper ya se libera de
       forma incondicional en la regla base (fuera de este @media) -- lo que
       antes era el fix "scroll trap" solo para mobile ya no hace falta
       repetirlo aquí. */

    /* Selector de unidad, ahora fuera del header ocultable: texto + icono.
       Comparte fila con el resumen Pkg/Chg/Vol (ver .package-abstract-wrapper
       más arriba) -- en el ancho reducido de mobile (max-width 320px del
       contenedor) se apila en vez de desbordar. */
    .package-unit-selector-row {
        margin: 4px 0 !important;
        flex-wrap: wrap !important;
    }

    .package-unit-selector-row .package-abstract-wrapper {
        justify-content: center;
        flex: 1 1 100%;
    }

    .package-list-header-col-selector .metric-selector {
        width: auto !important;
    }

    .metric-selector-text {
        display: inline;
        margin-left: 4px;
        font-size: 13px;
        text-transform: none;
    }

    /* Targets táctiles >= 44px (mismo criterio que el resto del formulario,
       ver bloque "Touch targets >= 44px en móvil" más arriba). El de
       .pkg-icon-btn/.split-main/.split-caret vive en el @media al final de
       este archivo (después de sus reglas base de 32px): con la misma
       especificidad y !important, gana quien aparece último en cascada. */
    .previous-next-btn.v-btn,
    .package-unit-selector-row .metric-selector.v-btn {
        min-height: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
    }
}

/* --- Chip, botón split, presets y modal de edición: movido tal cual de
   tmwewueform.css (Fase 5, 2026-09-18) --------------------------------- */
/* --- Fase 5 (2026-09-18, rediseño chip+modal): package_component.js pasó de
   fila de 5 inputs a chip resumen; package_edit_dialog_component.js (nuevo)
   es el modal de edición. Toolbar azul del modal sigue el mismo patrón que
   .type-of-goods-dialog (ver más arriba en este archivo), NO se reutiliza
   .dialog-box porque esa clase pinta TODA la v-card de azul con texto
   blanco (pensada para diálogos con tabs), lo que dejaría los v-text-field
   del formulario ilegibles. --- */
.pkg-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 6px 6px 6px 10px;
    margin-bottom: 8px;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    background: #FFF;
    text-align: left;
}

/* Refinamiento (2026-09-18) -- el chip ya no es un único área clicable
   (ver package_component.js): tocar/enfocar/Enter-Espacio sobre .pkg-meta
   abre el modal; los iconos de editar/eliminar (.pkg-actions) viven aparte.
   Paleta alineada con la ya usada en el resto del sitio (auditoría
   2026-09-18): texto secundario rgb(98,98,98) como .package-abstract-field
   (línea ~1620), borde #e1e1e1 como el resto de filas del formulario -- no
   grises con tinte azulado inventados. */
.pkg-meta {
    flex: 1;
    min-width: 0;
    cursor: pointer;
    border-radius: 6px;
    padding: 2px 4px;
    margin: -2px -4px;
}

.pkg-meta:hover,
.pkg-meta:focus-visible {
    outline: none;
    background: #f0f2f7;
}

.pkg-chip--empty .pkg-meta-empty {
    color: rgb(98, 98, 98);
    font-size: 13px;
}

.pkg-badge {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgb(48, 83, 163);
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.pkg-badge .v-icon {
    color: #FFF;
    font-size: 18px;
}

/* Refinamiento (2026-09-19) -- font-size real viene inline por bulto (ver
   package_component.js#badge_count_display: <100 completo/13px, 100-999
   completo/10px, >=1000 abreviado "1K"/12px) -- 13px aquí es solo el
   fallback si algo llega sin :style. */
.pkg-badge-count {
    font-weight: 800;
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
}

.pkg-meta-line {
    display: block;
    font-size: 13px;
    line-height: 1.4;
}

.pkg-meta-line:first-child {
    font-weight: 700;
}

.pkg-meta-line:last-child {
    color: rgb(98, 98, 98);
    font-size: 12px;
}

.pkg-actions {
    display: flex;
    gap: 2px;
    flex: none;
}

.pkg-icon-btn.v-btn {
    width: 32px !important;
    height: 32px !important;
}

.pkg-icon-btn.danger:not(.v-btn--disabled):hover .v-icon {
    color: #c6007e;
}

/* Refinamiento 2 (2026-09-19) -- "Add package" fuera de .package-list-wrapper
   (antes vivía dentro de esa caja con scroll interno propio en desktop,
   max-height:105px -- quedaba oculto hasta hacer scroll). Ahora es una
   v-row/v-col hermana, siempre visible sin depender de ningún scroll.
   Centrado y con solo el ancho de su contenido (no estirado a todo el
   ancho del v-col padre): mismo patrón de botón "add" ya usado en el sitio
   (selected_supplments_component.js: variant="tonal" + prepend-icon
   mdi-plus), con el azul de marca en vez del azul default de Vuetify para
   que combine con el badge/header del modal. */
.pkg-add-row {
    padding: 4px 0;
    text-align: center;
}

.split-btn {
    display: inline-flex;
    border-radius: 10px;
    overflow: hidden;
}

.split-main.v-btn {
    border-radius: 0 !important;
    justify-content: center;
    background: rgba(48, 83, 163, 0.1) !important;
    color: rgb(48, 83, 163) !important;
    text-transform: none !important;
    font-weight: 600;
    letter-spacing: normal;
    height: 36px !important;
    padding: 0 16px !important;
}

.split-caret.v-btn {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    border-radius: 0 !important;
    border-left: 1px solid rgba(48, 83, 163, 0.2);
    background: rgba(48, 83, 163, 0.1) !important;
    color: rgb(48, 83, 163) !important;
}

/* Refinamiento 3 (2026-09-19) -- dropdown de presets con jerarquía real
   (nombre en negrita, dimensiones como subtexto), en vez de una lista plana
   de texto corrido (preset_summary_text concatenado). */
.pkg-preset-list.v-list {
    padding: 4px 0;
    min-width: 220px;
}

.pkg-preset-item.v-list-item {
    min-height: 48px;
    border-bottom: 1px solid #e1e1e1;
}

.pkg-preset-item.v-list-item:last-child {
    border-bottom: none;
}

.pkg-preset-icon.v-icon {
    color: rgb(48, 83, 163);
    font-size: 20px;
}

.pkg-preset-name {
    font-weight: 700 !important;
    font-size: 13px !important;
    color: #1a1a1a;
}

.pkg-preset-dims {
    font-size: 11.5px !important;
    color: rgb(98, 98, 98) !important;
    opacity: 1 !important;
}

.package-edit-dialog .package-edit-card>div.v-card-item {
    padding: 0px !important;
}

.package-edit-dialog .package-edit-card>div.v-card-item>div.v-card-item__content>div.v-card-title * {
    font-size: 14px !important;
    background: rgb(48, 83, 163) !important;
    color: #FFF !important;
}

.package-edit-dialog .package-edit-card>div.v-card-item>div.v-card-item__content>div.v-card-title .v-btn {
    margin: 0px;
}

.package-edit-fields {
    padding: 16px !important;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pkg-vol-hint {
    font-size: 12px;
    color: rgb(98, 98, 98);
    line-height: 1.5;
    margin-top: 4px;
}

@media (max-width: 600px) {
    .pkg-chip,
    .pkg-badge {
        min-height: 44px;
    }

    /* Refinamiento (2026-09-18) -- targets táctiles >= 44px en mobile para
       los iconos de editar/eliminar del chip y el botón split "Add package".
       Va DESPUÉS de las reglas base (mismas clases, 32px en .pkg-icon-btn):
       con igual especificidad y !important, gana quien aparece último. */
    .pkg-icon-btn.v-btn,
    .split-main.v-btn,
    .split-caret.v-btn {
        min-height: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
    }
}


/* --- Aviso "N more" (packages_component.js#update_overflow_hint) ----------
   Solo se renderiza cuando la lista tiene scroll propio y quedan chips por
   debajo del borde visible: con barras de scroll overlay (macOS) el usuario
   no tenía ninguna pista de que había más bultos. El ancla es sticky de alto
   0 al pie de la lista, así que no altera el alto del contenido ni provoca
   saltos al aparecer/desaparecer. */
.pkg-more-hint-anchor {
    position: sticky;
    bottom: 0;
    height: 0;
    z-index: 1;
}

.pkg-more-hint-anchor::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 32px;
    background: linear-gradient(rgba(255, 255, 255, 0), #FFF);
    pointer-events: none;
}

.pkg-more-hint {
    position: absolute;
    left: 50%;
    bottom: 4px;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 10px 2px 6px;
    border-radius: 999px;
    background: rgb(48, 83, 163);
    color: #FFF;
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

.pkg-more-hint .v-icon {
    color: #FFF;
    font-size: 16px;
}

.pkg-more-hint:focus-visible {
    outline: 2px solid #68a0f0;
    outline-offset: 2px;
}

/* --- Mobile: la página crece con el contenido --------------------------
   .v-main.main-container tiene alto fijo calc(100vh - 120px) (tmwewueform.css).
   En mobile el contenido del tab lo desbordaba y la barra inferior
   (v-bottom-navigation, posicionada en absoluto al fondo del v-layout) quedaba
   encima del CTA Explore/Request al hacer scroll. Solo en el paso Details: el
   resto de vistas (listas con infinite scroll) sí necesitan ese alto fijo. */
@media (max-width: 600px) {
    .v-main.main-container:has(.package-tab.v-window-item--active) {
        height: auto !important;
        max-height: none !important;
        min-height: calc(100vh - 120px) !important;
        padding-bottom: 72px !important;
    }
}


/* --- Barra de acciones: resumen Pkg/Chg + Explore/Request (todos los anchos)
   El resumen lo calcula packages(-simple)-component y lo emite con
   summary-changed; aquí solo se pinta. Colores de .package-abstract-field. */
.details-action-bar {
    background: #FFF;
}

.details-summary {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    font-size: 13px;
    line-height: 1.3;
    color: rgb(98, 98, 98);
    white-space: nowrap;
}

.details-summary-field label {
    font-weight: 700;
    text-transform: uppercase;
    margin-right: 4px;
}

.details-summary-field.is-volumetric {
    color: #c6007e;
}

.details-summary-vol {
    font-size: 11px;
}

/* Mobile: la barra va al final del tab, en flujo (la página hace scroll):
   resumen en una fila centrada sobre los botones de siempre, con su texto
   explicativo. */
@media (max-width: 600px) {
    .details-action-bar {
        border-top: 1px solid #e1e1e1;
        margin-top: 8px;
        padding-top: 8px;
    }

    .details-summary {
        flex-direction: row;
        justify-content: center;
        gap: 12px;
    }
}

/* --- >= 601px: título + cuerpo con scroll + barra fija ------------------
   Cadena de alturas (Vuetify no la fuerza sola): .v-main.main-container
   (alto fijo) > .main-card-wrapper > v-tabs-window (.v-window) >
   .v-window__container > .package-tab. Sin flex + height explícitos en cada
   eslabón, .v-window__container (height: inherit nativo) no resuelve un alto
   real y el tab crece con su contenido. Solo en la rama que contiene
   .package-tab: .main-card-wrapper lo comparten otras vistas. */
@media (min-width: 601px) {
    .main-card-wrapper:has(.package-tab) {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .main-card-wrapper:has(.package-tab) > .navigation-wrapper {
        flex: none;
    }

    .main-card-wrapper:has(.package-tab) > .v-window {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .main-card-wrapper:has(.package-tab) > .v-window > .v-window__container {
        height: 100%;
        min-height: 0;
    }

    /* El tab no hace scroll: lo hace .details-body. overflow: hidden ya no
       recorta nada porque el cuerpo puede encogerse hasta 0 (min-height: 0)
       y su contenido queda accesible con su propio scroll. */
    .package-tab.v-window-item {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    .package-tab.v-window-item > .title-class,
    .package-tab.v-window-item > .details-action-bar {
        flex: none;
    }

    /* flex-grow 0: con poco contenido la barra va justo debajo de él, no
       pegada al fondo de una pantalla alta; cuando no cabe, el cuerpo se
       encoge, hace scroll y la barra queda al pie (patrón "sticky footer"). */
    .package-tab.v-window-item > .details-body {
        flex: 0 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }

    /* Columnas y envoltorios de la lista sin caja propia: el botón "Add
       package", la fila de unidad, la fila de la lista y las opciones son
       hijos flex directos del cuerpo. Con cajas intermedias el suelo de la
       lista no funcionaba: con min-height: auto no se encogían nunca (su
       mínimo es TODO su contenido) y con min-height: 0 se encogían por debajo
       del suelo y lo siguiente se montaba encima. Las reglas de
       tmwewueform.css sobre estas clases siguen aplicando (los selectores no
       dependen de display) y --pkg-count se sigue heredando. */
    .details-body > .details-main-col,
    .details-body > .details-side-col,
    .details-main-col > .shipment-package-wrapper:has(> .package-list-container:not(.package-simple-list-container)),
    .shipment-package-wrapper > .package-list-container:not(.package-simple-list-container) {
        display: contents;
    }

    .details-main-col > *,
    .details-side-col > *,
    .package-list-container > .v-row {
        flex: none;
    }

    /* Modo simple (packages_simple_component.js) comparte .package-list-container
       y .package-list-wrapper pero no tiene chips: sus campos nunca se encogen
       ni hacen scroll, de ahí el :not(.package-simple-list-container).

       La fila de la lista es lo único que se encoge (flex-shrink, nunca crece:
       con pocos bultos todo queda a su alto natural, arriba), y nunca por
       debajo de su suelo. El suelo va en la v-row y no en la v-col
       .package-list-wrapper: un min-height en la v-col lo anulaba un selector
       más específico (bug del Collaudo 2026-09-23, min-height: 136px que
       computaba 0px). */
    .package-list-container:not(.package-simple-list-container) > .v-row:has(.package-list-wrapper) {
        flex: 0 1 auto;
        min-height: var(--pkg-list-min);
    }

    .package-list-container:not(.package-simple-list-container) > .v-row > .v-col.package-list-wrapper {
        height: 100%;
        min-height: 0;
        max-height: 100%;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-gutter: stable;
    }

    .package-list-wrapper::-webkit-scrollbar {
        width: 6px;
    }

    .package-list-wrapper::-webkit-scrollbar-thumb {
        background: rgba(18, 41, 79, 0.35);
    }

    /* type_of_goods_component.js envuelve su v-dialog (que se teletransporta
       al overlay) en un <div class="pa-4"> sin contenido visible: 32px de
       hueco al final del cuerpo. */
    .details-side-col > .type-of-goods-component > .pa-4 {
        padding: 0 !important;
    }

    /* Las v-row de cada chip traen margin auto de tmwewueform.css: en un
       contexto flex absorbería el espacio sobrante (hueco tras el primer chip,
       Corrección 2026-09-19). */
    .package-list-wrapper > .package-list-row {
        margin: 0 !important;
    }

    /* Barra fija: resumen a la izquierda, botones a la derecha, en una fila.
       El texto explicativo de Explore/Request ("Suggest us the flight...")
       pasa a tooltip nativo (title en two_row_button_component.js): en la
       barra no cabe y duplicaba lo que ya dice el propio botón. */
    /* flex-wrap: con cifras grandes (p.ej. "CHG 85879518 lb (vol.)") el
       resumen y los botones no caben en 372px; los botones bajan a una
       segunda fila en vez de salirse de la tarjeta. */
    .package-tab.v-window-item > .details-action-bar {
        display: flex;
        flex-wrap: wrap;
        row-gap: 6px;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 8px 4px;
        border-top: 1px solid #e1e1e1;
        box-shadow: 0 -4px 8px -6px rgba(0, 0, 0, 0.2);
    }

    .details-action-bar > .package-details-btn-container-wrapper {
        width: auto;
        margin: 0 0 0 auto !important;
    }

    .details-action-bar .row-btn-container.package-details-btn-container {
        width: auto;
        grid-template-rows: auto;
        column-gap: 8px;
    }

    .details-action-bar .package-details-btn-container .btn-step-down-wrapper {
        display: none !important;
    }
}

/* --- Modo compacto por alto (>= 601px, alto <= 820px) ------------------- */
@media (min-width: 601px) and (max-height: 820px) {
    .details-side-col > .shipment-supplements-wrapper {
        margin-bottom: 0 !important;
    }

    .details-side-col > .shipment-supplements-wrapper > :first-child {
        padding-top: 2px !important;
        padding-bottom: 2px !important;
    }

    .details-side-col .shipment-insurance-wrapper {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Fecha en una sola fila: "Flight Date  (-) SEP 30 (+)". */
    .shipment-date-wrapper > .date-component {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }

    .shipment-date-wrapper > .date-component > .date-component {
        margin: 0 !important;
    }

    .shipment-date-wrapper > .date-component > .date-weekend-warning {
        flex-basis: 100%;
    }
}