/* ══════════════════════════════════════════════════════════════
   SURVEY FORM — MOBILE-FIRST PROFESSIONAL ANIMATED DESIGN
   Deep Navy Blue Background Theme
   ══════════════════════════════════════════════════════════════ */

@keyframes sfFadeUp {
  from { opacity:0; transform:translateY(18px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes sfPop {
  0%   { transform:scale(0.93); opacity:0; }
  70%  { transform:scale(1.02); }
  100% { transform:scale(1);    opacity:1; }
}
@keyframes sfBounce {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(-5px); }
}

/* Modal wrapper font */
#surveyModal { font-family:"Inter","Outfit",system-ui,-apple-system,sans-serif; }

/* ── Header ── */
.survey-modal-header {
  background:linear-gradient(135deg,#0f172a 0%,#1e3a8a 55%,#2563eb 100%) !important;
  border-bottom:1.5px solid rgba(255,255,255,0.1) !important;
  box-shadow:0 4px 20px rgba(0,0,0,0.35);
}
.survey-modal-header h3 {
  color:#fff !important; font-weight:800 !important;
  font-size:1rem !important; letter-spacing:0.02em;
  text-shadow:0 1px 4px rgba(0,0,0,0.4);
}
.survey-modal-header span { animation:sfBounce 2.5s ease-in-out infinite; }
#surveyCloseBtn {
  background:rgba(255,255,255,0.15) !important;
  border:1.5px solid rgba(255,255,255,0.35) !important;
  color:#fff !important; backdrop-filter:blur(8px);
  transition:background 0.2s,transform 0.15s;
}
#surveyCloseBtn:hover,#surveyCloseBtn:active {
  background:rgba(239,68,68,0.85) !important; transform:scale(1.08);
}

/* ── Body background ── overridden by inline style with !important */
.survey-modal-body {
  background:#0d1b3e !important;
}

/* ── Card sections ── */
.survey-modal-body .card-section {
  background:#ffffff !important;
  border-radius:16px !important;
  padding:16px 14px !important;
  margin-bottom:12px !important;
  border:none !important;
  box-shadow:0 4px 20px rgba(0,0,0,0.25),0 1px 4px rgba(0,0,0,0.12) !important;
  animation:sfFadeUp 0.42s ease both;
  overflow:hidden; position:relative;
}
.survey-modal-body .card-section::before {
  content:''; position:absolute;
  top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg,#2563eb,#7c3aed,#0891b2);
  border-radius:16px 16px 0 0;
}
.survey-modal-body .card-section:nth-child(1){ animation-delay:0.04s; }
.survey-modal-body .card-section:nth-child(2){ animation-delay:0.09s; }
.survey-modal-body .card-section:nth-child(3){ animation-delay:0.13s; }
.survey-modal-body .card-section:nth-child(4){ animation-delay:0.17s; }
.survey-modal-body .card-section:nth-child(5){ animation-delay:0.21s; }
.survey-modal-body .card-section:nth-child(6){ animation-delay:0.24s; }
.survey-modal-body .card-section:nth-child(7){ animation-delay:0.27s; }
.survey-modal-body .card-section:nth-child(8){ animation-delay:0.29s; }
.survey-modal-body .card-section:nth-child(9){ animation-delay:0.31s; }
.survey-modal-body .card-section:nth-child(10){ animation-delay:0.33s; }

/* Per-section accent bar */
.survey-modal-body .card-section:nth-child(1)::before{background:linear-gradient(90deg,#2563eb,#3b82f6);}
.survey-modal-body .card-section:nth-child(2)::before{background:linear-gradient(90deg,#7c3aed,#a78bfa);}
.survey-modal-body .card-section:nth-child(3)::before{background:linear-gradient(90deg,#0891b2,#22d3ee);}
.survey-modal-body .card-section:nth-child(4)::before{background:linear-gradient(90deg,#16a34a,#4ade80);}
.survey-modal-body .card-section:nth-child(5)::before{background:linear-gradient(90deg,#d97706,#fbbf24);}
.survey-modal-body .card-section:nth-child(6)::before{background:linear-gradient(90deg,#dc2626,#f87171);}
.survey-modal-body .card-section:nth-child(7)::before{background:linear-gradient(90deg,#6d28d9,#c4b5fd);}
.survey-modal-body .card-section:nth-child(8)::before{background:linear-gradient(90deg,#0f766e,#2dd4bf);}
.survey-modal-body .card-section:nth-child(9)::before{background:linear-gradient(90deg,#1e3a8a,#6366f1);}
.survey-modal-body .card-section:nth-child(10)::before{background:linear-gradient(90deg,#374151,#9ca3af);}

/* Section header */
.survey-modal-body .card-section h4 {
  font-size:0.8rem !important; font-weight:800 !important;
  letter-spacing:0.07em !important; text-transform:uppercase;
  color:#1e3a8a !important; margin:0 0 14px !important;
  display:flex; align-items:center; gap:7px;
}
.survey-modal-body .card-section h4::after {
  content:''; flex:1; height:1.5px;
  background:linear-gradient(90deg,#dbeafe,transparent);
  border-radius:2px; margin-left:4px;
}

/* ── Form labels ── */
.survey-modal-body label {
  font-size:0.75rem !important; font-weight:700 !important;
  color:#334155 !important; display:block;
  margin-bottom:5px !important; letter-spacing:0.01em;
}

/* ── Form controls ── */
.survey-modal-body .form-control {
  width:100%; padding:10px 12px !important;
  font-size:0.87rem !important; font-weight:500;
  color:#0f172a !important; background:#f8faff !important;
  border:1.5px solid #c7d2fe !important;
  border-radius:10px !important; outline:none;
  transition:border-color 0.2s,box-shadow 0.2s,background 0.2s;
  -webkit-appearance:none; appearance:none;
  box-sizing:border-box; line-height:1.4;
  -webkit-tap-highlight-color:transparent;
}
.survey-modal-body .form-control:focus {
  border-color:#3b82f6 !important; background:#fff !important;
  box-shadow:0 0 0 3px rgba(59,130,246,0.16) !important;
}
.survey-modal-body .form-control::placeholder { color:#94a3b8 !important; font-weight:400; }
.survey-modal-body textarea.form-control { resize:vertical; min-height:72px; }
.survey-modal-body select.form-control {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%232563eb' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right 10px center !important;
  background-size:18px !important; padding-right:32px !important;
}
.survey-modal-body select.form-control:disabled {
  background-color:#f1f5f9 !important; border-color:#e2e8f0 !important;
  color:#94a3b8 !important; cursor:not-allowed;
}
.survey-modal-body input[readonly].form-control {
  background:linear-gradient(135deg,#f1f5f9,#e0e7ff) !important;
  border-color:#c7d2fe !important; color:#475569 !important;
}
#fieldSurveyId {
  font-family:monospace !important; font-weight:700 !important;
  font-size:0.8rem !important; color:#1e3a8a !important;
  background:linear-gradient(135deg,#eff6ff,#dbeafe) !important;
  border-color:#bfdbfe !important; letter-spacing:0.04em;
}

/* ── GPS bar ── */
#fieldGpsLat,#fieldGpsLng {
  background:#fff !important; border:1.5px solid #86efac !important;
  border-radius:8px !important; font-family:monospace !important;
  font-weight:700 !important; font-size:0.82rem !important; color:#166534 !important;
}
#fieldGpsLat:focus,#fieldGpsLng:focus {
  box-shadow:0 0 0 3px rgba(22,163,74,0.15) !important; border-color:#22c55e !important;
}
.survey-modal-body div[style*="f0fdf4"] button {
  border-radius:8px !important; font-weight:700 !important;
  transition:transform 0.12s !important;
}
.survey-modal-body div[style*="f0fdf4"] button:active { transform:scale(0.95) !important; }

/* ── Village suggest box ── */
#villageSuggestBox { animation:sfFadeUp 0.15s ease; }

/* ── Photo cards ── */
.survey-modal-body .card-section > div[style*="auto-fit"] > div {
  transition:transform 0.2s,box-shadow 0.2s; animation:sfPop 0.32s ease both;
}
.survey-modal-body .card-section > div[style*="auto-fit"] > div:active { transform:scale(0.97); }
.survey-modal-body .card-section > div[style*="auto-fit"] button,
.survey-modal-body .card-section > div[style*="auto-fit"] label {
  transition:filter 0.15s,transform 0.12s !important;
}
.survey-modal-body .card-section > div[style*="auto-fit"] button:active,
.survey-modal-body .card-section > div[style*="auto-fit"] label:active {
  filter:brightness(0.9); transform:scale(0.96);
}

/* Photo preview */
#photoPreviewGrid > div {
  border-radius:10px; overflow:hidden;
  box-shadow:0 3px 10px rgba(0,0,0,0.14);
  animation:sfPop 0.28s ease both; transition:transform 0.2s;
}

/* ── Signature boxes ── */
.signature-box {
  border:2px dashed #bfdbfe !important;
  border-radius:12px !important; background:#f8faff !important;
  transition:border-color 0.2s,box-shadow 0.2s;
}
.signature-box:focus-within {
  border-color:#3b82f6 !important; box-shadow:0 0 0 3px rgba(59,130,246,0.10);
}
canvas.sig-canvas {
  border-radius:8px !important; border:1.5px solid #dbeafe !important;
  background:#fff !important; touch-action:none;
}

/* ── Submit footer ── */
.survey-modal-footer {
  background:#0f172a !important;
  border-top:2px solid rgba(99,102,241,0.4) !important;
  box-shadow:0 -6px 30px rgba(0,0,0,0.4) !important;
  padding:10px 14px !important;
}
.survey-modal-footer .btn {
  border-radius:14px !important; font-weight:800 !important;
  font-size:0.9rem !important; min-height:50px !important;
  letter-spacing:0.02em;
  transition:transform 0.15s,box-shadow 0.15s !important;
}
.survey-modal-footer .btn:active { transform:scale(0.97) !important; filter:brightness(0.93); }
.survey-modal-footer .btn-primary {
  background:linear-gradient(135deg,#1e3a8a 0%,#2563eb 55%,#3b82f6 100%) !important;
  box-shadow:0 4px 18px rgba(37,99,235,0.5) !important;
  color:#fff !important; border:none !important;
}
.survey-modal-footer .btn-secondary {
  background:rgba(255,255,255,0.08) !important;
  color:#c7d2fe !important;
  border:1.5px solid rgba(99,102,241,0.4) !important;
}
.survey-modal-footer .btn-secondary:hover {
  background:rgba(99,102,241,0.15) !important; border-color:#818cf8 !important;
}

/* ── Scrollbar (Webkit) ── */
.survey-modal-body::-webkit-scrollbar { width:3px; }
.survey-modal-body::-webkit-scrollbar-track { background:rgba(255,255,255,0.05); }
.survey-modal-body::-webkit-scrollbar-thumb { background:rgba(99,102,241,0.5); border-radius:4px; }

/* ── Map picker ── */
#mapPickerModal { animation:sfFadeUp 0.2s ease; }

/* ── Very small phones ── */
@media (max-width:360px) {
  .survey-modal-body .card-section { padding:12px 10px !important; }
  .survey-modal-body .form-control { font-size:0.83rem !important; padding:9px 10px !important; }
}