/* IE11 fallbacks. Every rule is behind html.is-ie, which only ie-compat.js sets
   (Internet Explorer / Edge IE mode), so Chrome, Edge and Safari never see any
   of this.

   IE11 does support flexbox, so the layouts are left as flex. What IE11 does NOT
   support is the `gap` property, so every flex row that relies on `gap` collapses
   into touching controls. Each one is given the same spacing as a margin below. */

/* Header (booking / interior pages): .dbz-menu { gap: 6px } */
html.is-ie .dbz-menu > li + li { margin-left: 6px; }

/* Search box on /book and on the "Schimbați călătoria" panel:
   .jtrip { gap: 22px }, .jtrip label { gap: 6px }, .jrow2 { gap: 10px } */
html.is-ie .jtrip label + label { margin-left: 22px; }
html.is-ie .jtrip label > span { margin-left: 6px; }
html.is-ie .jrow2 > .jfield + .jfield { margin-left: 10px; }
/* IE11 ignores box-sizing when resolving `flex: 1`, so three equal columns plus
   their margins overflow the row by a few pixels. Give them an explicit basis. */
html.is-ie .jrow2 > .jfield { flex: 1 1 30%; min-width: 0; }

/* My Bookings header row: .mybookings-headrow { gap: 10px } and the inline
   flex row that holds "Înapoi la căutare" + "Scriu Recenzie" { gap: 8px } */
html.is-ie .mybookings-headrow > * + * { margin-left: 10px; }
html.is-ie .mybookings-headrow a + a { margin-left: 8px; }

/* My Bookings footer columns: .mybookings-contact { gap: 24px } */
html.is-ie .mybookings-contact > div + div { margin-left: 24px; }

/* Payment cell: .paymentChoiceBox { flex-direction: column; gap: 2px } */
html.is-ie .paymentChoiceBox > * + * { margin-top: 2px; }

/* Search results header row (inline flex, no gap needed) is fine as-is. */

/* IE11 has no backdrop-filter; the translucent panel over the hero photo ends up
   low-contrast. Make it solid there so the labels stay readable. */
html.is-ie .jsearch { background: #f4f7fa; }