@import "/css/reset.css";
@import "/css/fonts/stylefont.css";

:root {
    /* Переменные цветов
    Холодні відтінки: Темний - #1C2B58, Приглушений - #4E6CB3, Яскравий - #4653A4, Світлий - #CAD4EC
    Теплі відтінки: Темний - #023C58, Приглушений - #027F98, Яскравий - #00ABC7, Світлий - #BADCEF
    */
    --light_1: #1C2B58;
    --light_2: #4E6CB3;
    --light_3: #4653A4;
    --light_4: #CAD4EC;
    --light_5: #023C58;
    --light_6: #027F98;
    --light_7: #00ABC7;
    --light_8: #BADCEF;
    --max-width-page: 1350px;
    --max-height-header: 180px;
    --border-radius-left-menu: 14px;
    --border-color: #295e80;
    --searchbar-color: #ffffffe4;
    --background-color-page: #badcef;
    --mainmenu-color: #CAD4EC, #CAD4EC;
    /* Головне меню */
    --submenu-color: #d9e2f7, #d9e2f7;
    /* Випадаюче меню при наведенні */
    --submenu-color-hover: #d9e2f7, rgba(151, 162, 187, 0.834);
    /* Випадаюче меню при наведенні */
    --left-menu-width: 240px;
    --left-vertmenu-color: #BADCEF, #BADCEF;
    /* Ліве меню */
    --left-vertmenu-color-hover: #b0cddf, #9cb7c8cf;
    /* Розміри шрифтів */
    --font-size-h7: 24px;
    --font-size-h6: 22px;
    --font-size-h5: 20px;
    --font-size-h4: 18px;
    --font-size-h3: 16px;
    --font-size-h2: 14px;
    --font-size-h1: 12px;
    --font-size-h0: 10px;
    --font-size-h: 8px;
    /* Кольори текстів */
    --text-color-dark: #0D3A56;
    --text-color-dark-hover: #295e80;
    --text-color-light: #295e80;
    --text-color-light-hover: #0D3A56;
    /*  Ширина та висота пунктів основного лівого меню */
    --width-leftmenu: 180px;
    --height-leftmenu: 35px;
}

.fs-h1{
    font-size: 0.7em;
}
.fs-h2{
    font-size: 0.8em;
}
.fs-h3{
    font-size: 0.9em;
}
.fs-h4{
    font-size: 1.0em;
}
.fs-h5{
    font-size: 1.1em;
}
.fs-h6{
    font-size: 1.2em;
}
.p-0 > td{
    padding: 0;
}
.lh-1{
    line-height: 1.6em
}
.lh-2{
    line-height: 1.7em
}
.lh-3{
    line-height: 1.8em
}

.card {
    width: 100%
}
.card-header-order{
    background-color: #a0c1d5;
}

.card-header.title-card {
    border-radius: 3px;
    /*border: 1px solid rgba(0, 0, 0, .125);*/
    padding: 1px 1px 1px 5px;
}

.h-block{
    width: 100%;
    overflow-x: auto;
    box-sizing: border-box;
}
.discount-row{
    display: flex;
    padding-top: 3px;
}
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'e-Ukraine Regular', serif;
    font-weight: normal;
    font-style: normal;
    font-size: var(--font-size-h2);
    display: flex;
    flex-direction: column;
}

label {
    font-size: 14px;
    margin-bottom: 5px;
    cursor: default;
    color: var(--text-color-light);
}

span {
    cursor: default;
    color: var(--text-color-light);
    font-size: 0.8em;
}

span.dark-color {
    color: var(--text-color-light);
}

span.light-color {
    color: #fff;
}

span.size-text {
    font-size: var(--font-size-h2);
}

.form-label {
    font-size: 12px;
    line-height: 12px;
    /*margin-bottom: 10px;*/
}

.warning-label {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 16px;
    margin-top: 5px;
    margin-bottom: 5px;
    color: var(--text-color-light);
}

.basket-span {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 1em;
    margin-top: 5px;
    margin-bottom: 5px;
    color: var(--text-color-light);
}

.load-file {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 14px;
    text-align: end;
    color: var(--text-color-light-hover);
    display: flex;
    align-items: flex-end;
}

.name-label-product {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 14px;
    margin-top: 10px;
    margin-bottom: 5px;
    color: #608ba5;
}

.category-name {
    font-size: 16px;
}

.product-name {
    font-size: 18px;
}

.label-price {
    font-size: 1.2em;
    color: var(--border-color);
    margin-top: -5px;
    margin-right: 10px;
}


.cart-totals .label-price {
    margin-top: -15px;
}

.label-price.total_sum {
    margin-top: -10px;
    line-height: 1.2em;
    color: #306e94;
}

.label_position {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    line-height: 1.2;
    padding-top: 5px;
    padding-bottom: 10px;
    align-content: flex-end;
    align-items: flex-end;
}

.details-order {
    display: flex;
    font-size: 0.8em;
    column-gap: 5px;
    line-height: 1.4em;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 5px;

}

.span-style-line {
    line-height: 0;
    padding-top: 10px;
}

.details-order-product {
    border-radius: 10px;
    border: 1px solid #badcef;
    padding: 10px;

    background: rgb(251, 251, 251)
}
.personal-content{
    display: flex;
    border-radius: 8px;
    border: 1px solid #accee3;
    background: transparent;
    justify-content: space-between;
}
.personal-info {
    display: flex;
    padding: 10px;
    line-height: 1em;
    /*border-radius: 8px;
    border: 1px solid #accee3;
    background: transparent;*/
    text-indent: 0;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
}
.personal-images {
    display: flex;
    background: transparent;
    height: 120px;
    margin: 10px;
}

.personal-info.email {
    gap: 0;
}

.chat-close {
    display: none;
}

select {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 14px;
    height: 28px;
    color: #0D3A56;
    padding-left: 5px;
    border-radius: 5px;
    border: 1px solid var(--border-color);
    outline: none; /* Видаляємо стандартний outline */
    transition: box-shadow 0.3s ease; /* Плавна анімація для світіння */
    width: 100%;
}

select:focus {
    border-color: #66afe9; /* Змінюємо колір рамки при фокусі */
    outline: none;
    box-shadow: 0 0 8px rgba(102, 175, 233, 0.6); /* Додаємо світіння */
}

textarea {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    border: 1px solid var(--border-color);
    outline: none; /* Видаляємо стандартний outline */
    color: var(--text-color-dark);
    background: white;
    border-radius: 5px;
    transition: box-shadow 0.3s ease; /* Плавна анімація для світіння */
    margin-bottom: 10px;
}

textarea::placeholder {
    color: rgba(13, 58, 86, 0.5);
    opacity: 1; /* по умолчанию placeholder полупрозрачный */
}

textarea:focus {
    border-color: #66afe9; /* Змінюємо колір рамки при фокусі */
    outline: none;
    box-shadow: 0 0 8px rgba(102, 175, 233, 0.6); /* Додаємо світіння */
}

input {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: var(--font-size-h1);
    color: var(--text-color-dark);
    outline: none; /* Видаляємо стандартний outline */
    background: white;
    opacity: 1;
    transition: box-shadow 0.3s ease; /* Плавна анімація для світіння */
    width: 100%;
    margin-bottom: 10px;
    padding: 5px;
}

input::placeholder {
    color: rgba(13, 58, 86, 0.5);
    opacity: 1; /* по умолчанию placeholder полупрозрачный */
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset; /* Заменяем фон */
    -webkit-text-fill-color: var(--text-color-dark); /* Цвет текста */
    transition: background-color 5000s ease-in-out 0s; /* Хитрый трюк, чтобы убрать "моргание" */
}

input.big {
    height: 26px;
    font-size: 14px;
    border-radius: 5px;
}

input.small {
    height: 22px;
    font-size: 13px;
    border-radius: 3px;
}

input:focus {
    border-color: #66afe9; /* Змінюємо колір рамки при фокусі */
    outline: none;
    box-shadow: 0 0 8px rgba(102, 175, 233, 0.6); /* Додаємо світіння */
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

header {
    max-width: var(--max-width-page);
    max-height: var(--max-height-header);
    margin: 0 auto;
    background-color: #badcef;
    border-radius: 0 0 10px 10px;
    background-image: url("/img/header/header.png");
    background-size: cover;
    border: 1px solid var(--border-color);
}

.header_container {
    display: grid;
    grid-template-areas:
        "container-left container-center container-right";
    grid-template-columns: 280px 1fr 190px;
    grid-template-rows: auto;
    width: var(--max-width-page);
    height: var(--max-height-header);
}

main {
    width: var(--max-width-page);
    margin: 0 auto;
    font-size: var(--font-size-h3);
    padding-bottom: 0;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
}

.main-content {
    display: grid;
    grid-template-areas: "leftmenu services-content";
    grid-template-columns: 280px 1fr;
    grid-template-rows: 1fr;
    max-width: var(--max-width-page);
    flex-grow: 1;
}

.button-content {
    display: none;
}

footer {
    max-width: var(--max-width-page);
    height: 90px;
    margin: 0 auto;
    background-color: #badcef;
    background-image: url('../img/footer/footer.png');
    background-size: cover;
    border-radius: 10px 10px 0 0;
    border: 1px solid var(--border-color);
    flex-shrink: 0;
}

.footer-content {
    display: grid;
    grid-template-areas:
        "footer-logo footer-info-1 footer-info-2 footer-info-3 footer-info-4 footer-socials";
    grid-template-columns: 190px 1fr 1fr 1fr 1fr 190px;
    grid-template-rows: auto;
    width: var(--max-width-page);
    height: 90px;
}

/******************************************************************/
/**************************** ТАБЛИЦІ *****************************/
/******************************************************************/
/**************************** ТАБЛИЦІ *****************************/
table {
    width: 100%;
    border: 1px solid var(--border-color);
    border-collapse: collapse;
    margin-top: 10px;
}

td {
    list-style-type: circle;
    border: 1px solid #beb9b9;
    text-align: left;
    font-size: var(--font-size-h2);
    padding: 6px;
    line-height: 16px;
    height: 50px;
}

.table-left .dropdown,
.table-right .dropdown {
    position: relative;
    display: inline-block;
}

.table-left .dropdown-content,
.table-right .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    width: 350px;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color);
    padding: 8px 8px;
    border-radius: 8px;
    top: 42px;
    z-index: 1;
}

.table-left .dropdown:hover .dropdown-content,
.table-right .dropdown:hover .dropdown-content {
    display: block;
    transition: all 0.5s; /* Виправлено помилку в transition */
}

/* Стиль для активного подпункта меню */
.active-submenu {
    background-color: #f5f5f5;
    border-left: 3px solid #3b82f6;
}

/* Стиль для активной ссылки */
.active-link {
    color: #3b82f6;
    font-weight: bold;
}

/* Дополнительные стили для hover эффекта */
.sub_menu_name:hover {
    background-color: #f0f0f0;
    transition: background-color 0.2s ease;
}

/******************************************************************/
/***************************** BUTTON *****************************/
.btn_center {
    width: 100%;
    text-align: center;
}

button.disabled,
button:disabled {
    background-color: #ccc; /* серая заливка */
    color: #666; /* тусклый текст */
    cursor: not-allowed; /* курсор запрета */
    opacity: 0.6; /* можно добавить полупрозрачность */
    pointer-events: none; /* полностью блокирует все события */
}

button.btn {
    /* Світлий стиль */
    font-size: 0.8em;
    line-height: 1.5em;
    padding: 0 0.5em 0.4em 0.5em;
    margin: 2px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background-color: white;
    color: var(--text-color-dark);
}

button.btn.btn-basket {
    font-size: 0.9em;
    margin-left: 0;
    margin-bottom: 3px;
    margin-top: -4px;
    color: #6d9db2;
}

button.btn.no-style {
    /* Світлий стиль */
    font-size: 0.8em;
    padding: 0;
    margin: 2px;
    border: none;
    background-color: transparent;
    border-radius: 0.6em;
    display: flex;
}

button.btn.no-style:hover {
    border: none !important;
    background-color: transparent;
    color: var(--text-color-dark-hover);
}

button.btn-close {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    padding-right: 6px;
}

button.btn-h1 {
    line-height: 0.8em;
    padding: 0 0.4em 0.3em 0.2em;
    border-radius: 0.4em;
}

button.btn-h2 {
    line-height: 0.9em;
    padding: 0.3em 0.3em 0.7em 0.3em;
    border-radius: 0.4em;
}

button.btn-h3 {
    line-height: 1.4em;
    padding: 0.3em 0.8em 0.7em 0.8em;
    border-radius: 6px;
}

button.btn-h4 {
    font-size: 0.9em;
    line-height: 1.4em;
    padding: 0.3em 0.8em 0.7em 0.8em;
    border-radius: 0.7em;
}

button.btn:hover {
    border: 1px solid var(--border-color);
    background-color: var(--border-color);
    color: white;
}

button.btn:active {
    background-color: white;
    color: var(--border-color);
}

button.btn.btn-b {
    /* Жирний шрифт */
    font-weight: bolder;
}

button.btn.btn-i {
    /* Курсівий шрифт */
    font-style: italic;
}

button.invented {
    /* Темний стиль */
    background-color: var(--border-color);
    color: white;
}

button.invented:hover {
    background-color: white;
    color: var(--border-color);
}

button.invented:active {
    background-color: var(--border-color);
    color: white;
}

/******************************************************************/
/************************* МОДЕЛЬНЕ ВІКНО *************************/
.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 380px;
    backdrop-filter: blur(10px); /* степень размытия */
    -webkit-backdrop-filter: blur(10px); /* для Safari */
    background-image: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.9),
        rgba(186, 220, 239, 0.9)
    );
    margin: auto;
    color: black;
    border-radius: 10px;
    padding: 10px 10px 10px 10px;
    cursor: default;
    border: 1px solid var(--border-color);
}

.modal-form {
    position: relative;
    flex-direction: column;
    align-items: start;
    width: 96%;
}
.modal-form textarea{
    padding: 10px;  width: 100%; max-height: 150px; min-height: 100px
}
form.modal-windows {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.modal_title {
    font-size: 1.1em;
    line-height: var(--font-size-h2);
    color: var(--text-color-dark);
    margin-top: 5px;
    margin-bottom: 20px;
    text-align: center;
}

.modal_clous:focus-visible {
    outline-color: var(--border-color);
}

.modal_btn {
    position: absolute;
    background-color: transparent;
    cursor: pointer;
    top: 10px;
    right: 10px;
    line-height:0;
    outline: 1px solid transparent;
    outline-offset: 3px;
    transition: outlaine-color .15s ease-in-out;

    :hover {
        background-color: transparent;
    }
}

/******************************************************************/
/********************** ЛІВИЙ КОНТЕЙНЕР (Логотип) *****************/
.container-left {
    grid-area: container-left;
    display: flex;
    align-items: center;
    width: 280px;
}

.container-left img {
    padding-left: 10px;
}

/******************************************************************/
/************* ЦЕНТРАЛЬНЫЙ КОНТЕЙНЕР (Меню, поиск, инфо) **********/
.container-center {
    grid-area: container-center;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.container-titles { /* Слоган */
    grid-area: container-titles;
    width: 100%;
    text-align: center;
    font-size: var(--font-size-h4);
    color: var(--text-color-dark);
}

.container-titles-mobile {
    grid-area: container-titles-mobile;
    display: none;
}

.container-search { /* Пошук по сайту */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90%;
}

.container-search input {
    width: 90%;
    background-color: var(--searchbar-color);
}

.container-search .button {
    height: 22px;
    width: 22px;
    margin-left: -27px;
    margin-top: -10px;
}

.container-address { /* Адреса з телефонами */
    display: flex;
    justify-content: center;
    width: 100%;
    align-items: center;
}

.container-address > img {
    width: 26px;
    height: 26px;
    opacity: 0.8;
}


a.text:active,
a.text:hover,
a.text {
    text-decoration: none;
    color: var(--text-color-dark);
}

.container-address span {
    font-size: var(--font-size-h2);
    padding-left: 5px;
    padding-right: 5px;
    color: var(--text-color-dark);
}

/* ПРАВИЙ КОНТЕЙНЕР (мова, особистий кабінет, часи роботи) */
.mobile-only {
    display: none;
}

.container-right {
    display: grid;
    grid-template-areas:
    "container-language container-language"
    "container-autorise container-autorise"
    "container-basket container-basket";
    grid-template-rows: 30% 40% 30%;
    width: 195px;
    grid-area: container-right;
}

/* Мова */
.container-language {
    grid-area: container-language;
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: space-between;
}

.language-selector {
    position: relative;
    display: flex;
    flex-direction: row;
}

.language-selector .box_language {
    width: 25px;
    height: 25px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.555);
    margin-left: 3px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.language-selector .box_language .language {
    position: absolute;
    font-size: 14px;
    padding-left: 3px;
    top: -2px;
}

.container-language-msg {
    width: 28px;
    height: 28px;
    opacity: 0.8;
    margin-left: 1em;
    margin-top: 0;
    cursor: pointer;
}

.container-language-txt {
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: space-between;
    vertical-align: middle;
    margin-right: 0.5em;
}

.language {
    line-height: var(--font-size-h4);
    font-size: var(--font-size-h4);
    opacity: 0.7;
    color: var(--text-color-light);
}

.language.active_lang {
    color: #fff;
}

.box_language.active_lang {
    background-color: var(--text-color-dark-hover);
    color: #fff;
    cursor: default;
}

.box_language:hover {
    opacity: 0.8;
    color: var(--text-color-dark);
}

/* Персональный кабинет */
.personal {
    font-size: var(--font-size-h1);
    line-height: var(--font-size-h1);
    opacity: 0.7;
    color: var(--text-color-dark);
}

.personal:hover {
    font-size: var(--font-size-h1);
    color: var(--text-color-dark-hover);
}

/* Авторизация */
.container-autorise {
    grid-area: container-autorise;
    display: flex;
    align-items: center;
    justify-content: start;
    color: var(--text-color-dark);
}

.account {
    width: 40px;
    height: 40px;
    background-color: white;
    border-radius: 50%;
    border: 1px solid var(--border-color);
}

.account img {
    border-radius: 50%;
}

.autorise-div {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin-left: 5px;
}

.auth-div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 5px;

}

.autorise {
    width: max-content;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
}

.fon-autorise {
    justify-content: start;
    border-radius: 5px;
    background-color: var(--searchbar-color);
    border: 1px solid var(--border-color);
}

.fon-autorise .btn {
    font-size: var(--font-size-h2);
    color: var(--text-color-dark);
    margin: -17px 5px 5px 3px;
    padding:0;
    border: none;
}

.fon-autorise .btn:hover {
    font-size: var(--font-size-h2);
    color: var(--text-color-dark-hover);
    border: none;
}

.fon-autorise .btn::after {
    border: none;
}

.fon-autorise .btn::before {
    border: none;
}

/* Корзина */
.container-basket {
    grid-area: container-basket;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-color-dark);
    opacity: 0.9;
    width: 100%;
    padding-left: 20px;
}

.basket-files {
    display: flex;
    align-items: baseline;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
    gap: 5px;
    line-height: 1em;
}

.logo-mini {
    display: none;
}

.basket_count {
    position: relative;
    width: 38px;
    height: 38px;
}

.basket_count img {
    position: absolute;
    opacity: 0.7;
}

.basket_count p {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: middle;
    font-size: var(--font-size-h1);
    color: rgb(255, 255, 255);
    top: 2px;
    left: 4px;
}

.basket_count p span {
    font-size: var(--font-size-h1);
}

.basket {
    display: flex;
    flex-direction: column;
}

.basket p {
    font-size: var(--font-size-h2);
    color: var(--text-color-dark);
    padding-left: 8px;
    margin:0 0 0 0;
    line-height: var(--font-size-h2);
}

.basket a {
    font-size: var(--font-size-h1);
    color: var(--text-color-dark);
    padding-left: 5px;
    margin: 3px;
    line-height: var(--font-size-h2);
}

.basket a:hover {
    color: white;
}

/*********************************************************************/
/************************ ГОРИЗОНТАЛЬНЕ МЕНЮ *************************/
.logo-mini {
    grid-area: logo-mini;
    display: none;
}

.mobile-menu-toggle {
    grid-area: mobile-menu-toggle;
    display: none;
}

.nav-menu {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding:0;
    text-align: center;
    font-size: var(--font-size-h1);
}

.nav-menu li a {
    display: block;
    color: var(--text-color-dark);
    text-decoration: none;
    align-items: center;
}

.sub-menu {
    /* ПІДМЕНЮ */
    position: relative;
    background-image: -moz-linear-gradient(var(--mainmenu-color));
    background-image: -webkit-linear-gradient(var(--mainmenu-color));
    background-image: -o-linear-gradient(var(--mainmenu-color));
    background-image: linear-gradient(var(--mainmenu-color));
    border-top: 1px solid var(--border-color);
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    border-radius: 6px 6px 0 0;
    width: 120px;
    padding-bottom: 4px;
    margin:0 .2rem 2px .2rem;
    z-index: 10;
}

.sub-menu li a:hover {
    color: var(--text-color-light);
}

.sub-menu ul li:hover a { /* Випадаюче меню при наведенні*/
    background-image: -moz-linear-gradient(var(--submenu-color-hover));
    background-image: -webkit-linear-gradient(var(--submenu-color-hover));
    background-image: -o-linear-gradient(var(--submenu-color-hover));
    background-image: linear-gradient(var(--submenu-color-hover));
    color: var(--text-color-dark);
}

.sub-menu li.parent > a::after { /* Индикатор наличия подкатегорий верхнего уровня */
    position: absolute;
    border-left: 1px solid var(--border-color);
    border-top: 1px solid var(--border-color);
    content: "";
    vertical-align: middle;
    top: 40%;
    right: 6px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
    height: 5px;
    width: 5px;
}

.sub-menu li ul { /* Выпадающие подпункты */
    background: -moz-linear-gradient(var(--submenu-color));
    background-image: -webkit-linear-gradient(var(--submenu-color));
    background-image: -o-linear-gradient(var(--submenu-color));
    background-image: linear-gradient(var(--submenu-color));
    border-radius: 5px;
    -webkit-border-radius:0 5px 5px 5px;
    transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    text-transform: none;
    visibility: hidden;
    position: absolute;
    left: -1px;
    top: 28px;
    min-width: 200px;
    border: 1px solid var(--border-color);
    padding: 0;
}

.sub-menu li:hover ul {
    opacity: 1;
    visibility: visible;
    -webkit-transition: margin 0.3s ease 0s;
    -moz-transition: margin 0.3s ease 0s;
    -o-transition: margin 0.3s ease 0s;
    transition: margin 0.3s ease 0s;
    margin: 0;
    z-index: 11;
}

.sub-menu li ul li { /* Разделительные линии у выпадающего меню и положение текста */
    box-shadow: 0 1px 0 #111, 0 1px 0 #666;
    -moz-box-shadow: 0 1px 0 #111, 0 1px 0 #666;
    -o-box-shadow: 0 1px 0 #111, 0 1px 0 #666;
    -webkit-box-shadow: 0 1px 0 #111, 0 1px 0 #666;
    position: relative;
    left: 0;
    float: none;
    height: auto;
    text-align: left !important;
    font-size: var(--font-size-h1);
}

.sub-menu li ul li a { /* Отступы сверху и снизу у выпадающего меню */
    padding: 8px 8px;
    border: none;
}

.sub-menu > li.parent > a::before { /* Стрелочки под меню при открытии */
    bottom: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid var(--border-color);
    content: '';
    visibility: hidden;
    position: absolute;
    left: 50%;
    margin-left: -6px;
}

.sub-menu > li.parent:hover > a::before {
    visibility: visible;
    -webkit-transition: all .5s ease .2s;
    -moz-transition: all .5s ease .2s;
    -o-transition: all .5s ease .2s;
    transition: all .5s ease .2s;
}

/******************************************************/
/************* ЗАГАЛЬНИЙ КОНТЕЙНЕР КОНТЕКСТУ **********/
.services-content {
    grid-area: services-content;
    margin: 0 auto;
    padding: 0;
    width: 100%;
}

.services-content span {
    align-items: center;
}

.content {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 0 10px; /* Додаємо відступи зліва і справа */
    box-sizing: border-box; /* Щоб padding не збільшував загальну ширину */
}

.table-content {
    /* Контент - Питання/Відповіді */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 75%;
    color: var(--text-color-dark);
}

.question-table {
    /* ТАБЛИЦЯ - ПИТАННЯ/ВІДПОВІДІ */
    display: flex;
    color: var(--text-color-dark);
    width: 100%; /* Робимо таблицю на всю ширину контейнера */
}

.table-right,
.table-left {
    width: 50%;
    padding: 0 10px; /* Додаємо відступи між колонками */
    box-sizing: border-box; /* Щоб padding не збільшував загальну ширину */
}

.not-question {
    /* КОНТЕЙНЕР - НЕ ЗНАЙШЛИ ВІДПОВІДЬ */
    display: flex;
    flex-direction: row;
    justify-content: center;
    text-align: center;
    padding-top: 10px;
    width: 100%; /* Робимо блок на всю ширину */
}

.not-question .text-not-question p {
    /* ТЕКСТ - НЕ ЗНАЙШЛИ ВІДПОВІДЬ */
    color: brown;
    font-size: var(--font-size-h3);
}


.text-not-question {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 1.4em;
}

.not-question .text-ask-question p {
    /* ТЕКСТ - ЗАДАТИ ПИТАННЯ ТУТ */
    font-size: var(--font-size-h2);
    color: #424040;
}

.container-reviews {
    /* Контейнер - відгуків */
    width: 25%;
    margin-left: 20px;
    text-align: center;
    box-sizing: border-box; /* Щоб padding не збільшував загальну ширину */
}

.container-reviews-all {
    /* Контейнер - відгуків */
    width: 100%;
    margin-left: 20px;
    text-align: center;
    box-sizing: border-box; /* Щоб padding не збільшував загальну ширину */
}

.text-reviews {
    margin-top: 5px;
    padding-left: 5px;
    border-radius: 10px;
    text-align: left;
    border: 1px solid var(--border-color);
}

.text-reviews .text-reviews-name {
    color: #1e77ae;
    font-size: 13px;
    padding: 0;
    margin-top: -15px;
}

.text-reviews .text-reviews-response {
    font-size: 12px;
    color: rgb(14, 13, 13);
    padding-bottom: 5px;
}

.text-reviews .text-reviews-user {
    font-size: 10px;
    color: rgb(109, 105, 105);
    padding-bottom: 5px;
}

/* ЗАГАЛЬНИЙ КОНТЕНТ - ВІДГУКІВ ТА ПИТАННЯ/ВІДПОВІДІ*/
.caption-position {
    color: var(--text-color-dark);
}

a.question:active, /* активная/посещенная ссылка */
a.question:hover,
a.question { /* при наведении */
    text-decoration: none;
    color: var(--text-color-dark);
    font-size: var(--font-size-h2);
}

/**********************************************************************/
/****************** КОНТЕЙНЕР НАПОВНЕННЯ СТОРІНОК *********************/
.slider-container {
    /* Контейнер - слайдер */
    margin: 0 auto;
    width: 100%;
}

.style-title-content {
    text-align: left;
    font-size: var(--font-size-h6);
    color: var(--text-color-dark);
    line-height: var(--font-size-h7);
    margin-bottom: 0;
}

.line-title-content {
    width: 100%;
    border-bottom: 1px solid var(--border-color);
    margin: 10px 0 0 0;
    font-size: 18px;
}
.discount-title{
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

.discount-action{
    display: flex;
    align-content: center;
    /*flex-wrap: wrap;*/
    justify-content: center;
    align-items: center;
    padding: 5px 0 0 5px;
}
.line-title-content p {
    margin-top: -10px;
}

.text-content {
    text-indent: 1em;
    font-size: var(--font-size-h2);
    font-weight: normal;
    line-height: 28px;
    color: var(--text-color-dark);
    text-align: justify;
}

.text-content.email {
    margin-top: 10px;
}

.message-content {
    height: 100%;
    text-indent: 1em;
    font-size: var(--font-size-h2);
    font-weight: normal;
    line-height: 28px;
    color: var(--text-color-dark);
    text-align: justify;
}

.hidden-content {
    display: none;
}

.show-more-btn {
    margin-top: 10px;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
}

.show-more-btn:hover {
    background-color: #0056b3;
}

.size-name-device {
    font-size: var(--font-size-h4);
    padding-bottom: 10px;
    text-align: center;
}

.img-content {
    float: left;
    /* Вирівнювання по лівому краю */
    margin: 7px 7px 7px 0;
    /* Відступи навколо картинки */
    width: 400px;
}

.hidden-content {
    display: block;
}

.text-content ul > li::marker {
    color: red;
    font-size: 1em;
}

/* Footer */
.footer-logo {
    grid-area: footer-logo;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0;
    height: 90px;
}

.footer-logo .logo-container img {
    width: 100px;
}

.footer-info-1,
.footer-info-2,
.footer-info-3,
.footer-info-4 {
    flex-direction: column;
    justify-content: start;
    padding-right: 5px;
    padding-left: 5px;
    padding-bottom: 5px;
}

.footer-info-1 {
    grid-area: footer-info-1;
}

.footer-info-2 {
    grid-area: footer-info-2;
}

.footer-info-3 {
    grid-area: footer-info-3;
}

.footer-info-4 {
    grid-area: footer-info-4;
}

.footer-socials {
    grid-area: footer-socials;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Заголовок */
.footer-info-1 p,
.footer-info-2 p,
.footer-info-3 p,
.footer-info-4 p,
.footer-socials p {
    justify-content: center;
    text-align: center;
    font-size: var(--font-size-h1);
    padding: 5px 0 5px 0;
    line-height: var(--font-size-h1);
}

.text-info-footer p {
    text-align: center;
    font-size: var(--font-size-h0);
    line-height: 12px;
    margin:0;
    padding:0;
    /* white-space: pre-line; */ /* Сохраняет переносы строк */
}

a.social:active,
    /* активная/посещенная ссылка */
a.social:hover,
    /* при наведении */
a.social {
    text-decoration: none;
    color: var(--text-color-dark);
}

.text-info-p {
    display: flex;
    align-items: center;
    justify-content: center;
}

.text-info-social-p {
    display: flex;
    justify-content: flex-start;
}

.text-info-socials {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
}

.text-info-socials p {
    padding: 2px;
    font-size: var(--font-size-h0);
}

.text-info-socials img {
    width: 16px;
    height: 16px;
    margin-right: 3px;
}

.opyright-content {
    font-size: var(--font-size-h);
    line-height: var(--font-size-h1);
    text-align: center;
    margin: 0;
    padding: 0;
}

/* Стиль кнопки */
.button-style {
    width: max-content;
    border-radius: 5px;
    background-color: var(--background-color-page);
    border: 1px solid var(--border-color);
}

.button-style .btn {
    font-size: var(--font-size-h2);
    color: var(--text-color-dark);
    margin: -17px 5px 5px 3px;
    padding:0;
    border: none;
}

.button-style .btn:hover {
    font-size: var(--font-size-h2);
    color: #111;
    border: none;
}

.button-style .btn:after {
    border: none;
}

.button-style .btn:before {
    border: none;
}

/* Авторизация */

.autorise_div {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    border: 1px solid #295e80;
    margin-top: 10px;
    margin-bottom: 10px;
}

/*  */
.edit-form {
    display: none;
    margin:0;
    padding: 0;
    font-weight: bold;
    font-weight: inherit;
}

.edit-form td {
    height: max-content;
    text-align: center;
    width: auto;
}

.messages {
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 5px;
}

.success {
    background-color: #d4edda;
    color: #155724;
}

.error {
    background-color: #f8d7da;
    color: #721c24;
}

.input-group-text {
    font-size: var(--font-size-h2);
    border: 1px solid var(--border-color);
    background-color: transparent;
    padding: 0 0 0 0;
    align-items: start;
    vertical-align: top;
    line-height: 1;
}

.form-select {
    font-size: var(--font-size-h2);
    border-radius: 5px;
    border: 1px solid var(--border-color);
}

/* Стиль таблицы */
.resp-tab {
    border-radius: 5px;
    font-weight: normal;
    border: none;
    border-collapse: collapse;
    width: 100%;
    max-width: 100%;
    white-space: nowrap;
    background-color: rgba(255, 255, 255, 0.692);
    -webkit-box-shadow:0 5px 10px 2px rgba(0, 164, 255, 0.2);
    -moz-box-shadow:0 5px 10px 2px rgba(0, 164, 255, 0.2);
    box-shadow:0 5px 10px 2px rgba(0, 164, 255, 0.2);
}

.resp-tab td,
.resp-tab th {
    text-align: center;
    padding: 5px;
    font-size: var(--font-size-h1);
    border: 1px solid var(--border-color);
}

.resp-tab td {
    font-size: var(--font-size-h1);
    border: 1px solid var(--border-color);
}

.resp-tab th {
    color: var(--text-color-dark);
    background: #BADCEF;
}

.resp-tab th:nth-child(odd) {
    background: #BADCEF;
}

.resp-tab tr:nth-child(even) {
    background: rgb(233, 236, 238);
}

@media (max-width: 767px) {
    .resp-tab {
        display: block;
        width: 100%;
    }

    .resp-tab thead,
    .resp-tab tbody,
    .resp-tab thead th {
        display: block;
    }

    .resp-tab thead {
        float: left;
    }

    .resp-tab tbody {
        width: auto;
        position: relative;
        overflow-x: auto;
    }

    .resp-tab > td,
    .resp-tab > th {
        padding: 10px 2px;
        box-sizing: border-box;
        overflow-x: hidden;
        overflow-y: auto;
        width: 160px;
        font-size: 12px;
        text-overflow: ellipsis;
    }

    .resp-tab thead th {
        text-align: center;
    }

    .resp-tab tbody tr {
        display: table-cell;
    }

    .resp-tab tbody tr:nth-child(odd) {
        background: none;
    }

    .resp-tab tr:nth-child(even) {
        background: transparent;
    }

    .resp-tab tr:hover {
        background: var(--background-color-page);
    }

    .resp-tab tr td:nth-child(odd) {
        background: #F8F8F8;
        border-right: 1px solid #E6E4E4;
    }

    .resp-tab tr td:nth-child(even) {
        border-right: 1px solid #E6E4E4;
    }

    .resp-tab td {
        display: block;
        text-align: center;
    }
}

/* betton images */
.button_img {
    width: 20px;
    height: 20px;
}

.button_img:hover {
    transform: scale(1.2);
}

.btn-right {
    background-color: var(--border-color);
    color: white;
}

.btn-right:hover {
    background-color: white;
    color: var(--border-color);
}

/**/
.breadcrumbs {
    margin-bottom: 10px;
}

.breadcrumbs a {
    text-decoration: none;
    color: #007bff;
}

.product-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.label-font-content {
    font-size: 1.2em;
    color: #999;
    text-decoration: line-through;
    margin-right: 8px;
}

.product-item {
    border: 1px solid #ddd;
    padding: 10px;
    width: 200px;
    text-align: center;
}

.product-item img {
    max-width: 100%;
    height: auto;
}

.product-item a {
    text-decoration: none;
    color: #333;
}

.quantity-control {
    margin: 10px 0;
}

.quantity-control input {
    width: 60px;
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

button {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 10px;
}

button:hover {
    background-color: #0056b3;
}

/* Вертикальное меню */
.leftmenu {
    grid-area: leftmenu;
    display: grid;
    align-items: start;
    margin: 0 10px 10px 0;
    height: max-content;
}

.assisted-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.menu_name_header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 0 20px 0;
}

.menu_name_header p {
    font-size: var(--font-size-h3);
    line-height: var(--font-size-h3);
    color: #306e94;
}

.line {
    border: 1px solid #96b4c4;
    width: 100%;
    margin-bottom: 10px;
    margin-top: 10px;
}

.color-dark {
    color: #023C58;
}

.subcategory-link,
.style-link {
    text-align: left;
    font-size: 12px;
    line-height: 14px;
    color: #0D3A56;
    width: 100%;
    height: 100%;
    padding-left: 5px;
    background: transparent;
    display: flex;
    align-items: center;
    /* Центрирование текста по вертикали */
}

.subcategory-link:hover,
.style-link:hover {
    color: #0D3A56;
    background: transparent;
}

.header-logo {
    width: 24px;
    margin-left: 10px;
    display: flex;
    align-items: center;
    /* Центрирование иконки по вертикали */
}

.subcategory-link.active,
.style-link.active {
    color: var(--border-color);
    font-weight: bold;
}

.header-link {
    width: 100%;
    height: 100%;
    display: flex;
    margin-top: -6px;
    align-items: center;
    /* Центрирование текста по вертикали */
}

.accordion {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
}

.accordion-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: transparent;
    border: none;
}

.menu_name {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-radius: 5px;
    width: 100%;
    height: 32px;
    cursor: pointer;
    border: 1px solid var(--border-color);
    background-color: #a5cde5;
    margin-bottom: 4px;
}

.image-search-size {
    margin-top: 0;
}

.menu_name:hover {
    background-color: rgb(146, 195, 226)
}

.sub_menu_name {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-radius: 5px;
    width: 100%;
    height: 30px;
    cursor: pointer;
    background-color: #b2d6f794;
    margin-bottom: 5px;
    border: 1px solid var(--border-color);
}

.sub_menu_name:hover {
    background-color: #a2c9e9c4;
}

.header-logo,
.header-link,
.accordion-header {
    display: flex;
    align-items: center;
    margin-right: 5px;
}

.accordion-header {
    cursor: pointer;
}

.arrow-icon {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease-out;
}

.arrow-icon.rotate {
    transform: rotate(180deg);
}

.accordion-content {
    display: flex;
    flex-direction: column;
    text-align: left;
    justify-content: center;
    align-items: center;
    padding: 0;
    max-height: 0;
    width: 100%;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
}

.accordion-content li {
    display: flex;
    justify-content: center;
    width: 100%;
}

.color-main-menu {
    color: #333;
    text-decoration: none;
    display: block;
    padding-left: 10px;
}

.color-main-menu:hover {
    color: #000;
    text-decoration: underline;
}

.img_point {
    width: 100%;
    display: flex;
    margin-left: 18px;
    justify-content: space-between;
    width: 6px;
}

/* Карточки продуктов */
.product-card {
    display: grid;
    grid-template-columns: repeat(2, 50%); /* Две колонки по 50% */
    grid-template-rows: max-content;
    margin-bottom: 20px;
}

.category-card {
    display: grid;
    grid-template-columns: repeat(3, 33.3%); /* Две колонки по 50% */
    grid-template-rows: max-content;
}

.warning {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
}

.images_basket {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: #f0f0f0;
    border-radius: 8px;
}

.navigation {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    width: 100%;
    height: max-content;
    border-bottom: 1px dotted #0056b3;
    margin-top: 5px;
}

.product-img {
    width: 100%;
    overflow: hidden; /* Обрезает изображение, если оно выходит за границы */
    padding: 10px;
}

.product-img img {
    border-radius: 30px;
    width: 100%;
    /* filter: drop-shadow(0 0 3px rgb(165, 165, 165,1)); */
}

.category-img {
    width: 100%;
    overflow: hidden; /* Обрезает изображение, если оно выходит за границы */
    padding: 0;
}

.category-img img {
    border-radius: 30px;
    width: 100%;
    /* border: 1px solid var(--border-color); */

    /* filter: drop-shadow(0 0 3px rgb(165, 165, 165,1)); */
}

.product {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: end;
    width: 100%;
    margin-bottom: 20px;
}

.product-content {
    padding: 10px;
}

.category-content {
    padding: 10px;
}

.product-button {
    display: flex;
    flex-direction: row;
    justify-content: end;
}

.product-description {
    font-size: 12px;
    text-align: justify;
    text-indent: 20px;
}

/* Корзина */
.cart-container {
    display: grid;
    grid-template-columns: auto 120px 1fr auto; /* Две колонки по 50% */
    grid-template-rows: auto;
    gap: 5px;
}

.cart-line {
    margin-top: 10px;
    border-top: 1px dotted #888484;
    margin-bottom: 10px;
}

.cart-line-basket {
    margin: 0;
    padding-right: 10px;
    padding-left: 10px;
    border-top: 1px dotted #888484;
}

.cart-delete {
    display: flex;
    justify-content: center;
    align-items: center;
}

.cart-delete img {
    display: flex;
    justify-content: center;
    align-items: center;
}

.cart-item {
    padding: 0;
    display: flex;
    align-items: center;
}

.cart-item img {
    max-width: 100px;
    margin-right: 10px;
}

.cart-item-info {
    flex: 1;
    line-height: 1.3em;
}

.cart-item-info h3 {
    margin: 0;
    font-size: 18px;
}

.cart-item-info p {
    margin: 5px 0;
}

.delete-from-cart {
    width: 26px;
    height: 26px;
    padding-top: 3px;
    border-radius: 50%;
}

.cart-totals {
    display: flex;
    flex-direction: row;
    justify-content: end;
    align-items: center;
    align-items: center;
}

.cart-totals p {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 20px;
}

.empty-cart-message {
    display: none; /* По умолчанию скрыто */
}

/* Стили для отзывов */

.statistics-table {
    width: 100%;
    margin: 0;
    border: none;
}

.statistics-table th, .statistics-table td {
    text-align: left;
    border: none;
    text-align: left;
    font-size: var(--font-size-h2);
    padding: 0;
    margin: 0;
    line-height: 14px;
    height: 30px;
}

.progress-bar {
    background-color: #f3f3f3;
    border-radius: 5px;
    overflow: hidden;
}

.progress {
    height: 20px;
    background-color: #eeff00;
    border-radius: 5px;
}

/* Пагинация */
.pagination {
    margin-top: 10px;
    text-align: center;
}

/* Всплывающее окно */
/* .popup {
	display: none;
	position: fixed;
	bottom: 20px;
	right: 20px;
	background-color: #ff4444;
	color: white;
	padding: 15px;
	border-radius: 5px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	z-index: 1000;
}

.popup.show {
	display: block;
	animation: fadeInOut 3s ease-in-out;
} */

/* Особисты данны*/
.profile-info {
    display: flex;
    justify-content: start;
    border-radius: 10px;
    border: 1px solid #858282;
}

/* Всплывающее окно */
.block-warning {
    display: none;
    position: fixed;
    top: 50%; /* Центрирование по вертикали */
    left: 50%; /* Центрирование по горизонтали */
    transform: translate(-50%, -50%); /* Смещение на половину ширины и высоты */
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 13px 15px;
    gap: 10px;
    border-radius: 12px;
    background: #a0ca86;
    color: #FF5200;
    z-index: 1000;
}

.block-warning.show {
    display: flex;
    animation: fadeInOut 3s ease-in-out;
}

@keyframes fadeInOut {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Полупрозрачный черный цвет */
    z-index: 999; /* Убедитесь, что overlay находится под всплывающим окном */
}

.overlay.show {
    display: block;
}

.block-warning i {
    font-size: 24px;
}

.block-warning div {
    color: #FF5200;
}

.block-warning.type-main {
    background-color: #EAF4FF;
    color: #2276fcc9;
}

.block-warning.type-main div {
    color: #2276fcd8;
    word-break: break-all;
}

.body-title-2 {
    color: #007bff;
    font-size: 14px;
    font-weight: 600;
    line-height: 14px;
    margin-top: -8px
}

/* Стиль иконки переключения языка*/
.lang-msg {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    background: #a9b6c462;
    position: relative;
}

.lang-fon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    background: #a9b6c462;
    position: relative;
}

.lang {
    display: none;
    position: absolute;
    right: 5px;
    top: 50px;
    min-width: 70px;
    border-radius: 8px;
    padding: 0;
    background: #feffff;
    z-index: 10;
    box-shadow: rgba(0, 0, 0, 0.35)0 5px 15px;
}

.lang.active {
    display: block;
}

.lang-style {
    display: flex;
    flex-direction: column;
    justify-items: center;
    justify-content: center;
    align-items: center;
}

.lang-style a {
    text-decoration: none;
}

.lang-fon img {
    width: 24px;
    height: 24px;
    margin: 5px;
}

.lang-msg img {
    width: 20px;
    height: 20px;
    margin-left: 5px;
}

.lang-style a img {
    cursor: pointer;
    width: 20px;
    height: 20px;
    margin: 5px 0;
}

.lang-style a span {
    cursor: pointer;
    margin-bottom: 10px;
}

/*Валидация*/
.input-error {
    border-color: #e93f3f; /* Змінюємо колір рамки при фокусі */
}

.error-message {
    color: #e3342f; /* Красный цвет */
    line-height: 1.4em;
    font-size: 0.875rem; /* Меньший текст */
    display: none; /* По умолчанию скрыт */
    margin-top: -10px;
    margin-bottom: 10px;
    padding-left: 5px;
}

.input-error {
    border-color: #e3342f;
    background-color: #fef2f2;
}

/*Хлебные крошки стиль*/
.breadcrumb-link {
    display: flex;
    align-items: center;
    text-decoration: none; /* Убирает подчеркивание */
    color: var(--text-color-light); /* Наследует цвет родителя */
}

.breadcrumb-link:hover {
    color: #306e94; /* Наследует цвет родителя */
}

.style_span {
    display: flex;
    align-items: center;
    text-decoration: none; /* Убирает подчеркивание */
    color: var(--text-color-light);
    font-size: 0.8em;
}

.style_title {
    display: flex;
    align-items: center;
    text-decoration: none; /* Убирает подчеркивание */
    color: #295e80;
    font-weight: bold;
    font-size: 0.8em;
}

.style_span:hover {
    color: var(--text-color-dark-hover);
}

/* Мигающая иконка */
.blinking-icon {
    color: #e3342f;
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

/* Стиль поля загрузки файла */
/* Container for 2 child elements (button & filename) */
.uploadFile {
    background: #fff;
    border: 0;
    display: block;
    margin: 5px;
    width: 100%;
    /* border radius */
    -o-border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
}

/* The button */
.uploadFile .fileBtn {
    background: var(--border-color);
    cursor: pointer;
    float: left;
    font-size: 0.9em;
    line-height: 1.8em;
    padding: 0.2em 1.2em 0.6em 0.8em;
    border-right: 1px solid var(--border-color);
    text-align: center;
    width: 30%;
    background: var(--text-color-dark-hover);
    color: #f0f0f0;
    -o-border-radius: 3px 0 0 3px;
    -moz-border-radius: 3px 0 0 3px;
    -webkit-border-radius: 3px 0 0 3px;
    border-radius: 3px 0 0 3px;
}

.uploadFile .fileBtn:hover {
    background-color: white;
    color: var(--text-color-dark);
}

/* Where the input-name will be filled in */
.uploadFile .fileName {
    float: right;
    overflow: hidden;
    white-space: nowrap;
    width: 70%;
    font-size: 0.9em;
    line-height: 1.8em;
    text-align: left;
    color: var(--text-color-dark);
    padding: 0.2em 0.2em 0.1em 0.7em;
}

/* Animation (hover) */
.uploadFile .fileBtn:hover {
    -webkit-transition-property: background;
    -webkit-transition-duration: 0.4s;
    -webkit-transition-timing-function: ease-in;
    -moz-transition-property: background;
    -moz-transition-duration: 0.4s;
    -moz-transition-timing-function: ease-in;
    -o-transition-property: background;
    -o-transition-duration: 0.4s;
    -o-transition-timing-function: ease-in;
    -ms-transition-property: background;
    -ms-transition-duration: 0.4s;
    -ms-transition-timing-function: ease-in;
    transition-property: background;
    transition-duration: 0.4s;
    transition-timing-function: ease-in;
}

/* Clear input-parent, due to child-floats */
.uploadFile:after {
    clear: both;
    content: " ";
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;
}


.modal.modal-show {
    display: block; /* Показываем окно */
    opacity: 1; /* Сделаем окно видимым */
    visibility: visible; /* Убираем скрытость */
}

/* Dashboard меню */
.dashboard_menu {
    display: flex;
    flex-direction: row;
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 0;
}

.actives {
    color: #007bff;
    font-weight: bold;
    text-decoration: underline;
}

.order-name {
    display: flex;
    flex-direction: row;
    gap: 10px;
    flex-wrap: wrap;
}

.order-guest {
    font-size: 1.4em;
    display: flex;
    flex-direction: row;
    gap: 10px;
    flex-wrap: wrap;
    line-height: 0.8em;
    margin: 5px 0;
    justify-content: space-between;
}

.order-edit-operator {
    display: flex;
    gap: 10px;
    flex-direction: row;
    align-items: center;
}

/* Cтиль уведомления */
.green_bloom,
.yellow_relection,
.red_panoramar,
.blue_display {
    margin: 14px;
    padding: 8px 8px 8px 20px;
    color: #333;
    border-radius: 2px;
    background: #fff;
    position: relative;
    font-weight: bold;
    font-size: 12px;
    font-family: Verdana, sans-serif;
    box-sizing: border-box;
    animation: fadeOut 4s forwards;
}

.green_bloom:before,
.yellow_relection:before,
.red_panoramar:before,
.blue_display:before {
    top: calc(50% - 12px);
    content: "";
    background: inherit;
    color: inherit;
    border: inherit;
    display: block;
    text-align: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    line-height: 22px;
    position: absolute;
    left: -12px;
    box-sizing: border-box;
    font-family: "FontAwesome";
    font-size: 12px;
}

.green_bloom {
    border: 2px solid #19932d;
    color: #167c27;
}

.green_bloom:before {
    content: "\f00c";
}

.yellow_relection {
    border: 2px solid #d16a16;
    color: #c76312;
}

.yellow_relection:before {
    content: "\f12a";
}

.red_panoramar {
    border: 2px solid #d52621;
    color: #b32e2a;
}

.red_panoramar:before {
    content: "\f057";
}

.blue_display {
    border: 2px solid #1a79c7;
    color: #1e7bc7;
}

.blue_display:before {
    content: "\f129";
}


@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        display: none;
    }
}

/* Стили поиска отделений Новой почты */
#citySuggestions {
    position: absolute;
    z-index: 1000;
    width: calc(100% - 28px); /* Учитываем padding поля ввода */
    max-height: 200px;
    overflow-y: auto;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-top: 2px;
}

#citySuggestions div {
    padding: 8px 12px;
    cursor: pointer;
}

#citySuggestions div:hover {
    background-color: #f5f5f5;
}

.np-suggestion-item {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}

.np-suggestion-item:hover {
    background-color: #f5f5f5;
}

.np-error, .np-not-found {
    padding: 8px 12px;
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

[data-nova-poshta] {
    display: none; /* Скрываем контейнер инициализации */
}

/**/
.char-count {
    font-size: 12px;
    margin-top: -15px;
    margin-bottom: 5px;
    text-align: right;
    color: #555;
    transition: color 0.3s ease;
    opacity: 0.8;
}
.breadcrumb-title{
    display: flex; flex-wrap: wrap; gap: 0.1rem; list-style: none; padding: 0; margin: 0;
}
.char-count.warn {
    color: orange;
}

.char-count.danger {
    color: red;
}

/* Стикер скидок */
.discount-label {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 70px;
    text-align: center;
    font-size: 1.4em;
    z-index: 1;
}

.discount-badge-image {
    width: 100%;
}

.discount-text {
    position: absolute;
    top: 20px;
    left: 0;
    width: 100%;
    color: white;
    font-weight: bold;
    font-size: 0.7em;
}

.countdown {
    position: absolute;
    top: 14px;
    left: 0;
    width: 100%;
    font-size: 0.4em;
    color: #fff;
}

/* Для форм адаптации */
.order-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.order-form > * {
    flex: 1 1 100%;
}

.delivery-icon {
    position: absolute;
    top: 1px;
    left: 2px;
    width: 20px;
    height: 20px;
    color: rgba(13, 58, 86, 0.8);
}

.delivery-style{
    padding-left: 24px !important;
    background: white !important;
    margin-bottom: 10px !important;
    font-size: 0.9em !important;
}

.delivery-select-wrapper {
    position: relative;
    min-width: 180px;
}

.delivery-select-wrapper select {
    padding-left: 30px;
    background: white;
    font-size: 0.9em;
}

.delivery-input {
    font-size: 0.8em;
    padding-top: 7px;
    margin-top: 12px;
}

.order-button {
    margin-top: 7px;
}

.order-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.order-info {
    flex: 1 1 auto;
}

.order-back {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.order-back svg {
    margin-right: 4px;
    flex-shrink: 0;
}

/*Стиль для чата */
.view-message {
    overflow-y: auto;
    height: calc(100vh - 350px);
    padding: 10px;
    margin-right: 0;
    display: flex;
    flex-direction: column;
}

.laneg-size {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 1.2em;
    padding-bottom: 15px;
    line-height: 1em;
}

.lang-msg .new {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    line-height: normal;
    background: #f0d24b;
    border: 1px solid #fff;
    border-radius: 100%;
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.25);
    vertical-align: sub;
}

.lang-msg .new span {
    display: block;
    color: #fff !important;
    text-align: center;
    line-height: inherit;
    font-size: 8px;
    padding-bottom: 5px;
}

.orders td {
    height: auto;
}
.orders-filter{
    display: flex; align-items: center; gap: 8px; white-space: nowrap;
}
.orders-div {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

/* Для ответов email */

.orders_table th,
.orders_table td,
.table-scroll-wrapper th,
.table-scroll-wrapper td {
    padding: 0 5px 5px 5px;
    text-align: center;
    line-height: 1;
    white-space: nowrap; /* Чтобы текст не переносился */
}

.answer-email {
    background: #f8f9fa;
    padding: 0 5px 8px 0;
    border-radius: 6px;
    margin: 5px;
}

.orders_table {
    min-width: 96%;
    max-width: 95vw;
    overflow-x: auto;
}

.orders_table table,
.table-scroll-wrapper table {
    font-size: 0.8em;
    width: 100%;
    min-width: 700px; /* Это ключ — таблица будет шире экрана, и появится прокрутка */
    border: none;
}

.table thead tr th {
    border-top: none;
}

.orders_table table tbody tr td,
.table-scroll-wrapper table tbody tr td {
    font-size: 1em;
    padding: 5px 8px 8px 8px;
    vertical-align: middle;
    height: auto;
    line-height: 1em;
}

.form_operator_orders {
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: space-between;
}
.form_operator_div {
   width: 100%;
}
/* Поле поиска */
.search-modal {
    position: fixed;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 800px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 5px 30px rgba(0,0,0,0.3);
    z-index: 1000;
    display: none;
    overflow: hidden;
}

.search-modal-content {
    padding: 20px;
}

.search-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.search-modal-header h3 {
    margin: 0;
    color: #333;
}

.search-modal-body {
    max-height: 60vh;
    overflow-y: auto;
}

.search-result-item {
    display: flex;
    gap: 15px;
    padding: 15px;
    border-bottom: 1px solid #eee;
    align-items: flex-start;
}

.search-result-image {
    flex: 0 0 80px;
}

.search-result-image img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
}

.search-result-content {
    flex: 1;
    min-width: 0;
}

.search-result-title {
    font-weight: 600;
    margin-bottom: 5px;
}

.search-result-title a {
    color: #2c3e50;
    text-decoration: none;
}

.search-result-title a:hover {
    color: #3490dc;
}

.search-result-sku,
.search-result-type {
    font-size: 0.85em;
    color: #7f8c8d;
    margin-bottom: 5px;
}

.search-result-description {
    font-size: 0.9em;
    color: #555;
    margin-top: 8px;
    line-height: 1.4;
}

.search-result-actions {
    flex: 0 0 100px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.close-btn {
    background: none;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
    color: #7f8c8d;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 999;
    display: none;
}

.mb-3.d-flex {
    gap: 10px;
    align-items: center;
}

.mb-3 label {
    white-space: nowrap;
    margin-bottom: 0;
}

.form-select {
    max-width: 250px;
    margin-bottom: 0;
    margin-top: 10px;
}
.password-requirements {
    font-size: 12px;
    color: #666;
    margin-top: -15px;
}

.alias-errors{
    display: flex;
    color: red;
    font-size: 12px;
    margin-top: -10px;
    margin-bottom: 5px;
}