.vs-wrapper { padding: 40px 20px; display: flex; justify-content: center; direction: rtl; font-family: yekanglobal, Vazirmatn, Tahoma, sans-serif; }
.vs-glass-card { background: rgba(255, 255, 255, 0.65); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 24px; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1); padding: 40px; width: 100%; max-width: 700px; }
.vs-step { display: none; animation: vsFadeIn 0.4s ease forwards; }
.vs-step.active { display: block; }

.vs-header { text-align: center; margin-bottom: 30px; }
.vs-title { color: #1A2A35; font-size: 24px; font-weight: 800; margin: 0 0 10px 0; }
.vs-subtitle { color: #4A6270; font-size: 14px; margin: 0; text-align: center !important; display: block; width: 100%; }

.vs-stepper { display: flex; justify-content: center; gap: 10px; margin-bottom: 30px; }
.vs-dot { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.5); color: #8AA; font-weight: bold; font-size: 14px; border: 1px solid rgba(0,0,0,0.1); transition: all 0.3s ease; }
.vs-dot.active, .vs-dot.completed { background: #03736D; color: #fff; border: none; }

.vs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.vs-type-btn { padding: 20px; background: rgba(255, 255, 255, 0.5); border: 2px solid rgba(255,255,255,0.6); border-radius: 16px; cursor: pointer; text-align: center; transition: all 0.2s; font-weight: 500; color: #333; }
.vs-type-btn:hover, .vs-type-btn.selected { background: rgba(0, 78, 113, 0.1); border-color: #004E71; color: #004E71; font-weight: 800; }

.vs-input { width: 100%; padding: 12px 15px; background: rgba(255, 255, 255, 0.8); border: 1.5px solid #C5D8E0; border-radius: 10px; font-size: 14px; outline: none; box-sizing: border-box; transition: all 0.3s ease; font-family: inherit; }
.vs-input:focus { border-color: #004E71; }
.vs-input.error { border-color: #e74c3c; box-shadow: 0 0 8px rgba(231, 76, 60, 0.2); }
.vs-error-text { color: #e74c3c; font-size: 12px; font-weight: bold; display: block; min-height: 18px; margin-top: 4px; }

.vs-coll-card { display: flex; align-items: center; padding: 15px; margin: 10px 0; background: rgba(255, 255, 255, 0.5); border: 2px solid rgba(255,255,255,0.6); border-radius: 12px; cursor: pointer; transition: all 0.2s; }
.vs-coll-card.selected { border-color: var(--c-color); background: var(--c-bg); }

.vs-actions { display: flex; justify-content: space-between; margin-top: 30px; }
.vs-btn-primary { background: #004E71; color: #fff; padding: 12px 28px; border: none; border-radius: 10px; cursor: pointer; font-weight: bold; font-size: 15px; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 78, 113, 0.3); }
.vs-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.vs-btn-secondary { background: rgba(255, 255, 255, 0.5); color: #004E71; padding: 12px 28px; border: 1px solid rgba(0, 78, 113, 0.3); border-radius: 10px; cursor: pointer; font-weight: bold; font-size: 15px; transition: all 0.3s ease; }

.vs-review-box { background: rgba(255,255,255,0.4); border: 1px solid rgba(255,255,255,0.6); padding: 20px; border-radius: 16px; margin-bottom: 20px; line-height: 2; }
.vs-tag { display: inline-block; padding: 4px 12px; border-radius: 6px; font-size: 12px; font-weight: bold; margin: 4px; border: 1px solid; }

.vs-success-icon { width: 100px; height: 100px; background: #004E71; border-radius: 50%; margin: 0 auto 25px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 50px; animation: vsBounce 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, vsPulse 2s infinite; }
.vs-tracking-box { background: rgba(255,255,255,0.8); border: 2px dashed #004E71; padding: 20px 40px; border-radius: 16px; display: inline-block; margin-top: 15px;}
#success-code { color: #004E71; }

@keyframes vsFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes vsBounce { 0% { transform: scale(0); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }
@keyframes vsPulse { 0% { box-shadow: 0 0 0 0 rgba(3, 115, 109, 0.4); } 70% { box-shadow: 0 0 0 20px rgba(3, 115, 109, 0); } 100% { box-shadow: 0 0 0 0 rgba(3, 115, 109, 0); } }

@media (max-width: 768px) {
    .vs-wrapper { padding: 20px 10px; }
    .vs-glass-card { padding: 25px 15px; border-radius: 0; }
    .vs-title { font-size: 20px; }
    .vs-subtitle { font-size: 13px; }
    .vs-grid { grid-template-columns: 1fr; gap: 12px; }
    .vs-type-btn, .vs-input, .vs-coll-card, .vs-btn-primary, .vs-btn-secondary, .vs-review-box, .vs-tracking-box { border-radius: 0; }
    .vs-type-btn { padding: 15px; }
    .vs-stepper { gap: 5px; margin-bottom: 20px; }
    .vs-dot { width: 26px; height: 26px; font-size: 12px; }
    .vs-actions { flex-direction: column-reverse; gap: 12px; margin-top: 25px; }
    .vs-btn-primary, .vs-btn-secondary { width: 100%; }
    .vs-tracking-box { padding: 15px 20px; width: 100%; box-sizing: border-box; }
    .vs-success-icon { width: 70px; height: 70px; font-size: 35px; margin-bottom: 15px; }
    #success-code { font-size: 22px; }
}