:root{
  --primary:#2563eb;
  --secondary:#60a5fa;
  --bg:#f7f7fb;
  --card:#ffffff;
  --text:#141414;
  --muted:#6b7280;
  --radius:16px;
}
body.site-body{ background: var(--bg); color: var(--text); padding-bottom: 62px; }
.site-main{ min-height: 60vh; }
.brand-badge{
  width:42px;height:42px;border-radius:14px;display:grid;place-items:center;
  color:#fff;font-weight:800;letter-spacing:.5px;box-shadow:0 10px 25px rgba(37,99,235,.20);
}
.navlink{ color:#111; text-decoration:none; font-weight:600; }
.navlink:hover{ color: var(--primary); }
.hero-wrap{
  position:relative;border-radius: 26px;overflow:hidden;
  background: radial-gradient(80% 120% at 20% 0%, rgba(255,74,162,.30), transparent 60%),
              radial-gradient(90% 120% at 90% 10%, rgba(108,92,231,.28), transparent 55%),
              linear-gradient(135deg, #ffffff, #fff5fb);
  box-shadow: 0 18px 45px rgba(17, 24, 39, .08);
}
.hero-pad{ padding: 18px; }
@media (min-width: 992px){ .hero-pad{ padding: 34px; } }
.pill{
  display:inline-flex; align-items:center; gap:8px;padding: 8px 12px;border-radius: 999px;
  background: rgba(37,99,235,.10);color: #1d4ed8;font-weight: 700;font-size: 13px;
}
.grad-text{
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.btn-grad{
  border:0;background: linear-gradient(90deg, var(--primary), var(--secondary));
  color:#fff;border-radius: 999px;padding: 10px 16px;font-weight: 700;
  box-shadow: 0 12px 26px rgba(255,74,162,.25);
}
.btn-grad:hover{ filter: brightness(0.98); color:#fff; }
.cardx{
  background: var(--card);border-radius: var(--radius);
  border: 1px solid rgba(17,24,39,.07);
  box-shadow: 0 14px 35px rgba(17,24,39,.06);
}
.badgex{ background: rgba(108,92,231,.10);color:#3b2fc2;border-radius:999px;padding:6px 10px;font-weight:700;font-size: 12px; }
.service-card .banner{ height: 155px;border-radius: 16px;background: #f2f2ff;overflow:hidden; }
.service-card img{ width:100%; height:100%; object-fit:cover; }
.price-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.price-old{ color:#9ca3af; text-decoration: line-through; font-weight:700; }
.price-now{ color:#111827; font-weight:900; font-size: 18px; }
.price-tag{ margin-left:auto;background: rgba(16,185,129,.12);color:#047857;padding:6px 10px;border-radius: 999px;font-weight:800;font-size: 12px; }

.float-social{ position: fixed; right: 14px; bottom: 94px; z-index: 1040; display:flex; flex-direction: column; gap: 10px; }
.fs-btn{ width:44px;height:44px;border-radius: 14px;display:grid;place-items:center;color:#fff;text-decoration:none;box-shadow: 0 14px 30px rgba(17,24,39,.18); }
.fs-btn.ig{ background: linear-gradient(45deg,#f58529,#dd2a7b,#8134af); }
.fs-btn.fb{ background: #1877f2; }
.fs-btn.yt{ background: #ff0000; }
.fs-btn.wa{ background: #25d366; }

.site-bottom-nav, .admin-bottom-nav{
  position: fixed; left: 0; right:0; bottom:0; height: 58px;
  background: rgba(255,255,255,.92); backdrop-filter: blur(10px);
  border-top: 1px solid rgba(17,24,39,.08); display:flex; z-index: 1030;
}
.site-bottom-nav a, .admin-bottom-nav a{
  flex:1; display:flex; flex-direction: column; justify-content:center; align-items:center;
  gap:4px; text-decoration:none; color:#111; font-weight:700; font-size: 12px;
}
.site-bottom-nav a i, .admin-bottom-nav a i{ font-size: 18px; }
.site-bottom-nav a:hover, .admin-bottom-nav a:hover{ color: var(--primary); }

.site-footer{ background: #0b0b12; color: #e5e7eb; border-top-left-radius: 26px; border-top-right-radius: 26px; }
.footlink{ color:#e5e7eb; text-decoration:none; opacity:.9; }
.footlink:hover{ opacity:1; color: #fff; }

.admin-main{ min-height: calc(100vh - 60px); }
.admin-sidenav{ width: 260px; position: sticky; top: 60px; height: calc(100vh - 60px); }
.admin-sidenav .nav-link{ color:#111827; font-weight: 700; border-radius: 14px; padding: 10px 12px; margin-bottom: 6px; }
.admin-sidenav .nav-link:hover{ background: rgba(37,99,235,.10); color: #1d4ed8; }
.kpi{
  padding: 16px;border-radius: 18px;
  background: radial-gradient(120% 100% at 10% 0%, rgba(255,74,162,.20), transparent 65%),
              radial-gradient(120% 100% at 90% 0%, rgba(108,92,231,.20), transparent 60%), #fff;
  border: 1px solid rgba(17,24,39,.06); box-shadow: 0 14px 35px rgba(17,24,39,.06);
}
.kpi .num{ font-size: 26px; font-weight: 900; }
.table thead th{ font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color:#6b7280; }

/* AI Bot */
.ai-fab{
  position:fixed; right:16px; bottom:164px; z-index:1050;
  width:52px; height:52px; border-radius:18px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  color:#fff; display:grid; place-items:center;
  box-shadow:0 16px 35px rgba(0,0,0,.22);
  cursor:pointer;
}
.ai-bot{
  position:fixed; right:16px; bottom:228px; z-index:1050;
  width: 300px; max-width: calc(100vw - 32px);
  background:#fff; border-radius:18px; overflow:hidden;
  box-shadow:0 18px 45px rgba(17,24,39,.18);
  border:1px solid rgba(17,24,39,.08);
}
.ai-head{
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  color:#fff; padding:10px 12px; font-weight:800;
  display:flex; align-items:center; justify-content:space-between;
}
.ai-x{ background:transparent; border:0; color:#fff; font-size:22px; line-height:1; }
.ai-body{ padding:10px 12px; font-size: 13px; max-height: 220px; overflow:auto; background:#fff; }
.ai-actions{ padding: 8px 10px; display:flex; flex-wrap:wrap; gap:6px; background:#fafafa; border-top:1px solid rgba(17,24,39,.06); }
.ai-actions button{
  border:1px solid rgba(17,24,39,.10); background:#fff;
  border-radius: 999px; padding:6px 10px; font-weight:700; font-size: 12px;
}
.ai-input{ display:flex; gap:8px; padding:10px; background:#fff; border-top:1px solid rgba(17,24,39,.06); }
.ai-input input{ flex:1; border:1px solid rgba(17,24,39,.12); border-radius: 999px; padding:8px 12px; font-size: 13px; }
.ai-input button{ border:0; border-radius: 999px; padding:8px 12px; font-weight:800; background:#111; color:#fff; }
.ai-line{ margin-top:8px; }
.ai-links{ margin-top:10px; display:flex; gap:10px; flex-wrap:wrap; }
.ai-link{ text-decoration:none; background:#111; color:#fff; padding:7px 10px; border-radius:999px; font-size:12px; font-weight:800; }

/* --- Sidebar submenu (compact) --- */
.admin-sidebar{overflow:auto}
.admin-sidebar .sidebar-group{margin:10px 10px 0}
.admin-sidebar .sidebar-toggle{
  width:100%;
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.55rem .75rem;
  border-radius:14px;
  background:rgba(255,255,255,.10);
  color:#fff;
  font-weight:800;
  border:1px solid rgba(255,255,255,.12);
}
.admin-sidebar .sidebar-toggle .fa-chevron-down{font-size:.85rem; opacity:.85}
.admin-sidebar .collapse .nav-link{margin:6px 0 0; padding:.5rem .75rem; border-radius:12px}

/* Service picker rows */
.service-pick{display:flex; flex-direction:column; gap:10px; max-height:340px; overflow:auto; padding-right:4px}
.svc-row{display:flex; gap:10px; align-items:center; border:1px solid rgba(0,0,0,.06); background:rgba(255,255,255,.7); border-radius:16px; padding:10px}
.svc-info{flex:1}
.svc-price{width:110px}

/* Floating social left-middle */
.float-social-left{
  position:fixed;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:9999;
}
.float-social-left a{
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  border-radius:14px;
  background:rgba(37,99,235,.12);
  border:1px solid rgba(37,99,235,.25);
  color:#2563eb;
  backdrop-filter: blur(8px);
  box-shadow:0 12px 30px rgba(0,0,0,.10);
}
@media (max-width: 768px){
  .float-social-left{left:10px}
  .float-social-left a{width:40px;height:40px;border-radius:12px}
}
/* Ensure chatbot bottom-right */
.chatbot-fab{right:16px !important; bottom:16px !important;}