/**
 * COD Suite — estilos del checkout.
 *
 * Todo cuelga de variables CSS que inyecta PHP desde el diseño del checkout
 * (--cod-primary, --cod-ink, --cod-radius, --cod-width). Cambiar el color de
 * marca es cambiar una variable, no buscar y reemplazar hex por el archivo.
 *
 * Convención de clases: .cod-<bloque>__<elemento> y estados con is-*.
 */

.cod-checkout {
	--cod-primary: #16a34a;
	--cod-ink: #16264a;
	--cod-radius: 16px;
	--cod-width: 640px;
	--cod-line: #e8ecf2;
	--cod-muted: #7c8aa0;
	--cod-bg-soft: #f7f9fc;
	--cod-font: inherit;

	max-width: var(--cod-width);
	margin: 0 auto;
	font-family: var(--cod-font);
	color: var(--cod-ink);
}

.cod-checkout *,
.cod-checkout *::before,
.cod-checkout *::after { box-sizing: border-box; }

/* Los campos "backend" de Gravity Forms: existen, funcionan, no se ven. */
.cod-checkout .cod-hidden,
.cod-checkout .gfield.cod-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ─────────────────────────────── hero ─────────────────────────────── */

.cod-hero { text-align: center; margin: 0 0 22px; }
.cod-hero__logo img { max-height: 46px; width: auto; margin: 0 auto 14px; display: block; }
.cod-hero__title { font-size: 24px; line-height: 1.25; font-weight: 800; margin: 0 0 8px; letter-spacing: -0.3px; }
.cod-hero__sub { font-size: 15px; line-height: 1.5; color: var(--cod-muted); margin: 0; }

.cod-notice {
	margin: 14px 0 0;
	background: #fff8ef;
	border: 1px solid #fbe2bf;
	color: #9a4a16;
	font-size: 13.5px;
	line-height: 1.5;
	border-radius: 12px;
	padding: 11px 14px;
	text-align: left;
}

/* ───────────────────────────── bundles ────────────────────────────── */

.cod-bundles { display: flex; flex-direction: column; gap: 12px; margin: 0 0 8px; }

.cod-bundle {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px;
	border: 2px solid var(--cod-line);
	border-radius: var(--cod-radius);
	background: #fff;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.cod-bundle:hover { border-color: color-mix(in srgb, var(--cod-primary) 45%, #fff); }
.cod-bundle:active { transform: translateY(1px); }
.cod-bundle:focus-visible { outline: 2px solid var(--cod-primary); outline-offset: 2px; }

.cod-bundle.is-selected {
	border-color: var(--cod-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--cod-primary) 16%, transparent);
	background: color-mix(in srgb, var(--cod-primary) 4%, #fff);
}

.cod-bundle__badge {
	position: absolute;
	top: -10px;
	left: 14px;
	background: var(--cod-primary);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .3px;
	text-transform: uppercase;
	padding: 4px 9px;
	border-radius: 999px;
}

.cod-bundle__img { flex: 0 0 68px; }
.cod-bundle__img img { width: 68px; height: 68px; object-fit: contain; display: block; }

.cod-bundle__text { flex: 1 1 auto; min-width: 0; }
.cod-bundle__title { font-size: 15.5px; font-weight: 700; line-height: 1.3; margin-bottom: 3px; }
.cod-bundle__meta { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--cod-muted); }
.cod-bundle__free { color: var(--cod-primary); font-weight: 600; }

.cod-bundle__price { flex: 0 0 auto; text-align: right; display: flex; flex-direction: column; gap: 1px; }
.cod-bundle__was { font-size: 12.5px; color: var(--cod-muted); text-decoration: line-through; }
.cod-bundle__now { font-size: 18px; font-weight: 800; }

/* ────────────────────────────── envío ─────────────────────────────── */

/* Aviso discreto encima de las opciones de envío: se lee, no compite. */
.cod-ship-notice {
	margin: 0 0 10px;
	padding: 9px 0 9px 12px;
	border-left: 3px solid var(--cod-line, #e8ecf2);
	font-size: 13px;
	line-height: 1.55;
	color: var(--cod-muted, #7c8aa0);
}

.cod-ships { display: flex; flex-direction: column; gap: 10px; }

.cod-ship {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 14px;
	border: 2px solid var(--cod-line);
	border-radius: var(--cod-radius);
	background: #fff;
	cursor: pointer;
	transition: border-color .15s ease;
}
.cod-ship.is-selected { border-color: var(--cod-primary); background: color-mix(in srgb, var(--cod-primary) 4%, #fff); }
.cod-ship:focus-visible { outline: 2px solid var(--cod-primary); outline-offset: 2px; }
.cod-ships.is-free .cod-ship { cursor: default; }

.cod-ship__dot {
	flex: 0 0 18px; width: 18px; height: 18px;
	border: 2px solid var(--cod-line); border-radius: 50%;
	position: relative; transition: border-color .15s ease;
}
.cod-ship.is-selected .cod-ship__dot { border-color: var(--cod-primary); }
.cod-ship.is-selected .cod-ship__dot::after {
	content: ''; position: absolute; inset: 3px;
	background: var(--cod-primary); border-radius: 50%;
}

.cod-ship__text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; font-size: 14.5px; }
.cod-ship__text small { font-size: 12.5px; color: var(--cod-muted); }
.cod-ship__price { font-weight: 700; font-size: 14.5px; }
.cod-ship__price.is-free { color: var(--cod-primary); }

/* ──────────────────────────── order bumps ─────────────────────────── */

.cod-bumps { display: flex; flex-direction: column; gap: 10px; }

.cod-bump {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 14px;
	border: 2px dashed var(--cod-line);
	border-radius: var(--cod-radius);
	background: var(--cod-bg-soft);
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
.cod-bump.is-on {
	border-style: solid;
	border-color: var(--cod-primary);
	background: color-mix(in srgb, var(--cod-primary) 6%, #fff);
}
.cod-bump__check { position: absolute; opacity: 0; width: 0; height: 0; }

.cod-bump__box {
	flex: 0 0 20px; width: 20px; height: 20px;
	border: 2px solid var(--cod-line); border-radius: 6px;
	background: #fff; position: relative; transition: all .15s ease;
}
.cod-bump.is-on .cod-bump__box { background: var(--cod-primary); border-color: var(--cod-primary); }
.cod-bump.is-on .cod-bump__box::after {
	content: ''; position: absolute; left: 6px; top: 2px;
	width: 5px; height: 10px;
	border: solid #fff; border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.cod-bump__img img { width: 44px; height: 44px; object-fit: contain; display: block; }
.cod-bump__text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; font-size: 14.5px; }
.cod-bump__text small { font-size: 12.5px; color: var(--cod-muted); line-height: 1.45; }
.cod-bump__price { font-weight: 700; white-space: nowrap; }

/* ──────────────────────────── resumen ─────────────────────────────── */

.cod-summary {
	margin: 18px 0;
	padding: 16px;
	border: 1px solid var(--cod-line);
	border-radius: var(--cod-radius);
	background: var(--cod-bg-soft);
}
.cod-summary__line {
	display: flex; justify-content: space-between; gap: 12px;
	padding: 7px 0; font-size: 14.5px; color: #475569;
}
.cod-summary__total {
	display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
	margin-top: 8px; padding-top: 12px;
	border-top: 1px solid var(--cod-line);
	font-size: 15px; font-weight: 600;
}
.cod-summary__total strong { font-size: 22px; font-weight: 800; }
.cod-summary__note { margin-top: 6px; font-size: 12.5px; color: var(--cod-muted); }
.cod-free { color: var(--cod-primary); font-weight: 700; }

/* ────────────────────────── método de pago ────────────────────────── */

.cod-pays { display: flex; flex-direction: column; gap: 10px; }

.cod-pay {
	display: flex; align-items: center; gap: 12px;
	padding: 14px;
	border: 2px solid var(--cod-line);
	border-radius: var(--cod-radius);
	background: #fff; cursor: pointer;
	transition: border-color .15s ease;
}
.cod-pay.is-selected { border-color: var(--cod-primary); background: color-mix(in srgb, var(--cod-primary) 4%, #fff); }
.cod-pay:focus-visible { outline: 2px solid var(--cod-primary); outline-offset: 2px; }

.cod-pay__dot {
	flex: 0 0 18px; width: 18px; height: 18px;
	border: 2px solid var(--cod-line); border-radius: 50%; position: relative;
}
.cod-pay.is-selected .cod-pay__dot { border-color: var(--cod-primary); }
.cod-pay.is-selected .cod-pay__dot::after {
	content: ''; position: absolute; inset: 3px; background: var(--cod-primary); border-radius: 50%;
}
.cod-pay__text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; font-size: 14.5px; }
.cod-pay__text small { font-size: 12.5px; color: var(--cod-muted); line-height: 1.45; }
.cod-pay__icons { display: flex; gap: 5px; flex: 0 0 auto; }

/* ───────────────────────── trust + faq ────────────────────────────── */

.cod-trust { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 16px 0 0; }
.cod-trust__item {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 13px; color: var(--cod-muted);
}
.cod-trust__item svg { color: var(--cod-primary); flex: 0 0 auto; }

.cod-faq { margin: 18px 0 0; }
.cod-faq__item { border-bottom: 1px solid var(--cod-line); }
.cod-faq__item summary {
	cursor: pointer; list-style: none;
	padding: 12px 0; font-size: 14.5px; font-weight: 600;
}
.cod-faq__item summary::-webkit-details-marker { display: none; }
.cod-faq__item summary::after { content: '+'; float: right; color: var(--cod-muted); font-weight: 400; }
.cod-faq__item[open] summary::after { content: '–'; }
.cod-faq__a { padding: 0 0 14px; font-size: 13.5px; line-height: 1.6; color: var(--cod-muted); }

/* ───────────────── integración con Gravity Forms ──────────────────── */

/* Gravity Forms trae su propia rejilla y sus propios márgenes, y cada tema
   le mete los suyos encima. Aquí se normaliza todo para que el checkout
   respire igual en cualquier tema. Todo el espaciado sale de variables. */

.cod-checkout .gform_wrapper { margin: 0 !important; padding: 0 !important; }
.cod-checkout .gform_wrapper form,
.cod-checkout .gform_body,
.cod-checkout .gform_wrapper .gform_body { margin: 0 !important; padding: 0 !important; width: 100%; }

.cod-checkout .gform_fields {
	display: grid !important;
	grid-template-columns: 1fr !important;
	row-gap: var(--cod-field-gap, 16px) !important;
	column-gap: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.cod-checkout .gfield {
	margin: 0 !important;
	padding: 0 !important;
	max-width: 100%;
	grid-column: 1 / -1 !important;
}
.cod-checkout .ginput_container { margin: 0 !important; }
.cod-checkout .gfield_description { margin: 4px 0 0 !important; padding: 0 !important; font-size: 12.5px; }

.cod-checkout .gsection {
	border-bottom: 1px solid var(--cod-line);
	margin: calc(var(--cod-field-gap, 16px) + 10px) 0 2px !important;
	padding: 0 0 8px !important;
}
.cod-checkout .gsection_title { font-size: 17px; font-weight: 700; margin: 0 !important; }
.cod-checkout .gfield_label { font-size: 13.5px; font-weight: 600; margin: 0 0 5px !important; display: block; }
.cod-checkout .gform_footer { margin: 22px 0 0 !important; padding: 0 !important; }
.cod-checkout .gform_footer::after { content: ''; display: block; clear: both; }

.cod-checkout input[type=text],
.cod-checkout input[type=email],
.cod-checkout input[type=tel],
.cod-checkout select {
	width: 100%;
	padding: 12px 13px !important;
	border: 1px solid var(--cod-line) !important;
	border-radius: 11px !important;
	font-size: 15px !important;
	background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.cod-checkout input[type=text]:focus,
.cod-checkout input[type=email]:focus,
.cod-checkout input[type=tel]:focus,
.cod-checkout select:focus {
	border-color: var(--cod-primary) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--cod-primary) 15%, transparent);
	outline: none;
}

.cod-checkout .gform_footer input[type=submit],
.cod-checkout .cod-cta {
	width: 100%;
	background: var(--cod-primary) !important;
	color: #fff !important;
	border: none !important;
	font-size: 16.5px;
	font-weight: 700;
	padding: 17px 20px !important;
	border-radius: 14px !important;
	cursor: pointer;
	box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--cod-primary) 70%, transparent);
	transition: transform .1s ease, filter .15s ease;
}
.cod-checkout .gform_footer input[type=submit]:hover,
.cod-checkout .cod-cta:hover { filter: brightness(1.05); }
.cod-checkout .gform_footer input[type=submit]:active { transform: translateY(1px); }
.cod-checkout .cod-cta[disabled] { opacity: .55; cursor: not-allowed; box-shadow: none; }

.cod-checkout .gfield_error input,
.cod-checkout .gfield_error select { border-color: #dc2626 !important; }
.cod-checkout .validation_message { font-size: 12.5px; color: #dc2626; margin-top: 4px; }

.cod-error {
	padding: 14px 16px; border-radius: 12px;
	background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c;
	font-size: 14px;
}

/* ─────────────────── previsualización del panel ───────────────────── */

.cod-preview {
	background: var(--cod-bg, #fff);
	padding: var(--cod-pad, 22px);
	border-radius: 18px;
	border: 1px solid var(--cod-line);
	color: var(--cod-ink);
	font-size: var(--cod-fs, 16px);
}
.cod-preview__section {
	font-size: 16px; font-weight: var(--cod-hw, 700);
	margin: calc(var(--cod-field-gap, 16px) + 10px) 0 12px;
	padding-bottom: 8px; border-bottom: 1px solid var(--cod-line);
}
.cod-preview__section:first-of-type { margin-top: 6px; }
.cod-preview .cod-summary { margin: var(--cod-field-gap, 16px) 0; }
.cod-preview .cod-cta { margin-top: 18px; }

/* La previsualización imita los campos que pinta Gravity Forms, para que
   lo que ves en el panel se parezca de verdad a lo que verá el cliente. */
.cod-preview__fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cod-field-gap, 16px); }
.cod-preview__fields .cod-preview__f--wide { grid-column: 1 / -1; }
.cod-preview__f label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 5px; }
.cod-preview__f i {
	display: block; height: 44px; border: 1px solid var(--cod-line);
	border-radius: 11px; background: #fff;
}

/* ─────────────────────────── responsive ───────────────────────────── */

@media (max-width: 560px) {
	.cod-bundle { padding: 12px; gap: 11px; }
	.cod-bundle__img { flex-basis: 56px; }
	.cod-bundle__img img { width: 56px; height: 56px; }
	.cod-bundle__title { font-size: 14.5px; }
	.cod-bundle__now { font-size: 16.5px; }
	.cod-hero__title { font-size: 21px; }
	.cod-summary__total strong { font-size: 20px; }
}

/* Navegadores sin color-mix: degradación limpia, sin romper nada. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.cod-bundle.is-selected,
	.cod-ship.is-selected,
	.cod-pay.is-selected,
	.cod-bump.is-on { background: #fff; }
}

/* ═══════════════════════════════════════════════════════════════════
   VARIANTES DE BRANDING
   Las pone Cod_Suite_Theme::classes() en el contenedor. Añadir una
   variante nueva = una clase aquí y una opción en la clase Theme.
   ═══════════════════════════════════════════════════════════════════ */

.cod-checkout { background: var(--cod-bg); color: var(--cod-ink); font-size: var(--cod-fs); }
.cod-checkout .cod-bundles,
.cod-checkout .cod-ships,
.cod-checkout .cod-bumps { gap: var(--cod-gap); }

/* ── LO PRIMERO DE TODO ────────────────────────────────────────────
   Los envíos de las ofertas que no están seleccionadas se ocultan con
   el atributo `hidden`. Como .cod-ship es `display:flex`, ese display
   GANABA al `display:none` que el navegador aplica a [hidden] y salían
   todos a la vez. Esta regla es la que hace que cada oferta enseñe
   sólo SUS envíos. No la quites.
   ────────────────────────────────────────────────────────────────── */
.cod-checkout [hidden],
.cod-preview [hidden],
.cod-funnel [hidden] { display: none !important; }

/* ── control de selección de la oferta (punto tipo radio) ─────────── */

.cod-bundle__dot {
	flex: 0 0 20px; width: 20px; height: 20px;
	border: 2px solid var(--cod-line); border-radius: 50%;
	position: relative; transition: border-color .15s ease;
}
.cod-bundle.is-selected .cod-bundle__dot { border-color: var(--cod-primary); }
.cod-bundle.is-selected .cod-bundle__dot::after {
	content: ''; position: absolute; inset: 3px;
	background: var(--cod-primary); border-radius: 50%;
}

/* ── imagen de la oferta: forma y encaje configurables ────────────── */

.cod-bundle__img { flex: 0 0 var(--cod-img, 68px); }
.cod-bundle__img img {
	width: var(--cod-img, 68px);
	height: var(--cod-img, 68px);
	object-fit: var(--cod-img-fit, contain);
	border-radius: var(--cod-img-radius, 0);
	display: block;
	background: transparent;
}
/* "libre": la imagen manda, no se recorta ni se cuadra */
.cod-img-free .cod-bundle__img { flex: 0 0 auto; }
.cod-img-free .cod-bundle__img img { width: auto; height: var(--cod-img, 68px); }

.cod-ctrl-none .cod-bundle__img,
.cod-ctrl-radio .cod-bundle__img { display: none; }
.cod-ctrl-image .cod-bundle__dot,
.cod-ctrl-none .cod-bundle__dot { display: none; }

/* ── composición de las ofertas ───────────────────────────────────── */

.cod-layout-rows .cod-bundle { padding: 11px 13px; }
.cod-layout-rows .cod-bundle__img { flex-basis: 44px; }
.cod-layout-rows .cod-bundle__img img { width: 44px; height: 44px; }
.cod-layout-rows .cod-bundle__now { font-size: 16px; }

.cod-layout-grid .cod-bundles { display: grid; grid-template-columns: repeat(3, 1fr); }
.cod-layout-grid .cod-bundle { flex-direction: column; text-align: center; gap: 8px; padding: 18px 12px; }
.cod-layout-grid .cod-bundle__price { text-align: center; }
.cod-layout-grid .cod-bundle__meta { align-items: center; }
@media (max-width: 620px) {
	.cod-layout-grid .cod-bundles { grid-template-columns: 1fr; }
	.cod-layout-grid .cod-bundle { flex-direction: row; text-align: left; }
}

.cod-layout-compact .cod-bundle { padding: 9px 12px; border-width: 1px; }
.cod-layout-compact .cod-bundle__img { display: none; }
.cod-layout-compact .cod-bundle__meta { font-size: 11.5px; }
.cod-layout-compact .cod-bundle__now { font-size: 15.5px; }

/* ── botones ──────────────────────────────────────────────────────── */

.cod-btn-gradient .gform_footer input[type=submit],
.cod-btn-gradient .cod-cta {
	background: linear-gradient(135deg, var(--cod-primary) 0%,
		color-mix(in srgb, var(--cod-primary) 65%, var(--cod-accent)) 100%) !important;
}
.cod-btn-outline .gform_footer input[type=submit],
.cod-btn-outline .cod-cta {
	background: transparent !important;
	color: var(--cod-primary) !important;
	border: 2px solid var(--cod-primary) !important;
	box-shadow: none;
}
.cod-btn-pill .gform_footer input[type=submit],
.cod-btn-pill .cod-cta { border-radius: 999px !important; }

.cod-checkout .gform_footer input[type=submit],
.cod-checkout .cod-cta { color: var(--cod-primary-ink) !important; }

/* ── sombras ──────────────────────────────────────────────────────── */

.cod-shadow-none .cod-bundle,
.cod-shadow-none .cod-ship,
.cod-shadow-none .cod-pay { box-shadow: none !important; }

.cod-shadow-strong .cod-bundle { box-shadow: 0 6px 18px -8px rgba(15, 23, 42, .28); }
.cod-shadow-strong .cod-bundle.is-selected { box-shadow: 0 12px 30px -12px var(--cod-primary); }

/* ── insignias ────────────────────────────────────────────────────── */

.cod-badge-ribbon .cod-bundle__badge {
	top: 10px; left: auto; right: -6px; border-radius: 4px 0 0 4px;
	background: var(--cod-accent); transform: none;
}
.cod-badge-corner .cod-bundle__badge {
	top: 0; left: 0; border-radius: var(--cod-radius) 0 12px 0; padding: 5px 12px;
}

/* ── secciones ────────────────────────────────────────────────────── */

.cod-sect-plain .gsection { border-bottom: none; }
.cod-sect-bar .gsection {
	border-bottom: none; background: var(--cod-surface);
	padding: 10px 14px !important; border-radius: var(--cod-radius-sm);
	border-left: 4px solid var(--cod-primary);
}
.cod-sect-number { counter-reset: codsec; }
.cod-sect-number .gsection { counter-increment: codsec; }
.cod-sect-number .gsection_title::before {
	content: counter(codsec);
	display: inline-flex; align-items: center; justify-content: center;
	width: 24px; height: 24px; margin-right: 9px;
	background: var(--cod-primary); color: var(--cod-primary-ink);
	border-radius: 50%; font-size: 13px; font-weight: 700;
}

/* ── alineación y fondo ───────────────────────────────────────────── */

.cod-align-center .cod-hero,
.cod-align-center .cod-summary__note { text-align: center; }

.cod-hero__banner img { width: 100%; border-radius: var(--cod-radius); display: block; margin-bottom: 14px; }
.cod-hero__logo img { max-height: var(--cod-logo-h); }

.cod-checkout .gsection_title,
.cod-hero__title { font-weight: var(--cod-hw); }