/* 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 {
	display: block;
	box-sizing: border-box;
	width: 100%;
	border: none;
	outline: none;
	padding: 10px 12px;
	border-radius: 14px;
	resize: vertical;
	background: #fff;
	font: inherit;
}

/* 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: #888;
	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 );
}

.dgg-pacf-popup-overlay {
	position: fixed;
	inset: 0;
	background: rgba( 0, 0, 0, 0.5 );
	z-index: 100000;
	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 — a plain colored, underlined text link instead of a button. */
.dgg-pacf-popup-back {
	color: var( --dgg-pacf-primary, #2271b1 );
	text-decoration: underline;
	cursor: pointer;
}

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

.dgg-pacf-popup-back.is-disabled {
	opacity: 0;
	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. */
.dgg-pacf-popup-footer-nav .dgg-pacf-popup-next,
.dgg-pacf-popup-footer-nav .dgg-pacf-popup-done {
	margin-left: auto;
	padding: 14px 32px !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	border-radius: 12px !important;
	box-shadow: none !important;
	text-shadow: none !important;
}

/* Next specifically matches the "Personalize this item" trigger button's
   look — same --dgg-pacf-trigger-* custom properties, inherited from the
   .dgg-pacf-popup-root wrapper (see trigger_style_attr() in
   class-render-popup.php) — for one consistent CTA style across the flow. */
.dgg-pacf-popup-footer-nav .dgg-pacf-popup-next {
	padding-top: var( --dgg-pacf-trigger-padding-y, 14px ) !important;
	padding-bottom: var( --dgg-pacf-trigger-padding-y, 14px ) !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, 12px ) !important;
	outline: none !important;
}

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

/* 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: 64px;
	height: 36px;
	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: 32px;
	height: 32px;
	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( 28px );
}

/* 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;
}