/* ==========================================================================
   MX AGENCIA PORTUARIA, S. DE R.L. DE C.V. - Modern Corporate Stylesheet
   ========================================================================== */

:root {
  --primary-navy: #081B33;
  --navy-deep: #051224;
  --ocean-blue: #0A4384;
  --azure: #0E7490;
  --accent-red: #D92525;
  --accent-red-hover: #B71C1C;
  --gold-accent: #EAB308;
  --slate-50: #F8FAFC;
  --slate-100: #F1F5F9;
  --slate-200: #E2E8F0;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1E293B;
  --slate-900: #0F172A;
  
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Montserrat', var(--font-sans);
}

html {
  scroll-behavior: smooth;
  font-family: var(--font-sans);
}

body {
  color: var(--slate-800);
  background-color: #FFFFFF;
  overflow-x: hidden;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--slate-100);
}
::-webkit-scrollbar-thumb {
  background: var(--ocean-blue);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--primary-navy);
}

/* Header & Glassmorphism */
.glass-header {
  background: rgba(8, 27, 51, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Hero Section */
.hero-gradient-overlay {
  background: linear-gradient(
    135deg,
    rgba(5, 18, 36, 0.92) 0%,
    rgba(8, 27, 51, 0.85) 50%,
    rgba(10, 67, 132, 0.75) 100%
  );
}

/* Radar pulse animation for ports & status */
@keyframes radar-pulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(217, 37, 37, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 14px rgba(217, 37, 37, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(217, 37, 37, 0);
  }
}

.radar-dot {
  animation: radar-pulse 2s infinite cubic-bezier(0.45, 0, 0.55, 1);
}

@keyframes green-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

.green-pulse-dot {
  animation: green-pulse 2s infinite cubic-bezier(0.45, 0, 0.55, 1);
}

/* Map Container Styling */
#maritime-map {
  width: 100%;
  height: 580px;
  border-radius: 1rem;
  z-index: 10;
}

.leaflet-popup-content-wrapper {
  background: var(--primary-navy) !important;
  color: #FFFFFF !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.leaflet-popup-tip {
  background: var(--primary-navy) !important;
}

/* Service Card Hover Effects */
.service-card {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid var(--slate-200);
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 25px -5px rgba(8, 27, 51, 0.12), 0 8px 10px -6px rgba(8, 27, 51, 0.08);
  border-color: rgba(10, 67, 132, 0.3);
}

/* Custom Tabs */
.service-tab-btn {
  transition: all 0.25s ease-in-out;
}

.service-tab-btn.active {
  background-color: var(--primary-navy);
  color: #FFFFFF;
  border-color: var(--primary-navy);
  box-shadow: 0 4px 6px -1px rgba(8, 27, 51, 0.2);
}

/* Floating WhatsApp Button */
.floating-whatsapp {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.floating-whatsapp:hover {
  transform: scale(1.08);
}

/* Quote Calculator Card */
.quote-box {
  background: linear-gradient(145deg, #FFFFFF 0%, #F8FAFC 100%);
  border: 1px solid #E2E8F0;
  box-shadow: 0 25px 50px -12px rgba(8, 27, 51, 0.15);
}

/* Modal Backdrop */
.modal-backdrop {
  background: rgba(5, 18, 36, 0.85);
  backdrop-filter: blur(8px);
}

/* Badge styles */
.badge-navy {
  background: rgba(10, 67, 132, 0.1);
  color: var(--ocean-blue);
  border: 1px solid rgba(10, 67, 132, 0.2);
}

.badge-red {
  background: rgba(217, 37, 37, 0.1);
  color: var(--accent-red);
  border: 1px solid rgba(217, 37, 37, 0.2);
}