/* ── Survey Styles ────────────────────────────────────────────────
   Uses CSS variables from main.css:
     --ink, --ink-soft, --ink-muted, --warm-white, --cream, --sand,
     --accent, --accent-hover, --accent-light
   ─────────────────────────────────────────────────────────────── */

/* ── Button System ──────────────────────────────────────────────
   .button / .button-primary / .button-secondary now live in main.css
   ────────────────────────────────────────────────────────────── */

/* ── Shared Layout ──────────────────────────────────────────── */

.survey-landing,
.survey-wizard,
.survey-confirmation {
  max-width: 760px;
  margin: 0 auto;
  padding: 140px 32px 100px;
}

/* ── Landing Page ───────────────────────────────────────────── */

.survey-header {
  text-align: center;
  margin-bottom: 2rem;
}
.survey-header h1 {
  font-size: 2rem;
  color: var(--ink);
  margin-bottom: 0.75rem;
}
.survey-description {
  font-size: 1.1rem;
  color: var(--ink-soft);
  max-width: 600px;
  margin: 0 auto;
}

.survey-pricing {
  margin-top: 1rem;
}
.survey-price {
  display: inline-block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-light);
  padding: 0.35rem 1rem;
  border-radius: 6px;
}

.survey-price-vat {
  display: block;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--ink-muted);
  margin-top: 0.25rem;
}

.survey-intro {
  margin-bottom: 2rem;
  line-height: 1.7;
  color: var(--ink-soft);
}
.survey-intro ol,
.survey-intro ul {
  padding-left: 2rem;
  margin: 1rem 0;
}
.survey-intro ol li {
  padding-left: 0.35rem;
  margin-bottom: 0.4rem;
}

/* CTA */
.survey-cta {
  background: var(--cream);
  border: 1px solid var(--sand);
  border-radius: 10px;
  padding: 2rem;
  margin-bottom: 2.5rem;
  text-align: center;
}
.survey-cta h2 {
  font-size: 1.35rem;
  color: var(--ink);
  margin-bottom: 1rem;
}
.survey-cta p {
  color: var(--ink-soft);
  margin-bottom: 1.25rem;
}

/* Override centering for HTMX-loaded forms inside the CTA gate */
#survey-gate form,
#survey-gate .survey-checkout-form {
  text-align: left;
}

.survey-start-button {
  font-size: 1.1rem;
  padding: 0.85rem 2rem;
}

.survey-checkout-form {
  text-align: left;
  max-width: 420px;
  margin: 1.5rem auto 0;
}
.survey-checkout-form h3 {
  font-size: 1.1rem;
  margin-bottom: 1rem;
}
.survey-checkout-form .form-group {
  margin-bottom: 1rem;
}
.survey-checkout-form label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 0.3rem;
}
.survey-checkout-form input,
.survey-checkout-form select {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--sand);
  border-radius: 5px;
  font-family: inherit;
  font-size: 0.95rem;
  background: var(--warm-white);
  color: var(--ink);
}
.survey-checkout-form input:focus,
.survey-checkout-form select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}
.survey-checkout-note,
.survey-payment-note {
  margin-top: 0.75rem;
  color: var(--ink-muted);
}

/* Details & Section Overview */
.survey-details,
.survey-sections-overview {
  margin-bottom: 2rem;
}
.survey-details h3,
.survey-sections-overview h3 {
  font-size: 1.15rem;
  color: var(--ink);
  margin-bottom: 0.75rem;
}
.survey-details-list {
  list-style: none;
  padding: 0;
}
.survey-details-list li {
  padding: 0.6rem 0;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--sand);
}
.survey-details-list li:last-child {
  border-bottom: none;
}
.survey-sections-list {
  padding-left: 1.25rem;
}
.survey-sections-list li {
  padding: 0.5rem 0;
  color: var(--ink-soft);
}
.survey-sections-list li strong {
  color: var(--ink);
}
.survey-sections-list li p {
  margin: 0.2rem 0 0;
  font-size: 0.9rem;
}

/* ── Progress Indicator ─────────────────────────────────────── */

.survey-progress {
  margin-bottom: 2rem;
}

.survey-progress-bar {
  height: 6px;
  background: var(--sand);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 0.75rem;
}
.survey-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.4s ease;
}

.survey-progress-text {
  font-size: 0.9rem;
  color: var(--ink-muted);
  margin-bottom: 0.75rem;
}
.survey-progress-text strong {
  color: var(--ink);
}

.survey-progress-steps {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  flex-wrap: wrap;
}
.survey-progress-step {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border-radius: 50%;
  font-size: 0.8rem;
  border: 1px solid var(--sand);
  color: var(--ink-muted);
  background: var(--warm-white);
}
.survey-progress-step.completed {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent);
}
.survey-progress-step.current {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--warm-white);
}
.survey-progress-step-link {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: inherit;
  text-decoration: none;
}
.survey-progress-step:not(.current):hover {
  border-color: var(--accent);
  color: var(--accent);
  cursor: pointer;
}
.survey-progress-step.current {
  cursor: default;
}
.survey-progress-step-number {
  font-weight: 700;
  font-size: 0.75rem;
}
.survey-progress-step-title {
  display: none;
}

/* ── Section Page ───────────────────────────────────────────── */

.survey-section {
  margin-bottom: 2rem;
}

.survey-section-header {
  margin-bottom: 1.5rem;
}
.survey-section-header h1 {
  font-size: 1.65rem;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.survey-section-description {
  color: var(--ink-soft);
  font-size: 1rem;
}

.survey-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.survey-fieldset {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* ── Form Fields (card-style questions) ─────────────────────── */

.survey-field {
  background: var(--warm-white);
  border: 1px solid var(--sand);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.survey-field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}

.survey-field-label {
  display: block;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}
.survey-field-required {
  color: var(--accent);
  margin-left: 0.15rem;
}
.survey-field-help {
  display: block;
  font-size: 0.85rem;
  color: var(--ink-muted);
  margin-bottom: 0.6rem;
}

.survey-field-input {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--sand);
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.6;
  background: #fff;
  color: var(--ink);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.survey-field-input::placeholder {
  color: var(--ink-muted);
}
.survey-field-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}

.survey-field-textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--sand);
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.6;
  background: #fff;
  color: var(--ink);
  transition: border-color 0.2s, box-shadow 0.2s;
  min-height: 140px;
  resize: vertical;
}
.survey-field-textarea::placeholder {
  color: var(--ink-muted);
}
.survey-field-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}

select.survey-field-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2378716c' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2rem;
}

.survey-field-hint {
  display: block;
  font-size: 0.8rem;
  color: var(--ink-muted);
  margin-top: 0.35rem;
}

/* Error state */
.survey-field-error {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
}

/* ── Radio & Checkbox Options (selectable pills) ────────────── */

.survey-field-fieldset {
  border: none;
  padding: 0;
  margin: 0;
}
.survey-field-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.survey-field-option,
.survey-field-checkbox {
  position: relative;
}

.survey-field-option input[type="radio"],
.survey-field-option input[type="checkbox"],
.survey-field-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.survey-field-option-label,
.survey-field-checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 1rem;
  border: 1px solid var(--sand);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--ink-soft);
  background: #fff;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.survey-field-option-label:hover,
.survey-field-checkbox-label:hover {
  border-color: var(--ink-muted);
  color: var(--ink);
}

/* Custom radio indicator */
.survey-field-option-label::before {
  content: "";
  width: 18px;
  height: 18px;
  border: 2px solid var(--sand);
  border-radius: 50%;
  flex-shrink: 0;
  transition: border-color 0.15s, background 0.15s;
}

/* Custom checkbox indicator */
.survey-field-checkbox-label::before {
  content: "";
  width: 18px;
  height: 18px;
  border: 2px solid var(--sand);
  border-radius: 4px;
  flex-shrink: 0;
  transition: border-color 0.15s, background 0.15s;
}

/* Checked states */
.survey-field-option input[type="radio"]:checked + .survey-field-option-label,
.survey-field-option input[type="checkbox"]:checked + .survey-field-option-label,
.survey-field-checkbox input[type="checkbox"]:checked + .survey-field-checkbox-label {
  border-color: var(--accent);
  background: var(--accent-light);
  color: var(--ink);
}
.survey-field-option input[type="radio"]:checked + .survey-field-option-label::before {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: inset 0 0 0 3px #fff;
}
.survey-field-option input[type="checkbox"]:checked + .survey-field-option-label::before,
.survey-field-checkbox input[type="checkbox"]:checked + .survey-field-checkbox-label::before {
  border-color: var(--accent);
  background: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* Focus visible for keyboard nav */
.survey-field-option input:focus-visible + .survey-field-option-label,
.survey-field-checkbox input:focus-visible + .survey-field-checkbox-label {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Single checkbox (e.g. consent) */
.survey-field-checkbox-single {
  padding: 1rem 1.5rem;
}
.survey-field-checkbox-single label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.survey-field-checkbox-single input[type="checkbox"] {
  flex-shrink: 0;
  accent-color: var(--accent);
}
.survey-field-checkbox-single .survey-field-checkbox-label {
  border: none;
  padding: 0;
  border-radius: 0;
  background: transparent;
}
.survey-field-checkbox-single .survey-field-checkbox-label::before {
  display: none;
}

/* ── Navigation ─────────────────────────────────────────────── */

.survey-nav {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--sand);
}
.survey-nav-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.survey-nav-next {
  margin-left: auto;
}

/* ── Loading Spinner ────────────────────────────────────────── */

.survey-loading {
  text-align: center;
  margin-top: 0.75rem;
  color: var(--ink-muted);
  font-size: 0.9rem;
}
.survey-loading-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--sand);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: survey-spin 0.6s linear infinite;
  vertical-align: middle;
  margin-right: 0.4rem;
}
@keyframes survey-spin {
  to { transform: rotate(360deg); }
}

/* HTMX indicator visibility (overrides inline styles in templates) */
.htmx-indicator {
  display: none;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  display: block;
}

/* ── Review Page ────────────────────────────────────────────── */

.survey-review-page {
  /* inherits .survey-wizard layout */
}

.survey-review-header {
  margin-bottom: 2rem;
}
.survey-review-header h1 {
  font-size: 1.65rem;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.survey-review-description {
  color: var(--ink-soft);
}

.survey-review-section {
  margin-bottom: 1.75rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--sand);
}
.survey-review-section:last-of-type {
  border-bottom: none;
}

.survey-review-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.survey-review-section-header h2 {
  font-size: 1.2rem;
  color: var(--ink);
}

.survey-review-answers {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.survey-review-answer {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.survey-review-question {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.survey-review-value {
  font-size: 0.95rem;
  color: var(--ink);
  margin: 0;
}
.survey-review-placeholder {
  font-style: italic;
  color: var(--ink-muted);
}

/* Submit confirmation */
.survey-submit-form {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--sand);
}
.survey-submit-confirmation {
  margin-bottom: 1.5rem;
}
.survey-submit-checkbox {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.survey-submit-checkbox input {
  flex-shrink: 0;
  accent-color: var(--accent);
}
.survey-submit-button {
  font-size: 1.1rem;
}

/* ── Confirmation Page ──────────────────────────────────────── */

.survey-confirmation {
  text-align: center;
}
.survey-confirmation .survey-header h1 {
  color: var(--accent);
}

.survey-confirmation-content {
  text-align: left;
  background: var(--cream);
  border: 1px solid var(--sand);
  border-radius: 10px;
  padding: 2rem;
  margin-top: 1.5rem;
}
.confirmation-message h2 {
  font-size: 1.3rem;
  color: var(--ink);
  margin-bottom: 0.75rem;
}
.confirmation-message p {
  color: var(--ink-soft);
  margin-bottom: 1rem;
}
.confirmation-next-steps h3 {
  font-size: 1.05rem;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.confirmation-next-steps ol {
  padding-left: 1.25rem;
  color: var(--ink-soft);
}
.confirmation-next-steps li {
  padding: 0.3rem 0;
}
.confirmation-note {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--sand);
  font-size: 0.9rem;
  color: var(--ink-muted);
}

/* ── Step Badge & Section Header (WS3 design upgrade) ─────── */

.survey-section-header-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.survey-step-badge {
  width: 48px;
  height: 48px;
  background: var(--accent);
  color: var(--warm-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
}

.survey-section-header-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.survey-section-header-text h1 {
  margin-bottom: 0;
}

.survey-section-question-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ── Step Purpose Box ──────────────────────────────────────── */

.survey-step-purpose {
  background: var(--accent-light);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  padding: 16px 20px;
  margin-top: 4px;
}

.survey-step-purpose-label {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}

.survey-step-purpose p {
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0;
}

/* ── Question Wrapper & Numbering ──────────────────────────── */

.survey-question-wrapper {
  position: relative;
}

.survey-question-wrapper.required .survey-field {
  border-left: 4px solid var(--accent);
}

.survey-question-wrapper.optional .survey-field {
  border-left: 4px solid var(--sand);
  opacity: 0.85;
}

.survey-question-wrapper.optional .survey-field:focus-within {
  opacity: 1;
}

.survey-question-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.survey-q-number {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--ink-muted);
}

.survey-q-flag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 3px;
}

.survey-q-flag.required {
  background: var(--accent-light);
  color: var(--accent);
}

.survey-q-flag.optional {
  background: var(--cream);
  color: var(--ink-muted);
}

/* ── Responsive (< 600px) ──────────────────────────────────── */

@media (max-width: 900px) {
  .survey-landing,
  .survey-wizard,
  .survey-confirmation {
    padding-top: 120px;
  }
}

@media (max-width: 600px) {
  .survey-landing,
  .survey-wizard,
  .survey-confirmation {
    padding: 100px 20px 60px;
  }

  .survey-header h1,
  .survey-section-header h1,
  .survey-review-header h1 {
    font-size: 1.4rem;
  }

  .survey-cta {
    padding: 1.25rem;
  }

  .survey-field {
    padding: 1rem;
  }

  .survey-progress-steps {
    gap: 0.35rem;
  }
  .survey-progress-step {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.75rem;
  }

  .survey-nav-buttons {
    flex-direction: column;
  }
  .survey-nav-next {
    margin-left: 0;
    width: 100%;
  }
  .survey-nav-prev {
    width: 100%;
  }

  .survey-review-section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .survey-step-badge {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }

  .survey-section-header-row {
    gap: 12px;
  }
}