/* ==========================================================
   ebmnt1-faq.css
   الأسئلة الشائعة: accordion بنفس هوية الموقع
   (كروت فاتحة بحواف 15px + مربع أصفر بالأيقونة + الكارد المفتوح أزرق)
   وصورة بركن مقطوع (notch) فيها عدّاد سنين الخبرة وكارد اتصال
   ========================================================== */

:root {
    /* ---------- ألوان ---------- */
    --ebmnt1-faq-item-background-color: var(--ebmnt1-color-helper-surface);
    --ebmnt1-faq-item-open-background-color: var(--ebmnt1-color-primary-blue);
    --ebmnt1-faq-item-border-color: var(--ebmnt1-color-helper-border-gray);
    --ebmnt1-faq-item-open-border-color: var(--ebmnt1-color-primary-blue);
    --ebmnt1-faq-question-text-color: var(--ebmnt1-color-helper-heading-dark);
    --ebmnt1-faq-question-open-text-color: var(--ebmnt1-color-helper-white);
    --ebmnt1-faq-answer-text-color: var(--ebmnt1-color-helper-body-gray);
    --ebmnt1-faq-answer-open-text-color: var(--ebmnt1-color-helper-surface);
    --ebmnt1-faq-icon-background-color: var(--ebmnt1-color-secondary-yellow);
    --ebmnt1-faq-icon-color: var(--ebmnt1-color-helper-heading-dark);
    --ebmnt1-faq-item-hover-border-color: var(--ebmnt1-color-primary-blue);

    /* عدّاد الخبرة */
    --ebmnt1-faq-counter-card-background-color: var(--ebmnt1-color-primary-blue);
    --ebmnt1-faq-counter-number-text-color: var(--ebmnt1-color-helper-white);
    --ebmnt1-faq-counter-caption-text-color: var(--ebmnt1-color-helper-white);

    /* كارد الاتصال */
    --ebmnt1-faq-call-card-background-color: var(--ebmnt1-color-secondary-yellow);
    --ebmnt1-faq-call-card-hover-background-color: var(--ebmnt1-color-primary-blue);
    --ebmnt1-faq-call-icon-background-color: var(--ebmnt1-color-helper-white);
    --ebmnt1-faq-call-icon-color: var(--ebmnt1-color-primary-blue);
    --ebmnt1-faq-call-text-color: var(--ebmnt1-color-helper-heading-dark);
    --ebmnt1-faq-call-hover-text-color: var(--ebmnt1-color-helper-white);

    /* ---------- مقاسات ---------- */
    --ebmnt1-faq-layout-gap: 2.5em;
    --ebmnt1-faq-list-gap: 1em;
    --ebmnt1-faq-item-radius: 15px;
    --ebmnt1-faq-trigger-padding-block: 1.1em;
    --ebmnt1-faq-trigger-padding-inline: 1.25em;
    --ebmnt1-faq-answer-padding-block-end: 1.25em;
    --ebmnt1-faq-icon-size: 2.4rem;
    --ebmnt1-faq-icon-radius: 10px;
    --ebmnt1-faq-icon-font-size: clamp(0.8rem, 0.75rem + 0.2vw, 0.95rem);
    --ebmnt1-faq-media-height: 24rem;
    --ebmnt1-faq-counter-font-size: clamp(2.5rem, 2rem + 2vw, 4rem);
}

@media (min-width: 768px) {
    :root {
        --ebmnt1-faq-media-height: 30rem;
    }
}

@media (min-width: 1024px) {
    :root {
        --ebmnt1-faq-media-height: 38rem;
        --ebmnt1-faq-layout-gap: 3.125em;
    }
}

.ebmnt1-faq__layout {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--ebmnt1-faq-layout-gap);
}

/* ---------- الصورة ---------- */
.ebmnt1-faq__media {
    order: 2;
    width: 100%;
}

.ebmnt1-faq__media-frame {
    height: var(--ebmnt1-faq-media-height);
}

.ebmnt1-faq__counter-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25em;
    min-width: 7.5rem;
    padding: 1em 1.25em;
    border-radius: var(--ebmnt1-radius-card);
    background-color: var(--ebmnt1-faq-counter-card-background-color);
    text-align: center;
}

.ebmnt1-faq__counter-number {
    font-size: var(--ebmnt1-faq-counter-font-size);
    font-weight: var(--ebmnt1-font-weight-bold);
    line-height: 1;
    color: var(--ebmnt1-faq-counter-number-text-color);
}

.ebmnt1-faq__counter-caption {
    font-size: var(--ebmnt1-font-size-label);
    font-weight: var(--ebmnt1-font-weight-medium);
    line-height: 1.2;
    color: var(--ebmnt1-faq-counter-caption-text-color);
}

.ebmnt1-faq__call-card {
    display: flex;
    align-items: center;
    gap: 0.9em;
    padding: 0.9em 1.1em;
    border-radius: var(--ebmnt1-radius-card);
    background-color: var(--ebmnt1-faq-call-card-background-color);
    color: var(--ebmnt1-faq-call-text-color);
    text-align: start;
    transition: background-color var(--ebmnt1-transition-base), color var(--ebmnt1-transition-base);
}

.ebmnt1-faq__call-card:hover {
    background-color: var(--ebmnt1-faq-call-card-hover-background-color);
    color: var(--ebmnt1-faq-call-hover-text-color);
}

.ebmnt1-faq__call-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: var(--ebmnt1-faq-call-icon-background-color);
    font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem);
    color: var(--ebmnt1-faq-call-icon-color);
}

.ebmnt1-faq__call-text {
    display: flex;
    flex-direction: column;
    font-size: var(--ebmnt1-font-size-label);
    font-weight: var(--ebmnt1-font-weight-semibold);
    line-height: 1.4;
}

.ebmnt1-faq__call-number {
    direction: ltr;
    text-align: start;
}

/* ---------- المحتوى ---------- */
.ebmnt1-faq__content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.75em;
}

.ebmnt1-faq__list {
    display: flex;
    flex-direction: column;
    gap: var(--ebmnt1-faq-list-gap);
}

.ebmnt1-faq__item {
    overflow: hidden;
    border: 1px solid var(--ebmnt1-faq-item-border-color);
    border-radius: var(--ebmnt1-faq-item-radius);
    background-color: var(--ebmnt1-faq-item-background-color);
    transition: background-color var(--ebmnt1-transition-base), border-color var(--ebmnt1-transition-base);
}

.ebmnt1-faq__item:hover {
    border-color: var(--ebmnt1-faq-item-hover-border-color);
}

.ebmnt1-faq__item.ebmnt1-is-open {
    border-color: var(--ebmnt1-faq-item-open-border-color);
    background-color: var(--ebmnt1-faq-item-open-background-color);
}

.ebmnt1-faq__question {
    font-size: var(--ebmnt1-font-size-small-title);
    font-weight: var(--ebmnt1-font-weight-semibold);
}

.ebmnt1-faq__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    padding: var(--ebmnt1-faq-trigger-padding-block) var(--ebmnt1-faq-trigger-padding-inline);
    text-align: start;
    font-size: inherit;
    font-weight: inherit;
    line-height: 1.4;
    color: var(--ebmnt1-faq-question-text-color);
    transition: color var(--ebmnt1-transition-base);
}

.ebmnt1-faq__item.ebmnt1-is-open .ebmnt1-faq__trigger {
    color: var(--ebmnt1-faq-question-open-text-color);
}

.ebmnt1-faq__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--ebmnt1-faq-icon-size);
    height: var(--ebmnt1-faq-icon-size);
    border-radius: var(--ebmnt1-faq-icon-radius);
    background-color: var(--ebmnt1-faq-icon-background-color);
    font-size: var(--ebmnt1-faq-icon-font-size);
    color: var(--ebmnt1-faq-icon-color);
    transition: transform var(--ebmnt1-transition-base);
}

.ebmnt1-faq__icon-minus {
    display: none;
}

.ebmnt1-faq__item.ebmnt1-is-open .ebmnt1-faq__icon-plus {
    display: none;
}

.ebmnt1-faq__item.ebmnt1-is-open .ebmnt1-faq__icon-minus {
    display: inline-block;
}

.ebmnt1-faq__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--ebmnt1-transition-base);
}

.ebmnt1-faq__item.ebmnt1-is-open .ebmnt1-faq__panel {
    grid-template-rows: 1fr;
}

.ebmnt1-faq__panel-inner {
    min-height: 0;
    overflow: hidden;
}

.ebmnt1-faq__answer {
    text-align: start;
    padding-inline: var(--ebmnt1-faq-trigger-padding-inline);
    padding-block-end: var(--ebmnt1-faq-answer-padding-block-end);
    color: var(--ebmnt1-faq-answer-text-color);
}

.ebmnt1-faq__item.ebmnt1-is-open .ebmnt1-faq__answer {
    color: var(--ebmnt1-faq-answer-open-text-color);
}

/* ---------- تابلت ---------- */
@media (min-width: 768px) {
    .ebmnt1-faq__content .ebmnt1-section-heading {
        align-items: flex-start;
        text-align: start;
    }
}

/* ---------- لابتوب: الصورة جنب المحتوى ---------- */
@media (min-width: 1024px) {
    .ebmnt1-faq__layout {
        flex-direction: row;
        align-items: center;
    }

    .ebmnt1-faq__media {
        order: 0;
        flex: 0 0 40%;
        width: 40%;
    }

    .ebmnt1-faq__content {
        flex: 1 1 0;
    }
}