/* 
 * --------------------------------------------------------------
 *  DEATEXTILE LUXURY LAYER - MICRO-IMPROVEMENTS
 *  Objective: Premium polish, smooth transitions, and UX refinement.
 *  Rules: No redesign, no layout changes, no branding changes.
 * --------------------------------------------------------------
 */

:root {
  /* 8px Spacing System Base */
  --space-unit: 8px;
  --space-xs: calc(var(--space-unit) * 1);   /* 8px */
  --space-sm: calc(var(--space-unit) * 2);   /* 16px */
  --space-md: calc(var(--space-unit) * 3);   /* 24px */
  --space-lg: calc(var(--space-unit) * 6);   /* 48px */
  --space-xl: calc(var(--space-unit) * 10);  /* 80px */
  
  /* Standardized Gold Palette */
  --gold-primary: #af976a;
  --gold-light: #cbae78;
  --gold-dark: #8a7850;
  --gold-bg: rgba(175, 151, 106, 0.1);
  
  /* Refined Transitions */
  --transition-fast: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 400ms cubic-bezier(0.16, 1, 0.3, 1);
  
  /* Elevating Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 12px rgba(175, 151, 106, 0.12); /* Subtle Gold Shadow */
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.08);
}

/* 1. TYPOGRAPHY & GLOBAL REFINEMENT (APPLE LAYOUT) ----------- */

:root {
  --apple-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  --apple-radius: 18px; /* High-end device feel */
  --apple-bg: #f5f5f7;  /* Apple ecosystem background tone */
}

body {
  font-family: var(--apple-font) !important;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  transition: opacity 300ms ease;
  overflow-x: hidden;
  background-color: #ffffff;
  color: #1d1d1f; /* Apple's dark grey/black */
}

h1, h2, h3, h4, h5, h6, .description-title {
  font-family: var(--apple-font) !important;
  letter-spacing: -0.022em !important; /* Apple characteristic tight spacing */
  font-weight: 700 !important;
}

section {
  padding: 120px 0 !important; /* Luxurious airy space */
}

.container {
  max-width: 1280px !important; /* Standard Apple Pro width */
}

/* Luxury Slim Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
}
::-webkit-scrollbar-thumb {
  background: var(--accent-color);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: #d4bb8c;
}

/* Subtle Noise Texture Overlay (Premium Paper Feel) */
body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  opacity: 0.015; /* Extremely subtle */
  z-index: 9999;
  pointer-events: none;
  background-image: url('https://grain-y.com/assets/img/grain.png');
  background-repeat: repeat;
  mix-blend-mode: multiply;
}

/* Luxury Scroll Progress Bar (Top) */
.scroll-progress-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px; /* Super slim luxury feel */
  z-index: 10001; /* Above almost everything */
  pointer-events: none;
}
.scroll-progress-bar {
  height: 100%;
  background: var(--accent-color);
  width: 0%;
  box-shadow: 0 0 10px rgba(175, 151, 106, 0.5);
  transition: width 0.1s ease-out;
}

body.is-translating, body.is-leaving {
  opacity: 0.1; /* Dramatic but safe fade out during i18n switch or page exit */
  pointer-events: none;
}

h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.015em; /* Modern, tight heading spacing */
  line-height: 1.25;
}

.hero-subtitle, .lead, .section-title p {
  letter-spacing: 0.01em;
  opacity: 0.85; /* Refined visual hierarchy */
}

/* 2. SPACING SYSTEM NORMALIZATION ------------------------------ */

section, .section {
  padding: var(--space-xl) 0; /* Consistent vertical rhythm */
}

@media (max-width: 768px) {
  section, .section {
    padding: var(--space-lg) 0;
  }
}

/* Ensure mobile left/right breathing space */
.container {
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

/* 3. BUTTON & CTA INTERACTION ----------------------------------- */

.btn, .btn-getstarted, .btn-primary, .btn-outline, .btn-premium {
  transition: all var(--transition-fast) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px; /* Improved tap target (A11y) */
  outline: none;
}

/* 3.1 MOBILE SAFE AREA & GESTURE HANDLING */
@media (max-width: 768px) {
  /* REDUCE SCROLL FATIGUE: Stats 2x2 Grid */
  #stats .row.gy-4 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  
  #stats .col-lg-3.col-md-6 {
    width: 100% !important;
  }

  .stats-item {
    padding: 15px 10px !important;
    flex-direction: column !important;
    text-align: center !important;
  }

  .stats-item i {
    margin-right: 0 !important;
    margin-bottom: 8px !important;
    font-size: 2rem !important;
  }
  
  .stats-item span {
    font-size: 1.4rem !important;
  }
  
  .stats-item p {
    font-size: 0.7rem !important;
  }

  /* REDUCE SCROLL FATIGUE: About Features 2-Column Grid */
  .features-grid .row.g-4 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  
  .feature-card {
    height: 180px !important; /* Fixed height for consistency in grid */
  }
  
  .feature-icon {
    width: 45px !important;
    height: 45px !important;
    font-size: 1.2rem !important;
    margin-bottom: 10px !important;
  }
  
  .feature-front h4 {
    font-size: 0.85rem !important;
  }
  
  .feature-front p {
    display: none !important; /* Hide short desc on mobile face to save space */
  }

  /* FLIPPED STATE OPTIMIZATION: Typography & Spacing */
  .feature-back {
    padding: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .feature-back p {
    font-size: 0.72rem !important; /* Smaller text for compact grid */
    line-height: 1.35 !important;
    margin-bottom: 0 !important;
    text-align: center !important;
  }

  /* REDUCE SCROLL FATIGUE: Compact Booking Form */
  .booking-form {
    padding: 20px 15px !important;
  }
  
  .form-title {
    font-size: 1.2rem !important;
    margin-bottom: 5px !important;
  }
  
  #appointmentForm .form-group {
    margin-bottom: 8px !important;
  }
  
  #appointmentForm label {
    font-size: 0.75rem !important;
    margin-bottom: 2px !important;
  }
  
  #appointmentForm .form-control {
    padding: 8px 12px !important;
    font-size: 0.85rem !important;
  }

  /* REDUCE SCROLL FATIGUE: Horizontal Narrative Timeline */
  .timeline-horizontal-mobile .timeline-items {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    padding: 20px 10px 40px !important;
    margin: 0 -15px !important;
    gap: 20px !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    position: relative;
  }

  /* The connecting track line */
  .timeline-horizontal-mobile .timeline-items::before {
    content: '';
    position: absolute;
    top: 40px; /* Aligned with milestone marker */
    left: 40px;
    right: 40px;
    height: 2px;
    background: rgba(188, 160, 107, 0.2);
    z-index: 0;
  }

  .timeline-horizontal-mobile .timeline-items::-webkit-scrollbar {
    display: none;
  }

  .timeline-horizontal-mobile .timeline-milestone {
    flex: 0 0 80% !important;
    max-width: 80% !important;
    background: #fff !important;
    padding: 24px !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06) !important;
    border: 1px solid rgba(188, 160, 107, 0.1) !important;
    position: relative;
    z-index: 1;
    margin: 0 !important;
    transform: none !important;
    text-align: left !important;
  }

  .timeline-horizontal-mobile .milestone-marker {
    margin-bottom: 15px !important;
  }

  .mobile-brand-pill {
    top: calc(16px + env(safe-area-inset-top)) !important;
    left: calc(16px + env(safe-area-inset-left)) !important;
  }
  
  .mobile-fab-toggle {
    top: calc(16px + env(safe-area-inset-top)) !important;
    right: calc(16px + env(safe-area-inset-right)) !important;
  }
  
  .lang-fab-top-right {
    top: calc(16px + env(safe-area-inset-top)) !important;
  }
  
  /* Ensure footer doesn't get cut by home indicator */
  .footer {
    padding-bottom: calc(40px + env(safe-area-inset-bottom)) !important;
  }
  
  /* Improve readability for smaller devices (iPhone SE etc) */
  @media (max-width: 380px) {
    html { font-size: 90%; }
    .hero-title, .dea-page-hero-title { font-size: 2rem !important; }
  }
}

/* 9. LUXURY NAVBAR UPGRADE (PREMIUM VERSION) ------------------ */

.header-container {
  background: rgba(175, 151, 106, 0.75) !important; /* Premium Glassmorphism */
  backdrop-filter: blur(15px) !important;
  -webkit-backdrop-filter: blur(15px) !important;
  box-shadow: 0 8px 32px rgba(175, 151, 106, 0.15) !important;
  padding: 10px 35px !important;
  transition: all var(--transition-smooth) !important;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Adaptive shrink on scroll */
body.scrolled .header-container {
  padding: 6px 25px !important;
  background: rgba(175, 151, 106, 0.92) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

/* 10. LUXURY LOGO EMBOSS (DEATEXTILE) ------------------------ */

.logo h1 {
  font-family: 'Open Sans', 'Helvetica Neue', sans-serif !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 
    -1px -1px 0px rgba(255, 255, 255, 0.5),
    1px 1px 1.5px rgba(0, 0, 0, 0.4); /* Chiseled White Emboss */
  letter-spacing: 3.5px !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  transition: all 400ms var(--transition-smooth) !important;
  cursor: pointer;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.1));
}

/* Subtle logo shimmer on scroll or hover */
.logo h1:hover {
  transform: scale(1.02) translateY(-1px);
  background-position: right center;
  filter: brightness(1.1) drop-shadow(0 4px 6px rgba(175, 151, 106, 0.1));
}

body.scrolled .logo h1 {
  letter-spacing: 2.8px !important; /* Slightly more compact when scrolled */
}

/* Navigation Link Polishing */
.navmenu a {
  letter-spacing: 0.05em !important;
  font-weight: 300 !important;
  text-transform: uppercase;
  font-size: 13px !important;
  position: relative;
  transition: color var(--transition-fast) !important;
}

/* Active & Hover Line Indicator */
.navmenu a::after {
  content: '';
  position: absolute;
  bottom: 0px;
  left: 15px;
  width: 0;
  height: 2px;
  background: #ffffff;
  transition: width var(--transition-fast);
  border-radius: 2px;
}

.navmenu a:hover::after, .navmenu a.active::after {
  width: calc(100% - 30px);
}

/* Shopping CTA Refinement - Debossed (Carved-in) Premium Look */
.btn-getstarted {
  position: relative;
  overflow: hidden;
  letter-spacing: 1px !important;
  background: linear-gradient(145deg, #a88d59, #bca06b) !important;
  color: #fff !important;
  font-weight: 800 !important;
  padding: 10px 30px !important;
  border-radius: 50px !important;
  
  /* Deboss Magic: Inner shadows to simulate carving */
  box-shadow: 
    inset 4px 4px 8px rgba(0, 0, 0, 0.25),      /* Inner depth (Top-Left) */
    inset -3px -3px 6px rgba(255, 255, 255, 0.2), /* Inner light reflection (Bottom-Right) */
    0 1px 1px rgba(255, 255, 255, 0.3) !important; /* Outer highlight at bottom edge */
    
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.btn-getstarted:hover {
  /* Hover: Slightly reduce the depth to simulate rising slightly */
  box-shadow: 
    inset 2px 2px 5px rgba(0, 0, 0, 0.3),
    inset -1px -1px 3px rgba(255, 255, 255, 0.3),
    0 4px 12px rgba(0, 0, 0, 0.1) !important;
  transform: translateY(-1px);
  background: linear-gradient(145deg, #bca06b, #d4bb8c) !important;
}

.btn-getstarted:active {
  /* Active: Deep carve effect */
  box-shadow: 
    inset 6px 6px 12px rgba(0, 0, 0, 0.45),
    inset -1px -1px 2px rgba(255, 255, 255, 0.1) !important;
  transform: translateY(0);
}

.btn-getstarted::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.25),
    transparent
  );
  transition: 0.5s;
}

.btn-getstarted:hover::before {
  left: 100%;
  transition: 0.6s;
}

/* Subtle pulse for main CTA */
@keyframes cta-pulse {
  0% { box-shadow: 0 0 0 0 rgba(175, 151, 106, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(175, 151, 106, 0); }
  100% { box-shadow: 0 0 0 0 rgba(175, 151, 106, 0); }
}

.btn-getstarted:not(:active) {
  animation: cta-pulse 3s infinite;
}

/* Accessibility Focus States */
.btn:focus-visible, a:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* 4. MICRO-INTERACTIONS ----------------------------------------- */

/* Card elevating effect without redesign */
.card, .event-card, .program-image-card, .location-card, .benefit-box {
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
  border-radius: 12px !important; /* Soften edges subtly */
}

.card:hover, .event-card:hover, .location-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}

/* 4.1 PROGRAM CHARACTER POLISH (PNG Glow & Float) ------------- */

@keyframes character-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.program-image-card img {
  filter: drop-shadow(0 5px 15px rgba(0,0,0,0.08));
  transition: filter 0.5s ease, transform 0.8s var(--transition-smooth) !important;
  animation: character-float 6s ease-in-out infinite;
}

.program-image-card:hover img {
  filter: drop-shadow(0 15px 30px rgba(175, 151, 106, 0.25));
  transform: scale(1.06) !important;
  animation-play-state: paused; /* Focus on the hovered character */
}

/* Stagger animation for multiple characters */
.swiper-slide:nth-child(2n) .program-image-card img { animation-delay: -1s; }
.swiper-slide:nth-child(3n) .program-image-card img { animation-delay: -2s; }
.swiper-slide:nth-child(4n) .program-image-card img { animation-delay: -3.5s; }

.program-slide-title {
  font-family: var(--nav-font);
  font-weight: 700;
  color: var(--heading-color);
  font-size: 1.1rem;
  margin-bottom: 5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.program-slide-desc {
  font-size: 0.9rem;
  color: #666;
  max-width: 250px;
  margin: 0 auto;
  line-height: 1.4;
}

/* 5. SCROLL & PERFORMANCE --------------------------------------- */

/* Smooth fade-in reveal for sections */
[data-aos] {
  transition-duration: 800ms !important;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Preloader refinement */
#preloader {
  backdrop-filter: blur(20px);
}

/* 6. CONVERSION OPTIMIZATION ------------------------------------ */

/* Highlight primary CTAs subtly */
.btn-primary {
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: 0.85rem;
}

/* Ensure form clarity */
.form-control:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 4px rgba(203, 174, 120, 0.1);
}

/* 7. TABLET REFINEMENT ----------------------------------------- */

@media (min-width: 768px) and (max-width: 1024px) {
  .hero-title {
    font-size: 3rem !important;
  }
  .section-title {
    margin-bottom: var(--space-md);
  }
}

/* 8. ACCESSIBILITY & MOBILE REFINEMENT ------------------------- */

@media (max-width: 576px) {
  /* Fix padding on mobile sections */
  .footer-newsletter {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }
  
  /* Improve tap targets for mobile footer links */
  .footer-top a, .social-links a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  
  /* Improve readability for mobile body */
  body {
    font-size: 0.95rem;
  }
}

/* 8.1 MODAL FOCUS STATE - Hide Floating Nav Elements */
body.modal-open .mobile-fab-toggle,
body.modal-open .mobile-brand-pill,
body.modal-open .lang-fab-top-right,
body.modal-open .chatbot-button {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-20px) scale(0.8) !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Modal Close Button Refinement */
.modal-header .btn-close {
    background-color: #fff;
    border-radius: 50%;
    padding: 1rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    opacity: 1;
    margin: -10px -10px 0 auto;
    z-index: 1060; /* Above modal content */
}

/* Smooth reveal animation classes */
.luxury-reveal {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* 10. VENDOR POLISH (SWIPER, GLIGHTBOX) ----------------------- */

/* Gold Swiper Pagination */
.swiper-pagination-bullet {
  background: rgba(175, 151, 106, 0.3) !important;
  opacity: 1 !important;
  transition: all var(--transition-fast) !important;
}

.swiper-pagination-bullet-active {
  background: var(--accent-color) !important;
  width: 24px !important;
  border-radius: 50px !important;
}

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

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

::-webkit-scrollbar-thumb {
  background: var(--accent-color);
  border-radius: 10px;
  border: 3px solid #f1f1f1;
}

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

/* 16. STATUS BADGES & ADDITIONAL UTILITIES ------------------- */

.status-indicator-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #af976a;
    color: #fff;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 5;
    box-shadow: 0 4px 10px rgba(175, 151, 106, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-outline-gold {
    border: 2px solid #af976a;
    color: #af976a;
    background: transparent;
    transition: all 0.3s ease;
}

.btn-outline-gold:hover {
    background: #af976a;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(175, 151, 106, 0.25);
}

.material-card {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.03);
    margin-bottom: 30px;
}

.material-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    border-color: rgba(175, 151, 106, 0.2);
}

.material-img-wrapper {
    position: relative;
    overflow: hidden;
}

.material-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
    position: relative;
    z-index: 1;
}

.material-card:hover .material-img-wrapper img {
    transform: scale(1.1);
}


/* Category badges are now centralized in product-material.css */

/* 17. TOP-RIGHT SEPARATED CIRCLE (Level 6) -------------------- */

.lang-fab-top-right {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 999999; /* Absolute top level */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  pointer-events: auto !important;
}

.lang-fab-trigger-top {
  pointer-events: auto !important;
  position: relative;
  z-index: 1000000;
}

.lang-fab-trigger-top {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent-color);
  background: linear-gradient(135deg, #af976a 0%, #cbaf78 100%);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  transition: all 400ms cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.lang-fab-trigger-top:hover {
  transform: scale(1.1) rotate(10deg);
  box-shadow: 0 6px 20px rgba(175, 151, 106, 0.4);
}

.lang-fab-menu-top {
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-20px) scale(0.9);
  transition: all 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.lang-fab-top-right.fab-active .lang-fab-menu-top {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}


.lang-item-top {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: var(--accent-color);
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: all 300ms ease;
  border: 1px solid rgba(175, 151, 106, 0.2);
}

.lang-item-top:hover {
  background: var(--accent-color);
  color: #fff;
  transform: scale(1.1);
}

.lang-item-top.active {
  background: var(--accent-color);
  color: #fff;
  border: 2px solid #fff;
}

/* Mobile & Tablet Responsiveness — Floating UI Orchestration */
@media (max-width: 1199px) {
  /* Utilities -> RIGHT SIDE (Grouped) */
  .scroll-top {
    left: auto !important;
    right: 76px !important; /* To the left of the Language FAB */
    bottom: 25px !important;
    z-index: 100000 !important;
  }

  /* Lang FAB stays at far right */
  .lang-fab-top-right {
    top: auto;
    bottom: 25px;
    right: 20px;
    flex-direction: column-reverse; /* Menu opens UP */
  }

  /* Support -> LEFT SIDE */
  .chatbot-button {
    left: 20px !important;
    right: auto !important;
    bottom: 25px !important;
    z-index: 100001 !important;
  }

  .wa-float {
    left: 20px !important;
    right: auto !important;
    bottom: 120px !important; 
    z-index: 100001 !important;
  }

  /* GLOBAL HIDE when Menu is Active */
  body.mobile-nav-active .lang-fab-top-right,
  body.mobile-nav-active .scroll-top,
  body.mobile-nav-active .chatbot-button,
  body.mobile-nav-active .wa-float {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .lang-fab-menu-top {
    transform: translateY(20px) scale(0.9);
  }
  .lang-fab-top-right.fab-active .lang-fab-menu-top {
    transform: translateY(0) scale(1);
    opacity: 1;
    visibility: visible;
  }
}

/* --- 34. SCROLL-TO-TOP — Luxury Glass Redesign (GLOBAL) --- */
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 25px;
  bottom: 25px;
  z-index: 99999;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex !important;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  pointer-events: auto !important;
  
  /* Premium Glass Effect */
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1.5px solid rgba(175, 151, 106, 0.4) !important;
  color: #af976a !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), inset 0 0 0 1px rgba(255,255,255,0.1);
}

.scroll-top i {
  font-size: 24px;
  line-height: 0;
  transition: transform 0.3s ease;
}

.scroll-top:hover {
  background: rgba(175, 151, 106, 0.15) !important;
  border-color: #af976a !important;
  color: #cbae78 !important;
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(175, 151, 106, 0.25);
}

.scroll-top:hover i {
  transform: translateY(-3px);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
}


/* 18. MINI MEGA MENU (Luxury Dropdown) ------------------------- */

/* Desktop Mega Menu */
@media (min-width: 1200px) {
  .navmenu .dropdown .mega-menu-content {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 0;
    position: absolute !important;
    left: 50% !important;
    top: 130% !important;
    transform: translateX(-40%) translateY(10px);
    opacity: 0 !important;
    visibility: hidden !important;
    min-width: 620px;
    padding: 28px 32px !important;
    background: rgba(255, 255, 255, 0.97) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(175, 151, 106, 0.15);
    border-radius: 16px !important;
    box-shadow:
      0 20px 60px rgba(0, 0, 0, 0.12),
      0 4px 20px rgba(175, 151, 106, 0.08) !important;
    z-index: 9999 !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .navmenu .dropdown.click-active > .mega-menu-content {
    opacity: 1 !important;
    visibility: visible !important;
    top: 100% !important;
    transform: translateX(-40%) translateY(0);
  }

  /* Columns */
  .mega-menu-content .mega-col {
    flex: 1;
    min-width: 180px;
    padding: 0 16px;
    list-style: none;
    border-right: 1px solid rgba(175, 151, 106, 0.12);
  }

  .mega-menu-content .mega-col:last-child {
    border-right: none;
  }

  /* Column Headers */
  .mega-menu-content .mega-header {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #af976a;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(175, 151, 106, 0.2);
  }

  /* Menu Items */
  .mega-menu-content .mega-col ul {
    position: static !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    padding: 0 !important;
    margin: 0;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    min-width: unset !important;
  }

  .mega-menu-content .mega-col ul li {
    min-width: unset !important;
    margin-bottom: 2px;
  }

  .mega-menu-content .mega-col ul li a {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 9px 12px !important;
    font-size: 13.5px !important;
    font-weight: 500;
    color: #3a3a3a !important;
    border-radius: 8px;
    transition: all 0.2s ease;
    text-transform: none !important;
  }

  .mega-menu-content .mega-col ul li a:hover,
  .mega-menu-content .mega-col ul li a.active {
    background: rgba(175, 151, 106, 0.1) !important;
    color: #af976a !important;
    transform: translateX(3px);
  }

  .mega-menu-content .mega-col ul li a i {
    font-size: 16px !important;
    width: 22px;
    text-align: center;
    color: #af976a;
    opacity: 0.7;
    transition: opacity 0.2s;
  }

  .mega-menu-content .mega-col ul li a:hover i,
  .mega-menu-content .mega-col ul li a.active i {
    opacity: 1;
  }

  /* Top gold accent line */
  .navmenu .dropdown .mega-menu-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 32px;
    right: 32px;
    height: 3px;
    background: linear-gradient(90deg, #af976a, #d4c19c, #af976a);
    border-radius: 0 0 4px 4px;
  }
}

/* Scrolled header adjustments — Enhanced Mega Menu Visibility */
@media (min-width: 1200px) {
  .scrolled .navmenu .dropdown .mega-menu-content {
    background: rgba(255, 255, 255, 0.99) !important;
    border: 1px solid rgba(175, 151, 106, 0.25) !important;
    box-shadow:
      0 25px 70px rgba(0, 0, 0, 0.18),
      0 6px 24px rgba(175, 151, 106, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
  }

  /* Stronger column headers when scrolled */
  .scrolled .mega-menu-content .mega-header {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #8a7550;
    border-bottom: 2.5px solid rgba(175, 151, 106, 0.35);
    padding-bottom: 10px;
    margin-bottom: 16px;
  }

  /* Bolder, more readable menu items when scrolled */
  .scrolled .mega-menu-content .mega-col ul li a {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #2a2a2a !important;
    padding: 10px 14px !important;
    border-radius: 10px;
    letter-spacing: 0.01em;
  }

  /* Richer hover/active state when scrolled */
  .scrolled .mega-menu-content .mega-col ul li a:hover,
  .scrolled .mega-menu-content .mega-col ul li a.active {
    background: rgba(175, 151, 106, 0.15) !important;
    color: #8a6d3b !important;
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(175, 151, 106, 0.1);
  }

  /* Icon styling — gold pill background when scrolled */
  .scrolled .mega-menu-content .mega-col ul li a i {
    font-size: 15px !important;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(175, 151, 106, 0.12);
    border-radius: 8px;
    color: #af976a;
    opacity: 1;
    transition: all 0.2s ease;
  }

  .scrolled .mega-menu-content .mega-col ul li a:hover i {
    background: #af976a;
    color: #fff;
  }

  /* Stronger dividers between columns */
  .scrolled .mega-menu-content .mega-col {
    border-right: 1.5px solid rgba(175, 151, 106, 0.18);
  }

  .scrolled .mega-menu-content .mega-col:last-child {
    border-right: none;
  }

  /* Top accent bar stronger on scroll */
  .scrolled .navmenu .dropdown .mega-menu-content::before {
    height: 4px;
    background: linear-gradient(90deg, #8a7550, #cbae78, #af976a, #cbae78, #8a7550);
  }
}

/* Nav links — enhanced contrast when scrolled */
body.scrolled .navmenu > ul > li > a {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  font-weight: 500 !important;
}

body.scrolled .navmenu > ul > li > a:hover,
body.scrolled .navmenu > ul > li > a.active {
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
  font-weight: 700 !important;
}


/* Mobile Fallback: Premium mobile nav */
@media (max-width: 1199px) {

  /* Ensure header stacking context is above backdrop when sidebar active */
  .mobile-nav-active .header {
    z-index: 9998 !important;
  }

  /* Overlay backdrop — handled by main.js (.mobile-nav-backdrop element) */

  /* Top-level nav links */
  .navmenu > ul > li > a {
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: all 0.25s ease !important;
  }

  .navmenu > ul > li > a:hover,
  .navmenu > ul > li > a.active {
    background: rgba(175, 151, 106, 0.12) !important;
    color: var(--gold-light, #cbae78) !important;
    border-radius: 8px;
  }

  /* Separator dot for active item */
  .navmenu > ul > li > a.active::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--gold-primary, #af976a);
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
    box-shadow: 0 0 8px rgba(175, 151, 106, 0.5);
  }

  /* Mega-menu in mobile */
  .mega-menu-content {
    padding-left: 10px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .mega-header {
    display: block;
    font-size: 10px;
    font-weight: 800;
    color: var(--gold-primary, #af976a);
    margin-top: 16px;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-bottom: 1px solid rgba(175, 151, 106, 0.2);
    padding-bottom: 6px;
  }

  .mega-col {
    list-style: none;
    margin-bottom: 8px;
  }

  .mega-col ul {
    padding-left: 0;
    display: block !important;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: none !important;
  }

  .mega-col ul li a {
    color: rgba(255,255,255,0.75) !important;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px !important;
    border-radius: 8px;
    transition: all 0.2s ease !important;
    font-size: 14px !important;
  }

  .mega-col ul li a:hover {
    background: rgba(175, 151, 106, 0.1) !important;
    color: #fff !important;
    transform: translateX(4px);
  }

  .mega-col ul li a i {
    color: var(--gold-primary, #af976a) !important;
    font-size: 16px;
    width: 20px;
    text-align: center;
    opacity: 0.7;
  }

  .mega-col ul li a:hover i {
    opacity: 1;
  }

  /* Golden CTA button at bottom of drawer */
  .mobile-nav-active .btn-getstarted {
    display: block !important;
    text-align: center;
    margin: 16px 20px 0;
    padding: 12px 0;
    background: linear-gradient(135deg, var(--gold-primary, #af976a), var(--gold-light, #cbae78));
    color: #fff !important;
    border-radius: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 14px;
    box-shadow: 0 4px 15px rgba(175, 151, 106, 0.3);
  }
}
/* ================================================================
   MEGA MENU ICONS — Consistent rounded-square (kotak) icon boxes
   ================================================================ */
.mega-menu-content li a i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(175, 151, 106, 0.1);
  color: var(--gold-primary, #af976a);
  font-size: 14px;
  margin-right: 8px;
  transition: all 0.25s ease;
  flex-shrink: 0;
}

.mega-menu-content li a:hover i {
  background: rgba(175, 151, 106, 0.2);
  color: var(--gold-light, #cbae78);
  transform: scale(1.05);
}

/* ================================================================
   MOBILE NAV LIST — Clean Flat Sidebar Menu (injected by main.js)
   ================================================================ */
@media (max-width: 1199px) {
  .mobile-nav-list {
    display: block !important;
    list-style: none;
    padding: 8px 0;
    margin: 0;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-nav-list li a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 24px;
    color: rgba(255, 255, 255, 0.8);
    font-family: var(--nav-font, 'Open Sans', sans-serif);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.3px;
    text-decoration: none;
    transition: all 0.25s ease;
    border-left: 3px solid transparent;
  }

  .mobile-nav-list li a:hover {
    color: #fff;
    background: rgba(175, 151, 106, 0.1);
    border-left-color: rgba(203, 174, 120, 0.4);
  }

  .mobile-nav-list li a.active {
    color: var(--gold-light, #cbae78);
    background: rgba(175, 151, 106, 0.12);
    border-left-color: var(--gold-primary, #af976a);
    font-weight: 600;
  }

  .mobile-nav-list li a i {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(175, 151, 106, 0.15);
    font-size: 15px;
    color: var(--gold-primary, #af976a);
    opacity: 0.7;
    transition: all 0.25s ease;
    flex-shrink: 0;
  }

  .mobile-nav-list li a:hover i,
  .mobile-nav-list li a.active i {
    opacity: 1;
    background: rgba(175, 151, 106, 0.25);
    color: var(--gold-light, #cbae78);
  }

  /* Section header (e.g. "Layanan Kami") */
  .mobile-nav-list .nav-section-header {
    padding: 20px 24px 8px;
    font-family: var(--nav-font, 'Open Sans', sans-serif);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: rgba(175, 151, 106, 0.55);
    user-select: none;
  }

  /* Divider line */
  .mobile-nav-list .nav-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 10px 20px;
  }
}

/* 19. ARABIC RTL REFINEMENT ------------------------------------- */

[dir="rtl"] {
  text-align: right;
}

[dir="rtl"] .me-auto {
  margin-left: auto !important;
  margin-right: 0 !important;
}

[dir="rtl"] .ms-auto {
  margin-right: auto !important;
  margin-left: 0 !important;
}

/* Logical Margins for RTL (Bootstrap 5 Fallback) */
[dir="rtl"] .me-1 { margin-left: 0.25rem !important; margin-right: 0 !important; }
[dir="rtl"] .me-2 { margin-left: 0.5rem !important; margin-right: 0 !important; }
[dir="rtl"] .me-3 { margin-left: 1rem !important; margin-right: 0 !important; }
[dir="rtl"] .me-4 { margin-left: 1.5rem !important; margin-right: 0 !important; }
[dir="rtl"] .ms-1 { margin-right: 0.25rem !important; margin-left: 0 !important; }
[dir="rtl"] .ms-2 { margin-right: 0.5rem !important; margin-left: 0 !important; }
[dir="rtl"] .ms-3 { margin-right: 1rem !important; margin-left: 0 !important; }
[dir="rtl"] .ms-4 { margin-right: 1.5rem !important; margin-left: 0 !important; }

/* Membership Card Fix: Force LTR for the 3D stack effect to maintain visual integrity */
[dir="rtl"] .membership-swiper {
  direction: ltr !important;
}

/* Stats Item Icon Spacing */
[dir="rtl"] .stats-item i {
  margin-left: 15px !important;
  margin-right: 0 !important;
}

/* Fix Mega Menu position in RTL */
@media (min-width: 1200px) {
  [dir="rtl"] .navmenu .dropdown .mega-menu-content {
    left: auto !important;
    right: 40% !important;
    transform: translateX(50%) translateY(20px) !important;
  }
  
  [dir="rtl"] .navmenu .dropdown.click-active > .mega-menu-content {
    transform: translateX(50%) translateY(10px) !important;
  }
}

/* Flip Icons in RTL */
[dir="rtl"] i.bi-chevron-right, 
[dir="rtl"] i.bi-arrow-right {
  transform: scaleX(-1);
}

/* --- 19.1 FLOATING UI MIRRORING FOR RTL --- */
[dir="rtl"] .lang-fab-top-right {
  right: auto !important;
  left: 20px !important;
  align-items: flex-start !important;
}

[dir="rtl"] .scroll-top {
  right: auto !important;
  left: 80px !important;
}

[dir="rtl"] .chatbot-button {
  left: auto !important;
  right: 20px !important;
}

[dir="rtl"] .wa-float {
  left: auto !important;
  right: 20px !important;
}

/* Adjust mobile stack in RTL */
@media (max-width: 1199px) {
  [dir="rtl"] .scroll-top {
    left: 76px !important;
    right: auto !important;
  }
}

[dir="rtl"] .mega-col ul li a {
  flex-direction: row-reverse;
  justify-content: flex-start;
}

[dir="rtl"] .mega-col ul li a i {
  margin-left: 12px;
  margin-right: 0;
}

/* FAB position in RTL */
[dir="rtl"] .lang-fab-top-right {
  right: auto;
  left: 20px;
  align-items: flex-start;
}

@media (max-width: 991px) {
  [dir="rtl"] .lang-fab-top-right {
    right: auto;
    left: 25px;
  }
}

/* 19. LUXURY CURSOR ------------------------------------------- */
.luxury-cursor {
  width: 20px;
  height: 20px;
  border: 2px solid var(--accent-color);
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 10000;
  transition: transform 0.1s ease-out, width 0.3s, height 0.3s, border-color 0.3s;
  transform: translate(-50%, -50%);
}

.luxury-cursor.expand {
  width: 40px;
  height: 40px;
  background: rgba(175, 151, 106, 0.15);
  border-color: #fff;
}

/* Cursor restored — custom cursor (.luxury-cursor) handles desktop UX */

/* Disable custom cursor and scroll-top on mobile */
@media (max-width: 991px) {
  .luxury-cursor {
    display: none !important;
  }
  .scroll-top {
    display: none !important; /* Hide as requested to avoid language button interference */
  }
  a:hover, button:hover, .btn:hover {
    cursor: auto !important;
  }
}

/* 18. TRIPLE FLOATING ISLAND — DISABLED -------------------------
   Reason: main.css provides a proper sidebar + FAB toggle system.
   The Triple Island was conflicting with the sidebar navigation,
   causing duplicate nav triggers and z-index fighting.
   The sidebar system (main.js + main.css) is the canonical mobile nav.
   ---------------------------------------------------------------- */

  /* 🍎 APPLE STYLE MENU DRAWER — DISABLED -----------------------
     Reason: Conflicts with sidebar system in main.css (lines 416-830).
     The sidebar uses a dark slide-in panel with brand header, social
     links, and CTA buttons. This fullscreen glass overlay fought
     with the sidebar positioning and created duplicate nav experiences.
     The sidebar system is the canonical mobile navigation.
     -------------------------------------------------------------- */

/* 19. APPLE SQUIRCLE CARDS (GLOBAL) --------------------------- */
.card, .service-item, .program-image-card, .event-card, .material-card, .stats-item, .benefit-card, .team-member, .testimonial-item {
  border-radius: var(--apple-radius) !important;
  border: 1px solid rgba(0,0,0,0.03) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.04) !important;
  overflow: hidden;
  transition: all var(--transition-smooth) !important;
  background: #ffffff !important;
}

.card:hover, .service-item:hover, .program-image-card:hover {
  transform: translateY(-8px) scale(1.01) !important;
  box-shadow: 0 20px 40px rgba(0,0,0,0.08) !important;
}

/* 22. APPLE GLASS MOBILE MENU — DISABLED ----------------------
   Reason: Conflicts with sidebar navigation in main.css.
   See sections 18 above for full rationale.
   -------------------------------------------------------------- */

/* 23. iOS STYLE BOTTOM SHEET (GLOBAL MODAL) ------------------- */
.swal2-popup {
  border-radius: 20px 20px 0 0 !important; /* Bottom sheet radius */
}

@media (max-width: 767px) {
  .swal2-container.swal2-bottom {
    align-items: flex-end !important;
  }
  .swal2-popup {
    margin: 0 !important;
    width: 100% !important;
    animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
}

/* 24. LUXURY CHATBOT (MINDEA AI) ----------------------------- */

.chatbot-button {
  position: fixed;
  bottom: 30px;
  left: 30px;
  right: auto;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 9999;

  opacity: 0;
  transform: scale(0.8) translateY(20px);
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.chatbot-button.show {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

.chatbot-button img {
  height: 85px;
  width: auto;
  filter: drop-shadow(0 8px 15px rgba(0,0,0,0.2));
  animation: robotBreath 4s ease-in-out infinite;
  transition: transform 0.3s var(--transition-smooth);
}

.chatbot-button:hover img {
  transform: scale(1.1) rotate(5deg);
}

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

.chatbot-window {
  position: fixed;
  bottom: 110px;
  left: 30px;
  width: 360px;
  height: 520px;
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(40px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
  border-radius: 24px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  display: none;
  flex-direction: column;
  z-index: 9999;
  overflow: hidden;
  animation: slideInUp 0.5s var(--transition-smooth);
}

.chatbot-header {
  background: linear-gradient(135deg, #af976a, #8e7a56) !important;
  padding: 18px 20px !important;
  color: white !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between;
}

.robot-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.status-indicator {
  width: 8px;
  height: 8px;
  background: #4ade80;
  border-radius: 50%;
  box-shadow: 0 0 8px #4ade80;
}

.chatbot-body {
  flex: 1;
  padding: 20px !important;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-behavior: smooth;
}

.chatbot-message {
  max-width: 85% !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  position: relative;
  animation: messagePop 0.3s ease-out forwards;
}

@keyframes messagePop {
  from { opacity: 0; transform: translateY(10px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.chatbot-message.bot {
  background: rgba(255, 255, 255, 0.6) !important;
  color: #1d1d1f !important;
  align-self: flex-start !important;
  border-radius: 18px 18px 18px 4px !important;
  border: 1px solid rgba(0,0,0,0.03);
  box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}

.chatbot-message.user {
  background: #af976a !important;
  color: white !important;
  align-self: flex-end !important;
  border-radius: 18px 18px 4px 18px !important;
  box-shadow: 0 4px 12px rgba(175, 151, 106, 0.2);
}

.chatbot-input {
  padding: 15px 20px !important;
  background: rgba(255, 255, 255, 0.5) !important;
  border-top: 1px solid rgba(0,0,0,0.05) !important;
  display: flex !important;
  gap: 10px;
}

.chatbot-input input {
  flex: 1;
  background: white !important;
  border: 1px solid rgba(0,0,0,0.05) !important;
  border-radius: 12px !important;
  padding: 10px 15px !important;
  font-size: 14px !important;
  color: #1d1d1f !important;
  outline: none;
  transition: border 0.3s;
}

.chatbot-input button {
  background: #af976a !important;
  color: white !important;
  border: none !important;
  padding: 0 20px !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: all 0.3s;
}

.whatsapp-option {
  padding: 12px !important;
  background: rgba(37, 211, 102, 0.1) !important;
  text-align: center;
  border-top: 1px solid rgba(37, 211, 102, 0.1);
}

.whatsapp-option a {
  color: #25d366 !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Chat Quick Reply Pills */
.btn-chat-pill {
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(175, 151, 106, 0.3);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: #8e7a56;
  cursor: pointer;
  transition: all 0.3s var(--transition-smooth);
}

.btn-chat-pill:hover {
  background: #af976a;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(175, 151, 106, 0.2);
}

/* --- MINDEA'S FABRIC RUSH GAME --- */
#gameOverlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(20px);
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  color: white;
  font-family: 'Poppins', sans-serif;
}

#gameCanvas {
  background: linear-gradient(180deg, rgba(175, 151, 106, 0.1) 0%, rgba(29, 29, 31, 1) 100%);
  border: 4px solid rgba(175, 151, 106, 0.5);
  border-radius: 20px;
  max-width: 95vw;
  max-height: 80vh;
  box-shadow: 0 0 50px rgba(175, 151, 106, 0.3);
  cursor: none;
}

.game-ui {
  position: absolute;
  top: 30px; left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.game-score {
  font-size: 42px;
  font-weight: 800;
  color: #af976a;
  text-shadow: 0 0 15px rgba(175, 151, 106, 0.5);
}

.game-start-screen, .game-over-screen {
  text-align: center;
  padding: 40px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 30px;
  max-width: 400px;
}

.game-title {
  font-size: 28px;
  font-weight: 900;
  margin-bottom: 10px;
  background: linear-gradient(90deg, #fff 0%, #af976a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.btn-game {
  background: #af976a;
  color: white;
  border: none;
  padding: 12px 30px;
  border-radius: 50px;
  font-weight: 700;
  margin-top: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.btn-game:hover {
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(175, 151, 106, 0.5);
}

/* Animations for Game Items */
@keyframes coinSparkle {
  0% { filter: brightness(1); }
  50% { filter: brightness(1.5); }
  100% { filter: brightness(1); }
}

@keyframes cardSlide {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

.card-thumb {
  width: 50px;
  height: 50px;
  background: #af976a;
  color: white;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.card-main {
  flex: 1;
}

.card-name {
  font-weight: 700;
  font-size: 14px;
  color: #1d1d1f;
}

.card-price {
  font-size: 12px;
  color: #8e7a56;
  margin-bottom: 8px;
}

.btn-card-action {
  background: #1d1d1f;
  color: white;
  border: none;
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s;
}

.btn-card-action:hover {
  background: #af976a;
}

/* 25. STICKY MOBILE CTA BAR ------------------------------------ */
.mobile-cta-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  z-index: 9990;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
}

.mobile-cta-bar.visible {
  transform: translateY(0);
}

.mobile-cta-bar a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 0;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.2s ease;
}

.mobile-cta-bar .cta-wa {
  background: #25D366;
  color: #fff;
}

.mobile-cta-bar .cta-wa:hover {
  background: #1fad55;
}

.mobile-cta-bar .cta-book {
  background: var(--gold-primary, #af976a);
  color: #fff;
}

.mobile-cta-bar .cta-book:hover {
  background: var(--gold-dark, #8a7850);
}

/* Hide when chatbot is visible */
.mobile-cta-bar .cta-wa i,
.mobile-cta-bar .cta-book i {
  font-size: 1.1rem;
}

/* ================================================================
   NOTCHED FAB DOCK — Premium Floating Bottom Navigation
   Pill bar + Elevated center FAB + Liquid blob expansion
   Adapted for Deatextile Gold Branding
   ================================================================ */

/* --- Root Container --- */
.fab-dock {
  position: fixed;
  /* Enhanced safe area for Safari & Chrome bottom address bars */
  bottom: calc(18px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%) translateY(120px);
  width: auto;
  min-width: 280px;
  max-width: 92vw;
  z-index: 9995; /* Elevated for modal interaction safety */
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none; /* children get pointer-events */
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
  opacity: 0;
  visibility: hidden;
}

/* Visibility triggers via JS handleSmartNavdock */
.fab-dock.dock-active,
.fab-dock.visible.dock-active {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  visibility: visible;
}


.fab-dock > * {
  pointer-events: auto;
}

/* --- The Pill Bar (contains left/right icons + notch) --- */
.fab-dock-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  height: 56px;
  padding: 0 6px;
  background: linear-gradient(135deg,
    rgba(175, 151, 106, 0.75) 0%,
    rgba(203, 174, 120, 0.6) 100%
  );
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: none;
  position: relative;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  min-width: 220px;
}



/* Glassmorphism on scroll */
.fab-dock.scrolled-glass .fab-dock-bar {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  border: 1px solid rgba(175, 151, 106, 0.35);
  box-shadow: none;
}

/* --- Notch (center cutout shape) --- */
.fab-dock-notch {
  width: 68px;
  height: 56px;
  flex-shrink: 0;
  position: relative;
}

/* --- Left / Right dock icons --- */
.fab-dock-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 22px;
  text-decoration: none;
  border-radius: 14px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-tap-highlight-color: transparent;
  position: relative;
}

.fab-dock-item:hover,
.fab-dock-item:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
}

.fab-dock-item:active {
  transform: scale(0.88);
}

/* Active page indicator (dot) */
.fab-dock-item.active::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
}

/* Tooltip label */
.fab-dock-item::before {
  content: attr(data-label);
  position: absolute;
  top: -34px;
  left: 50%;
  transform: translateX(-50%) scale(0.85);
  background: rgba(20, 20, 20, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 7px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all 0.15s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.fab-dock-item:hover::before {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* ================================================================
   CENTER FAB BUTTON — Elevated "+" with glow
   ================================================================ */

.fab-dock-center {
  position: absolute;
  bottom: 22px; /* elevated above bar */
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.35);
  background: linear-gradient(135deg, #cbae78 0%, #e8c98a 50%, #af976a 100%);
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  box-shadow:
    0 4px 20px rgba(203, 174, 120, 0.55),
    0 0 40px rgba(203, 174, 120, 0.2);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.fab-dock-center:hover {
  transform: translateX(-50%) scale(1.08);
  box-shadow:
    0 6px 28px rgba(203, 174, 120, 0.65),
    0 0 50px rgba(203, 174, 120, 0.3);
}

.fab-dock-center:active {
  transform: translateX(-50%) scale(0.92);
}

/* Glow ring behind center button */
.fab-center-glow {
  position: absolute;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(203, 174, 120, 0.4) 0%,
    rgba(203, 174, 120, 0) 70%
  );
  z-index: -1;
  animation: fabGlowPulse 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes fabGlowPulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.3); opacity: 1; }
}

/* Icon rotation on expand */
.fab-center-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.fab-dock.fab-expanded .fab-center-icon {
  transform: rotate(45deg);
}

/* Expanded state: darken button + kill glow */
.fab-dock.fab-expanded .fab-dock-center {
  background: linear-gradient(135deg, #3a3026 0%, #5a4a38 100%);
  border-color: rgba(175, 151, 106, 0.5);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.3),
    0 0 15px rgba(175, 151, 106, 0.15);
}

.fab-dock.fab-expanded .fab-center-glow {
  animation: none;
  opacity: 0;
}

/* ================================================================
   EXPAND MENU — 3 Bubble Actions with Liquid Blob Animation
   ================================================================ */

.fab-expand-menu {
  position: absolute;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 16px;
  pointer-events: none;
  z-index: 5;
}

/* Individual bubble */
.fab-expand-item {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
  text-decoration: none;
  opacity: 0;
  transform: scale(0.3) translateY(40px);
  pointer-events: none;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.2),
    0 0 30px rgba(203, 174, 120, 0.25);
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

/* Bubble colors — Deatextile Gold variants */
.fab-exp-chat {
  background: linear-gradient(135deg, #25D366 0%, #1EB954 100%);
  box-shadow:
    0 4px 16px rgba(37, 211, 102, 0.4),
    0 0 30px rgba(37, 211, 102, 0.15);
}

.fab-exp-booking {
  background: linear-gradient(135deg, #cbae78 0%, #e8c98a 100%);
  box-shadow:
    0 4px 16px rgba(203, 174, 120, 0.5),
    0 0 30px rgba(203, 174, 120, 0.2);
}

.fab-exp-program {
  background: linear-gradient(135deg, #af976a 0%, #8a7850 100%);
  box-shadow:
    0 4px 16px rgba(175, 151, 106, 0.5),
    0 0 30px rgba(175, 151, 106, 0.2);
}

/* Expanded state: reveal bubbles with staggered spring animation */
.fab-dock.fab-expanded .fab-expand-menu {
  pointer-events: auto;
}

.fab-dock.fab-expanded .fab-expand-item {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

/* Staggered entrance: arc positioning */
.fab-dock.fab-expanded .fab-expand-item:nth-child(1) {
  transition-delay: 0.05s;
  transform: scale(1) translate(-28px, -8px);
}

.fab-dock.fab-expanded .fab-expand-item:nth-child(2) {
  transition-delay: 0.12s;
  transform: scale(1.1) translateY(-20px);
}

.fab-dock.fab-expanded .fab-expand-item:nth-child(3) {
  transition-delay: 0.18s;
  transform: scale(1) translate(28px, -8px);
}

/* Hover: scale up */
.fab-expand-item:hover {
  transform: scale(1.18) !important;
  filter: brightness(1.15);
}

.fab-expand-item:active {
  transform: scale(0.9) !important;
  animation: fabBubbleBounce 0.3s ease;
}

@keyframes fabBubbleBounce {
  0% { transform: scale(1); }
  40% { transform: scale(0.82); }
  60% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* Tooltip label on expand items */
.fab-expand-item::before {
  content: attr(data-label);
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%) scale(0.85);
  background: rgba(20, 20, 20, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.fab-dock.fab-expanded .fab-expand-item::before {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* ================================================================
   BLOB BACKGROUND — Liquid morph effect behind expanded items
   ================================================================ */

.fab-blob-bg {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 180px;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.fab-blob-bg svg {
  width: 100%;
  height: 100%;
  color: rgba(203, 174, 120, 0.12);
}

.fab-dock.fab-expanded .fab-blob-bg {
  opacity: 1;
  animation: blobMorph 4s ease-in-out infinite;
}

@keyframes blobMorph {
  0% { transform: translateX(-50%) scale(1) rotate(0deg); }
  33% { transform: translateX(-50%) scale(1.05) rotate(2deg); }
  66% { transform: translateX(-50%) scale(0.98) rotate(-1deg); }
  100% { transform: translateX(-50%) scale(1) rotate(0deg); }
}



/* ================================================================
   RESPONSIVE & SAFETY
   ================================================================ */

/* Hide on desktop */
@media (min-width: 992px) {
  .fab-dock {
    display: none !important;
  }
}

/* Hide dock when modal is open */
body.modal-open .fab-dock {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(120px);
}

/* Anti-Zoom Fix for iOS Safari & Modern Browsers */
@media (max-width: 991px) {
  .form-control, .form-select, input, textarea, select {
    font-size: 16px !important; /* Forces Safari to stay put instead of zooming in on focus */
  }
}

/* Global Mobile Section Padding (Protects content from floating logo) */
@media (max-width: 991px) {
  main > section:first-of-type, 
  main > div[id]:first-of-type,
  .first-section-mobile {
    padding-top: 105px !important;
  }
}

/* Adjust floating elements above dock (Premium Hierarchy) */
@media (max-width: 991px) {
  .chatbot-button {
    bottom: 110px !important; /* Floating above the navdock (scrolled-glass state) */
    left: 18px !important;
    right: auto !important;
    z-index: 9995 !important;
  }



  .mobile-cta-bar {
    display: none !important;
  }

  .lang-fab-top-right {
    bottom: 115px !important;
    left: 20px !important; /* Move to left to balance the chatbot pill on the right */
    right: auto !important;
    top: auto !important; 
    z-index: 1000 !important;
  }

  /* Responsive Typography scaling for smaller phones */
  .display-5, .hero-title { font-size: clamp(1.8rem, 8vw, 2.5rem) !important; }
  .display-6 { font-size: clamp(1.5rem, 6vw, 2.1rem) !important; }
}


/* iPhone & Modern Android safe area */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .fab-dock {
    /* Slightly more breathing room for Safari bottom bar */
    bottom: calc(18px + env(safe-area-inset-bottom));
  }
}


/* Dark mode variant */
@media (prefers-color-scheme: dark) {
  .fab-dock-bar {
    background: linear-gradient(135deg, rgba(203, 174, 120, 0.8) 0%, rgba(175, 151, 106, 0.7) 100%);
  }
  .fab-dock.scrolled-glass .fab-dock-bar {
    background: rgba(50, 50, 50, 0.4);
    border-color: rgba(255, 255, 255, 0.12);
  }
  .fab-dock-item.active::after {
    background: rgba(255, 255, 255, 0.5);
  }
}

/* 26. REUSABLE PAGE HERO (inner pages) ----------------------------- */
.dea-page-hero {
  position: relative;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 120px 0 50px;
  overflow: hidden;
}

.dea-page-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(20, 18, 15, 0.85) 0%,
    rgba(30, 27, 22, 0.75) 60%,
    rgba(20, 18, 15, 0.9) 100%
  );
  z-index: 1;
}

.dea-page-hero-title {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: 3px;
  margin-bottom: 16px;
  text-transform: uppercase;
}

.dea-page-hero-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-primary, #af976a), var(--gold-light, #cbae78));
  margin: 16px auto 0;
  border-radius: 2px;
}

.dea-page-hero .breadcrumb {
  background: transparent;
  padding: 0;
}

.dea-page-hero .breadcrumb-item a {
  color: var(--gold-light, #cbae78);
  text-decoration: none;
  font-size: 0.85rem;
  transition: color 0.2s ease;
}

.dea-page-hero .breadcrumb-item a:hover {
  color: #fff;
}

.dea-page-hero .breadcrumb-item.active {
  color: rgba(255,255,255,0.6);
  font-size: 0.85rem;
}

.dea-page-hero .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255,255,255,0.3);
}

@media (max-width: 768px) {
  .dea-page-hero {
    min-height: 220px;
    padding: 100px 0 40px;
  }
}

/* ================================================================
   27. FLOATING WHATSAPP BUTTON (Global)
   ================================================================ */
.wa-float {
  position: fixed;
  bottom: 28px;
  left: 28px;
  width: 56px;
  height: 56px;
  background: #25D366;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  z-index: 9995;
  text-decoration: none;
  box-shadow:
    0 4px 15px rgba(37, 211, 102, 0.4),
    0 2px 6px rgba(0, 0, 0, 0.15);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  animation: wa-pulse 3s infinite;
}

.wa-float:hover {
  transform: scale(1.12) translateY(-3px);
  box-shadow:
    0 8px 25px rgba(37, 211, 102, 0.5),
    0 4px 10px rgba(0, 0, 0, 0.2);
  color: #fff;
}

.wa-float:active {
  transform: scale(0.95);
}

/* Tooltip label */
.wa-float::after {
  content: 'Chat Kami';
  position: absolute;
  left: 68px;
  top: 50%;
  transform: translateY(-50%) scale(0.9);
  background: #333;
  color: #fff;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s ease;
}

.wa-float:hover::after {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

@keyframes wa-pulse {
  0% { box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4), 0 0 0 0 rgba(37, 211, 102, 0.35); }
  70% { box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4), 0 0 0 12px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4), 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* Mobile positioning */
@media (max-width: 991px) {
  .wa-float {
    bottom: 80px; /* Above mobile CTA bar */
    left: 20px;
    width: 50px;
    height: 50px;
    font-size: 22px;
  }
  .wa-float::after {
    display: none;
  }
}

/* ================================================================
   28. SKIP-TO-CONTENT (Accessibility)
   ================================================================ */
.skip-link {
  position: fixed;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold-primary, #af976a);
  color: #fff;
  padding: 12px 24px;
  border-radius: 0 0 12px 12px;
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
  z-index: 99999;
  transition: top 0.3s ease;
}

.skip-link:focus {
  top: 0;
  color: #fff;
}

/* ================================================================
   29. PUBLICATION LOGOS — Grayscale → Color on Hover
   ================================================================ */
.publication-logo {
  filter: grayscale(100%) opacity(0.5);
  transition: all 0.4s ease;
  max-height: 50px;
  object-fit: contain;
}

.publication-logo:hover {
  filter: grayscale(0%) opacity(1);
  transform: scale(1.08);
}

/* ================================================================
   30. QUOTE BLOCK — Premium Styling
   ================================================================ */
.fst-italic[data-i18n="about.quote"],
blockquote.premium-quote {
  position: relative;
  padding: 20px 24px 20px 28px;
  margin: 24px 0;
  background: linear-gradient(135deg, rgba(175, 151, 106, 0.06) 0%, rgba(203, 174, 120, 0.04) 100%);
  border-left: 4px solid var(--gold-primary, #af976a);
  border-radius: 0 12px 12px 0;
  font-style: italic;
  color: #555;
  font-size: 1.05rem;
  line-height: 1.7;
}

.fst-italic[data-i18n="about.quote"]::before,
blockquote.premium-quote::before {
  content: '"';
  position: absolute;
  top: -5px;
  left: 12px;
  font-size: 3rem;
  color: var(--gold-primary, #af976a);
  opacity: 0.2;
  font-family: Georgia, serif;
  line-height: 1;
}

/* ================================================================
   31. STATS SECTION — Mobile 2×2 Grid
   ================================================================ */
@media (max-width: 576px) {
  #travel-hero + section .row .col-lg-3,
  .stats-item-row .col-lg-3 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .stats-item {
    padding: 0.5rem !important;
  }

  .stats-item i {
    font-size: 2rem !important;
    margin-right: 8px !important;
  }

  .stats-item .purecounter {
    font-size: 1.4rem !important;
  }

  .stats-item p {
    font-size: 0.85rem !important;
  }
}

/* ================================================================/* 35. SECTION PADDING — Reduced for Breathing Room */
@media (max-width: 768px) {
  section, .section {
    padding: 60px 0 !important;
  }
}

/* 36. STATS SECTION REFINEMENT (Desktop & Mobile) */
.stats-item {
  background: #ffffff;
  transition: all 0.3s ease;
  display: flex !important;
  align-items: center !important;
  border-radius: 12px;
}

.stats-item i {
  font-size: 3rem;
  margin-right: 15px;
}

.stats-item span {
  font-weight: 700;
  font-size: 2rem;
  display: block;
}

.stats-item p {
  margin: 0;
  font-weight: 600;
  color: #666;
}

/* Bento Theme Colors */
.stats-item-blue { background: #f0f7ff !important; border: 1px solid #d0e7ff !important; }
.stats-item-orange { background: #fff7ed !important; border: 1px solid #ffedd5 !important; }
.stats-item-green { background: #f0fdf4 !important; border: 1px solid #dcfce7 !important; }
.stats-item-pink { background: #fdf2f8 !important; border: 1px solid #fce7f3 !important; }

@media (max-width: 768px) {
  /* REDUCE SCROLL FATIGUE: Stats 2x2 Grid Formations */
  #stats .row.gy-4 {
    display: flex !important;
    flex-wrap: wrap !important;
    padding: 0 12px !important;
    margin: 0 !important;
    gap: 0 !important; /* Controlled via child padding */
  }
  
  #stats .col-lg-3.col-md-6 {
    width: 50% !important;
    padding: 6px !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }

  .stats-item {
    padding: 12px 8px !important;
    display: flex !important;
    flex-direction: column !important;
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 16px !important;
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    min-height: 110px !important;
    height: auto !important;
    overflow: hidden !important;
    background: #ffffff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.06) !important;
  }

  .stats-item > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .stats-item i {
    margin: 0 0 8px 0 !important;
    font-size: 1.6rem !important;
    opacity: 0.9;
    flex-shrink: 0 !important;
    display: block !important;
  }
  
  .stats-item span {
    font-size: 1.35rem !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
    display: block !important;
    margin: 0 !important;
    color: #BBA06B; /* Theme Gold */
  }
  
  .stats-item p {
    font-size: 0.65rem !important;
    line-height: 1.2 !important;
    margin: 4px 0 0 0 !important;
    font-weight: 700 !important;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    max-width: 95%;
    color: #666;
  }
}

/* 37. MOBILE COMPACTION: Footer Accordion & Marquee */
@media (max-width: 991px) {
  .footer-links h6 {
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
    margin-bottom: 0 !important;
  }
  
  .footer-links .collapse:not(.show) {
    display: none !important;
  }
}

/* Marquee Style for Publications */
.marquee-slider .swiper-wrapper {
  transition-timing-function: linear !important;
}

/* Ensure footer links are ALWAYS visible on desktop regardless of collapse state */
@media (min-width: 992px) {
  .footer-links .collapse {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
  }
  .footer-links h6 i {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .publication-logo {
    max-height: 40px !important;
    filter: brightness(0.8);
    opacity: 0.7;
    transition: opacity 0.3s ease;
  }
}

/* ================================================================
   32. HERO SECTION — Mobile Optimization
   ================================================================ */
@media (max-width: 768px) {
  /* Hide membership slider on small screens */
  .membership-cards-container {
    display: none !important;
  }

  /* Tighter hero padding */
  .travel-hero {
    padding: 90px 0 10px 0 !important;
    min-height: auto !important;
  }

  /* Hero text center aligned */
  .travel-hero .hero-text {
    text-align: center;
  }

  .travel-hero .hero-title {
    font-size: 1.8rem !important;
    margin-bottom: 0.6rem;
  }

  .travel-hero .hero-subtitle {
    font-size: 0.9rem !important;
    line-height: 1.6;
  }

  .travel-hero .hero-subtitle br {
    display: none; /* Let text flow naturally on mobile */
  }

  /* Stacked CTA buttons */
  .travel-hero .hero-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
  }

  .travel-hero .hero-buttons .btn {
    width: 100%;
    max-width: 280px;
    margin: 0 !important;
  }
}

/* ================================================================
   33. TESTIMONIAL CARDS — Enhanced
   ================================================================ */
.testimonial-item .testimonial-img {
  width: 72px !important;
  height: 72px !important;
  border: 3px solid var(--gold-primary, #af976a);
}

.testimonial-item h3 {
  position: relative;
}

/* Star rating under testimonial name */
.testimonial-item h4::after {
  content: '★★★★★';
  display: block;
  color: #f0b429;
  font-size: 0.75rem;
  letter-spacing: 2px;
  margin-top: 4px;
  font-style: normal;
}

/* ================================================================
   34. SCROLL-TO-TOP — Larger & More Visible
   ================================================================ */
.scroll-top {
  width: 48px !important;
  height: 48px !important;
  font-size: 22px !important;
  background: var(--gold-primary, #af976a) !important;
  color: #fff !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 15px rgba(175, 151, 106, 0.3) !important;
  transition: all 0.3s ease !important;
}

.scroll-top:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(175, 151, 106, 0.4) !important;
}

/* ============================================
   MOBILE RESPONSIVE POLISH (Scroll-Saving Edition)
 ============================================ */
@media (max-width: 768px) {
  /* HORIZONTAL SCROLLER FOR EDUCATION PACKAGES */
  .school-package-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    padding: 20px 10px 40px !important;
    margin: 0 -15px !important;
    gap: 15px !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }

  .school-package-row::-webkit-scrollbar {
    display: none;
  }

  .school-package-row > div {
    flex: 0 0 82% !important; /* Shows a peek of the next card */
    max-width: 82% !important;
  }

  .package-card-modern {
    box-shadow: 0 10px 25px rgba(0,0,0,0.08) !important;
  }

  .section-title h2 {
    padding: 10px 24px !important;
    font-size: 11px !important;
    letter-spacing: 2px !important;
    margin-top: 20px !important;
  }

  .section-title {
    padding-bottom: 25px !important;
  }

  .section-title div {
    font-size: 1.75rem !important;
    line-height: 1.2 !important;
    margin-top: 15px !important;
  }
}

/* ================================================================
   36. FOOTER — Accordion Style on Mobile
   ================================================================ */
@media (max-width: 576px) {
  .footer-top .col-lg-2,
  .footer-top .col-md-3 {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 16px;
    margin-bottom: 16px;
  }

  .footer-top h6 {
    font-size: 0.85rem;
    letter-spacing: 1px;
  }

  .footer-top .list-unstyled li {
    padding: 4px 0;
  }
}

/* ================================================================
   37. ABOUT SECTION — Value Points Enhanced
   ================================================================ */
.list-unstyled .bi-check-circle-fill {
  color: var(--gold-primary, #af976a) !important;
  filter: drop-shadow(0 1px 2px rgba(175, 151, 106, 0.3));
}

/* Font optimization: use &display=swap in Google Fonts URL */

/* ================================================================
   38. COMPREHENSIVE MOBILE UX PERFECTION SYSTEM
   Fixes: touch targets, floating collisions, form sizing,
          chatbot responsive, footer taps, modal bottom-sheet,
          event grid, haptic feedback, newsletter, keyboard UX.
   ================================================================ */

/* --- 38.1 Hero Form — Proper Touch Targets & Mobile UX --- */
@media (max-width: 768px) {
  .booking-form .form-control,
  .booking-form .form-control-sm {
    min-height: 48px !important;
    font-size: 16px !important; /* Prevents iOS Safari zoom on focus */
    border-radius: 10px !important;
    padding: 10px 14px !important;
  }

  .booking-form label {
    font-size: 0.85rem;
    margin-bottom: 4px;
  }

  .booking-form .btn {
    min-height: 52px !important;
    font-size: 1rem !important;
    border-radius: 12px !important;
  }

  .booking-form-wrapper {
    margin-bottom: 20px;
  }

  .booking-form {
    padding: 20px 18px !important;
  }
}

/* --- 38.2 Floating Elements — Collision Prevention --- */
@media (max-width: 991px) {


  .chatbot-button img {
    height: 65px !important;
  }

  /* Chatbot window — responsive bottom sheet */
  .chatbot-window {
    width: calc(100vw - 20px) !important;
    max-width: 400px !important;
    height: 65vh !important;
    max-height: 500px !important;
    left: 10px !important;
    right: 10px !important;
    bottom: 70px !important;
    border-radius: 20px 20px 12px 12px !important;
  }

  /* WhatsApp float — hide on mobile (CTA bar already has it) */
  .wa-float {
    display: none !important;
  }

  /* Language FAB — clear above CTA bar */
  .lang-fab-top-right {
    bottom: 75px !important;
    right: 20px !important;
  }
}

/* --- 38.3 Footer — Enhanced Mobile Tap Targets --- */
@media (max-width: 576px) {
  .footer-top .list-unstyled li {
    padding: 6px 0 !important;
  }

  .footer-top .list-unstyled li a {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;
    padding: 8px 0 !important;
    font-size: 0.9rem !important;
  }

  .footer-top .social-links a {
    width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.2rem !important;
  }
}

/* --- 38.4 Events Grid — Mobile Responsive Fix --- */
@media (max-width: 768px) {
  #homeEventsGrid {
    min-height: auto !important;
  }

  #homeEventsGrid .col-lg-6 {
    min-height: 250px;
  }

  #homeEventsGrid .col-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  .event-card {
    min-height: 200px !important;
  }

  .event-overlay {
    padding: 1.2rem !important;
  }

  .event-overlay h3,
  .event-overlay h4,
  .event-overlay h5 {
    font-size: 1rem !important;
  }
}

/* --- 38.45 Membership Cards — Center on Tablet/iPad Portrait --- */
@media (min-width: 769px) and (max-width: 1024px) {
  .membership-cards-container {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* --- 38.5 Membership Cards — Show on Mobile --- */
@media (max-width: 768px) {
  .membership-cards-container {
    display: block !important;
    margin-top: 16px !important;
  }

  .membership-swiper {
    max-width: 300px !important;
    margin: 0 auto !important;
  }

  .membership-swiper .beam-card img {
    max-height: 200px !important;
    object-fit: contain !important;
  }
}

/* --- 38.6 Mobile CTA Bar — Enhanced with Labels --- */
@media (max-width: 991px) {
  .mobile-cta-bar a {
    min-height: 52px !important;
    font-size: 0.85rem !important;
    gap: 6px !important;
  }

  .mobile-cta-bar a i {
    font-size: 1.2rem !important;
  }
}

/* --- 38.7 General Mobile Text Readability --- */
@media (max-width: 576px) {
  /* 16px+ on all inputs to prevent iOS zoom */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* Better hero subtitle readability */
  .travel-hero .hero-subtitle {
    font-size: 1rem !important;
    line-height: 1.7 !important;
  }

  /* Section titles — mobile proportion */
  .display-5 {
    font-size: 1.6rem !important;
  }

  .display-6 {
    font-size: 1.4rem !important;
  }

  /* Benefit boxes — better mobile spacing */
  .benefit-box {
    padding: 20px 16px !important;
    margin-bottom: 8px;
  }
}

/* --- 38.8 Keyboard Focus — Scroll Margin for Mobile --- */
@media (max-width: 768px) {
  input:focus, textarea:focus, select:focus {
    scroll-margin-bottom: 200px;
    scroll-margin-top: 100px;
  }
}

/* --- 38.9 Haptic-Style Tap Feedback (Mobile) --- */
@media (max-width: 991px) {
  .btn:active,
  .btn-getstarted:active,
  .btn-primary:active,
  .btn-outline:active,
  .location-card:active,
  .event-card:active,
  .btn-chat-pill:active {
    transform: scale(0.97) !important;
    transition: transform 0.1s ease !important;
  }
}

/* --- 38.10 DEA THE RENT Section — Mobile Optimized --- */
@media (max-width: 768px) {
  #call-to-action {
    padding: 3rem 0 !important;
  }

  #call-to-action .display-3 {
    font-size: 2rem !important;
  }

  #call-to-action .lead {
    font-size: 0.95rem !important;
  }

  .btn-premium,
  .btn-outline-premium {
    width: 100% !important;
    justify-content: center !important;
    min-height: 48px !important;
    font-size: 0.9rem !important;
  }

  .mobile-mt-adj {
    margin-top: 1.5rem !important;
  }
}

/* --- 38.11 Newsletter Form — Mobile Full-Width Stack --- */
@media (max-width: 576px) {
  .newsletter-form {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .newsletter-form input[type="email"] {
    min-height: 48px !important;
    font-size: 16px !important;
    border-radius: 12px !important;
    width: 100% !important;
  }

  .newsletter-form button {
    min-height: 48px !important;
    border-radius: 12px !important;
    width: 100% !important;
  }
}

/* --- 38.12 Location Cards — Better Mobile Tap & Text --- */
@media (max-width: 576px) {
  .location-card .card-body {
    padding: 16px 12px !important;
  }

  .location-card .card-body h5 {
    font-size: 1rem !important;
  }

  .location-card .card-body p {
    font-size: 0.8rem !important;
    line-height: 1.5;
  }
}

/* --- 38.13 Modal — Bottom Sheet on Mobile --- */
@media (max-width: 576px) {
  .modal-dialog {
    margin: 0 !important;
    max-width: 100% !important;
    min-height: auto !important;
    align-self: flex-end !important;
  }

  .modal.fade .modal-dialog {
    transform: translateY(100%) !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .modal.show .modal-dialog {
    transform: translateY(0) !important;
  }

  .modal-content {
    border-radius: 20px 20px 0 0 !important;
    border: none !important;
  }

  .modal-body .btn {
    min-height: 48px !important;
    flex: 1 !important;
  }
}

/* --- 38.14 Program Swiper — Mobile Touch Targets --- */
@media (max-width: 576px) {
  .program-image-card img {
    max-height: 280px !important;
    object-fit: contain !important;
  }

  .program-slide-title {
    font-size: 1rem !important;
  }

  .program-slide-desc {
    font-size: 0.85rem !important;
  }

  /* Larger swiper arrows for mobile tap */
  .swiper-button-next,
  .swiper-button-prev {
    width: 44px !important;
    height: 44px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
  }

  .swiper-button-next::after,
  .swiper-button-prev::after {
    font-size: 16px !important;
    color: var(--gold-primary, #af976a) !important;
  }
}

/* --- 38.15 Testimonial Section — Mobile Compact --- */
@media (max-width: 576px) {
  .testimonial-item {
    padding: 20px 16px !important;
  }

  .testimonial-item p {
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
  }

  .testimonial-item .testimonial-img {
    width: 56px !important;
    height: 56px !important;
  }
}

/* --- 38.16 Publication Logos — Correct Mobile Size --- */
@media (max-width: 576px) {
  .publication-logo {
    max-height: 40px !important;
    min-height: 30px !important;
  }
}

/* --- 38.17 Stats Section — Color Consistency with Brand --- */
.stats-item i.color-blue,
.stats-item i.color-orange,
.stats-item i.color-green,
.stats-item i.color-pink {
  color: var(--gold-primary, #af976a) !important;
  opacity: 0.85;
}

.stats-item i.color-blue { opacity: 0.7; }
.stats-item i.color-orange { opacity: 0.8; }
.stats-item i.color-green { opacity: 0.9; }
.stats-item i.color-pink { opacity: 1; }

/* --- 38.18 Smooth Page Leave Transition Refinement --- */
body.is-leaving {
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
  pointer-events: none !important;
}

/* --- 38.19 About Section Quote — fix decorative quote overlap --- */
.fst-italic[data-i18n="about.quote"],
blockquote.premium-quote {
  padding-left: 36px !important; /* Extra space for decorative mark */
}

/* --- 38.20 Desktop Hover Cursor — Restore pointer on interactives --- */
a:hover, button:hover, .btn:hover,
.location-card:hover, .event-card:hover {
  cursor: pointer;
}