/* Мобильная адаптация для Q-Market Shop */

/* === КРИТИЧЕСКИЕ ФИКСЫ ГОРИЗОНТАЛЬНОГО СКРОЛЛА === */
/* Применяем на все экраны, не только мобильные */
*, *::before, *::after {
    box-sizing: border-box !important;
}

html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

/* === МОБИЛЬНОЕ МЕНЮ-ГАМБУРГЕР === */
/* Скрываем на десктопе */
.mobile-hamburger {
    display: none;
}

/* Скрываем мобильное меню и оверлей на десктопе */
.mobile-menu-overlay,
.mobile-menu {
    display: none;
}

@media (max-width: 960px) {
    /* Показываем гамбургер на мобильных */
    .mobile-hamburger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        padding: 10px;
        background: transparent;
        border: none;
        cursor: pointer;
        z-index: 101;
    }

    .mobile-hamburger span {
        display: block;
        width: 24px;
        height: 2px;
        background: var(--text-primary, #fff);
        border-radius: 2px;
        transition: all 0.3s ease;
    }

    /* Оверлей */
    .mobile-menu-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 998;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .mobile-menu-overlay.open {
        display: block;
        opacity: 1;
    }

    /* Мобильное меню (drawer справа) */
    .mobile-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 85%;
        max-width: 320px;
        height: 100vh;
        background: var(--bg1, #0b0f1f);
        z-index: 999;
        transition: right 0.3s ease;
        display: flex;
        flex-direction: column;
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.5);
    }

    .mobile-menu.open {
        right: 0;
    }

    /* Заголовок меню */
    .mobile-menu-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .mobile-menu-title {
        font-size: 18px;
        font-weight: 600;
        color: var(--text-primary, #fff);
    }

    .mobile-menu-close {
        width: 40px;
        height: 40px;
        background: transparent;
        border: none;
        color: var(--text-muted, #888);
        font-size: 28px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Ссылки в меню */
    .mobile-menu-links {
        display: flex;
        flex-direction: column;
        padding: 16px 0;
        overflow-y: auto;
        flex: 1;
    }

    .mobile-menu-links a {
        display: block;
        padding: 16px 24px;
        color: var(--text-primary, #fff);
        text-decoration: none;
        font-size: 16px;
        transition: background 0.2s ease;
    }

    .mobile-menu-links a:hover,
    .mobile-menu-links a:active {
        background: rgba(255, 255, 255, 0.05);
    }

    .mobile-menu-divider {
        border: none;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        margin: 8px 24px;
    }
}

/* === БАЗОВЫЕ МОБИЛЬНЫЕ СТИЛИ === */
@media (max-width: 768px) {
    /* Улучшенная типографика для мобильных */
    body {
        font-size: 16px; /* Предотвращаем авто-зум на iOS */
        -webkit-text-size-adjust: 100%;
        touch-action: manipulation; /* Отключаем задержку тапа */
        overflow-x: hidden !important;
    }

    /* Контейнеры */
    .container {
        width: 100% !important;
        padding: 0 16px !important;
        margin: 16px auto 40px !important;
    }

    /* Заголовки */
    h1 {
        font-size: 24px !important;
    }

    h2 {
        font-size: 20px !important;
    }

    /* Хедер */
    header {
        flex-direction: column;
        align-items: stretch !important;
        gap: 12px !important;
        padding: 12px 0 !important;
    }

    /* Навигация в navbar - скрыта на мобильных (используется hamburger меню) */
    /* main.css уже скрывает .nav-links при max-width: 960px, не перезаписываем */

    /* НЕ трогаем .navbar .nav-links - они должны быть скрыты */
}

/* === АДАПТАЦИЯ ГЛАВНОЙ СТРАНИЦЫ === */
@media (max-width: 768px) {
    /* Бренд - ТОЛЬКО для hero секции, НЕ для навбара */
    /* ВАЖНО: .navbar .brand НЕ трогаем - у него свои стили в main.css */
    header > .brand,
    .hero .brand,
    .home-hero .brand {
        font-size: clamp(32px, 10vw, 48px) !important;
        padding: 32px 16px 8px !important;
    }

    .subtitle {
        font-size: 14px;
        margin-top: 8px;
    }

    /* Hero секция - с отступами от краёв */
    .hero {
        margin: 16px !important;
        padding: 20px 16px !important;
        border-radius: 12px !important;
    }

    /* Footer - одна строка на мобильных (Trello #37) */
    .footer {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 16px !important;
        margin-top: 40px !important;
        gap: 12px !important;
    }

    /* Логотип - компактнее */
    .footer .brand-foot {
        gap: 6px !important;
        flex-shrink: 0 !important;
    }

    .footer .brand-foot span:last-child {
        font-size: 12px !important; /* Компактный текст "Q-Market" */
    }

    /* Ссылки - в строку */
    .footer .social {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 10px !important;
        flex-shrink: 1 !important;
        overflow: hidden !important;
    }

    .footer .social a {
        font-size: 12px !important;
        white-space: nowrap !important;
    }

    /* Copyright - компактнее */
    .footer .since {
        font-size: 11px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* Сетка */
    .grid2 {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Панели */
    .panel {
        padding: 12px !important;
    }

    /* Статистика */
    .stats {
        flex-direction: column;
        gap: 16px;
    }

    .stat {
        width: 100%;
        text-align: center;
    }
}

/* === АДАПТАЦИЯ МАГАЗИНА === */
@media (max-width: 768px) {
    /* Основной контейнер магазина - добавляем боковые отступы */
    .shop-content {
        padding: 0 16px !important;
        box-sizing: border-box !important;
    }

    /* Секции категорий - убираем инлайн-отступы и задаём свои */
    .category-section {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-top: 48px !important;
        padding-top: 24px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .category-section:first-of-type {
        margin-top: 24px !important;
        border-top: none;
        padding-top: 0 !important;
    }

    /* Сетка товаров - одна колонка на мобильных */
    .products-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        padding: 0 !important;
    }

    /* Карточки товаров - полная ширина с закруглёнными углами */
    .product-card {
        width: 100% !important;
        margin: 0 !important;
        border-radius: 12px !important;
    }

    /* Изображения товаров - увеличенная высота контейнера изображения (Trello #36) */
    /* Только высота изображения увеличена, остальная часть карточки без изменений */
    .product-image {
        height: 240px !important; /* было 180px в main.css */
        overflow: hidden !important;
    }

    .product-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    /* Тело карточки товара - компактное */
    .product-body {
        padding: 8px 12px 8px 12px !important;
    }

    .stock-line {
        font-size: 11px !important;
        margin-bottom: 6px !important;
    }

    .product-title {
        font-size: 15px !important;
        margin: 0 0 6px 0 !important;
    }

    .prices {
        font-size: 14px !important;
        margin-bottom: 0 !important;
    }

    /* Сетка товаров */
    .grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 0 !important;
    }

    /* Карточка товара */
    .card {
        width: 100% !important;
        height: auto !important;
        margin-bottom: 12px;
    }

    .thumb {
        height: 200px !important;
    }

    .content {
        padding: 12px !important;
    }

    .title {
        font-size: 16px !important;
    }

    .description {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    .price {
        font-size: 20px !important;
    }

    /* Кнопки в товарах */
    .card .btn {
        width: 100%;
        padding: 12px !important;
        font-size: 16px !important;
    }
}

/* === АДАПТАЦИЯ КОРЗИНЫ === */
@media (max-width: 768px) {
    /* Элементы корзины */
    .cart-item {
        flex-direction: column;
        gap: 12px;
        padding: 12px;
        border-radius: 8px;
        background: rgba(255,255,255,0.03);
        margin-bottom: 12px;
    }

    .cart-item .thumb {
        width: 100%;
        height: 150px;
    }

    /* Количество товара */
    .qty-controls {
        display: flex;
        justify-content: center;
        gap: 16px;
        margin: 8px 0;
    }

    .qty-controls button {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    /* Итого */
    .cart-summary {
        position: sticky;
        bottom: 0;
        background: var(--bg1);
        padding: 16px;
        border-top: 1px solid rgba(255,255,255,0.1);
        margin: 0 -16px;
    }
}

/* === АДАПТАЦИЯ ФОРМ === */
@media (max-width: 768px) {
    /* Поля ввода - исключаем навбар и инлайн-формы (промокод) */
    .content input,
    .content textarea,
    .content select,
    .product-page input,
    .product-page textarea,
    .checkout-form input,
    .checkout-form textarea,
    .checkout-form select {
        width: 100% !important;
        padding: 12px !important;
        font-size: 16px !important; /* Предотвращаем зум на iOS */
        border-radius: 8px !important;
    }

    /* Кнопки - ТОЛЬКО для контентных областей */
    /* ВАЖНО: НЕ трогаем .navbar кнопки (icon-button, account-button, mobile-hamburger) */
    .content .btn,
    .content button,
    .product-page .btn,
    .product-page button,
    .cart-page .btn,
    .checkout-form .btn,
    .checkout-form button,
    main > .btn,
    .hero .btn,
    .cta .btn {
        min-height: 44px; /* Минимальный размер для тапа по Apple HIG */
        padding: 12px 24px !important;
        font-size: 16px !important;
    }

    /* Формы - ТОЛЬКО вертикальные формы (не инлайн) */
    /* ВАЖНО: НЕ трогаем инлайн-формы типа промокод+кнопка */
    .checkout-form,
    .auth-form,
    .contact-form,
    .settings-form {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .form-row {
        flex-direction: column !important;
        gap: 8px !important;
    }
}

/* === АДАПТАЦИЯ АДМИНКИ === */
@media (max-width: 768px) {
    /* Боковая панель */
    .side {
        position: fixed;
        left: -100%;
        top: 0;
        bottom: 0;
        width: 80%;
        max-width: 300px;
        z-index: 1000;
        transition: left 0.3s;
        box-shadow: 2px 0 20px rgba(0,0,0,0.5);
    }

    .side.mobile-open {
        left: 0;
    }

    /* Кнопка меню */
    .mobile-menu-btn {
        display: block !important;
        position: fixed;
        top: 16px;
        left: 16px;
        z-index: 1001;
        width: 44px;
        height: 44px;
        background: var(--accent);
        border: none;
        border-radius: 8px;
        color: white;
        font-size: 24px;
        cursor: pointer;
    }

    /* Контент админки */
    .main {
        margin-left: 0 !important;
        padding: 60px 16px 16px !important;
    }

    /* Таблицы */
    .table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -16px;
        padding: 0 16px;
    }

    table {
        min-width: 600px;
    }

    /* Карточки метрик */
    .metric-cards {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
}

/* === СПЕЦИФИЧНЫЕ СТИЛИ ДЛЯ iOS === */
@supports (-webkit-touch-callout: none) {
    /* Фиксы для iOS Safari */
    body {
        -webkit-font-smoothing: antialiased;
    }

    /* Безопасные зоны для iPhone X+ */
    .container {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    .cart-summary {
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }
}

/* === УЛУЧШЕНИЯ ПРОИЗВОДИТЕЛЬНОСТИ === */
@media (max-width: 768px) {
    /* Отключаем декоративную анимацию сканлинии на мобильных */
    /* НЕ скрываем .grid - он используется как layout-контейнер в account, orders, rewards и др. */
    .scan {
        display: none !important;
    }

    /* Упрощаем тени только для карточек (не трогаем focus-стили и другие элементы) */
    .card {
        box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
    }

    /* Упрощаем анимации только для пользователей с prefers-reduced-motion */
    @media (prefers-reduced-motion: reduce) {
        * {
            animation: none !important;
            transition: none !important;
        }
    }
}

/* === МОДАЛЬНЫЕ ОКНА === */
@media (max-width: 768px) {
    .modal {
        width: 90% !important;
        max-width: none !important;
        margin: 20px !important;
    }

    .modal-content {
        padding: 16px !important;
    }

    /* Оверлей для мобильного меню */
    .mobile-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 999;
    }

    .mobile-overlay.active {
        display: block;
    }
}

/* === КНОПКИ ДЕЙСТВИЙ === */
@media (max-width: 768px) {
    /* Плавающая кнопка корзины */
    .floating-cart {
        position: fixed;
        bottom: 20px;
        right: 20px;
        width: 56px;
        height: 56px;
        background: var(--accent);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        z-index: 100;
    }

    .floating-cart .badge {
        position: absolute;
        top: -4px;
        right: -4px;
        background: var(--magenta);
        color: white;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: bold;
    }
}

/* === ОПТИМИЗАЦИЯ ИЗОБРАЖЕНИЙ === */
@media (max-width: 768px) {
    img {
        max-width: 100%;
        height: auto;
    }

    /* Lazy loading индикатор */
    .img-loading {
        background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 100%);
        background-size: 200% 100%;
        animation: shimmer 1.5s infinite;
    }

    @keyframes shimmer {
        0% { background-position: -200% 0; }
        100% { background-position: 200% 0; }
    }
}

/* === ФИКСЫ ДАШБОРДА КЛИЕНТА === */
@media (max-width: 768px) {
    /* Контейнер дашборда */
    .container {
        padding: 0 16px !important;
        margin: 16px auto !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Заголовок с именем пользователя */
    .dashboard-user-header {
        margin-bottom: 8px !important;
    }

    /* Приветственный заголовок */
    .grid > div > h1 {
        font-size: 20px !important;
        word-break: break-word !important;
    }

    /* Виджеты с заголовком и кнопкой "View All" */
    .widget-header {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* Кнопки "View All" в виджетах */
    .widget-btn-view {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    /* Таблицы транзакций на мобильных - скрываем Details колонку */
    .widget table th:nth-child(4),
    .widget table td:nth-child(4) {
        display: none !important;
    }

    /* Уменьшаем padding в ячейках таблицы */
    .widget table th,
    .widget table td {
        padding: 8px 4px !important;
        font-size: 12px !important;
    }

    /* Type badge в таблице - компактнее, с обрезкой */
    .widget table .badge {
        font-size: 9px !important;
        padding: 2px 4px !important;
        white-space: nowrap !important;
        max-width: 70px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: inline-block !important;
    }

    /* Виджеты - полная ширина и правильные отступы */
    .widget {
        padding: 12px !important;
        margin-top: 12px !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        box-sizing: border-box !important;
    }

    /* Таблицы в виджетах - горизонтальный скролл */
    .widget > div[style*="overflow-x:auto"],
    .widget table {
        width: 100% !important;
        table-layout: fixed !important;
    }

    .widget table th:nth-child(1),
    .widget table td:nth-child(1) {
        width: 45% !important;
    }

    .widget table th:nth-child(2),
    .widget table td:nth-child(2) {
        width: 25% !important;
    }

    .widget table th:nth-child(3),
    .widget table td:nth-child(3) {
        width: 30% !important;
    }

    /* Stats cards - компактнее */
    .stats-grid {
        gap: 10px !important;
    }

    .stat-card {
        padding: 14px !important;
    }

    .stat-value {
        font-size: 24px !important;
    }

    .stat-label {
        font-size: 12px !important;
    }

    /* Referral stats grid - 3 колонки → 1 колонка на мобильных */
    .referral-stats-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        text-align: center !important;
    }

    .referral-stats-grid > div {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 8px 0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    }

    .referral-stats-grid > div:last-child {
        border-bottom: none !important;
    }

    /* Balance widget - вертикальный layout */
    .wallet-widget-content {
        flex-direction: column !important;
        gap: 16px !important;
    }

    .wallet-main {
        min-width: 100% !important;
    }

    /* Balance display - меньше на мобильных */
    #balance-display {
        font-size: 32px !important;
    }

    /* Balance expiry info - полная ширина, убираем inline ограничения */
    #balance-expiry-info {
        max-width: 100% !important;
        width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        margin-top: 12px !important;
        padding: 12px !important;
        box-sizing: border-box !important;
    }

    /* Referral box - полная ширина */
    .referral-box {
        padding: 10px !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    /* Referral link - меньше шрифт, переносы */
    .referral-link {
        font-size: 10px !important;
        word-break: break-all !important;
        max-width: 100% !important;
        overflow-wrap: break-word !important;
    }

    /* Кнопки в referral box - полная ширина */
    .referral-box .btn,
    #copy-ref-btn,
    #create-ref-btn {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 10px 8px !important;
        font-size: 13px !important;
    }

    /* Order items - компактнее */
    .order-item {
        padding: 10px !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .order-item > div:last-child {
        width: 100% !important;
        justify-content: space-between !important;
    }

    /* Modals - полная ширина */
    #modal-backdrop > .card {
        width: 94% !important;
        max-width: none !important;
        padding: 16px !important;
    }

    /* Modal inputs */
    #modal-backdrop input {
        font-size: 16px !important; /* Предотвращает зум на iOS */
    }
}

/* === АДАПТАЦИЯ СТРАНИЦЫ ТРАНЗАКЦИЙ === */
@media (max-width: 768px) {
    /* Таблица транзакций - горизонтальный скролл */
    .transactions-table-wrapper,
    [style*="overflow-x:auto"] {
        margin: 0 -16px !important;
        padding: 0 16px !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Заголовок страницы транзакций */
    h1 {
        font-size: 22px !important;
        word-break: break-word;
    }

    /* Пагинация - компактнее */
    .pagination {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 6px !important;
    }

    .pagination a,
    .pagination span {
        padding: 8px 12px !important;
        font-size: 14px !important;
    }
}

/* === ФИКСЫ СТРАНИЦЫ ТОВАРА (Card #3) === */
@media (max-width: 768px) {
    /* Product info карточка - контролируем overflow */
    .product-info {
        padding: 16px !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    /* Info секция - ограничиваем ширину */
    .info-section {
        max-width: 100% !important;
        overflow: hidden !important;
    }

    /* Секция цены с кнопкой "Buy more - pay less" */
    .price-section {
        flex-wrap: wrap !important;
        gap: 8px !important;
        max-width: 100% !important;
    }

    /* Кнопка "Buy more - pay less" - показываем полностью */
    .bulk-discount-btn {
        font-size: 11px !important;
        padding: 5px 10px !important;
        white-space: nowrap !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    /* Тултип оптовой скидки - фикс позиционирования на мобильных */
    .bulk-tooltip {
        position: fixed !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        top: 50% !important;
        transform: translate(-50%, -50%) scale(1) !important;
        min-width: 200px !important;
        max-width: calc(100vw - 40px) !important;
        z-index: 9999 !important;
    }
    .bulk-tooltip::after {
        display: none !important;
    }

    /* Info секция - Delivery/Price строки - принудительно ограничиваем ширину */
    .info-row {
        display: flex !important;
        justify-content: space-between !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Убеждаемся что значения Delivery/Price видны */
    .info-row > span:last-child {
        text-align: right !important;
        flex-shrink: 0 !important;
    }

    /* Кнопки Add to cart / Buy Now - вертикально на мобильных */
    .action-buttons {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .action-buttons .signin-btn,
    .action-buttons form {
        flex: none !important;
        width: 100% !important;
    }

    .action-buttons .signin-btn {
        padding: 14px !important;
    }

    /* Методы оплаты - компактнее */
    .payment-methods-row {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
}

/* === ФИКСЫ МОБИЛЬНОЙ НАВИГАЦИИ (Trello #41) === */
@media (max-width: 480px) {
    /* Скрываем текст "Q-Market" - логотип достаточно узнаваем */
    .navbar .brand .brand-text {
        display: none !important;
    }

    /* Компактная кнопка "My account" */
    .navbar .account-button {
        padding: 8px 14px !important;
        font-size: 13px !important;
    }

    /* Уменьшаем промежутки между элементами */
    .navbar .nav-left,
    .navbar .nav-right {
        gap: 8px !important;
    }

    /* Компактный padding навбара */
    .navbar {
        padding: 12px 12px !important;
    }

    /* Немного уменьшаем логотип */
    .navbar .brand img {
        width: 40px !important;
        height: 40px !important;
    }

    /* Компактнее иконка корзины */
    .navbar .icon-button {
        width: 38px !important;
        height: 38px !important;
    }
}

/* === ФИКСЫ МОДАЛЬНОГО ОКНА ОПРОСНИКА (Trello #42) === */
@media (max-width: 768px) {
    /* Контент модального окна - предотвращаем горизонтальный overflow */
    .custom-fields-content {
        width: 94% !important;
        max-width: none !important;
        padding: 20px 16px !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    /* Форма внутри модалки - контролируем ширину */
    .custom-fields-form {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    /* Группы полей - полная ширина с учётом padding */
    .custom-field-group {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Select dropdown - ограничиваем ширину и обрезаем длинный текст */
    .custom-field-select {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        /* Для iOS Safari - предотвращаем масштабирование опций */
        font-size: 16px !important;
    }

    /* Опции в select - обрезка текста */
    .custom-field-select option {
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    /* Лейблы полей - переносы для длинного текста */
    .custom-field-label {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
    }

    /* Checkbox группы - предотвращаем overflow */
    .custom-field-checkbox-group {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* Checkbox items - переносы для длинного текста */
    .custom-field-checkbox-item {
        flex-wrap: wrap !important;
    }

    .custom-field-checkbox-item label {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: calc(100% - 30px) !important;
    }

    /* Кнопки модального окна - полная ширина, вертикальный layout */
    .custom-fields-buttons {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .custom-fields-btn {
        width: 100% !important;
    }

    /* Заголовок модалки - компактнее */
    .custom-fields-title {
        font-size: 18px !important;
    }

    .custom-fields-subtitle {
        font-size: 13px !important;
    }
}