/* ===========================
    Subtle Digital Neon Theme (Enhanced Contrast)
    =========================== */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #001b3d url('link.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: #7ac7ff;
    text-shadow: 0 0 6px #7ac7ffaa;
}

/* Paragraphs */
p {
    line-height: 1.6;
    background-color: #d9e3ea;
    border-radius: 10px;
    padding: 10px;
    color: #00112d;
    box-shadow: 0 0 12px #7ac7ff55;
    border: 1px solid #7ac7ff55;
}

/* Floating section panel */
section {
    background-color: #0066cc;
    color: #f5f5f5;
    padding: 10px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    border-radius: 10px;
    border: 1px solid #7ac7ff77;
    box-shadow: 0 0 18px #7ac7ff77;
}

/* Sticky header */
header {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #e6e6e6;
    padding: 10px 20px;
    box-shadow: 0 2px 8px rgba(122, 199, 255, 0.5);
}

/* Navigation links */
nav a {
    margin: 0 10px;
    text-decoration: none;
    color: #1a8cff;
    font-weight: bold;
    text-shadow: 0 0 4px #7ac7ff88;
    transition: 0.2s ease;
}

nav a:hover {
    color: #0060cc;
    text-shadow: 0 0 8px #7ac7ffaa;
}

/* Footer */
footer {
    background: #e6e6e6;
    padding: 20px;
    text-align: center;
    color: #00112d;
    box-shadow: 0 0 12px #7ac7ff33;
}

/* ===========================
    Coming Soon Page
    =========================== */
.coming-soon-page {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f4f6fb;
}

.coming-soon {
    text-align: center;
    border: 2px dashed #b0bec5;
    padding: 30px 40px;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 0 18px #7ac7ff33;
}

.coming-soon h1 {
    font-size: 2.5rem;
    color: #00112d;
    text-shadow: 0 0 6px #7ac7ff55;
}

.coming-soon p {
    font-size: 1.2rem;
    color: #555;
}

.coming-soon a {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    background: #1a8cff;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    box-shadow: 0 0 12px #7ac7ff55;
}

.coming-soon a:hover {
    background: #0066cc;
    box-shadow: 0 0 16px #7ac7ff88;
}

/* ===========================
    Table Styles
    =========================== */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    box-shadow: 0 2px 8px rgba(122, 199, 255, 0.3);
}

th, td {
    border: 1px solid #00112d;
    padding: 8px;
    text-align: left;
    color: #0066cc;
    background-color: #f0f4f6;
}

th {
    background-color: #d3e5f5;
    color: #00112d;
}

tr:hover {
    background-color: #cfd8dc;
    box-shadow: 0 0 8px #7ac7ff55 inset;
}

/* ===========================
    Forms
    =========================== */
form {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    background: #243253;
    box-shadow: 0 0 18px #7ac7ff55;
    border-radius: 10px;
}

form .about-logo {
    width: 180px;
    height: 180px;
    object-fit: contain;
    display: block;
    margin: 0 auto 20px;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 0 16px #7ac7ff55;
}

/* ===========================
    IMAGE SLIDER 
    =========================== */
.image-slider {
    position: relative;
    width: 90%; 			/* responsive width */
    max-width: 500px; 	/* max width restriction */
    height: auto;
    margin: 20px auto;
    overflow: hidden;
    z-index: 1;
    animation: neonPulse 3s infinite ease-in-out;
}

.image-slider img {
    width: 100%;
    height: auto;
    display: none;
    object-fit: contain;
    margin: 0 auto;
}

.image-slider img:first-child {
    display: block;
}

/* ===========================
    Glowing Slider Caption
    =========================== */
.slider-caption {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    color: #7ac7ff;
    font-size: 1.2rem;
    font-weight: bold;
    padding: 8px 20px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 8px;
    text-shadow: 
        0 0 6px #7ac7ff,
        0 0 12px #7ac7ff,
        0 0 18px #1a8cff;
    border: 1px solid #7ac7ff99;
    box-shadow:
        0 0 14px #7ac7ff88,
        0 0 28px #1a8cff55;
}

/* ===========================
    Neon Pulse Animation
    =========================== */
@keyframes neonPulse {
    0% {
        box-shadow: 0 0 15px #7ac7ff88, 0 0 25px #1a8cff55;
        border-color: #7ac7ffcc;
    }
    50% {
        box-shadow: 0 0 35px #7ac7ffdd, 0 0 70px #1a8cffaa;
        border-color: #b5e6ff;
    }
    100% {
        box-shadow: 0 0 15px #7ac7ff88, 0 0 25px #1a8cff55;
        border-color: #7ac7ffcc;
    }
}

/* ===========================
    Campaign Items
    =========================== */
.campaign {
    display: flex;
    align-items: center;
    background-color: #f0f0f0;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 8px;
    gap: 15px;
    box-shadow: 0 0 12px #7ac7ff44;
}

.campaign-logo {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #7ac7ff77;
}

.campaign p {
    margin: 0;
    flex: 1;
    color: #00112d;
}

.campaign a {
    text-decoration: none;
    color: #1a8cff;
    font-weight: bold;
}

/* ===========================
    Chatbox — Floating Above Everything (Smaller)
    =========================== */
.chat-box-section {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99999 !important;
    pointer-events: auto;
}

#chat-container {
    width: 280px; /* smaller width */
    max-width: 90vw;
    background: #003366cc;
    border-radius: 12px;
    border: 1px solid #7ac7ff88;
    box-shadow:
        0 0 18px #7ac7ff44,
        0 0 28px #1a8cff55,
        0 0 40px #1a8cff55 inset;
    backdrop-filter: blur(8px);
    overflow: hidden;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

#chat-container.active {
    transform: translateY(0);
    opacity: 1;
    box-shadow:
        0 0 25px #7ac7ff88,
        0 0 40px #1a8cff77,
        0 0 60px #1a8cff55 inset;
}

#chat-header {
    background: #1a8cffdd;
    padding: 10px;
    text-align: center;
    color: #ffffff;
    font-weight: bold;
    border-bottom: 1px solid #7ac7ffaa;
    text-shadow: 0 0 6px #ffffffaa;
}

#chat-box {
    height: 200px; /* smaller height */
    overflow-y: auto;
    padding: 10px;
    background: rgba(0, 20, 50, 0.6);
    color: #7ac7ff;
    font-size: 14px;
    box-shadow: inset 0 0 12px #1a8cff55;
}

#chat-input {
    display: flex;
    border-top: 1px solid #7ac7ff77;
    background: rgba(0, 20, 50, 0.7);
    padding: 8px;
}

#chat-input input {
    flex: 1;
    padding: 8px;
    border: 1px solid #7ac7ff55;
    background: #001b3d;
    color: #7ac7ff;
    border-radius: 8px;
    outline: none;
}

#chat-input button {
    margin-left: 8px;
    padding: 8px 12px;
    background: #1a8cff;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 0 10px #7ac7ff88;
}

#chat-input button:hover {
    background: #0066cc;
    box-shadow: 0 0 14px #7ac7ffcc;
}

/* ===========================
    Email Input Section (Hidden by default)
    =========================== */
#email-input-section {
    display: none; 	/* Hidden by default */
    flex-direction: column;
    margin-top: 8px;
    gap: 5px;
}

#email-input-section input {
    padding: 6px;
    border-radius: 6px;
    border: 1px solid #7ac7ff55;
    outline: none;
    background: #001b3d;
    color: #7ac7ff;
}

#email-input-section button {
    padding: 6px 12px;
    border-radius: 6px;
    border: none;
    background: #1a8cff;
    color: white;
    cursor: pointer;
}

#email-input-section button:hover {
    background: #0066cc;
}

/* ===========================
    Chat Toggle Button (Mobile Icon)
    =========================== */
#chat-toggle {
    display: none; /* hidden by default (desktop) */
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #1a8cff;
    color: white;
    padding: 12px 16px;
    border-radius: 50px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: bold;
    cursor: pointer;
    z-index: 999999;
    box-shadow: 0 0 12px #7ac7ffaa;
    font-size: 14px;
    border: 1px solid #7ac7ff77;
    transition: all 0.3s ease;
}

#chat-toggle:hover {
    background: #0066cc;
    box-shadow: 0 0 18px #7ac7ffcc;
}

#chat-toggle.active {
    background: #0056b3;
    transform: scale(0.95);
    box-shadow: 0 0 20px #7ac7ffdd;
}

#chat-toggle p {
    margin: 0;
    padding: 0;
    color: white;
    background: none;
    box-shadow: none;
}

/* ===========================
    Responsive
    =========================== */
@media (max-width: 600px) {
    table, th, td { font-size: 14px; }
    header { padding: 5px 10px; }
    .coming-soon { padding: 20px; }
    .coming-soon h1 { font-size: 2rem; }
    .coming-soon p { font-size: 1rem; }
    .coming-soon a { padding: 8px 16px; }

    /* Mobile Chat Container */
    #chat-container {
        position: fixed !important;
        right: 10px !important;
        left: 10px !important;
        bottom: 70px !important; /* Make room for the toggle button (which acts as the close button) */
        top: auto !important;
        width: calc(100% - 20px) !important;
        max-width: none !important;
        height: 300px !important;
        transform: translateY(20px);
        opacity: 0;
        display: none !important;
    }

    #chat-container.active {
        display: block !important;
        transform: translateY(0);
        opacity: 1;
    }

    #chat-box {
        height: 200px !important;
    }

    /* Mobile Toggle Button - Acts as "X" when active */
    #chat-toggle {
        display: flex !important;
        width: 60px;
        height: 60px;
        padding: 0;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        /* Ensure it's always in the corner */
        right: 20px;
        bottom: 20px;
        transition: all 0.3s ease;
    }

    #chat-toggle p {
        display: none; /* Hide text on mobile, show icon only */
    }

    /* Show chat icon inside toggle button when closed */
    #chat-toggle::before {
        content: "💬";
        font-size: 24px;
    }

    /* CHANGE: When chat is active, change the icon to 'X' and use a distinct closing style */
    #chat-toggle.active {
        background: #cc0033; /* Distinct red/close color */
        transform: scale(1);
        box-shadow: 0 0 20px #ff7a7a; /* Red glow for close button */
    }

    #chat-toggle.active::before {
        content: "✕"; /* 'X' symbol */
        font-size: 24px;
    }

    .image-slider {
        width: 220px;
        height: 220px;
    }

    .image-slider img {
        max-width: 200px;
        max-height: 200px;
    }
}

/* Desktop styles */
@media (min-width: 601px) {
    #chat-container {
        display: block !important;
    }
}