/* تصميم اضافة اقرئ ايضاً */

.wmdh-ra {
    margin: 24px 0 0;
    border-top: 2px dashed #dcdbd7;
}
.wmdh-ra-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;

    margin: 10px 0;
    padding: 10px;
    border-radius: 10px;

    background: #f2f2f2;
    color: #716553;
}


.wmdh-ra-head p {
    line-height: 1px;
    margin: 0;
}

.wmdh-ra-head-title{font-weight:600;font-size:18px;line-height:1}



/* الشبكة متكيّفة مع عرض الشاشة في كل المقاسات */
.wmdh-ra-list{
  list-style:none; margin:0; padding:0;
  display:grid; gap:10px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* تدرّج بسيط: على الشاشات المتوسطة والصغيرة، اسمح بأعمدة أكثر */
@media (max-width: 980px){
  .wmdh-ra-list{ grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}
@media (max-width: 640px){
  /* مهم: لا ترجعها عمود واحد */
  .wmdh-ra-list{ grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
}

/* شكل البطاقات أنظف ومتماسك، مناسب للكلمات القصيرة */
.wmdh-ra-link {
    display: block;
    text-decoration: none;
    padding: 6px;
    background: #e8f3f5;
    border: none;
    border-radius: 5px;
    font-weight: 600;
    line-height: 1.8;
    font-size: 14px;
    color: #3194a3;
    text-align: center;
}
.wmdh-ra-link:hover{ opacity:.9; }




/* باقي التنسيقات كما هي */

.wmdh-ra-list li{list-style:none;margin:0;padding:0}


.wmdh-ra-toggle {
    appearance: none;
    background: #aea8a0;
    color: #ffffff;
    border: 0;
    cursor: pointer;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .4rem;
    border-radius: 4px;
    font-weight: 500;
}

.wmdh-ra-toggle:focus {
  outline: 2px solid #9ad;
  outline-offset: 2px;
}

.wmdh-ra-toggle .arrow {
  display: inline-block;
  transition: transform .2s ease;
}

.wmdh-ra-toggle[aria-expanded="true"] .arrow {
  transform: rotate(180deg);
}

.wmdh-ra-booster {
  margin: .6rem 0;
}

.wmdh-ra-booster[hidden] {
  display: none;
}



/* style.css osa-song-info */

/* ===== OSA Song Info – Box ===== */
.osa-si-card{margin:18px 0;background:#fff;border-radius:14px;padding:15px;overflow:hidden;box-shadow:none}

.osa-si-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f2f2f2;
    color: #705b4a;
    padding: 10px 10px 0px 10px;
    font-weight: 500;
    border-radius: 10px 10px 0px 0;
    margin: 2px;
}



.osa-si-head .right{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.osa-si-head .left{display:flex;align-items:center;gap:8px}
.osa-si-head .tag {
    color: #353535;
    font-weight: 600;
}



.osa-si-head .contrib {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #b5acac;
    color: #f2f2f2;
    border-radius: 5px;
    padding: 0px 10px;
    text-decoration: none;
    font-weight: 600;
}

.osa-si-head .contrib.plain{background:#d8e6e8;color:#18353a}

.osa-si-table{width:100%;border-collapse:separate;border-spacing:0}
.osa-si-table th,.osa-si-table td{padding:12px 14px}

.osa-si-table tr:nth-child(odd) {
    background: #e5f0f1;
}
.osa-si-table tr:nth-child(even) {
    background: #eff5f6;
}

.osa-si-table th{width:30%;text-align:right;color:#18353a;font-weight:600}
.osa-si-table td {
    color: #18353a;
    font-weight: 600;
}
.osa-si-link{text-decoration:none;border-bottom:1px dotted currentColor}
.osa-si-link:hover{border-bottom-style:solid}
@media(max-width:640px){
  .osa-si-head{flex-direction:column;align-items:flex-start;gap:6px}
}

/* ===== Contributor Term Page ===== */
.osa-contrib-card{background:#fff;border-radius:14px;padding:16px;margin:18px 0}
.osa-contrib-btn{display:inline-block;background:#3194a3;color:#fff;text-decoration:none;border-radius:10px;padding:10px 14px;font-weight:800}
.osa-contrib-btn:hover{opacity:.92}

.osa-list{display:grid;gap:10px}
.osa-item{display:flex;justify-content:space-between;align-items:center;background:#fff;border-radius:12px;padding:12px 14px;text-decoration:none;color:#18353a;border:2px solid #eaeaea}
.osa-item .d{color:#8f8f8f}
.osa-item:hover{background:#f8fbfc}
.osa-pagi {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin: 18px 0;
}
.page-numbers.current {
    background: #0e3035;
    color: #fff;
}
.page-numbers {
    padding: 8px 12px;
    border-radius: 10px;
    background: #eaf4f6;
    color: #0e3035;
    text-decoration: none;
}


/* ===== Breadcrumbs ===== */

.osa-breadcrumb {
    margin-bottom: 12px;
    font-size: 14px;
    color: #5b5b5b;
    text-align: right;
    font-weight: 600;
}
.osa-breadcrumb a {
    color: #1f9ca7;
    text-decoration: none;
}

.osa-breadcrumb span {
    margin: 0 6px;
    color: #bbb;
}


/* ===== Directory (cards) ===== */


/* ===== Song Info Box (موجود مسبقًا) ===== */
.osa-si-table{width:100%;border-collapse:separate;border-spacing:0}

.osa-si-head h1 {
    padding: 0;
    margin: 5px 0 5px 0;
    font-size: 20px;
    font-weight: 600;
}

.visual-only {
    color: #a56239;
    font-weight: 600;
}

.osa-si-table th, .osa-si-table td {
    padding: 8px;
    border: 2px solid #FFF;
    font-size: 18px;
}

.osa-si-table th {
    width: 30%;
    text-align: right;
    color: #18353a;
    font-size: 18px;
    font-weight: 600;
}

/* تنسيقات خاصة بالجوال فقط */
@media (max-width: 768px) {

    .osa-si-head h1 {
        padding: 0;
        margin: 5px 0 5px 0;
        font-size: 13px;
        font-weight: 600;
    }

    .visual-only {
        color: #919191;
        font-weight: 600;
    }

    .osa-si-table th,
    .osa-si-table td {
        padding: 8px;
        border: 2px solid #FFF;
        font-size: 12px;
    }

    .osa-si-table th {
        width: 30%;
        text-align: right;
        color: #18353a;
        font-size: 12px;
        font-weight: 600;
    }

}

.osa-si-link{text-decoration:none;border-bottom:1px dotted currentColor}
.osa-si-link:hover{border-bottom-style:solid}

/* ===== List styles used in taxonomy templates ===== */
.osa-contrib-card{background:#fff;border-radius:14px;padding:16px;margin:18px 0}
.osa-contrib-btn{display:inline-block;background:#3194a3;color:#fff;text-decoration:none;border-radius:10px;padding:10px 14px;font-weight:800}
.osa-contrib-btn:hover{opacity:.92}
.osa-list{display:grid;gap:10px}
.osa-item{display:flex;justify-content:space-between;align-items:center;background:#fff;border-radius:12px;padding:12px 14px;text-decoration:none;color:#18353a;border:2px solid #eaeaea}
.osa-item .d{color:#8f8f8f}
.osa-item:hover{background:#f8fbfc}

/* ===== ألبوم: رأس الصفحة ===== */
.album-hero{ text-align:center; margin: 12px 0 18px; }
.album-h1{ margin:0 0 6px; font-size: 28px; }

p.album-sub strong {
    color: #b86027;
}

.album-sub {
    margin: 20px 0 0 0;
    font-size: 15px;
    padding: 15px;
    color: #664e29;
    font-weight: 500;
    background: #f2f2f2;
    border-radius: 10px;
}

/* ===== شبكة المربعات ===== */
.album-grid{
  display:grid;
  gap:14px;
  grid-template-columns: repeat(auto-fill, minmax(290px,1fr));
}


.album-card {
    background: #e8f3f5;
    color: #30707a;
    border-radius: 10px;
    padding: 10px 10px 15px 10px;
}

.album-card-head{ margin-bottom:10px; }
.album-song-title{
  font-weight:700;
  text-decoration:none;
  color:#30707a;
}
.album-song-title:hover{ text-decoration:underline; }

/* صفوف تفاصيل الأسماء */
.album-meta-rows{
    background:#fff; 
    color:#202020;
    border-radius:10px;
    padding:10px;
    display:flex; flex-direction:column;
    gap:6px; 
    font-weight: 500;
    border: 1px solid #b0cdd2;
}
.album-meta-row{ display:flex; justify-content:space-between; gap:8px; }
.album-meta-label{ opacity:.8 }

/* شارات السنة/المشاهدات */
.album-badges{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.album-badge {
    background: #5198a7;
    color: #fff;
    border-radius: 8px;
    padding: 4px 8px;
    font-size: 13px;
}


/* جعل عنوان الأغنية H2 في المنتصف */
.album-song-title{ text-align:center; margin:0; }
.album-song-title a{ font-weight:700; text-decoration:none; color:#30707a; }
.album-song-title a:hover{ text-decoration:underline; }

/* ترتيب ومحاذاة تفاصيل الأسماء يمينًا */
.album-meta-rows{ direction: rtl; text-align: right; }
.album-meta-row{ display:grid; grid-template-columns: auto 1fr; align-items:center; gap:8px; }
.album-meta-row .album-meta-label {
    color: #007f92;
    font-weight: 600;
}
.album-meta-row a, .album-meta-row span{ justify-self:start; }





.osa-album-sources {
    font-size: 13px;
    color: #666;
    text-align: center;
    line-height: 1.8;
    max-width: 100%;
    margin: 50px auto 0 auto;
    background: #f2f2f2;
    padding: 7px;
    border-radius: 10px;
}


.osa-si-note {
    margin-top: 15px;
    padding: 4px 20px;
    background: #fff5e0;
    border-radius: 5px;
    font-size: 14px;
    line-height: 1.8;
    color: #ac8b4a;
    border: 1px solid #e6dac1;
    font-weight: 500;
}


.osa-album-cover{
  text-align:center;
  margin-bottom:20px;
}


.osa-cover-img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: 300px;
    width: auto;
    border-radius: 20px;
}
























/*تصميم ملف osa-directory-v2.css */

/* OSA Directory v2 */

.osa-dir-v2 {
    margin: 0px auto;
    background: #fff;
    border-radius: 15px;
    padding: 10px;
}
.osa-site-link,
.osa-dir-desc b{
  color:#1f9ca7;
}
.osa-site-link:hover{
  color:#177f88;
}

.osa-dir-v2-head{
  text-align:center;
  margin-bottom:14px;
}
.osa-dir-title{
  margin:0 0 6px;
  font-size:28px;
}
.osa-dir-desc{
  margin:0;
  color:#313131;
  font-size:15px;
}

/* toolbar */
.osa-toolbar{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  margin:16px 0 10px;
}

.osa-toolbar input[type="search"]{
  flex: 1;
  min-width: 260px;
  height: 42px;
  padding: 0 14px;
  border: 1px solid #d9d9d9;
  border-radius: 12px;
  outline: none;
  background: #f2f2f2;
  font-size: 16px !important; /* هذا هو المهم */
}

.osa-toolbar select{
  height:42px;
  padding:0 12px;
  border:1px solid #d9d9d9;
  border-radius:12px;
  background:#fff;
  cursor:pointer;
}

.osa-toolbar button{
  height:42px;
  padding:0 18px;
  border:0;
  border-radius:12px;
  background:#8fbec3;
  color:#fff;
  cursor:pointer;
}
.osa-toolbar button:hover{ background:#78aeb4; }

/* note */
.osa-dir-note{
  margin:0 0 16px;
  color:#666;
  text-align:center;
  font-size:13px;
}

/* grid */
.osa-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr); /* كمبيوتر */
  gap:14px;
}

/* تابلت */
@media (max-width: 900px){
  .osa-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

/* جوال */
@media (max-width: 600px){
  .osa-grid{
    grid-template-columns: 1fr;
  }

  .osa-toolbar input[type="search"]{
    min-width: 100%;
    font-size: 16px !important; /* يمنع تكبير الشاشة في iPhone */
  }
}


/* card */
.osa-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#e8f3f5;
  border-radius:10px;
  padding:12px 12px;
  text-decoration:none;
}


.osa-name {
    font-weight: 600;
    font-size: 15px;
    color: #2a7b8a;
}
.osa-count {
    font-size: 13px;
    color: #09666f;
    white-space: nowrap;
    font-weight: 500;
}

/* highlight */
.osa-dir-v2 mark{
  background:#ffeaa7;
  padding:0 3px;
  border-radius:4px;
}

/* empty */
.osa-empty{
  grid-column:1/-1;
  text-align:center;
  color:#666;
  padding:20px 0;
}

/* footer */
.osa-dir-foot{
  margin-top:14px;
  text-align:center;
  color:#666;
  font-size:13px;
}

/* responsive */


/* إخفاء عنوان الصفحة الافتراضي (العنوان الأبيض) */
.section-title {
  display: none !important;
}

.osa-breadcrumbs {
  font-size: 13px;
  color: #777;
  margin-bottom: 10px;
}

.osa-breadcrumbs a {
  color: #6aa6ab;
  text-decoration: none;
}

.osa-breadcrumbs a:hover {
  text-decoration: underline;
}


/* ===============================
   Breadcrumbs داخل osa-dir-v2
================================ */

.osa-dir-v2 .osa-breadcrumbs {
  margin-bottom: 14px;
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
  color: #7b8f93;
}

/* الروابط */
.osa-dir-v2 .osa-breadcrumbs a {
  color: #6aa6ab;
  text-decoration: none;
    font-weight: 500;
    font-size: 13px;
}

.osa-dir-v2 .osa-breadcrumbs a:hover {
  text-decoration: underline;
}

/* الفواصل */
.osa-dir-v2 .osa-breadcrumbs span,
.osa-dir-v2 .osa-breadcrumbs li {
  display: inline;
  font-weight: 500;
  font-size: 13px;
}

/* إلغاء الترقيم (1. 2.) */
.osa-dir-v2 .osa-breadcrumbs ol,
.osa-dir-v2 .osa-breadcrumbs ul {
  list-style: none !important;
  padding: 0;
  margin: 0;
  text-align: right;
}

/* إزالة أي محاذاة أو float من القالب */
.osa-dir-v2 .osa-breadcrumbs * {
  float: none !important;
}

.osa-dir-v2 .osa-breadcrumbs li:not(:last-child)::after {
  content: "›";
  margin: 0 6px;
  color: #b5c7cb;
}

#osaDirQ {
  font-size: 16px !important;
  -webkit-text-size-adjust: 100%;
}

.osa-dir-breadcrumbs {
    text-align: right;
    margin-bottom: 15px;
    font-size: 14px;
    color: #6b7c80;
}

.osa-dir-breadcrumbs a {
  text-decoration: none;
  color: #1f9ca7;
}

.osa-dir-breadcrumbs .osa-dir-sep {
  margin: 0 6px;
  color: #999;
}
span.osa-dir-current {
    font-weight: 400;
}








/* شكل الاسم */
.osa-name{
display:flex;
align-items:center;
gap:6px;
}
.osa-name svg{
fill:#20a8c4;
}































/*ملف osa-edit-request.css*/

/* OSA Edit Request - lightweight styles */

.oer-wrap { margin: 18px 0 0; }
.oer-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-radius:14px;
}

.oer-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  text-decoration:none;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
}
.oer-btn svg{ width:18px; height:18px; fill: currentColor; }

.oer-btn-edit{
  background:#e56f47;
  color:#fff;
}
.oer-btn-edit:hover{ filter: brightness(.95); }

.oer-share{
  display:flex;
  align-items:center;
  gap:10px;
}

.oer-ico{
  width:40px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background: #99c0c6;
  border: 1px solid rgba(0,0,0,.06);
  color: #fff;
  text-decoration:none;
  cursor:pointer;
}
.oer-ico svg{ width:18px; height:18px; fill: currentColor; }
.oer-ico:hover{ background: rgba(0,0,0,.06); }

.oer-updated{
  font-size: 13px;
  color: rgba(0,0,0,.55);
  white-space:nowrap;
}

/* Form */
.oer-form-wrap{
  max-width: 100%;
  margin: 40px auto;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  padding: 18px;
}
.oer-h1{
    margin: 15px 0;
    font-size: 22px;
    text-align: center;
    
}
.oer-lead{ margin: 0 0 14px;color: #a06114;  text-align: center;font-size: 18px;}

.oer-songbox{
  background:#f2f2f2;
  border-radius: 12px;
  padding: 12px;
  margin: 12px 0 16px;
  word-break: break-word;
  font-size: 18px;
}

.oer-msg{
  background: rgba(0, 150, 80, .08);
  border: 1px solid rgba(0, 150, 80, .2);
  border-radius: 12px;
  padding: 12px;
  margin: 12px 0;
}

.oer-label{ display:block; font-weight:700; margin: 10px 0 6px; }
.oer-input{
  width:100%;
  padding:10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background:#fff;
  outline:none;
}
.oer-input:focus{ border-color: rgba(43,111,120,.5); }

.oer-inline-note{
  margin-top: 6px;
  font-size: 13px;
  color: rgba(0,0,0,.6);
}

.oer-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.oer-proofbox{
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  background: #eaf6f9;
}
.oer-proof-title{ font-weight:800; margin-bottom:6px; }
.oer-proof-hint{ font-size:13px; color: rgba(0,0,0,.6); margin-bottom:10px; }

.oer-check{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin: 14px 0;
  color:#a76d25;
  font-weight: 500;
}

.oer-submit{
  width:100%;
  border:0;
  border-radius: 999px;
  padding: 12px 14px;
  background: #2b6f78;
  color:#fff;
  font-weight:800;
  cursor:pointer;
}
.oer-submit:hover{ filter: brightness(.95); }

.oer-hp{ display:none !important; }

@media (max-width: 768px){
  .oer-bar{ flex-direction: column; align-items: stretch; }
  .oer-updated{ text-align:center; }
  .oer-share{ justify-content:center; flex-wrap: wrap; }
  .oer-grid{ grid-template-columns: 1fr; }
}

/* طباعة أنيقة: تطبع عنوان + .osa-lyrics فقط */
@media print{
  /* نخفي العناصر غير المهمة للطباعة */
  header, nav, footer, .main-nav, .site-footer,
  .oer-wrap, .oer-bar,
  .breadcrumbs, .sidebar, .widget, .ads, .share, .comments {
    display:none !important;
  }

  /* طباعة نظيفة */
  body{ background:#fff !important; }
  *{ box-shadow:none !important; text-shadow:none !important; }

  /* نجعل المحتوى كامل العرض */
  main, .container, .content, .entry-content{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
  }

  /* نركز على منطقة الكلمات */
  .osa-lyrics{
    display:block !important;
    margin:0 !important;
    padding:0 !important;
  }
}

@media print{
  html, body{ overflow: visible !important; }

  /* هذا يفكّ أي تمرير (Scroll) داخل منطقة الكلمات */
  .osa-lyrics,
  .lyrics-content,
  .entry-content{
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* أخفاء عناصر ما نبيها بالطباعة */
  .oer-bar,
  header, nav, footer, .main-nav, .site-footer,
  .more-songs, .explore, .osa-explore,
  .sidebar, .widget, .comments{
    display:none !important;
  }
}


/* تنسيق أيقونة المشاهدات */
.oer-updated {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #4b6f75;
  white-space: nowrap;      /* يمنع النزول لسطر جديد */
}

.oer-eye-icon {
  width:20px;
  height:20px;
}

/* ===============================
   تحسين تنسيق الجوال والتابلت
================================ */
@media (max-width: 992px) {

  /* تصغير زر طلب تعديل */
  .oer-btn-edit {
    width: auto;
    padding: 10px 20px;
    font-size: 14px;
    border-radius: 40px;
    display: block;
    margin: 0 auto 20px auto; /* توسيط الزر */
    text-align: center;
  }

  /* تصغير الأيقونة داخل الزر لو فيه SVG */
  .oer-btn-edit svg {
    width: 16px;
    height: 16px;
  }

  /* توسيط المشاهدات */
  .oer-updated {
    justify-content: center;
    text-align: center;
    margin-top: 10px;
  }

}

@media print {

  header,
  nav,
  footer,
  .osa-header-icons,
  .search-panel,
  #wpadminbar {
    display: none !important;
  }

  body {
    margin: 0 !important;
  }

  .content,
  .entry-content {
    width: 100% !important;
  }

}



/*التحكم بعناصر التصميم*/
/* المساهمين في الهيدر*/
.nav-item.participants {
    display: none;
}
/* اضف كلمات في الهيدر*/
.nav-item.add-lyrics {
    display: none;
}