/**
 * Estilos frontend do LMX Brasil Store
 */

/* Formatação de preços */
.lmx-price-container {
    margin: 25px 0;
    font-family: inherit;
}

.lmx-pix-price {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.lmx-pix-price-content {
    display: inline-flex;
    align-items: center;
    margin-right: 10px;
}

.lmx-pix-price .price {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #4dc700;
}

.pixdiscount {
    font-size: 14px;
    line-height: 1.57;
    color: #39B54A;
    padding: 4px 13px;
    border-radius: 5px;
    background: #F4FAF6;
    font-weight: 700;
    border: 1px solid #e9e9e9;
    white-space: nowrap;
}

.lmx-card-price {
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.lmx-card-price-content {
    margin-left: 10px;
}

.lmx-card-price-main {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 5px;
}

.lmx-card-price-amount {
    color: #000;
}

.lmx-card-price .text {
    color: #000;
    font-size: 16px;
    margin-left: 5px;
}

#install {
    font-size: 14px;
    color: #666;
}

.svg_icon_sp {
    width: 48px;
    height: 48px;
    margin-right: 10px;
    color: #4dc700;
}

/* Checkout PIX */
.lmx-pix-checkout {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
    font-family: inherit;
}

.lmx-pix-title {
    color: #4dc700;
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 20px;
}

.lmx-pix-timer {
    background: #ffffd1;
    color: #bf9500;
    padding: 12px 20px;
    border-radius: 20px;
    display: inline-block;
    margin: 20px 0;
    font-size: 14px;
}

.lmx-qr-container {
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin: 20px 0;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.lmx-qr-code img {
    max-width: 300px;
    height: auto;
    margin: 20px 0;
}

.lmx-copy-button {
    background: #4dc700;
    color: white;
    padding: 15px 30px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    margin: 20px 0;
    transition: background-color 0.3s;
}

.lmx-copy-button:hover {
    background: #45b300;
}

.lmx-copy-button:active {
    transform: translateY(1px);
}

.lmx-price-display {
    font-size: 18px;
    font-weight: bold;
    margin: 15px 0;
    color: #333;
}

/* Responsividade */
@media (max-width: 768px) {
    .lmx-pix-price {
        flex-direction: column;
        align-items: flex-start;
    }

    .lmx-pix-price-content {
        margin-bottom: 10px;
    }

    .lmx-card-price {
        flex-direction: column;
        align-items: flex-start;
    }

    .lmx-card-price-content {
        margin-left: 0;
        margin-top: 10px;
    }

    .lmx-pix-checkout {
        padding: 15px;
    }

    .lmx-pix-title {
        font-size: 24px;
    }

    .lmx-qr-container {
        padding: 20px;
    }

    .lmx-qr-code img {
        max-width: 250px;
    }
}

@media (max-width: 480px) {
    .lmx-pix-price .price {
        font-size: 20px !important;
    }

    .lmx-card-price-main {
        font-size: 18px;
    }

    .pixdiscount {
        font-size: 12px;
        padding: 3px 10px;
    }

    .lmx-qr-code img {
        max-width: 200px;
    }

    .lmx-copy-button {
        padding: 12px 20px;
        font-size: 14px;
    }
}


:root {
    --default-radius: 30px;
    --texts-font-family: Rubik, sans-serif;
    --titles-font-family: Rubik, sans-serif;
    --titles-uppercase: initial;
    --btn-uppercase: initial;
    --texts-font-regular: 400;
    --texts-font-medium: 500;
    --texts-font-bold: 700;
    --titles-font-regular: 400;
    --titles-font-medium: 500;
    --titles-font-bold: 700;
    --btn-primary-bg-color: hsl(272, 100%, 49%);
    --btn-primary-txt-color: #FFFFFF;
    --btn-secondary-bg-color: #8400fa;
    --btn-secondary-txt-color: #FFFFFF;
    --btn-tertiary-txt-color: #FFFFFF;
    --discount-tag-bg-color: hsl(272, 100%, 49%);
    --discount-tag-txt-color: #FFFFFF;
    --step-tag-bg-color: rgb(132, 0, 250);
    --step-tag-txt-color: #FFFFFF;
    --desktop-active-color: rgb(132, 0, 250);
    --cart-total-color: #4c4c4c;
    --title-color: #4dc700;
    --description-color: #000000;
    --footer-border-color: transparent;
    --footer-mobile-position: center;
    --background-cartao-pix: rgb(132, 0, 250);
    --letras-cartao-pix: #fff;
    --letras-boleto: #fff
}

.medium {
    font-weight: 500
}

.c-text {
    color: #5c5c5c !important
}

.mt10 {
    margin-top: 18px
}

.f12 {
    font-size: 14px
}

h1 {
    color: var(--title-color);
    font-family: var(--titles-font-family);
    font-weight: var(--texts-font-regular);
    line-height: 1.4em;
    margin: 0 0 15px;
    text-transform: var(--titles-uppercase)
}

h1.bold {
    font-weight: var(--titles-font-bold)
}

h1 {
    font-size: 30px
}

.f11 {
    font-size: 11px
}

.f12 {
    font-size: 12px
}

.f13 {
    font-size: 13px
}

.f14 {
    font-size: 14px
}

.f15 {
    font-size: 15px
}

p {
    line-height: 1.4em
}

p:not(.-custom-margin) {
    margin-bottom: 10px
}

.medium {
    font-weight: var(--texts-font-medium)
}

.bold {
    font-weight: var(--texts-font-bold)
}

.ctx-title {
    color: var(--title-color);
    font-family: var(--titles-font-family);
    text-transform: var(--titles-uppercase)
}

.ctx-title.bold {
    font-weight: var(--titles-font-bold)
}

.-nowrap {
    white-space: nowrap
}

.clearfix:after,
.clearfix:before {
    content: "";
    display: table;
    line-height: 0
}

.clearfix:after {
    clear: both
}

.inline-block {
    zoom: 1;
    display: inline-block
}

.relative {
    position: relative
}

.mt3 {
    margin-top: 3px
}

.mt10 {
    margin-top: 10px
}

.mt25 {
    margin-top: 25px
}

.mt30 {
    margin-top: 30px
}

.mt35 {
    margin-top: 35px
}

.mr10 {
    margin-right: 10px
}

.mr15 {
    margin-right: 15px
}

.mb10 {
    margin-bottom: 10px
}

.mb15 {
    margin-bottom: 15px
}

.mb40 {
    margin-bottom: 40px
}

.text-center {
    text-align: center
}

.c-text {
    color: #333 !important
}

.dotgamers-green {
    color: var(--title-color);
}

.black-60 {
    color: #666 !important
}

.black-80 {
    color: #333 !important
}

a {
    color: var(--btn-tertiary-txt-color);
    text-decoration: none
}

a:hover {
    text-decoration: underline
}

button {
    -webkit-appearance: none;
    background: #fff;
    border: 1px solid #d0d0d0;
    border-radius: var(--default-radius);
    box-sizing: border-box;
    color: #333;
    font-family: var(--texts-font-family);
    font-size: 13px;
    font-weight: var(--texts-font-regular);
    line-height: 14px;
    margin: 0;
    outline: 0;
    padding: 16px 20px 15px;
    transition: all .4s
}

button:-moz-placeholder {
    color: rgba(51, 51, 51, .3)
}

button:-ms-input-placeholder {
    color: rgba(51, 51, 51, .3)
}

button::-webkit-input-placeholder {
    color: rgba(51, 51, 51, .3)
}

button {
    border: 0;
    cursor: pointer;
    outline: 0
}

.icon {
    display: inline-block
}

.icon-cellphone {
    background: url(../img/icons/cellphone.svg) no-repeat;
    height: 20px;
    width: 14px
}

.icon-copy-paste {
    height: 18px;
    width: 16px
}

.icon-copy-paste:not(.-dark) {
    background: url(../img/icons/copy-paste.svg) no-repeat
}

.icon-copy-paste.-dark {
    background: url(../img/icons/copy-paste-dark.svg) no-repeat
}

.btn-copy-paste {
    --btn-min-height: 50px;
    --btn-padding: 14px 30px;
    --btn-font-size: 14px;
    --btn-text-align: center;
    --btn-line-height: 22px;
    background-color: #666;
    color: #fff;
    font-weight: var(--texts-font-bold);
    position: relative
}

.btn-copy-paste.-full {
    --btn-display: block;
    width: 100%
}

.btn-copy-paste:hover {
    background-color: #4d4d4d
}

.finalization-pix {
    --gap: 0;
    --default-flex: 0 1 auto;
    --code-flex: 0 1 auto;
    --container-mt: 42px;
    --container-width: 322px;
    --title-alignment: flex-end;
    --pay-description-font-size: 22px;
    --pay-description-mt: 19px;
    --pay-description-mb: 49px
}

.finalization-pix {
    --qr-order: 1;
    --qr-max-width: 430px;
    --text-align: left;
    --loader-font-size: 16px;
    --loader-svg-width: 36px;
    --loader-svg-height: 8px;
    --loader-padding: 14px 32px 15px;
    --description-min-width: 335px;
    --total-mb: 0px;
    --finalization-footer-space: 53px;
    --finalization-top-space: 55px;
    flex-wrap: wrap;
    margin-top: var(--finalization-top-space);
    padding-bottom: var(--finalization-footer-space)
}

.finalization-pix h1 {
    font-size: var(--finalization-title-fontsize, 40px);
    line-height: var(--finalization-title-lineheight, 50px);
    margin: 0
}

.finalization-pix .-container {
    margin-top: var(--container-mt);
    max-width: var(--container-width)
}

.finalization-pix .price-total .-value {
    color: var(--cart-total-color)
}

.finalization-pix .icon-cellphone {
    min-width: 14px
}

.finalization-pix .container-title {
    display: flex;
    flex: var(--default-flex);
    justify-content: var(--title-alignment, "flex-start");
    padding-right: var(--gap);
    text-align: var(--text-align)
}

.finalization-pix .container-title .-description {
    color: var(--description-color);
    font-size: var(--pay-description-font-size);
    line-height: 1.53;
    margin-bottom: var(--pay-description-mb);
    margin-top: var(--pay-description-mt);
    min-width: var(--description-min-width)
}

.finalization-pix .container-title .-description .time-left {
    display: inline-block;
    max-width: 85px;
    min-width: 51px;
    white-space: nowrap
}

.finalization-pix .container-title .-loader {
    background-color: #ffffd1;
    border-radius: 20px;
    color: #bf9500;
    display: inline-block;
    font-size: var(--loader-font-size);
    line-height: 19px;
    padding: var(--loader-padding)
}

.finalization-pix .container-title .-loader svg {
    height: var(--loader-svg-height);
    margin-bottom: 1px;
    margin-left: 10px;
    width: var(--loader-svg-width)
}

.finalization-pix .qr-code {
    flex: var(--code-flex);
    order: var(--qr-order)
}

.finalization-pix .qr-code img {
    max-width: 70%;
    margin-bottom: 15px;
    margin-top: 15px;
}

.finalization-pix .qr-code .-top-info {
    line-height: 1.4
}

.finalization-pix .qr-code .-holder {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .05);
    box-sizing: border-box;
    max-width: var(--qr-max-width);
    padding: var(--qr-box-padding, 40px);
    width: 100%
}

.finalization-pix .qr-code .price-total {
    font-size: 16px;
    line-height: 19px;
    margin-bottom: var(--total-mb)
}

.finalization-pix .qr-code .-gateway-logo {
    height: auto;
    max-width: 100px
}

.finalization-pix .qr-code .-helper {
    margin-top: 40px;
    max-width: var(--qr-max-width);
    width: 100%
}

.finalization-pix .qr-code .-helper .-text {
    line-height: 1.4;
    margin: 0 auto;
    max-width: 330px
}

.finalization-pix .qr-code .-helper a {
    border-radius: 4px;
    background-color: #666;
    color: white;
    padding: 11px;
    transition: background .3s
}

.finalization-pix .qr-code .-helper a:hover {
    background-color: #515151;
    text-decoration: none
}

.finalization-pix .qr-code .mobile-description {
    line-height: 1.4;
    margin-left: auto;
    margin-right: auto;
    max-width: 230px
}

:root {
    --desktop-width: 1196px;
    --holder-recomm-padding: 5px 51px;
    --form-input-max-width: none;
    --form-input-group-cpf: 63%;
    --form-input-group-cnpj: 63%
}

.-mobile {
    display: none !important
}

.container {
    margin: 0 auto;
    max-width: var(--desktop-width);
    width: 100%
}

::-moz-selection {
    background: #4181cd;
    color: #fff
}

::selection {
    background: #4181cd;
    color: #fff
}

.flex {
    display: flex
}

.flex.around {
    justify-content: space-around
}

.flex.all-center {
    align-items: center;
    justify-content: center
}

#tooltip-copy {
    background-color: #333;
    border-radius: 4px;
    bottom: 100%;
    color: #fff;
    display: none;
    left: 50%;
    line-height: 12px;
    margin-bottom: 8px;
    padding: 7px 13px;
    position: absolute;
    text-align: center;
    transform: translateX(-50%)
}

#tooltip-copy:after {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #333;
    content: "";
    display: inline-block;
    left: 50%;
    margin-left: -5px;
    position: absolute;
    top: 100%
}

@media (max-width:1060px) {
    :root {
        --responsive-padding: 16px
    }

    .container {
        box-sizing: border-box;
        padding: 0 var(--responsive-padding, 16px)
    }

    h1 {
        font-size: 25px;
        line-height: 1.3em
    }

    .f15 {
        font-size: 14px
    }
}

@media (max-width:800px) {
    .finalization-pix {
        --qr-max-width: 330px;
        --qr-box-padding: 40px 30px
    }
}

@media (max-width:700px) {
    .-desktop.-real {
        display: none !important
    }

    .-mobile.-real {
        display: inline-block !important
    }

    .finalization-pix {
        --container-width: 322px;
        --finalization-title-fontsize: 30px;
        --pay-description-font-size: 17px
    }

    .finalization-pix {
        --gap: 0;
        --qr-box-padding: 30px 40px;
        --qr-order: initial;
        --default-flex: 1 0 100%;
        --text-align: center;
        --title-alignment: center;
        --pay-description-mt: 19px;
        --pay-description-mb: 24px;
        --loader-font-size: 15px;
        --loader-svg-width: 27px;
        --loader-svg-height: 6px;
        --loader-padding: 12px 32px 13px;
        --description-min-width: auto;
        --total-mb: 16px;
        --finalization-footer-space: 16px;
        --finalization-top-space: 7px;
        --container-mt: 19px;
        --finalization-title-lineheight: 35px
    }

    .finalization-pix h1 {
        margin: 0 auto;
        max-width: var(--container-width)
    }

    .finalization-pix .qr-code {
        display: flex;
        justify-content: center;
        width: 100%
    }

    .finalization-pix .qr-code .-holder {
        margin: 37px 0 15px
    }

    .finalization-pix .-gateway {
        border-top: 1px dashed hsla(0, 0%, 40%, .3);
        margin-top: 30px;
        padding-top: 25px
    }

    .finalization-pix .btn-copy-paste {
        padding-left: 0;
        padding-right: 0
    }

    .finalization-pix .btn-copy-paste span:not(#tooltip-copy) {
        font-size: 16px
    }
}

@media (max-width:600px) {
    :root {
        --negative-responsive-padding: -16px
    }
}

@media (max-width:350px) {
    :root {
        --responsive-padding: 10px;
        --negative-responsive-padding: -10px
    }

    .finalization-pix {
        --qr-box-padding: 30px 20px
    }
}

.buttonClicked {
    background-color: var(--title-color) !important;
    ;
    color: white !important;
}

.buttonClicked:hover {
    background-color: var(--title-color) !important;
    color: white !important;
}