*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif;
}

body{
color:white;
line-height:1.6;
font-size:18px;
overflow-x:hidden;
background:black;
}


/* STAGE LIGHTS */

body::before{
content:"";
position:fixed;
top:0;
left:0;
width:100%;
height:100%;

background:
radial-gradient(circle at 30% 20%, rgba(255,255,255,0.08), transparent 45%),
radial-gradient(circle at 70% 30%, rgba(0,212,255,0.20), transparent 50%),
radial-gradient(circle at 50% 80%, rgba(0,0,0,0.4), transparent 60%);

animation:lightsMove 10s infinite alternate;
z-index:-1;
}

@keyframes lightsMove{
0%{transform:translateY(0)}
100%{transform:translateY(-120px)}
}


/* VIDEO OVERLAY */

body::after{
content:"";
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.45);
z-index:-1;
}


/* VIDEO BACKGROUND */

#bg-video{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
z-index:-3;
filter:brightness(0.8) contrast(1.25) saturate(1.1);
}


/* HEADER */

header{
background:rgba(0,0,0,0.65);
backdrop-filter:blur(6px);
padding:20px;
}

nav{
display:flex;
justify-content:space-between;
align-items:center;
max-width:1100px;
margin:auto;
}

nav ul{
display:flex;
gap:25px;
list-style:none;
}

nav a{
color:white;
text-decoration:none;
font-weight:bold;
position:relative;
}


/* NAV HOVER */

nav a::after{
content:"";
position:absolute;
width:0%;
height:2px;
background:#00d4ff;
left:0;
bottom:-5px;
transition:0.3s;
}

nav a:hover::after{
width:100%;
}


.logo{
font-size:40px;
font-weight:bold;
letter-spacing:2px;
}


/* HERO */

.hero{
height:90vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
}

.hero h1{
font-size:60px;
}

.hero p{
font-size:22px;
}


/* SOUNDWAVE */

.soundwave{
display:flex;
gap:6px;
margin-top:20px;
justify-content:center;
}

.soundwave span{
width:6px;
height:30px;
background:#00d4ff;
animation:wave 1s infinite ease-in-out;
}

.soundwave span:nth-child(2){animation-delay:0.1s}
.soundwave span:nth-child(3){animation-delay:0.2s}
.soundwave span:nth-child(4){animation-delay:0.3s}
.soundwave span:nth-child(5){animation-delay:0.4s}

@keyframes wave{
0%{height:20px}
50%{height:60px}
100%{height:20px}
}


/* SECTIONS */

section{
padding:60px 20px;
max-width:1100px;
margin:auto;
}


/* MUSIC SCHOOL */

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

.guitar-courses{
display:flex;
justify-content:center;
gap:30px;
margin-top:30px;
flex-wrap:wrap;
}

.guitar-courses a{
text-decoration:none;
color:inherit;
}

.course-card{
background:black;
padding:25px;
border-radius:10px;
width:250px;
cursor:pointer;
transition:0.25s;
border:1px solid white;
}

.course-card:hover{
transform:translateY(-8px);
box-shadow:
0 0 10px #00d4ff,
0 0 25px #00d4ff;
}

.course-img{
width:100%;
height:160px;
object-fit:cover;
border-radius:8px;
margin-bottom:15px;
}

.course-card h3{
font-size:22px;
}


/* SHOW CARDS */

.cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
}

.card{
background:black;
padding:25px;
border-radius:10px;
border:1px solid rgba(255,255,255,0.8);
transition:0.3s;
min-height:140px;
}

.card:hover{
transform:translateY(-8px) scale(1.03);
background:#111;
box-shadow:
0 0 10px #00d4ff,
0 0 20px #00d4ff;
}

.card h3{
margin-bottom:12px;
font-size:22px;
}

.card p{
margin:5px 0;
color:#ddd;
}


/* ===============================
UPCOMING SHOW CARDS
=============================== */

#shows-container{

display:flex;
justify-content:center;
gap:30px;
flex-wrap:wrap;

}


/* SHOW CARD */

.show-card{

width:320px;
height:360px;

position:relative;

background-size:cover;
background-position:center;

border-radius:14px;

overflow:hidden;

display:flex;
align-items:flex-end;

border:1px solid rgba(255,255,255,0.15);

transition:all 0.35s ease;

box-shadow:0 4px 15px rgba(0,0,0,0.6);

}


/* DARK OVERLAY FOR TEXT VISIBILITY */

.show-card::before{

content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;

background:linear-gradient(
to top,
rgba(0,0,0,0.9),
rgba(0,0,0,0.5),
rgba(0,0,0,0.1)
);

}


/* TEXT CONTAINER */

.show-info{

position:relative;

padding:20px;

width:100%;

text-align:center;

}


/* TITLE */

.show-info h3{

margin-bottom:8px;
font-size:22px;
font-weight:600;

}


/* TEXT */

.show-info p{

margin:4px 0;
font-size:16px;
opacity:0.9;

}


/* PRICE */

.show-price{

margin-top:8px;
font-weight:bold;
color:#00d4ff;
font-size:18px;

}


/* HOVER EFFECT (same glow as other cards) */

.show-card:hover{

transform:translateY(-8px);

box-shadow:
0 0 10px #00d4ff,
0 0 20px #00d4ff;

}



/* BOOK US FORM */

#book{
text-align:center;
}

#book form{
display:flex;
flex-direction:column;
gap:15px;
margin-top:30px;
max-width:550px;
margin-left:auto;
margin-right:auto;
}

#book input,
#book textarea{
background:black;
color:white;
border:1px solid white;
border-radius:8px;
padding:14px;
font-size:16px;
outline:none;
}

#book textarea{
height:120px;
resize:none;
}

#book button{
width:160px;
margin:auto;
background:black;
color:white;
border:1px solid white;
border-radius:8px;
padding:12px;
cursor:pointer;
transition:0.25s;
}

#book button:hover{
background:#00d4ff;
color:black;
box-shadow:0 0 15px #00d4ff;
}


/* BAND CONNECT FORM */

#connect{
text-align:center;
}

#connect form{
display:flex;
flex-direction:column;
gap:15px;
margin-top:30px;
max-width:550px;
margin-left:auto;
margin-right:auto;
}

#connect input,
#connect textarea{
background:black;
color:white;
border:1px solid white;
border-radius:8px;
padding:14px;
font-size:16px;
outline:none;
}

#connect textarea{
height:120px;
resize:none;
}

#connect button{
width:160px;
margin:auto;
background:black;
color:white;
border:1px solid white;
border-radius:8px;
padding:12px;
cursor:pointer;
transition:0.25s;
}

#connect button:hover{
background:#00d4ff;
color:black;
box-shadow:0 0 15px #00d4ff;
}



/* GALLERY */

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

.gallery img{
width:100%;
border-radius:8px;
transition:0.3s;
border:1px solid white;
}

.gallery img:hover{
transform:scale(1.08);
box-shadow:0 0 20px #00d4ff;
}

/* =================================
   UPCOMING SHOWS SECTION
================================= */

#shows{
text-align:center;
padding:80px 20px;
}

#shows h1{
margin-bottom:40px;
font-size:42px;
}

.cards{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:30px;
}


/* ADMIN PANEL */

.admin-panel{

height:100vh;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;

}

.admin-title{

font-size:60px;
margin-bottom:60px;

}

.admin-buttons{

display:flex;
flex-direction:column;
gap:25px;
width:320px;

}

.admin-btn{

padding:18px;
font-size:22px;
background:black;
border:1px solid white;
color:white;
cursor:pointer;
border-radius:8px;
transition:0.3s;

}

.admin-btn:hover{

transform:translateY(-5px);
box-shadow:
0 0 10px #00d4ff,
0 0 25px #00d4ff;

}

/* LOGIN PAGE */

.login-section{

height:100vh;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;

}

.login-title{

font-size:60px;
margin-bottom:40px;

}

.login-form{

width:320px;
display:flex;
flex-direction:column;
gap:15px;

}


/* LOGIN INPUTS — DARK STYLE */

.login-form input{

padding:12px;
border-radius:6px;
border:1px solid white;
font-size:16px;
color:white;
background:black;

}

.login-form input::placeholder{

color:#bbb;

}


/* LOGIN BUTTON */

.login-form button{

padding:12px;
background:black;
border:1px solid white;
color:white;
cursor:pointer;
font-size:18px;
transition:0.3s;

}

.login-form button:hover{

box-shadow:
0 0 10px #00d4ff,
0 0 25px #00d4ff;

}


.forgot{

margin-top:10px;
font-size:14px;

}

.forgot a{

color:#00d4ff;
text-decoration:none;

}

/* =================================
   EXTRA INFORMATION FIELD
================================= */

.extra-info{

height:120px;
padding:12px;
border-radius:6px;
border:1px solid white;
background:black;
color:white;
font-size:16px;
resize:vertical;

}

.extra-info::placeholder{

color:#bbb;

}

/* =================================
   DATE INPUT ICON FIX (ADMIN FORM)
   Makes the calendar icon visible
   on dark background
================================= */

input[type="date"]::-webkit-calendar-picker-indicator{
filter: invert(1);
cursor:pointer;
}

/* ===============================
MANAGE SHOWS
=============================== */

.manage-shows{

display:flex;
flex-direction:column;
gap:20px;
width:600px;

}

.manage-show-card{

display:flex;
background:black;
border-radius:10px;
overflow:hidden;
border:1px solid white;

}

.manage-poster{

width:160px;
height:120px;

background-size:cover;
background-position:center;

}

.manage-info{

padding:15px;
flex:1;

}

.showButtons{

margin-top:10px;
display:flex;
gap:10px;

}

.showButtons button{

padding:6px 12px;
background:black;
border:1px solid white;
color:white;
cursor:pointer;
transition:0.25s;

}

.showButtons button:hover{

box-shadow:
0 0 10px #00d4ff,
0 0 20px #00d4ff;

}

/* BUY TICKET FORM FIX */

#ticketForm input{
width:100%;
padding:14px;
background:black;
color:white;
border:1px solid white;
border-radius:10px;
font-size:16px;
}

#ticketForm input::placeholder{
color:#aaa;
}

#ticketForm{
max-width:420px;
margin:0 auto;
display:flex;
flex-direction:column;
gap:18px;
}

#ticketForm button{
padding:14px;
background:black;
color:white;
border:1px solid white;
border-radius:10px;
font-size:18px;
cursor:pointer;
transition:0.3s;
}

#ticketForm button:hover{
background:#00d4ff;
color:black;

box-shadow:0 0 10px #00d4ff,
           0 0 20px #00d4ff,
           0 0 40px #00d4ff;
}