/* =========================================================
   SMOLLAN MONITOR
   Local fallback CSS
   ========================================================= */

:root {
    --smollan-blue: #172b3a;
    --smollan-blue-light: #243e50;
    --smollan-orange: #f5a623;

    --text: #263746;
    --muted: #71808c;

    --border: #d9e0e5;
    --background: #f4f6f8;
    --white: #ffffff;
}


/* =========================================================
   RESET
   ========================================================= */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

html {
    font-size: 16px;
}

body {
    background: var(--background);
    color: var(--text);

    font-family: "Montserrat", Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.5;

    min-height: 100vh;
}


/* =========================================================
   GENERAL CONTAINER
   ========================================================= */

.auto__container {
    width: 100%;
    max-width: 1180px;

    margin: 0 auto;
    padding-left: 25px;
    padding-right: 25px;
}


/* =========================================================
   HEADER
   ========================================================= */

.header {
    background: var(--white);
    border-bottom: 1px solid #e5e9ec;

    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.04);
}

.header > .auto__container {
    height: 100px;
}

.header__inner {
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;
}


/* Logo */

.header__inner-logo {
    display: inline-flex;
    align-items: center;

    text-decoration: none;
}

.header__inner-logo img {
    display: block;

    width: 180px;
    height: auto;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.nav {
    margin-left: auto;
}

.nav__inner {
    display: flex;
    align-items: center;
    gap: 25px;
}

.nav__inner-link {
    color: var(--text);

    font-size: 13px;
    font-weight: 500;

    text-decoration: none;

    transition: color 0.2s ease;
}

.nav__inner-link:hover {
    color: var(--smollan-orange);
}

.nav__inner-link.onpage {
    color: var(--smollan-orange);
}


/* Burger není na této stránce potřeba */

.burger {
    display: none;
}


/* =========================================================
   MAIN
   ========================================================= */

.wrapper {
    min-height: calc(100vh - 100px);

    display: flex;
    flex-direction: column;
}


/* =========================================================
   LOGIN / PASSWORD RESET AREA
   ========================================================= */

.contactForm {
    flex: 1;

    display: flex;
    align-items: flex-start;
    justify-content: center;

    padding: 70px 20px 80px;
}

.contactForm > .auto__container {
    width: 100%;
    max-width: 460px;
}


/* =========================================================
   FORM CARD
   ========================================================= */

.contact-form {
    width: 100%;

    background: var(--white);

    padding: 40px 45px;

    border: 1px solid var(--border);
    border-radius: 8px;

    box-shadow:
        0 10px 30px rgba(23, 43, 58, 0.08);
}


/* =========================================================
   FORM TITLE
   ========================================================= */

.contact-form h3 {
    margin: 0 0 30px;

    color: var(--smollan-blue);

    font-size: 24px;
    line-height: 1.3;
    font-weight: 600;

    text-align: center;
}


/* =========================================================
   FORM STRUCTURE
   ========================================================= */

.contactForm__inner {
    width: 100% !important;
    max-width: none !important;
}

.contactForm__inner-row {
    width: 100% !important;
    max-width: none !important;
}

.contactForm__inner-col {
    width: 100% !important;
    max-width: none !important;
}


/* =========================================================
   INPUT WRAPPER
   ========================================================= */

.contactForm__inner .input {
    width: 100% !important;
    max-width: none !important;

    margin: 0 0 15px 0 !important;
}


/* =========================================================
   ALL FORM INPUTS
   ========================================================= */

/*
   Záměrně používáme !important.
   Původní frontend.css z www.4pap.com obsahuje
   vlastní pravidla pro inputy, která chceme přebít.
*/

.contactForm .contactForm__inner input[type="text"],
.contactForm .contactForm__inner input[type="name"],
.contactForm .contactForm__inner input[type="password"],
.contactForm .contactForm__inner input[type="email"],
.contactForm .contactForm__inner input[type="tel"],
.contactForm .contactForm__inner input[type="phone"] {

    display: block !important;

    width: 100% !important;
    max-width: none !important;

    height: 46px !important;

    box-sizing: border-box !important;

    margin: 0 !important;

    padding: 0 14px !important;

    border: 1px solid #ccd4da !important;
    border-radius: 4px !important;

    background: #ffffff !important;
    color: var(--text) !important;

    font-family: "Montserrat", Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;

    line-height: normal !important;

    outline: none !important;

    box-shadow: none;
    
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


/* =========================================================
   INPUT PLACEHOLDER
   ========================================================= */

.contactForm .contactForm__inner input::placeholder {
    color: #8996a0 !important;
    opacity: 1 !important;
}


/* =========================================================
   INPUT FOCUS
   ========================================================= */

.contactForm .contactForm__inner input[type="text"]:focus,
.contactForm .contactForm__inner input[type="name"]:focus,
.contactForm .contactForm__inner input[type="password"]:focus,
.contactForm .contactForm__inner input[type="email"]:focus,
.contactForm .contactForm__inner input[type="tel"]:focus,
.contactForm .contactForm__inner input[type="phone"]:focus {

    border-color: var(--smollan-blue) !important;

    box-shadow:
        0 0 0 3px rgba(23, 43, 58, 0.10) !important;
}


/* =========================================================
   LOGIN - FORGOTTEN PASSWORD
   ========================================================= */

.contactForm__inner .wow.fadeInUp {
    margin-top: 5px;

    text-align: right;
}

.contactForm__inner .wow.fadeInUp label {
    display: block;
}

.contactForm__inner .wow.fadeInUp a {
    color: var(--muted) !important;

    font-size: 12px;

    text-decoration: none;
}

.contactForm__inner .wow.fadeInUp a:hover {
    color: var(--smollan-blue) !important;

    text-decoration: underline;
}


/* =========================================================
   CAPTCHA
   ========================================================= */

.contactForm .g-recaptcha {
    width: 100%;

    margin: 24px auto 0;

    display: flex;
    justify-content: center;
}


/* =========================================================
   FORM FOOTER
   ========================================================= */

.contactForm__footer {
    margin-top: 20px;

    text-align: center;
}


/* =========================================================
   BUTTON
   ========================================================= */

.contactForm__footer .button,
.contactForm__footer input[type="submit"] {

    display: inline-flex;

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

    min-width: 140px;
    min-height: 44px;

    padding: 0 22px;

    border: 0;
    border-radius: 4px;

    background: var(--smollan-blue);
    color: #ffffff;

    font-family: "Montserrat", Arial, Helvetica, sans-serif;

    font-size: 13px;
    font-weight: 600;

    line-height: 1.2;

    text-align: center;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.1s ease;
}

.contactForm__footer .button:hover,
.contactForm__footer input[type="submit"]:hover {
    background: var(--smollan-blue-light);
}

.contactForm__footer .button:active,
.contactForm__footer input[type="submit"]:active {
    transform: translateY(1px);
}


/* =========================================================
   PASSWORD RESET BUTTON
   ========================================================= */

/*
   Delší text tlačítka "Obnovit zapomenuté heslo"
*/

.contactForm:has(#phone) .contactForm__footer {
    margin-top: 25px;
}

.contactForm:has(#phone) .contactForm__footer input[type="submit"] {
    min-width: 230px;

    padding-left: 20px;
    padding-right: 20px;

    white-space: nowrap;
}


/* =========================================================
   WARNING MESSAGE
   ========================================================= */

.warningStripe {
    width: 100%;

    background: #fff4df;
    color: #7a4d00;

    padding: 15px 0;

    border-bottom: 1px solid #f0d49b;
}

.warningStripe p {
    margin: 0;
}


/* =========================================================
   SUCCESS MESSAGE
   ========================================================= */

.warningStripe.success {
    background: #ecfdf3;
    color: #067647;

    border-bottom-color: #abefc6;
}

.warningStripe a {
    color: inherit;
    text-decoration: underline;
}


/* =========================================================
   INFO STRIPE
   ========================================================= */

.infoStripe {
    width: 100%;

    padding: 18px 0;

    background: var(--smollan-blue);
    color: rgba(255, 255, 255, 0.9);

    text-align: center;
}

.infoStripe p {
    margin: 0;

    font-size: 12px;
    font-weight: 400;
}

.infoStripe div.auto__container p {
    font-weight: 500;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .auto__container {
        padding-left: 15px;
        padding-right: 15px;
    }


    /* Header */

    .header > .auto__container {
        height: 75px;
    }

    .header__inner {
        height: 75px;
    }

    .header__inner-logo img {
        width: 145px;
    }

    .nav__inner {
        gap: 12px;
    }

    .nav__inner-link {
        font-size: 12px;
    }


    /* Form */

    .contactForm {
        padding: 35px 15px 50px;
    }

    .contact-form {
        padding: 30px 20px;
    }

    .contact-form h3 {
        margin-bottom: 25px;

        font-size: 21px;
    }


    /* CAPTCHA */

    .contactForm .g-recaptcha {
        transform: scale(0.9);
        transform-origin: center;
    }


    /* Buttons */

    .contactForm__footer input[type="submit"] {
        width: 100%;
    }

    .contactForm:has(#phone) .contactForm__footer input[type="submit"] {
        min-width: 0;
    }


    /* Info */

    .infoStripe {
        padding: 15px;
    }

    .infoStripe p {
        font-size: 11px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

    .contact-form {
        padding: 25px 15px;
    }

    .contact-form h3 {
        font-size: 20px;
    }

    .contactForm .g-recaptcha {
        transform: scale(0.82);
    }
}