@font-face {
    font-family: "Noto";
    src: url("noto//Noto_Sans/NotoSans-VariableFont_wdth\,wght.ttf") format("truetype") ;
}
@font-face {
    font-family: "Noto fars";
    src: url("noto/Noto_Sans_Arabic/NotoSansArabic-VariableFont_wdth\,wght.ttf") format("truetype") ;
}
*{
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
    font-family: "Noto" , "Noto fars";
    scrollbar-width: none;
}
body{
    --black:black;
    --gray:#e9e9e9;
    --border:#ccc;
    --box:#ff0000;
    --text:rgb(105, 105, 105);
    --bkg:#ffffff;
   --white:white;
    /* --blue:hsl(209, 90%, 54%); */
    /* --blue:#1496ec; */
    --blue: #0e93e0; 
    --red:hwb(0 28% 0%);
    background-color: var(--bkg); 
}

::-webkit-scrollbar{
    display: none;
}





main{
    margin-bottom: 120px;
}
.sp{
    max-width: 550px;
    width: 100%;
    border-bottom: 1px solid var(--border);
    position: relative;
    margin-bottom: 11px;
}
.say-post{
    padding: 13px 14px;
    max-width: 500px;
    width: 100%;
    display: flex;
    align-items: center; 
}
.say-post h1{
    font-size: 1.4rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.say-post svg {
    fill: none;
    stroke: black;
    stroke-width: 2.8;
    width: 22px;
    position: relative;
    top: 5px;

}


















.post-all-container{
    max-width: 500px;
    height: auto;

    margin-top: px;
    margin-bottom: 5px;

    position: relative;
  }

  .post-all-container li{
      list-style-type: none;
  }
  .post-all-container a{
      text-decoration: none;
  }
  .post-card-container{
      width: 100%;
      background-color:rgb(255, 255, 255);
      /* background: linear-gradient(to right , #a3ddff , #ffea97); */
      padding: 14.5px 11px 10.86px 9px;
      display: flex;
      gap: .35rem;
      position: relative;
      overflow: hidden;
      background-color: var(--white);
      border-bottom:none;
  }

  .post-profile-card-user-container{
      width: 55px;
      overflow: hidden;
    }
.post-profile-user-container{
    width: 2.73rem;
    height: 2.73rem;
    position: relative;
    border-radius: 1000px;
}
  .post-profile-user-container img{
      /* width: 2.73rem; */
      width: 100%;
      height: 100%;
      /* height: 2.73rem; */
      border-radius: 50%;
      object-fit: cover;
      /* aspect-ratio: 7/2; */
  }
  .post-card-tow-container{
      width: 100%;
      height: auto;
      position: relative;
      overflow: hidden;
  }
  .post-header-card-tow-container{
      width: 100%;
      height: auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
  }
  .post-header-name-card-container{
      display: flex;
      align-items:center;
      gap: 1.6px;
  }
  .post-header-name-card-container p{
      /* font-size: .9855rem;   */
      font-size: .99rem;
      font-weight:bold;  
      -webkit-text-stroke-width: .19px;
      text-transform: capitalize;
  }
  .post-blue-tick-card-container{
      display: flex;
      align-items: center;
      position: relative;
      top: 3.6px;
      display: non;
  }
  #tick-one{
     fill: rgb(20, 133, 238);
     width:1.15rem;
     display: non;
  }
  #tick-tow{
      width: 1.1rem;
      margin-left: .2px;
      display: none;
  }
  .post-header-setion-tow-container{
      display: flex;
      align-items: center;
      gap: 8px;
     margin-right: 4px;
  }
  #post-header-dote{
      width: 18.2px;
      transform: rotate(90deg);
      fill: rgb(0, 0, 0);
      position: relative;
      top: 0.9px;
      display: non;
  }
  .post-header-time-container p{
      font-size: 0.799rem;
      margin-bottom: .7px;
      font-weight: 470;
      color: rgb(165, 165, 165);
      position: relative;
  }

  .timer-post-container{

  }
  .timer-post-container svg{
    fill: none;
    stroke:gray;
    stroke-width: 2;
    width: 16.5px;
    position: relative;
    top: 3.1px;
    left: 1.4px;

  }
  .pined-say{
    text-align: left;
    color: rgb(117, 117, 117);
    font-size: 13.5px;
    font-weight: 550;
    position: absolute;
    top: 7px;
    left: 14px;
  }
  .post-line-brand-card-container{
      height: 11%;
      display: none;
  }
  .post-line-brand-container{
      width: 1px;
      height: 100%;
      /* background-color: rgb(194, 194, 194); */
      border-left: 1.5px dashed rgb(202, 202, 202);
      position: relative;
      top: 3px;
  }
  .post-line-brand-card-container img{
      width: 27px;
      height: 27px;
      position: relative;
      top: 10px;
      border-radius: 50%;
  }
  .post-all-subject-container{
      margin-top: px;
  }

  #post-text{
      font-size:.9rem;
      font-weight: 530;
      color: var(--black);
      word-break: break-word;
      white-space: pre-wrap;
      line-height: 1.5;
      position: relative;
      /*top: -.1px;*/
/* text-align: left; */

  }
  .post-image-card-container{
      width: 100%;
      max-height: 610px;
      margin-top: -17px;
      position:relative;
      border-radius: 20px;
     display: non;
     background-color: var(--white);
    border: 1px solid var(--border);
    background-color: black;
    /* filter: blur(2px); */
    overflow: hidden;
  }
  .post-image-card-container figure{
      width: 100%;
      height: 100%;
      display: grid;
      gap: 1.2px  1.5px;
  }
  .image-grid {
      width: 100%;
      height: 100%;
  }
  .image-grid video{
      width: 100%;
      height: 100%;
      object-fit: cover;
      /* aspect-ratio: 4/3;   */
      /* aspect-ratio:;   */
  }
  
  .image-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 8/7;  
}
   /* حالت ۱ آیتم → همیشه تمام عرض */
   .gallery:has(:nth-child(1):only-child) {
      grid-template-columns: 1fr ;
  }
  
  
  /* حالت ۲ آیتم → دو ستون */
  
  .gallery:has(:nth-child(2):nth-last-child(1)) {
      grid-template-columns: 1fr 1fr;
  }
  
  .gallery:has(:nth-child(3):nth-last-child(1)) {
      grid-template-columns: 1fr 1fr;
  }
  .gallery:has(:nth-child(3):nth-last-child(1)) :nth-child(3) {
      grid-column: span  2; 
  
      /* in php yuo most change the span 0 when 4 image  << 0 to 2 >>*/
  
  }
  
  /* حالت ۴ آیتم → دو ستون */
.gallery:has(:nth-child(4):nth-last-child(1)) {
    grid-template-columns: 1fr 1fr;
}
  
  
.gallery:has(:nth-child(5):nth-last-child(1)) {
      grid-template-columns: 1fr 1fr;
  }
.gallery:has(:nth-child(5):nth-last-child(1)) :nth-child(5) {
      grid-column: span 2; 
  } 
  
  /* حالت ۶ آیتم → دو ستون */
.gallery:has(:nth-child(6):nth-last-child(1)) {
      grid-template-columns: 1fr 1fr;
}
  
.post-all-video-container{
    width: 100%;
    height: 100%;
    position: relative;
}
.post-video-card-container{
    max-width: 500px;
    height: 100%;
    position: relative;
}
.post-video-card-container video {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
}
.post-video-controls{
    display: flex;
    align-items: center;
    justify-content: space-between;
    opacity: 1;
    transition: opacity 1s;
    position: absolute;
    top: 9px;
    left: 8px;
    width: 50.3px;
    height: 25px;
    background-color: rgba(0, 0, 0, 0.74)  ;
    border-radius: 9px;
    z-index: 2;
    padding: 4px;
}
.post-show-controls {
    opacity: 1 !important;
}
.post-btn-video {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;

}
.post-playPause {
    position: absolute;
    /* position:absolute;
   bottom: 9px;
   left: 10px; */
    z-index: 2;
    left: 5.6px;

}
.post-playPause {
    /* width: 40px;
    height:20px;
    border-radius: 10px; */
}
.post-playPause svg{
    width: 16px;
    /* height: 20px; */
    fill: white;
}
.post-muteToggle{
    position:absolute;
   /* bottom: 9px;
    right: 9px; */
    z-index: 2;
    left: 36px;
    top: 13.5px;
}
.post-muteToggle{
    /* width: 27px;
    height: 27px; */
}
.post-muteToggle svg{
    width: 16.5px;
}
.post-unmuteIcon{
    fill:var(--white);
    stroke: white;
     stroke-width: .6;
}
.post-muteIcon{
    fill: none;
    stroke: white;
    stroke-width: 1.8;
}

.post-progress-container {
    position:absolute;
    /* bottom: 0; */
    top: 0px;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(240, 240, 240, 0.5);
    cursor: pointer;
    opacity: 1;
    transition: opacity 0.3s;
    z-index: 2;
    display: none;
}
.post-progress-bar {
    width: 0%;
    height: 100%;
    background-color: var(--blue);
    cursor: pointer;
    position: absolute;
   bottom:0px;
}

/*  
.hidden {
      display: none;
  } */


  
  
  
  .post-reply-card-container{
     
      display: none;
     border: 1px solid rgb(219, 219, 219);
     /* border :1px solid var(--border); */
     border-radius: 15px;
     /* box-shadow: 0px 1px 5px rgb(189, 189, 189); */
     /* background-color:rgb(255, 146, 206); */
     margin-top: -14px;
    
     background: rgb(40,255,206);
     background: -moz-linear-gradient(90deg, rgba(40,255,206,1) 0%, rgba(55,255,149,1) 100%);
     background: -webkit-linear-gradient(90deg, rgba(40,255,206,1) 0%, rgba(55,255,149,1) 100%);
     background: linear-gradient(90deg, rgba(40,255,206,1) 0%, rgba(55,255,149,1) 100%);
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#28ffce",endColorstr="#37ff95",GradientType=1);
  
  }
  .post-reply-section-one-container{
      display: flex;
      gap: 6px;
      align-items: center;
      padding: 9px 9px 0px 10px;
  }
  .post-reply-profile-container img{
      width:37px;
      border-radius: 50%;
  }
  .post-reply-username p {
      font-size: 14.5px;
      font-weight: bold;
      color: rgb(218, 0, 91);
      position: relative;
      top: -3.5px;
  }
  .post-reply-icon p{
      position: absolute;
      font-size: .9rem;
      color: rgb(172, 172, 172);
     right: 9px;
      top:95px;
      display: none;
  }
  #post-reply-text{
      font-size: .89rem;
      font-weight: 520;
      color: var(--black);
      word-break: break-word;
      white-space: pre-wrap;
      line-height: 1.5;
      position: relative;
      text-align: left;
      padding: 0px 10px 0px 10px;
      top: -3px;
  margin-bottom: -9px;
  }
  .post-reply-image-container{
      width: 100%;
      max-height:300px;
      object-fit: cover;
      aspect-ratio: 4/3;
      border-radius: 15px;
      position: relative;
      display: none;
      /* top: -12px; */
    
      margin-top: -19px;
      top: 5px;
  }
  .post-reply-image-container img{
  
      width: 100%;
      height: 100%;
      object-fit: cover;
      /* aspect-ratio: 40000/4009; */
      border-radius: 0px 0px 15px 15px;
  }
  
  
  
  #c{
      color: rgb(21, 202, 30);
  }

.repied-say{
    text-align: left;
    color: rgb(116, 116, 116);
    font-size: 13.6px;
    font-weight: 560;
    position: absolute;
    top: 8px;
    left: 14px;

}
  
  .post-footer-card-container{
      width: 100%;
      height: auto;
   margin-top: 1.1rem;
      /* margin-top:-0.81rem; */
  }
  .post-button-card-container{
      width: 100%;
      height: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: px;
      position: relative;
      left: px;
      --btn-color:rgb(83, 86, 107);
  }
  .post-button-card-container button{
      border-radius: 50px;
      border: none;
      outline: none;
      max-width: 100px;
      height: 24px;
      background-color:var(--white);
      /* background-color: rgb(228, 243, 255); */
      justify-content: center;
      display: flex;
      align-items:center;
      gap: 0.097rem;
      position: relative;
      z-index: 2;
  }
  .d{
      width: 80%;
      height: 1px;
      background-color:rgb(212, 212, 212);
      position: absolute;
      top: 12px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 0;
  }
  .post-button-card-container p{
      font-size: .84rem;
      font-weight: 510;
      color: var(--btn-color);
      position: relative;
      top: .2px;
  }
  .post-button-card-container svg{
      fill: none;
      stroke: var(--btn-color);
      padding:.168rem;
      pointer-events: none;
  }


  #heart{

    display: flex;
    padding: 0px 8px 0px 4px ;
    background-color: white;
    position: relative;
    z-index: 2;
  }

  #heart:hover svg path{
    /* fill: var(--red); */
    stroke: var(--red);
  }
  #heart:hover p{
    color: var(--red);
    text-shadow: 0px 0px 9px rgb(255, 174, 174);
   }
  #heart svg{
       width: 1.53rem;
     stroke-width: .9;
     /* fill: var(--btn-color); */
     
      position: relative;
      top: -1.3px;
      left: px;

  }
  #heart svg path {
    fill: none;
stroke: var(--btn-color) ;
stroke-width: 5;
}
#heart svg.liked path {
    fill: var(--red);
stroke: var(--red) ;
stroke-width: 5;
color: red;
}

.heart-icon.liked path {
    fill: var(--red);
stroke: var(--red) ;
stroke-width: 5;
color: red;
}

.like-btn svg.liked {
    fill: var(--red);
stroke: var(--red) ;
stroke-width: 5;
color: red;
}
  #heart p{
    top: 1.8px;
      position: relative;
      left: -.8px;
      z-index: 3;
  }



  #repeat{
    display: flex;
    padding: 0px 8px 0px 4px ;
    background-color: white;
    position: relative;
    z-index: 2;
  }
  #repeat svg{
      width: 1.45rem;
      fill: var(--btn-color);
      stroke-width: .9;
  }
  #repeat svg.replied{
    fill:#00ca54;
    stroke: #00ca54;
  }
  #repeat p {
      position: relative;
      left: 1.89px;
      top: 2.4px;
  }
  #repeat:hover svg{
    fill:#00ca54;
    stroke: #00ca54;
  }
  #repeat:hover p{
  color: #00ca54;
  text-shadow: 0px 0px 9px rgb(120, 255, 160);
  }


  #seen{
      padding: 0px 8px 0px 4px ;
      display: flex;
      background-color: white;
      position: relative;
      z-index: 2;
  }
  #seen svg{
     fill: var(--btn-color);
      width: 1.93rem;
      stroke-width: 0.1;
  }
  #seen p{
      position: relative;
      left: -1.2px;
      top: 1.9px;
  }
  #seen:hover svg{
    fill: var(--blue);
    stroke: var(--blue);
  }
  #seen:hover p{
    color: var(--blue);
    text-shadow: 0px 0px 9px rgb(118, 182, 255);
  }



  #bookmark{
    padding: 0px 8px 0px 4px ;
    display: flex;
    background-color: white;
    position: relative;
    z-index: 2;
  }
  #bookmark svg{
      width: 1.41rem;
      stroke-width: 970;
      position: relative;
      top: .7px;
  }
  #bookmark svg.saved{
    fill: var(--blue);
    stroke: var(--blue);
    width: 1.4293rem;
    stroke-width: 970;
    position: relative;
    top: .7px;
}
  #bookmark:hover svg{
    stroke: var(--blue);
  }
  #bookmark:hover p{
    color: var(--blue);
    text-shadow: 0px 0px 9px rgb(118, 182, 255);
  }
  #bookmark p{
    position: relative;
    top: 2.7px;
    padding-right: px;
}

  #send{
      padding: 0px 3px 0px 6px ;
  }
  #send svg{
      fill:  var(--black);
      width: 1.65rem;
      stroke-width: 1.82;
      stroke: var(--btn-color);
  }
  #send:hover svg{
    fill: var(--blue);
    stroke: var(--blue);
  }

  .post-footer-send-dot-container{
      position: relative;
      width: 3px; 
      height: 3px;
      background-color: var(--red);
      border-radius: 50%;
      top: 5px;
      left: -4px;
      display: none;
  }
  .post-button-card-container svg:not(#repeat):hover{
      fill: none;
      stroke:var(--blue);
  }
  
  
  
  .post-comment-card-container{
      width: 100%;
     padding-top: .53rem;
     padding-bottom: .53px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      border-top: none;
      border-bottom: 1px solid var(--border);
      border-left: 1px solid var(--border);
      border-right: 1px solid var(--border);
      border-radius: 14px;
      background-color: var(--white);
      
  }
  
  .post-comment-top-container{
      width: 100%;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      --comment-blue:var(--blue);
  }
  .post-comment-setion-one-container{
      display: flex;
      align-items: center;
      gap: 8px;
      position: relative;
      left: 12px;
  }
  .post-comment-card-container img{
      width: 1.77rem;
      height: 1.77rem; 
      border: 0.14rem solid rgb(255, 255, 255); 
      border-radius: 50%;
      position:relative;
      top: -2.5px;
  }
  .post-comment-card-tow-container p{
      font-size: 0.865rem;
      font-weight: 690;
      -webkit-text-stroke-width: .08px;
      color: var(--comment-blue);
      position: relative;
      top: -3.8px;
      /* display: none; */
  }
  .post-comment-card-one-container{
      display: flex;
      align-items: center;
      position: relative;
      left:1px;

  }
   .post-comment-card-one-container img{
    position: relative;
    left: 4px;
    margin-left: -12px;
   }
  .post-comment-setion-tow-container svg{
      width: 1.24rem;
      fill: none;
      stroke: var(--comment-blue);
      stroke-width: 3.1;
      position: relative;
      left: -16.5px;
      top: -.5px;
  }
  
  
  .post-report-card-container{
      width: 100%;
      max-width: 500px;
      height: 40px;
      position: fixed;
      left: 50%;
      transform: translateX(-50% );
      bottom: 5px;
      display: none;
      z-index: 5;
      background-color: rgb(255, 255, 255);
      border:1px solid rgb(189, 189, 189);
      border-bottom: none;
      border-radius: 18px 18px 4px 4px ;
      box-shadow: 0px 0px 30px rgb(177, 177, 177);
  }


.post-card-all-container{
    opacity: 0;
      /* transform: translateY(40px); */
      transition: all .2s ease;
}
.post-card-all-container.visible{
    opacity: 1;
      /* transform: translateY(0); */
}


.formatted-text{
    white-space: pre-line;
}

.formatted-text a {
    color: #007bff;
    text-decoration: none;
}




.delete-post{
    position: relative;
    top: .9px;
}
.delete-post button{
    background-color: transparent;
    border: none;
    outline: none;
    position: relative;
    cursor: pointer;
}
.delete-post svg{
    width: 16px;
    fill:var(--red);
    stroke: var(--red);
    stroke-width: .9;
}