/* ============================================================
   Horse Trailer Dealers - Custom UX Overhaul
   Injected via DIRECTIFY Settings > Custom Codes > Custom CSS

   Color Palette (Equestrian-inspired, professional):
   - Primary:    #6B4C3B (warm saddle brown)
   - Accent:     #8B6914 (bridle gold)
   - Dark:       #2C1810 (dark leather)
   - Neutral:    #F5F0EB (warm cream)
   - Text:       #3B2F2F (dark cocoa)
   - Success:    #4A7C59 (pasture green)
   ============================================================ */

/* --- CSS Custom Properties Override --- */
:root, [data-theme="light"] {
  --htd-primary: #6B4C3B;
  --htd-primary-light: #8B6650;
  --htd-primary-dark: #4A3428;
  --htd-accent: #8B6914;
  --htd-accent-light: #C49A2A;
  --htd-gold: #D4A843;
  --htd-dark: #2C1810;
  --htd-cream: #F5F0EB;
  --htd-warm-white: #FDFBF9;
  --htd-text: #3B2F2F;
  --htd-text-muted: #7A6B6B;
  --htd-green: #4A7C59;
  --htd-border: #E8DFD6;
  --htd-shadow-color: rgba(107, 76, 59, 0.1);
  --htd-card-radius: 16px;
  --htd-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Global Base Styles --- */
body.antialiased {
  background-color: var(--htd-warm-white) !important;
  color: var(--htd-text) !important;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Better text rendering */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ============================================================
   1. HEADER / NAVIGATION
   ============================================================ */
header.sticky {
  background: rgba(253, 251, 249, 0.97) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: 1px solid var(--htd-border) !important;
  box-shadow: 0 1px 3px var(--htd-shadow-color) !important;
  transition: box-shadow var(--htd-transition), background var(--htd-transition) !important;
}

/* Header shadow on scroll (JS will add .htd-scrolled) */
header.sticky.htd-scrolled {
  box-shadow: 0 4px 20px rgba(44, 24, 16, 0.08) !important;
}

/* Logo brand text */
.directory-name {
  background: linear-gradient(135deg, var(--htd-primary), var(--htd-accent)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

/* Nav links */
header .hidden.lg\:flex a {
  color: var(--htd-text-muted) !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  transition: all var(--htd-transition) !important;
  position: relative;
}

header .hidden.lg\:flex a:hover {
  color: var(--htd-primary) !important;
  background: rgba(107, 76, 59, 0.06) !important;
}

/* Submit button */
header a[href*="listings/create"] {
  background: linear-gradient(135deg, var(--htd-primary), var(--htd-primary-light)) !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(107, 76, 59, 0.25) !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  transition: all var(--htd-transition) !important;
}

header a[href*="listings/create"]:hover {
  background: linear-gradient(135deg, var(--htd-primary-dark), var(--htd-primary)) !important;
  box-shadow: 0 4px 16px rgba(107, 76, 59, 0.35) !important;
  transform: translateY(-1px) scale(1.02) !important;
}


/* ============================================================
   2. HERO SECTION
   ============================================================ */
.bg-gradient-to-br.from-base-100.to-base-200\/50.border-b {
  background: linear-gradient(165deg, var(--htd-warm-white) 0%, var(--htd-cream) 100%) !important;
  border-bottom: 1px solid var(--htd-border) !important;
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}

/* Hero title */
.directory-title {
  background: linear-gradient(135deg, var(--htd-dark) 0%, var(--htd-primary) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.15 !important;
}

/* Hero description */
.directory-description {
  color: var(--htd-text-muted) !important;
  font-size: 1.1rem !important;
  max-width: 600px !important;
  line-height: 1.7 !important;
}


/* ============================================================
   3. SEARCH / FILTER BAR
   ============================================================ */
/* Search input */
input[wire\:model\.live\.debounce\.250ms="search"],
input[placeholder="Search for a listing"] {
  border: 2px solid var(--htd-border) !important;
  border-radius: 14px !important;
  padding: 14px 16px 14px 44px !important;
  font-size: 0.95rem !important;
  background: #fff !important;
  color: var(--htd-text) !important;
  transition: all var(--htd-transition) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

input[wire\:model\.live\.debounce\.250ms="search"]:focus,
input[placeholder="Search for a listing"]:focus {
  border-color: var(--htd-primary) !important;
  box-shadow: 0 0 0 4px rgba(107, 76, 59, 0.12) !important;
  outline: none !important;
}

/* Filter button */
label[for="my-drawer-filters"] {
  border: 2px solid var(--htd-border) !important;
  border-radius: 14px !important;
  transition: all var(--htd-transition) !important;
  color: var(--htd-text-muted) !important;
}

label[for="my-drawer-filters"]:hover {
  border-color: var(--htd-primary) !important;
  color: var(--htd-primary) !important;
  background: rgba(107, 76, 59, 0.04) !important;
}


/* ============================================================
   4. LISTING CARDS
   ============================================================ */
/* Card base */
article.group.relative {
  background: #fff !important;
  border: 1px solid var(--htd-border) !important;
  border-radius: var(--htd-card-radius) !important;
  box-shadow: 0 1px 3px var(--htd-shadow-color), 0 1px 2px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow: hidden !important;
}

article.group.relative:hover {
  border-color: rgba(107, 76, 59, 0.2) !important;
  box-shadow: 0 8px 30px rgba(107, 76, 59, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  transform: translateY(-4px) !important;
}

/* Card title */
article .listing-title {
  color: var(--htd-dark) !important;
  font-weight: 800 !important;
  font-size: 1.25rem !important;
  letter-spacing: -0.01em !important;
  transition: color var(--htd-transition) !important;
}

article:hover .listing-title {
  color: var(--htd-primary) !important;
}

/* Card description */
article .listing-description {
  color: var(--htd-text-muted) !important;
  font-size: 0.9rem !important;
  line-height: 1.6 !important;
}

/* Category tags on cards */
article .flex.flex-wrap.gap-2 span.inline-flex {
  background: var(--htd-cream) !important;
  color: var(--htd-primary) !important;
  border: 1px solid rgba(107, 76, 59, 0.12) !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  padding: 4px 10px !important;
  transition: all var(--htd-transition) !important;
}

article .flex.flex-wrap.gap-2 span.inline-flex:hover {
  background: rgba(107, 76, 59, 0.08) !important;
  border-color: rgba(107, 76, 59, 0.25) !important;
}

/* Custom field labels on cards */
.custom-field-card-label {
  color: var(--htd-primary) !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.custom-field-card-value {
  color: var(--htd-text) !important;
}

/* Card top accent bar */
article.group.relative::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--htd-primary), var(--htd-accent));
  opacity: 0;
  transition: opacity var(--htd-transition);
}

article.group.relative:hover::before {
  opacity: 1;
}


/* ============================================================
   5. VOTE / UPVOTE BUTTONS
   ============================================================ */
/* Style vote buttons to match theme */
button[wire\:click*="vote"],
.vote-btn,
[class*="vote"] button {
  transition: all var(--htd-transition) !important;
}

button[wire\:click*="vote"]:hover,
.vote-btn:hover {
  color: var(--htd-accent) !important;
  transform: scale(1.1) !important;
}


/* ============================================================
   6. CATEGORY SIDEBAR
   ============================================================ */
/* Sidebar container */
.drawer-side .categories-sidebar {
  scrollbar-width: thin;
  scrollbar-color: var(--htd-border) transparent;
}

/* Sidebar wrapper */
.drawer-side .bg-base-100\/95 {
  background: rgba(253, 251, 249, 0.98) !important;
  backdrop-filter: blur(12px) !important;
}

.drawer-side .w-80 {
  background: linear-gradient(180deg, #fff, var(--htd-cream)) !important;
}

/* Category items */
.categories-sidebar li a,
.categories-sidebar li button {
  border-radius: 10px !important;
  padding: 8px 12px !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: var(--htd-text-muted) !important;
  transition: all var(--htd-transition) !important;
  border-left: 3px solid transparent !important;
}

.categories-sidebar li a:hover,
.categories-sidebar li button:hover {
  background: rgba(107, 76, 59, 0.06) !important;
  color: var(--htd-primary) !important;
  border-left-color: var(--htd-primary) !important;
  padding-left: 16px !important;
}

/* Active category */
.categories-sidebar li a.active,
.categories-sidebar li a[aria-current="page"] {
  background: rgba(107, 76, 59, 0.08) !important;
  color: var(--htd-primary) !important;
  font-weight: 700 !important;
  border-left-color: var(--htd-primary) !important;
}

/* Category count badges */
.categories-sidebar .badge {
  background: var(--htd-cream) !important;
  color: var(--htd-primary) !important;
  border: 1px solid var(--htd-border) !important;
  font-weight: 600 !important;
  font-size: 0.7rem !important;
}


/* ============================================================
   7. BUTTONS & CTAs (Global)
   ============================================================ */
.btn-primary {
  background: linear-gradient(135deg, var(--htd-primary), var(--htd-primary-light)) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(107, 76, 59, 0.2) !important;
  transition: all var(--htd-transition) !important;
  letter-spacing: 0.01em !important;
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--htd-primary-dark), var(--htd-primary)) !important;
  box-shadow: 0 4px 16px rgba(107, 76, 59, 0.3) !important;
  transform: translateY(-1px) !important;
}

.btn-primary:active {
  transform: translateY(0) !important;
  box-shadow: 0 1px 4px rgba(107, 76, 59, 0.2) !important;
}

/* Ghost buttons */
.btn-ghost {
  color: var(--htd-text-muted) !important;
  transition: all var(--htd-transition) !important;
}

.btn-ghost:hover {
  background: rgba(107, 76, 59, 0.06) !important;
  color: var(--htd-primary) !important;
}

/* Submit button in header and elsewhere */
.submit-btn {
  background: linear-gradient(135deg, var(--htd-primary), var(--htd-accent)) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  border: none !important;
  transition: all var(--htd-transition) !important;
}

.submit-btn:hover {
  box-shadow: 0 4px 16px rgba(107, 76, 59, 0.3) !important;
  transform: translateY(-1px) !important;
}


/* ============================================================
   8. PAGINATION
   ============================================================ */
nav[aria-label*="Pagination"] a,
nav[aria-label*="Pagination"] span,
.pagination a,
.pagination span {
  border-radius: 10px !important;
  font-weight: 600 !important;
  transition: all var(--htd-transition) !important;
}

nav[aria-label*="Pagination"] a:hover {
  background: rgba(107, 76, 59, 0.08) !important;
  color: var(--htd-primary) !important;
}

nav[aria-label*="Pagination"] span[aria-current="page"],
nav[aria-label*="Pagination"] .active {
  background: var(--htd-primary) !important;
  color: #fff !important;
  border-color: var(--htd-primary) !important;
}


/* ============================================================
   9. FOOTER
   ============================================================ */
footer.footer-container {
  background: linear-gradient(170deg, var(--htd-dark) 0%, #1a0f0a 100%) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  border-top: 3px solid var(--htd-accent) !important;
}

footer.footer-container h4,
footer.footer-container h3 {
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}

footer.footer-container a {
  color: rgba(255, 255, 255, 0.65) !important;
  transition: color var(--htd-transition) !important;
}

footer.footer-container a:hover {
  color: var(--htd-gold) !important;
}

/* SEO footer (state links) */
.htd-seo-footer {
  background: linear-gradient(170deg, #1a0f0a 0%, #0f0805 100%) !important;
  border-top: 1px solid rgba(212, 168, 67, 0.15) !important;
}

.htd-seo-footer h3 {
  color: #fff !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
}

.htd-state-grid a {
  color: rgba(212, 168, 67, 0.75) !important;
  border-radius: 6px !important;
  transition: all var(--htd-transition) !important;
}

.htd-state-grid a:hover {
  background: rgba(212, 168, 67, 0.08) !important;
  color: var(--htd-gold) !important;
}

.htd-seo-footer-links {
  border-top-color: rgba(212, 168, 67, 0.15) !important;
}

.htd-seo-footer-links h4 {
  color: #fff !important;
}

.htd-seo-footer-links a {
  color: rgba(212, 168, 67, 0.75) !important;
}

.htd-seo-footer-links a:hover {
  color: var(--htd-gold) !important;
}

.footer-copyright {
  color: rgba(255, 255, 255, 0.4) !important;
  font-size: 0.8rem !important;
}


/* ============================================================
   10. TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.02em;
}

/* Listing page headings */
main h1 {
  color: var(--htd-dark) !important;
  font-weight: 900 !important;
}

main h2 {
  font-weight: 800 !important;
}

/* Better paragraph readability */
main p {
  line-height: 1.75;
}


/* ============================================================
   11. BROKEN IMAGE HANDLING
   ============================================================ */
img {
  background-color: var(--htd-cream);
}

/* Fallback for broken listing images */
img[src=""],
img:not([src]),
img[src*="placeholder"] {
  position: relative;
  background: linear-gradient(135deg, var(--htd-cream) 0%, #EDE5DB 100%) !important;
  min-height: 60px;
}

/* JS will add this class to broken images */
img.htd-broken-img {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, var(--htd-cream) 0%, #EDE5DB 100%) !important;
  border: 1px dashed var(--htd-border) !important;
  border-radius: 12px !important;
  min-height: 80px !important;
  object-fit: contain !important;
}


/* ============================================================
   12. MOBILE RESPONSIVENESS
   ============================================================ */
@media (max-width: 768px) {
  /* Tighter header on mobile */
  header.sticky nav {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  /* Stack hero better */
  .directory-title {
    font-size: 1.75rem !important;
    line-height: 1.2 !important;
  }

  .directory-description {
    font-size: 0.95rem !important;
  }

  /* Full width cards */
  article.group.relative {
    border-radius: 12px !important;
  }

  /* Better touch targets */
  .categories-sidebar li a,
  .categories-sidebar li button {
    padding: 12px 14px !important;
    min-height: 44px !important;
  }

  /* Search input bigger touch target */
  input[placeholder="Search for a listing"] {
    padding: 16px 16px 16px 44px !important;
    font-size: 1rem !important;
  }

  /* Mobile drawer styling */
  .drawer-side .w-80 {
    width: 85vw !important;
    max-width: 320px !important;
  }
}

@media (max-width: 480px) {
  .directory-title {
    font-size: 1.5rem !important;
  }

  article .listing-title {
    font-size: 1.1rem !important;
  }

  /* Reduce card padding on small screens */
  article .relative.p-6 {
    padding: 16px !important;
  }
}


/* ============================================================
   13. MICRO-INTERACTIONS & ANIMATIONS
   ============================================================ */

/* Subtle fade-in for cards */
@keyframes htd-fadeInUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Cards animate in (JS adds .htd-visible class) */
article.group.relative.htd-visible {
  animation: htd-fadeInUp 0.4s ease-out both;
}

/* Stagger delays for grid items (set by JS) */
article.group.relative.htd-visible:nth-child(1) { animation-delay: 0s; }
article.group.relative.htd-visible:nth-child(2) { animation-delay: 0.06s; }
article.group.relative.htd-visible:nth-child(3) { animation-delay: 0.12s; }
article.group.relative.htd-visible:nth-child(4) { animation-delay: 0.18s; }
article.group.relative.htd-visible:nth-child(5) { animation-delay: 0.24s; }
article.group.relative.htd-visible:nth-child(6) { animation-delay: 0.3s; }

/* Focus states for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--htd-primary) !important;
  outline-offset: 2px !important;
  border-radius: 8px;
}

/* Smooth link underlines */
main a:not(.btn):not([class*="flex"]) {
  text-decoration-color: rgba(107, 76, 59, 0.3);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--htd-transition);
}

main a:not(.btn):not([class*="flex"]):hover {
  text-decoration-color: var(--htd-primary);
}

/* Loading skeleton shimmer */
@keyframes htd-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

[wire\:loading] {
  background: linear-gradient(90deg, var(--htd-cream) 25%, #EDE5DB 50%, var(--htd-cream) 75%) !important;
  background-size: 200% 100% !important;
  animation: htd-shimmer 1.5s ease-in-out infinite !important;
}


/* ============================================================
   14. COOKIE BANNER REFINEMENT
   ============================================================ */
#cookie-banner {
  background: #fff !important;
  border: 1px solid var(--htd-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
}

#cookie-accept-btn {
  background: var(--htd-primary) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  padding: 6px 16px !important;
  transition: all var(--htd-transition) !important;
}

#cookie-accept-btn:hover {
  background: var(--htd-primary-dark) !important;
}


/* ============================================================
   15. TOP CATEGORIES (Homepage)
   ============================================================ */
.top-categories-title {
  color: var(--htd-dark) !important;
  font-weight: 800 !important;
}

.top-categories-item {
  background: #fff !important;
  border: 1px solid var(--htd-border) !important;
  border-radius: 12px !important;
  color: var(--htd-text) !important;
  font-weight: 600 !important;
  transition: all var(--htd-transition) !important;
  box-shadow: 0 1px 3px var(--htd-shadow-color) !important;
}

.top-categories-item:hover {
  border-color: var(--htd-primary) !important;
  color: var(--htd-primary) !important;
  box-shadow: 0 4px 12px rgba(107, 76, 59, 0.12) !important;
  transform: translateY(-2px) !important;
}


/* ============================================================
   16. SEARCH COMPONENT OVERRIDES
   ============================================================ */
.search-container {
  border-radius: 14px !important;
}

.search-input {
  border: 2px solid var(--htd-border) !important;
  background: #fff !important;
  border-radius: 14px !important;
}

.search-input:focus {
  border-color: var(--htd-primary) !important;
  box-shadow: 0 0 0 4px rgba(107, 76, 59, 0.1) !important;
}

.search-btn {
  background: var(--htd-primary) !important;
  color: #fff !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  transition: all var(--htd-transition) !important;
}

.search-btn:hover {
  background: var(--htd-primary-dark) !important;
  box-shadow: 0 2px 8px rgba(107, 76, 59, 0.25) !important;
}


/* ============================================================
   17. BLOG PAGES
   ============================================================ */
article.prose,
.prose {
  --tw-prose-headings: var(--htd-dark);
  --tw-prose-links: var(--htd-primary);
}

.prose a {
  color: var(--htd-primary) !important;
  font-weight: 600;
}

.prose a:hover {
  color: var(--htd-primary-dark) !important;
}


/* ============================================================
   18. SELECTION & SCROLLBAR
   ============================================================ */
::selection {
  background: rgba(107, 76, 59, 0.15);
  color: var(--htd-dark);
}

/* Custom scrollbar for webkit */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--htd-border);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(107, 76, 59, 0.3);
}


/* ============================================================
   19. DROPDOWN MENUS
   ============================================================ */
.dropdown-content {
  background: #fff !important;
  border: 1px solid var(--htd-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1) !important;
}

.dropdown-content a:hover {
  background: rgba(107, 76, 59, 0.05) !important;
  color: var(--htd-primary) !important;
}


/* ============================================================
   20. LISTING DETAIL PAGE
   ============================================================ */
/* Claim / Contact buttons on listing pages */
main .btn[href*="claim"],
main a.btn-primary,
main button.btn-primary {
  background: linear-gradient(135deg, var(--htd-primary), var(--htd-primary-light)) !important;
  border: none !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(107, 76, 59, 0.2) !important;
}

/* Map container */
.leaflet-container,
[class*="map"] {
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid var(--htd-border) !important;
}