.realvuu-form {
    display: grid;
    gap: var(--realvuu-content-padding-small);
}

.realvuu-field-label {
    display: grid;
    gap: var(--realvuu-button-padding-small);
}

.realvuu-field-label-text {
    font-family: var(--realvuu-label);
    font-size: var(--realvuu-label-size);
    line-height: 1;
    font-weight: var(--realvuu-label-weight);
    text-transform: var(--realvuu-label-transform);
    margin: 0 0 var(--realvuu-button-padding-small) 0;
}

.realvuu-form input:not([type="submit"]),
.realvuu-form select,
.realvuu-form textarea {
    width: 100%;
    max-width: 100%;
    font-size: 100%;
    line-height: 1;
    outline: none;
    border-bottom: 1px solid rgba(var(--realvuu-black-rgb), 0.2);
    color: var(--realvuu-black);
    padding: var(--realvuu-button-padding-large);
    transition: border-color var(--realvuu-transition);
}

.realvuu-form[data-theme="web"] input:not([type="submit"]),
.realvuu-form[data-theme="web"] select,
.realvuu-form[data-theme="web"] textarea {
    border: none;
    border-radius: var(--realvuu-radius-small);
    background-color: var(--realvuu-white);
    /* box-shadow: inset 0 0 10px 0 rgba(var(--realvuu-black-rgb), .15); */
    transition: background-color var(--realvuu-transition);
}

.realvuu-form input:not([type="submit"]):focus,
.realvuu-form select:focus,
.realvuu-form textarea:focus {
    border-color: var(--realvuu-secondary-color);
}

.realvuu-form[data-theme="web"] input:not([type="submit"]):focus,
.realvuu-form[data-theme="web"] select:focus,
.realvuu-form[data-theme="web"] textarea:focus {
    background-color: rgba(var(--realvuu-white-rgb), .9);
}

.realvuu-form textarea {
    line-height: 1.15;
    height: 100px;
    min-height: 100px;
    max-height: 100px;
    resize: none;
    overflow: auto;
    vertical-align: middle;
}

.realvuu-submit-form {
    margin-top:20px;
    position: relative;
    display: flex;
    gap: var(--realvuu-content-padding);
    align-items: center;
}

.realvuu-submit-form [type="submit"] {
    -webkit-appearance: button;
    font-size: 100%;
    line-height: 1;
    cursor: pointer;
    padding: var(--realvuu-button-padding-large);
    /* color: var(--realvuu-primary-color); */
    /* border: 1px solid var(--realvuu-primary-color); */
    /* background-color: transparent; */
    text-transform: uppercase;
    transition: all var(--realvuu-transition);
    border-radius: var(--realvuu-radius-small);
}

.realvuu-submit-form [type="submit"]:hover {
    color: var(--realvuu-inverse-color);
    background-color: var(--realvuu-primary-color);
}

.realvuu-form[data-theme="web"] .realvuu-submit-form [type="submit"] {
    /* border-color: var(--realvuu-secondary-color); */
    color: var(--realvuu-primary-color);
    background-color: var(--realvuu-inverse-color);
}

.realvuu-form[data-theme="web"] .realvuu-submit-form [type="submit"]:hover {
    /* color: var(--realvuu-white); */
    background-color: var(--realvuu-secondary-color);
}

.realvuu-submit-notification {
    display: flex;
    gap: var(--realvuu-content-padding-small);
    align-items: center;
    transition: all var(--realvuu-transition);
}

.realvuu-submit-form:not(.realvuu-submitting) .realvuu-submit-notification {
    visibility: hidden;
    opacity: 0;
}

.realvuu-submit-form .realvuu-disabled {
    pointer-events: none;
    opacity: 0.5;
}

.realvuu-form label.error {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    justify-content: start;
    align-items: center;
    gap: var(--realvuu-button-padding);
    /* margin-top: var(--realvuu-button-padding-small); */
    font-size: var(--realvuu-note-size);
    text-transform: var(--realvuu-note-transform);
}

.realvuu-form label.error::before {
    content: "\f00d";
    font-family: "Font Awesome 6 Pro";
    color: var(--realvuu-white);
    background-color: var(--realvuu-error);
    border-radius: 100px;
    width: 16px;
    height: 16px;
    line-height: 1.4;
    box-sizing: border-box;
    text-align: center;
}

.realvuu-field-form[data-type="checkbox"] .realvuu-field-label,
.realvuu-field-form[data-type="radio"] .realvuu-field-label {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: start;
    align-items: center;
    gap: var(--realvuu-content-padding-small) ;
    padding: var(--realvuu-content-padding-small)  var(--realvuu-content-padding-small)  0 var(--realvuu-content-padding-small) ;
    padding: 0;
    font-size: 85%;
}

.realvuu-field-form[data-type="checkbox"] .realvuu-field-label-text,
.realvuu-field-form[data-type="radio"] .realvuu-field-label-text {
    grid-column: 1 / -1;
}

label.realvuu-field-label-option,
label.realvuu-field-label {
    cursor: pointer;
}

.realvuu-field-label-option {
    display: grid;
    grid-template-columns: 20px auto;
    align-items: center;
    gap: 5px;
}

@media (max-width: 640px) {
    .realvuu-field-form[data-type="checkbox"] .realvuu-field-label,
    .realvuu-field-form[data-type="radio"] .realvuu-field-label{
        grid-template-columns: repeat(2, auto);
    }
}

@media (max-width: 480px) {
    .realvuu-field-form[data-type="checkbox"] .realvuu-field-label,
    .realvuu-field-form[data-type="radio"] .realvuu-field-label{
        grid-template-columns: auto;
    }
}