/*******************************
 * File: wp-content/plugins/3dpeople-discount-bar/css/style.css
 *******************************/

/*** COLORS ***/
.tdpeople-disper-container { background-color:#000; z-index:98; }
.tdpeople-disper-container .tdpeople-disper-prices .tdpeople-disper-item.activated { background-color:#ffa500 !important; }
.tdpeople-disper-container .tdpeople-disper-prices .tdpeople-disper-item.activated .tdpeople-disper-price { color:#ffa500 !important; }
.tdpeople-disper-container .tdpeople-disper-mess { border-color:#000; background-color:#000; }
.tdpeople-disper-container .tdpeople-disper-mess .tdpeople-disper-link { color:#fff; }
.tdpeople-disper-container .tdpeople-disper-prices .tdpeople-disper-bar { background:linear-gradient(90deg,#ffa500 0%,#ffa500 80%,#fff 100%); }
.tdpeople-disper-container .tdpeople-disper-prices .tdpeople-disper-item .tdpeople-disper-price { color:#6d6d6d; background-color:#fff; }
.tdpeople-disper-container .tdpeople-disper-prices .tdpeople-disper-item .tdpeople-disper-price[data-title]:hover::before { color:#ffa500 !important; border-color:#0000 !important; background-color:#0000 !important; }

/*** FONT-FAMILY ***/
.tdpeople-disper-container { font-family:"Helvetica Neue",Helvetica,"Segoe UI",Arial,sans-serif; }

/*** MAIN ***/
.tdpeople-disper-0{ width:12px; height:12px; border-radius:10px; background:#ffa500; float:right; }
.tdpeople-disper-0-price{ position:absolute; top:9px; height:50px; font-size:12px; color:#ffa500; }

.tdpeople-disper-container{ display:flex; position:fixed; left:0; top:60px; width:100%; justify-content:center; height:60px; line-height:normal; font-weight:normal; opacity:0; }
.is-content-ready .tdpeople-disper-container{ transition-delay:275ms; transition-property:opacity; opacity:1; }

.tdpeople-disper-container .tdpeople-disper-mess{ display:grid; align-items:center; width:auto; text-align:center; font-size:16px; margin-right:-1px; }
.tdpeople-disper-container .tdpeople-disper-mess .tdpeople-disper-link{ text-decoration:none; }

.tdpeople-disper-container .tdpeople-disper-prices{ position:relative; width:80%; }
.tdpeople-disper-container .tdpeople-disper-prices .tdpeople-disper-bar{ position:absolute; top:29px; left:0; width:0; height:3px; z-index:1; }

.tdpeople-disper-container .tdpeople-disper-prices .tdpeople-disper-item{
  position:absolute; /* left:% is set inline by PHP based on price */
  text-align:center; align-items:center; font-size:14px; z-index:2;
  background-color:#6d6d6d; width:12px; height:12px; top:24px; border-radius:100%; transition:all .5s ease-in-out;
}
.tdpeople-disper-container .tdpeople-disper-prices .tdpeople-disper-item .tdpeople-disper-price{
  position:absolute; background-color:#0000 !important; top:-18px; left:-143px; padding:3px 10px; width:300px; min-width:max-content; height:65px; text-align:center; font-size:12px;
}
.tdpeople-disper-container .tdpeople-disper-prices .tdpeople-disper-item .tdpeople-disper-price[data-title]:hover::before{
  position:absolute; display:block; padding:3px 10px 5px 10px; left:55px; top:30px; width:auto; min-width:max-content; font-size:12px;
  content:"Spend " attr(data-title) "€ to get this discount!";
}
.tdpeople-disper-container .tdpeople-disper-prices .tdpeople-disper-item.active .tdpeople-disper-price[data-title]:hover::before{
  content:"You have earned this discount!"; position:absolute; display:block; padding:3px 10px 5px 10px; left:55px; width:auto; min-width:max-content; font-size:12px;
}
.tdpeople-disper-container .tdpeople-disper-prices .tdpeople-disper-item.active .tdpeople-disper-price[data-title]:hover::before,
.tdpeople-disper-container .tdpeople-disper-prices .tdpeople-disper-item.active .tdpeople-disper-price[data-title]::before{ top:40px; }

.tdpeople-disper-container .tdpeople-disper-prices .tdpeople-disper-item.active .tdpeople-disper-price{ color:#ffa500 !important; font-size:18px; top:-24px; }
.tdpeople-disper-container .tdpeople-disper-prices .tdpeople-disper-item.active{ width:18px; height:18px; top:21px; background-color:#ffa500; }

.tdpeople-disper-container .tdpeople-disper-prices .tdpeople-disper-item.activated .tdpeople-disper-price[data-title]:hover::before{ display:none; }

@media (max-width:991px){
  .tdpeople-disper-0-price::before{ display:none !important; }
  .tdpeople-disper-container .tdpeople-disper-prices .tdpeople-disper-item .tdpeople-disper-price[data-title]:hover::before{ display:none; }
  .tdpeople-disper-container .tdpeople-disper-mess{ margin-left:-10px; }
  .tdpeople-disper-0-price{ top:39px; font-size:10px; }
  .tdpeople-disper-container .tdpeople-disper-prices .tdpeople-disper-item .tdpeople-disper-price{ top:12px; left:-6px; padding:3px 3px; font-size:10px; width:auto; }
  .tdpeople-disper-container{ top:60px; height:60px; }
  .tdpeople-disper-container .tdpeople-disper-prices .tdpeople-disper-item.active .tdpeople-disper-price{ top:14px !important; left:-8px; padding:3px 3px; font-size:14px; }
  .tdpeople-disper-container .tdpeople-disper-prices .tdpeople-disper-item.active .tdpeople-disper-price[data-title]::before{ top:-35px; }
  .tdpeople-disper-container .tdpeople-disper-prices .tdpeople-disper-item.active .tdpeople-disper-price[data-title]:hover::before{ top:30px; left:-55px; }
}
.admin-bar .tdpeople-disper-container{ top:91px; }

/* DO NOT hardcode left positions; markers are placed by PHP */