/* Custom styles for Care With Love Clone */
/* Fonts are preloaded asynchronously via HTML head */

/* Restore pointer cursor on all interactive elements (overrides Tailwind preflight reset) */
a, button, [role="button"], label[for], summary { cursor: pointer !important; }

:root {
  --font-fraunces: 'Fraunces', Georgia, serif;
  --font-inter: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-khmer: 'Kantumruy Pro', 'Inter', sans-serif;
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', sans-serif;
  
  --primary: #03953f;
  --primary-foreground: #ffffff;
  --primary-soft: #e6f4eb;
  --primary-dark: #02702f;
  --secondary: #f6b98a;
  --secondary-foreground: #1f2a24;
  --background: #fbf8f3;
  --foreground: #1f2a24;
  --card: #ffffff;
  --card-foreground: #1f2a24;
  --border: #e8e3d9;
}

body {
  font-family: var(--font-inter);
  background-color: var(--background);
  color: var(--foreground);
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

.font-display {
  font-family: var(--font-fraunces) !important;
}

.font-body {
  font-family: var(--font-inter) !important;
}

html[lang="km"],
html[lang="km"] body,
html[lang="km"] .font-body,
html[lang="km"] .font-display,
html[lang="km"] h1,
html[lang="km"] h2,
html[lang="km"] h3,
html[lang="km"] h4,
html[lang="km"] p,
html[lang="km"] span,
html[lang="km"] a,
html[lang="km"] button,
html[lang="km"] input,
html[lang="km"] select,
html[lang="km"] textarea {
  font-family: 'Kantumruy Pro', var(--font-inter), sans-serif !important;
}

/* Story Carousel Avatar Buttons */
.story-btn {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  flex-shrink: 0 !important;
  border-radius: 9999px !important;
  position: relative !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-width: 2px !important;
  border-style: solid !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
  padding: 0 !important;
  background-color: #ffffff;
}

.story-btn img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 9999px !important;
  position: absolute !important;
  inset: 0 !important;
}

.story-btn .story-initial {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: var(--primary-soft, #e6f4eb) !important;
  color: var(--primary, #03953f) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  user-select: none !important;
  border-radius: 9999px !important;
}

/* Hospital Partner Logo Square Badge */
.partner-logo-box {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  max-width: 38px !important;
  max-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  border-radius: 10px !important;
  background-color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  padding: 2px !important;
}

.partner-logo-img {
  width: 100% !important;
  height: 100% !important;
  max-width: 34px !important;
  max-height: 34px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  display: block !important;
}


/* Ensure ALL SSR elements with initial opacity:0 are forced visible */
[style*="opacity:0"],
[style*="opacity: 0"],
[style*="opacity:0;"],
[style*="opacity: 0;"],
[style*="translateY"] {
  opacity: 1 !important;
  transform: none !important;
}

/* Hero video layer fix - ensure video plays cleanly behind overlay gradients */
video {
  pointer-events: none;
}

/* Fix marquee infinite animation */
@keyframes cwlMarquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

.animate-marquee {
  display: flex !important;
  width: max-content !important;
  animation: cwlMarquee 40s linear infinite !important;
}

.animate-marquee:hover {
  animation-play-state: paused !important;
}

/* Smooth reveal animation */
.cwl-fade-in {
  opacity: 1 !important;
  transform: none !important;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Core Theme & Utility Colors */
.bg-background {
  background-color: var(--background, #fbf8f3) !important;
}
.bg-card {
  background-color: #ffffff !important;
}
.bg-muted {
  background-color: #f3ede2 !important;
}
.bg-muted\/30,
.bg-muted\/40,
.bg-muted\/60 {
  background-color: rgba(243, 237, 226, 0.5) !important;
}
.text-foreground {
  color: #1f2a24 !important;
}
.text-muted-foreground {
  color: #6b7280 !important;
}
.border-border,
.border-border\/60,
.border-border\/80 {
  border-color: #e8e3d9 !important;
}
.shadow-soft {
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05), 0 2px 6px -1px rgba(0, 0, 0, 0.03) !important;
}

/* Sticky Header styling */
header {
  background-color: var(--background, #fbf8f3) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
}
header > div,
header .border-b {
  background-color: rgba(251, 248, 243, 0.98) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
header.header-scrolled {
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.08) !important;
}

/* Floating Action Buttons */
.cwl-floating-bar {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
}

.cwl-float-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  text-decoration: none;
}

.cwl-float-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}

.cwl-float-btn.zalo {
  background-color: #0068FF;
  color: white;
}

.cwl-float-btn.telegram {
  background: linear-gradient(135deg, #2AABEE, #229ED9) !important;
  color: white !important;
  box-shadow: 0 4px 14px rgba(34, 158, 217, 0.4) !important;
}

.cwl-float-btn.telegram:hover {
  background: linear-gradient(135deg, #229ED9, #1c88bd) !important;
  box-shadow: 0 8px 24px rgba(34, 158, 217, 0.55) !important;
}

.cwl-float-btn.phone {
  background-color: #03953f;
  color: white;
  animation: cwlPulse 2s infinite;
}

.cwl-float-btn.book {
  background-color: #e35e5b;
  color: white;
  width: auto;
  border-radius: 9999px;
  padding: 0 18px;
  font-weight: 600;
  font-size: 14px;
  gap: 8px;
  display: flex !important;
}

/* Small screen / mobile responsive view: hide book now button and keep call and telegram icons */
@media (max-width: 767px) {
  .cwl-float-btn.book {
    display: none !important;
  }
}

.cwl-float-btn.top {
  background-color: #ffffff;
  color: #333333;
  width: 44px;
  height: 44px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.cwl-float-btn.top.visible {
  opacity: 1 !important;
  pointer-events: auto;
}

@keyframes cwlPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(3, 149, 63, 0.7);
  }
  70% {
    box-shadow: 0 0 0 16px rgba(3, 149, 63, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(3, 149, 63, 0);
  }
}

/* Modal Popup Styles */
.cwl-modal-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0 !important;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.cwl-modal-backdrop.active {
  opacity: 1 !important;
  visibility: visible;
}

.cwl-modal-content {
  background: #ffffff;
  border-radius: 24px;
  width: 100%;
  max-width: 580px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  transform: scale(0.95) translateY(10px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  padding: 32px;
}

.cwl-modal-backdrop.active .cwl-modal-content {
  transform: scale(1) translateY(0) !important;
}

/* Toast notification */
.cwl-toast {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 1050;
  background: #03953f;
  color: white;
  padding: 16px 24px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 500;
  transform: translateY(-50px);
  opacity: 0 !important;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.cwl-toast.show {
  transform: translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto;
}

/* Video Modal */
.cwl-video-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 1010;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0 !important;
  visibility: hidden;
  transition: all 0.3s ease;
  padding: 20px;
}
.cwl-video-modal.active {
  opacity: 1 !important;
  visibility: visible;
}
.cwl-video-container {
  width: 100%;
  max-width: 900px;
  aspect-ratio: 16/9;
  background: #000;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}
.cwl-video-container video,
.cwl-video-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Mobile Drawer Overlay */
.cwl-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 990;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(2px);
  opacity: 0 !important;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.cwl-mobile-menu.active {
  opacity: 1 !important;
  visibility: visible;
}
.cwl-mobile-menu-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 85%;
  max-width: 380px;
  background: #ffffff;
  padding: 24px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}
.cwl-mobile-menu.active .cwl-mobile-menu-drawer {
  transform: translateX(0) !important;
}

/* Progressive Image Lazy Loading & Skeleton Shimmer */
img[loading="lazy"] {
  opacity: 1;
}

img[loading="lazy"].loaded,
img[loading="eager"],
img.lazy-loaded {
  opacity: 1 !important;
}

/* Skeleton Loading Shimmer for Content Cards */
.cwl-skeleton {
  background: linear-gradient(90deg, #f0ede6 25%, #faf8f5 50%, #f0ede6 75%);
  background-size: 200% 100%;
  animation: cwlShimmer 1.5s infinite;
}

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

/* ==========================================================================
   Smooth Flash Screen Page Transition Loading Overlay
   ========================================================================== */
.cwl-flash-screen {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.12s ease-out, visibility 0.12s ease-out;
  will-change: opacity, visibility;
}

/* Active state */
.cwl-flash-screen.active {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Background backdrop with soft luxury glass blur */
.cwl-flash-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(251, 248, 243, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background-image: radial-gradient(circle at 50% 48%, rgba(3, 149, 63, 0.08) 0%, rgba(251, 248, 243, 0.96) 65%);
}

.cwl-flash-container {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  transform: scale(0.96);
  opacity: 0;
  transition: transform 0.15s ease-out, opacity 0.12s ease-out;
}

.cwl-flash-screen.active .cwl-flash-container {
  transform: scale(1);
  opacity: 1;
}

/* Logo Box & Halo Glow */
.cwl-flash-logo-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}

.cwl-flash-halo {
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(3, 149, 63, 0.25) 0%, rgba(16, 185, 129, 0.08) 55%, transparent 75%);
  filter: blur(16px);
  animation: cwlFlashPulse 2.2s ease-in-out infinite;
}

.cwl-flash-img {
  position: relative;
  max-width: 140px;
  max-height: 75px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 16px rgba(3, 149, 63, 0.14));
  animation: cwlFlashFloat 2.6s ease-in-out infinite;
}

/* Sleek Progress Loader */
.cwl-flash-loader {
  position: relative;
  width: 130px;
  height: 4px;
  border-radius: 999px;
  background: rgba(3, 149, 63, 0.12);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
  margin-bottom: 12px;
}

.cwl-flash-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  border-radius: 999px;
  background: linear-gradient(90deg, #03953F, #10B981, #34D399);
  box-shadow: 0 0 12px rgba(3, 149, 63, 0.5);
  animation: cwlFlashSlide 1.35s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

/* Subtitle Tagline */
.cwl-flash-subtitle {
  font-family: var(--font-inter), sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #02702F;
  opacity: 0.85;
  animation: cwlFlashTextPulse 2.2s ease-in-out infinite;
}

html[lang="km"] .cwl-flash-subtitle {
  font-family: 'Kantumruy Pro', var(--font-inter), sans-serif !important;
  font-size: 13px;
  letter-spacing: 0.02em;
}

@keyframes cwlFlashPulse {
  0%, 100% {
    transform: scale(0.9);
    opacity: 0.45;
  }
  50% {
    transform: scale(1.18);
    opacity: 0.85;
  }
}

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

@keyframes cwlFlashSlide {
  0% {
    left: -40%;
    width: 30%;
  }
  50% {
    left: 30%;
    width: 55%;
  }
  100% {
    left: 105%;
    width: 30%;
  }
}

@keyframes cwlFlashTextPulse {
  0%, 100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}

/* ==========================================================================
   Header Submenu & Services Mega Menu System
   ========================================================================== */

.cwl-dropdown-wrapper {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  z-index: 1000 !important;
  padding-top: 14px !important; /* Smooth hover bridge from nav item */
  visibility: hidden !important;
  opacity: 0 !important;
  transform: translateY(8px) !important;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.22s ease !important;
  pointer-events: none !important;
}

.group:hover > .cwl-dropdown-wrapper,
.group:focus-within > .cwl-dropdown-wrapper {
  visibility: visible !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

/* Auto-collapsed state on click - overrides :hover */
.group.cwl-dropdown-closed > .cwl-dropdown-wrapper,
.group:hover > .cwl-dropdown-wrapper.cwl-collapsed,
.cwl-dropdown-wrapper.cwl-collapsed {
  visibility: hidden !important;
  opacity: 0 !important;
  transform: translateY(8px) !important;
  pointer-events: none !important;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s !important;
}

/* Services Mega Menu Box */
.cwl-mega-menu {
  width: 780px !important;
  max-width: calc(100vw - 32px) !important;
  background: #ffffff !important;
  border: 1px solid rgba(232, 227, 217, 0.95) !important;
  border-radius: 22px !important;
  padding: 22px 24px 18px 24px !important;
  box-shadow: 0 20px 50px -12px rgba(15, 30, 20, 0.18),
              0 4px 16px rgba(0, 0, 0, 0.05),
              0 0 0 1px rgba(0, 0, 0, 0.02) !important;
  position: relative !important;
  box-sizing: border-box !important;
}

/* 3-Column Grid */
.cwl-mega-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

.cwl-mega-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

/* Category Header in Mega Menu */
.cwl-mega-cat-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  border-radius: 12px !important;
  background-color: #f2f9f4 !important;
  text-decoration: none !important;
  margin-bottom: 6px !important;
  border: 1px solid rgba(3, 149, 63, 0.12) !important;
  transition: all 0.2s ease !important;
}

.cwl-mega-cat-header:hover {
  background-color: #e6f4eb !important;
  border-color: rgba(3, 149, 63, 0.25) !important;
}

.cwl-mega-cat-icon {
  width: 26px !important;
  height: 26px !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, #03953f, #02702f) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.cwl-mega-cat-icon svg {
  width: 14px !important;
  height: 14px !important;
  stroke: #ffffff !important;
}

.cwl-mega-cat-title {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #02702f !important;
  line-height: 1.3 !important;
  white-space: normal !important;
}

/* Service Item in Mega Menu */
.cwl-mega-service-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.cwl-mega-service-link {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 7px 10px !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #374151 !important;
  line-height: 1.35 !important;
  transition: all 0.18s ease !important;
  position: relative !important;
}

.cwl-mega-service-link:hover {
  background-color: #f0f9f3 !important;
  color: #03953f !important;
  padding-left: 12px !important;
}

.cwl-mega-service-left {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 0 !important;
}

.cwl-mega-service-bullet {
  width: 5px !important;
  height: 5px !important;
  border-radius: 9999px !important;
  background-color: #cbd5e1 !important;
  flex-shrink: 0 !important;
  transition: background-color 0.18s ease, transform 0.18s ease !important;
}

.cwl-mega-service-link:hover .cwl-mega-service-bullet {
  background-color: #03953f !important;
  transform: scale(1.3) !important;
}

.cwl-mega-service-name {
  white-space: normal !important;
  word-break: break-word !important;
}

.cwl-mega-service-badge {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  padding: 1px 7px !important;
  border-radius: 9999px !important;
  background-color: #fef3c7 !important;
  color: #92400e !important;
  flex-shrink: 0 !important;
  margin-left: 6px !important;
}

/* Mega Menu Footer */
.cwl-mega-footer {
  margin-top: 16px !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(232, 227, 217, 0.8) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 13px !important;
}

.cwl-mega-footer-text {
  color: #6b7280 !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.cwl-mega-footer-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #03953f !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  padding: 5px 14px !important;
  border-radius: 9999px !important;
  background-color: #e6f4eb !important;
  transition: all 0.2s ease !important;
}

.cwl-mega-footer-link:hover {
  background-color: #03953f !important;
  color: #ffffff !important;
}

/* Generic Child Submenu Dropdown */
.cwl-sub-dropdown {
  min-width: 220px !important;
  width: max-content !important;
  background-color: #ffffff !important;
  border: 1px solid rgba(232, 227, 217, 0.95) !important;
  border-radius: 16px !important;
  padding: 8px !important;
  box-shadow: 0 16px 36px -8px rgba(15, 30, 20, 0.14),
              0 2px 10px rgba(0, 0, 0, 0.03) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  box-sizing: border-box !important;
}

.cwl-sub-item {
  display: block !important;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #374151 !important;
  transition: all 0.15s ease !important;
}

.cwl-sub-item:hover {
  background-color: #e6f4eb !important;
  color: #03953f !important;
  padding-left: 17px !important;
}

/* Responsive adjustment for screens between 1024px and 1200px */
@media (max-width: 1200px) {
  .cwl-mega-menu {
    width: 680px !important;
  }
}

/* Khmer font override */
html[lang="km"] .cwl-mega-cat-title,
html[lang="km"] .cwl-mega-service-name,
html[lang="km"] .cwl-mega-footer,
html[lang="km"] .cwl-sub-item {
  font-family: 'Kantumruy Pro', var(--font-inter), sans-serif !important;
}