/* ============================================================
   أيقونة آراء العملاء العائمة — كل حاجة تحت #tcr عشان مايلمسش
   ستايل الموقع ولا الموقع يلمسه. بتتحط في الركن الشمال تحت
   (السلة والتوست في النص/اليمين)، وعلى الموبايل فوق الشريط السفلي.
   ============================================================ */
#tcr, #tcr *, #tcr *::before, #tcr *::after{box-sizing:border-box}
/* ⚠️ عزل عن ستايل الموقع: قواعد عامة في الموقع (header/button/h2/img/p) كانت
   بتتطبق على عناصر الأيقونة — الهيدر بتاعها اتثبّت فوق الشاشة برّه اللوحة.
   بنرجّع كل عنصر لأساس محايد، وكلاساتنا (#tcr .x) أقوى من دي فبتكمّل فوقها. */
#tcr div, #tcr span, #tcr p, #tcr h2, #tcr h3, #tcr b, #tcr small, #tcr i, #tcr label, #tcr img, #tcr video, #tcr form{
  position:static; float:none; margin:0; padding:0; border:0; background:none; box-shadow:none; transform:none;
  width:auto; height:auto; min-width:0; max-width:none; min-height:0; max-height:none; inset:auto; z-index:auto;
  font:inherit; color:inherit; text-align:inherit; letter-spacing:normal; text-transform:none; opacity:1}
#tcr div, #tcr p, #tcr h2, #tcr h3, #tcr form{display:block}
#tcr button{position:relative; margin:0; text-transform:none; letter-spacing:normal; line-height:1.4; width:auto; height:auto;
  min-width:0; box-shadow:none; transform:none; font:inherit}
#tcr img{max-width:100%; display:block}
#tcr h2, #tcr h3{font-weight:900; line-height:1.35}
#tcr{
  --tcr-bg:#140b08; --tcr-panel:#1d120c; --tcr-panel2:#241610; --tcr-cream:#f6ecdd; --tcr-muted:#b9a48d;
  --tcr-dim:#7a6a5d; --tcr-gold:#e8a94e; --tcr-gold2:#f5cf8f; --tcr-red:#d92632; --tcr-ok:#3fbf6a;
  --tcr-line:rgba(232,169,78,.18); --tcr-line2:rgba(232,169,78,.35); --tcr-ease:cubic-bezier(.2,.8,.2,1);
  font-family:"Cairo","Segoe UI",Tahoma,sans-serif; direction:rtl; color:var(--tcr-cream); line-height:1.6;
}
#tcr button, #tcr input, #tcr textarea{font:inherit; color:inherit}
#tcr button{cursor:pointer}

/* ---------- الزرار العائم ---------- */
#tcr .tcr-fab{position:fixed; z-index:165; bottom:22px; inset-inline-end:auto; left:22px;
  display:flex; align-items:center; gap:0; height:56px; padding:0 6px 0 6px; border-radius:99px; border:1px solid var(--tcr-line2);
  background:linear-gradient(135deg,#2b1a12,#170e0a); box-shadow:0 14px 34px rgba(0,0,0,.45), 0 0 0 0 rgba(232,169,78,.0);
  transition:transform .25s var(--tcr-ease), box-shadow .3s var(--tcr-ease), padding .3s var(--tcr-ease);
  animation:tcr-in .6s var(--tcr-ease) .6s both}
#tcr.right .tcr-fab{left:auto; right:22px}
#tcr .tcr-fab .ic{width:44px; height:44px; flex:none; display:grid; place-items:center; border-radius:50%;
  background:linear-gradient(135deg,var(--tcr-gold2),var(--tcr-gold)); color:#2a1608; font-size:22px;
  box-shadow:0 6px 16px rgba(232,169,78,.35)}
#tcr .tcr-fab .lbl{max-width:0; overflow:hidden; white-space:nowrap; font-weight:900; font-size:14px; color:var(--tcr-gold2);
  transition:max-width .35s var(--tcr-ease), padding .35s var(--tcr-ease)}
#tcr .tcr-fab .avg{position:absolute; top:-8px; left:-6px; min-width:30px; padding:1px 7px; border-radius:99px; font-size:11.5px;
  font-weight:900; background:var(--tcr-red); color:#fff; border:2px solid #140b08}
#tcr.right .tcr-fab .avg{left:auto; right:-6px}
#tcr .tcr-fab:hover, #tcr .tcr-fab:focus-visible{transform:translateY(-2px); box-shadow:0 18px 40px rgba(0,0,0,.5), 0 0 0 6px rgba(232,169,78,.12)}
#tcr .tcr-fab:hover .lbl, #tcr .tcr-fab:focus-visible .lbl{max-width:160px; padding:0 10px 0 6px}
#tcr .tcr-fab:focus-visible{outline:2px solid var(--tcr-gold); outline-offset:3px}
@keyframes tcr-in{from{opacity:0; transform:translateY(24px) scale(.9)}to{opacity:1; transform:none}}
@media (max-width:860px){
  /* فوق شريط التنقل السفلي بتاع الموقع */
  #tcr .tcr-fab{bottom:calc(80px + env(safe-area-inset-bottom,0px)); left:14px; height:50px}
  #tcr.right .tcr-fab{right:14px}
  #tcr .tcr-fab .ic{width:40px; height:40px; font-size:20px}
}

/* ---------- اللوحة ---------- */
#tcr .tcr-back{position:fixed; inset:0; z-index:400; background:rgba(0,0,0,.55); backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px); opacity:0; transition:opacity .25s ease}
#tcr .tcr-panel{position:fixed; z-index:401; top:0; bottom:0; left:0; width:min(480px,100vw); display:flex; flex-direction:column;
  background:linear-gradient(180deg,var(--tcr-panel2),var(--tcr-bg)); border-inline-start:1px solid var(--tcr-line2);
  transform:translateX(-104%); transition:transform .38s var(--tcr-ease); box-shadow:30px 0 60px rgba(0,0,0,.5)}
#tcr.right .tcr-panel{left:auto; right:0; transform:translateX(104%)}
#tcr.open .tcr-back{opacity:1}
#tcr.open .tcr-panel{transform:none}
@media (max-width:640px){
  /* موبايل: شيت من تحت بدل درج جانبي */
  #tcr .tcr-panel, #tcr.right .tcr-panel{top:auto; left:0; right:0; width:100%; height:min(88vh,88dvh); border-radius:24px 24px 0 0;
    border-inline-start:0; border-top:1px solid var(--tcr-line2); transform:translateY(104%)}
  #tcr.open .tcr-panel{transform:none}
}
#tcr .tcr-head{padding:18px 18px 12px; border-bottom:1px solid var(--tcr-line)}
#tcr .tcr-top{display:flex; align-items:center; justify-content:space-between; gap:10px}
#tcr .tcr-top h2{margin:0; font-size:19px; font-weight:900; color:var(--tcr-cream)}
#tcr .tcr-x{width:40px; height:40px; border-radius:12px; border:1px solid var(--tcr-line2); background:transparent; font-size:18px}
#tcr .tcr-sum{display:flex; align-items:center; gap:16px; margin-top:12px}
#tcr .tcr-big{text-align:center; min-width:86px}
#tcr .tcr-big b{display:block; font-size:36px; font-weight:900; line-height:1; color:var(--tcr-gold2); font-variant-numeric:tabular-nums}
#tcr .tcr-big small{color:var(--tcr-muted); font-size:12px}
#tcr .tcr-dist{flex:1; display:flex; flex-direction:column; gap:3px}
#tcr .tcr-dist div{display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--tcr-muted)}
#tcr .tcr-dist i{flex:1; height:6px; border-radius:99px; background:rgba(255,255,255,.07); overflow:hidden; position:relative}
#tcr .tcr-dist i span{position:absolute; inset-block:0; right:0; border-radius:99px; background:linear-gradient(90deg,var(--tcr-gold),var(--tcr-gold2))}
#tcr .tcr-tabs{display:flex; gap:6px; margin-top:14px}
#tcr .tcr-tabs button{flex:1; min-height:42px; border-radius:12px; border:1px solid var(--tcr-line); background:rgba(255,255,255,.03);
  font-weight:800; font-size:14px; color:var(--tcr-muted)}
#tcr .tcr-tabs button[aria-selected="true"]{border-color:var(--tcr-gold); color:var(--tcr-gold2); background:rgba(232,169,78,.12)}
#tcr .tcr-body{flex:1; overflow-y:auto; padding:14px 18px calc(18px + env(safe-area-inset-bottom,0px)); overscroll-behavior:contain}

#tcr .tcr-stars{color:var(--tcr-gold); letter-spacing:1px; font-size:15px; white-space:nowrap}
#tcr .tcr-stars .off{color:rgba(255,255,255,.15)}
#tcr .tcr-card{padding:14px; margin-bottom:12px; border-radius:16px; border:1px solid var(--tcr-line); background:rgba(0,0,0,.22);
  animation:tcr-card .4s var(--tcr-ease) both}
@keyframes tcr-card{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
#tcr .tcr-card-h{display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap}
#tcr .tcr-who{display:flex; align-items:center; gap:9px; min-width:0}
#tcr .tcr-av{width:36px; height:36px; flex:none; border-radius:50%; display:grid; place-items:center; font-weight:900;
  background:linear-gradient(135deg,#3a2418,#24150e); color:var(--tcr-gold2); border:1px solid var(--tcr-line2)}
#tcr .tcr-who b{display:block; font-size:14.5px}
#tcr .tcr-who small{display:block; font-size:11.5px; color:var(--tcr-dim)}
#tcr .tcr-ver{display:inline-block; padding:1px 8px; border-radius:99px; font-size:10.5px; font-weight:800;
  background:rgba(63,191,106,.16); color:#8ff0b1; margin-inline-start:4px}
#tcr .tcr-text{margin:10px 0 0; font-size:14.5px; white-space:pre-line; overflow-wrap:anywhere}
#tcr .tcr-media{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:10px}
#tcr .tcr-media button{padding:0; border:0; border-radius:12px; overflow:hidden; aspect-ratio:1; background:#000}
#tcr .tcr-media img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s var(--tcr-ease)}
#tcr .tcr-media button:hover img{transform:scale(1.05)}
#tcr .tcr-media video{grid-column:1/-1; width:100%; max-height:320px; border-radius:12px; background:#000}
#tcr .tcr-more{width:100%; min-height:44px; border-radius:12px; border:1px solid var(--tcr-line2); background:transparent; font-weight:800; color:var(--tcr-gold2)}
#tcr .tcr-empty{text-align:center; padding:30px 10px; color:var(--tcr-muted)}
#tcr .tcr-sk{height:110px; margin-bottom:12px; border-radius:16px; background:linear-gradient(90deg,rgba(255,255,255,.03),rgba(255,255,255,.08),rgba(255,255,255,.03));
  background-size:200% 100%; animation:tcr-sh 1.3s linear infinite}
@keyframes tcr-sh{to{background-position:-200% 0}}

/* ---------- الفورم ---------- */
#tcr .tcr-f{display:block; margin-bottom:14px}
#tcr .tcr-f > span{display:block; margin-bottom:6px; font-size:13.5px; font-weight:800; color:var(--tcr-muted)}
#tcr .tcr-f input[type=text], #tcr .tcr-f input[type=tel], #tcr .tcr-f textarea{width:100%; min-height:48px; padding:11px 13px;
  border-radius:13px; border:1px solid var(--tcr-line); background:rgba(0,0,0,.3); font-size:16px; resize:vertical}
#tcr .tcr-f textarea{min-height:110px}
#tcr .tcr-f input:focus, #tcr .tcr-f textarea:focus{outline:none; border-color:var(--tcr-gold); box-shadow:0 0 0 3px rgba(232,169,78,.15)}
#tcr .tcr-f small{display:block; color:var(--tcr-dim); font-size:11.5px; margin-top:4px}
#tcr .tcr-rate{display:flex; flex-direction:row-reverse; justify-content:flex-end; gap:4px}
#tcr .tcr-rate input{position:absolute; opacity:0; width:1px; height:1px}
#tcr .tcr-rate label{font-size:34px; line-height:1; color:rgba(255,255,255,.15); cursor:pointer; transition:transform .15s, color .15s; padding:2px}
#tcr .tcr-rate input:checked ~ label, #tcr .tcr-rate label:hover, #tcr .tcr-rate label:hover ~ label{color:var(--tcr-gold)}
#tcr .tcr-rate input:focus-visible + label{outline:2px solid var(--tcr-gold); border-radius:6px}
#tcr .tcr-rate label:active{transform:scale(.88)}
#tcr .tcr-files{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
#tcr .tcr-pick{display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:8px 14px; border-radius:12px;
  border:1px dashed var(--tcr-line2); background:rgba(255,255,255,.02); font-weight:800; font-size:13.5px; color:var(--tcr-gold2)}
#tcr .tcr-thumb{position:relative; width:64px; height:64px; border-radius:12px; overflow:hidden; border:1px solid var(--tcr-line)}
#tcr .tcr-thumb img, #tcr .tcr-thumb video{width:100%; height:100%; object-fit:cover}
#tcr .tcr-thumb button{position:absolute; top:2px; left:2px; width:22px; height:22px; border-radius:50%; border:0; background:rgba(0,0,0,.7); font-size:12px}
#tcr .tcr-check{display:flex; gap:10px; align-items:flex-start; margin:4px 0 16px; font-size:13.5px; cursor:pointer}
#tcr .tcr-check input{width:20px; height:20px; flex:none; margin-top:2px; accent-color:var(--tcr-gold)}
#tcr .tcr-hp{position:absolute !important; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); opacity:0}
#tcr .tcr-btn{width:100%; min-height:52px; border-radius:14px; border:0; font-weight:900; font-size:16px;
  background:linear-gradient(135deg,var(--tcr-gold2),var(--tcr-gold)); color:#2a1608; box-shadow:0 10px 26px rgba(232,169,78,.22)}
#tcr .tcr-btn:disabled{opacity:.6; cursor:wait}
#tcr .tcr-err{margin:0 0 12px; padding:10px 13px; border-radius:12px; background:rgba(217,38,50,.14); border:1px solid rgba(217,38,50,.4);
  color:#ffd0d3; font-size:13.5px; font-weight:700}
#tcr .tcr-ok{text-align:center; padding:26px 8px}
#tcr .tcr-ok .ic{width:70px; height:70px; margin:0 auto 10px; display:grid; place-items:center; border-radius:50%; font-size:34px;
  background:linear-gradient(135deg,#7ff0a8,var(--tcr-ok)); color:#06290f; animation:tcr-pop .5s var(--tcr-ease)}
@keyframes tcr-pop{0%{transform:scale(.4); opacity:0}70%{transform:scale(1.08)}100%{transform:none; opacity:1}}

/* عرض الصورة كبيرة */
#tcr .tcr-lb{position:fixed; inset:0; z-index:420; display:grid; place-items:center; background:rgba(0,0,0,.88); padding:20px}
#tcr .tcr-lb img{max-width:100%; max-height:90vh; border-radius:12px}
#tcr .tcr-lb button{position:absolute; top:16px; left:16px; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.3); background:rgba(0,0,0,.4); font-size:18px; color:#fff}

@media (prefers-reduced-motion:reduce){
  #tcr *, #tcr *::before, #tcr *::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
}