/* Current-product landing preview. Keep this layer focused on the live dock and Wallpapers panel. */

.current-product-stage {
  position: relative;
  min-height: 548px;
  isolation: isolate;
}

.current-product-stage::before {
  content: '';
  position: absolute;
  inset: 6% 2% 4%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37, 99, 235, .24), rgba(37, 99, 235, .04) 44%, transparent 70%);
  filter: blur(38px);
}

.current-workspace-preview {
  position: absolute;
  inset: 8px 10px 42px 0;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 28px;
  background:
    radial-gradient(circle at 14% 25%, rgba(99, 102, 241, .22), transparent 28%),
    radial-gradient(circle at 80% 75%, rgba(37, 99, 235, .16), transparent 34%),
    linear-gradient(145deg, #171a26, #0b1020 58%, #111827);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .04);
  transform: perspective(1200px) rotateY(-3deg) rotateX(1.25deg);
}

html[dir="rtl"] .current-workspace-preview {
  inset: 8px 0 42px 10px;
  transform: perspective(1200px) rotateY(3deg) rotateX(1.25deg);
}

.current-preview-dock {
  position: absolute;
  inset-inline-start: 50%;
  bottom: 17px;
  width: 272px;
  height: 56px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  padding: 6px 9px;
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 17px;
  background: rgba(9, 12, 22, .78);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
  backdrop-filter: blur(18px);
  transform: translateX(-50%);
}

html[dir="rtl"] .current-preview-dock { transform: translateX(50%); }

.current-dock-action {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  justify-self: center;
  border-radius: 11px;
  color: #aeb9ca;
  background: rgba(255, 255, 255, .025);
  font-size: 15px;
  font-weight: 800;
}

.current-dock-action[data-dock-action="add"] {
  width: 42px;
  height: 42px;
  color: #06101f;
  background: #60a5fa;
  font-size: 23px;
  line-height: 1;
}

.current-dock-action[data-dock-action="wallpapers"] {
  color: #dbeafe;
  background: rgba(37, 99, 235, .22);
  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, .3);
}

.wallpaper-preview-panel {
  position: absolute;
  z-index: 4;
  inset-inline-end: -6px;
  bottom: 78px;
  width: 226px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, .27);
  border-radius: 18px;
  background: rgba(6, 9, 16, .93);
  box-shadow: 0 24px 52px rgba(0, 0, 0, .42);
  backdrop-filter: blur(18px);
}

.wallpaper-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}

.wallpaper-preview-title {
  color: #f8fafc;
  font-size: 10px;
  font-weight: 800;
}

.wallpaper-preview-note {
  margin-top: 2px;
  color: #71839e;
  font-size: 7px;
}

.wallpaper-preview-upload {
  padding: 5px 7px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 7px;
  color: #cbd5e1;
  background: rgba(255, 255, 255, .035);
  font-size: 7px;
  font-weight: 700;
}

.wallpaper-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.wallpaper-preview-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 8px;
  background: linear-gradient(135deg, #1e293b, #0f172a);
}

.wallpaper-preview-thumb:nth-child(1) { background: radial-gradient(circle at 30% 30%, #536aa5, transparent 34%), linear-gradient(135deg, #111827, #252c46); }
.wallpaper-preview-thumb:nth-child(2) { background: radial-gradient(circle at 75% 35%, #3f88a8, transparent 28%), linear-gradient(135deg, #0b1722, #1f3650); }
.wallpaper-preview-thumb:nth-child(3) { background: radial-gradient(circle at 35% 70%, #7e4b3d, transparent 32%), linear-gradient(135deg, #19131b, #3a2530); }
.wallpaper-preview-thumb:nth-child(4) { background: radial-gradient(circle at 70% 30%, #514c91, transparent 30%), linear-gradient(135deg, #11111c, #2b2851); }
.wallpaper-preview-thumb.active { border-color: rgba(96, 165, 250, .7); box-shadow: inset 0 0 0 1px rgba(96, 165, 250, .35); }
.wallpaper-preview-thumb.active::after {
  content: '✓';
  position: absolute;
  inset-inline-end: 5px;
  top: 4px;
  width: 14px;
  height: 14px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #06101f;
  background: #93c5fd;
  font-size: 8px;
  font-weight: 900;
}

.wallpaper-preview-divider {
  height: 1px;
  margin: 10px 0 8px;
  background: rgba(255, 255, 255, .08);
}

.wallpaper-preview-section-title {
  margin-bottom: 5px;
  color: #cbd5e1;
  font-size: 8px;
  font-weight: 800;
}

.wallpaper-layout-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 7px;
  background: rgba(0, 0, 0, .18);
}

.wallpaper-layout-row span {
  display: grid;
  min-height: 25px;
  place-items: center;
  color: #71839e;
  border-inline-start: 1px solid rgba(255, 255, 255, .07);
  font-size: 7px;
  font-weight: 750;
}
.wallpaper-layout-row span:first-child { border-inline-start: 0; }
.wallpaper-layout-row span.active { color: #dbeafe; background: rgba(37, 99, 235, .2); }

.compact-preview-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  padding: 7px 8px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  color: #cbd5e1;
  background: rgba(255, 255, 255, .025);
  font-size: 7px;
  font-weight: 700;
}

.compact-preview-toggle {
  position: relative;
  width: 27px;
  height: 14px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #2563eb;
}
.compact-preview-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  inset-inline-end: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
}

@media (max-width: 980px) {
  .current-product-stage { width: min(100%, 650px); min-height: 520px; margin-inline: auto; }
}

@media (max-width: 700px) {
  .current-product-stage { min-height: 470px; }
  .current-workspace-preview { inset-inline: 0; bottom: 24px; transform: none !important; border-radius: 21px; }
  .wallpaper-preview-panel { inset-inline-end: 9px; bottom: 69px; width: 190px; padding: 9px; }
  .current-preview-dock { bottom: 12px; width: 238px; height: 50px; }
  .current-dock-action { width: 32px; height: 32px; }
  .current-dock-action[data-dock-action="add"] { width: 38px; height: 38px; }
}

@media (max-width: 470px) {
  .current-product-stage { min-height: 430px; }
  .wallpaper-preview-panel { width: 166px; }
  .wallpaper-preview-note { display: none; }
}