.basket-coupons-delivery {
display: flex;
flex-direction: column;
font-size: .9em;
max-width: 270px;
margin-top: 10px;
border-radius: 10px;
background-color: #f9f9f9;
}
@media (min-width: 577px) {
.basket-coupons-delivery {
flex-direction:row;
justify-content: space-between;
align-items: center;
gap: 4rem;
min-height: 7rem;
padding: .8rem 2rem;
border: .1rem solid #eeeeee;
background-color: #f9f9f9;
}
}
.basket-coupons-delivery .coupon-and-discounts {
order: 2;
flex-grow: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: .8rem;
padding: 1.6rem 0
}
@media (min-width: 577px) {
.basket-coupons-delivery .coupon-and-discounts {
max-width:40rem
}
}
.basket-coupons-delivery .delivery-progress {
order: 1;
width: 100%;
padding: 1.6rem .8rem;
}
@media (min-width: 577px) {
.basket-coupons-delivery .delivery-progress {
order:2;
flex: 0 1 auto;
max-width: 25rem;
padding: 0;
background-color: transparent
}
}
@media (min-width: 769px) {
.basket-coupons-delivery .delivery-progress {
max-width:35rem
}
}
.delivery-progress.free-delivery-reached {
display: flex;
justify-content: center;
align-items: center;
gap: .8rem
}
@media (max-width: 576px) {
.delivery-progress.free-delivery-reached {
flex-wrap:wrap
}
}
@media (min-width: 577px) {
.delivery-progress.free-delivery-reached {
justify-content:flex-end
}
}
@media (min-width: 769px) {
.delivery-progress.free-delivery-reached {
gap:1.6rem
}
}
.delivery-progress.free-delivery-reached .free-delivery-text {
color: #1d1d1d;
font-weight: bold;
}
.delivery-progress.free-delivery-reached svg {
width: 4rem
}
.delivery-progress .free-delivery-text {
display: block;
font-weight: 500;
color: #1d1d1d;
line-height: 1.2;
text-align: center
}
@media (min-width: 577px) {
.delivery-progress .free-delivery-text {
font-size:1rem;
text-align: left
}
}
.delivery-progress.free-delivery-not-reached {
display: flex;
flex-direction: column;
width: 100%; padding-top: 3.6rem
}
@media (min-width: 577px) {
.delivery-progress.free-delivery-not-reached {
}
}
.delivery-progress .progressbar-wrapper {
display: flex;
justify-content: space-between;
align-items: center
}
.delivery-progress .progressbar {
position: relative;
flex: 1;
height: 1rem;
margin-right: .8rem;
border: .1rem solid #d8d7d7;
border-radius: 2rem;
background-color: #fff
}
.delivery-progress .progressbar.width-1:before {
width: 1%
}
.delivery-progress .progressbar.width-2:before {
width: 2%
}
.delivery-progress .progressbar.width-3:before {
width: 3%
}
.delivery-progress .progressbar.width-4:before {
width: 4%
}
.delivery-progress .progressbar.width-5:before {
width: 5%
}
.delivery-progress .progressbar.width-6:before {
width: 6%
}
.delivery-progress .progressbar.width-7:before {
width: 7%
}
.delivery-progress .progressbar.width-8:before {
width: 8%
}
.delivery-progress .progressbar.width-9:before {
width: 9%
}
.delivery-progress .progressbar.width-10:before {
width: 10%
}
.delivery-progress .progressbar.width-11:before {
width: 11%
}
.delivery-progress .progressbar.width-12:before {
width: 12%
}
.delivery-progress .progressbar.width-13:before {
width: 13%
}
.delivery-progress .progressbar.width-14:before {
width: 14%
}
.delivery-progress .progressbar.width-15:before {
width: 15%
}
.delivery-progress .progressbar.width-16:before {
width: 16%
}
.delivery-progress .progressbar.width-17:before {
width: 17%
}
.delivery-progress .progressbar.width-18:before {
width: 18%
}
.delivery-progress .progressbar.width-19:before {
width: 19%
}
.delivery-progress .progressbar.width-20:before {
width: 20%
}
.delivery-progress .progressbar.width-21:before {
width: 21%
}
.delivery-progress .progressbar.width-22:before {
width: 22%
}
.delivery-progress .progressbar.width-23:before {
width: 23%
}
.delivery-progress .progressbar.width-24:before {
width: 24%
}
.delivery-progress .progressbar.width-25:before {
width: 25%
}
.delivery-progress .progressbar.width-26:before {
width: 26%
}
.delivery-progress .progressbar.width-27:before {
width: 27%
}
.delivery-progress .progressbar.width-28:before {
width: 28%
}
.delivery-progress .progressbar.width-29:before {
width: 29%
}
.delivery-progress .progressbar.width-30:before {
width: 30%
}
.delivery-progress .progressbar.width-31:before {
width: 31%
}
.delivery-progress .progressbar.width-32:before {
width: 32%
}
.delivery-progress .progressbar.width-33:before {
width: 33%
}
.delivery-progress .progressbar.width-34:before {
width: 34%
}
.delivery-progress .progressbar.width-35:before {
width: 35%
}
.delivery-progress .progressbar.width-36:before {
width: 36%
}
.delivery-progress .progressbar.width-37:before {
width: 37%
}
.delivery-progress .progressbar.width-38:before {
width: 38%
}
.delivery-progress .progressbar.width-39:before {
width: 39%
}
.delivery-progress .progressbar.width-40:before {
width: 40%
}
.delivery-progress .progressbar.width-41:before {
width: 41%
}
.delivery-progress .progressbar.width-42:before {
width: 42%
}
.delivery-progress .progressbar.width-43:before {
width: 43%
}
.delivery-progress .progressbar.width-44:before {
width: 44%
}
.delivery-progress .progressbar.width-45:before {
width: 45%
}
.delivery-progress .progressbar.width-46:before {
width: 46%
}
.delivery-progress .progressbar.width-47:before {
width: 47%
}
.delivery-progress .progressbar.width-48:before {
width: 48%
}
.delivery-progress .progressbar.width-49:before {
width: 49%
}
.delivery-progress .progressbar.width-50:before {
width: 50%
}
.delivery-progress .progressbar.width-51:before {
width: 51%
}
.delivery-progress .progressbar.width-52:before {
width: 52%
}
.delivery-progress .progressbar.width-53:before {
width: 53%
}
.delivery-progress .progressbar.width-54:before {
width: 54%
}
.delivery-progress .progressbar.width-55:before {
width: 55%
}
.delivery-progress .progressbar.width-56:before {
width: 56%
}
.delivery-progress .progressbar.width-57:before {
width: 57%
}
.delivery-progress .progressbar.width-58:before {
width: 58%
}
.delivery-progress .progressbar.width-59:before {
width: 59%
}
.delivery-progress .progressbar.width-60:before {
width: 60%
}
.delivery-progress .progressbar.width-61:before {
width: 61%
}
.delivery-progress .progressbar.width-62:before {
width: 62%
}
.delivery-progress .progressbar.width-63:before {
width: 63%
}
.delivery-progress .progressbar.width-64:before {
width: 64%
}
.delivery-progress .progressbar.width-65:before {
width: 65%
}
.delivery-progress .progressbar.width-66:before {
width: 66%
}
.delivery-progress .progressbar.width-67:before {
width: 67%
}
.delivery-progress .progressbar.width-68:before {
width: 68%
}
.delivery-progress .progressbar.width-69:before {
width: 69%
}
.delivery-progress .progressbar.width-70:before {
width: 70%
}
.delivery-progress .progressbar.width-71:before {
width: 71%
}
.delivery-progress .progressbar.width-72:before {
width: 72%
}
.delivery-progress .progressbar.width-73:before {
width: 73%
}
.delivery-progress .progressbar.width-74:before {
width: 74%
}
.delivery-progress .progressbar.width-75:before {
width: 75%
}
.delivery-progress .progressbar.width-76:before {
width: 76%
}
.delivery-progress .progressbar.width-77:before {
width: 77%
}
.delivery-progress .progressbar.width-78:before {
width: 78%
}
.delivery-progress .progressbar.width-79:before {
width: 79%
}
.delivery-progress .progressbar.width-80:before {
width: 80%
}
.delivery-progress .progressbar.width-81:before {
width: 81%
}
.delivery-progress .progressbar.width-82:before {
width: 82%
}
.delivery-progress .progressbar.width-83:before {
width: 83%
}
.delivery-progress .progressbar.width-84:before {
width: 84%
}
.delivery-progress .progressbar.width-85:before {
width: 85%
}
.delivery-progress .progressbar.width-86:before {
width: 86%
}
.delivery-progress .progressbar.width-87:before {
width: 87%
}
.delivery-progress .progressbar.width-88:before {
width: 88%
}
.delivery-progress .progressbar.width-89:before {
width: 89%
}
.delivery-progress .progressbar.width-90:before {
width: 90%
}
.delivery-progress .progressbar.width-91:before {
width: 91%
}
.delivery-progress .progressbar.width-92:before {
width: 92%
}
.delivery-progress .progressbar.width-93:before {
width: 93%
}
.delivery-progress .progressbar.width-94:before {
width: 94%
}
.delivery-progress .progressbar.width-95:before {
width: 95%
}
.delivery-progress .progressbar.width-96:before {
width: 96%
}
.delivery-progress .progressbar.width-97:before {
width: 97%
}
.delivery-progress .progressbar.width-98:before {
width: 98%
}
.delivery-progress .progressbar.width-99:before {
width: 99%
}
.delivery-progress .progressbar.width-100:before {
width: 100%
}
.delivery-progress .progressbar:before {
animation: animateProgresBar 1.5s ease;
content: "";
position: absolute;
left: 0;
top: 0;
display: block;
width: 0;
height: 100%;
border-radius: 2rem;
background-color: #1d1d1d
}
@keyframes animateProgresBar {
0% {
width: 0
}
}
.delivery-progress .progressbar-actual-value {
animation: animateProgressCar 1.5s ease;
position: absolute;
left: 0;
bottom: 1.2rem;
transform: translateX(-3rem);
display: flex;
justify-content: center;
align-items: center;
gap: .8rem;
font-weight: bold;
color: #1d1d1d;
line-height: 1.2;
white-space: nowrap
}
@keyframes animateProgressCar {
0% {
left: 0
}
}
.delivery-progress .progressbar-actual-value.left-1 {
left: 1%
}
.delivery-progress .progressbar-actual-value.left-2 {
left: 2%
}
.delivery-progress .progressbar-actual-value.left-3 {
left: 3%
}
.delivery-progress .progressbar-actual-value.left-4 {
left: 4%
}
.delivery-progress .progressbar-actual-value.left-5 {
left: 5%
}
.delivery-progress .progressbar-actual-value.left-6 {
left: 6%
}
.delivery-progress .progressbar-actual-value.left-7 {
left: 7%
}
.delivery-progress .progressbar-actual-value.left-8 {
left: 8%
}
.delivery-progress .progressbar-actual-value.left-9 {
left: 9%
}
.delivery-progress .progressbar-actual-value.left-10 {
left: 10%
}
.delivery-progress .progressbar-actual-value.left-11 {
left: 11%
}
.delivery-progress .progressbar-actual-value.left-12 {
left: 12%
}
.delivery-progress .progressbar-actual-value.left-13 {
left: 13%
}
.delivery-progress .progressbar-actual-value.left-14 {
left: 14%
}
.delivery-progress .progressbar-actual-value.left-15 {
left: 15%
}
.delivery-progress .progressbar-actual-value.left-16 {
left: 16%
}
.delivery-progress .progressbar-actual-value.left-17 {
left: 17%
}
.delivery-progress .progressbar-actual-value.left-18 {
left: 18%
}
.delivery-progress .progressbar-actual-value.left-19 {
left: 19%
}
.delivery-progress .progressbar-actual-value.left-20 {
left: 20%
}
.delivery-progress .progressbar-actual-value.left-21 {
left: 21%
}
.delivery-progress .progressbar-actual-value.left-22 {
left: 22%
}
.delivery-progress .progressbar-actual-value.left-23 {
left: 23%
}
.delivery-progress .progressbar-actual-value.left-24 {
left: 24%
}
.delivery-progress .progressbar-actual-value.left-25 {
left: 25%
}
.delivery-progress .progressbar-actual-value.left-26 {
left: 26%
}
.delivery-progress .progressbar-actual-value.left-27 {
left: 27%
}
.delivery-progress .progressbar-actual-value.left-28 {
left: 28%
}
.delivery-progress .progressbar-actual-value.left-29 {
left: 29%
}
.delivery-progress .progressbar-actual-value.left-30 {
left: 30%
}
.delivery-progress .progressbar-actual-value.left-31 {
left: 31%
}
.delivery-progress .progressbar-actual-value.left-32 {
left: 32%
}
.delivery-progress .progressbar-actual-value.left-33 {
left: 33%
}
.delivery-progress .progressbar-actual-value.left-34 {
left: 34%
}
.delivery-progress .progressbar-actual-value.left-35 {
left: 35%
}
.delivery-progress .progressbar-actual-value.left-36 {
left: 36%
}
.delivery-progress .progressbar-actual-value.left-37 {
left: 37%
}
.delivery-progress .progressbar-actual-value.left-38 {
left: 38%
}
.delivery-progress .progressbar-actual-value.left-39 {
left: 39%
}
.delivery-progress .progressbar-actual-value.left-40 {
left: 40%
}
.delivery-progress .progressbar-actual-value.left-41 {
left: 41%
}
.delivery-progress .progressbar-actual-value.left-42 {
left: 42%
}
.delivery-progress .progressbar-actual-value.left-43 {
left: 43%
}
.delivery-progress .progressbar-actual-value.left-44 {
left: 44%
}
.delivery-progress .progressbar-actual-value.left-45 {
left: 45%
}
.delivery-progress .progressbar-actual-value.left-46 {
left: 46%
}
.delivery-progress .progressbar-actual-value.left-47 {
left: 47%
}
.delivery-progress .progressbar-actual-value.left-48 {
left: 48%
}
.delivery-progress .progressbar-actual-value.left-49 {
left: 49%
}
.delivery-progress .progressbar-actual-value.left-50 {
left: 50%
}
.delivery-progress .progressbar-actual-value.left-51 {
left: 51%
}
.delivery-progress .progressbar-actual-value.left-52 {
left: 52%
}
.delivery-progress .progressbar-actual-value.left-53 {
left: 53%
}
.delivery-progress .progressbar-actual-value.left-54 {
left: 54%
}
.delivery-progress .progressbar-actual-value.left-55 {
left: 55%
}
.delivery-progress .progressbar-actual-value.left-56 {
left: 56%
}
.delivery-progress .progressbar-actual-value.left-57 {
left: 57%
}
.delivery-progress .progressbar-actual-value.left-58 {
left: 58%
}
.delivery-progress .progressbar-actual-value.left-59 {
left: 59%
}
.delivery-progress .progressbar-actual-value.left-60 {
left: 60%
}
.delivery-progress .progressbar-actual-value.left-61 {
left: 61%
}
.delivery-progress .progressbar-actual-value.left-62 {
left: 62%
}
.delivery-progress .progressbar-actual-value.left-63 {
left: 63%
}
.delivery-progress .progressbar-actual-value.left-64 {
left: 64%
}
.delivery-progress .progressbar-actual-value.left-65 {
left: 65%
}
.delivery-progress .progressbar-actual-value.left-66 {
left: 66%
}
.delivery-progress .progressbar-actual-value.left-67 {
left: 67%
}
.delivery-progress .progressbar-actual-value.left-68 {
left: 68%
}
.delivery-progress .progressbar-actual-value.left-69 {
left: 69%
}
.delivery-progress .progressbar-actual-value.left-70 {
left: 70%
}
.delivery-progress .progressbar-actual-value.left-71 {
left: 71%
}
.delivery-progress .progressbar-actual-value.left-72 {
left: 72%
}
.delivery-progress .progressbar-actual-value.left-73 {
left: 73%
}
.delivery-progress .progressbar-actual-value.left-74 {
left: 74%
}
.delivery-progress .progressbar-actual-value.left-75 {
left: 75%
}
.delivery-progress .progressbar-actual-value.left-76 {
left: 76%
}
.delivery-progress .progressbar-actual-value.left-77 {
left: 77%
}
.delivery-progress .progressbar-actual-value.left-78 {
left: 78%
}
.delivery-progress .progressbar-actual-value.left-79 {
left: 79%
}
.delivery-progress .progressbar-actual-value.left-80 {
left: 80%
}
.delivery-progress .progressbar-actual-value.left-81 {
left: 81%
}
.delivery-progress .progressbar-actual-value.left-82 {
left: 82%
}
.delivery-progress .progressbar-actual-value.left-83 {
left: 83%
}
.delivery-progress .progressbar-actual-value.left-84 {
left: 84%
}
.delivery-progress .progressbar-actual-value.left-85 {
left: 85%
}
.delivery-progress .progressbar-actual-value.left-86 {
left: 86%
}
.delivery-progress .progressbar-actual-value.left-87 {
left: 87%
}
.delivery-progress .progressbar-actual-value.left-88 {
left: 88%
}
.delivery-progress .progressbar-actual-value.left-89 {
left: 89%
}
.delivery-progress .progressbar-actual-value.left-90 {
left: 90%
}
.delivery-progress .progressbar-actual-value.left-91 {
left: 91%
}
.delivery-progress .progressbar-actual-value.left-92 {
left: 92%
}
.delivery-progress .progressbar-actual-value.left-93 {
left: 93%
}
.delivery-progress .progressbar-actual-value.left-94 {
left: 94%
}
.delivery-progress .progressbar-actual-value.left-95 {
left: 95%
}
.delivery-progress .progressbar-actual-value.left-96 {
left: 96%
}
.delivery-progress .progressbar-actual-value.left-97 {
left: 97%
}
.delivery-progress .progressbar-actual-value.left-98 {
left: 98%
}
.delivery-progress .progressbar-actual-value.left-99 {
left: 99%
}
.delivery-progress .progressbar-actual-value.left-100 {
left: 100%
}
.delivery-progress .progressbar-actual-value svg {
width: 2.5rem
}
.delivery-progress .progressbar-actual-value svg path, .free-delivery-reached svg path {
fill: #0073aa
}
.delivery-progress .progressbar-limit {
flex-shrink: 0;
display: block;
font-weight: bold;
color: #1d1d1d;
line-height: 1.2;
white-space: nowrap
}
.delivery-progress .progressbar-text {
margin-top: .2rem;
font-weight: bold;
font-size: .7rem;
text-align: left
}
.qsc2-drawer-header__shipping-goal-msg {
font-size: .9em;
text-align: center;
}
.qsc2-drawer-header__shipping-goal-bar {
position: relative;
width: 100%;
background-color: #eee;
border-radius: 10px;
}
.qsc2-drawer-shipping {
border-bottom: 1px solid var(--awb-separator-color);
padding: 1em 0;
}
.widget_shopping_cart_content .qsc2-drawer-shipping {
margin-right:30px;
}
.qsc2-drawer-header__shipping-goal-wrapper {
position: relative;
width: 0%;
max-width: calc(100% - 22px);
transition: width .35s ease-in-out;
transition-delay: 0s, 0s;
transition-delay: .5s;
}
.qsc2-drawer-header__shipping-goal--animated .qsc2-drawer-header__shipping-goal-progress {
background-image: linear-gradient(45deg, rgba(255, 255, 255, .25) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, .25) 50%, rgba(255, 255, 255, .25) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
background-size: 1rem 1rem;
animation: 1s linear infinite qsc2-progress-bar-stripes;
}
.qsc2-drawer-header__shipping-goal-progress {
width: 100%;
height: 6px;
background-color: #c9baa7;
border-radius: 10px;
margin-top: 10px;
}
.qsc2-drawer-header__shipping-goal-icon {
display: inline-flex;
align-items: center;
justify-content: center;
position: absolute;
left: 100%;
top: -9px;
width: 24px;
height: 24px;
color: #c9baa7;
background: #fff;
margin-left: -3px;
border: 1px solid;
border-radius: 50%;
}
@keyframes qsc2-progress-bar-stripes{0%{background-position-x:1rem}}