/* -------------------------------------------------- */
/* 440Music Radio Station Layout                      */
/* -------------------------------------------------- */

.radio-main {
     display: flex;
     justify-content: center;
     padding: 10px;
     /* outer spacing */
     box-sizing: border-box;
}

.radio-card {
     max-width: 800px;
     width: 100%;
     background: #111;
     color: #ffffff;
     padding: 10px;
     /* inner spacing */
     border-radius: 8px;
     box-sizing: border-box;
}

/* Now Playing */
.radio-now-playing {
     margin-bottom: 10px;
}

.radio-now-playing h3 {
     margin-bottom: 8px;
}

/* Two-column section */
.radio-columns {
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
}

/* Left: Recent Tracks */
.radio-recent {
     flex: 1 1 50%;
     min-width: 260px;

}

.radio-recent h4 {
     margin-bottom: 8px;
}

.radio-recent-list {
     max-height: auto;
     overflow-y: auto;
     padding: 5px;
     background: #000;
     border: 1px solid #333;
     border-radius: 4px;
}

/* Right: Ads + Form */
.radio-side {
     flex: 1 1 35%;
     min-width: 260px;
}

.radio-ad {
     text-align: center;
     margin-bottom: 10px;
}

/* Request Form */
.radio-request h4 {
     margin-bottom: 10px;
}

.radio-request form div {
     margin-bottom: 10px;
}

/* -------------------------------------------------- */
/* Recent Tracks visibility fix                        */
/* -------------------------------------------------- */

.radio-recent-wrapper {
     margin-top: 10px;
     color: #ffffff;
     overflow: visible;
     /* 🔑 prevents clipping */
}

.radio-recent-wrapper .cc_recenttracks_list {
     display: block;
     min-height: 50px;
     /* ensures it renders */
}

/* Mobile refinement */
@media (max-width: 600px) {
     .radio-card {
          padding: 5px;
     }
}

/* -------------------------------------------------- */
/* Radio Dashboard Grid – 50 / 50 Layout               */
/* -------------------------------------------------- */

#radio-dashboard-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 10px;
     align-items: start;
     /* 🔑 THIS fixes top alignment */
}

/* Stack on mobile */
@media (max-width: 768px) {
     #radio-dashboard-grid {
          grid-template-columns: 1fr;
     }
}

.radio-layout {
     display: grid;
     grid-template-columns: 2fr 1fr;
     gap: 10px;
     max-width: 1200px;
     margin: 0 auto;
     padding: 10px;
}


.radio-aside {
     align-self: start;
}

@media (max-width: 900px) {
     .radio-layout {
          grid-template-columns: 1fr;
     }
}

:root {
     --radio-gold: #fbbf24;
     --radio-gold-hover: #fcd34d;
     --radio-widget-bg: #0a0a0a;
     --radio-card-bg: #000000;
     --radio-card-border: #2f2f2f;
     --radio-text-muted: #d1d5db;
}

.radio-links-widget {
     background: var(--radio-widget-bg);
     border: 1px solid #2a2a2a;
     border-radius: 10px;
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
     margin: 24px 0;
     padding: 16px;
}

.radio-links-title {
     color: #f5f5f5;
     font-size: 1.1rem;
     font-weight: 700;
     margin: 0 0 14px;
}

.radio-stations-grid {
     display: grid;
     gap: 12px;
     grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
     list-style: none;
     margin: 0;
     padding: 0;
}

.radio-station-card {
     align-items: flex-start;
     background: var(--radio-card-bg);
     border: 1px solid var(--radio-card-border);
     border-radius: 8px;
     display: flex;
     flex-direction: column;
     gap: 6px;
     padding: 12px;
}

.radio-station-top {
     align-items: center;
     display: flex;
     gap: 8px;
     width: 100%;
}

.radio-station-icon {
     color: var(--radio-gold);
     font-size: 0.85rem;
     font-weight: 700;
     letter-spacing: 0.04em;
     text-decoration: none;
}

.radio-station-name,
.radio-station-name:visited {
     color: var(--radio-gold);
     font-weight: 700;
     text-decoration: none;
}

.radio-station-name:hover,
.radio-station-name:focus,
.radio-station-icon:hover,
.radio-station-icon:focus {
     color: var(--radio-gold-hover);
}

.radio-station-artist,
.radio-station-artist:visited {
     color: var(--radio-text-muted);
     font-size: 0.95rem;
     line-height: 1.4;
     text-decoration: none;
}

.radio-station-artist:hover,
.radio-station-artist:focus {
     color: #ffffff;
}