/* 2026-10-16 (LOCAL): pagination look per Nasco's mock — thin line, 38px round buttons (same size as the contact icons), green filled current page, chevron arrows. Style only: markup and links come from pag.php / category_empt.php untouched. Every rule is scoped to .pagination. */
.pagination-wrap { left: 0 !important; } /* main.css shifts it 13px to the right, which put the round buttons off-centre */
.pagination { --pg: 38px; --pg-gap: 10px; gap: var(--pg-gap); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; padding-left: 0; list-style: none; }
.pagination::before, .pagination::after { content: ""; flex: 0 1 90px; min-width: 20px; height: 1px; background: #E5E5E5; }
.pagination .page-item { margin: 0; }
.pagination .page-item .page-link { position: relative; display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: var(--pg); height: var(--pg); margin: 0; padding: 0; border: 0; border-radius: 50% !important; background: transparent; box-shadow: none; color: #3F4650; font-size: 18px; font-weight: 400; line-height: 1; text-decoration: none; }
.pagination .page-item .page-link:hover { background: #eef3f1; color: #202A3A; }
.pagination .page-item.active .page-link { background: linear-gradient(135deg, #2fa886, #17896b); color: #fff; font-weight: 500; }
.pagination .page-link .icon { display: none; }
/* arrows built by pag.php (they have a title): chevron drawn with CSS, the text "<" ">" is hidden */
.pagination .page-link[title="Следующая страница"], .pagination .page-link[title="Предыдущая страница"], .pagination .page-link[title="Последняя страница"], .pagination .page-link[title="Първа страница"] { font-size: 0; }
.pagination .page-link[title]::before { content: ""; width: 20px; height: 20px; background: no-repeat center / contain; }
.pagination .page-link[title="Следующая страница"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233F4650' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E"); }
.pagination .page-link[title="Последняя страница"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233F4650' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5l7 7-7 7M12 5l7 7-7 7'/%3E%3C/svg%3E"); }
.pagination .page-link[title="Предыдущая страница"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233F4650' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E"); }
.pagination .page-link[title="Първа страница"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233F4650' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 5l-7 7 7 7M12 5l-7 7 7 7'/%3E%3C/svg%3E"); }
/* phones: 8 buttons (<< < 1 2 3 4 > >>) + 10px gaps must stay in ONE row; the button shrinks only as far as needed (38px from ~414px wide) */
@media (max-width: 480px) {
	.pagination { --pg: max(30px, min(38px, calc((100vw - 104px) / 8))); }
	.pagination::before, .pagination::after { display: none; }
}
@media (max-width: 340px) {
	.pagination { --pg-gap: 6px; --pg: max(28px, calc((100vw - 72px) / 8)); }
}