/* ===================================================================== *
   GLOBAL RESET
 * ===================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    min-height: 100vh;
}
.fade-in {
    animation: fadeIn 0.8s ease-out forwards;
    opacity: 0;
}

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

.card:hover {
    box-shadow: 0 8px 24px rgba(30,64,175,0.12);
    transform: translateY(-2px) scale(1.01);
    transition: box-shadow 0.22s, transform 0.22s;
}

/* ===================================================================== *
   NAVBAR
 * ===================================================================== */
.main-navbar {
    background-color: #333;
    padding: 10px 20px;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;       /* allow burger/menu wrap */
}

.nav-logo {
    text-decoration: none;
    display: inline-block;
    position: relative;
    cursor: pointer;
}

/* ---------- index details ---------- */


.form-search-row .btn {
    transition: background 0.15s;
}

.form-search-row .btn-primary {
    background: linear-gradient(90deg, #1a73e8 60%, #2691d9 100%);
    border: 1px solid #265fa7;
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.5px;
}


.verified-strip {
    position:relative; height:4px; background:#1e40af;
    border-top-left-radius:.375rem; border-top-right-radius:.375rem;
    overflow:hidden;
}
.verified-strip::after {
    content:''; position:absolute; top:0; left:0; height:100%; width:22%;
    background:linear-gradient(90deg, transparent 0%, #00d5ff 50%, transparent 100%);
    box-shadow:0 0 8px 4px #00d5ff99;
    transform-origin:left center;
    animation:sweepAcross 8s ease-in-out infinite;
}
@keyframes sweepAcross {
    0%{transform:translateX(0) scaleX(.4);opacity:.8;}
    45%{transform:translateX(380%) scaleX(2);opacity:1;}
    55%{transform:translateX(420%) scaleX(2);opacity:1;}
    100%{transform:translateX(800%) scaleX(.4);opacity:0;}
}
.form-check.form-switch {background-color:#f8f9fa;}
.form-check-input {transform:scale(1.3);}


.premium-post-btn {
    background: linear-gradient(to right, #3a0ca3, #4361ee);
    color: #ffffff;
    font-weight: 600;
    font-size: 1.15rem;
    padding: 14px 20px;
    border: none;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(67, 97, 238, 0.3);
    transition: all 0.3s ease-in-out;
    text-align: center;
    width: 100%;
    text-decoration: none !important;
    display: inline-block;
}

.premium-post-btn:hover {
    background: linear-gradient(to right, #4361ee, #3a0ca3);
    box-shadow: 0 6px 20px rgba(67, 97, 238, 0.45);
    color: #ffffff;
    text-decoration: none !important;
}

.initiate-trade-btn {
    background: linear-gradient(to right, #3a0ca3, #4361ee);
    color: #ffffff;
    font-weight: 600;
    border: none;
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 0.95rem;
    transition: all 0.3s ease-in-out;
    width: 100%;
    text-align: center;
    text-decoration: none !important;
    box-shadow: 0 4px 10px rgba(67, 97, 238, 0.3);
}

.initiate-trade-btn:hover {
    background: linear-gradient(to right, #4361ee, #3a0ca3);
    box-shadow: 0 6px 18px rgba(67, 97, 238, 0.5);
    transform: translateY(-1px);
}
@keyframes toastPopIn {
  0%   { opacity: 0; transform: translateY(20px) scale(0.9); }
  60%  { opacity: 1; transform: translateY(0) scale(1.05); }
  100% { transform: scale(1); }
}

.toast.toast-animated {
  animation: toastPopIn 0.6s ease-out;
  cursor: pointer;
}

@keyframes emojiBounce {
  0%   { transform: scale(0.5) rotate(-15deg); opacity: 0; }
  50%  { transform: scale(1.4) rotate(15deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.animated-pop {
  animation: emojiBounce 0.8s ease-out;
  display: inline-block;
}
.crypto-icon {
    box-shadow: 0 2px 8px rgba(67,97,238,0.18);
    background: #fff;
}
.listing-banner {
    width: 100%;
    padding: 0.25rem 0 0.20rem 0;
    font-size: 0.96rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
    text-shadow: 0 2px 8px rgba(0,0,0,0.09);
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
    z-index: 2;
    /* STATIC gradient, no animation: */
    background: linear-gradient(120deg, var(--banner-main, #2563eb) 60%, var(--banner-accent, #60a5fa) 100%);
}
.listing-banner.sell {
    --banner-main: #c02626;  /* Deep Red */
    --banner-accent: #ff4b4b;
}
.listing-banner.buy {
    --banner-main: #2563eb;  /* Deep Blue */
    --banner-accent: #60a5fa;
}

/* ---------- base shiny text ---------- */
.shiny-text {
    font-size: 24px;
    font-weight: bold;
    color: white;
    display: inline-block;
    -webkit-background-clip: text;
    -webkit-text-fill-color: white;
    transition: all 0.4s ease-in-out;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
}

/* ---------- chat disclaimer ---------- */

.premium-disclaimer {
    background: linear-gradient(110deg, #fffbe6 60%, #fff 100%);
    border: 1.5px solid #ffecb5;
    box-shadow: 0 4px 18px rgba(255,193,7,0.09);
    transition: background .3s, border .3s, color .3s;
    position: relative;
}
.premium-glow {
    filter: drop-shadow(0 0 7px #ffe066);
}
body.dark-mode .premium-disclaimer {
    background: linear-gradient(110deg, #232b36 60%, #242933 100%);
    border: 1.5px solid #483e1d;
    color: #ffd95a;
    box-shadow: 0 4px 22px rgba(255, 232, 78, 0.04), 0 1.5px 6px #000;
}
body.dark-mode .premium-glow {
    color: #ffe066 !important;
    filter: drop-shadow(0 0 13px #ffe066b0);
}
.premium-disclaimer a {
    color: #b7860b;
    transition: color .2s;
}
body.dark-mode .premium-disclaimer a {
    color: #ffe066;
}
.premium-disclaimer a:hover {
    color: #ff9800;
}
body.dark-mode .premium-disclaimer a:hover {
    color: #fffde3;
}
.fade-in-section {
    opacity: 0;
    transform: translateY(32px);
    animation: fadeInUp 0.7s .1s cubic-bezier(.25,1.5,.6,1) forwards;
}
@keyframes fadeInUp {
    0% { opacity: 0; transform: translateY(32px);}
    100% { opacity: 1; transform: none;}
}

/* ---------- SHIMMER (now only on .shimmer-target) ---------- */
.nav-logo.hover-trigger .shimmer-target {
    background: linear-gradient(120deg, #ffffff 0%, #ffd700 30%, #fff8dc 60%, #ffffff 100%);
    background-size: 300% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: sparkleSweep 1.2s linear forwards;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.6),
                 0 0 12px rgba(255, 255, 255, 0.3);
}

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

/* Verified page */

    .animate-fade, .animate-title {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }
    .fade-in {
      opacity: 1;
      transform: translateY(0);
      animation: fadeUp 0.6s ease-out forwards;
    }
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .insurance-info, .earn-info {
      padding: 40px 20px;
      text-align: center;
    }
    .insurance-info {
      background: #f8f9fa;
      border-top: 1px solid #ddd;
    }
    .earn-info {
      background: linear-gradient(135deg, #fff3e0, #ffffff);
      border-top: 2px solid #ffc107;
      animation: fadeInZoom 1s ease-out forwards;
    }
    .insurance-info h3, .earn-info h3 {
      font-weight: bold;
      margin-bottom: 20px;
      font-size: 28px;
      color: #00796b;
    }
    .insurance-info p, .earn-info p {
      font-size: 18px;
      color: #333;
      max-width: 800px;
      margin: 0 auto;
      line-height: 1.7;
    }
    .insurance-highlight, .earn-highlight {
      color: #388e3c;
      font-weight: bold;
    }
    .progress-container {
      max-width: 600px;
      margin: 30px auto 20px;
    }
    .progress-label {
      font-size: 16px;
      margin-bottom: 8px;
      color: #555;
    }
    .progress-bar-wrapper {
      background: #e0e0e0;
      border-radius: 30px;
      overflow: hidden;
    }
    .progress-bar-inner {
      height: 20px;
      width: 60%;
      background: linear-gradient(90deg, #ffb300, #ffc107);
      animation: growBar 1.5s ease-out forwards;
    }
    @keyframes growBar {
      from { width: 0; }
      to { width: 60%; }
    }
    .progress-steps {
      display: flex;
      justify-content: space-between;
      max-width: 600px;
      margin: 10px auto 0;
      font-size: 14px;
      color: #666;
    }

/* sparkle emojis */
.nav-logo::before,
.nav-logo::after {
    content: '✨';
    position: absolute;
    font-size: 18px;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events: none;
}
.nav-logo::before { left: -25px; top: 2px; }
.nav-logo::after  { right: -25px; top: 2px; }

.nav-logo.hover-trigger::before,
.nav-logo.hover-trigger::after {
    opacity: 1;
    transform: scale(1.1) rotate(10deg);
}

/* ---------- Morphing letters → full words ---------- */
.logo-word {
    position: relative;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    padding-right: 2px;
}

.logo-word .letter {
    color: #fff;
    font-weight: bold;
    display: inline-block;
    transition: transform .55s ease, opacity .55s ease;
}

.logo-word::after {
    content: attr(data-word);
    position: absolute;
    left: -100%;
    top: 0;
    color: #fff;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(0);
    transition: transform .55s ease, opacity .55s ease;
}

/* swap on hover */
#mainLogo:hover .logo-word .letter { transform: translateX(120%); opacity: 0; }
#mainLogo:hover .logo-word::after  { transform: translateX(100%); opacity: 1; }

/* cascade delay */
#mainLogo:hover .logo-word:nth-of-type(1)::after { transition-delay: 0s;   }
#mainLogo:hover .logo-word:nth-of-type(2)::after { transition-delay: .12s; }
#mainLogo:hover .logo-word:nth-of-type(3)::after { transition-delay: .24s; }

/* ---------- Burger button ---------- */
.menu-toggle {
    display: block;
    font-size: 28px;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
}
        .profile-container {
            max-width: 750px;
            margin: 40px auto;
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 3px 12px rgba(0,0,0,0.05);
            padding: 30px 20px;
        }
        @media (max-width: 576px) {
            .profile-container {
                padding: 20px 15px;
            }
        }
/* ---------- Nav links (collapsible on mobile) ---------- */
.nav-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    background-color: #222;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}
.nav-links li   { text-align: center; padding: 10px 0; }
.nav-links a    { color: white; text-decoration: none; font-size: 16px; }
.nav-links a:hover { color: #ffcc00; }

/* expanded by JS */
.nav-links.active { max-height: 500px; }

/* ---------- Desktop layout (>768px) ---------- */
@media (min-width: 769px) {
    .nav-links {
        flex-direction: row;
        background: none;
        max-height: none;
        overflow: visible;
        width: auto;
    }
    .nav-links li {
        margin-left: 20px;
        padding: 0;
    }
}
/* ===================================================================== *
   News Light mode
 * ===================================================================== */
        body {
            font-family: Arial, sans-serif;
            background: #f4f4f4;
            margin: 0;
            padding: 0;
        }
		
		.news-container {
    max-width: 800px;
    margin: 30px auto;
    padding: 20px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    opacity: 0;
    transform: translateY(30px);
    animation: fadeContainerUp 0.8s ease-out forwards;
    animation-delay: 0.2s;
}

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

        .news-post {
            margin-bottom: 30px;
            padding-bottom: 15px;
            border-bottom: 1px solid #ddd;
        }
        .news-post h2 {
            margin-bottom: 8px;
        }
        .news-post p {
            white-space: pre-line;
        }
        .news-post small {
            color: gray;
        }
        .btn {
            display: inline-block;
            padding: 6px 12px;
            font-size: 14px;
            margin-top: 10px;
            text-decoration: none;
            border-radius: 4px;
        }
        .btn-edit {
            background-color: #007bff;
            color: white;
        }
        .btn-delete {
            background-color: #dc3545;
            color: white;
        }
        .btn:hover {
            opacity: 0.9;
        }
        .btn-archive {
            background-color: #6c757d;
            color: white;
        }
        .glow-title {
            text-align: center;
            font-size: 32px;
            font-weight: bold;
            color: #cc4444;
            text-shadow: 0 0 6px rgba(204, 68, 68, 0.5), 0 0 10px rgba(170, 51, 51, 0.3);
            animation: pulseGlow 2.5s ease-in-out infinite;
            margin-bottom: 30px;
        }
        @keyframes pulseGlow {
            0%, 100% {
                text-shadow: 0 0 6px rgba(204, 68, 68, 0.5), 0 0 10px rgba(170, 51, 51, 0.3);
            }
            50% {
                text-shadow: 0 0 10px rgba(204, 68, 68, 0.8), 0 0 16px rgba(170, 51, 51, 0.6);
            }
        }	
/* ===================================================================== *
   About light mode
 * ===================================================================== */
.hero-section {
  position: relative;
  background: linear-gradient(120deg, #2563eb 50%, #1e40af 100%);
  color: #fff;
  border-radius: 22px;
  padding: 48px 28px 36px 28px;
  box-shadow: 0 8px 40px 0 rgba(30,64,175,0.18);
  text-align: center;
  margin-bottom: 3.2rem;
  overflow: hidden;
}
.hero-section h1 {
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  margin-bottom: 0.4em;
  text-shadow: 0 4px 18px #17307970;
  animation: fadeUp 1.3s cubic-bezier(.28,.84,.42,1) both;
}
.hero-section p {
  font-size: 1.15rem;
  color: #d9e6ff;
  max-width: 600px;
  margin: 0 auto 12px auto;
  opacity: 0.94;
}
.hero-crypto {
  position: absolute;
  top: 12px; right: 32px; font-size: 3.8rem; opacity: .18;
  pointer-events: none; user-select: none;
  animation: floatHero 5s ease-in-out infinite alternate;
}
@keyframes floatHero { 0% { transform:translateY(0) scale(1);} 100% { transform:translateY(-18px) scale(1.06);} }

.fade-in-section, .card-about {
  opacity: 0; transform: translateY(24px); transition: all 0.85s cubic-bezier(.23,1.02,.65,1);
}
.fade-in-section.in-view, .card-about.in-view { opacity: 1; transform: none; }

.card-about {
  background: #fff;
  border: none;
  border-radius: 18px;
  box-shadow: 0 4px 24px rgba(37,99,235,0.09);
  margin-bottom: 2rem;
  padding: 2.1rem 1.4rem;
  transition: box-shadow .28s;
  position: relative;
}
.card-about:hover { box-shadow: 0 6px 34px rgba(37,99,235,0.13); }

.card-about .icon-wrap {
  font-size: 2.1rem;
  color: #2563eb;
  margin-bottom: 10px;
  animation: popIn .8s both;
}
@keyframes popIn { from {opacity:0; transform:scale(0.7);} to {opacity:1; transform:scale(1);} }

.card-about h2 {
  font-size: 1.23rem;
  font-weight: 700;
  margin-bottom: .6rem;
  color: #1e293b;
}

.card-about ul, .card-about ol {
  margin: 0 0 0.2rem 0; padding-left: 1.1rem;
}
.card-about li {
  margin-bottom: 0.28em;
  font-size: 1.05rem;
  color: #2a3445;
}

.highlight-box {
  background: linear-gradient(95deg, #fffae4 80%, #ffe2cc 100%);
  color: #b57e1d;
  border-radius: 12px;
  padding: 1.1rem 1rem;
  margin-bottom: 2rem;
  border-left: 7px solid #ffc107;
  box-shadow: 0 2px 16px #ffbf0966;
  font-size: 1.07rem;
  font-weight: 600;
  animation: fadeInBox 1.3s cubic-bezier(.28,.84,.42,1) 0.3s both;
}
@keyframes fadeInBox { from {opacity:0; transform:translateY(30px);} to {opacity:1; transform:translateY(0);} }

@media (max-width: 700px) {
  .hero-section { padding: 32px 10px 28px 10px; font-size: 1rem; }
  .hero-crypto { right: 12px; font-size: 2.4rem; }
  .card-about { padding: 1.2rem 0.8rem; }
}
/* ===================================================================== *
   FORM / FLASH / BADGES (unchanged from your file)
 * ===================================================================== */

/* Form Wrapper */
.form-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
}

/* Form Container */
.form-container {
    background: #fff;
    padding: 30px 40px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 400px;
}

.form-container h2 {
    text-align: center;
    margin-bottom: 20px;
}

.form-container input[type="text"],
.form-container input[type="password"],
.form-container input[type="email"],
.form-container select {
    width: 100%;
    padding: 10px;
    margin-bottom: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.form-container input[type="submit"] {
    width: 100%;
    background-color: #28a745;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}
.form-container input[type="submit"]:hover { background-color: #218838; }

label {
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
}

.form-container .links { text-align: center; margin-top: 15px; }
.form-container .links a { text-decoration: none; color: #007bff; font-weight: bold; }

/* Flash Messages */
.flash {
    position: relative;
    padding: 12px 20px;
    border-radius: 6px;
    margin-bottom: 20px;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
}
.flash.success { background: #ddffdd; border: 1px solid green; color: green; }
.flash.error   { background: #ffdddd; border: 1px solid red;   color: red; }

.close-btn {
    position: absolute;
    top: 8px;
    right: 15px;
    font-size: 22px;
    font-weight: bold;
    color: #333;
    cursor: pointer;
}

.close-btn:hover { color: red; }

/* ---------- ADMIN CONSOLE ---------- */

        .admin-title {
            font-size: 2.2rem;
            font-weight: bold;
            background: linear-gradient(to right, #00f0c2, #00c3ff, #8e2de2);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-align: center;
            animation: glowPulse 2.5s infinite ease-in-out;
        }
        @keyframes glowPulse {
            0%, 100% { text-shadow: 0 0 6px rgba(0,255,255,0.4); }
            50% { text-shadow: 0 0 14px rgba(0,255,255,0.8); }
        }
/* ---------- Badges (unchanged) ---------- */
.badge {
    display: inline-block;
    padding: 6px 18px;
    color: white;
    font-size: 15px;
    font-weight: bold;
    border-radius: 25px;
    text-align: center;
    margin-right: 12px;
    margin-bottom: 8px;
    background-color: #555;
    transition: transform .3s, box-shadow .3s, background-color .3s, filter .3s;
}
.badge:hover  { transform: scale(1.05); box-shadow: 0 0 8px rgba(255,255,255,.4); filter: brightness(1.1); }
.badge:active { transform: scale(.95);  box-shadow: 0 0 6px rgba(255,165,0,.4); }

/* Individual badge colours + glow animations (unchanged) */
.staff-member-badge { background:#ff5722; animation: glow-orange 3s ease-in-out infinite alternate; }
.vip-badge          { background:#ffd700; animation: glow-gold   3s ease-in-out infinite alternate; }
.trusted-badge      { background:#1e88e5; animation: glow-blue   3s ease-in-out infinite alternate; }
.early-adopter-badge{ background:#66bb6a; animation: glow-green  3s ease-in-out infinite alternate; }
.verified-badge     { background:#00bcd4; animation: glow-cyan   3s ease-in-out infinite alternate; }

@keyframes glow-orange { from{ text-shadow:0 0 4px #ff5722 } to{ text-shadow:0 0 24px #ff5722 } }
@keyframes glow-gold   { from{ text-shadow:0 0 4px #ffd700 } to{ text-shadow:0 0 20px #ffd700 } }
@keyframes glow-blue   { from{ text-shadow:0 0 4px #1e88e5 } to{ text-shadow:0 0 24px #1e88e5 } }
@keyframes glow-green  { from{ text-shadow:0 0 4px #66bb6a } to{ text-shadow:0 0 24px #66bb6a } }
@keyframes glow-cyan   { from{ text-shadow:0 0 4px #00bcd4 } to{ text-shadow:0 0 24px #00bcd4 } }

/* ---------- Fade‑in utilities (unchanged) ---------- */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-title { animation: fadeUp 0.8s ease-out forwards; opacity: 0; }
.animate-fade  { opacity: 0; animation: fadeUp 1s ease forwards; }
.animate-fade.delay-1 { animation-delay: .3s; }
.animate-fade.delay-2 { animation-delay: .6s; }

.why-verified { background:#f8f9fa; border-top:1px solid #ddd; }

/* ===================================================================== */

/* ========================= DARK MODE ========================= */
body.dark-mode {
    background: #191c1f !important;
    color: #e2e6ea !important;
}

/* Navbar */
body.dark-mode .main-navbar,
body.dark-mode .nav-links,
body.dark-mode .nav-links li {
    background: #23272e !important;
}
body.dark-mode .nav-links a {
    color: #dbeafe !important;
}
body.dark-mode .nav-links a:hover {
    color: #60a5fa !important;
}
body.dark-mode .menu-toggle {
    color: #dbeafe !important;
}

/* Cards, Forms, Section Cards */
body.dark-mode .card,
body.dark-mode .form-container,
body.dark-mode .section-card {
    background: #23272e !important;
    color: #e2e6ea !important;
    box-shadow: 0 6px 28px rgba(24,32,50,0.28);
    border: 1px solid #23272e;
}
body.dark-mode .card-footer,
body.dark-mode .card-body {
    background: #23272e !important;
    color: #e2e6ea !important;
}
body.dark-mode .card:hover {
    box-shadow: 0 8px 32px rgba(24,32,50,0.42);
}

/* Inputs & Buttons */
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
    background: #191c1f !important;
    color: #e2e6ea !important;
    border: 1px solid #333 !important;
}
body.dark-mode .form-control,
body.dark-mode .form-select {
    background: #1c2127 !important;
    color: #e2e6ea !important;
    border: 1px solid #23272e !important;
}
body.dark-mode input:focus,
body.dark-mode select:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 4px #2563eb33;
}

/* Flash messages */
body.dark-mode .flash.success   { background: #213d26 !important; border: 1px solid #43e36a !important; color: #79ffb3 !important; }
body.dark-mode .flash.error     { background: #441e1e !important; border: 1px solid #ff4d4d !important; color: #ffb3b3 !important; }
body.dark-mode .close-btn       { color: #aaa !important; }
body.dark-mode .close-btn:hover { color: #fff !important; }

/* Listing Banners */
body.dark-mode .listing-banner.buy  { background: linear-gradient(120deg, #2563eb 60%, #2563eb 100%); }
body.dark-mode .listing-banner.sell { background: linear-gradient(120deg, #c02626 60%, #c02626 100%); }

/* Premium Button, Initiate Button, etc. */
body.dark-mode .premium-post-btn,
body.dark-mode .initiate-trade-btn {
    background: linear-gradient(to right, #29304d, #2563eb);
    color: #dbeafe !important;
    box-shadow: 0 4px 18px rgba(60,80,170,0.20);
}
body.dark-mode .premium-post-btn:hover,
body.dark-mode .initiate-trade-btn:hover {
    background: linear-gradient(to right, #2563eb, #29304d);
    color: #fff !important;
}

/* Badges */
body.dark-mode .badge {
    color: #fff !important;
    background: #1e293b !important;
    border: 1px solid #334155 !important;
    filter: brightness(1.08);
}
body.dark-mode .verified-badge    { background: #00bcd4 !important; }
body.dark-mode .staff-member-badge{ background: #fbbf24 !important; color: #333 !important;}
body.dark-mode .vip-badge         { background: #d97706 !important; }
body.dark-mode .trusted-badge     { background: #3b82f6 !important; }
body.dark-mode .early-adopter-badge { background: #22c55e !important; }

body.dark-mode .notification {
    background: #222a37 !important;
    border-left: 4px solid #2563eb !important;
    color: #cbd5e1 !important;
}

body.dark-mode .why-verified { background: #23272e !important; border-top:1px solid #334155; }

/* Tooltips, Toasts, etc */
body.dark-mode .toast,
body.dark-mode .toast-body {
    background: #23272e !important;
    color: #dbeafe !important;
    border: 1px solid #2563eb !important;
}
body.dark-mode .text-bg-primary { background: #2563eb !important; }
body.dark-mode .text-bg-danger  { background: #c02626 !important; }
body.dark-mode .text-bg-success { background: #22c55e !important; }

/* Misc */
body.dark-mode .border,
body.dark-mode .border-0,
body.dark-mode .border-top,
body.dark-mode .border-bottom,
body.dark-mode .border-start,
body.dark-mode .border-end {
    border-color: #23272e !important;
}
body.dark-mode .bg-light {
    background: #23272e !important;
    color: #dbeafe !important;
}

body.dark-mode hr {
    border-top: 1px solid #334155 !important;
}

body.dark-mode a,
body.dark-mode .link-secondary {
    color: #60a5fa !important;
}
body.dark-mode a:hover,
body.dark-mode .link-secondary:hover {
    color: #93c5fd !important;
}

/* Scrollbar styling (optional) */
body.dark-mode ::-webkit-scrollbar {
    width: 10px;
    background: #23272e;
}
body.dark-mode ::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 6px;
}
body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #2563eb;
}
/* === DARK MODE PROFILE FIXES === */
body.dark-mode .profile-container {
    background: #19202a;
    color: #e5eaf3;
    border: 1px solid #232b39;
    box-shadow: 0 3px 20px rgba(0,0,0,0.18);
}

body.dark-mode .profile-container .text-muted,
body.dark-mode .profile-container .fw-semibold,
body.dark-mode .profile-container label,
body.dark-mode .profile-container .text-end {
    color: #c2d0e7 !important;
}

body.dark-mode .profile-container .text-end {
    color: #e7eefb !important;
}

body.dark-mode .profile-container .border,
body.dark-mode .profile-container .bg-light,
body.dark-mode .profile-container .rounded {
    border-color: #253148 !important;
    background: #232b39 !important;
}

body.dark-mode .profile-container .btn-outline-success,
body.dark-mode .profile-container .btn-outline-secondary {
    color: #b7e0c3;
    border-color: #3d5a3d;
}
body.dark-mode .profile-container .btn-outline-success:hover {
    background: #25653c;
    color: #fff;
}
body.dark-mode .profile-container .btn-outline-secondary:hover {
    background: #303646;
    color: #fff;
}

body.dark-mode .alert-success {
    background: #243c29;
    color: #b8ffb8;
    border-color: #298c37;
}
body.dark-mode .alert-danger {
    background: #3d2222;
    color: #ffeaea;
    border-color: #9c2929;
}

body.dark-mode .badge {
    filter: brightness(1.1);
    border: 1px solid #1e222b33;
}

/* Wallet Integration Box */
body.dark-mode .profile-container .bg-light {
    background: #232b39 !important;
    color: #e2eaf5 !important;
}

/* ===================================================================== *
   News Dark Mode
 * ===================================================================== */
body.dark-mode {
    background: #13171f;
    color: #dde4f1;
}

body.dark-mode .news-container {
    background: #232a36;
    color: #dde4f1;
    border: 1px solid #273142;
    box-shadow: 0 4px 24px rgba(24,28,38,0.44);
}

body.dark-mode .news-post {
    border-bottom: 1px solid #353b4a;
}

body.dark-mode .news-post h2 {
    color: #ff9090;
    text-shadow: 0 0 10px #3b2121a0, 0 2px 10px #a4444430;
}

body.dark-mode .news-post small {
    color: #a6b2c9;
}

body.dark-mode .btn {
    color: #e2eaf6;
    background: #273142;
    border: 1px solid #35415d;
}

body.dark-mode .btn-edit {
    background-color: #1859b4;
    color: #f3f8ff;
    border: none;
}
body.dark-mode .btn-edit:hover {
    background: #2579e3;
    color: #fff;
}

body.dark-mode .btn-delete {
    background-color: #b42634;
    color: #fff;
    border: none;
}
body.dark-mode .btn-delete:hover {
    background: #d73a42;
    color: #fff;
}

body.dark-mode .btn-archive {
    background-color: #434d5c;
    color: #dde4f1;
    border: none;
}
body.dark-mode .btn-archive:hover {
    background: #606e84;
}

body.dark-mode .glow-title {
    color: #ff7f7f;
    text-shadow: 0 0 10px #c62626bb, 0 0 18px #c6262666;
}

/* Optional: transition for smoothness */
body, .news-container, .btn {
    transition: background 0.4s, color 0.4s, box-shadow 0.4s;
}
/* ---- DARK MODE SUPPORT ---- */
body.dark-mode, body.bg-dark {
  background: #1a1e27 !important;
  color: #dae5f3 !important;
}
body.dark-mode .hero-section, body.bg-dark .hero-section {
  background: linear-gradient(120deg, #193e83 60%, #111726 100%);
  color: #fff;
}
body.dark-mode .card-about, body.bg-dark .card-about {
  background: #212836;
  color: #dde4f1;
  box-shadow: 0 6px 26px rgba(18,28,38,0.14);
}
body.dark-mode .card-about h2,
body.bg-dark .card-about h2 { color: #87b2ff; }
body.dark-mode .card-about li,
body.bg-dark .card-about li { color: #b2c4e1; }
body.dark-mode .highlight-box, body.bg-dark .highlight-box {
  background: linear-gradient(90deg, #27241a 60%, #3c321b 100%);
  color: #ffd877;
  border-left: 7px solid #ffc72a;
  box-shadow: 0 2px 14px #42350988;
}
body.dark-mode .hero-crypto,
body.bg-dark .hero-crypto { color: #fff; opacity: .09; }
body.dark-mode .border-warning, body.bg-dark .border-warning { border-color: #ffc72a !important; }
body.dark-mode a, body.bg-dark a { color: #8fcfff; }

/* Animation util */
@keyframes fadeUp { from {opacity:0; transform:translateY(24px);} to {opacity:1; transform:none;} }
.fade-in-section, .card-about { animation: fadeUp 1.1s cubic-bezier(.23,1.02,.65,1) both; }



/* Admin Console */

body.dark-mode {
  background: #181b26 !important;
  color: #c9d1d9;
}
.dark-mode .admin-glass { background: rgba(34,38,60,0.92); color: #c9d1d9; }
.dark-mode .table, .dark-mode .accordion, .dark-mode .accordion-body, .dark-mode .accordion-button { color: #c9d1d9 !important; background: #23263a !important; }
.dark-mode .accordion-button:not(.collapsed) { background: #181b26 !important; }
.dark-mode .btn-outline-danger, .dark-mode .btn-outline-warning, .dark-mode .btn-outline-primary { color: #fff !important; }
.dark-mode .btn-outline-danger:hover { background: #be123c !important; }
.dark-mode .btn-outline-warning:hover { background: #f59e42 !important; }
.dark-mode .btn-outline-primary:hover { background: #1e40af !important; }
.dark-mode .bg-light { background: #24263c !important; }
.dark-mode .table-bordered, .dark-mode .table-bordered th, .dark-mode .table-bordered td { border-color: #393c51 !important; }
.dark-mode .table-success { background: #253f31 !important; }
.dark-mode .btn-secondary { background: #334155 !important; color: #fff !important; border: none; }


/* === Verified Page DARK MODE === */
.dark-mode .insurance-info,
.dark-mode .earn-info {
    background: #1a2232 !important;
    border-top: 1.5px solid #24344c !important;
}
.dark-mode .earn-info {
    background: linear-gradient(135deg, #25334a 0%, #232e42 100%) !important;
    border-top: 2px solid #ffe066 !important;
}

.dark-mode .insurance-info h3,
.dark-mode .earn-info h3 {
    color: #50faaf !important;
}

.dark-mode .insurance-info p,
.dark-mode .earn-info p {
    color: #d3f8e2 !important;
}

.dark-mode .insurance-highlight,
.dark-mode .earn-highlight {
    color: #ffe066 !important;
}

.dark-mode .progress-container {
    background: none;
}

.dark-mode .progress-label {
    color: #c6e2ff !important;
}

.dark-mode .progress-bar-wrapper {
    background: #2d3a4c !important;
}

.dark-mode .progress-bar-inner {
    background: linear-gradient(90deg, #ffb300 0%, #ffe066 100%) !important;
}

.dark-mode .progress-steps {
    color: #b2c2da !important;
}

.dark-mode .animate-fade,
.dark-mode .animate-title {
    /* Keep original animation but set text color for dark */
    color: #fff !important;
}
/* ==========================
   Listings Page: DARK MODE
   ========================== */
.dark-mode {
  background: #141820 !important;
  color: #e8f0fc;
}
.dark-mode .container {
  background: none !important;
}

.dark-mode .card,
.dark-mode .card.p-4,
.dark-mode .shadow-sm,
.dark-mode .rounded-4,
.dark-mode .select2-container--default .select2-selection--single {
  background: #232b39 !important;
  color: #e8f0fc !important;
  border-color: #232b39 !important;
  box-shadow: 0 3px 16px 0 #0005;
}

.dark-mode .form-label,
.dark-mode .form-check-label,
.dark-mode .select2-selection__rendered,
.dark-mode .select2-results__option {
  color: #e8f0fc !important;
}

.dark-mode input,
.dark-mode select,
.dark-mode textarea,
.dark-mode .form-control,
.dark-mode .form-select {
  background: #181e29 !important;
  color: #e8f0fc !important;
  border-color: #283249 !important;
}
.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
  color: #b2b7c2 !important;
  opacity: 1;
}
.dark-mode .form-check-input:checked {
  background-color: #1e90ff !important;
  border-color: #1e90ff !important;
}
.dark-mode .select2-container--default .select2-selection--single {
  background: #181e29 !important;
  color: #e8f0fc !important;
  border-color: #283249 !important;
}
.dark-mode .select2-dropdown {
  background: #232b39 !important;
  color: #e8f0fc !important;
  border-color: #232b39 !important;
}
.dark-mode .select2-results__option--highlighted {
  background: #314262 !important;
  color: #fff !important;
}

.dark-mode .btn,
.dark-mode .btn.btn-dark {
  background: linear-gradient(90deg, #1e293b, #293042 90%) !important;
  color: #fff !important;
  border: none;
  box-shadow: 0 2px 12px #0002;
}
.dark-mode .btn:hover {
  background: linear-gradient(90deg, #293042 30%, #1e293b 100%) !important;
  color: #ffd54f !important;
}

.dark-mode .alert {
  background: #222c3a !important;
  color: #fff !important;
  border-color: #233046 !important;
}
.dark-mode .alert-danger { border-left: 4px solid #e53935 !important; }
.dark-mode .alert-success { border-left: 4px solid #43a047 !important; }

.dark-mode .form-check-input {
  background-color: #283249 !important;
  border-color: #1e293b !important;
}

.dark-mode .select2-container--default .select2-selection--single .select2-selection__arrow {
  filter: invert(1);
}
body.dark-mode .btn-outline-primary,
body.dark-mode .btn-outline-danger {
    background: #232634;
    color: #fff;
    border-color: #35395a;
}
body.dark-mode .btn-outline-primary.active,
body.dark-mode .btn-outline-primary:active,
body.dark-mode .btn-outline-primary:focus,
body.dark-mode .btn-check:checked + .btn-outline-primary {
    background: #2691d9;
    color: #fff;
    border-color: #2691d9;
}
body.dark-mode .btn-outline-danger.active,
body.dark-mode .btn-outline-danger:active,
body.dark-mode .btn-outline-danger:focus,
body.dark-mode .btn-check:checked + .btn-outline-danger {
    background: #e2434b;
    color: #fff;
    border-color: #e2434b;
}
/* Universal dark modal override for your site's dark mode */
body.dark-mode .custom-modal-dark {
    background: #222 !important;
    color: #fff !important;
}

body.dark-mode .custom-modal-dark .modal-body,
body.dark-mode .custom-modal-dark .modal-footer {
    background: #222 !important;
    color: #fff !important;
}

body.dark-mode .custom-modal-dark .btn-close {
    filter: invert(1);
}
.below-market { color: #ff4444; font-weight: bold; }
.above-market { color: #00cc44; font-weight: bold; }

/* --- Only affect the modal window, not the overlay --- */
#cropperModal .modal-content,
.cropper-modal .modal-content,
#cropperModal .modal-body,
.cropper-modal .modal-body {
    background: #fff !important;
    color: #232b39 !important;
    opacity: 1 !important;
    box-shadow: 0 8px 32px #0003;
}

body.dark-mode #cropperModal .modal-content,
body.dark-mode .cropper-modal .modal-content,
body.dark-mode #cropperModal .modal-body,
body.dark-mode .cropper-modal .modal-body {
    background: #232b39 !important;
    color: #fff !important;
    opacity: 1 !important;
}


.modal-backdrop.show {
    opacity: 0.9 !important;
    background: #191c1f !important;
}

/* Optional: Make sure CropperJS overlays are not too strong */
.cropper-bg, .cropper-modal {
    opacity: 0.8 !important; /* subtle, not full white/black */
    background-color: #fff !important;
}

body.dark-mode .cropper-bg, body.dark-mode .cropper-modal {
    background-color: #232b39 !important;
}

/* Keep cropper image preview solid */
#cropper-image {
    background: #fff !important;
}
body.dark-mode #cropper-image {
    background: #232b39 !important;
}
body.fade-in {
  opacity: 1;
  transition: opacity 0.4s ease-in;
}
#fade-container {
  opacity: 1;
  transition: opacity 0.4s ease-in-out;
}

.fade-out #fade-container {
  opacity: 0;
}
.container-fade {
  max-width: 1140px;
  margin: 0 auto;
  padding: 2rem 1rem; /* Same as py-4 */
  opacity: 0;
  transform: translateY(20px);
  animation: fadeSlideUp 0.6s ease-out forwards;
}

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