.product_page-content {
    padding: 0;
}

/* SIGNIN FORM */
.signin-container,
.signup-container {
    width: 90%;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    padding: 30px 0;
}

.signup-container {
    display: none;
}

.signin {
    width: 80%;
    display: flex;
    justify-content: center;
    gap: 30px;
    margin: 0 auto;
}

.form-signin,
.request-signup {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.form-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    text-align: center;
}

.form-header>i {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--background-color);
    background-color: var(--primary-color);
    border-radius: 50%;
}

.form-header h2 {
    font-size: 1.6em;
    font-weight: var(--fw-bold);
}

.form-header p {
    font-size: 1em;
}

.form-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.form-group {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    position: relative;
    overflow: hidden;
}

.form-group a {
    color: var(--text-color);
}

.form-group a:hover {
    color: var(--primary-color);
}

.form-group input {
    padding: 10px;
    color: var(--text-color);
    border: 1px solid var(--light-text-color);
    border-radius: 5px;
    outline: none;
}

.form-group input:focus {
    border-color: var(--text-color);
}

.form-group .label-place {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    transition: .2s linear;
}

.form-group input:focus+label {
    left: -65px;
}

.button {
    width: 100%;
}

.form-group>input[type=checkbox] {
    display: none;
}

label {
    cursor: pointer;
}

label.checkbox {
    width: 20px;
    height: 20px;
    display: block;
    border: 2px solid var(--primary-color);
    border-radius: 3px;
    position: relative;
}

label.checkbox::after {
    width: 14px;
    height: 14px;
    display: none;
    content: '';
    background-color: var(--primary-color);
    border-radius: 2px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

input[type=checkbox]:checked+.checkbox::after {
    display: block;
}

/* SIGNUP FORM */
.signup {
    width: 100%;
    height: 100%;
    display: flex;
    background-color: var(--neutral-color);
}

.form-signup {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin: 0 auto;
}

.form-row {
    width: 100%;
    display: flex;
    gap: 15px;
}

.form-field,
.form-field-item {
    width: 50%;
    display: flex;
    gap: 5px;
    padding-bottom: 20px;
    position: relative;
    overflow: hidden;
}

.form-field-item {
    width: 100%;
}

.form-field input:not(input[type=checkbox]),
.form-field-item input:not(input[type=checkbox]),
.form-field select {
    padding: 10px;
    color: var(--text-color);
    border: 1px solid var(--light-text-color);
    border-radius: 5px;
    outline: none;
}

.form-field input:not(input[type=checkbox]):focus,
.form-field-item input:not(input[type=checkbox]):focus,
.form-field select:focus {
    border-color: var(--text-color);
}

.form-field label,
.form-field-item label {
    position: absolute;
    top: calc(50% - 10px);
    left: 10px;
    transform: translateY(-50%);
    transition: .2s linear;
}

.form-field input:not(input[type=checkbox]):focus+label,
.form-field-item input:not(input[type=checkbox]):focus+label {
    left: -150px;
}

.form-field span,
.form-field-item span {
    display: none;
    font-size: .8em;
    color: var(--accent-color);
    position: absolute;
    bottom: 3px;
}

.person {
    display: flex;
}

.company {
    display: none;
}

.ie-field {
    position: relative;
}

.ie {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 15px;
    position: absolute;
    top: calc(50% - 10px);
    right: 70px;
    transform: translateY(-50%);
}

.ie>input {
    display: none;
}

.ie>.checkbox {
    position: relative;
}

.ie>label {
    top: 10px;
    left: 0;
}

.ie>label:last-child {
    left: 25px;
}

.agreement {
    overflow: visible;
    margin-bottom: 15px;
}

.agreement input {
    display: none;
}

.agreement label,
.agreement>.checkbox {
    top: 50%;
    left: 30px;
    transform: translateY(-50%);
}

.agreement>.checkbox {
    left: 0;
}

.agreement>span {
    display: block;
    bottom: -25px;
}

.actions {
    margin-top: 30px;
}

.type {
    flex-direction: column;
    padding-top: 25px;
    padding-bottom: 0;
}

.type>label {
    top: 10px;
    left: 0;
}

.checkout-step {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 30px;
    background-color: var(--background-color);
    position: relative;
}

.checkout-container {
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
}

.checkout-step::after {
    content: '';
    width: 80%;
    height: 2px;
    background-color: var(--light-text-color);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.checkout-item {
    padding: 0 5px;
    background-color: var(--background-color);
    z-index: 1;
}

/* DELIVERY FORM */
.delivery-container,
.payment-container,
.endcheckout-container {
    width: 90%;
    display: flex;
    align-items: stretch;
    gap: 30px;
    margin: 30px auto;
}

.delivery-address,
.payment-content,
.endcheckout-content {
    width: 70%;
    height: 100%;
    display: flex;
    background-color: var(--neutral-color);
}

.delivery-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 15px;
    background-color: var(--background-color);
}

.form-field input,
.form-field select {
    min-width: 100%;
    font-size: 1em;
    font-weight: var(--fw-normal);
    color: var(--text-color);
    border: 1px solid var(--light-text-color);
}

.form-field input:disabled,
.form-field select:disabled {
    color: var(--light-text-color) !important;
    background-color: rgba(255, 255, 255, .5) !important;
    border: 1px solid var(--light-text-color) !important;
}

.form-field input:disabled+label {
    color: var(--light-text-color);
}

.street {
    width: 70%;
}

.number {
    width: 30%;
}

.delivery-form>.form-header {
    flex-direction: row;
    padding: 15px 0;
}

.delivery-form>.form-header>i {
    display: contents;
    font-size: 1.4em;
    color: var(--primary-color);
    background-color: none !important;
}

.delivery-form>.form-header>h2 {
    font-weight: var(--fw-semibold);
    font-size: 1.4em;
}

.save-form>.form-field:first-child {
    align-items: center;
    justify-content: start;
}

.save-form>.form-field:last-child {
    align-items: center;
    justify-content: end;
}

.a_button {
    padding: 10px 15px;
    color: var(--text-color);
    border: 1px solid var(--text-color);
    border-radius: 5px;
}

.a_button:hover {
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

.a_button:active {
    scale: .9;
}

.loader-field {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 10px;
}

.loader-field p {
    display: none;
}

.loader {
    width: 25px;
    height: 25px;
    display: none;
    border: 5px solid var(--light-text-color);
    border-radius: 50%;
    border-top-color: var(--text-color);
    animation: spin 0.3s linear infinite;
}

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

.address_table,
.payment-table,
.endcheckout-table {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.address_table>h2,
.payment-table>h2,
.endcheckout-table>h2 {
    font-size: 1.2em;
    font-weight: var(--fw-semibold);
}

.address_row,
.payment-row,
.delivery_row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
    background-color: var(--background-color);
    cursor: pointer;
}

.address_data,
.payment-data {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.address_data h2,
.payment-data h2 {
    font-size: 1em;
    text-transform: uppercase;
    font-weight: var(--fw-semibold);
}

.address_data p {
    font-size: .9em;
}

.address_radio,
.payment-radio {
    width: 24px;
    height: 24px;
    display: block;
    border: 2px solid var(--primary-color);
    border-radius: 50%;
    position: relative;
    cursor: pointer;
}

.address_radio::after,
.payment-radio::after {
    content: '';
    width: 14px;
    height: 14px;
    display: none;
    background-color: var(--primary-color);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.address_button>input[type=radio],
.payment-button>input[type=radio] {
    display: none;
}

.address_button>input[type=radio]:checked+.address_radio::after,
.payment-button>input[type=radio]:checked+.payment-radio::after {
    display: block;
}

.warning {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 15px;
    background-color: transparent;
}

.warning>p {
    padding: 10px;
    color: var(--background-color);
    background-color: var(--accent-color);
    border-radius: 5px;
}

.loader_delivery {
    width: 100px;
    height: 100px;
    display: none;
    color: var(--background-color);
    background-color: rgba(0, 0, 0, .5);
    border-radius: 5px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1200;
}

.loader_circle {
    width: 50px;
    height: 50px;
    border: 15px solid var(--text-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin .5s linear infinite;
    position: absolute;
    top: 10px;
    left: 25px;
}

.loader_delivery>p {
    position: absolute;
    left: 50%;
    bottom: 15px;
    transform: translateX(-50%);
}

/* MODAIS */
.alert_modal {
    width: 100%;
    height: 100%;
    display: none;
    background-color: rgba(0, 0, 0, .3);
    backdrop-filter: blur(5px);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1100;
}

.content_modal {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    max-width: 280px;
    padding: 15px;
    background-color: var(--text-color);
    border-radius: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.content_modal h2 {
    font-size: 1.4em;
    text-align: center;
    font-weight: var(--fw-medium);
    color: var(--background-color);
}

.content_modal .hr {
    width: 100%;
    height: 1px;
    background-color: var(--background-color);
}

.content_modal p {
    font-size: .9em;
    text-align: center;
    font-weight: var(--fw-light);
    color: var(--background-color);
}

.content_modal p span {
    font-size: .8em;
    text-align: center;
    font-weight: var(--fw-light);
    color: var(--background-color);
}

.modal-block {
    display: block;
}

.payment-data p {
    display: none;
    font-size: .9em;
    color: var(--primary-color);
    padding: 10px 15px;
    border: 1px solid var(--primary-color);
    border-radius: 5px;
}


/* CARD FORM */
.payment-form {
    width: 100%;
    display: none;
    padding: 30px;
    background-color: var(--background-color);
}

#form-checkout {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.div-input,
#form-checkout input,
#form-checkout select {
    width: 100%;
    height: 35px;
    padding: 5px 10px;
    color: var(--text-color);
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    outline: none;
}

.security-group,
.card-data-group {
    width: 70%;
    display: flex;
    align-items: center;
    gap: 5px;
}

.security-group .div-input:first-child {
    width: 30%;
}

.security-group .div-input:nth-child(2) {
    width: 50%;
}

.security-group img {
    width: 20%;
}

.document-group {
    display: flex;
    align-items: center;
    gap: 5px;
}

.document-group>select {
    width: 30% !important;
}

.document-group>input {
    width: 70% !important;
}

.card-data-group select:first-child {
    width: 40% !important;
}

.card-data-group select:last-child {
    width: 60% !important;
}

#deliveryContainer {
    display: block;
}

#paymentContainer {
    display: none;
}

#endCheckoutContainer {
    display: none;
}

.endcheckout {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 15px;
    background-color: var(--background-color);
}

.endcheckout-delivery {
    width: 100%;
    display: flex;
    align-items: stretch;
    gap: 30px;
}

.address-info,
.payment-info,
.user-info {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.user-info {
    width: 100%;
}

.address-header,
.user-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.address-header h3,
.user-header h3 {
    font-weight: var(--fw-semibold);
}

.address-header>i,
.user-header>i {
    color: var(--primary-color);
}

.address-header a {
    padding: 4px;
    font-size: .7em;
    color: var(--background-color);
    background-color: var(--primary-color);
    border-radius: 3px;
}

.address-header a:hover {
    background-color: var(--text-color);
}

.checkout-percent {
    display: none;
}

@media (max-width: 600px) {
    .form-signup {
        width: 100%;
    }

    .signin {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .form-signin,
    .request-signup {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .checkout-container {
        width: 100%;
    }

    .checkout-step::after,
    .checkout-item {
        display: none;
    }

    .checkout-percent {
        display: block;
        width: 100%;
        height: 10px;
        background-color: var(--border-color);
    }

    .percent-bar {
        height: 100%;
        background-color: var(--primary-color);
    }

    .delivery-container,
    .payment-container,
    .endcheckout-container,
    .endcheckout-delivery {
        flex-direction: column-reverse;
    }

    .delivery-address,
    .resume-payment,
    .payment-content,
    .endcheckout-content,
    .address-info, .user-info, .endcheckout {
        width: 100%;
    }
}

@media (max-width: 860px) {
    .form-signup {
        width: 100%;
    }

    .signin {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .form-signin,
    .request-signup {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .checkout-container {
        width: 100%;
    }

    .checkout-step::after,
    .checkout-item {
        display: none;
    }

    .checkout-percent {
        display: block;
        width: 100%;
        height: 10px;
        background-color: var(--border-color);
    }

    .percent-bar {
        height: 100%;
        background-color: var(--primary-color);
    }

    .delivery-container,
    .payment-container,
    .endcheckout-container,
    .endcheckout-delivery {
        flex-direction: column-reverse;
    }

    .delivery-address,
    .resume-payment,
    .payment-content,
    .endcheckout-content,
    .address-info, .user-info, .endcheckout {
        width: 100%;
    }
}

/* MODAL PIX */
.modal_payment {
    width: 100%;
    height: 100%;
    display: none;
    background-color: rgba(0, 0, 0, .5);
    backdrop-filter: blur(15px);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1200;
}

.modal_payment-content {
    width: 350px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background-color: var(--background-color);
    border-radius: 5px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.qrcode {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qrcode img {
    width: 180px;
    height: 180px;
    display: block;
}

.modal_payment-content h2 {
    font-size: 1.2em;
    font-weight: var(--fw-semibold);
}

.timer {
    font-size: 1.4em;
    font-weight: var(--fw-semibold);
    color: var(--accent-color);
}

.valid-date {
    text-align: center;
    color: var(--accent-color);
}

.copy {
    width: 100%;
    padding: 5px;
    color: var(--primary-color);
    word-break: break-word;
    background-color: var(--border-color);
}

.qr_actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}