/**
 * JJDB Flashpack Mobile Menu Stylesheet
 * Inspired by flashpack.com clean minimalist mobile navigation
 */

/* ===================================================
   RESET & DESKTOP HIDING
   =================================================== */
@media (min-width: 922px) {
    #jjdb-mobile-drawer {
        display: none !important;
    }
}

/* ===================================================
   WP ADMIN BAR COMPATIBILITY
   =================================================== */
/* Desktop (> 782px): WP Admin Bar is fixed at 32px height */
@media screen and (min-width: 783px) {
    body.admin-bar.ast-theme-transparent-header #masthead,
    body.admin-bar .ast-theme-transparent-header #masthead,
    body.admin-bar #masthead {
        top: 32px !important;
    }
    body.admin-bar .ast-sticky-active {
        top: 32px !important;
    }
    body.admin-bar .jjdb-drawer {
        top: 32px !important;
        height: calc(100% - 32px) !important;
    }
}

/* Tablet (601px - 782px): WP Admin Bar is fixed at 46px height */
@media screen and (min-width: 601px) and (max-width: 782px) {
    body.admin-bar.ast-theme-transparent-header #masthead,
    body.admin-bar .ast-theme-transparent-header #masthead,
    body.admin-bar #masthead {
        top: 46px !important;
    }
    body.admin-bar .ast-sticky-active {
        top: 46px !important;
    }
    body.admin-bar .jjdb-drawer {
        top: 46px !important;
        height: calc(100% - 46px) !important;
    }
}

/* Small Mobile (<= 600px): WP Admin Bar is absolute (scrolls away on scroll) */
@media screen and (max-width: 600px) {
    body.admin-bar.ast-theme-transparent-header #masthead,
    body.admin-bar .ast-theme-transparent-header #masthead,
    body.admin-bar #masthead {
        top: 46px !important;
        transition: top 0.2s ease, background-color 0.25s ease, box-shadow 0.25s ease !important;
    }
    body.admin-bar .ast-sticky-active {
        top: 46px !important;
    }
    body.admin-bar .jjdb-drawer {
        top: 46px !important;
        height: calc(100% - 46px) !important;
    }

    /* Snaps flush to top: 0 with 0px gap when scrolled down */
    body.admin-bar.jjdb-scrolled #masthead,
    body.admin-bar #masthead.jjdb-header-scrolled {
        top: 0 !important;
    }
    body.admin-bar.jjdb-scrolled .jjdb-drawer,
    body.admin-bar #masthead.jjdb-header-scrolled ~ .jjdb-drawer {
        top: 0 !important;
        height: 100% !important;
    }
}

@media (max-width: 921.99px) {
    /* Hide Astra's default popup drawer */
    #ast-mobile-popup-wrapper,
    #ast-mobile-popup {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* Ensure mobile toggle button and its wrapper are visible */
    .ast-builder-layout-element[data-section="section-header-mobile-trigger"],
    .ast-button-wrap,
    .ast-mobile-header-wrap .ast-button-wrap,
    .ast-mobile-header-wrap .menu-toggle,
    .ast-button-wrap .menu-toggle,
    .main-header-menu-toggle,
    .ast-mobile-menu-trigger-minimal {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        cursor: pointer;
    }

    .menu-toggle .mobile-menu-toggle-icon,
    .main-header-menu-toggle .mobile-menu-toggle-icon {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    /* 1. Hamburger Icon: ALWAYS visible, white, and crisp */
    .menu-toggle .mobile-menu-toggle-icon > .ahfb-svg-iconset:first-child,
    .main-header-menu-toggle .mobile-menu-toggle-icon > .ahfb-svg-iconset:first-child,
    .menu-toggle svg.ast-menu2-svg,
    .main-header-menu-toggle svg.ast-menu2-svg,
    svg.ast-menu2-svg {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: #ffffff !important;
        fill: #ffffff !important;
        width: 24px !important;
        height: 28px !important;
    }

    /* 2. Close Icon: ALWAYS hidden in the header bar */
    .menu-toggle svg.ast-close-svg,
    .main-header-menu-toggle svg.ast-close-svg,
    svg.ast-close-svg,
    .menu-toggle .mobile-menu-toggle-icon > .ahfb-svg-iconset + .ahfb-svg-iconset,
    .main-header-menu-toggle .mobile-menu-toggle-icon > .ahfb-svg-iconset + .ahfb-svg-iconset,
    .menu-toggle .mobile-menu-toggle-icon > .ahfb-svg-iconset:nth-child(2) {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        opacity: 0 !important;
        font-size: 0 !important;
        position: absolute !important;
        left: -9999px !important;
        pointer-events: none !important;
    }
}

/* ===================================================
   DRAWER CONTAINER & OVERLAY
   =================================================== */
.jjdb-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0.35s ease;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.jjdb-drawer.is-active {
    visibility: visible;
    pointer-events: auto;
}

/* Backdrop */
.jjdb-drawer-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.45);
    opacity: 0;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.jjdb-drawer.is-active .jjdb-drawer-backdrop {
    opacity: 1;
}

/* Main Drawer Panel (Right or Fullscreen) */
.jjdb-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 480px;
    height: 100%;
    background-color: #ffffff;
    box-shadow: -8px 0 28px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateX(100%);
    transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
}

.jjdb-drawer.is-active .jjdb-drawer-panel {
    transform: translateX(0);
}

/* ===================================================
   DRAWER HEADER (Logo + Close Button)
   =================================================== */
.jjdb-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px;
    border-bottom: 1px solid #f1f3f5;
    background-color: #ffffff;
    flex-shrink: 0;
    z-index: 10;
}

.jjdb-drawer-logo img {
    height: 38px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    display: block;
}

.jjdb-drawer-close {
    background: none;
    border: none;
    padding: 8px;
    margin: -8px;
    color: #111827;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.jjdb-drawer-close:active {
    transform: scale(0.92);
    background-color: #f3f4f6;
}

/* ===================================================
   SLIDE TRACK & PANELS (Drill-Down Navigation)
   =================================================== */
.jjdb-slide-track {
    position: relative;
    flex: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.jjdb-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}

.jjdb-panel-scroll {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 0 32px 0;
}

/* Slide Positions */
.jjdb-panel-main {
    transform: translateX(0);
    opacity: 1;
    z-index: 1;
}

.jjdb-slide-track.is-subpanel-open .jjdb-panel-main {
    transform: translateX(-35%);
    opacity: 0;
    pointer-events: none;
}

.jjdb-panel-sub {
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
    z-index: 2;
}

.jjdb-panel-sub.is-active {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

/* ===================================================
   LEVEL 1: QUICK ACTION TOP LINK
   =================================================== */
.jjdb-quick-action {
    padding: 8px 22px 14px 22px;
    border-bottom: 1px solid #f1f3f5;
}

.jjdb-quick-link {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #111827;
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    padding: 6px 0;
    transition: color 0.2s ease;
}

.jjdb-quick-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111827;
}

.jjdb-quick-link:hover,
.jjdb-quick-link:active {
    color: #0d9488;
}

/* ===================================================
   LEVEL 1: MAIN NAVIGATION LIST
   =================================================== */
.jjdb-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.jjdb-nav-item {
    border-bottom: 1px solid #f8f9fa;
}

.jjdb-nav-btn,
.jjdb-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 22px;
    background: none;
    border: none;
    color: #111827;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.jjdb-nav-btn:active,
.jjdb-nav-link:active {
    background-color: #f9fafb;
    color: #0d9488;
}

.jjdb-chevron-right {
    display: flex;
    align-items: center;
    color: #9ca3af;
    transition: transform 0.2s ease, color 0.2s ease;
}

.jjdb-nav-btn:active .jjdb-chevron-right {
    color: #111827;
    transform: translateX(2px);
}

/* ===================================================
   LEVEL 2: BACK BUTTON BAR
   =================================================== */
.jjdb-sub-back-bar {
    padding: 10px 18px 14px 18px;
    border-bottom: 1px solid #f1f3f5;
    background-color: #ffffff;
}

.jjdb-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: none;
    color: #4b5563;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 4px;
    border-radius: 6px;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.jjdb-back-btn:active {
    color: #111827;
    background-color: #f3f4f6;
}

.jjdb-back-icon {
    display: flex;
    align-items: center;
}

/* ===================================================
   LEVEL 2: ACCORDION LIST
   =================================================== */
.jjdb-accordion-list {
    margin-top: 4px;
}

.jjdb-acc-item {
    border-bottom: 1px solid #f3f4f6;
}

.jjdb-acc-header,
.jjdb-acc-direct-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 15px 22px;
    background: none;
    border: none;
    color: #1f2937;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color 0.15s ease;
}

.jjdb-acc-header:active,
.jjdb-acc-direct-link:active {
    background-color: #f9fafb;
}

.jjdb-acc-chevron {
    display: flex;
    align-items: center;
    color: #6b7280;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.jjdb-acc-item.is-open .jjdb-acc-chevron {
    transform: rotate(180deg);
    color: #111827;
}

/* Accordion Body */
.jjdb-acc-body {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    background-color: #fcfcfd;
    transition: max-height 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}

.jjdb-acc-item.is-open .jjdb-acc-body {
    opacity: 1;
}

.jjdb-package-list {
    list-style: none;
    margin: 0;
    padding: 6px 0 10px 0;
}

.jjdb-package-item {
    margin: 0;
}

.jjdb-package-link {
    display: block;
    padding: 10px 22px 10px 32px;
    color: #4b5563;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.jjdb-package-link:active {
    color: #0d9488;
    background-color: #f3f4f6;
}

.jjdb-package-overview .jjdb-package-link {
    color: #0d9488;
    font-weight: 600;
    border-bottom: 1px dashed #e5e7eb;
    margin-bottom: 4px;
}

/* ===================================================
   BOTTOM SECTION & DYNAMIC CTA CARD
   =================================================== */
.jjdb-bottom-section {
    padding: 24px 20px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* WhatsApp CS Quick Action */
.jjdb-wa-action {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 4px;
    color: #374151;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: color 0.2s ease;
}

.jjdb-wa-icon {
    display: flex;
    align-items: center;
    color: #10b981;
}

.jjdb-wa-action:hover,
.jjdb-wa-action:active {
    color: #10b981;
}

/* CTA Card (Flashpack Style Pill/Card) */
.jjdb-cta-card {
    background-color: #f7f8fa;
    border: 1px solid #eceef1;
    border-radius: 12px;
    padding: 16px 18px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.jjdb-cta-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    text-align: center;
}

.jjdb-cta-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    letter-spacing: -0.01em;
}

.jjdb-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px 16px;
    background-color: #111827;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    box-sizing: border-box;
    transition: background-color 0.2s ease, transform 0.15s ease;
}

.jjdb-cta-btn:active {
    background-color: #000000;
    transform: scale(0.98);
}

/* Body lock */
body.jjdb-menu-open {
    overflow: hidden !important;
    touch-action: none;
}

/* ===================================================
   GLOBAL STICKY HEADER ON SCROLL (HOMEPAGE & ALL PAGES)
   =================================================== */
#masthead {
    position: fixed !important;
    top: 0;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 9990 !important;
    background-color: #458CAC !important;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* Animate ONLY background and shadow. DO NOT animate backdrop-filter in Safari (prevents scale/warp bug) */
    transition: background-color 0.25s ease, box-shadow 0.25s ease !important;
}

/* Desktop (> 782px) */
@media screen and (min-width: 783px) {
    body.admin-bar #masthead {
        top: 32px !important;
    }
}

/* Tablet (601px - 782px) */
@media screen and (min-width: 601px) and (max-width: 782px) {
    body.admin-bar #masthead {
        top: 46px !important;
    }
}

/* Small Mobile (<= 600px) */
@media screen and (max-width: 600px) {
    body.admin-bar #masthead {
        top: 46px !important;
        transition: top 0.2s ease, background-color 0.25s ease, box-shadow 0.25s ease !important;
    }
    body.admin-bar.jjdb-scrolled #masthead,
    body.admin-bar #masthead.jjdb-header-scrolled {
        top: 0 !important;
    }
}

/* Maintain strictly consistent header dimensions and paddings before and after scroll */
#masthead #ast-desktop-header,
#masthead .ast-main-header-wrap,
#masthead .ast-primary-header-bar,
#masthead .main-header-bar,
#masthead .site-primary-header-wrap,
#masthead .ast-builder-grid-row {
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
    box-sizing: border-box !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

#masthead .main-header-bar-navigation .main-header-menu > .menu-item {
    line-height: 80px !important;
    height: 80px !important;
}

#masthead .main-header-bar-navigation .main-header-menu > .menu-item > .menu-link {
    height: 80px !important;
    line-height: 80px !important;
    display: flex !important;
    align-items: center !important;
    color: #ffffff !important;
    font-weight: 500 !important;
}

#masthead .main-header-bar-navigation .main-header-menu > .menu-item:hover > .menu-link,
#masthead .main-header-bar-navigation .main-header-menu > .menu-item.current-menu-item > .menu-link {
    color: #ffffff !important;
    opacity: 0.9 !important;
}

#masthead .main-header-bar-navigation .main-header-menu > .menu-item > .menu-link .ast-icon {
    fill: #ffffff !important;
    color: #ffffff !important;
}

/* Ensure desktop dropdown submenus stay above content */
.main-header-bar-navigation .main-header-menu .sub-menu {
    z-index: 9995 !important;
}

/* Mobile & Tablet Header (<= 921.99px matching Astra breakpoint) */
@media (max-width: 921.99px) {
    #masthead {
        height: 70px !important;
        min-height: 70px !important;
        max-height: 70px !important;
    }

    #masthead #ast-mobile-header,
    #masthead .ast-mobile-header-wrap,
    #masthead .ast-primary-header-bar,
    #masthead .main-header-bar,
    #masthead .site-primary-header-wrap,
    #masthead .ast-builder-grid-row {
        height: 70px !important;
        min-height: 70px !important;
        max-height: 70px !important;
        box-sizing: border-box !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

/* Prevent Safari flex image re-layout & jumping, ensure only 1 logo shows per device */
#masthead .site-branding,
#masthead .site-logo-img {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    flex-shrink: 0 !important;
}

#masthead .custom-logo-link {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

#masthead .custom-mobile-logo-link {
    display: none !important;
}

@media (max-width: 921.99px) {
    #masthead .custom-logo-link {
        display: none !important;
    }
    #masthead .custom-mobile-logo-link {
        display: flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
    }
}

/* Rigid Logo Sizing across all devices and browsers (Safari fix) */
#masthead .custom-logo-link img,
#masthead .custom-mobile-logo-link img,
#masthead .site-logo-img img {
    height: 52px !important;
    width: auto !important;
    max-height: 52px !important;
    max-width: 65px !important;
    object-fit: contain !important;
    display: block !important;
    flex-shrink: 0 !important;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Inner header bar elements transparent background */
#masthead .ast-primary-header-bar,
#masthead .main-header-bar,
#masthead .ast-mobile-header-wrap,
#masthead #ast-desktop-header,
#masthead #ast-mobile-header,
#masthead .site-primary-header-wrap,
#masthead .ast-builder-grid-row {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
}

/* Homepage Only: Transparent at scroll top 0 */
body.home #masthead {
    background: transparent !important;
    background-color: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Scrolled state on Homepage: solid #458CAC with soft shadow */
body.home #masthead.jjdb-header-scrolled {
    background: rgba(69, 140, 172, 0.98) !important;
    background-color: rgba(69, 140, 172, 0.98) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
}

/* Scrolled state on all other pages: add drop shadow */
#masthead.jjdb-header-scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
}

/* Globally suppress redundant unstyled Astra page titles on all pages */
body.page .entry-header,
body.elementor-page .entry-header,
.ast-header-without-markup {
    display: none !important;
}

/* ===================================================
   MODERN & PROFESSIONAL SOCIAL ICONS & SHARE BUTTONS
   =================================================== */

/* --- 1. SINGLE POST & TOUR "SHARE THE POST" SECTION --- */
.elementor-element-3e437c34,
.jjdb-share-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin: 16px 0 !important;
    padding: 8px 18px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 999px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    width: auto !important;
    max-width: fit-content !important;
}

/* Heading "Share the Post :" */
.elementor-element-7540bccb,
.elementor-element-7540bccb .elementor-heading-title {
    margin: 0 !important;
    padding: 0 !important;
    color: #475569 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
}

/* Share Buttons Grid Container */
.elementor-element-2df9b128,
.elementor-widget-share-buttons {
    margin: 0 !important;
    padding: 0 !important;
}

.elementor-element-2df9b128 .elementor-grid,
.elementor-widget-share-buttons .elementor-grid {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
}

.elementor-element-2df9b128 .elementor-grid-item,
.elementor-widget-share-buttons .elementor-grid-item {
    padding: 0 !important;
    margin: 0 !important;
}

/* Base Share Button Style (Pill/Circle) */
.elementor-element-2df9b128 .elementor-share-btn,
.elementor-widget-share-buttons .elementor-share-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    cursor: pointer !important;
    outline: none !important;
}

.elementor-element-2df9b128 .elementor-share-btn__icon,
.elementor-widget-share-buttons .elementor-share-btn__icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0 !important;
    line-height: 1 !important;
}

.elementor-element-2df9b128 .elementor-share-btn svg,
.elementor-widget-share-buttons .elementor-share-btn svg {
    transition: transform 0.25s ease, fill 0.25s ease !important;
}

/* WhatsApp Share Button */
.elementor-element-2df9b128 .elementor-share-btn_whatsapp,
.elementor-widget-share-buttons .elementor-share-btn_whatsapp {
    background: #e8f8ee !important;
    border: 1px solid #d1f2dd !important;
}
.elementor-element-2df9b128 .elementor-share-btn_whatsapp svg,
.elementor-widget-share-buttons .elementor-share-btn_whatsapp svg {
    fill: #25d366 !important;
    width: 18px !important;
    height: 18px !important;
}
.elementor-element-2df9b128 .elementor-share-btn_whatsapp:hover,
.elementor-element-2df9b128 .elementor-share-btn_whatsapp:active,
.elementor-widget-share-buttons .elementor-share-btn_whatsapp:hover {
    background: #25d366 !important;
    border-color: #25d366 !important;
    transform: translateY(-2px) scale(1.06) !important;
    box-shadow: 0 6px 16px rgba(37, 211, 102, 0.35) !important;
}
.elementor-element-2df9b128 .elementor-share-btn_whatsapp:hover svg,
.elementor-element-2df9b128 .elementor-share-btn_whatsapp:active svg,
.elementor-widget-share-buttons .elementor-share-btn_whatsapp:hover svg {
    fill: #ffffff !important;
    transform: scale(1.05);
}

/* Twitter / X Share Button */
.elementor-element-2df9b128 .elementor-share-btn_twitter,
.elementor-widget-share-buttons .elementor-share-btn_twitter {
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
}
.elementor-element-2df9b128 .elementor-share-btn_twitter svg,
.elementor-widget-share-buttons .elementor-share-btn_twitter svg {
    fill: #0f172a !important;
    width: 16px !important;
    height: 16px !important;
}
.elementor-element-2df9b128 .elementor-share-btn_twitter:hover,
.elementor-element-2df9b128 .elementor-share-btn_twitter:active,
.elementor-widget-share-buttons .elementor-share-btn_twitter:hover {
    background: #000000 !important;
    border-color: #000000 !important;
    transform: translateY(-2px) scale(1.06) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28) !important;
}
.elementor-element-2df9b128 .elementor-share-btn_twitter:hover svg,
.elementor-element-2df9b128 .elementor-share-btn_twitter:active svg,
.elementor-widget-share-buttons .elementor-share-btn_twitter:hover svg {
    fill: #ffffff !important;
    transform: scale(1.05);
}

/* Threads Share Button */
.elementor-element-2df9b128 .elementor-share-btn_threads,
.elementor-widget-share-buttons .elementor-share-btn_threads {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
}
.elementor-element-2df9b128 .elementor-share-btn_threads svg,
.elementor-widget-share-buttons .elementor-share-btn_threads svg {
    fill: #111827 !important;
    width: 16px !important;
    height: 16px !important;
}
.elementor-element-2df9b128 .elementor-share-btn_threads:hover,
.elementor-element-2df9b128 .elementor-share-btn_threads:active,
.elementor-widget-share-buttons .elementor-share-btn_threads:hover {
    background: #111827 !important;
    border-color: #111827 !important;
    transform: translateY(-2px) scale(1.06) !important;
    box-shadow: 0 6px 16px rgba(17, 24, 39, 0.25) !important;
}
.elementor-element-2df9b128 .elementor-share-btn_threads:hover svg,
.elementor-element-2df9b128 .elementor-share-btn_threads:active svg,
.elementor-widget-share-buttons .elementor-share-btn_threads:hover svg {
    fill: #ffffff !important;
    transform: scale(1.05);
}

/* Facebook Share Button (if present) */
.elementor-element-2df9b128 .elementor-share-btn_facebook,
.elementor-widget-share-buttons .elementor-share-btn_facebook {
    background: #ebf3ff !important;
    border: 1px solid #d6e6fe !important;
}
.elementor-element-2df9b128 .elementor-share-btn_facebook svg,
.elementor-widget-share-buttons .elementor-share-btn_facebook svg {
    fill: #1877f2 !important;
    width: 17px !important;
    height: 17px !important;
}
.elementor-element-2df9b128 .elementor-share-btn_facebook:hover,
.elementor-element-2df9b128 .elementor-share-btn_facebook:active,
.elementor-widget-share-buttons .elementor-share-btn_facebook:hover {
    background: #1877f2 !important;
    border-color: #1877f2 !important;
    transform: translateY(-2px) scale(1.06) !important;
    box-shadow: 0 6px 16px rgba(24, 119, 242, 0.35) !important;
}
.elementor-element-2df9b128 .elementor-share-btn_facebook:hover svg,
.elementor-element-2df9b128 .elementor-share-btn_facebook:active svg,
.elementor-widget-share-buttons .elementor-share-btn_facebook:hover svg {
    fill: #ffffff !important;
}

@media (max-width: 480px) {
    .elementor-element-3e437c34,
    .jjdb-share-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        justify-content: space-between !important;
        border-radius: 14px !important;
        padding: 8px 14px !important;
        box-sizing: border-box !important;
    }
}


/* --- 2. GLOBAL FOOTER SOCIAL ICONS (Facebook, Instagram, X) --- */
.elementor-widget-social-icons.elementor-element-e8408cf,
.elementor-location-footer .elementor-widget-social-icons {
    margin: 18px 0 !important;
    padding: 0 !important;
}

.elementor-widget-social-icons.elementor-element-e8408cf .elementor-social-icons-wrapper,
.elementor-location-footer .elementor-widget-social-icons .elementor-social-icons-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
}

.elementor-widget-social-icons.elementor-element-e8408cf .elementor-grid-item,
.elementor-location-footer .elementor-widget-social-icons .elementor-grid-item {
    margin: 0 !important;
    padding: 0 !important;
}

/* Modern Frosted Translucent Glass Circle on Navy Footer */
.elementor-widget-social-icons.elementor-element-e8408cf .elementor-social-icon,
.elementor-location-footer .elementor-widget-social-icons .elementor-social-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    box-sizing: border-box !important;
}

.elementor-widget-social-icons.elementor-element-e8408cf .elementor-social-icon svg,
.elementor-location-footer .elementor-widget-social-icons .elementor-social-icon svg {
    width: 19px !important;
    height: 19px !important;
    fill: #ffffff !important;
    transition: transform 0.28s ease, fill 0.28s ease !important;
}

/* Facebook Hover State */
.elementor-widget-social-icons.elementor-element-e8408cf .elementor-social-icon-facebook:hover,
.elementor-location-footer .elementor-widget-social-icons .elementor-social-icon-facebook:hover {
    background: #1877f2 !important;
    border-color: #1877f2 !important;
    transform: translateY(-3px) scale(1.08) !important;
    box-shadow: 0 8px 24px rgba(24, 119, 242, 0.45) !important;
}
.elementor-widget-social-icons.elementor-element-e8408cf .elementor-social-icon-facebook:hover svg,
.elementor-location-footer .elementor-widget-social-icons .elementor-social-icon-facebook:hover svg {
    transform: scale(1.06);
    fill: #ffffff !important;
}

/* Instagram Hover State (Official Vibrant Gradient) */
.elementor-widget-social-icons.elementor-element-e8408cf .elementor-social-icon-instagram:hover,
.elementor-location-footer .elementor-widget-social-icons .elementor-social-icon-instagram:hover {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #dc2743 60%, #285aeb 90%) !important;
    border-color: transparent !important;
    transform: translateY(-3px) scale(1.08) !important;
    box-shadow: 0 8px 24px rgba(220, 39, 67, 0.45) !important;
}
.elementor-widget-social-icons.elementor-element-e8408cf .elementor-social-icon-instagram:hover svg,
.elementor-location-footer .elementor-widget-social-icons .elementor-social-icon-instagram:hover svg {
    transform: scale(1.06);
    fill: #ffffff !important;
}

/* X (Twitter) Hover State */
.elementor-widget-social-icons.elementor-element-e8408cf .elementor-social-icon-x-twitter:hover,
.elementor-widget-social-icons.elementor-element-e8408cf .elementor-social-icon-twitter:hover,
.elementor-location-footer .elementor-widget-social-icons .elementor-social-icon-x-twitter:hover,
.elementor-location-footer .elementor-widget-social-icons .elementor-social-icon-twitter:hover {
    background: #ffffff !important;
    border-color: #ffffff !important;
    transform: translateY(-3px) scale(1.08) !important;
    box-shadow: 0 8px 24px rgba(255, 255, 255, 0.3) !important;
}
.elementor-widget-social-icons.elementor-element-e8408cf .elementor-social-icon-x-twitter:hover svg,
.elementor-widget-social-icons.elementor-element-e8408cf .elementor-social-icon-twitter:hover svg,
.elementor-location-footer .elementor-widget-social-icons .elementor-social-icon-x-twitter:hover svg,
.elementor-location-footer .elementor-widget-social-icons .elementor-social-icon-twitter:hover svg {
    transform: scale(1.06);
    fill: #000000 !important;
}

/* YouTube (if present in footer) */
.elementor-widget-social-icons.elementor-element-e8408cf .elementor-social-icon-youtube:hover,
.elementor-location-footer .elementor-widget-social-icons .elementor-social-icon-youtube:hover {
    background: #ff0000 !important;
    border-color: #ff0000 !important;
    transform: translateY(-3px) scale(1.08) !important;
    box-shadow: 0 8px 24px rgba(255, 0, 0, 0.45) !important;
}
.elementor-widget-social-icons.elementor-element-e8408cf .elementor-social-icon-youtube:hover svg,
.elementor-location-footer .elementor-widget-social-icons .elementor-social-icon-youtube:hover svg {
    fill: #ffffff !important;
}

/* ==========================================================================
   SINGLE POST & CATALOG LAYOUT: FULL WIDTH MAIN CONTENT
   Move "Paket Menarik Banyuwangi" sidebar to the bottom
   ========================================================================== */

/* Hide empty blue spacer container from Elementor template */
.elementor-3652 .elementor-element.elementor-element-9759e73,
.elementor-element.elementor-element-9759e73 {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* All single posts & catalog (Car Rental, Tour Posts, etc.): 100% consistent spacing below solid fixed header */
.single-post #content,
.elementor-page-3652 #content,
body.jjdb-is-tour-post #content {
    padding-top: 0 !important;
}

.elementor-3652 .elementor-element.elementor-element-38ac35a,
.elementor-element.elementor-element-38ac35a {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 1140px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 104px !important; /* 80px fixed desktop header + 24px consistent breathing space */
    box-sizing: border-box !important;
}

@media (max-width: 921.99px) {
    .elementor-3652 .elementor-element.elementor-element-38ac35a,
    .elementor-element.elementor-element-38ac35a {
        padding-top: 92px !important; /* 70px fixed mobile header + 22px consistent breathing space */
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* Spacing when WP Admin Bar is present */
@media screen and (min-width: 783px) {
    body.admin-bar .elementor-3652 .elementor-element.elementor-element-38ac35a,
    body.admin-bar .elementor-element.elementor-element-38ac35a {
        padding-top: 136px !important; /* 32px admin bar + 80px header + 24px space */
    }
}

@media screen and (max-width: 782px) {
    body.admin-bar .elementor-3652 .elementor-element.elementor-element-38ac35a,
    body.admin-bar .elementor-element.elementor-element-38ac35a {
        padding-top: 138px !important; /* 46px admin bar + 70px header + 22px space */
    }
}

/* Main Content Column: Expands to 100% Full Width */
.elementor-3652 .elementor-element.elementor-element-988aaf8,
.elementor-element.elementor-element-38ac35a > .elementor-element-988aaf8 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
}

/* Featured image in full width - Preserve complete graphic without cropping */
.elementor-3652 .elementor-element.elementor-element-65977c8e,
.elementor-element.elementor-element-65977c8e,
.elementor-element-988aaf8 > .elementor-widget-theme-post-featured-image {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}

.elementor-3652 .elementor-element.elementor-element-65977c8e .elementor-widget-container,
.elementor-element.elementor-element-65977c8e .elementor-widget-container,
.elementor-element-988aaf8 > .elementor-widget-theme-post-featured-image .elementor-widget-container {
    width: 100% !important;
    height: auto !important;
}

.elementor-3652 .elementor-element.elementor-element-65977c8e img,
.elementor-element.elementor-element-65977c8e img,
.elementor-element-988aaf8 > .elementor-widget-theme-post-featured-image img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    object-fit: contain !important;
    object-position: top center !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    display: block !important;
}

/* Sidebar Container: Moved to bottom as full-width recommendation section */
.elementor-3652 .elementor-element.elementor-element-5e13c32,
.elementor-element.elementor-element-38ac35a > .elementor-element-5e13c32 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    margin-top: 56px !important;
    padding-top: 40px !important;
    border-top: 2px dashed #e2e8f0 !important;
    box-sizing: border-box !important;
}

/* Paket Menarik inner container: Horizontal responsive grid */
.elementor-3652 .elementor-element.elementor-element-5e13c32 .elementor-element-a803c2b,
.elementor-element.elementor-element-5e13c32 .elementor-element-a803c2b {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    width: 100% !important;
    justify-content: flex-start !important;
}

/* Section Header: Paket Menarik Banyuwangi */
.elementor-3652 .elementor-element.elementor-element-5e13c32 .elementor-element-a803c2b > .elementor-element-d4f0575,
.elementor-element.elementor-element-5e13c32 .elementor-element-a803c2b > .elementor-element-d4f0575 {
    width: 100% !important;
    flex: 1 1 100% !important;
    margin-bottom: 16px !important;
    text-align: center !important;
    background: transparent !important;
    padding: 0 !important;
}

.elementor-3652 .elementor-element.elementor-element-5e13c32 .elementor-element-a803c2b > .elementor-element-d4f0575 .elementor-heading-title,
.elementor-element.elementor-element-5e13c32 .elementor-element-a803c2b > .elementor-element-d4f0575 .elementor-heading-title {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.02em !important;
    text-shadow: none !important;
}

/* 6 Recommendation Cards: 3 columns on desktop */
.elementor-3652 .elementor-element.elementor-element-5e13c32 .elementor-element-a803c2b > .elementor-widget-call-to-action,
.elementor-element.elementor-element-5e13c32 .elementor-element-a803c2b > .elementor-widget-call-to-action {
    flex: 0 0 calc(33.333% - 14px) !important;
    max-width: calc(33.333% - 14px) !important;
    min-height: 200px !important;
    margin: 0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.elementor-3652 .elementor-element.elementor-element-5e13c32 .elementor-element-a803c2b > .elementor-widget-call-to-action:hover,
.elementor-element.elementor-element-5e13c32 .elementor-element-a803c2b > .elementor-widget-call-to-action:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12) !important;
}

/* Tablet (<= 921.99px): 2 columns */
@media (max-width: 921.99px) {
    .elementor-3652 .elementor-element.elementor-element-5e13c32 .elementor-element-a803c2b > .elementor-widget-call-to-action,
    .elementor-element.elementor-element-5e13c32 .elementor-element-a803c2b > .elementor-widget-call-to-action {
        flex: 0 0 calc(50% - 10px) !important;
        max-width: calc(50% - 10px) !important;
    }
}

/* Mobile (<= 600px): 1 column */
@media (max-width: 600px) {
    .elementor-3652 .elementor-element.elementor-element-5e13c32 .elementor-element-a803c2b > .elementor-widget-call-to-action,
    .elementor-element.elementor-element-5e13c32 .elementor-element-a803c2b > .elementor-widget-call-to-action {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }
}




