/**
 * Portrait-Archiv Photostore - Frontend-Styles.
 *
 * Framework-frei, mobile-first, auf die Plugin-Container gescoped. Die Galerie
 * bricht bewusst aus der (oft schmalen) Theme-Spalte auf volle Breite aus, um
 * die Bilder wirken zu lassen. Farbakzent per CSS-Variable anpassbar.
 */

[data-pawps-gallery],
[data-pawps-public-list],
[data-pawps-basket] {
	--pawps-accent: #2d6cdf;
	--pawps-ink: #16181d;
	--pawps-muted: #6b7280;
	--pawps-line: #e6e6e8;
	--pawps-card: #f3f3f2;
	/* Gesperrte Eingabefelder: durchscheinender Schleier statt fester Farbe,
	   damit der Zustand auf JEDEM Zeilenhintergrund erkennbar ist (die
	   Warenkorb-Tabelle ist gestreift). Im Dark-Mode ueberschrieben - ein
	   schwarzer Schleier waere dort unsichtbar. */
	--pawps-disabled-fill: rgba( 0, 0, 0, 0.05 );
	--pawps-disabled-line: rgba( 0, 0, 0, 0.07 );
	--pawps-radius: 14px;
	--pawps-gap: clamp( 0.5rem, 1.4vw, 1.25rem );

	box-sizing: border-box;
	color: var( --pawps-ink );
	font-feature-settings: "kern";
}

[data-pawps-gallery] *,
[data-pawps-public-list] *,
[data-pawps-basket] * {
	box-sizing: border-box;
}

/* --- Container: buendig zur Content-Breite (kein Ausbruch) --------------- */

[data-pawps-gallery],
[data-pawps-public-list],
[data-pawps-basket] {
	width: 100%;
}

/* --- Kopfzeile ----------------------------------------------------------- */

.pawps-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.25rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var( --pawps-line );
}

.pawps-header__titles {
	min-width: 0;
}

[data-pawps-gallery] h1 {
	font-size: clamp( 1.4rem, 2.5vw, 2.1rem );
	font-weight: 600;
	letter-spacing: -0.01em;
	text-wrap: balance;
	margin: 0 0 0.2rem;
}

.pawps-subtitle {
	margin: 0;
	color: var( --pawps-muted );
	font-size: 0.95rem;
}

.pawps-subtitle a {
	color: var( --pawps-accent );
	text-decoration: none;
}

/* --- Warenkorb-Widget ---------------------------------------------------- */

.pawps-cart {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: nowrap;
	white-space: nowrap;
	padding: 0.55rem 0.95rem;
	border: 1px solid var( --pawps-line );
	border-radius: 999px;
	background: #fff;
	color: var( --pawps-ink );
	text-decoration: none;
	font-weight: 500;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.05 );
	transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.pawps-cart:hover {
	border-color: var( --pawps-accent );
	box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.1 );
}

.pawps-cart__icon {
	color: var( --pawps-accent );
	flex: none;
}

.pawps-cart__sep {
	color: var( --pawps-muted );
}

.pawps-cart__sum {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

/* --- Unterordner als Pills ---------------------------------------------- */

.pawps-folders {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 var( --pawps-gap );
}

.pawps-folders:empty {
	display: none;
}

.pawps-folder {
	padding: 0.45rem 0.95rem;
	border: 1px solid var( --pawps-line );
	border-radius: 999px;
	background: #fff;
	color: var( --pawps-ink );
	font: inherit;
	cursor: pointer;
	transition: all 0.15s ease;
}

.pawps-folder:hover {
	border-color: var( --pawps-accent );
	color: var( --pawps-accent );
}

.pawps-folder.is-active {
	background: var( --pawps-ink );
	border-color: var( --pawps-ink );
	color: #fff;
}

.pawps-folder:focus-visible {
	outline: 3px solid var( --pawps-accent );
	outline-offset: 2px;
}

/* --- Bild-Raster --------------------------------------------------------- */

#images,
[data-pawps-public-list] {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( clamp( 130px, 22%, 240px ), 1fr ) );
	gap: var( --pawps-gap );
	margin: var( --pawps-gap ) 0;
	padding: 0;
	list-style: none;
}

/* Alte Bootstrap-Spaltenklassen im generierten Markup neutralisieren. */
#images > [class*="col-"] {
	width: auto;
	max-width: none;
	padding: 0;
	float: none;
}

.pawps-thumb,
.pawps-listcard {
	display: block;
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var( --pawps-radius );
	overflow: hidden;
	background: var( --pawps-card );
	cursor: pointer;
	text-decoration: none;
	color: inherit;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.06 );
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.pawps-thumb img,
.pawps-listcard__img img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.pawps-thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( to top, rgba( 0, 0, 0, 0.28 ), rgba( 0, 0, 0, 0 ) 42% );
	opacity: 0;
	transition: opacity 0.2s ease;
}

.pawps-thumb:hover,
.pawps-listcard:hover {
	box-shadow: 0 10px 30px rgba( 0, 0, 0, 0.16 );
	transform: translateY( -3px );
}

.pawps-thumb:hover img,
.pawps-listcard:hover img {
	transform: scale( 1.06 );
}

.pawps-thumb:hover::after {
	opacity: 1;
}

.pawps-thumb:focus-visible,
.pawps-listcard:focus-visible,
.pawps-page:focus-visible {
	outline: 3px solid var( --pawps-accent );
	outline-offset: 2px;
}

.pawps-listcard__title {
	display: block;
	padding: 0.7rem 0.85rem;
	font-weight: 600;
}

/* --- Pagination ---------------------------------------------------------- */

#pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	justify-content: center;
	margin: 1.5rem 0;
	padding: 0;
	list-style: none;
}

#pagination li {
	list-style: none;
}

.pawps-page {
	min-width: 2.6rem;
	padding: 0.45rem 0.7rem;
	border: 1px solid var( --pawps-line );
	border-radius: 999px;
	background: #fff;
	color: var( --pawps-ink );
	cursor: pointer;
	font: inherit;
	line-height: 1;
	transition: all 0.15s ease;
}

.pawps-page:hover {
	border-color: var( --pawps-accent );
	color: var( --pawps-accent );
}

.pawps-page.is-active {
	background: var( --pawps-accent );
	border-color: var( --pawps-accent );
	color: #fff;
}

/* --- Lightbox ------------------------------------------------------------ */

body.pawps-lb-open {
	overflow: hidden;
}

/* Overlays haengen an document.body (ausserhalb der Container) und brauchen
   die Akzentfarbe daher selbst - sonst waeren z. B. Buttons weiss auf weiss. */
.pawps-lb,
.pawps-setcfg,
.pawps-imgview {
	--pawps-accent: #2d6cdf;
	--pawps-ink: #16181d;
	--pawps-muted: #6b7280;
	--pawps-line: #e6e6e8;
}

.pawps-lb {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp( 0.5rem, 2vw, 2rem );
	background: rgba( 10, 10, 12, 0.92 );
	backdrop-filter: blur( 4px );
	animation: pawps-fade 0.2s ease;
}

@keyframes pawps-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

.pawps-lb__stage {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 260px, 340px );
	gap: 1.5rem;
	width: 100%;
	max-width: 1200px;
	max-height: 90vh;
	align-items: center;
}

.pawps-lb__figure {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
}

.pawps-lb__figure img {
	max-width: 100%;
	max-height: 88vh;
	object-fit: contain;
	border-radius: 8px;
	box-shadow: 0 20px 60px rgba( 0, 0, 0, 0.6 );
}

.pawps-lb__panel {
	color: #f4f4f5;
	align-self: center;
	/* Solider Karten-Hintergrund, damit die Texte/Preise immer klar lesbar sind
	   und nicht auf dem durchscheinenden, geblurrten Foto "schwimmen". */
	background: rgba( 24, 26, 32, 0.97 );
	padding: 1.25rem 1.4rem;
	border-radius: 12px;
	border: 1px solid rgba( 255, 255, 255, 0.12 );
	box-shadow: 0 16px 48px rgba( 0, 0, 0, 0.55 );
	max-height: 88vh;
	overflow-y: auto;
}

.pawps-lb__title {
	font-size: 1.15rem;
	font-weight: 600;
	margin: 0 0 1.25rem;
	/* Explizit hell: die Lightbox haengt an document.body, sonst faerbt das
	   Theme die <h3>-Ueberschrift dunkel ein -> unlesbar auf dunklem Panel. */
	color: #fff;
}

.pawps-lb__label {
	display: block;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #a9adb6;
	margin-bottom: 0.35rem;
}

.pawps-lb__product,
.pawps-lb__qty {
	width: 100%;
	padding: 0.6rem 0.7rem;
	border: 1px solid rgba( 255, 255, 255, 0.18 );
	border-radius: 10px;
	background: rgba( 255, 255, 255, 0.06 );
	color: #fff;
	font: inherit;
}

/* Optionen UND Kategorie-Gruppenlabels dunkel (native Dropdowns rendern auf
   hellem Grund) – gemeinsame Textfarbe, damit nichts doppelt gepflegt wird. */
.pawps-lb__product option,
.pawps-lb__product optgroup {
	color: #16181d;
}

/* Kategorie-Gruppenlabels zusaetzlich hervorheben, damit die Gruppierung im
   geoeffneten Select klar erkennbar ist. */
.pawps-lb__product optgroup {
	background: #fff;
	font-weight: 700;
}

.pawps-lb__row {
	margin-top: 1rem;
}

.pawps-lb__qty {
	max-width: 6rem;
}

.pawps-lb__price {
	margin: 1.1rem 0;
	font-size: 1.6rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.pawps-lb__tiers {
	margin: -0.4rem 0 1.1rem;
	padding: 0.6rem 0.8rem;
	/* Auf dem dunklen Lightbox-Panel: helle statt schwarzer Kontur/Fuellung,
	   sonst waere die Box quasi unsichtbar (dunkel auf dunkel). */
	border: 1px solid rgba( 255, 255, 255, 0.14 );
	border-radius: 10px;
	background: rgba( 255, 255, 255, 0.05 );
	font-size: 0.86rem;
}

.pawps-lb__tiers-title {
	font-weight: 600;
	margin-bottom: 0.3rem;
}

.pawps-lb__tier-list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-variant-numeric: tabular-nums;
}

.pawps-lb__tier {
	display: flex;
	justify-content: space-between;
	padding: 0.1rem 0;
	opacity: 0.75;
}

.pawps-lb__tier.is-active {
	opacity: 1;
	font-weight: 700;
	color: var( --pawps-accent );
}

.pawps-lb__tiers-nudge {
	margin-top: 0.4rem;
	font-weight: 600;
	color: var( --pawps-accent );
}

.pawps-lb__add {
	width: 100%;
	padding: 0.85rem 1rem;
	border: 0;
	border-radius: 10px;
	background: var( --pawps-accent );
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: filter 0.15s ease;
}

.pawps-lb__add:hover {
	filter: brightness( 1.08 );
}

.pawps-lb__add:disabled {
	opacity: 0.6;
	cursor: default;
}

/* Erfolgs-Zustand: der Button wird kurz selbst zur Bestaetigung. Die
   Rueckmeldung erscheint damit genau am Blickpunkt - die frueher genutzte
   Meldung am unteren Fensterrand wurde regelmaessig uebersehen. */
.pawps-lb__add.is-added {
	background: #17803d;
	filter: none;
}

/* Persistenter Warenkorb-Stand unter dem Button. Feste Farben statt
   CSS-Variablen: die Lightbox haengt an document.body, ausserhalb der
   Plugin-Container, in denen --pawps-* definiert sind. */
.pawps-lb__cart {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.35rem 0.75rem;
	margin-top: 0.9rem;
	padding-top: 0.8rem;
	border-top: 1px solid rgba( 255, 255, 255, 0.14 );
	font-size: 0.95rem;
}

.pawps-lb__cart[hidden] {
	display: none;
}

.pawps-lb__cart-state {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: #d7dae0;
}

.pawps-lb__cart-icon {
	flex: none;
	opacity: 0.8;
}

.pawps-lb__cart-sum {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: #fff;
}

.pawps-lb__cart-sum::before {
	content: "\00b7";
	margin: 0 0.4rem 0 0.15rem;
	font-weight: 400;
	opacity: 0.55;
}

.pawps-lb__cart-link {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	font-weight: 600;
	white-space: nowrap;
}

.pawps-lb__cart-link:hover,
.pawps-lb__cart-link:focus {
	text-decoration-thickness: 2px;
}

/* Nur fuer Screenreader (Ansage der Warenkorb-Bestaetigung). */
.pawps-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

.pawps-lb__close {
	position: absolute;
	top: 1rem;
	right: 1.25rem;
	width: 2.6rem;
	height: 2.6rem;
	border: 0;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.12 );
	color: #fff;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
}

.pawps-lb__nav {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	width: 3rem;
	height: 3rem;
	border: 0;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.12 );
	color: #fff;
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
}

.pawps-lb__nav:hover,
.pawps-lb__close:hover {
	background: rgba( 255, 255, 255, 0.22 );
}

.pawps-lb__prev { left: 1rem; }
.pawps-lb__next { right: 1rem; }

.pawps-lb.is-loading .pawps-lb__figure { opacity: 0.4; }

/* --- Warenkorb-Box ------------------------------------------------------- */

[data-pawps-basket-box] {
	padding: 0.9rem 1rem;
	border: 1px solid var( --pawps-line );
	border-radius: var( --pawps-radius );
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.08 );
}

[data-pawps-basket-box] a {
	font-weight: 600;
	color: var( --pawps-accent );
	text-decoration: none;
}

/* --- Warenkorb-Liste ----------------------------------------------------- */

[data-pawps-basket] table {
	width: 100%;
	border-collapse: collapse;
	margin: 1rem 0;
}

[data-pawps-basket] th,
[data-pawps-basket] td {
	padding: 0.7rem 0.6rem;
	border-bottom: 1px solid var( --pawps-line );
	text-align: left;
	vertical-align: middle;
}

[data-pawps-basket] th {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var( --pawps-muted );
}

[data-pawps-basket] img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 8px;
	cursor: zoom-in;
}

[data-pawps-basket] .pawps-qty {
	width: 4.5rem;
	padding: 0.4rem 0.5rem;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* Nicht editierbare Menge: dasselbe Feld, nur deaktiviert (digitaler Download
   = je Foto genau 1x). Die Geometrie ist zwangsweise identisch, weil es
   dieselbe Klasse ist.

   Zurueck tritt bewusst nur der KASTEN (kein Feld-Hintergrund), nicht der
   Wert: ein `opacity` auf dem Feld daempft beides und macht die Zahl schlecht
   lesbar. WebKit faerbt deaktivierte Felder ausserdem eigenmaechtig grau und
   ignoriert dabei `color` - daher `-webkit-text-fill-color` explizit. Farbe
   ueber das Token, damit der Dark-Mode mitkommt. */
[data-pawps-basket] .pawps-qty:disabled {
	cursor: default;
	opacity: 1;
	color: var( --pawps-ink );
	-webkit-text-fill-color: var( --pawps-ink );
	background: var( --pawps-disabled-fill );
	border-color: var( --pawps-disabled-line );
}

/* Einfaches Bild-Overlay (z.B. Klick aufs Warenkorb-Bild) */
.pawps-imgview {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp( 0.5rem, 2vw, 2rem );
	background: rgba( 10, 10, 12, 0.92 );
	cursor: zoom-out;
}

.pawps-imgview img {
	max-width: 100%;
	max-height: 90vh;
	border-radius: 8px;
	box-shadow: 0 20px 60px rgba( 0, 0, 0, 0.6 );
}

[data-pawps-basket] .text-right,
[data-pawps-basket] .text-center {
	font-variant-numeric: tabular-nums;
}

[data-pawps-basket] .text-right { text-align: right; }
[data-pawps-basket] .text-center { text-align: center; }

[data-pawps-basket] form {
	display: grid;
	gap: 0.8rem;
	max-width: 640px;
}

[data-pawps-basket] input,
[data-pawps-basket] select,
[data-pawps-basket] textarea {
	width: 100%;
	padding: 0.6rem 0.7rem;
	border: 1px solid var( --pawps-line );
	border-radius: 10px;
	font: inherit;
}

[data-pawps-basket] .btn,
[data-pawps-basket] button[type="submit"],
[data-pawps-basket] input[type="submit"] {
	padding: 0.75rem 1.3rem;
	border: 0;
	border-radius: 10px;
	background: var( --pawps-accent );
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

[data-pawps-basket] .btn-danger {
	background: #d1435b;
	padding: 0.3rem 0.6rem;
	border-radius: 8px;
	line-height: 1;
}

/* --- Checkout-Formular (Adresse) ----------------------------------------- */

.pawps-checkout-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem 1.25rem;
	max-width: 680px;
	margin-top: 1rem;
}

.pawps-checkout-form .pawps-field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	max-width: none;
}

.pawps-checkout-form .pawps-field--wide {
	grid-column: 1 / -1;
}

/* Direkte Kinder, die keine Feldgruppe sind (Vertrauenshinweis, Zahlungsart,
   Absende-Button), gehoeren ueber die ganze Breite. Ohne diese Regel belegen
   sie je eine einzelne Rasterzelle und stehen nebeneinander statt
   untereinander - die Zahlungsart landete so neben dem Vertrauenshinweis. */
.pawps-checkout-form > :not(.pawps-field) {
	grid-column: 1 / -1;
}

.pawps-checkout-form .pawps-field > label {
	font-size: 0.74rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var( --pawps-muted );
}

.pawps-checkout-form input,
.pawps-checkout-form select {
	width: 100%;
	padding: 0.65rem 0.75rem;
	border: 1px solid var( --pawps-line );
	border-radius: 10px;
	background: #fff;
	font: inherit;
}

.pawps-checkout-form input:focus,
.pawps-checkout-form select:focus {
	outline: none;
	border-color: var( --pawps-accent );
	box-shadow: 0 0 0 3px rgba( 45, 108, 223, 0.15 );
}

.pawps-inline {
	display: flex;
	gap: 0.6rem;
}

.pawps-inline > input {
	flex: 1;
}

.pawps-inline .pawps-nr {
	flex: none;
	width: 6rem;
}

.pawps-inline .pawps-zip {
	flex: none;
	width: 7rem;
}

.pawps-check {
	flex-direction: row;
	align-items: center;
	gap: 0.5rem;
	color: var( --pawps-ink );
	font-size: 0.95rem;
	cursor: pointer;
}

.pawps-check input {
	width: auto;
}

/* Datenschutz-Hinweis (Information, keine Zustimmung – daher kein Kaestchen). */
.pawps-privacy-note {
	margin: 0;
	color: var( --pawps-muted );
	font-size: 0.9rem;
}

.pawps-agb {
	margin-top: 0.4rem;
}

.pawps-agb summary {
	cursor: pointer;
	color: var( --pawps-accent );
	font-size: 0.9rem;
}

.pawps-agb__text {
	max-height: 220px;
	overflow-y: auto;
	margin-top: 0.6rem;
	padding: 0.9rem 1rem;
	border: 1px solid var( --pawps-line );
	border-radius: 10px;
	background: #fafafa;
	font-size: 0.85rem;
	line-height: 1.55;
	color: var( --pawps-muted );
}

.pawps-checkout-submit {
	grid-column: 1 / -1;
	justify-self: start;
	padding: 0.85rem 1.7rem;
	border: 0;
	border-radius: 10px;
	background: var( --pawps-accent );
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: filter 0.15s ease;
}

.pawps-checkout-submit:hover {
	filter: brightness( 1.06 );
}

.pawps-checkout-submit:disabled {
	opacity: 0.6;
	cursor: default;
}

@media ( max-width: 600px ) {
	.pawps-checkout-form {
		grid-template-columns: 1fr;
	}
}

/* --- Bestellbestaetigung ------------------------------------------------- */

.pawps-confirm {
	max-width: 560px;
	margin: 2rem auto;
	padding: 2.5rem 1.5rem;
	text-align: center;
}

.pawps-confirm__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	margin-bottom: 1rem;
	border-radius: 50%;
	background: #e7f6ec;
	color: #1f9d55;
	font-size: 2rem;
	line-height: 1;
}

.pawps-confirm__title {
	margin: 0 0 0.5rem;
	font-size: 1.5rem;
	font-weight: 600;
	text-wrap: balance;
}

.pawps-confirm__nr {
	margin: 0 0 0.75rem;
	font-variant-numeric: tabular-nums;
}

.pawps-confirm__hint {
	margin: 0;
	color: var( --pawps-muted );
}

/* --- Toast --------------------------------------------------------------- */

.pawps-toast {
	position: fixed;
	left: 50%;
	bottom: 1.5rem;
	transform: translate( -50%, 1rem );
	z-index: 100001;
	padding: 0.75rem 1.25rem;
	border-radius: 999px;
	background: #16181d;
	color: #fff;
	font-weight: 500;
	box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.3 );
	opacity: 0;
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.pawps-toast.is-visible {
	opacity: 1;
	transform: translate( -50%, 0 );
}

/* --- Responsiv ----------------------------------------------------------- */

@media ( max-width: 720px ) {
	.pawps-lb__stage {
		grid-template-columns: 1fr;
		gap: 0.75rem;
		max-height: 92vh;
		overflow-y: auto;
	}

	.pawps-lb__figure img {
		max-height: 55vh;
	}

	[data-pawps-basket] th:first-child,
	[data-pawps-basket] td:first-child {
		display: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.pawps-thumb,
	.pawps-thumb img,
	.pawps-listcard,
	.pawps-listcard img,
	.pawps-toast {
		transition: none;
	}
	.pawps-lb__add {
		transition: none;
	}
	.pawps-lb { animation: none; }
}

/* --- Dark-Theme des Themes respektieren (Karten-Grund) ------------------- */

@media ( prefers-color-scheme: dark ) {
	[data-pawps-gallery],
	[data-pawps-public-list],
	[data-pawps-basket] {
		--pawps-ink: #ececed;
		--pawps-muted: #9aa0aa;
		--pawps-line: #33363d;
		--pawps-card: #1c1e24;
		--pawps-disabled-fill: rgba( 255, 255, 255, 0.07 );
		--pawps-disabled-line: rgba( 255, 255, 255, 0.09 );
	}

	.pawps-page { background: #1c1e24; }
	#folder { background: #1c1e24; color: var( --pawps-ink ); }
}

/* --- Oeffentliche Galerie-Liste (eventList) ------------------------------- */
.pawps-listwrap { margin: 0 auto; }

.pawps-list {
	display: grid;
	/* auto-fit + Obergrenze statt 1fr: mit 1fr dehnen sich die Karten ueber die
	   ganze Zeile, wodurch eine einzelne Galerie riesig und eine halb gefuellte
	   letzte Zeile linksbuendig wirkte. So behalten die Karten ihre Groesse und
	   die Reihe wird zentriert - bei einer Galerie steht sie mittig, bei zwei
	   eben die zwei. min() haelt sie auf schmalen Bildschirmen im Rahmen. */
	grid-template-columns: repeat( auto-fit, minmax( min( 220px, 100% ), 320px ) );
	justify-content: center;
	gap: var( --pawps-gap );
}

/* --- Utilities (ersetzen Bootstrap text-right/-center) -------------------- */

/* Bewusst zusaetzlich auf die Plugin-Container gescoped. Die Basisregel fuer
   Warenkorb-Zellen (`[data-pawps-basket] th, [data-pawps-basket] td`) richtet
   links aus und hat Spezifitaet 0,1,1 - sie hat die ungescopten Utilities
   (0,1,0) stillschweigend geschlagen. Folge: SAEMTLICHE Preis- und
   Mengenspalten im Warenkorb standen linksbuendig, obwohl die Templates die
   Klassen setzen. Beim Aendern der Selektoren die Spezifitaet mitdenken -
   `CartQuantityAlignmentTest` rechnet sie nach. */
.pawps-right,
[data-pawps-gallery] .pawps-right,
[data-pawps-public-list] .pawps-right,
[data-pawps-basket] .pawps-right { text-align: right; }

.pawps-center,
[data-pawps-gallery] .pawps-center,
[data-pawps-public-list] .pawps-center,
[data-pawps-basket] .pawps-center { text-align: center; }

/* --- Buttons (ersetzen Bootstrap btn/btn-primary/btn-danger) -------------- */
.pawps-btn {
	padding: 0.7rem 1.4rem;
	border: 0;
	border-radius: 10px;
	background: var( --pawps-accent );
	color: #fff;
	font-weight: 600;
	cursor: pointer;
}

.pawps-btn:hover { filter: brightness( 1.06 ); }
.pawps-btn:disabled { opacity: 0.6; cursor: default; }

.pawps-remove {
	border: 0;
	border-radius: 8px;
	background: #d33a2c;
	color: #fff;
	width: 1.9rem;
	height: 1.9rem;
	line-height: 1;
	cursor: pointer;
}

.pawps-remove:hover { filter: brightness( 1.08 ); }

/* --- Warenkorb-Seite (warenkorbList) ------------------------------------- */
.pawps-cartpage__title,
.pawps-orderarea__title { margin: 0 0 1rem; }

.pawps-carttable {
	width: 100%;
	border-collapse: collapse;
}

.pawps-carttable th,
.pawps-carttable td {
	padding: 0.6rem 0.75rem;
	border-bottom: 1px solid var( --pawps-line );
	vertical-align: middle;
}

.pawps-carttable thead th {
	text-align: left;
	color: var( --pawps-muted );
	font-weight: 600;
}

/* Preise mit gleich breiten Ziffern: sonst wandern die Kommastellen, sobald
   ein Preis zweistellig wird, und die Spalte sieht unruhig aus. */
.pawps-carttable td.pawps-right,
.pawps-carttable__sums td {
	font-variant-numeric: tabular-nums;
}

.pawps-carttable #productList tr:nth-child( odd ) { background: var( --pawps-card ); }

.pawps-carttable img {
	max-width: 64px;
	height: auto;
	border-radius: 6px;
	cursor: pointer;
}

.pawps-carttable__sums td { border-bottom: 0; }

.pawps-orderarea { margin-top: 2.5rem; }

/* --- Zahlungsart-Auswahl ------------------------------------------------- */

/* Hatte bisher keine einzige Regel: der Browser zeichnete ein Default-
   Fieldset, und weil <label> inline ist, liefen Radio, Beschriftung und
   Beschreibung als ein Textfluss durcheinander. */
.pawps-payment {
	margin: 1.75rem 0 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.pawps-payment legend {
	padding: 0;
	margin-bottom: 0.6rem;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
	color: var( --pawps-muted );
}

/* Zwei Spalten: Radio links, Beschriftung UND Beschreibung rechts daneben
   gestapelt. Bei einspaltigem Fluss landet die Beschreibung unter dem Radio
   statt unter ihrer Beschriftung - genau das sah falsch aus. */
.pawps-payment__option {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 0.65rem;
	align-items: start;
	padding: 0.85rem 0.95rem;
	border: 1px solid var( --pawps-line );
	border-radius: 10px;
	background: var( --pawps-card );
	cursor: pointer;
	transition: border-color 0.15s ease;
}

.pawps-payment__option + .pawps-payment__option {
	margin-top: 0.5rem;
}

.pawps-payment__option:hover {
	border-color: var( --pawps-accent );
}

/* Gewaehlte Zahlart klar hervorheben (Aufschlag als Innenkontur, damit die
   Kachel nicht springt). */
.pawps-payment__option:has( input:checked ) {
	border-color: var( --pawps-accent );
	box-shadow: inset 0 0 0 1px var( --pawps-accent );
}

.pawps-payment__option input {
	margin: 0.2rem 0 0;
}

.pawps-payment__label {
	font-weight: 600;
}

.pawps-payment__hint {
	grid-column: 2;
	margin-top: 0.2rem;
	font-size: 0.85rem;
	line-height: 1.45;
	color: var( --pawps-muted );
}

/* --- Bankverbindung der Bestellbestaetigung ------------------------------ */

/* Ebenfalls ohne eigene Regeln: eine <dl> ohne Darstellung ist eine Folge
   eingerueckter Zeilen, in der Label und Wert nicht zusammenfinden. */
.pawps-confirm__bank {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.4rem 1.25rem;
	margin: 1rem 0 0;
	max-width: 34rem;
}

.pawps-confirm__bank dt {
	font-size: 0.9rem;
	color: var( --pawps-muted );
}

.pawps-confirm__bank dd {
	margin: 0;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* --- Detail-Ansicht (pictureDetails) ------------------------------------- */
.pawps-detail__image {
	margin: 1.25rem auto;
	max-width: 720px;
	text-align: center;
}

.pawps-detail__image img { max-width: 100%; height: auto; border-radius: var( --pawps-radius ); }

.pawps-addform {
	display: flex;
	gap: 0.6rem;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 1rem;
}

.pawps-addform__select,
.pawps-addform__qty {
	padding: 0.55rem 0.7rem;
	border: 1px solid var( --pawps-line );
	border-radius: 8px;
	background: #fff;
	color: var( --pawps-ink );
}

.pawps-addform__qty { width: 5rem; }
.pawps-addform__x { color: var( --pawps-muted ); }

@media ( prefers-color-scheme: dark ) {
	.pawps-addform__select,
	.pawps-addform__qty { background: #1c1e24; color: var( --pawps-ink ); }
	.pawps-carttable #productList tr:nth-child( odd ) { background: #1c1e24; }
}

/* --- Teilen-Button + Vertrauens-Zeile ------------------------------------ */
.pawps-share {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	color: var( --pawps-accent );
	cursor: pointer;
	text-decoration: underline;
}
.pawps-share:hover { text-decoration: none; }

.pawps-trust {
	margin: 0.6rem 0 1rem;
	font-size: 0.85rem;
	opacity: 0.75;
}

/* --- Produktsets (Bundles): Info in der Lightbox --------------------------- */

.pawps-lb__setinfo {
	margin: -0.2rem 0 0.6rem;
	font-size: 0.86rem;
	opacity: 0.85;
	line-height: 1.35;
}

/* --- Set-Konfigurator (Motiv-Zuordnung je Produkt) ------------------------- */

.pawps-setcfg {
	position: fixed;
	inset: 0;
	z-index: 100010;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: rgba( 0, 0, 0, 0.6 );
}

.pawps-setcfg__box {
	position: relative;
	width: min( 820px, 100% );
	max-height: 90vh;
	overflow: auto;
	background: #fff;
	color: #111;
	border-radius: 14px;
	padding: 1.4rem 1.4rem 1.1rem;
	box-shadow: 0 20px 60px rgba( 0, 0, 0, 0.35 );
}

.pawps-setcfg__close {
	position: absolute;
	top: 0.5rem;
	right: 0.6rem;
	border: 0;
	background: transparent;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	color: #666;
}

.pawps-setcfg__title {
	margin: 0 1.5rem 0.3rem 0;
	font-size: 1.15rem;
}

.pawps-setcfg__hint {
	margin: 0 0 0.9rem;
	font-size: 0.9rem;
	opacity: 0.8;
}

/* Grosse Vorschau des Fotos am aktiven Produkt. */
.pawps-setcfg__preview {
	margin-bottom: 0.7rem;
	text-align: center;
	background: rgba( 0, 0, 0, 0.04 );
	border-radius: 10px;
	padding: 0.4rem;
}

.pawps-setcfg__preview img {
	max-width: 100%;
	max-height: 34vh;
	object-fit: contain;
	border-radius: 6px;
}

/* Produktzeilen: je Produkt des Sets eine Zeile mit zugeordnetem Foto. */
.pawps-setcfg__products {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-bottom: 0.6rem;
}

.pawps-setrow {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	width: 100%;
	border: 2px solid rgba( 0, 0, 0, 0.12 );
	border-radius: 10px;
	background: #fafafa;
	padding: 0.4rem 0.6rem;
	cursor: pointer;
	text-align: left;
	font: inherit;
}

.pawps-setrow.is-active {
	border-color: var( --pawps-accent );
	background: #fff;
}

.pawps-setrow__img {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: 6px;
	overflow: hidden;
	background: rgba( 0, 0, 0, 0.06 );
}

.pawps-setrow__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pawps-setrow__name {
	flex: 1 1 auto;
	font-weight: 600;
	font-size: 0.9rem;
}

.pawps-setrow__change {
	flex: 0 0 auto;
	font-size: 0.8rem;
	color: var( --pawps-accent );
	font-weight: 600;
}

.pawps-setcfg__count {
	font-size: 0.85rem;
	font-weight: 600;
	margin-bottom: 0.6rem;
}

.pawps-setcfg__count.is-over {
	color: #c0392b;
}

.pawps-setcfg__pick {
	font-size: 0.85rem;
	font-weight: 600;
	margin-bottom: 0.5rem;
	color: var( --pawps-accent );
}

/* Foto-Auswahlstreifen. */
.pawps-setcfg__strip {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 108px, 1fr ) );
	gap: 0.5rem;
	max-height: 46vh;
	overflow: auto;
	padding: 0.4rem;
	border: 1px solid rgba( 0, 0, 0, 0.1 );
	border-radius: 10px;
	margin-bottom: 0.9rem;
}

.pawps-setcfg__thumb {
	position: relative;
	border: 0;
	padding: 0;
	background: transparent;
	cursor: pointer;
	border-radius: 6px;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	outline: 2px solid transparent;
	outline-offset: 2px;
	transition: outline-color 0.12s ease;
}

.pawps-setcfg__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Bereits verwendetes Foto: umrandet + Haken. */
.pawps-setcfg__thumb.is-used {
	outline-color: var( --pawps-accent );
}

.pawps-setcfg__thumb-check {
	position: absolute;
	top: 4px;
	right: 4px;
	display: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var( --pawps-accent );
	color: #fff;
	font-size: 12px;
	line-height: 20px;
	text-align: center;
	font-weight: 700;
}

.pawps-setcfg__thumb.is-used .pawps-setcfg__thumb-check {
	display: block;
}

/* Foto des aktuell bearbeiteten Produkts zusaetzlich hervorheben. */
.pawps-setcfg__thumb.is-current {
	outline-color: var( --pawps-accent );
	outline-width: 3px;
}

/* Aktionen stehen nun direkt unter den Artikeln (vor der Foto-Auswahl);
   der Trenner grenzt Set-Zusammenstellung von der Foto-Auswahl ab. */
.pawps-setcfg__actions {
	display: flex;
	justify-content: flex-end;
	gap: 0.6rem;
	margin: 0.2rem 0 1rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid rgba( 0, 0, 0, 0.1 );
}

/* Unterordner-Auswahl (wie in der Galerie), auf die helle Box abgestimmt. */
.pawps-setcfg__folders {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: 0.7rem;
}

.pawps-setcfg__folders:empty {
	display: none;
}

.pawps-setcfg__folder {
	padding: 0.4rem 0.85rem;
	border: 1px solid rgba( 0, 0, 0, 0.18 );
	border-radius: 999px;
	background: #fff;
	color: #333;
	font: inherit;
	font-size: 0.85rem;
	cursor: pointer;
	transition: all 0.15s ease;
}

.pawps-setcfg__folder:hover {
	border-color: var( --pawps-accent );
	color: var( --pawps-accent );
}

.pawps-setcfg__folder.is-active {
	background: var( --pawps-accent );
	border-color: var( --pawps-accent );
	color: #fff;
}

/* Seitenblaettern der Foto-Auswahl. */
.pawps-setcfg__pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	justify-content: center;
	margin-bottom: 0.4rem;
}

.pawps-setcfg__pagination:empty {
	display: none;
}

.pawps-setcfg__pagebtn {
	min-width: 2.4rem;
	padding: 0.4rem 0.6rem;
	border: 1px solid rgba( 0, 0, 0, 0.18 );
	border-radius: 999px;
	background: #fff;
	color: #333;
	font: inherit;
	line-height: 1;
	cursor: pointer;
	transition: all 0.15s ease;
}

.pawps-setcfg__pagebtn:hover {
	border-color: var( --pawps-accent );
	color: var( --pawps-accent );
}

.pawps-setcfg__pagebtn.is-active {
	background: var( --pawps-accent );
	border-color: var( --pawps-accent );
	color: #fff;
}

.pawps-setcfg__cancel,
.pawps-setcfg__confirm {
	padding: 0.7rem 1.1rem;
	border-radius: 10px;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.pawps-setcfg__cancel {
	border: 1px solid rgba( 0, 0, 0, 0.2 );
	background: transparent;
	color: #333;
}

.pawps-setcfg__confirm {
	border: 0;
	background: var( --pawps-accent );
	color: #fff;
}

.pawps-setcfg__confirm:disabled {
	opacity: 0.5;
	cursor: default;
}

/* --- Warenkorb: Aufstellung eines Sets mit Foto je Bestandteil ------------- */

.pawps-basket-setcaption {
	margin-top: 0.35rem;
	font-size: 0.8rem;
	font-weight: 600;
	opacity: 0.8;
}

.pawps-basket-setitems {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.3rem;
}

.pawps-basket-setitem {
	width: 70px;
	text-align: center;
}

.pawps-basket-setitem__img {
	display: block;
	width: 70px;
	height: 70px;
	border-radius: 6px;
	overflow: hidden;
	background: rgba( 0, 0, 0, 0.06 );
}

.pawps-basket-setitem__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pawps-basket-setitem__label {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.72rem;
	line-height: 1.2;
}

/* --- QR-Code-Veranstaltungen (Schul-/Kindergartenfotografie) -------------
   Die .pawps-codeform-Varianten geben den serverseitig gerenderten Formularen
   (Galeriecode, Gastkennwort) dieselbe Karten-Optik. Vorher waren das nackte
   <form>-Elemente mit der Adminklasse "button-primary", die im Frontend gar
   nicht existiert - entsprechend sahen sie aus wie Browser-Standard. */
.pawps-qr {
	margin: 0 0 1.25rem;
}
.pawps-qr__form,
.pawps-codeform {
	max-width: 32rem;
	margin: 0 auto;
	padding: 1.5rem;
	border: 1px solid rgba( 0, 0, 0, 0.12 );
	border-radius: 10px;
	background: rgba( 0, 0, 0, 0.02 );
	text-align: center;
}
.pawps-qr__title,
.pawps-codeform__title {
	margin: 0 0 0.5rem;
	font-size: 1.2rem;
}
.pawps-qr__intro,
.pawps-codeform__intro {
	margin: 0 0 1rem;
	font-size: 0.92rem;
	line-height: 1.4;
	opacity: 0.85;
}
.pawps-qr__row,
.pawps-codeform__row {
	display: flex;
	gap: 0.5rem;
	justify-content: center;
	flex-wrap: wrap;
}
.pawps-qr__input,
.pawps-codeform__input {
	flex: 1 1 12rem;
	min-width: 0;
	padding: 0.6rem 0.75rem;
	font-size: 1rem;
	border: 1px solid rgba( 0, 0, 0, 0.25 );
	border-radius: 6px;
}
.pawps-qr__submit,
.pawps-qr__add,
.pawps-qr__reset,
.pawps-codeform__submit {
	padding: 0.6rem 1.1rem;
	font-size: 0.95rem;
	border: 0;
	border-radius: 6px;
	cursor: pointer;
	background: #1a1a1a;
	color: #fff;
}
.pawps-qr__reset {
	background: transparent;
	color: inherit;
	border: 1px solid rgba( 0, 0, 0, 0.25 );
}
.pawps-qr__error,
.pawps-codeform__error {
	margin: 0.75rem 0 0;
	color: #b00020;
	font-size: 0.9rem;
}
.pawps-qr__bar {
	display: flex;
	gap: 0.5rem;
	justify-content: flex-end;
	flex-wrap: wrap;
	margin-bottom: 0.5rem;
}

/* Hinweis an Fotos, die der Fotograf erst nach der Bestellung bearbeitet.
   Informierend, nicht warnend: der Kunde soll wissen, warum es etwas laenger
   dauert - nicht abgeschreckt werden. */
.pawps-lb__unedited {
	margin: -0.2rem 0 1rem;
	padding: 0.6rem 0.8rem;
	/* Auf dem dunklen Lightbox-Panel: helle Kontur/Fuellung, sonst waere die
	   Box dunkel auf dunkel praktisch unsichtbar (wie .pawps-lb__tiers). */
	border: 1px solid rgba( 255, 255, 255, 0.14 );
	border-left: 3px solid var( --pawps-accent );
	border-radius: 10px;
	background: rgba( 255, 255, 255, 0.05 );
	font-size: 0.86rem;
	line-height: 1.45;
}

.pawps-cart-unedited {
	margin: 0.9rem 0 0;
	padding: 0.7rem 0.9rem;
	border: 1px solid var( --pawps-line );
	border-left: 3px solid var( --pawps-accent );
	border-radius: 10px;
	background: var( --pawps-card );
	color: var( --pawps-ink );
	font-size: 0.92rem;
	line-height: 1.45;
}

/* Leerer Warenkorb: ruhige Aussage statt leerer Tabelle mit Null-Summen. */
.pawps-cart-empty {
	margin: 1.5rem 0;
	padding: 1.1rem 1.2rem;
	border: 1px solid var( --pawps-line );
	border-radius: var( --pawps-radius );
	background: var( --pawps-card );
	color: var( --pawps-muted );
	font-size: 1rem;
}

/* --- Kundenkarten (Schuelerausweise): Konfigurator ----------------------- */

/* Aufbau bewusst wie der Set-Konfigurator, damit beide Dialoge gleich wirken.
   Zweispaltig: links die Eingaben, rechts die serverseitig gerenderte
   Vorschau - so sieht der Kunde beim Tippen, was auf der Karte landet. */
.pawps-cardcfg {
	position: fixed;
	inset: 0;
	z-index: 100010;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: rgba( 0, 0, 0, 0.6 );
}

.pawps-cardcfg__box {
	position: relative;
	width: min( 820px, 100% );
	max-height: 90vh;
	overflow: auto;
	background: #fff;
	color: #111;
	border-radius: 14px;
	padding: 1.4rem 1.4rem 1.1rem;
	box-shadow: 0 20px 60px rgba( 0, 0, 0, 0.35 );
}

.pawps-cardcfg__close {
	position: absolute;
	top: 0.5rem;
	right: 0.6rem;
	border: 0;
	background: none;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	color: #555;
}

.pawps-cardcfg__title {
	margin: 0 1.5rem 0.2rem 0;
	font-size: 1.15rem;
}

.pawps-cardcfg__hint {
	margin: 0 0 1rem;
	color: #555;
	font-size: 0.9rem;
}

.pawps-cardcfg__main {
	display: grid;
	/* Die Vorschau bekommt etwas mehr Breite als die Eingaben - sie ist der
	   Grund fuer den Dialog, und die Karte ist im Querformat entsprechend
	   platzhungrig. */
	grid-template-columns: minmax( 0, 0.85fr ) minmax( 0, 1.15fr );
	gap: 1.4rem;
	align-items: start;
}

/* Auf schmalen Schirmen untereinander - die Vorschau zuerst, damit sie beim
   Tippen auf dem Handy nicht unter der Tastatur verschwindet. */
@media ( max-width: 640px ) {
	.pawps-cardcfg__main {
		grid-template-columns: minmax( 0, 1fr );
	}

	.pawps-cardcfg__preview {
		order: -1;
	}
}

.pawps-cardfield {
	display: block;
	margin-bottom: 0.85rem;
}

.pawps-cardfield__name {
	display: block;
	margin-bottom: 0.2rem;
	font-weight: 600;
	font-size: 0.9rem;
}

.pawps-cardfield__input {
	width: 100%;
	box-sizing: border-box;
	padding: 0.45rem 0.6rem;
	border: 1px solid #bbb;
	border-radius: 8px;
	font-size: 1rem;
}

.pawps-cardfield.is-invalid .pawps-cardfield__input {
	border-color: #c0392b;
}

.pawps-cardfield__error {
	display: block;
	min-height: 1.1em;
	margin-top: 0.15rem;
	color: #c0392b;
	font-size: 0.8rem;
}

.pawps-cardcfg__preview {
	margin: 0;
	text-align: center;
}

.pawps-cardcfg__preview img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.2 );
	background: #f3f3f3;
}

.pawps-cardcfg__previewnote {
	margin-top: 0.4rem;
	color: #666;
	font-size: 0.78rem;
}

.pawps-cardcfg__pages {
	display: flex;
	gap: 0.4rem;
	margin: 0.8rem 0 0;
}

.pawps-cardcfg__page {
	padding: 0.3rem 0.8rem;
	border: 1px solid #bbb;
	border-radius: 999px;
	background: #fff;
	cursor: pointer;
	font-size: 0.85rem;
}

.pawps-cardcfg__page.is-active {
	border-color: #111;
	background: #111;
	color: #fff;
}

.pawps-cardcfg__actions {
	display: flex;
	justify-content: flex-end;
	gap: 0.6rem;
	margin-top: 1rem;
}

.pawps-cardcfg__cancel,
.pawps-cardcfg__confirm {
	padding: 0.5rem 1rem;
	border-radius: 8px;
	border: 1px solid #bbb;
	background: #fff;
	cursor: pointer;
}

.pawps-cardcfg__confirm {
	border-color: #111;
	background: #111;
	color: #fff;
	font-weight: 600;
}

.pawps-cardcfg__confirm:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Angaben einer Kundenkarte im Warenkorb - der Kunde muss vor dem Bestellen
   pruefen koennen, was gedruckt wird. */
.pawps-basket-cardfields {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.1rem 0.5rem;
	margin: 0.4rem 0 0;
	font-size: 0.85rem;
	color: #555;
}

.pawps-basket-cardfields dt {
	font-weight: 600;
}

.pawps-basket-cardfields dd {
	margin: 0;
}