/* ==========================================================================
   Le Barbier de Nancy — CSS UNIQUE du formulaire de réservation (v3)
   Salon Booking System (wpchef-salon-booking-plugin)

   v3 corrige 3 points trouvés en testant le v2 :
   1. Case à cocher : on ne superpose plus une case perso par-dessus
      celle du plugin (ça créait un double-carré) — on recolore
      directement le système de case natif (label:before / label:after
      avec l'icône "done").
   2. Boutons Retour/Suivant : specificite renforcee (repetition de
      #sln-salon) pour etre sûr de gagner face aux regles du plugin,
      quelle que soit la source du noir observe.
   3. Frise d'etapes : remplacee par une barre de progression fine +
      texte (voir override _progbar.php), plus de cercles qui
      wrappaient mal sur mobile.
   ========================================================================== */

#sln-salon{
  --gold:      #D19F68;
  --gold-dark: #B07E4A;
  --black:     #000000;
  --ink:       #1A1A1A;
  --cream:     #FAF7F2;
  --line:      #E7E0D6;
  --grey:      #6B6B6B;
  --radius:    10px;
  --shadow:    0 4px 16px rgba(0,0,0,.08);
  --shadow-hover: 0 10px 28px rgba(0,0,0,.12);
}

/* ---------- 1. Base ---------- */
#sln-salon, #sln-salon *{
  box-sizing: border-box;
}
#sln-salon{
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--cream);
  padding: 30px 16px 50px;
}
#sln-salon__content{
  background: #fff;
  max-width: 900px;
  margin: 0 auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px;
}
@media (max-width: 700px){
  #sln-salon{ padding: 16px 8px 30px; font-size: 15px; }
  #sln-salon__content{ padding: 18px; }
}

#sln-salon h1, #sln-salon h2, #sln-salon h3, #sln-salon h4, #sln-salon h5{
  font-family: 'Oswald', sans-serif;
  color: var(--black) !important;
}
#sln-salon .sln-salon-title{
  text-align: center;
  text-transform: uppercase;
  font-size: 24px;
  margin-bottom: 4px;
}
#sln-salon .salon-step-title{
  text-align: center;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--gold-dark) !important;
  margin: 0 0 24px;
}
#sln-salon .sln-topbar{ text-align: right; margin-bottom: 10px; }
#sln-salon .sln-topbar a{ color: var(--grey) !important; font-size: 13px; }
#sln-salon .sln-topbar a:hover{ color: var(--gold-dark) !important; }

#sln-salon p{ font-size: 15px; color: var(--ink); }

/* ---------- 2. Barre de progression (voir override _progbar.php) ---------- */
#sln-salon .sbs-progbar__legacy{ display: none !important; }
#sln-salon .sbs-linear{ margin-bottom: 30px; }
#sln-salon .sbs-linear__top{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
#sln-salon .sbs-linear__label{
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: .6px;
  color: var(--black);
}
#sln-salon .sbs-linear__count{
  font-size: 12px;
  color: var(--grey);
}
#sln-salon .sbs-linear__track{
  background-color: var(--line) !important;
  height: 6px !important;
  border-radius: 999px !important;
  overflow: hidden;
  position: relative;
}
#sln-salon .sbs-linear__fill{
  height: 100%;
  background: var(--gold);
  border-radius: 999px;
  transition: width .3s ease;
}

/* ---------- 3. Catégories de prestations (accordéons) ---------- */
#sln-salon .sln-panel{
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  overflow: hidden;
  margin-bottom: 6px !important;
}
#sln-salon .sln-panel-heading,
#sln-salon .sln-panel-heading.collapsed,
#sln-salon .sln-panel-heading .sln-btn,
#sln-salon .sln-panel-heading.collapsed .sln-btn{
  color: var(--black) !important;
  background-color: #fff !important;
}
#sln-salon .sln-panel-heading{
  padding: 14px 16px !important;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: .5px;
  font-family: 'Oswald', sans-serif;
  border-bottom: 2px solid transparent;
}
#sln-salon .sln-panel-heading:not(.collapsed){
  border-bottom-color: var(--gold);
}
#sln-salon .sln-panel-heading .sln-btn::after{ color: var(--gold) !important; }
#sln-salon .sln-panel .sln-panel-content{ padding: 8px 10px !important; }

/* ---------- 4. Cartes de prestations / praticiens (.sln-list__item) ---------- */
#sln-salon .sln-list__item{
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  padding: 16px !important;
  margin-bottom: 10px !important;
  max-width: none !important;
  grid-template-columns: 72px auto 110px !important;
  gap: 14px !important;
  transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
#sln-salon .sln-list__item:not(:has(.sln-list__item__thumb)){
  grid-template-columns: auto 110px !important;
}
#sln-salon .sln-list__item:hover{
  border-color: var(--gold) !important;
  box-shadow: var(--shadow-hover);
  transform: translateY(-1px);
}
#sln-salon .sln-list__item:has(input:checked){
  border-color: var(--gold) !important;
  background: var(--cream) !important;
  box-shadow: inset 3px 0 0 var(--gold);
}
#sln-salon .sln-list__item__thumb img{
  width: 72px; height: 72px; border-radius: 8px; object-fit: cover;
}
#sln-salon .sln-list__item__name,
#sln-salon .sln-service-name,
#sln-salon .sln-steps-name{
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--black) !important;
  text-transform: none !important;
  margin: 0 0 4px !important;
}
#sln-salon .sln-list__item__description{
  font-size: 13px !important;
  color: var(--grey) !important;
  margin: 0 0 6px !important;
}
#sln-salon .sln-list__item__description__breakdots{
  color: var(--gold-dark) !important;
  font-weight: 600;
}
#sln-salon .sln-list__item__info{ display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }

#sln-salon .sln-list__item__price,
#sln-salon .sln-service-price,
#sln-salon .sln-steps-price,
#sln-salon .sln-service-price-value,
#sln-salon .sln-total-price{
  color: var(--gold-dark) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}
#sln-salon .sln-list__item__duration{
  color: #999 !important;
  font-size: 12px !important;
  text-transform: uppercase;
}
#sln-salon .sln-list__item__action{ text-align: right; }
#sln-salon .sln-list__item__errors{ grid-column: 1 / -1; }

/* --- Case à cocher : recolorer le système NATIF du plugin (label:before/after),
   ne pas en superposer un autre par-dessus (ça créait un double carré). --- */
#sln-salon .sln-checkbox input + label:before{
  border-color: var(--line) !important;
  background-color: #fff !important;
}
#sln-salon .sln-checkbox input:checked + label:before{
  border-color: var(--gold) !important;
  background-color: var(--gold) !important;
}
#sln-salon .sln-checkbox input + label:after{
  color: var(--gold) !important;
}
#sln-salon .sln-checkbox input:checked + label:after,
#sln-salon .sln-checkbox input:checked + label:hover:after{
  color: #fff !important;
  opacity: 1 !important;
}
#sln-salon .sln-checkbox input + label:hover:after{
  color: var(--gold-dark) !important;
}

#sln-salon .sln-attendants-wrapper{ display: flex; flex-wrap: wrap; gap: 14px; }
#sln-salon .sln-attendants-wrapper .sln-list__item{ flex: 1 1 220px; }
#sln-salon .sln-attendant img{ width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }

/* ---------- 5. Calendrier / créneaux (.datetimepicker.sln-datetimepicker) ---------- */
#sln-salon .sln-input--datepicker{
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  padding: 16px !important;
}
#sln-salon .datetimepicker.sln-datetimepicker{
  font-family: 'Open Sans', sans-serif !important;
  width: 100% !important;
}
#sln-salon .datetimepicker.sln-datetimepicker table{ width: 100% !important; }
#sln-salon .datetimepicker.sln-datetimepicker td,
#sln-salon .datetimepicker.sln-datetimepicker th{
  font-size: 14px !important;
  color: var(--ink) !important;
}
#sln-salon .datetimepicker.sln-datetimepicker th.switch{
  font-family: 'Oswald', sans-serif !important;
  text-transform: uppercase;
  font-size: 14px !important;
  color: var(--black) !important;
}
#sln-salon .datetimepicker.sln-datetimepicker .prev,
#sln-salon .datetimepicker.sln-datetimepicker .next{
  color: var(--black) !important;
}
#sln-salon .datetimepicker.sln-datetimepicker .prev:hover,
#sln-salon .datetimepicker.sln-datetimepicker .next:hover{
  background-color: var(--gold) !important;
  color: #fff !important;
}
#sln-salon .datetimepicker.sln-datetimepicker table tr td.day,
#sln-salon .datetimepicker.sln-datetimepicker table tr td span.hour,
#sln-salon .datetimepicker.sln-datetimepicker table tr td span.minute{
  border-radius: 6px !important;
}
#sln-salon .datetimepicker.sln-datetimepicker table tr td.day:not(.disabled):hover,
#sln-salon .datetimepicker.sln-datetimepicker table tr td span.hour:not(.disabled):not(.active):hover,
#sln-salon .datetimepicker.sln-datetimepicker table tr td span.minute:not(.disabled):not(.active):hover{
  background-color: var(--cream) !important;
  color: var(--black) !important;
}
#sln-salon .datetimepicker.sln-datetimepicker table tr td.day.active:not(.disabled),
#sln-salon .datetimepicker.sln-datetimepicker table tr td span.hour.active:not(.disabled),
#sln-salon .datetimepicker.sln-datetimepicker table tr td span.minute.active:not(.disabled),
#sln-salon .datetimepicker.sln-datetimepicker table tr td.active{
  background-color: var(--gold) !important;
  color: #fff !important;
  font-weight: 700 !important;
}
#sln-salon .datetimepicker.sln-datetimepicker table tr td.-today{
  box-shadow: inset 0 0 0 2px var(--black) !important;
  font-weight: 700 !important;
}
#sln-salon .datetimepicker.sln-datetimepicker table tr td.disabled{
  color: #cfcfcf !important;
}
#sln-salon .sln_datepicker:hover:after,
#sln-salon .sln_timepicker:hover:after{
  color: var(--gold-dark) !important;
}
#sln-salon .is_scrollable::-webkit-scrollbar-thumb{ background-color: var(--gold) !important; }
#sln-salon .is_scrollable::-webkit-scrollbar-track{ background-color: var(--cream) !important; }

/* ---------- 6. Champs de formulaire (coordonnées) ---------- */
#sln-salon .form-row label{
  display: block !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  color: var(--black) !important;
  margin-bottom: 6px !important;
  position: static !important;
  height: auto !important;
  width: auto !important;
}
#sln-salon .form-row input:not([type="checkbox"]):not([type="radio"]),
#sln-salon .form-row select,
#sln-salon .form-row textarea,
#sln-salon .sln-input input[type="text"],
#sln-salon .sln-input input[type="email"],
#sln-salon .sln-input input[type="tel"],
#sln-salon .sln-input input[type="password"],
#sln-salon .sln-input select,
#sln-salon .sln-input textarea{
  width: 100% !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  font-size: 15px !important;
  background: #fcfcfc !important;
}
#sln-salon .form-row input:focus,
#sln-salon .form-row select:focus,
#sln-salon .form-row textarea:focus,
#sln-salon .sln-input input:focus,
#sln-salon .sln-input select:focus,
#sln-salon .sln-input textarea:focus{
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(209,159,104,.18) !important;
  outline: none !important;
  background: #fff !important;
}
#sln-salon label.error, #sln-salon .wpcf7-not-valid-tip{
  color: #c0392b !important; font-size: 12px !important;
}
#sln-salon .select2-container--sln .select2-selection--single{
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  height: 44px !important;
}

/* ---------- 7. Récapitulatif ---------- */
#sln-salon .sln-summary{
  background: var(--cream) !important;
  border-radius: var(--radius) !important;
  padding: 16px !important;
}
#sln-salon .sln-summary, #sln-salon .sln-summary *{
  color: var(--ink) !important;
  font-size: 14px !important;
}
#sln-salon .sln-summary .sln-data-val strong,
#sln-salon .sln-summary__list__name{ color: var(--black) !important; }
#sln-salon .sln-summary__terms, #sln-salon .sln-summary__terms *{ color: var(--ink) !important; font-size: 13px !important; }
#sln-salon .sln-summary__tabs__toggle,
#sln-salon .sln-summary__tabs__toggle span,
#sln-salon .sln-btn--nobkg,
#sln-salon .sln-btn--nobkg span{ color: var(--ink) !important; }
#sln-salon .sln-summary__tabs__nav_item.active .sln-summary__tabs__toggle,
#sln-salon .sln-summary__tabs__nav_item.active .sln-summary__tabs__toggle span{
  color: var(--black) !important; font-weight: 700 !important;
}

/* ---------- 8. Barre du bas / total / boutons ---------- */
#sln-salon #sln-box__bottombar{
  border-top: 1px solid var(--line) !important;
  background: #fff !important;
  margin-top: 24px !important;
  padding-top: 18px !important;
}
#sln-salon .sln-box--formactions{
  background: #fff !important;
  border-top: 1px solid var(--line) !important;
  margin-top: 24px !important;
  padding-top: 18px !important;
  display: flex !important;
  flex-direction: row-reverse !important;
  gap: 14px !important;
  align-items: center !important;
  flex-wrap: wrap;
}
#sln-salon #sln-box__bottombar,
#sln-salon #sln-box__bottombar *,
#sln-salon .sln-box--formactions,
#sln-salon .sln-box--formactions *{
  color: var(--ink) !important;
}
#sln-salon .sln-total-label{
  font-size: 13px !important;
  text-transform: uppercase;
  color: var(--grey) !important;
}
#sln-salon .sln-total-price{
  font-family: 'Oswald', sans-serif !important;
  font-size: 22px !important;
  color: var(--gold-dark) !important;
}

/* Boutons — priorité renforcée (répétition de #sln-salon) pour être sûr
   de gagner sur les règles natives, quelle que soit leur origine.
   Couvre le div wrapper, l'ancre <a> et le <button> nu (le bouton
   "Suivant" est un <button> sans classe, stylé via son wrapper div). */
#sln-salon#sln-salon#sln-salon .sln-btn--nextstep,
#sln-salon#sln-salon#sln-salon .sln-btn--nextstep button,
#sln-salon#sln-salon#sln-salon .sln-btn--nextstep a,
#sln-salon#sln-salon#sln-salon .sln-btn--login{
  background-color: var(--gold) !important;
  border: none !important;
  color: #000 !important;
  box-shadow: none !important;
}
#sln-salon#sln-salon#sln-salon .sln-btn--nextstep:hover,
#sln-salon#sln-salon#sln-salon .sln-btn--nextstep button:hover,
#sln-salon#sln-salon#sln-salon .sln-btn--nextstep a:hover,
#sln-salon#sln-salon#sln-salon .sln-btn--login:hover{
  background-color: var(--black) !important;
  color: #fff !important;
}
#sln-salon#sln-salon#sln-salon .sln-btn--prevstep,
#sln-salon#sln-salon#sln-salon .sln-btn--prevstep .sln-btn,
#sln-salon#sln-salon#sln-salon .sln-btn--prevstep a,
#sln-salon#sln-salon#sln-salon a.sln-btn--borderonly,
#sln-salon#sln-salon#sln-salon .sln-btn--borderonly{
  background-color: #fff !important;
  background: #fff !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  color: var(--grey) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
#sln-salon#sln-salon#sln-salon .sln-btn--prevstep:hover,
#sln-salon#sln-salon#sln-salon .sln-btn--prevstep .sln-btn:hover,
#sln-salon#sln-salon#sln-salon .sln-btn--prevstep a:hover,
#sln-salon#sln-salon#sln-salon a.sln-btn--borderonly:hover,
#sln-salon#sln-salon#sln-salon .sln-btn--borderonly:hover{
  background-color: var(--cream) !important;
  border-color: var(--black) !important;
  color: var(--black) !important;
}
#sln-salon .sln-btn{
  border-radius: 6px !important;
  font-family: 'Oswald', sans-serif !important;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: 14px !important;
}
#sln-salon .sln-btn--medium{ padding: 0 20px !important; height: 46px !important; }

/* ---------- 9. Alertes ---------- */
#sln-salon .sln-alert{
  border-radius: 8px !important;
  border-left: 4px solid var(--gold) !important;
  font-size: 14px !important;
}

/* ---------- 10. Page de confirmation ---------- */
#sln-salon .sln-thankyou{ text-align: center; padding: 20px 0; }
#sln-salon .sln-thankyou h2, #sln-salon .sln-thankyou h3{ text-transform: uppercase; }

#sln-plugin-credits{ display: none !important; }

/* ---------- 11. Espace client (/booking-my-account/) ---------- */
#sln-salon #sln-salon-my-account{ max-width: 820px; margin: 0 auto; }
#sln-salon #sln-salon-my-account .nav-tabs{
  border-bottom: 1px solid var(--line) !important;
  display: flex !important; gap: 24px !important; margin-bottom: 24px !important; flex-wrap: wrap;
}
#sln-salon #sln-salon-my-account .nav-tabs .nav-link{
  border: none !important; background: none !important; padding: 0 0 10px !important;
  font-weight: 600 !important; color: var(--grey) !important; border-bottom: 2px solid transparent !important;
}
#sln-salon #sln-salon-my-account .nav-tabs .nav-link.active{
  color: var(--black) !important; border-bottom-color: var(--gold) !important;
}
#sln-salon #sln-salon-my-account .btn,
#sln-salon #sln-salon-my-account .btn-primary,
#sln-salon #sln-salon-my-account button[type="submit"]{
  background: var(--gold) !important; border: none !important; color: #000 !important;
  font-weight: 700 !important; text-transform: uppercase !important; border-radius: 8px !important;
  padding: 12px 22px !important;
}
#sln-salon #sln-salon-my-account .btn:hover,
#sln-salon #sln-salon-my-account .btn-primary:hover{ background: var(--black) !important; color: #fff !important; }
#sln-salon #sln-salon-my-account .card,
#sln-salon #sln-salon-my-account .list-group-item{
  background: #fff !important; border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important; box-shadow: var(--shadow) !important;
  margin-bottom: 16px !important;
}
#sln-salon #sln-salon-my-account .card-header{
  background: var(--black) !important; border: none !important; padding: 14px 18px !important;
}
#sln-salon #sln-salon-my-account .card-header,
#sln-salon #sln-salon-my-account .card-header *{ color: #fff !important; }
#sln-salon #sln-salon-my-account .card-body{ padding: 18px !important; }
#sln-salon #sln-salon-my-account .badge{
  background: var(--gold) !important; color: #000 !important; border-radius: 20px !important;
  font-weight: 700 !important; text-transform: uppercase !important; font-size: 11px !important;
}

#sln-salon.sln-loginform #loginform #wp-submit{
  background-color: var(--gold) !important; border-color: var(--gold) !important; color: #fff !important;
}
#sln-salon.sln-loginform #loginform #wp-submit:hover{
  background-color: var(--black) !important; border-color: var(--black) !important;
}

.side-breadcrumb{ display: none !important; }
#main.wrapper{ padding-top: 100px; }