/**
 * VIRALIFY WIDGET v2.1.8 - Styles
 * Themes: minimal (default), clean, neon
 */

/* Base Reset & Container */

.vf-widget {
  --vf-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  --vf-radius: 8px;
  --vf-radius-lg: 12px;
  --vf-transition: 0.2s ease;
  
  font-family: var(--vf-font-family);
  font-size: 14px;
  line-height: 1.5;
  box-sizing: border-box;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

.vf-widget *,
.vf-widget *::before,
.vf-widget *::after {
  box-sizing: border-box;
}

.vf-widget button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
}

.vf-widget input {
  font-family: inherit;
  font-size: inherit;
}

/* Theme: Minimal */

.vf-widget.vf-theme-minimal {
  --vf-bg: hsl(0, 0%, 100%);
  --vf-bg-secondary: hsl(0, 0%, 98%);
  --vf-bg-tertiary: hsl(0, 0%, 96%);
  --vf-text: hsl(0, 0%, 13%);
  --vf-text-muted: hsl(0, 0%, 45%);
  --vf-border: hsl(0, 0%, 90%);
  --vf-primary: hsl(220, 65%, 54%);
  --vf-primary-hover: hsl(220, 65%, 48%);
  --vf-primary-text: hsl(0, 0%, 100%);
  --vf-success: hsl(142, 71%, 45%);
  --vf-success-bg: hsl(142, 71%, 97%);
  --vf-error: hsl(0, 84%, 60%);
  --vf-error-bg: hsl(0, 84%, 97%);
  --vf-shadow: none;
  --vf-shadow-hover: none;
}

/* Theme: Clean */

.vf-widget.vf-theme-clean {
  --vf-bg: hsl(0, 0%, 100%);
  --vf-bg-secondary: hsl(210, 20%, 98%);
  --vf-bg-tertiary: hsl(210, 20%, 96%);
  --vf-text: hsl(220, 20%, 20%);
  --vf-text-muted: hsl(220, 10%, 50%);
  --vf-border: hsl(220, 15%, 88%);
  --vf-primary: hsl(250, 80%, 60%);
  --vf-primary-hover: hsl(250, 80%, 52%);
  --vf-primary-text: hsl(0, 0%, 100%);
  --vf-success: hsl(160, 84%, 39%);
  --vf-success-bg: hsl(160, 84%, 96%);
  --vf-error: hsl(4, 90%, 58%);
  --vf-error-bg: hsl(4, 90%, 97%);
  --vf-shadow: 0 1px 3px hsla(220, 20%, 20%, 0.08), 0 1px 2px hsla(220, 20%, 20%, 0.06);
  --vf-shadow-hover: 0 4px 12px hsla(220, 20%, 20%, 0.12), 0 2px 4px hsla(220, 20%, 20%, 0.08);
  --vf-radius: 10px;
  --vf-radius-lg: 16px;
}

/* Theme: Neon */

.vf-widget.vf-theme-neon {
  --vf-bg: hsl(230, 25%, 7%);
  --vf-bg-secondary: hsl(230, 22%, 11%);
  --vf-bg-tertiary: hsl(230, 20%, 15%);
  --vf-text: hsl(0, 0%, 96%);
  --vf-text-muted: hsl(230, 15%, 55%);
  --vf-border: hsl(230, 20%, 20%);
  --vf-primary: hsl(265, 90%, 65%);
  --vf-primary-hover: hsl(265, 90%, 72%);
  --vf-primary-text: hsl(0, 0%, 100%);
  --vf-success: hsl(150, 80%, 50%);
  --vf-success-bg: hsla(150, 80%, 50%, 0.12);
  --vf-error: hsl(350, 90%, 60%);
  --vf-error-bg: hsla(350, 90%, 60%, 0.12);
  --vf-shadow: 0 4px 20px hsla(265, 90%, 50%, 0.15);
  --vf-shadow-hover: 0 8px 30px hsla(265, 90%, 50%, 0.25);
  --vf-glow: 0 0 20px hsla(265, 90%, 65%, 0.4);
  --vf-radius: 10px;
  --vf-radius-lg: 14px;
  --vf-primary-h: 265;
}

/* Main Container */

.vf-container {
  background: var(--vf-bg);
  border: 1px solid var(--vf-border);
  border-radius: var(--vf-radius-lg);
  box-shadow: var(--vf-shadow);
  overflow: hidden;
  color: var(--vf-text);
}

.vf-theme-neon .vf-container {
  border-color: hsla(180, 100%, 50%, 0.2);
}

/* Progress Header */

.vf-header {
  padding: 20px;
  background: var(--vf-bg-secondary);
  border-bottom: 1px solid var(--vf-border);
  overflow: visible;
}

.vf-progress-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 13px;
  gap: 8px;
  flex-wrap: nowrap !important;
  min-width: 0;
}

.vf-progress-title {
  font-weight: 600;
  color: var(--vf-text);
  white-space: nowrap;
  flex-shrink: 0;
}

.vf-progress-count {
  color: var(--vf-text-muted);
  white-space: nowrap !important;
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Neon theme specific - ensure consistent progress layout */
.vf-theme-neon .vf-progress-label {
  flex-wrap: nowrap !important;
}

.vf-theme-neon .vf-header {
  overflow: visible;
}

.vf-progress-bar {
  height: 8px;
  background: var(--vf-bg-tertiary);
  border-radius: 100px;
  overflow: hidden;
}

.vf-progress-fill {
  height: 100%;
  background: var(--vf-primary);
  border-radius: 100px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 0;
}

.vf-theme-neon .vf-progress-fill {
  box-shadow: var(--vf-glow);
}

/* Task Sections */

.vf-section {
  padding: 16px 20px;
}

.vf-section:not(:last-child) {
  border-bottom: 1px solid var(--vf-border);
}

.vf-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--vf-text-muted);
  margin-bottom: 12px;
}

/* Task Items */

.vf-task {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  margin-bottom: 8px;
  background: var(--vf-bg-secondary);
  border-radius: var(--vf-radius);
  border: 1px solid transparent;
  transition: all var(--vf-transition);
}

.vf-task:last-child {
  margin-bottom: 0;
}

.vf-task:hover:not(.vf-task--completed) {
  border-color: var(--vf-border);
  box-shadow: var(--vf-shadow-hover);
}

.vf-theme-neon .vf-task:hover:not(.vf-task--completed) {
  border-color: hsla(180, 100%, 50%, 0.3);
}

.vf-task--completed {
  opacity: 0.6;
}

.vf-task-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--vf-radius);
  background: var(--vf-bg-tertiary);
  flex-shrink: 0;
}

.vf-task-icon svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.vf-task-content {
  flex: 1;
  min-width: 0;
}

.vf-task-title {
  font-weight: 500;
  color: var(--vf-text);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vf-task-reward {
  font-size: 12px;
  color: var(--vf-text-muted);
}

.vf-task-reward strong {
  color: var(--vf-primary);
  font-weight: 600;
}

.vf-theme-neon .vf-task-reward strong {
  text-shadow: var(--vf-glow);
}

.vf-task-action {
  flex-shrink: 0;
}

/* Buttons */

.vf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--vf-radius);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 80px;
  position: relative;
  overflow: hidden;
}

.vf-btn--primary {
  background: linear-gradient(135deg, var(--vf-primary) 0%, var(--vf-primary-hover) 100%);
  color: var(--vf-primary-text);
  box-shadow: 0 4px 12px hsla(220, 65%, 50%, 0.25);
}

.vf-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px hsla(220, 65%, 50%, 0.35);
}

.vf-btn--primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px hsla(220, 65%, 50%, 0.25);
}

.vf-theme-neon .vf-btn--primary {
  background: linear-gradient(135deg, hsl(265, 90%, 65%) 0%, hsl(265, 90%, 55%) 100%);
  box-shadow: 0 4px 20px hsla(265, 90%, 60%, 0.35), 0 0 20px hsla(265, 90%, 60%, 0.15);
}

.vf-theme-neon .vf-btn--primary:hover {
  box-shadow: 0 6px 28px hsla(265, 90%, 60%, 0.45), 0 0 30px hsla(265, 90%, 60%, 0.25);
}

/* Glow variant for gift box button */
.vf-btn--glow {
  padding: 14px 28px;
  font-size: 15px;
  border-radius: 12px;
  background: linear-gradient(135deg, 
    hsl(var(--vf-primary-h, 220), 70%, 55%) 0%, 
    hsl(var(--vf-primary-h, 220), 75%, 45%) 100%
  );
  box-shadow: 
    0 8px 24px hsla(var(--vf-primary-h, 220), 70%, 45%, 0.4),
    inset 0 1px 0 hsla(0, 0%, 100%, 0.2);
}

.vf-btn--glow::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    110deg,
    transparent 20%,
    hsla(0, 0%, 100%, 0.15) 40%,
    hsla(0, 0%, 100%, 0.25) 50%,
    hsla(0, 0%, 100%, 0.15) 60%,
    transparent 80%
  );
  background-size: 200% 100%;
  animation: vf-btn-shimmer 2.5s ease-in-out infinite;
}

@keyframes vf-btn-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.vf-btn--glow:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 
    0 12px 32px hsla(var(--vf-primary-h, 220), 70%, 45%, 0.5),
    inset 0 1px 0 hsla(0, 0%, 100%, 0.2);
}

.vf-btn--glow:active {
  transform: translateY(-1px) scale(1);
}

.vf-theme-neon .vf-btn--glow {
  --vf-primary-h: 265;
  background: linear-gradient(135deg, hsl(265, 90%, 65%) 0%, hsl(265, 90%, 50%) 100%);
  box-shadow: 
    0 8px 32px hsla(265, 90%, 60%, 0.45),
    0 0 30px hsla(265, 90%, 60%, 0.2),
    inset 0 1px 0 hsla(0, 0%, 100%, 0.25);
}

.vf-theme-neon .vf-btn--glow:hover {
  box-shadow: 
    0 12px 40px hsla(265, 90%, 60%, 0.55),
    0 0 50px hsla(265, 90%, 60%, 0.3),
    inset 0 1px 0 hsla(0, 0%, 100%, 0.25);
}

.vf-btn--secondary {
  background: var(--vf-bg-tertiary);
  color: var(--vf-text);
  border: 1px solid var(--vf-border);
}

.vf-btn--secondary:hover {
  background: var(--vf-bg-secondary);
  border-color: var(--vf-primary);
  transform: translateY(-1px);
}

/* 2026 Start Task Button - Theme-specific vibrant gradients */
/* FORCE OVERRIDE with !important for color visibility */
.vf-widget .vf-btn.vf-btn--start {
  position: relative;
  background: linear-gradient(135deg, hsl(220, 85%, 52%) 0%, hsl(225, 90%, 42%) 100%) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 3px hsla(220, 90%, 15%, 0.5);
  font-weight: 800 !important;
  letter-spacing: 0.5px;
  padding: 10px 24px;
  border-radius: 50px;
  border: none !important;
  box-shadow: 0 4px 15px hsla(220, 85%, 45%, 0.5);
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.vf-widget .vf-btn.vf-btn--start::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, hsla(0, 0%, 100%, 0.3) 0%, hsla(0, 0%, 100%, 0) 100%);
  border-radius: 50px 50px 0 0;
  pointer-events: none;
}

.vf-widget .vf-btn.vf-btn--start:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 25px hsla(220, 85%, 45%, 0.6);
}

.vf-widget .vf-btn.vf-btn--start:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 2px 10px hsla(220, 85%, 45%, 0.4);
}

/* Clean theme - Purple gradient */
.vf-theme-clean .vf-btn.vf-btn--start {
  background: linear-gradient(135deg, hsl(250, 85%, 60%) 0%, hsl(250, 90%, 50%) 100%) !important;
  box-shadow: 0 4px 15px hsla(250, 85%, 55%, 0.5);
}

.vf-theme-clean .vf-btn.vf-btn--start:hover {
  box-shadow: 0 8px 25px hsla(250, 85%, 55%, 0.6);
}

/* Neon theme - Glowing purple */
.vf-theme-neon .vf-btn.vf-btn--start {
  background: linear-gradient(135deg, hsl(265, 90%, 65%) 0%, hsl(265, 90%, 55%) 100%) !important;
  box-shadow: 
    0 4px 15px hsla(265, 90%, 60%, 0.5),
    0 0 30px hsla(265, 90%, 60%, 0.3);
}

.vf-theme-neon .vf-btn.vf-btn--start:hover {
  box-shadow: 
    0 8px 30px hsla(265, 90%, 60%, 0.6),
    0 0 50px hsla(265, 90%, 60%, 0.4);
}

/* 2026 Verify Button (Task Row) - Match Start Task button size */
/* FORCE OVERRIDE with !important for color visibility on ALL themes */
.vf-widget .vf-btn.vf-btn--verify {
  position: relative;
  background: linear-gradient(135deg, hsl(30, 100%, 55%) 0%, hsl(25, 100%, 48%) 100%) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 2px hsla(25, 100%, 20%, 0.4) !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px;
  padding: 10px 24px !important;
  border-radius: 50px !important;
  border: none !important;
  box-shadow: 0 4px 15px hsla(30, 100%, 50%, 0.4) !important;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.vf-widget .vf-btn.vf-btn--verify::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, hsla(0, 0%, 100%, 0.3) 0%, hsla(0, 0%, 100%, 0) 100%);
  border-radius: 50px 50px 0 0;
  pointer-events: none;
}

.vf-widget .vf-btn.vf-btn--verify:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 25px hsla(30, 100%, 50%, 0.5) !important;
}

.vf-widget .vf-btn.vf-btn--verify:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 2px 10px hsla(30, 100%, 50%, 0.3) !important;
}

/* Clean theme - Indigo verify button */
.vf-widget.vf-theme-clean .vf-btn.vf-btn--verify {
  background: linear-gradient(135deg, hsl(240, 70%, 58%) 0%, hsl(240, 75%, 48%) 100%) !important;
  box-shadow: 0 4px 15px hsla(240, 70%, 55%, 0.4) !important;
}

.vf-widget.vf-theme-clean .vf-btn.vf-btn--verify:hover {
  box-shadow: 0 8px 25px hsla(240, 70%, 55%, 0.5) !important;
}

/* Neon theme - Cyan glow verify button */
.vf-widget.vf-theme-neon .vf-btn.vf-btn--verify {
  background: linear-gradient(135deg, hsl(180, 100%, 45%) 0%, hsl(180, 100%, 35%) 100%) !important;
  box-shadow: 
    0 4px 15px hsla(180, 100%, 45%, 0.5),
    0 0 25px hsla(180, 100%, 50%, 0.3) !important;
}

.vf-widget.vf-theme-neon .vf-btn.vf-btn--verify:hover {
  box-shadow: 
    0 8px 30px hsla(180, 100%, 45%, 0.6),
    0 0 40px hsla(180, 100%, 50%, 0.4) !important;
}

/* 2026 Verify Submit Button (Modal) - Match Start Task CTA */
.vf-btn--verify-submit {
  position: relative;
  background: linear-gradient(135deg, hsl(220, 85%, 52%) 0%, hsl(225, 90%, 42%) 100%);
  color: white;
  text-shadow: 0 1px 2px hsla(220, 90%, 20%, 0.3);
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 12px 24px;
  border-radius: 50px;
  border: none;
  box-shadow: 0 4px 15px hsla(220, 85%, 45%, 0.5);
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.vf-btn--verify-submit::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, hsla(0, 0%, 100%, 0.3) 0%, hsla(0, 0%, 100%, 0) 100%);
  border-radius: 50px 50px 0 0;
  pointer-events: none;
}

.vf-btn--verify-submit:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 25px hsla(220, 85%, 45%, 0.6);
}

.vf-btn--verify-submit:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 2px 10px hsla(220, 85%, 45%, 0.4);
}

.vf-btn--verify-submit:disabled {
  opacity: 0.7;
  pointer-events: none;
}

/* Verify Submit Loading State with Circular Spinner */
.vf-btn--verify-submit.vf-btn--loading {
  pointer-events: none;
  opacity: 0.9;
}

.vf-loading {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2.5px solid hsla(0, 0%, 100%, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: vf-loading-spin 0.6s linear infinite;
  margin-right: 8px;
  vertical-align: middle;
  flex-shrink: 0;
}

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

/* Minimal theme - Blue verify submit (FORCE visibility) */
.vf-widget.vf-theme-minimal .vf-btn--verify-submit,
.vf-theme-minimal .vf-btn--verify-submit {
  background: linear-gradient(135deg, hsl(220, 85%, 52%) 0%, hsl(225, 90%, 42%) 100%) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 2px hsla(220, 90%, 20%, 0.3) !important;
  font-weight: 800 !important;
  border: none !important;
  box-shadow: 0 4px 15px hsla(220, 85%, 45%, 0.5) !important;
  opacity: 1 !important;
}

.vf-widget.vf-theme-minimal .vf-btn--verify-submit:hover,
.vf-theme-minimal .vf-btn--verify-submit:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 25px hsla(220, 85%, 45%, 0.6) !important;
}

.vf-widget.vf-theme-minimal .vf-btn--verify-submit:disabled,
.vf-theme-minimal .vf-btn--verify-submit:disabled {
  opacity: 0.6 !important;
  background: linear-gradient(135deg, hsl(220, 40%, 65%) 0%, hsl(225, 45%, 55%) 100%) !important;
}

/* Clean theme - Purple verify submit */
.vf-theme-clean .vf-btn--verify-submit {
  background: linear-gradient(135deg, hsl(250, 85%, 60%) 0%, hsl(250, 90%, 50%) 100%);
  box-shadow: 0 4px 15px hsla(250, 85%, 55%, 0.5);
}

.vf-theme-clean .vf-btn--verify-submit:hover {
  box-shadow: 0 8px 25px hsla(250, 85%, 55%, 0.6);
}

/* Neon theme - Glowing purple verify submit */
.vf-theme-neon .vf-btn--verify-submit {
  background: linear-gradient(135deg, hsl(265, 90%, 65%) 0%, hsl(265, 90%, 55%) 100%);
  box-shadow: 
    0 4px 15px hsla(265, 90%, 60%, 0.5),
    0 0 30px hsla(265, 90%, 60%, 0.3);
}

.vf-theme-neon .vf-btn--verify-submit:hover {
  box-shadow: 
    0 8px 30px hsla(265, 90%, 60%, 0.6),
    0 0 50px hsla(265, 90%, 60%, 0.4);
}

/* Animated Completed Checkmark */
.vf-task-completed-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, hsl(142, 70%, 50%) 0%, hsl(142, 75%, 40%) 100%);
  border-radius: 50%;
  box-shadow: 0 4px 12px hsla(142, 70%, 45%, 0.4);
  animation: vf-check-bounce 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  flex-shrink: 0;
}

.vf-task-completed-check svg {
  width: 18px;
  height: 18px;
  color: white;
}

@keyframes vf-check-bounce {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); opacity: 1; }
}

/* Neon theme checkmark */
.vf-theme-neon .vf-task-completed-check {
  box-shadow: 
    0 4px 12px hsla(142, 100%, 45%, 0.5),
    0 0 20px hsla(142, 100%, 50%, 0.3);
}

.vf-btn--success {
  background: linear-gradient(135deg, hsl(142, 70%, 50%) 0%, hsl(142, 70%, 40%) 100%);
  color: white;
  pointer-events: none;
  box-shadow: 0 4px 12px hsla(142, 70%, 45%, 0.3);
}

.vf-btn--disabled {
  opacity: 0.4;
  pointer-events: none;
  filter: grayscale(0.3);
}

.vf-btn--disabled::before {
  display: none;
}

.vf-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Verification Modal */

/* Modal Entrance Animation */
@keyframes vf-modal-slide-up {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(30px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes vf-modal-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.vf-modal-overlay {
  position: fixed;
  inset: 0;
  background: hsla(0, 0%, 0%, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.vf-modal-overlay.vf-modal--visible {
  opacity: 1;
  visibility: visible;
  animation: vf-modal-backdrop-in 0.25s ease;
}

.vf-theme-neon .vf-modal-overlay {
  background: hsla(240, 30%, 8%, 0.9);
}

/* 2026 Modal Container */
.vf-modal {
  background: linear-gradient(180deg, hsl(0, 0%, 100%) 0%, hsl(220, 20%, 98%) 100%);
  border-radius: 20px;
  border: 1px solid hsla(220, 20%, 90%, 0.8);
  box-shadow: 
    0 25px 50px hsla(220, 30%, 20%, 0.25),
    0 10px 20px hsla(220, 30%, 20%, 0.1);
  width: 100%;
  max-width: 360px;
  overflow: hidden;
  transform: scale(0.9) translateY(30px);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.vf-modal-overlay.vf-modal--visible .vf-modal {
  transform: scale(1) translateY(0);
  animation: vf-modal-slide-up 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Clean theme modal */
.vf-theme-clean .vf-modal {
  background: linear-gradient(180deg, hsl(0, 0%, 100%) 0%, hsl(250, 30%, 98%) 100%);
  border-color: hsla(250, 40%, 85%, 0.6);
  box-shadow: 
    0 25px 50px hsla(250, 40%, 30%, 0.2),
    0 0 0 1px hsla(250, 60%, 70%, 0.1);
}

/* Neon theme modal */
.vf-theme-neon .vf-modal {
  background: linear-gradient(180deg, hsl(240, 20%, 12%) 0%, hsl(240, 25%, 8%) 100%);
  border: 1px solid hsla(180, 100%, 50%, 0.3);
  box-shadow: 
    0 25px 50px hsla(240, 50%, 5%, 0.5),
    0 0 60px hsla(180, 100%, 50%, 0.15),
    inset 0 1px 0 hsla(180, 100%, 50%, 0.1);
}

/* 2026 Modal Header */
.vf-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  background: linear-gradient(180deg, hsla(220, 60%, 97%, 1) 0%, hsla(220, 40%, 95%, 0) 100%);
  border-bottom: 1px solid hsla(220, 20%, 90%, 0.6);
}

.vf-theme-clean .vf-modal-header {
  background: linear-gradient(180deg, hsla(250, 50%, 98%, 1) 0%, hsla(250, 30%, 96%, 0) 100%);
  border-bottom-color: hsla(250, 40%, 88%, 0.5);
}

.vf-theme-neon .vf-modal-header {
  background: linear-gradient(180deg, hsla(240, 30%, 15%, 1) 0%, hsla(240, 25%, 12%, 0) 100%);
  border-bottom-color: hsla(180, 100%, 50%, 0.15);
}

.vf-modal-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 16px;
  color: hsl(220, 30%, 20%);
}

.vf-modal-title::before {
  content: '✓';
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: linear-gradient(135deg, hsl(220, 85%, 52%) 0%, hsl(225, 90%, 42%) 100%);
  color: white;
  font-size: 12px;
  font-weight: 800;
  border-radius: 50%;
  box-shadow: 0 3px 10px hsla(220, 85%, 45%, 0.4);
}

.vf-theme-clean .vf-modal-title {
  color: hsl(250, 40%, 25%);
}

.vf-theme-clean .vf-modal-title::before {
  background: linear-gradient(135deg, hsl(250, 85%, 60%) 0%, hsl(250, 90%, 50%) 100%);
  box-shadow: 0 3px 10px hsla(250, 85%, 55%, 0.4);
}

.vf-theme-neon .vf-modal-title {
  color: hsl(180, 100%, 80%);
}

.vf-theme-neon .vf-modal-title::before {
  background: linear-gradient(135deg, hsl(180, 100%, 45%) 0%, hsl(180, 100%, 35%) 100%);
  box-shadow: 
    0 3px 10px hsla(180, 100%, 45%, 0.5),
    0 0 15px hsla(180, 100%, 50%, 0.3);
}

.vf-modal-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: hsl(220, 15%, 50%);
  background: hsla(220, 20%, 95%, 0.8);
  transition: all 0.2s ease;
}

.vf-modal-close:hover {
  background: hsla(220, 20%, 90%, 1);
  color: hsl(220, 30%, 30%);
  transform: scale(1.05);
}

.vf-theme-neon .vf-modal-close {
  background: hsla(180, 100%, 50%, 0.1);
  color: hsla(180, 100%, 70%, 0.8);
}

.vf-theme-neon .vf-modal-close:hover {
  background: hsla(180, 100%, 50%, 0.2);
  color: hsl(180, 100%, 80%);
}

.vf-modal-body {
  padding: 22px;
}

/* 2026 Task Link in Modal - with pulsation */
.vf-modal-task-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 18px;
  background: linear-gradient(135deg, hsla(220, 60%, 97%, 1) 0%, hsla(220, 40%, 95%, 1) 100%);
  border: 1px solid hsla(220, 30%, 88%, 0.8);
  border-radius: 12px;
  color: hsl(220, 30%, 25%);
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px hsla(220, 30%, 50%, 0.08);
  animation: vf-task-link-pulse 2s ease-in-out infinite;
}

@keyframes vf-task-link-pulse {
  0%, 100% { 
    transform: scale(1); 
    box-shadow: 0 2px 8px hsla(220, 30%, 50%, 0.08);
  }
  50% { 
    transform: scale(1.02); 
    box-shadow: 0 4px 16px hsla(220, 60%, 50%, 0.2);
  }
}

.vf-modal-task-link:hover {
  background: linear-gradient(135deg, hsla(220, 70%, 96%, 1) 0%, hsla(220, 50%, 93%, 1) 100%);
  border-color: hsl(220, 85%, 55%);
  transform: translateX(3px);
  box-shadow: 0 4px 12px hsla(220, 85%, 50%, 0.15);
  animation: none;
}

.vf-theme-clean .vf-modal-task-link {
  background: linear-gradient(135deg, hsla(250, 50%, 98%, 1) 0%, hsla(250, 40%, 96%, 1) 100%);
  border-color: hsla(250, 40%, 88%, 0.8);
  color: hsl(250, 40%, 25%);
}

.vf-theme-clean .vf-modal-task-link:hover {
  border-color: hsl(250, 85%, 60%);
  box-shadow: 0 4px 12px hsla(250, 85%, 55%, 0.15);
}

.vf-theme-neon .vf-modal-task-link {
  background: linear-gradient(135deg, hsla(240, 30%, 18%, 1) 0%, hsla(240, 35%, 15%, 1) 100%);
  border-color: hsla(180, 100%, 50%, 0.25);
  color: hsl(180, 100%, 85%);
}

.vf-theme-neon .vf-modal-task-link:hover {
  border-color: hsla(180, 100%, 50%, 0.6);
  box-shadow: 0 0 20px hsla(180, 100%, 50%, 0.2);
}

.vf-modal-task-icon {
  font-size: 18px;
}

#vf-modal-task-title {
  flex: 1;
  font-weight: 600;
  font-size: 14px;
}

.vf-modal-task-arrow {
  color: hsl(220, 85%, 55%);
  font-weight: bold;
  font-size: 16px;
  transition: transform 0.2s ease;
}

.vf-modal-task-link:hover .vf-modal-task-arrow {
  transform: translateX(3px);
}

.vf-theme-clean .vf-modal-task-arrow {
  color: hsl(250, 85%, 60%);
}

.vf-theme-neon .vf-modal-task-arrow {
  color: hsl(180, 100%, 50%);
}

/* 2026 Input Group Styling */
.vf-input-group {
  margin-bottom: 20px;
}

.vf-input-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  color: hsl(220, 30%, 30%);
}

.vf-theme-clean .vf-input-label {
  color: hsl(250, 40%, 30%);
}

.vf-theme-neon .vf-input-label {
  color: hsl(180, 100%, 80%);
}

/* 2026 Input Field */
.vf-input {
  width: 100%;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 500;
  background: linear-gradient(180deg, hsl(0, 0%, 100%) 0%, hsl(220, 30%, 99%) 100%);
  border: 2px solid hsla(220, 30%, 88%, 0.8);
  border-radius: 12px;
  color: hsl(220, 30%, 20%);
  transition: all 0.2s ease;
  box-shadow: inset 0 2px 4px hsla(220, 30%, 50%, 0.05);
  outline: none;
}

.vf-theme-clean .vf-input {
  background: linear-gradient(180deg, hsl(0, 0%, 100%) 0%, hsl(250, 30%, 99%) 100%);
  border-color: hsla(250, 40%, 88%, 0.8);
  color: hsl(250, 40%, 20%);
}

.vf-theme-neon .vf-input {
  background: linear-gradient(180deg, hsl(240, 25%, 14%) 0%, hsl(240, 30%, 12%) 100%);
  border-color: hsla(180, 100%, 50%, 0.25);
  color: hsl(180, 100%, 90%);
}

.vf-input:focus,
.vf-input:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
  border-color: hsl(220, 85%, 55%);
  box-shadow: 
    0 0 0 4px hsla(220, 85%, 55%, 0.15),
    inset 0 2px 4px hsla(220, 30%, 50%, 0.05);
}

.vf-input:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
}

/* Custom theme input - ensure no double outline from host site */
.vf-theme-custom .vf-input,
.vf-theme-custom .vf-input:focus,
.vf-theme-custom .vf-input:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
}

.vf-theme-clean .vf-input:focus,
.vf-theme-clean .vf-input:focus-visible {
  outline: none !important;
  border-color: hsl(250, 85%, 60%);
  box-shadow: 
    0 0 0 4px hsla(250, 85%, 60%, 0.15),
    inset 0 2px 4px hsla(250, 30%, 50%, 0.05);
}

.vf-theme-neon .vf-input:focus,
.vf-theme-neon .vf-input:focus-visible {
  outline: none !important;
  border-color: hsl(180, 100%, 50%);
  box-shadow: 
    0 0 0 4px hsla(180, 100%, 50%, 0.2),
    0 0 20px hsla(180, 100%, 50%, 0.1);
}

.vf-input::placeholder {
  color: hsla(220, 20%, 50%, 0.7);
}

.vf-theme-neon .vf-input::placeholder {
  color: hsla(180, 100%, 70%, 0.5);
}

.vf-input--error {
  border-color: hsl(0, 70%, 55%) !important;
  box-shadow: 0 0 0 4px hsla(0, 70%, 55%, 0.15) !important;
}

.vf-error-text {
  font-size: 12px;
  font-weight: 500;
  color: hsl(0, 70%, 50%);
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.vf-error-text::before {
  content: '⚠';
  font-size: 11px;
}

/* 2026 Modal Actions */
.vf-modal-actions {
  display: flex;
  gap: 12px;
  margin-top: 6px;
}

.vf-modal-actions .vf-btn {
  flex: 1;
  padding: 14px 20px;
}

/* Cancel button styling */
.vf-modal-actions .vf-btn--secondary {
  background: hsla(220, 20%, 95%, 0.9);
  color: hsl(220, 20%, 40%);
  border: 1px solid hsla(220, 20%, 88%, 0.8);
  font-weight: 600;
  border-radius: 50px;
}

.vf-modal-actions .vf-btn--secondary:hover {
  background: hsla(220, 20%, 92%, 1);
  border-color: hsla(220, 20%, 80%, 0.9);
}

.vf-theme-clean .vf-modal-actions .vf-btn--secondary {
  background: hsla(250, 30%, 95%, 0.9);
  color: hsl(250, 30%, 40%);
  border-color: hsla(250, 30%, 88%, 0.8);
}

.vf-theme-neon .vf-modal-actions .vf-btn--secondary {
  background: hsla(240, 30%, 20%, 0.8);
  color: hsla(180, 100%, 80%, 0.9);
  border-color: hsla(180, 100%, 50%, 0.2);
}

.vf-theme-neon .vf-modal-actions .vf-btn--secondary:hover {
  background: hsla(240, 30%, 25%, 0.9);
  border-color: hsla(180, 100%, 50%, 0.4);
}

/* ============================================
   GIFT BOX SECTION - Beautiful 2026 Design
   ============================================ */

.vf-giftbox-section {
  padding: 36px 24px 40px;
  text-align: center;
  background: linear-gradient(180deg, var(--vf-bg) 0%, var(--vf-bg-secondary) 100%);
  position: relative;
  overflow: hidden;
}

.vf-giftbox-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--vf-text);
}

.vf-gift-emoji {
  font-size: 28px;
  display: inline-block;
  animation: vf-bounce 2s ease-in-out infinite;
}

@keyframes vf-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-6px) scale(1.1); }
}

.vf-giftbox-subtitle {
  font-size: 14px;
  color: var(--vf-text-muted);
  margin-bottom: 28px;
  font-weight: 500;
}

.vf-giftbox-subtitle .vf-highlight {
  color: var(--vf-primary);
  font-weight: 600;
}

.vf-giftbox-subtitle .vf-progress-indicator {
  display: inline-block;
  padding: 2px 10px;
  background: var(--vf-bg-tertiary);
  border-radius: 20px;
  font-weight: 600;
  color: var(--vf-text);
  font-size: 13px;
}

/* Gift Box Container */
.vf-giftbox {
  width: 160px;
  height: 160px;
  margin: 0 auto 28px;
  position: relative;
  cursor: pointer;
  perspective: 800px;
}

/* Attention-grabbing shake animation every 3 seconds when interactable */
.vf-giftbox:not(.vf-giftbox--disabled):not(.vf-giftbox--opening):not(.vf-giftbox--opened) {
  animation: vf-attention-shake 3s ease-in-out infinite;
}

@keyframes vf-attention-shake {
  0%, 88%, 100% { transform: rotate(0deg); }
  90% { transform: rotate(-6deg); }
  92% { transform: rotate(6deg); }
  94% { transform: rotate(-4deg); }
  96% { transform: rotate(4deg); }
  98% { transform: rotate(-2deg); }
}

.vf-giftbox:hover:not(.vf-giftbox--opening):not(.vf-giftbox--opened):not(.vf-giftbox--disabled) {
  animation: none;
}

.vf-giftbox:hover:not(.vf-giftbox--opening):not(.vf-giftbox--opened):not(.vf-giftbox--disabled) .vf-box-wrap {
  transform: scale(1.08) rotateY(-5deg);
}

.vf-giftbox--disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: saturate(0.3) brightness(0.9);
  animation: none !important;
}

.vf-box-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-style: preserve-3d;
}

/* Box Base - Beautiful 2026 Design */
.vf-box-base {
  position: absolute;
  bottom: 0;
  left: 12px;
  right: 12px;
  height: 90px;
  background: linear-gradient(145deg, 
    hsl(350, 85%, 60%) 0%,
    hsl(340, 90%, 50%) 50%,
    hsl(330, 85%, 45%) 100%
  );
  border-radius: 14px;
  box-shadow: 
    0 20px 40px -10px hsla(350, 90%, 45%, 0.5),
    0 8px 16px -4px hsla(350, 90%, 40%, 0.3),
    inset 0 2px 2px hsla(0, 0%, 100%, 0.25),
    inset 0 -2px 4px hsla(340, 90%, 30%, 0.3);
}

/* Minimal theme - elegant blue */
.vf-theme-minimal .vf-box-base {
  background: linear-gradient(145deg, 
    hsl(220, 75%, 55%) 0%,
    hsl(225, 80%, 48%) 50%,
    hsl(230, 75%, 42%) 100%
  );
  box-shadow: 
    0 20px 40px -10px hsla(220, 80%, 45%, 0.5),
    0 8px 16px -4px hsla(220, 80%, 40%, 0.3),
    inset 0 2px 2px hsla(0, 0%, 100%, 0.25);
}

/* Clean theme - rich purple */
.vf-theme-clean .vf-box-base {
  background: linear-gradient(145deg, 
    hsl(255, 80%, 62%) 0%,
    hsl(260, 85%, 55%) 50%,
    hsl(265, 80%, 48%) 100%
  );
  box-shadow: 
    0 20px 40px -10px hsla(255, 85%, 50%, 0.5),
    0 8px 16px -4px hsla(255, 85%, 45%, 0.3),
    inset 0 2px 2px hsla(0, 0%, 100%, 0.25);
}

/* Neon theme - vibrant purple glow */
.vf-theme-neon .vf-box-base {
  background: linear-gradient(145deg, 
    hsl(270, 90%, 60%) 0%,
    hsl(280, 95%, 50%) 50%,
    hsl(290, 90%, 45%) 100%
  );
  box-shadow: 
    0 20px 50px -10px hsla(275, 100%, 50%, 0.6),
    0 0 40px hsla(275, 100%, 55%, 0.3),
    0 0 80px hsla(275, 100%, 50%, 0.15),
    inset 0 2px 2px hsla(0, 0%, 100%, 0.3);
}

/* Vertical ribbon on box - Golden shimmer */
.vf-box-ribbon-v {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 100%;
  background: linear-gradient(90deg, 
    hsla(45, 100%, 65%, 0.7) 0%,
    hsla(50, 100%, 75%, 0.9) 50%,
    hsla(45, 100%, 65%, 0.7) 100%
  );
  box-shadow: 0 0 10px hsla(45, 100%, 60%, 0.4);
}

/* Shine effect - Animated shimmer */
.vf-box-shine {
  display: none;
}

@keyframes vf-shine-pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}

/* Box Lid - Premium finish */
.vf-box-lid {
  position: absolute;
  top: 48px;
  left: 8px;
  right: 8px;
  height: 28px;
  background: linear-gradient(145deg, 
    hsl(350, 80%, 65%) 0%,
    hsl(345, 85%, 55%) 100%
  );
  border-radius: 10px 10px 5px 5px;
  transform-origin: center bottom;
  z-index: 2;
  box-shadow: 
    0 -3px 10px hsla(0, 0%, 0%, 0.15),
    inset 0 2px 2px hsla(0, 0%, 100%, 0.3);
}

.vf-theme-minimal .vf-box-lid {
  background: linear-gradient(145deg, 
    hsl(220, 70%, 60%) 0%,
    hsl(225, 75%, 50%) 100%
  );
}

.vf-theme-clean .vf-box-lid {
  background: linear-gradient(145deg, 
    hsl(255, 75%, 65%) 0%,
    hsl(260, 80%, 58%) 100%
  );
}

.vf-theme-neon .vf-box-lid {
  background: linear-gradient(145deg, 
    hsl(270, 85%, 65%) 0%,
    hsl(280, 90%, 55%) 100%
  );
  box-shadow: 
    0 -3px 15px hsla(275, 100%, 50%, 0.3),
    inset 0 2px 2px hsla(0, 0%, 100%, 0.3);
}

.vf-box-lid-ribbon {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 100%;
  background: linear-gradient(90deg, 
    hsla(45, 100%, 65%, 0.7) 0%,
    hsla(50, 100%, 75%, 0.9) 50%,
    hsla(45, 100%, 65%, 0.7) 100%
  );
}

/* Bow on top - Premium golden bow */
.vf-box-bow {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 26px;
}

.vf-box-bow::before,
.vf-box-bow::after {
  content: '';
  position: absolute;
  top: 6px;
  width: 22px;
  height: 18px;
  background: linear-gradient(145deg, 
    hsl(45, 100%, 60%) 0%,
    hsl(40, 100%, 50%) 100%
  );
  border-radius: 50% 50% 40% 40%;
  box-shadow: 
    0 4px 10px hsla(45, 100%, 40%, 0.4),
    inset 0 2px 4px hsla(0, 0%, 100%, 0.4),
    inset 0 -2px 4px hsla(40, 100%, 30%, 0.2);
}

.vf-box-bow::before {
  left: 0;
  transform: rotate(-25deg);
}

.vf-box-bow::after {
  right: 0;
  transform: rotate(25deg);
}

/* Center knot of bow - Shimmering gold */
.vf-box-lid::after {
  content: '';
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  background: linear-gradient(145deg, 
    hsl(50, 100%, 65%) 0%,
    hsl(45, 100%, 55%) 100%
  );
  border-radius: 50%;
  box-shadow: 
    0 4px 12px hsla(45, 100%, 45%, 0.5),
    inset 0 2px 4px hsla(0, 0%, 100%, 0.5);
}

/* Prize Display */
.vf-prize-display {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  z-index: 10;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.vf-prize-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(145deg, 
    hsl(45, 100%, 55%) 0%,
    hsl(35, 100%, 50%) 100%
  );
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: 
    0 8px 24px hsla(40, 100%, 50%, 0.4),
    inset 0 2px 4px hsla(0, 0%, 100%, 0.4);
  animation: vf-prize-glow 1.5s ease-in-out infinite;
}

@keyframes vf-prize-glow {
  0%, 100% { box-shadow: 0 8px 24px hsla(40, 100%, 50%, 0.4); }
  50% { box-shadow: 0 8px 36px hsla(40, 100%, 50%, 0.6); }
}

.vf-prize-icon svg {
  width: 32px;
  height: 32px;
}

/* Tap to Open Hint */
.vf-tap-hint {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 14px;
  background: linear-gradient(135deg, var(--vf-primary) 0%, var(--vf-primary-hover) 100%);
  color: white;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 20px;
  box-shadow: 0 4px 12px hsla(220, 70%, 50%, 0.3);
  animation: vf-hint-pulse 1.5s ease-in-out infinite;
  z-index: 5;
}

@keyframes vf-hint-pulse {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: 1; }
  50% { transform: translateX(-50%) scale(1.05); opacity: 0.9; }
}

.vf-theme-neon .vf-tap-hint {
  background: linear-gradient(135deg, hsl(265, 90%, 60%) 0%, hsl(265, 90%, 50%) 100%);
  box-shadow: 0 4px 15px hsla(265, 90%, 55%, 0.4), 0 0 20px hsla(265, 90%, 60%, 0.2);
}

/* Confetti Container */
.vf-confetti-container {
  position: absolute;
  top: 35%;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 20;
}

.vf-confetti {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  opacity: 0;
  will-change: transform, opacity;
}

.vf-confetti:nth-child(3n) { border-radius: 50%; }
.vf-confetti:nth-child(3n+1) { border-radius: 0; }
.vf-confetti:nth-child(3n+2) { width: 5px; height: 12px; }

/* ============================================
   GIFT BOX ANIMATIONS
   ============================================ */

/* Idle floating */
.vf-giftbox:not(.vf-giftbox--disabled):not(.vf-giftbox--opening):not(.vf-giftbox--opened) .vf-box-wrap {
  animation: vf-idle 3s ease-in-out infinite;
}

@keyframes vf-idle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Pop Animation */
.vf-giftbox--opening.vf-anim-pop .vf-box-wrap {
  animation: vf-shake 0.4s ease-out;
}

@keyframes vf-shake {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-4deg); }
  40% { transform: rotate(4deg); }
  60% { transform: rotate(-3deg); }
  80% { transform: rotate(2deg); }
}

.vf-giftbox--opening.vf-anim-pop .vf-box-lid {
  animation: vf-lid-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes vf-lid-pop {
  0% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-70px) rotate(-15deg); }
  100% { transform: translateY(-60px) rotate(-10deg); opacity: 0.5; }
}

/* Spin Animation */
.vf-giftbox--opening.vf-anim-spin .vf-box-wrap {
  animation: vf-spin 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes vf-spin {
  0% { transform: rotate(0) scale(1); }
  50% { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}

.vf-giftbox--opening.vf-anim-spin .vf-box-lid {
  animation: vf-lid-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s forwards;
}

/* Confetti Animation */
.vf-giftbox--opening.vf-anim-confetti .vf-box-wrap {
  animation: vf-shake 0.4s ease-out;
}

.vf-giftbox--opening.vf-anim-confetti .vf-box-lid {
  animation: vf-lid-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.vf-giftbox--opening .vf-confetti {
  animation: vf-confetti-fly 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes vf-confetti-fly {
  0% { opacity: 1; transform: translate(0, 0) rotate(0) scale(0); }
  20% { opacity: 1; transform: translate(calc(var(--vf-x) * 0.4), calc(var(--vf-y) * 0.4)) rotate(180deg) scale(1.1); }
  100% { opacity: 0; transform: translate(var(--vf-x), calc(var(--vf-y) + 100px)) rotate(720deg) scale(0.4); }
}

/* Burst effect */
.vf-giftbox--opening::before {
  content: '';
  position: absolute;
  top: 30%;
  left: 50%;
  width: 120px;
  height: 120px;
  margin-left: -60px;
  border-radius: 50%;
  background: radial-gradient(circle, hsla(45, 100%, 70%, 0.5) 0%, transparent 70%);
  animation: vf-burst 0.6s ease-out forwards;
  pointer-events: none;
}

@keyframes vf-burst {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.5); opacity: 1; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* Opened State */
.vf-giftbox--opened .vf-prize-display {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.vf-giftbox--opened .vf-box-wrap {
  opacity: 0.2;
  transform: scale(0.9);
  transition: all 0.4s ease;
}

.vf-box-lid-ribbon {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 100%;
  background: linear-gradient(90deg, 
    hsla(45, 100%, 65%, 0.7) 0%,
    hsla(50, 100%, 75%, 0.9) 50%,
    hsla(45, 100%, 65%, 0.7) 100%
  );
  box-shadow: 0 0 8px hsla(45, 100%, 60%, 0.3);
  border-radius: 2px 2px 0 0;
}

/* Prize Display - Modern reveal */
.vf-prize-display {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  z-index: 10;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.vf-prize-icon {
  width: 70px;
  height: 70px;
  background: linear-gradient(145deg, 
    hsl(142, 70%, 50%) 0%,
    hsl(142, 75%, 40%) 100%
  );
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: 
    0 10px 30px hsla(142, 71%, 45%, 0.5),
    0 0 60px hsla(142, 71%, 45%, 0.3),
    inset 0 2px 4px hsla(0, 0%, 100%, 0.3);
  animation: vf-prize-pulse 2s ease-in-out infinite;
}

@keyframes vf-prize-pulse {
  0%, 100% { box-shadow: 0 10px 30px hsla(142, 71%, 45%, 0.5), 0 0 60px hsla(142, 71%, 45%, 0.3); }
  50% { box-shadow: 0 10px 40px hsla(142, 71%, 45%, 0.7), 0 0 80px hsla(142, 71%, 45%, 0.5); }
}

.vf-prize-icon svg {
  width: 36px;
  height: 36px;
}

/* ============================================
   GIFT BOX ANIMATIONS - Premium 2026
   ============================================ */

/* Idle floating animation */
.vf-giftbox:not(.vf-giftbox--disabled):not(.vf-giftbox--opening):not(.vf-giftbox--opened) {
  animation: vf-idle-float 4s ease-in-out infinite;
}

@keyframes vf-idle-float {
  0%, 100% { transform: translateY(0) rotateX(0) rotateY(0); }
  25% { transform: translateY(-6px) rotateX(2deg) rotateY(-2deg); }
  50% { transform: translateY(-3px) rotateX(0) rotateY(0); }
  75% { transform: translateY(-6px) rotateX(-2deg) rotateY(2deg); }
}

/* ============================================
   PREMIUM 2026 FIREWORK ANIMATION
   Multi-layered spectacular explosion effect
   ============================================ */

/* Stage 1: Intense charge-up shake */
.vf-giftbox--opening.vf-anim-pop {
  animation: vf-firework-charge 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes vf-firework-charge {
  0%, 100% { transform: scale(1) rotate(0); }
  10% { transform: scale(0.95) rotate(-4deg); }
  20% { transform: scale(0.92) rotate(4deg); }
  30% { transform: scale(0.95) rotate(-3deg); }
  40% { transform: scale(0.98) rotate(3deg); }
  50% { transform: scale(1.15) rotate(0); filter: brightness(1.3); }
  60% { transform: scale(1.12) rotate(-1deg); }
  70% { transform: scale(1.18) rotate(1deg); }
  80% { transform: scale(1.1) rotate(0); }
  90% { transform: scale(1.05); }
}

/* Stage 2: Lid launches with arc trajectory */
.vf-giftbox--opening.vf-anim-pop .vf-box-lid {
  animation: vf-lid-rocket 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes vf-lid-rocket {
  0% { 
    transform: translateY(0) rotateX(0) rotateZ(0) scale(1); 
    opacity: 1;
  }
  15% { 
    transform: translateY(-30px) rotateX(-10deg) rotateZ(5deg) scale(1.1); 
    opacity: 1;
  }
  40% { 
    transform: translateY(-100px) rotateX(-35deg) rotateZ(-15deg) scale(1.15); 
    opacity: 1;
  }
  60% { 
    transform: translateY(-160px) rotateX(-55deg) rotateZ(20deg) scale(1.05); 
    opacity: 0.8;
  }
  80% { 
    transform: translateY(-200px) rotateX(-75deg) rotateZ(-10deg) scale(0.9); 
    opacity: 0.5;
  }
  100% { 
    transform: translateY(-240px) rotateX(-90deg) rotateZ(30deg) scale(0.7); 
    opacity: 0;
  }
}

/* Stage 3: Bright white flash at explosion moment */
.vf-giftbox--opening.vf-anim-pop::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, 
    hsla(45, 100%, 95%, 1) 0%, 
    hsla(40, 100%, 70%, 0.8) 15%, 
    hsla(30, 100%, 55%, 0.5) 30%,
    hsla(350, 100%, 60%, 0.3) 50%,
    hsla(280, 100%, 60%, 0.15) 70%,
    transparent 85%
  );
  transform: translate(-50%, -50%) scale(0);
  border-radius: 50%;
  animation: vf-flash-burst 0.8s ease-out 0.15s forwards;
  pointer-events: none;
  z-index: 15;
}

@keyframes vf-flash-burst {
  0% { 
    transform: translate(-50%, -50%) scale(0); 
    opacity: 1;
    filter: blur(0px);
  }
  20% { 
    transform: translate(-50%, -50%) scale(0.8); 
    opacity: 1;
    filter: blur(2px);
  }
  40% { 
    transform: translate(-50%, -50%) scale(1.5); 
    opacity: 0.9;
    filter: blur(4px);
  }
  70% { 
    transform: translate(-50%, -50%) scale(2.2); 
    opacity: 0.5;
    filter: blur(8px);
  }
  100% { 
    transform: translate(-50%, -50%) scale(3); 
    opacity: 0;
    filter: blur(15px);
  }
}

/* Stage 4: Golden ring expansion */
.vf-giftbox--opening.vf-anim-pop::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  border: 4px solid hsla(45, 100%, 65%, 0.9);
  background: transparent;
  transform: translate(-50%, -50%) scale(0);
  border-radius: 50%;
  animation: vf-ring-expand 1s ease-out 0.2s forwards;
  pointer-events: none;
  z-index: 14;
  box-shadow: 
    0 0 20px hsla(45, 100%, 60%, 0.6),
    0 0 40px hsla(45, 100%, 50%, 0.3),
    inset 0 0 15px hsla(45, 100%, 70%, 0.4);
}

@keyframes vf-ring-expand {
  0% { 
    transform: translate(-50%, -50%) scale(0); 
    opacity: 1;
    border-width: 6px;
  }
  50% { 
    transform: translate(-50%, -50%) scale(2); 
    opacity: 0.8;
    border-width: 3px;
  }
  100% { 
    transform: translate(-50%, -50%) scale(4); 
    opacity: 0;
    border-width: 1px;
  }
}

/* Stage 5: Firework particles with gravity arc */
.vf-giftbox--opening.vf-anim-pop .vf-confetti-container {
  opacity: 1;
  visibility: visible;
}

.vf-giftbox--opening.vf-anim-pop .vf-confetti {
  animation: vf-star-burst 1.4s cubic-bezier(0.15, 0.85, 0.35, 1.1) forwards !important;
  border-radius: 50%;
  box-shadow: 
    0 0 8px currentColor, 
    0 0 16px currentColor,
    0 0 24px currentColor;
}

@keyframes vf-star-burst {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1.5);
    filter: brightness(2);
  }
  10% {
    opacity: 1;
    transform: translate(calc(var(--vf-x) * 0.15), calc(var(--vf-y) * 0.15 - 30px)) scale(1.8);
    filter: brightness(2.5);
  }
  30% {
    opacity: 1;
    transform: translate(calc(var(--vf-x) * 0.5), calc(var(--vf-y) * 0.5 - 60px)) scale(1.4);
    filter: brightness(1.8);
  }
  60% {
    opacity: 0.8;
    transform: translate(calc(var(--vf-x) * 0.85), calc(var(--vf-y) * 0.85 - 30px)) scale(1);
    filter: brightness(1.3);
  }
  100% {
    opacity: 0;
    transform: translate(var(--vf-x), calc(var(--vf-y) + 60px)) scale(0.3);
    filter: brightness(0.8);
  }
}

/* Sparkle twinkle effect on particles */
.vf-giftbox--opening.vf-anim-pop .vf-confetti:nth-child(odd) {
  animation: vf-star-burst 1.4s cubic-bezier(0.15, 0.85, 0.35, 1.1) forwards,
             vf-twinkle 0.3s ease-in-out infinite !important;
}

@keyframes vf-twinkle {
  0%, 100% { filter: brightness(1.5); }
  50% { filter: brightness(2.5); }
}

/* Secondary trailing sparks */
.vf-giftbox--opening.vf-anim-pop .vf-confetti:nth-child(4n) {
  animation-duration: 1.8s !important;
  box-shadow: 
    0 0 4px currentColor, 
    0 0 8px currentColor,
    0 0 20px hsla(45, 100%, 70%, 0.5);
}

.vf-giftbox--opening.vf-anim-pop .vf-confetti:nth-child(4n+1) {
  animation-delay: 0.05s !important;
}

.vf-giftbox--opening.vf-anim-pop .vf-confetti:nth-child(4n+2) {
  animation-delay: 0.1s !important;
}

.vf-giftbox--opening.vf-anim-pop .vf-confetti:nth-child(4n+3) {
  animation-delay: 0.15s !important;
}

/* Spin Animation - Dramatic 3D rotation */
.vf-giftbox--opening.vf-anim-spin {
  animation: vf-box-spin-3d 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes vf-box-spin-3d {
  0% { 
    transform: rotateY(0) rotateX(0) scale(1); 
  }
  25% { 
    transform: rotateY(180deg) rotateX(10deg) scale(1.1); 
  }
  50% { 
    transform: rotateY(360deg) rotateX(-10deg) scale(1.15); 
  }
  75% { 
    transform: rotateY(540deg) rotateX(5deg) scale(1.1); 
  }
  100% { 
    transform: rotateY(720deg) rotateX(0) scale(1); 
  }
}

.vf-giftbox--opening.vf-anim-spin .vf-box-lid {
  animation: vf-lid-spin-reveal 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.7s forwards;
}

@keyframes vf-lid-spin-reveal {
  0% { 
    transform: translateY(0) rotateX(0); 
    opacity: 1;
  }
  100% { 
    transform: translateY(-90px) rotateX(-50deg); 
    opacity: 0.5;
  }
}

/* Confetti Animation - Explosive celebration */
.vf-giftbox--opening.vf-anim-confetti {
  animation: vf-box-confetti-burst 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes vf-box-confetti-burst {
  0% { transform: scale(1); }
  20% { transform: scale(0.92); }
  40% { transform: scale(1.08); }
  60% { transform: scale(0.98); }
  80% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

.vf-giftbox--opening.vf-anim-confetti .vf-box-lid {
  animation: vf-lid-confetti-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes vf-lid-confetti-pop {
  0% { 
    transform: translateY(0) rotateX(0) scale(1); 
  }
  40% { 
    transform: translateY(-100px) rotateX(-40deg) scale(1.1); 
  }
  100% { 
    transform: translateY(-80px) rotateX(-35deg) scale(1); 
    opacity: 0.5;
  }
}

/* Confetti particles - premium style */
.vf-confetti-container {
  position: absolute;
  top: 40%;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 20;
}

.vf-confetti {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  opacity: 0;
  will-change: transform, opacity;
}

/* Different confetti shapes */
.vf-confetti:nth-child(3n) {
  border-radius: 50%;
}

.vf-confetti:nth-child(3n+1) {
  border-radius: 0;
  transform: rotate(45deg);
}

.vf-confetti:nth-child(3n+2) {
  width: 6px;
  height: 14px;
  border-radius: 2px;
}

.vf-giftbox--opening.vf-anim-confetti .vf-confetti {
  animation: vf-confetti-burst-premium 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes vf-confetti-burst-premium {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(0) scale(0);
  }
  15% {
    opacity: 1;
    transform: translate(calc(var(--vf-x) * 0.5), calc(var(--vf-y) * 0.5)) rotate(180deg) scale(1.2);
  }
  50% {
    opacity: 1;
    transform: translate(var(--vf-x), var(--vf-y)) rotate(540deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(calc(var(--vf-x) * 1.2), calc(var(--vf-y) + 120px)) rotate(1080deg) scale(0.3);
  }
}

/* Sparkles effect on all animations */
.vf-giftbox--opening::after {
  content: '';
  position: absolute;
  top: 20%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin-left: -100px;
  background: radial-gradient(circle, hsla(50, 100%, 70%, 0.4) 0%, transparent 60%);
  animation: vf-sparkle-burst 0.8s ease-out forwards;
  pointer-events: none;
}

@keyframes vf-sparkle-burst {
  0% { 
    transform: scale(0); 
    opacity: 0; 
  }
  30% { 
    transform: scale(1.2); 
    opacity: 1; 
  }
  100% { 
    transform: scale(2); 
    opacity: 0; 
  }
}

/* Opened State - Prize revealed */
.vf-giftbox--opened .vf-prize-display {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.vf-giftbox--opened .vf-box-base {
  opacity: 0.25;
  filter: blur(2px);
  transform: scale(0.95);
  transition: all 0.4s ease;
}

.vf-giftbox--opened .vf-box-lid {
  opacity: 0;
  transition: opacity 0.3s ease 0.5s;
}

.vf-giftbox--opened .vf-box-ribbon {
  opacity: 0.25;
}

/* ============================================
   PRIZE RESULT INLINE - Premium Design
   ============================================ */

.vf-prize-result {
  background: linear-gradient(145deg, 
    hsla(142, 70%, 97%, 1) 0%, 
    hsla(142, 60%, 94%, 1) 100%
  );
  border: 2px solid hsla(142, 70%, 50%, 0.3);
  border-radius: 16px;
  padding: 28px 24px;
  margin-top: 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
  animation: vf-prize-reveal 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes vf-prize-reveal {
  0% { 
    opacity: 0; 
    transform: scale(0.8) translateY(20px); 
  }
  100% { 
    opacity: 1; 
    transform: scale(1) translateY(0); 
  }
}

/* Celebration sparkles */
.vf-prize-result::before {
  content: '✨';
  position: absolute;
  top: 12px;
  left: 16px;
  font-size: 20px;
  animation: vf-sparkle-float 2s ease-in-out infinite;
}

.vf-prize-result::after {
  content: '🎉';
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 20px;
  animation: vf-sparkle-float 2s ease-in-out infinite 0.5s;
}

@keyframes vf-sparkle-float {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-5px) rotate(10deg); }
}

.vf-theme-neon .vf-prize-result {
  background: linear-gradient(145deg, 
    hsla(140, 100%, 50%, 0.15) 0%, 
    hsla(140, 100%, 40%, 0.1) 100%
  );
  border-color: hsla(140, 100%, 50%, 0.4);
  box-shadow: 
    0 0 40px hsla(140, 100%, 50%, 0.2),
    inset 0 0 30px hsla(140, 100%, 50%, 0.05);
}

.vf-prize-result-title {
  font-size: 14px;
  font-weight: 600;
  color: hsl(142, 60%, 40%);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.vf-theme-neon .vf-prize-result-title {
  color: hsl(140, 100%, 50%);
  text-shadow: 0 0 10px hsla(140, 100%, 50%, 0.5);
}

.vf-prize-result-name {
  font-size: 24px;
  font-weight: 800;
  color: var(--vf-text);
  margin-bottom: 16px;
  line-height: 1.2;
}

.vf-prize-code {
  display: inline-block;
  padding: 14px 28px;
  background: linear-gradient(135deg, 
    hsl(142, 70%, 45%) 0%, 
    hsl(142, 75%, 35%) 100%
  );
  border: none;
  border-radius: 10px;
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 3px;
  color: white;
  margin-bottom: 14px;
  box-shadow: 
    0 6px 20px hsla(142, 70%, 40%, 0.4),
    inset 0 1px 0 hsla(0, 0%, 100%, 0.2);
  position: relative;
  overflow: hidden;
}

.vf-prize-code::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 20%,
    hsla(0, 0%, 100%, 0.2) 40%,
    hsla(0, 0%, 100%, 0.3) 50%,
    hsla(0, 0%, 100%, 0.2) 60%,
    transparent 80%
  );
  background-size: 200% 100%;
  animation: vf-shimmer 2.5s ease-in-out infinite;
}

.vf-theme-neon .vf-prize-code {
  background: linear-gradient(135deg, hsl(140, 100%, 45%) 0%, hsl(140, 100%, 30%) 100%);
  box-shadow: 
    0 6px 24px hsla(140, 100%, 50%, 0.5),
    0 0 30px hsla(140, 100%, 50%, 0.3);
}

/* Prize Code Wrapper - Click to copy */
.vf-prize-code-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px 14px 28px;
  background: linear-gradient(135deg, hsl(142, 70%, 45%) 0%, hsl(142, 75%, 35%) 100%);
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 6px 20px hsla(142, 70%, 40%, 0.4);
}

.vf-prize-code-wrapper:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 25px hsla(142, 70%, 40%, 0.5);
}

.vf-prize-code-wrapper:active {
  transform: scale(0.98);
}

.vf-prize-code-text {
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 3px;
  color: white;
}

/* Copy Icon - Fixed width prevents layout shift */
.vf-copy-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: hsla(0, 0%, 100%, 0.9);
  transition: transform 0.2s ease, opacity 0.15s ease;
  flex-shrink: 0;
}

.vf-copy-icon svg {
  width: 20px;
  height: 20px;
}

.vf-copy-icon--copied {
  animation: vf-icon-morph 0.3s ease;
  color: white;
}

@keyframes vf-icon-morph {
  0% { transform: scale(1); opacity: 1; }
  40% { transform: scale(0.6); opacity: 0.5; }
  100% { transform: scale(1); opacity: 1; }
}

/* Theme-specific prize code wrapper */
.vf-theme-clean .vf-prize-code-wrapper {
  background: linear-gradient(135deg, hsl(250, 70%, 55%) 0%, hsl(270, 80%, 45%) 100%);
  box-shadow: 0 6px 20px hsla(250, 70%, 50%, 0.4);
}

.vf-theme-clean .vf-prize-code-wrapper:hover {
  box-shadow: 0 8px 25px hsla(250, 70%, 50%, 0.5);
}

.vf-theme-neon .vf-prize-code-wrapper {
  background: linear-gradient(135deg, hsl(140, 100%, 45%) 0%, hsl(140, 100%, 30%) 100%);
  box-shadow: 
    0 6px 24px hsla(140, 100%, 50%, 0.5),
    0 0 30px hsla(140, 100%, 50%, 0.3);
}

.vf-theme-neon .vf-prize-code-wrapper:hover {
  box-shadow: 
    0 8px 30px hsla(140, 100%, 50%, 0.6),
    0 0 40px hsla(140, 100%, 50%, 0.4);
}

/* More Chances Section - After winning with chances left */
.vf-more-chances-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed var(--vf-border);
  text-align: center;
}

.vf-more-chances-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--vf-primary);
  margin-bottom: 12px;
}

.vf-theme-neon .vf-more-chances-text {
  text-shadow: 0 0 10px hsla(265, 90%, 65%, 0.5);
}

/* Open Another Gift Button - Match START TASK styling per theme */
.vf-widget .vf-open-another-btn {
  position: relative;
  background: linear-gradient(135deg, hsl(220, 85%, 52%) 0%, hsl(225, 90%, 42%) 100%) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 3px hsla(220, 90%, 15%, 0.5);
  font-weight: 800 !important;
  letter-spacing: 0.5px;
  padding: 10px 24px !important;
  border-radius: 50px !important;
  border: none !important;
  box-shadow: 0 4px 15px hsla(220, 85%, 45%, 0.5);
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.vf-widget .vf-open-another-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, hsla(0, 0%, 100%, 0.3) 0%, hsla(0, 0%, 100%, 0) 100%);
  border-radius: 50px 50px 0 0;
  pointer-events: none;
}

.vf-widget .vf-open-another-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 25px hsla(220, 85%, 45%, 0.6);
}

.vf-widget .vf-open-another-btn:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 2px 10px hsla(220, 85%, 45%, 0.4);
}

/* Clean theme - Purple gradient (like START TASK) */
.vf-theme-clean .vf-open-another-btn {
  background: linear-gradient(135deg, hsl(250, 85%, 60%) 0%, hsl(250, 90%, 50%) 100%) !important;
  box-shadow: 0 4px 15px hsla(250, 85%, 55%, 0.5);
}

.vf-theme-clean .vf-open-another-btn:hover {
  box-shadow: 0 8px 25px hsla(250, 85%, 55%, 0.6);
}

/* Neon theme - Glowing purple (like START TASK) */
.vf-theme-neon .vf-open-another-btn {
  background: linear-gradient(135deg, hsl(265, 90%, 65%) 0%, hsl(265, 90%, 55%) 100%) !important;
  box-shadow: 
    0 4px 15px hsla(265, 90%, 60%, 0.5),
    0 0 30px hsla(265, 90%, 60%, 0.3);
}

.vf-theme-neon .vf-open-another-btn:hover {
  box-shadow: 
    0 8px 25px hsla(265, 90%, 60%, 0.6),
    0 0 40px hsla(265, 90%, 60%, 0.4);
}

/* Green Claim Prize Button - matches prize card theme */
.vf-btn--claim {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px !important;
  font-size: 15px;
  font-weight: 700 !important;
  border-radius: 50px !important;
  background: linear-gradient(135deg, hsl(142, 70%, 50%) 0%, hsl(142, 75%, 40%) 100%) !important;
  color: #ffffff !important;
  text-decoration: none;
  border: none !important;
  box-shadow: 0 6px 20px hsla(142, 70%, 45%, 0.4);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.vf-btn--claim::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, hsla(0, 0%, 100%, 0.25) 0%, hsla(0, 0%, 100%, 0) 100%);
  border-radius: 50px 50px 0 0;
  pointer-events: none;
}

.vf-btn--claim:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 25px hsla(142, 70%, 45%, 0.5);
}

.vf-btn--claim:active {
  transform: translateY(1px) scale(0.98);
}

/* Neon theme claim button */
.vf-theme-neon .vf-btn--claim {
  background: linear-gradient(135deg, hsl(140, 100%, 45%) 0%, hsl(140, 100%, 30%) 100%) !important;
  box-shadow: 
    0 6px 24px hsla(140, 100%, 50%, 0.5),
    0 0 30px hsla(140, 100%, 50%, 0.3);
}

.vf-theme-neon .vf-btn--claim:hover {
  box-shadow: 
    0 8px 30px hsla(140, 100%, 50%, 0.6),
    0 0 40px hsla(140, 100%, 50%, 0.4);
}

/* Prize content text styling */
.vf-prize-content-text {
  font-size: 14px;
  color: var(--vf-text);
  padding: 12px 16px;
  background: var(--vf-bg-secondary);
  border-radius: 8px;
  margin-top: 8px;
}

/* ============================================
   LOSE RESULT CARD - Red "Better Luck Next Time"
   ============================================ */

.vf-lose-result {
  background: linear-gradient(145deg, 
    hsla(0, 70%, 97%, 1) 0%, 
    hsla(0, 60%, 94%, 1) 100%
  );
  border: 2px solid hsla(0, 70%, 55%, 0.3);
  border-radius: 16px;
  padding: 28px 24px;
  margin-top: 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
  animation: vf-lose-shake 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes vf-lose-shake {
  0%, 100% { transform: translateX(0); }
  10% { transform: translateX(-8px); }
  20% { transform: translateX(8px); }
  30% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  50% { transform: translateX(-4px); }
  60% { transform: translateX(4px); }
  70% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}

.vf-lose-icon {
  font-size: 56px;
  margin-bottom: 12px;
  animation: vf-sad-bounce 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes vf-sad-bounce {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.3); }
  70% { transform: scale(0.9); }
  100% { transform: scale(1); opacity: 1; }
}

.vf-lose-title {
  font-size: 20px;
  font-weight: 800;
  color: hsl(0, 70%, 45%);
  margin-bottom: 8px;
}

.vf-lose-subtitle {
  font-size: 14px;
  color: hsl(0, 30%, 50%);
  margin-bottom: 20px;
}

.vf-lose-result .vf-try-again-btn {
  background: linear-gradient(135deg, hsl(0, 70%, 55%) 0%, hsl(0, 75%, 45%) 100%);
  color: white;
  font-weight: 700;
  padding: 12px 28px;
  border-radius: 50px;
  box-shadow: 0 4px 15px hsla(0, 70%, 50%, 0.4);
  border: none;
  transition: all 0.25s ease;
}

.vf-lose-result .vf-try-again-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px hsla(0, 70%, 50%, 0.5);
}

/* Neon theme lose result */
.vf-theme-neon .vf-lose-result {
  background: linear-gradient(145deg, 
    hsla(0, 100%, 50%, 0.15) 0%, 
    hsla(0, 100%, 40%, 0.1) 100%
  );
  border-color: hsla(0, 100%, 50%, 0.4);
  box-shadow: 
    0 0 40px hsla(0, 100%, 50%, 0.2),
    inset 0 0 30px hsla(0, 100%, 50%, 0.05);
}

.vf-theme-neon .vf-lose-title {
  color: hsl(0, 100%, 65%);
  text-shadow: 0 0 10px hsla(0, 100%, 50%, 0.5);
}

.vf-theme-neon .vf-lose-subtitle {
  color: hsl(0, 50%, 70%);
}

.vf-theme-neon .vf-lose-result .vf-try-again-btn {
  background: linear-gradient(135deg, hsl(0, 90%, 55%) 0%, hsl(0, 95%, 45%) 100%);
  box-shadow: 
    0 4px 15px hsla(0, 90%, 50%, 0.5),
    0 0 25px hsla(0, 90%, 50%, 0.3);
}

/* ============================================
   DEBUG OVERLAY - Collapsible window-style panel
   ============================================ */

.vf-debug-overlay {
  position: fixed;
  bottom: 10px;
  left: 10px;
  width: 280px;
  max-height: none;
  overflow: hidden;
  background: hsl(220, 20%, 12%);
  color: hsl(0, 0%, 90%);
  font-size: 11px;
  font-family: 'SF Mono', Monaco, monospace;
  border-radius: 12px;
  z-index: 30;
  box-shadow: 0 10px 40px hsla(0, 0%, 0%, 0.5);
  border: 1px solid hsl(220, 20%, 20%);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.vf-debug-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: linear-gradient(180deg, hsl(220, 20%, 16%) 0%, hsl(220, 20%, 12%) 100%);
  border-bottom: 1px solid hsl(220, 20%, 22%);
  cursor: default;
}

.vf-debug-title {
  font-weight: 700;
  color: hsl(45, 100%, 60%);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.vf-debug-controls {
  display: flex;
  gap: 8px;
  margin-left: 16px;
}

/* Toggle button - window-like controls */
.vf-debug-toggle {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  background: hsl(140, 70%, 45%);
  color: white;
  padding: 0;
}

.vf-debug-toggle svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  stroke-width: 2.5;
  fill: none;
}

.vf-debug-toggle:hover {
  background: hsl(140, 70%, 55%);
  transform: scale(1.1);
}

/* When minimized, show blue square icon to expand */
.vf-debug-overlay.vf-debug--minimized .vf-debug-toggle {
  background: hsl(200, 80%, 50%);
}

.vf-debug-overlay.vf-debug--minimized .vf-debug-toggle:hover {
  background: hsl(200, 80%, 60%);
}

.vf-debug-content {
  padding: 14px;
  transition: all 0.3s ease;
}

/* Minimized state */
.vf-debug-overlay.vf-debug--minimized {
  width: auto;
  min-width: 140px;
}

.vf-debug-overlay.vf-debug--minimized .vf-debug-content {
  display: none;
}

.vf-debug-overlay.vf-debug--minimized .vf-debug-header {
  border-bottom: none;
}

.vf-debug-task {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid hsl(220, 20%, 20%);
}

.vf-debug-task-status {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: hsl(0, 0%, 30%);
  border: 2px solid hsl(0, 0%, 40%);
  flex-shrink: 0;
}

.vf-debug-task-status.vf-debug-task-status--clicked {
  background: hsl(40, 100%, 50%);
  border-color: hsl(40, 100%, 60%);
  box-shadow: 0 0 8px hsla(40, 100%, 50%, 0.5);
}

.vf-debug-task-status.vf-debug-task-status--completed {
  background: hsl(140, 100%, 45%);
  border-color: hsl(140, 100%, 55%);
  box-shadow: 0 0 8px hsla(140, 100%, 50%, 0.5);
}

.vf-debug-task-name {
  flex: 1;
  font-size: 10px;
  color: hsl(220, 10%, 70%);
}

.vf-debug-complete-btn {
  padding: 4px 8px;
  background: hsl(140, 60%, 35%);
  color: white;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}

.vf-debug-complete-btn:hover {
  background: hsl(140, 60%, 45%);
  transform: scale(1.05);
}

.vf-debug-state {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid hsl(220, 20%, 25%);
}

.vf-debug-state-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
}

.vf-debug-state-label {
  color: hsl(220, 10%, 55%);
}

.vf-debug-state-value {
  color: hsl(180, 100%, 60%);
  font-weight: 600;
}

/* ============================================
   LOADING STATES
   ============================================ */

.vf-loading {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: vf-spin 0.6s linear infinite;
}

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

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 480px) {
  .vf-widget {
    font-size: 13px;
  }
  
  .vf-task {
    padding: 10px;
    gap: 10px;
  }
  
  .vf-task-icon {
    width: 32px;
    height: 32px;
  }
  
  .vf-btn {
    padding: 8px 12px;
    min-width: 70px;
  }
  
  .vf-giftbox {
    width: 100px;
    height: 100px;
  }
  
  .vf-box-base {
    height: 60px;
  }
  
  .vf-box-lid {
    top: 25px;
    height: 22px;
  }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .vf-widget *,
  .vf-widget *::before,
  .vf-widget *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

.vf-widget button:focus-visible,
.vf-widget input:focus-visible {
  outline: 2px solid var(--vf-primary);
  outline-offset: 2px;
}

/* Screen reader only */
.vf-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================
   ALL PRIZES CLAIMED CARD - 2026 Premium Design
   ============================================ */

/* Base styles for All Claimed card */
.vf-all-claimed-result {
  text-align: center;
  padding: 2rem 1.5rem;
  border-radius: 1.25rem;
  position: relative;
  overflow: hidden;
}

.vf-all-claimed-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.vf-all-claimed-icon {
  font-size: 4rem;
  margin-bottom: 0.75rem;
  animation: vf-trophy-float 2s ease-in-out infinite;
  position: relative;
  z-index: 1;
}

.vf-all-claimed-title {
  font-size: 1.75rem;
  font-weight: 800;
  margin-bottom: 0.75rem;
  position: relative;
  z-index: 1;
}

.vf-all-claimed-subtitle {
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 280px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* ========== MINIMAL THEME - Light & Professional ========== */
.vf-theme-minimal .vf-all-claimed-result {
  background: linear-gradient(135deg, 
    hsl(45, 100%, 97%) 0%, 
    hsl(40, 80%, 94%) 50%,
    hsl(35, 100%, 96%) 100%);
  border: 2px solid hsl(45, 80%, 55%);
  box-shadow: 
    0 4px 24px hsla(45, 100%, 50%, 0.2),
    inset 0 1px 0 hsla(0, 0%, 100%, 0.8);
}

.vf-theme-minimal .vf-all-claimed-glow {
  background: radial-gradient(circle at 30% 20%, hsla(45, 100%, 60%, 0.15) 0%, transparent 50%);
}

.vf-theme-minimal .vf-all-claimed-icon {
  filter: drop-shadow(0 4px 12px hsla(45, 100%, 40%, 0.3));
}

.vf-theme-minimal .vf-all-claimed-title {
  background: linear-gradient(135deg, hsl(45, 100%, 35%) 0%, hsl(35, 100%, 28%) 50%, hsl(40, 100%, 38%) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.vf-theme-minimal .vf-all-claimed-subtitle {
  color: hsl(0, 0%, 35%);
}

.vf-theme-minimal .vf-all-claimed-decoration .vf-sparkle,
.vf-theme-minimal .vf-all-claimed-decoration .vf-trophy {
  filter: brightness(0.8) saturate(1.2);
}

/* ========== CLEAN THEME - Soft Purple Accents ========== */
.vf-theme-clean .vf-all-claimed-result {
  background: linear-gradient(135deg, 
    hsl(250, 60%, 98%) 0%, 
    hsl(270, 50%, 96%) 50%,
    hsl(280, 55%, 97%) 100%);
  border: 2px solid hsl(250, 70%, 65%);
  box-shadow: 
    0 4px 24px hsla(250, 80%, 60%, 0.2),
    inset 0 1px 0 hsla(0, 0%, 100%, 0.9);
}

.vf-theme-clean .vf-all-claimed-glow {
  background: radial-gradient(circle at 30% 20%, hsla(250, 80%, 70%, 0.12) 0%, transparent 50%),
              radial-gradient(circle at 70% 80%, hsla(280, 70%, 65%, 0.08) 0%, transparent 40%);
}

.vf-theme-clean .vf-all-claimed-icon {
  filter: drop-shadow(0 4px 12px hsla(250, 80%, 50%, 0.3));
}

.vf-theme-clean .vf-all-claimed-title {
  background: linear-gradient(135deg, hsl(250, 80%, 55%) 0%, hsl(280, 70%, 50%) 50%, hsl(260, 75%, 58%) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.vf-theme-clean .vf-all-claimed-subtitle {
  color: hsl(250, 20%, 40%);
}

/* ========== NEON THEME - Matching Concept with Purple/Cyan ========== */
.vf-theme-neon .vf-all-claimed-result {
  background: linear-gradient(135deg, 
    hsla(265, 90%, 18%, 0.55) 0%, 
    hsla(230, 25%, 10%, 0.95) 40%,
    hsla(180, 100%, 15%, 0.35) 100%);
  border: 1px solid hsla(180, 100%, 50%, 0.25);
  box-shadow: 
    0 8px 30px hsla(265, 90%, 60%, 0.18),
    0 0 40px hsla(180, 100%, 50%, 0.10),
    inset 0 1px 0 hsla(0, 0%, 100%, 0.08);
}

.vf-theme-neon .vf-all-claimed-glow {
  background: radial-gradient(circle at 30% 20%, hsla(265, 90%, 70%, 0.12) 0%, transparent 50%),
              radial-gradient(circle at 70% 80%, hsla(180, 100%, 60%, 0.08) 0%, transparent 40%);
}

.vf-theme-neon .vf-all-claimed-icon {
  filter: drop-shadow(0 4px 12px hsla(265, 90%, 60%, 0.4));
}

.vf-theme-neon .vf-all-claimed-title {
  background: linear-gradient(135deg, hsl(265, 90%, 70%) 0%, hsl(180, 100%, 60%) 50%, hsl(265, 90%, 75%) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.vf-theme-neon .vf-all-claimed-subtitle {
  color: hsla(0, 0%, 100%, 0.82);
}

.vf-all-claimed-decoration {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.25rem;
  font-size: 1.5rem;
  position: relative;
  z-index: 1;
}

.vf-all-claimed-decoration .vf-sparkle {
  animation: vf-twinkle 1.5s ease-in-out infinite;
}

.vf-all-claimed-decoration .vf-sparkle:first-child { 
  animation-delay: 0s; 
}

.vf-all-claimed-decoration .vf-trophy { 
  animation: vf-trophy-pulse 1s ease-in-out infinite;
  animation-delay: 0.5s; 
}

.vf-all-claimed-decoration .vf-sparkle:last-child { 
  animation-delay: 1s; 
}

@keyframes vf-trophy-float {
  0%, 100% { 
    transform: translateY(0) rotate(-3deg); 
  }
  50% { 
    transform: translateY(-8px) rotate(3deg); 
  }
}

@keyframes vf-trophy-pulse {
  0%, 100% { 
    transform: scale(1); 
    opacity: 1;
  }
  50% { 
    transform: scale(1.15); 
    opacity: 0.9;
  }
}

/* ==================================================
   CUSTOM THEME - BASE STYLES REMOVED
   Custom theme button styles are FULLY controlled by customCss
   which is injected into <head> AFTER this stylesheet loads.
   No fallbacks, no overrides - customCss has full control.
   ================================================== */

/* ==================================================
   NUCLEAR OVERRIDE (External site CSS protection)
   - For built-in themes: force Viralify button look even if the host site styles all buttons.
   - For CUSTOM theme: force the *custom variables* to win (no hardcoded gradients).
   ================================================== */

/* Built-in themes (NOT custom) */
html body .vf-widget:not(.vf-theme-custom) .vf-btn.vf-btn--start,
html body .vf-widget:not(.vf-theme-custom) button.vf-btn--start {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: linear-gradient(135deg, hsl(220, 85%, 52%) 0%, hsl(225, 90%, 42%) 100%) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 3px hsla(220, 90%, 15%, 0.5) !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  padding: 10px 24px !important;
  border-radius: 50px !important;
  border: none !important;
  box-shadow: 0 4px 15px hsla(220, 85%, 45%, 0.5) !important;
  overflow: hidden !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
}

html body .vf-widget:not(.vf-theme-custom) .vf-btn.vf-btn--start:hover,
html body .vf-widget:not(.vf-theme-custom) button.vf-btn--start:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 8px 25px hsla(220, 85%, 45%, 0.6) !important;
}

html body .vf-widget:not(.vf-theme-custom).vf-theme-clean .vf-btn.vf-btn--start,
html body .vf-widget:not(.vf-theme-custom).vf-theme-clean button.vf-btn--start {
  background: linear-gradient(135deg, hsl(250, 85%, 60%) 0%, hsl(250, 90%, 50%) 100%) !important;
  box-shadow: 0 4px 15px hsla(250, 85%, 55%, 0.5) !important;
}

html body .vf-widget:not(.vf-theme-custom).vf-theme-neon .vf-btn.vf-btn--start,
html body .vf-widget:not(.vf-theme-custom).vf-theme-neon button.vf-btn--start {
  background: linear-gradient(135deg, hsl(265, 90%, 65%) 0%, hsl(265, 90%, 55%) 100%) !important;
  box-shadow: 0 4px 15px hsla(265, 90%, 60%, 0.5), 0 0 30px hsla(265, 90%, 60%, 0.3) !important;
}

html body .vf-widget:not(.vf-theme-custom) .vf-btn.vf-btn--verify,
html body .vf-widget:not(.vf-theme-custom) button.vf-btn--verify {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: linear-gradient(135deg, hsl(30, 100%, 55%) 0%, hsl(25, 100%, 48%) 100%) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 2px hsla(25, 100%, 20%, 0.4) !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  padding: 10px 24px !important;
  border-radius: 50px !important;
  border: none !important;
  box-shadow: 0 4px 15px hsla(30, 100%, 50%, 0.4) !important;
  overflow: hidden !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
}

html body .vf-widget:not(.vf-theme-custom).vf-theme-clean .vf-btn.vf-btn--verify,
html body .vf-widget:not(.vf-theme-custom).vf-theme-clean button.vf-btn--verify {
  background: linear-gradient(135deg, hsl(240, 70%, 58%) 0%, hsl(240, 75%, 48%) 100%) !important;
  box-shadow: 0 4px 15px hsla(240, 70%, 55%, 0.4) !important;
}

html body .vf-widget:not(.vf-theme-custom).vf-theme-neon .vf-btn.vf-btn--verify,
html body .vf-widget:not(.vf-theme-custom).vf-theme-neon button.vf-btn--verify {
  background: linear-gradient(135deg, hsl(180, 100%, 45%) 0%, hsl(180, 100%, 35%) 100%) !important;
  box-shadow: 0 4px 15px hsla(180, 100%, 45%, 0.5), 0 0 25px hsla(180, 100%, 50%, 0.3) !important;
}

html body .vf-widget:not(.vf-theme-custom) .vf-open-another-btn,
html body .vf-widget:not(.vf-theme-custom) button.vf-open-another-btn {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: linear-gradient(135deg, hsl(220, 85%, 52%) 0%, hsl(225, 90%, 42%) 100%) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 3px hsla(220, 90%, 15%, 0.5) !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  padding: 10px 24px !important;
  border-radius: 50px !important;
  border: none !important;
  box-shadow: 0 4px 15px hsla(220, 85%, 45%, 0.5) !important;
  overflow: hidden !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
}

html body .vf-widget:not(.vf-theme-custom).vf-theme-clean .vf-open-another-btn,
html body .vf-widget:not(.vf-theme-custom).vf-theme-clean button.vf-open-another-btn {
  background: linear-gradient(135deg, hsl(250, 85%, 60%) 0%, hsl(250, 90%, 50%) 100%) !important;
  box-shadow: 0 4px 15px hsla(250, 85%, 55%, 0.5) !important;
}

html body .vf-widget:not(.vf-theme-custom).vf-theme-neon .vf-open-another-btn,
html body .vf-widget:not(.vf-theme-custom).vf-theme-neon button.vf-open-another-btn {
  background: linear-gradient(135deg, hsl(265, 90%, 65%) 0%, hsl(265, 90%, 55%) 100%) !important;
  box-shadow: 0 4px 15px hsla(265, 90%, 60%, 0.5), 0 0 30px hsla(265, 90%, 60%, 0.3) !important;
}

/* Custom theme - NO OVERRIDES FROM BASE CSS
   The customCss from ThemeBuilder is injected into <head> AFTER this file loads,
   so it has full cascade priority. We don't define ANY button styles for custom theme here.
   This ensures your ThemeBuilder styles are never overwritten by base CSS. */

/* End of styles */