/* =====================================================
   🌙 OGBELE DARK MODE — CONTROLLED & CLEAN
   ===================================================== */

html.dark {
    color-scheme: dark;
    background: #020617;
}

/* MAIN PAGE BACKGROUND */
html.dark body {
    background: linear-gradient(
        180deg,
        #020617 0%,
        #020617 40%,
        #020617 100%
    );
    color: #e5e7eb;
}

/* ======================================
   FIX GRAY BANDS YOU CIRCLED
   ====================================== */
html.dark .bg-gray-100,
html.dark .bg-gray-200,
html.dark .bg-slate-100,
html.dark .bg-slate-200,
html.dark [style*="linear-gradient"],
html.dark section,
html.dark main {
    background: linear-gradient(
        180deg,
        #020617,
        #0b1220
    ) !important;
}

/* ======================================
   CARDS (ADS, CATEGORY BOXES)
   ====================================== */
html.dark .card,
html.dark .ad-card,
html.dark .category-card,
html.dark .rounded-lg,
html.dark .shadow {
    background-color: #0b1220 !important;
    color: #e5e7eb !important;
    border-color: #1e293b !important;
}

/* ======================================
   SEARCH BAR & FORM FIELDS (IMPORTANT)
   ====================================== */
html.dark input,
html.dark textarea,
html.dark select {
    background-color: #020617 !important;
    color: #e5e7eb !important;
    border: 1px solid #1e293b !important;
}

html.dark input::placeholder {
    color: #94a3b8 !important;
}

/* ======================================
   BUTTONS (Search, Post, Buy Plan)
   ====================================== */
html.dark button,
html.dark .btn {
    background-color: #0f172a !important;
    color: #f8fafc !important;
    border-color: #1e293b !important;
}

html.dark button.primary,
html.dark .btn-primary {
    background-color: #2563eb !important;
    color: #ffffff !important;
}

/* ======================================
   TEXT FIX (NO DARK TEXT ON DARK BG)
   ====================================== */
html.dark p,
html.dark span,
html.dark small,
html.dark label,
html.dark li {
    color: #cbd5f5 !important;
}

html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5 {
    color: #f8fafc !important;
}

/* ======================================
   FOOTER (FIXED – NO GRAY)
   ====================================== */
html.dark footer {
    background: linear-gradient(
        180deg,
        #020617,
        #020617
    ) !important;
}

/* ======================================
   DO NOT TOUCH IMAGES / ADS
   ====================================== */
html.dark img,
html.dark video {
    filter: none !important;
}

/* =====================================================
   🌙 OGBELE DARK MODE — REAL FIX (NO GUESSING)
   ===================================================== */

/* -----------------------------
   GLOBAL LIGHT BACKGROUND KILL
   ----------------------------- */
html.dark body,
html.dark main,
html.dark section {
    background-color: #020617 !important;
    background-image: none !important;
}

/* -----------------------------
   GRAY / SILVER BANDS (YOU CIRCLED)
   ----------------------------- */
html.dark [style*="linear-gradient"],
html.dark [style*="background: rgb(245"],
html.dark [style*="background: #f"],
html.dark [class*="bg-gray"],
html.dark [class*="bg-slate"],
html.dark [class*="bg-white"] {
    background-color: #020617 !important;
    background-image: none !important;
}

/* -----------------------------
   SWIPER CONTAINERS (RECOMMENDED)
   ----------------------------- */
html.dark .swiper,
html.dark .swiper-wrapper,
html.dark .swiper-slide {
    background-color: #020617 !important;
}

/* -----------------------------
   AD SLIDER ITEM WRAPPERS
   ----------------------------- */
html.dark .swiper-slide > div {
    background-color: #0b1220 !important;
    border: 1px solid #1e293b !important;
    border-radius: 12px;
}

/* -----------------------------
   LOCATION PILLS (Lagos, Benin City)
   ----------------------------- */
html.dark span[class*="city"],
html.dark span[class*="location"],
html.dark span[class*="badge"] {
    background-color: #020617 !important;
    color: #cbd5f5 !important;
    border: 1px solid #1e293b !important;
}

/* -----------------------------
   TOP CATEGORIES (WHITE BOXES)
   ----------------------------- */
html.dark a > div[class*="rounded"],
html.dark a > div[class*="shadow"] {
    background-color: #0b1220 !important;
    color: #e5e7eb !important;
    border: 1px solid #1e293b !important;
}

/* -----------------------------
   CATEGORY ICON TEXT
   ----------------------------- */
html.dark a > div span,
html.dark a > div p {
    color: #e5e7eb !important;
}

/* -----------------------------
   BREADCRUMB BAR
   ----------------------------- */
html.dark nav,
html.dark .breadcrumb,
html.dark [aria-label="breadcrumb"] {
    background-color: #020617 !important;
    color: #94a3b8 !important;
}




/* -----------------------------
   SEARCH INPUTS (VISIBLE & SOFT)
   ----------------------------- */
html.dark input,
html.dark select,
html.dark textarea {
    background-color: #0f172a !important;
    color: #e5e7eb !important;
    border: 1px solid #1e293b !important;
}

html.dark input::placeholder {
    color: #94a3b8 !important;
}

/* -----------------------------
   BUTTONS
   ----------------------------- */
html.dark button {
    background-color: #0f172a !important;
    color: #f8fafc !important;
    border-color: #1e293b !important;
}

html.dark button.bg-blue-500,
html.dark button.bg-blue-600 {
    background-color: #2563eb !important;
}

/* -----------------------------
   SWIPER ARROWS
   ----------------------------- */
html.dark .swiper-button-next,
html.dark .swiper-button-prev {
    background-color: #020617 !important;
    color: #e5e7eb !important;
    border: 1px solid #1e293b !important;
    border-radius: 999px;
}

/* -----------------------------
   TEXT SAFETY NET
   ----------------------------- */
html.dark * {
    color: inherit;
}

html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5 {
    color: #f8fafc !important;
}

html.dark p,
html.dark span,
html.dark small,
html.dark li {
    color: #cbd5f5 !important;
}

/* -----------------------------
   NEVER TOUCH IMAGES
   ----------------------------- */
html.dark img,
html.dark video {
    filter: none !important;
}




/* =====================================================
   🔧 FINAL DARK MODE FIXES (TARGETED)
   ===================================================== */

/* =========================
   1️⃣ HEADER (LIGHT BLUE → DARK)
   ========================= */
html.dark header,
html.dark .header,
html.dark .top-header,
html.dark .bg-blue-100,
html.dark .bg-sky-100,
html.dark [class*="bg-blue"] {
    background: #020617 !important;
    color: #e5e7eb !important;
}

/* breadcrumb / earnings bar under header */
html.dark .breadcrumb,
html.dark .check-earnings,
html.dark .earnings-bar {
    background: #020617 !important;
    color: #cbd5f5 !important;
}

/* =========================
   2️⃣ RECOMMENDED / CAROUSEL STRIP
   ========================= */
html.dark .recommended,
html.dark .recommended-wrapper,
html.dark .swiper,
html.dark .swiper-wrapper,
html.dark .swiper-slide {
    background: transparent !important;
}

/* small text under images (city names etc) */
html.dark .swiper-slide span,
html.dark .swiper-slide small,
html.dark .location,
html.dark .text-gray-500,
html.dark .text-gray-600 {
    color: #94a3b8 !important;
}

/* city / tag pills */
html.dark .badge,
html.dark .tag,
html.dark .pill {
    background: #0f172a !important;
    color: #e5e7eb !important;
    border: 1px solid #1e293b !important;
}

/* =========================
   3️⃣ AD CARDS (WHITE → DARK)
   ========================= */
html.dark .ad-card,
html.dark .ad-item,
html.dark .listing-card,
html.dark .card {
    background: #0b1220 !important;
    border: 1px solid #1e293b !important;
    color: #e5e7eb !important;
}

/* price */
html.dark .price,
html.dark .ad-price {
    color: #60a5fa !important;
    font-weight: 600;
}

/* location / meta text */
html.dark .ad-meta,
html.dark .ad-location,
html.dark .text-muted {
    color: #94a3b8 !important;
}

/* =========================
   SAFETY: NEVER DARKEN IMAGES
   ========================= */
html.dark img,
html.dark video {
    filter: none !important;
    background: transparent !important;
}

/* ================================
   🔥 FORCE HEADER DARK (REAL FIX)
   ================================ */

/* outer header wrapper */
html.dark body > div > header,
html.dark body header,
html.dark body nav {
    background-color: #020617 !important;
    background-image: none !important;
}

/* inner header container (Blade output) */
html.dark body header > div,
html.dark body header div[class*="bg"],
html.dark body nav div[class*="bg"] {
    background-color: #020617 !important;
    background-image: none !important;
}

/* prevent Tailwind bg-sky / bg-blue */
html.dark body header .bg-sky-100,
html.dark body header .bg-blue-100,
html.dark body header .bg-blue-200 {
    background-color: #020617 !important;
}


/* ================================
   📍 LOCATION TEXT (REAL TARGET)
   ================================ */
html.dark .swiper-slide span,
html.dark .swiper-slide small {
    background-color: #020617 !important;
    color: #e5e7eb !important;
    border: 1px solid #1e293b !important;
    border-radius: 999px;
    padding: 2px 8px;
}
/* ================================
   🧾 AD CARD INNER SECTIONS
   ================================ */
html.dark .ad-card > div,
html.dark .listing-card > div,
html.dark .card > div {
    background-color: #0b1220 !important;
}

/* kill inner white blocks */
html.dark .ad-card [class*="bg-white"],
html.dark .listing-card [class*="bg-white"] {
    background-color: #0b1220 !important;
}




/* =====================================================
   ✅ SAFE DARK MODE FIX (NO OVERREACH)
   ===================================================== */

/* ---------------------------
   AD DETAILS PAGE
   --------------------------- */

/* Title bar above images */
html.dark .ad-title,
html.dark .ad-header,
html.dark .details-title,
html.dark h1.ad-title,
html.dark h2.ad-title {
    background-color: #020617 !important;
    color: #f8fafc !important;
}

/* Image container ONLY */
html.dark .ad-gallery,
html.dark .ad-images,
html.dark .swiper-container,
html.dark .swiper {
    background-color: #020617 !important;
}

/* Thumbnail strip container */
html.dark .swiper-thumbs,
html.dark .swiper-thumbs-wrapper {
    background-color: #020617 !important;
}

/* ---------------------------
   POST AD FORM
   --------------------------- */

/* Select dropdown (closed) */
html.dark select,
html.dark .select2-selection--single,
html.dark .vs__dropdown-toggle {
    background-color: #0b1220 !important;
    color: #ffffff !important;
    border: 1px solid #1e293b !important;
}

/* Selected value text MUST stay white */
html.dark .select2-selection__rendered,
html.dark .vs__selected {
    color: #ffffff !important;
}

/* Dropdown list */
html.dark .select2-dropdown,
html.dark .vs__dropdown-menu {
    background-color: #0b1220 !important;
    color: #e5e7eb !important;
}

/* Dropdown option hover */
html.dark .select2-results__option--highlighted,
html.dark .vs__dropdown-option--highlight {
    background-color: #1e293b !important;
    color: #ffffff !important;
}

/* ---------------------------
   FORM FOOTER (BOTTOM WHITE AREA)
   --------------------------- */
html.dark .form-footer,
html.dark .step-footer,
html.dark .card-footer,
html.dark .post-ad-footer {
    background-color: #020617 !important;
    border-top: 1px solid #1e293b !important;
}

/* ---------------------------
   MESSAGE EMPTY STATE IMAGE
   --------------------------- */
html.dark .empty-message,
html.dark .no-message,
html.dark .chat-empty {
    background: transparent !important;
}

/* =====================================================
   🔥 HARD OVERRIDE — UNDO BROKEN :has() DARK RULES
   ===================================================== */

/* -----------------------------
   1️⃣ AD DETAILS PAGE FIX
   ----------------------------- */

/* Title bar above image */
html.dark .ad-details-title,
html.dark .ad-title,
html.dark h1.ad-title,
html.dark .details-title {
    background-color: #020617 !important;
    color: #f8fafc !important;
    padding: 12px 16px;
    border-radius: 8px;
}

/* Image container (NO overlay, NO white) */
html.dark .ad-gallery,
html.dark .ad-images,
html.dark .swiper-container,
html.dark .image-wrapper {
    background-color: #020617 !important;
    background-image: none !important;
}

/* Kill dark pseudo overlays ONLY */
html.dark .ad-gallery::before,
html.dark .ad-gallery::after,
html.dark .image-wrapper::before,
html.dark .image-wrapper::after {
    content: none !important;
    display: none !important;
}


/* -----------------------------
   2️⃣ POST AD FORM FIX
   ----------------------------- */

/* Entire form wrapper */
html.dark .post-ad-form,
html.dark .sell-form,
html.dark .form-card {
    background-color: #0b1220 !important;
}

/* Bottom white footer (Save & Next area) */
html.dark .form-footer,
html.dark .step-footer,
html.dark .post-ad-footer,
html.dark .bg-white:has(button) {
    background-color: #020617 !important;
    background-image: none !important;
    border-top: 1px solid #1e293b !important;
}

/* Ensure buttons stay correct */
html.dark .form-footer button,
html.dark .step-footer button {
    background-color: #2563eb !important;
    color: #ffffff !important;
}


/* -----------------------------
   3️⃣ DROPDOWN (FINAL POLISH)
   ----------------------------- */

/* Selected value text */
html.dark .vs__selected,
html.dark .select2-selection__rendered {
    color: #ffffff !important;
}

/* Dropdown menu */
html.dark .vs__dropdown-menu,
html.dark .select2-dropdown {
    background-color: #0b1220 !important;
    border: 1px solid #1e293b !important;
}

/* Options */
html.dark .vs__dropdown-option,
html.dark .select2-results__option {
    color: #e5e7eb !important;
}

/* Hover */
html.dark .vs__dropdown-option--highlight,
html.dark .select2-results__option--highlighted {
    background-color: #1e293b !important;
    color: #ffffff !important;
}



/* =====================================================
   🎯 HARD OVERRIDE — EXACT CONTAINERS (NO GUESSING)
   ===================================================== */


/* Make sure text/icons stay visible */
html.dark .ad-details-page svg,
html.dark .ad-details-page span,
html.dark .ad-details-page p {
    color: #e5e7eb !important;
}



/* Button area should not inherit white */
html.dark .post-ad-page .bg-white * {
    background-color: transparent !important;
}


/* Save & Next bottom bar */
html.dark form > div.bg-white:last-child {
    background-color: #020617 !important;
}



/* =====================================================
   🎯 HARD OVERRIDE — EXACT CONTAINERS (NO GUESSING)
   ===================================================== */

/* -----------------------------
   AD DETAILS — MORE DETAILS BOX
   ----------------------------- */
html.dark .ad-details-page .bg-white,
html.dark .ad-details-page .shadow,
html.dark .ad-details-page .rounded-lg {
    background-color: #0b1220 !important;
    color: #e5e7eb !important;
    border-color: #1e293b !important;
}

/* Make sure text/icons stay visible */
html.dark .ad-details-page svg,
html.dark .ad-details-page span,
html.dark .ad-details-page p {
    color: #e5e7eb !important;
}

/* -----------------------------
   POST AD — FORM FOOTER (SAVE & NEXT)
   ----------------------------- */
html.dark .post-ad-page .bg-white,
html.dark .post-ad-page .rounded-b-lg,
html.dark .post-ad-page .shadow {
    background-color: #020617 !important;
    border-top: 1px solid #1e293b !important;
}

/* Button area should not inherit white */
html.dark .post-ad-page .bg-white * {
    background-color: transparent !important;
}

/* -----------------------------
   FORCE BY POSITION (LAST RESORT)
   ----------------------------- */
/* Ad details info strip */
html.dark main > div > div > div.bg-white {
    background-color: #0b1220 !important;
}

/* Save & Next bottom bar */
html.dark form > div.bg-white:last-child {
    background-color: #020617 !important;
}









/* 🚫 DISABLE OVER-BROAD :has() DARK RULES */
html.dark body:has(img[src*="/uploads"]),
html.dark body:has([class*="swiper"]),
html.dark body div:has(> img),
html.dark body div:has(> .swiper) {
    background-color: unset !important;
}

/* ✅ AD DETAILS — MORE DETAILS / CUSTOM FIELDS */
html.dark .ad-details-page .bg-white,
html.dark .ad-details-page .rounded-lg,
html.dark .ad-details-page .shadow {
    background-color: #0b1220 !important;
    border: 1px solid #1e293b !important;
    color: #e5e7eb !important;
}

/* =====================================================
   🟢 FIX CURVED OUTLINE ON AD TITLE / GALLERY
   ===================================================== */

/* The wrapper that holds title + gallery */
html.dark div[align="center"] {
    background: transparent !important; /* remove overlay */
}

/* Title bar itself (inside the curve) */
html.dark div[align="center"] > .style4 {
    display: block;
    width: 100%;
    background-color: #020617 !important;
    color: #f8fafc !important;

    padding: 12px 16px;

    /* 🔑 restore curve */
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;

    /* keep content inside curve */
    overflow: hidden;
}

/* Gallery container must clip correctly */
html.dark .swiper.galleryView {
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    overflow: hidden; /* VERY IMPORTANT */
}

/* Make sure images respect the curve */
html.dark .swiper.galleryView img {
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
}

/* =====================================================
   🔥 FINAL FIX — REMOVE WHITE STRIP UNDER IMAGE (REAL)
   ===================================================== */

/* Image container (empty space under image) */
html.dark .galleryView,
html.dark .swiper.galleryView,
html.dark #main-gallery {
    background-color: #020617 !important;
}

/* Slide background */
html.dark .galleryView .swiper-slide {
    background-color: #020617 !important;
}

/* 🔴 THIS IS THE WHITE LINE SOURCE — FIX IT */
html.dark .galleryList,
html.dark .swiper.galleryList,
html.dark #thumbs-gallery {
    background-color: #020617 !important;
    border-top: none !important;
}

/* Kill light borders on thumbnails */
html.dark .galleryList .swiper-slide {
    background-color: #020617 !important;
    border: 1px solid #1e293b !important; /* dark border */
}

/* Remove spacing illusion */
html.dark .swiper.galleryList {
    margin-top: 0 !important;
}

/* Ensure no bleed-through */
html.dark .galleryView + .galleryList {
    background-color: #020617 !important;
}









/* =====================================================
   🧩 FINAL GALLERY EDGE FIX — ALL CORNERS PERFECT
   ===================================================== */

/* 🔒 OUTERMOST VISUAL CONTAINER (TITLE + IMAGE + THUMBS) */
html.dark .galleryView,
html.dark #main-gallery {
    background-color: #020617 !important;

    /* ALL corners */
    border-radius: 14px !important;

    /* CRITICAL: clip everything inside */
    overflow: hidden !important;
}

/* 🔒 Thumbnail container must follow same curve */
html.dark .galleryList,
html.dark #thumbs-gallery {
    background-color: #020617 !important;

    border-bottom-left-radius: 14px !important;
    border-bottom-right-radius: 14px !important;

    overflow: hidden !important;
}

/* 🔒 Slides & wrappers inherit cleanly */
html.dark .swiper-wrapper,
html.dark .swiper-slide {
    background-color: transparent !important;
}

/* 🔒 Kill any remaining light borders */
html.dark .galleryList .swiper-slide {
    border: 1px solid #1e293b !important;
    background-color: #020617 !important;
}

/* 🚫 FIX WHITE CORNERS CAUSED BY NAV ARROWS */
html.dark .swiper-button-prev,
html.dark .swiper-button-next {
    background-color: rgba(0,0,0,0.45) !important;
    border-radius: 999px;
}

/* Ensure arrows stay INSIDE clipped area */
html.dark .swiper-button-prev,
html.dark .swiper-button-next {
    top: 50%;
    transform: translateY(-50%);
}

/* 🚫 ABSOLUTE SAFETY — NO LIGHT BLEED */
html.dark .galleryView::before,
html.dark .galleryView::after {
    display: none !important;
    content: none !important;
}

/* =====================================================
   🔥 FINAL OVERRIDE — CUSTOM FIELD BACKGROUND (TAILWIND SAFE)
   ===================================================== */

/* Override Tailwind bg-primary-50 computed color */
html.dark [style*="--tw-bg-opacity"],
html.dark .bg-primary-50 {
    --tw-bg-opacity: 1 !important;
    background-color: #0b1220 !important;
}

/* Borders */
html.dark .bg-primary-50 {
    border-color: #1e293b !important;
}

/* Text inside custom fields */
html.dark .bg-primary-50 *,
html.dark [style*="--tw-bg-opacity"] * {
    color: #e5e7eb !important;
}

/* Icons */
html.dark .bg-primary-50 i {
    color: #60a5fa !important;
}



/* =====================================================
   ⚠️ DARK MODE — SAFETY WARNING BOX
   ===================================================== */

/* Main warning container */
html.dark .bg-yellow-100 {
    background-color: #0f172a !important; /* dark slate */
    border: 1px solid #334155 !important;
}

/* Warning text */
html.dark .bg-yellow-100,
html.dark .bg-yellow-100 p,
html.dark .bg-yellow-100 span {
    color: #f8fafc !important;
}

/* Warning icon */
html.dark .bg-yellow-100 svg {
    color: #facc15 !important; /* soft yellow icon */
}

/* "Learn more" link */
html.dark .bg-yellow-100 a {
    color: #60a5fa !important;
}


/* =====================================================
   🧹 DARK MODE — SELLER REVIEWS BACKGROUND BLEED FIX
   ===================================================== */

/* Parent container that causes the bleed */
html.dark [x-show="showReview"] {
    background-color: #020617 !important;
    border-color: #1e293b !important;
    border-radius: 12px !important; /* keep curve */
    overflow: hidden !important;    /* 🔑 removes triangle bleed */
}

/* When review panel is hidden, kill residual paint */
html.dark [x-show="showReview"]:not([style*="display: block"]) {
    background-color: transparent !important;
    border-color: transparent !important;
}

/* Seller Reviews / Rate Seller row */
html.dark button:has(span),
html.dark button:has(text),
html.dark a:has(span) {
    background-color: transparent !important;
}

/* Ensure text buttons NEVER get background */
html.dark .underline {
    background-color: transparent !important;
}



/* =====================================================
   🔗 DARK MODE — SOCIAL SHARE BUTTONS
   ===================================================== */

/* Wrapper spacing text */
html.dark .details-footer span {
    color: #e5e7eb !important;
}

/* ===============================
   COPY LINK BUTTON
   =============================== */
html.dark .details-footer button {
    background-color: #0f172a !important;
    border: 1px solid #1e293b !important;
    color: #e5e7eb !important;
    border-radius: 8px !important;
}

/* Copy button hover */
html.dark .details-footer button:hover {
    background-color: #020617 !important;
    border-color: #2563eb !important;
}

/* Copy icon + text */
html.dark .details-footer button svg,
html.dark .details-footer button span {
    color: #e5e7eb !important;
    fill: #e5e7eb !important;
}

/* ===============================
   SOCIAL ICON BUTTONS
   =============================== */
html.dark .details-footer .btn-social {
    background-color: #0f172a !important;
    border: 1px solid #1e293b !important;
    border-radius: 8px !important;
    padding: 8px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Social icons color */
html.dark .details-footer .btn-social svg {
    fill: #e5e7eb !important;
}

/* Hover effect */
html.dark .details-footer .btn-social:hover {
    background-color: #020617 !important;
    border-color: #2563eb !important;
}

/* Hover icon accent */
html.dark .details-footer .btn-social:hover svg {
    fill: #60a5fa !important;
}

/* ===============================
   REMOVE ANY LIGHT BLEED
   =============================== */
html.dark .details-footer ul,
html.dark .details-footer li {
    background: transparent !important;
}

/* =====================================================
   ✅ RESTORE ROUNDED ELEMENTS (PROFILE IMAGES, BUTTONS)
   ===================================================== */

/* Always keep avatars circular */
html.dark img.rounded-full,
html.dark .avatar,
html.dark .profile-image {
    border-radius: 9999px !important;
}

/* Preserve normal rounded corners */
html.dark .rounded-lg {
    border-radius: 0.5rem !important;
}

html.dark .rounded-md {
    border-radius: 0.375rem !important;
}

/* Buttons & pills */
html.dark button,
html.dark .btn,
html.dark .btn-social {
    border-radius: 0.5rem;
}


/* =====================================================
   🔵 HEADER — POST BUTTON (DARK MODE)
   ===================================================== */

html.dark .header-main a[href*="post"] {
    background-color: #2563eb !important; /* blue */
    color: #ffffff !important;
    border: none !important;
}

html.dark .header-main a[href*="post"]:hover {
    background-color: #1d4ed8 !important;
}

html.dark .header-main a[href*="post"] svg,
html.dark .header-main a[href*="post"] span {
    color: #ffffff !important;
    fill: #ffffff !important;
}




/* =====================================================
   🔍 HEADER SEARCH — RESTORE CURVES & CLEAN OUTLINE
   ===================================================== */

/* Main search wrapper */
html.dark .header-main input,
html.dark .header-main select {
    background-color: #020617 !important;
    border: 1px solid #1e293b !important;
    color: #e5e7eb !important;
    border-radius: 999px !important; /* pill shape */
    outline: none !important;
    box-shadow: none !important;
}

/* Search container (Livewire wrapper) */
html.dark .header-main form,
html.dark .header-main .search-box,
html.dark .header-main [class*="search"] {
    background-color: transparent !important;
    border-radius: 999px !important;
}

/* Remove hard separators */
html.dark .header-main input + input,
html.dark .header-main input + select {
    border-left: 1px solid #1e293b !important;
}

/* Search button */
html.dark .header-main button[type="submit"] {
    background-color: #0f172a !important;
    color: #e5e7eb !important;
    border-radius: 999px !important;
    border: 1px solid #1e293b !important;
}

html.dark .header-main button[type="submit"]:hover {
    background-color: #020617 !important;
    border-color: #2563eb !important;
}


/* =====================================================
   🔵 PRESERVE INTENTIONAL RADIUS
   ===================================================== */

/* Avatars stay round */
html.dark img.rounded-full {
    border-radius: 9999px !important;
}

/* Cards */
html.dark .rounded-lg {
    border-radius: 0.5rem !important;
}

/* Buttons / inputs */
html.dark .rounded-md {
    border-radius: 0.375rem !important;
}


/* =====================================================
   💰 AFFILIATE SYSTEM — FORCE BRAND BLUE (FINAL)
   ===================================================== */

/* Header top bar */
html.dark .header-top {
    background-color: #2563eb !important; /* same as light mode */
    border-bottom-color: #2563eb !important;
}

/* Text inside */
html.dark .header-top,
html.dark .header-top * {
    color: #ffffff !important;
}

/* Neutralize earlier dark nukes */
html.dark .header-top[class*="bg"] {
    background-color: #2563eb !important;
}

/* =====================================================
   🔵 HEADER — AUTH BUTTONS (FINAL, CORRECT)
   ===================================================== */

/* ---------------------------
   SIGN UP — SOLID BLUE
   --------------------------- */
html.dark .header-main a[href*="sign-up"],
html.dark .header-main a[href*="register"] {
    background-color: #2563eb !important; /* blue */
    color: #ffffff !important;
    border: none !important;
}

/* Hover */
html.dark .header-main a[href*="sign-up"]:hover,
html.dark .header-main a[href*="register"]:hover {
    background-color: #1d4ed8 !important;
}

/* ---------------------------
   SIGN IN — DARK BG + BLUE OUTLINE
   --------------------------- */
html.dark .header-main a[href*="login"],
html.dark .header-main a[href*="sign-in"] {
    background-color: #020617 !important; /* dark background */
    color: #2563eb !important;            /* blue text */
    border: 1.5px solid #2563eb !important;
}

/* Hover */
html.dark .header-main a[href*="login"]:hover,
html.dark .header-main a[href*="sign-in"]:hover {
    background-color: #020617 !important;
    border-color: #1d4ed8 !important;
    color: #1d4ed8 !important;
}

/* ---------------------------
   ICONS INSIDE AUTH BUTTONS
   --------------------------- */
html.dark .header-main a[href*="sign"] svg,
html.dark .header-main a[href*="login"] svg {
    fill: currentColor !important;
    color: currentColor !important;
}


/* =====================================================
   🔍 HEADER SEARCH BUTTON — MOBILE & DESKTOP (FINAL)
   ===================================================== */

/* Any search button inside header search area */
html.dark .header-main form button,
html.dark .header-main .search button,
html.dark .header-main [class*="search"] button {
    background-color: #2563eb !important; /* blue */
    color: #ffffff !important;
    border: none !important;
}

/* Hover */
html.dark .header-main form button:hover,
html.dark .header-main .search button:hover,
html.dark .header-main [class*="search"] button:hover {
    background-color: #1d4ed8 !important;
}

/* Icons inside search button */
html.dark .header-main form button svg,
html.dark .header-main form button i,
html.dark .header-main .search button svg,
html.dark .header-main .search button i {
    color: #ffffff !important;
    fill: #ffffff !important;
}
/* =====================================================
   🔍 HEADER — SEARCH BUTTON (DESKTOP + MOBILE)
   ===================================================== */

/* Desktop search button */
html.dark .header-main button[type="submit"],

/* Mobile search button (fallbacks) */
html.dark .header-main .search button,
html.dark .header-main .search-btn,
html.dark .header-main [class*="search"] button,
html.dark .header-main a[class*="search"] {
    background-color: #2563eb !important; /* blue */
    color: #ffffff !important;
    border: none !important;
}

/* Hover */
html.dark .header-main button[type="submit"]:hover,
html.dark .header-main .search button:hover,
html.dark .header-main .search-btn:hover,
html.dark .header-main [class*="search"] button:hover,
html.dark .header-main a[class*="search"]:hover {
    background-color: #1d4ed8 !important;
}

/* Icons inside search button (desktop + mobile) */
html.dark .header-main button svg,
html.dark .header-main button i,
html.dark .header-main a[class*="search"] svg,
html.dark .header-main a[class*="search"] i {
    color: #ffffff !important;
    fill: #ffffff !important;
}


/* =====================================================
   🔵 MOBILE STICKY SEARCH BUTTON — FORCE BLUE
   ===================================================== */

/* Mobile-only sticky search submit button */
#search-container button[type="submit"] {
    background-color: #2563eb !important; /* primary blue */
    color: #ffffff !important;
    border: none !important;
}

/* Hover */
#search-container button[type="submit"]:hover {
    background-color: #1d4ed8 !important;
}

/* Icon/text inside */
#search-container button[type="submit"] *,
#search-container button[type="submit"] svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Ensure dark mode does NOT override it */
html.dark #search-container button[type="submit"] {
    background-color: #2563eb !important;
    color: #ffffff !important;
}

/* =====================================================
   🌙 POST AD STEP 1 — CLEAN FIX (NO BUTTON DAMAGE)
   ===================================================== */

/* Dark background ONLY for the footer container */
html.dark .post-footer {
    background-color: #020617 !important;
    border-top: 1px solid #1e293b !important;

    /* keep spacing */
    padding: 1.5rem !important;
}

/* ❌ DO NOT TOUCH BUTTON BACKGROUNDS */
html.dark .post-footer button,
html.dark .post-footer .btn,
html.dark .post-footer .btn-primary {
    background-color: unset !important; /* restores original */
    color: unset !important;
}

/* ==========================================
   🟢 RESTORE FORM CURVES (VERY IMPORTANT)
   ========================================== */

/* Main form wrapper */
html.dark form {
    border-radius: 16px !important;
    overflow: hidden; /* keeps curves clean */
}

/* Inner card/container */
html.dark .sm\:p-8,
html.dark .p-4 {
    border-radius: 16px !important;
}

/* Bottom footer must match curve */
html.dark .post-footer {
    border-bottom-left-radius: 16px !important;
    border-bottom-right-radius: 16px !important;
}




/* =====================================================
   🔵 POST AD STEP 1 — FORCE SAVE & NEXT BUTTON BLUE
   ===================================================== */

/* Only target the Save & Next button */
html.dark .post-footer .btn-primary {
    background-color: #2563eb !important; /* primary blue */
    color: #ffffff !important;
    border: none !important;
}

/* Hover state */
html.dark .post-footer .btn-primary:hover {
    background-color: #1d4ed8 !important;
}

/* Ensure text is not dimmed */
html.dark .post-footer .btn-primary span,
html.dark .post-footer .btn-primary i {
    color: #ffffff !important;
}



/* =====================================================
   🚨 DARK MODE — PRESERVE SEMANTIC COLORS (CRITICAL)
   ===================================================== */

/* 🔴 ERROR / DANGER — MUST STAY RED */
html.dark .text-red-500,
html.dark .text-red-600,
html.dark .text-red-700,
html.dark .text-red-800,
html.dark .text-danger,
html.dark .error,
html.dark .invalid-feedback,
html.dark [class*="error"],
html.dark [class*="invalid"] {
    color: #ef4444 !important; /* Tailwind red-500 */
}

/* 🟢 SUCCESS — MUST STAY GREEN */
html.dark .text-green-500,
html.dark .text-green-600,
html.dark .text-green-700,
html.dark .success,
html.dark .valid,
html.dark [class*="success"] {
    color: #22c55e !important; /* Tailwind green-500 */
}

/* 🟡 WARNING — MUST STAY YELLOW */
html.dark .text-yellow-400,
html.dark .text-yellow-500,
html.dark .text-yellow-600,
html.dark .warning,
html.dark [class*="warning"] {
    color: #facc15 !important; /* Tailwind yellow-400 */
}

/* 🔵 INFO (optional, safe) */
html.dark .text-blue-500,
html.dark .text-blue-600,
html.dark .info {
    color: #60a5fa !important;
}




/* =====================================================
   📤 STEP 2 — UPLOAD AREAS SHOULD BE DARK
   ===================================================== */

/* Dropify upload box */
html.dark .dropify-wrapper {
    background-color: #020617 !important;
    border: 1px solid #1e293b !important;
    border-radius: 8px !important;
}

html.dark .dropify-message,
html.dark .dropify-message span {
    color: #e5e7eb !important;
}

/* FilePond upload area */
html.dark .filepond--panel-root {
    background-color: #020617 !important;
    border: 1px dashed #1e293b !important;
    border-radius: 12px !important;
}

/* FilePond text + icon */
html.dark .filepond--drop-label,
html.dark .filepond--drop-label span,
html.dark .filepond--label-action {
    color: #e5e7eb !important;
}

/* =====================================================
   🟢 PRESERVE CURVED EDGES (FORMS & UPLOADS)
   ===================================================== */

html.dark .rounded-lg {
    border-radius: 0.5rem !important;
}

html.dark .rounded-xl {
    border-radius: 0.75rem !important;
}

html.dark .rounded-2xl {
    border-radius: 1rem !important;
}





/* =====================================================
   🌙 STEP 2 — UPLOAD INFO POPUP (SOFT DARK)
   ===================================================== */

html.dark #uploadMessage {
    background-color: #0f172a !important; /* soft dark */
    border: 1px solid #334155 !important;
    color: #e5e7eb !important;
}

/* Text inside popup */
html.dark #uploadMessage *,
html.dark #uploadMessage div,
html.dark #uploadMessage label {
    color: #e5e7eb !important;
}

/* OK button — visible but calm */
html.dark #uploadMessage button {
    background-color: #1e293b !important;
    color: #f8fafc !important;
}

/* Checkbox text */
html.dark #uploadMessage input[type="checkbox"] + label {
    color: #cbd5f5 !important;
}


/* =====================================================
   🧹 STEP 2 — DROPIFY MAIN PIC (REMOVE INNER BG COMPLETELY)
   ===================================================== */

/* Kill inner message background (THIS is the real culprit) */
html.dark .dropify-wrapper .dropify-message {
    background: transparent !important;
    box-shadow: none !important;
}

/* Remove any pseudo background layers */
html.dark .dropify-wrapper .dropify-message::before,
html.dark .dropify-wrapper .dropify-message::after {
    background: transparent !important;
    content: none !important;
}

/* Text + icon stay visible */
html.dark .dropify-wrapper .dropify-message p,
html.dark .dropify-wrapper .dropify-message span {
    background: transparent !important;
    color: #e5e7eb !important;
}

/* Keep upload box dark */
html.dark .dropify-wrapper {
    background-color: #0b1220 !important;
    border: 1px solid #1e293b !important;
}


/* =====================================================
   📄 MY LISTING — CARD HOVER (LIGHT BLUE)
   ===================================================== */

html.dark .hover\:listing-card-gradient:hover {
    background: linear-gradient(
        180deg,
        rgba(37, 99, 235, 0.10),
        rgba(37, 99, 235, 0.06)
    ) !important;
}


/* =====================================================
   🎯 RESTORE ORIGINAL ACTION BUTTON COLORS (FINAL)
   ===================================================== */

/* DELETE (red) */
html.dark button.bg-red-500,
html.dark button.bg-red-600,
html.dark button.bg-red-700 {
    background-color: #dc2626 !important;
    color: #ffffff !important;
    border-color: #dc2626 !important;
}

/* SOLD (green) */
html.dark button.bg-green-500,
html.dark button.bg-green-600,
html.dark button.bg-green-700 {
    background-color: #16a34a !important;
    color: #ffffff !important;
    border-color: #16a34a !important;
}

/* MARK ACTIVE (blue) */
html.dark button.bg-blue-500,
html.dark button.bg-blue-600,
html.dark button.bg-blue-700 {
    background-color: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
}

/* EDIT (yellow – inline style safe) */
html.dark button[style*="#facc15"],
html.dark button[style*="rgb(250"] {
    background-color: #facc15 !important;
    color: #000000 !important;
    border-color: #eab308 !important;
}


/* =====================================================
   ✏️ EDIT AD — STEP 2 DISABLED IMAGE SECTION (DARK MODE)
   ===================================================== */

/* Remove white/gray background from disabled image area */
html.dark .disabled-section {
    background-color: transparent !important;
    opacity: 1 !important; /* keep readable */
}

/* Make inner containers dark instead */
html.dark .disabled-section .bg-gray-50,
html.dark .disabled-section .bg-gray-100,
html.dark .disabled-section [class*="bg-gray"] {
    background-color: #0b1220 !important;
    border: 1px solid #1e293b !important;
}

/* Gallery image strip background */
html.dark .disabled-section img {
    background-color: #020617 !important;
    border-color: #1e293b !important;
}


/* =====================================================
   💼 WALLET / AFFILIATE — DARK MODE FIXES (TARGETED)
   ===================================================== */

/* ============================
   1️⃣ WARNING POPUP (SOFT DARK)
   ============================ */
html.dark #warningPopup > div {
    background-color: #0f172a !important; /* soft dark */
    border: 1px solid #334155 !important;
    color: #e5e7eb !important;
}

html.dark #warningPopup * {
    color: #e5e7eb !important;
}

/* Button inside warning */
html.dark #warningPopup button {
    background-color: #dc2626 !important;
    color: #ffffff !important;
}


/* ============================
   2️⃣ LEGACY BALANCE BOX
   ============================ */
html.dark [style*="Legacy Earnings"],
html.dark .legacy-balance,
html.dark div[style*="background-color:#e5e7eb"] {
    background-color: #0f172a !important;
    border: 1px solid #334155 !important;
}

html.dark div[style*="background-color:#e5e7eb"] * {
    color: #e5e7eb !important;
}


/* ============================
   3️⃣ DOWNLOAD VIDEO SECTION
   ============================ */
html.dark table[style*="background-color: #e6f4ff"] {
    background-color: #0f172a !important;
    border: 1px solid #2563eb !important;
}

html.dark table[style*="background-color: #e6f4ff"] td {
    color: #e5e7eb !important;
}


/* ============================
   4️⃣ DOWNLOAD BUTTON (BLUE TEXT)
   ============================ */
html.dark .download-btn {
    background-color: #020617 !important;
    color: #2563eb !important; /* BLUE TEXT */
    border: 2px solid #2563eb !important;
}

html.dark .download-btn i {
    color: #2563eb !important;
}

html.dark .download-btn:hover {
    background-color: #2563eb !important;
    color: #ffffff !important;
}

html.dark .download-btn:hover i {
    color: #ffffff !important;
}


/* ============================
   5️⃣ SOCIAL SHARE BUTTONS
   ============================ */
html.dark .btn-social {
    background-color: #0f172a !important;
    border: 1px solid #1e293b !important;
}

html.dark .btn-social svg {
    fill: #e5e7eb !important;
}

html.dark .btn-social:hover {
    background-color: #020617 !important;
    border-color: #2563eb !important;
}

html.dark .btn-social:hover svg {
    fill: #60a5fa !important;
}


/* ===============================
   LEGACY EARNINGS — DARK MODE FIX
   =============================== */

html.dark div[style*="Legacy Earnings"],
html.dark div:has(p:contains("Legacy Earnings")) {
    background-color: #1e293b !important; /* soft dark */
    color: #e5e7eb !important;
    border: 1px solid #334155 !important;
}

/* Text inside */
html.dark div:has(p:contains("Legacy Earnings")) p,
html.dark div:has(p:contains("Legacy Earnings")) h2,
html.dark div:has(p:contains("Legacy Earnings")) span {
    color: #e5e7eb !important;
}

/* Question mark badge */
html.dark div:has(p:contains("Legacy Earnings")) span.bg-white {
    background-color: #0f172a !important;
    color: #e5e7eb !important;
    border-color: #334155 !important;
}

/* ===============================
   WARNING TOOLTIP — DARK MODE
   =============================== */

html.dark .group-hover\\:block.bg-yellow-50,
html.dark span[class*="group-hover"] {
    background-color: #1e293b !important; /* soft dark */
    color: #e5e7eb !important;
    border: 1px solid #334155 !important;
}

/* Tooltip text */
html.dark .group-hover\\:block *,
html.dark span[class*="group-hover"] * {
    color: #e5e7eb !important;
}

/* ===============================
   MAIN WARNING POPUP — DARK MODE
   =============================== */

html.dark #warningPopup > div {
    background-color: #1e293b !important; /* soft dark */
    color: #e5e7eb !important;
    border: 1px solid #334155 !important;
}

/* Text inside popup */
html.dark #warningPopup * {
    color: #e5e7eb !important;
}

/* I Understand button stays red */
html.dark #warningPopup button {
    background-color: #dc2626 !important;
    color: #ffffff !important;
}

/* ===============================
   DOWNLOAD VIDEO SECTION — DARK
   =============================== */

html.dark table[style*="Gain More Impression"] {
    background-color: #0f172a !important;
    border-color: #2563eb !important;
}

html.dark table[style*="Gain More Impression"] td {
    color: #e5e7eb !important;
}

/* Download button */
html.dark .download-btn {
    background-color: transparent !important;
    color: #60a5fa !important;
    border-color: #2563eb !important;
}

/* Hover */
html.dark .download-btn:hover {
    background-color: #2563eb !important;
    color: #ffffff !important;
}

/* ===============================
   SOCIAL SHARE BUTTONS — DARK
   =============================== */

html.dark .btn-social {
    background-color: #0f172a !important;
    border: 1px solid #1e293b !important;
}

html.dark .btn-social svg {
    fill: #e5e7eb !important;
}

html.dark .btn-social:hover {
    background-color: #020617 !important;
    border-color: #2563eb !important;
}

/* =========================================================
   SIGNUP CONFIRMATION POPUP – DARK FIX
========================================================= */

/* Popup body */
div[role="dialog"],
.confirm-modal,
.confirm-popup {
    background: #0b1220 !important;
    border-radius: 14px !important;
    padding: 22px 24px !important;
}

/* Email & Phone boxes inside popup */
div[role="dialog"] .bg-blue-50,
div[role="dialog"] .bg-gray-100,
div[role="dialog"] .bg-slate-100 {
    background: #111827 !important;
    color: #e5e7eb !important;
    border: 1px solid #1f2937 !important;
    border-radius: 8px !important;
}

/* Text inside email / phone */
div[role="dialog"] .text-gray-400,
div[role="dialog"] .text-gray-500 {
    color: #9ca3af !important;
}


/* =========================================================
   SIGN UP BUTTON – FORCE BLUE
========================================================= */

button[type="submit"],
.signup button[type="submit"],
form[action*="register"] button[type="submit"] {
    background: #2563eb !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    height: 48px !important;
    font-weight: 600 !important;
}

button[type="submit"]:hover {
    background: #1d4ed8 !important;
}


/* =========================================================
   INPUT SPACING – TOO CLOSE TO CONTAINER FIX
========================================================= */

form[action*="register"] {
    padding: 26px 24px !important;
}

form[action*="register"] input {
    margin-bottom: 14px !important;
}


/* =========================================================
   "ALREADY HAVE AN ACCOUNT ? SIGN IN" FIX
========================================================= */

form[action*="register"] + div,
form[action*="register"] ~ div:last-child {
    text-align: center !important;
    margin-top: 18px !important;
    padding-top: 14px !important;
    border-top: 1px solid #1f2937 !important;
}

form[action*="register"] + div a,
form[action*="register"] ~ div:last-child a {
    color: #3b82f6 !important;
    font-weight: 600 !important;
}

form[action*="register"] + div a:hover {
    text-decoration: underline !important;
}

/* =====================================================
   SIGN UP CONFIRMATION POPUP – FORCE DARK MODE
   (NO BLADE EDITS)
===================================================== */

/* Popup main white container */
#confirm-overlay > div {
    background: #0b1220 !important; /* dark navy */
    color: #e5e7eb !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6) !important;
}

/* ===== TOP WARNING BOX ===== */
#confirm-overlay .shake-alert {
    background: #111827 !important; /* dark, but not too dark */
    color: #f9fafb !important;
    border: 1px solid #1f2937 !important;
}

/* ===== EMAIL & PHONE INFO BOXES ===== */
#confirm-overlay div[style*="background:#E8F1FF"] {
    background: #0f172a !important;
    border: 1px solid #1e293b !important;
}

/* Labels: Email / Phone */
#confirm-overlay div[style*="background:#E8F1FF"] p:first-child {
    color: #9ca3af !important;
}

/* Actual email & phone values */
#confirm-overlay #confirm-email,
#confirm-overlay #confirm-phone {
    color: #60a5fa !important; /* blue text */
}

/* ===== KEEP BUTTON COLORS AS THEY ARE ===== */
/* (explicitly do NOTHING to buttons) */
#edit-details-btn,
#yes-continue-btn {
    all: unset;
    display: block;
}

/* =====================================================
   🔐 SIGN UP CONFIRMATION POPUP — DARK MODE FIX
   ===================================================== */

/* Popup outer card */
#confirm-overlay > div {
    background-color: #0b1220 !important; /* soft dark */
    color: #e5e7eb !important;
}

/* WARNING HEADER */
#confirm-overlay .shake-alert {
    background-color: #1e293b !important; /* dark yellow substitute */
    color: #facc15 !important;            /* warning yellow text */
}

/* EMAIL + PHONE INFO BOXES */
#confirm-overlay div[style*="background:#E8F1FF"] {
    background-color: #020617 !important;
    border: 1px solid #1e293b !important;
}

#confirm-overlay #confirm-email,
#confirm-overlay #confirm-phone {
    color: #60a5fa !important; /* light blue */
}

/* Labels inside popup */
#confirm-overlay p {
    color: #94a3b8 !important;
}

/* =========================
   BUTTONS
   ========================= */

/* EDIT DETAILS — MUST BE BLUE */
#edit-details-btn {
    background-color: #2563eb !important;
    color: #ffffff !important;
    border: none !important;
}

#edit-details-btn:hover {
    background-color: #1d4ed8 !important;
}

/* YES, CONTINUE — keep original look */
#yes-continue-btn {
    background-color: transparent !important;
    color: #2563eb !important;
    border: 2px solid #2563eb !important;
}

#yes-continue-btn:hover {
    background-color: rgba(37, 99, 235, 0.1) !important;
}

/* =====================================================
   📧 EMAIL SUGGESTION BOX (LIGHT BLUE, NOT WHITE)
   ===================================================== */

#email-suggestion-box {
    background-color: #e6f0ff !important; /* light blue */
    border: 1px solid #93c5fd !important;
    color: #1d4ed8 !important;
}

#email-suggestion-box strong {
    color: #1d4ed8 !important;
}


/* =========================================================
   🌙 VERIFY EMAIL PAGE — DARK MODE FIXES
   ========================================================= */

/* ---------- PAGE BACKGROUND ---------- */
html.dark .min-h-\[80vh\] {
    background: radial-gradient(circle at top, #0b1220, #020617) !important;
}

/* ---------- MAIN CARD ---------- */
html.dark .auth-card {
    background: linear-gradient(180deg, #0f172a, #020617) !important;
    border: 1px solid rgba(255,255,255,0.08);
}

/* ---------- EMAIL DISPLAY BOX ---------- */
html.dark #email-box {
    background-color: #e6f0ff !important;   /* light blue */
    border: 1px solid #93c5fd !important;
    color: #1d4ed8 !important;
}

/* ---------- CONFIRMATION POPUP (WHITE → DARK) ---------- */
html.dark #confirm-overlay > div {
    background: linear-gradient(180deg, #0f172a, #020617) !important;
    border: 1px solid rgba(255,255,255,0.1);
}

/* Popup alert title box */
html.dark #confirm-overlay .shake-alert {
    background: #1f2937 !important;
    color: #fde68a !important;
}

/* Popup email info box */
html.dark #confirm-overlay div[style*="background:#E8F1FF"] {
    background: #0b1f44 !important;
    border: 1px solid #1d4ed8;
}

/* Popup email text */
html.dark #confirm-email {
    color: #93c5fd !important;
}

/* ---------- BUTTONS (KEEP ORIGINAL COLORS) ---------- */
html.dark #edit-details-btn {
    background: #2563eb !important; /* blue */
    color: #fff !important;
}

html.dark #yes-continue-btn {
    background: transparent !important;
    color: #60a5fa !important;
    border-color: #2563eb !important;
}

/* ---------- NEED HELP / CONTACT US BOX ---------- */
html.dark div[style*="background-color: #fff9c4"] {
    background-color: #facc15 !important; /* darker yellow */
    border: 1px solid #eab308 !important;
}

/* Need Help text */
html.dark div[style*="background-color: #fff9c4"] span {
    color: #713f12 !important;
}

/* Contact Us link */
html.dark div[style*="background-color: #fff9c4"] a {
    color: #1d4ed8 !important;
    font-weight: 700;
}


/* =====================================================
   🔵 VERIFY EMAIL — EDIT EMAIL BUTTON FIX
   ===================================================== */

/* DONE button — solid brand blue */
html.dark #done-button {
    background-color: #2563eb !important; /* primary blue */
    color: #ffffff !important;
    border: none !important;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 600;
}

html.dark #done-button:hover {
    background-color: #1d4ed8 !important; /* darker blue */
}

/* CANCEL button — lighter blue */
html.dark #cancel-edit-email {
    background-color: #e0edff !important; /* light blue */
    color: #1d4ed8 !important;
    border: 1px solid #93c5fd !important;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 500;
    
}

/* =====================================================
   💰 WALLET — WARNING TOOLTIP (SOFT DARK)
   ===================================================== */

/* Tooltip container */
html.dark .group-hover\:block.bg-yellow-50,
html.dark .group-hover\:block.bg-yellow-100,
html.dark [class*="tooltip"][class*="yellow"] {
    background-color: #1e293b !important; /* soft dark slate */
    border: 1px solid #334155 !important;
    color: #e5e7eb !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.45) !important;
}

/* Tooltip text */
html.dark .group-hover\:block.bg-yellow-50 *,
html.dark .group-hover\:block.bg-yellow-100 * {
    color: #e5e7eb !important;
}

/* Emphasized WARNING text */
html.dark .group-hover\:block.bg-yellow-50 strong,
html.dark .group-hover\:block.bg-yellow-100 strong {
    color: #facc15 !important; /* warning yellow */
}

/* =====================================================
   💙 WALLET — CONVERT TO ACCOUNT BALANCE (DARK MODE)
   Softer light-blue text & outline
   ===================================================== */

html.dark button.heading-07.text-primary-500 {
    background-color: rgba(96, 165, 250, 0.18) !important; /* very soft light blue */
    color: #60a5fa !important;                            /* lighter blue text */
    border: 1.5px solid #60a5fa !important;               /* lighter blue outline */
    padding: 10px 16px;
    border-radius: 6px;
}

/* Hover: slightly clearer but still soft */
html.dark button.heading-07.text-primary-500:hover {
    background-color: rgba(96, 165, 250, 0.28) !important;
    color: #93c5fd !important;                            /* even lighter blue */
    border-color: #93c5fd !important;
}

/* =====================================================
   🔵 AFFILIATE TABLE — FOLLOW UP BUTTON (DARK MODE)
   ===================================================== */

html.dark button[style*="background-color:#2563eb"] {
    background-color: #2563eb !important; /* blue */
    color: #ffffff !important;
    border: none !important;
}


html.dark button[style*="background-color:#2563eb"]:hover {
    background-color: #1d4ed8 !important; /* darker blue */
}

/* =====================================================
   💰 WALLET — STATUS & ACTION FIXES (DARK MODE)
   ===================================================== */

/* =========================
   ✅ READY STATUS — LIGHT GREEN
   ========================= */
html.dark td span {
    /* reset first (safety) */
    background-color: transparent;
}

html.dark td span:where(:contains("Ready")) {
    background-color: #dcfce7 !important; /* light green */
    color: #16a34a !important;            /* green text */
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 500;
    display: inline-block;
}


/* =========================
   🚫 DISABLED CONVERT BUTTON — GREY
   ========================= */
html.dark button[disabled],
html.dark button[style*="cursor:not-allowed"],
html.dark button.bg-gray-400,
html.dark button.bg-gray-500 {
    background-color: #6b7280 !important; /* grey */
    color: #e5e7eb !important;
    border: none !important;
    cursor: not-allowed !important;
    opacity: 1 !important; /* prevent Tailwind dim */
}

/* Ensure hover does NOT turn blue */
html.dark button[disabled]:hover,
html.dark button.bg-gray-400:hover,
html.dark button.bg-gray-500:hover {
    background-color: #6b7280 !important;
    color: #e5e7eb !important;
}


/* =====================================================
   💰 WALLET — STATUS COLUMN (FINAL, EXACT BEHAVIOR)
   ===================================================== */

/* 1️⃣ RESET: STATUS column should NOT be green by default */
html.dark td:nth-child(3) span {
    background: none !important;
    color: #e5e7eb !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* 2️⃣ REMAINS — explicitly neutral (NO green) */
html.dark td:nth-child(3) span.bg-primary-50 {
    background-color: transparent !important;
    color: #60a5fa !important; /* soft blue text like light mode */
    padding: 2px 6px !important;
    border-radius: 6px !important;
}

/* =====================================================
   💰 WALLET — STATUS BADGES (FINAL FIX)
   ===================================================== */

/* READY badge only */
html.dark .text-success-500.bg-success-50 {
    background-color: transparent !important; /* ❌ remove bg */
    color: #22c55e !important;                 /* ✅ green text */
    border: 1px solid #22c55e !important;      /* subtle green outline */
    border-radius: 9999px !important;          /* keep curve */
    padding: 2px 10px !important;
    font-weight: 600 !important;
}

/* ⚪ REMAINS — MUST BE GREY */
html.dark .text-primary-500.bg-primary-50 {
    background-color: #374151 !important; /* grey */
    color: #e5e7eb !important;
    border: 1px solid #4b5563 !important;
}


/* =====================================================
   🤝 AFFILIATE FOLLOW-UP POPUP — DARK MODE
   ===================================================== */

/* Popup card (inner white box → dark) */
html.dark div[id^="followup-"] > div {
    background-color: #020617 !important; /* deep dark */
    color: #e5e7eb !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

/* Heading text */
html.dark div[id^="followup-"] h3 {
    color: #cbd5f5 !important;
}

/* Name text */
html.dark div[id^="followup-"] div[style*="font-size:20px"] {
    color: #f8fafc !important;
}

/* Close (×) button */
html.dark div[id^="followup-"] button[aria-label="Close"] {
    color: #e5e7eb !important;
}

/* Email follow-up button (light bg → dark bg) */
html.dark div[id^="followup-"] a[href^="mailto"] {
    background-color: #020617 !important;
    color: #e5e7eb !important;
    border: 1px solid #334155 !important;
}

/* Keep WhatsApp & Call colors intact */
html.dark div[id^="followup-"] a[href*="whatsapp"],
html.dark div[id^="followup-"] a[href^="tel"] {
    filter: none !important;
}


/* =====================================================
   🔵 UPGRADE PLAN BUTTON — DARK MODE
   ===================================================== */

html.dark .action .btn-secondary {
    background-color: rgba(37, 99, 235, 0.15) !important; /* light blue */
    color: #60a5fa !important;                           /* blue text */
    border: 1.5px solid #2563eb !important;              /* blue outline */
}

/* Hover effect */
html.dark .action .btn-secondary:hover {
    background-color: rgba(37, 99, 235, 0.25) !important;
    color: #93c5fd !important;
    border-color: #3b82f6 !important;
}



/* =====================================================
   🌙 VERIFY ACCOUNT — INLINE STYLE DARK MODE OVERRIDES
   ===================================================== */

/* ---------- TOP VERIFIED BADGE BOX ---------- */
html.dark table[style*="background-color: #eff6ff"] {
    background-color: #0b1220 !important;
    border-color: #2563eb !important;
}

html.dark table[style*="background-color: #eff6ff"] * {
    color: #e5e7eb !important;
}

/* ---------- STEP CARDS (1st / 2nd Step) ---------- */
html.dark table[style*="background-color: #f9fafb"] {
    background-color: #0b1220 !important;
    border-color: #1e293b !important;
}

html.dark table[style*="background-color: #f9fafb"] * {
    color: #cbd5f5 !important;
}

/* Step headers (blue bars stay blue) */
html.dark div[style*="background-color: #3b82f6"],
html.dark div[style*="background-color: #5591ED"] {
    background-color: #2563eb !important;
    color: #ffffff !important;
}

/* ---------- IMAGE PREVIEW / UPLOAD BOX ---------- */
html.dark .bg-gray-50,
html.dark div[style*="background:#fff"],
html.dark div[style*="background: #fff"] {
    background-color: #020617 !important;
    border-color: #1e293b !important;
}

/* Example ID image wrapper */
html.dark img[alt="Example ID"] {
    background-color: #020617 !important;
    border-color: #1e293b !important;
}

/* ---------- FILE SELECT BUTTON ---------- */
html.dark label.bg-gray-100 {
    background-color: #0f172a !important;
    border-color: #1e293b !important;
    color: #e5e7eb !important;
}

html.dark label.bg-gray-100:hover {
    background-color: #020617 !important;
}

/* ---------- RIGHT SIDE INPUTS ---------- */
html.dark .tc-input {
    background-color: #020617 !important;
    color: #e5e7eb !important;
    border-color: #1e293b !important;
}

/* ---------- SUBMIT / STATUS TEXT ---------- */
html.dark span[style*="color: #039B2C"] {
    color: #22c55e !important;
}

/* ---------- REMOVE SHADOW BLEED ---------- */
html.dark .shadow,
html.dark .shadow-sm {
    box-shadow: 0 8px 30px rgba(0,0,0,0.45) !important;
}


/* =====================================================
   🌙 VERIFY ACCOUNT — UPLOAD PROFILE PICS BUTTON ONLY
   ===================================================== */

/* Target ONLY the Upload Profile Pics button */
html.dark a[href*="account-setting"][style*="Upload Profile Pics"],
html.dark a[href*="account-setting"] {
    background-color: #020617 !important;   /* dark */
    color: #60a5fa !important;              /* soft blue text */
    border: 1.5px solid #2563eb !important; /* blue outline */
}

/* Hover (still subtle) */
html.dark a[href*="account-setting"]:hover {
    background-color: #0b1220 !important;
    border-color: #1d4ed8 !important;
    color: #93c5fd !important;
}


/* =====================================================
   🌙 MY INTERESTED ITEMS — NOTICE BOX (DARK MODE)
   ===================================================== */

/* Very light yellow info box */
html.dark div[style*="background-color: #fff3cd"] {
    background-color: #2a2618 !important;   /* very soft dark yellow */
    border-color: #6b5e00 !important;
    color: #fde68a !important;              /* light yellow text */
}

/* Text inside */
html.dark div[style*="background-color: #fff3cd"] p {
    color: #fde68a !important;
}


/* =====================================================
   🌙 COMMENT LABEL ONLY — RED (DARK MODE)
   ===================================================== */

/* ONLY the "comment:" label */
html.dark span.style1 {
    color: #ef4444 !important; /* Tailwind red-500 */
}


/* =====================================================
   🌙 AD PRICE — FORCE WHITE (DARK MODE)
   ===================================================== */

/* Price text (Contact for price / Free Item / Amount) */
html.dark h5.heading-05.text-error-500 {
    color: #ffffff !important;
}