/* El checkout debe caber incluso con los controles nativos de fecha de iOS. */
.checkout-modal,
.checkout-modal form,
.checkout-fields,
.checkout-fields > div,
.delivery-address,
.delivery-address > div{
  min-width:0;
  max-width:100%;
}

.checkout-modal{
  width:min(680px,100%);
  overflow-x:hidden;
}

.checkout-fields input,
.checkout-fields textarea,
#orderDate{
  display:block;
  width:100%;
  min-width:0;
  max-width:100%;
  inline-size:100%;
}

#orderDate::-webkit-date-and-time-value{
  min-width:0;
  text-align:left;
}

#orderDate::-webkit-calendar-picker-indicator{
  flex:none;
  margin-left:auto;
}

@media(max-width:600px){
  #checkoutModal{
    padding:0!important;
    overflow-x:hidden;
    overscroll-behavior:contain;
  }

  .checkout-modal{
    width:100%;
    max-width:100%;
    margin:max(10px,env(safe-area-inset-top)) 0 0;
    padding:46px 16px calc(26px + env(safe-area-inset-bottom));
    border-radius:24px 24px 0 0;
  }

  .checkout-modal > .close{
    top:12px;
    right:12px;
  }

  .checkout-head{
    padding:0 9px;
  }

  .checkout-head h2{
    font-size:clamp(31px,10vw,38px);
  }

  .fulfilment-tabs{
    width:100%;
    min-width:0;
    gap:3px;
  }

  .fulfilment-tabs button{
    min-width:0;
    overflow-wrap:anywhere;
  }

  .checkout-fields{
    width:100%;
    gap:15px;
  }

  .checkout-fields input,
  .checkout-fields textarea,
  #orderDate{
    min-height:48px;
    padding:12px;
    font-size:16px;
  }

  .time-slots{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%;
    gap:7px;
  }

  .time-slots button{
    min-width:0;
    padding:10px 7px;
    font-size:12px;
    line-height:1.2;
  }

  .delivery-quote{
    overflow-wrap:anywhere;
  }
}

@media(max-width:350px){
  .time-slots{grid-template-columns:1fr}
}