/* ======================================================
   Premium Enquiry Popup — Bhanoba Traders
   Uses the same design tokens as css/style.css
   ====================================================== */

.eq-overlay{
  position:fixed; inset:0; z-index:9999;
  background:rgba(10,20,18,0.55);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  opacity:0; visibility:hidden;
  transition:opacity .45s var(--ease), visibility .45s var(--ease);
}
.eq-overlay.is-open{ opacity:1; visibility:visible; }

.eq-modal{
  position:relative;
  width:100%; max-width:460px;
  max-height:92vh; overflow-y:auto;
  background:rgba(255,255,255,0.86);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid var(--glass-border);
  border-radius:24px;
  box-shadow:var(--shadow-lg), 0 0 0 1px rgba(255,255,255,0.4) inset;
  padding:40px 36px 36px;
  transform:translateY(28px) scale(.96);
  opacity:0;
  transition:transform .5s var(--ease), opacity .5s var(--ease);
}
.eq-overlay.is-open .eq-modal{ transform:translateY(0) scale(1); opacity:1; }

.eq-close{
  position:absolute; top:18px; right:18px;
  width:38px; height:38px; border-radius:50%;
  background:rgba(18,33,31,0.06); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .3s var(--ease);
  color:var(--ink-soft);
}
.eq-close:hover{ background:var(--ink); color:#fff; transform:rotate(90deg); }
.eq-close svg{ width:16px; height:16px; }

.eq-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-body); font-weight:600; font-size:11.5px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--secondary-dark);
  margin-bottom:14px;
}
.eq-eyebrow::before{
  content:''; width:20px; height:2px; background:var(--secondary); display:inline-block;
}

.eq-title{
  font-family:var(--font-display); font-weight:700; font-size:26px;
  color:var(--ink); letter-spacing:-0.01em; margin-bottom:8px; line-height:1.2;
}
.eq-sub{
  font-family:var(--font-body); font-size:14px; color:var(--ink-soft);
  margin-bottom:26px; line-height:1.55;
}

.eq-field{ margin-bottom:16px; }
.eq-field label{
  display:block; font-size:12.5px; font-weight:600; margin-bottom:7px;
  color:var(--ink); letter-spacing:.01em;
}
.eq-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }

.eq-field input,
.eq-field select,
.eq-field textarea{
  width:100%; padding:13.5px 16px; border-radius:14px;
  border:1.5px solid var(--border); background:rgba(255,255,255,0.7);
  font-family:var(--font-body); font-size:14px; color:var(--ink);
  transition:all .3s var(--ease);
}
.eq-field input::placeholder,
.eq-field textarea::placeholder{ color:var(--ink-faint); }
.eq-field input:focus,
.eq-field select:focus,
.eq-field textarea:focus{
  outline:none; border-color:var(--primary); background:#fff;
  box-shadow:0 0 0 4px var(--primary-tint);
}
.eq-field select{ appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%234B5D5A' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; padding-right:38px;
}
.eq-field textarea{ resize:vertical; min-height:78px; }

.eq-field.error input, .eq-field.error select, .eq-field.error textarea{
  border-color:#DC2626; background:#FEF2F2;
}
.eq-err{ display:none; color:#DC2626; font-size:12px; margin-top:6px; font-weight:500; }
.eq-field.error .eq-err{ display:block; }

.eq-submit{
  width:100%; margin-top:10px; padding:16px 20px; border:none; border-radius:999px;
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  color:#fff; font-family:var(--font-body); font-weight:700; font-size:15px;
  letter-spacing:.02em; cursor:pointer; box-shadow:var(--shadow-md);
  display:flex; align-items:center; justify-content:center; gap:10px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
}
.eq-submit:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); background:linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%); }
.eq-submit:active{ transform:translateY(-1px); }
.eq-submit svg{ width:17px; height:17px; transition:transform .3s var(--ease); }
.eq-submit:hover svg{ transform:translateX(3px); }

.eq-note{
  text-align:center; font-size:11.5px; color:var(--ink-faint); margin-top:14px;
}

/* Success state */
.eq-success{
  display:none; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:26px 6px 10px;
}
.eq-success.is-active{ display:flex; }
.eq-success.is-active ~ .eq-form{ display:none; }

.eq-check{ width:78px; height:78px; margin-bottom:22px; }
.eq-check circle{
  fill:none; stroke:var(--primary); stroke-width:3;
  stroke-dasharray:220; stroke-dashoffset:220;
  animation:eqCircle .6s var(--ease) forwards;
}
.eq-check path{
  fill:none; stroke:var(--primary); stroke-width:4; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:40; stroke-dashoffset:40;
  animation:eqCheck .4s var(--ease) .5s forwards;
}
@keyframes eqCircle{ to{ stroke-dashoffset:0; } }
@keyframes eqCheck{ to{ stroke-dashoffset:0; } }

.eq-success h3{
  font-family:var(--font-display); font-weight:700; font-size:24px; color:var(--ink); margin-bottom:8px;
}
.eq-success p{ font-size:14.5px; color:var(--ink-soft); max-width:280px; }

.eq-progress{
  position:absolute; left:0; bottom:0; height:3px; width:100%;
  background:var(--primary-tint); border-radius:0 0 24px 24px; overflow:hidden;
}
.eq-progress span{
  display:block; height:100%; width:100%; background:var(--primary);
  transform-origin:left; transform:scaleX(0);
}
.eq-progress.run span{ animation:eqProgress 2s linear forwards; }
@keyframes eqProgress{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

/* Mobile */
@media (max-width:560px){
  .eq-modal{ padding:32px 22px 28px; border-radius:22px; max-height:94vh; }
  .eq-row{ grid-template-columns:1fr; gap:0; }
  .eq-title{ font-size:22px; }
}
@media (prefers-reduced-motion: reduce){
  .eq-overlay, .eq-modal, .eq-close, .eq-submit, .eq-submit svg{ transition:none !important; animation:none !important; }
}