/* Custom styling and animations */

/* =========================================================
   ABSOLUTE ZERO-HORIZONTAL-SCROLL SHIELD (Mobile & All Viewports)
========================================================= */
html {
  overflow-x: clip !important;
  max-width: 100vw;
  width: 100%;
}

body {
  overflow-x: clip !important;
  position: relative;
  width: 100%;
  max-width: 100vw;
  min-width: 0;
}

*, *::before, *::after {
  box-sizing: border-box;
}

img, video, iframe, canvas, svg {
  max-width: 100%;
}

.pointer-events-none {
  max-width: 100vw;
}

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

#categoryPills,
#checklistTabs {
  max-width: 100% !important;
  min-width: 0 !important;
  -webkit-overflow-scrolling: touch;
}

.no-scrollbar::-webkit-scrollbar,
.scrollbar-none::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
.no-scrollbar,
.scrollbar-none {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

/* Explicit Line Clamping for Dynamic Cards (Guaranteed truncation) */
.line-clamp-1 {
  display: -webkit-box !important;
  -webkit-line-clamp: 1 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.line-clamp-2 {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.line-clamp-3 {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Card hover transitions */
.post-card {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.post-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 30px -10px rgba(15, 23, 42, 0.12);
}

.school-card {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.school-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 40px -12px rgba(79, 70, 229, 0.16);
  border-color: rgba(99, 102, 241, 0.4);
}

/* Services Cards Elevation & Smooth Interactions */
#servicesGrid > div {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
#servicesGrid > div:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 35px -10px rgba(30, 58, 138, 0.12);
}

.service-tab-btn {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}
.service-tab-btn:hover:not(.active) {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -4px rgba(15, 23, 42, 0.08);
}
.service-tab-btn.active {
  transform: scale(1.02);
}


/* Enhanced Image Rendering & Sharpening */
.post-card img,
.school-card img,
#smCover,
#smLogo,
#modalThumbnail {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* =========================================================
   ULTRA-THIN & ELEGANT SCROLLBAR SYSTEM (All scroll contexts)
   - Width: 5px (main window), 4px (containers & modals)
   - Transparent track: no ugly background gutter or column
   - Smooth pill thumb with subtle opacity & hover transition
   - Standard Firefox scrollbar-width & scrollbar-color
========================================================= */

/* 1. Universal Cross-Browser Standards (Firefox & modern CSS) */
html, body, *, *::before, *::after {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.45) transparent;
}

/* 2. WebKit / Blink (Chrome, Edge, Safari, Opera, iOS, Android) */
/* Global / Main window scrollbar */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: transparent !important;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(148, 163, 184, 0.45);
  border-radius: 9999px;
  transition: background-color 0.2s ease;
}
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(100, 116, 139, 0.75);
}
::-webkit-scrollbar-thumb:active {
  background-color: rgba(71, 85, 105, 0.95);
}
::-webkit-scrollbar-corner {
  background: transparent !important;
}

/* 3. Inner Scroll Containers, Modals & Custom-Scrollbar (Extra thin 4px, rounded, fits UI) */
.custom-scrollbar,
.thin-scrollbar,
.modal-scrollable,
[class*="overflow-y-auto"],
[class*="overflow-x-auto"],
[class*="overflow-auto"],
textarea,
pre {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.4) transparent;
  -webkit-overflow-scrolling: touch;
}

.custom-scrollbar::-webkit-scrollbar,
.thin-scrollbar::-webkit-scrollbar,
.modal-scrollable::-webkit-scrollbar,
[class*="overflow-y-auto"]::-webkit-scrollbar,
[class*="overflow-x-auto"]::-webkit-scrollbar,
[class*="overflow-auto"]::-webkit-scrollbar,
textarea::-webkit-scrollbar,
pre::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.custom-scrollbar::-webkit-scrollbar-track,
.thin-scrollbar::-webkit-scrollbar-track,
.modal-scrollable::-webkit-scrollbar-track,
[class*="overflow-y-auto"]::-webkit-scrollbar-track,
[class*="overflow-x-auto"]::-webkit-scrollbar-track,
[class*="overflow-auto"]::-webkit-scrollbar-track,
textarea::-webkit-scrollbar-track,
pre::-webkit-scrollbar-track {
  background: transparent !important;
}

.custom-scrollbar::-webkit-scrollbar-thumb,
.thin-scrollbar::-webkit-scrollbar-thumb,
.modal-scrollable::-webkit-scrollbar-thumb,
[class*="overflow-y-auto"]::-webkit-scrollbar-thumb,
[class*="overflow-x-auto"]::-webkit-scrollbar-thumb,
[class*="overflow-auto"]::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb,
pre::-webkit-scrollbar-thumb {
  background-color: rgba(148, 163, 184, 0.4);
  border-radius: 9999px;
  transition: background-color 0.2s ease;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover,
.thin-scrollbar::-webkit-scrollbar-thumb:hover,
.modal-scrollable::-webkit-scrollbar-thumb:hover,
[class*="overflow-y-auto"]::-webkit-scrollbar-thumb:hover,
[class*="overflow-x-auto"]::-webkit-scrollbar-thumb:hover,
[class*="overflow-auto"]::-webkit-scrollbar-thumb:hover,
textarea::-webkit-scrollbar-thumb:hover,
pre::-webkit-scrollbar-thumb:hover {
  background-color: rgba(100, 116, 139, 0.75);
}

/* Dark mode and Glass Card Scrollbars */
.dark .custom-scrollbar,
.dark .thin-scrollbar,
.dark .modal-scrollable,
.glass-card .custom-scrollbar,
.glass-card [class*="overflow-y-auto"] {
  scrollbar-color: rgba(148, 163, 184, 0.3) transparent;
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb,
.dark .thin-scrollbar::-webkit-scrollbar-thumb,
.dark .modal-scrollable::-webkit-scrollbar-thumb,
.glass-card .custom-scrollbar::-webkit-scrollbar-thumb,
.glass-card [class*="overflow-y-auto"]::-webkit-scrollbar-thumb {
  background-color: rgba(148, 163, 184, 0.3);
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover,
.dark .thin-scrollbar::-webkit-scrollbar-thumb:hover,
.dark .modal-scrollable::-webkit-scrollbar-thumb:hover,
.glass-card .custom-scrollbar::-webkit-scrollbar-thumb:hover,
.glass-card [class*="overflow-y-auto"]::-webkit-scrollbar-thumb:hover {
  background-color: rgba(203, 213, 225, 0.6);
}

/* Iframe Embed No-Scroll & Smooth Styling */
.tiktok-embed-frame {
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  overflow: hidden !important;
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
  background-color: #000 !important;
}
.tiktok-embed-frame::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Clean TikTok embed frame — full size, all controls visible */
.clean-tiktok-frame {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  overflow: hidden !important;
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
  background-color: #000 !important;
}
.clean-tiktok-frame::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Utility to hide scrollbar while preserving touch scroll */
.no-scrollbar::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
.no-scrollbar {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

/* School Review Quote Multi-line Truncation Fix */
.school-review-quote {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

/* Modal Responsiveness & Balanced Mobile/PC Heights */
.modal-responsive-card {
  height: min(90vh, 700px);
  max-height: 92vh;
}

@media (max-width: 1023px) {
  .modal-responsive-card {
    height: 90vh;
    max-height: 92vh;
    overflow-y: auto;
  }
  .modal-media-stage {
    height: 36vh !important;
    min-height: 240px !important;
    max-height: 300px !important;
  }
}

/* ==================== FULLSCREEN MODE FOR MEDIA STAGE (CENTERED PC & MOBILE) ==================== */
#modalMediaStage:fullscreen,
#modalMediaStage:-webkit-full-screen,
#modalMediaStage.is-fullscreen-fallback {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: 100vw !important;
  max-height: 100dvh !important;
  border-radius: 0 !important;
  border: none !important;
  background-color: #030712 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 99999 !important;
  overflow: hidden !important;
}

/* Clear containing block filters on ancestors when fullscreen is active */
body.has-fullscreen-media #postModal,
#postModal.has-fullscreen-media {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Ambient glow backdrop in fullscreen */
#modalMediaStage:fullscreen #modalPosterBg,
#modalMediaStage:-webkit-full-screen #modalPosterBg,
#modalMediaStage.is-fullscreen-fallback #modalPosterBg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  filter: blur(60px) brightness(0.3) saturate(1.4) !important;
  opacity: 0.5 !important;
  transform: scale(1.2) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Centered TikTok video player container (Bounded 9:16 aspect ratio on PC and Mobile) */
#modalMediaStage:fullscreen .modal-video-card,
#modalMediaStage:-webkit-full-screen .modal-video-card,
#modalMediaStage.is-fullscreen-fallback .modal-video-card {
  position: relative !important;
  width: min(92vw, calc((100vh - 120px) * 9 / 16)) !important;
  height: min(calc(100vh - 120px), calc(92vw * 16 / 9)) !important;
  max-width: 460px !important;
  max-height: calc(100vh - 110px) !important;
  aspect-ratio: 9 / 16 !important;
  border-radius: 16px !important;
  box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.95), 0 0 60px rgba(225, 29, 72, 0.25) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  overflow: hidden !important;
  z-index: 20 !important;
  margin: auto !important;
  transform: none !important;
}

/* Fullscreen iframe simply fills its centered card */
#modalMediaStage:fullscreen .tiktok-embed-frame,
#modalMediaStage:-webkit-full-screen .tiktok-embed-frame,
#modalMediaStage.is-fullscreen-fallback .tiktok-embed-frame {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: inherit !important;
  transform: none !important;
  z-index: 20 !important;
}

#modalMediaStage:fullscreen .clean-tiktok-frame,
#modalMediaStage:-webkit-full-screen .clean-tiktok-frame,
#modalMediaStage.is-fullscreen-fallback .clean-tiktok-frame {
  position: absolute !important;
  width: 126% !important;
  height: 120% !important;
  top: -10% !important;
  left: -2% !important;
  max-width: none !important;
  border: 0 !important;
  border-radius: inherit !important;
  transform: none !important;
  z-index: 20 !important;
}

/* Fullscreen poster simply fills its centered card */
#modalMediaStage:fullscreen #modalPoster,
#modalMediaStage:-webkit-full-screen #modalPoster,
#modalMediaStage.is-fullscreen-fallback #modalPoster {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border-radius: inherit !important;
  transform: none !important;
  z-index: 10 !important;
}

/* Fullscreen skeleton simply fills its centered card */
#modalMediaStage:fullscreen #modalIframeSkeleton,
#modalMediaStage:-webkit-full-screen #modalIframeSkeleton,
#modalMediaStage.is-fullscreen-fallback #modalIframeSkeleton {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
  transform: none !important;
  z-index: 30 !important;
}

/* On mobile fullscreen: fill nicely */
@media (max-width: 640px) {
  #modalMediaStage:fullscreen .modal-video-card,
  #modalMediaStage:-webkit-full-screen .modal-video-card,
  #modalMediaStage.is-fullscreen-fallback .modal-video-card {
    width: 100vw !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border: none !important;
  }
}

/* Floating top controller bar in fullscreen */
.modal-fs-bar {
  display: none;
}
#modalMediaStage:fullscreen #modalFullscreenBar,
#modalMediaStage:-webkit-full-screen #modalFullscreenBar,
#modalMediaStage.is-fullscreen-fallback #modalFullscreenBar {
  display: flex !important;
  position: absolute !important;
  top: calc(env(safe-area-inset-top, 0px) + 16px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(calc(100vw - 32px), 480px) !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 16px !important;
  background: rgba(15, 23, 42, 0.85) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 9999px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7) !important;
  z-index: 50 !important;
}
.modal-fs-exit-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  padding: 6px 14px !important;
  border-radius: 9999px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.modal-fs-exit-btn:hover {
  background: #e11d48 !important;
  border-color: #f43f5e !important;
  transform: scale(1.05) !important;
}

/* Checklist items check styling */
.checklist-item.checked {
  background-color: #f0fdf4 !important;
  border-color: #bbf7d0 !important;
}
.checklist-item.checked .item-text {
  text-decoration: line-through;
  color: #15803d;
}

/* Print stylesheet */
@media print {
  header, footer, #about, #posts, #schools, #services, #calculator, #booking, #faq, .floating-actions, button {
    display: none !important;
  }
  #checklist {
    display: block !important;
    padding: 0 !important;
  }
  #checklist .bg-slate-50 {
    background: transparent !important;
    border: none !important;
  }
}