@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

/* ====================== */
/* Reset & Global Layout  */
/* ====================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: #d3eadd;
    color: #1a1a1a;
    max-width: 1400px;
    margin: 0 auto;
    padding-top: 90px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.seo-hidden {
    position: absolute;
    left: -9999px;
    top: -9999px;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

/* Scroll offset for SPA sections */
#home,#assets,#devices,#how-it-works,#trusted,#trading,#education,#company,#signup,#login,#adminSection {
    scroll-margin-top: 140px;
}

main {
    flex: 1;
    padding: 2rem;
}

/* ====================== */
/* Header & Logo/Auth     */
/* ====================== */
header {
    position: fixed;
    top: 0; left: 0; right: 0;
    width: 100%;
    background-color: #1f3b29;
    color: #ffffff;
    padding: 1.2rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.logo-auth {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0; /* prevent shrinking */
}

.logo h1 {
    font-size: 2.2rem;
    font-weight: 700;
    color: #27ae60;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.auth {
    display: flex;
    flex-shrink: 0; /* keep visible */
}

.auth ul {
    display: flex;
    gap: 0.8rem;
    list-style: none;
}

.auth ul li a {
    color: #27ae60;
    font-weight: 500;
    text-decoration: none;
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    transition: background 0.3s ease, color 0.2s ease;
    white-space: nowrap; /* prevent wrapping */
}

.auth ul li a:hover {
    background-color: #27ae60;
    color: #fff;
}

/* ====================== */
/* Navbar Links           */
/* ====================== */
#navbar {
    display: flex;
    align-items: center;
}

#navbar ul {
    list-style: none;
    display: flex;
    gap: 1.5rem;
    opacity: 0;
    animation: fadeInNav 0.8s 0.4s forwards;
}

#navbar ul li a {
    text-decoration: none;
    color: #ffffff;
    font-weight: 500;
    font-size: 1.05rem;
    position: relative;
    padding: 0.25rem;
    transition: all 0.3s ease;
}

#navbar ul li a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    height: 2px;
    width: 0%;
    background: #2ecc71;
    transition: width 0.3s ease;
}

#navbar ul li a:hover {
    color: #2ecc71;
}

#navbar ul li a:hover::after {
    width: 100%;
}

.active-section {
    background-color: #eaffea;
    border-left: 4px solid #27ae60;
    padding-left: 1rem;
    transition: background 0.3s ease;
}

@keyframes fadeInNav {
    to { opacity: 1; }
}

/* ====================== */
/* Hamburger Menu         */
/* ====================== */
.hamburger {
    display: none;
    font-size: 28px;
    color: #27ae60;
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 0.4rem;
    transition: color 0.3s ease;
}

/* ====================== */
/* Responsive Adjustments */
/* ====================== */
@media (max-width: 1024px) {
    header {
        flex-direction: column;
        align-items: flex-start;
    }

    #navbar {
        width: 100%;
        margin-top: 1rem;
    }

    #navbar ul {
        flex-direction: column;
        gap: 1rem;
    }
}

/* Mobile adjustments */
/* Mobile adjustments */
@media (max-width: 768px) {
    header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0.8rem 1rem;
    }

    .logo-auth {
        gap: 0.8rem;
    }

    .logo h1 {
        font-size: 1rem; /* Reduced from 2.2rem */
    }

    .auth ul {
        gap: 0.5rem;
    }

    .auth ul li a {
        font-size: 0.9rem;
        padding: 0.25rem 0.5rem;
    }

    .hamburger {
        display: block;
    }

    #navbar {
        display: none;
        position: absolute;
        top: 60px;
        right: 0;
        width: 220px;
        background-color: #1f3b29;
        padding: 1rem;
        box-shadow: -2px 0 10px rgba(0,0,0,0.2);
        border-left: 2px solid #27ae60;
        border-top: 1px solid #27ae60;
        border-radius: 0 0 0 8px;
        z-index: 999;
    }

    #navbar.open {
        display: block;
    }

    #navbar ul {
        flex-direction: column;
        gap: 0.8rem;
    }
}


/* ====================== */
/* Auth Modal (Forms)     */
/* ====================== */
#auth-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15,23,42,0.75);
    z-index: 9999;
    display: none;
}

.auth-section {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 95%;
    max-width: 420px;
    max-height: 92vh;
    overflow-y: auto;
    background: linear-gradient(135deg,#1e293b,#0f172a);
    color: #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    padding: 20px 24px;
    z-index: 10001;
    backdrop-filter: blur(8px);
}

.auth-section .close-btn {
    position: absolute;
    top: 8px;
    right: 12px;
    background: none;
    border: none;
    color: #cbd5e1;
    font-size: 22px;
    cursor: pointer;
}

.form-container { text-align: center; }
.form-container h2 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 14px;
    color: #e0f2fe;
}

.auth-section input,
.auth-section textarea {
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 12px;
    font-size: 14px;
    background-color: #f8fafc;
    color: #0f172a;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.auth-section input:focus,
.auth-section textarea:focus {
    border-color: #38bdf8;
    outline: none;
    box-shadow: 0 0 0 3px rgba(56,189,248,0.3);
}

input::placeholder {
    font-style: italic;
    color: #94a3b8;
}

/* Terms and Buttons */
.terms { display:flex; align-items:center; gap:8px; font-size:12px; margin:10px 0; }
.terms label { color: #94e2d5; }
.terms a { color:#67e8f9; text-decoration:none; }
.terms a:hover { text-decoration: underline; }

.auth-section button[type="submit"], #reset-password-dialog button {
    width:100%; padding:10px; background-color:#38bdf8; color:#fff; border:none; border-radius:6px; font-size:14px; font-weight:500; cursor:pointer; transition: background-color 0.25s ease;
}
.auth-section button[type="submit"]:hover, #reset-password-dialog button:hover { background-color:#0ea5e9; }

.auth-section p { font-size:13px; color:#cbd5e1; margin-top:10px; }
.auth-section p a { color:#60a5fa; text-decoration:none; }
.auth-section p a:hover { text-decoration: underline; }










/* ============================== */
/* 🔄 Loading Spine Overlay       */
/* ============================== */

.loading-spine-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(circle at center, #132921, #1f3b29, #122618);
  z-index: 9999;
  display: none; /* Toggle to 'flex' when active */
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #ffffff;
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  text-align: center;
  padding: 1rem;
}

/* Circular spinner with animated dots */
.spine-spinner {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
  margin-bottom: 10px;
}

.spine-spinner div {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #27ae60;
  border-radius: 50%;
  animation: spineSpin 1.2s linear infinite;
}

/* Dot positions around a virtual circle */
.spine-spinner div:nth-child(1) { top: 0px; left: 34px; animation-delay: 0s; }
.spine-spinner div:nth-child(2) { top: 12px; left: 60px; animation-delay: -0.1s; }
.spine-spinner div:nth-child(3) { top: 34px; left: 68px; animation-delay: -0.2s; }
.spine-spinner div:nth-child(4) { top: 60px; left: 60px; animation-delay: -0.3s; }
.spine-spinner div:nth-child(5) { top: 68px; left: 34px; animation-delay: -0.4s; }
.spine-spinner div:nth-child(6) { top: 60px; left: 10px; animation-delay: -0.5s; }
.spine-spinner div:nth-child(7) { top: 34px; left: 0px; animation-delay: -0.6s; }
.spine-spinner div:nth-child(8) { top: 12px; left: 10px; animation-delay: -0.7s; }

/* Spinner Animation */
@keyframes spineSpin {
  0%   { transform: scale(1); opacity: 1; }
  50%  { transform: scale(1.5); opacity: 0.4; }
  100% { transform: scale(1); opacity: 1; }
}



/*================= 🔔 Feedback Messages =====================*/
.message {
    padding: 10px 14px;
    margin: 14px auto;
    border-radius: 6px;
    max-width: 380px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    opacity: 1;
    transition: opacity 0.4s ease;
}
.message.success {
    background-color: #e1f4e8;
    color: #207c4f;
    border: 1px solid #b0dfc3;
}
.message.error {
    background-color: #fceaea;
    color: #b13838;
    border: 1px solid #efb5b5;
}
.message[style*="display: none"] {
    opacity: 0;
}

/* Profile Update Message */
.update-message {
    display: none;
    width: 100%;
    padding: 8px;
    margin-top: 8px;
    font-size: 13px;
    text-align: center;
    border-radius: 5px;
    background-color: #e2f6ea;
    color: #218855;
    font-weight: 500;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.update-message.error {
    background-color: #fbeaea;
    color: #b22e2e;
}



/* 🔐 Reset Password Dialog */
#reset-password-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 400px;
    padding: 20px;
    background: #1e293b;
    color: #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
    z-index: 10002;
}

/* 📱 Responsive */
@media screen and (max-width: 500px) {
    .auth-section,
    #reset-password-dialog {
        width: 92%;
        padding: 16px;
    }

    .form-container {
        padding: 4px;
    }
}



.custom-alert {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #0f172a;
    color: #facc15;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    opacity: 0;
    transform: translateY(-15px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 9999;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.custom-alert.show {
    opacity: 1;
    transform: translateY(0);
}


#reset-password-dialog .close-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 40px;
    background: none;
    border: none;
    color: #9ef5d3;
    font-size: 16px;
    cursor: pointer;
    padding: 2px 6px;
    line-height: 1;
    z-index: 10;
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

#reset-password-dialog .close-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}



/*================= ✨ Fade Animation =====================*/
@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}


/* ================= HERO SECTION ================= */
.hero {
    text-align: center;
    margin-top: 20px;
    padding: 20px 8px;
    background-color: #1f3b29;
    border-radius: 12px;
    animation: fadeIn 1.2s ease-in;
    position: relative;
}

.hero h2 {
    font-size: 2.3em;
    font-weight: 700;
    color: #a3e635;
    margin-bottom: 18px;
    animation: fadeInText 1.4s ease-out;
}

.hero .highlight {
    color: #facc15;
    text-transform: uppercase;
}

.hero p {
    font-size: 1.15em;
    margin-bottom: 24px;
    color: #e6f7ee;
    animation: fadeInText 1.8s ease-out;
}

button#tryDemo {
    padding: 8px 16px;
    background-color: #22c55e;
    color: #f8fafc;
    border: none;
    cursor: pointer;
    font-size: 1.1em;
    border-radius: 6px;
    transition: background-color 0.3s ease;
}

button#tryDemo:hover {
    background-color: #16a34a;
    animation: pulse 1s infinite alternate;
}

.hero-image-container {
    margin-top: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.hero-image {
    max-width: 60%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* ================= ASSETS SECTION ================= */
/* ===================== ASSETS SECTION ===================== */
.assets {
    text-align: center;
    padding: 20px 10px;
    background-color: #1a2d22;
    border-radius: 12px;
    margin: 10px auto;
    animation: fadeInAssets 1.5s ease-in-out;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    max-width: 1400px;
}

/* Highlighted Heading */
.assets h3.highlight {
    font-size: 1.6em;
    color: #a3e635;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Icon Container */
.asset-icons {
    font-size: 2.8em;
    display: flex;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
    margin-top: 20px;
}

/* Individual Icons */
.asset-icons i {
    color: #4ade80;
    transition: transform 0.3s ease, color 0.3s ease;
}

.asset-icons i:hover {
    transform: scale(1.2);
    color: #facc15;
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 468px) {
    .assets {
        padding: 28px 16px;
        margin: 40px auto;
    }

    .assets h3.highlight {
        font-size: 1.2em;
        margin-bottom: 12px;
    }

    .asset-icons {
        font-size: 2em;
        gap: 20px;
    }
}

/* ===================== ANIMATION ===================== */
@keyframes fadeInAssets {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ================= DEVICES SECTION ================= */
.devices {
    text-align: center;
    padding: 20px 8px;
    background-color: #183a2a;
    border-radius: 12px;
    animation: fadeInText 1.6s ease-out;
}

.devices h3 {
    font-size: 2.2em;
    color: #a3e635;
    margin-bottom: 18px;
}

.device-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 18px;
    padding: 0;
}

.device {
    background-color: #2e4735;
    color: #e0f2e9;
    border-radius: 10px;
    padding: 18px;
    transition: transform 0.3s ease, background-color 0.3s ease;
    cursor: pointer;
}

.device:hover {
    transform: scale(1.05);
    background-color: #235937;
}

.device i {
    font-size: 2.8em;
    color: #86efac;
    margin-bottom: 10px;
}

.device p {
    font-size: 1.1em;
}

/* ================= HOW IT WORKS SECTION ================= */
.how-it-works {
    text-align: center;
    padding: 20px 8px;
    background-color: #1c3224;
    border-radius: 12px;
    margin-top: 20px;
    animation: fadeInText 1.8s ease-out;
}

.how-it-works h3 {
    font-size: 2.2em;
    color: #a3e635;
    margin-bottom: 24px;
}

.how-it-works-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
    padding: 0;
}

.how-it-item {
    background-color: #2a4735;
    color: #f0fdf4;
    border-radius: 10px;
    padding: 18px;
    transition: transform 0.3s ease;
}

.how-it-item:hover {
    transform: translateY(-4px);
    background-color: #275d3d;
}

.how-it-item i {
    font-size: 2.8em;
    color: #4ade80;
    margin-bottom: 10px;
}

.how-it-item p {
    font-size: 1.1em;
}

/* ================= TRUSTED SECTION ================= */
.trusted {
    text-align: center;
    padding: 20px 8px;
    background: linear-gradient(135deg, #173e2b, #14532d);
    color: #f0fdf4;
    border-radius: 12px;
    margin-top: 20px;
    animation: fadeInText 1.6s ease-out;

}

.trusted h3 {
    font-size: 2.5em;
    font-weight: 700;
    color: #a3e635;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.trusted p {
    font-size: 1.1em;
    max-width: 800px;
    margin: 0 auto;
    color: #d1fae5;
}

.highlight {
    font-size: 1.8em;
    color: #facc15;
    font-weight: bold;
}

.trusted .circle-container {
    display: inline-flex;
    width: 100px;
    height: 100px;
    background-color: #a3e635;
    color: #1f3b29;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    font-size: 1.4em;
    margin-top: 16px;
}

/* ================= GLOBAL SECTION ================= */
.global {
    background: linear-gradient(135deg, #1c422f, #143629);
    color: #f0fdf4;
    padding: 20px 8px;
    border-radius: 12px;
    max-width: 1400px;
    margin: 20px auto;
    text-align: center;
    animation: fadeIn 2s ease-out;
}

.global h3 {
    font-size: 2.6em;
    color: #a3e635;
    margin-bottom: 32px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.global ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
    padding: 0;
    list-style: none;
}

.global ul li {
    background: rgba(255, 255, 255, 0.05);
    padding: 18px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.global ul li:hover {
    transform: scale(1.05);
}

.global ul li .icon {
    font-size: 2.6em;
    color: #84cc16;
    margin-bottom: 16px;
}

.global ul li .value {
    font-size: 1.4em;
    font-weight: bold;
    color: #f0fdf4;
}

.global ul li .highlight {
    font-size: 1.1em;
    font-style: italic;
    color: #facc15;
}

.global-info {
    margin-top: 32px;
    font-size: 1.15em;
    color: #d1fae5;
    opacity: 0.9;
}

/* ================= ANIMATIONS ================= */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInText {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
    from { transform: scale(1); }
    to { transform: scale(1.05); }
}

/* ================= RESPONSIVE ================= */
@media (max-width: 468px) {

  /* ===== Hero Section ===== */
  .hero {
    padding: 24px 12px;
    margin-top: 20px;
    border-radius: 10px;
  }

  .hero h2 {
    font-size: 1.5em;
    margin-bottom: 12px;
  }

  .hero p {
    font-size: 0.95em;
    margin-bottom: 16px;
  }

  button#tryDemo {
    font-size: 1em;
    padding: 6px 12px;
    width: 100%;
  }

  .hero-image-container {
    margin-top: 18px;
  }

  .hero-image {
    border-radius: 6px;
  }

  /* ===== Assets Section ===== */
  .assets {
    padding: 24px 12px;
  }

  .assets h3 {
    font-size: 1em;
    margin-bottom: 10px;
  }

  .asset-icons {
    font-size: 1.6em;
  }

  .asset-icons i {
    margin: 0 8px;
  }

  /* ===== Devices Section ===== */
  .devices {
    padding: 24px 12px;
    border-radius: 10px;
  }

  .devices h3 {
    font-size: 1.4em;
    margin-bottom: 14px;
  }

  .device-list {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .device {
    padding: 14px;
  }

  .device i {
    font-size: 2.2em;
    margin-bottom: 8px;
  }

  .device p {
    font-size: 0.95em;
  }

  /* ===== How It Works Section ===== */
  .how-it-works {
    padding: 24px 12px;
    border-radius: 10px;
    margin-top: 60px;
  }

  .how-it-works h3 {
    font-size: 1.5em;
    margin-bottom: 18px;
  }

  .how-it-works-list {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .how-it-item {
    padding: 14px;
  }

  .how-it-item i {
    font-size: 2.2em;
    margin-bottom: 8px;
  }

  .how-it-item p {
    font-size: 0.95em;
  }

  /* ===== Trusted Section ===== */
  .trusted {
    padding: 30px 12px;
    margin-top: 60px;
    border-radius: 10px;
  }

  .trusted h3 {
    font-size: 1.6em;
    letter-spacing: 1px;
    margin-bottom: 14px;
  }

  .trusted p {
    font-size: 0.95em;
    padding: 0 8px;
  }

  .trusted .circle-container {
    width: 70px;
    height: 70px;
    font-size: 1em;
    margin-top: 12px;
  }

  .highlight {
    font-size: 1.2em;
  }

  /* ===== Global Section ===== */
  .global {
    padding: 30px 12px;
    margin: 60px auto;
    border-radius: 10px;
  }

  .global h3 {
    font-size: 1.6em;
    margin-bottom: 20px;
    letter-spacing: 1px;
  }

  .global ul {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .global ul li {
    padding: 14px;
  }

  .global ul li .icon {
    font-size: 2.2em;
    margin-bottom: 12px;
  }

  .global ul li .value {
    font-size: 1.1em;
  }

  .global ul li .highlight {
    font-size: 0.95em;
  }

  .global-info {
    font-size: 0.95em;
    margin-top: 24px;
  }

}


/*SPA ARCHITECTURE SECTIONS*/
/* ================= SPA ARCHITECTURE SECTIONS ================= */

/* Section Container */
.spa-section {
    padding: 40px 20px;
    margin-bottom: 30px;
    border-bottom: 2px dashed #2e593a;
    background-color: #132c1f;
    border-radius: 12px;
    animation: fadeIn 0.8s ease-in-out;
}

/* Section Headers */
.spa-section h2 {
    font-size: 2.2em;
    margin-bottom: 20px;
    color: #a3e635;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.spa-section h2::before {
    content: "🚀 ";
}

.spa-section h3 {
    font-size: 1.5em;
    margin-top: 25px;
    color: #facc15;
    position: relative;
}

.spa-section h3::before {
    content: "✨ ";
    margin-right: 5px;
}

/* Section Paragraphs */
.spa-section p {
    font-size: 1.05em;
    line-height: 1.6;
    margin: 20px 0;
    padding: 18px 22px;
    color: #ecfdf5;
    background: linear-gradient(135deg, #1e3b29, #254732);
    clip-path: polygon(0 0, 100% 0, 96% 100%, 4% 100%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border-left: 5px solid #4ade80;
    transition: transform 0.3s ease, background 0.3s ease;
    border-radius: 6px;
}

.spa-section p:hover {
    transform: scale(1.02);
    background: linear-gradient(135deg, #14532d, #1e3b29);
}

/* Call-to-Action Button */
button#StartNow {
    padding: 10px 20px;
    background-color: #22c55e;
    color: #f8fafc;
    border: none;
    border-radius: 6px;
    font-size: 1.2em;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 180px;
    margin: 20px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

button#StartNow:hover {
    background-color: #15803d;
}

/* Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ================= MEDIA QUERY: 468px ================= */
@media (max-width: 468px) {
    .spa-section {
        padding: 28px 14px;
        margin-bottom: 20px;
    }

    .spa-section h2 {
        font-size: 1.5em;
        margin-bottom: 14px;
    }

    .spa-section h3 {
        font-size: 1.2em;
        margin-top: 20px;
    }

    .spa-section p {
        font-size: 0.95em;
        padding: 14px 16px;
        margin: 16px 0;
        clip-path: polygon(0 0, 100% 0, 98% 100%, 2% 100%);
    }

    button#StartNow {
        width: 160px;
        font-size: 1em;
        padding: 8px 16px;
    }
}


/*<================================== USER PROFILE OVERLAY ==================================>*/
#user-profile {
    display: none;
    flex-direction: column;
    height: 100vh;
    width: 100vw !important;
    font-family: 'Segoe UI', sans-serif;
    background-color: #0e1c14f2; /* Deep forest green with slight transparency */
    color: #d1fae5; /* Mint green text */
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    overflow-y: auto;
    animation: fadeInOverlay 0.4s ease-in-out;
}

/* ============ Fullscreen Mode ============ */
html.fullscreen-mode,
body.fullscreen-mode {
    margin: 0;
    padding: 0;
    width: 100vw !important;
    height: 100vh !important;
    overflow: hidden;
    background-color: #0b1b13; /* Flat forest tone */
}

main.fullscreen-mode {
    display: none !important;
}

.user-profile {
    display: block !important;
}


/*<====================== MAIN GRAPH AREA ======================>*/
#trading-graph-container {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    background: #101f16;
    border: 1px solid #1d3527;
    border-radius: 6px;
    box-sizing: border-box;
    padding-right: 60px;
    z-index: 10;
    overflow: hidden;
}

#trading-graph {
    flex: 1;
    min-height: 0;
    min-width: 0;
}

.profit-flash {
    background-color: rgba(163, 230, 53, 0.2); /* Subtle lime green flash */
    transition: background-color 0.3s ease;
}




/*<==================== PROFILE HEADER & SECTIONS ====================>*/
#user-profile .profile-header {
    font-size: 1.6em;
    font-weight: 700;
    background-color: #1a3326;
    color: #a3e635; /* Bright lime green */
    text-align: center;
    border-bottom: 2px solid #22c55e;
}

#user-profile .profile-section {
    background: #14251c;
    color: #ecfdf5;
    border-left: 4px solid #22c55e; /* Bright green highlight */
    border-radius: 4px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

#user-profile .profile-section h4 {
    font-size: 1.1em;
    font-weight: 600;
    color: #86efac; /* Mint accent */
    margin: 0;
}

#user-profile .profile-section p {
    font-size: 0.95em;
    color: #c9f3e3;
    margin: 0;
    line-height: 1.5;
}


/*<======================== ANIMATIONS =======================>*/
@keyframes fadeInOverlay {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/*<======================== RESPONSIVE =======================>*/
@media (max-width: 768px) {
    #user-profile .profile-header {
        font-size: 1.3em;
    }

    #user-profile .profile-section h4 {
        font-size: 1em;
    }

    #user-profile .profile-section p {
        font-size: 0.9em;
    }
}

@media (max-width: 468px) {
    #user-profile .profile-header {
        font-size: 1.1em;
    }

    #user-profile .profile-section h4 {
        font-size: 0.95em;
    }

    #user-profile .profile-section p {
        font-size: 0.85em;
    }
}





/* =============== TOP BAR =============== */
#top-bar {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: fit-content;
    max-width: 95vw;
    min-width: 280px;
    height: 56px;
    padding: 0 0.5rem;
    display: flex;
    gap: 0.6rem;
    align-items: center;
    justify-content: center;
    background: rgba(16, 27, 23, 0.95);
    border: 1px solid rgba(0, 255, 194, 0.2);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0, 255, 200, 0.08);
    z-index: 1000;
    transition: all 0.25s ease-in-out;
}

#top-bar .balances {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* =============== UNIFIED BUTTON STYLE =============== */
.unified-top-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: linear-gradient(135deg, #0f1d17, #1d3932);
    color: #cafff4;
    border: 1px solid #00ffc2;
    border-radius: 10px;
    padding: 0.5rem 0.9rem;
    font-size: 0.88rem;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0, 255, 200, 0.1);
    transition: all 0.2s ease;
    height: 2.6rem;
    white-space: nowrap;
}

.unified-top-button:hover {
    background: linear-gradient(135deg, #123128, #1e4a3d);
    color: #aaffee;
}

/* =============== ACCOUNT TOGGLE =============== */
.account-toggle {
    background: rgba(20, 40, 35, 0.85);
    color: #d1fffa;
    border: 1px solid #00e0aa;
    cursor: pointer;
    min-width: 120px;
    font-size: 0.95rem;
    backdrop-filter: blur(8px);
}

/* =============== FINANCES BUTTON =============== */
#finances-toggle-btn {
    background: linear-gradient(135deg, #c73228, #061ad3);
    color: #cafff4;
    border: 1px solid rgba(255, 38, 0, 0.3);
    border-radius: 40px;
    font-size: 0.95rem;
    box-shadow: 0 4px 12px rgba(0, 255, 200, 0.08);
    backdrop-filter: blur(8px);
     cursor: pointer;
}

#finances-toggle-btn:hover {
    transform: translateY(-1px);
    background: linear-gradient(135deg, #255248, #163c35);
    box-shadow: 0 6px 18px rgba(0, 255, 200, 0.12);
}

#finances-toggle-btn:active {
    transform: scale(0.98);
    background: linear-gradient(135deg, #1c3b33, #0f2d27);
}

#finances-toggle-btn i {
    font-size: 1.2rem;
    color: #00ffd0;
}

#finances-toggle-btn span {
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* =============== ACCOUNT POPUP =============== */
.account-popup {
    position: absolute;
    top: 100%;
    right: 0;
    width: 280px;
    background: rgba(12, 24, 22, 0.9);
    border: 1px solid #00ffc2;
    border-radius: 10px;
    padding: 1rem 0.75rem;
    box-shadow: 0 8px 24px rgba(0, 255, 200, 0.08);
    font-size: 0.87rem;
    color: #cafff7;
    z-index: 1002;
    backdrop-filter: blur(10px);
    animation: fadeSlideIn 0.25s ease;
}

@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.popup-heading {
    font-size: 1.05rem;
    font-weight: bold;
    color: #00ffd9;
    border-bottom: 1px solid #00ffc2;
    padding-bottom: 0.5rem;
    margin-bottom: 0.75rem;
}

.account-category-heading {
    font-size: 0.95rem;
    font-weight: bold;
    color: #79f6ff;
    margin: 12px 0 8px;
}

.popup-account-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 10px;
    font-size: 0.9rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.15s ease;
}

.popup-account-row:hover {
    background-color: rgba(0, 255, 200, 0.08);
    transform: translateX(2px);
}

.popup-account-row .currency {
    min-width: 80px;
}

#top-real-accounts .currency { color: #f5d93d; }
#top-real-accounts .balance  { color: #00ffc2; }
#top-demo-account .currency  { color: #85d8ff; }
#top-demo-account .balance   { color: #ffb38a; }

/* =============== FINANCES POPUP =============== */
.finances-popup {
    position: absolute;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    width: 340px;
    background: rgba(14, 26, 23, 0.85);
    border: 1px solid rgba(0, 255, 194, 0.3);
    border-radius: 20px;
    padding: 1.5rem 1.25rem;
    color: #dbfff6;
    box-shadow: 0 12px 28px rgba(0, 255, 200, 0.15);
    backdrop-filter: blur(18px);
    z-index: 1100;
    animation: fadeInFinances 0.3s ease;
}

@keyframes fadeInFinances {
    from { opacity: 0; transform: translate(-50%, -10px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

#finances-popup-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #aaffec;
    border-bottom: 1px solid rgba(0, 255, 200, 0.2);
    padding-bottom: 0.6rem;
    margin-bottom: 1.2rem;
    text-align: center;
    letter-spacing: 0.4px;
}

.finances-description {
    font-size: 0.95rem;
    color: #bdfcf0;
    margin: 1rem 0;
    line-height: 1.6;
    text-align: center;
}

.finances-options-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 1rem;
    list-style: none;
    padding: 0;
}

.finances-option-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    background-color: rgba(20, 46, 42, 0.85);
    border: 1px solid rgba(0, 255, 194, 0.25);
    color: #e7fcf8;
    padding: 1rem 0.7rem;
    border-radius: 12px;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: center;
    box-shadow: 0 3px 8px rgba(0, 255, 200, 0.05);
}

.finances-option-btn i {
    font-size: 1.4rem;
    color: #00ffd0;
}

.finances-option-btn:hover {
    background-color: #224c45;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 255, 200, 0.1);
}

.finances-history-link {
    display: block;
    margin-top: 1.5rem;
    text-align: center;
    background-color: #00ffc2;
    color: #0f2e26;
    padding: 0.75rem 1.2rem;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
    transition: background-color 0.3s ease;
}

.finances-history-link:hover {
    background-color: #1affd6;
}

/* =============== RESPONSIVE (<=768px) =============== */
@media (max-width: 768px) {
    #top-bar {
        top: 0;
        width: 75vw;
        padding: 0.2 0.2;
        height: auto;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: 0.5rem;
    }

    .unified-top-button {
        font-size: 0.85rem;
        padding: 0.55rem 0.9rem;
        border-radius: 8px;
        flex-shrink: 0;
        white-space: nowrap;
    }

    .account-toggle {
        width: auto;
        max-width: 100%;
        flex-grow: 1;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #finances-toggle-btn {
        width: auto;
        flex-grow: 0;
        flex-shrink: 0;
        font-size: 0.85rem;
        padding: 0.55rem 1rem;
        border-radius: 10px;
    }

    .account-texts {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        line-height: 1;
    }

    .balance-display {
        font-size: 0.82rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .account-type-label {
        font-size: 0.8rem;
    }

    .account-popup,
    .finances-popup {
        position: fixed !important;
        top: 58px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        transform: none !important;
        border-radius: 0 !important;
        margin: 0 auto;
        max-height: calc(100vh - 60px);
        overflow-y: auto;
        box-shadow: none;
        backdrop-filter: blur(10px);
    }


    .popup-heading,
    #finances-popup-title {
        font-size: 1rem;
    }

    .popup-account-row,
    .finances-option-btn {
        font-size: 0.85rem;
        padding: 0.6rem;
    }

    .finances-description {
        font-size: 0.85rem;
        line-height: 1.4;
    }

    .finances-history-link {
        font-size: 0.85rem;
        padding: 0.6rem;
    }

    .finances-button {
        font-size: 0.9rem;
        border-radius: 12px;
    }
}




/*Assets / Currency selector */
/* ---------------------------- Asset Selector ---------------------------- */
.asset-selector,
.selected-asset-display {
    position: absolute;
    top: 60px;
    right: 65px;
    width: 300px;
    max-height: 80vh;
    background-color: #0d1713f2; /* Forest overlay */
    border: 1px solid #22c55e;
    padding: 1rem;
    color: #d1fae5;
    z-index: 999;
    border-radius: 6px;
    backdrop-filter: blur(4px);
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

/* Visually Hidden */
.visually-hidden {
    position: absolute;
    left: -9999px;
}

/* Tabs & Time Selector */
.asset-type-tabs,
.chart-time-selector {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.asset-type-tabs button,
.chart-time-selector button {
    background: #162720;
    color: #d1fae5;
    border: 1px solid #1f4034;
    padding: 0.4rem 0.6rem;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.2s ease;
}

.asset-type-tabs button[aria-selected="true"],
.chart-time-selector button[aria-pressed="true"] {
    background: #22c55e;
    color: #0d1f18;
}

/* Controls */
.asset-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.asset-controls select {
    padding: 0.3rem;
    background: #0f1b15;
    color: #d1fae5;
    border: 1px solid #1f4034;
    border-radius: 4px;
}

/* Asset Table Header */
.asset-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #0f1f1a;
    padding: 0.5rem;
    border-bottom: 1px solid #1f4034;
    margin-bottom: 0.5rem;
}

.asset-title {
    font-weight: 600;
    color: #a7f3d0;
    font-size: 1rem;
}

.time-interval-dropdown select {
    padding: 0.3rem;
    background: #0d1b15;
    color: #d1fae5;
    border: 1px solid #22c55e;
    font-size: 0.9rem;
    border-radius: 4px;
}

/* Asset List Cards */
.asset-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 55vh;
    overflow-y: auto;
    padding-right: 0.5rem;
    cursor: pointer;
}

.asset-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #14251c;
    border: 1px solid #1f4034;
    padding: 0.6rem 0.8rem;
    border-radius: 5px;
    color: #d1fae5;
    transition: background 0.2s ease;
}

.asset-card:hover {
    background: #1a3427;
}

.asset-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-grow: 1;
}

.asset-info .name {
    font-weight: 600;
    font-size: 1rem;
    color: #bbf7d0;
    margin-bottom: 0.25rem;
}

.asset-info .profit {
    font-size: 0.85rem;
    color: #22c55e;
}

/* Mini Graph */
.mini-graph {
    width: 100px;
    min-height: 40px;
    background-color: #1c3128;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    margin-left: 1rem;
    flex-shrink: 0;
    padding: 0.3rem;
    text-align: center;
}

.graph-placeholder {
    color: #a0aec0;
    font-size: 0.75rem;
    text-align: center;
}

/* Toggle Button */
#toggle-asset-selector {
    position: absolute;
    top: 0;
    height: 50px;
    width: 300px;
    right: 65px;
    background: #1a2e24;
    color: #d1fae5;
    border: 1px solid #22c55e;
    padding: 0.2rem 0.5rem;
    cursor: pointer;
    font-weight: bold;
    z-index: 1000;
    transition: background-color 0.3s ease;
    border-radius: 5px;
}

#toggle-asset-selector:hover {
    background: #214533;
}

/* OHLC Table */
#ohlc-table-wrapper {
    flex: 1;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: auto;
    background-color: #0f1a13;
    color: #d1fae5;
    font-family: monospace;
    max-width: 300px;
    width: 300px;
    margin-top: 150px;
    scrollbar-width: thin;
    scrollbar-color: #22c55e transparent;
}

#ohlc-table {
    width: 100%;
    border-collapse: collapse;
    max-width: 300px;
}

#ohlc-table th,
#ohlc-table td {
    border: 1px solid #1f4034;
    padding: 0.5rem;
    text-align: right;
}

#ohlc-table th {
    background-color: #14251c;
    position: sticky;
    top: 0;
    z-index: 2;
}

.value-up {
    color: #22c55e;
}

.value-down {
    color: #ef4444;
}

.arrow-up::after {
    content: "▲";
    color: #22c55e;
    margin-left: 6px;
    font-size: 0.75em;
    vertical-align: middle;
}

.arrow-down::after {
    content: "▼";
    color: #ef4444;
    margin-left: 6px;
    font-size: 0.75em;
    vertical-align: middle;
}


@media (max-width: 768px) {
    /* Default: hide inline table on mobile */
    #ohlc-table-wrapper {
        display: none !important;
    }

    /* Show toggle button */
    #btn-ohlc-toggle {
        display: inline-flex !important;
    }

    /* Fullscreen style applied only when JS adds the class */
    #ohlc-table-wrapper.fullscreen-ohlc {
        display: block !important;
        position: fixed;
        inset: 0;
        z-index: 9999;
        background-color: rgba(0, 0, 0, 0.92);
        padding: 1rem;
        overflow-y: auto;
    }

    #ohlc-table-wrapper.fullscreen-ohlc table {
        width: 100%;
        max-width: 95%;
        margin: 0 auto;
    }
}



@media (max-width: 768px) {
    /* Ensure hidden by default */
    #asset-selector {
        display: none !important;
    }

    /* Only show button on mobile */
    #btn-asset-selector-toggle {
        display: inline-flex !important;
    }

    /* Fullscreen styling when active */
    #asset-selector.fullscreen-asset-selector {
        display: block !important;
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.95);
        z-index: 9999;
        overflow-y: auto;
        padding: 1rem;
    }

    #toggle-asset-selector {
        position: fixed;
        top: 8px;
        left: 0;
        right: 0;
        width: 100vw !important;
        padding: 0.5rem 1rem;
        z-index: 10000;
        border-radius: 0;
        background-color: #111;
        color: #eee;
        border: none;
        display: none !important; /* as in your last rule */
        justify-content: space-between;
        align-items: center;
        font-size: 0.85rem;
    }

    #toggle-asset-selector .dropdown-icon {
        font-size: 1rem;
    }

    #selected-asset-display {
        position: fixed;
        top: 48px;
        left: 50px;
        right: 0;
        padding: 0.4rem 1rem;
        width: 50%;
        background: rgba(20, 20, 20, 0.7);
        color: #ccc;
        font-size: 0.75rem;
        z-index: 9999;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #toggle-asset-selector-label {
        display: none !important;
    }
}

@media (max-width: 768px) {
    #selected-asset-display {
        display: none !important;
    }
}



/*<-------------General For Left and Right Sidebar--------------------->*/
/* ✴️ Common Styles for Sidebar Close Buttons */
.sidebar-close-btn {
    position: absolute;
    top: 8px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: none;
    color: #a0bfc6; 
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    z-index: 10;
    transition: color 0.2s ease, transform 0.15s ease;
}

.sidebar-close-btn:hover,
.sidebar-close-btn:focus {
    color: #22c55e;
    transform: scale(1.1);
    outline: none;
}

/* 🡰 Left Sidebar Close */
#left-sidebar-expanded .sidebar-close-btn {
    left: 8px;
}

/* 🡲 Right Sidebar Close */
#right-sidebar-expanded .sidebar-close-btn {
    right: 8px;
}

@media (max-width: 768px) {
    .sidebar-close-btn {
        top: 10px;
        width: 36px;
        height: 36px;
        font-size: 20px;
    }

    #left-sidebar-expanded .sidebar-close-btn {
        left: 12px;
    }

    #right-sidebar-expanded .sidebar-close-btn {
        right: 12px;
    }
}




/*<----------------------------LEFT SIDEBAR---------------------------->*/
#left-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 50px;
    background-color: rgb(4, 73, 112);
    overflow-y: auto;
    z-index: 999;
    transition: width 0.3s ease;
}

#left-sidebar.expanded {
    width: 250px;
}

#right-sidebar.expanded {
    width: 250px;
}


#left-sidebar nav {
    display: flex;
    flex-direction: column;
    padding: 1rem 0;
}


.profile-tab.active {
    background-color: rgba(255, 255, 255, 0.1);
    border-left: 2px solid #fff;
}


@media (max-width: 768px) {
    #left-sidebar {
        padding: 0.2rem 0;
		padding-top: 20px !important;
    }

    #left-sidebar nav {
        padding: 0.25rem 0;
    }

    #left-sidebar nav i,
    #left-sidebar nav svg {
        font-size: 1rem; /* smaller icons */
    }

    .profile-tab {
        padding: 0.3rem 0.5rem;
        margin: 0.2rem 0;
    }

    .profile-tab.active {
        border-left: 2px solid #fff;
    }
}




/* =========================Profile Info Section=========================== */
#profile-info:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* Also fixed typo: was '1.rem' */
    padding: 0.5rem;
    color: #fff;
    width: 100%;
    margin: 0 auto;
}


[hidden] {
    display: none !important;
}


/* Top area with Profile title and buttons */
.profile-top.part {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.profile-top h2 {
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0;
  margin-top: 20px;
  text-align: center;
}

#profile-display h3 {
    font-size: 1.3rem;
    color: #d4c9c9;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
    border-bottom: 2px solid #ddd;
    padding-bottom: 0.4rem;
}


#profile-info .profile-top h2#profile-heading {
  text-align: center;
  width: 100%;
  margin: 0 auto;
}



#notification-btn{
  background-color: transparent;
  border: 1px solid #888;
  color: #fff;
  padding:0;
  border-radius: none;
  cursor: pointer;
  width: 20px;
  transition: background-color 0.2s ease;
}

#edit-profile {
  background-color: transparent;
  border: 1px solid #888;
  color: #fff;
  padding:0;
  border-radius: none;
  cursor: pointer;
  width: 20px;
  transition: background-color 0.2s ease;
  margin-bottom: 20px;
}


#notification-btn:hover,
#edit-profile:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Greeting + Account type */
#profile-info > h2 {
  font-size: 1.4rem;
  margin-top: 10px;
  margin-bottom: 10px;
  color: #00e676;
}

/* ==================== PROFILE PICTURE ==================== */
.profile-picture {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 1rem auto;
    border-radius: 50%;
    overflow: hidden;
    background-color: #073c4d; /* Dark slate background */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 6px rgba(0, 255, 255, 0.2);
}

.profile-pic {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Placeholder when image is missing */
.placeholder-icon {
    position: absolute;
    font-size: 2.5rem;
    color: #4b5563; /* Gray slate */
    user-select: none;
    pointer-events: none;
}

.profile-picture img:not([style*="display: none"]) + .placeholder-icon {
    display: none;
}

/* Edit Button Overlay */
#edit-pic-btn {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background-color: rgba(0, 255, 204, 0.7); /* Soft neon cyan */
    border: none;
    padding: 6px;
    font-size: 0.8rem;
    color: #0f172a;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

#edit-pic-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
}


/* ==================== PROFILE INFO ==================== */
#profile-info p {
    font-size: 0.9rem;
    color: #67e8f9; /* Light cyan */
    margin-bottom: 1rem;
}

#account-type-label {
    font-weight: bold;
    color: #22c55e; /* Neon green */
}


/* ==================== ACCOUNT INFO LIST ==================== */
.account-info-list {
    list-style: none;
    padding: 8px 10px;
    margin: 10px 0;
    font-size: 0.84rem;
    background: #0b1b3f; /* Deep navy */
    border-radius: 6px;
    box-shadow: 0 1px 6px rgba(0, 255, 255, 0.05);
}

.account-info-list li {
    padding: 6px 8px;
    margin-bottom: 5px;
    border-radius: 3px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #e2e8f0;
    background-color: rgba(4, 85, 17, 0.02);
}

.account-info-list li:last-child {
    margin-bottom: 0;
}

.account-info-list strong {
    font-weight: 600;
    color: #67e8f9; /* Light cyan */
    margin-right: 8px;
    flex-shrink: 0;
}

.account-info-list span {
    color: #f0fdfa;
    text-align: right;
    max-width: 60%;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ==================== FIELD UTILITIES ==================== */
.inline-field,
.field-content,
.field-content.spaced,
.code-entry {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.field-content.spaced {
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    flex-wrap: nowrap;
}

.field-content .main-text {
    flex-grow: 1;
    font-size: 12px;
    color: #e0f2f1;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ==================== VERIFIED BADGE ==================== */
.verified-tag {
    color: #22c55e;
    font-size: 12px;
    background-color: rgba(34, 197, 94, 0.15);
    padding: 2px 6px;
    border-radius: 4px;
    flex-shrink: 0;
    margin-left: auto;
}


/* ==================== VERIFY BUTTONS ==================== */
.verify-btn {
    margin-left: 10px;
    padding: 2px 8px;
    font-size: 12px;
    background-color: #facc15; /* Yellow */
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: #111;
    transition: background-color 0.2s ease;
}

.verify-btn:hover {
    background-color: #fbbf24;
}


/* ==================== INPUT FIELDS ==================== */
.verify-input {
    padding: 3px 6px;
    border-radius: 4px;
    border: 1px solid #334155;
    background-color: #1e293b;
    color: #e0f2f1;
    font-size: 12px;
    width: 90px;
}


/* ==================== RESPONSIVE (≤768px) ==================== */
@media (max-width: 768px) {
    .profile-picture {
        width: 80px;
        height: 80px;
    }

    .placeholder-icon {
        font-size: 2rem;
    }

    #edit-pic-btn {
        bottom: 2px;
        right: 2px;
        padding: 4px;
        font-size: 0.7rem;
    }

    #profile-info p {
        font-size: 0.85rem;
    }

    .account-info-list {
        font-size: 0.8rem;
    }

    .account-info-list strong {
        min-width: 100px;
    }

    .verify-btn,
    .verify-input {
        font-size: 11px;
    }
}



/* ---------------Editable Profile Form -----------*/
#edit-profile-form {
    display: none;
    flex-direction: column;
    gap: 1rem;
    background: #101a24;
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 255, 255, 0.05);
}

#edit-profile-form.show,
#profile-content.show {
    display: flex;
}

#edit-profile-form label {
    font-weight: 600;
    color: #90f0ff;
    font-size: 0.95rem;
}

#edit-profile-form input {
    background-color: #121c2a;
    border: 1px solid #2dd4bf;
    padding: 0.6rem;
    border-radius: 0.5rem;
    color: #e0f7fa;
    font-size: 1rem;
}

.visually-hidden {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Buttons */
#edit-profile-form button[type="submit"],
#delete-account {
    background-color: transparent;
    border: 1px solid #0ff;
    color: #0ff;
    font-weight: 600;
    padding: 0.6rem 1.2rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: 0.3s ease;
}

#delete-account {
    border-color: #e53935;
    color: #ff6b6b;
}

#edit-profile-form button:hover,
#delete-account:hover {
    background-color: rgba(0, 255, 255, 0.1);
    opacity: 0.95;
}

/* Custom Modal for Deletion */
.custom-modal {
    position: fixed;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    width: 300px;
    max-width: 90%;
    background-color: #16212f;
    color: #d5faff;
    border-radius: 10px;
    padding: 20px;
    z-index: 1000;
    box-shadow: 0 8px 16px rgba(0,255,255,0.05);
    display: none;
    animation: fadeIn 0.3s ease-out;
}

.modal-content h3 {
    color: #ff6b6b;
    font-size: 1.2rem;
}

.modal-content p {
    font-size: 0.9rem;
    color: #cccccc;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.danger-btn {
    background-color: #ff1744;
    color: white;
    padding: 6px 12px;
    border: none;
    border-radius: 6px;
}

.cancel-btn {
    background-color: #555;
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
}

/* Profile Tabs */
.profile-section h2 {
    font-size: 1.5rem;
    color: #0ff;
    border-bottom: 2px solid #0ff;
    padding-bottom: 0.5rem;
}

.profile-nav,
nav[aria-label="profile-navigation"] {
    position: absolute;
    bottom: 1rem;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    background: transparent;
}

.profile-tab {
    background: none;
    border: none;
    color: #88cfd3;
    font-size: 0.65rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: color 0.2s ease;
}

.profile-tab.active,
.profile-tab:hover {
    color: #0ff;
}

/* ===================== Security Tab ===================== */
#security {
    background: #0e1824;
    padding: 1.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

#security h2, #security h3 {
    color: #0ff;
    border-bottom: 1px solid #0ff5;
    font-size: 1.1rem;
    text-align: center;
}

#security p {
    color: #ccc;
    font-size: 0.9rem;
}

#security-settings-form input[type="password"] {
    background-color: #121c2a;
    border: 1px solid #2dd4bf;
    padding: 0.5rem;
    border-radius: 0.5rem;
    color: #e0f7fa;
}

#security-settings-form button,
#toggle-2fa {
    background-color: #0ff;
    color: #001c24;
    padding: 0.6rem 1.2rem;
    border: none;
    border-radius: 0.5rem;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s ease;
}

#toggle-2fa:hover,
#security-settings-form button:hover {
    background-color: #22d3ee;
}

/* Password visibility */
.password-wrapper {
    position: relative;
}

.password-wrapper input {
    width: 100%;
    padding-right: 35px;
}

.password-wrapper .toggle-password {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #888;
}

/* Form messages */
.user-change_password_form-message {
    margin-top: 10px;
    font-size: 0.9rem;
    padding: 6px 10px;
    border-radius: 5px;
    display: inline-block;
}

.user-change_password_form-message.success {
    color: #00e676;
    background-color: rgba(0, 255, 128, 0.08);
    border: 1px solid #00e676;
}

.user-change_password_form-message.error {
    color: #ff5252;
    background-color: rgba(255, 82, 82, 0.1);
    border: 1px solid #ff5252;
}



/* ================== MEDIA QUERY ================== */
@media (max-width: 768px) {
    #edit-profile-form {
        padding: 1rem;
    }

    .custom-modal {
        width: 90%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .profile-section h2 {
        font-size: 1.2rem;
    }

    .profile-tab {
        font-size: 0.55rem;
    }

    .profile-tab i {
        font-size: 1rem;
    }

    #security {
        padding: 1rem;
    }

    .modal-content {
        padding: 16px 20px;
    }

    #edit-profile-form input,
    #security-settings-form input {
        font-size: 0.9rem;
    }
}






/* ----------------------------- Finance Section ----------------------------- */

/* ----------------------------- Finance Section (Styled) ----------------------------- */
#finances-info {
    color: #d5faff;
    background-color: #0a141f;
    max-height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-size: 0.9rem;
    padding: 1rem;
    border-radius: 0.75rem;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.05);
}

#finances-info h2 {
    font-size: 1.3rem;
    color: #00ffc3;
    text-align: center;
    margin-bottom: 1rem;
    border-bottom: 1px solid #00ffc34d;
    padding-bottom: 0.5rem;
}

/* Tabs */
.finance-tabs {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: #081219;
    border-top: 1px solid #00ffc31a;
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 10;
}

.tab-btn {
    background: #0f1f2e;
    color: #b9dfe9;
    border: 1px solid #00ffc31a;
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.tab-btn.active,
.tab-btn:hover {
    background-color: #00ffc3;
    color: #001418;
    font-weight: 600;
}

/* Active Tab Content */
.finance-tab {
    display: none;
    padding: 1rem 0.5rem;
    overflow-y: auto;
    margin-bottom: 3rem;
}

.finance-tab.active {
    display: block;
}

/* Forms */
form label {
    margin-top: 0.5rem;
    font-weight: 500;
    color: #00e6c0;
}

form input,
form select {
    width: 100%;
    padding: 0.5rem;
    margin-top: 0.3rem;
    background: #12202f;
    color: #e0fdfd;
    border: 1px solid #00ffc36a;
    border-radius: 6px;
    font-size: 0.9rem;
}

form button {
    margin-top: 0.8rem;
    background: #00ffc3;
    color: #001418;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s ease;
}

form button:hover {
    background-color: #00e6b0;
}

/* Table Styles */
.finance-table {
    width: 100%;
    border-collapse: collapse;
    background: #0f1c27;
    color: #cbe5eb;
    font-size: 0.85rem;
    border-radius: 8px;
    overflow: hidden;
}

.finance-table thead {
    background-color: #00332e;
    color: #00ffc3;
}

.finance-table th,
.finance-table td {
    padding: 0.6rem;
    text-align: left;
    border-bottom: 1px solid #00332e88;
}

.finance-table td:first-child {
    font-weight: bold;
    color: #ffffff;
}

.finance-table .status {
    color: #00ff9d;
    font-weight: 500;
}

.finance-table .balance {
    color: #79f0db;
    font-weight: 500;
}

/* Exchange Rate Table */
#exchange-rates-table {
    margin-top: 1rem;
}

/* Button Group */
#available-currencies {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    max-width: 100%;
    margin: 1rem 0;
}

/* Payment Modal */
#payment-modal {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    background: #0d1b24;
    padding: 1.5rem;
    border-radius: 10px;
    width: 90%;
    max-width: 320px;
    text-align: center;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.05);
    color: #f0f0f0;
}

.modal-content input {
    width: 100%;
    padding: 0.6rem;
    margin: 1rem 0;
    background: #10202b;
    border: 1px solid #00ffc36a;
    color: #ffffff;
    border-radius: 6px;
}

.modal-content button {
    padding: 0.5rem 1rem;
    margin: 0.3rem;
    border: none;
    background-color: #00ffc3;
    color: #001418;
    border-radius: 6px;
    cursor: pointer;
}

.modal-content button:hover {
    background-color: #00e6b0;
}

/* ======================== MEDIA QUERY: max-width 768px ======================== */
@media (max-width: 768px) {
    #finances-info {
        padding: 0.75rem;
    }

    .finance-tabs {
        flex-wrap: wrap;
        gap: 0.3rem;
        padding: 0.3rem;
    }

    .tab-btn {
        font-size: 0.65rem;
        padding: 0.4rem 0.5rem;
    }

    .finance-tab {
        padding: 0.5rem 0.3rem;
    }

    form input,
    form select {
        font-size: 0.85rem;
    }

    .finance-table th,
    .finance-table td {
        font-size: 0.75rem;
        padding: 0.4rem;
    }

    .modal-content {
        padding: 1rem;
    }

    .modal-content input {
        font-size: 0.85rem;
    }

    .modal-content button {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }
}




.payment-status {
    position: fixed;               /* ✅ overlay */
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    background-color: #062f2e;
    border: 1px solid #2affc6;
    color: #ffffff;
    padding: 20px;
    border-radius: 12px;
    font-size: 1rem;
    text-align: center;
    box-shadow: 0 0 20px rgba(0, 255, 200, 0.4);
    transition: all 0.3s ease;
    width: 80%;
    max-width: 400px;
}

.payment-status p {
    margin-bottom: 15px;
    font-weight: 500;
}

.payment-status button {
    background-color: #2affc6;
    color: #062f2e;
    border: none;
    padding: 10px 24px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    font-size: 1rem;
    transition: background 0.2s ease;
}

.payment-status button:hover {
    background-color: #20d4ac;
}

.hidden {
    display: none !important;
}





/* -------------------------Education Section------------------------- */
/* ------------------------ Education Sidebar Styling ------------------------ */
#education-info {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(to bottom right, #061014, #0c1b23, #000);
    color: #e6f9ff;
    border-radius: 0.75rem;
    padding: 1rem;
    max-width: 300px;
    margin: 0 auto;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.05);
    font-size: 0.85rem;
    overflow-y: auto;
    max-height: 100vh;
}

/* Section Title */
#education-info h2 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-align: center;
    color: #00ffc3;
    border-bottom: 1px solid #00ffc370;
    padding-bottom: 0.25rem;
}

/* Tabs */
.education-tab {
    background: none;
    border: none;
    cursor: pointer;
    font-weight: 600;
    padding: 0.4rem 0.6rem;
    font-size: 0.75rem;
    margin-right: 0.25rem;
    border-bottom: 2px solid transparent;
    color: #a0b8c8;
    transition: all 0.3s ease;
}

.education-tab:hover,
.education-tab.active {
    color: #00ffc3;
    border-bottom-color: #00ffc3;
}

/* Tab Container */
#education-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.75rem;
}

/* Module Cards */
.education-content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.education-content > div {
    background-color: #0e1d25;
    border-radius: 0.5rem;
    padding: 0.75rem;
    box-shadow: inset 0 0 6px rgba(0, 255, 255, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s;
}

.education-content > div:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.05);
}

.education-content h3 {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: #00ffc3;
}

.education-content p {
    font-size: 0.8rem;
    color: #c3dbe0;
    margin-bottom: 0.25rem;
}

/* Progress Bars */
progress {
    width: 100%;
    height: 6px;
    border-radius: 6px;
    appearance: none;
    background-color: #1b2d35;
}

progress::-webkit-progress-bar {
    background-color: #1b2d35;
    border-radius: 6px;
}

progress::-webkit-progress-value {
    background-color: #00ffc3;
    border-radius: 6px;
}

progress::-moz-progress-bar {
    background-color: #00ffc3;
    border-radius: 6px;
}

/* Certifications */
#education-info .certifications {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.certifications div {
    background-color: #1c2e36;
    padding: 0.45rem 0.7rem;
    border-radius: 0.375rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-align: center;
    flex: 1 1 45%;
    color: #e6f6f9;
}

.certifications .locked {
    color: #7a8d94;
}

.certifications .unlocked {
    color: #00ffc3;
}

/* Button CTA */
#education-info button.cta-button {
    display: block;
    width: 100%;
    margin-top: 1rem;
    background-color: #00ffc3;
    color: #001418;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#education-info button.cta-button:hover {
    background-color: #00e6b0;
}


/* ======================== MEDIA QUERY: max-width 768px ======================== */
@media (max-width: 768px) {
    #education-info {
        padding: 0.75rem;
        max-width: 90%;
        font-size: 0.8rem;
    }

    .education-tab {
        font-size: 0.7rem;
        padding: 0.35rem 0.5rem;
    }

    .education-content h3 {
        font-size: 0.85rem;
    }

    .education-content p {
        font-size: 0.75rem;
    }

    .certifications div {
        font-size: 0.65rem;
        padding: 0.3rem 0.6rem;
    }

    #education-info button.cta-button {
        font-size: 0.7rem;
        padding: 0.45rem 0.85rem;
    }

    #education-tabs {
        justify-content: center;
    }
}



/* ----------------------------HELP SECTION---------------------------- */
/* ----------------------------HELP SECTION---------------------------- */
#help-info {
    background: linear-gradient(to bottom right, #051013, #0c1b23);
    color: #e5f9f6;
    padding: 0.75rem;
    width: 100%;
    max-width: 300px;
    height: 100vh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

#help-info::-webkit-scrollbar {
    width: 6px;
}
#help-info::-webkit-scrollbar-thumb {
    background-color: #00ffc3;
    border-radius: 3px;
}
#help-info::-webkit-scrollbar-track {
    background-color: #0d1f26;
}

#help-info h2 {
    font-size: 1rem;
    margin-bottom: 1rem;
    text-align: center;
    color: #00ffc3;
    border-bottom: 1px solid #00ffc370;
    padding-bottom: 0.25rem;
}

#help-info p {
    font-size: 0.875rem;
    margin-bottom: 1rem;
    color: #c9d9de;
}

/* Help Tabs */
.help-tabs {
    display: flex;
    justify-content: space-between;
    gap: 0.25rem;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #0b1a20;
    padding: 0.25rem;
    border-top: 1px solid #00ffc340;
    z-index: 10;
}

.help-tab {
    flex: 1;
    background: #0f222a;
    color: #9ca3af;
    padding: 0.5rem;
    font-weight: 600;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: background 0.3s ease;
    font-size: 0.75rem;
}

.help-tab.active,
.help-tab:hover {
    background-color: #00ffc3;
    color: #000f0f;
}

/* Help Content */
.help-content {
    font-size: 0.875rem;
    line-height: 1.5;
    padding-bottom: 3rem;
    color: #d4f9f5;
}

.help-content h3,
.help-content h4 {
    font-size: 1rem;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    color: #00ffc3;
}

/* FAQ */
.faq-list {
    list-style: none;
    padding-left: 0;
}
.faq-list li {
    background: #0f222a;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    border-radius: 0.5rem;
    border-left: 4px solid #00ffc3;
    transition: background 0.3s ease;
}
.faq-list li:hover {
    background: #162d34;
}
.faq-list strong {
    display: block;
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
    color: #ffffff;
}
.faq-list p {
    font-size: 0.85rem;
    color: #cde8eb;
    margin: 0;
}

/* Suggestions */
.suggestion-textarea {
    width: 100%;
    border-radius: 0.5rem;
    border: none;
    padding: 0.5rem;
    background: #162d34;
    color: white;
    margin-top: 0.5rem;
    resize: none;
    font-size: 0.875rem;
}

.cta-button {
    margin-top: 0.5rem;
    background-color: #00ffc3;
    color: #002f2d;
    padding: 0.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    width: 100%;
    font-size: 0.875rem;
}
.cta-button:hover {
    background-color: #00e6b0;
}

.suggestion-list {
    padding-left: 0;
    list-style: none;
    margin-top: 1rem;
}

.suggestion-list li {
    background: #0f222a;
    padding: 0.5rem;
    margin-bottom: 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    color: #e1f6f4;
}

/* Voting */
.votes {
    display: flex;
    gap: 0.5rem;
    font-size: 0.75rem;
    margin-top: 0.25rem;
    align-items: center;
    flex-wrap: wrap;
}

.vote-button {
    background: transparent;
    border: none;
    color: #ffffff;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.vote-button:hover {
    color: #00ffc3;
}

/* Replies */
.reply-section {
    margin-top: 0.5rem;
    padding-left: 0.5rem;
    border-left: 2px solid #223a41;
    font-size: 0.75rem;
}
.reply {
    margin-bottom: 0.25rem;
    color: #d1d5db;
}

/* Suggestion Cards */
.suggestion-card {
    background: #0f222a;
    border-radius: 0.75rem;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    color: #f9fafb;
    font-size: 0.875rem;
    line-height: 1.5;
}
.suggestion-card h4 {
    margin: 0 0 0.25rem;
    font-weight: 600;
    color: #00ffc3;
}
.suggestion-meta {
    font-style: italic;
    font-size: 0.75rem;
    color: #9ca3af;
    margin-bottom: 0.5rem;
}
.suggestion-text {
    margin-bottom: 0.75rem;
    color: #d1d5db;
}

.reactions {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.75rem;
    font-size: 1rem;
}
.reaction-btn {
    background: none;
    border: none;
    color: #e5e7eb;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 1.1rem;
}
.reaction-btn:hover {
    color: #00ffc3;
}
.reaction-count {
    margin-left: 0.25rem;
    font-size: 0.85rem;
    font-weight: 500;
}

.reply-box {
    margin-top: 0.25rem;
}
.reply-input {
    width: 100%;
    border: 1px solid #223a41;
    border-radius: 0.5rem;
    padding: 0.4rem 0.75rem;
    background: #0b1a20;
    color: white;
    font-size: 0.75rem;
}
.reply-input::placeholder {
    color: #6b7280;
}
.suggestion-card .reply {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: #d1d5db;
    padding-left: 0.75rem;
    border-left: 2px solid #223a41;
}

/* Regulations */
.regulation-item {
    background: #0f222a;
    border-left: 4px solid #00ffc3;
    padding: 0.75rem;
    margin-bottom: 1rem;
    border-radius: 0.5rem;
}
.regulation-item h4 {
    font-size: 0.95rem;
    color: #ffffff;
    margin-bottom: 0.25rem;
}
.regulation-item p {
    font-size: 0.85rem;
    color: #d1d5db;
    margin: 0;
    line-height: 1.5;
}


/* --------------------- Responsive Media Query --------------------- */
@media (max-width: 768px) {
    #help-info {
        padding: 0.5rem;
        font-size: 0.8rem;
        max-width: 100%;
    }

    .help-tab {
        font-size: 0.7rem;
        padding: 0.4rem;
    }

    .help-content h3,
    .help-content h4 {
        font-size: 0.9rem;
    }

    .suggestion-card {
        font-size: 0.8rem;
        padding: 0.75rem;
    }

    .reply-input {
        font-size: 0.7rem;
    }

    .cta-button {
        font-size: 0.8rem;
        padding: 0.45rem;
    }
}



/* --------------------------- Logout Sidebar --------------------------- */
.logout-panel {
    max-width: 300px;
    font-size: 0.875rem;
    color: #cfeef3;
    padding: 0.75rem;
    border-radius: 0.75rem;
    background: linear-gradient(to bottom right, #051013, #0c1b23);
    box-shadow: 0 0 10px rgba(0, 255, 195, 0.05);
}

.logout-panel h3 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    color: #00ffc3;
    text-align: center;
    border-bottom: 1px solid #00ffc355;
    padding-bottom: 0.25rem;
}

.logout-panel p,
.logout-message {
    margin-bottom: 1rem;
    line-height: 1.4;
    color: #cde8eb;
}

.logout-actions {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    justify-content: center;
}

.logout-btn {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s ease-in-out;
    font-weight: 600;
}

.logout-btn.danger {
    background-color: #70b61f;
    color: #fff;
}

.logout-btn.danger:hover {
    background-color: #4bdd1f;
}

.logout-btn.cancel {
    background-color: #1e3a34;
    color: #cce3e0;
}

.logout-btn.cancel:hover {
    background-color: #23443d;
}

.logout-note {
    font-size: 0.75rem;
    color: #8fa5ab;
    border-top: 1px solid #00ffc320;
    padding-top: 0.5rem;
    text-align: center;
}


/* --------------------------- Settings Sidebar --------------------------- */
.settings-panel {
    max-width: 300px;
    font-size: 0.875rem;
    color: #d0f5f0;
    padding: 1rem;
    border-radius: 0.75rem;
    background: linear-gradient(to bottom right, #051013, #0c1b23);
    box-shadow: 0 0 10px rgba(0, 255, 195, 0.05);
    user-select: none;
}

.settings-panel h3 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    color: #00ffc3;
    text-align: center;
    border-bottom: 1px solid #00ffc370;
    padding-bottom: 0.25rem;
}

.settings-panel p {
    color: #a6d7d2;
    margin-bottom: 1rem;
    line-height: 1.4;
    font-size: 0.85rem;
}

.setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.setting-label {
    color: #cceef3;
    font-weight: 500;
    flex-grow: 1;
}

/* Checkbox */
input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #00ffc3;
}

/* Dropdown */
select {
    background-color: #0d1f26;
    color: #e0fbf9;
    border: 1px solid #1d3a45;
    border-radius: 6px;
    padding: 0.35rem 0.5rem;
    cursor: pointer;
    font-size: 0.8rem;
    min-width: 100px;
    transition: border-color 0.2s ease;
}

select:hover,
select:focus {
    border-color: #00ffc3;
    outline: none;
}

/* Save Button */
.actions {
    justify-content: center;
    display: flex;
    margin-top: 1rem;
}

.save-btn {
    background-color: #00ffc3;
    color: #001f1d;
    font-weight: 600;
    border: none;
    padding: 0.5rem 1.25rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100%;
    max-width: 150px;
}

.save-btn:hover {
    background-color: #00e6b0;
}

/* Save Message */
.save-message {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: #22e8a0;
    text-align: center;
    user-select: none;
}


/* ------------------------ Responsive Styles ------------------------ */
@media (max-width: 768px) {
    .logout-panel,
    .settings-panel {
        max-width: 100%;
        padding: 0.75rem;
        font-size: 0.8rem;
    }

    .logout-btn,
    .save-btn {
        padding: 0.45rem 0.85rem;
        font-size: 0.75rem;
    }

    .setting-label {
        font-size: 0.8rem;
    }

    select {
        font-size: 0.75rem;
        padding: 0.3rem 0.45rem;
    }
}


/* ----------------- Bottom Graph Area ----------------- */
.bottom-graph-wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 50vh;
    padding: 0.25rem;
    padding-bottom: 100px !important;
    z-index: 999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: linear-gradient(to top, #051013 40%, transparent);
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.4);
}

/* Chart Container */
.trade-history-graph-container {
    max-width: 320px;
    background-color: rgba(0, 255, 195, 0.03);
    padding: 0.75rem;
    padding-bottom: 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 0 12px rgba(0, 255, 195, 0.05);
    overflow: hidden;
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #d1f7f5;
    font-size: 0.85rem;
}

/* Chart Canvas */
#tradeHistoryChart {
    width: 100% !important;
    height: auto !important;
    background: transparent;
}

/* Chart Type Selector Container */
.chart-type-selector-container {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 0.5rem;
    gap: 0.5rem;
}

.chart-type-selector-container select {
    font-size: 0.8rem;
    padding: 0.4rem 0.6rem;
    margin-top: 0.25rem;
    border-radius: 0.4rem;
    border: 1px solid #00ffc380;
    background-color: #0f1f23;
    color: #d1f7f5;
    cursor: pointer;
    width: 100%;
    transition: border 0.2s ease;
}
.chart-type-selector-container select:focus {
    outline: none;
    border-color: #00ffc3;
}

/* Filter Buttons */
.filter-btn {
    flex: 1;
    padding: 0.4rem 0.5rem;
    font-size: 0.8rem;
    background-color: #0f1f23;
    color: #a1e9e0;
    border: 1px solid #00ffc345;
    border-radius: 0.35rem;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color 0.2s, color 0.2s;
}

.filter-btn:hover,
.filter-btn.active {
    background-color: #00ffc3;
    color: #001815;
}

/* Controls Group */
.trade-history-controls {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    gap: 0.4rem;
    flex-wrap: wrap;
}


/* ------------------- Responsive Design ------------------- */
@media (max-width: 768px) {
    .bottom-graph-wrapper {
        padding: 0.4rem;
        max-height: 60vh;
        padding-bottom: 80px;
    }

    .trade-history-graph-container {
        max-width: 100%;
        height: 260px;
        font-size: 0.8rem;
        padding: 0.6rem;
    }

    .chart-type-selector-container select {
        font-size: 0.75rem;
        padding: 0.35rem 0.5rem;
    }

    .filter-btn {
        font-size: 0.75rem;
        padding: 0.35rem 0.4rem;
    }

    .trade-history-controls {
        gap: 0.25rem;
    }
}


/*<----------------------------END OF LEFT SIDEBAR---------------------------->*/



/*<----------------------------RIGHT SIDEBAR---------------------------->*/
#right-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 50px;
    background-color: #034266;
    overflow-y: auto;
    z-index: 999;
    transition: width 0.3s ease;
}


#right-sidebar nav {
    display: flex;
    flex-direction: column;
    padding: 1rem 0;
}



@media (max-width: 768px) {
    #right-sidebar {
        padding: 0.5rem 0;
		padding-top: 20px;
    }

    #right-sidebar nav {
        padding: 0.25rem 0;
    }

    #right-sidebar nav i,
    #right-sidebar nav svg {
        font-size: 1rem; /* smaller icons */
    }

    .right-tab {
        padding: 0.3rem 0.5rem;
        margin: 0.2rem 0;
    }

    .right-tab.active {
        border-right: 2px solid #fff;
    }
}



/* Hide by default */
#btn-return-to-graph {
    display: none;
}

/* Show only on mobile */
@media (max-width: 768px) {
    #btn-return-to-graph {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.4rem;
        margin: 0.5rem;
        background-color: #0e2e1a;
        color: white;
        border: 1px solid #1a4d30;
        border-radius: 6px;
        font-size: 0.95rem;
        width: calc(100% - 1rem);
        cursor: pointer;
        gap: 0.5rem;
    }

    #btn-return-to-graph .label-text {
        display: inline;
    }
}




/* ---------------------------- Market Trends Sidebar ----------------------------- */
.market-trends-panel {
  max-width: 300px;
  padding: 0.5rem 0.8rem;
  border: 1px solid #1e293b;
  color: #e5e7eb;
  font-size: 0.9rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.market-trends-panel h3 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  color: #f8fafc;
}

.market-trends-panel p {
  font-size: 0.85rem;
  color: #94a3b8;
  margin-bottom: 1rem;
}

.trend-category {
  margin-bottom: 1rem;
}

.trend-category h4 {
  font-size: 1rem;
  color: #f1f5f9;
  margin-bottom: 0.3rem;
  border-bottom: 1px solid #334155;
  padding-bottom: 0.2rem;
}

.trend-category ul {
  list-style: none;
  padding-left: 0;
}

.trend-category li {
  padding: 0.3rem 0;
  border-bottom: 1px dashed #1e293b;
  display: flex;
  justify-content: space-between;
}

.trend-category li:last-child {
  border-bottom: none;
}

.refresh-trends {
  display: inline-block;
  background-color: #10b981;
  color: white;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  margin-top: 0.5rem;
  transition: background-color 0.3s ease;
}

.refresh-trends:hover {
  background-color: #059669;
}

#lastUpdated {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: #9ca3af;
}






/*-------------------------------------------<!-- Window Layout -->-------------------------------*/
#window-layout {
  padding: 1rem;
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  color: #f0f0f0;
  max-width: 300px;
  margin: 1rem auto;
}

#window-layout h3 {
  margin-bottom: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
}

#window-layout p {
  margin-bottom: 1rem;
  font-size: 0.95rem;
  color: #ccc;
}

.layout-toggle {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}

.layout-toggle button {
  flex: 1;
  padding: 0.6rem 1rem;
  font-size: 0.95rem;
  font-weight: 500;
  border: 2px solid transparent;
  border-radius: 8px;
  background-color: #1e1e2f;
  color: #f0f0f0;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0.2);
}

.layout-toggle button[aria-pressed="true"] {
  background-color: #007bff;
  color: white;
  border-color: #005fcc;
  box-shadow: inset 0 0 6px rgba(0, 123, 255, 0.5);
}

.layout-toggle button:hover:not([aria-pressed="true"]) {
  background-color: #2a2a40;
  border-color: #444;
}




/*------------------------------------Notification Sounds----------------------------*/
#notification-sounds {
  max-width: 300px;
  padding: 0.75rem 1rem;
  background: #1e1e2f;
  color: #ddd;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  border-radius: 8px;
  user-select: none;
}

#notification-sounds h3 {
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
  font-weight: 600;
}

#notification-sounds p {
  font-size: 0.8rem;
  margin-bottom: 0.75rem;
  color: #aaa;
}

.notif-sound-options {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.sound-option {
  display: flex;
  align-items: center;
  font-size: 0.85rem;
  cursor: pointer;
  gap: 0.2rem; /* very small gap between radio and label text */
}

.sound-option input[type="radio"] {
  cursor: pointer;
  margin: 0; /* remove default margins */
  width: 14px;
  height: 14px;
}




/*----------------------------------Video FAQS----------------------------*/
#video-faqs {
  max-width: 300px;
  padding: 0.6rem 0.8rem;
  background-color: #1f2233;
  color: #ddd;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  border-radius: 8px;
  user-select: none;
  outline-offset: 2px;
  position: relative;
  z-index: 1;
}

#video-faqs h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

#video-faqs p {
  font-size: 0.8rem;
  margin-bottom: 0.7rem;
  color: #a0a3b7;
}

.video-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.video-list li {
  width: 100%;
}

.video-link {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  background: #2c2f4a;
  border: none;
  border-radius: 6px;
  padding: 6px 8px;
  color: #ddd;
  font-size: 0.9rem;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.video-link:hover,
.video-link:focus-visible {
  background: #3a3f69;
  box-shadow: 0 0 6px #6371ffaa;
  outline: none;
}

.video-link img {
  width: 48px;
  height: 27px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}

/* Modal popup inside sidebar */
/* Modal popup inside sidebar at the far bottom */
.video-modal {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;          /* Exact sidebar width */
  height: auto;
  padding: 0;
  margin: 0;
  z-index: 9999;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  overflow: hidden;
}

/* Modal content sits flush with sidebar */
.video-modal .modal-content {
  width: 100%;
  padding: 0.5rem;
  background: #1f2233;
  border-top: 1px solid #444;
  border-radius: 10px 10px 0 0;
  box-sizing: border-box;
}

/* Ensure video fills container cleanly */
.video-container {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
  background-color: black;
  box-shadow: 0 0 8px #6371ffcc;
}

.video-container iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* Header */
.video-modal h4 {
  font-size: 0.85rem;
  color: #fff;
  margin: 0.4rem 0;
  text-align: center;
}

/* Buttons */
#modal-close,
#fullscreen-toggle {
  position: absolute;
  top: 6px;
  font-size: 1.2rem;
  background: transparent;
  border: none;
  color: #aaa;
  padding: 4px;
  cursor: pointer;
  transition: color 0.2s ease;
}

#modal-close {
  right: 5px;
}

#fullscreen-toggle {
  right: 36px;
}

#modal-close:hover,
#fullscreen-toggle:hover {
  color: #fff;
}


/* Fullscreen override mode */
#video-modal.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  max-width: none;
  background: rgba(10, 12, 25, 0.95);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0;
  z-index: 11000;
}

#video-modal.fullscreen .modal-content {
  width: 100%;
  max-width: 960px;
  padding: 1rem;
  border-radius: 10px;
  background: #0d1025;
}

#video-modal.fullscreen .video-container {
  height: 100%;
  border-radius: 12px;
  box-shadow: 0 0 20px #5466ffcc;
}

#video-modal.fullscreen #video-frame {
  height: 100% !important;
}




/*-------------------------------------Live Charts and AI Support----------------------------*/
#live-chats {
  position: fixed;
  bottom: 0;
  width: 300px;
  height: 420px;
  background: #1f2233;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 4px 15px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  z-index: 10000;
  border: 1px solid #444;
}

#live-chats .chat-header {
  background: #2a2e45;
  color: #f0f0f0;
  padding: 0.7rem 1rem;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  border-bottom: 1px solid #444;
}

#live-chats #close-chat {
  background: transparent;
  border: none;
  color: #ccc;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: background-color 0.2s ease;
}

#live-chats #close-chat:hover {
  background-color: #5466ff;
  color: white;
}

#live-chats .chat-body {
  flex-grow: 1;
  padding: 0.8rem 1rem;
  overflow-y: auto;
  font-size: 0.9rem;
  line-height: 1.4;
  color: #ddd;
  background: #22263b;
  scrollbar-width: thin;
  scrollbar-color: #5466ff transparent;

  display: flex;
  flex-direction: column;
}

/* Scrollbar for WebKit */
#live-chats .chat-body::-webkit-scrollbar {
  width: 6px;
}
#live-chats .chat-body::-webkit-scrollbar-thumb {
  background-color: #5466ff;
  border-radius: 3px;
}

#live-chats .message {
  margin: 0.4rem 0;
  padding: 0.6rem 0.9rem;
  border-radius: 12px;
  max-width: 75%;
  word-wrap: break-word;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  font-weight: 500;
  text-align: justify;
  line-height: 1.4;
}

/* Bot message on the RIGHT */
#live-chats .message.bot {
  background: #2f334d;
  color: #eee;
  align-self: flex-end;
  border-bottom-right-radius: 0;
  text-align: left;
}

/* User message on the LEFT */
#live-chats .message.user {
  background: #5466ff;
  color: #fff;
  align-self: flex-start;
  border-bottom-left-radius: 0;
  text-align: left;
}

#live-chats .chat-footer {
  background: #2a2e45;
  border-top: 1px solid #444;
  display: flex;
  padding: 0.5rem 0.7rem;
  gap: 0.5rem;
}


#live-chats input[type="text"] {
  flex: 1;
  padding: 0.5rem 0.8rem;
  border: none;
  border-radius: 25px;
  background-color: #2c2f4a;
  color: #eee;
  font-size: 1rem;
  outline-offset: 2px;
  outline-color: transparent;
  transition: outline-color 0.2s ease;
}

#live-chats input[type="text"]:focus {
  outline-color: #5466ff;
  background-color: #383e6b;
}

#live-chats button#send-message {
  background: #5466ff;
  border: none;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  color: white;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 6px rgba(84,102,255,0.6);
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

#live-chats button#send-message:hover {
  background: #4055e6;
  box-shadow: 0 5px 12px rgba(64,85,230,0.9);
}

/*Styling the Timestamps and Dates*/
#live-chats .msg-time {
  font-size: 0.7rem;
  color: #aaa;
  margin-left: 0.5rem;
  font-weight: normal;
}

#live-chats .date-banner {
  text-align: center;
  background: #2a2e45;
  color: #ccc;
  padding: 0.3rem 0.6rem;
  border-radius: 8px;
  margin-bottom: 0.5rem;
  font-size: 0.8rem;
}


/*Chart Date*/
#live-chats .date-banner {
  text-align: center;
  background: #2a6e45;
  color: #ccc;
  padding: 0.4rem 0.8rem;
  margin: 0.5rem auto;
  border-radius: 20px;
  font-size: 0.85rem;
  width: fit-content;
  max-width: 90%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}






/*<----------------------------END OF RIGHT SIDEBAR---------------------------->*/



/*<----------------------------SHARED STYLES FOR SIDEBAR CONTENT---------------------------->*/

.navigation-tab-content > div {
  display: none;
}

.navigation-tab-content > div:not([hidden]) {
  display: block;
}


#left-sidebar button,
#right-sidebar button {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.2rem;
    padding: 1rem;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.3s ease;
}

#left-sidebar .sidebar-content,
#right-sidebar .sidebar-content {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#left-sidebar.expanded .sidebar-content,
#right-sidebar.expanded .sidebar-content {
    opacity: 1;
    pointer-events: auto;
}

/* Shared layout container inside both sidebars */
.sidebar-inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 1rem 0;
}

.left-sidebar-top,
#right-sidebar-top {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.left-sidebar-bottom,
#right-sidebar-bottom {
    display: flex;
    flex-direction: column-reverse;
}

.left-sidebar-bottom button,
.right-sidebar-bottom button {
    padding: 1rem;
}

/* Optional spacing between buttons inside sidebar */
.left-sidebar-top > *,
.left-sidebar-bottom > *,
#right-sidebar-top > *,
#right-sidebar-bottom > * {
    margin: 0.3rem 0;
}

/*<----------------------------END OF SHARED STYLES---------------------------->*/



/*<----------------------------EXPANDED PANELS (OPTIONAL ADD-ONS)---------------------------->*/

#left-sidebar-expanded,
#right-sidebar-expanded {
    position: fixed;
    top: 0;
    height: 100%;
    width: 300px;
    z-index: 998;
    display: none;
    animation: slideIn 0.3s ease forwards;
}

#left-sidebar-expanded {
    left: 50px;
    background-color: rgba(1, 12, 15, 0.97);
    z-index: 1001; /* ensure it's above base sidebars (999) */
}

#right-sidebar-expanded {
    right: 50px;
    background-color: rgba(0, 8, 8, 0.97);
    z-index: 1001; /* ensure it's above base sidebars (999) */
}

#left-sidebar-expanded.active,
#right-sidebar-expanded.active {
    display: block;
}

#left-sidebar.show-panel + #left-sidebar-expanded,
#right-sidebar.show-panel + #right-sidebar-expanded {
    width: 190px;
}

#left-sidebar-expanded[hidden] {
    display: none; /* Avoid !important */
}


/* Finance tabs visibility */

/*<----------------------------END OF EXPANDED PANELS---------------------------->*/



/*<----------------------------ANIMATIONS---------------------------->*/

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/*<----------------------------END OF ANIMATIONS---------------------------->*/


/*<----------------------------BOTTOM BAR----------------------------> */
/* Refined Bottom Bar Styling */

#bottom-bar {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 650px;
    display: flex;
    justify-content: center;
    align-items: stretch;
    padding: 0;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-sizing: border-box;
    gap: 0.5rem;
    z-index: 1000;
    font-family: inherit;
    margin-bottom: 30px !important;
}

/* Wrapper evenly spaces each group */
#bottom-bar-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    max-width: 650px;
}

/* General section style */
.investment-wrapper,
.trade-buttons,
.trade-time-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.5rem;
    min-height: 64px;
    flex: 0 1 auto;
    position: relative;
}

/* Vertical separator line between sections */
.investment-wrapper:not(:first-child)::before,
.trade-buttons::before,
.trade-time-control::before {
    content: "";
    position: absolute;
    left: 0;
    height: 70%;
    width: 1px;
    background: rgba(255, 255, 255, 0.15);
}

/* Amount Display with arrow controls */
.amount-and-arrows {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.arrow-controls {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.arrow-button {
    font-size: 1.4rem;
    background: transparent;
    border: 1px solid #666;
    border-radius: 6px;
    color: #fff;
    padding: 0.2rem 0.4rem;
    cursor: pointer;
}

.amount-display-group {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.amount-display {
    font-size: 1.2rem;
    font-weight: 700;
    color: #0f0;
    border: 1px solid #444;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    background: #111;
    text-align: center;
}

.amount-label {
    font-size: 0.75rem;
    color: #aaa;
    margin-top: 0.1rem;
}

/* Trade buttons: Buy & Sell */
.trade-buttons {
    display: inline-flex;
    gap: 0.5rem;
}

.trade-button {
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    font-weight: bold;
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: auto;
    text-align: center;
    transition: transform 0.2s ease;
}

.trade-button .icon-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.buy-button {
    background-color: #28a745;
}

.sell-button {
    background-color: #dc3545;
}

.win-percentage {
    font-size: 0.8rem;
    margin-top: 0.2rem;
    opacity: 0.85;
}

/* Trade time control section */
.trade-time-control {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.duration-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.duration-btn {
    width: 1.8rem;
    height: 1.8rem;
    font-size: 1.2rem;
    border-radius: 50%;
    background: transparent;
    border: 1px solid #888;
    color: white;
    cursor: pointer;

    /* Add these lines for perfect centering */
    display: flex;
    align-items: center;
    justify-content: center;
}

.duration-block {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.duration-display {
    font-family: monospace;
    font-size: 1rem;
    color: #fff;
    background: #111;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 0.1rem 0.5rem;
}

.duration-label {
    font-size: 0.7rem;
    color: #aaa;
}

/* Calendar icon wrapper */
.datetime-icon-wrapper {
    display: flex;
    align-items: center;
}

.datetime-trigger {
    font-size: 1.4rem;
    padding: 0.3rem 0.6rem;
    border: 1px solid #666;
    border-radius: 6px;
    background: transparent;
    color: white;
    cursor: pointer;
}

#end-time {
    display: none;
}


#popup-message {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px); /* start slightly above */
    background-color: rgba(34, 34, 34, 0.95);
    color: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: bold;
    font-size: 0.95rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s ease-in-out;
}

#popup-message.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0); /* slide down into view */
    pointer-events: auto;
}


/* Responsive tweaks and bull-style compact layout */
@media (max-width: 768px) {
    /* Bottom Bar */
    #bottom-bar {
        position: static;
        bottom: auto;
        left: auto;
        transform: none;
        width: calc(100% - 100px); /* 50px margin on each side */
        max-width: none;
        padding: 0.2rem;
        padding-top: 50px !important;
        margin: 0.3rem auto 0;
        background: linear-gradient(to right, #0e2e1a, #102417);
        backdrop-filter: blur(8px);
        box-shadow: 0 2px 6px rgba(0,0,0,0.4);
        gap: 0;
        z-index: 5;
    }

    /* Bottom Bar Wrapper */
    #bottom-bar-wrapper {
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 0;
        padding: 0;
        margin: 0;
    }

    /* Trading Graph Container */
    #trading-graph-container {
        height: calc(100vh - 170px); /* Room for bottom bar */
        padding-bottom: 0;
        margin-bottom: 0;
    }

    /* Tight Compact Sections */
    .investment-wrapper,
    .trade-buttons,
    .trade-time-control {
        padding: 0;
        margin: 0;
        gap: 0;
        min-height: auto;
        flex: 1 1 auto;
    }

    /* Remove Separators */
    .investment-wrapper:not(:first-child)::before,
    .trade-buttons::before,
    .trade-time-control::before {
        display: none;
    }

    /* Investment Section - One Row Style */
    .amount-and-arrows {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 0.25rem;
        width: 100%;
    }

    .arrow-controls {
        flex-direction: row;
        gap: 0.25rem;
    }

    .arrow-button {
        padding: 0.3rem 0.4rem;
        font-size: 1.2rem;
    }

    .amount-display-group {
        flex-direction: row;
        align-items: center;
        gap: 0.25rem;
    }

    .amount-display {
        font-size: 1rem;
        padding: 0.2rem 0.4rem;
    }

    .amount-label {
        font-size: 0.65rem;
        margin: 0;
    }

    /* Trade Buttons */
    .trade-buttons {
        gap: 0.25rem;
        padding: 0;
        margin: 0;
    }

    .trade-button {
        padding: 0.4rem 0.5rem;
        font-size: 0.9rem;
    }

    .win-percentage {
        font-size: 0.7rem;
        margin-top: 0.1rem;
    }

    /* Trade Time Control */
    .trade-time-control {
        gap: 0.3rem;
        margin: 0;
        padding: 0;
    }

    .duration-wrapper {
        gap: 0.25rem;
    }

    .duration-btn {
        width: 1.5rem;
        height: 1.5rem;
        font-size: 1rem;
        padding: 0;
    }

    .duration-display {
        font-size: 0.9rem;
        padding: 0.1rem 0.3rem;
    }

    .duration-label {
        font-size: 0.65rem;
    }

    .datetime-trigger {
        padding: 0.2rem 0.4rem;
        font-size: 1.2rem;
    }

    .datetime-icon-wrapper {
        margin: 0;
    }
}

@media (max-width: 768px) {
    #user-profile,
    #bottom-bar,
    #bottom-bar-wrapper,
    #trading-graph-container {
        margin-bottom: 0 !important;
        
    }
}



/*Warning Investment Amount Message*/
/* Investment Warning Popup (Top Screen) */
.investment-warning {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #2a2a2a;
  color: #ffc107;
  padding: 0.75rem 1rem;
  border-left: 5px solid #ff9800;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.5;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: none;
  animation: fadeInDown 0.3s ease-out;
  width: 300px;
}

/* Fade in from top animation */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate(-50%, -20px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.investment-warning strong {
  color: #ff4d4d; /* Bright red for emphasis */
}





/*<----------------------------END OF THE BOTTOM BAR----------------------------> */

/*Whatsapp Float */
/* WhatsApp Floating Button */
.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  background-color: #25d366;
  border-radius: 50%;
  padding: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  transition: transform 0.3s ease;
}

.whatsapp-float:hover {
  transform: scale(1.1);
}

.whatsapp-float img {
  width: 32px;
  height: 32px;
}





/*====================GLOBAL MESSAGE ====================*/
.status-banner {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    padding: 12px 20px;
    border-radius: 6px;
    color: #fff;
    font-weight: 600;
    font-family: 'Segoe UI', sans-serif;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.status-banner.success { background-color: #28a745; }
.status-banner.error   { background-color: #dc3545; }
.status-banner.info    { background-color: #17a2b8; }

.status-banner.show {
    opacity: 0.95;
}





/* Responsive Design */
@media (max-width: 768px) {
    .global {
        padding: 40px 10px;
    }

    .global h3 {
        font-size: 2.2em;
    }

    .global ul li {
        font-size: 1.1em;
    }
    
    .global-info {
        font-size: 1em;
    }
}

body, html {
    overflow-x: hidden;
}

html {
    scroll-behavior: smooth;
}


/* =================== FOOTER =================== */
footer {
    background-color: #1a2d22;
    color: #f0fdf4;
    padding: 36px 16px;
	max-width: 1400px !important;
    font-family: 'Arial', sans-serif;
    animation: fadeInFooter 1s ease-in-out;
    max-width: 100%;
}

/* =================== Footer Top =================== */
.footer-top {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    margin: 0 auto 30px;
    max-width: 1000px;
}

.footer-column,
.payment-icons {
    padding: 4px;
}

.footer-column h3,
.payment-icons h3 {
    font-size: 1.1em;
    margin-bottom: 12px;
    color: #a3e635;
    text-transform: uppercase;
}

/* Footer Links */
.footer-column ul {
    list-style: none;
    padding: 0;
}

.footer-column ul li {
    margin-bottom: 8px;
}

.footer-column ul li a {
    color: #d1fae5;
    text-decoration: none;
    font-size: 0.95em;
    transition: color 0.2s ease;
}

.footer-column ul li a:hover {
    color: #facc15;
}

/* Payment Methods */
.payment-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: start;
}

.payment-icons img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    border-radius: 6px;
    transition: transform 0.3s ease;
    cursor: pointer;
    background-color: #f8fafc;
}

.payment-icons img:hover {
    transform: scale(1.1);
}

/* =================== Footer Divider =================== */
footer .footer-line {
    border-top: 2px solid #2e4735;
    margin: 24px 0;
}

/* =================== Footer Bottom =================== */
.footer-bottom {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
}

/* Legal Text */
.legal p {
    font-size: 0.9em;
    color: #d1fae5;
    line-height: 1.5;
    margin-bottom: 8px;
}

.legal p:last-child {
    font-size: 1em;
    color: #f0fdf4;
}

/* Social Media Icons */
.social-media {
    text-align: right;
}

.social-media a {
    font-size: 22px;
    margin: 0 10px;
    color: #a3e635;
    transition: color 0.3s ease;
}

.social-media a:hover {
    color: #facc15;
}

/* =================== Animations =================== */
@keyframes fadeInFooter {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =================== Responsive =================== */
@media (max-width: 768px) {
    .footer-top {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 16px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .social-media {
        text-align: center;
        margin-top: 12px;
    }

    .social-media a {
        font-size: 20px;
    }
}

@media (max-width: 468px) {
    footer {
        padding: 28px 12px;
    }

    .footer-column h3,
    .payment-icons h3 {
        font-size: 1em;
    }

    .footer-column ul li a {
        font-size: 0.85em;
    }

    .payment-icons img {
        width: 38px;
        height: 38px;
    }

    .legal p {
        font-size: 0.85em;
    }

    .footer-line {
        margin: 16px 0;
    }

    .social-media a {
        margin: 0 8px;
    }
}