/* Better box-sizing model so padding/border don't inflate widths */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Poppins', Arial, sans-serif;
    color: #ffffff;
    /* background is handled by the JS slideshow (.bg-slideshow) */
    background-size: cover;
    background-position: center;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

:root {
    --nav-height: 70px;
    --accent-blue: #0033A0;
    --accent-red: #C8102E;
    --panel-bg: rgba(255, 255, 255, 0.97);

    /* Gallery: enlarge the second card and admin/delete UI */
    .gallery {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 18px;
        align-items: start;
    }

    .gallery-item {
        position: relative;
        overflow: hidden;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.02);
    }

    .gallery-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block
    }

    .gallery-item figcaption {
        position: absolute;
        left: 12px;
        bottom: 12px;
        background: rgba(0, 0, 0, 0.4);
        color: #fff;
        padding: 6px 10px;
        border-radius: 8px;
        font-weight: 600;
        font-size: 0.95rem;
    }

    .del-img-btn {
        position: absolute;
        right: 8px;
        top: 8px;
        background: rgba(0, 0, 0, 0.6);
        color: #fff;
        border: none;
        padding: 6px 8px;
        border-radius: 8px;
        cursor: pointer
    }

    .del-img-btn:hover {
        background: rgba(255, 0, 0, 0.8)
    }

    @media (max-width: 900px) {
        .gallery {
            grid-template-columns: 1fr;
        }

    }

    --footer-height: 72px;
}

/* Panel page background - Unified with About Page (Deep Blue/Red + Smoke) */
body.panel-bg {
    /* Deep skyblue -> deep red blend (Same as About) */
    background: linear-gradient(135deg, #071b3a 0%, #0f3a7a 30%, #8a0f1a 100%);
    background-attachment: fixed;
    background-size: cover;
    position: relative;
    /* For smoke positioning */
    color: #fff;
    /* Ensure text directly on the body is white */
}

/* Center main container vertically on panel pages (Gallery/Events/Contact) and
   keep it positioned above the fixed footer. This will center the gallery box
   and align it nicely with the black footer at the bottom. */
body.panel-bg main.container {
    min-height: calc(100vh - var(--nav-height) - var(--footer-height));
    display: flex;
    flex-direction: column;
    /* don't vertically center panel pages - keep content flowing from top */
    justify-content: flex-start;
    align-items: center;
    gap: 28px;
    padding-bottom: 32px;
}

/* Ensure gallery itself is constrained and centered */
.gallery {
    width: min(1100px, 94%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}

.gallery-item {
    display: block;
    overflow: hidden;
    border-radius: 10px;
}

.gallery-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* New Events Manager Layout: Centered, Single Column, Attractive */
.events-manager-centered {
    width: min(900px, 94%);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
    background: rgba(255, 255, 255, 0.95);
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    /* Ensure it sits nicely on the page */
    margin-top: 0px;
}

/* Event Selection Area (Top) */
.events-selection-area {
    border-bottom: 2px solid rgba(0, 0, 0, 0.05);
    padding-bottom: 24px;
    text-align: center;
}

.calendar-header-centered {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    position: relative;
}

.calendar-header-centered h3 {
    margin: 0;
    font-size: 1.2rem;
    color: #444;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Horizontal List of Events */
.events-list-horizontal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
}

.event-row {
    background: #fff;
    border: 1px solid #eee;
    padding: 10px 16px;
    border-radius: 50px;
    /* Chip style */
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.event-row:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    border-color: #ffd700;
}

.event-row .ev-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: #333;
}

.event-row .ev-date {
    font-size: 0.85rem;
    color: #666;
    background: #f5f5f5;
    padding: 2px 8px;
    border-radius: 12px;
}

/* Hide the 'View' button in the chip view, the whole row is clickable */
.event-row button {
    display: none !important;
}

/* Event Display (Detail) */
.event-display-centered {
    text-align: center;
    animation: fadeIn 0.4s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.detail-header {
    margin-bottom: 20px;
}

#selected-title {
    font-size: 2.2rem;
    margin: 0 0 8px 0;
    color: #0033A0;
    /* Accent Blue */
    font-weight: 700;
}

#selected-date {
    font-size: 1.1rem;
    color: #C8102E;
    /* Accent Red */
    font-weight: 600;
    background: rgba(200, 16, 46, 0.08);
    /* Light red bg */
    display: inline-block;
    padding: 6px 16px;
    border-radius: 20px;
}

.event-description {
    font-size: 1.1rem;
    line-height: 1.7;
    max-width: 680px;
    margin: 0 auto 32px auto;
    color: #444;
}

/* Registration Form - Center Aligned */
.events-reg-form {
    width: 100%;
    max-width: 420px;
    background: #fdfdfd;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.events-reg-form h3 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #333;
    font-size: 1.25rem;
}

.form-group {
    margin-bottom: 16px;
}

.events-reg-form input {
    width: 100%;
    padding: 14px;
    border: 2px solid #eee;
    background: #fff;
    border-radius: 10px;
    font-size: 1rem;
    transition: var(--transition);
}

.events-reg-form input:focus {
    border-color: #ffd700;
    outline: none;
    background: #fff;
}

/* Ensure Admin Panel pops up nicely */
.admin-panel.popup {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: 320px;
    z-index: 10;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
    background: #333;
    color: #fff;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Tablet/Mobile Adjustments */
@media (max-width: 700px) {
    .events-manager-centered {
        padding: 24px;
        width: 100%;
    }

    .events-list-horizontal {
        flex-direction: column;
        /* Stack chips on mobile */
        width: 100%;
    }

    .event-row {
        width: 100%;
        justify-content: center;
    }

    #selected-title {
        font-size: 1.8rem;
    }
}

/* Smoke animation at the top of the About page (HD-quality soft color clouds)
   Page background for About is pure white; smoke sits visually at the top area. */
.about-page {
    /* single unified background for About: deep skyblue -> deep red blend */
    background: linear-gradient(135deg, #071b3a 0%, #0f3a7a 30%, #8a0f1a 100%);
    position: relative;
    color: #111;
}

.smoke-wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60vh;
    /* larger smoke band to blend with single background */
    z-index: 0;
    /* behind page content (container will be z-index:1) */
    pointer-events: none;
    overflow: hidden;
    will-change: transform, opacity;
}

.smoke {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.34;
    /* tuned for dark gradient + screen blend */
    mix-blend-mode: screen;
    /* lighten and add color to the dark gradient */
    transform-origin: center;
}

.smoke.s1 {
    width: 150vmin;
    height: 150vmin;
    left: -38%;
    top: -22%;
    background: radial-gradient(circle at 30% 30%, rgba(40, 140, 255, 0.96), transparent 38%);
    animation: float1 28s ease-in-out infinite;
}

.smoke.s2 {
    width: 140vmin;
    height: 140vmin;
    right: -36%;
    top: -8%;
    background: radial-gradient(circle at 70% 60%, rgba(200, 20, 30, 0.94), transparent 36%);
    animation: float2 34s ease-in-out infinite;
}

.smoke.s3 {
    width: 170vmin;
    height: 170vmin;
    left: 4%;
    top: -30%;
    background: radial-gradient(circle at 50% 50%, rgba(10, 10, 12, 0.6), transparent 30%);
    animation: float3 36s ease-in-out infinite;
    opacity: 0.6
}

.smoke.s4 {
    width: 110vmin;
    height: 110vmin;
    left: 18%;
    top: -4%;
    background: radial-gradient(circle at 60% 40%, rgba(8, 12, 32, 0.6), transparent 35%);
    animation: float4 30s ease-in-out infinite;
    opacity: 0.46
}

/* Add a subtle dark overlay at the top to help the smoke read as deep/dusk-like */
.about-page .smoke-wrap::before {
    content: '';
    position: absolute;
    inset: 0 0 50% 0;
    background: linear-gradient(180deg, rgba(8, 10, 20, 0.12), rgba(8, 10, 20, 0.06));
    pointer-events: none;
    z-index: 1;
}

@keyframes float1 {
    0% {
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg)
    }

    50% {
        transform: translate3d(8vw, -4vh, 0) scale(1.04) rotate(3deg)
    }

    100% {
        transform: translate3d(0, -8vh, 0) scale(1.02) rotate(-2deg)
    }
}

@keyframes float2 {
    0% {
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg)
    }

    50% {
        transform: translate3d(-8vw, -6vh, 0) scale(1.03) rotate(-3deg)
    }

    100% {
        transform: translate3d(-4vw, -10vh, 0) scale(1.02) rotate(2deg)
    }
}

@keyframes float3 {
    0% {
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg)
    }

    50% {
        transform: translate3d(6vw, 6vh, 0) scale(1.03) rotate(2deg)
    }

    100% {
        transform: translate3d(10vw, 12vh, 0) scale(1.05) rotate(-1deg)
    }
}

@keyframes float4 {
    0% {
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg)
    }

    50% {
        transform: translate3d(-6vw, 4vh, 0) scale(1.02) rotate(1deg)
    }

    100% {
        transform: translate3d(-10vw, 8vh, 0) scale(1.03) rotate(-2deg)
    }
}

/* Layout: center both hero (dark box) and the white page panels near the bottom on About page */
.about-page .container {
    position: relative;
    z-index: 1;
    min-height: calc(100vh - var(--nav-height));
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* push content toward bottom */
    align-items: center;
    gap: 22px;
    padding-bottom: 80px;
}

.about-page .page-hero,
.about-page #about-details {
    width: min(960px, 94%);
    margin: 0 auto;
}

.about-page .page-hero {
    transform: translateY(6%);
}

@media (max-width: 800px) {
    .smoke {
        filter: blur(54px);
    }

    .smoke.s1,
    .smoke.s2,
    .smoke.s3,
    .smoke.s4 {
        width: 180vmin;
        height: 180vmin;
    }

    .about-page .container {
        padding-bottom: 56px
    }

    .about-page .page-hero {
        transform: translateY(3%);
    }
}

/* About page: Premium Glass Panels */
.about-page .page-hero,
.about-page #about-details {
    background: rgba(255, 255, 255, 0.96);
    color: #333;
    padding: 48px;
    border-radius: 20px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.about-page .page-hero:hover,
.about-page #about-details:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.about-page .page-hero h1 {
    font-size: 3rem;
    background: linear-gradient(135deg, #0033A0, #C8102E);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 16px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.about-page .page-hero p {
    font-size: 1.15rem;
    line-height: 1.8;
    color: #555;
    max-width: 800px;
    margin: 0 auto;
}

/* Mission Section Specifics */
.about-page #about-details {
    margin-bottom: 40px;
}

.about-page #about-details h2 {
    font-size: 2.2rem;
    color: #111;
    margin-bottom: 16px;
    text-align: center;
}

.about-page #about-details h3 {
    font-size: 1.4rem;
    color: #0033A0;
    margin-top: 32px;
    margin-bottom: 20px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Styled List for Activities */
.about-page #about-details ul {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 24px;
}

.about-page #about-details li {
    background: #fdfdfd;
    padding: 16px 20px;
    border-radius: 12px;
    border: 1px solid #eee;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    color: #444;
}

.about-page #about-details li::before {
    content: '✦';
    color: #ffd700;
    font-size: 1.4rem;
}

/* soft colored glow overlay (blue left, red right) tuned for light background */
.about-page #about-details::before {
    content: '';
    position: absolute;
    left: -6%;
    top: -28%;
    width: 48%;
    height: 150%;
    background: radial-gradient(circle at 20% 20%, rgba(0, 48, 140, 0.08), transparent 35%);
    filter: blur(28px);
    pointer-events: none;
}

.about-page #about-details::after {
    content: '';
    position: absolute;
    right: -6%;
    bottom: -8%;
    width: 56%;
    height: 120%;
    background: radial-gradient(circle at 80% 80%, rgba(190, 12, 36, 0.07), transparent 36%);
    filter: blur(32px);
    pointer-events: none;
}

.about-page #about-details h2,
.about-page #about-details h3,
.about-page #about-details p,
.about-page #about-details li {
    color: #0b0b0f;
}

/* intensify glow on hover for desktop (subtle) */
@media (hover: hover) and (pointer: fine) {
    .about-page #about-details:hover::before {
        filter: blur(34px);
        transform: translateY(-4px);
    }

    .about-page #about-details:hover::after {
        filter: blur(38px);
        transform: translateY(4px);
    }
}

@media (prefers-reduced-motion: reduce) {

    .about-page #about-details::before,
    .about-page #about-details::after {
        transition: none;
    }
}

/* Respect user's reduced-motion preference: minimize smoke animation */
@media (prefers-reduced-motion: reduce) {

    .smoke,
    .smoke.s1,
    .smoke.s2,
    .smoke.s3,
    .smoke.s4 {
        animation: none !important;
        transition: none !important;
        filter: blur(60px) !important;
    }
}

/* Note: smooth scrolling removed per request */

/* Background slideshow (managed by JS). We place it behind all content. */
.bg-slideshow {
    position: fixed;
    inset: 0;
    /* top:0; right:0; bottom:0; left:0; */
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
}

.bg-slideshow .slide {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    will-change: opacity;
}

.bg-slideshow .slide.visible {
    opacity: 1;
}

/* Flag overlay - covers slideshow for non-hero sections with Nepal-like colors */
.flag-overlay {
    position: fixed;
    inset: 0;
    z-index: -1;
    /* between slideshow (-2) and content (auto) */
    pointer-events: none;
    opacity: 0;
    transition: opacity 400ms ease;
    background: linear-gradient(135deg, #0033A0 0% 33%, #ffffff 33% 66%, #C8102E 66% 100%);
    mix-blend-mode: normal;
}

.flag-overlay.visible {
    opacity: 1;
}

/* Make page content readable on flag-background pages (non-home) */
.page-hero {
    background: rgba(255, 255, 255, 0.97);
    color: #111;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

.container section,
.container .events-list,
.container .gallery {
    background: rgba(255, 255, 255, 0.96);
    color: #111;
    padding: 20px;
    border-radius: 12px;
    margin-top: 28px;
}

.container a {
    color: #0033A0;
}

/* Layout helpers */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Navigation: links always visible, just wrap nicely */
.nav-links {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Ensure links scale down slightly on mobile */
/* DISABLED - Conflicts with horizontal mobile navbar layout
@media (max-width: 600px) {
    .nav-links {
        gap: 12px;
    }

    .nav-links a {
        margin-left: 0;
        font-size: 14px;
        margin-bottom: 4px;
    }

    .navbar {
        height: auto;
        padding: 10px;
        flex-direction: column;
        gap: 10px;
    }
}
*/

/* Mobile: collapse nav into a dropdown */
/* Mobile: minimal adjustment, just stack if needed */
@media (max-width: 800px) {
    /* No special hiding logic needed anymore */
}

/* Hero overlay for readability */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.6));
    z-index: 0;
}

/* When the page contains a hero (homepage), keep a single unified slideshow background
   across the whole page: remove per-section white panels and the hero overlay. */
body.has-hero .hero::before {
    background: transparent;
}

body.has-hero .container,
body.has-hero .container section,
body.has-hero .container .events-list,
body.has-hero .container .gallery,
body.has-hero .page-hero,
body.has-hero .page-hero .page-hero,
body.has-hero .page-hero .container {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    backdrop-filter: none !important;
}

/* ensure the events slideshow/overlay remain unobtrusive on homepage */
body.has-hero .events-overlay {
    background: transparent !important;
}

body.has-hero .events-bg-slideshow .slide {
    filter: none;
}

/* If the homepage should have no slideshow/background images, hide slideshow elements
   and fall back to a solid accent color for a clean background. */
body.has-hero.no-background {
    background: var(--accent-blue) !important;
}

body.has-hero.no-background .bg-slideshow,
body.has-hero.no-background .events-bg-slideshow {
    display: none !important;
}

/* ensure hero text remains readable against the slideshow (no panel) */
body.has-hero .hero .hero-text h1,
body.has-hero .hero .hero-text p,
body.has-hero #events h2 {
    text-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
}

/* hide slideshow elements entirely when `no-slideshow` is present */
body.no-slideshow .bg-slideshow,
body.no-slideshow .events-bg-slideshow,
body.no-slideshow .events-overlay {
    display: none !important;
}

/* Center the Nepalese Student Association hero box and align its width with the main .container */
.hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 0;
    min-height: calc(100vh - var(--nav-height));
}

.hero .hero-text {
    width: min(1100px, 94%);
    margin: 0 auto;
    z-index: 1;
    /* sit above the hero overlay */
    text-align: center;
    background: transparent;
    /* show slideshow fully */
    padding: 18px 12px;
    /* reduce padding so layout stays tight */
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
}

/* Transparent centered card wrapper for the hero content */
#nsa-card.hero-card {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(980px, 92%);
    margin: 0 auto;
    z-index: 3;
    /* Premium Glassmorphism Theme (Soft Attractive Tint) */
    /* background image removed for video */
    background: #000;
    /* Fallback */
    position: relative;
    overflow: hidden;
    /* Clip the video to rounded corners */
    border-radius: 24px;
    padding: 48px 30px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(20px);
    border: none;
    transition: transform 0.3s ease;
}

/* Video Background Wrapper */
.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    /* User can't interact with video */
}

.video-background iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    /* Scale specifically to cover - aspect ratio trick */
    width: 177.77vh;
    /* 16:9 aspect ratio */
    height: 56.25vw;
    /* 16:9 aspect ratio */
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    opacity: 0.6;
    /* Dim slightly for text readability */
}

#nsa-card.hero-card:hover {
    transform: translateY(-4px);
}

.hero .hero-text {
    width: 100%;
    margin: 0 auto;
    z-index: 1;
    text-align: center;
    background: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    color: #333;
    /* Dark text for light glass */
}

/* Hero Typography Overrides for Light Theme */
.hero .hero-text h1 {
    margin: 20px 0 10px;
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    background: linear-gradient(135deg, #0033A0, #C8102E);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    /* Remove old text shadow */
    /* Stronger Glow for Video Visibility */
    /* Maximum Brightness: Dark edge + Multiple White Layers */
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 1)) drop-shadow(0 0 4px rgba(255, 255, 255, 1)) drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 30px rgba(255, 255, 255, 0.6));
    font-weight: 800;
}

.hero .hero-text p {
    margin: 0 0 24px;
    font-size: 1.4rem;
    font-weight: 700;
    text-align: center;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    letter-spacing: 1px;

    /* Matching Blue-Red Gradient */
    background: linear-gradient(135deg, #0033A0, #C8102E);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Stronger Glow for Video Visibility */
    /* Maximum Brightness: Dark edge + Multiple White Layers */
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 1)) drop-shadow(0 0 4px rgba(255, 255, 255, 1)) drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 30px rgba(255, 255, 255, 0.6));
    text-shadow: none;
}

/* IDs to target center alignment if needed */
#nsa-title {
    margin: 8px 0 4px;
    color: #fff;
    font-size: clamp(1.6rem, 3.2vw, 2.4rem);
}

#nsa-sub {
    margin: 0 0 14px;
    color: rgba(255, 255, 255, 0.9);
}

.hero .hero-text h1 {
    margin: 14px 0 6px;
    font-size: clamp(1.6rem, 3.2vw, 2.4rem);
    color: #fff;
    text-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
}

.hero .hero-text p {
    margin: 0 0 12px;
    color: rgba(255, 255, 255, 0.9);
}

/* EVENTS: make the large events panel semi-transparent and match hero width so they align perfectly */
/* Make Upcoming Events container clearly visible */
#events .container {
    width: min(1100px, 94%);
    margin: 0 auto;
    background: transparent;
    /* let slides show through */
    padding: 28px 12px;
    border-radius: 0;
    box-shadow: none;
}

/* Card wrapper for Upcoming Events content so it reads above the slideshow */
.events-card {
    width: min(960px, 94%);
    margin: 0 auto;
    position: relative;
    z-index: 3;
    /* above slideshow & overlay */
    background: transparent;
    /* no card effect on homepage */
    border-radius: 0;
    padding: 12px 6px;
    box-shadow: none;
    border: none;
    backdrop-filter: none;
}

.events-card h2 {
    color: #fff;
    margin-top: 0;
    text-shadow: 0 8px 30px rgba(0, 0, 0, 0.6)
}

.events-card .events-grid {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px
}

/* Keep event cards readable as semi-opaque boxes */
.events-card .event-card {
    background: linear-gradient(180deg, rgba(3, 6, 12, 0.62), rgba(3, 6, 12, 0.5));
    color: #fff;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
    border-radius: 10px
}

/* Events-scoped slideshow (behind content) */
.events-bg-slideshow {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    border-radius: 14px;
}

.events-bg-slideshow .slide {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.events-bg-slideshow .slide.visible {
    opacity: 1;
}

/* Semi-opaque overlay above slides so text remains readable */
.events-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: transparent;
    /* removed white overlay so slides are visible */
    border-radius: 0;
    pointer-events: none;
}

/* Ensure container children (content) render above slideshow/overlay */
#events .container> :not(.events-bg-slideshow):not(.events-overlay) {
    position: relative;
    z-index: 2;
}

/* Emphasized 'Upcoming Events' heading with glow to ensure readability */
/* Strong, legible heading with pronounced glow */
#events h2 {
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    margin: 0 0 18px 0;
    color: #0b0b0b;
    /* dark text on the light panel */
    position: relative;
    z-index: 2;
    font-weight: 700;
    /* pronounced core + colored rim glows for visibility */
    text-shadow:
        0 0 8px rgba(255, 255, 255, 0.95),
        0 6px 24px rgba(40, 140, 255, 0.14),
        0 10px 36px rgba(200, 20, 30, 0.10);
}

/* Slightly adjust event cards so they read on the darker background */
.event-card {
    /* semi-opaque dark cards sit above the slideshow for readability */
    background: linear-gradient(180deg, rgba(3, 6, 12, 0.64), rgba(3, 6, 12, 0.5));
    color: #f6f7f8;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    padding: 18px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

@media (max-width: 800px) {
    .hero {
        padding: 40px 0;
        min-height: 48vh
    }

    .hero .hero-text {
        padding: 22px;
    }

    #events .container {
        padding: 20px
    }

    #nsa-card.hero-card {
        padding: 18px;
        border-radius: 12px
    }
}



/* Section container */
section {
    padding: 60px 20px;
}

section .container {
    text-align: left;
}

.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.event-card {
    background: rgba(255, 255, 255, 0.03);
    padding: 18px;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

.event-card h3 {
    margin: 0 0 8px 0;
}

.event-date {
    color: #ffd700;
    margin-bottom: 8px;
    font-weight: 600;
}

/* Buttons & accents */
.glow-btn {
    background: linear-gradient(90deg, #ff7a18, #ff4e50, #ff7a18);
    padding: 12px 26px;
    border-radius: 999px;
    color: white;
    font-weight: 600;
    box-shadow: 0 6px 20px rgba(255, 90, 90, 0.12);
    transition: transform .18s ease, box-shadow .18s ease;
}

.glow-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(255, 90, 90, 0.18);
}

/* Gallery styles consolidated below (grid + .gallery-img) */

/* Contact form */
.contact-form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    max-width: 700px;
    padding: 14px;
    margin: 10px 0;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    color: #fff;
}

.contact-form textarea {
    min-height: 140px;
}

/* Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.85);
    z-index: 2000;
}

.lightbox[aria-hidden="false"] {
    display: flex;
}

.lightbox img {
    width: auto;
    max-width: 96vw;
    max-height: 92vh;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
}

/* Zoom-out animation when opening lightbox: image scales down into place */
@keyframes lb-zoom-out {
    from {
        transform: scale(1.12);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.lightbox[aria-hidden="false"] img {
    animation: lb-zoom-out 420ms cubic-bezier(.2, .9, .3, 1) both;
}

/* When large gallery item spans full width, remove extra inner padding so sides align with container border */
.container .gallery {
    padding-left: 0;
    padding-right: 0;
}

.lightbox-close {
    position: absolute;
    top: 24px;
    right: 28px;
    background: transparent;
    color: #fff;
    border: none;
    font-size: 26px;
    cursor: pointer;
}

.lightbox-prev,
.lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    border: none;
    font-size: 22px;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    cursor: pointer;
}

.lightbox-prev {
    left: 28px;
}

.lightbox-next {
    right: 28px;
}

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

.lightbox-caption {
    color: #fff;
    margin-top: 16px;
    font-size: 16px;
}

/* Utility: visually-hidden */
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    height: var(--nav-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 22px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.18));
    backdrop-filter: blur(6px);
    z-index: 1000;
}

.nav-logo {
    height: 48px;
    width: 48px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    border: 2px solid rgba(255, 255, 255, 0.12);
}

.nav-links a {
    margin-left: 20px;
    color: white;
    font-size: 17px;
    text-decoration: none;
    transition: 0.24s;
    font-weight: 700;
}

.nav-links a:hover {
    color: #ffd700;
    /* gold */
    text-shadow: 0 0 10px gold;
}


/* HERO */
.page-hero {
    background: rgba(255, 255, 255, 0.97);
    color: #111;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

/* Make the main content sections show as light panels so the flag background does not show through */
/* Make the main content sections show as light panels so the flag background does not show through */
section#about,
section#gallery,
section#events,
section#contact,
.container section,
.container .events-list,
.container .gallery,
#gallery-grid {
    background: rgba(255, 255, 255, 0.97);
    color: #111;
    padding: 20px;
    border-radius: 12px;
}

/* Unified Premium Glass Background for Gallery (Matches Events Page) */
#gallery-grid {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    margin: 0 auto;
    width: min(1100px, 94%);
}

/* Ensure events manager centered also gets the base styles but overrides with its own */
.events-manager-centered {
    color: #111;
    width: 100%;
    /* Match parent/hero width */
    max-width: 100%;
    /* Ensure it doesn't shrink awkwardly */
    margin: 0 auto;
}

/* Add spacing for the container on this page to clear the nav */
body.panel-bg .container {
    padding-top: calc(var(--nav-height) + 40px);
    /* padding-bottom: 0 !important; Removed to allow gap */
}

/* Ensure the events box extends nicely if content is short, or just sits there */
.events-manager-centered {
    color: #111;
    width: 100%;
    max-width: 100%;
    margin-bottom: 40px;
    /* Restore corners */
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}


/* GLOW BUTTON */
.hero-text {
    position: relative;
    z-index: 1;
    background: rgba(0, 0, 0, 0.55);
    padding: 36px;
    border-radius: 14px;
    text-align: center;
    box-shadow: 0 8px 34px rgba(0, 0, 0, 0.55);
    max-width: 820px;
    width: calc(100% - 48px);
}

.hero-text h1 {
    font-size: clamp(28px, 4.4vw, 44px);
    margin: 12px 0 6px
}

.hero-text p {
    font-size: clamp(14px, 1.6vw, 18px);
    margin: 0 0 14px
}

.glow-btn {
    background: linear-gradient(45deg, red, blue);
    padding: 15px 30px;
    border-radius: 30px;
    text-decoration: none;
    color: white;
    border: none;
    cursor: pointer;
    transition: 0.3s;
}

.glow-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 0 20px red;
}

section {
    padding: 60px;
    text-align: center;
}

/* GALLERY */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
    align-items: stretch;
}

.gallery-item {
    text-align: left;
}

.gallery-img {
    width: 100%;
    height: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
    border-radius: 12px;
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.35);
    transition: transform .28s ease, box-shadow .28s ease;
    cursor: zoom-in;
}

.gallery-img:hover {
    transform: translateY(-6px) scale(1.03)
}

/* CONTACT FORM */
input,
textarea {
    width: 60%;
    max-width: 600px;
    padding: 10px;
    margin: 10px;
    border-radius: 10px;
    border: none;
}

/* CHAT */
.chat-btn {
    position: fixed;
    padding-bottom: var(--footer-height);
    /* reserve space at the bottom so fixed footer doesn't cover content */
    bottom: 20px;
    right: 20px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: red;
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
}

/* chatbox hidden by default; shown when aria-hidden="false" */
#chatbox {
    display: none;
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: min(420px, 92vw);
    height: min(600px, 80vh);
    background: #111;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}

#chatbox[aria-hidden="false"] {
    display: block;
}

#chatbox iframe {
    width: 100%;
    height: 100%;
}

footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--footer-height);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    text-align: center;
    z-index: 1200;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.95), rgba(12, 12, 20, 0.98));
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.6);
    color: #fff;
}

footer::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -12px;
    height: 12px;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.03), transparent 40%);
    pointer-events: none;
}

.logo {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #ffd700;
    animation: float 5s ease-in-out infinite;
    box-shadow: 0 12px 40px rgba(255, 215, 0, 0.9);
}

/* logo wrapper to align decorative circle precisely with the logo */
.logo-wrap {
    position: relative;
    display: inline-block;
    width: 140px;
    height: 140px;
    margin: 0 auto;
}

.logo-wrap::before {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    /* decorative ring that aligns exactly with the logo circle */
    box-shadow: 0 0 0 6px rgba(255, 215, 0, 0.06), 0 0 24px rgba(0, 0, 0, 0.35) inset;
    pointer-events: none;
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-12px);
    }

    100% {
        transform: translateY(0px);
    }
}

/* --- CONTACT CARD REDESIGN --- */
section.contact-card-centered {
    width: 100%;
    max-width: 100%;
    /* Match hero width */
    margin: 0 auto 40px auto;
    /* Gap at bottom */
    background: rgba(255, 255, 255, 0.95);
    padding: 50px 40px;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #333;
}

section.contact-card-centered h2 {
    margin-top: 0;
    font-size: 1.8rem;
    margin-bottom: 24px;
    color: #0033A0;
}

section.contact-card-centered form {
    width: 100%;
    max-width: 540px;
    /* Optimal reading width for forms */
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Override global input styles */
section.contact-card-centered input,
section.contact-card-centered textarea {
    width: 100%;
    max-width: 100%;
    background: #f9f9fa;
    border: 2px solid #e1e1e1;
    padding: 16px;
    margin: 0;
    border-radius: 12px;
    font-size: 1rem;
    color: #333;
    font-family: inherit;
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

section.contact-card-centered input:focus,
section.contact-card-centered textarea:focus {
    border-color: #ffd700;
    background: #fff;
    outline: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

section.contact-card-centered textarea {
    min-height: 160px;
    resize: vertical;
}

section.contact-card-centered button {
    margin-top: 12px;
    width: 100%;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
}

/* Respect user's reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* Simple responsive adjustments for small screens */
@media (max-width: 900px) {
    .hero-text {
        padding: 26px
    }

    .nav-logo {
        height: 42px;
        width: 42px
    }
}

@media (max-width: 700px) {
    .nav-toggle {
        display: block
    }

    .nav-links {
        position: absolute;
        top: calc(var(--nav-height) + 8px);
        right: 8px
    }

    .hero {
        padding-top: calc(var(--nav-height) + 10px)
    }

    .hero-text {
        width: calc(100% - 32px)
    }

    .logo {
        width: 110px;
        height: 110px
    }
}

@media (max-width: 480px) {
    .hero-text h1 {
        font-size: 22px
    }

    .hero-text p {
        font-size: 14px
    }

    /* Redesigned Events Section - clean, card-based */
    .events-manager {
        padding-top: calc(var(--nav-height) + 120px);
        padding-bottom: calc(var(--footer-height) + 28px);
    }

    .events-manager .events-grid-wrap {
        width: min(1100px, 96%);
        margin: 0 auto;
        grid-template-columns: 1fr 360px;
        gap: 28px;
        align-items: start;
    }

    .event-display,
    .calendar {
        background: rgba(255, 255, 255, 0.98);
        color: #111;
        border-radius: 12px;
        padding: 28px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
        border: 1px solid rgba(0, 0, 0, 0.06);
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .event-display h2 {
        color: var(--accent-blue);
        font-size: 1.9rem;
        margin: 0 0 6px 0;
    }

    .event-date {
        color: var(--accent-red);
        font-weight: 700;
    }

    .events-list-ui {
        gap: 12px;
    }

    .events-list-ui .event-row {
        background: #fff;
        padding: 12px 14px;
        border-radius: 8px;
        border: 1px solid rgba(0, 0, 0, 0.06);
        display: flex;
        align-items: center;
        justify-content: space-between;
        transition: transform .16s ease, box-shadow .16s ease;
    }

    .events-list-ui .event-row:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    }

    .events-list-ui .event-row .ev-title {
        font-weight: 700;
        color: #111;
    }

    .events-list-ui .event-row .ev-date {
        color: var(--accent-red);
        font-weight: 700;
    }

    .small-btn {
        background: var(--accent-blue);
        color: #fff;
        border: none;
        padding: 8px 10px;
        border-radius: 8px;
        cursor: pointer;
    }

    .small-btn.danger {
        background: transparent;
        color: #c8102e;
        border: 1px solid rgba(200, 0, 0, 0.08);
    }

    #register-form input,
    #register-form textarea {
        background: #fff;
        border: 1px solid rgba(0, 0, 0, 0.06);
        color: #111;
        padding: 10px;
        border-radius: 6px;
    }

    #register-form button {
        background: var(--accent-blue);
        color: #fff;
        padding: 10px 14px;
        border-radius: 8px;
        border: none;
    }

    @media (max-width: 1000px) {
        .events-manager .events-grid-wrap {
            grid-template-columns: 1fr;
            gap: 18px;
        }

        .events-manager {
            padding-top: calc(var(--nav-height) + 80px);
        }

        .event-display,
        .calendar {
            padding: 18px;
        }
    }

    .gallery {
        grid-template-columns: 1fr
    }

    input,
    textarea {
        width: 94%
    }
}

/* small-screen tweak for footer */
@media (max-width: 600px) {
    footer {
        height: calc(var(--footer-height));
        padding: 0 12px;
        font-size: 13px
    }
}

/* --- BOARD MEMBERS SECTION --- */
.board-section {
    width: min(1200px, 96%);
    margin: 40px auto;
}

.board-grid {
    display: grid;
    /* Responsive grid: auto-fill min 280px */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 24px;
}

.board-member {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.board-member:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.member-img-wrap {
    width: 140px;
    height: 140px;
    margin-bottom: 20px;
    position: relative;
}

.member-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.member-name {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 6px 0;
    color: #111;
}

.member-role {
    font-size: 0.95rem;
    color: #0033A0;
    /* Accent Blue */
    font-weight: 600;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.member-email {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 16px;
    text-decoration: none;
    background: #f0f0f5;
    padding: 4px 10px;
    border-radius: 99px;
}

.member-desc {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #444;
    margin: 0;
}

/* --- CHAT BUTTON FIXED --- */
.chat-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #0033A0, #0055ff);
    color: white;
    border: none;
    padding: 0;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.8rem;
    box-shadow: 0 8px 24px rgba(0, 51, 160, 0.4);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    line-height: 1.2;
    text-align: center;
}

.chat-btn::before {
    content: '💬';
    font-size: 1.4rem;
    margin-bottom: 2px;
}

/* Hide the literal text inside if we want complete control, 
   but user asked to fit "Chat NSA", so let's keep the text but maybe remove icon from HTML 
   OR just style the text to fit well. 
   Actually, the HTML has "💬 Chat NSA". 
   Let's use font-size adjustments to fit it all.
*/
.chat-btn {
    /* override previous gap/content */
    gap: 0;
}

.chat-btn:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 30px rgba(0, 51, 160, 0.6);
}

#chatbox {
    display: none;
    position: fixed;
    bottom: 100px;
    right: 30px;
    width: 380px;
    height: 500px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

#chatbox[aria-hidden="false"] {
    display: flex;
    flex-direction: column;
    animation: fadeIn 0.3s ease;
}

#chatbox iframe {
    /* Removed iframe support */
    display: none;
}

/* Chat Header */
.chat-header {
    background: linear-gradient(135deg, #0033A0, #0055ff);
    color: white;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.chat-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.chat-close-btn {
    background: transparent;
    border: none;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    opacity: 0.8;
}

.chat-close-btn:hover {
    opacity: 1;
}

/* Chat Messages Area */
.chat-messages {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    background: #f9f9fa;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.message {
    display: flex;
    margin-bottom: 4px;
}

.message.bot {
    justify-content: flex-start;
}

.message.user {
    justify-content: flex-end;
}

.msg-bubble {
    max-width: 80%;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 0.95rem;
    line-height: 1.5;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.message.bot .msg-bubble {
    background: white;
    color: #333;
    border-bottom-left-radius: 2px;
    border: 1px solid #eee;
}

.message.user .msg-bubble {
    background: #0033A0;
    color: white;
    border-bottom-right-radius: 2px;
}

/* Chat Input Area */
.chat-input-area {
    padding: 14px;
    background: white;
    border-top: 1px solid #eee;
    display: flex;
    gap: 10px;
}

#chat-input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: 99px;
    outline: none;
    font-size: 0.95rem;
}

#chat-input:focus {
    border-color: #0033A0;
}

#chat-send {
    background: #0033A0;
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

#chat-send:hover {
    transform: scale(1.1);
}

/* --- GALLERY ADMIN --- */
#gallery-manager {
    width: min(1100px, 94%);
    margin: 0 auto 20px auto;
}

#gal-admin-toggle {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: white;
    padding: 8px 16px;
    border-radius: 50px;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: all 0.2s;
}

#gal-admin-toggle:hover {
    background: white;
    color: #333;
}

#gal-admin-panel {
    background: white;
    color: #333;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

#add-img-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

#add-img-form input {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    flex: 1;
    min-width: 200px;
}

/* Delete Button on Gallery Item */
.del-img-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(200, 16, 46, 0.9);
    color: white;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.2s;
    z-index: 5;
}

.gallery-item:hover .del-img-btn {
    opacity: 1;
    transform: scale(1);
}

.del-img-btn:hover {
    background: #FF0000;
    transform: scale(1.1);
}

/* --- GLOBAL ADMIN SYSTEM --- */
/* Footer Login Trigger */
.admin-login-trigger {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.3);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 5px;
    margin-left: 10px;
    transition: color 0.3s;
}

.admin-login-trigger:hover {
    color: rgba(255, 255, 255, 0.8);
}

/* Floating Admin Toolbar */
.admin-toolbar {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(33, 33, 33, 0.95);
    backdrop-filter: blur(10px);
    padding: 10px 20px;
    border-radius: 50px;
    display: flex;
    gap: 15px;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    border: 1px solid rgba(255, 255, 255, 0.1);
    animation: slideUp 0.3s ease;
}

.admin-toolbar span {
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    margin-right: 10px;
}

/* Edit Mode Highlights */
[contenteditable="true"] {
    outline: 2px dashed #00e676;
    outline-offset: 4px;
    cursor: text;
    border-radius: 4px;
    transition: all 0.2s;
}

[contenteditable="true"]:hover {
    background: rgba(0, 230, 118, 0.1);
}

[contenteditable="true"]:focus {
    outline: 2px solid #00e676;
    background: rgba(255, 255, 255, 0.1);
}

/* Admin Modal */
.admin-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    z-index: 10001;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.2s;
}

.admin-modal {
    background: white;
    padding: 30px;
    border-radius: 16px;
    width: 90%;
    max-width: 350px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.admin-modal h3 {
    margin-top: 0;
    color: #333;
}

.admin-modal input {
    width: 100%;
    padding: 12px;
    margin: 15px 0;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
}

@keyframes slideUp {
    from {
        transform: translate(-50%, 100%);
        opacity: 0;
    }

    to {
        transform: translate(-50%, 0);
        opacity: 1;
    }
}

/* ========================================
   MOBILE RESPONSIVE OPTIMIZATIONS
   Critical fixes for phone displays
   ======================================== */

/* Small phones and mobile devices */
@media (max-width: 480px) {

    /* Hero Card - Reduce padding for mobile */
    #nsa-card.hero-card {
        padding: 20px 14px !important;
        width: 96% !important;
        border-radius: 16px;
    }

    /* Hero Text - Smaller, more readable fonts */
    .hero .hero-text h1,
    #nsa-title {
        font-size: 1.5rem !important;
        margin: 10px 0 6px !important;
        line-height: 1.3 !important;
    }

    .hero .hero-text p,
    #nsa-sub {
        font-size: 0.95rem !important;
        margin: 0 0 14px !important;
        letter-spacing: 0.3px !important;
    }

    /* Logo - Smaller on mobile */
    .logo-wrap,
    .logo {
        width: 90px !important;
        height: 90px !important;
    }

    /* Button - Compact size */
    .glow-btn {
        padding: 11px 22px !important;
        font-size: 0.9rem !important;
    }

    /* Navigation - Keep horizontal, logo on left */
    .navbar {
        padding: 6px 8px !important;
        height: 50px !important;
        min-height: 50px !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        position: fixed !important;
        top: 0 !important;
        width: 100% !important;
        z-index: 1000 !important;
    }

    .nav-logo {
        width: 30px !important;
        height: 30px !important;
        flex-shrink: 0 !important;
        margin-right: 8px !important;
    }

    .nav-links {
        display: flex !important;
        flex-direction: row !important;
        gap: 2px !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        max-width: calc(100vw - 60px) !important;
        align-items: center !important;
    }

    .nav-links::-webkit-scrollbar {
        display: none;
    }

    .nav-links a {
        font-size: 0.7rem !important;
        margin-left: 0 !important;
        padding: 4px 6px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        display: inline-block !important;
    }

    /* Chat button - Above footer, smaller */
    .chat-btn {
        width: 48px !important;
        height: 48px !important;
        font-size: 0.7rem !important;
        bottom: 80px !important;
        /* Above footer */
        right: 12px;
    }

    /* Chatbox - Full width on mobile */
    #chatbox {
        width: calc(100% - 16px) !important;
        height: 70vh !important;
        bottom: 80px !important;
        /* Above footer */
        right: 8px;
        left: 8px;
    }

    /* Admin Lock Button - Smaller and properly positioned */
    #admin-lock {
        width: 36px !important;
        height: 36px !important;
        font-size: 16px !important;
        bottom: 80px !important;
        /* Above footer */
        left: 12px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    }

    /* Footer - Better mobile layout */
    footer {
        padding: 16px 12px !important;
        margin-top: 40px !important;
        position: relative;
        z-index: 100;
    }

    footer p {
        font-size: 0.8rem !important;
        line-height: 1.4;
    }

    /* Contact form - Tighter padding */
    .contact-card-centered {
        padding: 28px 18px !important;
        width: 96%;
    }

    .contact-card-centered h2 {
        font-size: 1.6rem !important;
    }

    /* Gallery - Single column */
    #gallery-list {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    .gallery-item.large {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
    }

    /* Board members - Single column */
    .board {
        grid-template-columns: 1fr !important;
        gap: 18px;
    }

    /* About page - Smaller headings */
    .about-page .page-hero h1 {
        font-size: 1.7rem !important;
    }

    .about-page .page-hero,
    .about-page #about-details {
        padding: 28px 18px !important;
    }

    .about-page #about-details h2 {
        font-size: 1.6rem !important;
    }

    .about-page #about-details h3 {
        font-size: 1.2rem !important;
    }

    /* Events - Better mobile layout */
    .events-manager-centered {
        padding: 20px 10px !important;
    }

    #events .container {
        padding: 28px 18px !important;
    }

    .event-row {
        padding: 12px 14px !important;
        flex-direction: column;
        align-items: flex-start;
    }

    /* Admin toolbar - Stack elements */
    .admin-toolbar {
        flex-wrap: wrap;
        padding: 8px 10px !important;
        gap: 8px;
    }

    /* Container - Tighter margins */
    .container {
        padding: 0 12px !important;
    }

    /* Page hero - Smaller padding */
    .page-hero {
        padding: 28px 18px !important;
    }

    .page-hero h1 {
        font-size: 1.8rem !important;
    }

    .page-hero p {
        font-size: 0.95rem !important;
    }
}

/* Extra small phones */
@media (max-width: 360px) {
    .hero .hero-text h1 {
        font-size: 1.3rem !important;
    }

    .hero .hero-text p {
        font-size: 0.85rem !important;
    }

    .logo-wrap,
    .logo {
        width: 75px !important;
        height: 75px !important;
    }

    .glow-btn {
        padding: 9px 18px !important;
        font-size: 0.85rem !important;
    }

    .nav-links a {
        font-size: 0.75rem !important;
        padding: 4px 6px;
    }
}