/* ==========================================================
   DG Popup Carrito + Envío Gratis v2.2.0
   Todo el diseño sale de variables CSS: el panel las escribe
   inline (WooCommerce → DG Popup + Envío → Diseño).
   ========================================================== */

/* ---------- Shortcode [dg_envio_gratis] ---------- */
.dg-freeship-progress {
  --dg-fs-bg: #fff;
  --dg-fs-border: #e9e9e9;
  --dg-fs-text: #111;
  --dg-fs-font-size: 14px;
  --dg-fs-radius: 10px;
  --dg-fs-padding: 14px;
  --dg-fs-height: 6px;
  --dg-ship-red: #e11d48;
  --dg-ship-orange: #f59e0b;
  --dg-ship-green: #22c55e;
  --dg-ship-track: #ededed;

  width: 100%;
  max-width: 100%;
  margin: 10px 0;
}
.dg-freeship-box {
  background: var(--dg-fs-bg);
  border: 1px solid var(--dg-fs-border);
  border-radius: var(--dg-fs-radius);
  padding: var(--dg-fs-padding) calc(var(--dg-fs-padding) + 2px);
}
.dg-freeship-text {
  font-size: var(--dg-fs-font-size);
  line-height: 1.3;
  color: var(--dg-fs-text);
  margin: 0 0 10px 0;
}
.dg-freeship-text strong {
  font-weight: 700;
}
.dg-freeship-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dg-freeship-row .dg-freeship-track { flex: 1; }
.dg-freeship-pct {
  flex: none;
  font-size: calc(var(--dg-fs-font-size) - 1px);
  font-weight: 700;
  color: var(--dg-fs-text);
  font-variant-numeric: tabular-nums;
}
.dg-freeship-track {
  height: var(--dg-fs-height);
  border-radius: 10px;
  background: var(--dg-ship-track);
  overflow: hidden;
}
.dg-freeship-bar {
  height: 100%;
  width: 0%;
  border-radius: 10px;
  will-change: width;
}
.dg-freeship-bar.is-red {
  background: var(--dg-ship-red);
}
.dg-freeship-bar.is-orange {
  background: var(--dg-ship-orange);
}
.dg-freeship-bar.is-green {
  background: var(--dg-ship-green);
}


/* ---------- Popup "Agregado al carrito" ---------- */

/* 1. Ocultar el "Ver carrito" nativo que WooCommerce inyecta */
a.added_to_cart.wc-forward {
	display: none !important;
}

/* 1b. Aviso de la ficha marcado por el plugin (por si otro código lo imprime) */
.dg-atc-flag { display: none !important; }
.woocommerce-notices-wrapper .woocommerce-message:has(.dg-atc-flag),
.woocommerce-notices-wrapper .wc-block-components-notice-banner:has(.dg-atc-flag) {
	display: none !important;
}

/* 2. Quitar el ícono "\e017" (check de la fuente WooCommerce) */
.woocommerce a.button.added::after,
.woocommerce button.button.added::after,
a.add_to_cart_button.added::after,
a.ajax_add_to_cart.added::after,
.elementor-button.added::after {
	content: none !important;
	display: none !important;
}

/* 3. Popup */
.dg-atc {
	--dg-atc-primary: #0d5c2c;
	--dg-atc-primary-text: #fff;
	--dg-atc-accent: #5a9e58;
	--dg-atc-text: #1c2a1f;
	--dg-atc-muted: #5d6b60;
	--dg-atc-surface: #ffffff;
	--dg-atc-line: #e6ece7;
	--dg-atc-soft: #f1f4f2;
	--dg-atc-offset: 24px;
	--dg-atc-width: 360px;
	--dg-atc-radius: 18px;
	--dg-atc-btn-radius: 999px;
	--dg-atc-btn-height: 44px;
	--dg-atc-thumb-size: 64px;
	--dg-atc-shadow: 0 18px 40px -18px rgba(13, 92, 44, .45);
	--dg-atc-font: inherit;
	--dg-atc-title-size: 15px;
	--dg-atc-name-size: 16px;
	--dg-atc-small-size: 13px;
	--dg-atc-btn-size: 14px;
	--dg-atc-duration: 5000ms;
	--dg-ship-red: #e11d48;
	--dg-ship-orange: #f59e0b;
	--dg-ship-green: #22c55e;
	--dg-ship-track: #ededed;
	--dg-ship-height: 8px;

	position: fixed;
	z-index: 99999;
	width: min(var(--dg-atc-width), calc(100vw - 32px));
	font-family: var(--dg-atc-font);
	color: var(--dg-atc-text);
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .2s ease, transform .25s ease;
	pointer-events: none;
}
.dg-atc[hidden] { display: none; }
.dg-atc.is-open { opacity: 1; transform: none; pointer-events: auto; }

.dg-atc--bottom-left  { left: var(--dg-atc-offset);  bottom: var(--dg-atc-offset); }
.dg-atc--bottom-right { right: var(--dg-atc-offset); bottom: var(--dg-atc-offset); }
.dg-atc--top-right    { right: var(--dg-atc-offset); top: var(--dg-atc-offset); transform: translateY(-12px); }
.dg-atc--top-left     { left: var(--dg-atc-offset);  top: var(--dg-atc-offset);  transform: translateY(-12px); }

.dg-atc__card {
	position: relative;
	overflow: hidden;
	background: var(--dg-atc-surface);
	border: 1px solid var(--dg-atc-line);
	border-radius: var(--dg-atc-radius);
	box-shadow: var(--dg-atc-shadow);
	padding: 16px 16px 18px;
}

.dg-atc__head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 32px 12px 0;
}
.dg-atc__badge {
	display: grid;
	place-items: center;
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--dg-atc-accent);
	color: #fff;
}
.dg-atc__badge svg { width: 13px; height: 13px; }
.dg-atc__title {
	margin: 0;
	font-size: var(--dg-atc-title-size);
	font-weight: 700;
	line-height: 1.3;
	color: var(--dg-atc-text);
}

.dg-atc__close {
	position: absolute;
	top: 10px;
	right: 10px;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--dg-atc-muted);
	cursor: pointer;
}
.dg-atc__close:hover { background: var(--dg-atc-soft); color: var(--dg-atc-text); }
.dg-atc__close svg { width: 16px; height: 16px; }

.dg-atc__body {
	display: flex;
	align-items: center;
	gap: 12px;
}
.dg-atc__thumb {
	flex: none;
	width: var(--dg-atc-thumb-size);
	height: var(--dg-atc-thumb-size);
	border-radius: calc(var(--dg-atc-radius) * .66);
	background: var(--dg-atc-soft);
	overflow: hidden;
}
.dg-atc__thumb[hidden] { display: none; }
.dg-atc__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.dg-atc__name {
	margin: 0 0 2px;
	font-size: var(--dg-atc-name-size);
	font-weight: 600;
	line-height: 1.25;
	color: var(--dg-atc-text);
}
.dg-atc__qty,
.dg-atc__summary {
	margin: 0;
	font-size: var(--dg-atc-small-size);
	color: var(--dg-atc-muted);
	line-height: 1.4;
}
.dg-atc__summary {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--dg-atc-line);
}
.dg-atc__summary strong { color: var(--dg-atc-text); }
.dg-atc__summary:empty,
.dg-atc__qty[hidden] { display: none; }

/* Envío gratis dentro del popup (clases propias: no las pisa el fragment del shortcode) */
.dg-atc__ship {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--dg-atc-line);
}
.dg-atc__summary:not(:empty) + .dg-atc__ship {
	margin-top: 10px;
	padding-top: 0;
	border-top: 0;
}
.dg-atc__ship[hidden],
.dg-atc__ship-text[hidden],
.dg-atc__ship-pct[hidden] { display: none; }
.dg-atc__ship-text {
	margin: 0 0 8px;
	font-size: var(--dg-atc-small-size);
	line-height: 1.4;
	color: var(--dg-atc-text);
}
.dg-atc__ship-text strong { font-weight: 700; }
.dg-atc__ship-row {
	display: flex;
	align-items: center;
	gap: 10px;
}
.dg-atc__ship-track {
	flex: 1;
	height: var(--dg-ship-height);
	border-radius: 999px;
	background: var(--dg-ship-track);
	overflow: hidden;
}
.dg-atc__ship-bar {
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: var(--dg-ship-red);
	transition: width .65s cubic-bezier(.33, 1, .68, 1), background-color .3s ease;
}
.dg-atc__ship-bar.no-anim { transition: none; }
.dg-atc__ship-bar.is-orange { background: var(--dg-ship-orange); }
.dg-atc__ship-bar.is-green  { background: var(--dg-ship-green); }
.dg-atc__ship-pct {
	flex: none;
	min-width: 3.2em;
	text-align: right;
	font-size: var(--dg-atc-small-size);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--dg-atc-text);
	white-space: nowrap;
}
.dg-atc__ship.is-reached .dg-atc__ship-pct { color: var(--dg-ship-green); }

.dg-atc__actions {
	display: flex;
	gap: 8px;
	margin-top: 14px;
}
.dg-atc__btn {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--dg-atc-btn-height);
	padding: 0 14px;
	border-radius: var(--dg-atc-btn-radius);
	font: inherit;
	font-size: var(--dg-atc-btn-size);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, filter .15s ease;
}
.dg-atc__btn[hidden] { display: none; }
.dg-atc__btn--ghost {
	border: 1px solid var(--dg-atc-line);
	background: transparent;
	color: var(--dg-atc-text);
}
.dg-atc__btn--ghost:hover { background: var(--dg-atc-soft); color: var(--dg-atc-text); }
.dg-atc__btn--primary {
	border: 1px solid var(--dg-atc-primary);
	background: var(--dg-atc-primary);
	color: var(--dg-atc-primary-text) !important;
}
.dg-atc__btn--primary:hover { filter: brightness(.88); }

.dg-atc__close:focus-visible,
.dg-atc__btn:focus-visible {
	outline: 2px solid var(--dg-atc-primary);
	outline-offset: 2px;
}

/* Barra de tiempo: su animationend cierra el popup (JS) */
.dg-atc__progress {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 3px;
	width: 100%;
	background: var(--dg-atc-accent);
	transform-origin: left center;
	transform: scaleX(0);
}
.dg-atc.is-timing .dg-atc__progress {
	animation: dg-atc-countdown var(--dg-atc-duration) linear forwards;
}
.dg-atc.is-paused .dg-atc__progress { animation-play-state: paused; }
/* Oculta la línea pero sigue midiendo el tiempo */
.dg-atc--no-timer .dg-atc__progress { opacity: 0; }

@keyframes dg-atc-countdown {
	from { transform: scaleX(1); }
	to   { transform: scaleX(0); }
}

/* Mobile */
@media (max-width: 600px) {
	/* Hoja inferior de borde a borde (por defecto) */
	.dg-atc:not(.dg-atc--float) {
		left: 0;
		right: 0;
		top: auto;
		bottom: 0;
		width: 100%;
		transform: translateY(100%);
	}
	.dg-atc:not(.dg-atc--float).is-open { transform: none; }
	.dg-atc:not(.dg-atc--float) .dg-atc__card {
		border-radius: var(--dg-atc-radius) var(--dg-atc-radius) 0 0;
		border-bottom: 0;
		padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
	}

	/* Flotante: respeta la posición elegida, con margen de 12px */
	.dg-atc--float {
		--dg-atc-offset: 12px;
		width: auto;
		left: 12px;
		right: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dg-atc { transition: opacity .15s linear; transform: none !important; }
	/* La animación sigue corriendo (marca el tiempo) pero no se ve */
	.dg-atc__progress { opacity: 0; }
	.dg-atc__ship-bar { transition: none; }
}

/* Vista previa del panel: el popup queda fijo en su caja */
.dg-pce-preview .dg-atc {
	position: relative;
	inset: auto !important;
	width: min(var(--dg-atc-width), 100%);
	opacity: 1;
	transform: none !important;
	pointer-events: auto;
	z-index: 1;
}

/* ---------- Widget de Elementor "DG Envío Gratis" ----------
   Valores base = diseño del shortcode en el panel (variables --dg-fs-* / --dg-ship-*).
   La pestaña Estilo de Elementor los pisa por widget con {{WRAPPER}}. */
.dg-fsw {
  --dg-fs-bg: #fff;
  --dg-fs-border: #e9e9e9;
  --dg-fs-text: #111;
  --dg-fs-font-size: 14px;
  --dg-fs-radius: 10px;
  --dg-fs-padding: 14px;
  --dg-fs-height: 6px;
  --dg-ship-red: #e11d48;
  --dg-ship-orange: #f59e0b;
  --dg-ship-green: #22c55e;
  --dg-ship-track: #ededed;
  width: 100%;
}
.dg-fsw[hidden] { display: none !important; }
.dg-fsw__box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--dg-fs-bg);
  border: 1px solid var(--dg-fs-border);
  border-radius: var(--dg-fs-radius);
  padding: var(--dg-fs-padding) calc(var(--dg-fs-padding) + 2px);
  transition: background-color .3s ease, border-color .3s ease;
}
.dg-fsw--bar_first .dg-fsw__box { flex-direction: column-reverse; }
.dg-fsw--inline .dg-fsw__box { flex-direction: row; align-items: center; }
.dg-fsw--inline .dg-fsw__head { flex: 0 1 auto; }
.dg-fsw--inline .dg-fsw__row { flex: 1 1 160px; }
@media (max-width: 600px) {
  .dg-fsw--inline .dg-fsw__box { flex-direction: column; align-items: stretch; }
}

.dg-fsw__head {
  display: flex;
  align-items: center;
  gap: 8px;
  column-gap: 8px;
}
.dg-fsw__text {
  margin: 0;
  flex: 0 1 auto;
  font-size: var(--dg-fs-font-size);
  line-height: 1.35;
  color: var(--dg-fs-text);
}
.dg-fsw__text strong { font-weight: 700; }
.dg-fsw__text p { margin: 0; }

.dg-fsw__icon {
  display: inline-flex;
  flex: none;
  font-size: 1.25em;
  line-height: 1;
  color: var(--dg-fs-text);
}
.dg-fsw__icon svg { width: 1em; height: 1em; fill: currentColor; }
.dg-fsw__icon--reached { display: none; }
.dg-fsw.is-reached .dg-fsw__icon--progress { display: none; }
.dg-fsw.is-reached .dg-fsw__icon--reached { display: inline-flex; }

.dg-fsw__row {
  display: flex;
  align-items: center;
  column-gap: 10px;
}
.dg-fsw__track {
  position: relative;
  flex: 1;
  height: var(--dg-fs-height);
  border-radius: 999px;
  background: var(--dg-ship-track);
  overflow: hidden;
}
.dg-fsw__bar {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background-color: var(--dg-ship-red);
  transition: width .65s cubic-bezier(.33, 1, .68, 1), background-color .3s ease;
}
.dg-fsw__bar.is-orange { background-color: var(--dg-ship-orange); }
.dg-fsw__bar.is-green  { background-color: var(--dg-ship-green); }
.dg-fsw.no-anim .dg-fsw__bar { transition: none; }

.dg-fsw.is-striped .dg-fsw__bar {
  background-image: linear-gradient(45deg, rgba(255,255,255,.28) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.28) 50%, rgba(255,255,255,.28) 75%, transparent 75%, transparent);
  background-size: 16px 16px;
  animation: dg-fsw-stripes 1s linear infinite;
}
@keyframes dg-fsw-stripes { to { background-position: 16px 0; } }

.dg-fsw__pct {
  flex: none;
  font-size: calc(var(--dg-fs-font-size) - 1px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--dg-fs-text);
}
.dg-fsw--pct-top .dg-fsw__head .dg-fsw__pct { margin-left: auto; }
:where(.dg-fsw--pct-inside) .dg-fsw__track { height: 20px; }
.dg-fsw--pct-inside .dg-fsw__pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  /* Halo claro: se lee sobre la parte llena y sobre el fondo gris */
  text-shadow: 0 0 2px rgba(255,255,255,.95), 0 0 6px rgba(255,255,255,.8);
}
/* :where() deja estos valores por debajo de lo que se elija en Elementor */
:where(.dg-fsw.is-reached) .dg-fsw__pct { color: var(--dg-ship-green); }
:where(.dg-fsw--pct-inside) .dg-fsw__pct { color: #111; font-size: 11px; }

@media (prefers-reduced-motion: reduce) {
  .dg-fsw__bar { transition: none; }
  .dg-fsw.is-striped .dg-fsw__bar { animation: none; }
}