/* Basic Reset */
* {
    font-family: Inter, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif; /* Apply the imported font */
    line-height: 1.6;
    background-color: #121212; /* Slightly darker background */
    color: #e0e0e0; /* Slightly lighter grey text */
    padding-bottom: 40px; /* Add padding to the bottom of the body */
    margin: 0; /* Ensure no default body margin */
}

.container {
    width: 100%; /* Use full width and rely on inner padding */
    margin: 0 auto;
    max-width: 500px; /* Max width for mobile */
    /* Horizontal padding is handled by specific sections now */
    padding: 0;
}

/* Header */
.header {
    background-color: #121212; /* Match body background */
    color: #e0e0e0;
    position: relative; /* Needed for absolute positioning of basket icon */
    padding-bottom: 20px; /* Space below bottom header content */
}

.header .top-banner {
    /* Using a placeholder for the orange wavy pattern - replace with your image */
    background-image: url('banner-image.jpg');
    background-size: cover;
    background-position: center;
    height: 190px; /* Further increased height */
    display: flex;
    align-items: center;
    justify-content: center; /* Center the logo */
    margin-bottom: 20px; /* Adjusted space between banner and details */
    position: relative; /* Needed for positioning the logo */
    overflow: hidden; /* Hide any overflow from potential patterns */
    max-width: 500px; /* Set max width to match container */
    margin: 0 auto 20px auto; /* Center the banner and keep bottom margin */
}

.header .logo-circle {
    width: 120px; /* Further increased size */
    height: 120px; /* Further increased size */
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: absolute;
    top: 70px;
    margin-left: 10px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5); /* More prominent shadow */
    z-index: 99; /* Ensure logo is above banner */
}

.header .logo-circle img {
    width: 100%; /* Adjusted size */
    height: 100%; /* Adjusted size */
    object-fit: contain; /* Use contain to avoid cropping logo */
}

.header .bottom-header {
    padding-bottom: 20px; /* Adjusted space below bottom header content */
    border-top-left-radius: 20px; /* Add rounded top-left corner */
    border-top-right-radius: 20px; /* Add rounded top-right corner */
    background-color: #121212; /* Ensure background is consistent */
}

.header .bottom-header .container {
    /* No specific styles needed here beyond the main container */
    padding: 0 20px; /* Increased horizontal padding in the bottom header */
}

.header h1 {
    font-size: 2.6em; /* Further increased title size */
    margin-bottom: 12px; /* Adjusted space below title */
    color: #fff; /* White title */
    font-weight: 700; /* Bold font weight */
}

.header .contact-info,
.header .description,
.header .ordering-info,
.header .social-media {
    font-size: 1em; /* Adjusted font size */
    margin-bottom: 8px; /* Adjusted space between detail lines */
    color: #cccccc; /* Lighter grey for details */
}

.header .social-media a {
    color: #cccccc;
    text-decoration: none;
}

.header .contact-info a {
    color: #cccccc; /* Match the color of the surrounding text */
    text-decoration: none; /* Remove the default underline */
}

.header .contact-info a:hover {
    text-decoration: underline; /* Add underline on hover for feedback */
}

.header .actions {
    margin-top: 25px; /* Adjusted space above actions button */
    margin-bottom: 25px; /* Adjusted space below actions button */
}

.header .google-maps-btn {
     display: inline-block;
    padding: 12px 28px 12px 50px; /* Adjusted padding to make space for icon */
    background-color: #18ab1c; /* Updated green color */
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1.1em; /* Adjusted font size */
     border: none; /* Ensure no default button border */
     cursor: pointer;
     font-weight: 600; /* Semi-bold font weight */
     background-image: url('2gis_icon.png'); /* Add 2GIS icon */
     background-size: 24px 24px; /* Adjust icon size */
     background-repeat: no-repeat;
     background-position: 18px center; /* Position icon */
}

.header .filter-buttons {
    margin: 40px 0 30px 0; /* Adjusted margins around filter buttons */
    display: flex;
    gap: 20px; /* Increased gap */
}

.header .filter-btn {
    padding: 12px 30px; /* Adjusted padding */
    border: 1px solid #ff6347; /* Tomato color border */
    background-color: transparent;
    color: #ff6347; /* Tomato color text */
    border-radius: 30px; /* More rounded corners */
    cursor: pointer;
    font-size: 1.1em; /* Slightly larger font size */
    transition: all 0.3s ease;
    font-weight: 600; /* Semi-bold font weight */
}

.header .filter-btn.active {
    background-color: #ff6347;
    color: white;
}

.header .search-bar {
    display: flex;
    align-items: center;
    background-color: #333; /* Darker grey for search bar */
    border-radius: 30px; /* More rounded corners */
    padding: 12px 25px; /* Adjusted padding */
    margin-top: 60px;
}

.header .search-bar input {
    border: none;
    background: none;
    outline: none;
    flex-grow: 1;
    color: #eeeeee;
    font-size: 1.1em; /* Slightly larger font size */
    padding: 0; /* Remove vertical padding, controlled by parent */
}

.header .search-bar input::placeholder {
    color: #888;
}

.header .search-bar .search-icon {
    background: none;
    border: none;
    color: #ff9933; /* Match orange color of banner/filter buttons */
    cursor: pointer;
    font-size: 1.5em; /* Slightly larger icon */
}

.basket-icon {
    position: fixed;
    top: 20px; /* Adjusted top position */
    right: 20px; /* Adjusted right position */
    background: rgba(46, 46, 46, 0.8); /* Lighter dark, semi-transparent background */
    backdrop-filter: blur(5px); /* Apply blur effect */
    border: none;
    border-radius: 50%; /* Make it circular */
    /* font-size: 36px; Removed as using image */
    cursor: pointer;
    /* color: #ff9933; Removed as using image */
    z-index: 100; /* Ensure basket icon is above other elements */
    padding: 10px; /* Add padding for the background */
    display: flex; /* Use flexbox to center image and span */
    justify-content: center;
    align-items: center;
}

.basket-icon img {
    display: block; /* Ensure image is block level */
    width: 36px; /* Match previous font size */
    height: 36px; /* Match previous font size */
    object-fit: contain; /* Ensure image fits without stretching */
}

/* @media (max-width: 400px) {
    .basket-icon{
        right: 100;
    }
} */

/* Adjust basket icon position on smaller screens */
@media (max-width: 500px) {
    .basket-icon {
        right: 20px;
    }

    /* Adjust basket count position relative to the icon */
    .basket-count {
        right: -5px; /* Keep relative positioning to the icon */
    }
}
@media (max-width: 310px) {
    .basket-icon {
        right: 35px;
    }
}

.basket-count {
    position: absolute;
    top: -5px;
    right: -10px;
    background-color: rgb(100, 34, 34);
    color: white;
    border-radius: 20%;
    padding: 2px 6px;
    font-size: 12px;
    font-weight: 600;
}

/* Menu Categories Section */
.menu-categories-section,
.menu-items-section {
    padding-top: 0; /* Remove top padding, handled by header margin */
    padding-bottom: 40px; /* Increased padding at the bottom */
    padding-left: 20px; /* Increased horizontal padding */
    padding-right: 20px; /* Increased horizontal padding */
    opacity: 1; /* Default opacity */
    transition: opacity 0.5s ease-in-out; /* Smooth fade transition */
    /* Optional: Add transform for a sliding effect */
    /* transform: translateX(0); */
    /* transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; */
}

.menu-categories-section.hidden,
.menu-items-section.hidden {
    opacity: 0; /* Hide by making transparent */
    pointer-events: none; /* Disable interactions when hidden */
    /* display handled by JS after transition */
}

.menu-categories-section h2,
.menu-items-section h2 {
    text-align: left; /* Align title left as in image */
    margin-bottom: 30px; /* Further adjusted margin below title */
    font-size: 2.2em; /* Further adjusted title font size */
    color: #eeeeee; /* White title */
    font-weight: 700; /* Bold font weight */
}

/* Style for the subcategory title in the menu items section (used for search results title) */
.menu-items-section .subcategory-title {
    font-size: 1.8em; /* Slightly smaller font size for search results title */
}

.categories-grid {
    gap: 10px;
    display: grid; /* Change to block layout */
}

.category-card {
    position: relative;
    border-radius: 30px; /* Increased border radius */
    overflow: hidden;
    height: 120px; /* Reduced height */
    display: flex; /* Use flex for centering content */
    width: 100%; /* Ensure card takes full width */
    text-align: center;
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    color: white;
    font-size: 1.6em; /* Larger font size */
    font-weight: 700; /* Bold font weight */
    cursor: pointer;
    background-size: cover;
    background-position: center;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.35); /* Adjusted shadow */
    margin-bottom: 25px; /* Add space between cards */
    /* Initial state for animation */
    opacity: 0;
    transform: translateY(20px);
    /* Transition to final state */
    transition: opacity 0.4s ease-out, transform 0.4s ease-out; /* Shorter transition for cards */
}

.category-card.visible {
    opacity: 1;
    transform: translateY(0);
}

.category-card .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Adjusted overlay darkness */
    z-index: 0;
}

.category-card h3 {
    position: relative;
    z-index: 1;
    padding: 0 10px; /* Add horizontal padding to text */
}

/* Menu Items Section */
.menu-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* Adjusted minmax for slightly larger cards */
    gap: 15px; /* Increased gap */
}
.menu-items-grid p{
    margin-bottom: 25px;
}


.menu-items-grid h2{

    border-top: #444 dotted 2px;
    margin-bottom: 0px;
}

.menu-item-card {
    background-color: #1e1e1e; /* Adjusted item card background */
    border-radius: 12px; /* More rounded corners */
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adjusted shadow */
    color: #e0e0e0; /* Match body text color */
    margin-bottom: 0; /* Remove bottom margin, gap handles spacing */

    /* Initial state for animation */
    opacity: 0;
    transform: translateY(20px);
    /* Transition to final state */
    transition: opacity 0.4s ease-out, transform 0.4s ease-out; /* Shorter transition for cards */
}

.menu-item-card.visible {
    opacity: 1;
    transform: translateY(0);
}

.menu-item-card img {
    width: 100%;
    height: 140px; /* Increased image height */
    object-fit: cover;
}

.menu-item-card .item-details {
    padding: 15px; /* Increased padding */
}

.menu-item-card .item-details h4 {
    margin-top: 0;
    margin-bottom: 8px; /* Adjusted margin */
    font-size: 1.2em; /* Slightly larger font size */
    color: #eeeeee; /* White title for item */
    font-weight: 600; /* Semi-bold font weight */
}

.menu-item-card .item-details p {
    font-size: 0.95em; /* Adjusted font size */
    color: #cccccc; /* Lighter grey description */
    margin-bottom: 12px; /* Adjusted margin */
}

.menu-item-card .price-and-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.menu-item-card .price {
    font-size: 1.2em; /* Slightly larger font size */
    font-weight: bold;
    color: #ff6347; /* Tomato color */
}

.menu-item-card .quantity-controls {
    display: flex;
    align-items: center;
}

.menu-item-card .quantity-controls button {
    background-color: #ff6347;
    color: white;
    border: none;
    border-radius: 50%;
    width: 28px; /* Slightly larger buttons */
    height: 28px; /* Slightly larger buttons */
    font-size: 1.1em;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin: 0 4px; /* Adjusted space */
}

.menu-item-card .quantity-controls .quantity {
    font-size: 1.1em; /* Slightly larger font size */
    font-weight: bold;
    margin: 0 6px; /* Adjusted space */
    color: #eeeeee; /* Light grey quantity text */
}

/* Basket Modal */
.basket-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Darker overlay for modal */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.basket-content {
    background-color: #1e1e1e; /* Dark background for modal */
    padding: 30px; /* Increased padding */
    border-radius: 12px; /* More rounded corners */
    max-width: 400px;
    width: 95%;
    max-height: 80%;
    overflow-y: auto;
    color: #e0e0e0; /* Match body text color */
}

/* Media query for smaller screens */
@media (max-width: 500px) {
    .basket-content {
        padding: 20px; /* Reduced padding for smaller screens */
    }
    .basket-list li {
        padding: 10px 0; /* Reduced vertical padding in list items */
    }
    .item-name {
        margin-right: 10px; /* Reduced space after item name */
    }
    .item-quantity-controls {
        margin-right: 10px; /* Reduced space after quantity controls */
    }
    .item-price {
         margin-left: 10px; /* Reduced space before price */
         min-width: 50px; /* Slightly reduced min-width for price */
    }
}

.basket-content h3 {
    text-align: center;
    margin-bottom: 25px; /* Adjusted margin */
    font-size: 1.6em; /* Adjusted font size */
    color: #fff; /* White modal title */
    font-weight: 700; /* Bold font weight */
    border-bottom: #333 dotted 2px; /* Add dotted bottom border */
    padding-bottom: 15px; /* Add padding below the title and border */
}

.basket-list {
    list-style: none;
    padding: 0;
    margin-bottom: 25px; /* Adjusted margin */
}

.basket-list li {
    display: flex; /* Use flexbox for horizontal layout */
    justify-content: space-between; /* Distribute space between items */
    align-items: center; /* Vertically align items */
    padding: 15px 0; /* Increased padding */
    border-bottom: 1px solid #444; /* Slightly lighter dark border */
    flex-wrap: wrap; /* Allow items to wrap to the next line */
}

.basket-list li:last-child {
    border-bottom: none;
}

.item-name {
    flex-grow: 1; /* Allow name to take up available space */
    margin-right: 10px; /* Space after item name */
    font-size: 1.1em; /* Slightly larger font size for name */
    color: #eeeeee; /* Lighter text for name */
    word-break: break-word; /* Break long words */
}

.item-quantity-controls {
    display: flex;
    align-items: center;
    margin-right: 10px; /* Space after quantity controls */
    flex-shrink: 0; /* Prevent shrinking */
    margin-top: 5px; /* Add a small top margin if it wraps */
}

.item-quantity-controls button {
    background-color: #333; /* Darker background for buttons */
    color: #eee; /* Light grey text */
    border: none;
    border-radius: 4px; /* Slightly rounded corners */
    width: 28px; /* Slightly smaller size */
    height: 28px; /* Slightly smaller size */
    font-size: 1.1em; /* Slightly smaller font size */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin: 0 4px; /* Adjusted space */
    transition: background-color 0.2s ease;
}

.item-quantity-controls button:hover {
    background-color: #555; /* Darker hover effect */
}

.item-quantity-controls .quantity {
    font-size: 1em; /* Slightly smaller font size */
    font-weight: bold;
    margin: 0 6px; /* Adjusted space */
    color: #eeeeee; /* Light grey quantity text */
    flex-shrink: 0; /* Prevent shrinking */
    min-width: 18px; /* Slightly reduced min-width */
    text-align: center;
}

.item-price {
    font-size: 1.1em; /* Slightly larger price font size */
    font-weight: 600; /* Semi-bold font weight */
    color: #ff6347; /* Tomato color */
    margin-left: 10px; /* Space before price */
    flex-shrink: 0; /* Prevent shrinking */
    min-width: 50px; /* Slightly reduced min width */
    text-align: right; /* Align price to the right */
     margin-top: 5px; /* Add a small top margin if it wraps */
}

.add-to-basket {
    background-color: #333; /* Darker background */
    color: #eee; /* Light grey text */
    border: none;
    border-radius: 4px; /* Slightly rounded corners */
    width: 30px; /* Increased size */
    height: 30px; /* Increased size */
    font-size: 1.2em; /* Larger font size */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.add-to-basket:hover {
    background-color: #555; /* Darker hover effect */
}

.remove-item {
    color: #ff6347; /* Tomato color for remove button */
    background-color: #444; /* Dark grey background */
    border: none;
    border-radius: 4px; /* Slightly rounded corners */
    width: 24px; /* Smaller square button */
    height: 24px; /* Smaller square button */
    font-size: 1em; /* Adjusted font size for 'x' */
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.2s ease;
    margin-left: 10px; /* Add space to the left of the remove button */
    flex-shrink: 0; /* Prevent shrinking */
     margin-top: 5px; /* Add a small top margin if it wraps */
}

.remove-item:hover {
    background-color: #666; /* Darker hover effect */
}

.basket-total {
    text-align: right;
    font-size: 1.4em; /* Adjusted font size */
    font-weight: 700; /* Bold font weight */
    margin-top: 25px; /* Adjusted margin */
    color: #fff; /* White total price */
}

.close-basket-btn {
    display: block;
    width: 100%;
    padding: 14px;
    background-color: #ff6347;
    color: white;
    border: none;
    border-radius: 8px; /* More rounded corners */
    cursor: pointer;
    margin-top: 30px; /* Adjusted margin */
    font-weight: 600; /* Semi-bold font weight */
    font-size: 1.2em; /* Adjusted font size */
}

.back-to-categories {
    display: block;
    width: 100%;
    padding: 16px; /* Adjusted padding */
    background-color: #555; /* Darker grey background */
    color: #eee; /* Light grey text */
    border: none;
    border-radius: 10px; /* Slightly more rounded corners */
    cursor: pointer;
    margin-top: 30px; /* Adjusted top margin */
    font-size: 1.2em; /* Slightly larger font size */
    font-weight: 600; /* Semi-bold font weight */
    margin-bottom: 18px;
    position: relative; /* Needed for absolute positioning of icon */
    text-align: center; /* Center the text */
    padding-left: 15px; /* Add left padding to make space for the icon */
}

.back-to-categories i {
    position: absolute; /* Position the icon absolutely */
    left: 16px; /* Position from the left (adjust as needed) */
    top: 50%; /* Align vertically */
    transform: translateY(-50%); /* Center vertically */
}

.back-to-categories span {
    /* No longer need flex-grow as text-align centers it */
}

/* Footer */
.footer {
    backdrop-filter: blur(10px);
    background-color: rgba(33, 33, 33, 0.763); /* Lighter dark background */
    color: #cccccc; /* Lighter grey text */
    text-align: center;
    padding: 10px 0;
    font-size: 1em;
    font-weight: 600;
}

/* Visual element for the rounded top corners */
.top-corner-visual {
    position: absolute;
    top: 170px; /* Adjust this value to align with the bottom of the banner */
    left: 50%;
    transform: translateX(-50%);
    width: 100%; /* Match the max-width of the container */
    max-width: 500px;
    height: 20px; /* Height to accommodate the rounded corner */
    background-color: #121212; /* Match header background */
    border-top-left-radius: 20px;
    border-top-right-radius:20px;
    z-index: 1; /* Ensure it's above the banner image but below the bottom header */
}

/* Empty basket message styling */
.basket-list .empty-message {
    text-align: center; /* Center the text */
    font-size: 1.2em; /* Make the text bigger */
    color: #cccccc; /* Lighter grey color for the message */
    padding: 20px 0; /* Add some padding for spacing */
    justify-content: center; /* Center content in the flex container */
}

/* Add styles for item info container */
.basket-list li .item-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Allow info to take up available space */
    margin-right: 10px; /* Space after item info block */
}

.basket-list li .item-info .item-name {
    margin-right: 0; /* Remove right margin from item name within info block */
    margin-bottom: 5px; /* Add space below item name */
}

.basket-list li .item-info .item-quantity-controls {
    margin-right: 0; /* Remove right margin from quantity controls within info block */
    margin-top: 0; /* Remove top margin if it wrapped */
}

.basket-list li .item-price, 
.basket-list li .remove-item {
    margin-top: 0; /* Remove top margin added for wrapping */
}

/* Demo Modal */
.demo-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Dark overlay */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.demo-content {
    background-color: #1e1e1e; /* Dark background */
    padding: 30px;
    border-radius: 12px;
    max-width: 400px;
    width: 95%;
    max-height: 80%;
    overflow-y: auto;
    color: #e0e0e0;
}

.demo-content h3 {
    text-align: center;
    margin-bottom: 25px;
    font-size: 1.6em;
    color: #fff;
    font-weight: 700;
    border-bottom: #333 dotted 2px;
    padding-bottom: 15px;
}

.demo-content p {
    margin-bottom: 15px;
    font-size: 1em;
    line-height: 1.5;
}

.demo-content button {
    display: block;
    width: 100%;
    padding: 14px;
    background-color: #ff6347;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 20px;
    font-weight: 600;
    font-size: 1.2em;
}