* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: #EF4444;
    --secondary-color: #F87171;
    --dark-color: #1F2937;
    --light-color: #F9FAFB;
    --border-color: #E5E7EB;
    --success-color: #10B981;
    --text-dark: #111827;
    --text-light: #6B7280;
}

.navbar-content {
    align-items: center;
    display: flex;
    gap: 16px;
    padding: 12px 0;
}

.logo {
    color: var(--primary-color);
    font-size: 28px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.app-launcher {
    position: relative;
}

.ai-direct-link { color: var(--text-light); font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.ai-direct-link:hover { color: var(--primary-color); }

.apps-button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    height: 46px;
    justify-content: center;
    width: 46px;
}

.apps-button:hover,
.apps-button[aria-expanded="true"] { background: #f3f4f6; }

.waffle-dots {
    display: grid;
    gap: 3px;
    grid-template-columns: repeat(3, 5px);
}

.waffle-dots i {
    background: #4b5563;
    border-radius: 50%;
    height: 5px;
    width: 5px;
}

.apps-panel {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 16px 35px rgba(17, 24, 39, 0.18);
    padding: 18px;
    position: absolute;
    right: 0;
    top: 54px;
    width: 290px;
    z-index: 110;
}

.apps-panel-title {
    color: var(--text-dark);
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 12px;
}

.apps-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, 1fr);
}

.app-link {
    align-items: center;
    border-radius: 8px;
    color: var(--text-light);
    display: grid;
    font-size: 13px;
    font-weight: 700;
    gap: 7px;
    justify-items: center;
    min-height: 92px;
    padding: 10px 6px;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}

.app-link:hover,
.app-link-active {
    background: #fff1f2;
    color: var(--primary-color);
}

.app-icon {
    align-items: center;
    border-radius: 6px;
    display: inline-flex;
    font-size: 17px;
    height: 28px;
    justify-content: center;
    width: 28px;
}

.app-icon-search { background: #fee2e2; }
.app-icon-mail { background: #dbeafe; color: #2563eb; }
.app-icon-meet { background: #dcfce7; color: #15803d; }
.app-icon-food { background: #ffedd5; color: #ea580c; font-size: 22px; }
.app-icon-account { background: #e0e7ff; color: #4338ca; }
.app-icon-ai { background: #dcfce7; color: #166534; font-size: 10px; font-weight: 800; }

.app-page-header { background: linear-gradient(135deg, #fff1f2, #fff7ed); border-radius: 14px; margin-bottom: 22px; padding: 34px; }
.app-page-header h2 { font-size: 32px; margin: 4px 0 6px; }
.app-page-header p:last-child { color: var(--text-light); }
.dash-search-form, .account-form, .meet-actions { background: white; border: 1px solid var(--border-color); border-radius: 12px; padding: 22px; }
.dash-search-form label, .account-form label, .meet-actions label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 7px; }
.dash-search-form > div, .meet-actions form > div { display: flex; gap: 10px; }
.dash-search-form input, .account-form input, .meet-actions input { border: 1px solid var(--border-color); border-radius: 7px; font: inherit; min-width: 0; padding: 11px 12px; width: 100%; }
.app-results { display: grid; gap: 10px; margin-top: 18px; }
.app-result, .mail-list article { background: white; border: 1px solid var(--border-color); border-radius: 10px; padding: 16px; }
.app-result strong, .mail-list strong { display: block; }
.app-result span, .mail-list span { color: var(--text-light); display: block; font-size: 13px; }
.mail-toolbar { align-items: center; display: flex; gap: 22px; margin-bottom: 14px; }
.mail-toolbar span { color: var(--text-light); font-size: 14px; }
.mail-folder { background: transparent; border: 0; color: var(--text-light); cursor: pointer; font: inherit; font-size: 14px; padding: 8px 0; }
.mail-folder.active, .mail-folder:hover { color: var(--primary-color); font-weight: 700; }
.compose-form { background: white; border: 1px solid var(--border-color); border-radius: 12px; display: grid; gap: 8px; margin-bottom: 18px; padding: 20px; }
.compose-form label { font-size: 13px; font-weight: 700; margin-top: 4px; }
.compose-form input, .compose-form textarea { border: 1px solid var(--border-color); border-radius: 7px; font: inherit; padding: 10px 12px; width: 100%; }
.compose-form textarea { resize: vertical; }
.compose-form h3 { margin-bottom: 4px; }
.compose-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.compose-tools { display: flex; flex-wrap: wrap; gap: 7px; }
.tool-button { background: #f9fafb; border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-dark); cursor: pointer; font: inherit; font-size: 13px; padding: 7px 10px; }
.tool-button:hover { border-color: var(--primary-color); color: var(--primary-color); }
.mail-dropzone { background: #f9fafb; border: 1px dashed #cbd5e1; border-radius: 8px; color: var(--text-light); font-size: 13px; padding: 14px; text-align: center; }
.mail-dropzone input { display: none; }
.mail-attachments { color: var(--success-color); font-size: 12px; min-height: 16px; }
.mail-list { display: grid; gap: 10px; }
.mail-list time { color: var(--text-light); float: right; font-size: 12px; }
.mail-list article { cursor: pointer; }
.mail-list article:hover { border-color: var(--primary-color); }
.mail-reading { background: white; border: 1px solid var(--border-color); border-radius: 12px; padding: 22px; }
.mail-reading h3 { margin: 14px 0 6px; }
.mail-reading p { color: var(--text-light); margin-top: 10px; }
.meet-actions { display: grid; gap: 24px; }
.meet-actions form { border-top: 1px solid var(--border-color); padding-top: 22px; }
.btn-secondary { background: white; border: 1px solid var(--primary-color); border-radius: 7px; color: var(--primary-color); cursor: pointer; font: inherit; font-weight: 700; padding: 10px 16px; }
.app-status { color: var(--success-color); font-weight: 700; margin-top: 16px; }
.account-form { display: grid; gap: 8px; max-width: 500px; }
.account-form[hidden] { display: none; }
.account-form > div { display: grid; gap: 8px; }
.account-form label:not(:first-child) { margin-top: 8px; }
.account-time { color: var(--text-light); font-size: 12px; margin: 4px 0 0; }
.password-help { color: var(--text-light); font-size: 12px; margin: 0 0 4px; }
.account-switch { background: transparent; border: 0; color: var(--text-light); cursor: pointer; font: inherit; font-size: 13px; padding: 4px; }
.account-switch:hover { color: var(--primary-color); }
.premium-callout { background: #fff7ed; border: 1px solid #fed7aa; border-radius: 10px; display: grid; gap: 8px; margin-top: 18px; max-width: 500px; padding: 18px; }
.premium-callout span { color: var(--text-light); font-size: 13px; }

.account-chip-wrap { position: relative; }
.account-chip { align-items: center; background: transparent; border: 1px solid var(--border-color); border-radius: 999px; cursor: pointer; display: flex; font: inherit; gap: 8px; padding: 5px 14px 5px 5px; }
.account-chip:hover { border-color: var(--primary-color); }
.account-chip-avatar { align-items: center; background: var(--primary-color); border-radius: 50%; color: white; display: flex; font-size: 12px; font-weight: 800; height: 26px; justify-content: center; overflow: hidden; width: 26px; }
.account-chip-avatar img { height: 100%; object-fit: cover; width: 100%; }
.account-chip-label { font-size: 13px; font-weight: 700; }
.account-chip-panel { background: white; border: 1px solid var(--border-color); border-radius: 10px; box-shadow: 0 12px 28px rgba(17, 24, 39, 0.16); display: grid; gap: 4px; min-width: 210px; padding: 12px; position: absolute; right: 0; top: 46px; z-index: 110; }
.account-chip-panel[hidden] { display: none; }
.account-chip-panel strong { color: var(--text-dark); font-size: 13px; }
.account-chip-plan { border-bottom: 1px solid var(--border-color); color: var(--text-light); display: block; font-size: 12px; padding-bottom: 8px; }
.account-chip-panel a, .account-chip-panel button { background: transparent; border: 0; border-radius: 6px; color: var(--text-light); cursor: pointer; font: inherit; font-size: 13px; padding: 8px; text-align: left; text-decoration: none; }
.account-chip-panel a:hover, .account-chip-panel button:hover { background: #fff1f2; color: var(--primary-color); }

.profile-settings { background: white; border: 1px solid var(--border-color); border-radius: 12px; margin-bottom: 18px; max-width: 640px; padding: 20px; }
.profile-settings h3 { font-size: 18px; margin-bottom: 6px; }
.profile-photo-row { align-items: center; display: flex; gap: 14px; margin-bottom: 14px; }
.profile-photo-preview { align-items: center; background: var(--primary-color); border-radius: 50%; color: white; display: flex; font-size: 20px; font-weight: 800; height: 56px; justify-content: center; overflow: hidden; width: 56px; }
.profile-photo-preview img { height: 100%; object-fit: cover; width: 100%; }
.profile-photo-row > div { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
#profile-settings-identity { color: var(--text-light); font-size: 13px; margin-bottom: 14px; }
.profile-edit-form { display: grid; gap: 12px; margin-bottom: 18px; }
.profile-field-group { display: grid; gap: 6px; }
.profile-edit-form label { display: block; font-size: 13px; font-weight: 700; }
.profile-edit-form input { border: 1px solid var(--border-color); border-radius: 7px; font: inherit; padding: 11px 12px; width: 100%; }
.plan-grid { display: grid; gap: 6px; margin-bottom: 18px; }
.plan-row { display: flex; font-size: 13px; justify-content: space-between; }
.plan-row span { color: var(--text-light); }
.plan-row strong { color: var(--text-dark); }
.plan-compare { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 16px; }
.plan-card { background: #f9fafb; border: 1px solid var(--border-color); border-radius: 10px; display: grid; gap: 6px; padding: 14px; text-align: center; }
.plan-card strong { font-size: 15px; }
.plan-card span { color: var(--text-light); font-size: 12px; }
.plan-card button { margin-top: 6px; }
.plan-card button:disabled { cursor: default; opacity: 0.6; }
.ai-chat { background: #111827; border-radius: 12px; display: grid; gap: 10px; margin-bottom: 16px; min-height: 220px; padding: 18px; }
.ai-message { border-radius: 10px; display: grid; gap: 4px; max-width: 80%; padding: 12px 14px; }
.ai-message strong { font-size: 12px; }
.ai-message span { font-size: 14px; line-height: 1.5; }
.ai-message-bot { background: #374151; color: white; justify-self: start; }
.ai-message-user { background: #fee2e2; color: var(--text-dark); justify-self: end; }
.ai-form { background: white; border: 1px solid var(--border-color); border-radius: 12px; padding: 18px; }
.ai-form label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 7px; }
.ai-form > div { display: flex; gap: 8px; }
.ai-form input { border: 1px solid var(--border-color); border-radius: 7px; font: inherit; min-width: 0; padding: 11px 12px; width: 100%; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
        sans-serif;
    background-color: var(--light-color);
    color: var(--text-dark);
    line-height: 1.6;
}

html:has(#account-page.active) {
    overflow-anchor: none;
}

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

/* Navigation Bar */
.navbar {
    background-color: white;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.cart-btn {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    transition: background-color 0.3s;
}

.cart-btn:hover {
    background-color: var(--secondary-color);
}


.profile-panel { background: white; border: 1px solid var(--border-color); border-radius: 10px; box-shadow: 0 12px 28px rgba(17, 24, 39, 0.16); display: grid; gap: 4px; min-width: 190px; padding: 12px; position: absolute; right: 0; top: 38px; z-index: 110; }
.profile-panel[hidden] { display: none; }
.profile-panel strong { border-bottom: 1px solid var(--border-color); color: var(--text-dark); font-size: 13px; padding: 4px 8px 10px; }
.profile-panel button { background: transparent; border: 0; border-radius: 6px; color: var(--text-light); cursor: pointer; font: inherit; font-size: 13px; padding: 8px; text-align: left; }
.profile-panel button:hover { background: #fff1f2; color: var(--primary-color); }


.badge {
    background-color: white;
    color: var(--primary-color);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
}

/* Pages */
.page {
    display: none;
    padding: 40px 0;
    min-height: 60vh;
}

.page.active {
    display: block;
}

#account-page {
    padding-top: 18px;
}

#account-page .app-page-header {
    margin-bottom: 14px;
    padding: 22px 34px;
}

#account-page .account-form {
    gap: 5px;
    padding: 18px;
}

#account-page .account-form label:not(:first-child) {
    margin-top: 4px;
}

/* Hero Section */
.hero {
    text-align: center;
    margin-bottom: 40px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    padding: 60px 20px;
    border-radius: 12px;
}

.hero h2 {
    font-size: 32px;
    margin-bottom: 10px;
}

.hero p {
    font-size: 18px;
    opacity: 0.9;
}

/* Restaurants Grid */
.restaurants-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    margin-bottom: 40px;
}

.restaurant-card {
    background-color: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    cursor: pointer;
}

.restaurant-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.nearby-section { margin: 10px 0 48px; }
.nearby-heading { align-items: end; display: flex; justify-content: space-between; margin-bottom: 20px; }
.nearby-heading h2 { font-size: 26px; }
.nearby-location-form { background: white; border: 1px solid var(--border-color); border-radius: 12px; padding: 20px; }
.nearby-location-form label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.nearby-location-controls { display: flex; gap: 10px; }
.nearby-location-controls input { border: 1px solid var(--border-color); border-radius: 6px; font: inherit; max-width: 180px; padding: 11px 12px; }
.nearby-search, .nearby-card a { color: var(--primary-color); font-size: 14px; font-weight: 700; text-decoration: none; }
.nearby-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nearby-card { align-items: center; background: white; border: 1px solid var(--border-color); border-radius: 12px; display: grid; gap: 14px; grid-template-columns: auto 1fr auto; padding: 18px; }
.nearby-mark { align-items: center; border-radius: 50%; display: flex; font-size: 12px; font-weight: 800; height: 48px; justify-content: center; width: 48px; }
.nearby-mark-mountain { background: #dcefe9; color: #195f53; }
.nearby-mark-cafe { background: #f8ddd1; color: #a43e2a; }
.nearby-card h3 { font-size: 16px; margin-bottom: 3px; }
.nearby-card p { color: var(--text-light); font-size: 12px; margin-bottom: 3px; }
.nearby-card span { color: var(--text-light); font-size: 12px; }
.nearby-disclaimer { color: var(--text-light); font-size: 11px; margin-top: 12px; }

.maps-heading { align-items: end; display: flex; justify-content: space-between; margin-bottom: 20px; }
.maps-heading h2 { font-size: 28px; }
.maps-source { color: var(--text-light); font-size: 12px; }
.maps-status { color: var(--text-light); font-size: 14px; margin-bottom: 16px; }
.maps-results { display: grid; gap: 12px; }
.maps-result { align-items: center; background: white; border: 1px solid var(--border-color); border-radius: 10px; display: grid; gap: 14px; grid-template-columns: auto 1fr auto; padding: 16px; }
.maps-result-mark { align-items: center; background: #e6f4f1; border-radius: 50%; color: #17665b; display: flex; font-size: 11px; font-weight: 800; height: 42px; justify-content: center; width: 42px; }
.maps-result h3 { font-size: 16px; margin-bottom: 3px; }
.maps-result p { color: var(--text-light); font-size: 12px; }
.maps-result a { color: var(--primary-color); font-size: 13px; font-weight: 700; text-decoration: none; }

@media (max-width: 600px) {
    .navbar-content { gap: 8px; }
    .apps-panel { right: -8px; }
    .app-page-header { padding: 24px; }
    .app-page-header h2 { font-size: 27px; }
    .dash-search-form > div, .meet-actions form > div { align-items: stretch; flex-direction: column; }
    .mail-toolbar { flex-wrap: wrap; gap: 12px; }
    .nearby-location-controls { align-items: stretch; flex-direction: column; }
    .nearby-location-controls input { max-width: none; }
    .maps-heading { align-items: start; flex-direction: column; gap: 6px; }
    .maps-result { grid-template-columns: auto 1fr; }
    .maps-result a { grid-column: 2; }
}

.restaurant-image {
    width: 100%;
    height: 180px;
    background: linear-gradient(135deg, #E5E7EB, #D1D5DB);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    font-size: 14px;
    position: relative;
}

.official-card {
    border: 2px solid var(--primary-color);
}

.official-card .restaurant-image {
    background: #fff;
    color: #b52b2b;
    font-weight: 700;
    font-size: 24px;
    letter-spacing: 2px;
}

.official-wordmark {
    display: grid;
    gap: 2px;
    text-align: center;
}

.official-wordmark small {
    color: #333;
    font-size: 11px;
    letter-spacing: 4px;
}

.official-badge {
    position: absolute;
    left: 12px;
    bottom: 12px;
    background: white;
    color: #b52b2b;
    border-radius: 999px;
    padding: 5px 9px;
    font-size: 11px;
    font-weight: 700;
}

.official-starbucks {
    border-color: #006241;
}

.official-starbucks .restaurant-image {
    color: #006241;
}

.official-starbucks .official-badge {
    color: #006241;
}

.official-dunkin {
    border-color: #f58220;
}

.official-dunkin .restaurant-image {
    color: #f58220;
}

.official-dunkin .official-wordmark small,
.official-dunkin .official-badge {
    color: #d4145a;
}

.restaurant-info {
    padding: 16px;
}

.restaurant-info h3 {
    font-size: 18px;
    margin-bottom: 4px;
}

.restaurant-info .cuisine {
    color: var(--text-light);
    font-size: 14px;
    margin-bottom: 12px;
}

.restaurant-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 14px;
}

.rating {
    color: #FBBF24;
    font-weight: 600;
}

.delivery-time {
    color: var(--text-light);
}

.delivery-fee {
    color: var(--text-light);
    font-size: 13px;
    margin-bottom: 12px;
}

.btn-restaurant {
    width: 100%;
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 10px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s;
}

.btn-restaurant:hover {
    background-color: var(--secondary-color);
}

/* Menu Grid */
.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.restaurant-note {
    color: var(--text-light);
    font-size: 14px;
    margin: -8px 0 24px;
}

.restaurant-note a {
    color: var(--primary-color);
    font-weight: 600;
}

.menu-categories { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.menu-category { background: white; border: 1px solid var(--border-color); border-radius: 999px; color: var(--text-dark); cursor: pointer; font: inherit; font-size: 13px; padding: 9px 14px; }
.menu-category.active, .menu-category:hover { background: var(--primary-color); border-color: var(--primary-color); color: white; }
.menu-category-section { margin-bottom: 30px; }
.menu-category-section > h3 { border-bottom: 2px solid var(--primary-color); color: var(--primary-color); font-size: 20px; margin: 0 0 16px; padding-bottom: 8px; }
.menu-category-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

.official-menu-action {
    border-top: 1px solid var(--border-color);
    margin: 8px 0 40px;
    padding: 24px 0 0;
    text-align: center;
}

.official-menu-action p {
    color: var(--text-light);
    font-size: 14px;
    margin-bottom: 14px;
}

.official-menu-action .btn-primary {
    display: inline-block;
    text-decoration: none;
}

.menu-item {
    background-color: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

.menu-item:hover {
    transform: translateY(-3px);
}

.menu-item-image {
    width: 100%;
    height: 150px;
    background: linear-gradient(135deg, #E5E7EB, #D1D5DB);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    font-size: 12px;
}

.menu-item-info {
    padding: 12px;
}

.menu-item-info h4 {
    font-size: 16px;
    margin-bottom: 4px;
}

.menu-item-desc {
    font-size: 13px;
    color: var(--text-light);
    margin-bottom: 8px;
}

.menu-item-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.menu-item-price {
    font-size: 16px;
    font-weight: bold;
    color: var(--primary-color);
}

.btn-add {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: background-color 0.3s;
}

.btn-add:hover {
    background-color: var(--secondary-color);
}

.customization-modal {
    background: white;
    border-radius: 12px;
    max-width: 480px;
    padding: 28px;
    position: relative;
    width: calc(100% - 32px);
}

.customization-modal h2 {
    margin-bottom: 24px;
}

.customization-group {
    border: 0;
    border-top: 1px solid var(--border-color);
    margin: 0;
    padding: 18px 0 8px;
}

.customization-group legend {
    font-size: 16px;
    font-weight: 700;
    padding: 0 0 10px;
}

.customization-option {
    align-items: center;
    display: flex;
    gap: 10px;
    padding: 8px 0;
}

.customization-option input {
    accent-color: var(--primary-color);
}

.customization-actions {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 20px;
}

.customization-actions .back-btn {
    margin-bottom: 0;
}

/* Buttons */
.btn-primary {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s;
}

.btn-primary:hover {
    background-color: var(--secondary-color);
}

.btn-primary.full-width {
    width: 100%;
    margin-top: 20px;
}

.back-btn {
    background-color: var(--light-color);
    border: 1px solid var(--border-color);
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    margin-bottom: 20px;
    transition: background-color 0.3s;
}

.back-btn:hover {
    background-color: var(--border-color);
}

/* Cart */
.cart-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background-color: white;
    border-radius: 8px;
    margin-bottom: 12px;
    border: 1px solid var(--border-color);
}

.cart-item-info h4 {
    margin-bottom: 4px;
}

.cart-item-info p {
    font-size: 14px;
    color: var(--text-light);
}

.cart-item-price {
    font-size: 16px;
    font-weight: bold;
    color: var(--primary-color);
    margin-right: 20px;
}

.quantity-control {
    display: flex;
    align-items: center;
    gap: 8px;
}

.qty-btn {
    background-color: var(--light-color);
    border: 1px solid var(--border-color);
    width: 30px;
    height: 30px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s;
}

.qty-btn:hover {
    background-color: var(--border-color);
}

.qty-display {
    min-width: 30px;
    text-align: center;
}

.btn-remove {
    background-color: #FEE2E2;
    color: var(--primary-color);
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: background-color 0.3s;
}

.btn-remove:hover {
    background-color: #FECACA;
}

.empty-message {
    text-align: center;
    padding: 40px;
    color: var(--text-light);
}

.cart-summary {
    background-color: white;
    padding: 24px;
    border-radius: 12px;
    margin-top: 24px;
    border: 1px solid var(--border-color);
}

.summary-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 16px;
}

.summary-row.total {
    border-bottom: none;
    font-size: 18px;
    font-weight: bold;
    color: var(--primary-color);
    padding: 16px 0 0 0;
}

/* Forms */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 14px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.order-summary {
    background-color: var(--light-color);
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
}

.order-summary h3 {
    margin-bottom: 16px;
}

.order-summary-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
}

/* Confirmation */
.confirmation-box {
    background-color: white;
    padding: 40px;
    border-radius: 12px;
    max-width: 500px;
    margin: 0 auto;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.success-icon {
    font-size: 64px;
    margin-bottom: 20px;
}

.confirmation-box h2 {
    color: var(--success-color);
    margin-bottom: 16px;
}

.confirmation-box p {
    color: var(--text-light);
    margin-bottom: 24px;
}

.order-details {
    background-color: var(--light-color);
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 24px;
    text-align: left;
}

.order-details p {
    margin-bottom: 12px;
    font-size: 14px;
}

/* Responsive */
@media (max-width: 768px) {
    .restaurants-grid {
        grid-template-columns: 1fr;
    }

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

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

    .nearby-card {
        align-items: start;
        grid-template-columns: auto 1fr;
    }

    .nearby-card a {
        grid-column: 2;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .hero h2 {
        font-size: 24px;
    }

    .hero p {
        font-size: 16px;
    }

    .cart-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .cart-item-price {
        margin-right: 0;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 12px;
    }

    .navbar-content {
        flex-direction: column;
        gap: 12px;
    }

    .logo {
        font-size: 24px;
    }

    .cart-btn {
        font-size: 14px;
        padding: 8px 16px;
    }
}