/* Main View Mockup Styles - All classes prefixed with mv- to avoid conflicts */


/* Apply Inter font to all main-view elements */
.content_panel,
.content_panel *,
[class^="mv-"],
[class*=" mv-"] {
    font-family: var(--lumo-font-family);
    font-feature-settings:normal;
    font-variation-settings:normal;
}

.mv-search-container{
	background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    width: 100%;
}
.mv-search-content{
	width: 100%;
    justify-content: center;
    align-items: center;
    padding:0rem 2rem;
    max-width: var(--mv-content-max-width);
    display: flex;
    margin: auto;
}


/* Hero Section */
.mv-hero {
    padding: 1rem 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    width: 100%;
}

.mv-hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.mv-hero-text h1 {
    font-size: 2.25rem;
    margin-bottom: 1rem;
    line-height: 1.2;
    color: var(--mv-text-dark);
    font-family: var(--lumo-font-family);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.mv-hero-image {
    display: flex;
    justify-content: center;
}

.mv-food-plate {
    width: 21.875rem;
    height: 21.875rem;
    border-radius: 50%;
    overflow: hidden;
}

/* Browse Categories Section */
.mv-categories-section {
    margin: 1.5rem 0;
}

.mv-categories-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 .6rem 0;
    color: #1f2937;
    font-family: var(--lumo-font-family);
}

.mv-categories-scroll {
    display: flex;
    flex-flow:wrap;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    align-items: center;
}

/* Custom scrollbar for categories */
.mv-categories-scroll::-webkit-scrollbar {
    height: 0.25rem;
}

.mv-categories-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.mv-categories-scroll::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 0.25rem;
}

/* Category Card */
.mv-category-card {
    background: white;
    padding: 1rem 1.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    min-width: 6.25rem;
}

.mv-category-card:hover {
    box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.1);
    transform: translateY(-0.125rem);
}

.mv-category-icon {
    font-size: 2rem;
    line-height: 1;
}

.mv-category-name {
    font-size: 0.875rem;
    color: #374151;
    font-weight: 500;
    font-family: var(--lumo-font-family);
}

/* Category Menu Button (three dots) */
.mv-category-menu-button {
    background: white;
    min-width: 3.75rem;
    justify-content: center;
    position: relative;
}

.mv-category-menu-icon {
    font-size: 1.5rem;
    color: #374151;
    font-weight: bold;
    line-height: 1;
}

.mv-category-menu-button:hover {
    background: #f3f4f6;
}

/* Category Dropdown Menu */
.mv-category-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 0.625rem 1.5625rem rgba(0, 0, 0, 0.15);
    min-width: 12.5rem;
    z-index: 1000;
    padding: 0.5rem 0;
}

.mv-category-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background 0.2s;
}

.mv-category-dropdown-item:hover {
    background: #f3f4f6;
}

.mv-category-dropdown-emoji {
    font-size: 1.25rem;
    line-height: 1;
}

.mv-category-dropdown-name {
    font-size: 0.875rem;
    color: #374151;
    font-weight: 500;
    font-family: var(--lumo-font-family);
}

/* Favorite Stores Section - Moved to main-view-fav-section.css */

/* New Stores Section - Moved to main-view-new-stores-section.css */

/* Steps Section */
.mv-steps-section {
    padding: 4rem 0;
    background: var(--mv-white);
}

.mv-steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
    gap: 3rem;
    margin-top: 3rem;
}

.mv-step-card {
    text-align: center;
    transition: transform 0.3s;
}

.mv-step-card:hover {
    transform: translateY(-0.625rem);
}

.mv-step-icon {
    width: 6.25rem;
    height: 6.25rem;
    margin: 0 auto 1.5rem;
    background: linear-gradient(135deg, var(--mv-primary-color) 0%, var(--mv-secondary-color) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--mv-shadow-lg);
}

.mv-step-icon i,
.mv-step-icon vaadin-icon {
    font-size: 2.5rem;
    color: var(--mv-white);
}

.mv-step-title {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    color: var(--mv-text-dark);
}

.mv-step-desc {
    color: var(--mv-text-light);
}

/* Footer Mockup Styles */
.mv-footer {
    background: linear-gradient(135deg, #2b2d42 0%, #1a1b2e 100%);
    color: var(--mv-white);
    padding: 0;
    width: 100%;
}

/* Newsletter Section */
.mv-footer-newsletter {
    background: linear-gradient(135deg, var(--theme-primary-color, var(--mv-primary-color)) 0%, var(--mv-secondary-color) 100%);
    padding: 3rem 0rem;
    width: 100%;
}

.mv-newsletter-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.mv-newsletter-content h3 {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
    color: var(--mv-white);
    margin-top: 0;
}

.mv-newsletter-content p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    margin: 0;
}

.mv-newsletter-form {
    display: flex;
    gap: 1rem;
    min-width: 12.5rem;
}

.mv-newsletter-btn {
    background: var(--mv-white) !important;
    color: var(--theme-primary-color, var(--mv-primary-color)) !important;
    border: none;
    padding: 1rem 2.5rem !important;
    border-radius: 3.125rem !important;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;
}

.mv-newsletter-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.2);
}

/* Footer Main Content */
.mv-footer-main {
    display: grid;
    grid-template-columns:2fr 1.2fr 1fr 1fr 1.5fr;
    gap: 3rem;
    padding: 3rem 0;
}

.mv-footer-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.mv-footer-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.75rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.mv-footer-logo .mv-logo-icon {
    font-size: 2rem;
}

.mv-footer-logo .mv-logo-text {
    color: var(--mv-white);
}

.mv-footer-desc {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.8;
    font-size: 0.95rem;
    margin: 0;
}

/* Social Links */
.mv-social-links {
    display: flex;
    gap: 1rem;
}

.mv-social-icon {
    width: 2.5rem;
    height: 2.5rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mv-white);
    transition: all 0.3s;
    text-decoration: none;
}

.mv-social-icon:hover {
    background: var(--theme-primary-color, var(--mv-primary-color));
    transform: translateY(-0.3125rem);
}

/* Footer Headings */
.mv-footer-heading {
    font-size: 1.25rem;
    color: var(--mv-white);
    margin-bottom: 0.5rem;
    margin-top: 0;
    position: relative;
    padding-bottom: 0.75rem;
}

.mv-footer-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 3.125rem;
    height: 0.1875rem;
    background: var(--theme-primary-color, var(--mv-primary-color));
    border-radius: 0.125rem;
}

/* Footer Links */
.mv-footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem 0;
    padding: 0;
    margin: 0;
}

.mv-footer-links li {
    margin: 0;
}

.mv-footer-links li a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 0.5rem 0;
}
.mv-footer-links li div {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 0.5rem 0;
    cursor:pointer;
}
.mv-footer-links li div:hover {
    color: var(--theme-primary-color, var(--mv-primary-color));
}
.mv-footer-links li a:hover {
    color: var(--theme-primary-color, var(--mv-primary-color));
}

.mv-footer-links li a i {
    font-size: 0.8rem;
}

/* Footer Contact */
.mv-footer-contact {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0;
    margin: 0;
}

.mv-footer-contact li {
    align-items: flex-start;
    gap: 1rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    padding:0;
}

.mv-footer-contact li i {
    color: var(--theme-primary-color, var(--mv-primary-color));
    font-size: 1.2rem;
    margin-top: 0.2rem;
    min-width: 1.25rem;
}

.mv-footer-contact li span {
    line-height: 1.6;
}

/* App Downloads */
.mv-app-downloads {
    margin-top: 1rem;
}

.mv-app-downloads h5 {
    color: var(--mv-white);
    margin-bottom: 1rem;
    margin-top: 0;
    font-size: 1rem;
}

.mv-app-badges {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.mv-app-badge {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    padding: 0.75rem 1rem;
    border-radius: 0.625rem;
    color: var(--mv-white);
    text-decoration: none;
    transition: all 0.3s;
    border: 0.0625rem solid rgba(255, 255, 255, 0.1);
}

.mv-app-badge:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateX(0.3125rem);
}

.mv-app-badge i {
    font-size: 1.75rem;
}

.mv-app-badge div {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.mv-app-badge small {
    font-size: 0.7rem;
    opacity: 0.8;
}

.mv-app-badge strong {
    font-size: 0.9rem;
}

/* Footer Bottom */
.mv-footer-bottom {
    border-top: 0.0625rem solid rgba(255, 255, 255, 0.1);
    padding: 2rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mv-footer-bottom p {
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

.mv-footer-bottom a {
    color: var(--theme-primary-color, var(--mv-primary-color));
    text-decoration: none;
    transition: color 0.3s;
}

.mv-footer-bottom a:hover {
    color: var(--mv-secondary-color);
}

.mv-payment-methods {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: rgba(255, 255, 255, 0.6);
}

.mv-payment-methods i {
    font-size: 1.75rem;
    color: rgba(255, 255, 255, 0.8);
    transition: all 0.3s;
}

.mv-payment-methods i:hover {
    color: var(--theme-primary-color, var(--mv-primary-color));
    transform: scale(1.2);
}

/* Responsive Design */
@media (max-width: 768px) {
    .mv-hero-content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .mv-hero-text h1 {
        font-size: 2rem;
    }

    .mv-food-plate {
        width: 15.625rem;
        height: 15.625rem;
    }

    .mv-stores-grid,
    .mv-new-stores-grid {
        grid-template-columns: 1fr;
    }

    .mv-steps-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }

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

    /* Search section responsive */
    .mv-food-search-section {
        margin-top: 2rem;
        flex-direction: column;
        align-items: stretch !important;
        justify-content: flex-start !important;
    }

    .mv-location-search-section {
        flex-direction: column;
        align-items: stretch !important;
    }

    /* Search field container responsive */
    .mv-search-field-container {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Search box responsive - prevent wrapping */
    .mv-search-box {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 0;
    }

    .mv-search-box vaadin-combo-box,
    .mv-search-box .search-layout,
    .mv-search-box .autocomplete {
        flex-shrink: 1;
        min-width: 0;
    }

    .mv-search-btn,
    .mv-search-field-btn {
        white-space: nowrap;
        min-width: auto;
        flex-shrink: 0;
    }

    /* Categories title responsive */
    .mv-categories-title {
        font-size: 1rem;
        padding-left: 0rem !important;
    }

    .mv-footer-newsletter {
        padding: 2rem 1rem;
    }

    .mv-newsletter-wrapper {
        flex-direction: column;
        text-align: center;
    }

    .mv-newsletter-content h3 {
        font-size: 1.25rem;
    }

    .mv-newsletter-content p {
        font-size: 0.9rem;
    }

    .mv-newsletter-form {
        min-width: 100%;
        flex-direction: column;
    }

    .mv-footer-main {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 2rem 1rem;
    }

    .mv-footer-bottom {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .mv-payment-methods {
        flex-wrap: wrap;
        justify-content: center;
    }

    .mv-app-badges {
        flex-direction: row;
    }
}

/* Tablet responsive styles */
@media (max-width: 1024px) and (min-width: 769px) {
    .mv-food-search-section,
    .mv-location-search-section {
        justify-content: flex-start;
    }

    .mv-search-field-container {
        max-width: 100% !important;
    }
}

@media (max-width: 480px) {
    .mv-steps-grid {
        grid-template-columns: 1fr;
    }

    .mv-newsletter-btn {
        padding: 0.75rem 1.5rem !important;
        font-size: 0.9rem;
    }

    .mv-app-badges {
        flex-direction: column;
    }

    /* Search fields on very small screens */
    .mv-food-search-section {
        margin-top: 1rem;
    }

    .mv-search-field-container {
        height: auto;
    }

    /* Ensure search box doesn't wrap on small screens */
    .mv-search-box {
        flex-wrap: nowrap;
        padding: 0rem 0rem 0rem 0.25rem;
    }

    .mv-search-field-btn,
    .mv-search-btn {
        padding: 0.75rem 1rem !important;
        font-size: 0.875rem;
    }

    .mv-search-field-icon {
        left: 1rem;
        font-size: 1rem;
    }

    .mv-search-field-input::part(input-field) {
        padding: 0.75rem 1rem 0.75rem 2.75rem !important;
        font-size: 0.875rem;
    }

    .mv-categories-title {
        font-size: 0.9rem;
        margin-top: 0.5rem !important;
    }

    /* Category cards responsive */
    .mv-category-card {
        min-width: 5rem;
        padding: 0.75rem 1rem;
    }

    .mv-category-icon {
        font-size: 1.5rem;
    }

    .mv-category-name {
        font-size: 0.75rem;
    }
}

/* Main View Top Section Styles - Based on Home Top Section Mockup */

/* Hero Section Container */
.mv-hero {
    padding: 1.5rem 0rem;
    background-color: #f9fafb;
}

/* Container */
.mv-container {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 0rem;
}

/* Hero Content Grid */
.mv-hero-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: flex-start;
}

/* Hero Text Section (Left Column) */
.mv-hero-text {
    display: flex;
    flex-direction: column;
}

.mv-hero-text h1 {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
    color: #1f2937;
    font-family: var(--lumo-font-family);
}

.mv-food-search-section{
	margin-top: 4rem;
    flex-grow: 1;
    align-items: flex-start;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
    width: 100%;
}

.mv-hero-subtitle {
    color: #6b7280;
    font-size: 1rem;
    margin-bottom: 1.5rem;
    line-height: 1.5;
    font-family: var(--lumo-font-family);
}



/* Trending Tags - Matching home-categories.html mockup */
.mv-trending-tags {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    margin-top: 1rem;
}

/* Hide scrollbar for cleaner look */
.mv-trending-tags::-webkit-scrollbar {
    height: 0.25rem;
}

.mv-trending-tags::-webkit-scrollbar-track {
    background: transparent;
}

.mv-trending-tags::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 0.25rem;
}

.mv-trending-tag {
    background-color: white;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    font-family: var(--lumo-font-family);
}

.mv-trending-tag:hover {
    box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.1);
    transform: translateY(-0.125rem);
}

/* Selected state for trending tags */
.mv-trending-tag.selected {
    background-color: #ef4444;
    color: white;
    box-shadow: 0 0.125rem 0.5rem rgba(239, 68, 68, 0.3);
}

.mv-trending-tag.selected:hover {
    background-color: #dc2626;
    box-shadow: 0 0.25rem 0.75rem rgba(239, 68, 68, 0.4);
}

/* Hero Image Section (Right Column) */
.mv-hero-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.mv-food-plate {
    width: 100%;
    height: 25rem;
    border-radius: 1rem;
    box-shadow: 0 0.625rem 0.9375rem rgba(0, 0, 0, 0.1);
    background-size: cover;
    background-position: center;
    max-height: 18.75rem;
}

/* Categories Section (Optional - from mockup) */
.mv-categories {
    padding: 1.5rem 1rem;
}

.mv-categories h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
    font-family: var(--lumo-font-family);
}

.mv-categories-scroll {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.mv-categories-scroll::-webkit-scrollbar {
    height: 0.25rem;
}

.mv-categories-scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.mv-categories-scroll::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 0.25rem;
}

.mv-category-item {
    background-color: white;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--lumo-font-family);
}

.mv-category-item:hover {
    box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.1);
    transform: translateY(-0.125rem);
}

/* Responsive Design */
@media (min-width: 768px) {
    .mv-hero-content {
        grid-template-columns: 1fr 1fr;
    }

    .mv-hero-text h1 {
        font-size: 2.25rem;
    }
}

@media (min-width: 1024px) {
    .mv-hero-text h1 {
        font-size: 2.25rem;
    }

    .mv-hero {
        padding: 2.5rem 0rem;
    }
}

/* Typography Overrides for Consistency */
.font-poppins {
}

/* Main View New Stores Section - Matching Favorite Stores Design with Order Now Button */

/* Section Container */
.mv-new-stores {
    width: 100%;
    padding: 2rem 0;
}

.mv-new-stores .mv-container {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Section Title - Same as favorite stores */
.mv-new-stores .mv-section-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: #1f2937;
    text-align: left;
    font-family: var(--lumo-font-family);
}

/* Hide subtitle */
.mv-new-stores .mv-section-subtitle {
    display: none;
}

/* New Stores Grid - Same as favorite stores */
.mv-new-stores-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

/* Responsive breakpoints */
@media (min-width: 640px) {
    .mv-new-stores-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


@media (min-width: 768px) {
    .mv-new-stores-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* New Store Card - Same as favorite stores card */
.mv-new-store-card {
    background: white;
    border-radius: 1rem;
    box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: box-shadow 0.3s ease;
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
}

.mv-new-store-card:hover {
    box-shadow: 0 0.625rem 0.9375rem rgba(0, 0, 0, 0.1);
}

/* Store Image - Same as favorite stores */
.mv-new-store-card .mv-new-store-image {
    width: 100%;
    height: 12rem;
    overflow: hidden;
    position: relative;
    background-size: cover;
    background-position: center;
}

/* Badge (Open/Closed) - Same as favorite stores */
.mv-new-store-card .mv-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: white;
    z-index: 1;
}

.mv-new-store-card .mv-badge.mv-opening {
    background-color: #10b981;
}

.mv-new-store-card .mv-badge.mv-closed {
    background-color: #ef4444;
}

/* Store Info Section - Same as favorite stores */
.mv-new-store-info {
    padding: 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mv-new-store-name {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
    font-family: var(--lumo-font-family);
}

.mv-new-store-rating {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0;
}

.mv-new-store-rating .mv-stars {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Order Now Button - Distinctive styling */
.mv-new-store-card .mv-order-btn {
    background-color: #ef4444 !important;
    color: white !important;
    border: none;
    padding: 0.75rem 1rem !important;
    margin: 0 1rem 1rem 1rem !important;
    border-radius: 0.5rem !important;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.875rem;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 0.125rem 0.5rem rgba(239, 68, 68, 0.25);
}

.mv-new-store-card .mv-order-btn:hover {
    background-color: #dc2626 !important;
    transform: translateY(-0.125rem);
    box-shadow: 0 0.25rem 0.75rem rgba(239, 68, 68, 0.35);
}

.mv-new-store-card .mv-order-btn:active {
    transform: translateY(0);
}

/* Typography consistency */
.mv-new-stores {
    font-family: var(--lumo-font-family);
}


/* Main View Favorite Stores Section - Based on Mockup */

/* Section Container */
.mv-favorite-stores {
    width: 100%;
    padding: 1rem 0;
}

.mv-favorite-stores .mv-container {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 2rem; 
}

/* Section Title */
.mv-favorite-stores .mv-section-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: #1f2937;
    text-align: left;
    font-family: var(--lumo-font-family);
}

/* Hide subtitle for mockup design */
.mv-favorite-stores .mv-section-subtitle {
    display: none;
}

/* Stores Grid - Tailwind-like responsive grid */
.mv-stores-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

/* Responsive breakpoints */
@media (min-width: 640px) {
    .mv-stores-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .mv-stores-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Store Card */
.mv-store-card {
    background: white;
    border-radius: 1rem;
    box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: box-shadow 0.3s ease;
    cursor: pointer;
    position: relative;
}

.mv-store-card:hover {
    box-shadow: 0 0.625rem 0.9375rem rgba(0, 0, 0, 0.1);
}

/* Store Image */
.mv-store-image {
    width: 100%;
    height: 12rem;
    overflow: hidden;
    position: relative;
    background-size: cover;
}

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

/* Badge (Open/Closed) */
.mv-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: white;
    z-index: 1;
}

.mv-badge.mv-opening {
    background-color: #10b981;
}

.mv-badge.mv-closed {
    background-color: #ef4444;
}

/* Store Info Section */
.mv-store-info {
    padding: 1rem;
}

.mv-store-name {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 0.25rem 0;
    font-family: var(--lumo-font-family);
}

.mv-store-rating {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0;
}

.mv-stars {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Pagination */
.mv-pagination {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
}

.mv-page-btn {
    min-width: 2.75rem;
    min-height: 2.75rem;
    border-radius: 50%;
    border: 0.125rem solid #e5e7eb;
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    padding: 0.9375rem;
    color: #9ca3af;
}

.mv-page-btn vaadin-icon {
    width: 1.25rem;
    height: 1.25rem;
}

.mv-page-btn:hover,
.mv-page-btn.active {
    background: #ef4444;
    border-color: #ef4444;
    color: white;
}

.mv-page-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.mv-page-btn.disabled:hover {
    background: white;
    border-color: #e5e7eb;
    color: #9ca3af;
}

/* Typography consistency */
.mv-favorite-stores {
    font-family: var(--lumo-font-family);
}