/* Poster pages: the .tnz-login card used by /login/, /verify/ and /advertise/ (and the header popups), the account box and
   live-listing forms on /p/{id}/, the "registered" label. Loaded only where needed (poster-login.php). Palette tokens only (see DESIGN.md); Flame is the one accent, and white text
   sits on the darker Flame (--tnz-accent-hover, 5.3:1) because white on #c96739 fails AA.

   The idea of the login page: the phone number IS the identity here, so the number field is the centrepiece: big centred digits
   with no spaces (0501234567; poster-login.js also turns Arabic digits into Latin). The emails show the same "number plate". */

/* ---------- /login/ card ---------- */

.tnz-login {
	box-sizing: border-box;
	width: calc(100% - 2rem);
	max-width: 26rem;
	margin: var(--tnz-space-4, 1rem) auto var(--tnz-space-6, 2.5rem);
	padding: var(--tnz-space-5, 1.5rem);
	background: var(--tnz-surface, #fff);
	border: 1px solid var(--tnz-silver, #afafaf);
	border-top: 3px solid var(--tnz-accent, #c96739);
	border-radius: var(--tnz-radius, 8px);
	color: var(--tnz-ink, #292929);
}

.tnz-login__title {
	margin: 0 0 var(--tnz-space-2, 0.5rem);
	font-size: var(--tnz-text-lg, 1.375rem);
	font-weight: 600;
	line-height: 1.4;
}

.tnz-login__lead {
	margin: 0 0 var(--tnz-space-5, 1.5rem);
	color: var(--tnz-ink-soft, #4f4f4f);
	line-height: 1.75;
}

/* Notices: an edge in the accent for errors (something needs attention), silver for plain information. */
.tnz-login__notice {
	margin: 0 0 var(--tnz-space-5, 1.5rem);
	padding: var(--tnz-space-3, 0.75rem) var(--tnz-space-4, 1rem);
	background: var(--tnz-tint, #f6f4f2);
	border-inline-start: 3px solid var(--tnz-silver, #afafaf);
	border-radius: var(--tnz-radius-sm, 4px);
	font-size: 0.9375rem;
	line-height: 1.75;
}

.tnz-login__notice--error {
	border-inline-start-color: var(--tnz-accent-hover, #a8532c);
}

/* Fields */
.tnz-login__field {
	margin: 0 0 var(--tnz-space-4, 1rem);
}

.tnz-login__field label {
	display: block;
	margin: 0 0 var(--tnz-space-2, 0.5rem);
	font-size: var(--tnz-text-sm, 0.8125rem);
	font-weight: 600;
	color: var(--tnz-ink, #292929);
}

.tnz-login__control {
	position: relative;
}

/* 18px text: anything under 16px makes iOS zoom the page when the field is focused. */
.tnz-login__control input {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 3.25rem;
	margin: 0;
	padding: 0 var(--tnz-space-4, 1rem);
	background: var(--tnz-surface, #fff);
	border: 1px solid var(--tnz-silver, #afafaf);
	border-radius: var(--tnz-radius, 8px);
	font: inherit;
	font-size: 1.125rem;
	color: var(--tnz-ink, #292929);
}

.tnz-login__control input::placeholder {
	color: #808080;
	opacity: 1;
}

.tnz-login__control input:focus {
	outline: 2px solid transparent; /* stays visible in forced-colours mode */
	border-color: var(--tnz-accent, #c96739);
	box-shadow: 0 0 0 3px rgba(201, 103, 57, 0.15);
}

/* The signature: the number as a plate. Larger, centred, tracked, digits the same width. */
.tnz-login__control--phone input {
	height: 3.75rem;
	direction: ltr;
	text-align: center;
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	font-variant-numeric: tabular-nums;
}

.tnz-login__control--phone input::placeholder {
	font-weight: 400;
}

/* Passwords are typed in Latin, so the box is left-to-right; the show/hide button sits at its physical left end. */
.tnz-login__control--pw input {
	direction: ltr;
	text-align: left;
	padding-left: 3.5rem;
}

.tnz-login__reveal {
	position: absolute;
	top: 50%;
	left: var(--tnz-space-1, 0.25rem);
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: var(--tnz-radius-sm, 4px);
	color: var(--tnz-ink-soft, #4f4f4f);
	cursor: pointer;
}

.tnz-login__reveal[hidden] {
	display: none;
}

.tnz-login__reveal .tnz-eye {
	display: grid;
	place-items: center;
}

.tnz-login__reveal .tnz-eye--off,
.tnz-login__reveal[aria-pressed="true"] .tnz-eye--on {
	display: none;
}

.tnz-login__reveal[aria-pressed="true"] .tnz-eye--off {
	display: grid;
}

.tnz-login__reveal:hover {
	color: var(--tnz-accent-hover, #a8532c);
}

.tnz-login__reveal:focus-visible,
.tnz-login__linkbtn:focus-visible,
.tnz-login__more a:focus-visible,
.tnz-login__aside a:focus-visible {
	outline: 3px solid rgba(201, 103, 57, 0.5);
	outline-offset: 2px;
}

/* Plain text / email fields; an email is typed left to right. */
.tnz-login__control input[type="email"] {
	direction: ltr;
	text-align: left;
}

.tnz-login__control select,
.tnz-login__control textarea {
	display: block;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	background-color: var(--tnz-surface, #fff);
	border: 1px solid var(--tnz-silver, #afafaf);
	border-radius: var(--tnz-radius, 8px);
	font: inherit;
	font-size: 1.125rem;
	color: var(--tnz-ink, #292929);
}

.tnz-login__control select {
	height: 3.25rem;
	padding: 0 var(--tnz-space-4, 1rem) 0 2.5rem;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23505050' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 0.75rem center;
	background-size: 1.25rem;
}

.tnz-login__control textarea {
	min-height: 7rem;
	padding: var(--tnz-space-3, 0.75rem) var(--tnz-space-4, 1rem);
	line-height: 1.7;
	resize: vertical;
}

.tnz-login__control select:focus,
.tnz-login__control textarea:focus {
	outline: 2px solid transparent;
	border-color: var(--tnz-accent, #c96739);
	box-shadow: 0 0 0 3px rgba(201, 103, 57, 0.15);
}

.tnz-login__hint {
	margin: var(--tnz-space-2, 0.5rem) 0 0;
	font-size: var(--tnz-text-sm, 0.8125rem);
	color: var(--tnz-ink-soft, #4f4f4f);
}

/* A group of choices (the advertise placements): two columns of 44px rows. */
.tnz-login__options {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 var(--tnz-space-3, 0.75rem);
	margin: 0 0 var(--tnz-space-4, 1rem);
	padding: var(--tnz-space-2, 0.5rem) var(--tnz-space-3, 0.75rem);
	border: 1px solid var(--tnz-silver, #afafaf);
	border-radius: var(--tnz-radius, 8px);
}

.tnz-login__options legend {
	padding: 0 var(--tnz-space-2, 0.5rem);
	font-size: var(--tnz-text-sm, 0.8125rem);
	font-weight: 600;
}

.tnz-login__options .tnz-login__check {
	margin: 0;
}

@media (max-width: 22rem) {
	.tnz-login__options {
		grid-template-columns: 1fr;
	}
}

/* A second, quieter card under the main one (the lost-link form on /verify/): no Flame edge, smaller title. */
.tnz-login--quiet {
	margin-top: calc(-1 * var(--tnz-space-3, 0.75rem));
	border-top: 1px solid var(--tnz-silver, #afafaf);
}

.tnz-login--quiet .tnz-login__title {
	font-size: 1.125rem;
}

/* The same card inside a header popup: the popup panel is already the card. */
.tnz-modal__panel .tnz-login {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
}

/* The three form pages: the page title sits in the middle, over the card. */
.tnz-form-page .tnz-page-title {
	text-align: center;
}

/* "Confirm on WhatsApp": WhatsApp green (darkened for white text, 5.4:1) is reserved for WhatsApp actions. */
.tnz-wa-confirm {
	margin: var(--tnz-space-4, 1rem) 0 0;
}

.tnz-wa-confirm__text {
	margin: 0 0 var(--tnz-space-3, 0.75rem);
	font-size: 0.9375rem;
	line-height: 1.75;
	color: var(--tnz-ink-soft, #4f4f4f);
}

.tnz-login__submit.tnz-login__wa {
	background: var(--tnz-whatsapp-strong, #137a38);
	border-color: var(--tnz-whatsapp-strong, #137a38);
	margin-top: 0;
}

.tnz-login__submit.tnz-login__wa:hover {
	background: var(--tnz-eerie, #1a1a1a);
	border-color: var(--tnz-eerie, #1a1a1a);
}

/* The WhatsApp box on /verify/: two ways, the button or typing it yourself. */
.tnz-wa-confirm__way {
	margin: var(--tnz-space-4, 1rem) 0 var(--tnz-space-2, 0.5rem);
	line-height: 1.75;
}

.tnz-wa-confirm__number {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	font-variant-numeric: tabular-nums;
	text-align: center;
	user-select: all;
}

.tnz-wa-confirm__msg {
	margin: 0;
	padding: var(--tnz-space-3, 0.75rem) var(--tnz-space-4, 1rem);
	background: var(--tnz-tint, #f6f4f2);
	border-inline-start: 3px solid var(--tnz-whatsapp-strong, #137a38);
	border-radius: var(--tnz-radius-sm, 4px);
	line-height: 1.8;
	user-select: all;
}

/* Remember me: a full-height row so it is easy to hit with a thumb. */
.tnz-login__check {
	display: flex;
	align-items: center;
	gap: var(--tnz-space-3, 0.75rem);
	min-height: 2.75rem;
	margin: 0 0 var(--tnz-space-2, 0.5rem);
	font-size: 0.9375rem;
	cursor: pointer;
}

.tnz-login__check input {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	margin: 0;
	accent-color: var(--tnz-accent-hover, #a8532c);
}

/* Main action: full width, 48px, dark Flame with white text. */
.tnz-login__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	min-height: 3rem;
	margin: var(--tnz-space-3, 0.75rem) 0 0;
	padding: 0 var(--tnz-space-5, 1.5rem);
	background: var(--tnz-accent-hover, #a8532c);
	border: 1px solid var(--tnz-accent-hover, #a8532c);
	border-radius: var(--tnz-radius, 8px);
	font: inherit;
	font-size: 1.0625rem;
	font-weight: 600;
	color: #fff;
	text-decoration: none;
	cursor: pointer;
}

.tnz-login__submit:hover {
	background: var(--tnz-eerie, #1a1a1a);
	border-color: var(--tnz-eerie, #1a1a1a);
	color: #fff;
}

.tnz-login__submit:focus-visible {
	outline: 3px solid rgba(201, 103, 57, 0.5);
	outline-offset: 2px;
}

.tnz-login__more,
.tnz-login__logout {
	margin: var(--tnz-space-4, 1rem) 0 0;
	text-align: center;
}

.tnz-login__more a,
.tnz-login__aside a,
.tnz-login__linkbtn {
	color: var(--tnz-accent-hover, #a8532c);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.tnz-login__more a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
}

.tnz-login__more a:hover,
.tnz-login__aside a:hover,
.tnz-login__linkbtn:hover {
	color: var(--tnz-eerie, #1a1a1a);
}

.tnz-login__aside {
	margin: var(--tnz-space-4, 1rem) 0 0;
	padding-top: var(--tnz-space-4, 1rem);
	border-top: 1px solid var(--tnz-rule, #eaeaea);
	font-size: var(--tnz-text-sm, 0.8125rem);
	line-height: 1.8;
	color: var(--tnz-ink-soft, #4f4f4f);
}

.tnz-login__aside p {
	margin: 0 0 var(--tnz-space-3, 0.75rem);
}

/* "سجّل رقمك": a large outlined button, the secondary action under the main "دخول" button. */
.tnz-login__aside .tnz-login__register,
.tnz-verify-more .tnz-login__register {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	min-height: 3.5rem;
	padding: 0 var(--tnz-space-5, 1.5rem);
	background: var(--tnz-surface, #fff);
	border: 2px solid var(--tnz-accent-hover, #a8532c);
	border-radius: var(--tnz-radius, 8px);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--tnz-accent-hover, #a8532c);
	text-decoration: none;
}

.tnz-login__aside .tnz-login__register:hover,
.tnz-verify-more .tnz-login__register:hover {
	background: var(--tnz-accent-hover, #a8532c);
	color: #fff;
}

.tnz-login__aside .tnz-login__register:focus-visible,
.tnz-verify-more .tnz-login__register:focus-visible {
	outline: 3px solid rgba(201, 103, 57, 0.5);
	outline-offset: 2px;
}

.tnz-login__aside .tnz-login__aside-note {
	margin: var(--tnz-space-3, 0.75rem) 0 0;
	text-align: center;
}

.tnz-login__linkbtn {
	min-height: 2.75rem;
	padding: 0 var(--tnz-space-3, 0.75rem);
	background: none;
	border: 0;
	font: inherit;
	cursor: pointer;
}

.tnz-login__lead a {
	color: var(--tnz-accent-hover, #a8532c);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.tnz-login__lead a:hover {
	color: var(--tnz-eerie, #1a1a1a);
}

.tnz-login__number {
	font-weight: 600;
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: no-preference) {
	.tnz-login__submit,
	.tnz-login__control input {
		transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
	}
}

/* ---------- The poster's own page /p/{id}/ when they can edit: profile form, account box, live and archived listing forms ----------
   Same card and field look as /login/. Prefixed with .tnz-agent-archive so it wins over the older .tnz-poster-edit rules in tanazul-frame.css. */

.tnz-agent-archive .tnz-poster-edit {
	box-sizing: border-box;
	margin: 0 0 var(--tnz-space-4, 1rem);
	padding: var(--tnz-space-5, 1.5rem);
	background: var(--tnz-surface, #fff);
	border: 1px solid var(--tnz-silver, #afafaf);
	border-radius: var(--tnz-radius, 8px);
}

.tnz-agent-archive .tnz-poster-edit h2 {
	margin: 0 0 var(--tnz-space-4, 1rem);
	font-size: var(--tnz-text-lg, 1.375rem);
	font-weight: 600;
	line-height: 1.4;
}

.tnz-agent-archive :is(.tnz-poster-edit, .tnz-poster-edit__listing-form) label {
	display: block;
	margin: 0 0 var(--tnz-space-2, 0.5rem);
	font-size: var(--tnz-text-sm, 0.8125rem);
	font-weight: 600;
	color: var(--tnz-ink, #292929);
}

.tnz-agent-archive .tnz-poster-edit p {
	margin: 0 0 var(--tnz-space-4, 1rem);
}

.tnz-agent-archive :is(.tnz-poster-edit, .tnz-poster-edit__listing-form) :is(input[type="text"], input[type="url"], input[type="password"], input[type="number"], select) {
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	height: 3.25rem;
	margin: 0;
	padding: 0 var(--tnz-space-4, 1rem);
	background: var(--tnz-surface, #fff);
	border: 1px solid var(--tnz-silver, #afafaf);
	border-radius: var(--tnz-radius, 8px);
	font: inherit;
	font-size: 1.0625rem;
	color: var(--tnz-ink, #292929);
}

.tnz-agent-archive :is(.tnz-poster-edit, .tnz-poster-edit__listing-form) textarea {
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	min-height: 6rem;
	margin: 0;
	padding: var(--tnz-space-3, 0.75rem) var(--tnz-space-4, 1rem);
	background: var(--tnz-surface, #fff);
	border: 1px solid var(--tnz-silver, #afafaf);
	border-radius: var(--tnz-radius, 8px);
	font: inherit;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--tnz-ink, #292929);
	resize: vertical;
}

/* Web addresses, passwords and figures are typed left to right. */
.tnz-agent-archive .tnz-poster-edit :is(input[type="url"], input[type="password"], input[type="number"]),
.tnz-agent-archive .tnz-poster-edit__listing-form input[type="number"] {
	direction: ltr;
	text-align: left;
}

.tnz-agent-archive .tnz-poster-edit input[type="url"]::placeholder {
	color: #808080;
	opacity: 1;
}

.tnz-agent-archive .tnz-poster-edit input[type="file"] {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: var(--tnz-space-3, 0.75rem);
	background: var(--tnz-tint, #f6f4f2);
	border: 1px dashed var(--tnz-silver, #afafaf);
	border-radius: var(--tnz-radius, 8px);
	font: inherit;
	font-size: var(--tnz-text-sm, 0.8125rem);
}

.tnz-agent-archive .tnz-poster-edit :is(input, select, textarea):focus,
.tnz-agent-archive .tnz-poster-edit__listing-form :is(input, select, textarea):focus {
	outline: 2px solid transparent;
	border-color: var(--tnz-accent, #c96739);
	box-shadow: 0 0 0 3px rgba(201, 103, 57, 0.15);
}

/* Buttons: the main action in dark Flame; delete is the quiet outlined one; sign out is a link. */
.tnz-agent-archive :is(.tnz-poster-edit, .tnz-poster-edit__listing-form) button[type="submit"]:not(.tnz-login__linkbtn) {
	min-height: 3rem;
	padding: 0 var(--tnz-space-5, 1.5rem);
	background: var(--tnz-accent-hover, #a8532c);
	border: 1px solid var(--tnz-accent-hover, #a8532c);
	border-radius: var(--tnz-radius, 8px);
	font: inherit;
	font-size: 1rem;
	font-weight: 600;
	color: #fff;
	cursor: pointer;
}

.tnz-agent-archive :is(.tnz-poster-edit, .tnz-poster-edit__listing-form) button[type="submit"]:not(.tnz-login__linkbtn):hover {
	background: var(--tnz-eerie, #1a1a1a);
	border-color: var(--tnz-eerie, #1a1a1a);
}

.tnz-agent-archive :is(.tnz-poster-edit, .tnz-poster-edit__listing-form) button[type="submit"][value="delete"] {
	background: var(--tnz-surface, #fff);
	border-color: var(--tnz-silver, #afafaf);
	color: var(--tnz-accent-hover, #a8532c);
}

.tnz-agent-archive :is(.tnz-poster-edit, .tnz-poster-edit__listing-form) button[type="submit"][value="delete"]:hover {
	background: var(--tnz-tint, #f6f4f2);
	border-color: var(--tnz-accent-hover, #a8532c);
	color: var(--tnz-accent-hover, #a8532c);
}

.tnz-agent-archive .tnz-poster-edit .tnz-login__linkbtn {
	min-height: 2.75rem;
	padding: 0 var(--tnz-space-3, 0.75rem);
	background: none;
	border: 0;
	color: var(--tnz-accent-hover, #a8532c);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.tnz-agent-archive .tnz-poster-edit .tnz-login__logout {
	margin: var(--tnz-space-2, 0.5rem) 0 0;
	text-align: start;
}

.tnz-agent-archive .tnz-poster-edit__notice {
	padding: var(--tnz-space-3, 0.75rem) var(--tnz-space-4, 1rem);
	background: var(--tnz-tint, #f6f4f2);
	border-inline-start: 3px solid var(--tnz-accent-hover, #a8532c);
	border-radius: var(--tnz-radius-sm, 4px);
	font-size: 0.9375rem;
	font-weight: 400;
	color: var(--tnz-ink, #292929);
}

.tnz-poster-account__who {
	color: var(--tnz-ink-soft, #4f4f4f);
}

/* One listing inside a card: a tint panel, white fields. */
.tnz-agent-archive .tnz-poster-edit__listing-form {
	box-sizing: border-box;
	margin: 0 0 var(--tnz-space-4, 1rem);
	padding: var(--tnz-space-4, 1rem);
	background: var(--tnz-tint, #f6f4f2);
	border: 0;
	border-radius: var(--tnz-radius, 8px);
}

.tnz-agent-archive .tnz-poster-edit__listing-form-title {
	margin: 0 0 var(--tnz-space-3, 0.75rem);
	font-weight: 600;
}

.tnz-agent-archive .tnz-poster-edit__listing-form :is(input[type="text"], input[type="number"], textarea) {
	margin-bottom: var(--tnz-space-3, 0.75rem);
}

.tnz-agent-archive .tnz-poster-edit__listing-form label {
	margin-top: var(--tnz-space-3, 0.75rem);
}

.tnz-agent-archive .tnz-poster-edit__listing-form-actions {
	display: flex;
	gap: var(--tnz-space-2, 0.5rem);
	margin-top: var(--tnz-space-2, 0.5rem);
}

.tnz-agent-archive .tnz-poster-edit__listing-form-actions button {
	flex: 1;
}

/* "معلن مسجّل" on /p/{id}/ for a basic (email-confirmed) poster: a plain label, deliberately not the verified badge. */
.tnz-agent-profile__registered {
	margin: 0.25rem 0;
	color: var(--tnz-ink-soft, #666);
	font-size: 0.875rem;
}

/* Levels inside the Verified tier on the poster's page: silver is the base look (frame.css); gold and platinum step up the border,
   the same convention the feed tiers use. Cards on other pages do not show levels yet. */
.tnz-agent-profile[data-tnz-level="gold"] {
	border-width: 3px;
	padding: calc(1.25rem - 2px) calc(1.5rem - 2px);
	background: var(--tnz-tint, #f6f4f2);
}

.tnz-agent-profile[data-tnz-level="platinum"] {
	border-width: 3px;
	border-color: var(--tnz-ink, #292929);
	padding: calc(1.25rem - 2px) calc(1.5rem - 2px);
	background: var(--tnz-tint, #f6f4f2);
}

/* The button under the /verify/ card that opens the lost-link popup, same outlined look as "سجّل رقمك" on /login/. */
.tnz-verify-more {
	box-sizing: border-box;
	width: calc(100% - 2rem);
	max-width: 26rem;
	margin: 0 auto var(--tnz-space-5, 1.5rem);
}

.tnz-verify-more .tnz-login__register {
	font-family: inherit;
	cursor: pointer;
}

/* The popup: a native <dialog> styled as the same card. */
.tnz-dialog {
	box-sizing: border-box;
	width: calc(100% - 2rem);
	max-width: 26rem;
	margin: auto;
	padding: var(--tnz-space-5, 1.5rem);
	background: var(--tnz-surface, #fff);
	border: 1px solid var(--tnz-silver, #afafaf);
	border-top: 3px solid var(--tnz-accent, #c96739);
	border-radius: var(--tnz-radius, 8px);
	color: var(--tnz-ink, #292929);
}

.tnz-dialog::backdrop {
	background: rgba(26, 26, 26, 0.55);
}

.tnz-dialog .tnz-login__title {
	padding-inline-end: 2.5rem; /* room for the close button */
}

.tnz-dialog__close {
	position: absolute;
	top: var(--tnz-space-2, 0.5rem);
	left: var(--tnz-space-2, 0.5rem);
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: var(--tnz-radius-sm, 4px);
	font-size: 1.125rem;
	color: var(--tnz-ink-soft, #4f4f4f);
	cursor: pointer;
}

.tnz-dialog__close:hover {
	color: var(--tnz-accent-hover, #a8532c);
}

.tnz-dialog__close:focus-visible {
	outline: 3px solid rgba(201, 103, 57, 0.5);
	outline-offset: 2px;
}

/* Without JavaScript (html.tnz-js is added by the header script) there is nothing to open the popup: show the form on the page. */
html:not(.tnz-js) .tnz-verify-more,
html:not(.tnz-js) .tnz-dialog__close {
	display: none;
}

html:not(.tnz-js) dialog.tnz-dialog {
	display: block;
	position: static;
	margin: 0 auto var(--tnz-space-5, 1.5rem);
}