/* -------------------------------------------------- */
/* 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;
}

/* 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;
     }
}

.radio-player-app {
     display: grid;
     gap: 12px;
}

.radio-dashboard .dashboard-box > h3 {
     margin-top: 0;
     margin-bottom: 4px;
}

.radio-dashboard .dashboard-box {
     overflow: visible;
}

.radio-now-playing {
     background: #000;
     border: 1px solid #333;
     border-radius: 4px;
     padding: 6px 8px;
}

.radio-now-playing h4 {
     margin: 0 0 4px;
}

.radio-track-line {
     margin: 0;
     color: #fff;
     font-weight: 600;
}

.radio-meta-details {
     margin: 4px 0 0;
     color: #bbb;
     font-size: 0.72rem;
}

#radio-player {
     width: 100%;
}

.radio-eq-panel {
     background: #000;
     border: 1px solid #333;
     border-radius: 4px;
     padding: 12px 10px 10px;
     overflow-x: auto;
     overflow-y: visible;
}

.radio-eq-grid {
     display: grid;
     gap: 10px;
     grid-template-columns: repeat(5, minmax(0, 1fr));
     align-items: end;
     justify-items: center;
     min-width: 280px;
}

.radio-eq-grid label {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 8px;
     color: #fff;
     font-size: 0.72rem;
     min-width: 0;
}

.radio-eq-grid label span {
     line-height: 1;
}

.radio-eq-grid input[type="range"] {
     width: 70px;
     height: 14px;
     transform: rotate(-90deg);
     transform-origin: center;
     margin: 28px 0;
     padding: 0 !important;
     accent-color: #00cc44;
     cursor: pointer;
}

.radio-eq-grid input[type="range"]::-webkit-slider-thumb {
     -webkit-appearance: none;
     appearance: none;
     width: 12px;
     height: 12px;
     border-radius: 50%;
     background: #00cc44;
     border: 1px solid #0a7c2f;
     cursor: pointer;
}

.radio-eq-grid input[type="range"]::-webkit-slider-runnable-track {
     height: 6px;
     border-radius: 3px;
     background: #2a2a2a;
}

.radio-eq-grid input[type="range"]::-moz-range-thumb {
     width: 12px;
     height: 12px;
     border-radius: 50%;
     background: #00cc44;
     border: 1px solid #0a7c2f;
     cursor: pointer;
}

.radio-eq-grid input[type="range"]::-moz-range-track {
     height: 6px;
     border-radius: 3px;
     background: #2a2a2a;
}

.radio-eq-reset {
     margin-top: 8px;
     font-size: 0.63rem;
     line-height: 1;
     padding: 4px 8px;
     border-radius: 999px;
     min-height: 22px;
}

.radio-effect-controls {
     margin-top: 10px;
     display: flex;
     gap: 6px;
     flex-wrap: wrap;
}

.radio-effect-btn {
     position: relative;
     display: inline-flex;
     align-items: center;
     justify-content: flex-start;
     gap: 6px;
     font-size: 0.63rem;
     line-height: 1;
     padding: 3px 7px 3px 25px;
     min-height: 22px;
     border-radius: 999px;
}

.radio-effect-btn::before {
     content: "";
     position: absolute;
     left: 6px;
     top: 50%;
     transform: translateY(-50%);
     width: 10px;
     height: 10px;
     border-radius: 50%;
     background: #1a1a1a;
     border: 1px solid #555;
     transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.radio-effect-btn[aria-pressed="true"] {
     background: #073012;
     border-color: #00cc44;
     color: #caffd9;
}

.radio-effect-btn[aria-pressed="true"]::before {
     background: #00cc44;
     border-color: #00cc44;
     transform: translate(8px, -50%);
}

.radio-eq-note {
     margin: 8px 0 0;
     color: #ccc;
     font-size: 0.85rem;
}

.eq-disabled .radio-eq-grid,
.eq-disabled .radio-eq-reset,
.eq-disabled .radio-effect-btn {
     opacity: 0.45;
     pointer-events: none;
}

.radio-recent-list {
     margin: 0;
     padding-left: 20px;
}

.radio-recent-list li {
     color: #fff;
     margin-bottom: 4px;
}

@media (max-width: 800px) {
     .radio-eq-grid {
          gap: 8px;
          grid-template-columns: repeat(5, minmax(0, 1fr));
     }
}