/*
 * The look of the plugin's booking CTA, embed panel and contact notice (.tkz-*).
 * tokiwaza-core ships no front-end CSS.
 */
.tkz-cta {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--tz-space-2xs);
}

.tkz-cta__button,
.tkz-cta__ask,
.tkz-contact-notice__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding: 0.75rem 1.5rem;
	border: 1px solid var(--tz-action-bg);
	border-radius: var(--tz-radius);
	background: var(--tz-action-bg);
	color: var(--tz-action-text);
	font: inherit;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--tz-duration) var(--tz-ease), color var(--tz-duration) var(--tz-ease);
}

.tkz-cta__button:hover,
.tkz-contact-notice__button:hover {
	border-color: var(--tz-action-bg-hover);
	background: var(--tz-action-bg-hover);
}

/* Until booking opens, asking a question is the action — shown quieter than a real booking. */
.tkz-cta__ask {
	border-color: var(--tz-text);
	background: transparent;
	color: var(--tz-text);
}

.tkz-cta__ask:hover {
	background: var(--tz-text);
	color: var(--tz-bg);
}

.tkz-cta__status,
.tkz-cta__note {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--tz-step--1);
	line-height: 1.4;
}

.tkz-cta__status {
	font-weight: 700;
}

.tkz-cta__status::before,
.tkz-cta__note::before {
	content: "";
	flex: none;
	width: 0.625rem;
	height: 0.625rem;
	border: 2px solid var(--tz-accent);
	border-radius: 50%;
}

.tkz-cta__note {
	color: var(--tz-text-muted);
}

.tkz-cta__note::before {
	border-color: var(--tz-positive);
	background: var(--tz-positive);
}

.tkz-cta__price {
	font-family: var(--tz-font-display);
	font-weight: 700;
	line-height: 1.3;
}

.tkz-cta--card {
	align-items: flex-start;
}

.tkz-cta--card :is(.tkz-cta__button, .tkz-cta__ask) {
	min-height: 2.75rem;
	padding-inline: 1.125rem;
	font-size: var(--tz-step--1);
}

/* Booking embed panel: opened in place by the plugin's script (which moves focus into it). */
.tkz-booking:not([hidden]) {
	margin-top: var(--tz-space-m);
	padding-top: var(--tz-space-m);
	border-top: 1px solid var(--tz-line);
}

.tkz-booking__close {
	min-height: 2.75rem;
	margin-bottom: var(--tz-space-s);
	padding: 0.5rem 1rem;
	border: 1px solid var(--tz-text);
	border-radius: var(--tz-radius);
	background: transparent;
	color: var(--tz-text);
	font: inherit;
	font-size: var(--tz-step--1);
	font-weight: 700;
	cursor: pointer;
}

.tkz-booking iframe {
	width: 100%;
	border: 0;
}

/*
 * What the contact page shows instead of the form while publishing statically
 * (Architecture.md 5-10): "the form will open soon", or a link to the external form.
 */
.tkz-contact-notice {
	margin-block: var(--tz-space-m);
	padding: var(--tz-space-s) var(--tz-space-m);
	border-inline-start: 4px solid var(--tz-accent);
	border-radius: var(--tz-radius);
	background: var(--tz-surface-sunk);
}

.tkz-contact-notice__text {
	margin: 0;
	font-weight: 700;
}

.tkz-contact-notice__action {
	margin: var(--tz-space-s) 0 0;
}