/* Base Reset */
        * { box-sizing: border-box; margin: 0; padding: 0; }
        
        /* Main Container */
        .viewer-wrapper {
            width: 100%;
            max-width: 600px;
            margin: 20px auto;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            background-color: #fff;
            font-family: Arial, sans-serif;
            position: relative;
            overflow: hidden;
        }

        /* Header / Logo */
        .viewer-header {
            background-color: #ffffff;
            padding: 12px 15px;
            border-bottom: 1px solid #e0e0e0;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            z-index: 10;
        }
        .viewer-header img {
            height: 40px;
            width: auto;
            object-fit: contain;
        }

        /* Hide logic inputs */
        input[type="radio"], input[type="checkbox"] {
            display: none;
        }

        /* FIXED NAVIGATION ARROWS */
        .nav-arrow {
            position: absolute;
            top: 55%;
            transform: translateY(-50%);
            background-color: rgba(0,0,0,0.6);
            color: #fff;
            width: 35px;
            height: 35px;
            border-radius: 50%;
            display: none;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            z-index: 20;
            box-shadow: 0 2px 5px rgba(0,0,0,0.3);
            transition: background-color 0.2s;
        }
        .nav-arrow:hover { background-color: rgba(0,0,0,0.9); }
        .nav-arrow.left { left: 10px; }
        .nav-arrow.right { right: 10px; }

        /* FIXED PAGINATION */
        .pagination {
            position: absolute;
            bottom: 15px;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(0,0,0,0.7);
            padding: 6px 12px;
            border-radius: 20px;
            display: flex;
            gap: 10px;
            z-index: 20;
        }
        .page-dot {
            color: #fff;
            font-size: 13px;
            font-weight: bold;
            width: 22px;
            height: 22px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            cursor: pointer;
            transition: 0.2s;
        }
        .page-dot:hover { background-color: #555; }
        
        /* INDIVIDUAL SLIDE & PANNING LOGIC */
        .pan-box {
            width: 100%;
            height: 100%;
            overflow: auto; 
            padding: 10px;
        }

        /* Custom Scrollbar for better look */
        .pan-box::-webkit-scrollbar { width: 8px; height: 8px; }
        .pan-box::-webkit-scrollbar-thumb { background: #bbb; border-radius: 4px; }
        
        /* Image Wrapper acting as zoom trigger */
        .img-trigger {
            display: block;
            width: 100%;
            margin: 0 auto;
            cursor: zoom-in;
            transition: width 0.3s ease;
            position: relative;
        }
        
        .img-trigger img {
            width: 100%;
            height: auto;
            display: block;
            border-radius: 0;
            -webkit-user-drag: none;
            box-shadow: 0 0 5px rgba(0,0,0,0.1);
        }

        /* Zoom Text Hint */
        .zoom-hint {
            position: absolute;
            top: 5px;
            right: 5px;
            background: rgba(0,0,0,0.6);
            color: #fff;
            padding: 4px 8px;
            font-size: 11px;
            pointer-events: none;
        }

        /* DYNAMIC LOGIC FOR 3 PAGES */
        .slider-track {
            display: flex;
            width: 300%; /* 3 Pages = 300% */
            height: 450px;
            background-color: #f8f9fa;
            transition: transform 0.4s ease-in-out;
        }
        .slide {
            width: 33.333333333333336%;
            height: 100%;
            position: relative;
        }

        /* Slide Transition Logic */
        #p1:checked ~ .slider-track { transform: translateX(-0%); }
        #p2:checked ~ .slider-track { transform: translateX(-33.333333333333336%); }
        #p3:checked ~ .slider-track { transform: translateX(-66.66666666666667%); }

        /* Logic to display specific arrows */
        #p2:checked ~ .left-2 { display: flex; }
        #p3:checked ~ .left-3 { display: flex; }
        #p1:checked ~ .right-1 { display: flex; }
        #p2:checked ~ .right-2 { display: flex; }

        /* Highlight active pagination dot */
        #p1:checked ~ .pagination .dot-1,
        #p2:checked ~ .pagination .dot-2,
        #p3:checked ~ .pagination .dot-3 {
            background-color: #007bff;
        }

        /* CLICK TO ZOOM LOGIC */
        #z1:checked ~ .pan-box .img-trigger,
        #z2:checked ~ .pan-box .img-trigger,
        #z3:checked ~ .pan-box .img-trigger {
            width: 250%;
            cursor: zoom-out;
        }
        #z1:checked ~ .pan-box .zoom-hint,
        #z2:checked ~ .pan-box .zoom-hint,
        #z3:checked ~ .pan-box .zoom-hint {
            display: none;
        }