/* ============================================================
   Reggie Audiobook Player — Stylesheet
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=DM+Sans:wght@300;400;500&display=swap');

/* ── Variables ──────────────────────────────────────────────────────── */
.rap-player {
    --rap-bg:          #f5e9c4;
    --rap-surface:     #ede0b0;
    --rap-border:      #d4c080;
    --rap-text:        #2e2510;
    --rap-muted:       #7a6a3a;
    --rap-accent:      #a0620a;
    --rap-accent-glow: rgba(160,98,10,0.25);
    --rap-active-bg:   #e8d898;
    --rap-playing-bg:  #dece80;
    --rap-radius:      14px;
    --rap-font-serif:  'Playfair Display', Georgia, serif;
    --rap-font-sans:   'DM Sans', system-ui, sans-serif;
}

/* ── Shell ──────────────────────────────────────────────────────────── */
.rap-player {
    background:    var(--rap-bg);
    color:         var(--rap-text) !important;
    font-family:   var(--rap-font-sans);
    border-radius: var(--rap-radius);
    border:        1px solid var(--rap-border);
    max-width:     700px;
    margin:        2rem auto;
    overflow:      hidden;
    box-shadow:    0 12px 40px rgba(100,80,0,0.18), 0 4px 12px rgba(100,80,0,0.12);
    box-sizing:    border-box;
}

.rap-player *,
.rap-player *::before,
.rap-player *::after {
    box-sizing: border-box;
}

/* ── Header ─────────────────────────────────────────────────────────── */
.rap-header {
    display:       flex;
    gap:           1.5rem;
    padding:       1.75rem;
    border-bottom: 1px solid var(--rap-border);
    background:    linear-gradient(145deg, #f0dfa0 0%, #f5e9c4 100%);
    align-items:   center;
}

.rap-cover {
    flex-shrink:   0;
    width:         100px;
    height:        100px;
    border-radius: 8px;
    overflow:      hidden;
    box-shadow:    0 8px 24px rgba(0,0,0,0.6);
    border:        1px solid var(--rap-border);
}
.rap-cover img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

.rap-book-info {
    display:        flex;
    flex-direction: column;
    gap:            .4rem;
    min-width:      0;
    flex:           1;
}

/* Force all text inside the header to be readable — overrides theme styles */
.rap-player .rap-title {
    font-family:   var(--rap-font-serif) !important;
    font-size:     1.35rem !important;
    font-weight:   600 !important;
    line-height:   1.25 !important;
    margin:        0 !important;
    padding:       0 !important;
    color:         #1e1808 !important;
    white-space:   normal !important;       /* allow wrapping — no truncation */
    overflow:      visible !important;
    text-overflow: unset !important;
    border:        none !important;
    background:    none !important;
}

.rap-player .rap-author,
.rap-player .rap-narrator {
    font-size:   .85rem !important;
    color:       var(--rap-muted) !important;
    margin:      0 !important;
    padding:     0 !important;
    font-weight: 300 !important;
    line-height: 1.4 !important;
    border:      none !important;
    background:  none !important;
}
.rap-player .rap-author span,
.rap-player .rap-narrator span {
    color:       #8a4a00 !important;
    font-weight: 500 !important;
}

.rap-player .rap-desc {
    font-size:   .82rem !important;
    color:       var(--rap-muted) !important;
    margin:      .2rem 0 0 !important;
    padding:     0 !important;
    line-height: 1.55 !important;
    display:     -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow:    hidden !important;
    border:      none !important;
    background:  none !important;
}

.rap-bookmark-status {
    font-size:  .78rem;
    color:      #8a4a00;
    font-style: italic;
    margin:     0;
    padding:    0;
}

/* ── Controls ───────────────────────────────────────────────────────── */
.rap-controls {
    padding:       1.5rem 1.75rem 1.25rem;
    border-bottom: 1px solid var(--rap-border);
    background:    var(--rap-surface);
}

/* Progress bar */
.rap-progress-wrap {
    display:       flex;
    align-items:   center;
    gap:           .85rem;
    margin-bottom: 1.25rem;
}

.rap-time-current,
.rap-time-total {
    font-size:            .8rem !important;
    color:                #5a4a20 !important;
    font-variant-numeric: tabular-nums;
    min-width:            2.6rem;
    white-space:          nowrap;
    margin:               0 !important;
    padding:              0 !important;
}
.rap-time-total { text-align: right; }

.rap-progress-bar {
    flex:          1;
    height:        5px;
    background:    var(--rap-border);
    border-radius: 99px;
    position:      relative;
    cursor:        pointer;
    padding:       12px 0;
    margin:        -12px 0;
}
.rap-progress-bar:hover .rap-progress-thumb {
    opacity:   1;
    transform: translate(-50%, -50%) scale(1);
}

.rap-progress-fill {
    height:        5px;
    width:         0%;
    background:    linear-gradient(90deg, #c8900a, var(--rap-accent));
    border-radius: 99px;
    position:      absolute;
    top:           50%;
    transform:     translateY(-50%);
    transition:    width .1s linear;
    pointer-events: none;
}

.rap-progress-thumb {
    width:          15px;
    height:         15px;
    background:     var(--rap-accent);
    border:         2px solid #fff;
    border-radius:  50%;
    position:       absolute;
    top:            50%;
    left:           0%;
    transform:      translate(-50%, -50%) scale(0.6);
    opacity:        0;
    transition:     opacity .15s, transform .15s;
    pointer-events: none;
    box-shadow:     0 0 10px var(--rap-accent-glow);
}

/* Buttons */
.rap-buttons {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             .65rem;
    margin-bottom:   1rem;
}

.rap-player .rap-btn {
    background:    rgba(255,255,255,0.3) !important;
    border:        1px solid var(--rap-border) !important;
    color:         #d8c8b0 !important;
    border-radius: 50px !important;
    cursor:        pointer !important;
    font-family:   var(--rap-font-sans) !important;
    font-size:     .8rem !important;
    padding:       .5rem 1rem !important;
    line-height:   1 !important;
    transition:    background .15s, color .15s, border-color .15s, box-shadow .15s !important;
    display:       flex !important;
    align-items:   center !important;
    gap:           .3rem !important;
    white-space:   nowrap !important;
    text-decoration: none !important;
}
.rap-player .rap-btn:hover {
    background:    rgba(201,147,90,0.15) !important;
    border-color:  var(--rap-accent) !important;
    color:         var(--rap-accent) !important;
    box-shadow:    0 0 14px var(--rap-accent-glow) !important;
}

.rap-player .rap-main-btn {
    width:           56px !important;
    height:          56px !important;
    padding:         0 !important;
    border-radius:   50% !important;
    background:      var(--rap-accent) !important;
    border:          none !important;
    color:           #1a1410 !important;
    font-size:       1.15rem !important;
    box-shadow:      0 4px 20px var(--rap-accent-glow) !important;
    justify-content: center !important;
}
.rap-player .rap-main-btn:hover {
    background:  #b87010 !important;
    box-shadow:  0 6px 28px rgba(201,147,90,.5) !important;
    color:       #1a1410 !important;
}

/* Secondary controls */
.rap-secondary-controls {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1rem;
}

.rap-speed-label,
.rap-volume-label {
    display:     flex;
    align-items: center;
    gap:         .55rem;
    font-size:   .8rem !important;
    color:       var(--rap-muted) !important;
}

.rap-speed {
    background:    var(--rap-active-bg);
    border:        1px solid var(--rap-border);
    color:         #d8c8b0 !important;
    border-radius: 6px;
    padding:       .25rem .5rem;
    font-size:     .8rem;
    cursor:        pointer;
    font-family:   var(--rap-font-sans);
}
.rap-speed:focus,
.rap-speed:hover { border-color: var(--rap-accent); outline: none; }

.rap-volume {
    -webkit-appearance: none;
    appearance:         none;
    height:             4px;
    width:              90px;
    background:         var(--rap-border);
    border-radius:      99px;
    outline:            none;
    cursor:             pointer;
}
.rap-volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    width:              13px;
    height:             13px;
    background:         var(--rap-accent);
    border-radius:      50%;
    cursor:             pointer;
    box-shadow:         0 0 6px var(--rap-accent-glow);
}
.rap-volume::-moz-range-thumb {
    width:         13px;
    height:        13px;
    background:    var(--rap-accent);
    border:        none;
    border-radius: 50%;
}

/* ── Chapter list ───────────────────────────────────────────────────── */
.rap-chapters { padding-bottom: .5rem; }

.rap-player .rap-chapters-heading {
    font-family:     var(--rap-font-serif) !important;
    font-size:       .78rem !important;
    font-weight:     400 !important;
    font-style:      italic !important;
    letter-spacing:  .1em !important;
    text-transform:  uppercase !important;
    color:           var(--rap-muted) !important;
    padding:         1rem 1.75rem .6rem !important;
    margin:          0 !important;
    border-bottom:   1px solid var(--rap-border) !important;
    background:      none !important;
}

.rap-chapter-list {
    list-style:      none;
    margin:          0;
    padding:         0;
    max-height:      320px;
    overflow-y:      auto;
    scrollbar-width: thin;
    scrollbar-color: var(--rap-border) transparent;
}
.rap-chapter-list::-webkit-scrollbar       { width: 4px; }
.rap-chapter-list::-webkit-scrollbar-thumb { background: var(--rap-border); border-radius: 99px; }

.rap-chapter-item {
    display:       flex;
    align-items:   center;
    gap:           1rem;
    padding:       .85rem 1.75rem;
    cursor:        pointer;
    transition:    background .15s;
    border-bottom: 1px solid rgba(255,255,255,.04);
}
.rap-chapter-item:last-child { border-bottom: none; }
.rap-chapter-item:hover      { background: var(--rap-active-bg); }
.rap-chapter-item.rap-active { background: var(--rap-active-bg); }
.rap-chapter-item.rap-playing { background: var(--rap-playing-bg); }

.rap-chapter-item.rap-playing .rap-chapter-title {
    color: #8a4a00 !important;
    font-weight: 500 !important;
}
.rap-chapter-item.rap-playing .rap-chapter-num {
    color: var(--rap-accent) !important;
}

.rap-player .rap-chapter-num {
    font-size:            .75rem !important;
    color:                #a09050 !important;
    min-width:            1.6rem !important;
    text-align:           right !important;
    font-variant-numeric: tabular-nums !important;
    margin:               0 !important;
    padding:              0 !important;
    flex-shrink:          0 !important;
}

.rap-player .rap-chapter-title {
    flex:        1 !important;
    font-size:   .92rem !important;
    color:       #2e2510 !important;
    line-height: 1.35 !important;
    margin:      0 !important;
    padding:     0 !important;
    font-weight: 400 !important;
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
}

.rap-player .rap-chapter-duration {
    font-size:            .78rem !important;
    color:                #8a7030 !important;
    font-variant-numeric: tabular-nums !important;
    white-space:          nowrap !important;
    flex-shrink:          0 !important;
    margin:               0 !important;
    padding:              0 !important;
}

/* ── Error ──────────────────────────────────────────────────────────── */
.rap-error {
    color:         #8a2020;
    font-family:   var(--rap-font-sans);
    font-size:     .9rem;
    padding:       1rem 1.25rem;
    background:    #f8e8c0;
    border:        1px solid #d4a040;
    border-radius: 8px;
    margin:        1rem;
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 520px) {
    .rap-header { flex-direction: column; align-items: center; text-align: center; padding: 1.25rem; }
    .rap-cover  { width: 85px; height: 85px; }
    .rap-player .rap-title { font-size: 1.15rem !important; }
    .rap-controls { padding: 1.1rem 1rem 1rem; }
    .rap-chapter-item { padding: .7rem 1rem; gap: .65rem; }
    .rap-player .rap-chapters-heading { padding-left: 1rem !important; padding-right: 1rem !important; }
    .rap-secondary-controls { flex-direction: column; align-items: flex-start; gap: .6rem; }
    .rap-volume { width: 110px; }
}