/**
 * Styles for Single Post Page - Final Color Control (Comment Area Focus)
 * @version 10000.4.9 (Mobile Comment Card Padding to 10px)
 */

/* ==========================================================================
   1. Hero Section
   ========================================================================== */
   
.single-post-hero { 
    position: relative; 
    width: 100%; 
    min-height: 450px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    background-size: cover; 
    background-position: center; 
    padding: 60px 20px; 
    text-align: center; 
    color: #fff; 
    margin-top: -100px;
}

.single-post-hero.no-thumbnail { background-color: #0d2d5e; min-height: 300px; }
.hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1; }

.hero-content { 
    position: relative; 
    z-index: 2; 
    max-width: 800px; 
    padding-top: 150px;
}

.single-post-category { display: inline-block; background: rgba(255, 255, 255, 0.15); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: 20px; padding: 8px 16px; color: #fff; font-weight: 600; font-size: 0.9em; text-decoration: none; margin-bottom: 20px; transition: background .3s ease, color .3s ease; }
.single-post-category:hover { color: #FFDD44 !important; background: rgba(0, 0, 0, 0.4) !important; }
.single-post-title { font-size: 3em; font-weight: 800; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.5); margin: 0 0 25px; line-height: 1.2; }


/* ==========================================================================
   1.1 HERO META CARDS
   ========================================================================== */

.single-post-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; font-size: 0.9em; }
.single-post-meta .meta-item { display: flex; align-items: center; text-shadow: none; background: rgba(0, 0, 0, 0.25); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 8px 15px; color: #fff; text-decoration: none; transition: background 0.3s ease; }
.single-post-meta .meta-item:hover { background: rgba(0, 0, 0, 0.4); }
.single-post-meta .meta-item .far,
.single-post-meta .meta-item .fas { color: #FFDD44; margin-right: 10px; font-size: 1.1em; text-shadow: 0 0 5px rgba(255, 221, 68, 0.5); }
.single-post-meta .meta-item .meta-text { color: #FFFFFF; }


/* ==========================================================================
   2. Main Layout & Content Card
   ========================================================================== */
#blog-main-layout { display: flex; gap: 40px; }
#single-post-content { flex: 1; min-width: 0; overflow: hidden; }

.entry-content-wrapper { background: #fff; padding: 40px; border: 1px solid #EAEAEA; border-radius: 12px; box-shadow: 0 8px 40px rgba(0,0,0,0.08); transition: transform 0.4s ease, box-shadow 0.4s ease; margin-top: 15px; }
.entry-content-wrapper:hover { transform: translateY(-8px); box-shadow: 0 20px 50px rgba(0,0,0,0.12); }
.entry-content { line-height: 1.75; font-size: 1.1rem; color: #333; }
.post-tags { margin-top: 40px; padding-top: 20px; border-top: 1px solid #eee; }
.sticky-sidebar { flex-shrink: 0; width: 250px; }


/* ==========================================================================
   3. STYLISH Social Share Buttons
   ========================================================================== */

.protectys-social-share { display: flex; align-items: center; justify-content: space-between; margin-top: 40px; padding: 20px 30px; border: 1px solid #eef0f2; background-color: #f7f8fa; border-radius: 12px; }
.share-title { display: flex; align-items: center; font-size: 1.1em; color: #0d2d5e !important; /* Make sure title text is always dark blue */ margin: 0; font-weight: 700; }
.share-title .fas { font-size: 1.2em; margin-right: 12px; color: #0d2d5e !important; /* Make sure icon is always dark blue */ transition: color 0.3s ease; }

/* --- FIX FOR ICON HOVER COLOR --- */
.protectys-social-share:hover .share-title .fas {
    color: #FFDD44 !important; /* ONLY the icon inside the title turns yellow */
}

.share-buttons { display: flex; justify-content: flex-end; gap: 12px; }
.share-btn { display: inline-flex; align-items: center; justify-content: center; width: 45px; height: 45px; border-radius: 50%; color: #fff !important; /* Ensure icon color is white */ font-size: 1.1em; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }

/* --- FIX FOR BUTTONS HOVER COLOR --- */
.share-btn:hover { 
    transform: translateY(-4px); 
    box-shadow: 0 8px 15px rgba(0,0,0,0.15);
    background-color: #FFDD44 !important; /* The requested bright yellow background */
    color: #0d2d5e !important; /* Make the icon dark blue on hover for contrast */
}
.share-x { background-color: #000000; }
.share-facebook { background-color: #1877F2; }
.share-linkedin { background-color: #0A66C2; }
.share-youtube { background-color: #FF0000; }


/* ==========================================================================
   4. Comments Area - PROFESSIONAL DESIGN
   ========================================================================== */
.comments-area { 
    margin-top: 50px !important; 
    background: #ffffff !important; 
    padding: 40px 10px 40px !important; 
    border-radius: 12px !important; 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important; 
    overflow: hidden !important; 
}

/* 4.1. Comment List and Item Styling */
.comments-area ol.comment-list { 
    list-style: none !important; 
    padding: 0 !important; 
    margin: 0 0 30px 0 !important; 
}

.comments-area .comment-list li.comment {
    direction: ltr !important; /* FORCING LTR FOR COMMENTS SECTION */
    text-align: left !important; /* FORCING LTR TEXT ALIGNMENT */
    background: #fdfdfd !important; 
    border: 1px solid #f0f0f0 !important;
    border-radius: 10px !important;
    padding: 20px !important; 
    margin-bottom: 25px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important; 
    transition: transform 0.2s ease !important;
    padding-left: 15px !important; /* (النقطة 2) إضافة مسافة للكارت من اليسار */
}

.comments-area .comment-list li.comment.parent {
    border-left: 5px solid #FFDD44 !important; /* Highlight parent comment */
    border-right: none !important; /* Ensure border is only on the left for LTR */
}

/* 4.2. Comment Body (Avatar, Author, Date) - Using Flexbox for Layout */
.comment-body {
    display: flex !important;
    flex-direction: column !important; 
}

.comment-author-info {
    display: flex !important;
    align-items: flex-start !important; 
    margin-bottom: 10px !important; 
}

/* Avatar Styling - يجب أن يكون الأفاتار على اليسار والتباعد عن النص 20px */
.comment-author-info .avatar {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    margin-right: 20px !important; /* المسافة عن النص على اليمين في LTR */
    margin-left: 0 !important; /* إزالة أي هوامش لليمين قد تكون من RTL */
    border: 3px solid #FFDD44 !important; 
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
    order: 0 !important; /* التأكد من ظهوره أولاً (على اليسار) */
    float: none !important; /* إلغاء أي float قد يسبب مشاكل في التنسيق */
}

/* Author Name and Date container */
.author-details {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding-top: 5px !important; 
    text-align: left !important;
}

.comment-author {
    font-size: 1.15em !important;
    font-weight: 700 !important;
    color: #0d2d5e !important; 
    margin: 0 !important; 
    padding-bottom: 2px !important; 
    display: block !important;
}

.comment-metadata time {
    font-size: 0.85em !important;
    color: #999 !important;
    font-style: italic !important;
    text-decoration: none !important;
    display: block !important;
}

/* 4.3. Comment Text Content */
.comment-content {
    padding: 10px 0 15px 0 !important; 
    line-height: 1.6 !important;
    color: #444 !important;
    font-size: 1em !important;
    border-top: 1px dashed #eee !important; 
    margin-top: 10px !important;
    padding-top: 15px !important;
    text-align: left !important;
}

.comment-content p {
    white-space: normal !important;
    word-wrap: break-word !important; 
    overflow-wrap: break-word !important;
    word-break: break-word !important; 
    margin-bottom: 1em !important;
    padding: 0 !important; 
    text-align: left !important;
}

/* 4.4. Reply Button */
.reply a {
    background-color: #0d2d5e !important;
    color: #fff !important;
    border: none !important;
    padding: 8px 15px !important;
    border-radius: 6px !important;
    font-size: 0.9em !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    display: inline-block !important;
}
.reply a:hover {
    background-color: #FFDD44 !important;
    color: #0d2d5e !important;
    transform: translateY(-1px) !important;
}


/* 4.5. Comment Form Styling (Combined Name/Email fields) */
#respond {
    margin-top: 50px !important;
    padding-top: 30px !important;
    border-top: 1px solid #eee !important;
    direction: ltr !important; /* FORCING LTR FOR THE FORM */
}

#reply-title {
    font-size: 2em !important;
    color: #0d2d5e !important;
    margin-bottom: 20px !important;
    font-weight: 800 !important;
    text-align: left !important;
}

.comment-form p {
    margin-bottom: 20px !important;
    direction: ltr !important; 
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100% !important;
    padding: 15px !important;
    border: 2px solid #ddd !important; 
    border-radius: 8px !important;
    box-sizing: border-box !important;
    font-size: 1em !important;
    text-align: left !important; /* LTR text alignment */
}

/* Grouping Name and Email in one row (Desktop) */
.comment-form-author, .comment-form-email {
    width: 48.5% !important; /* Set width for half-row */
    display: inline-block !important; /* Allow them to sit side-by-side */
    float: left !important; /* Force them to the left */
    margin-right: 3% !important; /* تباعد بسيط بين الحقلين */
}
.comment-form-email {
    margin-right: 0 !important; /* No margin on the last item */
}

.comment-form-url {
    display: none !important; /* Hiding the Website field */
}

.comment-form input:focus,
.comment-form textarea:focus {
    border-color: #FFDD44 !important;
    box-shadow: 0 0 0 3px rgba(255, 221, 68, 0.3) !important;
    outline: none !important;
}
/* Style the placeholder text */
.comment-form input::placeholder,
.comment-form textarea::placeholder {
    color: #aaa !important;
    opacity: 1 !important; 
    text-align: left !important;
}


.comment-form textarea {
    min-height: 180px !important; 
    resize: vertical !important;
}

.form-submit {
    clear: both !important;
}

.form-submit .submit-btn { 
    background: linear-gradient(135deg, #0d2d5e, #1a4d8c) !important;
    color: #fff !important;
    border: none !important;
    padding: 14px 30px !important;
    border-radius: 10px !important;
    font-size: 1.1em !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    box-shadow: 0 5px 15px rgba(13, 45, 94, 0.4) !important;
    transition: all 0.3s ease !important;
    display: block !important; /* Ensure it takes full width or behaves predictably */
    width: auto !important;
    float: none !important;
}

.form-submit .submit-btn:hover {
    background: linear-gradient(135deg, #FFDD44, #fbc02d) !important;
    color: #0d2d5e !important;
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 8px 20px rgba(255, 221, 68, 0.6) !important;
}

/* ==========================================================================
   5. Responsive Adjustments
   ========================================================================== */
@media (max-width: 900px) {
    /* Stack Name and Email fields vertically on smaller screens */
    .comment-form-author, .comment-form-email {
        width: 100% !important;
        margin-right: 0 !important;
        float: none !important;
    }
}

@media (max-width: 767px) {
    .hero-content { padding-top: 100px; }
    #blog-main-layout { flex-direction: column; }
    .sticky-sidebar, #single-post-content { width: 100%; }
    
    /* 1. الحاويات الرئيسية (Entry Content Wrapper و Comments Area) - بادينغ جانبي 10px */
    .entry-content-wrapper, .comments-area { 
        padding: 20px 10px; 
    }
    
    /* 2. بطاقات التعليقات الفردية (li.comment) - بادينغ جانبي 10px بناءً على طلب المستخدم */
    .comments-area .comment-list li.comment {
        padding: 20px 10px !important; /* 20px T/B, 10px L/R */
        padding-left: 15px !important; /* keep the left indent for the yellow border */
    }

    .comment-author-info .avatar {
        width: 50px !important;
        height: 50px !important;
        margin-right: 15px !important; /* Adjusting margin for small screens (LTR) */
    }
    
    .comment-content {
        padding: 10px 0 10px 0 !important;
    }

    .protectys-social-share { flex-direction: column; gap: 15px; padding: 20px; }
}



/* ==========================================================================
   6. Comment Responsive Adjustments
   ========================================================================== */

#comments .comment .avatar,
#comments .pingback .avatar {
    border-radius: 50% !important;
    left: 20px !important;
    margin-inline-end: 10px !important;
    position: absolute !important;
}

#comments .comment .comment-body,
#comments .pingback .comment-body {
    border-block-end: 1px solid #ccc !important;
    display: flex !important;
    flex-direction: column !important;
    padding-block-end: 30px !important;
    padding-block-start: 30px !important;
    padding-inline-end: 0 !important;
    padding-inline-start: 80px !important;
}

/* PSG site comment styles — using site palette variables */
:root{
  --psg-primary: #c70201;   /* داكن - الألوان الرئيسية */
  --psg-accent:  #ffc107;   /* أصفر محوري */
  --psg-muted:   #ffc300 !important;   /* خلفيات خفيفة */
  --psg-text:    #1a2c4e;   /* نص داكن (يتماشى مع الشعار) */
  --psg-muted-text: #777;   /* نص ثانوي */
  --psg-danger:  #e53935;   /* أحمر أزرار الرد */
  --coastal-primary: #000000;
  --assem: #eeeeee !important;
}

/* حاوية تحتوي fn و says في سطر واحد */
.chat-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
}

/* استايل للـ .fn */
.fn {
    display: flex;
    align-items: center;
    padding: 5px 8px !important;
    background-color: var(--psg-muted) !important;
    border-radius: 6px !important;
    margin-right: 5px;
    font-weight: 500;
}

/* الرابط داخل .fn */
.fn a {
    color: var(--coastal-primary) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}
.fn a:hover {
    color: var(--assem) !important;
    text-decoration: underline !important;
}

/* استايل لـ .says */
.says {
    font-family: "Arial", sans-serif;
    font-size: 16px;
    color: #ffffff;
    font-weight: 500;
    background: var(--psg-primary);
    padding: 2px 8px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    margin-top: 3px;
    gap: 6px;
}

/* أيقونة الميكروفون */
.says .mic-icon {
    font-size: 17px;
    display: inline-block;
}

/* استايل تاريخ الكومنت */
.comment-metadata {
    display: block !important;
    font-size: 1.05em !important;
    color: var(--psg-muted-text) !important;
    margin-top: 5px !important;
    margin-left: 5px !important;
    margin-bottom: 10px;
    font-style: italic !important;
}

/* زر التعديل */
.edit-link {
    display: inline-block !important;
    font-size: 12px !important;
    color: #888 !important;
    background: #f2f2f2 !important;
    padding: 5px 10px !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    margin-top: 6px !important;
    cursor: pointer !important;
    transition: 0.2s ease !important;
}
.edit-link:hover {
    color: #555 !important;
    background: #eaeaea !important;
    text-decoration: underline !important;
}

/* نص الكومنت */
.comment-text {
    display: block !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #333 !important;
    background: white !important;
    padding: 12px 15px !important;
    border-radius: 6px !important;
    margin-top: 15px !important;
    margin-bottom: 15px !important; margin-left: -75px!important;
    border-left: 4px solid var(--psg-accent) !important;
    box-shadow: 0 6px 18px rgba(25,40,70,0.04) !important;
}

/* زر الرد */
.reply .comment-reply-link {
    display: inline-block !important;
    background: var(--psg-danger) !important;
    color: #fff !important;
    padding: 8px 14px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    transition: 0.25s ease !important;
    cursor: pointer !important;
}
.reply .comment-reply-link:hover {
    background: var(--psg-primary) !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* تحسينات عامة صغيرة */
.fn, .says, .comment-text, .edit-link, .reply .comment-reply-link {
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

.annuler {
    display: inline-block;
    margin-left: 8px;
    padding: 8px 10px;
    background-color: #d40000; /* أحمر */
    color: #ffffff !important;
    font-weight: 600;
    font-size: 60%;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.3s ease;
}

/* أي نص داخل الزر يبقى أبيض */
.annuler * {
    color: #fff !important;
}

.annuler:hover {
    background-color: #ffcc00; /* أصفر */
    color: #0a1a3a !important; /* كحلي داكن */
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* النص داخل الهوفر */
.annuler:hover * {
    color: #0a1a3a !important;
}

/* دعم الوضع الداكن لو احتجت لاحقًا (اختياري) */
@media (prefers-color-scheme: dark) {
    :root{
        --psg-muted: #162033;
        --psg-text: #eaeef5;
        --psg-muted-text: #9aa6b2;
    }
    .comment-text { background: rgba(255,255,255,0.02) !important; color: var(--psg-text) !important; border-left-color: rgba(255,193,7,0.25) !important; }
    .fn { background: rgba(255,255,255,0.02) !important; }
}


#comments .comment .comment-body,
#comments .pingback .comment-body {
    margin-bottom: 10px;
}

/* الكمبيوتر */
@media (min-width: 768px) {
    #comments .comment .comment-body,
    #comments .pingback .comment-body {
        margin-bottom: 20px;
    }
}


/* 5. Error Message Styling (NEW) */
.comment-error-message {
    /* تنسيق صندوق الرسالة */
    background-color: #fcebeb; /* Light Red */
    color: #a94442; /* Dark Red Text */
    border: 1px solid #ebccd1; 
    padding: 15px; 
    margin-bottom: 20px; 
    border-radius: 8px; /* زوايا مستديرة */
    font-weight: 500; 
    text-align: center;
    
    /* لتمكين تأثير الاختفاء السلس */
    opacity: 1; /* يبدأ مرئياً */
    transition: opacity 0.5s ease; /* تأثير اختفاء سلس لمدة نصف ثانية */
}