/*
 * main2026.css — Bel Back to School Disney Toy Story 5 2026
 * TODO: replace placeholder colors and image paths once the 2026 design is provided
 */

/* ── Variables ─────────────────────────────────────────────────────────── */
:root {
    --padding-bottom: 200px;
    --color-primary:  #1B4B9E; /* blue — από design */
    --color-yellow:   #FFE063; /* κίτρινο — από design */
    --color-accent:   #9ac2ff;
}

* { overflow-x: hidden; }

body { background-color: var(--color-primary); }

.color-mov   { color: var(--color-accent) !important; }

.responsive-header-size   { font-size: clamp(24px, 3vw, 42px) !important; }
.responsive-paragraph-text{ font-size: clamp(16px, 2vw, 22px); }
.bold { font-weight: 700 !important; }

/* ── General notes ─────────────────────────────────────────────────────── */
.general-notes {
    font-family: 'Ubuntu', sans-serif;
    font-weight: 300;
    font-size: 18px;
    line-height: 22px;
    text-align: center;
    color: #FFFFFF;
}

/* ── Header ────────────────────────────────────────────────────────────── */
.key-visual {
    width: 25vw;
    left: 0;
    right: 0;
}

.site-header {
    position: relative;
    display: block;
    margin: 0 auto;
    top: 0; left: 0; right: 0;
    width: 100vw;
    height: 20vw;
    z-index: 1000;
    /* TODO: add 2026 desktop header background */
    /* background: url(/assets/images/2026/header-img.png) no-repeat center; background-size: contain; */
}

@media (max-width: 500px) {
    .site-header {
        width: 100vw;
        height: 66vw;
        background-size: contain;
        /* TODO: add 2026 mobile header background */
        /* background: url(/assets/images/2026/header-img-mob.png) no-repeat center; background-size: contain; */
    }
    .site-header img { display: none; }
}

/* ── Footer ────────────────────────────────────────────────────────────── */
.site-footer {
    position: relative;
    width: 100%;
    background-color: var(--color-primary);
    overflow: hidden;
}

.white-stripe {
    position: relative;
    background-color: var(--color-primary);
    width: 100vw;
    height: 10px;
}

.menu-item,
.menu-item:hover,
.menu-item:visited {
    text-decoration: none;
    color: #FFFFFF;
}

/* ── Section title ─────────────────────────────────────────────────────── */
.section-title {
    display: block;
    margin-left: auto;
    margin-right: auto;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 300;
    font-size: 2.5em;
    text-align: center;
    color: #FFFFFF;
}
@media (max-width: 1195px) { .section-title { font-size: 2em; } }

/* ── Form elements ─────────────────────────────────────────────────────── */
form input:not(.form-check-input),
form input:focus:not(.form-check-input) {
    background:   rgba(255, 255, 255, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    border-radius: 3em !important;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 300;
    color: #FFFFFF !important;
}
form label {
    font-family: 'Ubuntu', sans-serif;
    font-weight: 300;
    color: #FFFFFF;
}
input.err, input.err:focus { border-color: red !important; }

/* ── Throbber ──────────────────────────────────────────────────────────── */
#throbber {
    position: fixed;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.6);
    width: 100vw;
    height: 100vh;
}
#throbber #throbber-icon {
    position: absolute;
    margin: auto;
    left: 0; right: 0; top: 0; bottom: 0;
    width: 100px;
    height: 100px;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
#play-now-btn {
    position: absolute;
    z-index: 10000;
    left: 0; right: 0;
    top: 40.5vw;
    display: block;
    background-color: #FFFFFF;
    color: #274597; /* TODO: update with 2026 button text color */
    border-radius: 2.9vw;
    width: clamp(155px, 20vw, 550px);
    height: clamp(37px, 4.14vw, 169px);
    margin: auto;
    cursor: pointer;
    font-size: clamp(20px, 2vw, 50px);
    padding-top: 0.5vw;
    text-align: center;
    font-weight: 700;
}
@media (max-width: 767.98px) { #play-now-btn { top: 108vw; } }

#play-now-btn2 {
    display: inline-block;
    background-color: #FFFFFF;
    color: #274597;
    border-radius: 2.9vw;
    margin: 0 auto;
    cursor: pointer;
    font-size: clamp(20px, 2vw, 50px);
    text-align: center;
    font-weight: 700;
    white-space: nowrap;
    padding: 0.4em 1.2em;
}

.btn-wrapper2 { text-align: center; }

.submit-btn {
    display: inline-block;
    background: #FFFFFF;
    border-radius: 36.7545px;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 700;
    font-size: 18px;
    padding: 18px;
    text-align: center;
    text-transform: uppercase;
    color: #1D2561;
    cursor: pointer;
}
@media (max-width: 767.98px) { .submit-btn { font-size: 1em; } }

#file-upload-btn {
    display: inline-block;
    border: 2px solid #FFFFFF;
    border-radius: 36.7545px;
    padding: 18px;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 700;
    font-size: 18px;
    text-align: center;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #FFFFFF;
    cursor: pointer;
}
@media (max-width: 767.98px) { #file-upload-btn { font-size: 1em; } }

/* ── Home screen section ───────────────────────────────────────────────── */
#home-screen-section {
    position: relative;
    width: 100vw;
    height: 47.16vw;
    /* TODO: replace with 2026 home screen background */
    background: url(/assets/images/2026/home-screen-bg.jpg) var(--color-primary) no-repeat center top;
    background-size: cover;
}
@media (max-width: 767.98px) {
    #home-screen-section {
        height: 203vw;
        /* TODO: replace with 2026 mobile home screen background */
        background: url(/assets/images/2026/home-screen-bg-mob.jpg) var(--color-primary) no-repeat center;
        background-size: contain;
    }
}

/* ── Participation section ─────────────────────────────────────────────── */
#participation-section {
    position: relative;
    width: 100vw;
    padding-bottom: var(--padding-bottom);
    background-color: #143B68; /* TODO: update with 2026 color */
    /* TODO: add 2026 stars/pattern image */
    /* background-image: url(/assets/images/2026/stars.png); */
    background-position: center;
    background-size: contain;
}

#participation-title {
    font-family: 'Ubuntu', sans-serif;
    font-weight: 700;
    font-size: 2.5em;
    text-align: center;
    text-transform: uppercase;
    color: #FFFFFF;
    padding: 10px;
}
@media (max-width: 767.98px) { #participation-title { font-size: 1.5em; } }

#file-upload-2-title {
    font-family: 'Ubuntu', sans-serif;
    font-weight: 300;
    font-size: 28px;
    line-height: 32px;
    text-align: center;
    color: #FFFFFF;
}
@media (max-width: 767.98px) { #file-upload-2-title { font-size: 1em; } }

#form-notes {
    font-family: 'Ubuntu', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 22px;
    color: #FFFFFF;
    text-shadow: 1px 1px black;
}
#form-notes a { color: #FFFFFF; }

/* ── Choose character section ──────────────────────────────────────────── */
#choose-character-section {
    position: relative;
    width: 100vw;
    padding-bottom: var(--padding-bottom);
    /* TODO: replace with 2026 character selection background */
    /* background: url(/assets/images/2026/form-screen-bg.png) no-repeat center; background-size: cover; */
    background-color: var(--color-primary);
}

.main-section-3box {
    width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}

.selectable-img {
    width: 100%;
    max-width: 345px;
    height: auto;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border 0.3s ease;
}
.selectable-img.active { border: 2px solid red; }

@media (max-width: 1195px) {
    .selectable-img { width: 29%; max-width: none; }
}

#choose-character-title       { width: 88vw; font-size: 3.1vw; font-weight: 500; }
#choose-character-title-small { width: 88vw; font-size: 2.5vw; font-weight: 200; }

@media (max-width: 767.98px) {
    #choose-character-title       { width: 90%; font-size: 1.5em; }
    #choose-character-title-small { width: 90%; font-size: 1.5em; }
}

/* gift preview boxes */
.contdora {
    max-width: 1220px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}
.coldbox { flex: 0 0 auto; max-width: 400px; display: flex; justify-content: center; }
.coldbox img { width: 100%; max-width: 400px; height: auto; display: block; }
@media (max-width: 800px) {
    .contdora { flex-direction: column; align-items: center; }
    .coldbox  { max-width: 100%; }
    .coldbox img { max-width: 400px; }
}

/* ── Congratulations section (instant win) ─────────────────────────────── */
#congratulations-section {
    position: relative;
    width: 100vw;
    padding-bottom: var(--padding-bottom);
    background-color: var(--color-primary);
    /* TODO: add 2026 stars/pattern */
    /* background-image: url(/assets/images/2026/stars.png); */
    background-position: center;
    background-size: contain;
}

#instant-win-form-header {
    font-family: 'Ubuntu', sans-serif;
    font-weight: 300;
    font-size: 28px;
    line-height: 32px;
    text-align: center;
    color: #FFFFFF;
}

.instant-win-form { width: 50%; }
@media (max-width: 767.98px) { .instant-win-form { width: 95%; } }

/* ── Download section (draw participant) ───────────────────────────────── */
#download-congratulations-section {
    position: relative;
    width: 100vw;
    padding-bottom: var(--padding-bottom);
    background-color: var(--color-primary);
}

/* ── End section ───────────────────────────────────────────────────────── */
#end-section {
    position: relative;
    width: 100vw;
    height: 71.3vw;
    /* TODO: replace with 2026 end screen background */
    background: url(/assets/images/2026/theend.jpg) no-repeat center;
    background-size: cover;
}

.end-section-content p {
    width: 60%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 300;
    text-align: center;
    color: #FFFFFF;
}

@media (max-width: 767.98px) {
    #end-section {
        height: 193vw;
        /* TODO: replace with 2026 end screen mobile background */
        background: url(/assets/images/2026/end-bg-mob.jpg) no-repeat center top;
        background-size: contain;
    }
}

/* ── Terms / Privacy pages ─────────────────────────────────────────────── */
.terms-container {
    position: relative;
    width: 100vw;
    background-color: #153b68;
}
.terms-content {
    color: #FFFFFF;
    margin-left: auto;
    margin-right: auto;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 300;
    font-size: 16px;
    padding-bottom: 150px;
}

/* ── Pre-activation (Coming Soon) page ─────────────────────────────────── */

body.pre-page {
    background-color: var(--color-yellow);
    margin: 0;
    padding: 0;
}

/* Header — μπλε gradient shape
   Transparent κάτω από την καμπύλη → δείχνει το κίτρινο body background */
.pre-header {
    position: relative;
    width: 100vw;
    height: 16vw;
    max-height: 325px;
    line-height: 0;
    background-color: var(--color-yellow);
    overflow: hidden;
}

.pre-hbg {
    width: 100vw;
    display: block;
    position: absolute;
    bottom: 0;
    z-index: 1;
}

.pre-logo {
    position: absolute;
    bottom: 8%;
    left: 50%;
    transform: translateX(-50%);
    width: 27vw;
    max-width: 420px;
    z-index: 2;
}

/* Body — pattern ως background, yellow-curve.png πάνω του
   Transparent κάτω από την καμπύλη → δείχνει το μπλε background → ενώνεται με footer */
.pre-body {
    position: relative;
    width: 100%;
    height: 47vw;
    line-height: 0;
    background-color: var(--color-primary);
    background-image: url(/assets/images/2026/pattern.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: top center;
    overflow: hidden;
}

.pre-ybg {
    width: 100vw;
    display: block;
    position: absolute;
    z-index: 1;
    top: 0;
    height: 35vw;
}

.pre-text-img {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(260px, 38vw, 680px);
    z-index: 2;
}

.pre-jessie-img {
    position: absolute;
    top: 28vw;
    left: 53%;
    transform: translateX(-50%);
    width: clamp(160px, 15vw, 340px);
    z-index: 2;
}

/* Footer */
.pre-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
}

.pre-footer-copyright {
    height: clamp(14px, 1.5vw, 24px);
    width: auto;
    flex-shrink: 0;
}

.pre-footer-links {
    flex: 1;
    text-align: center;
}

.pre-footer-links a,
.pre-footer-links a:visited {
    font-family: 'Ubuntu', sans-serif;
    font-weight: 400;
    font-size: clamp(10px, 1vw, 15px);
    color: #FFFFFF;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pre-footer-links a:hover { text-decoration: underline; }

.pre-footer-sep {
    color: #FFFFFF;
    margin: 0 8px;
    opacity: 0.6;
}

.pre-footer-logo {
    height: clamp(50px, 7vw, 110px);
    width: auto;
    flex-shrink: 0;
}

/* ── Pre-activation Mobile ──────────────────────────────────────────────── */
@media (max-width: 767px) {

    .pre-header {
        height: 40vw;
        max-height: none;
        background-image: url(/assets/images/2026/blue-gradient.png);
        background-size: cover;
        background-position: center bottom;
    }
    .pre-hbg { display: none; }

    .pre-logo {
        width: 65vw;
        max-width: none;
        bottom: 5%;
    }

    .pre-body {
        height: 130vw;
        background-image: url(/assets/images/2026/pattern.png);
        background-size: cover;
        background-position: center;
        background-repeat: repeat;
    }
    .pre-ybg {
         width: 120vw;
         left: -10vw;
         height: 70vw;
    }

    .pre-text-img {
        width: 85vw;
        top: 8%;
    }

    .pre-jessie-img {
        width: 55vw;
        top: auto;
        bottom: 6%;
        left: 57%;
    }

    .pre-footer {
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
        padding: 10px 12px;
    }
    .pre-footer-links {
        order: 2;
        width: 100%;
    }
    .pre-footer-links a,
    .pre-footer-links a:visited { font-size: 11px; }
    .pre-footer-copyright { order: 1; }
    .pre-footer-logo {
        order: 3;
        height: clamp(40px, 10vw, 70px);
    }
}

/* ── Post-activation page ────────────────────────────────────────────────── */
.post-activation-container {
    position: relative;
    width: 100vw;
    height: 68vw;
    padding-bottom: var(--padding-bottom);
    /* TODO: replace with 2026 post-activation background */
    background: url(/assets/images/2026/post-desktop.jpg) no-repeat center;
    background-size: cover;
}

@media (max-width: 500px) {
    .post-activation-container {
        height: 181vw;
        background: url(/assets/images/2026/post-mobile.jpg) no-repeat top center;
        background-size: cover;
    }
}