/* Vaidyatva Medical & Ayurvedic Doctor Profiles - Prestige Design System */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;0,700;0,800;1,600;1,700&family=Outfit:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --primary-forest: #044e39;
  --primary-forest-dark: #022c20;
  --primary-emerald: #059669;
  --primary-mint: #10b981;
  --vaidyatva-gold: #c28417;
  --vaidyatva-gold-dark: #925c0e;
  --vaidyatva-gold-light: #fef3c7;
  --surface-cream: #faf9f6;
  --slate-dark: #0f172a;
}

html {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  color: #1e293b;
  background-color: #f8fafc;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

p, span, a, code, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

.font-serif-heading {
  font-family: 'Playfair Display', Georgia, serif;
}

.font-outfit {
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
}

/* Luminous Ambient Backgrounds */
.hero-glow-bg {
  background: 
    radial-gradient(circle at 50% -20%, rgba(5, 150, 105, 0.12) 0%, transparent 60%),
    radial-gradient(circle at 90% 20%, rgba(217, 119, 6, 0.06) 0%, transparent 40%),
    radial-gradient(circle at 10% 40%, rgba(13, 148, 136, 0.08) 0%, transparent 50%),
    #ffffff;
}

.luminous-banner {
  background: 
    radial-gradient(circle at 80% 0%, rgba(5, 150, 105, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 10% 100%, rgba(217, 119, 6, 0.05) 0%, transparent 50%),
    linear-gradient(180deg, #fbfbf9 0%, #f4f6f4 100%);
}

.luminous-jewel-banner {
  background: 
    radial-gradient(circle at 80% -20%, rgba(52, 211, 153, 0.18) 0%, transparent 60%),
    radial-gradient(circle at 15% 100%, rgba(245, 158, 11, 0.10) 0%, transparent 50%),
    linear-gradient(135deg, #022c22 0%, #064e3b 60%, #032b21 100%);
}

.subtle-mesh-pattern {
  background-image: radial-gradient(rgba(148, 163, 184, 0.25) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Glassmorphism Navigation */
.glass-nav-luminous {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Premium Card Hover Effects */
.card-hover-prestige {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.card-hover-prestige:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 35px -10px rgba(4, 78, 57, 0.10), 0 8px 16px -4px rgba(0, 0, 0, 0.04);
}

.card-hover-effect {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.card-hover-effect:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 30px -8px rgba(4, 78, 57, 0.08), 0 4px 10px -2px rgba(0, 0, 0, 0.03);
}

/* Prestige Floating Island */
.floating-island {
  background: #ffffff;
  border: 1px solid rgba(6, 78, 59, 0.08);
  box-shadow: 0 12px 32px -4px rgba(6, 78, 59, 0.06), 0 4px 12px -2px rgba(0, 0, 0, 0.03);
}

/* Verified Medical Badges */
.badge-gold-verified {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #78350f;
  border: 1px solid #f59e0b40;
}

.badge-forest-verified {
  background: linear-gradient(135deg, #044e39 0%, #065f46 100%);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(4, 78, 57, 0.25);
}

/* WhatsApp Brand Color */
.bg-whatsapp {
  background-color: #25D366;
}
.bg-whatsapp:hover {
  background-color: #20ba5a;
}

/* Print Resume Stylesheet */
@media print {
  @page {
    size: A4 portrait;
    margin: 10mm 12mm 10mm 12mm;
  }

  body {
    background: #ffffff !important;
    color: #0f172a !important;
    font-size: 10.5pt;
    line-height: 1.45;
  }

  nav, footer, .no-print, .print-hidden, #resumeToolbar, .chat-widget, button.print-btn {
    display: none !important;
  }

  .print-only {
    display: block !important;
  }

  .resume-section {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .page-break-after {
    page-break-after: always;
    break-after: page;
  }

  a {
    text-decoration: none !important;
    color: inherit !important;
  }

  .resume-sheet {
    box-shadow: none !important;
    border: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}

.resume-one-page {
  max-height: 297mm;
  overflow: hidden;
}

@media print {
  .resume-one-page {
    max-height: none;
    overflow: visible;
  }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #f8fafc;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* ============================================================================
   ADVANCED MOBILE DEVICE OPTIMIZATIONS & TOUCH ENHANCEMENTS
   ============================================================================ */

/* 1. Prevent iOS Safari auto-zoom on input focus */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="date"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* 2. Touch tap responsiveness & gesture smoothness */
* {
  -webkit-tap-highlight-color: transparent;
}

.touch-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.touch-scroll-x::-webkit-scrollbar {
  display: none;
}

/* 3. iOS Safe Area insets for bottom bars and notches */
.safe-bottom {
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}

.safe-top {
  padding-top: max(12px, env(safe-area-inset-top));
}

/* 4. Touch target sizing (Minimum 44px for accessibility on small devices) */
@media (max-width: 640px) {
  .btn-touch {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /* Responsive Medical Resume Scaling for 320px - 430px screens */
  .resume-sheet {
    font-size: 8.5pt !important;
    border-radius: 16px !important;
  }

  .resume-sheet .p-8 {
    padding: 16px !important;
  }

  .resume-sheet h1 {
    font-size: 16pt !important;
    line-height: 1.2 !important;
  }

  .resume-sheet h2 {
    font-size: 10pt !important;
  }

  .resume-sheet h3 {
    font-size: 9.5pt !important;
  }

  /* Standee mobile scale */
  .standee-card {
    max-width: 100% !important;
    margin: 0 auto;
  }

  /* Modals on mobile: full width drawer feel */
  .mobile-modal-sheet {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .mobile-modal-sheet > div {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    max-height: 90vh;
    overflow-y: auto;
  }
}

/* 5. High-Resolution Logo Sharpness & Mobile Header Protection */
.navbar-logo-img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

@media (max-width: 480px) {
  .navbar-logo-img {
    max-width: 140px !important;
    height: 32px !important;
  }
}