/* فراخوانی فونت‌های لوکال IRANYekanX */
@font-face {
    font-family: 'IRANYekanX';
    src: url('../fonts/IRANYekanX-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IRANYekanX';
    src: url('../fonts/IRANYekanX-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IRANYekanX';
    src: url('../fonts/IRANYekanX-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* Variables */
:root {
    --primary-green: #00843D;
    --primary-light: #e6f3eb;
    --primary-dark: #00632e;
    --text-main: #2d3436;
    --text-muted: #636e72;
    --bg-gray: #f9fbfc;
}

/* استایل‌های اصلی سایت */
* { box-sizing: border-box; font-family: 'IRANYekanX', Tahoma, sans-serif; }
body { 
    margin: 0; 
    padding: 0; 
    background-color: #ffffff; 
    color: #4b4b4b; 
    display: flex; 
    flex-direction: column; 
    min-height: 100vh; 
}

/* استایل‌های صفحات لندینگ و پروفایل */
.landing-container, .profile-container, .intro-container { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    min-height: 100vh; 
    padding: 20px; 
    text-align: center; 
    width: 100%; 
    max-width: 500px; 
    margin: 0 auto; 
    position: relative; 
}
.logo { font-size: 36px; font-weight: 800; color: #58cc02; margin-bottom: 5px; margin-top: 40px; }
.subtitle { font-size: 16px; color: #737373; margin-bottom: 30px; font-weight: 700; }
.form-group { width: 100%; margin-bottom: 15px; text-align: right; }
.form-group label { display: block; font-weight: 700; margin-bottom: 8px; color: #4b4b4b; font-size: 15px; }
.form-input { width: 100%; padding: 15px; border: 2px solid #e5e5e5; border-radius: 15px; font-size: 16px; font-family: inherit; transition: border-color 0.2s; background: #f7f7f7; }
.form-input:focus { border-color: #84d8ff; outline: none; background: #ffffff; }

.btn-primary { width: 100%; background: #1cb0f6; color: white; border: none; padding: 18px; border-radius: 15px; font-size: 18px; font-weight: 800; cursor: pointer; box-shadow: 0 4px 0 #1899d6; transition: 0.2s; font-family: inherit; margin-top: 10px; }
.btn-primary:active { transform: translateY(4px); box-shadow: 0 0 0 #1899d6; }

.chips-container { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; justify-content: flex-start; }
.chip { padding: 10px 15px; border: 2px solid #e5e5e5; border-radius: 20px; cursor: pointer; font-size: 14px; font-weight: bold; color: #737373; transition: 0.2s; background: #fff; }
.chip.active { border-color: #58cc02; color: #58cc02; background: #eaffd6; }

/* =========================================
   محیط آزمون (عریض و استاندارد برای دسکتاپ)
   ========================================= */
#quiz-section { 
    display: none; 
    width: 100%; 
    flex-direction: column; 
    min-height: 100vh; 
    padding-bottom: 50px; 
}
.ltr-content { direction: ltr; text-align: left; }

.header { 
    width: 100%; 
    max-width: 1000px; 
    padding: 20px; 
    display: flex; 
    align-items: center; 
    gap: 15px; 
    margin: 0 auto; 
}
.progress-bar-bg { flex-grow: 1; background: #e5e5e5; height: 16px; border-radius: 10px; overflow: hidden; }
.progress-bar-fill { background: #58cc02; height: 100%; width: 10%; border-radius: 10px; transition: width 0.3s ease; }

.quiz-container { 
    width: 100%; 
    max-width: 1000px; 
    padding: 20px; 
    flex-grow: 1; 
    display: flex; 
    flex-direction: column; 
    margin: 0 auto; 
	align-self: stretch;
}
.timer-container { font-size: 18px; font-weight: 800; color: #ff9600; margin-bottom: 15px; display: flex; align-items: center; gap: 8px; justify-content: center; }
.question-title { font-size: 17px; font-weight: 800; margin-bottom: 30px; line-height: 1.7; white-space: pre-wrap; direction: ltr; text-align: left; }

.options-grid { display: grid; grid-template-columns: 1fr; gap: 15px; width: 100%; }
.options-grid > input, .options-grid > textarea, .options-grid > .audio-player-box, .options-grid > .record-container, .options-grid > div, .options-grid > video { grid-column: 1 / -1 !important; }

.option-btn { background: #ffffff; border: 2px solid #e5e5e5; border-radius: 15px; padding: 18px 20px; font-size: 18px; font-weight: 700; color: #4b4b4b; cursor: pointer; text-align: left; transition: all 0.2s ease !important; box-shadow: 0 4px 0 #e5e5e5; direction: ltr; }
.option-btn:hover:not(.selected) { border-color: #1cb0f6 !important; background-color: #f0f9ff !important; transform: translateY(-2px); }
.option-btn:active { transform: translateY(4px); box-shadow: 0 0 0 #e5e5e5; }
.option-btn.selected { border-color: #84d8ff; background: #ddf4ff; color: #1cb0f6; box-shadow: 0 4px 0 #84d8ff; }

/* فوتر آزمون */
.footer { width: 100%; max-width: 1000px; border-top: 2px solid #e5e5e5; padding: 20px; display: flex; flex-direction: column; gap: 10px; background: #ffffff; position: sticky; bottom: 0; margin: 0 auto; }
.check-btn, .skip-btn { width: 100% !important; margin: 0 !important; font-family: inherit; text-align: center; display: block; }
.check-btn { background: #1cb0f6; color: white; border: none; border-radius: 15px; padding: 18px; font-size: 18px; font-weight: 800; cursor: pointer; box-shadow: 0 4px 0 #1899d6; transition: 0.2s; }
.check-btn:active { transform: translateY(4px); box-shadow: 0 0 0 #1899d6; }
.check-btn:disabled { background: #e5e5e5; color: #737373; box-shadow: none; cursor: not-allowed; transform: none; }
.skip-btn { background: transparent; color: #737373; border: 2px solid #e5e5e5; padding: 15px; border-radius: 15px; font-size: 16px; font-weight: bold; cursor: pointer; transition: 0.2s; }
.skip-btn:hover { border-color: #ea2b2b; color: #ea2b2b; }

@media (min-width: 768px) {
    .options-grid { grid-template-columns: repeat(2, 1fr); }
    .footer { flex-direction: row !important; justify-content: space-between; }
    .check-btn, .skip-btn { width: 100% !important; flex: 0 0 100% !important; }
    .footer:has(.check-btn[style*="display: block"]):has(.skip-btn[style*="display: block"]) .check-btn,
    .footer:has(.check-btn[style*="display: block"]):has(.skip-btn[style*="display: block"]) .skip-btn { width: 48% !important; flex: 0 0 48% !important; }
}

/* پاپ‌آپ‌ها */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: none; justify-content: center; align-items: center; z-index: 9999; backdrop-filter: blur(3px); }
.modal-box { background: #ffffff; width: 90%; max-width: 400px; border-radius: 20px; padding: 25px; text-align: center; box-shadow: 0 10px 25px rgba(0,0,0,0.2); transform: scale(0.9); transition: transform 0.2s ease; }
.modal-overlay.active { display: flex; }
.modal-overlay.active .modal-box { transform: scale(1); }
.modal-title { font-size: 22px; font-weight: 800; color: #4b4b4b; margin-bottom: 10px; }
.modal-text { font-size: 16px; color: #afafaf; margin-bottom: 25px; line-height: 1.5; }
.modal-buttons { display: flex; gap: 10px; justify-content: center; }
.modal-btn { flex: 1; padding: 15px; border-radius: 15px; font-size: 16px; font-weight: 800; cursor: pointer; border: none; transition: all 0.2s; font-family: inherit; }
.modal-btn-confirm { background: #ea2b2b; color: white; box-shadow: 0 4px 0 #c61b1b; }
.modal-btn-confirm:active { transform: translateY(4px); box-shadow: 0 0 0 #c61b1b; }
.modal-btn-cancel { background: #e5e5e5; color: #afafaf; box-shadow: 0 4px 0 #d0d0d0; }
.modal-btn-cancel:active { transform: translateY(4px); box-shadow: 0 0 0 #d0d0d0; }
.modal-btn-ok { background: #1cb0f6; color: white; box-shadow: 0 4px 0 #1899d6; width: 100%; }
.modal-btn-ok:active { transform: translateY(4px); box-shadow: 0 0 0 #1899d6; }
/* استایل اصلی باکس پاپ‌آپ */
.modal-box { 
    background: #ffffff; 
    width: 90%; 
    max-width: 400px; /* عرض پیش‌فرض برای موبایل */
    border-radius: 20px; 
    padding: 25px; 
    text-align: center; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.2); 
    transform: scale(0.9); 
    transition: transform 0.2s ease; 
}

/* استایل متن داخل پاپ‌آپ (اضافه شدن اسکرول) */
.modal-text { 
    font-size: 16px; 
    color: #afafaf; 
    margin-bottom: 25px; 
    line-height: 1.5; 
    
    /* این 3 خط مشکل دراز شدن و نداشتن اسکرول را حل می‌کند */
    max-height: 60vh; /* حداکثر ارتفاع 60 درصد صفحه */
    overflow-y: auto; /* فعال کردن اسکرول عمودی */
    padding-right: 10px; /* فاصله دادن متن از نوار اسکرول */
}

/* زیباسازی نوار اسکرول داخل پاپ‌آپ */
.modal-text::-webkit-scrollbar {
    width: 6px;
}
.modal-text::-webkit-scrollbar-track {
    background: #f1f1f1; 
    border-radius: 10px;
}
.modal-text::-webkit-scrollbar-thumb {
    background: #c1c1c1; 
    border-radius: 10px;
}

/* عریض کردن پاپ‌آپ کارنامه فقط در دسکتاپ */
@media (min-width: 768px) {
    .modal-box {
        max-width: 700px !important; /* در دسکتاپ عریض می‌شود تا متن راحت خوانده شود */
    }
}
/* پخش و ضبط صدا */
.audio-player-box { display: flex; flex-direction: column; align-items: center; justify-content: center; background: transparent; padding: 20px 10px; margin-bottom: 20px; width: 100%; gap: 15px; }
.play-btn { background: #1cb0f6; color: white; border: none; border-radius: 50%; width: 80px; height: 80px; font-size: 35px; cursor: pointer; box-shadow: 0 6px 0 #1899d6, 0 10px 20px rgba(28, 176, 246, 0.3); display: flex; justify-content: center; align-items: center; transition: all 0.2s; animation: pulse-blue 2s infinite; }
.play-btn:active { transform: translateY(6px); box-shadow: 0 0 0 #1899d6; }
.play-btn.playing { background: #ff9600; box-shadow: 0 6px 0 #d97f00; animation: none; }
.audio-instruction { font-weight: 800; color: #afafaf; font-size: 15px; text-align: center; width: 100%; }
@keyframes pulse-blue { 0% { box-shadow: 0 6px 0 #1899d6, 0 0 0 0 rgba(28, 176, 246, 0.4); } 70% { box-shadow: 0 6px 0 #1899d6, 0 0 0 20px rgba(28, 176, 246, 0); } 100% { box-shadow: 0 6px 0 #1899d6, 0 0 0 0 rgba(28, 176, 246, 0); } }

.record-container { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 20px; width: 100%; }
.record-btn { background: #ff4b4b; color: white; border: none; border-radius: 50%; width: 80px; height: 80px; font-size: 32px; cursor: pointer; box-shadow: 0 4px 0 #ea2b2b; display: flex; justify-content: center; align-items: center; transition: all 0.2s; }
.record-btn:active { transform: translateY(4px); box-shadow: 0 0 0 #ea2b2b; }
.record-btn.recording { animation: pulse-red 1.5s infinite; background: #ea2b2b; }
.record-status { font-size: 16px; font-weight: 700; color: #afafaf; }
@keyframes pulse-red { 0% { box-shadow: 0 0 0 0 rgba(255, 75, 75, 0.7); } 70% { box-shadow: 0 0 0 20px rgba(255, 75, 75, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 75, 75, 0); } }

#image-container { text-align: center; width: 100%; margin-bottom: 20px; }
.question-image { max-width: 300px; max-height: 300px; width: 100%; object-fit: contain; display: block; margin: 0 auto 20px auto; border-radius: 15px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }

/* پروفایل و کارنامه */
.profile-btn { position: absolute; top: 20px; left: 20px; background: #ffffff; border: 2px solid #e5e5e5; padding: 10px 15px; border-radius: 12px; font-weight: 800; color: #4b4b4b; cursor: pointer; box-shadow: 0 4px 0 #e5e5e5; transition: 0.2s; z-index: 10; font-family: inherit; }
.profile-btn:active { transform: translateY(4px); box-shadow: 0 0 0 #e5e5e5; }
.profile-container { width: 100%; max-width: 500px; margin: 0 auto; padding: 20px; display: flex; flex-direction: column; min-height: 100vh; background: #ffffff; }
.back-btn { align-self: flex-start; background: none; border: none; font-size: 16px; font-weight: 800; color: #afafaf; cursor: pointer; margin-bottom: 20px; font-family: inherit; }
.back-btn:hover { color: #4b4b4b; }
.profile-header { text-align: center; margin-bottom: 30px; width: 100%; }
.avatar-wrapper { position: relative; width: 120px; height: 120px; margin: 0 auto 15px auto; cursor: pointer; }
.avatar-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 4px solid #1cb0f6; padding: 4px; background: #fff; }
.avatar-upload-icon { position: absolute; bottom: 0; right: 0; background: #58cc02; color: white; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; border: 3px solid #ffffff; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
.profile-name { font-size: 24px; font-weight: 900; margin: 0 0 5px 0; color: #4b4b4b; }
.profile-phone { font-size: 16px; color: #afafaf; margin: 0; direction: ltr; font-weight: bold; }

.history-list { display: flex; flex-direction: column; gap: 15px; margin-top: 15px; }
.history-item { background: #f7f7f7; border: 2px solid #e5e5e5; border-radius: 15px; padding: 15px; display: flex; justify-content: space-between; align-items: center; width: 100%; }
.history-info { display: flex; flex-direction: column; gap: 5px; text-align: right; }
.history-date { font-size: 12px; color: #afafaf; font-weight: bold; }
.history-level { font-size: 18px; font-weight: 900; color: #1cb0f6; }
.history-score { font-size: 14px; font-weight: 800; color: #58a700; background: #d7ffb8; padding: 4px 10px; border-radius: 8px; }

.certificate-wrapper { padding: 20px; background: #ffffff; border-radius: 20px; border: 2px solid #e5e5e5; text-align: center; margin-bottom: 20px; position: relative; overflow: hidden; width: 100%; }
.certificate-border { border: 4px double #ffd700; padding: 30px 20px; border-radius: 15px; background: linear-gradient(135deg, #fffdf0 0%, #ffffff 100%); position: relative; }
.cert-logo { font-size: 28px; font-weight: 900; color: #1cb0f6; margin-bottom: 5px; }
.cert-title { font-size: 18px; color: #afafaf; margin-bottom: 20px; font-weight: 800; letter-spacing: 1px; }
.cert-user { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 15px; }
.cert-avatar { width: 90px; height: 90px; border-radius: 50%; object-fit: cover; border: 3px solid #ffd700; background: #fff; }
.cert-name { font-size: 26px; font-weight: 900; color: #4b4b4b; }
.cert-badge { display: inline-block; background: #ffd700; color: #ffffff; font-size: 40px; font-weight: 900; padding: 15px 35px; border-radius: 50px; margin: 15px 0; box-shadow: 0 10px 20px rgba(255, 215, 0, 0.3); text-shadow: 1px 1px 2px rgba(0,0,0,0.1); border: 2px solid #e6c200; }
.cert-feedback { font-size: 15px; line-height: 1.8; color: #4b4b4b; text-align: justify; background: rgba(255,255,255,0.8); padding: 15px; border-radius: 12px; border: 1px dashed #ffd700; direction: rtl; }
.cert-actions { display: flex; gap: 10px; margin-top: 20px; width: 100%; }
.btn-action { flex: 1; padding: 15px; border-radius: 15px; font-size: 16px; font-weight: 800; cursor: pointer; border: none; transition: 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; }
.btn-print { background: #1cb0f6; color: white; box-shadow: 0 4px 0 #1899d6; }
.btn-print:active { transform: translateY(4px); box-shadow: 0 0 0 #1899d6; }
.btn-share { background: #58cc02; color: white; box-shadow: 0 4px 0 #58a700; }
.btn-share:active { transform: translateY(4px); box-shadow: 0 0 0 #58a700; }

@media print {
    body * { visibility: hidden; }
    #certificate-print-area, #certificate-print-area * { visibility: visible; }
    #certificate-print-area { position: absolute; left: 0; top: 0; width: 100%; margin: 0; padding: 0; border: none; }
    .cert-actions, .header, .footer, .profile-btn { display: none !important; }
    body { background: #fff; }
}

.load-more-btn { background: #e5e5e5; color: #4b4b4b; border: none; padding: 12px 20px; border-radius: 12px; font-weight: bold; cursor: pointer; margin: 15px auto 0 auto; display: block; transition: 0.2s; font-family: inherit; width: 100%; font-size: 15px; }
.load-more-btn:hover { background: #d0d0d0; }
.logout-btn { background: #ffdfe0; color: #ea2b2b; border: 2px solid #ffb3b8; padding: 15px; border-radius: 15px; font-weight: 900; cursor: pointer; margin-top: 30px; width: 100%; font-family: inherit; font-size: 16px; transition: 0.2s; }
.logout-btn:hover { background: #ffb3b8; color: #c61b1b; }

/* ربات هوش مصنوعی */
.ai-loading-container { grid-column: 1 / -1 !important; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; background: linear-gradient(145deg, #f0f9ff 0%, #ffffff 100%); border-radius: 20px; border: 2px dashed #1cb0f6; box-shadow: 0 10px 30px rgba(28, 176, 246, 0.1); margin-top: 20px; }
.ai-robot-icon { font-size: 70px; margin-bottom: 20px; animation: float-robot 2.5s ease-in-out infinite; filter: drop-shadow(0 10px 10px rgba(0,0,0,0.1)); }
.ai-loading-text { font-size: 18px; font-weight: 900; color: #1cb0f6; animation: pulse-text 1.5s infinite; text-align: center; }
@keyframes float-robot { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-15px) rotate(5deg); } }
@keyframes pulse-text { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

.btn-loading { position: relative; color: transparent !important; pointer-events: none; opacity: 0.8; }
.btn-loading::after { content: ""; position: absolute; width: 20px; height: 20px; top: 0; left: 0; right: 0; bottom: 0; margin: auto; border: 3px solid rgba(255, 255, 255, 0.3); border-top-color: #ffffff; border-radius: 50%; animation: button-spin 0.8s linear infinite; }
@keyframes button-spin { to { transform: rotate(360deg); } }

/* =========================================
   لندینگ پیج (صفحه اصلی)
   ========================================= */
.site-header { position: sticky; top: 0; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); border-bottom: 1px solid #eee; z-index: 1000; padding: 15px 0; }
.header-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; }
.header-logo { display: flex; align-items: center; gap: 10px; color: var(--primary-green); }
.header-logo span { font-size: 16px; font-weight: bold; }
.header-actions { display: flex; gap: 10px; }
.btn-outline { background: transparent; border: 2px solid var(--primary-green); color: var(--primary-green); padding: 8px 16px; border-radius: 8px; font-weight: bold; cursor: pointer; transition: 0.3s; font-family: inherit; }
.btn-outline:hover { background: var(--primary-light); }
.btn-solid { background: var(--primary-green); border: 2px solid var(--primary-green); color: white; padding: 8px 16px; border-radius: 8px; font-weight: bold; text-decoration: none; transition: 0.3s; font-family: inherit; }
.btn-solid:hover { background: var(--primary-dark); box-shadow: 0 4px 10px rgba(0, 132, 61, 0.3); }

.hero-section { max-width: 1200px; margin: 40px auto; padding: 0 20px; display: flex; align-items: center; gap: 40px; }
.hero-content { flex: 1; }
.hero-badge { display: inline-block; background: var(--primary-light); color: var(--primary-green); padding: 5px 12px; border-radius: 20px; font-size: 0.9rem; font-weight: bold; margin-bottom: 15px; }
.hero-content h1 { font-size: 2.5rem; color: var(--text-main); line-height: 1.4; margin-bottom: 15px; }
.highlight { color: var(--primary-green); }
.hero-content p { color: var(--text-muted); font-size: 1.1rem; line-height: 1.8; margin-bottom: 30px; }
.hero-image { flex: 1; text-align: center; }
.hero-image img { max-width: 100%; height: auto; border-radius: 20px; animation: float 3s ease-in-out infinite; }
@keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-15px); } 100% { transform: translateY(0px); } }

.age-title { font-weight: bold; color: var(--text-main); margin-bottom: 15px; }
.age-buttons-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; width: 100%; margin-top: 10px; }
.age-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 12px 5px; background: white; border: 2px solid #eee; border-radius: 12px; cursor: pointer; transition: 0.2s; font-family: inherit; box-shadow: 0 4px 0 #e5e5e5; }
.age-btn:hover { transform: translateY(-2px); }
.age-btn:active { transform: translateY(4px); box-shadow: 0 0 0 #e5e5e5; }
.age-icon { font-size: 1.8rem; line-height: 1; }
.age-btn span { font-size: 0.95rem; font-weight: 800; text-align: center; line-height: 1.3; color: var(--text-main); }
.age-btn small { display: block; font-weight: normal; font-size: 0.75rem; margin-top: 2px; opacity: 0.7; }
.age-btn.kids { border-color: #ff4b4b; }
.age-btn.kids span { color: #ff4b4b; }
.age-btn.teens { border-color: #ff9600; }
.age-btn.teens span { color: #ff9600; }
.age-btn.adults { border-color: #1cb0f6; }
.age-btn.adults span { color: #1cb0f6; }

.features-section { background: var(--bg-gray); padding: 60px 20px; text-align: center; }
.features-section h2 { margin-bottom: 40px; color: var(--text-main); }
.features-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.feature-card { background: white; padding: 30px; border-radius: 20px; box-shadow: 0 5px 20px rgba(0,0,0,0.05); transition: 0.3s; }
.feature-card:hover { transform: translateY(-10px); }
.feature-icon { font-size: 3rem; margin-bottom: 15px; }
.feature-card h3 { color: var(--primary-green); margin-bottom: 10px; }
.feature-card p { color: var(--text-muted); line-height: 1.6; }

/* Roadmap Section */
.roadmap-section { width: 100%; padding: 60px 20px; background-color: #ffffff; background-image: radial-gradient(#f0f9ff 1px, transparent 1px); background-size: 20px 20px; }
.roadmap-header { text-align: center; margin-bottom: 50px; }
.roadmap-header h2 { color: var(--text-main); font-size: 2rem; }
.roadmap-header p { color: var(--text-muted); }
.road-container { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; min-height: 800px; }
.desktop-road-svg { display: none; }
.mobile-road-line { position: absolute; left: 40px; top: 0; bottom: 0; width: 8px; background: #e5e7eb; border-radius: 10px; z-index: 0; }
.road-node { position: relative; display: flex; align-items: center; gap: 20px; margin-bottom: 40px; padding-left: 20px; z-index: 10; cursor: pointer; }
.node-icon { position: relative; width: 60px; height: 60px; background: var(--primary-green); border: 4px solid white; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 24px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); transition: transform 0.3s ease; flex-shrink: 0; }
.road-node:hover .node-icon { transform: scale(1.15); }
.start-node { width: 70px; height: 70px; font-size: 28px; animation: float 2s ease-in-out infinite; }
.goal-node { width: 70px; height: 70px; font-size: 28px; background: #ffc107; }
.node-badge { position: absolute; top: -10px; right: -10px; background: #ffc107; color: #000; font-size: 10px; font-weight: bold; padding: 2px 8px; border-radius: 10px; font-family: Tahoma, sans-serif; }
.goal-badge { background: var(--primary-green); color: white; }
.node-text { text-align: right; direction: rtl; }
.node-text h3 { margin: 0 0 5px 0; font-size: 16px; color: var(--text-main); }
.level-tag { display: inline-block; background: #f1f2f6; color: var(--text-muted); padding: 4px 8px; border-radius: 5px; font-size: 12px; font-weight: bold; }
.goal-tag { background: rgba(255, 193, 7, 0.2); color: #d39e00; }
.roadmap-cta { text-align: center; margin-top: 50px; }
.large-btn { font-size: 1.2rem; padding: 15px 40px; border-radius: 50px; }

@media (min-width: 768px) {
    .road-container { min-height: 600px; }
    .mobile-road-line { display: none; }
    .desktop-road-svg { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
    .road-node { position: absolute; flex-direction: column; margin-bottom: 0; padding-left: 0; width: 180px; }
    .node-text { text-align: center; }
    .pos-1 { right: 2%; top: 2%; } .pos-2 { right: 28%; top: 2%; } .pos-3 { right: 54%; top: 2%; } .pos-4 { right: 80%; top: 2%; }
    .pos-5 { left: 10%; top: 35%; } .pos-6 { left: 35%; top: 35%; } .pos-7 { left: 60%; top: 35%; } .pos-8 { left: 85%; top: 35%; }
    .pos-9 { right: 2%; top: 68%; } .pos-10 { right: 28%; top: 68%; } .pos-11 { right: 54%; top: 68%; } .pos-12 { right: 80%; top: 68%; }
}

/* Footer */
.site-footer { background: white; border-top: 1px solid #eee; padding: 20px 0; margin-top: 40px; }
.footer-content { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; color: var(--text-muted); font-size: 0.9rem; }
.footer-links { display: flex; gap: 20px; }
.footer-links a { color: var(--text-muted); text-decoration: none; transition: 0.3s; }
.footer-links a:hover { color: var(--primary-green); }

/* =========================================
   تنظیمات مخصوص موبایل (Responsive)
   ========================================= */
@media (max-width: 768px) {
    /* هدر موبایل */
    .header-container { flex-direction: row; align-items: center; }
    .header-actions .btn-solid { display: none; /* مخفی کردن دکمه آکادمی در موبایل */ }
    .header-actions .btn-outline { display: block !important; font-size: 13px; padding: 6px 10px; }
    
    /* قهرمان موبایل */
    .hero-section { flex-direction: column; text-align: center; margin: 20px auto; }
    .hero-content h1 { font-size: 1.8rem; }

    /* دکمه‌های سن موبایل (زیر هم) */
    .age-buttons-grid { grid-template-columns: 1fr; }
    .age-btn { flex-direction: row; justify-content: flex-start; padding: 15px 20px; gap: 15px; }
    .age-icon { font-size: 2rem; }
    .age-btn span { text-align: right; font-size: 1.1rem; }
    .age-btn small { display: inline-block; margin-right: 5px; }

    /* دکمه بزرگ پایین صفحه */
    .large-btn { font-size: 1rem; padding: 15px 20px; width: 100%; display: block; box-sizing: border-box; white-space: normal; }

    /* فوتر موبایل */
    .footer-content { flex-direction: column; gap: 15px; text-align: center; }
}
/* ==========================================================================
   Iframe Mode Styles (نمایش مینی‌مال فقط برای وردپرس)
   ========================================================================== */
/* مخفی کردن المان‌های اضافی در آیفریم */
body.is-iframe .hero-badge,
body.is-iframe .hero-content h1,
body.is-iframe .hero-content > p, /* فقط پاراگراف‌های توضیحات مخفی شوند */
body.is-iframe .hero-image,
body.is-iframe .features-section,
body.is-iframe .roadmap-section,
body.is-iframe .site-footer {
    display: none !important;
}

/* تنظیم ظاهر بخش دکمه‌ها در وسط کادر آیفریم */
body.is-iframe .hero-section {
    margin: 0 auto !important;
    padding: 40px 20px !important;
    min-height: 60vh; /* تا دکمه‌ها وسط صفحه قرار بگیرند */
    display: flex;
    justify-content: center;
    align-items: center;
}

body.is-iframe .hero-content {
    width: 100%;
    max-width: 600px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

body.is-iframe .age-group-container {
    width: 100%;
}

/* در حالت آیفریم، دکمه‌های رده سنی را حتی در دسکتاپ زیر هم می‌اندازیم تا شیک‌تر شود (اختیاری) */
body.is-iframe .age-buttons-grid {
    grid-template-columns: 1fr !important;
    max-width: 400px;
    margin: 15px auto 0 auto;
}
body.is-iframe .age-btn {
    flex-direction: row;
    justify-content: flex-start;
    padding: 15px 20px;
    gap: 15px;
}
body.is-iframe .age-icon {
    font-size: 2rem;
}
body.is-iframe .age-btn span {
    text-align: right;
    font-size: 1.1rem;
}