/* الإعدادات العامة لكل القوالب */
.cv-template { display: block; width: 100%; box-sizing: border-box; line-height: 1.6; font-size: 14px; margin: 0 auto; overflow: hidden; background: #fff; }
.cv-template[dir="rtl"] { direction: rtl; text-align: start; }
.cv-template[dir="ltr"] { direction: ltr; text-align: start; }

.cv-avatar { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; }
.cv-contact-info { opacity: 0.85; font-size: 13px; margin-top: 10px; display: flex; flex-wrap: wrap; gap: 15px; }
.cv-section { margin-bottom: 25px; page-break-inside: avoid; }
.cv-section-title { font-size: 18px; font-weight: 700; border-bottom: 2px solid; padding-bottom: 8px; margin-bottom: 15px; text-transform: uppercase; }
.cv-item { margin-bottom: 15px; page-break-inside: avoid; }
.cv-item-header { display: flex; justify-content: space-between; font-weight: bold; font-size: 15px; }
.cv-item-sub { font-size: 13px; font-style: italic; opacity: 0.8; margin-bottom: 4px; }
.cv-item-desc { font-size: 13px; white-space: pre-line; text-align: justify; }
.cv-skills-container { display: flex; flex-wrap: wrap; gap: 8px; }
.cv-skill-badge { padding: 4px 12px; border-radius: 15px; font-size: 12px; color: #fff; font-weight: bold; }

/* الهياكل الرئيسية (Grids) */
.cv-grid-full { display: flex; min-height: 100%; }
.cv-grid-split { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; }

/* =========================================
   الـ 30 تصميماً 
========================================= */

/* 1. الكلاسيكي */
.cv-tpl-1 { padding: 40px; }
.cv-tpl-1 .cv-header-area { display: flex; flex-direction: column; align-items: center; text-align: center; border-bottom: 2px solid var(--accent-color); padding-bottom: 20px; margin-bottom: 30px; }
.cv-tpl-1 .cv-contact-info { justify-content: center; }

/* 2. الكلاسيكي بالخطوط */
.cv-tpl-2 { padding: 40px; }
.cv-tpl-2 .cv-header-area { display: flex; align-items: center; gap: 30px; border-bottom: 4px solid var(--accent-color); padding-bottom: 20px; margin-bottom: 30px; }
.cv-tpl-2 .cv-section-title { border-bottom: 1px solid #ccc; position: relative; }
.cv-tpl-2 .cv-section-title::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; width: 50px; height: 3px; background: var(--accent-color); }

/* 3. الرسمي المؤطر */
.cv-tpl-3 { padding: 40px; }
.cv-tpl-3 .cv-header-area { text-align: center; margin-bottom: 30px; }
.cv-tpl-3 .cv-section { border: 1px solid #e0e0e0; padding: 20px; border-radius: 8px; background: rgba(0,0,0,0.01); }
.cv-tpl-3 .cv-section-title { border: none; color: var(--accent-color); }

/* 4. الكلاسيكي الجانبي */
.cv-tpl-4 { padding: 40px; border-inline-start: 10px solid var(--accent-color); }
.cv-tpl-4 .cv-header-area { display: flex; gap: 20px; margin-bottom: 40px; }

/* 5. أكاديمي هارفارد */
.cv-tpl-5 { padding: 50px; font-family: 'Times New Roman', serif !important; }
.cv-tpl-5 .cv-header-area { text-align: center; border-bottom: 1px solid #000; padding-bottom: 10px; margin-bottom: 20px; }
.cv-tpl-5 .cv-section-title { text-align: center; border: none; text-transform: uppercase; letter-spacing: 2px; }

/* 6. الحديث ذو الشريط الداكن */
.cv-tpl-6 .cv-sidebar-area { width: 30%; background: #2c3e50; color: #fff !important; padding: 40px 20px; }
.cv-tpl-6 .cv-sidebar-area * { color: #fff !important; border-color: rgba(255,255,255,0.2) !important; }
.cv-tpl-6 .cv-main-area { width: 70%; padding: 40px; }

/* 7. الحديث ذو الشريط الملون */
.cv-tpl-7 .cv-sidebar-area { width: 35%; background: var(--accent-color); color: #fff !important; padding: 40px; }
.cv-tpl-7 .cv-sidebar-area * { color: #fff !important; border-color: rgba(255,255,255,0.3) !important; }
.cv-tpl-7 .cv-skill-badge { background: #fff !important; color: var(--accent-color) !important; }
.cv-tpl-7 .cv-main-area { width: 65%; padding: 40px; }

/* 8. تقسيم متوازي */
.cv-tpl-8 { padding: 40px; }
.cv-tpl-8 .cv-header-area { border-bottom: 2px solid var(--accent-color); padding-bottom: 20px; margin-bottom: 30px; display: flex; gap: 20px; }
.cv-tpl-8 .cv-grid-split { grid-template-columns: 1fr 1fr; }

/* 9. رأس عريض + Grid */
.cv-tpl-9 { padding: 40px; }
.cv-tpl-9 .cv-header-area { background: var(--accent-color); color: #fff; padding: 30px; border-radius: 10px; margin-bottom: 30px; display: flex; gap: 20px; align-items: center; }
.cv-tpl-9 .cv-header-area * { color: #fff !important; }

/* 10. الشريط الأيمن (خفيف) */
.cv-tpl-10 { padding: 40px; }
.cv-tpl-10 .cv-header-area { margin-bottom: 30px; display: flex; gap: 20px; }
.cv-tpl-10 .cv-sidebar-area { background: rgba(0,0,0,0.03); padding: 20px; border-radius: 10px; }

/* 11. الإبداعي الجريء */
.cv-tpl-11 .cv-sidebar-area { width: 30%; padding: 40px; border-inline-end: 2px dashed var(--accent-color); }
.cv-tpl-11 .cv-main-area { width: 70%; padding: 40px; }
.cv-tpl-11 h1 { font-size: 45px; line-height: 1; }

/* 12. السيرة الدائرية */
.cv-tpl-12 { padding: 40px; }
.cv-tpl-12 .cv-header-area { text-align: center; margin-bottom: 40px; }
.cv-tpl-12 .cv-avatar { width: 150px; height: 150px; border: 5px solid var(--accent-color); box-shadow: 0 0 15px rgba(0,0,0,0.1); }

/* 13. التايم لاين */
.cv-tpl-13 { padding: 40px; }
.cv-tpl-13 .cv-header-area { margin-bottom: 40px; display: flex; gap: 30px; }
.cv-tpl-13 .cv-item { border-inline-start: 2px solid var(--accent-color); padding-inline-start: 15px; position: relative; margin-bottom: 25px; }
.cv-tpl-13 .cv-item::before { content: ''; position: absolute; top: 5px; inset-inline-start: -6px; width: 10px; height: 10px; background: var(--accent-color); border-radius: 50%; }

/* 14. العصري المنفصل */
.cv-tpl-14 { padding: 30px; background: #f0f2f5 !important; }
.cv-tpl-14 > div { background: #fff; padding: 30px; border-radius: 15px; margin-bottom: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.cv-tpl-14 .cv-grid-split { display: grid; gap: 20px; }

/* 15. النمط اللوني */
.cv-tpl-15 .cv-sidebar-area { width: 40%; background: var(--accent-color); color: #fff !important; padding: 50px 30px; }
.cv-tpl-15 .cv-sidebar-area * { color: #fff !important; border-color: rgba(255,255,255,0.4) !important; }
.cv-tpl-15 .cv-main-area { width: 60%; padding: 50px 40px; }

/* 16-20 المينيمال */
.cv-tpl-16 { padding: 60px; }
.cv-tpl-16 .cv-header-area { margin-bottom: 50px; }
.cv-tpl-16 .cv-section-title { border: none; font-weight: 400; text-decoration: underline; text-decoration-color: var(--accent-color); text-underline-offset: 8px; }

.cv-tpl-17 { padding: 50px 80px; }
.cv-tpl-17 .cv-header-area { text-align: center; margin-bottom: 40px; letter-spacing: 1px; }

.cv-tpl-18 { padding: 40px; }
.cv-tpl-18 .cv-section { display: flex; gap: 30px; border-bottom: 1px solid #eee; padding-bottom: 20px; }
.cv-tpl-18 .cv-section-title { width: 25%; border: none; font-size: 16px; margin: 0; }
.cv-tpl-18 .cv-item { width: 75%; }

.cv-tpl-19 { padding: 40px; }
.cv-tpl-19 .cv-grid-split { grid-template-columns: 1fr 2fr; }
.cv-tpl-19 .cv-header-area { margin-bottom: 40px; border-bottom: 1px solid #ccc; padding-bottom: 20px; }

.cv-tpl-20 { padding: 50px; }
.cv-tpl-20 .cv-header-area h1 { font-size: 50px; font-weight: 300; }
.cv-tpl-20 .cv-section-title { text-transform: uppercase; letter-spacing: 3px; font-size: 14px; }

/* 21-25 التقني والداكن */
.cv-tpl-21 .cv-sidebar-area { width: 25%; background: #111; color: #fff !important; padding: 30px; }
.cv-tpl-21 .cv-sidebar-area * { color: #fff !important; }
.cv-tpl-21 .cv-main-area { width: 75%; background: #1a1a1a; padding: 40px; }
.cv-tpl-21 .cv-main-area * { color: #ddd !important; border-color: #333 !important; }
.cv-tpl-21 .cv-title-color, .cv-tpl-21 .cv-accent-color { color: var(--accent-color) !important; }

.cv-tpl-22 .cv-grid-full { background: #0d1117; color: #c9d1d9 !important; font-family: monospace !important; }
.cv-tpl-22 .cv-sidebar-area { width: 30%; padding: 40px; border-inline-end: 1px solid #30363d; }
.cv-tpl-22 .cv-main-area { width: 70%; padding: 40px; }
.cv-tpl-22 * { color: #c9d1d9 !important; border-color: #30363d !important; }
.cv-tpl-22 .cv-title-color { color: #58a6ff !important; }

.cv-tpl-23 .cv-sidebar-area { width: 35%; background: #0f172a; padding: 40px; }
.cv-tpl-23 .cv-sidebar-area * { color: #f1f5f9 !important; }
.cv-tpl-23 .cv-main-area { width: 65%; background: #f8fafc; padding: 40px; }

.cv-tpl-24 { padding: 40px; background: #282a36 !important; color: #f8f8f2 !important; }
.cv-tpl-24 * { color: #f8f8f2 !important; border-color: #44475a !important; }
.cv-tpl-24 .cv-header-area { border-bottom: 2px dashed #6272a4; padding-bottom: 20px; margin-bottom: 30px; }
.cv-tpl-24 .cv-title-color { color: #50fa7b !important; }
.cv-tpl-24 .cv-accent-color { color: #ff79c6 !important; }

.cv-tpl-25 { padding: 40px; background: #000 !important; }
.cv-tpl-25 * { color: #fff !important; border-color: #333 !important; }
.cv-tpl-25 .cv-header-area { border-inline-start: 5px solid var(--accent-color); padding-inline-start: 20px; }

/* 26-30 التنفيذي والاحترافي */
.cv-tpl-26 { padding: 40px; }
.cv-tpl-26 .cv-header-area { background: #1e3a8a; color: #fff; padding: 40px; border-radius: 8px; margin-bottom: 30px; display: flex; gap: 30px; }
.cv-tpl-26 .cv-header-area * { color: #fff !important; }

.cv-tpl-27 { padding: 40px; }
.cv-tpl-27 .cv-header-area { display: flex; justify-content: space-between; align-items: center; border-bottom: 3px solid #111; padding-bottom: 20px; margin-bottom: 30px; }
.cv-tpl-27 .cv-section-title { background: #111; color: #fff !important; padding: 5px 15px; display: inline-block; }

.cv-tpl-28 { padding: 40px; border: 15px solid var(--accent-color); }
.cv-tpl-28 .cv-header-area { text-align: center; margin-bottom: 40px; }

.cv-tpl-29 { padding: 40px; }
.cv-tpl-29 .cv-header-area { display: flex; gap: 25px; margin-bottom: 30px; }
.cv-tpl-29 .cv-sidebar-area { border-inline-start: 2px solid var(--accent-color); padding-inline-start: 20px; }

.cv-tpl-30 { padding: 50px; background: #fdfdfd; }
.cv-tpl-30 .cv-header-area { text-align: center; position: relative; margin-bottom: 50px; }
.cv-tpl-30 .cv-header-area::after { content: ''; position: absolute; bottom: -25px; left: 25%; right: 25%; height: 1px; background: #ccc; }
.cv-tpl-30 .cv-section-title { font-family: 'Playfair Display', serif; font-size: 24px; text-transform: capitalize; border: none; text-align: center; }
#crop-avatar-btn{
        background: linear-gradient(135deg, #6366f1, #a855f7);
    padding: 10px;
    border-radius: 10px;
    color: white;
    cursor: pointer;
}
/* تحسينات الطباعة لـ PDF */
@media print {
    body * { visibility: hidden; }
    #cv-live-preview, #cv-live-preview * { visibility: visible; }
    #cv-live-preview { position: absolute; left: 0; top: 0; width: 100%; margin: 0; box-shadow: none;}
    .cv-template { width: 100% !important; max-width: 100% !important; padding: 0 !important; }
}