:root {
    --boxpage-max-width: 1280px;
}

.faq-sec-page {
    background-color: #f7f7f7;
    background-color: #F3F3F3C7;
}

.title-h1 {

    font-size: 33px;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.1em;
    letter-spacing: 1.2px;
}

.title-h1-faq {
    text-align: center;
    padding: 40px 10px;
}

.faq-cat {
    display: inline-block;
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 20px;
    font-weight: 700;
    margin-top: 0;
    text-transform: uppercase;
    line-height: 1.6em;
}

.faq-topcat-con .faq-cat {
    font-size: 24px;
    font-weight: 600;
    text-transform: none;
    line-height: 1.2em;
    color: #212020;
    text-transform: uppercase;
    margin-top: 2em;
}

.faq-col .faq-cat-con:nth-child(1) .faq-cat {
    padding-top: 0;
}

.faq-section {
    padding: 4em 0 6em 0;
    max-width: var(--boxpage-max-width);
    margin: auto;
    width: 100%;
    display: flex;
    padding-left: 40px;
    padding-right: 40px;
    flex-direction: column;
}

.faq-section h2 {
    width: 28%;
}

.faq-col {
    width: 100%;
    margin-left: auto;
    padding-left: 40px;
    margin-right: 0;


}

.faq-item {
    border-bottom: 1px solid #ededed;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    transition: all 0.3s ease;
    padding: 10px 0;
    padding: 20px 40px;
}
.faq-item.faq-open {
    background-color: #f1f8ff;
}
.faq-item:hover {
    background-color: #f1f8ff;
}


.faq-section h2 {
    padding-bottom: 0.8em;
    margin-bottom: 0.8em;
}

.faq-section h2 .subtitle {
    padding-top: 1.2em;
}


.faq-item:first-of-type {
    border-top: 1px solid #ededed;
}

.faq-question-h {
    margin: 0;

}


.faq-question-h, .faq-question-h button {
    color: #212020;
}

.faq-question-h:hover, .faq-question-h:hover button {
    color: #212020 !important;
}

.faq-open .faq-question-h, .faq-open .faq-question-h button {
    color: #212020;
    color: #0056b3 !important;
}



.faq-question {
    font-size: 18px;
    text-decoration: none;
    font-weight: 600;
    width: 100%;
    text-align: left;
    line-height: 1.4em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    border: transparent;
    margin: 0;
    position: relative;
    padding-right: 60px; /* zostawia miejsce na ikonę */
    padding-left: 0;
    min-height: 40px;
    cursor: pointer;
    background: none;

}

.faq-question:hover {
    border: transparent;
    color: #0089cd;
}

@media (min-width: 1500px) {
    .faq-question {

    }

}
.faq-answer {
    transition: height .4s ease, padding .3s ease;
    overflow: hidden;
    height:0px;
    font-weight:300;
    max-width: 760px;
    font-size: var(--big-title5c-font-size);
    color: var(--site-color-6);
}
.faq-answer strong {
    font-weight: 400;
}
.faq-answer a {
    font-weight:400;
    text-decoration: underline;
    color: var(--site-color-6);
}

.faq-item.faq-open .faq-answer{
    max-height:2000px; /* wystarczająco duże */
    height: auto;
}


.faq-item.faq-open .faq-question.plus::before {
    display: none;
}

/* Kwadratowy "obszar przycisku" */
/* Szare tło plusa */


/* Kreska pozioma */
.faq-question.plus::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 30px;
    width: 20px;
    height: 2px;
    background-color: #0089cd;
    transform: translate(10px, -50%);
    opacity: 1;
    transition: opacity 0.2s ease;
    z-index: 2;
}

/* Kreska pionowa */
.faq-question.plus::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 49px;
    width: 2px;
    height: 20px;
    background-color: #0089cd;
    transform: translate(20px, -50%);
    opacity: 1;
    transition: opacity 0.2s ease;
    z-index: 2;
}

/* Zwiększona widoczność po najechaniu */
.faq-question:hover::before,
.faq-question.plus:hover::after,
.faq-question.plus:hover::before {
    opacity: 0.9;
    background-color: #498677 !important;
}




.faq-section h2 {
    font-size: 32px;
    font-weight: 300;
    text-transform: uppercase;
    color: #212020;
    line-height: 1.2;
    text-align: left;
    margin-bottom: 20px;
}

.faq-section h2 span {
    font-weight: 600;
    line-height: 33px;
    display: block;
    clear: both;
}





/* CUSTOM */



.faq-section h2 span.subtitle {
    font-size: 20px;
    font-weight: 500;
    margin-top: 0;
    text-transform: none;
    padding-top: 16px;
    line-height: 1.6em;
}


@media (max-width: 768px) {
    .faq-section {
        flex-direction: column;
    }
    .faq-col {
        border-left: none;
        padding-left: 0px;
        width: 100%;
    }

    .faq-section h2 {
        width: 100%;
        padding-bottom: 30px;
    }

}



.faq-topcat-con {
    padding-top: 40px;
}

.faq-subcat-con {
    padding-left: 20px;
}

.faq-col .faq-cat-con:nth-child(1) {
    padding-top: 0;
}