/**
 * IVY WIZARD - PREMIUM CONVERSION-OPTIMIZED UI
 * 
 * Design Philosophy:
 * - Luxury meets performance
 * - Every pixel drives conversion
 * - Micro-interactions create trust
 * - Progressive disclosure reduces friction
 * - Social proof integrated seamlessly
 */

/* ========================================
   PREMIUM FOUNDATION - Color System
======================================== */
:root {
  /* Primary Brand */
  --ivy-accent: #7CFF6B;
  --ivy-accent-glow: rgba(124, 255, 107, 0.35);
  --ivy-accent-soft: rgba(124, 255, 107, 0.12);
  
  /* Premium Neutrals - Dark Mode */
  --ivy-void: #020306;
  --ivy-surface-deep: rgba(8, 12, 20, 0.95);
  --ivy-surface: rgba(14, 20, 32, 0.92);
  --ivy-surface-elevated: rgba(20, 26, 40, 0.88);
  --ivy-border-subtle: rgba(255, 255, 255, 0.06);
  --ivy-border: rgba(255, 255, 255, 0.10);
  --ivy-border-strong: rgba(255, 255, 255, 0.18);
  
  /* Typography */
  --ivy-text-primary: rgba(255, 255, 255, 0.96);
  --ivy-text-secondary: rgba(255, 255, 255, 0.72);
  --ivy-text-tertiary: rgba(255, 255, 255, 0.52);
  
  /* Elevation System */
  --ivy-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.12);
  --ivy-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.18);
  --ivy-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.28);
  --ivy-shadow-xl: 0 28px 90px rgba(0, 0, 0, 0.45);
  --ivy-shadow-card: 0 32px 120px rgba(0, 0, 0, 0.60), 
                      0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  
  /* Glow Effects */
  --ivy-glow-accent: 0 0 40px var(--ivy-accent-glow);
  --ivy-glow-strong: 0 0 60px var(--ivy-accent-glow), 
                      0 0 20px var(--ivy-accent-glow);
  
  /* Spacing Scale */
  --ivy-space-xs: 8px;
  --ivy-space-sm: 12px;
  --ivy-space-md: 20px;
  --ivy-space-lg: 32px;
  --ivy-space-xl: 48px;
  
  /* Border Radius */
  --ivy-radius-sm: 12px;
  --ivy-radius-md: 18px;
  --ivy-radius-lg: 24px;
  --ivy-radius-xl: 32px;
  
  /* Timing Functions */
  --ivy-ease-smooth: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ivy-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ivy-ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* Light Mode Override */
.ivy-wz[data-theme="light"],
.ivy-wz[data-theme="clean-light"] {
  --ivy-void: #F8F9FB;
  --ivy-surface-deep: rgba(255, 255, 255, 0.98);
  --ivy-surface: rgba(255, 255, 255, 0.95);
  --ivy-surface-elevated: rgba(255, 255, 255, 0.90);
  --ivy-border-subtle: rgba(13, 18, 32, 0.06);
  --ivy-border: rgba(13, 18, 32, 0.12);
  --ivy-border-strong: rgba(13, 18, 32, 0.20);
  --ivy-text-primary: rgba(13, 18, 32, 0.96);
  --ivy-text-secondary: rgba(13, 18, 32, 0.68);
  --ivy-text-tertiary: rgba(13, 18, 32, 0.48);
  --ivy-shadow-card: 0 28px 100px rgba(0, 0, 0, 0.12), 
                      0 0 0 1px rgba(13, 18, 32, 0.08);
}

/*
 * Nebula Dark preset overrides
 *
 * To achieve a cohesive SaaS look in the premium UI, we override several
 * parameters when the "Nebula Dark" preset is selected. These overrides
 * tighten the grid to two columns, expand plan images to full width, and
 * adopt a purple accent colour defined in the admin (see accent colour
 * input). The goal is to prevent cramped plan cards and ensure that the
 * recommended ribbon and plan names never collide. These overrides only
 * apply when the data-preset attribute on the wizard root is set to
 * "nebula_dark" so other presets remain unaffected.
 */
.ivy-wz[data-preset="nebula_dark"] {
  /* Replace the default neon green accent with the purple accent from
     the Nebula Dark theme. The RGBA glow values are recalculated
     accordingly. */
  --ivy-accent: #8B5CF6;
  --ivy-accent-glow: rgba(139, 92, 246, 0.35);
}

/* Plan grid: limit to two columns on wider screens to give each plan
   sufficient width. Without this the three-column layout causes
   headings and badges to wrap awkwardly. */
.ivy-wz[data-preset="nebula_dark"] .ivy-wz__plans {
  grid-template-columns: 1fr;
}
@media (min-width: 560px) {
  .ivy-wz[data-preset="nebula_dark"] .ivy-wz__plans {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 900px) {
  .ivy-wz[data-preset="nebula_dark"] .ivy-wz__plans {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Plan card adjustments: use column layout with a large image on top.
   The top padding remains consistent but we remove the extra space
   reserved for the ribbon since it is positioned via absolute
   positioning. */
.ivy-wz[data-preset="nebula_dark"] .ivy-wz__plan {
  padding-top: var(--ivy-space-md);
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Full‑width plan image with a 5:3 aspect ratio. When no product
   image exists, the gradient background ensures a subtle cohesive
   appearance. */
.ivy-wz[data-preset="nebula_dark"] .ivy-wz__planImg {
  width: 100%;
  height: 0;
  padding-bottom: 60%;
  margin-right: 0;
  margin-bottom: var(--ivy-space-md);
  border-radius: var(--ivy-radius-md);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
}
.ivy-wz[data-preset="nebula_dark"] .ivy-wz__planImg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Ensure the plan info container stretches to fill the remaining
   vertical space and stacks its contents vertically. */
.ivy-wz[data-preset="nebula_dark"] .ivy-wz__planInfo {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ========================================
   TYPOGRAPHY - Premium Font Loading
======================================== */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

.ivy-wz {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.ivy-wz__brandname,
.ivy-wz__title,
.ivy-wz__planName {
  font-family: 'Sora', -apple-system, sans-serif;
  font-weight: 800;
  letter-spacing: -0.03em;
}

/* ========================================
   HERO SECTION - Full Immersion
======================================== */
.ivy-wz {
  position: relative;
  width: 100%;
  min-height: var(--ivy-wz-hero-height, 100vh);
  background: var(--ivy-void);
  overflow: hidden;
  isolation: isolate;
}

/* Animated Gradient Background */
.ivy-wz__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: 
    radial-gradient(circle at 20% 20%, rgba(124, 255, 107, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(56, 189, 248, 0.06) 0%, transparent 50%),
    var(--ivy-void);
  background-size: cover;
  background-position: center;
}

.ivy-wz__bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    linear-gradient(135deg, 
      transparent 0%, 
      rgba(124, 255, 107, 0.03) 25%, 
      transparent 50%, 
      rgba(167, 139, 250, 0.03) 75%, 
      transparent 100%
    );
  animation: gradientShift 20s ease-in-out infinite;
}

@keyframes gradientShift {
  0%, 100% { opacity: 0.5; transform: translate(0, 0) scale(1); }
  50% { opacity: 1; transform: translate(10px, 10px) scale(1.05); }
}

/* Overlay with Grain Texture */
.ivy-wz__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: 
    url('data:image/svg+xml,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noise)" opacity="0.05"/></svg>'),
    radial-gradient(ellipse at 50% -20%, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
  opacity: 0.85;
  mix-blend-mode: multiply;
}

/* ========================================
   LAYOUT - Perfect Centering & Flow
======================================== */
.ivy-wz__inner {
  position: relative;
  z-index: 2;
  min-height: var(--ivy-wz-hero-height, 100vh);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ivy-space-xl);
  padding: var(--ivy-space-xl) var(--ivy-space-md);
}

/* Layout Variations */
.ivy-wz[data-layout="split-left"] .ivy-wz__inner {
  justify-content: flex-start;
  padding-left: max(5vw, var(--ivy-space-lg));
}

.ivy-wz[data-layout="split-right"] .ivy-wz__inner {
  justify-content: flex-end;
  flex-direction: row-reverse;
  padding-right: max(5vw, var(--ivy-space-lg));
}

.ivy-wz[data-layout="card-only"] .ivy-wz__ivy {
  display: none;
}

/* ========================================
   CARD - The Star of the Show
======================================== */
.ivy-wz__card {
  position: relative;
  width: min(680px, 100%);
  max-height: min(85vh, 900px);
  border-radius: var(--ivy-radius-xl);
  background: var(--ivy-surface);
  border: 1px solid var(--ivy-border);
  box-shadow: var(--ivy-shadow-card);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  
  display: flex;
  flex-direction: column;
  overflow: hidden;
  
  /* Entry Animation */
  animation: cardEnter 0.8s var(--ivy-ease-smooth) backwards;
}

@keyframes cardEnter {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Glass Shimmer Effect */
.ivy-wz__card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.12) 0%,
    transparent 20%,
    transparent 80%,
    rgba(255, 255, 255, 0.08) 100%
  );
  pointer-events: none;
  z-index: 10;
}

/* Accent Glow on Hover */
.ivy-wz__card::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--ivy-accent), #38BDF8, #A78BFA);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.4s var(--ivy-ease-smooth);
}

.ivy-wz__card:hover::after {
  opacity: 0.15;
  filter: blur(20px);
}

/* ========================================
   CARD STRUCTURE - Top, Body, Bottom
======================================== */
.ivy-wz__top {
  padding: var(--ivy-space-md) var(--ivy-space-md) var(--ivy-space-sm);
  border-bottom: 1px solid var(--ivy-border-subtle);
  background: linear-gradient(180deg, 
    rgba(255, 255, 255, 0.02) 0%, 
    transparent 100%
  );
}

.ivy-wz__body {
  flex: 1;
  padding: var(--ivy-space-lg) var(--ivy-space-md);
  overflow-y: auto;
  overflow-x: hidden;
  
  /* Custom Scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--ivy-border) transparent;
}

.ivy-wz__body::-webkit-scrollbar {
  width: 6px;
}

.ivy-wz__body::-webkit-scrollbar-track {
  background: transparent;
}

.ivy-wz__body::-webkit-scrollbar-thumb {
  background: var(--ivy-border);
  border-radius: 3px;
}

.ivy-wz__body::-webkit-scrollbar-thumb:hover {
  background: var(--ivy-border-strong);
}

.ivy-wz__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ivy-space-sm);
  padding: var(--ivy-space-md);
  border-top: 1px solid var(--ivy-border-subtle);
  background: linear-gradient(180deg, 
    transparent 0%, 
    rgba(0, 0, 0, 0.05) 100%
  );
}

/* ========================================
   BRAND HEADER - Trust Signals
======================================== */
.ivy-wz__brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Animated Status Dot */
.ivy-wz__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ivy-accent);
  box-shadow: 
    0 0 0 0 var(--ivy-accent-glow),
    0 0 0 8px rgba(124, 255, 107, 0.08);
  position: relative;
  animation: pulseGlow 2.5s ease-in-out infinite;
}

@keyframes pulseGlow {
  0%, 100% {
    transform: scale(1);
    box-shadow: 
      0 0 0 0 var(--ivy-accent-glow),
      0 0 0 8px rgba(124, 255, 107, 0.08);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 
      0 0 12px var(--ivy-accent-glow),
      0 0 0 12px rgba(124, 255, 107, 0.06);
  }
}

.ivy-wz__brandtxt {
  flex: 1;
}

.ivy-wz__brandname {
  font-size: 16px;
  font-weight: 800;
  color: var(--ivy-text-primary);
  line-height: 1.2;
}

.ivy-wz__tagline {
  font-size: 13px;
  color: var(--ivy-text-tertiary);
  margin-top: 2px;
  font-weight: 500;
}

/* ========================================
   PROGRESS BAR - Gamification Element
======================================== */
.ivy-wz__progress {
  margin-top: var(--ivy-space-sm);
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--ivy-border-subtle);
  overflow: hidden;
  position: relative;
}

/* Shimmer Background */
.ivy-wz__progress::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.05) 50%,
    transparent 100%
  );
  animation: shimmer 2s linear infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.ivy-wz__progressbar {
  height: 100%;
  width: 0%;
  background: linear-gradient(
    90deg,
    var(--ivy-accent) 0%,
    #38BDF8 50%,
    var(--ivy-accent) 100%
  );
  background-size: 200% 100%;
  border-radius: 999px;
  box-shadow: 
    0 0 16px var(--ivy-accent-glow),
    0 2px 8px rgba(0, 0, 0, 0.2) inset;
  transition: width 0.6s var(--ivy-ease-smooth);
  position: relative;
  animation: progressGradient 3s linear infinite;
}

@keyframes progressGradient {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ========================================
   CONTENT - Title & Help Text
======================================== */
.ivy-wz__title {
  margin: 0 0 var(--ivy-space-xs);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  line-height: 1.15;
  color: var(--ivy-text-primary);
  letter-spacing: -0.03em;
  
  /* Text Gradient Effect */
  background: linear-gradient(
    135deg,
    var(--ivy-text-primary) 0%,
    rgba(255, 255, 255, 0.85) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  
  animation: titleSlideIn 0.5s var(--ivy-ease-smooth) 0.1s backwards;
}

@keyframes titleSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ivy-wz__help {
  margin: 0 0 var(--ivy-space-lg);
  color: var(--ivy-text-secondary);
  font-size: 15px;
  line-height: 1.6;
  font-weight: 500;
  animation: titleSlideIn 0.5s var(--ivy-ease-smooth) 0.2s backwards;
}

.ivy-wz__error {
  margin-top: var(--ivy-space-md);
  padding: var(--ivy-space-sm) var(--ivy-space-md);
  border-radius: var(--ivy-radius-md);
  border: 1px solid rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.12);
  color: #FCA5A5;
  font-size: 14px;
  font-weight: 600;
  display: none;
  animation: errorShake 0.4s var(--ivy-ease-smooth);
}

@keyframes errorShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  75% { transform: translateX(10px); }
}

/* ========================================
   CHOICE BUTTONS - Premium Selection
======================================== */
.ivy-wz__choices {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ivy-space-sm);
  animation: fadeSlideUp 0.5s var(--ivy-ease-smooth) 0.3s backwards;
}

@media (min-width: 560px) {
  .ivy-wz__choices {
    grid-template-columns: 1fr 1fr;
  }
}

.ivy-wz__choice {
  position: relative;
  padding: var(--ivy-space-md);
  border-radius: var(--ivy-radius-lg);
  border: 2px solid var(--ivy-border);
  background: 
    linear-gradient(135deg, 
      rgba(255, 255, 255, 0.03) 0%, 
      rgba(255, 255, 255, 0.01) 100%
    );
  color: var(--ivy-text-primary);
  cursor: pointer;
  transition: all 0.3s var(--ivy-ease-smooth);
  text-align: left;
  overflow: hidden;
}

/* Hover State - Magnetic Effect */
.ivy-wz__choice:hover {
  transform: translateY(-4px);
  border-color: var(--ivy-border-strong);
  background: 
    linear-gradient(135deg, 
      rgba(255, 255, 255, 0.06) 0%, 
      rgba(255, 255, 255, 0.02) 100%
    );
  box-shadow: 
    var(--ivy-shadow-md),
    0 0 0 4px rgba(255, 255, 255, 0.03);
}

/* Selected State - Accent Glow */
.ivy-wz__choice.is-selected {
  border-color: var(--ivy-accent);
  background: 
    radial-gradient(circle at 50% 0%, 
      rgba(124, 255, 107, 0.15) 0%, 
      rgba(124, 255, 107, 0.05) 50%,
      transparent 100%
    ),
    linear-gradient(135deg, 
      rgba(255, 255, 255, 0.06) 0%, 
      rgba(255, 255, 255, 0.02) 100%
    );
  box-shadow: 
    0 0 0 4px rgba(124, 255, 107, 0.12),
    0 0 32px rgba(124, 255, 107, 0.25),
    var(--ivy-shadow-lg);
  transform: translateY(-2px);
}

/* Checkmark Icon */
.ivy-wz__choice.is-selected::after {
  content: '✓';
  position: absolute;
  top: 12px;
  right: 12px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ivy-accent);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 4px 12px rgba(124, 255, 107, 0.4);
  animation: checkPop 0.4s var(--ivy-ease-bounce);
}

@keyframes checkPop {
  0% {
    transform: scale(0) rotate(-180deg);
    opacity: 0;
  }
  60% {
    transform: scale(1.15) rotate(10deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

.ivy-wz__choiceTitle {
  font-weight: 700;
  font-size: 16px;
  color: var(--ivy-text-primary);
}

/* ========================================
   MULTI-SELECT CHIPS - Playful Tags
======================================== */
.ivy-wz__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  animation: fadeSlideUp 0.5s var(--ivy-ease-smooth) 0.3s backwards;
}

.ivy-wz__chip {
  padding: 11px 18px;
  border-radius: 999px;
  border: 2px solid var(--ivy-border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--ivy-text-primary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s var(--ivy-ease-smooth);
  position: relative;
}

.ivy-wz__chip:hover {
  transform: translateY(-2px) scale(1.05);
  border-color: var(--ivy-border-strong);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.ivy-wz__chip.is-selected {
  border-color: var(--ivy-accent);
  background: rgba(124, 255, 107, 0.15);
  color: var(--ivy-accent);
  box-shadow: 
    0 0 0 3px rgba(124, 255, 107, 0.1),
    0 4px 16px rgba(124, 255, 107, 0.3);
  transform: translateY(-2px);
}

/* ========================================
   TEXT INPUTS - Clean & Focused
======================================== */
.ivy-wz__field {
  position: relative;
  animation: fadeSlideUp 0.5s var(--ivy-ease-smooth) 0.3s backwards;
}

.ivy-wz__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ivy-text-secondary);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.ivy-wz__input,
.ivy-wz__textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--ivy-radius-md);
  border: 2px solid var(--ivy-border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--ivy-text-primary);
  font-size: 15px;
  font-weight: 500;
  outline: none;
  transition: all 0.3s var(--ivy-ease-smooth);
}

.ivy-wz__textarea {
  min-height: 120px;
  resize: vertical;
  font-family: inherit;
  line-height: 1.6;
}

.ivy-wz__input::placeholder,
.ivy-wz__textarea::placeholder {
  color: var(--ivy-text-tertiary);
}

.ivy-wz__input:focus,
.ivy-wz__textarea:focus {
  border-color: var(--ivy-accent);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 
    0 0 0 4px rgba(124, 255, 107, 0.12),
    0 0 20px rgba(124, 255, 107, 0.15);
  transform: translateY(-1px);
}

/* AI Enhance Button */
.ivy-wz__ai {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  padding: 8px 14px;
  border-radius: var(--ivy-radius-sm);
  border: 1px solid var(--ivy-border);
  background: rgba(167, 139, 250, 0.1);
  color: #A78BFA;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s var(--ivy-ease-smooth);
  white-space: nowrap;
}

.ivy-wz__ai:hover {
  transform: translateY(-50%) scale(1.05);
  background: rgba(167, 139, 250, 0.18);
  box-shadow: 0 0 20px rgba(167, 139, 250, 0.3);
}

/* ========================================
   PLAN CARDS - Conversion Hero
======================================== */
.ivy-wz__plans {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ivy-space-md);
  margin-top: var(--ivy-space-sm);
  animation: fadeSlideUp 0.5s var(--ivy-ease-smooth) 0.3s backwards;
}

@media (min-width: 560px) {
  .ivy-wz__plans {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .ivy-wz__plans {
    grid-template-columns: repeat(3, 1fr);
  }
}

/*
 * Core styling for each plan card. Position the card relative so
 * that utility elements (like the recommended ribbon) can be
 * absolutely positioned within the card bounds. Increase the
 * top padding to create space for any ribbon so that it doesn't
 * overlap the content on smaller viewports. Overflow is hidden
 * to clip the ribbon shadow cleanly.
 */
.ivy-wz__plan {
  position: relative;
  /* Extra top padding leaves room for the recommended ribbon. Without
     this the ribbon can visually collide with the card contents on
     smaller screens or when long product names wrap to the next
     line. */
  padding: calc(var(--ivy-space-md) + 20px) var(--ivy-space-md) var(--ivy-space-md);
  border-radius: var(--ivy-radius-lg);
  border: 2px solid var(--ivy-border);
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  transition: all 0.4s var(--ivy-ease-smooth);
  text-align: left;
  overflow: hidden;
}

/* Plan Hover - Lift Effect */
.ivy-wz__plan:hover {
  transform: translateY(-8px);
  border-color: var(--ivy-border-strong);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 
    var(--ivy-shadow-lg),
    0 0 0 4px rgba(255, 255, 255, 0.03);
}

/* Selected Plan - Maximum Impact */
.ivy-wz__plan.is-selected {
  border-color: var(--ivy-accent);
  background: 
    radial-gradient(circle at 50% 0%, 
      rgba(124, 255, 107, 0.18) 0%, 
      rgba(124, 255, 107, 0.06) 40%,
      transparent 100%
    ),
    rgba(255, 255, 255, 0.04);
  box-shadow: 
    0 0 0 4px rgba(124, 255, 107, 0.15),
    0 0 40px rgba(124, 255, 107, 0.35),
    var(--ivy-shadow-xl);
  transform: translateY(-4px) scale(1.02);
}

/* Recommended Ribbon */
/*
 * Recommended plan ribbon. Position it in the upper left corner to
 * avoid covering the plan content. A small horizontal offset keeps
 * it from sitting flush with the border. Disable pointer events so
 * that clicking on the ribbon doesn't interfere with selecting
 * the plan card. The pulse animation still applies for visual
 * emphasis.
 */
.ivy-wz__ribbon {
  position: absolute;
  top: 8px;
  left: 12px;
  right: auto;
  padding: 6px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--ivy-accent), #38BDF8);
  color: #000;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow:
    0 4px 12px rgba(124, 255, 107, 0.4),
    0 0 0 3px rgba(124, 255, 107, 0.15);
  animation: ribbonPulse 2s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}

@keyframes ribbonPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 
      0 4px 12px rgba(124, 255, 107, 0.4),
      0 0 0 3px rgba(124, 255, 107, 0.15);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 
      0 6px 16px rgba(124, 255, 107, 0.5),
      0 0 0 5px rgba(124, 255, 107, 0.2);
  }
}

.ivy-wz__planHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ivy-space-sm);
  margin-bottom: var(--ivy-space-sm);
}

.ivy-wz__planName {
  font-size: 18px;
  font-weight: 800;
  color: var(--ivy-text-primary);
  letter-spacing: -0.02em;
}

.ivy-wz__planSub {
  font-size: 13px;
  color: var(--ivy-text-tertiary);
  margin-top: 4px;
  font-weight: 600;
}

.ivy-wz__planPrice {
  font-size: 16px;
  font-weight: 900;
  color: var(--ivy-accent);
  white-space: nowrap;
  letter-spacing: -0.02em;
}

.ivy-wz__planPrice span {
  font-size: 12px;
  opacity: 0.7;
  font-weight: 700;
}

/* Plan Features List */
.ivy-wz__planList {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.ivy-wz__planList li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--ivy-text-secondary);
  font-size: 14px;
  line-height: 1.5;
}

.ivy-wz__planList li::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ivy-accent);
  box-shadow: 
    0 0 0 4px rgba(124, 255, 107, 0.12),
    0 0 12px rgba(124, 255, 107, 0.25);
  flex-shrink: 0;
  margin-top: 5px;
}

/* Plan image wrapper. Each plan card may include a product image pulled
   from WooCommerce. This wrapper ensures a consistent size and spacing,
   provides a subtle backdrop and clips overflowing content. When no image
   is available the placeholder variant applies a neutral surface colour. */
.ivy-wz__planImg {
  width: 64px;
  height: 64px;
  margin-right: var(--ivy-space-md);
  border-radius: var(--ivy-radius-md);
  overflow: hidden;
  background: rgba(255,255,255,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ivy-wz__planImg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ivy-wz__planImg--placeholder {
  /* Provide a subtle neutral backdrop when no product image exists */
  background: rgba(255,255,255,0.04);
}

/*
 * When the wizard reaches the plan selection step we want the card to
 * expand naturally with its content instead of forcing a scroll bar.
 * Removing the max-height and overflow properties on the card body
 * ensures all plan cards are visible at once. Only apply these
 * overrides during the plan step so other steps retain their compact
 * behaviour.
 */
.ivy-wz[data-step-type="plan"] .ivy-wz__card {
  max-height: none;
}
.ivy-wz[data-step-type="plan"] .ivy-wz__body {
  overflow: visible;
}

/* Layout for plan details. After adding an image the content needs
   to sit alongside it without collapsing. Flexbox aligns the
   information to the top and provides consistent spacing. */
.ivy-wz__planInfo {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Optional description text beneath the plan header. The description
   is pulled from the WooCommerce product short description via the
   plan_products data. Use a softer colour and smaller font size to
   differentiate it from the primary heading but maintain readability. */
.ivy-wz__planDesc {
  font-size: 14px;
  line-height: 1.4;
  margin: 6px 0;
  color: var(--ivy-text-secondary);
}

.ivy-wz__plan {
  display: flex;
  align-items: flex-start;
}

.ivy-wz__plan.is-selected .ivy-wz__planList li {
  color: var(--ivy-text-primary);
  font-weight: 600;
}

/* ========================================
   BUTTONS - Call to Action
======================================== */
.ivy-wz__btn {
  padding: 12px 24px;
  border-radius: var(--ivy-radius-md);
  font-size: 15px;
  font-weight: 700;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.3s var(--ivy-ease-smooth);
  position: relative;
  overflow: hidden;

  /* Center button labels horizontally and vertically. By using
     inline‑flex and aligning its children, text stays perfectly
     centred regardless of line height or inner elements such as
     icons. Without this the legacy buttons rendered off‑centre on
     some devices. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ivy-wz__btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

/* ========================================
   START HERO (Landing) - Full-width Immersion
   The [ivy_wizard_start] shortcode displays a landing hero used
   before the main wizard. This layout mirrors the premium card but
   spans the entire viewport and features two columns on larger
   screens. On mobile the illustration stacks above the content.
============================================================== */
.ivy-wz-start {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  min-height: var(--ivy-wz-hero-height, 760px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ivy-space-xl) var(--ivy-space-md);
  overflow: hidden;
  color: var(--ivy-text-primary);
  /*
   * Replace the procedural star field background with a calm dark gradient.
   * This avoids the “Christmas lights” effect and improves legibility of
   * the hero content. The gradient transitions subtly from a near-black
   * hue to a slightly lighter shade to create depth without visual noise.
   */
  background: linear-gradient(180deg, #0e101a 0%, #161827 100%);
  isolation: isolate;
}

.ivy-wz-start__bg,
.ivy-wz-start__overlay {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  z-index: 0;
}
.ivy-wz-start__overlay {
  /*
   * Soften the overlay to allow more of the background gradient through.
   * Lower opacity improves readability of white and light green text.
   */
  background: rgba(0, 0, 0, 0.6);
  opacity: var(--ivy-wz-overlay, 0.5);
  z-index: 1;
}

.ivy-wz-start__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ivy-space-xl);
  text-align: center;
}

/* Two column layout on desktop */
.ivy-wz-start__cols {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ivy-space-xl);
  width: 100%;
  padding: var(--ivy-space-lg);
  box-sizing: border-box;
}
@media (min-width: 880px) {
  .ivy-wz-start__cols {
    flex-direction: row;
    align-items: center;
  }
}

.ivy-wz-start__left,
.ivy-wz-start__right {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
}
.ivy-wz-start__left {
  padding: var(--ivy-space-lg);
}
.ivy-wz-start__right {
  padding: var(--ivy-space-lg);
  text-align: center;
}
@media (min-width: 880px) {
  .ivy-wz-start__right {
    align-items: flex-start;
    text-align: left;
  }
  .ivy-wz-start__headline,
  .ivy-wz-start__subhead {
    text-align: left;
  }
}

.ivy-wz-start__illustration {
  width: 100%;
  max-width: 520px;
  height: auto;
  border-radius: var(--ivy-radius-lg);
  object-fit: contain;
  display: block;
}
.ivy-wz-start__left video,
.ivy-wz-start__left img {
  width: 100%;
  height: auto;
  border-radius: var(--ivy-radius-lg);
}

.ivy-wz-start__headline {
  margin: 0 0 var(--ivy-space-sm);
  font-family: 'Sora', -apple-system, sans-serif;
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.ivy-wz-start__subhead {
  margin: 0 0 var(--ivy-space-md);
  font-size: 18px;
  line-height: 1.55;
  color: var(--ivy-text-secondary);
  max-width: 640px;
}

.ivy-wz-start__form {
  display: flex;
  flex-direction: column;
  gap: var(--ivy-space-sm);
  align-items: stretch;
  width: 100%;
  max-width: 640px;
  margin-bottom: var(--ivy-space-sm);
}
@media (min-width: 560px) {
  .ivy-wz-start__form {
    flex-direction: row;
  }
}
.ivy-wz-start__input {
  flex: 1;
  border-radius: var(--ivy-radius-md);
  border: 2px solid var(--ivy-border);
  background: rgba(255,255,255,0.05);
  color: var(--ivy-text-primary);
  padding: 14px 16px;
  font-size: 16px;
  outline: none;
  min-width: 0;
  transition: all 0.3s var(--ivy-ease-smooth);
}
.ivy-wz-start__input::placeholder {
  color: var(--ivy-text-tertiary);
}
.ivy-wz-start__input:focus {
  border-color: var(--ivy-accent);
  background: rgba(255,255,255,0.07);
  box-shadow: 0 0 0 4px rgba(124,255,107,0.15), 0 0 20px rgba(124,255,107,0.25);
}

.ivy-wz-start__btn {
  /* Increase size of CTA on the hero to make it more inviting. The
     additional padding and larger font-size help the button stand out
     as the primary action. White-space is kept to prevent wrapping.
     Rounder corners match the plan cards. */
  white-space: nowrap;
  font-size: 18px;
  padding: 16px 28px;
  border-radius: var(--ivy-radius-lg);
}
.ivy-wz-start__note {
  margin-top: var(--ivy-space-sm);
  font-size: 14px;
  color: var(--ivy-text-secondary);
}
.ivy-wz-start__suggestions {
  margin-top: var(--ivy-space-sm);
  display: flex;
  flex-wrap: wrap;
  gap: var(--ivy-space-sm);
  justify-content: center;
}
.ivy-wz-start__cta {
  min-width: 260px;
  margin-top: var(--ivy-space-md);
}
.ivy-wz-start__cta-note {
  margin-top: var(--ivy-space-sm);
  font-size: 12px;
  color: var(--ivy-text-tertiary);
}

.ivy-wz__btn:active::before {
  width: 300px;
  height: 300px;
}

/* Primary Button - High Conversion */
.ivy-wz__btn--primary {
  background: linear-gradient(135deg, var(--ivy-accent), #38BDF8);
  color: #000;
  box-shadow: 
    0 8px 24px rgba(124, 255, 107, 0.35),
    0 0 0 1px rgba(0, 0, 0, 0.1) inset;
}

.ivy-wz__btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 12px 32px rgba(124, 255, 107, 0.45),
    0 0 40px rgba(124, 255, 107, 0.25),
    0 0 0 1px rgba(0, 0, 0, 0.1) inset;
}

.ivy-wz__btn--primary:active {
  transform: translateY(0);
}

.ivy-wz__btn--primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Ghost Button - Secondary */
.ivy-wz__btn--ghost {
  background: transparent;
  border-color: var(--ivy-border);
  color: var(--ivy-text-secondary);
}

.ivy-wz__btn--ghost:hover {
  border-color: var(--ivy-border-strong);
  background: rgba(255, 255, 255, 0.05);
  color: var(--ivy-text-primary);
  transform: translateY(-1px);
}

/* Checkout CTA - The Money Shot */
.ivy-wz__next.is-checkout {
  min-width: 320px;
  padding: 16px 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: linear-gradient(135deg, var(--ivy-accent) 0%, #38BDF8 100%);
  box-shadow: 
    0 12px 40px rgba(124, 255, 107, 0.45),
    0 0 60px rgba(124, 255, 107, 0.25);
  animation: ctaPulse 2s ease-in-out infinite;
}

@keyframes ctaPulse {
  0%, 100% {
    box-shadow: 
      0 12px 40px rgba(124, 255, 107, 0.45),
      0 0 60px rgba(124, 255, 107, 0.25);
  }
  50% {
    box-shadow: 
      0 16px 50px rgba(124, 255, 107, 0.55),
      0 0 80px rgba(124, 255, 107, 0.35);
  }
}

.ivy-wz__ctaPrice {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.03em;
}

.ivy-wz__ctaLabel {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.95;
}

/* ========================================
   IVY CHARACTER PANEL - Brand Mascot
======================================== */
.ivy-wz__ivy {
  width: min(360px, 35vw);
  animation: ivySlideIn 0.8s var(--ivy-ease-smooth) 0.2s backwards;
}

@keyframes ivySlideIn {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.ivy-wz__ivyFrame {
  position: relative;
  aspect-ratio: 3/4;
  border-radius: var(--ivy-radius-xl);
  border: 1px solid var(--ivy-border);
  background: 
    radial-gradient(circle at 30% 20%, 
      rgba(124, 255, 107, 0.12) 0%, 
      transparent 60%
    ),
    rgba(255, 255, 255, 0.02);
  box-shadow: var(--ivy-shadow-card);
  backdrop-filter: blur(12px);
  overflow: hidden;
}

.ivy-wz__ivyMedia {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ivy-wz__ivyPlaceholder {
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 50% 50%, 
      rgba(124, 255, 107, 0.15) 0%, 
      transparent 70%
    ),
    rgba(255, 255, 255, 0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 80px;
  opacity: 0.3;
}

.ivy-wz__hud {
  margin-top: var(--ivy-space-md);
  padding: var(--ivy-space-sm) var(--ivy-space-md);
  border-radius: var(--ivy-radius-md);
  background: var(--ivy-surface);
  border: 1px solid var(--ivy-border);
  backdrop-filter: blur(12px);
}

.ivy-wz__hudName {
  font-size: 14px;
  font-weight: 700;
  color: var(--ivy-text-primary);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ivy-wz__hudSub {
  font-size: 12px;
  color: var(--ivy-text-tertiary);
  margin-top: 2px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ========================================
   TOAST NOTIFICATIONS - Gamification
======================================== */
.ivy-wz__toast {
  position: fixed;
  top: var(--ivy-space-lg);
  right: var(--ivy-space-lg);
  z-index: 1000;
  pointer-events: none;
}

.ivy-wz__toastItem {
  padding: var(--ivy-space-sm) var(--ivy-space-md);
  margin-bottom: var(--ivy-space-xs);
  border-radius: var(--ivy-radius-md);
  background: var(--ivy-surface-deep);
  border: 1px solid var(--ivy-accent);
  color: var(--ivy-accent);
  font-size: 14px;
  font-weight: 700;
  box-shadow: 
    0 0 0 4px rgba(124, 255, 107, 0.12),
    var(--ivy-shadow-lg),
    0 0 40px rgba(124, 255, 107, 0.3);
  animation: toastSlide 1.2s var(--ivy-ease-smooth);
}

@keyframes toastSlide {
  0% {
    opacity: 0;
    transform: translateX(100px) scale(0.9);
  }
  20% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  80% {
    opacity: 1;
    transform: translateY(-8px);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}

/* ========================================
   FLOATING TILES - Ambient Animation
======================================== */
.ivy-wz__tiles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.ivy-wz__tile {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: var(--ivy-radius-lg);
  opacity: 0;
  transition: all 1.2s var(--ivy-ease-smooth);
  filter: blur(1px) brightness(0.9);
}

.ivy-wz__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  border: 1px solid var(--ivy-border-subtle);
  box-shadow: var(--ivy-shadow-lg);
}

.ivy-wz__tile.is-hot {
  filter: blur(0px) brightness(1.1);
  box-shadow: 
    0 0 40px rgba(124, 255, 107, 0.2),
    var(--ivy-shadow-xl);
}

/* ========================================
   LOADING STATES
======================================== */
.ivy-wz__prep {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ivy-space-lg);
  padding: var(--ivy-space-xl) 0;
  text-align: center;
}

.ivy-wz__spinner {
  width: 60px;
  height: 60px;
  border: 4px solid var(--ivy-border);
  border-top-color: var(--ivy-accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.ivy-wz__checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--ivy-space-sm);
  text-align: left;
  min-width: 300px;
}

.ivy-wz__checklist li {
  padding: var(--ivy-space-sm) var(--ivy-space-md);
  border-radius: var(--ivy-radius-sm);
  background: rgba(255, 255, 255, 0.03);
  color: var(--ivy-text-tertiary);
  font-size: 14px;
  font-weight: 600;
  border-left: 3px solid var(--ivy-border);
  transition: all 0.4s var(--ivy-ease-smooth);
}

.ivy-wz__checklist li.on {
  background: rgba(124, 255, 107, 0.1);
  color: var(--ivy-accent);
  border-left-color: var(--ivy-accent);
  box-shadow: 0 0 20px rgba(124, 255, 107, 0.15);
}

/* ========================================
   RESPONSIVE - Mobile First
======================================== */
@media (max-width: 980px) {
  .ivy-wz__inner {
    flex-direction: column;
    gap: var(--ivy-space-lg);
    padding: var(--ivy-space-lg) var(--ivy-space-md);
  }
  
  .ivy-wz__ivy {
    width: min(400px, 90vw);
  }
  
  .ivy-wz__card {
    width: min(600px, 100%);
  }
  
  .ivy-wz__plans {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 560px) {
  .ivy-wz__choices {
    grid-template-columns: 1fr !important;
  }
  
  .ivy-wz__title {
    font-size: clamp(24px, 6vw, 32px);
  }
  
  .ivy-wz__next.is-checkout {
    min-width: 100%;
    flex-direction: column;
    gap: 8px;
  }
  
  .ivy-wz__bottom {
    flex-direction: column;
    gap: var(--ivy-space-sm);
  }
  
  .ivy-wz__btn {
    width: 100%;
  }
}

/* ========================================
   REDUCED MOTION
======================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .ivy-wz__tile {
    display: none;
  }
}

/* ========================================
   UTILITY ANIMATIONS
======================================== */
@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========================================
   PRINT STYLES - Clean Output
======================================== */
@media print {
  .ivy-wz__bg,
  .ivy-wz__overlay,
  .ivy-wz__tiles,
  .ivy-wz__ivy,
  .ivy-wz__toast {
    display: none !important;
  }
  
  .ivy-wz__card {
    box-shadow: none;
    border: 1px solid #ccc;
  }
}

/* ========================================
   PRESET: OS BLACK (Neon Ivy)
   Applied when data-preset="os_black" on the root.
   - Crisp OS-black surfaces
   - No animated / glossy gradients
   - Modern button feel (no ripple, no pulsing)
======================================== */

.ivy-wz[data-preset="os_black"] {
  --ivy-void: #05060A;
  --ivy-surface-deep: rgba(10, 12, 18, 0.94);
  --ivy-surface: rgba(12, 14, 20, 0.92);
  --ivy-surface-elevated: rgba(16, 18, 26, 0.90);
  --ivy-border-subtle: rgba(255, 255, 255, 0.05);
  --ivy-border: rgba(255, 255, 255, 0.10);
  --ivy-border-strong: rgba(255, 255, 255, 0.16);
}

/* Background: solid void + subtle vignette (no animated gradients) */
.ivy-wz[data-preset="os_black"] .ivy-wz__bg {
  background: var(--ivy-void) !important;
}

.ivy-wz[data-preset="os_black"] .ivy-wz__bg::before {
  content: none !important;
  animation: none !important;
}

.ivy-wz[data-preset="os_black"] .ivy-wz__overlay {
  background:
    url('data:image/svg+xml,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noise)" opacity="0.06"/></svg>'),
    rgba(0,0,0,0.78);
  opacity: 0.92;
}

/* Card: crisper edge, less "gloss" */
.ivy-wz[data-preset="os_black"] .ivy-wz__card {
  background: rgba(10, 12, 18, 0.90);
  border: 1px solid var(--ivy-border);
  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}

/* Buttons: solid, crisp, no gradients, no ripple */
.ivy-wz[data-preset="os_black"] .ivy-wz__btn {
  transition: background-color 160ms var(--ivy-ease-smooth),
              border-color 160ms var(--ivy-ease-smooth),
              box-shadow 160ms var(--ivy-ease-smooth),
              transform 160ms var(--ivy-ease-smooth);
}

.ivy-wz[data-preset="os_black"] .ivy-wz__btn::before {
  display: none !important;
}

.ivy-wz[data-preset="os_black"] .ivy-wz__btn--primary,
.ivy-wz[data-preset="os_black"] .ivy-wz__next.is-checkout {
  background: var(--ivy-accent) !important;
  color: #05060A !important;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.10) inset;
  animation: none !important;
}

.ivy-wz[data-preset="os_black"] .ivy-wz__btn--primary:hover,
.ivy-wz[data-preset="os_black"] .ivy-wz__next.is-checkout:hover {
  transform: translateY(-1px);
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.52),
    0 0 0 1px rgba(255, 255, 255, 0.12) inset,
    0 0 34px var(--ivy-accent-glow);
}

.ivy-wz[data-preset="os_black"] .ivy-wz__btn--ghost {
  background: rgba(255, 255, 255, 0.02);
  border-color: var(--ivy-border);
  color: var(--ivy-text-secondary);
}

.ivy-wz[data-preset="os_black"] .ivy-wz__btn--ghost:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--ivy-border-strong);
  color: var(--ivy-text-primary);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
}

/* Reduce "bouncy" feel across controls */
.ivy-wz[data-preset="os_black"] .ivy-wz__chip:hover,
.ivy-wz[data-preset="os_black"] .ivy-wz__choice:hover,
.ivy-wz[data-preset="os_black"] .ivy-wz__plan:hover {
  transform: translateY(-1px);
}

.ivy-wz[data-preset="os_black"] .ivy-wz__input:focus,
.ivy-wz[data-preset="os_black"] .ivy-wz__textarea:focus {
  transform: none;
}


/* === Ivy Wizard Pro v2.0.2 additions === */

/* Fix: Start hero should never be cut off on front page (theme headers/footers/admin bar) */
.ivy-wz-start{
  width: 100vw;
  max-width: 100vw;
  min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
  overflow: hidden;
}
.ivy-wz-start__inner{
  min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
}

/* Fix: button label centering (theme overrides) */
.ivy-wz__btn,
.ivy-wz__choice,
.ivy-wz__chip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
}

/* Plan cards: Image left large + bullets right */
.ivy-wz__plan{
  display:flex !important;
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
  width:100%;
}
.ivy-wz__planImg{
  width: 160px;
  height: 120px;
  margin-right: 0;
}
.ivy-wz__planImg img{
  width:100%;
  height:100%;
  object-fit: cover;
}
.ivy-wz__planInfo{
  flex:1;
  min-width: 0;
}
.ivy-wz__planList{
  margin-top: 10px;
}



/* v4 recommendation-first plan UI */
.ivy-wz__recommendHero .ivy-wz__plan--focus{width:100%;text-align:left;}
.ivy-wz__recommendAlt .ivy-wz__chips{display:flex;flex-wrap:wrap;gap:10px;}
.ivy-wz__recommendAlt .ivy-wz__chip{cursor:pointer;}
.ivy-wz__plan--focus .ivy-wz__ribbon{display:inline-block;margin-top:8px;}

/* v5 ux refresh */
.ivy-wz__inner{align-items:center;gap:32px;max-width:1440px;margin:0 auto;}
.ivy-wz__ivy{flex:0 0 clamp(260px,24vw,360px);align-self:center;}
.ivy-wz__ivyFrame{aspect-ratio:4/5;overflow:hidden;}
.ivy-wz__ivyMedia{width:100%;height:100%;object-fit:contain;display:block;}
.ivy-wz__card{width:min(920px,calc(100vw - 48px));max-width:min(920px,calc(100vw - 48px));}
.ivy-wz__body{padding-bottom:24px;}
.ivy-wz__planStage{display:grid;gap:18px;}
.ivy-wz__recommendHero2{background:rgba(255,255,255,.04);border:1px solid var(--ivy-border);border-radius:24px;padding:24px;box-shadow:var(--ivy-shadow-md);}
.ivy-wz__recommendHeader{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:18px;}
.ivy-wz__eyebrow{font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ivy-accent);font-weight:800;margin-bottom:8px;}
.ivy-wz__recommendName{font-size:clamp(1.6rem,2.4vw,2.2rem);line-height:1.05;margin:0 0 8px;color:var(--ivy-text-primary);}
.ivy-wz__recommendDesc{margin:0;color:var(--ivy-text-secondary);max-width:56ch;}
.ivy-wz__recommendPrice{font-size:2rem;font-weight:800;color:var(--ivy-text-primary);white-space:nowrap;}
.ivy-wz__recommendPrice span{font-size:1rem;color:var(--ivy-text-secondary);margin-left:2px;}
.ivy-wz__recommendBody{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.ivy-wz__miniTitle{font-size:.95rem;font-weight:800;color:var(--ivy-text-primary);margin-bottom:10px;}
.ivy-wz__miniTitle--compare{margin:2px 0 12px;}
.ivy-wz__reasonList,.ivy-wz__planOptionList,.ivy-wz__planList{margin:0;padding-left:18px;display:grid;gap:8px;color:var(--ivy-text-secondary);}
.ivy-wz__planChoices{display:block;}
.ivy-wz__planGrid2{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
.ivy-wz__planOption{appearance:none;text-align:left;border:1px solid var(--ivy-border);background:rgba(255,255,255,.03);color:inherit;border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:12px;cursor:pointer;transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;min-height:100%;}
.ivy-wz__planOption:hover{transform:translateY(-2px);border-color:var(--ivy-border-strong);background:rgba(255,255,255,.05);}
.ivy-wz__planOption.is-selected{border-color:rgba(124,255,107,.5);background:rgba(124,255,107,.08);box-shadow:0 0 0 1px rgba(124,255,107,.18) inset;}
.ivy-wz__planOptionTop{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;}
.ivy-wz__planOptionName{font-size:1.1rem;font-weight:800;color:var(--ivy-text-primary);}
.ivy-wz__planOptionDesc{font-size:.9rem;color:var(--ivy-text-secondary);margin-top:4px;}
.ivy-wz__planBadge{background:rgba(124,255,107,.15);color:var(--ivy-accent);border:1px solid rgba(124,255,107,.3);padding:5px 8px;border-radius:999px;font-size:.72rem;font-weight:800;white-space:nowrap;}
.ivy-wz__planOptionPrice{font-size:1.4rem;font-weight:800;color:var(--ivy-text-primary);}
.ivy-wz__planOptionPrice span{font-size:.9rem;color:var(--ivy-text-secondary);}
.ivy-wz__planOptionCta{margin-top:auto;color:var(--ivy-accent);font-weight:800;font-size:.92rem;}
@media (max-width: 1180px){.ivy-wz__inner{justify-content:center}.ivy-wz__ivy{display:none}.ivy-wz__card{width:min(920px,calc(100vw - 32px));max-width:min(920px,calc(100vw - 32px));}}
@media (max-width: 900px){.ivy-wz__recommendBody,.ivy-wz__planGrid2{grid-template-columns:1fr}.ivy-wz__recommendHeader{display:block}.ivy-wz__recommendPrice{margin-top:12px}.ivy-wz__bottom{grid-template-columns:1fr auto 1fr}.ivy-wz__next{min-width:unset}}

/* v6 premium cleanup - prevent stretch, keep choices visible */
.ivy-wz__inner{max-width:1360px;padding:32px 20px;align-items:center;}
.ivy-wz__ivy{flex:0 0 clamp(250px,22vw,320px);}
.ivy-wz__ivyFrame{aspect-ratio:4/5;border-radius:28px;overflow:hidden;}
.ivy-wz__ivyMedia{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;}
.ivy-wz__card{width:min(980px,calc(100vw - 40px));max-width:min(980px,calc(100vw - 40px));}
.ivy-wz__body{padding:28px 24px;}
.ivy-wz__recommendShell{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:18px;align-items:stretch;}
.ivy-wz__recommendMedia{border-radius:20px;overflow:hidden;background:rgba(255,255,255,.04);min-height:220px;}
.ivy-wz__recommendMedia img{width:100%;height:100%;object-fit:cover;display:block;}
.ivy-wz__recommendMain{display:flex;flex-direction:column;gap:18px;}
.ivy-wz__planGrid2{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.ivy-wz__planOption{min-height:260px;justify-content:flex-start;}
.ivy-wz__planOptionList{padding-left:18px;display:grid;gap:6px;color:var(--ivy-text-secondary);margin:0;}
.ivy-wz__planOptionList li{list-style:disc;}
.ivy-wz__planOptionCta{display:inline-flex;align-items:center;gap:8px;}
.ivy-wz__planChoices{display:grid;gap:12px;}
@media (max-width: 1180px){.ivy-wz__inner{justify-content:center}.ivy-wz__ivy{display:none !important}.ivy-wz__card{width:min(980px,calc(100vw - 24px));max-width:min(980px,calc(100vw - 24px));}}
@media (max-width: 900px){.ivy-wz__recommendShell,.ivy-wz__recommendBody,.ivy-wz__planGrid2{grid-template-columns:1fr}.ivy-wz__recommendMedia{min-height:180px}}

/* v7 plan-step rebuild: contained layout, clearer package choice, less page stretch */
.ivy-wz__title{
  background:none;
  -webkit-background-clip:initial;
  background-clip:initial;
  -webkit-text-fill-color:initial;
  color:var(--ivy-text-primary);
}
.ivy-wz[data-step-type="plan"] .ivy-wz__card{
  max-height:min(860px,calc(100vh - 48px));
}
.ivy-wz[data-step-type="plan"] .ivy-wz__body{
  overflow:auto;
  padding-bottom:28px;
}
.ivy-wz__offerFlow{display:grid;gap:18px;}
.ivy-wz__offerSummary,
.ivy-wz__offerHero,
.ivy-wz__offerCompare{
  background:rgba(255,255,255,.04);
  border:1px solid var(--ivy-border);
  border-radius:22px;
  padding:20px;
  box-shadow:var(--ivy-shadow-md);
}
.ivy-wz__offerSummaryGrid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-top:16px;
}
.ivy-wz__offerSummaryItem{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  padding:12px 14px;
}
.ivy-wz__offerSummaryLabel{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--ivy-text-tertiary);
  margin-bottom:6px;
  font-weight:700;
}
.ivy-wz__offerSummaryValue,
.ivy-wz__offerSummaryTitle,
.ivy-wz__offerName,
.ivy-wz__offerCompareTitle,
.ivy-wz__packageName{
  color:var(--ivy-text-primary);
}
.ivy-wz__offerSummaryTitle,
.ivy-wz__offerCompareTitle{
  margin:4px 0 0;
  font-size:1.2rem;
  line-height:1.2;
}
.ivy-wz__offerSummaryValue{
  font-weight:700;
  line-height:1.35;
}
.ivy-wz__offerHeroTop{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
  margin-bottom:16px;
}
.ivy-wz__offerName{
  margin:4px 0 8px;
  font-size:clamp(1.55rem,2.2vw,2rem);
  line-height:1.05;
}
.ivy-wz__offerDesc,
.ivy-wz__offerCompareNote,
.ivy-wz__packageDesc,
.ivy-wz__packageReason{
  color:var(--ivy-text-secondary);
}
.ivy-wz__offerPrice,
.ivy-wz__packagePrice{
  font-weight:800;
  color:var(--ivy-text-primary);
}
.ivy-wz__offerPrice{
  font-size:1.9rem;
  white-space:nowrap;
}
.ivy-wz__offerPrice span,
.ivy-wz__packagePrice span{
  font-size:.95rem;
  color:var(--ivy-text-secondary);
  margin-left:2px;
}
.ivy-wz__offerHeroGrid{
  display:grid;
  grid-template-columns:minmax(0,220px) minmax(0,1fr);
  gap:16px;
  align-items:stretch;
}
.ivy-wz__offerMedia{
  min-height:220px;
  border-radius:18px;
  overflow:hidden;
  background:rgba(255,255,255,.03);
}
.ivy-wz__offerMedia img{width:100%;height:100%;object-fit:cover;display:block;}
.ivy-wz__offerDetails{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.ivy-wz__offerPanel{
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px;
  padding:16px;
}
.ivy-wz__offerCompareHead{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
  margin-bottom:14px;
}
.ivy-wz__offerPackages{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.ivy-wz__packageCard{
  appearance:none;
  text-align:left;
  border:1px solid var(--ivy-border);
  background:rgba(255,255,255,.03);
  color:inherit;
  border-radius:18px;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
  cursor:pointer;
  transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;
  min-height:100%;
}
.ivy-wz__packageCard:hover{
  transform:translateY(-2px);
  border-color:var(--ivy-border-strong);
  background:rgba(255,255,255,.05);
}
.ivy-wz__packageCard.is-selected{
  border-color:rgba(124,255,107,.55);
  background:rgba(124,255,107,.09);
  box-shadow:0 0 0 1px rgba(124,255,107,.18) inset;
}
.ivy-wz__packageTop{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}
.ivy-wz__packageName{font-size:1.06rem;font-weight:800;line-height:1.1;}
.ivy-wz__packageDesc{font-size:.9rem;line-height:1.4;margin-top:4px;}
.ivy-wz__packagePrice{font-size:1.35rem;}
.ivy-wz__packageList{margin:0;padding-left:18px;display:grid;gap:6px;color:var(--ivy-text-secondary);}
.ivy-wz__packageReason{
  font-size:.92rem;
  line-height:1.45;
}
.ivy-wz__packageCta{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  color:var(--ivy-accent);
  font-weight:800;
}
@media (max-width: 1100px){
  .ivy-wz__offerSummaryGrid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ivy-wz__offerPackages{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width: 900px){
  .ivy-wz__offerHeroTop,
  .ivy-wz__offerCompareHead{display:block;}
  .ivy-wz__offerPrice{margin-top:12px;}
  .ivy-wz__offerHeroGrid,
  .ivy-wz__offerDetails,
  .ivy-wz__offerPackages,
  .ivy-wz__offerSummaryGrid{grid-template-columns:1fr;}
  .ivy-wz__offerMedia{min-height:180px;}
}


/* v8 review step rebuild */
.ivy-wz__grid--details{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.ivy-wz__reviewShell{
  display:grid;
  gap:18px;
}
.ivy-wz__reviewSummary,
.ivy-wz__reviewSelected{
  padding:18px 20px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  background:rgba(9,16,36,.48);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.ivy-wz__reviewTitle,
.ivy-wz__reviewPackageName,
.ivy-wz__reviewChoiceTitle{
  margin:4px 0 0;
  color:var(--ivy-text);
}
.ivy-wz__reviewPackageDesc{
  margin:8px 0 0;
  color:var(--ivy-text-secondary);
}
.ivy-wz__reviewStats{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:14px;
}
.ivy-wz__reviewStat{
  padding:12px 14px;
  border-radius:16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
}
.ivy-wz__reviewStatLabel{
  font-size:.76rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--ivy-text-secondary);
}
.ivy-wz__reviewStatValue{
  margin-top:4px;
  font-size:.98rem;
  font-weight:700;
  color:var(--ivy-text);
}
.ivy-wz__reviewSelectedHead,
.ivy-wz__reviewChoiceHead{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
}
.ivy-wz__reviewPrice{
  font-size:1.5rem;
  font-weight:800;
  color:var(--ivy-text);
  white-space:nowrap;
}
.ivy-wz__reviewPrice span{
  font-size:.9rem;
  font-weight:600;
  color:var(--ivy-text-secondary);
}
.ivy-wz__reviewPanels{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.ivy-wz__reviewPanel{
  padding:14px 16px;
  border-radius:18px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
}
.ivy-wz__packageGrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.ivy-wz__packageCard{
  text-align:left;
  min-height:100%;
}
.ivy-wz__packageCard .ivy-wz__planBadge{
  align-self:flex-start;
}
@media (max-width: 980px){
  .ivy-wz__packageGrid,
  .ivy-wz__reviewPanels,
  .ivy-wz__reviewStats,
  .ivy-wz__grid--details{
    grid-template-columns:1fr;
  }
  .ivy-wz__reviewSelectedHead,
  .ivy-wz__reviewChoiceHead{
    flex-direction:column;
  }
}

/* v9 compact review step + product images + no-scroll desktop */
.ivy-wz__reviewTitle,
.ivy-wz__reviewPackageName,
.ivy-wz__reviewChoiceTitle,
.ivy-wz__reviewStatValue,
.ivy-wz__reviewPrice{
  color:var(--ivy-text-primary);
}
.ivy-wz[data-step-type="review"] .ivy-wz__card{
  max-height:min(840px,calc(100vh - 40px));
}
.ivy-wz[data-step-type="review"] .ivy-wz__body{
  overflow:hidden;
  padding-bottom:20px;
}
.ivy-wz__reviewShell--compact{
  display:grid;
  grid-template-columns:280px minmax(0,1fr);
  gap:18px;
  align-items:start;
}
.ivy-wz__reviewSidebar,
.ivy-wz__reviewMain{
  display:grid;
  gap:14px;
}
.ivy-wz__reviewCompactBlock,
.ivy-wz__reviewMain{
  min-width:0;
}
.ivy-wz__reviewCompactBlock{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  padding:16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.ivy-wz__reviewMiniTitle{
  margin:4px 0 0;
  font-size:1.05rem;
  color:var(--ivy-text-primary);
}
.ivy-wz__reviewBriefList{
  margin-top:12px;
  display:grid;
  gap:10px;
}
.ivy-wz__reviewBriefItem{
  display:grid;
  gap:4px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.05);
}
.ivy-wz__reviewBriefItem span{
  font-size:.74rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--ivy-text-secondary);
  font-weight:700;
}
.ivy-wz__reviewBriefItem strong{
  font-size:.94rem;
  color:var(--ivy-text-primary);
}
.ivy-wz__reviewFeaturedCard{
  display:grid;
  gap:12px;
}
.ivy-wz__reviewFeaturedMedia,
.ivy-wz__packageMedia{
  border-radius:16px;
  overflow:hidden;
  background:rgba(255,255,255,.04);
}
.ivy-wz__reviewFeaturedMedia{aspect-ratio:16/10;}
.ivy-wz__reviewFeaturedMedia img,
.ivy-wz__packageMedia img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.ivy-wz__reviewFeaturedBody{
  display:grid;
  gap:6px;
}
.ivy-wz__reviewFeaturedName{
  font-size:1.15rem;
  font-weight:800;
  color:var(--ivy-text-primary);
}
.ivy-wz__reviewFeaturedPrice{
  font-size:1.45rem;
  font-weight:800;
  color:var(--ivy-text-primary);
}
.ivy-wz__reviewFeaturedPrice span{font-size:.86rem;color:var(--ivy-text-secondary);}
.ivy-wz__reviewFeaturedDesc,
.ivy-wz__reviewCompactNote{
  margin:0;
  color:var(--ivy-text-secondary);
  line-height:1.45;
  font-size:.9rem;
}
.ivy-wz__reviewCompactHead{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
}
.ivy-wz__packageGrid--compact{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.ivy-wz__packageCard--compact{
  padding:12px;
  gap:10px;
  min-height:unset;
}
.ivy-wz__packageMedia{
  aspect-ratio:16/9;
}
.ivy-wz__packageCard--compact .ivy-wz__packageName{
  font-size:1rem;
}
.ivy-wz__packageCard--compact .ivy-wz__packageDesc{
  font-size:.84rem;
  line-height:1.3;
}
.ivy-wz__packageCard--compact .ivy-wz__packagePrice{
  font-size:1.18rem;
  font-weight:800;
  color:var(--ivy-text-primary);
}
.ivy-wz__packageCard--compact .ivy-wz__packagePrice span{
  font-size:.8rem;
  color:var(--ivy-text-secondary);
}
.ivy-wz__packageCard--compact .ivy-wz__packageList{
  gap:4px;
  font-size:.84rem;
}
.ivy-wz__packageCard--compact .ivy-wz__packageCta{
  font-size:.88rem;
}
@media (max-width: 1180px){
  .ivy-wz[data-step-type="review"] .ivy-wz__body{
    overflow:auto;
  }
  .ivy-wz__reviewShell--compact{
    grid-template-columns:1fr;
  }
}
@media (max-width: 900px){
  .ivy-wz__reviewCompactHead{
    display:block;
  }
  .ivy-wz__reviewCompactNote{
    margin-top:8px;
  }
  .ivy-wz__packageGrid--compact{
    grid-template-columns:1fr;
  }
}

/* v10 decision-style review step */
.ivy-wz__ctaPrice span{
  font-size:.72em;
  margin-left:4px;
  opacity:.78;
}
.ivy-wz[data-step-type="review"] .ivy-wz__body{
  overflow:hidden;
}
.ivy-wz__reviewShell--decision{
  display:grid;
  gap:14px;
}
.ivy-wz__reviewDecisionTop{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
}
.ivy-wz__reviewDecisionTitle{
  margin:4px 0 0;
  font-size:1.25rem;
  color:var(--ivy-text-primary);
}
.ivy-wz__reviewDecisionSub,
.ivy-wz__reviewDecisionFoot{
  margin:6px 0 0;
  color:var(--ivy-text-secondary);
  font-size:.92rem;
  line-height:1.42;
}
.ivy-wz__reviewDecisionPrice{
  font-size:1.55rem;
  font-weight:900;
  color:var(--ivy-text-primary);
  white-space:nowrap;
}
.ivy-wz__reviewDecisionPrice span{
  font-size:.85rem;
  margin-left:4px;
  color:var(--ivy-text-secondary);
}
.ivy-wz__reviewTagRow{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.ivy-wz__reviewTag{
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.08);
  min-width:0;
}
.ivy-wz__reviewTag span{
  display:block;
  font-size:.72rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--ivy-text-secondary);
  margin-bottom:4px;
}
.ivy-wz__reviewTag strong{
  display:block;
  font-size:.92rem;
  color:var(--ivy-text-primary);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ivy-wz__reviewDecisionLead{
  display:grid;
  grid-template-columns:minmax(0,1fr) 180px;
  gap:14px;
  align-items:center;
  padding:14px;
  border-radius:18px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}
.ivy-wz__reviewDecisionLeadText p{
  margin:6px 0 0;
  color:var(--ivy-text-secondary);
  font-size:.92rem;
  line-height:1.45;
}
.ivy-wz__reviewDecisionLeadName{
  font-size:1.12rem;
  font-weight:900;
  color:var(--ivy-text-primary);
}
.ivy-wz__reviewDecisionLeadMedia{
  border-radius:16px;
  overflow:hidden;
  aspect-ratio:16/10;
  background:rgba(255,255,255,.05);
}
.ivy-wz__reviewDecisionLeadMedia img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.ivy-wz__packageGrid--decision{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.ivy-wz__packageCard--decision{
  display:grid;
  gap:10px;
  padding:12px;
  border-radius:18px;
  text-align:left;
  min-width:0;
}
.ivy-wz__packageMedia--decision{
  aspect-ratio:16/9;
  border-radius:14px;
  overflow:hidden;
  background:rgba(255,255,255,.045);
}
.ivy-wz__packageDecisionTop{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
}
.ivy-wz__packageDecisionNameWrap{min-width:0;}
.ivy-wz__packageCard--decision .ivy-wz__packageName{
  font-size:1rem;
  line-height:1.15;
}
.ivy-wz__packageCard--decision .ivy-wz__packagePrice{
  margin-top:4px;
  font-size:1.12rem;
  color:var(--ivy-text-primary);
}
.ivy-wz__packageCard--decision .ivy-wz__packagePrice span{
  font-size:.78rem;
  color:var(--ivy-text-secondary);
}
.ivy-wz__packageCard--decision .ivy-wz__packageDesc{
  min-height:2.4em;
  font-size:.84rem;
  line-height:1.35;
  color:var(--ivy-text-secondary);
}
.ivy-wz__packageCard--decision .ivy-wz__packageList{
  gap:4px;
  font-size:.82rem;
}
.ivy-wz__packageCard--decision .ivy-wz__packageCta{
  font-size:.85rem;
}
@media (max-width: 1180px){
  .ivy-wz[data-step-type="review"] .ivy-wz__body{overflow:auto;}
  .ivy-wz__reviewTagRow{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width: 980px){
  .ivy-wz__reviewDecisionTop,
  .ivy-wz__packageDecisionTop{display:block;}
  .ivy-wz__reviewDecisionLead{grid-template-columns:1fr;}
  .ivy-wz__packageGrid--decision{grid-template-columns:1fr;}
}

/* v11 compact no-scroll review step */
.ivy-wz[data-step-type="review"] .ivy-wz__card{
  max-height:none;
}
.ivy-wz[data-step-type="review"] .ivy-wz__body{
  overflow:visible;
  padding-top:22px;
}
.ivy-wz__reviewShell--lite{
  display:grid;
  gap:16px;
}
.ivy-wz__reviewLiteIntro{
  display:grid;
  gap:8px;
}
.ivy-wz__reviewLiteTitle{
  font-family:'Sora',-apple-system,sans-serif;
  font-size:clamp(1.2rem,2vw,1.6rem);
  font-weight:800;
  line-height:1.1;
  color:var(--ivy-text-primary);
}
.ivy-wz__reviewLiteSummary{
  color:var(--ivy-text-secondary);
  font-size:.95rem;
  line-height:1.4;
}
.ivy-wz__packageGrid--lite{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  align-items:stretch;
}
.ivy-wz__packageCard--lite{
  padding:0;
  overflow:hidden;
  min-height:auto;
  display:flex;
  flex-direction:column;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
}
.ivy-wz__packageMedia--lite{
  aspect-ratio:16/9;
  background:rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.ivy-wz__packageMedia--lite img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.ivy-wz__packageLiteBody{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px;
  flex:1;
}
.ivy-wz__packageLiteTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.ivy-wz__packageCard--lite .ivy-wz__packageName{
  font-size:1rem;
  line-height:1.12;
  margin:0;
}
.ivy-wz__packageCard--lite .ivy-wz__packagePrice{
  margin-top:4px;
  font-size:1.1rem;
}
.ivy-wz__packageCard--lite .ivy-wz__packagePrice span{
  font-size:.76rem;
  color:var(--ivy-text-secondary);
}
.ivy-wz__packageCard--lite .ivy-wz__packageDesc{
  min-height:2.5em;
  font-size:.86rem;
  line-height:1.35;
  color:var(--ivy-text-secondary);
}
.ivy-wz__packageCard--lite .ivy-wz__packageList{
  display:grid;
  gap:5px;
  padding-left:18px;
  margin:0;
  color:var(--ivy-text-secondary);
  font-size:.82rem;
}
.ivy-wz__packageCard--lite .ivy-wz__packageCta{
  margin-top:auto;
}
.ivy-wz__reviewLiteFoot{
  font-size:.88rem;
  color:var(--ivy-text-secondary);
  line-height:1.45;
}
@media (max-width: 1180px){
  .ivy-wz[data-step-type="review"] .ivy-wz__card{
    max-height:min(90vh,980px);
  }
  .ivy-wz[data-step-type="review"] .ivy-wz__body{
    overflow:auto;
  }
  .ivy-wz__packageGrid--lite{
    grid-template-columns:1fr;
  }
}


/* v13 full-width wizard + cleaner domain/package showcase */
.ivy-wz{
  position:relative;
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  overflow:hidden;
}
.ivy-wz__inner{
  width:min(1600px, calc(100vw - 40px));
  max-width:min(1600px, calc(100vw - 40px));
  margin:0 auto;
  align-items:stretch;
}
.ivy-wz__ivy{align-self:stretch;display:flex;flex-direction:column;justify-content:center;}
.ivy-wz__card{width:100%;max-width:100%;min-height:min(860px, calc(100vh - 48px));}
.ivy-wz__body{display:grid;gap:18px;overflow:visible;}
.ivy-wz[data-step-type="domain"] .ivy-wz__card,
.ivy-wz[data-step-type="review"] .ivy-wz__card,
.ivy-wz[data-step-type="plan"] .ivy-wz__card{min-height:unset;}
.ivy-wz[data-step-type="domain"] .ivy-wz__body,
.ivy-wz[data-step-type="review"] .ivy-wz__body,
.ivy-wz[data-step-type="plan"] .ivy-wz__body{overflow:visible;}
.ivy-wz__domainShell{display:grid;gap:18px;}
.ivy-wz__domainModes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.ivy-wz__domainMode{appearance:none;border:1px solid var(--ivy-border);background:rgba(255,255,255,.04);color:var(--ivy-text-primary);border-radius:18px;padding:18px 16px;font-weight:800;letter-spacing:.01em;cursor:pointer;transition:.18s ease;min-height:64px;}
.ivy-wz__domainMode:hover,.ivy-wz__domainMode.is-selected{border-color:rgba(167,139,250,.5);background:rgba(167,139,250,.12);box-shadow:0 0 0 1px rgba(167,139,250,.18) inset;}
.ivy-wz__domainIntro{color:var(--ivy-text-secondary);font-size:.98rem;line-height:1.45;max-width:72ch;}
.ivy-wz__domainGrid{display:grid;grid-template-columns:minmax(0,1.4fr) 280px;gap:14px;align-items:end;}
.ivy-wz__domainAction .ivy-wz__btn{width:100%;min-height:58px;}
.ivy-wz__domainResults{display:grid;gap:14px;}
.ivy-wz__domainLead{color:var(--ivy-text-secondary);font-size:.92rem;}
.ivy-wz__domainSelected{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:16px 18px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);}
.ivy-wz__domainSelected span{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ivy-text-secondary);font-weight:800;}
.ivy-wz__domainSelected strong{font-size:1.08rem;color:var(--ivy-text-primary);}
.ivy-wz__domainOptionGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.ivy-wz__domainOption{appearance:none;text-align:left;display:grid;gap:10px;border:1px solid var(--ivy-border);background:rgba(255,255,255,.035);border-radius:20px;padding:16px;color:var(--ivy-text-primary);cursor:pointer;transition:.18s ease;}
.ivy-wz__domainOption:hover,.ivy-wz__domainOption.is-selected{transform:translateY(-2px);border-color:rgba(167,139,250,.5);background:rgba(167,139,250,.09);}
.ivy-wz__domainOptionTop{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;}
.ivy-wz__domainOptionAction{font-size:.8rem;font-weight:800;color:var(--ivy-text-secondary);text-transform:uppercase;letter-spacing:.05em;}
.ivy-wz__domainOptionName{font-size:1.08rem;font-weight:900;line-height:1.15;word-break:break-word;}
.ivy-wz__domainOptionCopy{font-size:.88rem;line-height:1.45;color:var(--ivy-text-secondary);}
.ivy-wz__domainSkip{display:grid;gap:6px;padding:16px 18px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);}
.ivy-wz__domainSkip strong{color:var(--ivy-text-primary);}
.ivy-wz__domainSkip span{color:var(--ivy-text-secondary);}
.ivy-wz__reviewShell--showcase{display:grid;gap:18px;}
.ivy-wz__reviewShowcaseHead{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;}
.ivy-wz__reviewShowcaseTitle{margin:4px 0 0;font-size:clamp(1.55rem,2vw,2rem);line-height:1.05;color:var(--ivy-text-primary);}
.ivy-wz__reviewShowcaseSub{margin:8px 0 0;color:var(--ivy-text-secondary);max-width:70ch;}
.ivy-wz__reviewShowcasePrice{font-size:1.9rem;font-weight:900;color:var(--ivy-text-primary);white-space:nowrap;}
.ivy-wz__reviewShowcasePrice span{font-size:.9rem;margin-left:4px;color:var(--ivy-text-secondary);}
.ivy-wz__reviewShowcaseTags{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
.ivy-wz__reviewHero{display:grid;grid-template-columns:minmax(0,1.2fr) 320px;gap:18px;padding:20px;border-radius:24px;background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);align-items:stretch;}
.ivy-wz__reviewHeroCopy{display:grid;gap:10px;align-content:start;}
.ivy-wz__reviewHeroName{font-size:1.4rem;font-weight:900;color:var(--ivy-text-primary);}
.ivy-wz__reviewHeroDesc,.ivy-wz__reviewHeroNote{color:var(--ivy-text-secondary);line-height:1.5;}
.ivy-wz__reviewHeroList{margin:0;padding-left:18px;display:grid;gap:7px;color:var(--ivy-text-primary);}
.ivy-wz__reviewHeroMedia{border-radius:18px;overflow:hidden;background:rgba(255,255,255,.05);min-height:220px;}
.ivy-wz__reviewHeroMedia img{width:100%;height:100%;display:block;object-fit:cover;}
.ivy-wz__reviewChoiceBar{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;}
.ivy-wz__reviewChoiceTitle{font-size:1.08rem;font-weight:800;color:var(--ivy-text-primary);}
.ivy-wz__packageGrid--showcase{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
.ivy-wz__packageCard--showcase{display:grid;gap:12px;align-content:start;padding:16px;border-radius:22px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035);min-height:100%;transition:.18s ease;text-align:left;}
.ivy-wz__packageCard--showcase:hover{transform:translateY(-2px);border-color:rgba(167,139,250,.4);background:rgba(255,255,255,.05);}
.ivy-wz__packageCard--showcase.is-selected{border-color:rgba(124,255,107,.5);background:rgba(124,255,107,.09);box-shadow:0 0 0 1px rgba(124,255,107,.18) inset;}
.ivy-wz__packageMedia--showcase{aspect-ratio:16/10;border-radius:16px;overflow:hidden;background:rgba(255,255,255,.06);}
.ivy-wz__packageMedia--showcase img{width:100%;height:100%;display:block;object-fit:cover;}
.ivy-wz__packageCard--showcase .ivy-wz__packageName{font-size:1.12rem;color:var(--ivy-text-primary);}
.ivy-wz__packageCard--showcase .ivy-wz__packagePrice{font-size:1.25rem;color:var(--ivy-text-primary);}
.ivy-wz__packageCard--showcase .ivy-wz__packagePrice span{font-size:.82rem;color:var(--ivy-text-secondary);}
.ivy-wz__packageCard--showcase .ivy-wz__packageDesc{font-size:.9rem;line-height:1.45;color:var(--ivy-text-secondary);min-height:3em;}
.ivy-wz__packageCard--showcase .ivy-wz__packageList{display:grid;gap:6px;margin:0;padding-left:18px;color:var(--ivy-text-primary);}
.ivy-wz__packageCard--showcase .ivy-wz__packageCta{margin-top:auto;font-size:.9rem;font-weight:800;color:var(--ivy-accent);}
@media (max-width: 1280px){
  .ivy-wz__inner{width:min(1480px, calc(100vw - 28px));max-width:min(1480px, calc(100vw - 28px));}
  .ivy-wz__reviewShowcaseTags{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width: 1100px){
  .ivy-wz__ivy{display:none !important;}
  .ivy-wz__domainGrid,.ivy-wz__reviewHero{grid-template-columns:1fr;}
  .ivy-wz__domainOptionGrid,.ivy-wz__packageGrid--showcase{grid-template-columns:1fr;}
}
@media (max-width: 760px){
  .ivy-wz__domainModes{grid-template-columns:1fr;}
  .ivy-wz__reviewShowcaseHead,.ivy-wz__reviewChoiceBar{display:grid;gap:8px;}
}