<script setup lang="ts">
definePageMeta({ ssr: false, layout: false })

const route = useRoute()
const token = route.params.token as string

// ── Mock claim lookup by token ────────────────────────────────────────────────
interface IntakeClaim {
  id: string
  customerName: string
  policyNumber: string
  carrier: string
  lob: 'Auto' | 'Life' | 'General Risk' | 'Home'
  handler: string
  expiresAt: string
}

const MOCK_TOKENS: Record<string, IntakeClaim> = {
  'tk_hp_048_a3f1': { id: 'CLM-0048', customerName: 'Hotel Pacífico S.A.', policyNumber: 'PROP-2024-HP-001', carrier: 'ASSA', lob: 'General Risk', handler: 'Ana R.', expiresAt: '2026-04-09T14:30:00Z' },
  'tk_abc_047_b7e2': { id: 'CLM-0047', customerName: 'Empresa ABC S.A.', policyNumber: 'AUTO-2024-FLEET-007', carrier: 'Qualitas', lob: 'Auto', handler: 'Ana R.', expiresAt: '2026-04-07T11:00:00Z' },
  'tk_st_043_c9d4': { id: 'CLM-0043', customerName: 'Supermercado Tico S.A.', policyNumber: 'GL-2023-ST-001', carrier: 'Mapfre', lob: 'General Risk', handler: 'Marco V.', expiresAt: '2026-03-20T16:00:00Z' },
  'demo-auto': { id: 'CLM-DEMO-A', customerName: 'Demo Auto Client', policyNumber: 'AUTO-DEMO-001', carrier: 'ASSA', lob: 'Auto', handler: 'Ana R.', expiresAt: '2026-12-31T23:59:00Z' },
  'demo-life': { id: 'CLM-DEMO-L', customerName: 'Demo Life Client', policyNumber: 'LIFE-DEMO-001', carrier: 'Pan-American Life', lob: 'Life', handler: 'Ana R.', expiresAt: '2026-12-31T23:59:00Z' },
}

const claim = computed(() => MOCK_TOKENS[token] ?? null)
const expired = computed(() => {
  if (!claim.value) return false
  return new Date(claim.value.expiresAt) < new Date()
})

// ── Steps ─────────────────────────────────────────────────────────────────────
const currentStep = ref(0)
const submitted = ref(false)

const steps = computed(() => {
  const base = [
    { id: 'incident', label: 'Incident Details' },
    { id: 'parties', label: claim.value?.lob === 'Auto' ? 'Vehicles & Parties' : claim.value?.lob === 'Life' ? 'Patient & Provider' : 'Property & Parties' },
    { id: 'documents', label: 'Documents & Photos' },
    { id: 'review', label: 'Review & Submit' },
  ]
  return base
})

function nextStep() { if (currentStep.value < steps.value.length - 1) currentStep.value++ }
function prevStep() { if (currentStep.value > 0) currentStep.value-- }
function submitForm() { submitted.value = true }

// ── Form data ─────────────────────────────────────────────────────────────────
const form = reactive({
  // Step 1: Incident
  incidentDate: '',
  incidentTime: '',
  incidentLocation: '',
  incidentDescription: '',

  // Step 2: Auto-specific
  vehicleMake: '',
  vehicleModel: '',
  vehicleYear: '',
  vehiclePlate: '',
  vehicleColor: '',
  otherDriverName: '',
  otherDriverPhone: '',
  otherDriverInsurance: '',
  otherDriverPlate: '',
  witnessName: '',
  witnessPhone: '',

  // Step 2: Life-specific
  patientName: '',
  patientDob: '',
  patientCedula: '',
  providerName: '',
  providerAddress: '',
  diagnosis: '',
  treatmentDates: '',

  // Step 2: Property/General Risk
  propertyAddress: '',
  propertyType: '',
  damageDescription: '',
  emergencyServicesCalled: false,
  thirdPartyInvolved: false,

  // Step 3: Documents
  photoDescriptions: [] as string[],
  hasSignedFud: false,
  additionalNotes: '',
})

// ── Photo uploads (mock) ──────────────────────────────────────────────────────
const photoSlots = computed(() => {
  if (!claim.value) return []
  if (claim.value.lob === 'Auto') return [
    { id: 'front', label: 'Front of vehicle' },
    { id: 'rear', label: 'Rear of vehicle' },
    { id: 'left', label: 'Left side' },
    { id: 'right', label: 'Right side' },
    { id: 'damage', label: 'Close-up of damage' },
    { id: 'fud', label: 'FUD firmado — foto del documento (si aplica)', optional: true },
  ]
  if (claim.value.lob === 'Life') return [
    { id: 'prescription', label: 'Medical prescription' },
    { id: 'referral', label: 'Specialist referral' },
    { id: 'records', label: 'Medical records' },
  ]
  return [
    { id: 'damage1', label: 'Damage photo 1' },
    { id: 'damage2', label: 'Damage photo 2' },
    { id: 'damage3', label: 'Additional photos' },
    { id: 'report', label: 'Fire/police report (if available)', optional: true },
  ]
})

const uploadedPhotos = ref<Record<string, boolean>>({})
function mockUpload(slotId: string) { uploadedPhotos.value[slotId] = true }
</script>

<template>
  <div class="ci-page">
    <!-- Segur-OS branding bar -->
    <div class="ci-brand-bar">
      <span class="ci-brand-logo">Segur-OS</span>
      <span class="ci-brand-tag">Client Intake Form</span>
    </div>

    <!-- Invalid / expired token -->
    <template v-if="!claim">
      <div class="ci-error">
        <div class="ci-error-icon">!</div>
        <h2>Invalid Link</h2>
        <p>This intake form link is invalid or has expired. Please contact your broker for a new link.</p>
      </div>
    </template>

    <template v-else-if="expired">
      <div class="ci-error">
        <div class="ci-error-icon">⏱</div>
        <h2>Link Expired</h2>
        <p>This intake form link expired on {{ new Date(claim.expiresAt).toLocaleDateString() }}. Please contact your broker to request a new link.</p>
      </div>
    </template>

    <!-- Success state -->
    <template v-else-if="submitted">
      <div class="ci-success">
        <div class="ci-success-icon">✓</div>
        <h2>Thank You</h2>
        <p>Your claim information for <strong>{{ claim.id }}</strong> has been submitted successfully.</p>
        <p class="ci-success-sub">Your broker {{ claim.handler }} will review the information and follow up with you shortly.</p>
      </div>
    </template>

    <!-- Main form -->
    <template v-else>
      <!-- Claim context header -->
      <div class="ci-context">
        <div class="ci-context-left">
          <h1 class="ci-context-title">{{ claim.customerName }}</h1>
          <p class="ci-context-meta">{{ claim.id }} · {{ claim.policyNumber }} · {{ claim.carrier }}</p>
        </div>
        <div class="ci-context-right">
          <span class="ci-context-lob">{{ claim.lob }}</span>
        </div>
      </div>

      <!-- Step indicator -->
      <div class="ci-steps">
        <div
          v-for="(step, idx) in steps"
          :key="step.id"
          class="ci-step"
          :class="{
            'ci-step-done': idx < currentStep,
            'ci-step-active': idx === currentStep,
            'ci-step-pending': idx > currentStep,
          }"
        >
          <div class="ci-step-circle">
            <span v-if="idx < currentStep">✓</span>
            <span v-else>{{ idx + 1 }}</span>
          </div>
          <span class="ci-step-label">{{ step.label }}</span>
        </div>
      </div>

      <!-- Step content -->
      <div class="ci-card">
        <!-- ═══ Step 1: Incident Details ═══ -->
        <template v-if="currentStep === 0">
          <h2 class="ci-section-title">Incident Details</h2>
          <p class="ci-section-desc">When and where did the incident occur?</p>

          <div class="ci-field-grid">
            <div class="ci-field">
              <label class="ci-label">Date of Incident</label>
              <input v-model="form.incidentDate" type="date" class="ci-input" />
            </div>
            <div class="ci-field">
              <label class="ci-label">Time (approximate)</label>
              <input v-model="form.incidentTime" type="time" class="ci-input" />
            </div>
          </div>
          <div class="ci-field">
            <label class="ci-label">Location</label>
            <input v-model="form.incidentLocation" type="text" class="ci-input" placeholder="Street address, intersection, or description" />
          </div>
          <div class="ci-field">
            <label class="ci-label">Description of what happened</label>
            <textarea v-model="form.incidentDescription" class="ci-textarea" rows="4" placeholder="Describe the incident in detail..." />
          </div>
        </template>

        <!-- ═══ Step 2: Auto ═══ -->
        <template v-if="currentStep === 1 && claim.lob === 'Auto'">
          <h2 class="ci-section-title">Vehicles & Parties</h2>
          <p class="ci-section-desc">Your vehicle and other parties involved.</p>

          <h3 class="ci-subsection">Your Vehicle</h3>
          <div class="ci-field-grid">
            <div class="ci-field">
              <label class="ci-label">Make</label>
              <input v-model="form.vehicleMake" type="text" class="ci-input" placeholder="Toyota" />
            </div>
            <div class="ci-field">
              <label class="ci-label">Model</label>
              <input v-model="form.vehicleModel" type="text" class="ci-input" placeholder="Hilux" />
            </div>
            <div class="ci-field">
              <label class="ci-label">Year</label>
              <input v-model="form.vehicleYear" type="text" class="ci-input" placeholder="2024" />
            </div>
            <div class="ci-field">
              <label class="ci-label">Plate</label>
              <input v-model="form.vehiclePlate" type="text" class="ci-input" placeholder="ABC-123" />
            </div>
          </div>
          <div class="ci-field">
            <label class="ci-label">Color</label>
            <input v-model="form.vehicleColor" type="text" class="ci-input" placeholder="White" />
          </div>

          <h3 class="ci-subsection">Other Driver</h3>
          <div class="ci-field-grid">
            <div class="ci-field">
              <label class="ci-label">Name</label>
              <input v-model="form.otherDriverName" type="text" class="ci-input" />
            </div>
            <div class="ci-field">
              <label class="ci-label">Phone</label>
              <input v-model="form.otherDriverPhone" type="tel" class="ci-input" />
            </div>
          </div>
          <div class="ci-field-grid">
            <div class="ci-field">
              <label class="ci-label">Insurance Company</label>
              <input v-model="form.otherDriverInsurance" type="text" class="ci-input" />
            </div>
            <div class="ci-field">
              <label class="ci-label">Plate Number</label>
              <input v-model="form.otherDriverPlate" type="text" class="ci-input" />
            </div>
          </div>

          <h3 class="ci-subsection">Witness (if any)</h3>
          <div class="ci-field-grid">
            <div class="ci-field">
              <label class="ci-label">Name</label>
              <input v-model="form.witnessName" type="text" class="ci-input" />
            </div>
            <div class="ci-field">
              <label class="ci-label">Phone</label>
              <input v-model="form.witnessPhone" type="tel" class="ci-input" />
            </div>
          </div>
        </template>

        <!-- ═══ Step 2: Life ═══ -->
        <template v-if="currentStep === 1 && claim.lob === 'Life'">
          <h2 class="ci-section-title">Patient & Provider</h2>
          <p class="ci-section-desc">Information about the patient and medical provider.</p>

          <h3 class="ci-subsection">Patient Information</h3>
          <div class="ci-field-grid">
            <div class="ci-field">
              <label class="ci-label">Patient Name</label>
              <input v-model="form.patientName" type="text" class="ci-input" />
            </div>
            <div class="ci-field">
              <label class="ci-label">Date of Birth</label>
              <input v-model="form.patientDob" type="date" class="ci-input" />
            </div>
          </div>
          <div class="ci-field">
            <label class="ci-label">Cédula / ID</label>
            <input v-model="form.patientCedula" type="text" class="ci-input" />
          </div>

          <h3 class="ci-subsection">Medical Provider</h3>
          <div class="ci-field">
            <label class="ci-label">Provider / Hospital Name</label>
            <input v-model="form.providerName" type="text" class="ci-input" />
          </div>
          <div class="ci-field">
            <label class="ci-label">Provider Address</label>
            <input v-model="form.providerAddress" type="text" class="ci-input" />
          </div>
          <div class="ci-field">
            <label class="ci-label">Diagnosis</label>
            <textarea v-model="form.diagnosis" class="ci-textarea" rows="3" placeholder="Describe the diagnosis or reason for treatment..." />
          </div>
          <div class="ci-field">
            <label class="ci-label">Treatment Dates</label>
            <input v-model="form.treatmentDates" type="text" class="ci-input" placeholder="e.g. April 1–5, 2026" />
          </div>
        </template>

        <!-- ═══ Step 2: General Risk / Home ═══ -->
        <template v-if="currentStep === 1 && (claim.lob === 'General Risk' || claim.lob === 'Home')">
          <h2 class="ci-section-title">Property & Parties</h2>
          <p class="ci-section-desc">Details about the affected property.</p>

          <div class="ci-field">
            <label class="ci-label">Property Address</label>
            <input v-model="form.propertyAddress" type="text" class="ci-input" />
          </div>
          <div class="ci-field">
            <label class="ci-label">Property Type</label>
            <select v-model="form.propertyType" class="ci-input">
              <option value="">Select...</option>
              <option value="commercial">Commercial</option>
              <option value="residential">Residential</option>
              <option value="industrial">Industrial</option>
              <option value="other">Other</option>
            </select>
          </div>
          <div class="ci-field">
            <label class="ci-label">Damage Description</label>
            <textarea v-model="form.damageDescription" class="ci-textarea" rows="4" placeholder="Describe the damage in detail..." />
          </div>
          <div class="ci-field-row">
            <label class="ci-checkbox">
              <input v-model="form.emergencyServicesCalled" type="checkbox" />
              <span>Emergency services were called (fire, police, ambulance)</span>
            </label>
          </div>
          <div class="ci-field-row">
            <label class="ci-checkbox">
              <input v-model="form.thirdPartyInvolved" type="checkbox" />
              <span>Third parties are involved</span>
            </label>
          </div>
        </template>

        <!-- ═══ Step 3: Documents & Photos ═══ -->
        <template v-if="currentStep === 2">
          <h2 class="ci-section-title">Documents & Photos</h2>
          <p class="ci-section-desc">Upload photos and supporting documents. Take clear, well-lit photos.</p>

          <div class="ci-photo-grid">
            <div v-for="slot in photoSlots" :key="slot.id" class="ci-photo-slot">
              <div class="ci-photo-box" :class="{ 'ci-photo-uploaded': uploadedPhotos[slot.id] }" @click="mockUpload(slot.id)">
                <template v-if="uploadedPhotos[slot.id]">
                  <span class="ci-photo-check">✓</span>
                </template>
                <template v-else>
                  <span class="ci-photo-plus">+</span>
                </template>
              </div>
              <span class="ci-photo-label">{{ slot.label }}</span>
              <span v-if="slot.optional" class="ci-photo-optional">Optional</span>
            </div>
          </div>

          <div class="ci-field" style="margin-top: 20px;">
            <label class="ci-label">Additional Notes</label>
            <textarea v-model="form.additionalNotes" class="ci-textarea" rows="3" placeholder="Anything else your broker should know..." />
          </div>
        </template>

        <!-- ═══ Step 4: Review & Submit ═══ -->
        <template v-if="currentStep === 3">
          <h2 class="ci-section-title">Review & Submit</h2>
          <p class="ci-section-desc">Please review your information before submitting.</p>

          <div class="ci-review-section">
            <h3 class="ci-review-heading">Incident</h3>
            <div class="ci-review-grid">
              <div class="ci-review-item">
                <span class="ci-review-label">Date</span>
                <span class="ci-review-value">{{ form.incidentDate || '—' }}</span>
              </div>
              <div class="ci-review-item">
                <span class="ci-review-label">Time</span>
                <span class="ci-review-value">{{ form.incidentTime || '—' }}</span>
              </div>
              <div class="ci-review-item ci-review-full">
                <span class="ci-review-label">Location</span>
                <span class="ci-review-value">{{ form.incidentLocation || '—' }}</span>
              </div>
              <div class="ci-review-item ci-review-full">
                <span class="ci-review-label">Description</span>
                <span class="ci-review-value">{{ form.incidentDescription || '—' }}</span>
              </div>
            </div>
          </div>

          <div v-if="claim.lob === 'Auto'" class="ci-review-section">
            <h3 class="ci-review-heading">Vehicle</h3>
            <div class="ci-review-grid">
              <div class="ci-review-item">
                <span class="ci-review-label">Vehicle</span>
                <span class="ci-review-value">{{ form.vehicleYear }} {{ form.vehicleMake }} {{ form.vehicleModel }}</span>
              </div>
              <div class="ci-review-item">
                <span class="ci-review-label">Plate</span>
                <span class="ci-review-value">{{ form.vehiclePlate || '—' }}</span>
              </div>
              <div class="ci-review-item">
                <span class="ci-review-label">Other Driver</span>
                <span class="ci-review-value">{{ form.otherDriverName || 'Not provided' }}</span>
              </div>
            </div>
          </div>

          <div v-if="claim.lob === 'Life'" class="ci-review-section">
            <h3 class="ci-review-heading">Patient & Provider</h3>
            <div class="ci-review-grid">
              <div class="ci-review-item">
                <span class="ci-review-label">Patient</span>
                <span class="ci-review-value">{{ form.patientName || '—' }}</span>
              </div>
              <div class="ci-review-item">
                <span class="ci-review-label">Provider</span>
                <span class="ci-review-value">{{ form.providerName || '—' }}</span>
              </div>
              <div class="ci-review-item ci-review-full">
                <span class="ci-review-label">Diagnosis</span>
                <span class="ci-review-value">{{ form.diagnosis || '—' }}</span>
              </div>
            </div>
          </div>

          <div v-if="claim.lob === 'General Risk' || claim.lob === 'Home'" class="ci-review-section">
            <h3 class="ci-review-heading">Property</h3>
            <div class="ci-review-grid">
              <div class="ci-review-item">
                <span class="ci-review-label">Address</span>
                <span class="ci-review-value">{{ form.propertyAddress || '—' }}</span>
              </div>
              <div class="ci-review-item">
                <span class="ci-review-label">Type</span>
                <span class="ci-review-value">{{ form.propertyType || '—' }}</span>
              </div>
              <div class="ci-review-item ci-review-full">
                <span class="ci-review-label">Damage</span>
                <span class="ci-review-value">{{ form.damageDescription || '—' }}</span>
              </div>
            </div>
          </div>

          <div class="ci-review-section">
            <h3 class="ci-review-heading">Documents</h3>
            <p class="ci-review-photos">{{ Object.values(uploadedPhotos).filter(Boolean).length }} of {{ photoSlots.length }} photos uploaded</p>
          </div>
        </template>
      </div>

      <!-- Navigation buttons -->
      <div class="ci-nav">
        <button v-if="currentStep > 0" class="ci-btn-back" @click="prevStep">
          ← Back
        </button>
        <div class="ci-nav-spacer" />
        <button v-if="currentStep < steps.length - 1" class="ci-btn-next" @click="nextStep">
          Continue →
        </button>
        <button v-if="currentStep === steps.length - 1" class="ci-btn-submit" @click="submitForm">
          Submit Claim Information
        </button>
      </div>
    </template>

    <!-- Footer -->
    <div class="ci-footer">
      <p>Powered by <strong>Segur-OS</strong> · This form does not require a login</p>
    </div>
  </div>
</template>

<style scoped>
/* =====================================================================
   CLIENT INTAKE FORM — mobile-first, no layout, ci- prefix
   ===================================================================== */

.ci-page {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 16px 48px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #1a1a1a;
  min-height: 100vh;
  background: #f8f8f6;
}

/* ── Brand bar ── */
.ci-brand-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 0; border-bottom: 1px solid rgba(0,0,0,0.06);
  margin-bottom: 20px;
}
.ci-brand-logo { font-size: 16px; font-weight: 800; color: #01696f; letter-spacing: -0.02em; }
.ci-brand-tag { font-size: 12px; color: #8a8a86; font-weight: 500; }

/* ── Error / expired ── */
.ci-error { text-align: center; padding: 60px 16px; }
.ci-error-icon { font-size: 40px; margin-bottom: 12px; }
.ci-error h2 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.ci-error p { font-size: 14px; color: #5c5650; line-height: 1.6; }

/* ── Success ── */
.ci-success { text-align: center; padding: 60px 16px; }
.ci-success-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(1, 105, 111, 0.1); color: #01696f;
  font-size: 28px; font-weight: 700; margin-bottom: 16px;
}
.ci-success h2 { font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.ci-success p { font-size: 14px; color: #3a3a3a; line-height: 1.6; }
.ci-success-sub { color: #8a8a86; margin-top: 8px; }

/* ── Context header ── */
.ci-context {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 16px;
  background: white; border: 1px solid rgba(0,0,0,0.06);
  border-radius: 12px; margin-bottom: 16px;
}
.ci-context-title { font-size: 16px; font-weight: 700; }
.ci-context-meta { font-size: 12px; color: #8a8a86; margin-top: 2px; }
.ci-context-lob {
  display: inline-flex; padding: 4px 10px;
  border-radius: 8px; font-size: 11px; font-weight: 700;
  background: rgba(1, 105, 111, 0.08); color: #01696f;
  text-transform: uppercase; letter-spacing: 0.04em;
}

/* ── Step indicator ── */
.ci-steps {
  display: flex; gap: 4px; margin-bottom: 20px; overflow-x: auto;
}
.ci-step {
  display: flex; align-items: center; gap: 6px; padding: 8px 12px;
  border-radius: 8px; font-size: 12px; font-weight: 500;
  white-space: nowrap; flex: 1; min-width: 0;
}
.ci-step-circle {
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.ci-step-label { overflow: hidden; text-overflow: ellipsis; }
.ci-step-done { color: #01696f; }
.ci-step-done .ci-step-circle { background: #01696f; color: white; }
.ci-step-active { color: #1a1a1a; background: white; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.ci-step-active .ci-step-circle { background: #01696f; color: white; }
.ci-step-pending { color: #8a8a86; }
.ci-step-pending .ci-step-circle { background: rgba(0,0,0,0.06); color: #8a8a86; }

/* ── Card ── */
.ci-card {
  background: white; border: 1px solid rgba(0,0,0,0.06);
  border-radius: 12px; padding: 20px 16px;
}

/* ── Section ── */
.ci-section-title { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.ci-section-desc { font-size: 13px; color: #8a8a86; margin-bottom: 20px; }
.ci-subsection { font-size: 14px; font-weight: 600; margin: 20px 0 10px; padding-top: 16px; border-top: 1px solid rgba(0,0,0,0.06); }

/* ── Fields ── */
.ci-field { margin-bottom: 14px; }
.ci-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.ci-field-row { margin-bottom: 12px; }
.ci-label { display: block; font-size: 12px; font-weight: 600; color: #5c5650; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.03em; }
.ci-input {
  width: 100%; padding: 10px 12px; border: 1px solid rgba(0,0,0,0.1);
  border-radius: 8px; font-size: 14px; color: #1a1a1a;
  background: white; transition: border-color 150ms ease;
}
.ci-input:focus { outline: none; border-color: #01696f; }
.ci-textarea {
  width: 100%; padding: 10px 12px; border: 1px solid rgba(0,0,0,0.1);
  border-radius: 8px; font-size: 14px; color: #1a1a1a;
  resize: vertical; font-family: inherit;
}
.ci-textarea:focus { outline: none; border-color: #01696f; }
.ci-checkbox {
  display: flex; align-items: flex-start; gap: 8px; cursor: pointer;
  font-size: 14px; color: #3a3a3a;
}
.ci-checkbox input { margin-top: 3px; accent-color: #01696f; }

/* ── Photo grid ── */
.ci-photo-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px;
}
.ci-photo-slot { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ci-photo-box {
  width: 100%; aspect-ratio: 4/3; border: 2px dashed rgba(0,0,0,0.12);
  border-radius: 10px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 150ms ease; background: rgba(0,0,0,0.02);
}
.ci-photo-box:hover { border-color: #01696f; background: rgba(1, 105, 111, 0.03); }
.ci-photo-uploaded { border-style: solid; border-color: #01696f; background: rgba(1, 105, 111, 0.06); }
.ci-photo-plus { font-size: 24px; color: #8a8a86; }
.ci-photo-check { font-size: 24px; color: #01696f; font-weight: 700; }
.ci-photo-label { font-size: 11px; color: #5c5650; text-align: center; line-height: 1.3; }
.ci-photo-optional { font-size: 10px; color: #8a8a86; font-style: italic; }

/* ── Review ── */
.ci-review-section { margin-bottom: 20px; }
.ci-review-heading { font-size: 14px; font-weight: 700; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid rgba(0,0,0,0.06); }
.ci-review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ci-review-full { grid-column: 1 / -1; }
.ci-review-item { }
.ci-review-label { display: block; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #8a8a86; margin-bottom: 2px; }
.ci-review-value { font-size: 14px; color: #1a1a1a; }
.ci-review-photos { font-size: 13px; color: #5c5650; }

/* ── Navigation ── */
.ci-nav {
  display: flex; align-items: center; gap: 12px;
  margin-top: 16px; padding: 0 4px;
}
.ci-nav-spacer { flex: 1; }
.ci-btn-back {
  padding: 10px 20px; border-radius: 10px; font-size: 14px; font-weight: 600;
  background: white; color: #5c5650; border: 1px solid rgba(0,0,0,0.1);
  cursor: pointer;
}
.ci-btn-back:hover { color: #1a1a1a; border-color: rgba(0,0,0,0.2); }
.ci-btn-next {
  padding: 10px 24px; border-radius: 10px; font-size: 14px; font-weight: 600;
  background: #01696f; color: white; border: none; cursor: pointer;
}
.ci-btn-next:hover { opacity: 0.9; }
.ci-btn-submit {
  padding: 12px 28px; border-radius: 10px; font-size: 14px; font-weight: 700;
  background: #01696f; color: white; border: none; cursor: pointer;
}
.ci-btn-submit:hover { opacity: 0.9; }

/* ── Footer ── */
.ci-footer {
  text-align: center; padding: 24px 0; margin-top: 32px;
  border-top: 1px solid rgba(0,0,0,0.06);
  font-size: 12px; color: #8a8a86;
}

/* ── Responsive ── */
@media (max-width: 480px) {
  .ci-field-grid { grid-template-columns: 1fr; }
  .ci-photo-grid { grid-template-columns: repeat(2, 1fr); }
  .ci-review-grid { grid-template-columns: 1fr; }
  .ci-steps { gap: 2px; }
  .ci-step-label { display: none; }
}
</style>
