/* ============================================================
   MyBlueDay Audio Player — mbd-audio-player.css  v3.0
   ============================================================ */

/* SVG ikony — viewBox musí sedět se symboly definovanými v JS */
.mbd-icon{width:20px;height:20px;overflow:visible;stroke:currentColor;fill:none;stroke-width:2;color:#333;display:block}

.mbd-audio-wrapper{max-width:800px;margin:20px auto;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
.mbd-audio-description{background:#fff;padding:20px;border-radius:8px 8px 0 0;border:1px solid #ededed;border-bottom:none}
.mbd-audio-description h3{margin:0 0 12px;font-size:21px!important;color:#000;font-weight:600}
.mbd-audio-description p{margin:0;font-size:16px!important;line-height:1.6;color:#333}

.mbd-audio-player{background:#dcedf7;padding:16px 20px;border-radius:0 0 8px 8px;border:1px solid #ededed;display:flex;align-items:center;gap:12px;position:relative}
.mbd-play-btn,.mbd-volume-btn{background:#fff;border:1px solid #ededed;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s;flex-shrink:0;padding:0}
.mbd-play-btn:hover,.mbd-volume-btn:hover{background:#ededed;transform:scale(1.05)}
.mbd-play-btn:active,.mbd-volume-btn:active{transform:scale(.95)}

/* Přepínání ikon přes CSS třídy — žádný JS display:none */
.mbd-audio-player.mbd-muted .mbd-volume-icon,
.mbd-audio-player.mbd-playing .mbd-play-icon,
.mbd-mute-icon,
.mbd-pause-icon{display:none}
.mbd-audio-player.mbd-muted .mbd-mute-icon,
.mbd-audio-player.mbd-playing .mbd-pause-icon{display:block}

/* Progress container */
.mbd-progress-container{flex:1;display:flex;align-items:center;gap:12px;min-width:0}
.mbd-time{font-size:13px!important;color:#333;font-variant-numeric:tabular-nums;flex-shrink:0;min-width:40px}

/* Progress bar — track nahrazen ::before pseudo-elementem (o 1 DOM uzel méně) */
.mbd-progress-bar{flex:1;height:6px;background:#fff;border-radius:3px;position:relative;cursor:pointer;min-width:100px}
.mbd-progress-bar::before{content:"";position:absolute;inset:0;background:#ededed;border-radius:3px}
.mbd-progress-fill{background:#333;position:absolute;left:0;top:0;height:100%;border-radius:3px;width:0%;transition:width .1s linear;z-index:1}
.mbd-progress-handle{background:#333;position:absolute;left:0;top:50%;transform:translate(-50%,-50%);width:14px;height:14px;border:2px solid #fff;border-radius:50%;opacity:0;transition:opacity .2s;pointer-events:none;z-index:2}
.mbd-progress-bar.mbd-dragging .mbd-progress-handle,
.mbd-progress-bar:hover .mbd-progress-handle{opacity:1}

/* Volume slider — track nahrazen ::before */
.mbd-volume-slider{width:80px;height:6px;background:#fff;border-radius:3px;position:relative;cursor:pointer;flex-shrink:0}
.mbd-volume-slider::before{content:"";position:absolute;inset:0;background:#ededed;border-radius:3px}
.mbd-volume-fill{position:absolute;top:0;left:0;height:100%;background:#333;border-radius:3px;width:100%;z-index:1}
.mbd-volume-handle{position:absolute;top:50%;left:100%;transform:translate(-50%,-50%);width:14px;height:14px;background:#333;border:2px solid #fff;border-radius:50%;opacity:0;transition:opacity .2s;pointer-events:none;z-index:2}
.mbd-volume-slider.mbd-dragging .mbd-volume-handle,
.mbd-volume-slider:hover .mbd-volume-handle{opacity:1}

/* Stavy */
.mbd-audio-player.mbd-loading{opacity:.6;pointer-events:none}
.mbd-audio-player.mbd-error{background:#ffe6e6}
.mbd-audio-player.mbd-error::after{content:"Chyba při načítání audio souboru";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#c00;font-size:.85rem;pointer-events:none;white-space:nowrap}

/* Responzivita */
@media(max-width:768px){
  .mbd-audio-wrapper{margin:2px}
  .mbd-audio-description{padding:16px}
  .mbd-audio-description h3{font-size:1.1rem}
  .mbd-audio-description p{font-size:.9rem}
  .mbd-audio-player{padding:12px 16px;gap:10px}
  .mbd-play-btn,.mbd-volume-btn{width:40px;height:40px}
  .mbd-icon{width:18px;height:18px}
  .mbd-time{font-size:.8rem;min-width:38px}
  .mbd-volume-slider{width:60px}
}
@media(max-width:480px){
  .mbd-audio-description{padding:14px}
  .mbd-audio-description h3{font-size:1rem}
  .mbd-audio-player{padding:10px 12px;gap:8px;flex-wrap:wrap}
  .mbd-progress-container{order:3;width:100%;margin-top:4px}
  .mbd-volume-slider{width:50px}
}