/*
 * ==========================================================
 * ZELORA88 — HOMEPAGE REDESIGN V1
 * Visual Foundation
 *
 * Scope:
 * - Public homepage only
 * - Casino provider section
 * - Slot provider section
 * - Footer presentation
 *
 * No SEO content modification.
 * No Auth/Login logic modification.
 * ==========================================================
 */


/* ==========================================================
   1. DESIGN TOKENS
   ========================================================== */

:root {
    --z88-home-bg:
        #05070d;

    --z88-home-bg-soft:
        #090d16;

    --z88-home-surface:
        rgba(12, 17, 27, .92);

    --z88-home-surface-2:
        rgba(17, 23, 36, .90);

    --z88-home-border:
        rgba(255, 255, 255, .10);

    --z88-home-border-hot:
        rgba(213, 37, 48, .42);

    --z88-home-red:
        #d52530;

    --z88-home-red-bright:
        #f0444d;

    --z88-home-gold:
        #e1bb69;

    --z88-home-text:
        #f7f8fb;

    --z88-home-muted:
        #aab1bf;

    --z88-home-radius:
        20px;

    --z88-home-radius-card:
        15px;

    --z88-home-shadow:
        0 18px 48px rgba(0, 0, 0, .34);

    --z88-home-shadow-card:
        0 10px 28px rgba(0, 0, 0, .28);
}


/* ==========================================================
   2. HOMEPAGE BASE
   ========================================================== */

html {
    background:
        var(--z88-home-bg);
}


body {
    background-color:
        var(--z88-home-bg)
        !important;

    color:
        var(--z88-home-text);
}


/*
 * Main public game area.
 * ไม่แก้โครง HTML เดิม
 */

.sectiongame {
    position:
        relative;

    isolation:
        isolate;
}


/* ==========================================================
   3. PROVIDER SECTIONS
   Casino = 754efac
   Slot   = 342f784
   ========================================================== */

.elementor-element-754efac,
.elementor-element-342f784 {
    position:
        relative
        !important;

    margin-top:
        22px
        !important;

    margin-bottom:
        22px
        !important;

    padding:
        24px 18px 30px
        !important;

    border:
        1px solid
        var(--z88-home-border)
        !important;

    border-radius:
        var(--z88-home-radius)
        !important;

    background:
        linear-gradient(
            145deg,
            rgba(15, 20, 32, .94) 0%,
            rgba(8, 12, 20, .94) 58%,
            rgba(12, 14, 21, .96) 100%
        )
        !important;

    box-shadow:
        var(--z88-home-shadow)
        !important;

    overflow:
        hidden;
}


/*
 * Red accent bar
 */

.elementor-element-754efac::before,
.elementor-element-342f784::before {
    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        22px;

    right:
        22px;

    height:
        2px;

    z-index:
        2;

    pointer-events:
        none;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            var(--z88-home-red) 18%,
            var(--z88-home-gold) 50%,
            var(--z88-home-red) 82%,
            transparent 100%
        );

    opacity:
        .88;
}


/*
 * Very light section glow.
 * ไม่มี filter / blur
 */

.elementor-element-754efac::after,
.elementor-element-342f784::after {
    content:
        "";

    position:
        absolute;

    width:
        210px;

    height:
        210px;

    top:
        -120px;

    right:
        -70px;

    z-index:
        0;

    pointer-events:
        none;

    border-radius:
        999px;

    background:
        radial-gradient(
            circle,
            rgba(213, 37, 48, .14) 0%,
            rgba(213, 37, 48, 0) 72%
        );
}


.elementor-element-754efac > *,
.elementor-element-342f784 > * {
    position:
        relative;

    z-index:
        1;
}


/* ==========================================================
   4. SECTION HEADINGS
   ========================================================== */

.elementor-element-6f161b9 .elementor-heading-title,
.elementor-element-033915c .elementor-heading-title {
    color:
        var(--z88-home-text)
        !important;

    font-weight:
        800
        !important;

    letter-spacing:
        .2px;

    text-shadow:
        0 2px 18px rgba(0, 0, 0, .32);
}


/*
 * Decorative small underline
 */

.elementor-element-6f161b9 .elementor-heading-title::after,
.elementor-element-033915c .elementor-heading-title::after {
    content:
        "";

    display:
        block;

    width:
        58px;

    height:
        3px;

    margin:
        10px auto 0;

    border-radius:
        10px;

    background:
        linear-gradient(
            90deg,
            var(--z88-home-red),
            var(--z88-home-gold)
        );
}


/* ==========================================================
   5. PROVIDER GRID WRAPPERS
   ========================================================== */

.casino-provider-v2-gallery,
.elementor-element-782b547 .uael-img-gallery-wrap {
    position:
        relative;
}


/* ==========================================================
   6. PROVIDER CARDS
   ========================================================== */

.casino-provider-v2-gallery .uael-grid-item-content,
.elementor-element-782b547 .uael-grid-item-content {
    position:
        relative
        !important;

    overflow:
        hidden
        !important;

    border:
        1px solid
        var(--z88-home-border)
        !important;

    border-radius:
        var(--z88-home-radius-card)
        !important;

    background:
        linear-gradient(
            160deg,
            rgba(24, 30, 43, .96),
            rgba(9, 13, 22, .98)
        )
        !important;

    box-shadow:
        var(--z88-home-shadow-card)
        !important;

    transform:
        translateZ(0);

    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease
        !important;
}


@media (hover: hover) and (pointer: fine) {

    .casino-provider-v2-gallery .uael-grid-item-content:hover,
    .elementor-element-782b547 .uael-grid-item-content:hover {
        transform:
            translateY(-3px)
            !important;

        border-color:
            var(--z88-home-border-hot)
            !important;

        box-shadow:
            0 14px 34px
            rgba(0, 0, 0, .38)
            !important;
    }

}


/* ==========================================================
   7. PROVIDER IMAGES
   ========================================================== */

.casino-provider-v2-gallery img,
.elementor-element-782b547 .uael-grid-item img {
    display:
        block;

    width:
        100%
        !important;

    border-radius:
        calc(
            var(--z88-home-radius-card) - 2px
        )
        !important;

    transform:
        translateZ(0);

    filter:
        none
        !important;

    transition:
        transform .22s ease
        !important;
}


@media (hover: hover) and (pointer: fine) {

    .casino-provider-v2-gallery .uael-grid-item-content:hover img,
    .elementor-element-782b547 .uael-grid-item-content:hover img {
        transform:
            scale(1.018)
            !important;
    }

}


/* ==========================================================
   8. REMOVE OLD PROVIDER OVERLAY
   ========================================================== */

.casino-provider-v2-gallery .uael-grid-img-overlay,
.elementor-element-782b547 .uael-grid-img-overlay {
    display:
        none
        !important;
}


/* ==========================================================
   9. SEO CONTENT
   IMPORTANT:
   Styling only.
   Text / heading / schema are untouched.
   ========================================================== */

#zelora-relate-seo-content-v1 {
    position:
        relative;

    margin-top:
        34px
        !important;

    border-top:
        1px solid
        rgba(255, 255, 255, .08);

    background:
        transparent
        !important;
}


/* ==========================================================
   10. FOOTER VISUAL FOUNDATION
   ========================================================== */

footer {
    position:
        relative;

    margin-top:
        36px;

    background:
        linear-gradient(
            180deg,
            rgba(7, 10, 17, .96) 0%,
            #04060a 100%
        )
        !important;

    border-top:
        1px solid
        rgba(225, 187, 105, .14);
}


footer::before {
    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        50%;

    width:
        min(640px, 70%);

    height:
        1px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(225, 187, 105, .70),
            rgba(213, 37, 48, .72),
            transparent
        );

    pointer-events:
        none;
}


#b59f240,
#97f8a74 {
    background:
        transparent
        !important;
}


/* ==========================================================
   11. MOBILE
   ========================================================== */

@media (max-width: 767px) {

    .elementor-element-754efac,
    .elementor-element-342f784 {
        margin-top:
            14px
            !important;

        margin-bottom:
            14px
            !important;

        padding:
            18px 10px 22px
            !important;

        border-radius:
            16px
            !important;

        box-shadow:
            0 10px 26px
            rgba(0, 0, 0, .26)
            !important;
    }


    .elementor-element-754efac::before,
    .elementor-element-342f784::before {
        left:
            14px;

        right:
            14px;
    }


    /*
     * Mobile:
     * หยุด hover effects/transition เพิ่มเติม
     * เพื่อรักษาความลื่น
     */

    .casino-provider-v2-gallery .uael-grid-item-content,
    .elementor-element-782b547 .uael-grid-item-content {
        transition:
            none
            !important;

        box-shadow:
            0 6px 16px
            rgba(0, 0, 0, .23)
            !important;
    }


    .casino-provider-v2-gallery img,
    .elementor-element-782b547 .uael-grid-item img {
        transition:
            none
            !important;
    }


    footer {
        margin-top:
            24px;
    }

}


/* ==========================================================
   12. REDUCED MOTION
   ========================================================== */

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

    .casino-provider-v2-gallery *,
    .elementor-element-782b547 * {
        transition:
            none
            !important;

        animation:
            none
            !important;
    }

}

/* END ZELORA88 HOMEPAGE REDESIGN V1 */

/* BEGIN ZELORA88_HOME_3B_HEADER_SIDEBAR */


/* ==========================================================
   HEADER / TOP NAV
   ========================================================== */

.menu-menu-right-container {
    position:
        relative;

    z-index:
        50;

    padding:
        8px 10px;

    border-radius:
        0 0 0 18px;

    background:
        linear-gradient(
            180deg,
            rgba(7, 9, 14, .98),
            rgba(9, 11, 17, .94)
        );

    border-bottom:
        1px solid
        rgba(255, 255, 255, .07);

    box-shadow:
        0 10px 28px
        rgba(0, 0, 0, .28);
}


.menu-menu-right-container ul {
    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        8px;

    margin:
        0;

    padding:
        0;

    list-style:
        none;
}


.menu-menu-right-container li {
    margin:
        0
        !important;

    padding:
        0
        !important;
}


.menu-menu-right-container a {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        42px;

    padding:
        8px 17px
        !important;

    border:
        1px solid
        rgba(213, 37, 48, .72)
        !important;

    border-radius:
        12px
        !important;

    background:
        linear-gradient(
            180deg,
            rgba(28, 29, 34, .98),
            rgba(12, 14, 20, .98)
        )
        !important;

    color:
        #ffffff
        !important;

    font-weight:
        700
        !important;

    text-decoration:
        none
        !important;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, .05),
        0 7px 18px
        rgba(0, 0, 0, .20);

    transition:
        border-color .18s ease,
        background .18s ease,
        transform .18s ease
        !important;
}


@media (hover: hover) and (pointer: fine) {

    .menu-menu-right-container a:hover {
        border-color:
            rgba(240, 68, 77, .96)
            !important;

        background:
            linear-gradient(
                180deg,
                rgba(52, 18, 23, .98),
                rgba(22, 12, 17, .98)
            )
            !important;

        transform:
            translateY(-1px);
    }

}


/* ==========================================================
   HAMBURGER AREA
   ========================================================== */

.menuicon {
    position:
        relative;

    z-index:
        60;
}


/* ==========================================================
   LEFT SIDEBAR
   ========================================================== */

.sidegamebar {
    background:
        linear-gradient(
            180deg,
            #090b10 0%,
            #080a0f 58%,
            #07090d 100%
        )
        !important;

    border-right:
        1px solid
        rgba(255, 255, 255, .08)
        !important;

    box-shadow:
        14px 0 34px
        rgba(0, 0, 0, .24);

    overflow:
        hidden;
}


.tabgamemenu {
    position:
        relative;

    padding-top:
        4px;
}


/* ==========================================================
   LEFT NAV LIST
   ========================================================== */

.menu-menu-left-container ul {
    margin:
        0;

    padding:
        0;

    list-style:
        none;
}


.menu-menu-left-container li {
    margin:
        0 8px 10px
        !important;

    padding:
        0
        !important;
}


.menu-menu-left-container a {
    position:
        relative;

    display:
        flex
        !important;

    align-items:
        center;

    min-height:
        64px;

    padding:
        9px 13px
        !important;

    overflow:
        hidden;

    border:
        1px solid
        rgba(255, 255, 255, .06)
        !important;

    border-radius:
        12px
        !important;

    background:
        linear-gradient(
            145deg,
            rgba(34, 35, 38, .96),
            rgba(19, 21, 25, .98)
        )
        !important;

    color:
        #f3f4f7
        !important;

    font-weight:
        700
        !important;

    text-decoration:
        none
        !important;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, .035),
        0 7px 16px
        rgba(0, 0, 0, .19);

    transition:
        transform .17s ease,
        border-color .17s ease,
        background .17s ease
        !important;
}


/*
 * Accent เส้นแดงซ้ายของแต่ละเมนู
 */

.menu-menu-left-container a::before {
    content:
        "";

    position:
        absolute;

    top:
        12px;

    bottom:
        12px;

    left:
        0;

    width:
        3px;

    border-radius:
        0 5px 5px 0;

    background:
        linear-gradient(
            180deg,
            #f0444d,
            #a91420
        );

    opacity:
        .88;
}


@media (hover: hover) and (pointer: fine) {

    .menu-menu-left-container a:hover {
        transform:
            translateX(3px);

        border-color:
            rgba(213, 37, 48, .42)
            !important;

        background:
            linear-gradient(
                145deg,
                rgba(43, 34, 37, .97),
                rgba(20, 20, 25, .98)
            )
            !important;
    }

}


/*
 * Active/current menu
 */

.menu-menu-left-container .current-menu-item > a,
.menu-menu-left-container .current_page_item > a,
.menu-menu-left-container .current-menu-parent > a {
    border-color:
        rgba(240, 68, 77, .70)
        !important;

    background:
        linear-gradient(
            145deg,
            rgba(177, 13, 25, .88),
            rgba(103, 8, 18, .96)
        )
        !important;

    box-shadow:
        0 9px 22px
        rgba(128, 0, 13, .25)
        !important;
}


/* ==========================================================
   SIDEBAR ICONS
   ใช้รูปเดิมทั้งหมดก่อน
   ========================================================== */

.menu-menu-left-container img {
    flex:
        0 0 auto;

    object-fit:
        contain;

    filter:
        none
        !important;
}


/* ==========================================================
   MAIN CONTENT BACKDROP
   ========================================================== */

.sectiongame {
    background:
        radial-gradient(
            circle at 55% 15%,
            rgba(111, 10, 21, .13),
            transparent 33%
        ),
        linear-gradient(
            180deg,
            rgba(7, 9, 15, .10),
            rgba(5, 7, 12, .34)
        )
        !important;
}


/* ==========================================================
   PROVIDER SECTION POLISH
   ========================================================== */

.elementor-element-754efac,
.elementor-element-342f784 {
    backdrop-filter:
        none
        !important;
}


/*
 * ลดความแน่นของการ์ดเล็กน้อย
 */

.casino-provider-v2-gallery,
.elementor-element-782b547 .uael-img-gallery-wrap {
    gap:
        12px;
}


/* ==========================================================
   MOBILE / TABLET
   ========================================================== */

@media (max-width: 1024px) {

    .menu-menu-right-container {
        padding:
            6px 7px;

        border-radius:
            0;
    }


    .menu-menu-right-container a {
        min-height:
            40px;

        padding:
            7px 13px
            !important;

        border-radius:
            10px
            !important;
    }


    .menu-menu-left-container li {
        margin:
            0 7px 8px
            !important;
    }


    .menu-menu-left-container a {
        min-height:
            58px;

        padding:
            8px 10px
            !important;
    }

}


@media (max-width: 767px) {

    .menu-menu-right-container a,
    .menu-menu-left-container a {
        transition:
            none
            !important;
    }


    .menu-menu-left-container a:hover {
        transform:
            none;
    }


    .sectiongame {
        background:
            linear-gradient(
                180deg,
                #080b12 0%,
                #05070d 100%
            )
            !important;
    }

}


/* END ZELORA88_HOME_3B_HEADER_SIDEBAR */

/* BEGIN ZELORA88_HOME_3C_FIX */

@media (max-width: 767px) {

    /*
     * เผื่อพื้นที่ Bottom Navigation
     */
    .sectiongame {
        padding-bottom:
            96px
            !important;
    }


    /*
     * ======================================================
     * BOTTOM NAV — CONTACT / LINE ICON
     * support.png
     * ======================================================
     */

    #account-actions-mobile img[src*="support.png"] {
        position:
            static
            !important;

        inset:
            auto
            !important;

        display:
            block
            !important;

        width:
            38px
            !important;

        max-width:
            38px
            !important;

        height:
            38px
            !important;

        margin:
            0 auto
            !important;

        padding:
            0
            !important;

        object-fit:
            contain
            !important;

        transform:
            none
            !important;

        filter:
            none
            !important;
    }


    /*
     * ======================================================
     * FLOATING GIRLS + LINE ARTWORK
     * .facebook-mobile
     * contact-us-1-150.webp
     * ======================================================
     */

    .facebook-mobile {
        position:
            fixed
            !important;

        right:
            5px
            !important;

        bottom:
            84px
            !important;

        width:
            56px
            !important;

        max-width:
            56px
            !important;

        height:
            auto
            !important;

        margin:
            0
            !important;

        padding:
            0
            !important;

        z-index:
            80
            !important;

        pointer-events:
            auto;
    }


    .facebook-mobile a {
        display:
            block
            !important;

        width:
            100%
            !important;
    }


    .facebook-mobile img {
        position:
            static
            !important;

        display:
            block
            !important;

        width:
            100%
            !important;

        max-width:
            100%
            !important;

        height:
            auto
            !important;

        margin:
            0
            !important;

        padding:
            0
            !important;

        transform:
            none
            !important;

        filter:
            none
            !important;
    }


    /*
     * Bottom Navigation อยู่ชั้นบนสุด
     */
    #account-actions-mobile {
        z-index:
            100
            !important;
    }


    .js-footer-lobby-overlay {
        z-index:
            99
            !important;
    }

}


@media (max-width: 390px) {

    #account-actions-mobile img[src*="support.png"] {
        width:
            34px
            !important;

        max-width:
            34px
            !important;

        height:
            34px
            !important;
    }


    .facebook-mobile {
        width:
            50px
            !important;

        max-width:
            50px
            !important;

        right:
            3px
            !important;
    }

}

/* END ZELORA88_HOME_3C_FIX */

/* BEGIN ZELORA88_HOME_3D_MOBILE_DRAWER */

@media (max-width: 767px) {

    /*
     * ตัว Drawer เดิมยังใช้ระบบเปิด/ปิดเดิมทั้งหมด
     */
    .fixedleft {
        background:
            linear-gradient(
                180deg,
                #090b11 0%,
                #07090e 100%
            )
            !important;

        border-right:
            1px solid
            rgba(255, 255, 255, .08)
            !important;

        box-shadow:
            18px 0 42px
            rgba(0, 0, 0, .40)
            !important;
    }


    /*
     * Logo zone
     */
    .fixedleft .logoside {
        min-height:
            82px;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        padding:
            12px 40px 10px 14px
            !important;

        border-bottom:
            1px solid
            rgba(255, 255, 255, .07);

        background:
            linear-gradient(
                180deg,
                rgba(92, 0, 8, .50),
                rgba(13, 13, 18, .12)
            );
    }


    .fixedleft .logoside img {
        width:
            170px
            !important;

        max-width:
            100%
            !important;

        height:
            auto
            !important;
    }


    /*
     * ======================================================
     * QUICK MENU
     * หน้าหลัก / โปรโมชั่น / บทความ / LINE / รีวิว
     * ======================================================
     */

    .fixedleft .menuicon {
        padding:
            10px 8px 8px
            !important;
    }


    .fixedleft .menu-menu-right-container {
        padding:
            0
            !important;

        margin:
            0
            !important;

        border:
            0
            !important;

        border-radius:
            0
            !important;

        background:
            transparent
            !important;

        box-shadow:
            none
            !important;
    }


    .fixedleft .menu-menu-right-container ul {
        display:
            grid
            !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            8px
            !important;

        width:
            100%;

        margin:
            0
            !important;

        padding:
            0
            !important;
    }


    .fixedleft .menu-menu-right-container li {
        width:
            auto
            !important;

        margin:
            0
            !important;
    }


    /*
     * รีวิวเป็นช่องเต็มแถว
     */
    .fixedleft .menu-menu-right-container li:nth-child(5) {
        grid-column:
            1 / -1;
    }


    .fixedleft .menu-menu-right-container a {
        display:
            flex
            !important;

        flex-direction:
            column;

        align-items:
            center;

        justify-content:
            center;

        gap:
            4px;

        width:
            100%
            !important;

        min-height:
            68px
            !important;

        padding:
            7px 5px
            !important;

        border:
            1px solid
            rgba(213, 37, 48, .54)
            !important;

        border-radius:
            12px
            !important;

        background:
            linear-gradient(
                160deg,
                rgba(27, 30, 38, .97),
                rgba(12, 14, 20, .98)
            )
            !important;

        box-shadow:
            inset 0 1px 0
            rgba(255, 255, 255, .04)
            !important;

        transform:
            none
            !important;
    }


    .fixedleft .menu-menu-right-container .menu-image {
        width:
            29px
            !important;

        max-width:
            29px
            !important;

        height:
            29px
            !important;

        object-fit:
            contain;

        margin:
            0 auto
            !important;
    }


    .fixedleft .menu-menu-right-container .menu-image-title {
        display:
            block
            !important;

        margin:
            0
            !important;

        padding:
            0
            !important;

        color:
            #f5f6f8
            !important;

        font-size:
            12px
            !important;

        font-weight:
            700
            !important;

        line-height:
            1.2
            !important;

        text-align:
            center;
    }


    /*
     * ======================================================
     * GAME CATEGORY MENU
     * ======================================================
     */

    .fixedleft .sidegamebar {
        margin-top:
            8px;

        padding:
            9px 0 105px
            !important;

        border-top:
            1px solid
            rgba(255, 255, 255, .07)
            !important;

        background:
            transparent
            !important;

        box-shadow:
            none
            !important;
    }


    .fixedleft .tabgamemenu {
        padding:
            0
            !important;
    }


    .fixedleft .menu-menu-left-container li {
        margin:
            0 8px 8px
            !important;
    }


    .fixedleft .menu-menu-left-container a {
        min-height:
            58px
            !important;

        padding:
            7px 11px
            !important;

        border:
            1px solid
            rgba(255, 255, 255, .07)
            !important;

        border-radius:
            12px
            !important;

        background:
            linear-gradient(
                145deg,
                rgba(31, 33, 38, .98),
                rgba(16, 18, 23, .98)
            )
            !important;

        box-shadow:
            0 5px 14px
            rgba(0, 0, 0, .18)
            !important;

        transform:
            none
            !important;
    }


    .fixedleft .menu-menu-left-container .menu-image {
        width:
            42px
            !important;

        max-width:
            42px
            !important;

        height:
            42px
            !important;

        object-fit:
            contain;

        margin-right:
            12px
            !important;
    }


    .fixedleft .menu-menu-left-container .menu-image-title {
        color:
            #f3f4f7
            !important;

        font-size:
            14px
            !important;

        font-weight:
            700
            !important;
    }


    /*
     * Active category
     */
    .fixedleft
    .menu-menu-left-container
    .current-menu-item > a,
    .fixedleft
    .menu-menu-left-container
    .current_page_item > a {
        border-color:
            rgba(240, 68, 77, .74)
            !important;

        background:
            linear-gradient(
                145deg,
                rgba(153, 8, 19, .96),
                rgba(78, 5, 13, .98)
            )
            !important;
    }


    /*
     * Desktop LINE banner ใน sidebar
     * ซ่อนบนมือถือ เพราะมี LINE ในเมนูและ bottom nav อยู่แล้ว
     */
    .fixedleft .linechatfixed {
        display:
            none
            !important;
    }


    /*
     * ไม่ใช้ hover motion บนมือถือ
     */
    .fixedleft a {
        transition:
            none
            !important;
    }

}

/* END ZELORA88_HOME_3D_MOBILE_DRAWER */

/* BEGIN ZELORA88_HOME_3D_FINAL */

@media (max-width: 767px) {

    /*
     * เมื่อ Mobile Drawer เปิด
     * fixedleft จะได้รับ class .active
     */

    body:has(.fixedleft.active) {
        overflow:
            hidden
            !important;
    }


    /*
     * ซ่อน Floating LINE artwork
     * ขณะ Drawer เปิด
     */

    body:has(.fixedleft.active)
    .facebook-mobile {
        display:
            none
            !important;
    }


    /*
     * ซ่อน Bottom navigation
     * ขณะ Drawer เปิด
     */

    body:has(.fixedleft.active)
    #account-actions-mobile {
        display:
            none
            !important;
    }


    /*
     * Drawer อยู่เหนือทุกอย่าง
     */

    .fixedleft.active {
        z-index:
            1001
            !important;
    }


    .overlaymenu.active,
    .overlaysidebar.active {
        z-index:
            1000
            !important;
    }


    .wrapper-menu.open {
        z-index:
            1002
            !important;
    }

}

/* END ZELORA88_HOME_3D_FINAL */

/* BEGIN ZELORA88_HOME_CONTACT_LINE_V4 */

@media (max-width: 767px) {

    /*
     * ======================================================
     * CONTACT BUTTON — RIGHTMOST MOBILE BOTTOM NAV
     * ======================================================
     */

    #account-actions-mobile
    .-right-wrapper
    .-item-wrapper:last-child {

        position:
            relative
            !important;

        display:
            block
            !important;

        width:
            50%
            !important;

        height:
            64px
            !important;

        margin:
            0
            !important;

        padding:
            0
            !important;

        overflow:
            visible
            !important;
    }


    /*
     * กล่องภายในช่อง "ติดต่อเรา"
     */
    #account-actions-mobile
    .-right-wrapper
    .-item-wrapper:last-child
    .-ic-img {

        position:
            absolute
            !important;

        top:
            0
            !important;

        right:
            0
            !important;

        bottom:
            0
            !important;

        left:
            0
            !important;

        display:
            block
            !important;

        width:
            100%
            !important;

        height:
            64px
            !important;

        margin:
            0
            !important;

        padding:
            0
            !important;

        transform:
            none
            !important;
    }


    /*
     * ลิงก์ที่ครอบรูป LINE
     */
    #account-actions-mobile
    .-right-wrapper
    .-item-wrapper:last-child
    .-ic-img > a {

        position:
            absolute
            !important;

        top:
            3px
            !important;

        left:
            50%
            !important;

        display:
            block
            !important;

        width:
            40px
            !important;

        height:
            40px
            !important;

        margin:
            0
            !important;

        padding:
            0
            !important;

        transform:
            translateX(-50%)
            !important;

        line-height:
            0
            !important;
    }


    /*
     * วงกลม LINE สีเขียว
     */
    #account-actions-mobile
    .-right-wrapper
    .-item-wrapper:last-child
    img[src*="support.png"] {

        position:
            static
            !important;

        display:
            block
            !important;

        width:
            40px
            !important;

        min-width:
            40px
            !important;

        max-width:
            40px
            !important;

        height:
            40px
            !important;

        min-height:
            40px
            !important;

        max-height:
            40px
            !important;

        margin:
            0
            !important;

        padding:
            0
            !important;

        object-fit:
            contain
            !important;

        transform:
            none
            !important;
    }


    /*
     * คำว่า "ติดต่อเรา"
     */
    #account-actions-mobile
    .-right-wrapper
    .-item-wrapper:last-child
    .-textfooter {

        position:
            absolute
            !important;

        right:
            auto
            !important;

        bottom:
            1px
            !important;

        left:
            50%
            !important;

        display:
            block
            !important;

        width:
            auto
            !important;

        height:
            auto
            !important;

        margin:
            0
            !important;

        padding:
            0
            !important;

        transform:
            translateX(-50%)
            !important;

        white-space:
            nowrap
            !important;

        text-align:
            center
            !important;
    }


    #account-actions-mobile
    .-right-wrapper
    .-item-wrapper:last-child
    .-textfooter a {

        display:
            block
            !important;

        margin:
            0
            !important;

        padding:
            0
            !important;

        color:
            #ffffff
            !important;

        font-size:
            12px
            !important;

        font-weight:
            600
            !important;

        line-height:
            14px
            !important;

        text-decoration:
            none
            !important;
    }

}

/* END ZELORA88_HOME_CONTACT_LINE_V4 */

/* BEGIN ZELORA88_HOME_3F_LOWER_CONTENT */


/* =========================================================
 * 1. SEO CONTENT PANEL
 * Content itself is NOT changed.
 * ========================================================= */

#zelora-relate-seo-content-v1 {
    position:
        relative;

    width:
        100%;

    margin:
        0;

    padding:
        34px 18px 38px;

    background:
        linear-gradient(
            180deg,
            #080d17 0%,
            #060911 55%,
            #04060b 100%
        );

    color:
        #d8dee9;
}


#zelora-relate-seo-content-v1::before {
    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        50%;

    width:
        min(920px, 78%);

    height:
        1px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(224, 43, 43, .72),
            rgba(216, 184, 111, .68),
            transparent
        );
}


#zelora-relate-seo-content-v1
.zelora-relate-seo-inner {
    width:
        min(1120px, 100%);

    margin:
        0 auto;

    padding:
        30px 32px;

    border:
        1px solid rgba(205, 177, 106, .20);

    border-radius:
        18px;

    background:
        linear-gradient(
            145deg,
            rgba(20, 27, 40, .96),
            rgba(8, 12, 21, .98)
        );

    box-shadow:
        0 16px 44px rgba(0, 0, 0, .28);
}


#zelora-relate-seo-content-v1
h2,
#zelora-relate-seo-content-v1
h3 {
    margin-top:
        1.45em;

    margin-bottom:
        .65em;

    color:
        #f4f5f7;

    line-height:
        1.35;

    letter-spacing:
        -.01em;
}


#zelora-relate-seo-content-v1
h2 {
    padding-left:
        14px;

    border-left:
        3px solid #b91c24;

    font-size:
        clamp(20px, 2vw, 28px);
}


#zelora-relate-seo-content-v1
h3 {
    color:
        #e2c783;

    font-size:
        clamp(18px, 1.7vw, 23px);
}


#zelora-relate-seo-content-v1
p {
    margin:
        0 0 16px;

    color:
        #c8ced8;

    font-size:
        15px;

    line-height:
        1.85;
}


#zelora-relate-seo-content-v1
a {
    color:
        #e2c783;

    text-decoration-color:
        rgba(226, 199, 131, .45);

    text-underline-offset:
        3px;
}


#zelora-relate-seo-content-v1
ul {
    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        8px 12px;

    margin:
        14px 0 22px;

    padding:
        0;

    list-style:
        none;
}


#zelora-relate-seo-content-v1
li {
    position:
        relative;

    margin:
        0;

    padding:
        10px 12px 10px 30px;

    border:
        1px solid rgba(255, 255, 255, .06);

    border-radius:
        10px;

    background:
        rgba(255, 255, 255, .025);

    color:
        #eef0f4;
}


#zelora-relate-seo-content-v1
li::before {
    content:
        "•";

    position:
        absolute;

    left:
        13px;

    top:
        8px;

    color:
        #d5b768;

    font-size:
        18px;
}


/* =========================================================
 * 2. LOWER ELEMENTOR SECTIONS
 * ========================================================= */

.elementor-element-b59f240,
.elementor-element-97f8a74,
.elementor-element-908289f,
.elementor-element-7177db0 {
    position:
        relative;

    background:
        linear-gradient(
            180deg,
            #070b13 0%,
            #090d16 100%
        )
        !important;

    color:
        #ffffff;
}


.elementor-element-b59f240,
.elementor-element-97f8a74 {
    padding-top:
        36px
        !important;

    padding-bottom:
        38px
        !important;
}


.elementor-element-908289f,
.elementor-element-7177db0 {
    padding-top:
        24px
        !important;

    padding-bottom:
        24px
        !important;
}


/* =========================================================
 * 3. LOWER CONTENT MAX WIDTH
 * ========================================================= */

.elementor-element-b59f240
> .elementor-container,

.elementor-element-97f8a74
> .elementor-container,

.elementor-element-908289f
> .elementor-container,

.elementor-element-7177db0
> .elementor-container {
    width:
        min(1120px, calc(100% - 32px))
        !important;

    max-width:
        1120px
        !important;

    margin-left:
        auto
        !important;

    margin-right:
        auto
        !important;
}


/* =========================================================
 * 4. SECTION HEADINGS / DIVIDERS
 * ========================================================= */

.elementor-element-b59f240
.uael-divider-text,

.elementor-element-97f8a74
.uael-divider-text {
    color:
        #d8bd78
        !important;

    font-weight:
        700
        !important;
}


.elementor-element-b59f240
.uael-separator-line,

.elementor-element-97f8a74
.uael-separator-line {
    border-color:
        rgba(216, 189, 120, .35)
        !important;
}


.elementor-element-b59f240
.uael-heading-text,

.elementor-element-97f8a74
.uael-heading-text {
    color:
        #ffffff
        !important;

    font-weight:
        800
        !important;

    line-height:
        1.3
        !important;
}


.elementor-element-b59f240
.elementor-widget-text-editor,

.elementor-element-97f8a74
.elementor-widget-text-editor {
    color:
        #c9cfda
        !important;
}


.elementor-element-b59f240
.elementor-widget-text-editor p,

.elementor-element-97f8a74
.elementor-widget-text-editor p {
    color:
        inherit;

    line-height:
        1.75;
}


.elementor-element-b59f240
a {
    color:
        #e1c47b;
}


/* =========================================================
 * 5. REGISTRATION / DEPOSIT STEP CARDS
 * section 97f8a74
 * ========================================================= */

.elementor-element-97f8a74
.elementor-inner-section
.elementor-column
> .elementor-widget-wrap.elementor-element-populated {
    position:
        relative;

    height:
        100%;

    padding:
        22px 18px
        !important;

    border:
        1px solid rgba(211, 183, 112, .20);

    border-radius:
        16px;

    background:
        linear-gradient(
            145deg,
            rgba(23, 30, 43, .96),
            rgba(9, 13, 22, .98)
        );

    box-shadow:
        0 12px 30px rgba(0, 0, 0, .22);
}


.elementor-element-97f8a74
.elementor-inner-section
.elementor-heading-title {
    color:
        #ffffff
        !important;

    font-weight:
        800
        !important;
}


.elementor-element-97f8a74
.elementor-inner-section
.elementor-widget-icon {
    color:
        #d7ba72
        !important;
}


.elementor-element-97f8a74
.elementor-inner-section
.elementor-icon {
    color:
        #d7ba72
        !important;
}


/* =========================================================
 * 6. REMOVE HEAVY LOWER-PAGE VISUAL FX FROM PRESENTATION
 * Keep HTML/content untouched.
 * ========================================================= */

.elementor-element-b59f240
.elementor-motion-effects-layer {
    opacity:
        .20
        !important;
}


/* =========================================================
 * 7. FOOTER FOUNDATION
 * ========================================================= */

footer {
    position:
        relative;

    border-top:
        1px solid rgba(211, 183, 112, .20);

    background:
        #04060b
        !important;

    color:
        #bfc6d2;
}


footer a {
    color:
        #d8bd78;
}


/* =========================================================
 * 8. DESKTOP FINE TUNE
 * ========================================================= */

@media (min-width: 768px) {

    .elementor-element-97f8a74
    .elementor-inner-section
    .elementor-column {
        padding:
            6px
            !important;
    }

}


/* =========================================================
 * 9. MOBILE
 * ========================================================= */

@media (max-width: 767px) {

    #zelora-relate-seo-content-v1 {
        padding:
            22px 10px 26px;
    }


    #zelora-relate-seo-content-v1
    .zelora-relate-seo-inner {
        padding:
            20px 16px;

        border-radius:
            14px;
    }


    #zelora-relate-seo-content-v1
    h2 {
        padding-left:
            10px;

        font-size:
            20px;
    }


    #zelora-relate-seo-content-v1
    h3 {
        font-size:
            18px;
    }


    #zelora-relate-seo-content-v1
    p {
        font-size:
            14px;

        line-height:
            1.75;
    }


    #zelora-relate-seo-content-v1
    ul {
        grid-template-columns:
            1fr;

        gap:
            7px;
    }


    .elementor-element-b59f240,
    .elementor-element-97f8a74 {
        padding-top:
            24px
            !important;

        padding-bottom:
            26px
            !important;
    }


    .elementor-element-b59f240
    > .elementor-container,

    .elementor-element-97f8a74
    > .elementor-container,

    .elementor-element-908289f
    > .elementor-container,

    .elementor-element-7177db0
    > .elementor-container {
        width:
            calc(100% - 20px)
            !important;
    }


    .elementor-element-97f8a74
    .elementor-inner-section
    .elementor-column {
        width:
            100%
            !important;

        margin-bottom:
            10px
            !important;
    }


    .elementor-element-97f8a74
    .elementor-inner-section
    .elementor-column
    > .elementor-widget-wrap.elementor-element-populated {
        padding:
            18px 14px
            !important;

        border-radius:
            13px;
    }


    /*
     * fixed mobile bottom navigation clearance
     */
    footer {
        padding-bottom:
            88px
            !important;
    }

}

/* END ZELORA88_HOME_3F_LOWER_CONTENT */

/* BEGIN ZELORA88_HOME_3F1_MOBILE_COMPACT */

@media (max-width: 767px) {

    /*
     * ======================================================
     * REGISTRATION STEPS — MOBILE COMPACT
     * ======================================================
     */

    .elementor-element-97f8a74
    .elementor-inner-section
    .elementor-column {
        margin-bottom:
            0
            !important;
    }


    .elementor-element-97f8a74
    .elementor-inner-section
    .elementor-column
    > .elementor-widget-wrap.elementor-element-populated {
        min-height:
            158px
            !important;

        height:
            auto
            !important;

        padding:
            18px 14px
            !important;

        align-content:
            center
            !important;

        justify-content:
            center
            !important;
    }


    /*
     * หัวข้อ สมัครสมาชิก / ฝากเงิน / รับสิทธิพิเศษ
     */
    .elementor-element-97f8a74
    .elementor-inner-section
    .elementor-widget-heading {
        margin-bottom:
            8px
            !important;
    }


    .elementor-element-97f8a74
    .elementor-inner-section
    .elementor-heading-title {
        margin:
            0
            !important;

        font-size:
            23px
            !important;

        line-height:
            1.25
            !important;
    }


    /*
     * ข้อความในการ์ด
     */
    .elementor-element-97f8a74
    .elementor-inner-section
    .elementor-widget-text-editor {
        margin:
            0
            !important;
    }


    .elementor-element-97f8a74
    .elementor-inner-section
    .elementor-widget-text-editor p {
        margin:
            4px 0
            !important;

        line-height:
            1.55
            !important;
    }


    /*
     * ลูกศรเชื่อมแต่ละขั้นตอน
     */
    .elementor-element-97f8a74
    .elementor-hidden-desktop.elementor-hidden-tablet.elementor-widget-icon {
        position:
            relative
            !important;

        z-index:
            5
            !important;

        width:
            34px
            !important;

        height:
            34px
            !important;

        margin:
            -8px auto
            !important;
    }


    .elementor-element-97f8a74
    .elementor-hidden-desktop.elementor-hidden-tablet
    .elementor-icon-wrapper {
        display:
            flex
            !important;

        justify-content:
            center
            !important;
    }


    .elementor-element-97f8a74
    .elementor-hidden-desktop.elementor-hidden-tablet
    .elementor-icon {
        display:
            flex
            !important;

        align-items:
            center
            !important;

        justify-content:
            center
            !important;

        width:
            34px
            !important;

        height:
            34px
            !important;

        padding:
            0
            !important;

        border:
            2px solid #d9b95f
            !important;

        border-radius:
            50%
            !important;

        background:
            #111722
            !important;

        color:
            #f0d078
            !important;

        font-size:
            20px
            !important;

        box-shadow:
            0 4px 12px rgba(0, 0, 0, .30)
            !important;
    }


    /*
     * SEO mobile — ลดพื้นที่ด้านข้างเล็กน้อย
     */
    #zelora-relate-seo-content-v1
    .zelora-relate-seo-inner {
        padding:
            18px 14px
            !important;
    }


    #zelora-relate-seo-content-v1
    li {
        padding:
            10px 12px 10px 28px
            !important;
    }

}

/* END ZELORA88_HOME_3F1_MOBILE_COMPACT */

/* BEGIN ZELORA88_HOME_STEP_ARROW_CENTER_V1 */

@media (max-width: 767px) {

    /*
     * กล่องแต่ละขั้นตอนเป็น anchor
     */
    .elementor-element-97f8a74
    .elementor-inner-section
    .elementor-column
    > .elementor-widget-wrap.elementor-element-populated {
        position:
            relative
            !important;

        overflow:
            visible
            !important;
    }


    /*
     * ลูกศร mobile ระหว่างขั้นตอน
     * ล็อกให้อยู่กึ่งกลางล่างของการ์ด
     */
    .elementor-element-97f8a74
    .elementor-inner-section
    .elementor-hidden-desktop.elementor-hidden-tablet.elementor-widget-icon {
        position:
            absolute
            !important;

        left:
            50%
            !important;

        right:
            auto
            !important;

        bottom:
            -17px
            !important;

        top:
            auto
            !important;

        width:
            34px
            !important;

        height:
            34px
            !important;

        margin:
            0
            !important;

        padding:
            0
            !important;

        transform:
            translateX(-50%)
            !important;

        z-index:
            20
            !important;
    }


    .elementor-element-97f8a74
    .elementor-inner-section
    .elementor-hidden-desktop.elementor-hidden-tablet
    .elementor-widget-container,

    .elementor-element-97f8a74
    .elementor-inner-section
    .elementor-hidden-desktop.elementor-hidden-tablet
    .elementor-icon-wrapper {
        width:
            34px
            !important;

        height:
            34px
            !important;

        margin:
            0
            !important;

        padding:
            0
            !important;
    }


    /*
     * เผื่อระยะสำหรับลูกศรระหว่างการ์ด
     */
    .elementor-element-97f8a74
    .elementor-inner-section
    .elementor-column:not(:last-child) {
        margin-bottom:
            18px
            !important;
    }

}

/* END ZELORA88_HOME_STEP_ARROW_CENTER_V1 */


/* BEGIN ZELORA88_HOME_HEADER_BUTTON_SIZE_V1 */

@media (max-width: 440px) {

    .loginregishead {
        right:
            7px !important;

        margin:
            0 !important;

        gap:
            7px;
    }

    .loginregishead .btn-primary,
    .loginregishead .btn-primary:nth-child(1),
    .loginregishead .btn-primary:nth-child(2) {
        margin:
            0 !important;
    }

    .loginregishead .btn-primary a {
        font-size:
            13px !important;

        line-height:
            1.15 !important;

        padding:
            9px 9px !important;

        white-space:
            nowrap !important;
    }

}


@media (max-width: 370px) {

    .loginregishead {
        right:
            5px !important;

        gap:
            5px;
    }

    .loginregishead .btn-primary a {
        font-size:
            12px !important;

        padding:
            8px 7px !important;
    }

}

/* END ZELORA88_HOME_HEADER_BUTTON_SIZE_V1 */