/* Base dropdown item */
  .dropdown-link,
  #mobileFilterDropdown a,
  #mobileFilterDropdown button,
  [data-dropdown-menu] a,
  [data-dropdown-menu] button,
  [data-sub-dropdown] a,
  [data-sub-dropdown] button {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 400;
    color: #374151; /* slate-700 */
    border-radius: 6px;
    transition: all 0.25s ease-in-out;
  }

  /* MAIN MENU */
  [data-dropdown] > button,
  [data-dropdown] > a {
    font-size: 15px;
    font-weight: 500;
    color: #111827; /* slate-900 */
    background: #fff;
    border-bottom: 1px solid #f3f4f6;
  }
.z-100{
  z-index: 100!important;
}
  [data-dropdown] > button:hover,
  [data-dropdown] > a:hover {
    background-color: #f9fafb;
    color: #000 !important;
    font-weight: 600;
  }

  /* SUB MENU */
  [data-sub-dropdown] > a,
  [data-sub-dropdown] > button {
    font-size: 14px;
    font-weight: 400;
    padding-left: 22px;
    color: #4b5563; /* slate-600 */
    background: #fff;
  }

  [data-sub-dropdown] > a:hover,
  [data-sub-dropdown] > button:hover {
    background-color: #fafafa;
    color: #000 !important;
    font-weight: 600;
  }

  /* LIST ITEMS */
  [data-sub-dropdown] li {
    padding-left: 34px;
    font-size: 13.5px;
    color: #6b7280; /* slate-500 */
    transition: color 0.2s ease;
  }

  [data-sub-dropdown] li:hover {
    background-color: #f9fafb;
    color: #000 !important;
    font-weight: 600;
    border-radius: 4px;
  }

  /* ACTIVE / SELECTED STATES */
  .dropdown-link.active,
  #mobileFilterDropdown a.active,
  #mobileFilterDropdown button.active,
  [data-dropdown-menu] a.active,
  [data-dropdown-menu] button.active,
  [data-sub-dropdown] a.active,
  [data-sub-dropdown] button.active,
  [data-dropdown-toggle][aria-expanded="true"],
  [aria-current="true"] {
    color: #000 !important;
    font-weight: 600 !important;
    background-color: #f3f4f6; /* subtle highlight */
  }

  /* Icons */
  .dropdown-icon,
  .dropdown-link img.dropdown-icon {
    width: 16px;
    height: 16px;
    opacity: 0.6;
    flex-shrink: 0;
    filter: grayscale(100%) brightness(0.4);
    transition: opacity 0.2s ease, filter 0.2s ease;
  }

  .dropdown-link:hover .dropdown-icon,
  #mobileFilterDropdown a:hover .dropdown-icon,
  #mobileFilterDropdown button:hover .dropdown-icon,
  .active .dropdown-icon {
    opacity: 1;
    filter: none;
  }

  /* Arrows */
  .dropdown-chevron {
    width: 14px;
    height: 14px;
    transition: transform 0.2s ease, opacity 0.2s ease;
    opacity: 0.5;
  }

  [data-dropdown-toggle][aria-expanded="true"] .dropdown-chevron {
    transform: rotate(90deg);
    opacity: 0.8;
  }

  /* Scroll */
  #mobileFilterDropdown nav {
    max-height: 320px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #e6b800 #f9fafb;
  }

  #mobileFilterDropdown nav::-webkit-scrollbar {
    width: 6px;
  }
  #mobileFilterDropdown nav::-webkit-scrollbar-track {
    background: #f9fafb;
    border-radius: 6px;
  }
  #mobileFilterDropdown nav::-webkit-scrollbar-thumb {
    background-color: #e6b800;
    border-radius: 6px;
  }
  /* ==== FORCE BOLD BLACK HOVER + ACTIVE (append at end) ==== */

/* Hover: links & buttons at all levels */
#mobileFilterDropdown a:hover,
#mobileFilterDropdown button:hover,
#filterPanel [data-dropdown] a:hover,
#filterPanel [data-dropdown] button:hover,
[data-dropdown-menu] a:hover,
[data-dropdown-menu] button:hover,
[data-sub-dropdown] a:hover,
[data-sub-dropdown] button:hover {
  color: #000 !important;
  font-weight: 600 !important;
  background-color: #f9fafb; /* soft highlight */
}

/* Hover: list items that are plain <li> (no <a>) */
[data-sub-dropdown] li:hover,
#mobileFilterDropdown [id$="Dropdown"] li:hover {
  color: #000 !important;
  font-weight: 600 !important;
  background-color: #f9fafb;
  border-radius: 4px;
}

/* Active/Selected states: stays bold black */
#mobileFilterDropdown .active,
#filterPanel .active,
[data-dropdown-menu] .active,
[data-sub-dropdown] .active,
#mobileFilterDropdown [data-dropdown-toggle][aria-expanded="true"],
#filterPanel [data-dropdown-toggle][aria-expanded="true"],
#mobileFilterDropdown [aria-current="true"],
#filterPanel [aria-current="true"] {
  color: #000 !important;
  font-weight: 600 !important;
  background-color: #f3f4f6; /* subtle persistent highlight */
}

/* Icons brighten to match text on hover/active */
#mobileFilterDropdown a:hover .dropdown-icon,
#mobileFilterDropdown button:hover .dropdown-icon,
[data-dropdown-menu] a:hover .dropdown-icon,
[data-dropdown-menu] button:hover .dropdown-icon,
.active .dropdown-icon {
  opacity: 1 !important;
  filter: none !important;
}


  /* keep your brand + tailwind helpers that you set earlier */
  .text-emerald-600{--tw-text-opacity:1;color:rgb(247 192 18)!important;}
  .bg-slate-900{--tw-bg-opacity:1;background-color:rgb(0 0 0)!important;}
  .glass{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:rgba(255,255,255,.65);}
  .line-clamp-2{-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}

  /* ✅ restored UI tokens used across the page */
  .chip{
    display:inline-flex;align-items:center;gap:.375rem;
    padding:.375rem .75rem;border-radius:.75rem;
    border:1px solid rgb(226 232 240);background:#fff;
    font-size:.75rem;white-space:nowrap;
    transition:all .2s ease;
  }
  .chip:hover{background:#f8fafc;box-shadow:0 2px 6px rgba(0,0,0,.08)}

  .ico{
    display:inline-flex;align-items:center;justify-content:center;
    width:2.75rem;height:2.75rem;border-radius:.75rem;
  }

  /* Base card look so they don’t rely only on JS */
  .sector{
    background:#fff;border:1px solid rgb(226 232 240);
    border-radius:1rem;padding:1.25rem;
    display:flex;flex-direction:column;justify-content:space-between;
    box-shadow:0 6px 20px -8px rgba(2,6,23,.12);
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .sector:hover{transform:translateY(-4px);box-shadow:0 14px 30px -10px rgba(2,6,23,.25)}

  /* Primary / action buttons */
  .btn-primary{
    display:inline-flex;justify-content:center;align-items:center;
    padding:.5rem 1rem;border-radius:.75rem;
    background:#2347e6;color:#fff;font-weight:600;
    box-shadow:0 10px 30px -10px rgba(2,6,23,.25);
    transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
  }
  .btn-primary:hover{background:#1936b4}
  .btn-primary:focus{outline:2px solid rgba(35,71,230,.28);outline-offset:2px}

    .no-scrollbar::-webkit-scrollbar{display:none}
    .no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}
    .line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
    dialog::backdrop{background:rgba(2,6,23,.55)}

    .no-scrollbar::-webkit-scrollbar{display:none}
    .no-scrollbar{-ms-overflow-style:none;scrollbar-width:none
    }
    .step-active{background:#f1f5ff;border-color:#c7d2fe}
    .timeline:before{content:'';position:absolute;left:14px;top:0;bottom:0;width:2px;background:#e2e8f0}

    :root {
      --csl-primary: #0d6efd; /* change to brand primary */
      --csl-dark: #101828;
      --csl-muted: #667085;
      --csl-bg: #f8fafc;
      --csl-card: #ffffff;
      --csl-gradient: linear-gradient(135deg, #003833 0%, #10025b 100%); /* swap if needed */
    }
    body { background: var(--csl-bg); color: var(--csl-dark); }
    .navbar { backdrop-filter: saturate(180%) blur(6px); }
    .hero {
      background: var(--csl-gradient);
      color: #fff;
      border-bottom-left-radius: 2rem;
      border-bottom-right-radius: 2rem;
    }
    .hero .lead { color: #e6e9ef; }
    .plan-card {
      border: 1px solid #e5e7eb;
      border-radius: 1.25rem;
      background: var(--csl-card);
      transition: transform .2s ease, box-shadow .2s ease;
    }
    .plan-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(16,24,40,.12); }
    .badge-top {
      position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
      background: #0d6efd; color: #fff; border-radius: 999px; padding: .35rem .75rem; font-size: .75rem;
      box-shadow: 0 6px 18px rgba(13,110,253,.35);
    }
    .price { font-weight: 800; letter-spacing: -0.02em; }
    .feature i { color: #16a34a; }
    .section-title { letter-spacing: -.02em; }
    .kicker { text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: var(--csl-muted); font-size: .75rem; }
    .footnote { color: var(--csl-muted); font-size: .9rem; }
    .icon-circle {
      width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: #eef2ff;
    }
    .compare-table th, .compare-table td { vertical-align: middle; }
    .shadow-soft { box-shadow: 0 10px 30px rgba(16,24,40,.06); }
    .btn-check:checked + .btn, .btn:hover { filter: brightness(.98); }

    /* Smooth dropdown transitions */
#toolbarFilter,
#filterPanel,
#mobileFilterMenu,
#businessCategories {
  transition: all 0.35s ease;
  transform: translateY(-8px);
  opacity: 0;
}
#toolbarFilter:not(.hidden),
#filterPanel:not(.hidden),
#mobileFilterMenu:not(.hidden),
#businessCategories:not(.hidden) {
  transform: translateY(0);
  opacity: 1;
}

/* Shared chat typing dots (fallback) */

/* Floating contact icons overlay */
.contact-icons{opacity:0;transition:opacity .25s ease}
.card .relative:hover .contact-icons{opacity:1}
.contact-icons a,.contact-icons button{box-shadow:0 6px 18px rgba(0,0,0,.15);backdrop-filter:blur(6px);transition:transform .2s ease,background-color .2s ease}
.contact-icons a:hover,.contact-icons button:hover{transform:translateY(-1px)}
/* Chat drawer animation states */
#chatDrawer.open{transform:translateY(0);opacity:1;pointer-events:auto}
#chatDrawer{transform:translateY(calc(100% + 24px));}
/* Typing dots */
.typing-dot{width:6px;height:6px;background:#999;border-radius:50%;animation:blink 1s infinite alternate}
.typing-dot:nth-child(2){animation-delay:.2s}
.typing-dot:nth-child(3){animation-delay:.4s}
@keyframes blink{0%{opacity:.3}100%{opacity:1}}

/* shared chat popup (fallback) */

/* Chat popups (max two) */
#chatPopContainer{display:flex;flex-direction:row;gap:12px;align-items:flex-end}
.chat-pop{width:22rem;max-width:92vw;background:#fff;border:1px solid #e5e7eb;border-radius:1.25rem;box-shadow:0 15px 40px rgba(0,0,0,.15);overflow:hidden}
.chat-pop .head{background:linear-gradient(90deg,#ffc000,#ffbb00);padding:.65rem .9rem;display:flex;align-items:center;justify-content:space-between}
.chat-pop .head .meta{display:flex;align-items:center;gap:.5rem}
.chat-pop .logo{width:32px;height:32px;border-radius:9999px;object-fit:cover;border:1px solid rgba(0,0,0,.1)}
.chat-pop .title{font-weight:600;font-size:.95rem}
.chat-pop .close{color:rgba(0,0,0,.6)}
.chat-pop .body{height:18rem;background:#f8fafc;padding:.75rem;overflow-y:auto}
.chat-pop .typing{display:none;color:#6b7280;padding:.4rem .9rem;gap:.25rem;align-items:center}
.chat-pop .foot{display:flex;gap:.5rem;padding:.6rem;border-top:1px solid #eee;background:#fff}
.chat-pop input{flex:1;border:1px solid #d1d5db;border-radius:9999px;padding:.5rem .9rem;font-size:.9rem;outline:none}
.chat-pop button.send{background:#ffc000;color:#000;border-radius:9999px;padding:.5rem .9rem}
.chat-pop .bubble{max-width:80%;padding:.45rem .6rem;border-radius:.9rem;box-shadow:0 2px 6px rgba(0,0,0,.06);font-size:.9rem}
.chat-pop .bubble.me{background:#ffc000;color:#000;margin-left:auto}
.chat-pop .bubble.them{background:#e5e7eb;color:#1f2937}

@media (max-width: 640px){
  #chatPopContainer{right:.75rem;bottom:.75rem;gap:.5rem}
  .chat-pop{width:min(92vw,20.5rem)}
}

/* Contact icon reveal */
.contact-icons{opacity:0;transition:opacity .25s ease}
.card .relative:hover .contact-icons{opacity:1}
.contact-icons a,.contact-icons button{box-shadow:0 6px 18px rgba(0,0,0,.15);backdrop-filter:blur(6px);transition:transform .2s ease,background-color .2s ease}
.contact-icons a:hover,.contact-icons button:hover{transform:translateY(-1px)}

/* typing dots */
.typing-dot{width:6px;height:6px;background:#9ca3af;border-radius:50%;animation:blink 1s infinite alternate}
.typing-dot:nth-child(2){animation-delay:.2s}
.typing-dot:nth-child(3){animation-delay:.4s}
@keyframes blink{0%{opacity:.3}100%{opacity:1}}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}