/* ==========================================================================
   pp-components.css — PerfectPanel component rules re-used inside the panel
   Contains ONLY the component classes that pp-theme.css defines for the
   public services page, re-declared here so panel pages can use the exact
   same markup without loading the whole 215KB theme (which would fight with
   user-panel.css). Loaded AFTER user-panel.css.
   Palette: --color-1 #171f2e · --color-2 #151b26 · --color-4 #111620
            --color-5 #171f2e · --color-6 #aa56ff · --color-8 rgba(170,86,255,.07)
   ========================================================================== */

:root {
  --color-1: #171f2e;
  --color-2: #151b26;
  --color-3: #c3c9d6;
  --color-4: #111620;
  --color-5: #171f2e;
  --color-6: #aa56ff;
  --color-7: #8756ff;
  --color-8: rgba(170, 86, 255, 0.07);
}

/* ---------------------------------------------------------------- shell --- */
.pp-shell {
  background: var(--color-1);
  border: 1px solid var(--color-2);
  border-radius: 15px;
  padding: 24px;
  margin-bottom: 20px;
}

/* ------------------------------------------------------- services toolbar - */
.service-top-list {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.service-top-list .stl-1 { flex: 0 0 auto; }
.service-top-list .stl-2 { flex: 1 1 280px; min-width: 220px; }
.service-top-list .stl-3 { flex: 0 0 280px; max-width: 100%; }

.btn-line-icon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--color-4);
  color: var(--color-5);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: .18s ease;
  white-space: nowrap;
}
.btn-line-icon:hover { background: rgba(170, 86, 255, .14); border-color: var(--color-6); color: #fff; }
.btn-line-icon .btn-icon {
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(170, 86, 255, .16); color: #c98bff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
}

.input-group-custom { position: relative; width: 100%; }
.input-group-custom input {
  width: 100%;
  height: 50px;
  background: var(--color-4);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  padding: 0 46px 0 18px;
  outline: none;
  transition: .18s ease;
}
html[dir="rtl"] .input-group-custom input { padding: 0 18px 0 46px; }
.input-group-custom input::placeholder { color: #6f7789; }
.input-group-custom input:focus { border-color: var(--color-6); box-shadow: 0 0 0 3px rgba(170, 86, 255, .18); }
.input-group-custom .input-group-btn {
  position: absolute;
  inset-inline-end: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #8b93a7;
  font-size: 15px;
  pointer-events: none;
}

.pp-select {
  width: 100%;
  height: 50px;
  background: var(--color-4);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  padding: 0 16px;
  outline: none;
  cursor: pointer;
}
.pp-select:focus { border-color: var(--color-6); }
.pp-select option { background: #111620; color: #fff; }

/* --------------------------------------------------- category divider ----- */
.service-category-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 26px 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-8);
}
.service-category-head .icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: rgba(170, 86, 255, .14); color: #c98bff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
  flex-shrink: 0;
}
.service-category-head h2 { font-size: 17px; font-weight: 700; color: #fff; margin: 0; }
.service-category-head .count {
  margin-inline-start: auto;
  font-size: 12px; font-weight: 700; color: #c98bff;
  background: rgba(170, 86, 255, .14); border: 1px solid rgba(170, 86, 255, .28);
  border-radius: 999px; padding: 3px 12px;
}

/* ------------------------------------------------------ service item ------ */
.service-content { display: flex; flex-direction: column; }

.service-item {
  position: relative;
  background: var(--color-1);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 15px;
  padding: 16px 20px;
  margin-bottom: 12px;
  transition: .2s ease;
}
.service-item:hover {
  border-color: rgba(170, 86, 255, .45);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
  transform: translateY(-2px);
}
.service-item.admin-recomm {
  border: 2px solid #FFD700 !important;
  box-shadow: inset 0 14px 15px rgba(255, 215, 0, .12);
}

.admin-offer {
  position: absolute;
  top: -10px;
  inset-inline-start: 18px;
  background: linear-gradient(135deg, #FFD700, #f0a500);
  color: #2a1a00;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 12px;
  border-radius: 999px;
  letter-spacing: .2px;
}

.services-item-top { display: flex; flex-direction: column; gap: 10px; }
.services-item-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  margin-top: 12px;
  border-top: 1px solid var(--color-8);
  flex-wrap: wrap;
}
.sit-first, .sit-last, .sib-first, .sib-last { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sit-first { justify-content: space-between; }

.services-title { min-width: 0; flex: 1; }
.services-title a { color: #fff !important; text-decoration: none; }
.services-title a:hover .ss-name { color: #c98bff; }
.st-id {
  display: inline-block;
  background: var(--color-6);
  color: #fff;
  padding: 2px 9px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 700;
  margin-inline-end: 9px;
  vertical-align: middle;
}
.ss-name { font-size: 14px; font-weight: 600; color: #fff; line-height: 1.6; }

.sib-first .min,
.sib-first .max,
.sib-first .avg {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--color-4);
  border: 1px solid rgba(255, 255, 255, .06);
  padding: 4px 11px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.sib-first .min { color: #22c8fe; }
.sib-first .max { color: #ff7b7b; }
.sib-first .avg { color: #c3c9d6; }

.services-rate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #2fcd94;
  background: rgba(45, 250, 212, .12);
  border: 1px solid rgba(45, 250, 212, .22);
  height: 34px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.sib-last .btn { font-size: 13px; font-weight: 700; padding: 8px 16px; border-radius: 9px !important; white-space: nowrap; }
.sib-last .btn-order {
  background: linear-gradient(135deg, var(--color-6), var(--color-7));
  color: #fff !important;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  box-shadow: 0 8px 20px rgba(170, 86, 255, .35);
  transition: .2s ease;
  text-decoration: none;
}
.sib-last .btn-order:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(170, 86, 255, .48); }
.sib-last .btn-ghost {
  background: var(--color-4);
  border: 1px solid rgba(255, 255, 255, .1);
  color: #c3c9d6 !important;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  transition: .2s ease;
  text-decoration: none;
}
.sib-last .btn-ghost:hover { border-color: var(--color-6); color: #fff !important; }

.btn-fav-toggle { background: none; border: none; font-size: 17px; cursor: pointer; line-height: 1; padding: 4px; transition: .18s; }
.btn-fav-toggle:hover { transform: scale(1.15); }
.btn-fav-toggle.active { color: #FFD700; }
.btn-fav-toggle:not(.active) { color: #4b5468; }

/* tag chips inside a service row */
.svc-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.svc-tag {
  font-size: 11.5px; font-weight: 700;
  padding: 3px 10px; border-radius: 999px;
  background: var(--color-4);
  border: 1px solid rgba(255, 255, 255, .07);
  color: #8b93a7;
}
.svc-tag.green { color: #6ff0be; border-color: rgba(47, 205, 148, .3); background: rgba(47, 205, 148, .1); }
.svc-tag.blue  { color: #8ec5ff; border-color: rgba(50, 108, 236, .3); background: rgba(50, 108, 236, .12); }
.svc-tag.purple{ color: #c98bff; border-color: rgba(170, 86, 255, .3); background: rgba(170, 86, 255, .12); }
.svc-tag.red   { color: #ff9c9c; border-color: rgba(233, 62, 62, .3); background: rgba(233, 62, 62, .12); }

/* --------------------------------------------------------- empty state ---- */
.pp-empty {
  text-align: center;
  padding: 60px 20px;
  background: var(--color-1);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 15px;
}
.pp-empty i { font-size: 38px; color: rgba(170, 86, 255, .5); margin-bottom: 14px; display: block; }
.pp-empty strong { display: block; font-size: 16px; color: #fff; margin-bottom: 16px; }
.pp-empty .btn-order { display: inline-flex; }

/* ------------------------------------------------------- pagination ------- */
.pp-pagination { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 26px; }
.pp-pagination a, .pp-pagination span {
  min-width: 40px; height: 40px; padding: 0 13px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--color-1);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  color: #c3c9d6;
  font-size: 13px; font-weight: 700;
  text-decoration: none;
  transition: .18s ease;
}
.pp-pagination a:hover { border-color: var(--color-6); color: #fff; }
.pp-pagination a.active {
  background: linear-gradient(135deg, var(--color-6), var(--color-7));
  border-color: transparent; color: #fff;
  box-shadow: 0 8px 20px rgba(170, 86, 255, .35);
}
.pp-pagination a.disabled { opacity: .35; pointer-events: none; }

/* --------------------------------------------------------- responsive ----- */
@media (max-width: 991.98px) {
  .service-top-list .stl-1,
  .service-top-list .stl-2,
  .service-top-list .stl-3 { flex: 1 1 100%; }
  .sit-first { flex-direction: column; align-items: flex-start; gap: 8px; }
  .services-item-bottom { flex-direction: column; align-items: stretch; }
  .sib-first, .sib-last { width: 100%; }
  .sib-last .btn { flex: 1; justify-content: center; }
}

/* --------------------------------------------------- primary action btn --- */
.btn-order {
  background: linear-gradient(135deg, var(--color-6), var(--color-7));
  color: #fff !important;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(170, 86, 255, .35);
  transition: .2s ease;
}
.btn-order:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(170, 86, 255, .48); color: #fff !important; }