/*
 * 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;
}

/* ── 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;
}

.footer-copyright {
    font-family: 'Ubuntu', sans-serif;
    font-weight: 300;
    font-size: 12px;
    color: #FFFFFF;
    opacity: 0.8;
}

/* ── 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 ───────────────────────────────────────────────────────────── */
.submit-btn,
.submit-btn:hover,
.submit-btn:visited {
    display: inline-block;
    background: #FFFFFF;
    border-radius: 36.7545px;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 700;
    font-size: 1.5vw;
    padding: calc(10px + 1vw);
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    color: #1D2561;
    cursor: pointer;
}

@media (max-width: 767.98px) {
    .submit-btn,
    .submit-btn:hover,
    .submit-btn:visited {
        font-size: 3vw;
    }
}

#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; } }

/* ── Participation section ─────────────────────────────────────────────── */
#participation-section {
    position: relative;
    width: 100vw;
    /*padding-bottom: var(--padding-bottom);*/
    /*background-color: var(--color-primary);*/
    background-image: url(/assets/images/2026/participation-pattern.png)
}

/* --- Ενιαίος wrapper γύρω από header + ροζ ζώνη (matches το Figma, όπου
   header/κύκλος/ζώνη είναι layers μέσα σε ΕΝΑ frame, όχι ξεχωριστά κουτιά).
   Ένα κοινό overflow:hidden εδώ επιτρέπει στον κύκλο να ξεκινάει μέσα στο
   header (κρυμμένος πίσω του μέσω z-index, όχι κομμένος ίσια) και να
   σταματάει ακριβώς στο τέλος της ζώνης (όχι να ξεχειλίζει στο footer). */
.participation-wrapper {
    position: relative;
    width: 100vw;
    overflow: hidden;
}

/* --- Pink zone: form card (left) + win info (right) ---
   Όλες οι τιμές παρακάτω προέρχονται από άμεση μέτρηση (pixel-για-pixel)
   πάνω στο Figma node 7:202 (καμβάς αναφοράς 1920px πλάτος), όχι από
   παλιότερο/κατά προσέγγιση CSS. π.χ. η κάρτα είναι 651/1920 = 33.9vw. */
.participation-zone {
    position: relative;
    width: 100vw;
    /*background-color: #DD7488;*/
    /*background-image: url(/assets/images/2026/participation-pattern.png);*/
    background-repeat: repeat;
    display: flex;
    align-items: center;
    padding: 4.5vw 0 4.5vw 6vw;
    overflow: hidden;
}


/* --- Blue card: outer border 43/1920=2.24vw, δύο κοντινές αποχρώσεις μπλε
   (όχι έντονη ανοιχτόχρωμο/σκούρο navy contrast όπως στο παλιό CSS) --- */
.participation-card {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    width: 33.9vw;
    background-color: #2661A8;
    border-radius: 2vw;
    padding: 2.24vw;
}
.participation-card-middle{
    position: relative;
    z-index: 3;
    flex-shrink: 0;
    width: 29.9vw;
    min-width: 229px;
    background-color: #1f3665;
    border-radius: 2vw;
    padding: 1vw;
}

.participation-card-inner {
    background-color: #254E88;
    background-image: url(/assets/images/2026/participation-card-pattern.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 1.6vw;
    padding: 3.7vw 3.7vw 3vw;
}
.participation-card-inner #participation-title {
    font-family: 'Ubuntu', sans-serif;
    font-weight: 700;
    font-size: clamp(18px, 2vw, 38px);
    line-height: 1.2;
    text-align: center;
    text-transform: none;
    color: #FFFFFF;
    padding: 0 0 1vw;
    margin: 0;
}

.participation-card-inner form {
    display: flex;
    flex-direction: column;
    gap: 1.2vw;
}

/* Pill inputs — solid white bg, navy text (overrides the semi-transparent
   global "form input" rule, scoped to this section only so the
   not-yet-redesigned congratulations/instant-win-form is unaffected) */
#participation-section input:not(.form-check-input) {
    background: #FFFFFF !important;
    border: none !important;
    border-radius: 3em !important;
    color: #2E62A7 !important;
    font-weight: 700;
    font-size: clamp(13px, 1.39vw, 26px);
    padding: 0.95vw 1.6vw;
    width: 100%;
}

#participation-section input::placeholder { color: #2E62A7; opacity: 0.75; }

/* Upload-receipt row styled as another pill field */
#participation-section #file-upload-btn {
    display: block;
    box-sizing: border-box;
    width: 100%;
    background-color: #FFFFFF;
    color: #2E62A7;
    border: none;
    border-radius: 3em;
    padding: 0.95vw 1.6vw;
    font-weight: 700;
    font-size: clamp(13px, 1.39vw, 26px);
    text-transform: none;
    letter-spacing: normal;
    text-align: left;
}

/* Circular checkboxes (πιστό στο πραγματικό Figma render — λευκός κύκλος
   με μπλε check, όχι rounded-square) */
#participation-section .form-check {
    display: flex;
    align-items: flex-start;
    gap: 0.6vw;
    padding-left: 0;
}

#participation-section .form-check-input {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 2.14vw;
    height: 2.14vw;
    min-width: 20px;
    min-height: 20px;
    margin: 0.15em 0 0;
    border-radius: 50%;
    background: #FFFFFF;
    border: none;
    position: relative;
    cursor: pointer;
}

#participation-section .form-check-input:checked::after {
    content: '';
    position: absolute;
    left: 32%;
    top: 14%;
    width: 22%;
    height: 46%;
    border: solid #2661A8;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

#participation-section .form-check-label {
    color: #FFFFFF;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 700;
    font-size: clamp(13px, 1.3vw, 24px);
    line-height: 1.3;
}

/* Το πραγματικό Figma button ("SEND") είναι στενό (~26% του πλάτους της
   κάρτας) γιατί η αγγλική λέξη είναι κοντή· το δικό μας κείμενο είναι πολύ
   μεγαλύτερο, οπότε πλαταίνουμε το κουμπί ώστε να χωράει σε ~2 γραμμές
   αντί να ξεχειλίζει, κρατώντας το πάντα compact/κεντραρισμένο (όχι full-width). */
#participation-section .submit-btn {
    display: block;
    width: 62%;
    min-width: 220px;
    margin: 1vw auto 0;
    padding: 0.9em 1.2em;
    text-align: center;
    line-height: 1.2;
    font-size: clamp(13px, 1.35vw, 22px);
}

/* --- Win info column (right) — ενιαία εικόνα κομμένη απευθείας από το Figma
   render (pattern + ροζ κύκλος + κρεμ κύκλος + κάστρο + τίτλος + sparkles
   όλα ήδη σωστά τοποθετημένα/layered, χωρίς χειροκίνητη αναδημιουργία) --- */
.participation-win-info {
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: stretch;
}
.participation-right-img {
    display: block;
    width: auto;
    height: 100%;
}

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

/* ── Participation section Mobile ───────────────────────────────────────── */
@media (max-width: 767px) {
    .participation-zone {
        flex-direction: column;
        padding: 0vw 6vw 6vw 6vw;
        gap: 8vw;
    }

    #participation-section .home-header{
        /*background-image: none;*/
        background-color: #FF98A9!important;
    }

    .participation-card {
        width: 100%;
        padding: 4vw;
    }
    .participation-card-middle{
        width: 100%;
        padding: 1vw;
    }
    .participation-card-inner { padding: 6vw 6vw 5vw; }
    #participation-section input:not(.form-check-input),
    #participation-section #file-upload-btn { font-size: 15px; padding: 0.9em 1.3em; }
    #participation-section .form-check-input { width: 22px; height: 22px; }
    #participation-section .form-check-label { font-size: 14px; }
    #participation-section .submit-btn { width: 60%; font-size: 16px; }
    /* Στο mobile η εικόνα ξαναμπαίνει στην κανονική ροή, πάνω από την κάρτα */
    .participation-win-info {
        position: relative;
        top: auto; bottom: auto; right: auto;
        width: 100vw;
        justify-content: center;
        order: -1;
    }
    .participation-right-img { width: 100%; height: auto; }
}

/* ── Home screen header (blue gradient curve + BTS logo, ίδιο asset με .pre-header) ── */
.home-header {
    position: relative;
    width: 100vw;
    height: 16vw;
    line-height: 0;
    /*background-color: #F39DAA;*/
    overflow: hidden;
}


#participation-section .home-header,
#congratulations-section .home-header {
    z-index: 3;
    background-color: transparent;
    background-repeat: repeat;
}
.home-hbg {
    width: 100vw;
    display: block;
    position: absolute;
    bottom: 0;
    z-index: 1;
}
.home-logo {
    position: absolute;
    bottom: 8%;
    left: 50%;
    transform: translateX(-50%);
    width: 27vw;
    z-index: 2;
}
@media (max-width: 767px) {
    .home-header {
        height: 40vw;
        max-height: none;
        background-image: url(/assets/images/2026/blue-gradient.png);
        background-size: cover;
        background-position: center bottom;
    }
    .home-hbg  { display: none; }
    .home-logo { width: 55vw; max-width: none; bottom: 6%; }
}

/* ── Home screen — full-width εικόνες (hero + goodies), κουμπιά σε δικά τους
   div, τοποθετημένα με position:absolute σε vw (μετρημένα πάνω στο κανάβι
   αναφοράς 1920px) ώστε να μένουν κολλημένα πάνω στο design σε κάθε πλάτος. ── */
#home-screen-section {
    position: relative;
    width: 100vw;
    background-color: var(--color-yellow);
}

#home-screen-section .home-header{
    background-color: #FF98A9!important;
}

.home-hero-zone,
.home-goodies-zone {
    position: relative;
    width: 100vw;
    line-height: 0;
}

.home-hero-img,
.home-goodies-img {
    display: block;
    width: 100%;
    height: auto;
}

/* "ΣΥΜΜΕΤΑΣΧΕΤΕ ΕΔΩ" — κενός χώρος κάτω από το DISNEYLAND PARIS logo,
   ευθυγραμμισμένο αριστερά με το κείμενο (μετρημένο στο home-up-desktop.png) */
.home-hero-btn-wrap {
    position: absolute;
    z-index: 2;
    left: 18vw;
    top: 32vw;
    line-height: normal;
}

/* "ΑΝΑΚΑΛΥΨΤΕ ΤΟ ΑΛΜΠΟΥΜ..." — κενός χώρος κάτω από το
   "ΣΥΝΕΧΙΣΤΕ ΤΗΝ TOY STORY 5 ΠΕΡΙΠΕΤΕΙΑ!" label (μετρημένο στο home-down-desktop.png) */
.home-goodies-btn-wrap {
    position: absolute;
    z-index: 2;
    left: 50vw;
    top: 34vw;
    transform: translateX(-50%);
    line-height: normal;
}

/* Οι desktop offsets πιο πάνω μετρήθηκαν πάνω στις desktop συνθέσεις — οι mobile
   εικόνες (home-up-mobile.png / home-down-mobile.png) έχουν διαφορετική αναλογία
   και σύνθεση, οπότε τα κουμπιά χρειάζονται δικές τους θέσεις (μετρημένες pixel-
   ακριβείς πάνω στις mobile εικόνες, με τον κενό χώρο κάτω από logo/label) */
@media (max-width: 767px) {
    .home-hero-btn-wrap {
        left: 45vw;
        top: 41vw;
        transform: translateX(-50%);
    }

    .home-goodies-btn-wrap {
        top: 56vw;
    }
}


/* ── Congratulations section (instant win screen — physical prize claim,
   βάσει Figma ks0HvlMcfRFdGbVmlaYDAU node 37:122/37:192 "DLP_GAIN_GOODIES".
   Χρώματα δειγματοληπτημένα απευθείας πάνω στο Figma render (όχι κατ'
   εκτίμηση): η κάρτα #2661A8/#254E88 ταυτίζεται ακριβώς με .participation-card,
   το κείμενο pill #2E62A7 ταυτίζεται ακριβώς με #participation-section input —
   άρα επαναχρησιμοποιούμε το ήδη εγκεκριμένο pattern αντί να το ξαναφτιάχνουμε. ── */
#congratulations-section {
    position: relative;
    width: 100vw;
    /*padding-bottom: var(--padding-bottom);*/
    /*background-color: var(--color-primary);*/
    background-image: url(/assets/images/2026/bg-green.png);
}

/* --- Lime-green ζώνη (#A9C542, sampled): κάρτα φόρμας (αριστερά) + hero
   φωτογραφία/κείμενο δώρου (δεξιά) --- */
.instantwin-zone {
    position: relative;
    width: 100vw;
    min-height: 32vw;
    /*background-color: #A9C542;*/
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3vw;
    padding: 4.5vw 5vw;
    overflow: hidden;
}

/* --- Μπλε κάρτα: ίδιες τιμές με .participation-card (sampled ταύτιση) --- */
.instantwin-card {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    width: 33.9vw;
    /*min-width: 300px;*/
    background-color: #2661A8;
    border-radius: 2vw;
    padding: 2.24vw;
}

.instantwin-card-middle{
    position: relative;
    z-index: 3;
    flex-shrink: 0;
    width: 29.9vw;
    min-width: 229px;
    background-color: #1f3665;
    border-radius: 2vw;
    padding: 1vw;
}

.instantwin-card-inner {
    background-color: #254E88;
    background-image: url(/assets/images/2026/participation-card-pattern.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 1.6vw;
    padding: 3.7vw 3.7vw 3vw;
}

.instantwin-card-inner .instant-win-form {
    display: flex;
    flex-direction: column;
    gap: 1.2vw;
}

/* Pill inputs — ίδιο στυλ με #participation-section input */
#congratulations-section input {
    background: #FFFFFF !important;
    border: none !important;
    border-radius: 3em !important;
    color: #2E62A7 !important;
    font-weight: 700;
    font-size: clamp(13px, 1.39vw, 26px);
    padding: 0.95vw 1.6vw;
    width: 100%;
}
#congratulations-section input::placeholder { color: #2E62A7; opacity: 0.75; }

#congratulations-section .submit-btn {
    display: block;
    width: 62%;
    min-width: 220px;
    margin: 1vw auto 0;
    padding: 0.9em 1.2em;
    text-align: center;
    line-height: 1.2;
    font-size: clamp(13px, 1.35vw, 22px);
}

/* --- Hero στήλη (δεξιά): φωτογραφία + κείμενο του δώρου που κερδήθηκε.
   Δεν μπορεί να είναι μία στατική εικόνα κομμένη από το Figma (όπως το
   .participation-win-info) γιατί αλλάζει δυναμικά ανά νικητή/δώρο. --- */
.instantwin-hero {
    position: relative;
    z-index: 2;
    flex: 1;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5vw;
}

.instantwin-gift-image {
    display: block;
    width: 100%;
    max-width: clamp(240px, 28vw, 480px);
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

.instantwin-hero-text {
    text-align: center;
}

.instantwin-hero #gift-description {
    font-family: 'Ubuntu', sans-serif;
    font-weight: 700;
    font-size: clamp(24px, 3vw, 44px);
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-yellow);
    margin-bottom: 0.4em;
}

.instantwin-hero-subtext {
    font-family: 'Ubuntu', sans-serif;
    font-weight: 700;
    font-size: clamp(16px, 1.8vw, 26px);
    line-height: 1.3;
    color: #2E62A7;
}

@media (max-width: 767px) {
    .instantwin-zone {
        flex-direction: column;
        min-height: auto;
        padding: 8vw 6vw;
        gap: 8vw;
    }
    .instantwin-card { order: 2; width: 100%; padding: 4vw; }
    .instantwin-card-middle{ order: 3; width: 100%; padding: 1vw; }
    .instantwin-card-inner { padding: 6vw 6vw 5vw; }
    .instantwin-hero { order: 1; max-width: 100%; }
    #congratulations-section input { font-size: 15px; padding: 0.9em 1.3em; }
    #congratulations-section .submit-btn { width: 60%; font-size: 16px; }
    .instantwin-gift-image { max-width: 55vw; }
    .instantwin-hero #gift-description { font-size: clamp(22px, 6vw, 30px); }
    .instantwin-hero-subtext { font-size: clamp(15px, 4vw, 18px); }
}

/* ── End section (ενιαία τελική οθόνη, Buzz) ─────────────────────────────── */
#end-section {
    position: relative;
    width: 100vw;
    padding-bottom: var(--padding-bottom);
    background-image: url(/assets/images/2026/end-bg.png);
    background-repeat: no-repeat;
    background-position: left center;
    background-color: var(--color-yellow);
    background-size: contain;
}
#end-section .home-header{
    background-color: transparent;
    background-repeat: repeat;
}

/* ── End screen (Buzz) — digital-gift state, per Figma node 29:2
   (DESKTOP_DLP_RECONTACT_1920X1440_V6), see docs/superpowers/specs/2026-07-09-digital-gift-endscreen-design.md ── */
.end-zone {
    position: relative;
    width: 100vw;
    min-height: 38vw;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3vw;
    padding: 4vw 5vw;
    overflow: hidden;
}

.end-buzz {
    display: none;
}

.end-content {
    max-width: 700px;
    display: block;
    position: absolute;
    left: 39vw;
    width: 55vw;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

#end-headline {
    display: inline-block;

    padding: 0.18em 0.55em;
    font-family: Roboto;
    font-weight: 700;
    font-size: clamp(20px, 2.6vw, 34px);
    line-height: 1.4;
    text-transform: uppercase;
    color: #2E62A7;
    margin-bottom: 16px;
    letter-spacing: 0px;
    font-weight: 900;
}

#end-subtext, #end-subtext-2 {
    font-family: Roboto;
    font-weight: 700;
    font-size: clamp(16px, 1.8vw, 24px);
    line-height: 1.35;
    text-transform: uppercase;
    color: #2E62A7;
    margin-bottom: 20px;
}

.end-content .submit-btn {
    margin: 0 auto;
    font-family: Roboto;
    font-weight: 700;
    font-size: clamp(16px, 1.8vw, 24px);
    color: #2E62A7;
}

@media (max-width: 767px) {
    /* Το κείμενο μπαίνει σε κανονική στοιβαγμένη ροή (όχι το left:35vw hack της
       desktop σύνθεσης όπου ο Buzz είναι αριστερά και το κείμενο δίπλα του), και
       το end-bg-mobile.png ρέει ΚΑΤΩ από αυτό ως κανονικό <img> — έτσι σπρώχνεται
       πάντα κάτω από όσο ύψος έχει το κείμενο σε κάθε mode, χωρίς ποτέ επικάλυψη
       (αντί να χρειάζεται να χωράει σε συγκεκριμένο κενό πάνω στην εικόνα) */
    #end-section {
        background-image: none;
        padding-bottom: 0;
    }
    .end-zone {
        flex-direction: column;
        justify-content: flex-start;
        min-height: auto;
        padding: 4vw 0vw;
    }
    .end-buzz {
        display: block;
        width: 100%;
        height: auto;
        margin-top: 6vw;
    }
    .end-content {
        position: static;
        left: auto;
        max-width: 100%;
    }
    #end-headline { font-size: clamp(16px, 4.2vw, 22px); padding: 0.18em 0.45em; }
    #end-subtext  { font-size: clamp(14px, 3.2vw, 18px); }
}

/* ── 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;
    }
}

/* ── Cards album page (album.php) — 3-col responsive grid + reveal overlay,
   per Figma ks0HvlMcfRFdGbVmlaYDAU node 45:31 (grid) / 45:143 (reveal),
   see docs/superpowers/specs/2026-07-13-cards-album-design.md ── */
.album-return-btn {
    position: fixed;
    top: 2vw;
    right: 2vw;
    z-index: 5;
    width: 5vw;
    height: 5vw;
    min-width: 44px;
    min-height: 44px;
    max-width: 64px;
    max-height: 64px;
    background: #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
}
.album-return-btn a {
    font-size: clamp(20px, 2.4vw, 30px);
    color: var(--color-primary);
    text-decoration: none;
    line-height: 1;
    overflow: hidden;
}

#album-section {
    position: relative;
    width: 100vw;

    background-repeat: repeat;
    padding: 4vw 0 6vw;
}

#album-headline {
    font-family: 'Ubuntu', sans-serif;
    font-weight: 700;
    font-size: clamp(20px, 2.6vw, 34px);
    text-align: center;
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 0 0 3vw;
}

.album-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4vw 3vw;
}

.album-card {
    cursor: pointer;
    overflow: hidden;
}
.album-card img {
    display: block;
    width: 100%;
    height: auto;
    filter: grayscale(100%);
    transition: transform 0.15s ease, filter 0.3s ease;
}
.album-card:hover img {
    transform: scale(1.05);
}
.album-card.revealed img {
    filter: grayscale(0%);
}

@media (max-width: 767px) {
    .album-grid { gap: 6vw 4vw; }
    #album-headline { font-size: clamp(16px, 4.2vw, 22px); }
}

#album-reveal {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 6vw;
    cursor: pointer;
    overflow: hidden;
}
#album-reveal-headline {
    font-family: 'Ubuntu', sans-serif;
    font-weight: 700;
    font-size: clamp(20px, 2.8vw, 26px);
    text-align: center;
    text-transform: uppercase;
    color: var(--color-yellow);
    overflow: hidden;
}
#album-reveal-img {
    max-width: min(45vw, 560px);
    height: auto;
    pointer-events: none;
    overflow: hidden;
}

@media (max-width: 767px) {
    #album-reveal-headline { font-size: clamp(16px, 5vw, 24px); }
    #album-reveal-img { max-width: 80vw; }
}
/* ── Survey section (post-purchase questionnaire, linked from the end-screen)
   Reuses the .instantwin-card/.instantwin-card-middle/.instantwin-card-inner
   pattern verbatim (same #2661A8/#1f3665/#254E88 colors + pill-input style,
   see assets/css/main2026.css:530-579) under new .survey-* names — single
   centered card, no side hero column since this page has no product photo. ── */
#survey-section {
    position: relative;
    width: 100vw;
    padding-bottom: var(--padding-bottom);
}

.survey-zone {
    position: relative;
    width: 100vw;
    min-height: 32vw;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4.5vw 5vw;
    overflow: hidden;
}

.survey-card {
    position: relative;
    z-index: 2;
    width: 60vw;
    max-width: 800px;
    margin: 0 auto;
    background-color: #2661A8;
    border-radius: 2vw;
    padding: 2.24vw;
}

.survey-card-middle {
    position: relative;
    z-index: 3;
    background-color: #1f3665;
    border-radius: 2vw;
    padding: 1vw;
}

.survey-card-inner {
    background-color: #254E88;
    background-image: url(/assets/images/2026/participation-card-pattern.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 1.6vw;
    padding: 3.7vw 3.7vw 3vw;
}

#survey-title {
    font-family: 'Ubuntu', sans-serif;
    font-weight: 700;
    font-size: clamp(18px, 2vw, 38px);
    line-height: 1.2;
    text-align: center;
    text-transform: none;
    color: #FFFFFF;
    padding: 0 0 4vw;
    margin: 0;
}

.survey-card-inner form {
    display: flex;
    flex-direction: column;
    gap: 1.2vw;
}

#survey-section input,
#survey-section select {
    background: #FFFFFF !important;
    border: none !important;
    border-radius: 3em !important;
    color: #2E62A7 !important;
    font-weight: 700;
    font-family: 'Ubuntu', sans-serif;
    font-size: clamp(13px, 1.39vw, 26px);
    padding: 0.95vw 1.6vw;
    width: 100%;
}

#survey-section select.err,
#survey-section input.err {
    border: 2px solid red !important;
}

#survey-thanks {
    text-align: center;
}

#survey-thanks-text {
    font-family: 'Ubuntu', sans-serif;
    font-weight: 700;
    font-size: clamp(18px, 2vw, 30px);
    color: #FFFFFF;
    margin-bottom: 1.2vw;
}

@media (max-width: 767px) {
    .survey-zone { padding: 10vw 6vw; min-height: auto; }
    .survey-card { width: 100%; max-width: 100%; padding: 4vw; }
    .survey-card-middle { padding: 1vw; }
    .survey-card-inner { padding: 6vw 6vw 5vw; }
    #survey-section input,
    #survey-section select { font-size: 15px; padding: 0.9em 1.3em; }
}