/* Your Custom Code Box Styles - Final Version with Scrollbar Styling */

/* Main container for the code box */
.ccb-container {
  max-width: 90%;
  background-color: #1d1e22; /* الخلفية الرئيسية للصندوق */
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  padding: 5px;
  margin-bottom: 20px;
  font-family: sans-serif;
  position: relative;
}

/* Header section */
.ccb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 5px 10px 10px 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid #4C4F5A;
}

/* Title style */
.ccb-title {
  font-family: Lato, sans-serif;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: normal !important;
  color: rgb(212 212 212);
}

/* Copy Button Style */
.ccb-copy-button {
  background-color: #4C4F5A;
  color: rgb(212 212 212);
  border: none;
  padding: 6px 12px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  font-weight: bold;
  transition: background-color 0.2s ease, color 0.2s ease;
  margin-left: 10px;
}

.ccb-copy-button:hover {
  background-color: #6e7281;
}

.ccb-copy-button.copied {
  background-color: #1baf7b;
  color: white;
}

/* Code content area wrapper */
.ccb-content {
  margin: 0 10px 10px 10px;
  padding: 15px !important; /* الحشو على العنصر الأب */
  background: #282c34;    /* الخلفية الداخلية المطلوبة على العنصر الأب */
  border-radius: 5px;
  overflow: hidden; /* Prevent pre from overflowing its background */
}

/* Styling for <pre> and <code> generated by Prism */
.ccb-content pre[class*="language-"],
.ccb-content code[class*="language-"] {
	/* --- Font and Text --- */
	font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
	font-size: 14px;
	line-height: 1.5;
	color: #ccc;
	white-space: pre !important;
	text-align: left !important;
    direction: ltr !important; /* لنقل شريط التمرير لليمين */

	/* --- Box Model & Appearance --- */
	margin: 0 !important;
	padding: 0 !important; /* الحشو أصبح في العنصر الأب */
    max-height: 350px; /* الارتفاع الأقصى */
	overflow: auto !important; /* لإظهار أشرطة التمرير عند الحاجة */
    background: transparent !important; /* الخلفية هنا شفافة */
	border: none;
	border-radius: 0;

	/* --- Resetting potentially conflicting properties --- */
	list-style: none !important;
	quotes: none !important;
	tab-size: 4;
	-moz-tab-size: 4;
	-o-tab-size: 4;
	word-break: normal;
	word-wrap: normal;
	hyphens: none;
    letter-spacing: normal !important;
    word-spacing: normal !important;
    font-variant: normal !important;
    font-kerning: auto !important;
    text-rendering: auto !important;
    font-variant-ligatures: none !important;

    /* --- Scrollbar Styling (Firefox) --- */
    /* لون المقبض أولاً ثم لون المسار */
    scrollbar-color: #6e7281 #1d1e22;
    scrollbar-width: thin; /* أو auto */
}

/* --- Scrollbar Styling (WebKit - Chrome, Safari, Edge, etc.) --- */
/* تحديد العنصر الذي يظهر عليه شريط التمرير */
.ccb-content pre[class*="language-"]::-webkit-scrollbar {
  width: 10px; /* عرض شريط التمرير */
  height: 10px; /* ارتفاع شريط التمرير (للأفقي) */
}

/* تصميم مسار شريط التمرير */
.ccb-content pre[class*="language-"]::-webkit-scrollbar-track {
  background: #1d1e22; /* لون الخلفية الأغمق المطلوب للمسار */
  border-radius: 5px; /* اختياري: لزوايا دائرية للمسار */
}

/* تصميم مقبض شريط التمرير */
.ccb-content pre[class*="language-"]::-webkit-scrollbar-thumb {
  background-color: #6e7281; /* لون رمادي للمقبض */
  border-radius: 5px; /* زوايا دائرية للمقبض */
  border: 2px solid #1d1e22; /* اختياري: لإضافة حافة بلون المسار حول المقبض */
}

/* تصميم مقبض شريط التمرير عند التحويم (اختياري) */
.ccb-content pre[class*="language-"]::-webkit-scrollbar-thumb:hover {
  background-color: #4C4F5A; /* لون أغمق قليلاً عند التحويم */
}