:root {
--primary: #00A14B;
--primary-dark: #008F44;
--secondary: #333333;
--accent: #FFD700;
--background: #FBFEFD; /* Updated to match styles.css */
--text: #707070; /* Updated to match styles.css */
--title-color: #393939; /* Updated to match styles.css */
--first-color: #069C54; /* Updated to match styles.css */
--first-color-alt: #048654; /* Updated to match styles.css */
}

.dark-theme {
--background: #1D2521; /* Updated to match styles.css */
--text: #C7D1CC; /* Updated to match styles.css */
--secondary: #F1F3F2; /* Updated to match styles.css */
--title-color: #F1F3F2;
--text-color: #C7D1CC;
--body-color: #1D2521;
--container-color: #27302C;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}

body {
font-family: 'Poppins', sans-serif;
background-color: var(--background);
color: var(--text);
overflow-x: hidden;
}

html {
scroll-behavior: smooth;
}

.navbar {
width: 100%;
background-color: var(--body-color); /* Updated to match styles.css body color */
z-index: 1000;
padding: 1rem 2rem;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
transition: padding 0.3s ease;
}

.nav-container {
max-width: 1400px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
}

.logo {
font-family: 'Poppins', sans-serif;
color: var(--first-color); /* Updated to use variable */
font-size: 1.5rem;
font-weight: 600;
text-decoration: none;
}

.nav-right {
display: flex;
align-items: center;
gap: 2rem;
}

.header-actions {
display: flex;
gap: 1.5rem;
align-items: center;
}

.header-actions button {
background: none;
border: none;
cursor: pointer;
font-size: 1.25rem;
color: var(--text);
position: absolute;
right: 1rem;
top: 1.8rem;
color: var(--text-color);
font-size: 1rem;
cursor: pointer;
background: none;
border: none;
}

.search-bar {
width: 300px;
padding: 0.8rem 1.5rem;
border: 1px solid var(--text-color-light);
border-radius: 25px;
background: var(--container-color);
color: var(--text);
font-size: 0.9rem;
font-family: 'Poppins', sans-serif;
transition: all 0.3s ease;
}

.search-bar:focus {
outline: none;
border-color: var(--first-color);
box-shadow: 0 0 0 2px rgba(0,161,75,0.1);
}

.search-bar::placeholder {
color: var(--text-color-light);
font-family: 'Poppins', sans-serif;
}

.nav-links {
display: flex;
align-items: center;
gap: 3rem;
margin-left: 2rem;
}

.nav-links a {
font-family: 'Poppins', sans-serif;
color: var(--text); /* Updated to use variable */
text-decoration: none;
font-size: 0.95rem;
font-weight: 500;
position: relative;
transition: color 0.3s ease;
}

.nav-links a:hover {
color: var(--first-color); /* Updated to use variable */
}

.nav-links a::after {
content: '';
position: absolute;
width: 100%;
height: 2px;
bottom: -5px;
left: 0;
background: var(--first-color); /* Updated to use variable */
transform: scaleX(0);
transition: transform 0.3s ease;
}

.nav-links a:hover::after {
transform: scaleX(1);
}

.menu-section {
padding: 2rem;
position: relative;
overflow: hidden;
}

.menu-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 200px;
background: linear-gradient(180deg, rgba(0,161,75,0.05) 0%, rgba(255,255,255,0) 100%);
z-index: -1;
}

.section-title {
font-family: 'Poppins', sans-serif;
font-size: 3rem;
font-weight: 600;
text-align: center;
margin-bottom: 4rem;
color: var(--first-color); /* Updated to use variable */
opacity: 0;
transform: translateY(30px);
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.section-title.visible {
opacity: 1;
transform: translateY(0);
}

.menu-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2.5rem;
max-width: 1400px;
margin: 0 auto;
padding: 0 1rem;
}

.card {
width: 100%;
height: 320px;
background: var(--container-color); /* Updated to use variable */
border-radius: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: var(--text); /* Updated to use variable */
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
cursor: pointer;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
overflow: hidden;
transform: none;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}

.img {
height: 100%;
width: 100%;
position: absolute;
object-fit: cover;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1;
}

.textBox {
opacity: 0;
display: flex;
flex-direction: column;
align-items: start;
justify-content: end;
width: 100%;
height: 100%;
gap: 0.5em;
padding: 1.5em;
z-index: 2;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: white;
border: 1px solid rgba(255, 255, 255, 0.1);
}

.textBox > .head {
font-family: 'Poppins', sans-serif;
font-size: 1.3em;
font-weight: 600;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.textBox > .price {
font-size: 1.1em;
font-weight: 500;
color: var(--first-color); /* Updated to use variable */
}

.textBox > .description {
font-size: 0.85em;
color: var(--text); /* Updated to use variable */
font-weight: 300;
line-height: 1.5;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.card:hover {
transform: none;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.card:hover > .textBox {
opacity: 0;
}

.card:hover > .img {
transform: none;
filter: none;
}

.card.active {
transform: translateY(-10px) scale(1.02);
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

.card.active > .textBox {
opacity: 1;
}

.card.active > .img {
transform: scale(1.1);
filter: blur(3px);
}

.dish-wrapper {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
position: relative; /* Add this to contain absolute positioned tooltip */
}

.dish-name {
font-family: 'Poppins', sans-serif;
color: var(--text);
font-size: 1.1em;
font-weight: 500;
text-align: center;
margin-top: 0.5rem;
opacity: 1;
transition: opacity 0.3s ease, transform 0.3s ease;
}

.dish-name.hidden {
opacity: 0;
transform: translateY(-10px);
}

@media (max-width: 768px) {
.menu-grid {
    grid-template-columns: repeat(2, 1fr); /* Changed to always show 2 columns */
    gap: 1rem;
    padding: 0 0.5rem;
}

.card {
    height: 280px; /* Slightly smaller height for mobile */
}

.textBox > .head {
    font-size: 1.1em; /* Smaller font for mobile */
}

.textBox > .description {
    font-size: 0.8em;
}

.textBox > .price {
    font-size: 1em;
}

.section-title {
    font-size: 2.25rem;
    margin-bottom: 2.5rem;
}

.nav-container {
    flex-direction: row; /* Keep horizontal layout */
    flex-wrap: wrap;
    gap: 0.5rem;
}

.nav-right {
    order: 3; /* Move search to bottom */
    width: 100%;
    margin-top: 0.5rem;
}

.search-bar {
    width: 100%;
}

.nav-links {
    order: 2;
    margin-left: 0;
    gap: 1rem;
    font-size: 0.9em; /* Slightly smaller font */
}

.logo {
    order: 1;
    font-size: 1.2rem; /* Slightly smaller logo */
}

.menu-section {
    padding-top: 6rem; /* Reduce top padding */
}

.dish-name {
    font-size: 0.9em;
}

.navbar {
    padding: 0.5rem 1rem; /* Reduced padding */
}

.nav-container {
    flex-direction: column;
    align-items: center; /* Center align items */
    gap: 0.25rem;
}

.nav-right {
    order: 2;
    width: 100%;
    margin-top: 0.25rem;
    gap: 0.5rem;
    justify-content: center; /* Center align items */
}

.nav-links {
    order: 3;
    width: 100%;
    margin: 0;
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.25rem;
    justify-content: center; /* Center align items */
}

.nav-links::-webkit-scrollbar {
    display: none; /* Hide scrollbar for cleaner look */
}

.nav-links a {
    padding: 0.25rem 0.75rem;
    white-space: nowrap;
    font-size: 0.85rem;
}

.logo {
    order: 1;
    font-size: 1.1rem;
    text-align: center; /* Center align logo */
    width: 100%; /* Ensure logo takes full width */
}

.search-bar {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
}

.menu-section {
    padding-top: 7rem; /* Adjusted to account for compact navbar */
}

.header-actions {
    gap: 0.75rem;
    justify-content: center; /* Center align items */
}

.menu-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem; /* Reduced gap */
    padding: 0 0.5rem;
}

.card {
    height: 200px; /* Reduced height for mobile */
}

.textBox {
    padding: 1rem; /* Reduced padding */
}

.textBox > .head {
    font-size: 0.95em; /* Smaller font */
}

.textBox > .description {
    font-size: 0.75em;
    -webkit-line-clamp: 2; /* Limit to 2 lines */
    line-clamp: 2; /* Standard property for compatibility */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.textBox > .price {
    font-size: 0.9em;
}

.dish-name {
    font-size: 0.85em;
    margin-top: 0.25rem; /* Reduced margin */
}

.dish-wrapper {
    gap: 0.25rem; /* Reduced gap */
}

.nav-links {
    display: flex;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 0.5rem 0;
    gap: 1.5rem;
    justify-content: start; /* Change from center to start */
    padding-left: 1rem; /* Add left padding */
}

.nav-links::-webkit-scrollbar {
    display: none;
}

.nav-links a {
    white-space: nowrap;
    font-size: 0.9rem;
    padding: 0.5rem 0;
    flex-shrink: 0; /* Prevent text from shrinking */
    position: relative;
    display: inline-block;
}

/* Adjust navbar container for mobile */
.nav-container {
    padding: 0;
    height: auto;
    flex-direction: column;
    align-items: stretch; /* Change from center to stretch */
}

.logo {
    padding: 0.5rem 1rem;
    text-align: left; /* Align logo to left */
    width: auto; /* Remove full width */
}

/* Add visual indicator for scrollable area */
.nav-links::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 20px;
    background: linear-gradient(to right, transparent, var(--background));
    pointer-events: none;
}

.navbar {
    padding: 0.5rem 1rem;
}

.menu-section {
    padding: 1rem;
}
}

/* Remove all hint-related styles and replace with: */
.card .hint-content,
.section-hint,
.card.show-hint,
.section-hint.show,
.section-hint::after {
display: none;
}

/* Media Queries - fix nesting issues */
@media (max-width: 768px) {
/* ...existing mobile styles... */
}

@media (min-width: 1024px) {
.card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

.card:hover > .textBox {
    opacity: 1;
}

.card:hover > .img {
    transform: scale(1.1);
    filter: blur(3px);
}

.card:hover + .dish-name {
    opacity: 0;
    transform: translateY(-10px);
}
}

@media (max-width: 1023px) {
.card:hover {
    transform: none;
    box-shadow: none;
}

.card:hover > .textBox {
    opacity: 0;
}

.card:hover > .img {
    transform: none;
    filter: none;
}

.card.active {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

.card.active > .textBox {
    opacity: 1;
}

.card.active > .img {
    transform: scale(1.1);
    filter: blur(3px);
}
}

.dark-theme .navbar {
background-color: var(--body-color); /* Updated to use the variable in dark theme */
}

.dark-theme .card {
background: #27302C; /* Updated to match styles.css */
}

.dark-theme .search-bar {
background: #27302C; /* Updated to match styles.css */
border-color: #404040;
color: #ffffff;
}

.dark-theme .navbar {
background-color: var(--body-color);
}

.dark-theme .card {
background-color: var(--container-color);
}

.dark-theme .search-bar {
background-color: var(--container-color);
border-color: var(--text-color);
color: var(--text-color);
}

/* Add new styles for login popup */
.login-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(8px);
z-index: 9999;
justify-content: center;
align-items: center;
}

.login-overlay.active {
display: flex;
}

.login-popup {
background: #ffffff;
color: #333333;
padding: 2.5rem;
border-radius: 1rem;
text-align: center;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
z-index: 1000;
animation: popIn 0.3s ease;
width: 90%;
max-width: 400px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.popup-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(5px);
z-index: 999;
}

.popup-title {
color: var(--first-color);
font-size: 1.75rem;
margin-bottom: 1rem;
font-weight: 600;
}

.popup-message {
color: var(--text-color);
margin-bottom: 2rem;
line-height: 1.6;
font-size: 1.1rem;
}

.popup-button {
background: var(--first-color);
color: white;
border: none;
padding: 1rem 2rem;
border-radius: 0.5rem;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
font-size: 1rem;
}

.popup-button:hover {
background: var(--first-color-alt);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

@keyframes popIn {
from {
    transform: translate(-50%, -60%);
    opacity: 0;
}
to {
    transform: translate(-50%, -50%);
    opacity: 1;
}
}

.main-content {
transition: filter 0.3s ease;
}

.main-content.blurred {
filter: blur(8px);
pointer-events: none;
}

.content-blur {
filter: blur(5px);
pointer-events: none;
}

.content-blur {
filter: blur(5px);
pointer-events: none;
transition: filter 0.3s ease;
}

.popup-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(5px);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
opacity: 0;
transition: opacity 0.3s ease;
}

.popup-container.show {
opacity: 1;
}

.login-popup {
background: white;
padding: 2.5rem;
border-radius: 1rem;
text-align: center;
width: 90%;
max-width: 400px;
transform: translateY(-20px);
transition: transform 0.3s ease;
position: relative;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.popup-container.show .login-popup {
transform: translateY(0);
}

.popup-close {
position: absolute;
top: 1rem;
right: 1rem;
background: none;
border: none;
font-size: 1.5rem;
color: var(--text-color);
cursor: pointer;
transition: color 0.3s ease;
}

.popup-close:hover {
color: var(--first-color);
}

.login-popup {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scale(0.95);
opacity: 0;
transition: all 0.3s ease;
z-index: 1000;
width: 90%;
max-width: 400px;
background: white;
padding: 2.5rem;
border-radius: 1rem;
text-align: center;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.login-popup.show {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}

/* Remove close button and related styles */
.popup-close {
display: none;
}

.popup-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(5px);
z-index: 999;
}

/* Add Botpress chat container styles */
#bp-widget {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999;
}