/* =====================================================
   🌙 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 */
html.dark div[role="dialog"],
html.dark .confirm-modal,
html.dark .confirm-popup {
    background: #0b1220 !important;
    border-radius: 14px !important;
    padding: 22px 24px !important;
}

/* ✅ SIGNUP CONFIRM POPUP — LIGHT MODE */
#confirm-overlay > div {
    background: #ffffff !important;
    color: #111827 !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 */
html.dark #confirm-overlay > div {
    background: #0b1220 !important;
    color: #e5e7eb !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;
}


/* =====================================================
   🌙 POST AD — UPGRADE REMINDER POPUP (DARK MODE)
   ===================================================== */

/* Popup container */
html.dark #uploadMessage2 {
    background-color: #0f172a !important; /* soft dark */
    border: 1px solid #334155 !important;
    color: #e5e7eb !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.65) !important;
}

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

/* Image stays clean */
html.dark #uploadMessage2 img {
    background: transparent !important;
    filter: none !important;
}

/* ===============================
   SUBSCRIBE NOW — PRIMARY
   =============================== */
html.dark #subscribeNow2 {
    background-color: #2563eb !important; /* brand blue */
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 42px !important;
    font-weight: 700 !important;
}

html.dark #subscribeNow2:hover {
    background-color: #1d4ed8 !important;
}

/* ===============================
   REMIND ME LATER — SECONDARY
   =============================== */
html.dark #laterButton2 {
    background-color: #020617 !important; /* deep dark */
    color: #cbd5f5 !important;
    border: 1px solid #334155 !important;
    border-radius: 8px !important;
    padding: 8px 38px !important;
}

html.dark #laterButton2:hover {
    border-color: #2563eb !important;
    color: #ffffff !important;
}

/* ===============================
   CHECKBOX TEXT
   =============================== */
html.dark #uploadMessage2 label {
    color: #cbd5f5 !important;
}

html.dark #uploadMessage2 input[type="checkbox"] {
    accent-color: #2563eb;
}

/* =====================================================
   🌙 HEADER PROFILE DROPDOWN — REMOVE OUTLINE (DARK)
   ===================================================== */

/* Target ONLY the profile dropdown menu */
html.dark .header-main ul {
    background-color: #020617 !important;
    border-color: #1e293b !important;
}

/* Menu links — neutral by default */
html.dark .header-main ul li a {
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* ❌ REMOVE primary-50 background on dark mode */
html.dark .header-main ul li a:hover,
html.dark .header-main ul li a:focus,
html.dark .header-main ul li a:active {
    background-color: #0f172a !important; /* soft hover */
    outline: none !important;
    box-shadow: none !important;
}

/* ❌ REMOVE focus ring / outline completely */
html.dark .header-main ul li a:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Text color stays clean */
html.dark .header-main ul li a span,
html.dark .header-main ul li a i {
    color: #e5e7eb !important;
}

/* Keep red icons red (Blocked list) */
html.dark .header-main ul li a i[style*="color: #ff0000"] {
    color: #ef4444 !important;
}


/* =====================================================
   🌙 WALLET – CONVERT EARNINGS TABLE (DARK MODE)
   Force LEFT COLUMN TEXT TO WHITE
   ===================================================== */

/* Target the convert earnings modal table */
html.dark table tbody tr td {
    color: #e5e7eb !important; /* white */
}

/* Force the red-looking inline spans to white */
html.dark table tbody tr td span,
html.dark table tbody tr td .style1 {
    color: #e5e7eb !important;
}

/* Keep STATUS badges colors intact */
html.dark .bg-success-50 {
    background-color: rgba(34,197,94,0.15) !important;
}

html.dark .text-success-500 {
    color: #22c55e !important;
}

/* "Remains" badge */
html.dark .bg-primary-50 {
    background-color: rgba(59,130,246,0.15) !important;
}

html.dark .text-primary-500 {
    color: #60a5fa !important;
}


/* =====================================================
   🌙 LISTING CARD TITLE — FORCE WHITE (DARK MODE)
   ===================================================== */

/* Ad title text */
html.dark .listing-card .style1 {
    color: #e5e7eb !important; /* white */
}

/* Also protect if wrapped in link */
html.dark .listing-card a .style1 {
    color: #e5e7eb !important;
}

/* =====================================================
   💙 PRICE PLAN – CONTINUE BUTTON (FORCE BLUE)
   ===================================================== */

/* Target Continue buttons inside pricing cards */
.price-plan-card a,
.price-plan-card button,
html.dark .price-plan-card a,
html.dark .price-plan-card button {
    background-color: #2563eb !important; /* blue-600 */
    border-color: #2563eb !important;
    color: #ffffff !important;
}

/* Hover state */
.price-plan-card a:hover,
.price-plan-card button:hover {
    background-color: #1d4ed8 !important; /* blue-700 */
    border-color: #1d4ed8 !important;
    color: #ffffff !important;
}

/* Remove outline / ghost styles */
.price-plan-card a.bg-transparent,
.price-plan-card button.bg-transparent {
    background-color: #2563eb !important;
}

/* =====================================================
   🌙 PRICE PLAN – GET STARTED BUTTON (DARK MODE)
   ===================================================== */

/* Pricing card footer button area */
html.dark .price-plan-card a,
html.dark .price-plan-card button,
html.dark .rounded-\[0\.75rem\] a,
html.dark .rounded-\[0\.75rem\] button {
    background-color: #2563eb !important; /* blue-600 */
    border-color: #2563eb !important;
    color: #ffffff !important;
}

/* Hover */
html.dark .price-plan-card a:hover,
html.dark .price-plan-card button:hover,
html.dark .rounded-\[0\.75rem\] a:hover,
html.dark .rounded-\[0\.75rem\] button:hover {
    background-color: #1d4ed8 !important; /* blue-700 */
    border-color: #1d4ed8 !important;
    color: #ffffff !important;
}

/* Remove dark/gray overrides */
html.dark .price-plan-card a.bg-gray-500,
html.dark .price-plan-card button.bg-gray-500 {
    background-color: #2563eb !important;
}

/* =====================================================
   🌙 FINAL CTA – DARK MODE BACKGROUND FIX
   ===================================================== */

html.dark .cta-area {
    background: linear-gradient(
        135deg,
        #3a2f0b,
        #2a2208
    ) !important;
    border: 1px solid rgba(234, 179, 8, 0.4);
}


/* Text inside CTA */
html.dark .cta-area h2,
html.dark .cta-area p {
    color: #fef3c7 !important; /* soft yellow-white for readability */
}

/* =====================================================
   🌙 MESSENGER – DARK MODE FIXES
   ===================================================== */

/* -----------------------------------------------------
   1️⃣ KEEP WARNING COLORS (RED & YELLOW)
----------------------------------------------------- */

/* 🔴 RED WARNING — text must stay red */
html.dark .bg-red-50 {
    background-color: #2a0f0f !important;   /* dark red bg */
    border-color: #7f1d1d !important;
}

html.dark .bg-red-50,
html.dark .bg-red-50 * {
    color: #dc2626 !important; /* red-600 text */
}

/* 🟡 YELLOW WARNING — text must stay yellow */
html.dark .bg-yellow-50 {
    background-color: #2a2208 !important;   /* dark yellow bg */
    border-color: #854d0e !important;
}

html.dark .bg-yellow-50,
html.dark .bg-yellow-50 * {
    color: #eab308 !important; /* yellow-500 text */
}

/* Link inside yellow warning */
html.dark .bg-yellow-50 a {
    color: #60a5fa !important; /* blue link */
}


/* -----------------------------------------------------
   2️⃣ LEFT MESSAGE LIST – DARKER HOVER
----------------------------------------------------- */

html.dark .chat-list li:hover {
    background-color: #020617 !important; /* darker navy */
}

/* Selected chat item */
html.dark .chat-list li.bg-primary-400 {
    background-color: #1e3a8a !important;
    color: #ffffff !important;
}


/* -----------------------------------------------------
   3️⃣ "IS THIS ITEM SOLD?" TEXT → WHITE
----------------------------------------------------- */

html.dark .animate-flash.text-primary-600,
html.dark .animate-flash {
    color: #ffffff !important;
}



/* =====================================================
   🌙 MESSENGER HEADER ICON COLORS (DARK MODE)
   ===================================================== */

/* 📞 CALL ICON */
html.dark a[title="Call"] {
  border-color: #22c55e !important; /* green-500 */
  color: #22c55e !important;
}

html.dark a[title="Call"]:hover {
  background-color: rgba(34, 197, 94, 0.15) !important;
  border-color: #16a34a !important; /* darker green */
  color: #16a34a !important;
}

/* ⚠️ REPORT ICON */
html.dark button[title="Report"] {
  border-color: #eab308 !important; /* yellow-500 */
  color: #eab308 !important;
}

html.dark button[title="Report"]:hover {
  background-color: rgba(234, 179, 8, 0.15) !important;
  border-color: #ca8a04 !important; /* darker yellow */
  color: #ca8a04 !important;
}

/* 🚫 BLOCK BUTTON */
html.dark button[title="Block user"] {
  border-color: #dc2626 !important; /* red-600 */
  color: #dc2626 !important;
}

html.dark button[title="Block user"]:hover {
  background-color: rgba(220, 38, 38, 0.12) !important;
  border-color: #b91c1c !important; /* darker red */
}

/* =====================================================
   🌙 MESSENGER TABS – REMOVE DARK BACKGROUND
   ===================================================== */

/* Remove background behind All / Unread / Spam */
html.dark .chat-list > div {
    background: transparent !important;
}

/* Ensure tabs sit on transparent background */
html.dark .chat-list .mt-3 {
    background: transparent !important;
    box-shadow: none !important;
}

/* Inactive tab text */
html.dark .chat-list button {
    background: transparent !important;
    color: #9ca3af; /* gray-400 */
}

/* Active tab (underline only, no background) */
html.dark .chat-list button.text-primary-600 {
    background: transparent !important;
    color: #60a5fa !important; /* blue-400 */
    border-color: #60a5fa !important;
}


/* =====================================================
   🌙 CHAT MESSAGE BUBBLES – PRESERVE ORIGINAL COLORS
   ===================================================== */

/* ✅ SENT MESSAGES (Right side – BLUE) */
html.dark .bg-primary-500 {
    background-color: #3B82F6 !important; /* blue-500 */
    color: #ffffff !important;
}

/* ticks inside sent bubble */
html.dark .bg-primary-500 svg {
    color: #ffffff !important;
}

/* ✅ RECEIVED MESSAGES (Left side – LIGHT BLUE) */
html.dark .bg-primary-100 {
    background-color: #DBEAFE !important; /* blue-100 */
    color: #111827 !important; /* dark text */
}

/* Audio received bubble text */
html.dark .audio-received {
    color: #111827 !important;
}

/* Prevent dark-mode overrides on message bubbles */
html.dark .bg-primary-500 *,
html.dark .bg-primary-100 * {
    filter: none !important;
    opacity: 1 !important;
}

/* =====================================================
   🌙 GLOBAL DARK MODE BACKGROUND (SOFTER)
   ===================================================== */

html.dark {
    background-color: #0f172a; /* slate-900 */
}

html.dark body {
    background-color: #0f172a;
    color: #e5e7eb; /* gray-200 */
}

/* Cards / sections */
html.dark .bg-white {
    background-color: #111827 !important; /* gray-900 */
}

/* Borders */
html.dark .border,
html.dark .border-gray-50,
html.dark .border-gray-100 {
    border-color: #1f2937 !important; /* gray-800 */
}

/* Modals */
html.dark .modal,
html.dark [role="dialog"],
html.dark .fixed.inset-0 > div {
    background-color: #111827 !important;
}


/* =====================================================
   🌙 WALLET / AFFILIATE – BUTTON & CODE FIXES (DARK MODE)
   ===================================================== */

/* -------------------------------
   1️⃣ MSG TABS (Msg 1 – Msg 5)
-------------------------------- */
html.dark #affiliate_messages button {
    background: transparent !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.6) !important;
}

html.dark #affiliate_messages button:hover {
    background: rgba(255,255,255,0.1) !important;
}

/* Active tab */
html.dark #affiliate_messages button.bg-primary-500 {
    background: transparent !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
}

/* -------------------------------
   2️⃣ SOCIAL SHARE ICON BUTTONS
-------------------------------- */
html.dark .btn-social {
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.6) !important;
}

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

html.dark .btn-social:hover {
    background: rgba(255,255,255,0.1) !important;
}

/* -------------------------------
   3️⃣ COPY / DOWNLOAD / ACTION BUTTONS
-------------------------------- */
html.dark .download-btn,
html.dark #affiliate_messages .inline-flex,
html.dark #affiliate_messages .btn-primary {
    background: transparent !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.6) !important;
    box-shadow: none !important;
}

html.dark .download-btn:hover {
    background: rgba(255,255,255,0.12) !important;
}

/* -------------------------------
   4️⃣ REMOVE BLUE BG FROM AFFILIATE CODE
-------------------------------- */
html.dark a.text-primary-500 {
    background: transparent !important;
}

/* If wrapped in a primary bg container */
html.dark .bg-primary-50 a.text-primary-500 {
    background: transparent !important;
}

/* Make affiliate code text white */
html.dark a.text-primary-500 {
    color: #ffffff !important;
}

/* =====================================================
   🌙 AFFILIATE SOCIAL ICONS – FORCE TRANSPARENT STYLE
   ===================================================== */

/* Target the exact social share icons */
html.dark #affiliate_messages ul li a {
    background-color: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    border-radius: 10px;
    padding: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* SVG icons inside */
html.dark #affiliate_messages ul li a svg {
    fill: #ffffff !important;
    color: #ffffff !important;
}

/* Hover effect (subtle) */
html.dark #affiliate_messages ul li a:hover {
    background-color: rgba(255, 255, 255, 0.12) !important;
}


/* =====================================================
   🌙 MY LISTING CARD – VIEWS BADGE FIX (DARK MODE)
   ===================================================== */

/* Force views badge text to white */
html.dark .style1,
html.dark .style1 span {
    color: #ffffff !important;
}

/* Force eye icon to white */
html.dark .style1 i,
html.dark .style1 svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Prevent parent containers from overriding it */
html.dark .absolute .style1 {
    color: #ffffff !important;
}

/* ===============================
   ✅ GLOBAL FLASH / ALERT FIX (DARK MODE)
   =============================== */

.dark .alert,
.dark .alert-success,
.dark .alert-info,
.dark .alert-warning,
.dark .alert-danger,
.dark .toast,
.dark .notification,
.dark .flash-message {
    background-color: #020617 !important; /* dark slate */
    color: #e5e7eb !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
}

/* ✅ SUCCESS (green) */
.dark .alert-success {
    border-left: 6px solid #22c55e !important;
}

.dark .alert-success h4,
.dark .alert-success strong {
    color: #22c55e !important;
}

/* ✅ ICON COLOR */
.dark .alert-success svg,
.dark .alert-success i {
    color: #22c55e !important;
}

/* ✅ Text inside */
.dark .alert-success p,
.dark .alert-success span {
    color: #e5e7eb !important;
}

/* Optional subtle glow */
.dark .alert-success {
    box-shadow: 0 0 0 1px rgba(34,197,94,0.15),
                0 8px 24px rgba(0,0,0,0.6);
}

/* =========================================
   🔥 FORCE DARK SUCCESS MESSAGES (GLOBAL)
   ========================================= */

/* Any element that looks like a success message */
.dark [class*="success"],
.dark [id*="success"],
.dark .toast,
.dark .notification,
.dark .alert,
.dark .message,
.dark .flash,
.dark .swal2-popup,
.dark .swal2-toast {
    background-color: #022c22 !important;
    color: #d1fae5 !important;
    border-color: #065f46 !important;
}

/* Force-remove white backgrounds */
.dark [style*="background: #fff"],
.dark [style*="background:#fff"],
.dark [style*="background-color: white"],
.dark [style*="background-color: #ffffff"] {
    background-color: #022c22 !important;
}

/* Icons inside success messages */
.dark .success i,
.dark .toast i,
.dark .notification i,
.dark .swal2-icon-success {
    color: #34d399 !important;
}

/* Text inside */
.dark .success *,
.dark .toast *,
.dark .notification *,
.dark .swal2-popup * {
    color: #d1fae5 !important;
}

/* SweetAlert / modal success */
.dark .swal2-popup {
    background: #020617 !important;
}

/* Remove light shadows */
.dark .toast,
.dark .alert,
.dark .notification {
    box-shadow: 0 10px 30px rgba(0,0,0,.6) !important;
}

/* 🔴 FORCE RESUBMISSION COUNT RED (DARK MODE) */
html.dark .header-main ul li a span span.text-red-500 {
    color: #ef4444 !important; /* red-500 */
    font-weight: 600;
}

/* =====================================================
   ✅ FIX: Reduce space ABOVE ad title (REAL CULPRIT)
   ===================================================== */

html.dark span.style4 {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    line-height: 1 !important;
    min-height: unset !important;
}


/* =====================================================
   🌙 ADS LIST FILTERS — DARK MODE (PRECISE)
   ===================================================== */

/* Left filter column */
html.dark [class*="filter"],
html.dark [class*="price"],
html.dark [class*="category"] {
    background-color: #0b1220 !important;
    border: 1px solid #1e293b !important;
}

/* Slider box specifically */
html.dark input[type="range"] {
    background-color: transparent !important;
}

/* Filter headings (PRICE, CATEGORY) */
html.dark [class*="filter"] h3,
html.dark [class*="filter"] h4,
html.dark [class*="filter"] span {
    color: #e5e7eb !important;
}


/* =====================================================
   🌙 ADS PAGE — REAL FIX (VERIFIED BY DEVTOOLS)
   ===================================================== */

/* ------------------------------
   1️⃣ Boosted / Latest toggle
   ------------------------------ */

/* Active label background */
html.dark label.bg-primary-50,
html.dark label.hover\:bg-primary-50,
html.dark label[class*="bg-primary-50"] {
    background-color: #0f172a !important; /* dark, not white */
    color: #e5e7eb !important;
}

/* Hover state */
html.dark label.hover\:bg-primary-50:hover {
    background-color: #1e293b !important;
}

/* ------------------------------
   2️⃣ Category / Subcategory labels
   ------------------------------ */

/* Remove pill background completely */
html.dark .active-category-filter label,
html.dark .active-category-filter span,
html.dark .active-category-filter .bg-primary-50 {
    background-color: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* Keep text readable */
html.dark .active-category-filter {
    color: #60a5fa !important;
}


/* =========================================
   🌙 ADS PAGE — CATEGORY / SUBCATEGORY STRIP
   ========================================= */

/* parent container that creates the block */
html.dark ul.flex.flex-wrap.gap-x-3.gap-y-2\.5.items-center.mb-4 {
    background-color: transparent !important;
}

/* ensure labels stay clean */
html.dark .filter-title {
    background-color: transparent !important;
    padding: 0 !important;
}

/* safety: children must not inherit bg */
html.dark ul.flex.flex-wrap.gap-x-3.gap-y-2\.5.items-center.mb-4 * {
    background-color: transparent !important;
}


/* =========================================
   🌙 ADS PAGE — BOOSTED / LATEST TOGGLE
   ========================================= */

/* active label (bg-primary-50) */
html.dark label.hover\:bg-primary-50,
html.dark label[class*="hover:bg-primary-50"] {
    background-color: #0f172a !important; /* dark */
    color: #e5e7eb !important;
}

/* hover state */
html.dark label.hover\:bg-primary-50:hover {
    background-color: #1e293b !important;
}


/* =====================================================
   🌙 Messenger – Cancel / Send (RECORDING MODE)
   Remove ALL background completely (dark mode only)
   ===================================================== */

/* Cancel button */
html.dark .chat-box__wrap button.flex.items-center.text-red-600 {
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Send button */
html.dark .chat-box__wrap button.flex.items-center.text-primary-600 {
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Safety: remove bg from icons inside */
html.dark .chat-box__wrap button.flex.items-center i,
html.dark .chat-box__wrap button.flex.items-center svg {
    background-color: transparent !important;
}


/* =====================================================
   🌙 ACTIVITIES PANEL — INVERT READ / UNREAD (DARK MODE)
   ===================================================== */

/* READ notifications (bg-white → DARKER) */
html.dark a.bg-white {
    background-color: #020617 !important; /* darkest */
}

html.dark a.bg-white:hover {
    background-color: #0b1220 !important;
}

/* UNREAD notifications (bg-blue-100 → LIGHTER) */
html.dark a.bg-blue-100 {
    background-color: #1e293b !important; /* lighter than read */
}

html.dark a.bg-blue-100:hover {
    background-color: #334155 !important;
}

/* Text clarity inside activities */
html.dark a.bg-white p,
html.dark a.bg-white span,
html.dark a.bg-blue-100 p,
html.dark a.bg-blue-100 span {
    color: #e5e7eb !important;
}


/* =====================================================
   🌙 ACTIVITIES — SWAP READ / UNREAD BACKGROUNDS ONLY
   (NO NEW COLORS, JUST INVERT EXISTING ONES)
   ===================================================== */

/* READ notifications (was lighter → make it darker) */
html.dark .fixed a.bg-white {
    background-color: #020617 !important;
}

/* UNREAD notifications (was darker → make it lighter) */
html.dark .fixed a.bg-blue-100 {
    background-color: #0b1220 !important;
}

/* Hover stays consistent */
html.dark .fixed a.bg-blue-100:hover {
    background-color: #111827 !important;
}

html.dark .fixed a.bg-white:hover {
    background-color: #0b1220 !important;
}


/* =========================================
   🌙 Dark mode — Subscribe popup red outline
   ========================================= */

html.dark #uploadMessage2 {
    border: 2px solid #F50C0C !important;
}


/* =========================================
   🌙 Dark mode — Remind Me Later button (RED)
   ========================================= */

html.dark #laterButton2 {
    background-color: #F50C0C !important;
    border: 1px solid #F50C0C !important;
    color: #ffffff !important;
}

html.dark #laterButton2:hover {
    background-color: #d40a0a !important;
}


/* ==========================================
   🌙 Dark mode — REMOVE Account Setting border
   (mobile menu)
   ========================================== */

html.dark a[href*="account-setting"] {
    border: none !important;
    background-color: transparent !important;
}


/* =====================================================
   🌙 MY LISTING (…) MENU — REMOVE TICK BACKGROUND (DARK)
   ===================================================== */

/* Target dropdown menu items ONLY */
html.dark .relative.group ul li a,
html.dark .relative.group ul li button {
    background-color: transparent !important;
}

/* Hover stays subtle (same for all items) */
html.dark .relative.group ul li a:hover,
html.dark .relative.group ul li button:hover {
    background-color: #0f172a !important;
}

/* 🔴 HARD KILL: remove background from check / tick icons */
html.dark .relative.group ul li svg,
html.dark .relative.group ul li i {
    background-color: transparent !important;
}

/* Prevent any status/badge rule from leaking */
html.dark .relative.group ul li span {
    background-color: transparent !important;
}


/* =====================================================
   ✅ FIX: VERIFIED SELLER BADGE — REMOVE GREEN BG
   ===================================================== */

/* Text-only success labels (like VERIFIED SELLER) */
html.dark .text-success-500,
html.dark .text-success-600,
html.dark .text-success-700 {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Extra safety: flex success labels */
html.dark span.text-success-500,
html.dark span.text-success-600 {
    background-color: transparent !important;
}


/* =====================================================
   🌙 DARK MODE — SWEETALERT LOGIN POPUP
   ===================================================== */

/* Main SweetAlert box */
html.dark .sweet-alert {
    background-color: #0b1220 !important;  /* deep dark */
    color: #e5e7eb !important;
    border-radius: 14px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.7) !important;
    border: 1px solid #1e293b !important;
}

/* Title */
html.dark .sweet-alert h2 {
    color: #f8fafc !important;
}

/* Message text */
html.dark .sweet-alert p {
    color: #cbd5f5 !important;
}

/* Icons background fix (warning / info circle) */
html.dark .sweet-alert .icon {
    background-color: transparent !important;
}

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

/* Cancel button */
html.dark .sweet-alert button.cancel {
    background-color: #020617 !important;
    color: #cbd5f5 !important;
    border: 1px solid #334155 !important;
    box-shadow: none !important;
}

/* Cancel hover */
html.dark .sweet-alert button.cancel:hover {
    background-color: #0f172a !important;
}

/* Confirm / Sign in button */
html.dark .sweet-alert button.confirm {
    background-color: #2563eb !important; /* brand blue */
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
}

/* Confirm hover */
html.dark .sweet-alert button.confirm:hover {
    background-color: #1d4ed8 !important;
}

/* =========================
   REMOVE LIGHT OVERLAYS
   ========================= */

/* Overlay behind popup */
html.dark .sweet-overlay {
    background-color: rgba(2, 6, 23, 0.85) !important;
}

/* =====================================================
   ✅ DARK MODE FIX — CHECKBOX TICK NOT VISIBLE
   (Free Item checkbox)
   ===================================================== */

/* Force visible tick + correct background */
html.dark input[type="checkbox"]:checked {
    background-color: #2563eb !important;   /* blue bg */
    border-color: #2563eb !important;
}

/* Force the checkmark SVG to be WHITE */
html.dark input[type="checkbox"]:checked::before {
    content: '';
}

/* Safari / Chromium tick visibility fix */
html.dark input[type="checkbox"]:checked {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}

/* Ensure unchecked box stays visible */
html.dark input[type="checkbox"] {
    background-color: #020617 !important;
    border: 1.5px solid #334155 !important;
}


/* ===== SweetAlert2 DARK MODE ===== */
.dark .swal2-popup {
    background: #0b1220 !important;
    color: #e5e7eb !important;
}

.dark .swal2-title {
    color: #f9fafb !important;
}

.dark .swal2-html-container {
    color: #d1d5db !important;
}

.dark .swal2-confirm {
    background-color: #22c55e !important;
    color: #ffffff !important;
}

.dark .swal2-cancel {
    background-color: #3b82f6 !important;
    color: #ffffff !important;
}

.dark .swal2-close {
    color: #9ca3af !important;
}


/* 🔴 Verify Email – Incorrect Email text must stay RED (dark mode) */
html.dark #email-wrong {
    color: #ef4444 !important; /* Tailwind red-500 */
}


/* =====================================================
   ✅ FIX: Selected dropdown item turns WHITE (Dark Mode)
   ===================================================== */

/* Vue-Select (vs__) — selected option */
html.dark .vs__dropdown-option--selected,
html.dark .vs__dropdown-option[aria-selected="true"] {
    background-color: #020617 !important; /* dark bg */
    color: #ffffff !important;
}

/* Keep hover consistent */
html.dark .vs__dropdown-option--selected:hover,
html.dark .vs__dropdown-option[aria-selected="true"]:hover {
    background-color: #1e293b !important;
    color: #ffffff !important;
}

/* Select2 — selected option */
html.dark .select2-results__option--selected,
html.dark .select2-results__option[aria-selected="true"] {
    background-color: #020617 !important;
    color: #ffffff !important;
}

/* Select2 hover on selected */
html.dark .select2-results__option--selected:hover {
    background-color: #1e293b !important;
    color: #ffffff !important;
}