/* ═══════════════════════════════════════════════════
   AudioBook Pro  — Player v3  (Light & Colourful)
   ═══════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');

/* ── Root ────────────────────────────────────────── */
.abp-wrap {
  font-family:'Nunito',system-ui,sans-serif;
  max-width:820px; margin:1.5rem auto;
  border-radius:24px; overflow:hidden;
  box-shadow:0 8px 40px rgba(99,102,241,.18), 0 2px 8px rgba(0,0,0,.08);
  border:2px solid #e0e7ff;
  background:#f8f9ff;
}

/* ── Book Card ───────────────────────────────────── */
.abp-card {
  display:flex; gap:1.25rem; align-items:flex-start;
  padding:1.5rem 1.75rem;
  background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 50%,#a78bfa 100%);
  color:#fff;
}
.abp-thumb-col { flex-shrink:0; }
.abp-thumb {
  width:110px; height:110px; border-radius:16px;
  object-fit:cover; display:block;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  border:3px solid rgba(255,255,255,.5);
}
.abp-info-col { flex:1; min-width:0; }
.abp-chip {
  display:inline-block; background:rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.35);
  padding:.2rem .75rem; border-radius:20px;
  font-size:.72rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; margin-bottom:.5rem;
}
.abp-book-title {
  font-size:1.55rem; font-weight:900; margin:0 0 .3rem;
  line-height:1.2; color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.2);
}
.abp-author { font-size:.85rem; margin:.25rem 0; opacity:.85; }
.abp-book-desc {
  font-size:.82rem; opacity:.8; margin:.3rem 0 .6rem;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.abp-pills { display:flex; gap:.5rem; flex-wrap:wrap; }
.abp-pill {
  padding:.25rem .8rem; border-radius:20px;
  font-size:.75rem; font-weight:700;
  display:inline-flex; align-items:center; gap:.3rem;
}
.abp-pill-blue  { background:#fff; color:#6366f1; }
.abp-pill-green { background:#10b981; color:#fff; max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── Player Box ──────────────────────────────────── */
.abp-player-box {
  background:#fff;
  border-bottom:2px solid #e0e7ff;
}

/* Splash */
.abp-splash {
  display:flex; align-items:center; gap:1.25rem;
  padding:1.5rem 1.75rem; min-height:120px;
}
.abp-splash-circle {
  flex-shrink:0;
  width:72px; height:72px; border-radius:50%;
  background:linear-gradient(135deg,#6366f1,#8b5cf6);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 20px rgba(99,102,241,.45);
  animation:abp-bounce-soft 2s ease-in-out infinite;
  position:relative;
}
.abp-splash-circle::after {
  content:''; position:absolute; inset:-8px; border-radius:50%;
  border:2px dashed rgba(99,102,241,.35);
  animation:abp-spin 8s linear infinite;
}
@keyframes abp-bounce-soft {
  0%,100%{transform:scale(1) translateY(0);}
  50%{transform:scale(1.06) translateY(-4px);}
}
.abp-splash-play {
  font-size:1.8rem; color:#fff;
  margin-left:6px; /* optical center */
}
.abp-splash-text { color:#374151; line-height:1.6; }
.abp-splash-text strong { font-size:1rem; color:#6366f1; font-weight:800; display:block; }
.abp-splash-text span   { font-size:.85rem; color:#9ca3af; }

/* Resume prompt */
.abp-resume-box {
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  width:100%; padding:.9rem 1.1rem; margin-bottom:1rem;
  background:linear-gradient(90deg,#ede9fe,#f0f9ff);
  border:2px solid #c7d2fe; border-radius:16px;
}
.abp-resume-text { line-height:1.5; min-width:0; }
.abp-resume-text strong { font-size:.78rem; color:#8b5cf6; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
.abp-resume-text span {
  display:block; font-size:.9rem; font-weight:700; color:#1e1b4b;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:320px;
}
.abp-resume-btn {
  flex-shrink:0; padding:.55rem 1.1rem; border-radius:12px;
  border:none; background:#6366f1; color:#fff;
  font-family:inherit; font-size:.85rem; font-weight:700;
  cursor:pointer; transition:all .18s;
  box-shadow:0 4px 16px rgba(99,102,241,.35);
}
.abp-resume-btn:hover, .abp-resume-btn:focus { background:#4f46e5; }
@media(max-width:520px){
  .abp-resume-box { flex-direction:column; align-items:stretch; text-align:center; }
  .abp-resume-text span { max-width:100%; }
}

/* Now-playing row */
.abp-now-row {
  display:flex; align-items:center; gap:.85rem;
  padding:.9rem 1.5rem;
  background:linear-gradient(90deg,#ede9fe,#f0f9ff);
  border-bottom:1px solid #e0e7ff;
}
.abp-now-icon {
  flex-shrink:0; width:44px; height:44px; border-radius:50%;
  background:linear-gradient(135deg,#6366f1,#8b5cf6);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.1rem; box-shadow:0 3px 12px rgba(99,102,241,.4);
  padding-left:3px;
}
.abp-now-info { flex:1; min-width:0; }
.abp-now-lesson { display:block; font-size:.7rem; font-weight:700; color:#8b5cf6; letter-spacing:.06em; text-transform:uppercase; }
.abp-now-title  { display:block; font-size:.95rem; font-weight:700; color:#1e1b4b; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Native audio */
.abp-audio-player { padding:.25rem 0 0; }
.abp-audio-player audio {
  display:block; width:100%; height:48px;
  background:#f5f3ff;
}

/* Iframe */
.abp-iframe { width:100%; height:120px; border:none; display:block; background:#f5f3ff; }

/* Prev / Next */
.abp-prev-next {
  display:flex; gap:.6rem;
  padding:.8rem 1.25rem;
  background:#fafafe;
  border-top:1px solid #e0e7ff;
}
.abp-pn-btn {
  flex:1; padding:.55rem 1rem; border-radius:12px;
  border:2px solid #6366f1; color:#6366f1;
  background:#fff; font-family:inherit; font-size:.85rem; font-weight:700;
  cursor:pointer; transition:all .18s;
}
.abp-pn-btn:hover, .abp-pn-btn:focus {
  background:#6366f1; color:#fff;
  box-shadow:0 4px 16px rgba(99,102,241,.35);
}
.abp-pn-next { background:#6366f1; color:#fff; }
.abp-pn-next:hover { background:#4f46e5; border-color:#4f46e5; }

/* ── Ad slot ─────────────────────────────────────── */
.abp-ad-zone {
  min-height:90px; background:#fff;
  display:flex; align-items:center; justify-content:center;
  border-bottom:2px solid #e0e7ff;
}

/* ── Lesson list ─────────────────────────────────── */
.abp-lessons-box { background:#f8f9ff; }
.abp-lessons-top {
  display:flex; align-items:center; justify-content:space-between;
  padding:.9rem 1.25rem; gap:.75rem;
  border-bottom:2px solid #e0e7ff;
  flex-wrap:wrap;
}
.abp-lessons-heading { font-size:.9rem; font-weight:800; color:#6366f1; white-space:nowrap; }
.abp-search-box {
  flex:1; max-width:220px; min-width:100px;
  padding:.45rem .85rem; border-radius:20px;
  border:2px solid #c7d2fe; background:#fff;
  font-family:inherit; font-size:.82rem; color:#374151;
  outline:none; transition:border-color .2s, box-shadow .2s;
}
.abp-search-box:focus { border-color:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,.15); }

.abp-lessons-scroll {
  max-height:400px; overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:#c7d2fe transparent;
}
.abp-lessons-scroll::-webkit-scrollbar { width:5px; }
.abp-lessons-scroll::-webkit-scrollbar-thumb { background:#c7d2fe; border-radius:10px; }

/* Individual lesson row */
.abp-lesson-row {
  width:100%; display:flex; align-items:center; gap:.85rem;
  padding:.75rem 1.25rem;
  background:transparent; border:none;
  border-bottom:1px solid #e0e7ff;
  font-family:inherit; font-size:.88rem; color:#374151;
  text-align:left; cursor:pointer;
  transition:background .15s, border-left .15s;
  position:relative;
}
.abp-lesson-row:last-child { border-bottom:none; }
.abp-lesson-row:hover {
  background:linear-gradient(90deg,#ede9fe22,#f0f9ff22);
}
.abp-lesson-row:hover .abp-lr-play { opacity:1; color:#6366f1; }
.abp-lesson-row:hover .abp-lr-num  { background:#6366f1; color:#fff; border-color:#6366f1; }

/* Active lesson */
.abp-lr-active {
  background:linear-gradient(90deg,#ede9fe,#f0f9ff) !important;
  border-left:4px solid #6366f1;
  padding-left:calc(1.25rem - 4px);
}
.abp-lr-active .abp-lr-num  { background:#6366f1; color:#fff; border-color:#6366f1; }
.abp-lr-active .abp-lr-play { opacity:1; color:#6366f1; animation:abp-spin 1.5s linear infinite; }
.abp-lr-active .abp-lr-title { font-weight:800; color:#4338ca; }

.abp-lr-num {
  flex-shrink:0; width:30px; height:30px;
  background:#e0e7ff; border:2px solid #c7d2fe;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:.75rem; font-weight:800; color:#6366f1;
  transition:all .15s;
}
.abp-lr-title { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.abp-lr-play  { flex-shrink:0; font-size:.8rem; color:#d1d5db; opacity:0; transition:opacity .15s; }

/* ── Utilities ───────────────────────────────────── */
.abp-hide { display:none !important; }
@keyframes abp-spin { to{transform:rotate(360deg)} }

/* ── Responsive ──────────────────────────────────── */
@media(max-width:520px){
  .abp-card     { flex-direction:column; padding:1.25rem; }
  .abp-thumb    { width:100%; height:180px; }
  .abp-book-title { font-size:1.2rem; }
  .abp-splash   { flex-direction:column; text-align:center; padding:1.5rem 1rem; }
  .abp-prev-next { gap:.4rem; }
  .abp-pn-btn   { font-size:.78rem; padding:.5rem .6rem; }
}


/* ── v1.4: auto-play, progress & now-playing highlight ───────────────────── */
.abp-progress-wrap { margin-top:12px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.abp-progress-bar {
  flex:1 1 180px; min-width:140px; height:8px; border-radius:99px;
  background:#e5e7fb; overflow:hidden;
}
.abp-progress-fill {
  display:block; height:100%; width:0%; border-radius:99px;
  background:linear-gradient(90deg,#6366f1,#22c55e); transition:width .4s ease;
}
.abp-progress-label { font-size:13px; font-weight:700; color:#4338ca; }

/* Currently playing lesson – clearly different colour */
.abp-lesson-row.abp-lr-playing {
  background:linear-gradient(90deg,#ecfdf5,#e0f2fe);
  box-shadow:inset 4px 0 0 #10b981;
}
.abp-lr-playing .abp-lr-num   { background:#10b981 !important; color:#fff !important; border-color:#10b981 !important; }
.abp-lr-playing .abp-lr-title { color:#047857 !important; font-weight:800; }
.abp-lr-playing .abp-lr-play  { opacity:1; color:#10b981 !important; }

/* Completed lessons */
.abp-lr-check { display:none; margin-left:auto; color:#16a34a; font-weight:900; font-size:15px; }
.abp-lr-done .abp-lr-check { display:inline; }
.abp-lr-done .abp-lr-num { background:#dcfce7; border-color:#86efac; color:#166534; }
.abp-lr-done .abp-lr-title { color:#4b5563; }

/* Unavailable audio */
.abp-lr-missing .abp-lr-title { color:#9ca3af; text-decoration:line-through; }
.abp-lr-missing .abp-lr-num   { background:#f3f4f6; color:#9ca3af; border-color:#e5e7eb; }

/* Fallback archive.org player (used only when direct audio can't be resolved) */
.abp-embed-box { margin-top: 10px; position: relative; }
.abp-embed-box iframe { width: 100%; height: 60px; border: 0; border-radius: 10px; background: #f4f5fb; }
.abp-embed-frame { margin-top: 8px; }
.abp-embed-box.abp-embed-collapsed .abp-embed-frame {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); opacity: 0; pointer-events: none;
}
.abp-embed-toggle {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border: 1px solid #d9dcf0; background: #f4f5fb; color: #4b4fd6;
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 7px 14px; border-radius: 999px; transition: background .15s, color .15s;
}
.abp-embed-toggle:hover { background: #4b4fd6; color: #fff; border-color: #4b4fd6; }

/* Resume / account note */
.abp-resume-note {
  display: flex; gap: 12px; align-items: flex-start;
  margin-top: 14px; padding: 14px 16px;
  background: #f4f5fb; border: 1px solid #e3e5f5; border-radius: 14px;
}
.abp-resume-icon { font-size: 22px; line-height: 1; }
.abp-resume-text strong { display: block; font-size: 15px; color: #1e2145; margin-bottom: 4px; }
.abp-resume-text p { margin: 0 0 6px; font-size: 13.5px; line-height: 1.55; color: #4a4f70; }
.abp-resume-ok { color: #157a4b !important; font-weight: 600; }
.abp-resume-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.abp-resume-btn {
  display: inline-flex; align-items: center; text-decoration: none;
  font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 999px;
  border: 1px solid #d9dcf0; color: #4b4fd6; background: #fff;
}
.abp-resume-btn:hover { background: #eceefb; }
.abp-resume-btn-primary { background: #4b4fd6; color: #fff; border-color: #4b4fd6; }
.abp-resume-btn-primary:hover { background: #3d41c4; color: #fff; }
@media (max-width: 480px) { .abp-resume-actions .abp-resume-btn { flex: 1 1 auto; justify-content: center; } }

/* v1.4.4 — always-visible player-controls toggle + skip button */
.abp-embed-toggle { display:inline-block; margin-top:10px; }
.abp-pn-btn.abp-pn-skip { background:#eef0ff; color:#3b3fb8; border-color:#c9cdf7; font-weight:600; }
.abp-pn-btn.abp-pn-skip:hover { background:#4b4fd6; color:#fff; border-color:#4b4fd6; }
.abp-embed-box.abp-embed-collapsed .abp-embed-frame { display:none; }