/**
 * Questionnaire - Modern Open Layout
 * No card container, full-page experience matching homepage
 */

/* ==========================================================================
   Variables
   ========================================================================== */
:root {
  --brand-500: #0ea5e9;
  --brand-600: #0284c7;
  --brand-50: #f0f9ff;
  --surface-50: #fafafa;
  --surface-200: #e5e5e5;
  --surface-400: #a3a3a3;
  --surface-500: #737373;
  --surface-600: #525252;
  --surface-900: #171717;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ==========================================================================
   Full Page Layout - No Card
   ========================================================================== */
body.page-template-questionnaire {
  background: #fff !important;
  min-height: 100vh;
}

body.page-template-questionnaire footer,
body.page-template-questionnaire .site-footer {
  display: none !important;
}

#questionnaire-page-holder {
  min-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px 24px;
  max-width: 900px;
  margin: 0 auto;
}

/* Back to Plan link (edit mode only) */
.q-back-to-plan {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--surface-500);
  text-decoration: none;
  margin-bottom: 32px;
  transition: color 0.2s;
}

.q-back-to-plan:hover {
  color: var(--brand-500);
}

.q-back-to-plan svg {
  flex-shrink: 0;
}

#questionnaire-page {
  width: 100%;
}

#questionnaire-page .gform_wrapper {
  margin: 0;
  padding: 0;
}

#questionnaire-page .gform_page {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
}

/* Stabilize layout - prevent jumping between questions of different lengths */
#questionnaire-page .gform_page_fields {
  min-height: 280px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

/* ==========================================================================
   Progress Widget - Fixed bottom right with label
   ========================================================================== */
.q-progress-widget {
  position: fixed;
  bottom: 32px;
  right: 32px;
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 100;
}

.q-progress-widget .ring-label {
  text-align: right;
  line-height: 1.3;
}

.q-progress-widget .label-main {
  display: block;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--surface-500);
}

.q-progress-widget .label-emphasis {
  display: block;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--surface-900);
}

.q-progress-widget .ring-circle {
  position: relative;
  width: 56px;
  height: 56px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.q-progress-widget svg {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
  width: 56px;
  height: 56px;
}

.q-progress-widget .ring-bg {
  fill: none;
  stroke: var(--surface-200);
  stroke-width: 4;
}

.q-progress-widget .ring-fill {
  fill: none;
  stroke: var(--brand-500);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 138; /* 2 * PI * 22 */
  stroke-dashoffset: 138;
  transition: stroke-dashoffset 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.q-progress-widget .ring-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  color: var(--surface-900);
}

/* Hide old pager elements if still present */
.q-pager-holder,
.q-pager,
.h1-title-q {
  display: none !important;
}

/* ==========================================================================
   Question - Bold Typography (sized to fit 2 lines max)
   ========================================================================== */
#questionnaire-page .gfield_label,
#questionnaire-page .gfield_label.gform-field-label {
  font-family: var(--font-sans) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--surface-900) !important;
  line-height: 1.3 !important;
  margin-bottom: 40px !important;
  display: block !important;
  text-align: left !important;
  letter-spacing: -0.02em !important;
  max-width: 680px !important;
}

@media (min-width: 640px) {
  #questionnaire-page .gfield_label,
  #questionnaire-page .gfield_label.gform-field-label {
    font-size: 32px !important;
  }
}

@media (min-width: 900px) {
  #questionnaire-page .gfield_label,
  #questionnaire-page .gfield_label.gform-field-label {
    font-size: 36px !important;
  }
}

#questionnaire-page .gfield_label::before {
  display: none !important;
}

/* ==========================================================================
   Radio Buttons - Large Horizontal Buttons
   ========================================================================== */
#questionnaire-page .gfield_radio,
#questionnaire-page .ginput_container_radio ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

#questionnaire-page .gfield_radio li,
#questionnaire-page .ginput_container_radio li {
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  width: auto !important;
}

#questionnaire-page .gfield_radio input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

#questionnaire-page .gfield_radio label,
#questionnaire-page .ginput_container_radio label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 20px 32px !important;
  font-family: var(--font-sans) !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  color: var(--surface-600) !important;
  background: transparent !important;
  border: 2px solid var(--surface-200) !important;
  border-radius: 60px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  margin: 0 !important;
}

/* Circle indicator before label text */
#questionnaire-page .gfield_radio label::before {
  content: '' !important;
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  border: 2px solid var(--surface-200) !important;
  border-radius: 50% !important;
  background: var(--surface-100) !important;
  box-shadow: inset 0 0 0 6px #fff !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
}

#questionnaire-page .gfield_radio label:hover {
  border-color: var(--brand-500) !important;
  color: var(--surface-900) !important;
}

#questionnaire-page .gfield_radio label:hover::before {
  border-color: var(--brand-500) !important;
}

#questionnaire-page .gfield_radio input[type="radio"]:checked + label {
  border-color: var(--brand-500) !important;
  background: var(--brand-50) !important;
  color: var(--surface-900) !important;
}

#questionnaire-page .gfield_radio input[type="radio"]:checked + label::before {
  border-color: var(--brand-500) !important;
  background: var(--brand-500) !important;
  box-shadow: inset 0 0 0 4px #fff !important;
}

/* ==========================================================================
   Checkboxes - Similar Large Style
   ========================================================================== */
#questionnaire-page .gfield_checkbox,
#questionnaire-page .ginput_container_checkbox ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

#questionnaire-page .gfield_checkbox li {
  margin: 0 !important;
  padding: 0 !important;
}

#questionnaire-page .gfield_checkbox input[type="checkbox"] {
  position: absolute !important;
  opacity: 0 !important;
}

#questionnaire-page .gfield_checkbox label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 14px 24px !important;
  font-family: var(--font-sans) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--surface-600) !important;
  background: transparent !important;
  border: 2px solid var(--surface-200) !important;
  border-radius: 60px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  margin: 0 !important;
}

#questionnaire-page .gfield_checkbox label::before {
  content: '' !important;
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  border: 2px solid var(--surface-300) !important;
  border-radius: 6px !important;
  background: #fff !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
}

#questionnaire-page .gfield_checkbox label:hover {
  border-color: var(--brand-500) !important;
}

#questionnaire-page .gfield_checkbox input[type="checkbox"]:checked + label {
  border-color: var(--brand-500) !important;
  background: var(--brand-50) !important;
  color: var(--surface-900) !important;
}

#questionnaire-page .gfield_checkbox input[type="checkbox"]:checked + label::before {
  border-color: var(--brand-500) !important;
  background: var(--brand-500) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") !important;
  background-size: 12px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* ==========================================================================
   Text Inputs & Selects - Minimal Underline Style
   ========================================================================== */
#questionnaire-page input[type="text"],
#questionnaire-page input[type="email"],
#questionnaire-page input[type="password"],
#questionnaire-page input[type="tel"],
#questionnaire-page textarea {
  width: 100% !important;
  max-width: 480px !important;
  padding: 16px 0 !important;
  font-family: var(--font-sans) !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  color: var(--surface-900) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid var(--surface-200) !important;
  border-radius: 0 !important;
  transition: all 0.2s ease !important;
}

#questionnaire-page input[type="text"]:focus,
#questionnaire-page input[type="email"]:focus,
#questionnaire-page input[type="password"]:focus,
#questionnaire-page input[type="tel"]:focus,
#questionnaire-page textarea:focus {
  outline: none !important;
  border-bottom-color: var(--brand-500) !important;
}

#questionnaire-page input::placeholder {
  color: var(--surface-400) !important;
}

#questionnaire-page select {
  width: 100% !important;
  max-width: 400px !important;
  padding: 18px 48px 18px 24px !important;
  font-family: var(--font-sans) !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  color: var(--surface-900) !important;
  background: var(--surface-50) !important;
  border: 2px solid var(--surface-200) !important;
  border-radius: 16px !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

#questionnaire-page select:hover {
  border-color: var(--brand-500) !important;
}

#questionnaire-page select:focus {
  outline: none !important;
  border-color: var(--brand-500) !important;
  background-color: #fff !important;
}

/* Hide redundant placeholder text in select */
#questionnaire-page select option:first-child {
  color: var(--surface-400) !important;
}

/* ==========================================================================
   Navigation - Fixed Bottom or Inline
   ========================================================================== */
#questionnaire-page .gform_page_footer {
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
  margin-top: 60px !important;
  padding-top: 0 !important;
}

#questionnaire-page .gform_page_footer img {
  display: none !important;
}

/* Hide previous button on first question (form skips to page 2) */
#questionnaire-page #gform_page_16_2 .gform_previous_button {
  display: none !important;
}

/* Previous - Simple text link */
#questionnaire-page .gform_previous_button {
  padding: 0 !important;
  font-family: var(--font-sans) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--surface-500) !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  transition: color 0.2s ease !important;
  background-image: none !important;
}

#questionnaire-page .gform_previous_button:hover {
  color: var(--surface-900) !important;
}

/* Next/Submit - Large pill button with arrow */
#questionnaire-page .gform_next_button,
#questionnaire-page .gform_button[type="submit"],
#questionnaire-page input[type="submit"] {
  padding: 18px 40px !important;
  font-family: var(--font-sans) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #fff !important;
  background: var(--surface-900) !important;
  border: none !important;
  border-radius: 60px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  background-image: none !important;
  position: relative !important;
}

#questionnaire-page .gform_next_button:hover,
#questionnaire-page .gform_button[type="submit"]:hover,
#questionnaire-page input[type="submit"]:hover {
  background: var(--brand-500) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 40px rgba(14, 165, 233, 0.3) !important;
}

/* ==========================================================================
   Form Layout
   ========================================================================== */
#questionnaire-page .gform_fields {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#questionnaire-page .gfield {
  margin: 0 0 32px 0 !important;
  padding: 0 !important;
}

#questionnaire-page .gfield:last-child {
  margin-bottom: 0 !important;
}

#questionnaire-page .gform_page_fields {
  margin-bottom: 0 !important;
}

/* ==========================================================================
   Validation
   ========================================================================== */
#questionnaire-page .gform_wrapper .validation_error,
#questionnaire-page .gform_wrapper .gform_validation_errors {
  background: #fef2f2 !important;
  border-left: 4px solid #ef4444 !important;
  border-radius: 0 !important;
  padding: 16px 20px !important;
  margin-bottom: 32px !important;
  color: #dc2626 !important;
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
}

#questionnaire-page .validation_message {
  color: #ef4444 !important;
  font-size: 14px !important;
  margin-top: 8px !important;
}

/* ==========================================================================
   HTML Content & Descriptions
   ========================================================================== */
#questionnaire-page .gfield_html {
  font-family: var(--font-sans) !important;
  color: var(--surface-600) !important;
  font-size: 18px !important;
  line-height: 1.7 !important;
  max-width: 600px !important;
}

#questionnaire-page .gfield_description {
  font-family: var(--font-sans) !important;
  color: var(--surface-500) !important;
  font-size: 15px !important;
  margin-top: 12px !important;
}

/* Password fields side by side */
#questionnaire-page .ginput_container_password {
  display: flex !important;
  gap: 24px !important;
  flex-wrap: wrap !important;
  max-width: 600px !important;
}

#questionnaire-page .ginput_container_password .ginput_left,
#questionnaire-page .ginput_container_password .ginput_right {
  flex: 1 !important;
  min-width: 200px !important;
}

#questionnaire-page .ginput_container_password input {
  max-width: none !important;
}

/* ==========================================================================
   Loading Spinner
   ========================================================================== */
#questionnaire-page .gform_ajax_spinner {
  display: inline-block !important;
  width: 24px !important;
  height: 24px !important;
  border: 3px solid var(--surface-200) !important;
  border-top-color: var(--brand-500) !important;
  border-radius: 50% !important;
  animation: spin 0.8s linear infinite !important;
  margin-left: 16px !important;
}

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

/* ==========================================================================
   Responsive
   ========================================================================== */
/* Hide keyboard hints on touch devices / smaller screens */
@media (max-width: 768px) {
  #questionnaire-page .gfield_radio label::after,
  #questionnaire-page .gfield_checkbox label[data-key]::after {
    display: none !important;
  }
}

@media (max-width: 768px) {
  #questionnaire-page-holder {
    padding: 40px 20px;
  }

  #questionnaire-page .gfield_label,
  #questionnaire-page .gfield_label.gform-field-label {
    font-size: 28px !important;
    margin-bottom: 36px !important;
  }

  #questionnaire-page .gfield_radio label,
  #questionnaire-page .ginput_container_radio label {
    padding: 16px 24px !important;
    font-size: 16px !important;
  }

  #questionnaire-page .gfield_radio label::before {
    width: 20px !important;
    height: 20px !important;
  }

  #questionnaire-page input[type="text"],
  #questionnaire-page input[type="email"],
  #questionnaire-page select {
    font-size: 18px !important;
  }

  #questionnaire-page .gform_page_footer {
    margin-top: 48px !important;
  }
}

@media (max-width: 480px) {
  #questionnaire-page .gfield_label,
  #questionnaire-page .gfield_label.gform-field-label {
    font-size: 24px !important;
  }

  #questionnaire-page .gfield_radio,
  #questionnaire-page .ginput_container_radio ul {
    flex-direction: column !important;
  }

  #questionnaire-page .gfield_radio label,
  #questionnaire-page .ginput_container_radio label {
    width: 100% !important;
    justify-content: flex-start !important;
  }

  #questionnaire-page .gform_next_button,
  #questionnaire-page .gform_button[type="submit"],
  #questionnaire-page input[type="submit"] {
    width: 100% !important;
    text-align: center !important;
  }

  #questionnaire-page .gform_page_footer {
    flex-direction: column-reverse !important;
    gap: 16px !important;
  }
}

/* ==========================================================================
   Gravity Forms Overrides
   ========================================================================== */
#questionnaire-page .gform_wrapper.gravity-theme .gform_fields {
  grid-row-gap: 0 !important;
}

#questionnaire-page .gform_wrapper.gravity-theme .gfield {
  grid-column: span 12 !important;
}

#questionnaire-page .gform_wrapper.gravity-theme .ginput_container {
  margin-top: 0 !important;
}

#questionnaire-page .gf_page_steps {
  display: none !important;
}

/* ==========================================================================
   Keyboard shortcut hint (optional enhancement)
   ========================================================================== */
#questionnaire-page .gfield_radio label::after,
#questionnaire-page .gfield_checkbox label[data-key]::after {
  content: attr(data-key);
  display: inline-block;
  margin-left: auto;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--surface-400);
  background: var(--surface-50);
  border-radius: 4px;
}

/* ==========================================================================
   Building Your Plan - Loading Overlay
   Clean, minimal design matching site aesthetic
   ========================================================================== */
.building-plan-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.building-plan-overlay.visible {
  opacity: 1;
}

.building-plan-content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Subtle animated background gradient */
.building-plan-content::before {
  content: '';
  position: absolute;
  inset: -50%;
  background:
    radial-gradient(circle at 20% 30%, rgba(14, 165, 233, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(249, 115, 22, 0.06) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(14, 165, 233, 0.04) 0%, transparent 70%);
  animation: gradient-shift 8s ease-in-out infinite;
}

@keyframes gradient-shift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(2%, 2%) rotate(3deg); }
}

/* Floating elements - subtle document icons */
.particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.particle {
  position: absolute;
  width: 40px;
  height: 48px;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.08) 0%, rgba(14, 165, 233, 0.04) 100%);
  border-radius: 4px;
  animation: float-document 12s infinite ease-in-out;
}

/* Add document-like appearance */
.particle::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 6px;
  right: 6px;
  height: 2px;
  background: rgba(14, 165, 233, 0.15);
  border-radius: 1px;
  box-shadow:
    0 6px 0 rgba(14, 165, 233, 0.12),
    0 12px 0 rgba(14, 165, 233, 0.09),
    0 18px 0 rgba(14, 165, 233, 0.06);
}

.particle:nth-child(1) { left: 8%; top: 15%; animation-delay: 0s; }
.particle:nth-child(2) { left: 85%; top: 20%; animation-delay: 2s; }
.particle:nth-child(3) { left: 75%; top: 75%; animation-delay: 4s; }
.particle:nth-child(4) { left: 15%; top: 70%; animation-delay: 1s; }
.particle:nth-child(5) { left: 50%; top: 8%; animation-delay: 3s; transform: scale(0.8); }
.particle:nth-child(6) { left: 92%; top: 50%; animation-delay: 5s; transform: scale(0.7); }
.particle:nth-child(7) { left: 5%; top: 45%; animation-delay: 2.5s; transform: scale(0.9); }
.particle:nth-child(8) { left: 60%; top: 85%; animation-delay: 1.5s; transform: scale(0.75); }

@keyframes float-document {
  0%, 100% {
    transform: translateY(0) rotate(-2deg);
    opacity: 0.6;
  }
  50% {
    transform: translateY(-20px) rotate(2deg);
    opacity: 0.8;
  }
}

/* Hide the rings on this design */
.loading-rings {
  display: none;
}

/* Center content */
.loading-center {
  position: relative;
  z-index: 10;
  text-align: center;
  max-width: 440px;
  padding: 48px 32px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 24px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.08);
}

.loading-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 24px;
  background: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 40px -10px rgba(14, 165, 233, 0.5);
  animation: icon-breathe 3s ease-in-out infinite;
}

.loading-icon svg {
  width: 36px;
  height: 36px;
  color: white;
}

@keyframes icon-breathe {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 10px 40px -10px rgba(14, 165, 233, 0.5);
  }
  50% {
    transform: scale(1.03);
    box-shadow: 0 15px 50px -10px rgba(14, 165, 233, 0.4);
  }
}

.loading-title {
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 700;
  color: var(--surface-900);
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}

.loading-subtitle {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--surface-500);
  margin: 0 0 32px;
  min-height: 22px;
}

/* Progress bar */
.loading-progress {
  width: 100%;
  height: 8px;
  background: var(--surface-100);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 28px;
}

.loading-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #0ea5e9, #38bdf8);
  border-radius: 4px;
  transition: width 0.4s ease;
  position: relative;
}

.loading-progress-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: progress-shine 1.5s ease-in-out infinite;
}

@keyframes progress-shine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Loading steps */
.loading-steps {
  text-align: left;
}

.loading-step {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  transition: all 0.3s ease;
}

.loading-step:not(.active):not(.completed) {
  opacity: 0.4;
}

.loading-step.active,
.loading-step.completed {
  opacity: 1;
}

.step-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-100);
  border: 2px solid var(--surface-200);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--surface-400);
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.loading-step.active .step-icon {
  background: #fff;
  border-color: #0ea5e9;
  color: #0ea5e9;
  box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.1);
  animation: step-pulse 1.5s ease-in-out infinite;
}

.loading-step.completed .step-icon {
  background: #10b981;
  border-color: #10b981;
  color: white;
}

@keyframes step-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.1); }
  50% { box-shadow: 0 0 0 8px rgba(14, 165, 233, 0.05); }
}

.step-text {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--surface-600);
}

.loading-step.active .step-text {
  color: var(--surface-900);
}

.loading-step.completed .step-text {
  color: var(--surface-500);
}

/* Responsive */
@media (max-width: 480px) {
  .loading-center {
    margin: 16px;
    padding: 32px 24px;
  }

  .loading-title {
    font-size: 24px;
  }

  .loading-icon {
    width: 60px;
    height: 60px;
    border-radius: 14px;
  }

  .loading-icon svg {
    width: 30px;
    height: 30px;
  }

  .particle {
    display: none;
  }

  .particle:nth-child(1),
  .particle:nth-child(3) {
    display: block;
  }
}