.spacing-block .w-panel__content > div:not(:first-child) {
    display: inline-block;
    width: 120px;
    margin-right: 20px;
    margin-top: -6px;
}

.spacing-block2 .w-panel__content {
    display: inline-block;
    width: 300px;
    margin-right: 5px;
    margin-top: -6px;
}

/* Aligned check boxes : block */
.categories-filter-css .w-field--checkbox_select_multiple .w-field__input > div {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
}

.categories-filter-css .w-field--checkbox_select_multiple .w-field__input > div > div {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

/* Aligned check boxes : models.py */
/* Make category checkboxes inline */
#id_categories {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
}

#id_categories div {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
/* Aligned checkboxes : END */

/* Force dark mode variables even if the system prefers light */
:root, .w-theme-light, .w-theme-system {
    /* This applies the dark theme variables by default */
    color-scheme: dark !important;
    /* You will need to inspect Wagtail's CSS variables to apply them here */
    /* This is a general approach, specific variable overrides may be needed */
}

/* Layout chooser styles */
.layout-chooser {
    display: flex;
    gap: 20px;
}

.layout-option {
    cursor: pointer;
    border: 4px solid transparent;
    padding: 25px;
    border-radius: 6px;
    text-align: center;
}

.layout-option img {
    width: 500px;
    display: block;
    margin-bottom: 8px;
    padding: 15px 0;
}

.layout-option input {
    display: none;
}

.layout-option input:hover + img {
    outline: 4px solid #007d7e;
}

.layout-option input:checked + img {
    outline: 4px solid #F7E788;
}

/* End layout chooser styles */