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

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

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

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

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

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

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

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

@font-face {
    font-family: SIMPT_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% 100px, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(ellipse 150px 50px at 50% 350px, #FFF, transparent),
        radial-gradient(ellipse 450px 250px at 50% 350px, #FDA22B, transparent),
        radial-gradient(circle 200px at bottom right, #0050AE, transparent),
        rgba(237, 2, 38, 0.9);
}

.simpt-container {
    width: 100%;
    max-width: 375px;
    min-height: 100vh;
    margin: 0px auto;
    padding: 50px 0px 30px;
}

.simpt-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;
}

.simpt-btn-info-program {
    margin: -65px auto 10px;
    border-radius: 20px;
}

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

.simpt-countdown-box {
    border-radius: 6px;
    padding: 2px 10px 5px;
    line-height: 0.9;
    background: linear-gradient(0deg, rgba(24, 28, 33, 0.5) 50%, rgba(24, 28, 33, 0.35) 50%);
    /* border: rgba(255,255, 255, 0.5) 1px solid; */
    margin: 8px 6px 4px;
    font-size: 1.5rem;
    font-weight: 500;
    text-align: center;
}

.simpt-text-countdown {
    text-align: center;
    margin: 0px;
    color: white;
    border-radius: 10px;
    padding: 0px;
}

.simpt-digit {
    color: white;
}

/* /COUNTDOWN */

/* COUPON */
.simpt-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%);
}

.simpt-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: SIMPT_Telkomsel_Batik_Sans_Bold;
    /* transform:
                translate(-50%, -50%)
                rotate(calc(360deg / var(15) * var(1)))
                translateY(calc(var(90, 5) * -1ch)); */
}

.simpt-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;
}

.simpt-btn-menu {
    background: linear-gradient(95deg, rgba(243, 1, 36, 1) 0%, rgba(250, 93, 93, 1) 50%, rgba(243, 1, 36, 1) 100%);
    border-radius: 2.5rem;
    rotate: -2deg;
    box-shadow: 3px 3px rgba(115, 0, 18, 1);
}

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

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

.simpt-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);
}

.simpt-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;
}

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

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

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

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

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

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

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

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

.simpt-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;
    transition: background, color;
    transition-duration: 0.25s;
    transition-timing-function: var(--ease, ease);
}

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

.simpt-tab::after {
    pointer-events: none;
    content: "";
    width: calc(100% / var(--count));
    height: 100%;
    background: rgba(0, 26, 65);
    position: absolute;
    /* color: black; */
    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;
}

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