body {
      font-family: 'El Messiri';
      background: #f5f5f5;
      margin: 0;
      line-height: 1.8;
    }
    .container {
      max-width: 90%;
      margin: auto;
      background: #fff;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0,0,0,0.08);
    }
    h1 {
      margin-top: 0;
      text-align: center;
      font-size: 24px;
      color: #333;
    }
    textarea {
      width: 100%;
      min-height: 200px;
      padding: 10px;
      border-radius: 6px;
      border: 1px solid #ccc;
      font-family: "Consolas", "Courier New", monospace;
      font-size: 14px;
      box-sizing: border-box;
      direction: ltr;
      text-align: left;
      resize: vertical;
    }
    .buttons {
      margin: 15px 0;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
    }
    button {
      padding: 8px 18px;
      border-radius: 6px;
      border: none;
      cursor: pointer;
      font-size: 14px;
      font-family: inherit;
    }
    .btn-primary {
      background: #007bff;
      color: #fff;
    }
    .btn-secondary {
      background: #6c757d;
      color: #fff;
    }
    .btn-copy {
      background: #28a745;
      color: #fff;
    }
    .small-note {
      font-size: 12px;
      color: #777;
      text-align: center;
      margin-top: 10px;
    }
    @media (max-width: 600px) {
      .container {
        padding: 15px;
      }
      h1 {
        font-size: 20px;
      }
    }
    .header {
	background: #0c3465;
	color: #fff;
	padding: 12px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.logo a:link, .logo a:hover, .logo a:visited {
	text-decoration: none;
	color: white;
}
/* التاريخ الهجري والميلادي */
.circle {
	position: absolute;
	right: 0;
	left: 0;
	background-color: #007bff;
	padding: 10px;
	font-family: 'El Messiri';
}
.dates {
	font-family: 'El Messiri';
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: white;
	gap: 50px;
	margin: 0 10px;
}
.dates p {
	font-family: 'El Messiri';
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: #FFF;
}
/*زر المشاركة */
.button2 {
	-webkit-appearance: none; /*display: inline-block;*/;
	text-decoration: none;
	cursor: pointer;
	border: 0;
	border-radius: 5px;
	background: #25D366;
	color: #fff !important;
	font-weight: 700;
	font-family: 'El Messiri';
	outline: 0;
	font-size: 0.8em;
	padding: 0.65em 1.5em 0.65em 1.5em;
	text-align: center;
	margin: 0 0 0 0;
	box-shadow: 1px 1px #cc15cd;
}
.dc-related {
	text-align: center;
	margin-bottom: 20px;
	font-size: 15px;
}
.dc-related p {
	margin-bottom: 8px;
	color: #444;
}
.dc-related-links {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}
.dc-btn-outline {
	border-radius: 999px;
	border: 1px solid #0c3465;
	color: #0c3465;
	background: #fff;
	padding: 7px 16px;
	font-size: 14px;
	text-decoration: none;
}
/* المقال */
.content2 {
	background: #fff;
	padding: 20px;
	border-radius: 10px;
	line-height: 1.9;
	font-size: 16px;
	margin-top: 20px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.05);
	width: 90%;
	margin: 0 auto;
}

p.footer2 {
	font-family: 'El Messiri';
	font-size: small;
	margin: 0px 10px 10px 0px;
	color: #000;
}
/* إشعار النسخ */
.copy-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #0c8c43;
  color: #fff;
  padding: 12px 22px;
  border-radius: 10px;
  font-size: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
  z-index: 9999;
}
.copy-toast.show {
  opacity: 1;
}