/* Custom styles for Orynx AI Labs Comic Factory - Arabic RTL */
body {
  font-family: 'Noto Sans Arabic', 'Tajawal', 'Cairo', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  direction: rtl;
  text-align: right;
}

/* Arabic typography optimizations */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.4;
}

p, span, div {
  line-height: 1.6;
}

/* RTL-specific adjustments */
.rtl-flip {
  transform: scaleX(-1);
}

.ltr-content {
  direction: ltr;
  text-align: left;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Enhanced iframe responsiveness */
.iframe-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0.5rem;
}

/* Mobile optimizations for iframe */
@media (max-width: 768px) {
  .iframe-container {
    padding-bottom: 120%; /* Taller aspect ratio for mobile */
    min-height: 600px; /* Ensure minimum usable height */
  }
  
  .iframe-container iframe {
    min-height: 600px; /* Minimum height for mobile */
    border-radius: 0.25rem; /* Smaller border radius on mobile */
  }
}

/* Extra small mobile screens */
@media (max-width: 480px) {
  .iframe-container {
    padding-bottom: 130%; /* Even taller for very small screens */
    min-height: 550px;
  }
  
  .iframe-container iframe {
    min-height: 550px;
  }
}

/* Mobile-specific iframe optimizations */
@media (max-width: 768px) {
  /* Ensure iframe content is touch-friendly */
  .iframe-container iframe {
    touch-action: manipulation;
    -webkit-overflow-scrolling: touch;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  
  /* Prevent zoom issues on mobile */
  .mobile-iframe-wrapper {
    overflow: hidden;
    position: relative;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Mobile padding adjustments */
  .mobile-padding {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  
  /* Better mobile typography */
  body {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
}

/* Landscape mode optimizations for mobile */
@media (max-width: 768px) and (orientation: landscape) {
  .iframe-container {
    padding-bottom: 70%; /* Shorter for landscape */
    min-height: 400px;
  }
  
  .iframe-container iframe {
    min-height: 400px;
  }
}

/* iPhone specific optimizations */
@media (max-width: 414px) {
  .iframe-container {
    padding-bottom: 140%; /* Optimized for iPhone portrait */
  }
}

/* iPad and tablet optimizations */
@media (min-width: 768px) and (max-width: 1024px) {
  .iframe-container {
    padding-bottom: 65%; /* Good aspect ratio for tablets */
    min-height: 500px;
  }
}

/* Custom animations */
.fade-in {
  animation: fadeIn 0.6s ease-in-out;
}

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

/* Gradient text effects */
.gradient-text {
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Enhanced shadows */
.shadow-orynx {
  box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.1), 0 10px 10px -5px rgba(37, 99, 235, 0.04);
}

/* Loading spinner for iframe */
.iframe-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  background: linear-gradient(135deg, #f8fafc, #e2e8f0);
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #e2e8f0;
  border-top: 4px solid #2563eb;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}