@charset "UTF-8";

/*
|--------------------------------------------------------------------------
| الملف: public_html/assets/css/shared/components/provider-portfolio-slider.css
| الوصف:
|   أنماط مكوّن عارض شرائح "نماذج من أعمالي".
|
| الهدف:
|   - توفير ستايل مستقل قابل لإعادة الاستخدام في أي صفحة داخل المنصة.
|   - دعم عرض الصور وملفات PDF وروابط يوتيوب ضمن عارض موحد.
|   - دعم الأسهم والنقاط والعنوان الاختياري أسفل الشريحة.
|   - دعم العرض المتجاوب على الشاشات الكبيرة والجوال.
|   - دعم فتح الصورة داخل lightbox.
|   - دعم تشغيل فيديو يوتيوب داخل الشريحة نفسها.
|
| ملاحظات:
|   - هذا الملف لا يحتوي على منطق JavaScript.
|   - الحركة التلقائية والتنقل بين الشرائح تتم عبر ملف JS مستقل.
|   - تم تصميم الأنماط لتعمل بشكل مستقل قدر الإمكان عن صفحة البروفايل.
|--------------------------------------------------------------------------
*/

.provider-portfolio-slider {
    --provider-portfolio-slider-radius: 22px;
    --provider-portfolio-slider-border: #dbe4ef;
    --provider-portfolio-slider-surface: #ffffff;
    --provider-portfolio-slider-soft-surface: #f8fbff;
    --provider-portfolio-slider-soft-surface-2: #f4f8fc;
    --provider-portfolio-slider-text: #11243a;
    --provider-portfolio-slider-muted: #627489;
    --provider-portfolio-slider-brand: #0b4f7b;
    --provider-portfolio-slider-brand-soft: rgba(11, 79, 123, 0.08);
    --provider-portfolio-slider-shadow: 0 16px 34px rgba(15, 35, 58, 0.06);
    --provider-portfolio-slider-arrow-size: 48px;
    --provider-portfolio-slider-track-min-height: clamp(300px, 42vw, 460px);
    --provider-portfolio-slider-caption-min-height: 0px;
    --provider-portfolio-slider-lightbox-z: 1300;
    --provider-portfolio-slider-lightbox-safe-top: max(24px, env(safe-area-inset-top, 0px));
    --provider-portfolio-slider-lightbox-safe-bottom: max(24px, env(safe-area-inset-bottom, 0px));
    --provider-portfolio-slider-lightbox-safe-inline: max(18px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));

    display: grid;
    gap: 14px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.provider-portfolio-slider__empty {
    display: grid;
    place-items: center;
    min-height: 180px;
    padding: 20px;
    border: 1px dashed #cfdae6;
    border-radius: 18px;
    background:
        radial-gradient(circle at top, rgba(11, 79, 123, 0.04), transparent 44%),
        linear-gradient(180deg, #fcfdff 0%, #f7fbff 100%);
}

.provider-portfolio-slider__empty-text {
    margin: 0;
    color: var(--provider-portfolio-slider-muted);
    font-size: 14px;
    line-height: 1.9;
    font-weight: 800;
    text-align: center;
}

.provider-portfolio-slider__viewport {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    min-width: 0;
    isolation: isolate;
}

.provider-portfolio-slider__track {
    position: relative;
    z-index: 1;
    overflow: hidden;
    min-width: 0;
    min-height: var(--provider-portfolio-slider-track-min-height);
    border: 1px solid var(--provider-portfolio-slider-border);
    border-radius: var(--provider-portfolio-slider-radius);
    background:
        radial-gradient(circle at top, rgba(11, 79, 123, 0.05), transparent 42%),
        linear-gradient(180deg, #fdfefe 0%, #f7fbff 100%);
    box-shadow: var(--provider-portfolio-slider-shadow);
}

.provider-portfolio-slider__slide {
    display: grid;
    align-content: start;
    gap: 0;
    width: 100%;
    min-width: 0;
    min-height: var(--provider-portfolio-slider-track-min-height);
    background: transparent;
}

.provider-portfolio-slider__slide[hidden] {
    display: none !important;
}

.provider-portfolio-slider__slide-media {
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: var(--provider-portfolio-slider-track-min-height);
    border-radius: inherit;
    background:
        radial-gradient(circle at top, rgba(11, 79, 123, 0.045), transparent 46%),
        linear-gradient(180deg, #fcfdff 0%, #f5f9fd 100%);
}

/* ==========================================================================
   الصور
   ========================================================================== */

.provider-portfolio-slider__image-trigger {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    min-height: var(--provider-portfolio-slider-track-min-height);
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
    text-align: inherit;
}

.provider-portfolio-slider__image-trigger:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 4px rgba(11, 79, 123, 0.14);
}

.provider-portfolio-slider__slide-image,
.provider-portfolio-slider__slide-youtube-image {
    display: block;
    width: 100%;
    height: var(--provider-portfolio-slider-track-min-height);
}

.provider-portfolio-slider__slide-image {
    object-fit: cover;
}

.provider-portfolio-slider__slide-youtube-image {
    object-fit: contain;
    background: #0f1720;
}

.provider-portfolio-slider__image-trigger-badge {
    position: absolute;
    inset-inline-end: 14px;
    inset-block-end: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.64);
    color: #ffffff;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 900;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition:
        opacity 0.18s ease,
        transform 0.18s ease,
        background-color 0.18s ease;
}

.provider-portfolio-slider__image-trigger:hover .provider-portfolio-slider__image-trigger-badge {
    transform: translateY(-1px);
    background: rgba(15, 23, 42, 0.76);
}

/* ==========================================================================
   PDF
   ========================================================================== */

.provider-portfolio-slider__slide-pdf,
.provider-portfolio-slider__slide-youtube,
.provider-portfolio-slider__slide-unknown {
    position: relative;
    width: 100%;
    min-height: var(--provider-portfolio-slider-track-min-height);
    display: grid;
    place-items: center;
}

.provider-portfolio-slider__slide-pdf {
    gap: 14px;
    padding: 28px 18px;
    background:
        radial-gradient(circle at top, rgba(11, 79, 123, 0.05), transparent 44%),
        linear-gradient(180deg, #fcfdff 0%, #f3f8fd 100%);
}

.provider-portfolio-slider__slide-pdf-icon {
    display: block;
    width: min(92px, 24vw);
    height: auto;
}

.provider-portfolio-slider__slide-pdf-download {
    min-width: 118px;
}

/* ==========================================================================
   يوتيوب
   ========================================================================== */

.provider-portfolio-slider__slide-youtube {
    overflow: hidden;
    background: #0f1720;
}

.provider-portfolio-slider__youtube-trigger {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    min-height: var(--provider-portfolio-slider-track-min-height);
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-align: inherit;
    overflow: hidden;
}

.provider-portfolio-slider__youtube-trigger > .provider-portfolio-slider__slide-youtube-image,
.provider-portfolio-slider__youtube-trigger > .provider-portfolio-slider__slide-youtube-fallback {
    position: relative;
    z-index: 0;
}

.provider-portfolio-slider__youtube-trigger:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.14);
}

.provider-portfolio-slider__slide-youtube-play {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.72);
    color: #ffffff;
    font-size: 24px;
    line-height: 1;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
    pointer-events: none;
}

.provider-portfolio-slider__youtube-trigger-label {
    position: absolute;
    inset-inline-end: 14px;
    inset-block-end: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.64);
    color: #ffffff;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 900;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    pointer-events: none;
    transition:
        opacity 0.18s ease,
        transform 0.18s ease,
        background-color 0.18s ease;
}

.provider-portfolio-slider__youtube-trigger:hover .provider-portfolio-slider__youtube-trigger-label {
    transform: translateY(-1px);
    background: rgba(15, 23, 42, 0.76);
}

.provider-portfolio-slider__youtube-player {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #000000;
}

.provider-portfolio-slider__youtube-player iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.provider-portfolio-slider__slide-youtube[data-is-playing="true"] .provider-portfolio-slider__youtube-trigger {
    display: none;
}

.provider-portfolio-slider__slide-youtube[data-is-playing="true"] .provider-portfolio-slider__youtube-player[hidden] {
    display: block !important;
}

.provider-portfolio-slider__slide-youtube-fallback,
.provider-portfolio-slider__slide-unknown {
    color: #476380;
    font-size: 42px;
    line-height: 1;
    font-weight: 900;
}

/* ==========================================================================
   العنوان
   ========================================================================== */

.provider-portfolio-slider__slide-caption {
    margin: 0;
    padding: 14px 16px 16px;
    min-height: var(--provider-portfolio-slider-caption-min-height);
    border-top: 1px solid #e6edf5;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, #f8fbff 100%);
    color: var(--provider-portfolio-slider-text);
    font-size: 14px;
    line-height: 1.85;
    font-weight: 900;
    text-align: center;
    word-break: break-word;
}

/* ==========================================================================
   الأسهم
   ========================================================================== */

.provider-portfolio-slider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    translate: none;
    z-index: 5;
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--provider-portfolio-slider-arrow-size);
    min-width: var(--provider-portfolio-slider-arrow-size);
    height: var(--provider-portfolio-slider-arrow-size);
    padding: 0;
    border: 1px solid #d8e2ec;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: #35516f;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    box-shadow:
        0 10px 22px rgba(15, 35, 58, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition:
        box-shadow 0.18s ease,
        border-color 0.18s ease,
        background-color 0.18s ease,
        color 0.18s ease,
        opacity 0.18s ease;
}

.provider-portfolio-slider__arrow--next {
    inset-inline-start: 14px;
}

.provider-portfolio-slider__arrow--prev {
    inset-inline-end: 14px;
}

.provider-portfolio-slider__arrow:hover {
    border-color: #c5d5e6;
    background: rgba(255, 255, 255, 0.98);
    color: #163957;
    box-shadow:
        0 14px 28px rgba(15, 35, 58, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.provider-portfolio-slider__arrow:active {
    transform: translateY(-50%);
}

.provider-portfolio-slider__arrow:disabled {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
    transform: translateY(-50%);
}

/* ==========================================================================
   النقاط
   ========================================================================== */

.provider-portfolio-slider__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.provider-portfolio-slider__dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    min-width: 12px;
    height: 12px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #c9d7e5;
    cursor: pointer;
    transition:
        transform 0.18s ease,
        background-color 0.18s ease,
        box-shadow 0.18s ease,
        opacity 0.18s ease;
}

.provider-portfolio-slider__dot:hover {
    background: #aec3d8;
    transform: scale(1.05);
}

.provider-portfolio-slider__dot:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(11, 79, 123, 0.08);
}

.provider-portfolio-slider__dot--active {
    background: var(--provider-portfolio-slider-brand);
    transform: scale(1.08);
    box-shadow: 0 6px 14px rgba(11, 79, 123, 0.16);
}

/* ==========================================================================
   Lightbox
   ========================================================================== */

.provider-portfolio-slider__lightbox[hidden] {
    display: none !important;
}

.provider-portfolio-slider__lightbox {
    position: fixed;
    inset: 0;
    z-index: var(--provider-portfolio-slider-lightbox-z);
    display: flex;
    align-items: center;
    justify-content: center;
    padding:
        var(--provider-portfolio-slider-lightbox-safe-top)
        var(--provider-portfolio-slider-lightbox-safe-inline)
        var(--provider-portfolio-slider-lightbox-safe-bottom);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.provider-portfolio-slider__lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.provider-portfolio-slider__lightbox-dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 1180px);
    margin: auto;
    display: grid;
    gap: 12px;
    align-content: center;
    justify-items: stretch;
    min-width: 0;
    max-width: 100%;
    max-height: calc(100vh - (var(--provider-portfolio-slider-lightbox-safe-top) + var(--provider-portfolio-slider-lightbox-safe-bottom)));
    max-height: calc(100dvh - (var(--provider-portfolio-slider-lightbox-safe-top) + var(--provider-portfolio-slider-lightbox-safe-bottom)));
}

.provider-portfolio-slider__lightbox-close {
    position: absolute;
    inset-inline-end: 0;
    inset-block-start: 0;
    translate: 0 calc(-100% - 10px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    min-width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition:
        background-color 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease;
}

.provider-portfolio-slider__lightbox-close:hover {
    background: rgba(255, 255, 255, 0.22);
    transform: none;
}

.provider-portfolio-slider__lightbox-close:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.14);
}

.provider-portfolio-slider__lightbox-body {
    overflow: auto;
    max-width: 100%;
    max-height: inherit;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    background: rgba(10, 16, 24, 0.8);
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.28);
    -webkit-overflow-scrolling: touch;
}

.provider-portfolio-slider__lightbox-image {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: calc(100vh - (var(--provider-portfolio-slider-lightbox-safe-top) + var(--provider-portfolio-slider-lightbox-safe-bottom) + 64px));
    max-height: calc(100dvh - (var(--provider-portfolio-slider-lightbox-safe-top) + var(--provider-portfolio-slider-lightbox-safe-bottom) + 64px));
    object-fit: contain;
    background: transparent;
}

/* ==========================================================================
   تحسينات ضمن صفحة البروفايل
   ========================================================================== */

.provider-profile-portfolio__slider-preview .provider-portfolio-slider {
    --provider-portfolio-slider-track-min-height: clamp(260px, 36vw, 360px);
}

/* ==========================================================================
   الشاشات المتوسطة
   ========================================================================== */

@media (max-width: 1023.98px) {
    .provider-portfolio-slider {
        --provider-portfolio-slider-arrow-size: 42px;
        --provider-portfolio-slider-track-min-height: clamp(260px, 46vw, 360px);
    }

    .provider-profile-portfolio__slider-preview .provider-portfolio-slider {
        --provider-portfolio-slider-track-min-height: clamp(240px, 40vw, 320px);
    }

    .provider-portfolio-slider__slide-youtube-play {
        width: 58px;
        height: 58px;
        font-size: 20px;
    }

    .provider-portfolio-slider__lightbox-dialog {
        width: min(100%, 980px);
    }
}

/* ==========================================================================
   الجوال
   ========================================================================== */

@media (max-width: 767.98px) {
    .provider-portfolio-slider {
        --provider-portfolio-slider-radius: 16px;
        --provider-portfolio-slider-arrow-size: 38px;
        --provider-portfolio-slider-track-min-height: clamp(220px, 58vw, 300px);
        --provider-portfolio-slider-lightbox-safe-top: max(18px, env(safe-area-inset-top, 0px));
        --provider-portfolio-slider-lightbox-safe-bottom: max(20px, env(safe-area-inset-bottom, 0px));
        --provider-portfolio-slider-lightbox-safe-inline: max(12px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
    }

    .provider-profile-portfolio__slider-preview .provider-portfolio-slider {
        --provider-portfolio-slider-track-min-height: clamp(210px, 54vw, 280px);
    }

    .provider-portfolio-slider__track {
        border-radius: 16px;
    }

    .provider-portfolio-slider__arrow {
        width: var(--provider-portfolio-slider-arrow-size);
        min-width: var(--provider-portfolio-slider-arrow-size);
        height: var(--provider-portfolio-slider-arrow-size);
        font-size: 22px;
    }

    .provider-portfolio-slider__arrow--next {
        inset-inline-start: 10px;
    }

    .provider-portfolio-slider__arrow--prev {
        inset-inline-end: 10px;
    }

    .provider-portfolio-slider__slide-image,
    .provider-portfolio-slider__slide-youtube-image {
        height: var(--provider-portfolio-slider-track-min-height);
    }

    .provider-portfolio-slider__slide-pdf,
    .provider-portfolio-slider__slide-youtube,
    .provider-portfolio-slider__slide-unknown,
    .provider-portfolio-slider__slide-media,
    .provider-portfolio-slider__slide,
    .provider-portfolio-slider__image-trigger,
    .provider-portfolio-slider__youtube-trigger {
        min-height: var(--provider-portfolio-slider-track-min-height);
    }

    .provider-portfolio-slider__slide-pdf {
        padding: 20px 14px;
        gap: 12px;
    }

    .provider-portfolio-slider__slide-pdf-icon {
        width: min(74px, 22vw);
    }

    .provider-portfolio-slider__slide-pdf-download {
        min-width: 104px;
    }

    .provider-portfolio-slider__slide-youtube-play {
        width: 54px;
        height: 54px;
        font-size: 18px;
    }

    .provider-portfolio-slider__slide-youtube-fallback,
    .provider-portfolio-slider__slide-unknown {
        font-size: 34px;
    }

    .provider-portfolio-slider__slide-caption {
        padding: 12px 14px 14px;
        font-size: 13px;
        line-height: 1.8;
    }

    .provider-portfolio-slider__image-trigger-badge,
    .provider-portfolio-slider__youtube-trigger-label {
        inset-inline-end: 10px;
        inset-block-end: 10px;
        min-height: 32px;
        padding: 7px 10px;
        font-size: 11px;
    }

    .provider-portfolio-slider__dots {
        gap: 7px;
    }

    .provider-portfolio-slider__dot {
        width: 11px;
        min-width: 11px;
        height: 11px;
    }

    .provider-portfolio-slider__lightbox {
        align-items: center;
        justify-content: center;
    }

    .provider-portfolio-slider__lightbox-dialog {
        width: 100%;
        max-height: calc(100vh - (var(--provider-portfolio-slider-lightbox-safe-top) + var(--provider-portfolio-slider-lightbox-safe-bottom)));
        max-height: calc(100dvh - (var(--provider-portfolio-slider-lightbox-safe-top) + var(--provider-portfolio-slider-lightbox-safe-bottom)));
    }

    .provider-portfolio-slider__lightbox-close {
        width: 38px;
        min-width: 38px;
        height: 38px;
        font-size: 22px;
        border-radius: 12px;
        translate: 0 calc(-100% - 8px);
    }

    .provider-portfolio-slider__lightbox-body {
        border-radius: 18px;
    }

    .provider-portfolio-slider__lightbox-image {
        max-height: calc(100vh - (var(--provider-portfolio-slider-lightbox-safe-top) + var(--provider-portfolio-slider-lightbox-safe-bottom) + 54px));
        max-height: calc(100dvh - (var(--provider-portfolio-slider-lightbox-safe-top) + var(--provider-portfolio-slider-lightbox-safe-bottom) + 54px));
    }
}

/* ==========================================================================
   الشاشات الصغيرة جدًا
   ========================================================================== */

@media (max-width: 520px) {
    .provider-portfolio-slider {
        --provider-portfolio-slider-arrow-size: 34px;
        --provider-portfolio-slider-track-min-height: clamp(200px, 62vw, 260px);
        --provider-portfolio-slider-lightbox-safe-top: max(16px, env(safe-area-inset-top, 0px));
        --provider-portfolio-slider-lightbox-safe-bottom: max(18px, env(safe-area-inset-bottom, 0px));
        --provider-portfolio-slider-lightbox-safe-inline: max(10px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
    }

    .provider-profile-portfolio__slider-preview .provider-portfolio-slider {
        --provider-portfolio-slider-track-min-height: clamp(190px, 58vw, 240px);
    }

    .provider-portfolio-slider__arrow {
        font-size: 20px;
    }

    .provider-portfolio-slider__arrow--next {
        inset-inline-start: 8px;
    }

    .provider-portfolio-slider__arrow--prev {
        inset-inline-end: 8px;
    }

    .provider-portfolio-slider__slide-pdf-icon {
        width: min(64px, 20vw);
    }

    .provider-portfolio-slider__slide-youtube-play {
        width: 48px;
        height: 48px;
        font-size: 16px;
    }

    .provider-portfolio-slider__slide-caption {
        padding: 11px 12px 13px;
        font-size: 12px;
    }

    .provider-portfolio-slider__lightbox-dialog {
        width: 100%;
    }

    .provider-portfolio-slider__lightbox-close {
        translate: 0 calc(-100% - 6px);
    }
}

/* ==========================================================================
   تقليل الحركة
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .provider-portfolio-slider__arrow,
    .provider-portfolio-slider__dot,
    .provider-portfolio-slider__image-trigger-badge,
    .provider-portfolio-slider__youtube-trigger-label,
    .provider-portfolio-slider__lightbox-close {
        transition: none;
    }
}