/* Binder View Area - Holds CSS Variables */
#binderViewArea {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    height: auto; /* Ensures height is determined by content */
    /* CSS Variables for binder styling */
    --binder-corner-radius: 1.6rem;
    --binder-shell-padding-y: 0.7rem;
    --binder-shell-padding-x: 0rem;
    --binder-stitch-inset: 0.25rem;
    --page-corner-radius: 0.3rem;
    --card-corner-radius: 4%; /* Default card corner radius as a percentage */
    --page-bg-color: #272B30;
    --inner-page-padding: 1.6rem; /* Spine area padding */
    --page-outer-padding: 0.6rem; /* Outer edge padding of page content */
    --card-grid-gap: 0.75rem;
    /* Stacking Order (z-index) */
    --z-binder-stitch: 1;
    --z-binder-shell: 2;
    --z-book-pages: 10;
    --z-page-unflipping: 2500;
    --z-card-stitch: 4;
    --z-card-foil: 5;
    --z-card-language: 6;
    --z-card-selection: 7;
    --z-card-overlay: 8;
    --z-card-quantity: 9;
    --z-card-debug: 10;
}

/* Binder Visual Container - Acts as perspective parent */
#binderContainer {
    display: flex;
    align-items: center;
    width: 100%; /* Takes full width of binderViewArea */
    height: auto;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    overflow: visible;
    position: relative;
    border: 1px solid var(--binder-border-color, #5a8a69);
    z-index: var(--z-binder-shell); /* Ensure binderContainer is above paginationControls */
    background-color: #B75C5C;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.07'/%3E%3C/svg%3E");
    transition: background-color 0.2s, border-radius 0.1s, padding 0.1s;
    touch-action: pan-y;
    perspective: 2500px;
    box-sizing: border-box;
    padding-top: var(--binder-shell-padding-y);
    padding-bottom: var(--binder-shell-padding-y);

    /* Mobile Defaults: binder flush left, rounded corners only on right */
    border-radius: 0 var(--binder-corner-radius) var(--binder-corner-radius) 0;
    padding-right: var(--binder-shell-padding-x);
    padding-left: 0;
    border-left-width: 0;
    justify-content: flex-start; /* Ensures content (page) aligns to the start (left) */
}

/* Hide binder and nav controls until pages (cards) are loaded */
#binderViewArea:has(#bookPagesContainer:empty) :is(#binderContainer, #paginationControls, #sortControls) {
    display: none;
}
#binderContainer.swiping-x { touch-action: none; }

/* Inner Cover Stitching */
#binderContainer::before {
    content: ''; position: absolute;
    border: 2px dashed var(--binder-stitch-color, #5a8a69);
    pointer-events: none; z-index: var(--z-binder-stitch);
    transition: border-radius 0.1s, top 0.1s, left 0.1s, right 0.1s, bottom 0.1s;
    top: var(--binder-stitch-inset);
    right: var(--binder-stitch-inset);
    bottom: var(--binder-stitch-inset);
}

/* Container for the actual flipping pages */
#bookPagesContainer {
    position: relative;
    transform-style: preserve-3d;
    z-index: var(--z-book-pages);
    min-height: var(--min-book-pages-height, 300px); /* Fallback, content should drive height */
    width: 100%; /* Mobile default: 100% of binderContainer's content box */
    height: auto; /* Content will drive height */
    display: grid; /* Make it a grid container for paper elements */
    transform: translateX(0%); /* Mobile default */
}

/* Individual Paper Sheet */
.paper {
    width: 100%;
    transform-origin: left center;
    transition: transform 0.6s ease-in-out; /* Transition for page flip */
    will-change: transform, box-shadow;
    border-radius: 0 var(--page-corner-radius, 0.3rem) var(--page-corner-radius, 0.3rem) 0;
    background-color: transparent;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1), 1px 0 0 rgba(0,0,0,0.05), inset 3px 0 8px -2px rgba(0,0,0,0.1);
    transform-style: preserve-3d;
    display: grid; /* Make .paper a grid container for .front and .back */
    grid-area: 1 / 1 / -1 / -1; /* Make all .paper elements stack in the same cell of bookPagesContainer */
}

/* Front and Back Faces of a Paper Sheet */
.paper .front,
.paper .back {
    width: 100%;
    overflow: hidden;
    backface-visibility: hidden;
    background-color: var(--page-bg-color);
    background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1.5px, transparent 1.5px);
    background-size: 4.5px 4.5px;
    display: block;
    grid-area: 1 / 1 / -1 / -1; /* Make .front and .back stack in the same cell of .paper */
}
.paper .front {
    z-index: 1;
    border-radius: 0 var(--page-corner-radius, 0.3rem) var(--page-corner-radius, 0.3rem) 0;
    transform: translateZ(0px);
}
.paper .back {
    transform: rotateY(180deg);
    z-index: 0;
    border-radius: var(--page-corner-radius, 0.3rem) 0 0 var(--page-corner-radius);
    box-shadow: inset 5px 0px 15px -5px rgba(0,0,0,0.3);
}
/* Temporarily raise z-index for page animating backward (un-flipping) */
.paper.is-unflipping-backward {
    /* The !important is required here to override the inline `style.zIndex`
       set by the JavaScript. When a page is un-flipped (e.g., going from
       page 4 to 3), the moving page (paper 2) must temporarily appear on
       top of all other static pages to create a realistic effect. */
    z-index: var(--z-page-unflipping) !important;
}

.paper.flipped {
    transform: rotateY(-180deg);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1), -1px 0 0 rgba(0,0,0,0.05), inset -3px 0 8px -2px rgba(0,0,0,0.1);
    border-radius: var(--page-corner-radius) 0 0 var(--page-corner-radius);
}

/* Content Container within Front/Back Faces */
.page-content {
    /* Use a consistent horizontal padding for both sides of the content area */
    padding: var(--page-outer-padding); /* Apply outer padding consistently to all sides */
    box-sizing: border-box; position: relative;
    display: block; /* Ensures height is determined by normal flow of .card-grid */
    background-color: transparent;
}
/* Gradients for Spine Shadow Effect - these should be *visual only* and not affect layout */
.paper .front .page-content::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: 0;
    width: var(--inner-page-padding); /* This will be the visual width of the spine shadow */
    background: linear-gradient(to right, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100%);
    pointer-events: none; z-index: 1; transition: width 0.1s;
}
.paper .back .page-content::after {
    content: ''; position: absolute; top: 0; bottom: 0; right: 0;
    width: var(--inner-page-padding); /* This will be the visual width of the spine shadow */
    background: linear-gradient(to left, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100%);
    pointer-events: none; z-index: 1; transition: width 0.1s;
}

/* The 3x3 Card Grid within a Page Face */
.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Changed to auto-fit rows to allow cards to determine their height based on aspect-ratio */
    grid-auto-rows: auto;
    gap: var(--card-grid-gap);
    align-content: start;
    width: 100%; /* Ensure grid takes full width of its .page-content parent's content box */
    position: relative; z-index: 2;
}

/* --- Card Slot Styles --- */
.card-slot {
    border-radius: var(--card-corner-radius, 4%);
    overflow: visible;
    aspect-ratio: 5 / 7; /* Crucial: This maintains the card aspect ratio */
    display: flex; align-items: center; justify-content: center;
    position: relative; cursor: pointer;
    perspective: 1000px; z-index: 2;
    background-color: transparent; box-shadow: none;
    user-select: none; /* Prevent text selection on card slots */
    -webkit-user-select: none; /* Safari */
    height: auto; /* Ensure height is driven by aspect-ratio and available width */
    min-width: 0;
}
.card-slot[data-clickable="false"] {
    cursor: default;
}
.card-slot[data-clickable="false"]:hover .card-flipper { transform: none; }
.card-content {
    width: 100%; height: 100%; position: relative; transition: opacity 0.5s;
    border-radius: var(--card-corner-radius, 4%); background-color: transparent; box-shadow: none; overflow: visible;
}
.card-grid > .card-slot::before, .card-grid > .card-slot::after {
    content: ''; position: absolute;
    --gap-offset: calc(var(--card-grid-gap) / 2);
    z-index: var(--z-card-stitch); pointer-events: none;
}
.card-grid > .card-slot::before {
    top: 0; right: calc(-1 * var(--gap-offset)); width: 1px; height: 100%;
    border-right: 1px dashed rgba(255, 255, 255, 0.3);
}
.card-grid > .card-slot::after {
    left: 0; bottom: calc(-1 * var(--gap-offset)); width: 100%; height: 1px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.3);
}
.card-grid > .card-slot:nth-child(3n)::before { display: none; }
.card-grid > .card-slot:nth-child(n+7)::after { display: none; }

.card-slot img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    border-radius: var(--card-corner-radius, 4%); pointer-events: none;
}
.card-flipper {
    position: relative; width: 100%; height: 100%;
    transition: transform 0.6s; transform-style: preserve-3d; z-index: 1;
    pointer-events: none;
}
.card-slot.is-flipped .card-flipper { transform: rotateY(180deg); }
.card-face {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    -webkit-backface-visibility: hidden; backface-visibility: hidden;
    border-radius: var(--card-corner-radius, 4%); overflow: hidden;
}
.card-back { transform: rotateY(180deg); }

.card-slot.is-foil .card-content::after {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    border-radius: var(--card-corner-radius, 4%);
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.15) 45%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.15) 55%, transparent 70%);
    background-size: 300% 100%; opacity: 0.6;
    animation: foil-sheen 5.33s linear infinite; z-index: var(--z-card-foil); pointer-events: none; mix-blend-mode: screen;
}
@keyframes foil-sheen { 0% { background-position: 200% 50%; } 100% { background-position: -100% 50%; } }
@keyframes foil-sheen-reversed { 0% { background-position: -100% 50%; } 100% { background-position: 200% 50%; } }
#zoomedCardWrapper.is-foil-zoomed.is-showing-back::after {
    animation-name: foil-sheen-reversed;
    background-image: linear-gradient( 80deg, transparent 30%, rgba(255, 255, 255, 0.15) 45%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.15) 55%, transparent 70% );
}

.card-overlay {
    position: absolute; background-color: rgba(0, 0, 0, 0.7); color: white;
    font-size: 13px; font-weight: 600; padding: 3px 8px; border-radius: 0.75rem;
    z-index: var(--z-card-overlay); pointer-events: none; line-height: 1.2; font-family: monospace;
}
.price-indicator { bottom: 5px; left: 50%; transform: translateX(-50%); display: block; }
.quantity-indicator {
    top: 0; left: 50%; transform: translate(-50%, -50%); font-size: 10px; padding: 1px 5px;
    background-color: rgba(75, 85, 99, 0.8); border: 1px solid rgba(255,255,255,0.3); z-index: var(--z-card-quantity);
}
.language-indicator {
    position: absolute;
    bottom: 5px;
    left: 5px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Sticker-like appearance */
    background-color: #1e2224; /* Vibrant sky blue */
    border: 2px solid #fff;
    color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 800; /* Bolder text */
    line-height: 1;
    text-transform: uppercase;
    z-index: var(--z-card-language);
    pointer-events: none;
}

/* Adjust font size for longer (3-char) language codes to fit in the circle */
.language-indicator.lang-long {
    font-size: 7px;
}

.selection-controls {
    position: absolute;
    inset: 0; /* Modern shorthand for top: 0, right: 0, bottom: 0, left: 0 */
    display: flex; /* Layout properties always applied */
    flex-direction: column; align-items: center; justify-content: center;
    background-color: rgba(0, 0, 0, 0.5); z-index: var(--z-card-selection);
    border-radius: var(--card-corner-radius, 4%);
    opacity: 0; /* Initially transparent */
    visibility: hidden; /* Initially not visible and not affecting layout/events */
    pointer-events: none; /* Not interactive when hidden */
    /* Slower fade-in/out; visibility change is delayed on fade-out */
    transition: opacity 0.15s ease-in-out, visibility 0s linear 0.15s;
}
.card-slot.selected .selection-controls {
    opacity: 1; /* Make visible */
    visibility: visible;
    pointer-events: auto; /* Make interactive */
    /* Override transition for fade-in: visibility change is immediate */
    transition: opacity 0.15s ease-in-out, visibility 0s linear 0s;
}
.selected-checkmark {
    width: 40px; height: 40px; cursor: pointer;
    margin-bottom: 6px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'%3E%3C/path%3E%3Cpolyline points='22 4 12 14.01 9 11.01'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center; background-size: 70%;
    transition: background-color 0.2s;
}
.quantity-adjust-buttons { display: flex; align-items: center; }
.adjust-btn {
    width: 28px; height: 28px; border-radius: 50%; color: white;
    font-weight: bold; font-size: 18px; line-height: 26px; text-align: center;
    cursor: pointer; margin: 0 4px; transition: background-color 0.2s, transform 0.1s;
    border: 1px solid rgba(255,255,255,0.3); user-select: none;
    background-color: rgba(55, 65, 81, 0.7);
}
.adjust-btn:hover { background-color: rgba(31, 41, 55, 0.8); }
.adjust-btn:active { transform: scale(0.95); background-color: rgba(17, 24, 39, 0.85); }
.adjust-btn:disabled {
    background-color: rgba(107, 114, 128, 0.5); opacity: 0.6;
    cursor: not-allowed; transform: none; border-color: rgba(255,255,255,0.1);
}
.selected-quantity-display {
    color: white; font-weight: bold; font-size: 14px;
    min-width: 20px; text-align: center; pointer-events: none;
}
.debug-info {
    position: absolute; bottom: 0; left: 0; width: 100%; background-color: rgba(0,0,0,0.7);
    color: white; font-size: 8px; padding: 1px 3px; z-index: var(--z-card-debug); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; line-height: 1.2; font-family: monospace;
    pointer-events: none;
}

/* Zoomed Card Wrapper Base Styles */
#zoomedCardWrapper {
    /* No longer sets max-width/max-height directly. Will size to fit the image. */
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    border-radius: var(--card-corner-radius, 4%); /* Moved from inline style */
}

/* Zoomed Card Image Styles - new rules */
#zoomedCardImage {
    max-width: 80vw;   /* Default max-width for desktop */
    max-height: 85vh;  /* Default max-height for desktop */
    object-fit: contain; /* Ensures aspect ratio is maintained within these bounds */
    border-radius: inherit; /* Moved from inline style */
}

/* Zoomed Card Foil Effect */
#zoomedCardWrapper.is-foil-zoomed::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    border-radius: inherit; /* Inherit from the wrapper's dynamic border-radius */
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.15) 45%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.15) 55%, transparent 70%);
    background-size: 300% 100%;
    mix-blend-mode: screen;
    opacity: 0.6;
    animation: foil-sheen 5.33s linear infinite var(--zoomed-foil-animation-delay, 0s);
    z-index: 1; /* Above the image, within the wrapper */
    pointer-events: none;
}

/* --- Responsive Styles --- */

/* Mobile (max-width: 767px) */
@media (max-width: 767px) {
    #binderViewArea {
        margin-left: 0;
        margin-right: 0;
    }
    #binderContainer::before {
        left: -100px; /* Effectively hides left stitch on mobile */
        border-radius: 0 calc(var(--binder-corner-radius) - var(--binder-stitch-inset)) calc(var(--binder-corner-radius) - var(--binder-stitch-inset)) 0;
    }
    #zoomedCardImage {
        max-width: 90vw;   /* Allow image to be large, with 5vw padding on each side */
        max-height: 90vh;  /* Allow image to be large, with 5vh padding top/bottom */
    }
}

/* Desktop (min-width: 768px) */
@media (min-width: 768px) {
    #binderViewArea {
        /*
         * Safeguard against the binder becoming too tall on wide screens.
         * The binder's height is ~70% of its width. To keep height < ~85vh
         * (to leave room for controls), we must cap the width at ~121vh (85 / 0.7).
         * We also cap it at 100rem for design consistency on large monitors.
         * The min() function selects the smallest of these values, preventing vertical scroll.
        */
        max-width: min(100rem, 121vh);
        min-width: 48rem; /* Lock the minimum width to prevent layout collapse on short viewports */
        padding-left: 1rem;
        padding-right: 1rem;
        padding-bottom: 1rem; /* Symmetrical padding */
        display: flex; /* Enable flexbox for vertical centering */
        align-items: center; /* Center content vertically */
        justify-content: center; /* Center content horizontally */
        flex-direction: column; /* Stack controls and binder vertically */
        gap: 1rem; /* Use gap for consistent spacing between controls and binder */
    }

    #binderContainer {
        border-top-left-radius: var(--binder-corner-radius);
        border-bottom-left-radius: var(--binder-corner-radius);
        padding-left: var(--binder-shell-padding-x);
        border-left-width: 1px;
        /* On desktop, the binder's sizing is reverted to its base styles.
           - `width: 100%` (from base) makes it fill the available horizontal space.
           - `height: auto` (from base) makes its height adjust to perfectly fit the #bookPagesContainer,
             which in turn is sized by the card grid. This creates a "perfect fit". */
    }
    #binderContainer::before {
        left: var(--binder-stitch-inset);
        border-radius: calc(var(--binder-corner-radius) - var(--binder-stitch-inset));
    }
    #bookPagesContainer {
        width: 50%; /* 50% of binderContainer's content box */
        transform: translateX(100%); /* Position in the right half of binderContainer */
        /* By setting height to auto, the page's height is now determined by its content (the card grid).
           This ensures the page is exactly the right height for the cards, removing extra space.
           The entire #bookPagesContainer is then vertically centered within #binderContainer. */
        height: auto;
        min-height: unset; /* Continue to override the mobile-first min-height */
    }
    /* By removing the desktop-specific overrides for .paper .front/back, they revert to their
       base styles. This simplifies the layout by letting them act as simple block containers
       that correctly inherit their height from the parent .paper grid. The centering of the
       card grid is now solely handled by .page-content. */
    /* The generic .page-content and .card-grid styles are no longer needed for desktop.
       The base styles (display: block for page-content, and grid-auto-rows: auto for card-grid)
       provide the correct bottom-up sizing behavior, where the card's aspect-ratio
       determines the height of the grid, and thus the height of the page. */
    /* Adjust card-grid to account for spine on desktop */
    .paper .front .page-content {
        /* On the front page (right side when open), the spine is on the left. */
        /* So, the content itself needs to be shifted right by the spine's width */
        padding-left: calc(var(--page-outer-padding) + var(--inner-page-padding));
        padding-right: var(--page-outer-padding);
    }
    .paper .back .page-content {
        /* On the back page (left side when open), the spine is on the right. */
        /* So, the content itself needs to be shifted left by the spine's width */
        padding-right: calc(var(--page-outer-padding) + var(--inner-page-padding));
        padding-left: var(--page-outer-padding);
    }
    /* The .card-slot and .card-slot img styles are now consistent across all screen sizes.
       The base styles, which use `aspect-ratio` and `height: 100%` respectively, are sufficient.
       The width of the slot is implicitly handled by the parent `card-grid`. */
}