/**
 * KKeyQik FAQ Accordion — Styles
 * Structural CSS only. All visual colors come from Elementor selectors.
 * @package KKeyQik
 */

/* ── Wrapper ── */
.kk-faq-wrapper {
    width: 100%;
    overflow: hidden;
}

/* ── Search Bar ── */
.kk-faq-search {
    position: relative;
    margin-bottom: 1.25rem;
}
.kk-faq-search input {
    width: 100%;
    padding: 14px 18px 14px 48px;
    font-size: 15px;
    border: 1px solid #e0e0e0;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
}
.kk-faq-search input:focus {
    border-color: #2F6D46;
    box-shadow: 0 0 0 3px rgba(47,109,70,0.12);
}
.kk-faq-search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    display: flex;
}

/* ── Category Tabs ── */
.kk-faq-tabs {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.kk-faq-tab {
    border: none;
    cursor: pointer;
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 600;
    transition: background-color 0.2s, color 0.2s;
    font-family: inherit;
    line-height: 1.4;
}
.kk-faq-tab:focus-visible {
    outline: 2px solid #2F6D46;
    outline-offset: 2px;
}

/* ── FAQ Item ── */
.kk-faq-item {
    overflow: hidden;
    transition: opacity 0.2s;
}
.kk-faq-item--hidden {
    display: none;
}

/* ── Question Button ── */
.kk-faq-question {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: left;
    border: none;
    cursor: pointer;
    font-family: inherit;
    gap: 14px;
    transition: background-color 0.2s, color 0.2s;
    -webkit-appearance: none;
    appearance: none;
    min-height: 48px; /* touch target */
}
.kk-faq-question:focus-visible {
    outline: 2px solid #2F6D46;
    outline-offset: -2px;
}
.kk-faq-question-text {
    flex: 1;
    font-weight: 600;
    min-width: 0;
    word-break: break-word;
    padding-right: 0 !important; /* Force text to utilize available space */
}

/* ═══════════════════════════════════════════
   ICON — Dual Icon Morph Animation
   Both open+close icons stacked; CSS toggles visibility
   ═══════════════════════════════════════════ */
.kk-faq-icon {
    flex-shrink: 0;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.kk-faq-icon i,
.kk-faq-icon svg {
    display: block;
}

/* Closed + Open icon positioning */
.kk-faq-icon-closed,
.kk-faq-icon-open {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Default state: show closed, hide open */
.kk-faq-icon-closed {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
}
.kk-faq-icon-open {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3) rotate(-90deg);
}

/* Open state: hide closed, show open — morph/submerge animation */
.kk-faq-item--open .kk-faq-icon-closed {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3) rotate(90deg);
}
.kk-faq-item--open .kk-faq-icon-open {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
}

/* ═══════════════════════════════════════════
   TEXT ALIGNMENT — Q & A start at same point
   Answer inner padding aligns with question text start
   ═══════════════════════════════════════════ */

/* When icon is on the LEFT: answer text indents to match question text */
.kk-faq-iconpos--left .kk-faq-answer-inner {
    /* icon width (20px default) + gap (14px) = 34px — use the same padding */
    padding-left: calc(var(--kk-faq-icon-size, 20px) + 14px);
}

/* When icon is on the RIGHT: both question text and answer already start flush left */

/* ── Answer Panel ── */
.kk-faq-answer {
    overflow: hidden;
    transition: max-height var(--kk-faq-speed, 300ms) cubic-bezier(0.4, 0, 0.2, 1),
                opacity var(--kk-faq-speed, 300ms) ease;
    max-height: 0;
    opacity: 0;
}
.kk-faq-answer[hidden] {
    display: block !important;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
}
.kk-faq-answer--open {
    opacity: 1;
    visibility: visible;
}
.kk-faq-answer-inner {
    line-height: 1.7;
}
.kk-faq-answer-inner p:last-child {
    margin-bottom: 0;
}
.kk-faq-answer-inner a {
    color: inherit;
    text-decoration-line: underline;
    text-decoration-color: currentColor;
}
.kk-faq-answer-inner ul,
.kk-faq-answer-inner ol {
    padding-left: 1.5em;
    margin-bottom: 1em;
}
.kk-faq-answer-inner img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 0.5em 0;
}

/* ── Separator between items (border-top on subsequent questions) ── */
/* Styles come from Elementor selectors but we need the default base on .kk-faq-item */
.kk-faq-item + .kk-faq-item {
    border-top-style: solid;
    border-top-width: 1px;
    border-top-color: #e0e0e0;
}

/* ── No Results ── */
.kk-faq-no-results {
    text-align: center;
    padding: 2rem 1rem;
    color: #6c757d;
    font-size: 15px;
    display: none;
}
.kk-faq-no-results--visible {
    display: block;
}

/* ═══════════════════════════════════════════
   RESPONSIVE — Comprehensive breakpoints
   ═══════════════════════════════════════════ */

/* Tablet: ≤1024px */
@media (max-width: 1024px) {
    .kk-faq-question {
        gap: 12px;
    }
    .kk-faq-tabs {
        gap: 6px !important;
    }
    .kk-faq-tab {
        padding: 7px 14px;
        font-size: 13px;
    }
}

/* Mobile landscape: ≤768px */
@media (max-width: 768px) {
    .kk-faq-question {
        gap: 10px;
    }
    .kk-faq-search input {
        font-size: 14px;
        padding: 12px 14px 12px 42px;
    }
    .kk-faq-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 4px;
    }
    .kk-faq-tabs::-webkit-scrollbar {
        display: none;
    }
    .kk-faq-tab {
        white-space: nowrap;
        flex-shrink: 0;
    }
}

/* Mobile portrait: ≤480px */
@media (max-width: 480px) {
    .kk-faq-search input {
        font-size: 13px;
        padding: 10px 12px 10px 38px;
    }
    .kk-faq-search-icon {
        left: 12px;
    }
    .kk-faq-search-icon svg {
        width: 16px;
        height: 16px;
    }
    .kk-faq-tab {
        padding: 6px 12px;
        font-size: 12px;
    }
    .kk-faq-answer-inner img {
        border-radius: 4px;
    }
}