/**
 * booking.css — Estilos para la integración de Booknetic
 * Se carga solo en la página /reservar/ y páginas de booking.
 * @package MrBuggy
 */

/* ============================================================
   BOOKNETIC — Personalización del widget
   Usa CSS custom properties para adaptar los colores al tema.
   ============================================================ */

/* Variables de override para Booknetic */
:root {
    --booknetic-color-primary:    #E4AF5F;
    --booknetic-color-primary-rgb:228, 175, 95;
    --booknetic-color-secondary:  #141414;
    --booknetic-color-bg:         #141414;
    --booknetic-color-text:       #F5F5F0;
    --booknetic-radius:           4px;
}

/* ============================================================
   Tema oscuro/dorado con las CLASES REALES del panel.
   Raíz: .booknetic_appointment (#booknetic_theme_X).
   Ámbito: .booking-widget-wrap (envoltorio del shortcode en /reservar).
   ============================================================ */

/* Tipografía del tema en todo el panel */
.booking-widget-wrap .booknetic_appointment,
.booking-widget-wrap .booknetic_appointment * {
    font-family: var(--font-body) !important;
}

/* Lado del contenido (cabecera + cuerpo + pie) → OSCURO (era blanco) */
.booking-widget-wrap .booknetic_appointment .booknetic_appointment_container,
.booking-widget-wrap .booknetic_appointment .booknetic_appointment_container_header,
.booking-widget-wrap .booknetic_appointment .booknetic_appointment_container_body,
.booking-widget-wrap .booknetic_appointment .booknetic_appointment_container_footer {
    background-color: #0F0F0F !important;
    color:            #F5F5F0 !important;
}
.booking-widget-wrap .booknetic_appointment .booknetic_appointment_container_header {
    border-bottom: 1px solid rgba(228,175,95,0.18) !important;
}
.booking-widget-wrap .booknetic_appointment .booknetic_appointment_container_footer {
    border-top: 1px solid rgba(228,175,95,0.18) !important;
}

/* Texto del cuerpo claro. (El color del TÍTULO de categoría se controla con el
   ajuste nativo de Booknetic "Color del título" → ponerlo en blanco; tiene
   prioridad sobre el CSS del tema, por eso se gestiona desde el panel.) */
.booking-widget-wrap .booknetic_appointment_container_body,
.booking-widget-wrap .booknetic_appointment_container_body * {
    color: #F5F5F0 !important;
}

/* Tarjetas (servicios / ubicación / personal / extras) → dark + borde dorado */
.booking-widget-wrap .booknetic_appointment_container_body [class*="_box"],
.booking-widget-wrap .booknetic_appointment_container_body [class*="card"],
.booking-widget-wrap .booknetic_appointment_container_body [class*="service"],
.booking-widget-wrap .booknetic_appointment_container_body [class*="location"],
.booking-widget-wrap .booknetic_appointment_container_body [class*="staff"],
.booking-widget-wrap .booknetic_appointment_container_body [class*="extra"],
.booking-widget-wrap .booknetic_appointment_container_body [class*="item"] {
    background-color: #181818 !important;
    border:          1px solid rgba(228,175,95,0.20) !important;
    border-radius:   12px !important;
}
.booking-widget-wrap .booknetic_appointment_container_body [class*="_box"]:hover,
.booking-widget-wrap .booknetic_appointment_container_body [class*="service"]:hover,
.booking-widget-wrap .booknetic_appointment_container_body [class*="location"]:hover {
    border-color: rgba(228,175,95,0.55) !important;
}
/* Evitar "recuadros dentro de recuadros": los elementos anidados que también
   coinciden con las tarjetas pierden fondo y borde (solo manda la tarjeta exterior). */
.booking-widget-wrap .booknetic_appointment_container_body [class*="_box"] [class*="_box"],
.booking-widget-wrap .booknetic_appointment_container_body [class*="service"] [class*="service"],
.booking-widget-wrap .booknetic_appointment_container_body [class*="service"] [class*="_box"],
.booking-widget-wrap .booknetic_appointment_container_body [class*="location"] [class*="_box"],
.booking-widget-wrap .booknetic_appointment_container_body [class*="staff"] [class*="_box"],
.booking-widget-wrap .booknetic_appointment_container_body [class*="item"] [class*="item"],
.booking-widget-wrap .booknetic_appointment_container_body [class*="service"] [class*="item"],
.booking-widget-wrap .booknetic_appointment_container_body [class*="location"] [class*="item"] {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
}

/* Campos de formulario */
.booking-widget-wrap .booknetic_appointment input,
.booking-widget-wrap .booknetic_appointment select,
.booking-widget-wrap .booknetic_appointment textarea {
    background-color: #161616 !important;
    border:          1px solid rgba(228,175,95,0.25) !important;
    color:           #F5F5F0 !important;
    border-radius:   8px !important;
}
.booking-widget-wrap .booknetic_appointment input:focus,
.booking-widget-wrap .booknetic_appointment select:focus,
.booking-widget-wrap .booknetic_appointment textarea:focus {
    border-color: #E4AF5F !important;
    box-shadow:   0 0 0 3px rgba(228,175,95,0.15) !important;
    outline:      none !important;
}

/* Botón principal del pie (SIGUIENTE) → dorado */
.booking-widget-wrap .booknetic_appointment_container_footer button,
.booking-widget-wrap .booknetic_appointment_container_footer a {
    background-color: #E4AF5F !important;
    color:           #0A0A0A !important;
    border:          1px solid #E4AF5F !important;
    border-radius:   100px !important;
    font-weight:     700 !important;
}

/* Precio en dorado */
.booking-widget-wrap .booknetic_appointment [class*="price"] {
    color:       #E4AF5F !important;
    font-family: var(--font-display) !important;
}

/* Título de categoría (Buggy / Quad / Elite Experience). Booknetic lo forzaba a
   #181818 (= el fondo de las tarjetas → invisible) con la regla de su tema:
   #booknetic_theme_8 .booknetic_service_category { color:#181818 !important }.
   Esa regla usa ID + clase + !important, así que para ganarla subimos la
   especificidad (ID + 2 clases). Lo igualamos al resto del texto (claro). */
#booknetic_theme_8 .bkntc_service_list .booknetic_service_category {
    color: #F5F5F0 !important;
}

/* ============================================================
   SELECT2 — desplegables tipo "Hotel o Punto de recogida"
   Booknetic oculta el <select> nativo y pinta un widget select2
   que salía en BLANCO (captura n5). El panel desplegable se
   inyecta al final de <body>, así que esas reglas NO van scopeadas
   al widget; el resto sí.
   ============================================================ */
.booking-widget-wrap .select2-container--default .select2-selection,
.booking-widget-wrap .select2-selection {
    background-color: #161616 !important;
    border:           1px solid rgba(228,175,95,0.25) !important;
    border-radius:    8px !important;
    min-height:       46px !important;
}
.booking-widget-wrap .select2-selection__rendered,
.booking-widget-wrap .select2-selection__placeholder {
    color:       #F5F5F0 !important;
    line-height: 44px !important;
}
.booking-widget-wrap .select2-selection__arrow b {
    border-color: #E4AF5F transparent transparent transparent !important;
}
.booking-widget-wrap .select2-container--open .select2-selection {
    border-color: #E4AF5F !important;
}

/* Panel desplegable (se inyecta en <body>, fuera del widget) */
.select2-dropdown {
    background-color: #161616 !important;
    border:           1px solid rgba(228,175,95,0.30) !important;
    color:            #F5F5F0 !important;
}
.select2-results__option {
    color:            #E8E6E0 !important;
    background-color: transparent !important;
}
.select2-results__option--highlighted,
.select2-results__option[aria-selected="true"] {
    background-color: rgba(228,175,95,0.18) !important;
    color:            #FFFFFF !important;
}
.select2-search--dropdown .select2-search__field {
    background-color: #0F0F0F !important;
    border:           1px solid rgba(228,175,95,0.25) !important;
    color:            #F5F5F0 !important;
}

/* Campo de teléfono con bandera (intl-tel-input): lista de países */
.iti__country-list {
    background-color: #161616 !important;
    border:           1px solid rgba(228,175,95,0.30) !important;
    color:            #F5F5F0 !important;
}
.iti__country.iti__highlight { background-color: rgba(228,175,95,0.18) !important; }
.iti__dial-code { color: rgba(245,245,240,0.55) !important; }


/* ============================================================
   BOOKING PAGE HERO
   ============================================================ */

.page-hero--reservar {
    background: var(--color-bg-primary);
}

.page-hero--reservar .page-hero__title { color: var(--color-text-primary); }
.page-hero--reservar .page-hero__title em { color: var(--color-accent); }

/* Menos espacio muerto entre el hero y el widget de reserva: el hero ya da aire
   arriba, así que recortamos su padding inferior y el superior de la sección.
   Solo afecta a /reservar/ (no a los demás page-hero). */
.page-hero--reservar { padding-bottom: clamp(0.75rem, 2.5vw, 1.75rem); }
.reservar-section    { padding-block: clamp(0.5rem, 2vw, 1.5rem) var(--section-pad); }

/* ============================================================
   STRIPE — Estilos para el modal de pago (cuando está embebido)
   ============================================================ */

/* Si Stripe Elements aparece dentro de un iframe, limitar a dark */
.StripeElement {
    background:    var(--color-bg-tertiary) !important;
    border:        1px solid var(--color-border) !important;
    border-radius: var(--radius) !important;
    padding:       12px 16px !important;
}

.StripeElement--focus {
    border-color: var(--color-accent) !important;
    box-shadow:   0 0 0 3px rgba(228,175,95,0.15) !important;
}

.StripeElement--invalid { border-color: #EF4444 !important; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
    .booknetic_container {
        border-radius: var(--radius) !important;
    }
}

/* ============================================================
   PASO FECHA & HORA + CONFIRMAR + PAGO
   Booknetic pinta estos componentes en blanco fijo (#FFFFFF) con
   texto oscuro, y "Apariencia" no los alcanza. Los forzamos al tema
   oscuro. Selectores/colores tomados del CSS real de Booknetic
   (booknetic.css v1.1.8).
   ============================================================ */

/* ---- Calendario ---- */
#booknetic_calendar_area,
.booknetic_times {
    background-color: #181818 !important;
    border: 1px solid rgba(228,175,95,0.16) !important;
}
.booknetic_week_names > .booknetic_td {
    color: rgba(245,245,240,0.5) !important;
    border-bottom-color: rgba(228,175,95,0.14) !important;
}
.booknetic_calendar_days > div,
.booknetic_calendar_days > div > span {
    background-color: transparent !important;
    color: #F5F5F0 !important;
}
.booknetic_calendar_days > div:hover { background-color: rgba(228,175,95,0.14) !important; }
.booknetic_calendar_days.booknetic_calendar_selected_day > div,
.booknetic_calendar_days.booknetic_calendar_selected_day > div > span {
    background-color: #E4AF5F !important;
    color: #0A0A0A !important;
}
.booknetic_calendar_days.booknetic_calendar_empty_day > div,
.booknetic_calendar_days.booknetic_calendar_empty_day > div > span {
    color: rgba(245,245,240,0.25) !important;
}
.booknetic_calendar_days > div > span > i[b] { background: #3A3A3A !important; }

/* ---- Horas ---- */
.booknetic_times_head { color: #F5F5F0 !important; border-bottom-color: rgba(228,175,95,0.14) !important; }
.booknetic_times_title { color: #E4AF5F !important; }
.booknetic_times_list > div {
    background-color: #242424 !important;
    color: #F5F5F0 !important;
}
.booknetic_times_list > div:hover { background-color: rgba(228,175,95,0.16) !important; }
.booknetic_times_list > div.booknetic_selected_time,
.booknetic_times_list > div.booknetic_selected_time * {
    background: #E4AF5F !important;
    color: #0A0A0A !important;
}

/* ---- Confirmar detalles + resumen + pago (texto claro por defecto) ---- */
.booknetic_portlet,
.booknetic_payment_methods,
.booknetic_payment_method {
    background-color: #181818 !important;
    border: 1px solid rgba(228,175,95,0.16) !important;
}
.booknetic_confirm_step_body,
.booknetic_confirm_step_body *,
.booknetic_payment_method,
.booknetic_payment_method *,
.booknetic_select_method_txt {
    color: #F5F5F0 !important;
}
.booknetic_confirm_step_body [class*="price"],
.booknetic_confirm_details_price,
.booknetic_confirm_sum_price {
    color: #E4AF5F !important;
}
.booknetic_payment_method_selected {
    border-color: #E4AF5F !important;
    background: rgba(228,175,95,0.10) !important;
}
/* Filas del resumen (nombre / precio): Booknetic les pone background:#FFF fijo
   para tapar la línea de puntos → con texto claro no se leían. Lo igualamos al
   panel oscuro para que la línea se siga tapando pero el texto sea legible. */
.booknetic_confirm_details_title,
.booknetic_confirm_details_price {
    background: #181818 !important;
}
.booknetic_confirm_details_title { color: #F5F5F0 !important; }
.booknetic_confirm_details_price { color: #E4AF5F !important; }

/* ---- Cupón + tarjeta regalo (donde el cliente mete el código) ---- */
.booknetic_add_coupon,
.booknetic_add_giftcard {
    background-color: #161616 !important;
    border: 1px solid rgba(228,175,95,0.25) !important;
    color: #F5F5F0 !important;
}
/* Botón "OK" del cupón/tarjeta regalo (Booknetic lo pone verde) → dorado */
.booknetic_add_coupon button,
.booknetic_add_giftcard button {
    background: #E4AF5F !important;
    background-color: #E4AF5F !important;
    color: #0A0A0A !important;
    border: none !important;
}

/* ---- Barra "Precio total" (Booknetic la pone verde #DDF7E2) → dorado ---- */
.booknetic_confirm_sum_body,
.booknetic_confirm_sum_body_full_width {
    background-color: rgba(228,175,95,0.10) !important;
    color: #F5F5F0 !important;
    border-top: 1px solid rgba(228,175,95,0.20) !important;
}
.booknetic_confirm_sum_price {
    background-color: transparent !important;
    color: #E4AF5F !important;
}