/*
 * ╔══════════════════════════════════════════════════╗
 * ║  villaGo — Pagination Component                 ║
 * ╚══════════════════════════════════════════════════╝
 */

/* ── Wrapper ─────────────────────────────────────── */
.y-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--y-space-s);
  margin-block-start: var(--y-space-xl);
  flex-wrap: wrap;
}

/* ── Page Item ───────────────────────────────────── */
.y-page-item {}

.y-page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--y-radius-s);
  font-size: var(--y-font-s);
  font-weight: var(--y-weight-medium);
  color: var(--y-color-text-muted);
  background: var(--y-color-secondary);
  border: 1px solid var(--y-color-border);
  transition: all var(--y-transition-fast);
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
}

.y-page-link:hover {
  background: var(--y-color-primary-subtle);
  color: var(--y-color-primary);
  border-color: var(--y-color-primary);
}

/* ── Active ──────────────────────────────────────── */
.y-page-item.active .y-page-link,
.y-page-link.active {
  background: var(--y-color-primary);
  color: white;
  border-color: var(--y-color-primary);
  font-weight: var(--y-weight-bold);
}

/* ── Disabled ────────────────────────────────────── */
.y-page-item.disabled .y-page-link,
.y-page-link.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Previous / Next controls ────────────────────── */
.y-page-prev,
.y-page-next {
  padding: 0 var(--y-space-m);
  width: auto;
  gap: 4px;
  font-size: var(--y-font-s);
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE STYLES
   ═══════════════════════════════════════════════════ */

/* ── Large Desktop (lg) ──────────────────────────── */
@media (max-width: 1200px) {}

/* ── Tablet (md) ─────────────────────────────────── */
@media (max-width: 992px) {}

/* ── Mobile Landscape / Large Phone (sm) ─────────── */
@media (max-width: 768px) {
  .y-pagination { gap: 4px; }
  .y-page-link { width: 36px; height: 36px; min-height: 44px; }
}

/* ── Small Phone (xs) ────────────────────────────── */
@media (max-width: 480px) {
  .y-page-prev span,
  .y-page-next span {
    display: none;
  }
}