/*
 * Bareômetro — CSS
 * Design: dark glass, dourado Cruzeiro, animações suaves
 * Sofia Flux — UX/UI | Passo 4
 */

/* ── Widget container ──────────────────────────────────────────────────────── */
#bareometer-widget,
.bareometer-widget {
    background:    linear-gradient(135deg, #0d1117 0%, #1a1a2e 60%, #16213e 100%);
    border:        1px solid rgba(200, 169, 81, 0.2);
    border-radius: 16px;
    padding:       1.25rem;
    color:         #fff;
    font-family:   'DM Sans', sans-serif;
    box-shadow:    0 8px 32px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
    position:      relative;
    overflow:      hidden;
}

/* Brilho sutil no topo (glass) */
#bareometer-widget::before {
    content:          '';
    position:         absolute;
    top:              0; left: 0; right: 0;
    height:           1px;
    background:       linear-gradient(90deg, transparent, rgba(200,169,81,.5), transparent);
}

/* ── Header ────────────────────────────────────────────────────────────────── */
.bareometer-header {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    border-bottom:   1px solid rgba(255,255,255,.08);
    padding-bottom:  .875rem;
    margin-bottom:   .875rem;
}

.bareometer-title {
    margin:      0;
    font-size:   1.1rem;
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: .05em;
    color:       #C8A951;
}

/* ── Badge "Ao vivo" ────────────────────────────────────────────────────────── */
.update-badge {
    padding:       .25rem .75rem;
    border-radius: 20px;
    font-size:     .7rem;
    font-weight:   700;
    text-transform:uppercase;
    letter-spacing:.04em;
    transition:    background .3s;
}

.update-badge--live {
    background: #c0392b;
    animation:  badge-pulse 1.5s ease-in-out infinite;
}

.update-badge--loading,
.update-badge--reconnecting {
    background: #555;
}

@keyframes badge-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(192,57,43,.5); }
    50%       { opacity: .8; box-shadow: 0 0 0 6px rgba(192,57,43,0); }
}

/* ── Bonus banner (gol ativo) ───────────────────────────────────────────────── */
.bareometer-bonus-banner {
    background:    linear-gradient(90deg, rgba(231,76,60,.25), rgba(192,57,43,.15));
    border:        1px solid rgba(231,76,60,.4);
    border-radius: 8px;
    padding:       .5rem 1rem;
    margin-bottom: .75rem;
    font-size:     .8rem;
    font-weight:   600;
    color:         #ff8a80;
    text-align:    center;
    animation:     bonus-glow 2s ease-in-out infinite;
}

@keyframes bonus-glow {
    0%, 100% { border-color: rgba(231,76,60,.4); }
    50%       { border-color: rgba(231,76,60,.9); }
}

/* ── Lista de bares ─────────────────────────────────────────────────────────── */
.bareometer-list {
    max-height:  420px;
    overflow-y:  auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(200,169,81,.3) transparent;
}

.bareometer-list::-webkit-scrollbar      { width: 4px; }
.bareometer-list::-webkit-scrollbar-thumb{ background: rgba(200,169,81,.3); border-radius: 2px; }

/* ── Item individual ────────────────────────────────────────────────────────── */
.bareometer-item {
    display:        flex;
    align-items:    center;
    gap:            12px;
    padding:        10px 8px;
    border-radius:  8px;
    border-bottom:  1px solid rgba(255,255,255,.05);
    transition:     background .2s, transform .2s;
    cursor:         default;
}

.bareometer-item:hover {
    background: rgba(255,255,255,.04);
    transform:  translateX(2px);
}

.bareometer-item--first {
    background:   linear-gradient(90deg, rgba(200,169,81,.15) 0%, transparent 100%);
    border-left:  3px solid #C8A951;
}

.bareometer-item--entering {
    animation: item-slide-in .4s cubic-bezier(.34,1.56,.64,1);
}

@keyframes item-slide-in {
    from { opacity: 0; transform: translateX(-16px); }
    to   { opacity: 1; transform: translateX(0); }
}

.bareometer-item--skeleton {
    pointer-events: none;
}

/* ── Posição / Medalha ──────────────────────────────────────────────────────── */
.position {
    font-size:   1.3rem;
    min-width:   44px;
    text-align:  center;
    flex-shrink: 0;
}

/* ── Info do bar ────────────────────────────────────────────────────────────── */
.bar-info {
    flex:        1;
    min-width:   0;
}

.bar-logo {
    width:         28px;
    height:        28px;
    border-radius: 50%;
    object-fit:    cover;
    margin-right:  8px;
    vertical-align: middle;
}

.bar-name {
    display:       block;
    font-size:     .95rem;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    color:         #f0f0f0;
}

.bar-meta {
    font-size: .72rem;
    opacity:   .6;
    display:   block;
    margin-top: 2px;
}

.goal-badge {
    display:       inline-block;
    background:    rgba(231,76,60,.9);
    padding:       1px 7px;
    border-radius: 10px;
    font-size:     .68rem;
    font-weight:   700;
    margin-left:   6px;
    vertical-align: middle;
}

/* ── Botão mini check-in ────────────────────────────────────────────────────── */
.checkin-btn-mini {
    background:    linear-gradient(135deg, #003087, #1B5BBF);
    border:        none;
    color:         #fff;
    padding:       8px 12px;
    border-radius: 8px;
    cursor:        pointer;
    font-size:     1rem;
    transition:    transform .2s, box-shadow .2s;
    flex-shrink:   0;
}

.checkin-btn-mini:hover {
    transform:  scale(1.08);
    box-shadow: 0 4px 12px rgba(0,48,135,.5);
}

.checkin-btn-mini:disabled {
    opacity: .4;
    cursor:  not-allowed;
    transform: none;
}

/* ── Footer ─────────────────────────────────────────────────────────────────── */
.bareometer-footer {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    margin-top:      .75rem;
    padding-top:     .75rem;
    border-top:      1px solid rgba(255,255,255,.06);
}

.bareometer-updated {
    font-size: .7rem;
    opacity:   .45;
}

.view-all-link {
    font-size:   .8rem;
    color:       #C8A951;
    text-decoration: none;
    font-weight: 600;
    transition:  color .2s;
}

.view-all-link:hover { color: #e0c060; }

/* ── Toast de gol ───────────────────────────────────────────────────────────── */
.goal-toast {
    position:      fixed;
    bottom:        24px;
    left:          50%;
    transform:     translateX(-50%);
    background:    linear-gradient(135deg, #c0392b, #96281b);
    color:         #fff;
    border-radius: 40px;
    padding:       12px 20px;
    z-index:       99999;
    box-shadow:    0 8px 32px rgba(192,57,43,.5);
    animation:     toast-slide-up .4s cubic-bezier(.34,1.56,.64,1);
    min-width:     280px;
    max-width:     90vw;
}

@keyframes toast-slide-up {
    from { transform: translateX(-50%) translateY(80px); opacity: 0; }
    to   { transform: translateX(-50%) translateY(0); opacity: 1; }
}

.goal-toast__content {
    display:     flex;
    align-items: center;
    gap:         12px;
}

.goal-toast__icon {
    font-size:   2rem;
    flex-shrink: 0;
    animation:   goal-icon-bounce .5s cubic-bezier(.34,1.56,.64,1) infinite alternate;
}

@keyframes goal-icon-bounce {
    from { transform: scale(1);    }
    to   { transform: scale(1.15); }
}

.goal-toast__content strong { font-size: 1rem; display: block; }
.goal-toast__content p      { margin: 2px 0 0; font-size: .82rem; opacity: .85; }

.goal-toast__close {
    background:  none;
    border:      none;
    color:       rgba(255,255,255,.7);
    font-size:   1.25rem;
    cursor:      pointer;
    padding:     0 4px;
    margin-left: auto;
    line-height: 1;
}

/* ── Meta coletiva banner ───────────────────────────────────────────────────── */
.collective-goal-banner {
    position:   fixed;
    top:        0; left: 0; right: 0;
    background: linear-gradient(90deg, #003087, #1B5BBF);
    color:      #fff;
    z-index:    99998;
    padding:    12px 20px;
    box-shadow: 0 4px 16px rgba(0,0,0,.3);
    animation:  banner-drop .5s ease-out;
}

@keyframes banner-drop {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}

.collective-goal-banner__inner {
    display:         flex;
    align-items:     center;
    gap:             16px;
    max-width:       1200px;
    margin:          0 auto;
}

.collective-goal-banner__inner span:first-child { font-size: 1.75rem; }
.collective-goal-banner__inner strong           { font-size: 1rem; }
.collective-goal-banner__inner p                { margin: 2px 0 0; font-size: .82rem; opacity: .8; }
.collective-goal-banner__inner button {
    margin-left: auto;
    background:  none;
    border:      none;
    color:       rgba(255,255,255,.7);
    font-size:   1.25rem;
    cursor:      pointer;
}

/* ── Skeleton loader ────────────────────────────────────────────────────────── */
.cdp-skeleton {
    background:      linear-gradient(90deg, #2D2D44 25%, #3D3D54 50%, #2D2D44 75%);
    background-size: 200% 100%;
    animation:       skeleton-shimmer 1.5s infinite;
    border-radius:   4px;
}

@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}