/* =========================

   LISTĂ CATEGORII – wrapper

   ========================= */

.parent-content-grid-box {
  background: radial-gradient(
    circle at left center,
    rgb(42 76 217 / 7%) 0%,
    rgb(42 76 217 / 4%) 90%
  );

  border: 1px solid rgb(42 76 217 / 11%);

  border-radius: 16px;

  padding: 4rem;
}

.parent-category {
  font-family: inherit;
}

/* =========================

   BARA DE FILTRARE – CENTRATĂ

   ========================= */

.parent-category .category-filter {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 0.7rem;

  margin-bottom: 1.8rem;

  color: var(--color-text, #0c305b);

  font-weight: 500;

  font-size: 0.9rem;

  margin-top: 0;
}

.parent-category .category-filter > span:first-child {
  font-weight: 600;

  margin-right: 0.3rem;

  font-size: 1.2rem;
}

/* iconurile de view – ca butoane rotunjite */

.parent-category .category-filter .glyphicon {
  width: 32px;

  height: 32px;

  display: grid;

  place-items: center;

  border-radius: 0.9rem;

  background: #fff;

  border: 1px solid transparent;

  color: var(--color-text, #0c305b);

  cursor: pointer;

  transition: background 0.12s ease, color 0.12s ease, border 0.12s ease;

  font-size: 1.05rem;
}

.parent-category .category-filter .glyphicon:hover {
  background: var(--color-secondary);

  color: #fff;
}

.parent-category .category-filter .glyphicon.active {
  background: var(--color-secondary);

  border-color: rgba(255, 255, 255, 0.6);

  color: #fff;
}

/* =========================

   GRID CATEGORII

   ========================= */

.parent-category .category-items .row {
  row-gap: 1.1rem;
}

/* cardul propriu-zis */

.parent-category .category-items .col-xs-6 a,
.parent-category .category-items .col-sm-4 a,
.parent-category .category-items .col-md-3 a {
  display: block;

  background: #fff;

  border-radius: 1.4rem;

  border: 1px solid rgba(0, 119, 255, 0.02);

  padding: 1.9rem 2.4rem;

  position: relative;

  overflow: hidden;

  text-decoration: none;

  color: var(--color-text, #0c305b);

  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

/* banda de jos */

.parent-category .category-items .col-xs-6 a::after {
  content: "";

  position: absolute;

  left: 0;

  bottom: 0;

  height: 4px;

  width: 100%;

  background: linear-gradient(
    90deg,
    var(--color-primary, #0077ff) 0%,

    var(--color-secondary, #00c6ff) 100%
  );

  opacity: 0.5;
}

/* iconul mic → îl facem bulină în stânga titlului */

.parent-category .category-items .col-xs-6 a > .glyphicon.glyphicon-menu-right {
  position: absolute;

  top: 0.85rem;

  left: 0.9rem;

  width: 30px;

  height: 30px;

  border-radius: 999px;

  background: rgba(0, 198, 255, 0.12);

  display: grid;

  place-items: center;

  color: var(--color-secondary, #00c6ff);

  font-size: 0.75rem;
}

/* titlul (textul linkului) */

.parent-category .category-items .col-xs-6 a {
  font-weight: 500;

  line-height: 1.35;

  font-size: 1.3rem;

  box-shadow: 0 16px 48px rgb(42 76 217 / 9%);
}

/* butonul “Vezi >>” jos stânga */

.parent-category .category-items .col-xs-6 a > button {
  position: absolute;

  bottom: 1.5rem;

  left: 1.5rem;

  background: var(--color-primary);

  border: 0;

  border-radius: 0.45rem;

  padding: 0.6rem 1rem 0.6rem;

  color: #fff;

  font-weight: 600;

  font-size: 1.2rem;

  text-transform: none;

  cursor: pointer;

  transition: background 0.12s ease, color 0.12s ease;

  height: auto;
}

/* overlay cu lupă */

.parent-category .category-items .col-xs-6 a .overlay {
  position: absolute;

  right: 0.9rem;

  top: 0.7rem;

  width: 38px;

  height: 38px;

  border-radius: 999px;

  background: rgba(0, 119, 255, 0.1);

  display: grid;

  place-items: center;

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.12s ease, transform 0.12s ease;
}

.parent-category .category-items .col-xs-6 a .overlay i {
  color: #fff;

  font-size: 1rem;
}

/* hover pe card */

.parent-category .category-items .col-xs-6 a:hover {
  transform: translateY(-3px);

  box-shadow: 0 18px 26px rgba(2, 60, 106, 0.08);
}

.parent-category .category-items .col-xs-6 a:hover > button {
  background: var(--color-secondary);
}

.parent-category .category-items .col-xs-6 a:hover .overlay {
  opacity: 1;

  transform: translateY(2px);
}

/* =========================

   RESPONSIVE

   ========================= */

@media (max-width: 767px) {
  .parent-category .category-filter {
    flex-wrap: wrap;

    gap: 0.5rem 0.7rem;

    text-align: center;
  }

  .parent-category .category-items .col-xs-6 a,
  .parent-category .category-items .col-sm-4 a,
  .parent-category .category-items .col-md-3 a {
    min-height: 140px;
  }
}

/* =========================

   LIST VIEW – LISTĂ CATEGORII SIMPLE

   ========================= */

.category-list .row {
  display: flex;

  flex-direction: column;

  gap: 0.6rem;
}

.category-list .col-xs-6,
.category-list .col-sm-4,
.category-list .col-md-3 {
  width: 100%;

  padding: 0;
}

.category-list .row a {
  border-bottom: solid 1px rgba(0, 118, 255, 0.25);

  color: var(--color-text, #0c305b);

  padding: 0px;

  background: none;

  border: 0px;

  box-shadow: none;
}

/* ======= Link principal ======= */

.category-list a {
  display: flex;

  align-items: center;

  gap: 1rem;

  width: 100%;

  background: #fff;

  border: 1px solid rgba(12, 48, 91, 0.06);

  border-radius: 10px;

  padding: 0.95rem 1.3rem 0.95rem 1.2rem;

  color: var(--color-text, #0c305b);

  font-size: 1.05rem;

  font-weight: 500;

  line-height: 1.4;

  text-decoration: none;

  transition: all 0.15s ease;

  box-shadow: 0 4px 10px rgba(0, 118, 255, 0.06);

  position: relative;

  width: auto;

  float: left;
}

/* ======= Icon stânga (keyboard_arrow_right) ======= */

.category-list a::before {
  content: "\e315";

  font-family: "Material Symbols Outlined";

  font-weight: 500;

  font-style: normal;

  font-size: 1.35rem;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 24px;

  height: 24px;

  border-radius: 50%;

  color: var(--color-secondary, #00c6ff);

  transition: all 0.2s ease;

  flex-shrink: 0;
}

/* ======= Hover efect ======= */

.category-list a:hover {
  transform: translateX(2px);

  text-decoration: none !important;

  color: var(--color-primary) !important;
}

.category-list a:hover::before {
  background: var(--color-secondary, #00c6ff);

  color: #fff;

  transform: translateX(1px);
}

/* ======= Buton “Vezi” ======= */

.category-list a button {
  position: absolute;

  right: 1rem;

  top: 50%;

  transform: translateY(-50%);

  background: rgba(0, 119, 255, 0.09);

  border: none;

  border-radius: 0.45rem;

  padding: 0.35rem 0.8rem;

  color: var(--color-primary, #0077ff);

  font-weight: 600;

  font-size: 0.85rem;

  cursor: pointer;

  transition: background 0.12s ease, color 0.12s ease;
}

.category-list a:hover button {
  background: var(--color-primary, #0077ff);

  color: #fff;
}

/* iconite filtrare */

.glyphicon-th-list:before {
  content: "list";

  font-family: "Material Symbols Outlined";

  font-weight: 500;

  font-style: normal;

  font-size: 2.1rem;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 24px;

  height: 24px;

  border-radius: 50%;

  color: var(--color-secondary, #00c6ff);

  transition: all 0.3s ease;

  flex-shrink: 0;
}

.glyphicon-th-list:hover:before,
.glyphicon-th-list.active:before {
  color: #fff;
}

.glyphicon-th-large:before {
  content: "grid_view";

  font-family: "Material Symbols Outlined";

  font-weight: 500;

  font-style: normal;

  font-size: 2.1rem;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 24px;

  height: 24px;

  border-radius: 50%;

  color: var(--color-secondary, #00c6ff);

  transition: all 0.3s ease;

  flex-shrink: 0;
}

.glyphicon-th-large:hover:before,
.glyphicon-th-large.active:before {
  color: #fff;
}

.parent-category .category-filter .glyphicon {
  width: auto;

  padding: 3px 5px;
}

/* ======= Responsive ======= */

@media (max-width: 768px) {
  .category-list {
    padding: 1.8rem 1rem 2rem;
  }

  .category-list a {
    font-size: 1rem;

    padding: 0.9rem 1rem 0.9rem 1.1rem;
  }

  .category-list a::before {
    width: 30px;

    height: 30px;

    font-size: 1.2rem;
  }

  .parent-content-grid-box {
    padding: 2rem;
  }
}

@media (max-width: 560px) {
  .parent-content-grid-box .category-items .col-xs-6 {
    width: 100%;
  }

  .parent-category .category-items .col-xs-6 a {
    height: auto;

    padding-bottom: 60px;

    min-height: 120px;
  }
}