/* Custom Oval Button Styles */
.oval-button {
  /* Layout & Box Model */
  display: inline-block; 
  position: relative; 
  padding: 10px 10px;  /* Mike - if make padding too small the text of the button will overlap with the inner border line. */
  border: none;
  background-color: #0000FF; /* Vibrant blue 
  
  /* Shape & Typography */
  border-radius: 50px; /* was 50px Forces the oval shape */ 
  /*  height: 4rem;" */
  color: #ffffff;   /* White */
  /*color: inherit; */ /* Forces the link to use the button's white text color */

  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  text-decoration: none;  
  text-align: center;
  /* line-height: 2rem; */ /* Explicit line-height ensures predictable vertical height */
   
  /* Settings & Transitions */ 
  cursor: pointer;
  outline: none;
  user-select: none;
  box-sizing: border-box;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

/* Inner Oval Line */
.oval-button::after { 
  content: "";
  position: absolute;
  
  /* Positioning slightly inside the main edge */
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  
  /* Inner Line Construction */
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 46px; /* Was 46. Matches the outer curve radius minus the offset */
  pointer-events: none; /* Allows clicks to pass through to the button */
  box-sizing: border-box;
}

/* Hover State */
.oval-button:hover {
  background-color: #3158c9;
}

/* Depressed Active State (Clicking Effect) */
.oval-button:active {
  transform: scale(0.96);
}