.cmsf-v3-root { max-width:780px; margin:22px auto; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; }
.cmsf-progress-wrap { margin-bottom:14px; }
.cmsf-progress-label { font-size:14px; color:#222; margin-bottom:6px; font-weight:600; }
.cmsf-progress-bar { height:10px; background:#eef3f7; border-radius:8px; overflow:hidden; }
.cmsf-progress-fill { height:10px; width:8%; background: linear-gradient(90deg,#0b74b1,#00a3d1); transition: width 360ms ease; }

.cmsf-card-area { position:relative; min-height:240px; display:flex; justify-content:center; }
.cmsf-form { width:100%; }
.cmsf-card { width:540px; background:#fff; border-radius:12px; padding:18px; box-shadow: 0 10px 30px rgba(15,30,50,0.06); position:absolute; left:50%; transform:translateX(-50%); opacity:0; pointer-events:none; transition: transform 360ms ease, opacity 320ms ease; }
.cmsf-card.active { opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.cmsf-card.move-out-left { transform:translateX(calc(-50% - 40%)); opacity:0; pointer-events:none; }
.cmsf-card.move-out-right { transform:translateX(calc(-50% + 40%)); opacity:0; pointer-events:none; }
.cmsf-card.move-in-right { transform:translateX(calc(-50% + 40%)); opacity:1; }
.cmsf-card.move-in-left { transform:translateX(calc(-50% - 40%)); opacity:1; }

.card-inner h3 { margin:0 0 10px 0; font-size:20px; color:#073247; }
.card-inner p { color:#444; }

.country-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:10px; margin-top:8px; }
.country-option { display:flex; flex-direction:column; align-items:center; gap:8px; padding:10px; border-radius:10px; border:1px solid #eef5fa; background:#fbfeff; cursor:pointer; transition: transform 160ms ease, box-shadow 160ms ease; text-align:center; }
.country-option img { width:60px; height:auto; display:block; }
.country-option span { font-weight:600; color:#093744; }
.country-option input { display:none; }
.country-option.selected { transform:translateY(-6px); box-shadow: 0 12px 30px rgba(10,30,60,0.06); border-color:#0b74b1; background:#f0fbff; }

.btns { display:flex; justify-content:space-between; margin-top:16px; gap:8px; }
button { background:#0b74b1; color:#fff; border:none; padding:10px 16px; border-radius:8px; cursor:pointer; font-weight:600; }
button:disabled { opacity:0.55; cursor:not-allowed; filter:grayscale(20%); }

input.cmsf-input, select.cmsf-input { width:100%; padding:10px; border-radius:8px; border:1px solid #e6eef3; box-sizing:border-box; }

@media (max-width:640px) {
    .cmsf-card { width:92%; padding:14px; }
    .country-grid { grid-template-columns: repeat(3, 1fr); gap:8px; }
    .cmsf-progress-label { text-align:center; }
}