/* ================================================================
   indus-areas.css
   Published to: /public/vendor/core/plugins/indus-locations/css/
   Loaded via:   asset('vendor/plugins/indus-locations/css/indus-areas.css')
================================================================ */

:root {
  --id-primary:    rgb(255, 0, 0);
  --id-primary-dk: #ff0a0a;
  --id-dark:       #333333;
  --id-accent-bg:  #fff8ed;
}

/* ── Overline label ──────────────────────────────────────────── */
.id-overline {
  font-size:      .68rem;
  font-weight:    700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color:          var(--id-primary);
}

/* ── Section typography ──────────────────────────────────────── */
.id-section-title {
  font-size:   clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.2;
  color:       var(--id-dark);
}

.id-section-desc {
  max-width:   540px;
  line-height: 1.7;
  font-size:   .95rem;
}

/* ── Search ──────────────────────────────────────────────────── */
.id-search-group {
  max-width: 440px;
}

.id-search-input:focus {
  border-color: var(--id-primary) !important;
  box-shadow:   0 0 0 .2rem rgba(232, 160, 32, .2) !important;
  outline:      none;
}

/* ── Filter pills ────────────────────────────────────────────── */
.id-pill {
  padding:        6px 18px;
  border-radius:  50px;
  font-size:      .7rem;
  font-weight:    700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border:         1px solid #dee2e6;
  background:     #fff;
  color:          #6b7280;
  transition:     background .18s, color .18s, border-color .18s;
}

.id-pill:hover,
.id-pill.active {
  background:   var(--id-primary) !important;
  border-color: var(--id-primary) !important;
  color:        #fff !important;
}

/* ── Area card (anchor) ──────────────────────────────────────── */
.id-area-card {
  display:         block;
  background:      #fff;
  border:          1px solid #e5e7eb;
  border-radius:   8px;
  padding:         12px 14px;
  text-decoration: none;
  transition:      transform .18s, border-color .18s, background .18s;
  height:          100%;
}

.id-area-card:hover,
.id-area-card:focus-visible {
  transform:    translateY(-2px);
  border-color: rgba(232, 160, 32, .55);
  background:   var(--id-accent-bg);
  outline:      none;
}

/* dot + name */
.id-area-name {
  display:     flex;
  align-items: center;
  gap:         8px;
  font-size:   .82rem;
  font-weight: 600;
  color:       var(--id-dark);
  line-height: 1.3;
}

.id-area-name::before {
  content:       '';
  display:       inline-block;
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    var(--id-primary);
  flex-shrink:   0;
}

/* category label */
.id-area-sub {
  font-size:    .67rem;
  color:        #9ca3af;
  padding-left: 14px;
  margin-top:   2px;
}

/* ── Result count ────────────────────────────────────────────── */
.id-count-text        { color: #9ca3af; }
.id-count-text strong { color: var(--id-primary); }