/* ============================================================
   FONTES LOCAIS E TIPOGRAFIA BASE
   ============================================================ */
/* 1. Regular (Peso 400) */
@font-face {
    font-family: 'FonteSite';
    src: url('fonts/Roboto-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* 2. Bold (Peso 700) */
@font-face {
    font-family: 'FonteSite';
    src: url('fonts/Roboto-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* 3. Black (Peso 900) */
@font-face {
    font-family: 'FonteSite';
    src: url('fonts/Exo2-ExtraBold.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* Aplica a fonte base no corpo do site inteiro */
body {
    font-family: 'FonteSite', sans-serif;
}

/* Aplica o estilo Black (900) e Maiúsculo em TODOS os títulos do site */
h1, h2, h3, h4, h5, h6, 
.card-title, 
#player-titulo, 
.display-1, .display-2, .display-3, .display-4 {
    text-transform: uppercase !important;
    font-family: 'FonteSite', sans-serif !important;
    font-weight: 900 !important;
    letter-spacing: -0.02em;
}

/* ============================================================
   SOMBRAS CONDICIONAIS (Apenas no modo escuro)
   ============================================================ */
[data-bs-theme="dark"] .titulo-carrossel {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

[data-bs-theme="dark"] .titulo-pack {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

/* ============================================================
   BOTÃO DO PLAYER (play/pause)
   ============================================================ */
.btn-player-main {
    width: 42px;
    height: 42px;
    padding: 0;
    position: relative;
    transition: background-color .2s ease, transform .15s ease;
}

.btn-player-main:not(:disabled):active {
    transform: scale(0.94);
}

.btn-player-main.carregando {
    background-color: var(--bs-secondary) !important;
    border-color: var(--bs-secondary) !important;
}

.btn-player-main.carregando #icon-player-play-pause {
    visibility: hidden;
}

.btn-player-main.carregando::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: girar-spinner .7s linear infinite;
}

@keyframes girar-spinner {
    to { transform: rotate(360deg); }
}

/* ============================================================
   BARRA DE PROGRESSO COM EFEITO DE CARREGAMENTO (SHIMMER)
   ============================================================ */
#barra-progresso.carregando::-webkit-slider-runnable-track {
    background-image: repeating-linear-gradient(
        -45deg,
        var(--bs-primary) 0,
        var(--bs-primary) 4px,
        var(--bs-primary-border-subtle, #6ea8fe) 4px,
        var(--bs-primary-border-subtle, #6ea8fe) 8px
    );
    background-size: 11px 11px;
    animation: shimmer-barra 1s linear infinite;
    border-radius: .5rem;
}

#barra-progresso.carregando::-moz-range-track {
    background-image: repeating-linear-gradient(
        -45deg,
        var(--bs-primary) 0,
        var(--bs-primary) 4px,
        var(--bs-primary-border-subtle, #6ea8fe) 4px,
        var(--bs-primary-border-subtle, #6ea8fe) 8px
    );
    background-size: 11px 11px;
    animation: shimmer-barra 1s linear infinite;
    border-radius: .5rem;
}

@keyframes shimmer-barra {
    from { background-position: 0 0; }
    to   { background-position: 11px 0; }
}

/* ============================================================
   CONTROLE DE VOLUME
   ============================================================ */
.btn-volume-icon {
    width: 32px;
    height: 32px;
    text-decoration: none;
}

.volume-slider {
    width: 80px;
    max-width: 30vw;
}

/* ============================================================
   CAMPO DE BUSCA
   ============================================================ */
#campo-busca::-webkit-search-cancel-button {
    display: none;
}

#campo-busca:focus {
    box-shadow: none;
}

/* ============================================================
   IMAGENS DOS CARDS
   ============================================================ */
.card-img-top {
    transition: transform .3s ease;
}

/* ============================================================
   TIPOGRAFIA EXTRA
   ============================================================ */
.fw-black {
    font-weight: 900 !important;
}