/* Layout */
.cf-card { width: min(100%, 980px); background:#f6f8fb; border:1px solid #dfe6ee; border-radius:18px; box-shadow:0 18px 28px rgba(0,0,0,.10); overflow:hidden; }
.cf-header { padding:22px 22px 12px; background:linear-gradient(180deg,rgba(0,63,110,.18),rgba(0,63,110,.06)); border-bottom:1px solid rgba(0,0,0,.06); }
.cf-title { font-weight:800; color:#0a4a78; letter-spacing:-.2px; transition:font-size .25s ease,color .25s ease; }
.cf-title.compact { font-size:1.6rem; color:#093a5d; }

/* Progress */
.cf-progress-labels { color:#2b3b4a; opacity:.9; }
.cf-progress-track { height:6px; background:rgba(255,255,255,.35); }
.cf-progress-bar { width:0; background:linear-gradient(90deg,#6dd1ff,#0acffe,#007FC5); }

/* Steps */
.cf-steps { position:relative; max-width:760px; margin:0 auto; min-height:180px; padding:12px 20px 0; }
.cf-step { position:absolute; inset:0; opacity:0; transform:translateY(10px) scale(.98); transition:opacity .36s ease, transform .36s ease; pointer-events:none; }
.cf-step.active { position:relative; opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }

/* Bubble */
.cf-bubble { background:#fff; border:1px solid #d8e0e8; border-radius:14px; padding:18px 16px; box-shadow:0 6px 14px rgba(11,38,61,.06); }
.cf-bubble h2 { font-size:1.05rem; margin:0 0 12px; color:#0b5c8a; font-weight:800; text-align:center; }

/* Options */
.cf-options { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.cf-chip { position:relative; overflow:hidden; border:1px solid #0b5c8a33; color:#0b5c8a; background:#0b5c8a10; padding:10px 14px; border-radius:999px; cursor:pointer; transition:transform .2s ease, background .22s ease, color .22s ease, border-color .22s ease; }
.cf-chip:hover { transform:translateY(-1px); box-shadow:0 3px 8px rgba(11,92,138,.12); }
.cf-chip.active, .cf-chip:active { background:#0b5c8a; color:#fff; border-color:#0b5c8a; }
.cf-chip .ripple { position:absolute; border-radius:50%; transform:scale(0); animation:ripple .9s linear; background:rgba(255,255,255,.6); }
@keyframes ripple { to { transform:scale(4); opacity:0; } }

/* Inputs */
.cf-input { max-width:520px; }
.cf-bubble .cf-input,
.cf-bubble .form-select,
.cf-bubble .form-control { display:block; margin:0 auto; width:min(100%,520px); }
.cf-bubble .form-select,
.cf-bubble .form-control { height:46px; padding:10px 14px; border-radius:10px; border-color:#c9d4df; }
.cf-bubble .form-select:focus,
.cf-bubble .form-control:focus { border-color:#0b5c8a; box-shadow:0 0 0 .2rem rgba(11,92,138,.15); }
.cf-error { color:#dc3545; font-size:.9rem; margin-top:8px; display:none; }

.cf-footer { padding:0 20px 28px; }

/* Buttons */
.btn-prev, .btn-next { min-width:220px; height:46px; border-radius:10px; font-weight:700; letter-spacing:.2px; display:inline-flex; align-items:center; justify-content:center; transition:transform .2s ease, box-shadow .25s ease, filter .25s ease; }
.btn-prev { color:#0b5c8a; border:1px solid #0b5c8a55; background:#fff; }
.btn-prev:hover { background:#e9f2f8; border-color:#0b5c8a88; }
/* Gradient only when not success */
.btn-next { background:linear-gradient(90deg,#0b5c8a,#0a4a78); border:none; box-shadow:0 6px 14px rgba(11,92,138,.25); }
.btn-next:hover { filter:brightness(1.04); box-shadow:0 8px 18px rgba(11,92,138,.35); }
/* Override for final green submit */
.btn-next.btn-success { background:#198754; box-shadow:0 6px 14px rgba(25,135,84,.35); }
.btn-next.btn-success:hover { filter:brightness(1.05); box-shadow:0 8px 18px rgba(25,135,84,.45); }

/* Success Modal (enhanced) */
.survey-modal .modal-dialog { max-width:520px; }
.survey-modal .modal-content { position:relative; border:none; border-radius:24px; padding:0; overflow:hidden; background:rgba(255,255,255,0.85); backdrop-filter:blur(18px) saturate(160%); box-shadow:0 20px 40px -8px rgba(0,0,0,.25),0 4px 18px rgba(0,0,0,.08); animation:sm-fade-in .55s ease; }
.survey-modal .modal-header { border:0; padding:28px 28px 0; background:linear-gradient(135deg,#198754,#20c997); color:#fff; position:relative; }
.survey-modal .modal-header:after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 85% 15%,rgba(255,255,255,.35),transparent 60%); pointer-events:none; }
.survey-modal .modal-title { font-weight:800; letter-spacing:-.5px; }
.survey-modal .modal-body { padding:22px 28px 8px; font-size:0.98rem; color:#123; }
.survey-modal .modal-footer { border:0; padding:12px 28px 30px; background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.05)); }
.survey-modal .check-badge { width:96px; height:96px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:-54px auto 12px; background:conic-gradient(from 140deg,#20c997,#198754 55%,#157347); box-shadow:0 6px 16px rgba(25,135,84,.35); animation:badge-pop .7s cubic-bezier(.25,1.4,.35,1); position:relative; }
.survey-modal .check-badge svg { width:52px; height:52px; stroke:white; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; fill:none; stroke-dasharray:160; stroke-dashoffset:160; animation:draw-check 1s ease .25s forwards; filter:drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
.survey-modal .accent-pulse { position:absolute; inset:0; border-radius:inherit; background:radial-gradient(circle,rgba(255,255,255,.55),transparent 70%); animation:pulse 2.8s ease-in-out infinite; pointer-events:none; mix-blend-mode:overlay; }
.survey-modal .lead-msg { font-weight:600; font-size:1.05rem; text-align:center; color:#0b5c39; }
.survey-modal .fine-print { font-size:.75rem; opacity:.7; margin-top:6px; text-align:center; }
.survey-modal a.btn-home { background:linear-gradient(90deg,#0b5c8a,#0a4a78); border:none; font-weight:600; letter-spacing:.3px; }
.survey-modal a.btn-home:hover { filter:brightness(1.05); box-shadow:0 6px 14px rgba(11,92,138,.35); }
.modal-backdrop.show { backdrop-filter:blur(4px); background:rgba(10,25,40,.45); animation:backdrop-fade .4s ease; }

/* Confetti */
.confetti-container { position:absolute; inset:0; overflow:visible; pointer-events:none; }
.confetti-piece { position:absolute; width:10px; height:14px; background:var(--c); top:-20px; opacity:0; transform:translateY(0) rotate(0deg); animation:confetti-fall linear forwards; animation-duration:var(--dur); animation-delay:var(--del); border-radius:2px; }
@keyframes confetti-fall { 0% { opacity:0; transform:translateY(-20px) rotate(0deg); } 10% { opacity:1; } 100% { opacity:0; transform:translateY(420px) rotate(720deg); } }

@keyframes sm-fade-in { from { opacity:0; transform:translateY(18px) scale(.96); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes badge-pop { 0% { transform:scale(0.2) rotate(-20deg); opacity:0; } 60% { transform:scale(1.15) rotate(3deg); opacity:1; } 100% { transform:scale(1) rotate(0deg); opacity:1; } }
@keyframes draw-check { to { stroke-dashoffset:0; } }
@keyframes pulse { 0%,100% { opacity:.35; transform:scale(1); } 50% { opacity:.05; transform:scale(1.25); } }
@keyframes backdrop-fade { from { opacity:0; } to { opacity:1; } }

/* Responsive */
@media (max-width:768px) {
	.cf-title { font-size:1.6rem; }
	.cf-bubble h2 { font-size:1rem; }
	.cf-options { gap:8px; }
	.cf-chip { flex:1 1 calc(50% - 8px); text-align:center; }
	.btn-prev, .btn-next { min-width:0; flex:1 1 48%; }
}
@media (max-width:576px) {
	.cf-header { padding:16px 14px 10px; }
	.cf-title { font-size:1.35rem; line-height:1.2; }
	.cf-title.compact { font-size:1.15rem; }
	.cf-progress-labels { font-size:0.85rem; }
	.cf-steps { padding:10px 12px 0; }
	.cf-bubble { padding:14px 12px; }
	.cf-bubble h2 { font-size:0.95rem; }
	.cf-chip { flex:1 1 100%; width:100%; padding:12px 14px; }
	.cf-footer { padding:0 14px 20px; display:flex; flex-direction:column; gap:10px !important; }
	.cf-footer .btn-prev, .cf-footer .btn-next { width:100%; height:44px; }
}

/* Error Modal Styles */
.survey-modal.modal-error .modal-header {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
}
.survey-modal.modal-error .check-badge {
    background: conic-gradient(from 140deg, #c0392b, #e74c3c 55%, #a93226);
    box-shadow: 0 6px 16px rgba(220, 53, 69, .35);
}
.survey-modal.modal-error .check-badge svg path {
    stroke: #fff;
    stroke-width: 4;
    stroke-linecap: round;
    fill: none;
}
.survey-modal.modal-error .lead-msg {
    color: #a93226;
}
.survey-modal.modal-error .modal-footer .btn-danger {
    background: linear-gradient(90deg, #e74c3c, #c0392b);
    border: none;
}
.survey-modal.modal-error .modal-footer .btn-danger:hover {
    filter: brightness(1.05);
    box-shadow: 0 6px 14px rgba(220, 53, 69, .35);
}