/* Themewerk Gutscheine – Shop. Farben und Schriften kommen aus dem Theme, das funktioniert auf hellen und dunklen Seiten. */
.twg-shop {
	--twg-accent: var(--wp--preset--color--accent, #b8965a);
	--twg-line: color-mix(in srgb, currentColor 22%, transparent);
	--twg-soft: color-mix(in srgb, currentColor 6%, transparent);
	--twg-radius: 4px;
	max-width: 1180px;
	margin-inline: auto;
}
.twg-shop *, .twg-shop *::before, .twg-shop *::after { box-sizing: border-box; }
.twg-shop--note p, .twg-alert { padding: 14px 18px; border: 1px solid var(--twg-line); border-left: 3px solid var(--twg-accent); background: var(--twg-soft); border-radius: var(--twg-radius); }
.twg-alert { margin: 0 0 24px; }
.twg-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Gegen Themes und Filter, die in fremde Ausgaben eingreifen: eingeschobene Absätze und Umbrüche wirken nicht,
   die versteckten Auswahlfelder belegen keinen Platz, Kacheln und Bilder behalten ihre Größe. */
.twg-shop :is(.twg-designs, .twg-amounts) > p { display: contents !important; }
.twg-shop :is(.twg-designs, .twg-amounts) br, .twg-shop :is(.twg-designs, .twg-amounts) > :not(label):not(p) { display: none !important; }
.twg-shop :is(.twg-design, .twg-amount) > input[type="radio"] { position: absolute !important; inset: 0 auto auto 0 !important; width: 1px !important; height: 1px !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; opacity: 0 !important; clip-path: inset(50%) !important; appearance: none !important; pointer-events: none !important; }
.twg-shop .twg-design { display: grid !important; grid-template-rows: auto auto; align-content: start; gap: 8px !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; float: none !important; }
.twg-shop .twg-amount { display: inline-block !important; margin: 0 !important; padding: 0 !important; }
.twg-shop .twg-design svg, .twg-shop .twg-preview svg { display: block !important; width: 100% !important; max-width: none !important; height: auto !important; margin: 0 !important; }

.twg-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.twg-steps { display: grid; gap: 34px; min-width: 0; }
/* Feste Plätze: Fügt ein Theme oder Plugin etwas ins Formular ein, verschiebt es Formular und Vorschau nicht. */
.twg-form > .twg-steps { grid-column: 1 !important; grid-row: 1 !important; }
.twg-form > .twg-aside { grid-column: 2 !important; grid-row: 1 !important; }
.twg-form > :not(.twg-steps):not(.twg-aside) { grid-column: 1 / -1; grid-row: 2; }
.twg-step { margin: 0; padding: 0; border: 0; min-width: 0; }
.twg-step legend { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 0; font-family: var(--wp--preset--font-family--heading, inherit); font-size: 1.35rem; line-height: 1.2; }
.twg-step__num { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border: 1px solid var(--twg-accent); border-radius: 50%; color: var(--twg-accent); font-family: var(--wp--preset--font-family--body, inherit); font-size: .85rem; font-weight: 600; }

/* Designs */
.twg-designs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.twg-design { position: relative; display: grid; gap: 8px; cursor: pointer; }
.twg-design input { position: absolute; opacity: 0; pointer-events: none; }
.twg-design__name { font-size: .92rem; }
.twg-design input:checked + .twg-design__img { outline: 2px solid var(--twg-accent); outline-offset: 3px; }
.twg-design input:focus-visible + .twg-design__img { outline: 2px dashed var(--twg-accent); outline-offset: 3px; }

/* Beträge */
.twg-amounts { display: flex; flex-wrap: wrap; gap: 10px; }
.twg-amount { position: relative; cursor: pointer; }
.twg-amount input { position: absolute; opacity: 0; pointer-events: none; }
.twg-amount span { display: inline-block; min-width: 92px; padding: 11px 16px; border: 1px solid var(--twg-line); border-radius: var(--twg-radius); text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; transition: border-color .2s, background-color .2s; }
.twg-amount input:checked + span { border-color: var(--twg-accent); background: color-mix(in srgb, var(--twg-accent) 14%, transparent); font-weight: 600; }
.twg-amount input:focus-visible + span { outline: 2px dashed var(--twg-accent); outline-offset: 2px; }

/* Felder */
.twg-field { display: grid; gap: 6px; margin: 0 0 16px; }
.twg-field[hidden] { display: none; }
.twg-field label { font-size: .92rem; }
.twg-req { color: var(--twg-accent); }
.twg-opt { opacity: .7; font-size: .85em; }
.twg-field input, .twg-field textarea { width: 100%; padding: 11px 13px; border: 1px solid var(--twg-line); border-radius: var(--twg-radius); background: var(--twg-soft); color: inherit; font: inherit; }
.twg-field input:focus, .twg-field textarea:focus { outline: 2px solid var(--twg-accent); outline-offset: 0; border-color: transparent; }
.twg-field--custom input { max-width: 200px; }
.twg-count { justify-self: end; font-size: .8rem; opacity: .65; }
.twg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.twg-send { display: grid; gap: 8px; margin: 4px 0 16px; }
.twg-send__q { margin: 0; font-size: .92rem; }
.twg-send label, .twg-check { display: flex; gap: 10px; align-items: baseline; cursor: pointer; }
.twg-send input, .twg-check input { accent-color: var(--twg-accent); flex: none; }
.twg-check { margin: 0 0 12px; }
.twg-check.is-missing { outline: 2px solid #c0392b; outline-offset: 6px; border-radius: 2px; }
.twg-terms-hint { margin: 0 0 14px; padding: 10px 14px; border-left: 3px solid #c0392b; border-radius: var(--twg-radius); background: rgb(192 57 43 / .1); font-size: .92rem; }
.twg-terms-hint[hidden] { display: none; }
/* Grau, solange der Haken fehlt: !important gegen Button-Farben aus Themes */
.twg-shop .twg-submit.is-locked { background: #8f8f8f !important; border-color: #8f8f8f !important; color: #fff !important; box-shadow: none !important; cursor: not-allowed; opacity: .8; }
.twg-small { font-size: .85rem; opacity: .8; }
.twg-invoice { margin: 4px 0 0; padding: 14px 16px 2px; border: 1px dashed var(--twg-line); border-radius: var(--twg-radius); }
.twg-invoice__note { margin: 0 0 10px; font-size: .92rem; }
.twg-invoice .twg-field { margin-top: 4px; }
.twg-thanks__invoice { margin: 14px 0 0; }

.twg-step--end { display: grid; gap: 14px; }
.twg-pay { padding: 16px 18px; border: 1px solid var(--twg-line); border-radius: var(--twg-radius); background: var(--twg-soft); }
.twg-pay p { margin: 0; }
.twg-pay__title { margin-bottom: 4px !important; font-weight: 600; }
.twg-total { margin: 4px 0 0; font-size: 1.15rem; }
.twg-total__value { font-variant-numeric: tabular-nums; }
.twg-submit { cursor: pointer; }
.twg-submit[disabled] { opacity: .6; cursor: progress; }

/* Vorschau: das SVG kommt vom Server, aus demselben Layout wie das PDF */
.twg-aside { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + 110px); min-width: 0; }
.twg-aside__label { margin: 0 0 10px; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.twg-aside__note { margin: 12px 0 0; font-size: .8rem; opacity: .7; }
.twg-preview { line-height: 0; transition: opacity .2s; }
.twg-preview.is-loading { opacity: .8; }
.twg-preview svg { width: 100%; max-height: 72vh; height: auto; border-radius: 2px; box-shadow: 0 18px 50px rgb(0 0 0 / .28); }
.twg-design__img { display: block; line-height: 0; border-radius: 2px; outline: 1px solid var(--twg-line); outline-offset: 0; transition: outline-color .2s, outline-offset .2s, transform .2s; }
.twg-design__img svg { width: 100%; height: auto; display: block; border-radius: 2px; }
.twg-design:hover .twg-design__img { transform: translateY(-2px); }

/* Danke */
.twg-thanks { max-width: 720px; margin-inline: auto; padding: clamp(22px, 4vw, 40px); border: 1px solid var(--twg-line); border-top: 3px solid var(--twg-accent); border-radius: var(--twg-radius); background: var(--twg-soft); }
.twg-thanks__title { margin-top: 0; font-family: var(--wp--preset--font-family--heading, inherit); font-size: 1.6rem; }
.twg-bank { display: grid; grid-template-columns: max-content 1fr; gap: 8px 22px; margin: 22px 0; }
.twg-bank dt { opacity: .75; }
.twg-bank dd { margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }

@media (max-width: 860px) {
	.twg-form { grid-template-columns: 1fr; }
	.twg-aside { position: static; order: -1; }
	.twg-form > .twg-aside { grid-column: 1 !important; grid-row: 1 !important; }
	.twg-form > .twg-steps { grid-column: 1 !important; grid-row: 2 !important; }
	.twg-form > :not(.twg-steps):not(.twg-aside) { grid-row: 3; }
	.twg-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.twg-shop * { transition: none !important; }
}