/* Auto-Tinder is deliberately scoped to its Elementor widget contract. */

.dabag-auto-tinder.section-dark {
	--tinder-card-width: 40.5rem;
	--dabag-auto-tinder-stage-height: calc(100vh - var(--header-height));
	--tinder-dislike: var(--color-magenta);
	--tinder-like: var(--color-lime);
	--tinder-info: var(--color-orange);
	--dabag-link-interaction: var(--color-ink);
	position: relative;
	box-sizing: border-box;
	block-size: var(--dabag-auto-tinder-stage-height);
	min-block-size: 0;
	padding-block: clamp(0.5rem, 1.3dvh, 1rem);
	overflow: hidden;
	color: var(--color-ink);
	background: var(--color-white);
}

@supports (height: 100dvh) {
	.dabag-auto-tinder.section-dark {
		--dabag-auto-tinder-stage-height: calc(100dvh - var(--header-height));
	}
}

body.admin-bar .dabag-auto-tinder.section-dark {
	--dabag-auto-tinder-stage-height: calc(100vh - var(--header-height) - 32px);
}

@supports (height: 100dvh) {
	body.admin-bar .dabag-auto-tinder.section-dark {
		--dabag-auto-tinder-stage-height: calc(100dvh - var(--header-height) - 32px);
	}
}

@media (max-width: 782px) {
	body.admin-bar .dabag-auto-tinder.section-dark {
		--dabag-auto-tinder-stage-height: calc(100vh - var(--header-height) - 46px);
	}

	@supports (height: 100dvh) {
		body.admin-bar .dabag-auto-tinder.section-dark {
			--dabag-auto-tinder-stage-height: calc(100dvh - var(--header-height) - 46px);
		}
	}
}

.dabag-auto-tinder [hidden] {
	display: none !important;
}

.dabag-auto-tinder button {
	-webkit-tap-highlight-color: transparent;
}

.dabag-auto-tinder__container {
	display: grid;
	height: 100%;
	min-height: 0;
	grid-template-rows: auto minmax(0, 1fr) auto;
	justify-items: center;
	gap: clamp(0.35rem, 1dvh, 0.7rem);
}

.dabag-auto-tinder__header,
.dabag-auto-tinder__quiz,
.dabag-auto-tinder__experience,
.dabag-auto-tinder__inventory,
.dabag-auto-tinder__empty {
	width: min(100%, 64rem);
}

.dabag-auto-tinder__header {
	grid-row: 1;
	margin-bottom: 0;
}

.dabag-auto-tinder__header h1 {
	margin: 0;
	font-size: clamp(1.85rem, min(5vw, 5dvh), 3.5rem);
	font-weight: var(--font-bold);
	letter-spacing: -0.045em;
	line-height: 0.94;
}

.dabag-auto-tinder__quiz {
	display: grid;
	min-height: 0;
	height: 100%;
	grid-row: 2;
	grid-template-rows: auto auto minmax(0, 1fr) auto auto;
	align-content: center;
	justify-items: center;
	gap: clamp(0.4rem, 1.1dvh, 0.85rem);
}

.dabag-auto-tinder__quiz > h2,
.dabag-auto-tinder__end h2 {
	margin: 0;
	text-align: center;
	font-size: clamp(1.45rem, min(3.5vw, 4dvh), 2.65rem);
	font-weight: var(--font-bold);
	letter-spacing: -0.035em;
	line-height: 1;
}

.dabag-auto-tinder__match-count,
.dabag-auto-tinder__deck-count {
	margin: 0;
	color: var(--color-blue);
	font-size: clamp(0.95rem, min(2.2vw, 2.4dvh), 1.35rem);
	font-weight: var(--font-bold);
}

.dabag-auto-tinder__questions {
	display: grid;
	min-height: 0;
	width: min(100%, 44rem);
	align-self: center;
	gap: clamp(0.4rem, 1dvh, 0.8rem);
}

.dabag-auto-tinder__question {
	min-width: 0;
	margin: 0;
	padding: clamp(0.7rem, min(1.8vw, 1.8dvh), 1.25rem);
	border: 1px solid var(--color-gray-300);
	border-radius: var(--radius-card);
	background: color-mix(in srgb, var(--color-white) 94%, var(--color-blue));
	box-shadow: 0 0.45rem 1.4rem rgb(17 17 17 / 0.07);
}

.dabag-auto-tinder__question.is-answered {
	border-color: color-mix(in srgb, var(--color-blue) 55%, var(--color-white));
}

.dabag-auto-tinder__question legend {
	max-width: 32rem;
	padding: 0;
	font-size: clamp(1rem, min(2.1vw, 2.5dvh), 1.4rem);
	font-weight: var(--font-bold);
	line-height: 1.15;
}

.dabag-auto-tinder__question > div {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(0.35rem, 0.8dvh, 0.65rem);
	margin-top: clamp(0.45rem, 1dvh, 0.8rem);
}

.dabag-auto-tinder__question button {
	min-height: clamp(2.55rem, 5.8dvh, 3.15rem);
	padding: clamp(0.4rem, 0.9dvh, 0.7rem) clamp(0.55rem, 1.5vw, 1rem);
	border: 1px solid var(--color-ink);
	border-radius: var(--radius-pill);
	color: var(--color-ink);
	background: var(--color-white);
	font-weight: var(--font-bold);
	line-height: 1.1;
	cursor: pointer;
	transition:
		color var(--transition-fast),
		background-color var(--transition-fast),
		border-color var(--transition-fast),
		transform var(--transition-fast);
}

.dabag-auto-tinder__question button:hover {
	border-color: var(--color-ink);
	color: var(--color-white);
	background: var(--color-ink);
}

.dabag-auto-tinder__question button:active {
	transform: scale(0.98);
}

.dabag-auto-tinder__question button[aria-pressed="true"] {
	border-color: var(--color-blue);
	color: var(--color-white);
	background: var(--color-blue);
}

body.dabag-theme .dabag-auto-tinder .dabag-auto-tinder__question button[aria-pressed="false"] {
	border-color: var(--color-ink);
	color: var(--color-ink);
	background: var(--color-white);
}

body.dabag-theme .dabag-auto-tinder .dabag-auto-tinder__question button[aria-pressed="false"]:is(:hover, :focus, :focus-visible, :active) {
	border-color: var(--color-ink);
	color: var(--color-white);
	background: var(--color-ink);
}

body.dabag-theme .dabag-auto-tinder .dabag-auto-tinder__question button[aria-pressed="true"]:is(:hover, :focus, :focus-visible, :active) {
	border-color: var(--color-blue);
	color: var(--color-white);
	background: var(--color-blue);
}

.dabag-auto-tinder__question button:focus-visible,
.dabag-auto-tinder__question-nav:focus-visible,
.dabag-auto-tinder__start:focus-visible,
.dabag-auto-tinder__action:focus-visible,
.dabag-auto-tinder__deck:focus-visible {
	outline: 0;
	box-shadow: var(--focus-ring);
}

.dabag-auto-tinder__start {
	min-width: min(100%, 17rem);
	min-height: 2.75rem;
	margin-top: 0;
}

.dabag-auto-tinder__question-navigation {
	display: grid;
	grid-template-columns: minmax(6.5rem, 1fr) auto minmax(6.5rem, 1fr);
	width: min(100%, 44rem);
	align-items: center;
	gap: 0.75rem;
}

.dabag-auto-tinder__question-navigation > span {
	font-weight: var(--font-bold);
	text-align: center;
}

.dabag-auto-tinder__question-nav {
	min-height: clamp(2.5rem, 5.5dvh, 2.75rem);
	padding: 0.55rem 0.9rem;
	border: 1px solid var(--color-ink);
	border-radius: var(--radius-pill);
	color: var(--color-ink);
	background: var(--color-white);
	font-weight: var(--font-bold);
	cursor: pointer;
}

.dabag-auto-tinder__question-nav:first-child {
	justify-self: start;
}

.dabag-auto-tinder__question-nav:last-child {
	justify-self: end;
}

body.dabag-theme .dabag-auto-tinder button.dabag-auto-tinder__question-nav:not([data-state="start"]):not(:disabled) {
	border-color: var(--color-ink);
	color: var(--color-ink);
	background: var(--color-white);
}

body.dabag-theme .dabag-auto-tinder button.dabag-auto-tinder__question-nav:not([data-state="start"]):not(:disabled):is(:hover, :focus, :focus-visible, :active) {
	border-color: var(--color-ink);
	color: var(--color-white);
	background: var(--color-ink);
}

.dabag-auto-tinder__question-nav[data-state="start"] {
	border-color: var(--color-blue);
	color: var(--color-white);
	background: var(--color-blue);
}

/* Keep quiz navigation within the blue Auto-Tinder palette even when a
 * global Elementor button interaction rule is present. */
body.dabag-theme .dabag-auto-tinder button.dabag-auto-tinder__question-nav[data-state="start"],
body.dabag-theme .dabag-auto-tinder button.dabag-auto-tinder__question-nav[data-state="start"]:is(:hover, :focus, :focus-visible, :active),
body.dabag-theme .dabag-auto-tinder button.dabag-auto-tinder__start:not(:disabled),
body.dabag-theme .dabag-auto-tinder button.dabag-auto-tinder__start:not(:disabled):is(:hover, :focus, :focus-visible, :active) {
	border-color: var(--color-blue);
	color: var(--color-white);
	background: var(--color-blue);
}

.dabag-auto-tinder__question-nav:disabled {
	border-color: var(--color-gray-300);
	color: var(--color-gray-700);
	background: var(--color-white);
	cursor: default;
}

.dabag-auto-tinder__start:disabled {
	color: var(--color-gray-700);
	background: var(--color-gray-300);
	box-shadow: none;
	cursor: not-allowed;
	filter: none;
	transform: none;
}

.dabag-auto-tinder__experience {
	display: grid;
	min-height: 0;
	height: 100%;
	grid-row: 2;
	grid-template-rows: auto minmax(0, 1fr) auto;
	align-content: stretch;
	justify-items: center;
	gap: clamp(0.45rem, 1.4dvh, 0.9rem);
}

.dabag-auto-tinder__deck {
	position: relative;
	z-index: 1;
	isolation: isolate;
	width: min(100%, var(--tinder-card-width), calc((var(--dabag-auto-tinder-stage-height) - 12rem) * 0.75));
	min-width: 0;
	align-self: center;
	aspect-ratio: 3 / 4;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
}

.dabag-auto-tinder__deck:focus-visible {
	border-radius: var(--radius-card);
}

.dabag-auto-tinder__card {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-rows: minmax(0, 58%) minmax(0, 42%);
	contain: layout paint;
	overflow: hidden;
	border: 1px solid rgb(255 255 255 / 0.35);
	border-radius: var(--radius-card);
	color: var(--color-white);
	background: var(--color-card);
	box-shadow: 0 1.1rem 2.6rem rgb(17 17 17 / 0.22);
	transform-origin: 50% 92%;
	will-change: transform, opacity;
}

.dabag-auto-tinder__card.is-current {
	z-index: 3;
	transform: translateY(0) scale(1);
	cursor: grab;
}

.dabag-auto-tinder__card.is-next {
	z-index: 2;
	pointer-events: none;
	transform: translateY(0.65rem) scale(0.972);
}

.dabag-auto-tinder__card.is-following {
	z-index: 1;
	pointer-events: none;
	transform: translateY(1.15rem) scale(0.945);
}

.dabag-auto-tinder__card.is-dragging {
	cursor: grabbing;
	transition: none;
}

.dabag-auto-tinder__card.is-swiping {
	pointer-events: none;
}

.dabag-auto-tinder__media,
.dabag-auto-tinder__media img {
	width: 100%;
	height: 100%;
	margin: 0;
}

.dabag-auto-tinder__media {
	position: relative;
	min-height: 0;
	overflow: hidden;
	background: var(--color-card);
}

.dabag-auto-tinder__media img {
	position: absolute;
	inset: 0;
	object-fit: cover;
	object-position: center;
	pointer-events: none;
	-webkit-user-drag: none;
}

.dabag-auto-tinder__overlay {
	position: relative;
	z-index: 1;
	display: flex;
	min-height: 0;
	flex-direction: column;
	justify-content: center;
	padding: clamp(0.85rem, min(2.5vw, 2.2dvh), 1.45rem);
	overflow: hidden;
	background: var(--color-ink);
	pointer-events: none;
}

.dabag-auto-tinder__overlay h2 {
	max-width: 22ch;
	margin: 0;
	font-size: clamp(1.3rem, min(4vw, 3.5dvh), 2.15rem);
	font-weight: var(--font-bold);
	letter-spacing: -0.025em;
	line-height: 1.02;
}

.dabag-auto-tinder__subtitle {
	margin: 0.25rem 0 0;
	font-size: clamp(0.9rem, min(2.8vw, 2.4dvh), 1.3rem);
	line-height: 1.08;
}

.dabag-auto-tinder__facts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.7rem;
	margin: clamp(0.55rem, min(2vw, 1.8dvh), 0.9rem) 0 0;
}

.dabag-auto-tinder__facts > div {
	display: flex;
	min-width: 0;
	align-items: center;
	gap: 0.5rem;
}

.dabag-auto-tinder__facts :is(dt, dd) {
	margin: 0;
}

.dabag-auto-tinder__facts dt {
	flex: 0 0 auto;
}

.dabag-auto-tinder__facts img {
	width: clamp(1.35rem, 4vw, 1.8rem);
	height: clamp(1.35rem, 4vw, 1.8rem);
	object-fit: contain;
	filter: brightness(0) invert(1);
}

.dabag-auto-tinder__facts dd {
	min-width: 0;
	overflow-wrap: anywhere;
	font-size: clamp(0.72rem, 2.3vw, 1rem);
	font-weight: var(--font-bold);
	line-height: 1.08;
}

.dabag-auto-tinder__price {
	align-self: flex-start;
	margin: clamp(0.55rem, min(2vw, 1.8dvh), 0.9rem) 0 0;
	padding: 0.45rem 0.85rem;
	border-radius: var(--radius-pill);
	color: var(--color-ink);
	background: var(--color-white);
	font-size: clamp(0.85rem, 2.6vw, 1.05rem);
	font-weight: var(--font-bold);
}

.dabag-auto-tinder__intent {
	position: absolute;
	z-index: 4;
	top: clamp(1.2rem, 4vw, 2rem);
	padding: 0.35rem 0.65rem;
	border: 0.2rem solid currentColor;
	border-radius: 0.55rem;
	font-size: clamp(1.2rem, 4vw, 2rem);
	font-weight: var(--font-bold);
	letter-spacing: 0.08em;
	line-height: 1;
	pointer-events: none;
}

.dabag-auto-tinder__intent--dislike {
	right: clamp(1.2rem, 4vw, 2rem);
	color: var(--tinder-dislike);
	opacity: var(--dabag-tinder-dislike, 0);
	transform: rotate(9deg);
}

.dabag-auto-tinder__intent--like {
	left: clamp(1.2rem, 4vw, 2rem);
	color: var(--tinder-like);
	opacity: var(--dabag-tinder-like, 0);
	transform: rotate(-9deg);
}

.dabag-auto-tinder__actions {
	position: relative;
	z-index: 8;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(0.75rem, 3dvh, 2rem);
}

.dabag-auto-tinder__action {
	display: inline-grid;
	width: clamp(3rem, 8dvh, 5.25rem);
	height: clamp(3rem, 8dvh, 5.25rem);
	place-items: center;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 50%;
	background: var(--color-white);
	box-shadow: 0 0.6rem 1.5rem rgb(17 17 17 / 0.18);
	font-weight: var(--font-bold);
	line-height: 1;
	cursor: pointer;
	transition:
		border-color var(--transition-fast),
		background-color var(--transition-fast),
		transform var(--transition-fast);
}

.dabag-auto-tinder__action > span[aria-hidden="true"] {
	display: block;
	line-height: 0.85;
}

.dabag-auto-tinder__action > img[aria-hidden="true"] {
	display: block;
	width: 48%;
	height: 48%;
	object-fit: contain;
	pointer-events: none;
}

.dabag-auto-tinder__action--dislike {
	color: var(--tinder-dislike);
	font-size: clamp(2.2rem, 5.5dvh, 3.8rem);
}

.dabag-auto-tinder__action--like {
	color: var(--tinder-like);
	font-size: clamp(2rem, 5dvh, 3.4rem);
}

.dabag-auto-tinder__action--info {
	color: var(--tinder-info);
	font-size: clamp(1.5rem, 4dvh, 2.4rem);
}

.dabag-auto-tinder__action:hover {
	border-color: var(--color-ink);
	background: color-mix(in srgb, var(--color-white) 90%, var(--color-ink));
	transform: translateY(-0.15rem);
}

body.dabag-theme .dabag-auto-tinder .dabag-auto-tinder__action--dislike:is(:hover, :focus, :focus-visible, :active) {
	border-color: var(--tinder-dislike);
	color: var(--tinder-dislike);
	background: color-mix(in srgb, var(--color-white) 90%, var(--tinder-dislike));
}

body.dabag-theme .dabag-auto-tinder .dabag-auto-tinder__action--like:is(:hover, :focus, :focus-visible, :active) {
	border-color: var(--tinder-like);
	color: var(--tinder-like);
	background: color-mix(in srgb, var(--color-white) 90%, var(--tinder-like));
}

body.dabag-theme .dabag-auto-tinder .dabag-auto-tinder__action--info:is(:hover, :focus, :focus-visible, :active) {
	border-color: var(--tinder-info);
	color: var(--tinder-info);
	background: color-mix(in srgb, var(--color-white) 90%, var(--tinder-info));
}

.dabag-auto-tinder__action:active {
	transform: translateY(0) scale(0.96);
}

.dabag-auto-tinder__end {
	display: grid;
	min-height: 0;
	height: 100%;
	place-items: center;
	align-content: center;
	gap: clamp(0.75rem, 2dvh, 1.5rem);
	text-align: center;
}

.dabag-auto-tinder__inventory {
	display: flex;
	min-height: 0;
	grid-row: 3;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(0.4rem, 1vw, 0.75rem);
	margin-top: 0;
	padding-top: clamp(0.35rem, 0.8dvh, 0.6rem);
	border-top: 1px solid var(--color-gray-300);
	text-align: center;
}

.dabag-auto-tinder__inventory p {
	margin: 0;
	font-size: clamp(0.78rem, min(1.4vw, 1.8dvh), 0.95rem);
	font-weight: var(--font-bold);
}

.dabag-auto-tinder__inventory .button-light {
	min-height: 2.5rem;
	padding: 0.45rem 0.85rem;
	border: 1px solid var(--color-ink);
}

.dabag-auto-tinder.is-swiping .dabag-auto-tinder__experience {
	grid-row: 2;
}

.dabag-auto-tinder__new-questions {
	padding: 0.2rem;
	border: 0;
	border-bottom: 1px solid currentColor;
	border-radius: 0;
	color: var(--color-ink);
	background: transparent;
	font-size: clamp(0.72rem, min(1.25vw, 1.6dvh), 0.88rem);
	font-weight: var(--font-bold);
	line-height: 1.1;
	cursor: pointer;
}

body.dabag-theme .dabag-auto-tinder .dabag-auto-tinder__new-questions:is(:hover, :focus, :focus-visible, :active) {
	border-bottom-color: currentColor;
	color: var(--color-ink);
	background: transparent;
}

.dabag-auto-tinder__empty {
	padding: clamp(1.4rem, 4vw, 2.25rem);
	border-radius: var(--radius-card);
	color: var(--color-white);
	background: var(--color-card);
	text-align: center;
}

.dabag-auto-tinder__empty strong {
	font-size: clamp(1.3rem, 3vw, 1.75rem);
}

.dabag-auto-tinder__empty p {
	margin: 0.7rem 0 0;
}

@media (max-width: 767px) {
	.dabag-auto-tinder__header,
	.dabag-auto-tinder__quiz,
	.dabag-auto-tinder__experience,
	.dabag-auto-tinder__inventory,
	.dabag-auto-tinder__empty {
		width: 100%;
	}

	.dabag-auto-tinder__question > div {
		grid-template-columns: minmax(0, 1fr);
	}

	.dabag-auto-tinder__question-navigation {
		grid-template-columns: 1fr auto 1fr;
		font-size: 0.85rem;
	}

	.dabag-auto-tinder__overlay {
		padding: clamp(0.85rem, 2.6dvh, 1.35rem);
	}

	.dabag-auto-tinder__facts {
		gap: 0.45rem;
	}

	.dabag-auto-tinder__facts > div {
		align-items: flex-start;
		gap: 0.35rem;
	}
}

@media (max-height: 520px) {
	.dabag-auto-tinder.section-dark {
		padding-block: 0.3rem;
	}

	.dabag-auto-tinder__container,
	.dabag-auto-tinder__quiz,
	.dabag-auto-tinder__experience {
		gap: 0.25rem;
	}

	.dabag-auto-tinder__header h1 {
		font-size: 1.4rem;
	}

	.dabag-auto-tinder__quiz > h2 {
		font-size: 1.2rem;
	}

	.dabag-auto-tinder__match-count,
	.dabag-auto-tinder__deck-count {
		font-size: 0.8rem;
	}

	.dabag-auto-tinder__question {
		padding: 0.25rem 0.4rem;
	}

	.dabag-auto-tinder__question legend {
		font-size: 0.88rem;
	}

	.dabag-auto-tinder__question > div {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.15rem;
		margin-top: 0.2rem;
	}

	.dabag-auto-tinder__question button {
		min-height: 1.75rem;
		padding: 0.15rem 0.4rem;
		font-size: 0.75rem;
	}

	.dabag-auto-tinder__question-navigation,
	.dabag-auto-tinder__question-nav,
	.dabag-auto-tinder__start {
		min-height: 2.1rem;
		font-size: 0.75rem;
	}

	.dabag-auto-tinder__inventory {
		padding-top: 0.2rem;
	}

	.dabag-auto-tinder__inventory .button-light {
		min-height: 2.1rem;
		padding: 0.25rem 0.65rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dabag-auto-tinder *,
	.dabag-auto-tinder *::before,
	.dabag-auto-tinder *::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

@media (forced-colors: active) {
	.dabag-auto-tinder__question button[aria-pressed="true"],
	.dabag-auto-tinder__action {
		border: 2px solid currentColor;
	}
}
