/* ╔══════════════════════════════════════════════════════════════════╗
   ║                 🎨 VANRAYS | Flatpickr Calendar Styles            ║
   ║         Estilo híbrido JetBooking + Flatpickr tipo Airbnb        ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* 🌐 Fuente global y base visual */
.flatpickr-calendar,
#jet_abaf_field,
#check_in,
#check_out {
  font-family: "Gill Sans", "Gill Sans MT", sans-serif !important;
}

/* ✅ Input principal de calendario */
#jet_abaf_field,
#check_in,
#check_out {
  font-size: 1rem;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
  background-color: #fff;
}

/* ╭──────────────────────────────╮
   │  ESTRUCTURA VISUAL DEL CALENDARIO
   ╰──────────────────────────────╯ */

/* 📆 Contenedor general */
.flatpickr-calendar {
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  background: #fff !important;
  padding: 10px;
}

/* 📆 Alineación de meses visibles */
.flatpickr-innerContainer {
  display: flex !important;
  justify-content: center !important;
  gap: 2rem !important;
}

/* 📅 Cabecera con mes + año */
.flatpickr-months {
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  padding: 8px 0;
  justify-content: space-around !important;
}

.flatpickr-current-month {
  font-size: 1.1rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flatpickr-current-month span.cur-month,
.flatpickr-current-month .numInputWrapper {
  font-size: 1.1rem !important;
  text-transform: capitalize;
}

.flatpickr-current-month .numInputWrapper input {
  font-size: 1rem !important;
  font-weight: bold;
  opacity: 1 !important;
}

/* 📅 Cabecera de los días (L M X J V S D) */
.flatpickr-weekday {
  font-weight: bold;
  color: #333;
  text-transform: uppercase;
}

/* ╭──────────────────────────────╮
   │   DÍAS Y ESTADOS VISUALES
   ╰──────────────────────────────╯ */

/* Días deshabilitados */
.flatpickr-day.flatpickr-disabled {
  color: #bbb !important;
  background: #f8f8f8 !important;
  opacity: 0.7;
  cursor: not-allowed;
}

/* Días al hacer hover */
.flatpickr-day:hover {
  background: #000 !important;
  color: #fff !important;
  transition: all 0.2s ease-in-out;
}

/* 🌙 Días intermedios (entre check-in y check-out) */
.flatpickr-day.inRange {
  background: #000 !important;
  color: #fff !important;
  border-radius: 0 !important;
}

/* 🌈 Hover provisional del rango */
.flatpickr-day.hoverRange {
  background: #000 !important;
  color: #fff !important;
  border-radius: 0 !important;
}




/* ╔══════════════════════════════════════════════════════════════════╗
   ║   🔺 VANRAYS: Check-in / Check-out tipo triángulo limpio (v3.2)  ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* 🟩 CHECK-IN → triángulo negro inferior derecho */
.flatpickr-day.startRange {
  position: relative;
  z-index: 1; /* crea contexto de apilamiento */
  background: none !important;
  color: #666 !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: hidden;
  width: 38px !important;
  height: 38px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  box-sizing: border-box;
  text-align: center;

  /* ✅ contorno blanco universal */
  text-shadow:
    -1px -1px 0 #fff,
     0   -1px 0 #fff,
     1px -1px 0 #fff,
    -1px  0   0 #fff,
     1px  0   0 #fff,
    -1px  1px 0 #fff,
     0    1px 0 #fff,
     1px  1px 0 #fff;
}

.flatpickr-day.startRange::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  z-index: 0; /* detrás del número */
}

.flatpickr-day.startRange::after {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  z-index: 2; /* número encima */
}

/* 🟥 CHECK-OUT → triángulo negro superior izquierdo */
.flatpickr-day.endRange {
  position: relative;
  z-index: 1;
  background: none !important;
  color: #666 !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: hidden;
  width: 38px !important;
  height: 38px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  box-sizing: border-box;
  text-align: center;

  /* ✅ contorno blanco universal */
  text-shadow:
    -1px -1px 0 #fff,
     0   -1px 0 #fff,
     1px -1px 0 #fff,
    -1px  0   0 #fff,
     1px  0   0 #fff,
    -1px  1px 0 #fff,
     0    1px 0 #fff,
     1px  1px 0 #fff;
}

.flatpickr-day.endRange::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  z-index: 0;
}

/* 🧠 Contraste del número */
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  mix-blend-mode: normal;
}

/* 💫 Suavizamos transiciones */
.flatpickr-day.startRange::before,
.flatpickr-day.endRange::before {
  transition: all 0.3s ease-in-out;
}

/* 🌙 Rango intermedio → sin gris */
.flatpickr-day.inRange {
  background: #000 !important; /* negro sólido */
  color: #fff !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

/* 🌈 Hover provisional del rango */
.flatpickr-day.hoverRange {
  background: #000 !important;
  color: #fff !important;
  border-radius: 0 !important;
  opacity: 1 !important;
}

/* 🧩 Mejora WebKit (si soporta -webkit-text-stroke) */
@supports (-webkit-text-stroke: 1px #fff) {
  .flatpickr-day.startRange,
  .flatpickr-day.endRange {
    -webkit-text-stroke: 0.6px #fff;
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.4);
  }
}








/* ╔══════════════════════════════════════════════════════════════════╗
   ║   🌗 Estilo visual de medios días: Check-in / Check-out (Vanrays) ║
   ╚══════════════════════════════════════════════════════════════════╝ 

/* 🟩 CHECK-IN → cuadrado con diagonal ascendente (mitad inferior negra, mitad superior blanca) 
.flatpickr-day.startRange {
  background: none !important;
  color: #000 !important;
  position: relative;
  overflow: hidden;
  border-radius: 0 !important;           /← cuadrado 
  border: 1px solid #000 !important;
  width: 38px !important;
  height: 38px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  box-sizing: border-box;
}

.flatpickr-day.startRange::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #fff 50%, #000 50%);
  z-index: 0;
  transition: all 0.3s ease-in-out;
}

.flatpickr-day.startRange span,
.flatpickr-day.startRange {
  position: relative;
  z-index: 2;
}

/* 🟥 CHECK-OUT → cuadrado con diagonal descendente (mitad superior negra, mitad inferior blanca) 
.flatpickr-day.endRange {
  background: none !important;
  color: #000 !important;
  position: relative;
  overflow: hidden;
  border-radius: 0 !important;            ← cuadrado 
  border: 1px solid #000 !important;
  width: 38px !important;
  height: 38px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  box-sizing: border-box;
}

.flatpickr-day.endRange::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(315deg, #fff 50%, #000 50%);
  z-index: 0;
  transition: all 0.3s ease-in-out;
}

.flatpickr-day.endRange span,
.flatpickr-day.endRange {
  position: relative;
  z-index: 2;
}

/* 🌙 Días intermedios (entre check-in y check-out) 
.flatpickr-day.inRange {
  background: #000 !important;
  color: #fff !important;
  border-radius: 0 !important;
}

/* 🌈 Hover provisional de rango 
.flatpickr-day.hoverRange {
  background: #000 !important;
  color: #fff !important;
  border-radius: 0 !important;
}

/* ✨ Suavizamos texto y contraste 
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.9);
}

/* 💫 Transición suave entre estados 
.flatpickr-day.startRange::before,
.flatpickr-day.endRange::before {
  transition: all 0.3s ease-in-out;
}





















/* ╔══════════════════════════════════════════════════════════════════╗
   ║   🌗 Estilo visual de medios días: Check-in / Check-out (Vanrays) ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* 🌓 CHECK-IN → mitad inferior negra, mitad superior blanca 
.flatpickr-day.startRange {
  position: relative;
  background: #fff !important;
  color: #000 !important;
  border-radius: 50% !important;
  overflow: hidden;
  border: 1px solid #ccc !important;
}

.flatpickr-day.startRange::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  z-index: 2;
  pointer-events: none;
  border-radius: 50%;
  transition: all 0.3s ease-in-out;
}

/* 🌗 CHECK-OUT → mitad superior negra, mitad inferior blanca 
.flatpickr-day.endRange {
  position: relative;
  background: #fff !important;
  color: #000 !important;
  border-radius: 50% !important;
  overflow: hidden;
  border: 1px solid #ccc !important;
}

.flatpickr-day.endRange::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  z-index: 2;
  pointer-events: none;
  border-radius: 50%;
  transition: all 0.3s ease-in-out;
}

/* 🧠 Texto siempre visible sobre el corte diagonal 
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  font-weight: bold;
  text-shadow: 0 0 2px rgba(255,255,255,0.9);
}

.flatpickr-day.startRange span,
.flatpickr-day.endRange span {
  position: relative;
  z-index: 3;
}
 */