/* Vermelho do ranking; os temas do site trocam pela cor principal (helpers/Theme.php). */
.ranking {
    --ranking-red: #e10600;
    --ranking-red-soft: #ff6b6b;
    --ranking-red-bright: #ff3b35;
    --ranking-red-light: #ff4d4d;
    --ranking-red-deep: #b80000;
    --ranking-red-deeper: #a90000;
}

.ranking-general {
    --ranking-bg: #050505;
    --ranking-card: #111111;
    --ranking-row: #0d0d0d;
    --ranking-text: #f8fafc;
    --ranking-muted: #9ba8b7;
    --ranking-border: rgba(255, 255, 255, .08);
    width: 100%;
    margin-top: 12px;
    padding: 16px;
    border: 1px solid var(--ranking-border);
    border-radius: 14px;
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--ranking-red) 20%, transparent), transparent 38%),
        var(--ranking-bg);
    color: var(--ranking-text);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
}

.ranking-general.ranking-light {
    --ranking-bg: #f4f7fa;
    --ranking-card: #ffffff;
    --ranking-row: #ffffff;
    --ranking-text: #17202b;
    --ranking-muted: #687586;
    --ranking-border: rgba(23, 32, 43, .1);
}

.ranking-header h4 {
    margin: 2px 0 4px;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: .01em;
}

.ranking-promo-countdown {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 0 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--ranking-red) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--ranking-red) 25%, transparent);
    text-align: center;
}

.ranking-promo-countdown span {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ranking-muted);
}

.ranking-promo-countdown strong {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--ranking-red-soft);
    font-variant-numeric: tabular-nums;
}

.ranking-promo-progress {
    width: 100%;
    height: 6px;
    margin: 0 0 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    overflow: hidden;
}

.ranking-general.ranking-light .ranking-promo-progress {
    background: rgba(23, 32, 43, .08);
}

.ranking-promo-progress span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--ranking-red), var(--ranking-red-soft));
    transition: width 1s linear;
}

.ranking-name-wrap {
    min-height: 1.35em;
    margin-bottom: 6px;
    overflow: hidden;
}

.ranking-name-blurred {
    margin: 0;
    filter: blur(9px);
    opacity: .55;
    user-select: none;
    pointer-events: none;
    transform: scale(1.02);
}

.ranking-tickets-count {
    display: block;
    font-size: 1.35rem !important;
    line-height: 1.1;
    color: var(--ranking-text);
    filter: none !important;
    opacity: 1 !important;
}

.podium-card.podium-gold .ranking-tickets-count {
    color: #ffd166;
}

.ranking-header {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 13px;
}

.ranking-trophy {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 12px;
    background: linear-gradient(145deg, var(--ranking-red-bright), var(--ranking-red-deep));
    font-size: 1.35rem;
    box-shadow: 0 7px 18px color-mix(in srgb, var(--ranking-red) 28%, transparent);
}

.ranking-label {
    display: block;
    margin-bottom: 2px;
    color: var(--ranking-red-bright);
    font-size: .61rem;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.ranking-header h4 {
    margin: 0;
    color: var(--ranking-text);
    font-size: 1.05rem;
    font-weight: 800;
    text-transform: uppercase;
}

.ranking-header p {
    margin: 2px 0 0;
    color: var(--ranking-muted);
    font-size: .72rem;
}

.ranking-podium {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: 8px;
    padding-top: 22px;
}

.podium-card {
    position: relative;
    min-width: 0;
    padding: 28px 7px 15px;
    overflow: visible;
    border: 1px solid var(--ranking-border);
    border-radius: 12px 12px 7px 7px;
    background: var(--ranking-card);
    text-align: center;
    box-shadow: 0 9px 20px rgba(0, 0, 0, .16);
}

.podium-card.podium-gold {
    min-height: 151px;
    border-color: rgba(255, 196, 35, .75);
    background:
        linear-gradient(180deg, rgba(255, 196, 35, .26), transparent 72%),
        var(--ranking-card);
    transform: translateY(-16px);
    z-index: 2;
}

.podium-card.podium-silver {
    min-height: 129px;
    border-color: rgba(210, 219, 229, .42);
    background:
        linear-gradient(180deg, rgba(214, 222, 231, .17), transparent 72%),
        var(--ranking-card);
}

.podium-card.podium-bronze {
    min-height: 116px;
    border-color: rgba(205, 126, 66, .45);
    background:
        linear-gradient(180deg, rgba(205, 126, 66, .16), transparent 72%),
        var(--ranking-card);
}

.podium-medal {
    position: absolute;
    top: -22px;
    left: 50%;
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    border: 3px solid var(--ranking-bg);
    border-radius: 50%;
    background: var(--ranking-card);
    font-size: 1.45rem;
    transform: translateX(-50%);
}

.podium-gold .podium-medal {
    width: 50px;
    height: 50px;
    top: -27px;
    background: linear-gradient(145deg, #ffe275, #d99b00);
    box-shadow: 0 7px 18px rgba(255, 184, 0, .35);
    font-size: 1.65rem;
}

.podium-place {
    display: block;
    margin-bottom: 8px;
    color: var(--ranking-muted);
    font-size: .57rem;
    font-weight: 900;
    letter-spacing: .8px;
}

.podium-gold .podium-place {
    color: #ffc62e;
}

.podium-card h3 {
    min-height: 28px;
    margin: 0 0 7px;
    overflow: hidden;
    color: var(--ranking-text);
    font-size: .7rem;
    font-weight: 800;
    line-height: 1.2;
    text-overflow: ellipsis;
    text-transform: uppercase;
}

.podium-card strong {
    display: block;
    color: var(--ranking-text);
    font-size: .9rem;
    font-weight: 900;
}

.podium-card small {
    display: block;
    color: var(--ranking-muted);
    font-size: .57rem;
}

.ranking-spent-value {
    display: block;
    margin-top: 2px;
    color: #16a34a;
    font-size: .68rem;
    font-weight: 800;
}

.ranking-user-spent {
    margin: 4px 0 0;
    color: #16a34a;
    font-size: .78rem;
    font-weight: 700;
}

.podium-base {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 5px;
    border-radius: 0 0 7px 7px;
    background: #aeb8c3;
}

.podium-gold .podium-base {
    background: linear-gradient(90deg, #b57d00, #ffe05c, #b57d00);
}

.podium-bronze .podium-base {
    background: #bd7440;
}

.ranking-leader {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 96px;
    padding: 14px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--ranking-red-bright) 55%, transparent);
    border-radius: 13px;
    background:
        linear-gradient(110deg, color-mix(in srgb, var(--ranking-red) 28%, transparent), color-mix(in srgb, var(--ranking-red-deep) 8%, transparent)),
        var(--ranking-card);
}

.ranking-leader::after {
    content: '';
    position: absolute;
    right: -35px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ranking-red) 11%, transparent);
}

.leader-position {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 64px;
    flex: 0 0 58px;
    border-radius: 12px;
    background: linear-gradient(145deg, var(--ranking-red-bright), var(--ranking-red-deeper));
    color: #ffffff;
}

.leader-crown {
    margin-top: -22px;
    font-size: 1.5rem;
    transform: rotate(-7deg);
}

.leader-position strong {
    margin-top: 2px;
    font-size: 1rem;
}

.leader-info {
    min-width: 0;
    flex: 1;
}

.leader-info small {
    color: var(--ranking-red-bright);
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: 1px;
}

.leader-info h3 {
    margin: 2px 0;
    overflow: hidden;
    color: var(--ranking-text);
    font-size: 1rem;
    font-weight: 800;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.leader-info p {
    margin: 0;
    color: var(--ranking-muted);
    font-size: .7rem;
}

.leader-medal {
    z-index: 1;
    font-size: 1.6rem;
}

.ranking-list {
    display: grid;
    gap: 6px;
    margin-top: 9px;
}

.ranking-row {
    display: grid;
    grid-template-columns: 30px 27px minmax(0, 1fr) auto;
    align-items: center;
    min-height: 47px;
    padding: 7px 10px;
    border: 1px solid var(--ranking-border);
    border-radius: 10px;
    background: var(--ranking-row);
}

.ranking-position {
    color: var(--ranking-muted);
    font-size: .72rem;
    font-weight: 800;
}

.ranking-medal {
    font-size: 1rem;
}

.ranking-row strong {
    overflow: hidden;
    color: var(--ranking-text);
    font-size: .78rem;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.ranking-quantity {
    color: var(--ranking-red-bright);
    font-size: .79rem;
    font-weight: 800;
}

.ranking-quantity small {
    color: var(--ranking-muted);
    font-size: .6rem;
    font-weight: 500;
}

.ranking-empty {
    padding: 24px 12px;
    border: 1px dashed var(--ranking-border);
    border-radius: 12px;
    background: var(--ranking-card);
    text-align: center;
}

.ranking-empty span {
    display: block;
    margin-bottom: 5px;
    font-size: 1.7rem;
}

.ranking-empty strong {
    display: block;
    color: var(--ranking-text);
    font-size: .85rem;
}

.ranking-empty p {
    margin: 3px 0 0;
    color: var(--ranking-muted);
    font-size: .68rem;
}

.ranking-footer {
    margin-top: 10px;
    color: var(--ranking-muted);
    font-size: .62rem;
    text-align: center;
}

@media (max-width: 480px) {
    .ranking-general {
        padding: 12px 9px;
    }

    .ranking-header h4 {
        font-size: .92rem;
    }

    .ranking-podium {
        gap: 5px;
    }

    .podium-card {
        padding-right: 4px;
        padding-left: 4px;
    }

    .podium-card h3 {
        font-size: .62rem;
    }

    .podium-card strong {
        font-size: .78rem;
    }

    .leader-medal {
        display: none;
    }

    .ranking-row {
        grid-template-columns: 28px 25px minmax(0, 1fr) auto;
        padding: 7px 8px;
    }

    .ranking-quantity small {
        display: none;
    }
}

/* --- Promo Top Comprador v2 --- */
.ranking-promo-v2 {
    padding: 18px 14px 14px;
}

.ranking-promo-head {
    text-align: center;
    margin-bottom: 14px;
}

.ranking-prize-title {
    margin: 6px 0 4px;
    font-size: clamp(1.15rem, 4.5vw, 1.55rem);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: .01em;
    text-transform: uppercase;
}

.ranking-prize-value {
    color: #ffd166;
    font-size: clamp(1.35rem, 5.2vw, 1.85rem);
}

.ranking-prize-sub {
    margin: 0;
    color: var(--ranking-muted);
    font-size: .78rem;
    line-height: 1.35;
}

.ranking-countdown-label {
    display: block;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ranking-muted);
}

.ranking-countdown-timer {
    display: block;
    margin: 4px 0;
    font-size: clamp(1.5rem, 6vw, 2rem);
    font-weight: 900;
    line-height: 1.1;
    color: var(--ranking-red-soft);
    font-variant-numeric: tabular-nums;
    min-height: 1.1em;
}

.ranking-countdown-hint,
.ranking-countdown-ended {
    margin: 0;
    color: var(--ranking-muted);
    font-size: .74rem;
}

.ranking-live-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 0 10px;
    font-size: .68rem;
    color: var(--ranking-muted);
}

.ranking-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
}

.ranking-live-indicator.is-flash .ranking-live-dot {
    animation: ranking-live-flash .6s ease;
}

@keyframes ranking-live-flash {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.35); opacity: .65; }
}

.ranking-promo-v2 .ranking-promo-countdown {
    margin-bottom: 10px;
    padding: 12px;
}

.ranking-tickets-hidden {
    font-size: 1.45rem !important;
    letter-spacing: .12em;
    color: #ffd166 !important;
}

.ranking-leader-tag {
    display: block;
    margin-top: 2px;
    color: var(--ranking-red-soft) !important;
    font-size: .62rem !important;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.podium-name {
    min-height: 28px;
    margin: 0 0 7px;
    color: var(--ranking-text);
    font-size: .72rem;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}

.ranking-promo-v2 .podium-card.podium-gold {
    box-shadow: 0 10px 24px rgba(255, 196, 35, .12);
}

.ranking-empty-full {
    grid-column: 1 / -1;
    margin-top: 4px;
}

.ranking-user-position {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid rgba(255, 196, 35, .28);
    border-radius: 12px;
    background: rgba(255, 196, 35, .06);
    text-align: center;
}

.ranking-user-kicker {
    display: block;
    margin-bottom: 6px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #ffd166;
}

.ranking-user-place,
.ranking-user-tickets {
    display: block;
    font-size: 1.35rem;
    font-weight: 900;
    color: var(--ranking-text);
}

.ranking-user-position p {
    margin: 6px 0 0;
    color: var(--ranking-muted);
    font-size: .78rem;
    line-height: 1.35;
}

.ranking-user-motivation {
    color: #ff8a65 !important;
}

.ranking-cta {
    width: 100%;
    margin-top: 12px;
    border: none;
    border-radius: 10px;
    padding: 14px 16px;
    background: linear-gradient(135deg, var(--ranking-red), var(--ranking-red-light));
    color: #fff;
    font-size: .92rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--ranking-red) 28%, transparent);
    animation: ranking-cta-pulse 2.4s ease-in-out infinite;
}

.ranking-cta-secondary {
    width: auto;
    margin-top: 10px;
    padding: 10px 18px;
    font-size: .82rem;
}

@keyframes ranking-cta-pulse {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-1px); }
}

.ranking-cta-highlight {
    animation: ranking-target-highlight 1.2s ease 2;
}

@keyframes ranking-target-highlight {
    0%, 100% { box-shadow: none; }
    50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ranking-red) 35%, transparent); }
}

.ranking-promo-v2 .ranking-footer p {
    margin: 0 0 8px;
    line-height: 1.4;
}

.ranking-rules-toggle {
    border: none;
    background: transparent;
    color: var(--ranking-red-soft);
    font-size: .68rem;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
}

.ranking-rules-panel {
    margin-top: 10px;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid var(--ranking-border);
    background: var(--ranking-card);
    text-align: left;
}

.ranking-rules-panel h5 {
    margin: 0 0 8px;
    font-size: .82rem;
    color: var(--ranking-text);
}

.ranking-rules-panel ul {
    margin: 0;
    padding-left: 18px;
    color: var(--ranking-muted);
    font-size: .72rem;
    line-height: 1.45;
}

.ranking-rules-extra {
    margin: 10px 0 0;
    font-size: .72rem;
    color: var(--ranking-muted);
}

.ranking-podium-updated .podium-card {
    animation: ranking-card-enter .55s ease;
}

@keyframes ranking-card-enter {
    from { opacity: .55; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.ranking-promo-ended .ranking-cta,
.ranking-promo-ended .ranking-promo-progress,
.ranking-promo-ended .ranking-live-indicator {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .ranking-cta,
    .ranking-podium-updated .podium-card,
    .ranking-live-indicator.is-flash .ranking-live-dot {
        animation: none !important;
    }

    .ranking-promo-progress span {
        transition: none;
    }
}

@media (max-width: 480px) {
    .ranking-promo-v2 {
        padding: 14px 10px 12px;
    }

    .ranking-prize-title {
        font-size: 1.05rem;
    }

    .ranking-prize-value {
        font-size: 1.25rem;
    }

    .ranking-promo-v2 .ranking-podium {
        gap: 6px;
        padding-top: 18px;
    }

    .ranking-promo-v2 .podium-card {
        padding: 24px 4px 12px;
    }

    .ranking-promo-v2 .podium-card.podium-gold {
        transform: translateY(-10px);
    }

    .podium-name {
        font-size: .6rem;
    }

    .ranking-tickets-count {
        font-size: 1rem !important;
    }
}

.ranking-promo-v2 .podium-name {
    word-break: break-word;
    line-height: 1.25;
    padding: 0 4px;
}

.ranking-promo-v2 .ranking-diary-badge {
    display: inline-block;
    margin-top: 6px;
    padding: 3px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ranking-red) 16%, transparent);
    color: var(--ranking-red-soft);
    font-size: .55rem;
    font-weight: 800;
    letter-spacing: .02em;
}

.ranking-diary {
    margin-top: 14px;
}

.ranking-diary-head {
    text-align: center;
    margin-bottom: 10px;
}

.ranking-diary-prize {
    margin: 6px 0 4px;
    font-size: 1.05rem;
    font-weight: 900;
    color: var(--ranking-text);
}

.ranking-diary-prize span {
    color: var(--ranking-red-soft);
}

.ranking-diary-sub {
    margin: 0;
    color: var(--ranking-muted);
    font-size: .78rem;
    line-height: 1.35;
}

.ranking-diary-period {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 10px;
    color: var(--ranking-muted);
    font-size: .72rem;
}

.ranking-diary-countdown {
    text-align: center;
    margin-bottom: 12px;
    padding: 8px 10px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--ranking-red) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--ranking-red) 45%, transparent);
}

.ranking-diary-countdown span {
    display: block;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--ranking-red-soft);
}

.ranking-diary-countdown strong {
    display: block;
    margin-top: 2px;
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--ranking-text);
}

.ranking-diary-countdown-ended {
    background: rgba(100, 116, 139, .12);
    border-color: rgba(100, 116, 139, .25);
}

.ranking-diary-countdown-ended span {
    color: var(--ranking-muted);
}

.ranking-diary-podium {
    margin-top: 4px;
}

.ranking-diary .podium-name {
    font-size: .58rem;
    line-height: 1.25;
    word-break: break-word;
    hyphens: auto;
    padding: 0 4px;
}

.ranking-diary-badge {
    display: inline-block;
    margin-top: 6px;
    padding: 3px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ranking-red) 16%, transparent);
    color: var(--ranking-red-soft);
    font-size: .55rem;
    font-weight: 800;
    letter-spacing: .02em;
}

.ranking-diary-footer p {
    margin: 4px 0 0;
    font-size: .68rem;
    line-height: 1.35;
    color: var(--ranking-muted);
}

.ranking-diary-ended .ranking-diary-countdown strong {
    display: none;
}