/* theme.css - shared brand tokens + reusable components for the public site.
   Linked on every public page alongside its own page-specific CSS. */
:root {
    --brand: #e57373;
}

/* Shared button classes - use these for new buttons instead of another
   one-off page-local class. Existing page buttons already use the same
   --brand color, just via older per-page class names left as-is here. */
.btn-brand {
    display: inline-block;
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 22px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: opacity .15s;
}
.btn-brand:hover { opacity: .85; color: #fff; }

.btn-brand-outline {
    display: inline-block;
    background: transparent;
    color: var(--brand);
    border: 1px solid var(--brand);
    border-radius: 8px;
    padding: 10px 22px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: all .15s;
}
.btn-brand-outline:hover { background: var(--brand); color: #fff; }

/* Skeleton loading state - for content that gets filled in by JS after
   the page loads, so visitors see a placeholder instead of a blank gap. */
.skeleton {
    background: linear-gradient(90deg, rgba(255,255,255,.06) 25%, rgba(255,255,255,.14) 37%, rgba(255,255,255,.06) 63%);
    background-size: 400% 100%;
    animation: skeleton-loading 1.4s ease infinite;
    border-radius: 6px;
    color: transparent !important;
}
@keyframes skeleton-loading {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* Empty state - for "no raffles/rewards/etc right now" messages */
.empty-state {
    text-align: center;
    padding: 48px 20px;
    color: rgba(255,255,255,.55);
}
.empty-state .empty-icon {
    font-size: 34px;
    margin-bottom: 12px;
    opacity: .6;
}
.empty-state h3 {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 6px;
}
.empty-state p {
    font-size: 13px;
    max-width: 380px;
    margin: 0 auto;
    line-height: 1.5;
    color: rgba(255,255,255,.55);
}

/* Status row (homepage hero) - holds the stream badge + winner pill side by side */
.status-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 16px 0;
}

/* Stream status badge (homepage hero) */
.stream-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: opacity .15s;
}
.stream-status:hover { opacity: .85; }
.stream-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.stream-status.is-live {
    background: rgba(76,175,125,.15);
    color: #4caf7d;
    border: 1px solid rgba(76,175,125,.4);
}
.stream-status.is-live .stream-dot {
    background: #4caf7d;
    animation: stream-pulse 1.5s ease infinite;
}
.stream-status.is-offline {
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.55);
    border: 1px solid rgba(255,255,255,.12);
}
.stream-status.is-offline .stream-dot {
    background: rgba(255,255,255,.4);
}
@keyframes stream-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(76,175,125,.5); }
    50% { box-shadow: 0 0 0 6px rgba(76,175,125,0); }
}

/* Recent raffle winner pill (homepage hero) */
.winner-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px 8px 8px;
    border-radius: 999px;
    font-size: 13px;
    text-decoration: none;
    color: #fff;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    transition: border-color .15s;
    max-width: 100%;
}
.winner-pill:hover { border-color: var(--brand); color: #fff; }
.winner-pill span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.winner-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}