/* General reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Full page setup */
html, body {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#landscape-alert {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    font-size: 2rem;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 1000;
}
.preloadpixel
{
    position:absolute;
    left:0;
    top:0;
    width:1px;
    height:1px;
    visibility: hidden;
}
/* Page styling */
.page {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;


}

/* Specific page backgrounds */
#page01 {
    background-image: url('../images/page01/page_01_bg.jpg');
    visibility:hidden;
}
.logo {
    position: absolute;
    background: url('../images/page01/page_01_logo_180_80.png') no-repeat center / contain;
    left: 9.38%; /* 180px / 1920px * 100% */
    top: 6.67%; /* 80px / 1200px * 100% */
    width: 34.58%; /* Final target width */
    height: 17.92%; /* Final target height */
    transform-origin: center; /* Set transform origin to the center */
    transform: scale(1); /* Start at scale 0 */
}
.logo2 {
    position: absolute;
    background: url('../images/page02/page_02_logo_76_78.png') no-repeat center / contain;
    left: 3.96%; /* 180px / 1920px * 100% */
    top: 6.59%; /* 80px / 1200px * 100% */
    width: 20.94%; /* Final target width */
    height: 10.83%; /* Final target height */
    transform-origin: center; /* Set transform origin to the center */
    transform: scale(1); /* Start at scale 0 */
}

#page01_text {

    position: absolute;
    background: url('../images/page01/page_01_xorese_96_362.png') no-repeat center / contain;
    left: 5%;
    top: 30.17%;
    width: 43.49%;
    height: 25.33%;
    transform-origin: center; /* Set transform origin to the center */
    transform: scale(0); /* Start at scale 0 */
}
#page01_fullscreen {

    position: absolute;
    background: url('../images/page01/fullscreen_icon_50x50.png') no-repeat center / contain;
    bottom:10px;
    right:10px;
    width: calc(50 / 1200 * 100vh);
    height: calc(50 / 1200 * 100vh);
}
.button_next
{
    position: absolute;
    background: url('../images/common/epomeno.png') no-repeat center / contain;
    width: calc(303 / 1920 * 100vw); /* Scale the left position */
    height: calc(104 / 1200 * 100vh); /* Scale the left position */
    cursor:pointer;
    outline: none; /* Remove focus outline */
    user-select: none; /* Prevent text selection */
    -webkit-tap-highlight-color: transparent;
    transform-origin: center; /* Set transform origin to the center */
}
#page01_button {

    left: 18.85%;
    top: 61%;
    transform: scale(0); /* Start at scale 0 */
}


#page02 {
    background-image: url('../images/page01/page_01_bg.jpg');
}

#page02_text
{
    position: absolute;
    background: url('../images/page02/page_02_bres_116_301.png') no-repeat center / contain;
    left: 6.04%;
    top: 25.08%;
    width: 41.35%;
    height: 33.08%;
    transform-origin: center; /* Set transform origin to the center */
    transform: scale(0); /* Start at scale 0 */
}
#page02_terms_link
{
    position: absolute;
    background: url('../images/page02/page_02_oroi_378_871.png') no-repeat center / contain;
    left: 19.69%;
    top: 72.58%;
    width: 14.27%;
    height: 2.75%;
    cursor:pointer;
    outline: none; /* Remove focus outline */
    user-select: none; /* Prevent text selection */
    -webkit-tap-highlight-color: transparent;
    transform-origin: center; /* Set transform origin to the center */
    transform: scale(0); /* Start at scale 0 */
}
#page02_terms_window
{
    position: absolute;
    left: 50.05%;
    top: 5.17%;
    width: 46.82%;
    height: 90.08%;
    transform-origin: center; /* Set transform origin to the center */
    transform: scale(1); /* Start at scale 0 */
    background-color: white; /* White background */
    border-radius: 15px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional shadow for depth */
}
#page02_terms_window_title
{
    position: absolute;
    background: url('../images/page02/page_02_title_oroi.png') no-repeat left / contain;
    left:2%;
    top:3%;
    width:48%;
    height: 4.81%;
    user-select: none; /* Prevent text selection */
}
#page02_terms_window_box
{
    position: absolute;
    background: url('../images/page02/page_02_box.png') no-repeat left / contain;
    left:3%;
    top:92%;
    width:7.6%;
    height: 6.1%;
    user-select: none; /* Prevent text selection */
}
.page02_terms_window_box_ticked
{
    background: url('../images/page02/page_02_box_ticked.png') no-repeat left / contain !important;
}
#page02_terms_window_box_title
{
    position: absolute;
    background: url('../images/page02/page_02_title_apodoxi.png') no-repeat left / contain;
    left:12%;
    top:93.5%;
    width:48%;
    height: 3.3%;
    user-select: none; /* Prevent text selection */
}

#page02_terms_window_holder
{
    position:absolute;
    left:2%;
    top:10%;
    width: 96%; /* Adjust width as needed */
    height: 80%; /* Adjust height as needed */
    overflow-y: auto;
    font-size:1em;
}
#page02_button {

    left: 18.85%;
    top: 61%;
    transform: scale(0); /* Start at scale 0 */
}


#page03 {
    background-image: url('../images/page01/page_01_bg.jpg');
}

/* Background graphic div */
#page03_form {
    position: absolute;
    width: 40.26vw; /* 773 / 1920 * 100 */
    height: 24.95vw; /* 479 / 1920 * 100 */
    max-width: 773px;
    max-height: 479px;

    left: calc(102 / 1920 * 100vw); /* Scale the left position */
    top: calc(297 / 1200 * 100vh); /* Scale the top position */
    background-image: url('../images/page03/page_03_symplirose_102_267.png');
    background-size: cover;
    background-repeat: no-repeat;
    transform-origin: top left;
}

/* Input fields */
.page03_form_input {
    position:absolute;
    background: none;
    border: none;
    border-bottom: 1px solid white; /* Thin white bottom border */
    outline: none;
    font-size: calc(1rem + 1vw); /* Responsive font size */
    color: white; /* Inherit text color from parent element */
    width: 96%; /* Ensures input takes full width of its container */
    left:2%;
}
.page03_form_input:focus {
    background: none;
    border: none;
    border-bottom: 1px solid white; /* Thin white bottom border */
    outline: none;
}
.page03_form_input::placeholder {
    color: #DDDDDD;
    opacity: 1; /* Ensures the color appears as specified */
}
#page03_name
{
    top: 28%;
}
#page03_surname
{
    top: 43.50%;
}
#page03_email
{
    top: 59%;
}
#page03_phone
{
    top: 74.5%;
}
#page03_button {
    top: 99%;
    left: 33%;
    transform: scale(0); /* Start at scale 0 */
}

#page04 {
    background-image: url('../images/page04/page_04_bg.jpg');
}
#page04_decoration
{
    position: absolute;
    background: url('../images/page04/page_04_decoration.png') no-repeat center / contain;
    bottom:0;
    right:0;
    width: calc(411 / 1200 * 100vh);
    height: calc(200 / 1200 * 100vh);
    transform-origin: center;
    transform: scale(1);
}
#page04_recipe_1_text
{
    position: absolute;
    background: url('../images/page04/page_04_galopoula_384_264.png') no-repeat center / contain;
    left: 20.00%;
    top: 22.00%;
    width: 36.04%;
    height: 20.25%;
    transform-origin: center;
    transform: scale(0);
}
#page04_recipe_1_image
{
    position: absolute;
    background: url('../images/page04/page_04_galopoula_02_0_292.png') no-repeat center / contain;
    left: 0.00%;
    top: 24.33%;
    width: 48.13%;
    height: 49.00%;
    transform-origin: center;
    transform: scale(0);
}
#page04_recipe_2_text
{
    position: absolute;
    background: url('../images/page04/page_04_patatosalata_855_1041.png') no-repeat center / contain;
    left: 44.53%;
    top: 86.75%;
    width: 29.01%;
    height: 9.42%;
    transform-origin: center;
    transform: scale(0);

}
#page04_recipe_2_image
{
    position: absolute;
    background: url('../images/page04/page_04_patatosalata_02_858_552.png') no-repeat center / contain;
    left: 44.69%;
    top: 46.00%;
    width: 27.40%;
    height: 41.00%;
    transform-origin: center;
    transform: scale(0);

}
#page04_recipe_3_text
{
    position: absolute;
    background: url('../images/page04/page_04_gemisi_1287_84.png') no-repeat center / contain;
    left: 67.03%;
    top: 7.00%;
    width: 29.32%;
    height: 21.42%;
    transform-origin: center;
    transform: scale(0);

}
#page04_recipe_3_image
{
    position: absolute;
    background: url('../images/page04/page_04_gemisi_02_1270_0.png') no-repeat center / contain;
    left: 66.15%;
    top: 0.00%;
    width: 33.85%;
    height: 47.25%;
    transform-origin: center;
    transform: scale(0);


}
#page04_question
{
    position: absolute;
    background: url('../images/page04/page_04_dialexe_597_454.png') no-repeat center / contain;
    left: 31.09%;
    top: 37.83%;
    width: 38.44%;
    height: 26.08%;
    transform-origin: center;
    transform: scale(0);
}

#pageLast {
    background-image: url('../images/page01/page_01_bg.jpg');
}
#pageLast_text
{
    position: absolute;
    background: url('../images/pageLast/page_017_euxaristoume_90_380.png') no-repeat center / contain;
    left: 4.69%;
    top: 31.67%;
    width: 38.49%;
    height: 26.42%;
    transform-origin: center; /* Set transform origin to the center */
    transform: scale(1); /* Start at scale 0 */
}


/* Responsive landscape alert for portrait mode */
@media (orientation: portrait) {
    #landscape-alert {
        display: flex;
    }
}