/* Корректировка стилей для header. */
/* Изначальные параметры элементов рассчитаны под экраны с размером вьюпорта 1200-1440px. */
/* Элементы адаптированы для экранов с меньшим вьюпортом, но если вьюпорт будет больше 1440px, элементы останутся без изменений. */
/* 18.10.2023 */

body {
    min-width: 320px;
}

/* Размытие под header */
header {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    background: rgba(255, 255, 255, 0.8);
}

.filial {
    position: absolute;
}



/* Иконка фургона и область доставки */
.delivery-area {
    padding-right: 10px;
    display: flex;
    align-items: center;
    position: relative;
    color: black;
    font-size: 18px;
    border-right: 1px solid #323232;
    border-bottom-left-radius: 27px;
    border-top-left-radius: 27px;
    width: 280px;
    transition: all ease 1.5s, border-right 0.5s;
    text-decoration: none;
}
.delivery-area .fa-truck-fast {
    font-size: 45px;
    color: #E44647;
    margin-right: 10px;
    left: 0;
    z-index: 1;
    transition: all ease 1s;
}
.delivery-area div {
    transition: all ease 1s, color 0.5s;
}
.delivery-area span {
    display: block;
}

/* Анимация при наведении курсора */
.delivery-area:hover {
    cursor: pointer;
    color: black;
    background: #E9E9E9;
    border-right: 1px solid rgba(255, 255, 255, 0);
    border-bottom-right-radius: 27px;
    border-top-right-radius: 27px;
}
.delivery-area:hover .fa-truck-fast {
    position: absolute;
    transform: translateX(210px); /* Расстатояние, которое проедет фургончик */
}
.delivery-area:hover div {
    transform: scale(0.5);
    position: absolute;
    right: 10px; /* Размер padding у delivery-area */
    opacity: 0;
    filter: blur(5px);
    color: rgba(255, 255, 255, 0.5);
}
.delivery-area .delivery-label {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 25px;
    height: 45px;
    border-radius: 22.5px;
    font-weight: bold;
    background: #E44647;
    color: white;
    z-index: 1;
    transform: translateX(-270px);
    transition: all ease 1s;
    opacity: 0;
}
.delivery-area:hover .delivery-label {
    transform: translateX(5px);
    opacity: 1;
}
.delivery-area .delivery-label .fa-chevron-right {
    margin-left: 5px;
}



/* Телефон и время работы (при ширине более 1200px) */
.contact-info,
.contact-info-mobile {
    padding-left: 10px;
}
.phone-number a,
.contact-coko-filial {
    transition: color 0.25s, font-weight 0.25s;
}
.phone-number a,
.opening-hours {
    font-size: 18px;
    color: black;
    text-decoration: none;
}
.fa-phone-volume,
.fa-history {
    font-size: 20px;
    color: #E44647;
}
.phone-number a,
.fa-phone-volume {
    margin-left: 2.5px;
}
.phone-number:hover a,
.contact-coko-filial:hover {
    color: #E44647;
    font-weight: bold;
    text-decoration: underline;
}



/* Адреса / контакты (при ширине более 1200px) */
.contact-coko {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 195px;
    height: 40px;
    font-size: 18px;
    margin-right: 15px;
    border-radius: 20px;
    color: black;
    background: #E9E9E9;
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.75);
    opacity: 1;
    text-decoration: none;
    transition: background 0.25s, color 0.25s;
}
.contact-coko:hover {
    background: #E44647;
    color: white;
    cursor: pointer;
}



/* Корзина (при ширине более 950px) */
#msMiniCarta {
    background: #323232;
    border-radius: 30px;
    height: 60px;
    margin-right: 5px;
    position: relative;
    transition: background 0.25s;
}
#msMiniCarta:hover {
    background: #E44647;
    cursor: pointer;
}
.fa-cart-shopping {
    font-size: 45px;
    color: #E44647;
}
#msMiniCarta .ms2_total_count {
    margin-left: 15px;
}
header #msMiniCarta span {
	font-size: 45px;
    color: rgb(200, 200, 200);
}

/* Размытие иконки с тележкой и числа товаров в корзине; появление надписи "Корзина" */
#msMiniCarta .fa-cart-shopping,
#msMiniCarta .ms2_total_count {
    transition: filter 0.25s;
}
#msMiniCarta:hover .fa-cart-shopping,
#msMiniCarta:hover .ms2_total_count {
    filter: blur(50px);
}
#msMiniCarta:hover::before {
    content: "КОРЗИНА";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    font-weight: bold;
    color: white;
    padding: 5px 10px;
    z-index: 2;
    cursor: pointer;
}



/* Отключение некоторых элементов для большой ширины экрана */
.contact-info-mobile,
header #msMiniCarta-mobile,
.delivery-area-mobile,
.img-responsive-2 {
    display: none;
}





/* Убирается "Адреса / контакты" из правой части, в левой части уменьшается размер всего текста и "contact-info" заменяется на "contact-info-mobile" */
@media(max-width:1200px) {
    .contact-coko,
    .contact-info {
        display: none;
    }
    .contact-info-mobile {
        display: block;
    }
    .phone-number a,
    .opening-hours,
    .contact-coko-filial {
        font-size: 12px;
        color: black;
        text-decoration: none;
        font-weight: bold;
    }
    .contact-coko-filial {
        color: #E44647;
    }
    i.fas.fa-phone-volume,
    .fa-history {
        font-size: 14px;
        color: black;
    }
}



/* Десктопная версия корзины заменяется на мобильную */
@media(max-width:950px) {
    header #msMiniCarta {
        display: none;
    }
    header #msMiniCarta-mobile {
        display: flex;
        align-items: center;
        position: relative;
        margin-right: 20px;
    }
    .fa-cart-shopping {
        font-size: 60px;
        transition: color 0.25s;
    }
    #msMiniCarta-mobile:hover .fa-cart-shopping{
        color: rgb(200, 200, 200);
    }
    #msMiniCarta-mobile .ms2_total_count {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin-left: 4px;
        padding-bottom: 24px;
        font-size: 30px;
        color: white;
    }
}



/* Убирается dilivery, мобильная версия отображения области доставки появляется снизу header */
@media(max-width:850px) {
    .delivery-area {
        display: none;
    }
    header #msMiniCarta-mobile {
        margin-right: 15px;
    }
    .delivery-area-mobile {
        position: absolute;
        top: 70px;
        left: 0;
        width: 100%;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #E44647;
        color: white;
        font-size: 14px;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
        transition: all ease 0.25s;
        text-decoration: none;
        cursor: pointer;
    }
    .delivery-area-mobile .fa-truck-fast {
        font-size: 16px;
        color: white;
        margin-right: 5px;
        transition: all ease 0.25s;
    }
    .delivery-area-mobile:hover {
        background: #323232;
        color: #E44647;
    }
    .delivery-area-mobile:hover .fa-truck-fast {
        color: #E44647;
    }
    #wrap {
        padding-top:90px;
    }
}



/* Убирается sidebar, появляется иконка меню с обратным вызовом sidebar и логотип соко в header */
@media(max-width:750px) {
    #sidebar {
        display: none;  
    }
    #wrap {
        padding-left: 0;
    }
    header {
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        background: rgba(255, 255, 255, 0.9);
    }
    .img-responsive-2 {
        position: absolute;
        display: block;
        left: 70px;
        top: 5px;
        height: 60px;
    }
    .filial {
        margin-left: 139px;
        margin-right: 0;
    }
    .contact-info-mobile {
        padding-left: 0;
    }

    /* Часть кода из theme/css/style.css */
    .logo img {
        max-width: 100%;
        max-height: 120px;
        margin: 0 auto;
        display: block;
    }
    .nav {
        padding: 10px 10px;
    }
    #close.active {
        position: absolute;
        display: block;
        /* right: 10px; */
        top: 10px;
    }
    #close.active i{
        font-size: 30px;
    }
    header{
        width: 100%;
    }
    .navknop{
        display:block;
        padding: 0 22px;
        cursor: pointer;
        transition: color 0.25s;
    }
    .navknop i{
        font-size: 30px;
    }
    .navknop:hover {
        color: #E44647;
    }
    #sidebar.active{
        display:block;
        z-index: 162;
        height: 100%;
    }
    #ten.active {
        background: #000000b3;
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: 160;
    }
    #carouselExampleIndicators img {
        width: 100%;
    }
}



/* Уменьшается размер delivery-area-mobile, уменьшаются отступы элементов */
@media(max-width:400px) {
    .delivery-area-mobile {
        height: 15px;
        font-size: 11px;
    }
    #wrap {
        padding-top:85px;
    }
    .delivery-area-mobile .fa-truck-fast {
        font-size: 12px;
    }
    .navknop {
        padding-left: 10px;
        padding-right: 10px;
    }
    .img-responsive-2 {
        left: 46px;
    }
    .filial {
        margin-left: 103px;
    }
    header #msMiniCarta-mobile {
        margin-right: 10px;
    }
}