/* style.css */
body { background:#f8fafc; font-family: "Cairo", "Tajawal", sans-serif; }
.sample-text { font-size: 20px; line-height: 1.2; margin:0; }
.card-subtitle { direction: rtl; }
.font-card-blog { display:block; }
.navbar-brand { font-weight:700; }
.container { max-width:1200px; }
.btn-primary { background:#1a73e8; border-color:#1a73e8; }


/* تنبيه أسفل الهيدر */
.legal-alert-header-blog {
    background-color: #ffc107; /* أصفر تحذيري */
    color: #000;
    text-align: center;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: bold;
    border-bottom: 2px solid #ff9800;
    position: sticky;
    top: 0;
    z-index: 9999;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* تنبيه فوق الفوتر */
.legal-alert-footer-blog {
    background-color: #343a40; /* داكن */
    color: #fff;
    text-align: center;
    padding: 15px 20px;
    font-size: 15px;
    font-style: italic;
    border-top: 2px solid #6c757d;
}



/*============================*/


/* تصميم CSS عام للواجهة */
body { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    padding: 0; /* 🆕 إزالة padding من body لنترك الهيدر يمتد على كامل العرض */
    margin: 0;
    background-color: #f0f2f5; /* لون خلفية أفتح وأكثر حداثة */
    color: #333;
}

/* -------------------------------------- */
/* 🆕 1. تنسيق رأس الصفحة (Header) */
header {
    background-color: #1e87f0; /* لون أزرق جذاب */
    color: white;
    padding: 30px 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    text-align: center;
}

header h1 {
    margin: 0 0 10px 0;
    font-size: 2.5em;
}

header p {
    margin: 0;
    font-size: 1.1em;
    opacity: 0.9;
}

/* 🆕 2. تنسيق المحتوى الرئيسي */
.main-content {
    max-width: 1200px;
    margin: 0 auto; /* توسيط المحتوى */
    padding: 0 20px;
}
/* -------------------------------------- */

/* 🆕 3. تنسيق حقل النص المخصص (تم دمجه من الكود الذي أرسلته) */
#customTextarea {
    width: 100%;
    padding: 15px 20px;
    margin-bottom: 20px;
    font-size: 18px;
    line-height: 1.5;
    border: 1px solid #ddd;
    border-radius: 8px;
    resize: vertical;
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s;
    text-align: right;
}
#customTextarea:focus {
    border-color: #1e87f0;
    box-shadow: 0 0 5px rgba(30, 135, 240, 0.3);
}

/* 🆕 4. تنسيق حقل البحث */
#fontSearch {
    width: 100%;
    padding: 15px 20px; /* زيادة Padding ليتناسق مع Textarea */
    margin-bottom: 30px; /* زيادة المسافة */
    font-size: 18px;
    border: 2px solid #ccc;
    border-radius: 25px; /* شكل دائري */
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s;
    text-align: right;
}
#fontSearch:focus {
    border-color: #1e87f0; 
    box-shadow: 0 0 8px rgba(30, 135, 240, 0.3);
}

/* -------------------------------------- */
/* تنسيق عنصر الخط (Font Item) */
.font-item { 
    background-color: #fff; 
    border: 1px solid #e0e0e0; /* تحديث اللون */
    margin-bottom: 20px; /* زيادة المسافة السفلية */
    padding: 25px; /* زيادة Padding */
    border-radius: 12px; /* شكل أكثر عصرية */
    box-shadow: 0 4px 10px rgba(0,0,0,0.08); /* ظل أقوى قليلاً */
    transition: transform 0.2s;
}

.font-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.1);
}

.font-example {
    min-height: 80px; /* لضمان ثبات الارتفاع */
    font-size: 32px; /* تكبير الخط */
    margin-bottom: 15px;
    padding: 10px 0;
    line-height: 1.5;
    color: #2c3e50;
    border-bottom: 1px solid #f0f0f0;
    overflow-wrap: break-word;
}

.font-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; 
    margin-top: 10px;
}

.font-name {
    font-size: 16px;
    color: #7f8c8d;
    font-weight: normal; /* إزالة الخط العريض للحجم الكبير وجعله عاديًا */
}

.actions button {
    padding: 10px 20px; /* زيادة حجم الزر */
    margin-right: 10px;
    cursor: pointer;
    border: none;
    border-radius: 20px; /* جعل الأزرار دائرية */
    font-weight: bold;
    transition: background-color 0.3s, opacity 0.3s;
}

.actions .copy-btn { 
    background-color: #3498db; 
    color: white; 
}
.actions .copy-btn:hover { background-color: #2980b9; }

.actions .download-btn { 
    background-color: #2ecc71; 
    color: white; 
}
.actions .download-btn:hover { background-color: #27ae60; }
/* -------------------------------------- */

/* 🆕 5. قسم زر عرض المزيد */
.show-more-section {
    text-align: center;
    margin: 40px 0 60px 0;
    padding: 20px;
}

.show-more-section p {
    font-size: 1.1em;
    color: #555;
    margin-bottom: 15px;
}

.show-more-btn {
    padding: 15px 30px !important; /* Overriding other button styles */
    background-color: #e74c3c !important; /* لون أحمر لتنبيه المستخدم */
    color: white !important;
    font-size: 1.2em;
    border-radius: 8px !important;
    border: none;
    box-shadow: 0 4px #c0392b;
    cursor: pointer;
    transition: all 0.1s;
}

.show-more-btn:active {
    box-shadow: 0 2px #c0392b;
    transform: translateY(2px);
}





/* -------------------------------------- */
.site-footer {
    background-color: #1e1e1e; /* لون داكن */
    color: #fff;
    text-align: center;
    padding: 15px 0;
    margin-top: 40px; /* مسافة عن المحتوى */
    font-size: 0.9em;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
}

.site-footer p {
    margin: 0;
}