/* ═══════════════════════════════════════════
   OSA Showcase — Homepage Slider Sections
   Arrow-based slider — Maroon / Gold / White — RTL
   ═══════════════════════════════════════════ */

.osa-showcase {
    --sc-maroon: #461414;
    --sc-gold: #B8986B;
    --sc-gold-light: #D4BC8E;
    --sc-bg: #FFFEFD;
    --sc-bg-alt: #F7F3F1;
    --sc-muted: #666;
    --sc-radius: 12px;
    font-family: "GE SS Two", Cairo, sans-serif !important;
    direction: rtl !important;
    text-align: right !important;
    padding: 56px 0 64px !important;
    overflow: hidden !important;
}

/* ═══════ Header ═══════ */
.osa-showcase__header {
    text-align: center !important;
    margin-bottom: 32px !important;
    padding: 0 20px !important;
}

.osa-showcase__title {
    font-size: 1.8rem !important;
    font-weight: 900 !important;
    color: var(--sc-maroon) !important;
    margin: 0 0 10px !important;
    line-height: 1.4 !important;
}

.osa-showcase__subtitle {
    font-size: 0.95rem !important;
    color: var(--sc-muted) !important;
    font-weight: 500 !important;
    margin: 0 !important;
    line-height: 1.6 !important;
}

/* ═══════ Slider Container ═══════ */
.osa-showcase__slider {
    position: relative !important;
    padding: 0 56px !important;
    max-width: 1300px !important;
    margin: 0 auto !important;
}

/* ═══════ Track ═══════ */
.osa-showcase__track {
    display: flex !important;
    gap: 16px !important;
    overflow: hidden !important;
    padding: 8px 0 16px !important;
    scroll-behavior: smooth !important;
}

/* ═══════ Arrows ═══════ */
.osa-showcase__arrow {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 5 !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    border: 2px solid var(--sc-gold) !important;
    background: #fff !important;
    color: var(--sc-maroon) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background 0.25s, color 0.25s, border-color 0.25s, box-shadow 0.25s !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08) !important;
}

.osa-showcase__arrow:hover {
    background: var(--sc-gold) !important;
    color: #fff !important;
    border-color: var(--sc-gold) !important;
    box-shadow: 0 4px 16px rgba(184,152,107,0.3) !important;
}

.osa-showcase__arrow:disabled {
    opacity: 0.3 !important;
    cursor: default !important;
    pointer-events: none !important;
}

.osa-showcase__arrow svg {
    flex-shrink: 0 !important;
}

/* RTL: prev → right, next → left */
.osa-showcase__arrow--prev {
    right: 4px !important;
}

.osa-showcase__arrow--next {
    left: 4px !important;
}

/* ═══════ Slide Item ═══════ */
.osa-showcase__slide {
    flex: 0 0 auto !important;
    width: calc((100% - (var(--sc-columns, 4) - 1) * 16px) / var(--sc-columns, 4)) !important;
    border-radius: var(--sc-radius) !important;
    overflow: hidden !important;
    position: relative !important;
    background: var(--sc-bg-alt) !important;
    cursor: pointer !important;
    transition: transform 0.35s ease, box-shadow 0.35s ease !important;
}

.osa-showcase__slide:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 32px rgba(70,20,20,0.12) !important;
}

.osa-showcase__slide img {
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.4s ease !important;
}

.osa-showcase__slide:hover img {
    transform: scale(1.05) !important;
}

/* ═══════ Label (case title) ═══════ */
.osa-showcase__label {
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    left: 0 !important;
    padding: 24px 14px 10px !important;
    background: linear-gradient(to top, rgba(70,20,20,0.8) 0%, transparent 100%) !important;
    color: #fff !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    pointer-events: none !important;
}

/* ═══════ Footer / View All Button ═══════ */
.osa-showcase__footer {
    text-align: center !important;
    margin-top: 28px !important;
    padding: 0 20px !important;
}

.osa-showcase__btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 32px !important;
    background: var(--sc-maroon) !important;
    color: #fff !important;
    font-family: "GE SS Two", Cairo, sans-serif !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    transition: background 0.3s ease, transform 0.3s ease !important;
}

.osa-showcase__btn:hover {
    background: var(--sc-gold) !important;
    transform: translateY(-2px) !important;
    color: #fff !important;
}

.osa-showcase__btn svg {
    flex-shrink: 0 !important;
}

/* ═══════ Responsive ═══════ */
@media (max-width: 768px) {
    .osa-showcase {
        padding: 40px 0 48px !important;
        --sc-columns: 2 !important;
    }
    .osa-showcase__title {
        font-size: 1.5rem !important;
    }
    .osa-showcase__slider {
        padding: 0 48px !important;
    }
    .osa-showcase__track {
        gap: 12px !important;
    }
    .osa-showcase__slide {
        width: calc((100% - 12px) / 2) !important;
    }
    .osa-showcase__arrow {
        width: 36px !important;
        height: 36px !important;
    }
    .osa-showcase__header {
        margin-bottom: 24px !important;
    }
}

@media (max-width: 480px) {
    .osa-showcase {
        --sc-columns: 1 !important;
    }
    .osa-showcase__slide {
        width: 85% !important;
    }
    .osa-showcase__title {
        font-size: 1.3rem !important;
    }
    .osa-showcase__btn {
        padding: 10px 24px !important;
        font-size: 0.85rem !important;
    }
    .osa-showcase__slider {
        padding: 0 40px !important;
    }
    .osa-showcase__arrow {
        width: 32px !important;
        height: 32px !important;
    }
    .osa-showcase__arrow svg {
        width: 16px !important;
        height: 16px !important;
    }
}

/* ═══════ Showcase Lightbox ═══════ */
.osa-showcase-lb {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
}

.osa-showcase-lb.active {
    display: flex !important;
}

.osa-showcase-lb__backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.92) !important;
}

.osa-showcase-lb__body {
    position: relative !important;
    z-index: 2 !important;
    max-width: 90vw !important;
    max-height: 80vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.osa-showcase-lb__img {
    max-width: 100% !important;
    max-height: 80vh !important;
    border-radius: 10px !important;
    object-fit: contain !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5) !important;
}

.osa-showcase-lb__close {
    position: absolute !important;
    top: 18px !important;
    left: 18px !important;
    z-index: 10 !important;
    background: none !important;
    border: none !important;
    color: #fff !important;
    font-size: 2.4rem !important;
    cursor: pointer !important;
    opacity: 0.7 !important;
    transition: opacity 0.25s, transform 0.25s !important;
    line-height: 1 !important;
}

.osa-showcase-lb__close:hover {
    opacity: 1 !important;
    transform: scale(1.15) !important;
}

.osa-showcase-lb__prev,
.osa-showcase-lb__next {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255,255,255,0.25) !important;
    background: rgba(255,255,255,0.1) !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background 0.25s, border-color 0.25s !important;
}

.osa-showcase-lb__prev:hover,
.osa-showcase-lb__next:hover {
    background: #B8986B !important;
    border-color: #B8986B !important;
}

.osa-showcase-lb__prev { right: 24px !important; }
.osa-showcase-lb__next { left: 24px !important; }

.osa-showcase-lb__counter {
    position: absolute !important;
    bottom: 24px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 10 !important;
    color: rgba(255,255,255,0.6) !important;
    font-family: "GE SS Two", Cairo, sans-serif !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    direction: ltr !important;
}

@media (max-width: 600px) {
    .osa-showcase-lb__prev,
    .osa-showcase-lb__next {
        width: 40px !important;
        height: 40px !important;
    }
    .osa-showcase-lb__prev { right: 10px !important; }
    .osa-showcase-lb__next { left: 10px !important; }
}