/* 
  iPhone Safari-specific CSS fixes
  This file targets only iOS Safari to ensure consistent appearance with Android
*/

/* Target iOS Safari specifically using CSS feature detection */
@supports (-webkit-touch-callout: none) {
  /* Fix for About section background */
  .about-section {
    position: relative;
    isolation: isolate; /* Creates a new stacking context */
  }
  
  .about-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('about.jpg');
    background-size: cover;
    background-position: center;
    opacity: 0.08;
    z-index: -1; /* Place behind content instead of using z-index: 50 */
    -webkit-transform: translateZ(0); /* Force hardware acceleration */
  }
  
  /* Ensure about-content appears properly above the background */
  .about-content {
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(5px); /* Add subtle blur effect for iOS */
  }
  
  /* Fix for parallax sections on iOS */
  .parallax {
    background-attachment: scroll; /* Instead of fixed */
    background-position: center center;
    -webkit-transform: translateZ(0); /* Force hardware acceleration */
  }
  
  /* Fix for hero section on iOS */
  .hero {
    position: relative;
    background-color: #000; /* Fallback color */
  }
  
  .hero::after {
    content: '';
    position: absolute; /* Not fixed */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('luxury.jpg');
    background-position: center;
    background-size: cover;
    z-index: 0;
    -webkit-transform: translateZ(0);
  }
  
  /* Fix for circular image in about section */
  .circular-image {
    -webkit-transform: translateZ(0); /* Force hardware acceleration */
    will-change: transform; /* Hint to browser about animations */
  }
  
  .circular-image::after {
    /* Simplify the gradient for better iOS rendering */
    background: linear-gradient(120deg, 
      rgba(255,255,255,0.7) 0%, 
      rgba(255,255,255,0.2) 70%);
  }
  
  /* Fix for trip cards to ensure proper rendering on iOS */
  .trip-grid {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  }
  
  /* Fix for amahle-trips grid on iOS */
  .amahle-trips-grid {
    display: -webkit-grid;
    display: grid;
    -webkit-transform: translateZ(0);
  }
  
  /* Fix for slideshow transitions on iOS */
  .trip-slideshow .slide {
    -webkit-transition: opacity 0.6s ease-in-out;
    transition: opacity 0.6s ease-in-out;
    -webkit-transform: translateZ(0);
  }
  
  /* Fix for form fields on iOS to prevent zoom on focus */
  .luxury-form input,
  .luxury-form textarea {
    font-size: 16px; /* Prevents iOS zoom on input focus */
    -webkit-appearance: none; /* Removes default iOS styling */
    border-radius: 5px;
  }
  
  /* Fix for iOS notch handling */
  @supports (padding: max(0px)) {
    .hero-content,
    .container {
      padding-left: max(20px, env(safe-area-inset-left));
      padding-right: max(20px, env(safe-area-inset-right));
    }
    
    /* Ensure bottom padding for notched devices */
    footer {
      padding-bottom: max(20px, env(safe-area-inset-bottom));
    }
  }
  
  /* Fix animations for iOS */
  @keyframes shimmer {
    0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
    100% { -webkit-transform: translateX(100%); transform: translateX(100%); }
  }
  
  /* Fix for video showcase on iOS */
  .video-container video {
    -webkit-object-fit: cover;
    object-fit: cover;
  }
  
  /* Fix preloader animations for iOS */
  .loader-7 {
    -webkit-animation: loader7-1 1.5s infinite linear;
    animation: loader7-1 1.5s infinite linear;
  }
  
  .loader-7:before {
    -webkit-animation: loader7-2 1s infinite alternate ease-in-out;
    animation: loader7-2 1s infinite alternate ease-in-out;
  }
  
  .loader-7:after {
    -webkit-animation: loader7-2 1s 1s infinite alternate ease-in-out;
    animation: loader7-2 1s 1s infinite alternate ease-in-out;
  }
  
  @-webkit-keyframes loader7-1 {
    0%   { -webkit-transform: rotate(20deg); transform: rotate(20deg); }
    100% { -webkit-transform: rotate(380deg); transform: rotate(380deg); }
  }
  
  @-webkit-keyframes loader7-2 {
    0%   { 
      -webkit-transform: scale(0); 
      transform: scale(0); 
      background: rgba(255, 255, 255, 0.9);
    }
    100% { 
      -webkit-transform: scale(1);
      transform: scale(1);
      background: #c9a959;
    }
  }
}