/* анимация полёт в корзину */
.dcart__animation-ico { position: absolute; width: 10px; height: 10px; background: #3CB919; border-radius: 50%; z-index: 9999; }



.tp { background: #fff; overflow: hidden; font: 0/0 a; }
.tp ._vr-contents { padding: 20px 20px 0 20px; }

/* оформление заголовков */
.tp__header { margin: 0 0 10px 0; font: 600 18px/30px geometria, arial; border-bottom: 1px solid #ccc; }
.tp__header--required:after { content: "*"; color: #f00; position: absolute; margin: 8px 0 0 3px; font: 500 27px/15px geometria, arial; }


/* контейнер для опций */
.tp__box { margin: 0 0 20px 0; }
.tp__option:nth-child(n+5) { display: none; }
.tp--expanded .tp__option { display: block; }
.tp--expanded .tp__expanded { display: none; }


/* оформление инпутов (опции) */
.tp__radio-wrap { position: relative; display: block; cursor: pointer; font: 15px/20px geometria, arial; padding: 8px 70px 8px 30px; }
.tp__radio { position: absolute; left: -9999px; }
.tp__radio-ico { width: 22px; height: 22px; border: 1px solid #ccc; position: absolute; border-radius: 50%; top: 0; left: 0; bottom: 0; margin: auto; transition: background-color 250ms; }
.tp__radio-price { position: absolute; right: 0; top: 8px; font-weight: 700; }
.tp__radio:checked + .tp__radio-ico { background: #09f; border: none; }
.tp__radio:checked + .tp__radio-ico:before { position: absolute; width: 20px; height: 20px; background: #fff; content: ""; border-radius: 50%; left: 0; right: 0; top: 0; bottom: 0; margin: auto; animation: circle 150ms ease 10ms forwards; }

/* анимация радиокнопки */
@keyframes circle {
    0% { width: 20px; height: 20px; }
    100% { width: 8px; height: 8px; }
}



/* оформление топпинга */
.tp__option { position: relative; font: 14px/20px geometria, arial; margin: 0 0 14px 0; }
.tp__option-text { padding: 0 70px 0 0; }
.tp__option-price { font-weight: 600; position: absolute; top: 0; right: 0; }
.tp__option-price:before { content: attr(data-count) " × "; font-weight: 400; display: none; }
.tp__option--added .tp__option-price:before { display: inline; }
.tp__option-weight { color: #ccc; }

/* кнопки +/- */
.tp__controls { width: 63px; height: 23px; position: absolute; right: 0; top: 20px; font: 0/0 a; display: block; margin-top: 0; }
.tp__control { border: none; width: 30px; height: 21px; display: inline-block; vertical-align: baseline; cursor: pointer; transition: background-color 250ms; }
.tp__control--minus { visibility: hidden; background: #ffccd2 url(i/minus.svg) no-repeat left 50% top 50%; margin: 0 1px 0 0; }
.tp__option--added .tp__control--minus { border-radius: 5px 0 0 5px; visibility: visible; }
.tp__control--plus { border-radius: 5px; background: #caf69b url(i/plus.svg) no-repeat left 50% top 50%;}
.tp__option--added .tp__control--plus { border-radius: 0 5px 5px 0; }


/* оформление кнопки показать ещё */
.tp__expanded { color: #000; font: 15px/42px geometria, arial; width: 100%; background: #fff; border: none; cursor: pointer; margin: -10px 0 0 0; }
.tp__expanded-name { border-bottom: 1px dashed; display: inline-block; vertical-align: baseline; line-height: 14px; }

/* оформление футера */
.tp__footer { background: #eefcdf; padding: 15px 20px 0 20px; margin: 0 -20px; }
.tp__submit { border-radius: 3px; transition: background 250ms; background: #68c600; color: #fff; font: 600 20px/45px geometria, arial; cursor: pointer; border: none; width: 100%; }
.tp__submit:before { content: attr(data-default); }
.tp--no-topping .tp__submit:before { content: attr(data-no-topping); }
.tp__troubles { text-align: center; font: 12px/15px geometria, arial; padding: 10px 0; }
.tp__troubles-tel { text-decoration: none; color: #000; font-weight: 700; }


/* DESKTOP */
@media screen and (min-width: 501px){

    .tp { width: 300px; border-radius: 5px; }

    .tp__close:hover { opacity: 1; }
    .tp__submit:hover { background: #61BE00; }
    .tp__expanded:hover { color: #f00; }
    .tp__control--minus:hover { background-color: #ff99a5; }
    .tp__control--plus:hover { background-color: #b4dc89; }
    .tp__radio-wrap:hover > .tp__radio-ico { border-color: #09f; }

}




/* MOBILE */
@media screen and (max-width: 500px){
    .tp__submit { line-height: 60px; }
    .tp__expanded { cursor: pointer; }
}