.vdp-wrap { max-width: 605px; margin: 24px auto; }
.vdp-stage { position: relative; width: 100%; }
.vdp-image { display: block; width: 100%; height: auto; }
.vdp-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.vdp-ui { margin-top: 14px; padding: 14px; border: 1px solid rgba(0,0,0,0.15); border-radius: 10px; }
.vdp-row { margin-bottom: 10px; }
.vdp-label { display: block; margin-bottom: 6px; font-size: 14px; }
.vdp-style, .vdp-comment { width: 100%; padding: 10px; font-size: 14px; }
.vdp-clear { padding: 10px 12px; font-size: 14px; cursor: pointer; }
.vdp-status { margin-top: 10px; font-size: 14px; opacity: 0.9; }
.vdp-hint { margin-top: 10px; font-size: 13px; opacity: 0.75; }
.vdp-error { padding: 12px; border: 1px solid rgba(200,0,0,0.3); border-radius: 10px; }
.vdp-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.vdp-actions .vdp-status { flex: 1 1 240px; margin-top: 0; }
.vdp-submit { padding: 10px 12px; font-size: 14px; cursor: pointer; }
.vdp-stage { position: relative; }
.vdp-tooltip {
  position: absolute;
  max-width: 260px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.25;
  border-radius: 10px;
  background: rgba(20,20,20,0.92);
  color: #fff;
  box-shadow: 0 6px 22px rgba(0,0,0,0.25);
  pointer-events: none;
  display: none;
  z-index: 5;
  transform: translate(25px);
    transition: transform 120ms ease-out;
}

.vdp-tooltip.is-visible { display: block; }

/* two-column layout for the form + latest pins */
.vdp-wrap .vdp-ui,
.vdp-wrap .vdp-recent {
  width: 100%;
}

/* Keep the whole component a reasonable width on large screens */
.vdp-wrap { max-width: 605px; }

/* desktop: two columns */
@media (min-width: 780px) {
  .vdp-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: start;
  }

  .vdp-wrap .vdp-ui {
    margin: 0;
  }

  .vdp-wrap .vdp-recent {
    margin: 0;
  }

  /* keep the stage (doll image/canvas) full width below both columns */
  .vdp-wrap .vdp-stage {
    grid-column: 1 / -1;
    margin-top: 12px;
  }
}

/* mobile: stacked */
@media (max-width: 779px) {
  .vdp-wrap .vdp-recent {
    margin-top: 12px;
  }
}
.vdp-style-picker {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.vdp-style-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.vdp-style-option input.vdp-style {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.vdp-style-swatch {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.22);
}

.vdp-style-swatch.is-red { background: #b21a1a; }
.vdp-style-swatch.is-black { background: #111; }
.vdp-style-swatch.is-gold { background: #b08d24; }
.vdp-style-swatch.is-green { background: #84e400; }
.vdp-style-swatch.is-blue { background: #1282f6; }
.vdp-style-swatch.is-pink { background: #fe4cc3; }
.vdp-style-swatch.is-white { background: #e7e7e6; }

.vdp-style-option input.vdp-style:checked + .vdp-style-swatch {
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,0.25),
    0 0 0 3px rgba(0,0,0,0.10);
}

.vdp-style-name {
  font-size: 14px;
}

/* -------------------------
   Voodoo page full-bleed background (only appears where the shortcode renders)
------------------------- */

/* Remove the card styling from the "latest pins" area so it sits on the background */
.vdp-recent{
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/*
  Full-width vintage paper background.
  IMPORTANT: attach it to a pseudo-element so it doesn't change layout sizing.
  This keeps your doll image from expanding to 100vw.
*/
.vdp-wrap{
  position: relative;
}

.vdp-wrap::before{
  content: "";
  position: absolute;
  top: -28px;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  z-index: 0;

  background-image: url("https://thesaintsofswag.com/wp-content/uploads/2026/01/Old-Vintage-Paper-Textured-background-Graphics-69135662-1-scaled.jpg");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

.vdp-wrap .vdp-scene-line{
  margin: 6px 0 10px;
  text-align: center;
  font-size: 18px;
  line-height: 1.25;
}


/* Keep all actual UI content above the background layer */
.vdp-wrap > *{
  position: relative;
  z-index: 1;
}

/* Remove the stage "card" look so it lays on the background art */
.vdp-stage{
  background: transparent;
  border: none;
  box-shadow: none;
}

/* Center the inline auth prompt and Nextend buttons */
.vdp-auth-inline{
  margin-top: 10px;
  text-align: center;
}

.vdp-auth-buttons{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Vertically center the right column (Latest Curses) */
.vdp-recent{
  align-self: center;
}
.vdp-ui-title{
  font-family: "Creepster", cursive;
  font-weight: 400;
  text-align: center;
  margin: 0 0 10px 0;
  color: #241c16;
  font-size: 54px;
  line-height: 1;
  letter-spacing: .02em;
}

.vdp-wrap .vdp-scene-line{
  margin: 10px 0 12px;
  font-family: "Winky Rough", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.25;
  text-align: center;
  opacity: .92;
}



@media (max-width: 520px){
  .vdp-ui-title{ font-size: 40px; }
}
.vdp-page-title{
  font-family: "Creepster", cursive;
  font-weight: 400;
  text-align: center;
  margin: 0 0 10px 0;
  line-height: 1;
  font-size: 84px;
  color: #ae2310;
text-shadow: 0 -1px 4px #FFF, 0 -2px 10px #ff0, 0 -10px 20px #ff8000, 0 -18px 40px #F00;
}

@media (max-width: 920px){
  .vdp-page-title{ font-size: 44px; }
}