/* Smart Quiz & Reward v2 — Front CSS */
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800&display=swap');

.sq-wrap {
    --sq-primary: #6366f1; --sq-primary-d: #4f46e5; --sq-accent: #8b5cf6;
    --sq-success: #10b981; --sq-danger: #ef4444;
    --sq-border: #e5e7eb; --sq-bg: #f9fafb; --sq-text: #1f2937; --sq-muted: #6b7280;
    --sq-radius: 14px; --sq-shadow: 0 12px 48px rgba(99,102,241,.14);
    direction: rtl; font-family: 'Vazirmatn', Tahoma, sans-serif;
    max-width: 700px; margin: 2.5rem auto; background: #fff;
    border-radius: 24px; box-shadow: var(--sq-shadow); overflow: hidden; position: relative;
}
.sq-header {
    background: linear-gradient(135deg, var(--sq-primary) 0%, var(--sq-accent) 100%);
    padding: 2.25rem 2.5rem 2rem; color: #fff; position: relative; overflow: hidden;
}
.sq-header::before { content:''; position:absolute; width:280px; height:280px; background:rgba(255,255,255,.06); border-radius:50%; top:-80px; left:-80px; }
.sq-header::after  { content:''; position:absolute; width:180px; height:180px; background:rgba(255,255,255,.04); border-radius:50%; bottom:-60px; right:40px; }
.sq-header-icon { font-size:2.25rem; margin-bottom:.4rem; position:relative; z-index:1; }
.sq-title { font-size:1.55rem; font-weight:800; margin:0 0 .4rem; position:relative; z-index:1; }
.sq-desc  { font-size:.95rem; opacity:.85; margin:0; position:relative; z-index:1; }

.sq-progress-wrap { padding:1.5rem 2.5rem .75rem; background:#fafaff; border-bottom:1px solid var(--sq-border); }
.sq-progress-track { height:8px; background:var(--sq-border); border-radius:99px; overflow:hidden; margin-bottom:1.25rem; }
.sq-progress-fill  { height:100%; background:linear-gradient(90deg,var(--sq-primary),var(--sq-accent)); border-radius:99px; transition:width .5s cubic-bezier(.4,0,.2,1); }
.sq-dots { display:flex; gap:.5rem; flex-wrap:wrap; }
.sq-dot  { display:flex; flex-direction:column; align-items:center; gap:.3rem; flex:1; min-width:55px; }
.sq-dot-num, .sq-dot-check {
    width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:.8rem; font-weight:700; border:2px solid var(--sq-border); background:#fff; color:var(--sq-muted); transition:all .3s;
}
.sq-dot-check { display:none; }
.sq-dot--active .sq-dot-num { border-color:var(--sq-primary); background:var(--sq-primary); color:#fff; box-shadow:0 0 0 5px rgba(99,102,241,.18); }
.sq-dot--done .sq-dot-num { display:none; }
.sq-dot--done .sq-dot-check { display:flex; border-color:var(--sq-success); background:var(--sq-success); color:#fff; }
.sq-dot-label { font-size:.72rem; color:var(--sq-muted); text-align:center; line-height:1.3; transition:color .3s; }
.sq-dot--active .sq-dot-label { color:var(--sq-primary); font-weight:700; }

.sq-steps-wrap { padding:2rem 2.5rem 2.5rem; }
.sq-step { display:none; }
.sq-step--active { display:block; animation:sqSlideIn .35s ease; }
@keyframes sqSlideIn { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:translateX(0)} }
.sq-step-header { display:flex; align-items:center; gap:.75rem; margin-bottom:1.5rem; padding-bottom:1rem; border-bottom:2px dashed var(--sq-border); }
.sq-step-badge  { width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg,var(--sq-primary),var(--sq-accent)); color:#fff; font-size:.875rem; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.sq-step-title  { font-size:1.1rem; font-weight:700; color:var(--sq-text); margin:0; }

.sq-field-wrap { margin-bottom:1.25rem; }
.sq-label { display:block; font-size:.875rem; font-weight:600; color:#374151; margin-bottom:.45rem; }
.sq-asterisk { color:var(--sq-danger); margin-right:2px; }
.sq-input {
    width:100%; border:2px solid var(--sq-border); border-radius:var(--sq-radius);
    padding:.75rem 1rem; font-family:inherit; font-size:.95rem; color:var(--sq-text);
    background:var(--sq-bg); transition:border .2s,box-shadow .2s,background .2s;
    box-sizing:border-box; direction:rtl; outline:none; appearance:none; -webkit-appearance:none;
}
.sq-input:focus { border-color:var(--sq-primary); box-shadow:0 0 0 4px rgba(99,102,241,.12); background:#fff; }
.sq-input.sq-has-error { border-color:var(--sq-danger); box-shadow:0 0 0 4px rgba(239,68,68,.1); }
.sq-textarea { resize:vertical; min-height:110px; }
.sq-select-wrap { position:relative; }
.sq-select-wrap .sq-input { padding-left:2.25rem; }
.sq-select-arrow { position:absolute; left:.85rem; top:50%; transform:translateY(-50%); color:var(--sq-muted); pointer-events:none; font-size:.8rem; }

.sq-radio-group, .sq-check-group { display:flex; flex-direction:column; gap:.5rem; }
.sq-radio-label, .sq-checkbox-label {
    display:flex; align-items:center; gap:.65rem; padding:.65rem 1rem;
    border:2px solid var(--sq-border); border-radius:10px; cursor:pointer; transition:all .2s; background:var(--sq-bg);
}
.sq-radio-label:hover, .sq-checkbox-label:hover { border-color:var(--sq-primary); background:#f5f3ff; }
.sq-radio-input, .sq-check-input { display:none; }
.sq-radio-box, .sq-check-box {
    width:18px; height:18px; border:2px solid var(--sq-border); flex-shrink:0; transition:all .2s; position:relative;
}
.sq-radio-box { border-radius:50%; }
.sq-check-box { border-radius:5px; }
.sq-radio-input:checked ~ .sq-radio-box { border-color:var(--sq-primary); background:var(--sq-primary); }
.sq-radio-input:checked ~ .sq-radio-box::after { content:''; position:absolute; width:6px; height:6px; border-radius:50%; background:#fff; top:50%; left:50%; transform:translate(-50%,-50%); }
.sq-check-input:checked ~ .sq-check-box { border-color:var(--sq-primary); background:var(--sq-primary); }
.sq-check-input:checked ~ .sq-check-box::after { content:'✓'; position:absolute; color:#fff; font-size:11px; font-weight:700; top:50%; left:50%; transform:translate(-50%,-50%); }
.sq-radio-input:checked ~ .sq-radio-text, .sq-check-input:checked ~ .sq-check-text { color:var(--sq-primary); font-weight:600; }
.sq-radio-label:has(.sq-radio-input:checked), .sq-checkbox-label:has(.sq-check-input:checked) { border-color:var(--sq-primary); background:#f5f3ff; }
.sq-radio-text, .sq-check-text { font-size:.9rem; }
.sq-error-msg { display:block; font-size:.8rem; color:var(--sq-danger); margin-top:.3rem; min-height:1.1em; }

.sq-nav { display:flex; justify-content:space-between; align-items:center; margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--sq-border); }
.sq-btn { display:inline-flex; align-items:center; gap:.4rem; padding:.8rem 2rem; border:none; border-radius:12px; font-family:inherit; font-size:.95rem; font-weight:700; cursor:pointer; transition:all .25s; line-height:1; }
.sq-btn--ghost   { background:var(--sq-bg); color:var(--sq-muted); border:2px solid var(--sq-border); }
.sq-btn--ghost:hover { border-color:var(--sq-primary); color:var(--sq-primary); background:#f5f3ff; }
.sq-btn--primary { background:linear-gradient(135deg,var(--sq-primary),var(--sq-accent)); color:#fff; box-shadow:0 4px 18px rgba(99,102,241,.35); }
.sq-btn--primary:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(99,102,241,.45); }
.sq-btn--submit  { background:linear-gradient(135deg,#f59e0b,#ef4444); color:#fff; box-shadow:0 4px 18px rgba(245,158,11,.3); }
.sq-btn--submit:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(245,158,11,.4); }

.sq-overlay { position:fixed; inset:0; background:rgba(17,24,39,.6); backdrop-filter:blur(6px); z-index:99999; display:flex; align-items:center; justify-content:center; padding:1rem; }
.sq-overlay[hidden] { display:none !important; }
.sq-modal { background:#fff; border-radius:24px; padding:2.75rem 2rem; max-width:560px; width:100%; text-align:center; direction:rtl; font-family:'Vazirmatn',Tahoma,sans-serif; animation:sqModalPop .4s cubic-bezier(.34,1.56,.64,1); max-height:90vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,.2); }
@keyframes sqModalPop { from{opacity:0;transform:scale(.8) translateY(30px)} to{opacity:1;transform:scale(1) translateY(0)} }
.sq-modal h3 { font-size:1.35rem; font-weight:800; color:var(--sq-text); margin:.75rem 0 .5rem; }
.sq-modal p  { color:var(--sq-muted); font-size:.95rem; margin:.25rem 0; }

.sq-modal--analyze { padding:3.5rem 2rem; }
.sq-orbit { width:64px; height:64px; margin:0 auto 1.5rem; position:relative; }
.sq-orbit-ring { width:100%; height:100%; border-radius:50%; border:4px solid var(--sq-border); border-top-color:var(--sq-primary); animation:sqSpin 1.1s linear infinite; }
.sq-orbit-dot  { width:12px; height:12px; border-radius:50%; background:var(--sq-accent); position:absolute; top:-2px; left:50%; transform:translateX(-50%); animation:sqOrbitDot 1.1s linear infinite; transform-origin:6px 34px; }
@keyframes sqSpin { to{transform:rotate(360deg)} }
@keyframes sqOrbitDot { to{transform:rotate(360deg)} }
.sq-ellipsis span { animation:sqDot 1.2s infinite; opacity:0; }
.sq-ellipsis span:nth-child(2){animation-delay:.2s} .sq-ellipsis span:nth-child(3){animation-delay:.4s}
@keyframes sqDot { 0%,80%,100%{opacity:0} 40%{opacity:1} }

.sq-modal--prizes { padding:2rem 1.5rem; }
.sq-modal-icon { font-size:3.5rem; margin-bottom:.5rem; display:block; animation:sqBounce .6s ease .3s both; }
@keyframes sqBounce { 0%{transform:scale(0)} 70%{transform:scale(1.2)} 100%{transform:scale(1)} }
.sq-modal-sub { font-size:.875rem; }
.sq-prizes-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:.85rem; margin-top:1.25rem; }
.sq-prize-card { border:2px solid var(--sq-border); border-radius:16px; padding:1.1rem .85rem; cursor:pointer; transition:all .25s; background:var(--sq-bg); text-align:center; animation:sqFadeUp .35s ease both; }
.sq-prize-card:nth-child(2){animation-delay:.07s} .sq-prize-card:nth-child(3){animation-delay:.14s} .sq-prize-card:nth-child(4){animation-delay:.21s}
@keyframes sqFadeUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
.sq-prize-card:hover { border-color:var(--sq-primary); background:#f5f3ff; transform:translateY(-4px); box-shadow:0 10px 24px rgba(99,102,241,.18); }
.sq-prize-card.sq-selected { border-color:var(--sq-primary); background:#ede9fe; }
.sq-prize-img   { width:100%; height:90px; object-fit:cover; border-radius:10px; margin-bottom:.65rem; }
.sq-prize-emoji { font-size:2.5rem; display:block; margin-bottom:.5rem; }
.sq-prize-title { font-weight:700; font-size:.9rem; color:var(--sq-text); margin-bottom:.3rem; }
.sq-prize-desc  { font-size:.78rem; color:var(--sq-muted); margin-bottom:.75rem; }
.sq-prize-btn   { width:100%; padding:.5rem; border:none; border-radius:8px; background:linear-gradient(135deg,var(--sq-primary),var(--sq-accent)); color:#fff; font-family:inherit; font-size:.82rem; font-weight:700; cursor:pointer; transition:opacity .2s; }
.sq-prize-btn:hover { opacity:.9; }

.sq-modal--success { padding:3rem 2rem; }
.sq-success-anim { width:90px; height:90px; margin:0 auto 1.25rem; }
.sq-circle-path { stroke-dasharray:239; stroke-dashoffset:239; animation:sqCircle .6s ease .1s forwards; }
.sq-check-path  { stroke-dasharray:60;  stroke-dashoffset:60;  animation:sqCheckAnim .4s ease .65s forwards; }
@keyframes sqCircle   { to{stroke-dashoffset:0} }
@keyframes sqCheckAnim{ to{stroke-dashoffset:0} }
.sq-modal--success h3 { color:#065f46; }
.sq-success-prize     { font-weight:700; color:var(--sq-primary); font-size:.95rem; margin-top:.5rem; }
.sq-error { color:var(--sq-danger); text-align:center; direction:rtl; font-family:'Vazirmatn',Tahoma,sans-serif; }

@media(max-width:560px) {
    .sq-steps-wrap,.sq-header,.sq-progress-wrap{padding-left:1.25rem;padding-right:1.25rem}
    .sq-prizes-grid{grid-template-columns:1fr 1fr}
    .sq-btn{padding:.7rem 1.25rem;font-size:.875rem}
    .sq-dot-label{display:none}
}

/* Close button in success modal */
.sq-success-close {
    margin-top: 1.5rem;
    padding: .75rem 2.5rem;
    font-size: 1rem;
}