/* 1. التنسيق الأساسي للمستطيل */
.journal-btn {
    display: block !important;
    background-color: #0056b3 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    width: 66% !important;
    margin: 0 auto 10px auto !important;
    padding: 12px 0 !important;
    border-radius: 8px !important;
    text-align: center !important;
    font-weight: bold !important;
    font-size: 16px !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
    transition: 0.3s !important;
}

/* 2. التأثير عند تمرير الماوس */
.journal-btn:hover {
    background-color: #00d7ff !important;
    color: #003d80 !important;
}

/* 3. الذكاء: ثبات اللون السماوي بناءً على الصفحة المفتوحة حالياً */

/* إذا كان رابط الصفحة يحتوي على submission */
[href*="submission"].journal-btn:active, 
[href*="submission"]:focus { background-color: #00d7ff !important; color: #003d80 !important; }

/* الحل الأقوى: فحص الرابط النشط */
/* سيظل المستطيل سماوياً طالما أن الرابط المفتوح هو نفسه رابط الزر */
.journal-btn[href]:active, .journal-btn[href]:focus {
    background-color: #00d7ff !important;
    color: #003d80 !important;
}

/* استهداف الروابط يدوياً لضمان الثبات في OJS */
a[href$="submission"]:active { background-color: #00d7ff !important; }
a[href$="about"]:active { background-color: #00d7ff !important; }
.journal-btn.current {
    background-color: #00d7ff !important;
    color: #003d80 !important;
}