.regi__fields-container {
    --gap-1: 1rem;
    --gap-2: 2.5rem;
    --space-1: 1.5rem;
    --space-05: calc(var(--space-1) / 2);
    --columns: 2;
    --radius-1: 0.8rem;
    --radius-2: 1.2rem;
    --border-color: rgb(0 0 0 / 30%);
    --border-dashed: 1px dashed var(--border-color);
}
.regi__fields-container {
    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
    gap: var(--gap-2) var(--gap-2);
    width: 100%;
}
.regi__fields-container label{
    font-weight: 500;
    font-size: var(--text-s);
    margin-bottom: 0;
    padding-left: var(--space-05);
    display: flex;
    position: relative;
    z-index: 1;
}
.regi__fields-container .billing-input {
    border-radius: var(--radius-2);
    border-color: var(--border-color);
    width: 100%;
    padding: 0 var(--space-1);
    display: flex;
    height: 48px;
    line-height: unset;

    &#billing_phone {
        padding-left: calc(58px + var(--spacing-8)) !important;
    }

    &.invalid-value {
        border-color: rgb(255 0 0 / 50%);
        outline: none;
        position: relative;
    }
}
.regi__fields-container .billing-input::placeholder {
    color: var(--fluent-placeholder, #8f8f8f);
    font-size: 17px;
}
.woocommerce-NoticeGroup-checkout {
    display: none;
}

.regi__fields-container .field-group:has(.invalid-value) {
    position: relative;
    &::after {
        content: attr(data-error);
        text-align: right;
        text-transform: capitalize;
        position: absolute;
        top: 0;
        right: 0;
        padding: 0 var(--space-1);
        background-color: rgba(255, 0, 0, 0.05);
        color: red;
        font-size: 0.8em;
        border-radius: var(--radius-2);
        opacity: 0;
        transform: translateX(-5px);
        animation: error-fade 500ms ease-in-out 600ms forwards;
    }
}
.field-group:has(.invalid-value).billing_address_1 {
    &::after {
        top: auto;
        bottom: 110px;
        right: 20px;
    }
}
@keyframes error-fade {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.field-group.invalid-field .billing-input {
    border-color: rgb(255 0 0 / 50%);
}

.field-group.billing_address_1 {
    grid-column: 1/-1;
    order: 1;
    padding: var(--space-1);
    border: var(--border-dashed);
    border-radius: var(--radius-2);
}
.field-group.billing_address_1 h3{
    margin-bottom: var(--spacing-2);
}
.field-group.billing_address_1 p{
    margin-bottom: var(--spacing-12);
}
.field-group.billing_address_1 textarea{
    resize: none;
}

@media(max-width:767px) {
    .regi__fields-container .field-group.billing_last_name ~ * {
        grid-column: 1/-1;
    }
}
@media(max-width:478px) {
    .regi__fields-container {
        --columns: 1;
    }
}