673 lines
28 KiB
Vue
673 lines
28 KiB
Vue
<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>
|