/* لوحة الدورة البصرية — نفس التصميم في الواجهة والكتالوج والتفاصيل */

.cv {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 16%, rgba(255,255,255,.72), transparent 46%),
    linear-gradient(165deg, #eaf4fd 0%, #d2e6f8 46%, #a9cef0 100%);
}

.cv-glow {
  position: absolute;
  width: 70%;
  height: 70%;
  top: -18%;
  right: -12%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.38);
  pointer-events: none;
}

.cv-tile {
  position: absolute;
  display: grid;
  place-items: center;
  border-radius: 1.05rem;
}

.cv-tile svg {
  width: 42%;
  height: 42%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cv-main {
  z-index: 3;
  width: 6.15rem;
  height: 6.25rem;
  top: 26%;
  left: 14%;
  color: var(--nx-navy, #163A7A);
  background: linear-gradient(165deg, rgba(255,255,255,.96), rgba(214, 232, 248, .62));
  border: 1.5px solid rgba(255,255,255,.9);
  transform: rotate(-8deg);
  box-shadow:
    0 14px 22px -14px rgb(22 58 122 / .38),
    inset 0 1px 0 rgba(255,255,255,.85);
}

.cv-a {
  z-index: 2;
  width: 3.85rem;
  height: 3.95rem;
  top: 6%;
  right: 8%;
  color: #fff;
  background: linear-gradient(165deg, #6aa8ea, #1e5fbc);
  border: 1.4px solid rgba(255,255,255,.35);
  transform: rotate(13deg);
  box-shadow: 0 12px 18px -12px rgb(22 58 122 / .42);
}

.cv-b {
  z-index: 4;
  width: 3.7rem;
  height: 3.8rem;
  top: 58%;
  left: 8%;
  color: #fff;
  background: linear-gradient(165deg, #5aa0ea, #1d58a8);
  border: 1.4px solid rgba(255,255,255,.35);
  transform: rotate(-7deg);
  box-shadow: 0 12px 18px -12px rgb(22 58 122 / .42);
}

.cv-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.has-cover.cv {
  background: #d7e6f4;
}

.has-cover .cv-glow,
.has-cover .cv-tile {
  display: none;
}

.cv--reports {
  background:
    radial-gradient(circle at 22% 18%, rgba(255,255,255,.7), transparent 42%),
    linear-gradient(165deg, #eaf8f0 0%, #cfe9db 48%, #8fceb0 100%);
}
.cv--reports .cv-main { transform: rotate(8deg); top: 10%; left: 18%; }
.cv--reports .cv-a {
  top: 54%;
  right: 8%;
  left: auto;
  color: #2f8f68;
  background: linear-gradient(165deg, rgba(255,255,255,.94), rgba(220, 246, 232, .8));
  transform: rotate(-14deg);
}
.cv--reports .cv-b {
  top: 16%;
  left: 4%;
  background: linear-gradient(165deg, #4caf82, #2f8f68);
}

.cv--content {
  background:
    radial-gradient(circle at 78% 12%, rgba(255,255,255,.62), transparent 44%),
    linear-gradient(165deg, #f0ecfb 0%, #ddd3f4 50%, #b7a6e4 100%);
}
.cv--content .cv-main { top: 22%; left: 20%; transform: rotate(-10deg); }
.cv--content .cv-a { background: linear-gradient(165deg, #8b7ad4, #6a5bb5); }
.cv--content .cv-b { background: linear-gradient(165deg, #7a68c6, #564694); top: 60%; left: 6%; }

.cv--users {
  background:
    radial-gradient(circle at 18% 80%, rgba(255,255,255,.55), transparent 46%),
    linear-gradient(165deg, #eaf0f8 0%, #cddced 50%, #8eacd4 100%);
}
.cv--users .cv-main { transform: rotate(7deg); top: 18%; left: 16%; }
.cv--users .cv-a { background: linear-gradient(165deg, #5b8ed0, #3d6cb0); }
.cv--users .cv-b { background: linear-gradient(165deg, #3d6cb0, #163A7A); }

.cv--ai {
  background:
    radial-gradient(circle at 80% 20%, rgba(255,255,255,.58), transparent 42%),
    linear-gradient(165deg, #f8eedf 0%, #f1dfc8 50%, #e2b982 100%);
}
.cv--ai .cv-main { transform: rotate(-7deg); color: #8a5a20; }
.cv--ai .cv-a { background: linear-gradient(165deg, #e2b33a, #c4843a); }
.cv--ai .cv-b { background: linear-gradient(165deg, #c4843a, #8a5a20); }

.cv--self {
  background:
    radial-gradient(circle at 16% 20%, rgba(255,255,255,.7), transparent 44%),
    linear-gradient(165deg, #f1ecfb 0%, #e0d5f4 50%, #bba6e4 100%);
}
.cv--self .cv-main { transform: rotate(9deg); }
.cv--self .cv-a { background: linear-gradient(165deg, #9b86d6, #7a63c2); }
.cv--self .cv-b { background: linear-gradient(165deg, #7a63c2, #5a4498); }

.cv--basics {
  background:
    radial-gradient(circle at 84% 78%, rgba(255,255,255,.5), transparent 46%),
    linear-gradient(165deg, #e8f4fc 0%, #cbe6f6 50%, #7ebce8 100%);
}
.cv--basics .cv-main { transform: rotate(-6deg); }
.cv--basics .cv-a { background: linear-gradient(165deg, #5b9ee0, #2f6ec0); }
.cv--basics .cv-b { background: linear-gradient(165deg, #2f6ec0, #163A7A); }

.cv--perf {
  background:
    radial-gradient(circle at 20% 16%, rgba(255,255,255,.7), transparent 42%),
    linear-gradient(165deg, #eef4fc 0%, #d5e4f6 46%, #9bbce6 100%);
}
.cv--perf .cv-main { transform: rotate(6deg); top: 16%; left: 16%; }
.cv--perf .cv-a { background: linear-gradient(165deg, #f0cc6a, #e2b33a); color: #163A7A; }
.cv--perf .cv-b { background: linear-gradient(165deg, #2f6ec0, #163A7A); }

.nx-mcard-art .cv {
  position: absolute;
  inset: 0;
}

.cg-media .cv {
  position: absolute;
  inset: 0;
}

.cg-media .cv-main {
  width: 4.7rem;
  height: 4.7rem;
  top: 18%;
  left: 18%;
}

.cg-media .cv-a {
  width: 2.55rem;
  height: 2.55rem;
  top: 10%;
  right: 10%;
}

.cg-media .cv-b {
  width: 2.4rem;
  height: 2.4rem;
  top: 54%;
  left: 10%;
}

.cd-art .cv {
  position: absolute;
  inset: 0;
}

.cd-art .cv-main {
  width: 8.2rem;
  height: 8.3rem;
  top: 24%;
  left: 20%;
}

.cd-art .cv-a {
  width: 3.7rem;
  height: 3.7rem;
  top: 8%;
  right: 12%;
}

.cd-art .cv-b {
  width: 3.55rem;
  height: 3.55rem;
  top: 62%;
  left: 10%;
}

@media (max-width: 760px) {
  .cg-media .cv-main {
    width: 3.35rem;
    height: 3.35rem;
  }

  .cg-media .cv-a,
  .cg-media .cv-b {
    width: 1.9rem;
    height: 1.9rem;
  }

  .cd-art .cv-main {
    width: 4.6rem;
    height: 4.6rem;
    top: 22%;
    left: 16%;
  }

  .cd-art .cv-a,
  .cd-art .cv-b {
    width: 2.2rem;
    height: 2.2rem;
  }
}