.station-description {
    color: #fff;
    opacity: 0.6;
}

.station-img {
    border: 3px solid #ffffff00;
    padding: 0.15rem;
}

/* Enlarge the visible logo without changing the header layout or control position. */
.header-logo-img {
    height: 68px;
    transform: scale(1.25);
    transform-origin: top left;
}

@media (min-width: 992px) {
    .header-logo-img {
        max-width: 8.5vw;
    }
}

.player-artwork {
    padding: 0.75rem;
    border-radius: 1rem;
    background-color: #ffffff00;
}

.player-artwork img {
    border-radius: 0.65rem;
    box-shadow: var(--shadow-xl);
}

.player-cover-image {
    animation: bga 60s linear infinite;
}

@keyframes bga {
    50% {
        transform: scale(2);
    }
}

.items-start {
    align-items: flex-start;
    margin-top: 15px;
}

/* KONTEJNER - ODVAJA HISTORIJU OD BROJAČA */
.timer-container {
    text-align: center !important;
    margin-top: 30px !important;
    padding-top: 15px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* LABELA - IDENTIČNA KAO NAZIV PJESME 'Apokalipsa' */
aside#offcanvas-history .timer-label {
    display: block !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 15px !important;
    /* Ista veličina kao naslov pjesme */
    font-weight: 600 !important;
    /* Ista debljina kao 'Apokalipsa' */
    color: #ffffff !important;
    /* Čista bijela */
    text-transform: none !important;
    /* ISKLJUČENO 'ALL CAPS' DA BUDE ISTO */
    letter-spacing: normal !important;
    /* NORMALAN RAZMAK ZA PUNOĆU FONTA */
    opacity: 1 !important;
    margin-bottom: 2px !important;
    text-align: center !important;
}

/* BROJAČ - STILIZOVAN DA BUDE DISKRETNIJI ISPOD NASLOVA */
#session-timer {
    display: block !important;
    font-family: 'Montserrat', sans-serif !important;
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: 1px !important;
    text-align: center !important;
    margin: 0 auto !important;
    width: 100% !important;
    text-shadow: none !important;
}

/* OSIGURANJE DA HISTORIJA NE NESTANE */
#history {
    min-height: 10px;
    display: flex !important;
    flex-direction: column !important;
}

/* Uklanja providni kvadrat/plavi okvir na mobilnim uređajima pri kliku */
button, 
a, 
.player-button {
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
}

/* Volume control: one touch-friendly vertical slider on every screen size. */
.player-button-volume {
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 300 !important;
}

.player-button-volume-toggle {
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#player-volume.dropdown {
    width: 3rem;
    height: 9rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    z-index: 301 !important;
}

.player-range-wrapper {
    width: 4px;
    height: 7rem;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    cursor: ns-resize;
    touch-action: none;
    z-index: 302;
}

.player-range-wrapper:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.8) !important;
    outline-offset: 6px;
}

.player-volume {
    width: 100%;
    height: 100%;
    pointer-events: none;
    cursor: ns-resize;
}

.player-range-fill {
    width: 100%;
    height: 100%;
    top: auto;
    bottom: 0;
    border-radius: inherit;
}

.player-range-thumb {
    width: 16px;
    height: 16px;
    left: 50%;
    top: auto;
    bottom: 0;
    transform: translate(-50%, 50%);
    border-radius: 50%;
}

/* Use the header action area on desktop and the player controls on mobile. */
#song-requests-button .i, #song-requests-button-desktop .i { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.song-requests-control-desktop { display: none; }
.player-cover .song-requests-control { display: flex; justify-content: center; margin-top: 1rem; }
@media (min-width: 992px) {
    .song-requests-control-desktop { display: flex; }
    .player-cover .song-requests-control { display: none; }
}
@media (max-width: 575px) {
    .player-cover .song-requests-control { margin-top: -.85rem; }
    #song-requests-button .i { height: .95rem; width: .95rem; }

    /* The trigger sits behind this transparent off-canvas panel on mobile. */
    .app:has(#offcanvas-requests.is-active) .player-cover .song-requests-control { visibility: hidden; }
    .request-panel { padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); }
    .request-panel .offcanvas-content { padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }
}
.request-panel { background: rgba(18, 18, 20, 0.32) !important; border-left: 1px solid rgba(255, 255, 255, 0.12); width: min(100%, 30rem); }
.request-eyebrow { color: rgba(255,255,255,.5); font-size: .63rem; font-weight: 700; letter-spacing: .14em; margin: 0 0 .3rem; text-transform: uppercase; }
.request-panel h2 { color: #fff; font-size: 1.55rem; margin: 0; }
.request-intro, .request-status, .request-empty { color: rgba(255,255,255,.64); font-size: .8rem; line-height: 1.45; }
.request-intro { margin: .35rem 0 1rem; }
.request-status { margin: 0 0 .65rem; min-height: 1.15rem; }
.request-status[data-type="success"] { color: #baf3ca; }
.request-status[data-type="error"] { color: #ffc1c1; }
.request-search { align-items: center; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.12); border-radius: .7rem; display: flex; gap: .55rem; margin-bottom: .8rem; padding: 0 .7rem; }
.request-search .i { fill: none; height: 1rem; stroke: rgba(255,255,255,.6); stroke-linecap: round; stroke-width: 2; width: 1rem; }
.request-search input { background: transparent; border: 0; color: #fff; font: inherit; font-size: .8rem; min-width: 0; outline: 0; padding: .78rem 0; width: 100%; }
.request-search input::placeholder { color: rgba(255,255,255,.45); }
.request-list { display: grid; gap: .45rem; }
.request-item { align-items: center; background: rgba(255,255,255,.065); border: 1px solid rgba(255,255,255,.08); border-radius: .75rem; display: grid; gap: .65rem; grid-template-columns: 3.25rem minmax(0,1fr) auto; padding: .4rem; }
.request-item img { background: rgba(255,255,255,.1); border-radius: .55rem; height: 3.25rem; object-fit: cover; width: 3.25rem; }
.request-meta { display: flex; flex-direction: column; min-width: 0; }
.request-artist, .request-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.request-artist { color: rgba(255,255,255,.58); font-size: .67rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.request-title { color: #fff; font-size: .85rem; font-weight: 700; margin-top: .1rem; }
.request-submit { background: rgba(255,255,255,.14); border: 0; border-radius: 999px; color: #fff; cursor: pointer; font: inherit; font-size: .65rem; font-weight: 700; padding: .55rem .6rem; }
.request-submit:hover { background: rgba(255,255,255,.24); }
.request-submit:disabled { cursor: default; opacity: .75; }
.request-submit.is-sent { background: rgba(104,205,137,.25); color: #baf3ca; }
.request-empty { padding: 1.4rem .2rem; text-align: center; }
.request-pagination { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: center; margin: .2rem 0 .8rem; }
.request-pagination button { background: transparent; border: 0; border-radius: 999px; color: rgba(255,255,255,.7); cursor: pointer; font: inherit; font-size: .68rem; padding: .38rem .55rem; }
.request-pagination button:hover { background: rgba(255,255,255,.12); color: #fff; }
.request-pagination button.is-active { background: rgba(255,255,255,.16); color: #fff; cursor: default; font-weight: 700; }