/* =====================================================
   Vitronet — booking_mobile_hotfix_v2.css
   Purpose: Fix narrow mobile layout for qty rows (0 | Retirer | Ajouter).
   Strategy: Stack into two rows and make buttons full-width, readable, tappable.
   Apply AFTER your booking.css (and after v1 hotfix if present).
   ===================================================== */

@media (max-width: 420px){
  /* Turn each qty-row into a two-line layout:
     Row 1: counter + label
     Row 2: two action buttons (Retirer / Ajouter), full-width columns
  */
  #booking-root .qty-row{
    display: grid !important;
    grid-template-areas:
      "counter label"
      "actions actions";
    grid-template-columns: auto 1fr;
    row-gap: 8px;
    column-gap: 10px;
    align-items: center;
  }
  #booking-root .qty-row .counter{ grid-area: counter; min-width: 38px; min-height: 34px; display:grid; place-items:center; border-radius:10px; }
  #booking-root .qty-row .label,
  #booking-root .qty-row .name,
  #booking-root .qty-row .title{ grid-area: label; min-width: 0; }

  /* Action container: 2 equal columns */
  #booking-root .qty-row .qty-actions{
    grid-area: actions;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  /* Buttons: fill their cell, large tap target */
  #booking-root .qty-row .qty-actions .btn,
  #booking-root .qty-row .qty-actions button{
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 10px;
    white-space: nowrap;
  }

  /* If there's an icon/thumbnail on the left, constrain it */
  #booking-root .qty-row .thumb,
  #booking-root .qty-row img{
    width: 32px; height: 32px; object-fit: cover; border-radius: 8px;
  }

  /* Compact spacing inside cards to win horizontal space */
  #booking-root .card{ padding-left: 10px; padding-right: 10px; }
  #booking-root .acc-body{ padding-left: 10px; padding-right: 10px; }

  /* Prevent any forced inline layout that could conflict */
  #booking-root .qty-row .qty-actions > *{ flex: 1 1 auto; }
}

/* Absolute safety: no horizontal scroll */
html, body { overflow-x: hidden; }