/* Hide the checkbox visually — it's only used as a state toggle */
input[type="checkbox"] {
position: absolute;
opacity: 0;
pointer-events: none;
}

.faq-item {
border: 1px solid #e0e0e0;
border-radius: 12px;
margin-bottom: 10px;
overflow: hidden;
}

/* The <label> acts as the clickable question row.
    Clicking it toggles the linked checkbox via the `for` attribute. */
.faq-label {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 18px 20px;
cursor: pointer;
font-size: 15px;
font-weight: 500;
}
.faq-label:hover { background: #f5f5f5; }

.faq-icon {
font-size: 18px;
flex-shrink: 0;
transition: transform 0.25s ease;
}

/* Answer panel — collapsed by default */
.faq-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.25s ease;
padding: 0 20px;
}

.faq-body p {
font-size: 14px;
line-height: 1.7;
border-top: 1px solid #e0e0e0;
padding-top: 14px;
margin: 0;
text-align: left;
}

/* ─── The CSS trick: sibling selectors ──────────────────────────────
    When the checkbox is :checked, target its NEXT siblings with ~
    The HTML order must be: <input> → <label> → <div.faq-body>      */

input:checked ~ .faq-label .faq-icon {
transform: rotate(180deg);   /* flip the chevron */
}

input:checked ~ .faq-body {
max-height: 300px;           /* expand the panel */
padding: 14px 20px 18px;
}