body {
    background-color: #f8f9fa;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0; /* Ensure no unintended margins */
    padding: 0; /* Ensure no unintended padding */
    overflow-x: hidden; /* Prevent horizontal scrolling of the entire page */
    font-family: 'Poppins', sans-serif;
}

h1 {
    font-weight: bold;
    text-align: center;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* .fiyat{
   display: none;
} */

#menu-categories-wrapper {
    width: 100%; /* Ensure the wrapper takes the full width */
    display: flex;
    justify-content: center; /* Center the categories on desktop */
}

#menu-categories {
    display: flex;
    justify-content: flex-start; /* Align categories to the start */
    gap: 40px;
    overflow-x: auto; /* Enable horizontal scrolling */
    padding: 10px 15px; /* Add padding to prevent content from touching screen edges */
    position: sticky;
    top: 0;
    background-color: #f8f9fa;
    z-index: 1000;
    scrollbar-width: thin;
    max-width: 100%; /* Make sure it doesn't overflow the wrapper */
    box-sizing: border-box; /* Include padding in element's width */
    scroll-behavior: smooth;
    overflow-x: auto;
    overflow-y: hidden;
}

.category-item {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
    width: 90px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
    min-height: 110px; /* Ensures enough space for multi-line text */
}

.category-item.active {
    background-color: #f0c40f;
    border-radius: 10px;
}

.category-icon {
    width: 50px;
    height: 50px;
    object-fit: contain;
    margin-bottom: 5px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.category-title {
    font-size: 0.9rem;
    font-weight: 500;
    white-space: normal;         /* Allow text to wrap */
    word-break: break-word;      /* Break long words if needed */
    overflow: visible;           /* No hidden overflow */
    text-overflow: unset;        /* No ellipsis */
    text-align: center;
    text-decoration: none;
    color: #000;
    display: block;
    margin-top: 2px;
    line-height: 1.1;
    max-width: 100%;
    min-height: 2.2em;           /* Ensures at least two lines of height for balance */
}

.category-title:hover {
    text-decoration: none;
    color: #333;
}

.category-button {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    text-decoration: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#menu-items {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center drink items */
    width: 100%; /* Ensure drink items take full width of container */
}

#menu-items .card {
    width: 100%; /* Make each drink card take full width */
    max-width: 500px; /* Limit the maximum width of each drink card */
    margin-bottom: 15px;
    text-align: center;
}

#order-summary-btn {
    background-color: #6366f1;
    font-size: 1.5rem;
    padding: 10px 30px;
    border-radius: 50px;
}

#order-summary-btn:hover {
    background-color: #4f46e5;
}


.language-selection {
    background-color: #fff;
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
}

.language-icon {
    width: 40px;
    height: 40px;
    margin: 0 10px;
    transition: transform 0.2s ease;
}

.language-icon:hover {
    transform: scale(1.2);
}

.language-selection a {
    text-decoration: none;
}

.menu-category {
    margin-bottom: 40px;
}

.drink-item {
    width: 100%; /* Full width for single-column layout */
    margin-bottom: 20px;
}

.card {
    max-width: 100%; /* Ensure card stretches full width */
    margin: 0 auto;
}

.card-img-top {
    width: 100%; /* Ensure image scales to full width */
    height: auto;
}

.category-item .btn-link {
    width: 100%; /* Make category buttons responsive */
}

.category-item.active .btn-link {
    font-weight: bold; /* Highlight the active category */
    background-color: #ffe680; /* Adjust color for the active category */
}


#logo {
    max-width: 25%; /* Default for larger screens */
    height: auto;
}

/* Adjust for smaller screens */
@media (max-width: 768px) {
    #logo {
        max-width: 30%; /* Increase the size for mobile phones */
    }
}

@media (max-width: 480px) {
    #logo {
        max-width: 30%; /* Further increase for very small screens */
    }
}

.superscript {
    font-size: 0.75em; /* Adjust the size of the decimal part */
    vertical-align: super; /* Move it up */
    line-height: 0;
}