/* FAQ Page Styles - Modern Redesign */
.faq-hero {
    background: #1e4b9a;
    color: white;
    padding: 60px 0 40px;
    text-align: center;
    background-image: linear-gradient(135deg, #1e4b9a 0%, #0d2f6d 100%);
    margin-bottom: 40px;
    position: relative;
    overflow: hidden;
}

.faq-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('https://www.transparenttextures.com/patterns/cubes.png');
    opacity: 0.1;
}

.faq-hero h1 {
    font-weight: 800;
    margin-bottom: 20px;
    font-size: 42px;
    position: relative;
}

.faq-hero p {
    font-size: 1.2rem;
    opacity: 0.95;
    max-width: 700px;
    margin: 0 auto 40px;
    position: relative;
    line-height: 1.6;
}

.faq-search {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
    position: relative;
}

.faq-search input {
    width: 100%;
    padding: 20px 60px 20px 30px;
    border-radius: 50px;
    border: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    font-size: 1.1rem;
    transition: transform 0.3s, box-shadow 0.3s;
}

.faq-search input:focus {
    transform: translateY(-2px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    outline: none;
}

.faq-search button {
    position: absolute;
    right: 8px;
    top: 8px;
    bottom: 8px;
    width: 55px;
    border: none;
    background: #1e4b9a;
    color: white;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    transition: background 0.3s, transform 0.2s;
}

.faq-search button:hover {
    background: #163a7a;
    transform: scale(1.05);
}

/* Sidebar Navigation */
.faq-categories {
    background: white;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid #eee;
}

.faq-categories h4 {
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 20px;
    color: #003366;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.faq-categories ul {
    list-style: none !important;
    padding: 0;
    margin: 0;
}

.faq-categories .nav-link {
    color: #666;
    padding: 12px 20px;
    margin-bottom: 8px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.faq-categories .nav-link:hover {
    color: #1e4b9a;
    background: #f0f7ff;
    padding-left: 25px;
}

.faq-categories .nav-link.active {
    background: #1e4b9a;
    color: white;
    box-shadow: 0 4px 10px rgba(30, 75, 154, 0.3);
}

.category-title {
    color: #003366;
    font-weight: 800;
    margin-bottom: 25px;
    font-size: 1.8rem;
    position: relative;
    padding-bottom: 10px;
}

.category-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 4px;
    background: #1e4b9a;
    border-radius: 2px;
}

/* FAQ Cards (Accordion) */
.faq-card {
    border: none !important;
    margin-bottom: 20px;
    background: white;
    border-radius: 12px !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s, box-shadow 0.3s;
    overflow: hidden;
}

.faq-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
}

.faq-card .card-header {
    background: white !important;
    border-bottom: none;
    padding: 0;
}

.faq-card .btn-link {
    color: #333;
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none !important;
    padding: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: left;
    transition: color 0.3s;
    border: none;
    background: transparent;
}

.faq-card .btn-link:hover {
    color: #1e4b9a;
}

.faq-card .btn-link i {
    color: #1e4b9a;
    background: #e8f0fe;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.9rem;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.3s, color 0.3s;
    flex-shrink: 0;
    margin-left: 15px;
}

.faq-card .btn-link[aria-expanded="true"] {
    color: #1e4b9a;
}

.faq-card .btn-link[aria-expanded="true"] i {
    transform: rotate(135deg);
    /* Suitable for plus icon */
    background: #1e4b9a;
    color: white;
}

.faq-card .card-body {
    padding: 0 25px 25px 25px;
    color: #666;
    font-size: 1rem;
    line-height: 1.7;
    background: white;
    border-top: none;
}

/* Custom Grid System for FAQ (Since Bootstrap might be missing/partial) */
.faq-grid-container {
    display: grid;
    grid-template-columns: 3fr 1fr;
    /* 75% | 25% */
    gap: 40px;
    align-items: start;
}

.faq-main-content {
    min-width: 0;
    /* Prevent grid blowout */
}

.faq-category-section {
    margin-bottom: 50px;
}

.faq-sidebar {
    position: relative;
}

/* Responsive */
@media (max-width: 991px) {
    .faq-grid-container {
        grid-template-columns: 1fr;
        /* Stack on mobile/tablet */
    }

    .faq-sidebar {
        order: -1;
        /* Optional: Put sidebar on top on mobile? User didn't specify, but sidebar usually goes top or bottom.
                      User asked for "Category Right", implies Desktop. Standard mobile is usually categories top or bottom.
                      Let's keep it bottom for now to let users see content first, or top for nav.
                      Let's leave order normal (bottom) so it matches "main content first". */
        margin-bottom: 40px;
    }

    .faq-categories {
        margin-bottom: 30px;
    }

    .faq-hero h1 {
        font-size: 2rem;
    }
}