/*
 Project Name: Luz de Maria
 Theme Name: Default
 Author: Digisoft E-commerce
 URI: www.luzdemariaoficial.com.br 

 Sumary:
 [ 1 - Adicionar à sacola ]
 [ 2 - Sacola de compras ]
 [ 3 - Checkout ] 
 [ 4 - Common ] 
*/


/*************************
 1 - Adicionar à sacola
**************************/

.wrapper-flyout {position: absolute;}
#flyout-bag {background-color: #FFF; border: #eaeaea 8px solid; display: none; min-height: 260px; opacity: 0; padding: 17px; position: fixed; right: 20px; top: 50px; width: 450px; z-index: 9999;}
#flyout-bag > ul {list-style: none; margin: -13px 0px;}
#flyout-bag > ul > li {clear: both; display: block; min-height: 40px;}
#flyout-bag > ul > li.bd {border-top: 1px solid #eaeaea;}
#flyout-bag > ul > li h3 {display: inline-block; margin: 10px 0px 0px 7px; font-weight: 700;}
#flyout-bag > ul > li.title {height: 50px;}
#flyout-bag > ul > li.title > ul {margin: 10px 0px;}
#flyout-bag > ul > li > ul {list-style: none; margin: 10px 5px;}
#flyout-bag > ul > li > ul > li {display: block; float: left;}
#flyout-bag > ul > li > ul > li:first-of-type {text-align: left; width: 70%;}
#flyout-bag > ul > li > ul > li {text-align: right; width: 30%;}
#flyout-bag > ul > li.title > ul a {display: inline-block; margin: 13px 0px 0px;}

#flyout-bag > ul > li > ul.product img {/*border: #C29C6B 1px solid;*/ float: left; height: auto; margin: 0px 10px 10px 0px; vertical-align: top; width: 54px;}
#flyout-bag > ul > li > ul.product > li > span {font-weight: bold;}
#flyout-bag > ul > li > ul.product > li > span.old-price {font-style: italic; font-weight: 300; text-decoration: line-through;}

#iflybag {background: url(../img/header/bag-flyout.svg) 0px 0px no-repeat; color: #FFF; display: inline-block; height: 21px; padding: 19px 0px 0px 16px; text-align: center; vertical-align: top; width: 24px;}

#flyout-bag ul.buttons-flyout-bag {display: block; float: right; margin: 10px 0px 0px;}
#flyout-bag ul.buttons-flyout-bag li {margin: 0px 0px 5px 5px; width: auto !important;}

@media screen and (max-width: 520px) {
    #flyout-bag {right: 5%; width: 80%; top: 80px;}
    #flyout-bag > ul > li.title > ul > li {width: 0%;}
    #flyout-bag > ul > li.title > ul > li:first-of-type {width: 100%;}
    #flyout-bag > ul > li h3 {font-size: 17px;}
    #flyout-bag > ul > li.title > ul > li > a {display: none;}
}

@media screen and (max-width: 450px) {
    #flyout-bag ul.buttons-flyout-bag {margin: 20px 0px 0px;}
    #flyout-bag ul.buttons-flyout-bag li {margin: 0px 0px 10px 0px;}
}


/*************************
 2 - Sacola de compras
**************************/

h1.shopping-bag {background: url(../img/header/bag.svg) 0px 0px no-repeat; padding: 10px 0px 5px 44px; font-size: 24px; font-weight: 800;}

h1.ship {background: url(../img/icon-ship.svg) 0px 3px no-repeat; padding: 10px 0px 5px 53px}

.container-shopping-bag {border: #EAEAEA 1px solid; display: block; min-height: 120px; padding: 15px;}

.container-shopping-bag ul.list-products-bag {list-style: none; margin: 0px;}
.container-shopping-bag ul.list-products-bag > li {border-top: 1px solid #EAEAEA; clear: both; display: block; min-height: 40px;}
.container-shopping-bag ul.list-products-bag > li:first-of-type {border-top: none;}
.container-shopping-bag ul.list-products-bag > li.header {height: 50px;}
.container-shopping-bag ul.list-products-bag > li.header span {display: inline-block; margin: 10px 5px;}
.container-shopping-bag ul.list-products-bag > li.header > ul {display: block; float: right; margin: 1px 0px 15px 0px; text-align: right;}
.container-shopping-bag ul.list-products-bag > li.title {height: 40px;}
.container-shopping-bag ul.list-products-bag > li.title {color: #24150b; font-weight: 600; text-transform: uppercase; font-size: 14px;}
.container-shopping-bag ul.list-products-bag > li ul {list-style: none; margin: 10px 5px;}
.container-shopping-bag ul.list-products-bag > li ul > li {display: block; float: left;}
.container-shopping-bag ul.list-products-bag > li ul > li:first-of-type {width: 60%;}
.container-shopping-bag ul.list-products-bag > li ul > li {text-align: left; width: 20%;}
.container-shopping-bag ul.list-products-bag > li ul li.price {text-align: right;}
.container-shopping-bag ul.list-products-bag > li.title ul a {display: inline-block; margin: 13px 0px 0px;}
.container-shopping-bag ul.list-products-bag > li ul.product img {/*border: #EAEAEA 1px solid;*/ float: left; height: auto; margin: 0px 10px 10px 0px; vertical-align: top; width: 54px;}
.container-shopping-bag ul.list-products-bag > li ul.product > li > a {color: #111; font-weight: bold; text-decoration: none;}
.container-shopping-bag ul.list-products-bag > li ul.product > li > a:hover {color: #b22085; font-weight: bold; text-decoration: none;}
.container-shopping-bag ul.list-products-bag > li ul.product > li > span {font-weight: bold;}
.container-shopping-bag ul.list-products-bag > li ul.product > li span.free-shipping {color: #F00; font-size: 12px; font-weight: normal;}
.container-shopping-bag ul.list-products-bag > li.subtotal {text-align: right;}
.container-shopping-bag ul.list-products-bag > li.subtotal span {display: inline-block; font-weight: bold; margin: 15px 0px 0px 0px; color: #24150b;}
.container-shopping-bag span.alert-promo {color: #f9125f; font-size: 12px; font-weight: bold; font-style: normal; margin-right: 10px;}

.container-shopping-bag ul.product > li span.price {display: none;}
span.unit {display: block; font-size: 12px; font-weight: 300 !important; font-style: italic; margin: 0px 0px 10px 0px;}
.container-shopping-bag ul.product > li span.old-price {text-decoration: line-through;}

ul.buttons-shopping-bag {display: block; list-style: none; margin: 20px 0px 50px; text-align: right;}
ul.buttons-shopping-bag li {display: inline-block; margin: 0px 0px 0px 10px; width: auto !important; vertical-align: top;}

form.shopping-bag input {border: #EAEAEA 1px solid; display: inline-block; text-align: center; vertical-align: top; width: 30px;}
form.shopping-bag select {border: #EAEAEA 1px solid; width: 60px;}
form.shopping-bag button {background-color: transparent; border: none; color: #111; display: inline-block;}

#discount-area {font-weight: 600; color: #b22085;}
.linha-desconto {color: #b22085;}

.container-shopping-bag ul.list-ship {display: inline-block; list-style: none; min-height: 82px; /*margin: 20px 0px; padding: 15px 0px 0px;*/ width: 100%;}
.container-shopping-bag ul.list-ship li {display: block; float: left; width: 33%;}
.container-shopping-bag ul.list-ship li.price {text-align: right; width: 34%;}

.container-shopping-bag ul.list-ship ul {list-style: none;}
.container-shopping-bag ul.ad-margin-list-ship {margin: 0px 0px 20px 0px;}
.container-shopping-bag ul.list-ship ul:first-of-type {margin-left: 5px;}
.container-shopping-bag ul.list-ship ul li {display: block; margin: 2px 0px; min-height: 20px; width: 100%;}
.container-shopping-bag ul.list-ship ul li:first-of-type span {color: #24150b; font-weight: bold; font-size: 14px;}
.container-shopping-bag ul.list-ship ul li p {padding-right: 20px;}
form.search-cep-coupon input {border: 1px solid #EAEAEA; width: 80px;}
form.search-cep-coupon span.loading-address {background: url("../img/loading-buy.gif") no-repeat scroll 0px 0px transparent; background-size: 28px; display: none; height: 28px; margin: 2px 10px; width: 28px;}

.container-shopping-bag .total-buy {border-top: #EAEAEA 1px solid; display: block; font-size: 16px; font-weight: 400; padding: 15px 0px 0px 0px; text-align: right; width: 100%;}
.container-shopping-bag .total-buy span {display: block; font-weight: bold; color: #b22085; font-size: 18px;}
.container-shopping-bag .total-buy span.installment {color: #24150b; display: inline-block; font-size: 13px; font-weight: 500; line-height: 14px; margin: 5px 0px 0px; vertical-align: top;}
span.secondary-option {color: #999;}
span.time-ship {color: #b22085; font-weight: bold; display: block; margin: 0px 0px 10px 26px;}

.container-shopping-bag span.print-name-size, .container-shopping-bag > li span.qtd {display: block; font-size: 12px; font-weight: normal; text-transform: capitalize;}

.bt-trash {
    /*background: transparent url(../img/header/trash.svg) center center no-repeat; */
    background-size: 18px;
    padding: 0 10px;
    margin: 0 0 0 10px;
    box-sizing: border-box;
    width: 30px;
    height: 24px;
    vertical-align: top;
    cursor: pointer;
}

.bt-trash {/*background: transparent url(../img/icon-trash.svg) center center no-repeat;*/ width: 20px; height: 30px; margin-left: 10px; background-size: 17px;}

/* Embrulhar para presente */
.shopping-bag input.filter[type="checkbox"] + label {color: #111; font-style: italic;}
.shopping-bag input.filter[type="checkbox"] + label:hover {color: #E3125F;}
.shopping-bag .gift-wrap-info {background-color: #fafafa; padding: 4px 7px; font-size: 12px; border-radius: 4px; margin: 4px 0 10px 0; font-style: italic;}

.list-checkout .product .gift-box-include {font-style: italic;}

@media screen and (max-width: 767px) {
    form.shopping-bag input {display: block;}    
    .container-shopping-bag ul.list-ship li {float: none; margin: 0px 0px 10px 0px; width: 100% !important;}
    .container-shopping-bag .column-coupon-info {display: none !important;}
    
    .shopping-bag input.filter[type="checkbox"] + label {margin: 0 0 25px 0 !important;}
}

@media screen and (max-width: 520px) {
    ul.buttons-shopping-bag li {display: block; margin: 0px 10px 10px 0px;}
    .container-shopping-bag ul.list-products-bag > li ul li span.price {display: block;}
    .container-shopping-bag ul.list-products-bag > li ul li.price {display: none;}
    .container-shopping-bag ul.list-products-bag > li ul li:first-of-type {text-align: left; width: 70%;}
    .container-shopping-bag ul.list-products-bag > li ul li {width: 30%;}
    .container-shopping-bag ul.ad-margin-list-ship {margin: 10px 0px;}
    .container-shopping-bag ul.list-ship ul li p {padding-right: 0px;}
}


/*************************
 3 - Checkout
**************************/
/*
Antes: F9125F
Novo: FF3E6F
*/
/* Checkout-Login */
.login-new-account {display: flex; flex-direction: row; justify-content: center; align-items: flex-start; margin: 30px 0 20px;}
.login-new-account > div {background-color: #FFF; width: 49%; max-width: 550px;}
.login-new-account > div > div {background-color: #fafafa; margin: 0 20px; padding: 40px 0;}
.login-new-account > div > div > p {text-transform: uppercase; font-size: 11px; color: #333; text-align: center; margin: 0 0 20px;}
.new-account-checkout {}
/*.login-checkout {border-left: 1px solid #EAEAEA;}*/
.login-new-account div h2 {text-transform: uppercase; color: #000; font-size: 18px; font-weight: bold; text-align: center; margin: 0 0 5px; display: inline-block; width: 100%;}

.login-new-account form {width: 80%; margin: 30px auto 0px; max-width: 350px;}
.login-new-account form label, .login-new-account form input, .login-new-account form button {width: 100%; box-sizing: border-box;}
.login-new-account form label {font-size: 14px; color: #000; font-weight: 600; margin: 5px 0 0; text-transform: uppercase;}
.login-new-account form input {margin: 5px 0 5px; height: 37px; background-color: #fff;}
.login-new-account form button {background-color: #b22085; /*#770e5b*/ border-color: #b22085; /*#770e5b*/ padding: 0 20px; text-transform: uppercase; min-width: unset; /*300px;*/ font-size: 17px; font-weight: bold; margin: 5px 0 0;}
.login-new-account form button:hover {background-color: #d02085; /*#b22085*/ border-color: #d02085; /*#b22085*/}
.login-new-account form div {text-align: center; display: block;}
.login-new-account form a {text-transform: uppercase; text-align: center; margin: 20px auto 0; display: inline-block; font-size: 11px;}
.login-new-account form span.info {font-size: 14px; color: #E3125F; text-align: left; margin: 0 0 10px; display: none;}

@media screen and (max-width: 950px) {
    .login-new-account {flex-direction: column; margin: 10px 0 20px;}
    .login-new-account > div {width: 100%;}
    .login-new-account > div > div {margin: 0;}
    .login-new-account form {margin: 20px auto 0px;}
    .login-checkout {border-left: none; margin-top: 10px;}
}

/**/

h1.checkout {background: url(../img/header/bag.svg) 0px 0px no-repeat; padding: 10px 0px 5px 44px; font-size: 24px; font-weight: 800; text-align: left;}

.list-checkout {display: inline-block; list-style: none; margin: 0px 0px 50px 0px; width: 100%;}
.list-checkout > li {border: #EAEAEA 1px solid; display: block; float: left; min-height: 200px; width: 32.3%;}
.list-checkout > li.center {margin: 0px 10px;}
.list-checkout > li.product {background-color: #FBFBFB;}

.list-checkout li > ul {list-style: none; margin: 24px 17px;}
.list-checkout li > ul > li {margin: 0px 0px 10px 0px; width: 100%;}
.list-checkout li > ul > li.head1 {border-bottom: #EAEAEA 1px solid; color: #24150b; font-size: 14px; font-weight: 700; min-height: 30px; text-transform: uppercase;}
.list-checkout li > ul > li.head2 {border-bottom: #EAEAEA 1px solid; color: #666; font-size: 12px; font-weight: 400; min-height: 30px; text-transform: uppercase;}
.list-checkout li > ul > li p.info {}
.list-checkout li > ul > li a.lnk-head {color: #24150b; float: right; font-weight: 400; font-size: 13px; text-decoration: none;}
.list-checkout li > ul > li a.lnk-head:hover {text-decoration: underline;}

.list-checkout li table {margin: 30px 0px 0px 0px; width: 100%;}
.list-checkout li table thead td {border-bottom: #EAEAEA 1px solid; border-top: #EAEAEA 1px solid; color: #24150b; font-weight: bold; text-transform: uppercase; height: 20px;}
.list-checkout li table td {border: none; padding: 10px 0px;}
.list-checkout li table tbody td {border-bottom: #EAEAEA 1px solid;}
.list-checkout li table tbody td.price {text-align: right;}
.list-checkout li table tbody td.price span.old-price {text-decoration: line-through;}
.list-checkout li table tbody td img {border: none; float: left; margin: 0px 10px 0px 0px; width: 60px;}

.list-checkout li table.payment {margin: 0px;}
.list-checkout li table.payment tbody td {border-bottom: none;}
.list-checkout li table.payment tbody td.total {border-top: #EAEAEA 1px solid; color: #24150b; font-weight: 600; text-transform: uppercase;}

.list-checkout li p {margin: 0px 0px 10px 0px;}
.list-checkout li p.bold, .list-checkout li span.bold {color: #333; font-weight: bold;}
.list-checkout li p.new {margin: 30px 0px 5px;}
.list-checkout li p.inline {display: inline-block; margin: 0px 0px 10px 0px; width: 48.5%;}
.list-checkout li p.left {margin: 0px 1% 10px 0px; vertical-align: top;}
.list-checkout li p.right {margin: 0px 0px 10px 0%;}
.list-checkout li label {display: block; margin: 0px 0px 5px 0px;}
.list-checkout li label span {color: #CCC; font-size: 12px;}

.list-checkout li input {border-color: #CCC; width: 92%;}
.list-checkout li select {border-color: #CCC; cursor: pointer; width: 100%;}
.list-checkout li p.inline input {border-color: #CCC; width: 83%;}
.list-checkout li p.inline select {border-color: #CCC; width: 90%;}
.list-checkout li p select.small {width: 100px;}
.list-checkout li input.color {border-color: #C29C6B !important;}
.list-checkout li input[type="radio"] {height: 14px; margin: 0px 2px 3px 0px; padding: 0px; vertical-align: middle; width: 14px !important;}
/*.list-checkout li input[type="radio"]:first-of-type {margin: 0px 2px 3px 0px;}*/
.list-checkout li input[type="checkbox"] {height: 14px; margin: 0px 2px 3px 0px; padding: 0px; vertical-align: middle; width: 14px !important;}
.list-checkout li input.phone-ddd, .list-checkout li input.phone-ddd {display: inline-block;}
.list-checkout li input.phone-ddd {width: 40px !important;}
.list-checkout li input.phone-number {margin: 0px 0px 0px 5px; padding: 0px 8px; width: 50% !important;}
.list-checkout li span.search {background: transparent url(../img/loading-buy.gif) 0px 0px no-repeat; background-size: 28px; display: none; height: 28px; margin: 4px 0px 0px 10px; position: relative; vertical-align: top; width: 28px;}

.list-checkout span.print-name-size, .list-checkout > li span.qtd {display: block; font-size: 12px; text-transform: capitalize;}

.list-checkout-area-login {display: flex; margin: 0px auto; width: 33%;}
.list-checkout-area-login > li {margin: 0 0 50px 0 !important; width: 100%;}

.list-create-account {display: flex; justify-content: center;}

#container-data-pj, #container-data-address, #container-data-same-address-card {display: none;}
#container-data-same-address-card {margin: 0px 0px 10px 17px;}

.logo-pagseguro {display: none; background: #FFF url(../img/selo04_200x60.gif) 0px 0px no-repeat; height: 62px; width: 100%; }

#f-forget-password {display: none;}

.process-finalized {text-align: center;}
.process-finalized h2 {font-size: 24px; font-weight: bold; color: #b22085;}
.process-finalized p.header {font-size: 16px; line-height: 18px; max-width: 50%; margin: 10px auto; text-align: center;}
.process-finalized p {font-size: 16px;}
.process-finalized p.alight {font-weight: 400; margin-bottom: 10px;}
.process-finalized p.name-attr {color: #24150b; font-weight: bold;}
.process-finalized p.ad-margin-bottom {margin-bottom: 50px;}
.process-finalized button, .process-finalized img {margin: 20px 0px;}

/*.ballon-validation {background-color: #FFE8E8; border: #FFD5D5 1px solid; border-radius: 3px; color: #FF6D6D; display: block; font-size: 14px; margin: 20px 0px; padding: 20px 0px; position: relative; width: 99.4%;}
.ballon-validation span {display: inline-block; margin: 0px 17px;}*/

.ballon-validation {background-color: #FFE8E8; border: #FFD5D5 1px solid; border-radius: 3px; color: #FF6D6D; display: block; font-size: 14px; margin: 20px 0px; padding: 20px 1%; position: relative; width: 97.5%;}
.ballon-validation span {display: inline-block; margin: 0px 17px;}

#coupon-box, #coupon-result {display: none;}

div.flag-brasil-visa {background: transparent url(../img/icon-flag-brasil.jpg) center right no-repeat; color: #999; display: inline-block; height: 21px; line-height: 22px; padding: 0 35px 0 0;}

a#add-coupon {display: table; background-color: #24150b; border: #24150b 1px solid; border-radius: 100px; color: #fff; padding: 3px 10px;}

#btn-copy-pix {font-weight: bold; text-transform: uppercase; padding: 0 20px; margin: 0 0 20px; background-color: #b22085; border: 1px solid #b22085;}

@media screen and (max-width: 950px) {
   .list-checkout > li {display: inline-block; float: none; margin: 0px 0px 20px 0px; width: 100%;}
   .list-checkout > li.center {margin: 0px 0px 20px 0px;}
   .list-checkout-area-login {width: 100%;}
   p.inline {}
}

@media screen and (max-width: 768px) {
    .process-finalized p.header {max-width: 90%;}
    .process-finalized h2 {font-size: 22px; font-weight: bold;}
    
    .ballon-validation {padding: 20px 2%; width: 95.5%;}
}

@media screen and (max-width: 520px) {
    h1.shopping-bag, h1.ship, h1.checkout {font-size: 20px;}
    p.inline-phone {display: block !important; width: 100% !important;}
    
    .ballon-validation {padding: 20px 3%; width: 93.5%;}
}


/*************************
 4 - Common
**************************/

.ballon {background-color: #EF323D; border-radius: 2px; color: #fff; font-size: 13px; line-height: 18px; min-height: 14px; margin-left: -270px; opacity: 0; position: absolute; padding: 10px; width: 235px;}
.ballon > .arrow {border-bottom: 8px solid transparent; border-left: 8px solid #EF323D; border-top: 8px solid transparent; float: right; height: 0px; margin-left: 0px; position: absolute; right: -5px; top: 11px; width: 0px;}

#dark {z-index: 9991 !important;}
#boxLight {z-index: 9992 !important;}
#bannerEbit img {max-width: 100%;}

.gifts {list-style: none; display: flex; flex-direction: row; padding: 5px 0 0 5px; border: 1px solid #b22085; margin: 10px auto;}
.gifts li {display: inline-block; vertical-align: top; font-weight: bold; width: auto !important; margin: 0 !important;}
.gifts li:first-of-type {width: 64px; height: auto;}
.gifts li:first-of-type img {border: #EAEAEA 1px solid; margin: 0 8px 2px 0; width: 56px;}
.gifts li span {font-size: 12px; color: #b22085; margin-left: 5px;}
.gifts li p {font-weight: normal; font-size: 12px;}

.msg-validation-custom {
    display: none;
}