/* ==================================== */
/* 1. Общие стили и типографика */
/* ==================================== */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --primary-color: #ff4747; /* AliExpress Red */
    --accent-color: #ffaa00; /* Amber/Yellow for Copy Button */
    --success-color: #00b050; /* Green for Active Status */
    --text-color: #2c3e50;
    --light-bg: #f5f7fa;
    --white: #ffffff;
    --border-color: #e0e6ed;
    --shadow-color: rgba(0, 0, 0, 0.05);
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--light-bg);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

a {
    text-decoration: none;
    color: var(--primary-color);
}

/* ==================================== */
/* 2. Шапка и Навигация */
/* ==================================== */

.header {
    background-color: var(--white);
    border-bottom: 3px solid var(--primary-color);
    box-shadow: 0 4px 6px var(--shadow-color);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0;
}

.logo-name {
    font-size: 30px;
    font-weight: 800;
    color: var(--primary-color);
}

.logo-slogan {
    font-size: 14px;
    color: #95a5a6;
    margin-left: 8px;
}

.main-nav ul {
    list-style: none;
    display: flex;
}

.main-nav li a {
    color: var(--text-color);
    padding: 10px 18px;
    font-weight: 600;
    transition: color 0.2s;
}

.main-nav li a:hover {
    color: var(--primary-color);
}

.lang-switch {
    font-size: 14px;
    color: #7f8c8d;
}

/* Подменю (Sub-Navigation) */
.sub-nav {
    background-color: #ecf0f1;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}

.sub-nav ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.sub-nav li a {
    color: #555;
    font-size: 13px;
    padding: 5px 0;
}

/* ==================================== */
/* 3. Основной Контент и Заголовки */
/* ==================================== */

.main-content {
    padding: 40px 20px;
}

.intro-section h1 {
    font-size: 36px;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 10px;
}

.intro-section p {
    font-size: 18px;
    color: #7f8c8d;
    margin-bottom: 40px;
}

/* **НОВЫЙ БЛОК: РЕКОМЕНДОВАННЫЕ ТОВАРЫ** */

.featured-products {
    margin-bottom: 50px;
}

.featured-products h2 {
    font-size: 26px;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--border-color);
}

.product-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.product-card {
    display: block;
    background-color: var(--white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px var(--shadow-color);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.product-card img {
    width: 100%;
    height: auto;
    display: block;
}

.product-info {
    padding: 10px;
}

.product-price {
    display: block;
    font-size: 18px;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 4px;
}

.product-name {
    font-size: 14px;
    color: var(--text-color);
    margin: 0;
    line-height: 1.3;
}

/* Конец НОВОГО БЛОКА */


/* Категории (Filters) */
.category-filter h2 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 15px;
}

.categories {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 40px;
}

.cat-btn {
    padding: 10px 20px;
    border: 2px solid var(--border-color);
    background-color: var(--white);
    cursor: pointer;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.cat-btn:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

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

/* ==================================== */
/* 4. Группы Промокодов и Карточки */
/* ==================================== */

.promocode-group {
    margin-bottom: 50px;
}

.promocode-group h2 {
    font-size: 26px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 2px dashed var(--border-color);
}

.promocode-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 25px;
}

.promocode-card {
    background-color: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 10px 20px var(--shadow-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.promocode-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.promo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.promo-value {
    font-size: 40px;
    font-weight: 800;
    color: var(--success-color);
}

.promo-status {
    padding: 6px 12px;
    background-color: var(--success-color);
    color: var(--white);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
}

.promo-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
}

.promo-description {
    font-size: 15px;
    color: #7f8c8d;
    margin-bottom: 20px;
}

.promo-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
}

.btn {
    text-decoration: none;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    font-size: 15px;
    border: none;
    width: 100%;
}

.actual-code {
    display: block;
    text-align: center;
    padding: 10px 15px;
    margin-bottom: 5px;
    
    background-color: #ffe8cc;
    color: var(--text-color);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
    border-radius: 6px;
    border: 1px dashed var(--accent-color);
    cursor: default;
    user-select: all;
    order: -1;
}

.copy-btn {
    background-color: var(--accent-color);
    color: var(--white);
}

.copy-btn:hover {
    background-color: #e69500;
    transform: translateY(-2px);
}

.go-btn {
    background-color: var(--primary-color);
    color: var(--white);
}

.go-btn:hover {
    background-color: #e63838;
    transform: translateY(-2px);
}


/* Футер */
/* ========================================= */
/* Стили для Футера */
/* ========================================= */

.footer {
    background-color: #222; /* Темный фон для футера */
    color: #bbb;
    padding: 40px 0 20px 0;
    font-size: 14px;
}

.footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* Распределяем колонки по ширине */
    gap: 30px; /* Отступ между секциями */
}

.footer-section {
    flex: 1 1 200px; /* Позволяет секциям занимать минимум 200px и растягиваться */
    padding: 0 10px;
}

.footer-section h3 {
    color: #fff; /* Белый цвет для заголовков */
    font-size: 16px;
    margin-bottom: 15px;
    font-weight: 700;
    border-bottom: 1px solid #333; /* Небольшой разделитель */
    padding-bottom: 5px;
}

.footer-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-section ul li {
    margin-bottom: 8px;
}

.footer-section a {
    color: #bbb;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-section a:hover {
    color: #ff471a; /* Цвет при наведении - акцентный цвет сайта */
}

/* Секция с копирайтом и дисклеймером */
.footer-info {
    flex: 1 1 100%; /* Занимает всю ширину под колонками */
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #333;
    text-align: center;
}

.copyright-info {
    font-weight: 600;
    margin-bottom: 10px;
    color: #ccc;
}

.disclaimer {
    font-size: 12px;
    line-height: 1.6;
    color: #777;
}

/* Медиа-запрос для адаптации на маленьких экранах */
@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        gap: 20px;
    }
    .footer-section {
        border-bottom: 1px dashed #333;
        padding-bottom: 15px;
        text-align: center;
    }
    .footer-section:last-child {
        border-bottom: none;
    }
}
.product-list {
    display: grid;
    /* Теперь grid оперирует обертками, а не только карточками <a> */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

/* Обертка для карточки и кнопки */
.product-card-wrapper {
    display: flex; /* Делаем содержимое flex-контейнером */
    flex-direction: column; /* Располагаем элементы вертикально */
    background-color: var(--white);
    border-radius: 8px;
    box-shadow: 0 4px 10px var(--shadow-color);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
}

/* Убираем лишние отступы/тени с основной ссылки, переносим их на wrapper */
.product-card {
    display: block;
    text-decoration: none;
    color: var(--text-color);
    flex-grow: 1; /* Чтобы карточка занимала все доступное место */
}

/* Эффект при наведении теперь на обертке */
.product-card-wrapper:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.product-card img {
    width: 100%;
    height: auto;
    display: block;
}

.product-info {
    padding: 10px;
    flex-grow: 1; 
}

/* Контейнер для цен */
.price-box {
    display: flex;
    align-items: baseline; /* Выравнивание по нижнему краю */
    margin-bottom: 5px;
}

/* Старая, перечеркнутая цена */
.product-old-price {
    font-size: 14px;
    color: #95a5a6; /* Серый цвет для неактуальной цены */
    text-decoration: line-through;
    margin-right: 8px; /* Небольшой отступ от новой цены */
}

/* Актуальная, новая цена */
.product-price {
    display: inline; /* Теперь inline, чтобы быть рядом со старой ценой */
    font-size: 20px; /* Делаем новую цену крупнее */
    font-weight: 800;
    color: var(--primary-color);
}

.product-name {
    font-size: 14px;
    color: var(--text-color);
    margin: 0;
    line-height: 1.3;
}

/* Стиль для новой кнопки "Купить сейчас" */
.buy-now-btn {
    /* Наследование базовых стилей кнопки */
    display: block;
    width: 100%;
    text-align: center;
    padding: 10px 15px;
    background-color: var(--accent-color); /* Используем акцентный цвет */
    color: var(--white);
    font-weight: 700;
    border-radius: 0 0 8px 8px; /* Закругляем только нижние углы */
    transition: background-color 0.2s;
    border-top: 1px solid rgba(0, 0, 0, 0.1); /* Небольшая линия-разделитель */
}

.buy-now-btn:hover {
    background-color: #e69500;
    text-decoration: none;
}
.delivery-options, .delivery-process, .delivery-notes {
    margin-top: 40px;
    padding: 20px;
    background-color: var(--white);
    border-radius: 8px;
    box-shadow: 0 2px 5px var(--shadow-color);
}

.delivery-options h2, .delivery-process h2, .delivery-notes h2 {
    color: var(--primary-color);
    border-bottom: 2px solid var(--light-gray);
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* Блок с вариантами доставки (для бесплатной и платной) */
.delivery-block {
    margin-bottom: 25px;
    padding: 15px;
    background-color: #f7f9fa; /* Светло-серый фон */
    border-radius: 6px;
    border-left: 5px solid var(--accent-color);
}

.delivery-block h3 {
    margin-top: 0;
    color: var(--text-color);
    font-size: 18px;
}

.delivery-block ul {
    list-style: none;
    padding-left: 0;
}

.delivery-block li {
    margin-bottom: 8px;
    line-height: 1.5;
}

/* Карточки для платной доставки */
.option-card {
    display: inline-block;
    padding: 15px;
    margin-right: 15px;
    margin-bottom: 15px;
    background-color: var(--white);
    border: 1px solid var(--light-gray);
    border-radius: 4px;
    vertical-align: top;
    max-width: 300px;
}

.option-card h4 {
    color: var(--accent-color);
    margin-top: 0;
    font-size: 16px;
}

/* Стили для списка шагов (Как оформить) */
.step-list {
    list-style: none;
    padding-left: 0;
}

.step-list li {
    counter-increment: step-counter;
    margin-bottom: 20px;
    padding-left: 40px;
    position: relative;
    font-size: 16px;
}

.step-list li::before {
    content: counter(step-counter);
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 30px;
    background-color: var(--primary-color);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}

.step-list h4 {
    margin-top: 0;
    color: var(--text-color);
}

/* Стили для списка предупреждений */
.warning-list {
    list-style: disc;
    padding-left: 20px;
}

.warning-list li {
    margin-bottom: 10px;
    line-height: 1.6;
    color: #cc0000; /* Красный цвет для важных заметок */
}

.warning-list li strong {
    color: var(--text-color); /* Основной текст остается темным */
}
.status-list {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
}

/* Переопределение стилей для карточек статусов */
.status-list .option-card {
    /* Чтобы карточки занимали примерно одинаковое место */
    flex: 1 1 200px; 
    border-left: 5px solid var(--light-gray); /* Базовая граница */
    max-width: none;
    margin-right: 0;
}

.status-list .option-card h4 {
    color: var(--text-color);
}

/* Цвета для специальных статусов */
.status-list .status-important {
    border-left-color: var(--primary-color); /* Красный для важного (Отправлен) */
}

.status-list .status-cancelled {
    border-left-color: #cc0000; /* Темно-красный для отмены */
}

.status-list .status-success {
    border-left-color: #00b050; /* Зеленый для успеха (Доставлен) */
}
.tracking-services .service-main {
    border-left-color: var(--primary-color); /* Красный акцент */
    background-color: #ffeaea;
}

/* Сервисы-агрегаторы */
.tracking-services .service-aggregator {
    border-left-color: var(--accent-color); /* Желтый акцент */
    background-color: #fff8e1;
}

.tracking-services .option-card h4 {
    font-weight: 700;
}
/* ==================================== */
/* СТИЛИЗАЦИЯ СТРАНИЦЫ КАТАЛОГА */
/* ==================================== */

/* Сетка для основных категорий */
.category-grid {
    display: flex;
    gap: 20px;
    margin-bottom: 40px;
}

.category-column {
    flex: 1;
    padding: 20px;
    background-color: var(--white);
    border-radius: 8px;
    box-shadow: 0 2px 5px var(--shadow-color);
}

.category-column h3 {
    color: var(--primary-color);
    margin-top: 0;
}

.main-list {
    list-style: none;
    padding-left: 0;
    column-count: 2; /* Разбиваем список на 2 колонки */
    column-gap: 20px;
}

.main-list li {
    margin-bottom: 8px;
    break-inside: avoid; /* Чтобы элементы списка не разрывались между колонками */
}

.main-list a {
    color: var(--text-color);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s;
}

.main-list a:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

/* Стили для детализированных категорий */
.detailed-categories {
    margin-top: 40px;
}
/* ==================================== */
/* СТИЛИЗАЦИЯ КОМПАКТНОГО КАТАЛОГА (ОБЩИЕ ПРАВИЛА ДЛЯ ВСЕХ КАТЕГОРИЙ) */
/* ==================================== */

/* Контейнер для списка, который должен быть в колонках */
.compact-list ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
    
    /* Основные свойства для создания колонок */
    column-count: 3;
    column-gap: 30px; 
}

.compact-list ul li {
    margin-bottom: 10px;
    padding: 0;
    /* Важно: предотвращаем разрыв элемента списка между колонками */
    break-inside: avoid; 
}

/* Стилизация ссылок внутри компактного списка */
.compact-list ul li a {
    color: var(--text-color); 
    text-decoration: none;
    font-size: 16px; 
    display: inline; 
    padding: 0; 
    margin: 0;
    border-bottom: 1px solid transparent; 
    transition: border-color 0.2s, color 0.2s;
}

.compact-list ul li a:hover {
    color: var(--primary-color); 
    border-bottom-color: var(--primary-color); 
    background-color: transparent; 
}

/* Удаляем избыточные стили, если они были применены к родительским <li> */
.category-compact .subcategory-group {
    margin-bottom: 0; 
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .compact-list ul {
        column-count: 2; /* На мобильных делаем 2 колонки */
        column-gap: 20px;
    }
}
.category-detail-block {
    margin-bottom: 30px;
    padding: 20px;
    background-color: #f7f9fa;
    border-left: 5px solid var(--accent-color);
    border-radius: 6px;
}

.category-detail-block h3 {
    color: var(--primary-color);
    margin-top: 0;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

.subcategory-group {
    margin-bottom: 15px;
}

.subcategory-group h4 {
    color: var(--text-color);
    font-size: 16px;
    margin-bottom: 5px;
}

.subcategory-group ul {
    list-style: none;
    padding-left: 0;
    margin-top: 5px;
    display: flex; /* Используем flexbox для горизонтального расположения */
    flex-wrap: wrap;
    gap: 8px 15px; /* Вертикальный и горизонтальный отступ */
}

.subcategory-group ul li {
    font-size: 14px;
    color: #555;
    background-color: var(--white);
    padding: 4px 10px;
    border-radius: 3px;
    border: 1px solid #eee;
    cursor: pointer;
    transition: background-color 0.2s;
}

.subcategory-group ul li:hover {
    background-color: #e0e0e0;
}

/* Медиа-запрос для адаптивности (чтобы не было 3 колонок на мобильных) */
@media (max-width: 768px) {
    .category-grid {
        flex-direction: column;
    }

    .main-list {
        column-count: 1;
    }
}
.subcategory-group ul li a {
    color: #555; /* Цвет текста, как был у <li> */
    text-decoration: none; /* Убираем подчеркивание */
    display: block; /* Занимает всю область <li> */
    padding: 4px 10px; /* Для кликабельности (можно убрать из <li>) */
    margin: -4px -10px; /* Компенсируем отступы, чтобы ссылка занимала всю карточку */
}

.subcategory-group ul li a:hover {
    color: var(--text-color); /* Чуть темнее при наведении */
}

/* Переносим стили кнопки с <li> на <a> */
.subcategory-group ul li {
    /* Удаляем лишние стили с <li>, которые теперь есть у <a> */
    padding: 0; 
    border: none;
    background-color: transparent;
}

/* Убедимся, что hover работает на <li> */
.subcategory-group ul li:hover {
    background-color: transparent; /* Отключаем hover на <li>, если он был */
}

/* Делаем hover-эффект на <a>, который находится в <li> */
.subcategory-group ul li:hover a {
    background-color: #e0e0e0;
    border-radius: 3px;
}

/* Стилизация ссылок в заголовках */
.category-detail-block h3 a {
    color: var(--primary-color);
    text-decoration: none;
}

.category-detail-block h3 a:hover {
    text-decoration: underline;
}
/* ==================================== */
/* СТИЛИЗАЦИЯ БАННЕРНОЙ КАРТИНКИ НА ГЛАВНОЙ СТРАНИЦЕ */
/* ==================================== */

.main-banner-image-section {
    margin-bottom: 30px; /* Отступ от основного контента */
    overflow: hidden; /* Чтобы изображение не вылезало за контейнер */
}

.main-banner-image-section .container {
    padding: 0; /* Удаляем внутренние отступы, чтобы баннер прилегал к краям */
}

.main-banner-image-section .banner-link {
    display: block; /* Делаем ссылку блочным элементом, чтобы она занимала всю ширину изображения */
    line-height: 0; /* Убираем лишний отступ под изображением */
}

.main-banner-image-section .responsive-banner-image {
    width: 100%; /* Изображение будет занимать всю доступную ширину */
    height: auto; /* Высота подстроится пропорционально */
    display: block; /* Убираем лишние отступы у изображения */
    border-radius: 8px; /* Немного скруглим углы, если нужно */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Легкая тень для объема */
    margin-top: 10px;
}

/* На более маленьких экранах можно уменьшить скругление или убрать тень */
@media (max-width: 768px) {
    .main-banner-image-section .responsive-banner-image {
        border-radius: 0;
        box-shadow: none;
        margin-top: 10px;
    }
    .main-banner-image-section {
        margin-bottom: 20px;
    }
}
/* ========================================= */
/* Стили для Калькулятора Доставки */
/* ========================================= */
.shipping-calculator {
    padding: 40px 0;
    background-color: #f7f7f7; /* Светлый фон для выделения секции */
    border-top: 1px solid #ddd;
    margin-top: 30px;
}

.shipping-calculator h2 {
    text-align: center;
    color: #000;
    margin-bottom: 10px;
}

.shipping-calculator p {
    text-align: center;
    color: #666;
    margin-bottom: 25px;
}

.calculator-form {
    justify-content: center;
    align-items: flex-end; /* Выравнивает поля по нижнему краю, где-то может быть разница из-за стилей */
    gap: 20px;
    max-width: 900px;
    margin: 0 auto 30px;
    padding: 20px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.form-group {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.form-group label {
    font-weight: 600;
    margin-bottom: 5px;
    color: #333;
}

.calculator-form input[type="text"],
.calculator-form select {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    width: 100%; /* Занимает всю ширину в flex-контейнере */
}

#calculate-btn {
    /* Наследует стили buy-now-btn, но можно подкорректировать */
    padding: 10px 25px;
    flex-shrink: 0; /* Не позволяет кнопке сжиматься */
    height: 40px; /* Выравниваем по высоте полей ввода */
    line-height: 1; /* Для лучшего выравнивания текста внутри кнопки */
}

/* Стили для результатов */
#calculation-result {
    max-width: 900px;
    margin: 20px auto 0;
    padding: 20px;
    border: 2px solid #ff471a; /* Цвет AliExpress */
    border-radius: 8px;
    background-color: #fff8f5; /* Светло-оранжевый фон для результатов */
    text-align: center;
}

#calculation-result h3 {
    color: #ff471a;
    margin-top: 0;
    font-size: 24px;
}

#calculation-result p {
    margin: 8px 0;
    color: #333;
    font-size: 16px;
}

.result-placeholder {
    font-style: italic;
    color: #999 !important;
}

/* Адаптация для мобильных устройств */
@media (max-width: 768px) {
    .calculator-form {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
        padding: 15px;
    }
    #calculate-btn {
        width: 100%;
        height: auto;
        margin-top: 10px;
    }
}
/* ========================================= */
/* Стили для страницы Как Заказывать (how-to-order.html) */
/* ========================================= */

.order-guide-page {
    /* Чтобы контент не был слишком широким для удобства чтения */
    max-width: 900px;
    padding-top: 30px;
}

.order-guide-section h1 {
    color: #333;
    font-size: 36px;
    text-align: center;
    margin-bottom: 20px;
}

.intro-description-guide {
    font-size: 18px;
    text-align: center;
    margin-bottom: 40px;
    padding: 15px;
    background-color: #f0f8ff; /* Светло-голубой фон для акцента */
    border-left: 5px solid #ff471a;
    border-radius: 4px;
}

.step-by-step-guide h2 {
    color: #ff471a;
    font-size: 24px;
    margin-top: 30px;
    border-bottom: 1px solid #ff471a;
    padding-bottom: 5px;
}

.step-by-step-guide ul,
.step-by-step-guide ol {
    margin-left: 20px;
    padding-left: 0;
}

.step-by-step-guide li {
    margin-bottom: 8px;
}

.important-notes-section {
    margin-top: 40px;
    padding: 20px;
    border: 1px solid #fdd; 
    border-radius: 6px;
    background-color: #fffafa; /* Очень светлый розовый/красный для внимания */
}

.important-notes-section h2 {
    color: #cc0000; /* Более темный красный для предупреждения */
    border-bottom: 1px solid #fdd;
}
/* ... (Ваши предыдущие стили для order-guide-page) ... */


/* ========================================= */
/* Стили для кнопки Регистрации (how-to-order.html) */
/* ========================================= */

.register-button-wrapper {
    text-align: center; /* Центрируем кнопку */
    margin-top: 50px;
    margin-bottom: 20px;
}

.register-now-btn {
    padding: 15px 30px; /* Делаем кнопку больше */
    font-size: 18px; /* Увеличиваем шрифт */
    font-weight: 700;
    /* Используем тот же оранжевый, что и для покупки */
    background-color: #ff471a; 
    border-color: #ff471a;
    border-radius: 6px;
    /* Убедимся, что она широкая на небольших экранах */
    display: inline-block; 
    max-width: 100%;
}

.register-now-btn:hover {
    background-color: #e04018;
    border-color: #e04018;
}

/* Адаптация для мобильных устройств, чтобы кнопка занимала всю ширину */
@media (max-width: 600px) {
    .register-now-btn {
        width: 100%; /* На маленьких экранах на всю ширину */
        box-sizing: border-box;
    }
}
/* ========================================= */
/* Стили для страницы Новостей (news.html) */
/* ========================================= */

.news-page {
    padding-top: 30px;
}

.news-list-section h1 {
    color: #333;
    text-align: center;
    margin-bottom: 10px;
}

.news-intro-text {
    text-align: center;
    color: #777;
    font-size: 16px;
    margin-bottom: 40px;
}

.news-grid {
    display: grid;
    /* 3 колонки на больших экранах, с минимальной шириной 300px */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

.news-card {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden; /* Обрезает изображение по радиусу */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.3s;
    display: flex;
    flex-direction: column;
}

.news-card:hover {
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

.news-card-image {
    width: 100%;
    height: 200px; /* Фиксированная высота для всех изображений */
    object-fit: cover; /* Изображение будет покрывать всю область, не растягиваясь */
}

.news-card-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Чтобы кнопки всегда были внизу */
}

.news-date {
    display: block;
    font-size: 12px;
    color: #999;
    margin-bottom: 10px;
    text-transform: uppercase;
    font-weight: 600;
}

.news-card-content h2 {
    font-size: 20px;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 10px;
    line-height: 1.3;
    border-bottom: none; /* Убираем черту h2 из карточки */
}

.news-card-content p {
    font-size: 15px;
    color: #555;
    margin-bottom: 15px;
    flex-grow: 1; /* Распирает контент */
}

/* Кнопка "Читать полностью" */
.news-card .go-btn {
    align-self: flex-start; /* Прижимаем кнопку к левому краю */
    margin-top: auto; /* Прижимает кнопку к низу карточки */
    padding: 8px 15px;
    font-size: 13px;
    border: 1px solid #ff471a;
    color: #ff471a;
    background-color: #fff;
}
.news-card .go-btn:hover {
    background-color: #fff4f1;
}

/* Стили для пагинации */
.pagination {
    text-align: center;
    margin: 30px 0 50px;
    font-size: 16px;
}

.pagination a, .pagination span {
    display: inline-block;
    padding: 8px 15px;
    margin: 0 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #333;
    text-decoration: none;
}

.pagination a:hover {
    background-color: #f0f0f0;
    border-color: #aaa;
}

.pagination .current-page {
    background-color: #ff471a;
    color: #fff;
    border-color: #ff471a;
    font-weight: 700;
}

.pagination .disabled {
    opacity: 0.5;
    pointer-events: none;
}
/* ========================================= */
/* Стили для SEO-текста */
/* ========================================= */

.seo-text-section {
    margin-top: 60px;
    padding: 30px;
    background-color: #f7f7f7; /* Светлый фон, чтобы отделить от остального контента */
    border-radius: 8px;
    color: #555;
    line-height: 1.6;
}

.seo-text-title {
    font-size: 24px;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
    border-bottom: 2px solid #ddd;
    padding-bottom: 10px;
}

.seo-text-section p {
    margin-bottom: 15px;
    font-size: 15px;
}

.seo-text-section ul {
    margin-left: 25px;
    padding-left: 0;
    list-style-type: square;
    margin-bottom: 20px;
}

.seo-text-section li {
    margin-bottom: 5px;
    font-size: 15px;
}

/* Выделяем ключевые слова внутри текста, чтобы они были видны пользователю */
.seo-text-section p strong {
    color: #ff471a;
}
/* ========================================= */
/* Стили для страницы "О нас" (about.html) */
/* ========================================= */

.about-page {
    max-width: 900px; /* Ограничиваем ширину для лучшего чтения */
    padding-top: 30px;
}

.about-info-section h1 {
    text-align: center;
    font-size: 32px;
    margin-bottom: 25px;
}

.about-info-section h2 {
    font-size: 24px;
    margin-top: 40px;
    margin-bottom: 15px;
    color: #ff471a; /* Основной акцентный цвет */
    border-bottom: 1px solid #ff471a;
    padding-bottom: 5px;
}

.about-info-section p {
    line-height: 1.6;
    margin-bottom: 15px;
    color: #444;
}

.team-list p {
    margin: 5px 0;
    padding-left: 20px;
    color: #333;
}

.timeline p {
    margin: 10px 0;
    padding-left: 20px;
    border-left: 3px solid #ff471a;
    background-color: #fffaf0; /* Легкий фон для таймлайна */
    padding: 10px;
    border-radius: 4px;
}
.timeline strong {
    color: #333;
    font-weight: 700;
}


/* ========================================= */
/* Стили для формы обратной связи */
/* ========================================= */

.contact-form-section {
    background-color: #f7f7f7;
    padding: 30px;
    border-radius: 8px;
    margin-top: 40px;
    border: 1px solid #eee;
}

.feedback-form .form-group {
    margin-bottom: 20px;
}

.feedback-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
}

.feedback-form input[type="text"],
.feedback-form input[type="email"],
.feedback-form select,
.feedback-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* Учитываем padding и border в общей ширине */
    font-size: 16px;
    font-family: 'Inter', sans-serif;
}

.feedback-form textarea {
    resize: vertical;
}

.feedback-form select {
    appearance: none; /* Убираем стандартную стрелку в Chrome/FF */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M287%2069.4L154.1%20202.3%2021.4%2069.4c-4.2-4.2-11-4.2-15.2%200-4.2%204.2-4.2%2011%200%2015.2l141.4%20141.4c2.1%202.1%204.9%203.1%207.6%203.1s5.5-1%207.6-3.1L287%2084.6c4.2-4.2%204.2-11%200-15.2-4.2-4.2-11-4.2-15.2%200z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 10px top 50%;
    background-size: 10px auto;
}

.feedback-form input:focus,
.feedback-form select:focus,
.feedback-form textarea:focus {
    border-color: #ff471a;
    outline: none;
    box-shadow: 0 0 5px rgba(255, 71, 26, 0.3);
}

.submit-btn {
    width: 100%;
    background-color: #ff471a;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 700;
    transition: background-color 0.3s;
}

.submit-btn:hover {
    background-color: #cc3915;
}

.form-note {
    text-align: center;
    font-size: 12px;
    color: #777;
    margin-top: 15px;
}
/* ========================================= */
/* Стили для страницы Контактов AliExpress */
/* ========================================= */

.aliexpress-contacts-page {
    max-width: 900px;
    padding-top: 30px;
    line-height: 1.6;
}

.contacts-info-section h1 {
    text-align: center;
    font-size: 32px;
    margin-bottom: 10px;
}

.contacts-info-section h2 {
    font-size: 24px;
    margin-top: 35px;
    margin-bottom: 15px;
    color: #333;
    border-bottom: 2px solid #ff471a;
    padding-bottom: 5px;
}

.contacts-info-section h3 {
    font-size: 18px;
    margin-top: 25px;
    margin-bottom: 10px;
    color: #ff471a;
}

.contacts-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 15px;
}

.contacts-table th,
.contacts-table td {
    border: 1px solid #ddd;
    padding: 10px 15px;
    text-align: left;
}

.contacts-table th {
    background-color: #f0f0f0;
    font-weight: 700;
    color: #333;
}

.contacts-table a {
    color: #1a73e8; /* Синий для ссылок */
    text-decoration: none;
}
.contacts-table a:hover {
    text-decoration: underline;
}

.contacts-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

.table-note, .table-note-small {
    font-size: 13px;
    color: #777;
    margin-top: -10px;
    margin-bottom: 20px;
}

.address-box {
    padding: 15px;
    background-color: #fffaf0;
    border-left: 5px solid #ff471a;
    margin: 15px 0 25px 0;
    font-weight: 600;
    color: #333;
}

.note-box {
    padding: 10px;
    background-color: #e6f7ff;
    border: 1px solid #91d5ff;
    border-radius: 4px;
    margin: 15px 0;
    font-size: 15px;
}

.warning-note {
    font-weight: 600;
    color: #d83a3a;
    background-color: #ffebe6;
    padding: 10px;
    border-radius: 4px;
    margin: 20px 0;
    border: 1px solid #d83a3a;
}
/* ========================================= */
/* Стили для секции FAQ (Частые вопросы) */
/* ========================================= */

.faq-section {
    margin-top: 60px;
    margin-bottom: 60px;
    padding: 20px 0;
    /* Убедитесь, что .container имеет нужную ширину */
}

.faq-section h2 {
    font-size: 28px;
    font-weight: 700;
    color: #333;
    margin-bottom: 30px;
    text-align: center;
}

.faq-item {
    border: 1px solid #eee;
    border-radius: 8px;
    margin-bottom: 15px;
    overflow: hidden;
    background-color: #fff; /* Фон всего блока */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.faq-question {
    font-size: 18px;
    font-weight: 600;
    padding: 15px 20px;
    margin: 0;
    cursor: pointer;
    /* Фон вопроса - светло-серый для выделения кликабельной области */
    background-color: #f9f9f9; 
    color: #ff471a; /* Акцентный цвет для текста вопроса */
    border-bottom: 1px solid #eee;
    transition: background-color 0.3s;
    
    /* Стили для индикатора раскрытия */
    position: relative; 
    padding-right: 40px; 
    user-select: none;
}

.faq-question:hover {
    background-color: #fff3f0; /* Более светлый акцент при наведении */
}

/* -------------------- */
/* Индикатор (Стрелка) */
/* -------------------- */

.faq-question::after {
    content: '+'; /* Знак плюса в закрытом состоянии */
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    line-height: 1;
    color: #333;
    transition: transform 0.3s, content 0.3s;
}

/* Индикатор в активном состоянии (минус) */
.faq-question.active::after {
    content: '—'; /* Знак минуса в открытом состоянии */
    /* Убираем вращение, так как используем чистый символ "—" */
    transform: translateY(-50%) rotate(0deg); 
}

/* -------------------- */
/* Скрытие/Отображение Ответа */
/* -------------------- */

/* Скрытие ответа по умолчанию (нужен JS, который добавляет/убирает классы) */
.faq-answer.hidden {
    display: none; 
    /* Используем max-height и opacity для плавной анимации */
    max-height: 0; 
    opacity: 0;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
}

/* Отображение ответа при активном вопросе */
.faq-answer.open {
    display: block;
    max-height: 1000px; /* Достаточно большое значение для анимации */
    opacity: 1;
    /* ФОН ОТВЕТА - ЧИСТО БЕЛЫЙ */
    background-color: #ffffff; 
    transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in;
}

.faq-answer {
    padding: 20px;
    /* ФОН ОТВЕТА БЕЛЫЙ, даже если класс 'open' не сработал полностью */
    background-color: #ffffff; 
}

.faq-answer p {
    line-height: 1.6;
    margin-bottom: 15px;
    color: #555;
    font-size: 15px;
}
/* ------------------------------------------- */
/* 2. БАЗОВЫЕ СТИЛИ ДЛЯ МОБИЛЬНОГО МЕНЮ (НАЧАЛО) */
/* ------------------------------------------- */

/* Скрываем кнопку-бургер по умолчанию на больших экранах */
.burger-menu-toggle {
    display: none;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 101; /* Поверх всего */
}

/* На мобильных устройствах, скрываем обычное меню по умолчанию */
.main-nav {
    /* Если меню горизонтальное, его нужно будет переделать */
    display: flex; /* Предполагая, что у вас оно горизонтальное */
    /* ... другие стили для desktop-меню ... */
}


/* ------------------------------------------- */
/* 3. MEDIA QUERY - СТИЛИ ДЛЯ МОБИЛЬНЫХ ЭКРАНОВ */
/* ------------------------------------------- */

@media (max-width: 768px) { /* Точка перехода на мобильную версию */
    
    .header-content {
        justify-content: space-between; /* Лого слева, бургер справа */
    }

    /* 1. Настройка кнопки-бургера */
    .burger-menu-toggle {
        display: block; /* Показываем кнопку-бургер */
        width: 30px;
        height: 30px;
        position: relative;
    }
    
    .burger-icon, 
    .burger-icon::before, 
    .burger-icon::after {
        content: '';
        display: block;
        width: 100%;
        height: 3px;
        background-color: #333; /* Цвет иконки */
        border-radius: 2px;
        position: absolute;
        left: 0;
        transition: all 0.3s ease-in-out;
    }

    .burger-icon {
        top: 50%;
        transform: translateY(-50%);
    }

    .burger-icon::before {
        top: -10px;
    }

    .burger-icon::after {
        top: 10px;
    }

    /* Стиль при открытом меню (класс добавляется через JS) */
    .burger-menu-toggle[aria-expanded="true"] .burger-icon {
        background-color: transparent; /* Центральная линия исчезает */
    }

    .burger-menu-toggle[aria-expanded="true"] .burger-icon::before {
        transform: translateY(10px) rotate(45deg);
    }

    .burger-menu-toggle[aria-expanded="true"] .burger-icon::after {
        transform: translateY(-10px) rotate(-45deg);
    }

    /* 2. Стилизация самого меню */
    .main-nav {
        /* Начальное скрытое состояние: */
        display: none; 
        position: absolute;
        top: 10%; /* Под шапкой */
        left: 0;
        width: 100%;
        background-color: #fff; /* Фон меню */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        z-index: 100;
        padding: 10px 0;
        flex-direction: column; /* Элементы вертикально */
    }
    
    /* Состояние, когда меню открыто (класс добавляется через JS) */
    .main-nav.is-open {
        display: flex;
    }

    .main-nav ul {
        display: flex;
        flex-direction: column;
        padding: 0;
        margin: 0;
    }

    .main-nav li {
        width: 100%;
        text-align: center;
        border-bottom: 1px solid #f0f0f0;
    }

    .main-nav li a {
        display: block;
        padding: 15px 20px;
        text-decoration: none;
        color: #333;
        font-weight: 600;
    }
    
    .main-nav li a:hover {
        background-color: #f5f5f5;
    }
}