/* Header */
header {
    text-align: center;
}

header h1 {
    margin-bottom: 1em;
}

.logo {
    text-align: center;
}

.logo img {
    margin: 0 auto 4em;
    max-width: 40%;
    max-height: 200px;
}

.restaurant-picture {
    margin-bottom: 4em;
}

.restaurant-picture img {
    display: inline-block;
}

.tools {
    border-top: 1px solid #eeeeee;
    border-bottom: 1px solid #eeeeee;
    margin: 2em 0;
    padding: 1em 0;
}

.share {
    margin-top: 1.5em;
}

/* Menu */
.abrente-restaurant-menu {
    font-size: 1.5em;
    margin: 0 auto;
    max-width: 900px;
}

.category-image {
    text-align: center;
}

.category-image img {
    width: 800px;
    margin-bottom: 3rem;
}

.plate {
    border-bottom: 1px dotted #cccccc;
    margin-bottom: 1.5rem;
}

.title-price-container {
    align-items: last baseline;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.plate-name {
    font-size: 110%;
    font-weight: bold;
}

.plate-image {
    width: 80px;
    height: 80px;
    border-radius: 50%;
}

.plate-description {
    font-size: 85%;
}

.prices {
    display: grid;
    grid-template-columns: auto auto;
    font-size: 90%;
}

.price {
    font-weight: bold;
    white-space: nowrap;
}

.price-text {
    font-weight: bold;
}

.concept-price {
    display: inline-block;
    margin-right: .25em;
    text-align: right;
}

/* Accordion */

/* just for example as nested accordion */
[data-accordion-prefix-classes="minimalist-css"] {
    margin-left: 1em;
}

.minimalist-accordion__header,
.minimalist-noanim-accordion__header,
.minimalist-css-accordion__header {
    background: transparent url('../images/icons/chevron-down.svg') no-repeat right center;
    /* background: transparent url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>') no-repeat right center; */
    border: none;
    color: #333333;
    cursor: pointer;
    display: block;
    font-family: inherit;
    font-size: 1em;
    font-weight: normal;
    line-height: 1.5;
    margin: 0;
    padding: .25em 0;
    text-align: left;
    width: 100%;
}

h2 .minimalist-accordion__header {
    color: var(--ortrestaurant-primary-color);
}

h3 .minimalist-accordion__header {
    color: var(--ortrestaurant-secondary-color);
}

h4 .minimalist-accordion__header {
    color: var(--ortrestaurant-secondary-color);
}

h5 .minimalist-accordion__header {
    color: var(--ortrestaurant-secondary-color);
}
.minimalist-accordion__header:focus,
.minimalist-noanim-accordion__header:focus,
.minimalist-css-accordion__header:focus {
    outline: none;
}

[aria-expanded="true"].minimalist-accordion__header,
[aria-expanded="true"].minimalist-noanim-accordion__header,
[aria-expanded="true"].minimalist-css-accordion__header {
    background-image: url('../images/icons/chevron-up-blue.svg');
}

.minimalist-accordion__title,
.minimalist-noanim-accordion__title,
.minimalist-css-accordion__title {
    border-bottom: 1px solid #dddddd;
    font-size: 1.65em;
    margin-bottom: 1em;
}

.minimalist-accordion__panel {
    display: block;
    overflow: hidden;
    opacity: 1;
    -webkit-transition: visibility 0s ease, max-height 1s ease, opacity 1s ease;
    transition: visibility 0s ease, max-height 1s ease, opacity 1s ease;
    visibility: visible;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    margin: 0;
    padding: 0;
}

/* This is the hidden state */
[aria-hidden=true].minimalist-accordion__panel {
    display: block;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    -webkit-transition-delay: 1s, 0s, 0s;
    transition-delay: 1s, 0s, 0s;
    margin: 0;
    padding: 0;
}

/* This is the hidden state */
[aria-hidden=true].minimalist-css-accordion__panel {
    display: block;
    opacity: 0;
    transform: scaleY(0);
    max-height: 0;
    visibility: hidden;
    -webkit-transition-delay: 1s, 0s, 0s, 0s;
    transition-delay: 1s, 0s, 0s, 0s;
    margin: 0;
    padding: 0;
}

.minimalist-noanim-accordion__panel {
    display: block;
}

[aria-hidden=true].minimalist-noanim-accordion__panel {
    display: none;
}

/* Allergens */
.allergens {
    font-size: 0.7em;
}

.allergens span.allergen-texts {
    text-transform: lowercase;
}

.allergens img {
    filter: grayscale(100%);
    margin-right: 1em;
    max-width: 2em;
}

.allergens img:hover {
    filter: grayscale(0%);
}

.allergen-tooltip {
    display: inline-block;
    position: relative;
    text-align: left;
}

.allergen-tooltip .right {
    background-color: #444444;
    border-radius: 6px;
    box-shadow: 0 1px 8px rgba(0,0,0,0.5);
    box-sizing: border-box;
    color: #ffffff;
    left: 90%;
    max-width: 12em;
    min-width: 8em;
    opacity: 0;
    padding: .5em 1em;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translate(0, -50%);
    transition: opacity 0.5s;
    visibility: hidden;
    z-index: 10;
}

.allergen-tooltip:hover .right {
    opacity: 1;
    visibility: visible;
}

.allergen-tooltip .right i {
    height: 24px;
    margin-top: -12px;
    overflow: hidden;
    position: absolute;
    right: 100%;
    top: 50%;
    width: 12px;
}

.allergen-tooltip .right i::after {
    background-color: #444444;
    box-shadow: 0 1px 8px rgba(0,0,0,0.5);
    content: '';
    height: 12px;
    left: 0;
    position: absolute;
    top: 50%;
    transform: translate(50%,-50%) rotate(-45deg);
    width: 12px;
}