/* All styles from original index.css and main.css, refactored to be theme-aware */

:root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
    --destructive: 24 95% 53%;
    --destructive-foreground: 0 0% 98%;
    --rating-badge-bg: 0 0% 100%;
    /* Default for light mode */
    --rating-badge-fg: 0 0% 9%;
    /* Brand (orange) token used for accents/hover states */
    --brand: 24 95% 50%;
    --brand-foreground: 0 0% 100%;
    --brand-hover: 24 95% 45%;
}

[data-theme="dark"] {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
    --rating-badge-bg: 0 0% 0%;
    /* Dark mode color */
    --rating-badge-fg: 0 0% 100%;
    --brand: 24 95% 50%;
    --brand-foreground: 0 0% 100%;
    --brand-hover: 24 95% 45%;
}

/* Enhanced orange glow for cards in dark mode */
.card {
    background-color: hsl(var(--card));
    box-shadow: 0 6px 12px hsla(249, 115, 22, 0.15);
    border: 2px solid hsla(249, 115, 22, 0.3);
}

.card:hover {
    box-shadow: 0 0 30px hsla(249, 115, 22, 0.5), 0 0 12px hsla(249, 115, 22, 0.3);
    border: 5px solid #f97316;
}

/* Enhanced orange styling to dish cards in dark mode */
.dish-card {
    background-color: hsl(var(--card));
    box-shadow: 0 6px 12px hsla(249, 115, 22, 0.15);
    border: 2px solid hsla(249, 115, 22, 0.3);
    padding: 0.75rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    min-height: 90px;
}

.dish-card:hover {
    border: 4px solid hsl(var(--foreground));
    transform: translateY(-2px);
    box-shadow: 0 12px 30px hsla(249, 115, 22, 0.25), 0 6px 12px hsla(249, 115, 22, 0.15);
}

/* Enhanced orange styling for favorite combos in dark mode */
.favorite-combo {
    background-color: hsl(var(--card));
    box-shadow: 0 6px 12px hsla(249, 115, 22, 0.15);
    border: 2px solid hsla(249, 115, 22, 0.3);
}

.favorite-combo:hover {
    box-shadow: 0 12px 30px hsla(249, 115, 22, 0.25), 0 6px 12px hsla(249, 115, 22, 0.15);
    border: 2px solid #f97316;
}

/* PWA and Mobile Enhancements */
@media (display-mode: standalone) {
    /* Hide browser UI elements when app is installed */
    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
    
    .header {
        padding-top: env(safe-area-inset-top);
    }
}




@media (max-width: 768px) {
    /* Menu view controls mobile optimization */
    .menu-view-controls {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .menu-view-controls .search-combo-row {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .menu-view-controls .filters-row {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .menu-view-controls .search-input {
        min-width: 100%;
    }
    
    .menu-view-controls .btn,
    .menu-view-controls .select {
        width: 100%;
        justify-content: center;
    }
}

/* Mobile-specific improvements */
@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
    
    .search-container {
        order: 2;
        max-width: 100%;
        margin: 0 1rem;
    }
    
    .header-actions {
        order: 3;
        justify-content: center;
        gap: 0.5rem;
        flex-wrap: wrap;
    }
    
    .header-actions .btn {
        padding: 0.5rem;
        font-size: 0.875rem;
    }
    
    .header-actions .btn span {
        display: none;
    }
    
    .header-actions .btn svg {
        width: 18px;
        height: 18px;
    }
    
    /* Improve touch targets */
    .btn {
        min-height: 44px;
        min-width: 44px;
    }
    

    
    .desktop-menu-toggle {
        display: none;
    }
}

/* PWA Install Button Styling - Minimalist like other buttons */
#installBtn, #installBtnHome {
    background-color: hsl(var(--muted));
    color: hsl(var(--foreground));
    border: 1px solid hsl(var(--border));
    font-weight: 500;
    transition: all 0.2s ease;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
}

#installBtn:hover, #installBtnHome:hover {
    background-color: hsl(var(--muted));
    border-color: hsl(var(--foreground));
    transform: translateY(-1px);
}

/* Safe area support for notched devices */
@supports (padding: max(0px)) {
    .header {
        padding-top: max(1rem, env(safe-area-inset-top));
    }
    
    .main-layout {
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }
}

.badge-south-indian {
    background-color: hsl(142, 76%, 36%);
    color: hsl(138, 76%, 97%);
}

.badge-north-indian {
    background-color: hsl(25, 95%, 53%);
    color: hsl(24, 94%, 58%);
}


.badge-snacks {
    background-color: hsl(48, 96%, 89%);
    color: hsl(25, 95%, 53%);
}

.badge-beverages {
    background-color: hsl(217, 91%, 60%);
    color: hsl(214, 95%, 93%);
}


/* Base Styles (from original index.css) */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    overflow-x: hidden;
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Hero Section */
.hero {
    height: 100vh;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.6)),
        url('https://images.unsplash.com/photo-1513104890138-7c749659a591?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80') center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: hsl(var(--card));
    /* Now using a theme variable */
    position: relative;
    z-index: 1;
}

.hero-content {
    max-width: 800px;
    padding: 0 2rem;
    z-index: 2;
}

.hero-buttons {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.hero-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2rem;
    text-align: center;
    gap: 1rem;
}

.hero-logo-image {
    width: 120px;
    height: 120px;
    border-radius: 20px;
    object-fit: cover;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    border: 3px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.hero-logo-image:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 35px rgba(249, 115, 22, 0.4);
    border-color: rgba(249, 115, 22, 0.6);
}

.hero-logo-text {
    font-size: 3rem;
    font-weight: 800;
    color:#f97316;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.hero h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.1;
    text-shadow: 2px 2px 4px hsla(var(--foreground), 0.5);
}

.hero-subtitle {
    font-size: 1.5rem;
    margin-bottom: 3rem;
    opacity: 0.95;
    font-weight: 400;
}

.app-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 3rem;
}

.app-button {
    display: inline-block;
    transition: transform 0.3s ease;
}

.app-button:hover {
    transform: translateY(-3px);
}

.app-button img {
    height: 60px;
    border-radius: 8px;
}

.scroll-indicator {
    position: absolute !important;
    bottom: 2rem !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
    color: hsl(var(--card)) !important;
    cursor: pointer !important;
    animation: bounce 2s infinite !important;
    /* Simple and clean alignment */
    width: auto !important;
    min-width: 120px !important;
    /* Ensure visibility */
    z-index: 10 !important;
    /* Force proper alignment */
    display: block !important;
}

.scroll-indicator p {
    margin: 0 0 0.5rem 0 !important;
    font-size: 0.9rem !important;
    opacity: 0.8 !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    /* Ensure text is centered */
    text-align: center !important;
    /* Force display */
    display: block !important;
}

.scroll-indicator svg {
    opacity: 0.8 !important;
    /* Ensure icon is properly sized and centered */
    width: 24px !important;
    height: 24px !important;
    /* Center the icon */
    display: block !important;
    margin: 0 auto !important;
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    40% {
        transform: translateX(-50%) translateY(-8px);
    }

    60% {
        transform: translateX(-50%) translateY(-4px);
    }
}

/* Content Sections */
.content-section {
    min-height: 100vh;
    padding: 4rem 0;
    position: relative;
    z-index: 2;
    background-color: hsl(var(--background));
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 3rem;
    color: hsl(var(--foreground));
}

/* Better Food Section */
.better-food-section {
    padding: 6rem 0;
    background: hsl(var(--background));
    position: relative;
    overflow: hidden;
    z-index: 2;
}

.better-food-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4rem;
    align-items: center;
    margin-bottom: 4rem;
    position: relative;
}

.food-illustrations {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    position: relative;
}

.food-item {
    width: 120px;
    height: 120px;
    position: relative;
    animation: float 3s ease-in-out infinite;
}

.food-item:nth-child(2) {
    animation-delay: -1s;
    margin-left: 2rem;
}

.food-item:nth-child(3) {
    animation-delay: -2s;
    margin-left: 4rem;
}

.food-item svg {
    width: 100%;
    height: 100%;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }
}

.better-food-text {
    text-align: center;
    padding: 0 2rem;
}

.better-food-text h2 {
    font-size: 3.5rem;
    font-weight: 700;
    color: hsl(var(--destructive));
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

.better-food-text p {
    font-size: 1.2rem;
    color: hsl(var(--muted-foreground));
    line-height: 1.6;
}

.floating-elements {
    position: relative;
}

.floating-tomato {
    width: 40px;
    height: 40px;
    background: radial-gradient(circle, hsl(var(--destructive)), hsl(var(--destructive) / 0.8));
    border-radius: 50%;
    position: absolute;
    animation: rotate 8s linear infinite;
}

.floating-1 {
    top: 20%;
    right: 10%;
    animation-delay: 0s;
}

.floating-2 {
    bottom: 30%;
    right: 20%;
    animation-delay: -4s;
    width: 30px;
    height: 30px;
}

.floating-leaf {
    width: 35px;
    height: 20px;
    background: hsl(var(--success));
    border-radius: 0 100% 0 100%;
    position: absolute;
    top: 10%;
    left: 15%;
    animation: sway 4s ease-in-out infinite;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg) translateX(30px) rotate(0deg);
    }

    100% {
        transform: rotate(360deg) translateX(30px) rotate(-360deg);
    }
}

@keyframes sway {

    0%,
    100% {
        transform: rotate(-5deg);
    }

    50% {
        transform: rotate(5deg);
    }
}

.stats-row {
    display: flex;
    justify-content: center;
    gap: 4rem;
    margin-top: 3rem;
}

.stat-item-large {
    text-align: center;
    padding: 2rem;
    background: hsl(var(--card));
    border-radius: 16px;
    box-shadow: 0 4px 20px hsla(var(--foreground), 0.08);
    min-width: 200px;
    transition: transform 0.3s ease;
}

.stat-item-large:hover {
    transform: translateY(-5px);
}

.stat-icon {
    background: linear-gradient(135deg, hsl(var(--destructive)), hsl(var(--destructive) / 0.8));
    color: hsl(var(--destructive-foreground));
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 1.5rem;
}

.stat-item-large h3 {
    font-size: 2.5rem;
    font-weight: 800;
    color: hsl(var(--foreground));
    margin-bottom: 0.5rem;
}

.stat-item-large p {
    font-size: 1rem;
    color: hsl(var(--muted-foreground));
    font-weight: 500;
}

/* Responsive for Better Food Section */
@media (max-width: 768px) {
    .better-food-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }

    .food-illustrations {
        justify-content: center;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .food-item {
        margin: 0 !important;
    }

    .better-food-text h2 {
        font-size: 2.5rem;
    }

    .stats-row {
        flex-direction: column;
        gap: 1.5rem;
        align-items: center;
    }

    .stat-item-large {
        min-width: auto;
        width: 280px;
    }
}

/* Features Section */
.features {
    background: hsl(var(--secondary));
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.feature-card {
    background: hsl(var(--card));
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 20px hsla(var(--foreground), 0.1);
    text-align: center;
    transition: transform 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
}

.feature-icon {
    background: linear-gradient(135deg, hsl(var(--destructive)), hsl(var(--destructive) / 0.8));
    color: hsl(var(--destructive-foreground));
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.feature-card h3 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    color: hsl(var(--foreground));
}

.feature-card p {
    color: hsl(var(--muted-foreground));
    line-height: 1.6;
}

/* About Section */
.about {
    background: hsl(var(--background));
}

.about-content {
    text-align: center;
    margin-bottom: 3rem;
}

.about h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: hsl(var(--foreground));
}

.about p {
    font-size: 1.2rem;
    color: hsl(var(--muted-foreground));
    max-width: 600px;
    margin: 0 auto 2rem;
    line-height: 1.6;
}

.developers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.developer-card {
    background: linear-gradient(135deg, hsl(var(--destructive)) 0%, hsl(var(--destructive) / 0.8) 100%);
    color: hsl(var(--destructive-foreground));
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 20px hsl(var(--destructive) / 0.3);
    transition: transform 0.3s ease;
}

.developer-card:hover {
    transform: translateY(-5px);
}

.developer-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: hsla(var(--foreground), 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 2rem;
    font-weight: 700;
}

.developer-card h3 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.developer-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: all 0.3s ease;
}

.developer-card-link:hover .developer-card {
    transform: translateY(-8px);
    box-shadow: 0 8px 25px hsla(255, 87, 34, 0.4);
}

.developer-card p {
    opacity: 0.9;
    font-size: 0.9rem;
    margin: 0;
}

.university-badge {
    background: hsla(var(--foreground), 0.2);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
    margin-top: 1rem;
    display: inline-block;
}

/* Footer */
.footer {
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    padding: 2rem 0;
    text-align: center;
}

.footer p {
    opacity: 0.8;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .hero-logo {
        font-size: 3rem;
    }

    .hero h1 {
        font-size: 2.5rem;
    }

    .hero-subtitle {
        font-size: 1.2rem;
    }

    .app-buttons {
        flex-direction: column;
        align-items: center;
    }

    .app-button img {
        height: 50px;
    }

    .section-title {
        font-size: 2rem;
    }

    .container {
        padding: 0 1rem;
    }
}

/* All other styles from main.css continue below... */
.btn {
    padding: 1rem 2rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    font-size: 1.1rem;
}

.btn-white {
    background: hsl(var(--card));
    color: hsl(var(--destructive));
    transition: all 0.3s ease;
}

/* FIX: The hover style for the button is now a global rule, applying to both themes. */
.btn-white:hover {
    background-color: hsl(var(--destructive));
    color: hsl(var(--card));
    /* Text will be white on hover */
    transform: translateY(-2px);
    box-shadow: 0 6px 20px hsla(var(--foreground), 0.2);
}

/* Favorites tabs styling */
.favorites-tabs {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid hsl(var(--border));
    justify-content: center;
}

.favorites-tab {
    padding: 0.75rem 1.5rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: hsl(var(--muted-foreground));
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
    position: relative;
}

.favorites-tab.active {
    color: hsl(var(--brand));
    border-bottom-color: hsl(var(--brand));
    font-weight: 600;
}

.favorites-tab:hover {
    color: hsl(var(--brand));
    background-color: hsla(var(--muted), 0.5);
}

.favorites-content {
    display: none;
}

.favorites-content.active {
    display: block;
}

.favorite-combo {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-bottom: 1rem;
    transition: all 0.2s;
}

.favorite-combo:hover {
    box-shadow: 0 4px 12px hsla(var(--foreground), 0.1);
}

.combo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid hsl(var(--border));
}

.combo-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: hsl(var(--foreground));
}

.combo-shop {
    color: hsl(var(--muted-foreground));
    font-size: 0.875rem;
}

.combo-actions {
    display: flex;
    gap: 0.5rem;
}

.combo-dishes {
    display: grid;
    gap: 0.75rem;
}

.combo-dish {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: hsl(var(--muted));
    border: 1px solid hsl(var(--border));
    border-radius: 0.375rem;
    transition: all 0.2s ease;
}

.combo-dish:hover {
    background: hsl(var(--accent));
    border-color: hsl(var(--foreground));
}

.combo-dish-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.combo-dish-name {
    font-weight: 500;
}

.combo-dish-price {
    color: hsl(var(--muted-foreground));
    font-size: 0.875rem;
}

.combo-total {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid hsl(var(--border));
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
}

/* Light mode enhancements */
.favorites-tab {
    color: hsl(var(--muted-foreground));
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
}

.favorites-tab.active {
    color: hsl(var(--warning));
    border-bottom-color: hsl(var(--warning));
}

.favorites-tab:hover {
    color: hsl(var(--warning));
}

/* Enhanced button styling for better visibility */
.btn-outline {
    background-color: hsl(var(--muted));
    border: 2px solid hsl(var(--border));
    color: hsl(var(--foreground));
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-outline:hover {
    background-color: hsl(var(--muted));
    border-color: hsl(var(--foreground));
    transform: translateY(-1px);
}

.btn-danger {
    background-color: hsl(var(--destructive));
    color: hsl(var(--destructive-foreground));
    border: 2px solid hsl(var(--destructive));
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-danger:hover {
    background-color: hsla(var(--destructive), 0.9);
    transform: translateY(-1px);
}

.btn-ghost {
    background-color: transparent;
    color: hsl(var(--foreground));
    border: 1px solid transparent;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-ghost:hover {
    background-color: hsl(var(--muted));
    border-color: hsl(var(--border));
}

.btn-primary {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    border: 2px solid hsl(var(--primary));
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-primary:hover {
    background-color: hsla(var(--primary), 0.9);
    transform: translateY(-1px);
}

/* Enhanced card styling for light mode */
.card {
    background-color: hsl(var(--muted) / 0.1);
    border: 2px solid hsl(var(--border));
    box-shadow: 0 6px 12px hsla(var(--foreground), 0.12);
    transition: all 0.2s ease;
}

.card:hover {
    box-shadow: 0 8px 20px hsla(var(--foreground), 0.18);
    transform: translateY(-2px);
    border-color: #f97316;
}

.dish-card {
    background-color: hsl(var(--muted) / 0.1);
    border: 2px solid hsl(var(--border));
    box-shadow: 0 6px 12px hsla(var(--foreground), 0.12);
    transition: all 0.2s ease;
}

.dish-card:hover {
    box-shadow: 0 8px 20px hsla(var(--foreground), 0.18);
    transform: translateY(-2px);
    border-color: #f97316;
}

.favorite-combo {
    background-color: hsl(var(--muted) / 0.1);
    border: 2px solid hsl(var(--border));
    box-shadow: 0 6px 12px hsla(var(--foreground), 0.12);
    transition: all 0.2s ease;
}

.favorite-combo:hover {
    box-shadow: 0 8px 20px hsla(var(--foreground), 0.18);
    transform: translateY(-2px);
}

/* Header Styles */
.header {
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: hsla(var(--background), 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid hsl(var(--border));
    padding: 1rem 0;
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.logo-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-width: 72px;
    min-height: 72px;
}

.header-logo-image {
    width: 64px;
    height: 64px;
    border-radius: 0.75rem;
    transition: transform 0.2s ease;
    object-fit: cover;
}

.header-logo-image:hover {
    transform: scale(1.05);
}

.logo-icon:hover {
    transform: scale(1.05);
    transition: all 0.3s ease;
}



.logo-text h1 {
    font-size: 1.25rem;
    font-weight: bold;
    background: linear-gradient(135deg, hsl(var(--warning)), hsl(var(--destructive)));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.logo-text p {
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
    margin: 0;
    line-height: 1.3;
    font-weight: 500;
}

.search-container {
    position: relative;
    flex: 1;
    max-width: 400px;
}

.search-input {
    width: 100%;
    padding: 0.5rem 0.75rem 0.5rem 2.5rem;
    padding-right: 2.5rem;
    /* Adjusted for microphone icon */
    border: 1px solid hsl(var(--border));
    border-radius: 0.375rem;
    background-color: hsla(var(--background), 0.5);
    color: hsl(var(--foreground));
    font-size: 0.875rem;
}

.microphone-btn {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    display: flex !important;
    /* Ensured display flex */
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: none;
    cursor: pointer;
    color: hsl(var(--muted-foreground));
    transition: color 0.2s;
}

.microphone-btn:hover {
    color: hsl(var(--primary));
}

.microphone-btn.recording {
    color: hsl(var(--destructive));
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% {
        transform: translateY(-50%) scale(1);
        opacity: 1;
    }

    50% {
        transform: translateY(-50%) scale(1.1);
        opacity: 0.7;
    }

    100% {
        transform: translateY(-50%) scale(1);
        opacity: 1;
    }
}


.search-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px hsl(var(--ring));
    /* using box-shadow for ring */
    background-color: hsl(var(--background));
}

.search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    color: hsl(var(--muted-foreground));
}

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

/* Button Styles */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    text-decoration: none;
}

.btn-primary {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

.btn-primary:hover {
    background-color: #f97316;
    border-color: #f97316;
}

.btn-ghost {
    background-color: transparent;
    color: hsl(var(--foreground));
}

.btn-ghost:hover {
    background-color: hsl(var(--accent));
}

.btn-outline {
    background-color: transparent;
    border: 1px solid hsl(var(--border));
    color: hsl(var(--foreground));
}

.btn-outline:hover {
    background-color: hsl(var(--accent));
}

.btn-sm {
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
}

/* Layout */
.main-layout {
    display: flex;
    gap: 0;
    min-height: calc(100vh - 80px);
    /* Ensure main content takes full width when sidebar is hidden */
    width: 100%;
}



.filter-section {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid hsl(var(--border));
}

.filter-section:last-child {
    border-bottom: none;
}

.filter-section h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: hsl(var(--foreground));
}

.filter-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filter-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.filter-option input[type="checkbox"] {
    width: 1.2rem;
    height: 1.2rem;
    accent-color: hsl(var(--brand));
    cursor: pointer;
}

.filter-option span {
    font-size: 0.875rem;
    color: hsl(var(--foreground));
}

.budget-input-group {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.budget-input-group .budget-input {
    flex: 1;
}

.rupee-symbol {
    font-size: 1.2rem;
    font-weight: 600;
    color: hsl(var(--foreground));
    padding: 0.375rem 0.5rem;
    background: hsl(var(--muted));
    border: 1px solid hsl(var(--border));
    border-right: none;
    border-radius: 0.375rem 0 0 0.375rem;
}

.no-results {
    text-align: center;
    padding: 2rem;
    color: hsl(var(--muted-foreground));
    font-size: 1.1rem;
    font-weight: 500;
}

.filter-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
}

.budget-form {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.budget-input {
    flex: 1;
    padding: 0.375rem 0.75rem;
    border: 1px solid hsl(var(--border));
    border-radius: 0 0.375rem 0.375rem 0;
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-size: 0.875rem;
}

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.checkbox {
    width: 1rem;
    height: 1rem;
}

.veg-indicator {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
}

.veg-indicator.veg {
    background-color: hsl(142, 76%, 47%);
}

.veg-indicator.non-veg {
    background-color: hsl(var(--destructive));
}

.select {
    width: 100%;
    padding: 0.375rem 0.75rem;
    border: 1px solid hsl(var(--border));
    border-radius: 0.375rem;
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-size: 0.875rem;
}

/* Price Range Slider */
.price-range {
    margin: 1rem 0;
}

.price-slider {
    width: 100%;
    margin: 0.5rem 0;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 3px;
    background: hsl(var(--muted));
    outline: none;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.price-slider:hover {
    opacity: 1;
}

.price-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: hsl(var(--brand));
    cursor: pointer;
    border: 2px solid hsl(var(--card));
    box-shadow: 0 2px 4px hsla(var(--foreground), 0.2);
}

.price-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: hsl(var(--brand));
    cursor: pointer;
    border: 2px solid hsl(var(--card));
    box-shadow: 0 2px 4px hsla(var(--foreground), 0.2);
}

.price-values {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
}

/* Main Content */
.main-content {
    flex: 1;
    padding: 1.5rem 0;
    overflow-y: auto;
    height: calc(100vh - 80px);
    /* Ensure main content can scroll independently */
    width: 100%;
    max-width: 100%;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.section-title {
    font-size: 1.25rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* UNIFORM SHOP GRID */
.shops-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 320px));
    gap: 1.5rem;
    margin-top: 1.5rem;
    align-items: stretch; /* This ensures all cards in a row have the same height */
    justify-content: center; /* Center the grid items */
    grid-auto-rows: min-content;
    grid-auto-flow: row;
}

/* Ensure grid items maintain consistent sizing */
.shops-grid > * {
    width: 320px;
    max-width: 320px;
    min-width: 320px;
}

/* Ensure proper spacing and alignment */
.shops-grid:empty::before {
    content: '';
    display: block;
    height: 0;
}

/* Ensure shop cards don't expand beyond their intended size */
.shops-grid .shop-card {
    box-sizing: border-box;
    flex-shrink: 0;
}

/* Favorite shops grid - maintain original card sizes */
#favoriteShopsGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 320px));
    gap: 1.5rem;
    margin-top: 1.5rem;
    justify-content: center; /* Center the cards */
}

/* Ensure favorite shop cards don't stretch */
#favoriteShopsGrid .card {
    width: 320px;
    max-width: 320px;
    min-width: 320px;
    height: auto;
    margin: 0 auto;
}

/* Additional styling for favorite shops section */
#favoriteShopsSection {
    margin-bottom: 2rem;
}

/* Ensure hidden state overrides all other display properties */
#favoriteShopsSection.hidden {
    display: none !important;
}

#favoriteShopsSection .section-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.shop-card {
    /* Use Flexbox for flexible internal layout */
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    justify-content: space-between; /* Pushes the last item to the bottom */

    background-color: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: 0.75rem;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    height: 100%; /* Ensures card fills the height set by the grid */
    position: relative; /* Container for absolutely positioned elements */
    
    /* Constrain width to prevent expansion */
    width: 320px;
    max-width: 320px;
    min-width: 320px;
}

.shop-card:hover {
    border: 4px solid hsl(var(--brand));
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* 1. Photo Section with Rating & Delivery Badges */
.shop-card-photo-section {
    position: relative; /* To position the badges */
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid hsl(var(--border));
}

.shop-card-photo {
    width: 100%; /* Make photo section full width */
    height: 120px;
    object-fit: cover;
    border-radius: 0.75rem 0.75rem 0 0;
}

.shop-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Card header positioning for badges */
.card-header {
    position: relative;
    overflow: hidden;
}

.card-image {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 0.75rem 0.75rem 0 0;
}

/* Corrected Rating Badge Positioning */
.rating-badge {
    position: absolute;
    bottom: 0.75rem;
    left: 0.75rem;
    background: hsl(var(--card) / 0.8);
    color: hsl(var(--foreground));
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    border: 1px solid hsl(var(--border));
    backdrop-filter: blur(20px);
    box-shadow: 0 4px 12px hsl(var(--foreground) / 0.1);
    z-index: 10;
}

/* Corrected Delivery Indicator Positioning */
.delivery-indicator {
    position: absolute;
    bottom: 0.75rem;
    right: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    z-index: 10;
    background: hsl(var(--card) / 0.9);
    border: 1px solid hsl(var(--border));
    backdrop-filter: blur(20px);
    box-shadow: 0 4px 12px hsl(var(--foreground) / 0.1);
}

.delivery-indicator.delivers {
    color: hsl(var(--success));
    background: hsl(var(--success) / 0.9);
    border-color: hsl(var(--success));
}

.delivery-indicator.no-delivery {
    color: hsl(var(--destructive));
    background: hsl(var(--destructive) / 0.9);
    border-color: hsl(var(--destructive));
}

.delivery-indicator svg {
    width: 14px;
    height: 14px;
}

.delivery-indicator span {
    font-weight: 600;
    font-size: 0.75rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.delivery-indicator.delivers span {
    color: white;
}

.delivery-indicator.no-delivery span {
    color: white;
}

/* 2. Shop Name Section - Full line */
.shop-card-name {
    padding: 0.75rem 1rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: hsl(var(--foreground));
    text-align: center;
    margin: 0;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 1px solid hsl(var(--border));
}

/* 3. Phone & Details Section - Flexible */
.shop-card-info-section {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: hsl(var(--background));
    flex-grow: 1; /* This section expands to fill available space */
    gap: 0.75rem;
}

.shop-card-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 0.5rem;
}

.shop-card-info-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: hsl(var(--muted-foreground));
    text-transform: uppercase;
    letter-spacing: 0.05em;
    min-width: 80px;
}

.shop-card-info-value {
    font-size: 0.875rem;
    color: hsl(var(--foreground));
    flex: 1;
    text-align: right;
}

/* 4. "View Full Menu" Button Section */
.shop-card-actions {
    padding: 1rem;
    display: flex;
}

/* New Shop Card Layout Styles */
.shop-image {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
}

.shop-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shop-rating {
    position: absolute;
    bottom: 0.75rem;
    left: 0.75rem;
    background: hsl(var(--card) / 0.9);
    color: hsl(var(--card-foreground));
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    backdrop-filter: blur(10px);
}

.delivery-badge {
    position: absolute;
    bottom: 0.75rem;
    right: 0.75rem;
    background: hsl(var(--card) / 0.9);
    color: hsl(var(--card-foreground));
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    backdrop-filter: blur(10px);
}

.delivery-badge.delivers {
    color: hsl(var(--success));
}

.delivery-badge.no-delivery {
    color: hsl(var(--destructive));
}

.shop-info {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    height: 100%;
}

.shop-contact {
    background: hsl(var(--muted));
    border: 1px solid hsl(var(--border));
    border-radius: 0.5rem;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    height: 210px;
}

.contact-header {
    display: flex;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.contact-icon {
    font-size: 1.5rem;
    color: hsl(var(--muted-foreground));
}

.contact-content {
    flex: 1;
    display: flex;
    gap: 1rem;
}

.contact-numbers {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.phone-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
}

.phone-number {
    font-size: 0.8rem;
    color: hsl(var(--foreground));
    font-weight: 500;
}

.shop-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: hsl(var(--foreground));
    margin: 0;
    text-align: center;
}

.shop-contact {
    background: hsl(var(--muted));
    border: 1px solid hsl(var(--border));
    border-radius: 0.5rem;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

.contact-icon {
    font-size: 1.2rem;
}

.contact-numbers {
    font-size: 0.875rem;
    color: hsl(var(--foreground));
    font-weight: 500;
    text-align: center;
}

.call-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-end;
    justify-content: flex-start;
}

.call-btn {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: hsl(var(--brand));
    color: hsl(var(--brand-foreground));
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    margin-left: 8px; /* Add spacing between call buttons */
    position: relative; /* For positioning the badge */
}

.call-btn:hover {
    background: hsl(var(--brand-foreground));
    transform: scale(1.1);
}

.call-number-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: hsl(var(--destructive));
    color: hsl(var(--destructive-foreground));
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid hsl(var(--card));
    box-shadow: 0 2px 4px hsla(var(--foreground), 0.2);
}

.call-number {
    position: absolute;
    top: -8px;
    right: -8px;
    background: hsl(var(--brand));
    color: hsl(var(--brand-foreground));
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
}

.shop-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
}

.price-range {
    color: hsl(var(--foreground));
    font-weight: 600;
}

.item-count {
    color: hsl(var(--muted-foreground));
    background: hsl(var(--muted));
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
}

.view-menu-btn {
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    border: none;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    width: 100%;
}

.view-menu-btn:hover {
    background: hsl(var(--primary) / 0.8);
    transform: translateY(-1px);
}

.menu-call-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.menu-call-buttons .btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.shop-card-menu-btn {
    justify-content: center;
    align-items: center;
    width: 100%;
}

.shop-card-menu-btn {
    width: 100%;
    max-width: 200px;
    height: 44px;
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--accent)) 100%);
    color: hsl(var(--primary-foreground));
    border: 2px solid transparent;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.shop-card-menu-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    background: linear-gradient(135deg, hsl(var(--accent)) 0%, hsl(var(--primary)) 100%);
}

/* Card Styles */
.card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: 0.5rem;
    overflow: hidden;
    transition: all 0.3s;
    cursor: pointer;
    height: 100%;
    /* Ensure cards take full height in grid */
}

.card:hover {
    box-shadow: 0 10px 25px -3px hsla(var(--foreground), 0.1), 0 4px 6px -2px hsla(var(--foreground), 0.05);
    transform: translateY(-2px);
}

.card-header {
    position: relative;
    overflow: hidden;
}

.card-image {
    width: 100%;
    height: 12rem;
    object-fit: cover;
    transition: transform 0.3s;
}

.card:hover .card-image {
    transform: scale(1.05);
}

.card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, hsla(var(--foreground), 0.5), transparent);
}

/* Renamed from bookmark-btn */
.favorite-shop-btn {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    padding: 0.5rem;
    border-radius: 50%;
    background-color: hsl(var(--card)) !important; /* theme-aware bg */
    backdrop-filter: blur(4px);
    border: 1px solid hsl(var(--primary));
    cursor: pointer;
    transition: all 0.2s ease;
    color: hsl(var(--primary)) !important; /* heart color: red/orange */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Force default state for all favorite shop buttons */
.favorite-shop-btn {
    background-color: hsl(var(--card)) !important;
    color: hsl(var(--primary)) !important;
    border-color: hsl(var(--primary)) !important;
}

/* Ensure default state is always applied when not favorited */
button.favorite-shop-btn:not(.favorited) {
    background-color: hsl(var(--card)) !important;
    color: hsl(var(--primary)) !important;
    border-color: hsl(var(--primary)) !important;
}

/* Renamed from bookmark-btn.bookmarked */
/* More specific selector to ensure it overrides any conflicting styles */
button.favorite-shop-btn.favorited {
    background-color: orange !important;
    /* Orange background when favorited - same as favorite dish */
    color: hsl(var(--card)) !important;
    border-color: orange !important;
}

/* Renamed from bookmark-btn:hover */
.favorite-shop-btn:hover {
    background-color: hsla(var(--card), 0.3);
    color: hsl(var(--primary));
    /* Changes color on hover */
}

.favorite-shop-btn.favorited:hover {
    background-color: hsla(var(--destructive), 0.7);
    /* Slightly darker red on hover when favorited - same as favorite dish */
}


/* Rating badge styling */
.rating-badge {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: hsl(var(--card) / 0.8);
    color: hsl(var(--foreground));
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    border: 1px solid hsl(var(--border));
    backdrop-filter: blur(20px);
    box-shadow: 0 4px 12px hsl(var(--foreground) / 0.1);
}

.rating-badge svg {
    color: hsl(var(--warning));
}

.category-badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.badge-south-indian {
    background-color: hsl(138, 76%, 97%);
    color: hsl(142, 76%, 36%);
}

.badge-north-indian {
    background-color: hsl(24, 94%, 58%);
    color: hsl(25, 95%, 53%);
}

.badge-multi-cuisine {
    background-color: hsl(214, 95%, 93%);
    color: hsl(217, 91%, 60%);
}

.badge-fast-food {
    background-color: hsl(0, 91%, 91%);
    color: hsl(0, 84%, 60%);
}

.badge-chinese {
    background-color: hsl(0, 91%, 91%);
    color: hsl(0, 84%, 60%);
}

.badge-snacks {
    background-color: hsl(48, 96%, 89%);
    color: hsl(25, 95%, 53%);
}

.badge-beverages {
    background-color: hsl(214, 95%, 93%);
    color: hsl(217, 91%, 60%);
}

/* New category badge styles */
.badge-biryani {
    background-color: hsl(24, 94%, 95%);
    color: hsl(25, 95%, 35%);
}

.badge-rolls {
    background-color: hsl(138, 76%, 97%);
    color: hsl(142, 76%, 36%);
}

.badge-starters {
    background-color: hsl(48, 96%, 89%);
    color: hsl(25, 95%, 53%);
}

.badge-rice {
    background-color: hsl(214, 95%, 93%);
    color: hsl(217, 91%, 60%);
}

.badge-noodles {
    background-color: hsl(0, 91%, 91%);
    color: hsl(0, 84%, 60%);
}

.badge-pasta {
    background-color: hsl(270, 95%, 93%);
    color: hsl(270, 91%, 60%);
}

.badge-momos {
    background-color: hsl(48, 96%, 89%);
    color: hsl(25, 95%, 53%);
}

.badge-sandwich {
    background-color: hsl(138, 76%, 97%);
    color: hsl(142, 76%, 36%);
}

.badge-burger {
    background-color: hsl(0, 91%, 91%);
    color: hsl(0, 84%, 60%);
}

.badge-desserts {
    background-color: hsl(300, 95%, 93%);
    color: hsl(300, 91%, 60%);
}

.badge-main-course {
    background-color: hsl(25, 95%, 92%);
    color: hsl(25, 95%, 40%);
}

.badge-breads {
    background-color: hsl(48, 96%, 89%);
    color: hsl(25, 95%, 53%);
}

.badge-chaat {
    background-color: hsl(138, 76%, 97%);
    color: hsl(142, 76%, 36%);
}

.badge-maggi {
    background-color: hsl(0, 91%, 91%);
    color: hsl(0, 84%, 60%);
}

.badge-default {
    background-color: hsl(214, 95%, 93%);
    color: hsl(217, 91%, 60%);
}

.card-content {
    padding: 1rem;
    flex-grow: 1;
    /* Allow content to grow and push button to bottom */
    display: flex;
    flex-direction: column;
}

.shop-name {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: hsl(var(--card-foreground));
}

.shop-phone {
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
}

.price-range-text {
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
}



/* Enhanced join date styling */
.profile-join-date {
    background: linear-gradient(135deg, hsl(var(--accent)) 0%, hsla(var(--accent), 0.8) 100%);
    color: hsl(var(--accent-foreground));
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 500;
    border: 2px solid hsl(var(--border));
    box-shadow: 0 2px 4px hsla(var(--accent), 0.1);
    transition: all 0.2s ease;
    display: inline-block;
    margin-top: 0.5rem;
}

.profile-join-date:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px hsla(var(--accent), 0.2);
    border-color: hsl(var(--foreground));
}

/* Dish Card Styles */
.dish-card {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: 12px;
    padding: 12px;
    min-height: 70px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.dish-card:hover {
    border: 4px solid hsl(var(--foreground));
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.dish-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
    gap: 0.5rem;
}

.dish-name-dot {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}

.dish-name {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: hsl(var(--foreground));
    line-height: 1.2;
}

.dish-type-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dish-type-dot.veg {
    background-color: #22c55e; /* Always green for veg */
}

.dish-type-dot.nonveg {
    background-color: #ef4444; /* Always red for non-veg */
}

.dish-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: hsl(var(--brand));
    flex-shrink: 0;
    text-align: right;
}

.dish-type-label {
    font-size: 0.7rem;
    color: hsl(var(--muted-foreground));
    background: hsl(var(--muted));
    padding: 0.2rem 0.4rem;
    border-radius: 0.25rem;
    margin: 0.25rem 0 0 0;
    display: inline-block;
}

/* Category dishes grid - make it smaller and 2 columns */
.category-dishes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 1.5rem;
    min-height: 60px;
}

@media (max-width: 768px) {
    .dish-card {
        padding: 10px;
        min-height: 60px;
    }
    
    .dish-name {
        font-size: 0.9rem;
    }
    
    .dish-price {
        font-size: 1rem;
    }
    
    .category-dishes {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        min-height: 50px;
    }
}

.dish-description {
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
    margin-bottom: 0.75rem;
    line-height: 1.4;
    flex-grow: 1;
    /* Allow description to take available space */
}

.dish-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: auto;
    /* Push meta to bottom */
}

.dish-badges {
    display: flex;
    gap: 0.5rem;
}

.badge {
    padding: 0.125rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.badge-outline {
    border: 1px solid hsl(var(--border));
    background-color: transparent;
}

.shop-link {
    color: hsl(var(--primary));
    text-decoration: none;
    font-size: 0.875rem;
}

.shop-link:hover {
    text-decoration: underline;
}

/* Back Navigation */
.back-nav {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid hsl(var(--border));
}

/* Search Results */
.search-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.search-count {
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
}

/* Empty States */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    background-color: hsl(var(--card));
    border: 2px solid hsl(var(--border));
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px hsla(var(--foreground), 0.1);
}

.empty-icon {
    width: 3rem;
    height: 3rem;
    margin: 0 auto 1rem;
    color: hsl(var(--muted-foreground));
}

.empty-title {
    font-size: 1.125rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.empty-description {
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
}

/* Favorite Dish Button */
.favorite-dish-btn {
    padding: 0.5rem;
    border-radius: 50%;
    background-color: hsla(var(--card), 0.2);
    /* Light background for non-favorited state */
    backdrop-filter: blur(4px);
    border: 1px solid hsl(var(--border));
    cursor: pointer;
    transition: all 0.2s;
    color: hsl(var(--muted-foreground));
    /* Default color */
    display: flex;
    align-items: center;
    justify-content: center;
}

.favorite-dish-btn.favorited {
    background-color: orange;
    /* Red background when favorited */
    color: hsl(var(--card));
    border-color: orange;
}

.favorite-dish-btn:hover {
    background-color: hsla(var(--card), 0.3);
    color: hsl(var(--primary));
    /* Changes color on hover */
}

.favorite-dish-btn.favorited:hover {
    background-color: hsla(var(--destructive), 0.7);
    /* Slightly darker red on hover when favorited */
}


/* Mobile Responsive */
@media (max-width: 768px) {
    .container {
        padding: 0 0.75rem;
    }

    .main-layout {
        flex-direction: column;
        gap: 0;
    }

    /* Center shop grids on mobile - using !important to prevent override */
    .shops-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 1.5rem !important;
        justify-content: flex-start !important;
        grid-template-columns: unset !important;
        grid-auto-rows: unset !important;
        grid-auto-flow: unset !important;
    }

    /* Ensure shop cards are centered and properly sized on mobile */
    .shops-grid > *,
    .shops-grid .shop-card,
    #favoriteShopsGrid .card {
        width: 100% !important;
        max-width: 320px !important;
        min-width: auto !important;
        margin: 0 auto !important;
    }

    .dishes-grid {
        grid-template-columns: 1fr;
    }

    .header-content {
        flex-direction: column;
        gap: 1rem;
    }

    .search-container {
        order: 2;
        max-width: none;
    }

    .header-actions {
        order: 1;
        align-self: flex-end;
    }
}

/* Utility classes */
.hidden {
    display: none !important;
}

@media (max-width: 768px) {
    .mobile-hidden {
        display: none !important;
    }
}

/* User Authentication & Profile Styles */
.user-menu {
    position: relative;
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: hsla(var(--foreground), 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal.hidden {
    display: none;
}

.modal-content {
    background-color: hsl(var(--card));
    border: 2px solid hsl(var(--foreground)); /* Black border in light mode, white border in dark mode */
    border-radius: 12px;
    max-width: 500px;
    width: 90%;
    max-height: 90%;
    overflow-y: auto;
    box-shadow: 0 20px 25px -5px hsla(var(--foreground), 0.1), 0 10px 10px -5px hsla(var(--foreground), 0.04);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid hsl(var(--border));
}

.modal-header h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: hsl(var(--foreground));
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: hsl(var(--muted-foreground));
    padding: 0.25rem;
    border-radius: 4px;
    transition: all 0.2s;
}

.modal-close:hover {
    background-color: hsl(var(--secondary));
    color: hsl(var(--foreground));
}

.modal-body {
    padding: 1.5rem;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.auth-form.hidden {
    display: none;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-weight: 500;
    color: hsl(var(--foreground));
    font-size: 0.875rem;
}

.form-input {
    padding: 0.75rem;
    border: 1px solid hsl(var(--border));
    border-radius: 8px;
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-size: 0.875rem;
    transition: all 0.2s;
}

.form-input:focus {
    outline: none;
    border-color: hsl(var(--ring));
    box-shadow: 0 0 0 2px hsla(var(--ring), 0.2);
}

/* Phone input field styling */
.form-input[type="tel"] {
    background: hsl(var(--input));
    border: 1px solid hsl(var(--border));
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-input[type="tel"]:focus {
    outline: none;
    border-color: hsl(var(--ring));
    box-shadow: 0 0 0 2px hsla(var(--ring), 0.2);
}

.form-input[type="tel"]::placeholder {
    color: hsl(var(--muted-foreground));
}

.auth-switch {
    text-align: center;
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
    margin-top: 0.5rem;
}

.auth-switch a {
    color: hsl(var(--primary));
    text-decoration: none;
    font-weight: 500;
}

.auth-switch a:hover {
    text-decoration: underline;
}

.user-profile-info {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.profile-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.profile-section h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: hsl(var(--foreground));
    border-bottom: 1px solid hsl(var(--border));
    padding-bottom: 0.5rem;
}

.profile-section .form-group {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
}

.profile-section .form-group label {
    font-weight: 500;
    color: hsl(var(--muted-foreground));
}

.profile-section .form-group span {
    font-weight: 500;
    color: hsl(var(--foreground));
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
}

.stat-card {
    background-color: hsl(var(--secondary));
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
}

.stat-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: hsl(var(--primary));
}

.stat-label {
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
    margin-top: 0.25rem;
}

.profile-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Profile Edit Mode Styles */
#profileEditMode .form-group {
    margin-bottom: 1rem;
}

#profileEditMode .form-input {
    background: hsl(var(--input));
    border: 1px solid hsl(var(--border));
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

#profileEditMode .form-input:focus {
    outline: none;
    border-color: hsl(var(--ring));
    box-shadow: 0 0 0 2px hsla(var(--ring), 0.2);
}

.edit-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.edit-actions .btn {
    flex: 1;
    min-width: 120px;
}

.btn-danger {
    background-color: hsl(var(--destructive));
    color: hsl(var(--destructive-foreground));
    border: 1px solid hsl(var(--destructive));
}

.btn-danger:hover {
    background-color: hsl(var(--destructive));
    opacity: 0.9;
}

/* Responsive adjustments for modals */
@media (max-width: 768px) {
    .modal-content {
        width: 95%;
        margin: 1rem;
    }

    .modal-header,
    .modal-body {
        padding: 1rem;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .profile-actions {
        flex-direction: column;
    }
}

/* Utility classes */
.w-full {
    width: 100%;
}

.flex {
    display: flex;
}

.items-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

.gap-2 {
    gap: 0.5rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.text-sm {
    font-size: 0.875rem;
}

/* Call button styles */
.call-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.5rem;
    background: hsl(var(--brand));
    color: hsl(var(--brand-foreground));
    border: 2px solid hsl(var(--brand));
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.75rem;
    margin-left: 0.5rem;
    font-weight: 500;
}

.call-btn:hover {
    background: hsl(var(--brand));
    color: hsl(var(--brand-foreground));
    transform: scale(1.05);
    box-shadow: 0 2px 8px hsla(var(--brand), 0.3);
}

.call-btn:active {
    transform: scale(0.95);
}

.call-btn svg {
    width: 12px;
    height: 12px;
}

/* Shop phone container with call button */
.shop-phone {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.shop-phone svg {
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.phone-numbers-display {
    white-space: nowrap;
    margin-bottom: 0.5rem;
    line-height: 1.4;
    flex: 1;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Multiple Phone Buttons */
.multiple-phone-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}

.call-btn-multiple {
    position: relative;
    padding: 0.4rem;
    border-radius: 50%;
    background-color: hsl(var(--brand));
    color: hsl(var(--brand-foreground));
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    min-height: 2rem;
}

.call-btn-multiple:hover {
    background-color: hsl(var(--brand-hover));
    transform: scale(1.05);
    box-shadow: 0 2px 8px hsla(var(--brand), 0.3);
}

.phone-number-label {
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    background-color: hsl(var(--destructive));
    color: hsl(var(--destructive-foreground));
    border-radius: 50%;
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    border: 2px solid hsl(var(--background));
}

.phone-numbers-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.call-buttons-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

/* Phone number layout styles */
.phone-numbers-display {
    white-space: pre-line;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.phone-number-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    padding: 0.25rem 0;
    width: 100%;
    border-bottom: 1px solid hsl(var(--border) / 0.2);
}

.phone-number-row:last-child {
    margin-bottom: 0;
    border-bottom: none;
}

.phone-number-text {
    font-size: 0.875rem;
    color: hsl(var(--foreground));
    white-space: nowrap;
}

.multiple-phone-buttons {
    margin-top: 0.5rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.call-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.call-btn:hover {
    background: hsl(var(--primary) / 0.9);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px hsla(var(--foreground), 0.1);
}

.call-btn:active {
    transform: translateY(0);
}

.call-btn svg {
    width: 16px;
    height: 16px;
}

/* Call button styles now use CSS custom properties for proper theme support */

/* Category checkboxes styling - minimalist and clean */
.category-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 200px;
    overflow-y: auto;
    padding: 0.75rem;
    border: 1px solid hsl(var(--border));
    border-radius: 8px;
    background: hsl(var(--background));
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--muted)) hsl(var(--background));
}

.category-checkboxes::-webkit-scrollbar {
    width: 6px;
}

.category-checkboxes::-webkit-scrollbar-track {
    background: hsl(var(--background));
    border-radius: 3px;
}

.category-checkboxes::-webkit-scrollbar-thumb {
    background: hsl(var(--muted));
    border-radius: 3px;
}

.category-checkboxes::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--muted-foreground));
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 6px;
    transition: background-color 0.2s ease;
    user-select: none;
}

.checkbox-item:hover {
    background: hsl(var(--muted) / 0.3);
}

.checkbox-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: hsl(var(--primary));
    cursor: pointer;
    margin: 0;
}

.checkbox-item span {
    font-size: 0.875rem;
    color: hsl(var(--foreground));
    cursor: pointer;
    font-weight: 400;
}

.checkbox-item input[type="checkbox"]:checked + span {
    color: hsl(var(--primary));
    font-weight: 500;
}

/* Shop phone section styling */
.shop-phone-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    background: hsl(var(--muted) / 0.3);
    border-radius: 8px;
    border: 1px solid hsl(var(--border));
    margin: 0.75rem 0;
    /* Fixed height to prevent variable spacing, but allow for text wrapping */
    min-height: 200px;
    max-height: 200px;
    /* Ensure content is properly contained */
    justify-content: space-between;
}

.phone-header {
    display: flex;
    justify-content: center;
    align-items: center;
    color: hsl(var(--muted-foreground));
    flex-shrink: 0;
}

.phone-numbers-row {
    text-align: center;
    font-size: 0.875rem;
    color: hsl(var(--foreground));
    font-weight: 500;
    line-height: 1.4;
    word-break: break-word;
    /* Allow text to wrap to next line */
    overflow: visible;
    white-space: normal;
    /* Ensure proper text wrapping */
    hyphens: auto;
    max-width: 100%;
}

.phone-numbers-row.single-phone {
    text-align: center;
}

.phone-numbers-row.multiple-phones {
    text-align: center;
}

.call-buttons-row {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    /* Ensure content fits within fixed height */
    flex-shrink: 0;
}

.call-buttons-row.single-phone {
    justify-content: center;
}

.call-buttons-row.multiple-phones {
    justify-content: center;
}

.numbered-call-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid hsl(var(--border));
    background: hsl(var(--muted) / 0.5);
    color: hsl(var(--foreground));
    cursor: pointer;
    transition: all 0.2s ease;
}

.numbered-call-btn:hover {
    background: hsl(var(--brand));
    color: hsl(var(--brand-foreground));
    border-color: hsl(var(--brand));
    transform: translateY(-1px);
}

.numbered-call-btn:active {
    transform: translateY(0);
}

.numbered-call-btn svg {
    width: 18px;
    height: 18px;
}

.call-number {
    position: absolute;
    top: -8px;
    right: -8px;
    background: hsl(var(--destructive));
    color: hsl(var(--destructive-foreground));
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid hsl(var(--card));
}

.no-phone {
    color: hsl(var(--muted-foreground));
    font-size: 0.875rem;
    font-style: italic;
    text-align: center;
}

/* Find button styling */
.btn-find {
    background-color: hsl(var(--destructive));
    color: hsl(var(--destructive-foreground));
    border: 2px solid hsl(var(--destructive));
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-find:hover {
    background-color: hsl(var(--destructive-hover));
    border-color: hsl(var(--destructive-hover));
    transform: translateY(-1px);
    box-shadow: 0 4px 12px hsla(var(--destructive), 0.3);
}

/* Menu header styling */
.menu-shop-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}

.shop-name-rating {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.shop-name-rating h1 {
    margin: 0;
}

.shop-name-rating span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
}

.shop-rating-display {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: hsl(var(--muted-foreground));
}

.shop-name-rating svg {
    color: hsl(var(--warning));
}

.menu-call-buttons {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.menu-call-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid hsl(var(--border));
    background: hsl(var(--muted) / 0.5);
    color: hsl(var(--foreground));
    cursor: pointer;
    transition: all 0.2s ease;
}

.menu-call-btn:hover {
    background: hsl(var(--brand));
    color: hsl(var(--brand-foreground));
    border-color: hsl(var(--brand));
    transform: translateY(-1px);
}

.menu-call-btn:active {
    transform: translateY(0);
}

.menu-call-btn svg {
    width: 18px;
    height: 18px;
}

.menu-call-number {
    position: absolute;
    top: -8px;
    right: -8px;
    background: hsl(var(--destructive));
    color: hsl(var(--destructive-foreground));
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid hsl(var(--card));
}

/* Menu favorite button - smaller size */
.menu-favorite-btn {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    height: auto;
    min-height: 32px;
}

/* Full screen menu layout when sidebar is hidden */
.main-layout.menu-fullscreen {
    gap: 0;
}

.main-layout.menu-fullscreen .main-content {
    width: 100%;
    max-width: none;
}

/* Ensure menu view is full width and vertical */
#menuView {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
}

/* Collapsible Category Menu Styles */
.menu-category {
    margin-bottom: 1.5rem;
    border: 1px solid hsl(var(--border));
    border-radius: 0.75rem;
    overflow: hidden;
    background: hsl(var(--card));
    box-shadow: 0 2px 4px hsla(var(--foreground), 0.05);
    width: 100%;
    max-width: 100%;
}

/* Ensure menu items grid is single column */
#menuItemsGrid {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
}

.category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    background: hsl(var(--muted) / 0.3);
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid hsl(var(--border));
    min-height: 60px;
}

.category-header:hover {
    background: hsl(var(--muted) / 0.5);
}

.category-header.expanded {
    background: hsl(var(--primary) / 0.1);
    border-bottom-color: hsl(var(--primary) / 0.3);
}

.category-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.category-name {
    font-size: 1.125rem;
    font-weight: 600;
    color: hsl(var(--foreground));
}

.category-count {
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
    font-weight: 500;
}

.category-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease;
}

.category-arrow svg {
    transition: transform 0.3s ease;
}

.category-content {
    padding: 1rem;
    background: hsl(var(--card));
    width: 100%;
}

/* Category sections */
.category-section {
    margin-bottom: 1.5rem;
    border: 1px solid hsl(var(--border));
    border-radius: 0.5rem;
    overflow: hidden;
    background: hsl(var(--card));
}

.category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: hsl(var(--muted));
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.category-header:hover {
    background: hsl(var(--accent));
}

.category-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: hsl(var(--foreground));
}

.category-arrow {
    transition: transform 0.3s ease;
}

.category-dishes {
    padding: 0.75rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    min-height: 150px;
}

/* Full-width dish cards within categories */
.category-dishes .dish-card {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1rem;
    border: 1px solid hsl(var(--border));
    border-radius: 0.5rem;
    background: hsl(var(--background));
    transition: all 0.2s ease;
    box-sizing: border-box;
    min-height: 120px;
}

.category-dishes .dish-card:hover {
    border: 3px solid #f97316;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.15);
}

.category-dishes .dish-card:last-child {
    margin-bottom: 0;
}

.category-dishes .dish-card:hover {
    border-color: hsl(var(--primary));
    box-shadow: 0 2px 8px hsla(var(--primary), 0.1);
}

.category-dishes .dish-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    margin-bottom: 0.75rem;
}

.category-dishes .dish-name {
    flex: 1;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.3;
}

.category-dishes .dish-price {
    font-size: 1rem;
    font-weight: bold;
    color: hsl(142, 76%, 47%);
    white-space: nowrap;
}

.category-dishes .dish-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    margin-top: auto;
}

.category-dishes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    width: 100%;
    max-width: 100%;
}

/* Make each category take full width */
.menu-category {
    width: 100%;
    margin-bottom: 1rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .category-header {
        padding: 0.75rem 1rem;
    }
    
    .category-content {
        padding: 0.75rem;
    }
    
    .category-dishes {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .category-dishes .dish-card {
        min-height: auto;
        padding: 0.75rem;
    }
}

/* Logo styling */
.logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.logo-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-text h1 {
    font-size: 1.25rem;
    font-weight: bold;
    background: linear-gradient(135deg, hsl(var(--brand)), hsl(var(--destructive)));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.logo-text p {
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
    margin: 0;
    line-height: 1.3;
    font-weight: 500;
}

/* Delivery sections styling */
.section-header {
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.section-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: hsl(var(--foreground));
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#deliveryShopsTitle {
    color: hsl(var(--foreground));
}

#nonDeliveryShopsTitle {
    color: hsl(var(--foreground));
}

/* Add some spacing between sections */
#deliveryShopsGrid {
    margin-bottom: 3rem;
}

#nonDeliveryShopsGrid {
    margin-bottom: 2rem;
}

/* Shop header and delivery indicator */
.shop-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.shop-name {
    margin: 0;
    flex: 1;
}

.delivery-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

.delivery-indicator.delivers {
    background-color: hsl(var(--success) / 0.1);
    color: hsl(var(--success));
    border: 1px solid hsl(var(--success) / 0.3);
}

.delivery-indicator.no-delivery {
    background-color: hsl(var(--muted) / 0.1);
    color: hsl(var(--muted-foreground));
    border: 1px solid hsl(var(--muted) / 0.3);
}

.delivery-indicator svg {
    width: 14px;
    height: 14px;
}

/* Rating badge positioning */
.rating-badge.bottom-left {
    top: auto;
    right: auto;
    bottom: 0.75rem;
    left: 0.75rem;
}

/* Floating Action Button for Filters */
.fab-filters {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    border: none;
    border-radius: 50px;
    padding: 1rem 1.5rem;
    box-shadow: 0 4px 20px hsla(var(--foreground), 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    font-size: 0.875rem;
    /* Ensure button is always visible and clickable */
    pointer-events: auto;
    user-select: none;
}

.fab-filters:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px hsla(var(--foreground), 0.3);
    background: hsl(var(--primary) / 0.9);
}

.fab-filters:active {
    transform: translateY(0);
}

.fab-filters svg {
    width: 18px;
    height: 18px;
}



/* Mobile responsive FAB */
@media (max-width: 768px) {
    .fab-filters {
        bottom: 1.5rem;
        right: 1.5rem;
        padding: 0.875rem 1.25rem;
        font-size: 0.8rem;
    }
    
    .fab-filters span {
        display: none;
    }
    
    .fab-filters {
        padding: 0.875rem;
        border-radius: 50%;
    }
}

/* Filter Modal Styles */
.filter-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    /* Ensure modal is always on top */
    pointer-events: none;
}

/* Ensure filter modal is properly hidden by default */
.filter-modal.hidden {
    display: none !important;
}

.filter-modal.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    display: flex !important;
}

.filter-modal-content {
    background: hsl(var(--background));
    border-radius: 1rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    transform: scale(0.9);
    transition: transform 0.3s ease;
    /* Ensure content is clickable */
    pointer-events: auto;
}

.filter-modal.show .filter-modal-content {
    transform: scale(1);
}

.filter-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 1.5rem 1rem 1.5rem;
    border-bottom: 1px solid hsl(var(--border));
}

.filter-modal-header h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.filter-modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: hsl(var(--muted-foreground));
    padding: 0.25rem;
    border-radius: 0.25rem;
    transition: all 0.2s ease;
}

.filter-modal-close:hover {
    background: hsl(var(--muted));
    color: hsl(var(--foreground));
}

.filter-modal-body {
    padding: 1.5rem;
}

.filter-modal-actions {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid hsl(var(--border));
}

.filter-modal-actions .btn {
    flex: 1;
}

/* Enhanced filter modal styling */
.filter-modal .filter-section {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid hsl(var(--border));
}

.filter-modal .filter-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.filter-modal .filter-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
    color: hsl(var(--foreground));
}

.filter-modal .budget-form {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.filter-modal .budget-input {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: 1px solid hsl(var(--border));
    border-radius: 0.375rem;
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-size: 0.875rem;
}

.filter-modal .checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filter-modal .checkbox-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: 0.375rem;
    transition: background-color 0.2s ease;
}

.filter-modal .checkbox-item:hover {
    background: hsl(var(--muted) / 0.3);
}

.filter-modal .checkbox {
    width: 1rem;
    height: 1rem;
    accent-color: hsl(var(--primary));
}

.filter-modal .price-range {
    margin: 1rem 0;
}

.filter-modal .price-slider {
    width: 100%;
    margin: 0.5rem 0;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 3px;
    background: hsl(var(--muted));
    outline: none;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.filter-modal .price-slider:hover {
    opacity: 1;
}

.filter-modal .price-values {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
}

/* Mobile responsive FAB and Filter Modal */
@media (max-width: 768px) {
    .fab-filters {
        bottom: 1.5rem;
        right: 1.5rem;
        padding: 0.875rem 1.25rem;
        font-size: 0.8rem;
    }
    
    .fab-filters span {
        display: none;
    }
    
    .fab-filters {
        padding: 0.875rem;
        border-radius: 50%;
    }
    
    .filter-modal-content {
        width: 95%;
        margin: 1rem;
        max-height: 85vh;
    }
    
    .filter-modal-header {
        padding: 1rem 1rem 0.75rem 1rem;
    }
    
    .filter-modal-body {
        padding: 1rem;
    }
    
    .filter-modal-actions {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .filter-modal-actions .btn {
        width: 100%;
    }
    
    /* Mobile call button styles */
    .call-btn {
        width: 32px;
        height: 32px;
        margin-left: 6px;
    }
    
    .call-btn svg {
        width: 14px;
        height: 14px;
    }
    
    .call-number-badge {
        width: 16px;
        height: 16px;
        font-size: 0.65rem;
        top: -4px;
        right: -4px;
    }
}

/* Hard Refresh Button Styling */
.btn-outline[onclick="hardRefresh()"] {
    background: hsl(var(--primary) / 0.1);
    border-color: hsl(var(--primary));
    color: hsl(var(--primary));
    transition: all 0.2s ease;
}

.btn-outline[onclick="hardRefresh()"]:hover {
    background: hsl(var(--primary) / 0.2);
    border-color: hsl(var(--primary));
    color: hsl(var(--primary));
    transform: translateY(-1px);
    box-shadow: 0 4px 12px hsl(var(--primary) / 0.3);
}

.btn-outline[onclick="hardRefresh()"] svg {
    color: hsl(var(--primary));
}

/* Additional mobile-specific improvements for shop grids */
@media (max-width: 480px) {
    .shops-grid {
        padding: 0 0.5rem;
    }
    
    .shops-grid > *,
    .shops-grid .shop-card,
    #favoriteShopsGrid .card {
        max-width: 100%;
        width: 100%;
    }
}

@media (max-width: 640px) {
    .shops-grid {
        padding: 0 0.75rem;
    }
}

/* Ensure consistent centering across all mobile breakpoints */
@media (max-width: 768px) {
    #favoriteShopsGrid,
    #deliveryShopsGrid,
    #nonDeliveryShopsGrid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 1.5rem !important;
        width: 100% !important;
        grid-template-columns: unset !important;
        grid-auto-rows: unset !important;
        grid-auto-flow: unset !important;
    }
    
    /* Center section headers on mobile */
    .section-header {
        text-align: center;
        flex-direction: column;
        gap: 1rem;
    }
    
    .section-title {
        justify-content: center;
    }
}

/* Force mobile layout for shop grids - highest specificity */
@media (max-width: 768px) {
    .shops-grid,
    .shops-grid#favoriteShopsGrid,
    .shops-grid#deliveryShopsGrid,
    .shops-grid#nonDeliveryShopsGrid,
    #favoriteShopsGrid.shops-grid,
    #deliveryShopsGrid.shops-grid,
    #nonDeliveryShopsGrid.shops-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 1.5rem !important;
        justify-content: flex-start !important;
        grid-template-columns: unset !important;
        grid-auto-rows: unset !important;
        grid-auto-flow: unset !important;
        width: 100% !important;
    }
    
    /* Force mobile card sizing */
    .shops-grid > *,
    .shops-grid .shop-card,
    #favoriteShopsGrid .card,
    #deliveryShopsGrid .card,
    #nonDeliveryShopsGrid .card {
        width: 100% !important;
        max-width: 320px !important;
        min-width: auto !important;
        margin: 0 auto !important;
    }
}

/* CRITICAL: Force mobile layout override - highest possible specificity */
@media (max-width: 768px) {
    /* Target all possible shop grid variations */
    body .shops-grid,
    body .shops-grid#favoriteShopsGrid,
    body .shops-grid#deliveryShopsGrid,
    body .shops-grid#nonDeliveryShopsGrid,
    body #favoriteShopsGrid.shops-grid,
    body #deliveryShopsGrid.shops-grid,
    body #nonDeliveryShopsGrid.shops-grid,
    body #favoriteShopsGrid,
    body #deliveryShopsGrid,
    body #nonDeliveryShopsGrid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 1.5rem !important;
        justify-content: flex-start !important;
        grid-template-columns: unset !important;
        grid-auto-rows: unset !important;
        grid-auto-flow: unset !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Force mobile card sizing with highest specificity */
    body .shops-grid > *,
    body .shops-grid .shop-card,
    body #favoriteShopsGrid .card,
    body #deliveryShopsGrid .card,
    body #nonDeliveryShopsGrid .card,
    body .shops-grid#favoriteShopsGrid .card,
    body .shops-grid#deliveryShopsGrid .card,
    body .shops-grid#nonDeliveryShopsGrid .card {
        width: 100% !important;
        max-width: 320px !important;
        min-width: auto !important;
        margin: 0 auto !important;
        display: block !important;
    }
    
    /* Reset any inline styles that might override */
    body .shops-grid[style*="grid"],
    body #favoriteShopsGrid[style*="grid"],
    body #deliveryShopsGrid[style*="grid"],
    body #nonDeliveryShopsGrid[style*="grid"] {
        display: flex !important;
        grid-template-columns: unset !important;
    }
}

/* Mobile blur reduction - reduce blur by 75% on mobile for better performance */
@media (max-width: 768px) {
    /* Reduce header blur by 75% (from 10px to 2.5px) */
    .header {
        backdrop-filter: blur(2.5px);
        -webkit-backdrop-filter: blur(2.5px);
    }
    
    /* Reduce rating badge blur by 75% (from 20px to 5px) */
    .rating-badge {
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }
    
    /* Reduce delivery indicator blur by 75% (from 20px to 5px) */
    .delivery-indicator {
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }
    
    /* Reduce favorite button blur by 75% (from 4px to 1px) */
    .favorite-shop-btn {
        backdrop-filter: blur(1px);
        -webkit-backdrop-filter: blur(1px);
    }
    
    /* Reduce favorite dish button blur by 75% (from 4px to 1px) */
    .favorite-dish-btn {
        backdrop-filter: blur(1px);
        -webkit-backdrop-filter: blur(1px);
    }
    
    /* Reduce any other blur effects by 75% */
    [style*="backdrop-filter: blur"] {
        backdrop-filter: blur(calc(var(--blur-value, 10px) * 0.25)) !important;
        -webkit-backdrop-filter: blur(calc(var(--blur-value, 10px) * 0.25)) !important;
    }
}

/* Additional mobile optimization for very small screens */
@media (max-width: 480px) {
    /* Further reduce blur on very small screens for maximum performance */
    .header {
        backdrop-filter: blur(1px);
        -webkit-backdrop-filter: blur(1px);
    }
    
    .rating-badge,
    .delivery-indicator {
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }
}

/* Mobile header size reduction - make header more compact on phones */
@media (max-width: 768px) {
    /* Reduce header padding and overall size */
    .header {
        padding: 0.4rem 0; /* Balanced compact padding */
        backdrop-filter: blur(2.5px);
        -webkit-backdrop-filter: blur(2.5px);
    }
    
    /* Reduce logo size on mobile - proportional reduction */
    .logo-icon {
        min-width: 56px; /* Balanced size - not too small, not too big */
        min-height: 56px; /* Balanced size - not too small, not too big */
    }
    
    .header-logo-image {
        width: 48px; /* Balanced size - not too small, not too big */
        height: 48px; /* Balanced size - not too small, not too big */
    }
    
    /* Reduce logo text size on mobile - proportional */
    .logo-text h1 {
        font-size: 1rem; /* Balanced readable size */
    }
    
    .logo-text p {
        font-size: 0.7rem; /* Balanced readable size */
    }
    
    /* Reduce search container size - proportional */
    .search-container {
        max-width: 260px; /* Balanced width - not too narrow */
    }
    
    .search-input {
        padding: 0.35rem 0.75rem 0.35rem 2rem; /* Balanced padding */
        font-size: 0.8rem; /* Balanced readable size */
    }
    
    /* Reduce header actions button sizes - proportional */
    .header-actions .btn {
        padding: 0.35rem 0.75rem; /* Balanced padding */
        font-size: 0.75rem; /* Balanced readable size */
        min-height: 36px; /* Balanced height - good touch target */
        min-width: 36px; /* Balanced width - good touch target */
    }
    
    .header-actions .btn svg {
        width: 16px; /* Balanced icon size */
        height: 16px; /* Balanced icon size */
    }
    
    /* Reduce microphone button size - proportional */
    .microphone-btn {
        width: 1.8rem; /* Balanced size */
        height: 1.8rem; /* Balanced size */
    }
    
    .microphone-btn svg {
        width: 14px; /* Balanced icon size */
        height: 14px; /* Balanced icon size */
    }
    
    /* Reduce search icon size - proportional */
    .search-icon {
        width: 0.9rem; /* Balanced icon size */
        height: 0.9rem; /* Balanced icon size */
    }
}

/* Additional size reduction for very small phones */
@media (max-width: 480px) {
    .header {
        padding: 0.3rem 0; /* Further compact for very small screens */
    }
    
    .logo-icon {
        min-width: 48px; /* Balanced size for small screens */
        min-height: 48px; /* Balanced size for small screens */
    }
    
    .header-logo-image {
        width: 40px; /* Balanced size for small screens */
        height: 40px; /* Balanced size for small screens */
    }
    
    .logo-text h1 {
        font-size: 0.9rem; /* Balanced readable size for small screens */
    }
    
    .logo-text p {
        font-size: 0.65rem; /* Balanced readable size for small screens */
    }
    
    .search-container {
        max-width: 220px; /* Balanced width for small screens */
    }
    
    .search-input {
        padding: 0.3rem 0.75rem 0.3rem 1.8rem; /* Compact padding */
        font-size: 0.75rem; /* Compact readable size */
    }
    
    .header-actions .btn {
        padding: 0.3rem 0.6rem; /* Compact padding */
        font-size: 0.7rem; /* Compact readable size */
        min-height: 32px; /* Compact but still touch-friendly */
        min-width: 32px; /* Compact but still touch-friendly */
    }
    
    .header-actions .btn svg {
        width: 14px; /* Compact icon size */
        height: 14px; /* Compact icon size */
    }
    
    .microphone-btn {
        width: 1.6rem; /* Compact size */
        height: 1.6rem; /* Compact size */
    }
    
    .microphone-btn svg {
        width: 12px; /* Compact icon size */
        height: 12px; /* Compact icon size */
    }
    
    .search-icon {
        width: 0.8rem; /* Compact icon size */
        height: 0.8rem; /* Compact icon size */
    }
}

/* Mobile Filter Modal */
@media (max-width: 768px) {
    .modal-content {
        margin: 1rem;
        max-width: calc(100vw - 2rem);
        max-height: calc(100vh - 2rem);
    }
    
    .modal-body {
        padding: 1rem;
        max-height: 60vh;
    }
    
    .filter-options {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 0.75rem;
    }
    
    .filter-option {
        font-size: 0.875rem;
    }
    
    .modal-actions {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .modal-actions .btn {
        width: 100%;
    }
    
    .category-dishes {
        grid-template-columns: 1fr;
        gap: 1rem;
        min-height: auto;
    }
    
    .shop-card {
        width: 100%;
        max-width: 100%;
        min-width: auto;
    }
    
    .shops-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .shop-contact {
        height: 190px;
        padding: 0.5rem;
    }
    
    .call-btn {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }
    
    .dish-card {
        min-height: 80px;
        padding: 0.5rem;
    }
    
    .category-dishes {
        grid-template-columns: 1fr;
        gap: 0.75rem;
        min-height: auto;
        padding: 0.5rem;
    }
    
    .dish-name {
        font-size: 0.9rem;
    }
    
    .dish-price {
        font-size: 0.9rem;
    }
    
    .dish-type-label {
        font-size: 0.65rem;
        padding: 0.15rem 0.3rem;
    }
}
    .modal-content {
        margin: 1rem;
        max-width: calc(100vw - 2rem);
        max-height: calc(100vh - 2rem);
    }
    
    .modal-body {
        padding: 1rem;
        max-height: 60vh;
    }
    
    .filter-options {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 0.75rem;
    }
    
    .filter-option {
        font-size: 0.875rem;
    }
    
    .modal-actions {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .modal-actions .btn {
        width: 100%;
    }


/* Mobile filters row - keep all elements in one line */
@media (max-width: 768px) {
    .filters-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 0.5rem !important;
        margin-bottom: 1rem !important;
        overflow-x: auto !important;
        padding-bottom: 0.5rem !important;
        align-items: center !important;
    }
    
    .filters-row .select {
        min-width: auto !important;
        flex-shrink: 0 !important;
        font-size: 0.8rem !important;
        padding: 0.375rem 0.5rem !important;
    }
    
    /* Make buttons more compact on mobile */
    .filters-row .btn {
        padding: 0.375rem 0.5rem !important;
        font-size: 0.75rem !important;
        min-width: auto !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }
    
    /* Ensure the row doesn't wrap */
    .filters-row > * {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }
    
    /* Add horizontal scroll indicator */
    .filters-row::-webkit-scrollbar {
        height: 4px;
    }
    
    .filters-row::-webkit-scrollbar-track {
        background: hsl(var(--muted));
        border-radius: 2px;
    }
    
    .filters-row::-webkit-scrollbar-thumb {
        background: hsl(var(--muted-foreground));
        border-radius: 2px;
    }
    
    .filters-row::-webkit-scrollbar-thumb:hover {
        background: hsl(var(--foreground));
    }
}

/* Modal Actions */
.modal-actions {
    display: flex;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid hsl(var(--border));
    justify-content: flex-end;
}

/* FAB Filter Button Styles */
.fab-container {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 1000;
}

.fab {
    width: auto;
    height: 48px;
    border-radius: 24px;
    background: hsl(var(--foreground));
    color: hsl(var(--background));
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    z-index: 1000;
    padding: 0 1rem;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
}

.fab:hover {
    background: hsl(var(--foreground) / 0.8);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.fab svg {
    width: 20px;
    height: 20px;
}



/* Extra small mobile optimization */
@media (max-width: 480px) {
    .filters-row {
        gap: 0.375rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .filters-row .select {
        font-size: 0.75rem !important;
        padding: 0.25rem 0.375rem !important;
    }
    
    .filters-row .btn {
        padding: 0.25rem 0.375rem !important;
        font-size: 0.7rem !important;
    }
}