@import url('https://fonts.googleapis.com/css2?family=El+Messiri:wght@400..700&display=swap');

/* 1. Variables & Colors */
:root {
    /* ===== COLORS ===== */
    --ebtst1-bg: #ffffff;
    --ebtst1-shape1-bg: #00b4d8;
    --ebtst1-shape2-bg: #0077b6;

    --ebtst1-eyebrow-text: #0077b6;
    --ebtst1-title-text: #0f172a;
    --ebtst1-subtitle-text: #64748b;

    --ebtst1-card-bg: #f8fafc;
    --ebtst1-card-border: #e2e8f0;
    --ebtst1-card-shadow: 0 .5rem 1.5rem rgba(15, 23, 42, .06);
    --ebtst1-quote-icon-color: rgba(0, 119, 182, .16);
    --ebtst1-rating-star-color: #f59e0b;
    --ebtst1-rating-star-empty-color: #e2e8f0;
    --ebtst1-text-color: #334155;
    --ebtst1-avatar-bg: #e2e8f0;
    --ebtst1-avatar-initials-bg: linear-gradient(135deg, #00b4d8, #0077b6);
    --ebtst1-avatar-initials-text: #ffffff;
    --ebtst1-author-name-text: #0f172a;
    --ebtst1-author-role-text: #64748b;

    --ebtst1-arrow-bg: #ffffff;
    --ebtst1-arrow-border: #e2e8f0;
    --ebtst1-arrow-icon: #0f172a;
    --ebtst1-arrow-bg-hover: #0077b6;
    --ebtst1-arrow-icon-hover: #ffffff;

    --ebtst1-dot-bg: #e2e8f0;
    --ebtst1-dot-bg-active: #0077b6;

    /* ===== TYPOGRAPHY ===== */
    --ebtst1-font-family: "El Messiri", sans-serif;
    --ebtst1-eyebrow-font-size: clamp(.75rem, 3vw, .85rem);
    --ebtst1-eyebrow-font-weight: 700;
    --ebtst1-eyebrow-letter-spacing: .05em;
    --ebtst1-title-font-size: clamp(1.6rem, 5vw, 2.4rem);
    --ebtst1-title-font-weight: 700;
    --ebtst1-title-line-height: 1.3;
    --ebtst1-subtitle-font-size: clamp(.9rem, 3vw, 1.05rem);
    --ebtst1-subtitle-line-height: 1.7;
    --ebtst1-text-font-size: clamp(.9rem, 3vw, 1rem);
    --ebtst1-text-line-height: 1.8;
    --ebtst1-author-name-font-size: clamp(.9rem, 3vw, 1rem);
    --ebtst1-author-name-font-weight: 700;
    --ebtst1-author-role-font-size: .8rem;

    /* ===== SPACING ===== */
    --ebtst1-padding-top-desktop: 4rem;
    --ebtst1-padding-bottom-desktop: 4rem;
    --ebtst1-header-max-width: 40rem;
    --ebtst1-header-margin-bottom-desktop: 2.5rem;
    --ebtst1-eyebrow-margin-bottom: .75rem;
    --ebtst1-title-margin-bottom: .75rem;

    /* ===== LAYOUT ===== */
    --ebtst1-shape1-size: 14rem;
    --ebtst1-shape1-top: -4rem;
    --ebtst1-shape1-right: -4rem;
    --ebtst1-shape2-size: 12rem;
    --ebtst1-shape2-bottom: -3rem;
    --ebtst1-shape2-left: -3rem;
    --ebtst1-shape-radius: 50%;
    --ebtst1-shape-filter: blur(3rem);
    --ebtst1-shape-opacity: .3;
    --ebtst1-shape-z-index: 0;
    --ebtst1-container-max-width-desktop: 90rem;
    --ebtst1-container-padding-inline-desktop: 1.25rem;
    --ebtst1-container-z-index: 1;

    /* ===== SLIDER ===== */
    --ebtst1-slide-padding-inline: .6rem;
    --ebtst1-card-padding-desktop: 2rem 1.75rem;
    --ebtst1-card-radius: 1.25rem;
    --ebtst1-card-gap: 1rem;
    --ebtst1-arrow-size: 2.75rem;
    --ebtst1-arrow-radius: 50%;
    --ebtst1-arrow-font-size: 1rem;
    --ebtst1-dots-gap: .5rem;
    --ebtst1-dot-size: .55rem;
    --ebtst1-dot-size-active: 1.6rem;
    --ebtst1-dot-radius: 1rem;

    /* ===== QUOTE / RATING ===== */
    --ebtst1-quote-icon-size: 1.6rem;
    --ebtst1-rating-gap: .2rem;
    --ebtst1-rating-star-size: .85rem;

    /* ===== AVATAR ===== */
    --ebtst1-avatar-size: 3.2rem;
    --ebtst1-avatar-radius: 50%;
    --ebtst1-author-gap: .85rem;
    --ebtst1-author-info-gap: .15rem;

    /* ===== ANIMATION ===== */
    --ebtst1-animation-duration: .6s;
    --ebtst1-fade-up-distance: 1.2rem;
    --ebtst1-track-transition: transform .45s cubic-bezier(.22,.61,.36,1);

    /* ===== RESPONSIVE ===== */
    --ebtst1-header-margin-bottom-tablet-lg: 3rem;
    --ebtst1-container-padding-inline-desktop-lg: 2.5rem;
    --ebtst1-card-padding-desktop-lg: 2.5rem 2rem;
    --ebtst1-container-max-width-wide: 100rem;
    --ebtst1-padding-top-ultra: 6rem;
    --ebtst1-padding-bottom-ultra: 6rem;
}

/* 2. Reset داخل الـ namespace */
.ebtst1, .ebtst1 *, .ebtst1 *::before, .ebtst1 *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* 3. Base Styles — Mobile */
.ebtst1 {
    position: relative;
    overflow: hidden;
    background: var(--ebtst1-bg);
    padding-top: var(--ebtst1-padding-top-desktop);
    padding-bottom: var(--ebtst1-padding-bottom-desktop);
    font-family: var(--ebtst1-font-family);
    direction: rtl;
}

.ebtst1__shape-1, .ebtst1__shape-2 {
    position: absolute;
    border-radius: var(--ebtst1-shape-radius);
    filter: var(--ebtst1-shape-filter);
    opacity: var(--ebtst1-shape-opacity);
    pointer-events: none;
    z-index: var(--ebtst1-shape-z-index);
}
.ebtst1__shape-1 { width: var(--ebtst1-shape1-size); height: var(--ebtst1-shape1-size); top: var(--ebtst1-shape1-top); right: var(--ebtst1-shape1-right); background: var(--ebtst1-shape1-bg); }
.ebtst1__shape-2 { width: var(--ebtst1-shape2-size); height: var(--ebtst1-shape2-size); bottom: var(--ebtst1-shape2-bottom); left: var(--ebtst1-shape2-left); background: var(--ebtst1-shape2-bg); }

.ebtst1__container {
    position: relative;
    z-index: var(--ebtst1-container-z-index);
    max-width: var(--ebtst1-container-max-width-desktop);
    margin: 0 auto;
    padding-inline: var(--ebtst1-container-padding-inline-desktop);
}

.ebtst1__header { text-align: center; max-width: var(--ebtst1-header-max-width); margin: 0 auto var(--ebtst1-header-margin-bottom-desktop); }
.ebtst1__eyebrow {
    display: inline-block;
    font-size: var(--ebtst1-eyebrow-font-size);
    font-weight: var(--ebtst1-eyebrow-font-weight);
    letter-spacing: var(--ebtst1-eyebrow-letter-spacing);
    color: var(--ebtst1-eyebrow-text);
    margin-bottom: var(--ebtst1-eyebrow-margin-bottom);
}
.ebtst1__title {
    font-size: var(--ebtst1-title-font-size);
    font-weight: var(--ebtst1-title-font-weight);
    color: var(--ebtst1-title-text);
    margin-bottom: var(--ebtst1-title-margin-bottom);
    line-height: var(--ebtst1-title-line-height);
}
.ebtst1__subtitle {
    font-size: var(--ebtst1-subtitle-font-size);
    color: var(--ebtst1-subtitle-text);
    line-height: var(--ebtst1-subtitle-line-height);
}

/* Slider */
.ebtst1__slider { position: relative; }
.ebtst1__viewport { overflow: hidden; touch-action: pan-y; cursor: grab; }
.ebtst1__viewport:active { cursor: grabbing; }
.ebtst1__track {
    display: flex;
    transition: var(--ebtst1-track-transition);
    will-change: transform;
}
.ebtst1__slide {
    flex: 0 0 100%;
    max-width: 100%;
    padding-inline: var(--ebtst1-slide-padding-inline);
    display: flex;
}

.ebtst1__card {
    position: relative;
    width: 100%;
    background: var(--ebtst1-card-bg);
    border: 1px solid var(--ebtst1-card-border);
    border-radius: var(--ebtst1-card-radius);
    padding: var(--ebtst1-card-padding-desktop);
    box-shadow: var(--ebtst1-card-shadow);
    display: flex;
    flex-direction: column;
    gap: var(--ebtst1-card-gap);
    animation: ebtst1-fade-up var(--ebtst1-animation-duration) ease both;
}

@keyframes ebtst1-fade-up {
    from { opacity: 0; transform: translateY(var(--ebtst1-fade-up-distance)); }
    to { opacity: 1; transform: translateY(0); }
}

.ebtst1__quote-icon { font-size: var(--ebtst1-quote-icon-size); color: var(--ebtst1-quote-icon-color); line-height: 1; }

.ebtst1__rating { display: flex; align-items: center; gap: var(--ebtst1-rating-gap); }
.ebtst1__rating i { font-size: var(--ebtst1-rating-star-size); color: var(--ebtst1-rating-star-empty-color); }
.ebtst1__rating i.ebtst1__star--filled { color: var(--ebtst1-rating-star-color); }

.ebtst1__text {
    font-size: var(--ebtst1-text-font-size);
    line-height: var(--ebtst1-text-line-height);
    color: var(--ebtst1-text-color);
    flex: 1;
}

.ebtst1__author { display: flex; align-items: center; gap: var(--ebtst1-author-gap); margin-top: auto; }
.ebtst1__avatar {
    width: var(--ebtst1-avatar-size); height: var(--ebtst1-avatar-size);
    border-radius: var(--ebtst1-avatar-radius);
    background: var(--ebtst1-avatar-bg);
    overflow: hidden;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.ebtst1__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ebtst1__avatar--initials {
    background: var(--ebtst1-avatar-initials-bg);
    color: var(--ebtst1-avatar-initials-text);
    font-weight: 700;
    font-size: calc(var(--ebtst1-avatar-size) * .38);
}
.ebtst1__author-info { display: flex; flex-direction: column; gap: var(--ebtst1-author-info-gap); min-width: 0; }
.ebtst1__author-name { font-size: var(--ebtst1-author-name-font-size); font-weight: var(--ebtst1-author-name-font-weight); color: var(--ebtst1-author-name-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ebtst1__author-role { font-size: var(--ebtst1-author-role-font-size); color: var(--ebtst1-author-role-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Arrows */
.ebtst1__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: var(--ebtst1-arrow-size); height: var(--ebtst1-arrow-size);
    border-radius: var(--ebtst1-arrow-radius);
    background: var(--ebtst1-arrow-bg);
    border: 1px solid var(--ebtst1-arrow-border);
    color: var(--ebtst1-arrow-icon);
    font-size: var(--ebtst1-arrow-font-size);
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: background .2s ease, color .2s ease;
}
.ebtst1__arrow:hover { background: var(--ebtst1-arrow-bg-hover); color: var(--ebtst1-arrow-icon-hover); }
.ebtst1__arrow--prev { right: -.5rem; }
.ebtst1__arrow--next { left: -.5rem; }

/* Dots */
.ebtst1__dots { display: flex; align-items: center; justify-content: center; gap: var(--ebtst1-dots-gap); margin-top: 1.5rem; }
.ebtst1__dot {
    width: var(--ebtst1-dot-size); height: var(--ebtst1-dot-size);
    border-radius: var(--ebtst1-dot-radius);
    background: var(--ebtst1-dot-bg);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: width .25s ease, background .25s ease;
}
.ebtst1__dot--active { width: var(--ebtst1-dot-size-active); background: var(--ebtst1-dot-bg-active); }

/* 4. Breakpoints */
@media (min-width: 601px) {
    .ebtst1__header { margin-bottom: var(--ebtst1-header-margin-bottom-tablet-lg); }
}
@media (min-width: 769px) {
    .ebtst1__arrow { display: flex; }
    .ebtst1__arrow--prev { right: -1.4rem; }
    .ebtst1__arrow--next { left: -1.4rem; }
}
@media (min-width: 1025px) {
    .ebtst1__container { padding-inline: var(--ebtst1-container-padding-inline-desktop-lg); }
    .ebtst1__card { padding: var(--ebtst1-card-padding-desktop-lg); }
}
@media (min-width: 1441px) {
    .ebtst1__container { max-width: var(--ebtst1-container-max-width-wide); }
}
@media (min-width: 1921px) {
    .ebtst1 { padding-top: var(--ebtst1-padding-top-ultra); padding-bottom: var(--ebtst1-padding-bottom-ultra); }
}

@media (max-width: 768px) {
    .ebtst1 { padding-top: 1.75rem !important; padding-bottom: 1.75rem !important; }
    .ebtst1__header { margin-bottom: 1.25rem !important; }
    .ebtst1__container { padding-inline: 0.75rem !important; }
}
@media (max-width: 480px) {
    .ebtst1__container { padding-inline: 0.625rem !important; }
}
@media (max-width: 380px) {
    .ebtst1__container { padding-inline: 0.5rem !important; }
}