/**
 * Styles for the Widerruf form widget.
 *
 * Loaded as a document-level stylesheet (ServiceProvider -> addStyleTemplate -> WidgetStyles.twig),
 * NOT as an inline <style> inside the widget HTML. The plentyShop Vue storefront strips inline
 * <style> nodes inside widget DOM during hydration, which made the form render styled for a moment
 * and then "go primitive". A stylesheet in the document head is outside the SPA-managed DOM and
 * applies reliably across every shop/theme.
 */
.widget-withdrawal-form { max-width: 560px; }
.widget-withdrawal-form label { display: block; margin: 12px 0 4px; font-weight: 600; }
.widget-withdrawal-form input,
.widget-withdrawal-form textarea { width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid #c7cfd6; border-radius: 6px; }
.widget-withdrawal-form .wf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.widget-withdrawal-form .wf-widerruf-message { margin: 12px 0; padding: 12px 14px; border-radius: 6px; }
.widget-withdrawal-form .wf-widerruf-message.ok { background: #e8f5ec; border: 1px solid #b6e0c2; color: #1e7a3c; }
.widget-withdrawal-form .wf-widerruf-message.err { background: #fdecea; border: 1px solid #f5c6c2; color: #b3261e; }
.widget-withdrawal-form button { margin-top: 24px; }

/**
 * Button fallback. Wrapped in :where() so the selector has ZERO specificity: the shop theme's own
 * .btn / .btn-primary rules win wherever they exist (so the button keeps matching the website),
 * but in a theme that doesn't define those classes the button still looks finished instead of a
 * raw browser default.
 */
:where(.widget-withdrawal-form) button { padding: 10px 18px; border: 0; border-radius: 6px; background: #006ec8; color: #fff; font: inherit; cursor: pointer; }
:where(.widget-withdrawal-form) button:hover { filter: brightness(0.95); }