/* Mini-basket badge in the desktop header (#shoppingcart), recreated from the
   old basket/templates/default/css/minibasket.css (previously rendered
   server-side inside the now-removed basket_mini.php iframe). Driven by
   data-count attributes set from JS (see main.js cartUpdateCountDisplay /
   cartPlayAddedAnimation) instead of server-rendered template vars. */

#shoppingcart {
	font-family: Arial,Helvetica,Sans-Serif;
	text-align: center;
	position: relative;
}
#shoppingcart a {
	text-decoration: none;
	display: block;
}

.basket_top {
	display: block;
	text-align: center;
	margin: 0 5px 10px 5px;
	color: #666666;
	font-size: 24px;
	font-weight: bold;
	font-family: Arial,Helvetica,Sans-Serif;
}

.basket_count {
	position: relative;
	display: block;
	text-align: center;
	width: 100%;
	height: 108px;
	margin: 0;
	padding-top: 20px;
	background: url("/basket/templates/default/images/basket_cutout.png") no-repeat transparent scroll center top;
	color: #f00;
	text-shadow:
    -2px -2px 0 #fff,
     2px -2px 0 #fff,
    -2px  2px 0 #fff,
     2px  2px 0 #fff,
    -2px  0   0 #fff,
     2px  0   0 #fff,
     0   -2px 0 #fff,
     0    2px 0 #fff;
	font-size: 48px;
	font-weight: bold;
	font-family: Arial,Helvetica,Sans-Serif;
}

.basket_arrow {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  width: 80px;
  height: 80px;
  background: url("/basket/templates/default/images/red_arrow.svg") center transparent no-repeat;
  background-size: contain;
  opacity: 0;
  pointer-events: none;
}
.basket_arrow[data-count="0"] {
	display: none;
}
.basket_arrow.playing {
  animation: arrow-attention 3s ease-in-out 1 forwards;
}

@keyframes arrow-attention {
  0% {
    opacity: 0;
    transform: translate(-40px, -50%);
  }
  15% {
    opacity: 1;
    transform: translate(0, -50%);
  }
  30% {
    transform: translate(-8px, -50%);
  }
  45% {
    transform: translate(0, -50%);
  }
  60% {
    transform: translate(-8px, -50%);
  }
  75% {
    transform: translate(0, -50%);
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(0, -50%);
  }
}

.basket_count.playing {
  animation: number-pop 0.6s ease-out 1;
}

@keyframes number-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.3); color: #e3000f; }
  100% { transform: scale(1); }
}

.continue {
	display: block;
	text-align: center;
	color: #000;
	font-size: 24px;
	font-weight: bold;
	line-height: 1em;
	margin: 10px 0;
}
.continue[data-count="0"] {
	display: none;
}