/* OnlineGastro.cz - Shoptet newsletter CAPTCHA - FINAL
   - desktop s CAPTCHA: e-mail + nadpis + CAPTCHA + kod + tlacitko v jednom radku
   - desktop bez CAPTCHA: e-mail + tlacitko kompaktne uprostred
   - mobil s CAPTCHA: e-mail, nadpis, CAPTCHA + kod vedle sebe, tlacitko
   - mobil bez CAPTCHA: e-mail, tlacitko, souhlas
   - u CAPTCHA pole se odstranuje dekorativni ikona obalky
*/

/* =========================================================
   ZAKLADNI ROZLOZENI FORMULARE
   ========================================================= */

#formNewsletterWidget > fieldset {
    display: grid !important;
    grid-template-columns: minmax(300px, 360px) minmax(440px, 520px) auto;
    grid-template-areas:
        "email captcha submit"
        "consent consent consent";
    align-items: center;
    justify-content: center;
    gap: 10px 12px;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
}

/* =========================================================
   E-MAIL
   ========================================================= */

#formNewsletterWidget > fieldset > .form-group.smart-label-wrapper {
    grid-area: email;
    width: 100%;
    margin: 0;
}

/* =========================================================
   CAPTCHA BLOK - DESKTOP V JEDNOM RADKU
   ========================================================= */

#formNewsletterWidget > fieldset > fieldset.box.box-sm.box-bg-default {
    grid-area: captcha;
    display: grid !important;
    grid-template-columns: auto 115px minmax(130px, 1fr);
    grid-template-areas:
        "title image input";
    align-items: center;
    gap: 8px 10px;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

/* Nadpis Bezpecnostni kontrola */

#formNewsletterWidget > fieldset > fieldset.box.box-sm.box-bg-default > h2 {
    grid-area: title;
    margin: 0 !important;
    padding: 0;
    font-size: 14px !important;
    line-height: 1.25;
    white-space: nowrap;
}

/* CAPTCHA obrazek */

#formNewsletterWidget > fieldset > fieldset.box.box-sm.box-bg-default > .captcha-image {
    grid-area: image;
    margin: 0;
}

#formNewsletterWidget > fieldset > fieldset.box.box-sm.box-bg-default > .captcha-image img {
    display: block;
    width: auto;
    max-width: 115px;
    height: auto;
}

/* Pole pro opsani CAPTCHA */

#formNewsletterWidget > fieldset > fieldset.box.box-sm.box-bg-default > .form-group.smart-label-wrapper {
    grid-area: input;
    width: 100%;
    min-width: 0;
    margin: 0;
}

/* =========================================================
   CAPTCHA INPUT - BEZ IKONY OBALKY
   ========================================================= */

#formNewsletterWidget > fieldset > fieldset.box.box-sm.box-bg-default > .form-group.smart-label-wrapper::before,
#formNewsletterWidget > fieldset > fieldset.box.box-sm.box-bg-default > .form-group.smart-label-wrapper::after,
#formNewsletterWidget > fieldset > fieldset.box.box-sm.box-bg-default > .form-group.smart-label-wrapper > label::before,
#formNewsletterWidget > fieldset > fieldset.box.box-sm.box-bg-default > .form-group.smart-label-wrapper > label::after {
    display: none !important;
    content: none !important;
}

#formNewsletterWidget > fieldset > fieldset.box.box-sm.box-bg-default > .form-group.smart-label-wrapper > svg,
#formNewsletterWidget > fieldset > fieldset.box.box-sm.box-bg-default > .form-group.smart-label-wrapper > i,
#formNewsletterWidget > fieldset > fieldset.box.box-sm.box-bg-default > .form-group.smart-label-wrapper > [class*="icon"],
#formNewsletterWidget > fieldset > fieldset.box.box-sm.box-bg-default > .form-group.smart-label-wrapper > [class*="mail"] {
    display: none !important;
}

#formNewsletterWidget > fieldset > fieldset.box.box-sm.box-bg-default > .form-group.smart-label-wrapper .form-control {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding-left: 12px !important;
    background-image: none !important;
    background-position: initial !important;
}

/* Obecna ochrana poli */

#formNewsletterWidget .form-control {
    max-width: 100%;
    box-sizing: border-box;
}

/* =========================================================
   TLACITKO
   ========================================================= */

#formNewsletterWidget > fieldset > button[type="submit"] {
    grid-area: submit;
    align-self: center;
    margin: 0;
    white-space: nowrap;
}

/* =========================================================
   SOUHLAS / OCHRANA OSOBNICH UDAJU
   ========================================================= */

#formNewsletterWidget > fieldset > .consents {
    grid-area: consent;
    justify-self: center;
    margin: 8px 0 0;
}

/* =========================================================
   DESKTOP BEZ CAPTCHA
   ========================================================= */

@media (min-width: 1101px) {

    #formNewsletterWidget > fieldset:not(:has(> fieldset.box.box-sm.box-bg-default)) {
        grid-template-columns: minmax(300px, 360px) auto;
        grid-template-areas:
            "email submit"
            "consent consent";
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 768px) and (max-width: 1100px) {

    #formNewsletterWidget > fieldset {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "email"
            "captcha"
            "submit"
            "consent";
        max-width: 620px;
        margin-left: auto;
        margin-right: auto;
    }

    #formNewsletterWidget > fieldset > button[type="submit"] {
        justify-self: center;
    }

    /* Tablet bez CAPTCHA */

    #formNewsletterWidget > fieldset:not(:has(> fieldset.box.box-sm.box-bg-default)) {
        grid-template-areas:
            "email"
            "submit"
            "consent";
    }
}

/* =========================================================
   MOBIL
   ========================================================= */

@media (max-width: 767px) {

    #formNewsletterWidget > fieldset {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "email"
            "captcha"
            "submit"
            "consent";
        gap: 10px;
        width: 100%;
    }

    /* CAPTCHA: nadpis nahore, obrazek + pole vedle sebe */

    #formNewsletterWidget > fieldset > fieldset.box.box-sm.box-bg-default {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "title title"
            "image input";
        width: 100%;
        gap: 6px 10px;
        align-items: center;
    }

    #formNewsletterWidget > fieldset > fieldset.box.box-sm.box-bg-default > h2 {
        margin: 0 !important;
        font-size: 14px !important;
        white-space: normal;
    }

    #formNewsletterWidget > fieldset > fieldset.box.box-sm.box-bg-default > .captcha-image img {
        max-width: 110px;
    }

    #formNewsletterWidget > fieldset > button[type="submit"] {
        justify-self: center;
    }

    #formNewsletterWidget > fieldset > .consents {
        margin-top: 0;
        text-align: center;
    }

    /* Mobil bez CAPTCHA - zadny prazdny radek */

    #formNewsletterWidget > fieldset:not(:has(> fieldset.box.box-sm.box-bg-default)) {
        grid-template-areas:
            "email"
            "submit"
            "consent";
    }
}