/* 
 * Restaurant Menu Elementor Widget Styles
 * Version: 1.0.0
 */

.menu-app * {
    margin: 0 ;
    padding: 0 ;
    box-sizing: border-box ;
}

.menu-app {
    font-family: Arial, sans-serif ;
    color: #000 ;
    line-height: 1.4 ;
    min-height: 100vh ;
    scroll-behavior: smooth ;
}

.menu-app-container {
    margin: 0 auto ;
    padding: 20px ;
    width: 100% ;
    max-width: 1000px ;
}

/* Restaurant Name Header */
.restaurant-name-header {
    text-align: center ;
    margin-bottom: 30px ;
    padding: 20px ;
    background: linear-gradient(135deg, #333 0%, #000 100%) ;
    border-radius: 10px ;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2) ;
}

.restaurant-name {
    color: #fff ;
    font-size: 2.5em ;
    font-weight: bold ;
    text-transform: uppercase ;
    letter-spacing: 3px ;
    margin: 0 ;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3) ;
}

.restaurant-name::before {
    content: '★' ;
    color: #ffd700 ;
    margin-right: 15px ;
}

.restaurant-name::after {
    content: '★' ;
    color: #ffd700 ;
    margin-left: 15px ;
}

/* Navigation Styles */
.menu-app-navigation {
    display: flex ;
    gap: 0 ;
    margin-bottom: 25px ;
    border: 2px solid #000 ;
    border-radius: 8px ;
    overflow: hidden ;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) ;
    position: sticky ;
    top: 0 ;
    z-index: 1000 ;
    background: #fff ;
    backdrop-filter: blur(10px) ;
}

.menu-app-nav-btn {
    flex: 1 ;
    background: #fff ;
    border: none ;
    padding: 15px 12px ;
    cursor: pointer ;
    border-right: 1px solid #000 ;
    font-weight: bold ;
    font-size: 14px ;
    text-transform: uppercase ;
    letter-spacing: 1px ;
    transition: all 0.3s ease ;
    position: relative ;
}

.menu-app-nav-btn:last-child {
    border-right: none ;
}

.menu-app-nav-btn:hover {
    background: #f0f0f0 ;
    transform: translateY(-1px) ;
}

.menu-app-nav-btn.active {
    background: #000 ;
    color: #fff ;
    transform: translateY(-1px) ;
}

.menu-app-nav-btn.active:hover {
    background: #333 ;
}

.menu-app-nav-btn:focus {
    outline: 2px solid #007bff ;
    outline-offset: 2px ;
}

/* Section Styles */
.menu-app-section {
    margin-bottom: 40px ;
    border: 0px solid #000 ;
    border-radius: 0px ;
    background: #fff ;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) ;
}

.menu-app-section-header {
    background: #000 ;
    color: #fff ;
    text-align: center ;
    padding: 15px 12px ;
    font-size: 18px ;
    font-weight: bold ;
    letter-spacing: 2px ;
    text-transform: uppercase ;
}

/* Menu Item Styles */
.menu-app-menu-item {
    border-bottom: 1px solid #eee ;
    padding: 15px 20px ;
    display: flex ;
    justify-content: space-between ;
    align-items: flex-start ;
    transition: background-color 0.2s ease ;
}

.menu-app-menu-item:hover {
    background-color: #f8f9fa ;
}

.menu-app-menu-item:last-child {
    border-bottom: none ;
}

.menu-app-item-left {
    flex: 1 ;
    padding-right: 15px ;
}

.menu-app-item-name {
    font-weight: bold ;
    font-size: 16px ;
    margin-bottom: 6px ;
    color: #000 ;
}

.menu-app-item-description {
    font-style: italic ;
    color: #666 ;
    font-size: 14px ;
    line-height: 1.3 ;
}

.menu-app-item-price {
    color: #dc3545 ;
    font-weight: bold ;
    font-size: 16px ;
    margin-left: 20px ;
    white-space: nowrap ;
    font-family: 'Courier New', monospace ;
}

/* Size Options */
.menu-app-size-options {
    display: flex;
    gap: 40px;
    background: #f8f9fa;
    padding: 12px 20px;
    border-bottom: 1px solid #eee;
    justify-content: center;
}

.menu-app-size-option {
    text-align: center;
    padding: 8px 15px;
    border-radius: 5px;
    background: #fff;
    border: 1px solid #ddd;
    transition: all 0.2s ease;
}

.menu-app-size-option:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.menu-app-size-name {
    font-weight: bold;
    margin-bottom: 4px;
    font-size: 14px;
}

.menu-app-size-price {
    color: #dc3545;
    font-weight: bold;
    font-family: 'Courier New', monospace;
}

/* Menu Section Display */
.menu-app-menu-section {
    display: none ;
    animation: fadeIn 0.3s ease-in-out ;
}

.menu-app-menu-section.active {
    display: block ;
}

/* Stacked Layout - All sections visible */
.menu-layout-stacked .menu-app-menu-section {
    display: block ;
    margin-bottom: 40px ;
}

.menu-layout-stacked .menu-sections-container {
    margin-top: 20px ;
}

.menu-layout-stacked .menu-app-navigation {
    margin-bottom: 20px ;
}

/* Filter functionality for stacked layout */
.menu-layout-stacked .menu-app-menu-section.filtered-hidden {
    display: none ;
}

/* Tabbed Layout - Original behavior */
.menu-layout-tabbed .menu-app-menu-section {
    display: none ;
}

.menu-layout-tabbed .menu-app-menu-section.active {
    display: block ;
}

/* Sticky Headers */
.sticky-headers .menu-app-section-header.sticky-header {
    position: sticky ;
    top: 0 ;
    z-index: 100 ;
    backdrop-filter: blur(10px) ;
    border-bottom: 1px solid rgba(0,0,0,0.1) ;
    transition: all 0.3s ease ;
}

.sticky-headers .menu-app-section-header.sticky-header:hover {
    transform: translateY(-1px) ;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) ;
}

/* Navigation adjustments for sticky headers */
.sticky-headers.menu-layout-stacked .menu-app-navigation {
    position: sticky ;
    top: 0 ;
    z-index: 101 ;
    margin-bottom: 0 ;
}

.sticky-headers.menu-layout-stacked .menu-sections-container {
    margin-top: 0 ;
}

/* Menu items container */
.menu-app-items-container {
    background: inherit ;
}

/* Enhanced container styling */
.menu-app-container {
    border-radius: 8px ;
    overflow: hidden ;
}

/* Section improvements */
.menu-app-section {
    position: relative ;
    overflow: hidden ;
}

/* Special item enhancements */
.menu-app-special-item {
    position: relative ;
    transform: translateX(0) ;
    transition: all 0.3s ease ;
}

.menu-app-special-item:hover {
    transform: translateX(5px) ;
    box-shadow: -4px 0 0 0 #ffc107 ;
}

/* Price styling enhancements */
.menu-app-item-price {
    transition: all 0.3s ease ;
    font-weight: bold ;
    min-width: fit-content ;
}

.menu-app-menu-item:hover .menu-app-item-price {
    transform: scale(1.05) ;
}

/* Info item styling */
.menu-app-info-item {
    background: #f8f9fa ;
    border-left: 4px solid #6c757d ;
    font-style: italic ;
}

.menu-app-info-item .menu-app-item-name {
    color: #6c757d ;
    font-weight: normal ;
}

/* Hide navigation for stacked layout without filter */
.menu-layout-stacked .menu-app-navigation:not(.has-filter) {
    display: none ;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Special Items */
.menu-app-special-item {
    background: #fff8e1;
    border-left: 4px solid #ffc107;
}

.menu-app-info-item {
    background: #f0f0f0;
    font-style: italic;
    border-left: 4px solid #6c757d;
}

.menu-app-info-item .menu-app-item-name {
    font-weight: normal;
    color: #6c757d;
}

/* Responsive Design */
@media (max-width: 768px) {
    .menu-app-container {
        padding: 15px ;
    }
    
    .restaurant-name {
        font-size: 2em ;
        letter-spacing: 2px ;
    }
    
    .restaurant-name-header {
        margin-bottom: 20px ;
        padding: 15px ;
    }
    
    .menu-app-navigation {
        position: fixed ;
        top: 0 ;
        left: 0 ;
        right: 0 ;
        margin: 0 ;
        border-radius: 0 ;
        z-index: 1001 ;
        box-shadow: 0 2px 8px rgba(0,0,0,0.2) ;
    }
    
    .menu-app-nav-btn {
        flex: 1 ;
        padding: 12px 8px ;
        font-size: 11px ;
        font-weight: bold ;
        letter-spacing: 0.5px ;
        min-height: 50px ;
        display: flex ;
        align-items: center ;
        justify-content: center ;
    }

    .menu-app-container {
        margin-top: 60px ;
    }

    .menu-app-size-options {
        flex-direction: column ;
        gap: 12px ;
        align-items: center ;
    }

    .menu-app-size-option {
        width: 200px ;
    }

    .menu-app-item-price {
        margin-left: 10px ;
        font-size: 15px ;
    }

    .menu-app-menu-item {
        padding: 12px 15px ;
    }

    .menu-app-section-header {
        padding: 12px ;
        font-size: 16px ;
    }
}

@media (max-width: 480px) {
    .menu-app-container {
        padding: 10px ;
        margin-top: 70px ;
    }
    
    .restaurant-name {
        font-size: 1.5em ;
        letter-spacing: 1px ;
    }
    
    .restaurant-name-header {
        margin-bottom: 15px ;
        padding: 10px ;
    }
    
    .restaurant-name::before,
    .restaurant-name::after {
        margin: 0 10px ;
    }

    .menu-app-navigation {
        flex-wrap: wrap ;
    }

    .menu-app-nav-btn {
        flex: 1 1 calc(33.333% - 2px) ;
        border-right: 1px solid #000 ;
        border-bottom: 1px solid #000 ;
        min-height: 45px ;
        font-size: 10px ;
        padding: 8px 4px ;
    }

    .menu-app-nav-btn:nth-child(3n) {
        border-right: none ;
    }

    .menu-app-nav-btn:nth-last-child(-n+3) {
        border-bottom: none ;
    }

    .menu-app-menu-item {
        flex-direction: column ;
        align-items: flex-start ;
        gap: 8px ;
        padding: 15px ;
    }

    .menu-app-item-price {
        margin-left: 0 ;
        align-self: flex-end ;
        background: #f8f9fa ;
        padding: 6px 10px ;
        border-radius: 6px ;
        border: 2px solid #dc3545 ;
        font-size: 16px ;
        font-weight: bold ;
    }

    .menu-app-section-header {
        font-size: 15px ;
        padding: 10px ;
    }

    .menu-app-item-name {
        font-size: 15px ;
    }

    .menu-app-item-description {
        font-size: 13px ;
        line-height: 1.4 ;
    }
}

/* Print Styles */
@media print {
    .menu-app-navigation {
        display: none ;
    }
    
    .menu-app-menu-section {
        display: block ;
    }
    
    .menu-app-section {
        break-inside: avoid ;
        margin-bottom: 20px ;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .menu-app {
        scroll-behavior: auto ;
    }
    
    .menu-app-nav-btn {
        transition: none ;
    }
    
    .menu-app-menu-item {
        transition: none ;
    }
    
    .menu-app-size-option {
        transition: none ;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .menu-app-nav-btn {
        border: 2px solid #000 ;
    }
    
    .menu-app-section {
        border: 1px solid #000 ;
    }
}