/* ============================================================
   reader-advanced.css  –  Système de lecture avancé
   Thème : Dark manga / feu – cohérent avec chapter.css
   ============================================================ */

/* ══════════════════════════════════════════
   VARIABLES (reprises de chapter.css)
══════════════════════════════════════════ */
:root {
    --ra-bg         : #0e0e0e;
    --ra-surface    : #1a1a1a;
    --ra-surface2   : #242424;
    --ra-border     : rgba(255,76,76,0.15);
    --ra-text       : #e8e8e8;
    --ra-muted      : rgba(232,232,232,0.4);
    --ra-accent     : #ff4c4c;
    --ra-orange     : #ff8c00;
    --ra-gold       : #ffd700;
    --ra-red-dark   : #8b0000;
    --ra-drawer-w   : 340px;
    --ra-radius     : 10px;
    --ra-transition : 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ══════════════════════════════════════════
   DAY MODE OVERRIDE
══════════════════════════════════════════ */
body.reader-day-mode {
    background: #f4f4f4;
    color: #1a1a1a;
}
body.reader-day-mode #manga-container,
body.reader-day-mode #page-mode-container {
    background: #e8e8e8;
}

/* ══════════════════════════════════════════
   FAB – FLOATING ACTION BUTTON
══════════════════════════════════════════ */
#reader-fab {
    position      : fixed;
    bottom        : 20px;
    left          : 20px;
    z-index       : 1200;
    width         : 52px;
    height        : 52px;
    border-radius : 50%;
    background    : linear-gradient(135deg, #8b0000, #ff4c4c);
    border        : none;
    color         : #fff;
    cursor        : pointer;
    display       : flex;
    align-items   : center;
    justify-content: center;
    box-shadow    : 0 4px 20px rgba(255,76,76,0.45), 0 2px 8px rgba(0,0,0,0.4);
    transition    : transform var(--ra-transition), box-shadow var(--ra-transition), background var(--ra-transition);
    outline       : none;
}

#reader-fab svg {
    width  : 22px;
    height : 22px;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

#reader-fab:hover {
    transform  : scale(1.1);
    box-shadow : 0 6px 28px rgba(255,76,76,0.6), 0 2px 12px rgba(0,0,0,0.5);
}

#reader-fab.active {
    background  : linear-gradient(135deg, #ff4c4c, #ff8c00);
    transform   : scale(1.05);
}

#reader-fab.active svg { transform: rotate(60deg); }

@media (max-width: 480px) {
    #reader-fab { width: 46px; height: 46px; bottom: 80px; left: 14px; }
    #reader-fab svg { width: 19px; height: 19px; }
}

/* ══════════════════════════════════════════
   OVERLAY
══════════════════════════════════════════ */
#reader-overlay {
    position   : fixed;
    inset      : 0;
    background : rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(3px);
    z-index    : 1300;
    opacity    : 0;
    pointer-events: none;
    transition : opacity var(--ra-transition);
}

#reader-overlay.visible {
    opacity       : 1;
    pointer-events: all;
}

/* ══════════════════════════════════════════
   DRAWER
══════════════════════════════════════════ */
#reader-drawer {
    position      : fixed;
    top           : 0;
    left          : 0;
    height        : 100dvh;
    width         : var(--ra-drawer-w);
    max-width     : 92vw;
    background    : #111118;
    border-right  : 1px solid var(--ra-border);
    z-index       : 1400;
    display       : flex;
    flex-direction: column;
    transform     : translateX(-105%);
    transition    : transform var(--ra-transition);
    overflow      : hidden;
}

#reader-drawer.open { transform: translateX(0); }

/* Scrollable body */
.drawer-body {
    flex       : 1;
    overflow-y : auto;
    padding    : 1rem 1.2rem 2rem;
    scrollbar-width: thin;
    scrollbar-color: var(--ra-accent) transparent;
}

.drawer-body::-webkit-scrollbar       { width: 4px; }
.drawer-body::-webkit-scrollbar-track { background: transparent; }
.drawer-body::-webkit-scrollbar-thumb { background: var(--ra-accent); border-radius: 4px; }

/* ── Drawer Header ── */
.drawer-header {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    padding        : 1rem 1.2rem;
    border-bottom  : 1px solid var(--ra-border);
    background     : linear-gradient(135deg, rgba(139,0,0,0.4), rgba(26,26,26,0));
    flex-shrink    : 0;
}

.drawer-title {
    display    : flex;
    align-items: center;
    gap        : 0.6rem;
    font-size  : 1rem;
    font-weight: 700;
    color      : var(--ra-text);
    font-family: 'Tajawal', sans-serif;
}

#drawer-close {
    background    : rgba(255,76,76,0.1);
    border        : 1px solid rgba(255,76,76,0.2);
    color         : var(--ra-muted);
    width         : 32px;
    height        : 32px;
    border-radius : 50%;
    cursor        : pointer;
    font-size     : 0.9rem;
    display       : flex;
    align-items   : center;
    justify-content: center;
    transition    : background var(--ra-transition), color var(--ra-transition);
    flex-shrink   : 0;
}

#drawer-close:hover {
    background: rgba(255,76,76,0.25);
    color     : var(--ra-accent);
}

/* ── Settings Group ── */
.settings-group {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.settings-group:last-child { border-bottom: none; margin-bottom: 0; }

.settings-group-label {
    font-size    : 0.72rem;
    font-weight  : 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color        : var(--ra-orange);
    margin-bottom: 0.85rem;
    opacity      : 0.85;
}

/* ── Mode toggle ── */
.mode-toggle {
    display: flex;
    gap    : 0.6rem;
}

.mode-btn {
    flex           : 1;
    display        : flex;
    flex-direction : column;
    align-items    : center;
    gap            : 0.5rem;
    padding        : 0.85rem 0.5rem;
    background     : var(--ra-surface2);
    border         : 1px solid rgba(255,255,255,0.07);
    border-radius  : var(--ra-radius);
    color          : var(--ra-muted);
    font-family    : 'Tajawal', sans-serif;
    font-size      : 0.85rem;
    font-weight    : 600;
    cursor         : pointer;
    transition     : all var(--ra-transition);
}

.mode-btn:hover {
    background   : rgba(255,76,76,0.1);
    border-color : rgba(255,76,76,0.3);
    color        : var(--ra-text);
}

.mode-btn.active {
    background   : linear-gradient(135deg, rgba(139,0,0,0.5), rgba(255,76,76,0.2));
    border-color : var(--ra-accent);
    color        : #fff;
    box-shadow   : 0 0 12px rgba(255,76,76,0.2);
}

/* ── Toggle switch ── */
.toggle-row {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    margin-bottom  : 0.75rem;
    font-size      : 0.88rem;
    color          : var(--ra-text);
}

.toggle-switch { position: relative; display: inline-flex; cursor: pointer; }
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }

.toggle-track {
    width         : 44px;
    height        : 24px;
    background    : rgba(255,255,255,0.1);
    border        : 1px solid rgba(255,255,255,0.12);
    border-radius : 12px;
    position      : relative;
    transition    : background var(--ra-transition), border-color var(--ra-transition);
    display       : flex;
    align-items   : center;
    padding       : 2px;
}

.toggle-thumb {
    width         : 18px;
    height        : 18px;
    background    : var(--ra-muted);
    border-radius : 50%;
    transition    : transform var(--ra-transition), background var(--ra-transition);
}

.toggle-switch input:checked + .toggle-track {
    background   : rgba(255,76,76,0.35);
    border-color : var(--ra-accent);
}

.toggle-switch input:checked + .toggle-track .toggle-thumb {
    transform  : translateX(-20px);
    background : var(--ra-accent);
    box-shadow : 0 0 8px rgba(255,76,76,0.5);
}

/* ── Slider row ── */
.slider-row {
    display        : flex;
    align-items    : center;
    gap            : 0.75rem;
    margin-bottom  : 0.75rem;
    font-size      : 0.85rem;
    color          : var(--ra-text);
}

.slider-row span:last-child {
    min-width  : 34px;
    text-align : center;
    font-weight: 700;
    color      : var(--ra-gold);
    font-size  : 0.82rem;
}

.slider-row input[type="range"] {
    flex              : 1;
    appearance: none;
    height            : 4px;
    background        : rgba(255,255,255,0.1);
    border-radius     : 4px;
    outline           : none;
    cursor            : pointer;
    accent-color      : var(--ra-accent);
}

.slider-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width             : 16px;
    height            : 16px;
    background        : var(--ra-accent);
    border-radius     : 50%;
    box-shadow        : 0 0 6px rgba(255,76,76,0.5);
    cursor            : pointer;
    transition        : transform 0.15s;
}

.slider-row input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }

/* ── Quality / Zoom buttons ── */
.quality-btns {
    display: flex;
    gap    : 0.5rem;
    flex-wrap: wrap;
}

.quality-btn,
.zoom-btn {
    padding      : 0.45rem 0.85rem;
    background   : var(--ra-surface2);
    border       : 1px solid rgba(255,255,255,0.07);
    border-radius: 6px;
    color        : var(--ra-muted);
    font-family  : 'Tajawal', sans-serif;
    font-size    : 0.82rem;
    font-weight  : 600;
    cursor       : pointer;
    transition   : all var(--ra-transition);
}

.quality-btn:hover,
.zoom-btn:hover {
    background  : rgba(255,76,76,0.1);
    border-color: rgba(255,76,76,0.3);
    color       : var(--ra-text);
}

.quality-btn.active,
.zoom-btn.active {
    background  : rgba(255,76,76,0.2);
    border-color: var(--ra-accent);
    color       : #fff;
}

/* ── Download button ── */
.dl-btn {
    display      : inline-flex;
    align-items  : center;
    gap          : 0.5rem;
    width        : 100%;
    justify-content: center;
    padding      : 0.65rem 1rem;
    background   : rgba(255,140,0,0.1);
    border       : 1px solid rgba(255,140,0,0.25);
    border-radius: var(--ra-radius);
    color        : var(--ra-orange);
    font-family  : 'Tajawal', sans-serif;
    font-size    : 0.9rem;
    font-weight  : 700;
    cursor       : pointer;
    transition   : all var(--ra-transition);
    margin-top   : 0.5rem;
}

.dl-btn:hover {
    background   : rgba(255,140,0,0.2);
    border-color : var(--ra-orange);
    color        : var(--ra-gold);
}

/* ══════════════════════════════════════════
   PAGE MODE CONTAINER
══════════════════════════════════════════ */
#page-mode-container {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    background     : #0e0e0e;
    min-height     : 50vh;
    padding        : 1rem 0.5rem 0;
}

#page-mode-inner {
    width    : 100%;
    max-width: 900px;
    position : relative;
}

#page-mode-img {
    display  : block;
    width    : 100%;
    height   : auto;
    opacity  : 0;
    transition: opacity 0.3s ease;
}

#page-mode-error {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    justify-content: center;
    min-height     : 280px;
    gap            : 0.5rem;
    color          : var(--ra-muted);
    font-size      : 0.9rem;
    font-family    : 'Tajawal', sans-serif;
}
#page-mode-error i { font-size: 2rem; color: var(--ra-accent); }

/* ── Navigation boutons page mode ── */
#page-mode-nav {
    display        : flex;
    align-items    : center;
    justify-content: center;
    gap            : 1.5rem;
    padding        : 1rem;
    width          : 100%;
    max-width      : 900px;
}

#pm-prev, #pm-next {
    width         : 48px;
    height        : 48px;
    border-radius : 50%;
    background    : linear-gradient(135deg, rgba(139,0,0,0.5), rgba(255,76,76,0.2));
    border        : 1px solid rgba(255,76,76,0.3);
    color         : var(--ra-text);
    cursor        : pointer;
    display       : flex;
    align-items   : center;
    justify-content: center;
    transition    : all var(--ra-transition);
    flex-shrink   : 0;
}

#pm-prev:hover, #pm-next:hover {
    background : linear-gradient(135deg, rgba(255,76,76,0.4), rgba(255,140,0,0.2));
    border-color: var(--ra-accent);
    transform  : scale(1.08);
    box-shadow : 0 0 16px rgba(255,76,76,0.3);
}

#pm-prev:disabled, #pm-next:disabled {
    opacity: 0.25;
    cursor : not-allowed;
    transform: none;
}

#pm-counter {
    font-family: 'Tajawal', sans-serif;
    font-size  : 1rem;
    font-weight: 700;
    color      : var(--ra-text);
    min-width  : 80px;
    text-align : center;
    background : rgba(255,76,76,0.08);
    border     : 1px solid rgba(255,76,76,0.15);
    border-radius: 20px;
    padding    : 4px 16px;
}

/* Responsive page mode */
@media (min-width: 601px) and (max-width: 1024px) {
    #page-mode-inner { max-width: 86%; }
}
@media (min-width: 1025px) {
    #page-mode-inner { max-width: 720px; }
}
@media (max-width: 480px) {
    #reader-drawer { width: 100vw; max-width: 100vw; border-right: none; }
    #pm-prev, #pm-next { width: 42px; height: 42px; }
}

/* ══════════════════════════════════════════
   ANIMATIONS D'ENTRÉE DRAWER
══════════════════════════════════════════ */
#reader-drawer.open .settings-group {
    animation: fadeSlideIn 0.35s ease both;
}
#reader-drawer.open .settings-group:nth-child(1) { animation-delay: 0.05s; }
#reader-drawer.open .settings-group:nth-child(2) { animation-delay: 0.10s; }
#reader-drawer.open .settings-group:nth-child(3) { animation-delay: 0.15s; }
#reader-drawer.open .settings-group:nth-child(4) { animation-delay: 0.20s; }
#reader-drawer.open .settings-group:nth-child(5) { animation-delay: 0.25s; }
#reader-drawer.open .settings-group:nth-child(6) { animation-delay: 0.30s; }

@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateX(-12px); }
    to   { opacity: 1; transform: translateX(0); }
}