:root{
  --panel-bg: #ffffff;
  --panel-ink: #222;
  --panel-muted: #6b7280;
  --panel-border: rgba(16,24,40,0.06);
  --panel-radius: 12px;
  --panel-shadow: 0 6px 18px rgba(16,24,40,0.08);
  --accent: #2563eb;
  --accent-contrast: #fff;
  --gap: 14px;
  --pad: 16px;
  --header-size: 1.05rem;
  --body-size: .95rem;
  --footer-size: .9rem;
}

/* Dark mode variables (prefers or .dark class) */
@media (prefers-color-scheme: dark){
  :root{
    --panel-bg: #0b1220;
    --panel-ink: #e6eef8;
    --panel-muted: #9aa6b2;
    --panel-border: rgba(255,255,255,0.04);
    --panel-shadow: 0 8px 26px rgba(2,6,23,0.6);
    --accent: #3b82f6;
    --accent-contrast: #061029;
  }
}
body.dark {
  --panel-bg: #0b1220;
  --panel-ink: #e6eef8;
  --panel-muted: #9aa6b2;
  --panel-border: rgba(255,255,255,0.04);
  --panel-shadow: 0 8px 26px rgba(2,6,23,0.6);
  --accent: #3b82f6;
  --accent-contrast: #061029;
}

/* Panel base */
.panel{
  background: var(--panel-bg);
  color: var(--panel-ink);
  border-radius: var(--panel-radius);
  box-shadow: var(--panel-shadow);
  border: 1px solid var(--panel-border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: transform .18s ease, box-shadow .18s ease;
  font-family: "Tahoma", Arial, sans-serif;
}

/* hover lift */
.panel:hover{
  transform: translateY(-6px);
  box-shadow: 0 12px 36px rgba(16,24,40,0.12);
}

/* header, body, footer */
.panel-header,
.panel-body,
.panel-footer{
  padding: var(--pad);
}

/* header */
.panel-header{
  display:flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  border-bottom: 1px dashed var(--panel-border);
  font-size: var(--header-size);
  font-weight: 600;
}

/* header left group (title + subtitle) */
.panel-header .title{
  display:flex;
  gap:12px;
  align-items:center;
  min-width: 0;
}

/* optional avatar / icon */
.panel-header .avatar{
  width:44px;
  height:44px;
  border-radius:10px;
  background:linear-gradient(135deg,var(--accent), #7dd3fc20);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color: var(--accent-contrast);
  font-weight:700;
  flex: 0 0 44px;
}

/* title text */
.panel-header h3{
  margin:0;
  font-size:1rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* subtitle small */
.panel-header .muted{
  font-size:.82rem;
  color:var(--panel-muted);
  margin-top:2px;
}

/* actions in header */
.panel-header .actions{
  display:flex;
  gap:8px;
  align-items:center;
}

/* body */
.panel-body{
  font-size: var(--body-size);
  line-height:1.5;
  padding-top:12px;
  padding-bottom:12px;
}

/* footer */
.panel-footer{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  border-top:1px dashed var(--panel-border);
  font-size: var(--footer-size);
  color:var(--panel-muted);
}

/* small badge/useful controls */
.badge{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  font-weight:600;
  font-size:.82rem;
  background: linear-gradient(90deg,var(--accent), #60a5fa20);
  color:var(--accent-contrast);
  border: 1px solid rgba(0,0,0,0.04);
}

/* variant: outline */
.panel.outline{
  background: transparent;
  box-shadow: none;
}

/* sizes */
.panel.sm { --pad:10px; --header-size:.95rem; --body-size:.88rem; --footer-size:.8rem; }
.panel.lg { --pad:20px; --header-size:1.15rem; --body-size:1rem; --footer-size:.95rem; }

/* responsive: full width on small screens */
@media (max-width:720px){
  .panel{
    border-radius:10px;
  }
  .panel-header .avatar{ width:40px; height:40px; }
}

/* helper: row inside body */
.row{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}

/* helper: column */
.col{
  flex:1 1 0;
  min-width:0;
}

/* text truncate helpers */
.truncate{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* link style inside panel */
.panel a{
  color:var(--accent);
  text-decoration:none;
  font-weight:600;
}

/* subtle divider */
.divider{
  height:1px;
  background:var(--panel-border);
  margin:8px 0;
}

/* RTL safety: inherit direction */
.panel, .panel * { direction: inherit; text-align: inherit; }

/* utility: center */
.center { display:flex; align-items:center; justify-content:center; gap:8px; }

/*////////////////////////////*/




    /*body {*/
    /*  margin: 0;*/
    /*  padding: 0;*/
    /*  font-family: "Tahoma", Arial, sans-serif;*/
    /*  background-color: #f9f9fb;*/
    /*  color: #333;*/
    /*  transition: 0.3s;*/
    /*}*/

    :root {
      --side-width: 20%;
      --main-color: #c200ff;
      --secondary-color: #2127f3;
      --light-bg: #ffffff;
      --accent-color: #ff4081;
      --text-color: #333;
    }


    body.dark-mode {
      background-color: #121212;
      color: #f1f1f1;
    }

    body.dark-mode .navbar {
      background: linear-gradient(90deg, #0d7377, #005082);
    }

    body.dark-mode .sidebar {
      background: linear-gradient(180deg, #0d7377, #005082);
    }

    body.dark-mode .section {
      background: #1e1e1e;
      color: #f1f1f1;
    }

    /* ================== النافبار ================== */
    .navbar {
      position: fixed;
      top: 0;
      width: 100%;
      height: 50px;
      background: linear-gradient(90deg, var(--main-color), var(--secondary-color));
      color: white;
      display: flex;
      align-items: center;
      justify-content: space-around;
      padding: 0 15px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
      z-index: 1100;
    }

    .navbar .logo {
      font-weight: bold;
      font-size: 10px;
    }

    .navbar button {
      background: var(--accent-color);
      color: #fff;
      border: none;
      border-radius: 6px;
      padding: 6px 12px;
      font-size: 13px;
      cursor: pointer;
      transition: 0.3s;
      margin-left: 5px;
    }

    .navbar button:hover {
      background: #e91e63;
    }

    /* ================== الشريط الجانبي ================== */
    .sidebar {
      width: var(--side-width);
      background: linear-gradient(180deg, var(--secondary-color), var(--main-color), var(--secondary-color), var(--main-color));
      min-height: 100vh;
      overflow-y: auto;
      transition: 0.3s ease;
      position: fixed;
      left: 0;
      top: 50px;
      box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
      color: #fff;
    }

    .sidebar.closed {
      width: 0;
      padding: 0;
      overflow: hidden;
    }

  
.sidebar-header {
  
    font-family: Arial, sans-serif;
        background: #a600e7c9;
    position: fixed;
    top: 50px;
    right: 0;
    width: 80%;
    z-index: 1000;
}

.sidebar-header div {
    font-family: Arial, sans-serif;
    margin: 5px;
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 5px;
    color: blue;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
/* ================== نموذج البحث ================== */
    .search-form {
      display: flex;
      justify-content: center;
      gap: 10px;
      margin-top: 15px;
    }

    .search-form input {
      padding: 10px;
      border-radius: 6px;
      border: 1px solid #ccc;
      flex: 1;
      max-width: 200px;
    }

    .search-form button {
      background: var(--main-color);
      color: #fff;
      border: none;
      border-radius: 6px;
      padding: 10px 16px;
      cursor: pointer;
      transition: 0.3s;
    }

    .search-form button:hover {
      background: var(--secondary-color);
    }
    /* ================== المحتوى ================== */
    /*.main-content {*/
    /*  flex: 1;*/
      /* padding: 20px; */
    /*  transition: 0.3s ease;*/
      /*margin-left: var(--side-width);*/
      /*margin-left: 30%;*/
    /*  margin-top: 80px;*/
    /*}*/

   

    /* روابط القائمة */
    .nav-btn {
      display: block;
      padding: 10px;
      margin: 6px auto;
      border-radius: 6px;
      color: #fff;
      text-decoration: none;
      text-align: center;
      font-size: 14px;
      transition: 0.3s;
      background: rgba(255, 255, 255, 0.15);
      width: 85%;
      cursor: pointer;
      font-weight: bold;
    }

    .nav-btn:hover {
      background: rgba(255, 255, 255, 0.3);
      transform: translateX(3px);
    }

    /* القوائم المنسدلة */
    .dropdown {
      text-align: center;
    }

    .dropdown>button {
      margin: 6px auto;
      width: 90%;
      display: block;
    }

    .dropdown-content {
      display: none;
      margin: 6px auto 0 auto;
      background: rgba(255, 255, 255, 0.15);
      border-radius: 6px;
      padding: 4px;
      width: 70%;
    }

    .dropdown-content .nav-btn {
      padding: 8px;
      margin: 4px 0;
      font-size: 13px;
      background: rgba(0, 188, 212, 0.25);
      text-align: center;
      border-radius: 4px;
      width: 100%;
    }

    .dropdown-content .nav-btn:hover {
      background: var(--secondary-color);
      color: #fff;
    }

    /* ================== الأقسام ================== */
    .section {
      display: none;
      background: var(--light-bg);
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
      margin-bottom: 20px;
      margin-left: var(--side-width);
    }

    .section.active {
      display: block;
    }

    .main-content {
  max-width: 1200px;       /* أقصى عرض */
  margin: 50px auto;       /* في النص */
  padding: 20px;           /* مسافة داخلية */
  background: #fff;        /* خلفية بيضاء */
  border-radius: 12px;     /* زوايا ناعمة */
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* ظل ناعم */
  overflow: hidden;        /* يمنع أي محتوى يطلع برا */
}
 .sidebar.closed~.main-content {
      margin-left: 0;
    }
/* الوضع الليلي */
/*@media (prefers-color-scheme: dark) {*/
/*  .main-content {*/
/*    background: #1e1e1e;*/
/*    color: #eee;*/
/*  }*/
/*}*/

.main-content .box {
  background: #f0f0f0;
  padding: 15px;
  margin: 10px 0;
  border-radius: 8px;
}

  

  
  
 .alert {
    position: relative;
    padding: 8px 12px;
    margin-bottom: 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    text-align: center;   /* وسط أفقي */
    display: flex;
    justify-content: center; /* وسط أفقي */
    align-items: center;     /* وسط عمودي */
    min-height: 40px;        /* عشان يبقى الشكل متوازن */
}

.alert-danger {
    color: #842029;
    background-color: #f8d7da;
    border-color: #f5c2c7;
}


    

.btn-danger {
  background: #dc3545;
  color: #fff;
}
.btn-danger:hover {
  background: #bb2d3b;
}
.btn-secondary {
  background: #6c757d;
  color: #fff;
}
.btn-secondary:hover {
  background: #5c636a;
}
.btn-primary {
  background: #007bff;
  color: #fff;
}
.btn-primary:hover {
  background: #0069d9;
}

/* القائمة المنسدلة */
.user-menu {
  position: relative;
  display: inline-block;
}
.user-menu-list {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  background: #fff;
  min-width: 125px;
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  z-index: 1000;
  overflow: hidden;
}
.user-menu-list a {
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  color: #333;
  font-size: 14px;
}
.user-menu-list a:hover {
  background: #f1f1f1;
}
.user-menu-divider {
  height: 1px;
  background: #ddd;
  margin: 5px 0;
}
.show {
  display: block;
}

  
  
        :root {
            --primary-color: #3498db;
            --secondary-color: #2c3e50;
            --success-color: #2ecc71;
            --warning-color: #f39c12;
            --danger-color: #e74c3c;
            --light-color: #ecf0f1;
            --dark-color: #34495e;
            --text-color: #333;
            --border-radius: 12px;
            --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            --transition: all 0.25s ease;
        }



        .data-section { max-width:1200px; margin:20px auto; padding:18px; }

        .section-header { text-align:center; margin-bottom:18px; color:var(--secondary-color); }
        .section-header h2 { font-size:22px; position:relative; padding-bottom:10px; display:inline-block; }
        .section-header h2::after { content:''; display:block; height:3px; width:80px; background:var(--primary-color); margin:8px auto 0; }

        .cards-grid {
            display:grid;
            grid-template-columns: repeat(auto-fit, minmax(225px,1fr));
            gap:16px;
        }

        /* .card { background:#fff; border-radius:var(--border-radius); box-shadow:var(--box-shadow); overflow:hidden; transition:var(--transition); }
        .card:hover { transform:translateY(-4px); box-shadow:0 12px 30px rgba(0,0,0,0.12); }

        .card-header { padding:12px 14px; background:var(--primary-color); color:#fff; font-weight:700; text-align:center; }
        .card-body { padding:14px; text-align:center; min-height:110px; } */

        .status-text { display:inline-block; padding:6px 10px; border-radius:6px; font-weight:700; margin-top:8px; }
        .text-success { color:var(--success-color); background:rgba(46,204,113,0.08); }
        .text-warning { color:var(--warning-color); background:rgba(243,156,18,0.06); }
        .text-danger { color:var(--danger-color); background:rgba(231,76,60,0.06); }
        .text-info { color:var(--primary-color); background:rgba(52,152,219,0.06); }

        .btn { display:inline-block; padding:8px 12px; border-radius:6px; text-decoration:none; color:#fff; font-weight:700; border:none; cursor:pointer; margin:6px 4px; }
        .btn-primary { background:var(--primary-color); }
        .btn-success { background:var(--success-color); }
        .btn-danger  { background:var(--danger-color); }

        .note { text-align:center; padding:12px; margin-top:14px; background:rgba(231,76,60,0.06); border-left:4px solid var(--danger-color); border-radius:6px; color:var(--danger-color); font-weight:700; }

        .network-info { text-align:center; padding:12px; margin-top:12px; background:rgba(52,152,219,0.06); border-radius:6px; }

        @media (max-width:480px){
            .card-body { padding:10px; }
            .section-header h2 { font-size:18px; }
        }
    
    
    
    
  .floating-alert {
 
        position: fixed;
    top: 12%;
    left: 60%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    text-align: center;
    width: 80%;
}

.alert-box {
    position: relative;
    padding: 20px 40px;
    margin: auto;
    border-radius: 12px;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    animation: fadeIn 0.5s ease-in-out;
}

.alert-box.success { background: #28a745; }  /* أخضر */
.alert-box.info    { background: #17a2b8; }  /* أزرق */
.alert-box.warning { background: #ffc107; color: #000; } /* أصفر */

.close-btn {
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    color: inherit;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translate(-50%, -60%); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}



/*الموزعون*/


        :root {
            --primary-color: #8d2ae9;
            --secondary-color: #6c1dc0;
            --whatsapp-color: #25D366;
            --phone-color: #0077b5;
            --message-color: #ff6b6b;
            --light-bg: #f8f9fa;
            --card-bg: #ffffff;
            --dark-text: #333;
            --light-text: #fff;
            --border-radius: 12px;
            --transition: all 0.3s ease;
            --box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }
        
       
        
        .data-section {
            padding: 40px 0;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .section-title {
            text-align: center;
            /*font-size: 2.2rem;*/
            margin-bottom: 40px;
            color: var(--primary-color);
            font-weight: 700;
            position: relative;
            padding-bottom: 15px;
        }
        
        .section-title:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
            border-radius: 2px;
        }
        
        .distributors-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 25px;
            margin-top: 30px;
        }
        
        .distributor-card {
            background: var(--card-bg);
            border-radius: var(--border-radius);
            overflow: hidden;
            transition: var(--transition);
            box-shadow: var(--box-shadow);
            padding: 0;
        }
        
        /*.distributor-card:hover {*/
        /*    transform: translateY(-5px);*/
        /*    box-shadow: 0 15px 30px rgba(0,0,0,0.15);*/
        /*}*/
        
        .card-header {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: var(--light-text);
            padding: 20px;
            text-align: center;
        }
        
        .distributor-name {
            font-size: 1.4rem;
            font-weight: 600;
            margin: 0;
        }
        
        
        .phone-number {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            margin-bottom: 20px;
            color: var(--dark-text);
            direction: ltr;
        }
        
        .phone-icon {
            margin-left: 10px;
            color: var(--primary-color);
        }
        
        .contact-actions {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 20px;
        }
        
        .contact-btn {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            text-decoration: none;
            font-size: 20px;
            transition: var(--transition);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        
        .contact-btn:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 12px rgba(0,0,0,0.15);
        }
        
        .whatsapp-btn {
            background-color: var(--whatsapp-color);
        }
        
        .call-btn {
            background-color: var(--phone-color);
        }
        
        .sms-btn {
            background-color: var(--message-color);
        }
        
        .no-data {
            text-align: center;
            color: #dc3545;
            font-size: 1.2rem;
            grid-column: 1 / -1;
            padding: 40px;
            background: var(--card-bg);
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
        }
        
        /* تنسيق متجاوب */
        @media (max-width: 768px) {
            .distributors-container {
                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
                gap: 20px;
            }
            
            .section-title {
                font-size: 1.8rem;
            }
            
            .distributor-name {
                font-size: 1.2rem;
            }
            
            .phone-number {
                font-size: 1.1rem;
            }
        }
        
        @media (max-width: 480px) {
            .distributors-container {
                grid-template-columns: 1fr;
            }
            
            .section-title {
                font-size: 1.6rem;
            }
            
            .contact-actions {
                gap: 10px;
            }
            
            .contact-btn {
                width: 45px;
                height: 45px;
                font-size: 18px;
            }
        }
        
        
        /*السرعه*/
/* ===== تنسيقات عامة ===== */
body {
    font-family: "Tajawal", Arial, sans-serif;
    background: #f4f6f9;
    margin: 0;
    padding: 0;
    color: #333;
}

/* الهيدر (سرعة الباقة) */
.speed-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #6a11cb, #2575fc);
    color: #fff;
    padding: 12px 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
    font-weight: bold;
    font-size: 16px;
}

/* ألوان حالة البروفايل */
.profile-cut {
    color: #dc3545; /* أحمر */
    font-weight: bold;
}
.profile-active {
    color: #28a745; /* أخضر */
    font-weight: bold;
}

/* العنوان */
h5.modal-title {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    /*color: #444;*/
    margin-bottom: 15px;
}

/* البوكس الأساسي */
.modal-body {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* الفورم */
form#changeSpeedForm {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* القائمة المنسدلة */
select.speedsDropdown {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    border-radius: 8px;
    border: 1px solid #ddd;
    outline: none;
    transition: all 0.3s ease;
}
select.speedsDropdown:focus {
    border-color: #2575fc;
    box-shadow: 0 0 5px rgba(37,117,252,0.5);
}

/* زر التغيير */
button.btn-info {
    background: linear-gradient(135deg, #2575fc, #6a11cb);
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    padding: 12px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}
button.btn-info:hover {
    background: linear-gradient(135deg, #6a11cb, #2575fc);
    transform: scale(1.02);
}

/* الرسائل */
.alert {
    margin-top: 15px;
    padding: 15px;
    border-radius: 10px;
    font-weight: bold;
    animation: fadeIn 0.4s ease-in-out;
    text-align: center;
}
.alert-success {
    background: #28a745;
    color: #fff;
}
.alert-error {
    background: #dc3545;
    color: #fff;
}

/* أنيميشن */
@keyframes fadeIn {
    from {opacity: 0; transform: translateY(-10px);}
    to {opacity: 1; transform: translateY(0);}
}

/* دعم الوضع الليلي */
@media (prefers-color-scheme: dark) {
  
    
    /*h5.modal-title { color: #fff; }*/
    select.speedsDropdown {
       
        border: 1px solid #555;
        text-align: center;
    }
}



            /*الباقات*/

 :root {
            --primary-color: #8d2ae9;
            --secondary-color: #6c1dc0;
            --accent-color: #ff6b6b;
            --light-bg: #f8f9fa;
            --dark-text: #333;
            --light-text: #fff;
            --card-shadow: 0 10px 20px rgba(0,0,0,0.12);
            --hover-shadow: 0 15px 30px rgba(0,0,0,0.2);
            --border-radius: 12px;
            --transition: all 0.3s ease;
        }
        
      
        
        .data-section {
            padding: 20px 0;
            width: 100%;
            overflow: hidden;
        }
        
        .container {
            width: 100%;
            /*max-width: 100%;*/
            margin: 0 auto;
            padding: 0 15px;
        }
        
        .row {
            display: flex;
            flex-wrap: wrap;
            margin: 0 -10px;
            width: calc(100% + 20px);
        }
        
        .col {
            flex: 1 0 100%;
            padding: 0 10px;
            max-width: 100%;
        }
        
        h2.text-center {
            text-align: center;
            margin-bottom: 25px;
            font-size: 1.8rem;
            font-weight: 700;
            position: relative;
            padding-bottom: 12px;
            width: 100%;
        }
        
        h2.text-center:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 3px;
            background: linear-gradient(to right, var(--primary-color), var(--accent-color));
            border-radius: 2px;
        }
        
        .text-info {
            color: var(--primary-color) !important;
        }
        
        .text-success {
            color: #28a745 !important;
        }
        
        .mt-4 {
            margin-top: 1.5rem;
        }
        
        .mt-3 {
            margin-top: 1rem;
        }
        
        .mb-4 {
            margin-bottom: 1.5rem;
        }
        
        /* تنسيق البطاقات */
        .card {
            background: #fff;
            border-radius: var(--border-radius);
            overflow: hidden;
            transition: var(--transition);
            box-shadow: var(--card-shadow);
            border: none;
            height: 100%;
            position: relative;
            width: 100%;
            margin-bottom: 20px;
        }
        
        /*.card:hover {*/
        /*    transform: translateY(-5px);*/
        /*    box-shadow: var(--hover-shadow);*/
        /*}*/
        
        .card-body {
            padding: 20px;
        }
        
        .card-title {
            background-color: var(--primary-color) !important;
            color: var(--light-text);
            padding: 12px;
            margin: -20px -20px 20px -20px;
            font-size: 1.2rem;
            font-weight: 600;
            position: relative;
            overflow: hidden;
            text-align: center;
        }
        
        .card-title:after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, transparent 0%, rgba(255,255,255,0.2) 100%);
        }
        
        .card p {
            margin-bottom: 10px;
            font-size: 0.9rem;
            display: flex;
            justify-content: space-between;
            padding: 6px 0;
            border-bottom: 1px dashed #eee;
        }
        
        .card p:last-child {
            border-bottom: none;
            margin-bottom: 0;
        }
        img{
                width: 250px;
    height: 150px;
        }
        
        .card p strong {
            color: var(--secondary-color);
            font-weight: 600;
        }
        
        /* تنسيق خاص للباقات المنفصلة */
        .card .flex-container {
            display: flex;
            justify-content: space-around;
            margin: 12px 0;
        }
        
        .card .flex-container p {
            background: var(--light-bg);
            padding: 8px 12px;
            border-radius: 6px;
            margin: 0 4px;
            flex: 1;
            text-align: center;
            border-bottom: none !important;
            font-weight: 600;
            color: var(--secondary-color);
            font-size: 0.9rem;
        }
        
        /* تنسيق متجاوب محسّن */
        @media (min-width: 576px) {
            .col-sm-6 {
                flex: 0 0 50%;
                max-width: 50%;
            }
            
            .container {
                padding: 0 15px;
            }
            
            .row {
                margin: 0 -15px;
                width: calc(100% + 30px);
            }
            
            .col {
                padding: 0 15px;
            }
        }
        
        @media (min-width: 768px) {
            .col-md-4 {
                flex: 0 0 33.333333%;
                max-width: 33.333333%;
            }
            
            h2.text-center {
                font-size: 2rem;
            }
            
            .card-body {
                padding: 25px;
            }
            
            .card-title {
                padding: 15px;
                margin: -25px -25px 25px -25px;
                font-size: 1.4rem;
            }
            
            .card p {
                font-size: 1rem;
            }
            
            .card .flex-container p {
                font-size: 1rem;
            }
        }
        
        @media (max-width: 575px) {
            .card .flex-container {
                flex-direction: column;
            }
            
            .card .flex-container p {
                margin: 5px 0;
            }
            
            h2.text-center {
                font-size: 1.5rem;
                padding: 0 10px 12px 10px;
            }
            
            .container {
                padding: 0 10px;
            }
            
            .row {
                margin: 0 -5px;
                /*width: calc(100% + 10px);*/
            }
            
            .col {
                padding: 0 5px;
            }
            
            .card {
                margin-bottom: 15px;
                /*width: 275px;*/
            }
        }
        
        @media (max-width: 400px) {
            h2.text-center {
                font-size: 1.3rem;
            }
            
            .card-title {
                font-size: 1.1rem;
                padding: 10px;
            }
            
            .card p {
                font-size: 0.85rem;
                flex-direction: column;
                text-align: center;
            }
            
            .card p strong {
                margin-top: 3px;
            }
        }




        
        
        /*تنسيق صفحه الموزعين*/
        
      

    .section-title {
      font-size: 1.25rem;
      margin-bottom: 20px;
      color: #0b5ed7;
      font-weight: 600;
      text-align: center;
    }

    

    /*.btn {*/
    /*  min-width: 180px;*/
    /*  padding: 10px 16px;*/
    /*  font-weight: 600;*/
    /*  border-radius: 10px;*/
    /*}*/



 /*تنسيق الرساله المتحركة*/
    .marquee-container {
    /*width: 80%;*/
    overflow: hidden;
    border: 1px solid #dee2e6;
    padding: 10px 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: relative;
    top: 20px;
    left: 20%;
    background: linear-gradient(45deg, #ddc410, transparent);
}

.marquee-track {
    display: flex;
    width: max-content;
    animation: marquee 25s linear infinite; /* السرعة */
}

.marquee-text {
    font-size: 18px;
    color: #551566;
    font-weight: bold;
    margin-right: 20px; /* هنا تتحكم في المسافة بين تكرار الرسالة */
}

@keyframes marquee {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(100%);
    }
}