:root {
    --faq-shadow: 0 10px 34px rgba(18,48,99,.08);
}

.faq-page {
    background: rgb(248, 250, 253);
}

.faq-hero {
    padding: 24px 0px 38px;
    background: linear-gradient(135deg, rgb(242, 246, 255), rgb(251, 253, 255));
    border-bottom: 1px solid var(--line);
}

.faq-hero-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.faq-hero-row > div > span {
    font-size: 11px;
    font-weight: 700;
    color: var(--blue2);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.faq-hero h1 {
    font-size: clamp(27px, 3vw, 42px);
    font-weight: 800;
    color: var(--blue);
    margin: 8px 0px;
}

.faq-hero p {
    max-width: 760px;
    color: var(--muted);
    line-height: 1.7;
    margin: 0px;
}

.faq-hero-icon {
    font-size: 88px;
    color: rgb(217, 230, 250);
    margin-right: 6%;
}

.faq-search {
    max-width: 850px;
    height: 58px;
    display: flex;
    align-items: center;
    margin-top: 25px;
    border: 1px solid rgb(217, 227, 241);
    border-radius: 10px;
    background: rgb(255, 255, 255);
    box-shadow: rgba(30, 75, 140, 0.07) 0px 7px 25px;
    overflow: hidden;
}

.faq-search > i {
    font-size: 18px;
    color: var(--blue2);
    margin-left: 18px;
}

.faq-search input {
    min-width: 0px;
    flex: 1 1 0%;
    height: 100%;
    border: 0px;
    outline: 0px;
    padding: 0px 14px;
    font-size: 11px;
}

.faq-search button {
    align-self: stretch;
    border: 0px;
    background: var(--blue);
    color: rgb(255, 255, 255);
    padding: 0px 24px;
    font-size: 10px;
    font-weight: 700;
}

.faq-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.faq-stats article {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgb(255, 255, 255);
}

.faq-stats i {
    width: 41px;
    height: 41px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: rgb(237, 244, 255);
    color: var(--blue);
    font-size: 18px;
}

.faq-stats article div {
    display: grid;
}

.faq-stats strong {
    font-size: 16px;
    color: rgb(45, 59, 83);
}

.faq-stats span {
    font-size: 10px;
    color: rgb(135, 146, 165);
}

.faq-layout {
    display: grid;
    grid-template-columns: minmax(0px, 1fr) 320px;
    gap: 23px;
    align-items: start;
}

.faq-main {
    min-width: 0px;
}

.faq-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgb(255, 255, 255);
}

.faq-tabs {
    display: flex;
    gap: 4px;
}

.faq-tabs button, .faq-category-chips button {
    border: 0px;
    border-radius: 7px;
    background: transparent;
    color: rgb(100, 113, 136);
    font-size: 12px;
}

.faq-tabs button {
    height: 36px;
    padding: 0px 14px;
    font-weight: 650;
}

.faq-tabs button.active {
    background: var(--blue);
    color: rgb(255, 255, 255);
}

.faq-toolbar select {
    height: 36px;
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 0px 9px;
    color: rgb(97, 112, 135);
    font-size: 11px;
}

.faq-category-chips {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding: 13px 0px;
    scrollbar-width: none;
}

.faq-category-chips button {
    flex: 0 0 auto;
    height: 32px;
    padding: 0px 12px;
    border: 1px solid var(--line);
    background: rgb(255, 255, 255);
}

.faq-category-chips button.active {
    border-color: var(--blue2);
    color: var(--blue);
    background: rgb(238, 245, 255);
}

.faq-result-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 1px 12px;
}

.faq-result-head h2 {
    font-size: 14px;
    color: var(--blue);
    font-weight: 800;
    margin: 0px;
}

.faq-result-head span {
    font-size: 8px;
    color: rgb(137, 148, 167);
}

.faq-list {
    display: grid;
    gap: 10px;
}

.faq-item {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgb(255, 255, 255);
    overflow: hidden;
    box-shadow: rgba(18, 48, 99, 0.04) 0px 4px 17px;
}

.faq-question {
    width: 100%;
    display: grid;
    grid-template-columns: 77px minmax(0px, 1fr) 24px;
    gap: 13px;
    align-items: start;
    text-align: left;
    padding: 18px;
    border: 0px;
    background: rgb(255, 255, 255);
}

.faq-question > span:nth-child(2) {
    display: grid;
    gap: 6px;
}

.faq-question small {
    font-size: 10px;
    color: rgb(133, 144, 163);
}

.faq-question strong {
    font-size: 14px;
    line-height: 1.6;
    color: rgb(52, 65, 88);
}

.faq-question em {
    font-size: 11px;
    font-style: normal;
    color: rgb(147, 157, 173);
}

.faq-question > i {
    margin-top: 15px;
    color: rgb(131, 144, 163);
    transition: 0.25s;
}

.faq-question[aria-expanded="true"] > i {
    transform: rotate(180deg);
}

.faq-badge {
    display: inline-flex;
    justify-content: center;
    padding: 5px 7px;
    border-radius: 13px;
    font-size: 10px;
    font-weight: 750;
}

.faq-badge.answered {
    background: rgb(229, 247, 240);
    color: rgb(8, 123, 91);
}

.faq-badge.pending {
    background: rgb(255, 243, 218);
    color: rgb(164, 106, 0);
}

.faq-answer {
    padding: 17px 20px 19px 108px;
    border-top: 1px solid var(--line);
    background: rgb(251, 252, 254);
}

.answer-official {
    display: flex;
    align-items: center;
    gap: 9px;
}

.answer-official > i {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgb(231, 240, 255);
    color: var(--blue);
}

.answer-official span {
    display: grid;
}

.answer-official strong {
    font-size: 14px;
    color: var(--blue);
}

.answer-official small {
    font-size: 11px;
    color: rgb(145, 155, 173);
}

.faq-answer p {
    font-size: 14px;
    line-height: 1.8;
    color: rgb(88, 101, 122);
    margin: 12px 0px 6px;
}

.faq-answer a {
    font-size: 11px;
    font-weight: 700;
    color: var(--blue2);
}

.pending-answer {
    display: flex;
    gap: 10px;
    align-items: center;
    color: rgb(154, 107, 19);
}

.pending-answer i {
    font-size: 20px;
}

.pending-answer p {
    margin: 0px;
}

.faq-empty {
    display: grid;
    place-items: center;
    gap: 7px;
    padding: 55px;
    border: 1px dashed rgb(203, 214, 230);
    border-radius: 10px;
    color: rgb(130, 144, 165);
}

.faq-empty i {
    font-size: 31px;
}

.faq-empty strong {
    font-size: 11px;
}

.faq-empty span {
    font-size: 9px;
}

.faq-sidebar {
    display: grid;
    gap: 15px;
    position: sticky;
    top: 15px;
}

.ask-button {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 17px;
    border: 0px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgb(10, 84, 195), rgb(6, 57, 143));
    color: rgb(255, 255, 255);
    text-align: left;
    box-shadow: var(--faq-shadow);
}

.ask-button > i {
    font-size: 27px;
}

.ask-button span {
    display: grid;
}

.ask-button strong {
    font-size: 14px;
}

.ask-button small {
    font-size: 10px;
    opacity: 0.8;
}

.faq-side-card {
    padding: 19px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgb(255, 255, 255);
    box-shadow: var(--faq-shadow);
}

.faq-side-card h2 {
    display: flex;
    gap: 8px;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
    color: var(--blue);
    font-weight: 800;
}

.faq-side-card ol {
    list-style: none;
    padding: 0px;
    margin: 0px;
}

.faq-side-card li {
    display: grid;
    grid-template-columns: 29px 1fr;
    gap: 9px;
    padding: 11px 0px;
    border-bottom: 1px dashed var(--line);
}

.faq-side-card li:last-child {
    border: 0px;
}

.faq-side-card li span {
    font-size: 14px;
    font-weight: 800;
    color: rgb(197, 213, 235);
}

.faq-side-card li a {
    font-size: 12px;
    line-height: 1.55;
    color: rgb(83, 96, 119);
}

.lookup-card p {
    font-size: 11px;
    color: rgb(133, 144, 163);
}

.lookup-card form {
    display: flex;
    border: 1px solid var(--line);
    border-radius: 7px;
    overflow: hidden;
}

.lookup-card input {
    min-width: 0px;
    flex: 1 1 0%;
    height: 38px;
    border: 0px;
    outline: 0px;
    padding: 0px 9px;
    font-size: 11px;
}

.lookup-card button {
    border: 0px;
    background: var(--blue);
    color: rgb(255, 255, 255);
    padding: 0px 10px;
    font-size: 11px;
}

.lookup-card > div {
    display: flex;
    gap: 9px;
    margin-top: 10px;
    padding: 10px;
    border-radius: 7px;
    background: rgb(234, 248, 243);
    color: rgb(8, 123, 91);
}

.lookup-card > div span {
    display: grid;
}

.lookup-card > div strong {
    font-size: 9px;
}

.lookup-card > div small {
    font-size: 7px;
}

.support-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 17px;
    border-radius: 10px;
    background: rgb(238, 245, 255);
    color: var(--blue);
}

.support-card > i {
    font-size: 28px;
}

.support-card div {
    display: grid;
}

.support-card span, .support-card a {
    font-size: 11px;
}

.support-card strong {
    font-size: 16px;
}

.ask-modal .modal-content {
    border: 0px;
    border-radius: 13px;
}

.ask-modal .modal-header {
    padding: 20px 23px;
}

.ask-modal .modal-header span {
    font-size: 8px;
    color: var(--blue2);
    font-weight: 700;
    text-transform: uppercase;
}

.ask-modal .modal-title {
    font-size: 18px;
    color: var(--blue);
    font-weight: 800;
}

.ask-modal .modal-body {
    padding: 21px 23px;
}

.ask-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.ask-grid label {
    display: grid;
    gap: 7px;
}

.ask-grid label.full {
    grid-column: 1 / -1;
}

.ask-grid label > span {
    font-size: 9px;
    font-weight: 650;
    color: rgb(78, 91, 113);
}

.ask-grid input, .ask-grid select, .ask-grid textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 11px;
    font-size: 10px;
    outline: 0px;
}

.ask-grid input, .ask-grid select {
    height: 42px;
    padding-top: 0px;
    padding-bottom: 0px;
}

.ask-grid textarea {
    resize: vertical;
}

.ask-grid :is(input, select, textarea):focus {
    border-color: var(--blue2);
    box-shadow: rgba(7, 84, 216, 0.08) 0px 0px 0px 3px;
}

.ask-grid .ask-consent {
    display: flex;
    grid-template-columns: 17px 1fr;
    align-items: start;
}

.ask-consent input {
    width: auto;
    height: auto;
    margin-top: 2px;
    accent-color: var(--blue);
}

.ask-modal .modal-footer {
    padding: 14px 23px;
}

.ask-modal .modal-footer button {
    height: 40px;
    padding: 0px 16px;
    border-radius: 7px;
    font-size: 9px;
}

.ask-modal .cancel {
    border: 1px solid var(--line);
    background: rgb(255, 255, 255);
}

.ask-modal .send {
    border: 1px solid var(--blue);
    background: var(--blue);
    color: rgb(255, 255, 255);
}

.faq-toast {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1090;
    padding: 14px 17px;
    border-radius: 8px;
    background: rgb(8, 123, 91);
    color: rgb(255, 255, 255);
    font-size: 9px;
    box-shadow: rgba(23, 52, 91, 0.25) 0px 10px 30px;
    transform: translateY(25px);
    opacity: 0;
    transition: 0.3s;
}

.faq-toast.show {
    transform: none;
    opacity: 1;
}

@media (max-width: 991px) {
    .faq-layout {
        grid-template-columns: 1fr;
    }

    .faq-sidebar {
        position: static;
        grid-template-columns: 1fr 1fr;
    }

    .ask-button, .support-card {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767px) {
    .faq-hero {
        padding: 16px 0px 25px;
    }

    .faq-hero-icon {
        display: none;
    }

    .faq-hero h1 {
        font-size: 24px;
    }

    .faq-hero p {
        font-size: 10px;
    }

    .faq-search {
        height: 51px;
        margin-top: 18px;
    }

    .faq-search button {
        width: 50px;
        padding: 0px;
        font-size: 0px;
    }

    .faq-search button::after {
        content: "";
        font-family: bootstrap-icons;
        font-size: 15px;
    }

    .faq-content.section {
        padding-top: 18px;
    }

    .faq-stats {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .faq-stats article {
        padding: 10px;
    }

    .faq-stats i {
        width: 34px;
        height: 34px;
    }

    .faq-stats strong {
        font-size: 13px;
    }

    .faq-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .faq-tabs {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .faq-question {
        grid-template-columns: 1fr 20px;
        padding: 15px;
    }

    .faq-badge {
        grid-column: 1 / -1;
        width: max-content;
    }

    .faq-answer {
        padding: 15px;
    }

    .faq-sidebar {
        grid-template-columns: 1fr;
    }

    .ask-button, .support-card {
        grid-column: auto;
    }

    .ask-grid {
        grid-template-columns: 1fr;
    }

    .ask-grid label.full {
        grid-column: auto;
    }

    .faq-toast {
        left: 12px;
        right: 12px;
        bottom: 12px;
    }
}