/* ===== LOCMAV SHOP UI ===== */

/* Inputs dates/heures */
.locmav-shop-dates-wrap input[type="text"],
.locmav-shop-dates-wrap input[type="time"]{
  background: #fff !important;
  color: #111 !important;
  border: 1px solid rgba(0,0,0,.25) !important;
  border-radius: .5rem;
  padding: .55rem .65rem;
}

/* Selects (heures) */
.locmav-shop-dates-wrap select{
  background: #fff !important;
  color: #111 !important;
  border: 1px solid rgba(0,0,0,.25) !important;
  border-radius: .5rem;
  padding: .55rem .65rem;
}

/* jQuery UI datepicker (boutique) */
#ui-datepicker-div{
  background: #fff !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 999999 !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
}

/* Texte calendrier */
.ui-datepicker,
.ui-datepicker td,
.ui-datepicker th{
  color: #111 !important;
}

/* Erreurs */
.locmav-date-error{
  margin:.5rem 0;
  padding:.6rem .8rem;
  border:1px solid #d63638;
  background:#fff0f0;
  color:#8a1f1f;
  border-radius:.5rem;
}

/* Empêcher modification quantité dans le panier (Blocks) */
.wc-block-components-quantity-selector__button,
.wc-block-components-quantity-selector__input{
  pointer-events: none !important;
  opacity: .55;
}
.wc-block-components-quantity-selector__input{
  background: #f6f7f7 !important;
}

/* ===== Bandeau LocMav – compact + responsive (4 cas) ===== */

.locmav-shop-dates-wrap{
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 10px !important;
  padding: 10px 16px;
  container-type: inline-size;
  container-name: locmav-bar;
}

/* Grid fluide :
   1) Projet (rétrécissable)
   2) Début
   3) Fin
   4) Actions (bouton + hint)
*/
.locmav-bar-grid{
  display: inline-grid;                  /* <- clé : la grid ne prend pas toute la largeur */
  grid-template-columns: minmax(40ch, 1fr) 24ch 24ch auto; /* tailles fixes */
  column-gap: 16px;
  row-gap: 5px;
  align-items: center;
  justify-content: start;
  justify-items: start;
}


.locmav-shop-dates{
  display: block !important; /* neutralise Astra flex/space-between */
}




/* Blocs inline + padding symétrique (espaces égaux autour des séparateurs) */
.locmav-bar-block{
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;                 /* pas de padding qui casse la symétrie */
  position: relative;
}

.locmav-bar-grid{ --sep-gap: 16px; }
.locmav-bar-block:not(:last-child)::after{
  content:"";
  position:absolute;
  top:50%;
  right: calc(-1 * (var(--sep-gap) / 2));
  transform: translateY(-50%);
  width:1px;
  height:28px;
  background: rgba(0,0,0,.15);
}

/* Titres compacts */
.locmav-bar-title{
  font-size: 11px;
  font-weight: 600;
  opacity: .7;
  margin: 0px 6px 0 0;
  white-space: nowrap;
}

/* Ligne d’inputs */
.locmav-bar-row{
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* Dates compactes */
#locmav_pickup_date,
#locmav_dropoff_date{
  width: 9.5ch;
  min-width: 9.5ch;
  font-size: 13px;
  padding: 4px 6px !important;
}

/* Heures compactes */
.locmav-shop-dates-wrap select[name="pickup_time"],
.locmav-shop-dates-wrap select[name="dropoff_time"]{
  width: 6.5ch;
  min-width: 6.5ch;
  font-size: 13px;
  padding: 4px 4px;
}

/* Projet compact (~32ch max, shrink possible) */
.locmav-bar-project input[name="locmav_project"]{
  width: 32ch;
  max-width: 32ch;
  min-width: 32ch;
  font-size: 13px;
  padding: 4px 6px !important;
}

/* Bouton compact */
.locmav-update-btn{
  padding: 5px 10px !important;
  font-size: 13px !important;
  line-height: 1.2;
  white-space: nowrap; /* évite "Mettre à\njour" */
}

/* Hint : jamais de dépassement */
/* Le bloc Actions doit pouvoir donner de la place au hint */
.locmav-bar-grid > .locmav-bar-block:nth-child(4){
  min-width: 0;
  max-width: 100%;
}

/* Hint : prend la place dispo, tronque seulement si vraiment nécessaire */
.locmav-bar-hint{
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: italic;
  font-size: 12px;
  opacity: .75;
}


/* ===== Cas 3 : encore plus étroit -> plus aucun séparateur ===== */
@container  (max-width: 850px){
  .locmav-bar-grid{
     row-gap: 10px; /* +5px comme tu voulais */
    grid-template-columns: max-content max-content auto;
    justify-content: start;
    justify-items: start;
  }

  /* Bloc Actions (4e) sur la 2e ligne */
  .locmav-bar-grid > .locmav-bar-block:nth-child(4){
    grid-column: 1 / -1;
    justify-self: start;
  }

  /* Bloc Fin (3e) : plus de séparateur en fin de ligne */
  .locmav-bar-grid > .locmav-bar-block:nth-child(3)::after{
    display: none;
  }
    .locmav-bar-grid > .locmav-bar-block:nth-child(3){
    border-right: none;
    padding-right: 0;
  }
  .locmav-bar-block{
    border-right: none !important;
    padding: 0 !important;
  }
}

/* ===== Cas 4 : très étroit -> hint disparaît (hauteur maîtrisée) ===== */
@container  (max-width: 400px){
  .locmav-bar-hint{ display:none; }
}

/* Mobile : empilement */
@container  (max-width: 650px){
  .locmav-bar-grid{
    row-gap: 5px;
    grid-template-columns: 1fr;
  }
  .locmav-bar-block::after{ display:none !important; }
}

.locmav-btn-disabled {
  opacity: 0.55;
  cursor: not-allowed !important;
  pointer-events: none; /* évite les clics même si un JS le réactive bizarrement */
}

.footer-version {
    font-size: 12px;
    color: #888; /* Ou toute autre couleur */
    margin-top: 10px;
    text-align: center;
}