/* ============================================================
   FAQ widget  —  frontend/widgets/faq/
   Self-contained accordion component. Shared by the hotel page
   and the /cazare/ category page. Moved out of pages/hotel.css.
   ============================================================ */

.tm-faq {
    padding: var(--tm-space-12) 0;
}

/* Section H2 — matches the shared section-title rule (font-size-xl /
   semibold / line-height 1.2 / letter-spacing -0.01em). */
.tm-faq-title {
    margin: 0 0 var(--tm-space-8);
    font-size: var(--tm-font-size-xl);
    font-weight: var(--tm-font-weight-semibold);
    color: var(--tm-dark);
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.tm-faq-grid {
    column-count: 2;
    column-gap: var(--tm-space-10);
}

.tm-faq-entry {
    break-inside: avoid;
    margin: 0 0 var(--tm-space-4);
    border: 1px solid var(--tm-gray-200);
    border-radius: var(--tm-radius-lg);
    background: var(--tm-white);
    transition: border-color var(--tm-transition-fast),
                box-shadow var(--tm-transition-fast);
}

.tm-faq-entry:hover {
    border-color: var(--tm-gray-300);
}

/* Open card — accent border + soft lift to single it out. */
.tm-faq-entry[open] {
    border-color: var(--tm-cta, var(--tm-primary));
    box-shadow: var(--tm-shadow-sm);
}

.tm-faq-question {
    display: flex;
    align-items: flex-start;
    gap: var(--tm-space-4);
    margin: 0;
    padding: var(--tm-space-4) var(--tm-space-5);
    font-size: var(--tm-font-size-md);
    font-weight: var(--tm-font-weight-semibold);
    color: var(--tm-dark);
    line-height: 1.4;
    cursor: pointer;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--tm-transition-fast);
}

.tm-faq-question::-webkit-details-marker { display: none; }
.tm-faq-question::marker { content: ''; }

.tm-faq-question:hover { color: var(--tm-cta, var(--tm-primary)); }

.tm-faq-question:focus-visible {
    outline: 2px solid var(--tm-cta, var(--tm-primary));
    outline-offset: 2px;
    border-radius: var(--tm-radius-sm);
}

.tm-faq-question-text {
    flex: 1;
    min-width: 0;
}

.tm-faq-toggle {
    flex: 0 0 auto;
    position: relative;
    width: 16px;
    height: 16px;
    margin-top: 4px;
    color: var(--tm-gray-500);
}

.tm-faq-toggle::before,
.tm-faq-toggle::after {
    content: "";
    position: absolute;
    background: currentColor;
    transition: transform var(--tm-transition-fast), opacity var(--tm-transition-fast);
}

.tm-faq-toggle::before {
    /* horizontal stroke — always visible */
    left: 0;
    right: 0;
    top: 50%;
    height: 1.5px;
    transform: translateY(-50%);
}

.tm-faq-toggle::after {
    /* vertical stroke — hides on open to produce a minus */
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1.5px;
    transform: translateX(-50%);
}

.tm-faq-entry[open] .tm-faq-toggle::after {
    transform: translateX(-50%) rotate(90deg);
    opacity: 0;
}

.tm-faq-answer {
    padding: 0 var(--tm-space-5) var(--tm-space-4);
    font-size: var(--tm-font-size-sm);
    color: var(--tm-gray-600);
    line-height: 1.65;
}

.tm-faq-answer p { margin: 0 0 var(--tm-space-3); }
.tm-faq-answer p:last-child { margin-bottom: 0; }
.tm-faq-answer ul,
.tm-faq-answer ol { padding-left: var(--tm-space-5); margin: 0 0 var(--tm-space-3); }
.tm-faq-answer a { color: var(--tm-cta, var(--tm-primary)); text-decoration: underline; }

@media (max-width: 991.98px) {
    .tm-faq-grid { column-count: 1; }
}

@media (max-width: 575.98px) {
    .tm-faq { padding: var(--tm-space-8) 0; }
    .tm-faq-title { margin-bottom: var(--tm-space-6); }
    .tm-faq-question { font-size: var(--tm-font-size-sm); }
}