/* =====================================================
   Vitronet — booking_mobile_hotfix.css
   Target: narrow phones (≤420px). Widens content and improves wrapping.
   Layer on top of your current booking.css / booking_responsive.css.
   ===================================================== */

/* 1) Use all available width */
@media (max-width: 420px){
  #booking-root,
  #booking-root .wrap,
  #booking-root .card,
  #booking-root .acc-item,
  #booking-root .acc-body { width: 100%; max-width: 100%; }

  /* Remove any unexpected internal gaps */
  #booking-root .card { padding-left: 10px; padding-right: 10px; }
  #booking-root .acc-body { padding-left: 10px; padding-right: 10px; }

  /* 2) Headers: simplify grid so text can breathe */
  #booking-root .acc-header{
    grid-template-columns: auto 1fr auto;
    column-gap: 10px;
  }
  #booking-root .acc-header > *{ min-width: 0; } /* allow wrapping */

  /* 3) Quantity rows: ensure middle column wraps (no truncation) */
  #booking-root .qty-row{
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto; /* counter | label | actions */
    align-items: center;
    column-gap: 10px;
  }
  #booking-root .qty-row > *{ min-width: 0; }

  /* 3b) Make the +/- controls easier to tap */
  #booking-root .qty-actions .btn,
  #booking-root .qty-actions button,
  #booking-root .qty-actions input[type="number"]{
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 10px;
  }

  /* 4) Lists / grids inside accordion take full width */
  #booking-root .u-list,
  #booking-root .u-card{ width: 100%; max-width: 100%; }

  /* 5) Slots: keep our wrap strategy and avoid micro-pills */
  #booking-root .slot{ min-width: 72px; padding: 10px 12px; }

  /* 6) Typography: slightly tighter to gain space */
  #booking-root .acc-item h4,
  #booking-root .acc-item h3 { margin: 4px 0; }
}

/* Extra safety: absolutely no horizontal scrolling */
html, body { overflow-x: hidden; }