/* =========================================================
   TARJOUSSIVU / LEGACY LANDING PAGE
   Clean base stylesheet
   ========================================================= */


/* =========================================================
   1. FONTS
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,700;1,400;1,700&display=swap');


/* =========================================================
   2. BASE
   ========================================================= */

html,
body {
    width: 100%;
    max-width: none;
    margin: 0;
    overflow-x: hidden;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;

    background-color: #ffffff;
    background-size: cover;
}

body.step_1 {
    background-size: cover;
    background-repeat: no-repeat;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: #000000;
}

.hidden {
    display: none !important;
}


/* =========================================================
   3. PAGE WIDTH / MAIN LAYOUT
   ========================================================= */

/*
   IMPORTANT:
   Body and container-fluid elements remain full width.

   Only the actual content areas are constrained.
*/

.container-fluid {
    width: 100%;
    max-width: none;
}

/* Main content width */
#header,
#body,
#main-container > .container {
    width: 90%;
    max-width: 1500px;

    margin-left: auto;
    margin-right: auto;

    text-align: center;
}

/*
   Do NOT globally set max-width on .container.
   Bootstrap can continue handling normal containers.
*/

#header-container {
    width: 100%;
    margin-bottom: 37px;
}

#body-container {
    width: 100%;
}

#main-container {
    width: 100%;
}

.item_container {
    margin: 0;
}


/* =========================================================
   4. HERO CONTENT
   ========================================================= */

.giftcards {
    font-family: "azo-sans-uber", sans-serif;
    font-size: 50px;
    font-weight: 700;
    font-style: normal;

    line-height: 1;
    text-align: left;

    padding: 20px 40px;

    color: #ffffff;

    border-radius: 25px;
}

.SubHeading {
    font-family: "azo-sans-web", sans-serif;
    font-size: 18px;
    font-weight: 700;
    font-style: normal;
}

.SubHeading2 {
    font-family: "azo-sans-web", sans-serif;
    font-size: 18px;
    font-weight: 400;
    font-style: normal;
}


/* =========================================================
   5. FORM
   ========================================================= */

form.path_form {
    padding: 40px;

    text-align: left;

    background: #ffffff;

    border-radius: 7px;

    box-shadow: 0 0 20px rgba(211, 211, 211, 0.41);

    box-sizing: border-box;
}

#step_1 form.path_form {
    display: block;
}

.form-group {
    margin-bottom: 5px;
}

label {
    display: inline-block;

    max-width: 100%;

    margin-bottom: 5px;

    font-size: 18px;
    font-weight: 700;

    color: #000000;
}

#step_1 label {
    color: #000000;
}

#item_4_label {
    display: none !important;
}

#item_2_label,
#item_3_label,
#item_6_label {
    padding-top: 10px;
}


/* =========================================================
   6. FORM FIELDS
   ========================================================= */

.form-control {
    display: block;

    width: 100%;
    max-width: 100%;
    height: 50px;

    padding: 0.375rem 0.75rem;

    font-size: 1rem;
    line-height: 1;

    color: #495057;

    background-color: #ffffff;
    background-clip: padding-box;

    border: 2px solid #5fca80;
    border-radius: 0.25rem;

    box-sizing: border-box;

    transition:
        border-color 0.15s ease-in-out,
        box-shadow 0.15s ease-in-out;
}


/* First name + last name */

#item_2_container,
#item_3_container {
    display: inline-block;

    width: 45%;

    margin-left: 0;
    margin-right: 5%;

    vertical-align: top;
}

#item_3_container {
    width: 48%;
    margin-right: 0;
}

#item_2_container .col,
#item_3_container .col {
    width: 100%;
}


/* Gender */

#item_4_container {
    float: left;
    clear: both;

    width: 100%;

    padding-left: 20px;

    box-sizing: border-box;
}


/* =========================================================
   7. CONSENT CHECKBOX
   ========================================================= */

#item_190_container {
    clear: both;
}

#item_190_container .form-check {
    display: flex !important;
    align-items: flex-start;

    position: relative;

    width: 100%;

    padding-left: 0;
}

#answer_12042 {
    flex: 0 0 auto;

    width: 50px;
    height: 50px;

    margin-top: 6px;
    margin-right: 14px;
    margin-left: 0;

    cursor: pointer;
}

#item_190_container .form-check-label {
    flex: 1;

    padding: 0;
    margin: 0;

    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;

    color: #000000;
}

p.optin-text {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 60px;

    padding: 0;

    font-weight: 400;
}


/* =========================================================
   8. VALIDATION
   ========================================================= */

.error,
label.error {
    color: red !important;
}

label.error {
    font-size: 0.8em;
}


/* =========================================================
   9. PRIMARY CTA
   ========================================================= */

.btn-primary {
    width: 100%;

    margin-top: 20px;
    padding: 2%;

    font-size: 34px;

    color: #ffffff;

    background-color: #5fca80;
    border-color: #5fca80;

    cursor: pointer;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    color: #ffffff;

    background-color: #348237;
    border-color: #348237;
}


/* Mobile hero CTA */

.nupp {
    width: 100%;

    padding: 10px;

    font-size: 20px;
    font-weight: 900;

    color: #ffffff;

    background-color: #5eca80;

    border: 0;
    border-radius: 25px;

    cursor: pointer;
}


/* =========================================================
   10. LINKS / TEXT BUTTONS
   ========================================================= */

button.linkstyle,
.linkstyle {
    display: inline;

    padding: 0;
    margin: 0;

    color: darkblue !important;

    background: none;
    border: none;

    font: inherit;

    text-decoration: underline;

    cursor: pointer;
}


/* =========================================================
   11. MODALS / SECONDARY BUTTONS
   ========================================================= */

.btn-secondary {
    color: #000000;

    background-color: #ffffff;

    border-color: #5fca80;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    color: #ffffff;

    background-color: #348237;

    border-color: #348237;
}

.modal-dialog {
    max-width: 700px;
}

.modal-dialog.modal-lg {
    max-width: 900px;
}

.modal-body {
    text-align: left;
}

.modal-body h5,
.modal-body h6 {
    color: #000000;
}

.modal-body p {
    line-height: 1.5;
}


/* =========================================================
   12. FOOTER
   ========================================================= */

/*
   Footer background stretches across the entire viewport.
*/

#footer-container {
    width: 100%;
    max-width: none;

    margin-top: 50px;

    color: #ffffff;

    background-color: rgba(0, 0, 0, 0.5);

    text-align: center;
    line-height: 1.3;

    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}


/*
   Footer CONTENT can still have a sensible maximum width.
   Remove max-width if you want the footer content itself
   to span the entire screen too.
*/

#footer-container > .container {
    width: 90%;
    max-width: 1500px;

    margin-left: auto;
    margin-right: auto;
}

#footer-container h6 {
    line-height: 1.4;
}

#footer-container .linkstyle {
    color: #ffffff !important;
}

.footerlink {
    color: lightcyan;
}


/* =========================================================
   13. MOBILE
   ========================================================= */

@media screen and (max-width: 780px) {

    html,
    body {
        font-size: 14px;
    }


    /* Main content */

    #header,
    #body,
    #main-container > .container {
        width: 100%;
        max-width: 100%;

        padding-right: 15px;
        padding-left: 15px;

        margin-right: auto;
        margin-left: auto;

        box-sizing: border-box;
    }


    /* Footer remains full width */

    #footer-container {
        width: 100%;
        max-width: none;
    }

    #footer-container > .container {
        width: 100%;
        max-width: 100%;

        padding-right: 15px;
        padding-left: 15px;

        box-sizing: border-box;
    }


    /* Form */

    form.path_form,
    #step_1 form.path_form {
        width: 100%;

        padding: 15px;

        text-align: left;

        background: #ffffff;

        border-radius: 7px;
    }


    /* First + last name stack */

    #item_2_container,
    #item_3_container {
        display: block;

        width: 100%;

        margin-right: 0;
    }


    #item_4_container {
        padding-left: 0;
    }


    /* CTA */

    .btn-primary {
        padding: 4%;

        font-size: 24px;
    }


    /* Consent */

    #answer_12042 {
        width: 50px;
        height: 50px;

        margin-right: 10px;
    }

    #item_190_container .form-check-label {
        font-size: 12px;
    }

    #item_190_container p {
        margin-left: 60px !important;
    }


    /* Modal */

    .modal-dialog,
    .modal-dialog.modal-lg {
        max-width: 100%;

        margin: 10px;
    }


    /* Hero */

    .giftcards {
        padding: 10px;

        font-size: 38px;
    }


    /* Footer */

    #footer-container h6 {
        font-size: 11px;
    }
}


/* =========================================================
   14. DESKTOP ONLY
   ========================================================= */

@media screen and (min-width: 780px) {

    .nupp {
        display: none;
    }
}


/* =========================================================
   15. SMALL PHONES
   ========================================================= */

@media screen and (max-width: 425px) {

    h2 {
        font-size: 1.5rem;
    }

    .giftcards {
        font-size: 32px;
    }
}


/* =========================================================
   16. STEP 2+ LAYOUT
   ========================================================= */

/* Hide dynamic left-side content after first page */

body.step_2 .dynamic-content,
body.step_3 .dynamic-content,
body.step_4 .dynamic-content,
body.step_5 .dynamic-content,
body.step_6 .dynamic-content,
body.step_7 .dynamic-content,
body.step_8 .dynamic-content,
body.step_9 .dynamic-content {
    display: none !important;
}


/* Center next-page content */

body.step_2 #body,
body.step_3 #body,
body.step_4 #body,
body.step_5 #body,
body.step_6 #body,
body.step_7 #body,
body.step_8 #body,
body.step_9 #body {
    text-align: center !important;
}


body.step_2 #left-container,
body.step_2 #right-container,
body.step_3 #left-container,
body.step_3 #right-container,
body.step_4 #left-container,
body.step_4 #right-container,
body.step_5 #left-container,
body.step_5 #right-container,
body.step_6 #left-container,
body.step_6 #right-container,
body.step_7 #left-container,
body.step_7 #right-container,
body.step_8 #left-container,
body.step_8 #right-container,
body.step_9 #left-container,
body.step_9 #right-container {
    flex: 0 0 100% !important;
    max-width: 100% !important;

    margin-left: auto !important;
    margin-right: auto !important;

    text-align: center !important;
}


body.step_2 form.path_form,
body.step_3 form.path_form,
body.step_4 form.path_form,
body.step_5 form.path_form,
body.step_6 form.path_form,
body.step_7 form.path_form,
body.step_8 form.path_form,
body.step_9 form.path_form {
    width: 100%;
    max-width: 700px;

    margin-left: auto !important;
    margin-right: auto !important;

    text-align: center !important;
}


/* =========================================================
   17. SEISKA FEATURE SECTION
   ========================================================= */

.seiska-feature {
    position: relative;

    width: 100%;
    max-width: 1200px;

    margin: 40px auto;

    background: #fffdf6;

    border-radius: 18px;

    /*
       Arrows are intentionally allowed to extend
       beyond the section.
    */
    overflow: visible;

    box-sizing: border-box;
}


/* Inner */

.seiska-feature-inner {
    display: grid;

    grid-template-columns: 1.2fr 0.85fr 0.65fr;

    align-items: center;

    gap: 20px;

    min-height: 430px;

    padding: 50px 50px 35px 55px;

    box-sizing: border-box;
}


/* Text */

.seiska-feature-text {
    align-self: center;

    max-width: 500px;

    text-align: left;

    color: #10285b;
}

.seiska-feature-text h2 {
    margin: 0 0 20px;

    font-size: 38px;
    line-height: 1.12;
    font-weight: 800;

    color: #10285b;
}

.seiska-feature-text p {
    margin: 0 0 10px;

    font-size: 19px;
    line-height: 1.45;
    font-weight: 400;

    color: #445676;
}


/* Magazine */

.seiska-magazine-wrap {
    position: relative;

    display: flex;

    align-items: flex-end;
    justify-content: center;

    align-self: end;

    width: 100%;
    height: 100%;

    padding-bottom: 8px;

    box-sizing: border-box;
}

.seiska-magazine {
    display: block;

    width: 270px;
    max-width: 100%;
    height: auto;

    transform: rotate(-5deg);
    transform-origin: center bottom;

    border-radius: 4px;

    box-shadow: 0 16px 35px rgba(0, 0, 0, 0.16);
}


/* Right note */

.seiska-note {
    align-self: center;

    text-align: center;

    transform: rotate(-8deg);

    color: #111111;
}

.seiska-note span {
    display: inline-block;

    font-family: "Comic Sans MS", "Bradley Hand", cursive;

    font-size: 28px;
    line-height: 1.2;
}

.seiska-note-line {
    display: block;

    width: 130px;
    height: 20px;

    margin: 6px auto 0;
}


/* Arrows */

.seiska-arrow {
    position: absolute;

    z-index: 10;

    width: 70px;
    height: auto;

    pointer-events: none;
}

svg.seiska-arrow.seiska-arrow-left {
    top: -100px;
    left: -20px;

    transform: rotate(180deg) scaleX(-1);
}

svg.seiska-arrow.seiska-arrow-right {
    top: 0;
    right: 35px;

    transform: rotate(180deg);
}


/* =========================================================
   18. SEISKA TABLET
   ========================================================= */

@media screen and (max-width: 900px) {

    .seiska-feature-inner {
        grid-template-columns: 1fr 0.8fr;

        gap: 25px;

        min-height: 400px;

        padding: 50px 35px 35px;
    }

    .seiska-note {
        display: none;
    }

    .seiska-feature-text h2 {
        font-size: 32px;
    }

    .seiska-feature-text p {
        font-size: 17px;
    }

    .seiska-magazine {
        width: 230px;
    }

    .seiska-arrow {
        width: 55px;
    }

    svg.seiska-arrow.seiska-arrow-left {
        top: -80px;
        left: 25px;
    }

    svg.seiska-arrow.seiska-arrow-right {
        display: none;
    }
}


/* =========================================================
   19. SEISKA MOBILE
   ========================================================= */

@media screen and (max-width: 650px) {

    .seiska-feature {
        margin: 25px auto;

        background: #fffdf6;

        border-radius: 14px;

        overflow: visible;
    }

    .seiska-feature-inner {
        display: flex;
        flex-direction: column;
        align-items: center;

        gap: 20px;

        min-height: 0;

        padding: 55px 22px 35px;
    }

    .seiska-feature-text {
        width: 100%;
        max-width: none;
    }

    .seiska-feature-text h2 {
        margin-bottom: 16px;

        font-size: 28px;
        line-height: 1.15;
    }

    .seiska-feature-text p {
        margin-bottom: 10px;

        font-size: 16px;
        line-height: 1.45;
    }

    .seiska-magazine-wrap {
        width: 100%;
        height: auto;

        margin-top: 5px;
        padding-bottom: 8px;
    }

    .seiska-magazine {
        width: 210px;

        transform: rotate(-4deg);
    }

    .seiska-arrow {
        width: 45px;
    }

    svg.seiska-arrow.seiska-arrow-left {
        top: -65px;
        left: 16px;

        transform: rotate(180deg) scaleX(-1);
    }

    svg.seiska-arrow.seiska-arrow-right {
        display: none;
    }
}