/* =========================================================
   ONI SYSTEM – POPTAT ŘEŠENÍ
   FINÁLNÍ CSS
   Vzhledově navazuje na stránku "Vyzkoušejte zdarma"

   DŮLEŽITÉ:
   - není závislé na body.in-poptat-reseni
   - používá unikátní třídy z upraveného HTML
   - nezasahuje do ostatních formulářů a stránek Shoptetu
   ========================================================= */


/* =========================================================
   1. BARVY A ZÁKLAD
   ========================================================= */

.poptat-hero,
.poptat-hero ~ section {
    --oni-red: #ED1C24;
    --oni-red-hover: #c9000c;
    --oni-text: #252525;
    --oni-muted: #666666;
    --oni-bg: #f7f7f7;
    --oni-white: #ffffff;
    --oni-border: #e5e5e5;

    font-family: "Open Sans", Arial, sans-serif;
    color: var(--oni-text);
}

.poptat-hero *,
.poptat-hero *::before,
.poptat-hero *::after,
.poptat-hero ~ section *,
.poptat-hero ~ section *::before,
.poptat-hero ~ section *::after {
    box-sizing: border-box;
}


/* =========================================================
   2. ŠÍŘKA A ZÁKLAD STRÁNKY
   ========================================================= */

/*
   Tento blok se aplikuje pouze na stránku,
   kde je přítomná .poptat-hero.
*/
.content-inner:has(.poptat-hero) {
    padding-bottom: 75px;
}

.content-inner:has(.poptat-hero) > h1,
.content-inner:has(.poptat-hero) > .text {
    width: 100%;
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
}

.content-inner:has(.poptat-hero) > h1 {
    margin-top: 0;
    margin-bottom: 24px;

    font-family: "Open Sans", Arial, sans-serif;
    font-size: 34px;
    line-height: 1.2;
    font-weight: 700;

    color: #252525;
}

.content-inner:has(.poptat-hero) > .text {
    padding-left: 0;
    padding-right: 0;
}


/* =========================================================
   3. TYPOGRAFIE
   ========================================================= */

.poptat-hero h2,
.poptat-hero ~ section h2 {
    margin: 0 0 15px;

    font-family: "Open Sans", Arial, sans-serif;
    font-size: 27px;
    line-height: 1.3;
    font-weight: 700;

    color: var(--oni-text);
}

.poptat-hero h3,
.poptat-hero ~ section h3 {
    margin: 0 0 9px;

    font-family: "Open Sans", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.4;
    font-weight: 700;

    color: var(--oni-text);
}

.poptat-hero p,
.poptat-hero ~ section p {
    margin: 0 0 14px;

    font-family: "Open Sans", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.7;

    color: var(--oni-muted);
}

.poptat-hero p:last-child,
.poptat-hero ~ section p:last-child {
    margin-bottom: 0;
}


/* Obecná velikost běžného textu na stránce */
.poptat-hero,
.poptat-hero ~ section {
    font-size: 14px;
}

/* =========================================================
   4. MALÉ ČERVENÉ NADPISY
   ========================================================= */

.poptat-hero .section-label,
.poptat-hero ~ section .section-label {
    display: block;

    margin-bottom: 9px;

    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.07em;

    color: var(--oni-red);
}


/* =========================================================
   5. ÚVODNÍ HERO BLOK
   ========================================================= */

.poptat-hero {
    margin-bottom: 78px;
    padding: 46px 50px;

    background: var(--oni-bg);

    border-radius: 6px;
}

.poptat-hero > h2 {
    max-width: 760px;
    margin-bottom: 18px;

    font-size: 27px;
    line-height: 1.23;
}

.poptat-hero > p {
    max-width: 760px;

    font-size: 14px;
    line-height: 1.75;
}


/* =========================================================
   6. KONTAKT POD FORMULÁŘEM
   ========================================================= */

.oni-inquiry-contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px 18px;

    margin-top: 22px;

    font-size: 14px;
    line-height: 1.5;

    color: var(--oni-muted);
}

.oni-inquiry-contact strong {
    color: var(--oni-text);
}

.oni-inquiry-contact a {
    color: var(--oni-text);
    font-weight: 700;
    text-decoration: none;

    transition: color .2s ease;
}

.oni-inquiry-contact a:hover {
    color: var(--oni-red);
}


/* =========================================================
   7. FORMULÁŘ Z [w-form-XBT0E]
   ========================================================= */

/*
   Formulář je uvnitř .poptat-hero,
   takže toto CSS nezasáhne login, košík,
   vyhledávání ani jiné formuláře Shoptetu.
*/

.poptat-hero form {
    width: 100%;
    max-width: 620px;

    margin-top: 28px;
    padding: 32px 32px 30px;

    background: #fff;

    border: 1px solid var(--oni-border);
    border-radius: 6px;

    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.055);
}

.poptat-hero form .form-group {
    margin-bottom: 14px;
}

.poptat-hero form label {
    display: block;

    margin-bottom: 6px;

    font-family: "Open Sans", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 600;

    color: var(--oni-text);
}

.poptat-hero form input[type="text"],
.poptat-hero form input[type="email"],
.poptat-hero form input[type="tel"],
.poptat-hero form input[type="number"],
.poptat-hero form input[type="url"],
.poptat-hero form select,
.poptat-hero form textarea {
    display: block;

    width: 100%;
    min-height: 46px;

    margin: 0 0 14px;
    padding: 10px 13px;

    background: #fff;

    border: 1px solid #dadada;
    border-radius: 6px;

    outline: none;
    box-shadow: none;

    font-family: "Open Sans", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.45;

    color: var(--oni-text);

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.poptat-hero form textarea {
    min-height: 115px;
    resize: vertical;
}

.poptat-hero form input::placeholder,
.poptat-hero form textarea::placeholder {
    color: #999;
}

.poptat-hero form input:focus,
.poptat-hero form select:focus,
.poptat-hero form textarea:focus {
    border-color: var(--oni-red);
    box-shadow: 0 0 0 3px rgba(227, 6, 19, .06);
}


/* checkbox / radio */
.poptat-hero form input[type="checkbox"],
.poptat-hero form input[type="radio"] {
    accent-color: var(--oni-red);
}


/* =========================================================
   8. TLAČÍTKO FORMULÁŘE
   ========================================================= */

/*
   Formulář [w-form-XBT0E] je generovaný doplňkem Webotvůrci.
   Odesílací tlačítko je uvnitř:
   div[id*="wt-form-wrapper-"] .f-btn-group

   Původní selektor ".poptat-hero form ..." proto tlačítko
   nemusí zachytit. Níže je selektor navázaný přímo
   na strukturu generovaného formuláře a současně omezený
   jen na stránku Poptat řešení.
*/

.content-inner:has(.poptat-hero) div[id*="wt-form-wrapper-"] .f-btn-group button[type="submit"],
.content-inner:has(.poptat-hero) div[id*="wt-form-wrapper-"] .f-btn-group input[type="submit"],
.content-inner:has(.poptat-hero) div[id*="wt-form-wrapper-"] button[type="submit"],
.content-inner:has(.poptat-hero) div[id*="wt-form-wrapper-"] input[type="submit"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto;
    min-width: 0;
    min-height: 48px;

    margin: 0;
    padding: 15px 22px !important;

    background: #ED1C24 !important;
    background-color: #ED1C24 !important;

    border: 0 !important;
    border-radius: 6px !important;

    box-shadow: none !important;
    outline: none !important;

    -webkit-appearance: none;
    appearance: none;

    font-family: "Open Sans", Arial, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;

    text-transform: uppercase !important;
    text-decoration: none !important;
    text-shadow: none !important;

    color: #fff !important;
    opacity: 1 !important;

    cursor: pointer !important;

    transition:
        background-color .2s ease,
        transform .2s ease !important;
}

.content-inner:has(.poptat-hero) div[id*="wt-form-wrapper-"] .f-btn-group button[type="submit"]:hover,
.content-inner:has(.poptat-hero) div[id*="wt-form-wrapper-"] .f-btn-group input[type="submit"]:hover,
.content-inner:has(.poptat-hero) div[id*="wt-form-wrapper-"] button[type="submit"]:hover,
.content-inner:has(.poptat-hero) div[id*="wt-form-wrapper-"] input[type="submit"]:hover {
    background: #d70911 !important;
    background-color: #d70911 !important;

    color: #fff !important;

    transform: translateY(-1px);
}

/* aktivní stav při kliknutí */
.content-inner:has(.poptat-hero) div[id*="wt-form-wrapper-"] .f-btn-group button[type="submit"]:active,
.content-inner:has(.poptat-hero) div[id*="wt-form-wrapper-"] .f-btn-group input[type="submit"]:active,
.content-inner:has(.poptat-hero) div[id*="wt-form-wrapper-"] button[type="submit"]:active,
.content-inner:has(.poptat-hero) div[id*="wt-form-wrapper-"] input[type="submit"]:active {
    transform: translateY(0);
}

/*
   Fallback pro případ změny HTML doplňku:
   zachytí submit tlačítko i bez .f-btn-group.
*/
.content-inner:has(.poptat-hero) .poptat-hero button[type="submit"],
.content-inner:has(.poptat-hero) .poptat-hero input[type="submit"],
.content-inner:has(.poptat-hero) .poptat-hero .btn-primary {
    background: #ED1C24 !important;
    background-color: #ED1C24 !important;
    border-color: #ED1C24 !important;
    border-radius: 6px !important;
    color: #fff !important;
}

.content-inner:has(.poptat-hero) .poptat-hero button[type="submit"]:hover,
.content-inner:has(.poptat-hero) .poptat-hero input[type="submit"]:hover,
.content-inner:has(.poptat-hero) .poptat-hero .btn-primary:hover {
    background: #d70911 !important;
    background-color: #d70911 !important;
    border-color: #d70911 !important;
    color: #fff !important;
}


/* =========================================================
   9. OBECNÉ SEKCE ZA HERO BLOKEM
   ========================================================= */

.poptat-hero ~ section {
    margin-bottom: 78px;
}

.poptat-hero ~ section:last-child {
    margin-bottom: 0;
}


/* =========================================================
   10. HLAVIČKA SEKCE
   ========================================================= */

.oni-section-header {
    margin-bottom: 28px;
}

.oni-section-header h2 {
    max-width: 760px;
}

.oni-section-header p {
    max-width: 760px;
}


/* =========================================================
   11. SEKCE "JAK TO FUNGUJE"
   ========================================================= */

.process {
    padding: 36px 30px 32px;

    background: var(--oni-bg);

    border-radius: 6px;
}


/* =========================================================
   12. ŘÁDEK KARET
   ========================================================= */

.oni-section-header + .row {
    display: flex;
    flex-wrap: wrap;

    margin-left: -8px;
    margin-right: -8px;
}

.oni-section-header + .row > [class*="col-"] {
    display: flex;

    padding-left: 8px;
    padding-right: 8px;
}


/* =========================================================
   13. KARTY KROKŮ + INFORMAČNÍ KARTY
   ========================================================= */

.oni-section-header + .row .card {
    width: 100%;
    height: 100%;
    min-height: 145px;

    padding: 25px 23px;

    background: #fff;

    border: 1px solid var(--oni-border);
    border-radius: 6px;

    box-shadow: none;

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.oni-section-header + .row .card:hover {
    transform: translateY(-2px);

    border-color: #dadada;

    box-shadow: 0 9px 28px rgba(0, 0, 0, .045);
}


/* =========================================================
   14. ČÍSLA KROKŮ
   ========================================================= */

.oni-inquiry-step__number,
.step-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;
    flex: 0 0 40px;

    margin-bottom: 21px;

    background: var(--oni-red);

    border-radius: 50%;

    font-family: "Open Sans", Arial, sans-serif;
    font-size: 14px;
    line-height: 1;
    font-weight: 700;

    color: #fff;
}


/* =========================================================
   15. SEKCE "CO NÁM MŮŽETE NAPSAT"
   ========================================================= */

.poptat-hero ~ section:not(.process):not(.light-section) .oni-section-header + .row .card {
    background: #fff;
}


/* =========================================================
   16. ZÁVĚREČNÝ SVĚTLÝ BLOK
   ========================================================= */

.light-section {
    padding: 36px 30px 32px;

    background: var(--oni-bg);

    border-radius: 6px;
}

.light-section h2 {
    margin-bottom: 12px;
}

.light-section p {
    max-width: 720px;
}


/* =========================================================
   17. ODKAZY V OBSAHU
   ========================================================= */

.poptat-hero a:not(.btn),
.poptat-hero ~ section a:not(.btn) {
    transition: color .2s ease;
}


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

@media (max-width: 1200px) {

    .content-inner:has(.poptat-hero) > h1,
    .content-inner:has(.poptat-hero) > .text {
        width: calc(100% - 40px);
    }

}


@media (max-width: 991px) {

    .content-inner:has(.poptat-hero) {
        padding-bottom: 55px;
    }

    .poptat-hero {
        padding: 40px 34px;
    }

    .poptat-hero form {
        max-width: none;
    }

    .oni-section-header + .row > [class*="col-"] {
        margin-bottom: 16px;
    }

    .oni-section-header + .row > [class*="col-"]:last-child {
        margin-bottom: 0;
    }

}


/* =========================================================
   19. MOBIL
   ========================================================= */

@media (max-width: 767px) {

    .content-inner:has(.poptat-hero) {
        padding-bottom: 40px;
    }

    .content-inner:has(.poptat-hero) > h1,
    .content-inner:has(.poptat-hero) > .text {
        width: calc(100% - 30px);
    }

    .content-inner:has(.poptat-hero) > h1 {
        margin-bottom: 18px;

        font-size: 34px;
        line-height: 1.25;
    }

    .poptat-hero,
    .poptat-hero ~ section {
        margin-bottom: 52px;
    }

    .poptat-hero {
        padding: 30px 21px;

        border-radius: 6px;
    }

    .poptat-hero > h2 {
        font-size: 27px;
        line-height: 1.25;
    }

    .poptat-hero > p {
        font-size: 14px;
        line-height: 1.7;
    }

    .poptat-hero ~ section h2 {
        font-size: 27px;
        line-height: 1.3;
    }

    .poptat-hero ~ section h3 {
        font-size: 17px;
    }

    .poptat-hero form {
        margin-top: 24px;
        padding: 25px 20px;
    }

    .content-inner:has(.poptat-hero) div[id*="wt-form-wrapper-"] .f-btn-group button[type="submit"],
    .content-inner:has(.poptat-hero) div[id*="wt-form-wrapper-"] .f-btn-group input[type="submit"],
    .content-inner:has(.poptat-hero) div[id*="wt-form-wrapper-"] button[type="submit"],
    .content-inner:has(.poptat-hero) div[id*="wt-form-wrapper-"] input[type="submit"],
    .content-inner:has(.poptat-hero) .poptat-hero button[type="submit"],
    .content-inner:has(.poptat-hero) .poptat-hero input[type="submit"],
    .content-inner:has(.poptat-hero) .poptat-hero .btn-primary {
        width: 100% !important;
    }

    .oni-inquiry-contact {
        display: block;

        margin-top: 20px;
    }

    .oni-inquiry-contact strong,
    .oni-inquiry-contact a {
        display: block;
        width: fit-content;

        margin-bottom: 7px;
    }

    .process,
    .light-section {
        padding: 27px 20px;

        border-radius: 6px;
    }

    .oni-section-header {
        margin-bottom: 22px;
    }

    .oni-section-header + .row {
        display: block;

        margin-left: 0;
        margin-right: 0;
    }

    .oni-section-header + .row > [class*="col-"] {
        display: block;

        width: 100%;

        padding-left: 0;
        padding-right: 0;

        margin-bottom: 14px;
    }

    .oni-section-header + .row > [class*="col-"]:last-child {
        margin-bottom: 0;
    }

}


/* =========================================================
   20. MALÉ TELEFONY
   ========================================================= */

@media (max-width: 420px) {

    .content-inner:has(.poptat-hero) > h1,
    .content-inner:has(.poptat-hero) > .text {
        width: calc(100% - 24px);
    }

    .poptat-hero {
        padding-left: 18px;
        padding-right: 18px;
    }

    .poptat-hero form {
        padding-left: 17px;
        padding-right: 17px;
    }

}