/* ==========================================================================
   HAWEGO FRANCHISE — Premium Multi-Step Form
   Add via: WP Admin → Appearance → Customize → Additional CSS
   OR Elementor → Custom Code → Head/Footer
   ========================================================================== */

:root {
  /* Hawego website brand colors */
  --hf-brand: #dd3333;
  --hf-brand-dark: #b52525;
  --hf-brand-light: #fff5f5;
  --hf-brand-mid: #c62828;
  --hf-green: #dd3333;
  --hf-green-dark: #b52525;
  --hf-green-light: #fff5f5;
  --hf-green-mid: #c62828;
  --hf-accent: #dd3333;
  --hf-gold: #fcb900;
  --hf-gold-soft: #fff8e6;
  --hf-red: #cf2e2e;
  --hf-text: #1d2128;
  --hf-text-muted: #7c818b;
  --hf-border: #ecf0f4;
  --hf-border-focus: #dd3333;
  --hf-bg: #ffffff;
  --hf-bg-soft: #fafafa;
  --hf-bg-input: #ffffff;
  --hf-radius: 12px;
  --hf-radius-lg: 20px;
  --hf-radius-xl: 24px;
  --hf-shadow: 0 4px 24px rgba(221, 51, 51, 0.08);
  --hf-shadow-lg: 0 20px 60px rgba(29, 33, 40, 0.1);
  --hf-shadow-input: 0 1px 2px rgba(16, 24, 40, 0.04);
  --hf-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  /* Match About Us (/about-us-new/) typography */
  --hf-font: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --hf-fs-base: 17px;
  --hf-fs-input: 17px;
  --hf-fs-label: 17px;
  --hf-fs-body: 17px;
  --hf-fs-sm: 16px;
  --hf-fs-btn: 16px;
  --hf-fs-h3: 22px;
  --hf-lh-body: 1.41;
}

/* ── Franchise page form area (match section bg, no side white) ── */
body.hawego-franchise-page .wpcf7 {
  margin: 0 auto;
  max-width: 920px;
}

body.hawego-franchise-page #hawego-franchise-form .elementor-widget-wrap {
  padding-top: 0;
  padding-bottom: 0;
}

/* ── Wrapper ── */
.hawego-franchise-wizard {
  font-family: var(--hf-font);
  font-size: var(--hf-fs-base);
  line-height: var(--hf-lh-body);
  max-width: 920px;
  margin: 0 auto;
  padding: 48px 40px 52px;
  background: linear-gradient(180deg, #ffffff 0%, #fcfefd 100%);
  border-radius: var(--hf-radius-xl);
  box-shadow: var(--hf-shadow-lg);
  color: var(--hf-text);
  position: relative;
  border: 1px solid rgba(221, 51, 51, 0.1);
  overflow: hidden;
}

.hawego-franchise-wizard::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--hf-brand-dark), var(--hf-brand), var(--hf-gold));
}

.hawego-franchise-wizard::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 100% 0%, rgba(221, 51, 51, 0.05) 0%, transparent 42%),
    radial-gradient(circle at 0% 100%, rgba(252, 185, 0, 0.04) 0%, transparent 38%);
  pointer-events: none;
  z-index: 0;
}

.hawego-franchise-wizard > * {
  position: relative;
  z-index: 1;
}

.hawego-franchise-wizard *,
.hawego-franchise-wizard *::before,
.hawego-franchise-wizard *::after {
  box-sizing: border-box;
}

/* ── Progress Bar ── */
.hf-progress {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-bottom: 44px;
  padding: 20px 16px;
  gap: 0;
  background: linear-gradient(135deg, rgba(232, 245, 236, 0.65), rgba(255, 255, 255, 0.95));
  border: 1px solid rgba(26, 77, 46, 0.08);
  border-radius: var(--hf-radius-lg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.hf-progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-width: 72px;
  cursor: default;
  transition: var(--hf-transition);
}

.hf-progress-dot {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  background: #fff;
  color: var(--hf-text-muted);
  border: 2px solid var(--hf-border);
  transition: var(--hf-transition);
  position: relative;
  z-index: 1;
  box-shadow: var(--hf-shadow-input);
}

.hf-progress-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--hf-text-muted);
  text-align: center;
  line-height: 1.3;
  max-width: 80px;
  transition: var(--hf-transition);
  letter-spacing: 0.02em;
}

.hf-progress-line {
  flex: 1;
  height: 3px;
  background: var(--hf-border);
  margin-top: 20px;
  min-width: 16px;
  max-width: 48px;
  transition: var(--hf-transition);
  border-radius: 999px;
}

.hf-progress-step.is-active .hf-progress-dot {
  background: linear-gradient(145deg, var(--hf-green), var(--hf-green-mid));
  border-color: var(--hf-green);
  color: #fff;
  box-shadow: 0 6px 20px rgba(26, 77, 46, 0.28);
  transform: scale(1.06);
}

.hf-progress-step.is-done .hf-progress-dot {
  background: var(--hf-green);
  border-color: var(--hf-green);
  color: #fff;
}

.hf-progress-step.is-active .hf-progress-label {
  color: var(--hf-green);
  font-weight: 600;
}

.hf-progress-step.is-done .hf-progress-label {
  color: var(--hf-green-mid);
}

.hf-progress-step.is-done + .hf-progress-line {
  background: var(--hf-green);
}

/* ── Steps ── */
.hawego-step {
  display: none;
  animation: hfFadeIn 0.35s ease;
}

.hawego-step.is-active {
  display: block;
  padding: 8px 4px 4px;
}

@keyframes hfFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Section Headers ── */
.hf-section-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 32px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(26, 77, 46, 0.08);
}

.hf-section-header--sub {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--hf-border);
}

.hf-section-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(145deg, var(--hf-green-light), #fff);
  color: var(--hf-green);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(26, 77, 46, 0.1);
  box-shadow: 0 4px 14px rgba(26, 77, 46, 0.08);
}

.hf-section-icon svg {
  width: 20px;
  height: 20px;
}

.hf-section-title {
  font-size: var(--hf-fs-h3);
  font-weight: 700;
  color: var(--hf-green-dark);
  margin: 0;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.hf-subtitle {
  font-size: var(--hf-fs-sm);
  font-weight: 400;
  color: var(--hf-text-muted);
}

.hf-upload-note {
  width: 100%;
  margin: 4px 0 0 52px;
  font-size: var(--hf-fs-sm);
  color: var(--hf-text-muted);
}

/* ── Grid Layout ── */
.hf-grid {
  display: grid;
  gap: 20px;
}

.hf-grid-2 {
  grid-template-columns: 1fr 1fr;
}

.hf-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* CF7 autop inserts <p> and <br> — keep grid/OTP/phone layout intact */
.hf-field > p,
.hf-mobile-row > p,
.hf-otp-row > p {
  margin: 0 !important;
  width: 100%;
}

.hf-field > p {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hf-mobile-row > p {
  display: contents;
}

.hf-otp-row > p {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch;
  gap: 8px;
}

.hf-field > p > br,
.hf-mobile-row br,
.hf-otp-row br,
.hf-phone-wrap br {
  display: none !important;
}

.hf-field-full {
  grid-column: 1 / -1;
}

.hf-field-narrow {
  max-width: 420px;
}

/* ── Labels ── */
.hf-field > label,
.hf-field > .wpcf7-form-control-wrap + label,
.hawego-step label:first-child {
  font-size: var(--hf-fs-label);
  font-weight: 600;
  color: var(--hf-text);
  letter-spacing: 0.01em;
}

.hf-req {
  color: var(--hf-red);
  font-weight: 700;
}

.hf-hint {
  font-weight: 400;
  color: var(--hf-text-muted);
  font-size: var(--hf-fs-sm);
}

.hf-optional {
  font-weight: 400;
  color: var(--hf-text-muted);
  font-size: 14px;
}

/* ── Text Inputs, Select, Textarea ── */
.hawego-franchise-wizard .hf-input,
.hawego-franchise-wizard .hf-select,
.hawego-franchise-wizard .hf-textarea,
.hawego-franchise-wizard input[type="text"],
.hawego-franchise-wizard input[type="email"],
.hawego-franchise-wizard input[type="tel"],
.hawego-franchise-wizard input[type="number"],
.hawego-franchise-wizard input[type="date"],
.hawego-franchise-wizard select,
.hawego-franchise-wizard textarea {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--hf-font);
  font-size: var(--hf-fs-input);
  color: var(--hf-text);
  background: var(--hf-bg-input);
  border: 1.5px solid var(--hf-border);
  border-radius: var(--hf-radius);
  outline: none;
  transition: border-color var(--hf-transition), box-shadow var(--hf-transition), background var(--hf-transition);
  appearance: none;
  -webkit-appearance: none;
  box-shadow: var(--hf-shadow-input);
}

.hawego-franchise-wizard .hf-input:hover,
.hawego-franchise-wizard .hf-select:hover,
.hawego-franchise-wizard .hf-textarea:hover,
.hawego-franchise-wizard input:hover,
.hawego-franchise-wizard select:hover,
.hawego-franchise-wizard textarea:hover {
  border-color: #cbd5e1;
  background: #fff;
}

.hawego-franchise-wizard .hf-textarea,
.hawego-franchise-wizard textarea {
  min-height: 110px;
  resize: vertical;
  line-height: 1.5;
}

.hawego-franchise-wizard .hf-input:focus,
.hawego-franchise-wizard .hf-select:focus,
.hawego-franchise-wizard .hf-textarea:focus,
.hawego-franchise-wizard input:focus,
.hawego-franchise-wizard select:focus,
.hawego-franchise-wizard textarea:focus {
  border-color: var(--hf-border-focus);
  box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.12);
}

.hawego-franchise-wizard .hf-input::placeholder,
.hawego-franchise-wizard textarea::placeholder {
  color: #adb5bd;
}

/* Select arrow */
.hf-field:has(select) {
  position: relative;
}

.hf-field:has(select)::after {
  content: '';
  position: absolute;
  right: 16px;
  bottom: 18px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--hf-text-muted);
  pointer-events: none;
}

/* ── Phone Input ── */
.hf-phone-wrap {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch;
  border: 1.5px solid var(--hf-border);
  border-radius: var(--hf-radius);
  overflow: hidden;
  transition: border-color var(--hf-transition), box-shadow var(--hf-transition);
  height: 48px;
  min-height: 48px;
  max-height: 48px;
  background: var(--hf-bg-input);
  box-shadow: var(--hf-shadow-input);
}

.hf-phone-wrap br,
.hf-mobile-row br,
#hf-otp-block br {
  display: none !important;
}

.hf-phone-wrap p,
.hf-mobile-row p {
  display: contents;
  margin: 0;
}

.hf-phone-wrap:focus-within {
  border-color: var(--hf-border-focus);
  box-shadow: 0 0 0 3px rgba(221, 51, 51, 0.12);
}

.hf-phone-wrap .wpcf7-form-control-wrap {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  display: flex !important;
  align-items: center;
  margin: 0 !important;
  height: 100%;
}

.hf-phone-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  padding: 0 10px 0 12px;
  background: var(--hf-bg-soft);
  font-size: 14px;
  font-weight: 600;
  color: var(--hf-text-muted);
  border-right: 1.5px solid var(--hf-border);
  white-space: nowrap;
  user-select: none;
  flex: 0 0 auto;
  line-height: 1;
  letter-spacing: 0.02em;
}

.hawego-franchise-wizard .hf-phone-wrap input[type="tel"],
.hawego-franchise-wizard .hf-phone-wrap .hf-phone-input {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 12px !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: 15px !important;
  line-height: normal !important;
  flex: 1 1 auto;
  min-width: 0;
}

/* ── Radio Buttons ── */
.hf-radio-group .wpcf7-form-control-wrap,
.hf-investment-cards .wpcf7-form-control-wrap {
  display: block;
}

.hf-radio-group .wpcf7-radio,
.hf-radio-group .wpcf7-checkbox {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hf-radio-group--inline .wpcf7-radio {
  gap: 24px;
}

.hf-radio-group .wpcf7-list-item,
.hf-investment-cards .wpcf7-list-item {
  margin: 0 !important;
  display: inline-flex;
}

.hf-radio-group .wpcf7-list-item label,
.hf-radio-group .wpcf7-list-item-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1.5px solid var(--hf-border);
  border-radius: var(--hf-radius);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--hf-transition);
  background: var(--hf-bg);
  user-select: none;
}

.hf-radio-group--inline .wpcf7-list-item label {
  border: none;
  padding: 8px 0;
  background: transparent;
  font-size: 16px;
}

.hf-radio-group .wpcf7-list-item input[type="radio"] {
  accent-color: var(--hf-green);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.hf-radio-group .wpcf7-list-item:has(input:checked) label,
.hf-radio-group .wpcf7-list-item.is-checked label {
  border-color: var(--hf-green);
  background: var(--hf-green-light);
  color: var(--hf-green);
}

/* ── Investment Cards ── */
.hf-investment-cards .wpcf7-radio {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.hf-investment-cards .wpcf7-list-item label {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px 12px;
  border: 2px solid var(--hf-border);
  border-radius: var(--hf-radius);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--hf-transition);
  background: var(--hf-bg);
  min-height: 64px;
  line-height: 1.3;
}

.hf-investment-cards .wpcf7-list-item input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.hf-investment-cards .wpcf7-list-item:has(input:checked) label,
.hf-investment-cards .wpcf7-list-item.is-checked label {
  border-color: var(--hf-green);
  background: linear-gradient(145deg, var(--hf-green), var(--hf-green-mid));
  color: #fff;
  box-shadow: 0 8px 24px rgba(26, 77, 46, 0.28);
  transform: translateY(-2px);
}

/* ── Checkbox Grid ── */
.hf-checkbox-grid .wpcf7-checkbox {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.hf-checkbox-grid--compact .wpcf7-checkbox {
  grid-template-columns: repeat(5, 1fr);
}

.hf-checkbox-grid .wpcf7-list-item {
  margin: 0 !important;
}

.hf-checkbox-grid .wpcf7-list-item label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1.5px solid var(--hf-border);
  border-radius: var(--hf-radius);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--hf-transition);
  background: var(--hf-bg);
}

.hf-checkbox-grid .wpcf7-list-item input[type="checkbox"] {
  accent-color: var(--hf-green);
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.hf-checkbox-grid .wpcf7-list-item:has(input:checked) label,
.hf-checkbox-grid .wpcf7-list-item.is-checked label {
  border-color: var(--hf-green);
  background: var(--hf-green-light);
  color: var(--hf-green);
}

.hf-checkbox-grid.hf-error {
  outline: 2px solid var(--hf-red);
  outline-offset: 4px;
  border-radius: var(--hf-radius);
  padding: 4px;
}

/* ── Conditional Fields ── */
.hf-conditional {
  transition: var(--hf-transition);
}

.hf-conditional.is-hidden {
  display: none !important;
}

/* ── File Upload Boxes ── */
.hf-upload-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}

.hf-upload-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px 16px;
  border: 2px dashed rgba(26, 77, 46, 0.18);
  border-radius: var(--hf-radius-lg);
  background: linear-gradient(180deg, #fff 0%, var(--hf-bg-soft) 100%);
  text-align: center;
  transition: var(--hf-transition);
  min-height: 152px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.hf-upload-box:hover,
.hf-upload-box.is-dragover {
  border-color: var(--hf-accent);
  background: var(--hf-green-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(26, 77, 46, 0.1);
}

.hf-upload-box.has-file {
  border-color: var(--hf-green);
  border-style: solid;
  background: linear-gradient(180deg, var(--hf-green-light) 0%, #fff 100%);
}

.hf-upload-icon {
  font-size: 28px;
  line-height: 1;
}

.hf-upload-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--hf-text);
}

.hf-upload-btn-label {
  font-size: 13px;
  color: var(--hf-green);
  font-weight: 500;
}

.hf-upload-box .wpcf7-form-control-wrap {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.hf-upload-box input[type="file"] {
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.hf-upload-filename {
  font-size: 13px;
  color: var(--hf-green-mid);
  font-weight: 500;
  word-break: break-all;
  max-width: 100%;
  padding: 0 8px;
}

.hf-upload-box--optional {
  opacity: 0.85;
}

/* ── Review Summary ── */
.hf-review {
  background: linear-gradient(180deg, #fff 0%, var(--hf-bg-soft) 100%);
  border: 1px solid rgba(26, 77, 46, 0.1);
  border-radius: var(--hf-radius-lg);
  padding: 24px 28px;
  margin-bottom: 24px;
  box-shadow: var(--hf-shadow);
}

.hf-review-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--hf-green);
  margin: 0 0 16px;
}

.hf-review-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
}

.hf-review-item {
  font-size: 13px;
  line-height: 1.4;
}

.hf-review-item strong {
  color: var(--hf-text-muted);
  font-weight: 500;
  display: block;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}

.hf-review-item span {
  color: var(--hf-text);
  font-weight: 500;
}

/* ── Consent ── */
.hf-consent {
  margin-bottom: 8px;
}

.hf-consent .wpcf7-acceptance {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.hf-consent .wpcf7-list-item {
  margin: 0 !important;
}

.hf-consent .wpcf7-list-item label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--hf-text-muted);
  cursor: pointer;
  line-height: 1.5;
}

.hf-consent input[type="checkbox"] {
  accent-color: var(--hf-green);
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex-shrink: 0;
}

.hf-consent a {
  color: var(--hf-green);
  text-decoration: underline;
}

/* ── Navigation Buttons ── */
.hf-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--hf-border);
}

.hf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 28px;
  font-family: var(--hf-font);
  font-size: var(--hf-fs-btn);
  font-weight: 600;
  border-radius: var(--hf-radius);
  border: none;
  cursor: pointer;
  transition: var(--hf-transition);
  letter-spacing: 0.02em;
  line-height: 1;
}

.hf-btn-prev {
  background: transparent;
  color: var(--hf-text-muted);
  border: 1.5px solid var(--hf-border);
}

.hf-btn-prev:hover {
  border-color: var(--hf-green);
  color: var(--hf-green);
  background: var(--hf-green-light);
}

.hf-btn-next {
  background: linear-gradient(145deg, var(--hf-green), var(--hf-green-mid));
  color: #fff;
  margin-left: auto;
  box-shadow: 0 6px 20px rgba(26, 77, 46, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.hf-btn-next:hover {
  background: linear-gradient(145deg, var(--hf-green-dark), var(--hf-green));
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(26, 77, 46, 0.32);
}

.hf-submit-wrap {
  display: none;
  flex: 1;
}

.hf-submit-wrap.is-visible {
  display: block;
}

.hf-btn-submit,
.hawego-franchise-wizard input[type="submit"].hf-btn-submit {
  width: 100%;
  background: linear-gradient(145deg, var(--hf-green), var(--hf-green-mid)) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 18px 32px !important;
  border: none !important;
  border-radius: var(--hf-radius-lg) !important;
  cursor: pointer !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  box-shadow: 0 8px 28px rgba(26, 77, 46, 0.32) !important;
  transition: var(--hf-transition) !important;
  font-family: var(--hf-font) !important;
}

.hf-btn-submit:hover,
.hawego-franchise-wizard input[type="submit"].hf-btn-submit:hover {
  background: linear-gradient(145deg, var(--hf-green-dark), var(--hf-green)) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(26, 77, 46, 0.36) !important;
}

.hf-btn-submit::before {
  content: '✈ ';
}

/* Hide prev on step 1, hide next on step 5 */
.hawego-franchise-wizard[data-step="1"] .hf-btn-prev {
  visibility: hidden;
  pointer-events: none;
}

/* ── Trust Badge ── */
.hf-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
  font-size: 13px;
  color: var(--hf-text-muted);
}

.hf-trust svg {
  color: var(--hf-green);
  flex-shrink: 0;
}

/* ── CF7 Overrides ── */
.hawego-franchise-wizard .wpcf7-form-control-wrap {
  display: block;
}

.hawego-franchise-wizard p {
  margin: 0;
}

.hawego-franchise-wizard .wpcf7-not-valid-tip {
  font-size: 13px;
  color: var(--hf-red);
  margin-top: 4px;
}

.hawego-franchise-wizard .wpcf7-response-output {
  margin: 24px 0 0 !important;
  padding: 14px 18px !important;
  border-radius: var(--hf-radius) !important;
  font-size: 14px !important;
  border: none !important;
}

.hawego-franchise-wizard form.sent .wpcf7-response-output {
  background: var(--hf-green-light) !important;
  color: var(--hf-green) !important;
}

.hawego-franchise-wizard form.invalid .wpcf7-response-output,
.hawego-franchise-wizard form.failed .wpcf7-response-output {
  background: #fef2f2 !important;
  color: var(--hf-red) !important;
}

.hawego-franchise-wizard .hf-field.hf-error .hf-input,
.hawego-franchise-wizard .hf-field.hf-error input,
.hawego-franchise-wizard .hf-field.hf-error select,
.hawego-franchise-wizard .hf-field.hf-error textarea,
.hawego-franchise-wizard .hf-field.hf-error .hf-phone-wrap {
  border-color: var(--hf-red) !important;
}

.hawego-franchise-wizard .hf-field .hf-error-msg {
  font-size: 13px;
  color: var(--hf-red);
  margin-top: 2px;
}

.hawego-franchise-wizard .wpcf7-spinner {
  margin-left: 12px;
}

/* ── Loading overlay ── */
.hawego-franchise-wizard.is-submitting {
  pointer-events: none;
  opacity: 0.7;
}

/* ── Success state ── */
.hawego-franchise-wizard.is-success .hf-progress,
.hawego-franchise-wizard.is-success .hawego-step,
.hawego-franchise-wizard.is-success .hf-nav,
.hawego-franchise-wizard.is-success .hf-trust {
  display: none;
}

.hf-success-message {
  display: none;
  text-align: center;
  padding: 48px 24px;
}

.hawego-franchise-wizard.is-success .hf-success-message {
  display: block;
}

.hf-success-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--hf-green-light), #fff);
  color: var(--hf-green);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  font-size: 40px;
  border: 2px solid rgba(26, 77, 46, 0.12);
  box-shadow: 0 12px 32px rgba(26, 77, 46, 0.12);
}

.hf-success-message h3 {
  font-size: 24px;
  color: var(--hf-green);
  margin: 0 0 12px;
}

.hf-success-message p {
  color: var(--hf-text-muted);
  font-size: 15px;
  line-height: 1.6;
  max-width: 420px;
  margin: 0 auto;
}

/* ── Mobile OTP Verification ── */
#hf-otp-block {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

#hf-otp-block.is-verified .hf-phone-wrap {
  border-color: var(--hf-brand);
  box-shadow: 0 0 0 3px rgba(221, 51, 51, 0.1);
}

.hf-field-whatsapp .hf-mobile-row {
  display: grid;
  grid-template-columns: 1fr minmax(96px, auto);
  gap: 8px;
  align-items: center;
}

.hf-mobile-row {
  display: grid;
  grid-template-columns: 1fr minmax(118px, auto);
  gap: 10px;
  align-items: center;
}

.hf-phone-wrap--grow {
  min-width: 0;
  width: 100%;
}

.hf-btn-otp-send {
  flex-shrink: 0;
  height: 48px;
  min-height: 48px;
  max-height: 48px;
  padding: 0 14px !important;
  background: var(--hf-brand) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--hf-radius) !important;
  font-family: var(--hf-font) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--hf-transition);
  box-shadow: 0 2px 10px rgba(221, 51, 51, 0.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hf-btn-otp-send:hover:not(:disabled) {
  background: var(--hf-brand-dark) !important;
}

.hf-btn-otp-send:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.hf-btn-otp-send.is-verified {
  background: var(--hf-brand-mid) !important;
  cursor: default;
}

.hf-otp-panel {
  margin-top: 10px;
  padding-top: 0;
  border-top: none;
}

.hf-otp-panel[hidden] {
  display: none !important;
}

.hf-otp-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 8px;
  width: 100%;
}

.hf-otp-row br {
  display: none !important;
}

.hf-otp-input {
  flex: 1 1 auto;
  min-width: 0;
  width: auto !important;
  max-width: none !important;
  min-height: 48px !important;
  height: 48px !important;
  letter-spacing: 0.28em;
  font-size: 17px !important;
  font-weight: 600 !important;
  text-align: center;
  padding: 0 10px !important;
}

.hf-btn-otp-verify,
.hf-btn-otp-resend {
  flex: 0 0 auto;
  height: 48px;
  min-height: 48px;
  max-height: 48px;
  padding: 0 14px !important;
  font-family: var(--hf-font) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--hf-transition);
  border-radius: var(--hf-radius) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hf-btn-otp-verify {
  background: var(--hf-brand-mid) !important;
  color: #fff !important;
  border: none !important;
}

.hf-btn-otp-verify:hover:not(:disabled) {
  background: var(--hf-brand-dark) !important;
}

.hf-btn-otp-verify:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.hf-btn-otp-resend {
  background: #fff !important;
  color: var(--hf-brand) !important;
  border: 1.5px solid rgba(221, 51, 51, 0.35) !important;
}

.hf-btn-otp-resend:not(:disabled):hover {
  background: var(--hf-brand-light) !important;
  border-color: var(--hf-brand) !important;
}

.hf-btn-otp-resend:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  color: var(--hf-text-muted) !important;
  border-color: var(--hf-border) !important;
  background: var(--hf-bg-soft) !important;
}

.hf-otp-status {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 500;
  min-height: 16px;
  line-height: 1.4;
}

.hf-otp-status--success { color: var(--hf-green); }
.hf-otp-status--error   { color: var(--hf-red); }
.hf-otp-status--warn    { color: #b45309; }
.hf-otp-status--info    { color: var(--hf-green-mid, #2d6a4f); }

input[name="mobile_verified_token"] {
  display: none !important;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .hawego-franchise-wizard {
    padding: 36px 28px 44px;
  }
}

@media (max-width: 768px) {
  .hawego-franchise-wizard {
    padding: 28px 16px 36px;
    border-radius: 12px;
  }

  .hf-progress {
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .hf-progress::-webkit-scrollbar {
    display: none;
  }

  .hf-progress-label {
    font-size: 14px;
    max-width: 80px;
  }

  .hf-progress-dot {
    width: 34px;
    height: 34px;
    font-size: 16px;
  }

  .hf-field > label,
  .hf-field > .wpcf7-form-control-wrap + label,
  .hawego-step label:first-child {
    font-size: 16px;
  }

  .hawego-franchise-wizard .hf-input,
  .hawego-franchise-wizard .hf-select,
  .hawego-franchise-wizard .hf-textarea,
  .hawego-franchise-wizard input[type="text"],
  .hawego-franchise-wizard input[type="email"],
  .hawego-franchise-wizard input[type="tel"],
  .hawego-franchise-wizard input[type="number"],
  .hawego-franchise-wizard input[type="date"],
  .hawego-franchise-wizard select,
  .hawego-franchise-wizard textarea {
    font-size: 17px !important;
  }

  .hawego-franchise-wizard .hf-phone-wrap input[type="tel"],
  .hawego-franchise-wizard .hf-phone-wrap .hf-phone-input {
    font-size: 17px !important;
  }

  .hf-phone-code {
    font-size: 16px;
  }

  .hf-btn {
    font-size: 17px;
  }

  .hf-radio-group .wpcf7-list-item label,
  .hf-investment-cards .wpcf7-list-item label,
  .hf-checkbox-grid .wpcf7-list-item-label {
    font-size: 16px !important;
  }

  .hf-grid-2 {
    grid-template-columns: 1fr;
  }

  .hf-investment-cards .wpcf7-radio {
    grid-template-columns: 1fr 1fr;
  }

  .hf-checkbox-grid .wpcf7-checkbox {
    grid-template-columns: 1fr 1fr;
  }

  .hf-checkbox-grid--compact .wpcf7-checkbox {
    grid-template-columns: 1fr 1fr;
  }

  .hf-upload-grid {
    grid-template-columns: 1fr 1fr;
  }

  .hf-review-body {
    grid-template-columns: 1fr;
  }

  .hf-section-title {
    font-size: 21px;
  }

  .hf-upload-note {
    margin-left: 0;
  }

  .hf-nav {
    flex-wrap: wrap;
  }

  .hf-btn-next {
    margin-left: 0;
  }

  .hf-field-whatsapp .hf-mobile-row {
    grid-template-columns: 1fr;
  }

  .hf-mobile-row {
    grid-template-columns: 1fr;
  }

  .hf-btn-otp-send {
    width: 100%;
    height: 48px;
    min-height: 48px;
    max-height: 48px;
  }

  .hf-phone-wrap {
    height: 48px;
    min-height: 48px;
    max-height: 48px;
  }

  .hf-otp-row {
    gap: 6px;
  }

  .hf-otp-input {
    letter-spacing: 0.2em;
    font-size: 17px !important;
  }

  .hf-btn-otp-verify,
  .hf-btn-otp-resend {
    padding: 0 12px !important;
    font-size: 15px !important;
  }

  .hf-btn-otp-send {
    font-size: 16px !important;
  }
}

@media (max-width: 480px) {
  .hf-upload-grid {
    grid-template-columns: 1fr;
  }

  .hf-investment-cards .wpcf7-radio {
    grid-template-columns: 1fr;
  }

  .hf-checkbox-grid .wpcf7-checkbox {
    grid-template-columns: 1fr;
  }

  .hf-checkbox-grid--compact .wpcf7-checkbox {
    grid-template-columns: 1fr;
  }

  .hawego-franchise-wizard {
    padding: 24px 14px 32px;
  }

  .hf-otp-input {
    letter-spacing: 0.18em;
    font-size: 17px !important;
    padding: 0 10px !important;
  }

  .hf-btn-otp-verify,
  .hf-btn-otp-resend {
    padding: 0 10px !important;
    font-size: 15px !important;
  }

  .hf-hint,
  .hf-otp-status {
    font-size: 15px;
  }
}

/* ── Theme font overrides (Woodmart / Elementor) — match About Us body text ── */
body.hawego-franchise-page .hawego-franchise-wizard {
  font-size: 17px !important;
  line-height: 1.41 !important;
}

body.hawego-franchise-page .hawego-franchise-wizard,
body.hawego-franchise-page .hawego-franchise-wizard input,
body.hawego-franchise-page .hawego-franchise-wizard select,
body.hawego-franchise-page .hawego-franchise-wizard textarea,
body.hawego-franchise-page .hawego-franchise-wizard button,
body.hawego-franchise-page .hf-page-container {
  font-family: var(--hf-font, 'Jost', sans-serif) !important;
}

body.hawego-franchise-page .hawego-franchise-wizard input,
body.hawego-franchise-page .hawego-franchise-wizard select,
body.hawego-franchise-page .hawego-franchise-wizard textarea {
  font-size: 17px !important;
}

body.hawego-franchise-page .hawego-franchise-wizard label,
body.hawego-franchise-page .hawego-franchise-wizard .hf-field > label {
  font-size: 17px !important;
}

body.hawego-franchise-page .hawego-franchise-wizard .wpcf7-list-item-label,
body.hawego-franchise-page .hawego-franchise-wizard .wpcf7-list-item label {
  font-size: 17px !important;
}

body.hawego-franchise-page .hawego-franchise-wizard .hf-section-title {
  font-size: 22px !important;
}

body.hawego-franchise-page .hawego-franchise-wizard .hf-btn,
body.hawego-franchise-page .hawego-franchise-wizard button.hf-btn {
  font-size: 16px !important;
}