/* IMP VIRAL — Services page (prototype match: blue + orange glass). */
/* Kill theme purple band → solid dark like prototype */
body{background:#080b16 !important}
.service-page-area,#services,#services .body-overlay{background:#080b16 !important;background-image:none !important}
.service-page-area::before,.service-page-area::after,#services::before,#services::after{display:none !important;background:none !important}
#services{position:relative;z-index:1;padding:40px 0 70px;font-family:'Inter',system-ui,sans-serif;min-height:60vh}
#services .wrap{max-width:1180px;margin:0 auto;padding:0 24px}
#services .filter{display:grid;grid-template-columns:1fr 340px;gap:16px;margin:10px 0 34px}
#services .field{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);border-radius:14px;padding:16px 20px;color:#eaf0f8;font-size:15px;width:100%;outline:none;font-family:inherit}
#services .field::placeholder{color:#8b97ad}
#services select.field{appearance:none;-webkit-appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%238b97ad' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 18px center}
#services select.field:focus,#services input.field:focus{border-color:#2b7fe4;box-shadow:0 0 0 3px rgba(43,127,228,.18)}
#services .field option{background:#111a2e;color:#eaf0f8}
#services .cat{margin-bottom:22px;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.045)}
#services .cat-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;background:linear-gradient(135deg,rgba(43,127,228,.22),rgba(247,148,30,.12));cursor:pointer;border-bottom:1px solid rgba(255,255,255,.09)}
#services .cat-head h3{font-family:'Space Grotesk',sans-serif;letter-spacing:-.02em;font-size:17px;font-weight:600;color:#fff;margin:0}
#services .cat-head h3 .cust{color:#f7941e;font-weight:700}
#services .cat-head .tgl{flex:0 0 auto;width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,#f7941e,#ffab3d);display:grid;place-items:center;color:#141007;font-weight:700;font-size:18px}
#services .tbl{width:100%;border-collapse:collapse;font-size:14.5px}
#services .tbl th{text-align:left;color:#8b97ad;font-weight:600;font-size:12px;letter-spacing:.05em;text-transform:uppercase;padding:16px 22px;border-bottom:1px solid rgba(255,255,255,.09)}
#services .tbl td{padding:16px 22px;border-bottom:1px solid rgba(255,255,255,.05);vertical-align:top;color:#eaf0f8}
#services .tbl tr:last-child td{border-bottom:none}
#services .tbl tbody tr{transition:.15s}
#services .tbl tbody tr:hover{background:rgba(43,127,228,.08)}
#services .sid{color:#8b97ad;font-family:'Space Grotesk',sans-serif;font-weight:600}
#services .sname{color:#eaf0f8;max-width:560px}
#services .sname small{color:#8b97ad;display:block;margin-top:3px;font-size:12.5px}
#services .rate{color:#f7941e;font-family:'Space Grotesk',sans-serif;font-weight:600;white-space:nowrap}
#services .mm{color:#eaf0f8;font-weight:500}
#services .order{padding:8px 18px;border-radius:9px;background:linear-gradient(135deg,#2b7fe4,#3ba1ff);color:#fff;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;display:inline-block;transition:.2s}
#services .order:hover{color:#fff;transform:translateY(-1px);box-shadow:0 8px 20px rgba(43,127,228,.4)}
#services .imp-empty{text-align:center;padding:70px 0;color:#8b97ad}
#services .pagination-section{margin-top:26px}
#services .pagination{display:flex;list-style:none;justify-content:center;gap:8px;padding:0;flex-wrap:wrap}
#services .pagination .page-link{display:block;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);color:#eaf0f8;border-radius:10px;min-width:42px;text-align:center;padding:8px 12px;text-decoration:none}
#services .pagination .page-item.active .page-link,#services .pagination .page-link:hover{background:linear-gradient(135deg,#2b7fe4,#3ba1ff);border-color:transparent;color:#fff}
[v-cloak]{display:none}
@media(max-width:820px){
  #services .filter{grid-template-columns:1fr}
  #services .tbl thead{display:none}
  #services .tbl td{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:10px 18px;border:none}
  #services .tbl td::before{content:attr(data-label);color:#8b97ad;font-size:12px;text-transform:uppercase;font-weight:600}
  #services .sname{max-width:none;text-align:right}
  #services .tbl tr{display:block;border-bottom:1px solid rgba(255,255,255,.09);padding:8px 0}
}