/* ============================================
   DIRECTORY — SHARED STYLES
   Mobile-first. No framework.
   ============================================ */

/* ─── Variables ────────────────────────────────────────────────── */
:root {
  --dir-green:       #1A7A4A;
  --dir-green-dark:  #145f39;
  --dir-green-light: #e8f5ee;
  --dir-text:        #1a1a1a;
  --dir-muted:       #6b7280;
  --dir-border:      #e5e7eb;
  --dir-bg:          #f9fafb;
  --dir-radius:      12px;
  --dir-shadow:      0 2px 8px rgba(0,0,0,.08);
  --dir-shadow-hover:0 6px 24px rgba(0,0,0,.13);
  --nav-h:           64px;
}

/* ─── Base ──────────────────────────────────────────────────────── */
.dir-page {
  min-height:  100vh;
  background:  var(--dir-bg);
  padding-top: var(--nav-h);
}

.dir-container {
  max-width: 1200px;
  margin:    0 auto;
  padding:   0 16px;
}

/* ─── Hero — text only, compact ────────────────────────────────── */
.dir-hero {
  background:      linear-gradient(135deg, var(--dir-green) 0%, #0f5132 100%);
  padding:         40px 16px 44px;
  text-align:      center;
  position:        relative;
  overflow:        hidden;
  display:         flex;
  align-items:     center;
  justify-content: center;
  min-height:      200px;
}

#dirHeroCanvas {
  position:       absolute;
  inset:          0;
  width:          100%;
  height:         100%;
  pointer-events: none;
}

.dir-hero-inner {
  max-width: 600px;
  margin:    0 auto;
  position:  relative;
  z-index:   1;
}

.dir-hero-title {
  color:          #fff;
  font-size:      clamp(1.5rem, 5vw, 2.2rem);
  font-weight:    800;
  line-height:    1.2;
  margin:         0 0 10px;
  letter-spacing: -.01em;
}

.dir-hero-sub {
  color:       rgba(255,255,255,.82);
  font-size:   1rem;
  margin:      0;
  line-height: 1.55;
}

@media (max-width: 600px) {
  .dir-hero     { padding: 28px 16px 32px; min-height: 250px; }
  .dir-hero-sub { font-size: .9rem; }
}

/* ─── Filter Bar — sticky below navbar ──────────────────────────── */
.dir-filter-bar {
  background:    #fff;
  border-bottom: 1px solid #f0f0f0;
  position:      sticky;
  top:           var(--nav-h);
  z-index:       90;
  box-shadow:    0 1px 12px rgba(0,0,0,.05);
  padding:       12px 0 10px;
}

/* ── Search ─────────────────────────────────────────────────────── */
.dir-fb-search { margin-bottom: 10px; }

.dir-fb-search-wrap {
  display:       flex;
  align-items:   center;
  background:    #f8f9fa;
  border:        1.5px solid var(--dir-border);
  border-radius: 50px;
  overflow:      hidden;
  transition:    border-color .18s, box-shadow .18s;
}

.dir-fb-search-wrap:focus-within {
  border-color: var(--dir-green);
  box-shadow:   0 0 0 3px rgba(26,122,74,.09);
  background:   #fff;
}

.dir-fb-search-icon {
  color:       var(--dir-muted);
  flex-shrink: 0;
  margin:      0 10px 0 16px;
}

.dir-fb-input {
  flex:       1;
  border:     none;
  outline:    none;
  background: transparent;
  font-size:  .95rem;
  padding:    11px 8px 11px 0;
  color:      var(--dir-text);
  min-width:  0;
}

.dir-fb-search-btn {
  background:     var(--dir-green);
  color:          #fff;
  border:         none;
  padding:        11px 24px;
  font-size:      .88rem;
  font-weight:    700;
  cursor:         pointer;
  white-space:    nowrap;
  transition:     background .15s;
  flex-shrink:    0;
  letter-spacing: .02em;
  border-radius:  50px;
  margin:         3px;
}

.dir-fb-search-btn:hover { background: var(--dir-green-dark); }

/* ── Filter chips row ────────────────────────────────────────────── */
.dir-fb-chips {
  display:     flex;
  gap:         8px;
  align-items: center;
  flex-wrap:   wrap;
}

/* Chip wrapper — positions the select + arrow together */
.dir-fb-chip-wrap {
  position:   relative;
  flex-shrink: 0;
}

/* The select styled as a pill chip */
.dir-fb-chip-select {
  appearance:     none;
  -webkit-appearance: none;
  display:        block;
  padding:        8px 34px 8px 14px;
  border:         1.5px solid var(--dir-border);
  border-radius:  50px;
  font-size:      .84rem;
  font-weight:    500;
  color:          #374151;
  background:     #fff;
  cursor:         pointer;
  outline:        none;
  transition:     border-color .15s, background .15s, color .15s, box-shadow .15s;
  white-space:    nowrap;
  max-width:      200px;
}

.dir-fb-chip-select:hover {
  border-color: #9ca3af;
}

.dir-fb-chip-select:focus {
  border-color: var(--dir-green);
  box-shadow:   0 0 0 3px rgba(26,122,74,.09);
}

/* Active state — filter has a real value selected */
.dir-fb-chip-select.is-active {
  background:   var(--dir-green-light);
  border-color: var(--dir-green);
  color:        var(--dir-green-dark);
  font-weight:  600;
}

/* Custom dropdown arrow */
.dir-fb-chip-arrow {
  position:       absolute;
  right:          12px;
  top:            50%;
  transform:      translateY(-50%);
  color:          var(--dir-muted);
  pointer-events: none;
  transition:     color .15s;
}

.dir-fb-chip-wrap:has(.is-active) .dir-fb-chip-arrow {
  color: var(--dir-green);
}

/* "Filtros" button */
.dir-fb-more-btn {
  display:       flex;
  align-items:   center;
  gap:           6px;
  padding:       8px 16px;
  border:        1.5px solid var(--dir-border);
  border-radius: 50px;
  background:    #fff;
  font-size:     .84rem;
  font-weight:   500;
  color:         #374151;
  cursor:        pointer;
  white-space:   nowrap;
  transition:    border-color .15s, color .15s, background .15s;
  flex-shrink:   0;
}

.dir-fb-more-btn:hover {
  border-color: #9ca3af;
}

.dir-fb-more-btn[aria-expanded="true"],
.dir-fb-more-btn.has-active {
  background:   var(--dir-green-light);
  border-color: var(--dir-green);
  color:        var(--dir-green-dark);
  font-weight:  600;
}

/* Count badge */
.dir-fb-more-count {
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  background:    var(--dir-green);
  color:         #fff;
  font-size:     .65rem;
  font-weight:   700;
  width:         18px;
  height:        18px;
  border-radius: 50%;
  line-height:   1;
}

.dir-fb-more-count[hidden] { display: none; }

/* ── Advanced filter panel ───────────────────────────────────────── */
.dir-fb-advanced {
  margin-top:    10px;
  padding:       16px 20px;
  border:        1.5px solid var(--dir-border);
  border-radius: 16px;
  background:    #fafafa;
  display:       flex;
  flex-wrap:     wrap;
  gap:           20px 40px;
  align-items:   center;
  animation:     advSlideIn .16s ease;
}

.dir-fb-advanced[hidden] { display: none; }

@keyframes advSlideIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

.dir-fb-adv-group {
  display:        flex;
  flex-direction: column;
  gap:            8px;
}

.dir-fb-adv-label {
  font-size:      .68rem;
  font-weight:    700;
  color:          var(--dir-muted);
  text-transform: uppercase;
  letter-spacing: .07em;
}

/* Rating pill buttons */
.dir-fb-rating-row {
  display: flex;
  gap:     6px;
  flex-wrap: wrap;
}

.dir-fb-rating-btn {
  padding:       6px 14px;
  border:        1.5px solid var(--dir-border);
  border-radius: 50px;
  background:    #fff;
  font-size:     .82rem;
  font-weight:   600;
  color:         #374151;
  cursor:        pointer;
  transition:    all .15s;
}

.dir-fb-rating-btn:hover {
  border-color: var(--dir-green);
  color:        var(--dir-green);
}

.dir-fb-rating-btn--active {
  background:   var(--dir-green);
  border-color: var(--dir-green);
  color:        #fff;
}

/* Checkboxes */
.dir-fb-checks {
  display:  flex;
  flex-wrap: wrap;
  gap:      12px;
}

.dir-fb-check {
  display:     flex;
  align-items: center;
  gap:         7px;
  font-size:   .875rem;
  color:       var(--dir-text);
  cursor:      pointer;
  font-weight: 500;
}

.dir-fb-check input[type="checkbox"] {
  width:        16px;
  height:       16px;
  accent-color: var(--dir-green);
  cursor:       pointer;
  flex-shrink:  0;
  border-radius: 4px;
}

/* Reset button */
.dir-fb-reset-btn {
  display:       flex;
  align-items:   center;
  gap:           5px;
  margin-left:   auto;
  background:    transparent;
  border:        1.5px solid #fca5a5;
  border-radius: 50px;
  color:         #ef4444;
  font-size:     .8rem;
  font-weight:   600;
  padding:       6px 14px;
  cursor:        pointer;
  transition:    background .15s;
  white-space:   nowrap;
}

.dir-fb-reset-btn:hover { background: #fef2f2; }

/* ── Mobile ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .dir-filter-bar { padding: 10px 0 8px; }
  .dir-fb-search-btn { padding: 10px 18px; }

  .dir-fb-chips {
    gap:        6px;
    overflow-x: auto;
    flex-wrap:  nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 2px;
  }
  .dir-fb-chips::-webkit-scrollbar { display: none; }

  .dir-fb-chip-select { max-width: 160px; font-size: .82rem; padding: 7px 30px 7px 12px; }
  .dir-fb-more-btn    { font-size: .82rem; padding: 7px 13px; }

  .dir-fb-advanced    { flex-direction: column; gap: 14px; padding: 14px 16px; }
  .dir-fb-reset-btn   { margin-left: 0; width: 100%; justify-content: center; }
}

@media (max-width: 400px) {
  .dir-fb-chip-select { max-width: 130px; }
}

/* ─── Results section ───────────────────────────────────────────── */
.dir-results-section { padding: 24px 0 56px; }

.dir-results-bar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             12px;
  margin-bottom:   16px;
  flex-wrap:       wrap;
}

.dir-results-left {
  display:     flex;
  align-items: center;
  gap:         10px;
  flex-wrap:   wrap;
  flex:        1;
}

.dir-results-count {
  color:       var(--dir-muted);
  font-size:   .88rem;
  font-weight: 500;
  white-space: nowrap;
}

/* Active filter tag pills */
.dir-active-tags {
  display:  flex;
  flex-wrap: wrap;
  gap:       6px;
}

.dir-active-tag {
  display:       inline-flex;
  align-items:   center;
  gap:           5px;
  background:    var(--dir-green-light);
  color:         var(--dir-green);
  border:        1px solid #bbf7d0;
  border-radius: 50px;
  padding:       4px 10px 4px 12px;
  font-size:     .78rem;
  font-weight:   700;
  cursor:        pointer;
  transition:    background .15s;
  white-space:   nowrap;
}

.dir-active-tag:hover { background: #d1fae5; }

.dir-active-tag svg { flex-shrink: 0; }

/* Add business button */
.dir-add-btn {
  display:       inline-flex;
  align-items:   center;
  background:    var(--dir-green);
  color:         #fff;
  border-radius: 8px;
  padding:       9px 18px;
  font-size:     .875rem;
  font-weight:   700;
  text-decoration: none;
  white-space:   nowrap;
  transition:    background .15s;
  flex-shrink:   0;
}

.dir-add-btn:hover { background: var(--dir-green-dark); }

@media (max-width: 500px) {
  .dir-results-bar { flex-direction: column; align-items: flex-start; }
  .dir-add-btn     { width: 100%; justify-content: center; }
}

/* ─── Business card grid ────────────────────────────────────────── */
.dir-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:                   18px;
}

/* ─── Card ──────────────────────────────────────────────────────── */
.dir-card {
  background:      #fff;
  border:          1px solid var(--dir-border);
  border-radius:   var(--dir-radius);
  overflow:        hidden;
  text-decoration: none;
  color:           inherit;
  display:         flex;
  flex-direction:  column;
  transition:      box-shadow .2s, transform .2s, border-color .2s;
  position:        relative;
}

.dir-card:hover {
  box-shadow:   var(--dir-shadow-hover);
  transform:    translateY(-3px);
  border-color: #d1d5db;
}

/* Media wrapper */
.dir-card-media {
  position:    relative;
  overflow:    hidden;
  flex-shrink: 0;
}

.dir-card-img {
  width:        100%;
  aspect-ratio: 16 / 9;
  object-fit:   cover;
  display:      block;
  transition:   transform .35s ease, opacity .16s ease;
}

.dir-card:hover .dir-card-img { transform: scale(1.04); }
.dir-card-img--fading          { opacity: 0.05 !important; transform: none !important; }

/* Photo carousel dots */
.dir-card-dots {
  position:       absolute;
  bottom:         8px;
  left:           50%;
  transform:      translateX(-50%);
  display:        flex;
  gap:            5px;
  pointer-events: none;
  z-index:        3;
}
.dir-card-dot {
  width:         5px;
  height:        5px;
  border-radius: 50%;
  background:    rgba(255,255,255,.42);
  transition:    background .22s, transform .22s;
  flex-shrink:   0;
}
.dir-card-dot--active {
  background: rgba(255,255,255,.95);
  transform:  scale(1.25);
}

.dir-card-img-placeholder {
  width:           100%;
  aspect-ratio:    16 / 9;
  background:      linear-gradient(135deg, #d1fae5 0%, #e8f5ee 100%);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       2.4rem;
}

/* Featured badge */
.dir-card-featured {
  position:      absolute;
  top:           10px;
  left:          10px;
  background:    var(--dir-green);
  color:         #fff;
  font-size:     .68rem;
  font-weight:   700;
  padding:       3px 10px;
  border-radius: 50px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Rating badge — frosted, bottom-right of image */
.dir-card-rating-badge {
  position:        absolute;
  bottom:          8px;
  right:           10px;
  background:      rgba(0,0,0,.58);
  backdrop-filter: blur(6px);
  color:           #fff;
  font-size:       .72rem;
  font-weight:     700;
  padding:         3px 8px;
  border-radius:   50px;
  display:         flex;
  align-items:     center;
  gap:             3px;
}

/* Card body */
.dir-card-body {
  padding: 14px 16px 16px;
  flex:    1;
  display: flex;
  flex-direction: column;
  gap:     6px;
}

.dir-card-name {
  font-size:          1rem;
  font-weight:        800;
  color:              var(--dir-text);
  line-height:        1.3;
  margin:             0;
  display:            -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:           hidden;
}

.dir-card-cat      { font-size: .78rem; color: var(--dir-green); font-weight: 600; }
.dir-card-location { font-size: .8rem;  color: var(--dir-muted); display: flex; align-items: center; gap: 4px; }

.dir-card-rating {
  display:     flex;
  align-items: center;
  gap:         4px;
  font-size:   .83rem;
  margin-top:  auto;
  padding-top: 4px;
}

.dir-card-rating-num   { color: var(--dir-green); font-weight: 700; }
.dir-card-rating-count { color: var(--dir-muted); }

/* ── Founder / Verified badge chips on cards — two-tone split ── */
.dir-card-badges {
  display:       flex;
  flex-wrap:     wrap;
  gap:           4px;
  margin-bottom: 3px;
}

.dir-card-badge {
  display:       inline-flex;
  align-items:   stretch;
  border-radius: 4px;
  overflow:      hidden;
  white-space:   nowrap;
  box-shadow:    0 1px 2px rgba(0,0,0,0.1);
}

.dir-card-badge-left {
  display:        flex;
  align-items:    center;
  padding:        3px 6px;
  font-size:      0.55rem;
  font-weight:    800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  line-height:    1;
}

.dir-card-badge-right {
  display:     flex;
  align-items: center;
  padding:     3px 7px;
  font-size:   0.7rem;
  font-weight: 900;
  line-height: 1;
}

/* ── Glint animation (card size) ── */
@keyframes dir-badge-glint {
  0%   { transform: translateX(-180%) skewX(-20deg); opacity: 0; }
  8%   { opacity: 1; }
  42%  { transform: translateX(300%) skewX(-20deg); opacity: 0; }
  100% { transform: translateX(300%) skewX(-20deg); opacity: 0; }
}

.dir-card-badge-left,
.dir-card-badge-right { position: relative; overflow: hidden; }

.dir-card-badge-left::after,
.dir-card-badge-right::after {
  content:    '';
  position:   absolute;
  top: -50%; left: 0;
  width:      30%;
  height:     200%;
  transform:  translateX(-180%) skewX(-20deg);
  animation:  dir-badge-glint 3.5s ease-in-out infinite;
  pointer-events: none;
}
.dir-card-badge-right::after { animation-delay: 0.1s; }

/* Acero & Platino — Fundador (first 100) */
.dir-card-badge--amber { box-shadow: 0 1px 5px rgba(0,0,0,0.18); }
.dir-card-badge--amber .dir-card-badge-left  { background: #1f2937; color: #e2e8f0; }
.dir-card-badge--amber .dir-card-badge-right { background: #f1f5f9; color: #0f172a; }
.dir-card-badge--amber .dir-card-badge-left::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
}
.dir-card-badge--amber .dir-card-badge-right::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
}

/* Dark Slate & Sage — Miembro Fundador (#101–500) */
.dir-card-badge--green { box-shadow: 0 1px 4px rgba(0,0,0,0.12); }
.dir-card-badge--green .dir-card-badge-left  { background: #1f2937; color: #9ca3af; }
.dir-card-badge--green .dir-card-badge-right { background: #f8fafc; color: #374151; }
.dir-card-badge--green .dir-card-badge-left::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  animation-duration: 4s;
}
.dir-card-badge--green .dir-card-badge-right::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
  animation-duration: 4s;
}

/* Midnight Navy & Ice — Verificado (manual / future Pro) */
.dir-card-badge--blue { box-shadow: 0 1px 5px rgba(30,58,138,0.2); }
.dir-card-badge--blue .dir-card-badge-left  { background: #1e3a8a; color: #bfdbfe; }
.dir-card-badge--blue .dir-card-badge-right { background: #eff6ff; color: #1e40af; }
.dir-card-badge--blue .dir-card-badge-left::after {
  background: linear-gradient(90deg, transparent, rgba(191,219,254,0.3), transparent);
  animation-duration: 4.5s;
}
.dir-card-badge--blue .dir-card-badge-right::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  animation-duration: 4.5s;
}

.dir-card-tags { display: flex; flex-wrap: wrap; gap: 4px; }

.dir-card-tag {
  background:    var(--dir-green-light);
  color:         var(--dir-green);
  font-size:     .7rem;
  padding:       2px 8px;
  border-radius: 50px;
  font-weight:   500;
}

/* ─── Mobile: horizontal list layout ───────────────────────────── */
@media (max-width: 640px) {
  .dir-grid {
    grid-template-columns: 1fr;
    gap:                   8px;
  }

  .dir-card { flex-direction: row; align-items: stretch; }

  .dir-card-media { width: 110px; flex-shrink: 0; }

  .dir-card-img {
    width:        110px;
    height:       100%;
    min-height:   90px;
    aspect-ratio: unset;
  }

  .dir-card:hover .dir-card-img { transform: none; }

  .dir-card-img-placeholder {
    width:        110px;
    height:       100%;
    min-height:   90px;
    aspect-ratio: unset;
    font-size:    1.6rem;
  }

  .dir-card-rating-badge { display: none; }
  .dir-card-dots         { display: none; }

  .dir-card-body  { padding: 10px 12px; gap: 4px; }
  .dir-card-name  { font-size: .88rem; }
  .dir-card-cat   { font-size: .72rem; }
  .dir-card-location { font-size: .72rem; }
  .dir-card-rating   { font-size: .75rem; padding-top: 2px; }
  .dir-card-tags     { display: none; }
}

/* ─── Loading / Empty ────────────────────────────────────────────── */
.dir-loading {
  text-align:  center;
  padding:     56px 16px;
  color:       var(--dir-muted);
  font-size:   .95rem;
  grid-column: 1 / -1;
}

.dir-empty {
  text-align:  center;
  padding:     56px 16px;
  grid-column: 1 / -1;
}

.dir-empty-icon { font-size: 2.8rem; margin-bottom: 12px; display: block; }

.dir-empty h3 {
  font-size:   1.05rem;
  color:       var(--dir-text);
  margin:      0 0 6px;
  font-weight: 700;
}

.dir-empty p { color: var(--dir-muted); font-size: .9rem; margin: 0 0 18px; }

.dir-empty-link {
  display:         inline-flex;
  align-items:     center;
  background:      var(--dir-green);
  color:           #fff;
  border-radius:   8px;
  padding:         10px 20px;
  font-size:       .88rem;
  font-weight:     700;
  text-decoration: none;
  transition:      background .15s;
}

.dir-empty-link:hover { background: var(--dir-green-dark); }

/* ─── Pagination ─────────────────────────────────────────────────── */
.dir-pagination {
  display:         flex;
  justify-content: center;
  gap:             6px;
  margin-top:      36px;
  flex-wrap:       wrap;
}

.dir-page-btn {
  padding:       8px 14px;
  border:        1px solid var(--dir-border);
  border-radius: 8px;
  background:    #fff;
  color:         var(--dir-text);
  cursor:        pointer;
  font-size:     .88rem;
  font-weight:   500;
  transition:    border-color .15s, color .15s, background .15s;
  min-width:     38px;
  text-align:    center;
}

.dir-page-btn.active,
.dir-page-btn:hover { border-color: var(--dir-green); color: var(--dir-green); background: #f0fdf4; }
.dir-page-btn.active { font-weight: 700; }

/* ─── CTA strip ──────────────────────────────────────────────────── */
.dir-cta-strip {
  background: var(--dir-green);
  padding:    56px 16px;
  text-align: center;
}

.dir-cta-content h2 {
  color:       #fff;
  font-size:   clamp(1.4rem, 4vw, 1.8rem);
  margin:      0 0 8px;
  font-weight: 800;
}

.dir-cta-content p {
  color:  rgba(255,255,255,.82);
  margin: 0 0 24px;
}

/* ─── Subhero (city / category sub-pages) ────────────────────────── */
.dir-subhero {
  background:    #fff;
  border-bottom: 1px solid var(--dir-border);
  padding:       32px 16px;
}

.dir-subhero-title { font-size: 1.6rem; font-weight: 700; margin: 8px 0; }
.dir-subhero-sub   { color: var(--dir-muted); font-size: .95rem; margin: 0 0 16px; }

.dir-breadcrumb {
  display:     flex;
  align-items: center;
  gap:         6px;
  font-size:   .82rem;
  color:       var(--dir-muted);
  margin-bottom: 8px;
}

.dir-breadcrumb a { color: var(--dir-green); text-decoration: none; }
.dir-breadcrumb a:hover { text-decoration: underline; }

.dir-filter-row { margin-top: 12px; }

.dir-filter-select {
  padding:       10px 14px;
  border:        1px solid var(--dir-border);
  border-radius: 8px;
  font-size:     .9rem;
  color:         var(--dir-text);
  background:    #fff;
  cursor:        pointer;
  max-width:     260px;
}

.dir-section-title { font-size: 1.2rem; font-weight: 700; color: var(--dir-text); margin: 0 0 20px; }