.dnb-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-l);
}

.dnb-form ul.options-wrapper {
    list-style: none;
    padding-left: 0;
}

.dnb-form .form-group:has(input:not([type="checkbox"]):not([type="radio"])),
.dnb-form .form-group:has(textarea),
.dnb-form .form-group:has(select) {
    position: relative;
    display: grid;
    grid-template-areas: "input";
    margin-bottom: 0;
    width: calc(50% - (var(--space-l) / 2));
}

.dnb-form .form-group:has(textarea) {
    width: 100%;
}

.dnb-form .form-group>label {
    display: block;
    color: var(--primary);
    text-transform: capitalize !important;
    font-size: var(--text-xs);
    font-weight: 400;
    letter-spacing: -0.03em;
}

.dnb-form .form-group:has(input:not([type="checkbox"]):not([type="radio"]))>label,
.dnb-form .form-group:has(select)>label {
    grid-area: input;
    align-self: flex-end;
    justify-self: start;
    pointer-events: none;
    transition: all 0.3s ease;
    transform-origin: left bottom;
    z-index: 3;
}

.dnb-form .form-group:has(textarea)>label {
    grid-area: input;
    align-self: flex-start;
    justify-self: start;
    pointer-events: none;
    transition: all 0.3s ease;
    transform-origin: left bottom;
    z-index: 3;
    margin-top: calc(var(--space-2xs) + 2px);
}

.dnb-form .form-group:has(input:not([type="checkbox"]):not([type="radio"])):focus-within>label,
.dnb-form .form-group:has(input:not(:placeholder-shown))>label,
.dnb-form .form-group:has(select:focus)>label,
.dnb-form .form-group:has(select:valid)>label {
    transform: translateY(-120%) scale(0.75);
}

.dnb-form select:invalid {
    color: transparent !important;
}

.dnb-form select option {
    color: var(--primary);
}

.dnb-form .form-group:has(textarea):focus-within>label,
.dnb-form .form-group:has(textarea:not(:placeholder-shown))>label {
    transform: translateY(-100%) scale(0.75);
}

.dnb-form .options-wrapper li {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--text-xs);
    line-height: var(--body-line-height);
    width: 100%;
}

.dnb-form ul.options-wrapper label {
    font-size: var(--text-xs);
    color: var(--moss);
    cursor: pointer;
}


.dnb-form input[type="checkbox"] {
    flex-shrink: 0;
    appearance: none;
    width: 20px;
    height: 20px;
    padding-right: 0.5rem;
    border: 1px solid var(--primary);
    border-radius: 50%;
    cursor: pointer;
}


.dnb-form input[type="checkbox"]:checked {
    background-color: var(--primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
}


.dnb-form .submit-button-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.dnb-form button.bricks-button {
    width: fit-content;
    background-color: transparent;
    color: var(--moss);
    border: 1px solid var(--moss);
    padding: 12px 48px;
    border-radius: 100px;
    font-family: var(--body-font);
    font-size: var(--text-s);
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.dnb-form button.bricks-button:hover {
    background-color: var(--moss);
    color: var(--white);
}

.dnb-form input:not([type="checkbox"]):not([type="radio"]),
.dnb-form select,
.dnb-form textarea {
    grid-area: input;
    width: 100%;
    border: none !important;
    border-bottom: 1px solid var(--primary) !important;
    background: transparent !important;
    padding: var(--space-2xs) var(--space-2xs) 0 !important;
    line-height: 1;
    font-family: var(--font-family-body) !important;
    font-size: var(--text-xs) !important;
    color: var(--primary);
    border-radius: 0 !important;
    transition: border-color 0.3s ease;
    z-index: 2;
}

.dnb-form textarea {
    min-height: 4em;
    max-height: 7.5rem;
    resize: vertical;
}

.dnb-form input::placeholder,
.dnb-form textarea::placeholder {
    opacity: 0;
}

.dnb-form select {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='14' viewBox='0 0 12 14' fill='none'%3E%3Cpath d='M5.2376 13.5563C5.54486 13.8636 6.04303 13.8636 6.35029 13.5563L11.3574 8.54921C11.6647 8.24195 11.6647 7.74378 11.3574 7.43651C11.0502 7.12925 10.552 7.12925 10.2447 7.43651L5.79394 11.8873L1.34316 7.43651C1.03589 7.12925 0.537721 7.12925 0.230458 7.43651C-0.0768045 7.74378 -0.0768045 8.24195 0.230458 8.54921L5.2376 13.5563ZM5.79395 0L5.00715 -3.43919e-08L5.00715 13L5.79394 13L6.58074 13L6.58074 3.43919e-08L5.79395 0Z' fill='%2349492F'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: calc(100% - 5px) center !important;
    background-size: 10px 12px !important;
    padding-right: 25px !important;
}

.dnb-form select::-ms-expand {
    display: none;
}


.dnb-form input:focus,
.dnb-form select:focus,
.dnb-form textarea:focus {
    outline: none !important;
    border-bottom-color: var(--primary) !important;
}


@media screen and (max-width: 767px) {
    .dnb-form .form-group:not(.submit-button-wrapper) {
        width: 100% !important;
    }

    

    .dnb-form ul.options-wrapper li {
        align-items: start;
    }
}