/* ==========================================================================
   Bookipro Search Widget — Stylesheet v6
   ========================================================================== */

/* --------------------------------------------------------------------------
   Custom properties (sobrescritas por el shortcode vía style attr)
   -------------------------------------------------------------------------- */
.bookipro-search-form {
  --bookipro-primary:    #b49401;
  --bookipro-button:     #000000;
  --bookipro-text:       #111111;
  --bookipro-radius:     44px;
  --bookipro-field-h:    66px;
  --bookipro-gap:        12px;
  --bookipro-transition: 0.25s ease;
}

/* --------------------------------------------------------------------------
   Wrapper
   -------------------------------------------------------------------------- */
.bookipro-search-bar {
  width:       100%;
  background:  transparent;
  padding:     10px 0;
}

/* --------------------------------------------------------------------------
   Formulario
   -------------------------------------------------------------------------- */
.bookipro-search-form {
  font-family: 'Montserrat', system-ui, sans-serif;
  max-width:   1200px;
  margin:      0 auto;
  display:     flex;
  align-items: center;
  gap:         var(--bookipro-gap);
}

/* --------------------------------------------------------------------------
   Campo genérico (pill)
   -------------------------------------------------------------------------- */
.bookipro-field {
  height:          var(--bookipro-field-h);
  background:      #fff;
  border:          1px solid #e8e8e8;
  border-radius:   var(--bookipro-radius);
  display:         flex;
  align-items:     center;
  gap:             12px;
  padding:         0 24px;
  flex:            1;
  min-width:       0;       /* evita overflow en flex */
  transition:
    border-color   var(--bookipro-transition),
    box-shadow     var(--bookipro-transition),
    transform      var(--bookipro-transition);
}

.bookipro-field:hover,
.bookipro-field:focus-within {
  border-color: var(--bookipro-primary);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.06),
    0 0 0 1px color-mix(in srgb, var(--bookipro-primary) 18%, transparent);
  transform: translateY(-1px);
}

.bookipro-field:hover .bookipro-icon,
.bookipro-field:focus-within .bookipro-icon {
  transform: scale(1.08);
}

/* --------------------------------------------------------------------------
   Inputs y selects dentro de los campos
   -------------------------------------------------------------------------- */
.bookipro-field input,
.bookipro-field select {
  border:      none !important;
  outline:     none !important;
  background:  transparent !important;
  box-shadow:  none !important;
  font-size:   15px;
  font-weight: 600;
  color:       var(--bookipro-text);
  width:       100%;
  font-family: inherit;
  min-width:   0;
}

.bookipro-field input::placeholder {
  color:       #8c8c8c;
  font-weight: 500;
}

/* Flatpickr altInput */
.bookipro-field input[readonly],
.bookipro-field .flatpickr-input,
.flatpickr-input[readonly] {
  background: transparent !important;
  border:     none !important;
  box-shadow: none !important;
  cursor:     pointer;
}

/* aria-invalid: borde de error */
.bookipro-field:has(input[aria-invalid="true"]) {
  border-color: #d9534f;
  box-shadow:   0 0 0 1px rgba(217, 83, 79, 0.35);
}

/* --------------------------------------------------------------------------
   Selects personalizados (zona, personas)
   -------------------------------------------------------------------------- */
.bookipro-zone-select,
.bookipro-adults-select,
.bookipro-children-select {
  cursor:            pointer;
  appearance:        none;
  -webkit-appearance:none;
  background-image:
    linear-gradient(45deg,  transparent                       50%, var(--bookipro-text) 50%),
    linear-gradient(135deg, var(--bookipro-text)              50%, transparent          50%) !important;
  background-position:
    calc(100% - 10px) 50%,
    calc(100% - 5px)  50% !important;
  background-size:   5px 5px, 5px 5px !important;
  background-repeat: no-repeat !important;
  padding-right:     22px;
}

/* --------------------------------------------------------------------------
   Zona (texto estático cuando hay 1 zona o ninguna)
   -------------------------------------------------------------------------- */
.bookipro-zone-single-label {
  font-size:   15px;
  font-weight: 600;
  color:       var(--bookipro-text);
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
}

/* --------------------------------------------------------------------------
   Campo de personas
   -------------------------------------------------------------------------- */
.bookipro-people-field {
  max-width: 260px;
}

.bookipro-people-inline {
  display:     flex;
  align-items: center;
  gap:         10px;
  width:       100%;
}

.bookipro-people-label {
  display:   flex;
  flex-direction: column;
  gap:       2px;
  min-width: 0;
  flex:      1;
}

.bookipro-people-label-text {
  font-size:       10px;
  line-height:     1;
  text-transform:  uppercase;
  letter-spacing:  0.04em;
  color:           #777;
  font-weight:     600;
}

.bookipro-people-inline select {
  font-size:    14px;
  padding-right:18px;
}

/* --------------------------------------------------------------------------
   Icono
   -------------------------------------------------------------------------- */
.bookipro-icon {
  width:      19px;
  height:     19px;
  display:    flex;
  flex-shrink:0;
  transition: transform var(--bookipro-transition);
}

.bookipro-icon svg {
  width:  19px;
  height: 19px;
  fill:   var(--bookipro-primary);
}

/* --------------------------------------------------------------------------
   Botón de búsqueda
   -------------------------------------------------------------------------- */
.bookipro-submit {
  height:          var(--bookipro-field-h);
  min-width:       195px;
  border-radius:   var(--bookipro-radius);
  background:      var(--bookipro-button);
  color:           #fff;
  border:          1px solid var(--bookipro-button);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         0 10px 0 32px;
  cursor:          pointer;
  font-weight:     700;
  font-size:       15px;
  letter-spacing:  0.3px;
  font-family:     inherit;
  transition:
    background   var(--bookipro-transition),
    color        var(--bookipro-transition),
    border-color var(--bookipro-transition),
    transform    var(--bookipro-transition),
    box-shadow   var(--bookipro-transition),
    opacity      var(--bookipro-transition);
}

.bookipro-submit:hover {
  background:   var(--bookipro-primary);
  border-color: var(--bookipro-primary);
  color:        #000;
  transform:    translateY(-1px);
  box-shadow:   0 12px 28px color-mix(in srgb, var(--bookipro-primary) 40%, transparent);
}

/* Estado cargando */
.bookipro-submit--loading,
.bookipro-submit:disabled {
  opacity: 0.72;
  cursor:  not-allowed;
  transform: none;
}

/* Icono circular del botón */
.bookipro-submit-icon {
  width:           44px;
  height:          44px;
  background:      #fff;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:
    background  var(--bookipro-transition),
    transform   var(--bookipro-transition);
}

.bookipro-submit:hover .bookipro-submit-icon {
  background: #000;
  transform:  scale(1.04);
}

.bookipro-submit-icon svg {
  width:      18px;
  height:     18px;
  fill:       #000;
  transition: fill var(--bookipro-transition);
}

.bookipro-submit:hover .bookipro-submit-icon svg {
  fill: #fff;
}

/* --------------------------------------------------------------------------
   Mensaje de error (admin only)
   -------------------------------------------------------------------------- */
.bookipro-error {
  color:  #d9534f;
  border: 1px solid #d9534f;
  padding:6px 12px;
  border-radius: 4px;
  font-size: 13px;
}

/* --------------------------------------------------------------------------
   Flatpickr — personalización del calendario
   -------------------------------------------------------------------------- */
.flatpickr-calendar {
  border-radius: 18px;
  box-shadow:    0 16px 40px rgba(0, 0, 0, 0.18);
  border:        1px solid color-mix(in srgb, var(--bookipro-primary, #b49401) 30%, transparent);
  font-family:   'Montserrat', system-ui, sans-serif;
}

.flatpickr-day {
  border-radius: 10px;
}

.flatpickr-day.today {
  border-color: var(--bookipro-primary, #b49401);
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background:   var(--bookipro-primary, #b49401) !important;
  border-color: var(--bookipro-primary, #b49401) !important;
  color:        #fff !important;
}

.flatpickr-day.inRange {
  background: color-mix(in srgb, var(--bookipro-primary, #b49401) 18%, transparent) !important;
  box-shadow:
    -5px 0 0 color-mix(in srgb, var(--bookipro-primary, #b49401) 18%, transparent),
     5px 0 0 color-mix(in srgb, var(--bookipro-primary, #b49401) 18%, transparent) !important;
}

.flatpickr-day:hover:not(.selected):not(.startRange):not(.endRange) {
  background:   color-mix(in srgb, var(--bookipro-primary, #b49401) 12%, transparent);
  border-color: color-mix(in srgb, var(--bookipro-primary, #b49401) 40%, transparent);
}

/* --------------------------------------------------------------------------
   Responsive — tablet (≤1020px)
   -------------------------------------------------------------------------- */
@media (max-width: 1020px) {
  .bookipro-search-form {
    flex-wrap: wrap;
  }

  .bookipro-field {
    flex: 1 1 calc(50% - var(--bookipro-gap));
  }

  .bookipro-people-field {
    max-width: none;
  }

  .bookipro-submit {
    flex: 1 1 100%;
  }
}

/* --------------------------------------------------------------------------
   Responsive — móvil (≤700px)
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .bookipro-search-form {
    flex-direction: column;
    gap:            10px;
  }

  .bookipro-field,
  .bookipro-submit {
    width:      100%;
    max-width:  none;
    flex:       none;
  }

  .bookipro-submit {
    justify-content: space-between;
  }
}

/* --------------------------------------------------------------------------
   Accesibilidad: reducir movimiento
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .bookipro-field,
  .bookipro-icon,
  .bookipro-submit,
  .bookipro-submit-icon,
  .bookipro-submit-icon svg {
    transition: none;
  }
}