/* ==========================================================
   NEMES-GSZI – GYAKRAN ISMÉTELT KÉRDÉSEK
   ========================================================== */

.faq-page {
    --faq-navy: #052b42;
    --faq-deep: #031f30;
    --faq-blue: #08a9e6;
    --faq-blue-dark: #078fc3;
    --faq-light: #f3f7f9;
    --faq-border: #dce7eb;
    --faq-text: #183b4e;
    --faq-muted: #526779;

    color: var(--faq-text);
    font-family: 'Inter', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.faq-page * {
    box-sizing: border-box;
}

.faq-eyebrow {
    display: block;
    margin-bottom: 13px;

    color: var(--faq-blue);

    font-size: 13px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 1.4px;
}

.faq-page h2 {
    margin: 0;

    color: var(--faq-navy);

    font-size: clamp(37px, 4vw, 53px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -1.8px;
}

.faq-page h2 strong {
    font-weight: 750;
}


/* ==========================================================
   HERO
   ========================================================== */

.faq-hero {
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(8,169,230,.18),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            var(--faq-deep),
            #073852
        );

    color: #fff;
}

.faq-hero::after {
    content: "?";

    position: absolute;
    right: 5%;
    bottom: -115px;

    color: rgba(255,255,255,.025);

    font-size: 430px;
    font-weight: 800;
    line-height: 1;

    pointer-events: none;
}

.faq-breadcrumb {
    position: relative;
    z-index: 2;

    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    padding-top: 25px;

    color: rgba(255,255,255,.38);

    font-size: 13px;
}

.faq-breadcrumb a {
    color: rgba(255,255,255,.55) !important;
    text-decoration: none !important;
}

.faq-breadcrumb strong {
    color: rgba(255,255,255,.78);
    font-weight: 600;
}

.faq-hero-grid {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns:
        minmax(0,1.3fr)
        minmax(260px,.7fr);

    gap: 90px;
    align-items: center;

    min-height: 480px;
    padding: 55px 0 75px;
}

.faq-hero h1 {
    max-width: 820px;
    margin: 0;

    color: #fff;

    font-size: clamp(51px,5.6vw,76px);
    font-weight: 300;
    line-height: .98;
    letter-spacing: -3px;
}

.faq-hero h1 strong {
    display: block;
    font-weight: 750;
}

.faq-hero-lead {
    max-width: 650px;
    margin: 25px 0 0;

    color: rgba(255,255,255,.65);

    font-size: 16px;
    line-height: 1.8;
}

.faq-hero-side {
    padding-left: 35px;

    border-left:
        1px solid rgba(255,255,255,.15);
}

.faq-hero-side-label {
    display: block;
    margin-bottom: 13px;

    color: var(--faq-blue);

    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.faq-hero-side > strong {
    display: block;

    color: #fff;

    font-size: 25px;
    font-weight: 750;
}

.faq-hero-side p {
    max-width: 280px;
    margin: 13px 0 20px;

    color: rgba(255,255,255,.55);

    font-size: 16px;
    line-height: 1.7;
}

.faq-hero-side a {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    padding-bottom: 4px;

    border-bottom:
        1px solid rgba(255,255,255,.25);

    color: #fff !important;

    font-size: 16px;
    font-weight: 700;

    text-decoration: none !important;
}


/* ==========================================================
   KERESŐ
   ========================================================== */

.faq-search-section {
    position: relative;
    z-index: 5;

    background: #fff;

    border-bottom:
        1px solid var(--faq-border);
}

.faq-search-panel {
    padding: 45px 0 35px;
}

.faq-search-heading {
    display: grid;
    grid-template-columns: 180px 1fr;
    align-items: end;

    margin-bottom: 25px;
}

.faq-search-heading .faq-eyebrow {
    margin: 0 0 7px;
}

.faq-search-heading h2 {
    font-size: 30px;
    letter-spacing: -1px;
}

.faq-search-box {
    position: relative;

    display: flex;
    align-items: center;

    max-width: 950px;
}

.faq-search-box > i {
    position: absolute;
    left: 20px;

    z-index: 2;

    color: var(--faq-blue);

    font-size: 16px;
}

.faq-search-box input {
    width: 100%;
    height: 64px;

    padding: 0 60px 0 52px;

    border:
        1px solid var(--faq-border);

    border-radius: 7px;

    outline: none;

    background: var(--faq-light);

    color: var(--faq-navy);

    font-family: inherit;
    font-size: 16px;

    transition:
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.faq-search-box input::placeholder {
    color: #9aaab1;
}

.faq-search-box input:focus {
    border-color: var(--faq-blue);

    background: #fff;

    box-shadow:
        0 0 0 4px rgba(8,169,230,.08);
}

.faq-search-clear {
    position: absolute;
    right: 15px;

    display: none;

    width: 34px;
    height: 34px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: transparent;

    color: var(--faq-muted);

    font-size: 23px;
    line-height: 1;

    cursor: pointer;
}

.faq-search-clear.visible {
    display: block;
}

.faq-search-clear:hover {
    background: #e9f0f3;
    color: var(--faq-navy);
}


/* ==========================================================
   KATEGÓRIÁK
   ========================================================== */

.faq-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;

    margin-top: 18px;
}

.faq-category {
    padding: 9px 13px;

    border:
        1px solid var(--faq-border);

    border-radius: 4px;

    background: #fff;

    color: var(--faq-muted);

    font-family: inherit;
    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

    transition: .18s ease;
}

.faq-category:hover {
    border-color: #aac7d3;
    color: var(--faq-navy);
}

.faq-category.active {
    border-color: var(--faq-navy);
    background: var(--faq-navy);
    color: #fff;
}


/* ==========================================================
   FAQ LAYOUT
   ========================================================== */

.faq-content-section {
    padding: 90px 0 100px;

    background: var(--faq-light);
}

.faq-layout {
    display: grid;

    grid-template-columns:
        minmax(230px,.55fr)
        minmax(0,1.45fr);

    gap: 85px;
    align-items: start;
}


/* ==========================================================
   OLDALSÁV
   ========================================================== */

.faq-aside {
    position: sticky;
    top: 100px;
}

.faq-aside-number {
    display: block;

    margin-bottom: 13px;

    color: var(--faq-blue);

    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.faq-aside h2 {
    font-size: 38px;
}

.faq-aside p {
    max-width: 320px;

    margin: 18px 0 0;

    color: var(--faq-muted);

    font-size: 16px;
    line-height: 1.75;
}

.faq-aside-links {
    margin-top: 30px;

    border-top:
        1px solid var(--faq-border);
}

.faq-aside-links a {
    display: grid;

    grid-template-columns:
        32px 1fr 20px;

    gap: 11px;
    align-items: center;

    padding: 15px 0;

    border-bottom:
        1px solid var(--faq-border);

    color: var(--faq-navy) !important;

    text-decoration: none !important;
}

.faq-aside-links a > i {
    color: var(--faq-blue);

    font-size: 15px;
}

.faq-aside-links small {
    display: block;

    margin-bottom: 2px;

    color: var(--faq-muted);

    font-size: 13px;
    font-weight: 800;
    letter-spacing: .8px;
}

.faq-aside-links span {
    font-size: 16px;
    font-weight: 700;
}

.faq-aside-links b {
    color: var(--faq-blue);

    font-size: 16px;
}


/* ==========================================================
   CSOPORT
   ========================================================== */

.faq-group {
    margin-bottom: 55px;
}

.faq-group:last-of-type {
    margin-bottom: 0;
}

.faq-group-head {
    display: grid;

    grid-template-columns:
        55px 1fr;

    gap: 15px;
    align-items: center;

    margin-bottom: 13px;
}

.faq-group-head > span {
    color: var(--faq-blue);

    font-size: 13px;
    font-weight: 800;
}

.faq-group-head small {
    display: block;

    margin-bottom: 1px;

    color: var(--faq-muted);

    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1px;
}

.faq-group-head h3 {
    margin: 0;

    color: var(--faq-navy);

    font-size: 20px;
    font-weight: 750;
}


/* ==========================================================
   FAQ ITEM
   ========================================================== */

.faq-item {
    border-top:
        1px solid var(--faq-border);

    background: transparent;
}

.faq-item:last-child {
    border-bottom:
        1px solid var(--faq-border);
}

.faq-item[hidden],
.faq-group[hidden] {
    display: none !important;
}

.faq-question {
    display: grid;

    grid-template-columns:
        1fr 35px;

    gap: 25px;
    align-items: center;

    width: 100%;

    padding: 20px 3px;

    border: 0;

    background: transparent;

    color: var(--faq-navy);

    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.45;

    text-align: left;

    cursor: pointer;
}

.faq-question:hover {
    color: var(--faq-blue-dark);
}

.faq-question > i {
    position: relative;

    display: block;

    width: 28px;
    height: 28px;

    border:
        1px solid var(--faq-border);

    border-radius: 50%;
}

.faq-question > i::before,
.faq-question > i::after {
    content: "";

    position: absolute;
    left: 50%;
    top: 50%;

    width: 9px;
    height: 1px;

    background: var(--faq-blue);

    transform:
        translate(-50%,-50%);
}

.faq-question > i::after {
    transform:
        translate(-50%,-50%)
        rotate(90deg);

    transition:
        transform .2s ease;
}

.faq-item.open
.faq-question > i::after {
    transform:
        translate(-50%,-50%)
        rotate(0deg);
}


/* ==========================================================
   VÁLASZ
   ========================================================== */

.faq-answer {
    display: grid;

    grid-template-rows: 0fr;

    overflow: hidden;

    transition:
        grid-template-rows .25s ease;
}

.faq-item.open .faq-answer {
    grid-template-rows: 1fr;
}

.faq-answer > div {
    min-height: 0;
}

.faq-answer > div > p:first-child,
.faq-answer > div > ul:first-child {
    margin-top: 0;
}

.faq-answer > div {
    padding: 0 60px 0 3px;
}

.faq-item.open .faq-answer > div {
    padding-bottom: 24px;
}

.faq-answer p {
    max-width: 760px;

    margin: 11px 0 0;

    color: var(--faq-muted);

    font-size: 16px;
    line-height: 1.8;
}

.faq-answer p strong {
    color: var(--faq-text);
    font-weight: 750;
}

.faq-answer ul {
    max-width: 700px;

    margin: 10px 0 0;
    padding-left: 18px;

    color: var(--faq-muted);

    font-size: 16px;
    line-height: 1.8;
}

.faq-answer li {
    margin: 3px 0;
}

.faq-inline-link {
    display: inline-flex;

    margin-top: 16px;
    padding-bottom: 3px;

    border-bottom:
        1px solid rgba(8,169,230,.35);

    color: var(--faq-blue-dark) !important;

    font-size: 16px;
    font-weight: 750;

    text-decoration: none !important;
}

.faq-inline-link:hover {
    border-color: var(--faq-blue);
}


/* ==========================================================
   KÉPLET
   ========================================================== */

.faq-formula {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;

    max-width: 630px;

    margin: 15px 0;
    padding: 16px 18px;

    border-left:
        3px solid var(--faq-blue);

    background: #fff;

    color: var(--faq-muted);

    font-size: 16px;
}

.faq-formula strong {
    color: var(--faq-navy);

    font-size: 16px;
}

.faq-formula b {
    margin: 0 5px;

    color: var(--faq-blue);

    font-size: 16px;
}


/* ==========================================================
   NYÍLT NAP DÁTUMOK
   ========================================================== */

.faq-dates {
    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    max-width: 720px;

    margin-top: 18px;

    border-top:
        1px solid var(--faq-border);

    border-left:
        1px solid var(--faq-border);
}

.faq-dates > div {
    min-height: 105px;

    padding: 16px;

    border-right:
        1px solid var(--faq-border);

    border-bottom:
        1px solid var(--faq-border);

    background: #fff;
}

.faq-dates strong {
    display: block;

    margin-bottom: 7px;

    color: var(--faq-blue-dark);

    font-size: 16px;
}

.faq-dates span {
    color: var(--faq-muted);

    font-size: 16px;
    line-height: 1.5;
}


/* ==========================================================
   NINCS TALÁLAT
   ========================================================== */

.faq-no-results {
    display: none;

    padding: 55px 30px;

    border:
        1px solid var(--faq-border);

    background: #fff;

    text-align: center;
}

.faq-no-results.visible {
    display: block;
}

.faq-no-results > span {
    display: block;

    margin-bottom: 10px;

    color: var(--faq-blue);

    font-size: 50px;
    font-weight: 300;
}

.faq-no-results h3 {
    margin: 0;

    color: var(--faq-navy);

    font-size: 20px;
}

.faq-no-results p {
    margin: 9px 0 0;

    color: var(--faq-muted);

    font-size: 16px;
}


/* ==========================================================
   KAPCSOLAT
   ========================================================== */

.faq-contact {
    padding: 85px 0;

    background: var(--faq-navy);

    color: #fff;
}

.faq-contact-grid {
    display: grid;

    grid-template-columns:
        1.25fr .75fr;

    gap: 80px;
    align-items: center;
}

.faq-contact h2 {
    color: #fff;
}

.faq-contact p {
    max-width: 650px;

    margin: 18px 0 0;

    color: rgba(255,255,255,.6);

    font-size: 16px;
    line-height: 1.8;
}

.faq-contact-actions {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.faq-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 51px;

    padding: 0 18px;

    border:
        1px solid transparent;

    border-radius: 5px;

    font-size: 16px;
    font-weight: 750;

    text-decoration: none !important;

    transition:
        background .2s ease,
        transform .2s ease;
}

.faq-btn:hover {
    transform: translateY(-2px);
}

.faq-btn-primary {
    background: var(--faq-blue);
    color: #fff !important;
}

.faq-btn-primary:hover {
    background: var(--faq-blue-dark);
}

.faq-btn-light {
    border-color:
        rgba(255,255,255,.2);

    background:
        rgba(255,255,255,.05);

    color: #fff !important;
}

.faq-btn-light:hover {
    background:
        rgba(255,255,255,.1);
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media screen and (max-width: 991px) {

    .faq-hero-grid,
    .faq-layout,
    .faq-contact-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .faq-hero-side {
        padding-top: 30px;
        padding-left: 0;

        border-top:
            1px solid rgba(255,255,255,.15);

        border-left: 0;
    }

    .faq-aside {
        position: static;
    }

    .faq-aside-links {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap: 20px;
    }

    .faq-search-heading {
        grid-template-columns: 1fr;
        gap: 7px;
    }

}


@media screen and (max-width: 767px) {

    .faq-breadcrumb {
        padding-top: 18px;
    }

    .faq-hero-grid {
        min-height: auto;
        padding: 50px 0 60px;
    }

    .faq-hero h1 {
        font-size: 44px;
        letter-spacing: -2px;
    }

    .faq-search-panel {
        padding: 35px 0 30px;
    }

    .faq-search-box input {
        height: 57px;

        padding-left: 47px;

        font-size: 16px;
    }

    .faq-categories {
        flex-wrap: nowrap;

        overflow-x: auto;

        padding-bottom: 7px;

        scrollbar-width: thin;
    }

    .faq-category {
        flex: 0 0 auto;
    }

    .faq-content-section {
        padding: 60px 0;
    }

    .faq-aside h2 {
        font-size: 34px;
    }

    .faq-aside-links {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .faq-group {
        margin-bottom: 43px;
    }

    .faq-group-head {
        grid-template-columns: 40px 1fr;
    }

    .faq-question {
        grid-template-columns:
            1fr 30px;

        gap: 15px;

        padding: 18px 0;

        font-size: 16px;
    }

    .faq-answer > div {
        padding-right: 10px;
    }

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

    .faq-dates > div {
        min-height: auto;
    }

    .faq-contact {
        padding: 60px 0;
    }

    .faq-page h2 {
        font-size: 35px;
        letter-spacing: -1.2px;
    }

}


@media (prefers-reduced-motion: reduce) {

    .faq-answer,
    .faq-btn,
    .faq-question > i::after {
        transition: none;
    }

    .faq-btn:hover {
        transform: none;
    }

}