/*:root {*/
    
    
   
    
    

    
    
    
    
     
    
/*  --blue:#3c9af7;   */
           /* متن اصلی در تاریکی 
    --gray: #2d2d2d;            /* پس‌زمینه‌های ثانویه 
    --border: #6e6e6e;         /* بوردرها با کنتراست مناسب 
    --box: #ff2d2d;             /* قرمز با کنتراست بهتر 
    --text: #e0e0e0;            /* متن با روشنایی مناسب 
    --bkg: #121212;             /* پس‌زمینه اصلی تاریک */
/*    --white: #252a35;      */
/*    --white: #1d232d;*/
    
/*        --white: #11161e;*/
/*--white: #1d2733; */
         /* آبی روشن‌تر برای تاریکی */
/*    --red: #f93532;    */
   
/*     --post-h1-color: rgb(255, 255, 255);*/
/*    --post-time-color: rgb(165, 165, 165);*/
/*    --post-timer-stroke: rgb(165, 165, 165);*/
/*    --post-pined-color: rgb(117, 117, 117);*/
/*    --post-line-dash: rgb(208, 208, 208);*/
/*    --post-image-bg: black;*/
/*    --post-video-controls-bg: rgba(78, 78, 78, 0.74);*/
/*    --post-progress-bg: rgba(240, 240, 240, 0.5);*/
/*    --post-reply-border: rgb(219, 219, 219);*/
/*    --post-reply-gradient-1: rgba(40,255,206,1);*/
/*    --post-reply-gradient-2: rgba(55,255,149,1);*/
/*    --post-reply-username: rgb(218, 0, 91);*/
 
/*    --post-replied-color: #83ffb7;*/
/*    --post-replied-shadow: rgb(171, 255, 196);*/
    
/*    --post-divider-color: rgb(212, 212, 212);*/
/*    --post-like-shadow: #ffabab;*/
/*    --post-seen-shadow: rgb(101, 173, 255);*/
/*    --post-comment-border: var(--white);*/
/*    --post-report-bg: rgb(255, 255, 255);*/
/*    --post-report-border: rgb(189, 189, 189);*/
/*    --post-report-shadow: rgb(177, 177, 177);*/
/*    --post-link-color: #007bff;*/
/*    --post-repied-color: rgb(165, 165, 165);*/
    


/*    --post-reply-icon: rgb(218, 218, 218);*/

/* --post-btn-color: rgb(137, 137, 137);*/
    
  
    
    
    
        /* متغیرهای رنگ اصلی */
    /*--black: black;*/
    /*--gray: #e9e9e9;*/
    /*--border: #ccc;*/
    /*--box: #ff0000;*/
    /*--text: rgb(105, 105, 105);*/
    /*--bkg: #ffffff;*/
    /*--white: white;*/
    /*     --blue:#368fe7; */
    /*--red: hwb(0 28% 0%);*/
    
    /* متغیرهای بخش post */
    /*--post-h1-color: black;*/
    /*--post-time-color: rgb(165, 165, 165);*/
    /*--post-timer-stroke: gray;*/
    /*--post-pined-color: rgb(117, 117, 117);*/
    /*--post-line-dash: rgb(202, 202, 202);*/
    /*--post-image-bg: black;*/
    /*--post-video-controls-bg: rgba(0, 0, 0, 0.74);*/
    /*--post-progress-bg: rgba(240, 240, 240, 0.5);*/
    /*--post-reply-border: rgb(219, 219, 219);*/
    /*--post-reply-gradient-1: rgba(40,255,206,1);*/
    /*--post-reply-gradient-2: rgba(55,255,149,1);*/
    /*--post-reply-username: rgb(218, 0, 91);*/
    /*--post-reply-icon: rgb(172, 172, 172);*/
    /*--post-replied-color: #00ca54;*/
    /*--post-replied-shadow: rgb(120, 255, 160);*/
    /*--post-btn-color: rgb(83, 86, 107);*/
    /*--post-divider-color: rgb(212, 212, 212);*/
    /*--post-like-shadow: rgb(255, 174, 174);*/
    /*--post-seen-shadow: rgb(118, 182, 255);*/
    /*--post-comment-border: rgb(255, 255, 255);*/
    /*--post-report-bg: rgb(255, 255, 255);*/
    /*--post-report-border: rgb(189, 189, 189);*/
    /*--post-report-shadow: rgb(177, 177, 177);*/
    /*--post-link-color: #007bff;*/
    /*--post-repied-color: rgb(116, 116, 116);*/
    
  
    
 

/*}*/

/*@font-face {*/
/*    font-family: "Noto";*/
/*    src: url("css/noto//Noto_Sans/NotoSans-VariableFont_wdth\,wght.ttf") format("truetype") ;*/
/*}*/
/*@font-face {*/
/*    font-family: "Noto fars"; */
/*    src: url("css/noto/Noto_Sans_Arabic/NotoSansArabic-VariableFont_wdth\,wght.ttf") format("truetype") ;*/
/*}*/

* {
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
    /*font-family: 'Noto', "Noto fars", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;*/
    scrollbar-width: none;
}

body {
    background-color: var(--white);
}

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


a {
  text-decoration: none;
  color: inherit;
  cursor: default; 
}



/*#animation-post{*/

/*   animation: glassSmooth 0.45s ease-in-out 0.02s forwards;*/
/*}*/

/*@keyframes glassSmooth {*/
/*    0% {*/
/*        backdrop-filter: blur(0px);*/
/*        -webkit-backdrop-filter: blur(0px);*/
/*        background: rgba(255, 255, 255, 0.01);*/
/*        transform: scale(0.98);*/
/*        opacity: 0.3;*/
/*        border-color: rgba(255, 255, 255, 0);*/
/*        mask-image: radial-gradient(ellipse 80% 70% at center, black 20%, transparent 80%);*/
/*        -webkit-mask-image: radial-gradient(ellipse 80% 70% at center, black 20%, transparent 80%);*/
/*    }*/
/*    40% {*/
/*        backdrop-filter: blur(18px);*/
/*        -webkit-backdrop-filter: blur(18px);*/
/*        background: rgba(255, 255, 255, 0.07);*/
/*        transform: scale(0.99);*/
/*        opacity: 0.7;*/
/*        border-color: rgba(255, 255, 255, 0.05);*/
/*        mask-image: radial-gradient(ellipse 85% 75% at center, black 35%, transparent 85%);*/
/*        -webkit-mask-image: radial-gradient(ellipse 85% 75% at center, black 35%, transparent 85%);*/
/*    }*/
/*    75% {*/
/*        backdrop-filter: blur(32px);*/
/*        -webkit-backdrop-filter: blur(32px);*/
/*        background: rgba(255, 255, 255, 0.1);*/
/*        transform: scale(1.005);*/
/*        opacity: 0.9;*/
/*        border-color: rgba(255, 255, 255, 0.15);*/
/*        mask-image: radial-gradient(ellipse 90% 80% at center, black 50%, transparent 90%);*/
/*        -webkit-mask-image: radial-gradient(ellipse 90% 80% at center, black 50%, transparent 90%);*/
/*    }*/
/*    100% {*/
/*        backdrop-filter: blur(40px) saturate(1.5);*/
/*        -webkit-backdrop-filter: blur(40px) saturate(1.5);*/
/*        background: rgba(255, 255, 255, 0.12);*/
/*        transform: scale(1);*/
/*        opacity: 1;*/
/*        border-color: rgba(255, 255, 255, 0.3);*/
        /* وسط مشخص، گوشه‌ها خیلی نرم محو */
/*        mask-image: radial-gradient(ellipse 95% 85% at center, black 60%, rgba(0,0,0,0.05) 92%, transparent 100%);*/
/*        -webkit-mask-image: radial-gradient(ellipse 95% 85% at center, black 60%, rgba(0,0,0,0.05) 92%, transparent 100%);*/
/*    }*/
/*}*/





/* پس‌زمینه لایت‌باکس */
.vbox {
  position: fixed;
  inset: 0;
  background: black;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999999999999999999999;
}

/* وقتی فعال شد */
.vbox.active {
  display: flex;
}

/* خود ویدیو */
.vbox-player {
  max-width: 100%;
  max-height: 80vh;
  background: #000;
}

/* دکمه پلی وسط */
.vbox-center-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.vbox-center-play.active {
  opacity: 1;
  pointer-events: auto;
}
.vbox-center-play svg {
    padding:15px;
  background: rgba(0,0,0,0.5);
  border-radius: 50%;
}

/* کنترل‌های پایین */
.vbox-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transition: opacity 0.3s;
}
.vbox-controls.active {
  opacity: 1;
}

/* دکمه‌ها */
.vbox-controls button {
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vbox-controls svg {
  display: block;
}

/* نوار پیشرفت */
.vbox-progress {
  flex: 1;
  height: 5px;
  -webkit-appearance: none;
  appearance: none;
  background: #444;
  border-radius: 4px;
  position: relative;
  cursor: pointer;
}

/* WebKit Track */
.vbox-progress::-webkit-slider-runnable-track {
  height: 5px;
  background: linear-gradient(
    to right,
    #1e90ff var(--val, 0%),
    #444 var(--val, 0%)
  );
  border-radius: 4px;
}

/* Firefox Track */
.vbox-progress::-moz-range-track {
  height: 6px;
  background: #444;
  border-radius: 4px;
}

/* Thumb WebKit */
.vbox-progress::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  background: #1e90ff;
  border-radius: 50%;
  margin-top: -4px;
}

/* Thumb Firefox */
.vbox-progress::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: #1e90ff;
  border-radius: 50%;
}

/* زمان */
.vbox-time {
  font-size: 12px;
  color: #fff;
  white-space: nowrap;
}

/* دکمه ولوم و فول‌اسکرین */
.vbox-volume,
.vbox-fullscreen {
  color: #fff;
}

/* دکمه بستن */
.vbox-close {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 30px;
  color: #fff;
  cursor: pointer;
}

/* دکمه‌های بعدی و قبلی */
.vbox-prev,
.vbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 40px;
  color: #fff;
  cursor: pointer;
  user-select: none;
}
.vbox-prev {
  left: 20px;
}
.vbox-next {
  right: 20px;
}

/* برای اینکه کل پلیر تو مرکز صفحه بمونه */
.vbox-inner-wrapper {
  position: relative;
  display: inline-block;
}

















/* لایت‌باکس – مخفی پیش‌فرض */
.custom-lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0);
  display:flex;
  justify-content:center;
  align-items:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease, background .3s ease;
  z-index:99999900000000000000000000000;
}

/* حالت فعال */
.custom-lightbox.active{

  background:black;
  opacity:1;
  pointer-events:auto;
}

/* تصویر */
.custom-lightbox img{
  max-width:100%;
  max-height:90%;
  
   transform: scale(0.8);
  transition: opacity 0.3s ease, transform 0.3s ease;

}

/* دکمه بستن — پنهان پیش‌فرض */
.custom-close{
  position:absolute;
  top:10px;
  right:28px;
  color:#fff;
  font-size:30px;
  cursor:pointer;
  user-select:none;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
}

/* دکمه‌های قبلی/بعدی — پنهان پیش‌فرض */
.custom-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  font-size:25px;
  font-weight:550;
  color:#fff;
  cursor:pointer;
  user-select:none;
  padding:10px 15px;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
}

.custom-nav.prev{
  left:10px;
}

.custom-nav.next{
  right:10px;
}

/* نمایش دکمه‌ها فقط وقتی لایت‌باکس فعال شد */
.custom-lightbox.active .custom-close,
.custom-lightbox.active .custom-nav{
  opacity:1;
  pointer-events:auto;
}

/* لمس بدون هایلایت در موبایل */
.custom-nav,
.custom-close{
  -webkit-tap-highlight-color: transparent;
}


#no-posts{
    


  position: absolute;
  top: 490px;
  left: 50%;
  transform: translateX(-50%);
  
  
   color: var(--black);
    font-weight: 690;
    font-size: 1.45rem;
    margin-top: 25px;
    
    /*display:none;*/
    
    z-index:-2;


}


#notif-p{
    margin-top:55px;
}

#new-post{
    
    color:var(--blue);
    
    font-size:19px;
     font-weight: 650;
     position:relative;
     top:-100px;

}


/*.image-post,*/
/*.profile-image {*/
/*    filter: blur(10px);*/
/*    transform: scale(1.03);*/
/*    transition: filter 0.4s ease, transform 0.4s ease, opacity 0.4s ease;*/
/*}*/

/*.image-post.loaded,*/
/*.profile-image.loaded {*/
/*    filter: blur(0);*/
/*    transform: scale(1);*/
/*}*/

/*.loading-thumb {*/
/*    opacity: 0.85;*/
/*}*/

.profile-image,
.image-post,
.post-video {
  opacity: 0;
  transform: translate3d(0, 4px, 0);
  transition: opacity 320ms ease-out, transform 360ms cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}

.profile-image.loaded,
.image-post.loaded,
.post-video.loaded {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}



.loading-placeholder {
  background: var(--loader);
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  isolation: isolate;
}

.loading-placeholder::before {
  content: "";
  position: absolute;
  width: 350%;
  height: 350%;
  top: -75%;
  left: -75%;
  background: linear-gradient(
    135deg,
    var(--loader-bg-start) 40%,
    var(--loader-bg-mid) 48%,
    var(--loader-bg-mid) 52%,
    var(--loader-bg-end) 60%
  );
  filter: blur(var(--loader-blur));
  transform: translate(-150%, -150%);
  animation: luxuryMove 2.1s ease-in-out 0s infinite;
  will-change: transform;
  box-shadow: 0 0 var(--loader-box-shadow-blur) var(--loader-shadow);
  border-radius: 50%;
}

@keyframes luxuryMove {
  0% {
    transform: translate(-180%, -180%);
  }
  2% {
    transform: translate(-95%, -95%);
  }
  90% {
    transform: translate(80%, 80%);
  }
  100% {
    transform: translate(180%, 180%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .loading-placeholder::before {
    animation: none;
    opacity: 0;
  }
}

/* باکس پایه */
/*.loading-placeholder {*/
/*  background: linear-gradient(135deg, #e2e6ea 0%, #d1d6db 100%);*/
/*  position: relative;*/
/*  overflow: hidden;*/
/*  border-radius: 12px;*/
/*  isolation: isolate;*/
/*  box-shadow: */
/*    inset 0 1px 2px rgba(0,0,0,0.01),*/
/*    0 4px 12px rgba(0,0,0,0.05);*/
/*}*/

/* خط مورب که از گوشه به گوشه حرکت می‌کند */
/*.loading-placeholder::before {*/
/*  content: "";*/
/*  position: absolute;*/
  /* اندازه بزرگتر از باکس برای پوشش کامل حرکت مورب */
/*  width: 200%;*/
/*  height: 200%;*/
/*  top: -50%;*/
/*  left: -50%;*/
/*  background: linear-gradient(*/
    135deg, /* زاویه کج هماهنگ با مسیر حرکت */
/*    rgba(255, 255, 255, 0) 40%,*/
/*    rgba(255, 255, 255, 0.4) 50%,*/
/*    rgba(255, 255, 255, 0) 60%*/
/*  );*/
/*  filter: blur(4px);*/
  /* شروع حرکت از خارج کادر در بالا سمت چپ */
/*  transform: translate(-50%, -50%);*/
/*  animation: cornerToCorner 3s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;*/
/*  will-change: transform;*/
/*}*/

/*@keyframes cornerToCorner {*/
/*  0% {*/
    /* کاملا خارج از کادر (بالا-چپ) */
/*    transform: translate(-100%, -100%);*/
/*  }*/
/*  100% {*/
    /* کاملا خارج از کادر (پایین-راست) */
/*    transform: translate(100%, 100%);*/
/*  }*/
/*}*/

/*@media (prefers-reduced-motion: reduce) {*/
/*  .loading-placeholder::before {*/
/*    animation: none;*/
/*    opacity: 0;*/
/*  }*/
/*}*/

/* .image-post, .post-video    {*/
/*     filter: blur(30px);*/
/*    transition: filter .5s ease-out;*/

/*}*/

/* .image-post.loaded, .post-video.loaded  {*/
/*        filter: blur(0);*/
/*}*/





.short-text {
    display: inline; 
}

.toggle-text {
    color: var(--post-link-color);
    cursor: pointer;
    user-select: none;
}

.text-container {
    white-space: pre-wrap;
}

.text-hidden {
    display: none;
}

.toggle-button {
    color: var(--blue);
    cursor: pointer;
}

.h1-post {
    font-size: 18.3px;
    font-weight: 590;
    line-height: 1.8;
    color: var(--post-h1-color);
    -webkit-text-stroke-width: .4px;
    position: relative;
    top: 16px;
}

.post-one {
    line-height: 2.2;
    padding-bottom: 25px;
    padding-top: 11px;
}

@media screen and (max-width: 480px) {
    .h1-post {
        font-size: 18.3px;
        font-weight: 590;
        line-height: 1.8;
        color: var(--post-h1-color);
        -webkit-text-stroke-width: .4px;
        position: relative;
        top: 22px;
    }

    .post-one {
        line-height: 2.2;
        padding-bottom: 25px;
        padding-top: 11px;
    }
}

main {
    /*margin-bottom: 120px;*/
}

.sp {
    max-width: 550px;
    width: 100%;
    /*border-bottom: 1px solid var(--border);*/
    /*position: relative;*/
    margin-bottom: 11px;
}


#header-post {
    position: fixed;    
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    z-index: 22220;
    background: var(--glass-search);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: transform 0.4s cubic-bezier(.4,0,.2,1), 
                opacity 0.4s cubic-bezier(.4,0,.2,1);
    /*border-bottom: 1px solid var(--border);*/
    width: 100%;
    max-width: 550px;
}

#header-post.hidden {
    transform: translateX(-50%) translateY(-100%);
    opacity: 0;
}

#header-post.visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}
.say-post {
    padding: 14px 14px;
    /*max-width: 550px;*/
    width: 100%;
    display: flex;
    align-items: center;
    color:var(--black);
    
}

.say-post h1 {
    font-size: 1.16rem;
    position: absolute;
    left: 11%;
    /*transform: translateX(-50%);*/
}

.say-post svg {
    fill: none;
    stroke: var(--black);
    stroke-width: 2.8;
    width: 21px;
    position: relative;
    /*top: 2px;*/
}

.toggle-button {
    color: var(--post-link-color);
    cursor: pointer;
    font-weight: bold;
    display: block;
    margin-top: 3px;
    margin-bottom: 26px;
}

.post-all-container {
    max-width: 500px;
    height: auto;
    margin-top: px;
    margin-bottom: 5px;
    position: relative;
    
      /*direction:rtl;*/
}

.post-all-container li {
    list-style-type: none;
}

.post-all-container a {
    text-decoration: none;
}

.post-card-container {
    width: 100%;
    background-color: var(--white);
    padding: 14.5px 9px 14.86px 15px; 
    display: flex;
    gap: .4rem; 
    position: relative;
    overflow: hidden; 
    border-bottom: none;
}

.post-profile-card-user-container {
    width: 56px;
    overflow: hidden;
}

.post-profile-user-container {
    width: 2.82rem;
    height: 2.82rem;
    position: relative;
    /*border-radius: 1000px;*/
    


} 

.pn{

    text-align: right;

}


.profile-image {
    width: 100%;
    height: 100%;
    border-radius: 500000px;
    object-fit: cover;
    
          box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.01),
    0 4px 12px rgba(0,0,0,0.05);
}

#pb{
      width: 100%;
    height: 100%;
    border-radius: 500%;
    object-fit: cover;
    
          box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.01),
    0 4px 12px rgba(0,0,0,0.05);
}



#profile-gold {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    object-fit: cover;
    
    
          box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.01),
    0 4px 12px rgba(0,0,0,0.05);
}




#tick-one {
    fill: var(--blue);
    width: 1.15rem;
    display: non;
}

#gold {
    /*   fill:rgb(244, 183, 0);*/
    /*width: 1.15rem;*/
    /*display: non;*/
    
  fill: rgb(242, 177, 0);
  
  
  fill: rgb(243, 178, 0);
    width: 1.15rem;

  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.129));
    cursor: pointer;
    /*transition: transform 0.2s ease;*/
}
#white{
    fill:#75b1d9;
    width: 1.15rem;
    display: non;
}





.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: 1.05rem;
    font-weight: 620;
    /*-webkit-text-stroke-width: .17px;*/
    text-transform: capitalize;
     direction: rtl; 
}

.post-blue-tick-card-container {
    display: flex;
    align-items: center;
    position: relative;
    top: 3.6px;
    display: non;
}

.space-dot{ 
    font-size:8px;
        color:var(--post-time-color);
        padding:0px 5px;

}


#tick-tow {
    width: 1.1rem;
    margin-left: .2px;
    display: none;
}

.post-header-setion-tow-container {
    display: flex;
    align-items: center;
    /*gap: 3px;*/
    /*margin-right: 4px; */
}
  
#post-header-dote {
    width: 16px;
    transform: rotate(90deg);
    fill: var(--post-time-color);
     
    position: relative;
    top:-1px;
    display: non;
    
}
  
#post-header-dotee {
    width: 16px;
    transform: rotate(90deg);
    fill: var(--post-time-color);
     
    position: relative;
    top:-1px;
    display: non;
    
}

.post-header-time-container p {
    font-size: 0.799rem;
    margin-bottom: .7px;
    font-weight: 470;
    color: var(--post-time-color);
    position: relative;
    /*left:1px;*/
}

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

.pined-say {
    text-align: left;
    color: var(--post-pined-color);
    font-size: 13.5px;
    font-weight: 550;
    position: absolute;
    top: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.pined-say  svg{
     width: 16px;
    fill:var(--post-pined-color);
    
    /*position:relative;*/
    /*top:4px;*/
    stroke-width:1px;

    /*transform: scaleX(-1);*/
}

.post-line-brand-card-container {
    height: 11%;
    display: none;
}

.post-line-brand-container {
    width: 1px;
    height: 100%;
    border-left: 1.5px dashed var(--post-line-dash);
    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: .92rem;
    font-weight: 500;
    color: var(--black);
    word-break: break-word;
    white-space: pre-wrap;
    line-height: 1.7;
    position: relative;
    top: -.2px;
    /*-webkit-text-stroke-width: .1px;*/
    text-align: right;
}

.post-image-card-container {
    width: 100%;
    max-height: 680px;
    margin-top: -17px;
    position: relative;
    border-radius: 20px;
    display: non;
    /*background-color: var(--black);*/
    border: 1px solid var(--border);
    /*background-color: var(--white);*/
    overflow: hidden;
     
    
       background-color: var(--loader) ; /* رنگ پسزمینه تیره */
  /*overflow: hidden;*/
  /*animation: gradient-pulse 2s infinite linear;*/
}



.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;
}

.image-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /*object-fit: contain;*/
    aspect-ratio: 8/7;
    
    /*aspect-ratio: 4/3;*/
}

.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;
}

.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: 700px;*/
    height: 100%;
    
    position: relative;
}

.post-video-card-container {
    max-width: 500px;
      height: 650px;
     /*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: var(--post-video-controls-bg);
    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;
    z-index: 2;
    left: 6px;
}

.post-playPause svg {
    width: 17px;
    fill: var(--white);
}

.post-muteToggle {
    position: absolute;
    z-index: 2;
    left: 39px;
    top: 13.5px;
}

.post-muteToggle svg {
    width: 17.5px;
}

.post-unmuteIcon {
    fill: var(--white);
    stroke: var(--white);
    stroke-width: .6;
}

.post-muteIcon {
    fill: none;
    stroke: var(--white);
    stroke-width: 1.8;
}

.post-progress-container {
    position: absolute;
    top: 0px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--post-progress-bg);
    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;
}

.post-reply-card-container {
    display: none;
    border: 1px solid var(--post-reply-border);
    border-radius: 15px;
    background: rgb(40, 255, 206);
    background: -moz-linear-gradient(90deg, var(--post-reply-gradient-1) 0%, var(--post-reply-gradient-2) 100%);
    background: -webkit-linear-gradient(90deg, var(--post-reply-gradient-1) 0%, var(--post-reply-gradient-2) 100%);
    background: linear-gradient(90deg, var(--post-reply-gradient-1) 0%, var(--post-reply-gradient-2) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#28ffce", endColorstr="#37ff95", GradientType=1);
    margin-top: -14px;
}

.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: var(--post-reply-username);
    position: relative;
    top: -3.5px;
}

.post-reply-icon p {
    position: absolute;
    font-size: .9rem;
    color: var(--post-reply-icon);
    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;
    margin-top: -19px;
    top: 5px;
}

.post-reply-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0px 0px 15px 15px;
}

#c {
    color: rgb(21, 202, 30);
}

.repied-say {
    text-align: left;
    color: var(--post-repied-color);
    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;
}

.post-button-card-container {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2px;
    position: relative;
    left: px;
}

.cardb{
        /*width: 100%;*/
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0px;
    position: relative;
    left: px;
}

.post-button-card-container button {
    border-radius: 50px;
    border: none;
    outline: none;
    max-width: 100px;
    height: 24px;
    background-color: var(--white);
    justify-content: center;
    display: flex;
    align-items: center;
    gap: 0.097rem;
    position: relative;
    z-index: 2;
}

.d {
    width: 80%;
    height: 1px;
    /*background-color: var(--post-divider-color);*/
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
    /*display:none;*/
}

.post-button-card-container p {
    font-size: .84rem;
    font-weight: 510;
    color: var(--post-btn-color);
    position: relative;
    top: .2px;
}


.post-button-card-container svg {
    fill: none;
    stroke: var(--post-btn-color);
    padding: .152rem;
    pointer-events: none;
}


#comment{
        /*border-radius: 50px;*/
    border: none;
    outline: none;
    /*max-width: 100px;*/
    height: 24px;
    /*background-color: var(--white);*/
    justify-content: center;
    display: flex;
    align-items: center;
    gap: 0rem;
    position: relative;
    z-index: 2;

}

#commentn{
  position: relative;
  left:-4px; 
} 


#comment svg{
       display: flex;
    padding: 0px 8px 0px 4px;
   
   fill:var(--post-btn-color);
    position: relative;
    z-index: 2;
      stroke:none;
        width: 1.95rem; 
    stroke-width: .9;
    position: relative;
    /*top: -1.3px;*/
} 

#heart {
    display: flex;
    padding: 0px 8px 0px 4px;
    background-color: var(--white);
    position: relative;
    z-index: 2;
    

}


#heart:hover svg path {
    stroke: var(--red);
       
}



#heart:hover p {

  /*color: var(--red);*/
        /*text-shadow: 0 0 12px var(--post-like-shadow);*/
}


@keyframes scaleAnim{
  0%{ transform: scale(1); }
  50%{ transform: scale(1.32); }
  100%{ transform: scale(1); }
}



#heart svg {
    width: 1.42rem;
    stroke-width: .9;
    position: relative;
    top: px;
    
}

#heart svg path {
    fill: none;
    stroke: var(--post-btn-color);
    stroke-width: 5;
}  
 
#heart svg.liked path {   
    fill: var(--red);
    stroke: var(--red);
    stroke-width: 5;
    
       /*animation: scaleAnim .5s ease;*/
}

#heart svg.liked  {   
    fill: var(--red);
    stroke: var(--red);
    stroke-width: 5;
    
       animation: scaleAnim .5s ease;
    
}


@keyframes scaleAnim{
  0%{ transform: scale(1); }
  50%{ transform: scale(1.32); }
  100%{ transform: scale(1); }
}




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

.like-btn svg.liked {
    fill: var(--red);
    stroke: var(--red);
    stroke-width: 5;
}

#heart p {
    top: 1.8px;
    position: relative;
    left: -.8px;
    z-index: 3;
}
 
#repeat {
    display: flex; 
    padding: 0px 8px 0px 4px;
    background-color: var(--white);
    position: relative; 
    z-index: 2;
    
} 

#repeat svg { 
          
    width: 1.5rem;
    fill: var(--post-btn-color);
     stroke: none;
    stroke-width: .9;
    
    
}

#repeat svg.replied {
    fill: var(--post-replied-color);
    stroke: var(--post-replied-color);
animation: spinre 0.65s linear;
}

@keyframes spinre{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}


#repeat p {
    position: relative;
    left: -1px;
    top: 2.4px;
}


#repeat:hover svg {
    fill: var(--post-replied-color);
    stroke: var(--post-replied-color);
    

  animation: spinee 0.65s linear;
  
}


@keyframes spinee{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}


#repeat:hover p {
    color: var(--post-replied-color);
    text-shadow: 0px 0px 9px var(--post-replied-shadow);
    transition: text-shadow 0.3s ease, color 0.3s ease;
    transition-delay: 0s; /* تأخیر در حالت عادی */
}






#seen {
    padding: 0px 8px 0px 4px;
    display: flex;
    background-color: var(--white);
    position: relative;
    z-index: 2;
}

#seen svg {
    /*fill:none;*/
    fill: var(--post-btn-color);
        stroke: none;
    width: 1.54rem;
    stroke-width: 2;
} 

#seen p { 
    position: relative;
    left: -1.2px;
    top: 4px;
}

 
#seen:hover svg {
    fill: var(--blue);
    stroke:none;
animation: scaleAnimb .5s ease;
}


@keyframes scaleAnimb{
  0%{ transform: scale(1); }
  50%{ transform: scale(1.3); }
  100%{ transform: scale(1); }
}



#seen:hover p {
    color: var(--blue);
    text-shadow: 0px 0px 9px var(--post-seen-shadow);
}



#bookmark {
    padding: 0px 8px 0px 4px;
    display: flex;
    background-color: var(--white);
    position: relative;
    z-index: 2;
}

#bookmark svg {
    width: 1.41rem;
    stroke-width: 970;
    position: relative;
    top: .7px;
    
    left:6px;
}

#bookmark svg.saved {
    fill: var(--blue);
    stroke: var(--blue);
    width: 1.4293rem;
    stroke-width: 970;
    position: relative;
    top: .7px;
    
      animation: scaleAnimbs .5s ease;
}


@keyframes scaleAnimbs{
  0%{ transform: scale(1); }
  50%{ transform: scale(1.31); }
  100%{ transform: scale(1); }
}

#bookmark:hover svg {
    stroke: var(--blue);


      
    
}




#bookmark:hover p {

  


    /*animation: bookGlow .5s ease forwards;*/
}





#bookmark p {
    position: relative;
    top: 2.7px;
    padding-right: px;
}

#send {
    padding: 0px 3px 0px 6px;
} 

#send svg { 
    fill: var(--post-btn-color);
    width: 1.48rem;
    stroke-width: 1.82;
    stroke: none;
}

#send:hover svg {
    fill: var(--blue);
    stroke: none;
    
      animation: scaleAnimsend .5s ease;
}


@keyframes scaleAnimsend{
  0%{ transform: scale(1); }
  50%{ transform: scale(1.3); }
  100%{ transform: scale(1); }
}






.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;
}

.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 var(--post-comment-border);
    border-radius: 50%;
    position: relative;
    top: -3px;
}

.post-comment-card-tow-container p {
    font-size: .9rem;
    font-weight: 690;
    -webkit-text-stroke-width: .08px;
    color: var(--blue);
    position: relative;
    top: -3px;
    font-family:  'v' , sanse-serif  ;
}

.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(--blue);
    stroke-width: 3.1;
    position: relative;
    left: -16.5px;
    top: -.5px;
}

.post-report-card-container {
    width: 100%;
    max-width: 500px;
    height: 60px;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0px;
    display: none;
    z-index: 5;
    background-color: var(--post-report-bg);
    border: 1px solid var(--post-report-border);
    border-bottom: none;
    border-radius: 18px 18px 4px 4px;
    /*box-shadow: 0px 0px 30px var(--post-report-shadow);*/
    padding-top:15px;
    
}

.post-report-card-container {
    display: none;
}

.post-report-card-container.active {
    display: block;
}


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

.formatted-text a {
    color: var(--post-link-color);
    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;
}


.delete-postb {
    position: relative;
    top: .9px; 

}

.delete-postb button {
    background-color: transparent;
    border: none; 
    outline: none;
    position: relative;
    cursor: pointer;
}

.delete-postb svg {
    width: 16px;
    fill: gray;
    stroke:gray;
    stroke-width: .9;
}





#username{
       font-size:15px;
      /*text-align: left;*/
font-weight: 500; 
    position:relative;
    /*left:8px;*/
    color:var(--post-time-color);
    
 
       /*text-align: right;*/
}




 










 
 .name-post{
     display:flex;
         
  align-items: center;
 gap:3px; 
  position:relative;
    top:4px;
    
    left:-13px;
 
 
 }
 
 .blue-post{
    position:relative; 
    top:2px;
    left:-9px;
 }

.username{
      font-size:15px;
      text-align: left;
font-weight: 450; 
    position:relative;
    /*top:2px;*/
left:-11px;

display:flex;

 justify-content: right;


    
    color:var(--post-time-color);
  

top:6px;
} 

 
 
 
 


.commentnum-all{
 
   width: 100%;
    padding-top: 7px;
    padding-bottom: 7px;
    
    padding-right:12px;
    
    display: flex;
    align-items: center;
      justify-content: space-around;
    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);   
    
    /*gap:4px;*/
}

.commentnum{
 
   width: 100%;
    padding-top: 7px;
    padding-bottom: 7px;
    
    padding-right:12px;
    
    display: flex;
    align-items: center;
    justify-content: right;
    position: relative;
    border-top: none;
  
    /*border-radius: 14px;*/ 
    /*background-color: var(--white);   */
    
    gap:4px;
}

.commentnum p{
    font-size:14px; 
    
 color: var(--post-btn-color);
}
.commentnum h3{
     
    font-size: 15px;
    
    color:var(--black);
    
}


.one{
    margin-top:17px;
    display:flex;
    
    justify-content:right;
    
    
  align-items: center;
  
    position: relative;
    
    top:4px;
  
 gap:8px; 
 


}

.one p{
    font-size:14.5px; 
color: var(--post-btn-color);
  
}
.one h3{
    
    font-size: 16px; 
     color:var(--black);
}

.nspace{
    width:100%;
    /*height:1px;*/
    border-top:1px solid var(--border);
    margin-top:12px;
    margin-bottom:12px;
}

.viewn{
       display:flex;
       /*justify-content:right;*/
    
    
  align-items: center;
      gap:5px;
    
}





.tow{
    /*margin-top:12px;*/
    display:flex;
    
    justify-content:right;
    
    
  align-items: center;
  
 gap:17px;
 
 /*padding-bottom:20px;*/
  
}

.tow p{
    font-size:14.5px; 
    
 color: var(--post-btn-color);
}
.tow h3{
     
    font-size: 16px;
     color:var(--black);
    
}

.sh{
      display:flex;
       /*justify-content:right;*/
    
  align-items: center;
      gap:4px;
    
}


/*.repeat-card {*/
  /*max-height: 0;*/
/*  opacity: 0;*/
/*  overflow: hidden;*/
/*  transition: max-height 0.3s ease, opacity 0.2s ease;*/
/*}*/



.repeat-card{
    max-width: 600px;
    width: 98%;
    height: auto;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 5px;
          background-color: var(--white);
    border: 1px solid var(--border);
    padding: 20px;

    padding-bottom: 15px;
    z-index:99900000000000000000000000000000000000000000000000000000000000000000000999;

border-radius: 18px 18px 0px 0px;

    direction: rtl;

display: none;

  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.2s ease;


}


 
.repeat-card.active {
 display:block;
  
}



.repeat-card button{
    display: flex;
    align-items: center;
    justify-content: right;
    gap: 10px;
    margin-bottom: 15px;
    border: none;
    background-color: transparent;
    
    margin-left:100%;
    
    
    
    direction: rtl;
}


.repeat-card a{
    display: flex;
    align-items: center;
    justify-content: right;
    gap: 10px;
    margin-bottom: 15px;
          background-color: var(--white);

}

.repeat-card p {
    font-size: 21px;
    color:var(--post-btn-color);
      /*pointer-events: none;*/

}

#repeat1 svg{
    width: 25px;
    pointer-events: none;

    fill: var(--post-btn-color);
    stroke:none;
     /*stroke:  var(--post-btn-color);*/
    /*stroke : var(--post-btn-color);*/

}
#repeat2 svg{
    width: 24px;
    /*pointer-events: none;*/

    fill:  var(--post-btn-color);
 /*stroke:  var(--post-btn-color);*/

}



.post-report-card-container {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.2s ease;
}

.post-report-card-container.active {
  max-height: 300px; /* بسته به محتوای منو تغییر بده */
  opacity: 1;
}

#quote-card{
    
    /*position:relative;*/
    /*top:2px;*/
  /*padding-top:15px;*/
    margin-bottom: 18px;


}



#repeat1 svg.replied {
    fill: var(--post-replied-color);
    stroke: var(--post-replied-color);
}




#all-post-logo img{
    
    position:relative;
    top:2px;
      width: 51px;
}












.filter-box {
    position: relative;
    left:15px;
    width: 33%;
    /*min-width: 180px;*/
    padding: 0px;
    background: var(--white);
    
}

/* خود Select */
.filter-box select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    width: 100%;
    height: 35px;

    /*padding: 0 22px 0 22px;*/
    
    padding-left:16px;
    /*padding-right:60px;*/
    
    
    /*padding*/

    font-size: 14px;
    font-weight: 550;


    color: var(--black);

    background: var(--white);

    border: 1.5px solid var(--border);
    border-radius: 10006px;

    cursor: pointer;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

/* حذف فلش پیش‌فرض IE */
.filter-box select::-ms-expand {
    display: none;
}

/* حالت Hover */
.filter-box:hover select {
    border-color: var(--blue);
}

/* حالت Focus */
.filter-box select:focus {
    outline: none;
    border-color: var(--blue);

    box-shadow:
        0 0 0 3px rgba(9, 106, 232, 0.1);
        
        
}

/* آیکون فلش */
.select-arrow {
    position: absolute;

    top: 50%;
    right: 10px;

    width: 20px;
    height: 20px;

    transform: translateY(-50%);

    color: var(--post-time-color);

    pointer-events: none;

    transition:
        transform .2s ease,
        color .2s ease;
}

/* وقتی select فوکوس شده */
.filter-box:focus-within .select-arrow {
    color: var(--blue);
    transform: translateY(-50%) rotate(180deg);
}








.delete-card-all{
    /* display: none; */


}
#all-delete-card {
    display: none;               /* پیش‌فرض مخفی */
  
}

#all-delete-card.active {
    display: block;              /* وقتی باز می‌شه */
}

.delete-card-all svg{

    fill: var(--red);
    background-color: rgb(255, 230, 235);
    width: 57PX;
    padding:10px;
    border-radius: 2000px;
    position: fixed;
    top: -37px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0px 0px 10px rgb(179, 179, 179);

}
.delete-card {
    max-width: 500px;
    width: 95%;
    position: fixed;
    bottom: 75px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2222222222222222;
    border: 1px solid var(--border);
    background-color: var(--white);
    border-radius: 25px;
    padding: 10px;
    padding-bottom: 10px;
    padding-top: 20px;
  
    /* سایه اصلی - نرم‌تر */
    box-shadow:
        0 0 0 100vmax rgba(0, 0, 0, 0.45),      /* ← overlay با شفافیت کمتر */
        0 8px 30px rgba(0, 0, 0, 0.15);          /* ← سایه معمولی برای عمق کادر */
}

.delete-card h2{
    font-size: 21px;
    font-weight: bold;
    position: relative;
    top:-5px;
    color:var(--black);
}
.delete-card p{
    position: relative;
    top:-5px;
     color:var(--post-time-color);
}

.delete-yes{
    /* max-width: 500px; */
    width: 45%;
    /* height: 300px; */
    position: fixed;
    bottom: 10px;
    right: 12px;
    /* transform: translateX(-50%); */
    z-index: 2222222222222222;
    border:1px solid var(--red);
    background-color: var(--red);
    color: white;
    border-radius: 25000px ;
    /*padding: 8px;*/

}


.delete-yes button{
      width: 100%;
          height: 100%;
    background-color: var(--red);
    color: white;
    outline: none;
      border-radius: 25000px ;
    border: none;
    padding: 8px;
    
     font-size: 16px;
}


.delete-no{
    /* max-width: 500px; */
    width: 45%;
    /* height: 300px; */
    position: fixed;
    bottom: 10px;
    left: 12px;
 
    /* left: 50%; */
    /* transform: translateX(-50%); */
    z-index: 2222222222222222;
    border:1px solid var(--border);
    background-color:var(--white);
    color: var(--black);
    border-radius: 25000px ;
    padding: 8px;

}

.report-card-all{
    max-width: 500px;
    width: 100%;
    /* height: 300px; */
    position: fixed;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2222222222222222;
    border:1px solid var(--border);
    background-color: var(--white);
    border-radius: 25px 25px 0px 0px;
    padding: 20px;
    padding-bottom: 10px;
    
    
  box-shadow:
        0 0 0 100vmax rgba(0, 0, 0, 0.45),      /* ← overlay با شفافیت کمتر */
        0 8px 30px rgba(0, 0, 0, 0.15);          /* ← سایه معمولی برای عمق کادر */
     display: none; 
}

.report-card-all.active {
    display: block;
}

.report-space{
    width: 11%;
    height: 5px;
    border-radius: 2000px;
    background-color: rgb(201, 201, 201);
    margin-bottom: 20px;
}
.report-card{
    width: 100%;
    display: flex;
    justify-content: right;
    gap: 10px;
    margin-bottom: 20px;
}
.report-card p{
    font-size: 16px;
    color:var(--black);
}
.report-card svg{
    fill: var(--black);
    width: 28px;
}