.zf-field-wrapper {
    margin-top: 1rem;
}

.list-group-item .zf-field-wrapper {
    margin-top: 0;
}

.list-group-item.zf-form-selected {
    background-color: var(--zf-form-background);
}

/*div[class^='col'] .zf-field-wrapper,*/
/*div[class*=' col'] .zf-field-wrapper {*/
/*    margin-top: 0;*/
/*}*/

.zf-field-wrapper + .row {
    margin-top: auto;
}

/* region Input groups */
form {
    counter-reset: legend;
}

fieldset + fieldset {
    margin-top: 2rem;
}

legend {
    border-bottom: 1px solid var(--zf-legend-background);
    font-size: 1.3rem;
    font-weight: 400;
}

legend:before {
    counter-increment: legend 1;
    content: counter(legend);
    display: inline-block;
    background: var(--zf-legend-background);
    color: var(--zf-legend-foreground);
    width: 2.5rem;
    text-align: center;
    margin-inline-end: 0.75rem;
}

legend + p {
    font-size: 1rem;
}

fieldset[plain] legend:before {
    display: none;
}
/* endregion */

/* region Input groups */
.zf-input-wrapper {
    position: relative;
    width: 100%;
}

.input-group > .zf-input-wrapper {
    width: 1%;
    flex: 1 1 auto;
}

.zf-input-wrapper > :is(input, select, textarea) {
    flex-grow: 1;
}

.input-group > .zf-input-wrapper:not(:first-child) > :is(input, select, textarea) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group > .zf-input-wrapper:not(:last-child) > :is(input, select, textarea) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* region password */
.zf-password {
    padding-inline-end: 35px;
}

.zf-password-toggle {
    display: inline-flex;
    width: 2rem;
    height: 100%;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 3px;
    top: 0;
    cursor: pointer;
}
/* endregion */

/* region pin code */
.zf-form-control-pins {
    --pin-size: 72px;
    --pin-count: 6; /* default fallback value, will be set by the JS code */

    flex-grow: 1;
    gap: 0.75rem;
    max-width: calc(var(--pin-size) * var(--pin-count)); /* limit the max-width for desktop */
}

.form-control.zf-form-control-pin {
    text-align: center;
    font-size: 1.8rem;
    aspect-ratio: 1;
    width: 100%;
    height: auto;
}
/* endregion */

/* region character counter */
.zf-input-counter {
    display: inline-flex;
    height: fit-content;
    right: 5px;
    justify-content: center;
    align-items: center;
    position: absolute;
    font-weight: 400;
    font-size: 75%;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

input + .zf-input-counter {
    top: calc(100% - 29px);
}

textarea + .zf-input-counter {
    top: calc(100% - 25px);
}

textarea:focus + .zf-input-counter,
input:focus + .zf-input-counter {
    opacity: 0.85;
}
/* endregion */

/* Do not display feedback texts when inside a form group */
.zf-form-group .zf-form-feedback {
    display: none;
}

.zf-form-action {
    border-top: 1px dashed #cbcbcb;
}

/* region color picker */
.zf-emoji-picker > ul {
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0;
    padding: 0;
}

.zf-emoji-picker > ul li {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.3s;
}

.zf-color-picker > ul {
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0;
    padding: 0;
}

.zf-color-picker > ul li {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.3s;
}

.zf-color-picker > ul li:hover,
.zf-color-picker > ul li.selected {
    transform: scale(1.5);
}
/* endregion */