/* =============================================
   GRADE PAGES - GLOBAL CSS
   Used by: SS 304, SS 309, SS 310, SS 317L etc.
   ============================================= */

/* WhatsApp Float Button */
.whatsapp-float {
    position: fixed;
    right: 3%;
    top: 92%;
    width: 60px;
    height: 60px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #fff;
    z-index: 999;
    box-shadow: 0 4px 15px rgba(37,211,102,0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
}
.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(37,211,102,0.6);
    color: #fff;
}

/* Scrollbar for sub-menu */
.atf-nav .sub-menu .sub-menu {
    max-height: 300px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #028bc5 #f0f0f0;
}
.atf-nav .sub-menu .sub-menu::-webkit-scrollbar { width: 5px; }
.atf-nav .sub-menu .sub-menu::-webkit-scrollbar-thumb { background: #028bc5; border-radius: 5px; }
.atf-nav .sub-menu .sub-menu::-webkit-scrollbar-track { background: #f0f0f0; }

/* Scroll Animations */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-up.visible { opacity: 1; transform: translateY(0); }

.fade-right {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-right.visible { opacity: 1; transform: translateX(0); }

.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }

/* Hover Card - Advantages */
.hover-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    cursor: default;
}
.hover-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 12px 30px rgba(2, 139, 197, 0.2) !important;
}

/* Hover Table Box */
.hover-table {
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.hover-table:hover {
    box-shadow: 0 8px 25px rgba(2, 139, 197, 0.18) !important;
    transform: translateY(-3px);
}

/* Hover Application Cards */
.hover-app {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-left-color 0.3s ease !important;
}
.hover-app:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 8px 20px rgba(2, 139, 197, 0.18) !important;
    border-left-color: #01658a !important;
    background: #eef7fc !important;
}
.hover-app:hover i {
    transform: scale(1.2);
    transition: transform 0.3s ease;
}

/* Hover Sidebar Widgets */
.hover-sidebar {
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.hover-sidebar:hover {
    box-shadow: 0 10px 30px rgba(2, 139, 197, 0.2) !important;
    transform: translateY(-3px);
}

/* Quick Specification Table */
.quick-spec-table { width: 100%; border-collapse: collapse; }
.quick-spec-table td.label {
    padding: 10px 14px;
    background: #e8f4fb;
    font-weight: 700;
    font-size: 13px;
    width: 48%;
    border-bottom: 1px solid #d0e8f5;
    color: #028bc5;
}
.quick-spec-table td.value {
    padding: 10px 14px;
    font-size: 13px;
    border-bottom: 1px solid #e8f4fb;
    background: #fff;
    color: #333;
}
.quick-spec-table tr:last-child td { border-bottom: none; }

/* Sticky Sidebar */
.grade-sticky-sidebar { position: sticky; top: 120px; }

/* FAQ Accordion Theme */
.grade-faq .accordion-button.active-q {
    background: #028bc5;
    color: #fff;
}
.grade-faq .accordion-button.collapsed-q {
    background: #f0f9ff;
    color: #028bc5;
}
.grade-faq .accordion-body {
    border-left: 4px solid #028bc5;
}