/* ============================================================
   SKYLAB SEO - MOBILE UI UPGRADE
   - Animated Hamburger
   - Bottom Sheet Mobile Menu
   - 3-Button Mobile Bottom Bar
   - Desktop Services Dropdown Arrow Fix
   ============================================================ */

/* ---------- DESKTOP: Services dropdown arrow (SVG) ---------- */
.has-dropdown > a{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
}
.has-dropdown > a::after{display:none !important}
.has-dropdown > a .dd-arrow{
  width:12px;height:12px;
  opacity:.85;
  color:var(--accent-2);
  transition:transform .3s ease, opacity .3s ease;
  flex-shrink:0;
}
.has-dropdown:hover > a .dd-arrow,
.has-dropdown:focus-within > a .dd-arrow{
  transform:rotate(180deg);
  opacity:1;
}

/* ---------- HAMBURGER TOGGLE (animated 3-line) ---------- */
.nav-toggle{
  background:rgba(255,255,255,.04) !important;
  border:1px solid var(--border-strong) !important;
  width:44px !important;
  height:44px !important;
  border-radius:12px !important;
  padding:0 !important;
  cursor:pointer !important;
  transition:all .25s !important;
  font-size:0 !important;
}
@media(max-width:900px){
  .nav-toggle{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
}
.nav-toggle:hover{
  background:rgba(16,185,129,.1) !important;
  border-color:var(--accent) !important;
}
.nav-toggle .hamburger{
  width:20px;
  height:14px;
  position:relative;
  display:inline-block;
  pointer-events:none;
}
.nav-toggle .hamburger span{
  position:absolute;
  left:0;
  width:100%;
  height:2px;
  background:#fff;
  border-radius:2px;
  transition:all .3s cubic-bezier(.4,0,.2,1);
  display:block;
}
.nav-toggle .hamburger span:nth-child(1){top:0}
.nav-toggle .hamburger span:nth-child(2){top:6px}
.nav-toggle .hamburger span:nth-child(3){top:12px}
.nav-toggle.active .hamburger span:nth-child(1){
  top:6px;
  transform:rotate(45deg);
  background:var(--accent-2);
}
.nav-toggle.active .hamburger span:nth-child(2){
  opacity:0;
  transform:translateX(-10px);
}
.nav-toggle.active .hamburger span:nth-child(3){
  top:6px;
  transform:rotate(-45deg);
  background:var(--accent-2);
}

/* ---------- MOBILE MENU BACKDROP ---------- */
.mobile-menu-backdrop{
  position:fixed;
  inset:0;
  background:rgba(7,11,20,.75);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  z-index:150;
  opacity:0;
  visibility:hidden;
  transition:opacity .35s ease, visibility .35s ease;
}
.mobile-menu-backdrop.open{
  opacity:1;
  visibility:visible;
}

/* ---------- MOBILE MENU - BOTTOM SHEET ---------- */
.mobile-menu{
  position:fixed !important;
  top:auto !important;
  right:0 !important;
  left:0 !important;
  bottom:0 !important;
  width:100% !important;
  max-width:none !important;
  max-height:88vh !important;
  background:linear-gradient(180deg,#0F1729 0%,#070B14 100%) !important;
  z-index:160 !important;
  transform:translateY(100%) !important;
  transition:transform .45s cubic-bezier(.32,.72,0,1) !important;
  border-left:none !important;
  border-top:1px solid var(--border-strong) !important;
  border-top-left-radius:24px !important;
  border-top-right-radius:24px !important;
  box-shadow:0 -20px 60px -10px rgba(0,0,0,.7), 0 -2px 0 rgba(16,185,129,.15) !important;
  padding-bottom:max(24px,env(safe-area-inset-bottom)) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch !important;
}
.mobile-menu.open{
  transform:translateY(0) !important;
}

/* drag handle on top */
.mm-handle{
  width:44px;
  height:5px;
  border-radius:99px;
  background:rgba(255,255,255,.18);
  margin:10px auto 0;
}

/* mobile menu header */
.mm-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 22px 14px;
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  z-index:2;
  background:linear-gradient(180deg,#0F1729 80%,rgba(15,23,41,0));
}
.mm-logo{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:800;
  font-size:1.25rem;
  color:#fff;
  letter-spacing:-.3px;
}
.mm-logo span{
  background:var(--gradient-brand);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
.mm-close{
  width:40px;
  height:40px;
  border-radius:12px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--border);
  color:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all .25s;
  padding:0;
  font-size:0;
}
.mm-close svg{
  width:18px;
  height:18px;
}
.mm-close:hover,
.mm-close:active{
  background:rgba(239,68,68,.15);
  border-color:rgba(239,68,68,.4);
  color:#F87171;
  transform:rotate(90deg);
}

/* navigation list */
.mm-links{
  padding:14px 16px 6px;
  display:flex;
  flex-direction:column;
  gap:4px;
}

/* each nav item - CRITICAL FIX for icon size */
.mm-link{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  padding:14px !important;
  border-radius:14px !important;
  color:var(--text) !important;
  font-weight:500 !important;
  font-size:1rem !important;
  border:1px solid transparent !important;
  background:transparent !important;
  font-family:inherit !important;
  width:100% !important;
  text-align:left !important;
  cursor:pointer !important;
  transition:all .25s ease !important;
  text-decoration:none !important;
  line-height:1 !important;
}

/* icon wrapper - FIXED SIZE */
.mm-link .mm-icon{
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  max-width:38px !important;
  flex:0 0 38px !important;
  border-radius:10px !important;
  background:rgba(16,185,129,.08) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:var(--accent-2) !important;
  transition:all .3s !important;
}
.mm-link .mm-icon svg{
  width:20px !important;
  height:20px !important;
  display:block !important;
  flex-shrink:0 !important;
}

/* text label */
.mm-link .mm-text{
  flex:1 !important;
  font-size:1rem !important;
  color:inherit !important;
}

/* chevron for services accordion */
.mm-link .mm-chev{
  width:20px !important;
  height:20px !important;
  min-width:20px !important;
  flex:0 0 20px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:var(--text-dim) !important;
  transition:transform .35s cubic-bezier(.4,0,.2,1), color .25s !important;
}
.mm-link .mm-chev svg{
  width:14px !important;
  height:14px !important;
  display:block !important;
}

/* hover/active states */
.mm-link:hover,
.mm-link:active,
.mm-link:focus-visible{
  background:linear-gradient(135deg,rgba(16,185,129,.10),rgba(59,130,246,.06)) !important;
  border-color:rgba(16,185,129,.2) !important;
  color:#fff !important;
}
.mm-link:hover .mm-icon,
.mm-link:active .mm-icon{
  background:rgba(16,185,129,.18) !important;
  transform:scale(1.05) !important;
}

/* services accordion open state */
.mm-link.has-sub.open{
  background:linear-gradient(135deg,rgba(16,185,129,.12),rgba(59,130,246,.08)) !important;
  border-color:rgba(16,185,129,.25) !important;
}
.mm-link.has-sub.open .mm-chev{
  transform:rotate(180deg) !important;
  color:var(--accent-2) !important;
}

/* sub-menu (services list) */
.mm-sub{
  max-height:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:0 14px;
  margin:0 14px;
  border-left:2px solid transparent;
  transition:max-height .4s ease, padding .3s, margin .3s, border-color .3s, background .3s;
}
.mm-sub.open{
  max-height:600px;
  padding:6px 14px 10px;
  margin:0 14px 4px;
  border-left-color:rgba(16,185,129,.3);
  background:linear-gradient(90deg,rgba(16,185,129,.04),transparent);
  border-radius:0 10px 10px 0;
}
.mm-sub a{
  display:flex;
  align-items:center;
  gap:8px;
  padding:11px 12px;
  font-size:.92rem;
  color:var(--text-dim);
  border-radius:8px;
  border-left:none;
  transition:all .2s;
  text-decoration:none;
}
.mm-sub a::before{
  content:"→";
  color:var(--accent-2);
  opacity:0;
  transform:translateX(-6px);
  transition:all .25s;
  font-weight:700;
  display:inline-block;
}
.mm-sub a:hover,
.mm-sub a:active{
  color:#fff;
  background:rgba(16,185,129,.08);
}
.mm-sub a:hover::before,
.mm-sub a:active::before{
  opacity:1;
  transform:translateX(0);
}

/* CTA buttons (WhatsApp + Call) */
.mm-cta{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:10px !important;
  padding:18px 22px 8px !important;
  border-top:1px solid var(--border) !important;
  margin-top:14px !important;
}
.mm-cta-btn{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  padding:14px !important;
  border-radius:12px !important;
  font-weight:700 !important;
  color:#fff !important;
  font-size:.95rem !important;
  text-decoration:none !important;
  transition:transform .2s, box-shadow .2s !important;
}
.mm-cta-btn svg{
  width:18px !important;
  height:18px !important;
  flex-shrink:0;
}
.mm-cta-btn:active{transform:scale(.97) !important}
.mm-cta-btn.wa{
  background:#25D366 !important;
  box-shadow:0 8px 20px -6px rgba(37,211,102,.5) !important;
}
.mm-cta-btn.call{
  background:var(--gradient-brand) !important;
  box-shadow:0 8px 20px -6px rgba(16,185,129,.5) !important;
}

/* mini info at bottom */
.mm-mini{
  text-align:center;
  padding:16px 22px 8px;
  font-size:.85rem;
  color:var(--text-dim);
  line-height:1.7;
  border-top:1px solid var(--border);
  margin-top:8px;
}
.mm-mini strong{
  color:#fff;
  display:block;
  margin-bottom:4px;
  font-size:.95rem;
}

/* body scroll lock */
body.menu-open{
  overflow:hidden !important;
  touch-action:none !important;
}

/* ---------- MOBILE BOTTOM BAR (3 buttons) ---------- */
.mobile-bottom-bar{
  background:linear-gradient(180deg,rgba(15,23,41,.85) 0%,rgba(7,11,20,.98) 100%) !important;
  backdrop-filter:blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter:blur(20px) saturate(180%) !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
  box-shadow:0 -10px 40px rgba(0,0,0,.5), 0 -1px 0 rgba(16,185,129,.15) !important;
  padding:8px 6px !important;
  padding-bottom:max(8px,env(safe-area-inset-bottom)) !important;
  gap:4px !important;
}
.mbb-item{
  position:relative;
  padding:10px 6px;
  border-radius:14px;
  overflow:hidden;
  gap:5px;
  transition:all .28s cubic-bezier(.4,0,.2,1);
  -webkit-tap-highlight-color:transparent;
}
.mbb-item::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:0;
  height:0;
  border-radius:50%;
  background:rgba(255,255,255,.25);
  transform:translate(-50%,-50%);
  transition:width .5s ease, height .5s ease, opacity .5s ease;
  opacity:0;
  pointer-events:none;
  z-index:1;
}
.mbb-item:active::after{
  width:140%;
  height:140%;
  opacity:1;
  transition:0s;
}
.mbb-item:active{transform:scale(.94)}
.mbb-icon{
  width:42px;
  height:42px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  z-index:2;
  transition:transform .3s ease, box-shadow .3s ease;
}
.mbb-icon svg{
  width:22px;
  height:22px;
}
.mbb-label{
  position:relative;
  z-index:2;
  letter-spacing:.2px;
  transition:color .25s;
  color:#cbd5e1;
  font-size:11px;
  font-weight:600;
}

/* Call button */
.mbb-call .mbb-icon{
  background:linear-gradient(135deg,#3B82F6,#10B981);
  box-shadow:0 4px 14px rgba(59,130,246,.4);
  color:#fff;
}
.mbb-call:hover .mbb-icon,
.mbb-call:active .mbb-icon{
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 8px 20px rgba(59,130,246,.55);
}
.mbb-call:hover .mbb-label{color:#60A5FA}

/* WhatsApp button with pulse */
.mbb-whatsapp .mbb-icon{
  background:#25D366 !important;
  box-shadow:0 4px 14px rgba(37,211,102,.45);
  color:#fff !important;
  animation:mbbWaPulse 2.4s ease-in-out infinite;
}
.mbb-whatsapp .mbb-icon svg{color:#fff !important}
.mbb-whatsapp .mbb-icon::before{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:14px;
  border:2px solid rgba(37,211,102,.5);
  animation:mbbWaRing 2s ease-out infinite;
  pointer-events:none;
}
.mbb-whatsapp:hover .mbb-icon,
.mbb-whatsapp:active .mbb-icon{
  transform:translateY(-3px) scale(1.05);
}
.mbb-whatsapp:hover .mbb-label{color:#25D366}
@keyframes mbbWaPulse{
  0%,100%{box-shadow:0 4px 14px rgba(37,211,102,.45)}
  50%{box-shadow:0 6px 22px rgba(37,211,102,.7)}
}
@keyframes mbbWaRing{
  0%{transform:scale(1);opacity:.7}
  100%{transform:scale(1.35);opacity:0}
}

/* Quote button */
.mbb-quote .mbb-icon{
  background:linear-gradient(135deg,#F59E0B,#EF4444);
  box-shadow:0 4px 14px rgba(245,158,11,.45);
  color:#fff;
}
.mbb-quote:hover .mbb-icon,
.mbb-quote:active .mbb-icon{
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 8px 20px rgba(239,68,68,.55);
}
.mbb-quote:hover .mbb-label{color:#FBBF24}

/* Mobile-only spacing fix */
@media(max-width:768px){
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom)) !important}
  .back-to-top{
    right:14px !important;
    bottom:calc(86px + env(safe-area-inset-bottom)) !important;
    width:44px !important;
    height:44px !important;
  }
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  .mbb-whatsapp .mbb-icon,
  .mbb-whatsapp .mbb-icon::before{animation:none !important}
  .mbb-item,
  .mbb-icon,
  .mm-link{transition:none !important}
}