/* ======================================================
   Dr. Avani Jain — Global Stylesheet
   ====================================================== */

html, body {
    height: 100%;
    margin: 0;
    box-sizing: border-box;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
}

* { scroll-behavior: smooth; }

/* ---------- Page fade-in when router injects content ---------- */
#app > * {
    animation: fadeIn 0.35s ease-out both;
}

/* ---------- Animations ---------- */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-40px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes pulse-gentle {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.05); }
}

.animate-fade-up   { animation: fadeInUp    0.8s ease-out both; }
.animate-fade-in   { animation: fadeIn      0.6s ease-out both; }
.animate-slide-left{ animation: slideInLeft 0.7s ease-out both; }

.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }

/* ---------- Hero ---------- */
.hero-overlay {
    background: linear-gradient(
        135deg,
        rgba(26, 54, 93, 0.92)  0%,
        rgba(35, 78, 138, 0.8)  50%,
        rgba(74, 144, 217, 0.6) 100%
    );
}

/* ---------- Service cards ---------- */
.service-card { transition: transform 0.3s, box-shadow 0.3s; }
.service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(26, 54, 93, 0.15);
}

/* ---------- Nav link underline ---------- */
.nav-link { position: relative; }
.nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0;
    width: 0; height: 2px;
    background: #4A90D9;
    transition: width 0.3s;
}
.nav-link:hover::after,
.nav-link.active-nav::after { width: 100%; }

/* ---------- FAQ accordion ---------- */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
}
.faq-answer.open { max-height: 500px; }

/* ---------- Floating social bar ---------- */
.social-float {
    position: fixed;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
@media (max-width: 768px) {
    .social-float {
        flex-direction: row;
        top: auto;
        bottom: 12px;
        right: 50%;
        transform: translateX(50%);
    }
}

/* ---------- Toast ---------- */
.toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    padding: 14px 28px;
    border-radius: 8px;
    z-index: 100;
    animation: fadeInUp 0.4s ease-out;
    font-family: 'DM Sans', sans-serif;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #4A90D9; border-radius: 3px; }

/* ---------- Buttons ---------- */
.btn-primary {
    background: linear-gradient(135deg, #1A365D 0%, #234E8A 100%);
    transition: all 0.3s;
}
.btn-primary:hover {
    background: linear-gradient(135deg, #234E8A 0%, #4A90D9 100%);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(26, 54, 93, 0.3);
}

/* ---------- Section divider ---------- */
.section-divider {
    width: 60px; height: 3px;
    background: linear-gradient(90deg, #1A365D, #4A90D9);
    border-radius: 2px;
}

/* ---------- Therapy Grid & Cards ---------- */
.therapy-grid {
    width: 100%;
}

.therapy-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.therapy-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 40px rgba(26, 54, 93, 0.2);
}

.therapy-card h3 {
    font-size: 15px;
    line-height: 1.4;
}

/* ---------- Modal Styling ---------- */
#therapy-1, #therapy-2, #therapy-3, #therapy-4,
#therapy-5, #therapy-6, #therapy-7, #therapy-8,
#therapy-9, #therapy-10, #therapy-11, #therapy-12,
#therapy-13, #therapy-14, #therapy-15, #therapy-16 {
    animation: fadeIn 0.3s ease-out;
}

#pet-scan-1, #pet-scan-2, #pet-scan-3, #pet-scan-4,
#pet-scan-5, #pet-scan-6, #pet-scan-7, #pet-scan-8 {
    animation: fadeIn 0.3s ease-out;
}

.hidden {
    display: none !important;
}

/* Responsive grid adjustments */
@media (max-width: 1024px) {
    .therapy-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .pet-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 640px) {
    .therapy-grid {
        grid-template-columns: repeat(1, 1fr) !important;
    }
    .pet-grid {
        grid-template-columns: repeat(1, 1fr) !important;
    }
}