/* ===== LetsKal — Learning starts here · custom styles ===== */

html { scroll-behavior: smooth; }
body { font-feature-settings: "ss01", "cv11"; }

/* Subtle hero blob background */
.hero-blob {
  background:
    radial-gradient(60% 60% at 80% 20%, rgba(255, 122, 162, 0.30) 0%, transparent 60%),
    radial-gradient(50% 50% at 10% 80%, rgba(113, 82, 245, 0.30) 0%, transparent 60%),
    radial-gradient(70% 50% at 50% 100%, rgba(132, 200, 255, 0.25) 0%, transparent 60%);
}

/* Soft card hover */
.tutor-card { transition: transform .25s ease, box-shadow .25s ease; }
.tutor-card:hover { transform: translateY(-4px); box-shadow: 0 20px 50px -20px rgba(81, 55, 200, 0.30); }

/* Avatar gradient ring */
.avatar-ring {
  background: conic-gradient(from 180deg at 50% 50%, #7152F5, #FF7AA2, #FFC56B, #7152F5);
  padding: 3px;
  border-radius: 9999px;
}
.avatar-ring > img,
.avatar-ring > div { border-radius: 9999px; background: white; padding: 2px; }

/* Star color */
.star { color: #F5A623; }

/* Chat bubble tail */
.bubble-them { border-radius: 18px 18px 18px 4px; }
.bubble-me { border-radius: 18px 18px 4px 18px; }

/* Modal animation */
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.modal-pop { animation: pop .22s ease; }

/* Slot button states */
.slot-btn {
  border: 1px solid #E7E8F2;
  background: white;
  color: #252742;
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 600;
  font-size: 13px;
  transition: all .15s ease;
}
.slot-btn:hover { border-color: #B7A5FF; color: #5B3BE0; }
.slot-btn.active {
  background: linear-gradient(135deg, #7152F5, #A476FF);
  color: white;
  border-color: transparent;
  box-shadow: 0 8px 18px -8px rgba(113, 82, 245, .55);
}
.slot-btn.disabled {
  opacity: .4; pointer-events: none; text-decoration: line-through;
}

/* Pulse for live recording */
@keyframes pulseDot { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: .65; } }
.pulse-dot { animation: pulseDot 1.4s ease-in-out infinite; }

/* Scroll lock when modal open */
body.no-scroll { overflow: hidden; }

/* Hide scrollbars on horizontal scrollers */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Subject chip gradient backgrounds */
.subj-math   { background: linear-gradient(135deg, #FFE2EC, #FFD1E1); color: #B72A6B; }
.subj-code   { background: linear-gradient(135deg, #E6E0FF, #D6CCFF); color: #4A2EBF; }
.subj-music  { background: linear-gradient(135deg, #FFF1D6, #FFE2A8); color: #A36A00; }
.subj-lang   { background: linear-gradient(135deg, #DCF7E8, #BFEED2); color: #1F7A47; }
.subj-art    { background: linear-gradient(135deg, #FFE3D5, #FFCBB0); color: #B6441E; }
.subj-sci    { background: linear-gradient(135deg, #DDEAFF, #BFD6FF); color: #1F4FB8; }
.subj-write  { background: linear-gradient(135deg, #F2E6FF, #E1CCFF); color: #6E2FB8; }
.subj-yoga   { background: linear-gradient(135deg, #E0F7F1, #C2EEDF); color: #1B6F58; }