.nrr-box{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  padding:14px;
  border:1px solid #ddd;
  border-radius:14px;
  background:#fff;
}

.nrr-play{
  background:#51ac05;
  color:#fff;
  border:0;
  border-radius:999px;
  padding:10px 14px;
}

.nrr-stop{
  background:#c00;
  color:#fff;
  border:0;
  border-radius:999px;
  padding:10px 14px;
}


.nrr-toggle{
flex: 1 1 0;
  background:#f7f19b;
  color:#000;
  border:0;
  border-radius:999px;
  padding:10px 14px;
}
.nrr-toggle:disabled{
  opacity:.5;
}

.nrr-status{
  font-size:14px;
  opacity:.8;
}

.nrr-audio{
  width:100%;
  border-radius:12px;
}

@media (max-width:720px){
  /* 1. rida: Play + Stop */
  .nrr-play{ order:0; flex:1 1 0; }
  .nrr-stop{ order:11; flex:1 1 0; }

  /* 2. rida: Chapter valik */
  .nrr-chapter{
    order:20;
    flex:0 0 100%;
border-radius: 30px;
padding-right: 35px;
  }

  /* 3. rida: Status */
  .nrr-status{
    order:30;
    width:100%;
    flex:0 0 100%;
  }

  /* 4. rida: Audio */
  .nrr-audio{
    order:40;
    width:100%;
    flex:0 0 100%;
  }
}
  .nrr-status{ width:100%; }
}


.nrr-chapter{
  flex: 1 1 320px;
  min-width: 260px;
  padding:10px;
}

@media screen and (max-width: 720px){
  .nrr-chapter{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    min-width:0;
  }
}

@media (min-width:720px){
  /* Nupud + chapter + status ühel real, ilma overflow’ta */
  .nrr-play,
  .nrr-stop{
    flex: 1 1 0;
    white-space: nowrap;
  }

  .nrr-chapter{
    flex: content;
    min-width: 160px;
    max-width: 100%;
    width: auto;
    box-sizing: border-box;
	margin-bottom: 0px !important;
border-radius:30px !important;
  }

  .nrr-status{
    flex: 0 1 140px;
    min-width: 120px;
    max-width: 35%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: #f0f0f0;
    padding: 6px 0px;
    border-radius: 30px;
    text-align: center;

  }

  /* Audio alati uuele reale */
  .nrr-audio{
    flex: 0 0 100%;
    width: 100%;
  }
}


/* UI custom properties (värvid + hover) */
.nrr-play{
  background: var(--nrr-play-bg, #51ac05) !important;
  color: var(--nrr-play-color, #fff) !important;
}
.nrr-play:hover{
  background: var(--nrr-play-bg-hover, #3f8b04) !important;
  color: var(--nrr-play-color-hover, #fff) !important;
}
.nrr-stop{
  background: var(--nrr-stop-bg, #c00) !important;
  color: var(--nrr-stop-color, #fff) !important;
}
.nrr-stop:hover{
  background: var(--nrr-stop-bg-hover, #a40000) !important;
  color: var(--nrr-stop-color-hover, #fff) !important;
}
.nrr-toggle{
  background: var(--nrr-toggle-bg, #f7f19b) !important;
  color: var(--nrr-toggle-color, #000) !important;
}
.nrr-toggle:hover{
  background: var(--nrr-toggle-bg-hover, #efe46b) !important;
  color: var(--nrr-toggle-color-hover, #000) !important;
}

/* Kuula nupu ikoon */
.nrr-play {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items: center;
  justify-content: center;
  column-gap: 8px;
}
.nrr-play-icon{
  width: var(--nrr-icon-size, 18px);
  height: var(--nrr-icon-size, 18px);
  flex: 0 0 auto;
  display:inline-block;
}
.nrr-play-icon.nrr-icon-lottie{
  width: var(--nrr-icon-size, 18px);
  height: var(--nrr-icon-size, 18px);
}
.nrr-play-label{ display:inline-block; }

/* ===== Compact design flex layout overrides ===== */
.nrr-compact{
  display:flex;
}

/* Peida tühi chapter enne kui valikud on valmis */
.nrr-box.nrr-compact .nrr-chapter{
  display:none;
}
.nrr-box.nrr-compact.nrr-chapters-ready .nrr-chapter{
  display:inline-block;
}

@media (min-width:721px){
  .nrr-box.nrr-compact{
    flex-wrap:nowrap;
    align-items:center;
  }

  /* fikseeri nupud + status 100px, chapter täidab ülejäänu */
  .nrr-box.nrr-compact .nrr-play,
  .nrr-box.nrr-compact .nrr-toggle,
  .nrr-box.nrr-compact .nrr-stop,
  .nrr-box.nrr-compact .nrr-status{
    flex: 0 0 100px !important;
    width: 100px !important;
    max-width: 100px !important;
    box-sizing:border-box;
    white-space: nowrap;
    justify-content:center;
    text-align:center;
  }

  .nrr-box.nrr-compact .nrr-chapter{
    display:inline-block;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing:border-box;
  }
}

@media (max-width:720px){
  .nrr-box.nrr-compact{
    flex-wrap:wrap;
  }

  /* Chapter kohe järgmisele reale ja täislaiuses (kui valmis) */
  .nrr-box.nrr-compact.nrr-chapters-ready .nrr-chapter{
    display:block;
    order: 20;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing:border-box;
  }

  /* Status max 100% */
  .nrr-box.nrr-compact .nrr-status{
    order: 30;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing:border-box;
  }
}

/* ===== Compact layout overrides v2 (kõrgem prioriteet) ===== */
.nrr-box.nrr-compact{
  display:flex !important;
  gap:10px !important;
  align-items:center !important;
}

/* Peida chapter kuni menüü on valmis (väldib tühja valikut enne cache) */
.nrr-box.nrr-compact .nrr-chapter{
  display:none !important;
}
.nrr-box.nrr-compact.nrr-chapters-ready .nrr-chapter{
  display:flex !important;
}

/* Desktop: kõik ühel real, nupud+status 100px, chapter täidab ülejäänu */
@media (min-width: 721px){
  .nrr-box.nrr-compact{
    flex-wrap:nowrap !important;
  }

  .nrr-box.nrr-compact .nrr-play,
  .nrr-box.nrr-compact .nrr-toggle,
  .nrr-box.nrr-compact .nrr-stop,
  .nrr-box.nrr-compact .nrr-status{
    flex: 0 0 100px !important;
    width: 100px !important;
    max-width: 100px !important;
    min-width: 100px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    text-align:center !important;
    justify-content:center !important;
  }

  .nrr-box.nrr-compact.nrr-chapters-ready .nrr-chapter{
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    display:block !important;
  }

  /* Audio (kui on näidatud) jääb uuele reale */
  .nrr-box.nrr-compact .nrr-audio{
    flex: 0 0 100% !important;
    width: 100% !important;
  }
}

/* Mobiil: chapter kohe järgmisele reale 100%, status max 100% */
@media (max-width: 720px){
  .nrr-box.nrr-compact{
    flex-wrap:wrap !important;
  }

  .nrr-box.nrr-compact.nrr-chapters-ready .nrr-chapter{
    order: 20 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing:border-box !important;
    display:block !important;
  }

  .nrr-box.nrr-compact .nrr-status{
    order: 30 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing:border-box !important;
  }
}

@media (min-width: 721px) {
  .nrr-box.nrr-compact .nrr-audio {
    flex: 0 100% !important;
  }
}


/* Nuppude ikoonid (toggle/stop) */
.nrr-toggle-icon, .nrr-stop-icon{
  display:inline-block;
  vertical-align:middle;
  margin-right:8px;
}


/* Icons inside frontend buttons */
.nrr-icon-img{
  width: var(--nrr-icon-size, 18px);
  height: var(--nrr-icon-size, 18px);
  display:inline-block;
  object-fit: contain;
}
.nrr-play, .nrr-toggle, .nrr-stop{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

@media (min-width: 721px) {
  .nrr-box.nrr-compact .nrr-play,
  .nrr-box.nrr-compact .nrr-toggle,
  .nrr-box.nrr-compact .nrr-stop,
  .nrr-box.nrr-compact .nrr-status {
    display: flex !important;
  }
}

@media (min-width: 721px) {
  .nrr-box.nrr-compact .nrr-play,
  .nrr-box.nrr-compact .nrr-toggle,
  .nrr-box.nrr-compact .nrr-stop,
  .nrr-box.nrr-compact .nrr-status {
    min-width: max-content !important;
  }
}