/* 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;
    max-height: 100vh;
    border-radius: 0;
    border: none;
    padding: 20px 10px;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Align content to top */
    overflow-y: hidden !important;
  }

  /* Override Bootstrap's default modal scroll on small screens */
  #rental-login-backdrop .modal-dialog,
  #rental-login-backdrop {
    overflow-y: hidden !important;
  }

  #rental-login-backdrop {
    z-index: 9999;
    padding-right: 0 !important;
  }

  body.modal-open {
    padding-right: 0 !important;
  }

  /* Hide the cart's mobile sticky footer while any modal is open — without this it
     bleeds through the rental-login modal (both share z-index: 9999). */
  body.modal-open .mobile-sticky-footer {
    display: none !important;
  }

  /* 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 */
  }

  /* Visually separate the "+91" prefix from the typed number with a thin
     vertical divider so they don't read as one chunk (e.g. "+9199..."). */
  .phone-input-wrapper .phone-flag {
    margin-right: 0 !important;
    padding-right: 12px !important;
  }
  .phone-input-wrapper .rental-input-clean {
    border-left: 1px solid #d4dde1 !important;
    padding-left: 12px !important;
  }

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

  /* Registration form scrolls internally on mobile when fields don't fit.
     See rental-login.css mobile section for the full rule (overflow-y: auto
     + min-height: 0). Overriding only `overflow` here would conflict, so
     leave it to the rental-login.css rule. */

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