/* Directory navigation buttons and current display */
.directory-nav-btn {
    background: rgba(72,66,68,0.18);
    color: rgb(255, 213, 0);
    border: 1px solid rgba(255,255,255,0.13);
    border-radius: 1.5rem;
    padding: 0.35rem 0.7rem;
    margin: 0 0.18rem;
    box-shadow: 0 2px 8px 0 rgba(0,0,0,0.10);
    backdrop-filter: blur(8px) saturate(140%);
    cursor: pointer;
    transition: all 180ms cubic-bezier(.4,0,.2,1);
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.directory-nav-btn svg {
    width: 1.6em;
    height: 1.6em;
    stroke: currentColor;
    stroke-width: 2.5;
    transition: stroke 180ms cubic-bezier(.4,0,.2,1), filter 180ms cubic-bezier(.4,0,.2,1);
    filter: drop-shadow(0 0 2px rgba(255,213,0,0.12));
    display: block;
    margin: auto;
    /* Center SVG vertically and horizontally */
    position: relative;
    left: 0;
    top: 0;
}

.directory-nav-btn:hover, .directory-nav-btn:focus {
    background: rgba(255,213,0,0.13);
    color: rgb(72, 66, 68);
    box-shadow: 0 4px 16px 0 rgba(0,0,0,0.13), 0 0 0 2px rgba(255,213,0,0.18);
    outline: none;
    transform: scale(1.04);
}

.directory-nav-btn:active {
    background: rgba(255,213,0,0.22);
    box-shadow: 0 2px 8px 0 rgba(0,0,0,0.10);
}

.directory-current {
    display: inline-block;
    min-width: 6.2rem;
    text-align: center;
    background: rgba(72,66,68,0.13);
    color: #fff;
    font-family: 'Segoe UI', sans-serif;
    font-size: 1.12rem;
    font-weight: 600;
    border-radius: 1.5rem;
    padding: 0.55rem 1.15rem;
    box-shadow: 0 2px 8px 0 rgba(0,0,0,0.10);
    backdrop-filter: blur(8px) saturate(140%);
    margin: 0 0.25rem;
    border: 1px solid rgba(255,255,255,0.13);
    cursor: pointer;
    transition: background 180ms, color 180ms;
}

.directory-current[aria-expanded="true"] {
    background: rgba(255,213,0,0.18);
    color: rgb(72, 66, 68);
    font-weight: 700;
    text-shadow: 0 1px 6px rgba(255,213,0,0.18), 0 0 2px #fff;
    outline: 2px solid rgba(255,213,0,0.25);
}

.directory-dropdown {
    position: absolute;
    left: 0;
    top: 110%;
    min-width: 100%;
    background: rgba(72,66,68,0.98);
    border-radius: 1rem;
    box-shadow: 0 2px 8px 0 rgba(0,0,0,0.18);
    z-index: 100;
    list-style: none;
    padding: 0.3rem 0;
    margin: 0;
    display: none;
}

.directory-dropdown-option {
    padding: 0.5rem 1.2rem;
    cursor: pointer;
    text-align: center;
    color: #fff;
    font-size: 1.08rem;
    transition: background 180ms, color 180ms;
    border-radius: 0.75rem;
}

.directory-dropdown-option:hover {
    background: rgba(255,213,0,0.13);
    color: rgb(72, 66, 68);
}

.directory-dropdown-option[aria-selected="true"],
.directory-dropdown-option.selected {
    color: rgb(255,213,0);
    font-weight: bold;
    background: rgba(255,213,0,0.09);
}

.fullscreen-hide-btn {
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    background: rgba(255,255,255,0.08);
    border: none;
    border-radius: 50%;
    width: 2.7rem;
    height: 2.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    box-shadow: 0 2px 8px 0 rgba(0,0,0,0.18);
    transition: transform 200ms, background 200ms;
    backdrop-filter: blur(2px);
}

.fullscreen-hide-btn img {
    width: 2.1rem;
    height: 2.1rem;
    object-fit: contain;
    filter: drop-shadow(0 0 2px #fff) brightness(1.2);
}

.fullscreen-hide-btn:hover {
    background: rgba(255,0,81,0.18);
    transform: scale(1.13);
}
/* Fullscreen Video Modal Styles - Sleek Glass Morphism */
#fullscreenVideoModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(30, 30, 30, 0.6);
    backdrop-filter: blur(16px) brightness(0.9);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: modalFadeIn 300ms ease;
}

#fullscreenVideoModal.hidden {
    display: none;
}

@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}


.fullscreen-modal-content {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(72, 66, 68, 0.85);
    z-index: 1000;
    transition: box-shadow 200ms, background 200ms;
}


#fullscreenPreview {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    border-radius: 1rem;
    background: #181818;
    box-shadow: 0 2px 24px 0 rgba(0,0,0,0.25);
    transition: box-shadow 200ms, filter 200ms;
}

#fullscreenPreview::-webkit-media-controls-panel {
    background: rgba(72,66,68,0.2);
    border-radius: 0 0 1rem 1rem;
}

#closeFullscreen {
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    background: rgba(255,255,255,0.08);
    border: none;
    border-radius: 50%;
    width: 2.7rem;
    height: 2.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px 0 rgba(0,0,0,0.18);
    transition: transform 200ms, background 200ms;
    backdrop-filter: blur(2px);
}

#closeFullscreen img {
    width: 1.3rem;
    height: 1.3rem;
    filter: drop-shadow(0 0 2px #fff) brightness(1.2);
}

#closeFullscreen:hover {
    transform: scale(1.13);
    background: rgba(255,0,81,0.18);
}
/* Fullscreen video modal styles */
#videoPlayer.set-active {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.85);
    z-index: 1000;
    transition: opacity 0.2s;
}

#videoPreview {
    width: 100vw;
    height: 100vh;
    object-fit: contain;
    border-radius: 0;
    box-shadow: 0 0 1rem .15rem black;
    background: #222;
    display: block;
}
/* Greyscale and lower opacity for missing video containers */
.video-missing {
    opacity: 0.5;
    transition: opacity 0.3s;
}
:root {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}

body {
    margin: 0;
    width: 100%;
    height: 100%;
}

svg {
    top: 0;
    display: flex;
    position: fixed;
    z-index: 999999;
    outline: .1rem solid rgb(72, 66, 68);
    opacity: 40%;

    mix-blend-mode: overlay;
    pointer-events: none;
}

button {
    background: transparent;
    border: none;
}

h1,
h2,
h3,
h4,
p {
    margin: 0;
    padding: 0;
}

h3 {
    font-size: 1.5rem;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgb(116, 116, 116);
    padding: 1rem;
    margin: 2rem 4rem 0 4rem;
    border-radius: 4rem;
    background-image: url(./img/graph_paper_2.jpg);
    background-size: 80rem;
    background-position: center;
    box-shadow: 0 0 .5rem .1rem rgba(0, 0, 0, 0.427);
}

/* Consolidated into main responsive system below */


nav {
    display: flex;
}

.nav-logo {
    transition: all ease-in-out 200ms;
    border-radius: 4rem;
    transform: scale(1);
}

.nav-logo:hover {
    border-radius: 4rem;
    transform: scale(1.05);
}

.nav-logo img {
    display: flex;
    width: 8rem;

}

.nav-btn {
    transition: all ease-in-out 200ms;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: .1rem solid rgb(136, 136, 136);
    border-radius: 2rem;
    padding: .25rem .5rem;
    margin: 0 .5rem;
    width: 5rem;
    color: rgb(83, 83, 83);
    text-decoration: none;
    transform: scale(1);
}

.nav-btn:hover,
.nav-btn:active {
    transform: scale(1.05);
    background-color: rgba(0, 0, 0, 0.15);
}

.content-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 1rem 1rem;
    padding: .25rem 2rem;
    /* background-color: rgba(31, 27, 27, 0.5); */
    font-weight: bold;
    border-radius: 5rem;
    text-shadow: 0 0 .25rem rgba(0, 0, 0, 0.416);

    color: rgb(45, 45, 45);
}

.content-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    overflow: hidden;
    /* padding: 1rem; */
    margin: 2rem 4rem 0 4rem;
    border-radius: 1rem;
    /* max-height: 40rem; */
    background-image: url(./img/graph_paper_2.jpg);
    background-size: 80rem;
    background-position: center;
    box-shadow: 0 0 .5rem .1rem rgba(0, 0, 0, 0.427);
}

.comm-category {
    flex-direction: column;
    width: 100%;
    background-color: rgba(31, 27, 27, 0.5);
    backdrop-filter: blur(2px);
    /* border-radius: 1rem; */
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.336);
    color: white;
}

.examples-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: -1rem 0 1rem 0;
}

.examples-btn {
    transition: all ease-in-out 200ms;
    cursor: pointer;
    outline: .1rem solid white;
    padding: .25rem 1rem;
    border-radius: 3rem;
    margin: .5rem .5rem;
    font-size: 1rem;
    color: white;
    transform: scale(1);
}

.examples-btn:hover {
    background-color: rgba(0, 0, 0, 0.388);
    transform: scale(1.05);
}

.card-container {
    display: flex;
}

/* Consolidated into main responsive system below */

.commission-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 1rem 1rem;
    width: 100%;
    height: fit-content;
    border-radius: .5rem;
    position: relative;
}

.commission-info {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 8.5rem;
    margin: 0;
    padding: 0 1rem 1rem 1rem;
    box-sizing: border-box;
    justify-content: flex-start;
}

.commission-card video {
    cursor: pointer;
    width: 100%;
    height: 100%;
    border-radius: .5rem;
    object-fit: cover;
    object-position: center;
    position: absolute;
    top: 0;
    left: 0;
}

.commission-card video:hover {
    transform: scale(1.05);
}

/* =============================================================================
   VIDEO RESPONSIVENESS SYSTEM
   Centralized responsive video sizing using CSS custom properties
   ============================================================================= */

/* Subtle shake animation for video container */
@keyframes shake {
    0%   { transform: perspective(700px) translateY(0) translateX(0) scale(1.002) rotateX(0.5deg) rotateY(0.2deg) rotateZ(0deg); }
    10%  { transform: perspective(700px) translateY(-1px) translateX(0.3px) scale(1.0015) rotateX(-0.3deg) rotateY(0.4deg) rotateZ(0.2deg); }
    20%  { transform: perspective(700px) translateY(0.7px) translateX(-0.5px) scale(1.001) rotateX(0.2deg) rotateY(-0.3deg) rotateZ(-0.2deg); }
    30%  { transform: perspective(700px) translateY(-0.5px) translateX(0.5px) scale(1.0008) rotateX(-0.2deg) rotateY(0.2deg) rotateZ(0.1deg); }
    40%  { transform: perspective(700px) translateY(0.3px) translateX(-0.3px) scale(1.0005) rotateX(0.1deg) rotateY(-0.1deg) rotateZ(-0.1deg); }
    50%  { transform: perspective(700px) translateY(-0.2px) translateX(0.2px) scale(1.0002) rotateX(-0.08deg) rotateY(0.08deg) rotateZ(0.05deg); }
    60%  { transform: perspective(700px) translateY(0.1px) translateX(-0.1px) scale(1.0001) rotateX(0.04deg) rotateY(-0.04deg) rotateZ(-0.05deg); }
    70%  { transform: perspective(700px) translateY(-0.05px) translateX(0.05px) scale(1.00005) rotateX(-0.02deg) rotateY(0.02deg) rotateZ(0.02deg); }
    80%  { transform: perspective(700px) translateY(0.02px) translateX(-0.02px) scale(1.00002) rotateX(0.008deg) rotateY(-0.008deg) rotateZ(-0.008deg); }
    90%  { transform: perspective(700px) translateY(0) translateX(0) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
    100% { transform: perspective(700px) translateY(0) translateX(0) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
}

.shake {
    animation: shake 1s ease-in-out;
}

:root {
    /* =============================================================================
       RESPONSIVE BREAKPOINT SYSTEM
       Centralized screen size definitions for consistent responsive design
       ============================================================================= */
    
    /* Breakpoint values - mobile first approach */
    --bp-mobile-sm: 320px;    /* Small mobile phones */
    --bp-mobile: 480px;       /* Standard mobile phones */
    --bp-tablet-sm: 641px;    /* Small tablets */
    --bp-tablet: 837px;       /* Standard tablets and large phones */
    --bp-desktop-sm: 1101px;  /* Small desktop screens */
    --bp-desktop: 1400px;     /* Standard desktop screens */
    --bp-desktop-lg: 1600px;  /* Large desktop screens */
    --bp-desktop-xl: 1920px;  /* Extra large screens */
    
    /* Container max-widths for content */
    --container-mobile: 100%;
    --container-tablet: 90%;
    --container-desktop: 85%;
    --container-desktop-lg: 80%;
    
    /* Video aspect ratio (16:9) */
    --video-aspect-ratio: calc(9 / 16);
    
    /* Video sizing for different breakpoints */
    --video-size-mobile-sm: min(100%, 260px);
    --video-size-mobile: min(95%, 280px);
    --video-size-mobile-lg: min(90%, 300px);
    --video-size-desktop-sm: min(85%, 320px);
    --video-size-desktop-lg: clamp(280px, 25vw, 400px);
    --video-size-desktop-xl: clamp(320px, 22vw, 450px);
    
    /* Spacing system for different screen sizes */
    --spacing-mobile: 0.5rem;
    --spacing-tablet: 0.8rem;
    --spacing-desktop: 1rem;
    --spacing-desktop-lg: 1.2rem;
    
    /* Font scaling for different screen sizes */
    --font-scale-mobile: 0.9;
    --font-scale-tablet: 1;
    --font-scale-desktop: 1.1;
    
    --video-min-height-mobile: 120px;
    --video-min-height-tablet: 140px;
    --video-min-height-desktop: 160px;
    --video-min-height-xl: 180px;
}

/* Base video container - mobile first approach */
.video-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Responsive sizing with consistent aspect ratio */
    width: var(--video-size-mobile);
    height: calc(var(--video-size-mobile) * var(--video-aspect-ratio));
    margin: 0.8rem auto;
    
    /* Visual styling */
    border-radius: .5rem;
    overflow: hidden;
    box-shadow: 0 0 .5rem .15rem rgba(0, 0, 0, 0.1);
    transition: all ease-in-out 200ms;
    min-height: var(--video-min-height-mobile);
}

/* =============================================================================
   CONSOLIDATED RESPONSIVE LAYOUT SYSTEM
   All layout-specific responsive rules organized by breakpoint
   ============================================================================= */

/* Mobile Small: 320px - 480px */
@media (max-width: 480px) {
    /* Global spacing adjustments */
    body {
        font-size: calc(1rem * var(--font-scale-mobile));
    }
    
    /* Commission card adjustments */
    .commission-card {
        margin: 0.5rem 0;
    }
    
    .commission-info {
        height: auto;
        min-height: 6rem;
        padding: 0 0.5rem 0.8rem 0.5rem;
    }
    
    .commission-info h3 {
        font-size: 1.2rem;
        margin-bottom: 0.3rem;
    }
    
    .commission-info h4 {
        font-size: 1rem;
        margin-bottom: 0.2rem;
    }
    
    .commission-info p {
        font-size: 0.85rem;
        margin-bottom: 0.3rem;
    }
    
    /* Radio button adjustments */
    .tier-options {
        margin-top: 0.4rem;
        gap: 0.25rem;
    }
    
    .radio-option {
        padding: 0.35rem 0.5rem;
        font-size: 0.8rem;
    }
    
    .video-container {
        width: var(--video-size-mobile-sm);
        height: calc(var(--video-size-mobile-sm) * var(--video-aspect-ratio));
        min-height: 120px;
        /* Fallback for browsers that don't support calc or custom properties */
        height: 120px;
        margin: 0.5rem auto;
    }
}

/* Mobile Standard & Tablet: 481px - 836px */
@media (min-width: 481px) and (max-width: 836px) {
    header {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0.7rem 0.5rem;
        margin: 1rem 0 0 0;
        border-radius: 1.5rem;
        background-size: 40rem;
        gap: 0.5rem;
        box-shadow: 0 0 .3rem .05rem rgba(0, 0, 0, 0.25);
    }
    
    .nav-logo img {
        width: 6rem;
    }
    
    .nav-btn {
        width: auto;
        min-width: 3.5rem;
        font-size: 0.95rem;
        padding: .18rem .4rem;
        margin: 0 .25rem;
    }
    
    .card-container {
        margin: 1.5rem 0;
        flex-direction: column;
        gap: 1rem;
    }

    .content-body {
        margin: 0.5rem;
        border-radius: 0;
        max-height: unset;
    }
    
    .commission-info {
        height: auto;
        min-height: 7rem;
        padding: 0 0.8rem 1rem 0.8rem;
    }
    
    .tier-options {
        flex-direction: column;
        gap: 0;
        margin-top: 0.5rem;
    }
    
    .radio-option {
        border-radius: 0;
        border-bottom: none;
        padding: 0.4rem 0.6rem;
        font-size: 0.85rem;
    }
    
    .radio-option:first-child {
        border-radius: 0.25rem 0.25rem 0 0;
    }
    
    .radio-option:last-child {
        border-radius: 0 0 0.25rem 0.25rem;
        border-bottom: 1px solid rgba(255, 213, 0, 0.3);
        border-right: 1px solid rgba(255, 213, 0, 0.3);
    }
    
    .radio-option:only-child {
        border-radius: 0.25rem;
        border-bottom: 1px solid rgba(255, 213, 0, 0.3);
    }
    
    /* Directory switcher adjustments */
    .directory-switcher {
        margin: 1.5rem 1rem;
        padding: 1rem;
    }
    
    .directory-buttons {
        gap: 0.75rem;
    }
    
    .directory-btn {
        font-size: 0.85rem;
        padding: 0.4rem 1rem;
    }
}

/* Tablet Large: 837px - 1100px */
@media (min-width: 837px) and (max-width: 1100px) {
    .card-container {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }
    
    .commission-card {
        flex: 1 1 300px;
        max-width: 400px;
        margin: 0.5rem;
    }
    
    .commission-info {
        height: 9rem;
        padding: 0 0.8rem 0.8rem 0.8rem;
    }
    
    .tier-options {
        margin-top: 0.5rem;
        flex-direction: row;
        flex-wrap: nowrap;
    }
    
    .radio-option {
        padding: 0.3rem 0.6rem;
        font-size: 0.85rem;
    }
    
    .video-container {
        min-height: var(--video-min-height-tablet);
    }
}

/* Desktop: 1101px+ */
@media (min-width: 1101px) {
    body {
        font-size: calc(1rem * var(--font-scale-desktop));
    }
    
    .tier-options {
        flex-direction: row;
        flex-wrap: nowrap;
    }
    
    .video-container {
        min-height: var(--video-min-height-desktop);
    }
}

.video-container:hover {
    transform: scale(1.05);
}

/* Video fallback overlay for missing videos */
.video-fallback-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: .5rem;
    cursor: pointer;
    z-index: 2;
}



.video-fullview {
    transition: all ease-in-out 300ms;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background-color: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(15px);
    opacity: 0;
    pointer-events: none;
}

.set-active {
    opacity: 100%;
    pointer-events: all;
}

/* =============================================================================
   RESPONSIVE BREAKPOINTS - MOBILE FIRST APPROACH
   Organized by screen size with consistent naming and spacing
   ============================================================================= */

/* Mobile Small: 320px - 480px */
@media (max-width: 480px) {
    .video-container {
        width: var(--video-size-mobile-sm);
        aspect-ratio: 16/9;
        min-height: 120px;
        margin: 0.5rem auto;
    }
    
    .commission-card {
        margin: 0;
        width: var(--container-mobile);
    }
}

/* Mobile Standard: 481px - 640px */
@media (min-width: 481px) and (max-width: 640px) {
    .video-container {
        width: var(--video-size-mobile);
        aspect-ratio: 16/9;
        min-height: var(--video-min-height-mobile);
        margin: var(--spacing-mobile) auto;
    }
    
    .commission-card {
        margin: 0;
        width: var(--container-mobile);
    }
}

/* Tablet Small: 641px - 836px */
@media (min-width: 641px) and (max-width: 836px) {
    .video-container {
        width: var(--video-size-mobile-lg);
        aspect-ratio: 16/9;
        min-height: var(--video-min-height-tablet);
        margin: var(--spacing-tablet) auto;
    }
    
    .commission-card {
        margin: 0;
        width: var(--container-tablet);
    }
}

/* Tablet Standard: 837px - 1100px */
@media (min-width: 837px) and (max-width: 1100px) {
    .video-container {
        width: var(--video-size-desktop-sm);
        aspect-ratio: 16/9;
        min-height: var(--video-min-height-tablet);
        margin: var(--spacing-desktop) auto;
    }
}

/* =============================================================================
   VIDEO RESPONSIVENESS SYSTEM
   Centralized responsive video sizing using CSS custom properties
   ============================================================================= */

.video-fullview video {
    width: 100%;
    border-radius: 1rem;
    box-shadow: 0 0 1rem .15rem black;
}

#closePlayerBtn {
    transition: all ease-in-out 200ms;
    cursor: pointer;
    display: flex;
    position: absolute;
    background: transparent;
    border: none;
    width: 4rem;
    height: 4rem;
    right: 1rem;
    top: 1rem;
    transform: scale(1);
    z-index: 9999;
}

#closePlayerBtn:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 0 .15rem rgb(255, 0, 85));
}

#closePlaterBtn img {
    width: 100%;
    height: 100%;
}

/* UTILITY CLASSES */

.color-white {
    color: white;
}

.flex {
    display: flex;

}

.w-full {
    width: 100%;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-col {
    flex-direction: column;
}

.pos-rel {
    position: relative;
}

.hidden {
    display: none;
}

.note {
    font-style: italic;
    opacity: 70%;
}

.text-center {
    text-align: center;
}

.col-orange {
    color: rgb(255, 213, 0);
}

.col-red {
    color: rgb(255, 0, 81);
}

.m-2 {
    margin: 1rem;
}







#ageVerificationOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(34, 15, 20, 0.95);
    /* Semi-transparent black overlay */
    display: flex;
    /* Centers the popup */
    justify-content: center;
    align-items: center;
    z-index: 9999;
    backdrop-filter: blur(25px);
    /* Ensures it's on top of other content */
}

#ageVerificationPopup {
    background-color: #323232;
    padding: 30px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.199);
}

#ageVerificationPopup h2 {
    margin-bottom: 20px;
    color: #d5d5d5;
}

#ageVerificationPopup button {
    padding: 10px 20px;
    margin: 0 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

#ageYesButton {
    transition: all ease-in-out 200ms;
    background-color: #51c646;
    /* Green for Yes */
    color: white;
    border-radius: 2rem !important;
    filter: drop-shadow(0 0 .5rem rgba(0, 255, 98, 0.5));
}

#ageYesButton:hover {
    
    filter: drop-shadow(0 0 .5rem rgb(0, 255, 98));
}

#ageNoButton {
    transition: all ease-in-out 200ms;
    background-color: #dc3545;
    /* Red for No */
    color: white;
    border-radius: 2rem !important;
    filter: drop-shadow(0 0 .5rem rgba(255, 0, 111, 0.50));
}

#ageNoButton:hover {
    
    filter: drop-shadow(0 0 .5rem rgba(255, 0, 111, 1));
}

/* Tier Options Radio Buttons */
.tier-options {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0;
    justify-content: flex-start;
}

/* Ensure horizontal layout on large screens */
/* Desktop Small: 1101px - 1399px */
@media (min-width: 1101px) and (max-width: 1399px) {
    .tier-options {
        flex-direction: row;
        flex-wrap: nowrap;
    }
    
    .video-container {
        width: var(--video-size-desktop-lg);
        height: calc(var(--video-size-desktop-lg) * var(--video-aspect-ratio));
        margin: var(--spacing-desktop) auto;
    }
}

/* Desktop Standard: 1400px - 1599px */
@media (min-width: 1400px) and (max-width: 1599px) {
    .tier-options {
        flex-direction: row;
        flex-wrap: nowrap;
    }
    
    .video-container {
        width: var(--video-size-desktop-lg);
        height: calc(var(--video-size-desktop-lg) * var(--video-aspect-ratio));
        margin: var(--spacing-desktop-lg) auto;
    }
}

/* Desktop Large: 1600px+ */
@media (min-width: 1600px) {
    .tier-options {
        flex-direction: row;
        flex-wrap: nowrap;
    }
    
    .video-container {
        width: var(--video-size-desktop-xl);
        aspect-ratio: 16/9;
        min-height: var(--video-min-height-xl);
        margin: var(--spacing-desktop-lg) auto;
        max-width: 1100px;
    }
}

.radio-option {
    display: flex;
    align-items: center;
    opacity: 0.8;
    transition: all ease-in-out 200ms;
    padding: 0.4rem 0.8rem;
    cursor: pointer;
    background-color: rgba(31, 27, 27, 0.4);
    border: 1px solid rgba(255, 213, 0, 0.3);
    border-right: none;
    white-space: nowrap;
}

.radio-option:first-child {
    border-radius: 0.25rem 0 0 0.25rem;
}

.radio-option:last-child {
    border-radius: 0 0.25rem 0.25rem 0;
    border-right: 1px solid rgba(255, 213, 0, 0.3);
}

.radio-option:only-child {
    border-radius: 0.25rem;
    border-right: 1px solid rgba(255, 213, 0, 0.3);
}

.radio-option input[type="radio"] {
    display: none;
}

.radio-option label {
    color: rgb(255, 213, 0);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all ease-in-out 200ms;
    user-select: none;
}

.radio-option:hover {
    opacity: 1;
    background-color: rgba(255, 213, 0, 0.15);
    border-color: rgba(255, 213, 0, 0.5);
}

.radio-option input[type="radio"]:checked + label {
    color: rgb(255, 213, 0);
    font-weight: 500;
}

.radio-option:has(input[type="radio"]:checked) {
    background-color: rgba(255, 213, 0, 0.3);
    border-color: rgb(255, 213, 0);
    opacity: 1;
    z-index: 1;
    position: relative;
}

/* Disabled radio options (when variant doesn't exist) */
.radio-option.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: rgba(31, 27, 27, 0.3);
    border-color: rgba(255, 213, 0, 0.2);
}

.radio-option.disabled label {
    color: rgba(255, 213, 0, 0.6);
    cursor: not-allowed;
}

.radio-option.disabled:hover {
    opacity: 0.6;
    background-color: rgba(31, 27, 27, 0.3);
    border-color: rgba(255, 213, 0, 0.2);
    transform: none;
}

/* Hidden radio options (legacy - kept for compatibility) */
.radio-option.hidden {
    display: none;
}

/* Tablet responsive adjustments */
@media (max-width: 1100px) and (min-width: 837px) {
    .commission-info {
        height: 9rem;
        padding: 0 0.8rem 0.8rem 0.8rem;
    }
    
    .tier-options {
        margin-top: 0.5rem;
        flex-direction: row;
        flex-wrap: nowrap;
    }
    
    .radio-option {
        padding: 0.3rem 0.6rem;
    }
    
    .radio-option label {
        font-size: 0.8rem;
    }
}

/* Consolidated into main responsive system above */

/* Consolidated into main responsive system above */

/* Directory Switcher Styles */
.directory-switcher {
    margin: 2rem auto;
    padding: 1.5rem;
    background-color: rgba(31, 27, 27, 0.3);
    backdrop-filter: blur(2px);
    border-radius: 0.75rem;
    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.3);
    text-align: center;
    max-width: 600px;
    min-width: 320px;
    width: 100%;
    box-sizing: border-box;
}

.directory-switcher h4 {
    color: white;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    opacity: 0.9;
}

.directory-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.directory-btn {
    transition: all ease-in-out 200ms;
    cursor: pointer;
    outline: 0.1rem solid rgba(255, 213, 0, 0.6);
    background-color: rgba(255, 213, 0, 0.15);
    border: none;
    border-radius: 1.5rem;
    padding: 0.5rem 1.2rem;
    font-size: 0.9rem;
    color: rgb(255, 213, 0);
    transform: scale(1);
    backdrop-filter: blur(2px);
    white-space: nowrap;
    min-height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.directory-btn:hover {
    background-color: rgba(255, 213, 0, 0.25);
    transform: scale(1.05);
    outline-color: rgb(255, 213, 0);
    box-shadow: 0 0 0.25rem rgba(255, 213, 0, 0.4);
}

.directory-btn.active {
    background-color: rgba(255, 213, 0, 0.4);
    outline-color: rgb(255, 213, 0);
    box-shadow: 0 0 0.5rem rgba(255, 213, 0, 0.6);
    font-weight: 500;
}

/* Directory menu grid styles */
.directory-menu-grid {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 0.5rem);
    transform: translateX(-50%);
    min-width: max(220px, 100%);
    background: rgba(72,66,68,0.98);
    border-radius: 1rem;
    box-shadow: 0 2px 16px 0 rgba(0,0,0,0.18);
    z-index: 100;
    padding: 0.6rem 0.8rem;
    margin: 0;
    display: none;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    max-width: 420px;
    width: max-content;
    flex-direction: row;
}

.directory-menu-option {
    padding: 0.6rem 1.3rem;
    cursor: pointer;
    text-align: center;
    color: #fff;
    font-size: 1.08rem;
    transition: background 180ms, color 180ms;
    border-radius: 0.75rem;
    border: none;
    background: none;
    font-family: 'Segoe UI', sans-serif;
}

.directory-menu-option.selected,
.directory-menu-option[aria-selected="true"] {
    color: rgb(255,213,0);
    font-weight: bold;
    background: rgba(255,213,0,0.13);
    box-shadow: 0 0 0.25rem rgba(255,213,0,0.18);
    outline: 2px solid rgba(255,213,0,0.25);
}

.directory-menu-option:hover {
    background: rgba(255,213,0,0.13);
    color: rgb(72, 66, 68);
}

.directory-menu-wrapper {
    position: relative;
    display: inline-block;
}

@media (max-width: 836px) {
    header {
        border-radius: 0;
    }
}

@media (max-width: 836px) {
    header {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0.7rem 0.5rem;
        margin: 1rem 0 0 0;
        border-radius: 0rem;
        background-size: 40rem;
        gap: 0.5rem;
        box-shadow: 0 0 .3rem .05rem rgba(0, 0, 0, 0.25);
    }
    
    .nav-logo img {
        width: 6rem;
    }
    
    .nav-btn {
        width: auto;
        min-width: 3.5rem;
        font-size: 0.95rem;
        padding: .18rem .4rem;
        margin: 0 .25rem;
    }
    
    .card-container {
        margin: 1.5rem 0;
        flex-direction: column;
        gap: 1rem;
    }

    .content-body {
        margin: 2rem 0 2rem 0rem;
        /* padding-bottom: 2rem; */
        border-radius: 0;
        max-height: unset;
    }
    
    .commission-info {
        height: auto;
        min-height: 7rem;
        padding: 0 0.8rem 1rem 0.8rem;
    }
    
    .tier-options {
        flex-direction: column;
        gap: 0;
        margin-top: 0.5rem;
    }
    
    .radio-option {
        border-radius: 0;
        border-bottom: none;
        padding: 0.4rem 0.6rem;
        font-size: 0.85rem;
    }
    
    .radio-option:first-child {
        border-radius: 0.25rem 0.25rem 0 0;
    }
    
    .radio-option:last-child {
        border-radius: 0 0 0.25rem 0.25rem;
        border-bottom: 1px solid rgba(255, 213, 0, 0.3);
        border-right: 1px solid rgba(255, 213, 0, 0.3);
    }
    
    .radio-option:only-child {
        border-radius: 0.25rem;
        border-bottom: 1px solid rgba(255, 213, 0, 0.3);
    }
    
    /* Directory switcher adjustments */
    .directory-switcher {
        margin: 1.5rem 1rem;
        padding: 1rem;
    }
    
    .directory-buttons {
        gap: 0.75rem;
    }
    
    .directory-btn {
        font-size: 0.85rem;
        padding: 0.4rem 1rem;
    }
}

/* Fullscreen preview rotate button for mobile */
.fullscreen-rotate-btn {
    position: absolute;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 10;
    background: rgba(72, 66, 68, 0.7);
    border: none;
    border-radius: 50%;
    box-shadow: 0 0 .5rem .1rem rgba(0,0,0,0.427);
    padding: 0.7rem;
    cursor: pointer;
    transition: transform 0.2s ease-in-out, background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fullscreen-rotate-btn img.rotate-icon {
    width: 2rem;
    height: 2rem;
    pointer-events: none;
}

@media (max-width: 836px) {
    .fullscreen-rotate-btn {
        right: 1rem;
        bottom: 1rem;
        padding: 0.5rem;
    }
    .fullscreen-rotate-btn img.rotate-icon {
        width: 1.5rem;
        height: 1.5rem;
    }
}

.fullscreen-modal-content video.rotated,
#imagePreview.rotated {
    transition: transform 350ms cubic-bezier(.4,0,.2,1);
    transform: rotate(90deg);
}
.fullscreen-modal-content video,
#imagePreview {
    transition: transform 350ms cubic-bezier(.4,0,.2,1);
}

/* Add to the end of styles.css */

/* Animated rotation for fullscreen preview */
#fullscreenPreview.rotated,
#imagePreview.rotated {
    transform: rotate(90deg) scale(1.25);
    transition: transform 0.2s ease-in-out;
    max-width: 100vw;
    max-height: 100vh;
    width: auto;
    height: auto;
    object-fit: contain;
    left: 50%;
    top: 50%;
    position: absolute;
    translate: -50% -50%;
}
#fullscreenPreview,
#imagePreview {
    transition: transform 0.2s ease-in-out;
    transform: none;
    max-width: 100vw;
    max-height: 100vh;
    width: auto;
    height: auto;
    object-fit: contain;
    left: 50%;
    top: 50%;
    position: absolute;
    translate: -50% -50%;
}

/* Improved centering and scaling for rotated preview using flexbox container */
.fullscreen-modal-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    background: rgba(72, 66, 68, 0.85);
    z-index: 1000;
}
#fullscreenPreview,
#imagePreview {
    max-width: 90vw;
    max-height: 90vh;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.2s ease-in-out;
    position: relative;
    left: unset;
    top: unset;
    translate: unset;
}
#fullscreenPreview.rotated,
#imagePreview.rotated {
    transform: rotate(90deg) scale(1.25);
    max-width: 90vh;
    max-height: 90vw;
}

/* Directory switcher adjustments */
@media (max-width: 836px) {
    .directory-switcher {
        width: 100vw !important;
        left: 0;
        margin-left: 0 !important;
        border-radius: 0 !important;
    }
}