/* rental-login.css */
/* DM Sans is loaded via the global Google Fonts <link> in includes/header.php
   (do NOT @import here — that creates a render-blocking critical request chain). */

/* Modal Backdrop - Handled by Bootstrap .modal-backdrop now */
/* .rental-login-backdrop styles removed to avoid conflict with Bootstrap */

/* Rectangle 13 - Main Modal Container */
.rental-login-modal {
  min-width: 500px;
  min-height: 500px;
  background: #ffffff;
  border-radius: 30px; /* Updated from Figma */
  padding: 35px 40px;
  border: none;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: relative; /* Ensure relative for absolute children if needed */
}

/* Desktop sizing */
@media (min-width: 577px) {
  .rental-modal-dialog {
    max-width: 500px; /* Width: 500px from Figma */
    margin: 1.75rem auto;
  }

  .otp-container {
    margin: 0px !important;
  }

  .step-content.active {
    padding-top: 0px !important;
  }
}

/* Close Icon */
.rental-login-close {
  position: absolute;
  width: 14px;
  height: 14px;
  /* Top/Left from Figma relative to global frame were 713, 165. 
     Inside 500x500 box centered, this is roughly top-right. 
     We keep responsive positioning. */
  top: 25px;
  right: 25px;
  cursor: pointer;
  font-size: 35px;
  line-height: 14px;
  color: #303030; /* Figma says #303030 for lines */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

/* Main Step Container */
.step-content {
  display: none; /* Hidden by default */
  width: 100%;
  /* No fixed height, let content drive it or modal container constrain it */
}

.step-content.active {
  display: block; /* Visible when active */
  animation: fadeIn 0.3s ease-in-out;
  padding-top: 55px;
  width: 90%;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Optional: Centering logic if needed, but flex in parent or margins work better */
/* If the design requires specific vertical centering within the modal for shorter steps */

/* Typography & Elements */

.rental-login-title {
  font-family: "DM Sans", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 28px;
  line-height: 36px;
  color: #000000;
  margin-bottom: 2px;
  text-align: left;
}

.rental-login-title span {
  color: #00a5f1;
  /* font-weight: 600; */
}

.rental-login-subtitle {
  font-family: "DM Sans", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;
  color: #95a1a7;
  text-align: left;
  margin-bottom: 30px;
}

/* Input Group */
.rental-input-container {
  margin-bottom: 20px;
}

/* Phone Input Styling matching design */
.phone-input-wrapper {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%; /* Max width controlled by parent or max-width */
  /* max-width: 335px; */
  height: 50px;
  background: #ffffff;
  border: 1px solid #e7edf0;
  border-radius: 10px;
  padding: 0 15px; /* Inside padding */
  /* margin: 0 auto; Center it */
  position: relative;
}

.phone-flag {
  /* Rectangle 7 & 8 logic - keeping simple image */
  margin-right: 10px;
  display: flex;
  align-items: center;
  /* +91 9920742313 style */
  font-family: "DM Sans", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;
  color: #303030;
}
.phone-flag img {
  width: 24px;
  height: 16px;
  border-radius: 3px;
  margin-right: 10px;
  object-fit: cover; /* Indian flag is 3:2; 24x16 matches exactly so no squishing */
  flex-shrink: 0;
  display: block;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.rental-input-clean {
  border: none;
  outline: none;
  /* iOS Safari shrinks an `width:100%` input inside a flex row, pushing the
     caret flush against the previous sibling. Use flex sizing + min-width:0
     so the input expands into the available space and the caret renders at
     its true padding offset. */
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  font-family: "DM Sans", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;
  color: #303030;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}

/* Buttons */
.rental-action-btn {
  width: 100%;
  height: 50px;
  background: linear-gradient(180deg, #21b9ff 0%, #00a5f1 100%);
  border-radius: 200px;
  border: none;

  /* Text Style */
  font-family: "DM Sans", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 21px;
  text-align: center;
  color: #ffffff;

  cursor: pointer;
  transition: all 0.3s ease;
  display: block;
}

.rental-action-btn:hover {
  background-color: #00a5f1;
}

/* Click feedback. The site-wide ripple in common.css uses currentColor (=
   white on this button), which is almost invisible against the bright blue
   gradient — so we override the ripple color here and add a slight darken
   on press to make the tap clearly registered. */
.rental-action-btn .tt-ripple {
  background: rgba(0, 0, 0, 0.28) !important;
  opacity: 0.6 !important;
}

.rental-action-btn:not(:disabled):active {
  filter: brightness(0.92);
  transform: scale(0.97);
}

/* OTP Digits */
.otp-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 335px;
  margin: 0 auto 25px auto;
}

.otp-box {
  width: 76px;
  height: 50px;
  border: 1px solid #eaeaea;
  border-radius: 12px;
  text-align: center;
  font-size: 20px;
  font-family: "DM Sans", sans-serif;
  outline: none;
}
.otp-box:focus {
  border-color: #00a5f1;
}

.resend-otp-wrapper {
  display: flex;
  flex-direction: row; /* Horizontal layout for label + link */
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 15px;
}

.resend-otp-label {
  display: none; /* Hidden during timer */
  color: #303030;
  font-size: 14px;
  font-weight: 500;
}

.resend-text {
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  color: #000000;
}

.otp-sent-to-number {
  font-family: "DM Sans", sans-serif;
  font-style: normal;
  color: #95a1a7;
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
}

.resend-otp-link {
  display: inline-block;
  font-size: 14px;
  color: #303030;
  /* background: #00a5f1; */
  /* padding: 6px 15px; */
  border-radius: 20px;
  text-decoration: none;
  cursor: pointer;
  font-family: "DM Sans", sans-serif;
  font-weight: 500;
  transition: opacity 0.3s ease;
}

.resend-otp-link:hover {
  opacity: 0.9;
}

/* Registration Form Specifics */
.rental-login-modal.register-mode {
  min-height: 624px; /* From Figma Group 54 */
  display: flex;
  flex-direction: column;
}

.step-content-register.active {
  display: flex;
  flex-direction: column;
  height: 100%;
  flex: 1;
}

.reg-body {
  flex: 1;
  overflow: visible;
  padding-right: 5px;
  margin-bottom: 10px;
}

.reg-footer {
  position: sticky;
  bottom: 0px;
  background: #ffffff;
  padding: 15px 0 10px 0;
  z-index: 10;
}

/* Custom Dropdown */
.custom-dropdown {
  position: relative;
  width: 100%;
}

.custom-dropdown-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 50px;
  border: 1px solid #e7edf0;
  border-radius: 10px;
  padding: 0 12px;
  background: #ffffff;
  cursor: pointer;
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  color: #303030;
  user-select: none;
  transition: border-color 0.2s ease;
}

.custom-dropdown-trigger:hover {
  border-color: #ccd5da;
}

.custom-dropdown.open .custom-dropdown-trigger {
  border-color: #00a5f1;
}

.custom-dropdown-value {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-dropdown-arrow {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.custom-dropdown.open .custom-dropdown-arrow {
  transform: rotate(180deg);
}

.custom-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  z-index: 1100;
  overflow: hidden;
  padding: 6px 0;
}

.custom-dropdown.open .custom-dropdown-menu {
  display: block;
  animation: dropdownFadeIn 0.15s ease-out;
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.custom-dropdown-item {
  padding: 12px 16px;
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  color: #303030;
  cursor: pointer;
  transition: background 0.15s ease;
}

.custom-dropdown-item:hover {
  background: #f0f8ff;
}

.custom-dropdown-item.active {
  color: #00a5f1;
  background: #f0f8ff;
}

/* Floating Label Form Group */
.rental-form-group {
  position: relative;
  margin-bottom: 24px;
}

.rental-form-control {
  width: 100%;
  height: 50px;
  border: 1px solid #e7edf0;
  border-radius: 10px;
  padding: 0 15px;
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  color: #303030;
  outline: none;
  background: #ffffff;
  appearance: none; /* Remove default browser styling for consistency */
}

.rental-form-control:focus {
  border-color: #00a5f1;
}

.rental-form-label {
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
  background: transparent;
  padding: 0;
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  color: #95a1a7;
  z-index: 5;
  line-height: 1;
  pointer-events: none;
  transition: top 0.15s ease, left 0.15s ease, font-size 0.15s ease,
    transform 0.15s ease, background 0.15s ease, padding 0.15s ease;
}

/* Red asterisk marker for required fields. Sits flush against the label
   text so it floats up with the label when the field is focused / filled
   (the floating-label transform is applied to the parent `.rental-form-label`
   so the asterisk inherits the same animation automatically). */
.rental-form-label .required-asterisk {
  color: #e74c3c;
  margin-left: 2px;
  font-weight: 600;
}

/* Floated state — when focused or input has a value */
.rental-form-group:has(.rental-form-control:focus) .rental-form-label,
.rental-form-group:has(.rental-form-control:not(:placeholder-shown)) .rental-form-label,
.rental-form-group:has(#reg-height-value) .rental-form-label,
.rental-form-group:has(.custom-dropdown) .rental-form-label {
  top: -9px;
  left: 10px;
  transform: translateY(0);
  background: #ffffff;
  padding: 0 4px;
  font-size: 12px;
}

/* Hide the space-only placeholder used to make :placeholder-shown work */
#reg-full-name::placeholder,
#reg-email::placeholder,
#reg-phone-display::placeholder {
  color: transparent;
}

/* Specific for Readonly Phone */
#reg-phone-display {
  background: #eef5f8;
  color: rgba(48, 48, 48, 0.4);
  caret-color: transparent;
}

/* Readonly: don't paint the focus ring on tap — the value is locked, so the
   "active" treatment misleads the user into thinking it's editable. */
#reg-phone-display:focus {
  border-color: #e7edf0;
}

.reg-row {
  display: flex;
  gap: 15px;
}
.reg-col {
  flex: 1;
}

/* Gender Toggle */
.gender-toggle-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
  margin-top: 10px;
  border-bottom: none;
  padding-bottom: 0;
}

.gender-label-text {
  font-size: 16px;
  color: #303030;
  font-family: "DM Sans", sans-serif;
  font-weight: 400;
}

.gender-selector {
  display: flex;
  align-items: stretch;
  background: #ffffff;
  border: 1px solid #e7edf0;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}

/* Sliding pill behind the active gender. JS positions it on init / click. */
.gender-indicator {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  background: #303030;
  border-radius: 10px;
  transform: translateX(0);
  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 0;
}

.gender-btn {
  border: none;
  background: transparent;
  color: #303030;
  padding: 8px 14px;
  font-size: 14px;
  cursor: pointer;
  font-family: "DM Sans", sans-serif;
  border-radius: 10px;
  position: relative;
  z-index: 1;
  transition: color 0.3s ease;
}

.gender-btn.selected {
  color: #ffffff;
}

/* Status Messages */
.error-msg {
  color: red !important;
  font-size: 13px;
  margin-top: 10px;
  min-height: 18px; /* Reserves space to prevent UI jumping */
  display: block;
}

.success-msg {
  color: green !important;
  font-size: 13px;
  margin-top: 10px;
  font-weight: 500;
  min-height: 10px; /* Reserves space to prevent UI jumping */
  display: block;
}

@media (max-width: 768px) {
  /* Enforce full screen if bootstrap class misses anything */
  #rental-login-backdrop .modal-dialog {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    height: 100% !important;
    transform: none !important; /* Prevent transform offsets */
  }

  .rental-login-modal {
    min-height: 100vh !important;
    height: 100vh !important;
    max-height: 100vh !important;
    min-width: 100% !important;
    border-radius: 0 !important; /* Remove corners */
    box-shadow: none !important;
    padding: 20px;
    border: none !important;
    overflow: hidden !important;
    overflow-y: hidden !important;
  }

  .rental-action-btn {
    width: 100%;
  }

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

  /* Ensure arrow is visible */
  .rental-login-close::before {
    content: "←"; /* Unicode Left Arrow */
    font-size: 32px;
    color: #000;
    display: block;
    line-height: 1;
    font-weight: 300;
  }

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

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

  .phone-input-wrapper {
    height: 55px;
  }

  .gender-toggle-wrapper {
    flex-direction: row;
    justify-content: space-between;
  }

  .otp-container {
    margin: 0px !important;
    max-width: 100% !important;
    margin-bottom: 10px !important;
  }

  /* Registration form: modal stays fixed full-screen; the body scrolls
     internally when the fields don't fit (smaller phones, browser chrome
     eating viewport, big system fonts). reg-footer stays pinned at the
     bottom via sticky positioning, so the "Create Your Account" button is
     always reachable. `min-height: 0` is required for a flex child to
     actually shrink below its content height and trigger overflow. */
  .reg-body {
    overflow-y: auto !important;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
  }

  .step-content-register .rental-login-subtitle {
    margin-bottom: 28px;
  }

  .step-content-register .rental-form-group {
    margin-bottom: 22px;
  }

  .reg-footer {
    padding: 8px 0 24px 0;
  }
}

/* Prevent layout shift when the rental-login modal opens.
   Bootstrap's modal-open behavior (a) hides the body scrollbar and (b) adds
   padding-right to <body>, .modal, and any fixed/sticky elements (like the
   navbar) to compensate for the missing scrollbar. On this site that pushed
   the header text visibly left. Fix:
   - Reserve the scrollbar gutter on <html> so the page width never changes
     whether the scrollbar is visible or not.
   - Neutralize every padding-right Bootstrap tries to add. */
html {
  scrollbar-gutter: stable;
}

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

body.modal-open .modal,
body.modal-open .fixed-top,
body.modal-open .fixed-bottom,
body.modal-open .sticky-top,
body.modal-open .navbar.fixed-top,
body.modal-open .navbar-toggler {
  padding-right: 0 !important;
}