/**
 * Menu Module Styles
 *
 * Estilos específicos para el módulo Menu.
 * Estos estilos son independientes del demo y funcionan con cualquier template.
 *
 * @module Menu
 * @version 1.0.0
 */

/* ============================================
   Menu Item Styles
   ============================================ */

/**
 * Container for menu item details (name, price, line)
 */
.custom-menu-item .custom-menu-item-details {
    display: flex;
    justify-content: space-between;
    position: relative;
}

/**
 * Menu item title container
 */
.custom-menu-item .custom-menu-item-details .custom-menu-item-title {
    position: relative;
    padding-bottom: 10px;
}

/**
 * Menu item price container
 */
.custom-menu-item .custom-menu-item-details .custom-menu-item-price {
    position: relative;
    top: -5px;
}

/**
 * Menu item price styling
 */
.custom-menu-item .custom-menu-item-details .custom-menu-item-price strong {
    font-size: 20.8px;
    font-size: 1.3rem;
}

/**
 * Currency symbol styling (smaller than price)
 */
.custom-menu-item .custom-menu-item-details .custom-menu-item-price strong > span {
    font-size: 0.6em;
}

/**
 * Dashed line between menu item name and price
 */
.custom-menu-item .custom-menu-item-details .custom-menu-item-line {
    position: absolute;
    width: 100%;
    bottom: 0;
    border-bottom: dashed 1px #777;
}

/**
 * Menu item description container
 */
.custom-menu-item .custom-menu-item-desc {
    position: relative;
    margin-top: 5px;
}

/**
 * Spacing between menu items
 */
.custom-menu-item + .custom-menu-item {
    margin-top: 25px;
}

/* ============================================
   Menu Layout Utilities
   ============================================ */

/**
 * Negative margin for overlapping card with image
 * Used to create the visual effect where the card overlaps the image (Porto demo)
 */
@media (min-width: 992px) {
    .custom-negative-margin-top-1 {
        margin-top: -360px;
    }
}

/**
 * Min height for menu section image column so layout doesn't collapse when image is missing
 * Prevents Sweet Selection (or any section) from overlapping the previous section
 */
.menu-section-image-col {
    min-height: 280px;
}
@media (min-width: 992px) {
    .menu-section-image-col {
        min-height: 320px;
    }
}

/**
 * Divider size for menu sections
 */
.custom-divider-size-1 {
    height: 3px;
}

/* ============================================
   Responsive Adjustments
   ============================================ */

/**
 * Mobile adjustments
 */
@media (max-width: 991px) {
    .custom-negative-margin-top-1 {
        margin-top: 0;
    }

    .custom-menu-item .custom-menu-item-details {
        flex-direction: column;
    }

    .custom-menu-item .custom-menu-item-details .custom-menu-item-price {
        top: 0;
        margin-top: 5px;
        align-self: flex-end;
    }
}

/* ============================================
   Theme/Demo Specific Overrides (Optional)
   ============================================ */

/**
 * These can be overridden by demo-specific CSS if needed
 * For example, demo-restaurant.css can override colors, fonts, etc.
 */

/* Example: Customize line color per demo */
/* .demo-restaurant .custom-menu-item .custom-menu-item-details .custom-menu-item-line {
    border-bottom-color: #your-color;
} */