:root {
  --primary-blue: #2d8eff; 
  --whatsapp-green: #25D366; 
  --bg: #f4f6f8;
  --card: #ffffff;
  --text: #333;
  --muted: #777;
  --radius: 8px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
  background: #e0e0e0; 
  color: var(--text);
  padding-bottom: 80px; 
}

/* --- APP CONTAINER --- */
.app-container {
  background: var(--bg);
  max-width: 480px;
  min-height: 100vh;
  margin: 0 auto;
  box-shadow: 0 0 20px rgba(0,0,0,0.1);
  position: relative;
}

/* --- SHARED HEADER --- */
.header {
  background: var(--primary-blue);
  padding: 14px 16px;
  position: sticky;
  top: 0;
  z-index: 100;
  display: block; /* Default for Index */
}

/* Flex header for sub-pages to align arrow and title/search */
.header:has(.back-btn) { 
  display: flex;
  align-items: center;
  gap: 15px;
  color: white;
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.logo {
  font-size: 24px;
  font-weight: 800;
  color: white;
  letter-spacing: -0.5px;
}

.back-btn {
  color: white;
  margin-right: 0px; 
  text-decoration: none;
  font-size: 18px;
}

/* --- SEARCH (Index Page Style) --- */
.search-box {
  display: flex;
  gap: 8px;
  background: white;
  padding: 4px;
  border-radius: 4px;
}

.search-box select {
  border: none;
  background: transparent;
  padding: 10px;
  font-size: 14px;
  color: var(--text);
  border-right: 1px solid #ddd;
  outline: none;
  max-width: 35%;
}

.search-box input {
  border: none;
  padding: 10px;
  font-size: 14px;
  width: 100%;
  outline: none;
}

/* --- SEARCH (Category Page Style) --- */
.search-wrapper {
  flex-grow: 1;
  background: white;
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding: 8px 12px;
}

.search-icon {
  color: #999;
  margin-right: 10px;
  font-size: 14px;
}

.search-input {
  border: none;
  outline: none;
  width: 100%;
  font-size: 14px;
  color: var(--text);
}

.search-input::placeholder {
  color: #999;
}

/* --- INFO CARDS --- */
.info-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 14px 12px;
}

.info-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 12px 5px;
  text-align: center;
  font-weight: 600;
  font-size: 12px;
  color: var(--primary-blue);
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  cursor: pointer;
}

/* --- CATEGORIES GRID (Home) --- */
.categories {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  padding: 10px 14px 20px;
}

.cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-size: 11px;
  color: var(--text);
  cursor: pointer;
}

.cat-icon {
  width: 45px;
  height: 45px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--primary-blue);
  margin-bottom: 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* --- CATEGORY LIST (Subpage) --- */
.category-list {
  display: flex;
  flex-direction: column;
}

.cat-item {
  display: flex;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #eee; 
  text-decoration: none;
  color: inherit;
  transition: background 0.2s;
}

.cat-item:hover {
  background-color: #f0f8ff;
}

.cat-img-box {
  width: 50px;
  height: 50px;
  background: #f1f3f5;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

.cat-img-box img {
  width: 35px;
  height: 35px;
  object-fit: contain;
}

.cat-img-box i {
  font-size: 24px;
  color: var(--primary-blue);
}

.cat-info {
  display: flex;
  flex-direction: column;
}

.cat-name {
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 4px;
}

.cat-count {
  font-size: 12px;
  color: var(--muted);
}

/* --- PROFILE SECTION --- */
.profile-section {
  background: white;
  padding: 20px;
  text-align: center;
  border-bottom: 1px solid #ddd;
}

.profile-img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 4px solid var(--primary-blue);
  object-fit: cover;
  margin-bottom: 10px;
}

.business-name { font-size: 20px; font-weight: 800; color: var(--text); }

.business-description {
  font-size: 14px;
  color: var(--muted);
  margin: 8px 0;
  line-height: 1.4;
}

.business-meta {
  display: flex;
  justify-content: center;
  gap: 15px;
  font-size: 12px;
  color: var(--primary-blue);
  font-weight: 600;
}

/* --- PRODUCTS GRID --- */
.trending-section {
  padding: 0 14px 16px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.trending-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--primary-blue);
}

.products-title { 
  padding: 15px; 
  font-size: 16px; 
  font-weight: 700; 
  color: var(--text); 
}

.trending-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  /* Adjust padding based on context, 0 15px used in profile */
  padding: 0 5px; 
}

/* Special padding for profile page grid wrapper */
.products-title + .trending-grid {
  padding: 0 15px;
}

/* --- AD CARD --- */
.ad-card {
  background: var(--card);
  border-radius: 8px; /* Standardized to 8px from profile */
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  transition: transform 0.2s;
  position: relative;
}

.ad-card:active {
  transform: scale(0.98);
}

.ad-img {
  width: 100%;
  height: 140px; /* Standardized height */
  object-fit: cover;
  background: #eee;
}

.ad-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--primary-blue);
  color: white;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  opacity: 0.9;
}

.ad-info {
  padding: 10px;
}

.ad-title {
  font-size: 13px;
  color: #333;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ad-price {
  color: var(--primary-blue);
  font-weight: 800;
  font-size: 15px;
  margin-bottom: 6px;
}

.ad-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  color: var(--muted);
}

.verified-icon {
  color: var(--primary-blue);
  margin-left: 4px;
}

.ad-location { font-size: 10px; color: var(--muted); }

/* --- FOOTER --- */
.site-footer {
  background: #333;
  color: #ccc;
  padding: 30px 20px;
  font-size: 12px;
  margin-top: 20px;
  text-align: center;
}

.footer-links a {
  color: white;
  text-decoration: none;
  margin: 0 8px;
}

/* --- BOTTOM NAV --- */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 50%; 
  transform: translateX(-50%); 
  width: 100%;
  max-width: 480px; 
  background: white;
  border-top: 1px solid #ddd;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 8px 0;
  z-index: 999;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 10px;
  color: #777;
  text-decoration: none;
  width: 20%;
}

.nav-item i {
  font-size: 18px;
  margin-bottom: 4px;
}

.nav-item.active {
  color: var(--primary-blue);
}

.nav-sell {
  background: var(--primary-blue);
  color: white !important;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -25px; 
  box-shadow: 0 4px 10px rgba(45, 142, 255, 0.4); 
  border: 4px solid #fff;
}

.nav-sell span {
  display: none; 
}

/* --- NOTIFICATION BADGE --- */
.notification-icon-box {
  color: white;
  font-size: 18px;
  position: relative; /* Needed to place badge relative to icon */
  cursor: pointer;
}

.badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: red;
  color: white;
  font-size: 10px;
  font-weight: bold;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid white;
  animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

/* --- MODAL / POP-UP --- */
.modal-overlay {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 2000; /* On top of everything */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* Black background with opacity */
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 12px;
  width: 85%;
  max-width: 350px;
  text-align: center;
  position: relative;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  animation: slideDown 0.4s ease-out;
}

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

.close-modal {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 28px;
  font-weight: bold;
  color: #aaa;
  cursor: pointer;
}

.close-modal:hover { color: #000; }

.modal-img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 15px;
}

.modal-btn {
  display: inline-block;
  background: var(--primary-blue);
  color: white;
  padding: 10px 20px;
  border-radius: 20px;
  text-decoration: none;
  font-weight: bold;
  margin-top: 15px;
}

/* --- EXISTING CSS REMAINS THE SAME --- */
/* Add these new styles below */

/* CHAT BUTTON HELPER */
.chat-btn {
  display:block; 
  margin-top:8px; 
  background:var(--whatsapp-green); 
  color:white; 
  text-align:center; 
  padding:6px; 
  font-size:12px; 
  border-radius:4px; 
  text-decoration:none;
}

/* --- REVIEWS SLIDER --- */
.reviews-container {
  margin: 15px 0;
  overflow: hidden; /* Hide scrollbar for neatness */
}

.reviews-slider {
  display: flex;
  gap: 15px;
  overflow-x: auto;
  padding: 10px 14px;
  scroll-behavior: smooth;
  /* Hide scrollbar for Chrome, Safari and Opera */
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.reviews-slider::-webkit-scrollbar {
  display: none;
}

.review-card {
  min-width: 250px; /* Width of each review card */
  background: white;
  padding: 12px;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  border: 1px solid #eee;
  flex-shrink: 0;
}

.review-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.review-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--primary-blue);
}

.review-name {
  font-size: 13px;
  font-weight: bold;
  color: var(--text);
}

.stars {
  font-size: 10px;
  color: #FFD700; /* Gold color */
}

.review-text {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
  font-style: italic;
}

/* --- VENDOR CARD STYLES --- */
.vendor-card {
  background: white;
  border-radius: 8px;
  padding: 12px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  border: 1px solid transparent;
  transition: all 0.2s;
}

.vendor-card:hover {
  border-color: var(--primary-blue);
}

.vendor-logo {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin: 0 auto 8px;
  background: #f4f4f4;
  object-fit: cover;
  border: 3px solid #f4f6f8;
}

.vendor-id {
  background: #eee;
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 4px;
  color: #555;
  display: inline-block;
  margin-bottom: 5px;
  font-family: monospace;
}

.vendor-name {
  font-weight: bold;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 2px;
}

.vendor-cat {
  font-size: 10px;
  color: var(--primary-blue);
  margin-bottom: 6px;
}

.view-vendor-btn {
  background: white;
  border: 1px solid var(--primary-blue);
  color: var(--primary-blue);
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 20px;
  width: 100%;
  cursor: pointer;
  margin-top: 5px;
}

.view-vendor-btn:hover {
  background: var(--primary-blue);
  color: white;
}

/* --- VENDOR LIST PAGE STYLES --- */

/* The Vendor Logo in the list */
.list-vendor-img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 15px;
  border: 2px solid #eee;
}

/* The small ID Badge (e.g., V001) */
.vendor-list-id {
  background-color: #e0f0ff;
  color: var(--primary-blue);
  font-size: 10px;
  padding: 3px 6px;
  border-radius: 4px;
  font-weight: bold;
  font-family: monospace;
}

/* --- CONTENT PAGES (T&C, SAFETY) --- */
.content-page-wrapper {
  padding: 20px 25px;
  background: white;
  margin: 10px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  line-height: 1.6;
  font-size: 14px;
}

.content-title {
  color: var(--primary-blue);
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 5px;
}

.last-updated {
  font-size: 11px;
  color: #888;
  margin-bottom: 20px;
  font-style: italic;
}

.content-page-wrapper h3 {
  font-size: 16px;
  color: #333;
  margin-top: 20px;
  margin-bottom: 8px;
  border-bottom: 1px solid #eee;
  padding-bottom: 5px;
}

.content-page-wrapper ul {
  padding-left: 20px;
  margin-bottom: 10px;
}

.content-page-wrapper li {
  margin-bottom: 6px;
  color: #555;
}

.content-page-wrapper p {
  color: #555;
  margin-bottom: 10px;
}

/* --- FAQ PAGE STYLES --- */
.faq-container {
  background: #f9f9f9;
  min-height: 80vh;
}

.faq-item {
  background: white;
  border-bottom: 1px solid #eee;
  overflow: hidden;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  transition: background 0.2s;
}

.faq-question:hover {
  background: #fdfdfd;
}

.faq-question .arrow {
  color: #ccc;
  font-size: 12px;
  transition: transform 0.3s ease;
}

/* When active, rotate arrow */
.faq-item.active .faq-question .arrow {
  transform: rotate(90deg);
  color: var(--primary-blue);
}

/* Answer area hidden by default */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 15px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  background: #fff;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

/* When active, expand */
.faq-item.active .faq-answer {
  max-height: 200px; /* enough space for text */
  padding-bottom: 15px;
}

/* Add this to style.css */

.info-cards a {
  text-decoration: none; /* Removes the underline */
  color: inherit;        /* Keeps your original icon/text color */
  display: block;        /* Ensures the link covers the whole card area */
}

/* Add/Ensure these are at the bottom of your style.css */

/* Chat Button Style (Reused) */
.chat-btn {
  display:block; 
  margin-top:8px; 
  background:var(--whatsapp-green); 
  color:white; 
  text-align:center; 
  padding:6px; 
  font-size:12px; 
  border-radius:4px; 
  text-decoration:none;
}

/* Vendor List Styles (For the Vendor Grid on Home Page) */
.vendor-card {
  background: white;
  border-radius: 8px;
  padding: 12px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  border: 1px solid transparent;
  transition: all 0.2s;
}

.vendor-logo {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin: 0 auto 8px;
  background: #f4f4f4;
  object-fit: cover;
  border: 3px solid #f4f6f8;
}

.vendor-id {
  background: #eee;
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 4px;
  color: #555;
  display: inline-block;
  margin-bottom: 5px;
  font-family: monospace;
}

.vendor-name {
  font-weight: bold;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 2px;
}

.vendor-cat {
  font-size: 10px;
  color: var(--primary-blue);
  margin-bottom: 6px;
}

.view-vendor-btn {
  background: white;
  border: 1px solid var(--primary-blue);
  color: var(--primary-blue);
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 20px;
  width: 100%;
  cursor: pointer;
  margin-top: 5px;
}

/* --- HEADER LOGO STYLES --- */
.site-logo {
  max-height: 40px; /* Limits height to fit the header bar */
  width: auto;      /* Maintains the logo's aspect ratio */
  display: block;   /* Removes extra spacing below inline images */
  object-fit: contain; /* Ensures the logo fits cleanly */
}

/* Optional: If you find the logo is touching the edges too much */
.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px; /* Ensures space between logo and search bar */
}

/* --- CONTACT PAGE STYLES --- */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  font-size: 13px;
  font-weight: bold;
  color: #555;
  margin-bottom: 5px;
}

.form-group input, 
.form-group textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  font-family: inherit;
  background: #f9f9f9;
}

.form-group input:focus, 
.form-group textarea:focus {
  border-color: var(--primary-blue);
  background: white;
}

.submit-btn {
  background: var(--primary-blue);
  color: white;
  border: none;
  padding: 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s;
  margin-top: 5px;
}

.submit-btn:hover {
  background: #1a75d2;
}

.whatsapp-contact-btn {
  display: inline-block;
  background: #25D366;
  color: white;
  padding: 12px 25px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: transform 0.2s;
}

.whatsapp-contact-btn:active {
  transform: scale(0.98);
}

/* ===========================
   DARK MODE STYLES
   =========================== */
body.dark-mode {
    background-color: #121212;
    color: #e0e0e0;
}

body.dark-mode .app-container {
    background-color: #121212;
}

/* Darken Containers & Cards */
body.dark-mode .header,
body.dark-mode .site-footer,
body.dark-mode .vendor-card,
body.dark-mode .ad-card,
body.dark-mode .review-card,
body.dark-mode .content-page-wrapper,
body.dark-mode .cover-photo-container {
    background-color: #1e1e1e;
    border-color: #333;
    color: #fff;
}

/* Darken Inputs & Dropdowns */
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
    background-color: #2d2d2d;
    color: #fff;
    border-color: #444;
}

/* Fix Text Colors */
body.dark-mode .trending-title,
body.dark-mode .section-header,
body.dark-mode .vendor-name,
body.dark-mode .ad-title,
body.dark-mode .business-name,
body.dark-mode h2, 
body.dark-mode h3 {
    color: #fff !important;
}

body.dark-mode .vendor-cat,
body.dark-mode .ad-location,
body.dark-mode p {
    color: #aaa !important;
}

/* Fix Icons */
body.dark-mode .back-btn {
    color: #fff;
    background: #333;
}


/* --- LIVE SHOP STATUS --- */
.status-open {
    background-color: #e6fffa !important;
    color: #00b894 !important;
    border: 1px solid #00b894;
}

.status-closed {
    background-color: #fff5f5 !important;
    color: #d63031 !important;
    border: 1px solid #d63031;
}

/* =======================================================
   FINAL DARK MODE FIXES (ALL PAGES MERGED)
   ======================================================= */

/* --- 1. GENERAL COMPONENTS (Buttons, Cards, Popups) --- */

/* "Jobs / Safety / FAQ" Buttons */
body.dark-mode .info-card {
    background-color: #2d2d2d !important;
    color: #fff !important;
    border: 1px solid #444 !important;
    box-shadow: none !important;
}
body.dark-mode .info-card a {
    color: #fff !important;
}

/* Category Circles (Home Page Icons) */
body.dark-mode .cat-icon {
    background-color: #2d2d2d !important;
    border: 1px solid #444 !important;
    color: #fff !important;
}
body.dark-mode .cat {
    color: #bbb !important;
}

/* Review Cards */
body.dark-mode .review-card {
    background-color: #1e1e1e !important;
    border: 1px solid #333 !important;
    color: #fff !important;
}
body.dark-mode .review-name {
    color: #fff !important;
}

/* Install Popup & Modals */
body.dark-mode #install-popup,
body.dark-mode .modal-content {
    background-color: #2d2d2d !important;
    color: #fff !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.5) !important;
}
body.dark-mode #install-popup p {
    color: #ccc !important;
}

/* --- 2. SEARCH BARS (Home & Sub-pages) --- */

/* Main Search Box Container */
body.dark-mode .search-box,
body.dark-mode .search-wrapper {
    background-color: transparent !important;
}
/* Sub-page specific wrapper */
body.dark-mode .search-wrapper {
    background-color: #333 !important;
    border: 1px solid #555 !important;
}

/* Input Fields (Both Home & Sub-pages) */
body.dark-mode #main-search,
body.dark-mode .search-input {
    background-color: #333 !important;
    color: #fff !important;
    border: 1px solid #555 !important;
}
/* Sub-page input needs transparency to blend with wrapper */
body.dark-mode .search-input {
    background-color: transparent !important; 
    border: none !important; 
}

/* Dropdowns & Placeholders */
body.dark-mode #search-type {
    background-color: #333 !important;
    color: #fff !important;
    border: 1px solid #555 !important;
}
body.dark-mode input::placeholder {
    color: #bbb !important;
}

/* Search Icons & Back Buttons */
body.dark-mode .fa-search,
body.dark-mode .search-icon {
    background-color: transparent !important;
    color: #ccc !important;
}
body.dark-mode .back-btn {
    background-color: #333 !important;
    color: #fff !important;
    border: 1px solid #555 !important;
}


/* --- 3. VENDOR PROFILES & LISTINGS --- */

/* Main Profile Containers (White boxes) */
body.dark-mode .profile-section,
body.dark-mode .vendor-header,
body.dark-mode .profile-card,
body.dark-mode .store-profile-wrapper,
body.dark-mode .container-white { 
    background-color: #1e1e1e !important;
    color: #fff !important;
    border: none !important;
    box-shadow: none !important;
}

/* Vendor ID Badge (V001) */
body.dark-mode .vendor-id {
    background-color: #333 !important;
    color: #fff !important;
    border: 1px solid #555 !important;
}

/* Text Colors (Names, Descriptions) */
body.dark-mode .business-name,
body.dark-mode .profile-name,
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4 {
    color: #fff !important;
}
body.dark-mode .business-desc,
body.dark-mode .profile-bio,
body.dark-mode p {
    color: #ccc !important;
}

/* Status Badges (Open/Closed) */
body.dark-mode #shop-status {
    background-color: #333 !important;
    border: 1px solid #555 !important;
}

/* Social Icons */
body.dark-mode .social-links a,
body.dark-mode .contact-icons i {
    background-color: transparent !important;
    color: #fff !important;
}


/* --- 4. FAQ PAGE --- */

/* FAQ Containers */
body.dark-mode .faq-item {
    background-color: #1e1e1e !important;
    border-bottom: 1px solid #333 !important;
}
body.dark-mode .faq-container div:first-child {
    color: #aaa !important; /* "General Information" title */
}

/* Questions & Arrows */
body.dark-mode .faq-question span {
    color: #fff !important;
}
body.dark-mode .faq-question .arrow {
    color: #bbb !important;
}

/* Answers (Dropdowns) */
body.dark-mode .faq-answer,
body.dark-mode .faq-item.active .faq-answer {
    background-color: #1e1e1e !important;
    color: #ddd !important;
    border-top: 1px solid #333 !important;
}
body.dark-mode .faq-answer a {
    color: #2d8eff !important;
}
/* ===========================
   DARK MODE: TRUST BANNER FIX
   =========================== */

/* 1. The Container Box */
body.dark-mode .trust-banner {
    background-color: #1e1e1e !important; /* Overrides the light #f9f9f9 */
    border: 1px solid #333 !important;    /* Adds a subtle border */
    color: #fff !important;               /* Forces text to be white */
}

/* 2. The Text inside (Verified Vendors, etc.) */
body.dark-mode .trust-banner div {
    color: #ddd !important; /* Light Grey text */
}

/* 3. The Icons (Optional - keeps them bright blue or tweaks them) */
body.dark-mode .trust-banner i {
    /* The blue #2d8eff usually looks fine, but if you want it lighter: */
    /* color: #5dade2 !important; */ 
}
/* Dark Mode for About Us Developer Box */
body.dark-mode .dev-box {
    background-color: #1e1e1e !important; /* Dark background */
    border: 1px solid #333 !important;    /* Subtle border */
    color: #ddd !important;               /* Light text */
}
body.dark-mode .dev-box a {
    color: #4da3ff !important; /* Make the website link readable */
}
/* Fix Contact Page Text in Dark Mode */
body.dark-mode .content-page-wrapper p {
    color: #ccc !important;
}
/* ===========================
   FLOATING WHATSAPP WIDGET
   =========================== */

.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 25px; /* Distance from bottom */
    right: 25px;  /* Distance from right */
    background-color: #25d366; /* WhatsApp Green */
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    z-index: 1000; /* Ensures it stays on top of everything */
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.whatsapp-float:hover {
    background-color: #1ebc57; /* Slightly darker green on hover */
    transform: scale(1.1); /* Grows slightly when you touch it */
}

.my-float {
    /* No extra margin needed with flexbox, but keep for safety */
}

/* Pulse Animation (Makes it "beat" to grab attention) */
.whatsapp-float {
    animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

/* Tooltip Text (Appears on Hover) */
.tooltip-text {
    visibility: hidden;
    width: 120px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    right: 70px; /* Positions it to the left of the button */
    top: 15px;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip-text::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%; /* Arrow pointing to the button */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent #333;
}

.whatsapp-float:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* ===========================
   SKELETON LOADING ANIMATION
   =========================== */

/* The Skeleton Card Container */
.skeleton-card {
    background: #fff;
    border-radius: 15px;
    padding: 15px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    border: 1px solid #eee;
}

/* The Shimmer Effect (The Magic) */
.skeleton {
    background: #eee;
    background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
    border-radius: 5px;
    background-size: 200% 100%;
    animation: 1.5s skeleton-shine linear infinite;
}

/* Specific Shapes */
.sk-img {
    width: 60px;
    height: 60px;
    border-radius: 50%; /* Circle */
}
.sk-text-short {
    width: 40%;
    height: 10px;
}
.sk-text-long {
    width: 80%;
    height: 12px;
}
.sk-btn {
    width: 100%;
    height: 35px;
    border-radius: 20px;
    margin-top: 5px;
}

/* Keyframes for the moving shimmer */
@keyframes skeleton-shine {
    to {
        background-position-x: -200%;
    }
}

/* --- DARK MODE SUPPORT --- */
body.dark-mode .skeleton-card {
    background-color: #1e1e1e !important;
    border: 1px solid #333 !important;
}
body.dark-mode .skeleton {
    background: #333;
    background: linear-gradient(110deg, #333 8%, #444 18%, #333 33%);
    background-size: 200% 100%;
}
/* ===========================
   VERIFICATION TICKS
   =========================== */

/* Plan 2: BLUE TICK (Standard) */
.tick-blue {
    color: #2d8eff;
    font-size: 16px;
    margin-left: 5px;
}

/* Plan 3: GOLD TICK (Premium - Simple) */
.tick-gold {
    color: #ffc107; /* Solid Gold Color */
    font-size: 16px;
    margin-left: 5px;
}
/* ===========================
   AMBASSADOR PAGE STYLES
   =========================== */

/* Hero Section */
.program-hero {
    background: linear-gradient(135deg, #2d8eff 0%, #1e5799 100%);
    color: white;
    padding: 30px 20px;
    border-radius: 10px;
    text-align: center;
    margin-bottom: 25px;
}
.program-hero h2 { margin: 0 0 10px; font-size: 22px; }
.program-hero p { font-size: 13px; opacity: 0.9; line-height: 1.5; }

/* Step Cards */
.step-card {
    background: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 15px;
    border-left: 4px solid #2d8eff;
}
.step-num {
    background: #2d8eff;
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    flex-shrink: 0;
}

/* Commission Table */
.commission-table {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0;
    font-size: 12px;
}
.commission-table th, .commission-table td {
    border: 1px solid #eee;
    padding: 10px;
    text-align: left;
}
.commission-table th { background: #f4f6f8; color: #333; }

/* Verified Ambassador List */
.ambassador-list {
    display: grid;
    gap: 10px;
    margin-top: 15px;
}
.ambassador-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 8px;
    background: #fff;
}
.amb-info { display: flex; align-items: center; gap: 10px; }
.amb-img { width: 35px; height: 35px; border-radius: 50%; object-fit: cover; }
.amb-name { font-size: 13px; font-weight: bold; }
.amb-code { font-size: 10px; color: #2d8eff; background: #eef6ff; padding: 2px 6px; border-radius: 4px; }

/* Dark Mode Overrides */
body.dark-mode .step-card { background: #1e1e1e !important; border: 1px solid #333 !important; border-left: 4px solid #2d8eff !important; }
body.dark-mode .commission-table th { background: #333 !important; color: #ddd !important; border-color: #444 !important; }
body.dark-mode .commission-table td { border-color: #444 !important; color: #ccc !important; }
body.dark-mode .ambassador-card { background: #1e1e1e !important; border-color: #333 !important; }
body.dark-mode .amb-name { color: #fff !important; }
body.dark-mode .amb-code { background: #1a3a5a !important; color: #4da3ff !important; }
/* Add to asset/style.css if not already there */
.modal-overlay {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 2000;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.3s;
}

.modal-content {
    background: white;
    padding: 20px;
    border-radius: 15px;
    width: 80%;
    max-width: 300px;
    position: relative;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.close-modal {
    position: absolute;
    top: 10px; right: 15px;
    font-size: 24px;
    cursor: pointer;
    color: #999;
}

/* Dark Mode Support */
body.dark-mode .modal-content {
    background: #1e1e1e;
    color: white;
}
body.dark-mode .modal-content h3 {
    color: white;
}
/* Product Description Text */
.ad-desc {
    font-size: 11px;       /* Smaller than title */
    color: #777;           /* Grey color to differentiate from black title */
    margin-top: 2px;
    margin-bottom: 5px;    /* Spacing before the location */
    line-height: 1.3;      /* Good spacing between lines */
    
    /* Optional: Limit to 2 lines so it doesn't break the card layout */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Dark Mode Fix */
body.dark-mode .ad-desc {
    color: #aaa;
}

/* ===========================
   BLOG & NEWS PAGE STYLES
   =========================== */

/* Hero Section */
.blog-header {
    background: linear-gradient(135deg, #2d8eff, #1e5799);
    color: white;
    padding: 25px 20px;
    border-radius: 0 0 20px 20px;
    text-align: center;
    margin-bottom: 20px;
}

.blog-list {
    padding: 0 15px 80px 15px; /* Bottom padding for footer space */
    max-width: 800px;
    margin: 0 auto;
}

/* The Blog Card */
.blog-card {
    background: white;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 15px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    display: flex;
    gap: 15px;
    cursor: pointer;
    border: 1px solid #eee;
    transition: transform 0.2s;
}
.blog-card:active { transform: scale(0.98); }

/* Thumbnail Image (Small) */
.blog-thumb {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

/* Text Section */
.blog-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.blog-date {
    font-size: 10px;
    color: #888;
    margin-bottom: 4px;
    text-transform: uppercase;
    font-weight: bold;
}
.blog-title {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
    line-height: 1.3;
}
.blog-snippet {
    font-size: 11px;
    color: #666;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limits text to 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===========================
   BLOG POPUP MODAL STYLES
   =========================== */
.blog-modal {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 9999;
    justify-content: center;
    align-items: flex-end; /* Slides up from bottom */
}

.blog-modal-content {
    background: white;
    width: 100%;
    max-width: 600px;
    height: 85vh; /* Takes up 85% of screen height */
    border-radius: 20px 20px 0 0;
    padding: 0;
    position: relative;
    animation: slideUp 0.3s ease-out;
    display: flex;
    flex-direction: column;
}

/* Big Image in Modal */
.modal-hero-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 20px 20px 0 0;
}

/* Scrollable Content Area */
.modal-body {
    padding: 20px;
    overflow-y: auto;
}

.modal-title { font-size: 18px; font-weight: bold; margin-bottom: 5px; color: #222; }
.modal-date { font-size: 11px; color: #888; margin-bottom: 15px; display: block; }
.modal-text { font-size: 14px; line-height: 1.6; color: #444; }

.close-blog-btn {
    position: absolute;
    top: 15px; right: 15px;
    background: rgba(0,0,0,0.5);
    color: white;
    width: 30px; height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    z-index: 10;
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* Dark Mode Overrides */
body.dark-mode .blog-card { background: #1e1e1e !important; border-color: #333 !important; }
body.dark-mode .blog-title { color: #fff !important; }
body.dark-mode .blog-snippet { color: #aaa !important; }
body.dark-mode .blog-modal-content { background: #1e1e1e !important; }
body.dark-mode .modal-title { color: #fff !important; }
body.dark-mode .modal-text { color: #ccc !important; }

 /* Custom Form Styles */
      .app-form {
          background: white;
          padding: 20px;
          border-radius: 10px;
          margin-top: 15px;
          text-align: left;
          color: #333;
      }
      .form-group {
          margin-bottom: 15px;
      }
      .form-label {
          display: block;
          font-size: 12px;
          font-weight: bold;
          margin-bottom: 5px;
          color: #555;
      }
      .form-input, .form-select, .form-textarea {
          width: 100%;
          padding: 10px;
          border: 1px solid #ddd;
          border-radius: 8px;
          font-size: 13px;
          background: #f9f9f9;
          outline: none;
          font-family: inherit;
      }
      .form-textarea {
          resize: vertical;
          min-height: 80px;
      }
      .form-input:focus, .form-textarea:focus {
          border-color: #2d8eff;
          background: #fff;
      }
      .apply-btn {
          width: 100%;
          background: #2d8eff;
          color: white;
          border: none;
          padding: 12px;
          border-radius: 25px;
          font-size: 14px;
          font-weight: bold;
          cursor: pointer;
          margin-top: 10px;
      }
      .notice-box {
          background: #e3f2fd;
          border-left: 4px solid #2d8eff;
          padding: 10px;
          margin-top: 20px;
          border-radius: 4px;
          font-size: 11px;
          color: #0d47a1;
          line-height: 1.5;
      }

      /* Dark Mode Overrides */
      body.dark-mode .app-form { background: #1e1e1e; color: #fff; }
      body.dark-mode .form-label { color: #ccc; }
      body.dark-mode .form-input, body.dark-mode .form-select, body.dark-mode .form-textarea { 
          background: #2a2a2a; border-color: #444; color: #fff; 
      }
      body.dark-mode .notice-box { background: #1a3a5a; border-color: #4da3ff; color: #d0e6ff; }

/* ===========================
   PRELOADER STYLES
   =========================== */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff; /* White background */
    z-index: 99999;      /* Sit on top of everything */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease-out, visibility 0.5s;
}

.loader-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

/* The Logo Animation */
.loader-logo {
    width: 80px; /* Adjust size */
    animation: pulseLogo 1.5s infinite ease-in-out;
}

@keyframes pulseLogo {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}

/* Optional: A small loading bar below the logo */
.loading-bar {
    width: 50px;
    height: 4px;
    background: #eee;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.loading-bar::after {
    content: '';
    position: absolute;
    left: -50%;
    height: 100%;
    width: 50%;
    background: #2d8eff; /* Your Brand Blue */
    animation: slideBar 1s infinite linear;
}

@keyframes slideBar {
    0% { left: -50%; }
    100% { left: 100%; }
}

/* Dark Mode Support */
body.dark-mode #preloader {
    background: #121212;
}