/* Popup Forms. Colours come from the shortcode via --pf-color, --pf-text, --pf-rgb. */

/* ---------- Buttons ---------- */
button.pf-btn {
	--pf-color: #1f2937;
	--pf-text: #ffffff;
	--pf-rgb: 31, 41, 55;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	box-sizing: border-box;
	margin: 0;
	padding: .85em 1.7em;
	border: 1.5px solid var(--pf-color);
	border-radius: 8px;
	font: inherit;
	font-family: var(--pf-font, inherit);
	font-size: var(--pf-fs, inherit);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	transition: transform .15s ease, box-shadow .2s ease, opacity .15s ease, background-color .2s ease, color .2s ease;
}
button.pf-btn:hover { transform: translateY(-1px); }
button.pf-btn:active { transform: translateY(0); }
button.pf-btn:focus-visible {
	outline: 3px solid rgba(var(--pf-rgb), .35);
	outline-offset: 3px;
}

/* 1. Filled */
button.pf-btn--filled {
	background: var(--pf-color);
	color: var(--pf-text);
	box-shadow: 0 4px 14px rgba(var(--pf-rgb), .25);
}
button.pf-btn--filled:hover {
	background: var(--pf-color);
	color: var(--pf-text);
	box-shadow: 0 8px 22px rgba(var(--pf-rgb), .32);
}

/* 2. No background */
button.pf-btn--outline {
	background: transparent;
	color: var(--pf-color);
}
button.pf-btn--outline:hover {
	background: rgba(var(--pf-rgb), .08);
	color: var(--pf-color);
}

/* 3. Circular icon, with an optional text label beside it */
button.pf-btn--icon {
	gap: 16px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--pf-label, inherit);
	font-size: var(--pf-fs, 1.05em);
	font-weight: 500;
	text-align: left;
	box-shadow: none;
}
button.pf-btn--icon:hover {
	background: transparent;
	color: var(--pf-label, inherit);
	transform: none;
}
button.pf-btn--icon .pf-icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: var(--pf-size, 56px);
	height: var(--pf-size, 56px);
	border-radius: 50%;
	background: var(--pf-color);
	color: var(--pf-text);
	box-shadow: 0 4px 14px rgba(var(--pf-rgb), .3);
	transition: transform .2s ease, box-shadow .2s ease;
}
button.pf-btn--icon:hover .pf-icon {
	transform: scale(1.06);
	box-shadow: 0 8px 22px rgba(var(--pf-rgb), .38);
}
button.pf-btn--icon .pf-icon svg,
button.pf-btn--icon .pf-icon img {
	display: block;
	width: 46%;
	height: 46%;
	object-fit: contain;
}

/* ---------- Popup ---------- */
.pf-modal {
	--pf-color: #1f2937;
	--pf-text: #ffffff;
	--pf-rgb: 31, 41, 55;
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}
.pf-modal[hidden] { display: none; }
.pf-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 15, 20, .55);
	backdrop-filter: blur(4px);
	animation: pf-fade .2s ease-out;
}
.pf-dialog {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 520px;
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	padding: 36px 32px 30px;
	background: #fff;
	color: #1a1a1a;
	font-family: var(--pf-font, inherit);
	font-size: var(--pf-fs, inherit);
	border-radius: 16px;
	box-shadow: 0 24px 64px rgba(0, 0, 0, .28);
	animation: pf-in .25s cubic-bezier(.16, 1, .3, 1);
}
.pf-dialog:focus { outline: none; }
@keyframes pf-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes pf-in {
	from { opacity: 0; transform: scale(.96) translateY(8px); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.pf-dialog, .pf-backdrop { animation: none; }
	button.pf-btn, button.pf-btn--icon .pf-icon { transition: none; }
}

.pf-close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #666;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.pf-close:hover { background: #f2f2f4; color: #111; }
.pf-close:focus-visible { outline: 2px solid rgba(var(--pf-rgb), .4); }

.pf-title { margin: 0 32px 8px 0; padding: 0; color: inherit; font-family: var(--pf-tfont, inherit); font-size: var(--pf-tfs, 1.45em); font-weight: 650; letter-spacing: -.01em; line-height: 1.25; }
.pf-intro { margin: 0 0 22px; color: #666; }

.pf-field { margin-bottom: 18px; }
.pf-field label { display: block; margin-bottom: 7px; font-weight: 500; font-size: .87em; color: #444; }
.pf-req { color: #dc2626; }
.pf-field input[type="text"],
.pf-field input[type="email"],
.pf-field input[type="tel"],
.pf-field input[type="number"],
.pf-field input[type="date"],
.pf-field select,
.pf-field textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 11px 14px;
	background: var(--pf-field-bg, transparent);
	border: 1.5px solid #dcdce0;
	border-radius: 9px;
	color: #1a1a1a;
	font: inherit;
	transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.pf-field input:hover,
.pf-field select:hover,
.pf-field textarea:hover {
	border-color: #c2c2c8;
}
.pf-field input:focus,
.pf-field select:focus,
.pf-field textarea:focus {
	outline: none;
	border-color: var(--pf-color);
	background: var(--pf-field-active-bg, var(--pf-field-bg, transparent));
	box-shadow: 0 0 0 4px rgba(var(--pf-rgb), .14);
}
.pf-field textarea { resize: vertical; min-height: 96px; }

/* Dropdown fields. The box itself, its border, and its focus glow all follow
   your chosen colour. The list of options that drops open when you click it
   is drawn by the browser/OS, not this stylesheet, so its own highlight
   colour can't be changed here, that's a platform limitation, not a plugin
   one. Firefox honours the line below for the ticked option; most other
   browsers ignore it and keep their own native highlight regardless. */
.pf-field select { cursor: pointer; }
.pf-field select option:checked { background: var(--pf-color); color: var(--pf-text); }

.pf-field--check .pf-check,
.pf-field--checks .pf-check { display: flex; gap: 9px; align-items: flex-start; font-weight: 400; font-size: .9em; color: #444; line-height: 1.4; margin-bottom: 8px; }
.pf-field--check input,
.pf-field--checks input { margin-top: 3px; accent-color: var(--pf-consent, var(--pf-color)); }

/* Checkboxes (multiple choice) */
.pf-field--checks { border: 0; margin: 0 0 18px; padding: 0; }
.pf-field--checks legend { display: block; width: 100%; margin-bottom: 9px; padding: 0; font-weight: 500; font-size: .87em; color: #444; }
.pf-field--checks .pf-check:last-child { margin-bottom: 0; }

/* Conditional fields: belt-and-braces in case a theme resets the "hidden" attribute's default styling. */
.pf-field[hidden], .pf-field--check[hidden], .pf-field--checks[hidden] { display: none !important; }

.pf-submit {
	display: block;
	width: 100%;
	padding: 13px 20px;
	margin-top: 6px;
	border: none;
	border-radius: 9px;
	background: var(--pf-color);
	color: var(--pf-text);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(var(--pf-rgb), .3);
	transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.pf-submit:hover { transform: translateY(-1px); opacity: .95; }
.pf-submit:active { transform: translateY(0); }
.pf-submit:disabled { opacity: .6; cursor: wait; transform: none; }

.pf-msg { margin-top: 14px; font-size: .87em; text-align: center; transition: opacity .2s ease; }
.pf-msg:empty { display: none; }
.pf-msg.pf-err { color: #dc2626; font-weight: 500; }
.pf-msg.pf-ok { color: #15803d; font-weight: 500; }

.pf-msg.pf-success {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 14px 0 4px;
	text-align: center;
}
.pf-success-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--pf-color);
	color: var(--pf-text);
	box-shadow: 0 6px 18px rgba(var(--pf-rgb), .3);
}
.pf-success-icon svg { display: block; width: 50%; height: 50%; }
.pf-success-title { font-size: 1.3rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; color: #1a1a1a; }
.pf-success-text { color: #555; }
.pf-dialog.pf-done .pf-title,
.pf-dialog.pf-done .pf-intro { display: none; }

.pf-form.pf-done .pf-field,
.pf-form.pf-done .pf-field--checks,
.pf-form.pf-done .pf-submit { display: none; }

/* Honeypot: off-screen, not display:none, so bots still fill it. */
.pf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

html.pf-lock, html.pf-lock body { overflow: hidden; }

/* The shortcode trigger contains only the button; never render any trigger title text. */
.pf-trigger { display: inline-block; }
.pf-trigger > .pf-btn { margin: 0; }