/* Beyond Polish virtual nail studio — salon overlay (ported from NailSupplyWebsite) */

.vns-overlay .vns-bp-studio {
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  border-radius: 0.85rem;
  overflow: hidden;
  border: 1px solid rgba(90, 62, 47, 0.1);
  box-shadow: 0 10px 28px rgba(58, 47, 50, 0.1);
}

.vns-overlay .vns-bp-studio .ns-pdp-tryon__stage.stage {
  background: #fff;
  border-radius: 0;
  overflow: hidden;
  position: relative;
  box-shadow: none;
}

.vns-overlay .vns-bp-studio .photo-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1380 / 680;
  overflow: hidden;
  background: #f7f7f7;
  isolation: isolate;
}

.vns-overlay .vns-bp-studio .photo-stack {
  position: absolute;
  inset: 0;
  z-index: 1;
  transition: filter 0.4s ease-in-out;
}

.vns-overlay .vns-bp-studio .photo-wrap img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
  transition: opacity 0.4s ease-in-out;
}

.vns-overlay .vns-bp-studio .skin-img {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.vns-overlay .vns-bp-studio .skin-img.active {
  opacity: 1;
}

.vns-overlay .vns-bp-studio .photo-wrap.transitioning .photo-stack {
  filter: blur(8px) brightness(1.05);
}

.vns-overlay .vns-bp-studio .photo-wrap.transitioning .nails-overlay,
.vns-overlay .vns-bp-studio .photo-wrap.transitioning .vns-design-overlay {
  opacity: 0;
  transition: opacity 0.35s ease-in-out;
}

.vns-overlay .vns-bp-studio .shimmer-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 30%,
    rgba(255, 200, 220, 0) 40%,
    rgba(255, 220, 235, 0.55) 50%,
    rgba(255, 200, 220, 0) 60%,
    transparent 70%,
    transparent 100%
  );
  background-size: 250% 100%;
  background-position: 100% 0;
}

.vns-overlay .vns-bp-studio .photo-wrap.transitioning .shimmer-overlay {
  opacity: 1;
  animation: vns-bp-shimmer-sweep 600ms ease-out;
}

@keyframes vns-bp-shimmer-sweep {
  0% { background-position: 150% 0; opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { background-position: -50% 0; opacity: 0; }
}

.vns-overlay .vns-bp-studio .photo-wrap.zoomed .photo-stack,
.vns-overlay .vns-bp-studio .photo-wrap.zoomed .nails-overlay,
.vns-overlay .vns-bp-studio .photo-wrap.zoomed .vns-design-overlay {
  position: absolute;
  width: 150%;
  height: 150%;
  left: -25%;
  top: -19%;
  right: auto;
  bottom: auto;
}

.vns-overlay .vns-bp-studio .photo-wrap.zoomed.zoomed-2x .photo-stack,
.vns-overlay .vns-bp-studio .photo-wrap.zoomed.zoomed-2x .nails-overlay,
.vns-overlay .vns-bp-studio .photo-wrap.zoomed.zoomed-2x .vns-design-overlay {
  position: absolute;
  width: 220%;
  height: 220%;
  left: -60%;
  top: -50%;
  right: auto;
  bottom: auto;
}

.vns-overlay .vns-bp-studio .disclaimer {
  text-align: center;
  font-size: 11px;
  color: #8a6f5d;
  padding: 8px 16px 10px;
  line-height: 1.4;
  background: #fff;
  margin: 0;
}

.vns-overlay .vns-bp-studio .nails-overlay,
.vns-overlay .vns-bp-studio .vns-design-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transition: opacity 0.45s ease-in-out;
  shape-rendering: geometricPrecision;
}

.vns-overlay .vns-bp-studio .vns-design-overlay {
  z-index: 3;
}

.vns-overlay .vns-bp-studio .tints-group,
.vns-overlay .vns-bp-studio .gloss-group,
.vns-overlay .vns-bp-studio .sheen-group {
  isolation: isolate;
}

.vns-overlay .vns-bp-studio .nail-mask-shape {
  vector-effect: non-scaling-stroke;
  shape-rendering: geometricPrecision;
}

.vns-overlay .vns-bp-studio .nail-hit {
  fill: transparent;
  stroke: transparent;
  pointer-events: none;
  vector-effect: non-scaling-stroke;
}

.vns-overlay .vns-bp-studio .nails-overlay.debug .nail-hit {
  stroke: rgba(0, 200, 255, 0.85);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}

.vns-overlay .vns-bp-studio .nail-tint {
  pointer-events: none;
  transition: fill 0.28s ease;
}

.vns-overlay .vns-bp-studio .nail-gloss {
  opacity: 0.35;
  transition: opacity 0.25s;
}

.vns-overlay .vns-bp-studio .nail-gloss.matte,
.vns-overlay .vns-bp-studio .nail-sheen.matte {
  display: none;
}

.vns-overlay .vns-bp-studio .nail-gloss.bright {
  fill: url(#glossGradImg);
  opacity: 0.8;
}

.vns-overlay .vns-bp-studio .nail-sheen {
  opacity: 0;
  transition: opacity 0.25s;
}

.vns-overlay .vns-bp-studio .nail-sheen.bright {
  opacity: 0.55;
}

.vns-overlay .vns-bp-studio .stage-controls {
  padding: 14px 20px;
  border-top: 1px solid #f0e3d0;
  background: #fff;
}

.vns-overlay .vns-bp-studio .mode-row,
.vns-overlay .vns-bp-studio .blend-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: #5a3e2f;
}

.vns-overlay .vns-bp-studio .blend-row {
  margin-top: 10px;
}

.vns-overlay .vns-bp-studio .mode-row label,
.vns-overlay .vns-bp-studio .blend-row label {
  font-weight: 600;
  margin-bottom: 0;
}

.vns-overlay .vns-bp-studio .paint-target-label {
  font-size: 11px;
  font-weight: 600;
  color: #8a6f5d;
  background: #fff;
  border: 1px solid #e8d5c0;
  border-radius: 999px;
  padding: 2px 10px;
  margin-right: 4px;
}

.vns-overlay .vns-bp-studio .photo-wrap[data-paint-target="L"] .skin-img.active,
.vns-overlay .vns-bp-studio .photo-wrap[data-paint-target="R"] .skin-img.active {
  filter: none;
}

.vns-overlay .vns-bp-studio .mode-btn,
.vns-overlay .vns-bp-studio .reset-btn,
.vns-overlay .vns-bp-studio .zoom-btn {
  padding: 6px 12px;
  border: 1px solid #e8d5c0;
  border-radius: 999px;
  background: #fff;
  color: #5a3e2f;
  font-size: 12px;
  line-height: 1.2;
  cursor: pointer;
}

.vns-overlay .vns-bp-studio .mode-btn.active {
  background: #2a1810;
  border-color: #2a1810;
  color: #fff;
}

.vns-overlay .vns-bp-studio .skin-tone-section {
  padding: 14px 20px 12px;
  border-top: 1px solid #f0e3d0;
  background: linear-gradient(180deg, #fdfaf6, #f9f1e6);
}

.vns-overlay .vns-bp-studio .skin-tone-label {
  font-size: 13px;
  font-weight: 600;
  color: #5a3e2f;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.vns-overlay .vns-bp-studio .skin-tone-section--simple + .nail-length-section {
  padding-top: 0;
  border-top: none;
  background: linear-gradient(180deg, #f9f1e6, #f7efe4);
}

.vns-overlay .vns-bp-studio .skin-tone-label .current-tone {
  background: #fff;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 11px;
  color: #8a6f5d;
  font-weight: 500;
  margin-left: auto;
}

.vns-overlay .vns-bp-studio .tone-radios {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.vns-overlay .vns-bp-studio .tone-radio {
  margin: 0;
  cursor: pointer;
}

.vns-overlay .vns-bp-studio .tone-radio__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.vns-overlay .vns-bp-studio .tone-radio__label {
  display: inline-block;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  border: 1px solid #e8d5c0;
  background: #fff;
  color: #5a3e2f;
  font-size: 11px;
  font-weight: 600;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.vns-overlay .vns-bp-studio .tone-radio__input:checked + .tone-radio__label {
  background: #2a1810;
  border-color: #2a1810;
  color: #fff;
}

.vns-overlay .vns-bp-studio .tone-radio__input:focus-visible + .tone-radio__label {
  outline: 2px solid #3f51b5;
  outline-offset: 2px;
}

.vns-overlay .vns-bp-studio .zoom-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.vns-overlay .vns-bp-studio .zoom-btn svg {
  width: 14px;
  height: 14px;
}

.vns-overlay .vns-bp-studio .zoom-btn .zoom-out {
  display: none;
}

.vns-overlay .vns-bp-studio .zoom-btn.is-zoomed .zoom-in {
  display: none;
}

.vns-overlay .vns-bp-studio .zoom-btn.is-zoomed .zoom-out {
  display: inline-flex;
}

.vns-overlay .vns-bp-studio.vns-bp-studio--loading .nails-overlay {
  opacity: 0;
}

.vns-overlay .vns-bp-studio .photo-wrap.zoomed .nails-overlay,
.vns-overlay .vns-bp-studio .photo-wrap.zoomed .vns-design-overlay {
  image-rendering: auto;
}

.vns-overlay .vns-stage {
  background: transparent;
  padding: 0;
  min-height: 0;
}