/* voodoo.css
   Single background graphic approach (panel-bg.png).
   Clean compiled version: no duplicates, no conflicting overrides.
   Scoped to .vdp-wrap.
*/

/* Load fonts */
@import url("https://fonts.googleapis.com/css2?family=Creepster&family=Winky+Rough&display=swap");

/* -------------------------
   Base + layout
------------------------- */
body:has(.vdp-wrap) .entry-title{
  font-family:"Creepster", cursive;
  font-weight:400;
}
/* Make the theme header/title area transparent on pages that contain the voodoo UI */
body:has(.vdp-wrap) .site-header,
body:has(.vdp-wrap) header,
body:has(.vdp-wrap) .main-header-bar,
body:has(.vdp-wrap) .ast-primary-header,
body:has(.vdp-wrap) .ast-header-break-point .main-header-bar,
body:has(.vdp-wrap) .ast-archive-description,
body:has(.vdp-wrap) .ast-page-builder-template,
body:has(.vdp-wrap) .entry-header,
body:has(.vdp-wrap) .page-header {
  background: transparent;
  background-color: transparent;
  box-shadow: none;
}

body:has(.vdp-wrap) .site-header,
body:has(.vdp-wrap) .main-header-bar {
  border-bottom: none;
}
body:has(.vdp-wrap) .site-content,
body:has(.vdp-wrap) .content-area,
body:has(.vdp-wrap) .site-main,
body:has(.vdp-wrap) .entry-content {
  background: transparent;
}

body:has(.vdp-wrap) #content,
body:has(.vdp-wrap) .ast-container,
body:has(.vdp-wrap) .ast-site-identity {
  background: transparent;
}


.vdp-wrap{
  --ink:#241c16;
  --ink2:#3a2e26;

  max-width:605px;
  margin:0 auto;

  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap:18px;
  align-items:start;
  justify-items:center;

  font-family:"Winky Rough","IM Fell English",Georgia,serif;
  color:var(--ink);
  
}

@media (max-width:920px){
  .vdp-wrap{ grid-template-columns:1fr; }
}

.vdp-wrap, .vdp-wrap *{ box-sizing:border-box; }

/* Stage (the doll image area) */
.vdp-stage{
  grid-column: 1 / -1;
  margin-top:18px;

  border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.08));
  border:1px solid rgba(36,28,22,.18);
  box-shadow:0 24px 60px rgba(0,0,0,.14);
  padding:20px;
  overflow:hidden;
}

/* Full-width background for any page where the voodoo shortcode renders */
.vdp-stage{
  background-image: url("https://thesaintsofswag.com/wp-content/uploads/2026/01/Old-Vintage-Paper-Textured-background-Graphics-69135662-1.jpg");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;

/* Keep the actual interactive layout boxed inside the full-width stage */
.vdp-stage > .vdp-wrap{
  max-width: 605px;
  margin: 0 auto;
  padding: 0 16px; /* side padding on small screens */
}

.vdp-wrap > *{
  max-width: 605px;
  margin: 0 auto;
}

/* Keep the actual interactive layout boxed inside the full-width stage */
.vdp-stage > .vdp-wrap{
  max-width: 605px;
  margin: 0 auto;
  padding: 0 16px; /* side padding on small screens */
}

  /* remove the card look so the image is the background */
  background-color: transparent;
  border: none;
  box-shadow: none;
}

.vdp-image{ display:block; max-width:100%; height:auto; }

/* -------------------------
   Panel: single background graphic
------------------------- */

.vdp-ui{
  width:605px;
  min-height:478px;
  position:relative;
  margin:0 auto;
  overflow:hidden;

  background-image:url("/wp-content/themes/astra-child/assets/voodoo/panel-bg.png");
  background-repeat:no-repeat;
  background-size:100% 100%;
  background-position:center top;

  /* safe area inside the artwork */
  padding:56px 44px 44px;

  border:0;
  outline:0;
  box-shadow:none;
  border-radius:0;
}

/* If theme adds wrapper styling to form/fieldset, neutralize locally */
.vdp-wrap form,
.vdp-wrap fieldset{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  outline:0 !important;
  border-radius:0 !important;
}

/* -------------------------
   Typography
------------------------- */

/* Default text inside module */
.vdp-wrap label,
.vdp-wrap input,
.vdp-wrap textarea,
.vdp-wrap button,
.vdp-wrap .vdp-status,
.vdp-wrap .vdp-recent-list,
.vdp-ui,
.vdp-ui .vdp-style-option,
.vdp-ui .vdp-comment{
  font-family:"Winky Rough","IM Fell English",Georgia,serif !important;
  color:var(--ink);
}

/* Sidebar title */
.vdp-wrap .vdp-recent-title{
  font-family:"Creepster",system-ui,sans-serif !important;
  font-weight:400 !important;
  color: #6a2117;
  letter-spacing:.4px;
}

/* Hide the "pin style" label (keep spacing stable) */
.vdp-ui .vdp-row:first-child .vdp-label{
  display:none !important;
}

/* Make “Add your custom voodoo curse” the loud label */
.vdp-ui .vdp-row:nth-child(2) .vdp-label{
  font-family:"Creepster",system-ui,sans-serif !important;
  font-size:26px !important;
  font-weight:400 !important;
  letter-spacing:.2px !important;
  text-transform:none !important;
  margin:30px 0 10px !important;
}

/* Generic label spacing */
.vdp-row{ margin:0 0 12px; }

.vdp-label{
  display:block;
  margin:0 0 10px;
  font-size:18px;
}

/* -------------------------
   Pin style picker
------------------------- */

.vdp-ui .vdp-style-picker{
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
  align-items:center;
  justify-content:center;

  /* pushes pins below baked header area */
  margin-top:34px;
}

.vdp-ui .vdp-style-option{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0;
  padding:0;
  cursor:pointer;
  user-select:none;
  font-size:15px;
}

/* Hide native radio but keep accessible */
.vdp-ui .vdp-style-option input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

/* Swatches (if your PHP outputs them) */
.vdp-ui .vdp-style-swatch{
  position:relative;
  display:inline-block;
  width:18px;
  height:18px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.35);
  box-shadow:0 2px 4px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.35);
  background-color:#777;
}

.vdp-ui .vdp-style-swatch::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(circle at 30% 28%, rgba(255,255,255,.85), rgba(255,255,255,.08) 48%, rgba(0,0,0,.22));
  pointer-events:none;
}

.vdp-ui .vdp-style-swatch.is-red{ background-color:#7f1d1d; }
.vdp-ui .vdp-style-swatch.is-black{ background-color:#1c1c1c; }
.vdp-ui .vdp-style-swatch.is-gold{ background-color:#b79145; }
.vdp-ui .vdp-style-swatch.is-blue{ background-color:#2f5fa8; }
.vdp-ui .vdp-style-swatch.is-white{ background-color:#f4efe6; }
.vdp-ui .vdp-style-swatch.is-pink{ background-color:#a34b86; }
.vdp-ui .vdp-style-swatch.is-green{ background-color:#3c6b3f; }

.vdp-ui .vdp-style-option input:checked + .vdp-style-swatch{
  box-shadow:0 0 0 3px rgba(183,145,69,.22), 0 2px 4px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.35);
}

/* Brighter, more pin-like swatches */
.vdp-ui .vdp-style-swatch{
  width:22px;
  height:22px;
  border:1px solid rgba(0,0,0,.38);
  box-shadow: 0 3px 10px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.55);
  filter: saturate(1.35) brightness(1.18) contrast(1.08);
}

.vdp-ui .vdp-style-swatch::after{
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.95), rgba(255,255,255,.18) 45%, rgba(0,0,0,.28)),
    radial-gradient(circle at 55% 70%, rgba(0,0,0,.20), rgba(0,0,0,0) 55%);
}

/* Tune the base colors to match vivid pins */
.vdp-ui .vdp-style-swatch.is-red{ background-color:#c81e1e; }
.vdp-ui .vdp-style-swatch.is-blue{ background-color:#1f6fff; }
.vdp-ui .vdp-style-swatch.is-green{ background-color:#2fa24a; }
.vdp-ui .vdp-style-swatch.is-gold{ background-color:#f0b44b; }
.vdp-ui .vdp-style-swatch.is-black{ background-color:#151515; }
.vdp-ui .vdp-style-swatch.is-white{ background-color:#fff6e6; }
.vdp-ui .vdp-style-swatch.is-pink{ background-color:#ff3aa8; }

/* Selected state: sharper ring + slight lift */
.vdp-ui .vdp-style-option input:checked + .vdp-style-swatch{
  box-shadow:
    0 0 0 3px rgba(36,28,22,.55),
    0 0 0 6px rgba(183,145,69,.25),
    0 8px 14px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.55);
  transform: translateY(-1px);
}



/* -------------------------
   Note field
------------------------- */

/* Works for input or textarea */
.vdp-ui .vdp-comment{
  width:100% !important;
  max-width:100% !important;

  height:54px !important; /* short on purpose */
  padding:12px 12px !important;

  border-radius:8px !important;
  border:1px solid rgba(36,28,22,.40) !important;

  background:linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.06)) !important;
  box-shadow:inset 0 10px 18px rgba(0,0,0,.18) !important;

  font-size:19px !important;
  line-height:1.3 !important;
  letter-spacing:.2px !important;
  color:#2b2018 !important;

  display:block;
  margin-left:auto !important;
  margin-right:auto !important;
}

.vdp-ui .vdp-comment::placeholder{
  font-size:16px !important;
  opacity:.55 !important;
  color: rgba(36,28,22,.55) !important;
}

.vdp-ui .vdp-comment:focus{
  outline:none !important;
  border-color: rgba(36,28,22,.60) !important;
  box-shadow:inset 0 10px 18px rgba(0,0,0,.18), 0 0 0 3px rgba(183,145,69,.20) !important;
}

/* -------------------------
   Actions + graphic buttons
------------------------- */

.vdp-ui .vdp-row,
.vdp-ui .vdp-actions{
  text-align:center;
  justify-content:center;
}

.vdp-actions{
  display:flex;
  flex-wrap:wrap;                /* message goes under buttons */
  gap:18px;
  align-items:center;
  justify-content:center;
  margin-top:12px;
}

/* Submit (289x80) */
.vdp-ui .vdp-submit{
  appearance:none !important;
  display:inline-block !important;

  width:289px !important;
  height:80px !important;

  padding:0 !important;
  margin:0 !important;

  border:0 !important;
  border-radius:0 !important;

  background-color:transparent !important;
  background-image:url("/wp-content/themes/astra-child/assets/voodoo/submit-btn.png") !important;
  background-repeat:no-repeat !important;
  background-size:100% 100% !important;
  background-position:center !important;

  box-shadow:none !important;
  cursor:pointer !important;

  /* hide label text visually */
  color:transparent !important;
  text-shadow:none !important;
  font-size:0 !important;
  line-height:0 !important;
}

/* Clear preview (graphic) */
.vdp-ui .vdp-clear{
  appearance:none !important;
  display:inline-block !important;

  width:210px !important;
  height:71px !important;

  padding:0 !important;
  margin:0 !important;

  border:0 !important;
  border-radius:0 !important;

  background-color:transparent !important;
  background-image:url("/wp-content/themes/astra-child/assets/voodoo/clear-btn.png") !important;
  background-repeat:no-repeat !important;
  background-size:100% 100% !important;
  background-position:center !important;

  box-shadow:none !important;
  cursor:pointer !important;

  /* hide label text visually */
  color:transparent !important;
  text-shadow:none !important;
  font-size:0 !important;
  line-height:0 !important;
}

/* Theme hover wash killer */
.vdp-ui .vdp-submit:hover,
.vdp-ui .vdp-submit:focus,
.vdp-ui .vdp-submit:active,
.vdp-ui .vdp-clear:hover,
.vdp-ui .vdp-clear:focus,
.vdp-ui .vdp-clear:active{
  background-color:transparent !important;
  box-shadow:none !important;
  outline:none !important;
  border:0 !important;
}

.vdp-ui .vdp-submit:hover,
.vdp-ui .vdp-clear:hover{ transform:translateY(-1px); }

.vdp-ui .vdp-submit:active,
.vdp-ui .vdp-clear:active{ transform:none; }

/* -------------------------
   Status / confirmation message
------------------------- */

.vdp-ui .vdp-status{
  flex-basis:100% !important;
  width:100% !important;

  max-width:520px !important;
  margin:1px auto 0 !important;
  padding:0 24px !important;

  text-align:center !important;

  font-size:17px !important;
  line-height:1.0 !important;
  color:#2a1f17 !important;
  opacity:.9 !important;

  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

/* -------------------------
   Sidebar card
------------------------- */

.vdp-recent {
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.vdp-recent-title{
  margin:0 0 10px;
  font-size:30px;
  text-transform:uppercase;
  color: #fff;
}

.vdp-recent-list{
  font-size:20px;
  line-height:1.35;
  margin:0;
  padding-left:0;
}

/* 1) Move the pin picker down ~30px */
.vdp-ui .vdp-style-picker{
  margin-top: 64px !important; /* was 34px in the cleaned file, +30 */
}

/* 2) Align the message field with the buttons (same left/right inset) */
.vdp-ui .vdp-comment{
  width: calc(100% - 88px) !important;   /* 44px left + 44px right */
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
}

/* If the field is still full width because of a stronger rule, force it */
.vdp-ui input.vdp-comment,
.vdp-ui textarea.vdp-comment{
  width: calc(100% - 88px) !important;
}

/* 3) Kill the 1px rounded grey border (it’s coming from a parent wrapper) */
.vdp-wrap .vdp-ui,
.vdp-wrap form,
.vdp-wrap fieldset,
.vdp-wrap .vdp-row,
.vdp-wrap .vdp-actions,
.vdp-wrap .vdp-recent,
.vdp-wrap *{
  outline: none !important;
}

.vdp-wrap .vdp-ui,
.vdp-wrap form,
.vdp-wrap fieldset{
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background-clip: padding-box !important;
}

/* If the theme is drawing that border with a pseudo element */
.vdp-wrap .vdp-ui::before,
.vdp-wrap .vdp-ui::after,
.vdp-wrap form::before,
.vdp-wrap form::after{
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}
.vdp-auth-inline {
  margin-top: 10px;
  text-align: center;
}

.vdp-auth-line {
  margin: 0 0 10px 0;
}

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

/* Nextend buttons often render as <a> links inside a wrapper */
.vdp-auth-buttons a,
.vdp-auth-buttons button {
  margin: 0 auto;
}

/* Grime + vignette around the whole voodoo UI */
/* -------------------------
   Rim grime and button grounding
   Preserves panel-bg.png, no interior tint
------------------------- */

/* Remove any previous grime overlays that might still exist */
.vdp-ui::before,
.vdp-ui::after{
  content:none !important;
  display:none !important;
}

/* Keep your panel art exactly as-is, just add outside weight */
.vdp-ui{
  position:relative;
  z-index:0;             /* establishes stacking context */
  overflow:visible;      /* allow shadows to show outside artwork */
  border-radius:0;       /* keep your art edges crisp */
  background-color:transparent;
  box-shadow:none;       /* no interior haze */
}

/* Outside shadow behind the panel (does not touch interior) */
.vdp-ui{
  box-shadow:
    0 18px 42px rgba(0,0,0,.55),
    0 6px 14px rgba(0,0,0,.28);
}

/* Corner grime behind the panel only */
.vdp-ui{
  /* do NOT set background-image here, it would overwrite panel-bg.png */
}

.vdp-ui{
  /* use a behind-layer instead */
}
.vdp-ui{
  /* placeholder to keep structure clear */
}

/* Create a grime layer behind the panel */
.vdp-ui{
  /* nothing else here */
}

.vdp-ui::before{
  content:"";
  position:absolute;
  inset:-22px;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(44px 44px at 10% 12%, rgba(0,0,0,.26), rgba(0,0,0,0) 72%),
    radial-gradient(44px 44px at 90% 12%, rgba(0,0,0,.22), rgba(0,0,0,0) 72%),
    radial-gradient(54px 54px at 12% 90%, rgba(0,0,0,.20), rgba(0,0,0,0) 75%),
    radial-gradient(54px 54px at 88% 90%, rgba(0,0,0,.26), rgba(0,0,0,0) 75%);
  filter:blur(1px);
  opacity:.9;
  mix-blend-mode:multiply;
}

/* A soft dirty halo behind the whole panel */
.vdp-ui::after{
  content:"";
  position:absolute;
  inset:-26px;
  z-index:-2;
  pointer-events:none;
  background:radial-gradient(ellipse at 50% 55%,
    rgba(0,0,0,.28) 0%,
    rgba(0,0,0,.12) 45%,
    rgba(0,0,0,0) 74%);
  filter:blur(10px);
  opacity:.85;
}

/* -------------------------
   Buttons: subtle contact shadow, no float
------------------------- */

.vdp-ui .vdp-submit,
.vdp-ui .vdp-clear{
  position:relative;
  box-shadow:none !important;     /* keep PNG art clean */
  filter:none !important;         /* kill drop-shadow float */
}

/* A small contact shadow tucked under each button */
.vdp-ui .vdp-submit::after,
.vdp-ui .vdp-clear::after{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  bottom:6px;
  height:10px;
  z-index:-1;
  background:rgba(0,0,0,.22);
  filter:blur(6px);
  opacity:.55;
  pointer-events:none;
}

/* Keep your hover lift, but reduce the “floating sticker” effect */
.vdp-ui .vdp-submit:hover,
.vdp-ui .vdp-clear:hover{
  transform:translateY(-1px);
}

.vdp-ui .vdp-submit:active,
.vdp-ui .vdp-clear:active{
  transform:translateY(0);
}
/* ---------
   Guaranteed exterior shadow and grime (does not touch interior art)
   Uses drop-shadow so it can render outside even if wrappers clip
--------- */

/* Make sure no wrapper is clipping the panel */
.vdp-wrap,
.vdp-ui{
  overflow: visible !important;
}

/* Panel: realistic dirty shadow without tinting the interior */
.vdp-ui{
  /* keep your panel-bg.png exactly as-is */
  filter:
    drop-shadow(0 20px 38px rgba(0,0,0,.55))
    drop-shadow(0 6px 12px rgba(0,0,0,.28))
    drop-shadow(0 2px 0 rgba(0,0,0,.18)) !important;
}

/* Corner grime that sits outside the panel edge, still no interior tint.
   This uses a pseudo-element on the wrapper, not the panel. */
.vdp-wrap{
  position: relative !important;
}

.vdp-wrap::after{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width: 520px !important;   /* tweak if your panel size differs */
  height: 360px !important;  /* tweak if your panel size differs */
  transform: translate(-50%, -50%) !important;
  pointer-events:none !important;
  z-index: 0 !important;

  background:
    radial-gradient(60px 60px at 8% 10%, rgba(0,0,0,.22), rgba(0,0,0,0) 72%),
    radial-gradient(60px 60px at 92% 10%, rgba(0,0,0,.20), rgba(0,0,0,0) 72%),
    radial-gradient(72px 72px at 10% 92%, rgba(0,0,0,.18), rgba(0,0,0,0) 76%),
    radial-gradient(72px 72px at 90% 92%, rgba(0,0,0,.22), rgba(0,0,0,0) 76%);
  mix-blend-mode: multiply;
  opacity: .85;
}

/* Ensure the actual UI stays above the grime layer */
.vdp-wrap > *{
  position: relative;
  z-index: 1;
}

/* ---------
   Buttons: subtle grounding, no floaty sticker look
--------- */

.vdp-ui .vdp-submit,
.vdp-ui .vdp-clear{
  filter:
    drop-shadow(0 7px 10px rgba(0,0,0,.35))
    drop-shadow(0 1px 0 rgba(0,0,0,.18)) !important;
}
.vdp-step{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border-radius:999px;
  font-size:12px;
  line-height:1;
  margin-right:8px;
  vertical-align:middle;
  color:#241c16;
  border:1px solid rgba(36,28,22,.55);
  background: rgba(255,255,255,.35);
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}

.vdp-step::before{
  content: attr(data-step);
}
.vdp-instruction{
  text-align: center;
  font-size: 0.9em;
  line-height: 1.3;
  margin: 8px 0 6px;
  color: #241c16;
}

/* Center the page title and remove underline on voodoo pages */
body:has(.vdp-wrap) header.entry-header .entry-title{
  text-align: center;
  font-family: "Creepster", cursive;
  font-weight: 400;
  text-decoration: none;
  border-bottom: none;
  font-size: 1rem;
}
body:has(.vdp-wrap) header.entry-header .entry-title::after,
body:has(.vdp-wrap) header.entry-header .entry-title::before{
  content: none;
  display: none;
}

header.entry-title {
  font-weight: 400;
  text-decoration: none;
  border-bottom: none;
  font-size: 1rem;
}

/* Kadence Posts: kill any underline effects and set Creepster */
ul.wp-block-kadence-posts.kb-posts.kadence-posts-list li.kb-post-list-item article.entry.loop-entry
.entry-content-wrap header.entry-header h4.entry-title a{
  font-family: "Creepster", cursive !important;
  font-weight: 400 !important;

  text-decoration: none !important;
  text-decoration-line: none !important;
  border-bottom: 0 !important;

  box-shadow: none !important;
  background-image: none !important;
  background: none !important;

  outline: 0 !important;
}

/* Also kill pseudo-element underlines */
ul.wp-block-kadence-posts.kb-posts.kadence-posts-list li.kb-post-list-item article.entry.loop-entry
.entry-content-wrap header.entry-header h4.entry-title a::before,
ul.wp-block-kadence-posts.kb-posts.kadence-posts-list li.kb-post-list-item article.entry.loop-entry
.entry-content-wrap header.entry-header h4.entry-title a::after{
  content: none !important;
  display: none !important;
}