/* ================================================================
   contact.css  –  Shivap Solutions  |  Contact Page Styles ONLY
   ================================================================ */

* { font-family: 'Poppins', sans-serif; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: #fff; color: #1e293b; -webkit-font-smoothing: antialiased; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #1d4ed8; border-radius: 10px; }

/* ── Gradient text ── */
.gt {
  background: linear-gradient(135deg, #1d4ed8, #0d9488);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Pulse dot ── */
@keyframes pd { 0%,100%{opacity:1} 50%{opacity:.25} }
.pd { animation: pd 1.5s infinite; }

/* ── Reveal (header.js drives .vis class) ── */
.rv  { opacity:0; transform:translateY(26px); transition:opacity .65s ease,      transform .65s ease; }
.rv2 { opacity:0; transform:translateY(26px); transition:opacity .65s ease .12s, transform .65s ease .12s; }
.rv.vis, .rv2.vis { opacity:1; transform:translateY(0); }

/* ── Hero float animations ── */
@keyframes hFloat  { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
@keyframes hFloat2 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
@keyframes hSpin   { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes dotPulse{ 0%,100%{transform:scale(1);opacity:.7} 50%{transform:scale(1.8);opacity:1} }

/* ── Card hover ── */
.lift { transition: transform .3s, box-shadow .3s, border-color .3s; }
.lift:hover { transform: translateY(-4px); border-color: rgba(29,78,216,.25) !important; box-shadow: 0 12px 32px rgba(29,78,216,.1); }

/* ─────────────────────────────────────────
   FORM STYLES
───────────────────────────────────────── */
.form-input {
  width: 100%;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 13px 16px;
  font-size: 14px;
  color: #1e293b;
  transition: border-color .25s, box-shadow .25s, transform .2s;
  outline: none;
  font-family: 'Poppins', sans-serif;
}
.form-input::placeholder { color: #94a3b8; font-size: 13.5px; }
.form-input:focus {
  border-color: #1d4ed8;
  box-shadow: 0 0 0 4px rgba(29,78,216,.08);
  transform: translateY(-1px);
}
.form-input:hover:not(:focus) { border-color: #93c5fd; }

.form-select {
  width: 100%;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 13px 42px 13px 16px;
  font-size: 14px;
  color: #1e293b;
  transition: border-color .25s, box-shadow .25s;
  outline: none;
  font-family: 'Poppins', sans-serif;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: 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='M1 1l5 5 5-5' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
.form-select:focus { border-color: #1d4ed8; box-shadow: 0 0 0 4px rgba(29,78,216,.08); }
.form-select:hover:not(:focus) { border-color: #93c5fd; }

textarea.form-input { resize: vertical; min-height: 140px; }

.form-label { display: block; font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 7px; }
.form-label span { color: #ef4444; }

/* Submit button pulse */
@keyframes btnPulse {
  0%,100%{ box-shadow: 0 0 0 0 rgba(29,78,216,.4); }
  70%    { box-shadow: 0 0 0 14px rgba(29,78,216,0); }
}
.btn-submit { animation: btnPulse 2.5s infinite; }

/* ── Success state ── */
.success-tick {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1d4ed8, #0d9488);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
  box-shadow: 0 8px 24px rgba(29,78,216,.4);
}
@keyframes successPop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.success-state { animation: successPop .5s cubic-bezier(.34,1.56,.64,1) both; }

/* ── FAQ accordion ── */
.faq-item .faq-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease, padding .3s ease;
}
.faq-item.open .faq-body { max-height: 220px; padding-bottom: 18px; }

.faq-item .faq-icon { transition: transform .3s; }
.faq-item.open .faq-icon { transform: rotate(45deg); }

/* ── Info card hover ── */
.info-card {
  transition: transform .3s, border-color .3s, box-shadow .3s;
  cursor: default;
}
.info-card:hover {
  transform: translateY(-4px);
  border-color: rgba(29,78,216,.22) !important;
  box-shadow: 0 12px 32px rgba(29,78,216,.1);
}

/* ── Map placeholder ── */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}
.map-shimmer {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 800px 100%;
  animation: shimmer 2s infinite;
}

/* ── Progress bar (multi-step form) ── */
.progress-bar-track { background: rgba(255,255,255,.2); height: 3px; border-radius: 2px; }
.progress-bar-fill  { height: 100%; background: rgba(255,255,255,.6); border-radius: 2px; transition: width .5s ease; }

/* ── Step indicator ── */
.step-indicator {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  transition: background .3s, color .3s;
}
.step-indicator.active  { background: #fff; color: #1d4ed8; }
.step-indicator.done    { background: #4ade80; color: #fff; }
.step-indicator.pending { background: rgba(255,255,255,.2); color: rgba(255,255,255,.7); }