/* =========================================
   ROSSO PIZZA DETAILS
========================================= */


/* =========================================
   PIZZA BADGES
========================================= */

.pizza-badge {

  position:
    absolute;

  top:
    12px;

  left:
    12px;

  z-index:
    2;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  padding:
    7px
    10px;

  border-radius:
    999px;

  color:
    white;

  font-size:
    .65rem;

  font-weight:
    900;

  letter-spacing:
    .04em;

  text-transform:
    uppercase;

  backdrop-filter:
    blur(8px);

  box-shadow:
    0
    5px
    15px
    rgba(0, 0, 0, .18);

}


.pizza-badge-vegetarisch {

  background:
    rgba(
      42,
      120,
      67,
      .92
    );

}


.pizza-badge-scharf {

  background:
    rgba(
      215,
      25,
      32,
      .94
    );

}


/* =========================================
   DETAILS BUTTON
========================================= */

.details-button {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    7px;

}


.details-arrow {

  display:
    inline-block;

  color:
    var(--red);

  font-size:
    .85rem;

  transition:
    transform
    .2s
    ease;

}


.details-open
.details-arrow {

  transform:
    translateY(1px);

}


/* =========================================
   DETAILS AREA
========================================= */

.pizza-details {

  margin-top:
    15px;

  padding-top:
    14px;

  border-top:
    1px solid
    var(--line);

  animation:
    pizzaDetailsIn
    .2s
    ease;

}


.pizza-allergens {

  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;

}


.pizza-allergens strong {

  color:
    var(--ink);

  font-size:
    .7rem;

  font-weight:
    900;

  letter-spacing:
    .04em;

  text-transform:
    uppercase;

}


.pizza-allergens span {

  color:
    var(--muted);

  font-size:
    .75rem;

  line-height:
    1.5;

}


/* =========================================
   DETAILS ANIMATION
========================================= */

@keyframes pizzaDetailsIn {

  from {

    opacity:
      0;

    transform:
      translateY(-4px);

  }

  to {

    opacity:
      1;

    transform:
      translateY(0);

  }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 760px) {

  .pizza-badge {

    top:
      10px;

    left:
      10px;

    padding:
      6px
      9px;

    font-size:
      .6rem;

  }


  .pizza-details {

    margin-top:
      13px;

    padding-top:
      12px;

  }


  .pizza-allergens span {

    font-size:
      .72rem;

  }

}