html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  width: 100%;
  overflow-x: hidden;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Definition of the design system. All colors, gradients, fonts, etc should be defined here. 
All colors MUST be HSL.
*/

@layer base {
  :root {
    --background: 240 6% 97%;
    --foreground: 183 100% 25%;

    --card: 0 0% 100%;
    --card-foreground: 183 100% 25%;

    --popover: 0 0% 100%;
    --popover-foreground: 183 100% 25%;

    --primary: 183 100% 36%;
    --primary-foreground: 240 6% 97%;

    --secondary: 183 100% 85%;
    --secondary-foreground: 183 100% 30%;

    --muted: 183 100% 90%;
    --muted-foreground: 183 100% 45%;

    --accent: 183 100% 85%;
    --accent-foreground: 183 100% 30%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 183 100% 85%;
    --input: 183 100% 85%;
    --ring: 183 100% 36%;

    --radius: 0.5rem;

    --sidebar-background: 240 6% 96%;
    --sidebar-foreground: 183 100% 25%;
    --sidebar-primary: 183 100% 36%;
    --sidebar-primary-foreground: 240 6% 97%;
    --sidebar-accent: 183 100% 90%;
    --sidebar-accent-foreground: 183 100% 30%;
    --sidebar-border: 183 100% 85%;
    --sidebar-ring: 183 100% 36%;

    /* Teal color palette - based on #00B0B9 */
    --teal-900: 183 100% 20%;
    --teal-800: 183 100% 25%;
    --teal-700: 183 100% 30%;
    --teal-600: 183 100% 33%;
    --teal-500: 183 100% 36%;
    --teal-400: 183 100% 45%;
    --teal-300: 183 100% 55%;
    --teal-200: 183 100% 70%;
    --teal-100: 183 100% 85%;
    --teal-50: 183 100% 95%;

    /* Custom color palette based on your image */
    --gray-900: 183 100% 20%;
    --gray-800: 183 100% 25%;
    --gray-700: 183 100% 30%;
    --gray-600: 183 100% 33%;
    --gray-500: 183 100% 36%;
    --gray-400: 183 100% 45%;
    --gray-300: 183 100% 55%;
    --gray-200: 183 100% 70%;
    --gray-100: 183 100% 85%;
    --gray-50: 183 100% 95%;
  }

  /* Aisensy WhatsApp Widget Customization */
  .aisensy-wa-widget {
    --aisensy-primary-color: hsl(183 100% 36%) !important;
    --aisensy-secondary-color: hsl(183 100% 25%) !important;
  }

  /* Custom styling for the widget button to use our logo */
  .aisensy-wa-widget .wa-widget-button {
    background-image: url('/logo.png') !important;
    background-size: 80% !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    background-color: white !important;
  }

  /* Also style the chat header/profile image to use our logo */
  .aisensy-wa-widget .wa-widget-header img,
  .aisensy-wa-widget .wa-widget-profile img,
  .aisensy-wa-widget .wa-widget-avatar img {
    content: url('/logo.png') !important;
    border-radius: 50% !important;
    object-fit: contain !important;
  }

  /* Hide the default WhatsApp icon and show our logo instead */
  .aisensy-wa-widget .wa-widget-button svg,
  .aisensy-wa-widget .wa-widget-button img {
    display: none !important;
  }

  .dark {
    --background: 180 25% 10%;
    --foreground: 180 15% 90%;

    --card: 180 25% 10%;
    --card-foreground: 180 15% 90%;

    --popover: 180 25% 10%;
    --popover-foreground: 180 15% 90%;

    --primary: 180 15% 90%;
    --primary-foreground: 180 25% 10%;

    --secondary: 180 20% 20%;
    --secondary-foreground: 180 15% 90%;

    --muted: 180 20% 20%;
    --muted-foreground: 180 10% 60%;

    --accent: 180 20% 20%;
    --accent-foreground: 180 15% 90%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

    --border: 180 20% 20%;
    --input: 180 20% 20%;
    --ring: 180 15% 90%;
    
    --sidebar-background: 180 25% 10%;
    --sidebar-foreground: 180 15% 90%;
    --sidebar-primary: 180 15% 90%;
    --sidebar-primary-foreground: 180 25% 10%;
    --sidebar-accent: 180 20% 20%;
    --sidebar-accent-foreground: 180 15% 90%;
    --sidebar-border: 180 20% 20%;
    --sidebar-ring: 180 15% 90%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
  }
}

/* Custom utilities for the new color palette */
@layer utilities {
  /* Teal color utilities */
  .bg-teal-900 { background-color: hsl(var(--teal-900)); }
  .bg-teal-800 { background-color: hsl(var(--teal-800)); }
  .bg-teal-700 { background-color: hsl(var(--teal-700)); }
  .bg-teal-600 { background-color: hsl(var(--teal-600)); }
  .bg-teal-500 { background-color: hsl(var(--teal-500)); }
  .bg-teal-400 { background-color: hsl(var(--teal-400)); }
  .bg-teal-300 { background-color: hsl(var(--teal-300)); }
  .bg-teal-200 { background-color: hsl(var(--teal-200)); }
  .bg-teal-100 { background-color: hsl(var(--teal-100)); }
  .bg-teal-50 { background-color: hsl(var(--teal-50)); }

  .text-teal-900 { color: hsl(var(--teal-900)); }
  .text-teal-800 { color: hsl(var(--teal-800)); }
  .text-teal-700 { color: hsl(var(--teal-700)); }
  .text-teal-600 { color: hsl(var(--teal-600)); }
  .text-teal-500 { color: hsl(var(--teal-500)); }
  .text-teal-400 { color: hsl(var(--teal-400)); }
  .text-teal-300 { color: hsl(var(--teal-300)); }
  .text-teal-200 { color: hsl(var(--teal-200)); }
  .text-teal-100 { color: hsl(var(--teal-100)); }
  .text-teal-50 { color: hsl(var(--teal-50)); }

  .border-teal-900 { border-color: hsl(var(--teal-900)); }
  .border-teal-800 { border-color: hsl(var(--teal-800)); }
  .border-teal-700 { border-color: hsl(var(--teal-700)); }
  .border-teal-600 { border-color: hsl(var(--teal-600)); }
  .border-teal-500 { border-color: hsl(var(--teal-500)); }
  .border-teal-400 { border-color: hsl(var(--teal-400)); }
  .border-teal-300 { border-color: hsl(var(--teal-300)); }
  .border-teal-200 { border-color: hsl(var(--teal-200)); }
  .border-teal-100 { border-color: hsl(var(--teal-100)); }
  .border-teal-50 { border-color: hsl(var(--teal-50)); }

  /* Custom gray utilities (now using teal-tinted grays) */
  .bg-custom-gray-900 { background-color: hsl(var(--gray-900)); }
  .bg-custom-gray-800 { background-color: hsl(var(--gray-800)); }
  .bg-custom-gray-700 { background-color: hsl(var(--gray-700)); }
  .bg-custom-gray-600 { background-color: hsl(var(--gray-600)); }
  .bg-custom-gray-500 { background-color: hsl(var(--gray-500)); }
  .bg-custom-gray-400 { background-color: hsl(var(--gray-400)); }
  .bg-custom-gray-300 { background-color: hsl(var(--gray-300)); }
  .bg-custom-gray-200 { background-color: hsl(var(--gray-200)); }
  .bg-custom-gray-100 { background-color: hsl(var(--gray-100)); }
  .bg-custom-gray-50 { background-color: hsl(var(--gray-50)); }

  .text-custom-gray-900 { color: hsl(var(--gray-900)); }
  .text-custom-gray-800 { color: hsl(var(--gray-800)); }
  .text-custom-gray-700 { color: hsl(var(--gray-700)); }
  .text-custom-gray-600 { color: hsl(var(--gray-600)); }
  .text-custom-gray-500 { color: hsl(var(--gray-500)); }
  .text-custom-gray-400 { color: hsl(var(--gray-400)); }
  .text-custom-gray-300 { color: hsl(var(--gray-300)); }
  .text-custom-gray-200 { color: hsl(var(--gray-200)); }
  .text-custom-gray-100 { color: hsl(var(--gray-100)); }
  .text-custom-gray-50 { color: hsl(var(--gray-50)); }

  .border-custom-gray-300 { border-color: hsl(var(--gray-300)); }
  .border-custom-gray-400 { border-color: hsl(var(--gray-400)); }
  .border-custom-gray-500 { border-color: hsl(var(--gray-500)); }
}

/* Strict grayscale palette utilities */
@layer utilities {
  .bg-strict-gray-900 { background-color: #2F2F2F; }
  .bg-strict-gray-700 { background-color: #515151; }
  .bg-strict-gray-500 { background-color: #737373; }
  .bg-strict-gray-300 { background-color: #959595; }
  .bg-strict-gray-100 { background-color: #B6B6B6; }

  .text-strict-gray-900 { color: #2F2F2F; }
  .text-strict-gray-700 { color: #515151; }
  .text-strict-gray-500 { color: #737373; }
  .text-strict-gray-300 { color: #959595; }
  .text-strict-gray-100 { color: #B6B6B6; }

  .border-strict-gray-900 { border-color: #2F2F2F; }
  .border-strict-gray-700 { border-color: #515151; }
  .border-strict-gray-500 { border-color: #737373; }
  .border-strict-gray-300 { border-color: #959595; }
  .border-strict-gray-100 { border-color: #B6B6B6; }
}

/* Enhanced background patterns and gradients */
@layer utilities {
  /* Sophisticated gradient backgrounds */
  .bg-gradient-elegant {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%, #f8fafc 100%);
  }

  .bg-gradient-warm {
    background: linear-gradient(135deg, #fefefe 0%, #f8f9fa 25%, #f1f3f4 50%, #f8f9fa 75%, #fefefe 100%);
  }

  .bg-gradient-cool {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%, #f8fafc 100%);
  }

  .bg-gradient-subtle {
    background: linear-gradient(135deg, #ffffff 0%, #fafbfc 25%, #f5f7fa 50%, #fafbfc 75%, #ffffff 100%);
  }

  /* Medical-themed gradients */
  .bg-gradient-medical {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 25%, #cbd5e1 50%, #e2e8f0 75%, #f8fafc 100%);
  }

  .bg-gradient-clinic {
    background: linear-gradient(135deg, #fefefe 0%, #f8f9fa 25%, #f1f3f4 50%, #f8f9fa 75%, #fefefe 100%);
  }

  /* Subtle texture patterns */
  .bg-texture-subtle {
    background-image: 
      radial-gradient(circle at 25% 25%, rgba(0,0,0,0.02) 0%, transparent 50%),
      radial-gradient(circle at 75% 75%, rgba(0,0,0,0.02) 0%, transparent 50%);
    background-size: 100px 100px;
  }

  .bg-texture-soft {
    background-image: 
      radial-gradient(circle at 20% 20%, rgba(0,0,0,0.015) 0%, transparent 50%),
      radial-gradient(circle at 80% 80%, rgba(0,0,0,0.015) 0%, transparent 50%);
    background-size: 120px 120px;
  }

  /* Section-specific backgrounds */
  .bg-hero-section {
    background: linear-gradient(135deg, #ffffff 0%, #fafbfc 25%, #f5f7fa 50%, #fafbfc 75%, #ffffff 100%);
    position: relative;
  }

  .bg-hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
      radial-gradient(circle at 25% 25%, rgba(0,176,185,0.02) 0%, transparent 50%),
      radial-gradient(circle at 75% 75%, rgba(0,176,185,0.02) 0%, transparent 50%);
    background-size: 100px 100px;
    pointer-events: none;
  }

  .bg-why-choose {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 25%, #f1f3f4 50%, #f8f9fa 75%, #ffffff 100%);
    position: relative;
  }

  .bg-why-choose::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
      radial-gradient(circle at 20% 20%, rgba(0,176,185,0.015) 0%, transparent 50%),
      radial-gradient(circle at 80% 80%, rgba(0,176,185,0.015) 0%, transparent 50%);
    background-size: 120px 120px;
    pointer-events: none;
  }

  .bg-specializations {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%, #f8fafc 100%);
    position: relative;
  }

  .bg-specializations::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
      radial-gradient(circle at 30% 30%, rgba(0,0,0,0.01) 0%, transparent 50%),
      radial-gradient(circle at 70% 70%, rgba(0,0,0,0.01) 0%, transparent 50%);
    background-size: 150px 150px;
    pointer-events: none;
  }

  .bg-appointment {
    background: linear-gradient(135deg, #fefefe 0%, #f8f9fa 25%, #f1f3f4 50%, #f8f9fa 75%, #fefefe 100%);
    position: relative;
  }

  .bg-appointment::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
      radial-gradient(circle at 15% 15%, rgba(0,0,0,0.01) 0%, transparent 50%),
      radial-gradient(circle at 85% 85%, rgba(0,0,0,0.01) 0%, transparent 50%);
    background-size: 200px 200px;
    pointer-events: none;
  }

  /* Card backgrounds with subtle depth */
  .bg-card-elegant {
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }

  .bg-card-warm {
    background: linear-gradient(145deg, #fefefe 0%, #f8f9fa 100%);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }

  /* Interactive hover states */
  .bg-hover-elegant:hover {
    background: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%);
    transition: all 0.3s ease;
  }

  .bg-hover-warm:hover {
    background: linear-gradient(145deg, #f8f9fa 0%, #f1f3f4 100%);
    transition: all 0.3s ease;
  }
}

/* Additional animation utilities */
@layer utilities {
  .animate-float {
    animation: float 3s ease-in-out infinite;
  }

  .animate-pulse-slow {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  .animate-shimmer {
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.4),
      transparent
    );
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
  }

  .animate-slide-up {
    animation: slideUp 0.6s ease-out;
  }

  .animate-slide-down {
    animation: slideDown 0.6s ease-out;
  }

  .animate-scale-in {
    animation: scaleIn 0.5s ease-out;
  }

  .animate-rotate-slow {
    animation: rotateSlow 20s linear infinite;
  }

  .animate-bounce-gentle {
    animation: bounceGentle 2s ease-in-out infinite;
  }
}

/* Custom keyframes for animations */
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes rotateSlow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes bounceGentle {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

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

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

@layer utilities {
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
}

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  }
}

body {
  color: rgb(var(--foreground-rgb));
  background: linear-gradient(
      to bottom,
      transparent,
      rgb(var(--background-end-rgb))
    )
    rgb(var(--background-start-rgb));
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
  
  .mobile-menu-full {
    width: 100vw;
    max-width: 100vw;
    left: 0;
    right: 0;
  }
}

/* Additional Aisensy WhatsApp Widget Styling */
.aisensy-wa-widget {
  z-index: 9999 !important;
}

/* Image loading optimizations */
.hero-image {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;
  image-rendering: -webkit-crisp-edges;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
}

/* Loading skeleton animations */
@keyframes shimmer {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

.image-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200px 100%;
  animation: shimmer 1.5s infinite;
}

/* Ensure all profile images in the widget use our logo */
.aisensy-wa-widget img[src*="profile"],
.aisensy-wa-widget img[src*="avatar"],
.aisensy-wa-widget img[src*="user"],
.aisensy-wa-widget .wa-widget-header img,
.aisensy-wa-widget .wa-widget-profile img,
.aisensy-wa-widget .wa-widget-avatar img,
.aisensy-wa-widget .wa-widget-user img {
  content: url('/logo.png') !important;
  border-radius: 50% !important;
  object-fit: contain !important;
  background-color: white !important;
  padding: 2px !important;
}

/* Style the main widget button with our logo */
.aisensy-wa-widget .wa-widget-button {
  background-image: url('/logo.png') !important;
  background-size: 80% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  background-color: white !important;
  border: 2px solid #00B0B9 !important;
  width: 60px !important;
  height: 60px !important;
  transition: all 0.3s ease !important;
}

.aisensy-wa-widget .wa-widget-button:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
}

/* Ensure the widget doesn't interfere with other elements */
.aisensy-wa-widget * {
  box-sizing: border-box !important;
}

/* Mobile responsiveness for the widget */
@media (max-width: 768px) {
  .aisensy-wa-widget .wa-widget-button {
    width: 50px !important;
    height: 50px !important;
    bottom: 20px !important;
    right: 20px !important;
  }
}

/* Additional styling for chat interface profile images */
.aisensy-wa-widget .wa-widget-chat-header img,
.aisensy-wa-widget .wa-widget-chat-profile img,
.aisensy-wa-widget .wa-widget-message-avatar img,
.aisensy-wa-widget .wa-widget-sender-avatar img {
  content: url('/logo.png') !important;
  border-radius: 50% !important;
  object-fit: contain !important;
  background-color: white !important;
  padding: 2px !important;
  border: 1px solid #e5e7eb !important;
}

/* Ensure the logo appears in all possible widget image locations */
.aisensy-wa-widget img:not([src*="whatsapp"]):not([src*="close"]):not([src*="minimize"]) {
  content: url('/logo.png') !important;
  border-radius: 50% !important;
  object-fit: contain !important;
  background-color: white !important;
}