/* Stage22: Services reference-exact page, kept backend IDs/categories intact */
.services-stage22{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.services-stage22 .services-content-text{
  padding:18px 20px;
  border-radius:18px;
  border:1px solid var(--border-color);
  background:var(--card-bg);
  color:var(--text-main);
}
.services-stage22 .services-filter{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  width:100%!important;
  margin-bottom:0!important;
  position:relative!important;
  z-index:35!important;
}
.services-stage22 .filter-button.dropdown{
  position:relative!important;
  flex:0 0 auto!important;
  z-index:60!important;
}
.services-stage22 .filter-button .dropdown-toggle{
  min-width:64px!important;
  height:50px!important;
  background:var(--main-color)!important;
  color:#fff!important;
  border:none!important;
  padding:0 16px!important;
  border-radius:16px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  cursor:pointer!important;
  box-shadow:0 12px 30px var(--main-opacity)!important;
}
.services-stage22 .filter-button .dropdown-toggle .ti{
  color:#fff!important;
  font-size:20px!important;
}
.services-stage22 .filter-button>.dropdown-menu{
  display:none!important;
  position:absolute!important;
  top:calc(100% + 10px)!important;
  right:0!important;
  left:auto!important;
  min-width:360px!important;
  max-width:min(460px, calc(100vw - 28px))!important;
  max-height:460px!important;
  overflow:auto!important;
  padding:10px!important;
  margin:0!important;
  list-style:none!important;
  background:var(--card-bg)!important;
  border:1px solid var(--border-color)!important;
  border-radius:18px!important;
  box-shadow:0 24px 70px var(--shadow-color)!important;
  z-index:10080!important;
}
.services-stage22 .filter-button.open>.dropdown-menu,
.services-stage22 .filter-button.show>.dropdown-menu,
.services-stage22 .filter-button>.dropdown-menu.show{
  display:block!important;
}
.services-stage22 .dropdown-menu li{
  list-style:none!important;
  margin:0!important;
}
.services-stage22 .dropdown-menu .dropdown-item{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  width:100%!important;
  padding:10px 12px!important;
  border-radius:12px!important;
  color:var(--text-main)!important;
  background:transparent!important;
  text-decoration:none!important;
  white-space:normal!important;
  line-height:1.45!important;
  font-size:13px!important;
  font-weight:600!important;
  transition:.2s ease!important;
}
.services-stage22 .dropdown-menu .dropdown-item:hover,
.services-stage22 .dropdown-menu .dropdown-item.active{
  background:var(--main-color)!important;
  color:#fff!important;
}
.services-stage22 .dropdown-menu .dropdown-item img,
.services-stage22 .dropdown-menu .dropdown-item i,
.services-stage22 .dropdown-menu .dropdown-item span[class*="fa"]{
  width:24px!important;
  height:24px!important;
  min-width:24px!important;
  max-width:24px!important;
  max-height:24px!important;
  object-fit:cover!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:7px!important;
  overflow:hidden!important;
  color:var(--main-color)!important;
  background:var(--secondary-color)!important;
  border:1px solid var(--border-color)!important;
  font-size:14px!important;
}
.services-stage22 .dropdown-menu .dropdown-item:hover img,
.services-stage22 .dropdown-menu .dropdown-item:hover i,
.services-stage22 .dropdown-menu .dropdown-item:hover span[class*="fa"],
.services-stage22 .dropdown-menu .dropdown-item.active img,
.services-stage22 .dropdown-menu .dropdown-item.active i,
.services-stage22 .dropdown-menu .dropdown-item.active span[class*="fa"]{
  color:#fff!important;
  border-color:rgba(255,255,255,.25)!important;
  background:rgba(255,255,255,.12)!important;
}
.services-stage22 .service-search{
  flex:1 1 auto!important;
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  min-width:0!important;
}
.services-stage22 .service-search input.search{
  width:100%!important;
  height:50px!important;
  border-radius:16px!important;
  padding:0 18px 0 58px!important;
  background:var(--card-bg)!important;
  border:1px solid var(--border-color)!important;
  color:var(--text-main)!important;
  outline:0!important;
  box-shadow:none!important;
  font-size:14px!important;
  font-weight:600!important;
}
html[dir="rtl"] .services-stage22 .service-search input.search,
html[lang="ar"] .services-stage22 .service-search input.search{
  padding:0 18px 0 58px!important;
  text-align:right!important;
}
.services-stage22 .service-search span{
  position:absolute!important;
  left:8px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:38px!important;
  height:38px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  pointer-events:auto!important;
}
.services-stage22 .service-search button{
  width:38px!important;
  height:38px!important;
  border:none!important;
  border-radius:12px!important;
  background:var(--main-color)!important;
  color:#fff!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  cursor:pointer!important;
}
.services-stage22 .table-wrapper{
  width:100%!important;
  overflow-x:auto!important;
  border:0!important;
  background:transparent!important;
  padding:0!important;
}
.services-stage22 .table-wrapper table{
  width:100%!important;
  border-collapse:separate!important;
  border-spacing:0 12px!important;
  color:var(--text-main)!important;
  min-width:980px!important;
}
.services-stage22 .table-wrapper tbody tr.service-row{
  background:var(--secondary-color)!important;
  border-radius:16px!important;
  box-shadow:0 8px 24px var(--shadow-color)!important;
  transition:transform .2s ease,box-shadow .2s ease!important;
}
.services-stage22 .table-wrapper tbody tr.service-row:hover{
  transform:translateY(-2px)!important;
  box-shadow:0 12px 32px var(--shadow-color)!important;
}
.services-stage22 .table-wrapper .category-name{
  background:var(--main-color)!important;
  color:#fff!important;
  font-size:14px!important;
  font-weight:900!important;
  border-radius:15px!important;
  padding:0!important;
}
.services-stage22 .table-wrapper .category-box{
  padding:14px 20px!important;
}
.services-stage22 .table-wrapper .category-inner{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  color:#fff!important;
}
.services-stage22 .table-wrapper .category-inner img,
.services-stage22 .table-wrapper .category-inner i,
.services-stage22 .table-wrapper .category-inner span[class*="fa"]{
  width:28px!important;
  height:28px!important;
  min-width:28px!important;
  max-width:28px!important;
  max-height:28px!important;
  border-radius:8px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  object-fit:cover!important;
  overflow:hidden!important;
  font-size:18px!important;
  color:#fff!important;
}
.services-stage22 .table-wrapper .category-inner strong{
  font-weight:900!important;
  color:#fff!important;
}
.services-stage22 .table-wrapper .service-row>td{
  padding:16px!important;
  vertical-align:top!important;
  border:none!important;
}
.services-stage22 .table-wrapper .service-row>td:first-child{
  border-radius:0 15px 15px 0!important;
}
.services-stage22 .table-wrapper .service-row>td:last-child{
  border-radius:15px 0 0 15px!important;
}
.services-stage22 .table-wrapper .service-label{
  font-size:11px!important;
  line-height:1.4!important;
  font-weight:800!important;
  color:var(--text-main)!important;
  opacity:.78!important;
  margin-bottom:6px!important;
  white-space:nowrap!important;
}
.services-stage22 .table-wrapper .service-value{
  font-size:13px!important;
  line-height:1.55!important;
  font-weight:600!important;
  color:var(--text-main)!important;
}
.services-stage22 .table-wrapper .service-name .service-value{
  min-width:300px!important;
  max-width:520px!important;
}
.services-stage22 .table-wrapper .btn-copy{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  padding:6px 10px!important;
  border-radius:10px!important;
  background:var(--main-color)!important;
  color:#fff!important;
  font-weight:900!important;
  cursor:pointer!important;
  position:relative!important;
  transition:all .2s ease!important;
}
.services-stage22 .table-wrapper .btn-copy svg path{fill:#fff!important;}
.services-stage22 .table-wrapper .btn-copy.copied{background:#22c55e!important;}
.services-stage22 .table-wrapper .td-badge{
  display:inline-flex!important;
  align-items:center!important;
  padding:6px 12px!important;
  border-radius:999px!important;
  background:var(--card-bg)!important;
  border:1px solid var(--border-color)!important;
  font-size:12px!important;
  line-height:1.4!important;
  font-weight:800!important;
  white-space:nowrap!important;
}
.services-stage22 .table-wrapper .actions-item{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px!important;
  white-space:nowrap!important;
}
.services-stage22 .table-wrapper .btn-order-now,
.services-stage22 .table-wrapper .btn-fav{
  width:36px!important;
  height:36px!important;
  min-width:36px!important;
  border-radius:10px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  cursor:pointer!important;
  font-size:15px!important;
  text-decoration:none!important;
}
.services-stage22 .table-wrapper .btn-order-now{
  background:var(--main-color)!important;
  color:#fff!important;
  border:1px solid var(--main-color)!important;
}
.services-stage22 .table-wrapper .btn-fav{
  background:var(--card-bg)!important;
  border:1px solid var(--border-color)!important;
  color:var(--main-color)!important;
}
.services-stage22 .table-wrapper .btn-fav.active,
.services-stage22 .table-wrapper .btn-fav.is-active{
  background:var(--main-color)!important;
  color:#fff!important;
  border-color:var(--main-color)!important;
}
.services-stage22 .table-wrapper .btn-details{
  height:36px!important;
  background:var(--card-bg)!important;
  border:1px solid var(--border-color)!important;
  border-radius:10px!important;
  padding:8px 14px!important;
  font-weight:700!important;
  color:var(--main-color)!important;
  cursor:pointer!important;
  box-shadow:none!important;
}
.services-stage22 .table-wrapper .btn-details:hover{
  background:var(--main-color)!important;
  border-color:var(--main-color)!important;
  color:#fff!important;
}
.services-stage22 .table-wrapper .w-100{width:100px!important;}
.services-stage22 #details-modal{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
  position:fixed!important;
  inset:0!important;
  align-items:center!important;
  justify-content:center!important;
  z-index:10090!important;
}
.services-stage22 #details-modal.show,
.services-stage22 #details-modal.stage22-open{
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
}
.services-stage22 #details-modal .modal-overlay{
  position:absolute!important;
  inset:0!important;
  background:rgba(0,0,0,.64)!important;
}
.services-stage22 #details-modal .modal-box{
  position:relative!important;
  z-index:2!important;
  width:min(680px,calc(100vw - 28px))!important;
  max-height:calc(100vh - 50px)!important;
  overflow:auto!important;
  background:var(--card-bg)!important;
  border:1px solid var(--border-color)!important;
  border-radius:22px!important;
  box-shadow:0 28px 90px rgba(0,0,0,.45)!important;
}
.services-stage22 #details-modal .modal-header{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:16px!important;
  padding:18px 20px!important;
  border-bottom:1px solid var(--border-color)!important;
}
.services-stage22 #details-modal .modal-header h3{
  margin:0!important;
  font-size:18px!important;
  font-weight:900!important;
  color:var(--text-main)!important;
}
.services-stage22 #details-modal .modal-close{
  width:34px!important;
  height:34px!important;
  border:none!important;
  border-radius:10px!important;
  background:var(--secondary-color)!important;
  color:var(--text-main)!important;
  font-size:22px!important;
  line-height:1!important;
  cursor:pointer!important;
}
.services-stage22 #details-modal .modal-body{
  padding:20px!important;
  color:var(--text-main)!important;
  line-height:1.9!important;
  font-size:14px!important;
  font-weight:500!important;
}
body.services-stage22-modal-open{overflow:hidden!important;}
@media(max-width:991px){
  .services-stage22 .services-filter{align-items:stretch!important;}
  .services-stage22 .filter-button .dropdown-toggle{height:48px!important;}
  .services-stage22 .service-search input.search{height:48px!important;}
}
@media(max-width:768px){
  .services-stage22 .services-filter{
    display:grid!important;
    grid-template-columns:56px 1fr!important;
    gap:10px!important;
  }
  .services-stage22 .filter-button .dropdown-toggle{
    min-width:56px!important;
    width:56px!important;
    padding:0!important;
    border-radius:15px!important;
  }
  .services-stage22 .filter-button>.dropdown-menu{
    min-width:calc(100vw - 24px)!important;
    max-width:calc(100vw - 24px)!important;
    max-height:70vh!important;
    right:0!important;
  }
  .services-stage22 .table-wrapper{
    overflow:visible!important;
  }
  .services-stage22 .table-wrapper table,
  .services-stage22 .table-wrapper tbody,
  .services-stage22 .table-wrapper td,
  .services-stage22 .table-wrapper tr{
    display:block!important;
    width:100%!important;
    min-width:0!important;
  }
  .services-stage22 .table-wrapper tr.category-row{
    background:transparent!important;
    margin:0 0 12px!important;
  }
  .services-stage22 .table-wrapper tr.category-row td{
    display:block!important;
    width:100%!important;
  }
  .services-stage22 .table-wrapper tr.service-row{
    margin-bottom:16px!important;
    padding:0!important;
    overflow:hidden!important;
    border:1px solid var(--border-color)!important;
  }
  .services-stage22 .table-wrapper .service-row>td,
  .services-stage22 .table-wrapper .service-row>td:first-child,
  .services-stage22 .table-wrapper .service-row>td:last-child{
    border-radius:0!important;
  }
  .services-stage22 .table-wrapper td.serv-name{
    display:flex!important;
    width:100%!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:16px!important;
    padding:12px 16px!important;
    border-bottom:1px dashed var(--border-color)!important;
  }
  .services-stage22 .table-wrapper td.serv-name:last-child{border-bottom:none!important;}
  .services-stage22 .table-wrapper .service-label{
    font-size:12px!important;
    margin-bottom:0!important;
    padding-inline-end:8px!important;
  }
  .services-stage22 .table-wrapper .service-value{
    text-align:left!important;
  }
  html[dir="rtl"] .services-stage22 .table-wrapper .service-value,
  html[lang="ar"] .services-stage22 .table-wrapper .service-value{
    text-align:left!important;
    direction:rtl!important;
  }
  .services-stage22 .table-wrapper .service-name .service-value{
    min-width:0!important;
    max-width:64%!important;
    text-align:right!important;
  }
  .services-stage22 .table-wrapper .actions-item{
    width:100%!important;
    justify-content:flex-end!important;
  }
}