/* ═══════════════════════════════════════════════
   Ákotí Pagination — CSS-First

   <nav class="akoti-pagination">
     <button class="akoti-pg-btn" disabled>◀</button>
     <button class="akoti-pg-btn active">1</button>
     <button class="akoti-pg-btn">2</button>
     <button class="akoti-pg-btn">3</button>
     <span class="akoti-pg-dots">…</span>
     <button class="akoti-pg-btn">12</button>
     <button class="akoti-pg-btn">▶</button>
   </nav>

   Variants: .akoti-pg-sm, .akoti-pg-lg, .akoti-pg-pills
   Info:     <span class="akoti-pg-info">1–20 of 248</span>
   ═══════════════════════════════════════════════ */

.akoti-pagination {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: 'Outfit', system-ui, sans-serif;
}

.akoti-pg-btn {
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border: 1px solid rgba(26, 47, 94, 0.12);
  border-radius: 10px 4px 10px 4px;
  background: white;
  color: #1e1e24;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.03);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.akoti-pg-btn:hover:not(:disabled):not(.active) {
  background: #e8f0f8;
  border-color: #a8c8e8;
  border-radius: 4px 10px 4px 10px;
}

.akoti-pg-btn:active:not(:disabled) { transform: scale(0.95); }

.akoti-pg-btn.active {
  background: #1a2f5e;
  color: white;
  border-color: #1a2f5e;
  border-radius: 4px 10px 4px 10px;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(26,47,94,0.25);
}

.akoti-pg-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.akoti-pg-dots {
  padding: 0 4px;
  color: #8a8a96;
  font-size: 14px;
  user-select: none;
}

.akoti-pg-info {
  font-size: 12px;
  color: #5f6368;
  margin: 0 8px;
  white-space: nowrap;
}

/* Size variants */
.akoti-pg-sm .akoti-pg-btn { min-width: 28px; height: 28px; font-size: 11px; }
.akoti-pg-lg .akoti-pg-btn { min-width: 40px; height: 40px; font-size: 15px; }

/* Pill variant */
.akoti-pg-pills .akoti-pg-btn { border-radius: 50%; min-width: 34px; }
.akoti-pg-pills .akoti-pg-btn:hover:not(:disabled):not(.active) { border-radius: 50%; }
.akoti-pg-pills .akoti-pg-btn.active { border-radius: 50%; }

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .akoti-pg-btn { background: #2a2a32; color: #e0e0e4; border-color: rgba(255,255,255,0.1); }
  :root:not([data-theme="light"]) .akoti-pg-btn:hover:not(:disabled):not(.active) { background: #3a3a44; }
  :root:not([data-theme="light"]) .akoti-pg-btn.active { background: #a8c8e8; color: #0f1b3d; }
  :root:not([data-theme="light"]) .akoti-pg-info { color: #9a9aa6; }
}