:root {
  --bs-primary: #0d6efd;
  --bs-primary-rgb: 13, 110, 253;
  --bs-body-font-family: 'Roboto', system-ui, -apple-system, sans-serif;
  --transition-base: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  --transition-smooth: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

body {
  font-family: var(--bs-body-font-family);
  color: #333;
  overflow-x: hidden; /* Prevent horizontal scroll from animations */
}

/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
}

.navbar-brand {
  letter-spacing: -0.5px;
}

/* Hero Section */
.hero-section {
  background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
}

/* Card Animations */
.card {
  transition: var(--transition-base);
  border: none; /* Modern cleaner look */
}

.hover-shadow:hover {
  transform: translateY(-8px);
  box-shadow: 0 1rem 3rem rgba(0,0,0,.15)!important;
}

/* Utility Classes */
.h-200px { height: 200px; }
.opacity-10 { opacity: 0.1; }
.opacity-25 { opacity: 0.25; }
.opacity-75 { opacity: 0.75; }
.opacity-90 { opacity: 0.9; }

/* Admin specifics */
.admin-sidebar {
  min-height: 100vh;
  background-color: #f8f9fa;
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }

/* Floating Contact Widget - Desktop Default */
.floating-widget {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 1060;
  transition: var(--transition-base);
}

.floating-form {
  position: absolute;
  right: 45px;
  top: 50%;
  transform: translateY(-50%);
  width: 320px;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  overflow: hidden;
  background-clip: padding-box;
  /* Ensure it sits nicely */
}

.floating-trigger {
  width: 45px;
  min-height: 100px;
  height: auto;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.2);
  border-right: none;
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
  background-color: var(--bs-primary);
  color: white;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px 0;
}

/* Mobile Optimization (< 992px) */
@media (max-width: 992px) {
  /* Floating Widget becomes a FAB (Floating Action Button) */
  .floating-widget {
    top: auto;
    bottom: calc(clamp(16px, 4vh, 30px) + env(safe-area-inset-bottom, 0px));
    right: clamp(12px, 4vw, 20px);
    transform: none;
  }
  
  .floating-trigger {
    width: 60px;
    height: 60px;
    min-height: auto;
    border-radius: 50%; /* Circle */
    border: none;
    padding: 0;
    box-shadow: 0 4px 15px rgba(13, 110, 253, 0.4) !important;
  }
  
  .floating-trigger span {
    display: none; /* Hide text */
  }
  
  .floating-trigger i {
    font-size: 1.75rem !important;
    margin: 0 !important;
  }

  .floating-form {
    position: fixed;
    top: auto;
    bottom: calc(clamp(84px, 14vh, 120px) + env(safe-area-inset-bottom, 0px));
    right: clamp(10px, 3vw, 16px);
    left: clamp(10px, 3vw, 16px);
    width: auto;
    max-width: 100%;
    transform: none;
    border-radius: 1rem !important;
    border: none !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2) !important;
    max-height: calc(100vh - clamp(120px, 18vh, 160px));
  }

  #floating-form .p-4 {
    max-height: calc(100vh - clamp(220px, 32vh, 320px));
    overflow: auto;
  }

  .iti__country-list {
    max-height: min(260px, 40vh);
  }

  h1.display-4 {
    font-size: 2.5rem;
  }
  
  .lead {
    font-size: 1.1rem;
  }
}

@media (max-width: 576px) {
  .floating-form {
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 18px 18px 0 0 !important;
    max-height: calc(100vh - 80px);
  }

  #floating-form .p-4 {
    max-height: calc(100vh - 180px);
  }
}