/* File: lzhe-modal.css */
/* Path: /wp-content/plugins/lezamiz-media-suite/lzms-packs/lzms-property-inquiry-pack/assets/css/lzhe-modal.css */
/* Version: 2026-01-06B (Match LZQA modal styling; Step1+Step2; fixes double-X; consent + honeypot safe) */

/* =========================================================
   Home Worth Modals (Step 1 + Step 2)
   - Match LZQA look: white base, black text, #cd001e highlights
   - Overlay click does NOT close (same behavior expectation)
   ========================================================= */

/* Scroll lock when open */
html.lz-modal-open,
body.lz-modal-open{
  overflow:hidden !important;
}

/* Google Places dropdown above overlay */
.pac-container{
  z-index:10000000000 !important;
}

/* Base containers */
.lzhe-modal,
.lzhe-modal2{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
  z-index:9999999999;
}

.lzhe-modal.is-open,
.lzhe-modal2.is-open{
  display:flex;
}

/* Overlay layer (doesn't close on click; just visual) */
.lzhe-modal::before,
.lzhe-modal2::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
}

/* Dialog */
.lzhe-modal__dialog,
.lzhe-modal2__dialog,
#lzhe-modal .lzhe-modal__dialog,
#lzhe-modal2 .lzhe-modal__dialog{
  position:relative;
  width:min(680px, 92vw);
  background:#fff;
  color:#000;
  border-radius:16px;
  box-shadow:0 18px 50px rgba(0,0,0,.35);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  z-index:9999999999;
}

/* Mobile full-screen like LZQA */
@media (max-width: 768px){
  .lzhe-modal,
  .lzhe-modal2{
    padding:0;
  }

  .lzhe-modal__dialog,
  .lzhe-modal2__dialog,
  #lzhe-modal .lzhe-modal__dialog,
  #lzhe-modal2 .lzhe-modal__dialog{
    width:100vw;
    border-radius:0;
  }
}

/* =========================================================
   HEADER (grid like LZQA)
   ========================================================= */
.lzhe-modal__header,
#lzhe-modal .lzhe-modal__header,
#lzhe-modal2 .lzhe-modal__header{
  display:grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap:12px;
  row-gap:6px;
  padding:14px 14px;
  border-bottom:1px solid rgba(0,0,0,.10);
  align-items:start;
}

.lzhe-modal__title,
#lzhe-modal .lzhe-modal__title,
#lzhe-modal2 .lzhe-modal__title{
  grid-column:1;
  grid-row:1;
  font:800 16px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#000;
  margin:0;
}

.lzhe-modal__title .lzhe-agent-first{
  color:#cd001e;
}

.lzhe-modal__reqnote,
#lzhe-modal .lzhe-modal__reqnote,
#lzhe-modal2 .lzhe-modal__reqnote{
  grid-column:1;
  grid-row:2;
  font:700 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#111;
  opacity:.85;
  margin:0;
}

.lzhe-req{
  color:#cd001e;
  font-weight:900;
  margin-right:4px;
}

/* Close button (right, spanning both rows) */
.lzhe-modal__close,
#lzhe-modal .lzhe-modal__close,
#lzhe-modal2 .lzhe-modal__close{
  grid-column:2;
  grid-row:1 / span 2;
  align-self:start;

  width:44px;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.12);
  background:#cd001e;
  color:#fff;
  cursor:pointer;
}

/* FIX: ensure only ONE X shows
   - If markup includes a span “×”, hide it
   - If markup includes FA icon, show it at correct size */
.lzhe-modal__close span,
#lzhe-modal .lzhe-modal__close span,
#lzhe-modal2 .lzhe-modal__close span{
  display:none !important;
}

.lzhe-modal__close i,
#lzhe-modal .lzhe-modal__close i,
#lzhe-modal2 .lzhe-modal__close i{
  display:inline-block !important;
  font-size:22px;
  line-height:1;
}

/* Nuke any stray “close” buttons inside body (your screenshot extra X) */
#lzhe-modal button.close,
#lzhe-modal2 button.close,
#lzhe-modal .modal-close,
#lzhe-modal2 .modal-close{
  display:none !important;
}

/* =========================================================
   SUBTEXT (optional)
   ========================================================= */
.lzhe-modal__sub,
#lzhe-modal .lzhe-modal__sub,
#lzhe-modal2 .lzhe-modal__sub{
  padding:10px 14px 0;
  font:700 13px/1.35 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* =========================================================
   FORM AREA
   ========================================================= */
.lzhe-form,
#lzhe-modal .lzhe-form,
#lzhe-modal2 .lzhe-form{
  padding:12px 14px 14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  overflow:auto;
}

.lzhe-field label,
#lzhe-modal .lzhe-field label,
#lzhe-modal2 .lzhe-field label{
  display:block;
  margin:0 0 6px;
  font:800 13px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#000;
}

.lzhe-field input,
.lzhe-field textarea,
#lzhe-modal input[type="text"],
#lzhe-modal input[type="email"],
#lzhe-modal input[type="tel"],
#lzhe-modal2 input[type="text"],
#lzhe-modal2 input[type="email"],
#lzhe-modal2 input[type="tel"],
#lzhe-modal textarea,
#lzhe-modal2 textarea{
  width:100%;
  border:1px solid rgba(0,0,0,.18);
  border-radius:12px;
  padding:10px 12px;
  font:600 14px/1.3 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#000;
  background:#fff;
  outline:none;
  -webkit-appearance:none;
  appearance:none;
}

.lzhe-field textarea{
  resize:vertical;
  min-height:160px;
}

#lzhe-modal input:focus,
#lzhe-modal2 input:focus,
#lzhe-modal textarea:focus,
#lzhe-modal2 textarea:focus{
  border-color:#cd001e;
  box-shadow:0 0 0 3px rgba(205,0,30,.14);
}

/* =========================================================
   CONSENT (match LZQA)
   ========================================================= */
.lzhe-check,
#lzhe-modal .lzhe-check,
#lzhe-modal2 .lzhe-check{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font:700 13px/1.35 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#000;
  margin:0;
}

.lzhe-check input{
  width:18px;
  height:18px;
  margin-top:2px;
  accent-color:#cd001e;
}

.lzhe-consent-link{
  color:blue;
  text-decoration:underline;
}

.lzhe-consent-link:hover{
  color:blue;
  text-decoration-color:blue;
}

/* Honeypot: keep hidden (shared class) */
.ct-pi-honeypot{ display:none !important; }

/* =========================================================
   ACTIONS (buttons)
   ========================================================= */
.lzhe-actions,
#lzhe-modal .lzhe-actions,
#lzhe-modal2 .lzhe-actions{
  margin-top:auto;
  display:flex;
  gap:10px;
  padding-top:6px;
}

.lzhe-btn{
  flex:1 1 0;
  min-height:44px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.18);
  font:900 14px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  cursor:pointer;
}

.lzhe-btn--ghost{
  background:#fff;
  color:#000;
}

.lzhe-btn--primary{
  background:#cd001e;
  border-color:#cd001e;
  color:#fff;
}

.lzhe-btn--ghost:hover{ background:#f6f6f6; }

/* Disabled */
.lzhe-btn[disabled],
.lzhe-btn.is-disabled,
.lzhe-btn[aria-disabled="true"]{
  opacity:.55;
  cursor:not-allowed;
  pointer-events:none;
}

/* =========================================================
   ERROR LINE
   ========================================================= */
#lzhe_send_err,
#lzhe2_send_err{
  color:#cd001e;
  font-weight:800;
  margin:0;
}

/* =========================================================
   STEP 2 helpers (optional: tabs/cards)
   ========================================================= */
.lzhe2-tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:0;
}

.lzhe2-tabs button{
  appearance:none;
  border-radius:999px;
  padding:8px 12px;
  font:900 13px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  border:1px solid rgba(0,0,0,.14);
  background:#fff;
  cursor:pointer;
}

.lzhe2-tabs button.is-active{
  border-color:#cd001e;
  box-shadow:0 0 0 3px rgba(205,0,30,.10);
}