/* Use this to change color style of checkout form
   1/ rename this file to color-change.css
   2/ specify target color in attributes below
   3/ go to codepen and enter target color there https://codepen.io/sosuke/pen/Pjoqqp
   4/ change filter attribute as per calculation on codepen
*/


.page-content .checkout-block[class*='num-'] .block-header:before,
.page-content .custom-checkbox input[type=checkbox] + span .checkbox-checked,
.mark-required .page-content .form-group.text label.required .field-label::after,
.mark-required .page-content .form-group.text.need-dni label .field-label::after,
.mark-required .page-content .form-group.email label.required .field-label::after,
.mark-required .page-content .form-group.password label.required .field-label::after,
.mark-required .page-content .form-group.tel label.required .field-label::after,
.mark-required .page-content .form-group.select label.required .field-label::after,
.mark-required .page-content .form-group.countrySelect label.required .field-label::after,
.page-content span.carrier-delay,
.page-content .product-price {
  color: #2e3192;
}

.page-content .checkout-block .inner-area .offer-login a,
.checkout-block .inner-area .offer-login a:hover,
.has-discount .discount {
  background-color: #2e3192;
}

#content.page-content .custom-checkbox input[type=checkbox] + span {
  border-color: #2e3192;
}

#content.page-content .custom-checkbox input[type=checkbox]:checked + span,
#content.page-content .custom-radio input[type=radio]:checked + span {
    background-image: url(../img/checkmark-bw.png)!important;
    border-color: black;
    filter: invert(13%) sepia(80%) saturate(3031%) hue-rotate(236deg) brightness(90%) contrast(91%);
}
#content.page-content .custom-checkbox input[type=checkbox]:checked + span{
    background: none !important;
}
#content.page-content .custom-checkbox input[type=checkbox]:checked + span > i{
    display: none !important;
}
.checkout-block .inner-area .offer-login a:hover {
    opacity: 0.7;
}

#content{
    background: transparent;
}
.block-header{
    color: var(--accent-color);
}

.classic-login{
    margin-left: 0;
}

#module-thecheckout-order label, #module-thecheckout-order .label{
    color: var(--primary-color);
}

.has-float-label.required span.field-label, .need-dni .has-float-label span.field-label, .has-float-label span.field-label{
    color: var(--primary-color); 
}

.product-line-info.product-attribute{
    font-size: 12px;
    color: var(--primary-color);
}

input.cart-line-product-quantity{
    height: 36px;
    margin-right: 0;
    border-width: 1px 0 1px 0;
    border-color: var(--primary-color);
    font-size: 12px;
    color: var(--primary-color);
    width: 20px;
}

a.cart-line-product-quantity-up, a.cart-line-product-quantity-down{
    height: 36px;
    border: 1px solid #2e3192;
    background-color: transparent;
    background-size: auto;
    width: 28px;
}
a.cart-line-product-quantity-up:hover, a.cart-line-product-quantity-down:hover{
     background-size: auto;
}

a.cart-line-product-quantity-up{
    border-left: 0;
     filter: invert(13%) sepia(76%) saturate(2995%) hue-rotate(236deg) brightness(90%) contrast(91%);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="%2e3192" viewBox="0 0 24 24"><path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z"/></svg>')
}

a.cart-line-product-quantity-down{
    border-right: 0;
    filter: invert(13%) sepia(76%) saturate(2995%) hue-rotate(236deg) brightness(90%) contrast(91%);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="%2e3192" viewBox="0 0 24 24"><path d="M24 10h-24v4h24z"/></svg>');
}

.block-header.shopping-cart-header{
        border-top: 1px solid #f2f3f9;
}
.cart-item:first-child{
    border-top: 0px solid #f2f3f9;
}
.cart-item:not(:last-child){
    border-bottom: 1px solid #f2f3f9;
}
.cart-item:last-child{
    border-bottom: 1px solid #f2f3f9;
}
.card-block:first-child{
    padding-bottom: 15px;
    border-bottom: 1px solid #f2f3f9;
}

.card.cart-summary{
    border-bottom: 1px solid #f2f3f9;
}

.cart-summary-line{
    margin-bottom: 15px;
}

.mark-required .form-group.checkbox label.required span.label::before, .mark-required .form-group.checkbox label.required span.label::before, .mark-required .page-content .form-group.text label.required .field-label::after{
    color: red;
}

.delivery-options, .payment-options{
    border: 1px solid #f2f3f9;
}

.offer-login{
    color: var(--primary-color);
}