/* CosmaLore Editor Pro — Frontend Article Styles */

.clep-article { direction: rtl; font-family: 'Segoe UI', system-ui, sans-serif; }

/* Featured Image Top */
.clep-feat-top { margin-bottom: 0; }
.clep-feat-img-top { width: 100%; max-height: 420px; object-fit: cover; display: block; border-radius: 8px 8px 0 0; }

/* Article Head */
.clep-article-head { padding: 20px 0 10px; }
.clep-article-title { font-size: 2em; font-weight: 800; margin: 0 0 8px; line-height: 1.3; }
.clep-article-subtitle { font-size: 1em; color: #666; font-style: italic; margin: 0; border-bottom: 1px solid #eee; padding-bottom: 12px; }

/* Introduction */
.clep-article-intro { font-size: 1.05em; line-height: 1.9; color: #333; margin: 16px 0; padding: 16px; background: #f8f9fa; border-radius: 8px; border-right: 4px solid #6c63ff; }

/* Featured Image Middle */
.clep-feat-middle { float: left; margin: 0 0 16px 20px; max-width: 320px; }
.clep-feat-img-middle { width: 100%; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,.1); }

@media (max-width: 600px) {
  .clep-feat-middle { float: none; margin: 16px 0; max-width: 100%; }
}

/* Infobox */
.clep-infobox-wrap { float: left; margin: 0 0 20px 20px; min-width: 280px; max-width: 360px; }
.clep-infobox { width: 100%; border-collapse: collapse; font-size: .9em; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; }
.clep-infobox-group th { background: #2c2c54; color: #fff; text-align: center; padding: 8px 12px; font-size: .95em; letter-spacing: .5px; }
.clep-infobox-row th { background: #f4f4f8; color: #444; font-weight: 600; padding: 8px 12px; width: 40%; border-bottom: 1px solid #eee; text-align: right; }
.clep-infobox-row td { padding: 8px 12px; color: #333; border-bottom: 1px solid #eee; }
.clep-infobox-row:last-child th,
.clep-infobox-row:last-child td { border-bottom: none; }

@media (max-width: 600px) {
  .clep-infobox-wrap { float: none; margin: 0 0 20px; max-width: 100%; min-width: unset; }
}

/* Article Body */
.clep-article-body { line-height: 1.9; font-size: 1em; color: #222; clear: both; }
.clep-article-body h2 { font-size: 1.4em; color: #2c2c54; border-bottom: 2px solid #6c63ff; padding-bottom: 6px; margin: 28px 0 14px; }
.clep-article-body h3 { font-size: 1.15em; color: #444; margin: 22px 0 10px; padding-right: 12px; border-right: 3px solid #00d4aa; }
.clep-article-body h4 { font-size: 1em; font-weight: 700; color: #555; margin: 18px 0 8px; }
.clep-article-body p  { margin: 0 0 14px; }
.clep-article-body a  { color: #6c63ff; text-decoration: none; border-bottom: 1px solid rgba(108,99,255,.3); }
.clep-article-body a:hover { border-bottom-color: #6c63ff; }
.clep-article-body table { border-collapse: collapse; width: 100%; margin: 16px 0; border-radius: 8px; overflow: hidden; }
.clep-article-body th { background: #2c2c54; color: #fff; padding: 10px 14px; }
.clep-article-body td { border: 1px solid #ddd; padding: 9px 14px; }
.clep-article-body tr:nth-child(even) td { background: #f9f9fb; }
.clep-article-body ul, .clep-article-body ol { padding-right: 24px; margin: 12px 0; }
.clep-article-body li { margin-bottom: 6px; }
.clep-article-body blockquote { border-right: 4px solid #6c63ff; padding: 12px 20px; background: #f4f4ff; margin: 16px 0; border-radius: 0 8px 8px 0; color: #555; }
.clep-article-body img { max-width: 100%; border-radius: 8px; margin: 12px 0; }

/* References Section */
.clep-refs-section { margin-top: 40px; padding-top: 20px; border-top: 2px solid #eee; clear: both; }
.clep-refs-title { font-size: 1.1em; color: #333; margin-bottom: 12px; }
.clep-refs-list { padding-right: 20px; }
.clep-refs-list li { font-size: .88em; color: #555; margin-bottom: 8px; line-height: 1.6; }
.clep-refs-list a { color: #6c63ff; }
.clep-ref-author { font-style: italic; }
.clep-ref-year { color: #888; }

/* Reference Popups (from refs.js) */
.clep-ref-popup {
  position: fixed;
  z-index: 99999;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 14px 18px;
  max-width: 340px;
  box-shadow: 0 8px 30px rgba(0,0,0,.15);
  font-size: 13px;
  line-height: 1.6;
  animation: clep-popIn .2s ease;
  direction: rtl;
}

@keyframes clep-popIn {
  from { opacity: 0; transform: translateY(-6px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

sup.ref a {
  color: #6c63ff;
  text-decoration: none;
  font-size: .75em;
  vertical-align: super;
  background: rgba(108,99,255,.1);
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s;
}

sup.ref a:hover { background: rgba(108,99,255,.25); }