.submit-container {
    display: flex;
    margin-top: 0px;
    height: var(--submit-height, 15px);
    justify-content: center;
    align-items: flex-start;
    position: relative;
    z-index: 20; /* Higher than agreement notice (15) */
    transition: height 0.4s ease-in-out;
    overflow: hidden;
    margin-bottom: 20px;
}

#submitButton {
    display: none;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    margin-top: 3px;
    position: relative;
    z-index: 21; /* Ensure button is on top */
    pointer-events: none; /* Make it unclickable when hidden */
    visibility: hidden; /* Ensure it's completely invisible when opacity is 0 */
    overflow: hidden; /* Ensure shine effect is contained */
}

#submitButton[style*="opacity: 1"] {
    pointer-events: auto; /* Re-enable clicking when shown */
    visibility: visible; /* Make it visible when opacity is 1 */
}

#submitButton.processing {
    background: #666666;
}

#submitButton.processing::after {
    content: '';
    position: absolute;
    right: 15px;
    top: 50%;
    width: 4px;
    height: 4px;
    background: white;
    border-radius: 50%;
    animation: processingDots 1s infinite;
    margin-top: -2px;
}

#submitButton:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    background: #999999 !important;
    transform: none !important;
    box-shadow: none !important;
    pointer-events: none;
}

#submitButton:disabled:hover {
    background: #999999 !important;
    transform: none !important;
}

/* Error states with darker background like processing */
#submitButton.page-limit-error,
#submitButton.insufficient-balance {
    background: #666666 !important;
    opacity: 0.8 !important;
}

#submitButton.page-limit-error:hover,
#submitButton.insufficient-balance:hover {
    background: #666666 !important;
}

@media (max-width: 600px) {
  .action-button,
  .global-actions .action-button,
  .page-actions .action-button {
    font-size: 14px;
    padding: 8px 14px;
    border-radius: 20px;
  }
  
  /* Fix for submit button on mobile - ensure it's completely hidden when opacity is 0 */
  #submitButton {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
  }
  
  /* Only show when opacity is set to 1 by JavaScript */
  #submitButton[style*="opacity: 1"] {
    visibility: visible;
  }
  
  /* Ensure submit container doesn't show any overflow */
  .submit-container {
    overflow: hidden;
    min-height: 0;
  }
}

/* Small-medium mobile - intermediate sizing for buttons */
@media (max-width: 480px) {
  .action-button,
  .global-actions .action-button,
  .page-actions .action-button {
    font-size: 13px;
    padding: 7px 12px;
    border-radius: 18px;
  }
}

/* Extra small mobile - covers 350-450px range */
@media (max-width: 400px) {
  .action-button,
  .global-actions .action-button,
  .page-actions .action-button {
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 16px;
  }
}

/* Button Loading Spinner Styles */
.action-button .loading-spinner-container {
    display: none; /* Hidden by default */
    width: 20px; /* Adjust size as needed */
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff; /* Spinner color */
    animation: spin 1s ease-in-out infinite;
    margin-left: 10px; /* Space between text and spinner if text were visible */
}

.action-button.button-loading .button-text {
    display: none; /* Hide text when loading */
}

.action-button.button-loading .loading-spinner-container {
    display: inline-block; /* Show spinner when loading */
    margin-left: 0; /* Center spinner if text is hidden */
}

/* Ensure button keeps its size when loading */
.action-button.button-loading {
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Agreement notice styling */
.anonymous-agreement-notice {
    position: relative;
    z-index: 15; /* Higher than submit-container */
}

/* === SUBMIT BUTTON SHINE ENHANCEMENT === */
/* Ensure submit button works perfectly with universal shine effect */
#submitButton {
    /* Already has position: relative which is perfect for shine effect */
    overflow: hidden; /* Ensure shine effect is contained */
}