/* =================================
   VIZAG JAMHUB - ALL BUTTONS
================================= */


/* =================================================================
   FULLSCREEN NAVIGATION - GLASS BUTTONS
================================================================= */

.nav-links li a {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 320px;
    height: 58px;

    padding: 0 24px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.14),
            rgba(255, 255, 255, 0.045)
        );

    backdrop-filter:
        blur(18px)
        saturate(160%);

    -webkit-backdrop-filter:
        blur(18px)
        saturate(160%);

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

    border-radius: 16px;

    color: white;

    font-size: 18px;
    font-weight: 500;

    text-align: center;
    text-decoration: none;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        inset 0 -1px 0 rgba(255, 255, 255, 0.04),
        0 8px 30px rgba(0, 0, 0, 0.20);

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;

}


.nav-links li a:hover {

    transform:
        translateY(-3px)
        scale(1.02);

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.20),
            rgba(0, 212, 255, 0.08)
        );

    border-color:
        rgba(0, 212, 255, 0.55);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 0 12px rgba(0, 212, 255, 0.25),
        0 0 28px rgba(0, 212, 255, 0.12),
        0 12px 30px rgba(0, 0, 0, 0.22);

}


.nav-links li a:active {

    transform:
        translateY(0)
        scale(0.98);

}


.nav-links li a:focus-visible {

    outline:
        2px solid rgba(0, 212, 255, 0.80);

    outline-offset: 3px;

}


/* =================================================================
   INDEX - BOOK US
================================================================= */

#book button {

    width: 160px;

    margin: auto;

    padding: 12px;

    background: black;

    color: white;

    border:
        1px solid white;

    border-radius: 8px;

    cursor: pointer;

    transition: 0.25s;

}


#book button:hover {

    background: #00d4ff;

    color: black;

    box-shadow:
        0 0 15px #00d4ff;

}


/* =================================================================
   INDEX - BAND CONNECT
================================================================= */

#connect button {

    width: 160px;

    margin: auto;

    padding: 12px;

    background: black;

    color: white;

    border:
        1px solid white;

    border-radius: 8px;

    cursor: pointer;

    transition: 0.25s;

}


#connect button:hover {

    background: #00d4ff;

    color: black;

    box-shadow:
        0 0 15px #00d4ff;

}


/* =================================================================
   INDEX - SING ALONG EXPERIENCE
================================================================= */

.sing-along-card {

    position: relative;

    width: 100%;
    max-width: 1050px;
    min-height: 260px;

    padding: 40px 60px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    color: white;

    text-align: center;
    text-decoration: none;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.13),
            rgba(255, 255, 255, 0.04)
        );

    backdrop-filter:
        blur(20px)
        saturate(160%);

    -webkit-backdrop-filter:
        blur(20px)
        saturate(160%);

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

    border-radius: 22px;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        inset 0 -1px 0 rgba(255, 255, 255, 0.04),
        0 15px 45px rgba(0, 0, 0, 0.25);

    transition:
        transform 0.4s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease,
        background 0.4s ease;

}


/* =================================
   SING ALONG - MOVING GLASS LIGHT
================================= */

.sing-along-card::before {

    content: "";

    position: absolute;

    top: -50%;
    left: -60%;

    width: 40%;
    height: 200%;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.14),
            transparent
        );

    transform:
        rotate(20deg);

    transition:
        left 0.8s ease;

}


.sing-along-card:hover::before {

    left: 130%;

}


/* =================================
   SING ALONG - BACKGROUND GLOW
================================= */

.sing-along-card::after {

    content: "";

    position: absolute;

    left: 50%;
    bottom: -120px;

    width: 500px;
    height: 200px;

    transform:
        translateX(-50%);

    background:
        radial-gradient(
            ellipse,
            rgba(0, 212, 255, 0.18),
            transparent 70%
        );

    pointer-events: none;

    opacity: 0.5;

    transition:
        opacity 0.4s ease,
        transform 0.4s ease;

}


/* =================================
   SING ALONG - CARD HOVER
================================= */

.sing-along-card:hover {

    transform:
        translateY(-8px)
        scale(1.01);

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.18),
            rgba(0, 212, 255, 0.06)
        );

    border-color:
        rgba(0, 212, 255, 0.55);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 0 15px rgba(0, 212, 255, 0.20),
        0 0 40px rgba(0, 212, 255, 0.12),
        0 20px 50px rgba(0, 0, 0, 0.30);

}


.sing-along-card:hover::after {

    opacity: 1;

    transform:
        translateX(-50%)
        scale(1.2);

}


/* =================================
   SING ALONG - MICROPHONE
================================= */

.sing-along-icon {

    position: relative;

    z-index: 2;

    width: 62px;
    height: 62px;

    margin-bottom: 15px;

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 27px;

    background:
        rgba(255, 255, 255, 0.07);

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

    border-radius: 50%;

    transition:
        transform 0.35s ease,
        color 0.35s ease,
        box-shadow 0.35s ease;

}


.sing-along-card:hover .sing-along-icon {

    color: #00d4ff;

    box-shadow:
        0 0 15px rgba(0, 212, 255, 0.30),
        0 0 35px rgba(0, 212, 255, 0.15);

    animation:
        microphonePulse 1.2s ease-in-out infinite;

}


@keyframes microphonePulse {

    0%,
    100% {

        transform:
            scale(1.08);

    }

    50% {

        transform:
            scale(1.18);

    }

}


/* =================================
   SING ALONG - TITLE
================================= */

.sing-along-card h2 {

    position: relative;

    z-index: 2;

    margin:
        0 0 8px;

    font-size: 32px;
    font-weight: 700;

    letter-spacing: 5px;

    text-transform: uppercase;

    transition:
        letter-spacing 0.4s ease,
        text-shadow 0.4s ease;

}


.sing-along-card:hover h2 {

    letter-spacing: 7px;

    text-shadow:
        0 0 15px rgba(0, 212, 255, 0.35);

}


/* =================================
   SING ALONG - LANGUAGES
================================= */

.sing-along-languages {

    position: relative;

    z-index: 2;

    margin-bottom: 12px;

    color: #00d4ff;

    font-size: 14px;

    letter-spacing: 2px;

}


/* =================================
   SING ALONG - DESCRIPTION
================================= */

.sing-along-card p {

    position: relative;

    z-index: 2;

    margin:
        0 0 18px;

    color:
        rgba(255, 255, 255, 0.72);

    font-size: 16px;

}


/* =================================
   SING ALONG - START ACTION
================================= */

.sing-along-action {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    font-size: 17px;
    font-weight: 600;

    transition:
        color 0.3s ease;

}


.sing-along-action span {

    display: inline-block;

    transition:
        transform 0.3s ease;

}


.sing-along-card:hover .sing-along-action {

    color: #00d4ff;

}


.sing-along-card:hover .sing-along-action span {

    transform:
        translateX(8px);

}


/* =================================
   SING ALONG - MINI EQUALIZER
================================= */

.sing-along-equalizer {

    position: relative;

    z-index: 2;

    height: 28px;

    margin-top: 18px;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 5px;

}


.sing-along-equalizer span {

    width: 3px;
    height: 7px;

    background:
        rgba(255, 255, 255, 0.65);

    border-radius: 10px;

    transition:
        background 0.3s ease;

}


/* =================================
   SING ALONG - EQUALIZER ANIMATION
================================= */

.sing-along-card:hover .sing-along-equalizer span {

    background: #00d4ff;

    animation:
        singEqualizer 0.65s ease-in-out infinite alternate;

}


.sing-along-card:hover
.sing-along-equalizer span:nth-child(1) {

    animation-delay: 0s;

}


.sing-along-card:hover
.sing-along-equalizer span:nth-child(2) {

    animation-delay: 0.15s;

}


.sing-along-card:hover
.sing-along-equalizer span:nth-child(3) {

    animation-delay: 0.30s;

}


.sing-along-card:hover
.sing-along-equalizer span:nth-child(4) {

    animation-delay: 0.10s;

}


.sing-along-card:hover
.sing-along-equalizer span:nth-child(5) {

    animation-delay: 0.25s;

}


@keyframes singEqualizer {

    from {

        height: 6px;

    }

    to {

        height: 27px;

    }

}


/* =================================================================
   FLOATING SOCIAL BUTTONS
================================================================= */

.floating-social a {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 55px;
    height: 55px;

    border-radius: 50%;

    color: white;

    font-size: 26px;

    text-decoration: none;

    transition:
        transform 0.3s,
        box-shadow 0.3s;

}


/* =================================
   INSTAGRAM
================================= */

.instagram-btn {

    background:
        radial-gradient(
            circle at 30% 110%,
            #fdf497 0%,
            #fdf497 5%,
            #fd5949 45%,
            #d6249f 60%,
            #285AEB 90%
        );

}


/* =================================
   WHATSAPP
================================= */

.whatsapp-btn {

    background: #25D366;

}


/* =================================
   SOCIAL BUTTON HOVER
================================= */

.floating-social a:hover {

    transform:
        translateY(-5px)
        scale(1.08);

    box-shadow:
        0 0 15px rgba(255, 255, 255, 0.45);

}


/* =================================================================
   LYRICS / CHORD BUTTONS
================================================================= */

.chord-btn {

    display: inline-block;

    padding: 12px 24px;

    background: black;

    color: white;

    border:
        1px solid white;

    border-radius: 10px;

    text-decoration: none;

    cursor: pointer;

    transition: 0.3s;

}


.chord-btn:hover {

    background: #00d4ff;

    color: black;

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

}


/* =================================================================
   ADMIN - LOGIN BUTTON
================================================================= */

.login-form button {

    padding: 12px;

    background: black;

    border:
        1px solid white;

    color: white;

    cursor: pointer;

    font-size: 18px;

    transition: 0.3s;

}

/* =================================
   ADMIN - LOGOUT BUTTON
================================= */

.logout-btn {

    border-color:
        rgba(255, 70, 70, 0.55);

}


.logout-btn:hover {

    background:
        rgba(255, 50, 50, 0.18);

    border-color:
        #ff4646;

    box-shadow:
        0 0 10px rgba(255, 50, 50, 0.60),
        0 0 25px rgba(255, 50, 50, 0.35);

}


.login-form button:hover {

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

}


/* =================================================================
   ADMIN - MANAGE SHOW BUTTONS
================================================================= */

.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;

}


/* =================================================================
   ADMIN - TICKET BUTTONS
================================================================= */

#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;

}

/* =================================
   TRANSPOSE BUTTONS
================================= */


/* =================================
   TRANSPOSE CONTAINER
================================= */

.transpose-container {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 8px;

    margin:
        20px auto 30px;

}


/* =================================
   TRANSPOSE LABEL
================================= */

.transpose-label {

    color:
        rgba(255, 255, 255, 0.75);

    font-size: 14px;

    font-weight: 600;

    letter-spacing: 0.5px;

}


/* =================================
   TRANSPOSE SELECT
================================= */

.transpose-select {

    appearance: none;

    -webkit-appearance: none;
    -moz-appearance: none;

    min-width: 170px;

    height: 46px;

    padding:
        0 45px 0 16px;

    color: #ffffff;

    font-size: 15px;

    font-weight: 600;

    background:
        linear-gradient(
            rgba(255, 255, 255, 0.08),
            rgba(255, 255, 255, 0.08)
        ),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='white'%3E%3Cpath d='M2 4l5 6 5-6'/%3E%3C/svg%3E")
        no-repeat right 16px center;

    background-color:
        rgba(15, 15, 15, 0.75);

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

    border-radius: 14px;

    backdrop-filter:
        blur(15px);

    -webkit-backdrop-filter:
        blur(15px);

    cursor: pointer;

    outline: none;

    transition:
        all 0.25s ease;

}


/* =================================
   TRANSPOSE SELECT HOVER
================================= */

.transpose-select:hover {

    border-color:
        rgba(0, 212, 255, 0.65);

    background-color:
        rgba(20, 20, 20, 0.90);

}


/* =================================
   TRANSPOSE SELECT FOCUS
================================= */

.transpose-select:focus {

    border-color:
        #00d4ff;

    box-shadow:
        0 0 0 2px
        rgba(0, 212, 255, 0.15);

}


/* =================================
   TRANSPOSE OPTIONS
================================= */

.transpose-select option {

    color:
        #ffffff;

    background:
        #111111;

    font-size: 15px;

    font-weight: 500;

}


/* =================================================================
   ACADEMY - COURSE GLASS BUTTONS
================================================================= */

.drum-btn,
.guitar-btn,
.vocals-btn,
.keyboard-btn {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 220px;
    height: 58px;

    padding: 0 24px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.14),
            rgba(255, 255, 255, 0.045)
        );

    backdrop-filter:
        blur(18px)
        saturate(160%);

    -webkit-backdrop-filter:
        blur(18px)
        saturate(160%);

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

    border-radius: 16px;

    color: white;

    font-size: 18px;
    font-weight: 500;

    text-align: center;

    cursor: pointer;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        inset 0 -1px 0 rgba(255, 255, 255, 0.04),
        0 8px 30px rgba(0, 0, 0, 0.20);

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;

}


/* =================================
   HOVER
================================= */

.drum-btn:hover,
.guitar-btn:hover,
.vocals-btn:hover,
.keyboard-btn:hover {

    transform:
        translateY(-3px)
        scale(1.02);

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.20),
            rgba(0, 212, 255, 0.08)
        );

    border-color:
        rgba(0, 212, 255, 0.55);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 0 12px rgba(0, 212, 255, 0.25),
        0 0 28px rgba(0, 212, 255, 0.12),
        0 12px 30px rgba(0, 0, 0, 0.22);

}


/* =================================
   ACTIVE
================================= */

.drum-btn:active,
.guitar-btn:active,
.vocals-btn:active,
.keyboard-btn:active {

    transform:
        translateY(0)
        scale(0.98);

}


/* =================================
   KEYBOARD FOCUS
================================= */

.drum-btn:focus-visible,
.guitar-btn:focus-visible,
.vocals-btn:focus-visible,
.keyboard-btn:focus-visible {

    outline:
        2px solid rgba(0, 212, 255, 0.80);

    outline-offset: 3px;

}


/* =================================================================
   ACADEMY - BUTTON LAYOUT / ACTIONS MOVED FROM ACADEMY.CSS
================================================================= */

.drum-buttons{

display:flex;

justify-content:center;

align-items:center;

gap:28px;

flex-wrap:wrap;

transition:.35s ease;

margin-bottom:35px;

}

.guitar-buttons{

display:flex;

justify-content:center;

align-items:center;

gap:28px;

flex-wrap:wrap;

transition:.35s ease;

margin-bottom:35px;

}

.vocals-buttons{
display:flex;
justify-content:center;
gap:25px;
flex-wrap:wrap;
margin-bottom:40px;
transition:.35s;
}

.keyboard-buttons{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:28px;
    flex-wrap:wrap;
    transition:.35s ease;
    margin-bottom:35px;
}

.enrollment-actions{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:15px;

    margin-top:28px;

    padding-top:20px;

    border-top:1px solid rgba(255,255,255,.06);
}

.registered-actions{
    display:flex;
    justify-content:center;

    gap:12px;

    margin-top:28px;
}

/* =================================================================
   ACADEMY - FINAL ENROLLMENT BUTTON
================================================================= */

.final-enroll-btn{
    width:100%;
    min-height:60px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    border-radius:12px;
    color:#666;
    font-size:1rem;
    font-weight:700;
    cursor:not-allowed;
    transition:
        transform .3s ease,
        color .3s ease,
        background .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.final-enroll-btn.ready{
    cursor:pointer;
    color:#fff;
    background:rgba(0,212,255,.13);
    border-color:rgba(0,212,255,.65);
    box-shadow:0 0 15px rgba(0,212,255,.10);
}

.final-enroll-btn.ready:hover{
    transform:translateY(-2px);
    background:rgba(0,212,255,.22);
    box-shadow:
        0 0 15px rgba(0,212,255,.30),
        0 0 35px rgba(0,212,255,.12);
}