/* AVD Schools and Reviews — Around The Area List Widget */

.avdsr-al-wrap {
  --al-bg:              #ffffff;
  --al-title-color:     #111111;
  --al-title-font:      'Georgia', serif;
  --al-title-size:      2rem;
  --al-desc-color:      #666666;
  --al-tab-bg:          transparent;
  --al-tab-inactive-bg: transparent;
  --al-tab-color:       #555555;
  --al-tab-border:      #cccccc;
  --al-tab-active-bg:   #7aada0;
  --al-tab-active-color:#ffffff;
  --al-tab-radius:      100px;
  --al-head-color:      #aaaaaa;
  --al-divider:         #e8e8e8;
  --al-name-color:      #111111;
  --al-name-hover:      #555555;
  --al-addr-color:      #999999;
  --al-badge-color:     #3a7a6e;
  --al-badge-bg:        #e6f4f2;
  --al-dist-color:      #777777;
  --al-reviews-color:   #777777;
  --al-star-empty:      #dddddd;
  --al-star-full:       #c9a84c;
  --al-rating-color:    #333333;
  --al-showmore-bg:     #7aada0;
  --al-showmore-color:  #ffffff;
  --al-showmore-radius: 0px;

  background: var(--al-bg);
  font-family: inherit;
}

/* ── Title ─────────────────────────── */
.avdsr-al-title {
  font-family: var(--al-title-font);
  font-size: var(--al-title-size);
  font-weight: 400;
  color: var(--al-title-color);
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.15;
  margin: 0 0 14px;
}

.avdsr-al-description {
  font-size: .875rem;
  color: var(--al-desc-color);
  line-height: 1.7;
  margin: 0 0 24px;
  max-width: 680px;
}

/* ── Tabs ──────────────────────────── */
.avdsr-al-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.avdsr-al-tab {
  display: inline-flex;
  align-items: center;
  padding: 7px 18px;
  border-radius: var(--al-tab-radius);
  border: 1.5px solid var(--al-tab-border);
  background: var(--al-tab-inactive-bg, var(--al-tab-bg));
  color: var(--al-tab-color);
  font-size: .82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
}
.avdsr-al-tab:hover {
  border-color: var(--al-tab-active-bg);
  color: var(--al-tab-active-bg);
}
.avdsr-al-tab--active {
  background: var(--al-tab-active-bg);
  border-color: var(--al-tab-active-bg);
  color: var(--al-tab-active-color);
}

/* ── Panel ─────────────────────────── */
.avdsr-al-panel { display: none; }
.avdsr-al-panel--active { display: block; }

/* ── Table header ──────────────────── */
.avdsr-al-table-head {
  display: grid;
  grid-template-columns: 56px 1fr 110px 90px 100px 160px;
  gap: 0 14px;
  padding: 10px 14px;
  border-top: 1px solid var(--al-divider);
  border-bottom: 1px solid var(--al-divider);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--al-head-color);
  align-items: center;
}

/* ── Row ───────────────────────────── */
.avdsr-al-row {
  display: grid;
  grid-template-columns: 56px 1fr 110px 90px 100px 160px;
  gap: 0 14px;
  padding: 14px;
  border-bottom: 1px solid var(--al-divider);
  align-items: center;
  transition: background .15s;
}
.avdsr-al-row:hover { background: #fafafa; }
.avdsr-al-row--hidden { display: none; }

/* ── Photo ─────────────────────────── */
.avdsr-al-img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: #f0f0f5;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.avdsr-al-img--placeholder { background: #f0f0f5; }

/* ── Name ──────────────────────────── */
.avdsr-al-name {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .88rem;
  font-weight: 700;
  color: var(--al-name-color);
  text-decoration: none;
  line-height: 1.3;
  transition: color .18s;
}
.avdsr-al-name:hover { color: var(--al-name-hover); }
.avdsr-al-arrow { flex-shrink: 0; opacity: .4; }
.avdsr-al-name:hover .avdsr-al-arrow { opacity: 1; }

.avdsr-al-address {
  display: block;
  font-size: .74rem;
  color: var(--al-addr-color);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Category badge ────────────────── */
.avdsr-al-badge {
  display: inline-block;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--al-badge-color);
  background: var(--al-badge-bg);
  border-radius: 4px;
  padding: 4px 10px;
}

/* ── Distance ──────────────────────── */
.avdsr-al-col-dist { font-size: .82rem; color: var(--al-dist-color); }

/* ── Reviews ───────────────────────── */
.avdsr-al-col-reviews { font-size: .82rem; color: var(--al-reviews-color); }

/* ── Stars ─────────────────────────── */
.avdsr-al-col-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.avdsr-al-stars { display: inline-flex; gap: 2px; }
.avdsr-al-star path { fill: var(--al-star-empty); stroke: var(--al-star-empty); }
.avdsr-al-star--full path { fill: var(--al-star-full); stroke: var(--al-star-full); }
.avdsr-al-star--half path { fill: var(--al-star-full); stroke: var(--al-star-full); opacity: .5; }
.avdsr-al-rating-val { font-size: .82rem; color: var(--al-rating-color); font-weight: 500; }
.avdsr-al-no-rating  { color: var(--al-head-color); font-size: .82rem; }

/* ── Source logo ───────────────────── */
.avdsr-al-yelp-logo, .avdsr-al-google-logo { vertical-align: middle; margin-left: 4px; }

/* ── Show More / Less ──────────────── */
.avdsr-al-footer {
  display: flex;
  justify-content: center;
  padding: 32px 0 4px;
}
.avdsr-al-showmore {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 48px;
  background: var(--al-showmore-bg);
  color: var(--al-showmore-color);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  border: none;
  border-radius: var(--al-showmore-radius);
  cursor: pointer;
  transition: opacity .2s, transform .15s;
}
.avdsr-al-showmore:hover { opacity: .85; transform: translateY(-1px); }

/* ── Error ─────────────────────────── */
.avdsr-al-error {
  padding: 14px 18px;
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: 8px;
  font-size: .875rem;
  color: #991b1b;
}

/* ── Responsive ─────────────────────── */
@media (max-width: 720px) {
  .avdsr-al-table-head { display: none; }
  .avdsr-al-row {
    grid-template-columns: 44px 1fr;
    grid-template-rows: auto auto auto;
    row-gap: 5px;
    padding: 14px 8px;
  }
  .avdsr-al-col-img    { grid-row: 1 / 3; }
  .avdsr-al-col-name   { grid-column: 2; }
  .avdsr-al-col-cat    { grid-column: 2; grid-row: 2; }
  .avdsr-al-col-dist   { display: none; }
  .avdsr-al-col-reviews{ display: none; }
  .avdsr-al-col-rating { grid-column: 2; grid-row: 3; }
}