/* ============================================================
   LEAD / ENQUIRY FORM  (resources/views/website/partials/lead-form.blade.php)
   Home hero · home bottom · category · company detail · header popup
   ============================================================ */
.lf-card{
  --lf-orange:#e8720c;
  --lf-orange-d:#cf6208;
  --lf-ink:#0f1f2e;
  --lf-lbl:#6b7a8c;
  --lf-line:#dfe5ec;
  background:#fff;border-radius:14px;overflow:hidden;
  box-shadow:0 18px 50px rgba(12,44,54,.18);
  width:100%;text-align:left;color:var(--lf-ink);
}
.lf-card,.lf-card *,.lf-card *::before,.lf-card *::after{box-sizing:border-box}
.lf-card .lf-inp{max-width:100%;margin:0}
.lf-head{
  background:var(--lf-orange);color:#fff;
  padding:22px 28px 24px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
}
.lf-title{font-size:23px;font-weight:800;line-height:1.25;margin:0 0 6px;color:#fff;letter-spacing:-.2px}
.lf-sub{font-size:15px;margin:0;color:rgba(255,255,255,.93);line-height:1.5}
.lf-close{
  flex-shrink:0;width:46px;height:46px;border-radius:10px;
  background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.6);
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s;
}
.lf-close:hover{background:rgba(255,255,255,.2)}
.lf-close svg{width:18px;height:18px;fill:#fff}

.lf-form{padding:24px 28px 20px;margin:0}
.lf-alert{
  background:#fdecea;border:1px solid #f5c2bd;color:#9b1c12;
  font-size:13px;font-weight:600;border-radius:8px;padding:10px 12px;margin-bottom:14px;
}
.lf-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.lf-fld{display:flex;flex-direction:column;gap:7px;min-width:0}
.lf-full{grid-column:1/-1}
.lf-lbl{
  font-size:13px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;
  color:var(--lf-lbl);margin:0;line-height:1.3;
}
.lf-lbl .req{color:#d93025}
.lf-inp{
  width:100%;height:46px;padding:0 14px;font-size:15px;color:var(--lf-ink);font-family:inherit;
  background:#fff;border:1px solid var(--lf-line);border-radius:8px;outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.lf-inp:focus{border-color:var(--lf-orange);box-shadow:0 0 0 3px rgba(232,114,12,.14)}
.lf-sel{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:40px;font-size:17px;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M0 0h12L6 8z' fill='%236b7a8c'/%3E%3C/svg%3E") no-repeat right 16px center;
}
.lf-txt{height:auto;min-height:82px;padding:12px 14px;resize:vertical;line-height:1.5}
.lf-fld.has-err .lf-inp{border-color:#d93025;background:#fff8f7}
.lf-err{font-size:12px;font-weight:600;color:#d93025}

.lf-cap{display:flex;gap:14px;align-items:center}
.lf-cap-q{
  flex-shrink:0;height:46px;padding:0 16px;display:flex;align-items:center;
  background:#eef2f6;border:1px solid var(--lf-line);border-radius:8px;
  font-size:20px;font-weight:800;color:var(--lf-ink);letter-spacing:.5px;white-space:nowrap;
}
.lf-cap .lf-inp{flex:1}

.lf-btn{
  width:100%;height:56px;margin-top:20px;border:none;border-radius:8px;cursor:pointer;
  background:var(--lf-orange);color:#fff;font-size:20px;font-weight:800;font-family:inherit;
  display:flex;align-items:center;justify-content:center;gap:10px;
  box-shadow:0 10px 24px rgba(232,114,12,.28);transition:.2s;
}
.lf-btn:hover{background:var(--lf-orange-d);transform:translateY(-1px)}
.lf-btn[disabled]{opacity:.7;cursor:wait;transform:none}
.lf-btn svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2;stroke-linejoin:round}

.lf-ticks{
  display:flex;justify-content:center;flex-wrap:wrap;gap:8px 26px;
  margin-top:20px;padding-top:18px;border-top:1px solid #edf1f5;
  font-size:15px;color:#6b7a8c;font-weight:500;
}
.lf-ticks span{display:inline-flex;align-items:center;gap:7px}
.lf-ticks svg{width:17px;height:17px;fill:#2e9e6b}


@media(max-width:576px){
  .lf-head{padding:18px 18px 20px}
  .lf-title{font-size:20px}
  .lf-sub{font-size:14px}
  .lf-form{padding:18px 18px 16px}
  .lf-grid{grid-template-columns:1fr;gap:12px}
  .lf-lbl{font-size:12px}
  .lf-btn{font-size:18px;height:52px}
  .lf-ticks{font-size:13px;gap:6px 16px}
  .lf-close{width:40px;height:40px}
}

/* ============================================================
   COMPACT variant — home hero ('lfCompact' => true)
   Same fields, ~35% shorter: tighter spacing, 2-column email / captcha,
   one-line message box that grows on focus.
   ============================================================ */
.lf-card-compact{border-radius:12px}
.lf-card-compact .lf-head{padding:14px 20px 15px}
.lf-card-compact .lf-title{font-size:19px;margin-bottom:3px}
.lf-card-compact .lf-sub{font-size:13px}
.lf-card-compact .lf-form{padding:16px 20px 14px}
.lf-card-compact .lf-grid{gap:10px 12px}
.lf-card-compact .lf-fld{gap:4px}
.lf-card-compact .lf-lbl{font-size:11px;letter-spacing:.5px}
.lf-card-compact .lf-inp{height:38px;font-size:14px;padding:0 11px;border-radius:7px}
.lf-card-compact .lf-sel{font-size:14px;padding-right:30px;background-position:right 11px center}
.lf-card-compact .lf-fld-email,
.lf-card-compact .lf-fld-cap{grid-column:auto}
.lf-card-compact .lf-fld-msg{order:10}
.lf-card-compact .lf-txt{height:38px;min-height:38px;padding:8px 11px;resize:none;transition:height .2s}
.lf-card-compact .lf-txt:focus{height:76px}
.lf-card-compact .lf-cap{gap:8px}
.lf-card-compact .lf-cap-q{height:38px;padding:0 10px;font-size:15px}
.lf-card-compact .lf-cap .lf-inp{min-width:0}
.lf-card-compact .lf-btn{height:44px;margin-top:14px;font-size:16px}
.lf-card-compact .lf-btn svg{width:17px;height:17px}
.lf-card-compact .lf-ticks{margin-top:12px;padding-top:10px;font-size:12.5px;gap:6px 18px}
.lf-card-compact .lf-ticks svg{width:14px;height:14px}
@media(max-width:576px){
  .lf-card-compact .lf-grid{grid-template-columns:1fr 1fr;gap:9px 10px}
  .lf-card-compact .lf-fld-email,
  .lf-card-compact .lf-fld-cap,
  .lf-card-compact .lf-fld-msg{grid-column:1/-1}
  .lf-card-compact .lf-head{padding:13px 16px}
  .lf-card-compact .lf-form{padding:14px 16px 12px}
}

/* ============================================================
   POPUP (header "Post Requirement" / floating Enquiry button)
   Pehle popup 790px chauda + full-size fields tha, laptop screen par
   scroll karna padta tha. Ab 580px compact card — header fixed rehta hai,
   sirf form area scroll hota hai, aur 768px-high screen par poora fit.
   ============================================================ */
.modal-box.lf-modal-box{
  padding:0;background:transparent;box-shadow:none;border-radius:12px;
  width:100%;max-width:580px;max-height:none;overflow:visible;
}
.lf-card-modal{
  border-radius:12px;display:flex;flex-direction:column;overflow:hidden;
  max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);
}
.lf-card-modal .lf-head{padding:14px 18px 15px;flex-shrink:0;align-items:center}
.lf-card-modal .lf-title{font-size:18px;margin-bottom:2px}
.lf-card-modal .lf-sub{font-size:13px}
.lf-card-modal .lf-close{width:34px;height:34px;border-radius:8px}
.lf-card-modal .lf-close svg{width:15px;height:15px}
.lf-card-modal .lf-form{padding:14px 18px;flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.lf-card-modal .lf-alert{font-size:12.5px;padding:8px 10px;margin-bottom:10px}
.lf-card-modal .lf-grid{grid-template-columns:1fr 1fr;gap:10px 12px}
.lf-card-modal .lf-fld{gap:4px}
.lf-card-modal .lf-lbl{font-size:11px;letter-spacing:.5px}
.lf-card-modal .lf-inp{height:38px;font-size:14px;padding:0 11px;border-radius:7px}
.lf-card-modal .lf-sel{font-size:14px;padding-right:30px;background-position:right 11px center}
.lf-card-modal .lf-fld-email,
.lf-card-modal .lf-fld-cap{grid-column:auto}
.lf-card-modal .lf-fld-msg{order:10}
.lf-card-modal .lf-txt{height:58px;min-height:58px;padding:8px 11px;resize:none}
.lf-card-modal .lf-cap{gap:8px}
.lf-card-modal .lf-cap-q{height:38px;padding:0 10px;font-size:15px}
.lf-card-modal .lf-cap .lf-inp{min-width:0}
.lf-card-modal .lf-err{font-size:11px}
.lf-card-modal .lf-btn{height:44px;margin-top:12px;font-size:16px;box-shadow:0 6px 16px rgba(232,114,12,.25)}
.lf-card-modal .lf-btn svg{width:17px;height:17px}
.lf-card-modal .lf-ticks{margin-top:10px;padding-top:10px;font-size:12px;gap:4px 16px}
.lf-card-modal .lf-ticks svg{width:13px;height:13px}

@media(max-width:576px){
  #enquiryModal.modal-backdrop{padding:10px}
  .lf-card-modal{max-height:calc(100vh - 20px);max-height:calc(100dvh - 20px)}
  .lf-card-modal .lf-head{padding:12px 14px}
  .lf-card-modal .lf-title{font-size:16.5px}
  .lf-card-modal .lf-sub{font-size:12px}
  .lf-card-modal .lf-form{padding:12px 14px}
  .lf-card-modal .lf-grid{grid-template-columns:1fr 1fr;gap:9px 10px}
  .lf-card-modal .lf-fld-email,
  .lf-card-modal .lf-fld-cap,
  .lf-card-modal .lf-fld-msg{grid-column:1/-1}
  .lf-card-modal .lf-inp{font-size:16px}   /* 16px = iPhone par focus karte hi zoom nahi hoga */
  .lf-card-modal .lf-sel{font-size:15px}
  .lf-card-modal .lf-ticks{font-size:11.5px;gap:4px 12px}
}
@media(max-height:640px) and (min-width:577px){
  .lf-card-modal .lf-ticks{display:none}
  .lf-card-modal .lf-txt{height:40px;min-height:40px}
}

/* ============================================================
   COMPANY MICROSITES — main website wala hi form, same look.
   Container (hero card / side card / contact card) ka apna padding,
   background aur border hata do — lead-form card hi card hai.
   ============================================================ */
.ms-lf-host{padding:0 !important;background:none !important;border:0 !important;box-shadow:none !important;overflow:visible}
.ms-lf-host > .lf-card{font-family:inherit}
.ms-lf-host .lf-title,.ms-modal-box--lf .lf-title{color:#fff}
.ms-lf-host .lf-lbl,.ms-modal-box--lf .lf-lbl{color:#6b7a8c}

/* microsite popup = main website popup (580px, centred — mobile par bhi) */
.ms-modal.ms-modal--lf{padding:16px;align-items:center}
.ms-modal-box.ms-modal-box--lf{
  display:block;width:100%;max-width:580px;max-height:none;
  background:transparent;box-shadow:none;border-radius:12px;overflow:visible;
}
@media(max-width:900px){
  .ms-modal.ms-modal--lf{padding:10px;align-items:center}
  .ms-modal-box.ms-modal-box--lf{display:block;max-width:580px;max-height:none;border-radius:12px;animation:none}
}

/* flash toast — microsites par bhi (main site par site.css me already hai) */
.pf-toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
  background:var(--pf-teal,#135062);color:#fff;border-radius:12px;
  padding:14px 18px;display:flex;align-items:center;gap:12px;
  box-shadow:0 14px 40px rgba(19,80,98,.34);z-index:9999;
  max-width:min(560px,92vw);font-size:13.5px;font-weight:600;line-height:1.55;
}
.pf-toast.gone{opacity:0;transform:translate(-50%,14px);transition:.4s}
.pf-toast svg{width:20px;height:20px;fill:#7ee0b0;flex-shrink:0}
.pf-toast button{background:rgba(255,255,255,.16);color:#fff;border:0;border-radius:6px;width:24px;height:24px;font-size:17px;line-height:1;flex-shrink:0;margin-left:4px;cursor:pointer}
.pf-toast-err{background:#9b2c1c}
.pf-toast-err svg{fill:#ffc9bd}