/* ==========================================================================
   Vendors Listing — VL Thank You Page
   Animated success check, order details, next-steps cards, optional confetti.
   ========================================================================== */

.vl-wrapper .vl-thankyou {
  --vl-primary: #6C5CE7;
  --vl-primary-dark: #5A4BD1;
  --vl-primary-light: #A29BFE;
  --vl-primary-soft: rgba(108, 92, 231, 0.08);
  --vl-teal: #00CEC9;
  --vl-text: #1a1a2e;
  --vl-text-light: #636E72;
  --vl-text-muted: #B2BEC3;
  --vl-bg: #FFFFFF;
  --vl-bg-light: #F8F9FA;
  --vl-border: #E2E8F0;
  --vl-success: #00B894;
  --vl-radius: 20px;
  --vl-radius-sm: 12px;
  --vl-shadow-sm: 0 2px 8px rgba(16, 24, 40, 0.06);
  --vl-shadow-md: 0 8px 28px rgba(16, 24, 40, 0.10);
  --vl-shadow-lg: 0 20px 50px rgba(16, 24, 40, 0.14);
  --vl-transition: 0.25s ease;

  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  color: var(--vl-text) !important;
  max-width: 880px !important;
  margin: 0 auto !important;
  padding: 40px 20px 60px !important;
  position: relative !important;
}

/* ───── Confetti dots background ───── */
.vl-wrapper .vl-thankyou.has-confetti::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background-image:
    radial-gradient(circle, rgba(108, 92, 231, 0.2) 2px, transparent 2px),
    radial-gradient(circle, rgba(0, 206, 201, 0.18) 2px, transparent 2px),
    radial-gradient(circle, rgba(253, 203, 110, 0.22) 1.5px, transparent 1.5px),
    radial-gradient(circle, rgba(255, 118, 117, 0.18) 2px, transparent 2px) !important;
  background-size: 80px 80px, 120px 120px, 100px 100px, 160px 160px !important;
  background-position: 0 0, 40px 40px, 20px 60px, 80px 20px !important;
  opacity: 0.6 !important;
  z-index: 0 !important;
}

.vl-wrapper .vl-thankyou > * {
  position: relative !important;
  z-index: 1 !important;
}

/* ───── Hero ───── */
.vl-wrapper .vl-thankyou__hero {
  text-align: center !important;
  padding: 40px 20px 48px !important;
  opacity: 1 !important;
  animation: vlTyFadeUp 0.7s 0.1s both ease-out !important;
}

.vl-wrapper .vl-thankyou__check {
  display: inline-block !important;
  margin-bottom: 20px !important;
  animation: vlTyCheckIn 0.9s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
  transform: scale(0) !important;
}
.vl-wrapper .vl-thankyou__check-bg {
  fill: var(--vl-success) !important;
  filter: drop-shadow(0 10px 24px rgba(0, 184, 148, 0.35)) !important;
}
.vl-wrapper .vl-thankyou__check-tick {
  stroke: #fff !important;
  stroke-width: 6 !important;
  stroke-dasharray: 60 !important;
  stroke-dashoffset: 60 !important;
  animation: vlTyTick 0.4s 0.7s forwards ease-out !important;
}

.vl-wrapper .vl-thankyou__heading {
  font-size: 40px !important;
  font-weight: 800 !important;
  color: var(--vl-text) !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 10px !important;
  line-height: 1.15 !important;
}

.vl-wrapper .vl-thankyou__subheading {
  font-size: 17px !important;
  color: var(--vl-text-light) !important;
  margin: 0 0 6px !important;
}
.vl-wrapper .vl-thankyou__subheading strong {
  color: var(--vl-primary) !important;
  font-weight: 700 !important;
}
.vl-wrapper .vl-thankyou__subheading-2 {
  font-size: 15px !important;
  color: var(--vl-text-light) !important;
  margin: 0 !important;
}

/* ───── Cards ───── */
.vl-wrapper .vl-thankyou__card {
  background: var(--vl-bg) !important;
  border: 1px solid var(--vl-border) !important;
  border-radius: var(--vl-radius) !important;
  padding: 28px !important;
  margin-bottom: 20px !important;
  box-shadow: var(--vl-shadow-sm) !important;
  opacity: 0 !important;
  transform: translateY(20px) !important;
  animation: vlTyFadeUp 0.5s forwards ease-out !important;
}
.vl-wrapper .vl-thankyou__card:nth-of-type(1) { animation-delay: 0.3s !important; }
.vl-wrapper .vl-thankyou__card:nth-of-type(2) { animation-delay: 0.4s !important; }
.vl-wrapper .vl-thankyou__card:nth-of-type(3) { animation-delay: 0.5s !important; }

/* Order card — gradient purple→teal */
.vl-wrapper .vl-thankyou__order-card {
  background: linear-gradient(135deg, var(--vl-primary) 0%, var(--vl-teal) 100%) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 20px 50px rgba(108, 92, 231, 0.35) !important;
}
.vl-wrapper .vl-thankyou__order-header {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  gap: 20px !important;
}
.vl-wrapper .vl-thankyou__order-header > div {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.vl-wrapper .vl-thankyou__order-label {
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  opacity: 0.85 !important;
  font-weight: 600 !important;
}
.vl-wrapper .vl-thankyou__order-value {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #fff !important;
}
.vl-wrapper .vl-thankyou__order-value .woocommerce-Price-amount,
.vl-wrapper .vl-thankyou__order-value .amount {
  color: #fff !important;
}

/* Section heading inside cards */
.vl-wrapper .vl-thankyou__section-heading {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--vl-text) !important;
  margin: 0 0 18px !important;
  letter-spacing: -0.01em !important;
}

/* ───── Items Table ───── */
.vl-wrapper .vl-thankyou__items {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 14px !important;
}
.vl-wrapper .vl-thankyou__items th {
  padding: 10px 12px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--vl-text-light) !important;
  text-align: left !important;
  border-bottom: 2px solid var(--vl-border) !important;
}
.vl-wrapper .vl-thankyou__items td {
  padding: 14px 12px !important;
  border-bottom: 1px solid var(--vl-border) !important;
  color: var(--vl-text) !important;
  vertical-align: middle !important;
}
.vl-wrapper .vl-thankyou__item-thumb {
  width: 60px !important;
}
.vl-wrapper .vl-thankyou__item-thumb img {
  width: 56px !important;
  height: 56px !important;
  border-radius: 10px !important;
  object-fit: cover !important;
  border: 1px solid var(--vl-border) !important;
  display: block !important;
}
.vl-wrapper .vl-thankyou__item-name {
  font-weight: 600 !important;
  color: var(--vl-text) !important;
  line-height: 1.3 !important;
}
.vl-wrapper .vl-thankyou__item-sku {
  display: block !important;
  font-size: 11px !important;
  color: var(--vl-text-muted) !important;
  font-weight: 400 !important;
  margin-top: 3px !important;
}
.vl-wrapper .vl-thankyou__col-total {
  text-align: right !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}
.vl-wrapper .vl-thankyou__items tfoot td {
  padding: 10px 12px !important;
  border: 0 !important;
  color: var(--vl-text-light) !important;
  font-size: 14px !important;
}
.vl-wrapper .vl-thankyou__items tfoot .vl-thankyou__tfoot-total td {
  padding-top: 16px !important;
  border-top: 2px solid var(--vl-border) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--vl-text) !important;
}

/* ───── Address ───── */
.vl-wrapper .vl-thankyou__address {
  font-style: normal !important;
  line-height: 1.7 !important;
  color: var(--vl-text) !important;
  background: var(--vl-bg-light) !important;
  padding: 16px 18px !important;
  border-radius: var(--vl-radius-sm) !important;
  font-size: 14px !important;
}

/* ───── Next-Steps ───── */
.vl-wrapper .vl-thankyou__next {
  margin: 32px 0 24px !important;
  opacity: 0 !important;
  transform: translateY(20px) !important;
  animation: vlTyFadeUp 0.6s 0.7s forwards ease-out !important;
}
.vl-wrapper .vl-thankyou__next .vl-thankyou__section-heading {
  text-align: center !important;
  font-size: 22px !important;
  margin-bottom: 24px !important;
}
.vl-wrapper .vl-thankyou__steps-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
}
.vl-wrapper .vl-thankyou__step-card {
  background: var(--vl-bg) !important;
  border: 1px solid var(--vl-border) !important;
  border-radius: var(--vl-radius-sm) !important;
  padding: 22px !important;
  text-align: center !important;
  box-shadow: var(--vl-shadow-sm) !important;
  transition: all var(--vl-transition) !important;
}
.vl-wrapper .vl-thankyou__step-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--vl-shadow-md) !important;
  border-color: rgba(108, 92, 231, 0.3) !important;
}
.vl-wrapper .vl-thankyou__step-icon {
  font-size: 32px !important;
  margin-bottom: 10px !important;
}
.vl-wrapper .vl-thankyou__step-card h3 {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--vl-text) !important;
  margin: 0 0 8px !important;
}
.vl-wrapper .vl-thankyou__step-card p {
  font-size: 13px !important;
  color: var(--vl-text-light) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}
.vl-wrapper .vl-thankyou__step-card strong {
  color: var(--vl-primary) !important;
  font-weight: 700 !important;
  word-break: break-word !important;
}
.vl-wrapper .vl-thankyou__step-link {
  display: inline-block !important;
  margin-top: 10px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--vl-primary) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}
.vl-wrapper .vl-thankyou__step-link:hover { color: var(--vl-primary-dark) !important; }

/* ───── CTA ───── */
.vl-wrapper .vl-thankyou__cta {
  text-align: center !important;
  margin-top: 32px !important;
  opacity: 0 !important;
  animation: vlTyFadeUp 0.5s 0.9s forwards ease-out !important;
}
.vl-wrapper .vl-thankyou__cta-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 15px 34px !important;
  background: var(--vl-primary) !important;
  color: #fff !important;
  border-radius: 14px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 10px 28px rgba(108, 92, 231, 0.35) !important;
}
.vl-wrapper .vl-thankyou__cta-btn:hover {
  background: var(--vl-primary-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 34px rgba(108, 92, 231, 0.45) !important;
}

/* ───── WC placeholder ───── */
.vl-wrapper .vl-wc-placeholder {
  text-align: center !important;
  padding: 48px 24px !important;
  background: linear-gradient(135deg, #f8f9fa, #fff) !important;
  border: 2px dashed var(--vl-border) !important;
  border-radius: 18px !important;
  color: var(--vl-text-light) !important;
}
.vl-wrapper .vl-wc-placeholder__icon { font-size: 40px !important; display: block !important; margin-bottom: 12px !important; }
.vl-wrapper .vl-wc-placeholder .button {
  display: inline-block !important;
  padding: 10px 22px !important;
  background: var(--vl-primary) !important;
  color: #fff !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

/* ───── Animations ───── */
@keyframes vlTyFadeUp {
  0%   { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes vlTyCheckIn {
  0%   { transform: scale(0) rotate(-30deg); opacity: 0; }
  60%  { transform: scale(1.1) rotate(10deg); opacity: 1; }
  80%  { transform: scale(0.95) rotate(-3deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes vlTyTick {
  0%   { stroke-dashoffset: 60; }
  100% { stroke-dashoffset: 0; }
}

/* ───── Responsive ───── */
@media (max-width: 1024px) {
  .vl-wrapper .vl-thankyou__heading { font-size: 34px !important; }
}

@media (max-width: 768px) {
  .vl-wrapper .vl-thankyou { padding: 30px 16px 48px !important; }
  .vl-wrapper .vl-thankyou__heading { font-size: 26px !important; }
  .vl-wrapper .vl-thankyou__steps-grid { grid-template-columns: 1fr !important; }
  .vl-wrapper .vl-thankyou__card { padding: 22px !important; }
  .vl-wrapper .vl-thankyou__order-header { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
  .vl-wrapper .vl-thankyou__items th,
  .vl-wrapper .vl-thankyou__items td { padding: 10px 8px !important; font-size: 13px !important; }
  .vl-wrapper .vl-thankyou__item-thumb img { width: 44px !important; height: 44px !important; }
}

@media (max-width: 480px) {
  .vl-wrapper .vl-thankyou__heading { font-size: 22px !important; }
  .vl-wrapper .vl-thankyou__hero { padding: 20px 10px 32px !important; }
  .vl-wrapper .vl-thankyou__subheading { font-size: 15px !important; }
  .vl-wrapper .vl-thankyou__order-header { grid-template-columns: 1fr !important; }
  .vl-wrapper .vl-thankyou__cta-btn { padding: 13px 24px !important; font-size: 14px !important; }
  .vl-wrapper .vl-thankyou__check svg { width: 68px !important; height: 68px !important; }
}