/*
  Ainitia software box v4.
  Based on the provided software_box_mockup_v4.html approach: a real six-face
  CSS 3D box centered in a perspective scene. Public and admin use this same
  component and geometry.
*/
.software-box-wrap {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 300px;
  padding: 12px 0;
  overflow: visible;
}

.software-box-scene,
.software-box-scene * {
  box-sizing: border-box;
}

.software-box-scene {
  --box-front-w: 185px;
  --box-front-h: 265px;
  --box-depth: 55px;
  --box-rotation-x: -8deg;
  --box-rotation-y: -32deg;
  --box-global-scale: 1;
  --box-global-pos-x: 0px;
  --box-global-pos-y: 0px;
  --box-scene-w: calc(var(--box-front-w) + var(--box-depth) + 70px);
  --box-scene-h: calc(var(--box-front-h) + var(--box-depth) + 78px);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--box-scene-w);
  height: var(--box-scene-h);
  perspective: 900px;
  overflow: visible;
  isolation: isolate;
  filter:
    drop-shadow(0 30px 52px rgba(0, 0, 0, .45))
    drop-shadow(0 0 34px color-mix(in srgb, var(--box-accent, #2ea0f2) 22%, transparent));
}

.software-box-scene--hero {
  --box-front-w: 220px;
  --box-front-h: 315px;
  --box-depth: 64px;
}

.software-box-scene--detail {
  --box-front-w: min(280px, 58vw);
  --box-front-h: min(400px, 84vw);
  --box-depth: min(82px, 17vw);
  --box-scene-w: min(430px, 96vw);
  --box-scene-h: min(520px, 112vw);
}

.software-box-scene--admin-preview {
  --box-front-w: 250px;
  --box-front-h: 360px;
  --box-depth: 74px;
  --box-scene-w: 430px;
  --box-scene-h: 520px;
}

.software-box-v4 {
  perspective: 900px;
}

.software-box-3d {
  position: relative;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: translate(var(--box-global-pos-x), var(--box-global-pos-y)) scale(var(--box-global-scale)) rotateX(var(--box-rotation-x)) rotateY(var(--box-rotation-y));
  transition: transform .12s linear;
}

.featured-card:hover .software-box-3d,
.product-hero:hover .software-box-3d {
  transform: translate(var(--box-global-pos-x), var(--box-global-pos-y)) scale(var(--box-global-scale)) rotateX(var(--box-rotation-x)) rotateY(var(--box-rotation-y)) translateY(-5px);
}

.software-box-face {
  position: absolute;
  overflow: hidden;
  backface-visibility: hidden;
  border: 1px solid color-mix(in srgb, var(--box-accent, #2ea0f2) 46%, rgba(255,255,255,.18));
  background:
    radial-gradient(circle at 70% 18%, color-mix(in srgb, var(--box-accent, #2ea0f2) 30%, transparent), transparent 44%),
    linear-gradient(160deg, #102e50, #061528 62%, #0b2c5e);
}

.software-box-front,
.software-box-back {
  width: var(--box-front-w);
  height: var(--box-front-h);
  margin-left: calc(var(--box-front-w) * -0.5);
  margin-top: calc(var(--box-front-h) * -0.5);
  border-radius: 4px;
}

.software-box-front {
  transform: translateZ(calc(var(--box-depth) * .5));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    inset 18px 0 28px rgba(255,255,255,.04),
    inset -14px 0 24px rgba(0,0,0,.25);
}

.software-box-front::before,
.software-box-front::after {
  content: none;
}

.software-box-back {
  transform: rotateY(180deg) translateZ(calc(var(--box-depth) * .5));
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--box-accent, #2ea0f2) 16%, #102a46), #030914 74%);
  filter: brightness(.72);
}

.software-box-right,
.software-box-left {
  width: var(--box-depth);
  height: var(--box-front-h);
  margin-left: calc(var(--box-depth) * -0.5);
  margin-top: calc(var(--box-front-h) * -0.5);
  border-radius: 3px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.32), transparent 44%, rgba(255,255,255,.05)),
    linear-gradient(160deg, color-mix(in srgb, var(--box-accent, #2ea0f2) 34%, #214b70), #06111f 78%);
  box-shadow:
    inset -14px 0 24px rgba(0,0,0,.36),
    inset 10px 0 18px rgba(255,255,255,.08);
}

.software-box-right {
  transform: rotateY(90deg) translateZ(calc(var(--box-front-w) * .5));
  filter: brightness(.86) saturate(1.1);
}

.software-box-left {
  transform: rotateY(-90deg) translateZ(calc(var(--box-front-w) * .5));
  filter: brightness(.64) saturate(.95);
}

.software-box-top,
.software-box-bottom {
  width: var(--box-front-w);
  height: var(--box-depth);
  margin-left: calc(var(--box-front-w) * -0.5);
  margin-top: calc(var(--box-depth) * -0.5);
  border-radius: 3px;
}

.software-box-top {
  transform: rotateX(90deg) translateZ(calc(var(--box-front-h) * .5));
  background: linear-gradient(135deg, color-mix(in srgb, var(--box-accent, #2ea0f2) 44%, #1b3d5e), #06111f 78%);
  opacity: .94;
}

.software-box-bottom {
  transform: rotateX(-90deg) translateZ(calc(var(--box-front-h) * .5));
  background: linear-gradient(135deg, #030914, color-mix(in srgb, var(--box-accent, #2ea0f2) 15%, #06111f));
  filter: brightness(.58);
}

.software-box-cover-image,
.software-box-spine-image,
.software-box-face-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.software-box-cover-image.is-empty,
.software-box-spine-image.is-empty,
.software-box-face-image.is-empty {
  display: none;
}

.software-box-scene.has-cover .software-box-front-auto,
.software-box-scene.has-spine .software-box-spine-auto,
.software-box-scene.has-right .software-box-right-auto,
.software-box-scene.has-back .software-box-back-auto {
  display: none;
}

.software-box-front-auto,
.software-box-spine-auto,
.software-box-right-auto,
.software-box-back-auto {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.software-box-front-auto {
  display: grid;
  grid-template-rows: 1fr auto auto;
  place-items: center;
  gap: 10px;
  padding: 20px 16px;
  color: #f4fbff;
  text-align: center;
  background:
    radial-gradient(circle at 50% 27%, color-mix(in srgb, var(--box-accent, #2ea0f2) 42%, transparent), transparent 78px),
    linear-gradient(160deg, #0e2a49, #061528 58%, #0b2f67);
}

.software-box-front-auto img {
  width: clamp(68px, calc(var(--box-front-w) * .46), 116px);
  height: clamp(68px, calc(var(--box-front-w) * .46), 116px);
  object-fit: contain;
}

.software-box-front-auto strong {
  max-width: 92%;
  font-size: clamp(16px, calc(var(--box-front-w) * .1), 24px);
  line-height: 1.14;
}

.software-box-front-auto small {
  color: #7de5ff;
  font-weight: 800;
}

.software-box-spine-auto,
.software-box-right-auto {
  display: grid;
  grid-template-rows: 42px 1fr 34px;
  place-items: center;
  padding: 10px 0;
  color: #e8f8ff;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 30%),
    linear-gradient(160deg, color-mix(in srgb, var(--box-accent, #2ea0f2) 36%, #0b2646), #06111f 78%);
}

.software-box-spine-auto img,
.software-box-right-auto img {
  width: clamp(22px, calc(var(--box-depth) * .48), 34px);
  height: clamp(22px, calc(var(--box-depth) * .48), 34px);
  object-fit: contain;
}

.software-box-spine-auto span,
.software-box-right-auto span {
  max-height: calc(var(--box-front-h) - 96px);
  color: #dff5ff;
  font-weight: 900;
  font-size: clamp(13px, calc(var(--box-depth) * .25), 18px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .03em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.software-box-spine-auto small,
.software-box-right-auto small {
  color: #7de5ff;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.software-box-back-auto {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 18px;
  color: rgba(232, 248, 255, .86);
  text-align: center;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--box-accent, #2ea0f2) 16%, #102a46), #030914 74%);
}

.software-box-back-auto strong {
  max-width: 86%;
  font-size: clamp(13px, calc(var(--box-front-w) * .075), 20px);
  line-height: 1.15;
}

.software-box-back-auto small {
  color: #7de5ff;
  font-weight: 800;
}

.software-box-gloss {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(105deg, transparent 0 36%, rgba(255,255,255,.12) 48%, transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 34%, rgba(0,0,0,.16));
  mix-blend-mode: screen;
}

.software-box-shadow-floor {
  position: absolute;
  left: 50%;
  bottom: clamp(8px, calc(var(--box-depth) * .2), 18px);
  width: calc(var(--box-front-w) + var(--box-depth));
  height: clamp(24px, calc(var(--box-depth) * .58), 42px);
  border-radius: 999px;
  background:
    radial-gradient(ellipse at center, color-mix(in srgb, var(--box-accent, #2ea0f2) 26%, transparent), transparent 64%),
    radial-gradient(ellipse at center, rgba(0,0,0,.56), transparent 72%);
  filter: blur(6px);
  transform: translateX(calc(-50% + var(--box-global-pos-x))) translateY(var(--box-global-pos-y)) scale(var(--box-global-scale)) rotate(-2deg);
}

/*
  Hard v4 geometry guard. Older public/admin styles still contain legacy
  .software-box-* rules, so these scoped selectors intentionally win with a
  stronger selector while preserving the shared six-face component.
*/
.software-box-v4 .software-box-3d {
  position: relative;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: translate(var(--box-global-pos-x), var(--box-global-pos-y)) scale(var(--box-global-scale)) rotateX(var(--box-rotation-x)) rotateY(var(--box-rotation-y));
}

.software-box-v4 .software-box-face {
  position: absolute;
  overflow: hidden;
  backface-visibility: hidden;
}

.software-box-v4 .software-box-front,
.software-box-v4 .software-box-back {
  left: auto;
  top: auto;
  width: var(--box-front-w);
  height: var(--box-front-h);
  margin-left: calc(var(--box-front-w) * -0.5);
  margin-top: calc(var(--box-front-h) * -0.5);
}

.software-box-v4 .software-box-front {
  transform: translateZ(calc(var(--box-depth) * .5));
}

.software-box-v4 .software-box-back {
  transform: rotateY(180deg) translateZ(calc(var(--box-depth) * .5));
}

.software-box-v4 .software-box-right,
.software-box-v4 .software-box-left {
  left: auto;
  top: auto;
  width: var(--box-depth);
  height: var(--box-front-h);
  margin-left: calc(var(--box-depth) * -0.5);
  margin-top: calc(var(--box-front-h) * -0.5);
  transform-origin: center center;
}

.software-box-v4 .software-box-right {
  transform: rotateY(90deg) translateZ(calc(var(--box-front-w) * .5));
}

.software-box-v4 .software-box-left {
  transform: rotateY(-90deg) translateZ(calc(var(--box-front-w) * .5));
}

.software-box-v4 .software-box-top,
.software-box-v4 .software-box-bottom {
  left: auto;
  top: auto;
  width: var(--box-front-w);
  height: var(--box-depth);
  margin-left: calc(var(--box-front-w) * -0.5);
  margin-top: calc(var(--box-depth) * -0.5);
  transform-origin: center center;
}

.software-box-v4 .software-box-top {
  transform: rotateX(90deg) translateZ(calc(var(--box-front-h) * .5));
}

.software-box-v4 .software-box-bottom {
  transform: rotateX(-90deg) translateZ(calc(var(--box-front-h) * .5));
}

.software-box-v4 .software-box-cover-image,
.software-box-v4 .software-box-spine-image,
.software-box-v4 .software-box-face-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center center;
  will-change: transform;
}

.software-box-v4 .software-box-cover-image {
  object-fit: var(--box-front-fit, cover);
  transform: translate(var(--box-front-pos-x, 0px), var(--box-front-pos-y, 0px)) rotate(var(--box-front-rotate, 0deg)) scale(var(--box-front-scale-x, 1), var(--box-front-scale-y, 1));
}

.software-box-v4 .software-box-spine-image {
  object-fit: var(--box-spine-fit, cover);
  transform: translate(var(--box-spine-pos-x, 0px), var(--box-spine-pos-y, 0px)) rotate(var(--box-spine-rotate, 0deg)) scale(var(--box-spine-scale-x, 1), var(--box-spine-scale-y, 1));
}

.software-box-v4 .software-box-right-image {
  object-fit: var(--box-right-fit, cover);
  transform: translate(var(--box-right-pos-x, 0px), var(--box-right-pos-y, 0px)) rotate(var(--box-right-rotate, 0deg)) scale(var(--box-right-scale-x, 1), var(--box-right-scale-y, 1));
}

.software-box-v4 .software-box-top-image {
  object-fit: var(--box-top-fit, cover);
  transform: translate(var(--box-top-pos-x, 0px), var(--box-top-pos-y, 0px)) rotate(var(--box-top-rotate, 0deg)) scale(var(--box-top-scale-x, 1), var(--box-top-scale-y, 1));
}

.software-box-v4 .software-box-back-image {
  object-fit: var(--box-back-fit, cover);
  transform: translate(var(--box-back-pos-x, 0px), var(--box-back-pos-y, 0px)) rotate(var(--box-back-rotate, 0deg)) scale(var(--box-back-scale-x, 1), var(--box-back-scale-y, 1));
}

.software-box-v4 .software-box-bottom-image {
  object-fit: var(--box-bottom-fit, cover);
  transform: translate(var(--box-bottom-pos-x, 0px), var(--box-bottom-pos-y, 0px)) rotate(var(--box-bottom-rotate, 0deg)) scale(var(--box-bottom-scale-x, 1), var(--box-bottom-scale-y, 1));
}

.software-box-v4 .software-box-front-auto,
.software-box-v4 .software-box-spine-auto,
.software-box-v4 .software-box-right-auto,
.software-box-v4 .software-box-back-auto,
.software-box-v4 .software-box-gloss {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.admin-box-preview-stage {
  min-height: 620px;
  padding: 28px;
  overflow: visible;
}

.mockup-canvases > div {
  overflow: visible;
}

.box3d-orientation-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.box3d-orientation-controls label {
  display: grid;
  gap: 7px;
}

.box3d-orientation-value {
  color: var(--accent-2, #5ed7ff);
  font-size: 12px;
  font-weight: 800;
}

@media (max-width: 760px) {
  .box3d-orientation-controls {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .software-box-scene {
    --box-front-w: 165px;
    --box-front-h: 238px;
    --box-depth: 48px;
    --box-scene-w: min(260px, 92vw);
    --box-scene-h: 342px;
  }

  .software-box-scene--detail {
    --box-front-w: min(235px, 60vw);
    --box-front-h: min(340px, 86vw);
    --box-depth: min(68px, 17vw);
    --box-scene-w: min(345px, 94vw);
    --box-scene-h: min(454px, 112vw);
  }
}