/* =========================================================
   fssai-lead-form.css — Premium FSSAI Lead Capture System
   ClearlyComply © 2026
   ========================================================= */

/* ── FSSAI BUSINESS TYPE NAVIGATOR ───────────────────────────────────────── */
.fssai-biz-nav {
  background: var(--white);
  padding: 40px 0 36px;
  border-bottom: 1px solid #e8f0fe;
}
.fbn-header {
  text-align: center;
  margin-bottom: 22px;
}
.fbn-title {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-weight: 800;
  color: var(--fn);
  margin: 0 0 6px;
}
.fbn-sub {
  font-size: .82rem;
  color: var(--gray-600);
  margin: 0;
  line-height: 1.5;
}
.fssai-biz-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 8px;
  justify-content: center;
  max-width: 1000px;
  margin: 0 auto;
}
.fssai-biz-pill {
  display: inline-block;
  padding: 6px 14px;
  background: #f1f5f9;
  border: 1.5px solid #e2e8f0;
  border-radius: 50px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--fn);
  text-decoration: none;
  transition: var(--transition);
  white-space: nowrap;
  line-height: 1.4;
}
.fssai-biz-pill:hover {
  background: var(--fg-light);
  border-color: var(--fg);
  color: var(--fg-xdark);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(22,163,74,.15);
}
.fbn-footer {
  text-align: center;
  margin-top: 18px;
  font-size: .8rem;
  color: var(--gray-600);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.fbn-footer a {
  color: var(--fg);
  font-weight: 700;
  text-decoration: none;
}
.fbn-footer a:hover { text-decoration: underline; }
@media(max-width: 480px) {
  .fssai-biz-nav { padding: 28px 0 24px; }
  .fssai-biz-pill { font-size: .74rem; padding: 5px 11px; }
}

:root {
  --fg: #16a34a;
  --fg-dark: #15803d;
  --fg-xdark: #166534;
  --fg-light: #dcfce7;
  --fn: #0B3C5D;
  --fn-mid: #1A7FC4;
  --fa: #F59E0B;
  --fa-dark: #D97706;
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-400: #94a3b8;
  --gray-600: #475569;
  --gray-700: #374151;
  --gray-900: #111827;
  --white: #ffffff;
  --radius-xl: 20px;
  --radius-lg: 14px;
  --radius-md: 10px;
  --radius-sm: 8px;
  --shadow-xl: 0 25px 50px -12px rgba(0,0,0,.28);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.14);
  --shadow-md: 0 4px 16px rgba(0,0,0,.08);
  --transition: all .22s cubic-bezier(.4,0,.2,1);
}

/* ── FORM SECTION WRAPPER ─────────────────────────────── */
.fssai-lead-section {
  background: linear-gradient(135deg,#0a4f2a 0%,#0B3C5D 50%,#0d6b3c 100%);
  padding: 60px 0 72px;
  position: relative;
  overflow: hidden;
}
.fssai-lead-section::before {
  content:'';position:absolute;inset:0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events:none;
}
.fssai-lead-section .container { position:relative;z-index:1; }

/* ── SECTION HEADER ───────────────────────────────────── */
.fls-header { text-align:center; margin-bottom:40px; color:var(--white); }
.fls-badge {
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  color:var(--white);font-size:.72rem;font-weight:700;
  padding:5px 14px;border-radius:50px;text-transform:uppercase;
  letter-spacing:.09em;margin-bottom:14px;
}
.fls-header h2 {
  font-size:clamp(1.55rem,3.2vw,2.1rem);font-weight:800;
  margin:0 0 10px;color:var(--white);line-height:1.2;
}
.fls-header p {
  font-size:.98rem;color:rgba(255,255,255,.78);margin:0;line-height:1.6;
  max-width:560px;margin-inline:auto;
}

/* ── GLASS CARD ──────────────────────────────────────── */
.fssai-glass-card {
  background:var(--white);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-xl);
  max-width:720px;
  margin:0 auto;
  overflow:hidden;
  position:relative;
}
.fgc-top {
  background:linear-gradient(90deg,var(--fg) 0%,var(--fn) 100%);
  padding:18px 28px;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:10px;
}
.fgc-top-title {
  font-size:1.05rem;font-weight:800;color:var(--white);
}
.fgc-top-secure {
  display:flex;align-items:center;gap:6px;
  font-size:.72rem;color:rgba(255,255,255,.8);font-weight:500;
}
.fgc-body { padding:28px 32px 32px; }
@media(max-width:600px){
  .fgc-body{padding:20px 16px 24px;}
  .fgc-top{padding:14px 16px;}
}

/* ── FORM GRID ────────────────────────────────────────── */
.fssai-form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
@media(max-width:600px){
  .fssai-form-grid{grid-template-columns:1fr;}
}
.fssai-form-grid .span-2 { grid-column:1/-1; }

/* ── INPUT GROUP ──────────────────────────────────────── */
.fssai-field {
  display:flex;flex-direction:column;gap:5px;
}
.fssai-label {
  font-size:.78rem;font-weight:700;color:var(--fn);
  letter-spacing:.01em;
  display:flex;align-items:center;gap:4px;
}
.fssai-label .req { color:var(--fg); }

.fssai-input-wrap { position:relative; }
.fssai-input-wrap .fi-icon {
  position:absolute;left:13px;top:50%;transform:translateY(-50%);
  font-size:.92rem;pointer-events:none;
}

.fssai-input {
  width:100%;box-sizing:border-box;
  padding:12px 14px 12px 38px;
  border:1.8px solid var(--gray-200);
  border-radius:var(--radius-md);
  font-size:.92rem;color:var(--gray-900);
  background:var(--gray-50);
  transition:var(--transition);
  font-family:inherit;
  outline:none;
  -webkit-appearance:none;appearance:none;
}
.fssai-input:focus {
  border-color:var(--fg);
  background:var(--white);
  box-shadow:0 0 0 3px rgba(22,163,74,.13);
}
.fssai-input.error {
  border-color:#ef4444;
  background:#fff5f5;
  box-shadow:0 0 0 3px rgba(239,68,68,.1);
}
.fssai-input.valid {
  border-color:var(--fg);
  background:#f0fdf4;
}
.fssai-input::placeholder { color:var(--gray-400); }
select.fssai-input {
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2394a3b8' d='M4.5 6.5L8 10l3.5-3.5h-7z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:18px;
  padding-right:38px;
}

.fssai-error-msg {
  font-size:.72rem;color:#ef4444;font-weight:600;
  display:none;margin-top:2px;
}
.fssai-field.has-error .fssai-error-msg { display:block; }

/* ── FSSAI TYPE CARDS ─────────────────────────────────── */
.fssai-type-grid {
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  margin-top:4px;
}
@media(max-width:500px){.fssai-type-grid{grid-template-columns:1fr;}}

.fssai-type-card {
  position:relative;cursor:pointer;
}
.fssai-type-card input[type=radio] {
  position:absolute;opacity:0;width:0;height:0;
}
.ftc-label {
  display:flex;flex-direction:column;align-items:center;
  padding:14px 10px 12px;
  border:2px solid var(--gray-200);
  border-radius:var(--radius-md);
  background:var(--gray-50);
  transition:var(--transition);
  cursor:pointer;text-align:center;
  gap:6px;
}
.ftc-label:hover {
  border-color:var(--fg);background:#f0fdf4;
}
.fssai-type-card input:checked + .ftc-label {
  border-color:var(--fg);
  background:var(--fg-light);
  box-shadow:0 0 0 3px rgba(22,163,74,.14);
}
.ftc-icon { font-size:1.3rem;line-height:1; }
.ftc-name { font-size:.75rem;font-weight:700;color:var(--fn);line-height:1.2; }
.ftc-price { font-size:.7rem;color:var(--fg);font-weight:600; }
.ftc-check {
  position:absolute;top:6px;right:8px;
  width:16px;height:16px;
  background:var(--fg);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .18s;
  font-size:.55rem;color:#fff;font-weight:800;
}
.fssai-type-card input:checked ~ .ftc-check { opacity:1; }

/* ── CTA BUTTON ──────────────────────────────────────── */
.fssai-submit-btn {
  width:100%;
  padding:15px 28px;
  background:linear-gradient(135deg,var(--fg) 0%,var(--fn) 100%);
  color:var(--white);
  border:none;border-radius:var(--radius-md);
  font-size:1.02rem;font-weight:800;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:10px;
  transition:var(--transition);
  font-family:inherit;
  box-shadow:0 4px 18px rgba(22,163,74,.35);
  position:relative;overflow:hidden;
  letter-spacing:.01em;
}
.fssai-submit-btn::before {
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.08) 0%,transparent 50%);
  border-radius:inherit;
}
.fssai-submit-btn:hover:not(:disabled) {
  transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(22,163,74,.42);
  background:linear-gradient(135deg,var(--fg-dark) 0%,#0a3352 100%);
}
.fssai-submit-btn:active:not(:disabled) { transform:translateY(0); }
.fssai-submit-btn:disabled {
  opacity:.7;cursor:not-allowed;transform:none;
}
.fssai-submit-btn .btn-arrow { font-size:1.1rem;transition:transform .22s; }
.fssai-submit-btn:hover .btn-arrow { transform:translateX(4px); }

.fssai-submit-btn .btn-loader {
  display:none;
  width:18px;height:18px;
  border:2.5px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  border-radius:50%;
  animation:fssaiSpin .7s linear infinite;
}
.fssai-submit-btn.loading .btn-text,
.fssai-submit-btn.loading .btn-arrow { display:none; }
.fssai-submit-btn.loading .btn-loader { display:block; }

@keyframes fssaiSpin {
  to { transform:rotate(360deg); }
}

/* ── TRUST ROW ───────────────────────────────────────── */
.fssai-form-trust {
  display:flex;justify-content:center;flex-wrap:wrap;gap:12px 20px;
  margin-top:16px;padding-top:16px;
  border-top:1px solid var(--gray-100);
}
.fft-item {
  display:flex;align-items:center;gap:5px;
  font-size:.72rem;color:var(--gray-600);font-weight:500;
}
.fft-item strong { color:var(--fn); }

/* ── INLINE HERO FORM VARIANT ─────────────────────────── */
.fssai-hero-form {
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-radius:var(--radius-xl);
  padding:28px 28px 24px;
  box-shadow:var(--shadow-xl);
  border:1px solid rgba(255,255,255,.8);
}
.fhf-title {
  font-size:1.05rem;font-weight:800;color:var(--fn);
  margin:0 0 4px;
}
.fhf-sub {
  font-size:.78rem;color:var(--gray-600);margin:0 0 18px;
}

/* ── SUCCESS STATE ────────────────────────────────────── */
.fssai-success {
  display:none;
  text-align:center;
  padding:36px 24px;
}
.fssai-success.visible { display:block; }
.fssai-success-icon {
  width:64px;height:64px;
  background:var(--fg-light);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:2rem;
  margin:0 auto 16px;
}
.fssai-success h3 {
  font-size:1.3rem;font-weight:800;color:var(--fn);margin:0 0 8px;
}
.fssai-success p {
  font-size:.9rem;color:var(--gray-600);margin:0 0 20px;line-height:1.65;
}
.fssai-redirect-bar {
  background:var(--gray-100);
  border-radius:50px;
  height:6px;
  overflow:hidden;
  max-width:260px;
  margin:0 auto;
}
.fssai-redirect-bar-fill {
  height:100%;
  background:linear-gradient(90deg,var(--fg),var(--fn));
  border-radius:50px;
  animation:fssaiProgress 2.2s ease-in forwards;
  width:0%;
}
@keyframes fssaiProgress { to { width:100%; } }

/* ── LOADING OVERLAY ──────────────────────────────────── */
.fssai-overlay {
  position:fixed;inset:0;
  background:rgba(11,60,93,.88);
  z-index:9999;
  display:none;
  flex-direction:column;
  align-items:center;justify-content:center;
  gap:16px;
  backdrop-filter:blur(4px);
}
.fssai-overlay.active { display:flex; }
.fssai-overlay-spinner {
  width:52px;height:52px;
  border:4px solid rgba(255,255,255,.2);
  border-top-color:#fff;
  border-radius:50%;
  animation:fssaiSpin .8s linear infinite;
}
.fssai-overlay p { color:#fff;font-weight:600;font-size:1rem; }

/* ── STICKY MOBILE CTA ────────────────────────────────── */
.fssai-sticky-form-bar {
  display:none;
  position:fixed;bottom:0;left:0;right:0;
  background:var(--fn);
  padding:12px 16px;
  z-index:990;
  box-shadow:0 -4px 20px rgba(0,0,0,.25);
  align-items:center;justify-content:space-between;gap:10px;
}
@media(max-width:768px){
  .fssai-sticky-form-bar { display:flex; }
}
.fsfb-text {
  font-size:.82rem;font-weight:700;color:#fff;line-height:1.25;
}
.fsfb-text small { display:block;font-weight:400;opacity:.78;font-size:.7rem; }
.fsfb-btn {
  background:var(--fa);color:#1a1a1a;
  padding:10px 18px;border-radius:var(--radius-sm);
  font-weight:700;font-size:.82rem;
  white-space:nowrap;text-decoration:none;
  flex-shrink:0;
  transition:var(--transition);
  border:none;cursor:pointer;font-family:inherit;
}
.fsfb-btn:hover { background:var(--fa-dark);color:#fff; }

/* ── TESTIMONIALS ─────────────────────────────────────── */
.fssai-testimonials {
  padding:48px 0;
  background:var(--gray-50);
}
.fssai-testimonials h2 {
  text-align:center;font-size:1.5rem;font-weight:800;
  color:var(--fn);margin:0 0 28px;
}
.fssai-testi-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:18px;
}
.fssai-testi {
  background:var(--white);
  border-radius:var(--radius-lg);
  padding:22px 24px;
  border:1px solid var(--gray-200);
  box-shadow:var(--shadow-md);
}
.fssai-testi-stars { font-size:1rem;margin-bottom:8px; }
.fssai-testi p {
  font-size:.88rem;color:var(--gray-700);
  line-height:1.75;margin:0 0 12px;font-style:italic;
}
.fssai-testi-author {
  display:flex;align-items:center;gap:10px;
}
.fta-avatar {
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,var(--fg),var(--fn));
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:.88rem;color:#fff;flex-shrink:0;
}
.fta-name { font-size:.8rem;font-weight:700;color:var(--fn); }
.fta-biz { font-size:.72rem;color:var(--gray-600); }

/* ── TRUST BADGES SECTION ─────────────────────────────── */
.fssai-trust-section {
  padding:36px 0;
  background:var(--white);
  border-top:1px solid var(--gray-100);
  border-bottom:1px solid var(--gray-100);
}
.fssai-trust-row {
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:10px 28px;
}
.fssai-trust-badge {
  display:flex;align-items:center;gap:8px;
  font-size:.82rem;color:var(--gray-600);font-weight:500;
}
.fssai-trust-badge strong { color:var(--fn); }
.ftb-icon {
  width:34px;height:34px;border-radius:50%;
  background:var(--fg-light);
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;flex-shrink:0;
}

/* ── WHATSAPP FLOAT ──────────────────────────────────── */
.fssai-wa-float {
  position:fixed;bottom:80px;right:18px;
  z-index:980;
}
@media(min-width:769px){.fssai-wa-float{bottom:24px;}}
.fssai-wa-float a {
  display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;
  background:#25D366;border-radius:50%;
  box-shadow:0 4px 16px rgba(37,211,102,.45);
  transition:var(--transition);
  text-decoration:none;
}
.fssai-wa-float a:hover {
  transform:scale(1.08);
  box-shadow:0 8px 24px rgba(37,211,102,.55);
}
.fssai-wa-float svg { width:28px;height:28px;fill:#fff; }

/* ── ENTRY ANIMATIONS ─────────────────────────────────── */
.fls-animate {
  opacity:0;transform:translateY(24px);
  animation:flsIn .55s ease forwards;
}
.fls-animate:nth-child(1){animation-delay:.05s;}
.fls-animate:nth-child(2){animation-delay:.12s;}
.fls-animate:nth-child(3){animation-delay:.19s;}
@keyframes flsIn {
  to{opacity:1;transform:translateY(0);}
}

/* ── RESPONSIVE TWEAKS ────────────────────────────────── */
@media(max-width:480px){
  .fssai-lead-section{padding:44px 0 60px;}
  .fls-header{margin-bottom:28px;}
  .fls-header h2{font-size:1.4rem;}
  .fssai-type-grid{grid-template-columns:1fr 1fr;}
  .ftc-label{padding:12px 8px 10px;}
  .ftc-name{font-size:.7rem;}
}