#points,
#contact-page {
    --color-yellow: #fdc50e;
    --color-brown: #4a2e20;
    --color-dark-brown: #3a1c0e;
    --color-orange: #ff8400;
    --gap-lg: 60px;
    --gap-md: 32px;
    --gap-sm: 18px;
    --pad-x: 8%;
    --radius-pill: 999px;
    --radius-lg: 25px;
    font-family: "Roboto";
    color: #51282b;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: -100px
}

#points .cta-btn {
    background-color: var(--color-orange);
    color: var(--color-dark-brown);
    font-family: "Knofedt", sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    font-size: clamp(1rem, 5.5vw, 3rem);
    padding: 0 65px;
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background-color .3s ease;
    margin-top: 30px
}

#points .cta-btn:hover {
    background-color: #e67300
}

#points .kde-jsme {
    margin-bottom: 60px
}

#points .kde-jsme h2 {
    font-family: "Knofedt", sans-serif;
    font-size: 35px;
    margin-bottom: 20px;
    text-align: center;
    text-transform: uppercase;
    color: #51282b;
    line-height: 1;
}

#points .kde-jsme h2 span {
    display: block;
    font-size: 75px
}

#points .select-row {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    /*max-width: 50%;*/
    gap: 20px
}

#points .select-row .select-box {
    flex: 1 1 30%;
    min-width: 150px
}

#points .select-row .select-box label {
    display: none
}

#points .select-row .select-box select {
    width: 100%;
    color: var(--color-yellow);
    font-family: "Knofedt", sans-serif;
    text-transform: uppercase;
    font-size: 24px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='45' height='20' fill='none'%3E%3Cpath fill='%23FDB813' d='M30.936 5.3 23 12.105 15.064 5.3a1.25 1.25 0 0 0-1.629 1.897l.002.001 8.75 7.5a1.245 1.245 0 0 0 1.629-.001l-.002.001 8.75-7.5a1.25 1.25 0 1 0-1.629-1.897l.001-.001Z'/%3E%3C/svg%3E");
    padding: 10px 40px 10px 20px;
}

#points #stores {
    display: grid;
    grid-template-columns:repeat(2, 1fr);
    gap: 10px 50px;
    margin-top: 50px
}

#points .store {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px 0;
    color: #4a2e20
}

#points .store-text {
    flex: 1 1 55%
}

#points .store h3 {
    font-family: "Knofedt", sans-serif;
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.05;
    margin: 0 0 25px;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #51282b
}

#points .store-text p {
    position: relative;
    margin: 10px 0;
    padding-left: 34px;
    font-size: 18px;
    line-height: 1.35
}

#points .store-text p strong {
    display: none
}

#points .store-text p::before {
    content: "";
    position: absolute;
    left: 0;
    top: .1em;
    width: 22px;
    height: 22px;
    background-repeat: no-repeat;
    background-size: contain
}

#points .store-text p:nth-of-type(1)::before {
    background-image: url("/user/documents/theme/img/point.png")
}

#points .store-text p:nth-of-type(2)::before {
    background-image: url("/user/documents/theme/img/phone.png")
}

#points .store-text p:nth-of-type(3)::before {
    background-image: url("/user/documents/theme/img/mail.png")
}

#points .store img {
    flex: 0 0 auto;
    max-width: 420px;
    width: 36%;
    height: auto;
    z-index: 1;
    display: block
}

#points h2.big-heading {
    font-family: "Knofedt", sans-serif;
    font-size: clamp(28px, 5vw, 40px);
    text-align: center;
    margin-bottom: 40px;
    text-transform: uppercase;
    color: #51282b;
    line-height: 1
}

#points h2.big-heading strong {
    font-size: clamp(40px, 5vw, 80px)
}

#points .kontaktni-blok1 {
    left: 50%;
    width: 100vw;
    position: relative;
    transform: translateX(-50%);
    background: #00bcbc;
    color: #fff;
    padding: 30px var(--pad-x);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--gap-lg)
}

#points .kontaktni-formular p:first-child,
#contact-page .kontaktni-formular p:first-child {
    display: none
}

#points .kontaktni-text {
    flex: 1 1 460px;
    max-width: 600px;
    padding: 10px 0;
    text-align: left;
    font-family: "Knofedt", sans-serif;
    line-height: 1;
    font-size: 26px;
    display: flex;
    flex-direction: column;
    justify-content: center
}

#points .kontaktni-text p:first-of-type {
    margin: 0 0 60px
}

#points .kontaktni-text p strong {
    display: block;
    font-size: clamp(28px, 5.2vw, 55px);
    letter-spacing: .4px;
    text-transform: uppercase
}

#points .kontaktni-text .zvyrazneni {
    color: #ffd400
}

#points .kontaktni-formular,
#contact-page .kontaktni-formular {
    flex: 1 1 380px;
    max-width: 480px;
    padding: 10px 0
}

#points .kontaktni-formular form::before,
#contact-page .kontaktni-formular form::before {
    content: "KONTAKTNÍ FORMULÁŘ:";
    display: block;
    margin: 0 0 20px;
    font-family: "Knofedt", sans-serif;
    font-weight: 100;
    font-size: clamp(20px, 2.6vw, 42px);
    color: #ffd400;
    text-transform: uppercase;
    line-height: 1
}

#points .kontaktni-formular form,
#contact-page .kontaktni-formular form {
    display: flex;
    flex-direction: column;
    gap: 2px
}

#points .kontaktni-formular label.
#contact-page .kontaktni-formular label {
    display: inline-block;
    margin: 0;
    font-size: 16px;
    color: #fff
}

#points .kontaktni-formular .form-group,
#contact-page .kontaktni-formular .form-group {
    margin: 0
}

#points .kontaktni-formular .form-control,
#contact-page .kontaktni-formular .form-control {
    background: #fff;
    border: none;
    height: 48px;
    border-radius: var(--radius-pill);
    padding: 0 18px;
    font-size: 16px;
    color: #3b1f19;
    width: 100%
}

#points .kontaktni-formular textarea.form-control,
#contact-page .kontaktni-formular textarea.form-control {
    height: 130px;
    padding: 14px 16px;
    border-radius: var(--radius-lg);
    resize: vertical
}

#points .kontaktni-formular .form-control::placeholder,
#contact-page .kontaktni-formular .form-control::placeholder {
    color: #8e8e8e;
    opacity: 1
}

#points .kontaktni-formular .form-control:focus,
#contact-page .kontaktni-formular .form-control:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 212, 0, .35)
}

#points .kontaktni-formular .consents label,
#contact-page .kontaktni-formular .consents label {
    color: #fff;
    font-size: 14px;
    line-height: 1.4
}

#points .kontaktni-formular .consents a,
#contact-page .kontaktni-formular .consents a {
    color: #fff;
    text-decoration: underline
}

#points .kontaktni-formular .submit-wrapper,
#contact-page .kontaktni-formular .submit-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 6px
}

#points .kontaktni-formular input[type="submit"],
#contact-page .kontaktni-formular input[type="submit"] {
    background: #ffd400;
    color: #00bcbc;
    border: none;
    border-radius: var(--radius-pill);
    margin-top: 10px;
    padding: 8px 34px 14px;
    font-weight: 700;
    font-size: 26px;
    cursor: pointer;
    font-family: "Knofedt", sans-serif;
    text-transform: uppercase
}

#points .kontaktni-formular input[type="submit"]:hover,
#contact-page .kontaktni-formular input[type="submit"]:hover {
    background: #ffcc00
}

#points .required-asterisk:after,
#points .required-asterisk:before,
#contact-page .required-asterisk:after,
#contact-page .required-asterisk:before {
    color: #ffd400
}

#points .consents-first {
    text-align: center
}

#points #formContact label[for="message"] {
    display: none !important
}

#points #formContact textarea[name="message"] {
    margin-top: 30px;
    color: #000
}

#points #formContact textarea[name="message"]::placeholder,
#points #formContact textarea[name="message"]::-webkit-input-placeholder,
#points #formContact textarea[name="message"]::-moz-placeholder,
#points #formContact textarea[name="message"]:-ms-input-placeholder {
    color: #e5e5e5;
    opacity: 1
}

@media (max-width: 1280px) {
    #points .kontaktni-blok1 {
        gap: var(--gap-md)
    }

    #points #stores {
        gap: 10px 30px
    }

    #points .store img {
        width: 40%
    }
}

@media (max-width: 1024px) {
    #points .kontaktni-blok1 {
        justify-content: center;
        padding: 40px 5%
    }

    #points .kontaktni-text,
    #points .kontaktni-formular,
    #contact-page .kontaktni-formular {
        flex: 1 1 100%;
        max-width: 820px
    }

    #points #stores {
        grid-template-columns:1fr 1fr
    }

    #points .select-row {
        max-width: 70%
    }
}

@media (max-width: 768px) {
    #points {
        font-size: 16px
    }

    #points .kontaktni-blok1 {
        gap: var(--gap-md)
    }

    #points .kontaktni-text {
        font-size: 22px
    }

    #points .kontaktni-text p:first-of-type {
        margin: 0 0 30px
    }

    #points .kontaktni-formular form::before {
        font-size: 24px
    }

    #points #stores{
        grid-template-columns:1fr;
        gap:32px;
        margin-top: 10px;
    }

    #points .store{
        flex-direction:column;
        align-items:center;
        text-align:center;
    }

    #points .store h3{
        text-align:center;
        margin-bottom:12px;
    }

    #points .store-text{
        text-align:center;
        padding:0 10px;
    }

    #points .store img{
        order:2;
        width:60%;
        max-width:280px;
        margin-top:16px;
    }

    #points .store-text p{
        display:flex;
        align-items:center;
        justify-content:center;
        gap:8px;
        padding-left:0;
        margin:8px 0;
    }

    #points .store-text p::before{
        position:static;
        width:20px;
        height:20px;
        flex-shrink:0;
    }

    #points .select-row {
        max-width: 100%;
        justify-content: center;
        flex-direction: column;
    }
}

@media (max-width: 560px) {
    #points .cta-btn {
        font-size: clamp(1rem, 7vw, 2rem);
        padding: 6px 28px
    }

    #points .kontaktni-blok1 {
        padding: 28px 16px;
        gap: var(--gap-sm)
    }

    #points .kontaktni-text {
        font-size: 20px
    }

    #points .kontaktni-formular .form-control,
    #contact-page .kontaktni-formular .form-control {
        height: 46px
    }

    #points .kontaktni-formular input[type="submit"],
    #contact-page .kontaktni-formular input[type="submit"] {
        font-size: 20px;
        padding: 8px 24px 12px
    }
}

@media (min-width: 480px) {
    .js-validator-msg {
        margin-left: 20px
    }

    .form-group label {
        line-height: 1
    }

    #points .kontaktni-blok1 {
        gap: var(--gap-md)
    }
}