/**
 * Styles for the Website Themes carousel indicators
 */

/* Ensure carousel indicators display properly */
.carousel-indicators {
    position: relative;
    margin-bottom: 0;
    justify-content: flex-start;
}

.carousel-indicators [data-bs-target] {
    width: auto;
    height: auto;
    margin: 0;
    text-indent: 0;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.3s ease;
}

.carousel-indicators [data-bs-target].active {
    border-color: #0d6efd;
}

.carousel-indicators img {
    max-width: 100%;
    height: auto;
}

/* Ensure proper spacing between indicators */
.carousel-indicators .col-2 {
    padding: 0.25rem;
}

/* Ensure modal content is properly displayed */
.modal-dialog.modal-xl {
    max-width: 90%;
}

@media (min-width: 1200px) {
    .modal-dialog.modal-xl {
        max-width: 1140px;
    }
}

/* Ensure mobile/desktop preview images are properly displayed */
.example-desktop, .example-mobile {
    margin-bottom: 1rem;
}

.example-mobile {
    max-width: 30%;
    position: absolute;
    right: 0;
    bottom: 0;
    border: 1px solid #dee2e6;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}