/* Slider Container */
.lamis-slider-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #000;
}

.lamis-slide {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* Background Image */
.lamis-slide-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

/* Solid Color Background Effect */
.lamis-slide-solid-bg {
    position: absolute;
    top: 0;
    height: 100%;
    z-index: 2;
    transition: width 0.3s ease;
}

.lamis-dir-left {
    left: 0;
}

.lamis-dir-right {
    right: 0;
}

.lamis-dir-center {
    left: 50%;
    transform: translateX(-50%);
}

/* Waving SVG Divider */
.lamis-wave-container {
    position: absolute;
    top: -5%; /* Slightly larger to avoid gaps during wave */
    height: 110%;
    width: 150px;
    z-index: 3;
    pointer-events: none;
}

.lamis-wave-left {
    left: var(--effect-width, 50%);
    transform: translateX(-1px); /* Prevent 1px gap */
}

.lamis-wave-right {
    right: var(--effect-width, 50%);
    transform: scaleX(-1) translateX(-1px);
}

.lamis-wave-center {
    left: 50%;
    transform: translateX(-50%);
    /* For center, maybe we don't need the wave or it needs to be a double wave. 
       Usually the wave separates solid and image. Center is an edge case. */
    display: none; 
}

.lamis-wave-svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Absolute positioned elements */
.lamis-abs-el {
    position: absolute;
    z-index: 10;
    max-width: 90%;
    margin: 0;
}

/* Base styling for elements if no Elementor typo is set */
.lamis-el-title {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.2;
}

.lamis-el-subtitle {
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.lamis-el-description {
    font-size: 1rem;
    line-height: 1.6;
    max-width: 500px;
}

/* Buttons */
.lamis-btn {
    display: inline-block;
    padding: 12px 30px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 30px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.lamis-btn-solid {
    background-color: #0b5edd; /* Can be overridden by color control using background instead of border maybe? Wait, user controls 'color' for text. We should probably let them control background via Elementor or write custom CSS. For now, we'll use a default style */
    color: #ffffff;
    border: 2px solid #0b5edd;
}
.lamis-btn-solid:hover {
    background-color: #0043a8;
    border-color: #0043a8;
    color: #ffffff;
}

.lamis-btn-outline {
    background-color: transparent;
    color: #ffffff;
    border: 2px solid #ffffff;
}
.lamis-btn-outline:hover {
    background-color: #ffffff;
    color: #000000;
}

/* Navigation & Pagination */
.lamis-swiper-prev,
.lamis-swiper-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: rgba(0,0,0,0.3);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    cursor: pointer;
    z-index: 20;
    transition: all 0.3s ease;
}
.lamis-swiper-prev:hover,
.lamis-swiper-next:hover {
    background: rgba(0,0,0,0.8);
}
.lamis-swiper-prev { left: 20px; }
.lamis-swiper-next { right: 20px; }

.lamis-swiper-pagination {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    gap: 8px;
}
.lamis-swiper-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: rgba(255,255,255,0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}
.lamis-swiper-pagination .swiper-pagination-bullet-active {
    background: #ffffff;
    transform: scale(1.2);
}

/* Responsive Overrides (optional defaults) */
@media (max-width: 768px) {
    .lamis-el-title {
        font-size: 2rem;
    }
    .lamis-el-subtitle {
        font-size: 1rem;
    }
    .lamis-wave-container {
        width: 100px;
    }
}