/**

 * Sticky Side Menu Block Styles

 */



/* ===== WRAPPER ===== */

.wp-block-travel-sticky-side-menu {

    position: relative;

    width: 100%;

    height: 1px; /* Minimal marker, menu will be fixed */

    z-index: 100;

    pointer-events: none; /* Don't block clicks on content behind */

}



.wp-block-travel-sticky-side-menu .sticky-side-menu {

    pointer-events: all;

}



/* Hide on mobile if configured */

.wp-block-travel-sticky-side-menu.hide-mobile {

    display: none;

}



@media (min-width: 768px) {

    .wp-block-travel-sticky-side-menu.hide-mobile {

        display: block;

    }

}



/* ===== MAIN CONTAINER ===== */

.sticky-side-menu {

    /* Always fixed at top:0, visibility controlled by JavaScript */

    position: fixed;

    top: 0;

    right: 0;

    display: flex;

    flex-direction: row;

    align-items: center; /* Centrar verticalmente los elementos */

    gap: 0;

    width: fit-content;

    max-width: none;

    z-index: 100;

    box-shadow: calc(-1 * var(--shadow-blur, 12px)) var(--shadow-blur, 12px) calc(var(--shadow-blur, 12px) * 1.5) rgba(0, 0, 0, var(--shadow-alpha, 0.3));

    border-radius: 20px 0 0 20px; /* Más redondeado a la izquierda */

    overflow: visible; /* Permitir que el botón redondeado sobresalga */

    transition: opacity 0.3s ease, transform 0.3s ease;

    opacity: 0;

    transform: translateX(100%);

    padding: 8px; /* Padding interno */

    background: white;

}



@media(max-width: 768px) {

    .sticky-side-menu {

        width: 100%;

        display: none;

    }

}



/* When visible, show with slide-in animation */

.sticky-side-menu.is-visible {

    opacity: 1;

    transform: translateX(0);

}



/* ===== PHONE SECTION ===== */

.sticky-side-menu__phone {

    background: transparent;

    color: #154D52;

    padding: 8px 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    text-decoration: none;

    font-size: 16px;

    font-weight: 700;

    transition: all 0.3s ease;

    border-radius: 20px;

}



.sticky-side-menu__phone svg {

    flex-shrink: 0;

    width: 18px;

    height: 18px;

}



.sticky-side-menu__phone span {

    white-space: nowrap;

}



/* ===== CTA BUTTON ===== */

.sticky-side-menu__cta {

    padding: 10px 20px !important;

    display: flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    font-size: 18px;

    font-weight: 600;

    text-align: center;

    transition: all 0.3s ease;

    border: none;

    cursor: pointer;

    border-radius: 25px; /* Redondeado */

    white-space: nowrap;

}



/* Button Color Variants (reusing from PostsCarousel system) */

.btn-cta--primary {

    background: var(--wp--preset--color--secondary);

    color: white;

}



.btn-cta--primary:hover {

    background: #d67a73;

    transform: translateX(-4px);

    color: white;

}



.btn-cta--secondary {

    background: var(--wp--preset--color--contrast-4);

    color: white;

}



.btn-cta--secondary:hover {

    background: #4a2862;

    transform: translateX(-4px);

    color: white;

}



.btn-cta--white {

    background: white;

    color: #1A1A1A;

}



.btn-cta--white:hover {

    background: #f5f5f5;

    transform: translateX(-4px);

    color: #1A1A1A;

}



.btn-cta--gold {

    background: var(--wp--preset--color--contrast-1);

    color: white;

}



.btn-cta--gold:hover {

    background: #b8902a;

    transform: translateX(-4px);

    color: white;

}



.btn-cta--dark {

    background: #1A1A1A;

    color: white;

}



.btn-cta--dark:hover {

    background: #333333;

    transform: translateX(-4px);

    color: white;

}



.btn-cta--transparent {

    background: transparent;

    color: white;

    border: 2px solid white;

}



.btn-cta--transparent:hover {

    background: rgba(255, 255, 255, 0.1);

    transform: translateX(-4px);

    color: white;

}



/* ===== HAMBURGER BUTTON ===== */

.sticky-side-menu__hamburger {

    background: transparent;

    color: #1A1A1A;

    padding: 10px 12px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 3px;

    border: none;

    cursor: pointer;

    transition: all 0.3s ease;

    border-radius: 20px;

}



.sticky-side-menu__hamburger:hover {

    background: #f5f5f5;

}



.sticky-side-menu__hamburger span {

    display: block;

    width: 20px;

    height: 2px;

    background: #1A1A1A;

    border-radius: 2px;

    transition: all 0.3s ease;

}



/* Hamburger animation when menu is open */

.sticky-side-menu__hamburger[aria-expanded="true"] span:nth-child(1) {

    transform: rotate(45deg) translateY(5px);

}



.sticky-side-menu__hamburger[aria-expanded="true"] span:nth-child(2) {

    opacity: 0;

}



.sticky-side-menu__hamburger[aria-expanded="true"] span:nth-child(3) {

    transform: rotate(-45deg) translateY(-5px);

}



/* ===== MENU PANEL (SLIDE-IN) ===== */

.sticky-side-menu__nav {

    position: fixed;

    top: 0;

    right: -400px; /* Hidden by default */

    width: 100%;

    max-width: 400px;

    height: 100vh;

    background: white;

    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);

    z-index: 1000;

    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    overflow-y: auto;

}



.sticky-side-menu__nav.is-open {

    right: 0;

}



/* Close button */

.sticky-side-menu__close {

    position: absolute;

    top: 20px;

    right: 20px;

    background: transparent;

    border: none;

    color: #1A1A1A;

    cursor: pointer;

    padding: 8px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    transition: all 0.3s ease;

    z-index: 10;

}



.sticky-side-menu__close:hover {

    background: #f5f5f5;

    transform: rotate(90deg);

}



/* Menu content */

.sticky-side-menu__nav-content {

    padding: 80px 40px 40px;

}



.sticky-side-menu__menu {

    list-style: none;

    margin: 0;

    padding: 0;

}



.sticky-side-menu__menu li {

    margin-bottom: 12px;

}



.sticky-side-menu__menu a {

    display: block;

    padding: 12px 0;

    color: #1A1A1A;

    text-decoration: none;

    font-size: 18px;

    font-weight: 500;

    transition: all 0.3s ease;

    border-bottom: 2px solid transparent;

}



.sticky-side-menu__menu a:hover {

    color: var(--wp--preset--color--secondary);

    border-bottom-color: var(--wp--preset--color--secondary);

    transform: translateX(8px);

}



.sticky-side-menu__menu .current-menu-item > a,

.sticky-side-menu__menu .current_page_item > a {

    color: var(--wp--preset--color--secondary);

    border-bottom-color: var(--wp--preset--color--secondary);

}



/* Submenu styling */

.sticky-side-menu__menu .sub-menu {

    list-style: none;

    padding-left: 20px;

    margin-top: 8px;

}



.sticky-side-menu__menu .sub-menu a {

    font-size: 16px;

    font-weight: 400;

    padding: 8px 0;

}



/* Empty menu message */

.sticky-side-menu__empty {

    color: #666;

    font-style: italic;

    text-align: center;

    padding: 20px;

}



/* ===== OVERLAY ===== */

.sticky-side-menu-overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.6);

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    z-index: 999;

}



.sticky-side-menu-overlay.is-visible {

    opacity: 1;

    pointer-events: all;

}



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

@media (max-width: 767px) {

    .sticky-side-menu {

        padding: 6px;

        border-radius: 0px 0px 16px 16px;

    }



    .sticky-side-menu__phone {

        font-size: 12px;

        padding: 6px 10px;

    }



    .sticky-side-menu__phone svg {

        width: 16px;

        height: 16px;

    }



    .sticky-side-menu__phone span {

         font-size: 14px;

         font-weight: 700;

         line-height: 16px;

    }



    .sticky-side-menu__cta {

        font-size: 14px;

        border-radius: 25px;

        padding: 10px 20px !important;

        margin: 6px 8px;

    }



    .sticky-side-menu__hamburger {

        padding: 8px 10px;

    }



    .sticky-side-menu__hamburger span {

        width: 18px;

        height: 2px;

    }



    .sticky-side-menu__nav {

        max-width: 320px;

    }



    .sticky-side-menu__nav-content {

        padding: 60px 24px 24px;

    }



    .sticky-side-menu__menu a {

        font-size: 16px;

    }

}



/* ===== EDITOR PREVIEW ===== */

.editor-styles-wrapper .wp-block-travel-sticky-side-menu {

    position: relative !important;

    min-height: 20px !important; /* Dar espacio para ver el posicionamiento */

    height: auto !important;

    display: block !important;

    padding-bottom: 2px;

}



.editor-styles-wrapper .sticky-side-menu {

    position: absolute !important;

    top: var(--offset-top, 20vh) !important; /* Usar el offset configurado */

    right: 0 !important;

    opacity: 1 !important; /* Siempre visible en editor */

    transform: translateX(0) !important; /* Sin animación en editor */

}





/* Reduce motion for users who prefer it */

@media (prefers-reduced-motion: reduce) {

    .sticky-side-menu,

    .sticky-side-menu__phone,

    .sticky-side-menu__cta,

    .sticky-side-menu__hamburger,

    .sticky-side-menu__nav,

    .sticky-side-menu-overlay,

    .sticky-side-menu__close,

    .sticky-side-menu__menu a {

        transition: none;

    }

}