/* Portrait Mode Enforcement for Mobile Devices */

/* Overlay shown when mobile device is in landscape mode */
.landscape-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #5ec576 0%, #4bbb7d 100%);
  z-index: 10000;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
  font-family: 'Poppins', sans-serif;
  padding: 20px;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  /* iPhone specific optimizations */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: opacity;
}

.landscape-overlay-content {
  max-width: 300px;
  animation: fadeInUp 0.5s ease-out;
}

.landscape-overlay h2 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(75, 187, 125, 0.5);
}

.landscape-overlay p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: 20px;
  color: #f0f0f0;
  text-shadow: 0 1px 2px rgba(75, 187, 125, 0.3);
}

.rotate-icon {
  font-size: 48px;
  color: #ffffff;
  margin-bottom: 20px;
  animation: rotatePhone 2s ease-in-out infinite;
  text-shadow: 0 2px 10px rgba(75, 187, 125, 0.3);
}

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

@keyframes rotatePhone {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-15deg);
  }
  75% {
    transform: rotate(15deg);
  }
}

/* Show overlay on mobile devices in landscape mode */
@media only screen and (max-width: 950px) and (orientation: landscape) and (max-height: 450px) {
  .landscape-overlay {
    display: flex !important;
  }

  /* Hide main content when overlay is shown */
  body.landscape-locked {
    overflow: hidden;
  }

  body.landscape-locked > *:not(.landscape-overlay) {
    display: none !important;
  }
}

/* More specific targeting for small phones */
@media only screen and (max-height: 500px) and (orientation: landscape) {
  .landscape-overlay {
    display: flex !important;
  }
}

/* iPhone SE and other small devices in landscape */
@media only screen and (max-width: 568px) and (max-height: 320px) and (orientation: landscape) {
  .landscape-overlay {
    display: flex !important;
  }
}

/* iPhone specific targeting */
/* iPhone SE (1st, 2nd gen) in landscape */
@media only screen and (device-width: 320px) and (device-height: 568px) and (orientation: landscape) {
  .landscape-overlay {
    display: flex !important;
  }
}

/* iPhone 6/7/8 in landscape */
@media only screen and (device-width: 375px) and (device-height: 667px) and (orientation: landscape) {
  .landscape-overlay {
    display: flex !important;
  }
}

@media only screen and (device-width: 414px) and (device-height: 736px) and (orientation: landscape) {
  .landscape-overlay {
    display: flex !important;
  }
}

@media only screen and (device-width: 390px) and (device-height: 844px) and (orientation: landscape) {
  .landscape-overlay {
    display: flex !important;
  }
}

/* iPhone 13, 14, 15 series in landscape */
@media only screen and (device-width: 428px) and (device-height: 926px) and (orientation: landscape) {
  .landscape-overlay {
    display: flex !important;
  }
}

/* iPhone 14 Pro Max, 15 Pro Max in landscape (932x430) */
@media only screen and (max-width: 932px) and (max-height: 430px) and (orientation: landscape) {
  .landscape-overlay {
    display: flex !important;
  }
}

/* iPhone 14 Pro, 15 Pro in landscape (852x393) */
@media only screen and (max-width: 852px) and (max-height: 393px) and (orientation: landscape) {
  .landscape-overlay {
    display: flex !important;
  }
}

/* Generic large iPhone landscape (wider than 430px but still mobile) */
@media only screen and (max-width: 950px) and (max-height: 450px) and (orientation: landscape) {
  .landscape-overlay {
    display: flex !important;
  }
}

/* Allow landscape on tablets (iPad and larger) - but not on iPhones */
@media only screen and (min-width: 1024px) and (min-height: 768px) {
  .landscape-overlay {
    display: none !important;
  }
}

/* Additional safety for tablets */
@media only screen and (min-width: 1024px) and (orientation: landscape) {
  .landscape-overlay {
    display: none !important;
  }
}