/* SWITCH DESIGN */
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

.switch input { display: none; }

.slider {
  position: absolute;
  cursor: pointer;
  background-color: #000000;
  transition: .4s;
  border-radius: 24px;
  top: 0; left: 0; right: 0; bottom: 0;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #cccccc;
}

input:checked + .slider:before {
  transform: translateX(26px);
}




/* DARK MODE BASE */
html.dark {
  background-color: #121212 !important;
  color: #ffffff !important;
}



html.dark .card {
  background-color: #1e1e1e !important;
}

html.dark .proposal-div {
  background-color: #1e1e1e !important;
}



/* PROPOSALS */
html.dark .proposal-div {
  background-color: #1e1e1e !important;
  color: #ffffff !important;
  border: 1px solid #333 !important;
}

html.dark .proposal-div h4,
html.dark .proposal-div a,
html.dark .proposal-div span,
html.dark .proposal-div p {
  color: #ffffff !important;
}




/* CARDS */
html.dark .card {
  background-color: #1e1e1e !important;
  color: #ffffff !important;
}


/* NAV */
html.dark .nav-link {
  color: #cccccc !important;
}

html.dark .nav-link.active {
  background-color: #333333 !important;
  color: #ffffff !important;
}

/* INPUTS */
html.dark .form-control,
html.dark input,
html.dark textarea {
  background-color: #222 !important;
  color: #fff !important;
  border: 1px solid #444 !important;
}

/* TABLE */
html.dark .box-table {
  background-color: #1e1e1e !important;
  border: 1px solid #333 !important;
}

html.dark .table {
  color: #ffffff !important;
  background-color: transparent !important;
}

html.dark .table thead {
  background-color: #2a2a2a !important;
}

html.dark .table thead th {
  color: #ffffff !important;
  border-bottom: 1px solid #444 !important;
}

html.dark .table tbody tr {
  background-color: #1e1e1e !important;
  border-bottom: 1px solid #333 !important;
}

html.dark .table-hover tbody tr:hover {
  background-color: #252525 !important;
}

/* REQUEST TEXT */
html.dark .request-description h6,
html.dark .request-description p,
html.dark .request-description a {
  color: #ffffff !important;
}

html.dark .request-description .lead {
  color: #cccccc !important;
}








/* =========================
   ROOT
========================= */
html.dark {
  background-color: #121212;
  color: #eaeaea;
}

/* Force all default text to light */
html.dark body,
html.dark p,
html.dark span,
html.dark label,
html.dark small,
html.dark div {
  color: #eaeaea;
}

/* =========================
   LINKS
========================= */
html.dark a {
  color: #ffffff;
}

html.dark a:hover {
  color: #ffffff;
}

/* =========================
   NAVBAR
========================= */
html.dark .navbar,
html.dark header,
html.dark .header {
  background-color: var(--dark-surface) !important;
  border-bottom: 1px solid var(--dark-border);
}

html.dark .nav-link,
html.dark .navbar a {
  color: #eaeaea !important;
}

/* icons (FontAwesome etc.) */
html.dark i {
  color: #eaeaea;
}

/* =========================
   DROPDOWN MENU
========================= */
html.dark .dropdown-menu {
  background-color: var(--dark-surface) !important;
  border: 1px solid var(--dark-border) !important;
}

/* Nested submenu panels inside the account dropdown (Selling/Buying/
   Contacts/Settings - includes/user_header.php's ".dropdown-submenu
   collapse" panels). Not covered by the ".dropdown-menu" rule above
   because this is a different class - styles/style.css's own
   ".dropdown-submenu" rule hardcodes a light grey background with no
   theme scoping at all, so without this override it stays light grey
   in both themes. */
html.dark .dropdown-submenu {
  background-color: var(--dark-surface) !important;
}

html.dark .dropdown-item {
  color: #eaeaea !important;
}

html.dark .dropdown-item:hover {
  background-color: var(--dark-surface-alt) !important;
  color: #ffffff !important;
}

/* Active nav state (e.g. Selling > View Solutions while on that page).
   Monochrome, matching this site's retired-green design system (see
   styles/variables.css) - not Bootstrap's default blue ".active". */
html.dark .dropdown-item.active,
html.dark .dropdown-item.active:hover {
  background-color: var(--dark-surface-alt) !important;
  color: #ffffff !important;
  font-weight: 600;
  box-shadow: inset 3px 0 0 #ffffff;
}

html.dark .dropdown-divider {
  border-top: 1px solid var(--dark-border);
}

/* =========================
   USER / BALANCE BOX
========================= */
html.dark .user-info .pre-text,
html.dark .balance-info .pre-text {
  color: #b5b5b5;
}

html.dark .username {
  color: #ffffff;
}

/* IMPORTANT: badges often stay too bright */
html.dark .badge,
html.dark .badge-success {
  background-color: #2e7d32 !important;
  color: #ffffff !important;
}

/* =========================
   FORMS
========================= */
html.dark .form-control {
  background-color: #2a2a2a;
  border: 1px solid #444;
  color: #ffffff;
}

html.dark .form-control::placeholder {
  color: #999;
}

/* =========================
   BUTTONS
========================= */
html.dark .btn {
  color: #eaeaea;
}

html.dark .btn-primary {
  background-color: #3b82f6;
  border-color: #3b82f6;
}

html.dark .btn-outline-secondary {
  color: #eaeaea;
  border-color: #555;
}

html.dark .btn-outline-secondary:hover {
  background-color: #333;
}

/* =========================
   CURRRENCY MENU
========================= */
html.dark .currency-menu {
  background-color: var(--dark-surface);
  border: 1px solid var(--dark-border);
}

html.dark .currency-button {
  background-color: var(--dark-surface-alt);
  color: #ffffff;
  border: 1px solid #444;
}

html.dark .currency-list {
  background-color: var(--dark-surface);
  border: 1px solid var(--dark-border);
}

html.dark .currency-list a {
  color: #eaeaea;
}

html.dark .currency-list a:hover {
  background-color: var(--dark-surface-alt);
  color: #ffffff;
}

/* =========================
   ALERTS (VERY IMPORTANT FIX)
========================= */
html.dark .alert {
  background-color: #1f1f1f;
  border-color: #333;
  color: #eaeaea;
}

html.dark .alert-warning {
  background-color: #2a2415;
}

html.dark .alert-danger {
  background-color: #2a1515;
}






/* =========================
   LEFT MENU BUTTON
========================= */
html.dark .left-menu {
  background: transparent;
}

html.dark .left-button {
  background-color: var(--dark-surface) !important;
  color: #eaeaea !important;
  border: 1px solid var(--dark-border) !important;
  padding: 6px 10px;
  border-radius: 6px;
  transition: 0.2s;
}

html.dark .left-button:hover {
  background-color: var(--dark-surface-alt);
  color: #ffffff;
}

/* username dropdown button */
html.dark .left-menu .dropdown-toggle {
  background-color: var(--dark-surface);
  color: #eaeaea;
  border: 1px solid #333;
  border-radius: 6px;
}

/* =========================
   USER IMAGE + NAME
========================= */
html.dark .left-menu img {
  border: 1px solid #444;
}

html.dark .username-full,
html.dark .username-short {
  color: #eaeaea;
}

/* =========================
   BALANCE BADGE (IMPORTANT FIX)
========================= */
html.dark .balance-toggle {
  background-color: #2e7d32 !important;
  color: #ffffff !important;
  border: none;
}

/* =========================
   DROPDOWN MENU
========================= */
html.dark .left-menu .dropdown-menu {
  background-color: var(--dark-surface) !important;
  border: 1px solid var(--dark-border);
  box-shadow: 0 10px 25px rgba(0,0,0,0.6);
}

html.dark .left-menu .dropdown-item {
  color: #eaeaea !important;
}

html.dark .left-menu .dropdown-item:hover {
  background-color: #2a2a2a !important;
  color: #ffffff !important;
}

html.dark .left-menu .dropdown-divider {
  border-top: 1px solid #333;
}

/* =========================
   BALANCE BOX (INSIDE DROPDOWN)
========================= */
html.dark .balance-box {
  background-color: var(--dark-surface-alt);
  border: 1px solid var(--dark-border);
  border-radius: 8px;
  padding: 10px;
}

/* text labels */
html.dark .balance-box .pre-text {
  color: #aaa;
}

/* username */
html.dark .balance-box .username {
  color: #ffffff;
}

/* balance number badge */
html.dark .balance-box .badge-success {
  background-color: #2e7d32 !important;
  color: #fff !important;
}













/* =========================
   FORCE GLOBAL DARK MODE
========================= */

/* BODY + MAIN BACKGROUND */
html.dark,
html.dark body {
  background-color: #000000 !important;
  color: #eaeaea !important;
}

/* REMOVE ALL WHITE BACKGROUNDS */
html.dark .bg-white,
html.dark .bg-light,
html.dark .container,
html.dark .container-fluid,
html.dark .mp-box,
html.dark .box-row,
html.dark .menu-cont,
html.dark .carousel,
html.dark .carousel-inner,
html.dark .carousel-item {
  background-color: transparent !important;
}

/* =========================
   CARDS (FULL FIX)
========================= */
html.dark .card {
  background-color: #1e1e1e !important;
  border: 1px solid #2a2a2a !important;
}

html.dark .card-header {
  background-color: #1a1a1a !important;
  border-bottom: 1px solid #2a2a2a !important;
}

html.dark .card-body {
  background-color: #1e1e1e !important;
}

/* =========================
   LINKS + TEXT
========================= */
html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5,
html.dark h6,
html.dark p,
html.dark span,
html.dark a {
  color: #eaeaea !important;
}

/* =========================
   TABLE + ROW FIX
========================= */
html.dark tr,
html.dark td,
html.dark th {
  background-color: transparent !important;
}

/* =========================
   CAROUSEL ARROWS (VISIBLE)
========================= */
html.dark .carousel-control-prev-icon,
html.dark .carousel-control-next-icon {
  filter: invert(1);
}

/* =========================
   HR (LINE)
========================= */
html.dark hr {
  border-color: #333 !important;
}

/* =========================
   FIX RANDOM WHITE BLOCKS
========================= */
html.dark * {
  background-image: none !important;
}










/* =========================
   MOBILE NAV DARK MODE
========================= */

html.dark .mobile-bottom-nav {
  background: #1c1c1c !important;
  border-top: 1px solid #2a2a2a !important;
}

/* links */
html.dark .mobile-bottom-nav a {
  color: #aaa !important;
}

/* active */
html.dark .mobile-bottom-nav a.active {
  color: #ffffff !important;
}

/* icons */
html.dark .mobile-bottom-nav i {
  color: #eaeaea !important;
}

/* badge */
html.dark .mobile-badge {
  background: #ff3b3b !important;
  color: #fff !important;
}





/* =========================
   STICKY FOOTER DARK MODE
========================= */

html.dark .sticky-footer {
  background: #1c1c1c !important;
  border-top: 1px solid #2a2a2a !important;
}

/* buttons stay green but nicer in dark */
html.dark .sticky-footer .btn-success {
  background-color: #0d7a1f !important;
  border-color: #0d7a1f !important;
  color: #ffffff !important;
}

/* hover effect */
html.dark .sticky-footer .btn-success:hover {
  background-color: #129e2a !important;
  border-color: #129e2a !important;
}

/* text */
html.dark .money-back {
  color: #aaa !important;
}



/* =========================
   DESKTOP CATEGORY MEGA-MENU (category_nav_style.css / user_nav_style.css)
   Previously had zero dark-mode coverage - the dropdown mega-menu and its
   bar rendered as a bright white panel regardless of site theme.
========================= */
html.dark .mp-box.mp-box-white {
  background: var(--dark-surface) !important;
  border-top: 1px solid var(--dark-border) !important;
  border-bottom: 1px solid var(--dark-border) !important;
}

html.dark .main-cat-list > li {
  color: var(--dark-text-muted);
}

html.dark .main-cat-list > li a {
  color: var(--dark-text-muted);
}

html.dark .main-cat-list > li:hover,
html.dark .main-cat-list > li:active {
  border-color: var(--dark-border);
  box-shadow: none;
}

html.dark .main-cat-list > li:hover > a,
html.dark .main-cat-list > li .menu-cont li a {
  color: var(--brand-green-bright);
}

html.dark .main-cat-list > li .menu-cont {
  /* !important is required here, not stylistic: the earlier "REMOVE ALL
     WHITE BACKGROUNDS" block above (html.dark .menu-cont { background-color:
     transparent !important }) already targets this same element with
     !important, so without it here too this rule silently loses (same
     specificity concept, but !important always wins regardless of the
     more specific selector or later source order) and the dropdown
     renders with a transparent background - invisible before this fix
     since the mega-menu never actually rendered on screen in the first
     place (see styles/category_nav_style.css for that fix), so this
     conflict had never been reachable/visible until now. */
  background-color: var(--dark-surface) !important;
  border: 1px solid var(--dark-border);
}

/* =========================
   CATEGORY PAGE DARK MODE
========================= */

/* MAIN BACKGROUND */
html.dark,
html.dark body {
  background-color: #000000 !important;
  color: #eaeaea !important;
}

/* CONTAINER */
html.dark .container {
  background: transparent !important;
}

/* TITLE */
html.dark h2 {
  color: #ffffff !important;
}

/* =========================
   CATEGORY CARD
========================= */
html.dark .mobile-category {
  background: #1e1e1e !important;
  border: 1px solid #2a2a2a !important;
  border-radius: 10px;
  transition: 0.25s;
  overflow: hidden;
}

/* hover effect */
html.dark .mobile-category:hover {
  background: #252525 !important;
  transform: translateY(-4px);
}

/* IMAGE */
html.dark .category-picture img {
  border-radius: 8px;
}

/* TEXT */
html.dark .category-title {
  color: #ffffff !important;
}

html.dark .category-desc {
  color: #aaaaaa !important;
}

/* LINKS */
html.dark .mobile-category a {
  color: #ffffff !important;
  text-decoration: none;
}

/* spacing fix */
.mobile-category {
  padding: 10px;
}










/* =========================
   PROPOSAL REVIEWS DARK MODE FIX
========================= */

html.dark .proposal-reviews.card {
  background-color: #1e1e1e !important;
  color: #eaeaea !important;
  border: 1px solid #333 !important;
}

/* card header */
html.dark .proposal-reviews .card-header {
  background-color: #181818 !important;
  border-bottom: 1px solid #333 !important;
  color: #eaeaea !important;
}

/* card body */
html.dark .proposal-reviews .card-body {
  background-color: #1e1e1e !important;
  color: #eaeaea !important;
}

/* dropdown button (Most Recent) */
html.dark .proposal-reviews .btn-secondary {
  background-color: #2a2a2a !important;
  border-color: #444 !important;
  color: #fff !important;
}

/* dropdown menu */
html.dark .proposal-reviews .dropdown-menu {
  background-color: #1e1e1e !important;
  border: 1px solid #333 !important;
}

html.dark .proposal-reviews .dropdown-item {
  color: #eaeaea !important;
}

html.dark .proposal-reviews .dropdown-item:hover {
  background-color: #2a2a2a !important;
  color: #fff !important;
}

/* review text */
html.dark .proposal-reviews .msg-body,
html.dark .proposal-reviews h4,
html.dark .proposal-reviews span,
html.dark .proposal-reviews a {
  color: #eaeaea !important;
}

/* review list item spacing background fix */
html.dark .proposal-reviews .star-rating-row,
html.dark .proposal-reviews .rating-seller {
  background-color: transparent !important;
  border-bottom: 1px solid #2a2a2a !important;
}

/* rating text muted fix */
html.dark .proposal-reviews .text-muted {
  color: #aaaaaa !important;
}

/* hr line */
html.dark .proposal-reviews hr {
  border-color: #333 !important;
}



/* =========================
   NOTIFICATIONS + INBOX DARK MODE
========================= */

html.dark .card {
  background-color: #1e1e1e !important;
  color: #eaeaea !important;
  border: 1px solid #2a2a2a !important;
}

/* tab header area */
html.dark .card-header {
  background-color: #181818 !important;
  border-bottom: 1px solid #2a2a2a !important;
}

/* nav tabs */
html.dark .nav-tabs {
  border-bottom: 1px solid #2a2a2a !important;
}

html.dark .nav-tabs .nav-link {
  background-color: transparent !important;
  color: #ccc !important;
  border: none !important;
}

html.dark .nav-tabs .nav-link.active {
  background-color: #2a2a2a !important;
  color: #fff !important;
  border-radius: 6px 6px 0 0;
}

/* badges */
html.dark .badge-success {
  background-color: #2e7d32 !important;
  color: #fff !important;
}

/* message/notification containers */
html.dark .header-message-div,
html.dark .header-message-div-unread {
  background-color: #1e1e1e !important;
  border-bottom: 1px solid #2a2a2a !important;
}

/* unread highlight */
html.dark .header-message-div-unread {
  background-color: #232323 !important;
}

/* hover effect */
html.dark .header-message-div:hover,
html.dark .header-message-div-unread:hover {
  background-color: #2a2a2a !important;
}

/* text colors */
html.dark .heading,
html.dark .message,
html.dark .date {
  color: #eaeaea !important;
}

/* muted text */
html.dark .text-muted {
  color: #aaaaaa !important;
}

/* user images border */
html.dark img.rounded-circle {
  border: 1px solid #333;
}

/* close icon */
html.dark .fa-times-circle {
  color: #ff6b6b !important;
}

/* "See All" button */
html.dark .btn-primary {
  background-color: #3b82f6 !important;
  border-color: #3b82f6 !important;
}






/* =========================
   TOPBAR DARK MODE
========================= */

html.dark .topbar {
  background-color: #1c1c1c !important;
  border-bottom: 1px solid #2a2a2a !important;
}

/* arrow icon */
html.dark .left-button .arrow-down {
  color: #eaeaea !important;
}

/* dropdown list */
html.dark .left-list {
  background-color: var(--dark-surface) !important;
  border: 1px solid var(--dark-border) !important;
}

/* list items */
html.dark .left-list li a {
  color: #eaeaea !important;
}

/* hover effect */
html.dark .left-list li a:hover {
  background-color: #2a2a2a !important;
  color: #ffffff !important;
}
















/* =========================
   CONVERSATION DARK MODE
========================= */

html.dark body {
  background-color: #121212 !important;
  color: #eaeaea !important;
}

/* TOP BAR / HEADER AREA */
html.dark .topbar,
html.dark .insert-message,
html.dark .insert-message-box,
html.dark .chat-container {
  background-color: #1e1e1e !important;
  border-color: #2a2a2a !important;
}

/* SELLER PROFILE SECTION */
html.dark .seller-image {
  border: 1px solid #333 !important;
}

html.dark .p-style,
html.dark .p-style b,
html.dark .p-style i,
html.dark .chat-status,
html.dark .chat-status small {
  color: #eaeaea !important;
}

/* CHAT MESSAGES AREA */
html.dark #display-messages {
  background-color: #181818 !important;
}

/* SINGLE MESSAGE BUBBLES (if any wrapper exists) */
html.dark .message-box,
html.dark .chat-message {
  background-color: #222 !important;
  color: #eaeaea !important;
  border: 1px solid #333 !important;
}

/* INPUT AREA */
html.dark .chat-form,
html.dark .input-wrapper {
  background-color: #1e1e1e !important;
  border-top: 1px solid #2a2a2a !important;
}

/* TEXTAREA */
html.dark textarea#message {
  background-color: #222 !important;
  color: #fff !important;
  border: 1px solid #444 !important;
}

/* FILE + ICON AREA */
html.dark .file-icon i {
  color: #eaeaea !important;
}

/* SEND BUTTONS */
html.dark .chat-btn {
  background-color: #2a2a2a !important;
  color: #fff !important;
  border: 1px solid #444 !important;
}

html.dark .chat-btn.offer-btn {
  background-color: #000000 !important;
  border-color: #ffffff !important;
}

/* REQUEST / OFFER BOX */
html.dark .request-div,
html.dark .offer-div {
  background-color: #1e1e1e !important;
  border: 1px solid #333 !important;
  color: #eaeaea !important;
}

html.dark .request-div h5,
html.dark .offer-div h5,
html.dark .request-div p,
html.dark .offer-div p {
  color: #eaeaea !important;
}

/* PRICE */
html.dark .price {
  color: #ffffff !important;
}

/* CLOSE BUTTON */
html.dark .btn-close {
  color: #ff4d4d !important;
}

/* ONLINE STATUS */
html.dark #user-status {
  color: #4caf50 !important;
}

/* WEBSOCKET STATUS */
html.dark #ws-status {
  color: #aaa !important;
}

/* SCROLL BUTTON */
html.dark #scrollToBottomBtn {
  background-color: #000000 !important;
  color: #fff !important;
  border: none;
}

/* VOICE PREVIEW */
html.dark #voicePreview {
  background-color: #1e1e1e !important;
  border: 1px solid #333 !important;
}

/* LINKS */
html.dark a {
  color: #ffffff !important;
}

html.dark a:hover {
  color: #ffffff !important;
}




/* =========================
   CHAT MESSAGE DARK MODE
========================= */

/* BASE MESSAGE BOX */
html.dark .message-div,
html.dark .message-div-hover {
  background-color: #1e1e1e !important;
  border: 1px solid #2a2a2a !important;
  color: #eaeaea !important;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 10px;
}

/* HOVER STATE (SAME THEME BUT SLIGHTLY DARKER) */
html.dark .message-div-hover {
  background-color: #222 !important;
}

/* SENDER NAME */
html.dark .message-div h5,
html.dark .message-div-hover h5 {
  color: #ffffff !important;
}

/* MESSAGE TEXT */
html.dark .message-desc {
  color: #eaeaea !important;
}

/* PROFILE IMAGE BORDER */
html.dark .message-image {
  border: 1px solid #333 !important;
}

/* MESSAGE TIME */
html.dark .message-div .text-muted,
html.dark .message-div-hover .text-muted {
  color: #aaa !important;
}

/* FILE DOWNLOAD LINK */
html.dark .message-desc a {
  color: #ffffff !important;
}

html.dark .message-desc a:hover {
  color: #ffffff !important;
}

/* VOICE MESSAGE PLAYER */
html.dark audio {
  filter: invert(0.9) hue-rotate(180deg);
  background-color: #1e1e1e;
  border-radius: 6px;
}

/* OFFER BOX INSIDE MESSAGE */
html.dark .message-offer {
  background-color: #1a1a1a !important;
  border: 1px solid #333 !important;
  border-radius: 10px;
  padding: 10px;
}

/* OFFER TITLE */
html.dark .message-offer h5 {
  color: #ffffff !important;
}

/* OFFER DESCRIPTION */
html.dark .message-offer p {
  color: #cccccc !important;
}

/* PRICE COLOR (YOUR BRAND GREEN) */
html.dark .message-offer .price {
  color: #000000 !important;
}

/* DELIVERY TEXT */
html.dark .message-offer b {
  color: #eaeaea !important;
}

/* BUTTONS */
html.dark .message-offer .btn-success {
  background-color: #000000 !important;
  border-color: #000000 !important;
  color: #ffffff !important;
}

/* DISABLED BUTTON */
html.dark .message-offer .btn:disabled {
  background-color: #333 !important;
  border-color: #444 !important;
  color: #aaa !important;
}

/* VIEW ORDER LINK */
html.dark .message-offer a {
  color: #ffffff !important;
}

/* DATE TEXT */
html.dark .message-div .text-right.text-muted {
  color: #888 !important;
}

/* DOWNLOAD ICON */
html.dark .fa-download {
  color: #eaeaea !important;
}




/* =========================
   SEND OFFER MODAL DARK MODE
========================= */

/* MODAL BACKGROUND */
html.dark .modal-content {
  background-color: #1e1e1e !important;
  color: #eaeaea !important;
  border: 1px solid #2a2a2a !important;
}

/* HEADER */
html.dark .modal-header {
  background-color: #181818 !important;
  border-bottom: 1px solid #2a2a2a !important;
  color: #ffffff !important;
}

/* TITLE */
html.dark .modal-title {
  color: #ffffff !important;
}

/* CLOSE BUTTON */
html.dark .modal-header .close {
  color: #ffffff !important;
  opacity: 0.8;
}

/* BODY */
html.dark .modal-body {
  background-color: #1e1e1e !important;
}

/* PROPOSAL LIST CONTAINER */
html.dark .request-proposals-list {
  background-color: #1e1e1e !important;
}

/* EACH PROPOSAL ITEM */
html.dark .proposal-picture {
  background-color: #222 !important;
  border: 1px solid #333 !important;
  border-radius: 8px;
  padding: 10px;
}

/* TEXT */
html.dark .proposal-title p,
html.dark .proposal-picture strong,
html.dark .proposal-picture p {
  color: #eaeaea !important;
}

/* MUTED TEXT */
html.dark .text-muted {
  color: #aaaaaa !important;
}

/* IMAGE BORDER */
html.dark .proposal-picture img {
  border-radius: 6px;
  border: 1px solid #333 !important;
}

/* RADIO BUTTON LABEL */
html.dark .radio-custom-label {
  color: #eaeaea !important;
}

/* HR DIVIDER */
html.dark hr {
  border-color: #333 !important;
}

/* FOOTER */
html.dark .modal-footer {
  background-color: #181818 !important;
  border-top: 1px solid #2a2a2a !important;
}

/* CLOSE BUTTON */
html.dark .btn-secondary {
  background-color: #2a2a2a !important;
  border-color: #444 !important;
  color: #fff !important;
}

/* GO NEXT BUTTON (YOUR BRAND COLOR) */
html.dark #submit-proposal {
  background-color: #000000 !important;
  border-color: #fffff !important;
  color: #fff !important;
}

/* DISABLED STATE */
html.dark #submit-proposal:disabled {
  background-color: #333 !important;
  border-color: #444 !important;
  color: #888 !important;
}

/* INPUT RADIO HOVER FEEL */
html.dark .proposal-picture:hover {
  background-color: #2a2a2a !important;
}

/* ESCROW TEXT BLOCK */
html.dark .proposal-picture strong {
  color: #ffffff !important;
}




















/* ===== LIGHT MODE (DEFAULT) ===== */
html {
  background: #ffffff;
  color: #222;
}

/* Example elements */
.home-header {
  background: #f8f9fa;
}

.category-item {
  background: #ffffff;
  border: 1px solid #ddd;
}

.accordion {
  background-color: #f5f5f5;
  color: #333;
}

/* ===== DARK MODE ===== */
html.dark {
  background: #121212;
  color: #f1f1f1;
}

/* Header */
html.dark .home-header {
  background: #1e1e1e;
}

/* Hero "Get Started" button only (.rld-hero-ctas scopes this to the
   hero's own CTA group - home.php's OTHER .btn-primary-cta, inside
   .rld-final-cta further down the page, is untouched by this selector).
   This button is white-background/black-text by design (home.css) so
   it stays visible against the dark hero backdrop above - but this
   file's own broad "html.dark a { color: ... !important; }" rules
   (several further down/up in this file) force every link's text
   white, including this one's, leaving white text on a white button.
   Overriding with equal specificity here would still lose to those
   !important rules regardless of source order, so this targets the
   button's own two-class selector specifically, with !important, which
   is both more specific than "html.dark a" and wins the !important tie
   on specificity alone - the global link rules themselves are left
   completely unchanged for every other link/button on the site. */
html.dark .rld-hero-ctas .btn-primary-cta,
html.dark .rld-hero-ctas .btn-primary-cta:hover,
html.dark .rld-hero-ctas .btn-primary-cta:focus {
  color: #000 !important;
}

/* Cards */
html.dark .category-item {
  background: #1e1e1e;
  border: 1px solid #333;
}

/* FAQ */
html.dark .accordion {
  background-color: #1e1e1e;
  color: #f1f1f1;
}

html.dark .panel {
  background-color: #181818;
  color: #ddd;
}

/* Buttons */
html.dark .btn {
  background-color: #000000;
  color: #fff;
}

/* Muted text */
html.dark .text-muted {
  color: #aaa !important;
}

/* Inputs */
html.dark input,
html.dark .form-control {
  background: #1e1e1e;
  color: #fff;
  border: 1px solid #444;
}

/* Links */
html.dark a {
  color: #ffffff;
}









/* ===== PLATFORM SECTION ===== */
.platform-section {
  padding: 60px 0;
  background: #ffffff;
  color: #222;
}

/* Headings */
.platform-section h2 {
  font-size: 32px;
  font-weight: bold;
}

.platform-section h3 {
  font-size: 22px;
  color: #555;
}

.platform-section p {
  font-size: 16px;
  color: #444;
}

/* Buttons */
.btn-primary-custom {
  background-color: #000000;
  border: 2px solid #fffff;
  color: #fff;
  padding: 10px 20px;
  border-radius: 4px;
  text-decoration: none;
  display: inline-block;
  transition: 0.3s ease;
}

.btn-primary-custom:hover {
  background-color: #2a2a2a;
  border-color: #2a2a2a;
  color: #fff;
}

.btn-outline-custom {
  color: #000000;
  border: 2px solid #fffff;
  background-color: transparent;
  padding: 10px 20px;
  border-radius: 4px;
  text-decoration: none;
  display: inline-block;
  transition: 0.3s ease;
}

.btn-outline-custom:hover {
  background-color: #000000;
  color: #fff;
}

/* ===== VIDEO ===== */
#video-popup-container .promo-video img {
  border-radius: 8px;
}

#video-popup-container .promo-video__link {
  transition: 0.3s ease;
}

#video-popup-container .promo-video:hover .promo-video__link {
  background: rgba(0, 0, 0, 0.7);
}

/* Modal */
#video-popup-container .modal-content {
  background: #fff;
}

/* ===== DARK MODE ===== */
html.dark .platform-section {
  background: #121212;
  color: #f1f1f1;
}

html.dark .platform-section h3 {
  color: #bbb;
}

html.dark .platform-section p {
  color: #ccc;
}

/* Buttons */
html.dark .btn-primary-custom {
  background-color: #0a7a1a;
  border-color: #0a7a1a;
}

html.dark .btn-primary-custom:hover {
  background-color: #095f15;
  border-color: #095f15;
}

html.dark .btn-outline-custom {
  color: #0a7a1a;
  border-color: #0a7a1a;
}

html.dark .btn-outline-custom:hover {
  background-color: #0a7a1a;
  color: #fff;
}

/* Modal dark */
html.dark #video-popup-container .modal-content {
  background: #1e1e1e;
}

html.dark #video-popup-container .modal-close {
  background: #333;
  color: #fff;
}








/* ===== REVIEWS SECTION ===== */
.review-slider-container {
  overflow: hidden;
  width: 100%;
  margin-top: 30px;
}

.review-cards,
.review-slider {
  display: flex;
  gap: 20px;
  align-items: stretch;
}

/* CARD */
.review-card {
  background: #ffffff;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 20px;
  min-width: 280px;
  max-width: 320px;
  transition: 0.3s ease;
  text-align: left;
}

/* Hover effect */
.review-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

/* Review text */
.review-text {
  font-size: 14px;
  color: #444;
  margin-top: 10px;
  line-height: 1.5;
}

/* Stars */
.review-star img {
  margin-bottom: 10px;
}

/* PROFILE */
.profile {
  display: flex;
  align-items: center;
  margin-top: 15px;
}

.profile-img {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 10px;
}

.name {
  font-size: 16px;
  margin: 0;
}

.occupation {
  font-size: 13px;
  color: #777;
}

/* ===== DYNAMIC REVIEW (DB SECTION) ===== */
.review-header {
  display: flex;
  gap: 10px;
  align-items: center;
}

.review-header img {
  width: 45px;
  height: 45px;
  border-radius: 50%;
}

.review-meta {
  font-size: 13px;
  color: #555;
}

.review-user {
  color: #000000;
  text-decoration: none;
}

.review-user:hover {
  text-decoration: underline;
}

.review-date {
  font-size: 12px;
  color: #888;
}

/* Badge */
.review-type-badge {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  margin-right: 5px;
}

.review-type-badge.buyer {
  background: #e6f4ea;
  color: #000000;
}

.review-type-badge.seller {
  background: #e3f2fd;
  color: #ffffff;
}

/* ===== DARK MODE ===== */
html.dark .review-card {
  background: #1e1e1e;
  border: 1px solid #333;
}

html.dark .review-text {
  color: #ccc;
}

html.dark .occupation {
  color: #aaa;
}

html.dark .review-meta {
  color: #bbb;
}

html.dark .review-date {
  color: #888;
}

html.dark .review-user {
  color: #ffffff;
}

html.dark .review-type-badge.buyer {
  background: #1f3d2b;
  color: #4caf50;
}

html.dark .review-type-badge.seller {
  background: #1e3a5f;
  color: #64b5f6;
}

/* Hover in dark */
html.dark .review-card:hover {
  box-shadow: 0 8px 20px rgba(0,0,0,0.6);
}




/* ===== MODAL ===== */
.modal-content {
  background: #ffffff;
  color: #222;
  border-radius: 10px;
}

.modal-header {
  border-bottom: 1px solid #ddd;
}

.modal-title {
  font-weight: 600;
}

.modal-close,
.close {
  background: transparent;
  border: none;
  font-size: 20px;
  cursor: pointer;
}

/* ===== FAQ SECTION ===== */
.faq {
  max-width: 800px;
  margin: 20px auto;
}

/* Each item */
.faq details {
  background: #ffffff;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-bottom: 12px;
  padding: 14px 16px;
  transition: 0.3s ease;
}

/* Hover */
.faq details:hover {
  border-color: #fffff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Question */
.faq summary {
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  position: relative;
  list-style: none;
  padding-right: 25px;
}

/* Remove default arrow */
.faq summary::-webkit-details-marker {
  display: none;
}

/* Custom icon */
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  font-size: 18px;
  transition: 0.3s ease;
}

/* When open */
.faq details[open] summary::after {
  content: "−";
}

/* Answer */
.faq details p {
  margin-top: 10px;
  font-size: 14px;
  color: #444;
  line-height: 1.6;
  animation: fadeIn 0.3s ease;
}

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

/* ===== HEADINGS ===== */
.modal-body h4 {
  margin-top: 25px;
  font-weight: bold;
}

/* ===== DARK MODE ===== */
html.dark .modal-content {
  background: #1e1e1e;
  color: #f1f1f1;
}

html.dark .modal-header {
  border-bottom: 1px solid #333;
}

html.dark .close {
  color: #fff;
}

/* FAQ items */
html.dark .faq details {
  background: #1e1e1e;
  border: 1px solid #333;
}

html.dark .faq details:hover {
  border-color: #0a7a1a;
  box-shadow: 0 4px 12px rgba(0,0,0,0.6);
}

/* Text */
html.dark .faq details p {
  color: #ccc;
}

/* Questions */
html.dark .faq summary {
  color: #f1f1f1;
}

/* Icons */
html.dark .faq summary::after {
  color: #0a7a1a;
}

/* ===== SEARCH OVERLAY (mobile search panel) ===== */
/* Previously had zero dark-mode coverage - rendered as a bright light-blue/white
   panel regardless of site theme. .search-top and .close-search are already
   black/white and need no change in either mode. */
html.dark .search-overlay,
html.dark .search-box {
  background: var(--dark-bg);
}

html.dark #liveSearchInput {
  background: var(--dark-surface);
  color: var(--dark-text);
}

html.dark .search-section h4 {
  color: #9aa5ab;
}

html.dark .keyword-chip,
html.dark .search-suggestion {
  background: var(--dark-surface);
  color: var(--dark-text);
}

html.dark .search-item {
  background: var(--dark-surface);
  color: var(--dark-text);
}

html.dark .search-item h4 {
  color: var(--dark-text);
}

html.dark .search-item p {
  color: #aaaaaa;
}

html.dark .search-price {
  color: #ffffff !important;
}