/*
Plugin Name: DegX Private Post Styles
Description: Custom styles for the DegX Private Post plugin.
Version: 1.0
*/

/* Private Post Buttons Styles */
.degx-private-post-buttons {
    margin-top: 20px; /* مسافة علوية للفصل عن نموذج كلمة المرور */
    text-align: center; /* توسيط الأزرار */
}

.degx-private-post-button {
    display: inline-block; /* لعرض الأزرار بجانب بعضها */
    background-color: #007bff; /* لون خلفية أزرق أساسي */
    color: #fff; /* لون النص أبيض */
    padding: 10px 20px; /* مسافة داخلية للزر */
    margin: 5px; /* مسافة خارجية بين الأزرار */
    border-radius: 5px; /* زوايا مستديرة */
    text-decoration: none; /* إزالة الخط السفلي */
    font-weight: bold; /* نص عريض */
    transition: background-color 0.3s ease; /* انتقال سلس لتغيير لون الخلفية */
}

.degx-private-post-button:hover {
    background-color: #0056b3; /* لون أغمق عند تمرير الفأرة */
}

/* Optional: Basic styling for the password form container */
.degx-private-post-form {
    border: 1px solid #ddd; /* حدود خفيفة */
    padding: 20px; /* مسافة داخلية */
    border-radius: 5px; /* زوايا مستديرة */
    background-color: #f9f9f9; /* خلفية فاتحة */
    max-width: 500px; /* تحديد أقصى عرض للنموذج */
    margin: 20px auto; /* توسيط النموذج وإضافة مسافة علوية */
    text-align: center; /* توسيط محتوى النموذج */
}

.degx-private-post-form input[type="password"] {
    padding: 10px; /* مسافة داخلية */
    margin-right: 10px; /* مسافة على اليمين من الزر */
    border: 1px solid #ccc;
    border-radius: 4px;
}

.degx-private-post-form button[type="submit"] {
    padding: 10px 20px;
    background-color: #28a745; /* لون خلفية أخضر للزر */
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.degx-private-post-form button[type="submit"]:hover {
    background-color: #218838;
}

/* Responsive Styles for Private Post Form and Buttons */
@media (max-width: 600px) {
    .degx-private-post-form {
        padding: 15px; /* تقليل المسافة الداخلية على الشاشات الصغيرة */
        margin: 15px auto; /* تقليل المسافة الخارجية */
    }

    .degx-private-post-form input[type="password"] {
        width: 100%; /* جعل حقل كلمة المرور يأخذ العرض الكامل */
        margin-right: 0; /* إزالة المسافة على اليمين */
        margin-bottom: 10px; /* إضافة مسافة سفلية للفصل عن الزر */
        box-sizing: border-box; /* تضمين الحشو والحدود في العرض الإجمالي */
    }

    .degx-private-post-form button[type="submit"] {
         width: 35%; /* جعل زر الإدخال يأخذ العرض الكامل */
         margin-bottom: 10px; /* إضافة مسافة سفلية للفصل عن الأزرار الأخرى */
         box-sizing: border-box; /* تضمين الحشو والحدود في العرض الإجمالي */
    }

    .degx-private-post-buttons {
        display: flex; /* استخدام flexbox لتسهيل التحكم في الأزرار */
        flex-direction: column; /* عرض الأزرار عمودياً */
        align-items: center; /* توسيط الأزرار */
        margin-top: 10px; /* تقليل المسافة العلوية */
    }

    .degx-private-post-button {
        display: block; /* للتأكيد على أن الأزرار تظهر ككتل */
        width: calc(100% - 10px); /* عرض كامل مع الأخذ في الاعتبار الهامش */
        margin: 5px 0; /* مسافة عمودية بين الأزرار */
        box-sizing: border-box; /* تضمين الحشو والحدود في العرض الإجمالي */
    }
}

.degx-private-post-timer {
    margin-top: 15px;
    font-size: 1.1em;
    font-weight: bold;
    text-align: center;
}