/* 
* RESPONSIVE STYLES FOR PAYER AUTH DEMO
* Optimized for mobile devices including iPhone 14 Pro Max
*/

/* Tablet Styles */
@media screen and (max-width: 1024px) {
  .main-content {
    padding: 32px 24px;
  }

  .inline-config-container {
    flex-direction: column;
    gap: 20px;
  }
  
  /* Adjust pre elements width for tablets */
  #requestPayload, #responsePayload, #enrollRequestPayload, #enrollResponsePayload, #validateRequestPayload, #validateResponsePayload {
    width: 95%;
    max-width: 100%;
    font-size: 0.95em;
  }
  
  .tab-content {
    padding: 24px 20px 0 20px;
  }
}

/* Mobile Styles */
@media screen and (max-width: 767px) {
  .layout {
    flex-direction: column;
  }
  
  .sidebar {
    width: 100%;
    min-height: auto;
    padding: 16px 0;
    border-right: none;
    border-bottom: 1px solid #e3e8ee;
  }
  
  .main-content {
    padding: 24px 16px;
  }
  
  .tab-button {
    padding: 10px 16px 8px 16px;
    font-size: 0.95em;
  }
  
  .tab-content {
    padding: 20px 16px 0 16px;
  }
  
  /* Make pre elements full width on mobile */
  #requestPayload, #responsePayload, #enrollRequestPayload, #enrollResponsePayload, #validateRequestPayload, #validateResponsePayload {
    width: 100%;
    padding: 12px;
    font-size: 0.9em;
    max-height: 300px;
  }
  
  /* Adjust button sizes for mobile */
  #setup-button, #enroll-button, #validate-button, #restart-button {
    min-width: 100%;
  }
  
  .setup-row {
    flex-direction: column;
    width: 100%;
    max-width: 100%;
  }
  
  /* Specific optimizations for iPhone 14 Pro Max */
  @media screen and (max-width: 430px) {
    .main-content h1 {
      font-size: 1.8em;
    }
    
    .tab-button {
      padding: 8px 12px;
      font-size: 0.9em;
    }
    
    #requestPayload, #responsePayload, #enrollRequestPayload, #enrollResponsePayload, #validateRequestPayload, #validateResponsePayload {
      font-size: 0.85em;
      padding: 10px;
    }
    
    .inline-radio-option label {
      padding: 6px 10px;
      font-size: 0.85em;
    }
    
    /* Ensure validate success alert matches pre width */
    .validate-success-alert, .frictionless-info-alert {
      width: 100%;
      max-width: 100%;
    }
  }
}