/* ==========================================================================
   Dokan Vendor Suite — Frontend Styles v3
   Designed for product pages: manga reader, download sections, gallery
   ========================================================================== */

:root {
    --dvs-ink:        #0f0f14;
    --dvs-ink-soft:   #2d2d3a;
    --dvs-muted:      #6b6e85;
    --dvs-accent:     #e94560;
    --dvs-accent-h:   #c73652;
    --dvs-surface:    #ffffff;
    --dvs-surface-2:  #f5f6fa;
    --dvs-border:     #e2e5f0;
    --dvs-radius:     12px;
    --dvs-radius-sm:  7px;
    --dvs-shadow:     0 2px 20px rgba(0,0,0,.07);
    --dvs-shadow-lg:  0 8px 40px rgba(0,0,0,.14);
    --dvs-trans:      .18s ease;
    --dvs-reader-bg:  #111318;
    --dvs-reader-bar: #1c1e27;
}

/* ==========================================================================
   Shared section wrapper
   ========================================================================== */

.dvs-section {
    margin: 2rem 0;
    border-radius: var(--dvs-radius);
    overflow: hidden;
    box-shadow: var(--dvs-shadow);
    border: 1px solid var(--dvs-border);
    position: relative;
}

.dvs-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--dvs-ink);
    margin: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
    letter-spacing: -.01em;
}

.dvs-icon { width: 17px; height: 17px; flex-shrink: 0; }

/* ==========================================================================
   Locked overlay
   ========================================================================== */

.dvs-locked-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, rgba(15,15,20,.92) 0%, rgba(30,20,40,.92) 100%);
    backdrop-filter: blur(6px);
    border-radius: inherit;
}

.dvs-locked-inner {
    text-align: center;
    color: #fff;
    padding: 2.5rem 2rem;
    max-width: 360px;
}

.dvs-lock-icon {
    display: block;
    margin: 0 auto 1rem;
    color: rgba(255,255,255,.7);
}

.dvs-locked-msg {
    font-size: .95rem;
    line-height: 1.6;
    margin: 0 0 1.5rem;
    color: rgba(255,255,255,.85);
}

.dvs-locked-actions {
    display: flex;
    gap: .6rem;
    justify-content: center;
    flex-wrap: wrap;
}

.dvs-locked-btn {
    display: inline-flex;
    align-items: center;
    padding: .6em 1.4em;
    border-radius: 50px;
    font-weight: 700;
    font-size: .875rem;
    text-decoration: none;
    transition: all var(--dvs-trans);
    border: none;
    cursor: pointer;
    letter-spacing: .01em;
}

.dvs-btn-primary.dvs-locked-btn {
    background: var(--dvs-accent);
    color: #fff;
    box-shadow: 0 4px 16px rgba(233,69,96,.35);
}

.dvs-btn-primary.dvs-locked-btn:hover {
    background: var(--dvs-accent-h);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(233,69,96,.45);
}

.dvs-btn-ghost.dvs-locked-btn {
    background: rgba(255,255,255,.1);
    border: 1.5px solid rgba(255,255,255,.3);
    color: #fff;
}

.dvs-btn-ghost.dvs-locked-btn:hover {
    background: rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.6);
}

/* ==========================================================================
   Module 1 — Free Sample Download
   ========================================================================== */

.dvs-free-sample-wrap {
    background: var(--dvs-surface);
}

.dvs-sample-header {
    padding: 1.1rem 1.4rem .9rem;
    border-bottom: 1px solid var(--dvs-border);
    background: var(--dvs-surface-2);
}

.dvs-sample-body {
    padding: 1.1rem 1.4rem;
}

.dvs-sample-desc {
    font-size: .875rem;
    color: var(--dvs-muted);
    margin: 0 0 1rem;
    line-height: 1.5;
}

.dvs-sample-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.dvs-download-btn {
    display: inline-flex;
    align-items: center;
    gap: .55em;
    padding: .65em 1.4em;
    background: var(--dvs-ink);
    color: #fff !important;
    border-radius: 50px;
    font-size: .875rem;
    font-weight: 700;
    text-decoration: none !important;
    transition: all var(--dvs-trans);
    border: none;
    cursor: pointer;
    letter-spacing: .01em;
}

.dvs-download-btn:hover {
    background: var(--dvs-accent);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(233,69,96,.3);
}

.dvs-download-btn svg { flex-shrink: 0; }

/* ==========================================================================
   Module 2 — Manga / Book Sampler
   ========================================================================== */

.dvs-sampler-wrap {
    background: var(--dvs-surface);
}

.dvs-sampler-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.4rem;
    background: var(--dvs-surface-2);
    border-bottom: 1px solid var(--dvs-border);
    flex-wrap: wrap;
    gap: .5rem;
}

.dvs-page-count {
    font-size: .75rem;
    font-weight: 700;
    background: var(--dvs-border);
    color: var(--dvs-muted);
    padding: .25em .8em;
    border-radius: 20px;
    letter-spacing: .02em;
}

.dvs-sampler-controls {
    padding: .85rem 1.4rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    border-bottom: 1px solid var(--dvs-border);
}

.dvs-open-reader-btn {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    padding: .6em 1.4em;
    background: var(--dvs-ink);
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: .875rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--dvs-trans);
    letter-spacing: .01em;
}

.dvs-open-reader-btn:hover {
    background: var(--dvs-accent);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(233,69,96,.3);
}

.dvs-open-reader-btn svg { flex-shrink: 0; }

/* Thumbnail strip preview */
.dvs-sampler-strip {
    display: flex;
    gap: 3px;
    padding: 8px 1.4rem;
    overflow-x: auto;
    background: #f0f1f7;
    border-bottom: 1px solid var(--dvs-border);
    scrollbar-width: thin;
}

.dvs-strip-thumb {
    flex-shrink: 0;
    width: 44px;
    height: 62px;
    object-fit: cover;
    border-radius: 3px;
    opacity: .65;
    cursor: pointer;
    transition: opacity var(--dvs-trans), transform var(--dvs-trans);
    border: 2px solid transparent;
}

.dvs-strip-thumb:hover,
.dvs-strip-thumb.dvs-strip-active {
    opacity: 1;
    border-color: var(--dvs-accent);
    transform: scaleY(1.04);
}

/* ---- Reader ---- */

/* ==========================================================================
   Module 2 — Book/Manga Sampler Reader (horizontal pager)
   ========================================================================== */

.dvs-reader-wrap {
    background: var(--dvs-reader-bg);
}

.dvs-reader-toolbar {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem 1rem;
    background: var(--dvs-reader-bar);
    border-bottom: 1px solid rgba(255,255,255,.06);
    flex-wrap: wrap;
}

.dvs-reader-close-btn {
    display: inline-flex;
    align-items: center;
    gap: .35em;
    padding: .35em .9em;
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.8);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50px;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--dvs-trans);
    white-space: nowrap;
}

.dvs-reader-close-btn:hover {
    background: rgba(255,255,255,.15);
    color: #fff;
}

.dvs-reading-progress {
    font-size: .78rem;
    color: rgba(255,255,255,.5);
    font-variant-numeric: tabular-nums;
    margin-left: .25rem;
}

.dvs-current-page { color: #fff; font-weight: 700; }
.dvs-reader-spacer { flex: 1; }

.dvs-zoom-controls {
    display: flex;
    gap: .3rem;
    align-items: center;
}

.dvs-zoom-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 6px;
    color: rgba(255,255,255,.7);
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--dvs-trans);
    line-height: 1;
}

.dvs-zoom-btn:hover { background: var(--dvs-accent); color: #fff; border-color: var(--dvs-accent); }

.dvs-zoom-pct {
    font-size: .72rem;
    color: rgba(255,255,255,.5);
    min-width: 34px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Horizontal viewport — clips to show exactly one page */

.dvs-reader-viewport {
    position: relative;
    overflow: hidden;
    background: var(--dvs-reader-bg);
    cursor: grab;
    outline: none;
    /* Fixed height for the reader — tall enough for typical manga pages */
    height: min(75vh, 720px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dvs-reader-viewport:active { cursor: grabbing; }

/* The track holds all pages side by side; CSS transform slides it */
.dvs-reader-track {
    display: flex;
    width: 100%;
    height: 100%;
    /* transition is set/cleared by JS for animation */
    will-change: transform;
}

.dvs-reader-page {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin: 0;
    padding: 8px;
    box-sizing: border-box;
}

.dvs-page-img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transform-origin: center center;
    transition: transform .12s ease;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none; /* prevents image drag interfering with pager drag */
}

/* Prev / Next arrow buttons */
.dvs-reader-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(0,0,0,.5);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.8);
    cursor: pointer;
    transition: all var(--dvs-trans);
    backdrop-filter: blur(4px);
}

.dvs-reader-nav:hover {
    background: var(--dvs-accent);
    border-color: var(--dvs-accent);
    color: #fff;
}

.dvs-nav-prev { left: 10px; }
.dvs-nav-next { right: 10px; }

/* Page-dot strip */
.dvs-reader-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 8px 12px;
    background: var(--dvs-reader-bar);
    flex-wrap: wrap;
    min-height: 28px;
}

.dvs-reader-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,.22);
    cursor: pointer;
    transition: all var(--dvs-trans);
    flex-shrink: 0;
}

.dvs-reader-dot:hover { background: rgba(255,255,255,.5); transform: scale(1.2); }
.dvs-dot-active { background: var(--dvs-accent) !important; transform: scale(1.3); }

/* Empty section notice */
.dvs-empty-notice {
    padding: .85rem 1.25rem;
    background: var(--dvs-surface-2);
    border: 1px solid var(--dvs-border);
    border-radius: var(--dvs-radius);
    margin: 1rem 0;
}
.dvs-empty-notice p {
    margin: 0;
    font-size: .875rem;
    color: var(--dvs-muted);
    font-style: italic;
}



/* ==========================================================================
   Module 3 — Restricted Gallery
   ========================================================================== */

.dvs-gallery-wrap { background: #0f0f14; }

.dvs-gallery-header {
    padding: 1.1rem 1.4rem .8rem;
    background: linear-gradient(135deg, #131320 0%, #1a1030 100%);
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.dvs-gallery-header .dvs-section-title { color: #fff; margin-bottom: .3rem; }

.dvs-restricted-badge {
    display: inline-flex;
    align-items: center;
    padding: .1em .5em;
    background: var(--dvs-accent);
    color: #fff;
    border-radius: 4px;
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .06em;
}

.dvs-gallery-desc {
    margin: 0;
    font-size: .78rem;
    color: rgba(255,255,255,.4);
    letter-spacing: .01em;
}

/* Masonry-style grid */
.dvs-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 3px;
    padding: 3px;
    background: #0f0f14;
}

.dvs-gallery-cell {
    position: relative;
    overflow: hidden;
    border-radius: 3px;
    background: #1a1a24;
    aspect-ratio: 1;
}

.dvs-gallery-cell a {
    display: block;
    width: 100%;
    height: 100%;
}

.dvs-gallery-cell img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.dvs-gallery-cell:hover img { transform: scale(1.05); }

.dvs-cell-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, rgba(233,69,96,.3) 0%, rgba(15,15,20,.6) 100%);
    color: #fff;
    opacity: 0;
    transition: opacity var(--dvs-trans);
}

.dvs-gallery-cell:hover .dvs-cell-overlay { opacity: 1; }

/* Video cells — now thumbnail triggers (no longer inline players) */
.dvs-video-cell {
    aspect-ratio: 16 / 9;
    background: #0d0d14;
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.dvs-video-lb-trigger {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    text-decoration: none;
}

.dvs-video-lb-trigger img,
.dvs-video-no-poster {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.dvs-video-no-poster {
    background: #1a1a2e;
}

.dvs-video-lb-trigger:hover img { transform: scale(1.05); }

.dvs-play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .75;
    transition: opacity var(--dvs-trans);
}

.dvs-video-lb-trigger:hover .dvs-play-overlay { opacity: 1; }

.dvs-video-cell-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: .35rem .6rem;
    background: linear-gradient(transparent, rgba(0,0,0,.75));
    color: rgba(255,255,255,.85);
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    pointer-events: none;
}

/* Locked gallery state */
.dvs-gallery-locked-wrap {
    position: relative;
    min-height: 280px;
    overflow: hidden;
}

.dvs-blur-preview {
    filter: blur(20px) brightness(.35) saturate(.5);
    transform: scale(1.08);
}

.dvs-blur-preview img {
    display: block;
    width: 100%;
    max-height: 340px;
    object-fit: cover;
}

/* ==========================================================================
   Global Lightbox
   ========================================================================== */

body.dvs-no-scroll { overflow: hidden; }

#dvs-global-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0,0,0,.97);
    align-items: center;
    justify-content: center;
}

#dvs-global-lightbox.dvs-lightbox-open { display: flex; }

.dvs-lb-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    text-align: center;
}

.dvs-lb-img {
    display: block;
    max-width: 100%;
    max-height: 86vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 20px 80px rgba(0,0,0,.6);
}

.dvs-lb-video-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

.dvs-lb-video {
    display: block;
    max-width: 90vw;
    max-height: 82vh;
    width: 960px;
    border-radius: 4px;
    background: #000;
    outline: none;
}

.dvs-lb-caption {
    color: rgba(255,255,255,.45);
    font-size: .8rem;
    margin: .6rem 0 0;
}

.dvs-lb-close,
.dvs-lb-prev,
.dvs-lb-next {
    position: fixed;
    background: rgba(30,30,40,.75);
    border: 1.5px solid rgba(255,255,255,.18);
    color: rgba(255,255,255,.9);
    cursor: pointer;
    border-radius: 50%;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    transition: all var(--dvs-trans);
    line-height: 1;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* Large tap targets for touch */
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}

/* Close: top-right, large and obvious */
.dvs-lb-close {
    top: 1rem;
    right: 1rem;
    font-size: 1.1rem;
    /* Extra visual weight so it reads as "close" immediately */
    background: rgba(220,40,60,.7);
    border-color: rgba(255,255,255,.25);
}

.dvs-lb-prev  { left: 1rem; top: 50%; transform: translateY(-50%); }
.dvs-lb-next  { right: 1rem; top: 50%; transform: translateY(-50%); }

.dvs-lb-close:hover { background: rgba(220,40,60,.95); color: #fff; transform: scale(1.06); }
.dvs-lb-prev:hover,
.dvs-lb-next:hover {
    background: rgba(255,255,255,.18);
    color: #fff;
}
.dvs-lb-prev:hover { transform: translateY(-50%) scale(1.06); }
.dvs-lb-next:hover { transform: translateY(-50%) scale(1.06); }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 640px) {
    .dvs-gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .dvs-reader-viewport { height: min(70vh, 560px); }
    .dvs-reader-nav { width: 34px; height: 34px; }
    .dvs-nav-prev { left: 4px; }
    .dvs-nav-next { right: 4px; }
    .dvs-sampler-header { flex-wrap: wrap; }
    .dvs-locked-actions { flex-direction: column; align-items: stretch; }
    .dvs-locked-btn { justify-content: center; }

    /* Reader close button — bigger tap target on mobile */
    .dvs-reader-close-btn {
        padding: .5em 1.1em;
        font-size: .88rem;
        min-height: 44px;
    }

    /* Lightbox — move prev/next to bottom bar for thumb reach */
    .dvs-lb-prev,
    .dvs-lb-next {
        top: auto;
        bottom: 1.25rem;
        transform: none;
        width: 56px;
        height: 56px;
        font-size: 1.5rem;
    }
    .dvs-lb-prev { left: 1.5rem; }
    .dvs-lb-next { right: 1.5rem; }

    /* Close stays top-right but slightly larger */
    .dvs-lb-close {
        width: 56px;
        height: 56px;
        font-size: 1.2rem;
    }

    /* Constrain lightbox image height on mobile to leave room for buttons */
    .dvs-lb-img  { max-height: 78vh; }
    .dvs-lb-video { max-height: 70vh; }

    /* Swipe hint label */
    .dvs-lb-swipe-hint {
        display: block;
    }
}

/* ==========================================================================
   Reader controls hint (shown below Open Reader button)
   ========================================================================== */

.dvs-reader-hint {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .75rem;
    color: var(--dvs-muted);
    margin-left: .85rem;
    white-space: nowrap;
}

.dvs-reader-hint svg {
    opacity: .6;
    flex-shrink: 0;
}

/* ==========================================================================
   Vertical reader mode overrides
   ========================================================================== */

.dvs-reader-wrap[data-reader-mode="vertical"] .dvs-reader-scroll {
    max-height: 85vh;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--dvs-reader-bg);
    outline: none;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.15) transparent;
}

.dvs-reader-wrap[data-reader-mode="vertical"] .dvs-reader-scroll::-webkit-scrollbar { width: 5px; }
.dvs-reader-wrap[data-reader-mode="vertical"] .dvs-reader-scroll::-webkit-scrollbar-track { background: transparent; }
.dvs-reader-wrap[data-reader-mode="vertical"] .dvs-reader-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 3px; }

.dvs-reader-wrap[data-reader-mode="vertical"] .dvs-reader-page {
    margin: 0;
    max-width: 800px;
    width: 100%;
    line-height: 0;
    position: relative;
    flex: none;
    height: auto;
    padding: 0;
}

.dvs-reader-wrap[data-reader-mode="vertical"] .dvs-page-img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    max-height: none;
    object-fit: unset;
    transform-origin: top center;
}

.dvs-reader-wrap[data-reader-mode="vertical"] .dvs-reader-page + .dvs-reader-page {
    border-top: 8px solid var(--dvs-reader-bg);
}

.dvs-reader-progress {
    height: 2px;
    background: rgba(255,255,255,.06);
}

.dvs-progress-fill {
    height: 100%;
    background: var(--dvs-accent);
    width: 0%;
    transition: width .1s linear;
}

@media (max-width: 600px) {
    .dvs-reader-wrap[data-reader-mode="vertical"] .dvs-reader-scroll { max-height: 75vh; }
    .dvs-reader-hint { display: none; }
}