/* static\pages\css\themes\theme-mid.css - الطبقة المتوسطة (ألماسي / بلاتيني) */
/* ========= نظام الألماس الأزرق والبلاتين (الطبقة المتوسطة) ========= */
body.budget-mid {
    background: radial-gradient(circle at center, rgba(210, 210, 220, 0.3) 0%, rgba(180, 180, 200, 0.4) 100%);
}

body.budget-mid .bg-overlay {
    background: radial-gradient(circle at center, rgba(16, 30, 56, 0.8) 0%, rgba(2, 6, 17, 0.95) 100%);
}

/* جميع النصوص الرئيسية في الطبقة المتوسطة - تأثير ألماسي أزرق */
body.budget-mid .logo h1,
body.budget-mid .hero h2,
body.budget-mid .exchange-rate,
body.budget-mid .expanded-title {
    background: linear-gradient(135deg, #ffffff 0%, #b9f2ff 25%, #70a1ff 50%, #b9f2ff 75%, #ffffff 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 20px rgba(185, 242, 255, 0.5);
    animation: diamondShimmer 4s linear infinite;
}
/* تخصيص سعر الصرف فقط بلون أخضر مالي */
body.budget-mid .exchange-rate {
    background: linear-gradient(135deg, #e8ffd0 0%, #a0e57e 25%, #4caf50 50%, #a0e57e 75%, #e8ffd0 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 20px rgba(76, 175, 80, 0.5);
    animation: diamondShimmer 4s linear infinite;
}

/* النصوص الثانوية في الطبقة المتوسطة */
body.budget-mid .hero .sub {
    color: #eef4ff;
    text-shadow: 0 0 10px rgba(112, 161, 255, 0.6);
}
body.budget-mid .logo p {
    color: #c8dcff;
    text-shadow: 0 0 6px rgba(112, 161, 255, 0.4);
}
body.budget-mid .exchange-rate span:first-child {
    color: #d0e4ff;
    text-shadow: 0 0 6px rgba(112, 161, 255, 0.4);
}
body.budget-mid .card h3 {
    text-shadow: 0 0 8px rgba(112, 161, 255, 0.5);
}
body.budget-mid .card h3 small {
    color: #d0e4ff;
    text-shadow: 0 0 4px rgba(112, 161, 255, 0.4);
}
body.budget-mid .card p {
    color: #f0f8ff;
    text-shadow: 0 0 4px rgba(112, 161, 255, 0.3);
}
body.budget-mid .budget-hint {
    color: #d0e4ff;
    text-shadow: 0 0 4px rgba(112, 161, 255, 0.4);
}

/* بطاقات الفئة الماسية */
body.budget-mid .card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(185, 242, 255, 0.3);
}
body.budget-mid .card:hover {
    border-color: #d4af37;
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.5), inset 0 0 20px rgba(212, 175, 55, 0.1);
    transform: translateY(-10px) scale(1.02);
}
body.budget-mid .card i {
    background: linear-gradient(135deg, #b9f2ff, #70a1ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 10px rgba(185, 242, 255, 0.8));
}

/* الأزرار في الطبقة المتوسطة – تدرج أسود-كحلي مع لمسات ذهبية */
body.budget-mid .btn-emp,
body.budget-mid .budget-btn,
body.budget-mid .back-btn {
    background: linear-gradient(135deg, #0a0a1a, #1a1a2e, #0e1a2a);
    border: 1px solid rgba(212, 175, 55, 0.5);
    color: #e9e2c7;
    text-shadow: 0 0 4px rgba(212, 175, 55, 0.3);
    transition: border-color 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.4s ease, box-shadow 0.4s ease, text-shadow 0.4s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
body.budget-mid .btn-emp:hover,
body.budget-mid .budget-btn:hover,
body.budget-mid .back-btn:hover {
    background: linear-gradient(135deg, #1a1a2e, #0a0a1a, #2a2a3e);
    border-color: #d4af37;
    color: #ffffff;
    box-shadow: 0 0 16px rgba(212, 175, 55, 0.5);
    transform: scale(1.02);
}
/* أزرار المحافظات في الطبقة المتوسطة */
body.budget-mid .city-btn {
    border-color: rgba(212, 175, 55, 0.6);
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3);
}
body.budget-mid .city-btn:hover {
    background: rgba(185, 242, 255, 0.2);
    border-color: #d4af37;
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3);
}
body.budget-mid .city-btn.active {
    background: linear-gradient(135deg, rgba(185, 242, 255, 0.3), rgba(185, 242, 255, 0.1));
    border-color: #ffffff;
    box-shadow: 0 0 15px rgba(185, 242, 255, 0.6);
    text-shadow: 0 0 6px rgba(185, 242, 255, 0.8);
}

/* شريط التنقل في الطبقة المتوسطة */
body.budget-mid .navbar {
    border-bottom-color: rgba(212, 175, 55, 0.6);
}
body.budget-mid .nav-links a:before {
    background: linear-gradient(90deg, #b9f2ff, #70a1ff);
}
body.budget-mid .nav-links a:hover {
    color: #ffffff;
}

/* خانة الميزانية في الطبقة المتوسطة */
body.budget-mid .budget-box {
    border-color: rgba(212, 175, 55, 0.6);
    background: rgba(2, 6, 17, 0.8);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(112, 161, 255, 0.2);
}
body.budget-mid .budget-box i {
    color: #ffffff;
    filter: drop-shadow(0 0 5px rgba(185, 242, 255, 0.7));
}
body.budget-mid .budget-input-group input {
    border-color: rgba(212, 175, 55, 0.6);
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
}
body.budget-mid .budget-input-group input:focus {
    border-color: #d4af37;
    box-shadow: 0 0 12px rgba(185, 242, 255, 0.5);
}

/* عناصر أخرى في الطبقة المتوسطة */
body.budget-mid .card-item {
    border-color: rgba(185, 242, 255, 0.3);
    background: rgba(2, 6, 17, 0.7);
}
body.budget-mid .card-item:hover {
    border-color: #b9f2ff;
    box-shadow: 0 20px 35px rgba(0,0,0,0.6), 0 0 15px rgba(185, 242, 255, 0.4);
}
body.budget-mid .btn-detail {
    color: #b9f2ff;
}
body.budget-mid .btn-detail:hover {
    background: #b9f2ff;
    color: #020611;
}
body.budget-mid .footer {
    border-top-color: rgba(212, 175, 55, 0.5);
}
body.budget-mid .footer span {
    color: #b9f2ff;
}
body.budget-mid .currency-select {
    border-color: rgba(185, 242, 255, 0.5);
}
body.budget-mid .currency-select:hover,
body.budget-mid .currency-select:focus {
    background-color: rgba(185, 242, 255, 0.2);
    box-shadow: 0 0 12px rgba(185, 242, 255, 0.5);
}

/* ========= الخطوط الفاصلة ========= */
body.budget-mid .hero::after {
    content: '';
    display: block;
    width: 120px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #d4af37, transparent);
    margin: 2rem auto 0;
    opacity: 0.8;
}
body.budget-mid .cards-section::after {
    content: '';
    display: block;
    width: 150px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #d4af37, transparent);
    margin: 3rem auto 0;
    opacity: 0.7;
}

/* ========= أنيميشن الألماس ========= */
@keyframes diamondShimmer {
    to { background-position: 200% center; }
}

/* شريط التمرير في الطبقة المتوسطة */
body.budget-mid ::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #b9f2ff, #70a1ff);
    box-shadow: inset 0 0 3px rgba(255,255,255,0.4), 0 0 5px rgba(112,161,255,0.3);
}