@charset "utf-8";
/* CSS Document */
         .container_R {
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-family: 'R1', sans-serif;
  direction: rtl;  
  background-color: #fff;  
 
}  

.card_R {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  padding: 20px;
}

.card-header_R {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
  margin-bottom: 15px;
}
 
.card-title_R {
  margin: 0;
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.card-header_R .icon_R {
  font-size: 24px;
  color: #ffc107;
}

.card-body_R {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.item_R {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item-left_R {
  background-color: #f0f4f7;
  border-radius: 8px;
  padding: 8px 15px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.item-right_R {
  display: flex;
  align-items: center;
  gap: 10px;
}

.item-right_R .text_R {
  font-size: 16px;
  color: #555;
}

.dot_R {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.trending-item_R {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #555;
}

.trending-item_R .icon_R {
  font-size: 18px;
  color: #777;
}

.trending-item_R .text_R {
  font-size: 16px;
}
           
.user-card_R {
  padding: 20px;
  text-align: right;
  direction: rtl;  
}

.user-header_R {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-bottom: 2px solid #eee;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.user-info_R {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.profile-pic_R {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 10px; border-bottom: 2px  solid #eee;
}
.profile-pic_R_act {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 10px; border-bottom: 2px  solid #eee;
}
 .img_pk_chan{
     width: 25px; border-radius: 50%; background: #DCD8D8; padding: 3px;
 }
 .main_pic_act{
     border-radius: 50%; width: 200px; height: 200px;  border:1px solid #555;
 }

.user-name_R {
  font-size: 18px;
  font-weight: bold;
 
}

.user-menu_R {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.menu-item_R {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #006094;
  cursor: pointer;
  transition: background-color 0.3s;
  padding: 2px 10px 5px 10px;
  border-radius: 8px;
  font-family: 'R2';
}
 
.menu-item_R:hover {
  background-color: #006094; color: #fff;
}

.menu-item_R .icon_R {
  font-size: 20px;
  color: #777;
}

.menu-item_R .text_R {
  font-size: 16px;
}
 
.avatar_R {
  width: 50px;
  height: 50px;
  border-radius: 50%; border-bottom:2px solid #006094;
  object-fit: cover; margin: 10px;
}

.content_R {
  flex: 1;  
}

.text_R {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #333; text-align: justify
}

.meta_R {
  margin-top: 6px;
  font-size: 13px;
  color: #666;
  display: flex;
  gap: 15px;
}
 .card_rts {
      display: grid;
      grid-template-columns: 1fr;
      gap: 30px;  
      
      margin: auto;
    }

    .card_rt {
      background: #fff;
      border-radius: 18px;
      box-shadow: 0 6px 18px rgba(0,0,0,0.1);
      overflow: hidden;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .card_rt:hover {
      transform: translateY(-6px);
      box-shadow: 0 12px 28px rgba(0,0,0,0.15);
    }

     .image-overlay_rt {
      position: relative;
      height: 280px;
    }
    .image-overlay_rt img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .image-overlay_rt .overlay-text {
      position: absolute;
      bottom: 0;
      right: 0;
      left: 0;
      padding: 20px;
      color: #fff;
      font-size: 20px;
      font-weight: bold;
      background: linear-gradient(to top,rgba(0,0,0,0.6),rgba(0,0,0,0));
    }

     .card_rt-content {
      padding: 20px;
    }
    .card_rt-content h3 {
      margin: 0 0 12px;
      color: #1a237e;
    }
    .card_rt-content p {
      color: #444;
      line-height: 1.7;
      font-size: 15px;
    }
    .card_rt img {
      width: 100%;
      height: 220px;
      object-fit: cover;
    }

     .text-only_rt {
      padding: 25px;
      background: linear-gradient(135deg,#e3f2fd,#f9fbe7);
    }
    .text-only_rt h3 {
      margin: 0 0 10px;
      color: #004d40;
    }
    .text-only_rt p {
      color: #333;
      font-size: 15px;
      line-height: 1.8;
    }  
          
    @media only screen and (max-width : 767px) {
		 #send{margin:0px 0px 0px 0px ;}
	 }
	 @media only screen and (min-width : 767px) {
		  #send{margin:0px -15px 0px 0px ;}
	 }
                 
     .rt_tre{
       margin-right: 40px;
       display: none;
       width:90% ;
       border-radius:0px;
       border:1px solid #d8e3ec ;
       height: 150px;
       background: #FFFFFF ;
       font-size: 30px;
      }
           .add_form_noctv{background:#fdf2e9;   ;padding: 20px ; margin-bottom: 30px;border-radius: 18px; box-shadow: 0 6px 18px rgba(0,0,0,0.1);transition: transform 0.3s ease, box-shadow 0.3s ease;}
               .lognbotom{
                   font-family: 'R2' ;float:right ;  color:#02492b;  font-weight:bold; width:100%;
               }
               .adduserbot{float:right ;   color:#006094; text-decoration:none; text-align:center; font-size:16px; margin:5px 0px 0px 0px;   font-weight:bold; width:100%;}
               .uplsup{width:50% ; font-family:'R1'; font-size:18px ; padding: 2px 5px 10px 5px; font-weight:bold; background:#005da0; color:#FFF ; margin-top:5px; border:2px solid #005da0 ; border-radius: 18px;   min-width:100px}
               .broras{width:50% ; display:none; font-family:'R1'; font-size:20px ; height:35px; font-weight:bold; background:#005da0; color:#FFF ; margin-top:5px;border-radius: 18px;     min-width:100px}
                .custom-select-wrapper{
  position: relative;
  width: 100%;
  font-family: 'R1';
  direction: rtl;  
}

 
.custom-select{
  height: 40px;               
  line-height: 40px;
  padding: 0 5px;
  border:1px solid #d8e3ec ;
  color:#6A5F5F;
  font-size: 16px;
  font-weight: bold;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  border-radius: 4px;
  box-sizing: border-box;
}

 .custom-select .label{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 4px;
}

 .custom-select .arrow{
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #005da0;
  transition: transform .18s ease;
  margin-left:6px;
}

 .custom-select.open .arrow{
  transform: rotate(180deg);
}

 .custom-options{
  display: none;  
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border:1px solid #d8e3ec ;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  z-index: 1200;
  padding: 2px;
  box-sizing: border-box;
  max-height: 340px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2px;
}

 .custom-option{
  padding: 6px 6px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  color:#006094;
  border-radius: 4px;
  text-align: right;  
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

 .custom-option:hover,
.custom-option.selected{
  background:#006094; color: #FFFFFF;
}

 .custom-options.hidden{
  display: none !important;
}
           
  video {
    width: 100%;
    height: auto;
} 
 .text_bemntfkr{
       border-radius:15px; border:1px solid #d8e3ec ;height: 100px;
 }
           
 .div_cor_rsu {
      background: #fff;
      border: 1px solid #ddd;

      border-radius: 12px;
      padding: 20px;
      max-width: 750px;
      margin: auto;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }

     .headerdiv_rsu {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 15px;
    }

    .date_rsu { font-family: 'R2';
      font-size: 12px;
      color: #333;
    }

    .div_corauthor_rsu {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    .author-info_rsu {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .div_corauthor_rsu img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }

    .div_corauthor_rsu span {
      font-size: 18px;
      color: #006094;
      font-weight: bold;
    }

    .categorysdi_rsu {
      
      font-size: 13px;
      font-weight: bold;
      margin: 0px 40px 10px 0px;
    }
           .categorysdi_rsu a{
            color:#F78C2E;   
           }

     .title_rsu {
      font-size: 20px;
      font-weight: bold;
      margin: 10px 0;
      color: #222;
    }

    .descrt_rsu {
      font-size: 15px;
      color: #555;
      margin-bottom: 20px;
    }

     .footerdiv_rsu {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-top: 1px solid #eee;
      padding-top: 15px;
      margin-top: 15px;
    }

    .actionssd_rsu {
      display: flex;
      gap: 15px;
      font-size: 14px;
      color: gray;
      align-items: center;
    }

    .actionssd_rsu span {
      display: flex;
      align-items: center;
      gap: 5px;
      cursor: pointer;
    }

    .comment-btn_rsu {
      background: #1ba7da;
      color: #fff;
      padding: 5px 12px;
      border: none;
      border-radius: 8px;
      font-size: 13px;
      cursor: pointer;
    }

    .left-actions_rsu {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 14px;
      color: gray;
    }

    .edit-btn_rsu {
      background: #4CAF50;
      color: #fff;
      padding: 5px 12px;
      border: none;
      border-radius: 8px;
      font-size: 13px;
      cursor: pointer;
    }

    .delete-btn_rsu {
      background: #f44336;
      color: #fff;
      padding: 5px 12px;
      border: none;
      border-radius: 8px;
      font-size: 13px;
      cursor: pointer;
    }

    .share-icons_rsu {
      display: flex;
      gap: 8px;
    }

    .share-icons_rsu span {
      cursor: pointer;
    }
           
.container_raso{max-width:900px;margin:0 auto;}
.mainrasoldiv{background:#fff;border:1px solid #ddd;border-radius:12px;padding:12px;margin-bottom:18px;box-shadow:0 1px 6px rgba(0,0,0,0.05);}
.post_ras-content{font-size:16px;margin-bottom:8px;white-space:pre-wrap;}
.rasol_controls{text-align:left;margin-bottom:8px;}
.icon_r_cont{width:20px;height:20px;cursor:pointer;margin-left:6px;vertical-align:middle;}
.rad_box{border-top:1px solid #eee;padding-top:10px;margin-top:8px;}
textarea{width:100%;min-height:56px;padding:8px;border-radius:6px;border:1px solid #ccc;resize:vertical;}
button{cursor:pointer;padding:6px 10px;border:none;border-radius:6px;background:#006094;color:white;}
button.secondary{background:#6c757d;}
.rad_ras-item{background:#fbfbfb;border-radius:8px;padding:8px;margin-bottom:8px;border-right:4px solid #e0e0e0;}
.rad_ras-meta.small{font-size:12px;color:#777;margin-top:6px;}
.rad_ras-actions{margin-top:6px;text-align:left;}
.rad_ras-form.hidden,.edit-form.hidden,.confirm-box.hidden{display:none;}
.confirm-box{margin-top:6px;padding:6px;background:#f8f8f8;border:1px solid #ddd;border-radius:6px;}
.small{font-size:13px;color:#666;}
.rad_ras_pagi{text-align:center;margin-top:12px;}
.rad_ras_pagi a, .rad_ras_pagi span{display:inline-block;padding:6px 10px;margin:2px;border-radius:6px;text-decoration:none;}
.rad_ras_pagi a{background:#eee;color:#333;}
.rad_ras_pagi .active{background:#006094;color:#fff;}
           

.comentr {
  position: relative;
  background: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 10px 15px;
  margin-top: 5px;
  display: inline-block;
  max-width: 80%;
  font-size: 15px;
  color: #333;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

 .comentr::before {
  content: "";
  position: absolute;
  right: -10px;  
  top: 10px;
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent transparent #f8f9fa; /* السهم بنفس لون الخلفية */
  filter: drop-shadow(-1px 1px 1px rgba(0,0,0,0.1));
}

           .comment-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  direction: rtl;  
  margin: 6px 0;
}

 .avatar_R {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 30px;
}

 .comment-body {
  flex: 1;
}

 .comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

 .coment {
  position: relative;
  background: #fbfcff;            /* خلفية فاتحة جدًا */
  border: 1px solid #e6ecf5;      /* حدود ناعمة */
  border-radius: 12px;
  padding: 10px 14px;
  max-width: 100%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  font-size: 15px;
  color: #253238;
  line-height: 1.35;
}

 .coment::after {
  content: "";
  position: absolute;
  top: 14px;
  right: -8px; /* يخرج خارج مربع الفقاعة باتجاه الصورة */
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #fbfcff; /* نفس لون الخلفية */
  filter: drop-shadow(-1px 1px 0 rgba(0,0,0,0.03));
}

/* ألوان بديلة فاتحة (اختر واحدة بإضافة الكلاس المناسب في HTML) */
.coment.light-blue  { background:#f6fbff; border-color:#e3f2ff; }
.coment.light-green { background:#fbfff7; border-color:#eaf9e6; }
.coment.light-gray  { background:#ffffff; border-color:#f3f4f6; }

/* ضمان أن السهم يستخدم لون الخلفية المناسب */
.coment.light-blue::after  { border-right-color: #f6fbff; }
.coment.light-green::after { border-right-color: #fbfff7; }
.coment.light-gray::after  { border-right-color: #ffffff; }

/* استجابة صغيرة للشاشات الصغيرة */
@media (max-width:480px){
  .coment { font-size:14px; padding:8px; }
  .comment-row { gap:8px; }
}