/* IMMI Online Forms — Page Styles */

.imo-hero-anim { display: flex; flex-direction: column; gap: 10px; padding: 20px 28px; width: 100%; max-width: 420px; }
.imo-card { background: #fff; border-radius: 10px; padding: 14px 16px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); border-left: 4px solid transparent; display: flex; flex-direction: column; gap: 7px; opacity: 0; transform: translateX(-20px); }
.imo-c1 { border-left-color: #639BF1; animation: imoSlide 0.5s 0.2s ease both; }
.imo-c2 { border-left-color: #f59e0b; animation: imoSlide 0.5s 0.45s ease both; }
.imo-c3 { border-left-color: #10b981; animation: imoSlide 0.5s 0.7s ease both; }
@keyframes imoSlide { from { opacity:0; transform:translateX(-20px); } to { opacity:1; transform:translateX(0); } }
.imo-badge { width: 8px; height: 8px; border-radius: 50%; animation: imoPulse 2s ease-in-out infinite; }
@keyframes imoPulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.6; transform:scale(1.3); } }
.imo-line { height: 5px; background: #e8edf5; border-radius: 3px; }
.imo-lw50 { width:50%; } .imo-lw60 { width:60%; } .imo-lw70 { width:70%; } .imo-lw80 { width:80%; }
.imo-status { font-size: 0.6rem; font-weight: 700; color: var(--sc); text-transform: uppercase; letter-spacing: 0.5px; }

/* Stepper — reuse imf-stepper from base */
.imf-stepper { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; position: relative; }
.imf-step { text-align: center; padding: 28px 20px; position: relative; }
.imf-step-icon { width: 56px; height: 56px; border-radius: 50%; background: color-mix(in srgb, var(--step-c) 12%, white); color: var(--step-c); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; margin: 0 auto 16px; position: relative; z-index: 1; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.imf-step:hover .imf-step-icon { transform: scale(1.1); box-shadow: 0 4px 20px color-mix(in srgb, var(--step-c) 25%, transparent); }
.imf-step-connector { position: absolute; top: 54px; right: -50%; width: 100%; height: 2px; background: linear-gradient(to right, var(--step-c), color-mix(in srgb, var(--step-c) 30%, #e2e8f0)); z-index: 0; }
.imf-step:last-child .imf-step-connector { display: none; }
.imf-step h4 { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700; color: var(--color-text-dark); margin-bottom: 8px; }
.imf-step p { font-size: 0.85rem; color: var(--color-text-light); line-height: 1.6; }

/* Review animation */
.imo-review-anim { display: grid; grid-template-columns: 1.3fr 1fr; gap: 12px; padding: 20px; width: 100%; height: 100%; align-items: start; }
.imo-review-form { display: flex; flex-direction: column; gap: 10px; }
.imo-rf-field { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #fff; border-radius: 8px; border: 1px solid #e2e8f0; position: relative; }
.imo-rf-label { font-size: 0.6rem; font-weight: 700; color: #94a3b8; min-width: 40px; }
.imo-rf-input { flex: 1; height: 8px; background: #e8edf5; border-radius: 4px; }
.imo-rf-error { border-color: #fca5a5; background: #fff5f5; }
.imo-rf-flag { color: #ef4444; font-size: 0.7rem; animation: imoFlagPop 0.4s ease both; }
.imo-rf-error:nth-child(2) .imo-rf-flag { animation-delay: 0.3s; }
.imo-rf-error:nth-child(4) .imo-rf-flag { animation-delay: 0.7s; }
@keyframes imoFlagPop { from { opacity:0; transform:scale(0); } to { opacity:1; transform:scale(1); } }

.imo-review-comments { padding: 14px; background: #fff; border-radius: 10px; box-shadow: 0 1px 6px rgba(0,0,0,0.05); border-left: 3px solid #639BF1; }
.imo-rc-header { font-size: 0.68rem; font-weight: 700; color: #639BF1; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.imo-rc-item { height: 20px; background: rgba(99,155,241,0.08); border-radius: 4px; margin-bottom: 6px; }
.imo-rci-1 { animation: imoCommentIn 0.4s 0.5s ease both; }
.imo-rci-2 { animation: imoCommentIn 0.4s 0.9s ease both; }
@keyframes imoCommentIn { from { opacity:0; transform:translateX(10px); } to { opacity:1; transform:translateX(0); } }

@media (max-width: 768px) {
    .imf-stepper { grid-template-columns: 1fr 1fr; gap: 16px; }
    .imf-step-connector { display: none; }
    .imo-review-anim { grid-template-columns: 1fr; }
}
@media (max-width: 480px) { .imf-stepper { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .imo-card, .imo-badge, .imo-rf-flag, .imo-rci-1, .imo-rci-2 { animation: none !important; opacity: 1; transform: none; } }