/* Tablet layout fixes for the order / cabinet part of the site (768-1099px).
   Every rule here lives inside a tablet media query, so phones (<768px) never
   see it. Two sidebar fixes also cover 1100-1199.98px: Bootstrap keeps its
   960px container until 1200px, so the columns there are as narrow as at
   992-1099 and the same overflow happened; from 1200px nothing applies. Most page CSS of these templates sits in
   inline <style> blocks inside <body> (after this file), so rules here win by
   specificity, not by order. Properties driven by JS (display of the cart
   panel and its blocks, max-height of the cart rows, position of
   .info-box-column-wrap, modal display) are left alone on purpose. */

/* ---- Meal-grid screens: cart panel and grid (768-991px) ----
   The upper bound 991px is the same condition under which the panel includes
   make .info-box-column-wrap position:fixed at the bottom and under which JS
   switches to the mobile cart (matchMedia('(max-width: 991px)')).
   Rule 1 stays separate from the :has() rules: a browser without :has() drops
   a whole selector list, and rule 1 must apply everywhere. */
@media (min-width: 768px) and (max-width: 991px) {
  /* 1. The fixed bottom cart panel spans the viewport like on phones
        (col-md-4 used to cut its width:100% down to 33.3%). */
  .info-box-column-wrap.col-md-4 { flex: 0 0 100%; max-width: 100%; }

  /* 2. The meal column takes the full row - only when it holds a grid of col-6
        meal/add-on cards and the cart panel is its sibling. */
  .row:has(> .info-box-column-wrap) > .col-md-8:has(.meal-card-block.col-6, .addon-card-block.col-6) { flex: 0 0 100%; max-width: 100%; }
  /* ... and on /order-once-meals/ the delivery date + delivery instructions column above
        that grid as well: it stayed 480px (col-md-8) over the 720px grid and looked off-centre. */
  .row:has(> .info-box-column-wrap) > .col-md-8:has(#slider-once) { flex: 0 0 100%; max-width: 100%; }

  /* 3. Three cards per row (each stays 240px wide, as before); the fasting
        "menu + photo" pairs keep their 50/50 split. */
  .row:has(> .info-box-column-wrap) > .col-md-8 .row:not(.meal_with_image_row) > .meal-card-block.col-6,
  .row:has(> .info-box-column-wrap) > .col-md-8 .row:not(.meal_with_image_row) > .addon-card-block.col-6 { flex: 0 0 33.3333%; max-width: 33.3333%; }

  /* 4. Holiday meals: its panel is taller (minimum-order block, ~238px), so the
        last card row ended under the full-width panel with its +/- unreachable.
        Room at the bottom lets that row scroll above the panel. */
  .row:has(> .info-box-column-wrap #continue-order-step1-holiday-meals-sidebar) > .col-md-8 { padding-bottom: 80px; }
}

/* ---- Cart sidebar on the 960px Bootstrap grid (991.02-1199.98px) ----
   The selected-meal rows have a fixed 340px width (cystom-styles.css) while the
   col-md-4 sidebar is ~270px wide: rows stuck out of the panel, the page got a
   horizontal scroll and the cabinet cut the total ("56.7" without CHF).
   The lower bound 991.02px also covers fractional widths (OS scaling) where
   the mobile panel rules no longer apply. Only widths change here: max-height
   of these rows is written inline by JS (updateMaxHeight) and stays as is.
   Up to 1199.98px: the sidebar is still 320px wide there (fits from 1200). */
@media (min-width: 991.02px) and (max-width: 1199.98px) {
  .sticky-row-order-header-tab-new,
  .sticky-row-order-header-tab-new-edit,
  .sticky-row-order-header-tab-new-once { width: 100%; }

  /* /order-once-meals/: min-width 330px made the block wider than the sidebar */
  .box-shadow-once { min-width: 100%; }

  /* 80px icon + 10px gap come from the inline <style> of order_multipage_common;
     two classes beat that inline rule. Keeps the title next to the picture. */
  .sticky-row-order-header-tab-new .meal-cart-title-block,
  .sticky-row-order-header-tab-new-edit .meal-cart-title-block,
  .sticky-row-order-header-tab-new-once .meal-cart-title-block { width: calc(100% - 90px); }

  .sticky-row-order-header-tab-new .name_span_element,
  .sticky-row-order-header-tab-new-edit .name_span_element,
  .sticky-row-order-header-tab-new-once .name_span_element {
    display: inline-block; max-width: 100%; vertical-align: top;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* totals only; the per-meal price line may wrap inside its own block */
  .sticky-row-order-header-tab-new .money,
  .sticky-row-order-header-tab-new-edit .money,
  .sticky-row-order-header-tab-new-once .money { white-space: nowrap; }
}

/* ---- Step 1, CONTINUE bar, account forms, modal text (768-991.98px) ---- */
@media (min-width: 768px) and (max-width: 991.98px) {
  /* /choose-meal-plan/, /edit-order-step1/: the meals-per-week cards stood in a
     full-width column; now a 3x2 grid on the columns of the cards above.
     div. beats the inline <style> of the template (same class selector).
     Only widths: the cards are hidden with inline display:none / d-none. */
  div.mealsper-week-div-wrap { justify-content: flex-start; flex-wrap: wrap; }
  .mealsper-week-div-wrap > .order-container-radio-big { width: calc((100% - 18px) / 3); }
  .mealsper-week-div-wrap > .order-container-radio-big > .checkmark { display: block; width: 100%; height: 100%; }
  .mealsper-week-div-wrap span.mealsper-week-d-none-mobile { display: inline; }

  /* CONTINUE bar was 108.5% of the container: it stuck out on the right and
     gave iPads a horizontal scroll. Now it is as wide as the container; the
     grey sides and the top shadow up to the window edges are painted by
     border-image outset, which does not widen the page. position, bottom,
     z-index and margin-bottom stay from cystom-styles.css. */
  .button-fixed-bottom-mobile {
    width: auto; margin-left: -15px; margin-right: -15px; box-shadow: none;
    border-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.12) 3px, #ededed 3px) fill 0 / 0 / 3px 50vw 0;
  }

  /* /create-account/ only (the one #form_order_step4 page with the mobile bar
     in .container): the form column was 480px against the left edge.
     A rule of its own: a browser without :has() drops just this one. */
  .container:has(> .button-fixed-bottom-mobile) > #form_order_step4 > .row > .col-md-8 {
    flex: 0 0 600px; max-width: 600px; margin-left: auto; margin-right: auto;
  }

  /* /fasting-create-account/ and /order-once-checkout/ (both post to
     /fasting-ordering/): the button text did not fit its 50px height. The
     button column goes full width under the title, like on phones. */
  #form_order_step4[action*="fasting-ordering"] #pills-checkout > .sticky-row-order-header-tab > .col-md-6 {
    flex: 0 0 100%; max-width: 100%;
  }

  /* Modal text was 4.3vw (33-43px here); same 18px as from 992px up. */
  .modal-body-text1, .modal-body-text2, .modal-body-text3 { font-size: 18px; }
}

/* ---- Reviews carousel on /thank-you-page/ and /edit-order-step1/ (768-1099.98px) ----
   The inline padding 0 75px (carousel_reviews.html) left 53-133px for the text
   (up to 25 lines per review). 45px keeps the text 8px clear of the arrows.
   Goes with the Swiper breakpoints in carousel_reviews.html: 2 per view from
   768px, 3 from 992px. */
@media (min-width: 768px) and (max-width: 1099.98px) {
  .swiper-container-reviews .menu-content-item { padding-left: 45px !important; padding-right: 45px !important; }
  .swiper-container-reviews .menu-content-item__image { overflow-wrap: break-word; }
}

/* ---- "Once" customers: header and delivery-date slider (768-991.98px) ---- */
@media (min-width: 768px) and (max-width: 991.98px) {
  /* The last item (logout / language) never shrinks. */
  #main-menu > .nav-item:last-child { flex-shrink: 0; }

  /* Only a menu with 6+ <li> (once customers, extra "Order history") wrapped
     into 2 lines and squeezed the logo; weekly (5) and anonymous (2-3) menus
     are left as they are. -of-type: #main-menu also has a child <style>
     (nav_header.html). 11px keeps the FR menu ~40px inside its 490px. */
  #main-menu > li:first-of-type:nth-last-of-type(n+6) > .nav-link,
  #main-menu > li:first-of-type:nth-last-of-type(n+6) ~ li > .nav-link {
    font-size: 11px; padding-left: 5px; padding-right: 5px; white-space: nowrap;
  }
  #main-menu > li:first-of-type:nth-last-of-type(n+6) ~ li > .personalization-header {
    font-size: 11px; padding-left: 5px; padding-right: 5px;
  }

  /* Date slider: cystom-styles.css made every slide 100px !important while
     Swiper moved them on a 1/4 grid, so the active date ended off-screen.
     Slide width = the Swiper grid. KEEP IN SYNC with the 768 breakpoint
     {slidesPerView: 4, spaceBetween: 0} in
     cabinet/edit_boxes_meals_by_amount_separate_menu.html. */
  .swiper-container-once-new .swiper-slide.swiper-slide-once { width: 25% !important; }
  /* exactly 768: the template's max-width:768px rule made the container 100%
     wide and the arrow covered the first date */
  .delivery-days-container > .swiper-container-once-new { width: 95%; margin-left: 20px; }
}

/* ---- Cabinet left menu (768-1199.98px) ----
   Bootstrap .nav has flex-wrap: wrap, so the flex line grew to the longest
   item: EN/DE/FR items were 261-314px in a 210px column, ran into the section
   and covered the start of its title (their right part was not tappable).
   nowrap keeps the items in the column; long labels wrap to a 2nd line, like
   in the phone accordion. Scoped to the menu column: the clone at the bottom
   (nav.cabinet-menu-bottom) and the payment tabs are not touched.
   Up to 1199.98px: the 320px column of the 960px grid (FR items ran 6-21px
   out at 1100-1199 too); from 1200px the column is 380px. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .cabinet-base-content-wrapper .cabinet-menu-col .cabinet-menu { flex-wrap: nowrap; }
  .cabinet-base-content-wrapper .cabinet-menu-col .cabinet-menu .nav-link {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word; /* Safari < 15.4 */
    /* 4px of room on the right (text is left-aligned, nothing moves): the
       bold active DE "Gespeicherte Zahlungsmethode" (1px too wide) stays on
       one line at 992-1199 */
    padding-right: 12px;
  }
}
/* 210px column: compact two-line items (51px); FR "Méthode de paiement
   sauvegardée" takes 2 lines, not 3 */
@media (min-width: 768px) and (max-width: 991.98px) {
  .cabinet-base-content-wrapper .cabinet-menu-col .cabinet-menu .nav-link {
    line-height: 1.25; padding-left: 12px; padding-right: 8px; gap: 8px;
  }
}

/* ---- /payment/ and the other payment pages (768-991.98px) ----
   Payment templates leave {% block menu %} empty, yet the col-md-4 menu column
   still took 1/3 of the row and the order card sat at the right. A menu column
   without child elements is hidden and the section takes the row (:empty does
   not work: the column holds whitespace). Without :has() both rules are
   dropped and the page stays as before. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .cabinet-base-content-wrapper > .cabinet-menu-col:not(:has(*)) { display: none; }
  .cabinet-base-content-wrapper > .cabinet-menu-col:not(:has(*)) ~ #cabinet-section { flex: 0 0 100%; max-width: 100%; }
}