/* ============================================================
   TACNA LODGE — Override de marca sobre template "Zante"
   Reemplaza la paleta azul/amarillo por el magenta del hotel.
   Cargar SIEMPRE despues de style.css y responsive.css
   ============================================================ */

:root {
    --tl-magenta: #9F2480;
    --tl-magenta-dark: #5C1349;
    --tl-magenta-hover: #7d1c66;
    --tl-cream: #FBF6EE;
}

/* ---------- BOTONES ---------- */
.button.btn_blue,
.btn_blue {
    background-color: var(--tl-magenta) !important;
    border-color: var(--tl-magenta) !important;
    color: #fff !important;
}
.button.btn_blue:hover,
.btn_blue:hover {
    background-color: var(--tl-magenta-dark) !important;
    border-color: var(--tl-magenta-dark) !important;
}

.button.btn_yellow,
.btn_yellow {
    background-color: var(--tl-magenta-dark) !important;
    border-color: var(--tl-magenta-dark) !important;
    color: #fff !important;
}
.button.btn_yellow:hover,
.btn_yellow:hover {
    background-color: var(--tl-magenta-hover) !important;
    border-color: var(--tl-magenta-hover) !important;
    color: #fff !important;
}

/* ---------- FONDOS DE SECCION ---------- */
.blue_bg,
#about_style_2.blue_bg {
    background-color: var(--tl-magenta) !important;
}

/* ---------- TITULOS CON "WAVE" (el adorno bajo el titulo) ---------- */
.mt_yellow .wave,
.mt_yellow:after,
.main_title.mt_yellow:after,
.mt_wave.mt_yellow svg path {
    fill: var(--tl-magenta) !important;
    color: var(--tl-magenta) !important;
    background-color: var(--tl-magenta) !important;
}

/* Si el wave usa borde/color de texto */
.main_title.mt_yellow h2 {
    color: var(--tl-magenta-dark) !important;
}

/* ---------- HOVER EFFECT EN IMAGENES ---------- */
.hover_effect.h_blue:before,
.h_blue:before {
    background-color: rgba(159, 36, 128, 0.85) !important;
}

/* ---------- PRECIOS DE HABITACIONES ---------- */
.room .price,
article.room .price {
    background-color: var(--tl-magenta) !important;
    color: #fff !important;
}

/* ---------- ENLACES ---------- */
a {
    color: var(--tl-magenta);
}
a:hover,
a:focus {
    color: var(--tl-magenta-dark);
}

/* El menu sobre fondo claro y los titulos de blog/links no deben volverse magenta porques afecta legibilidad */
header .navbar-nav > li > a,
footer a,
.blog_item h3 a,
.copyrights a {
    color: inherit;
}
header .navbar-nav > li > a:hover,
.blog_item h3 a:hover {
    color: var(--tl-magenta) !important;
}

/* ---------- PRELOADER ---------- */
#loading .object {
    background-color: var(--tl-magenta) !important;
}

/* ---------- BACK TO TOP ---------- */
#back_to_top {
    background-color: var(--tl-magenta) !important;
}
#back_to_top:hover {
    background-color: var(--tl-magenta-dark) !important;
}

/* ---------- FORMULARIO DE RESERVA (barra bajo el slider) ---------- */
.hbf_2 .inner {
    border-top: 3px solid var(--tl-magenta) !important;
}

/* ---------- ICONOS DE SERVICIOS / CONTACTO ---------- */
.owl-thumb-item .media-left i,
.contact-item i,
.flaticon-food, .flaticon-person, .flaticon-business, .flaticon-beach {
    color: var(--tl-magenta) !important;
}

/* ---------- REDES SOCIALES (hover) ---------- */
.social_media a:hover {
    background-color: var(--tl-magenta) !important;
    border-color: var(--tl-magenta) !important;
}

/* ---------- BARRA DE RESERVA: campos un poco mas altos para inputs nativos ---------- */
.hbf_2 .form-control {
    height: 46px;
}
.hbf_2 input[type="date"] {
    color: #555;
}

/* ---------- LOGO (tamaño y visibilidad segun fondo) ---------- */
/* El template alterna .light (sobre slider) y .dark (al hacer scroll). */
.navbar-brand {
    padding: 8px 15px !important;
    height: auto !important;
}
.navbar-brand img {
    height: 85px !important;
    width: auto !important;
    max-width: none !important;
    transition: height 0.3s ease;
}
/* Al hacer scroll el header se encoge: logo un poco mas chico */
header.fixed.scroll .navbar-brand img,
header.smaller .navbar-brand img {
    height: 46px !important;
}
/* Logo del footer */
footer .about .logo,
footer img.logo {
    height: 64px !important;
    width: auto !important;
    margin-bottom: 14px;
}
/* En moviles, un pelin mas chico para que no ocupe toda la barra */
@media (max-width: 767px) {
    .navbar-brand img { height: 46px !important; }
}

/* ---------- PAGINA DE CONFIRMACION DE RESERVA ---------- */
.tl-confirm-wrap {
    max-width: 620px; margin: 60px auto; padding: 40px 30px;
    background: #fff; border-radius: 10px; text-align: center;
    box-shadow: 0 4px 30px rgba(92,19,73,0.10);
    font-family: 'Lato', sans-serif;
}
.tl-confirm-wrap h1 { color: var(--tl-magenta-dark); font-family: 'Raleway', sans-serif; }
.tl-confirm-wrap .tl-code {
    display: inline-block; background: var(--tl-cream); color: var(--tl-magenta-dark);
    padding: 8px 18px; border-radius: 6px; font-weight: 700; font-size: 20px; margin: 10px 0;
}
.tl-confirm-wrap .tl-wa {
    display: inline-block; background: #25D366; color: #fff; padding: 14px 28px;
    border-radius: 8px; text-decoration: none; font-weight: 700; margin-top: 16px;
}
.tl-confirm-wrap .tl-back {
    display: block; margin-top: 18px; color: var(--tl-magenta); text-decoration: none;
}
/* ===== Burbuja flotante WhatsApp ===== */
.wa_float {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 60px;
    height: 60px;
    background: #25D366;          /* verde oficial de WhatsApp */
    color: #fff;
    border-radius: 50%;
    text-align: center;
    font-size: 32px;
    line-height: 60px;
    z-index: 9999;
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.45);
    transition: all .3s ease;
    animation: wa_pulse 2.2s infinite;
}
.wa_float:hover {
    background: #1da851;          /* verde un poco más oscuro al pasar el mouse */
    color: #fff;
    transform: scale(1.08);
    text-decoration: none;
}
.wa_float i { line-height: 60px; }

@keyframes wa_pulse {
    0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
    70%  { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* Que no choque con el botón "back to top" en móvil */
@media (max-width: 767px) {
    .wa_float { bottom: 20px; right: 20px; width: 54px; height: 54px; font-size: 28px; line-height: 54px; }
    .wa_float i { line-height: 54px; }
}

/* ===== Footer con color de marca (magenta) ===== */
footer .inner {
    background: var(--tl-magenta) !important;
}
footer .inner h5,
footer .inner p,
footer .inner address,
footer .inner li {
    color: #fff !important;
}
footer .inner a {
    color: rgba(255, 255, 255, 0.85) !important;
}
footer .inner a:hover {
    color: #fff !important;
    text-decoration: none;
}
footer .inner small {
    color: rgba(255, 255, 255, 0.65) !important;
}
footer .inner i {
    color: #fff !important;
}

/* Subfooter (copyright) en magenta oscuro para dar profundidad */
footer .subfooter {
    background: var(--tl-magenta-dark) !important;
}
footer .subfooter,
footer .subfooter a {
    color: rgba(255, 255, 255, 0.85) !important;
}
footer .subfooter a:hover {
    color: #fff !important;
}