/* Custom styles and animations */
:root{
  --modal-bg: rgba(0,0,0,0.6);
}

/* Modal backdrop + animation */
.modal-backdrop{
  position:fixed;
  inset:0;
  background:var(--modal-bg);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:60;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}
.modal-backdrop.show{
  opacity:1;
  pointer-events:auto;
}
.modal-card{
  max-width:900px;
  width:95%;
  background:white;
  border-radius:12px;
  overflow:hidden;
  transform:translateY(12px) scale(.98);
  transition:transform .28s cubic-bezier(.2,.9,.3,1), opacity .2s ease;
  box-shadow:0 20px 50px rgba(2,6,23,.35);
}
.modal-backdrop.show .modal-card{
  transform:translateY(0) scale(1);
}

.doctor-image-large{
  height:320px;
}

/* subtle floating animation for hero content */
@keyframes floatUp {
  0% { transform: translateY(6px); }
  50% { transform: translateY(0); }
  100% { transform: translateY(6px); }
}
.hero-float{ animation: floatUp 4s ease-in-out infinite; }

/* small utility for card image zoom */
.card-img-zoom img{ transition: transform .35s ease; }
.card-img-zoom:hover img{ transform: scale(1.06); }

/* responsive tweaks for sidebar-heavy dashboards */
@media (max-width: 768px){
  aside#sidebar{ width:56px; }
  aside#sidebar .p-6{ padding:0.75rem; }
}

/* Animated mobile menu */
.mobile-menu{
  max-height:0;
  overflow:hidden;
  transition: max-height .28s ease, opacity .22s ease;
  opacity:0;
}
.mobile-menu.show{
  max-height:500px; /* enough to show items */
  opacity:1;
}
.mobile-menu a{ display:block; padding:0.5rem 0; }