/* Mobile Responsive Styles */
@media (max-width: 576px) {
  /* Force full screen modal dialog */
  #rental-login-backdrop .modal-dialog {
    max-width: 100% !important;
    margin: 0;
    height: 100%;
  }

  /* Full screen content container */
  #rental-login-backdrop .modal-content {
    height: 100%;
    min-height: 100vh;
    border-radius: 0;
    border: none;
    padding: 20px;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Align content to top */
  }

  /* Reposition Close Button to Top Left and make it an Arrow */
  .rental-login-close {
    top: 40px;
    left: 20px;
    right: auto;
    width: 30px;
    height: 30px;
    font-size: 0; /* Hide the × text */
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .rental-login-close::before {
    content: "←"; /* Unicode Left Arrow */
    font-size: 32px;
    color: #333;
    display: block;
    line-height: 1;
    font-weight: 300; /* Thinner look like design */
  }

  /* Typography Adjustments */
  .rental-login-title {
    text-align: left;
    margin-top: 150px; /* Push down below the arrow */
    font-size: 32px; /* Large title */
    line-height: 1.2;
  }

  .rental-login-subtitle {
    text-align: left;
    font-size: 16px;
    margin-bottom: 30px;
  }

  /* Input fields */
  .rental-input-container {
    margin-bottom: 25px;
  }

  .phone-input-wrapper {
    height: 55px; /* Slightly taller touch target */
  }

  /* Button stuck to bottom or just normal flow? 
     Design shows it below input. Normal flow is fine.
  */

  /* Gender Toggle on Mobile */
  .gender-toggle-wrapper {
    flex-direction: row;
    justify-content: space-between;
  }
}