/* ==========================================================
   THE BOT YARD — Dark AI Tech Override
   Loaded after voyage.css — overrides color palette + adds
   AI-specific components (pricing badges, tool cards, etc.)
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ---- 1. DESIGN TOKEN OVERRIDES ---- */
:root {
  --teal:        #7c3aed;          /* Purple — primary accent         */
  --teal-dark:   #6d28d9;          /* Dark purple                     */
  --teal-light:  #1e1b38;          /* Dark purple tint (card hover)   */
  --gold:        #06b6d4;          /* Cyan — secondary accent         */
  --gold-dark:   #0891b2;          /* Dark cyan                       */
  --white:       #13131f;          /* Page background (now dark)      */
  --gray-50:     #0d0d14;          /* Deepest bg                      */
  --gray-100:    #1a1a2e;          /* Card bg                         */
  --gray-300:    #2a2a45;          /* Borders                         */
  --gray-500:    #94a3b8;          /* Muted text                      */
  --gray-700:    #cbd5e1;          /* Body text                       */
  --gray-900:    #f1f5f9;          /* Headings (light on dark)        */
  --shadow-sm:   0 2px 8px rgba(0,0,0,.5);
  --shadow:      0 4px 24px rgba(124,58,237,.18);
  --shadow-lg:   0 8px 40px rgba(124,58,237,.28);

  /* New AI tokens */
  --ai-green:    #10b981;
  --ai-yellow:   #f59e0b;
  --ai-red:      #ef4444;
  --ai-card:     #16162a;
  --ai-border:   #2a2a45;
  --glow:        0 0 20px rgba(124,58,237,.35);
}

/* ---- 2. GLOBAL BASE ---- */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Inter', 'Poppins', sans-serif !important;
  background: var(--gray-50) !important;
  color: var(--gray-700) !important;
}

a           { color: var(--gold) !important; }
a:hover     { color: #67e8f9 !important; }

h1, h2, h3, h4, h5 {
  color: var(--gray-900) !important;
  font-family: 'Inter', sans-serif !important;
}

/* ---- 3. TOPBAR ---- */
.topbar,
.line_header { background: #0a0a12 !important; border-bottom: 1px solid var(--ai-border) !important; }
.topbar a, .topbar a:hover { color: var(--gray-500) !important; }
.topbar a:hover { color: var(--gray-700) !important; }

/* ---- 4. NAVBAR / HEADER ---- */
.navbar,
.header,
.bg,
.body_background { background: var(--white) !important; }

.navbar {
  border-bottom: 1px solid var(--ai-border) !important;
  box-shadow: 0 1px 0 var(--ai-border) !important;
}

.navbar__logo, .logo-img a span { color: var(--gold) !important; }

/* Main nav links */
.navbar__nav a,
.sf-menu.header_menu > li > a,
.sf-menu li a {
  color: var(--gray-500) !important;
  background: transparent !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: .88rem !important;
  letter-spacing: .01em !important;
}
.navbar__nav a:hover,
.sf-menu.header_menu > li > a:hover,
.sf-menu li:hover > a,
.sf-menu li.sfHover > a {
  color: var(--gray-900) !important;
  background: var(--teal-light) !important;
  border-radius: 6px !important;
}

/* Dropdown */
.sf-menu ul {
  background: #1a1a2e !important;
  border: 1px solid var(--ai-border) !important;
  border-radius: 10px !important;
  box-shadow: var(--shadow) !important;
}
.sf-menu ul li a {
  color: var(--gray-500) !important;
  background: transparent !important;
}
.sf-menu ul li a:hover { color: var(--gray-900) !important; background: var(--teal-light) !important; }

/* ---- 5. HERO / SEARCH SECTION ---- */
.hero,
.searchform-back,
.index-header-form,
.b_mainpage .bg {
  background: linear-gradient(160deg, #0d0d14 0%, #120b24 50%, #0d0d14 100%) !important;
  border-bottom: 1px solid var(--ai-border) !important;
}

.hero__title { color: #fff !important; }
.hero__subtitle { color: var(--gray-500) !important; }

/* Eyebrow badge in hero */
.hero__eyebrow {
  background: rgba(124,58,237,.15) !important;
  border-color: var(--teal) !important;
  color: #c4b5fd !important;
}

/* Hero stats */
.hero__stat strong { color: var(--gold) !important; }
.hero__stat span   { color: var(--gray-500) !important; }

/* Search box */
.search-box,
.search_block,
.searchform-back .forma { background: #1a1a2e !important; border: 1px solid var(--ai-border) !important; border-radius: 12px !important; }
.search-box input, .search-box select,
.search_block input[type=text],
.search_block select,
.search-term input,
input#search_term_text {
  background: #0d0d14 !important;
  color: var(--gray-700) !important;
  border: 1px solid var(--ai-border) !important;
  border-radius: 8px !important;
}
.search-box input::placeholder,
input#search_term_text::placeholder { color: var(--gray-500) !important; }

/* Search submit */
.btn--primary, .btn--gold,
.search-box .btn,
input[type=submit].btn,
a.index-btnsrch,
.index-btnsrch {
  background: var(--teal) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  transition: background .2s !important;
}
.btn--primary:hover, .btn--gold:hover,
a.index-btnsrch:hover { background: var(--teal-dark) !important; color: #fff !important; }

/* ---- 6. CATEGORY STRIP ---- */
.category-strip { background: var(--white) !important; border-bottom: 1px solid var(--ai-border) !important; }
.cat-chip {
  background: var(--ai-card) !important;
  border-color: var(--ai-border) !important;
  color: var(--gray-500) !important;
  border-radius: 10px !important;
}
.cat-chip:hover, .cat-chip.active {
  background: var(--teal-light) !important;
  border-color: var(--teal) !important;
  color: #c4b5fd !important;
}

/* ---- 7. TOOL / LISTING CARDS ---- */
.card,
.appartment_item,
.appartment_item.block {
  background: var(--ai-card) !important;
  border: 1px solid var(--ai-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
  overflow: hidden !important;
}
.card:hover,
.appartment_item:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow) !important;
  border-color: var(--teal) !important;
}

.card__body { padding: 18px !important; }

.card__category,
.mini_location_description { color: var(--gold) !important; font-size: .72rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .1em !important; }

.card__title, .title_block { background: transparent !important; }
.card__title a,
.title_block a {
  color: var(--gray-900) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: .97rem !important;
  line-height: 1.35 !important;
}
.card__title a:hover, .title_block a:hover { color: var(--gold) !important; }

.card__excerpt,
.desc { color: var(--gray-500) !important; font-size: .84rem !important; }

.card__meta {
  border-top-color: var(--ai-border) !important;
  color: var(--gray-500) !important;
}

/* Card no-photo placeholder */
.card__no-photo {
  background: linear-gradient(145deg, #16162a 0%, #1e1b38 100%) !important;
}

/* ---- 8. PRICING BADGES (new) ---- */
.ai-badge-free {
  display: inline-block;
  background: rgba(16,185,129,.15);
  color: var(--ai-green);
  border: 1px solid var(--ai-green);
  padding: 3px 10px;
  border-radius: 20px;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.ai-badge-paid {
  display: inline-block;
  background: rgba(124,58,237,.15);
  color: #c4b5fd;
  border: 1px solid var(--teal);
  padding: 3px 10px;
  border-radius: 20px;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.ai-badge-freemium {
  display: inline-block;
  background: rgba(245,158,11,.15);
  color: var(--ai-yellow);
  border: 1px solid var(--ai-yellow);
  padding: 3px 10px;
  border-radius: 20px;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.ai-badge-contact {
  display: inline-block;
  background: rgba(148,163,184,.1);
  color: var(--gray-500);
  border: 1px solid var(--ai-border);
  padding: 3px 10px;
  border-radius: 20px;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
}

/* Transaction type badge on card */
.apartment_type,
.card__badge, .card__badge--teal {
  background: rgba(6,182,212,.15) !important;
  color: var(--gold) !important;
  border: 1px solid var(--gold) !important;
  border-radius: 20px !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  padding: 3px 10px !important;
}

/* Price / Pricing display */
.price { color: var(--ai-green) !important; font-weight: 700 !important; }
.price-0, .price[data-price="0"] { color: var(--ai-green) !important; }

/* ---- 9. VISIT TOOL BUTTON ---- */
.ai-btn-visit,
.btn-visit-tool {
  display: inline-block;
  background: var(--teal) !important;
  color: #fff !important;
  padding: 8px 18px !important;
  border-radius: 8px !important;
  font-size: .84rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all .2s ease !important;
  border: none !important;
}
.ai-btn-visit:hover, .btn-visit-tool:hover {
  background: var(--teal-dark) !important;
  color: #fff !important;
  box-shadow: var(--glow) !important;
}

/* ---- 10. SIDEBAR & FILTERS ---- */
.sidebar-widget,
.sidebar { background: var(--ai-card) !important; border: 1px solid var(--ai-border) !important; border-radius: 12px !important; }
.sidebar-widget h4 {
  color: var(--gold) !important;
  border-bottom-color: var(--ai-border) !important;
  background: var(--teal-light) !important;
  border-radius: 6px 6px 0 0 !important;
}

/* Filter inputs */
.sidebar input[type=text], .sidebar select,
input[type=text], input[type=email], input[type=password],
input[type=number], select, textarea {
  background: var(--ai-card) !important;
  border: 1px solid var(--ai-border) !important;
  color: var(--gray-700) !important;
  border-radius: 8px !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--teal) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,.15) !important;
}
input::placeholder, textarea::placeholder { color: var(--gray-500) !important; }
label { color: var(--gray-700) !important; }

/* Checkboxes & radios */
input[type=checkbox], input[type=radio] { accent-color: var(--teal) !important; }

/* ---- 11. SECTION BACKGROUNDS ---- */
.section--gray,
.content,
.inner-content,
.main-content-wrapper {
  background: var(--gray-50) !important;
}

/* ---- 12. PAGINATION ---- */
.pagination a, .pagination span,
.pagination li a {
  background: var(--ai-card) !important;
  border-color: var(--ai-border) !important;
  color: var(--gray-500) !important;
  border-radius: 8px !important;
}
.pagination a:hover,
.pagination .active a,
.pagination .selected a,
.pagination span.current,
.pagination li.selected a {
  background: var(--teal) !important;
  border-color: var(--teal) !important;
  color: #fff !important;
}

/* ---- 13. ARTICLE / ENTRIES ---- */
.article-header {
  background: linear-gradient(135deg, #12102a 0%, #1a1035 100%) !important;
}
.article-content { color: var(--gray-700) !important; }
.article-content h2 { color: #c4b5fd !important; }
.article-content blockquote {
  background: var(--teal-light) !important;
  border-left-color: var(--gold) !important;
  color: var(--gray-700) !important;
}

/* Entries/blog list */
.entries-item,
.entry-item {
  background: var(--ai-card) !important;
  border: 1px solid var(--ai-border) !important;
  border-radius: 12px !important;
  transition: border-color .2s !important;
}
.entries-item:hover, .entry-item:hover { border-color: var(--teal) !important; }

/* ---- 14. TABLES ---- */
table { border-collapse: collapse !important; }
th { background: var(--ai-card) !important; color: var(--gray-900) !important; border-color: var(--ai-border) !important; }
td { color: var(--gray-500) !important; border-color: var(--ai-border) !important; }
tr:hover td { background: var(--teal-light) !important; }

/* ---- 15. ALERTS & FLASH MESSAGES ---- */
.flash-success, .alert-success { background: rgba(16,185,129,.1) !important; border: 1px solid var(--ai-green) !important; color: var(--ai-green) !important; border-radius: 8px !important; padding: 12px 16px !important; }
.flash-error, .alert-danger    { background: rgba(239,68,68,.1)   !important; border: 1px solid var(--ai-red)   !important; color: #fca5a5                !important; border-radius: 8px !important; padding: 12px 16px !important; }
.flash-notice, .alert-info     { background: rgba(6,182,212,.1)   !important; border: 1px solid var(--gold)    !important; color: var(--gold)            !important; border-radius: 8px !important; padding: 12px 16px !important; }

/* ---- 16. RATING ---- */
.item-rating-grade { color: var(--ai-yellow) !important; font-weight: 700 !important; }
.item-view-all-comments a { color: var(--gray-500) !important; font-size: .75rem !important; }

/* ---- 17. TAGS ---- */
.tag {
  background: var(--ai-card) !important;
  color: var(--gray-500) !important;
  border: 1px solid var(--ai-border) !important;
  border-radius: 100px !important;
}
.tag:hover { background: var(--teal-light) !important; color: #c4b5fd !important; border-color: var(--teal) !important; }

/* ---- 18. FOOTER ---- */
.footer, #footer, #footer-links, #footer-two-links {
  background: #09090f !important;
  border-top: 1px solid var(--ai-border) !important;
  color: var(--gray-500) !important;
}
.footer a, #footer a { color: var(--gray-500) !important; }
.footer a:hover, #footer a:hover { color: var(--gold) !important; }

.footer__social-link {
  background: rgba(255,255,255,.05) !important;
  border-color: var(--ai-border) !important;
  color: var(--gray-500) !important;
}
.footer__social-link:hover {
  background: var(--teal) !important;
  border-color: var(--teal) !important;
  color: #fff !important;
}

/* Submit Tool button in footer */
.footer_add_ad,
a.footer_add_ad {
  background: var(--teal) !important;
  color: #fff !important;
  padding: 8px 18px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: .84rem !important;
  text-decoration: none !important;
  transition: background .2s !important;
}
.footer_add_ad:hover { background: var(--teal-dark) !important; color: #fff !important; }

.footer_request_block a { color: var(--gray-500) !important; }
.footer_request_block a:hover { color: var(--gold) !important; }

.copyright, #footer .copyright { color: var(--gray-500) !important; font-size: .78rem !important; }

/* ---- 19. ADMIN QUICK MENU ---- */
.admin-menu-small { background: var(--teal) !important; }

/* ---- 20. LANGUAGE SWITCHER ---- */
.languages li a,
.new_select select,
.lang-switcher a {
  color: var(--gray-500) !important;
  background: var(--ai-card) !important;
  border: 1px solid var(--ai-border) !important;
  border-radius: 6px !important;
  font-size: .75rem !important;
  padding: 3px 8px !important;
}
.languages li a:hover,
.lang-switcher a.active,
.lang-switcher a:hover { background: var(--teal-light) !important; color: #c4b5fd !important; border-color: var(--teal) !important; }

/* ---- 21. COMPARISON + COMPARE ---- */
.compare-check-control { color: var(--gray-500) !important; font-size: .75rem !important; }
.compare-label { color: var(--gray-500) !important; }
input[type=checkbox].compare-check { accent-color: var(--teal) !important; }

/* ---- 22. DETAIL PAGE TABS ---- */
.resptabs-nav li a, .resp-tab-item {
  background: var(--ai-card) !important;
  color: var(--gray-500) !important;
  border: 1px solid var(--ai-border) !important;
  border-radius: 8px !important;
}
.resptabs-nav li.active a, .resp-tab-active {
  background: var(--teal) !important;
  color: #fff !important;
  border-color: var(--teal) !important;
}

/* ---- 23. LOADING / OVERLAY ---- */
#loading, #loading-blocks { background: var(--gray-50) !important; color: var(--gray-500) !important; }
#toTop {
  background: var(--teal) !important;
  color: #fff !important;
  border-radius: 8px !important;
}

/* ---- 24. PROVIDER / USER CARDS ---- */
.provider-card {
  background: var(--ai-card) !important;
  border-color: var(--ai-border) !important;
}
.provider-card:hover { border-color: var(--teal) !important; box-shadow: var(--shadow) !important; }
.provider-card__name { color: var(--gray-900) !important; }
.provider-card__type { color: var(--gold) !important; }
.provider-card__desc { color: var(--gray-500) !important; }
.provider-card__rating { color: var(--ai-yellow) !important; }
.provider-card__logo { background: var(--teal-light) !important; }

/* ---- 25. AD ZONES ---- */
.ad-zone {
  background: var(--ai-card) !important;
  border-color: var(--ai-border) !important;
  color: var(--gray-500) !important;
}

/* ---- 26. SCROLLBAR ---- */
::-webkit-scrollbar { width: 8px; background: var(--gray-50); }
::-webkit-scrollbar-thumb { background: var(--ai-border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--teal); }

/* ---- 27. NOSCRIPT WARNING ---- */
.noscript { background: var(--teal-light) !important; color: var(--gray-700) !important; border: 1px solid var(--teal) !important; }

/* ---- 28. RESPONSIVE ---- */
@media (max-width: 768px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .hero__stats { gap: 20px !important; }
  .layout-with-sidebar { grid-template-columns: 1fr !important; }
  .sidebar { position: static !important; }
}
@media (max-width: 480px) {
  .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr !important; }
  h1 { font-size: 1.7rem !important; }
}

/* ============================================================
   FORMATTING FIXES — v2
   ============================================================ */

/* ---- FIX 1: Logo text fallback (when SVG not found) ---- */
.navbar__logo span,
.navbar__logo > span {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-weight: 800 !important;
  font-size: 1.15rem !important;
  color: var(--gray-900) !important;
  font-family: 'Inter', sans-serif !important;
}
.navbar__logo > span > span { color: var(--teal) !important; }

/* Logo image - hide broken image, show text */
.navbar__logo img[src*="logo.svg"] {
  display: block !important;
}

/* ---- FIX 2: Category strip — prevent text truncation ---- */
.category-strip__list {
  gap: 8px !important;
  padding: 0 0 8px 0 !important;
}
.cat-chip {
  min-width: auto !important;
  padding: 10px 14px !important;
  flex-shrink: 0 !important;
}
.cat-chip__label {
  font-size: .68rem !important;
  white-space: nowrap !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  letter-spacing: .04em !important;
}
.cat-chip__icon {
  font-size: 1.3rem !important;
}

/* ---- FIX 3: Footer brand — show "The Bot Yard" correctly ---- */
.footer__brand {
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  color: var(--gray-900) !important;
  margin-bottom: 12px !important;
  display: block !important;
}
.footer__brand span {
  color: var(--teal) !important;
}

/* Footer text */
.footer__desc {
  color: var(--gray-500) !important;
  font-size: .85rem !important;
  line-height: 1.6 !important;
  max-width: 280px !important;
}

/* Footer headings */
.footer h5 {
  color: var(--gray-900) !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  margin-bottom: 12px !important;
}

/* Footer links */
.footer__links { list-style: none !important; padding: 0 !important; }
.footer__links li { margin-bottom: 8px !important; }
.footer__links a {
  color: var(--gray-500) !important;
  font-size: .84rem !important;
  transition: color .2s !important;
  text-decoration: none !important;
}
.footer__links a:hover { color: var(--gold) !important; }

/* Footer grid */
.footer__grid {
  display: grid !important;
  grid-template-columns: 2fr 1fr 1fr 1fr !important;
  gap: 40px !important;
  padding: 56px 0 40px !important;
}

/* Footer bottom bar */
.footer__bottom {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 20px 0 !important;
  border-top: 1px solid var(--ai-border) !important;
  font-size: .78rem !important;
  color: var(--gray-500) !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

/* ---- FIX 4: Search box wider & placeholder visible ---- */
.search-box {
  max-width: 760px !important;
}
.search-box input[type=text] {
  min-width: 200px !important;
  font-size: .9rem !important;
}
.search-box select {
  min-width: 140px !important;
  font-size: .85rem !important;
}

/* ---- FIX 5: Hero gradient — more purple, less teal ---- */
.hero {
  background: linear-gradient(160deg, #0d0d14 0%, #130b2e 40%, #1a0d3a 70%, #0d0d14 100%) !important;
}

/* ---- FIX 6: Navbar logo container ---- */
.navbar__inner {
  height: 64px !important;
}
.navbar__logo {
  text-decoration: none !important;
}

/* ---- FIX 7: Section header eyebrow text ---- */
.section-header__eyebrow {
  color: var(--gold) !important;
  font-size: .75rem !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

/* ---- FIX 8: Stats colors ---- */
.hero__stat strong { color: var(--gold) !important; }
.hero__stat span { color: rgba(255,255,255,.6) !important; font-size: .72rem !important; }
.hero__stats { margin-top: 36px !important; gap: 32px !important; }

/* ---- FIX 9: Sidebar widget heading ---- */
.sidebar-widget h4 {
  color: var(--gold) !important;
  font-size: .78rem !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  border-bottom: 1px solid var(--ai-border) !important;
  padding-bottom: 10px !important;
  margin-bottom: 14px !important;
}

/* ---- FIX 10: Topbar ---- */
.topbar {
  font-size: .78rem !important;
  padding: 6px 0 !important;
}

/* ---- FIX 11: "No listings yet" text ---- */
.appartment_item + p,
p[style*="color:var(--gray-500)"],
p.empty-notice {
  color: var(--gray-500) !important;
  text-align: center !important;
  padding: 24px 0 !important;
  font-size: .9rem !important;
}

/* ---- FIX 12: CTA section button spacing ---- */
.btn--gold {
  background: var(--teal) !important;
  color: #fff !important;
}
.btn--gold:hover {
  background: var(--teal-dark) !important;
  color: #fff !important;
  box-shadow: 0 0 20px rgba(124,58,237,.4) !important;
}

@media (max-width: 900px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
  }
}
@media (max-width: 600px) {
  .footer__grid { grid-template-columns: 1fr !important; }
  .cat-chip__label { font-size: .62rem !important; }
  .hero__stats { flex-wrap: wrap !important; gap: 16px !important; }
  .search-box { flex-direction: column !important; }
  .search-box input, .search-box select, .search-box button { width: 100% !important; }
}