.wppb-popup-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

/* ------------------------------------------------------------------------
 * CSS isolation from the active theme.
 *
 * Scoped under `.wppb-popup-scope` -- a class the real frontend overlay
 * carries alongside `.wppb-popup-overlay`, and which the editor canvas
 * wrapper also carries so the exact same rules apply there (see
 * enqueue_editor_assets() in class-admin.php, which loads this same
 * stylesheet on the editor screen, and the `.wppb-canvas` wrapper in
 * editor.js) -- plus the explicit `wppb-*` classes the renderer puts on
 * real form controls (never a bare `input`/`button`/`a`/`label` selector),
 * so it can never leak onto the rest of the page.
 *
 * The selector is written as `.wppb-popup-scope.wppb-popup-scope.wppb-popup-
 * scope` (the same class, repeated 3x) rather than plain `.wppb-popup-scope`
 * -- a real element only needs the class once for this to match, repeating
 * it in the selector is purely a specificity boost (0,3,0 before the rest of
 * the selector, instead of 0,1,0). A single repeat used to be enough for
 * "typical" theme CSS (bare `input`/`button` element selectors, or one or
 * two classes), but themes that style forms with 2-3+ chained classes (very
 * common in page-builder-heavy themes) could still outrank a single
 * `.wppb-popup-scope .wppb-input`. This is deliberately NOT `!important`:
 * `!important` in this stylesheet would also beat the *inline* per-element
 * styles the config UI writes (backgroundColor, padding, ...), breaking the
 * ability to actually customize a popup's look -- plain specificity doesn't
 * have that problem, since inline styles always win over any selector here
 * regardless of how it's padded.
 * ---------------------------------------------------------------------- */

.wppb-popup-scope.wppb-popup-scope.wppb-popup-scope {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.5;
	color: #1d2327;
	text-align: left;
}

.wppb-popup-scope.wppb-popup-scope.wppb-popup-scope *,
.wppb-popup-scope.wppb-popup-scope.wppb-popup-scope *::before,
.wppb-popup-scope.wppb-popup-scope.wppb-popup-scope *::after {
	box-sizing: border-box;
}

.wppb-popup-scope.wppb-popup-scope.wppb-popup-scope h1,
.wppb-popup-scope.wppb-popup-scope.wppb-popup-scope h2,
.wppb-popup-scope.wppb-popup-scope.wppb-popup-scope h3,
.wppb-popup-scope.wppb-popup-scope.wppb-popup-scope h4,
.wppb-popup-scope.wppb-popup-scope.wppb-popup-scope h5,
.wppb-popup-scope.wppb-popup-scope.wppb-popup-scope h6,
.wppb-popup-scope.wppb-popup-scope.wppb-popup-scope p {
	margin: 0 0 0.5em;
	font-family: inherit;
	line-height: 1.3;
}

.wppb-popup-scope.wppb-popup-scope.wppb-popup-scope a {
	color: #2271b1;
	text-decoration: underline;
	font-family: inherit;
}

.wppb-popup-scope.wppb-popup-scope.wppb-popup-scope .wppb-popup-form {
	margin: 0;
}

.wppb-popup-scope.wppb-popup-scope.wppb-popup-scope .wppb-input,
.wppb-popup-scope.wppb-popup-scope.wppb-popup-scope .wppb-checkbox,
.wppb-popup-scope.wppb-popup-scope.wppb-popup-scope .wppb-radio,
.wppb-popup-scope.wppb-popup-scope.wppb-popup-scope .wppb-btn {
	font-family: inherit;
	font-size: 1em;
	line-height: 1.4;
	color: inherit;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
}

.wppb-popup-scope.wppb-popup-scope.wppb-popup-scope .wppb-input {
	display: block;
	width: 100%;
	margin: 0;
	padding: 8px 10px;
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 6px;
	appearance: none;
	-webkit-appearance: none;
}

.wppb-popup-scope.wppb-popup-scope.wppb-popup-scope .wppb-input:focus {
	outline: 2px solid #2271b1;
	outline-offset: 1px;
}

.wppb-popup-scope.wppb-popup-scope.wppb-popup-scope .wppb-textarea {
	resize: vertical;
	min-height: 80px;
}

/*
 * A custom-drawn chevron with appearance:none (not appearance:auto) --
 * restoring the native OS arrow used to visibly double up with wp-admin's
 * own select styling in the editor: WP core draws its own background-image
 * chevron on every bare `select` (its forms.css), and appearance:auto
 * doesn't clear that, only re-enables the browser's native arrow on top of
 * it. Drawing our own, single chevron -- with appearance:none clearing
 * *both* the native arrow and whatever background-image a theme/wp-admin
 * might apply -- also means the dropdown looks pixel-identical between the
 * editor canvas and the real frontend, instead of depending on
 * browser/OS-native select chrome that varies between the two contexts.
 */
.wppb-popup-scope.wppb-popup-scope.wppb-popup-scope .wppb-select {
	appearance: none;
	-webkit-appearance: none;
	color: #1d2327;
	background-color: #fff;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23666'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.24 4.5a.75.75 0 01-1.08 0l-4.24-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 14px;
	padding-right: 32px;
}

/*
 * The *open* dropdown list is drawn by the browser/OS straight from these
 * <option> elements, and they take their colours from the <select>: `color`
 * by inheritance, `background-color` from the control's own background.
 * That's a problem here, because .wppb-input above pairs an inherited
 * foreground (`color: inherit`, so the field follows the popup's own text
 * colour) with a hard-coded `background-color: #fff`. The moment a popup uses
 * light text -- a dark popup design, or a theme colour inherited into the
 * scope -- those two disagree and the open list renders white-on-white: the
 * dropdown expands and looks completely empty even though every <option> is
 * present in the markup.
 *
 * Pinning both halves together here keeps the list readable regardless of
 * what the popup inherits. A field that sets its own text/background colour
 * still wins: WPPB_Renderer::state_css() emits an explicit per-element
 * `option` rule for it (always as a complete colour *pair*, so a half-set
 * config can't recreate the same mismatch).
 */
.wppb-popup-scope.wppb-popup-scope.wppb-popup-scope .wppb-select option {
	color: #1d2327;
	background-color: #fff;
}

/*
 * Last-resort guard against a theme/plugin "select enhancer" (Select2, Chosen,
 * NiceSelect, ...) that got applied to the popup's own selects and could not be
 * torn down -- JS disabled, or a widget exposing no destroy API. See
 * restoreNativeSelects() in popup-frontend.js, which removes them properly;
 * this only makes sure the visitor is left with the real, working control
 * instead of a dead box whose option list opens behind the overlay (those
 * widgets portal their list to <body> with a z-index far below the popup's).
 *
 * !important is safe here despite the note at the top of this file: every
 * selector targets a *generated widget's* own class name, never a `wppb-*`
 * element the popup author can style, so no inline config value is at risk.
 * Selectric wraps the select instead of following it, so it is deliberately
 * left to the JS unwrap rather than hidden here.
 */
.wppb-popup-scope.wppb-popup-scope.wppb-popup-scope .wppb-field-control > .select2,
.wppb-popup-scope.wppb-popup-scope.wppb-popup-scope .wppb-field-control > .chosen-container,
.wppb-popup-scope.wppb-popup-scope.wppb-popup-scope .wppb-field-control > .nice-select {
	display: none !important;
}

.wppb-popup-scope.wppb-popup-scope.wppb-popup-scope select.wppb-select.select2-hidden-accessible {
	position: static !important;
	width: 100% !important;
	height: auto !important;
	margin: 0 !important;
	padding: 8px 10px !important;
	clip: auto !important;
	clip-path: none !important;
	overflow: visible !important;
	opacity: 1 !important;
}

/*
 * Checkbox and radio are drawn by us (appearance:none) instead of being left
 * as the browser's native widget. A native control ignores background-color,
 * border-color and border-radius on every current engine -- it paints an OS
 * theme box -- so the editor's "Wygląd checkboxa" settings had no visible
 * effect at all; only accent-color did anything, and only while checked.
 *
 * The colours arrive as inline CSS custom properties rather than plain inline
 * declarations (see WPPB_Renderer::checkbox_color_vars() and its
 * checkboxInlineStyle() mirror in editor.js) precisely so the :checked rules
 * below can still win: an inline `background-color` beats any stylesheet
 * rule, which would make the checked colour unreachable.
 */
.wppb-popup-scope.wppb-popup-scope.wppb-popup-scope .wppb-checkbox,
.wppb-popup-scope.wppb-popup-scope.wppb-popup-scope .wppb-radio {
	appearance: none;
	-webkit-appearance: none;
	position: relative;
	display: inline-block;
	box-sizing: border-box;
	width: 16px;
	height: 16px;
	/* wp-admin's forms.css pins `min-width: 1rem` on every checkbox/radio,
	   which would quietly refuse any size below 16px in the editor canvas. */
	min-width: 0;
	min-height: 0;
	flex-shrink: 0;
	padding: 0;
	border: 1px solid var(--wppb-cb-border, #8c8f94);
	background-color: var(--wppb-cb-bg, #fff);
	background-image: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.wppb-popup-scope.wppb-popup-scope.wppb-popup-scope .wppb-checkbox {
	margin: 2px 0 0;
	border-radius: 4px;
}

.wppb-popup-scope.wppb-popup-scope.wppb-popup-scope .wppb-radio {
	margin: 0;
	border-radius: 50%;
}

/* wp-admin (editor canvas) draws its own tick/dot in a ::before on every
   checked checkbox/radio -- without this it doubles up with ours below. */
.wppb-popup-scope.wppb-popup-scope.wppb-popup-scope .wppb-checkbox::before,
.wppb-popup-scope.wppb-popup-scope.wppb-popup-scope .wppb-radio::before {
	content: none;
	display: none;
}

.wppb-popup-scope.wppb-popup-scope.wppb-popup-scope .wppb-checkbox:checked,
.wppb-popup-scope.wppb-popup-scope.wppb-popup-scope .wppb-radio:checked {
	background-color: var(--wppb-cb-checked, #2271b1);
	border-color: var(--wppb-cb-checked, #2271b1);
}

/*
 * The tick/dot are pseudo-elements sized in % of the box, so they follow the
 * "Rozmiar" setting instead of a fixed 16px assumption. Even where a browser
 * refuses to render pseudo-elements on an input, the checked state stays
 * unmistakable -- the box itself fills with the checked colour above.
 */
.wppb-popup-scope.wppb-popup-scope.wppb-popup-scope .wppb-checkbox:checked::after {
	content: '';
	position: absolute;
	box-sizing: border-box;
	left: 34%;
	top: 12%;
	width: 28%;
	height: 56%;
	border: solid var(--wppb-cb-mark, #fff);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.wppb-popup-scope.wppb-popup-scope.wppb-popup-scope .wppb-radio:checked::after {
	content: '';
	position: absolute;
	left: 25%;
	top: 25%;
	width: 50%;
	height: 50%;
	border-radius: 50%;
	background-color: var(--wppb-cb-mark, #fff);
}

.wppb-popup-scope.wppb-popup-scope.wppb-popup-scope .wppb-checkbox:focus-visible,
.wppb-popup-scope.wppb-popup-scope.wppb-popup-scope .wppb-radio:focus-visible {
	outline: 2px solid var(--wppb-cb-checked, #2271b1);
	outline-offset: 2px;
}

.wppb-radio-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.wppb-popup-scope.wppb-popup-scope.wppb-popup-scope .wppb-radio-label {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-weight: normal;
	cursor: pointer;
}

.wppb-popup-scope.wppb-popup-scope.wppb-popup-scope .wppb-label {
	display: block;
	margin: 0 0 4px;
	font-family: inherit;
	font-size: 0.9em;
	font-weight: 600;
	color: inherit;
}

.wppb-popup-scope.wppb-popup-scope.wppb-popup-scope .wppb-checkbox-label {
	font-weight: normal;
}

.wppb-popup-scope.wppb-popup-scope.wppb-popup-scope .wppb-btn {
	display: inline-block;
	appearance: none;
	-webkit-appearance: none;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	/*
	 * Unlike .wppb-input/.wppb-checkbox above, this used to be reset-only --
	 * no actual background/border/padding fallback. A button with no
	 * explicit style overrides (e.g. right after "Przywróć domyślne style",
	 * which empties every element's style object, or any popup saved before
	 * per-button styling existed) therefore fell straight through to the
	 * bare browser button chrome and whatever the active theme styles
	 * `button`/`input[type=submit]`/`.btn` with -- the one element that
	 * wasn't actually isolated. These are real defaults, not just resets,
	 * exactly like .wppb-input already has.
	 */
	background-color: #2271b1;
	color: #fff;
	border: none;
	padding: 10px 20px;
	border-radius: 6px;
}

.wppb-popup-overlay__backdrop {
	position: absolute;
	inset: 0;
}

.wppb-popup-window {
	position: relative;
	box-sizing: border-box;
	max-height: 90vh;
	overflow: hidden;
	display: flex;
}

.wppb-popup-window__scroll {
	overflow-y: auto;
	max-height: 90vh;
	width: 100%;
	box-sizing: border-box;
}

.wppb-placement--top {
	align-items: flex-start;
}
.wppb-placement--top .wppb-popup-window {
	margin-top: var(--wppb-offset-y, 20px);
}

.wppb-placement--bottom {
	align-items: flex-end;
}
.wppb-placement--bottom .wppb-popup-window {
	margin-bottom: var(--wppb-offset-y, 20px);
}

.wppb-placement--top-left {
	align-items: flex-start;
	justify-content: flex-start;
}
.wppb-placement--top-left .wppb-popup-window {
	margin-top: var(--wppb-offset-y, 20px);
	margin-left: var(--wppb-offset-x, 20px);
}

.wppb-placement--top-right {
	align-items: flex-start;
	justify-content: flex-end;
}
.wppb-placement--top-right .wppb-popup-window {
	margin-top: var(--wppb-offset-y, 20px);
	margin-right: var(--wppb-offset-x, 20px);
}

.wppb-placement--bottom-left {
	align-items: flex-end;
	justify-content: flex-start;
}
.wppb-placement--bottom-left .wppb-popup-window {
	margin-bottom: var(--wppb-offset-y, 20px);
	margin-left: var(--wppb-offset-x, 20px);
}

.wppb-placement--bottom-right {
	align-items: flex-end;
	justify-content: flex-end;
}
.wppb-placement--bottom-right .wppb-popup-window {
	margin-bottom: var(--wppb-offset-y, 20px);
	margin-right: var(--wppb-offset-x, 20px);
}

.wppb-el {
	box-sizing: border-box;
}

.wppb-el--field_text,
.wppb-el--field_email,
.wppb-el--field_phone,
.wppb-el--field_textarea,
.wppb-el--field_select {
	margin-bottom: 12px;
	display: flex;
	flex-direction: column;
	gap: var(--wppb-label-gap, 4px);
}

/*
 * Label position (top/bottom/left/right). Top is the flex-direction:column
 * default above; the others switch axis/order. When the label sits beside
 * the field, .wppb-field-control (input/textarea/select + its error message)
 * is the flex item that actually grows -- the label gets a fixed/auto width
 * via --wppb-label-width instead of stretching.
 */
.wppb-el--field_text.wppb-label-pos--bottom,
.wppb-el--field_email.wppb-label-pos--bottom,
.wppb-el--field_phone.wppb-label-pos--bottom,
.wppb-el--field_textarea.wppb-label-pos--bottom,
.wppb-el--field_select.wppb-label-pos--bottom {
	flex-direction: column-reverse;
}

.wppb-el--field_text.wppb-label-pos--left,
.wppb-el--field_email.wppb-label-pos--left,
.wppb-el--field_phone.wppb-label-pos--left,
.wppb-el--field_textarea.wppb-label-pos--left,
.wppb-el--field_select.wppb-label-pos--left,
.wppb-el--field_text.wppb-label-pos--right,
.wppb-el--field_email.wppb-label-pos--right,
.wppb-el--field_phone.wppb-label-pos--right,
.wppb-el--field_textarea.wppb-label-pos--right,
.wppb-el--field_select.wppb-label-pos--right {
	flex-direction: row;
	align-items: center;
}

.wppb-el--field_text.wppb-label-pos--right,
.wppb-el--field_email.wppb-label-pos--right,
.wppb-el--field_phone.wppb-label-pos--right,
.wppb-el--field_textarea.wppb-label-pos--right,
.wppb-el--field_select.wppb-label-pos--right {
	flex-direction: row-reverse;
}

.wppb-el--field_text.wppb-label-pos--left .wppb-label,
.wppb-el--field_email.wppb-label-pos--left .wppb-label,
.wppb-el--field_phone.wppb-label-pos--left .wppb-label,
.wppb-el--field_textarea.wppb-label-pos--left .wppb-label,
.wppb-el--field_select.wppb-label-pos--left .wppb-label,
.wppb-el--field_text.wppb-label-pos--right .wppb-label,
.wppb-el--field_email.wppb-label-pos--right .wppb-label,
.wppb-el--field_phone.wppb-label-pos--right .wppb-label,
.wppb-el--field_textarea.wppb-label-pos--right .wppb-label,
.wppb-el--field_select.wppb-label-pos--right .wppb-label {
	flex: 0 0 var(--wppb-label-width, auto);
	width: var(--wppb-label-width, auto);
	margin: 0;
}

.wppb-el--field_text.wppb-label-pos--left .wppb-field-control,
.wppb-el--field_email.wppb-label-pos--left .wppb-field-control,
.wppb-el--field_phone.wppb-label-pos--left .wppb-field-control,
.wppb-el--field_textarea.wppb-label-pos--left .wppb-field-control,
.wppb-el--field_select.wppb-label-pos--left .wppb-field-control,
.wppb-el--field_text.wppb-label-pos--right .wppb-field-control,
.wppb-el--field_email.wppb-label-pos--right .wppb-field-control,
.wppb-el--field_phone.wppb-label-pos--right .wppb-field-control,
.wppb-el--field_textarea.wppb-label-pos--right .wppb-field-control,
.wppb-el--field_select.wppb-label-pos--right .wppb-field-control {
	flex: 1 1 auto;
	min-width: 0;
}

/* Visually hidden but still reachable by screen readers -- "inside the field / placeholder only" from the label-position option. */
.wppb-label--visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.wppb-captcha-widget {
	margin-top: 5px;
	margin-bottom: 12px;
}

.wppb-el--field_checkbox {
	margin-bottom: 12px;
}

.wppb-popup-scope.wppb-popup-scope.wppb-popup-scope .wppb-checkbox-label {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	cursor: pointer;
}

.wppb-required {
	color: #c00;
}

.wppb-field-error {
	color: #c00;
	font-size: 12px;
}

.wppb-el--submit_button,
.wppb-cta {
	border: none;
	cursor: pointer;
	font: inherit;
	text-decoration: none;
	display: inline-block;
}

.wppb-close {
	/* position/top/left-or-right/color/font-size are set inline per popup (see WPPB_Renderer::close_button_html) -- only left OR right is ever set, never both, to avoid stretching the button between them. */
	background: transparent;
	border: none;
	cursor: pointer;
	z-index: 1;
	/*
	 * top/left/right are computed as *equal* offsets (see close_button_html())
	 * so the button's box sits the same distance from the top edge as from
	 * the side edge -- but a bare <button> still carries the browser's own
	 * default padding (asymmetric top/bottom vs left/right in every UA
	 * stylesheet) and has no vertical centering for its text, so the "x"
	 * glyph itself renders off-center inside that box and visibly drifts
	 * down/sideways from where the equal offset actually places it. Zeroing
	 * the padding and centering the glyph in a square, font-size-relative
	 * box makes the visible mark -- not just the invisible button box --
	 * sit at the calculated offset.
	 */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.6em;
	height: 1.6em;
	padding: 0;
	line-height: 1;
}

.wppb-hp-field {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.wppb-form-message {
	margin-top: 12px;
	padding: 10px 12px;
	border-radius: 4px;
	font-size: 14px;
}

.wppb-form-message--success {
	background: #eafaf0;
	color: #1a7f37;
}

.wppb-form-message--error {
	background: #fdeaea;
	color: #c00;
}

body.wppb-no-scroll {
	overflow: hidden;
}

@media (max-width: 480px) {
	.wppb-popup-overlay {
		padding: 10px;
	}
	.wppb-popup-window {
		width: 100% !important;
		max-width: 100% !important;
	}
}