/*
Theme Name: Betheme Child
Theme URI: https://themes.muffingroup.com/betheme
Author: Muffin group
Author URI: https://muffingroup.com
Description: Child Theme for Betheme
Template: betheme
Version: 2.0.2
*/

/*
   Al cambiar estilos, actualiza la versión en functions.php (SAFARI_STYLES_VERSION)
   para que el navegador cargue el CSS nuevo.
*/

/* =====================================================
   SAFARI TAXI LA GRACIOSA - Custom Header Styles
   ===================================================== */

/* Variables CSS personalizadas */
:root {
    --safari-verde: #C4D82E;
    --safari-verde-oscuro: #A8BC00;
    --safari-verde-hover: #D4E83E;
    --safari-negro: #1a1a1a;
    --safari-negro-suave: #2d2d2d;
    --safari-blanco: #ffffff;
    --safari-gris-claro: #f5f5f5;
    --safari-gris-borde: #e0e0e0;
    --safari-gris-texto: #666666;
    --safari-whatsapp: #25D366;
    --safari-whatsapp-hover: #20BD5A;
    --safari-transicion: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Fondo gradiente global para toda la página */
body,
#Wrapper {
    background: linear-gradient(135deg, var(--safari-blanco) 0%, var(--safari-gris-claro) 100%) !important;
    background-attachment: fixed !important;
}

#Content {
    margin-top: 0;
}

/* =====================================================
   SIDE SLIDE (menú móvil) - Ocultar botón action
   ===================================================== */
@media (max-width: 1024px) {
    #Side_slide .extras .action_button {
        display: none !important;
    }
}

/* =====================================================
   TOPBAR PERSONALIZADO
   ===================================================== */
.safari-topbar {
    background: var(--safari-verde);
    height: 42px;
    display: flex;
    align-items: center;
    transition: var(--safari-transicion);
}

.safari-topbar.hidden {
    height: 0;
    overflow: hidden;
    opacity: 0;
}

.safari-topbar-container {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.safari-topbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--safari-negro);
}

.safari-topbar-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Rating Google */
.safari-google-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--safari-negro);
    cursor: pointer;
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.25);
    transition: var(--safari-transicion);
    text-decoration: none;
}

.safari-google-rating:hover {
    background: rgba(255, 255, 255, 0.4);
    color: var(--safari-negro);
}

.safari-google-rating .stars {
    color: #FBBC04;
    font-size: 12px;
    letter-spacing: -1px;
}

/* Badge de disponibilidad */
.safari-availability {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.3);
    color: var(--safari-negro);
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.safari-pulse-dot {
    width: 8px;
    height: 8px;
    background: var(--safari-whatsapp);
    border-radius: 50%;
    animation: safariPulse 1.5s infinite;
}

@keyframes safariPulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(37, 211, 102, 0);
    }
}

/* Teléfono */
.safari-phone {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--safari-negro);
    background: rgba(255, 255, 255, 0.3);
    padding: 5px 12px;
    border-radius: 20px;
    transition: var(--safari-transicion);
    text-decoration: none;
}

.safari-phone:hover {
    background: rgba(255, 255, 255, 0.5);
    color: var(--safari-negro);
}

/* =====================================================
   HEADER PRINCIPAL - Ajustes BeTheme
   ===================================================== */

/* Ocultar elementos no deseados de BeTheme */
#Action_bar,
#Header #Top_bar .top_bar_right,
#Header #Top_bar .secondary_menu_wrapper,
#Header #Top_bar .search_wrapper {
    display: none !important;
}

/* Reset del header */
#Header #Top_bar {
    height: auto !important;
    min-height: auto;
    background: var(--safari-blanco) !important;
}

#Header #Top_bar.is-sticky {
    min-height: auto;
}

/* Eliminar espacio del placeholder */
#Header .header_placeholder {
    height: 0 !important;
    display: none !important;
}

/* Contenedor principal del header */
#Header #Top_bar .container {
    max-width: 100%;
    width: 100%;
    padding: 10px 40px;
}

#Header #Top_bar .column.one {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-end !important;
    gap: 40px;
    flex-wrap: nowrap;
}

#Header #Top_bar .top_bar_left {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-end !important;
    gap: 40px;
    width: auto !important;
    float: none !important;
    margin: 0 !important;
}

/* Logo grande */
#Header #Top_bar .logo {
    height: auto !important;
    line-height: normal !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
}

#Header #Top_bar .logo a {
    padding: 0 !important;
    height: auto !important;
}

#Header #Top_bar .logo img,
#Header #Top_bar .logo img.logo-main,
#Header #Top_bar .logo img.logo-sticky {
    height: 100px !important;
    width: auto !important;
    max-height: none !important;
    max-width: none !important;
}

#Header #Top_bar.is-sticky .logo img,
#Header #Top_bar.is-sticky .logo img.logo-main,
#Header #Top_bar.is-sticky .logo img.logo-sticky {
    height: 80px !important;
}

/* Menú alineado abajo */
#Header #Top_bar .menu_wrapper {
    float: none !important;
    margin: 0 !important;
    padding-bottom: 15px;
}

#Header #Top_bar nav#menu {
    display: flex !important;
    background: none !important;
}

#Header #Top_bar #menu>ul {
    display: flex !important;
    gap: 5px;
    background: none !important;
    float: none !important;
}

#Header #Top_bar #menu>ul>li {
    float: none !important;
    margin: 0 !important;
}

#Header #Top_bar #menu>ul>li>a {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--safari-negro-suave) !important;
    padding: 10px 16px !important;
    border-radius: 8px !important;
    background: none !important;
    line-height: 1.4 !important;
    height: auto !important;
    transition: var(--safari-transicion);
}

#Header #Top_bar #menu>ul>li>a span {
    border: none !important;
    padding: 0 !important;
    line-height: inherit !important;
}

#Header #Top_bar #menu>ul>li>a:hover,
#Header #Top_bar #menu>ul>li.current-menu-item>a {
    color: var(--safari-negro) !important;
    background: var(--safari-gris-claro) !important;
}

/* Ocultar subrayado del item activo de BeTheme */
#Header #Top_bar #menu>ul>li>a span::after,
#Header #Top_bar #menu>ul>li.current-menu-item>a span::after {
    display: none !important;
}

/* Hamburger menu oculto en desktop */
#Header #Top_bar .responsive-menu-toggle {
    display: none !important;
}

/* =====================================================
   BOTÓN WHATSAPP HEADER
   ===================================================== */
.safari-btn-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    transition: var(--safari-transicion);
    border: none;
    white-space: nowrap;
    background: var(--safari-whatsapp);
    color: var(--safari-blanco);
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
    text-decoration: none;
}

.safari-btn-whatsapp:hover {
    background: var(--safari-whatsapp-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
    color: var(--safari-blanco);
}

.safari-btn-whatsapp svg {
    fill: var(--safari-blanco);
}

.safari-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    transition: var(--safari-transicion);
    border: 2px solid var(--safari-gris-borde);
    white-space: nowrap;
    background: transparent;
    color: var(--safari-negro);
    text-decoration: none;
}

.safari-btn-outline:hover {
    border-color: var(--safari-verde);
    background: rgba(196, 216, 46, 0.05);
    color: var(--safari-negro);
}

/* CTAs del header - posicionamiento */
.safari-header-ctas {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding-bottom: 15px;
    margin-left: auto;
}

/* =====================================================
   RESPONSIVE - TABLET
   ===================================================== */
@media (max-width: 992px) {

    /* Topbar: ocultar ubicación, mantener reseñas */
    .safari-topbar-left {
        display: none;
    }

    .safari-topbar-right {
        width: 100%;
        justify-content: center;
        gap: 15px;
    }

    .safari-availability {
        display: none;
    }

    /* Ocultar teléfono en tablet/móvil */
    .safari-phone {
        display: none;
    }

    #Header #Top_bar {
        height: 90px !important;
    }

    #Header #Top_bar .top_bar_left {
        flex-direction: column;
        align-items: center;
    }

    .safari-header-ctas {
        padding-bottom: 10px;
    }

    .safari-btn-outline {
        background-color: #ffffff;
    }
}

/* =====================================================
   RESPONSIVE - MÓVIL
   ===================================================== */
@media (max-width: 768px) {

    /* TOPBAR: Mostrar ubicación y reseñas, ocultar teléfono */
    .safari-topbar-left {
        display: flex !important;
        font-size: 11px;
        align-items: center;
    }

    .safari-topbar-right {
        gap: 10px;
        justify-content: flex-end;
        width: 50%;
    }

    .safari-availability,
    .safari-phone {
        display: none !important;
    }

    /* Reseñas: mostrar completas */
    .safari-google-rating {
        padding: 4px 8px;
        font-size: 11px;
        white-space: nowrap;
    }

    .safari-google-rating span:last-child {
        display: inline;
    }

    /* HEADER: Logo Izquierda | Hamburguesa Derecha */
    #Header #Top_bar {
        padding: 5px 0 !important;
    }

    #Header #Top_bar .container {
        padding: 0 15px;
    }

    #Header #Top_bar .top_bar_left {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
    }

    /* 1. Logo a la izquierda */
    #Header #Top_bar .logo {
        order: 1;
        flex: 0 0 auto;
        justify-content: flex-start;
        padding-left: 0;
    }

    #Header #Top_bar .logo img {
        height: 120px !important;
        max-height: 120px !important;
        object-fit: contain;
    }

    /* 2. Menú hamburguesa a la derecha */
    #Header #Top_bar .menu_wrapper {
        order: 2;
        flex: 0 0 auto;
        margin-left: auto;
        /* Empuja a la derecha */
        padding-right: 15px !important;
        /* Más separación del borde */
    }

    #Header #Top_bar .responsive-menu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        background: var(--safari-gris-claro);
        border-radius: 10px;
        /* Bordes redondeados */
        color: var(--safari-negro);
        border: 1px solid transparent;
    }

    .mobile-header-mini #Top_bar a.responsive-menu-toggle {
        right: 28px;
        top: 38px !important;
    }

    /* Ocultar elementos desktop */
    #Header #Top_bar nav#menu,
    .safari-header-ctas {
        display: none !important;
    }

    .mobile-sticky #Top_bar.is-sticky a.responsive-menu-toggle {
        top: 45px !important;
    }
}

/* =====================================================
   RESPONSIVE - MÓVIL PEQUEÑO
   ===================================================== */
@media (max-width: 480px) {
    .safari-topbar {
        height: 36px;
    }

    .safari-google-rating {
        font-size: 10px;
        padding: 3px 8px;
    }

    #Header #Top_bar .logo img,
    #Header #Top_bar.is-sticky .logo img,
    #Header #Top_bar.is-sticky .logo img.logo-main,
    #Header #Top_bar.is-sticky .logo img.logo-sticky {
        height: 70px !important;
    }

    #Header #Top_bar .responsive-menu-toggle {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
}

/* =====================================================
   GOOGLE FONTS - Outfit
   ===================================================== */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap');

/* =====================================================
   FOOTER - SAFARI TAXI STYLES
   ===================================================== */

/* Footer principal */
#Footer {
    background: var(--safari-blanco) !important;
    border-top: 1px solid #e5e5e5 !important;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Contenedor del footer */
#Footer .widgets_wrapper {
    padding: 50px 0 40px !important;
    background: transparent !important;
}

/* Títulos de columnas */
#Footer .widgets_wrapper .widget-title,
#Footer .widgets_wrapper h4 {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--safari-negro) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin-bottom: 20px !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
}

/* Links del footer */
#Footer .widgets_wrapper a {
    color: #495057 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    transition: var(--safari-transicion) !important;
}

#Footer .widgets_wrapper a:hover {
    color: var(--safari-verde-oscuro) !important;
}

/* Listas del footer */
#Footer .widgets_wrapper ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#Footer .widgets_wrapper li {
    margin-bottom: 12px !important;
    padding: 0 !important;
}

#Footer .widgets_wrapper li::before {
    display: none !important;
}

/* Texto del footer */
#Footer .widgets_wrapper p,
#Footer .widgets_wrapper .textwidget {
    font-size: 14px !important;
    color: #6c757d !important;
    line-height: 1.6 !important;
}

/* Widgets de texto */
#Footer .widget_text .textwidget {
    color: #6c757d !important;
}

/* Footer - columna de la marca (primera columna) */
#Footer .widgets_wrapper .column:first-child .footer-logo {
    height: 60px;
    width: auto;
    margin-bottom: 16px;
}

/* Rating en el footer */
#Footer .safari-footer-rating {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--safari-negro-suave);
    margin: 16px 0;
}

#Footer .safari-footer-rating .star {
    color: #ffc107;
}

/* Iconos sociales del footer */
#Footer .widgets_wrapper .social {
    margin-top: 16px !important;
}

#Footer .widgets_wrapper .social li {
    display: inline-block !important;
    margin-right: 10px !important;
    margin-bottom: 0 !important;
}

#Footer .widgets_wrapper .social a {
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--safari-gris-claro) !important;
    border-radius: 8px !important;
    color: var(--safari-negro-suave) !important;
    font-size: 16px !important;
    transition: var(--safari-transicion) !important;
}

#Footer .widgets_wrapper .social a:hover {
    background: var(--safari-verde) !important;
    color: var(--safari-negro) !important;
}

/* Información de contacto */
#Footer .widgets_wrapper .contact-line {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 14px;
    color: var(--safari-negro-suave);
    justify-content: center;
}

#Footer .widgets_wrapper .contact-line i,
#Footer .widgets_wrapper .contact-line svg {
    width: 18px;
    color: #6c757d;
    flex-shrink: 0;
}

/* Link de Google Maps en footer */
#Footer .safari-maps-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e5e5e5;
    font-size: 14px;
    color: #495057;
    text-decoration: none;
    transition: var(--safari-transicion);
}

#Footer .safari-maps-link:hover {
    color: var(--safari-verde-oscuro);
}

#Footer .safari-maps-link .maps-icon {
    width: 32px;
    height: 32px;
    background: var(--safari-verde);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#Footer .safari-maps-link .maps-icon i {
    color: var(--safari-negro);
    font-size: 14px;
}

/* =====================================================
   FOOTER COPY / BARRA LEGAL
   ===================================================== */
#Footer .footer_copy {
    background: #f8f9fa !important;
    border-top: 1px solid #e5e5e5 !important;
    padding: 16px 0 !important;
}

#Footer .footer_copy .container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
}


#Footer .footer_copy .copyright {
    font-size: 13px !important;
    color: #6c757d !important;
    margin: 0 !important;
}

#Footer .footer_copy a {
    font-size: 13px !important;
    color: #6c757d !important;
    text-decoration: none !important;
    transition: var(--safari-transicion) !important;
}

#Footer .footer_copy a:hover {
    color: var(--safari-negro) !important;
}

/* Menu legal del footer */
#Footer .footer_copy .footer-menu,
#Footer .footer_copy nav {
    display: flex !important;
    gap: 8px !important;
}

#Footer .footer_copy .footer-menu li,
#Footer .footer_copy nav li {
    display: inline !important;
    margin: 0 !important;
}

#Footer .footer_copy .footer-menu li::after,
#Footer .footer_copy nav li::after {
    content: '·';
    margin-left: 8px;
    color: #dee2e6;
}

#Footer .footer_copy .footer-menu li:last-child::after,
#Footer .footer_copy nav li:last-child::after {
    display: none;
}

/* =====================================================
   RESPONSIVE - FOOTER
   ===================================================== */
@media (min-width: 992px) {
    .tours-links-footer {
        padding-left: 60px;
    }
}

@media (max-width: 992px) {
    #Footer .widgets_wrapper .column {
        text-align: center !important;
        margin-bottom: 30px !important;
    }

    #Footer .widgets_wrapper .social {
        justify-content: center !important;
    }

    #Footer .footer_copy .container {
        flex-direction: column !important;
        text-align: center !important;
    }
}

@media (max-width: 640px) {
    #Footer .widgets_wrapper {
        padding: 40px 0 30px !important;
    }

    #Footer .widgets_wrapper .widget-title,
    #Footer .widgets_wrapper h4 {
        font-size: 14px !important;
    }

    #Footer .footer_copy {
        padding: 14px 0 !important;
    }
}

#Footer .widgets_wrapper a svg {
    width: 22px;
    margin: 0 5px;
}

.safari-prefooter .btn-whatsapp,
.safari-prefooter .btn-outline {
    width: auto !important;
}

@media screen and (max-width: 640px) {
    .safari-finder-personas {
        flex-direction: column;
    }

    .safari-sticky-resumen {
        bottom: -150px;
    }

    #Content {
        padding-top: 0;
    }
}