/* =========================================================
   RTP WORLD - SEARCH & FILTER
   COMPLETE STYLE
========================================================= */


/* =========================================================
   FLOATING FILTER BUTTON
========================================================= */

#rtp-filter-trigger {
    position: fixed;

    right: 34px;
    bottom: 34px;

    z-index: 99990;

    width: 205px;
    height: 54px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 0;

    border: 1px solid rgba(88, 211, 255, .75);
    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            #13a9ee 0%,
            #287ff0 48%,
            #7652f4 100%
        );

    color: #fff;

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: 14px;
    font-weight: 800;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;

    box-shadow:
        0 0 10px rgba(0, 195, 255, .60),
        0 0 25px rgba(43, 130, 255, .40),
        0 0 45px rgba(119, 72, 255, .25);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        filter .25s ease;
}


/* GLOW BORDER */

#rtp-filter-trigger::before {

    content: "";

    position: absolute;

    inset: -2px;

    border-radius: 18px;

    background:
        linear-gradient(
            120deg,
            #00dcff,
            #277cff,
            #8758ff,
            #00dcff
        );

    background-size: 300% 300%;

    z-index: -1;

    filter: blur(5px);

    opacity: .85;

    animation:
        rtpFilterGlow 4s ease infinite;

}


/* SOFT GLOW */

#rtp-filter-trigger::after {

    content: "";

    position: absolute;

    inset: -8px;

    border-radius: 22px;

    border: 1px solid rgba(40, 190, 255, .20);

    box-shadow:
        0 0 16px rgba(0, 191, 255, .20),
        0 0 32px rgba(91, 83, 255, .15);

    pointer-events: none;

    animation:
        rtpFilterPulse 2.8s ease-in-out infinite;

}


/* ICON */

#rtp-filter-trigger .rtp-filter-icon {

    width: 27px;
    height: 27px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

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

    color: #fff;

    font-size: 17px;

}


/* HOVER */

#rtp-filter-trigger:hover {

    transform:
        translateY(-3px)
        scale(1.015);

    filter: brightness(1.08);

    box-shadow:
        0 0 15px rgba(0, 204, 255, .75),
        0 0 34px rgba(45, 130, 255, .50),
        0 0 58px rgba(119, 72, 255, .35);

}


/* ACTIVE */

#rtp-filter-trigger:active {

    transform:
        translateY(0)
        scale(.98);

}


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

#rtp-filter-overlay {

    position: fixed;

    inset: 0;

    z-index: 99999;

    display: flex;

    align-items: flex-end;

    justify-content: flex-end;

    padding: 34px;

    background:
        rgba(1, 7, 18, .68);

    backdrop-filter: blur(6px);

    -webkit-backdrop-filter: blur(6px);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity .25s ease,
        visibility .25s ease;

}


/* OPEN */

#rtp-filter-overlay.is-open {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

}


/* =========================================================
   POPUP BOX
========================================================= */

.rtp-filter-box {

    position: relative;

    width: min(
        640px,
        calc(100vw - 40px)
    );

    max-height:
        min(
            760px,
            calc(100vh - 60px)
        );

    overflow-y: auto;

    padding: 24px;

    border:
        1px solid
        rgba(67, 177, 255, .28);

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            #071b34 0%,
            #041326 55%,
            #020b18 100%
        );

    box-shadow:
        0 25px 80px rgba(0,0,0,.70),
        0 0 30px rgba(0,145,255,.15),
        inset 0 1px 0 rgba(255,255,255,.05);

    color: #fff;

    transform:
        translateY(25px)
        scale(.97);

    transition:
        transform .3s ease;

}


/* POPUP OPEN ANIMATION */

#rtp-filter-overlay.is-open
.rtp-filter-box {

    transform:
        translateY(0)
        scale(1);

}


/* =========================================================
   HEADER
========================================================= */

.rtp-filter-header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 18px;

}


.rtp-filter-title {

    margin: 0;

    color: #fff;

    font-family:
        Inter,
        system-ui,
        sans-serif;

    font-size: 22px;

    font-weight: 900;

    line-height: 1.2;

}


.rtp-filter-subtitle {

    margin-top: 5px;

    color: rgba(210, 230, 250, .72);

    font-size: 13px;

    line-height: 1.4;

}


/* CLOSE BUTTON */

#rtp-filter-close {

    flex: 0 0 auto;

    width: 34px;
    height: 34px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 0;

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

    border-radius: 10px;

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

    color: #b9dfff;

    font-size: 24px;

    line-height: 1;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        transform .2s ease;

}


#rtp-filter-close:hover {

    background:
        rgba(255,60,100,.14);

    border-color:
        rgba(255,80,120,.40);

    color: #fff;

    transform: rotate(90deg);

}


/* =========================================================
   SEARCH
========================================================= */

.rtp-filter-search {

    position: relative;

    width: 100%;

    margin-bottom: 20px;

}


.rtp-filter-search-icon {

    position: absolute;

    left: 15px;

    top: 50%;

    transform:
        translateY(-50%);

    z-index: 2;

    font-size: 16px;

    opacity: .8;

}


#rtp-game-search {

    width: 100%;

    height: 46px;

    box-sizing: border-box;

    padding:
        0
        15px
        0
        44px;

    border:
        1px solid
        rgba(76, 179, 255, .25);

    border-radius: 12px;

    outline: none;

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

    color: #fff;

    font-family:
        Inter,
        system-ui,
        sans-serif;

    font-size: 13px;

    appearance: none;
    -webkit-appearance: none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;

}


#rtp-game-search::placeholder {

    color:
        rgba(190, 215, 240, .48);

}


#rtp-game-search:focus {

    border-color:
        rgba(56, 190, 255, .70);

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

    box-shadow:
        0 0 0 3px
        rgba(0, 174, 255, .10),

        0 0 20px
        rgba(0, 174, 255, .12);

}


/* =========================================================
   PROVIDER GRID
========================================================= */

.rtp-provider-grid {

    display: grid;

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

    gap: 9px;

}


/* =========================================================
   PROVIDER BUTTON
========================================================= */

.rtp-provider-button {

    position: relative;

    width: 100%;

    min-height: 44px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding:
        8px
        10px;

    border:
        1px solid
        rgba(74, 157, 220, .22);

    border-radius: 10px;

    background:
        linear-gradient(
            145deg,
            rgba(17, 42, 69, .90),
            rgba(7, 25, 45, .90)
        );

    color:
        rgba(215, 235, 255, .82);

    font-family:
        Inter,
        system-ui,
        sans-serif;

    font-size: 11px;

    font-weight: 800;

    line-height: 1.2;

    text-align: center;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;

    box-sizing: border-box;

    transition:
        transform .2s ease,
        color .2s ease,
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;

}


/* HOVER */

.rtp-provider-button:hover {

    transform:
        translateY(-2px);

    color: #fff;

    border-color:
        rgba(57, 195, 255, .65);

    background:
        linear-gradient(
            145deg,
            rgba(17, 72, 108, .95),
            rgba(11, 38, 67, .95)
        );

    box-shadow:
        0 0 14px
        rgba(0, 181, 255, .16);

}


/* ACTIVE */

.rtp-provider-button.active {

    color: #fff;

    border-color:
        rgba(55, 209, 255, .90);

    background:
        linear-gradient(
            135deg,
            #0a8fd0,
            #356eea,
            #714de8
        );

    box-shadow:
        0 0 12px
        rgba(0, 190, 255, .30),

        0 0 25px
        rgba(99, 77, 255, .16);

}


/* COMING SOON */

.rtp-provider-button.is-coming-soon {

    cursor: not-allowed;

    color:
        rgba(150, 170, 190, .45);

    border-color:
        rgba(120, 140, 160, .10);

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

    box-shadow: none;

    opacity: .65;

}


.rtp-provider-button.is-coming-soon:hover {

    transform: none;

}


/* =========================================================
   RESULT
========================================================= */

.rtp-filter-result {

    margin-top: 18px;

    padding-top: 14px;

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

    color:
        rgba(177, 215, 245, .72);

    font-size: 12px;

    font-weight: 600;

}


/* =========================================================
   SCROLLBAR
========================================================= */

.rtp-filter-box::-webkit-scrollbar {

    width: 5px;

}


.rtp-filter-box::-webkit-scrollbar-track {

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

}


.rtp-filter-box::-webkit-scrollbar-thumb {

    background:
        rgba(50, 165, 230, .35);

    border-radius: 10px;

}


.rtp-filter-box::-webkit-scrollbar-thumb:hover {

    background:
        rgba(50, 190, 255, .55);

}


/* =========================================================
   BODY LOCK
========================================================= */

body.rtp-filter-open {

    overflow: hidden;

}


/* =========================================================
   GLOW ANIMATION
========================================================= */

@keyframes rtpFilterGlow {

    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }

}


@keyframes rtpFilterPulse {

    0%,
    100% {

        opacity: .30;

        transform:
            scale(.98);

    }

    50% {

        opacity: .85;

        transform:
            scale(1.025);

    }

}


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

@media (max-width: 768px) {

    #rtp-filter-trigger {

        right: 15px;

        bottom:
            calc(
                16px +
                env(
                    safe-area-inset-bottom
                )
            );

        width: 190px;

        height: 52px;

        border-radius: 15px;

        font-size: 13px;

    }


    #rtp-filter-overlay {

        align-items: flex-end;

        justify-content: center;

        padding:
            0
            10px
            calc(
                10px +
                env(
                    safe-area-inset-bottom
                )
            );

    }


    .rtp-filter-box {

        width: 100%;

        max-width: 520px;

        max-height:
            calc(
                100vh - 80px
            );

        padding: 18px;

        border-radius:
            22px
            22px
            18px
            18px;

    }


    .rtp-filter-title {

        font-size: 20px;

    }


    .rtp-provider-grid {

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

        gap: 8px;

    }


    .rtp-provider-button {

        min-height: 43px;

        font-size: 10px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    #rtp-filter-trigger {

        right: 12px;

        bottom:
            calc(
                12px +
                env(
                    safe-area-inset-bottom
                )
            );

        width: 178px;

        height: 49px;

        border-radius: 14px;

        font-size: 12px;

    }


    .rtp-filter-box {

        padding: 16px;

    }


    .rtp-filter-header {

        margin-bottom: 14px;

    }


    .rtp-filter-title {

        font-size: 19px;

    }


    .rtp-filter-subtitle {

        font-size: 12px;

    }


    #rtp-game-search {

        height: 44px;

    }


    .rtp-provider-grid {

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

    }

}