/* Add this new rule */
.modal-trigger-btn {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50vw;
    /* Half the screen width */
    background: transparent;
    /* Invisible by default */
    border: none;
    cursor: pointer;
    z-index: 1050;
    /* Above image, below controls overlay */
}

.modal-trigger-left {
    left: 0;
}

.modal-trigger-right {
    right: 0;
}

.modal-controls-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: opacity 0.3s ease-in-out;
    z-index: 1090;
    pointer-events: none; /* Default to none */
}

.modal-controls-overlay.active-controls {
    pointer-events: auto; /* Only auto when controls are active */
}

.modal-toggle-btn {
    position: fixed;
    bottom: 20px;
    font-size: 1.5rem;
    color: #ffffffb8;
    background: rgb(30 30 30 / 49%);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: none;
    /* Hidden by default */
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    z-index: 1100;
    transition: background 0.2s, transform 0.15s;
}

.modal-toggle-btn-left {
    left: 20px;
}

.modal-toggle-btn-right {
    right: 20px;
}

.toggled-controls-container {
    position: absolute;
    opacity: 0;
    pointer-events: auto; /* Changed to auto */
    transition: opacity 0.3s ease-in-out;
    display: flex;
    /* Now a flex container for its children */
    gap: 10px;
    /* Space between vertical and horizontal stacks */
}

.toggled-controls-container.show-left {
    opacity: 1;
    pointer-events: auto;
    left: 20px;
    bottom: 70px;
    flex-direction: row;
    /* Horizontal arrangement of stacks */
    align-items: flex-end;
    /* Align vertical stack to the bottom */
}

.toggled-controls-container.show-right {
    opacity: 1;
    pointer-events: auto;
    right: 20px;
    bottom: 70px;
    flex-direction: row-reverse;
    /* Horizontal arrangement of stacks, reversed */
    align-items: flex-end;
    /* Align vertical stack to the bottom */
}

.vertical-controls-stack {
    display: flex;
    flex-direction: column-reverse;
    /* Stack from bottom up */
    gap: 10px;
}

.horizontal-controls-stack {
    display: flex;
    flex-direction: row;
    /* Arrows side-by-side */
    gap: 10px;
    margin-bottom: -60px;
    /* Space from the vertical stack */
}

/* ปุ่มปิด (close) */
.modal-close {
    font-size: 1rem;
    color: #ffffffb8;
    background: rgb(30 30 30 / 49%);
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
}

/* ปรับ modal ให้รูปเต็มจอ ปุ่มอยู่ล่างรูป ไม่บังรูป และรองรับ pinch-zoom แบบ native */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.modal.open {
    display: flex;
}

.modal-img-container {
    max-width: 100vw;
    max-height: 100vh;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    touch-action: none;
}

.modal img {
    max-width: 100vw;
    max-height: 100vh;
    object-fit: contain;
    border-radius: 0;
    box-shadow: none;
    background: #000000;
    width: 100vw;
    height: 100vh;
    touch-action: none;
}

.modal-video-container {
    max-width: 100vw;
    max-height: 100vh;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.modal video {
    max-width: 100vw;
    max-height: 100vh;
    object-fit: contain; /* Ensure the whole video is visible */
    border-radius: 0;
    box-shadow: none;
    background: #000000;
    width: 100%; /* Take full width of its container */
    height: 100%; /* Take full height of its container */
}

.modal-nav-arrows-container {
    /* Removed absolute positioning and rotation */
    /* Positioned by parent flex container */
    display: flex;
    flex-direction: row;
    /* Ensure arrows are side-by-side */
    gap: 10px;
    /* Space between arrows */
    /* margin-right: 10px; */
    /* Handled by horizontal-controls-stack margin-bottom */
}

.modal-arrow {
    font-size: 2.5rem;
    color: #ffffffb8;
    background: rgb(30 30 30 / 49%);
    border: none;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1100;
    transition: background 0.2s, transform 0.15s;
}

.modal-right-controls-container {
    /* Removed absolute positioning */
    /* Positioned by parent flex container */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.modal-zoom-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ปุ่มซูม */
.modal-zoom-btn {
    font-size: 1.5rem;
    width: 44px;
    height: 44px;
    color: #ffffffb8;
    background: rgb(30 30 30 / 49%);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 600px) {
    .modal-arrow {
        font-size: 1rem;
        padding: 0 12px;
    }
}

/* New styles for password modal */
#passwordModal {
    z-index: 9999;
    /* Ensure it's on top of everything */
    display: none; /* Explicitly hide by default */
}

#passwordModal.open {
    display: flex; /* Ensure it overrides .modal's display: none; */
    justify-content: center;
    align-items: center;
}

#passwordModal .modal-content {
    background: #181c22;
    color: #fff;
    border-radius: 18px;
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.5);
    padding: 36px 32px 28px 32px;
    min-width: 320px;
    max-width: 90vw;
    text-align: center;
    position: relative;
}

#passwordModal .modal-header h2 {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 18px;
    letter-spacing: 1px;
}

#passwordModal .modal-body {
    margin-bottom: 10px;
}

#passwordModal input#passwordInput {
    font-size: 1.3rem;
    padding: 10px 16px;
    border-radius: 8px;
    border: 1.5px solid #444;
    background: #23272f;
    color: #fff;
    width: 80%;
    max-width: 260px;
    outline: none;
    transition: border 0.2s;
}

#passwordModal input#passwordInput:focus {
    border-color: #27ae60;
    /* Highlight on focus */
}

#passwordModal .error-message {
    color: #e74c3c;
    font-size: 1rem;
    margin: 10px 0 0 0;
    min-height: 1.5em;
}

#passwordModal button#passwordSubmit {
    margin-top: 18px;
    font-size: 1.1rem;
    padding: 10px 36px;
    border-radius: 8px;
    background: #27ae60;
    color: #fff;
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: background 0.2s;
}

#passwordModal button#passwordSubmit:hover {
    background: #229a52;
}

/* Styles for download buttons */
#downloadAllBtn,
#downloadSingleBtn {
    font-size: 1.1rem;
    color: #ffffffb8;
    background: rgb(30 30 30 / 49%);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    outline: none;
}

#downloadAllBtn:hover,
#downloadSingleBtn:hover {
    background: #333;
    border-color: #666;
}

#downloadAllBtn {
    /* Override inline styles */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
    color: #ffffffb8;
    background: rgb(30 30 30 / 49%);
}

.modal-download-btn {
    font-size: 1.5rem;
    width: 44px;
    height: 44px;
    color: #eee;
    background: #222;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.modal-download-btn:hover {
    background: #333;
    border-color: #666;
}

.navbar {
    background-color: #222;
    padding: 10px 20px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}

.nav-link {
    color: #eee;
    text-decoration: none;
    padding: 8px 15px;
    margin: 0 10px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.nav-link:hover {
    background-color: #555;
}

/* Highlight active link */


#scrollToTopBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: #bbc2c93a; /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    font-size: 18px; /* Increase font size */
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}