/* ---------- signup form inside the footer ----------
   A page can ask for the footer's signup form (#sign_up) under the footer
   menus, above the sponsors, instead of the beige band above the footer --
   \Yii::$app->view->params['newsletterInFooter'] = true. It then takes the
   dark footer's colours. views/layouts/_footer.php loads this file only on
   those pages (/home2/, /our_menu/, /multipacks/, /multipacks-v2/).
   Moved out of home2.css so every such page gets the same look. */

footer section#sign_up.in_footer {
    width: 100%;
    margin-top: 40px;
    padding: 28px 0 0 !important;
    color: #ffffff;
    background: transparent;
}

footer section#sign_up.in_footer .container_big {
    width: 100%;
    padding: 0;
}

/* the site's own heading font (the band uses Yarden) */
footer section#sign_up.in_footer .title,
footer section#sign_up.in_footer .sect_thnaks .msg {
    color: #ffffff;
    font-family: 'Almoni Bold';
}

footer section#sign_up.in_footer .wraps {
    flex-wrap: wrap;
}

footer section#sign_up.in_footer .fot {
    flex: 1 1 180px;
    width: auto;
    min-width: 0;
}

/* outline fields: transparent, a thin white frame, white text -- so the
   solid white button is the one filled shape and reads as the action */
footer section#sign_up.in_footer form .wrap_input input[type="text"],
footer section#sign_up.in_footer form .wrap_input input[type="email"] {
    color: #ffffff;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.7);
    transition: border-color .2s ease;
}

footer section#sign_up.in_footer form .wrap_input input::placeholder {
    color: rgba(255, 255, 255, 0.7);
    opacity: 1;
}

footer section#sign_up.in_footer form .wrap_input input:focus {
    border-color: #ffffff;
    outline: none;
    box-shadow: 0 0 0 1px #ffffff;
}

/* the browser's autofill paints the field white; keep it dark */
footer section#sign_up.in_footer form .wrap_input input:-webkit-autofill {
    -webkit-text-fill-color: #ffffff;
    -webkit-box-shadow: 0 0 0 1000px #243d44 inset;
    caret-color: #ffffff;
}

/* the dark button would vanish on the dark footer */
footer section#sign_up.in_footer form .wrap_input.submit .btn_blue {
    padding: 0 36px;
    color: #243d44;
    background-color: #ffffff;
}

footer section#sign_up.in_footer form .wrap_input.submit .btn_blue:hover {
    background-color: #cdeaea;
}

footer section#sign_up.in_footer form .wrap_input.accept label {
    color: #ffffff;
}

/* the terms link: white and underlined, which reads as a link on the dark
   footer (the light teal was too close to the white text) */
footer section#sign_up.in_footer form .wrap_input.accept a {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

footer section#sign_up.in_footer form .wrap_input.accept a:hover {
    color: #cdeaea;
}

/* the consent box is drawn by ::before with a #243d44 frame -- the footer's
   own colour -- so it is framed in white here */
footer section#sign_up.in_footer #ws_confirmation_sign_up::before {
    border-color: #ffffff;
}

footer section#sign_up.in_footer .sect_thnaks .icon img {
    filter: brightness(0) invert(1);
}

@media (max-width: 767px) {
    footer section#sign_up.in_footer {
        margin-top: 24px;
    }

    footer section#sign_up.in_footer .sect_form {
        flex-direction: column;
        gap: 16px;
    }

    footer section#sign_up.in_footer .wraps {
        flex-direction: column;
    }

    footer section#sign_up.in_footer .fot {
        flex: none;
        width: 100%;
    }
}