/* --- Root & Reset --- */
* { box-sizing: border-box; }

/* --- Light Mode Background --- */
/* --- Base Body (Light Mode) --- */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #ffffff;
    margin: 0;
    overflow-x: hidden;
    min-height: 100vh;
    position: relative;
    
    /* Background A: Light Mode (Lover) */
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('/Assets/images/lover.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-color: #fdbbfc; /* Fallback color */
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('/Assets/images/midnights.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    z-index: -1; /* Stay behind content */
    opacity: 0;  /* Hidden by default */
    transition: opacity 1s ease-in-out; /* Smooth fade duration */
}


/* --- The 50% Scaling Logic --- */

#content-wrapper {
    transform: scale(0.5);
    transform-origin: top left;
    width: 200%;
    padding: 30px;
    position: absolute;
    z-index: 1;
    top: 70px;
}



/* NAVIGATION BAR SIZE FOR SMALLER SCREEN*/

@media (max-width: 992px) {
    .navbar {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between;
        padding: 0 0.5rem !important;
        height: 70px !important;
    }

    /* Force the logo container to stay in one line */
    .logo {
        flex-shrink: 1; 
        min-width: 0; 
        white-space: nowrap;
    }

    .logo img {
        height: 25px; /* Scaled down slightly more */
    }

    #logo-title {
        font-size: 1rem; 
        letter-spacing: 0.5px;
        margin-left: 5px;
    }


    .d-flex.align-items-center {
        gap: 3px; /* Even tighter gap */
    }

    .toggle-switch {
        transform: scale(0.7);
        margin-right: 5px !important;
    }
}

/* --- Navbar & Hamburger --- */
.navbar {
    position: relative;
    overflow: hidden;
    height: 70px;
background: radial-gradient(circle,rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
}

.navbar-container {
    position: relative;
    z-index: 2; /* Keeps logo and buttons above particles */
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0 1rem;
}


.logo {
  display: flex;          /* Enables Flexbox */
  align-items: center;    /* Vertically centers image and text */
  justify-content: center; /* Horizontally centers the group in the header */
}

.logo img { height: 40px; width: auto; }

#logo-title {
    font-family: "Style Script", cursive;
    letter-spacing: 5px;
    font-size: 1.7rem;
    font-weight: 800;
    color: #ffffff;
    margin-left: 10px;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

 #logo-title {
    background: linear-gradient(
        to right, 
        #ffffff,   
        #ffd1ea,   
        #e22b92, 
        #ffffff   
    );
    background-size: 200% 100%;

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    animation: textGradient 3s linear infinite;

    font-weight: 800;
    display: inline-block;

    /* slightly stronger but still soft glow */
    filter: drop-shadow(0 0 3px rgba(4, 0, 2, 0.45));
}

@keyframes textGradient {
    from { background-position: 0% center; }
    to   { background-position: 200% center; }
}

.tooltip {
    z-index: 10000 !important; 
    font-family:  sans-serif; 
    font-size: 0.7rem;
}




.btn-circle-download {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.4);
    background: transparent;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.btn-circle-download:hover {
    background-color: #fdbbfc;
    color: #7f0757;
    transform: scale(1.1);
}

/* Subtle Bouncing Arrow Animation */
.arrow-down {
    animation: arrowBounce 1.5s infinite ease-in-out;
}

@keyframes arrowBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(3px); }
}


.navbar .d-flex {
    flex-wrap: nowrap;
}



.menu-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 5px;
    width: 45px;
    height: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.menu-btn span { width: 25px; height: 3px; background-color: white; border-radius: 2px; }

/* --- Soundboard Layout --- */
.main-grid-layout {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 25px;

}

/* Mobile Phone Vertical Split */
/* Mobile Phone Vertical Split */
@media (max-width: 768px) {
    .main-grid-layout {
        display: block;
    }

    .soundboard-section {
        margin-bottom: 20px; 
    }

    .fillers-row {
        margin-top: 0; 
    }

    .navbar {
        display: flex;
        flex-direction: row; 
        justify-content: space-between;
        font-size: 12px; 
        height: auto;
    }
}

.fillers-row { grid-column: span 2; margin-top: 20px; }

.soundboard-section {
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.15);
    background: rgba(255, 255, 255, 0.05); 
    backdrop-filter: blur(2x);
    -webkit-backdrop-filter: blur(2px); 
    border: 1px solid rgba(255, 255, 255, 0.1); 
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); 
}

/* --- MINIMIZED LABELS --- */
#card-label {
    font-family: "Playwrite NO", cursive;
    text-align: center;
    letter-spacing: 1.5px;
    font-weight: 800;
    font-size: 2rem;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 10px;
    margin-bottom: 20px;
    color: #ffffff;
}

.version-divider {
    grid-column: 1 / -1;
    border: none;
    height: 5px;
   background: rgba(0, 0, 0, 0.25);
    margin: 18px 0 22px 0;
}

.sound-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 15px;
}

/* --- BUTTONS: RESTORED HOVER & ACTIVE --- */
.sound-btn {
    height: 90px;
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid rgba(0,0,0,0.1);
    transition: filter 0.15s ease, transform 0.1s ease, background-color 0.2s;
    color: #000;
}

.sound-btn:hover {
    background: #fda6b1 !important;
    color: #000 !important;
    font-weight: 700;
    filter: brightness(0.8);
    transform: scale(1.03);
}

.key-active {
    background: #ff7e8f !important;
    color: #000 !important;
    font-weight: 700;
    transform: scale(0.99);
    box-shadow: 0 0 20px rgba(39, 174, 96, 0.4);
}

/* --- OFFCANVAS & NAV (LIGHT MODE) --- */
.offcanvas { padding-top: 5rem; background-color: #ffffff; }

.custom-nav-btn {
    background-color: transparent !important;
    color: #212529 !important; /* Visible Dark Text */
    font-family: sans-serif;
    font-size: 0.95rem;
    padding: 12px 0;
    border: none;
    box-shadow: none !important;
    text-transform: uppercase;
    width: 100%;
    text-align: left;
    transition: all 0.3s ease;
}

.custom-nav-btn:hover {
    color: #0d47a1 !important; /* Light Mode Hover Color */
    padding-left: 8px;
}
  
.sub-link {
    color: #0d47a1 !important; /* Visible Dark Blue */
    padding: 8px 0;
    font-size: 0.85rem;
    text-decoration: none;
    display: block;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.sub-link:hover { color: #00226c !important; padding-left: 10px; }


/* Dark Mode Overrides for the Circle */
body.dark-mode .btn-circle-download {
    border-color: #ffffff;
    color: #fbacff;
}

body.dark-mode .btn-circle-download:hover {
    background-color: #ff94d1;
    color: #121212;
    box-shadow: 0 0 12px rgba(102, 227, 255, 0.4);
}

/* Optional: Style the tooltip box to match your Dark Mode */
body.dark-mode .tooltip-inner {
    background-color: #f0e4ff;
    color: #121212;
    border: 1px solid #ffffff;
}

body.dark-mode .bs-tooltip-start .tooltip-arrow::before {
    border-left-color: #66e3ff; /* Fixes arrow color for 'left' placement */
}

/* --- Dark Mode Active State --- */
body.dark-mode { 
    color: rgb(255, 255, 255);
}

body.dark-mode::before {
    opacity: 1; 
}


.navbar {
    transition: background 1s ease-in-out;
}

body.dark-mode .navbar {
    background: radial-gradient(circle,rgba(233, 174, 238, 1) 0%, rgba(145, 0, 181, 1) 100%) !important;
}

body.dark-mode .soundboard-section {    
    background: rgba(255, 255, 255, 0.05); 
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px); 
    border: 1px solid rgba(255, 255, 255, 0.1); 
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); 
}

body.dark-mode #card-label { color: #ffffff; border-bottom: 2px solid #ffeaff; }
body.dark-mode .offcanvas { background-color: #121212; color: white; }
body.dark-mode .custom-nav-btn { color: #ffffff !important; }
body.dark-mode .custom-nav-btn:hover { color: #7cfc00 !important; }
body.dark-mode .sub-link { color: #66e3ff !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
body.dark-mode .accordion-button::after { filter: invert(1); }
body.dark-mode .version-divider {
    grid-column: 1 / -1;     /* full width of grid */
    border: none;
    height: 5px;
    background: rgba(255, 255, 255, 0.25);
    margin: 18px 0 22px 0;   /* gap above & below */
}

body.dark-mode #logo-title {
    /* High-contrast purple and white gradient for visibility */
    background: linear-gradient(
        to right, 
        #ffffff, 
        #e9aeef,
        #360c42, 
        #ffffff  
    );
    background-size: 200% auto;
    
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* Smooth 3-second shimmer */
    animation: textGradient 3s linear infinite;
    
    font-weight: 800; /* Extra thick to make the colors stand out */
    display: inline-block;
    
    /* Adds a subtle outer glow so it doesn't blend into the radial gradient */
    filter: drop-shadow(0 0 3px rgba(233, 174, 238, 0.5));
}

@keyframes textGradient {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

/* 4. Define the movement */
@keyframes textGradient {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

/* Buttons Default Colors */
#intros{ background-color: rgb(216, 105, 214);}
.btn-qualify { background-color: rgb(248, 111, 255); }
.btn-version2 { background-color: #3f266d; color: #e3f2fd;}
.btn-rebuttals { background-color: rgb(163, 0, 117);color: #e3f2fd; }
.btn-fillers { background-color: rgb(68, 9, 83); color: #e3f2fd; }

/* Toggle Styling */
.toggle-switch { position: relative; width: 45px; height: 24px; }
.toggle-switch input { display: none; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #fdbbfc; transition: .4s; border-radius: 34px;}
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: #ffffff; transition: .4s; border-radius: 50%; }
input:not(:checked) + .slider { background-color: #7c2186;}
input:not(:checked) + .slider:before { transform: translateX(21px); background-color: #7c2186; box-shadow: inset -6px -2px 0px 0px #d8dbe0; }