/*
 * Stigma Radio Player CSS
 * Αρχείο: wp-content/themes/stigma/stigma-player.css
 */

/* ── Wrap ── */
.sp-wrap {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50px;
    padding: 6px 14px 6px 6px;
    font-family: 'Montserrat', 'Segoe UI', sans-serif;
    height: 46px;
    box-sizing: border-box;
    min-width: 0;
}

/* ── Play button ── */
.sp-play {
    width: 34px;
    height: 34px;
    background: #f07c00;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .15s, transform .1s;
}
.sp-play:hover  { background: #d96d00; }
.sp-play:active { transform: scale(.93); }
.sp-play svg    { fill: white; width: 11px; height: 11px; margin-left: 1px; }

/* ── Live indicator ── */
.sp-live {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: #f07c00;
    line-height: 1;
}
.sp-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #f07c00;
    flex-shrink: 0;
    animation: sp-pulse 1.5s ease-in-out infinite;
}
@keyframes sp-pulse { 0%,100%{opacity:1} 50%{opacity:.25} }

/* ── Info column ── */
.sp-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    max-width: 200px;
}
.sp-song {
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
.sp-show {
    font-size: 10px;
    font-weight: 500;
    color: rgba(255,255,255,.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

/* ── Volume ── */
.sp-vol {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}
.sp-vol-icon {
    width: 16px;
    height: 16px;
    color: rgba(255,255,255,.45);
    flex-shrink: 0;
}
.sp-volume-slider {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 72px !important;
    height: 4px !important;
    border-radius: 2px !important;
    background: rgba(255,255,255,.25) !important;
    outline: none !important;
    cursor: pointer !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    vertical-align: middle;
    transition: background .15s;
}
.sp-volume-slider:hover {
    background: rgba(255,255,255,.4) !important;
}
.sp-volume-slider::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background: transparent;
}
.sp-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    background: #f07c00 !important;
    cursor: pointer !important;
    margin-top: -5px !important;
    border: none !important;
    box-shadow: none !important;
    transition: transform .1s;
}
.sp-volume-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}
.sp-volume-slider::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,.25);
    border: none;
}
.sp-volume-slider::-moz-range-thumb {
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    background: #f07c00 !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

/* Volume wave animation when muted */
.sp-wrap.sp-muted .sp-vol-icon #sp-vol-wave1,
.sp-wrap.sp-muted .sp-vol-icon #sp-vol-wave2 {
    opacity: .2;
}

/* ── Divider ── */
.sp-divider {
    width: 1px;
    height: 22px;
    background: rgba(255,255,255,.12);
    flex-shrink: 0;
}

/* ── Message buttons ── */
.sp-msg {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.75);
    text-decoration: none;
    flex-shrink: 0;
    transition: background .15s, border-color .15s;
    white-space: nowrap;
}
.sp-msg svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.sp-msg:hover {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.25);
    color: white;
}
.sp-msg-viber { color: #c495f0; border-color: rgba(123,66,175,.35); background: rgba(123,66,175,.1); }
.sp-msg-viber:hover { background: rgba(123,66,175,.22); border-color: rgba(123,66,175,.5); color: #d4b0f8; }
.sp-msg-wa    { color: #4cd97b; border-color: rgba(37,211,102,.35); background: rgba(37,211,102,.08); }
.sp-msg-wa:hover    { background: rgba(37,211,102,.18); border-color: rgba(37,211,102,.5); color: #6ee890; }

/* ── Frequency badge ── */
.sp-freq {
    font-size: 14px;
    font-weight: 900;
    color: white;
    letter-spacing: .5px;
    flex-shrink: 0;
}

/* ── Playing state ── */
.sp-wrap.sp-playing .sp-play {
    background: #f07c00;
}
.sp-wrap.sp-playing .sp-dot {
    background: #f07c00;
}

/* ── Responsive: κρύψε labels σε μικρά desktop ── */
@media (max-width: 1100px) {
    .sp-msg span   { display: none; }
    .sp-msg        { padding: 5px 7px; }
    .sp-info       { max-width: 140px; }
}
@media (max-width: 960px) {
    .sp-vol        { display: none; }
    .sp-divider    { display: none; }
    .sp-info       { max-width: 110px; }
}
/* Mobile: κρύψε όλο τον header player (έχει sticky bar) */
@media (max-width: 768px) {
    .sp-wrap { display: none; }
}

/* ── Astra header integration ──
   Ο Astra header είναι σκούρος με --acc πορτοκαλί.
   Το .sp-wrap βγαίνει σωστά σε σκούρο φόντο.
   Αν το header σου είναι λευκό, άλλαξε τα rgba παρακάτω: */
.ast-header-custom-item .sp-wrap,
.ast-masthead-custom-menu-items .sp-wrap,
.main-header-bar .sp-wrap {
    /* Κληρονομεί το σκούρο background του header — ΟΚ */
}