/* ========================================
   ANDROID TV СТИЛИ - MOBILE-FIRST
   ======================================== */

/* Подключение локальных шрифтов */
@font-face {
    font-family: 'Coolvetica';
    src: url('../fonts/Coolvetica/coolvetica rg.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Use Montserrat if available */
@font-face {
    font-family: 'MontserratLocal';
    src: url('../fonts/Montserrat/static/Montserrat-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Montserrat SemiBold (600) */
@font-face {
    font-family: 'MontserratLocal';
    src: url('../fonts/Montserrat/static/Montserrat-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* Montserrat ExtraBold (800) */
@font-face {
    font-family: 'MontserratLocal';
    src: url('../fonts/Montserrat/static/Montserrat-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* Montserrat Semibold for androidtv-info block */
@font-face {
    font-family: 'MontserratSemibold';
    src: url('../fonts/Montserrat/static/Montserrat-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* Montserrat Semibold Italic (Mixed) for androidtv-info block */
@font-face {
    font-family: 'MontserratSemiboldItalic';
    src: url('../fonts/Montserrat/static/Montserrat-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

/* ========================================
   CSS ПЕРЕМЕННЫЕ
   ======================================== */
:root {
    --ink-dark: #1e1b2e;
    --accent-highlight: #c9b6ff;
    --accent-rgb: 123, 66, 246;
    --accent-gradient: linear-gradient(135deg, #5f32c8 0%, #7b42f6 52%, #9b7cff 100%);
    --hero-gradient: linear-gradient(155deg, #1a1528 0%, #2a2242 38%, #402066 68%, #6130b8 92%, #7b42f6 100%);
    --purple-accent: #a78bfa;
    --purple-medium: #7b42f6;
    --purple-gradient: var(--hero-gradient);
    --transition-fast: 0.2s ease-out;
    --shadow-heavy: 0 20px 50px rgba(30, 27, 46, 0.14);
    --transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reset and base styles - как в style.css */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Гарантируем белый фон страницы вне зависимости от глобальных стилей */
html {
    overflow-x: hidden;
    max-width: 100%;
}

html, body {
    background: #ffffff !important;
    background-image: none !important;
    color: #000000 !important;
    min-height: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
    max-width: 100%;
}

/* Remove any gaps between sections - как в style.css */
section {
    display: block;
    margin: 0;
    padding: 0;
}

section + section {
    margin-top: 0;
}

/* Heat Image Menu Styles - Mobile First */
.heat-image {
    position: fixed;
    top: 15px; /* отступ от верха для мобильных */
    right: 15px; /* отступ от правого края для мобильных */
    width: auto;
    height: auto;
    z-index: 5;
}

.page-favicon {
    position: absolute;
    top: 3px; /* отступ от верха heat.png для мобильных */
    right: 18px; /* отступ от правого края heat.png */
    width: 26px; /* ширина из Figma */
    height: 25px; /* высота из Figma */
    z-index: 15; /* поверх heat.png */
}

.questions-image {
    position: absolute;
    top: 4px; /* отступ от верха heat.png */
    left: 70px; /* отступ от левого края heat.png */
    width: 29px;
    height: 27px;
    z-index: 16; /* поверх всех элементов */
    cursor: pointer;
}

.menu-image {
    position: absolute;
    top: 5px; /* отступ от верха heat.png */
    left: 17px; /* отступ от левого края heat.png */
    width: 24px; /* фиксированный размер как у menu.png */
    height: 24px; /* фиксированный размер как у menu.png */
    z-index: 17; /* поверх всех элементов */
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.menu-image:hover {
    opacity: 0.8;
}

/* Menu open state - same styles as menu-image */
.menu-image.menu-open {
    position: absolute;
    top: 5px; /* отступ от верха heat.png */
    left: 17px; /* отступ от левого края heat.png */
    width: 24px; /* фиксированный размер как у menu.png */
    height: 24px; /* фиксированный размер как у menu.png */
    z-index: 17; /* поверх всех элементов */
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.menu-image.menu-open:hover {
    opacity: 0.8;
}

/* Dropdown Menu Styles */
.dropdown-menu {
    position: absolute;
    top: 38px; /* 5px (иконка) + 24px (высота иконки) + 6px (отступ) + 3px (сдвиг вниз) */
    left: 0px; /* сдвиг влево для мобильных */
    z-index: 20;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.dropdown-menu.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.dropdown-menu-content {
    background: white;
    border-radius: 17px; /* как в Figma */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    padding: 12px 0;
    width: 119px; /* размер из Figma для мобильных */
    height: 145px; /* размер из Figma для мобильных */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.dropdown-menu-item {
    display: block;
    padding: 8px 12px; /* уменьшенные отступы для компактности */
    color: #000000;
    text-decoration: none;
    font-family: 'Coolvetica', Arial, sans-serif; /* шрифт Coolvetica */
    font-size: 10px; /* размер из Figma */
    font-weight: 700; /* жирный черный */
    line-height: 1.2; /* уменьшенная высота строки */
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    position: relative;
    border-radius: 8px;
    margin: 1px 4px; /* уменьшенные отступы */
    outline: none; /* убираем обводку при фокусе */
    -webkit-tap-highlight-color: transparent; /* убираем подсветку на мобильных */
    -webkit-appearance: none; /* убираем стандартные стили на мобильных */
    -moz-appearance: none; /* убираем стандартные стили на мобильных */
    appearance: none; /* убираем стандартные стили */
}

/* AndroidTV hero block (mobile-first) */
.androidtv-hero {
    margin: 60px 20px 20px 20px;
    /* Более светлая база и тонкий линейный overlay сверху, как в Figma */
    background:
        linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.00) 18%),
        linear-gradient(180deg, #2b2c2d 0%, #222324 40%, #141515 100%);
    border-radius: 36px;
    padding: 28px 28px 0px 28px;
    color: #ffffff;
    font-family: 'MontserratLocal', 'Montserrat', Arial, sans-serif;
    /* только внутренняя тень (inset) */
    box-shadow: inset 0 18px 40px rgba(255,255,255,0.03);
    position: relative;
    isolation: isolate; /* ограничиваем blend-mode локально */
    overflow: visible;
}

/* Верхняя мягкая подсветка / glow — вынесена в отдельный слой для точной подгонки под Figma */
.androidtv-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 1; /* ниже текста, выше фоновой заливки */
    /* Радиальный градиент в процентах — масштабируется вместе с блоком.
       Меньше blur и lower opacity + overlay дают более похожий на Figma результат */
    background: radial-gradient(40% 24% at 18% 8%,
        rgba(255,255,255,0.085) 0%,
        rgba(255,255,255,0.00) 35%);
    filter: blur(6px);
    mix-blend-mode: overlay; /* ближе к Figma для мягкой подсветки */
    opacity: 0.6;
}

/* Лёгкое затемнение по краям (виниетирование) — даёт глубину как в Figma */
.androidtv-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 2;
    /* Виньетка/затемнение по краям — ослабляем, чтобы блок был серее, не чёрнее */
    background: radial-gradient(120% 80% at 50% 100%,
        rgba(0,0,0,0.00) 0%,
        rgba(0,0,0,0.12) 60%,
        rgba(0,0,0,0.28) 100%);
    mix-blend-mode: multiply;
    opacity: 0.6;
}

.androidtv-hero-inner {
    z-index: 10; /* текст и кнопки должны рендериться поверх псевдоэлементов */
}
.androidtv-hero-inner {
    display: block;
    position: relative;
}
.androidtv-hero-text {
    width: 100%;
    box-sizing: border-box;
    padding-right: 20px;
}
.androidtv-hero-title {
    font-family: 'MontserratLocal', 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 1.06;
    margin: 6px 0 18px 0;
    letter-spacing: -0.4px;
    color: #ffffff;
}
/* ensure title uses full block width and wraps normally (three lines provided via <br>) */
.androidtv-hero-title {
    display: block;
    width: 100%;
    white-space: normal;
    word-break: break-word;
    line-height: 1.06;
}
.androidtv-hero-features {
    list-style: none;
    padding: 0;
    margin: 6px 0 20px 0;
    color: #BFBFC0;
    font-size: 15px;
    line-height: 1.45;
}
.androidtv-hero-features li {
    margin: 14px 0;
    padding-left: 28px;
    position: relative;
}
.androidtv-hero-features li:before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    width: 20px;
    height: 20px;
    display: inline-block;
    background-image: url('/static/images/androidtv/done.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.androidtv-buy-btn {
    display: inline-block;
    background: #ff6b00;
    color: white;
    padding: 16px 26px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 700;
    font-family: 'MontserratLocal', 'Montserrat', Arial, sans-serif;
    font-size: 18px;
    box-shadow: 0 6px 18px rgba(255,107,0,0.18);
    position: absolute;
    bottom: 36px;
    left: 36px;
}
.androidtv-hero-image {
    position: absolute;
    right: 60px;
    bottom: 0;
    width: 220px;
    height: auto;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.androidtv-hero-image img {
    width: 300px;
    /* Allow moving the image inside the hero block via CSS variables:
       --androidtv-hero-image-top: positive = down, negative = up
       --androidtv-hero-image-right: positive = leftwards (moves image left when using right), negative = rightwards
       You can override these in media queries or inline styles. */
    position: relative;
    top: var(--androidtv-hero-image-top, 0px);
    right: var(--androidtv-hero-image-right, 33px);
    height: auto;
    display: block;
    z-index: 31;
    object-fit: contain;
}

@media (min-width: 769px) {
    .androidtv-hero {
        padding: 36px 44px 48px 44px;
    }
    .androidtv-hero-title {
        font-size: 48px;
    }
    .androidtv-hero-image {
        right: 4%;
        bottom: 0;
        width: 460px;
    }
    .androidtv-hero-image img {
        width: 1260px;
    }
}

/* tweak: increase hero height and create space for image; clamp feature text to 3 lines */
.androidtv-hero {
    min-height: 580px;
}
.androidtv-hero-title {
    /* make explicit line breaks spacing comfortable */
    margin-bottom: 22px;
}
.androidtv-hero-features li {
    margin: 14px 0;
    padding-left: 28px;
    position: relative;
    /* allow normal wrapping, no ellipsis */
    overflow: visible;
    text-overflow: clip;
}

@media (min-width: 769px) {
    .androidtv-hero {
        min-height: 620px;
    }
    .androidtv-hero-title {
        font-size: 64px;
        line-height: 1.02;
    }
}

/* Ensure hero text wraps naturally (no ellipsis) */
.androidtv-hero-text .androidtv-hero-title,
.androidtv-hero-text p,
.androidtv-hero-text .androidtv-hero-features li,
.androidtv-hero-text .cart-item-placeholder {
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
}

/* Расширение для планшетов и больших экранов */
@media (min-width: 769px) {
    .heat-image {
        top: 20px; /* отступ от верха для десктопа */
        right: 50px; /* отступ от правого края для десктопа */
        transform: scale(1.5);
        transform-origin: top right;
    }
    
    .page-favicon {
        top: 5px; /* отступ от верха heat.png для десктопа */
        right: 18px; /* отступ от правого края heat.png */
        width: 26px;
        height: 25px;
    }
    
    .questions-image {
        top: 4px; /* отступ от верха heat.png для десктопа */
        left: 70px; /* отступ от левого края heat.png */
    }
    
    .menu-image {
        top: 5px; /* отступ от верха heat.png для десктопа */
        left: 17px; /* отступ от левого края heat.png */
    }
    
    .menu-image.menu-open {
        top: 5px; /* отступ от верха heat.png для десктопа */
        left: 17px; /* отступ от левого края heat.png */
    }
    
    .dropdown-menu {
        top: 38px; /* позиция для десктопа */
        left: 7px; /* позиция для десктопа */
    }
    
    .dropdown-menu-content {
        width: 160px; /* размер для десктопа */
        height: 180px; /* размер для десктопа */
        padding: 20px 0;
    }
    
    .dropdown-menu-item {
        padding: 8px 12px;
        font-size: 10px;
        font-weight: 700;
    }
}

/* Cart Button Styles - Mobile First */
.cart-button {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px; /* размер для мобильных */
    height: 60px; /* размер для мобильных */
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-heavy);
    transition: var(--transition-smooth);
    z-index: 9999;
    border: none;
}

.cart-button:hover {
    background: #f8f9fa;
    box-shadow: 0 15px 40px rgba(196, 148, 90, 0.4);
}

.cart-icon {
    width: 28px; /* размер для мобильных */
    height: 28px; /* размер для мобильных */
    filter: brightness(0) saturate(100%) invert(0%);
}

.cart-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--purple-medium);
    color: white;
    border-radius: 50%;
    width: 22px; /* размер для мобильных */
    height: 22px; /* размер для мобильных */
    display: none !important; /* Скрываем бейдж по умолчанию */
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    border: 2px solid white;
    transition: var(--transition-fast);
    text-align: center;
    box-sizing: border-box;
}

.cart-badge.hidden {
    display: none;
}

/* Favorites Button - размещаем над кнопкой корзины */
.favorites-button {
    bottom: 100px !important; /* Размещаем над кнопкой корзины для мобильных */
}

/* Расширение для планшетов и больших экранов */
@media (min-width: 769px) {
    .cart-button {
        width: 70px; /* размер для десктопа - как в style.css */
        height: 70px; /* размер для десктопа - как в style.css */
        bottom: 30px;
        right: 30px;
    }
    
    .cart-icon {
        width: 32px; /* размер для десктопа - как в style.css */
        height: 32px; /* размер для десктопа - как в style.css */
    }
    
    .cart-badge {
        width: 24px; /* размер для десктопа - как в style.css */
        height: 24px; /* размер для десктопа - как в style.css */
        font-size: 0.8rem; /* размер для десктопа - как в style.css */
    }
    
    .favorites-button {
        bottom: 120px !important; /* Размещаем над кнопкой корзины для десктопа */
    }
}

/* Modal basics to ensure cart modal looks correct when loaded dynamically */
.modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    align-items: center;
    justify-content: center;
}

.modal-content {
    background-color: #ffffff;
    margin: auto;
    padding: 0;
    border-radius: 20px;
    width: 90%;
    max-width: 900px;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
    animation: modalSlideIn 0.26s ease-out;
    position: relative;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   CONTACT & COOPERATION MODALS (копия из style.css)
   чтобы модалки на androidtv.html были 1 в 1 как на index.html
   ======================================== */

/* Общие мобильные стили для модального окна контактов */
@media (max-width: 768px) {
    .contact-modal, .contact-modal *,
    .contact-modal h2, .contact-modal p,
    .contact-modal .contact-link,
    .contact-modal .contact-text,
    .contact-modal .contact-value,
    .contact-modal .btn-primary {
        font-family: 'Coolvetica', Arial, sans-serif !important;
    }
    
    /* Переопределение стилей кнопки в модальном окне контактов */
    .contact-actions .btn-primary,
    .contact-actions .contact-close-btn {
        background: #8471CC !important;
        color: white !important;
        border: none !important;
        border-radius: 30px !important;
        font-family: 'Coolvetica', Arial, sans-serif !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        min-height: 48px !important;
        min-width: 80px !important;
        max-width: 120px !important;
        width: auto !important;
        padding: 14px 20px !important;
        display: inline-block !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    /* Переопределение стилей кнопки в модальном окне сотрудничества - идентично контактам */
    .cooperation-actions .btn-primary,
    .cooperation-actions .cooperation-close-btn {
        background: #8471CC !important;
        color: white !important;
        border: none !important;
        border-radius: 30px !important;
        font-family: 'Coolvetica', Arial, sans-serif !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        min-height: 48px !important;
        min-width: 80px !important;
        max-width: 120px !important;
        width: auto !important;
        padding: 14px 20px !important;
        display: inline-block !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
    }
}

/* COOPERATION MODAL (десктоп/база) */
.cooperation-modal .modal-content {
    max-width: 450px;
    text-align: center;
    padding: 1.5rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.cooperation-header h2 {
    color: #333;
    margin-bottom: 0.5rem;
    font-size: 1.4rem;
}

.cooperation-header p {
    color: #666;
    font-size: 0.95rem;
    margin-bottom: 1rem;
    line-height: 1.4;
}

.cooperation-content .contact-info h3 {
    color: #333;
    margin-bottom: 0.75rem;
    font-size: 1rem;
}

.cooperation-content .contact-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.cooperation-content .contact-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 8px;
    text-decoration: none;
    color: #333;
    transition: all 0.3s ease;
    text-align: left;
}

.cooperation-content .contact-link:hover {
    background: #e9ecef;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.cooperation-content .contact-icon {
    font-size: 1.3rem;
    min-width: 25px;
}

.cooperation-content .contact-text {
    font-weight: 500;
    font-size: 0.9rem;
}

.cooperation-content .contact-value {
    color: #007bff;
    font-weight: 600;
    font-size: 0.85rem;
}

.cooperation-actions {
    margin-top: 1.5rem;
}

.cooperation-actions .btn-primary,
.cooperation-actions .cooperation-close-btn {
    background: #8471CC;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 30px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Coolvetica', Arial, sans-serif;
    min-width: 80px;
    max-width: 120px;
    width: auto;
    display: inline-block;
}

.cooperation-actions .btn-primary:hover,
.cooperation-actions .cooperation-close-btn:hover {
    background: #6b5a9a;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(132, 113, 204, 0.3);
}

.cooperation-actions .cooperation-close-btn {
    position: relative;
    z-index: 10001;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* CONTACT MODAL (десктоп/база) */
.contact-modal .modal-content {
    max-width: 450px;
    text-align: center;
    padding: 1.5rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Coolvetica', Arial, sans-serif;
}

.contact-header h2 {
    color: #333;
    margin-bottom: 0.5rem;
    font-size: 1.4rem;
    font-family: 'Coolvetica', Arial, sans-serif;
}

.contact-actions {
    margin-top: 1.5rem;
}

.contact-actions .btn-primary {
    background: #8471CC;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 30px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Coolvetica', Arial, sans-serif;
    min-width: 80px;
    max-width: 120px;
    width: auto;
    display: inline-block;
}

.contact-actions .btn-primary:hover {
    background: #6b5a9a;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(132, 113, 204, 0.3);
}

.contact-actions .btn-primary,
.contact-actions .contact-close-btn {
    background: #8471CC;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 30px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Coolvetica', Arial, sans-serif;
    min-width: 80px;
    max-width: 120px;
    width: auto;
    display: inline-block;
}

.contact-actions .btn-primary:hover,
.contact-actions .contact-close-btn:hover {
    background: #6b5a9a;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(132, 113, 204, 0.3);
}

.contact-actions .contact-close-btn {
    position: relative;
    z-index: 10001;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.contact-header p {
    color: #666;
    font-size: 0.95rem;
    margin-bottom: 1rem;
    line-height: 1.4;
    font-family: 'Coolvetica', Arial, sans-serif;
}

.contact-content .contact-info h3 {
    color: #333;
    margin-bottom: 0.75rem;
    font-size: 1rem;
    font-family: 'Coolvetica', Arial, sans-serif;
}

.contact-content .contact-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.contact-content .contact-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 8px;
    text-decoration: none;
    color: #333;
    transition: all 0.3s ease;
    font-family: 'Coolvetica', Arial, sans-serif;
}

.contact-content .contact-link:hover {
    background: #e9ecef;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.contact-content .contact-icon {
    font-size: 1.3rem;
    min-width: 24px;
    text-align: center;
}

.contact-content .contact-text {
    flex: 1;
    font-size: 0.9rem;
    font-weight: 500;
    font-family: 'Coolvetica', Arial, sans-serif;
}

.contact-content .contact-value {
    color: #007bff;
    font-weight: 600;
    font-size: 0.85rem;
    font-family: 'Coolvetica', Arial, sans-serif;
}

/* Адаптивность для модального окна контактов (копия из style.css) */
@media (max-width: 768px) {
    .contact-modal .modal-content {
        max-width: 90vw;
        padding: 1rem;
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-family: 'Coolvetica', Arial, sans-serif;
    }
    
    .contact-header h2 {
        font-size: 1.2rem;
        margin-bottom: 0.4rem;
        font-family: 'Coolvetica', Arial, sans-serif;
    }
    
    .contact-header p {
        font-size: 0.9rem;
        margin-bottom: 0.8rem;
        font-family: 'Coolvetica', Arial, sans-serif;
    }
    
    .contact-content .contact-info h3 {
        font-size: 0.95rem;
        margin-bottom: 0.6rem;
        font-family: 'Coolvetica', Arial, sans-serif;
    }
    
    .contact-actions .btn-primary,
    .contact-actions .contact-close-btn {
        background: #8471CC !important;
        color: white !important;
        border: none !important;
        min-height: 48px;
        min-width: 80px;
        max-width: 120px;
        width: auto;
        font-size: 1rem;
        font-weight: 600;
        padding: 14px 20px;
        border-radius: 30px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        font-family: 'Coolvetica', Arial, sans-serif;
        display: inline-block;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .contact-content .contact-links {
        gap: 0.4rem;
        margin-bottom: 0.8rem;
    }
    
    .contact-content .contact-link {
        padding: 0.6rem;
        gap: 0.5rem;
        font-family: 'Coolvetica', Arial, sans-serif;
    }
    
    .contact-content .contact-icon {
        font-size: 1.2rem;
        min-width: 22px;
    }
    
    .contact-content .contact-text {
        font-size: 0.85rem;
        font-family: 'Coolvetica', Arial, sans-serif;
    }
    
    .contact-content .contact-value {
        font-size: 0.8rem;
        font-family: 'Coolvetica', Arial, sans-serif;
    }
}

/* Адаптивность для модального окна сотрудничества (копия из style.css) */
@media (max-width: 768px) {
    .cooperation-modal .modal-content {
        max-width: 90vw;
        padding: 1rem;
        margin: 1rem;
    }
    
    .cooperation-header h2 {
        font-size: 1.2rem;
        margin-bottom: 0.4rem;
    }
    
    .cooperation-header p {
        font-size: 0.9rem;
        margin-bottom: 0.8rem;
    }
    
    .cooperation-content .contact-info h3 {
        font-size: 0.95rem;
        margin-bottom: 0.6rem;
    }
    
    .cooperation-content .contact-links {
        gap: 0.4rem;
        margin-bottom: 0.8rem;
    }
    
    .cooperation-content .contact-link {
        padding: 0.6rem;
        gap: 0.5rem;
    }
    
    .cooperation-content .contact-icon {
        font-size: 1.2rem;
        min-width: 22px;
    }
    
    .cooperation-content .contact-text {
        font-size: 0.85rem;
    }
    
    .cooperation-content .contact-value {
        font-size: 0.8rem;
    }
    
    .cooperation-actions .btn-primary,
    .cooperation-actions .cooperation-close-btn {
        background: #8471CC !important;
        color: white !important;
        border: none !important;
        min-height: 48px;
        min-width: 80px;
        max-width: 120px;
        width: auto;
        font-size: 1rem;
        font-weight: 600;
        padding: 14px 20px;
        border-radius: 30px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        font-family: 'Coolvetica', Arial, sans-serif;
        display: inline-block;
        cursor: pointer;
        transition: all 0.3s ease;
    }
}

/* ========================================
   ANDROID TV INFO SECTION (строки 65-73)
   Изолированные стили, не влияют на hero блок
   ======================================== */
.androidtv-info {
    margin: 40px 20px;
    padding: 0;
}

.androidtv-info-inner {
    text-align: center;
    max-width: 100%;
    margin: 0 auto;
}

/* Заголовок - SemiBold (как в Figma: 30px, line-height 27px) */
.androidtv-info-title {
    font-family: 'MontserratSemibold', 'Montserrat', Arial, sans-serif;
    font-weight: 600;
    font-size: 30px;
    line-height: 27px;
    margin: 0 0 20px 0;
    color: #000000;
    text-align: center;
}

/* Основной текст - Semibold normal (не italic) (как в Figma: 14px, line-height 18px) */
.androidtv-info-text {
    font-family: 'MontserratSemibold', 'Montserrat', Arial, sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 14px;
    line-height: 18px;
    text-align: center;
}

.androidtv-info-text p {
    margin: 12px 0;
    text-align: center;
    font-family: 'MontserratSemibold', 'Montserrat', Arial, sans-serif;
    font-weight: 600;
    font-style: normal;
    color: #666666; /* серый цвет для обычного текста */
}

/* Выделенный текст (strong) - Mixed/SemiboldItalic, черный */
.androidtv-info-text strong {
    font-family: 'MontserratSemiboldItalic', 'Montserrat', Arial, sans-serif;
    font-weight: 600;
    font-style: italic;
    color: #000000; /* черный цвет для выделенного текста */
}

.androidtv-info-text em,
.androidtv-info-text i {
    font-family: 'MontserratSemiboldItalic', 'Montserrat', Arial, sans-serif;
    font-weight: 600;
    font-style: italic;
}

/* Адаптация для больших экранов */
@media (min-width: 769px) {
    .androidtv-info {
        margin: 60px 50px;
    }
    
    .androidtv-info-title {
        font-size: 54px; /* увеличен на 50% (36px * 1.5) */
        line-height: 48px; /* увеличен на 50% (32px * 1.5) */
        margin-bottom: 24px;
    }
    
    .androidtv-info-text {
        font-size: 24px; /* увеличен на 50% (16px * 1.5) */
        line-height: 30px; /* увеличен на 50% (20px * 1.5) */
        max-width: 800px;
        margin: 0 auto;
    }
    
    .androidtv-info-text p {
        font-size: 24px; /* увеличен на 50% (16px * 1.5) */
    }
}

/* Общий контейнер для всего контента - mobile-first */
.androidtv-container {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* Блок с двумя изображениями - максимально просто */
.androidtv-images {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 0;
}

.androidtv-images img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Новый отдельный длинный блок - не связан с остальными */
.androidtv-content-block {
    width: calc(100% - 40px); /* ширина минус отступы по бокам (20px слева + 20px справа) */
    margin: 15px 20px; /* отступы по бокам как у hero, сверху отступ */
    padding: 0;
    background: #F9F9F9;
    height: auto; /* высота по содержимому */
    border-radius: 36px; /* скругления как у hero */
    display: block;
}

.androidtv-content-inner {
    width: 100%;
    padding: 40px 28px 0 28px; /* внутренние отступы - без нижнего отступа */
    box-sizing: border-box;
}

/* Изображение женщины - на всю ширину блока */
.androidtv-women-image {
    width: calc(100% + 56px); /* 100% + компенсация padding (28px слева + 28px справа) */
    margin: -57px -28px 0 -28px; /* отрицательные margin чтобы выйти за пределы padding */
    height: auto;
    display: block;
    object-fit: contain;
}

/* Тёмный блок ниже изображения женщины */
.androidtv-dark-block {
    width: calc(100% + 56px); /* ширина как у .androidtv-content-block */
    margin: 0 -28px 0 -28px; /* отрицательные margin чтобы выйти за пределы padding */
    padding: 40px 28px; /* внутренние отступы */
    background: #181A1D;
    min-height: 230px; /* высота - отредактируй как нужно *//* скругления как у hero */
    box-sizing: border-box;
    color: #ffffff; /* белый текст по умолчанию */
    font-family: 'MontserratLocal', 'Montserrat', Arial, sans-serif;
}

/* Заголовок в тёмном блоке */
.androidtv-dark-title {
    font-family: 'MontserratLocal', 'Montserrat', Arial, sans-serif;
    font-weight: 600; /* SemiBold */
    font-size: 18px;
    line-height: 26px;
    color: #ffffff;
    margin: -20px 0 16px 0;
    letter-spacing: 0;
}

/* Основной текст в тёмном блоке */
.androidtv-dark-text {
    font-family: 'MontserratLocal', 'Montserrat', Arial, sans-serif;
    font-weight: 400; /* Regular */
    font-size: 13px;
    line-height: 21px;
    color: #ffffff;
    margin: -10px 0 12px 0;
    letter-spacing: 0;
}

/* Кнопка "Подробнее об Android TV" */
.androidtv-more-btn {
    font-family: 'MontserratLocal', 'Montserrat', Arial, sans-serif;
    font-weight: 600; /* SemiBold */
    font-size: 14px;
    line-height: 27px;
    color: #ffffff;
    background: rgba(217, 217, 217, 0.28); /* #D9D9D9 с opacity 28% */
    border: none;
    border-radius: 14px;
    padding: 0 16px;
    height: 27px;
    cursor: pointer;
    margin-top: 0px;
    display: inline-block;
    text-align: left;
    letter-spacing: 0;
    transition: all 0.3s ease;
}

/* Увеличение размеров текста для десктопа */
@media (min-width: 769px) {
    .androidtv-dark-title {
        font-size: 27px; /* увеличен на 50% (18px * 1.5) */
        line-height: 39px; /* увеличен на 50% (26px * 1.5) */
    }
    
    .androidtv-dark-text {
        font-size: 19.5px; /* увеличен на 50% (13px * 1.5) */
        line-height: 31.5px; /* увеличен на 50% (21px * 1.5) */
    }
    
    .androidtv-more-btn {
        font-size: 21px; /* увеличен на 50% (14px * 1.5) */
        line-height: 40.5px; /* увеличен на 50% (27px * 1.5) */
        height: 40.5px; /* увеличен на 50% (27px * 1.5) */
        padding: 0 24px; /* увеличен на 50% (16px * 1.5) */
        border-radius: 21px; /* увеличен на 50% (14px * 1.5) */
    }
}

.androidtv-more-btn:hover {
    background: rgba(192, 192, 192, 0.35); /* #c0c0c0 с немного большей прозрачностью при hover */
}

/* Оранжевый блок ниже черного блока */
.androidtv-orange-block {
    width: calc(100% + 56px); /* ширина как у .androidtv-content-block */
    margin: 0px -28px 0 -28px; /* отрицательные margin чтобы выйти за пределы padding */
    padding: 40px 28px; /* внутренние отступы */
    background: #FF5900;
    min-height: 300px; /* высота - отредактируй как нужно */
    box-sizing: border-box;
    text-align: center; /* центрирование содержимого */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Текст в оранжевом блоке */
.androidtv-orange-text {
    font-family: 'MontserratLocal', 'Montserrat', Arial, sans-serif;
    font-weight: 600; /* SemiBold */
    font-size: 14px;
    line-height: 21px;
    color: #ffffff;
    margin: -20px 0 20px 0;
    text-align: center;
    letter-spacing: 0;
}

/* Увеличение размеров текста для десктопа */
@media (min-width: 769px) {
    .androidtv-orange-text {
        font-size: 21px; /* увеличен на 50% (14px * 1.5) */
        line-height: 31.5px; /* увеличен на 50% (21px * 1.5) */
    }
}

/* Изображение в оранжевом блоке */
.androidtv-hand-image {
    width: 100%;
    max-width: 200px;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Светлый блок ниже оранжевого блока */
.androidtv-light-block {
    width: calc(100% + 56px); /* ширина как у .androidtv-content-block */
    margin: 0px -28px 0 -28px; /* отрицательные margin чтобы выйти за пределы padding */
    padding: 20px 28px; /* внутренние отступы - уменьшены для меньшей высоты */
    background: #F1F1F1;
    min-height: 0px; /* высота - отредактируй как нужно */
    box-sizing: border-box;
}

/* Текст в светлом блоке */
.androidtv-light-text {
    font-family: 'MontserratLocal', 'Montserrat', Arial, sans-serif;
    font-weight: 600; /* SemiBold */
    font-size: 14px;
    line-height: 21px;
    color: #000000;
    margin: 0;
    text-align: center;
    letter-spacing: 0;
}

/* Увеличение размеров текста для десктопа */
@media (min-width: 769px) {
    .androidtv-light-text {
        font-size: 21px; /* увеличен на 50% (14px * 1.5) */
        line-height: 31.5px; /* увеличен на 50% (21px * 1.5) */
    }
}

/* Контейнер для двух карточек с фичами */
.androidtv-features {
    width: calc(100% + 56px);
    margin: 0 -28px;
    padding: 0;
    display: flex;
    gap: 0;
    box-sizing: border-box;
}

/* Светлая карточка (на фоне .androidtv-content-block) */
.androidtv-feature-light {
    flex: 1;
    padding: 30px 20px;
    background: transparent; /* прозрачный, виден фон .androidtv-content-block */
    border-radius: 0 0 0 36px; /* закругление только снизу слева */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
}

/* Черная карточка */
.androidtv-feature-dark {
    flex: 1;
    padding: 30px 20px;
    background: #181A1D;
    border-radius: 0 0 36px 36px; /* закругление обоих нижних углов */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
}

/* Большие числа в карточках */
.androidtv-feature-number {
    font-family: 'MontserratLocal', 'Montserrat', Arial, sans-serif;
    font-weight: 700; /* Bold */
    font-size: 48px;
    line-height: 1.2;
    margin: 0 0 8px 0;
}

.androidtv-feature-light .androidtv-feature-number {
    color: #000000;
}

.androidtv-feature-dark .androidtv-feature-number {
    color: #ffffff;
}

/* Текст под числами */
.androidtv-feature-label {
    font-family: 'MontserratLocal', 'Montserrat', Arial, sans-serif;
    font-weight: 400; /* Regular */
    font-size: 14px;
    line-height: 1.4;
    margin: 0;
}

/* Увеличение размеров текста для десктопа */
@media (min-width: 769px) {
    .androidtv-feature-number {
        font-size: 72px; /* увеличен на 50% (48px * 1.5) */
        margin: 0 0 12px 0; /* увеличен на 50% (8px * 1.5) */
    }
    
    .androidtv-feature-label {
        font-size: 21px; /* увеличен на 50% (14px * 1.5) */
    }
}

.androidtv-feature-light .androidtv-feature-label {
    color: #000000;
}

.androidtv-feature-dark .androidtv-feature-label {
    color: #ffffff;
}

/* Блок с текстом и кнопками */
.androidtv-actions {
    width: calc(100% - 40px);
    margin: 15px 20px 40px 20px;
    padding: 0;
    text-align: center;
}

/* Текст "Просто включай и смотри" */
.androidtv-actions-text {
    font-family: 'MontserratLocal', 'Montserrat', Arial, sans-serif;
    font-weight: 800; /* ExtraBold */
    font-size: 14px;
    line-height: 21px;
    color: #181A1D;
    margin: 0 0 16px 0;
    text-align: center;
    letter-spacing: 0;
}

/* Увеличение размеров текста для десктопа */
@media (min-width: 769px) {
    .androidtv-actions-text {
        font-size: 21px; /* увеличен на 50% (14px * 1.5) */
        line-height: 31.5px; /* увеличен на 50% (21px * 1.5) */
        margin: 0 0 24px 0; /* увеличен на 50% (16px * 1.5) */
    }
}

/* Контейнер для кнопок */
.androidtv-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap; /* все кнопки в одну строку */
    padding: 0 20px; /* отступы по бокам чтобы не прижимались к краям */
}

/* Общие стили кнопок */
.androidtv-btn {
    font-family: 'MontserratLocal', 'Montserrat', Arial, sans-serif;
    font-weight: 400; /* Regular */
    font-size: 12px; /* уменьшено на 15% (14 * 0.85) */
    line-height: 18px; /* уменьшено на 15% (21 * 0.85) */
    padding: 0 14px; /* уменьшено на 15% (16 * 0.85) */
    height: 20px; /* уменьшено на 15% (24 * 0.85) */
    border: none;
    border-radius: 10px; /* уменьшено на 15% (12 * 0.85) */
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 0;
    white-space: nowrap;
}

/* Увеличение размеров текста для десктопа */
@media (min-width: 769px) {
    .androidtv-btn {
        font-size: 18px; /* увеличен на 50% (12px * 1.5) */
        line-height: 27px; /* увеличен на 50% (18px * 1.5) */
        padding: 0 21px; /* увеличен на 50% (14px * 1.5) */
        height: 30px; /* увеличен на 50% (20px * 1.5) */
        border-radius: 15px; /* увеличен на 50% (10px * 1.5) */
    }
}

/* Серая кнопка */
.androidtv-btn-gray {
    background: #D9D9D9;
    color: #181A1D;
}

.androidtv-btn-gray:hover {
    background: #c0c0c0;
}

/* Оранжевая кнопка */
.androidtv-btn-orange {
    background: #FF5900;
    color: #FFFFFF;
}

.androidtv-btn-orange:hover {
    background: #e54d00;
}

/* ========================================
   FOOTER (DESKTOP) STYLES
   ======================================== */
.footer {
    background: #FF5900;
    color: white;
    padding: 4rem 0 2rem;
    position: relative;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    box-sizing: border-box;
    left: 0;
    right: 0;
    overflow-x: hidden;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}

.footer * {
    box-sizing: border-box;
}

.footer-content {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 4rem;
    margin-bottom: 2rem;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1.5rem;
    align-items: start;
}

.footer-left {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.footer-logo-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}

.footer-logo-icon {
    width: 150px;
    height: 150px;
    object-fit: contain;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.footer-brand-name {
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
    font-family: 'Coolvetica', sans-serif;
}

.footer-working-hours {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.footer-column h4 {
    margin-bottom: 1rem;
    color: white;
    font-weight: 600;
    font-family: 'Coolvetica', sans-serif;
    font-size: 13px;
    text-align: left;
}

.footer-column a {
    display: block;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    margin-bottom: 0.2rem;
    transition: var(--transition-fast);
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 300;
    line-height: 1.3;
    white-space: normal;
    word-wrap: break-word;
    text-align: left;
}

/* Увеличение размеров текста для десктопа */
@media (min-width: 769px) {
    .footer-column h4 {
        font-size: 19.5px; /* увеличен на 50% (13px * 1.5) */
    }
    
    .footer-column a {
        font-size: 19.5px; /* увеличен на 50% (13px * 1.5) */
    }
    
    .footer-brand-name {
        font-size: 3.75rem; /* увеличен на 50% (2.5rem * 1.5) */
    }
    
    .footer-working-hours {
        font-size: 1.8rem; /* увеличен на 50% (1.2rem * 1.5) */
    }
    
    .footer-bottom p {
        font-size: 1.8rem !important; /* увеличен на 50% (1.2rem * 1.5) */
    }
}

.footer-column a:hover {
    color: var(--purple-accent);
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.footer-bottom p {
    margin: 0;
    font-size: 1.2rem !important;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Montserrat', 'MontserratLocal', Arial, sans-serif;
}

/* ========================================
   FOOTER (MOBILE) STYLES
   ======================================== */
.mobile-footer {
    display: none;
    background: #FF5900;
    color: white;
    padding: 40px 0 20px;
    position: relative;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    box-sizing: border-box;
    left: 0;
    right: 0;
    overflow-x: hidden;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}

.mobile-footer-content {
    margin-bottom: 20px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
}

/* На мобильных экранах меняем видимость: скрываем десктопный футер и показываем мобильный */
@media (max-width: 768px) {
    .footer {
        display: none;
    }
    .mobile-footer {
        display: block;
    }

    .mobile-footer-column a,
    .mobile-footer-bottom p {
        word-break: normal;
        overflow-wrap: break-word;
        hyphens: none;
    }

    .mobile-footer-bottom {
        width: 100%;
        box-sizing: border-box;
    }

    .mobile-footer-bottom p {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .mobile-footer-brand-name {
        font-size: 1.35rem;
    }
}

.mobile-footer-main {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 26px;
    min-height: 0;
    flex-wrap: nowrap;
}

.mobile-footer-left {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    min-width: 0;
    flex: none;
}

.mobile-footer-center {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    min-width: 0;
    flex: none;
}

/* Align center column links and headers to left for better readability */
.mobile-footer-center .mobile-footer-column {
    text-align: left;
}

.mobile-footer-right {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 22px;
    width: 100%;
    min-width: 0;
    flex: none;
}

.mobile-footer-center .mobile-footer-column,
.mobile-footer-right .mobile-footer-column {
    width: 100%;
    max-width: 100%;
}

.mobile-footer-logo-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.mobile-footer-logo-icon {
    width: 100px;
    height: 100px;
    object-fit: contain;
}

.mobile-footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.mobile-footer-brand-name {
    font-size: 2rem;
    font-weight: 700;
    color: white;
    font-family: 'Coolvetica', sans-serif;
}

.mobile-footer-working-hours {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
}

.mobile-footer-column {
    text-align: left;
    min-width: 0;
}

/* Center column should be left-aligned while keeping other columns' defaults */
.mobile-footer-center .mobile-footer-column {
    text-align: left;
}

.mobile-footer-left .mobile-footer-column {
    text-align: left;
}

.mobile-footer-right .mobile-footer-column {
    text-align: left;
}

.mobile-footer-column h4 {
    margin-bottom: 10px;
    color: white;
    font-weight: 700;
    font-size: 13px;
    font-family: 'Coolvetica', sans-serif;
    text-align: left;
}

/* Сделать заголовок в центральной колонке чуть мельче */
.mobile-footer-center .mobile-footer-column h4 {
    font-size: 14px;
}

.mobile-footer-left .mobile-footer-column h4 {
    text-align: left;
}

.mobile-footer-right .mobile-footer-column h4 {
    text-align: left;
}

.mobile-footer-column a {
    display: block;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    margin-bottom: 2px;
    transition: var(--transition-fast);
    font-size: 0.875rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    padding: 1px 0;
    text-align: left;
    white-space: normal;
    word-wrap: break-word;
    line-height: 1.45;
}

/* Увеличиваем размер шрифта для более крупных мобильных экранов */
.mobile-footer-center .mobile-footer-column a,
.mobile-footer-left .mobile-footer-column a,
.mobile-footer-right .mobile-footer-column a {
    font-size: 0.875rem;
}

/* Специальные стили для длинных текстов в мобильной версии */
.mobile-footer-column a[href="/politika_obrabotki"] {
    white-space: normal;
    word-wrap: break-word;
    line-height: 1.2;
}

.mobile-footer-column a[onclick*="openContactModal"] {
    white-space: normal;
    word-wrap: break-word;
    line-height: 1.2;
}

/* Стили для длинных названий роутеров в мобильной версии */
.mobile-footer-column a[onclick*="cudy-wr3600"] {
    white-space: normal;
    word-wrap: break-word;
}

.mobile-footer-column a[onclick*="kenetic-runner"] {
    white-space: normal;
    word-wrap: break-word;
}

.mobile-footer-left .mobile-footer-column a {
    text-align: left;
}

.mobile-footer-right .mobile-footer-column a {
    text-align: left;
}

.mobile-footer-column a:active {
    color: var(--purple-accent);
}

.mobile-footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 1.4rem;
}

.mobile-footer-bottom p {
    margin: 0;
    font-size: 0.8rem !important;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Montserrat', 'MontserratLocal', Arial, sans-serif;
}

/* Адаптивные стили для очень маленьких экранов */
@media (max-width: 480px) {
    .mobile-footer-links {
        flex-direction: column;
        gap: 20px;
        align-items: flex-start; /* left-align columns on very small screens */
    }
    
    .mobile-footer-column {
        text-align: left;
    }

    .mobile-footer-column h4,
    .mobile-footer-column a {
        text-align: left;
    }
    
    .mobile-footer-logo-icon {
        width: 100px;
        height: 100px;
    }
    
    .mobile-footer-brand-name {
        font-size: 1.4rem;
    }
    
    .mobile-footer-working-hours {
        font-size: 0.8rem;
    }
    
    .mobile-footer-column h4 {
        font-size: 14px;
        font-weight: 700;
    }
    
    .mobile-footer-column a {
        font-size: 1rem;
    }
    
    .mobile-footer-bottom {
        font-size: 1.2rem;
    }
    
    .mobile-footer-bottom p {
        font-size: 0.8rem !important;
        font-family: 'Montserrat', 'MontserratLocal', Arial, sans-serif;
    }
}

/* iPhone SE (375px) - уменьшение размеров текста для androidtv-hero-inner */
@media (max-width: 375px) {
    .androidtv-hero-inner .androidtv-hero-title {
        font-size: 22px;
    }
    
    .androidtv-hero-inner .androidtv-hero-features {
        font-size: 13px;
    }
    
    .androidtv-hero-inner .androidtv-buy-btn {
        font-size: 16px;
    }

    .androidtv-hero-image {
        bottom: 0;
    }

    .androidtv-hero-image img {
        right: 0px;
    }
}

@media (max-height: 619px) {
    .androidtv-hero-image {
        bottom: 0;
    }
}

@media (max-height: 663px) {
    .androidtv-hero-image img {
        right: 0px;
    }
}

/* Сдвиг иконки закрытия вниз - более специфичный селектор */
.modal-exit-btn .exit-icon,
button .exit-icon,
.exit-icon {
    position: relative !important;
    top: 4px !important;
    margin-right: -14px !important;
}

/* Стили для уведомлений (для промокодов) */
.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    z-index: 10001;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    max-width: 300px;
    border-left: 4px solid #1FAF38;
}

.notification-success {
    border-left-color: #28a745;
}

.notification-error {
    border-left-color: #dc3545;
}

.notification-warning {
    border-left-color: #ffc107;
}

.notification-info {
    border-left-color: #17a2b8;
}

.notification-content {
    display: flex;
    align-items: center;
    padding: 16px;
    gap: 12px;
}

.notification-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.notification-message {
    flex: 1;
    font-size: 14px;
    color: #333;
    font-weight: 500;
}

.notification-close {
    background: none;
    border: none;
    font-size: 18px;
    color: #666;
    cursor: pointer;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.notification-close:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #333;
}

/* Мобильная адаптация для уведомлений */
@media (max-width: 768px) {
    .notification {
        top: 10px;
        right: 10px;
        left: 10px;
        max-width: none;
    }
    
    .notification-content {
        padding: 12px;
    }
    
    .notification-message {
        font-size: 13px;
    }
}