/* Lead form + chat widget — shared by the homepages and the contact page.
   Namespaced (.lead-form / .mzc-) so it can't collide with page styles.
   Colors ride on each page's own custom properties with fallbacks. */

.lead-form{display:block;text-align:start}
.lead-form .lf-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){.lead-form .lf-grid{grid-template-columns:1fr}}
.lead-form label{display:block;font-size:13px;font-weight:600;
  color:var(--muted,#9FB1C2);letter-spacing:.02em}
.lead-form input,.lead-form select,.lead-form textarea{
  width:100%;margin-top:6px;padding:12px 14px;border-radius:10px;
  border:1px solid var(--line,rgba(255,255,255,.12));
  background:rgba(255,255,255,.045);color:var(--text,#F2F6FA);
  font:inherit;font-size:15px;min-height:44px}
.lead-form select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px;background-repeat:no-repeat}
[dir="rtl"] .lead-form select{background-position:20px 55%,14px 55%}
.lead-form input:focus,.lead-form select:focus,.lead-form textarea:focus{
  outline:2px solid var(--blue,#0D88FF);outline-offset:1px;border-color:transparent}
.lead-form .lf-full{margin-top:14px}
.lead-form textarea{resize:vertical;min-height:96px}
.lead-form .lf-consent{display:flex;gap:10px;align-items:flex-start;
  margin-top:16px;font-weight:500;font-size:14px;line-height:1.55;cursor:pointer;min-height:44px}
.lead-form .lf-consent input{width:18px;min-height:18px;height:18px;margin-top:2px;flex:none;accent-color:var(--gold,#E9A309)}
.lead-form .lf-legal{margin-top:10px;font-size:14px;line-height:1.6;
  color:var(--muted,#9FB1C2)}
.lead-form .lf-legal a{color:var(--gold,#E9A309)}
.lead-form button[type="submit"]{margin-top:16px;width:100%}
.lead-form .lf-status{margin-top:12px;font-size:14.5px;font-weight:600;min-height:1.4em}
.lead-form .lf-status.ok{color:var(--ok,#3BD9A5)}
.lead-form .lf-status.err{color:var(--alert,#FF7A66)}
.mzl-hp{/* honeypot. No directional offset: on RTL documents, content pushed
  off the LEFT edge becomes scrollable overflow and widens the page by the
  offset amount. clip keeps it invisible with zero layout footprint. */
  /* !important throughout: .lead-form input{width:100%;min-height:44px}
     outranks this class on specificity and made the honeypot a
     viewport-wide invisible input. */
  position:absolute !important;width:1px !important;height:1px !important;
  min-height:0 !important;padding:0 !important;border:0 !important;
  margin:0 !important;inset-inline-start:0 !important;top:0 !important;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;opacity:0;pointer-events:none}


/* [hidden] loses to .lead-form label{display:block} on specificity — enforce.
   (Owner caught Estimated-home-value still visible for Real Estate.) */
.lead-form [data-home-value-field][hidden],
.lead-form [data-message-field][hidden]{display:none !important}

/* ---------------- chat widget ---------------- */
.mzc-fab{position:fixed;bottom:18px;inset-inline-start:18px;z-index:220;
  width:56px;height:56px;border-radius:50%;border:0;cursor:pointer;
  background:var(--blue,#0D88FF);color:#fff;display:grid;place-items:center;
  box-shadow:0 12px 30px rgba(0,0,0,.45)}
.mzc-fab svg{width:26px;height:26px}
.mzc-panel{position:fixed;bottom:84px;inset-inline-start:18px;z-index:220;
  width:min(340px,calc(100vw - 36px));max-height:min(560px,calc(100vh - 110px));
  display:none;flex-direction:column;border-radius:16px;overflow:hidden;
  background:var(--panel,#0B1D30);border:1px solid var(--line,rgba(255,255,255,.12));
  box-shadow:0 26px 60px rgba(0,0,0,.55);color:var(--text,#F2F6FA)}
.mzc-panel.open{display:flex}
.mzc-head{padding:14px 16px;background:rgba(13,136,255,.12);
  border-bottom:1px solid var(--line,rgba(255,255,255,.12));
  font-weight:700;font-size:15px;display:flex;justify-content:space-between;align-items:center}
.mzc-close{background:none;border:0;color:inherit;cursor:pointer;font-size:20px;
  line-height:1;padding:6px;min-width:34px;min-height:34px}
.mzc-body{padding:14px 16px;overflow-y:auto;display:flex;flex-direction:column;gap:10px}
.mzc-msg{background:rgba(255,255,255,.06);border-radius:12px;padding:10px 13px;
  font-size:14px;line-height:1.6;max-width:92%}
.mzc-msg.me{background:rgba(13,136,255,.18);align-self:flex-end}
.mzc-opts{display:flex;flex-wrap:wrap;gap:8px}
.mzc-opts button{border:1px solid var(--blue,#0D88FF);background:none;
  color:var(--text,#F2F6FA);border-radius:999px;padding:8px 14px;cursor:pointer;
  font:inherit;font-size:13.5px;min-height:38px}
.mzc-opts button:hover{background:rgba(13,136,255,.14)}
.mzc-form{display:flex;flex-direction:column;gap:8px}
.mzc-form input,.mzc-form textarea{padding:10px 12px;border-radius:10px;
  border:1px solid var(--line,rgba(255,255,255,.12));
  background:rgba(255,255,255,.05);color:inherit;font:inherit;font-size:14px;min-height:42px}
.mzc-form textarea{min-height:64px;resize:vertical}
.mzc-form button{margin-top:2px}
.mzc-send{background:var(--gold,#E9A309);color:#241804;border:0;border-radius:10px;
  padding:11px;font-weight:700;font-size:14.5px;cursor:pointer;min-height:44px}
@media (max-width:640px){
  .mzc-fab{bottom:14px;inset-inline-start:14px}
  .mzc-panel{bottom:80px;inset-inline-start:14px}
}

/* ---- owner notes 2026-08-28 ---- */
/* dropdown options were unreadable (light text on the white popup) */
.lead-form select option{color:#0B1D30;background:#fff;font-weight:600}
.lead-form input:disabled,.lead-form select:disabled{opacity:.6}
/* English copy of the consent/legal text on the Arabic pages */
.lf-en{display:block;margin-top:6px;font-size:13px;opacity:.85;text-align:left}
.lf-consent .lf-txt{flex:1 1 auto}
.lf-consent .lf-en{margin-inline-start:0}
/* Debt Resolution: step-2 questions + inline Calendly */
.lf-ds2{margin-top:14px}
.lf-cal{margin-top:18px}
.lf-cal-title{font-weight:600;margin-bottom:10px;color:var(--text,#F2F6FA);line-height:1.5}
.lf-cal-box{background:#fff;border-radius:12px;overflow:hidden;min-height:600px}
.lf-cal-box iframe{width:100%;border:0;display:block}
/* [hidden] loses to .lf-grid{display:grid} on specificity — enforce */
.lead-form [data-ds-step2][hidden],.lead-form [data-ds-calendar][hidden],.lead-form button[type="submit"][hidden]{display:none !important}
.lead-form button[type="submit"]:disabled{opacity:.6;cursor:default}