/* Custom Styles & Component Enhancements */
/* Materiales y Aceros Nopalucan */

:root {
  --primary-color: #031632;
  --primary-container: #1a2b48;
  --secondary-color: #9d4300;
  --secondary-container: #fd761a;
  --surface-bg: #f7f9fd;
  --on-surface: #191c1f;
  --outline-color: #c5c6ce;
}

/* Base Adjustments */
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
  color: var(--on-surface);
  background-color: var(--surface-bg);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif;
}

/* Material Symbols Styling */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}
.material-symbols-outlined[data-weight="fill"] {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Custom Shadows & Ambient Depth */
.industrial-shadow {
  box-shadow: 0px 4px 12px rgba(26, 43, 72, 0.05);
}

.industrial-shadow-hover {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.industrial-shadow-hover:hover {
  box-shadow: 0px 12px 28px rgba(26, 43, 72, 0.15);
  transform: translateY(-2px);
}

/* Floating WhatsApp Button Pulse Animation */
@keyframes pulse-subtle {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6);
  }
  70% {
    box-shadow: 0 0 0 14px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999;
  background-color: #25d366;
  color: #ffffff;
  border-radius: 9999px;
  padding: 12px 20px;
  display: flex;
  items-center: center;
  gap: 10px;
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.2);
  animation: pulse-subtle 2.5s infinite;
  transition: transform 0.2s ease, background-color 0.2s ease;
  text-decoration: none;
}

.whatsapp-float:hover {
  background-color: #20ba5a;
  transform: scale(1.05);
  color: #ffffff;
}

/* Custom Range Input Styling */
input[type="range"]::-webkit-slider-thumb {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #fd761a;
  cursor: pointer;
  -webkit-appearance: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

input[type="range"]::-moz-range-thumb {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #fd761a;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  border: none;
}

/* Mobile Navigation Menu Animation */
#mobile-menu {
  transition: all 0.3s ease-in-out;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
}

#mobile-menu.active {
  max-height: 400px;
  opacity: 1;
}

/* Form Toast Notification */
.toast-notification {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background-color: #031632;
  color: #ffffff;
  padding: 14px 28px;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  z-index: 1000;
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
  display: flex;
  align-items: center;
  gap: 10px;
}

.toast-notification.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}