body {
    margin: 0;
    background: linear-gradient(176deg, #F0E8E1 0.55%, #FBC2D7 21.68%, #F0E8E1 70.49%, #FFB6C6 85.81%, #FB90A7 96.73%);
}

/* --- Preloader Styles --- */
.loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #F0E8E1; /* Match page background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease; /* Add a fade-out transition */
    opacity: 0; /* Hidden by default */
}

.loader {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(0, 0, 0, 0.1);
    border-top-color: #FB90A7; /* Use a color from the theme */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.content-loading .container {
    visibility: hidden;
}

.container {
    display:flex;
    width: 100%; /* Default width for mobile */
    padding: 0 20px 57.069px 20px;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    box-sizing: border-box;
    overflow-x: hidden; /* Hide the overflowing parts of the wide images */
}

/* --- Image Styles --- */

img {
    /* General style for all images */
    display: block;
}

#content-part1 {
    width: 600px; /* Smaller width for more visible area on mobile */
    height: auto;
    margin-top: -20px;
}

#content-program,
#content-guide {
    width: 600px; /* Smaller width for more visible area on mobile */
    height: auto;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

/* Styles for the tabbed component */
.tabs-container {
    position: relative;
    width: 100%; 
}

.tabs-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Overlay covers the whole container now */
    z-index: 10; /* Ensure tabs are on top */
    /* This element is just a container, no positioning of its own */
}

.button-area {
    /* This area has the SAME positioning as the images below it */
    width: 600px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.tab-button {
    position: absolute; /* Each tab is positioned independently */
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

#tab-program {
    top: 48px;
    left: 0;
    width: 50%;
    height: 80px; /* Original height */
    background-color: rgba(255, 0, 0, 0.0); 
}

#tab-guide {
    top: 48px;
    right: 0; /* Positioned to the right */
    width: 50%;
    height: 80px; /* Original height */
    background-color: rgba(0, 128, 0, 0.0);
}

#tab-guide-scroll {
    top: 48.1%;
    left: 15%;
    width: 40%;
    height: 2.5%;
    background-color: rgba(0, 0, 128, 0.0);
}

/* --- Buttons for Part 3 --- */

.part3-button {
    position: absolute;
    display: none; /* Hidden by default */
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

#anchor-btn-1 {
    top: 11.15%;
    left: 15%;
    width: 22%;
    height: 1%;
    background-color: rgba(255, 165, 0, 0.0);
}

#anchor-btn-2 {
    top: 11.15%;
    left: 37%;
    width: 18%;
    height: 1%;
    background-color: rgba(255, 255, 0, 0.0);
}

#anchor-btn-3 {
    top: 11.15%;
    left: 55%;
    width: 30%;
    height: 1%;
    background-color: rgba(128, 0, 128, 0.0);
}

#back-to-top-btn {
    top: 98%;
    left: 0;
    width: 100%;
    height: 1.2%;
    background-color: rgba(165, 42, 42, 0.0);
}

.hidden {
    display: none;
}

/* Media Query for larger screens */
@media (min-width: 1024px) {
    .container {
        width: 800px; /* Width for desktops */
        overflow-x: visible; /* Show the full image on desktop */
    }

    /* Reset ALL canvases for desktop */
    #content-part1,
    #content-program,
    #content-guide {
        width: 100%;
        position: static;
        transform: none;
        left: auto;
    }

    .button-area {
        width: 100%;
        position: absolute; /* Keep it absolute */
        left: 0;
        transform: none;
    }
}