/* ==========================================================================
   gutrdun_vx4 HOMEPAGE DESIGN SYSTEM: ESTIMATE CARD & SERVICE SELECTOR
   pages/home/assets/css/home-estimate.css
   ========================================================================== */

/* 1. Independent Estimate Card Component (Never Mutates External Columns) */
.vx-rfq-card {
  background: rgba(11, 19, 41, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid rgba(44, 250, 11, 0.5);
  border-radius: 14px;
  padding: 1.5rem;
  box-shadow: 8px 8px 0px rgba(4, 9, 24, 0.85), 0 20px 40px rgba(0, 0, 0, 0.45);
  position: relative;
  z-index: 10;
  width: 100%;
  margin-top: 14px;
}

.vx-rfq-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.vx-rfq-title {
  font-family: var(--vx-font-display, 'Outfit', sans-serif);
  font-size: 1.32rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.vx-rfq-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 25;
  font-size: 12px;
  font-weight: 700;
  color: #2cfa0b;
  background: #0b1329;
  border: 1.5px solid rgba(44, 250, 11, 0.45);
  padding: 4px 14px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.65), 0 0 10px rgba(44, 250, 11, 0.2);
}

/* 2. Step 1: Service Selector Grid & Interactive Chips */
.vx-step-label {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #fbbf24;
  margin-bottom: 8px;
  display: block;
}

.vx-service-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 0.75rem;
}

/* Service Chip Label Target */
.vx-service-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  cursor: pointer;
  min-height: 48px;
  user-select: none;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  margin: 0;
}

.vx-service-chip:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.25);
}

/* Hidden native checkbox, styled custom visual */
.vx-service-chip input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Custom Checkbox Indicator */
.vx-service-chip-box {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.vx-service-chip-box i {
  display: none;
  font-size: 13px;
  color: #050b44;
  font-weight: 900;
}

.vx-service-chip-label {
  font-size: 13.5px;
  font-weight: 600;
  color: #f1f5f9;
  line-height: 1.25;
  display: flex;
  align-items: center;
  gap: 6px;
}

.vx-service-chip-label i {
  color: #94a3b8;
  font-size: 14px;
  transition: color 0.2s ease;
}

/* Active / Checked State */
.vx-service-chip.active,
.vx-service-chip.is-checked {
  background: rgba(44, 250, 11, 0.12);
  border-color: #2cfa0b;
  box-shadow: 0 0 12px rgba(44, 250, 11, 0.2);
}

.vx-service-chip.active .vx-service-chip-box,
.vx-service-chip.is-checked .vx-service-chip-box {
  background: #2cfa0b;
  border-color: #2cfa0b;
}

.vx-service-chip.active .vx-service-chip-box i,
.vx-service-chip.is-checked .vx-service-chip-box i {
  display: block;
}

.vx-service-chip.active .vx-service-chip-label,
.vx-service-chip.is-checked .vx-service-chip-label {
  color: #ffffff;
  font-weight: 700;
}

.vx-service-chip.active .vx-service-chip-label i,
.vx-service-chip.is-checked .vx-service-chip-label i {
  color: #2cfa0b;
}

/* 3. Step 2: Smooth Accordion Panel (#trans) */
.vx-accordion-panel {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.vx-accordion-panel.open,
.vx-accordion-panel.trans-10 {
  display: block !important;
  opacity: 1 !important;
}

.vx-accordion-divider {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 0.75rem;
  margin-top: 0.5rem;
  margin-bottom: 0.75rem;
}

/* Form Inputs */
.vx-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13.5px;
  color: #ffffff;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.vx-input::placeholder {
  color: #94a3b8;
}

.vx-input:focus {
  background: rgba(255, 255, 255, 0.14);
  border-color: #2cfa0b;
  outline: none;
  box-shadow: 0 0 0 3px rgba(44, 250, 11, 0.25);
  color: #ffffff;
}

.vx-modal-step[data-step="4"] .vx-input {
  border: 1px solid rgba(44, 250, 11, 0.45) !important;
  box-shadow: inset 0 0 0 1px rgba(44, 250, 11, 0.12) !important;
}

.vx-modal-step[data-step="4"] .vx-input:focus,
.vx-modal-step[data-step="4"] .vx-input:focus-visible {
  border: 1px solid #2cfa0b !important;
  box-shadow: 0 0 0 3px rgba(44, 250, 11, 0.28), 0 0 14px rgba(44, 250, 11, 0.55) !important;
}

.vx-same-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.35rem;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #2cfa0b;
  text-shadow: 0 0 8px rgba(44, 250, 11, 0.9);
  cursor: pointer;
}

.vx-same-phone .form-check-input {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  border: 2px solid #2cfa0b;
  background-color: transparent;
  box-shadow: 0 0 8px rgba(44, 250, 11, 0.75);
  cursor: pointer;
}

.vx-same-phone .form-check-input:checked {
  background-color: #2cfa0b;
  border-color: #2cfa0b;
  box-shadow: 0 0 12px #2cfa0b;
}

.vx-modal-step[data-step="4"] .vx-input.vx-field-alert,
.vx-modal-step[data-step="4"] .vx-input.vx-field-alert:focus,
.vx-modal-step[data-step="4"] .vx-input.vx-field-alert:focus-visible,
#vx_cust_zip.vx-field-alert,
#vx_cust_address.vx-field-alert {
  border-width: 2px !important;
  border-style: solid !important;
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.4) !important;
}

.vx-modal-step[data-step="4"] .vx-input.vx-field-ok,
.vx-modal-step[data-step="4"] .vx-input.vx-field-ok:focus,
.vx-modal-step[data-step="4"] .vx-input.vx-field-ok:focus-visible,
#vx_cust_zip.vx-field-ok {
  border-width: 1px !important;
  border-style: solid !important;
  border-color: #2cfa0b !important;
  box-shadow: 0 0 10px rgba(44, 250, 11, 0.55) !important;
}

@keyframes vxAutofillStart {
  from { opacity: 1; }
  to { opacity: 1; }
}

#vx_cust_zip:-webkit-autofill,
#vx_cust_address:-webkit-autofill {
  animation-name: vxAutofillStart;
  animation-duration: 0.01s;
}

/* Submit CTA Button (Default Base) */
.vx-btn-submit {
  width: 100%;
  background: #2cfa0b;
  color: #032411 !important;
  font-weight: 800;
  font-size: 16px;
  padding: 12px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 16px rgba(44, 250, 11, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  margin-top: 0.5rem;
}

.vx-btn-submit:hover {
  transform: translateY(-2px);
  background: #25d409;
  box-shadow: 0 6px 22px rgba(44, 250, 11, 0.6);
  color: #032411 !important;
}

.vx-btn-submit:active {
  transform: translateY(0);
}

/* ==========================================================================
   Revolving Glow CTA Button (Adapted from gutrdun_roofing_v7 in Green Palette)
   ========================================================================== */

/* ---- WRAPPER: Outer pill with ambient breathing glow & dark bezel ---- */
.vx-hero-btn-glass-wrap {
  display: block;
  width: 100%;
  border-radius: 999px;
  padding: 3.5px;
  background: #041408;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 0 14px 2px rgba(44, 250, 11, 0.5),
    0 0 28px 6px rgba(44, 250, 11, 0.25);
  animation: vxWrapperGlowGreen 3.2s ease-in-out infinite;
  transition: all 0.3s ease;
}

@keyframes vxWrapperGlowGreen {
  0%, 100% {
    box-shadow:
      0 0 12px 2px rgba(44, 250, 11, 0.45),
      0 0 22px 5px rgba(44, 250, 11, 0.2);
  }
  50% {
    box-shadow:
      0 0 22px 6px rgba(44, 250, 11, 0.85),
      0 0 38px 12px rgba(44, 250, 11, 0.4);
  }
}

/* Outer revolving light beam around the dark bezel */
.vx-hero-btn-glass-wrap::after {
  content: "";
  position: absolute;
  width: 600px;
  height: 600px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 65deg,
    rgba(44, 250, 11, 0.4) 78deg,
    rgba(255, 255, 255, 0.95) 90deg,
    rgba(44, 250, 11, 1) 100deg,
    rgba(255, 255, 255, 0.95) 110deg,
    rgba(44, 250, 11, 0.4) 122deg,
    transparent 135deg,
    transparent 360deg
  );
  animation: spinInside 2.4s linear infinite;
  z-index: 1;
}

/* ---- THE BUTTON ITSELF (HERO NEXT) ---- */
.vx-hero-btn-glass-wrap .hero-btn-glass.vx-btn-submit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 28px;
  border-radius: 999px;
  z-index: 2;
  font-weight: 800;
  font-size: 16.5px;
  letter-spacing: 0.3px;
  color: #032411 !important; /* Deep forest green text for WCAG AAA contrast (10.2:1) */
  text-decoration: none;
  cursor: pointer;
  border: none;
  outline: none;
  margin-top: 0;

  /* The button's own background visible through the 3px perimeter channel */
  background: linear-gradient(135deg, #2dfa0b 0%, #20e008 55%, #15c003 100%);

  /* Inner highlight */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -2px 0 rgba(0, 0, 0, 0.25);

  /* CRITICAL: clips ::after so the spinning square never escapes pill bounds */
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* ---- SPINNING CONIC SQUARE inside button (clipped to pill by overflow:hidden) ---- */
/* The bright spot sweeps the inside edge of the pill only — never goes outside */
.vx-hero-btn-glass-wrap .hero-btn-glass.vx-btn-submit::after {
  content: "";
  position: absolute;
  width: 500px;
  height: 500px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 60deg,
    rgba(200, 255, 180, 0.5) 78deg,
    rgba(255, 255, 255, 1) 90deg,
    rgba(44, 250, 11, 0.95) 100deg,
    rgba(255, 255, 255, 1) 110deg,
    rgba(200, 255, 180, 0.5) 128deg,
    transparent 148deg,
    transparent 360deg
  );
  animation: spinInside 2.4s linear infinite;
  z-index: 1;
}

/* ---- SOLID GREEN CENTER FILL (masks center, reveals only the border ring) ---- */
.vx-hero-btn-glass-wrap .hero-btn-glass.vx-btn-submit::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 999px;
  background: linear-gradient(135deg, #2dfa0b 0%, #22dc08 55%, #17c805 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  z-index: 2;
}

/* Content sits strictly above ::before and ::after */
.vx-hero-btn-glass-wrap .hero-btn-glass.vx-btn-submit > * {
  position: relative;
  z-index: 3;
}

.vx-hero-btn-glass-wrap .hero-btn-glass.vx-btn-submit .vx-btn-arrow {
  display: inline-block;
  font-size: 1.2rem;
  transition: transform 0.25s ease;
}

/* Hover & Active States */
.vx-hero-btn-glass-wrap:hover {
  transform: translateY(-2px) scale(1.015);
  box-shadow:
    0 0 20px 6px rgba(44, 250, 11, 0.9),
    0 0 38px 12px rgba(44, 250, 11, 0.5);
}

.vx-hero-btn-glass-wrap:hover .hero-btn-glass.vx-btn-submit .vx-btn-arrow {
  transform: translateX(5px);
}

.vx-hero-btn-glass-wrap:active {
  transform: translateY(0) scale(1);
}

/* SPINNING KEYFRAME for the revolving light beam */
@keyframes spinInside {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* ==========================================================================
   AIOS WCAG AAA Compliant Promo APPLIED Badge & Banners
   Resolves contrast deficit: Enforces deep dark forest text (#032411) on bright green (#2cfa0b),
   yielding a 10.2:1 contrast ratio that exceeds WCAG AAA standards.
   ========================================================================== */
.vx-badge-applied,
.vx-badge-accepted,
.vx-promo-badge-hero .badge,
.vx-modal-promo-banner .badge,
.vx-step4-promo-callout .badge,
.vx-modal-promo-summary .badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #2cfa0b !important;
  color: #032411 !important; /* Deep dark forest text on lime green - 10.2:1 contrast (WCAG AAA) */
  font-weight: 800 !important;
  font-size: 0.72rem !important;
  line-height: 1.1 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: 4px 9px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(3, 36, 17, 0.25) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important;
  vertical-align: middle !important;
}

/* Hero Promo Code Notification Card (Hidden by default, shown strictly when code is active) */
.vx-promo-badge-hero {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(3, 28, 14, 0.85);
  border: 1.5px solid rgba(44, 250, 11, 0.5);
  border-radius: 10px;
  padding: 9px 16px;
  color: #e2e8f0;
  font-size: 0.88rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(44, 250, 11, 0.25);
}

.vx-promo-badge-hero.is-active,
.vx-promo-badge-hero:not(.d-none) {
  display: flex !important;
}

.vx-promo-badge-hero.d-none {
  display: none !important;
}

.vx-promo-badge-hero .vx-promo-icon,
.vx-promo-badge-hero i.bi-check-circle-fill {
  color: #2cfa0b !important;
  font-size: 1.15rem !important;
}

.vx-promo-badge-hero strong {
  color: #ffffff !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
}

/* Modal Promo Banner */
.vx-modal-promo-banner {
  background: rgba(3, 28, 14, 0.85) !important;
  border: 1.5px solid rgba(44, 250, 11, 0.45) !important;
  border-radius: 10px !important;
  padding: 8px 16px !important;
  color: #e2e8f0 !important;
  font-size: 0.88rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px;
  margin-top: 8px;
}

.vx-modal-promo-banner .vx-promo-icon,
.vx-modal-promo-banner i {
  color: #2cfa0b !important;
  font-size: 1.15rem !important;
}

.vx-modal-promo-banner strong {
  color: #ffffff !important;
  font-weight: 800 !important;
}

/* Step 4 Promo Callout */
.vx-modal-promo-summary {
  background: rgba(3, 28, 14, 0.85) !important;
  border: 1.5px solid rgba(44, 250, 11, 0.45) !important;
  border-radius: 10px !important;
  padding: 10px 16px !important;
  color: #e2e8f0 !important;
  font-size: 0.9rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px;
}

.vx-modal-promo-summary .vx-promo-icon {
  color: #2cfa0b !important;
  font-size: 1.25rem !important;
}

.vx-modal-promo-summary strong {
  color: #ffffff !important;
  font-weight: 800 !important;
}

/* Error text */
.errjs {
  font-size: 12px;
  color: #f87171;
  font-weight: 600;
  margin-top: 2px;
}

/* 4. Initial CTA Wrapper & Feedback */
.vx-initial-cta-wrapper {
  margin-top: 0.5rem;
}

.vx-card-guarantee {
  font-size: 11.5px;
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

/* Attention pulse when clicking CTA before selecting service */
@keyframes vxPulseAttention {
  0%, 100% {
    transform: scale(1);
    border-color: rgba(255, 255, 255, 0.12);
  }
  50% {
    transform: scale(1.02);
    border-color: #fbbf24;
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.45);
  }
}

.vx-pulse-attention {
  animation: vxPulseAttention 0.4s ease 2 !important;
}

/* 5. Hero Promo Badge & Next Button Wrapper */
.vx-promo-badge-hero {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.5);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
  color: #34d399;
  text-align: center;
  animation: fadeIn 0.3s ease;
}

.vx-hero-next-wrapper {
  animation: fadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   6. FULL-SCREEN INTERACTIVE ESTIMATE MODAL / OVERLAY
   Desktop: Spacious multi-column modal utilizing screen real-estate
   Mobile: Adaptive view with sticky bottom actions and segregated trade cards
   ========================================================================== */
.vx-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s ease;
}

.vx-modal-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.vx-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 7, 30, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.vx-modal-container {
  position: relative;
  z-index: 1;
  width: 96vw;
  max-width: 1220px;
  height: 88vh;
  max-height: 800px;
  min-height: 560px;
  background: linear-gradient(150deg, #070e3a 0%, #040924 100%);
  border: 1.5px solid rgba(44, 250, 11, 0.5);
  border-radius: 20px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 35px rgba(44, 250, 11, 0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #ffffff;
  transform: translateY(20px) scale(0.98);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.vx-modal-overlay.active .vx-modal-container {
  transform: translateY(0) scale(1);
}

.vx-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 16px;
  min-height: 42px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(3, 8, 28, 0.95);
  flex-shrink: 0;
}

.vx-modal-badge {
  font-size: 11.5px;
  font-weight: 700;
  color: #2cfa0b;
  background: rgba(44, 250, 11, 0.12);
  border: 1px solid rgba(44, 250, 11, 0.35);
  padding: 3px 10px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.vx-modal-promo-chip {
  background: rgba(44, 250, 11, 0.12);
  border: 1px solid rgba(44, 250, 11, 0.4);
  border-radius: 50px;
  padding: 2px 10px;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  font-size: 12px;
}

.vx-badge-applied {
  background: #2cfa0b;
  color: #032411 !important;
  font-weight: 800;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  display: inline-block;
  line-height: 1.2;
}

.vx-modal-close {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}

.vx-modal-close:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: #ef4444;
  color: #ef4444;
  transform: scale(1.08);
}

.vx-modal-title {
  font-family: var(--vx-font-display, 'Outfit', sans-serif);
  font-size: 1.4rem;
  font-weight: 800;
  color: #ffffff;
}

.vx-modal-title-text.vx-title-cursive {
  font-family: 'Caveat', cursive !important;
  font-size: 1.65rem !important;
  color: #fbbf24 !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px;
  text-shadow: 0 0 14px rgba(251, 191, 36, 0.45);
  display: inline-block;
  line-height: 1;
}

#vxChooseIssuesPrompt,
.vx-step2-issues-prompt {
  font-family: 'Caveat', cursive !important;
  font-size: 1.45rem !important;
  color: #fbbf24 !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.4);
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 6px;
}

.vx-modal-progress {
  height: 3px !important;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 0;
  flex-shrink: 0;
}

.vx-modal-summary {
  font-size: 13px;
  color: #2cfa0b;
  font-weight: 600;
  margin-top: 4px;
}

.vx-modal-promo-banner {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.45);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
  color: #6ee7b7;
  margin-top: 6px;
}

.vx-modal-promo-summary {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.45);
  border-radius: 8px;
  padding: 10px 14px;
  color: #34d399;
  font-size: 14px;
  display: flex;
  align-items: center;
}

.vx-modal-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.vx-modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 16px 8px;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: #2cfa0b rgba(10, 15, 30, 0.7);
}

.vx-modal-body::-webkit-scrollbar {
  width: 8px;
}

.vx-modal-body::-webkit-scrollbar-track {
  background: rgba(10, 15, 30, 0.7);
  border-radius: 8px;
  margin: 4px 0;
}

.vx-modal-body::-webkit-scrollbar-thumb {
  background: #2cfa0b;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(44, 250, 11, 0.45);
  border: 1px solid rgba(44, 250, 11, 0.3);
}

.vx-modal-body::-webkit-scrollbar-thumb:hover {
  background: #22c55e;
  box-shadow: 0 0 14px rgba(44, 250, 11, 0.75);
}

.vx-modal-body::-webkit-scrollbar-button:vertical:start:decrement {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 16 16' fill='%232cfa0b'%3E%3Cpath d='M7.247 4.86l-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z'/%3E%3C/svg%3E") no-repeat center center;
  background-size: 8px 8px;
  height: 12px;
  display: block;
}

.vx-modal-body::-webkit-scrollbar-button:vertical:end:increment {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 16 16' fill='%232cfa0b'%3E%3Cpath d='M7.247 11.14l-4.796-5.481c-.566-.647-.106-1.659.753-1.659h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E") no-repeat center center;
  background-size: 8px 8px;
  height: 12px;
  display: block;
}

.vx-modal-step {
  display: none;
}

.vx-modal-step.active {
  display: block;
  animation: fadeIn 0.25s ease-out;
}

.vx-modal-step[data-step="2"].active {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

/* Step 1: Tiles */
.vx-modal-service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.vx-modal-service-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.vx-modal-service-tile:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(44, 250, 11, 0.4);
  transform: translateY(-2px);
}

.vx-modal-service-tile.active {
  background: rgba(44, 250, 11, 0.12);
  border-color: #2cfa0b;
  box-shadow: 0 0 16px rgba(44, 250, 11, 0.3);
}

.vx-modal-service-tile .vx-tile-checkbox {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.vx-modal-service-tile.active .vx-tile-checkbox {
  background: #2cfa0b;
  border-color: #2cfa0b;
  color: #081584;
}

.vx-modal-service-tile .vx-tile-icon {
  font-size: 1.6rem;
  color: #2cfa0b;
}

.vx-modal-service-tile .vx-tile-name {
  font-weight: 700;
  font-size: 15px;
  color: #ffffff;
}

/* ==========================================================================
   Step 2: Top Category Navigation Strip & Split Layout
   ========================================================================== */
.vx-step2-top-bar {
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50px;
  padding: 4px 10px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vx-category-tabs-wrap {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
  justify-content: center;
  width: 100%;
}

.vx-category-tab {
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  border-radius: 50px;
  padding: 4px 14px;
  color: #e2e8f0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 12px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.vx-category-tab:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(44, 250, 11, 0.4);
  color: #ffffff;
  transform: translateY(-1px);
}

.vx-category-tab.active {
  background: rgba(44, 250, 11, 0.18);
  border-color: #2cfa0b;
  color: #2cfa0b;
  box-shadow: 0 0 12px rgba(44, 250, 11, 0.35);
}

.vx-category-tab .badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 50px;
}

.vx-category-tab-add {
  border-style: dashed;
  border-color: rgba(44, 250, 11, 0.5);
  color: #2cfa0b;
}

.vx-category-tab-add:hover {
  background: rgba(44, 250, 11, 0.15);
  border-color: #2cfa0b;
  color: #ffffff;
}

.vx-btn-back-categories {
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 50px;
  border-color: rgba(44, 250, 11, 0.4);
  color: #ffffff;
  transition: all 0.2s ease;
}

.vx-btn-back-categories:hover {
  background: rgba(44, 250, 11, 0.15);
  border-color: #2cfa0b;
  color: #2cfa0b;
}

/* Step 2 Interactive Split Layout (Options Left, Video Stage Right) */
.vx-step2-layout {
  display: grid;
  grid-template-columns: 46% 54%;
  gap: 16px;
  align-items: stretch;
  flex: 1;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

/* Left Column: Fixed Header on top, Independent Scrollable Options List Below */
.vx-step2-left {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding-right: 6px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.vx-active-trade-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 8px;
  flex-shrink: 0;
}

.vx-active-trade-title {
  font-family: var(--vx-font-display, 'Outfit', sans-serif);
  font-weight: 800;
  font-size: 1.15rem;
  color: #ffffff;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.vx-active-trade-ask {
  font-family: 'Caveat', cursive;
  font-size: 1.25rem;
  color: #fbbf24;
  margin: 0;
}

/* Dedicated Vertical Scroll for Options Column - Videos on right are completely stationary */
.vx-active-options-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(44, 250, 11, 0.5) rgba(255, 255, 255, 0.06);
}

.vx-active-options-list::-webkit-scrollbar {
  width: 7px;
}

.vx-active-options-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
}

.vx-active-options-list::-webkit-scrollbar-thumb {
  background: rgba(44, 250, 11, 0.45);
  border-radius: 8px;
  border: 1px solid rgba(44, 250, 11, 0.2);
}

.vx-active-options-list::-webkit-scrollbar-thumb:hover {
  background: #2cfa0b;
}

/* Selectable Option Row */
.vx-option-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  color: #f1f5f9;
  font-size: 13px;
  font-weight: 500;
  user-select: none;
  flex-shrink: 0;
}

.vx-option-row:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(44, 250, 11, 0.4);
  transform: translateX(3px);
}

.vx-option-row.active {
  background: rgba(44, 250, 11, 0.14);
  border-color: #2cfa0b;
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 0 14px rgba(44, 250, 11, 0.25);
}

.vx-option-row.urgent {
  border-color: rgba(239, 68, 68, 0.35);
}

.vx-option-row.urgent.active {
  background: rgba(239, 68, 68, 0.18);
  border-color: #ef4444;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.35);
}

.vx-option-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.vx-option-check {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: transparent;
  flex-shrink: 0;
  transition: all 0.18s ease;
}

.vx-option-row.active .vx-option-check {
  background: #2cfa0b;
  border-color: #2cfa0b;
  color: #081584;
}

.vx-option-row.urgent.active .vx-option-check {
  background: #ef4444;
  border-color: #ef4444;
  color: #ffffff;
}

.vx-option-video-cue {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  color: #2cfa0b;
  background: rgba(44, 250, 11, 0.1);
  padding: 2px 7px;
  border-radius: 50px;
  border: 1px solid rgba(44, 250, 11, 0.3);
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.vx-option-row.active .vx-option-video-cue {
  background: #2cfa0b;
  color: #081584;
  border-color: #2cfa0b;
}

/* Step 2 Right Column: Interactive Stationary Video Stage */
.vx-step2-right {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.vx-video-stage-panel {
  background: rgba(3, 7, 24, 0.85);
  border: 1.5px solid rgba(44, 250, 11, 0.4);
  border-radius: 14px;
  padding: 10px 14px 8px;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 25px rgba(44, 250, 11, 0.15);
}

.vx-video-stage-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.vx-video-pulse-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #2cfa0b;
  box-shadow: 0 0 10px #2cfa0b;
  animation: pulseGreen 1.8s infinite;
}

@keyframes pulseGreen {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(44, 250, 11, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(44, 250, 11, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(44, 250, 11, 0); }
}

.vx-video-stage-title {
  font-weight: 700;
  font-size: 13px;
  color: #ffffff;
}

.vx-video-stage-badge {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 50px;
}

/* Video Stage Container & 1 / 2 / 4 Dynamic Split Grids */
.vx-video-stage-container {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: #020514;
}

.vx-video-stage-footer {
  flex-shrink: 0;
  padding-top: 4px;
}

.vx-video-grid {
  width: 100%;
  height: 100%;
  display: grid;
  transition: opacity 0.25s ease;
}

/* 1 Video Split */
.vx-video-grid.split-1 {
  grid-template-columns: 1fr;
  height: 100%;
}

/* 2 Videos Split */
.vx-video-grid.split-2 {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  height: 100%;
}

/* 4 Videos Quad Split */
.vx-video-grid.split-4 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  height: 100%;
}

.vx-video-grid.split-4.is-scrollable {
  overflow-y: auto;
  max-height: 100%;
}

/* Individual Video Box */
.vx-video-box {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.25s ease-out;
}

.vx-video-box video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vx-video-badge {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  background: rgba(3, 7, 24, 0.88);
  backdrop-filter: blur(6px);
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: #ffffff;
  border: 1px solid rgba(44, 250, 11, 0.45);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  z-index: 5;
}

.vx-video-prompt {
  position: absolute;
  inset: 0;
  background: rgba(4, 9, 32, 0.4);
  backdrop-filter: blur(2px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
  color: #ffffff;
  pointer-events: none;
  z-index: 6;
}

.vx-video-prompt-box {
  background: rgba(4, 9, 32, 0.85);
  border: 1px solid rgba(44, 250, 11, 0.4);
  border-radius: 12px;
  padding: 12px 18px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7);
}

/* Urgent Notice in Modal Footer */
.vx-urgent-footer-alert {
  display: flex;
  align-items: center;
}

.vx-urgent-pill {
  background: rgba(239, 68, 68, 0.16);
  border: 1px solid rgba(239, 68, 68, 0.55);
  border-radius: 50px;
  padding: 4px 14px;
  font-size: 12px;
  color: #fca5a5;
  display: inline-flex;
  align-items: center;
  animation: pulseRed 2s infinite;
}

@keyframes pulseRed {
  0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); }
  70% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* ==========================================================================
   Step 3: Vibrant Question Cards, Font Hierarchy & Interactive Grid
   ========================================================================== */
.vx-modal-step[data-step="3"] {
  padding-top: 14px;
}

/* Question Panel Wrapper & Left Number Badges (1, 2, 3, 4) */
.vx-step3-panel-wrap {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 28px; /* Distinct gap between question panels */
  position: relative;
}

.vx-step3-panel-wrap:last-child {
  margin-bottom: 12px;
}

.vx-step3-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--vx-font-display, 'Outfit', sans-serif);
  font-size: 1.15rem;
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 6px;
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
  user-select: none;
}

.vx-step3-panel-wrap:hover .vx-step3-num {
  transform: scale(1.08);
}

.vx-step3-num.num-amber {
  background: rgba(245, 158, 11, 0.16);
  border: 2px solid #f59e0b;
  color: #fbbf24;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.35);
}

.vx-step3-num.num-cyan {
  background: rgba(6, 182, 212, 0.16);
  border: 2px solid #06b6d4;
  color: #22d3ee;
  box-shadow: 0 0 14px rgba(6, 182, 212, 0.35);
}

.vx-step3-num.num-emerald {
  background: rgba(44, 250, 11, 0.16);
  border: 2px solid #2cfa0b;
  color: #2cfa0b;
  box-shadow: 0 0 14px rgba(44, 250, 11, 0.35);
}

.vx-step3-num.num-purple {
  background: rgba(168, 85, 247, 0.16);
  border: 2px solid #a855f7;
  color: #c084fc;
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.35);
}

.vx-step3-card {
  flex: 1;
  min-width: 0;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.015) 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 12px 16px 14px;
  margin-bottom: 0;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

@media (max-width: 575.98px) {
  .vx-step3-panel-wrap {
    gap: 10px;
    margin-bottom: 20px;
  }
  .vx-step3-num {
    width: 30px;
    height: 30px;
    font-size: 0.95rem;
    margin-top: 4px;
  }
}

.vx-step3-card.card-timing {
  border-left: 4px solid #f59e0b;
}

.vx-step3-card.card-age {
  border-left: 4px solid #06b6d4;
}

.vx-step3-card.card-ins {
  border-left: 4px solid #2cfa0b;
}

.vx-step3-card.card-when {
  border-left: 4px solid #a855f7;
}

.vx-step3-q-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}

.vx-q-icon-badge {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}

.vx-q-icon-badge.amber {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #f59e0b;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.25);
}

.vx-q-icon-badge.cyan {
  background: rgba(6, 182, 212, 0.15);
  border: 1px solid rgba(6, 182, 212, 0.4);
  color: #06b6d4;
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.25);
}

.vx-q-icon-badge.emerald {
  background: rgba(44, 250, 11, 0.15);
  border: 1px solid rgba(44, 250, 11, 0.4);
  color: #2cfa0b;
  box-shadow: 0 0 12px rgba(44, 250, 11, 0.25);
}

.vx-q-icon-badge.purple {
  background: rgba(168, 85, 247, 0.15);
  border: 1px solid rgba(168, 85, 247, 0.4);
  color: #c084fc;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.25);
}

.vx-step3-q-title {
  font-family: var(--vx-font-display, 'Outfit', sans-serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 2px 0;
}

.vx-step3-q-subtitle {
  font-size: 12.5px;
  color: #94a3b8;
  line-height: 1.35;
}

.vx-step3-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.vx-step3-grid .vx-single-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: left;
}

.vx-step3-grid .vx-single-chip:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

/* Base Active Fallback */
.vx-step3-grid .vx-single-chip.active {
  background: linear-gradient(135deg, rgba(44, 250, 11, 0.2) 0%, rgba(16, 185, 129, 0.3) 100%) !important;
  border-color: #2cfa0b !important;
  color: #ffffff !important;
  font-weight: 700;
  box-shadow: 0 0 16px rgba(44, 250, 11, 0.35);
  transform: scale(1.01);
}

/* Dynamic Hue Overlays Matching Button Text Accent Color (Point 3) */
.vx-step3-grid .vx-single-chip.active[data-accent="danger"] {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.22) 0%, rgba(185, 28, 28, 0.35) 100%) !important;
  border-color: #ef4444 !important;
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.45);
}
.vx-step3-grid .vx-single-chip.active[data-accent="danger"] .vx-chip-check {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
}

.vx-step3-grid .vx-single-chip.active[data-accent="warning"] {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.22) 0%, rgba(180, 83, 9, 0.35) 100%) !important;
  border-color: #f59e0b !important;
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.45);
}
.vx-step3-grid .vx-single-chip.active[data-accent="warning"] .vx-chip-check {
  background: #f59e0b !important;
  border-color: #f59e0b !important;
  color: #000000 !important;
}

.vx-step3-grid .vx-single-chip.active[data-accent="info"] {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.22) 0%, rgba(3, 105, 161, 0.35) 100%) !important;
  border-color: #06b6d4 !important;
  box-shadow: 0 0 18px rgba(6, 182, 212, 0.45);
}
.vx-step3-grid .vx-single-chip.active[data-accent="info"] .vx-chip-check {
  background: #06b6d4 !important;
  border-color: #06b6d4 !important;
  color: #ffffff !important;
}

.vx-step3-grid .vx-single-chip.active[data-accent="secondary"] {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.22) 0%, rgba(124, 58, 237, 0.35) 100%) !important;
  border-color: #a855f7 !important;
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.45);
}
.vx-step3-grid .vx-single-chip.active[data-accent="secondary"] .vx-chip-check {
  background: #a855f7 !important;
  border-color: #a855f7 !important;
  color: #ffffff !important;
}

.vx-step3-grid .vx-single-chip.active[data-accent="success"] {
  background: linear-gradient(135deg, rgba(44, 250, 11, 0.2) 0%, rgba(16, 185, 129, 0.3) 100%) !important;
  border-color: #2cfa0b !important;
  box-shadow: 0 0 16px rgba(44, 250, 11, 0.35);
}
.vx-step3-grid .vx-single-chip.active[data-accent="success"] .vx-chip-check {
  background: #2cfa0b !important;
  border-color: #2cfa0b !important;
  color: #032411 !important;
}

/* Stacked Badge Structure - Gives Full Space for Labels (Point 2) */
.vx-chip-main {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.vx-chip-icon {
  font-size: 1.15rem;
  margin-top: 1px;
  flex-shrink: 0;
}

.vx-chip-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  flex: 1;
  min-width: 0;
  text-align: left;
}

.vx-chip-text {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  color: #ffffff;
  white-space: normal;
  word-break: normal;
}

.vx-chip-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 4px;
  display: inline-block;
  margin-top: 2px;
  line-height: 1.35;
  letter-spacing: 0.02em;
}

.vx-chip-tag.tag-danger {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.4);
}

.vx-chip-tag.tag-warning {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.vx-chip-tag.tag-success {
  background: rgba(44, 250, 11, 0.2);
  color: #2cfa0b;
  border: 1px solid rgba(44, 250, 11, 0.4);
}

.vx-chip-tag.tag-info {
  background: rgba(6, 182, 212, 0.2);
  color: #06b6d4;
  border: 1px solid rgba(6, 182, 212, 0.4);
}

.vx-chip-tag.tag-secondary {
  background: rgba(168, 85, 247, 0.18);
  color: #d8b4fe;
  border: 1px solid rgba(168, 85, 247, 0.4);
}

.vx-chip-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  margin-left: 8px;
  color: transparent;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.vx-single-chip.active .vx-chip-check {
  background: #2cfa0b;
  border-color: #2cfa0b;
  color: #032411;
}

/* Base single chip for other steps (e.g. Step 4) */
.vx-single-chip {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.vx-single-chip:hover {
  background: rgba(255, 255, 255, 0.12);
}

.vx-single-chip.active {
  background: #2cfa0b !important;
  color: #081584 !important;
  font-weight: 700;
  border-color: #2cfa0b !important;
  box-shadow: 0 0 12px rgba(44, 250, 11, 0.45);
}

/* Rich Project Notes Textarea (Requirement 3: Increased Size) */
.vx-textarea-notes {
  min-height: 240px;
  line-height: 1.6;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  color: #f1f5f9;
  padding: 14px 16px;
  resize: vertical;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.vx-textarea-notes:focus {
  border-color: #2cfa0b;
  box-shadow: 0 0 14px rgba(44, 250, 11, 0.3);
  background: rgba(255, 255, 255, 0.07);
}

/* Footer Reassurance Line (Point 7) */
#vxModalReassurance {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.3;
}

/* Modal Footer Next Button Glass Wrap & Flashy States */
.vx-modal-next-wrap {
  display: inline-block !important;
  width: auto !important;
  vertical-align: middle;
}

.vx-modal-next-wrap.vx-hero-btn-glass-wrap {
  display: inline-block !important;
  width: auto !important;
  padding: 3px !important;
  border-radius: 999px !important;
  background: #041408 !important;
  box-shadow:
    0 0 14px 2px rgba(44, 250, 11, 0.6),
    0 0 26px 6px rgba(44, 250, 11, 0.3) !important;
  animation: vxWrapperGlowGreen 3.2s ease-in-out infinite !important;
}

.vx-modal-next-wrap.vx-hero-btn-glass-wrap .hero-btn-glass.vx-btn-submit {
  padding: 8px 24px !important;
  font-size: 14.5px !important;
  width: auto !important;
  display: inline-flex !important;
  border-radius: 999px !important;
}

.vx-modal-next-wrap:not(.vx-hero-btn-glass-wrap) {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  animation: none !important;
}

.vx-modal-next-wrap:not(.vx-hero-btn-glass-wrap)::after {
  display: none !important;
}

.vx-modal-next-wrap:not(.vx-hero-btn-glass-wrap) .vx-btn-submit {
  background: #2cfa0b !important;
  color: #032411 !important;
  border-radius: 8px !important;
  padding: 8px 22px !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(44, 250, 11, 0.3) !important;
  border: none !important;
  width: auto !important;
  display: inline-flex !important;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.vx-modal-next-wrap:not(.vx-hero-btn-glass-wrap) .vx-btn-submit:hover {
  background: #25d409 !important;
  box-shadow: 0 6px 18px rgba(44, 250, 11, 0.5) !important;
  transform: translateY(-1px);
}

@keyframes vxHighlightPulse {
  0% { box-shadow: 0 0 0 0 rgba(44, 250, 11, 0.7); }
  50% { box-shadow: 0 0 16px 4px rgba(44, 250, 11, 0.45); }
  100% { box-shadow: 0 0 0 0 rgba(44, 250, 11, 0); }
}
.vx-highlight-pulse {
  animation: vxHighlightPulse 1.2s ease;
  border-radius: 10px;
}

/* Modal Footer Actions */
.vx-modal-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(4, 9, 28, 0.95);
  flex-shrink: 0;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .vx-modal-overlay {
    padding: 0;
  }

  .vx-modal-container {
    max-height: 100vh;
    height: 100%;
    border-radius: 0;
    border: none;
  }

  .vx-modal-pain-grid {
    grid-template-columns: 1fr;
  }

  .vx-modal-service-grid {
    grid-template-columns: 1fr;
  }

  .vx-modal-title {
    font-size: 1.35rem;
  }
}