/* Pytania i odpowiedzi.
   Przeniesione z responsive.css. */
/* FAQ and Tabs Components */

.faq--tabs--content {
    padding: 2rem 0 0 0
}

.ares .faq--single label {
    flex-direction: inherit
}

/* FAQ Component */
.faq {
    max-width: 800px;
    margin: 0 auto;
    overflow: hidden
}

.faq input[type=radio] {
    display: none
}

.faq--single {
    width: 100%;
    overflow: hidden;
    margin: .5rem 0
}

.faq--single input[type=radio] {
    display: none
}

.faq--single input[type=radio]:checked+label {
    border-bottom: 1px solid var(--color-grey);
    background: 0 0;
    color: var(--color-base-text)
}

.faq--single .faq-content input[type=radio]:checked+label {
    border-bottom: 2px solid var(--color-primary);
    background: 0 0;
    color: var(--color-base-text)
}

.faq--single input[type=radio]:checked+label+.tab {
    display: block
}

.faq-label {
    border-bottom: none;
    display: flex;
    justify-content: space-between;
    padding: 1em !important;
    background: var(--color-white);
    box-shadow: var(--shadow-card);
    border-radius: var(--radius-lg);
    font-weight: 700;
    cursor: pointer
}

.faq-label:hover {
    opacity: .6
}

.faq-label::after {
    content: "❯";
    width: 1em;
    height: 1em;
    text-align: center;
    transition: all .35s
}

.faq-content {
    max-height: 0;
    padding: 0 1em;
    color: var(--color-secondary);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    transition: all .35s
}

.faq-content h2,
.faq-content p {
    margin-top: 0
}

.faq-close {
    display: flex;
    justify-content: flex-end;
    padding: 1em;
    font-size: .75em;
    background: var(--color-secondary);
    cursor: pointer
}

.faq-close:hover {
    background: var(--color-secondary)
}

input:checked+.faq-label {
    color: var(--color-primary)
}

input:checked+.faq-label::after {
    transform: rotate(90deg)
}

input:checked~.faq-content {
    max-height: fit-content;
    padding: 1em
}