/* Remote Falcon Player — rfp-style.css v3.1.0 */

:root {
    --rfp-accent : #e74c3c;
    --rfp-bg     : #1a1a2e;
    --rfp-card   : rgba(255,255,255,0.06);
    --rfp-border : rgba(255,255,255,0.12);
    --rfp-text   : #ffffff;
    --rfp-radius : 14px;
    --rfp-shadow : 0 8px 32px rgba(0,0,0,0.35);
}

/* Caption */
.caption    { margin-bottom: 12px; }
.caption h3 { margin: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.3; }

/* Widget container */
.rfp-widget {
    background    : var(--rfp-bg);
    color         : var(--rfp-text);
    border-radius : var(--rfp-radius);
    box-shadow    : var(--rfp-shadow);
    padding       : 24px;
    max-width     : 680px;
    margin        : 0 auto;
    font-family   : 'Segoe UI', system-ui, -apple-system, sans-serif;
    box-sizing    : border-box;
}
.rfp-widget * { box-sizing: border-box; }

/* Loading */
.rfp-loading {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    padding        : 40px 0;
    opacity        : 0.7;
    gap            : 12px;
}
.rfp-spinner {
    width         : 40px;
    height        : 40px;
    border        : 4px solid rgba(255,255,255,0.2);
    border-top    : 4px solid var(--rfp-accent);
    border-radius : 50%;
    animation     : rfp-spin 0.8s linear infinite;
}
@keyframes rfp-spin { to { transform: rotate(360deg); } }

/* Off Air */
.rfp-off-air         { text-align: center; padding: 32px 16px; }
.rfp-off-air-img-wrap{ margin-bottom: 20px; }
.rfp-off-air-img     { max-width: 100%; max-height: 260px; border-radius: 10px; object-fit: contain; }
.rfp-off-air-img[src=""] { display: none; }
.rfp-off-air-title   { font-size: 1.6rem; margin: 0 0 8px; font-weight: 700; }
.rfp-off-air-sub     { opacity: 0.65; font-size: 1rem; margin: 0; }

/* Now Playing / Up Next — full width */
.rfp-now-playing-wrap,
.rfp-next-up-wrap { margin-bottom: 16px; width: 100%; }

.rfp-now-playing,
.rfp-next-up {
    width         : 100%;
    display       : block;
    background    : var(--rfp-card);
    border        : 1px solid var(--rfp-border);
    border-left   : 4px solid var(--rfp-accent);
    border-radius : var(--rfp-radius);
    padding       : 20px 24px;
    position      : relative;
    overflow      : hidden;
}
.rfp-now-playing::before {
    content        : '';
    position       : absolute;
    inset          : 0;
    background     : linear-gradient(135deg, rgba(231,76,60,0.12) 0%, transparent 60%);
    pointer-events : none;
}
.rfp-label {
    font-size      : 0.72rem;
    font-weight    : 700;
    text-transform : uppercase;
    letter-spacing : .1em;
    opacity        : .55;
    margin-bottom  : 6px;
}
.rfp-song-name   { font-size: 1.3rem; font-weight: 700; line-height: 1.3; width: 100%; }
.rfp-song-artist { font-size: 0.9rem; opacity: 0.65; margin-top: 4px; }

/* Vote/Request button */
.rfp-list-wrap   { margin-top: 20px; width: 100%; }
.rfp-open-modal  {
    width         : 100%;
    padding       : 14px 20px;
    background    : var(--rfp-accent);
    color         : #fff;
    border        : none;
    border-radius : var(--rfp-radius);
    font-size     : 1rem;
    font-weight   : 700;
    cursor        : pointer;
    transition    : opacity .2s, transform .15s;
    letter-spacing: 0.02em;
}
.rfp-open-modal:hover { opacity: .88; transform: translateY(-1px); }

/* Status (main widget) */
.rfp-status {
    margin-top    : 16px;
    padding       : 12px 16px;
    border-radius : 10px;
    font-weight   : 600;
    font-size     : .9rem;
    text-align    : center;
    animation     : rfp-fadein .3s ease;
}

/* Error */
.rfp-error         { text-align: center; padding: 30px 16px; }
.rfp-error-msg     { opacity: .85; font-size: 1rem; margin: 0 0 6px; }
.rfp-error-detail  { opacity: .55; font-size: .78rem; margin: 0; }

/* ============================================================
   MODAL
   ============================================================ */
.rfp-modal-overlay {
    position   : fixed;
    inset      : 0;
    background : rgba(0,0,0,0.75);
    z-index    : 99999;
    display    : flex;
    align-items: center;
    justify-content: center;
    padding    : 16px;
}

.rfp-modal {
    background    : var(--rfp-bg);
    color         : var(--rfp-text);
    border-radius : var(--rfp-radius);
    box-shadow    : 0 24px 64px rgba(0,0,0,0.6);
    width         : 100%;
    max-width     : 520px;
    max-height    : 85vh;
    display       : flex;
    flex-direction: column;
    overflow      : hidden;
    font-family   : 'Segoe UI', system-ui, -apple-system, sans-serif;
}

.rfp-modal-header {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    padding         : 18px 20px 14px;
    border-bottom   : 1px solid var(--rfp-border);
    flex-shrink     : 0;
}
.rfp-modal-title  { font-size: 1.1rem; font-weight: 700; }
.rfp-modal-close  {
    background    : rgba(255,255,255,0.1);
    border        : none;
    color         : var(--rfp-text);
    width         : 32px;
    height        : 32px;
    border-radius : 50%;
    cursor        : pointer;
    font-size     : 1rem;
    display       : flex;
    align-items   : center;
    justify-content: center;
    transition    : background .2s;
}
.rfp-modal-close:hover { background: rgba(255,255,255,0.2); }

.rfp-modal-search {
    padding    : 12px 16px;
    border-bottom : 1px solid var(--rfp-border);
    flex-shrink: 0;
}
.rfp-search-input {
    width         : 100%;
    padding       : 9px 14px;
    background    : rgba(255,255,255,0.08);
    border        : 1px solid var(--rfp-border);
    border-radius : 8px;
    color         : var(--rfp-text);
    font-size     : .9rem;
    outline       : none;
    transition    : border-color .2s;
}
.rfp-search-input::placeholder { opacity: .45; }
.rfp-search-input:focus        { border-color: var(--rfp-accent); }

.rfp-modal-list {
    flex          : 1;
    overflow-y    : auto;
    padding       : 10px 12px;
    display       : flex;
    flex-direction: column;
    gap           : 8px;
}
.rfp-modal-list::-webkit-scrollbar       { width: 5px; }
.rfp-modal-list::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); border-radius: 4px; }
.rfp-modal-list::-webkit-scrollbar-thumb { background: var(--rfp-accent); border-radius: 4px; }

/* Sequence rows (inside modal) */
.rfp-seq-row {
    display       : flex;
    align-items   : center;
    background    : var(--rfp-card);
    border        : 1px solid var(--rfp-border);
    border-radius : 10px;
    padding       : 12px 14px;
    gap           : 12px;
    transition    : background 0.2s;
}
.rfp-seq-row:hover       { background: rgba(255,255,255,0.1); }
.rfp-seq-info            { flex: 1; min-width: 0; }
.rfp-seq-display-name    { font-weight: 600; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rfp-seq-artist          { font-size: .8rem; opacity: .6; margin-top: 2px; }
.rfp-vote-count          { font-size: .82rem; font-weight: 700; color: var(--rfp-accent); min-width: 30px; text-align: center; flex-shrink: 0; }

.rfp-seq-btn {
    background    : var(--rfp-accent);
    color         : #fff;
    border        : none;
    border-radius : 8px;
    padding       : 8px 18px;
    font-size     : .85rem;
    font-weight   : 600;
    cursor        : pointer;
    transition    : opacity .2s, transform .15s;
    white-space   : nowrap;
    flex-shrink   : 0;
}
.rfp-seq-btn:hover:not(:disabled) { opacity: .85; transform: translateY(-1px); }
.rfp-seq-btn:disabled             { opacity: .4; cursor: not-allowed; }
.rfp-seq-btn.rfp-voted            { background: #27ae60; }

/* Modal status bar */
.rfp-modal-status {
    margin    : 0 12px 12px;
    padding   : 10px 14px;
    border-radius : 8px;
    font-weight   : 600;
    font-size     : .88rem;
    text-align    : center;
    flex-shrink   : 0;
    animation     : rfp-fadein .3s ease;
}
.rfp-status-ok    { background: rgba(39,174,96,.25);  border: 1px solid #27ae60; }
.rfp-status-warn  { background: rgba(241,196,15,.2);  border: 1px solid #f1c40f; color: #f1c40f; }
.rfp-status-error { background: rgba(231,76,60,.2);   border: 1px solid var(--rfp-accent); }

@keyframes rfp-fadein { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }

/* Prevent body scroll when modal open */
body.rfp-modal-open { overflow: hidden; }

/* Responsive */
@media (max-width: 480px) {
    .rfp-widget    { padding: 16px; }
    .rfp-song-name { font-size: 1.1rem; }
    .rfp-modal     { max-height: 92vh; }
}