/* ─── SIDEBAR ───────────────────────────────────────────────────── */
.sidebar {
  background: var(--bg2);
  border-right: 1px solid var(--border);
  position: sticky; top: 0; height: 100vh;
  overflow-y: auto;
  display: flex; flex-direction: column;
  z-index: 100;
}

/* ─── LOGO ───────────────────────────────────────────────────── */
.sidebar-logo {
  padding: 22px 22px 18px;
  border-bottom: 1px solid var(--border);
}
.brand-lockup {
  display: block;
  text-decoration: none;
}
.brand-mark {
  display: block;
  width: 100%;
  max-width: 140px;
  height: auto;
}
.brand-tag {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .68rem;
  color: var(--slate);
  font-weight: 500;
  letter-spacing: .02em;
  flex-wrap: wrap;
}
.brand-dot { color: var(--slate); opacity: .5; }

/* ─── SECTION LABEL ──────────────────────────────────────────── */
.sidebar-section {
  padding: 18px 22px 8px;
  font-size: .68rem;
  font-weight: 600;
  color: var(--slate);
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ─── REGION ROW ─────────────────────────────────────────────── */
.region-btn {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 22px;
  cursor: pointer;
  border: none; background: none;
  color: var(--text-soft);
  font-size: .9rem;
  width: 100%; text-align: left;
  position: relative;
  transition: background .15s, color .15s;
  text-decoration: none;
  font-family: var(--font-body);
}
.region-btn::before {
  content: '';
  position: absolute; left: 0; top: 10px; bottom: 10px;
  width: 2px;
  background: transparent;
  border-radius: 0 2px 2px 0;
  transition: background .15s;
}
.region-btn:hover, .region-btn.active {
  background: rgba(248,250,252,.04);
  color: var(--ivory);
}
.region-btn.active::before { background: var(--coral); }

.region-btn .flag {
  display: block; width: 32px; height: 32px; border-radius: 50%;
  overflow: hidden; flex-shrink: 0;
  border: 1px solid var(--border-2);
  transition: border-color .15s;
}
.region-btn .flag img { width: 100%; height: 100%; object-fit: cover; display: block; }
.region-btn:hover .flag, .region-btn.active .flag {
  border-color: var(--slate);
}

.region-btn .region-label {
  display: flex; flex-direction: column; gap: 1px;
  min-width: 0;
}
.region-btn .region-label .region-country {
  font-family: var(--font-display);
  font-size: .9rem; font-weight: 600;
  color: var(--ivory);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.region-btn .region-label .region-name {
  font-size: .72rem;
  color: var(--slate);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.region-btn[disabled] { opacity: 0.4; cursor: not-allowed; }

/* ─── RESORT SUB-LINKS ───────────────────────────────────────── */
.resort-link {
  display: block;
  padding: 5px 22px 5px 48px;
  cursor: pointer; border: none; background: none;
  color: var(--slate);
  font-size: .82rem;
  width: 100%; text-align: left;
  transition: color .15s;
  text-decoration: none;
}
.resort-link:hover, .resort-link.active { color: var(--ivory); }

/* ─── FOOTER ─────────────────────────────────────────────────── */
.sidebar-footer {
  margin-top: auto;
  padding: 16px 22px;
  border-top: 1px solid var(--border);
  font-size: .72rem;
  color: var(--slate);
  display: flex; flex-direction: column; gap: 6px;
}
.footer-stat { font-weight: 500; }
.footer-brand {
  display: flex; align-items: center; gap: 6px;
  font-size: .68rem;
  color: var(--slate);
}
.footer-brand strong { font-weight: 600; color: var(--coral); }
.brand-spark {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--coral);
  flex-shrink: 0;
}

.add-region-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px; cursor: pointer;
  border: 1px solid var(--border-2); border-radius: 8px;
  background: none; color: var(--slate);
  font-size: .8rem;
  width: calc(100% - 44px);
  margin: 8px 22px 4px;
  transition: border-color .15s, color .15s;
}
.add-region-btn:hover { border-color: var(--slate); color: var(--ivory); }