/*
 Project Name: Divina Noite
 Theme Name: Default
 Author: Digisoft Informática
 URI: www.lojadivinanoite.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: #C29C6B 4px 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 #C29C6B;}
#flyout-bag > ul > li h3 {display: inline-block; margin: 10px 0px 0px 7px;}
#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/icon-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;}
.no-svg #iflybag {background: url(../img/icon-bag-flyout.png) 0px 0px no-repeat; height: 41px; width: 40px;}

#flyout-bag ul.buttons-flyout-bag {display: block; float: right; margin: 10px 0px 0px;}
#flyout-bag ul.buttons-flyout-bag li {margin: 0px 0px 0px 10px; 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/icon-shopping-bag.svg) 0px 0px no-repeat; padding: 10px 0px 5px 44px}
.no-svg h1.shopping-bag {background: url(../img/icon-shopping-bag.png) 0px 0px no-repeat; padding: 10px 0px 5px 44px}

h1.ship {background: url(../img/icon-ship.svg) 0px 3px no-repeat; padding: 10px 0px 5px 53px}
.no-svg h1.ship {background: url(../img/icon-ship.png) 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: #C29C6B; font-weight: 400;}
.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: #B89251; 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: 400; margin: 15px 0px 0px 0px;}
.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; font-weight: 300 !important; color: #666;}

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;}

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: #FF3E6F;}
.linha-desconto {color: #FF3E6F;}

.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: #C29C6B; font-weight: 400;}
.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.gif") no-repeat scroll 0px 0px transparent; 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;}
.container-shopping-bag .total-buy span.installment {color: #B89251; display: inline-block; font-size: 13px; font-weight: 300; line-height: 14px; margin: 5px 0px 0px; vertical-align: top;}
span.secondary-option {color: #999;}
span.time-ship {color: #C29C6B; 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;}

/* Embrulhar para presente */
.shopping-bag input.filter[type="checkbox"] + label {color: #111; font-style: italic;}
.shopping-bag input.filter[type="checkbox"] + label:hover {color: #B27C32;}
.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;}

#product-suggestions-box {border: solid 1px #eaeaea;display: flex;flex-direction: row;justify-content: initial;margin: 20px 0 0px; position: relative;}
#product-suggestions-box #bt-close-ps {width: 14px; height: 14px; position: absolute; background-color: #ccc; right: 0; top: 0; color: #fff; font-size: 10px; cursor: pointer;}
#product-suggestions-box #bt-close-ps span {width: 10px; height: 10px; position: absolute; top: 1px; right: 2px; line-height: 1; text-align: center;}
#product-suggestions-box select {width: 120px; margin: 0 0 5px 0;}
#product-suggestions-box .box-img {max-width: 100px;line-height: 0;}
#product-suggestions-box .box-img img {width: 100%;margin: 0;padding: 0; max-width: 90px;}
#product-suggestions-box .desc {padding: 10px;display: flex;flex-direction: column;}
#product-suggestions-box .desc a {font-weight: 600;color: #111;}
#product-suggestions-box .bt-box {padding: 10px; text-align: center;}
#product-suggestions-box .bt-box a {
    padding: 7px 17px 4px 35px; 
    background-image: url(https://www.lojadivinanoite.com.br/_tmp311024/project-alpha/img/icon-buy-button-big-2.svg);
    background-position: 5px 0px;
    background-repeat: no-repeat;
    background-color: #FF3E6F;
    border-color: #FF3E6F;
    font-weight: 500;
    text-transform: uppercase;
    background-size: 32px;
}
#product-suggestions-box .loading-buy {margin-top: 8px;}

@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;}
    
    #product-suggestions-box {flex-wrap: wrap;}
    #product-suggestions-box .desc {width: 200px;}
}

@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: #FFF7FA; 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 #C29C6B;}*/
.login-new-account div h2 {text-transform: uppercase; color: #382C12; 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: 15px; color: #C29C6B; font-weight: 400; margin: 5px 0 0;}
.login-new-account form input {margin: 5px 0 5px; height: 37px; background-color: #fff;}
.login-new-account form button {background-color: #FF3E6F; border-color: #FF3E6F; padding: 0 20px; text-transform: uppercase; min-width: 300px; font-size: 17px; font-weight: bold; margin: 5px 0 0;}
.login-new-account form button:hover {background-color: #E3125F; border-color: #E3125F;}
.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-new-account > div:first-of-type {margin-bottom: 10px;}
    
    .login-checkout {border-left: none;}
}

/**/

h1.checkout {background: url(../img/icon-checkout.svg) 0px 0px no-repeat; margin: 10px 0 10px 0; padding: 10px 0px 10px 44px; text-align: left;}
.no-svg h1.checkout {background: url(../img/icon-checkout.png) 0px 0px no-repeat; padding: 10px 0px 10px 44px;}

.list-checkout {display: inline-block; list-style: none; margin: 0px 0px 50px 0px; width: 100%;}
.list-create-account {display: flex;justify-content: center;}
.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: #C29C6B; font-size: 13px; font-weight: 400; 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: #C29C6B; float: right; font-weight: 300; 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: #C29C6B; 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: #EAEAEA 1px solid; 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: #C29C6B; font-weight: 400;}

.list-checkout li p {margin: 0px 0px 10px 0px;}
.list-checkout li p.bold, .list-checkout li span.bold {color: #C29C6B; 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.gif) 0px 0px no-repeat; 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: block; margin: 0px auto; width: 33%;}
.list-checkout-area-login > li {margin: 0 0 50px 0 !important; width: 100%;}


#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: 500; color: #f9125f;}
.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; font-size: 14px; margin-bottom: 10px; word-break: break-word;}
.process-finalized p.name-attr {color: #f9125f; font-weight: 500; margin: 0 0 3px;}
.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; margin-top: 30px;}

a#add-coupon {display: table; background-color: #BF995B; border: #BF995B 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;}

@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: 18px; font-weight: 400;}
    
    .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: #FF4C4C; border-radius: 4px; 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 #FF4C4C; 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 #FF3E6F; 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: #f00; margin-left: 5px;}
.gifts li p {font-weight: normal; font-size: 12px;}

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