/**
 * Provatic CS — the contact-form component and the floating chat.
 *
 * Everything reads the template's own tokens (Canvas `--wp--preset--*`); the fallbacks only
 * matter on a theme that ships no palette. The contact form's rules are wrapped whole in
 * :where() (specificity 0) so a template restyles it with plain selectors.
 */

/* ── contact form ───────────────────────────────────────────────────────── *
 *
 * The component owns behaviour; the TEMPLATE owns the look. Three depths, in order of
 * reach (template-studio §7 "contact-form 디자인 계약"):
 *   1. params — layout (stacked|two-column|split), fieldStyle (boxed|underline|filled|pill),
 *      labels (above|inside), per-field width, className.
 *   2. tokens — every --pv-cf-* below, set on `.pv-cmp-contact-form` (or the template's
 *      own className) in header.css.
 *   3. any CSS — every rule here is wrapped WHOLE in :where(), specificity 0, so a plain
 *      `.pv-cf__input { … }` in the template beats it regardless of load order.
 * Class names are a contract: add-only, never renamed.
 */

:where(.pv-cmp-contact-form) {
	/* colour */
	--pv-cf-text: var(--wp--preset--color--contrast, #111);
	--pv-cf-muted: var(--wp--preset--color--contrast-3, #6b6b6b);
	--pv-cf-bg: var(--wp--preset--color--base, #fff);
	--pv-cf-soft: var(--wp--preset--color--base-2, #f3f3f3);
	--pv-cf-border: var(--wp--preset--color--border, #d9d9d9);
	--pv-cf-accent: var(--wp--preset--color--primary, var(--wp--preset--color--contrast, #111));
	--pv-cf-on-accent: var(--wp--preset--color--base, #fff);
	--pv-cf-focus: var(--pv-cf-text);
	--pv-cf-error: #b3261e;
	/* frame */
	--pv-cf-width: 720px; /* its own width, not --pv-content-width (1120): a form that wide reads as a spreadsheet */
	--pv-cf-gap-x: 1.25rem;
	--pv-cf-gap-y: 1rem;
	--pv-cf-radius: 6px;
	/* labels */
	--pv-cf-label-font: inherit;
	--pv-cf-label-size: var(--wp--preset--font-size--small, 0.875rem);
	--pv-cf-label-weight: 500;
	--pv-cf-label-transform: none;
	--pv-cf-label-spacing: normal;
	--pv-cf-label-color: var(--pv-cf-text);
	/* fields */
	--pv-cf-input-font: inherit;
	--pv-cf-input-size: 1rem;
	--pv-cf-input-bg: var(--pv-cf-bg);
	--pv-cf-input-border: var(--pv-cf-border);
	--pv-cf-input-border-width: 1px;
	--pv-cf-input-radius: var(--pv-cf-radius);
	--pv-cf-input-padding: 0.75rem 0.875rem;
	--pv-cf-textarea-height: 8rem;
	/* button */
	--pv-cf-button-font: inherit;
	--pv-cf-button-size: 1rem;
	--pv-cf-button-weight: 500;
	--pv-cf-button-transform: none;
	--pv-cf-button-spacing: normal;
	--pv-cf-button-radius: var(--pv-cf-radius);
	--pv-cf-button-padding: 0.8rem 1.6rem;
	--pv-cf-button-width: auto;

	box-sizing: border-box;
	max-width: var(--pv-cf-width);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40, 1.25rem);
	color: var(--pv-cf-text);
}

/* split: the intro beside the form — needs the room, so a wider default. */
:where(.pv-cf--split) { --pv-cf-width: 1120px; }
:where(.pv-cf--split) {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
	gap: var(--wp--preset--spacing--60, 3rem);
	align-items: start;
}
@media (max-width: 781px) {
	:where(.pv-cf--split) { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--40, 2rem); }
}

:where(.pv-cmp-contact-form .pv-cf__intro) { margin-bottom: var(--wp--preset--spacing--40, 2rem); }
:where(.pv-cf--split .pv-cf__intro) { margin-bottom: 0; }
:where(.pv-cmp-contact-form .pv-cf__eyebrow) {
	margin: 0 0 0.5rem;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pv-cf-muted);
}
:where(.pv-cmp-contact-form .pv-cf__heading) { margin: 0 0 0.75rem; }
:where(.pv-cmp-contact-form .pv-cf__body) { margin: 0; color: var(--pv-cf-muted); }

/* field grid: one column, or two where `half` fields share a row */
:where(.pv-cmp-contact-form .pv-cf__fields) {
	display: grid;
	gap: var(--pv-cf-gap-y) var(--pv-cf-gap-x);
	grid-template-columns: 1fr;
}
:where(.pv-cf--two-column .pv-cf__fields) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:where(.pv-cf--two-column .pv-cf__field--wide) { grid-column: 1 / -1; }
@media (max-width: 600px) {
	:where(.pv-cf--two-column .pv-cf__fields) { grid-template-columns: 1fr; }
}

:where(.pv-cmp-contact-form .pv-cf__field) { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
:where(.pv-cmp-contact-form .pv-cf__label) {
	font-family: var(--pv-cf-label-font);
	font-size: var(--pv-cf-label-size);
	font-weight: var(--pv-cf-label-weight);
	text-transform: var(--pv-cf-label-transform);
	letter-spacing: var(--pv-cf-label-spacing);
	color: var(--pv-cf-label-color);
}
:where(.pv-cmp-contact-form .pv-cf__req) { color: var(--pv-cf-muted); }
/* labels:inside — the placeholder carries the name; the label stays for screen readers */
:where(.pv-cf--labels-inside .pv-cf__label) {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

:where(.pv-cmp-contact-form .pv-cf__input) {
	width: 100%;
	box-sizing: border-box;
	padding: var(--pv-cf-input-padding);
	font-family: var(--pv-cf-input-font);
	font-size: var(--pv-cf-input-size);
	line-height: 1.5;
	color: inherit;
	background: var(--pv-cf-input-bg);
	border: var(--pv-cf-input-border-width) solid var(--pv-cf-input-border);
	border-radius: var(--pv-cf-input-radius);
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
:where(.pv-cmp-contact-form .pv-cf__input::placeholder) { color: var(--pv-cf-muted); opacity: 1; }
:where(.pv-cmp-contact-form textarea.pv-cf__input) { resize: vertical; min-height: var(--pv-cf-textarea-height); }
:where(.pv-cmp-contact-form .pv-cf__input:focus) { outline: none; border-color: var(--pv-cf-focus); }
:where(.pv-cmp-contact-form .pv-cf__input:focus-visible) { outline: 2px solid var(--pv-cf-focus); outline-offset: 1px; }
:where(.pv-cmp-contact-form .pv-cf__input[aria-invalid="true"]) { border-color: var(--pv-cf-error); }

/* fieldStyle — starting points, each only a few token values */
:where(.pv-cf--fields-underline) {
	--pv-cf-input-bg: transparent;
	--pv-cf-input-radius: 0;
	--pv-cf-input-padding: 0.6rem 0;
}
:where(.pv-cf--fields-underline .pv-cf__input) { border-width: 0 0 var(--pv-cf-input-border-width); }
:where(.pv-cf--fields-underline .pv-cf__input:focus-visible) { outline: none; border-bottom-color: var(--pv-cf-focus); box-shadow: 0 1px 0 var(--pv-cf-focus); }
:where(.pv-cf--fields-filled) {
	--pv-cf-input-bg: var(--pv-cf-soft);
	--pv-cf-input-border: transparent;
}
:where(.pv-cf--fields-filled .pv-cf__input:focus) { background: var(--pv-cf-bg); border-color: var(--pv-cf-focus); }
:where(.pv-cf--fields-pill) {
	--pv-cf-input-radius: 999px;
	--pv-cf-button-radius: 999px;
	--pv-cf-input-padding: 0.75rem 1.25rem;
}
:where(.pv-cf--fields-pill textarea.pv-cf__input) { border-radius: 1.25rem; }

:where(.pv-cmp-contact-form .pv-cf__actions) {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 1.5rem;
}
:where(.pv-cmp-contact-form .pv-cf__submit) {
	width: var(--pv-cf-button-width);
	padding: var(--pv-cf-button-padding);
	font-family: var(--pv-cf-button-font);
	font-size: var(--pv-cf-button-size);
	font-weight: var(--pv-cf-button-weight);
	text-transform: var(--pv-cf-button-transform);
	letter-spacing: var(--pv-cf-button-spacing);
	color: var(--pv-cf-on-accent);
	background: var(--pv-cf-accent);
	border: 0;
	border-radius: var(--pv-cf-button-radius);
	cursor: pointer;
	transition: opacity 0.15s ease, transform 0.15s ease;
}
:where(.pv-cmp-contact-form .pv-cf__submit:hover) { opacity: 0.88; }
:where(.pv-cmp-contact-form .pv-cf__submit:active) { transform: translateY(1px); }
:where(.pv-cmp-contact-form .pv-cf__submit:disabled) { opacity: 0.5; cursor: progress; }
:where(.pv-cmp-contact-form .pv-cf__status) { margin: 0; font-size: var(--wp--preset--font-size--small, 0.875rem); color: var(--pv-cf-muted); }
:where(.pv-cmp-contact-form .pv-cf__done) {
	padding: 1.5rem;
	border: 1px solid var(--pv-cf-border);
	border-radius: var(--pv-cf-radius);
}
:where(.pv-cmp-contact-form .pv-cf__done p) { margin: 0; }
:where(.pv-cmp-contact-form .pv-cf__done:focus) { outline: none; }

/* Honeypot (Provatic\Anti_Abuse): off-screen, never display:none (bots skip those). */
.provatic-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* ── floating chat ──────────────────────────────────────────────────────── */

.pv-cs-chat {
	--pv-cs-text: var(--wp--preset--color--contrast, #111);
	--pv-cs-muted: var(--wp--preset--color--contrast-3, #6b6b6b);
	--pv-cs-bg: var(--wp--preset--color--base, #fff);
	--pv-cs-soft: var(--wp--preset--color--base-2, #f4f4f4);
	--pv-cs-border: var(--wp--preset--color--border, #e2e2e2);
	--pv-cs-accent: var(--wp--preset--color--primary, var(--wp--preset--color--contrast, #111));
	--pv-cs-on-accent: var(--wp--preset--color--base, #fff);
	position: fixed;
	bottom: 20px;
	z-index: 99990;
	font-size: 15px;
	line-height: 1.45;
	color: var(--pv-cs-text);
}
.pv-cs-chat--right { right: 20px; }
.pv-cs-chat--left { left: 20px; }

.pv-cs-chat__launcher {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	padding: 0;
	color: var(--pv-cs-on-accent);
	background: var(--pv-cs-accent);
	border: 0;
	border-radius: 50%;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
	cursor: pointer;
	transition: transform 0.18s cubic-bezier(0.23, 1, 0.32, 1);
}
.pv-cs-chat--left .pv-cs-chat__launcher { margin-right: auto; }
.pv-cs-chat--right .pv-cs-chat__launcher { margin-left: auto; }
.pv-cs-chat__launcher:hover { transform: translateY(-2px); }
.pv-cs-chat__launcher:active { transform: scale(0.96); }
.pv-cs-chat__launcher:focus-visible { outline: 2px solid var(--pv-cs-text); outline-offset: 3px; }

.pv-cs-chat__panel {
	position: absolute;
	bottom: 72px;
	display: flex;
	flex-direction: column;
	width: 360px;
	max-width: calc(100vw - 40px);
	height: 520px;
	max-height: calc(100vh - 120px);
	overflow: hidden;
	background: var(--pv-cs-bg);
	border: 1px solid var(--pv-cs-border);
	border-radius: 14px;
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
	transform-origin: bottom right;
	animation: pv-cs-in 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
.pv-cs-chat--right .pv-cs-chat__panel { right: 0; }
.pv-cs-chat--left .pv-cs-chat__panel { left: 0; transform-origin: bottom left; }
.pv-cs-chat__panel[hidden] { display: none; }
@keyframes pv-cs-in {
	from { opacity: 0; transform: translateY(8px) scale(0.98); }
	to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.pv-cs-chat__panel { animation: none; }
	.pv-cs-chat__launcher { transition: none; }
}

.pv-cs-chat__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 14px 16px;
	border-bottom: 1px solid var(--pv-cs-border);
}
.pv-cs-chat__title { font-weight: 600; }
.pv-cs-chat__close {
	display: inline-flex;
	padding: 6px;
	color: var(--pv-cs-muted);
	background: none;
	border: 0;
	border-radius: 6px;
	cursor: pointer;
}
.pv-cs-chat__close:hover { color: var(--pv-cs-text); background: var(--pv-cs-soft); }

.pv-cs-chat__log {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px;
	overflow-y: auto;
}
.pv-cs-chat__msg {
	max-width: 82%;
	margin: 0;
	padding: 9px 12px;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	border-radius: 12px;
}
.pv-cs-chat__msg--staff { align-self: flex-start; background: var(--pv-cs-soft); border-bottom-left-radius: 4px; }
.pv-cs-chat__msg--me { align-self: flex-end; color: var(--pv-cs-on-accent); background: var(--pv-cs-accent); border-bottom-right-radius: 4px; }
.pv-cs-chat__note { margin: 0; font-size: 13px; color: var(--pv-cs-muted); }

.pv-cs-chat__form { padding: 12px; border-top: 1px solid var(--pv-cs-border); }
.pv-cs-chat__who { display: grid; gap: 6px; margin-bottom: 8px; }
.pv-cs-chat__who[hidden] { display: none; }
.pv-cs-chat__compose { display: flex; align-items: flex-end; gap: 8px; }
.pv-cs-chat__input {
	width: 100%;
	box-sizing: border-box;
	padding: 9px 11px;
	font: inherit;
	font-size: 14px;
	color: inherit;
	background: var(--pv-cs-bg);
	border: 1px solid var(--pv-cs-border);
	border-radius: 8px;
}
.pv-cs-chat__input:focus { outline: none; border-color: var(--pv-cs-text); }
.pv-cs-chat__body { resize: none; max-height: 120px; }
.pv-cs-chat__send {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: var(--pv-cs-on-accent);
	background: var(--pv-cs-accent);
	border: 0;
	border-radius: 8px;
	cursor: pointer;
}
.pv-cs-chat__send:hover { opacity: 0.88; }
.pv-cs-chat__status { margin: 6px 0 0; font-size: 12px; color: var(--pv-cs-muted); }
.pv-cs-chat__status:empty { display: none; }

@media (max-width: 480px) {
	.pv-cs-chat { bottom: 16px; }
	.pv-cs-chat--right { right: 16px; }
	.pv-cs-chat--left { left: 16px; }
	.pv-cs-chat__panel { width: calc(100vw - 32px); height: calc(100vh - 110px); }
}