/* Default state: mobile containers are hidden */
.mobile-actions-left,
.mobile-actions-right {
    display: none;
    position: absolute;
    top: 5%;
    transform: translateY(-50%);
    z-index: 10;
    flex-direction: column;
    gap: 10px;
}

.mobile-actions-left {
    left: 5px;
}

.mobile-actions-right {
    right: 15px;
}

.mobile-actions-left button,
    .mobile-actions-left button[data-action="reset"] {
    padding: 6px 9px;
    font-size: 0.7rem;
    min-width: 70px; /* Ensure buttons have a decent width */
    background: none; /* Remove background */
    border: none; /* Remove border if any */
    color: black; /* Set text color to black */
    font-weight: bold; /* Make text bold */
}
.mobile-actions-right button {
    padding: 8px 12px;
    font-size: 0.9rem;
    font-weight: bold;
    background: none;
    border: none;
    color: black;
}

/* Mobile view: show mobile containers, hide desktop .left-actions */
@media (max-width: 768px) {
    .left-actions {
        display: none !important; /* Use important to override other styles if needed */
    }

    .mobile-actions-left,
    .mobile-actions-right {
        display: flex;
    }
    /* Add more space between the two buttons in the left column */
    .mobile-actions-left {
        gap: 30px; /* Increase vertical spacing */
        top: 50px; /* Position from the top in pixels */
        transform: translateY(-50%); /* Vertically center the element */
    }
    .mobile-actions-right {
        top: 50px; /* Align with left actions */
        transform: translateY(-50%);
    }
    /* Make the Serve Drink button more prominent and larger */
    .mobile-actions-left .serve-drink {
        background-color: #a9e649; /* Green color for positive action */
        color: black;
        padding: 8px 11px; /* Larger padding */
        border-radius: 6px; /* Rounded corners */
        font-size: 0.75rem;
    }
    .ingredient-display[data-display-area="top_circle"] {
        position: absolute;
        top: 40px;
        left:75%;
        transform: translateX(-50%);
        z-index: 20; /* Ensure it is above other top-panel elements */
    }
    .ingredient-display[data-display-area="bottom_circle"] {
        margin-top: -70px; /* Move it closer to the top circle */
        max-width: 60%; /* Reduce the container width to encourage wrapping */
        margin-left: auto; /* Center the container */
        margin-right: auto; /* Center the container */
        display: flex; /* Enable flexbox for alignment */
        flex-wrap: wrap; /* Allow items to wrap into multiple rows */
        justify-content: center; /* Center the items within the container */
    }
    .ingredient-display .item {
    font-size: 1.2em; /* Adjust font size for the new 3-row layout */
    padding: 0 5px; /* Add some horizontal padding */
}
/* New styles for the mobile bottom bar */
.mobile-bottom-bar {
    display: none; /* Hidden by default */
}
@media (max-width: 768px) {
    /* Hide original sections on mobile */
    .sections-container > .garnish-section,
    .sections-container > .desktop-recipe-book {
        display: none;
    }
    /* Style the new combined bar */
    .mobile-bottom-bar {
        display: flex;
        width: 100%;
        background-color: #e67e22; /* Match body background */
        border-top: 2px solid #000;
        z-index: 100;
    }
    .mobile-bottom-bar .section {
        flex: 1;
        border-bottom: none;
        margin-bottom: 0;
        padding: 0;
    }
    .mobile-bottom-bar .section .section-header {
        justify-content: center;
        margin-bottom: 0;
        padding: 15px 10px;
    }
    .mobile-bottom-bar .garnish-section {
        border-right: 1px solid #000;
    }
}
}
/* New styles for desktop view to hide mobile-specific elements */
@media (min-width: 769px) {
    .mobile-bottom-bar {
        display: none !important; /* Explicitly hide on desktop */
    }
}
@media (max-width: 768px) {
    .feedback-book {
        top: 70px; /* Stack below on mobile */
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        --tx: -50%; /* Center the book feedback on mobile */
    }
    .random-mode-button, .full-exam-button {
        padding: 6px 14px; /* Smaller padding */
        font-size: 0.8rem; /* Smaller font size */
    }
    .random-mode-button {
        bottom: 10px;      /* Position closer to the bottom */
    }
    .full-exam-button {
        bottom: 45px; /* Adjust position for mobile */
    }
    .challenge-tracker {
        font-size: 1rem; /* Smaller font for mobile */
        top: 15px;
    }
    #measurement-controls {
        flex-direction: column; /* Stack rows vertically */
        align-items: center;
        gap: 2px; /* Space between rows */
    }
    .measurement-row {
        display: flex;
        justify-content: center;
        gap: 5px; /* Space between buttons */
    }
    .measurement-button {
        padding: 3px 6px; /* Adjusted smaller padding */
        font-size: 0.6rem; /* Adjusted smaller font */
        min-width: 25px; /* Adjusted smaller width */
    }
    
    .recipe-book-modal-content {
        padding: 1rem;
        width: 95%;
        border-width: 6px;
        max-height: 85vh; /* Limit height on mobile */
        display: flex; /* Enable flexbox for scrolling content */
        flex-direction: column;
    }
    .recipe-book-content {
        overflow-y: auto; /* Allow content to scroll */
        padding-right: 1rem; /* Add some space for the scrollbar */
    }
    .recipe-book-content h2 {
        font-size: 1.4rem;
    }
    .recipe-details-grid {
        grid-template-columns: 1fr; /* Stack columns on mobile */
        gap: 1rem;
    }
}