/* 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; }

/* 2026-10-07 results page on phones, tablets and small laptops (1024px and below, where the layout already stacks the cart): stack the results and the cart, keep the
   three result columns inside the screen. Wider screens are unchanged. */
@media only screen and (max-width: 1024px) {
    .ret_list .ret_list_lt,
    .ret_list .ret_list_rt { width: 100% !important; float: none !important; margin: 0 0 12px 0 !important; }
    .ret_list .ret_list_lt { display: flow-root; padding: 12px 10px !important; }
    .ret_list ._newjourneysearch { width: 100% !important; }
    .ret_list .journey_head_data_head ul { display: flex; padding: 0; }
    .ret_list .journey_head_data_head li { float: none; flex: 1 1 0; width: auto !important; min-width: 0; font-size: 13px; padding: 6px 2px; white-space: normal; overflow-wrap: anywhere; }
    .ret_list .journey_head_data { display: flex; float: none; }
    .ret_list .journey_head_data .col1 { float: none; flex: 1 1 0; width: auto !important; min-width: 0; font-size: 13px; padding: 8px 3px; overflow-wrap: break-word; }
    .ret_list .journey_head_data .btn_small { white-space: normal; padding: 6px 8px; font-size: 13px; }
}