/* ============================================================
   德扑圈官方客服 - 医疗健康风 Healthcare/Wellness Theme
   Custom Styles
   ============================================================ */

/* ---- Base & Smooth Scroll ---- */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---- Selection ---- */
::selection {
    background-color: #bbf7d0;
    color: #064e3b;
}

/* ---- Navbar Scroll Shadow ---- */
#navbar.scrolled {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

/* ---- Feature Card Hover ---- */
.feature-card {
    cursor: default;
}
.feature-card:hover {
    transform: translateY(-4px);
}
.feature-card:hover .fa-solid {
    animation: iconPop 0.4s ease;
}

@keyframes iconPop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.25); }
    100% { transform: scale(1); }
}

/* ---- Stat Card Counter ---- */
.stat-card {
    position: relative;
    overflow: hidden;
}
.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #22c55e, #059669);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease;
}
.stat-card:hover::before {
    transform: scaleX(1);
}

/* ---- FAQ Accordion ---- */
.faq-item .faq-answer {
    display: none;
}
.faq-item.active .faq-answer {
    display: block;
}
.faq-item.active .faq-toggle {
    color: #22c55e;
}
.faq-item.active .faq-toggle .fa-chevron-down {
    transform: rotate(180deg);
    color: #22c55e;
}

/* ---- FAQ Answer slide-down animation ---- */
.faq-answer {
    animation: slideDown 0.35s ease forwards;
}

@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        max-height: 500px;
        transform: translateY(0);
    }
}

/* ---- Back to Top Button ---- */
#backToTop.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ---- Form Focus Glow ---- */
input:focus,
textarea:focus {
    outline: none;
}

/* ---- Counter Number Transition ---- */
.counter {
    font-variant-numeric: tabular-nums;
    transition: all 0.3s ease;
}

/* ---- Testimonial Star Shine ---- */
.fa-star {
    transition: transform 0.2s ease;
}
.bg-white.border.border-gray-100.rounded-2xl:hover .fa-star {
    transform: scale(1.1);
}

/* ---- Mobile Menu Transition ---- */
#mobileMenu {
    transition: all 0.3s ease;
}
#mobileMenu:not(.hidden) {
    animation: fadeIn 0.25s ease forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---- Section Entrance Animation ---- */
.feature-card,
.stat-card,
.bg-white.border.border-gray-100.rounded-2xl {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.feature-card.visible,
.stat-card.visible,
.bg-white.border.border-gray-100.rounded-2xl.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---- CTA Pulse Ring ---- */
@keyframes pulseRing {
    0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
    70%  { box-shadow: 0 0 0 16px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
#backToTop.visible {
    animation: pulseRing 2s infinite;
}

/* ---- Responsive Tweaks ---- */
@media (max-width: 640px) {
    .feature-card {
        padding: 1.25rem;
    }
    .stat-card {
        padding: 1.25rem;
    }
    .stat-card .counter {
        font-size: 1.75rem;
    }
}

@media (min-width: 1024px) {
    /* Stagger feature card entrance */
    .feature-card:nth-child(1) { transition-delay: 0.05s; }
    .feature-card:nth-child(2) { transition-delay: 0.10s; }
    .feature-card:nth-child(3) { transition-delay: 0.15s; }
    .feature-card:nth-child(4) { transition-delay: 0.20s; }
    .feature-card:nth-child(5) { transition-delay: 0.25s; }
    .feature-card:nth-child(6) { transition-delay: 0.30s; }
}

/* ---- Print Styles ---- */
@media print {
    #navbar,
    #backToTop,
    #mobileMenu {
        display: none !important;
    }
    body {
        padding-top: 0;
    }
}