/* border/outline/box-shadow reset is defensive, not decorative: this wrapper
   carries the --dgg-pacf-trigger-border-width/-color custom properties
   inline (see class-render-popup.php's trigger_style_attr()), and WP core's
   own global styles include `html :where([style*="border-width"])` /
   `[style*="border-color"]` — a plain substring match against the whole
   style attribute text, not real border CSS. Since our custom property
   *names* happen to contain those exact substrings, WP core mistakes this
   div for one with a real inline border and forces border-style:solid onto
   it, which then renders with the browser's default border-width/color
   (medium, black) since neither was ever actually set here — the same class
   of bleed already reset on .dgg-pacf-select-grid / .dgg-pacf-group-input. */
.dgg-pacf-frontend {
	margin-bottom: 16px;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

.dgg-pacf-is-hidden {
	display: none !important;
}

/* Shared field styles */

.dgg-pacf-field {
	margin-bottom: 14px;
}

.dgg-pacf-field-label {
	display: block;
	font-weight: 600;
	margin-bottom: 4px;
}

.dgg-pacf-required-mark {
	color: #b32d2e;
}

.dgg-pacf-field-description {
	font-size: 0.85em;
	color: #666;
	margin: 4px 0 0;
}

.dgg-pacf-field-error {
	color: #b32d2e;
	font-size: 0.85em;
	margin-top: 4px;
}

.dgg-pacf-field.dgg-pacf-has-error > .dgg-pacf-input,
.dgg-pacf-field.dgg-pacf-has-error .dgg-pacf-select-grid {
	outline: 1px solid #b32d2e;
}

/* Rounded gradient card — character count sits as a small header line above
   the textarea, which is its own white, padded box floating inside. */
.dgg-pacf-textarea-wrap {
	box-sizing: border-box;
	width: 100%;
	border: 1px solid #ddd;
	border-radius: 24px;
	padding: 10px 12px;
	background: linear-gradient( 135deg, var( --dgg-pacf-primary, #2271b1 ), var( --dgg-pacf-extra, #eaf3fb ) 70% );
}

.dgg-pacf-textarea-wrap:focus-within {
	border-color: #2271b1;
}

.dgg-pacf-textarea-input,
.dgg-pacf-text-input {
	display: block;
	box-sizing: border-box;
	width: 100%;
	border: none;
	outline: none;
	padding: 10px 12px;
	border-radius: 14px;
	resize: vertical;
	background: #fff;
	font: inherit;
}

/* "Form" — a self-built mini form of independent named sub-fields (text/
   number/date/textarea/select/checkbox), not a Contact Form 7 dependency.
   Field appearance is admin-configurable per-project via the
   --dgg-pacf-form-* custom properties set inline on .dgg-pacf-form-fields
   (see templates/group-input.php's 'form' branch). Sub-field textareas
   reuse .dgg-pacf-textarea-wrap purely as the JS char-counter hook (see
   frontend-core.js's updateCharCounter()) — the override below replaces its
   decorative gradient-card look with the plain admin-configured styling
   every other sub-field type gets. */

.dgg-pacf-form-fields {
	display: flex;
	flex-direction: column;
	gap: 14px;
	/* Same WP-core global-styles bleed as .dgg-pacf-frontend above: this div's
	   inline style carries --dgg-pacf-form-border-width/-color custom
	   properties, whose *names* substring-match WP's `[style*="border-width"]`
	   / `[style*="border-color"]` selectors and force a black default border
	   onto it. Reset defensively. */
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

.dgg-pacf-form-field-label {
	display: block;
	font-weight: 600;
	margin-bottom: 4px;
}

.dgg-pacf-form-subfield-input {
	box-sizing: border-box;
	width: 100%;
	padding: 8px 10px;
	border: var( --dgg-pacf-form-border-width, 1px ) solid var( --dgg-pacf-form-border-color, #d9d9d9 );
	border-radius: var( --dgg-pacf-form-border-radius, 6px );
	background: var( --dgg-pacf-form-bg-color, #fff );
	font: inherit;
}

.dgg-pacf-form-field .dgg-pacf-textarea-wrap {
	border: var( --dgg-pacf-form-border-width, 1px ) solid var( --dgg-pacf-form-border-color, #d9d9d9 );
	border-radius: var( --dgg-pacf-form-border-radius, 6px );
	background: var( --dgg-pacf-form-bg-color, #fff );
	padding: 8px 10px;
}

.dgg-pacf-form-field .dgg-pacf-textarea-input {
	background: transparent;
	padding: 0;
	border-radius: 0;
}

.dgg-pacf-form-subfield-checkbox-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.dgg-pacf-form-checkbox-option {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* Dropdown — a custom-styled combobox, not the theme/browser's native
   <select> look. The real <select> stays in the DOM (visually hidden) as
   the actual form control; everything below is a presentational layer
   driven by assets/frontend/js/frontend-dropdown.js. */

.dgg-pacf-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;
}

.dgg-pacf-dropdown-widget {
	position: relative;
	width: 100%;
}

.dgg-pacf-dropdown-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	box-sizing: border-box;
	width: 100%;
	padding: 12px 16px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 14px;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.dgg-pacf-dropdown-widget.is-open .dgg-pacf-dropdown-trigger {
	border-color: #2271b1;
}

.dgg-pacf-dropdown-trigger-label {
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dgg-pacf-dropdown-chevron {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	color: #222;
	transition: transform .15s ease;
}

.dgg-pacf-dropdown-widget.is-open .dgg-pacf-dropdown-chevron {
	transform: rotate( 180deg );
}

.dgg-pacf-dropdown-panel {
	box-sizing: border-box;
	position: absolute;
	top: calc( 100% + 6px );
	left: 0;
	right: 0;
	z-index: 20;
	max-height: 280px;
	overflow-y: auto;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: #fff;
	border: 1px solid #e2e4e7;
	border-radius: 16px;
	box-shadow: 0 12px 28px rgba( 0, 0, 0, .12 );
}

.dgg-pacf-dropdown-option {
	box-sizing: border-box;
	padding: 12px 14px;
	margin-bottom: 4px;
	border: 1px solid transparent;
	border-radius: 10px;
	cursor: pointer;
}

.dgg-pacf-dropdown-option:last-child {
	margin-bottom: 0;
}

.dgg-pacf-dropdown-option:hover {
	background: #f6f7f7;
}

.dgg-pacf-dropdown-option.is-selected {
	background: var( --dgg-pacf-extra, #eaf3fb );
	border-color: var( --dgg-pacf-primary, #2271b1 );
}

.dgg-pacf-dropdown-option .dgg-pacf-fee-hint {
	margin-left: 4px;
}

.dgg-pacf-char-counter {
	font-size: 12px;
	color: #fff;
	text-align: left;
	margin-bottom: 6px;
}

/* Font size intentionally not set here — inherits from context so it matches
   whatever text it's next to (14px on the option card, the header's own
   size when it's shown next to the selected option's name). */
.dgg-pacf-fee-hint {
	color: var( --dgg-pacf-primary, #2c7a2c );
	font-weight: 600;
	margin-left: 4px;
}

/* Select box (single or multi) — thumbnail swatch card + centered label */

/* flex (not grid) so "gap" is the actual on-screen distance between cards —
   a grid column stretches to fill the row (1fr), which pushes cards further
   apart than the gap value the moment a card's content is narrower than
   its column. border/outline explicitly reset — themes commonly apply a
   default border to generic <div> wrappers inside form.cart, which would
   otherwise box the whole grid instead of just each card's thumbnail. */
.dgg-pacf-select-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

.dgg-pacf-group-input {
	border: none !important;
	outline: none !important;
}

.dgg-pacf-select-card {
	box-sizing: border-box;
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	gap: 6px;
	cursor: pointer;
}

.dgg-pacf-select-grid[data-show-labels="0"] .dgg-pacf-select-label,
.dgg-pacf-select-grid[data-show-labels="0"] .dgg-pacf-select-price {
	display: none;
}

.dgg-pacf-select-card input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

/* The border only wraps the thumbnail — the label underneath stays unboxed.
   Width/radius come from the group's own settings (--dgg-pacf-thumb-border-*,
   set inline per group in group-input.php); idle state has no border at
   all (0px) — it only appears on hover/selected. */

.dgg-pacf-select-thumb {
	box-sizing: border-box;
	width: 96px;
	height: 96px;
	max-width: 100%;
	aspect-ratio: 1 / 1;
	border: 0 solid var( --dgg-pacf-primary, #2271b1 );
	border-radius: var( --dgg-pacf-thumb-border-radius, 14px );
	padding: 4px;
	overflow: hidden;
	background: #fff;
	transition: border-color .15s ease, border-width .15s ease;
}

.dgg-pacf-select-card:hover .dgg-pacf-select-thumb,
.dgg-pacf-select-card:has( input:checked ) .dgg-pacf-select-thumb {
	border-width: var( --dgg-pacf-thumb-border-width, 3px );
}

/* width/height forced with !important — themes very commonly reset
   "img { max-width: 100%; height: auto; }" globally, which would otherwise
   size this image by its own aspect ratio instead of filling the thumb box,
   leaving it "letterboxed" instead of filled. Its own radius is always the
   thumb's radius minus the 4px padding, so the two corners stay concentric. */
.dgg-pacf-select-thumb-img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	border-radius: calc( var( --dgg-pacf-thumb-border-radius, 14px ) - 4px );
}

.dgg-pacf-select-label {
	display: block;
	font-size: 14px;
	font-weight: 600;
}

/* A separate flex item under the label — always its own line, whether it
   ends up showing a fee or "Free". */
.dgg-pacf-select-price {
	display: block;
	font-size: 14px;
}

.dgg-pacf-fee-free {
	color: #2c7a2c;
	font-weight: 600;
}

/* Group — no boxed frame; a single centered header line
   ("[switch] Title: Selected label") followed by the option grid and the
   description of whichever option is currently selected. */

.dgg-pacf-group {
	margin-bottom: 24px;
}

.dgg-pacf-group-header-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
}

/* Extra specificity so a theme's generic "label { margin/display }" reset
   can't pull the switch out of vertical alignment with the title text. */
.dgg-pacf-group-header-row .dgg-pacf-switch-label {
	display: inline-flex;
	align-items: center;
	align-self: center;
	margin: 0;
}

/* Title + selected label live inside one shared flex item (.dgg-pacf-group-text)
   instead of being two separate flex items — flex items each wrap within
   their own box, which was producing a rigid "table column" look. As plain
   inline spans sharing one box, they wrap together as normal running text,
   which holds up much better on narrow screens. */
.dgg-pacf-group-text {
	flex: 1 1 auto;
	min-width: 0;
}

.dgg-pacf-group-title {
	font-weight: 700;
}

.dgg-pacf-group-selected-label {
	color: #50575e;
}

.dgg-pacf-group-body {
	margin-top: 12px;
}

.dgg-pacf-selected-description {
	font-size: 0.85em;
	color: #666;
	margin: 10px 0 0;
	display: none;
}

/* Price summary */

.dgg-pacf-price-summary {
	margin-top: 12px;
	padding: 12px 16px;
	background: #f7f7f7;
	border-radius: 24px;
	font-size: 0.9em;
}

.dgg-pacf-price-row {
	display: flex;
	justify-content: space-between;
	padding: 2px 0;
}

.dgg-pacf-price-total {
	font-weight: 700;
	border-top: 1px solid #ddd;
	margin-top: 4px;
	padding-top: 6px;
}

.dgg-pacf-price-grand-total {
	font-weight: 700;
}

/* Upload */

.dgg-pacf-upload-dropzone {
	box-sizing: border-box;
	text-align: center;
	padding: 32px 20px;
	border: 2px dotted var( --dgg-pacf-primary, #6bbf94 );
	border-radius: 20px;
	background: var( --dgg-pacf-extra, #eafaf1 );
	cursor: pointer;
}

.dgg-pacf-upload-dropzone.is-dragover {
	border-color: #2f9e63;
	background: #e0f7ea;
}

.dgg-pacf-upload-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var( --dgg-pacf-primary, #4b9d72 );
	box-shadow: 0 0 0 8px rgba( 255, 255, 255, .1 );
	margin-bottom: 16px;
}

.dgg-pacf-upload-icon svg {
	width: 32px;
	height: 32px;
	color: #fff;
}

.dgg-pacf-upload-title {
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 6px;
}

/* Two title strings live in the markup at all times (both server-translated)
   — only one is ever shown, swapped by toggling .has-files on the field
   wrapper once at least one file has been uploaded. */
.dgg-pacf-upload-title-more {
	display: none;
}

.dgg-pacf-upload-field.has-files .dgg-pacf-upload-title-initial {
	display: none;
}

.dgg-pacf-upload-field.has-files .dgg-pacf-upload-title-more {
	display: block;
}

.dgg-pacf-upload-field.has-files .dgg-pacf-upload-icon {
	display: none;
}

.dgg-pacf-upload-subtitle {
	font-size: 14px;
	color: #444;
	margin: 0 0 4px;
}

.dgg-pacf-upload-formats {
	font-size: 12px;
	color: #888;
	margin: 0 0 16px;
}

/* Themes commonly style .button with float, a 3D inset/outset box-shadow, or
   relative/absolute positioning (for their own Add to Cart button) — all
   reset here with !important so this button renders as a plain centered
   pill instead of inheriting any of that. */
.dgg-pacf-upload-dropzone .dgg-pacf-upload-choose {
	display: inline-block !important;
	float: none !important;
	position: static !important;
	inset: auto !important;
	margin: 0 !important;
	background: var( --dgg-pacf-primary, #4b9d72 ) !important;
	border: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
	color: #fff !important;
	font-weight: 700 !important;
	padding: 10px 24px !important;
	border-radius: 10px !important;
	cursor: pointer;
}

.dgg-pacf-upload-dropzone .dgg-pacf-upload-choose:hover {
	background: #3f8961 !important;
	color: #fff !important;
}

.dgg-pacf-upload-file-list {
	list-style: none;
	margin: 8px 0;
	padding: 0;
}

.dgg-pacf-upload-file-list:empty {
	margin: 0;
}

.dgg-pacf-upload-file {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 0;
	font-size: 0.9em;
}

.dgg-pacf-upload-file.is-uploading {
	color: #888;
	font-style: italic;
}

.dgg-pacf-upload-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	padding: 0;
	color: #b32d2e;
	cursor: pointer;
	line-height: 1;
}

.dgg-pacf-upload-remove svg {
	width: 16px;
	height: 16px;
}

/* Popup */

/* Plain unscoped <div> wrapper around the trigger button — themes commonly
   apply a default border to generic <div>s inside form.cart (the same bleed
   already reset on .dgg-pacf-select-grid / .dgg-pacf-group-input above),
   which otherwise shows through as a stray border hugging the button. */
.dgg-pacf-popup-trigger-wrap {
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

/* Primary CTA that opens the popup — big and prominent, since it's the
   buyer's only entry point into personalizing the product. Resets any
   native/theme <button> chrome with !important since this element carries
   no .button class of its own to piggyback on. Colors/sizing come from
   --dgg-pacf-trigger-* custom properties (the project's "Personalize this
   item" button settings), set inline on the .dgg-pacf-popup-root wrapper —
   see DGG_PACF_Render_Popup::trigger_style_attr() — and inherited from
   there, which also lets the Next/Done footer buttons further down match
   this same look. custom-property substitution happens before !important
   is ever considered, so keeping !important here still lets those
   admin-configured values through while still beating the theme. */
/* Selector qualified with the wrap ancestor (instead of just the bare class)
   to out-rank generic theme "button { border: ... }" resets of equal
   !important weight — a plain single-class selector was still losing that
   fight. "border: none" is reset first, then width/style/color are set
   individually from the admin-configured custom properties, so nothing the
   theme's shorthand carried over (border-image, a stray width) can survive. */
.dgg-pacf-popup-trigger-wrap .dgg-pacf-popup-trigger {
	display: flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var( --dgg-pacf-trigger-width, 100% ) !important;
	padding: var( --dgg-pacf-trigger-padding-y, 16px ) 24px !important;
	margin: 0 0 12px !important;
	background: var( --dgg-pacf-trigger-bg, #2271b1 ) !important;
	color: var( --dgg-pacf-trigger-color, #fff ) !important;
	border: none !important;
	border-width: var( --dgg-pacf-trigger-border-width, 0px ) !important;
	border-style: solid !important;
	border-color: var( --dgg-pacf-trigger-border-color, #2271b1 ) !important;
	border-radius: var( --dgg-pacf-trigger-radius, 14px ) !important;
	outline: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	cursor: pointer;
	transition: filter .15s ease;
}

.dgg-pacf-popup-trigger-wrap .dgg-pacf-popup-trigger:hover {
	filter: brightness( .92 );
}

/* Applied by frontend-popup.js once the buyer clicks Done (customization
   saved, popup closed, values kept) — cleared again if the popup is later
   reset via the (X) close button or an outside click. Falls back to
   --dgg-pacf-trigger-bg itself when completed_bg_color isn't configured, so
   this is a no-op (no visible change) until the admin explicitly sets one. */
.dgg-pacf-popup-trigger-wrap .dgg-pacf-popup-trigger.is-completed {
	background: var( --dgg-pacf-trigger-completed-bg, var( --dgg-pacf-trigger-bg, #2271b1 ) ) !important;
}

/* Relocated to a direct child of <body> at init time (see frontend-core.js's
   relocatePopupOverlay()) so `position: fixed` can't be trapped inside a
   transformed ancestor from the theme/page builder — the max signed 32-bit
   z-index on top of that also covers themes whose sticky header simply sets
   an equal-or-higher z-index of its own. */
.dgg-pacf-popup-overlay {
	position: fixed;
	inset: 0;
	background: rgba( 0, 0, 0, 0.5 );
	z-index: 2147483647;
	display: flex;
	align-items: center;
	justify-content: center;
}

.dgg-pacf-popup-overlay[hidden] {
	display: none;
}

/* Fixed-height modal (not just a max-height cap) so its height never
   depends on how much step content there currently is. It's a flex column
   of 3 regions: the close button floats over the top, the step body is the
   only part that scrolls (flex: 1 1 auto), and the footer is a fixed-size
   flex item that therefore always stays pinned to the bottom edge. */
.dgg-pacf-popup-modal {
	display: flex;
	flex-direction: column;
	background: #fff;
	width: min( 560px, 92vw );
	height: 80vh;
	max-height: 80vh;
	border-radius: 24px;
	overflow: hidden;
	position: relative;
}

.dgg-pacf-popup-close {
	position: absolute;
	top: 10px;
	right: 14px;
	background: none;
	border: none;
	font-size: 22px;
	cursor: pointer;
	line-height: 1;
	z-index: 1;
}

.dgg-pacf-popup-steps-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 24px;
}

/* Popup step header: the on/off switch gets its own line, above the
   "Title: selected label" line — unlike the inline accordion, where both
   sit on one row (see .dgg-pacf-group-header-row further down). */
.dgg-pacf-popup-step .dgg-pacf-group-header-row {
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

/* align-items: flex-start above isn't enough on its own — .dgg-pacf-switch-label
   carries its own "align-self: center" (meant for the inline accordion's
   row layout, where align-self centers it vertically). In this column
   layout align-self instead controls horizontal placement, so it has to be
   overridden here or the switch ends up centered instead of left-aligned. */
.dgg-pacf-popup-step .dgg-pacf-group-header-row .dgg-pacf-switch-label {
	align-self: flex-start;
}

/* Footer: price summary on top, nav buttons pinned below it — both stay
   fixed to the bottom edge of the modal (see flex: 0 0 auto above). */
.dgg-pacf-popup-footer {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px 24px;
	border-top: 1px solid #eee;
	background: #fff;
}

.dgg-pacf-popup-footer .dgg-pacf-price-summary {
	margin-top: 0;
}

.dgg-pacf-popup-footer-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

/* Back / "Add to Cart" — both plain colored, underlined text links, never
   filled buttons, sharing the same --dgg-pacf-secondary-color (Colors
   panel's "Next" Button section — see DGG_PACF_Render_Popup::secondary_style_attr()). */
.dgg-pacf-popup-back,
.dgg-pacf-popup-add-to-cart {
	color: var( --dgg-pacf-secondary-color, #2271b1 );
	text-decoration: underline;
	cursor: pointer;
}

.dgg-pacf-popup-back:hover,
.dgg-pacf-popup-add-to-cart:hover {
	filter: brightness( .85 );
}

/* First step: faded/dimmed rather than fully invisible — still visibly
   there as a disabled control, not hidden. */
.dgg-pacf-popup-back.is-disabled {
	opacity: .4;
	pointer-events: none;
}

/* Next / Done — the primary step CTA, made bigger and bolder than a
   default .button; themes commonly style .button with their own padding/
   font-size/box-shadow, hence the !important resets. Colors/border/radius/
   padding come from --dgg-pacf-next-* — either mirroring the trigger button
   or fully independent, resolved server-side (see
   DGG_PACF_Render_Popup::next_style_attr()); this CSS never needs to know
   which. */
.dgg-pacf-popup-footer-nav .dgg-pacf-popup-next,
.dgg-pacf-popup-footer-nav .dgg-pacf-popup-done {
	padding: var( --dgg-pacf-next-padding-y, 14px ) 32px !important;
	background: var( --dgg-pacf-next-bg, #2271b1 ) !important;
	color: var( --dgg-pacf-next-color, #fff ) !important;
	border: none !important;
	border-width: var( --dgg-pacf-next-border-width, 0px ) !important;
	border-style: solid !important;
	border-color: var( --dgg-pacf-next-border-color, #2271b1 ) !important;
	border-radius: var( --dgg-pacf-next-radius, 12px ) !important;
	outline: none !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	box-shadow: none !important;
	text-shadow: none !important;
}

.dgg-pacf-popup-footer-nav .dgg-pacf-popup-next:hover,
.dgg-pacf-popup-footer-nav .dgg-pacf-popup-done:hover {
	filter: brightness( .92 );
}

/* Only the FIRST visible element after Back gets margin-left:auto to pull
   the whole right-hand group flush right — Next on earlier steps, Add to
   Cart on the last one. Done never gets its own auto margin: it always
   appears together with Add to Cart (never with Next, they're mutually
   exclusive), so it just sits snug right after it via the row's own gap —
   giving both auto margins independently would space them apart instead of
   clustering them together. */
.dgg-pacf-popup-footer-nav .dgg-pacf-popup-next {
	margin-left: auto;
}

.dgg-pacf-popup-add-to-cart {
	margin-left: auto;
}

/* Header switch (toggle group on/off) */

.dgg-pacf-switch-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	cursor: pointer;
}

.dgg-pacf-switch {
	position: relative;
	display: inline-block;
	width: 40px;
	height: 22px;
	flex-shrink: 0;
	vertical-align: middle;
}

.dgg-pacf-switch input {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
}

.dgg-pacf-switch-track {
	position: absolute;
	inset: 0;
	background: #c3c4c7;
	border-radius: 999px;
	transition: background-color .15s ease;
}

.dgg-pacf-switch-track::before {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 18px;
	height: 18px;
	background: #fff;
	border-radius: 50%;
	transition: transform .15s ease;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, .3 );
}

.dgg-pacf-switch input:checked + .dgg-pacf-switch-track {
	background: var( --dgg-pacf-primary, #2271b1 );
}

.dgg-pacf-switch input:checked + .dgg-pacf-switch-track::before {
	transform: translateX( 18px );
}

/* A toggle_enabled group left OFF stays visible but disabled — grayed out,
   not interactive, distinct from dgg-pacf-is-hidden (conditional logic). */

.dgg-pacf-group-input.dgg-pacf-group-disabled {
	opacity: .45;
	pointer-events: none;
}