/**
 * Radio Recorder Button Styles
 * Mini Button in Controls Bar
 *
 * @package AnowXRadio
 * @since 1.6.0
 */

/* ============================================
   RECORDER BUTTON - Controls Bar Style
   ============================================ */
.ctrl-btn.record-btn {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #fff;
    font-size: 14px;
}

.ctrl-btn.record-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.1);
}

.ctrl-btn.record-btn.recording {
    background: #dc2626;
    animation: recordPulse 1.5s infinite;
}

.ctrl-btn.record-btn.recording:hover {
    background: #ef4444;
}

@keyframes recordPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.5);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(220, 38, 38, 0);
    }
}

.ctrl-btn.record-btn .recorder-icon-idle {
    font-size: 12px;
    color: #dc2626;
}

.ctrl-btn.record-btn .recorder-icon-recording {
    font-size: 14px;
    color: #fff;
}

.ctrl-btn.record-btn.recording .recorder-icon-idle {
    display: none !important;
}

.ctrl-btn.record-btn.recording .recorder-icon-recording {
    display: inline !important;
}

/* ============================================
   RECORDER TIMER - Below Controls
   ============================================ */
.recorder-timer {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(220, 38, 38, 0.15);
    border-radius: 20px;
    font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
    font-size: 14px;
    font-weight: 600;
    color: #dc2626;
    margin: 10px auto;
    width: fit-content;
}

.recorder-timer.show {
    display: inline-flex;
}

.recorder-timer-dot {
    width: 8px;
    height: 8px;
    background: #dc2626;
    border-radius: 50%;
    animation: timerDotBlink 1s infinite;
}

@keyframes timerDotBlink {
    0%, 50% {
        opacity: 1;
    }
    51%, 100% {
        opacity: 0.3;
    }
}

.recorder-timer-text {
    min-width: 50px;
}

/* ============================================
   RECORDER STATUS
   ============================================ */
.recorder-status {
    display: none;
    text-align: center;
    padding: 8px 16px;
    background: rgba(5, 150, 105, 0.15);
    border-radius: 20px;
    font-size: 13px;
    color: #059669;
    margin: 10px auto;
    width: fit-content;
}

.recorder-status.show {
    display: block;
}

.recorder-status.error {
    background: rgba(220, 38, 38, 0.15);
    color: #dc2626;
}

/* ============================================
   DARK MODE
   ============================================ */
body.dark-mode .recorder-timer {
    background: rgba(220, 38, 38, 0.25);
}

body.dark-mode .recorder-status {
    background: rgba(5, 150, 105, 0.25);
    color: #34d399;
}

body.dark-mode .recorder-status.error {
    background: rgba(220, 38, 38, 0.25);
    color: #f87171;
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */
@media (max-width: 576px) {
    .ctrl-btn.record-btn {
        width: 38px;
        height: 38px;
    }
    
    .ctrl-btn.record-btn .recorder-icon-idle {
        font-size: 10px;
    }
    
    .ctrl-btn.record-btn .recorder-icon-recording {
        font-size: 12px;
    }
    
    .recorder-timer {
        padding: 6px 12px;
        font-size: 12px;
    }
}