/* Custom Datepicker Styles - Style pilule violette */

/* Conteneur du champ de date */
.field_datepicker {
  position: relative;
  display: block;
}

/* Style de l'input datepicker */
input.datepicker:not(#formulaire_mon_compte #dDateNaissance) {
  background: #ffffff !important;
  border: 1.5px solid #592494 !important;
  border-radius: 50px !important;
  min-height: 60px !important;
  height: 60px !important;
  width: 100% !important;
  padding: 0 16px !important;
  padding-left: 52px !important;
  color: #592494 !important;
  font-weight: 500 !important;
  font-size: 1.15rem !important;
  box-sizing: border-box !important;
}

/* Placeholder */
input.datepicker::placeholder:not(#formulaire_mon_compte #dDateNaissance) {
  color: #592494 !important;
  opacity: 0.6;
  font-size: 1.4rem !important;
  text-transform: none !important;
}

/* Icône calendrier à gauche */
.field_datepicker>i.material-icons {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: #592494;
  font-size: 22px;
  pointer-events: none;
}

/* Focus */
input.datepicker:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(89, 36, 148, 0.15) !important;
  border-color: #592494 !important;
}

/* ============================================================
   DATEPICKER (jQuery UI) — refonte complète du skin pour
   correspondre à la maquette : carte arrondie à bordure fine
   dégradée, titre "Mois Année" centré avec flèches, jours
   abrégés en majuscules, jour sélectionné en pastille pleine.
   S'applique à tous les gabarits (pas seulement mobile), le
   datepicker s'ouvrant en popup partout.
   ============================================================ */

.ui-datepicker {
  border: 2px solid transparent !important;
  border-radius: 20px !important;
  background-image: linear-gradient(#FAF7FF, #FAF7FF),
    linear-gradient(126.88deg, #2821A9 0%, #B34474 50%, #AE90DC 98.96%) !important;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
  padding: 1rem 1.1rem 1.2rem !important;
  font-family: "Montserrat", Arial !important;
  width: 320px !important;
}

/* ----- En-tête : flèche gauche / "Mois Année" / flèche droite ----- */
.ui-datepicker-header {
  background: transparent !important;
  border: none !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 0.3rem 0 1rem !important;
}

/* Votre CSS masque actuellement .ui-datepicker-prev/next pour afficher
   des <select> mois/année à la place : on réaffiche les flèches et on
   neutralise l'ancienne règle "display:none".
   IMPORTANT : dans le DOM jQuery UI, l'ordre réel est
   prev -> next -> title (pas prev -> title -> next). En display:flex,
   l'ordre visuel suivait donc ce DOM et "next" atterrissait collé au
   titre. On force l'ordre visuel voulu avec la propriété "order". */
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  display: flex !important;
  position: static !important;
  width: 28px !important;
  height: 28px !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none !important;
  background: transparent !important;
}

.ui-datepicker-prev {
  order: 1;
}

.ui-datepicker-next {
  order: 3;
}

.ui-datepicker-prev .ui-icon,
.ui-datepicker-next .ui-icon {
  display: none !important;
  /* on cache le sprite d'origine */
}

.ui-datepicker-prev::before,
.ui-datepicker-next::before {
  font-family: Arial, sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--c-secondaire, #592494);
  line-height: 1;
}

.ui-datepicker-prev::before {
  content: "\2039";
  /* ‹ */
}

.ui-datepicker-next::before {
  content: "\203A";
  /* › */
}

.ui-datepicker-prev.ui-state-disabled,
.ui-datepicker-next.ui-state-disabled {
  visibility: hidden;
}

/* Titre "Octobre 2026" : jQuery UI enveloppe TOUJOURS le mois et
   l'année dans deux spans séparés (.ui-datepicker-month et
   .ui-datepicker-year), même sans changeMonth/changeYear. Votre CSS
   de base leur applique flex:1 !important + width:50% !important
   (pensé pour un mode avec <select>), ce qui les écarte chacun sur
   la moitié du titre. On neutralise ça pour qu'ils restent collés
   l'un à l'autre, centrés en tant que groupe. */
.ui-datepicker-title {
  order: 2;
  display: flex !important;
  flex: 1;
  align-items: center;
  justify-content: center !important;
  gap: 0.4rem;
  font-weight: 700;
  font-size: 1.15rem;
  color: #161616;
  text-transform: capitalize;
}

.ui-datepicker .ui-datepicker-month,
.ui-datepicker .ui-datepicker-year {
  flex: none !important;
  width: auto !important;
  margin: 0 !important;
  text-align: center;
}

.ui-datepicker-title select {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #161616 !important;
  font-weight: 700 !important;
  font-size: 1.15rem !important;
  text-align: center;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  width: auto !important;
}

/* ----- Grille des jours ----- */
.ui-datepicker-calendar {
  width: 100%;
  border-collapse: collapse;
}

.ui-datepicker-calendar thead th {
  color: #9a9a9a;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  padding: 0.4rem 0;
  border: none;
}

.ui-datepicker-calendar tbody td {
  text-align: center;
  padding: 3px 0;
  border: none;
}

.ui-datepicker-calendar tbody td a,
.ui-datepicker-calendar tbody td span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0 auto;
  border-radius: 50%;
  color: #272727;
  font-size: 0.9rem;
  font-weight: 400;
  text-decoration: none;
  background: transparent;
  border: none;
}

/* Le thème jQuery UI par défaut ajoute les classes .ui-state-default
   et .ui-corner-all sur chaque jour, avec un fond gris + bordure et
   un border-radius propres (ex: background:#f6f6f6; border:1px solid
   #c5c5c5; border-radius:3px). Comme ce sont 2 classes combinées,
   leur spécificité bat notre règle ci-dessus (1 seule classe) : on
   cible ces classes précisément avec !important pour reprendre la
   main partout (fond plat, pas de bordure, cercle). */
.ui-datepicker-calendar tbody td a.ui-state-default,
.ui-datepicker-calendar tbody td span.ui-state-default,
.ui-datepicker-calendar tbody td a.ui-corner-all,
.ui-datepicker-calendar tbody td span.ui-corner-all {
  background: transparent;
  border: none ;
  border-radius: 50%;
  box-shadow: none;
  color: #272727;
  font-weight: 400;
}

/* Jour sélectionné : pastille pleine violette, texte blanc (comme le
   "4" en surbrillance sur votre calendrier) */
.ui-datepicker-calendar td a.ui-state-active,
.ui-datepicker-calendar td span.ui-state-active,
.ui-datepicker-calendar td a.ui-state-hover,
.ui-datepicker-calendar td span.ui-state-hover {
  background: var(--c-secondaire, #592494) !important;
  border: none !important;
  border-radius: 50% !important;
  color: #fff !important;
  font-weight: 700 !important;
}

/* Aujourd'hui (si différent du jour sélectionné) : juste un contour,
   fond transparent (pas de carré gris derrière) */
.ui-datepicker-calendar td.ui-datepicker-today a,
.ui-datepicker-calendar td.ui-datepicker-today span {
  background: transparent !important;
  border: 2px solid var(--c-secondaire, #592494) !important;
  border-radius: 50% !important;
  color: var(--c-secondaire, #592494) !important;
  font-weight: 700 !important;
}

.ui-datepicker-calendar td.ui-datepicker-today a.ui-state-active,
.ui-datepicker-calendar td.ui-datepicker-today span.ui-state-active {
  background: var(--c-secondaire, #592494) !important;
  border: none !important;
  color: #fff !important;
}

/* Jours désactivés / hors mois : chiffre gris clair, pas de fond ni
   de bordure */
.ui-datepicker-calendar td.ui-datepicker-unselectable span,
.ui-datepicker-calendar td span.ui-state-disabled {
  background: transparent !important;
  border: none !important;
  color: #d4d4d4 !important;
}

/* Sur mobile, la popup ne doit jamais dépasser la largeur de l'écran */
@media (max-width: 480px) {
  .ui-datepicker {
    width: calc(100vw - 2.5rem) !important;
    max-width: 320px;
  }

  .ui-datepicker-calendar tbody td a,
  .ui-datepicker-calendar tbody td span {
    width: 30px;
    height: 30px;
    font-size: 0.85rem;
  }
}