/* ================= ROOT VARIABLES ================= */
:root {
    --bg-black: #000000;
    --bg-main: #0b1220;
    --bg-card: #101a2e;
    --primary: #2563eb;
    --primary-dark: #191919;
    --success: #22c55e;
    --text-main: #e5e7eb;
    --text-muted: #9ca3af;
    --radius: 14px;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    --shadow2: #272727;
}

/* RESET */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Inter, system-ui, sans-serif;
}

/* UIDAI THEMED BACKGROUND */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-color: #0b0b0b;

    background-size: auto, auto, 40px 40px, 40px 40px, auto;

    z-index: -1;
    /* ✅ MOST IMPORTANT */
    pointer-events: none;
    /* ✅ safety */
}



/* ================= FAQ ================= */
/* .faq-container {
  max-width: 900px;
  margin: 40px auto;
  padding: 20px;
   background: rgba(16, 26, 46, 0.75);
  backdrop-filter: blur(12px);
  border-radius: 20px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.05),
    0 20px 50px rgba(0,0,0,0.6);
} */
.faq-container {
    position: relative;
    max-width: 900px;
    margin: 40px auto;
    padding: 28px;

    /* REAL GLASS */
    /* background: linear-gradient(180deg,
            rgba(20, 35, 65, 0.85),
            rgba(12, 20, 40, 0.75));

    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%); */

    border-radius: 24px;

    /* GLASS EDGE */
    /* border: 1px solid rgba(255, 255, 255, 0.08); */

    /* DEPTH */
    /* box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 25px 60px rgba(0, 0, 0, 0.65); */
}

/* .faq-container::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 24px;
    background: radial-gradient(circle at top center,
            rgba(255, 255, 255, 0.08),
            transparent 55%);
    pointer-events: none;
} */


.faq-title {
    text-align: center;
    margin-bottom: 30px;
    font-size: 26px;
}

/* .faq-item {
  background: var(--bg-card);
  border-radius: var(--radius);
  margin-bottom: 14px;
  overflow: hidden;
  box-shadow: var(--shadow);
} */

.faq-item {
    margin-bottom: 1rem;
    /* background: linear-gradient(180deg,
            rgba(18, 30, 55, 0.9),
            rgba(14, 24, 45, 0.85)); */
    background-color: var(--bg-card);
    border-radius: 16px;
    box-shadow:
        -4px -5px 6px 0px var(--shadow2);
}


/* QUESTION */
.faq-question {
    width: 100%;
    padding: 18px 20px;
    background: none;
    border: none;
    color: var(--text-main);
    font-size: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

/* ANSWER */
.faq-answer {
    background: var(--primary-dark);
    max-height: 0;
    overflow: hidden;
    padding: 0 20px;
    color: var(--text-muted);
    line-height: 1.6;
    transition: max-height 0.4s ease, padding 0.4s ease;
}

/* ACTIVE STATE */
.faq-item.active .faq-answer {
    border-top: 1px solid var(--bg-black);
    max-height: 200px;
    padding: 14px 20px 20px;
    border-radius: 0px 0px 16px 16px;
}

.faq-item.active .faq-question span {
    transform: rotate(45deg);
}


/* ================= MOBILE FIX (IMPORTANT) ================= */

/* Tablets & below */
@media (max-width: 900px) {
    .faq-container {
        max-width: 100%;
        padding: 16px;
    }
}

/* ================= MOBILE VIEW ================= */
@media (max-width: 768px) {

    /* ===== NAVBAR ===== */
    .navbar {
        flex-direction: row;
        /* ✅ keep horizontal */
        height: 64px;
        padding: 0 12px;
    }

    .nav-left {
        flex: 1;
        gap: 8px;
    }

    .nav-left h1 {
        font-size: 13px;
        line-height: 1.3;
    }

    .nav-left p {
        display: none;
        /* hide subtitle to save space */
    }

    .nav-right {
        flex-shrink: 0;
        gap: 10px;
    }

    .nav-right-item {
        font-size: 11px;
        padding: 4px 24px;
        height: auto;
    }

    .nav-right-item a {
        text-decoration: none !important;
        color: var(--text-muted);
    }

    .nav-icons {
        gap: 10px;
    }

    .avatar {
        width: 32px;
        height: 32px;
    }

    /* ===== FAQ SECTION ===== */
    .faq-container {
        margin: 16px auto;
        padding: 12px;
    }

    .faq-title {
        font-size: 22px;
        margin-bottom: 20px;
    }

    /* FAQ ITEM */
    .faq-item {
        margin-bottom: 16px;
    }

    .faq-question {
        font-size: 15px;
        /* ✅ readable */
        padding: 18px 16px;
        /* ✅ tap-friendly */
        line-height: 1.4;
        gap: 12px;
    }

    .faq-question span {
        font-size: 20px;
    }

    .faq-answer {
        font-size: 14px;
        padding: 0 16px;
        line-height: 1.7;
    }

    .faq-item.active .faq-answer {
        padding: 14px 16px 20px;
    }
}

/* ================= SMALL MOBILE (PHONES) ================= */
@media (max-width: 480px) {

    .navbar {
        padding: 0 10px;
    }

    .nav-left h1 {
        font-size: 12px;
    }

    .system-status {
        display: none;
        /* hide pill on very small screens */
    }

    .faq-title {
        font-size: 20px;
        text-align: left;
    }

    .faq-question {
        font-size: 14px;
        padding: 18px 14px;
    }

    .faq-answer {
        font-size: 13.5px;
    }
}

/* ================= ENHANCED FAQ CATEGORY HEADING ================= */

.faq-category {
    position: relative;
    margin: 48px 0 32px;
    padding-left: 14px;

    font-size: 25px;
    font-weight: 700;
    letter-spacing: 0.6px;
    color: var(--text-main);

    /* subtle glow */
    text-shadow: 0 0 12px rgba(37, 99, 235, 0.35);
}

/* LEFT ACCENT BAR */
.faq-category::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;

    width: 4px;
    height: 75%;

    border-radius: 10px;
    background: linear-gradient(180deg,
            var(--primary),
            var(--success));
}

/* BOTTOM DIVIDER LINE */
.faq-category::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;

    width: 110%;
    height: 1px;

    background: linear-gradient(90deg,
            rgba(37, 99, 235, 0.8),
            rgba(37, 99, 235, 0.25),
            transparent);
}

/* First heading spacing fix */
.faq-category:first-of-type {
    margin-top: 46px;
}