/* ============================================
   SAFARI-SPECIFIC FIXES FOR FLAG IMAGES
   Исправления для корректного отображения изображений флагов в Safari
   ============================================ */

.nav-flag,
.country-dropdown__flag,
.country-card__flag {
  /* Force hardware acceleration for better rendering */
  -webkit-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
  
  /* Safari-specific image rendering */
  image-rendering: -webkit-optimize-contrast !important;
  image-rendering: crisp-edges !important;
  -webkit-font-smoothing: antialiased !important;
  
  /* Ensure proper display */
  display: inline-block !important;
  vertical-align: middle !important;
  
  /* Prevent image distortion */
  object-fit: cover !important;
  
  /* Prevent selection */
  -webkit-user-select: none !important;
  user-select: none !important;
  
  /* Force proper display */
  overflow: visible !important;
}

/* ============================================
   SYMBOL ICONS FIXES (arrows, etc.)
   ============================================ */

.nav-arrow,
.country-dropdown__toggle-arrow {
  /* Force hardware acceleration */
  -webkit-transform: translateZ(0) !important;
  transform: translateZ(0) !important;
  
  /* Safari SVG rendering */
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
  
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  
  /* Prevent breaking */
  white-space: nowrap !important;
}

.nav-arrow svg,
.country-dropdown__toggle-arrow svg {
  /* Force proper SVG rendering in Safari */
  -webkit-transform: translateZ(0) !important;
  transform: translateZ(0) !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  fill: currentColor !important;
  /* Safari specific fixes */
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
}

/* ============================================
   SAFARI-SPECIFIC MEDIA QUERIES
   ============================================ */

@supports (-webkit-appearance: none) {
  /* Safari-specific fixes for flag images */
  .nav-flag,
  .country-dropdown__flag,
  .country-card__flag {
    /* Force proper image rendering in Safari */
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: crisp-edges !important;
    -webkit-font-smoothing: antialiased !important;
    
    /* Force rendering */
    -webkit-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important;
    
    /* Prevent Safari from modifying images */
    -webkit-user-select: none !important;
    user-select: none !important;
    
    /* Force display */
    display: inline-block !important;
    vertical-align: middle !important;
    object-fit: cover !important;
  }
  
  /* Fix for Safari's transform issues */
  .nav-dropdown-toggle.active .nav-arrow {
    -webkit-transform: rotate(180deg) translateZ(0) !important;
    transform: rotate(180deg) translateZ(0) !important;
  }
  
  .nav-dropdown-toggle.active .nav-arrow svg,
  .country-dropdown__toggle.active .country-dropdown__toggle-arrow svg {
    -webkit-transform: rotate(0deg) translateZ(0) !important;
    transform: rotate(0deg) translateZ(0) !important;
  }
}

/* ============================================
   iOS SAFARI SPECIFIC FIXES
   ============================================ */

@supports (-webkit-touch-callout: none) {
  .nav-flag,
  .country-dropdown__flag,
  .country-card__flag {
    /* iOS Safari specific optimizations for flag images */
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
    
    /* Prevent iOS from scaling images */
    -webkit-user-select: none !important;
    user-select: none !important;
    
    /* Better rendering on iOS */
    -webkit-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important;
    
    /* Force proper image rendering */
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: crisp-edges !important;
    object-fit: cover !important;
    
    /* Force proper display */
    display: inline-block !important;
    vertical-align: middle !important;
  }
}

/* ============================================
   FIX FOR SAFARI'S EMOJI RENDERING BUG
   ============================================ */

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .nav-flag,
  .country-dropdown__flag,
  .country-card__flag {
    /* Force Safari to use proper image rendering */
    display: inline-block !important;
    vertical-align: middle !important;
    
    /* Force proper image rendering */
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: crisp-edges !important;
    object-fit: cover !important;
    
    /* Prevent Safari from modifying */
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
  }
}

/* ============================================
   ADDITIONAL SAFARI FORCE FIXES
   ============================================ */

/* Force image rendering for all Safari versions */
_::-webkit-full-page-media, _:future, :root .nav-flag,
_::-webkit-full-page-media, _:future, :root .country-dropdown__flag,
_::-webkit-full-page-media, _:future, :root .country-card__flag {
  image-rendering: -webkit-optimize-contrast !important;
  image-rendering: crisp-edges !important;
  -webkit-font-smoothing: antialiased !important;
  display: inline-block !important;
  vertical-align: middle !important;
  object-fit: cover !important;
}

/* Safari 10+ specific */
@supports (display: -webkit-flex) {
  .nav-flag,
  .country-dropdown__flag,
  .country-card__flag {
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: crisp-edges !important;
    -webkit-font-smoothing: antialiased !important;
    object-fit: cover !important;
  }
}

/* ============================================
   FIX FOR DROPDOWN ITEMS WITH FLAGS
   ============================================ */

.nav-dropdown-item,
.country-dropdown__item {
  /* Ensure proper alignment of flags in Safari */
  -webkit-align-items: center !important;
  align-items: center !important;
  
  /* Fix for Safari's flexbox issues */
  -webkit-box-align: center !important;
  -moz-box-align: center !important;
}

.nav-dropdown-item .nav-flag,
.country-dropdown__item .country-dropdown__flag {
  /* Additional spacing fix for Safari */
  margin-right: 12px !important;
  flex-shrink: 0 !important;
}

/* ============================================
   FIX FOR SAFARI'S LINE-HEIGHT ISSUES
   ============================================ */

.nav-dropdown-item,
.country-dropdown__item {
  line-height: 1.5 !important;
  min-height: 44px !important; /* Ensure touch target size */
}

.nav-dropdown-item .nav-flag,
.country-dropdown__item .country-dropdown__flag {
  line-height: 1 !important;
  vertical-align: middle !important;
}

/* ============================================
   FIX FOR SAFARI'S TEXT RENDERING
   ============================================ */

.nav-country-name,
.country-dropdown__name {
  /* Fix text alignment with flags in Safari */
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  vertical-align: middle !important;
}

/* ============================================
   RESPONSIVE FIXES FOR SAFARI
   ============================================ */

@media (max-width: 767px) {
  .nav-flag {
    width: 28px !important;
    height: 21px !important;
  }
  
  .country-dropdown__flag {
    width: 36px !important;
    height: 27px !important;
  }
  
  /* Fix for mobile Safari */
  .nav-dropdown-item .nav-flag,
  .country-dropdown__item .country-dropdown__flag {
    margin-right: 10px !important;
  }
}

/* ============================================
   CRITICAL SAFARI FIXES - HIGHEST PRIORITY
   ============================================ */

/* Force all flag elements to use proper image rendering */
html:lang(en) .nav-flag,
html:lang(en) .country-dropdown__flag,
html:lang(en) .country-card__flag {
  image-rendering: -webkit-optimize-contrast !important;
  image-rendering: crisp-edges !important;
  -webkit-font-smoothing: antialiased !important;
  display: inline-block !important;
  vertical-align: middle !important;
  object-fit: cover !important;
}

/* Additional Safari-specific selector */
body:not(.no-safari) .nav-flag,
body:not(.no-safari) .country-dropdown__flag,
body:not(.no-safari) .country-card__flag {
  image-rendering: -webkit-optimize-contrast !important;
  image-rendering: crisp-edges !important;
  object-fit: cover !important;
}

/* ============================================
   SAFARI VIEWPORT FIXES (iOS Safari)
   ============================================ */

/* Fix for iOS Safari viewport height issue */
@supports (-webkit-touch-callout: none) {
  :root {
    --vh: 1vh;
  }
  
  /* Fix for fixed positioning in iOS Safari */
  #root {
    position: fixed !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
  }
  
  /* Fix for wrapper min-height in iOS Safari */
  .wrapper {
    min-height: -webkit-fill-available !important;
  }
}

/* ============================================
   SAFARI TRANSFORM FIXES
   ============================================ */

/* Add -webkit- prefix for transforms in Safari */
@keyframes shine {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  20% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  60% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }
  80% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}

/* Ensure stars have webkit transform support */
#root .star {
  -webkit-transform: translateZ(0) !important;
  transform: translateZ(0) !important;
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
  -webkit-perspective: 1000px !important;
  perspective: 1000px !important;
}

/* ============================================
   SAFARI CSS FUNCTIONS FIXES
   ============================================ */

/* Fallback for min() function (Safari < 14) */
@supports not (max-width: min(1920px, 100vw)) {
  .brands-item {
    max-width: 1920px;
  }
  
  @media (max-width: 1980px) {
    .brands-item {
      max-width: calc(100vw - 60px);
    }
  }
}

/* ============================================
   SAFARI POSITION FIXED FIXES
   ============================================ */

/* Fix for position: fixed in iOS Safari */
@supports (-webkit-touch-callout: none) {
  #root {
    position: fixed !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important;
    /* Force hardware acceleration */
    will-change: transform !important;
  }
}

/* ============================================
   SAFARI BOX-SHADOW OPTIMIZATION
   ============================================ */

/* Optimize box-shadow rendering in Safari */
#root .star {
  -webkit-filter: blur(0) !important;
  filter: blur(0) !important;
  /* Force GPU acceleration for shadows */
  -webkit-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
}