/* Restaurant card of the portal list (PortalRestaurantCard.razor). The fallbacks are the standard portal look; a
   restaurant's published theme sets the --rc-* variables on the card (Services/PortalCardTheme.cs). */

.restaurant-container {
    display: flex;
    align-items: center;
    column-gap: 15px;
    padding: 8px 6px;
    border: var(--rc-border, 0) solid var(--rc-line, transparent);
    border-radius: var(--rc-radius, 8px);
    background: var(--rc-surface, transparent);
    box-shadow: var(--rc-shadow, 0 1px 2px 1px #B3A2A24D);
    color: var(--rc-text, inherit);
    font-family: var(--rc-font-body, inherit);
    cursor: pointer;
}

.rc-logo {
    position: relative;
    width: 99px;
    height: 99px;
    border-radius: min(var(--rc-radius, 12px), 24px);
    background-position: center;
    background-size: cover;
    cursor: pointer;
}

.rc-badge {
    position: absolute;
    right: 2px;
    bottom: 4px;
    width: 20px;
    height: 20px;
}

.rc-photo {
    border-radius: min(var(--rc-radius, 12px), 24px);
    cursor: pointer;
}

.rc-body {
    display: flex;
    flex-direction: column;
    row-gap: 5px;
    width: 70%;
}

.rc-name {
    color: var(--rc-primary, inherit);
    font-family: var(--rc-font-display, inherit);
    font-size: 16px;
    font-weight: 500;
}

.rc-themed .rc-name {
    font-size: 17px;
    font-weight: 600;
}

.rc-facts {
    display: flex;
    column-gap: 9px;
}

.rc-fact {
    display: flex;
    align-items: center;
    column-gap: 4px;
}

.rc-fact-divided {
    padding-left: 10px;
    border-left: 1px solid var(--rc-line, #D6D6D6);
}

.rc-services {
    display: flex;
    align-items: center;
    column-gap: 6px;
    overflow-x: auto;
}

.rc-service {
    display: flex;
    align-items: center;
    height: 26px;
    padding-inline: 10px;
    border-radius: min(var(--rc-radius, 8px), 12px);
    background: var(--rc-accent, #F4F2FD);
    color: var(--rc-accent-text, inherit);
    font-size: 12px;
    white-space: nowrap;
}

.rc-detail {
    color: var(--rc-muted, inherit);
    font-size: 12px;
    font-weight: 400;
}