@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

.rmmp-menu {
    font-family: 'Roboto', sans-serif;
}

.rmmp-section {
    width: 100%;
    margin-bottom: 30px;
}

.rmmp-section-title {
    font-size: 1.8em;
    margin-bottom: 20px;
    text-align: center;
    font-weight: 700;
    color: #333;
    text-transform: uppercase;
}

.rmmp-menu-items {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.rmmp-menu-item {
    width: 100%;
    margin-bottom: 20px;
}

.product {
    position: relative;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.product:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    transform: translateY(-5px);
}

.product-thumb {
    display: block;
    width: 100%;
    overflow: hidden;
    background-color: #f0f0f0;
}

.product-thumb.rmmp-image-mode-crop {
    aspect-ratio: 751 / 365;
}

.product-thumb.rmmp-image-mode-full {
    aspect-ratio: auto;
    height: auto;
}

.product-thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

.product-body {
    padding: 0;
    margin: 0;
}

.prod {
    display: flex;
    align-items: center; /* Center items vertically */
    background: #fe4f1a;
    color: #fff;
    padding: 0;
    height: 33px; /* Fixed height for the bar */
    position: relative;
    width: 100%;
    box-sizing: border-box;
    gap: 5px; /* Space between title and price */
}

.product-title-wrap {
    flex: 1; /* Take all available space */
    padding-left: 7px;
    margin: 0;
    display: flex;
    align-items: center;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
    mask-image: linear-gradient(to right, transparent, black 10px, black 90%, transparent); /* Fade edges */
    -webkit-mask-image: linear-gradient(to right, transparent, black 10px, black 90%, transparent);
}

.comm {
    font-family: 'Antique Olive Compact', sans-serif;
    font-size: 15pt;
    font-weight: 900;
    line-height: 1.1;
    color: white;
    padding: 0;
    text-decoration: none;
    margin: 0;
    white-space: nowrap;
    /* Removed overflow: hidden and text-overflow: ellipsis */
}

/* Animation class to be added via JS */
.rmmp-scroll-active {
    display: inline-block;
    animation: rmmp-marquee 8s linear infinite alternate;
}

@keyframes rmmp-marquee {
    0% { transform: translateX(0); }
    20% { transform: translateX(0); } /* Pause at start */
    80% { transform: translateX(calc(-100% + 250px)); } /* Move to left - approximate container width? No, need precise calc */
    100% { transform: translateX(calc(-100% + 250px)); } /* Pause at end */
}

/* Better Animation: calculating based on 100% of parent is hard in pure CSS keyframes without vars. 
   Let's use JS to set the translate value or use a simpler "hover to scroll" interaction?
   
   The user wants "animate to left and right".
   Let's try a Javascript-driven CSS variable approach for precision.
*/
.rmmp-scroll-active {
    animation: rmmp-pingpong var(--scroll-duration, 5s) linear infinite alternate;
}

@keyframes rmmp-pingpong {
    0%, 15% { transform: translateX(0); }
    85%, 100% { transform: translateX(calc(100% - var(--scroll-width))); } /* Move until end touches right side */
}
/* Wait, we are moving the element LEFT, so transform should be negative.
   We want to move it by (scrollWidth - clientWidth).
   So transform: translateX( -1 * (scrollWidth - clientWidth) )
*/
@keyframes rmmp-pingpong {
    0%, 20% { transform: translateX(0); }
    80%, 100% { transform: translateX(var(--scroll-distance)); }
}

.price-buttons-wrap {
    flex: 0 0 35%; /* Back to 35% as requested */
    display: flex;
    align-items: center; /* Center vertically */
    height: 100%;
    padding: 0;
    margin: 0;
    gap: 3px;
    box-sizing: border-box;
    padding-right: 3px; /* Ensure rightmost border isn't cut by card edge */
}

.price-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #fe5019;
    padding: 0px 5px;
    height: 100%;
    margin: 0;
    box-sizing: border-box;
    flex: 1; /* Fills the rest of the 35% area */
    overflow: hidden;
}

.price-section h4 {
    margin: 0;
    color: black;
    font-size: 13pt; /* Specific font size */
    font-weight: 900;
    font-family: 'Antique Olive Compact', sans-serif;
    line-height: 17px; /* Adjust line height */
    text-align: center; /* Align text to center */
    white-space: nowrap;
}

.price-section p {
    margin: 0;
    color: black;
    font-size: 6pt; /* Specific font size */
    font-family: 'Antique Olive Compact', sans-serif;
    font-weight: 900;
    line-height: 11px; /* Adjust line height */
    text-align: left; /* Align text to left */
    white-space: nowrap;
}


.buttons-section {
    flex: 0 0 45px; /* Slightly more compact button area */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.rmmp-info-button {
    font-size: 9pt; /* Specific font size */
    font-family: "Antique Olive Compact", sans-serif;
    font-weight: bold;
    cursor: pointer;
    border: 1px solid black;
    background: rgb(254, 80, 25);
    color: white;
    padding: 5px; /* 5px padding */
    line-height: 1em; /* 1em line height */
    width: 100%; /* Fill available width */
    margin: 0; /* No margin */
    transition: background 0.3s ease;
    box-sizing: border-box;
}

.rmmp-info-button:hover {
    background: #e04416;
}

.rmmp-details {
    display: none;
    background: rgb(254 79 26);
    margin-top: 2px;
    margin-left: 2px;
    margin-right: 2px;
    padding: 12px 8px;
    color: #fff;
}

.rmmp-details h5 {
    color: black;
    font-size: 15pt;
    margin: 0;
    font-weight: 600;
    line-height: 20px;
    font-family: 'Antique Olive Compact', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(0, 0, 0, 0.2);
    margin-bottom: 10px;
}

.rmmp-ingredients-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.rmmp-ingredient-tag {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.25);
    color: white;
    font-size: 8pt;
    padding: 5px 12px;
    border-radius: 15px;
    font-weight: 500;
    font-family: 'Antique Olive Compact', sans-serif;
    border: 1px solid rgba(255, 255, 255, 0.4);
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.rmmp-allergens {
    margin-bottom: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
}

.rmmp-allergens:first-child {
    border-top: none;
    padding-top: 0;
}

.rmmp-allergens:last-child {
    margin-bottom: 0;
}

.rmmp-allergens-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.rmmp-allergen-icon {
    height: 42px;
    width: 42px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    padding: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.rmmp-portions {
    padding-top: 12px;
    border-top: 2px solid rgba(0, 0, 0, 0.3);
    margin-top: 8px;
}

.rmmp-portions-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rmmp-portion {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.rmmp-portion:last-child {
    border-bottom: none;
}

.rmmp-portion-name {
    color: white;
    font-size: 11.5pt;
    text-transform: lowercase;
    font-family: 'Antique Olive Compact', sans-serif;
}

.rmmp-portion-price {
    color: black;
    font-size: 14pt;
    font-weight: 700;
    font-family: 'Antique Olive Compact', sans-serif;
}

@media (min-width: 768px) {
    .rmmp-section-title {
        font-size: 2.2em;
    }
    .rmmp-menu-item {
        width: calc(50% - 10px);
    }
}

@media (min-width: 992px) {
    .rmmp-section-title {
        font-size: 2.8em;
    }
    .rmmp-menu-item {
        width: calc(33.333% - 14px);
    }
}