/* ==========================================================
   Cecilia Arthur – Megamenu Faciales
   #menu-item-64132 (Faciales) inside Tratamientos dropdown.
   Mega panel appears to the right with invisible hover bridge.
   ========================================================== */

/* ---- Desktop only (> 1024 px) ---- */
@media (min-width: 1025px) {

    /* Keep Faciales as positioning reference */
    #menu-item-64132 {
        position: relative !important;
    }

    /* Allow overflow on Tratamientos dropdown */
    #menu-item-64135 > ul.sub-menu {
        overflow: visible !important;
    }

    /* ============================================
       THE MEGA PANEL
       ============================================ */
    #menu-item-64132 > ul.sub-menu {
        /* Position: to the right of the Tratamientos dropdown */
        position: absolute !important;
        left: calc(100% + 2px) !important;
        top: -12px !important;
        right: auto !important;
        bottom: auto !important;

        /* Size */
        width: 720px !important;
        max-width: 720px !important;
        min-width: 720px !important;

        /* Grid: 3 columns */
        display: none;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: auto;
        gap: 0 8px;

        /* SOLID background — no transparency */
        background: #ffffff !important;
        background-color: #ffffff !important;
        border-left: 3px solid #DEAD9F !important;
        border-radius: 0 12px 12px 0 !important;
        box-shadow: 8px 8px 40px rgba(0, 0, 0, 0.12),
                    2px 2px 12px rgba(0, 0, 0, 0.06) !important;
        padding: 20px 24px 22px 20px !important;
        z-index: 99999 !important;

        /* Entrance animation */
        opacity: 0;
        visibility: hidden;
        transform: translateX(-8px);
        transition: opacity 0.25s ease,
                    transform 0.25s ease,
                    visibility 0.25s ease;
    }

    /* Invisible bridge to prevent hover gap */
    #menu-item-64132 > ul.sub-menu::before {
        content: '' !important;
        display: block !important;
        position: absolute !important;
        left: -20px !important;
        top: 0 !important;
        width: 20px !important;
        height: 100% !important;
        background: transparent !important;
    }

    /* Show on hover */
    #menu-item-64132:hover > ul.sub-menu,
    #menu-item-64132.open > ul.sub-menu {
        display: grid !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateX(0) !important;
    }

    /* ============================================
       ITEMS INSIDE THE MEGA PANEL
       ============================================ */
    #menu-item-64132 > ul.sub-menu > li {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        border: none !important;
        background: transparent !important;
        display: block !important;
    }

    #menu-item-64132 > ul.sub-menu > li > a {
        display: flex !important;
        align-items: center !important;
        padding: 9px 12px !important;
        margin: 1px 2px !important;
        color: #3a3a3a !important;
        font-family: "Inter", sans-serif !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        line-height: 1.5 !important;
        letter-spacing: 0.01em !important;
        border-radius: 8px !important;
        background: transparent !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        transition: all 0.2s ease !important;
    }

    /* Hover */
    #menu-item-64132 > ul.sub-menu > li > a:hover {
        background: #faf0ec !important;
        color: #b8856f !important;
        padding-left: 18px !important;
    }

    /* Current page */
    #menu-item-64132 > ul.sub-menu > li.current-menu-item > a {
        background: #faf0ec !important;
        color: #DEAD9F !important;
        font-weight: 500 !important;
    }

    /* Arrow rotation on Faciales */
    #menu-item-64132 > a > i,
    #menu-item-64132 > a > svg {
        transition: transform 0.3s ease !important;
    }

    #menu-item-64132:hover > a > i,
    #menu-item-64132:hover > a > svg {
        transform: rotate(-90deg) !important;
    }
}

/* ---- Tablet / Mobile (≤ 1024 px) ---- */
@media (max-width: 1024px) {
    #menu-item-64132 > ul.sub-menu > li > a {
        padding: 10px 15px 10px 24px !important;
        font-size: 14px !important;
    }
}

/* ==========================================================
   Fixed Header on Scroll
   - .elementor-element-2e2a0377 = topbar (hidden on tablet/mobile)
   - .elementor-element-2d977d9e = main navbar (white)
   ========================================================== */
.elementor-location-header {
    position: sticky !important;
    top: 0 !important;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 9998 !important;
    background: #ffffff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.25s ease;
}

/* Admin bar offset */
.admin-bar .elementor-location-header {
    top: 32px !important;
}

@media (max-width: 782px) {
    .admin-bar .elementor-location-header {
        top: 46px !important;
    }
}

/* Ensure the megamenu still appears above the sticky header */
#menu-item-64132 > ul.sub-menu {
    z-index: 99999 !important;
}

/* ==========================================================
   Hero Header – Button spacing on mobile
   Columns: .elementor-element-692a0734 (Valoración Gratuita)
            .elementor-element-14e559a (Ver Tratamientos)
   ========================================================== */
@media (max-width: 767px) {
    /* Parent columns: full width */
    .elementor-element.elementor-element-1fcf6f91,
    .elementor-element.elementor-element-14e559a {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Column inner padding: reset so both start at the same left edge */
    .elementor-element.elementor-element-1fcf6f91 > .elementor-element-populated,
    .elementor-element.elementor-element-14e559a > .elementor-element-populated {
        align-items: flex-start !important;
        text-align: left !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Both buttons: left-aligned, same margins */
    .elementor-element.elementor-element-692a0734,
    .elementor-element.elementor-element-122b90c,
    .elementor-element.elementor-element-692a0734.elementor-align-left,
    .elementor-element.elementor-element-122b90c.elementor-align-left {
        text-align: left !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Equal-sized buttons */
    .elementor-element.elementor-element-692a0734 .elementor-button,
    .elementor-element.elementor-element-122b90c .elementor-button {
        display: inline-block !important;
        min-width: 240px !important;
        width: 240px !important;
        box-sizing: border-box !important;
    }

    /* Spacing between stacked buttons */
    .elementor-element.elementor-element-14e559a {
        margin-top: 10px !important;
    }
}

/* ==========================================================
   Cookie Consent banner – mobile overflow fix
   ========================================================== */
@media (max-width: 768px) {
    #cces-overlay.cces-overlay {
        padding: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    #cces-banner.cces-banner {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        min-width: 0 !important;
        margin: 0 12px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        border-radius: 12px 12px 0 0 !important;
    }

    .cces-banner-inner {
        padding: 20px 16px !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
    }

    .cces-banner *,
    .cces-banner-inner * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .cces-actions {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .cces-btn {
        width: 100% !important;
        text-align: center !important;
        white-space: normal !important;
    }

    /* Settings modal too */
    .cces-settings {
        padding: 10px !important;
    }

    .cces-settings-inner {
        max-width: calc(100vw - 20px) !important;
    }
}