/* ------------------ */
/* ----  new css ---- */
/* ------------------ */
menu {
    margin: 0;
    padding-top: 5px;
    display: flex !important;
    align-items: center;
}

.page-wrapper {
    width: 100%;
    position: relative;
    /* margin-top: 60px; */
}

.top-bar {
    flex: 3;
    background-color: #D9336B;
    border: 1px solid #D9336B;
}

.bottom-bar {
    flex: 1;
    background-color: #9F2755;
    border: 1px solid #9F2755;
    filter: blur(2px);
}

.stage-container {
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: relative;
    align-items: center;
    padding: 150px 0 80px 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stage-content {
    /* display: flex;
    flex-direction: column;
    align-items: center; */
    width: -webkit-fill-available;
    position: relative;
    z-index: 2;
}

.stage-content .page-vote .container-fluid .content {
    display: flex;
    justify-content: flex-start;
    gap: 30px;
    width: 100%;
}

.spotlights-image {
    position: absolute;
    top: 0;
    left: 48%;
    transform: translateX(-50%);
    width: auto;
    height: auto;
    z-index: 1;
    pointer-events: none;
    max-height: 650px;
}

.page-vote-countdown .content-box {
    background-color: #B9305EC2;
    border: 3px solid #124F9B;
    border-radius: 20px;
    padding: 20px 60px;
    text-align: center;
    color: white;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
    z-index: 10;
    width: max-content;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.page-soon .content-box {
    background-color: #7A1A3C;
    border-radius: 100px;
    padding: 20px 60px;
    text-align: center;
    color: white;
    z-index: 10;
    width: max-content;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
}

.cartoon-star {
    position: absolute;
    bottom: 12%;
    width: 15vw;
    animation: float-no-rotate 6s ease-in-out infinite;
    z-index: 1;
}

.decoration {
    position: absolute;
    width: 2vw;
}

.decoration.v2 {
    width: 5vw;
}

.decoration.v3 {
    width: 10vw;
}

.jelly-cubes {
    position: relative;
    bottom: 100px;
    right: -320px;
    width: 150px;
    z-index: 2;
}

.float-10 {
    animation: float-10 6s ease-in-out infinite;
}

.float-30 {
    animation: float-30 6s ease-in-out infinite;
}

.float-50 {
    animation: float-50 6s ease-in-out infinite;
}

@keyframes float-10 {
    0% {
        transform: translateY(0px) rotate(10deg);
    }

    50% {
        transform: translateY(-20px) rotate(10deg);
    }

    100% {
        transform: translateY(0px) rotate(10deg);
    }
}

@keyframes float-30 {
    0% {
        transform: translateY(0px) rotate(30deg);
    }

    50% {
        transform: translateY(-20px) rotate(30deg);
    }

    100% {
        transform: translateY(0px) rotate(30deg);
    }
}

@keyframes float-50 {
    0% {
        transform: translateY(0px) rotate(50deg);
    }

    50% {
        transform: translateY(-20px) rotate(50deg);
    }

    100% {
        transform: translateY(0px) rotate(50deg);
    }
}

.float-no-rotate {
    animation: float-no-rotate 6s ease-in-out infinite;
}

@keyframes float-no-rotate {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0px);
    }
}

.h1-ygt2025.v2 {
    font-size: 80px;
    margin: 0;
    color: #8E103A;
    -webkit-text-stroke-color: #fff;
    text-shadow: none;
}

.instructions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
    justify-items: center;
    justify-content: center;
    margin-top: 40px;
}

.instructions-grid.v2 {
    grid-template-columns: repeat(2, 1fr);
    width: 50%;
}

.instruction-card {
    position: relative;
    background-color: #8E103AC7;
    border-radius: 20px;
    padding: 40px 20px 20px 20px;
    text-align: center;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: 200px;
    transition: background-color 0.3s ease;
}

.instruction-card:hover {
    background-color: rgba(185, 56, 110, 0.85);
}

.instruction-card:nth-child(4) {
    grid-column-start: 2;
}

.star-number {
    position: absolute;
    top: -30px;
    left: -20px;
    width: 70px;
    height: 70px;
    background-image: url('../images/ygt2025/web/star-number.png');
    /* Star image */
    background-size: contain;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5em;
    -webkit-text-stroke-width: 8px;
}

.instruction-card-icon {
    width: auto;
    height: auto;
    margin-bottom: 10px;
    min-height: 120px;
    min-width: 100px;
}

.instruction-card-text {
    font-weight: 600;
    font-size: 1.2em;
    margin: 0;
    line-height: 1.4;
}

/* --- FILTER BUTTONS --- */
.filter-container .filter-buttons {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding: 10px 0 20px 0;
    scrollbar-width: none;
}

.filter-container .filter-buttons::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari */
}

.filter-btn {
    flex-shrink: 0;
    padding: 10px 25px;
    background-color: #A4255F;
    color: white;
    border: 1px solid #fff;
    border-radius: 50px;
    font-size: 1em;
    font-weight: 500;
    cursor: pointer;
}

.filter-btn.active {
    background-color: #124F9B;
    color: #FFFFFF;
}

.filter-select-wrapper {
    display: none;
    /* Sembunyikan di desktop secara default */
    width: 100%;
}

.filter-select {
    width: 100%;
    background-color: rgba(185, 56, 110, 0.9);
    border: 2px solid #8E24aa;
    border-radius: 50px;
    color: white;
    padding: 10px 20px;
    font-size: 1em;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg fill="white" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
    background-repeat: no-repeat;
    background-position: right 15px center;
}

.search-container {
    display: flex;
    justify-content: flex-start;
    padding-bottom: 20px;
}

.search-wrapper {
    position: relative;
    width: 100%;
    max-width: 68%;
}

.search-icon {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" viewBox="0 0 16 16"><path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/></svg>');
    background-repeat: no-repeat;
    z-index: 2;
}

#search-input {
    background-color: rgba(185, 56, 110, 0.9);
    border: 2px solid #8E24aa;
    border-radius: 50px;
    color: white;
    font-size: 1em;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 25px 10px 45px;
}

#search-input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

#search-input:focus {
    outline: none;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* --- CONTESTANT GRID --- */
.contestant-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    gap: 25px;
    padding: 0 0 120px;
    width: 100%;
    max-width: 70%;
}

.contestant-grid.fitted {
    padding-bottom: 600px;
    min-height: auto;
    width: 100%;
}

.leaderboard {
    max-width: 30%;
    width: auto;
    background: #8E103AB2;
    border-radius: 25px;
    height: auto;
    max-height: 80vh;
    padding: 30px 20px;
}

.leaderboard.mobile {
    display: none;
}

.leaderboard h1 {
    font-size: 2em;
    margin: 0 0 30px;
    font-weight: 600;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.leaderboard h1 img {
    width: 30px;
}

.leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    overflow: scroll;
    max-height: 85%;
}

.leaderboard-list .loading-text {
    color: white;
    text-align: center;
    font-style: italic;
}

.leaderboard-item {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(255, 255, 255, 0.1);
    padding: 10px;
    border-radius: 15px;
    transition: background 0.3s ease;
}

.leaderboard-item:hover {
    background: rgba(255, 255, 255, 0.2);
}

.leaderboard-item .rank {
    font-size: 1.8em;
    color: #ffd93d;
    /* Warna kuning */
    width: 30px;
    text-align: center;
    flex-shrink: 0;
}

.leaderboard-item .profile-pic-small {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid white;
    flex-shrink: 0;
}

.leaderboard-item .info {
    flex-grow: 1;
    color: white;
    min-width: 0;
}

.leaderboard-item .name {
    font-weight: 600;
    font-size: 1.1em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.leaderboard-item .votes {
    font-size: 0.9em;
    opacity: 0.8;
}

.contestant-card {
    background-color: transparent;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.contestant-card.is-hidden {
    opacity: 0;
    transform: scale(0.9);
    pointer-events: none;
    /* Make it non-interactive while hidden */
}

.video-thumbnail {
    position: relative;
    cursor: pointer;
}

.video-thumbnail img {
    display: block;
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid #fff;
}

.video-thumbnail::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    transition: background-color 0.3s ease;
    border-radius: 12px;
    z-index: 1;
}

.video-thumbnail:hover::after {
    background-color: rgba(0, 0, 0, 0.3);
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.play-button::after {
    margin-top: 5px;
    content: '\25BA';
    font-size: 20px;
    margin-left: 5px;
    color: #000;
}

.info-bar {
    padding: 10px 15px;
    text-align: center;
    color: white;
    display: flex;
    align-items: center;
    margin-top: 10px;
    border: 1px solid #fff;
    border-radius: 12px;
    background: #D9336B;
    height: -webkit-fill-available;
    min-height: 50px;
}

.contestant-name {
    font-size: 1.2em;
    font-weight: 700;
    margin: 0;
    text-align: left;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.contestant-name:hover,
.info-bar:hover .contestant-name {
    text-decoration: none;
    color: #fff;
}

.contestant-category {
    font-size: 0.9em;
    font-weight: 500;
    opacity: 0.8;
    margin: 0;
    text-align: right;
    width: 110px;
}

.action-bar {
    display: flex;
    padding: 10px 0;
    gap: 10px;
    align-items: center;
}

.votes-btn,
.vote-btn {
    flex: 1;
    padding: 12px;
    border-radius: 12px;
    font-size: 1.4em;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    margin: 0;
    line-height: 1;
}

.votes-btn {
    background-color: #F5CA03;
    color: #124F9C;
    border: 2px solid #F5CA03;
}

.profile-actions .vote-btn {
    padding: 15px 30px;
    width: fit-content;
}

.vote-btn {
    background: linear-gradient(180deg, #2865B3 0%, #0D4A97 100%);
    color: white;
    border: 2px solid #FF8AB2;
    transition: background-color 0.3s ease;
}

.vote-btn:hover {
    color: #fff;
    background: linear-gradient(180deg, #1f4f8e 0%, #0a3975 100%);
}

.vote-btn.login-required {
    font-size: 1em;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.vote-btn.login-required:hover {
    color: #F5CA03;
}

.vote-btn.voted {
    background: linear-gradient(180deg, #FE88B0 0%, #DD2637 100%);
    color: white;
    border: 2px solid #104D9A;
    transition: background-color 0.3s ease;
}

.vote-btn.voted:hover {
    background: linear-gradient(180deg, #d46a92 0%, #b11d2c 100%);
    color: white;
}

/* --- SHARE BUTTON --- */
.share-button-container {
    text-align: center;
    padding: 20px 0 60px 0;
}

.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 40px;
    background-color: #94244A;
    color: white;
    border: 2px solid #fff;
    border-radius: 25px;
    font-size: 1.2em;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.share-btn:hover {
    color: #fff;
    background-color: #D9336B;
}

.share-btn img {
    width: 24px;
}

#load-more-btn {
    background-color: #ffd93d;
    color: #A47B00;
    transition: background-color 0.3s ease;
}

#load-more-btn:hover {
    background-color: #A47B00;
    color: #fff;
}


/* profile */
.profile-page-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: flex-start;
    padding: 20px 0;
    width: 100%;
    margin-bottom: 100px;
}

.profile-sidebar {
    background-color: #8E103AB2;
    border-radius: 25px;
    padding: 30px;
    color: white;
    text-align: center;
    flex: 1 1 300px;
    max-width: 350px;
    height: -webkit-fill-available;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.profile-actions {
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.sidebar-title {
    font-weight: 700;
    font-size: 1.5em;
    margin: 0 0 20px 0;
}

.profile-picture-wrapper {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 5px solid white;
    overflow: hidden;
    margin: 0 auto 20px auto;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.profile-picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-name {
    font-weight: 700;
    font-size: 2em;
    margin: 0 0 10px 0;
    line-height: 1.2;
    text-align: center;
    -webkit-line-clamp: 3;
    cursor: pointer;
}

.tippy-box[data-theme~='yupi-theme'] {
    background: linear-gradient(180deg, #2865B3 0%, #0D4A97 100%);
    color: white;
    border-radius: 10px;
    font-size: 1em;
    line-height: 1.4;
}

.tippy-box[data-theme~='yupi-theme'][data-placement^='top']>.tippy-arrow::before {
    border-top-color: linear-gradient(180deg, #2865B3 0%, #0D4A97 100%);
}

.tippy-box[data-theme~='yupi-theme'][data-placement^='bottom']>.tippy-arrow::before {
    border-bottom-color: linear-gradient(180deg, #2865B3 0%, #0D4A97 100%);
}

.profile-category {
    font-size: 1.4em;
    font-weight: 500;
    margin: 0 0 15px 0;
    opacity: 0.9;
}

.profile-votes {
    font-size: 2.5em;
    font-weight: 600;
}

.profile-video-player {
    flex: 2 1 500px;
    border-radius: 25px;
    background-color: #fff;
}

.profile-video-player.is-youtube {
    position: relative;
    height: -webkit-fill-available;
    min-height: 560px;
}

.profile-video-player.is-youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.profile-video-player.is-tiktok {
    max-height: 560px;
    height: auto;
    display: flex;
    justify-content: center;
}

.profile-video-player.is-tiktok blockquote {
    margin: 0 !important;
    border: none;
    padding: 0;
}

.play-button-large {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.play-button-large:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

.play-button-large::after {
    content: '';
    border-style: solid;
    border-width: 18px 0 18px 28px;
    border-color: transparent transparent transparent #2A5DA9;
    margin-left: 5px;
}

.swal2-icon-content {
    color: #87adbd;
}

.swal2-container .swal2-popup {
    border-radius: 20px;
    padding: 20px 40px;
    width: 30%;
}

.swal2-title {
    font-size: 2em;
}

.swal2-html-container {
    font-size: 1.4em;
}

button.swal2-styled {
    font-size: 1.3em;
}

@media only screen and (min-width: 1500px) {
    .video-thumbnail img {
        height: 250px;
    }
}

@media only screen and (max-width: 1024px) {
    menu {
        background: unset;
        margin: unset;
        padding-bottom: unset;
        padding-top: unset;
        display: unset !important
    }

    .btn-icon-home {
        margin-right: -10px !important;
    }

    .page-wrapper {
        margin-top: 0;
    }

    .h1-ygt2025 {
        font-size: 30px;
    }

    .h1-ygt2025.v2 {
        font-size: 4rem;
    }

    .spotlights-image {
        max-width: unset;
        height: auto;
    }

    .decoration {
        width: 5vw;
    }

    .decoration.v2,
    .decoration.v3 {
        width: 10vw;
    }

    .cartoon-star {
        position: unset;
        margin-top: 40px;
        width: 30vw;
    }

    .jelly-cubes {
        display: none;
    }

    .page-vote-countdown .content-box {
        padding: 15px;
    }

    .instructions-grid,
    .instructions-grid.v2 {
        grid-template-columns: 1fr;
        width: 90%;
        margin: 20px auto 10px;
    }

    .instruction-card {
        margin-top: 10px;
        margin-bottom: 0;
        width: 100%;
        max-width: 350px;
    }

    .contestant-grid {
        grid-template-columns: repeat(2, minmax(280px, 1fr));
        max-width: 100%;
    }

    .search-wrapper {
        max-width: 100%;
    }

    .profile-sidebar {
        max-width: 100%;
        max-height: unset;
        height: auto;
        min-height: 510px;
    }

    .profile-name {
        -webkit-line-clamp: 1;
    }

    .profile-votes {
        margin-bottom: 30px;
    }

    .profile-video-player.is-youtube {
        height: 560px;
    }

    .profile-video-player.is-youtube iframe {
        position: relative;
    }

    .profile-actions .vote-btn {
        margin-bottom: 20px;
    }

    .page-soon .content-box {
        padding: 40px 30px;
        border-radius: 50px;
    }

    .page-soon .content-box .social-media {
        display: flex;
        justify-content: space-between;
        align-items: flex-start !important;
        flex-direction: column;
        gap: 10px;
        margin-top: 30px;
    }

    .stage-content .page-vote .container-fluid .content .leaderboard {
        display: none;
        max-width: unset;
    }

    .leaderboard.mobile {
        margin: 0 20px;
        display: block;
        max-width: 100%;
    }

    .leaderboard.mobile .leaderboard-list {
        max-height: 60vh;
    }
}

@media only screen and (max-width: 750px) {
    .contestant-grid {
        grid-template-columns: repeat(1, minmax(280px, 1fr));
        width: auto;
    }

    .contestant-grid.fitted {
        padding-bottom: 0px;
    }

    .profile-video-player {
        flex-basis: 100%;
        width: 100%;
    }

    .profile-video-player.is-tiktok blockquote {
        padding: 0 25px;
    }

    .filter-container .filter-buttons {
        display: none;
    }

    .filter-select-wrapper {
        display: block;
        margin-bottom: 15px;
    }

    .swal2-container .swal2-popup {
        width: 90%;
    }

    .swal2-title {
        font-size: 2.3em;
    }

    .swal2-html-container {
        font-size: 1.6em;
    }

    button.swal2-styled {
        font-size: 1.5em;
    }

    .page-soon {
        width: 90% !important;
    }

    .h1-page-soon {
        line-height: 1;
        margin-bottom: 30px;
    }

    .page-soon .content-box .social-media a {
        display: flex;
        gap: 5px;
    }
}