@charset "UTF-8";
/* Modal Styles */
/* line 3, app/assets/stylesheets/customer/login_modals.scss */
.square-modal .modal-dialog {
  max-width: 520px;
  margin: 1.5rem auto;
}

/* line 7, app/assets/stylesheets/customer/login_modals.scss */
.square-modal .modal-content {
  border-radius: 18px;
  padding: 34px 36px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.35);
  background: var(--panel-bg);
  position: relative !important;
  top: auto !important;
  height: auto !important;
}

/* line 17, app/assets/stylesheets/customer/login_modals.scss */
.modal-backdrop.show {
  background: black !important;
}

/* line 21, app/assets/stylesheets/customer/login_modals.scss */
.square-modal .drag-handle {
  display: none;
}

/* line 25, app/assets/stylesheets/customer/login_modals.scss */
.square-modal .back-arrow {
  position: absolute;
  left: 12px;
  top: 16px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #444;
  cursor: pointer;
  background: unset;
  border: none;
}

/* line 40, app/assets/stylesheets/customer/login_modals.scss */
.logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 6px;
}

/* line 48, app/assets/stylesheets/customer/login_modals.scss */
.logo-mark {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 2px solid #222;
}

/* line 57, app/assets/stylesheets/customer/login_modals.scss */
.logo-mark svg {
  width: 22px;
  height: 22px;
}

/* line 59, app/assets/stylesheets/customer/login_modals.scss */
.brand-name {
  font-size: 14px;
  color: #161616;
  margin-bottom: 12px;
  font-family: Manrope;
  font-weight: 600;
  font-size: 15.9px;
  letter-spacing: 3%;
}

/* line 69, app/assets/stylesheets/customer/login_modals.scss */
.h-title {
  font-family: Work Sans;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0px;
  text-align: center;
  color: #102348;
  margin-top: 20px;
}

/* line 78, app/assets/stylesheets/customer/login_modals.scss */
.sub-text {
  font-family: Work Sans;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0px;
  text-align: center;
  color: #555555;
  margin-bottom: 20px;
}

/* line 88, app/assets/stylesheets/customer/login_modals.scss */
.square-input {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  outline: none;
  box-shadow: none;
}

/* line 98, app/assets/stylesheets/customer/login_modals.scss */
.form-label {
  font-family: Work Sans;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0px;
  color: #161616;
}

/* line 105, app/assets/stylesheets/customer/login_modals.scss */
.small-muted {
  font-size: 12px;
  color: var(--muted);
}

/* line 107, app/assets/stylesheets/customer/login_modals.scss */
.mint-btn {
  background: #08AF86;
  border: none;
  color: #fff;
  padding: 12px 18px;
  width: 100%;
  border-radius: 10px;
  font-weight: 600;
  box-shadow: none;
  font-size: 14px;
  font-family: Work Sans;
  transition: opacity 0.2s ease-in-out;
}

/* line 120, app/assets/stylesheets/customer/login_modals.scss */
.mint-btn:active {
  transform: translateY(1px);
}

/* line 121, app/assets/stylesheets/customer/login_modals.scss */
.mint-btn.disabled-btn {
  opacity: 0.5;
  pointer-events: none;
}

/* line 126, app/assets/stylesheets/customer/login_modals.scss */
.cancel-btn {
  background: #fff;
  border: 1.5px solid #e6e7e8;
  color: #102348;
  padding: 10.5px 18px;
  width: 100%;
  border-radius: 10px;
  font-weight: 400;
  font-size: 17px;
  font-family: Work Sans;
  cursor: pointer;
  transition: background 0.15s ease;
}

/* line 139, app/assets/stylesheets/customer/login_modals.scss */
.cancel-btn:active {
  background: #f5f6f7;
  transform: translateY(1px);
}

/* line 141, app/assets/stylesheets/customer/login_modals.scss */
.phone-verified-box {
  background: #f0f2f4;
  border: 1px solid var(--input-border);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* line 150, app/assets/stylesheets/customer/login_modals.scss */
.phone-verified-label {
  font-size: 12px;
  font-family: Work Sans;
  color: #aab0ba;
  font-weight: 400;
}

/* line 156, app/assets/stylesheets/customer/login_modals.scss */
.phone-verified-number {
  font-size: 15px;
  font-family: Work Sans;
  font-weight: 600;
  color: #111;
}

/* line 163, app/assets/stylesheets/customer/login_modals.scss */
.input-icon-wrap {
  position: relative;
}

/* line 166, app/assets/stylesheets/customer/login_modals.scss */
.input-icon-wrap .input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* line 173, app/assets/stylesheets/customer/login_modals.scss */
.square-input.with-icon {
  padding-left: 40px;
  background: #fff;
}

/* line 178, app/assets/stylesheets/customer/login_modals.scss */
.otp-group {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 18px 0 10px;
}

/* line 179, app/assets/stylesheets/customer/login_modals.scss */
.otp-box {
  width: 52px;
  height: 48px;
  border-radius: 10px;
  border: 1px solid var(--input-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: #fff;
}

/* line 183, app/assets/stylesheets/customer/login_modals.scss */
.otp-box input {
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 20px;
  border: none;
  outline: none;
  background: transparent;
}

@media (max-width: 520px) {
  /* line 188, app/assets/stylesheets/customer/login_modals.scss */
  .square-modal .modal-dialog {
    max-width: 92%;
  }
  /* line 189, app/assets/stylesheets/customer/login_modals.scss */
  .square-modal .modal-content {
    padding: 20px;
  }
}

/* line 192, app/assets/stylesheets/customer/login_modals.scss */
.welcome-comms-msg {
  font-family: Work Sans;
  font-size: 13px;
  font-weight: 500;
  color: #555;
  text-align: center;
  line-height: 1.5;
  margin-top: -12px;
  margin-bottom: 2px;
}

/* line 203, app/assets/stylesheets/customer/login_modals.scss */
.resend-row {
  text-align: center;
  color: #777777;
  font-size: 15px;
  margin-top: 8px;
}

/* line 205, app/assets/stylesheets/customer/login_modals.scss */
.change-number-link {
  font-size: 15px;
  font-weight: 700;
  color: #08AF86;
  text-decoration: none;
}

/* line 211, app/assets/stylesheets/customer/login_modals.scss */
.change-number-link:hover {
  text-decoration: none;
}

/* line 213, app/assets/stylesheets/customer/login_modals.scss */
.otp-terms {
  font-size: 12px;
  color: #777777;
  text-align: center;
  margin-top: 14px;
}

/* line 219, app/assets/stylesheets/customer/login_modals.scss */
.otp-terms-link {
  color: #1a73e8;
  text-decoration: underline;
}

/* line 223, app/assets/stylesheets/customer/login_modals.scss */
.otp-terms-link:hover {
  color: #1a73e8;
}

/* line 224, app/assets/stylesheets/customer/login_modals.scss */
.terms {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  margin-top: 16px;
}

/* line 225, app/assets/stylesheets/customer/login_modals.scss */
.required {
  color: #d9534f;
  margin-left: 4px;
  font-weight: 700;
}

/* line 227, app/assets/stylesheets/customer/login_modals.scss */
:root {
  --mint: #9ed9c6;
  --mint-dark: #74c6ad;
  --muted: #9aa0a6;
  --panel-bg: #ffffff;
  --overlay: rgba(23,29,30,0.72);
  --radius: 12px;
  --input-bg:#f5f6f7;
  --input-border:#e6e7e8;
}

/* ── 14april ui and ux ───────────────────────────────────────────────────────
   Hide the sticky bottom CTA bar on mobile whenever the login/OTP modal opens.
   login_modals.scss is loaded on all three layouts (home, listing, project-details)
   so one rule covers every page.
   Bootstrap adds body.modal-open synchronously on show.bs.modal — before the
   animation starts — so the CTA vanishes instantly on Safari, Chrome & Firefox
   without any JS. The JS companion in modal_login.js is a safety net for
   Android WebView / Samsung Internet where the class can lag one paint frame.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
  /* line 248, app/assets/stylesheets/customer/login_modals.scss */
  body.modal-open .mobile-cta {
    display: none !important;
  }
  /* Details page topbar has z-index:99999 — push it below the modal backdrop
     (z-index:1050) so the header doesn't float above the overlay on mobile */
  /* line 254, app/assets/stylesheets/customer/login_modals.scss */
  body.modal-open .topbar {
    z-index: 1040 !important;
  }
}

/* ── /14april ui and ux ──────────────────────────────────────────────────── */
/* ── 14april and time ui and ux ──────────────────────────────────────────────
   Bootstrap's modal-dialog-centered already handles vertical + horizontal
   centering via flexbox on .modal-dialog. We just need to:
   1. NOT override min-height (that breaks modal-dialog-centered)
   2. NOT add overflow/max-height to .modal-content (that causes scroll)
   3. Fix width on small screens
   4. Fix Bootstrap's scrollbar padding-right shift on Safari
   Keyboard handling lives entirely in JS (translateY on .modal-dialog).
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
  /* Stop iOS rubber-band bounce on the modal backdrop                       */
  /* line 272, app/assets/stylesheets/customer/login_modals.scss */
  .square-modal {
    overflow: hidden !important;
    overscroll-behavior: none;
  }
  /* Constrain width on narrow phones; let modal-dialog-centered center it  */
  /* line 275, app/assets/stylesheets/customer/login_modals.scss */
  .square-modal .modal-dialog {
    max-width: 92% !important;
  }
  /* Smaller content padding on compact screens — NO overflow, NO max-height */
  /* line 278, app/assets/stylesheets/customer/login_modals.scss */
  .square-modal .modal-content {
    padding: 20px !important;
  }
  /* Reduce inline 50px logo padding so OTP row stays above keyboard        */
  /* line 281, app/assets/stylesheets/customer/login_modals.scss */
  .logo-wrap {
    padding: 12px 0 8px !important;
  }
  /* Prevent iOS auto-zoom (triggers when font-size < 16px on focus)        */
  /* line 284, app/assets/stylesheets/customer/login_modals.scss */
  .square-input, #phoneNumber {
    font-size: 16px !important;
  }
  /* line 285, app/assets/stylesheets/customer/login_modals.scss */
  .otp-box input {
    font-size: 20px !important;
  }
  /* Remove 300ms double-tap delay                                           */
  /* line 288, app/assets/stylesheets/customer/login_modals.scss */
  button, .btn, a, [role="button"] {
    touch-action: manipulation;
  }
  /* Bootstrap ScrollBarHelper injects inline padding-right on body + .modal
     even when no scrollbar exists on mobile — shifts the dialog left on Safari */
  /* line 292, app/assets/stylesheets/customer/login_modals.scss */
  body.modal-open {
    padding-right: 0 !important;
  }
  /* line 293, app/assets/stylesheets/customer/login_modals.scss */
  .modal {
    padding-right: 0 !important;
  }
}

/* ── /14april and time ui and ux ─────────────────────────────────────────── */
/* ── Comms Preference Modal ───────────────────────────────────────────────── */
/* line 299, app/assets/stylesheets/customer/login_modals.scss */
.comms-no-spam-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(8, 175, 134, 0.1);
  color: #08AF86;
  font-family: Work Sans;
  font-size: 13px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 20px;
  margin-bottom: 4px;
}

/* Override center-align from .h-title / .sub-text for this modal only */
/* line 314, app/assets/stylesheets/customer/login_modals.scss */
.comms-title-left {
  text-align: left !important;
}

/* line 317, app/assets/stylesheets/customer/login_modals.scss */
.comms-sub-left {
  text-align: left !important;
  margin-bottom: 12px !important;
}

/* line 322, app/assets/stylesheets/customer/login_modals.scss */
.comms-options {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* line 328, app/assets/stylesheets/customer/login_modals.scss */
.comms-option-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* line 334, app/assets/stylesheets/customer/login_modals.scss */
.comms-option-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  background: #fff;
  border: 1.5px solid #e6e7e8;
  border-radius: 12px;
  padding: 14px 18px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
  height: 46px;
}

/* line 350, app/assets/stylesheets/customer/login_modals.scss */
.comms-option-btn--green {
  border-color: #08AF86;
}

/* line 353, app/assets/stylesheets/customer/login_modals.scss */
.comms-option-btn--green .comms-option-title {
  color: #08AF86;
}

/* line 358, app/assets/stylesheets/customer/login_modals.scss */
.comms-option-btn--blue {
  border-color: #102348;
}

/* line 362, app/assets/stylesheets/customer/login_modals.scss */
.comms-option-btn:hover,
.comms-option-btn:focus {
  border-color: #08AF86;
  background: rgba(8, 175, 134, 0.04);
  outline: none;
}

/* line 369, app/assets/stylesheets/customer/login_modals.scss */
.comms-option-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* line 375, app/assets/stylesheets/customer/login_modals.scss */
.comms-option-title {
  font-family: Work Sans;
  font-size: 15px;
  font-weight: 600;
  color: #102348;
}

/* line 382, app/assets/stylesheets/customer/login_modals.scss */
.comms-option-sub {
  font-family: Work Sans;
  font-size: 12px;
  font-weight: 400;
  color: #777;
  line-height: 1.5;
  margin: 0;
  padding: 0 4px;
  text-align: left;
}

/* line 393, app/assets/stylesheets/customer/login_modals.scss */
.comms-or-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
}

/* line 400, app/assets/stylesheets/customer/login_modals.scss */
.comms-or-line {
  flex: 1;
  height: 1px;
  background: #e6e7e8;
}

/* line 406, app/assets/stylesheets/customer/login_modals.scss */
.comms-or-text {
  font-family: Work Sans;
  font-size: 13px;
  color: #aaa;
  flex-shrink: 0;
}

/* ── /Comms Preference Modal ──────────────────────────────────────────────── */
/* ── Mobile bottom-sheet ──────────────────────────────────────────────────── */
@media (max-width: 575px) {
  /* Overlay height is set via JS (window.innerHeight) in two passes:
     1. show.bs.modal  – locks in current viewport before animation starts
     2. shown.bs.modal – re-reads after Android URL bar auto-hides on scroll-lock
     Using 100dvh here causes a gap on the home page because the URL bar is
     still visible when the modal opens; dvh resolves before the bar hides. */
  /* iOS: -webkit-fill-available always resolves to the visual-viewport height on
     WebKit, bypassing the body.modal-open overflow:hidden containing-block issue
     that inflates height:100% by the page's padding-top on listing/details pages. */
  /* line 425, app/assets/stylesheets/customer/login_modals.scss */
  html.is-ios .square-modal {
    height: -webkit-fill-available;
  }
  /* Anchor to the bottom of the viewport (absolute inside the fixed .modal) */
  /* line 430, app/assets/stylesheets/customer/login_modals.scss */
  .square-modal .modal-dialog {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    min-height: unset !important;
    display: block !important;
    align-items: unset !important;
  }
  /* Rounded top corners only; scrollable so content is never cropped.
     Bottom padding only needs safe-area clearance — the mobile CTA bar is
     hidden via body.modal-open so 80px extra is no longer needed.
     position/top/height are reset explicitly because home.scss has an unscoped
     .modal-content rule with position:absolute; top:61px; height:86% that
     bleeds into this modal and cuts the bottom of the sheet. */
  /* line 450, app/assets/stylesheets/customer/login_modals.scss */
  .square-modal .modal-content {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: 28px !important;
    padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2) !important;
  }
  /* line 463, app/assets/stylesheets/customer/login_modals.scss */
  .square-modal .drag-handle {
    display: block;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    background: #CDD0D5;
    border-radius: 2px;
    cursor: grab;
    touch-action: none;
  }
  /* Slide-up entry — replaces Bootstrap's default translate(0, -50px) drop-in */
  /* line 478, app/assets/stylesheets/customer/login_modals.scss */
  .square-modal.fade .modal-dialog {
    transform: translateY(100%) !important;
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1) !important;
  }
  /* line 482, app/assets/stylesheets/customer/login_modals.scss */
  .square-modal.show .modal-dialog {
    transform: translateY(0) !important;
  }
  /* Complete profile — tighten vertical rhythm so form fits without scrolling */
  /* line 487, app/assets/stylesheets/customer/login_modals.scss */
  #modal-profile .h-title {
    margin-top: 6px !important;
  }
  /* line 488, app/assets/stylesheets/customer/login_modals.scss */
  #modal-profile .sub-text {
    margin-bottom: 10px !important;
  }
  /* line 489, app/assets/stylesheets/customer/login_modals.scss */
  #modal-profile .mb-3 {
    margin-bottom: 8px !important;
  }
  /* line 490, app/assets/stylesheets/customer/login_modals.scss */
  #modal-profile .mb-2 {
    margin-bottom: 6px !important;
  }
  /* line 491, app/assets/stylesheets/customer/login_modals.scss */
  #modal-profile .otp-terms {
    margin-top: 8px !important;
  }
  /* line 492, app/assets/stylesheets/customer/login_modals.scss */
  #modal-profile #completeBtn {
    margin-top: 10px !important;
  }
  /* line 493, app/assets/stylesheets/customer/login_modals.scss */
  #modal-profile .phone-verified-box {
    padding: 8px 12px;
  }
  /* line 494, app/assets/stylesheets/customer/login_modals.scss */
  #modal-profile .square-input.with-icon {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

/* ── /Mobile bottom-sheet ─────────────────────────────────────────────────── */