/* ================================================================
   PAGINA CATEGORIE 2026
   ================================================================ */

div.container.cat-container {
  background: #f4f6f8;
  padding-top: 16px;
  padding-bottom: 48px;
}

.cat-h1 {
  font-size: 22px;
  font-weight: 800;
  color: #1a1a2e;
  margin: 0 0 14px 0;
  letter-spacing: -.3px;
}

.cat-description {
  background: #fff;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13px;
  color: #5a6a7a;
  margin-bottom: 14px;
  border: 1px solid #e8edf2;
  line-height: 1.6;
}

/* -- Subcategorii -- */
.cat-subcategories { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.cat-subcat-pill {
  background: #fff;
  border: 1.5px solid #e2e8ed;
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #1a1a2e;
  text-decoration: none;
  transition: all .15s;
}
.cat-subcat-pill:hover { background: #016fb6; border-color: #016fb6; color: #fff; text-decoration: none; }

/* -- Bara sortare -- */
.cat-sort-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  border-radius: 10px;
  padding: 10px 16px;
  margin-bottom: 16px;
  border: 1px solid #e8edf2;
  box-shadow: 0 1px 6px rgba(0,0,0,.04);
  flex-wrap: wrap;
}
.cat-sort-group { display: flex; align-items: center; gap: 8px; }
.cat-sort-group label { font-size: 12px; font-weight: 600; color: #5a6a7a; white-space: nowrap; margin: 0; }
.cat-sort-group select {
  border: 1.5px solid #e2e8ed;
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 13px;
  color: #1a1a2e;
  background: #f9fbfc;
  cursor: pointer;
  outline: none;
  transition: border-color .15s;
}
.cat-sort-group select:focus { border-color: #016fb6; }

/* -- Grid produse -- */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}

/* -- Card -- */
.cat-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  border: 1px solid #eef1f5;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
}
.cat-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.11); transform: translateY(-2px); }

.cat-badge-discount {
  position: absolute; top: 8px; left: 8px; z-index: 3;
  background: #e51a17; color: #fff;
  font-size: 11px; font-weight: 700;
  padding: 3px 8px; border-radius: 6px;
}
.cat-badge-unavail {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  background: rgba(90,106,122,.85); color: #fff;
  font-size: 10px; font-weight: 600;
  padding: 3px 8px; border-radius: 6px;
}

.cat-img-link { display: block; background: #f9fbfc; }
.cat-img { width: 100%; aspect-ratio: 1/1; object-fit: contain; padding: 10px; display: block; }

/* -- Overlay hover -- */
.cat-overlay {
  position: absolute;
  top: 0; left: 0; right: 0;
  aspect-ratio: 1/1;
  background: linear-gradient(to top, rgba(1,111,182,.88) 0%, rgba(1,111,182,.45) 60%, transparent 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 10px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .22s ease, transform .22s ease;
  z-index: 2;
  pointer-events: none;
}
.cat-card:hover .cat-overlay { opacity: 1; transform: translateY(0); pointer-events: auto; }

.cat-overlay-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 8px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  border: 2px solid rgba(255,255,255,.6);
  cursor: pointer;
  text-decoration: none;
  transition: all .15s;
  color: #fff;
  background: rgba(255,255,255,.18);
}
.cat-overlay-btn:hover { background: rgba(255,255,255,.32); color: #fff; text-decoration: none; }
.cat-overlay-call { background: rgba(34,134,58,.85); border-color: transparent; }

/* -- Card body -- */
.cat-card-body { padding: 10px 12px 6px; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.cat-stock { font-size: 11px; font-weight: 600; }
.cat-stock-in { color: #22863a; }
.cat-stock-order { color: #b35c00; }
.cat-stock-out { color: #c0392b; }
.cat-name {
  font-size: 13px; font-weight: 600; color: #1a1a2e; line-height: 1.4;
  text-decoration: none; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cat-name:hover { color: #016fb6; text-decoration: none; }
.cat-price-block { margin-top: 6px; }
.cat-price { font-size: 16px; font-weight: 900; color: #e51a17; display: block; }
.cat-price-old { font-size: 12px; color: #9aafbf; text-decoration: line-through; display: block; }

/* -- Footer card -- */
.cat-card-footer { padding: 8px 12px 12px; }
.cat-btn-cart, .cat-btn-unavail, .cat-btn-call, .cat-btn-options {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 6px; border-radius: 8px;
  font-size: 12px; font-weight: 700;
  border: none; cursor: pointer; text-decoration: none; transition: all .15s;
}
.cat-btn-cart    { background: #016fb6; color: #fff; }
.cat-btn-cart:hover { background: #0056a0; color: #fff; text-decoration: none; }
.cat-btn-options { background: #f0f7ff; color: #016fb6; border: 1.5px solid #c8dff5 !important; }
.cat-btn-options:hover { background: #016fb6; color: #fff; border-color: #016fb6 !important; text-decoration: none; }
.cat-btn-unavail { background: #f0f3f6; color: #9aafbf; cursor: not-allowed; }
.cat-btn-call    { background: #22863a; color: #fff; }
.cat-btn-call:hover { background: #196b2f; color: #fff; text-decoration: none; }

/* -- Skeleton loading -- */
@keyframes skel-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}
.cat-card-skeleton { pointer-events: none; }
.skel-img {
  width: 100%; aspect-ratio: 1/1;
  background: linear-gradient(90deg, #eef1f5 25%, #f8f9fb 50%, #eef1f5 75%);
  background-size: 800px 100%;
  animation: skel-shimmer 1.4s infinite linear;
}
.skel-line {
  height: 12px; border-radius: 6px; margin-bottom: 8px;
  background: linear-gradient(90deg, #eef1f5 25%, #f8f9fb 50%, #eef1f5 75%);
  background-size: 800px 100%;
  animation: skel-shimmer 1.4s infinite linear;
}
.skel-line-sm    { width: 55%; height: 10px; }
.skel-line-md    { width: 70%; }
.skel-line-price { width: 50%; height: 16px; }
.skel-btn {
  height: 36px; border-radius: 8px;
  background: linear-gradient(90deg, #eef1f5 25%, #f8f9fb 50%, #eef1f5 75%);
  background-size: 800px 100%;
  animation: skel-shimmer 1.4s infinite linear;
}

/* -- Paginare desktop (dreapta) -- */
.cat-pagination { display: flex; justify-content: flex-end; align-items: center; margin-top: 8px; flex-wrap: wrap; gap: 8px; }
.cat-pagination .pagination { margin: 0; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 6px rgba(0,0,0,.06); }
.cat-pagination .pagination > li > a,
.cat-pagination .pagination > li > span { padding: 7px 13px; font-size: 13px; font-weight: 600; color: #016fb6; border-color: #e2e8ed; background: #fff; }
.cat-pagination .pagination > li.active > span { background: #016fb6; border-color: #016fb6; color: #fff; }
.cat-pagination .pagination > li > a:hover { background: #f0f7ff; color: #016fb6; }
.mob-pag-info { display: none; }

/* -- Scroll to top -- */
#scroll-top-btn {
  position: fixed; bottom: 28px; right: 20px; z-index: 900;
  width: 42px; height: 42px;
  background: #016fb6; color: #fff; border: none;
  border-radius: 50%; box-shadow: 0 3px 12px rgba(1,111,182,.4);
  font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(10px);
  transition: opacity .22s, transform .22s;
  pointer-events: none;
}
#scroll-top-btn.stt-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
#scroll-top-btn:hover { background: #0056a0; }

/* -- Widget chat deasupra barei mobile -- */
@media (max-width: 991px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .cat-h1 { font-size: 18px; }
  .cat-sort-bar { gap: 10px; padding: 8px 12px; }
  .cat-price { font-size: 15px; }
  .cat-overlay { display: none !important; }
  div.container.cat-container { padding-bottom: 80px; }
  #scroll-top-btn { bottom: 80px; right: 14px; }
}

@media (max-width: 767px) {
  .cat-pagination { flex-direction: column; align-items: stretch; gap: 10px; }
  .mob-pag-info { display: block; text-align: center; font-size: 14px; color: #5a6a7a; }
  .mob-pag-info strong { color: #1a1a2e; }

  /* Ascunde numerele, lasă doar prev/next și pagina activă */
  .cat-pagination .pagination { display: flex; justify-content: center; width: 100%; margin: 0; border-radius: 10px; overflow: hidden; }
  .cat-pagination .pagination > li { display: none; flex: 1; }
  .cat-pagination .pagination > li:first-child,
  .cat-pagination .pagination > li:last-child,
  .cat-pagination .pagination > li:nth-child(2),
  .cat-pagination .pagination > li:nth-last-child(2),
  .cat-pagination .pagination > li.active { display: flex; }

  /* Butoane mari, ușor de apăsat cu degetul */
  .cat-pagination .pagination > li > a,
  .cat-pagination .pagination > li > span {
    min-height: 48px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    padding: 0 12px;
    border-color: #e2e8ed;
  }

  /* Prev/Next — mai vizuale */
  .cat-pagination .pagination > li:first-child > a,
  .cat-pagination .pagination > li:last-child > a,
  .cat-pagination .pagination > li:nth-child(2) > a,
  .cat-pagination .pagination > li:nth-last-child(2) > a {
    background: #f0f7ff;
    color: #016fb6;
    font-size: 18px;
  }
  .cat-pagination .pagination > li:first-child > a:hover,
  .cat-pagination .pagination > li:last-child > a:hover,
  .cat-pagination .pagination > li:nth-child(2) > a:hover,
  .cat-pagination .pagination > li:nth-last-child(2) > a:hover {
    background: #016fb6;
    color: #fff;
  }
}