/* =========================================================
   COLOUR PALETTE
========================================================= */

:root {
    --ars-primary: #6a11cb;
    --ars-primary-2: #2575fc;
    --ars-accent: #ff6a3d;
    --ars-accent-2: #ffb400;
    --ars-dark: #1a1a2e;
    --ars-gradient: linear-gradient(135deg, var(--ars-primary) 0%, var(--ars-primary-2) 100%);
    --ars-gradient-warm: linear-gradient(135deg, var(--ars-accent) 0%, var(--ars-accent-2) 100%);
}

/* =========================================================
   ZOOM
   The slider stays clipped to exactly one page at all times —
   all pages sit side by side in one row underneath, and letting
   this overflow (even just while zoomed) would reveal the next/
   previous page peeking in from the side. Panning around a
   zoomed-in image is handled with a drag-to-pan transform in JS
   instead (see updateZoom() in viewer.js), never by exposing
   overflow here.
========================================================= */

/* NOTE: there is deliberately no overflow override for crop mode here.
   The floating crop toolbar's position is fully clamped in JS
   (showToolbarOutside() in viewer.js) to always stay within the current
   page's own bounds, so it never needs the slider to stop clipping. */

.ars-toolbar button.ars-btn-disabled,
.ars-toolbar button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* =========================================================
   EDITIONS LIST
========================================================= */

.ars-editions-list {
    max-width: 900px;
    margin: 40px auto;
    padding: 20px;
}

.ars-editions-list h2 {
    margin-bottom: 25px;
    font-size: 32px;
    font-weight: 700;
}

.ars-edition-item {
    background: #ffffff;
    border: 1px solid #ddd;
    padding: 18px;
    margin-bottom: 15px;
    border-radius: 8px;
    transition: 0.3s;
}

.ars-edition-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.ars-edition-item a {
    text-decoration: none;
    font-size: 18px;
    font-weight: 600;
    color: #222;
}

/* =========================================================
   VIEWER CONTAINER
========================================================= */

.ars-viewer-container {
    background: linear-gradient(180deg, #f4f2fb 0%, #eef1f8 100%);
    padding: 20px 15px;
}

/* =========================================================
   TOOLBAR
========================================================= */

.ars-toolbar {
    position: sticky;
    top: 0;
    z-index: 99999;
    background: var(--ars-gradient);
    padding: 12px;
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    border-radius: 0 0 14px 14px;
    box-shadow: 0 4px 18px rgba(106, 17, 203, 0.25);
}

.ars-toolbar button {
    background: rgba(255, 255, 255, 0.95);
    color: var(--ars-dark);
    border: none;
    padding: 10px 16px;
    cursor: pointer;
    font-size: 15px;
    border-radius: 30px;
    transition: 0.2s;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

.ars-toolbar button:hover {
    background: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.18);
}

#ars-start-crop {
    background: var(--ars-gradient-warm) !important;
    color: #fff !important;
}

#ars-start-crop:hover {
    filter: brightness(1.05);
}

/* =========================================================
   PAGE TITLE
========================================================= */

.ars-page-title {
    text-align: center;
    margin-bottom: 30px;
}

.ars-page-title h2 {
    font-size: 32px;
    font-weight: 700;
}

/* =========================================================
   MAIN LAYOUT
========================================================= */

.ars-main-layout {
    display: flex;
    gap: 20px;
}

/* =========================================================
   SIDEBAR
========================================================= */

.ars-sidebar {
    width: 160px;
    position: sticky;
    top: 70px;
    height: 100vh;
    overflow-y: auto;
    background: #fff;
    padding: 10px;
    border-right: 1px solid #ddd;
}

.ars-thumb-link {
    display: block;
    margin-bottom: 15px;
    text-decoration: none;
    color: #222;
    font-size: 13px;
    text-align: center;
}

.ars-thumb-image {
    width: 100%;
    border: 1px solid #ccc;
    margin-bottom: 5px;
    border-radius: 4px;
}

/* =========================================================
   CONTENT
========================================================= */

.ars-content {
    flex: 1;
}

/* =========================================================
   PAGE
========================================================= */

.ars-page {
    max-width: 1200px;
    margin: 0 auto 30px auto;
    text-align: center;
}

.ars-image-wrapper {
    position: relative;
    display: inline-block;
}

.ars-page img,
.ars-page-image {
    width: 100%;
    height: auto;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    border-radius: 4px;
    transition: transform 0.2s ease;
    display: block;
}

/* =========================================================
   FULLSCREEN
========================================================= */

.ars-viewer-container:fullscreen {
    background: #000;
    padding: 20px;
    overflow: auto;
}

.ars-viewer-container:fullscreen .ars-page img {
    max-width: 1400px;
}

/* =========================================================
   FLOATING SHARE TOOLBAR
========================================================= */

#ars-floating-toolbar {
    position: absolute;
    z-index: 999999999;
    display: none;
    flex-direction: column;
    gap: 10px;
    pointer-events: auto;
    animation: arsToolbarPop 0.18s ease-out;
}

@keyframes arsToolbarPop {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

#ars-floating-toolbar button {
    width: 52px;
    height: 52px;
    border: none;
    border-radius: 50%;
    background: #ffffff;
    cursor: pointer;
    box-shadow: 0 3px 16px rgba(106, 17, 203, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
    padding: 0;
}

#ars-floating-toolbar button:hover {
    transform: scale(1.08);
    box-shadow: 0 4px 20px rgba(106, 17, 203, 0.4);
}

#ars-floating-toolbar img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

#ars-download-crop,
#ars-close-crop {
    font-size: 22px;
    font-weight: bold;
    color: #111;
}

/* =========================================================
   JCROP
========================================================= */

.jcrop-holder {
    margin: 0 auto;
    overflow: visible !important;
}

.jcrop-vline,
.jcrop-hline {
    background: #fff !important;
}

.jcrop-handle {
    background-color: #fff !important;
    border: 1px solid #111 !important;
}

/* =========================================================
   SCROLL
========================================================= */

html {
    scroll-behavior: smooth;
}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width: 768px) {

    .ars-main-layout {
        display: block;
    }

    .ars-sidebar {
        width: 100%;
        height: auto;
        position: relative;
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 10px;
        white-space: nowrap;
        margin-bottom: 20px;
    }

    .ars-thumb-link {
        min-width: 100px;
    }

    .ars-toolbar {
        gap: 5px;
    }

    .ars-toolbar button {
        font-size: 13px;
        padding: 8px 12px;
    }

    #ars-floating-toolbar button {
        width: 46px;
        height: 46px;
    }

    #ars-floating-toolbar img {
        width: 22px;
        height: 22px;
    }
}
/* Archive Dropdown Style */
.ars-archive-dropdown {
    text-align: center;
    margin: 20px 0;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.ars-archive-dropdown label {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.ars-archive-dropdown select {
    padding: 10px 20px;
    font-size: 14px;
    border-radius: 6px;
    border: 1px solid #ccc;
    background: white;
    cursor: pointer;
    min-width: 250px;
}

.ars-archive-dropdown select:hover {
    border-color: #0073aa;
}

/* Floating Toolbar Responsive */
@media(max-width: 768px) {
    #ars-floating-toolbar {
        padding: 8px 16px !important;
        gap: 8px !important;
    }
    
    #ars-floating-toolbar button {
        padding: 6px 12px !important;
        font-size: 12px !important;
    }
}.
/* =========================================================
   HEADER BAR - NO BACKGROUND
========================================================= */

.ars-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 30px;
    background: #ffffff;
    position: sticky;
    top: 0;
    z-index: 9999;
    flex-wrap: wrap;
    gap: 15px;
    border-radius: 14px;
    margin-bottom: 12px;
    box-shadow: 0 3px 14px rgba(26, 26, 46, 0.08);
    border-bottom: 3px solid transparent;
    border-image: var(--ars-gradient) 1;
}

.ars-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ars-header-logo {
    height: 44px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
    border-radius: 6px;
}

.ars-header-title {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.5px;
    background: var(--ars-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ars-header-right {
    text-align: right;
    display: flex;
    align-items: center;
    gap: 12px;
}

.ars-current-date-badge {
    display: inline-block;
    background: var(--ars-gradient-warm);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    padding: 8px 16px;
    border-radius: 30px;
    box-shadow: 0 2px 8px rgba(255, 106, 61, 0.35);
    white-space: nowrap;
}

/* Professional Date Select Dropdown */
.ars-edition-select {
    padding: 12px 20px;
    min-width: 200px;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    background: white;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    font-family: 'Segoe UI', Arial, sans-serif;
    color: #333;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 16px;
}

.ars-edition-select:hover {
    border-color: #667eea;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}

.ars-edition-select:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

.ars-edition-select option {
    padding: 12px;
    background: white;
    color: #333;
}

/* Dropdown calendar icon */
.ars-edition-select option:before {
    content: "📅";
    margin-right: 8px;
}

/* Responsive */
@media (max-width: 768px) {
    .ars-header-bar {
        flex-direction: column;
        text-align: center;
        padding: 15px 20px;
    }

    .ars-header-left {
        flex-direction: column;
        gap: 6px;
    }
    
    .ars-header-title {
        font-size: 18px;
    }
    
    .ars-header-right {
        width: 100%;
        flex-direction: column;
    }
    
    .ars-edition-select {
        width: 100%;
        min-width: auto;
    }

    .ars-current-date-badge {
        width: 100%;
        text-align: center;
    }
}

/* =========================================================
   TOOLBAR STYLING
========================================================= */

.ars-toolbar {
    background: #f8f9fa;
    padding: 12px 20px;
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    border-bottom: 1px solid #e0e0e0;
    position: sticky;
    top: 0;
    z-index: 999;
}

.ars-toolbar button {
    background: white;
    border: 1px solid #ddd;
    padding: 8px 18px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    border-radius: 25px;
    transition: all 0.2s ease;
    color: #555;
}

.ars-toolbar button:hover {
    background: #667eea;
    border-color: #667eea;
    color: white;
    transform: translateY(-1px);
}

/* =========================================================
   SIDEBAR STYLING
========================================================= */

.ars-sidebar {
    width: 160px;
    position: sticky;
    top: 80px;
    height: calc(100vh - 80px);
    overflow-y: auto;
    background: #fafafa;
    padding: 15px 10px;
    border-right: 1px solid #e0e0e0;
}

.ars-thumb-link {
    display: block;
    margin-bottom: 15px;
    text-decoration: none;
    color: #333;
    font-size: 12px;
    text-align: center;
    transition: all 0.2s ease;
}

.ars-thumb-link:hover {
    transform: translateY(-2px);
}

.ars-thumb-image {
    width: 100%;
    border: 1px solid #e0e0e0;
    margin-bottom: 5px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.ars-thumb-link:hover .ars-thumb-image {
    border-color: #667eea;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* =========================================================
   CONTENT & PAGES
========================================================= */

.ars-content {
    flex: 1;
    padding: 20px;
}

.ars-page {
    max-width: 1000px;
    margin: 0 auto 30px auto;
    text-align: center;
}

.ars-image-wrapper {
    position: relative;
    display: inline-block;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.ars-page-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 768px) {
    .ars-main-layout {
        display: block;
    }
    
    .ars-sidebar {
        width: 100%;
        height: auto;
        position: relative;
        top: 0;
        display: flex;
        overflow-x: auto;
        gap: 10px;
        white-space: nowrap;
        margin-bottom: 20px;
        border-right: none;
        border-bottom: 1px solid #e0e0e0;
        padding: 10px;
    }
    
    .ars-thumb-link {
        min-width: 80px;
        display: inline-block;
    }
    
    .ars-content {
        padding: 15px;
    }
}
/* =========================================================
   MOBILE CROP IMPROVEMENTS
   ========================================================= */

/* Larger touch handles for mobile */
@media (max-width: 768px) {
    .jcrop-handle {
        width: 32px !important;
        height: 32px !important;
        background: rgba(102, 126, 234, 0.9) !important;
        border: 2px solid white !important;
        border-radius: 50% !important;
    }
    
    .jcrop-selection {
        border: 2px solid #667eea !important;
        box-shadow: 0 0 0 2px rgba(255,255,255,0.3) !important;
    }
    
    .jcrop-active {
        touch-action: none;
    }
    
    /* Mobile toolbar adjustments */
    #ars-floating-toolbar {
        max-width: calc(100% - 20px);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}
/* =========================================================
   JCROP HANDLES - PROPER SIZE (Not too big)
   ========================================================= */

/* Default handle size for desktop */
.jcrop-handle {
    width: 14px !important;
    height: 14px !important;
    background-color: #ffffff !important;
    border: 2px solid #667eea !important;
    border-radius: 50% !important;
    opacity: 1 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
}

/* Corner handles position fix */
.jcrop-handle.ord-n {
    top: -7px !important;
    left: 50% !important;
    margin-left: -7px !important;
}

.jcrop-handle.ord-s {
    bottom: -7px !important;
    left: 50% !important;
    margin-left: -7px !important;
}

.jcrop-handle.ord-e {
    right: -7px !important;
    top: 50% !important;
    margin-top: -7px !important;
}

.jcrop-handle.ord-w {
    left: -7px !important;
    top: 50% !important;
    margin-top: -7px !important;
}

.jcrop-handle.ord-ne {
    top: -7px !important;
    right: -7px !important;
}

.jcrop-handle.ord-nw {
    top: -7px !important;
    left: -7px !important;
}

.jcrop-handle.ord-se {
    bottom: -7px !important;
    right: -7px !important;
}

.jcrop-handle.ord-sw {
    bottom: -7px !important;
    left: -7px !important;
}

/* Mobile - slightly larger but not too big */
@media (max-width: 768px) {
    .jcrop-handle {
        width: 18px !important;
        height: 18px !important;
        background-color: #667eea !important;
        border: 2px solid #ffffff !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.3) !important;
    }
    
    .jcrop-handle.ord-n {
        top: -9px !important;
        margin-left: -9px !important;
    }
    
    .jcrop-handle.ord-s {
        bottom: -9px !important;
        margin-left: -9px !important;
    }
    
    .jcrop-handle.ord-e {
        right: -9px !important;
        margin-top: -9px !important;
    }
    
    .jcrop-handle.ord-w {
        left: -9px !important;
        margin-top: -9px !important;
    }
    
    .jcrop-handle.ord-ne,
    .jcrop-handle.ord-nw,
    .jcrop-handle.ord-se,
    .jcrop-handle.ord-sw {
        width: 18px !important;
        height: 18px !important;
    }
    
    .jcrop-handle.ord-ne {
        top: -9px !important;
        right: -9px !important;
    }
    
    .jcrop-handle.ord-nw {
        top: -9px !important;
        left: -9px !important;
    }
    
    .jcrop-handle.ord-se {
        bottom: -9px !important;
        right: -9px !important;
    }
    
    .jcrop-handle.ord-sw {
        bottom: -9px !important;
        left: -9px !important;
    }
}

/* Selection box styling */
.jcrop-selection {
    border: 2px solid #667eea !important;
    background: rgba(102, 126, 234, 0.1) !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.5) !important;
}

/* Trackers */
.jcrop-tracker {
    -webkit-tap-highlight-color: transparent;
}
/* =========================================================
   JCROP HANDLES - SMALL & NEAT
   ========================================================= */

/* Desktop handle size */
.jcrop-handle {
    width: 10px !important;
    height: 10px !important;
    background-color: #ffffff !important;
    border: 2px solid #667eea !important;
    border-radius: 50% !important;
    opacity: 1 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
}

/* Handle positions */
.jcrop-handle.ord-n {
    top: -5px !important;
    left: 50% !important;
    margin-left: -5px !important;
}

.jcrop-handle.ord-s {
    bottom: -5px !important;
    left: 50% !important;
    margin-left: -5px !important;
}

.jcrop-handle.ord-e {
    right: -5px !important;
    top: 50% !important;
    margin-top: -5px !important;
}

.jcrop-handle.ord-w {
    left: -5px !important;
    top: 50% !important;
    margin-top: -5px !important;
}

.jcrop-handle.ord-ne {
    top: -5px !important;
    right: -5px !important;
}

.jcrop-handle.ord-nw {
    top: -5px !important;
    left: -5px !important;
}

.jcrop-handle.ord-se {
    bottom: -5px !important;
    right: -5px !important;
}

.jcrop-handle.ord-sw {
    bottom: -5px !important;
    left: -5px !important;
}

/* Mobile - slightly larger but still small */
@media (max-width: 768px) {
    .jcrop-handle {
        width: 14px !important;
        height: 14px !important;
        background-color: #667eea !important;
        border: 2px solid #ffffff !important;
    }
    
    .jcrop-handle.ord-n {
        top: -7px !important;
        margin-left: -7px !important;
    }
    
    .jcrop-handle.ord-s {
        bottom: -7px !important;
        margin-left: -7px !important;
    }
    
    .jcrop-handle.ord-e {
        right: -7px !important;
        margin-top: -7px !important;
    }
    
    .jcrop-handle.ord-w {
        left: -7px !important;
        margin-top: -7px !important;
    }
    
    .jcrop-handle.ord-ne {
        top: -7px !important;
        right: -7px !important;
    }
    
    .jcrop-handle.ord-nw {
        top: -7px !important;
        left: -7px !important;
    }
    
    .jcrop-handle.ord-se {
        bottom: -7px !important;
        right: -7px !important;
    }
    
    .jcrop-handle.ord-sw {
        bottom: -7px !important;
        left: -7px !important;
    }
}

/* Selection box */
.jcrop-selection {
    border: 2px solid #667eea !important;
    background: rgba(102, 126, 234, 0.1) !important;
}
/* Fix for page numbers below thumbnails - Mobile View */
@media (max-width: 768px) {
    
    /* Make each thumbnail link a block element with proper spacing */
    .ars-thumb-link {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        margin-bottom: 20px !important;
        text-decoration: none !important;
        width: 100% !important;
    }
    
    /* Center the thumbnail images */
    .ars-thumb-image {
        display: block !important;
        margin: 0 auto !important;
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Style and position the page number - EXACTLY below image */
    .ars-thumb-link span {
        display: block !important;
        text-align: center !important;
        margin-top: 8px !important;
        margin-bottom: 0 !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        color: #333 !important;
        background: #f5f5f5 !important;
        padding: 4px 8px !important;
        border-radius: 4px !important;
        width: auto !important;
        min-width: 60px !important;
        position: static !important;
        left: auto !important;
        right: auto !important;
    }
    
    /* Fix the container that holds all thumbnails */
    .ars-thumbnails-list,
    .ars-thumbnails-wrapper,
    .ars-thumbnails-slider {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 15px !important;
        text-align: center !important;
    }
    
    /* Each thumbnail item container */
    .ars-thumbnail-item,
    .thumbnail-item {
        flex: 0 0 auto !important;
        width: calc(33.33% - 10px) !important;
        min-width: 80px !important;
        text-align: center !important;
        margin-bottom: 15px !important;
    }
}

/* For smaller mobile devices (phones) */
@media (max-width: 480px) {
    .ars-thumbnail-item,
    .thumbnail-item {
        width: calc(50% - 10px) !important;
    }
    
    .ars-thumb-link span {
        font-size: 11px !important;
        padding: 3px 6px !important;
        margin-top: 6px !important;
    }
}

/* =========================================================
   SLIDER / SLIDING PAGES
   ========================================================= */

.ars-slider-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    border-radius: 12px;
    background: #f1f1f1;
    touch-action: pan-y;
}

.ars-slider-container {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
    touch-action: pan-y;
}

/* touch-action does NOT inherit to children in CSS — without repeating it
   here, a touch that starts directly on the image falls back to the
   browser's default (full-page pinch-zoom) instead of respecting the
   container's pan-y restriction above. */
.ars-image-wrapper,
.ars-page-image {
    touch-action: pan-y;
}

.ars-slide {
    flex: 0 0 100%;
    min-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    box-sizing: border-box;
    touch-action: pan-y;
}

.ars-slide .ars-image-wrapper {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

.ars-slide .ars-page-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

/* =========================================================
   PAGE INDICATOR
   ========================================================= */

#ars-page-indicator {
    color: var(--ars-dark);
    font-weight: 600;
    font-size: 14px;
    padding: 8px 16px;
    min-width: 120px;
    text-align: center;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 30px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

#ars-current-page {
    color: var(--ars-primary);
    font-weight: 800;
}

#ars-total-pages {
    color: #999;
}

/* =========================================================
   TOOLBAR NAVIGATION BUTTONS
   ========================================================= */

#ars-prev-page,
#ars-next-page {
    background: #667eea !important;
    color: white !important;
    border: none !important;
    min-width: 80px;
}

#ars-prev-page:hover,
#ars-next-page:hover {
    background: #5a6fd6 !important;
    transform: translateY(-1px);
}

#ars-prev-page:disabled,
#ars-next-page:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none !important;
}

/* =========================================================
   ★ PREMIUM SIMPLE NAVIGATION BUTTONS ★
   Apple-Inspired Glassmorphism Design
========================================================= */

.ars-simple-nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    z-index: 100;
    pointer-events: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
}

/* Base Button Style - Premium Glassmorphism */
.ars-simple-btn {
    pointer-events: auto;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    color: #1a1a2e;
    font-size: 0;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* SVG Icons inside buttons */
.ars-simple-btn svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: #1a1a2e;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.3s ease;
}

/* Hover State - Premium Glow Effect */
.ars-simple-btn:hover {
    transform: scale(1.08);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 
        0 12px 48px rgba(102, 126, 234, 0.25),
        0 4px 16px rgba(102, 126, 234, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 0 40px rgba(102, 126, 234, 0.08);
    border-color: rgba(102, 126, 234, 0.3);
}

.ars-simple-btn:hover svg {
    stroke: #667eea;
}

/* Active / Click Animation */
.ars-simple-btn:active {
    transform: scale(0.92) !important;
    transition-duration: 0.08s;
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Disabled State */
.ars-simple-btn:disabled {
    opacity: 0.25;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    pointer-events: none;
}

.ars-simple-btn:disabled svg {
    stroke: #999;
}

.ars-simple-btn:disabled:hover {
    transform: none !important;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Individual Button Positioning */
#ars-simple-prev {
    margin-left: 4px;
}

#ars-simple-next {
    margin-right: 4px;
}

/* =========================================================
   THUMBNAIL ACTIVE STATE
   ========================================================= */

.ars-thumb-link.active .ars-thumb-image {
    border-color: var(--ars-primary);
    box-shadow: 0 0 0 2px var(--ars-primary), 0 4px 10px rgba(106, 17, 203, 0.25);
}

.ars-thumb-link.active span {
    color: var(--ars-primary);
    font-weight: 700;
}

/* =========================================================
   ★ RESPONSIVE - MOBILE ★
   ========================================================= */

@media (max-width: 768px) {
    .ars-slide {
        padding: 5px;
    }
    
    #ars-page-indicator {
        font-size: 12px;
        min-width: 80px;
    }
    
    #ars-prev-page,
    #ars-next-page {
        min-width: 50px;
        font-size: 12px;
        padding: 8px 12px;
    }

    /* ★ Premium Mobile Navigation Buttons ★ */
    .ars-simple-nav {
        padding: 0 10px;
    }

    .ars-simple-btn {
        width: 48px;
        height: 48px;
        background: rgba(255, 255, 255, 0.82);
        backdrop-filter: blur(14px) saturate(1.4);
        -webkit-backdrop-filter: blur(14px) saturate(1.4);
        box-shadow: 
            0 6px 24px rgba(0, 0, 0, 0.08),
            0 2px 6px rgba(0, 0, 0, 0.04),
            inset 0 1px 0 rgba(255, 255, 255, 0.5);
    }

    .ars-simple-btn svg {
        width: 18px;
        height: 18px;
    }

    .ars-simple-btn:hover {
        transform: scale(1.06);
        background: rgba(255, 255, 255, 0.92);
    }

    .ars-simple-btn:active {
        transform: scale(0.90) !important;
    }

    #ars-simple-prev {
        margin-left: 2px;
    }

    #ars-simple-next {
        margin-right: 2px;
    }
}

/* ★ Small Mobile Devices ★ */
@media (max-width: 480px) {
    .ars-simple-nav {
        padding: 0 6px;
    }

    .ars-simple-btn {
        width: 42px;
        height: 42px;
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(12px) saturate(1.3);
        -webkit-backdrop-filter: blur(12px) saturate(1.3);
        box-shadow: 
            0 4px 16px rgba(0, 0, 0, 0.08),
            0 2px 4px rgba(0, 0, 0, 0.04),
            inset 0 1px 0 rgba(255, 255, 255, 0.4);
    }

    .ars-simple-btn svg {
        width: 16px;
        height: 16px;
    }

    .ars-simple-btn:hover {
        transform: scale(1.05);
    }

    .ars-simple-btn:active {
        transform: scale(0.88) !important;
    }

    #ars-page-indicator {
        font-size: 10px;
        min-width: 60px;
    }
    
    #ars-prev-page,
    #ars-next-page {
        min-width: 40px;
        font-size: 10px;
        padding: 6px 8px;
    }

    .ars-toolbar button {
        font-size: 11px;
        padding: 6px 10px;
    }
}

/* =========================================================
   ★ FULLSCREEN MODE ★
   ========================================================= */

.ars-viewer-container:fullscreen .ars-simple-btn {
    width: 72px;
    height: 72px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(20px) saturate(1.6);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    box-shadow: 
        0 12px 48px rgba(0, 0, 0, 0.15),
        0 4px 16px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.ars-viewer-container:fullscreen .ars-simple-btn svg {
    width: 28px;
    height: 28px;
}

.ars-viewer-container:fullscreen .ars-simple-btn:hover {
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 
        0 16px 56px rgba(102, 126, 234, 0.3),
        0 6px 24px rgba(102, 126, 234, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 0 60px rgba(102, 126, 234, 0.08);
}
/* =========================================================
   PERFORMANCE - Lazy Loading
   ========================================================= */

.ars-page-image {
    background: #f0f0f0;
    min-height: 200px;
}

.ars-page-image[data-src] {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ars-page-image[src] {
    opacity: 1;
}

/* =========================================================
   MOBILE PERFORMANCE
   ========================================================= */

@media (max-width: 768px) {
    .ars-page-image {
        min-height: 150px;
        background: #e8e8e8;
    }
    
    /* Reduce animation on mobile */
    .ars-slider-container {
        transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    
    .ars-simple-btn {
        transition: all 0.25s ease;
    }
}
/* =========================================================
   MOBILE DOWNLOAD FIX
   ========================================================= */

/* Prevent zoom on double tap for mobile */
#ars-floating-toolbar button {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Download button feedback */
#ars-download-crop:active {
    transform: scale(0.85) !important;
}

/* Mobile download button - larger touch area */
@media (max-width: 768px) {
    #ars-download-crop {
        width: 48px !important;
        height: 48px !important;
    }
    
    #ars-download-crop svg {
        width: 24px !important;
        height: 24px !important;
    }
}