/* =========================================================
   ONI SYSTEM – CELKOVÝ VZHLED PATIČKY
   ========================================================= */

#footer {
    background-color: #000000 !important;
    color: #ffffff !important;
    font-family: "Open Sans", sans-serif !important;
    border-top: 1px solid #e3000f !important;
}

/* Vnitřní části patičky nechávají prosvítat černé pozadí */
#footer .container,
#footer .custom-footer,
#footer .footer-rows,
#footer .footer-bottom,
#footer .footer-bottom .container {
    background-color: transparent !important;
}

/* Nadpisy a běžné texty */
#footer h1,
#footer h2,
#footer h3,
#footer h4,
#footer h5,
#footer h6,
#footer p,
#footer li,
#footer span,
#footer .title {
    color: #ffffff !important;
    font-family: "Open Sans", sans-serif !important;
}

/* Odkazy */
#footer a,
#footer a:link,
#footer a:visited {
    color: #ffffff !important;
    font-family: "Open Sans", sans-serif !important;
    text-decoration: none;
}

#footer a:hover,
#footer a:focus {
    color: #e3000f !important;
}

/* SVG ikony – barva se řídí přes currentColor */
#footer svg {
    color: #ffffff;
}

#footer svg path {
    fill: currentColor;
}

/* Zachování bílé barvy sociálních ikon i při hoveru */
#footer .footer-brand__socials a:hover,
#footer .footer-brand__socials a:focus {
    color: #ffffff !important;
}


/* =========================================================
   ONI SYSTEM – LOGO + TEXT + SOCIÁLNÍ SÍTĚ V PATIČCE
   ========================================================= */

.footer-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 340px;
}


/* LOGO */

.footer-brand__logo {
    display: inline-block;
    margin-bottom: 22px;
}

.footer-brand__logo img {
    display: block;
    width: 240px;
    max-width: 100%;
    height: auto;
}


/* TEXT POD LOGEM */

.footer-brand__text {
    margin: 0 0 24px 0;
    padding: 0;

    font-size: 17px;
    line-height: 1.5;
    font-weight: 400;

    color: #ffffff;
}


/* SOCIÁLNÍ SÍTĚ */

.footer-brand__socials {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-brand__socials a {
    width: 46px;
    height: 46px;

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

    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;

    color: #ffffff;
    text-decoration: none;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}


/* SVG IKONY */

.footer-brand__socials svg {
    width: 21px;
    height: 21px;
    fill: currentColor;
}


/* HOVER */

.footer-brand__socials a:hover {
    background-color: #e3000f;
    border-color: #e3000f;
    color: #ffffff;
    transform: translateY(-2px);
}


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

@media (max-width: 767px) {

    .footer-brand {
        max-width: 100%;
    }

    .footer-brand__logo img {
        width: 210px;
    }

    .footer-brand__text {
        font-size: 15px;
    }

    .footer-brand__socials a {
        width: 42px;
        height: 42px;
    }

    .footer-brand__socials svg {
        width: 19px;
        height: 19px;
    }

}

/* =========================================================
   ONI SYSTEM – KONTAKTY V PATIČCE
   ========================================================= */

.footer-contacts {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    font-family: "Open Sans", sans-serif;
    color: #ffffff;
}


/* NADPIS */

.footer-contacts h3 {
    margin: 0 0 28px 0;

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

    color: #ffffff !important;
}


/* JEDEN ŘÁDEK KONTAKTU */

.footer-contact {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 18px;

    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    line-height: 1.4;

    color: #ffffff !important;
    text-decoration: none !important;
}


/* TELEFON + E-MAIL */

.footer-contact--phone,
.footer-contact--email {
    color: #ffffff !important;
}

.footer-contact--phone:hover,
.footer-contact--email:hover {
    color: #ed1c24 !important;
}


/* =========================================================
   IKONY Z HLAVIČKY
   ========================================================= */

.footer-contact__icon {
    display: block;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}


/* TELEFON */

.footer-contact--phone .footer-contact__icon {
    background-image: url("img/telefon.png");
}


/* E-MAIL */

.footer-contact--email .footer-contact__icon {
    background-image: url("img/obalka.png");
}


/* =========================================================
   OTEVÍRACÍ DOBA
   ========================================================= */

.footer-contact--hours {
    align-items: flex-start;
    margin-bottom: 0;
}


/* HODINY – vytvořené pomocí CSS */

.footer-contact__clock {
    position: relative;
    display: block;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    margin-top: 2px;
    border: 2px solid #ffffff;
    border-radius: 50%;
}


/* hodinová ručička */

.footer-contact__clock::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 4px;
    width: 2px;
    height: 7px;
    background: #ffffff;
    border-radius: 2px;

    transform-origin: bottom center;
}


/* minutová ručička */

.footer-contact__clock::after {
    content: "";

    position: absolute;
    left: 10px;
    top: 10px;

    width: 6px;
    height: 2px;

    background: #ffffff;
    border-radius: 2px;

    transform-origin: left center;
    transform: rotate(20deg);
}


/* TEXT OTEVÍRACÍ DOBY */

.footer-contact__hours-text {
    display: flex;
    flex-direction: column;

    color: #ffffff !important;
}

.footer-contact__hours-text span {
    color: #ffffff !important;
}

.footer-contact__hours-text strong {
    margin-top: 2px;

    font-weight: 600;
    color: #ffffff !important;
}


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

@media (max-width: 767px) {

    .footer-contacts h3 {
        font-size: 20px;
        margin-bottom: 22px;
    }

    .footer-contact {
        font-size: 15px;
        margin-bottom: 15px;
        gap: 10px;
    }

    .footer-contact__icon,
    .footer-contact__clock {
        width: 22px;
        height: 22px;
        flex-basis: 22px;
    }

}


/* =========================================================
   MOBIL – ZOBRAZENÍ LEVÉ ČÁSTI PATIČKY (LOGO + TEXT + SOC. SÍTĚ)
   ========================================================= */

@media (max-width: 767px) {

    /* Shoptet může vlastní banner v mobilním zobrazení skrývat */
    #footer .custom-footer__banner1,
    #footer .custom-footer__banner1 .banner,
    #footer .custom-footer__banner1 .banner-wrapper,
    #footer .footer-brand {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        max-height: none !important;
    }

    #footer .custom-footer__banner1,
    #footer .custom-footer__banner1 .banner,
    #footer .custom-footer__banner1 .banner-wrapper {
        width: 100% !important;
        max-width: 100% !important;
    }

    #footer .custom-footer__banner1 .banner,
    #footer .custom-footer__banner1 .banner-wrapper,
    #footer .footer-brand {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    #footer .footer-brand {
        margin-bottom: 30px;
    }
}