:root {
    --sp-primary: #1a73e8;
    --sp-primary-text: #ffffff;
    --sp-background: #ffffff;
    --sp-control-hover: #0d47a1;
}

.sp-player-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden;
    font-family: "Segoe UI", Roboto, sans-serif;
    /*background: var(--sp-background);*/
}

/* Station logo */
.sp-station-logo {
    display: flex;
    justify-content: center;
    flex: 0 0 auto;
    margin-bottom: 30px;
}

.sp-station-logo img {
    max-width: 250px;
    max-height: 60px;
    object-fit: contain;
    transition: all 0.3s ease;
}

/* Album artwork */
.sp-cover-art {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
}

.sp-cover-art img {
    width: 300px;
    height: 300px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}

/* Now playing section */
.sp-now-playing {
    text-align: center;
    flex: 0 0 auto;
    margin-bottom: 32px;
}

.sp-now-playing #sp-track-title {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.sp-now-playing #sp-track-artist {
    font-size: 1.2rem;
    color: #555;
}

/* Controls container */
.sp-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
}

/* Buttons */
.sp-btn-flat {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 48px;
    height: 48px;
    font-size: 1.3rem;
    border-radius: 50%;
    border: none;
    background: var(--sp-primary);
    color: var(--sp-primary-text);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.sp-btn-flat:hover {
    background: var(--sp-control-hover);
    transform: scale(1.1);
}

.sp-btn-flat i { 
    font-style: normal; 
}

/* Play/Pause Btn Colour */
#sp-play, #sp-pause {
    background: #36A0C1;
    color: #fff;
}

/* Mute Btn Colour */
/* Normal */
#sp-mute {
    background: #36A0C1;
    color: #fff;
}

/* Muted */
#sp-mute.muted {
    background: #ea1c18 !important;
    color: #fff !important;
}

/* Volume slider */
.sp-volume { 
    width: 150px;
}

/* History section */
.sp-history {
    text-align: center;
    margin-top: 10px; /* remove top margin */
    padding-bottom: 10px; /* slight bottom padding so last item isn’t flush with bottom */
    max-height: 150px; /* optional: limit height to prevent overall overflow */
    overflow-y: auto;
    flex-shrink: 0;
}

/* Hide scrollbar visually */
.sp-history::-webkit-scrollbar { width: 0; height: 0; }

.sp-history h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.sp-history-item {
    font-size: 0.95rem;
    color: #333;
    margin-bottom: 3px;
    transition: color 0.2s;
}

.sp-history-item:hover { color: var(--sp-primary); }

/* Hide audio element */
audio#sp-audio { display: none; }

/* Shortcode buttons */
.sp-btn-shortcode {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 16px;
    border-radius:8px;
    border:none;
    font-weight:600;
    cursor:pointer;
    text-decoration:none;
}

.sp-btn-shortcode .sp-btn-icon-inline svg {
    width:20px; height:20px; display:inline-block; vertical-align:middle;
}

.sp-btn-shortcode .sp-btn-text { margin-left:8px; }

/* Size variants */
.sp-btn-size-small { padding:8px 12px; font-size:0.95rem; }
.sp-btn-size-medium { padding:10px 16px; font-size:1rem; }
.sp-btn-size-large { padding:14px 22px; font-size:1.05rem; }
.sp-btn-size-square { padding:10px 12px; width:120px; justify-content:center; }
.sp-btn-size-icon { padding:8px; width:48px; height:48px; border-radius:8px; }

/* Responsive adjustments for mobile */
@media (max-width: 600px) {
    .sp-btn-flat { font-size: 1.2rem; padding: 8px 14px; }
    .sp-volume { width: 100px; }
    .sp-station-logo img { max-width: 180px; max-height: 50px; }
    .sp-cover-art { height: auto; }
    .sp-cover-art img { width: 220px; height: 220px; }
    .sp-player-container { height: 100vh; }
    .sp-now-playing { margin-bottom: 15px; }
    .sp-controls { margin-bottom: 10px; gap: 10px; }
    .sp-history { max-height: 120px; overflow-y: auto; }
}