/* --- Base & Theming --- */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap'); /* Cyberpunk-style font */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400&display=swap');

:root
{
    --bg-color: #0a0a0f; /* Very dark blue/black */
    --primary-color: #9400d3; /* Dark Violet */
    --secondary-color: #ff00ff; /* Magenta/Neon Pink */
    --glow-color: rgba(148, 0, 211, 0.7);
    --text-color: #e0e0e0;
    --text-glow: #f0f0f0;
}

*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html
{
    font-size: 16px;
    scroll-behavior: smooth;
    overscroll-behavior-y: none;
}
body
{
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Orbitron', "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Apple SD Gothic Neo", sans-serif; /* Apply cyberpunk font */
    overflow-x: hidden; /* Prevent horizontal scroll */
    position: relative; /* Needed for absolute positioning of slideshow */
    min-height: 100vh;
    overscroll-behavior-y: none;
}
.lang2
{
font-family: 'Space Grotesk', "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Apple SD Gothic Neo", sans-serif;
}
/* --- Background Slideshow --- */
#slideshow-container
{
    position: fixed; /* Fixed position to stay in background */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1; /* Behind content */
    perspective: 1000px; /* Enable 3D space for children */
    background: radial-gradient(circle, rgba(40, 5, 60, 0.3) 0%, var(--bg-color) 70%);
}

#slideshow-container .media-item
{
    position: absolute;
    /* Let the container size itself based on content, up to a max */
    display: inline-block; /* Makes the div shrink-wrap its content */
    width: auto;
    height: auto;
    /*
    max-width: 35vw;
    max-height: 45vh;
    */
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0; /* Start invisible */
    /* Transition opacity and the frame properties */
    transition: opacity 1.9s ease-in-out, border 0.5s ease-in-out, box-shadow 0.5s ease-in-out, transform 0.3s ease-out; /* Add transform transition here too if using inactive class */
    will-change: transform, opacity, border, box-shadow, width, height; /* Hint browser */
    /* Remove any explicit width/height that might have been here */
}

#slideshow-container .media-item img,
#slideshow-container .media-item video
{
    display: block; /* Keep block display */
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    vertical-align: bottom; /* <<< ADD THIS LINE */
    /* object-fit: cover; */ /* Should be removed/commented out */
}

/* Style for when content IS loaded */
#slideshow-container .media-item.loaded
{
    border: 1px solid var(--secondary-color);
    box-shadow: 0 0 5px var(--secondary-color),
        0 0 10px var(--secondary-color),
        0 0 15px var(--glow-color);
    /* Opacity will be set by JS to trigger fade-in */
}


#slideshow-container .media-item img,
#slideshow-container .media-item video
{
    display: block; /* Prevents extra space below inline images */
    /* Let the media define its own size, constrained by the container */
    width: auto;
    height: auto;
    /* Ensure media scales down proportionally if it exceeds container's max size */
    max-width: 25vw;  /* << SET Default Max Width for inner element */
    max-height: 35vh; /* << SET Default Max Height for inner element */
    min-width: 120px;
    min-height: 120px;
    /* Remove object-fit as we want natural aspect ratio */
    /* object-fit: cover; */
    /* Ensure no explicit width: 100%; height: 100%; */
}

/* Optional: Add inactive style if you implemented it */
.media-item.inactive
{ /* If you use this for DJ focus */
    opacity: 0.3 !important; /* Lower opacity further */
    transform: scale(0.9);
    z-index: -1; /* Send further back */
}

.media-item.playback-failed
{ /* Keep styles for failed items */
    border: none !important;
    box-shadow: none !important;
    opacity: 0.0 !important; /* Make them very faint */
}


/* --- Content Overlay --- */
#content-overlay
{
    position: relative; /* Sit on top of the fixed slideshow */
    z-index: 1;
    padding: 20px;
    padding-top: 10px;
    min-height: 78vh; /* was 100 % */
    display: flex;
    flex-direction: column;
}

header
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--primary-color);
    margin-bottom: 30px;
}

main
{
    /*flex-grow: 1; */
}

footer
{
    text-align: center;
    margin-top: 10px;
    /*padding-top: 20px;*/
    border-top: 1px solid var(--primary-color);
    font-size: 0.8rem;
    color: #aaa;
    /*
    z-index: 1;
    position: relative;
    */
}

/* --- Neon Text Effect --- */
.neon-text
{
    font-family: 'Orbitron', "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Apple SD Gothic Neo", sans-serif;
    color: var(--text-glow);
    position: relative; /* Needed for pseudo-element */
    text-shadow:
        0 0 5px var(--secondary-color),
        0 0 10px var(--secondary-color),
        0 0 20px var(--secondary-color),
        0 0 40px var(--glow-color),
        0 0 80px var(--glow-color);
    animation: flicker 3s infinite alternate;
}

/* Optional: Add subtle flicker */
@keyframes flicker
{
    0%, 18%, 22%, 25%, 53%, 57%, 100%
    {
        text-shadow:
            0 0 4px var(--secondary-color),
            0 0 11px var(--secondary-color),
            0 0 19px var(--secondary-color),
            0 0 40px var(--glow-color),
            0 0 80px var(--glow-color);
        opacity: 1;
    }
    20%, 24%, 55%
    {
        text-shadow: none;
        opacity: 0.8;
    }
}


/* --- Section Titles --- */
.section-title
{
    text-align: center;
    margin-bottom: 30px;
    font-size: 2rem;
}

/* --- DJ List and Boxes (Replaces Table) --- */
/*
.dj-list
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    align-items: start;
}
*/
.dj-list
{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); /* Or your min width, e.g., 400px */
    gap: 30px;
    align-items: start;
}

/*
.dj-box {
    background: rgba(15, 15, 25, 0.7); /* Dark translucent background * /
    border: 2px solid var(--primary-color);
    padding: 20px;
    border-radius: 8px;
    backdrop-filter: blur(5px); /* Frosted glass effect * /
    -webkit-backdrop-filter: blur(5px);
    box-shadow: 0 0 10px var(--glow-color), inset 0 0 5px rgba(148, 0, 211, 0.5);
    position: relative; /* For absolute positioning of drawer * /
    overflow: hidden; /* Hide overflowing drawer * /
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
*/
.dj-box:hover
{
    /* Slight lift on hover - enhance interaction in JS */
}

.dj-profile-image-container
{
    width: 80px;
    height: 80px;
    margin-right: 8px;
    border-radius: 50%; /* Circular image */
    overflow: hidden;
    border: 2px solid var(--secondary-color);
    box-shadow: 0 0 8px var(--secondary-color);
    float: left; /* Position image to the left */
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dj-profile-image-container img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Pop-out effect for image */
.dj-profile-image-container.active
{
    transform: scale(1.2) translateZ(20px); /* Pop out */
    box-shadow: 0 0 15px var(--secondary-color), 0 0 25px var(--glow-color);
    z-index: 15; /* Bring image above drawer */
}

/* Add to your <style> block or CSS file */

/* Class to hide non-focused DJ boxes */
.dj-box.hidden
{
    display: none;
    /* Optionally add transition for fade out before display none */
    /* opacity: 0; */
    /* transition: opacity 0.3s ease-out; */
}

/* Style for the back button inside the drawer */
.dj-mini-drawer .back-button
{
    display: none; /* Hidden by default */
    margin-top: 15px;
    padding: 6px 12px;
    font-size: 0.8rem;
    background-color: #666; /* Example style */
    color: #eee;
    border: 1px solid #888;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.dj-mini-drawer .back-button:hover
{
    background-color: #888;
}

/* Show back button only when the parent DJ box is focused */
.dj-box.focused .dj-mini-drawer .back-button
{
     display: inline-block;
}
/*
.dj-info
{
    min-height:60px;
}
*/
.dj-info
{
overflow: hidden;
}
/* .dj-info,  */
dj-dj-title
{
max-width:200px;
}
.dj-genre
{
max-width:250px;
}

.club .dj-info
{
max-width:270px; /*246px */
margin-bottom:18px;
display:block;
}
.club .dj-name, .club .dj-name2
{
max-width:260px;
}
.move-right 
{
    text-align: left; /* Align text within the paragraph to the right */
    margin-top: 10px; /* Add space above */
    margin-bottom: 5px;
    /* Optional: If using Flexbox on .dj-info, use align-self */
    /* align-self: flex-end; */
    /* ---> END ADD <--- */
}
.move-left 
{
  position: absolute;
  top: 102px;
  left: 6px;
  z-index:15;
  display:block;
  font-size: 0.65em;
  line-height: 1.9em;
  color:#bbb;
  text-align: left;
  width:86px;
}
.distance
{
position: absolute;
top: calc(100% - 18px);
color:white;
text-align: right;
right:8px;
font-size: 0.8em;
}
.dj-box.club
{
    min-height:137px !important;
}
.dj-box.club.extra
{
    min-height:152px !important;
}
.dj-name, .dj-name2
{
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--text-glow);
    margin-bottom: 2px;
    display: block; /* Ensure it takes its own line */
}
.club .dj-name
{
    font-size: 1.3rem;
}
.dj-name2
{
    font-size: 1.1rem;
}
.club .favorite-star
{
    top: 6px; /* Align with video button vertically */
    right: 7px; /* Approx: 12px (video offset) + 30px (video width) + 10px (gap) */
    width: 22px; /* Button size */
    height: 22px;
}
.dj-genre
     {
        font-size: 0.8rem;
        color: var(--text-glow);
    	margin-bottom: 10px;
    	display: block;
    	opacity: 0.7;
    }
.dj-dj-title
{
        font-size: 0.8rem;
        color: var(--text-glow);
    	margin-bottom: 13px;
    	margin-top: 17px;
    	display: block;
    	opacity: 0.6;
}
/*
.dj-links
{
padding-bottom:8px;
}
*/
.thelinks.djane
{
margin-top:-10px;
margin-bottom:-14px;
}
.dj-box.drawer-visible .dj-mini-drawer
{
padding-bottom:12px;
}
.dj-links a
{
    color: var(--secondary-color);
    text-decoration: none;
    margin-right: 10px;
    font-size: 0.9rem;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.dj-links a:hover
{
    color: var(--text-glow);
    text-shadow: 0 0 5px var(--text-glow);
}

/* DJ Box Base Styles */
.dj-box
{
    position: relative; /* Still needed */
    /* overflow: hidden; */ /* Keep this ONLY IF other content might overflow, otherwise removing it might be simpler for positioning below */
    background: rgba(15, 15, 25, 0.75);
    border: 2px solid var(--primary-color);
    padding: 20px; /* Uniform padding initially */
    padding-bottom: 0px;
    padding-left: 16px;
    border-radius: 8px;
    min-width: 360px;
    backdrop-filter: blur(5px);
    box-shadow: 0 0 10px var(--glow-color), inset 0 0 5px rgba(148, 0, 211, 0.5);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /*transition: transform 0.3s ease,
                box-shadow 0.3s ease,
                padding-bottom 0.4s ease-out;*/ /* Animate padding change */
     z-index: 1;
}

dj-box.is-new
{
}
dj-box.is-updated
{
}

.details-banner
{
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: red;
    color: white;
    padding: 3px 5px; /* Adjust padding: vertical, horizontal */
    font-size: 0.6em;  /* Small font size */
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    z-index: 5; /* Above profile image but below drawer/buttons if they overlap */

    transform-origin: 0 0; /* Rotate around the top-left corner */
    transform: rotate(-45deg) translate(-18px, 5px); /* Adjust X and Y translate values */
                                                    /* X: negative pulls it left */
                                                    /* Y: positive pushes it down slightly */
    width: 50px; /* Give it a fixed width to control the banner length */
}

.dj-new-banner, .dj-updated-banner {
    position: absolute;
    top: 4px; /* Position at the top */
    left: 0;  /* Position at the left */
    background-color: red;
    color: white;
    padding: 3px 5px; /* Adjust padding: vertical, horizontal */
    font-size: 0.6em;  /* Small font size */
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    z-index: 5; /* Above profile image but below drawer/buttons if they overlap */

    /* --- Rotation and Positioning for "Cut-off" Effect --- */
    /* Rotate it -45 degrees */
    transform-origin: 0 0; /* Rotate around the top-left corner */
    transform: rotate(-45deg) translate(-18px, 5px); /* Adjust X and Y translate values */
                                                    /* X: negative pulls it left */
                                                    /* Y: positive pushes it down slightly */
    width: 50px; /* Give it a fixed width to control the banner length */
}
.dj-updated-banner
{
width: 70px;
top: 16px;
left: -6px;
}

/* Optional: Adjust banner position slightly for smaller screens if needed */
@media only screen and (max-width: 480px) {
.dj-new-banner, .dj-updated-banner {
font-size: 0.6em;
padding: 2px 3px;
transform: rotate(-45deg) translate(-15px, 3px);
width: 40px;
}
    
.dj-updated-banner
{
width: 50px;
top: 10px;
left: -2px;
}
}

.dj-box.event
{
padding-bottom:10px !important;
}

/* Mini Drawer Styles */
.dj-mini-drawer
{
    position: absolute;
    /* ---> Position at the bottom of the PARENT's padding box <--- */
    top: 100%;
    left: 0;
    width: 100%; /* Take full width of parent */
    box-sizing: border-box;

    background: rgba(30, 0, 50, 0.9);
    
    /*
    border: 1px solid var(--primary-color);
    box-shadow: 0 0 10px var(--glow-color), inset 0 0 5px rgba(148, 0, 211, 0.5);
    */
    /*border-top:0px;*/
    /*border-top: 1px solid var(--secondary-color); */
    /*padding: 15px 20px; */ /* Inner padding for drawer content */
    padding-left: 15px;
    z-index: 5; /* Below active image */
    border-radius: 0 0 8px 8px; /* Round bottom corners */

    /* ---> Transition opacity (fade effect) <--- */
    /* Optional delay ensures padding animates first */
    transition: opacity 0.3s ease-out 0.1s;

    /* Remove max-height and transform styles */
    max-height: 0;
    overflow: hidden;

    /* ---> Transition max-height for smooth reveal <--- */
    transition: max-height 0.4s ease-out; /* Adjust timing/easing as desired */
    transition: border 0.4s ease-out 0.1s;
    transition: box-shadow 0.4s ease-out 0.1s;
    
    

    /* Ensure no leftover transform/opacity styles */
    transform: none;
    opacity: 1; /* Make sure content is opaque */
    pointer-events: none; /* Disable interaction when hidden */

}
.dj-box.superactive .dj-mini-drawer
{
    background: rgba(30, 0, 50, 0.6);
}

.dj-box.drawer-visible {
    /* ---> ADD: Higher z-index to bring active box forward <--- */
    z-index: 10; /* Or any value higher than the base z-index */
    border-bottom:0px;
}

/* Reveal Drawer when Parent is Visible */
.dj-box.drawer-visible .dj-mini-drawer
{

    border: 1px solid var(--primary-color);
    box-shadow: 0 0 10px var(--glow-color), inset 0 0 5px rgba(148, 0, 211, 0.5);
    
    /* ---> Fade in <--- */
    /*opacity: 1;*/
    max-height: 500px;
    pointer-events: auto; /* Allow interaction */
    border-top: 1px solid var(--secondary-color);
    /*z-index: 10;*/
    
    
}

/* Ensure Profile Image Stays on Top */
.dj-profile-image-container.active
{
    z-index: 11; /* Higher than drawer */
}

.dj-mini-drawer h4
{
    margin-bottom: 8px;
    color: var(--text-glow);
}

/* --- Mute Button --- */
#mute-button, #mute-button2
{
  /* Use the cyberpunk button library classes */
  /* Adjust positioning as needed */
  font-size: 0.8rem; /* Make it slightly smaller than title */
}

#mute-button2
{
display:none;
}

/* --- Photobook Modal Specific Styles --- */
#dj-photobook-modal
{
  min-width:99vw;
}
#dj-photobook-modal .modal-content {
    max-width: 99vw; /* Allow wider modal for images */
    max-height: 99vh;
    min-width:90vw;
    width: auto; /* Allow width to be determined by content up to max-width */
    padding: 20px; /* Adjust padding */
}
#dj-photobook-modal h2 {
    margin-bottom: 15px; /* Less margin below title */
}

/* --- Swiper Container Styles --- */
#photobook-swiper-container, #details-swiper-container
{
    width: 100%;
    /* Height needs to be calculated or set based on content/aspect ratio */
    /* Example: calculate based on viewport width for landscape-ish */
     height: 60vh; /* Adjust this height */
    max-height: 500px; /* Max pixel height */
    margin: 0 auto; /* Center swiper */
    background-color: #000; /* Black background for images */
    border-radius: 5px;
}

#details-swiper-container
{
margin-top: 30px;
}

.swiper-wrapper {
     /* Align items vertically if needed */
     align-items: center;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #000;

    /* Center slide content vertically */
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: auto; /* Let height control */
    height: auto; /* Let height control */
    max-width: 100%; /* Prevent exceeding slide width */
    max-height: 100%; /* Prevent exceeding slide height */
    object-fit: contain; /* Fit entire image within slide area */
}

/* Style Swiper Navigation Arrows (make them visible on dark bg) */
.swiper-button-prev,
.swiper-button-next {
    color: var(--secondary-color) !important; /* Neon pink arrows */
    --swiper-navigation-size: 30px; /* Adjust size */
    filter: drop-shadow(0 0 3px black);
}
.swiper-button-prev:after,
.swiper-button-next:after {
     font-weight: bold;
}

/* Style Swiper Pagination Bullets */
.swiper-pagination-bullet {
    background: var(--secondary-color) !important; /* Neon pink inactive bullet */
    opacity: 0.6 !important;
}

.swiper-pagination-bullet-active {
    background: var(--primary-color) !important; /* Dark violet active bullet */
     opacity: 1 !important;
}

#photobook-status, #details-photobook-status
{ /* Style loading/error messages */
    margin-top: 15px;
    text-align: center;
}


.dj-box
{
    /* animation: laser-scan 5s infinite alternate ease-in-out; */ /* Optional: Add subtle pulse */
}



/* Add more complex animations for slideshow elements in JS */


#laser-overlay
{
    position: fixed; /* Or absolute if body is relative */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-border-radius:10px;
    z-index: 25; /* Adjust based on your content overlay z-index */
    pointer-events: none; /* Allows clicks to pass through */
    /* background-color: rgba(0, 255, 0, 0.05); /* Optional: for debugging canvas area */
}

#flash-overlay
{
    position: fixed; /* Cover the entire viewport */
    top: 0;
    left: 0;
    width: 100vw; /* Use viewport units */
    height: 100vh;
    /* Flash color: Bright white, high opacity */
    background-color: rgba(235, 235, 255, 0.9); /* Slightly bluish white */
    opacity: 0; /* Start fully transparent / hidden */
    z-index: 999; /* Ensure it's on top of everything else */
    pointer-events: none; /* Allow clicks/mouse events to pass through */
    /* Transition only affects the fade-out */
    transition: opacity 0.1s ease-out;
}

#flash-overlay.active
{
    opacity: 1; /* Become fully opaque instantly */
    transition: none; /* No transition for the flash appearing */
}

/*
.media-item video::-webkit-media-controls-play-button {
    display: none !important;
    -webkit-appearance: none !important;
}
*/

video::-webkit-media-controls-overlay-play-button
{
   display: none;
}

*::-webkit-media-controls-panel
{
    display: none!important;
    -webkit-appearance: none;
}

*::--webkit-media-controls-play-button
{
    display: none!important;
    -webkit-appearance: none;
}

*::-webkit-media-controls-start-playback-button
{
    display: none!important;
    -webkit-appearance: none;
}

#logo-container
{
    position: fixed; /* Cover viewport */
    inset: 0; /* Shortcut for top/right/bottom/left = 0 */
    z-index: -0.5; /* Place it behind canvas/flash but above slideshow bg */
    pointer-events: none; /* Allow clicks to pass through */
    overflow: hidden; /* Hide logos when they go fully off-screen */
}

#logo-container img
{
    position: absolute; /* Allow positioning */
    display: block;
    max-width: 80px; /* Adjust max logo size */
    height: auto;    /* Maintain aspect ratio */
    opacity: 0;      /* Start invisible, fade in via JS maybe */
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3)); /* Optional subtle glow */
    will-change: transform, opacity; /* Performance hint */
    border: none;    /* Ensure no border */
    transition: opacity 0.6s ease-in-out; /* For fading */
}

.club_address
{
color:#04DFFE;
font-size: 0.8em;
}
.dj_address
{
color:#E1E4E6;
font-size: 0.7em;
}
.dj_followers tr td 
{
color:#E1E4E6;
font-size: 0.7em;
}
.dj_followers tr td + td
{
padding-left:14px;
}
.dj_news
{
color:#E1E4E6;
font-size: 0.7em;
}
.dj_news a
{
  color: var(--secondary-color);
  text-decoration: none;
  margin-right: 10px;
  font-size: 0.9rem;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* === Simplified Neon Border Button === */
.cybr-btn
{
    /* Positioning & Box Model */
    position: relative; /* Needed for the pseudo-element border */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0.7rem 1.4rem; /* Slightly adjusted padding */
    border: none;
    outline: none;
    box-sizing: border-box;
    min-height: 35px;
    min-width: 120px;
    z-index: 1; /* Keep button content above pseudo-element */
    overflow: visible; /* Allow pseudo-element glow to show */

    /* Text & Appearance */
    font-family: 'Orbitron', "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Apple SD Gothic Neo", sans-serif; /* Keep cyberpunk font */
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.8px; /* Slightly more spacing */
    cursor: pointer;

    /* --- Color Variables (Default/Primary State) --- */
    --btn-bg-color: #1a1a1a; /* Dark background */
    --btn-text-color: #e0e0e0; /* Light text */
    --btn-neon-color: rgba(50, 255, 50, 0.9); /* Neon Green */
    --btn-neon-shadow: rgba(0, 255, 0, 0.7); /* Neon Green Glow */

    background-color: var(--btn-bg-color);
    color: var(--btn-text-color);
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

/* Neon Border/Glow Effect using ::before */
.cybr-btn::before
{
    content: '';
    position: absolute;
    /* Position slightly outside bounds (-2px) */
    inset: -2px;
    /* Create the border */
    border: 2px solid var(--btn-neon-color);
    /* Create the glow effect */
    box-shadow: 0 0 5px var(--btn-neon-shadow),
                0 0 10px var(--btn-neon-shadow),
                inset 0 0 3px var(--btn-neon-shadow); /* Optional inner glow */
    opacity: 0.85;
    /* Place behind the button's text/content */
    z-index: -1;
    pointer-events: none; /* Allow clicks on button */
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

/* --- Muted State --- */
.cybr-btn[data-variant="neutral"]
{
    /* Change background and text color */
    --btn-bg-color: #404040; /* Dark Grey background */
    --btn-text-color: #a0a0a0; /* Dimmer text */

    /* Keep the same neon border color by default */
    /* Or optional: Dim the border slightly in muted state */
    /*
    --btn-neon-color: rgba(50, 200, 50, 0.7);
    --btn-neon-shadow: rgba(0, 180, 0, 0.5);
    */

    cursor: default;
}

/* Apply the CSS variables */
.cybr-btn
{
    background-color: var(--btn-bg-color);
    color: var(--btn-text-color);
}
.cybr-btn::before
{
    border-color: var(--btn-neon-color);
    box-shadow: 0 0 5px var(--btn-neon-shadow),
                0 0 10px var(--btn-neon-shadow),
                inset 0 0 3px var(--btn-neon-shadow);
}


/* Optional: Basic Hover/Active for non-muted state */
.cybr-btn:not([data-variant="neutral"]):hover
{
    /* Slightly change background or text on hover */
    background-color: #252525;
}
.cybr-btn:not([data-variant="neutral"]):hover::before
{
    opacity: 1; /* Make border brighter on hover */
}

.cybr-btn:not([data-variant="neutral"]):active
{
    transform: scale(0.98); /* Keep slight press effect */
    background-color: #111;
}



#ios-audio-prompt
{
    position: fixed; /* Cover the viewport */
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75); /* Dark semi-transparent overlay */
    z-index: 2000; /* Ensure it's on top of everything */
    display: flex; /* Use flexbox for centering the button */
    justify-content: center;
    align-items: center;
    cursor: pointer; /* Indicate the area is clickable */
}

/* Optional: Style the button within the prompt */
#ios-unmute-button
{
    padding: 1rem 2rem;
    font-size: 1.1rem;
    /* Add any other specific styles if needed */
}

/* Style for the new Video Button inside DJ Box */
.dj-video-button
{
    position: absolute;
    top: 12px; /* Adjusted slightly */
    right: 52px;
    font-size: 2.2rem; /* Adjusted slightly */
    width: 32px;       /* Button size */
    height: 30px;      /* Button size */
    padding: 0;        /* Remove default padding */
    border: 1px solid rgba(200, 200, 200, 0.4); /* Subtle border */
    border-radius: 50%; /* Circular button */
    background-color: rgba(10, 10, 15, 0.6); /* Dark semi-transparent background */
    cursor: pointer;
    display: flex;      /* Center the SVG icon */
    justify-content: center;
    align-items: center;
    /*z-index: 2001;*/ /* Above the video */
    /*transition: background-color 0.2s ease, transform 0.2s ease; */
    backdrop-filter: blur(2px); /* Optional subtle blur */
    filter: drop-shadow(0 0 2px rgba(255, 0, 255, 0.5));
    -webkit-backdrop-filter: blur(2px);

    text-shadow: 0 0 5px black; /* Make X more visible */

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 12;
    /*
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    */
    transition: opacity 0.3s ease-out, visibility 0s linear 0.3s;
}

.dj-event-button
{
    position: absolute;
    top: 12px; /* Adjusted slightly */
    right: 52px;
    font-size: 2.2rem; /* Adjusted slightly */
    width: 32px;       /* Button size */
    height: 30px;      /* Button size */
    padding: 0;        /* Remove default padding */
    border: 1px solid rgba(200, 200, 200, 0.4); /* Subtle border */
    border-radius: 50%; /* Circular button */
    background-color: rgba(10, 10, 15, 0.6); /* Dark semi-transparent background */
    cursor: pointer;
    display: flex;      /* Center the SVG icon */
    justify-content: center;
    align-items: center;
    /*z-index: 2001;*/ /* Above the video */
    /*transition: background-color 0.2s ease, transform 0.2s ease; */
    backdrop-filter: blur(2px); /* Optional subtle blur */
    filter: drop-shadow(0 0 2px rgba(255, 0, 255, 0.5));
    -webkit-backdrop-filter: blur(2px);

    text-shadow: 0 0 5px black; /* Make X more visible */

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 12;
    /*
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    */
    transition: opacity 0.3s ease-out, visibility 0s linear 0.3s;
}
.dj-photo-button
{
    position: absolute;
    top: 12px; /* Adjusted slightly */
    right: 52px;
    font-size: 2.2rem; /* Adjusted slightly */
    width: 32px;       /* Button size */
    height: 30px;      /* Button size */
    padding: 0;        /* Remove default padding */
    border: 1px solid rgba(200, 200, 200, 0.4); /* Subtle border */
    border-radius: 50%; /* Circular button */
    background-color: rgba(10, 10, 15, 0.6); /* Dark semi-transparent background */
    cursor: pointer;
    display: flex;      /* Center the SVG icon */
    justify-content: center;
    align-items: center;
    /*z-index: 2001;*/ /* Above the video */
    /*transition: background-color 0.2s ease, transform 0.2s ease; */
    backdrop-filter: blur(2px); /* Optional subtle blur */
    filter: drop-shadow(0 0 2px rgba(255, 0, 255, 0.5));
    -webkit-backdrop-filter: blur(2px);

    text-shadow: 0 0 5px black; /* Make X more visible */

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 12;
    /*
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    */
    transition: opacity 0.3s ease-out, visibility 0s linear 0.3s;
}
.dj-video-button
{
    top: 76px; /* Adjusted slightly */
    right: 52px;
}

.dj-video-button.visible
{
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* Make it clickable */
    transition: opacity 0.3s ease-in, visibility 0s linear 0s; /* Fade in */
}

/*
.dj-video-button:hover,
.favorite-star:hover
{
    background-color: rgba(50, 50, 55, 0.8);
    transform: scale(1.08); /* Slight scale on hover */
}
*/

.dj-video-button:active,
.favorite-star:active
{
    transform: scale(0.98); /* Press effect */
}

/* Style the SVG icon inside the button */
.dj-video-button .video-icon, #details-modal-videos .video-icon
{
    width: 55%;     /* Size of icon relative to button */
    height: 55%;
    /*fill: rgba(220, 220, 220, 0.9);*/ /* Icon color (light grey) */
    fill: var(--secondary-color);
    pointer-events: none; /* Ensure icon doesn't block button click */
    filter: drop-shadow(0 0 2px var(--primary-color));
}
#next-video-button .video-next-icon
{
fill: var(--secondary-color);
}

#video-display-area video
{ /* Or target using #dynamic-video-* if needed */
    display: block;
    /* --- Force video element to fill its container --- */
    width: 100%;
    height: 100%;
    /* --- Control how video fits --- */
    object-fit: contain; /* << RECOMMENDED: Fits video inside, maintains aspect ratio, adds black bars if needed */
    /* OR */
    /* object-fit: cover; */ /* << Fills entire area, maintains aspect ratio, CROPS video if needed */
    /* --- Remove auto sizing --- */
    /* width: auto; */
    /* height: auto; */
    /* --- Keep max constraints (redundant if width/height is 100% but safe) --- */
    max-width: 100%;
    max-height: 100%;
    /* Add a background color while loading (optional) */
    background-color: #000; /* Ensures area is black even before video renders */
}
#video-display-area
{
    position: relative;
    max-width: 90%;
    max-height: 90%;
    width: 90vw;
    height: 80vh;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}
#video-player-container
{
    /* ... (position: fixed, inset: 0, etc) ... */
    display: flex;
    justify-content: center;
    align-items: center;
    /* ... (background, z-index) ... */
}

#next-video-button
{
    position: absolute;
    top: 26px;
    right: 60px; /* Adjusted position */
    transform: translate(0, -50%); /* Adjusted transform */
    z-index: 2; /* Ensure higher than display area */
    border-radius: 50%;
    color: white;
    border:none;
    background: rgba(0, 0, 0, 0.5);
    width: 32px;
    height: 32px;
    font-size: 24px;
    padding: 0;
    cursor: pointer;
    display: flex; /* Use flex to center SVG */
    justify-content: center;
    align-items: center;
    opacity: 0.9; /* Start slightly transparent */
    line-height: 1;
    /*border: 1px solid rgba(255, 255, 255, 0.4) !important;*/ /* Subtle border */
    
    border: 2px solid rgba(200, 200, 200, 0.8) !important;
   /*filter: drop-shadow(0 0 2px rgba(255, 0, 255, 0.5));*/
   filter: drop-shadow(0 0 2px var(--secondary-color));

    transition: background-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
    /* backdrop-filter: blur(3px); /* Removed - can be heavy */
}

#next-video-button:hover
{
    background-color: rgba(50, 50, 55, 0.8);
    border: 2px solid rgba(200, 200, 200, 0.9) !important;
    /*transform: scale(1.1);*/
    filter: drop-shadow(0 0 6px var(--secondary-color)); /* Brighter glow on hover */
}



/*
close-video-button';
  closeVideoButton.textContent = 'X'; // Simple close icon
  closeVideoButton.style.position = 'absolute';
  closeVideoButton.style.top = '10px';
  closeVideoButton.style.right = '10px';
  closeVideoButton.style.fontSize = '24px';
  closeVideoButton.style.color = 'white';
  closeVideoButton.style.background = 'transparent';
  closeVideoButton.style.border = 'none';
  closeVideoButton.style.cursor = 'pointer'
  */

#close-video-button {
    /* --- Keep Positioning & Base Styles --- */
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 3; /* Ensure highest */
    width: 32px;  /* Keep fixed size */
    height: 32px;
    border-radius: 50%; /* Keep circular */
    background: rgba(0, 0, 0, 0.5);
    /*border: 1px solid rgba(255, 255, 255, 0.7) !important;*/ /* Adjusted border slightly */
    border: 2px solid rgba(200, 200, 200, 0.8) !important;
    filter: drop-shadow(0 0 2px var(--secondary-color));
    color: var(--secondary-color); /* This will define the icon stroke color */
    cursor: pointer;
    padding: 0; /* Remove padding if you want icon scaled relative to size */
    opacity: 0.9;
    /* --- Use Flexbox to Center SVG --- */
    display: inline-flex; /* Or flex */
    align-items: center;    /* Vertical center */
    justify-content: center; /* Horizontal center */

    transform: translate(0, -13%);

    /* Keep transitions */
    transition: background-color 0.2s ease, transform 0.2s ease;
}

#close-video-button:hover {
    background-color: rgba(50, 50, 50, 0.8);
    transform: scale(1.05);
    transform: translate(0, -14%);
    border: 2px solid rgba(200, 200, 200, 0.9) !important;
    filter: drop-shadow(0 0 6px var(--secondary-color)); /* Brighter glow on hover */
}

 #close-video-button:active {
    transform: scale(0.95);
}


/* --- ADD: Style the SVG Icon --- */
#close-video-button .button-icon.close-icon {
    width: 85%; /* Size the icon (e.g., 60% of the button size) */
    height: 85%;
    stroke: var(--secondary-color); /* Inherit color (white) from button */
    stroke-width: 2.5;    /* Adjust line thickness */
    stroke-linecap: round; /* Optional: round line ends */
    stroke-linejoin: round;/* Optional: round line joins */
    fill: none;           /* Ensure no fill */
    pointer-events: none; /* Clicks should register on the button */
}

/* No change needed for #video-player-container or the video element itself */
#video-player-overlay video
{
    position: absolute; /* Position within the overlay */
    top: 0;
    left: 0;
    width: 100%;  /* Make video fill overlay width */
    height: 100%; /* Make video fill overlay height */
    border: none;   /* Remove any border */
    background-color: #000; /* Black background while loading */

    /* --- Key Property --- */
    object-fit: cover;
    /* 'cover': Fills the container, maintains aspect ratio, CROPS if necessary */
    /* Use 'contain' if you prefer black bars over cropping: */
    /* object-fit: contain; */
}
#video-play-prompt
{
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85); /* Darker */
    z-index: 10000; /* Higher z-index */
    display: flex;
    flex-direction: column; /* Stacks title and buttons */
    justify-content: center;
    align-items: center;
    padding: 30px;
    box-sizing: border-box;
    cursor: pointer; /* Allows background dismiss */
    color: #eee;
    text-align: center;
}
#video-play-prompt h3
{ /* Title style */
    margin-bottom: 20px;
    /* ... */
}
#video-play-prompt .prompt-buttons
{ /* Button container */
    /* ... */
}
#video-play-prompt button
{ /* Basic button style */
    /* ... */
}
#video-play-prompt button.play-button
{ /* Specific style */
    /* ... */
}


#next-video-button:hover
{
    background-color: rgba(50, 50, 50, 0.8);
    opacity: 1;
    transform: translate(0, -50%) scale(1.1); /* Adjusted transform */
}

 #next-video-button:active
 {
    transform: translate(0, -50%) scale(0.95); /* Adjusted transform */
 }

#next-video-button svg
{
    width: 60%; /* Size the icon within the button */
    height: 60%;
    fill: rgba(255, 255, 255, 0.8); /* Icon color */
    pointer-events: none; /* Ensure icon doesn't block clicks */
}
.header-link
{
    color: white;
    text-decoration-line: none;
}
a.cybr-btn
{
text-decoration: none;
}
.dj-mini-drawer .dj-minibuttons {
    display: flex;          /* 1. Set container to use Flexbox */
    justify-content: center; /* 2. Center items horizontally within the container */
    gap: 15px;              /* 3. Optional: Add space BETWEEN the links */
    padding-bottom: 8px;    /* Keep existing padding if needed */
    /* Remove text-align if it was previously set */
    /* text-align: left; */
}
.dj-box.superactive
{
    grid-column: 1 / -1;       /* Allow it to span all columns if needed, prevents awkward single column width */
    width: max-content;        /* Try to shrink to content width */
    max-width: 700px;          /* << ADJUST: Max width if content is very wide (e.g., long name/links) */
    min-width:600px;           /* Ensure this is less than screen width */
    backdrop-filter: none;
    background:none;
    background: rgba(15, 15, 25, 0.2);
    margin-left: auto;         /* <<< ADD: Auto left margin */
    margin-right: auto;
}
.dj-box.superactive .dj-profile-image-container
{
    transform: scale(1.2) translateZ(20px); /* Pop out */
    box-shadow: 0 0 15px var(--secondary-color), 0 0 25px var(--glow-color);
    z-index: 15; /* Bring image above drawer */
    margin-right: 18px;
}
.show-all-link
{
    display: inline-block;
    margin-top: 15px;
    color: var(--secondary-color); /* Use theme color */
    text-decoration: none;
    border: 1px solid var(--secondary-color);
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 0.9rem;
    transition: background-color 0.2s ease;
    /*
    z-index: 1;
    position: relative;
    overflow: hidden;
    */
}
.show-all-link:hover
{
    background-color: rgba(0, 255, 204, 0.1); /* Slight background on hover */
}

.fan-signup-modal,
.fan-login-modal,
#dj-events-modal,
#all-events-modal,
#dj-photobook-modal
 {
    position: fixed;
    inset: 0; /* Shortcut for top/right/bottom/left = 0 */
    background-color: rgba(5, 5, 15, 0.72); /* Slightly adjusted dark background 0.92 */
    z-index: 5001; /* Ensure it's above other content */
    display: none; /* Controlled by JS */
    justify-content: center;
    align-items: center;
    padding: 20px;
    backdrop-filter: blur(5px); /* Add blur to background */
    -webkit-backdrop-filter: blur(5px);
}

#details-modal
 {
    position: fixed;
    inset: 0; /* Shortcut for top/right/bottom/left = 0 */
    background-color: none; /* Slightly adjusted dark background */
    z-index: 5000; /* Ensure it's above other content */
    display: none; /* Controlled by JS */
    justify-content: center;
    align-items: center;
    padding: 20px;
    backdrop-filter: blur(5px); /* Add blur to background */
    -webkit-backdrop-filter: blur(5px);
}

#dj-events-modal .modal-content {
    background: rgba(20, 5, 40, 0.85); /* Dark translucent content background */
    border: 2px solid var(--secondary-color); /* Use theme neon color */
    box-shadow: 0 0 15px var(--secondary-color), 0 0 30px var(--glow-color);
    border-radius: 8px;
    padding: 25px 35px; /* Adjust padding */
    max-width: 650px; /* Max width of modal */
    width: 90%;
    max-height: 85vh; /* Limit height */
    overflow-y: auto; /* Allow scrolling if content exceeds height */
    position: relative; /* For close button positioning */
    color: var(--text-color); /* Use theme text color */
}

#dj-events-modal .modal-close-btn, #dj-photobook-modal .modal-close-btn, #challenge-modal .modal-close-btn
{
    position: absolute;
    top: 8px; /* Adjust position */
    right: 12px;
    background: none;
    border: none;
    font-size: 2.2rem; /* Adjust size */
    color: #aaa;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    transition: color 0.2s ease;
}

#dj-events-modal .modal-close-btn:hover, #dj-photobook-modal .modal-close-btn:hover, #challenge-modal .modal-close-btn:hover
{
    color: #fff;
}

#dj-events-modal h2 {
    text-align: center;
    margin-top: 0; /* Remove default margin if needed */
    margin-bottom: 25px;
    color: var(--secondary-color); /* Use theme color */
    text-shadow: 0 0 6px var(--secondary-color); /* Neon effect */
    font-size: 1.8em;
}

#modal-event-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#modal-event-list li {
    border-bottom: 1px dashed rgba(255, 0, 255, 0.3); /* Neon dashed line */
    padding: 12px 0;
    margin-bottom: 10px;
}

#modal-event-list li:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

#modal-event-list strong { /* Event title */
    color: var(--text-glow);
    font-size: 1.1em;
    display: block;
    margin-bottom: 3px;
}

#modal-event-list p {
    margin: 5px 0;
    font-size: 0.95em;
    color: #ccc; /* Slightly dimmer text for details */
}
#modal-event-list p strong { /* Labels within details */
     color: #ddd;
     font-size: 1em; /* Reset size */
     display: inline; /* Keep labels inline */
     margin-bottom: 0;
}

#modal-event-list a { /* Links like Tickets/Info */
    color: var(--secondary-color);
    text-decoration: none;
    font-weight: bold;
}

#modal-event-list a:hover {
    text-decoration: underline;
}

main
{
min-height: 330px;
}

/* Example Media Query Check */
@media only screen and (max-width: 768px) {
    .dj-list {
        grid-template-columns: 1fr; /* Ensures single column */
        gap: 20px; /* Adjust gap if needed */
    }
    .dj-box {
        min-width: 0; /* Allow box to shrink fully in single column */
        padding: 5px; /* Optional: Reduce padding */
         backdrop-filter: none;
         -webkit-backdrop-filter: none;
         box-shadow: 0 2px 5px rgba(0,0,0,0.3); /* Use a much simpler shadow */
         min-width: 360px;
    }
    /*
    .dj-links a
    {
    font-size: 0.8rem;
    }
    */
}

.favorite-star {
    position: absolute;
    top: 12px; /* Align with video button vertically */
    /* Position it left of the video button (video btn is 30px wide at right: 12px) */
    right: 12px; /* Approx: 12px (video offset) + 30px (video width) + 10px (gap) */
    width: 32px; /* Button size */
    height: 32px;
    padding: 4px; /* Space around SVG */
    border: 1px solid rgba(200, 200, 200, 0.3);
    border-radius: 50%;
    background-color: rgba(10, 10, 15, 0.6);
    cursor: pointer;
    display: flex; /* Center SVG */
    justify-content: center;
    align-items: center;
    z-index: 12; /* Same level as video button */
    /* Add subtle glow using filter and transition */
    filter: drop-shadow(0 0 2px rgba(255, 0, 255, 0.5)); /* Use secondary color for glow */
    transition: background-color 0.2s ease, transform 0.2s ease, filter 0.3s ease;
}

.dj-video-button:hover, .favorite-star:hover {
    background-color: rgba(50, 50, 55, 0.8);
    transform: scale(1.1);
    filter: drop-shadow(0 0 6px var(--secondary-color)); /* Brighter glow on hover */
}

.favorite-star .star-icon {
    width: 100%;
    height: 100%;
    pointer-events: none; /* Allow clicks on button itself */
}

.photo-outline
{
fill: none;
stroke: var(--secondary-color);
stroke-width: 1.5;
}
 
 
/* Star SVG Paths Styling */
.favorite-star .star-icon .star-outline {
    fill: none; /* No fill for outline */
    stroke: var(--secondary-color); /* Neon pink outline */
    stroke-width: 1.5; /* Adjust stroke width */
    transition: stroke 0.3s ease, opacity 0.3s ease;
    opacity: 1; /* Visible by default */
}
.favorite-star .star-icon .star-fill {
    fill: var(--secondary-color); /* Neon pink fill */
    stroke: none; /* No stroke for fill */
    transition: fill 0.3s ease, opacity 0.3s ease;
    opacity: 0; /* Hidden by default */
}

/* Style when favorited */
.favorite-star.is-favorite .star-icon .star-outline {
    /* Optional: Hide or dim outline when filled */
     stroke: var(--secondary-color); /* Keep outline color */
     opacity: 0.4; /* Make outline dimmer */
}
.favorite-star.is-favorite .star-icon .star-fill {
    opacity: 1; /* Make fill visible */
}
.favorite-star.is-favorite {
    /* Optional: change button background or add stronger glow when favorited */
    background-color: rgba(100, 0, 100, 0.7); /* Darker purple? */
    filter: drop-shadow(0 0 8px var(--secondary-color)); /* Stronger glow */
}

.header-actions {
    display: flex; /* Arrange buttons horizontally */
    align-items: center; /* Vertically align items */
    gap: 10px; /* Space between buttons */
    margin-left: auto;
}

/* Base style for icon buttons in the header */
.header-icon-button {
    display: inline-flex; /* Use inline-flex */
    justify-content: center;
    align-items: center;
    width: 36px;  /* Adjust size */
    height: 36px;
    padding: 6px; /* Internal padding around icon */
    border: 1.5px solid var(--primary-color); /* Use primary color for outline */
    border-radius: 50%; /* Circular */
    background-color: rgba(15, 15, 25, 0.6); /* Slightly dark background */
    color: var(--primary-color); /* This sets the default SVG stroke color */
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.3s ease;
    vertical-align: middle; /* Helps align with text/other buttons */
    /* Neon Glow effect */
    box-shadow: 0 0 4px var(--primary-color), 0 0 8px var(--primary-color);
}

/* Style the SVG icon inside the button */
.header-icon-button .button-icon {
    width: 100%;
    height: 100%;
    stroke: currentColor; /* Inherit color from button */
    stroke-width: 1.5; /* Adjust thickness */
    fill: none;       /* Ensure it's an outline */
    pointer-events: none; /* Click goes to button */
}
.header-icon-button .button-icon .header-outline
{
    fill: none; /* No fill for outline */
    stroke: var(--secondary-color); /* Neon pink outline */
    stroke-width: 1.5; /* Adjust stroke width */
    transition: stroke 0.3s ease, opacity 0.3s ease;
    opacity: 1; /* Visible by default */
    stroke-linecap:round;
    stroke-linejoin:round;
}

.header-icon-button .button-icon .header-filled
{
    fill: var(--secondary-color); /* Neon pink fill */
    stroke: none; /* No stroke for fill */
    transition: fill 0.3s ease, opacity 0.3s ease;
    opacity: 0; /* Hidden by default */
}

.header-icon-button.is-loggedin
{
  background-color: rgba(100, 0, 100, 0.5);
  filter: drop-shadow(0 0 5px var(--secondary-color));
  }
.header-icon-button.is-loggedin .button-icon .header-filled
{
     stroke: var(--secondary-color); /* Keep outline color */
     opacity: 0.9; /* Make outline dimmer */
}

/* Hover/Active states */
.header-icon-button:hover {
    background-color: rgba(35, 25, 55, 0.8);
    transform: scale(1.08);
    box-shadow: 0 0 7px var(--primary-color), 0 0 14px var(--glow-color); /* Enhance glow */
}

 .header-icon-button:active {
    transform: scale(0.96);
}

.show-events-btn 
{
    display: flex; /* Use inline-flex */
    position: absolute;
    top:12px;
    right:50px;
    justify-content: center;
    align-items: center;
    width: 31px;  /* Adjust size */
    height: 31px;
    padding: 5px; /* Internal padding around icon */
    border: 1px solid var(--primary-color); /* Use primary color for outline */
    border-radius: 50%; /* Circular */
    background-color: rgba(15, 15, 25, 0.6); /* Slightly dark background */
    color: var(--primary-color); /* This sets the default SVG stroke color */
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.3s ease;
    vertical-align: middle; /* Helps align with text/other buttons */
    /* Neon Glow effect */
    box-shadow: 0 0 4px var(--primary-color); /* , 0 0 8px var(--primary-color)*/
}
#details-modal .favorite-star
{
width: 31px;
height: 31px;
}
#details-modal-events
{
top:16px;
right:86px;
width: 31px;
height: 31px;
}

#details-modal-photobook
{
    display: flex; /* Use inline-flex */
    position: absolute;
    justify-content: center;
    align-items: center;
    width: 31px;  /* Adjust size */
    height: 31px;
    padding: 5px; /* Internal padding around icon */
    border: 1px solid var(--primary-color); /* Use primary color for outline */
    border-radius: 50%; /* Circular */
    background-color: rgba(15, 15, 25, 0.6); /* Slightly dark background */
    color: var(--primary-color); /* This sets the default SVG stroke color */
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.3s ease;
    vertical-align: middle; /* Helps align with text/other buttons */
    /* Neon Glow effect */
    box-shadow: 0 0 4px var(--primary-color); /* , 0 0 8px var(--primary-color)*/
    
top:66px;
right:50px;
}
#details-modal-videos
{
    display: flex; /* Use inline-flex */
    position: absolute;
    justify-content: center;
    align-items: center;
    width: 31px;  /* Adjust size */
    height: 31px;
    padding: 5px; /* Internal padding around icon */
    border: 1px solid var(--primary-color); /* Use primary color for outline */
    border-radius: 50%; /* Circular */
    background-color: rgba(15, 15, 25, 0.6); /* Slightly dark background */
    color: var(--primary-color); /* This sets the default SVG stroke color */
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.3s ease;
    vertical-align: middle; /* Helps align with text/other buttons */
    /* Neon Glow effect */
    box-shadow: 0 0 4px var(--primary-color); /* , 0 0 8px var(--primary-color)*/
    
    opacity: 1;
    visibility: visible;
  
top:66px;
right:86px;
}

/* Style the SVG icon inside the button */
.show-events-btn .button-icon
{
    width: 100%;
    height: 100%;
    stroke: currentColor; /* Inherit color from button */
    stroke-width: 1.5; /* Adjust thickness */
    fill: none;       /* Ensure it's an outline */
    pointer-events: none; /* Click goes to button */
}
.show-events-btn .button-icon .header-outline
{
    fill: none; /* No fill for outline */
    stroke: var(--secondary-color); /* Neon pink outline */
    stroke-width: 1.5; /* Adjust stroke width */
    transition: stroke 0.3s ease, opacity 0.3s ease;
    opacity: 1; /* Visible by default */
    stroke-linecap:round;
    stroke-linejoin:round;
}

.show-events-btn .button-icon .header-filled
{
    fill: var(--secondary-color); /* Neon pink fill */
    stroke: none; /* No stroke for fill */
    transition: fill 0.3s ease, opacity 0.3s ease;
    opacity: 0; /* Hidden by default */
}

.show-events-btn.is-loggedin .button-icon .header-filled
{
     stroke: var(--secondary-color); /* Keep outline color */
     opacity: 0.4; /* Make outline dimmer */
}

/* Hover/Active states */
.show-events-btn:hover {
    background-color: rgba(35, 25, 55, 0.8);
    transform: scale(1.08);
    box-shadow: 0 0 7px var(--primary-color), 0 0 14px var(--glow-color); /* Enhance glow */
}

 .show-events-btn:active {
    transform: scale(0.96);
}
/* Specific ID if needed, but class is usually sufficient */
#profile-login-button {
    /* Add any specific styles here if needed */
}

/* Adjust mute button margin if needed */
#mute-button {
    margin-right: 0; /* Remove margin if the gap on .header-actions handles spacing */
}


.header-icon-button.is-active .button-icon {
     fill: var(--primary-color); /* Fill the icon */
}
.header-icon-button.is-active {
     box-shadow: 0 0 8px var(--primary-color), 0 0 16px var(--glow-color); /* Stronger glow */
}
.red
{
color:red;
}
.pink
{
color:#D277D7;
}
.green
{
color:#01C400;
}
#profile-error-message
{
color:red;
}
/* --- Login Modal Styles --- */
.fan-login-modal {
    position: fixed;
    inset: 0; /* top/right/bottom/left = 0 */
    background-color: rgba(0, 0, 0, 0.85); /* Dark overlay */
    z-index: 5000; /* High Z-index */
    display: none; /* Initially hidden - JS toggles to flex */
    justify-content: center;
    align-items: center;
    padding: 20px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.fan-login-modal .modal-content
{
min-width:550px;
}
.fan-signup-modal .modal-content
{
min-width:550px;
}
p.left-align
{
text-align: left;
}


.fan-signup-modal .form-row {
    display: flex;          /* Arrange items horizontally */
    flex-wrap: wrap;        /* Allow wrapping on very small screens if needed */
    gap: 15px;              /* Space between the form groups */
    margin-bottom: 0;       /* Remove bottom margin if .form-group has it */
}
.fan-signup-modal .form-row .form-group {
    flex: 1;                /* Allow groups to share space equally */
    min-width: 150px;       /* Minimum width before wrapping */
    margin-bottom: 15px;    /* Restore bottom margin for spacing below the row */
}

/* Ensure base form-group styles exist */
.fan-signup-modal .form-group {
     margin-bottom: 15px; /* Default spacing */
}
.fan-signup-modal .form-group label {
    /* ... existing label styles ... */
}
.fan-signup-modal .form-group input,
.fan-signup-modal .form-group select {
    /* ... existing input/select styles ... */
    width: 100%; /* Ensure inputs fill their group */
}

/* Adjust contact options grid gap if needed */
.contact-options {
    /* ... existing grid styles ... */
    grid-gap: 10px 15px; /* Row gap, Column gap */
}

/* Common style for modal content using a class */
.modal-content.neon-look {
    background: rgba(15, 15, 25, 0.95); /* Dark translucent background */
    border: 2px solid var(--primary-color); /* Use theme neon color */
    box-shadow: 0 0 15px var(--primary-color), 0 0 30px var(--glow-color); /* Neon glow */
    border-radius: 8px;
    padding: 30px 40px;
    max-width: 450px; /* Adjust width */
    width: 90%;
    position: relative; /* For close button */
    color: var(--text-color);
    
    max-height: 90vh; /* Limit height (e.g., 90% of viewport height) */
    overflow-y: auto;
}

/* Close Button Styling */
.fan-login-modal .modal-close-btn,
.fan-signup-modal .modal-close-btn, #all-events-modal .modal-close-btn,
#all-photobook-modal .modal-close-btn,
#details-modal .modal-close-btn
 {
    position: absolute;
    top: 8px;
    right: 12px;
    background: none;
    border: none;
    font-size: 2.2rem;
    color: #aaa;
    cursor: pointer;
    line-height: 1;
    padding: 0 5px; /* Add padding for easier clicking */
    transition: color 0.2s ease;
}
.fan-login-modal .modal-close-btn:hover, .fan-signup-modal .modal-close-btn:hover,
#all-events-modal .modal-close-btn:hover, #all-photobook-modal .modal-close-btn:hover
#details-modal .modal-close-btn:hover {
    color: #fff;
}

/* Modal Header */
.fan-login-modal h2, .fan-signup-modal h2, #all-events-modal h2, #all-photobook-modal h2, #details-modal h2
{
    text-align: center;
    margin-top: 0;
    margin-bottom: 25px;
    color: var(--secondary-color);
    text-shadow: 0 0 6px var(--secondary-color);
    font-size: 1.6em;
}
#details-modal h2
{
text-align: left;
}

/* Form Group Styling */
.fan-login-modal .form-group, .fan-signup-modal .form-group {
     margin-bottom: 15px;
}
.fan-login-modal .form-group label, .fan-signup-modal .form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: normal;
    font-size: 0.95em;
    color: #ccc;
}
.fan-login-modal .form-group input[type="text"],
.fan-login-modal .form-group input[type="password"] {
    width: 100%;
    padding: 10px;
    /* margin-bottom: 15px; */ /* Margin now on form-group */
    border: 1px solid var(--primary-color);
    background-color: rgba(0,0,0,0.3);
    border-radius: 4px;
    box-sizing: border-box;
    color: var(--text-color);
    font-family: inherit;
    font-size: 1em;
}
.fan-login-modal .form-group input:focus, .fan-signup-modal .form-group input:focus {
     outline: none;
     border-color: var(--secondary-color);
     box-shadow: 0 0 8px var(--glow-color);
}


/* Submit Button Row */
.fan-login-modal .form-submit-row, .fan-signup-modal .form-submit-row {
    display: flex;
    justify-content: center; /* Center button */
    margin-top: 25px;
}
.fan-login-modal button[type="submit"], .fan-signup-modal button[type="submit"] {
    width: 80%; /* Adjust width */
    /* Inherits .cybr-btn styles */
}
.fan-login-modal button[type="submit"]:disabled, .fan-signup-modal button[type="submit"]:disabled {
    cursor: wait;
    opacity: 0.7;
}


/* Links below form */
.fan-login-modal .modal-links, .fan-signup-modal .modal-links,
#details-modal .modal-links
 {
    border-top: 1px solid rgba(148, 0, 211, 0.3); /* Use primary color */
    padding-top: 15px;
    margin-top: 20px;
    text-align: center;
}
.fan-login-modal .modal-links a, .fan-signup-modal .modal-links a,
#details-modal .modal-links a,
 {
    color: var(--secondary-color);
    font-size: 0.85em;
    text-decoration: none;
    margin: 0 5px;
}
.fan-login-modal .modal-links a:hover, .fan-signup-modal .modal-links a:hover,
#details-modal .modal-links a:hover
 {
     text-decoration: underline;
}
.modal-links a.cybr-btn
{
margin-bottom: 15px;
}
/* Error message styling (reuse if possible) */
.fan-login-modal .error-message, fan-signup-modal .error-message {
    color: #ff4d4d; /* Brighter red */
    background-color: rgba(255, 50, 50, 0.1);
    border: 1px solid #ff4d4d;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 15px;
    text-align: center;
    font-size: 0.9em;
}
.fan-signup-modal .modal-content {
    /* ... (inherit base modal content styles) ... */
}

.contact-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-gap: 10px; 
}

#fan-profile-modal {
    position: fixed; inset: 0;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 5000;
    display: none; /* JS toggles */
    justify-content: center; align-items: center;
    padding: 20px;
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}

#fan-profile-modal .modal-content { /* Reuse neon look */
    background: rgba(15, 15, 25, 0.95);
    border: 2px solid var(--primary-color);
    box-shadow: 0 0 15px var(--primary-color), 0 0 30px var(--glow-color);
    border-radius: 8px;
    padding: 30px 40px;
    max-width: 600px; /* Slightly wider for more fields */
    width: 90%;
    position: relative;
    color: var(--text-color);
    max-height: 90vh; /* Allow scrolling */
    overflow-y: auto;
}

#fan-profile-modal .modal-close-btn { /* Reuse close button style */
    position: absolute; top: 8px; right: 12px; background: none; border: none;
    font-size: 2.2rem; color: #aaa; cursor: pointer; line-height: 1; padding: 0 5px;
}
#fan-profile-modal .modal-close-btn:hover { color: #fff; }

#fan-profile-modal h2 { /* Reuse title style */
    text-align: center; margin-top: 0; margin-bottom: 25px;
    color: var(--secondary-color); text-shadow: 0 0 6px var(--secondary-color);
    font-size: 1.6em;
}

/* Form field styling (can likely reuse styles from edit_dj_profile) */
#fan-profile-modal fieldset { border: 1px solid #ddd; padding: 15px 20px; margin-bottom: 20px; border-radius: 5px; }
#fan-profile-modal legend { font-weight: bold; color: #ccc; padding: 0 10px; font-size: 1.1em; }
#fan-profile-modal label { display: block; margin-bottom: 6px; font-weight: normal; font-size: 0.95em; color: #ccc;}
#fan-profile-modal input[type="text"],
#fan-profile-modal input[type="email"],
#fan-profile-modal select {
    width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid var(--primary-color);
    background-color: rgba(0,0,0,0.3); border-radius: 4px; box-sizing: border-box;
    color: var(--text-color); font-family: inherit; font-size: 1em;
}
#fan-profile-modal input[readonly] { background-color: #444; cursor: not-allowed; opacity: 0.7; }
#fan-profile-modal .form-row { display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 0; }
#fan-profile-modal .form-group { flex: 1; min-width: 180px; margin-bottom: 10px; }
#fan-profile-modal .contact-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); grid-gap: 10px 15px; margin-top: 5px; }
#fan-profile-modal .form-group-checkbox { display: flex; align-items: center; padding-top: 10px; }
#fan-profile-modal .form-group-checkbox input[type="checkbox"] { width: auto; margin-right: 8px; vertical-align: middle; accent-color: var(--secondary-color); }
#fan-profile-modal .form-group-checkbox label { margin-bottom: 0; font-weight: normal;}
#fan-profile-modal .form-submit-row { display: flex; gap: 10px; margin-top: 20px; justify-content: flex-end; }
#fan-profile-modal .button-group button,
#fan-profile-modal .button-group a,
#fan-profile-modal .profile-signout-button {
    /*padding: 20px 24px;*/
    border: none;
    border-radius: 0px;
    cursor: pointer;
    font-size: 1em;
    text-decoration: none;
    text-align: center;
    background-color: red; color: white;
    font-family: 'Orbitron', "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Apple SD Gothic Neo", sans-serif;
    margin-right:20px;
    
    --btn-neon-color: rgba(255, 50, 80, 0.9);   /* Bright Red/Pink Neon for Border */
    --btn-neon-shadow: rgba(255, 0, 50, 0.7);
    }
#fan-profile-modal .profile-signout-button:hover { background-color: #E22E21 }
#fan-profile-modal button[type="submit"] { background-color: #5cb85c; color: white; }
#fan-profile-modal button[type="submit"]:hover { background-color: #4cae4c; }
#fan-profile-modal button[type="submit"]:disabled { background-color: #aaa; cursor: wait; }
#fan-profile-modal .error-message,
#fan-profile-modal .success-message { /* Reuse message styles */
    padding: 10px; border-radius: 4px; margin-bottom: 15px; text-align: center;
}

#all-events-modal .modal-content {
    
    max-width: 750px; /* Wider modal for list */
    /* Inherits other .modal-content.neon-look styles */
}

.event-filters {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on small screens */
    gap: 15px 30px; /* Row gap, Column gap */
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(148, 0, 211, 0.4); /* Use primary color, less opaque */
}

.event-filters fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

.event-filters legend {
    font-weight: bold;
    margin-bottom: 8px;
    font-size: 0.95em;
    color: var(--secondary-color); /* Neon Pink */
    padding-bottom: 3px;
}

.event-filters label {
    margin-right: 10px;
    font-size: 0.9em;
    cursor: pointer;
    color: var(--text-color);
    display: inline-flex; /* Align radio button and text */
    align-items: center;
    gap: 4px;
}
.event-filters input[type="radio"] {
    margin-right: 3px;
    accent-color: var(--secondary-color); /* Style radio button */
    cursor: pointer;
}
.event-filters input[type="radio"]:disabled + span { /* Style label for disabled radio */
     opacity: 0.5;
     cursor: not-allowed;
}


.filter-row {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on small screens */
    align-items: center;
    gap: 8px 15px; /* Row gap, Column gap */
}

.filter-row label {
    margin-right: 0; /* Remove extra margin */
    flex-shrink: 0; /* Prevent labels from shrinking */
}

.filter-row input[type="number"] {
    width: 70px; /* Fixed width for days input */
    padding: 5px 8px;
    border: 1px solid var(--primary-color);
    background-color: rgba(0,0,0,0.3);
    color: var(--text-color);
    border-radius: 3px;
}

.filter-row input[type="text"] {
    flex-grow: 1; /* Allow location input to take remaining space */
    min-width: 150px; /* Minimum width before wrapping */
    padding: 5px 8px;
    border: 1px solid var(--primary-color);
    background-color: rgba(0,0,0,0.3);
    color: var(--text-color);
    border-radius: 3px;
}

.filter-row button {
    /* Uses .cybr-btn styles, adjusted padding in HTML */
     flex-shrink: 0; /* Prevent button shrinking */
}

/* Styling for the results area */
#all-events-list-content {
    margin-top: 20px;
    min-height: 100px; /* Ensure space even when loading */
    max-height: 50vh; /* Limit height within modal */
    overflow-y: auto; /* Add scroll if list is long */
    padding-right: 10px; /* Space for scrollbar */
}

#all-events-list-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#all-events-list-content li {
    border-bottom: 1px dashed rgba(255, 0, 255, 0.3); /* Neon dashed line */
    padding: 10px 0;
    margin-bottom: 8px;
}
#all-events-list-content li:last-child {
    border-bottom: none;
    margin-bottom: 0;
}
#all-events-list-content strong { /* Event title */
    color: var(--text-glow);
    font-size: 1.1em;
    display: block;
    margin-bottom: 4px;
}
#all-events-list-content p {
    margin: 4px 0;
    font-size: 0.9em;
    color: #ccc;
}
#all-events-list-content p strong { /* Labels like When/Where */
     color: #ddd;
     font-size: 1em;
     display: inline;
     margin-bottom: 0;
}
#all-events-list-content a { /* Ticket & Calendar links */
    color: var(--secondary-color);
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9em;
}
#all-events-list-content a:hover {
    text-decoration: underline;
}
/* Loading/Error text styling (can reuse) */
.loading-text, .error-text { color: #888; font-style: italic; text-align: center; padding: 20px;}
.loading-text-not, .error-text-not { color: #888; text-align: center; padding: 20px;}
.error-text { color: #d9534f; font-weight: bold;}


#group-logo {
    /* ---> Centering (Explicit Block Method) <--- */
    display: block; /* Treat image as a block */
    margin-left: auto; /* Auto margins center block elements */
    margin-right: auto;

    /* ---> Set Fixed Height <--- */
    height: 40px; /* Example: Set desired height */

    /* ---> Control Width & Aspect Ratio <--- */
    width: auto; /* Allow width to adjust automatically */
    max-width: 100%; /* Prevent width exceeding container */

    object-fit: contain; /* Scales down to fit, preserves aspect ratio, may add space */
    /* OR */
    /* object-fit: cover; */ /* Fills box, preserves aspect ratio, may crop image */

    /* Other styles */
    margin-bottom: 15px; /* Space below logo */
    border-radius: 5px; /* Keep rounded corners */

}

/*
#all-events-modal .modal-content
{
top:40px;
}
*/

.photobook-button {
    position: absolute;
    top: 76px;
    /* Position LEFT of the video button (video is at right: 50px, width: 30px) */
    right: 12px; /*calc(50px + 30px + 10px);*/ /* video right + video width + gap */
    /* right: 90px; */
    width: 30px; /* Match video button size */
    height: 30px;
    /* Inherit other styles from .header-icon-button if used, or copy relevant ones */
    /* Example using similar base style: */
    display: none; /* inline-flex */
    justify-content: center;
    align-items: center;
    padding: 5px;
    border: 1.5px solid var(--primary-color);
    border-radius: 50%;
    background-color: rgba(15, 15, 25, 0.6);
    color: var(--primary-color);
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease, filter 0.3s ease;
    vertical-align: middle;
    filter: drop-shadow(0 0 3px var(--primary-color));
    z-index: 12;
}
.photobook-button:hover {
    background-color: rgba(35, 25, 55, 0.8);
    transform: scale(1.1);
    filter: drop-shadow(0 0 7px var(--primary-color));
}
.photobook-button:active {
    transform: scale(0.96);
}
.photobook-button .button-icon { /* Style the SVG icon */
    width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.5;
}

/* Adjust existing Video/Star button positions if needed */
.dj-video-button {
    right: 50px; /* Keep this one */
    width: 30px; height: 30px; /* Verify size */
}
.favorite-star {
    right: 12px; /* Keep this one */
    width: 30px;
    height: 30px; /* Verify size */
}


.view-details-btn
{
margin-top: 20px;
}

/* search */
#search-modal {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.85); /* Dark overlay */
    z-index: 5000; /* High Z-index */
    display: none; /* JS toggles */
    justify-content: center;
    align-items: center; /* Center vertically */
    padding: 0px;
      overflow-y: auto; /* Make the modal overlay scrollable */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    overscroll-behavior-y: contain; /* Prevent scroll chaining from the modal to body */

    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

#search-modal .modal-content { /* Target content box inside search modal */
    background: rgba(15, 15, 25, 0.95);
    border: 2px solid var(--primary-color);
    box-shadow: 0 0 15px var(--primary-color), 0 0 30px var(--glow-color);
    border-radius: 8px;
    padding: 25px 30px;
    position: relative;
    color: var(--text-color);
    /* ---> ADD: Make content area scrollable, not the whole modal <--- */
    display: flex;
    flex-direction: column;
    max-width: 1100px; /* Wider modal for search/results */
    width: 86%;
    max-height: 86vh; /* Limit height */
}

#search-modal .modal-close-btn { /* Reuse close button style */
    position: absolute;
    top: 8px;
    right: 12px;
    /* ... other close button styles ... */
    background: none; border: none; font-size: 2.2rem; color: #aaa; cursor: pointer; line-height: 1; padding: 0 5px;
}
#search-modal .modal-close-btn:hover { color: #fff; }


#search-modal h2 { /* Reuse title style */
    text-align: center;
    margin-top: 0;
    margin-bottom: 25px;
    color: var(--secondary-color);
    text-shadow: 0 0 6px var(--secondary-color);
    font-size: 1.6em;
}

/* Adapt existing search form styles if needed */
#search-modal #database-search-form {
     background: none; /* Remove background if modal content has one */
     padding: 0; /* Remove padding if modal content has it */
     border: none; /* Remove border */
     box-shadow: none; /* Remove shadow */
     margin-bottom: 20px; /* Space before results */
     flex-shrink: 0; /* Prevent form from shrinking when results appear */
}
#search-modal .search-main-input {
    /* Keep display: flex; gap: 10px; */
     margin-bottom: 15px;
}
#search-modal .search-filters {
    /* Keep grid layout */
    border-top: 1px dashed rgba(148, 0, 211, 0.4);
    padding-top: 15px;
    margin-top: 15px;
}
/* Adjust filter group styling if needed */
#search-modal .filter-group label { font-size: 0.85em; margin-bottom: 5px; }
#search-modal .filter-group input, #search-modal .filter-group select { padding: 6px 8px; font-size: 0.9em; margin-bottom: 10px;}
#search-modal .filter-group .radio-group label,
#search-modal .filter-group .checkbox-group label { font-size: 0.85em; }

/* Style results container within modal */
#search-modal #search-results-container {
    border: 1px solid rgba(148, 0, 211, 0.3); /* Lighter border inside modal */
    padding: 15px;
    border-radius: 5px;
    background-color: rgba(0,0,0,0.2); /* Slightly different background */
    /* ---> ADD: Allow results to grow and scroll <--- */
    flex-grow: 1; /* Take remaining vertical space */
    overflow-y: auto; /* Add scrollbar if results overflow */
    min-height: 100px; /* Minimum height */
}

/* Style individual results (reuse existing .search-result-item styles) */
#search-modal .search-result-item {
     background: rgba(30, 30, 50, 0.4);
     /* ... keep other result item styles ... */
}

/* end search */

/* by hand */

#database-search-form {
            background: rgba(20, 20, 35, 0.7);
            padding: 25px;
            border-radius: 8px;
            border: 1px solid var(--primary-color);
            box-shadow: 0 0 10px var(--glow-color);
            margin-bottom: 30px;
        }

.filters-are-squashed #database-search-form
{
margin-right: 20px;
}
        .search-main-input {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }

        #search-keyword {
            flex-grow: 1;
            padding: 12px 15px;
            font-size: 1.1em;
            border: 1px solid var(--primary-color);
            background-color: rgba(0,0,0,0.3);
            color: var(--text-color);
            border-radius: 4px;
            font-family: inherit;
        }
        #search-keyword:focus {
             outline: none;
             border-color: var(--secondary-color);
             box-shadow: 0 0 8px var(--glow-color);
        }

        #search-submit-btn {
             /* Use cybr-btn styles */
             min-width: 100px;
             padding: 10px 20px; /* Adjust */
        }
        
        /* Filters Styling */
        .search-filters {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            border-top: 1px dashed rgba(148, 0, 211, 0.4);
            padding-top: 20px;
            margin-top: 20px;
        }

        .filter-group {
            /* Style individual filter sections */
        }

        .filter-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            font-size: 0.9em;
            color: var(--secondary-color);
        }
        .filter-group input[type="text"],
        .filter-group input[type="number"],
        .filter-group select {
            width: 100%;
            padding: 8px 10px;
            border: 1px solid var(--primary-color);
            background-color: rgba(0,0,0,0.2);
            color: var(--text-color);
            border-radius: 4px;
            font-size: 0.95em;
        }
        .filter-group input:focus,
        .filter-group select:focus {
             outline: none;
             border-color: var(--secondary-color);
             box-shadow: 0 0 5px var(--glow-color);
        }

        .filter-group .radio-group label,
        .filter-group .checkbox-group label {
            display: inline-block; /* Display radios/checkboxes side-by-side */
            margin-right: 15px;
            font-weight: normal;
            color: var(--text-color);
            font-size: 0.9em;
        }
         .filter-group .radio-group input[type="radio"],
         .filter-group .checkbox-group input[type="checkbox"] {
            margin-right: 5px;
            accent-color: var(--secondary-color);
            vertical-align: middle;
         }
         .filter-group .checkbox-group {
             margin-top: 10px;
             padding: 10px;
             background-color: rgba(0,0,0,0.2);
             border-radius: 4px;
         }
         #favorites-filter-group {
             display: none; /* Hidden by default, shown by JS if fan logged in */
         }
         #favorites-filter-group.visible {
             display: block;
         }


        /* Search Results Area */
        #search-results-container {
            min-height: 200px; /* Ensure space while loading */
            border: 1px dashed rgba(148, 0, 211, 0.4);
            padding: 20px;
            border-radius: 5px;
        }
        #search-results-container .loading-text,
        #search-results-container .error-text,
        #search-results-container .no-results-text
        {
             text-align: center;
             font-style: italic;
             color: #aaa;
             padding: 30px;
        }
        #search-results-container .no-results-text-not
        {
             text-align: center;
             color: #aaa;
             padding: 30px;
        }
         #search-results-container .error-text { color: #ff4d4d; }

         /* Individual result item styling (Example) */
         .search-result-item {
             background: rgba(30, 30, 50, 0.6);
             padding: 15px;
             margin-bottom: 15px;
             border-radius: 4px;
             border-left: 3px solid var(--secondary-color);
         }
         .search-result-item h3 { margin-top: 0; margin-bottom: 5px; color: var(--text-glow); }
         .search-result-item h3 .result-type { font-size: 0.7em; color: #ccc; margin-left: 10px; font-weight: normal; }
         #search-modal .search-result-item h2 {
          margin-top: 0;
          margin-bottom: 5px;
          color: #ddd; 
          text-align: left;
	  margin-bottom: 5px;
	  text-shadow: none;
	  font-size: 0.9em;
	  }
         #search-modal .search-result-item h2 .result-type { font-size: 0.5em; color: #ccc; margin-left: 10px; font-weight: normal; }
         .search-result-item p { margin: 3px 0; font-size: 0.9em; color: #ddd;}
         .search-result-item a { color: var(--secondary-color); }
         
#details-modal .modal-content { /* Target specific modal content */
    max-width: 650px; /* Adjust size as needed */
    /* Inherits base .modal-content.neon-look styles */
}

#modal-content .favorite-star
{
display:inline-flex;
right:50px;
top:16px;
}

#details-modal-header {
    display: flex;
    align-items: center; /* Vertically align image and title */
    gap: 15px; /* Space between image and title */
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(148, 0, 211, 0.4); /* Use primary color transparent */
}
#details-modal-header h2
{
margin-bottom: 5px;
}
#details-modal-title-holder
{
max-width: 460px;
}
#details-modal-image {
    height: 60px;
    width: 60px;
    object-fit: cover;
    border-radius: 4px; /* Default square-ish */
    border: 1px solid var(--secondary-color); /* Neon pink border */
    flex-shrink: 0; /* Prevent image from shrinking */
    display: none; /* Hidden until src is set */
}
#details-modal-image.is-dj { /* Specific style for DJ images */
    border-radius: 50%; /* Make DJ images circular */
}
#details-modal-image.is-club {
    border-radius: 50%; /* Make DJ images circular */
}
#dj-photobook-modal {
    z-index: 5001;
}

/* Ensure the details modal keeps its original z-index */
#details-modal {
    z-index: 5000; 
}
#details-modal-title {
    margin: 0;
    color: var(--secondary-color);
    text-shadow: 0 0 6px var(--secondary-color);
    font-size: 1.5em;
    text-align: left;
    line-height: 1.5em; /* Adjust line height */
    display:block;
}
#details-modal-subtitle
{
color: white;
font-size: 1.0em;
text-align: left;
text-align: left;
display:block;
min-height:1.0em;
}
#details-modal-content {
    font-size: 0.95em;
    line-height: 1.6;
    max-height: 55vh; /* Limit content height */
    overflow-y: auto; /* Add scrollbar if content overflows */
    padding-right: 10px; /* Space for scrollbar */
    margin-bottom: 15px;
    position: relative;
}
#details-modal-content.show-scroll-gradient::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0; /* Or width: 100%; */
    height: 50px; /* Adjust height of the gradient */
    background: linear-gradient(
        to bottom,
        rgba(15, 15, 25, 0.3),       /* Transparent, matching modal bg (adjust if your modal bg is different) */
        rgba(15, 15, 25, 0.8) 80%, /* Semi-transparent modal bg */
        rgba(15, 15, 25, 1)        /* Opaque modal bg at the very bottom */
    );
    pointer-events: none; /* Allows clicks/scrolls to pass through */
    z-index: 1; /* Ensure it's above the content but below scrollbars if any special styling */
    opacity: 0; /* Hidden by default, shown by JS */
    transition: opacity 0.3s ease-in-out;
}

#details-modal-content.show-scroll-gradient::after {
    opacity: 1; /* Make gradient visible */
}

.operating-hours-list
{
font-size: 0.8em;
}
/* Styling for content generated by JS */



#details-modal-content h4 {
    color: white;
    margin-top: 15px;
    margin-bottom: 5px;
    font-size: 1.1em;
    border-bottom: 1px solid rgba(148, 0, 211, 0.2);
    padding-bottom: 3px;
}
#details-modal-content p { margin: 5px 0; color: #ccc; }
#details-modal-content p strong { color: #eee; } /* Make labels slightly brighter */
#details-modal-content p strong.red { color: red; font-size: 1.4em;}
#details-modal-content ul { list-style: none; padding-left: 0; margin-top: 5px;}
#details-modal-content li { margin-bottom: 5px; }
#details-modal-content a { color: var(--secondary-color); text-decoration: none; }
#details-modal-content a:hover { text-decoration: underline; }

#details-modal-actions {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(148, 0, 211, 0.4);
    display: flex;
    flex-wrap: wrap; /* Allow buttons to wrap */
    justify-content: flex-end; /* Align buttons right */
    gap: 10px;
}

/* Style action buttons */
#details-modal-actions .action-button {
    /* Reuse .cybr-btn or create specific style */
    padding: 8px 15px;
    font-size: 0.9em;
    text-decoration: none;
    /* Add other styles from .cybr-btn if needed */
}

@media only screen and (max-width: 480px)
{
.modal-content.neon-look
{
max-height: 98vh;
}
#details-modal
{
padding:4px;
}
#search-modal .modal-content {
    max-width: 96%; /* Wider modal for search/results */
    width: 96%;
    max-height: 96vh; /* Limit height */
}

#details-modal-header
{
/*display: block;*/
}
.modal-content.neon-look {
  width: 98%;
  padding-left:20px;
  padding-right:20px;
  padding-top:20px;
  }
#details-modal-header h2
{
max-width: 250px;
}
}

section + section 
{
margin-top:50px;
}

a.font-a
{
font-size: 20px;
}

/* Style the link containing the icon */
.icon-link {
    display: inline-block; /* Allows setting size and prevents breaking line */
    line-height: 1; /* Prevent extra vertical space */
    vertical-align: middle; /* Align with adjacent text/icons if any */
    margin-right: 8px; /* Add space between icons */
    transition: color 0.2s ease; /* Optional: fade effect on hover */
    color: var(--text-color);
    margin-left: 0px;
}

.icon-link:hover {
    color: white;
}

/* Style the PNG image itself */
.link-icon-png {
    height: 1em; /* Set height relative to the parent link's font size */
    width: auto; /* Maintain aspect ratio */
    vertical-align: top; /* Ensure good alignment */
    /* Optional: Add filter for neon effect if desired */
    /* filter: drop-shadow(0 0 3px var(--secondary-color)); */
}

/* Example within the DJ links context */
/*
.dj-links .icon-link {
     margin-right: 10px;
}
*/
.dj-links .link-icon-png {
     height: 1.2em; /* Make icons slightly larger relative to link font-size */
     /* filter: drop-shadow(0 0 2px var(--secondary-color)); */
}
.dj-links .link-icon-svg {
     height: 56px;
     width: 46px;
     vertical-align: top;
}
.show-all-link
{
background: rgba(30, 0, 50, 0.9);
backdrop-filter: blur(5px);
}
div.result-info.closed *
{
opacity: 0.5;
}
.search-result-item p.red, #details-modal-content p.red
{
color:red;
opacity: 1 !important;
}
i.fa-square-facebook
{
font-size: 1.1rem;
}
i.fa-mixcloud
{
font-size: 1.8rem;
}

.catch_copy
{
font-size: 0.6rem;
}

#show-all-djs-btn, #show-clubs-link-btn, #show-all-clubs-container, #search-other-link-container, #show-all-events-container, #show-djs-link-btn
{
display:inline-block;
margin-bottom:30px;
margin-left:8px;
margin-right:8px;
}

/* --- Timeframe Filter Dropdown --- */
.header-dropdown-filter {
    position: relative; /* For positioning the dropdown menu */
    display: none; /* Or flex item if inside .header-actions */
}

.dropdown-toggle-btn {
    /* Uses .cybr-btn for base style, ensure it allows icon inside */
    display: inline-flex !important; /* Override if .cybr-btn is just inline */
    align-items: center;
    gap: 8px; /* Space between text and arrow */
    min-width: 130px; /* Adjust as needed */
    padding: 0.6rem 1rem; /* Adjust padding */
    font-size: 0.85em; /* Adjust font size */
}

.dropdown-toggle-btn .dropdown-arrow {
    width: 1em;
    height: 1em;
    fill: currentColor; /* Inherits color from button text */
    transition: transform 0.2s ease-in-out;
}

.dropdown-toggle-btn[aria-expanded="true"] .dropdown-arrow {
    transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    top: 100%; /* Position below the button */
    left: 0;
    right: 0; /* Make it same width as button or slightly wider */
    min-width: 100%; /* At least as wide as the button */
    background: rgba(20, 20, 35, 0.95); /* Darker than modal content for contrast */
    border: 1px solid var(--primary-color);
    border-top: none; /* Visually connect to button */
    border-radius: 0 0 6px 6px; /* Rounded bottom corners */
    box-shadow: 0 5px 15px rgba(0,0,0,0.5), 0 0 10px var(--glow-color);
    z-index: 6000; /* Above other header items, below modals if any open on top */
    list-style: none;
    padding: 5px 0;
    margin: 0;
    max-height: 500px; /* Add scroll if many options */
    overflow-y: auto;
}

.dropdown-menu li {
    padding: 8px 15px;
    color: var(--text-color);
    cursor: pointer;
    font-size: 0.9em;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.dropdown-menu li:hover {
    background-color: var(--primary-color);
    color: var(--text-glow);
}

.dropdown-menu li.selected {
    background-color: rgba(var(--secondary-color-rgb, 255, 0, 255), 0.3); /* Use secondary color with alpha */
    color: var(--secondary-color);
    font-weight: bold;
}

.white
{
color:white;
}

#challenge-modal {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.88); /* Darker overlay */
    z-index: 5001; /* Higher than other modals if it overlays them */
    display: none; /* Hidden by default */
    justify-content: center;
    align-items: center;
    padding: 20px;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

#challenge-modal .modal-content {
    background: rgba(10, 10, 20, 0.97); /* Darker, more opaque */
    border: 2px solid var(--primary-color);
    box-shadow: 0 0 20px var(--primary-color), 0 0 40px var(--glow-color);
    border-radius: 10px;
    padding: 30px 40px;
    max-width: 550px; /* Adjust as needed */
    width: 90%;
    position: relative;
    color: var(--text-color);
    text-align: center;
}

#challenge-modal h2 {
    color: var(--secondary-color);
    text-shadow: 0 0 8px var(--secondary-color);
    margin-bottom: 25px;
    font-size: 1.5em;
}

.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 20px;
    margin-bottom: 25px;
}

.image-button {
    background-color: rgba(25, 25, 40, 0.8);
    border: 2px solid var(--primary-color);
    border-radius: 8px;
    padding: 15px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1 / 1; /* Make them square-ish */
}

.image-button:hover,
.image-button:focus {
    transform: scale(1.05);
    border-color: var(--secondary-color);
    box-shadow: 0 0 10px var(--secondary-color), 0 0 15px var(--glow-color);
}

.image-button.shake {
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
    border-color: #ff4d4d !important; /* Red border for wrong choice */
}

@keyframes shake {
  10%, 90% { transform: translate3d(-1px, 0, 0) scale(1.05); }
  20%, 80% { transform: translate3d(2px, 0, 0) scale(1.05); }
  30%, 50%, 70% { transform: translate3d(-3px, 0, 0) scale(1.05); }
  40%, 60% { transform: translate3d(3px, 0, 0) scale(1.05); }
}


.image-button svg {
    width: 70%;
    height: 70%;
    fill: var(--secondary-color); /* Neon color for the icon */
    pointer-events: none; /* Clicks should register on button */
}

#feedback {
    min-height: 20px;
    margin-top: 15px;
    font-size: 0.9em;
    color: #ffaeae; /* Light red for error messages */
}

#language-selector {
    display: block; /*flex;*/
    align-items: center;
    gap: 8px; /* Space between flag buttons */
    margin-right: 15px; /* Space to the right, before other header icons */
}

.lang-flag-btn {
    background-color: transparent;
    border: 1px solid var(--primary-color);
    color: var(--text-color);
    /*padding: 6px 10px;*/ /* Adjust padding for size */
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Orbitron', "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Apple SD Gothic Neo", sans-serif; /* Match theme font */
    font-size: 24px; /* Adjust font size */
    line-height: 24px;
    font-weight: 600;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    min-width: 26px; /* Ensure buttons have a decent minimum width */
    text-align: center;
}

.lang-flag-btn:hover {
    background-color: var(--primary-color);
    color: var(--text-glow);
    border-color: var(--secondary-color);
    box-shadow: 0 0 5px var(--glow-color);
}

.lang-flag-btn.active-lang {
    /*background-color: var(--secondary-color);*/
    border: 1px solid var(--primary-color);
    color: var(--bg-color); /* Or a contrasting dark color */
    border-color: var(--secondary-color);
    box-shadow: 0 0 8px var(--secondary-color), inset 0 0 5px rgba(0,0,0,0.3);
    font-weight: bold;
    cursor: default;
}

.lang-flag-btn.active-lang:hover {
    /* Keep active style on hover, don't revert */
    background-color: var(--secondary-color);
    color: var(--bg-color);
}

#language-selector
{
position: absolute;
top: 78px;
right: 8px;
}
/* Adjust header actions for new element */
.header-actions {
    display: flex;
    align-items: center;
    gap: 10px; /* This will apply to all direct children, including the new lang selector div */
    margin-left: auto; /* Pushes actions to the right */
}

#event-timeframe-filter, #venue-type-filter
{
/*margin-top: -10px;
margin-bottom: 8px;
*/
position: fixed;
top: 86px;
left: 12px;
z-index: 1000;
}

#location-jumper
{
position: fixed;
top: 6px;
right: 6px;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease, visibility 0.5s ease;
}

#location-jumper.show {
  opacity: 1;
  visibility: visible;
}

#toggle-filters-btn {
    width: 32px;
    height: 32px;
    padding: 5px;
    position: absolute;
    right: 58px;
    top: 10px;
    flex-shrink: 0;
}
#toggle-filters-btn.active { /* Style when filters are visible (button means "hide") */
    border-color: var(--secondary-color);
    box-shadow: 0 0 6px var(--secondary-color);
}


/* Ensure results container can grow */
#search-results-container {
    flex-grow: 1; /* Allows it to take available space */
    overflow-y: auto; /* Keeps scrollbar if content overflows */
    /* min-height: 200px; /* Or whatever min-height you prefer */
    transition: margin-top 0.3s ease-out; /* Smooth transition for margin change */
}

.search-modal-content.filters-are-hidden #search-results-container {
    margin-top: 0; /* Remove top margin when filters are hidden */
}

body.modal-open { /* Generic class for any full-screen modal */
    overflow: hidden !important; /* Prevent body scroll */
    /* Consider adding padding-right if scrollbar visibility causes layout shift on desktop,
       though for mobile-first, this is often not needed.
       Example: padding-right: var(--scrollbar-width, 0px); 
       You'd need JS to calculate scrollbar width.
    */
}

/* --- Styles for Copy to Clipboard Button and Container --- */
.copyable-text-container {
    display: flex;       /* Align text and button */
    align-items: center; /* Vertically align */
    gap: 8px;            /* Space between text and button */
    margin-bottom: 3px;  /* Small margin for paragraphs */
}

.copyable-text-container .text-to-copy {
    flex-grow: 1; /* Allow text to take available space */
}

.copy-to-clipboard-btn {
    background: none;
    border: 1px solid transparent; /* Transparent border to prevent jump on hover focus */
    color: var(--secondary-color); /* Or your icon color */
    cursor: pointer;
    padding: 2px;
    margin-right: 4px;
    line-height: 0; /* Important for aligning SVG properly */
    width: 2.0em;   /* Adjust size based on surrounding font */
    height: 2.0em;
    transition: color 0.2s ease, transform 0.1s ease;
    flex-shrink: 0; /* Prevent button from shrinking */
    vertical-align: middle; /* Align with text */
}

.copy-to-clipboard-btn:hover {
    color: white; /* Or a brighter highlight */
    border-color: var(--primary-color-transparent, rgba(148,0,211,0.3)); /* Subtle border on hover */
}

.copy-to-clipboard-btn:active {
    transform: scale(0.9);
}

/* Style SVGs inside the button */
.copy-to-clipboard-btn svg {
    width: 100%;
    height: 100%;
    /* fill: none; -- Already set in SVG strings */
    /* stroke: currentColor; -- Already set in SVG strings */
    /* stroke-width: 2; -- Already set in SVG strings */
    /* stroke-linecap: round; -- Already set in SVG strings */
    /* stroke-linejoin: round; -- Already set in SVG strings */
    pointer-events: none; /* Clicks pass through to button */
}

.copy-to-clipboard-btn .checkmark-icon {
    stroke: lightgreen; /* Or your success color */
}

.found
{
font-weight: bold;
font-size: 1.1em;
color:#CDFEFF;
}

.user-location
{
  display: flex;
  align-items: center;
  /*justify-content: space-between; */
  gap: 20px;
  margin-bottom:26px;
  position: relative;
  text-align: center;
}
.user-location h2 {
  margin: 0;
  left:36%;
}
.local-update-button
{
  font-size: 14px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  background: none;
  border: none;
  margin: 0;
  color: inherit;
  font: inherit;
  position: relative;
  left:36%;
}
.local-update-button:hover
{
transform: scale(1.1);
}

/* Responsive adjustments for language selector if needed */
@media only screen and (max-width: 768px) {

.move-left
{
width:66px;
}
.dj-box.club.extra
{
    min-height:120px !important;
}
#details-modal-title-holder
{
max-width: 458px;
}

    #language-selector {
        
        gap: 5px;
    }
    .lang-flag-btn {
        /*padding: 5px 8px;*/
        min-width: 22px
        min-width: 24px;
    }
    /* Ensure header actions still flow well */
    /* You might need to adjust the order or wrapping of header-actions children */
    /* For example, if #mute-button2 is also in header-actions, ensure it's ordered correctly */
    header {
        /* Re-check flex/grid setup for header if layout breaks */
    }
        #language-selector
	{
	top: 70px;
	right: 2px;
	}
}

@media only screen and (max-width: 480px)
{
#details-modal-title-holder
{
max-width: 200px;
}
    .lang-flag-btn {
        min-width: 20px
        min-width: 22px;
    }
    #language-selector
	{
	top: 70px;
	right: 2px;
	}
}

/* --- Responsive Adjustments --- */
@media only screen and (max-width: 768px)
{
#fan-profile-modal
{
padding: 10px;
}
#fan-profile-modal .modal-content
{
width:98%;
padding: 10px
}
.fan-login-modal {
    align-items: center;
    padding: 10px;
}
.fan-login-modal .modal-content
{
min-width:300px;
}
.fan-signup-modal .modal-content
{
min-width:300px;
}
.fan-login-modal
{
margin-bottom: 5px;
}
.fan-login-modal .form-group, .fan-signup-modal .form-group
{
margin-bottom: 5px;
}

.fan-login-modal .form-submit-row, .fan-signup-modal .form-submit-row {
  margin-top: 10px;
}
.fan-login-modal .form-group input[type="text"], .fan-login-modal .form-group input[type="password"]
{
padding: 5px;
font-size: 0.9em;
}
.fan-login-modal h2
{
margin-bottom: 5px;
font-size: 1.1em;
}

.fan-login-modal .modal-links, .fan-signup-modal .modal-links, #details-modal .modal-links
{
padding-top: 5px;
margin-top: 10px;
}

.dj-box.superactive
{
    width:98% !important;
    max-width:98% !important;
    min-width:98% !important;
}
.club .dj-info
{
  max-width: 390px;
  margin-top:6px;
}
.modal-content.neon-look {
  width: 98%;
    padding-left:20px;
  padding-right:20px;
  padding-top:20px;
  }
#details-modal-content
  {
  }
#details-modal
{
padding:10px;
}
#content-overlay
{
    padding: 10px;
}
.dj-profile-image-container
     {
        width: 60px;
        height: 60px;
        display:block;
    }
.dj-info, dj-dj-title
{
max-width:400px;
}
.dj-info
{
overflow: visible;
}
.dj-video-button, .photobook-button
{
    top: 50px !important;
}
#details-modal .dj-video-button, #details-modal .photobook-button
{
    top: 54px !important;
}
.dj-profile-image-container
{
margin-top:8px;
}
.dj-dj-title
{
    	margin-bottom: 3px;
    	margin-top: 27px;
}
#slideshow-container .media-item img,
#slideshow-container .media-item video
{
max-width: 35vw;
}
    html
    {
        font-size: 14px;
    }
    .section-title
    {
        font-size: 1.8rem;
    }

    .dj-list
    {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    header
    {
    	display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 15px;
        margin-bottom: 30px; /* Keep or adjust if needed */
    }

    /* ---> NEW: Position Mute Button Top-Right on Small Screens <--- */
    #mute-button2
    {
    	display:inline-flex;
        position: block;
        top: 15px;         /* Distance from top edge */
        left: 15px;        /* Distance from right edge */
        margin: 0;         /* Reset any margins it might have had */
        z-index: 1001;     /* High z-index to stay on top */
        font-size: 0.9rem; /* Reset size if changed below */
        padding: 8px 15px; /* Reset padding if changed below */
        max-width: 50px;
        order: -1;
    }
    #mute-button
    {
    display:none;
    }
    .header-actions {
        margin-left: 0; /* << Ensure auto margin is removed */
        order: 1;       /* Optional: Ensure it's visually last */
        /* Keep display:flex, align-items:center, gap:10px from base rule or re-declare */
        display: flex;
        align-items: center;
        gap: 10px;
        /*max-width:130px;*/
    }
        #kdjtitle {
        order: 0; /* Keep it in the middle */
        flex-grow: 1;
        flex-shrink: 1;
        text-align: center;
        margin: 0 5px; /* Add minimal side margin */
    }
}

@media only screen and (max-width: 480px)
{
.dj-box.superactive
{
    width:98% !important;
    max-width:98% !important;
    min-width:98% !important;
}
.dj-box.club
{
    min-height:107px !important;
}
.dj-info
{
overflow: visible;
}
.header-actions 
{
        gap: 5px;
}
.dj-dj-title
{
        font-size: 0.9rem;
}
    html
    {
        font-size: 12px;
    }
    .neon-text
    {
        /* Reduce glow on small screens if needed for performance/clarity */
        text-shadow: 0 0 5px var(--secondary-color), 0 0 10px var(--glow-color);
    }
     .dj-profile-image-container
     {
        width: 60px;
        height: 60px;
        display:block;
    }
     .dj-name
     {
        font-size: 1.2rem;
    }
    .dj-genre
     {
        font-size: 0.7rem;
    }
     /* Optional: Adjust button position/size slightly for very small screens */
     #mute-button, #mute-button2
     {
         top: 10px;
         right: 10px;
         padding: 6px 12px; /* Make slightly smaller */
         font-size: 0.8rem;
     }
}

/* Responsive (Keep if needed) */
@media (max-width: 768px)
{
    .cybr-btn { font-size: 12px; padding: 0.5rem 1.0rem; }
}
@media (max-width: 480px)
{
    .cybr-btn 
    {
    font-size: 11px;
    }
    .dropdown-toggle-btn
    {
    max-width: 140px;
    min-width: 110px;
    }
}

@media only screen and (max-width: 768px)
{
#event-timeframe-filter, #venue-type-filter
{
top: 76px;
}
.club-area-section:nth-of-type(1)
{
margin-top:22px;
}
.club .dj-info
{
  max-width: 390px;
  margin-top:6px;
}
.club .dj-name, .club .dj-name2
{
  max-width: 376px;
}
.move-left 
{
  position: absolute;
  top: 82px;
  left: 8px;
  z-index:15;
  display:block;
}
.dj-profile-image-container
{
    margin-right: 16px;
    margin-bottom:8px;
}
.club .dj-profile-image-container
{
    margin-bottom:30px;
}
.extra .dj-profile-image-container
{
    margin-bottom:38px;
}
    header
    {
        /* Keep existing small screen header styles */
        flex-direction: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 15px;
        /* ---> ADD/ADJUST: Add padding to prevent overlap with fixed button <--- */
        /*padding-top: 60px;*/ /* Adjust this value as needed */
        margin-bottom: 33px; /* Adjust if needed */
    }

    /* ---> NEW: Position Mute Button Top-Right on Small Screens <--- */
    #mute-button, #mute-button2
    {
        /*position: fixed; */  /* Position relative to the viewport */
        top: 15px;         /* Distance from top edge */
        right: 15px;        /* Distance from right edge */
        margin: 0;         /* Reset any margins it might have had */
        z-index: 1001;     /* High z-index to stay on top */
    }
    #mute-button2
    {
        position: static;       /* Ensure it's in the grid flow */
        grid-column: 1 / 2;     /* Optional: Explicitly place in first column */
        justify-self: start;    /* Align button itself to the start (left) */
        margin: 0;              /* Reset margin */
        display: inline-flex !important; /* Ensure visible */
        /* Adjust size */
        padding: 0.4rem 0.6rem;
        min-width: 70px;
        font-size: 0.85em;
        transform: translateZ(0); /* Keep rendering fix */
    }
    #kdjtitle {
        grid-column: 2 / 3; /* Optional: Explicitly place in second column */
        text-align: center; /* << Center text within the flexible middle column */
        margin: 0; /* Reset margin if needed */
        /* Remove flex properties */
        /* flex-grow: 1; */
        /* flex-shrink: 1; */
    }
    #kdjtitle a {
         display: inline-block; /* Prevent link stretching */
         color: inherit;
         text-decoration: none;
    }
    .header-actions {
        grid-column: 3 / 4; /* Optional: Explicitly place in third column */
        justify-self: end; /* << Align the container to the end (right) */
        margin-left: 0;    /* Remove auto margin */
        /* Keep internal flex styles for buttons inside this div */
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .header-icon-button {
         width: 32px;
         height: 32px;
         padding: 5px;
    }
  #details-modal h2
  {
  font-size:1.4em ! important;
  }
  #search-modal
  {
  padding: 10px;
  }
  #search-modal-content {
    /* Ensure it's flex column if not already, for results to grow */
    display: flex;
    flex-direction: column;
    /* max-height: 86vh; /* Already there, good */
    
        width: 100%;
    max-width: 1100px; /* Max width for desktop */
    height: 100%; /* Full height of the overlay */
    max-height: 100vh; /* Ensure it doesn't exceed viewport height */

    display: flex;
    flex-direction: column;
    position: relative; 
    color: var(--text-color);
    
    padding: 20px; 
    box-sizing: border-box;
    /* The content div itself does not scroll; its children do. */
    overflow: hidden;
}
.search-modal-header-controls {
    display: flex;
    justify-content: space-between; /* Puts title left, button right */
    align-items: center;
    margin-bottom: 15px; /* Space below header/title area */
    flex-shrink: 0;
}
.search-modal-header-controls h2 {
    margin-bottom: 0; /* Remove bottom margin from h2 as parent div handles it */
}


  #search-modal .modal-content
  {
  width: 92%;
  }
  /*
  #search-keyword
  {
  max-width:280px;
  font-size: 1.0em;
  }
  */
  #search-modal .search-main-input
  {
  display: block;
  margin-bottom: 55px;
  }
  #search-keyword
  {
  display: block;
  width:100%;
  margin-bottom:14px;
  }
  #search-modal
  {
    padding: 0px;
  }
  #search-modal .filter-group select
  {
  font-size: 1.0em;
  }
  #search-submit-btn
  {
   position: absolute;
   right:32px;
  }
  .search-filters
  {
  gap: 10px;
  padding-top: 5px;
  margin-top: 5px;
  }
  
}


@media only screen and (max-width: 680px)
{
.search-main-input
{
/*display: block; */
margin-top: 10px;
}
#details-modal-title-holder
{
max-width: 240px;
}

.club .dj-profile-image-container
{
    margin-bottom:28px;
}
.extra .dj-profile-image-container
{
    margin-bottom:32px;
}
.club .dj-info
{
margin-bottom: 10px;
}
}
@media only screen and (max-width: 480px)
{

#mute-button, #mute-button2
{
 top: 10px;
 right: 10px;
 padding: 6px 12px; /* Make slightly smaller */
 font-size: 0.8rem;
}
#details-modal-header
{
display:block ! important;
margin-top:4px ! important;
}
#details-modal h2
{
font-size:1.4em ! important;
}

.club .dj-profile-image-container
{
    margin-bottom:20px;
}
.extra .dj-profile-image-container
{
    margin-bottom:30px;
}
.club .dj-info
{
margin-bottom: 8px;
}
}

@media only screen and (max-width: 391px) 
{
  /* iPhone 12 styles */
  #details-modal-header
  {
  display:block ! important;
  margin-top:4px ! important;
  }
  #details-modal h2
  {
  font-size:1.2em ! important;
  }
　.modal-content.neon-look 
  {
　　padding-top: 10px ! important;
　}

.club .dj-profile-image-container
{
    margin-bottom:20px;
}
.extra .dj-profile-image-container
{
    margin-bottom:30px;
}
.club .dj-info
{
margin-bottom: 4px;
}
}
@media only screen and (max-width: 376px)
{
  /* iPhone SE styles */
#details-modal-header
  {
  display:block ! important;
  margin-top:4px ! important;
  }
  #details-modal h2
  {
  font-size:1.2em ! important;
  }
  .modal-content.neon-look {
　　padding-top: 10px ! important;
　　}

.club .dj-profile-image-container
{
    margin-bottom:20px;
}
.extra .dj-profile-image-container
{
    margin-bottom:30px;
}
.club .dj-info
{
margin-bottom: 4px;
}
}
/* Add laser/shape animations (Example) */
@keyframes laser-scan
{
    0%, 100% { box-shadow: 0 0 5px var(--secondary-color), 0 0 10px var(--secondary-color), 0 0 15px var(--glow-color), inset 0 0 3px var(--secondary-color); }
    50% { box-shadow: 0 0 15px var(--glow-color), 0 0 25px var(--glow-color), 0 0 35px var(--glow-color), inset 0 0 8px var(--glow-color); }
}