/*Подключаем шрифты*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&family=Unbounded:wght@200..900&display=swap');

@font-face {
    font-family: 'NauryzRedKeds';
    src: url('font/NauryzRedKeds.ttf') format('truetype');
    font-style: normal; 
    font-weight: normal; 
}

/*========================================
  CSS ПЕРЕМЕННЫЕ
  ========================================*/
:root {
    /* Основные цвета */
    --color-primary: #7231FF;
    --color-primary-dark: #5a20e0;
    --color-primary-rgb: 114, 49, 255;
    --color-accent: #FFE343;
    --color-accent-dark: #e6b435;
    --color-accent-rgb: 255, 227, 67;
    
    /* Фоновые цвета */
    --color-bg-light: #E0DDEB;
    --color-bg-light-hover: #ded8f3;
    --color-bg-violet: #CCB2FA;
    --color-bg-violet-light: #EAE3FA;
    --color-bg-violet-medium: #D5C2FF;
    --color-bg-grey: #FAFAFA;
    
    /* Текст */
    --color-text: #333333;
    --color-text-white: #ffffff;
    --color-text-black: #000000;
    
    /* Скругления */
    --border-radius-xs: 6px;
    --border-radius-sm: 10px;
    --border-radius: 20px;
    --border-radius-lg: 30px;
    --border-radius-xl: 40px;
    --border-radius-round: 50%;
    
    /* Тени */
    --shadow-default: 7px 7px 0px rgba(127, 106, 177, 0.42);
    --shadow-button: 5px 5px 2px rgba(127, 106, 177, 0.42);
    --shadow-button-hover: 5px 8px 2px rgba(127, 106, 177, 0.4);
    --shadow-button-active: 2px 2px 1px rgba(127, 106, 177, 0.4);
    --shadow-tab: 10px 15px 0px rgba(43, 17, 105, 0.42);
    --shadow-inset: inset 5px 5px 0px rgb(98, 70, 165);
    
    /* Анимации */
    --transition-fast: 0.15s ease-in-out;
    --transition-default: 0.3s ease;
    --transition-smooth: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    
    /* Размеры контейнера */
    --container-width: 1400px;
    --container-padding: 20px;
    
    /* Размеры шрифтов */
    --font-size-xs: 10px;
    --font-size-sm: 12px;
    --font-size-base: 14px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 28px;
    --font-size-4xl: 36px;
    --font-size-5xl: 48px;
    --font-size-6xl: 64px;
    --font-size-huge: 200px;
    
    /* Отступы */
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 15px;
    --spacing-lg: 20px;
    --spacing-xl: 30px;
    --spacing-2xl: 40px;
    --spacing-3xl: 50px;
    --spacing-4xl: 60px;
    
    /* Z-индексы */
    --z-index-dropdown: 10;
    --z-index-sticky: 100;
    --z-index-modal: 10000;
}

/*========================================
  ОСНОВНЫЕ СТИЛИ
  ========================================*/
* {
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Разрешаем выделение для полей ввода и редактируемых элементов */
input,
textarea,
select,
[contenteditable="true"],
[contenteditable="true"] * {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%; /* Предотвращает автоматическое изменение размера текста на iOS */
    -ms-text-size-adjust: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: #7231FF;
}

h1, h2, p, a{
    margin: 0;
    text-decoration: none;
    color: black;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    padding-bottom: 40px;
    min-height: 100vh;
    width: 100%;
    font-family: "Unbounded", sans-serif;
    font-size: 16px;
    font-weight: 400;
    background-image: url(picture/sparkles-background.svg), url(picture/Vector.svg);
    background-repeat: no-repeat;
    background-size: contain, cover;
    background-position: 100% 0, 100% 0;
    background-color: #7231FF;
    background-attachment: scroll;
    color: #333;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

nav, main, footer{
    width: 100%;
}

.container{
    width: var(--container-width);
    max-width: var(--container-width);
    padding: 0 var(--container-padding);
    margin: auto;
    position: relative;
    z-index: 1;
}

.huge-title{
    font-family: "NauryzRedKeds", sans-serif;
    font-size: 200px;
    color: white;
}

.title{
    font-family: "NauryzRedKeds", sans-serif;
    font-size: 64px;
}

.button-text{
    font-size: 14px;
    font-weight: 300;
}

.bold-text{
    font-weight: 600;
}

.button {
    padding: var(--spacing-md) var(--spacing-lg);
    background-color: var(--color-text-white);
    border-radius: var(--border-radius-lg);
    width: fit-content;
    box-shadow: var(--shadow-button);
    transition: var(--transition-smooth);
    transform: translateY(0) scale(1);
    display: inline-block;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.button:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: var(--shadow-button-hover);
}

.button:active {
    transform: translateY(1px) scale(0.98);
    box-shadow: var(--shadow-button-active);
}





/*Первый блок*/
.first-block{
    margin-top: 60px;
    margin-bottom: 140px;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 90px;
    height: auto;
}

.title-w-sparcles{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.title-block{
    width: -webkit-fill-available;
    width: -moz-available;
}

.line-height-title{
    line-height: 170px;
}

.relative-img{
    width: 200px;
    height: auto;
    margin-top: 84px;
}

.arrow-N-text{
    display: flex;
    flex-direction: row;
    justify-content: end;
    gap: 40px;
}



/*Второй блок*/
.content-1-flex{
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.cloud-flex{
    display: flex;
    flex-direction: row;
    gap: 70px;
    align-items: flex-start;
}

.border-cloud, .solid-cloud-all{
    width: 45%;
    border-radius: 30px;
}

.furniture{
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.furniture-w-arrow{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

.furniture-w-arrow img {
    margin-left: -100px;
    margin-top: 30px;
}

.border-cloud{
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);

    background-color: var(--color-accent);
    box-shadow: var(--shadow-default);
    padding: 32px;

    height: fit-content;

    margin-top: var(--spacing-3xl);
    border-radius: var(--border-radius);
}

.border-cloud p {
    line-height: 1.5;
    margin: 0;
}

.border-cloud-color{
    
    display: flex;
    flex-direction: column;
    gap: 30px;

    background-color: #FFE343;
    box-shadow: 7px 7px 0px rgba(127, 106, 177, 0.42);
    padding: 32px;

    height: fit-content;

    margin-top: 50px;
    border-radius: 20px;
}

.border-cloud-color p {
    line-height: 1;
    margin: 0;
}

.solid-cloud-all{
    display: flex;
    flex-direction: column;
}

.solid-cloud{
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);

    background-color: var(--color-primary);
    padding: 32px;
    justify-content: center;

    box-shadow: var(--shadow-inset);

    border-radius: 0 var(--border-radius) var(--border-radius) var(--border-radius);
}

.cost-space-between{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.text-another-services{
    background-color: #FFE343;
    border-radius: 20px 20px 0 0;
    padding: 15px 20px;
    width: fit-content;
}

.wave-N-text{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.text-white{
    color: white;
}

.text-big-yellow{
    color: #FFE343;
    font-size: 24px;
}

.content-1-mini-gap{
    display: flex;
    flex-direction: column;
}


/*Стили таблицы*/
.tab {
    display: flex;
    flex-direction: column;
}

.tab-nav > input[type="radio"] {
    display: none;
}

.tab-content {
    display: none;
    padding: var(--spacing-3xl) 55px;
    background-color: var(--color-text-white);
    border-radius: var(--border-radius-xl);
    border-top-left-radius: 0px;
    box-shadow: var(--shadow-tab);
    margin-top: -1px;
}

.tab-content.active {
    display: block;
}

.tab-nav {
    display: flex;
    align-items: end;
    order: -1;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    height: 95px;
    position: relative;
    -ms-overflow-style: none; /* IE и Edge */
    scrollbar-width: none; /* Firefox */
    margin-right: 32px;
    margin-bottom: 1px;
}

@media (max-width: 545px) {
    .tab-nav {
        margin-right: 18px;
    }
}

.tab-nav::-webkit-scrollbar {
    display: none;
}

.tab-nav > input[type="radio"] {
    display: none; /* Hide radio buttons */
}

.tab-nav > label {
    display: inline-block;
    padding: var(--spacing-xl) var(--spacing-lg);
    text-decoration: none;
    text-align: center;
    background: var(--color-bg-light);
    height: 70px;
    margin: 0 3px;
    border: none;
    margin-bottom: -1px;
    border-top-left-radius: var(--border-radius-sm);
    border-top-right-radius: var(--border-radius-sm);
    transition: var(--transition-fast);
    cursor: pointer;
    flex-shrink: 0;
    white-space: nowrap;
}

.tab-nav > label:hover {
    height: 75px;
    background: var(--color-bg-light-hover);
}

.tab-nav > input[type="radio"]:checked + label {
    background-color: var(--color-accent);
    cursor: default;
    font-size: var(--font-size-2xl);
    height: 95px;
    padding: var(--spacing-xl) 25px;
}




/*Стили внутренней таблицы 2*/
.price-table {
    width: 100%;
    border-collapse: collapse;
    border: none;
}

.price-table th,
.price-table td {
    padding: 12px;
    text-align: center;
}

.price-table th {
    background-color: var(--color-accent);
    font-weight: bold;
    border-spacing: 0px;
}

thead{
    border-radius: 20px 20px 20px 0;
}

.text-align-left{
    text-align: left !important;
    padding: 12px 30px !important;
    width: 180px;
    font-weight: 600;
}

.violet-color{
    background-color: var(--color-bg-violet);
}

.violet-grey-color{
    background-color: var(--color-bg-violet-light);
}

.grey-color{
    background-color: var(--color-bg-grey);
}



/*Стили для второй панели вкладок*/
.stands-tabs-container {
  position: relative;
  margin-top: -14px; /* ещё компактнее стык с таблицей */
}

/* Скрываем радио-кнопки */
.stands-tabs-container > input[type="radio"] {
  position: absolute;
  opacity: 0;
}

/* Стили для навигации */
.stands-tabs-nav {
    display: flex;
    align-items: end;
    overflow-x: auto;
    overflow-y: hidden; /* Disable vertical scrolling */
    white-space: nowrap; /* Prevent line breaks */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    height: 72px;
}

.stands-tabs-nav label {
  display: inline-block;
    padding: 10px 0;
    text-decoration: none;
    text-align: center;
    background: #E0DDEB;
    width: 145px;
    height: 50px;
    margin: 0 3px;
    border: none;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    transition: color .15s ease-in-out,
     background-color .15s ease-in-out,
      border-color .15s ease-in-out,
       font-size .15s ease-in-out,
        height .15s ease-in-out,
         width .15s ease-in-out;
    cursor: pointer;
    flex-shrink: 0; /* Prevent labels from shrinking */
}

/* Стили для активной вкладки */
#stands-1:checked ~ .stands-tabs-nav label[for="stands-1"],
#stands-2:checked ~ .stands-tabs-nav label[for="stands-2"],
#stands-3:checked ~ .stands-tabs-nav label[for="stands-3"],
#color-acrylic-1:checked ~ .stands-tabs-nav label[for="color-acrylic-1"],
#color-acrylic-2:checked ~ .stands-tabs-nav label[for="color-acrylic-2"],
#glitter-acrylic-1:checked ~ .stands-tabs-nav label[for="glitter-acrylic-1"],
#glitter-acrylic-2:checked ~ .stands-tabs-nav label[for="glitter-acrylic-2"] {
  background-color: #FFE343;
  cursor: default;
  font-size: 24px;
  width: 175px;
  height: 60px;
}

/* Контейнер содержимого */
.stands-tabs-content {
  position: relative;
  overflow: hidden;
}

/* Панели контента */
.stands-tab-pane {
  display: none;
}

/* Показываем активную панель */
#stands-1:checked ~ .stands-tabs-content .content-stand-1,
#stands-2:checked ~ .stands-tabs-content .content-stand-2,
#stands-3:checked ~ .stands-tabs-content .content-stand-3 {
  display: block;
}

.stands-tabs-nav label:hover {
  height: 45px;
  background: #ded8f3;
}





/*Стили для третьей панели вкладок*/
.thickness-tabs-container {
  position: relative;
}

/* Скрываем радио-кнопки */
.thickness-tabs-container > input[type="radio"] {
  position: absolute;
  opacity: 0;
}

/* Стили для навигации */
.thickness-tabs-nav {
    display: flex;
    align-items: end;
    overflow-x: auto;
    overflow-y: hidden; /* Disable vertical scrolling */
    white-space: nowrap; /* Prevent line breaks */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    height: 72px;
}

.thickness-tabs-nav label {
  display: inline-block;
    padding: 10px 0;
    text-decoration: none;
    text-align: center;
    background: #E0DDEB;
    width: 145px;
    height: 50px;
    margin: 0 3px;
    border: none;
    margin-bottom: -1px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    transition: color .15s ease-in-out,
     background-color .15s ease-in-out,
      border-color .15s ease-in-out,
       font-size .15s ease-in-out,
        height .15s ease-in-out,
         width .15s ease-in-out;
    cursor: pointer;
    flex-shrink: 0; /* Prevent labels from shrinking */
}

.thickness-tabs-nav label:hover{
    height: 45px;
    background: #ded8f3;
}

/* Стили для активной вкладки */
#thickness-1:checked ~ .thickness-tabs-nav label[for="thickness-1"],
#thickness-2:checked ~ .thickness-tabs-nav label[for="thickness-2"],
#thickness-3:checked ~ .thickness-tabs-nav label[for="thickness-3"] {
  background-color: #FFE343;
    cursor: default;
    font-size: 24px;
    width: 200px;
    height: 60px;
}

/* Контейнер содержимого */
.thickness-tabs-content {
  position: relative;
  overflow: hidden;
}

/* Панели контента */
.thickness-tab-pane {
  display: none;
}

/* Показываем активную панель */
#thickness-1:checked ~ .thickness-tabs-content .thickness-tab-pane:nth-child(1),
#thickness-2:checked ~ .thickness-tabs-content .thickness-tab-pane:nth-child(2),
#thickness-3:checked ~ .thickness-tabs-content .thickness-tab-pane:nth-child(3) {
  display: block;
}


.text-align-right{
    text-align: right;
}



/* Закругления в таблице */

.radius-1{
    border-bottom-left-radius: 20px;
}

.radius-2{
    border-bottom-right-radius: 20px; border-top-right-radius: 10px;
}

/* Правильные скругления для правых углов таблиц */
.radius-header-right {
    border-top-right-radius: 10px;
}

.radius-last-row-right {
    border-bottom-right-radius: 20px;
}

/* Скругление нижнего левого угла второго столбца */
.radius-second-column-bottom-left {
    border-bottom-left-radius: 20px;
}

.radius-3{
    border-top-left-radius: 10px; border-top-right-radius: 10px;
}

.radius-4{
    border-bottom-left-radius: 20px; border-bottom-right-radius: 20px;
}

.unselectable {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}



/* Стили для кнопки прокрутки вниз */
.scroll-down-btn {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background-color: #FFE343;
  color: black;
  border-radius: 30px;
  cursor: pointer;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  opacity: 1;
  pointer-events: auto;
}

.scroll-down-btn:hover {
  background-color: #e6b435;
  transform: translateX(-50%) translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.scroll-down-btn svg {
  transition: transform 0.3s ease;
}

.scroll-down-btn:hover svg {
  transform: translateY(3px);
}


/*Стили картинок-котэ*/
.one-cat {
  position: absolute;
  width: 192px;
  height: 181px;
  top: 959px;
  right: calc(50% - 625px); /* Центрирование + смещение */
}

@media (max-width: 1400px) {
    .one-cat{
        top: 884px;
    }
}

@media (max-width: 1340px) {
    .one-cat{
        right: 50px;
    }
}

@media (max-width: 1200px) {
    .one-cat{
        width: 130px;
        height: 130px;
        top: 902px;
    }
}

@media (max-width: 992px) {
    .one-cat{
        top: 747px;
    }
}

@media (max-width: 860px) {
    .one-cat{
        display: none;
    }
}

.two-cat{
    position: absolute;
    width: 192px;
    height: 320px;
    top: 1430px;
    left: calc(50% - 833px); /* Центрирование + смещение */
}

@media (max-width: 1570px) {
    .two-cat{
        display: none;
    }
}




/*СТИЛИ ПОДВАЛА*/
footer{
    background-image: url(picture/footer.svg);
    background-repeat: no-repeat;
    background-position: center;
}

.footer-text{
    height: 550px;
    width: 930px;
    
    display: flex;
    flex-direction: column;

    margin: 120px auto;
}

.footer-text-text{
    margin: auto 0;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 80px;
}

.centered-flex{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contact-text{
    font-family: "NauryzRedKeds", sans-serif;
    font-size: 64px;
}

.flex-contact{
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.footer-text-order{
    font-size: 24px;
    font-weight: 500;
}

.bubble-one{
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: center;
}

.one-social{
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.social-flex{
    display: flex;
    flex-direction: row;

    justify-content: space-between;

    width: -webkit-fill-available;
    width: -moz-available;
}

.one-social-w-arrow{
    display: flex;
    flex-direction: row;
    gap: 60px;
}

.bubble-one img{
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform: translateY(0) scale(1);
    display: inline-block;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.bubble-one img:hover{
    transform: translateY(-2px) scale(1.07);
}

.bubble-one img:active{
    transform: translateY(0px) scale(0.94);
}



.technical-work{
    height: 90vh;
    background-image: url(picture/lenta.png), url(picture/lenta.png);
    background-repeat: no-repeat;
    background-position: 10% 6%, 10% 94%;
}

.technical-work-flex{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: auto;
    height: 80vh;

    text-align: center;
}

.technical-work-flex img{
    width: 150px;
    margin-bottom: 30px;
}

@media (max-width: 576px) {
   .technical-work-flex img{
        width: 120px;
        margin-bottom: 20px;
    } 
}

@media (max-width: 530px) {
.text-align-center{
    text-align: center;
}
}

.margin-top-between-blocks{
    margin-top: 60px;
}


/* Bookmark buttons styles */
.bookmark-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

.bookmarks-content{
    margin-bottom: 40px;
}

/* Кнопки категорий теперь используют класс btn-warning из buttons.css */

/* Two-column layout */
.bookmarks-columns {
    display: flex;
    gap: 50px;
    margin-top: 40px;
    flex-direction: row;
}

@media (max-width: 576px) {
    .bookmarks-columns {
        gap: 20px;
    }
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .bookmarks-columns {
        flex-direction: column;
        gap: 40px;
    }
    
    .gallery-container,
    .solid-cloud-all {
        width: 100%;
    }
    
    .gallery-images {
        height: 300px;
    }
}

@media (max-width: 576px) {
    .bookmark-buttons {
        gap: 10px;
    }
    
    .gallery-images {
        height: 200px;
    }
    
    .gallery-arrow {
        padding: 11px 12px;
        font-size: 16px;
    }
}

@media (max-width: 576px) {
    .one-of-the-content-3-gap{
        gap: 60px;
    }
}

.one-of-the-content-3-gap{
    display: flex;
    flex-direction: column;
    gap: 130px;
}







/*НОВОЕ*/

/* Стили для вкладок обложек */
.cover-tabs-container {
  position: relative;
  margin-top: 40px;
}

/* Скрываем радио-кнопки */
.cover-tabs-container > input[type="radio"] {
  position: absolute;
  opacity: 0;
}

/* Стили для навигации */
.cover-tabs-nav {
    display: flex;
    align-items: end;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    height: 70px;
}

.cover-tabs-nav label {
  display: inline-block;
    padding: 15px 0;
    text-decoration: none;
    text-align: center;
    background: #E0DDEB;
    width: 160px;
    height: 50px;
    margin: 0 3px;
    border: none;
    margin-bottom: -1px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    transition: all 0.15s ease-in-out;
    cursor: pointer;
    flex-shrink: 0;
}

.cover-tabs-nav label:hover {
  height: 55px;
  background: #ded8f3;
}

/* Стили для активной вкладки */
#cover-tab-1:checked ~ .cover-tabs-nav label[for="cover-tab-1"],
#cover-tab-2:checked ~ .cover-tabs-nav label[for="cover-tab-2"] {
  background-color: #FFE343;
  cursor: default;
  font-size: 20px;
  width: 180px;
  height: 60px;
}

/* Контейнер содержимого */
.cover-tabs-content {
  position: relative;
  overflow: visible;
}

/* Панели контента */
.cover-tab-pane {
  display: none;
}

/* Показываем активную панель */
#cover-tab-1:checked ~ .cover-tabs-content .cover-tab-pane:nth-child(1),
#cover-tab-2:checked ~ .cover-tabs-content .cover-tab-pane:nth-child(2) {
  display: block;
}

.style-for-3-content{
    padding: 55px 25px;
    background-color: white;
    border-radius: 20px;
    border-top-left-radius: 0px;
    border: 2px solid #E0DDEB;
    box-shadow: 7px 7px 0px rgba(127, 106, 177, 0.42);
}



/* Стили для галереи */
.cover-gallery-container {
    display: flex;
    gap: 40px;
    flex-direction: row;
}

.cover-gallery {
    flex: 1;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    max-width: 500px;
    max-height: 500px;
}

.cover-description {
    flex: 1;
}

.yellow-title {
    background-color: #FFE343;
    margin: 0;
    border-radius: 40px;
    padding: 10px 20px;
    width: max-content;
    margin-bottom: 20px;
}

.text-cover-description{
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0 10px;
    margin-top: 20px;
}

.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
}

.swiper-button-next,
.swiper-button-prev {
    color: black !important;
    background: #ffe343de;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50%;
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 14px !important;
    font-weight: bold;
}

.swiper-pagination-bullet {
    background: #E0DDEB !important;
    opacity: 1 !important;
}

.swiper-pagination-bullet-active {
    background: #7231FF !important;
}

/* Стили для галереи акрила-брелоков */
.acrylic-keychains-gallery-container {
    display: flex;
    gap: 40px;
    flex-direction: row;
    margin-top: var(--spacing-3xl);
}

.acrylic-keychains-gallery {
    flex: 1;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    max-width: 500px;
    max-height: 500px;
    min-width: 400px;
}

.acrylic-keychains-info-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 300px;
}

.acrylic-keychains-info-column .border-cloud {
    width: 100%;
    margin-top: 0;
    padding: 24px;
}

.acrylic-keychains-info-column .solid-cloud-all {
    width: 100%;
}

.acrylic-keychains-info-column .text-another-services {
    width: 100%;
}

/* Общие стили для всех галерей акрила (стенды, жемчужный, двойной, цветной) */
.acrylic-stands-gallery-container,
.acrylic-pearl-gallery-container,
.acrylic-double-gallery-container,
.acrylic-color-pearl-gallery-container,
.acrylic-color-glitter-gallery-container {
    display: flex;
    gap: 40px;
    flex-direction: row;
    margin-top: var(--spacing-3xl);
}

.acrylic-stands-gallery,
.acrylic-pearl-gallery,
.acrylic-double-gallery,
.acrylic-color-pearl-gallery,
.acrylic-color-glitter-gallery {
    flex: 1;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    max-width: 500px;
    max-height: 500px;
    min-width: 400px;
}

.acrylic-stands-info-column,
.acrylic-pearl-info-column,
.acrylic-double-info-column,
.acrylic-color-pearl-info-column,
.acrylic-color-glitter-info-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 300px;
}

.acrylic-stands-info-column .border-cloud,
.acrylic-pearl-info-column .border-cloud,
.acrylic-double-info-column .border-cloud,
.acrylic-color-pearl-info-column .border-cloud-color,
.acrylic-color-glitter-info-column .border-cloud-color {
    width: 100%;
    margin-top: 0;
    padding: 24px;
}

.acrylic-stands-info-column .solid-cloud-all,
.acrylic-pearl-info-column .solid-cloud-all,
.acrylic-double-info-column .solid-cloud-all,
.acrylic-color-pearl-info-column .solid-cloud-all,
.acrylic-color-glitter-info-column .solid-cloud-all {
    width: 100%;
}

.acrylic-stands-info-column .text-another-services,
.acrylic-pearl-info-column .text-another-services,
.acrylic-double-info-column .text-another-services,
.acrylic-color-pearl-info-column .text-another-services,
.acrylic-color-glitter-info-column .text-another-services {
    width: 100%;
}

/* Стили для галерей ПЭТ-пластика */
.pet-business-cards-gallery-container,
.pet-bookmarks-gallery-container,
.pet-other-formats-gallery-container {
    display: flex;
    gap: 40px;
    flex-direction: row;
    margin-top: var(--spacing-3xl);
}

.pet-business-cards-gallery,
.pet-bookmarks-gallery,
.pet-other-formats-gallery {
    flex: 1;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    max-width: 500px;
    max-height: 500px;
    min-width: 400px;
}

.pet-business-cards-gallery-container .business-card-pricing,
.pet-bookmarks-gallery-container .business-card-pricing,
.pet-other-formats-gallery-container .business-card-pricing {
    flex: 1;
    min-width: 300px;
}

/* Стили для галерей блока Прочее */
.other-cd-gallery-container,
.other-calendar-gallery-container {
    display: flex;
    gap: 40px;
    flex-direction: row;
    margin-top: var(--spacing-3xl);
}

.other-cd-gallery,
.other-calendar-gallery {
    flex: 1;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    max-width: 500px;
    max-height: 500px;
    min-width: 400px;
}

.other-cd-gallery-container .business-card-pricing,
.other-calendar-gallery-container .business-card-pricing {
    flex: 1;
    min-width: 300px;
}

/* Адаптивность */
@media (max-width: 992px) {
    .cover-gallery{
        max-width: none;
        max-height: none;

        width: 100%;
        height: auto;
    }

    .cover-gallery-container {
        flex-direction: column;
    }
    
    .acrylic-keychains-gallery-container,
    .acrylic-stands-gallery-container,
    .acrylic-pearl-gallery-container,
    .acrylic-double-gallery-container {
        flex-direction: column;
        gap: 30px;
    }
    
    .acrylic-keychains-gallery,
    .acrylic-stands-gallery,
    .acrylic-pearl-gallery,
    .acrylic-double-gallery {
        max-width: none;
        max-height: none;
        width: 100%;
        min-width: auto;
    }
    
    .acrylic-keychains-info-column,
    .acrylic-stands-info-column,
    .acrylic-pearl-info-column,
    .acrylic-double-info-column {
        min-width: auto;
    }
    
    .swiper {
        height: 400px;
    }
}

@media (max-width: 576px) {
    .cover-description {
        padding: 15px;
    }
    
    .cover-description h3 {
        font-size: 20px;
    }

    .style-for-3-content {
        padding: 20px 15px;
    }

    .cover-description {
        padding: 0;
    }

    .solid-cloud-white{
        padding: 20px !important;
    }
}

@media (max-width: 460px) {
    .swiper {
        height: 300px;
    }
}

.frame-text {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

@media (max-width: 1200px) {
    .text-bold-help{
        font-size: 16px;
    }
}

@media (max-width: 570px) {
    .text-bold-help{
        font-size: 14px;
    }
}

@media (max-width: 530px) {
    .complex-shape, .frame-text{
        transform: scaleX(-1);
    }

    .circle{
        right: 0;
        left: auto !important;
    }
}


/* Стили для PhotoSwipe */
.pswp__button--close {
    background: rgba(255, 255, 255, 0.3) !important;
    border-radius: 50%;
    width: 44px !important;
    height: 44px !important;
    margin: 15px !important;
}

.pswp__button--close:hover {
    background: rgba(255, 255, 255, 0.5) !important;
}

/* Мобильная адаптация размеров кнопок PhotoSwipe */
@media (max-width: 576px) {
    .pswp__button--close {
        width: 32px !important;
        height: 32px !important;
        margin: 10px !important;
    }
    .pswp__button--arrow,
    .pswp__button--arrow--prev,
    .pswp__button--arrow--next {
        width: 36px !important;
        height: 36px !important;
    }
    .pswp__button--arrow svg {
        width: 16px !important;
        height: 16px !important;
    }
}

.pswp__bg {
    background: rgba(0, 0, 0, 0.9) !important;
}

.pswp__img {
    border-radius: 8px;
}

.swiper-slide {
    cursor: pointer;
}

.swiper-slide img {
    transition: transform 0.3s ease;
}

.swiper-slide:hover img {
    transform: scale(1.03);
}

/* Предотвращение конфликтов с навигацией Swiper */
.swiper-button-next,
.swiper-button-prev {
    z-index: 10 !important;
}

.swiper-slide {
    position: relative;
}

.swiper-slide img {
    pointer-events: auto;
}

/* Для модального окна галереи */
.gallery-modal * {
    box-sizing: border-box;
}

.info-table-container {
    display: flex;
    gap: 20px;
    width: 100%;
    margin-top: 40px;
}

.info-table-container .solid-cloud-all,
.info-table-container .inner-table {
    width: 48%;
}

/* Адаптивность */
@media (max-width: 992px) {
    .info-table-container {
        flex-direction: column;
    }
    
    .info-table-container .solid-cloud-all,
    .info-table-container .inner-table {
        width: 100%;
    }
}

.mini-procent{
    width: 48%;
}

/* Стили для тултипа */
.tooltip-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: help;
}

.tooltip {
    position: absolute;
    bottom: 100%;
    left: 122px;
    transform: translateX(0);
    background-color: #333;
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    z-index: 1000;
    margin-bottom: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    min-width: 320px;
}

.tooltip-container:hover .tooltip {
    opacity: 1;
    visibility: visible;
}

.tooltip:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 20px;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

/* Стили для контейнера с текстом и иконкой */
.tooltip-text-with-icon {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Стили для значка тултипа */
.tooltip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background-color: #FFE343;
    color: #7231FF;
    border-radius: 50%;
    font-size: 12px;
    font-weight: bold;
    cursor: help;
    transition: all 0.2s ease;
}

.tooltip-icon:hover {
    background-color: #ffd700;
    transform: scale(1.1);
}

/* Адаптивные стили для тултипа */
@media (max-width: 768px) {
    .tooltip-icon {
        width: 20px;
        height: 20px;
        font-size: 11px;
    }
}

/* Оптимизация */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

.tab-nav {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tab-nav label {
  min-width: 120px;
}

.swiper {
  touch-action: pan-y;
}

.swiper-slide {
  touch-action: manipulation;
}

.button:not(.furniture-button), .tab-nav label {
  transition: all 0.3s ease;
}

.button:not(.furniture-button):hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 10px rgba(127, 106, 177, 0.42);
}

.text-big-yellow {
  text-shadow: 1px 1px 2px rgba(127, 106, 177, 0.42);
}

/* Префикс для производительности */
.tab-nav label {
  transform: translateZ(0);
  backface-visibility: hidden;
}




/* Стили для контейнера фреймов */
.frames-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-top: 40px;
    padding: 20px;
    align-items: stretch;
}

/* Стили для отдельных фреймов */
.frame {
    width: 100%;
    height: 170px;
    position: relative;
}

.complex-shape {
    width: 100%;
    height: 100%;
    background: #D5C2FF;
    clip-path: path("M994.5 0C1011.07 0.000168837 1024.5 13.4316 1024.5 30V353C1024.5 369.568 1011.07 383 994.5 383H30.0004C13.4318 383 0.0003672 369.569 0.000366211 353V86.5C0.000365255 70.4838 13.1092 57.5001 29.1254 57.5C45.0036 57.5 58.0004 44.6282 58.0004 28.75C58.0004 12.8718 70.8722 0 86.7504 0H994.5ZM27.0004 0C41.9119 0.000169052 54.0004 12.0884 54.0004 27C54.0004 41.9116 41.9119 53.9998 27.0004 54C12.0887 54 0.000366211 41.9117 0.000366211 27C0.000366211 12.0883 12.0887 0 27.0004 0Z");
    display: flex;
    padding: 15px 20px 15px 85px;
    box-sizing: border-box;
    border-radius: 0 30px 30px 30px;
}

.circle {
    position: absolute;
    top: 0;
    left: 0;
    width: 53px;
    height: 53px;
    background: #D5C2FF;
    border-radius: 26.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "NauryzRedKeds", sans-serif;
    font-size: 36px;
    color: #333;
    z-index: 2;
    overflow: visible;
}

.yellow-color{
    background: #FFE343 !important;
}

/* Делаем цифру больше и выходящей за границы */
.circle::after {
    content: attr(data-number);
    position: absolute;
    font-size: 48px; /* Увеличиваем размер цифры */
    font-weight: bold;
    color: #333;
    /* Смещаем цифру влево и вверх */
    left: 10px;
    top: -10px;
    z-index: 3;
}

.frame-text {
    color: #333;
    font-size: 16px;
    line-height: 1.4;
}



.solid-cloud-white{
    display: flex;
    flex-direction: column;
    gap: 20px;

    padding: 32px;
    justify-content: center;

    border: 3px solid #FFE343;

    border-radius: 0 20px 20px 20px;
}

.circulation-cost{
    display: flex;
    justify-content: space-between;
}

.c-c-yellow{
    background-color: #FFE343;
    border-radius: 20px;
    padding: 10px 20px;
}

.arrow-black-frame-text{
    position: relative;
    left: 100px;
    top: -30px;
    width: 40%;
}

#student-cover-tab-2 ~ .cover-tabs-nav label {
  background-color: #FFE343;
  cursor: default;
  font-size: 20px;
  width: 180px;
  height: 60px;
}

.student-cover-tab-2-cover{
    display: block !important;
}

/* Стили для вкладок кардхолдеров */
#cardholder-tab-1:checked ~ .cover-tabs-nav label[for="cardholder-tab-1"],
#cardholder-tab-2:checked ~ .cover-tabs-nav label[for="cardholder-tab-2"] {
  background-color: #FFE343;
  cursor: default;
  font-size: 20px;
  width: 180px;
  height: 60px;
}

/* Показываем активную панель кардхолдеров */
#cardholder-tab-1:checked ~ .cover-tabs-content .cover-tab-pane:nth-child(1),
#cardholder-tab-2:checked ~ .cover-tabs-content .cover-tab-pane:nth-child(2) {
  display: block;
}

/* Стили для кнопки прокрутки наверх */
.scroll-to-top-btn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background-color: #FFE343;
  color: #333;
  border-radius: 50%;
  cursor: pointer;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(255, 227, 67, 0.3);
  transition: all 0.3s ease;
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
}

.scroll-to-top-btn.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.scroll-to-top-btn:hover {
  background-color: #FFD600;
  transform: translateY(-3px);
}

/* Стили для вкладок акрила с блёстками */
#glitter-acrylic-1:checked ~ .stands-tabs-nav label[for="glitter-acrylic-1"],
#glitter-acrylic-2:checked ~ .stands-tabs-nav label[for="glitter-acrylic-2"] {
    background-color: #FFE343;
    cursor: default;
    font-size: 24px;
    width: 175px;
    height: 60px;
}

/* Скрываем таблицы цветного акрила по умолчанию (кроме активных) */
.stands-tabs-content .color-acrylic-tab {
    display: none;
}

/* Показываем активную панель перламутрового акрила */
#color-acrylic-1:checked ~ .stands-tabs-content .color-acrylic-tab:nth-child(1),
#color-acrylic-2:checked ~ .stands-tabs-content .color-acrylic-tab:nth-child(2) {
    display: block !important;
}

/* Показываем активную панель акрила с блёстками */
.stands-tabs-container #glitter-acrylic-1:checked ~ .stands-tabs-content .color-acrylic-tab:nth-child(1),
.stands-tabs-container #glitter-acrylic-2:checked ~ .stands-tabs-content .color-acrylic-tab:nth-child(2),
#glitter-acrylic-1:checked ~ .stands-tabs-content .color-acrylic-tab:first-child,
#glitter-acrylic-2:checked ~ .stands-tabs-content .color-acrylic-tab:last-child {
    display: block !important;
}

.scroll-to-top-btn:active {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(255, 227, 67, 0.3);
}


/* Улучшенные стили для галереи */
.swiper {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.swiper-slide {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

/* Плавная анимация для автопрокрутки */
.swiper-wrapper {
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Улучшенные кнопки навигации */
.swiper-button-next,
.swiper-button-prev {
    transition: all 0.3s ease !important;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    transform: scale(1.1) !important;
    background: #FFE343 !important;
}

/* Индикатор загрузки */
.swiper-lazy-preloader {
    border-color: #7231FF transparent transparent transparent !important;
}

/* Улучшенный пагинатор */
.swiper-pagination-bullet {
    transition: all 0.3s ease !important;
}

.swiper-pagination-bullet-active {
    transform: scale(1.2) !important;
}

/* Галерея - предотвращение конфликтов */
.gallery-modal * {
    box-sizing: border-box;
}

/* Улучшение производительности */
.swiper-slide img {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Стили для вкладок жемчужного акрила */
.pearl-stands-tab {
    display: none;
}

/* Показываем активную панель жемчужного акрила */
#pearl-stands-1:checked ~ .stands-tabs-content .pearl-stands-tab:nth-child(1),
#pearl-stands-2:checked ~ .stands-tabs-content .pearl-stands-tab:nth-child(2) {
    display: block;
}

/* Стили для активной вкладки жемчужного акрила */
#pearl-stands-1:checked ~ .stands-tabs-nav label[for="pearl-stands-1"],
#pearl-stands-2:checked ~ .stands-tabs-nav label[for="pearl-stands-2"],
.stands-tabs-nav label[for="double-1"] {
    background-color: #FFE343;
    cursor: default;
    font-size: 24px;
    width: 175px;
    height: 60px;
}

/* Стили для внутренних вкладок (thickness и stands) */
.thickness-tabs-nav,
.stands-tabs-nav,
.cover-tabs-nav {
    position: relative;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.thickness-tabs-nav::-webkit-scrollbar,
.stands-tabs-nav::-webkit-scrollbar,
.cover-tabs-nav::-webkit-scrollbar {
    display: none;
}

.adress-test{
    display: flex;
    flex-direction: column;
    width: 30%;
    gap: 10px;
}


/* Стили для подсказки скролла таблиц */
.price-table-scroll-hint {
    position: absolute;
    bottom: 15px;
    right: 15px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(114, 49, 255, 0.9);
    color: white;
    padding: 8px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    z-index: 10;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.price-table-scroll-hint.show {
    opacity: 1;
    transform: translateY(0);
}

.price-table-scroll-hint svg {
    width: 14px;
    height: 14px;
    animation: bounce-horizontal 1.5s infinite;
}

@keyframes bounce-horizontal {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(0);
    }
    40% {
        transform: translateX(4px);
    }
    60% {
        transform: translateX(2px);
    }
}

/* Показываем подсказку только на мобильных устройствах с горизонтальным скроллом */
@media (max-width: 650px) {
    .inner-table {
        position: relative;
    }
    
    .price-table-scroll-hint {
        display: flex;
    }
}

/* Скрываем подсказку на больших экранах */
@media (min-width: 651px) {
    .price-table-scroll-hint {
        display: none !important;
    }
}

/* Адаптивные стили для подсказки */
@media (max-width: 576px) {
    .price-table-scroll-hint {
        bottom: 10px;
        right: 10px;
        padding: 6px 10px;
        font-size: 11px;
    }
    
    .price-table-scroll-hint svg {
        width: 12px;
        height: 12px;
    }
}

@media (max-width: 400px) {
    .price-table-scroll-hint {
        bottom: 8px;
        right: 8px;
        padding: 5px 8px;
        font-size: 10px;
    }
}
@media (max-width: 650px) {
    .price-table {
        display: table;
        width: auto;
        min-width: 100%;
    }
    
    .inner-table {
        position: relative;
        overflow: hidden;
        margin-bottom: 10px; /* Добавляем отступ для подсказки */
    }
    
    /* Добавляем контейнер для скролла вокруг каждой таблицы */
    .thickness-tabs-content > div,
    .stands-tabs-content > div,
    .pearl-stands-tab,
    .double-1-tab {
        position: relative;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 5px; /* Место для скроллбара */
    }
    
    /* Стили скроллбара для таблиц */
    .thickness-tabs-content > div::-webkit-scrollbar,
    .stands-tabs-content > div::-webkit-scrollbar {
        height: 6px;
    }
    
    .thickness-tabs-content > div::-webkit-scrollbar-track,
    .stands-tabs-content > div::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
    }
    
    .thickness-tabs-content > div::-webkit-scrollbar-thumb,
    .stands-tabs-content > div::-webkit-scrollbar-thumb {
        background: #7231FF;
        border-radius: 3px;
    }
}

/* Скрываем скроллбар для таблиц с подсказкой */
.thickness-tabs-content > div::-webkit-scrollbar,
.stands-tabs-content > div::-webkit-scrollbar,
.pearl-stands-tab::-webkit-scrollbar,
.double-1-tab::-webkit-scrollbar {
    display: none !important;
}

.thickness-tabs-content > div,
.stands-tabs-content > div,
.pearl-stands-tab,
.double-1-tab {
    -ms-overflow-style: none !important; /* IE и Edge */
    scrollbar-width: none !important; /* Firefox */
}

/* Убираем отступ для скроллбара */
.thickness-tabs-content > div,
.stands-tabs-content > div,
.pearl-stands-tab,
.double-1-tab {
    padding-bottom: 0 !important;
}



/* Стили для анимированных облачков */
.floating-clouds {
    position: absolute;
    top: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    z-index: 10;
    pointer-events: none;
}

.left-clouds {
    left: 0px;
    align-items: flex-start;
}

.right-clouds {
    right: 0px;
    align-items: flex-end;
}

.cloud-wrapper {
 position: absolute;
    animation: swing var(--swing-duration, 8s) ease-in-out infinite;
    animation-delay: calc(var(--delay) + 2.5s); /* Начинаем качание после падения */
    top: var(--distance, 100px);
    width: var(--size, 80px);
    height: var(--size, 80px);
}

.right-mini{
    right: max(20px, var(--right, 100px));
}

.left-mini{
    left: max(20px, var(--left, 100px));
}

.falling-cloud {
    width: 100% !important;
    height: 100% !important;
    animation: fallWithBounce 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: var(--delay);
    opacity: 0;
    transform-origin: top center;
    filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.1));
}

/* Анимация падения с отскоком */
@keyframes fallWithBounce {
    0% {
        opacity: 0;
        transform: translateY(-200px) rotate(0deg) scale(0.8);
    }
    
    60% {
        opacity: 1;
        transform: translateY(0) rotate(0deg) scale(0.95);
    }
    70% {
        transform: translateY(-8px) rotate(-0.5deg) scale(0.98);
    }

    100% {
        opacity: 1;
        transform: translateY(0) rotate(0deg) scale(1);
    }
}

/* Анимация качания на ниточке */
@keyframes swing {
    0%, 100% {
        transform: rotate(-1.5deg) translateX(-1px);
    }
    50% {
        transform: rotate(2deg) translateX(1.5px);
    }
}

/* Анимация пульсации для кнопки "Выбрать фурнитуру" */
@keyframes furniturePulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.03);
    }
}

/* Анимация пульсации для кнопки при наведении */
@keyframes furniturePulseHover {
    0%, 100% {
        transform: translateY(-3px) scale(1.05);
    }
    50% {
        transform: translateY(-3px) scale(1.08);
    }
}

/* Стили для кнопки "Выбрать фурнитуру" */
a.furniture-button.button {
    animation: furniturePulse 3s ease-in-out infinite !important;
    will-change: transform !important;
    transition: none !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Сохраняем hover эффект поверх анимации */
a.furniture-button.button:hover {
    animation: furniturePulseHover 3s ease-in-out infinite !important;
    transition: none !important;
}

a.furniture-button.button:active {
    animation: none !important;
    transform: translateY(1px) scale(0.98) !important;
    transition: none !important;
}

/* Отключаем анимацию для пользователей с prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .furniture-button {
        animation: none;
        will-change: auto;
    }
}

/* Дополнительные эффекты для разнообразия */
.cloud-wrapper:nth-child(odd) .falling-cloud {
    filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.1)) brightness(1.05);
}

.cloud-wrapper:nth-child(even) .falling-cloud {
    filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.1)) brightness(0.95);
}

/* Адаптивные стили для облачков */
@media (max-width: 1400px) {
    .left-clouds {
        left: 10px;
    }
    .right-clouds {
        right: 10px;
    }
    
    .cloud-wrapper {
        --size: calc(var(--size) * 0.9);
    }
}

@media (max-width: 1200px) {
    .left-clouds {
        left: 5px;
    }
    .right-clouds {
        right: 5px;
    }
    
    .cloud-wrapper {
        --size: calc(var(--size) * 0.8);
        --distance: calc(var(--distance) * 0.9);
    }
}

@media (max-width: 1300px) {
    .floating-clouds {
        display: none; /* Скрываем на планшетах и мобильных */
    }
}

/* Для очень больших экранов */
@media (min-width: 1800px) {
    .left-clouds {
        left: calc(50% - 800px);
    }
    .right-clouds {
        right: calc(50% - 800px);
    }
    
    .cloud-wrapper {
        --size: calc(var(--size) * 1.2);
    }
}



/* Стили для сетки цветного акрила */
.color-acrylic-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin: 30px 0 30px 0 ;
    padding: 30px 0 0 0;
}

.color-acrylic-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    text-align: center;
}

.color-acrylic-image {
    width: 100%;
    max-width: 250px;
    max-height: 250px;
    border-radius: 50%;
    overflow: hidden;
    transition: all 0.3s ease;
}

.color-acrylic-image:hover {
    transform: translateY(-5px) scale(1.3);
    border-radius: 10px;
}

.color-acrylic-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.color-acrylic-image:hover img {
    transform: scale(1.05);
}

.color-acrylic-name {
    font-weight: 600;
    font-size: 16px;
    color: #333;
    margin: 0;
    padding: 0 10px;
}

/* Адаптивные стили для сетки */
@media (max-width: 992px) {
    .color-acrylic-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
    
    .color-acrylic-image {
        max-width: 220px;
        max-height: 220px;
    }
}

@media (max-width: 576px) {
    .color-acrylic-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .color-acrylic-image {
        max-width: 250px;
        max-height: 250px;
    }
    
    .color-acrylic-name {
        font-size: 14px;
    }
}

@media (max-width: 400px) {
    .color-acrylic-grid {
        gap: 15px;
    }
    
    .color-acrylic-image {
        max-width: 220px;
        max-height: 220px;
    }
}




/* Стили для контейнера визиток */
.business-card-container {
    display: flex;
    gap: 40px;
    margin-top: 40px;
}

.business-card-gallery {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.business-card-pricing {
    flex: 1;
}

.size-info {
    text-align: center;
    font-weight: 600;
    color: #333;
    padding: 10px;
    background-color: #FFE343;
    border-radius: 20px;
}

/* Стили для вкладок ПЭТ */
.pet-tabs-container {
    position: relative;
}

.pet-tabs-container > input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.pet-tabs-nav {
    display: flex;
    align-items: end;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    height: 70px;
    margin-bottom: -1px;
}

.pet-tabs-nav label {
    display: inline-block;
    padding: 15px 0;
    text-decoration: none;
    text-align: center;
    background: #E0DDEB;
    width: 120px;
    height: 50px;
    margin: 0 3px;
    border: none;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    transition: all 0.15s ease-in-out;
    cursor: pointer;
    flex-shrink: 0;
}

.pet-tabs-nav label:hover {
    height: 55px;
    background: #ded8f3;
}

#pet-thickness-1:checked ~ .pet-tabs-nav label[for="pet-thickness-1"],
#pet-thickness-2:checked ~ .pet-tabs-nav label[for="pet-thickness-2"],
#pet-thickness-3:checked ~ .pet-tabs-nav label[for="pet-thickness-3"] {
    background-color: #FFE343;
    cursor: default;
    font-size: 18px;
    width: 140px;
    height: 60px;
}

.pet-tabs-content {
    position: relative;
    overflow: scroll;
     scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE и Edge */
}

.pet-tab-pane {
    display: none;
}

#pet-thickness-1:checked ~ .pet-tabs-content .pet-tab-pane:nth-child(1),
#pet-thickness-2:checked ~ .pet-tabs-content .pet-tab-pane:nth-child(2),
#pet-thickness-3:checked ~ .pet-tabs-content .pet-tab-pane:nth-child(3) {
    display: block;
}

/* Адаптивные стили */
@media (max-width: 992px) {
    .business-card-container {
        flex-direction: column;
        gap: 30px;
    }
    
    .business-card-gallery,
    .business-card-pricing {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .pet-tabs-nav label {
        width: 100px;
        height: 45px;
        font-size: 14px;
    }
    
    #pet-thickness-1:checked ~ .pet-tabs-nav label[for="pet-thickness-1"],
    #pet-thickness-2:checked ~ .pet-tabs-nav label[for="pet-thickness-2"],
    #pet-thickness-3:checked ~ .pet-tabs-nav label[for="pet-thickness-3"] {
        width: 120px;
        height: 55px;
        font-size: 16px;
    }
}




.photo-coming-soon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    height: auto;
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
    border-radius: 20px;
    border: 3px dashed #7231FF;
    text-align: center;
    padding: 40px 20px; /* Уменьшили боковые отступы */
    gap: 20px;
    flex: 1; /* Занимает доступное пространство */
    box-sizing: border-box;
}

.photo-coming-soon-icon {
    width: 80px;
    height: 80px;
    background-color: #7231FF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    flex-shrink: 0; /* Предотвращает сжатие иконки */
}

.photo-coming-soon-icon svg {
    width: 40px;
    height: 40px;
    fill: white;
    flex-shrink: 0;
}

.photo-coming-soon h3 {
    font-family: "NauryzRedKeds", sans-serif;
    font-size: 32px;
    color: #7231FF;
    margin: 0;
    line-height: 1.2;
}

.photo-coming-soon p {
    font-size: 18px;
    color: #666;
    margin: 0;
    max-width: 300px;
    line-height: 1.4;
}

.business-card-gallery {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 400px; /* Минимальная высота для галереи */
}

.business-card-container {
    display: flex;
    gap: 40px;
    margin-top: 40px;
    align-items: stretch; /* Выравнивание по высоте */
}

@media (max-width: 992px) {
    .business-card-container {
        flex-direction: column;
        gap: 30px;
    }
    
    .photo-coming-soon {
        min-height: 250px;
        padding: 30px 15px;
    }
    
    .photo-coming-soon h3 {
        font-size: 28px;
    }
    
    .photo-coming-soon p {
        font-size: 16px;
    }
    
    .business-card-gallery {
        min-height: 300px;
    }
}

@media (max-width: 768px) {
    .photo-coming-soon {
        min-height: 200px;
        padding: 25px 15px;
        gap: 15px;
    }
    
    .photo-coming-soon-icon {
        width: 60px;
        height: 60px;
    }
    
    .photo-coming-soon-icon svg {
        width: 30px;
        height: 30px;
    }
    
    .photo-coming-soon h3 {
        font-size: 24px;
    }
    
    .photo-coming-soon p {
        font-size: 14px;
        max-width: 250px;
    }
}

@media (max-width: 576px) {
    .photo-coming-soon {
        min-height: 180px;
        padding: 20px 10px;
        gap: 12px;
    }
    
    .photo-coming-soon-icon {
        width: 50px;
        height: 50px;
        margin-bottom: 5px;
    }
    
    .photo-coming-soon-icon svg {
        width: 25px;
        height: 25px;
    }
    
    .photo-coming-soon h3 {
        font-size: 20px;
    }
    
    .photo-coming-soon p {
        font-size: 13px;
        max-width: 200px;
    }
    
    .business-card-gallery {
        min-height: 250px;
    }
}

/* Для очень маленьких экранов */
@media (max-width: 400px) {
    .photo-coming-soon {
        min-height: 150px;
        padding: 15px 8px;
    }
    
    .photo-coming-soon h3 {
        font-size: 18px;
    }
    
    .photo-coming-soon p {
        font-size: 12px;
    }
}


.business-card-pricing {
    flex: 1;
    min-width: 0;
}

.pet-tabs-container {
    position: relative;
    min-width: 0; 
}

.price-table {
    width: 100%;
}


/* Стили для активной вкладки закладок */
#bookmarks-thickness-1:checked ~ .pet-tabs-nav label[for="bookmarks-thickness-1"],
#bookmarks-thickness-2:checked ~ .pet-tabs-nav label[for="bookmarks-thickness-2"],
#bookmarks-thickness-3:checked ~ .pet-tabs-nav label[for="bookmarks-thickness-3"] {
    background-color: #FFE343;
    cursor: default;
    font-size: 18px;
    width: 140px;
    height: 60px;
}

/* Показываем активную панель закладок */
#bookmarks-thickness-1:checked ~ .pet-tabs-content .pet-tab-pane:nth-child(1),
#bookmarks-thickness-2:checked ~ .pet-tabs-content .pet-tab-pane:nth-child(2),
#bookmarks-thickness-3:checked ~ .pet-tabs-content .pet-tab-pane:nth-child(3) {
    display: block;
}

/* Стили для активной вкладки форматов */
#formats-thickness-1:checked ~ .pet-tabs-nav label[for="formats-thickness-1"],
#formats-thickness-2:checked ~ .pet-tabs-nav label[for="formats-thickness-2"],
#formats-thickness-3:checked ~ .pet-tabs-nav label[for="formats-thickness-3"] {
    background-color: #FFE343;
    cursor: default;
    font-size: 18px;
    width: 140px;
    height: 60px;
}

/* Показываем активную панель форматов */
#formats-thickness-1:checked ~ .pet-tabs-content .pet-tab-pane:nth-child(1),
#formats-thickness-2:checked ~ .pet-tabs-content .pet-tab-pane:nth-child(2),
#formats-thickness-3:checked ~ .pet-tabs-content .pet-tab-pane:nth-child(3) {
    display: block;
}

.new-gap{
    gap: 80px;
}

.photo-coming-soon-icon svg circle {
    fill: #7231FF;
}

/* Эффект выделения строки при наведении на ячейку таблицы */
.price-table tbody tr {
    transition: background-color 0.2s ease;
}

.price-table tbody tr:hover {
    background-color: rgba(114, 49, 255, 0.08);
}

.price-table td {
    transition: background-color 0.2s ease;
}

.price-table td:hover {
    background-color: rgba(114, 49, 255, 0.12);
}

/* Выделение заголовков при наведении на строку */
.price-table th {
    transition: background-color 0.2s ease;
}

/* Отключаем подсветку заголовков при наведении на строку */
.price-table tbody tr:hover th {
    background-color: inherit;
}

/* Стили для индикаторов прокрутки таблиц */
.table-scroll-indicators {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: rgba(114, 49, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease;
    color: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.table-scroll-indicators:hover {
    background: rgba(114, 49, 255, 1);
    transform: translateY(-50%) scale(1.1);
}

.table-scroll-indicators.show {
    opacity: 1;
}

.table-scroll-indicator-left {
    left: 10px;
}

.table-scroll-indicator-right {
    right: 10px;
}

/* Стили для обертки скролла таблиц */
.price-table-scroll-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.price-table-scroll-wrapper::-webkit-scrollbar {
    display: none;
}

/* Стили для индикаторов вкладок */
.tab-scroll-indicators,
.pet-tabs-scroll-indicators {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background: rgba(114, 49, 255, 0.8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease;
    color: white;
    font-size: 14px;
    font-weight: bold;
}

.tab-scroll-indicators:hover,
.pet-tabs-scroll-indicators:hover {
    background: rgba(114, 49, 255, 1);
    transform: translateY(-50%) scale(1.1);
}

.tab-scroll-indicators.show,
.pet-tabs-scroll-indicators.show {
    opacity: 1;
}

.tab-scroll-indicator-left,
.pet-tabs-scroll-indicator-left {
    left: 5px;
}

.tab-scroll-indicator-right,
.pet-tabs-scroll-indicator-right {
    right: 5px;
}

/* Выделение столбца при наведении на ячейку */
.price-table .column-highlight {
    background-color: rgba(114, 49, 255, 0.1) !important;
    transition: background-color 0.2s ease;
}

/* Убираем выделение для первого столбца (столбец с тиражом) */
.price-table .column-highlight:first-child {
    background-color: inherit !important;
}

/* Отключаем подсветку заголовков при выделении столбца */
.price-table th.column-highlight {
    background-color: var(--color-accent) !important;
}

/*========================================
  УТИЛИТАРНЫЕ КЛАССЫ
  ========================================*/

/* Flexbox утилиты */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }

/* Отступы */
.gap-xs { gap: var(--spacing-xs); }
.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }
.gap-xl { gap: var(--spacing-xl); }

/* Текст */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-white { color: var(--color-text-white); }
.text-primary { color: var(--color-primary); }
.text-accent { color: var(--color-accent); }
.font-bold { font-weight: 600; }

/* Фон */
.bg-primary { background-color: var(--color-primary); }
.bg-accent { background-color: var(--color-accent); }
.bg-white { background-color: var(--color-text-white); }
.bg-light { background-color: var(--color-bg-light); }

/* Скругления */
.rounded-sm { border-radius: var(--border-radius-sm); }
.rounded { border-radius: var(--border-radius); }
.rounded-lg { border-radius: var(--border-radius-lg); }
.rounded-full { border-radius: var(--border-radius-round); }

/* Тени */
.shadow { box-shadow: var(--shadow-default); }
.shadow-button { box-shadow: var(--shadow-button); }

/* Переходы */
.transition { transition: var(--transition-default); }
.transition-fast { transition: var(--transition-fast); }

/* Скрытие */
.hidden { display: none; }
.invisible { visibility: hidden; opacity: 0; }

/* Размеры */
.w-full { width: 100%; }
.h-full { height: 100%; }
.w-fit { width: fit-content; }

/* Позиционирование */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }

/* Курсор */
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }

/* Базовый класс для вкладок навигации */
.tabs-nav-base {
    display: flex;
    align-items: flex-end;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.tabs-nav-base::-webkit-scrollbar {
    display: none;
}

/* Базовый класс для лейблов вкладок */
.tabs-label-base {
    display: inline-block;
    text-decoration: none;
    text-align: center;
    background: var(--color-bg-light);
    border: none;
    border-top-left-radius: var(--border-radius-sm);
    border-top-right-radius: var(--border-radius-sm);
    transition: var(--transition-fast);
    cursor: pointer;
    flex-shrink: 0;
}

.tabs-label-base:hover {
    background: var(--color-bg-light-hover);
}

/* Базовый класс для активных лейблов вкладок */
.tabs-label-active {
    background-color: var(--color-accent);
    cursor: default;
}

/* Базовый класс для контента вкладок */
.tabs-content-base {
    position: relative;
    overflow: hidden;
}

/* Базовый класс для панелей вкладок */
.tabs-pane-base {
    display: none;
}

.tabs-pane-base.active {
    display: block;
}

/* =============================================
   Навигация
   ============================================= */
.main-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 28px;
    margin-top: 20px;
    margin-bottom: 32px;
    position: relative;
    z-index: 1;
    /* Glassmorphism Effect */
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 2px solid rgba(255, 255, 255, 1);
    border-radius: 50px;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.nav-links {
    display: flex;
    gap: 8px;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    border-radius: 30px;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

.nav-link i {
    font-size: 16px;
}

.nav-link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: white;
    border-color: rgba(255, 255, 255, 0.15);
}

.nav-link.active {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border-color: rgba(255, 255, 255, 0.25);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Иконка аккаунта - круглая */
.nav-actions .nav-link {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
}

.nav-actions .nav-link span {
    display: none;
}

.nav-actions .nav-link i {
    margin: 0;
    font-size: 18px;
}

/* Аватар в навигации */
.nav-actions .nav-link img,
.nav-actions .nav-link.account-link-avatar img {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    flex-shrink: 0;
}

.nav-actions .nav-link.account-link-avatar {
    padding: 0;
    overflow: hidden;
}

.nav-actions .nav-link.account-link-avatar i {
    display: none;
}

.nav-cart {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 18px;
    border-radius: 50%;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

.nav-cart:hover {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
}

.cart-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    background: #FF4444;
    color: white;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    box-sizing: border-box;
    line-height: 18px;
    text-align: center;
}

/* =============================================
   Footer (подвал сайта)
   ============================================= */
.footer {
    margin-top: 40px;
    position: relative;
    z-index: 1;
    /* Glass Effect - светлое стекло с blur */
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 2px solid rgba(255, 255, 255, 1);
    border-radius: 30px;
    padding: 28px 32px;
    color: white;
    box-shadow: 
        0 -4px 30px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.footer-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 32px;
    margin-bottom: 20px;
}

.footer-links {
    display: flex;
    gap: 8px;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    padding: 10px 16px;
    border-radius: 20px;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

.footer-links a:hover {
    color: white;
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.footer-social {
    display: flex;
    gap: 10px;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top-color: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.85);
    font-size: 20px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: white;
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.footer-copyright {
    text-align: center;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* =============================================
   Снегопад
   ============================================= */
#snowfall-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.snowflake {
    position: absolute;
    background: white;
    border-radius: 50%;
    will-change: transform;
    animation: snowfall linear infinite;
    animation-duration: var(--snowfall-duration, 5s);
    animation-delay: var(--snowfall-delay, 0s);
}

@keyframes snowfall {
    0% {
        transform: translateY(0) translateX(calc(var(--snowfall-drift, 0px) * 0));
        opacity: 1;
    }
    6.25% {
        transform: translateY(6.25vh) translateX(calc(var(--snowfall-drift, 0px) * 0.0625 + var(--snowfall-swing-amplitude, 20px) * 0.382683));
    }
    12.5% {
        transform: translateY(12.5vh) translateX(calc(var(--snowfall-drift, 0px) * 0.125 + var(--snowfall-swing-amplitude, 20px) * 0.707107));
    }
    18.75% {
        transform: translateY(18.75vh) translateX(calc(var(--snowfall-drift, 0px) * 0.1875 + var(--snowfall-swing-amplitude, 20px) * 0.92388));
    }
    25% {
        transform: translateY(25vh) translateX(calc(var(--snowfall-drift, 0px) * 0.25 + var(--snowfall-swing-amplitude, 20px) * 1));
    }
    31.25% {
        transform: translateY(31.25vh) translateX(calc(var(--snowfall-drift, 0px) * 0.3125 + var(--snowfall-swing-amplitude, 20px) * 0.92388));
    }
    37.5% {
        transform: translateY(37.5vh) translateX(calc(var(--snowfall-drift, 0px) * 0.375 + var(--snowfall-swing-amplitude, 20px) * 0.707107));
    }
    43.75% {
        transform: translateY(43.75vh) translateX(calc(var(--snowfall-drift, 0px) * 0.4375 + var(--snowfall-swing-amplitude, 20px) * 0.382683));
    }
    50% {
        transform: translateY(50vh) translateX(calc(var(--snowfall-drift, 0px) * 0.5));
    }
    56.25% {
        transform: translateY(56.25vh) translateX(calc(var(--snowfall-drift, 0px) * 0.5625 - var(--snowfall-swing-amplitude, 20px) * 0.382683));
    }
    62.5% {
        transform: translateY(62.5vh) translateX(calc(var(--snowfall-drift, 0px) * 0.625 - var(--snowfall-swing-amplitude, 20px) * 0.707107));
    }
    68.75% {
        transform: translateY(68.75vh) translateX(calc(var(--snowfall-drift, 0px) * 0.6875 - var(--snowfall-swing-amplitude, 20px) * 0.92388));
    }
    75% {
        transform: translateY(75vh) translateX(calc(var(--snowfall-drift, 0px) * 0.75 - var(--snowfall-swing-amplitude, 20px) * 1));
    }
    81.25% {
        transform: translateY(81.25vh) translateX(calc(var(--snowfall-drift, 0px) * 0.8125 - var(--snowfall-swing-amplitude, 20px) * 0.92388));
    }
    87.5% {
        transform: translateY(87.5vh) translateX(calc(var(--snowfall-drift, 0px) * 0.875 - var(--snowfall-swing-amplitude, 20px) * 0.707107));
    }
    93.75% {
        transform: translateY(93.75vh) translateX(calc(var(--snowfall-drift, 0px) * 0.9375 - var(--snowfall-swing-amplitude, 20px) * 0.382683));
    }
    100% {
        transform: translateY(100vh) translateX(calc(var(--snowfall-drift, 0px) * 1));
        opacity: 0.3;
    }
}