/* CLEAN MODERN MOBILE DOCK */

/* Dock container */
.services-nav-section,
.industry-dock-section,
.solutions-nav-section {
  position: fixed !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: 16px !important;
  z-index: 950 !important;
  padding: 8px !important;
  width: auto !important;
  max-width: calc(100% - 32px) !important;
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
  border-radius: 50px !important;
  overflow: visible !important;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease !important;
}

/* Ensure mobile menu and navbar are above dock */
.navbar {
  z-index: 99999 !important;
}

.mobile-menu {
  z-index: 99998 !important;
}

/* Hide dock when mobile menu is open */
body.mobile-menu-open .services-nav-section,
body.mobile-menu-open .industry-dock-section,
body.mobile-menu-open .solutions-nav-section,
body:has(.mobile-menu.open) .services-nav-section,
body:has(.mobile-menu.open) .industry-dock-section,
body:has(.mobile-menu.open) .solutions-nav-section,
.mobile-menu.open ~ .services-nav-section,
.mobile-menu.open ~ .industry-dock-section,
.mobile-menu.open ~ main .services-nav-section,
.mobile-menu.open ~ main .industry-dock-section {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateX(-50%) translateY(40px) scale(0.92) !important;
}

/* Scroll track */
.services-nav-grid,
.industry-dock-grid,
.solutions-nav-grid {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 0 !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  position: relative !important;
}

.services-nav-grid::-webkit-scrollbar,
.industry-dock-grid::-webkit-scrollbar,
.solutions-nav-grid::-webkit-scrollbar {
  display: none !important;
}

/* Individual dock button */
.services-btn,
.industry-dock-btn,
.solutions-btn {
  position: relative !important;
  flex: 0 0 auto !important;
  width: 52px !important;
  height: 52px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: none !important;
  cursor: pointer !important;
  scroll-snap-align: center !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.services-btn::before,
.industry-dock-btn::before,
.solutions-btn::before,
.services-btn::after,
.industry-dock-btn::after,
.solutions-btn::after {
  display: none !important;
}

/* Icon wrapper */
.services-btn-icon,
.industry-dock-btn-icon,
.solutions-btn-icon {
  width: 28px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  position: relative !important;
  z-index: 2 !important;
  color: #64748b !important;
  transition: color 0.2s ease !important;
  background: transparent !important;
}

.services-btn-icon svg,
.industry-dock-btn-icon svg,
.solutions-btn-icon svg {
  width: 22px !important;
  height: 22px !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2 !important;
}

.services-btn-icon i,
.industry-dock-btn-icon i,
.solutions-btn-icon i {
  font-size: 20px !important;
  line-height: 1 !important;
  color: currentColor !important;
}

/* Hover state */
.services-btn:hover,
.industry-dock-btn:hover,
.solutions-btn:hover {
  transform: scale(1.1) !important;
  background: rgba(0, 0, 0, 0.04) !important;
}

.services-btn:hover .services-btn-icon,
.industry-dock-btn:hover .industry-dock-btn-icon,
.solutions-btn:hover .solutions-btn-icon {
  color: #1e293b !important;
}

/* Active state */
.services-btn.active,
.industry-dock-btn.active,
.solutions-btn.active {
  transform: scale(1.05) !important;
  background: linear-gradient(135deg, #e8930a 0%, #d97706 100%) !important;
}

.services-btn.active .services-btn-icon,
.industry-dock-btn.active .industry-dock-btn-icon,
.solutions-btn.active .solutions-btn-icon {
  color: #ffffff !important;
}

/* Press feedback */
.services-btn:active,
.industry-dock-btn:active,
.solutions-btn:active {
  transform: scale(0.95) !important;
  transition: transform 0.08s ease !important;
}

/* Floating Dock Tooltip / Active Name Bubble */
.dock-tooltip-bubble {
  position: absolute !important;
  bottom: calc(100% + 12px) !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(8px) scale(0.92) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  background: #0b1329 !important;
  color: #ffffff !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  border: 1px solid rgba(232, 147, 10, 0.45) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35), 0 0 10px rgba(232, 147, 10, 0.25) !important;
  z-index: 1000 !important;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.25s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.dock-tooltip-bubble::after {
  content: '' !important;
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  border-width: 6px 6px 0 6px !important;
  border-style: solid !important;
  border-color: #0b1329 transparent transparent transparent !important;
}

.dock-tooltip-bubble.visible {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) translateY(0) scale(1) !important;
}

/* Tooltip */
.services-btn .sb-name,
.industry-dock-btn .industry-btn-label,
.solutions-btn .sol-btn-name {
  position: absolute !important;
  bottom: calc(100% + 12px) !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(6px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  background: #0f172a !important;
  color: #fff !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.25s ease !important;
  z-index: 100 !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25) !important;
}

.services-btn .sb-arrow,
.solutions-btn .sol-btn-tag {
  display: none !important;
}

.services-btn .sb-name::after,
.industry-dock-btn .industry-btn-label::after,
.solutions-btn .sol-btn-name::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  border-width: 5px 5px 0 5px !important;
  border-style: solid !important;
  border-color: #0f172a transparent transparent transparent !important;
}

.services-btn.show-tooltip .sb-name,
.industry-dock-btn.show-tooltip .industry-btn-label,
.solutions-btn.show-tooltip .sol-btn-name,
.services-btn:hover .sb-name,
.industry-dock-btn:hover .industry-btn-label,
.solutions-btn:hover .sol-btn-name {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) translateY(0) !important;
}

/* Entrance animation */
@keyframes dockBtnIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.services-btn,
.industry-dock-btn,
.solutions-btn {
  animation: dockBtnIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
}

.services-btn:nth-child(1),
.industry-dock-btn:nth-child(1),
.solutions-btn:nth-child(1) {
  animation-delay: 0.04s !important;
}

.services-btn:nth-child(2),
.industry-dock-btn:nth-child(2),
.solutions-btn:nth-child(2) {
  animation-delay: 0.08s !important;
}

.services-btn:nth-child(3),
.industry-dock-btn:nth-child(3),
.solutions-btn:nth-child(3) {
  animation-delay: 0.12s !important;
}

.services-btn:nth-child(4),
.industry-dock-btn:nth-child(4),
.solutions-btn:nth-child(4) {
  animation-delay: 0.16s !important;
}

.services-btn:nth-child(5),
.industry-dock-btn:nth-child(5),
.solutions-btn:nth-child(5) {
  animation-delay: 0.20s !important;
}

.services-btn:nth-child(6),
.industry-dock-btn:nth-child(6),
.solutions-btn:nth-child(6) {
  animation-delay: 0.24s !important;
}

.services-btn:nth-child(7),
.industry-dock-btn:nth-child(7),
.solutions-btn:nth-child(7) {
  animation-delay: 0.28s !important;
}

.services-btn:nth-child(8),
.industry-dock-btn:nth-child(8),
.solutions-btn:nth-child(8) {
  animation-delay: 0.32s !important;
}

.services-btn:nth-child(9),
.industry-dock-btn:nth-child(9),
.solutions-btn:nth-child(9) {
  animation-delay: 0.36s !important;
}

.services-btn:nth-child(10),
.industry-dock-btn:nth-child(10),
.solutions-btn:nth-child(10) {
  animation-delay: 0.40s !important;
}

/* Dock scroll hint button */
.dock-scroll-hint {
  position: absolute !important;
  right: -6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #e8930a 0%, #d97706 100%) !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 12px rgba(232, 147, 10, 0.45) !important;
  cursor: pointer !important;
  z-index: 10 !important;
  pointer-events: auto !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease !important;
  animation: dockHintBounce 1.4s infinite ease-in-out !important;
  padding: 0 !important;
}

.dock-scroll-hint.visible {
  opacity: 1 !important;
  visibility: visible !important;
}

.dock-scroll-hint:hover {
  transform: translateY(-50%) scale(1.1) !important;
}

.dock-scroll-hint:active {
  transform: translateY(-50%) scale(0.92) !important;
}

.dock-scroll-hint svg {
  width: 14px !important;
  height: 14px !important;
  stroke: #ffffff !important;
}

@keyframes dockHintBounce {
  0%, 100% {
    transform: translateY(-50%) translateX(0);
  }
  50% {
    transform: translateY(-50%) translateX(3px);
  }
}

@media (min-width: 901px) {
  .services-nav-section,
  .industry-dock-section,
  .solutions-nav-section {
    display: none !important;
  }
}