/* Universal Navigation Dock & Floating Action Buttons Styles */
#universalDock {
  z-index: 50 !important;
  bottom: 1.25rem !important;
  padding: 0.35rem 0.5rem !important;
  gap: 0.25rem !important;
  border-radius: 1rem !important;
}

#universalDock button,
#universalDock a {
  width: 2.25rem !important;
  height: 2.25rem !important;
  border-radius: 0.65rem !important;
}

#universalDock .material-symbols-outlined {
  font-size: 18px !important;
}

.dock-divider {
  width: 1px;
  height: 1.25rem;
  background-color: var(--outline-variant);
  opacity: 0.5;
  margin: 0 0.2rem;
}

/* Floating Action Pop-up Buttons (Call & WhatsApp) - Mobile View (+15% Increase) */
a[title*="Call"],
a[title*="WhatsApp"],
a[href^="tel:"],
a[href*="wa.me"] {
  width: 2.6rem !important;
  height: 2.6rem !important;
  bottom: 1.25rem !important;
  border-radius: 0.75rem !important;
}

a[href^="tel:"],
a[title*="Call"] {
  left: 1.25rem !important;
}

a[href*="wa.me"],
a[title*="WhatsApp"] {
  right: 1.25rem !important;
}

a[title*="Call"] .material-symbols-outlined,
a[title*="WhatsApp"] .material-symbols-outlined,
a[href^="tel:"] .material-symbols-outlined,
a[href*="wa.me"] .material-symbols-outlined {
  font-size: 21px !important;
}

a[href*="wa.me"] svg,
a[title*="WhatsApp"] svg {
  width: 21px !important;
  height: 21px !important;
  fill: currentColor;
}

/* Desktop View Sizing (+20% Increase) */
@media (min-width: 768px) {
  #universalDock {
    bottom: 1.5rem !important;
    padding: 0.42rem 0.6rem !important;
    gap: 0.3rem !important;
    border-radius: 1.2rem !important;
  }

  #universalDock button,
  #universalDock a {
    width: 2.7rem !important;
    height: 2.7rem !important;
    border-radius: 0.78rem !important;
  }

  #universalDock .material-symbols-outlined {
    font-size: 22px !important;
  }

  .dock-divider {
    height: 1.5rem !important;
  }

  a[title*="Call"],
  a[title*="WhatsApp"],
  a[href^="tel:"],
  a[href*="wa.me"] {
    width: 2.7rem !important;
    height: 2.7rem !important;
    bottom: 1.5rem !important;
    border-radius: 0.78rem !important;
  }

  a[href^="tel:"],
  a[title*="Call"] {
    left: 1.5rem !important;
  }

  a[href*="wa.me"],
  a[title*="WhatsApp"] {
    right: 1.5rem !important;
  }

  a[title*="Call"] .material-symbols-outlined,
  a[title*="WhatsApp"] .material-symbols-outlined,
  a[href^="tel:"] .material-symbols-outlined,
  a[href*="wa.me"] .material-symbols-outlined {
    font-size: 22px !important;
  }

  a[href*="wa.me"] svg,
  a[title*="WhatsApp"] svg {
    width: 22px !important;
    height: 22px !important;
  }
}