/* =========================
   SIDEBAR
   ========================= */

.store-sidebar,
.vth-sidebar {
  display: flex;
  flex-direction: column;
  gap: 14px;

  width: 100%;
  max-width: 330px;
}


/* =========================
   CARD
   ========================= */

.store-sidebar .widget,
.vth-sidebar .widget,
.vth-widget {
  position: relative;
  overflow: hidden;

  width: 100%;
  margin: 0 !important;
  padding: 16px !important;

  border: 1px solid rgba(190, 132, 255, 0.32);
  border-radius: 18px;

  background:
    radial-gradient(circle at 16% 0%, rgba(218, 184, 255, 0.13), transparent 34%),
    radial-gradient(circle at 100% 100%, rgba(125, 44, 255, 0.12), transparent 42%),
    linear-gradient(180deg, rgba(25, 13, 40, 0.96), rgba(8, 4, 16, 0.98));

  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.46),
    0 0 24px rgba(125, 44, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -14px 24px rgba(0, 0, 0, 0.18);

  box-sizing: border-box;
}

.store-sidebar .widget::before,
.vth-sidebar .widget::before,
.vth-widget::before {
  content: "";
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 42%;

  border-radius: 17px 17px 34px 34px;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.06),
      rgba(255, 255, 255, 0.015),
      transparent
    );

  pointer-events: none;
}

.store-sidebar .widget::after,
.vth-sidebar .widget::after,
.vth-widget::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(125, 44, 255, 0.55),
      rgba(218, 184, 255, 0.78),
      rgba(255, 211, 106, 0.22),
      rgba(218, 184, 255, 0.78),
      rgba(125, 44, 255, 0.55),
      transparent
    );

  pointer-events: none;
}


/* =========================
   TÍTULOS
   ========================= */

.store-sidebar .widget-title,
.vth-widget-title {
  position: relative;
  z-index: 2;

  margin: 0 0 13px !important;

  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  letter-spacing: 0.05em !important;
  text-transform: none !important;
  text-align: left !important;

  text-shadow:
    0 0 10px rgba(218, 184, 255, 0.32),
    0 0 18px rgba(125, 44, 255, 0.22);
}

.store-sidebar .widget-content,
.vth-widget-content {
  position: relative;
  z-index: 2;
}


/* =========================
   VACÍOS
   ========================= */

.store-sidebar .empty,
.vth-widget-empty {
  margin: 0 !important;
  padding: 12px 14px !important;

  border: 1px solid rgba(190, 132, 255, 0.18);
  border-radius: 14px;

  background:
    linear-gradient(180deg, rgba(16, 7, 28, 0.68), rgba(7, 3, 14, 0.62));

  color: rgba(244, 234, 255, 0.76) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1.35;
  text-align: center;
}


/* =========================
   META MENSUAL
   ========================= */

.widget-goal .widget-content,
.vth-goal-widget .vth-widget-content {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.vth-goal-wrap {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.widget-goal .progress,
.vth-goal-track {
  position: relative;

  width: 100%;
  height: 14px;
  overflow: hidden;

  border: 1px solid rgba(190, 132, 255, 0.24);
  border-radius: 999px;

  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0)),
    linear-gradient(180deg, rgba(45, 25, 70, 0.98), rgba(15, 7, 28, 0.98));

  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.46),
    0 0 16px rgba(125, 44, 255, 0.12);
}

.widget-goal .progress-bar,
.vth-goal-fill {
  position: relative;

  height: 100%;
  min-width: 0;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      rgba(125, 44, 255, 1),
      rgba(190, 132, 255, 1),
      rgba(255, 211, 106, 0.95)
    ) !important;

  box-shadow:
    0 0 12px rgba(190, 132, 255, 0.38),
    0 0 22px rgba(125, 44, 255, 0.30);

  transition: width 300ms ease;
}

.widget-goal .progress-bar::after,
.vth-goal-fill::after {
  content: "";
  position: absolute;
  inset: 1px;

  border-radius: 999px;

  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), transparent);

  pointer-events: none;
}

.vth-goal-percent,
.widget-goal .widget-content p {
  margin: 0 !important;

  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  text-align: center !important;

  text-shadow:
    0 0 10px rgba(218, 184, 255, 0.34),
    0 0 18px rgba(125, 44, 255, 0.22);
}

.widget-goal .widget-content p strong {
  display: none !important;
}


/* =========================
   TOP DONADOR
   ========================= */

.vth-donor-card {
  display: flex;
  align-items: center;
  gap: 12px;

  min-height: 62px;
  padding: 10px;

  border: 1px solid rgba(190, 132, 255, 0.18);
  border-radius: 15px;

  background:
    radial-gradient(circle at 18% 0%, rgba(255, 211, 106, 0.08), transparent 30%),
    linear-gradient(180deg, rgba(19, 9, 32, 0.70), rgba(8, 4, 16, 0.58));
}

.vth-donor-avatar,
.widget-top-donator .avatar {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;

  border: 1px solid rgba(255, 211, 106, 0.48);
  border-radius: 12px !important;

  background: rgba(0, 0, 0, 0.42);

  object-fit: cover;
  image-rendering: pixelated;

  box-shadow:
    0 0 0 2px rgba(125, 44, 255, 0.14),
    0 0 16px rgba(125, 44, 255, 0.20);
}

.vth-donor-info {
  min-width: 0;
}

.vth-donor-name,
.widget-top-donator .username {
  margin: 0 0 4px !important;

  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  line-height: 1.1;

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

.vth-donor-text,
.widget-top-donator p:not(.empty) {
  margin: 0 !important;

  color: rgba(244, 234, 255, 0.72) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.25;
}

.vth-donor-text strong {
  color: #ffd36a !important;
  font-weight: 950 !important;
}


/* =========================
   PAGOS RECIENTES
   ========================= */

.vth-purchases,
.widget-recent .purchases {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.vth-purchase,
.widget-recent .purchase {
  display: flex;
  align-items: center;
  gap: 10px;

  min-height: 54px;
  padding: 9px 10px;

  border: 1px solid rgba(190, 132, 255, 0.16);
  border-radius: 14px;

  background:
    linear-gradient(180deg, rgba(19, 9, 32, 0.62), rgba(8, 4, 16, 0.48));
}

.vth-payment-avatar,
.widget-recent .avatar {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;

  border: 1px solid rgba(190, 132, 255, 0.34);
  border-radius: 10px !important;

  background: rgba(0, 0, 0, 0.42);

  object-fit: cover;
  image-rendering: pixelated;

  box-shadow:
    0 0 0 2px rgba(125, 44, 255, 0.10),
    0 0 12px rgba(125, 44, 255, 0.16);
}

.vth-payment-info,
.widget-recent .info {
  min-width: 0;
}

.vth-payment-name,
.widget-recent .username {
  margin: 0 0 3px !important;

  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  line-height: 1.1;

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

.vth-payment-detail,
.widget-recent .info p {
  margin: 0 !important;

  color: rgba(244, 234, 255, 0.70) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1.25;

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

.vth-payment-price,
.widget-recent .price {
  color: #ffd36a !important;
  font-weight: 950 !important;
}

.vth-payment-time,
.widget-recent time {
  display: block;
  margin-top: 2px;

  color: rgba(244, 234, 255, 0.48) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
}


/* =========================
   TEXTOS
   ========================= */

.store-sidebar .widget p {
  color: rgba(244, 234, 255, 0.76);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.store-sidebar .widget a {
  color: #e2ccff;
  font-weight: 900;
}

.store-sidebar .widget a:hover {
  color: #ffffff;
}


/* =========================
   HOME SHOWCASE
   ========================= */

.vth-home-showcase-widgets .store-sidebar,
.vth-home-showcase-widgets .vth-sidebar {
  width: 100% !important;
  max-width: none !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;

  margin: 0 !important;
}

.vth-home-showcase-widgets .widget,
.vth-home-showcase-widgets .vth-widget {
  width: 100% !important;
  min-height: auto !important;

  margin: 0 !important;
  padding: 14px 16px !important;

  border-radius: 18px !important;
}

.vth-home-showcase-widgets .vth-widget-title,
.vth-home-showcase-widgets .widget-title {
  margin-bottom: 10px !important;

  font-size: 15px !important;
  line-height: 1.15 !important;
}

.vth-home-showcase-widgets .vth-widget-content,
.vth-home-showcase-widgets .widget-content {
  min-height: auto !important;
  padding: 0 !important;
}

.vth-home-showcase-widgets .vth-widget-empty,
.vth-home-showcase-widgets .empty {
  min-height: 42px !important;
  padding: 11px 12px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 11px !important;
  line-height: 1.25 !important;
  text-align: center !important;
}

.vth-home-showcase-widgets .vth-goal-track,
.vth-home-showcase-widgets .widget-goal .progress {
  height: 9px !important;
}

.vth-home-showcase-widgets .vth-goal-percent {
  margin-top: 9px !important;
  font-size: 13px !important;
}


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

@media (max-width: 900px) {
  .store-sidebar,
  .vth-sidebar {
    max-width: 390px;
    gap: 12px;
  }

  .store-sidebar .widget,
  .vth-sidebar .widget,
  .vth-widget {
    padding: 14px !important;
    border-radius: 16px;
  }

  .store-sidebar .widget-title,
  .vth-widget-title {
    font-size: 14px !important;
    text-align: left !important;
  }

  .vth-donor-card,
  .vth-purchase,
  .widget-recent .purchase {
    border-radius: 13px;
  }
}

@media (max-width: 420px) {
  .store-sidebar,
  .vth-sidebar {
    max-width: 360px;
  }

  .store-sidebar .widget,
  .vth-sidebar .widget,
  .vth-widget {
    padding: 12px !important;
  }

  .vth-donor-avatar,
  .widget-top-donator .avatar {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
  }

  .vth-payment-avatar,
  .widget-recent .avatar {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
  }

  .widget-goal .progress,
  .vth-goal-track {
    height: 12px;
  }
}

/* ============================= */
/* PAGOS RECIENTES - 4 POR FILA  */
/* ============================= */

.widget-recent.vth-widget,
.vth-recent-payments,
.widget-recent-payments {
	overflow: visible !important;
	height: auto !important;
}

.widget-recent.vth-widget .widget-content,
.vth-recent-payments .widget-content,
.widget-recent-payments .widget-content {
	overflow: visible !important;
	height: auto !important;
}

.widget-recent.vth-widget .purchases,
.vth-recent-payments .purchases,
.widget-recent-payments .purchases,
.purchases.vth-purchases {
	display: grid !important;
	grid-template-columns: repeat(4, 42px) !important;
	grid-auto-rows: 42px !important;
	gap: 12px !important;

	width: fit-content !important;
	max-width: 100% !important;
	margin: 0 auto !important;

	justify-content: center !important;
	align-items: center !important;

	overflow: visible !important;
	white-space: normal !important;
	flex-wrap: wrap !important;
	transform: none !important;
	animation: none !important;
}

.widget-recent.vth-widget .purchase,
.vth-recent-payments .purchase,
.widget-recent-payments .purchase,
.purchases.vth-purchases .purchase {
	width: 42px !important;
	height: 42px !important;
	min-width: 42px !important;
	max-width: 42px !important;

	display: flex !important;
	align-items: center !important;
	justify-content: center !important;

	margin: 0 !important;
	padding: 0 !important;
	transform: none !important;
}

.widget-recent.vth-widget .purchase img,
.vth-recent-payments .purchase img,
.widget-recent-payments .purchase img,
.purchases.vth-purchases .purchase img,
.vth-payment-avatar {
	width: 38px !important;
	height: 38px !important;
	min-width: 38px !important;
	max-width: 38px !important;
	min-height: 38px !important;
	max-height: 38px !important;

	display: block !important;
	object-fit: cover !important;
	border-radius: 10px !important;

	margin: 0 !important;
	transform: none !important;
}

.widget-recent.vth-widget .purchases::before,
.widget-recent.vth-widget .purchases::after,
.vth-recent-payments .purchases::before,
.vth-recent-payments .purchases::after,
.widget-recent-payments .purchases::before,
.widget-recent-payments .purchases::after {
	display: none !important;
	content: none !important;
}