/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-q70i14vj45] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-q70i14vj45] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/VipHoldCountdown.razor.rz.scp.css */
/* --- Floating position (top-left) --- */
.vip-countdown-float-left[b-yn8qc7ypgt] {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    left: calc(env(safe-area-inset-left, 0px) + 12px);
    z-index: 10050;
    pointer-events: none;
}

/* --- Base card --- */
.vip-countdown[b-yn8qc7ypgt] {
    pointer-events: auto;
    min-width: 240px;
    max-width: 340px;
    /* "brand" palette (adjust to your exact hexes if you have them) */
    --vip-red: #C8102E; /* primary red */
    --vip-red-dark: #9E0C23; /* deep red */
    --vip-yellow: #FFC72C; /* accent yellow */
    --vip-ink: #1F2937; /* text */
    --vip-bg: #ffffff;
    background: linear-gradient(180deg, var(--vip-bg), #fff7e0);
    border: 2px solid rgba(255, 199, 44, 0.75);
    border-left: 10px solid var(--vip-yellow);
    color: var(--vip-ink);
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: 0 10px 28px rgba(0,0,0,.18);
    transform: translateZ(0);
    /* subtle “alive” animation */
    animation: vip-breathe-b-yn8qc7ypgt 2.8s ease-in-out infinite;
}

/* layout */
.vip-countdown__row[b-yn8qc7ypgt] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vip-countdown__badge[b-yn8qc7ypgt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: .06em;
    font-size: .75rem;
    background: var(--vip-red);
    color: #fff;
    box-shadow: 0 4px 10px rgba(200,16,46,.25);
}

.vip-countdown__label[b-yn8qc7ypgt] {
    font-size: .78rem;
    font-weight: 700;
    opacity: .85;
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.vip-countdown__time[b-yn8qc7ypgt] {
    font-size: 1.15rem;
    font-weight: 900;
    color: var(--vip-red-dark);
    /* “tick” animation triggers every second via @key in Razor */
    animation: vip-tick-b-yn8qc7ypgt 240ms ease-out;
}

.vip-countdown__warn[b-yn8qc7ypgt] {
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(255, 199, 44, 0.25);
    border: 1px solid rgba(255, 199, 44, 0.65);
    color: #6b4b00;
    font-weight: 700;
    font-size: .85rem;
}

/* --- Warning state: more yellow emphasis --- */
.vip-countdown--warning[b-yn8qc7ypgt] {
    border-color: rgba(255, 199, 44, 0.95);
    box-shadow: 0 12px 30px rgba(255,199,44,.18), 0 10px 28px rgba(0,0,0,.16);
}

/* --- Critical state: red emphasis + faster pulse --- */
.vip-countdown--critical[b-yn8qc7ypgt] {
    background: linear-gradient(180deg, #fff, #ffe6ea);
    border-color: rgba(200, 16, 46, 0.55);
    border-left-color: var(--vip-red);
    animation-duration: 1.6s;
}

    .vip-countdown--critical .vip-countdown__time[b-yn8qc7ypgt] {
        color: var(--vip-red);
    }

/* animations */
@keyframes vip-breathe-b-yn8qc7ypgt {
    0%, 100% {
        transform: translateY(0);
    }

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

@keyframes vip-tick-b-yn8qc7ypgt {
    from {
        transform: scale(1.03);
        filter: saturate(1.05);
    }

    to {
        transform: scale(1);
    }
}

/* Mobile tweaks */
@media (max-width: 48em) {
    .vip-countdown-float-left[b-yn8qc7ypgt] {
        top: calc(env(safe-area-inset-top, 0px) + 8px);
        left: calc(env(safe-area-inset-left, 0px) + 8px);
    }

    .vip-countdown[b-yn8qc7ypgt] {
        min-width: 220px;
        max-width: 280px;
        padding: 10px 12px;
    }
}