/* ============================================================
   EBVID1 — Video Gallery
   Namespace  : ebvid1
============================================================ */

/* 1. Variables & Colors */
.ebvid1 {

   
    --ebvid1-bg: transparent;
    --ebvid1-ring: #ffffff;
    --ebvid1-ring-active: #d8b06a;
    --ebvid1-shadow: rgba(0, 0, 0, 0.2);
    --ebvid1-padding-top: 1.25rem;
    --ebvid1-padding-bottom: 6.25rem;

   
    --ebvid1-icon-bg: rgba(0, 0, 0, 0.5);
    --ebvid1-icon-text: #ffffff;

    --ebvid1-size-sm: 6.25rem;
    --ebvid1-size-lg: 20rem;
}

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

/* 3. Base Styles — Mobile */
.ebvid1 {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: var(--ebvid1-padding-top);
    padding-bottom: var(--ebvid1-padding-bottom);
    background-color: var(--ebvid1-bg);
    direction: rtl;
}

.ebvid1__container {
    position: relative;
    width: 100%;
    max-width: 62.5rem;
    height: 28rem;
}

.ebvid1__wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.5s ease;
    will-change: transform;
}

.ebvid1__item {
    width: var(--ebvid1-size-sm);
    height: var(--ebvid1-size-sm);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;
    border: 0.3125rem solid var(--ebvid1-ring);
    cursor: pointer;
    display: block;
    transition: width 0.5s ease, height 0.5s ease, border 0.5s ease;
}

.ebvid1__item--active {
    width: var(--ebvid1-size-lg);
    height: var(--ebvid1-size-lg);
    border: 0.5rem solid var(--ebvid1-ring-active);
    z-index: 10;
    box-shadow: 0 0.625rem 1.875rem var(--ebvid1-shadow);
}

.ebvid1__icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2.5rem;
    height: 2.5rem;
    background-color: var(--ebvid1-icon-bg);
    border: 0;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    pointer-events: none;
}

.ebvid1__icon::before {
    content: "\25B6";
    color: var(--ebvid1-icon-text);
    font-size: 1.25rem;
    line-height: 1;
}

.ebvid1__icon--hidden {
    display: none;
}

/* 4. Breakpoints بالترتيب */
@media (min-width: 481px) {
    .ebvid1__container {
        height: 28rem;
    }
}

@media (min-width: 601px) {
    .ebvid1__container {
        height: 30rem;
    }
}

@media (min-width: 769px) {
    .ebvid1 {
        --ebvid1-size-sm: 9.375rem;
        --ebvid1-size-lg: 18.75rem;
    }

    .ebvid1__container {
        height: 31.25rem;
    }
}

@media (min-width: 1025px) {
    .ebvid1__container {
        max-width: 68.75rem;
    }
}

@media (min-width: 1281px) {
    .ebvid1__container {
        max-width: 75rem;
    }
}

@media (min-width: 1441px) {
    .ebvid1__container {
        max-width: 81.25rem;
    }
}

@media (min-width: 1921px) {
    .ebvid1__container {
        max-width: 87.5rem;
    }
}