/* Premium Categories Grid - Updated Styles */

/* Container */
.pcgu-container { max-width: 1100px; margin: 40px auto; padding: 0 18px; font-family: Poppins, Inter, system-ui, sans-serif; color: #222; }

/* Headings */
.pcgu-title {
  font-size: 2.1rem;
  font-weight: 700;
  margin-bottom: 6px;
  background: linear-gradient(90deg, #4facfe, #7f5af0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pcgu-sub { color: #6b7280; margin-bottom: 26px; }

/* Top categories grid (cards with icon) */
.pcgu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; align-items: stretch; }
.pcgu-card { background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(249,250,252,0.9)); border-radius: 16px; padding: 22px; text-decoration: none; color: inherit; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 10px 30px rgba(15,23,42,0.06); border: 1px solid rgba(15,23,42,0.03); transition: transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s; }
.pcgu-card:hover { transform: translateY(-8px); box-shadow: 0 18px 44px rgba(15,23,42,0.09); border-color: rgba(127,90,240,0.18); }
.pcgu-card-icon { font-size: 34px; margin-bottom: 12px; }
.pcgu-card-title { font-weight: 700; font-size: 1.05rem; margin-bottom: 8px; }
.pcgu-card-desc { color: #4b5563; font-size: 0.95rem; }

/* Premium Categories Grid - Updated Styles */

/* Container */
.pcgu-container {
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 18px;
  font-family: Poppins, Inter, system-ui, sans-serif;
  color: #222;
}

/* Headings */
.pcgu-title {
  font-size: 2.1rem;
  font-weight: 700;
  margin-bottom: 6px;
  background: linear-gradient(90deg, #4facfe, #7f5af0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pcgu-sub {
  color: #6b7280;
  margin-bottom: 26px;
}

/* Top categories grid (cards with icon) */
.pcgu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  align-items: stretch;
}
.pcgu-card {
  background: linear-gradient(180deg, #ffffff, #f9fafc);
  border-radius: 16px;
  padding: 22px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 10px 30px rgba(15,23,42,0.06);
  border: 1px solid rgba(15,23,42,0.05);
  transition: transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s, border-color .28s;
}
.pcgu-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 44px rgba(15,23,42,0.1);
  border-color: rgba(127,90,240,0.25);
}
.pcgu-card-icon {
  font-size: 34px;
  margin-bottom: 12px;
}
.pcgu-card-title {
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 8px;
}
.pcgu-card-desc {
  color: #4b5563;
  font-size: 0.95rem;
}

/* Single category search */
.pcgu-search-wrap {
  position: relative;
  width: 100%;
  max-width: 760px;
  margin: 0 auto 28px auto;
}
#pcgSearch {
  width: 100%;
  padding: 14px 20px 14px 48px;
  border-radius: 40px;
  border: 1px solid rgba(15,23,42,0.08);
  background: #fff;
  box-shadow: 0 8px 26px rgba(2,6,23,0.06);
  font-size: 1rem;
  outline: none;
  transition: box-shadow .25s ease, border-color .25s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath fill='%23999' d='M11.742 10.344h-.79l-.28-.27a6.471 6.471 0 001.57-4.14 6.5 6.5 0 10-6.5 6.5 6.471 6.471 0 004.14-1.57l.27.28v.79l5 4.99L16.742 15l-4.999-4.656zM6.242 10.5a4.258 4.258 0 110-8.516 4.258 4.258 0 010 8.516z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 16px center;
  background-size: 18px;
}
#pcgSearch:focus {
  box-shadow: 0 12px 40px rgba(79,172,254,0.18);
  border-color: rgba(127,90,240,0.35);
}

/* Loader */
#pcgLoader {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(59,130,246,0.25);
  border-top-color: #4facfe;
  animation: pcg-spin 1s linear infinite;
  display: none;
}
@keyframes pcg-spin {
  to {
    transform: translateY(-50%) rotate(360deg);
  }
}

/* Subcategory grid - Fiverr-style box cards */
.pcgu-subgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  align-items: stretch;
}
.pcgu-subcard {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  background: #ffffff;
  border: 1px solid #eef2f7;
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 6px 18px rgba(2,6,23,0.04);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.pcgu-subcard:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 36px rgba(15,23,42,0.1);
  border-color: rgba(79,172,254,0.25);
}
.pcgu-sub-left {
  text-align: left;
  flex: 1;
}
.pcgu-subname {
  font-weight: 700;
  font-size: 1.05rem;
  color: #0f172a;
  margin-bottom: 6px;
}
.pcgu-subdesc {
  color: #6b7280;
  font-size: 0.95rem;
  line-height: 1.35;
  max-width: 70%;
}
.pcgu-sub-right {
  font-weight: 600;
  color: #4facfe;
  white-space: nowrap;
}

/* Responsive */
@media (max-width: 720px) {
  .pcgu-subdesc { display: none; }
  .pcgu-sub-right { font-size: 0.95rem; }
  .pcgu-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}

/* Subcategory grid - Fiverr-style box cards */
.pcgu-subgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; align-items: stretch; }
.pcgu-subcard { display: flex; justify-content: space-between; align-items: center; gap: 12px; text-decoration: none; color: inherit; background: #ffffff; border: 1px solid #eef2f7; border-radius: 12px; padding: 16px 18px; box-shadow: 0 6px 18px rgba(2,6,23,0.04); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.pcgu-subcard:hover { transform: translateY(-6px); box-shadow: 0 14px 36px rgba(15,23,42,0.08); border-color: rgba(79,172,254,0.18); }
.pcgu-sub-left { text-align: left; }
.pcgu-subname { font-weight: 700; font-size: 1.02rem; color: #0f172a; margin-bottom: 6px; }
.pcgu-subdesc { color: #6b7280; font-size: 0.95rem; line-height: 1.35; max-width: 60%; }
.pcgu-sub-right { font-weight: 600; color: #4facfe; }

/* Responsive */
@media (max-width: 720px) {
  .pcgu-subdesc { display: none; }
  .pcgu-sub-right { font-size: 0.95rem; }
  .pcgu-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}
.cat-name {
  color: #ff5a5f;   /* apna brand color */
  font-weight: 600; /* optional */
}