/**
 * NNCC — Modal “Obtener entradas” (Event Tickets / TEC)
 *
 * Solo single evento (.single-tribe_events). No afecta el bloque inline Entradas en la página.
 * Encolado vía inc/events.php (nncc-tickets-modal).
 *
 * Origen del modal: Event Tickets renderiza el trigger + tribe( 'dialog.view' )->render_modal()
 * desde submit-button-modal.php; wrapper tribe-modal__wrapper--ar; diálogo Tribe Common (dialog.css).
 */

/* -------------------------------------------------------------------------
   Variables locales (subtítulo traducible vía inline style en PHP)
------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------
   Capa y overlay (por encima del header sticky ~1030)
------------------------------------------------------------------------- */
.single-tribe_events .tribe-common div.tribe-dialog {
	z-index: 100000 !important;
}

.single-tribe_events .tribe-dialog__overlay,
.single-tribe_events .tribe-modal__overlay {
	background: rgba(0, 0, 0, 0.55) !important;
	backdrop-filter: blur(3px);
}

/* -------------------------------------------------------------------------
   Panel exterior: alto al contenido, sin “torre” de blanco
------------------------------------------------------------------------- */
.single-tribe_events .tribe-common .tribe-dialog__wrapper[class*="tribe-modal__wrapper"] {
	box-sizing: border-box !important;
	width: min(100vw - 24px, 760px) !important;
	max-width: min(100vw - 24px, 760px) !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: min(92vh, 720px) !important;
	padding: clamp(12px, 3vh, 28px) clamp(14px, 3vw, 22px) !important;
	overflow-y: auto !important;
	border-radius: 16px !important;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12) !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
	background: var(--nncc-white, #fff) !important;
}

.single-tribe_events .tribe-common .tribe-dialog__wrapper div[role="document"] {
	align-items: stretch !important;
	justify-content: flex-start !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	flex-grow: 0 !important;
}

.single-tribe_events .tribe-common .tribe-dialog__wrapper div[role="document"] > .tribe-dialog__content.tribe-modal__content {
	width: 100% !important;
	max-width: 100% !important;
	align-self: stretch !important;
	box-sizing: border-box !important;
	min-height: 0 !important;
}

.single-tribe_events .tribe-dialog__wrapper[class*="tribe-modal__wrapper"] .tribe-dialog__content.tribe-modal__content {
	height: auto !important;
}

/* Contenedor interno del plugin: sin sombra pesada duplicada */
.single-tribe_events .tribe-dialog__content.tribe-modal__content {
	border-radius: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
	overflow: visible !important;
	width: 100% !important;
	max-width: 100% !important;
	max-height: none !important;
	padding: 0 !important;
	margin: 0 !important;
	font-size: 0.9375rem;
	line-height: 1.45;
	color: rgba(0, 0, 0, 0.88);
}

.single-tribe_events .tribe-dialog__content.tribe-modal__content,
.single-tribe_events .tribe-dialog__content.tribe-modal__content * {
	font-family: inherit;
}

/* -------------------------------------------------------------------------
   Header: título + subtítulo (subtítulo = ::after; texto en --nncc-modal-subtitle)
------------------------------------------------------------------------- */
.single-tribe_events .tribe-common .tribe-dialog__wrapper div[role="document"] > h2.tribe-dialog__title,
.single-tribe_events .tribe-common .tribe-dialog__wrapper div[role="document"] > .tribe-modal__title,
.single-tribe_events .tribe-common .tribe-dialog__wrapper div[role="document"] > h2.tribe-modal--ar__title {
	margin: 0 0 0.75rem !important;
	padding: 0.25rem 3.25rem 0.65rem 0 !important;
	border-bottom: 0 !important;
	font-size: 1.125rem !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	letter-spacing: -0.015em !important;
	color: var(--nncc-black, #000) !important;
	align-self: stretch !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.single-tribe_events .tribe-common h2.nncc-tickets-modal__title::after {
	display: block;
	margin-top: 0.35rem;
	content: var(--nncc-modal-subtitle);
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.35;
	color: rgba(0, 0, 0, 0.52);
	letter-spacing: 0;
}

/* -------------------------------------------------------------------------
   Cerrar: alineado al título, visible y sobrio
------------------------------------------------------------------------- */
.single-tribe_events .tribe-common .tribe-dialog__wrapper[class*="tribe-modal__wrapper"] .tribe-dialog__close-button,
.single-tribe_events .tribe-common .tribe-dialog__wrapper[class*="tribe-modal__wrapper"] .tribe-modal__close-button {
	top: 0.85rem !important;
	right: 0.85rem !important;
	width: 40px !important;
	height: 40px !important;
	border-radius: 50% !important;
	border: 1px solid rgba(0, 0, 0, 0.14) !important;
	background-color: rgba(0, 0, 0, 0.04) !important;
	background-size: 14px 14px !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	z-index: 5 !important;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.single-tribe_events .tribe-common .tribe-dialog__wrapper[class*="tribe-modal__wrapper"] .tribe-dialog__close-button:hover,
.single-tribe_events .tribe-common .tribe-dialog__wrapper[class*="tribe-modal__wrapper"] .tribe-modal__close-button:hover {
	background-color: rgba(0, 0, 0, 0.08) !important;
	border-color: rgba(0, 0, 0, 0.22) !important;
}

/* -------------------------------------------------------------------------
   Carrito: “card” compacta
------------------------------------------------------------------------- */
.single-tribe_events .tribe-dialog__content.tribe-modal__content .tribe-modal__cart,
.single-tribe_events .tribe-dialog__content.tribe-modal__content #tribe-modal__cart {
	min-height: 0 !important;
	width: 100% !important;
	box-sizing: border-box !important;
	padding: 0.75rem 0.85rem !important;
	margin: 0 !important;
	background: #fafafa !important;
	border-radius: 12px !important;
	border: 1px solid rgba(0, 0, 0, 0.06) !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

/* -------------------------------------------------------------------------
   Event Tickets Plus / v2: fila del resumen (#tribe-modal__cart.event-tickets)
   — cantidad legible “Nx”, alineada; sin heredar el input grande de la tabla
   — Sin !important en display/grid: ETP hace .hide()/.fadeIn() según cantidad (>0);
     un display:grid !important rompía el ocultado de filas con qty 0.
------------------------------------------------------------------------- */
.single-tribe_events .tribe-dialog__content.tribe-modal__content #tribe-modal__cart .tribe-tickets__tickets-item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.5rem 1rem;
}

.single-tribe_events .tribe-dialog__content.tribe-modal__content #tribe-modal__cart .tribe-tickets__tickets-item-quantity {
	display: flex !important;
	align-items: center !important;
	justify-self: end !important;
	align-self: center !important;
	margin: 0 !important;
}

.single-tribe_events .tribe-dialog__content.tribe-modal__content #tribe-modal__cart .tribe-tickets__tickets-item-quantity-number {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.04em !important;
	line-height: 1.2 !important;
}

/* “1x”, “2x”… el número sigue viniendo del input (JS); la “x” es solo visual */
.single-tribe_events .tribe-dialog__content.tribe-modal__content #tribe-modal__cart .tribe-tickets__tickets-item-quantity-number::after {
	content: "x" !important;
	font-weight: 800 !important;
	font-size: 0.95em !important;
	line-height: 1 !important;
	color: #e10600 !important;
	-webkit-text-fill-color: #e10600 !important;
}

.single-tribe_events .tribe-dialog__content.tribe-modal__content #tribe-modal__cart .tribe-tickets__tickets-item-quantity-number input.tribe-tickets__tickets-item-quantity-number-input {
	width: auto !important;
	min-width: 1.25ch !important;
	max-width: 4.5ch !important;
	padding: 0.12em 0.2em !important;
	margin: 0 !important;
	font-size: 1rem !important;
	font-weight: 800 !important;
	line-height: 1.25 !important;
	color: #e10600 !important;
	-webkit-text-fill-color: #e10600 !important;
	text-align: center !important;
	vertical-align: middle !important;
	border-radius: 8px !important;
}

/* Misma idea si el carrito modal usa el markup clásico (input .tribe-tickets-quantity) */
.single-tribe_events .tribe-dialog__content.tribe-modal__content #tribe-modal__cart .tribe-tickets__item__quantity__number {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.04em !important;
	line-height: 1.2 !important;
}

.single-tribe_events .tribe-dialog__content.tribe-modal__content #tribe-modal__cart .tribe-tickets__item__quantity__number::after {
	content: "x" !important;
	font-weight: 800 !important;
	font-size: 0.95em !important;
	line-height: 1 !important;
	color: #e10600 !important;
	-webkit-text-fill-color: #e10600 !important;
}

.single-tribe_events .tribe-dialog__content.tribe-modal__content #tribe-modal__cart input.tribe-tickets-quantity {
	width: auto !important;
	min-width: 1.25ch !important;
	max-width: 4.5ch !important;
	padding: 0.12em 0.2em !important;
	margin: 0 !important;
	font-size: 1rem !important;
	font-weight: 800 !important;
	line-height: 1.25 !important;
	color: #e10600 !important;
	-webkit-text-fill-color: #e10600 !important;
	text-align: center !important;
	border-radius: 8px !important;
}

/* Fila producto (bloque clásico tribe-tickets__item) */
.single-tribe_events .tribe-dialog__content.tribe-modal__content .tribe-tickets__item {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 0.5rem 1rem !important;
	padding: 0.65rem 0 !important;
	margin: 0 !important;
	border-bottom: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

.single-tribe_events .tribe-dialog__content.tribe-modal__content .tribe-tickets__item .tribe-tickets__item__content__title {
	font-size: 1rem !important;
	font-weight: 600 !important;
	margin: 0 !important;
	line-height: 1.35 !important;
	min-width: 0 !important;
	color: var(--nncc-black, #000) !important;
	flex: 1 1 160px !important;
}

.single-tribe_events .tribe-dialog__content.tribe-modal__content .tribe-tickets__item .tribe-tickets__item__extra,
.single-tribe_events .tribe-dialog__content.tribe-modal__content .tribe-tickets__item .tribe-tickets__item__extra-price {
	font-weight: 700 !important;
	color: var(--nncc-black, #000) !important;
	font-size: 0.95rem !important;
}

.single-tribe_events .tribe-dialog__content.tribe-modal__content .tribe-tickets__item .tribe-tickets__item__total__wrap {
	font-weight: 800 !important;
	font-size: 0.95rem !important;
	white-space: nowrap !important;
	color: var(--nncc-black, #000) !important;
}

/* -------------------------------------------------------------------------
   Totales (bloque tickets) — siguen a la derecha; separación clara del CTA
------------------------------------------------------------------------- */
.single-tribe_events .tribe-dialog__content.tribe-modal__content .tribe-tickets__footer {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: flex-end !important;
	justify-content: flex-end !important;
	gap: 0.75rem 1.75rem !important;
	margin-top: 0.65rem !important;
	margin-bottom: 0 !important;
	padding-top: 0.65rem !important;
	padding-bottom: 0 !important;
	border-top: 0 !important;
	font-size: 0.875rem !important;
}

.single-tribe_events .tribe-dialog__content.tribe-modal__content .tribe-tickets__footer__quantity {
	font-weight: 600 !important;
	color: rgba(0, 0, 0, 0.62) !important;
}

.single-tribe_events .tribe-dialog__content.tribe-modal__content .tribe-tickets__footer__quantity__label,
.single-tribe_events .tribe-dialog__content.tribe-modal__content .tribe-tickets__footer__total__label {
	font-weight: 600 !important;
	color: rgba(0, 0, 0, 0.55) !important;
	margin-right: 0.25rem !important;
}

.single-tribe_events .tribe-dialog__content.tribe-modal__content .tribe-tickets__footer__quantity__number {
	font-weight: 700 !important;
	color: var(--nncc-black, #000) !important;
}

.single-tribe_events .tribe-dialog__content.tribe-modal__content .tribe-tickets__footer__total .tribe-tickets__footer__total__wrap {
	font-size: 1.2rem !important;
	font-weight: 800 !important;
	color: var(--nncc-black, #000) !important;
	letter-spacing: -0.02em !important;
}

/* -------------------------------------------------------------------------
   Event Tickets Plus: footer — un solo CTA centrado (override NNCC en template)
------------------------------------------------------------------------- */
.single-tribe_events .tribe-dialog__wrapper[class*="tribe-modal__wrapper"] .tribe-dialog__content.tribe-modal__content .tribe-tickets__attendee-tickets-footer,
.single-tribe_events .tribe-dialog__content.tribe-modal__content .tribe-tickets__attendee-tickets-footer {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0 !important;
	flex-wrap: nowrap !important;
	min-height: 0 !important;
	margin-top: 1.25rem !important;
	padding-top: 1rem !important;
	border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.single-tribe_events .tribe-dialog__content.tribe-modal__content .tribe-tickets__attendee-tickets-footer > * {
	flex: 0 0 auto !important;
}

.single-tribe_events .tribe-dialog__content.tribe-modal__content .tribe-tickets__attendee-tickets-footer--nncc-single-cta {
	width: 100% !important;
}

/* -------------------------------------------------------------------------
   CTA principal: verde NNCC (misma familia que canje / redeem validado)
------------------------------------------------------------------------- */
.single-tribe_events .tribe-dialog__content.tribe-modal__content button.tribe-tickets__attendee-tickets-footer-checkout-button,
.single-tribe_events .tribe-dialog__content.tribe-modal__content a.tribe-tickets__attendee-tickets-footer-checkout-button,
.single-tribe_events .tribe-dialog__content.tribe-modal__content .tribe-common-c-btn.tribe-tickets__attendee-tickets-footer-checkout-button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	align-self: center !important;
	border-radius: var(--nncc-btn-radius, 999px) !important;
	font-weight: 800 !important;
	border: 2px solid #009900 !important;
	background: #00b300 !important;
	color: var(--nncc-white, #fff) !important;
	min-height: 52px !important;
	width: auto !important;
	max-width: 100% !important;
	padding: 0.75rem 1.75rem !important;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12) !important;
	text-decoration: none !important;
	transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.single-tribe_events .tribe-dialog__content.tribe-modal__content button.tribe-tickets__attendee-tickets-footer-checkout-button:hover,
.single-tribe_events .tribe-dialog__content.tribe-modal__content a.tribe-tickets__attendee-tickets-footer-checkout-button:hover,
.single-tribe_events .tribe-dialog__content.tribe-modal__content .tribe-common-c-btn.tribe-tickets__attendee-tickets-footer-checkout-button:hover {
	background: #009a00 !important;
	border-color: #007a00 !important;
	color: var(--nncc-white, #fff) !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
}

.single-tribe_events .tribe-dialog__content.tribe-modal__content button.tribe-tickets__attendee-tickets-footer-checkout-button:focus-visible,
.single-tribe_events .tribe-dialog__content.tribe-modal__content a.tribe-tickets__attendee-tickets-footer-checkout-button:focus-visible {
	outline: 2px solid #000 !important;
	outline-offset: 3px !important;
}

/* Woo / .button en el modal si aplica */
.single-tribe_events .tribe-dialog__content.tribe-modal__content a.button,
.single-tribe_events .tribe-dialog__content.tribe-modal__content button.button {
	border-radius: var(--nncc-btn-radius, 999px) !important;
}

/* Enlaces sueltos: sin subrayado agresivo en footer */
.single-tribe_events .tribe-dialog__content.tribe-modal__content .tribe-tickets__attendee-tickets-footer a:not(.tribe-common-c-btn) {
	text-decoration: none !important;
}

/* -------------------------------------------------------------------------
   Formulario AR / ítems meta (Plus)
------------------------------------------------------------------------- */
.single-tribe_events .tribe-dialog__content.tribe-modal__content #tribe-tickets__modal-form,
.single-tribe_events .tribe-dialog__content.tribe-modal__content form.tribe-tickets__tickets-form {
	width: 100%;
}

.single-tribe_events .tribe-dialog__content.tribe-modal__content .tribe-tickets__attendee-tickets {
	max-width: 100%;
	padding: 0;
}

.single-tribe_events .tribe-dialog__content.tribe-modal__content .tribe-tickets__attendee-tickets-item {
	padding: 0.5rem 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.single-tribe_events .tribe-dialog__content.tribe-modal__content .tribe-tickets__attendee-tickets-item:last-child {
	border-bottom: 0;
}

.single-tribe_events .tribe-dialog__content.tribe-modal__content .tribe-dialog__body > *,
.single-tribe_events .tribe-dialog__content.tribe-modal__content .tribe-modal__body > * {
	max-width: 100%;
}

.single-tribe_events .tribe-dialog__content.tribe-modal__content .tribe-dialog__body,
.single-tribe_events .tribe-dialog__content.tribe-modal__content .tribe-modal__body {
	max-height: none !important;
	overflow: visible !important;
	padding: 0 !important;
	background: transparent !important;
}

/* -------------------------------------------------------------------------
   hr suaves
------------------------------------------------------------------------- */
.single-tribe_events .tribe-dialog__content.tribe-modal__content hr {
	border: 0;
	height: 1px;
	background: rgba(0, 0, 0, 0.06);
	margin: 0.65rem 0;
}

/* -------------------------------------------------------------------------
   Responsive: casi full width, botones apilados
------------------------------------------------------------------------- */
@media (max-width: 599.98px) {
	.single-tribe_events .tribe-common .tribe-dialog__wrapper[class*="tribe-modal__wrapper"] {
		width: calc(100vw - 16px) !important;
		max-width: calc(100vw - 16px) !important;
		padding: 12px !important;
		border-radius: 14px !important;
	}

	.single-tribe_events .tribe-dialog__content.tribe-modal__content .tribe-tickets__footer {
		flex-direction: column !important;
		align-items: stretch !important;
		justify-content: flex-start !important;
		gap: 0.5rem !important;
	}

	.single-tribe_events .tribe-dialog__content.tribe-modal__content .tribe-tickets__footer__quantity,
	.single-tribe_events .tribe-dialog__content.tribe-modal__content .tribe-tickets__footer__total {
		display: flex !important;
		justify-content: space-between !important;
		width: 100% !important;
	}

	.single-tribe_events .tribe-dialog__content.tribe-modal__content .tribe-tickets__attendee-tickets-footer {
		align-items: stretch !important;
		margin-top: 1.1rem !important;
		padding-top: 1rem !important;
	}

	.single-tribe_events .tribe-dialog__content.tribe-modal__content .tribe-tickets__attendee-tickets-footer .tribe-common-c-btn,
	.single-tribe_events .tribe-dialog__content.tribe-modal__content .tribe-tickets__attendee-tickets-footer button.tribe-tickets__attendee-tickets-footer-checkout-button {
		width: 100% !important;
		min-width: 0 !important;
		justify-content: center !important;
	}

	.single-tribe_events .tribe-dialog__content.tribe-modal__content .tribe-tickets__item {
		flex-direction: column !important;
		align-items: flex-start !important;
	}

	.single-tribe_events .tribe-dialog__content.tribe-modal__content .tribe-tickets__item .tribe-tickets__item__extra {
		width: 100% !important;
		display: flex !important;
		justify-content: space-between !important;
		align-items: center !important;
	}
}