/* ===========================================================
   SICROP RADIO
   Widgets
   =========================================================== */


/* ===========================================================
   CARD
   =========================================================== */

.card {

    display: flex;
    flex-direction: column;

    gap: var(--gap);

    padding: var(--gap-lg);

    background: var(--color-surface);

    border: 1px solid var(--color-border);

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-md);

}


/* ===========================================================
   PANEL TITLES
   =========================================================== */

.card h2 {

    margin-bottom: var(--gap);

    font-size: var(--font-size-sm);

    font-weight: var(--font-weight-bold);

    text-transform: uppercase;

    letter-spacing: .15em;

    color: var(--color-text-secondary);

}


/* ===========================================================
   INFO ROW
   =========================================================== */

.info-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    min-height: var(--status-row-height);

    border-bottom: 1px solid rgba(255,255,255,.04);

}

.info-row:last-child {

    border-bottom: none;

}

.info-row span:first-child {

    color: var(--color-text-secondary);

}

.info-row span:last-child {

    color: var(--color-text);

    font-weight: var(--font-weight-medium);

}


/* ===========================================================
   LIVE
   =========================================================== */

#live-indicator {

    display: flex;

    align-items: center;

    gap: var(--gap-sm);

    font-size: var(--font-size-sm);

    letter-spacing: .08em;

    text-transform: uppercase;

}

#live-dot {

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background: var(--color-live);

    box-shadow:
        0 0 12px var(--color-live);

    animation: livePulse 2.5s infinite;

}


/* ===========================================================
   PLAYER
   =========================================================== */

#track-title {

    font-size: var(--font-size-xl);

    font-weight: var(--font-weight-bold);

}

#artist-name {

    color: var(--color-text-secondary);

}

#album-name {

    color: var(--color-text-muted);

}


/* ===========================================================
   CANVAS
   =========================================================== */

#waveform,
#vu-left,
#vu-right {

    width: 100%;

    height: 100%;

}


/* ===========================================================
   TOAST
   =========================================================== */

#toast-container {

    position: fixed;

    right: var(--gap-xl);

    bottom: var(--gap-xl);

    display: flex;

    flex-direction: column;

    gap: var(--gap);

    z-index: var(--z-toast);

}

.toast {

    min-width: 280px;

    padding: var(--gap);

    background: var(--color-surface);

    border: 1px solid var(--color-border);

    border-left: 4px solid var(--color-accent);

    border-radius: var(--radius-md);

    box-shadow: var(--shadow-lg);

}


/* ===========================================================
   SCROLLABLE
   =========================================================== */

.scrollable {

    overflow-y: auto;

}


/* ===========================================================
   ANIMATIONS
   =========================================================== */

.fade-in {

    animation: fadeIn .25s ease;

}

.fade-out {

    animation: fadeOut .25s ease;

}

.spin {

    animation: spin 5s linear infinite;

}

.glow {

    box-shadow: var(--glow);

}


/* ===========================================================
   KEYFRAMES
   =========================================================== */

@keyframes livePulse {

    0% {

        opacity: .5;

        transform: scale(.9);

    }

    50% {

        opacity: 1;

        transform: scale(1);

    }

    100% {

        opacity: .5;

        transform: scale(.9);

    }

}

@keyframes fadeIn {

    from {

        opacity: 0;

    }

    to {

        opacity: 1;

    }

}

@keyframes fadeOut {

    from {

        opacity: 1;

    }

    to {

        opacity: 0;

    }

}

@keyframes spin {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}