body.home {
    @media (max-width: 767px) {
        overflow: hidden;
    }
}

/* Header & Mobile Nav Menu Z-Index Fix (Tampil sempurna di posisi scroll paling atas) */
header,
[data-elementor-type="header"],
.elementor-location-header,
.elementor-element-4c1e33e,
.elementor-element-c6395a2,
.elementor-element-ffbc6a6 {
    position: relative;
    z-index: 99999 !important;
}

.elementor-nav-menu--dropdown.elementor-nav-menu__container {
    z-index: 99999 !important;
}

.review-container,
.elementor-element.elementor-element-20b9611,
.elementor-element.elementor-element-1554407 {
	max-height: none !important;
    overflow: visible !important;
}

/* ==========================================================================
   Alpine Testimonials Slider - Equal Height & Dynamic Scrollable Description
   ========================================================================== */
.alpine-testimonials {
    overflow: visible !important;
}

.alpine-testimonials .swiper,
.alpine-testimonials .swiper-container,
.alpine-testimonials .qodef-qi-swiper-container {
    overflow: hidden !important;
    visibility: visible !important;
}

.alpine-testimonials .swiper-wrapper {
    align-items: stretch !important;
}

.alpine-testimonials .swiper-slide {
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
}

.alpine-testimonials .qodef-e-inner {
    width: 100% !important;
    height: 100% !important;
    min-height: 480px !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
}

.alpine-testimonials .qodef-e-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
}

.alpine-testimonials .qodef-e-author {
    margin-top: auto;
}

/* Description mengisi seluruh sisa space kartu secara dinamis */
.alpine-testimonials .qodef-e-text {
    flex: 1 1 0;
    min-height: 180px;
    height: auto;
    max-height: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 12px;
    scrollbar-width: thin;
    scrollbar-color: #00A3FF transparent;
}

/* Scrollbar styling */
.alpine-testimonials .qodef-e-text::-webkit-scrollbar {
    width: 4px;
}

.alpine-testimonials .qodef-e-text::-webkit-scrollbar-track {
    background: transparent;
}

.alpine-testimonials .qodef-e-text::-webkit-scrollbar-thumb {
    background-color: #00A3FF;
    border-radius: 4px;
}

@media (max-width: 767px) {
    .review-container,
    .elementor-element.elementor-element-20b9611,
    .elementor-element.elementor-element-1554407 {
        max-height: none !important;
        overflow: visible !important;
    }
    .alpine-testimonials .qodef-e-inner {
        min-height: 380px !important;
        padding: 30px 20px !important;
    }
    .alpine-testimonials .qodef-e-text {
        min-height: 100px !important;
    }
}

/* ==========================================================================
   Pricing comparison tables (The Plus Addons "tp-table", .ypf-table-price)
   --------------------------------------------------------------------------
   The tables use table-layout:auto, so columns are sized from their content.
   The label column ("Challenge Period", "Minimum Trading Days", ...) is much
   longer than the value column, so on mobile it took ~69% of the 350px table
   and squeezed the values into ~31% ("Up To 100%", "Every Thursday" wrapped).
   Giving each cell width:50% under auto layout splits the table evenly.

   Mobile only - the columns are close enough to even from 768px up, so the
   larger breakpoints keep Elementor's own sizing untouched.

   Scoped with :not(:has(...)) to two-column tables only - the four-column
   challenge tables ("1 Phase / 2 Phase / Funded") are wider than a phone and
   keep their content sizing plus the .tp-table-mobresswipe horizontal swipe.
   ========================================================================== */
@media (max-width: 767px) {
    .ypf-table-price .plus-table:not(:has(.plus-table-col ~ .plus-table-col ~ .plus-table-col)) .plus-table-col {
        width: 73%;
    }

    .tp-tooltip-on-icon {
        margin-left: 5px !important;
    }

    /* The label spans are inline-block, so once the narrower column makes a
       label wrap the tooltip icon no longer fits beside it and drops onto its
       own line. Inline flow keeps the icon next to the last word. */
    .ypf-table-price .plus-table:not(:has(.plus-table-col ~ .plus-table-col ~ .plus-table-col)) td.plus-table-col .plus-table__text,
    .ypf-table-price .plus-table:not(:has(.plus-table-col ~ .plus-table-col ~ .plus-table-col)) td.plus-table-col .plus-table__text-inner {
        display: inline;
    }
}

/* Newsletter / Community CTA (the row is tagged .alpn-newsletter-cta by the
   YPF - Newsletter CTA Tablet Layout mu-plugin).

   Elementor only breaks this two-column row onto separate lines at the mobile
   breakpoint, so from 768px to 1024px the columns stay side by side at roughly
   62%/38% of a section that is itself 65% of the viewport, while both headings
   keep their 50px desktop size - "Newsletter" and "Community" no longer fit the
   columns holding them and spill over the neighbouring column and the section
   edge. Stack the halves the way the mobile breakpoint already does, and move
   the rounded corners to the edges that are now the outer ones. */
@media (min-width: 768px) and (max-width: 1024px) {
    .e-con.alpn-newsletter-cta.e-con-full,
    .e-con.alpn-newsletter-cta.e-con-boxed > .e-con-inner {
        flex-wrap: wrap;
    }

    .alpn-newsletter-cta > .e-con,
    .alpn-newsletter-cta > .e-con-inner > .e-con {
        --width: 100% !important;
    }

    .alpn-newsletter-cta > .e-con:first-child,
    .alpn-newsletter-cta > .e-con-inner > .e-con:first-child {
        --border-radius: 37px 37px 0 0 !important;
    }

    .alpn-newsletter-cta > .e-con:last-child,
    .alpn-newsletter-cta > .e-con-inner > .e-con:last-child {
        --border-radius: 0 0 37px 37px !important;
    }
}