/* =========================================
   AW Pagination (site-wide component)
   Clean like filters/search UI
========================================= */

:root{
  --aw-pg-h: 44px;
  --aw-pg-r: 14px;

  --aw-pg-text: #0b2f3a;
  --aw-pg-border: rgba(2,47,59,.18);
  --aw-pg-bg: #ffffff;

  --aw-pg-hover-bg: rgba(2,47,59,.04);
  --aw-pg-hover-border: rgba(2,47,59,.34);

  --aw-pg-active-bg: var(--aw-color-menu-active, #CDAF54);
  --aw-pg-active-text: #082a33;
  --aw-pg-active-border: rgba(0,0,0,.10);

  --aw-pg-shadow: 0 10px 24px rgba(0,0,0,.08);
}

.aw-pagination-wrap{
  display: flex;
  justify-content: center;

  /* дає “повітря” від карток і SEO */
  margin: 28px 0 26px;
}

.aw-pagination{
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 0;
  margin: 0;
}

/* item */
.aw-pagination__item{
  display: inline-flex;
  align-items: center;
}

/* link */
.aw-pagination__link{
  min-width: var(--aw-pg-h);
  height: var(--aw-pg-h);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0 14px;
  border-radius: var(--aw-pg-r);

  font-weight: 800;
  font-size: 14px;
  line-height: 1;

  text-decoration: none;
  user-select: none;

  color: var(--aw-pg-text);
  background: var(--aw-pg-bg);
  border: 1px solid var(--aw-pg-border);

  transition:
    transform .12s ease,
    box-shadow .12s ease,
    background-color .12s ease,
    border-color .12s ease,
    color .12s ease;
}

.aw-pagination__link--icon{
  width: var(--aw-pg-h);
  padding: 0;
}

/* hover */
@media (hover:hover){
  .aw-pagination__link:hover{
    background: var(--aw-pg-hover-bg);
    border-color: var(--aw-pg-hover-border);
    box-shadow: var(--aw-pg-shadow);
    transform: translateY(-1px);
  }
}

/* active */
.aw-pagination__item--active .aw-pagination__link{
  background: var(--aw-pg-active-bg);
  border-color: var(--aw-pg-active-border);
  color: var(--aw-pg-active-text);
  box-shadow: var(--aw-pg-shadow);
}

/* dots */
.aw-pagination__item--dots .aw-pagination__dots{
  min-width: var(--aw-pg-h);
  height: var(--aw-pg-h);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: var(--aw-pg-r);
  border: 1px dashed var(--aw-pg-border);
  background: rgba(2,47,59,.03);

  color: rgba(2,47,59,.55);
  font-weight: 900;
}

/* focus */
.aw-pagination__link:focus-visible{
  outline: 2px solid var(--aw-color-menu-active, #CDAF54);
  outline-offset: 3px;
}

/* mobile tighter */
@media (max-width: 560px){
  :root{
    --aw-pg-h: 40px;
    --aw-pg-r: 13px;
  }

  .aw-pagination{
    gap: 8px;
  }

  .aw-pagination__link{
    font-size: 13px;
    padding: 0 12px;
  }
}
.aw-pagination__link{ box-sizing: border-box; }

.aw-pagination__item--active span.aw-pagination__link{
  background: var(--aw-pg-active-bg);
  border-color: var(--aw-pg-active-border);
  color: var(--aw-pg-active-text);
  box-shadow: var(--aw-pg-shadow);
}

/* якщо колись зробиш disabled як span */
.aw-pagination__item--disabled .aw-pagination__link{
  opacity: .55;
  pointer-events: none;
}