/**
 * Multi-step wizard styling for the Fluent Forms "درخواست مشاوره خرید" form.
 * Colours reference the Design-System CSS variables injected on :root by
 * inc/enqueue.php, with the original request.html values as fallbacks.
 *
 * @package aghaye-motor-bargh
 */

:root {
  --amb-primary: var(--color-primary, #FFD400);
  --amb-ink:     var(--color-ink, #141414);
  --amb-cream:   var(--color-cream, #f7f5ef);
  --amb-success: var(--color-success, #39d353);
  --amb-danger:  #e23b3b;
  --amb-sand:    #e6e3d9;
}

@keyframes ambSlideStep { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
@keyframes ambShake     { 0%,100% { transform: translateX(0); } 20%,60% { transform: translateX(-6px); } 40%,80% { transform: translateX(6px); } }
@keyframes ambPopIn     { 0% { transform: scale(0) rotate(-12deg); } 60% { transform: scale(1.12) rotate(2deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes ambConfetti  { to { transform: translateY(110vh) rotate(var(--r, 360deg)); opacity: 0; } }

/* ── Stepper bar ─────────────────────────────────────────────── */
.amb-stepper {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--amb-sand);
  border-radius: 18px;
  padding: 20px 24px;
  margin-bottom: 22px;
  transition: opacity .3s;
}
.amb-stepper-item { display: flex; align-items: center; gap: 10px; flex: 1; }
.amb-stepper-labels { display: flex; flex-direction: column; gap: 3px; }
.amb-stepper-sub { font-size: 11px; color: #a8a499; font-weight: 700; }
.amb-stepper-title { font-size: 13px; font-weight: 800; color: var(--amb-ink); }
.amb-dot {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 14px; flex: none; transition: all .3s;
  background: var(--amb-sand); color: #a8a499;
}
.amb-dot.active  { background: var(--amb-primary); color: var(--amb-ink); box-shadow: 0 0 0 6px rgba(255,212,0,.22); }
.amb-dot.done    { background: var(--amb-success); color: #fff; }
.amb-line { flex: 1; height: 3px; border-radius: 2px; background: var(--amb-sand); transition: background .4s; max-width: 60px; }
.amb-line.done { background: var(--amb-success); }

@media (max-width: 560px) {
  .amb-stepper-labels { display: none; }
  .amb-stepper { padding: 16px; gap: 6px; }
}

/* ── Steps ───────────────────────────────────────────────────── */
.amb-step { animation: ambSlideStep .35s; }
.amb-step[hidden] { display: none; }

/* ── Fluent Forms field polish (scoped to our form) ──────────── */
.amb-fluent-form .frm-fluent-form .ff-el-input--label label,
.amb-fluent-form .frm-fluent-form .ff-el-group > label {
  font-size: 13px; font-weight: 800; color: var(--amb-ink); margin-bottom: 7px;
}
.amb-fluent-form .frm-fluent-form input[type=text],
.amb-fluent-form .frm-fluent-form input[type=email],
.amb-fluent-form .frm-fluent-form input[type=tel],
.amb-fluent-form .frm-fluent-form select,
.amb-fluent-form .frm-fluent-form textarea {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  padding: 13px 14px;
  border-radius: 11px;
  border: 2px solid var(--amb-sand);
  background: #faf9f5;
  color: var(--amb-ink);
  outline: none;
  transition: border-color .15s, background .15s;
  box-sizing: border-box;
}
.amb-fluent-form .frm-fluent-form input:focus,
.amb-fluent-form .frm-fluent-form select:focus,
.amb-fluent-form .frm-fluent-form textarea:focus {
  border-color: var(--amb-ink); background: #fff;
}
.amb-fluent-form .frm-fluent-form .ff-el-is-error input,
.amb-fluent-form .frm-fluent-form .ff-el-is-error select,
.amb-fluent-form .frm-fluent-form .ff-el-is-error textarea {
  border-color: var(--amb-danger); background: #fdf2f2;
}
.amb-fluent-form .frm-fluent-form .error.text-danger,
.amb-fluent-form .frm-fluent-form .ff-el-is-error .text-danger {
  color: var(--amb-danger); font-size: 12px; font-weight: 700; margin-top: 6px;
}

/* Radio options rendered as cards. */
.amb-fluent-form .frm-fluent-form .ff-el-form-check {
  display: block;
  margin: 0 0 9px;
}
.amb-fluent-form .frm-fluent-form .ff-el-form-check .ff-el-form-check-label {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 15px;
  border: 2px solid var(--amb-sand);
  border-radius: 12px;
  cursor: pointer;
  font-size: 14px; font-weight: 600;
  background: #faf9f5;
  transition: border-color .15s, background .15s;
}
.amb-fluent-form .frm-fluent-form .ff-el-form-check .ff-el-form-check-label:hover { border-color: #a8a499; }
.amb-fluent-form .frm-fluent-form .ff-el-form-check input:checked ~ .ff-el-form-check-label,
.amb-fluent-form .frm-fluent-form .ff-el-form-check.ff_item_selected .ff-el-form-check-label {
  border-color: var(--amb-primary); background: #fffce5;
}

/* Terms checkbox row. */
.amb-fluent-form .frm-fluent-form .ff-el-tc { font-size: 13px; color: #5a564e; }
.amb-fluent-form .frm-fluent-form .ff-el-tc a { color: var(--amb-ink); font-weight: 700; text-decoration: underline; }

/* Submit / nav buttons. */
.amb-fluent-form .frm-fluent-form .ff-btn-submit,
.amb-nav-next {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--amb-primary) !important;
  color: var(--amb-ink) !important;
  font-family: inherit; font-weight: 900; font-size: 16px;
  padding: 15px 24px; border-radius: 13px; border: none; cursor: pointer;
  box-shadow: 0 7px 0 #c8a800;
  transition: transform .15s;
}
.amb-fluent-form .frm-fluent-form .ff-btn-submit:hover,
.amb-nav-next:hover { transform: translateY(-2px); }
.amb-fluent-form .frm-fluent-form .ff-el-group.amb-submit { text-align: center; }
.amb-fluent-form .frm-fluent-form .ff-el-group.amb-submit .ff-btn-submit { width: 100%; }
/* Request-form submit is the green "confirm & send" action. */
.amb-request-form .frm-fluent-form .ff-el-group.amb-submit .ff-btn-submit {
  background: var(--amb-success) !important; color: #fff !important;
  box-shadow: 0 7px 0 #1f8a4d;
}

.amb-nav-row { display: flex; gap: 10px; margin-top: 24px; }
.amb-nav-next { flex: 1; width: 100%; }
.amb-nav-back {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: #f1efe8; color: var(--amb-ink);
  font-family: inherit; font-weight: 800; font-size: 14px;
  padding: 13px 20px; border-radius: 13px; border: 1px solid var(--amb-sand); cursor: pointer;
  transition: background .15s;
}
.amb-nav-back:hover { background: var(--amb-sand); }
.amb-shake { animation: ambShake .4s; }

/* ── Confirm-step summary ────────────────────────────────────── */
.amb-summary-box {
  background: var(--amb-cream);
  border: 1px solid var(--amb-sand);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 8px;
  display: flex; flex-direction: column; gap: 12px;
}
.amb-summary-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.amb-summary-row .k { color: #8a8578; font-weight: 700; }
.amb-summary-row .v { font-weight: 800; text-align: left; color: var(--amb-ink); }
.amb-summary-title { font-size: 19px; font-weight: 900; margin: 0 0 6px; }
.amb-summary-sub { font-size: 13px; color: #8a8578; margin: 0 0 16px; }

/* ── Success message + confetti ──────────────────────────────── */
.amb-fluent-form .frm-fluent-form .ff-message-success {
  text-align: center; padding: 30px 16px; border: none; background: transparent;
}
.amb-success-badge {
  width: 96px; height: 96px; margin: 0 auto 18px;
  background: linear-gradient(135deg, var(--amb-primary), var(--color-orange, #FF7A1A));
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  animation: ambPopIn .5s both; color: var(--amb-ink); font-size: 46px; font-weight: 900;
}
.amb-confetti-piece {
  position: fixed; width: 10px; height: 10px; top: -10px; border-radius: 2px;
  pointer-events: none; z-index: 9999; animation: ambConfetti var(--dur, 2.5s) var(--delay, 0s) ease-in forwards;
}