/* =====================================================
   Aiternos Client Forms — Form Styles
   form.css — Steps, progress bar, inputs, options
   ===================================================== */

/* ── Progress Bar ── */
.form-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  height: 3px;
  background: var(--color-border);
}

.form-progress__fill {
  height: 100%;
  background: linear-gradient(135deg, #1a3aff, #00cfff);
  border-radius: 0 var(--radius-full) var(--radius-full) 0;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Step Indicator ── */
.step-indicator {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  gap: 0;
}

.step-indicator__item {
  display: flex;
  align-items: center;
}

/* State 2 — Not yet visited (default) */
.step-indicator__circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  font-weight: 600;
  border: none;
  background: #e5e7eb;
  color: #9ca3af;
  transition:
    width 0.25s ease,
    height 0.25s ease,
    font-size 0.25s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  cursor: default;
  user-select: none;
}

/* State 1 — Current step */
.step-indicator__circle.active {
  background: linear-gradient(135deg, #1a3aff, #00cfff);
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 0 12px rgba(0, 207, 255, 0.4);
  cursor: default;
}

/* State 3 — Completed */
.step-indicator__circle.complete {
  background: #22c55e;
  color: #fff;
  cursor: pointer;
}

.step-indicator__circle.complete::after {
  content: "";
  display: block;
  width: 10px;
  height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}

.step-indicator__circle.complete .step-num {
  display: none;
}

/* State 4 — Completed, currently editing an earlier step */
.step-indicator__circle.complete-pending {
  background: #ffffff;
  border: 2px solid #22c55e;
  color: #22c55e;
  cursor: pointer;
}

.step-indicator__circle.complete-pending::after {
  content: "";
  display: block;
  width: 10px;
  height: 6px;
  border-left: 2px solid #22c55e;
  border-bottom: 2px solid #22c55e;
  transform: rotate(-45deg) translate(1px, -1px);
}

.step-indicator__circle.complete-pending .step-num {
  display: none;
}

/* Hover scale on clickable circles (State 3 & 4) */
.step-indicator__circle.complete:hover,
.step-indicator__circle.complete-pending:hover {
  transform: scale(1.1);
}

/* ── Connector lines ── */
.step-indicator__connector {
  height: 2px;
  flex: 1;
  background: #e5e7eb;
  transition: background 0.2s ease;
}

/* Both endpoints completed (State 3 or 4) */
.step-indicator__connector.complete {
  background: #22c55e;
}

/* Left=completed, right=current */
.step-indicator__connector.partial {
  background: linear-gradient(90deg, #22c55e, #00cfff);
}

/* ── Step tooltip ── */
.step-indicator__label {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-secondary);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  background: var(--color-bg);
  padding: 3px 8px;
  border-radius: 4px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.step-indicator__circle:hover .step-indicator__label {
  opacity: 1;
}

/* ── Step Indicator sticky wrap ── */
.step-indicator-sentinel {
  height: 1px;
  margin-bottom: -1px;
  visibility: hidden;
  pointer-events: none;
}

.step-indicator-wrap {
  position: sticky;
  top: 65px;
  z-index: 50;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
  /* Spacing lives here (constant) instead of on the inner .step-indicator,
     which used to drop its margin when sticky and caused the content jump. */
  margin-bottom: var(--space-10);
  padding: 10px 28px;
  transition:
    background 0.25s ease,
    box-shadow 0.25s ease,
    border-bottom-color 0.25s ease,
    border-radius 0.25s ease;
  border-bottom: 1px solid transparent;
}

.step-indicator-wrap.is-sticky {
  background: #ffffff;
  border-bottom-color: #e5e7eb;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
  border-radius: 0 0 20px 20px;
}

/* ── Form Shell ── */
.form-shell {
  max-width: 1000px;
  margin: 0 auto;
  padding: var(--space-12) var(--space-8);
  background: var(--color-bg);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(0, 207, 255, 0.35);
  box-shadow:
    0 4px 32px rgba(0, 207, 255, 0.13),
    0 1px 8px rgba(0, 207, 255, 0.08);
}

/* ── Form Step ── */
.form-step {
  display: none;
  animation: fadeSlideIn 0.3s ease;
}

.form-step.active {
  display: block;
}

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

/* ── Step Header ── */
.step-header {
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.step-header__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-primary-dark);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: var(--space-3);
}

.step-header__tag::before {
  content: "";
  width: 16px;
  height: 2px;
  background: var(--color-primary);
  border-radius: 1px;
}

.step-header h2 {
  margin-bottom: var(--space-2);
}

.step-header p {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
}

/* ── 2-column field grid (Step 1) ── */
.fields-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-8);
}

.fields-2col .question-block {
  margin-bottom: 0;
}

.question-block--span2 {
  grid-column: 1 / -1;
}

/* ── Question Block ── */
.question-block {
  margin-bottom: 42px;
}

.question-block:last-child {
  margin-bottom: 0;
}

.question-label {
  display: block;
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--space-2);
  line-height: 1.5;
}

.question-label .required-star {
  color: #00cfff;
  margin-left: 3px;
}

.question-helper {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
  margin-top: -4px;
  line-height: 1.5;
}

/* ── Text Inputs ── */
.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 11px var(--space-4);
  border: none;
  border-radius: calc(var(--radius-md) - 1px);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  transition: var(--transition);
  appearance: none;
  -webkit-appearance: none;
  display: block;
}

.form-input {
  background: #fafbfd;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-placeholder);
}

.form-input:hover {
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px var(--color-primary-alpha);
}

.form-input:focus {
  outline: none;
  border-color: #1a3aff;
  box-shadow: 0 0 0 3px rgba(26, 58, 255, 0.12);
}

.form-select:focus,
.form-textarea:focus {
  outline: none;
}

.form-input.error,
.form-textarea.error {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px var(--color-error-soft);
}

.form-select.error {
  box-shadow: 0 0 0 3px var(--color-error-soft);
}

.form-textarea {
  min-height: 100px;
  resize: vertical;
}

/* Select wrapper — gradient border container + custom arrow */
.form-select-wrap {
  position: relative;
  padding: 1px;
  background: #e5e7eb;
  border-radius: var(--radius-md);
  transition: background 0.2s ease;
}

/* Subtle hover: slightly darker grey ring */
.form-select-wrap:hover:not(:focus-within):not(.has-value) {
  background: #d1d5db;
}

/* Gradient ring on focus */
.form-select-wrap:focus-within {
  background: linear-gradient(135deg, #1a3aff, #00cfff);
}

/* Gradient ring persists while a value is selected */
.form-select-wrap.has-value {
  background: linear-gradient(135deg, #1a3aff, #00cfff);
}

/* Inner select background matches option-card checked tint */
.form-select-wrap.has-value .form-select {
  background: var(--color-option-checked-bg);
}

.form-select-wrap::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--color-text-secondary);
  pointer-events: none;
}

/* Textarea char counter */
.char-counter {
  display: flex;
  justify-content: flex-end;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-top: 4px;
  margin-bottom: 0;
}

/* Textarea question blocks carry ~20px of extra visual height from the counter.
   Pull the block's own bottom margin back by that amount so the gap to the
   next question matches every other question type (which sits at 42px). */
.question-block:has(.char-counter) {
  margin-bottom: 22px;
}

.char-counter.near-limit {
  color: var(--color-warning);
}

.char-counter.at-limit {
  color: var(--color-error);
}

/* ── Error Message ── */
.field-error {
  display: none;
  font-size: var(--font-size-sm);
  color: var(--color-error);
  margin-top: 5px;
}

.field-error.visible {
  display: block;
}

/* ── Option Cards (Multi-select / Single-select) ── */
.options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-3);
}

.options-grid--2col {
  grid-template-columns: repeat(2, 1fr);
}

.options-grid--1col {
  grid-template-columns: 1fr;
}

.option-card {
  position: relative;
}

/* Exclusive-option uncheck fade */
@keyframes exclusive-uncheck {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  35% {
    opacity: 0.3;
    transform: scale(0.97);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.option-card.exclusive-fade {
  animation: exclusive-uncheck 0.35s ease;
  pointer-events: none;
}

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

.option-card__label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition);
  background: var(--color-bg);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.4;
  min-height: 48px;
}

.option-card__label:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

/* Custom checkbox/radio indicator */
.option-card__check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-bg);
  transition: var(--transition);
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.option-card--radio .option-card__check {
  border-radius: 50%;
}

/* Selected state — card border */
.option-card input:checked + .option-card__label {
  border: 1px solid transparent;
  background-image:
    linear-gradient(
      var(--color-option-checked-bg),
      var(--color-option-checked-bg)
    ),
    linear-gradient(135deg, #1a3aff, #00cfff);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  padding-left: var(--space-4);
}

/* Checkbox indicator — full gradient fill, white checkmark on top */
.option-card
  input[type="checkbox"]:checked
  + .option-card__label
  .option-card__check {
  background: linear-gradient(135deg, #1a3aff, #00cfff);
  border: none;
}

/* Checkmark inside checkbox indicator */
.option-card
  input[type="checkbox"]:checked
  + .option-card__label
  .option-card__check::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 5px;
  border-left: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  transform: translate(-50%, calc(-50% - 1px)) rotate(-45deg);
}

/* Radio indicator — gradient border ring, white bg, gradient dot inside */
.option-card
  input[type="radio"]:checked
  + .option-card__label
  .option-card__check {
  background: var(--color-bg);
  border: 2px solid #00cfff;
}

/* Radio dot — gradient disc, no border, clean circle */
.option-card
  input[type="radio"]:checked
  + .option-card__label
  .option-card__check::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1a3aff, #00cfff);
  transform: translate(-50%, -50%);
}

/* Focus ring */
.option-card input:focus-visible + .option-card__label {
  box-shadow: 0 0 0 3px var(--color-primary-alpha);
}

/* ── Inline "Other" text input ── */
/* Standard input wrapper + "Other" conditional input wrapper
   Both provide the 1px gradient-border-on-focus technique.
   .other-input-wrap keeps its margin-top separately below. */
.input-wrap,
.other-input-wrap {
  padding: 1px;
  background: #d1d5db;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.other-input-wrap {
  margin-top: var(--space-3);
}

.input-wrap:hover:not(:focus-within):not(.has-value),
.other-input-wrap:hover:not(:focus-within) {
  background: #c4c9d4;
}

.input-wrap:focus-within,
.other-input-wrap:focus-within {
  background: linear-gradient(135deg, #1a3aff, #00cfff);
}

.input-wrap.has-value {
  background: linear-gradient(135deg, #1a3aff, #00cfff);
}

/* Structural overrides for inputs inside wrappers — let .form-input drive all visual styles */
.input-wrap .form-input,
.other-input-wrap .form-input {
  border: none;
  border-radius: calc(var(--radius-md) - 1px);
}

/* Cancel box-shadow/border from .form-input:hover and :focus on wrapped inputs —
   the wrapper's :focus-within / .has-value gradient is the visual indicator */
.input-wrap .form-input:hover,
.input-wrap .form-input:focus {
  box-shadow: none;
  border-color: transparent;
  outline: none;
}

/* ── Phone field (intl-tel-input) ── */
/* The .iti container fills the wrapper so the 1px gradient border frames the whole control */
.input-wrap .iti {
  display: block;
  width: 100%;
}

/* Inner number input keeps the standard .form-input look */
.input-wrap .iti .form-input {
  border: none;
  border-radius: calc(var(--radius-md) - 1px);
}

/* Flag + dial-code button on the left, divided from the number with a 1px border */
.iti__selected-flag {
  padding: 0 8px 0 12px;
  background: var(--color-surface-alt);
  border-right: 1px solid var(--color-border);
  border-top-left-radius: calc(var(--radius-md) - 1px);
  border-bottom-left-radius: calc(var(--radius-md) - 1px);
}
.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag,
.iti__selected-flag:focus {
  background: var(--color-surface-alt);
  outline: none;
}

/* Separate dial code text matches the input font */
.iti__selected-dial-code {
  margin-left: 6px;
  color: var(--color-text);
  font-size: var(--font-size-base);
}

/* Country dropdown — 1px border, themed surface */
.iti__country-list {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  box-shadow: var(--shadow-lg);
}
.iti__country.iti__highlight {
  background-color: var(--color-option-checked-bg);
}
.iti__dial-code {
  color: var(--color-text-secondary);
}
.iti__divider {
  border-bottom: 1px solid var(--color-border);
}

/* Textarea gradient-border wrapper */
.textarea-wrap {
  padding: 1px;
  background: #d1d5db;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.textarea-wrap:focus-within {
  background: linear-gradient(135deg, #1a3aff, #00cfff);
}

.textarea-wrap .form-textarea {
  border: none;
  border-radius: 7px;
  background: #fafbfd;
  width: 100%;
}

/* ── URL Chip Field ── */
/* Container — looks like a text input, wraps chips + inline text input */
.url-chip-field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 46px;
  padding: 7px 12px;
  border: 1.5px solid #d1d5db;
  border-radius: var(--radius-md);
  background: #fafbfd;
  cursor: text;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.url-chip-field:hover {
  border-color: #b0b8c9;
}

.url-chip-field:focus-within {
  border-color: #1a3aff;
  outline: none;
}

/* The inline text input inside the chip field */
.url-chip-field__input {
  flex: 1;
  min-width: 180px;
  border: none;
  outline: none;
  background: transparent;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  padding: 3px 0;
  font-family: var(--font-family);
  line-height: 1.5;
}

.url-chip-field__input::placeholder {
  color: var(--color-placeholder);
}

/* URL chip pill — gradient border via double-background */
.url-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: var(--font-size-xs);
  font-weight: 500;
  border: 1px solid transparent;
  background-image:
    linear-gradient(rgba(0, 207, 255, 0.06), rgba(0, 207, 255, 0.06)),
    linear-gradient(135deg, #1a3aff, #00cfff);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  color: #ffffff;
  max-width: 260px;
  flex-shrink: 0;
}

.url-chip__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}

.url-chip__remove {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.65);
  font-size: 15px;
  line-height: 1;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
  transition:
    color 0.15s ease,
    background 0.15s ease;
}

.url-chip__remove:hover {
  color: #ffffff;
  background: rgba(0, 0, 0, 0.22);
}

/* Dark mode */
[data-theme="dark"] .url-chip-field {
  background: var(--color-page-bg);
  border-color: #3A4170;
}

[data-theme="dark"] .url-chip-field:hover {
  border-color: #4A5290;
}

[data-theme="dark"] .url-chip-field:focus-within {
  border-color: #1a3aff;
}

[data-theme="dark"] .url-chip-field__input {
  color: var(--color-text);
}

[data-theme="dark"] .url-chip {
  background-image:
    linear-gradient(rgba(26, 58, 255, 0.15), rgba(26, 58, 255, 0.15)),
    linear-gradient(135deg, #1a3aff, #00cfff);
  color: #ffffff;
}

/* ── Dropdown select (styled) ── */

/* ── Slider ── */
.slider-wrap {
  padding: var(--space-2) 0;
}

.slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.slider-labels span {
  font-weight: 500;
}

.slider-helper {
  font-size: 11px;
  color: #9ca3af;
  margin: 0 0 var(--space-2);
}

.form-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-border);
  outline: none;
  cursor: pointer;
}

.form-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-primary);
  cursor: pointer;
  border: 3px solid #fff;
  box-shadow:
    0 0 0 2px var(--color-primary),
    0 2px 6px rgba(0, 207, 255, 0.3);
  transition: var(--transition);
}

.form-slider::-webkit-slider-thumb:hover {
  box-shadow:
    0 0 0 4px var(--color-primary-alpha),
    0 2px 6px rgba(0, 207, 255, 0.4);
}

.form-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-primary);
  cursor: pointer;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--color-primary);
}

/* ── File Upload ── */
.file-upload-zone {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
  background: #fafbfd;
}

/* Mini variant — secondary, optional uploads (e.g. brand colours image) */
.file-upload-zone--mini {
  padding: var(--space-3) var(--space-5);
  min-height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: var(--radius-md);
}

/* Container + sub-label for the colour image upload section */
.color-image-upload {
  margin-top: var(--space-4);
}

.color-upload-label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-1);
}

.file-upload-zone:hover,
.file-upload-zone.drag-over {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.file-upload-zone input[type="file"] {
  display: none;
}

.file-upload-zone__icon {
  font-size: 32px;
  margin-bottom: var(--space-3);
  opacity: 0.5;
}

.file-upload-zone__text {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.file-upload-zone__text strong {
  color: var(--color-primary-dark);
}

.file-upload-zone__hint {
  font-size: var(--font-size-xs);
  color: var(--color-placeholder);
  margin-top: var(--space-2);
}

.file-upload-preview {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background-image:
    linear-gradient(var(--color-option-checked-bg), var(--color-option-checked-bg)),
    linear-gradient(135deg, #1a3aff, #00cfff);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  margin-top: var(--space-3);
}

.file-upload-preview__name {
  flex: 1;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: transparent;
}

.file-upload-preview__remove {
  border: none;
  background: none;
  color: var(--color-error);
  cursor: pointer;
  font-size: 18px;
  padding: 0;
  line-height: 1;
}

/* ── Photo Rating Card ── */
.photo-rating-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg);
  box-shadow: var(--shadow-sm);
}

.photo-rating-card__img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  display: block;
}

.rating-card__media {
  position: relative;
}

.card-sequence-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  font-size: 11px;
  font-weight: 600;
  color: #ffffff;
  background: linear-gradient(135deg, #1a3aff, #00cfff);
  border-radius: 20px;
  padding: 3px 10px;
  pointer-events: none;
}

.photo-rating-card__body {
  padding: var(--space-5);
}

.photo-rating-card__body .textarea-wrap {
  background: #e5e7eb;
}

.photo-rating-card__body .textarea-wrap .form-textarea {
  background: #fafbfd;
  border-radius: 7px;
}

.photo-rating-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

/* ── Video Rating Card ── */
.video-rating-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-5);
}

.video-rating-card__embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  background: #000;
}

.video-rating-card__embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-rating-card__body {
  padding: var(--space-5);
}

.video-rating-card__title {
  font-weight: 600;
  margin-bottom: var(--space-4);
}

/* ── Presenter Tone Pills ── */
.tone-pill-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.tone-pill-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.tone-pill-row__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text);
}

.tone-pill-row__sep {
  color: var(--color-text-secondary);
  font-weight: 400;
}

.tone-pill-row__pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tone-pill {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  border: 1.5px solid #d1d5db;
  background: #fafbfd;
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--color-text-secondary);
  cursor: pointer;
  text-align: center;
  transition:
    border-color 0.15s,
    background 0.15s,
    color 0.15s;
  white-space: nowrap;
}

.tone-pill:hover:not(.tone-pill--active) {
  border-color: #b0b8c9;
  background: rgba(26, 58, 255, 0.04);
  color: var(--color-text);
}

.tone-pill--active {
  border: 1.5px solid transparent;
  background-image:
    linear-gradient(rgba(0, 207, 255, 0.08), rgba(0, 207, 255, 0.08)),
    linear-gradient(135deg, #1a3aff, #00cfff);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  color: #ffffff;
  font-weight: 600;
}

@media (max-width: 640px) {
  .tone-pill {
    font-size: 11px;
    padding: 6px 8px;
  }
}

/* ── Form Navigation (Prev/Next) ── */
.form-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  gap: var(--space-4);
}

.form-nav__left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.form-nav__step-info {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* ── Review Screen ── */
.review-section {
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-5);
}

.review-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  background: var(--color-primary-soft);
  border-bottom: 1px solid var(--color-primary);
  cursor: pointer;
}

.review-section__header h4 {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-text);
}

.review-section__toggle {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--color-text-secondary);
  transition: var(--transition-fast);
  font-size: 18px;
  line-height: 1;
}

.review-section__toggle.open {
  transform: rotate(180deg);
}

.review-section__body {
  padding: var(--space-5);
}

.review-section__body.collapsed {
  display: none;
}

.review-item {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-4);
  align-items: baseline;
}

.review-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.review-item__q {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  font-weight: 500;
}

.review-item__a {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  font-weight: 500;
}

.review-edit-btn {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-primary-dark);
  background: none;
  border: none;
  cursor: pointer;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
}

.review-edit-btn:hover {
  background: var(--color-primary-soft);
}

/* ── Confirmation Checkbox ── */
.confirmation-block {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  margin: var(--space-6) 0;
}

.confirmation-checkbox {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  cursor: pointer;
}

.confirmation-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.confirmation-checkbox__box {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-bg);
  transition: var(--transition);
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.confirmation-checkbox input:checked + .confirmation-checkbox__box {
  background: linear-gradient(135deg, #1a3aff, #00cfff);
  border: none;
}

.confirmation-checkbox input:checked + .confirmation-checkbox__box::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 6px;
  border-left: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  transform: translate(-50%, calc(-50% - 1px)) rotate(-45deg);
}

.confirmation-checkbox__text {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* ── Clear form ── */
.form-clear-wrap {
  text-align: center;
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.form-clear-btn {
  background: none;
  border: none;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  cursor: pointer;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  transition:
    color 0.2s ease,
    opacity 0.2s ease,
    text-decoration-color 0.2s ease;
  opacity: 0.55;
  font-family: var(--font-family);
  text-decoration: none;
}

.form-clear-btn:hover {
  opacity: 1;
  color: #00cfff;
  text-decoration: underline;
  text-decoration-color: #00cfff;
}

/* ── Thank You Screen ── */
.thankyou-screen {
  text-align: center;
  padding: var(--space-16) var(--space-5);
  display: none;
}

.thankyou-screen.active {
  display: block;
}

.thankyou-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--color-success-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-6);
  font-size: 32px;
}

.thankyou-screen h1 {
  margin-bottom: var(--space-4);
}

.thankyou-screen p {
  max-width: 460px;
  margin: 0 auto;
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
}

/* ── Honeypot (keep invisible) ── */
#honeypot,
.honeypot-field {
  display: none !important;
  position: absolute;
  left: -9999px;
}

/* ── Invalid link screen ── */
.invalid-link-screen {
  text-align: center;
  padding: var(--space-16) var(--space-5);
}

.invalid-link-icon {
  font-size: 48px;
  margin-bottom: var(--space-5);
  opacity: 0.4;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .photo-rating-cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .form-shell {
    border-radius: 0;
    border: none;
    box-shadow: none;
    padding: var(--space-5) var(--space-4);
  }

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

  .options-grid {
    grid-template-columns: 1fr;
  }

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

  .photo-rating-cards {
    grid-template-columns: 1fr;
  }

  .review-item {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
}

@media (max-width: 767px) {
  .form-nav {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
  }

  /* Dissolve the left group — back button and step-info become direct flex children */
  .form-nav__left {
    display: contents;
  }

  .form-nav .btn--ghost {
    order: 1;
    width: auto;
    flex-shrink: 0;
  }

  .form-nav .btn--primary {
    order: 2;
    flex: 1;
    justify-content: center;
    font-size: 13px;
    padding: 12px 16px;
    white-space: normal;
    text-align: center;
  }

  .form-nav__step-info {
    order: 3;
    width: 100%;
    text-align: center;
  }

  .tone-pill-row__pills {
    flex-direction: column;
    gap: 6px;
  }

  .tone-pill {
    flex: none;
    width: 100%;
    white-space: normal;
  }

  .slider-labels {
    flex-direction: column;
    gap: 2px;
  }
}

/* ═══════════════════════════════════════════════════
   Dark Mode Overrides — Form-specific
   ═══════════════════════════════════════════════════ */

/* Lift the default border token in dark mode so resting-state borders
   (cards, dividers, checkboxes, review rows, etc.) are clearly visible.
   Scoped to form.css, so admin (admin.css) is unaffected. */
[data-theme="dark"] {
  --color-border: #3A4170;
}

/* Form shell: softer glow on dark background */
[data-theme="dark"] .form-shell {
  border-color: rgba(0, 207, 255, 0.32);
  box-shadow:
    0 4px 24px rgba(0, 207, 255, 0.08),
    0 1px 4px rgba(0, 0, 0, 0.4);
}

/* State 2 — unvisited */
[data-theme="dark"] .step-indicator-wrap.is-sticky {
  background: #13162a;
  border-bottom-color: #3A4170;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .step-indicator__circle {
  background: #2a3060;
  color: #6b7aad;
}

/* Connector */
[data-theme="dark"] .step-indicator__connector {
  background: #2a3060;
}

/* State 3 — completed */
[data-theme="dark"] .step-indicator__circle.complete {
  background: #22c55e;
  color: #ffffff;
}

/* State 1 — active */
[data-theme="dark"] .step-indicator__circle.active {
  background: linear-gradient(135deg, #1a3aff, #00cfff);
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 0 12px rgba(0, 207, 255, 0.4);
}

/* State 4 — completed-pending (editing earlier step) */
[data-theme="dark"] .step-indicator__circle.complete-pending {
  background: #13162a;
  border-color: #22c55e;
  color: #22c55e;
}

[data-theme="dark"] .step-indicator__circle.complete-pending::after {
  border-left-color: #22c55e;
  border-bottom-color: #22c55e;
}

/* Option card label default */
[data-theme="dark"] .option-card__label {
  background: var(--color-bg);
}

/* Hover state on option cards */
[data-theme="dark"] .option-card__label:hover {
  background: var(--color-surface-alt);
  border-color: rgba(0, 207, 255, 0.35);
}

/* Input background */
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-textarea,
[data-theme="dark"] .form-select {
  background: var(--color-page-bg);
  color: var(--color-text);
}

/* Input hover */
[data-theme="dark"] .form-input:hover {
  background: var(--color-page-bg);
}

/* Textarea wrapper in dark mode */
[data-theme="dark"] .textarea-wrap {
  background: #3A4170;
}

[data-theme="dark"] .textarea-wrap:focus-within {
  background: linear-gradient(135deg, #1a3aff, #00cfff);
}

[data-theme="dark"] .textarea-wrap .form-textarea {
  background: #0c0e17;
  color: var(--color-text);
}

[data-theme="dark"] .photo-rating-card__body .textarea-wrap {
  background: #3A4170;
}

[data-theme="dark"] .photo-rating-card__body .textarea-wrap .form-textarea {
  background: #0c0e17;
}

/* Input wrappers in dark mode */
[data-theme="dark"] .input-wrap,
[data-theme="dark"] .other-input-wrap {
  background: #3A4170;
}

[data-theme="dark"] .input-wrap:hover:not(:focus-within):not(.has-value),
[data-theme="dark"] .other-input-wrap:hover:not(:focus-within) {
  background: #4A5290;
}

[data-theme="dark"] .input-wrap:focus-within,
[data-theme="dark"] .other-input-wrap:focus-within {
  background: linear-gradient(135deg, #1a3aff, #00cfff);
}

/* Phone field (intl-tel-input) in dark mode */
[data-theme="dark"] .iti__selected-flag {
  background: var(--color-surface-alt);
  border-right-color: #3A4170;
}
[data-theme="dark"] .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag,
[data-theme="dark"] .iti__selected-flag:focus {
  background: #2A3050;
}
[data-theme="dark"] .iti__selected-dial-code {
  color: var(--color-text);
}
[data-theme="dark"] .iti__country-list {
  background: var(--color-surface-alt);
  border-color: #3A4170;
  color: var(--color-text);
}
[data-theme="dark"] .iti__country.iti__highlight {
  background-color: #2A3050;
}
[data-theme="dark"] .iti__divider {
  border-bottom-color: #3A4170;
}
[data-theme="dark"] .iti__dial-code {
  color: var(--color-text-secondary);
}

/* Select wrapper default border in dark mode */
[data-theme="dark"] .form-select-wrap {
  background: #3A4170;
}

[data-theme="dark"] .form-select-wrap:hover:not(:focus-within):not(.has-value) {
  background: #4A5290;
}

/* Select dropdown arrow colour */
[data-theme="dark"] .form-select-wrap::after {
  border-top-color: var(--color-text-secondary);
}

/* Required star stays cyan */
/* Review section */
[data-theme="dark"] .review-section__header {
  background: var(--color-surface-alt);
}

/* Confirmation block */
[data-theme="dark"] .confirmation-block {
  background: var(--color-surface-alt);
}

/* Checkbox/radio box default */
[data-theme="dark"] .option-card__check,
[data-theme="dark"] .confirmation-checkbox__box {
  background: var(--color-page-bg);
  border-color: var(--color-border);
}

/* Radio checked: keep dark surface bg behind the gradient dot */
[data-theme="dark"]
  .option-card
  input[type="radio"]:checked
  + .option-card__label
  .option-card__check {
  background: var(--color-surface);
}

/* File upload zone */
[data-theme="dark"] .file-upload-zone {
  background: #0c0e17;
}

/* Tone pills */
[data-theme="dark"] .tone-pill {
  background: #0c0e17;
  border-color: #3A4170;
  color: var(--color-text-secondary);
}

[data-theme="dark"] .tone-pill:hover:not(.tone-pill--active) {
  border-color: #4A5290;
  background: rgba(26, 58, 255, 0.08);
  color: var(--color-text);
}

[data-theme="dark"] .tone-pill--active {
  background-image:
    linear-gradient(rgba(26, 58, 255, 0.15), rgba(26, 58, 255, 0.15)),
    linear-gradient(135deg, #1a3aff, #00cfff);
  color: #ffffff;
}

/* Nav buttons */
[data-theme="dark"] .btn--secondary {
  background: var(--color-surface-alt);
  border-color: var(--color-border);
  color: var(--color-text-secondary);
}

[data-theme="dark"] .btn--secondary:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
}

[data-theme="dark"] .btn--ghost {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-text-secondary);
}

[data-theme="dark"] .btn--ghost:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
}