/* =========================================================
   WINGFOIL CÁDIZ - CSS COMPLETO SIMPLYBOOK
   Color principal: #FF9500
   ========================================================= */

:root {
  --wfc-orange: #FF9500;
  --wfc-orange-hover: #e68400;
  --wfc-black: #111111;
  --wfc-text: #222222;
  --wfc-white: #ffffff;
  --wfc-light: #f7f7f7;
  --wfc-border: rgba(0, 0, 0, 0.16);
  --wfc-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
}

/* =========================================================
   BASE GENERAL
   ========================================================= */

body {
  color: var(--wfc-text) !important;
  background-color: #ffffff !important;
  font-family: Arial, Helvetica, sans-serif !important;
}

#sb_content {
  background-color: #ffffff !important;
}

/* No tocar imagen de cabecera */
#sb_header,
.header,
#header {
  background-color: transparent !important;
}

/* =========================================================
   QUITAR AZUL FEO #0C1CCC
   ========================================================= */

.btn-primary,
.btn-success,
.bg-primary,
.label-primary,
.badge-primary,
.active,
.selected,
.current,
.is-active,
.step.active,
.booking-step.active,
#steps .active,
#steps-nav li.active,
#steps-nav li.active a,
#sb_booking_steps .active,
#sb_time_slots_container .active,
#sb_time_slots_container .selected,
.slot.active,
.time-slot.active,
.service-item.active,
.provider-item.active,
.tab.active {
  background-color: var(--wfc-orange) !important;
  background-image: none !important;
  border-color: var(--wfc-black) !important;
  color: var(--wfc-black) !important;
}

/* Texto dentro de elementos activos */
.btn-primary *,
.btn-success *,
.active *,
.selected *,
.current *,
.is-active *,
.step.active *,
.booking-step.active *,
#steps .active *,
#steps-nav li.active *,
#sb_booking_steps .active *,
#sb_time_slots_container .active *,
#sb_time_slots_container .selected *,
.slot.active *,
.time-slot.active *,
.service-item.active *,
.provider-item.active *,
.tab.active * {
  color: var(--wfc-black) !important;
}

/* Por si SimplyBook mete el azul como estilo inline */
[style*="#0C1CCC"],
[style*="#0c1ccc"],
[style*="rgb(12, 28, 204)"] {
  background-color: var(--wfc-orange) !important;
  border-color: var(--wfc-black) !important;
  color: var(--wfc-black) !important;
}

/* =========================================================
   BOTONES NARANJAS - ESTILO PROFESIONAL
   ========================================================= */

.btn,
.button,
button,
input[type="submit"],
#sb_booking_btn,
.sb-book,
.btn-primary,
.btn-success,
a.btn,
a.button {
  background-color: var(--wfc-orange) !important;
  background-image: none !important;
  color: var(--wfc-black) !important;
  border: 1px solid var(--wfc-black) !important;
  border-radius: 4px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.18) !important;
  text-transform: none !important;
  transition: all 0.18s ease !important;
}

/* Hover botones */
.btn:hover,
.button:hover,
button:hover,
input[type="submit"]:hover,
#sb_booking_btn:hover,
.sb-book:hover,
.btn-primary:hover,
.btn-success:hover,
a.btn:hover,
a.button:hover {
  background-color: var(--wfc-orange-hover) !important;
  color: var(--wfc-black) !important;
  border-color: var(--wfc-black) !important;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.22) !important;
  transform: translateY(1px) !important;
}

/* =========================================================
   TAMAÑO CORRECTO BOTONES RESERVAR / SELECCIONAR
   ========================================================= */

#sb_content .btn,
#sb_content button,
#sb_content input[type="submit"],
#sb_booking_btn,
.sb-book,
.service-item .btn,
.service-item button,
#steps-content .btn,
#sb_booking_content .btn {
  width: auto !important;
  min-width: 118px !important;
  max-width: 180px !important;
  min-height: 38px !important;
  height: auto !important;
  padding: 8px 16px !important;
  font-size: 14.5px !important;
  line-height: 1.2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* Botón Seleccionar dentro de servicios */
#sb_content .service-item .btn,
#sb_content .service-item button,
#sb_content .item .btn,
#sb_content .item button,
#steps-content .item .btn,
#steps-content .item button,
#sb_booking_content .item .btn,
#sb_booking_content .item button {
  width: auto !important;
  min-width: 118px !important;
  max-width: 165px !important;
  min-height: 38px !important;
  padding: 8px 16px !important;
  font-size: 14.5px !important;
}

/* Hover del botón Seleccionar: texto blanco */
#sb_content .service-item .btn:hover,
#sb_content .service-item button:hover,
#sb_content .item .btn:hover,
#sb_content .item button:hover,
#steps-content .item .btn:hover,
#steps-content .item button:hover,
#sb_booking_content .item .btn:hover,
#sb_booking_content .item button:hover {
  color: #ffffff !important;
}

/* También fuerza blanco si el texto va dentro de un span */
#sb_content .service-item .btn:hover *,
#sb_content .service-item button:hover *,
#sb_content .item .btn:hover *,
#sb_content .item button:hover *,
#steps-content .item .btn:hover *,
#steps-content .item button:hover *,
#sb_booking_content .item .btn:hover *,
#sb_booking_content .item button:hover * {
  color: #ffffff !important;
}

/* En móvil, botón cómodo pero no gigante */
@media (max-width: 767px) {
  #sb_content .btn,
  #sb_content button,
  #sb_content input[type="submit"],
  #sb_booking_btn,
  .sb-book,
  .service-item .btn,
  .service-item button,
  #steps-content .btn,
  #sb_booking_content .btn,
  #sb_content .item .btn,
  #sb_content .item button,
  #steps-content .item .btn,
  #steps-content .item button,
  #sb_booking_content .item .btn,
  #sb_booking_content .item button {
    width: auto !important;
    min-width: 118px !important;
    max-width: 180px !important;
    min-height: 40px !important;
    padding: 9px 16px !important;
    font-size: 15px !important;
  }
}

/* =========================================================
   BOTONES RESERVAR Y OBTENER MAPA - ESTILO ESPECIAL
   Mayúsculas, más grande, más negrita y borde blanco
   ========================================================= */

/* Botón Reservar */
#sb_booking_btn,
.sb-book,
#sb_book_btn,
a.sb-book,
button.sb-book {
  text-transform: uppercase !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px !important;
  border-color: #ffffff !important;
  color: var(--wfc-black) !important;
}

/* Botón / enlace Obtener mapa */
a[href*="maps"],
a[href*="google.com/maps"],
a[href*="goo.gl/maps"],
.get-map,
.get-directions,
.map-link,
.location a,
.address a {
  color: var(--wfc-orange) !important;
  font-weight: 800 !important;
  font-size: 17px !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}

/* Si Obtener mapa aparece como botón */
a[href*="maps"].btn,
.get-map.btn,
.get-directions.btn,
.map-link.btn {
  background-color: var(--wfc-orange) !important;
  color: var(--wfc-black) !important;
  border: 1px solid #ffffff !important;
  text-transform: uppercase !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px !important;
}

/* Hover Obtener mapa */
a[href*="maps"]:hover,
.get-map:hover,
.get-directions:hover,
.map-link:hover,
.location a:hover,
.address a:hover {
  color: var(--wfc-orange-hover) !important;
}

/* =========================================================
   MENÚ ACTIVO INICIO EN NARANJA
   ========================================================= */

#sb_menu .active,
#sb_menu li.active,
#sb_menu .active a,
#sb_menu li.active a,
#sb_menu a.active,
.menu .active,
.menu li.active,
.menu .active a,
.menu li.active a,
.nav .active,
.nav li.active,
.nav .active a,
.nav li.active a,
.navbar .active,
.navbar li.active,
.navbar .active a,
.navbar li.active a {
  background-color: var(--wfc-orange) !important;
  background-image: none !important;
  color: var(--wfc-black) !important;
  border: 1px solid var(--wfc-black) !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
}

#sb_menu .active *,
.menu .active *,
.nav .active *,
.navbar .active * {
  color: var(--wfc-black) !important;
}

/* Enlaces normales del menú */
#sb_menu a,
.menu a,
.nav a,
.navbar a {
  font-weight: 600 !important;
  text-decoration: none !important;
}

/* =========================================================
   TARJETAS / SERVICIOS - MEJORA VISUAL SUAVE
   ========================================================= */

.service-item,
.provider-item,
.booking-item,
.current-booking-info,
#steps-content .item,
#sb_booking_content .item {
  background-color: var(--wfc-white) !important;
  border: 1px solid var(--wfc-border) !important;
  box-shadow: var(--wfc-shadow) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
}

/* Hover suave */
.service-item:hover,
.provider-item:hover,
.booking-item:hover,
#steps-content .item:hover,
#sb_booking_content .item:hover {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14) !important;
  transform: none !important;
}

/* =========================================================
   CALENDARIO / HORARIOS
   ========================================================= */

.calendar,
#sb_calendar,
.calendar-table,
#sb-timeline,
.timeline-wrapper {
  background-color: var(--wfc-white) !important;
  border: 1px solid var(--wfc-border) !important;
  box-shadow: var(--wfc-shadow) !important;
  border-radius: 4px !important;
}

/* Slots de horario */
.day,
.date,
.time,
.slot,
.time-slot,
#sb_time_slots_container .slot,
#sb_time_slots_container a {
  border-radius: 4px !important;
  font-weight: 600 !important;
  color: var(--wfc-black) !important;
}

/* Hover horarios */
.time-slot:hover,
.slot:hover,
#sb_time_slots_container a:hover {
  background-color: rgba(255, 149, 0, 0.16) !important;
  border-color: var(--wfc-orange) !important;
  color: var(--wfc-black) !important;
}

/* =========================================================
   FORMULARIOS
   ========================================================= */

input,
textarea,
select,
.form-control {
  border-radius: 4px !important;
  border: 1px solid var(--wfc-border) !important;
  background-color: #ffffff !important;
  color: var(--wfc-black) !important;
  box-shadow: none !important;
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus {
  border-color: var(--wfc-orange) !important;
  box-shadow: 0 0 0 3px rgba(255, 149, 0, 0.22) !important;
  outline: none !important;
}

/* =========================================================
   TEXTOS DESTACADOS
   ========================================================= */

.price,
.duration,
.service-price,
.service-duration,
.provider-name {
  color: var(--wfc-black) !important;
  font-weight: 800 !important;
}

/* Enlaces generales */
a {
  color: var(--wfc-orange) !important;
}

a:hover {
  color: var(--wfc-orange-hover) !important;
}

/* Evita que enlaces dentro de botones cambien de color */
.btn a,
.button a,
button a,
#sb_booking_btn a,
.sb-book a,
.btn-primary a,
.btn-success a {
  color: var(--wfc-black) !important;
}