/* ===============================
   All Categories
================================ */
.all_category {
  /* ===============================
     Container
  ================================ */
  .container {
    margin-bottom: 5rem;
  }

  /* ===============================
     Categories Row
  ================================ */
  .categories-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    align-items: flex-start;

    position: unset !important;
    height: unset !important;

    /* ===============================
       Card Wrapper
    ================================ */
    .card-categories-wrapper {
      position: unset;
      /* border-radius: 8px; */
      border: 1px solid var(--text-color-primary-bg);
      transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);

      &:hover {
        transform: translateY(-5px);

        .img_content img {
          transform: scale(1.05);
        }
      }

      /* ===============================
         Card Categories
      ================================ */
      .card-categories {
        width: 100%;
        /* max-width: 305px; */
        max-height: 272px;
        overflow: hidden;

        .img_content {
          display: flex;
          align-items: center;
          justify-content: center;
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center;
          width: 100%;
          height: 250px;

          img {
            width: 100%;
            height: 100%;
            transition: transform 0.5s ease;
          }
        }
      }

      /* ===============================
         Category Head
      ================================ */
      .category-head {
        min-height: 60px;
        padding: 0 10px;
        font-size: 18px;
        font-weight: 700;
        display: flex;
        align-items: center;

        .head_cont {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: var(--text-color-primary-bg);
          a {
            span {
              display: inline-block;
              color: var(--text-color-primary-bg);
            }
          }

          /* Dropdown Toggle Button */
          .dropdown-toggle {
            width: 28px;
            height: 28px;
            /* border-radius: 2px; */
            background: var(--primary-color);
            color: var(--white-color);
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;

            &::after {
              display: none;
            }

            &:focus {
              outline: none;
            }

            i.arrow {
              font-size: 14px;
              transition: transform 0.3s ease;
            }

            &.open i.arrow {
              transform: rotate(180deg);
            }
          }
        }
      }

      /* ===============================
         Dropdown Menu (Sub Categories)
      ================================ */
      .dropdown-menu {
        /* override bootstrap */
        position: unset;
        display: block !important;
        overflow: hidden;
        max-height: 0;
        opacity: 0;
        transform: translateY(-6px);
        pointer-events: none;
        width: 100%;
        background: var(--text-color-primary-bg_dark);
        border-radius: 0;
        padding: 0;
        transition:
          max-height 0.4s ease,
          opacity 0.4s ease,
          transform 0.4s ease;
        border-color: var(--text-color-primary-bg);

        &.open {
          max-height: 600px;
          transform: translateY(0);
          pointer-events: auto;
          opacity: 1;
        }

        .dropdown-item {
          color: var(--text-color-primary-bg);
          text-decoration: none;
          display: block;
          padding: 6px 10px;
          font-size: 16px;
          transition: all 0.3s ease;

          &:hover,
          &:focus {
            color: var(--white);
            background: var(--primary-color);
            text-decoration: none;
          }

          &.sub {
            padding-left: 28px;
            font-size: 13px;
            display: flex;
            align-items: center;
            gap: 5px;
          }
        }
      }
    }
  }
}

/* ===============================
   Responsive
================================ */
@media (max-width: 768px) {
  .all_category {
    .categories-row {
      grid-template-columns: repeat(2, 1fr);
    }

    .card-categories-wrapper {
      .category-head {
        font-size: 16px;
        min-height: 50px;
      }
    }

    .img_content img {
      height: 180px;
    }
  }
}

@media (max-width: 425px) {
  .all_category {
    .categories-row {
      grid-template-columns: repeat(1, 1fr);
    }
  }
}

.dark {
  .dropdown-toggle {
    i.arrow {
      color: var(--text-color-primary-bg_dark);
    }
  }
}

.light {
  .dropdown-toggle {
    i.arrow {
      color: var(--white);
    }
  }
}

[dir="rtl"] {
  .dropdown-item {
    &.sub {
      i {
        transform: scaleX(1);
      }
    }
  }
}

[dir="ltr"] .dropdown-item {
  &.sub {
    i {
      transform: scaleX(-1);
    }
  }
}