/* Ported from murahno 3 TopBar.css */
.top-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 50;
}

.top-bar-left {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.top-bar-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 5rem;
}

.top-bar .btn {
    width: 8.5rem;
}

.top-bar .top-bar-center .btn {
    width: 19rem;
}

.top-bar .top-bar-cta .desktop-reserve-btn .btn {
    width: 10rem;
}

.top-bar .top-bar-center .button-text {
    font-size: 16px;
}

.top-bar .top-bar-cta .desktop-reserve-btn .button-text {
    font-size: 16px;
}


.top-bar .top-bar-logo {
    width: 4rem;
}

.top-bar .top-bar-logo img {
    width: 100%;
    height: auto;
    display: block;

    opacity: 0.7;
    /* 👈 semi transparente */
    transition: opacity 0.3s ease, filter 0.3s ease;
}

/* Efecto de brillo dorado en hover (Desktop) */
@media (min-width: 1001px) {
    .top-bar .top-bar-logo:hover img {
        opacity: 1;
        filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.7)) drop-shadow(0 0 15px rgba(255, 215, 0, 0.4));
    }
}


.top-bar .top-bar-cta {
    display: flex;
    /* Fallback if using this class */
    align-items: center;
    gap: 1rem;
}

/* In murahno 2 HTML I used .top-bar-right, let's map it */
.top-bar-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Botón Reservar móvil por defecto oculto en desktop */
.mobile-reserve-btn {
    display: none;
}

@media (max-width: 1000px) {
    .top-bar {
        padding: 0.5rem 1rem;
    }

    .top-bar .top-bar-logo {
        width: 4.0rem !important;
        /* Reduced logo size for mobile */
    }

    /* Hide desktop Reservar in mobile — use mobile version */
    .desktop-reserve-btn {
        display: none;
    }

    .desktop-pbx-btn {
        display: none;
    }


    /* Move language selector to sit next to logo on mobile */
    .desktop-language-selector {
        position: fixed;
        top: 1rem;
        left: 6.5rem;
        /* Moved further right to clear the larger logo */
        /* Moved right to clear the logo */
        z-index: 900;
    }

    .desktop-language-selector .language-selector-dropdown {
        font-size: 14px;
        /* Reduced text size */
        padding: 0.2rem 0.5rem;
        /* Tighter padding */
    }

    /* Mobile Reservar — pill shaped like desktop, fixed top-right next to menu */
    .mobile-reserve-btn {
        display: block;
        position: fixed;
        top: 0.75rem;
        right: 5rem;
        /* Increased gap from 4.25rem to 5rem */
        /* Gap: 1rem (margin) + 3.2rem (menu) = 4.2rem edge */
        left: auto;
        bottom: auto;
        transform: none;
        z-index: 900;
        width: auto;
        height: auto;
    }

    .mobile-reserve-btn .btn {
        margin: 0;
        /* Narrower width (10.5rem) */
        width: 10.5rem;
        height: auto;
        white-space: nowrap;
        /* Smaller scale from 0.9 to 0.8 */
        transform: scale(0.8);
        transform-origin: right center;
    }

    .mobile-pbx-btn {
        display: block;
        position: fixed;
        top: 0.75rem;
        right: 5rem;
        /* Increased gap from 4.25rem to 5rem */
        /* Gap: 1rem (margin) + 3.2rem (menu) = 4.2rem edge */
        left: auto;
        bottom: auto;
        transform: none;
        z-index: 900;
        width: auto;
        height: auto;
    }

    .mobile-pbx-btn .btn {
        margin: 0;
        /* Narrower width (10.5rem) */
        width: 10.5rem;
        height: auto;
        white-space: nowrap;
        /* Smaller (scale 0.9) */
        transform: scale(0.9);
        transform-origin: right center;
    }

    /* Rediseño de botones PBX y Correo en móvil */
    .top-bar-center {
        position: fixed !important;
        top: 4.5rem !important;
        /* Debajo del botón de menú */
        right: 1rem !important;
        left: auto !important;
        transform: none !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
        align-items: center !important;
        z-index: 1000 !important;
    }

    .top-bar-center .btn {
        width: 3.2rem !important;
        height: 3.2rem !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 50% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        background-color: #BDB6AE !important;
        /* Changed from background to background-color */
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: none !important;
        /* Ensure no border interferes */
        box-shadow: none !important;
    }

    .top-bar-center .btn .circle {
        transform: scale(1) translate(-50%, -50%) !important;
        translate: none !important;
        width: 2.8rem !important;
        /* increased slightly to make outer ring thinner */
        height: 2.8rem !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        margin: 0 !important;
        border-radius: 50% !important;
        background-color: #1F1D1D !important;
    }

    .top-bar-center .btn .icon {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        translate: none !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        z-index: 2 !important;
        color: #ffffff !important;
        width: 1.4rem !important;
        height: 1.4rem !important;
    }

    .top-bar-center .btn .icon svg {
        width: 100% !important;
        height: 100% !important;
    }

    .top-bar-center .btn .button-text {
        display: none !important;
    }

    /* Animaciones aplicadas al SVG para no chocar con el transform del contenedor */
    .top-bar-center .btn:first-child .icon svg {
        animation: mobilePbxVibrate 2s cubic-bezier(.36, .07, .19, .97) infinite;
        transform-origin: center center;
    }

    .top-bar-center .btn:nth-child(2) .icon svg {
        animation: mobileCorreoLevitate 3s ease-in-out infinite;
    }


    .top-bar-right {
        padding-right: 0;
    }

    /* Efecto de brillo dorado constante en móvil */
    .top-bar .top-bar-logo img {
        animation: goldenGlow 3s infinite alternate ease-in-out;
    }
}

@keyframes mobilePbxVibrate {

    0%,
    20%,
    40%,
    60%,
    80%,
    100% {
        transform: rotate(0deg);
    }

    2%,
    6%,
    10%,
    14%,
    18% {
        transform: rotate(-10deg) scale(1.1);
    }

    4%,
    8%,
    12%,
    16% {
        transform: rotate(10deg) scale(1.1);
    }
}

@keyframes mobileCorreoLevitate {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

@keyframes goldenGlow {
    0% {
        filter: drop-shadow(0 0 2px rgba(255, 215, 0, 0.4));
    }

    100% {
        filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.8)) drop-shadow(0 0 15px rgba(255, 215, 0, 0.5));
    }
}