.dynamic-consent-checkbox { /* Base styles for the checkbox wrappers */ font-family: sans-serif; /* Basic font */ /* Smooth transition for opacity and transform */ transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out; opacity: 1; /* Start visible by default */ transform: translateY(0); } /* Hide the original descriptive label within targeted wrappers */ /* Added !important to increase specificity */ .dynamic-consent-checkbox .field-label.label-alignment { display: none !important; } /* Style the container for the checkbox and its new label */ .dynamic-consent-checkbox .in-r-c { display: flex; /* Align checkbox and label */ align-items: flex-start; /* Align items to the top */ } /* Style the label that will display the text */ .dynamic-consent-checkbox .in-r-c label { margin-left: 10px; /* Keep the original margin */ cursor: pointer; /* Indicate it's clickable */ flex: 1; /* Allow label to take available space */ font-size: inherit; color: inherit; line-height: 1.4; } /* Style the checkbox itself */ .dynamic-consent-checkbox .in-r-c input[type="checkbox"] { margin-top: 0.2em; flex-shrink: 0; width: 1.1em; height: 1.1em; } /* --- Loading Indicator Styles --- */ #consent-loading-indicator { display: none; /* Hidden by default */ padding: 20px; text-align: center; } .spinner { border: 4px solid rgba(0, 0, 0, 0.1); width: 36px; height: 36px; border-radius: 50%; border-left-color: #09f; /* Spinner color */ display: inline-block; animation: spin 1s ease infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* --- Styles applied when the form is processing --- */ .consent-processing #consent-loading-indicator { display: block; /* Show loader when processing */ } /* Hide/fade out the checkboxes while processing */ /* We target the wrapper here to hide both original and potential new layout during processing */ .consent-processing .form-field-wrapper.dynamic-consent-checkbox { opacity: 0; transform: translateY(10px); /* Optional: slight move down */ pointer-events: none; /* Prevent interaction while hidden */ /* Ensure height is maintained to prevent jump */ /* min-height: 50px; /* Adjust as needed */ } /* --- For Demo Only --- */ .original-structure-visualization { border: 1px dashed #ccc; padding: 5px; margin-top: 5px; font-size: 0.8em; color: #555; } .original-structure-visualization .field-label { display: block !important; margin-bottom: 5px; } .original-structure-visualization .in-r-c label { font-size: 1em !important; color: #555 !important; } /* Add one of the form classes for the demo */ body { /* Or add to a specific form container */ /* Example: add 'alpha-form' for testing */ }