/* ===== STREND SMM - Dark Neon Theme ===== */

body {
  background-color: #0a0a0f !important;
  color: #e0e0e0 !important;
  padding-bottom: 70px !important;
}

/* الهيدر */
.navbar-default {
  background-color: #0f0f18 !important;
  border-color: rgba(168, 85, 247, 0.25) !important;
}
.navbar-default .navbar-brand,
.navbar-default .navbar-nav > li > a {
  color: #e0e0e0 !important;
}

/* الكارت الرئيسي بتاع الفورم */
.well {
  background: linear-gradient(145deg, #14141f, #1a1a26) !important;
  border: 1px solid rgba(168, 85, 247, 0.3) !important;
  border-radius: 16px !important;
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.15) !important;
  color: #e0e0e0 !important;
}

/* الليبلز */
.control-label {
  color: #b8b8c8 !important;
  font-weight: 600 !important;
}

/* حقول الإدخال (select, input, textarea) */
.form-control {
  background-color: #1a1a26 !important;
  border: 1px solid rgba(168, 85, 247, 0.35) !important;
  border-radius: 10px !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.form-control:focus {
  border-color: #a855f7 !important;
  box-shadow: 0 0 8px rgba(168, 85, 247, 0.5) !important;
  background-color: #1a1a26 !important;
  color: #ffffff !important;
}

/* الوصف (Description panel) */
.panel-body.border-solid.border-rounded {
  background-color: #14141f !important;
  border: 1px solid rgba(6, 182, 212, 0.3) !important;
  border-radius: 10px !important;
  color: #c8c8d8 !important;
}

/* زرار الإرسال - تدرج نيون */
.btn-primary {
  background: linear-gradient(90deg, #a855f7, #06b6d4) !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.4) !important;
}

.btn-primary:hover {
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.7) !important;
}

/* حقل الرصيد readonly */
input[readonly].form-control {
  background-color: #14141f !important;
  color: #a855f7 !important;
  font-weight: 700 !important;
}

/* رسائل النجاح/الخطأ */
.alert-success {
  background-color: rgba(6, 182, 212, 0.15) !important;
  border-color: #06b6d4 !important;
  color: #7dd3fc !important;
}
.alert-danger {
  background-color: rgba(239, 68, 68, 0.15) !important;
  border-color: #ef4444 !important;
  color: #fca5a5 !important;
}

/* ===== زرار إضافة الرصيد جنب البادج ===== */
.strend-addfunds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: 10px 6px;
  border-radius: 50%;
  background: linear-gradient(90deg, #a855f7, #06b6d4);
  color: #fff !important;
  font-size: 14px;
  text-decoration: none !important;
}

/* ===== قسم البانرات + الأيقونات + البحث ===== */
.strend-top-section {
  max-width: 700px;
  margin: 16px auto;
  padding: 0 16px;
}

.strend-banners {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

.strend-banner {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  text-decoration: none !important;
  color: #fff !important;
}

.strend-banner-channel {
  background: linear-gradient(135deg, #1a1a2e, #0f4d33);
  border: 1px solid rgba(37, 211, 102, 0.4);
}

.strend-banner-support {
  background: linear-gradient(135deg, #1a1a2e, #0a4d5c);
  border: 1px solid rgba(6, 182, 212, 0.4);
}

.strend-banner-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.strend-banner-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  font-size: 12px;
}

.strend-banner-text strong {
  font-size: 13px;
}

.strend-banner-text small {
  color: #cfcfe0;
}

.strend-banner-arrow {
  margin-inline-start: auto;
  font-size: 18px;
  opacity: 0.7;
}

.strend-icons-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.strend-icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 4px;
  border-radius: 14px;
  background: #14141f;
  border: 1px solid rgba(168, 85, 247, 0.2);
  text-decoration: none !important;
  color: #e0e0e0 !important;
  font-size: 12px;
}

.strend-icon-item.active {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.25), rgba(6, 182, 212, 0.25));
  border-color: #a855f7;
  color: #d8b4fe !important;
}

.strend-icon-circle {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #1f1f2e;
  font-size: 18px;
}

.strend-yt { color: #ff0000; }
.strend-fb { color: #1877f2; }
.strend-ig { color: #e1306c; }
.strend-tt { color: #fff; }
.strend-more { color: #a855f7; }

.strend-search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #14141f;
  border: 1px solid rgba(168, 85, 247, 0.25);
  border-radius: 12px;
  padding: 12px 14px;
  color: #9a9ab0;
}

.strend-search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
}

/* ===== زرار الواتساب العائم ===== */
.strend-float-whatsapp {
  position: fixed;
  bottom: 90px;
  inset-inline-end: 16px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff !important;
  font-size: 26px;
  box-shadow: 0 0 16px rgba(37, 211, 102, 0.6);
  z-index: 999;
  text-decoration: none !important;
}

/* ===== شريط التنقل السفلي ===== */
.strend-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #0f0f18;
  border-top: 1px solid rgba(168, 85, 247, 0.25);
  padding: 8px 0;
  z-index: 1000;
}

.strend-bn-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: #9a9ab0 !important;
  text-decoration: none !important;
}

.strend-bn-item i {
  font-size: 18px;
}

.strend-bn-center {
  position: relative;
  top: -14px;
}

.strend-bn-center-circle {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #a855f7, #06b6d4);
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.6);
  color: #fff;
  font-size: 20px;
}
/* تصحيح الخلفية بالكامل */
html, body, .container, .container-fluid {
  background-color: #0a0a0f !important;
}

/* الهيدر: لوجو + رصيد بجانب بعض */
.strend-header-flex {
  display: flex !important;
  align-items: center !important;
  gap: 10px;
}
.navbar-brand img {
  height: 44px !important;
  width: auto !important;
  max-width: none !important;
}
.strend-header-balance {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-inline-start: auto;
  margin-inline-end: 10px;
}
.strend-balance-text {
  background: #14141f;
  border: 1px solid rgba(168,85,247,.4);
  color: #fff;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
}
.strend-header-balance .strend-addfunds-btn {
  background: #25D366 !important;
  width: 32px;
  height: 32px;
  font-size: 15px;
}
/* تصحيح شامل للخلفية في كل الصفحات */
html, body {
  background-color: #0a0a0f !important;
  min-height: 100vh;
}
.container, .container-fluid, .row,
[class^="col-"], [class*=" col-"] {
  background-color: transparent !important;
}

/* تكبير الشعار أكتر */
.navbar-brand img {
  height: 60px !important;
}/* --- إجبار الخلفية على اللون الداكن جداً --- */
html, body, .wrapper, .content, .main-content {
    background-color: #0b0c11 !important;
    background-image: none !important;
    color: #ffffff !important;
}

/* --- تعديل المربعات (الأيقونات) لتشبه الصورة المطلوبة --- */
div[class*="card"], .category-box, .service-card, .social-icon-item {
    background: #161922 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 18px !important;
    box-shadow: none !important;
}

/* --- زر الواتساب والدعم الفني (البنفسجي والأزرق) --- */
.whatsapp-btn, a[href*="wa.me"], .support-btn {
    border-radius: 15px !important;
    background: linear-gradient(90deg, #12141d 0%, #1a1d26 100%) !important;
    border: 1px solid rgba(138, 43, 226, 0.3) !important;
}

/* --- القائمة السفلية (Bottom Navigation) --- */
nav.navbar-fixed-bottom, .footer-menu, .mobile-nav {
    background: #11131a !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    height: 70px !important;
}

/* --- زر "+" الكبير في المنتصف مع تأثير التوهج (Glow) --- */
.nav-item-center a, .add-order-main-btn, a[href*="add-order"] {
    background: linear-gradient(135deg, #8a2be2 0%, #00d2ff 100%) !important;
    box-shadow: 0px 0px 20px rgba(138, 43, 226, 0.6) !important;
    border: 4px solid #0b0c11 !important;
    width: 65px !important;
    height: 65px !important;
    border-radius: 50% !important;
    margin-top: -35px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* --- حقول الاختيار (Category & Service) --- */
select.form-control, .form-control, input {
    background-color: #1a1d26 !important;
    border: 1px solid #2d3240 !important;
    border-radius: 12px !important;
    color: #fff !important;
    height: 50px !important;
}

/* --- النصوص داخل المربعات --- */
.card-title, .category-name, p, span {
    color: #ececec !important;
}
/* --- 2. تعميق لون الخلفية الأساسية للموقع --- */
body, .main-wrapper, .app-content, .wrapper {
    background-color: #0b0c11 !important;
}

/* --- 3. تعديل مربعات السوشيال ميديا (يوتيوب، فيسبوك...) --- */
.category-item, .social-box, div[class*="card"], .nav-tabs .nav-item {
    background: #12141d !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 18px !important;
}

/* --- 4. زر "الكل" (النشط) - إضافة التدرج والتوهج --- */
.active-category, .category-item.active, .nav-link.active {
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%) !important;
    box-shadow: 0px 4px 15px rgba(106, 17, 203, 0.4) !important;
    border: none !important;
}

/* --- 5. تعديل حقول البحث والاختيار (Search & Dropdowns) --- */
.form-control, select, input, .search-input {
    background-color: #161922 !important;
    border: 1px solid #252833 !important;
    border-radius: 12px !important;
    color: #ffffff !important;
}

/* --- 6. القائمة السفلية (Bottom Nav) --- */
.footer-menu, .mobile-nav, .navbar-fixed-bottom {
    background: #0f1118 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.03) !important;
}

/* --- 7. زر "+" الكبير في المنتصف مع التوهج البنفسجي القوي --- */
.nav-item-center a, .plus-btn-main, a[href*="add-order"] {
    background: linear-gradient(135deg, #8e2de2, #4a00e0) !important;
    box-shadow: 0px 0px 25px rgba(142, 45, 226, 0.8) !important;
    border: 4px solid #0b0c11 !important;
    width: 65px !important;
    height: 65px !important;
    transform: translateY(-20px);
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50% !important;
}

/* --- 8. تحسين أيقونات الواتساب والدعم الفني في الأعلى --- */
.support-card, .whatsapp-top, .top-header-btn {
    background: linear-gradient(90deg, #161922, #1c1f2b) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* --- 9. نصوص واضحة --- */
h1, h2, h3, h4, h5, h6, p, span, label {
    color: #e0e0e0 !important;
}/* --- 1. تعديل قائمة الاختيارات (Dropdown) لتكون سوداء تماماً --- */
select option {
    background-color: #11131a !important; /* خلفية داكنة */
    color: #ffffff !important; /* نص أبيض ناصع */
}

/* لضمان تغيير اللون في بعض المتصفحات والهواتف */
select {
    background-color: #11131a !important;
    color: #ffffff !important;
}

/* --- 2. إخفاء شريط البحث تماماً --- */
/* هذا الكود يبحث عن أي حقل إدخال يحتوي على كلمة بحث ويخفيه هو وأيقونة العدسة */
div:has(> input[placeholder*="بحث"]), 
div:has(> input[placeholder*="Search"]),
.search-box, 
.input-group:has(.fa-search) {
    display: none !important;
}

/* كود إضافي للتأكد من إخفاء حاوية البحث في سكربتات SMM */
#search-input-container, .search-input-box {
    display: none !important;
}/* --- 1. إخفاء مربع البحث تماماً --- */
.search-box, .search-container, .input-group:has(input[type="search"]), 
input[placeholder*="بحث"], input[placeholder*="Search"] {
    display: none !important;
}

/* --- 2. إجبار القائمة المنسدلة على اللون الأسود والنص الأبيض --- */

/* استهداف العناصر العادية */
select, option {
    background-color: #11131a !important;
    color: #ffffff !important;
}

/* استهداف القوائم المنسدلة الاحترافية (مثل Select2) */
.select2-container--default .select2-results__option {
    background-color: #11131a !important;
    color: #ffffff !important;
}

/* لون العنصر المختار حالياً */
.select2-container--default .select2-selection--single {
    background-color: #11131a !important;
    color: #ffffff !important;
    border: 1px solid #2d3240 !important;
}

/* استهداف أي قائمة منسدلة عامة تظهر بوسط الشاشة */
.dropdown-menu, .dropdown-content, .ss-content {
    background-color: #11131a !important;
    color: #ffffff !important;
    border: 1px solid #2d3240 !important;
}

/* استهداف النصوص داخل خيارات القائمة لضمان وضوحها */
.dropdown-item, .select2-results__option--highlighted, option {
    color: #ffffff !important;
}

/* لإصلاح اللون الباهت الذي يظهر في الصورة */
.select2-results__option[aria-selected=true], 
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #6236ff !important; /* لون تمييز بنفسجي عند الاختيار */
    color: #ffffff !important;
}

/* استهداف نصوص الخدمات والأسعار داخل القائمة */
span, div, b {
    color: inherit; /* تجعلها تأخذ لون النص الأبيض الموحد */
}
/* 1. إخفاء رأس الجدول لأنه لا يتناسب مع نظام الكروت */
table thead {
    display: none;
}

/* 2. تحويل الجدول وجسم الجدول إلى بلوكات مرنة */
table, table tbody, table tr {
    display: block;
    width: 100%;
}

/* 3. تصميم الكارت (السطر سابقاً) */
table tbody tr {
    background-color: #1e1e2d; /* لون الخلفية الداكن للموقع */
    margin-bottom: 15px;
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #2b2b40;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}

/* 4. تصميم الخلايا (البيانات داخل الكارت) */
table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #2b2b40;
    color: #ffffff;
    text-align: right;
}

/* إزالة الخط السفلي من آخر عنصر في الكارت */
table tbody td:last-child {
    border-bottom: none;
}

/* 5. إضافة عناوين لكل معلومة (اختياري لكن مهم للتنظيم) */
/* يمكنك إضافة العناوين يدوياً أو عبر خاصية data-label في HTML */
table tbody td::before {
    content: attr(data-label); /* سيعرض اسم العمود بجانب القيمة */
    font-weight: bold;
    color: #ff9800; /* اللون البرتقالي المستخدم في الموقع */
    margin-left: 10px;
}

/* 6. تنسيق خاص لزر "الحالة" أو "الرابط" */
table tbody td a {
    color: #ff9800;
    text-decoration: none;
    word-break: break-all; /* لمنع تمدد الكارت بسبب الروابط الطويلة */
}

/* تنسيق حالة الطلب (مكتمل، قيد التنفيذ...) */
.status-badge {
    background: #28c76f26;
    color: #28c76f;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
}
/* تنسيق الحاوية الرئيسية للطلبات */
table, tbody, tr, td {
    display: block !important;
    width: 100% !important;
}

thead {
    display: none !important; /* إخفاء الرأس القديم */
}

/* تصميم الكارت (المربع المنظم) */
tr {
    background: #1c1c2b !important; /* لون خلفية داكن احترافي */
    margin-bottom: 20px !important;
    padding: 15px !important;
    border-radius: 15px !important;
    border: 1px solid #383854 !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.3) !important;
    position: relative;
    overflow: hidden;
}

/* إضافة خط جانبي ملون ليعطي شكل جمالي */
tr::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 5px;
    background: #ff9800; /* اللون البرتقالي */
}

/* تنسيق الخلايا لتصبح صفوفاً داخل الكارت */
td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 5px !important;
    border-bottom: 1px solid #2d2d44 !important;
    color: #fff !important;
    font-size: 14px !important;
    text-align: right !important;
}

td:last-child {
    border-bottom: none !important;
}

/* إضافة العناوين باللغة العربية قبل كل معلومة */
td:nth-child(1)::before { content: "رقم الطلب:"; color: #ff9800; font-weight: bold; }
td:nth-child(2)::before { content: "التاريخ:"; color: #ff9800; font-weight: bold; }
td:nth-child(3)::before { content: "الرابط:"; color: #ff9800; font-weight: bold; }
td:nth-child(4)::before { content: "التكلفة:"; color: #ff9800; font-weight: bold; }
td:nth-child(5)::before { content: "عداد البداية:"; color: #ff9800; font-weight: bold; }
td:nth-child(6)::before { content: "الكمية:"; color: #ff9800; font-weight: bold; }
td:nth-child(7)::before { content: "الخدمة:"; color: #ff9800; font-weight: bold; }
td:nth-child(8)::before { content: "الحالة:"; color: #ff9800; font-weight: bold; }
td:nth-child(9)::before { content: "الباقي:"; color: #ff9800; font-weight: bold; }

/* تنسيق خاص للرابط لكي لا يخرج عن المربع */
td:nth-child(3) {
    word-break: break-all !important;
    font-size: 11px !important;
    color: #00bcd4 !important; /* لون سماوي للرابط */
}

/* تنسيق حالة الطلب (مكتمل) */
td:nth-child(8) {
    color: #4caf50 !important; /* لون أخضر للحالة */
    font-weight: bold;
}

/* تنسيق زر "إضافة طلب" أو الأزرار السفلية لتناسب الألوان */
.btn-primary, .add-order-btn {
    background: linear-gradient(45deg, #ff9800, #f44336) !important;
    border: none !important;
    border-radius: 10px !important;
}
/* 1. نقل علامة الواتساب من اليمين إلى اليسار */
.whatsapp-button, [class*="whatsapp"] {
    right: auto !important;
    left: 20px !important;
}
/* 1. لجعل الرقم (82.881) والعملة (EGP) في سطر واحد بالعرض */
.header-money, .balance-box, [class*="balance"] { 
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px; 
    white-space: nowrap !important;
}

/* 2. لجعل علامة الزائد (+) وصندوق الرصيد بجانب بعض في سطر واحد */
.header-balance-wrapper, .nav-item-balance, [class*="balance-wrapper"] {
    display: flex !important;
    flex-direction: row !important; 
    align-items: center !important;
    gap: 8px;
}
/* 1. الحفاظ على الرصيد والعملة في سطر واحد */
.header-money, .balance-box, [class*="balance"] { 
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    white-space: nowrap !important;
    gap: 5px;
}

/* 2. إظهار علامة الزائد وتحريك الجزء الأيسر (الرصيد + الزائد) لليمين شوية */
.header-balance-wrapper, .nav-item-balance, [class*="balance-wrapper"] {
    display: flex !important;
    flex-direction: row !important; 
    align-items: center !important;
    margin-left: 20px !important; /* دي اللي هترجع علامة الـ + للشاشة وتزقها يمين */
    gap: 10px;
    overflow: visible !important;
}

/* 3. تحريك الهيدر بالكامل (بما فيه الشعار) لليمين قليلاً */
header .container, .navbar .container, .top-header {
    padding-left: 15px !important; /* بتزق كل المحتوى ناحية اليمين */
    padding-right: 5px !important;
}

/* ضمان ظهور زر الإضافة */
.btn-plus, .add-funds-btn, [class*="plus"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}