/* =========================================================
   EL ENCANTO COUNTRY CLUB | TENIS & WELLNESS
   CSS COMPLETO PARA LA PÁGINA DE RESERVAS
   ========================================================= */

/* ---------- COLORES DEL CLUB ---------- */

:root {
  --club-green: #123f49;
  --club-green-dark: #0b3038;
  --club-gold: #cf9558;
  --club-gold-dark: #b77b40;
  --club-cream: #f8f6f1;
  --club-white: #ffffff;
  --club-border: #e5e1d9;
  --club-muted: #687b80;
  --club-shadow: 0 10px 30px rgba(18, 63, 73, 0.10);
}


/* ---------- CONFIGURACIÓN GENERAL ---------- */

html,
body {
  background: var(--club-cream) !important;
}

body.--theme-bookingtroll {
  color: var(--club-green-dark) !important;
  font-family: "Open Sans", Arial, sans-serif !important;
}

.sb-layout {
  background: var(--club-cream) !important;
  color: var(--club-green-dark) !important;
}


/* ---------- PORTADA PRINCIPAL ---------- */

#main-buttons {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

/* Evita cualquier línea generada alrededor de la portada */

#main-buttons::before,
#main-buttons::after {
  display: none !important;
  content: none !important;
}

#main-buttons .wrapper,
#main-buttons .column-wrapper,
#main-buttons .container-fluid {
  border: 0 !important;
  box-shadow: none !important;
}

#main-buttons .company-name,
#main-buttons .company-logo-and-name,
#main-buttons .company-name a {
  color: var(--club-green) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  text-shadow: 0 2px 5px rgba(255, 255, 255, 0.35) !important;
}


/* ---------- BOTONES DE LA PORTADA ---------- */

#main-buttons .btn,
#main-buttons a.btn {
  background: var(--club-gold) !important;
  border: 1px solid var(--club-gold) !important;
  border-radius: 10px !important;
  color: var(--club-white) !important;
  font-weight: 700 !important;
  box-shadow: 0 7px 20px rgba(117, 76, 35, 0.20) !important;
}

#main-buttons .btn:hover,
#main-buttons a.btn:hover {
  background: var(--club-gold-dark) !important;
  border-color: var(--club-gold-dark) !important;
  color: var(--club-white) !important;
  transform: translateY(-1px) !important;
}


/* ---------- UNIÓN ENTRE PORTADA Y PASOS ---------- */

/*
   El margen negativo de un píxel cubre cualquier unión blanca
   causada por el redondeo del navegador.
*/

#main-content {
  position: relative !important;
  margin-top: -1px !important;
  padding-top: 0 !important;
  background: var(--club-cream) !important;
  border-top: 0 !important;
}

#main-content::before,
#main-content::after {
  border-top: 0 !important;
}


/* ---------- BARRA DE PASOS DE LA RESERVA ---------- */

#steps-nav {
  margin: 0 0 24px !important;
  padding: 0 !important;
  background: var(--club-white) !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--club-border) !important;
  box-shadow: 0 5px 18px rgba(18, 63, 73, 0.06) !important;
}

#steps-nav a {
  color: var(--club-green) !important;
}

#steps-nav a:hover {
  color: var(--club-gold-dark) !important;
}

#steps-nav .active,
#steps-nav [aria-current="step"] {
  color: var(--club-green-dark) !important;
  border-color: var(--club-gold) !important;
}


/* ---------- ÁREA DE CONTENIDO ---------- */

#sb_content {
  background: var(--club-cream) !important;
  padding-bottom: 40px !important;
}

#sb_content .page-pd {
  padding-top: 28px !important;
  padding-bottom: 36px !important;
}

/*
   Tarjetas blancas de selección, formularios e inicio de sesión.
   Esta regla está limitada al contenido para no alterar elementos
   internos de SimplyBook.
*/

#sb_content .section {
  background: var(--club-white) !important;
  border: 1px solid rgba(18, 63, 73, 0.06) !important;
  border-radius: 16px !important;
  box-shadow: var(--club-shadow) !important;
  margin-top: 0 !important;
  margin-bottom: 28px !important;
  padding: 30px 34px !important;
}


/* ---------- ESPACIO PARA COMPLEMENTOS ---------- */

#sb_content .paid-attribute-step,
#sb_content .paid-attributes-container,
#sb_content .addons-step,
#sb_content .addons-container {
  margin-top: 24px !important;
  margin-bottom: 30px !important;
}

#sb_content .item-container {
  margin-bottom: 20px !important;
}


/* ---------- TÍTULOS ---------- */

#sb_content h1,
#sb_content h2,
#sb_content h3,
#sb_content h4,
#sb_content .title-main {
  color: var(--club-green) !important;
  letter-spacing: -0.02em !important;
}

#sb_content .title-main {
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin-bottom: 24px !important;
  padding-bottom: 0 !important;
}

#sb_content .section > h1:first-child,
#sb_content .section > h2:first-child,
#sb_content .section > h3:first-child {
  margin-top: 0 !important;
  margin-bottom: 24px !important;
}


/* ---------- TEXTO ---------- */

#sb_content p,
#sb_content label,
#sb_content .form-group {
  color: var(--club-green-dark) !important;
}

#sb_content .text-muted,
#sb_content .help-block {
  color: var(--club-muted) !important;
}


/* ---------- CAMPOS DEL FORMULARIO ---------- */

/*
   Solo se modifica la clase form-control.
   No se alteran todos los inputs para evitar afectar controles
   ocultos o elementos internos de carga.
*/

#sb_content .form-control {
  min-height: 46px !important;
  background: var(--club-white) !important;
  border: 1px solid #d6dedc !important;
  border-radius: 9px !important;
  color: var(--club-green-dark) !important;
  box-shadow: none !important;
}

#sb_content .form-control:focus {
  border-color: var(--club-gold) !important;
  box-shadow: 0 0 0 3px rgba(207, 149, 88, 0.16) !important;
  outline: none !important;
}

#sb_content textarea.form-control {
  min-height: 110px !important;
}


/* ---------- BOTONES PRINCIPALES ---------- */

#main-content .btn,
#main-content button.btn,
#main-content .book-btn-container a,
#main-content input.btn[type="submit"] {
  background: var(--club-gold) !important;
  border: 1px solid var(--club-gold) !important;
  border-radius: 10px !important;
  color: var(--club-white) !important;
  font-weight: 700 !important;
  box-shadow: 0 5px 15px rgba(185, 125, 67, 0.20) !important;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease !important;
}

#main-content .btn:hover,
#main-content button.btn:hover,
#main-content .book-btn-container a:hover,
#main-content input.btn[type="submit"]:hover {
  background: var(--club-gold-dark) !important;
  border-color: var(--club-gold-dark) !important;
  color: var(--club-white) !important;
  transform: translateY(-1px) !important;
}

#main-content .btn:disabled,
#main-content button.btn:disabled {
  opacity: 0.55 !important;
  transform: none !important;
}


/* ---------- ENLACES ---------- */

#main-content a {
  color: var(--club-green) !important;
}

#main-content a:hover {
  color: var(--club-gold-dark) !important;
}


/* ---------- CASILLAS DE ACEPTACIÓN ---------- */

#main-content input[type="checkbox"],
#main-content input[type="radio"] {
  accent-color: var(--club-gold) !important;
}


/* ---------- AVISOS Y MENSAJES ---------- */

#main-content .alert {
  border-radius: 12px !important;
}

#main-content .alert-info {
  background: #edf6f4 !important;
  border-color: #d3e7e2 !important;
  color: var(--club-green) !important;
}

#main-content .alert-danger {
  background: #fff1f0 !important;
  border-color: #f0ceca !important;
  color: #8b3d36 !important;
}


/* ---------- PIE DE PÁGINA ---------- */

.sb-layout footer,
.sb-layout .footer-menu {
  background: var(--club-cream) !important;
  border-top: 1px solid var(--club-border) !important;
}

.sb-layout .footer-menu {
  padding-top: 22px !important;
  padding-bottom: 22px !important;
}

.sb-layout .footer-menu a {
  color: var(--club-green) !important;
  font-weight: 600 !important;
}

.sb-layout .footer-menu a:hover {
  color: var(--club-gold-dark) !important;
}


/* ---------- TELÉFONOS Y TABLETAS ---------- */

@media (max-width: 767px) {
  #main-buttons {
    min-height: 440px !important;
    background-position: 35% center !important;
  }

  #main-buttons .company-name,
  #main-buttons .company-logo-and-name {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  #steps-nav {
    margin-bottom: 18px !important;
  }

  #sb_content .page-pd {
    padding-top: 20px !important;
    padding-bottom: 28px !important;
  }

  #sb_content .section {
    margin-left: 2px !important;
    margin-right: 2px !important;
    margin-bottom: 22px !important;
    padding: 22px 18px !important;
    border-radius: 13px !important;
  }

  #sb_content h1 {
    font-size: 28px !important;
  }

  #sb_content h2 {
    font-size: 24px !important;
  }

  #main-content .btn,
  #main-content button.btn,
  #main-content input.btn[type="submit"] {
    min-height: 48px !important;
  }
}