/* ==========================================================================
   TECNVIRONS — RFQ Enquiry Form Stylesheet
   File: styles/enquiry-form.css
   Relies on design tokens defined in styles/landingpage.css
   ========================================================================== */

.ef-hero{
  padding:150px 32px 60px;
  background:linear-gradient(120deg, var(--royal-blue), var(--indigo));
  text-align:center;
}
@media (max-width: 768px){
  .ef-hero{ padding:36px 20px 44px; }
}
.ef-hero-eyebrow{
  display:inline-block;
  background:rgba(255,255,255,0.15);
  color:#eef1ff;
  font-family:var(--mono-ui);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:7px 16px;
  border-radius:999px;
}
.ef-hero h1{
  margin-top:18px;
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(28px,4vw,44px);
  line-height:1.15;
  color:#fff;
  max-width:780px;
  margin-left:auto;
  margin-right:auto;
}
.ef-hero p{
  margin-top:16px;
  font-size:16px;
  line-height:1.65;
  color:var(--paper-ink-soft);
  max-width:620px;
  margin-left:auto;
  margin-right:auto;
}

.ef-layout{
  max-width:1280px;
  margin:0 auto;
  padding:48px 32px 100px;
  display:grid;
  grid-template-columns:280px 1fr;
  gap:36px;
  align-items:start;
}
@media (max-width: 900px){
  .ef-layout{ grid-template-columns:1fr; padding:32px 20px 80px; }
  #efSidebar{ display:none; }
}

/* ===== SIDEBAR STEPPER ===== */
.ef-sidebar-card{
  position:sticky;
  top:110px;
  border:1px solid var(--gray-line);
  border-radius:var(--radius-m);
  background:var(--surface);
  box-shadow:0 8px 30px -12px rgba(10,15,46,.12);
  padding:20px;
}
.ef-sidebar-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:6px;
}
.ef-sidebar-top span:first-child{
  font-family:var(--mono-ui);
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
#efProgressPercent{
  font-size:12px;
  font-weight:700;
  color:var(--royal-blue);
}
.ef-progress-track{
  height:6px;
  width:100%;
  border-radius:999px;
  background:var(--soft-gray);
  overflow:hidden;
  margin-bottom:18px;
}
.ef-progress-fill{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, var(--royal-blue), var(--indigo));
  transition:width .4s var(--ease);
  width:0%;
}
.ef-step-item{
  width:100%;
  display:flex;
  align-items:flex-start;
  gap:10px;
  text-align:left;
  padding:9px 10px;
  border-radius:12px;
  transition:background .2s ease;
}
.ef-step-item:hover{ background:var(--soft-gray); }
.ef-step-item.current{ background:var(--royal-blue-soft); }
.ef-step-badge{
  flex-shrink:0;
  width:24px;
  height:24px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11.5px;
  font-weight:700;
  background:var(--soft-gray);
  color:var(--ink-soft);
}
.ef-step-badge.current{ background:var(--royal-blue); color:#fff; }
.ef-step-badge.visited{ background:rgba(16,185,129,.15); color:var(--emerald); }
.ef-step-label{
  font-size:13.5px;
  font-weight:500;
  color:var(--ink-soft);
  line-height:1.4;
  padding-top:2px;
}
.ef-step-label.current{ font-weight:700; color:var(--ink); }

/* ===== MOBILE PROGRESS ===== */
#efMobileProgress{ margin-bottom:16px; }
.ef-mobile-progress-top{
  display:flex;
  justify-content:space-between;
  font-size:13px;
  color:var(--ink-soft);
  margin-bottom:8px;
}
.ef-mobile-track{
  height:6px; border-radius:999px; background:var(--soft-gray); overflow:hidden;
}
.ef-mobile-fill{
  height:100%; border-radius:999px;
  background:linear-gradient(90deg, var(--royal-blue), var(--indigo));
  transition:width .4s var(--ease); width:0%;
}

/* ===== FORM CARD ===== */
.ef-form-card{
  border:1px solid var(--gray-line);
  border-radius:var(--radius-l);
  background:var(--surface);
  box-shadow:0 20px 60px -24px rgba(10,15,46,.18);
  padding:40px;
}
@media (max-width: 640px){ .ef-form-card{ padding:26px 20px; } }

@media (max-width: 420px){
  .ef-phone-code{ max-width:96px; padding:12px 6px; font-size:13px; }
  .ef-phone-input{ padding:12px 10px; }
}

.ef-section-label{
  font-family:var(--mono-ui);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--royal-blue);
}
.ef-section-title{
  margin-top:6px;
  font-family:var(--display);
  font-size:clamp(22px,2.6vw,30px);
  font-weight:700;
  color:var(--ink);
}
.ef-section-desc{
  margin-top:10px;
  font-size:15px;
  line-height:1.65;
  color:var(--ink-soft);
  max-width:620px;
}

.ef-fields{ margin-top:34px; display:flex; flex-direction:column; gap:34px; }

.ef-field-label-row{
  display:flex;
  align-items:flex-start;
  gap:8px;
}
.ef-field-label{
  display:block;
  font-size:15.5px;
  font-weight:700;
  color:var(--ink);
  line-height:1.4;
}
.ef-required{ color:var(--error); }
.ef-field-helper{
  margin-top:6px;
  font-size:13.5px;
  color:var(--ink-soft);
}

/* ===== INFO BUTTON / "WHY WE ASK" TOOLTIP ===== */
.ef-info-holder{
  position:relative;
  flex-shrink:0;
  display:inline-flex;
  margin-top:1px;
}
.ef-info-btn{
  width:19px;
  height:19px;
  border-radius:999px;
  border:1.5px solid var(--royal-blue);
  color:var(--royal-blue);
  background:#fff;
  font-family:var(--body);
  font-size:12px;
  font-weight:700;
  font-style:italic;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.ef-info-btn:hover,
.ef-info-btn:focus-visible{
  background:var(--royal-blue);
  color:#fff;
}
.ef-info-tooltip{
  display:none;
  position:absolute;
  z-index:20;
  top:calc(100% + 10px);
  left:0;
  width:min(340px, 78vw);
  background:var(--navy);
  color:#eef1ff;
  font-size:13px;
  font-weight:400;
  font-style:normal;
  line-height:1.55;
  border-radius:12px;
  padding:14px 16px;
  box-shadow:0 16px 40px -12px rgba(10,15,46,.4);
}
.ef-info-tooltip::before{
  content:"";
  position:absolute;
  top:-6px;
  left:8px;
  width:12px;
  height:12px;
  background:var(--navy);
  transform:rotate(45deg);
  border-radius:2px;
}
.ef-info-holder.open .ef-info-tooltip{ display:block; }
.ef-info-holder.flip-left .ef-info-tooltip{
  left:auto;
  right:0;
}
.ef-info-holder.flip-left .ef-info-tooltip::before{
  left:auto;
  right:8px;
}
.ef-input-area{ margin-top:12px; }
.ef-field-error{
  margin-top:8px;
  font-size:13px;
  font-weight:600;
  color:var(--error);
}

.ef-input{
  width:100%;
  border:2px solid var(--gray-line);
  border-radius:12px;
  padding:12px 16px;
  font-size:15px;
  color:var(--ink);
  background:#fff;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.ef-input::placeholder{ color:#9a94a8; }
.ef-input:focus{
  outline:none;
  border-color:var(--royal-blue);
  box-shadow:0 0 0 4px var(--royal-blue-soft);
}
.ef-input.error{ border-color:var(--error); }
textarea.ef-input{ resize:vertical; min-height:100px; }

.ef-phone-box{
  display:flex;
  align-items:stretch;
  border:2px solid var(--gray-line);
  border-radius:12px;
  background:#fff;
  overflow:hidden;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.ef-phone-box:focus-within{
  border-color:var(--royal-blue);
  box-shadow:0 0 0 4px var(--royal-blue-soft);
}
.ef-phone-box.error{ border-color:var(--error); }
.ef-phone-code{
  flex-shrink:0;
  max-width:130px;
  border:none;
  border-right:2px solid var(--gray-line);
  background:var(--soft-gray);
  padding:12px 10px;
  font-size:14px;
  color:var(--ink);
}
.ef-phone-code:focus{ outline:none; }
.ef-phone-input{
  flex:1;
  min-width:0;
  border:none;
  padding:12px 16px;
  font-size:15px;
  color:var(--ink);
}
.ef-phone-input:focus{ outline:none; }

.ef-option-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:12px;
}
@media (max-width: 560px){ .ef-option-grid{ grid-template-columns:1fr; } }
.ef-option{
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px 16px;
  border:2px solid var(--gray-line);
  border-radius:12px;
  font-size:14px;
  font-weight:500;
  color:var(--ink-soft);
  cursor:pointer;
  transition:all .18s ease;
}
.ef-option:hover{ border-color:#c7c1d6; background:var(--soft-gray); }
.ef-option.checked{
  border-color:var(--royal-blue);
  background:var(--royal-blue-soft);
  color:var(--ink);
}
.ef-option input{ flex-shrink:0; width:16px; height:16px; accent-color:var(--royal-blue); }

.ef-dropzone{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-align:center;
  padding:38px 20px;
  border:2px dashed #cfc8dc;
  border-radius:16px;
  background:var(--soft-gray);
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease;
}
.ef-dropzone:hover{ border-color:var(--royal-blue); background:var(--royal-blue-soft); }
.ef-dropzone-icon{ font-size:22px; color:#9a94a8; }
.ef-dropzone-text{ font-size:14px; color:var(--ink-soft); }
.ef-dropzone-text strong{ color:var(--royal-blue); }
.ef-dropzone-helper{ font-size:12px; color:#9a94a8; }
.ef-dropzone-input{ display:none; }
.ef-file-list{ margin-top:10px; display:flex; flex-direction:column; gap:6px; }
.ef-file-list li{
  font-size:13px;
  color:var(--ink-soft);
  background:var(--soft-gray);
  border-radius:8px;
  padding:8px 12px;
}

.ef-submit-error{
  display:none;
  margin-top:28px;
  border:1px solid rgba(239,68,68,.35);
  background:rgba(239,68,68,.08);
  color:#b91c1c;
  border-radius:12px;
  padding:12px 16px;
  font-size:14px;
}

.ef-actions{
  margin-top:40px;
  padding-top:26px;
  border-top:1px solid var(--gray-line);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.ef-btn-back{
  font-size:14px;
  font-weight:700;
  color:var(--ink-soft);
  padding:11px 18px;
  border-radius:12px;
  transition:background .2s ease;
}
.ef-btn-back:hover:not(:disabled){ background:var(--soft-gray); }
.ef-btn-back:disabled{ opacity:.4; cursor:not-allowed; }
.ef-btn-next{
  font-size:14px;
  font-weight:700;
  color:#fff;
  padding:13px 26px;
  border-radius:12px;
  background:linear-gradient(90deg, var(--royal-blue), var(--indigo));
  box-shadow:0 10px 26px -8px rgba(26,59,255,.55);
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.ef-btn-next:hover:not(:disabled){ transform:translateY(-2px); box-shadow:0 14px 32px -8px rgba(26,59,255,.65); }
.ef-btn-next:disabled{ opacity:.65; cursor:not-allowed; }

.ef-footnote{
  margin-top:22px;
  text-align:center;
  font-size:12.5px;
  color:#9a94a8;
}

/* ===== SUCCESS CARD ===== */
.ef-success-card{
  display:none;
  text-align:center;
  border:1px solid var(--gray-line);
  border-radius:var(--radius-l);
  background:var(--surface);
  box-shadow:0 20px 60px -24px rgba(10,15,46,.18);
  padding:70px 40px;
  max-width:560px;
  margin:0 auto;
}
.ef-success-icon{
  width:76px; height:76px; margin:0 auto 24px;
  border-radius:999px;
  background:rgba(16,185,129,.14);
  display:flex; align-items:center; justify-content:center;
  font-size:34px; color:var(--emerald);
}
.ef-success-card h2{
  font-family:var(--display);
  font-size:26px; font-weight:700; color:var(--ink);
}
.ef-success-card p{
  margin-top:14px;
  font-size:15px;
  line-height:1.65;
  color:var(--ink-soft);
}
