/* Bootstrap Carousel Slider Fix Styles */
.carousel {
    width: 100% !important;
    height: 100vh !important;
    position: relative !important;
    overflow: hidden !important;
    background: transparent !important;
}

.carousel-inner {
    width: 100%;
    height: 100%;
}

.carousel-item {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.carousel-item .bg-cover,
.bg-cover {
    width: 100%;
    height: 100%;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    transition: transform 0.8s ease;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 1 !important;
    display: block !important;
}

/* Fix slider image display in English mode */
.direction-ltr .carousel-item .bg-cover,
.direction-ltr .bg-cover {
    width: 100%;
    height: 100%;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.direction-rtl .carousel-item .bg-cover,
.direction-rtl .bg-cover {
    width: 100%;
    height: 100%;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Ensure slider works properly in both languages */
.lang-en .carousel,
.lang-fa .carousel {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

.lang-en .carousel-item,
.lang-fa .carousel-item {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.lang-en .carousel-item .bg-cover,
.lang-en .bg-cover,
.lang-fa .carousel-item .bg-cover,
.lang-fa .bg-cover {
    width: 100%;
    height: 100%;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    display: block;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 1 !important;
}

.carousel-item:hover .bg-cover {
    transform: scale(1.05);
}

.carousel-control-prev, .carousel-control-next {
    color: #FFFFFF;
    background: rgba(243, 112, 33, 0.8);
    border-radius: 50%;
    width: 56px;
    height: 56px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

/* Fix navigation buttons in both language modes */
.direction-ltr .carousel-control-prev,
.direction-ltr .carousel-control-next,
.direction-rtl .carousel-control-prev,
.direction-rtl .carousel-control-next {
    color: #FFFFFF;
    background: rgba(243, 112, 33, 0.8);
    border-radius: 50%;
    width: 56px;
    height: 56px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    z-index: 10;
}

.lang-en .carousel-control-prev,
.lang-en .carousel-control-next,
.lang-fa .carousel-control-prev,
.lang-fa .carousel-control-next {
    color: #FFFFFF;
    background: rgba(243, 112, 33, 0.8);
    border-radius: 50%;
    width: 56px;
    height: 56px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    z-index: 10;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    background: rgba(243, 112, 33, 1);
    transform: scale(1.1);
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 20px;
    height: 20px;
}

/* Pagination */
.carousel-indicators {
    bottom: 20px;
    z-index: 10;
}

.carousel-indicators button {
    background: #FFFFFF;
    opacity: 0.7;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: none;
    transition: all 0.3s ease;
}

.carousel-indicators button.active {
    background: #f37021;
    opacity: 1;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .carousel-control-prev,
    .carousel-control-next {
        width: 40px;
        height: 40px;
    }
    
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        width: 16px;
        height: 16px;
    }
}

/* Additional fixes for slider visibility */
.carousel .carousel-item {
    opacity: 1 !important;
    visibility: visible !important;
}

.carousel .carousel-item .bg-cover,
.carousel .bg-cover {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* Force slider to work in both RTL and LTR */
[dir="rtl"] .carousel-item .bg-cover,
[dir="rtl"] .bg-cover,
[dir="ltr"] .carousel-item .bg-cover,
[dir="ltr"] .bg-cover {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* Additional slider fixes for both languages */
.lang-en .carousel,
.lang-fa .carousel {
    width: 100% !important;
    height: 100vh !important;
    position: relative !important;
    overflow: hidden !important;
    background: #4c4b4c !important;
}

.direction-ltr .carousel-inner,
.direction-rtl .carousel-inner {
    width: 100% !important;
    height: 100% !important;
}

.direction-ltr .carousel-item,
.direction-rtl .carousel-item,
.lang-en .carousel-item,
.lang-fa .carousel-item {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Force proper image sizing in both languages */
.direction-ltr .carousel-item .bg-cover,
.direction-ltr .bg-cover,
.direction-rtl .carousel-item .bg-cover,
.direction-rtl .bg-cover,
.lang-en .carousel-item .bg-cover,
.lang-en .bg-cover,
.lang-fa .carousel-item .bg-cover,
.lang-fa .bg-cover,
.carousel-item .bg-cover,
.bg-cover {
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 1 !important;
    position: relative !important;
}

/* Additional fixes for slider visibility in both languages */
.carousel .carousel-item {
    opacity: 1 !important;
    visibility: visible !important;
}

.carousel .carousel-item .bg-cover,
.carousel .bg-cover {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* Ensure slider works in both RTL and LTR */
[dir="rtl"] .carousel-item .bg-cover,
[dir="rtl"] .bg-cover,
[dir="ltr"] .carousel-item .bg-cover,
[dir="ltr"] .bg-cover {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* CRITICAL: Force background images to display */
.carousel-item .bg-cover[style*="background-image"],
.bg-cover[style*="background-image"] {
    background-image: var(--bg-image) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    opacity: 0.8 !important;
    visibility: visible !important;
    display: block !important;
    z-index: 1 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* Override any conflicting styles */
.carousel-item .bg-cover,
.bg-cover {
    min-height: 100vh !important;
    min-width: 100vw !important;
}

/* CRITICAL: Override Tailwind CSS conflicts */
.carousel-item .h-full,
.carousel .h-full,
.carousel-inner .h-full {
    height: 100vh !important;
}

.carousel-item .absolute,
.carousel .absolute {
    position: absolute !important;
}

.carousel-item .inset-0,
.carousel .inset-0 {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
}

/* Force background image display with highest priority */
.carousel-item div[style*="background-image"] {
    background-image: inherit !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    opacity: 0.8 !important;
    visibility: visible !important;
    display: block !important;
    z-index: 1 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100vh !important;
}