/* Potter clay colors */
:root {
    --potter-clay-primary: #8B4513;
    --potter-clay-hover: #A0522D;
    --potter-clay-active: #6B3711;
    --potter-clay-disabled: #D2B48C;
  }
  
  /* Common button styles */
  .submit-btn {
    background-color: var(--potter-clay-primary);
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    margin: 16px 0;
    text-align: center;
  }
  
  .submit-btn:hover {
    background-color: var(--potter-clay-hover);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(139, 69, 19, 0.2);
  }
  
  .submit-btn:active {
    background-color: var(--potter-clay-active);
    transform: translateY(0);
    box-shadow: none;
  }
  
  .submit-btn:disabled {
    background-color: var(--potter-clay-disabled);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }
  
  /* Modal form styles */
  .form-step {
    padding: 20px;
  }
  
  .form-group {
    margin-bottom: 16px;
  }
  
  .form-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
  }
  
  .form-group input:focus {
    outline: none;
    border-color: var(--potter-clay-primary);
    box-shadow: 0 0 0 2px rgba(139, 69, 19, 0.1);
  }
  
  .error-message {
    color: #dc3545;
    font-size: 14px;
    margin-top: 8px;
  }
  
  /* OTP specific styles */
  #otpInput {
    letter-spacing: 4px;
    text-align: center;
    font-size: 18px;
  }
  
  .otp-message {
    color: #666;
    margin-bottom: 16px;
    text-align: center;
  }
  
  #otpTimer {
    text-align: center;
    color: var(--potter-clay-primary);
    font-size: 14px;
    margin-top: 8px;
  }