/* Mobile/Tablet Layout - Hidden by default */
.mobile-layout {
  display: none;
}

/* Mobile Responsive Design */
@media (max-width: 1024px) {
  /* Hide desktop layout on mobile */
  .desktop-layout {
    display: none !important;
  }
  
  .mobile-layout {
    display: block;
    padding: 2%;
    text-align: center;
    background: url('assets/langdi-pc.png') center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 100vh;
    width: 100%;
    position: relative;
  }
  
  .mobile-layout img.mobile {
    display: block;
    margin: 0 auto 2% auto;
    max-width: 100%;
    height: auto;
  }
  
  .logo-betzed.mobile {
    width: 60% !important;
    max-width: 200px !important;
    margin-bottom: 2% !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    height: auto !important;
  }
  
  .new-member-hingga.mobile {
    width: 90% !important;
    max-width: 400px !important;
    margin-bottom: 2% !important;
    position: relative !important;
    top: 2% !important;
    left: auto !important;
    transform: none !important;
    height: auto !important;
  }
  
  .rp-200-0001.mobile {
    width: 60% !important;
    max-width: 250px !important;
    margin-bottom: 2% !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    height: auto !important;
  }
  
  .vip-transfer-event-max-rp.mobile {
    width: 90% !important;
    max-width: 400px !important;
    margin-bottom: 3% !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    height: auto !important;
  }
  
  .key-model-copy.mobile {
    width: 100% !important;
    height: auto !important;
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 10 !important;
    margin: 0 !important;
  }
  
  .register-button.mobile {
    width: 90% !important;
    max-width: 400px !important;
    margin-bottom: 1.5% !important;
    position: fixed !important;
    left: 50% !important;
    bottom: 35% !important;
    top: auto !important;
    height: auto !important;
    z-index: 15 !important;
    animation: registerPulseMobile 1.5s ease-in-out infinite !important;
  }
  
  .rp-200-0001.mobile.rp-button {
    width: 50% !important;
    max-width: 200px !important;
    margin-bottom: 3% !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    height: auto !important;
  }
  
  .cards-container.mobile {
    display: flex !important;
    justify-content: center !important;
    gap: 1% !important;
    margin-bottom: 0 !important;
    flex-wrap: nowrap !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 20% !important;
    top: auto !important;
    transform: none !important;
    z-index: 15 !important;
    width: 100% !important;
    padding: 0 2% !important;
    box-sizing: border-box !important;
  }
  
  .cards-container.mobile img {
    width: 85% !important;
    max-width: none !important;
    margin: 0 !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    height: auto !important;
    flex-shrink: 0 !important;
    min-width: 0 !important;
    aspect-ratio: unset !important;
    object-fit: contain !important;
  }
  
  /* iPad specific - key-model-copy fit 90% width */
  @media (min-width: 768px) and (max-width: 1366px) {
    .key-model-copy.mobile {
      width: 80% !important;
    }
    
    .cards-container.mobile img {
      width: 60% !important;
    }

    .register-button.mobile {
        width: 65% !important;
        max-width: none !important;
        animation: registerPulseMobile 1.5s ease-in-out infinite !important;
    }
  }
  
  .gift-box-2.mobile {
    width: 140% !important;
    max-width: none !important;
    margin-bottom: 0 !important;
    position: fixed !important;
    left: -10% !important;
    bottom: 0 !important;
    top: auto !important;
    transform: none !important;
    height: auto !important;
    z-index: 5 !important;
  }
  
  .logo-bank-1.mobile {
    width: 90% !important;
    max-width: 400px !important;
    margin-bottom: 0 !important;
    position: fixed !important;
    left: 50% !important;
    bottom: 5% !important;
    top: auto !important;
    transform: translateX(-50%) !important;
    height: auto !important;
    z-index: 15 !important;
  }
}