/* ==========================================================================
   Eden Product Selector – UI Pro & Responsive
   Chemin : /wp-content/plugins/eden-product-selector/assets/eden-selector.css
   ========================================================================== */

.eden-sel{
  /* Couleurs & variables */
  --eden-c: #183963;                  /* hérité du plugin, peut être surchargé BO */
  --eden-bg: #ffffff;
  --eden-line: #e5e7eb;
  --eden-muted: #6b7280;
  --eden-shadow: 0 6px 18px rgba(0,0,0,.06);
  --eden-radius: 16px;
  --eden-gap: 14px;
  --eden-pad: 16px;

  background: var(--eden-bg);
  border: 1px solid var(--eden-line);
  border-radius: var(--eden-radius);
  box-shadow: var(--eden-shadow);
  padding: var(--eden-pad);
  margin: 18px 0;
}

/* Grille responsive : champs alignés, sans décalages */
.eden-sel .eden-row{
  margin: 0;
}
.eden-sel .eden-row .eden-row-inner{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--eden-gap);
  align-items: end;
}

/* Chaque “case” occupe une cellule homogène */
.eden-sel .case{
  display: flex;
  flex-direction: column;
  min-width: 0; /* évite les débordements */
}

/* Label léger au-dessus de l’input pour supprimer tout décalage horizontal */
.eden-sel .case .label{
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--eden-muted);
  margin: 0 0 6px 0;
  line-height: 1.2;
  white-space: normal;
}

/* Inputs & selects uniformisés */
.eden-sel .case select,
.eden-sel .case input[type=number]{
  display: block;
  width: 100%;
  height: 44px;
  line-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--eden-line);
  border-radius: 10px;
  background: #fff;
  color: inherit;
  box-sizing: border-box;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
  outline: none;
}

/* Focus propre et accessible */
.eden-sel .case select:focus,
.eden-sel .case input[type=number]:focus{
  border-color: var(--eden-c);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--eden-c) 25%, transparent);
}

/* Supprimer les flèches des number (déjà demandé) */
.eden-sel .case input[type=number]::-webkit-outer-spin-button,
.eden-sel .case input[type=number]::-webkit-inner-spin-button{
  -webkit-appearance: none !important;
  margin: 0 !important;
}
.eden-sel .case input[type=number]{
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}

/* Bloc actions : toujours aligné à gauche et calé sur la grille */
.eden-sel .actions{
  grid-column: 1 / -1;      /* occupe toute la rangée */
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  margin-top: 4px;
}

/* Boutons */
.eden-sel .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--eden-c);
  background: var(--eden-c);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform .05s ease, opacity .15s ease, background-color .15s ease, border-color .15s ease;
}
.eden-sel .btn:hover{
  opacity: .9;
}
.eden-sel .btn:active{
  transform: translateY(1px);
}
.eden-sel .btn.outline{
  background: transparent;
  color: var(--eden-c);
}

/* Résultats */
.eden-results{
  margin-top: 18px;
  min-height: 48px;
  position: relative;
}

/* État “aucun résultat” propre */
.eden-empty{
  text-align: center;
  padding: 28px 12px;
  border: 1px dashed var(--eden-line);
  border-radius: 12px;
  background: #fafafa;
}
.eden-empty p{ margin: 0 0 10px 0; }

/* Loader squelette pendant l’AJAX */
.eden-skeleton{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.eden-skeleton .card{
  height: 260px;
  border-radius: 14px;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.04), rgba(0,0,0,0.08), rgba(0,0,0,0.04));
  background-size: 200% 100%;
  animation: edenShimmer 1.2s infinite linear;
}
@keyframes edenShimmer{
  0%{ background-position: 200% 0; }
  100%{ background-position: -200% 0; }
}

/* Accessibilité : focus visible sur les boutons aussi */
.eden-sel .btn:focus{
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--eden-c) 25%, transparent);
}

/* Petits écrans – confort mobile */
@media (max-width: 640px){
  .eden-sel{ padding: 14px; border-radius: 14px; }
  .eden-sel .eden-row .eden-row-inner{
    grid-template-columns: 1fr; /* 1 champ par ligne pour éviter tout débordement */
    gap: 12px;
  }
  .eden-sel .btn{ width: auto; min-width: 140px; }
}

/* Écrans moyens – 2 colonnes propres */
@media (min-width: 641px) and (max-width: 1024px){
  .eden-sel .eden-row .eden-row-inner{
    grid-template-columns: repeat(2, minmax(240px, 1fr));
  }
}

/* Écrans larges – 3 à 4 colonnes suivant la place */
@media (min-width: 1025px){
  .eden-sel .eden-row .eden-row-inner{
    grid-template-columns: repeat(4, minmax(240px, 1fr));
  }
}

/* Optionnel : harmonise la typo si le thème a des styles agressifs */
.eden-sel,
.eden-sel select,
.eden-sel input{
  font-size: 16px;
}