- Feature: PHP 8.3 Kompatibilität

- Feature: SmartCheckout - Ersatz für EinSeitenCheckout
- Feature: Optik im Frontend an moderne Themes angepasst

1 files changed, 56 insertions, 77 deletions

diff --git a/views/mods/mod_revocation/wpsg_revocation.css b/views/mods/mod_revocation/wpsg_revocation.css
index 4ebad37..b74f0bb 100644
--- a/views/mods/mod_revocation/wpsg_revocation.css
+++ b/views/mods/mod_revocation/wpsg_revocation.css
@@ -1,87 +1,66 @@
-#wpsg_revocation_button { position:fixed; right:0; top:25%; display:flex; gap:1rem; align-items:center; justify-content:flex-start; flex-wrap:nowrap; transform:translateX(calc(100% - (50px + 1rem + 0.5rem))); cursor:pointer; z-index:10;
-	background-color:white; border:1px solid black; border-radius:0.5rem; padding:0.5rem 1rem 0.5rem 0.5rem; transition:all 0.4s;
-	svg { width:50px; fill:black; }
-	span { white-space:nowrap; }
-	&:hover { transform:translateX(0.5rem); }
-}
+/* Widerrufsformular — schlichte Gestaltung passend zum SmartCheckout: dünne Linien, gedämpfte Beschriftungen, Farbe vom Theme */
 
-#wpsg_revocation_dialog {
-	z-index:10; opacity:0; pointer-events:none; transition:all 0.4s;
-	position:fixed; left:0; top:0; height:100vh; width:100vw;
-	background-color:rgba(0,0,0,0.5); display:flex; align-items:center; justify-content:center;
-	&.visible { opacity:1; pointer-events:all; }
-	.inner { width:calc(100% - 3rem); height:auto; max-width:800px; max-height:800px;
-		border:1px solid black; position:relative;
-		background-color:white; border-radius:0.5rem; padding:1rem; display:flex; flex-direction:column;
-		& > .loading { transition:all 0.2s; opacity:0; pointer-events:none; background-color:rgba(0, 0, 0, 0.25); position:absolute; z-index:2; left:0; top:0; height:100%; width:100%; display:flex; align-items:center; justify-content:center; }
-		& > .header { height:50px; flex-shrink:0; flex-grow:0;
-			display:flex; align-items:center; justify-content:space-between; font-size:2rem; font-weight:bold;
-			.close { width:30px; height:30px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
-		}
-		& > .content { flex-grow:0.2; overflow-y:auto; margin-top:1rem; margin-bottom:1rem; }
-		& > .footer { flex-shrink:0; flex-grow:0; display:flex; align-items:center; justify-content:start; height: 35px; margin-bottom: 2rem;}
-		#wpsg_error { padding-left:5px; color:red; }
-	}
-	&.loading > .inner > .loading { opacity:1; pointer-events:all; }
-}
+#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-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; }
 
-.wpsg_revocation_product_button {
-	flex-shrink:0; display:inline-flex; align-items:center; gap:0.5rem;
-	width:auto; min-height:35px; padding:0.25rem 0.5rem;
-	border:1px solid black; cursor:pointer;
-}
+/* Button am Produkt (Produkttemplate, SmartCheckout) */
+.wpsg_revocation_product_button { display:inline-flex; align-items:center; gap:0.4rem; width:auto; padding:0.35rem 0.7rem; border:1px solid var(--rv-line); border-radius:var(--rv-radius); background:none; color:inherit; font-size:0.85rem; 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: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; }
 
-.wpsg_revocation_product_button > svg {
-	flex:0 0 24px; width:24px; height:24px; fill:currentColor;
-}
+/* 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.6rem; flex-wrap:nowrap; padding:0.6rem 0.9rem 0.6rem 0.6rem; 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.9rem; box-shadow:0 2px 10px rgba(0, 0, 0, 0.08); cursor:pointer; transform:translateX(calc(100% - (26px + 1.2rem))); transition:transform 0.3s ease-out; }
+#wpsg_revocation_button:hover, #wpsg_revocation_button:focus-within { 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; }
 
-.wpsg_revocation_product_button_text {
-	margin: 0;
-}
+/* Dialog */
+#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:1rem; box-sizing:border-box; background-color:rgba(0, 0, 0, 0.45); opacity:0; pointer-events:none; transition:opacity 0.2s ease-out; }
+#wpsg_revocation_dialog.visible { opacity:1; pointer-events:all; }
+#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 - 2rem); padding:1.5rem; 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:1rem; padding-bottom:1rem; border-bottom:1px solid var(--rv-line-soft); font-size:1.1rem; 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:1rem 0; }
+#wpsg_revocation_dialog .inner > .footer { display:flex; flex:0 0 auto; align-items:center; justify-content:flex-end; gap:0.75rem; padding-top:1rem; 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; }
 
-#wpsg_revocation_form { display:flex; flex-direction:column; gap:0.5rem; width:100%;
-	.wpsg_revocation_order_product > div { width:100%; }
-	.form_field { display:flex; width:100%; flex-direction:column; gap:0.125rem;
-		.label { color: black; font-size: 1.25rem; }
-		.value { display:flex; justify-content:stretch; gap:0.25rem;
-			input, textarea, select { width:auto; flex-grow:1; min-height:30px; text-indent:0.25rem; flex-shrink:1; }
-			textarea { min-height:90px; padding:0.25rem; }
-			select { height:36px; }
-			input[type="number"] { flex-shrink:2; flex-grow:0; }
-		}
-	}
-}
+/* 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.65rem 1.1rem; 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: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); }
 
-.wpsg_mod_kundenverwaltung_order {
-	.wpsg_revocation_order_product { display:inline-flex; align-items:center; gap:0.5rem; border:1px solid black; border-radius:0.5rem; padding:0.5rem;
-		margin-bottom:1rem; user-select:none; flex-direction: row;
-		& > svg { height:30px; width:30px; }
-		& > input { width:25px; height:25px; flex-shrink:0; }
-		& > .inner { cursor:pointer; }
-	}
-}
+/* Formular (Dialog und eigenständige Seite) */
+#wpsg_revocation_form, #wpsg_revocation_page_form { display:flex; flex-direction:column; gap:1rem; 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.9rem; margin:0; padding:1rem; 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.9rem; width:100%; }
+#wpsg_revocation_form legend, #wpsg_revocation_page_form legend { padding:0 0.35rem; font-size:0.95rem; font-weight:600; }
+#wpsg_revocation_form .form_field, #wpsg_revocation_page_form .form_field { display:flex; flex-direction:column; gap:0.3rem; width:100%; }
+#wpsg_revocation_form .form_field .label, #wpsg_revocation_page_form .form_field .label { color:inherit; font-size:0.85rem; opacity:0.7; }
+#wpsg_revocation_form .form_field .value, #wpsg_revocation_page_form .form_field .value { display:flex; gap:0.5rem; 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.55rem 0.7rem; border:1px solid var(--rv-line); 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; outline:none; }
+#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 6rem; }
+#wpsg_revocation_form .form_field .value textarea, #wpsg_revocation_page_form .form_field .value textarea { min-height:5.5rem; resize:vertical; }
+#wpsg_revocation_form > p, #wpsg_revocation_page_form .wpsg_revocation_page_datenschutz { margin:0; font-size:0.85rem; 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.6rem 0.9rem; 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.6rem 0.9rem; border-left:3px solid var(--rv-success); background:var(--rv-flat); color:inherit; }
 
-.wpsg_amount_label {
-	word-break: normal;
-}
 /* Eigenständige Widerrufsformular-Seite (kein Popup) */
-.wpsg_revocation_page { width:100%; max-width:800px; margin:0 auto; }
+.wpsg_revocation_page { width:100%; max-width:640px; margin:0 auto; }
+.wpsg_revocation_page .wpsg_revocation_page_submit_wrap { margin-top:0.25rem; }
 
-#wpsg_revocation_page_form { display:flex; flex-direction:column; gap:0.5rem; width:100%;
-	.wpsg_revocation_order_product { border:1px solid #ddd; border-radius:0.5rem; padding:1rem; margin:0 0 1rem 0; }
-	.wpsg_revocation_order_product > div { width:100%; }
-	.form_field { display:flex; width:100%; flex-direction:column; gap:0.125rem;
-		.label { color:black; font-size:1.25rem; }
-		.value { display:flex; justify-content:stretch; gap:0.25rem;
-			input, textarea, select { width:auto; flex-grow:1; min-height:30px; text-indent:0.25rem; flex-shrink:1; }
-			textarea { min-height:90px; padding:0.25rem; }
-			select { height:36px; }
-			input[type="number"] { flex-shrink:2; flex-grow:0; }
-		}
-	}
-	#wpsg_error, .wpsg_error { padding-left:5px; color:red; list-style:none; margin:0 0 1rem 0; }
-	.wpsg_revocation_page_submit_wrap { margin-top:0.5rem; }
-}
+/* 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.5rem; margin-bottom:1rem; padding:0.4rem 0.7rem; border:1px solid var(--rv-line); border-radius:var(--rv-radius); font-size:0.85rem; 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_revocation_page_success { padding:1rem; border:1px solid #2e7d32; border-radius:0.5rem; background:#edf7ed; color:#2e7d32; }
-.wpsg_revocation_page_datenschutz { margin:0.5rem 0; }
+.wpsg_amount_label { word-break:normal; }