/* ===== RESPONSIVE STYLES FOR INDEX2 ===== */
/* Mobile-first approach with breakpoints */

/* Breakpoint variables (for reference, CSS doesn't support these directly) */
/* sm: 576px */
/* md: 768px */
/* lg: 992px */
/* xl: 1200px */
/* xxl: 1400px */

/* ===== TABLET STYLES (768px - 1024px) ===== */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .container {
    padding: 0 calc(var(--spacing-unit) * 3.75);
  }
  
  .hero-container {
    padding: 0 calc(var(--spacing-unit) * 3.75);
  }
  
  .hero-grid {
    gap: calc(var(--spacing-unit) * 5);
  }
  
  .hero-title {
    font-size: 2.5em;
  }
  
  .hero-subtitle {
    font-size: 1.15em;
  }
  
  .stat-amount {
    font-size: 2.2em;
  }
  
  .cta-hero-grid {
    gap: calc(var(--spacing-unit) * 3.75);
  }
  
  .cta-hero-left {
    padding: calc(var(--spacing-unit) * 5);
  }
}

/* ===== MOBILE STYLES (max-width: 767px) ===== */
@media screen and (max-width: 767px) {
  /* intl-tel-input mobile fixes */
  .iti__country-list {
    max-height: 200px !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  .iti--fullscreen-popup .iti__dropdown-content {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 99999 !important;
    background: white !important;
  }
  
  .iti__dropdown {
    z-index: 99999 !important;
  }
  
  .iti__flag-container {
    z-index: 100 !important;
  }
  
  /* Hero Section */
  .hero {
    padding: calc(var(--spacing-unit) * 2.5) 0;
    height: auto;
    min-height: 100vh;
    max-height: none;
  }
  
  .hero-container {
    padding: 0 calc(var(--spacing-unit) * 2);
  }
  
  .hero-grid {
    grid-template-columns: 1fr;
    gap: calc(var(--spacing-unit) * 3.75);
  }
  
  .hero-left {
    order: 2;
    margin-top: calc(var(--spacing-unit) * 2.5);
  }
  
  .hero-right {
    order: 1;
    padding-left: 0;
    text-align: center;
  }
  
  .hero-image-wrapper {
    padding: 30px 25px;
    max-width: 350px;
    margin: 0 auto;
    transform: none !important;
    animation: none !important;
  }
  
  .hero-image {
    max-width: 100%;
  }
  
  .campaign-badge {
    font-size: 0.8em;
    padding: 5px 12px;
    margin-bottom: calc(var(--spacing-unit) * 1.25);
  }
  
  .hero-title {
    font-size: 1.8em;
    margin-bottom: calc(var(--spacing-unit) * 1.25);
  }
  
  .hero-subtitle {
    font-size: 1.05em;
    margin-bottom: calc(var(--spacing-unit) * 2.5);
  }
  
  /* Stats */
  .funding-stats {
    margin-bottom: calc(var(--spacing-unit) * 3);
  }
  
  .main-stats {
    justify-content: center;
    margin-bottom: calc(var(--spacing-unit) * 1.25);
  }
  
  .stat-amount {
    font-size: 1.8em;
  }
  
  .stat-label {
    font-size: 0.9em;
  }
  
  .progress-wrapper {
    margin: calc(var(--spacing-unit) * 2) 0;
  }
  
  .progress-bar {
    height: 6px;
  }
  
  .secondary-stats {
    grid-template-columns: repeat(3, 1fr);
    text-align: center;
    gap: calc(var(--spacing-unit) * 1.25);
    margin-top: calc(var(--spacing-unit) * 2);
    padding-top: calc(var(--spacing-unit) * 2);
  }
  
  .stat-item {
    text-align: center;
    padding-left: 0;
    padding: calc(var(--spacing-unit) * 1.25) calc(var(--spacing-unit) * 0.625);
  }
  
  .stat-icon {
    position: static;
    margin: 0 auto calc(var(--spacing-unit) * 0.625);
    width: 35px;
    height: 35px;
    font-size: 18px;
  }
  
  .stat-value {
    font-size: 1.5em;
    margin-bottom: 2px;
  }
  
  .stat-desc {
    font-size: 0.85em;
  }
  
  /* CTA */
  .hero-cta {
    justify-content: center;
    flex-wrap: wrap;
    gap: calc(var(--spacing-unit) * 2);
    margin-top: calc(var(--spacing-unit) * 3);
  }
  
  .hero-support-btn {
    width: 100%;
    max-width: 300px;
    text-align: center;
    justify-content: center;
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3.75);
    font-size: 1.05em;
  }
  
  /* Social Proof */
  .social-proof {
    flex-direction: column;
    text-align: center;
    margin-top: calc(var(--spacing-unit) * 3);
  }
  
  .backers-avatars {
    margin-bottom: calc(var(--spacing-unit));
  }
  
  .avatar {
    width: 36px;
    height: 36px;
    font-size: 0.85em;
  }
  
  .social-text {
    margin: 0;
    font-size: 0.9em;
  }
  
  /* Sections */
  .description,
  .rewards,
  .timeline,
  .author,
  .cta-hero {
    padding: calc(var(--spacing-unit) * 7.5) 0;
  }
  
  .container {
    padding: 0 calc(var(--spacing-unit) * 2);
  }
  
  h2 {
    font-size: 2em;
    margin-bottom: calc(var(--spacing-unit) * 3.75);
  }
  
  /* Game Features */
  .game-features {
    gap: calc(var(--spacing-unit) * 3.75);
  }
  
  .feature {
    padding: calc(var(--spacing-unit) * 3);
  }
  
  .feature-icon {
    width: 120px;
    height: 120px;
    margin-bottom: calc(var(--spacing-unit) * 2.5);
  }
  
  /* Rewards */
  .reward-tiers {
    gap: calc(var(--spacing-unit) * 2.5);
  }
  
  .reward-tier {
    padding: calc(var(--spacing-unit) * 3);
  }
  
  .reward-price {
    font-size: 2em;
  }
  
  /* Author */
  .author-content {
    grid-template-columns: 1fr;
    text-align: center;
    gap: calc(var(--spacing-unit) * 3.75);
    margin-bottom: calc(var(--spacing-unit) * 5);
  }
  
  .author-photo,
  .author-photo-2,
  .author-photo-3 {
    width: 200px;
    height: 200px;
    margin: 0 auto;
  }
  
  .author-info {
    padding: 0 calc(var(--spacing-unit) * 1.25);
  }
  
  .author-info h3 {
    font-size: 1.5em;
    margin-bottom: calc(var(--spacing-unit) * 1.25);
  }
  
  .author-info p {
    font-size: 1em;
    text-align: left;
    max-width: 500px;
    margin: calc(var(--spacing-unit) * 1.25) auto;
  }
  
  /* Timeline */
  .timeline-container {
    padding: 0 calc(var(--spacing-unit) * 1.25);
  }
  
  .timeline-item {
    flex-direction: column;
    text-align: center;
    padding: calc(var(--spacing-unit) * 3);
    margin: calc(var(--spacing-unit) * 2.5) 0;
    height: auto;
    min-height: auto;
  }
  
  .timeline-date {
    margin-right: 0;
    margin-bottom: calc(var(--spacing-unit) * 2);
    padding: calc(var(--spacing-unit) * 1.25) calc(var(--spacing-unit) * 2);
    font-size: 0.9em;
    width: 100%;
    min-width: auto;
  }
  
  .timeline-content {
    padding-left: 0;
  }
  
  /* CTA Footer */
  .cta-hero {
    padding: calc(var(--spacing-unit) * 5) 0;
  }
  
  .cta-hero-grid {
    grid-template-columns: 1fr;
    gap: calc(var(--spacing-unit) * 2.5);
  }
  
  .cta-hero-left {
    padding: calc(var(--spacing-unit) * 5) calc(var(--spacing-unit) * 3.75);
    order: 2;
  }
  
  .cta-hero-right {
    order: 1;
    height: 300px;
  }
  
  .cta-hero-left h2 {
    font-size: 1.8em;
  }
  
  .cta-hero-left p {
    font-size: 1em;
  }
  
  .cta-buttons {
    flex-direction: column;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2);
    margin-top: calc(var(--spacing-unit) * 3.75);
  }
  
  .cta-btn {
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3);
    font-size: 1em;
    width: 100%;
    max-width: 280px;
  }
  
  /* Image Slider */
  .image-slider {
    margin: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * -2);
    padding: calc(var(--spacing-unit) * 2) 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  
  .image-slider::-webkit-scrollbar {
    display: none;
  }
  
  .slider-container {
    gap: calc(var(--spacing-unit) * 2);
    padding: 0 calc(var(--spacing-unit) * 2);
    width: max-content;
    transition: none !important;
  }
  
  .slider-slide {
    width: 200px;
    height: 200px;
  }
  
  .slider-slide:hover {
    transform: none;
  }
  
  .slider-nav {
    display: none;
  }
  
  .slider-progress {
    display: none;
  }
  
  /* Modals */
  .modal {
    width: 95%;
    max-height: 90vh;
    margin: 10px;
  }
  
  .modal-header {
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 2.5);
  }
  
  .modal-header h2 {
    font-size: 1.3em;
  }
  
  .modal-close {
    top: 12px;
    right: 15px;
    font-size: 20px;
  }
  
  .modal-content {
    padding: calc(var(--spacing-unit) * 2.5);
    font-size: 0.95em;
  }
  
  .modal-content h3 {
    font-size: 1.1em;
    margin: calc(var(--spacing-unit) * 2) 0 calc(var(--spacing-unit)) 0;
  }
  
  .modal-actions {
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 2.5);
    flex-direction: column-reverse;
    gap: calc(var(--spacing-unit) * 1.25);
  }
  
  .modal-btn {
    width: 100%;
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2.5);
  }
  
  /* Single Form Modal */
  .single-form-modal {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
  }
  
  .form-grid {
    grid-template-columns: 1fr;
  }
  
  .payment-methods {
    grid-template-columns: 1fr;
  }
  
  .support-type-selector {
    flex-direction: column;
  }
  
  .suggested-amounts {
    justify-content: space-between;
  }
  
  .amount-btn {
    flex: 1 1 calc(50% - calc(var(--spacing-unit) * 0.625));
    text-align: center;
  }
  
  /* Currency Switcher Mobile */
  .currency-switcher {
    top: auto;
    bottom: 20px;
    right: 20px;
    padding: calc(var(--spacing-unit) * 0.5);
    background: rgba(255,255,255,0.98);
    border: 1px solid rgba(0,0,0,0.1);
    flex-direction: row;
    align-items: center;
  }
  
  .currency-switcher .exchange-rates-info {
    display: none;
  }
  
  .currency-btn {
    padding: calc(var(--spacing-unit)) calc(var(--spacing-unit) * 1.25);
    font-size: 0.85em;
    min-width: 40px;
  }
  
  .currency-btn .currency-text {
    display: none;
  }
  
  .currency-btn::after {
    content: attr(data-symbol);
    font-weight: 700;
  }
}

/* ===== VERY SMALL MOBILE (max-width: 480px) ===== */
@media screen and (max-width: 480px) {
  .slider-slide {
    width: 180px;
    height: 180px;
  }
  
  .slider-container {
    gap: calc(var(--spacing-unit) * 1.25);
    padding: 0 calc(var(--spacing-unit) * 1.25);
  }
  
  .hero-title {
    font-size: 1.6em;
  }
  
  .stat-amount {
    font-size: 1.6em;
  }
  
  .secondary-stats {
    grid-template-columns: 1fr;
    gap: calc(var(--spacing-unit) * 2);
  }
  
  .feature-icon {
    width: 100px;
    height: 100px;
  }
}

/* ===== LANDSCAPE MOBILE ORIENTATION ===== */
@media screen and (max-height: 600px) and (orientation: landscape) {
  .hero {
    min-height: auto;
    padding: calc(var(--spacing-unit) * 2.5) 0;
  }
  
  .modal {
    max-height: 95vh;
  }
  
  .single-form-modal {
    max-height: 95vh;
  }
}

/* ===== HIGH DPI SCREENS ===== */
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
  /* Use available images for retina displays */
  .author-photo {
    background-image: url('/images/author.webp');
  }
  
  .author-photo-2 {
    background-image: url('/images/kosnikov.webp');
  }
  
  .author-photo-3 {
    background-image: url('/images/nastya.webp');
  }
}

/* ===== PRINT STYLES ===== */
@media print {
  /* Hide interactive elements */
  .hero-cta,
  .currency-switcher,
  .slider-nav,
  .modal-overlay,
  .support-btn,
  .cta-buttons {
    display: none !important;
  }
  
  /* Optimize for print */
  body {
    font-size: 12pt;
    line-height: 1.5;
    color: black;
    background: white;
  }
  
  .hero {
    height: auto;
    page-break-after: always;
  }
  
  section {
    page-break-inside: avoid;
  }
  
  h2, h3 {
    page-break-after: avoid;
  }
  
  img {
    max-width: 100%;
    page-break-inside: avoid;
  }
}

/* ===== ACCESSIBILITY - REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .hero-image-wrapper:hover {
    transform: none;
  }
  
  .slider-container {
    transition: none;
  }
}

/* ===== MOBILE SAFARI & IOS SPECIFIC FIXES ===== */
@supports (-webkit-touch-callout: none) {
  /* Стили только для Safari/iOS */
  .modal-overlay.support-form-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
  }
  
  .modal-overlay.support-form-modal .modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    border-radius: 0;
    max-width: 100%;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: white;
  }
  
  .modal-overlay.support-form-modal .modal-header {
    flex-shrink: 0;
    min-height: 50px;
    border-bottom: 1px solid #e1e8ed;
  }
  
  .modal-overlay.support-form-modal .modal-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    position: relative;
    height: 100%;
  }
  
  /* Критично для iOS - правильная прокрутка без transform */
  @media (max-width: 768px) {
    /* Header не должен перекрывать контент */
    .support-form-modal .modal-header {
      position: relative !important;
      min-height: 60px;
      background: white;
    }
    
    .form-step {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      width: 100%;
      padding: 40px 20px 100px 20px;
      box-sizing: border-box;
      visibility: hidden;
      opacity: 0;
      min-height: 100%;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    
    .form-step.active {
      visibility: visible;
      opacity: 1;
      position: relative;
    }
    
    /* Специально для шага адреса - еще больше отступ */
    #step4.form-step {
      padding-top: 60px !important;
      padding-bottom: 300px !important;
    }
    
    /* Форма адреса на iOS */
    #step4 .address-grid {
      display: block !important;
      margin-bottom: 20px;
    }
    
    #step4 .address-grid > div {
      display: block;
      width: 100%;
      margin-bottom: 15px;
    }
    
    /* Важное уведомление о доставке */
    #step4 > div[style*="background: #fff3cd"] {
      position: relative;
      margin: 20px 0 30px 0;
      padding: 15px !important;
    }
    
    /* Чекбокс согласия */
    #deliveryAgreement {
      width: 20px;
      height: 20px;
      margin-right: 10px;
      flex-shrink: 0;
    }
    
    /* Дополнительный отступ для всех шагов на iOS */
    .form-step {
      padding-bottom: 250px !important;
    }
    
    /* Кнопки навигации для iOS - НЕ фиксированные */
    .form-step > div:last-child {
      position: relative !important;
      bottom: auto;
      left: auto;
      right: auto;
      background: white;
      padding: 20px 0;
      margin-top: 30px;
      margin-bottom: 50px;
      box-shadow: none;
      z-index: 100;
      display: flex;
      gap: 10px;
      justify-content: space-between;
    }
    
    /* Переопределяем стили для iOS */
    .support-form-modal .modal {
      width: 100% !important;
      max-width: 100% !important;
      border-radius: 0 !important;
    }
    
    /* Убираем transform анимации на iOS для стабильности */
    .form-step {
      transition: opacity 0.3s ease !important;
    }
    
    .form-step:not(.active) {
      opacity: 0;
      pointer-events: none;
      position: absolute !important;
    }
    
    .form-step.active {
      opacity: 1;
      pointer-events: auto;
      position: relative !important;
      height: auto !important;
      min-height: auto !important;
      max-height: none !important;
      overflow-y: visible !important;
      -webkit-overflow-scrolling: auto !important;
    }
    
    /* Фикс высоты контента */
    .modal-content {
      height: calc(100% - 50px);
      padding-bottom: 0 !important;
      position: relative;
      overflow: visible !important;
    }
    
    /* Модальное окно на iOS должно прокручиваться целиком */
    .support-form-modal .modal-content {
      height: auto !important;
      max-height: none !important;
      overflow-y: scroll !important;
      -webkit-overflow-scrolling: touch !important;
    }
    
    /* Специальные размеры для элементов формы на iOS */
    .form-input, select {
      height: 44px;
      padding: 10px 15px;
      border-radius: 8px;
      border: 1px solid #c8c8cd;
      background-color: white;
      font-size: 16px !important;
    }
    
    .form-btn {
      height: 44px;
      min-height: 44px;
      border-radius: 8px;
      font-size: 17px;
    }
    
    /* Убираем фиксированное позиционирование для всех кнопок на iOS */
    .form-step > div:last-child {
      position: relative !important;
      padding-bottom: 20px !important;
      margin-bottom: 50px !important;
    }
  }
  
  /* Для десктопа оставляем transform анимации */
  @media (min-width: 769px) {
    .form-step {
      -webkit-transform: translateX(100%);
      transform: translateX(100%);
    }
    
    .form-step.active {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
    
    .form-step.prev {
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%);
    }
    
    .form-step.next {
      -webkit-transform: translateX(100%);
      transform: translateX(100%);
    }
  }
  
  /* Фикс для кнопок */
  .form-btn, .currency-option, .reward-option {
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
  }
  
  /* Фикс для input полей */
  .form-input, select, .iti__tel-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 16px !important;
  }
  
  /* Убираем баги с модальными окнами */
  .modal-overlay {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
}

/* ===== ANDROID SPECIFIC FIXES ===== */
@supports not (-webkit-touch-callout: none) {
  @media screen and (max-device-width: 896px) {
    /* Исправление модальных окон для Android */
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      height: 100vh;
      height: 100dvh;
      overflow: hidden;
    }
    
    .modal {
      position: absolute;
      top: 10px;
      left: 10px;
      right: 10px;
      bottom: 10px;
      max-height: calc(100vh - 20px);
      max-height: calc(100dvh - 20px);
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    
    .modal-content {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 80px;
    }
    
    /* Кнопки внизу формы - не фиксированные */
    .form-step > div:last-child {
      position: relative;
      bottom: auto;
      background: white;
      padding: 20px 0;
      margin-top: 30px;
      margin-bottom: 60px;
      padding-left: 20px;
      padding-right: 20px;
      box-shadow: none;
      z-index: 10;
    }
    
    /* Дополнительный отступ сверху для Android */
    .form-step {
      padding-top: 30px !important;
    }
    
    /* Специальный фикс для шага адреса */
    #step4 {
      padding-top: 40px !important;
    }
    
    /* Упрощаем анимации на Android */
    .form-step {
      transition: none !important;
      transform: none !important;
    }
  }
}

/* ===== ANDROID CHROME/FIREFOX SPECIFIC ===== */
@supports (-webkit-appearance: none) and (not (-ms-ime-align: auto)) {
  /* Стили только для Android Chrome/Firefox */
  .modal-overlay.support-form-modal {
    z-index: 9999;
  }
  
  /* Кнопка закрытия для Android */
  .modal-overlay.support-form-modal .modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.05);
    border-radius: 50%;
    font-size: 24px;
    z-index: 101;
  }
  
  .modal-overlay.support-form-modal .modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    border-radius: 0;
    height: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
  }
  
  .modal-overlay.support-form-modal .modal-header {
    flex-shrink: 0;
    position: sticky;
    top: 0;
    background: white;
    z-index: 100;
    border-bottom: 1px solid #e1e8ed;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 10px 15px;
  }
  
  .modal-overlay.support-form-modal .modal-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  
  /* Форма на весь экран на Android */
  @media (max-width: 768px) {
    .modal-overlay.support-form-modal {
      height: calc(var(--vh, 1vh) * 100);
    }
    
    .modal-overlay.support-form-modal .modal {
      height: calc(var(--vh, 1vh) * 100);
      max-height: calc(var(--vh, 1vh) * 100);
    }
    
    .modal-overlay.support-form-modal .modal-header {
      position: sticky !important;
      top: 0;
      z-index: 102;
      background: white;
      min-height: 60px;
    }
    
    .modal-overlay.support-form-modal .modal-close {
      position: fixed !important;
      top: 15px;
      right: 15px;
    }
    
    .form-step {
      min-height: calc(var(--vh, 1vh) * 100 - 60px);
      padding: 50px 15px 100px 15px;
      box-sizing: border-box;
    }
    
    /* Специальный отступ для формы адреса на Android */
    #step4.form-step {
      padding-top: 70px !important;
    }
    
    /* Firefox на Android требует еще больше отступа */
    @-moz-document url-prefix() {
      #step4.form-step {
        padding-top: 90px !important;
      }
      
      .modal-overlay.support-form-modal .modal-close {
        top: 5px !important;
        right: 5px !important;
        width: 35px !important;
        height: 35px !important;
      }
    }
    
    /* Кнопки НЕ фиксированы на мобильных для избежания проблем */
    .form-step > div:last-child {
      position: relative !important;
      bottom: auto;
      left: auto;
      right: auto;
      background: white;
      padding: 20px 15px;
      margin-top: 30px;
      margin-bottom: 60px;
      box-shadow: none;
      display: flex;
      gap: 10px;
      justify-content: space-between;
      z-index: 1000;
    }
    
    .form-step > div:last-child .form-btn {
      flex: 1;
      margin: 0;
    }
    
    /* Отступ для контента */
    .form-step > *:not(:last-child) {
      margin-bottom: 20px;
    }
    
    /* Специальный фикс для шага адреса */
    #step4 .form-input,
    #step4 select {
      font-size: 16px !important;
      padding: 12px !important;
      border: 2px solid #e1e8ed !important;
    }
    
    #step4 .form-label {
      font-weight: bold;
      margin-bottom: 5px;
    }
  }
}

/* ===== ADDITIONAL INPUT FIXES ===== */
/* Дополнительные фиксы для iOS */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  input[type="tel"],
  input[type="email"],
  input[type="text"] {
    font-size: 16px;
  }
}

/* Дополнительные исправления для мобильных устройств */
@media screen and (max-device-width: 896px) {
  /* Исправление проблем с зумом при фокусе на input */
  input[type="email"],
  input[type="text"],
  input[type="tel"],
  select {
    font-size: 16px !important;
  }
}

/* ===== INTL-TEL-INPUT OVERRIDES ===== */
.iti__search-input {
  padding: 8px 12px;
  border: 1px solid #e1e8ed;
  border-radius: 4px;
  margin: 8px;
  width: calc(100% - 16px);
  font-size: 14px;
}

.iti__search-input:focus {
  outline: none;
  border-color: #667eea;
}

.iti__country-list {
  max-height: 200px;
}

.iti__country:hover {
  background-color: #f8f9fa;
}

.iti__highlight {
  background-color: #667eea !important;
  color: white !important;
}

/* Исправляем отступы для телефонного поля */
#phoneInput {
  padding-left: 90px !important;
}

/* Для Android - обычное поле без отступа для флага */
body.is-android #phoneInput {
  padding-left: 15px !important;
}

/* ===== ADDRESS GRID FIXES ===== */
/* Стили для сетки адреса - КРИТИЧНО для работы шага адреса! */
.address-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.address-full {
  grid-column: 1 / -1;
}

/* КРИТИЧНО: Адаптация формы адреса для мобильных */
@media screen and (max-width: 767px) {
  .address-grid {
    display: block !important;
    grid-template-columns: 1fr !important;
    gap: 15px;
  }
  
  .address-grid > div {
    display: block;
    width: 100%;
    margin-bottom: 15px;
  }
  
  .address-full {
    grid-column: 1;
    width: 100%;
  }
  
  #step4 {
    padding-bottom: 100px !important;
  }
  
  #step4 .address-grid {
    margin-bottom: 10px;
  }
  
  #step4 > div:last-child {
    margin-bottom: 0;
  }
}

/* ===== FALLBACK FOR OLD BROWSERS ===== */
/* Исправления для старых браузеров и iPad - fallback для CSS Grid */
@supports not (display: grid) {
  .address-grid {
    display: block !important;
  }
  
  .address-grid > div {
    margin-bottom: 15px;
    width: 100%;
    display: block;
  }
  
  .address-full {
    width: 100%;
  }
}

/* Дополнительный fallback для очень старых браузеров */
.address-grid.fallback {
  display: block;
}

.address-grid.fallback > div {
  display: block;
  width: 100%;
  margin-bottom: 15px;
}

/* ===== CURRENCY SWITCHER MOBILE ===== */
@media (max-width: 768px) {
  .currency-switcher {
    top: auto;
    bottom: 20px;
    right: 20px;
    padding: 4px;
    background: rgba(255,255,255,0.9);
    border: 1px solid rgba(0,0,0,0.1);
  }
  
  .currency-btn {
    padding: 8px 10px;
    font-size: 0.9em;
    min-width: 35px;
  }
  
  .currency-btn .currency-text {
    display: none;
  }
  
  .currency-btn::after {
    content: attr(data-symbol);
  }
}

/* ===== DARK MODE SUPPORT (future enhancement) ===== */
@media (prefers-color-scheme: dark) {
  /* Dark mode styles can be added here when implementing dark theme */
}