.fi-sc.fi-sc-has-gap {
    gap: calc(var(--spacing) * 3);
}

.custom-gap-overwrite {
    .fi-fo-component-ctn {
        gap: 0 !important; /* equivalente a gap-1 */
    }
}

/* Sections side-by-side in a grid: stretch the inner card so cards with
   different content still line up to the same height. */
.fi-equal-height-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.fi-equal-height-card > .fi-section {
    flex: 1 1 auto;
}
.custom-bl-green-500 {
    border-left-color: #16a34a !important;
    border-left-width: 5px !important;
    border-left-style: solid !important;
}
.custom-bl-red-500 {
    border-left-color: #ef4444 !important;
    border-left-width: 5px !important;
    border-left-style: solid !important;
}

/* Delivery route map: dotswan/filament-map-picker's stylesheet forces
   `z-index: auto !important` on EVERY .leaflet-*-pane — global, so it also hits
   maps that aren't its own picker. That flattens Leaflet's whole stacking order,
   which is what left the route polyline painted under the tiles.

   All six panes have to be restored, not just the overlay one. A pane left at
   `auto` creates no stacking context, so the z-indexes Leaflet sets on its
   children escape and compete one level up: with the tile pane at `auto` its
   tile container (19) fought the overlay pane directly, and with the marker
   pane at `auto` its markers (300) lost to the line at 400 and got crossed
   over.

   Values are Leaflet's own defaults, so this restores its intended order
   (tiles → line → markers → popups) instead of inventing one. Both rules carry
   !important, so specificity decides: the #route-map id beats their class-only
   selector, and scoping to that id leaves the picker's own maps untouched. */
#route-map .leaflet-tile-pane {
    z-index: 200 !important;
}

#route-map .leaflet-overlay-pane {
    z-index: 400 !important;
}

#route-map .leaflet-shadow-pane {
    z-index: 500 !important;
}

#route-map .leaflet-marker-pane {
    z-index: 600 !important;
}

#route-map .leaflet-tooltip-pane {
    z-index: 650 !important;
}

#route-map .leaflet-popup-pane {
    z-index: 700 !important;
}

/* Order */
.wrapper-order-partial-payment,
.wrapper-order-total {
    border-radius: 8px;
    padding: 8px;
}
.wrapper-order-partial-payment {
    border: 1px solid var(--color-primary-400);
    background-color: oklch(from var(--color-primary-400) l c h / 0.08);
}
.wrapper-order-total {
    border: 1px solid var(--info-400);
    background-color: oklch(from var(--info-400) l c h / 0.08);
}