/* ROKODIL — page-common.css — badges, stock-status, rating, кнопки */

/* ==========================================================================
   ОБЩИЕ: badge, stock-status, rating, кнопка
   ========================================================================== */
.badge { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 10px; font-size: 14px; font-weight: 500; line-height: 32px; border-radius: 999px; }
.badge--green { background: #81A554; color: #fff; }
.badge--dark { background: #252B2B; color: #fff; }

.stock-status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; }
.stock-status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.stock-status--in::before { background: #81A554; }
.stock-status--in { color: #81A554; }
.stock-status--low::before { background: #E8A317; }
.stock-status--low { color: #E8A317; }
.stock-status--out::before { background: #979E9F; }
.stock-status--out { color: #979E9F; }

.rating { display: inline-flex; align-items: center; gap: 4px; }
.rating__stars { display: inline-flex; gap: 2px; }
.rating__star { width: 16px; height: 16px; color: #E8A317; }
.rating__star--empty { color: #E3E5E6; }
.rating__count { font-size: 12px; color: #979E9F; line-height: 18px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 16px; line-height: 20px; font-weight: 400; text-align: center; border-radius: 4px; transition: background 0.2s, opacity 0.2s, box-shadow 0.2s; white-space: nowrap; cursor: pointer; border: none; }
.btn--primary { background: #006C66; color: #fff; padding: 14px 24px; }
.btn--primary:hover { background: #057F72; }
.btn--primary:active { background: #00594E; }
.btn--primary:disabled { opacity: 0.3; cursor: not-allowed; }
.btn--secondary { background: #F5F5F5; color: #252B2B; padding: 10px 20px; font-size: 14px; font-weight: 500; }
.btn--secondary:hover { background: #FCFCFC; box-shadow: 0 0 0 1px #D5D5D5; }

.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #F9F9F9; color: #252B2B; transition: background 0.2s, color 0.2s; }
.icon-btn:hover { background: #F1F1F1; color: #006C66; }

.pagination { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 48px; }
.pagination__btn { min-width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 4px; font-size: 14px; font-weight: 500; color: #252B2B; border: 1px solid transparent; transition: all 0.2s; }
.pagination__btn:hover { background: #F9F9F9; }
.pagination__btn.is-active { background: #006C66; color: #fff; }
.pagination__btn:disabled { opacity: 0.3; cursor: not-allowed; }