feat: show optional serivce description before payment

frontend/src/styles/admin-controls.css

@@ -206,6 +206,7 @@
 
 .admin-setting-control .input,
 .admin-setting-control .admin-setting-select,
+.admin-setting-control .admin-setting-textarea,
 .admin-setting-control input[type="text"],
 .admin-setting-control input[type="number"] {
   flex: 1 1 160px;
@@ -213,6 +214,25 @@
   width: 100%;
 }
 
+.admin-setting-control .admin-setting-textarea {
+  min-height: 86px;
+  resize: vertical;
+  border-radius: 8px;
+  border: 1px solid var(--admin-border-strong);
+  background: color-mix(in srgb, var(--admin-bg) 82%, var(--admin-surface-2));
+  color: var(--admin-text);
+  padding: 10px 12px;
+  font-size: 13px;
+  line-height: 1.45;
+  outline: none;
+  transition: border-color 0.12s ease, box-shadow 0.12s ease;
+}
+
+.admin-setting-control .admin-setting-textarea:focus {
+  border-color: var(--admin-ring);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
+}
+
 .admin-btn.admin-btn-icon {
   width: 30px;
   height: 30px;

frontend/src/styles/webapp.css

@@ -795,6 +795,24 @@ a {
   line-height: 1.35;
 }
 
+.subscription-purchase-description {
+  display: grid;
+  gap: 6px;
+  padding: 11px 12px;
+  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border));
+  border-radius: var(--radius);
+  background: color-mix(in srgb, var(--accent) 8%, var(--surface-muted));
+  box-shadow: inset 0 1px 0 var(--inset-highlight);
+}
+
+.subscription-purchase-description p {
+  margin: 0;
+  color: var(--text);
+  font-size: 12px;
+  line-height: 1.45;
+  overflow-wrap: anywhere;
+}
+
 .skeleton-row,
 .skeleton-method,
 .skeleton-pay-button {