/* ==========================================================================
   استایل‌های سیستم هوشمند ختم قرآن (Khatm Engine UI) - نسخه 40.0 (Clean Architecture)
   * پاکسازی شده از کدهای QR (استفاده از کامپوننت خارجی)
   ========================================================================== */

:root {
    --khatm-bg: #f4f7f6; --khatm-card: #ffffff;
    --khatm-primary: #1B5E20; --khatm-accent: #D4AF37;
    --khatm-text: #2c3e50; --khatm-muted: #7f8c8d;
    --khatm-border: rgba(0,0,0,0.08);
}

body.dark-mode {
    --khatm-bg: #0d1410; --khatm-card: #16211b;
    --khatm-text: #f1f2f6; --khatm-muted: #a4b0be;
    --khatm-border: rgba(255,255,255,0.05);
}

* { box-sizing: border-box; }
.khatm-container { max-width: 800px; margin: 0 auto; padding: 20px; padding-bottom: 100px; font-family: 'Vazirmatn', sans-serif; }

/* هدر و تب‌ها */
.khatm-header { display: flex; justify-content: space-between; align-items: center; background: var(--khatm-card); padding: 15px 25px; border-radius: 25px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); margin-bottom: 25px; border: 1px solid var(--khatm-border); }
.khatm-header-title { font-size: 1.3rem; font-weight: 900; color: var(--khatm-primary); display: flex; align-items: center; gap: 10px; }
.back-btn-khatm { background: rgba(0,0,0,0.05); color: var(--khatm-text); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; text-decoration: none; transition: 0.3s; }
.back-btn-khatm:hover { background: var(--khatm-primary); color: white; }

.khatm-tabs { display: flex; background: rgba(0,0,0,0.05); border-radius: 20px; padding: 6px; margin-bottom: 25px; }
.khatm-tab { flex: 1; padding: 12px; text-align: center; border: none; background: transparent; color: var(--khatm-muted); font-weight: bold; font-size: 1rem; cursor: pointer; border-radius: 15px; transition: 0.3s; }
.khatm-tab.active { background: var(--khatm-card); color: var(--khatm-primary); box-shadow: 0 5px 15px rgba(0,0,0,0.05); }

.khatm-section { display: none; animation: fadeIn 0.4s ease; }
.khatm-section.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* فرم‌های هوشمند */
.smart-form { background: var(--khatm-card); padding: 25px; border-radius: 25px; margin-bottom: 25px; border: 1px solid var(--khatm-border); box-shadow: 0 10px 30px rgba(0,0,0,0.03); }
.smart-input, .smart-select { width: 100%; padding: 15px; border-radius: 12px; border: 1px solid var(--khatm-border); background: var(--khatm-bg); color: var(--khatm-text); font-family: inherit; font-size: 0.95rem; margin-bottom: 15px; outline: none; transition: 0.3s; }
.smart-input:focus, .smart-select:focus { border-color: var(--khatm-primary); box-shadow: 0 0 0 4px rgba(27,94,32,0.1); background: var(--khatm-card); }
.flex-row { display: flex; gap: 15px; } .flex-row > * { flex: 1; }

.btn-primary { background: linear-gradient(135deg, var(--khatm-primary), #124016); color: white; border: none; padding: 15px 25px; border-radius: 15px; font-weight: bold; cursor: pointer; transition: 0.3s; width: 100%; font-size: 1.05rem; box-shadow: 0 10px 25px rgba(27,94,32,0.3); display: flex; align-items: center; justify-content: center; gap: 10px; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 15px 35px rgba(27,94,32,0.4); }
.btn-group { background: linear-gradient(135deg, #2980b9, #2c3e50); box-shadow: 0 10px 25px rgba(41,128,185,0.3); }
.btn-danger-outline { background: transparent; color: #e74c3c; border: 2px solid #e74c3c; padding: 12px 15px; border-radius: 15px; cursor: pointer; transition: 0.3s; font-size: 1rem; font-weight: bold; display: flex; align-items: center; justify-content: center; width: 100%; gap: 8px;}
.btn-danger-outline:hover { background: rgba(231,76,60,0.1); }

/* کارت‌های کپسولی (Capsule Cards) */
.modern-khatm-card { background: var(--khatm-card); border-radius: 25px; padding: 25px; margin-bottom: 20px; border: 1px solid var(--khatm-border); box-shadow: 0 10px 30px rgba(0,0,0,0.04); position: relative; overflow: hidden; transition: transform 0.3s; }
.modern-khatm-card:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(27,94,32,0.1); }
.modern-khatm-card.completed { background: linear-gradient(135deg, var(--khatm-card) 60%, rgba(212,175,55,0.08)); border: 1px solid rgba(212,175,55,0.3); }

.k-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.k-card-title { font-size: 1.25rem; font-weight: 900; color: var(--khatm-primary); margin: 0; display: flex; align-items: center; gap: 8px; }
.k-card-badge { background: rgba(27,94,32,0.1); color: var(--khatm-primary); padding: 5px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: bold; }
.k-card-badge.done { background: rgba(212,175,55,0.15); color: var(--khatm-accent); }

.capsule-meta { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 15px; font-size: 0.85rem; color: var(--khatm-muted); }
.capsule-meta span { background: rgba(0,0,0,0.04); padding: 5px 12px; border-radius: 20px; display: flex; align-items: center; gap: 5px; }

/* نوار پیشرفت */
.k-progress-box { background: rgba(0,0,0,0.02); border-radius: 15px; padding: 15px; margin-bottom: 20px; border: 1px solid var(--khatm-border); }
.k-prog-text { display: flex; justify-content: space-between; font-size: 0.9rem; font-weight: bold; color: var(--khatm-muted); margin-bottom: 10px; }
.k-prog-bar-bg { width: 100%; height: 12px; background: rgba(0,0,0,0.06); border-radius: 20px; overflow: hidden; position: relative; }
.k-prog-bar-fill { height: 100%; background: linear-gradient(90deg, var(--khatm-accent), var(--khatm-primary)); border-radius: 20px; transition: width 0.8s ease; }

.btn-play-khatm { width: 100%; background: linear-gradient(135deg, #00b894, var(--khatm-primary)); color: white; border: none; padding: 16px; border-radius: 15px; font-size: 1.1rem; font-weight: 900; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 12px; box-shadow: 0 8px 20px rgba(0,184,148,0.3); transition: 0.3s; }
.btn-play-khatm:hover { transform: scale(1.02); box-shadow: 0 12px 25px rgba(0,184,148,0.4); }

/* عناصر اختصاصی ختم گروهی */
.group-reserve-row { display: flex; gap: 10px; align-items: center; margin-top: 15px; background: rgba(0,0,0,0.03); padding: 15px; border-radius: 15px; border: 1px solid var(--khatm-border); }
.group-reserve-row select { flex: 1; padding: 12px 15px; border-radius: 12px; border: 1px solid var(--khatm-border); background: var(--khatm-card); color: var(--khatm-text); font-family: inherit; font-size: 0.95rem; outline: none; }
.group-reserve-row button { background: linear-gradient(135deg, #00b894, var(--khatm-primary)); color: white; border: none; padding: 12px 20px; border-radius: 12px; font-weight: bold; cursor: pointer; box-shadow: 0 5px 15px rgba(0,184,148,0.2); transition: 0.3s; white-space: nowrap; }
.group-reserve-row button:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,184,148,0.3); }

.group-stats-mini { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--khatm-muted); margin-top: 10px; padding: 0 10px; font-weight: bold; }
.group-stats-mini span { display: flex; align-items: center; gap: 5px; }

.my-reservations { background: rgba(41,128,185,0.05); border: 1px solid rgba(41,128,185,0.2); border-radius: 15px; padding: 15px; margin-bottom: 20px; }
.res-item { display: flex; justify-content: space-between; align-items: center; background: var(--khatm-card); padding: 10px 15px; border-radius: 10px; margin-top: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.02); border: 1px solid var(--khatm-border); }
.res-actions { display: flex; gap: 8px; }
.btn-sm-play { background: #2980b9; color: white; border: none; padding: 8px 12px; border-radius: 8px; cursor: pointer; font-weight: bold; font-size: 0.85rem; }
.btn-sm-yield { background: transparent; color: #e74c3c; border: 1px solid #e74c3c; padding: 8px 12px; border-radius: 8px; cursor: pointer; font-weight: bold; font-size: 0.85rem; }

/* کادر دعای ختم */
.dua-card { display: none; background: linear-gradient(135deg, var(--khatm-primary), #124016); color: white; padding: 35px; border-radius: 25px; text-align: center; box-shadow: 0 15px 40px rgba(27,94,32,0.4); position: relative; overflow: hidden; margin: 20px 0; border: 2px solid var(--khatm-accent); }
.dua-card.active { display: block; animation: popIn 0.6s ease; }
.dua-arabic { font-size: 1.6rem; font-weight: bold; margin: 15px 0; line-height: 2; color: var(--khatm-accent); }
@keyframes popIn { 0% { opacity: 0; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1); } }