/* Dhru Fusion visual refresh: shared public storefront layer */
:root {
  --ui-ink: #111827;
  --ui-ink-soft: #344054;
  --ui-muted: #667085;
  --ui-line: #e4e7ec;
  --ui-surface: #ffffff;
  --ui-canvas: #f6f8fb;
  --ui-primary: #1769e0;
  --ui-primary-dark: #0f4fb1;
  --ui-accent: #10b981;
  --ui-warning: #f59e0b;
  --ui-danger: #e55353;
  --ui-radius: 14px;
  --ui-shadow: 0 10px 35px rgba(16, 24, 40, .07);
  --ui-shadow-hover: 0 18px 45px rgba(16, 24, 40, .13);
}

html { scroll-behavior: smooth; }
body {
  background: var(--ui-canvas);
  color: var(--ui-ink);
  font-family: 'myriad-pro', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.55;
}
body > header { box-shadow: 0 1px 0 rgba(16, 24, 40, .08); position: relative; z-index: 20; }
header { background: var(--ui-surface); }
header .container, .footer-top .container { max-width: 1280px; }

.header-top {
  background: var(--ui-ink);
  border: 0;
  color: #d0d5dd;
  min-height: 38px;
}
.header-top .nav-link, .header-top .text-muted { color: #d0d5dd !important; font-size: .78rem; }
.header-top .nav-item:hover { background: transparent; }
.header-top .nav-item:hover .nav-link { color: #fff !important; }
.header-middle { background: var(--ui-surface); }
.header-middle.header-bottom { border-top: 1px solid var(--ui-line); }
.navbar-xl { min-height: 76px; }
.navbar-brand { color: var(--ui-ink) !important; font-size: 1.25rem; letter-spacing: -.02em; margin-left: 0; }
.navbar-brand img { max-height: 48px; width: auto; }
.navbar-expand-lg .navbar-nav .nav-link {
  color: var(--ui-ink-soft);
  font-size: .94rem;
  font-weight: 600;
  padding: 27px 15px;
}
.navbar-expand-lg .navbar-nav .nav-item:hover .nav-link { color: var(--ui-primary); }
.navbar-expand-lg .navbar-nav .nav-item .nav-link:not(.bg-secondary)::before {
  background: var(--ui-primary);
  border-radius: 99px 99px 0 0;
  height: 3px;
}
.navbar-toggler { border: 1px solid var(--ui-line); border-radius: 10px; color: var(--ui-ink); padding: .55rem .7rem; }
a { color: var(--ui-primary); transition: color .18s ease, background .18s ease, border-color .18s ease; }
a:hover { color: var(--ui-primary-dark); }

.bg-gray, .page-index .bg-gray { background: var(--ui-canvas) !important; }
.page-title {
  color: var(--ui-ink);
  font-size: clamp(1.55rem, 2.6vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -.035em;
  margin: 0;
  padding: 1rem 0 1.35rem;
}
.breadcrumb { color: var(--ui-muted); padding-top: 1.2rem; }
.breadcrumb a { color: var(--ui-muted); padding: 4px 6px; }
.page-container { padding: 1.1rem 0 2.8rem; }
.page-content { min-height: 340px; }

.card, .list-group, .table-responsive, .modal-content, .sidebar .cart, .box-white {
  background: var(--ui-surface);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow);
}
.card { overflow: hidden; }
.card:not(.card-product):hover { border-color: #d6ddea; }
.card-header, .card-footer { background: transparent; border-color: var(--ui-line); padding: 1rem 1.25rem; }
.card-body { padding: 1.35rem; }
.card-title, .card h3, .card h4 { color: var(--ui-ink); font-weight: 700; letter-spacing: -.018em; }

.btn, button.btn, input[type="submit"], input[type="button"] {
  border-radius: 9px;
  font-weight: 700;
  min-height: 40px;
  padding: .58rem 1rem;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover, button.btn:hover, input[type="submit"]:hover, input[type="button"]:hover { box-shadow: 0 8px 18px rgba(16, 24, 40, .12); transform: translateY(-1px); }
.btn-primary, .bg-primary { background: var(--ui-primary) !important; border-color: var(--ui-primary) !important; color: #fff !important; }
.btn-primary:hover { background: var(--ui-primary-dark) !important; border-color: var(--ui-primary-dark) !important; }
.btn-secondary, .bg-secondary { background: var(--ui-ink) !important; border-color: var(--ui-ink) !important; color: #fff !important; }
.btn-success { background: var(--ui-accent) !important; border-color: var(--ui-accent) !important; }
.btn-light, .btn-outline-secondary { background: #fff !important; border: 1px solid var(--ui-line) !important; color: var(--ui-ink-soft) !important; }
.btn-outline-primary { border-color: var(--ui-primary) !important; color: var(--ui-primary) !important; }
.btn-outline-primary:hover { background: var(--ui-primary) !important; color: #fff !important; }

.form-control, .custom-select, select, textarea, input[type="text"], input[type="email"], input[type="password"], input[type="number"] {
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 9px;
  color: var(--ui-ink);
  min-height: 42px;
  padding: .6rem .8rem;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.form-control:focus, .custom-select:focus, select:focus, textarea:focus, input:focus {
  border-color: var(--ui-primary);
  box-shadow: 0 0 0 3px rgba(23, 105, 224, .14);
  outline: 0;
}
label { color: var(--ui-ink-soft); font-size: .88rem; font-weight: 700; margin-bottom: .35rem; }
.input-group-text { background: #f8fafc; border-color: #d0d5dd; color: var(--ui-muted); }

.table-responsive { overflow-x: auto; }
.table { background: transparent; color: var(--ui-ink-soft); margin-bottom: 0; }
.table thead th { background: #f8fafc; border-bottom: 1px solid var(--ui-line); color: var(--ui-ink); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.table td, .table th { border-top: 1px solid #eef1f5; padding: .85rem .8rem; vertical-align: middle; }
.table tbody tr:hover { background: #f8fbff; }
.badge { border-radius: 999px; font-size: .74rem; padding: .35rem .65rem; }
.alert { border: 0; border-radius: 10px; box-shadow: 0 4px 14px rgba(16, 24, 40, .05); }

.card-product { background: transparent; border: 0; box-shadow: none; }
.card-product .product-info { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow); padding: 1rem; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.card-product:hover .product-info { border-color: #b9cef1; box-shadow: var(--ui-shadow-hover); transform: translateY(-3px); }
.card-product .service-name, .card-product .truncate-text { color: var(--ui-ink); font-weight: 700; }
.card-product .card-img-top { border-radius: 10px; }
.discount { color: var(--ui-muted); }

.pagination .page-link { border: 1px solid var(--ui-line); border-radius: 8px; color: var(--ui-ink-soft); margin: 0 3px; }
.pagination .page-item.active .page-link { background: var(--ui-primary); border-color: var(--ui-primary); color: #fff; }
.nav-pills .nav-link { border-radius: 9px; color: var(--ui-muted); font-weight: 700; }
.nav-pills .nav-link.active { background: #eaf2ff; color: var(--ui-primary); }

.dropdown-menu { border: 1px solid var(--ui-line); border-radius: 10px; box-shadow: var(--ui-shadow-hover); padding: .55rem; }
.dropdown-item { border-radius: 7px; color: var(--ui-ink-soft); padding: .55rem .75rem; }
.dropdown-item:hover, .dropdown-item:focus { background: #eef5ff !important; color: var(--ui-primary) !important; }
.modal-content { box-shadow: 0 24px 70px rgba(16, 24, 40, .22); }
.modal-header { border-bottom: 1px solid var(--ui-line); padding: 1.2rem 1.35rem; }
.modal-footer { border-top: 1px solid var(--ui-line); }

footer .footer-top { background: var(--ui-ink) !important; border-top: 0; color: #d0d5dd; }
.footer-top .footer-navbar .nav .nav-item a.nav-link, .footer-top a, footer .text-muted { color: #cbd5e1 !important; }
.footer-top .link-heading { color: #fff; font-size: .82rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.footer-top .link-heading:after { background: var(--ui-primary) !important; border-radius: 99px; }
.footer-bottom { background: #0b1220; color: #98a2b3; }

/* Mobile navigation inherits the same surfaces and spacing. */
.modal-menu .modal-dialog { box-shadow: 12px 0 35px rgba(16, 24, 40, .18); }
.modal-menu .modal-content { border: 0; border-radius: 0 var(--ui-radius) var(--ui-radius) 0; }
.modal-menu .dropdown-item, .modal-menu .nav-link { border-bottom-color: var(--ui-line); color: var(--ui-ink-soft); }
.modal-menu .nav-link.dropdown-toggle { color: var(--ui-muted); }

@media (max-width: 991.98px) {
  .header-top { min-height: 0; }
  .navbar-xl { min-height: 64px; }
  .navbar-brand { font-size: 1.1rem; }
  .navbar-expand-lg .navbar-nav .nav-link { padding: .8rem 1rem; }
  .page-container { padding-top: .7rem; }
  .card-body { padding: 1rem; }
}
@media (max-width: 575.98px) {
  .container { padding-left: 16px; padding-right: 16px; }
  .page-title { padding: .8rem 0 1rem; }
  .breadcrumb { padding-top: .8rem; }
  .table td, .table th { padding: .65rem .55rem; }
  .btn, button.btn, input[type="submit"], input[type="button"] { min-height: 38px; padding: .5rem .75rem; }
}

/* Sheriff GSM 3D brand treatment */
.sheriff-brand {
  align-items: center;
  display: inline-flex;
  gap: .7rem;
  min-width: 0;
  perspective: 500px;
}
.sheriff-brand-logo {
  background: #05070b;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 50%;
  box-shadow: 0 4px 0 rgba(255,255,255,.22) inset, 0 8px 18px rgba(3,7,18,.28), 0 0 0 3px rgba(16,24,40,.08);
  display: block;
  height: 54px;
  object-fit: cover;
  transition: transform .22s ease, box-shadow .22s ease;
  width: 54px;
}
.sheriff-brand:hover .sheriff-brand-logo {
  box-shadow: 0 5px 0 rgba(255,255,255,.28) inset, 0 12px 24px rgba(3,7,18,.36), 0 0 0 4px rgba(23,105,224,.12);
  transform: rotateX(5deg) rotateY(-8deg) translateY(-2px);
}
.sheriff-brand-name {
  color: var(--ui-ink);
  font-size: 1.03rem;
  font-weight: 800;
  letter-spacing: .015em;
  line-height: 1.1;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dark .sheriff-brand-name, body.dark .sheriff-brand-name { color: #fff; }

@media (max-width: 991.98px) {
  .sheriff-brand-logo { height: 46px; width: 46px; }
  .sheriff-brand-name { font-size: .96rem; max-width: 145px; }
}
@media (max-width: 575.98px) {
  .sheriff-brand { gap: .5rem; }
  .sheriff-brand-logo { height: 40px; width: 40px; }
  .sheriff-brand-name { font-size: .9rem; max-width: 120px; }
}

/* Restrained 3D surface treatment */
body {
  background-image: radial-gradient(circle at 8% 0%, rgba(23,105,224,.08), transparent 32%), radial-gradient(circle at 92% 10%, rgba(16,185,129,.05), transparent 26%);
}
.card, .list-group, .table-responsive, .modal-content, .sidebar .cart, .box-white {
  box-shadow: 0 2px 0 rgba(255,255,255,.88) inset, 0 16px 36px rgba(16,24,40,.08), 0 2px 2px rgba(16,24,40,.04);
}
.btn-primary, .btn-secondary, .btn-success {
  box-shadow: 0 2px 0 rgba(255,255,255,.18) inset, 0 5px 0 rgba(0,0,0,.12), 0 10px 20px rgba(16,24,40,.12);
  text-shadow: 0 1px 1px rgba(0,0,0,.18);
}
.btn-primary:active, .btn-secondary:active, .btn-success:active { box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 2px 0 rgba(0,0,0,.12); transform: translateY(2px); }
.header-middle { box-shadow: 0 5px 18px rgba(16,24,40,.07); }

/* Full service-name and AJAX modal layout fix */
.modal-ajax .modal-dialog {
  margin: 1rem auto;
  max-width: min(900px, calc(100vw - 2rem));
  width: auto;
}
.modal-ajax .modal-content { overflow: hidden; }
.modal-ajax .modal-header {
  align-items: flex-start;
  display: flex;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
}
.modal-ajax .service-modal-title {
  flex: 1 1 auto;
  font-size: clamp(1rem, 1.7vw, 1.35rem);
  line-height: 1.28;
  margin: 0;
  max-width: calc(100% - 2.2rem);
  min-width: 0;
  overflow-wrap: anywhere;
  padding-right: .25rem;
  white-space: normal !important;
  word-break: break-word;
}
.modal-ajax .modal-header .close {
  flex: 0 0 auto;
  line-height: 1;
  margin: .05rem 0 0 auto;
  min-height: 34px;
  padding: .2rem .5rem;
}
.modal-ajax .modal-body {
  max-height: min(72vh, 720px);
  overflow: auto;
  padding: 1.25rem;
}
.modal-ajax .ajax-responsive,
.modal-ajax .ajax-responsive * {
  max-width: 100%;
  overflow-wrap: anywhere;
}
.modal-ajax .ajax-responsive table { table-layout: fixed; width: 100%; }
.modal-ajax .ajax-responsive td,
.modal-ajax .ajax-responsive th { white-space: normal; word-break: break-word; }
.service-name-preview,
.card-product .service-name,
.service-list .searchme,
.imeiservices .searchme,
.serverservices .searchme,
.remoteservices .searchme,
.fileservices .searchme {
  display: block;
  line-height: 1.35;
  max-height: none;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
  word-break: break-word;
}
@media (max-width: 575.98px) {
  .modal-ajax .modal-dialog { margin: .5rem; max-width: calc(100vw - 1rem); }
  .modal-ajax .modal-header { gap: .5rem; padding: .9rem 1rem; }
  .modal-ajax .modal-body { padding: 1rem; }
}