/* Extra styles for the RTD page on top of coloringv2.css (container, body bg, banner, accordion all reused from there) */

.rtd-upload-banner {
    display: block;
    width: 100%;
    height: fit-content;
    /* kills the inline-image whitespace gap without setting `display` here,
       which would out-specificity coloringv2.css's .coloring-banner-mobile{display:none} */
    line-height: 0;
    border-radius: 20px 20px 0 0;
    overflow: hidden;
}

.rtd-upload-banner img {
    width: 100%;
}

/* mechanism section: same width (100% of .container-coloring-lsi) and
   border-radius as .rtd-leaderboard-card just below it */
.rtd-mechanism-section {
    display: block;
    width: 100%;
    height: fit-content;
    line-height: 0;
    border-radius: 30px;
    overflow: hidden;
    margin-bottom: 3rem;
}

.rtd-mechanism-section img {
    width: 100%;
}

.rtd-upload-section {
    background-color: #14338f;
    border-radius: 0 0 20px 20px;
    padding: 1rem 6.5rem;
    text-align: center;
}

.rtd-upload-section h3 {
    color: white;
    font-size: 20px;
    margin: 0 0 0.5rem;
}

.rtd-leaderboard-card {
    /* TODO: swap in the real decorated background (stars/sparkles) from landingpage-rtd.png */
    /*background-color: #0a2a6b;*/
    background-image: url('https://www.ibudanbalita.com/assets/images/rtd-event/leaderboard-background-desktop.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 30px;
    padding: 2rem;
    margin-bottom: 3rem;
}

/* coloringv2.css's .unduh-text carries `margin-top: 5rem !important`, meant for a
   heading that follows a large preceding section on the original coloring page.
   Nested inside this smaller card it just pushes the title down unevenly, so it
   needs its own !important override to actually win. It also flips to
   flex-direction: column below 431px (meant for a two-line heading elsewhere),
   which stacks our flanking icons above/below "LEADERBOARD" instead of beside it
   -- .rtd-leaderboard-card .unduh-text has higher specificity than the bare
   .unduh-text rule in that media query, so this wins without needing !important. */
.rtd-leaderboard-card .unduh-text {
    margin-top: 0 !important;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

/* coloringv2.css's .unduh-text h2:last-of-type sets a gold color (#efdc69),
   meant for the second line of a two-tone heading elsewhere. Our single "LEADERBOARD"
   h2 is both first and last of type, so it picks that up too -- mockup wants white here. */
.rtd-leaderboard-card .unduh-text h2 {
    color: #fff !important;
}

.rtd-leaderboard-scroll {
    max-height: 420px;
    overflow-y: auto;
    border-radius: 12px;
    background-color: #fff;
}

.rtd-leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    color: #0a2a6b;
}

.rtd-leaderboard-table th {
    position: sticky;
    top: 0;
    background-color: #e8edfb;
    padding: 0.75rem;
    text-align: left;
    color: #0a2a6b;
}

.rtd-leaderboard-table td {
    padding: 0.6rem 0.75rem;
    border-top: 1px solid #eee;
    text-align: left;
}

.rtd-leaderboard-table .rtd-rank-1,
.rtd-leaderboard-table .rtd-rank-2,
.rtd-leaderboard-table .rtd-rank-3,
.rtd-leaderboard-table .rtd-rank-4,
.rtd-leaderboard-table .rtd-rank-5 {
    font-weight: 800;
    color: #b8860b;
}

.rtd-spending-cell {
    white-space: nowrap;
}

.rtd-title-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    vertical-align: middle;
}

.rtd-title-icon-right {
    transform: scaleX(-1);
}

.rtd-rank-cell {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.rtd-rank-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    object-fit: contain;
    margin-right: 6px;
    vertical-align: middle;
    flex-shrink: 0;
}

.rtd-dropzone {
    width: 100%;
    height: 5.5rem;
    margin: 1.5rem 0 0;
    border: none;
    border-radius: 24px;
    background-color: #b4cdf0;
}

.rtd-dropzone-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.rtd-dropzone span {
    color: #174586;
    font-size: 20px;
    font-weight: 500;
}

.rtd-dropzone-hint {
    font-size: 0.85rem;
    font-weight: 400;
    color: #fff;
    text-align: center;
    margin-top: 0.75rem;
}

.rtd-login-notice {
    color: white;
}

.rtd-preview-container {
    max-width: 30rem;
    margin: 1.5rem auto 0;
    text-align: center;
}

.rtd-preview-image {
    width: 100%;
    max-height: 20rem;
    object-fit: contain;
    border-radius: 12px;
    background-color: #fff;
}

.rtd-preview-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}

.rtd-btn-primary,
.rtd-btn-secondary {
    padding: 0.6rem 2rem;
    border-radius: 999px;
    font-weight: 800;
    border: none;
    cursor: pointer;
    font-size: 16px;
}

.rtd-btn-primary {
    background-image: linear-gradient(to right, #ffe70d, #ffbf00);
    color: #174586;
}

.rtd-btn-secondary {
    background-color: transparent;
    color: #fff;
    border: 1px solid #fff;
}

/* coloringv2.css's .popup-coloring-content has a fixed width but no height
   cap, so a portrait struk photo (much taller than wide) forces the image --
   and the close button positioned above it at top:-40px -- off the top/bottom
   of short viewports (laptop windows, landscape phones). Capping the image to
   a share of the viewport height keeps the whole popup, close button
   included, on screen regardless of the photo's orientation or resolution. */
#rtd-sample-popup .popup-coloring-content {
    width: auto;
    max-width: min(48rem, 90vw);
}

#rtd-sample-popup .popup-coloring-content img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 75vh;
    object-fit: contain;
}

.rtd-success-popup-content {
    background-color: #fff;
    width: 24rem;
    max-width: 90vw;
    height: auto;
    border-radius: 20px;
    padding: 2.5rem 2rem;
    text-align: center;
}

.rtd-success-icon,
.rtd-error-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 0;
    border-radius: 50%;
    color: #fff;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rtd-success-icon {
    background-color: #2ecc71;
}

.rtd-error-icon {
    background-color: #e74c3c;
}

.rtd-success-message {
    color: #174586;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 1.5rem;
    white-space: pre-line;
}

.rtd-success-title {
    font-size: 22px;
    font-weight: 800;
}

#rtd-success-popup .rtd-success-message {
    font-size: 15px;
    font-weight: 500;
}

.rtd-loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.rtd-spinner {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 5px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffbf00;
    animation: rtd-spin 0.8s linear infinite;
}

.rtd-loading-text {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

@keyframes rtd-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 480px) {
    /* 480px covers the widest current phones (iPhone 16 Pro Max is 440px) with
       headroom -- 431px cut it off before the table's mobile layout applied.
       Phone/spending digits must never truncate -- that's the data people
       are visually checking against their own struk/number. Nama truncates
       to one line with an ellipsis instead, since it's the one column whose
       full value doesn't need to survive on-screen -- tapping it (see
       rtd-name-tooltip JS) reveals the full name instead. */
    .rtd-leaderboard-table th,
    .rtd-leaderboard-table td {
        font-size: 11px;
        padding: 0.3rem 0.25rem;
    }

    .rtd-leaderboard-table td:not(:nth-child(2)) {
        white-space: nowrap;
    }

    .rtd-leaderboard-table td:nth-child(2) {
        max-width: 55px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: pointer;
    }

    .rtd-rank-icon {
        width: 12px;
        height: 12px;
        margin-right: 2px;
    }

    /* coloringv2.css (shared sitewide) only flips banners to their mobile
       version at its own max-width:431px breakpoint -- can't change that
       globally without affecting other pages, so RTD (which needs mobile
       up to 480px) overrides it here for the 432-480px gap. */
    .coloring-banner-mobile {
        display: block !important;
    }
    .coloring-banner-desktop {
        display: none !important;
    }

    .rtd-upload-section {
        padding: 1rem 1.5rem;
    }
}

.rtd-name-tooltip {
    display: none;
    position: fixed;
    z-index: 1000000;
    background: #0a2a6b;
    color: #fff;
    font-size: 13px;
    padding: 6px 10px;
    border-radius: 6px;
    max-width: 220px;
    word-break: break-word;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.rtd-name-tooltip.visible {
    display: block;
}