/**
 * ============================================
 * BACKWARD COMPATIBILITY - Legacy Class Mapper
 * ============================================
 * Maps old Bootstrap/custom classes to new ASIIK design system
 * This file ensures old views still work with new design
 * ============================================
 */

/* ============================================
   LEGACY COLOR UTILITIES
   ============================================ */
.text-emerald { color: #2EA85E !important; }
.text-gold { color: #F5A623 !important; }
.border-warning { border-color: #F5A623 !important; }
.bg-gradient-forest { 
  background: linear-gradient(135deg, #0A1B6B 0%, #1A2D8F 100%) !important; 
}
.bg-soft-green { 
  background: linear-gradient(135deg, rgba(27, 107, 58, 0.05), rgba(46, 168, 94, 0.08)) !important; 
}

/* ============================================
   LEGACY BUTTONS
   ============================================ */
.btn-emerald {
  background: linear-gradient(135deg, #1B6B3A, #2EA85E, #4FC478) !important;
  border: none !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 15px rgba(27, 107, 58, 0.25) !important;
}
.btn-emerald:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 25px rgba(27, 107, 58, 0.4) !important;
  color: #FFFFFF !important;
}

.btn-outline-gold {
  border: 2px solid #F5A623 !important;
  color: #F5A623 !important;
  background: transparent !important;
}
.btn-outline-gold:hover {
  background-color: #F5A623 !important;
  color: #FFFFFF !important;
}

/* ============================================
   LEGACY HOVER & GLASS EFFECTS
   ============================================ */
.hover-lift {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease !important;
}
.hover-lift:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08) !important;
}

.glass-card {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(15px) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.04) !important;
}

/* ============================================
   LEGACY BADGES
   ============================================ */
.green-badge,
.badge.bg-soft-green {
  background: linear-gradient(135deg, rgba(27, 107, 58, 0.08), rgba(46, 168, 94, 0.12)) !important;
  color: #1B6B3A !important;
  border: 1px solid rgba(27, 107, 58, 0.2) !important;
}

/* ============================================
   LEGACY SECTION BACKGROUNDS
   Map old green backgrounds to ASIIK white/light backgrounds
   ============================================ */
.bg-soft-green,
section.bg-soft-green {
  background: linear-gradient(135deg, rgba(27, 107, 58, 0.03), rgba(46, 168, 94, 0.05)) !important;
}

/* ============================================
   LEGACY SWIPER COMPATIBILITY
   ============================================ */
.swiper-button-next, 
.swiper-button-prev {
  background-color: #FFFFFF !important;
  color: #1B6B3A !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
  border: 1px solid rgba(27, 107, 58, 0.2) !important;
}
.swiper-button-next::after, 
.swiper-button-prev::after {
  font-size: 1rem !important;
}
.swiper-pagination-bullet-active {
  background: #2EA85E !important;
  width: 20px !important;
  border-radius: 10px !important;
}

/* ============================================
   LEGACY SERVICE CARDS (for layanan-detail.php)
   ============================================ */
.service-card {
  background: #FFFFFF !important;
  border-radius: 20px !important;
  padding: 32px 28px !important;
  border: 1px solid #E2E8F0 !important;
  transition: all 0.3s ease !important;
}
.service-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08) !important;
}
.service-icon {
  background: linear-gradient(135deg, rgba(27, 107, 58, 0.08), rgba(46, 168, 94, 0.12)) !important;
  color: #1B6B3A !important;
}
.service-card:hover .service-icon {
  background: linear-gradient(135deg, #1B6B3A, #2EA85E, #4FC478) !important;
  color: #FFFFFF !important;
  transform: scale(1.1) rotate(5deg) !important;
}

/* ============================================
   LEGACY DOCTOR CARDS
   ============================================ */
.doctor-card {
  background: #FFFFFF !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 25px rgba(0,0,0,0.04) !important;
  border: 1px solid #E2E8F0 !important;
  overflow: hidden !important;
}
.doctor-img {
  height: 260px !important;
  width: 100% !important;
  object-fit: cover !important;
  object-position: top !important;
  border-bottom: 3px solid rgba(27, 107, 58, 0.1) !important;
}

/* ============================================
   LEGACY NEWS CARDS
   ============================================ */
.news-card {
  border: none !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 25px rgba(0,0,0,0.04) !important;
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
}
.news-card img {
  transition: transform 0.6s ease !important;
  height: 220px !important;
  object-fit: cover !important;
}
.news-card:hover img {
  transform: scale(1.08) !important;
}
.news-badge {
  position: absolute !important;
  top: 16px !important;
  left: 16px !important;
  background: #F5A623 !important;
  color: #FFFFFF !important;
  padding: 6px 16px !important;
  border-radius: 50px !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  z-index: 2 !important;
}

/* ============================================
   LEGACY ECO CARDS (Green Hospital)
   ============================================ */
.eco-card {
  background: #FFFFFF !important;
  border-radius: 20px !important;
  padding: 28px !important;
  border: 1px solid #E2E8F0 !important;
  transition: all 0.3s ease !important;
}
.eco-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08) !important;
}
.eco-card .icon-box {
  background: linear-gradient(135deg, rgba(27, 107, 58, 0.08), rgba(46, 168, 94, 0.12)) !important;
  color: #1B6B3A !important;
}

/* ============================================
   LEGACY LAYANAN UNGGULAN CARDS
   ============================================ */
.layanan-card {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 20px !important;
  padding: 30px 25px !important;
  backdrop-filter: blur(10px) !important;
}
.layanan-card:hover {
  background: rgba(255,255,255,0.12) !important;
  transform: translateY(-8px) !important;
}
.layanan-icon {
  background: linear-gradient(135deg, #1B6B3A, #2EA85E, #4FC478) !important;
  color: #FFFFFF !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 20px rgba(27, 107, 58, 0.3) !important;
}

/* ============================================
   LEGACY QUEUE CARDS
   ============================================ */
.queue-card {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 15px !important;
  padding: 24px !important;
  backdrop-filter: blur(10px) !important;
}
.queue-number {
  font-size: 3rem !important;
  font-weight: 800 !important;
  color: #F5A623 !important;
  line-height: 1 !important;
  margin: 16px 0 !important;
  font-family: 'Courier New', monospace !important;
}

/* ============================================
   LEGACY MITRA CARDS
   ============================================ */
.mitra-card {
  background: #FFFFFF !important;
  border-radius: 15px !important;
  padding: 20px !important;
  border: 1px solid #E2E8F0 !important;
  transition: all 0.3s ease !important;
}
.mitra-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08) !important;
}
.mitra-logo {
  filter: grayscale(100%) opacity(0.7) !important;
  transition: all 0.3s ease !important;
}
.mitra-card:hover .mitra-logo {
  filter: grayscale(0%) opacity(1) !important;
}

/* ============================================
   LEGACY LIVE QUEUE SECTION BACKGROUNDS
   ============================================ */
.live-queue-section,
.layanan-unggulan-section {
  background: linear-gradient(135deg, #0A1B6B 0%, #1A2D8F 100%) !important;
  color: #FFFFFF !important;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 2.2rem !important;
  }
  .section-title {
    font-size: 2rem !important;
  }
}