/* Widerrufsformular — schlichte Gestaltung passend zum SmartCheckout: dünne Linien, gedämpfte Beschriftungen, Farbe vom Theme */

#wpsg_revocation_button, #wpsg_revocation_dialog, .wpsg_revocation_product_button, .wpsg_revocation_page, .wpsg_mod_kundenverwaltung_order { --rv-line:rgba(127, 127, 127, 0.35); --rv-field-border:1px solid rgba(127, 127, 127, 0.9); --rv-line-soft:rgba(127, 127, 127, 0.2); --rv-flat:rgba(127, 127, 127, 0.08); --rv-error:#b3261e; --rv-success:#2e7d32; --rv-radius:3px; }
/* Feldränder brauchen 3:1 (WCAG 1.4.11, K76): der Feldrand des Themes, sonst ein Grau, das auf hellem und dunklem Grund reicht; den Dialog färbt wpsg-theme.css */
.wpsg_revocation_page { --rv-field-border:var(--wpsg-field-border, 1px solid rgba(127, 127, 127, 0.9)); }

/* Button am Produkt (Produkttemplate, SmartCheckout) */
.wpsg_revocation_product_button { display:inline-flex; align-items:center; gap:0.4706em; width:auto; padding:0.4118em 0.8235em; border:1px solid var(--rv-line); border-radius:var(--rv-radius); background:none; color:inherit; font-size:0.85em; line-height:1.2; cursor:pointer; user-select:none; transition:background-color 0.15s ease-out, border-color 0.15s ease-out; }
.wpsg_revocation_product_button, #wpsg_revocation_button, #wpsg_revocation_dialog .inner > .header .close, .wpsg_revocation_order_product_open { margin:0; font-family:inherit; text-align:left; -webkit-appearance:none; appearance:none; }
/* Seit 4.6.1 echte Knöpfe (K50): Knopfregeln der Themes auf button zurücksetzen, damit sie aussehen wie zuvor als div */
.wpsg_revocation_product_button.wpsg_revocation_product_button, .wpsg_revocation_order_product_open.wpsg_revocation_order_product_open, #wpsg_revocation_button { min-height:0; box-shadow:none; font-weight:inherit; letter-spacing:inherit; text-transform:none; text-shadow:none; }
.wpsg_revocation_product_button.wpsg_revocation_product_button { padding:0.4118em 0.8235em; border:1px solid var(--rv-line); border-radius:var(--rv-radius); background:none; color:inherit; font-size:0.85em; line-height:1.2; }
.wpsg_revocation_product_button.wpsg_revocation_product_button:focus, .wpsg_revocation_product_button.wpsg_revocation_product_button:active { background:none; color:inherit; border-color:var(--rv-line); }
.wpsg_revocation_product_button.wpsg_revocation_product_button:hover { background:var(--rv-flat); color:inherit; border-color:currentColor; }
.wpsg_revocation_order_product_open.wpsg_revocation_order_product_open, .wpsg_revocation_order_product_open.wpsg_revocation_order_product_open:hover, .wpsg_revocation_order_product_open.wpsg_revocation_order_product_open:focus { padding:0; border:0; border-radius:0; background:none; color:inherit; font-size:inherit; line-height:inherit; }
#wpsg_revocation_button { line-height:inherit; }
#wpsg_revocation_button:hover, #wpsg_revocation_button:focus, #wpsg_revocation_button:active { background-color:#FFFFFF; color:#1d1d1d; box-shadow:0 2px 10px rgba(0, 0, 0, 0.08); }
#wpsg_revocation_dialog .inner > .header .close:hover, #wpsg_revocation_dialog .inner > .header .close:focus { background:none; color:inherit; box-shadow:none; }
#wpsg_revocation_dialog .inner > .header .close, .wpsg_revocation_order_product_open { padding:0; border:0; background:none; }
.wpsg_revocation_order_product_open { color:inherit; font-size:inherit; line-height:inherit; cursor:pointer; text-decoration:underline; }
.wpsg_revocation_product_button:hover { background:var(--rv-flat); border-color:currentColor; }
.wpsg_revocation_product_button > svg { flex:0 0 16px; width:16px; height:16px; fill:currentColor; opacity:0.7; }
/* Doppelte Klasse, damit Theme-Regeln wie ".entry-content p { margin-bottom:… }" nicht in den Button durchschlagen */
.wpsg_revocation_product_button .wpsg_revocation_product_button_text { margin:0; padding:0; font-size:inherit; line-height:inherit; color:inherit; text-align:left; white-space:nowrap; }

/* Flyout am rechten Bildschirmrand, im Ruhezustand ist nur das Symbol sichtbar */
#wpsg_revocation_button { position:fixed; right:0; top:25%; z-index:10; display:flex; align-items:center; gap:0.6667em; flex-wrap:nowrap; padding:0.6667em 1em 0.6667em 0.6667em; border:1px solid var(--rv-line); border-right:0; border-radius:var(--rv-radius) 0 0 var(--rv-radius); background-color:#FFFFFF; color:#1d1d1d; font-size:0.9em; box-shadow:0 2px 10px rgba(0, 0, 0, 0.08); cursor:pointer; transform:translateX(calc(100% - (26px + 1.3333em))); transition:transform 0.3s ease-out; }
#wpsg_revocation_button:hover, #wpsg_revocation_button:focus-within, #wpsg_revocation_button:focus-visible { transform:translateX(0); }
#wpsg_revocation_button svg { flex:0 0 26px; width:26px; height:26px; fill:currentColor; opacity:0.8; }
#wpsg_revocation_button span { white-space:nowrap; }

/* Dialog */
/* Geschlossen unsichtbar, nicht nur inert: Die Lightbox des Kerns nimmt allen Kindern von body das inert; visibility erst nach dem Ausblenden */
#wpsg_revocation_dialog { position:fixed; left:0; top:0; z-index:100000; display:flex; align-items:center; justify-content:center; width:100vw; height:100vh; padding:1em; box-sizing:border-box; background-color:rgba(0, 0, 0, 0.45); opacity:0; pointer-events:none; visibility:hidden; transition:opacity 0.2s ease-out, visibility 0s linear 0.2s; }
#wpsg_revocation_dialog.visible { opacity:1; pointer-events:all; visibility:visible; transition:opacity 0.2s ease-out, visibility 0s; }
#wpsg_revocation_dialog * { box-sizing:border-box; }
#wpsg_revocation_dialog .inner { position:relative; display:flex; flex-direction:column; width:100%; max-width:640px; max-height:calc(100vh - 2em); padding:1.5em; border-radius:var(--rv-radius); background-color:#FFFFFF; color:#1d1d1d; box-shadow:0 10px 40px rgba(0, 0, 0, 0.2); }
#wpsg_revocation_dialog .inner > .header { display:flex; flex:0 0 auto; align-items:center; justify-content:space-between; gap:0.9091em; padding-bottom:0.9091em; border-bottom:1px solid var(--rv-line-soft); font-size:1.1em; font-weight:600; line-height:1.3; }
#wpsg_revocation_dialog .inner > .header .close { display:flex; align-items:center; justify-content:center; width:28px; height:28px; color:inherit; opacity:0.6; cursor:pointer; transition:opacity 0.15s ease-out; }
#wpsg_revocation_dialog .inner > .header .close:hover { opacity:1; }
#wpsg_revocation_dialog .inner > .header .close svg { width:20px; height:20px; fill:currentColor; }
#wpsg_revocation_dialog .inner > .content { flex:1 1 auto; min-height:0; overflow-y:auto; margin:1em 0; }
#wpsg_revocation_dialog .inner > .footer { display:flex; flex:0 0 auto; align-items:center; justify-content:flex-end; gap:0.75em; padding-top:1em; border-top:1px solid var(--rv-line-soft); }
#wpsg_revocation_dialog .inner > .loading { position:absolute; left:0; top:0; z-index:2; display:flex; align-items:center; justify-content:center; width:100%; height:100%; border-radius:var(--rv-radius); background-color:rgba(255, 255, 255, 0.7); opacity:0; pointer-events:none; transition:opacity 0.2s ease-out; }
#wpsg_revocation_dialog.loading > .inner > .loading { opacity:1; pointer-events:all; }
/* Ladesymbol als SVG statt ajax-loader.gif: scharf auf jedem Display; Grau wie bisher, die Ladefläche ist immer hell */
#wpsg_revocation_dialog .wpsg_revocation_loader rect { fill:#777777; opacity:0.35; animation:wpsg_rv_loader 0.9s ease-in-out infinite; }
#wpsg_revocation_dialog .wpsg_revocation_loader rect:nth-child(2) { animation-delay:0.15s; }
#wpsg_revocation_dialog .wpsg_revocation_loader rect:nth-child(3) { animation-delay:0.3s; }
@keyframes wpsg_rv_loader { 0%, 100% { opacity:0.35; } 50% { opacity:1; } }
@media (prefers-reduced-motion: reduce) { #wpsg_revocation_dialog .wpsg_revocation_loader rect { animation:none; } }

/* Absende-Button im Dialog und auf der Formularseite */
#wpsg_revocation_dialog .wpsg_revocation_button_submit, .wpsg_revocation_page .wpsg_revocation_page_submit_wrap button, .wpsg_revocation_page .wpsg_revocation_page_submit_wrap input[type="submit"] { display:inline-flex; align-items:center; justify-content:center; min-height:0; margin:0; padding:0.65em 1.1em; border:1px solid currentColor; border-radius:var(--rv-radius); background:none; color:inherit; font:inherit; font-weight:600; line-height:1.2; text-shadow:none; box-shadow:none; cursor:pointer; transition:background-color 0.15s ease-out; }
#wpsg_revocation_dialog .wpsg_revocation_button_submit[hidden] { display:none; }
#wpsg_revocation_dialog .wpsg_revocation_button_submit:hover, .wpsg_revocation_page .wpsg_revocation_page_submit_wrap button:hover, .wpsg_revocation_page .wpsg_revocation_page_submit_wrap input[type="submit"]:hover { background:var(--rv-flat); }

/* Formular (Dialog und eigenständige Seite) */
#wpsg_revocation_form, #wpsg_revocation_page_form { display:flex; flex-direction:column; gap:1em; width:100%; margin:0; }
#wpsg_revocation_form .wpsg_revocation_order_product, #wpsg_revocation_page_form .wpsg_revocation_order_product { display:flex; flex-direction:column; gap:0.9em; margin:0; padding:1em; border:1px solid var(--rv-line-soft); border-radius:var(--rv-radius); min-width:0; }
#wpsg_revocation_form .wpsg_revocation_order_product > div, #wpsg_revocation_page_form .wpsg_revocation_order_product > div { display:flex; flex-direction:column; gap:0.9em; width:100%; }
#wpsg_revocation_form legend, #wpsg_revocation_page_form legend { padding:0 0.3684em; font-size:0.95em; font-weight:600; }
#wpsg_revocation_form .form_field, #wpsg_revocation_page_form .form_field { display:flex; flex-direction:column; gap:0.3em; width:100%; }
#wpsg_revocation_form .form_field .label, #wpsg_revocation_page_form .form_field .label { color:inherit; font-size:0.85em; opacity:0.7; }
/* Bot-Falle (S21): aus dem Bild, ohne display:none, damit Programme sie ausfüllen */
.wpsg_revocation_hp { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }
/* Links in Schriftfarbe: Die Linkfarbe des Themes ist auf dem Dialog sonst zu blass (W5) */
#wpsg_revocation_dialog .inner a, .wpsg_revocation_page a { color:inherit; text-decoration:underline; }
#wpsg_revocation_form .form_field .value, #wpsg_revocation_page_form .form_field .value { display:flex; gap:0.5em; justify-content:stretch; }
#wpsg_revocation_form .form_field .value input, #wpsg_revocation_form .form_field .value textarea, #wpsg_revocation_form .form_field .value select, #wpsg_revocation_page_form .form_field .value input, #wpsg_revocation_page_form .form_field .value textarea, #wpsg_revocation_page_form .form_field .value select { flex:1 1 auto; width:auto; min-width:0; min-height:0; margin:0; padding:0.55em 0.7em; border:var(--rv-field-border); border-radius:var(--rv-radius); background:none; color:inherit; font:inherit; text-indent:0; box-shadow:none; }
#wpsg_revocation_form .form_field .value input:focus, #wpsg_revocation_form .form_field .value textarea:focus, #wpsg_revocation_form .form_field .value select:focus, #wpsg_revocation_page_form .form_field .value input:focus, #wpsg_revocation_page_form .form_field .value textarea:focus, #wpsg_revocation_page_form .form_field .value select:focus { border-color:currentColor; }
#wpsg_revocation_form .form_field .value input[readonly], #wpsg_revocation_page_form .form_field .value input[readonly] { background:var(--rv-flat); }
#wpsg_revocation_form .form_field .value input[type="number"], #wpsg_revocation_page_form .form_field .value input[type="number"] { flex:0 0 6em; }
#wpsg_revocation_form .form_field .value textarea, #wpsg_revocation_page_form .form_field .value textarea { min-height:5.5em; resize:vertical; }
#wpsg_revocation_form > p, #wpsg_revocation_page_form .wpsg_revocation_page_datenschutz { margin:0; font-size:0.85em; opacity:0.7; }

/* Meldungen */
#wpsg_revocation_dialog #wpsg_error, #wpsg_revocation_page_form #wpsg_error, #wpsg_revocation_page_form .wpsg_error { margin:0; padding:0.6em 0.9em; border-left:3px solid var(--rv-error); background:var(--rv-flat); color:inherit; list-style:none; }
#wpsg_revocation_dialog #msg_target:empty { display:none; }
.wpsg_revocation_page_success { padding:0.6em 0.9em; border-left:3px solid var(--rv-success); background:var(--rv-flat); color:inherit; }

/* Eigenständige Widerrufsformular-Seite (kein Popup) */
.wpsg_revocation_page { width:100%; max-width:640px; margin:0 auto; }
/* Modus „neu“: so breit wie die Inhaltsspalte und bündig mit dem Seitentitel; Block-Themes zentrieren Kinder mit !important */
.wpsg-style-theme .wpsg_revocation_page { max-width:var(--wp--style--global--content-size, 640px); margin-left:0; }
.wpsg_revocation_page .wpsg_revocation_page_submit_wrap { margin-top:0.25em; }

/* Auswahl der Produkte in der Bestellübersicht des Kundenkontos */
.wpsg_mod_kundenverwaltung_order .wpsg_revocation_order_product { display:inline-flex; flex-direction:row; align-items:center; gap:0.5882em; margin-bottom:1.1765em; padding:0.4706em 0.8235em; border:1px solid var(--rv-line); border-radius:var(--rv-radius); font-size:0.85em; user-select:none; }
.wpsg_mod_kundenverwaltung_order .wpsg_revocation_order_product > svg { flex:0 0 18px; width:18px; height:18px; fill:currentColor; opacity:0.7; }
.wpsg_mod_kundenverwaltung_order .wpsg_revocation_order_product > input { flex-shrink:0; width:16px; height:16px; margin:0; }
.wpsg_mod_kundenverwaltung_order .wpsg_revocation_order_product > .inner { cursor:pointer; }

.wpsg_amount_label { word-break:normal; }