:root {
    --radius: 8px;
    --border: 4px;
    --height: 48px;
    --speed: 0.25s;
}

@font-face {
    font-family: MINIAPP_Poppins_Thin;
    src: url("https://www.telkomsel.com/themes/custom/telkomsel/assets/css/fonts/poppins/Poppins-Thin.woff");
}

@font-face {
    font-family: MINIAPP_Poppins_Light;
    src: url("https://www.telkomsel.com/themes/custom/telkomsel/assets/css/fonts/poppins/Poppins-Light.woff");
}

@font-face {
    font-family: MINIAPP_Poppins_Regular;
    src: url("https://www.telkomsel.com/themes/custom/telkomsel/assets/css/fonts/poppins/Poppins-Regular.woff");
    /* src: url("C:\\Users\\user\\Downloads\\Poppins-Regular.woff"); */
}

@font-face {
    font-family: MINIAPP_Poppins_Medium;
    src: url("https://www.telkomsel.com/themes/custom/telkomsel/assets/css/fonts/poppins/Poppins-Medium.woff");
}

@font-face {
    font-family: MINIAPP_Poppins_Bold;
    src: url("https://www.telkomsel.com/themes/custom/telkomsel/assets/css/fonts/poppins/Poppins-Bold.woff");
}

@font-face {
    font-family: MINIAPP_Poppins_ExtraBold;
    src: url("https://www.telkomsel.com/themes/custom/telkomsel/assets/css/fonts/poppins/Poppins-ExtraBold.woff");
}

@font-face {
    font-family: MINIAPP_Telkomsel_Batik_Sans_Regular;
    src: url("https://www.telkomsel.com/themes/custom/telkomsel/assets/css/fonts/TelkomselBatikSans-Regular.woff");
}

@font-face {
    font-family: MINIAPP_Telkomsel_Batik_Sans_Bold;
    src: url("https://www.telkomsel.com/themes/custom/telkomsel/assets/css/fonts/TelkomselBatikSans-Bold.woff");
    /* src: url("C:\\Users\\user\\Downloads\\TelkomselBatikSans-Bold.woff"); */
}

.ftsz-5-px {
    font-size: 0.313rem !important;
}

.ftsz-6-px {
    font-size: 0.375rem !important;
}

.ftsz-7-px {
    font-size: 0.438rem !important;
}

.ftsz-8-px {
    font-size: 0.5rem !important;
}

.ftsz-9-px {
    font-size: 0.563rem !important;
}

.ftsz-10-px {
    font-size: 0.625rem !important;
}

.ftsz-11-px {
    font-size: 0.688rem !important;
}

.ftsz-12-px {
    font-size: 0.75rem !important;
}

.ftsz-13-px {
    font-size: 0.813rem !important;
}

.ftsz-14-px {
    font-size: 0.875rem !important;
}

.ftsz-15-px {
    font-size: 0.938rem !important;
}

.ftsz-16-px {
    font-size: 1rem !important;
}

.ftsz-17-px {
    font-size: 1.063rem !important;
}

.ftsz-18-px {
    font-size: 1.125rem !important;
}

.ftsz-19-px {
    font-size: 1.188rem !important;
}

.ftsz-20-px {
    font-size: 1.25rem !important;
}

.ftsz-21-px {
    font-size: 1.313rem !important;
}

.ftsz-22-px {
    font-size: 1.375rem !important;
}

.ftsz-23-px {
    font-size: 1.438rem !important;
}

.ftsz-24-px {
    font-size: 1.5rem !important;
}

.ftsz-25-px {
    font-size: 1.563rem !important;
}

.ftsz-26-px {
    font-size: 1.625rem !important;
}

.ftsz-28-px {
    font-size: 1.75rem !important;
}

.ftsz-30-px {
    font-size: 1.875rem !important;
}

.ftsz-32-px {
    font-size: 2rem !important;
}

.text-gold {
    color: #F1DBB9;
}

body {
    background:
        /* radial-gradient(ellipse 200px 100px at 50% 70px, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(ellipse 200px 100px at 50% 300px, #FFF, transparent),
        radial-gradient(ellipse 450px 250px at 50% 300px, #FDA22B, transparent),
        radial-gradient(circle 200px at bottom right, #0050AE, transparent), */
        linear-gradient(300deg, #f72e2c 0%, #721503 100%)
        black;
    /* background-image: url('https://assets.telkomsel.com/public/asset/fullhtml/img/gallery/telkomsel/bg-blackpink-stadion-blurred.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: 30px; */
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
}

.additional-bg-miniapp {
    position: absolute;
    z-index: -1;
    top: 0px;
    height: 100%;
    width: 100%;
    background: center url('https://assets.telkomsel.com/public/asset/fullhtml/img/gallery/telkomsel/light-top-blackpink.png');
    background-repeat: no-repeat;
}

.additional-bg-bottom-miniapp {
    z-index: -1;
    position: absolute;
    height: 100%;
    width: 100%;
    background: left/50px url("https://assets.telkomsel.com/public/asset/fullhtml/img/gallery/telkomsel/ornament-left-blackpink.png"), right/50px url("https://assets.telkomsel.com/public/asset/fullhtml/img/gallery/telkomsel/ornament-right-blackpink.png");
    background-position-y: bottom;
    background-repeat: no-repeat;
    filter: opacity(0.8);
}

.text-blink-pink {
    background: 
        linear-gradient(146.31deg,
            #ffffff 28%, #F7C3CD 30%, #ffffff 32%, 
            #ffffff 49%, #F7C3CD 51%, #ffffff 53%, 
            #ffffff 73%, #F7C3CD 75%, #ffffff 77%); 
    background-clip: text; 
    color: transparent !important; 
    text-shadow: 5px 5px 5px rgba(231, 143, 165, 0.3), 0px 0px 20px rgba(199, 63, 97, 0.3);
    -webkit-text-stroke: 0.8px rgba(231, 143, 165, 1);
}

.text-shadow-1 {
    text-shadow: 1px 2px 3px rgba(160, 160, 160, 0.3);
}

.text-shadow-2 {
    text-shadow: 1px 2px 3px rgba(160, 160, 160, 0.5);
}

.text-shadow-3 {
    text-shadow: 1px 2px 3px rgba(160, 160, 160, 0.8);
}

.miniapp-container {
    width: 100%;
    max-width: 375px;
    min-height: 100vh;
    margin: 0px auto;
    padding: 20px 0px 10px;
}

.miniapp-btn-back {
    position: fixed;
    top: 10px;
    left: 10px;
    width: 24px;
    height: 24px;
    padding: 0px !important;
    box-shadow: 1px 1px rgba(0, 0, 0, 0.5);
    z-index: 999;
}

.miniapp-btn-info-program {
    margin: 15px auto;
    border-radius: 20px;
}

.miniapp-title {
    color: white;
    -webkit-text-stroke: 0.1rem #EC1C1C;
}

/* COUNTDOWN */
.miniapp-countdown-container {
    display: flex;
    width: 100%;
    justify-content: center;
    margin: 0px auto;
}

.miniapp-countdown-box {
    border-radius: 6px;
    padding: 5px 15px;
    line-height: 0.9;
    background: linear-gradient(180deg,rgba(231, 143, 165, 0.9) 50%, rgba(155, 74, 95, 0.9) 50%);
    /* border: rgba(255,255, 255, 0.5) 1px solid; */
    margin: 2px;
    font-size: 1.5rem;
    font-weight: 500;
    text-align: center;
}

.miniapp-text-countdown {
    text-align: center;
    margin: 0px;
    /* color: rgba(163, 163, 163, 1); */
    color: white;
    border-radius: 10px;
    padding: 0px;
}

.miniapp-digit {
    color: white;
}

/* /COUNTDOWN */

/* COUPON */
.miniapp-coupon {
    text-align: center;
    width: 100%;
    border-radius: 5rem;
    overflow: hidden;
    margin: auto;
    justify-content: center;
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.5));
    align-items: center;
    border: rgba(255, 255, 255, 0.7) 1px solid;
    background:
        linear-gradient(115deg, rgba(44, 44, 44, 0.35) 0%, rgba(24, 28, 33, 0.85) 50%, rgba(44, 44, 44, 0.35) 100%);
}

.miniapp-coupon-container {
    vertical-align: middle;
}

.btn-info-program {
    border-radius: 8px;
    background: linear-gradient(#FFB03A, #EC1C1C);
    border: white 1px solid;
    color: white;
    font-weight: 500;
}

.text-half-circle {
    translate: -50%, -50%;
    font-family: MINIAPP_Telkomsel_Batik_Sans_Bold;
    /* transform:
                translate(-50%, -50%)
                rotate(calc(360deg / var(15) * var(1)))
                translateY(calc(var(90, 5) * -1ch)); */
}

.miniapp-border-gradient {
    width: 50%;
    height: 1px;
    background: linear-gradient(90deg, transparent, white, transparent);
    margin: 5px auto;
}

.btn.btn-outline-light.text-white:hover {
    color: black !important;
}

.miniapp-btn-menu {
    /* background: linear-gradient(95deg, rgba(243, 1, 36, 1) 0%, rgba(250, 93, 93, 1) 50%, rgba(243, 1, 36, 1) 100%); */
    background: linear-gradient(98.26deg, #92354E 0%, #D08195 50.02%, #92354E 100.03%);
    border-radius: 2.5rem;
    rotate: -2deg;
    /* box-shadow: 3px 3px rgba(115, 0, 18, 1); */
    box-shadow: 4px 4px 0.5px 0px rgba(111, 27, 50, 1);

}

.miniapp-has-coupons,
.miniapp-no-coupons {
    display: none;
}

.miniapp-tab {
    display: grid;
    grid-auto-flow: column;
    background: rgba(239, 241, 244, 1);
    border-radius: 5rem;
    grid-auto-columns: 1fr;
    position: relative;
    border: var(--border) solid rgb(239, 241, 244, 0.1);
    /* border: 4px solid #001A41; */
}

.miniapp-tab {
    --ease: linear(0, 0.1641 3.52%, 0.311 7.18%,
            0.4413 10.99%, 0.5553 14.96%,
            0.6539 19.12%, 0.738 23.5%,
            0.8086 28.15%, 0.8662 33.12%,
            0.9078 37.92%, 0.9405 43.12%,
            0.965 48.84%, 0.9821 55.28%,
            0.992 61.97%, 0.9976 70.09%, 1);
}

.miniapp-tab>input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.miniapp-tab:has(:checked:nth-of-type(1)) {
    --active: 0;
}

.miniapp-tab:has(:checked:nth-of-type(2)) {
    --active: 1;
}

.miniapp-tab:has(:checked:nth-of-type(3)) {
    --active: 2;
}

.miniapp-tab:has(:checked:nth-of-type(4)) {
    --active: 3;
}

.miniapp-tab :checked+label {
    --highlight: 1;
}

.miniapp-tab:has(input:nth-of-type(2)) {
    --count: 2;
}

.miniapp-tab:has(input:nth-of-type(3)) {
    --count: 3;
}

.miniapp-tab:has(input:nth-of-type(4)) {
    --count: 4;
}

.miniapp-tab label {
    padding: 0 clamp(0.5rem, 2vw + 0.25rem, 2rem);
    cursor: pointer;
    text-align: center;
    height: 100%;
    display: grid;
    border-radius: calc(5rem - var(--border));
    place-items: center;
    /* color: #001A41; */
    color: rgba(24, 28, 33, 1);
    transition: background, color;
    transition-duration: 0.25s;
    transition-timing-function: var(--ease, ease);
}

.miniapp-tab-winner {
    display: grid;
    grid-auto-flow: column;
    background: rgb(239, 241, 244, 0.4);
    border-radius: 5rem;
    grid-auto-columns: 1fr;
    position: relative;
    border: var(--border) solid rgb(239, 241, 244, 0.2);
    /* border: 4px solid #001A41; */
}

.miniapp-tab-winner {
    --ease: linear(0, 0.1641 3.52%, 0.311 7.18%,
            0.4413 10.99%, 0.5553 14.96%,
            0.6539 19.12%, 0.738 23.5%,
            0.8086 28.15%, 0.8662 33.12%,
            0.9078 37.92%, 0.9405 43.12%,
            0.965 48.84%, 0.9821 55.28%,
            0.992 61.97%, 0.9976 70.09%, 1);
}

.miniapp-tab-winner>input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.miniapp-tab-winner:has(:checked:nth-of-type(1)) {
    --active: 0;
}

.miniapp-tab-winner:has(:checked:nth-of-type(2)) {
    --active: 1;
}

.miniapp-tab-winner:has(:checked:nth-of-type(3)) {
    --active: 2;
}

.miniapp-tab-winner:has(:checked:nth-of-type(4)) {
    --active: 3;
}

.miniapp-tab-winner :checked+label {
    --highlight: 1;
}

.miniapp-tab-winner:has(input:nth-of-type(2)) {
    --count: 2;
}

.miniapp-tab-winner:has(input:nth-of-type(3)) {
    --count: 3;
}

.miniapp-tab-winner:has(input:nth-of-type(4)) {
    --count: 4;
}

.miniapp-tab-winner label {
    padding: 0 clamp(0.5rem, 2vw + 0.25rem, 2rem);
    cursor: pointer;
    text-align: center;
    height: 100%;
    display: grid;
    border-radius: calc(5rem - var(--border));
    place-items: center;
    color: #ffffff;
    transition: background, color;
    transition-duration: 0.25s;
    transition-timing-function: var(--ease, ease);
}

.miniapp-tab-winner input:not(:checked)+label:hover {
    --highlight: 0.35;
    background: white;
    color: red;
}

.miniapp-tab-winner input:checked+label {
    --highlight: 0.35;
    background: white;
    color: red;
}

.miniapp-tab-winner::after {
    pointer-events: none;
    content: "";
    width: calc(100% / var(--count));
    height: 100%;
    background: rgba(255, 255, 255, 0.5);
    position: absolute;
    color: black;
    z-index: -1;
    border-radius: calc(5rem - var(--border));
    /* mix-blend-mode: exclusion; */
    translate: calc(var(--active, 0) * 100%) 0;
    transition: translate, outline-color;
    transition-duration: var(--speed);
    transition-timing-function: var(--ease, ease);
    /* outline: 2px solid transparent; */
}

.miniapp-tab-winner:has(:focus-visible)::after {
    outline-color: red;
}

input:not(:checked)+label:hover {
    --highlight: 0.35;
    /* background: #001A41; */
    background: #f72e2c;
    color: white;
}

input:checked+label {
    --highlight: 0.35;
    /* background: #001A41; */
    background: #f72e2c;
    color: white;
}

.miniapp-tab::after {
    pointer-events: none;
    content: "";
    width: calc(100% / var(--count));
    height: 100%;
    background: rgba(0, 26, 65);
    position: absolute;
    /* color: black; */
    z-index: -1;
    border-radius: calc(5rem - var(--border));
    /* mix-blend-mode: exclusion; */
    translate: calc(var(--active, 0) * 100%) 0;
    transition: translate, outline-color;
    transition-duration: var(--speed);
    transition-timing-function: var(--ease, ease);
    outline: 2px solid transparent;
}

.miniapp-tab:has(:focus-visible)::after {
    outline-color: red;
}

.miniapp-info-detail p, .miniapp-tnc-detail p {
    /* margin: 0px; */
}

.miniapp-info-detail ol, .miniapp-tnc-detail ol, .miniapp-info-detail ul, .miniapp-tnc-detail ul {
    padding-inline-start: 1rem !important;
}

.table-leaderboard tr>td:nth-child(1), .table-leaderboard-racing tr>td:nth-child(1), .table-racing-winner tr>td:nth-child(1) {
    color: var(--bs-secondary-color)!important;
    width: 46px;
    text-align: center;
    align-content: center;
    background-color: transparent !important;
}

.table-leaderboard tr>td:nth-child(2), .table-leaderboard-racing tr>td:nth-child(2), .table-racing-winner tr>td:nth-child(2) {
    font-weight: 600;
    align-content: center;
    background-color: transparent !important;
}

.table-leaderboard tr>td:nth-child(3), .table-leaderboard-racing tr>td:nth-child(3), .table-racing-winner tr>td:nth-child(3) {
    text-align: right;
    align-content: center;
    background-color: transparent !important;
}

.table-leaderboard tr>td:last-child, .table-leaderboard-racing tr>td:last-child, .table-racing-winner tr>td:last-child {
    text-align: right;
    align-content: center;
    background-color: transparent !important;
}

.miniapp-container-btn-pagination {
    position: fixed;
    bottom: 15px;
    left: 0px;
    width: 100%;
}

/* Overlay */
.miniapp-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: flex-end; /* Modal di bawah */
    z-index: 999;
}

/* Modal Box */
.miniapp-modal-pagination,.miniapp-modal-peringkat, .miniapp-modal-pemenang, .miniapp-modal-periode,.miniapp-modal-pemenang-racing, .miniapp-modal-pemenang-racing {
    background: white;
    width: 100%;
    max-height: 80vh;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    bottom: 0px;
    padding: 16px;
    /* margin-bottom: 20px; */
    box-sizing: border-box;
    animation: slideUp 0.3s ease;
    position: fixed;
}

/* Animasi muncul dari bawah */
@keyframes slideUp {
    from {
    transform: translateY(100%);
    }
    to {
    transform: translateY(0);
    }
}

.miniapp-modal-header {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}

.miniapp-modal-body {
    max-height: 60vh;
    min-height: 30vh;
    margin-bottom: 10px;
    overflow-y: auto;
}

.miniapp-modal-footer {
    text-align: center;
}

.miniapp-close-btn {
    text-align: center;
    color: #fff;
    background-color: #888;
    border-radius: 1rem;
    font-size: 20px;
    line-height: 20px;
    width: 24px;
    height: 24px;
    padding: 2px;
    cursor: pointer;
    z-index: 999;
}

.miniapp-page-select-value {
    margin: 2px;
    padding: 10px;
    display: block;
}

input[type="radio"]:checked + .miniapp-page-select-value{
    background-color: rgb(227, 228, 230);
    color: black;
}

.miniapp-btn-page-select{
    width: 90%;
    background: #f72e2c;
}

.rank-badge {
    position: relative;
    background-color: #a5022b;
    padding: 5px;
    color: white;
}

.rank-badge:before {
    position: absolute;
    content: '';
}

.rank-badge:before {
    top: 2px;  /* border width */
    left: 2px;  /* border width */
    height: calc(100% - 4px);  /* 100% - (2 * border width) */
    width: calc(100% - 4px);  /* 100% - (2 * border width) */
    background: linear-gradient(120deg, #ffffff 0%, #f71c53 50%, #ffffff 100%);
}

.rank-badge, .rank-badge:before {
    clip-path: polygon(50% 0%, 90% 25%, 90% 75%, 50% 100%, 10% 75%, 10% 25%);
}

.header-video-winner {
    background: linear-gradient(180deg, #E78FA5 0%, #FFFCFD 116.91%);
    border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width))) calc(var(--bs-border-radius) - (var(--bs-border-width))) 0px 0px;
    padding: 1rem;
}

.card {
    --bs-border-radius: 1rem;
}

.card-leaderboard-winner {
    background: linear-gradient(123.96deg, #FF547F -27.5%, #FDDAE3 81.72%);
}

.card-leaderboard-participant {
    background: linear-gradient(90deg, #FFEAC5 0%, white 100%);
    font-family: MINIAPP_Poppins_Regular;
    border-radius: 1rem !important;
}

.miniapp-btn-coupon {
    background: linear-gradient(0deg, rgba(236, 28, 28, 1) 0%, rgba(255, 176, 58, 1) 100%);
}