/*
Theme Name: Anticapital (Child)
Theme URI: https://anticapital.ai/
Description: Child of theme-anticapital.
Author: Anticapital
Template: theme-anticapital
Version: 0.1.0
Text Domain: theme-anticapital-child
*/

/* Verification block ----------------------------------------------------- */

.ac-verify__form {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--gap);
}

.ac-verify__controls {
	display: flex;
	align-items: flex-start;
	gap: var(--gap);
	width: 100%;
}

.ac-verify__type {
	flex: 0 0 auto;
	min-width: 160rem;
}

.ac-verify__field {
	flex: 1 1 auto;
	min-width: 0;
}

.ac-verify__label {
	display: block;
	margin-bottom: 10rem;
	text-transform: uppercase;
	letter-spacing: -0.04em;
	font-weight: 400;
	color: var(--c9);
}

.ac-verify__select {
	appearance: none;
	border: none;
	border-bottom: var(--sl) solid var(--c8);
	border-radius: 0;
	background-color: transparent;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23141517' stroke-width='1.5' fill='none' stroke-linecap='square'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 2rem center;
	background-size: 12rem 8rem;
	padding-right: 28rem;
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	cursor: pointer;
}

.ac-verify__select:focus {
	border-color: var(--c1);
	outline: none;
}

.ac-verify__select:hover {
	border-color: var(--c7);
}

.ac-verify__select option {
	background-color: var(--c0);
	color: var(--c1);
	text-transform: none;
}

.textfield-msg.ac-verify__msg {
	display: block;
	margin-top: 8rem;
}

/* Result dialog ---------------------------------------------------------- */

.ac-verify__dialog {
	border: none;
	padding: 0;
	background: transparent;
	width: 100%;
	max-width: min(520rem, calc(100vw - var(--gap) * 2));
}

.ac-verify__dialog::backdrop {
	background-color: color-mix(in srgb, var(--c1) 70%, transparent);
}

.ac-verify__dialog-inner {
	display: flex;
	align-items: center;
	gap: 20rem;
	padding: 24rem;
	border-radius: var(--br2);
	background-color: var(--c0);
	color: var(--c1);
	border: var(--sl) solid var(--c11);
}

.ac-verify__dialog.is-verified {
	--ac-state: var(--c2);
}

.ac-verify__dialog.is-not-verified {
	--ac-state: var(--c4);
}

.ac-verify__icon {
	display: none;
	width: 40rem;
	height: 40rem;
	flex: 0 0 auto;
	color: var(--ac-state);
}

.ac-verify__dialog.is-verified .ac-verify__icon--yes,
.ac-verify__dialog.is-not-verified .ac-verify__icon--no {
	display: block;
}

.ac-verify__text {
	flex: 1 1 auto;
	min-width: 0;
	padding-right: 40rem;
}

.ac-verify__status {
	font-size: 20rem;
	text-transform: uppercase;
	letter-spacing: -0.04em;
	font-weight: 400;
	color: var(--ac-state);
	margin: 0;
}

.ac-verify__value {
	font-size: 16rem;
	text-transform: uppercase;
	color: var(--c9);
	margin: 0;
	overflow-wrap: anywhere;
}

.ac-verify__close {
	margin-left: auto;
}

/* Entry popup ------------------------------------------------------------ */

/* Markup comes from anticapital-core (class-popup.php), which renders it into
   the footer of every page; the tokens it needs live here. Sizing is on the
   dialog itself rather than an inner wrapper because showModal() centres it in
   the top layer against the UA's own margins, which these override. */
.ac-popup {
	inset: 0;
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	margin: 0;
	border: none;
	background: transparent;
	overflow: auto;
}

/* Scoped to [open] so the UA's `dialog:not([open]) { display: none }` still
   wins while the popup is closed — an unscoped display would show it to every
   visitor, cookie or not. */
.ac-popup[open] {
	display: flex;
	align-items: flex-start;
	justify-content: center;
}

.ac-popup::backdrop {
	background-color: color-mix(in srgb, var(--c1) 70%, transparent);
}

/* showModal() blocks pointer events behind the dialog but not scrolling, and
   this notice has to be answered before the page is readable. */
html.ac-popup-open,
html.ac-popup-open body {
	overflow: hidden;
}

/* margin:auto rather than align-items:center: it centres the panel the same
   way, but a panel taller than the viewport stays fully scrollable instead of
   having its top cropped. */
.ac-popup__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16rem;
	margin: auto;
	width: 100%;
	max-width: 640rem;
	padding: 32rem;
	border-radius: var(--br2);
	background-color: var(--c0);
	color: var(--c1);
	border: var(--sl) solid var(--c11);
}

.ac-popup__inner p {
	margin: 0;
}

.ac-popup__inner h2 {
	margin: 0;
	font-size: 24rem;
	text-transform: uppercase;
	letter-spacing: -0.04em;
	font-weight: 400;
}

/* The warranties scroll on their own so the buttons stay reachable without
   scrolling the whole panel. overscroll-behavior keeps a flick at the end of
   the list from scrolling the page behind it. */
.ac-popup__terms {
	width: 100%;
	max-height: 220rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 16rem;
	border: var(--sl) solid var(--c11);
	border-radius: var(--br2);
}

.ac-popup__terms:focus-visible {
	outline: var(--sl) solid var(--c1);
	outline-offset: 2rem;
}

.ac-popup__terms ul {
	margin: 0;
	padding-left: 20rem;
}

/* The reset sets `li { list-style: none }`, so the marker has to be restored on
   the item itself — restoring it on the ul would not win. */
.ac-popup__terms li {
	list-style: disc;
}

.ac-popup__terms li + li {
	margin-top: 12rem;
}

.ac-popup__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap);
	width: 100%;
}

@media screen and (max-width: 767px) {
	.ac-verify__controls {
		flex-direction: column;
		align-items: stretch;
	}

	.ac-verify__type {
		min-width: 0;
	}

	.ac-verify__submit {
		width: 100%;
	}

	/* Icon, text and button stack instead of sitting in one row. */
	.ac-verify__dialog-inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.ac-verify__text {
		padding-right: 0;
	}

	.ac-verify__close {
		margin-left: 0;
		width: 100%;
	}
}