/* ==========================================================================
   ORCIID — بورتال الخدمات
   بيرث كل الألوان والخطوط من tokens.css — مفيش @font-face ولا ألوان مكررة هنا.
   ========================================================================== */

.tsv{ max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter); }

.tsv h2{
  margin:0 0 .6rem; font-size:var(--t-h2); font-weight:700;
  display:flex; align-items:center; gap:.65rem;
}
.tsv h2::before{
  content:""; width:5px; height:1em; border-radius:4px;
  background:linear-gradient(180deg,var(--cobalt),var(--iris));
}
.tsv__sub{ color:var(--text-2); margin-bottom:1.75rem; max-width:60ch; font-weight:300; }

/* ---------- بحث ---------- */
.tsv-sr{ position:relative; max-width:540px; margin-bottom:1.5rem; }
.tsv-sr input{
  width:100%; padding:.85rem 2.9rem .85rem 1rem;
  border:1.5px solid var(--line); border-radius:var(--r-sm);
  background:var(--surface); color:var(--text); font-family:inherit; font-size:.95rem; outline:none;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.tsv-sr input::placeholder{ color:var(--text-3); }
.tsv-sr input:focus{ border-color:var(--cobalt); box-shadow:0 0 0 3px rgba(91,83,255,.25); }
.tsv-sr .i{
  position:absolute; inset-inline-end:1rem; top:50%; transform:translateY(-50%);
  color:var(--text-3); font-size:1.15rem; display:flex; pointer-events:none;
}

/* ---------- التخطيط ---------- */
.tsv-b{ display:grid; grid-template-columns:280px 1fr; gap:1.25rem; align-items:start; }

/* ---------- التصنيفات ---------- */
.tsv-cats{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  overflow:hidden; position:sticky; top:5.5rem; max-height:calc(100vh - 7rem); overflow-y:auto;
}
.tsv-c{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.9rem 1.05rem; cursor:pointer; font-size:.95rem; font-weight:700;
  color:var(--text-2); border-bottom:1px solid var(--line); transition:background .2s,color .2s;
}
.tsv-cats > .tsv-c:last-child{ border-bottom:none; }
.tsv-c:hover{ background:var(--surface-2); color:var(--text); }
.tsv-c.on{ background:var(--surface-2); color:var(--text); }
.tsv-c .n{ display:flex; align-items:center; gap:.6rem; }
.tsv-c .n i{ font-size:1.2rem; color:var(--text-3); transition:color .2s; }
.tsv-c.on .n i{ color:var(--cobalt-light); }
.tsv-c .cn{
  font-size:.72rem; font-weight:700; color:var(--text-2);
  background:rgba(255,255,255,.08); border-radius:var(--r-pill); padding:.1rem .55rem;
  direction:ltr; unicode-bidi:isolate;
}

/* ---------- كروت الخدمات ---------- */
.tsv-m{ min-height:220px; }
.tsv-m > h3{ margin:0 0 .3rem; font-size:var(--t-h3); font-weight:700; }
.tsv-m > .ds{ margin:0 0 1rem; font-size:.9rem; color:var(--text-2); font-weight:300; }
.tsv-g{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }

.tsv-it{
  --c:var(--cobalt);
  background:var(--surface); border:1.5px solid var(--line); border-radius:var(--r-sm);
  padding:.85rem .95rem; cursor:pointer; position:relative;
  display:flex; align-items:flex-start; gap:.65rem;
  transition:border-color .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease);
}
/* تدوير ألوان الباليتة على الكروت */
.tsv-it:nth-child(4n+2){ --c:var(--iris); }
.tsv-it:nth-child(4n+3){ --c:var(--electric); }
.tsv-it:nth-child(4n+4){ --c:var(--coral); }

.tsv-it:hover{
  background:var(--surface-2); border-color:var(--c);
  box-shadow:0 6px 20px -4px color-mix(in srgb,var(--c) 45%,transparent);
}
.tsv-it:hover h4,.tsv-it.sel h4{ color:var(--c); }
.tsv-it.sel{ border-color:var(--c); background:color-mix(in srgb,var(--c) 14%,transparent); }

.tsv-bx{
  width:22px; height:22px; flex-shrink:0; margin-top:1px; position:relative;
  border:2px solid var(--line); border-radius:6px; transition:.2s;
}
.tsv-bx::after{
  content:""; position:absolute; inset-block-start:3px; inset-inline-start:6px;
  width:5px; height:10px; border:solid #fff; border-width:0 2.5px 2.5px 0;
  transform:rotate(45deg) scale(.4); opacity:0; transition:.18s;
}
.tsv-it:hover .tsv-bx{ border-color:var(--c); }
.tsv-it.sel .tsv-bx{ background:var(--c); border-color:var(--c); }
.tsv-it.sel .tsv-bx::after{ opacity:1; transform:rotate(45deg) scale(1); }

.tsv-tx{ flex:1; min-width:0; }
.tsv-tx h4{ margin:0; font-size:.92rem; font-weight:700; line-height:1.45; color:var(--text); transition:color .2s; }
.tsv-tx .tg{ display:block; margin-top:.1rem; font-size:.72rem; font-weight:500; color:var(--text-3); }

.tsv-inf{
  width:24px; height:24px; flex-shrink:0; cursor:pointer;
  border:1.5px solid var(--line); border-radius:50%; background:var(--surface-2);
  color:var(--text-2); font:italic 700 .85rem/1 Georgia,serif;
  display:flex; align-items:center; justify-content:center; transition:.2s;
}
.tsv-inf:hover,.tsv-it.pop .tsv-inf{ background:var(--c); border-color:var(--c); color:#000; }

.tsv-pop{
  position:absolute; inset-block-end:calc(100% + 8px); inset-inline:.6rem; z-index:30; display:none;
  background:var(--grey-20); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:.7rem .8rem; font-size:.8rem; font-weight:300; line-height:1.7; color:var(--text);
  box-shadow:0 10px 26px rgba(0,0,0,.6);
}
.tsv-it.pop .tsv-pop{ display:block; }
.tsv-em{ grid-column:1/-1; padding:2.5rem; text-align:center; color:var(--text-3); font-weight:700; }

/* ---------- السلة والفورم ---------- */
.tsv-cart{
  margin-top:3rem; background:var(--surface); border:1.5px solid var(--line);
  border-radius:var(--r-md); overflow:hidden; transition:border-color .3s,box-shadow .3s;
}
.tsv-cart.act{ border-color:rgba(91,83,255,.6); box-shadow:0 10px 30px rgba(91,83,255,.22); }
.tsv-ch{
  background:linear-gradient(135deg,var(--cobalt),var(--iris)); color:#fff;
  padding:.75rem 1.15rem; display:flex; align-items:center; gap:.5rem;
}
.tsv-ch h3{ margin:0; font-size:.95rem; font-weight:700; display:flex; align-items:center; gap:.45rem; }
.tsv-cb{ padding:1.15rem 1.25rem 1.4rem; }

.tsv-chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.15rem; min-height:34px; }
.tsv-chip{
  display:inline-flex; align-items:center; gap:.45rem;
  background:rgba(91,83,255,.14); border:1.5px solid rgba(91,83,255,.55);
  color:var(--text); font-size:.78rem; font-weight:700;
  padding:.4rem .75rem; border-radius:var(--r-pill);
}
.tsv-chip b{ color:var(--coral-light); cursor:pointer; font-size:.95rem; line-height:1; }
.tsv-none{ color:var(--text-3); font-size:.85rem; font-weight:700; padding:.35rem 0; }

.tsv-f{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
.tsv-fl{ display:flex; flex-direction:column; gap:.35rem; }
.tsv-fl.full{ grid-column:1/-1; }
.tsv-fl label{ font-size:.78rem; font-weight:700; }
.tsv-fl label b{ color:var(--coral); font-weight:400; }
.tsv-fl input,.tsv-fl textarea{
  width:100%; padding:.7rem .85rem; border:1.5px solid var(--line); border-radius:var(--r-sm);
  background:var(--bg); color:var(--text); font-family:inherit; font-size:.88rem; outline:none; transition:.2s;
}
.tsv-fl input::placeholder,.tsv-fl textarea::placeholder{ color:var(--text-3); }
.tsv-fl input:focus,.tsv-fl textarea:focus{ border-color:var(--cobalt); box-shadow:0 0 0 3px rgba(91,83,255,.25); }
.tsv-fl input.err,.tsv-fl textarea.err{ border-color:var(--coral); background:rgba(252,133,109,.08); }
.tsv-fl textarea{ resize:vertical; min-height:78px; line-height:1.7; }

.tsv-ph{ display:flex; border:1.5px solid var(--line); border-radius:var(--r-sm); overflow:hidden; background:var(--bg); transition:.2s; }
.tsv-ph:focus-within{ border-color:var(--cobalt); box-shadow:0 0 0 3px rgba(91,83,255,.25); }
.tsv-ph.err{ border-color:var(--coral); }
.tsv-ph .cc{
  border:none; border-inline-end:1.5px solid var(--line); background:var(--surface-2);
  color:var(--text); font-family:inherit; font-size:.82rem; font-weight:700;
  padding:0 .6rem; cursor:pointer; outline:none; direction:ltr; text-align:center;
  -webkit-appearance:none; appearance:none;
}
.tsv-ph .cc option{ background:var(--surface-2); color:var(--text); }
.tsv-ph input{ border:none!important; box-shadow:none!important; border-radius:0; }

.tsv-hint{
  grid-column:1/-1; display:flex; align-items:flex-start; gap:.5rem;
  font-size:.82rem; font-weight:700; line-height:1.7; padding:.75rem .9rem;
  border-radius:var(--r-sm); background:var(--surface-2); color:var(--text-2); border:1.5px solid var(--line);
}
.tsv-hint b{ font-size:1rem; flex-shrink:0; line-height:1.3; }
.tsv-hint.need{ background:rgba(137,82,253,.12); color:var(--iris-light); border-color:rgba(137,82,253,.45); }
.tsv-hint.ok{ background:rgba(71,235,235,.12); color:var(--electric); border-color:rgba(71,235,235,.4); }

.tsv-msg{ grid-column:1/-1; font-size:.82rem; font-weight:700; padding:.7rem .9rem; border-radius:var(--r-sm); display:none; }
.tsv-msg.ok{ display:block; background:rgba(71,235,235,.12); color:var(--electric); border:1.5px solid rgba(71,235,235,.4); }
.tsv-msg.bad{ display:block; background:rgba(252,133,109,.12); color:var(--coral-light); border:1.5px solid rgba(252,133,109,.4); }

.tsv-sub{
  grid-column:1/-1; margin-top:.25rem; width:100%; border:none; border-radius:var(--r-sm);
  padding:.9rem; font-family:inherit; font-size:1rem; font-weight:700; color:#fff; cursor:pointer;
  background:linear-gradient(135deg,var(--cobalt),var(--iris));
  box-shadow:0 5px 16px rgba(91,83,255,.34);
  display:flex; align-items:center; justify-content:center; gap:.5rem; transition:.22s var(--ease);
}
.tsv-sub:hover:not(:disabled){ transform:translateY(-2px); box-shadow:0 9px 24px rgba(91,83,255,.45); }
.tsv-sub:disabled{ opacity:.55; cursor:not-allowed; }

.tsv-done{ display:none; text-align:center; padding:2.75rem 1.5rem; }
.tsv-done.on{ display:block; }
.tsv-done .ok{
  width:72px; height:72px; margin:0 auto 1.1rem; border-radius:50%; font-size:2rem; color:#fff;
  background:linear-gradient(135deg,var(--cobalt),var(--electric));
  display:flex; align-items:center; justify-content:center;
}
.tsv-done h3{ margin:0 0 .5rem; font-size:1.3rem; font-weight:700; }
.tsv-done p{ margin:0; font-size:.9rem; color:var(--text-2); font-weight:300; line-height:1.8; }
.tsv-ref{
  display:none; margin-top:1.1rem; padding:.6rem 1.25rem; font-size:.85rem; font-weight:700;
  background:rgba(91,83,255,.14); border:1.5px solid rgba(91,83,255,.5); border-radius:var(--r-pill);
}
.tsv-ref.on{ display:inline-block; }

@media(max-width:860px){
  .tsv-b{ grid-template-columns:1fr; }
  .tsv-g,.tsv-f{ grid-template-columns:1fr; }
  .tsv-cats{ position:static; max-height:none; overflow:visible; }
}