@charset "UTF-8";
/*
 * For usage with Bootstrap v5.3.8 (https://getbootstrap.com/).
 */
:root {
    --bs-font-sans-serif: "Plus Jakarta Sans";
    --bs-body-font-family: var(--bs-font-sans-serif);
    --cadbury-purple: #482683;
}

body,
html {
    height: 100%;
}

.bg-purple {
    background: var(--cadbury-purple) !important;
}

.text-purple {
    color: var(--cadbury-purple) !important;
}

.feature {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.5rem;
    width: 2.5rem;
    font-size: 1.5rem;
}

/* Mobile-friendly modal adjustments */
@media (max-width: 575.98px) {
    /* Ensure the carousel lays out vertically so indicators can sit below content */
    .modal .carousel {
        display: flex;
        flex-direction: column;
    }

    /* Content wrapper first */
    .modal .carousel > .d-flex {
        order: 1;
    }

    /* Place indicators below the content and remove overlay behavior */
    .modal .carousel .carousel-indicators {
        position: static;
        order: 2;
        margin: 0.5rem 0 0 0; /* add space above indicators */
        padding: 0;
    }

    /* Make Bootstrap modal comfortable on small screens */
    .modal .modal-dialog {
        margin: 0.5rem;
    }

    .modal .modal-content {
        border-radius: 1rem;
    }

    .modal .modal-header,
    .modal .modal-body {
        padding: 1rem !important;
    }

    .modal .modal-body {
        overflow-x: hidden;
    }

    .modal .modal-title {
        font-size: 1.5rem;
        line-height: 1.2;
    }

    /* Stack carousel content vertically and ensure images scale */
    .modal .carousel .d-flex.flex-row {
        flex-direction: column !important;
        margin: 0 !important;
    }

    .modal .carousel .me-5 {
        margin-right: 0 !important;
    }

    .modal .carousel img.img-fluid {
        /* Constrain tall portrait screenshots so they don't dominate the viewport */
        max-width: 100% !important;
        width: auto; /* allow height constraint to take effect without stretching */
        height: auto;
        max-height: 40vh; /* leave room for text and controls on small screens */
        object-fit: contain;
        display: block;
        margin: 0 auto 0.5rem; /* center and add a bit of space below */
    }

    .modal .carousel .d-flex.flex-column {
        margin-top: 0.75rem;
        text-align: left;
    }
}