:root {
  --modern-primary: #ff5a36;
  --modern-primary-dark: #e94220;
  --modern-ink: #17212b;
  --modern-muted: #667085;
  --modern-surface: #ffffff;
  --modern-canvas: #f7f8f5;
  --modern-line: #e7e9e4;
  --modern-radius: 22px;
  --modern-shadow: 0 16px 45px rgba(23, 33, 43, .09);
}

html { scroll-behavior: smooth; }

body {
  color: var(--modern-ink);
  background: var(--modern-canvas);
  -webkit-font-smoothing: antialiased;
}

body.front-page { background: var(--modern-surface); }

/* Navigation */
#top-navigation {
  min-height: 76px;
  padding: 12px clamp(4px, 2vw, 26px);
  border-bottom: 1px solid rgba(231, 233, 228, .9);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 5px 24px rgba(23, 33, 43, .045);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

body.front-page #top-navigation {
  border-bottom: 1px solid rgba(231, 233, 228, .7);
}

#top-navigation .top-logo { max-height: 48px; }

ul.top-menu a,
.list-inline a {
  color: var(--modern-ink);
  font-weight: 650;
  letter-spacing: -.01em;
}

ul.top-menu a:hover,
.list-inline a:hover { color: var(--modern-primary) !important; }

ul.top-menu .dropdown-menu {
  padding: 10px;
  border: 1px solid var(--modern-line);
  border-radius: 16px;
  box-shadow: var(--modern-shadow);
}

ul.top-menu .dropdown-menu a { border-radius: 10px; }
ul.top-menu .dropdown-menu a:hover { background: #fff3ef; }

/* Homepage hero */
#main-search-banner,
.mobile-home-banner {
  min-height: 560px;
  height: auto;
  border: 0;
  overflow: hidden;
  background-image:
    linear-gradient(105deg, rgba(15, 24, 31, .86) 0%, rgba(15, 24, 31, .60) 46%, rgba(15, 24, 31, .18) 100%),
    url("../images/full-header.png");
  background-position: center;
  background-size: cover;
}

#main-search-banner::after {
  content: "";
  position: absolute;
  inset: auto -8% -42% auto;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: rgba(255, 90, 54, .2);
  filter: blur(3px);
}

#main-search-banner .banner-center {
  width: min(720px, 92vw);
  margin-right: auto;
  margin-left: auto;
  padding: 78px 0;
  position: relative;
  z-index: 1;
  text-align: center;
}

.home-hero-eyebrow {
  margin-bottom: 14px;
  color: #ffd2c8;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.home-hero-title {
  max-width: 690px;
  margin: 0 auto 18px;
  color: #fff;
  font-size: clamp(42px, 5.4vw, 72px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.045em;
}

.home-hero-copy {
  max-width: 610px;
  margin: 0 auto 28px;
  color: rgba(255, 255, 255, .82);
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.6;
}

.home-search-wrap {
  width: min(620px, 100%);
  margin-right: auto;
  margin-left: auto;
}

.home-search-wrap .form-control,
.home-search-wrap .form-control-text,
.home-search-wrap .el-input__wrapper {
  min-height: 64px;
  border: 0 !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .22) !important;
}

.home-search-wrap input { font-size: 16px !important; }

.home-trust-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 25px;
  color: rgba(255,255,255,.88);
  font-size: 13px;
  font-weight: 650;
}

.home-trust-row span { display: inline-flex; align-items: center; gap: 7px; }
.home-trust-row i { color: #ffd2c8; font-size: 18px; }

/* Content rhythm and section headings */
#vue-home-widgets > .container { padding-top: 34px; padding-bottom: 42px; }
.swiperOutsideContainer { padding: 0 !important; margin-bottom: 54px; }
.swiperOutsideContainer h3 {
  margin: 0;
  color: var(--modern-ink);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800 !important;
  letter-spacing: -.035em;
}

/* Cuisine chips */
.swiperCuisine .swiperSlide {
  min-height: 132px !important;
  padding: 14px 8px;
  border: 1px solid transparent;
  border-radius: 18px;
  transition: transform .22s ease, background .22s ease, border-color .22s ease;
}

.swiperCuisine .swiperSlide:hover {
  transform: translateY(-4px);
  border-color: var(--modern-line);
  background: #fff;
}

.swiperCuisine .swiperSlide img {
  width: 82px;
  height: 82px;
  border: 4px solid #fff;
  box-shadow: 0 8px 22px rgba(23,33,43,.13);
  object-fit: cover;
}

.swiperCuisine .el-links { color: var(--modern-ink) !important; font-weight: 700; }

/* Restaurant cards */
.swiperResto .swiperSlide,
.rounded-box {
  min-height: 270px !important;
  overflow: hidden;
  border: 1px solid var(--modern-line);
  border-radius: var(--modern-radius);
  background: #fff;
  box-shadow: 0 5px 18px rgba(23, 33, 43, .05);
  cursor: pointer;
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}

.swiperResto .swiperSlide:hover,
.rounded-box:hover {
  transform: translateY(-7px);
  border-color: transparent;
  box-shadow: var(--modern-shadow);
}

.swiperResto .swiperSlide img {
  min-height: 170px;
  max-height: 170px;
  border-radius: 0;
  object-fit: cover;
  transition: transform .45s ease;
}

.swiperResto .swiperSlide:hover img { transform: scale(1.035); }
.swiperResto .swiperSlide > .p-2 { padding: 16px !important; }
.swiperResto .font-weight-bold { font-size: 17px; color: var(--modern-ink); }
.swiperResto .font-weight-light { color: var(--modern-muted); font-size: 13px; }

.swiper-button-next .el-button,
.swiper-button-prev .el-button {
  width: 44px;
  height: 44px;
  border: 1px solid var(--modern-line);
  color: var(--modern-ink);
  box-shadow: 0 8px 20px rgba(23, 33, 43, .12);
}

.swiper-button-next .el-button:hover,
.swiper-button-prev .el-button:hover {
  border-color: var(--modern-primary);
  background: var(--modern-primary);
  color: #fff;
}

/* Buttons and forms */
.btn-green,
.btn-primary,
.el-button--primary {
  border-color: var(--modern-primary) !important;
  border-radius: 12px !important;
  background: var(--modern-primary) !important;
  box-shadow: 0 8px 20px rgba(255, 90, 54, .2);
}

.btn-green:hover,
.btn-primary:hover,
.el-button--primary:hover { background: var(--modern-primary-dark) !important; }

.btn-reserve-table {
  border: 1px solid var(--modern-primary);
  background: var(--modern-primary);
  color: #fff !important;
  font-weight: 750;
  letter-spacing: -.01em;
  box-shadow: 0 9px 22px rgba(255, 90, 54, .24);
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.btn-reserve-table:hover,
.btn-reserve-table:focus {
  transform: translateY(-2px);
  border-color: var(--modern-primary-dark);
  background: var(--modern-primary-dark);
  color: #fff !important;
  box-shadow: 0 12px 26px rgba(255, 90, 54, .3);
}

#section-booking { scroll-margin-top: 95px; }

.form-control-text,
.form-control-select {
  border: 1px solid var(--modern-line);
  border-radius: 12px;
  background: #fff;
}

/* App and partner panels */
.section-join-us { overflow: hidden; border-radius: 28px; box-shadow: var(--modern-shadow); }
.section-newmobileapp {
  background: linear-gradient(135deg, #f2f5ef 0%, #fff6f2 100%);
  border-top: 1px solid var(--modern-line);
  border-bottom: 1px solid var(--modern-line);
}
.section-newmobileapp h1 { color: var(--modern-ink); font-weight: 800; letter-spacing: -.04em; }
.section-newmobileapp h5 { color: var(--modern-primary); font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }

footer { background: #111a22; color: rgba(255,255,255,.72); }
footer a { color: rgba(255,255,255,.82) !important; }
footer a:hover { color: #fff !important; }

@media (max-width: 991px) {
  .mobile-home-banner { display: none; }
  #main-search-banner { min-height: 510px; }
  #main-search-banner .banner-center { margin: auto; padding: 60px 20px; }
  .home-hero-title, .home-hero-copy { text-align: center !important; }
}

@media (max-width: 767px) {
  #top-navigation { min-height: 66px; padding: 8px 0; }
  #main-search-banner { min-height: 430px; padding: 0 8px; background-position: 58% center; }
  #main-search-banner .banner-center { padding: 46px 12px; }
  .home-hero-title { font-size: 38px; }
  .home-hero-copy { font-size: 15px; }
  .home-trust-row { gap: 10px 16px; }
  .home-trust-row span:nth-child(3) { display: none; }
  #vue-home-widgets > .container { padding-top: 18px; }
  .swiperOutsideContainer { margin-bottom: 38px; }
  .swiperOutsideContainer h3 { font-size: 24px; }
  .swiperResto .swiperSlide { border-radius: 18px; }
}

/* Restaurant discovery and profile */
.favorite-restaurants-home { padding-top: 44px; }
.favorite-restaurants-home .section-eyebrow { margin-bottom: 4px; color: var(--ui-primary); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.favorite-view-all { color: var(--ui-primary); font-weight: 750; }
.favorite-restaurant-card { overflow: hidden; border: 1px solid var(--ui-line); border-radius: 20px; background: #fff; color: var(--ui-ink); box-shadow: var(--ui-shadow-sm); }
.favorite-restaurant-card:hover { transform: translateY(-5px); color: var(--ui-ink); box-shadow: var(--ui-shadow); }
.favorite-image-wrap { position: relative; height: 158px; overflow: hidden; background: #f1f3ef; }
.favorite-image-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.favorite-restaurant-card:hover img { transform: scale(1.04); }
.favorite-heart { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.94); color: var(--ui-primary); box-shadow: 0 6px 18px rgba(24,33,43,.16); }
.favorite-card-body { padding: 16px; }
.favorite-card-body h5 { font-size: 17px; }
.favorite-meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 13px; color: #475467; font-size: 12px; font-weight: 700; }
.favorite-meta .zmdi-star { color: #f4b400; }
.favorite-restaurants-loading { height: 250px; margin: 40px 0; border-radius: 22px; background: linear-gradient(100deg,#f0f2ef 30%,#fafbfa 50%,#f0f2ef 70%); background-size: 300% 100%; animation: favorite-loading 1.4s infinite; }
@keyframes favorite-loading { to { background-position: -150% 0; } }

.merchant-top-header { padding: 18px 0 28px; background: linear-gradient(180deg,#f8f9f7 0,#fff 100%); }
.merchant-profile-hero { overflow: hidden; min-height: 285px; border: 1px solid var(--ui-line); border-radius: 26px; background: #fff; box-shadow: var(--ui-shadow); }
.restaurant-trust-badge { display:inline-flex; align-items:center; gap:5px; max-width:100%; padding:4px 9px; border-radius:999px; background:#e9f8f0; color:#087443!important; border:1px solid #b9e8cf; font-size:12px; font-weight:800; line-height:1.2; vertical-align:middle; white-space:nowrap; }
.restaurant-trust-badge i { font-size:15px; color:#11a363; }
.restaurant-trust-badge--compact { padding:3px 7px; font-size:11px; }
body.dark-mode .restaurant-trust-badge, .dark .restaurant-trust-badge { background:#123b2b; color:#b8f5d5!important; border-color:#277457; }
.merchant-profile-info { display: flex; align-items: center; }
.merchant-profile-info > .d-flex { width: 100%; }
.merchant-profile-logo { width: 132px !important; height: 132px !important; min-height: 132px !important; padding: 6px; border: 1px solid var(--ui-line) !important; border-radius: 22px !important; background: #fff; object-fit: cover; box-shadow: var(--ui-shadow-sm); }
.merchant-profile-info h4 { margin: 5px 0 8px; font-size: clamp(27px,3vw,38px); line-height: 1.08; }
.merchant-profile-info ul { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; color: var(--ui-muted); }
.merchant-profile-info ul li { list-style: none; }
.merchant-profile-info .info-items-dot-separator { width: 4px; height: 4px; margin: 0 4px; border-radius: 50%; background: #c4c9c1; }
.merchant-profile-cover { min-height: 285px; overflow: hidden; background: linear-gradient(135deg,#f7d9cf,#f4ede6); }
.merchant-cover-image, .merchant-cover-image .el-image__inner { width: 100%; height: 100%; min-height: 285px; object-fit: cover; }
.merchant-profile-cover .fav-wrap { top: 16px; right: 16px; padding: 7px; border-radius: 50% !important; background: rgba(255,255,255,.94); box-shadow: 0 8px 24px rgba(24,33,43,.18); }
.merchant-profile-info .btn-reserve-table { min-height: 46px; display: inline-flex; align-items: center; }

@media (max-width: 991px) {
  .favorite-restaurants-home { padding-top: 28px; }
  .merchant-profile-hero { border-radius: 20px; }
}
@media (max-width: 767px) {
  .favorite-restaurant-grid > div:nth-child(n+3) { display: none; }
  .favorite-image-wrap { height: 145px; }
  .favorite-view-all { font-size: 13px; }
  .mobile-merchant-details { overflow: hidden; border-radius: 0 0 22px 22px; box-shadow: var(--ui-shadow-sm); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* 2026 robust customer experience */
:root {
  --ui-primary: #f4512c;
  --ui-primary-hover: #d93d1b;
  --ui-ink: #18212b;
  --ui-muted: #667085;
  --ui-canvas: #f6f7f4;
  --ui-surface: #fff;
  --ui-soft: #fff3ef;
  --ui-line: #e5e8e2;
  --ui-success: #16803c;
  --ui-radius-sm: 12px;
  --ui-radius: 18px;
  --ui-radius-lg: 28px;
  --ui-shadow-sm: 0 5px 16px rgba(24,33,43,.06);
  --ui-shadow: 0 18px 50px rgba(24,33,43,.11);
}

body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

.container { width: min(100% - 32px, 1220px); max-width: 1220px; }
a, button, input, select, textarea { transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(244,81,44,.26) !important;
  outline-offset: 2px;
}

#top-navigation { position: relative; z-index: 100; }
#top-navigation .top-menu { gap: 4px; }
#top-navigation .top-menu > li > a { display: inline-flex; align-items: center; min-height: 42px; padding: 9px 13px; border-radius: 11px; }
#top-navigation .top-menu > li > a:hover { background: var(--ui-soft); }
#top-navigation .rounded-button-icon { border: 1px solid var(--ui-line); background: #fff; box-shadow: var(--ui-shadow-sm); }

.home-value-strip { position: relative; z-index: 4; margin: -34px auto 28px; }
.home-value-strip .container { overflow: hidden; border: 1px solid rgba(229,232,226,.92); border-radius: 22px; background: rgba(255,255,255,.97); box-shadow: var(--ui-shadow); }
.home-value-item { display: flex; align-items: center; gap: 14px; min-height: 108px; padding: 22px 26px; }
.home-value-item + .home-value-item { border-left: 1px solid var(--ui-line); }
.home-value-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 48px; width: 48px; height: 48px; border-radius: 15px; color: var(--ui-primary); background: var(--ui-soft); font-size: 23px; }
.home-value-item strong, .home-value-item small { display: block; }
.home-value-item strong { margin-bottom: 3px; color: var(--ui-ink); font-size: 16px; }
.home-value-item small { color: var(--ui-muted); font-size: 12.5px; line-height: 1.45; }
.home-discovery { position: relative; }

/* Shared surfaces */
.card, .list-group, .modal-content, .el-dialog, .el-drawer, .account-menu,
.box-grey, .box-white, .payment-option, .address-box {
  border-color: var(--ui-line) !important;
  border-radius: var(--ui-radius) !important;
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-sm);
}
.card-header, .card-footer, .modal-header, .modal-footer { border-color: var(--ui-line) !important; background: transparent; }
.card-body { padding: clamp(18px, 2.4vw, 28px); }
.modal-content, .el-dialog { overflow: hidden; box-shadow: 0 28px 80px rgba(24,33,43,.2) !important; }
.modal-backdrop, .v-modal { backdrop-filter: blur(4px); }

h1, h2, h3, h4, h5, h6 { color: var(--ui-ink); font-weight: 760; letter-spacing: -.025em; }
.text-muted, .text-grey, .font-weight-light { color: var(--ui-muted) !important; }

.form-control, .form-control-text, .form-control-select, .custom-select,
.el-input__inner, .el-textarea__inner, .el-input__wrapper {
  min-height: 48px;
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-radius-sm) !important;
  background: #fff !important;
  box-shadow: none !important;
}
.form-control:focus, .form-control-text:focus, .form-control-select:focus,
.el-input__inner:focus, .el-textarea__inner:focus, .el-input__wrapper.is-focus {
  border-color: var(--ui-primary) !important;
  box-shadow: 0 0 0 4px rgba(244,81,44,.12) !important;
}
label { color: #344054; font-size: 13px; font-weight: 650; }

.btn, .el-button { min-height: 44px; border-radius: var(--ui-radius-sm) !important; font-weight: 700; }
.btn-green, .btn-primary, .el-button--primary { background: linear-gradient(135deg, #ff633f, var(--ui-primary)) !important; box-shadow: 0 9px 24px rgba(244,81,44,.22); }
.btn-green:hover, .btn-primary:hover, .el-button--primary:hover { transform: translateY(-1px); background: var(--ui-primary-hover) !important; box-shadow: 0 12px 28px rgba(244,81,44,.28); }
.btn-outline-primary { border-color: rgba(244,81,44,.4); color: var(--ui-primary); }
.btn-outline-primary:hover { border-color: var(--ui-primary); background: var(--ui-soft); color: var(--ui-primary-hover); }

/* Restaurant discovery and menus */
.restaurant-list .rounded-box, .merchant-list .rounded-box, .food-item, .item-card,
.action-restaurants .rounded-box { overflow: hidden; border: 1px solid var(--ui-line); border-radius: var(--ui-radius) !important; background: #fff; box-shadow: var(--ui-shadow-sm); }
.restaurant-list .rounded-box:hover, .merchant-list .rounded-box:hover, .food-item:hover, .item-card:hover { transform: translateY(-4px); box-shadow: var(--ui-shadow); }
.merchant-top-header { background: #fff; }
.merchant-top-header .fav-wrap, .merchant-top-header .rounded { border-radius: var(--ui-radius) !important; }
.menu-category, .category-nav { scrollbar-width: thin; scrollbar-color: #d3d7d0 transparent; }
.badge, .el-tag { border-radius: 999px !important; font-weight: 700; }

/* Checkout and account pages */
.action-checkout body, .action-myorders body { background: var(--ui-canvas); }
.checkout-section, .order-summary, .cart-summary { border: 1px solid var(--ui-line); border-radius: var(--ui-radius); background: #fff; box-shadow: var(--ui-shadow-sm); }
.account-sidebar a, .list-group-item { border-color: var(--ui-line); color: var(--ui-ink); }
.account-sidebar a:hover, .list-group-item:hover { background: var(--ui-soft); color: var(--ui-primary); }
.table { overflow: hidden; border-radius: var(--ui-radius-sm); background: #fff; }
.table thead th { border-top: 0; border-bottom: 1px solid var(--ui-line); background: #f8f9f7; color: #475467; font-size: 12px; letter-spacing: .035em; text-transform: uppercase; }
.table td { border-color: var(--ui-line); vertical-align: middle; }
.alert { border: 0; border-radius: var(--ui-radius-sm); }

/* Footer */
footer { margin-top: 0; padding: 34px 0; background: radial-gradient(circle at 85% 10%, #263848 0, #16212b 38%, #101820 100%); }
footer .container { position: relative; }
footer p { color: rgba(255,255,255,.68); }
footer .app-store-wrap img { max-height: 42px; opacity: .94; }

@media (max-width: 991px) {
  .container { width: min(100% - 24px, 1220px); }
  .home-value-strip { margin-top: -24px; }
  .home-value-strip .container { width: min(100% - 24px, 760px); }
  .home-value-item { min-height: 92px; }
  .home-value-item + .home-value-item { border-top: 1px solid var(--ui-line); border-left: 0; }
  .card-body { padding: 20px; }
}

@media (max-width: 767px) {
  body { font-size: 14px; }
  .container { width: min(100% - 20px, 1220px); }
  .home-value-strip { margin: -18px auto 18px; }
  .home-value-strip .container { width: min(100% - 20px, 560px); border-radius: 18px; }
  .home-value-item { min-height: 82px; padding: 15px 16px; }
  .home-value-icon { flex-basis: 42px; width: 42px; height: 42px; border-radius: 13px; font-size: 20px; }
  .home-value-item small { font-size: 12px; }
  .modal-dialog { margin: 10px; }
  .modal-content, .el-dialog { width: auto !important; border-radius: 18px !important; }
  .btn, .el-button { min-height: 46px; }
  footer { padding: 28px 0; }
}

/* 2026 accessible storefront refresh
   Keep this section last so every customer-facing screen shares the same
   readable palette, interaction states and responsive component treatment. */
:root {
  --ui-primary: #d13d1b;
  --ui-primary-hover: #b83214;
  --ui-primary-soft: #fff0eb;
  --ui-ink: #101828;
  --ui-muted: #475467;
  --ui-subtle: #667085;
  --ui-canvas: #f5f7f4;
  --ui-surface: #ffffff;
  --ui-line: #d9e0d8;
  --ui-focus: #246bfd;
  --ui-success: #176b3a;
  --ui-warning: #805300;
  --ui-danger: #b42318;
  --ui-shadow-sm: 0 8px 24px rgba(16, 24, 40, .07);
  --ui-shadow: 0 18px 50px rgba(16, 24, 40, .13);
  --ui-radius-sm: 14px;
  --ui-radius: 22px;
  --ui-radius-lg: 30px;
}

html { color-scheme: light; background: var(--ui-canvas); }
body {
  min-width: 320px;
  background: var(--ui-canvas);
  color: var(--ui-ink);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Override legacy 12px typography without disturbing icon fonts. */
p, .card, table, .cart-summary, .list-group-item, .dropdown-menu {
  color: var(--ui-ink);
  font-size: 14px;
  line-height: 1.55;
}
p { margin-bottom: 1rem; }
small, .small { font-size: 12.5px; line-height: 1.45; }
h1, h2, h3, h4, h5, h6, .font-weight-bold, strong {
  color: var(--ui-ink);
  letter-spacing: -.015em;
}
h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.65rem, 3.6vw, 2.5rem); }
h3 { font-size: clamp(1.35rem, 2.8vw, 2rem); }
h4 { font-size: clamp(1.18rem, 2.2vw, 1.55rem); }
h5 { font-size: 1.1rem; }

a { color: #b73717; text-underline-offset: 3px; }
a:hover, a:focus { color: #86280f; }
.text-muted, .text-grey, .text-gray, .font-weight-light, .light, .color-grey,
.merchant-address, .item-description, .restaurant-address {
  color: var(--ui-muted) !important;
  opacity: 1 !important;
}
.text-light { color: #f8fafc !important; }
.text-success { color: var(--ui-success) !important; }
.text-warning { color: var(--ui-warning) !important; }
.text-danger { color: var(--ui-danger) !important; }

::selection { background: #ffd8cc; color: #551405; }
::placeholder { color: var(--ui-subtle) !important; opacity: 1 !important; }
:-ms-input-placeholder { color: var(--ui-subtle) !important; }

/* Consistent focus visibility for keyboard and assistive-technology users. */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
.el-input__inner:focus-visible {
  outline: 3px solid rgba(36, 107, 253, .33) !important;
  outline-offset: 3px;
}

/* Ensure text inherits the correct foreground from every common surface. */
.bg-white, .card, .modal-content, .el-dialog, .el-drawer, .el-popover,
.el-message-box, .el-select-dropdown, .el-dropdown-menu, .dropdown-menu,
.popover, .list-group-item, .login-container, .section-filter, .sticky-cart,
.checkout-section, .order-summary, .cart-summary, .transaction-section,
.promo-section, .address-section, .payment-option, .rounded-box {
  background-color: var(--ui-surface);
  color: var(--ui-ink);
}
.bg-dark, .bg-primary, .bg-danger, .bg-success, .bg-secondary,
.text-on-image, .text-on-media {
  color: #fff !important;
}
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark h6,
.bg-primary h1, .bg-primary h2, .bg-primary h3, .bg-primary h4,
.bg-danger h1, .bg-danger h2, .bg-success h1, .bg-success h2 {
  color: #fff !important;
}

/* Header and navigation */
#top-navigation {
  min-height: 76px;
  border-bottom: 1px solid rgba(217, 224, 216, .9);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 5px 20px rgba(16, 24, 40, .05);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
}
#top-navigation a:not(.btn), #top-navigation .nav-link { color: var(--ui-ink); font-weight: 650; }
#top-navigation a:not(.btn):hover, #top-navigation .nav-link:hover { color: var(--ui-primary); }
#top-navigation .badge { box-shadow: 0 0 0 2px #fff; }
.navbar-toggler, .mobile-menu-button {
  border: 1px solid var(--ui-line) !important;
  border-radius: 13px !important;
  background: #fff !important;
  color: var(--ui-ink) !important;
}

/* Hero and any copy placed over photography */
#main-search-banner, .mobile-home-banner, .section-join-us, .section-promo,
.hero-banner, .banner-wrap, .layer-content {
  color: #fff;
}
#main-search-banner h1, #main-search-banner h2, #main-search-banner h3,
#main-search-banner p, .mobile-home-banner h1, .mobile-home-banner h2,
.mobile-home-banner p, .section-join-us h1, .section-join-us h2,
.section-join-us p, .section-promo h1, .section-promo h2, .section-promo p,
.hero-banner h1, .hero-banner h2, .hero-banner p, .banner-wrap h1,
.banner-wrap h2, .banner-wrap p, .layer-content h1, .layer-content h2,
.layer-content h3, .layer-content p {
  color: #fff !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .52);
}
#main-search-banner .search-input-wrap, .mobile-home-banner .search-input-wrap {
  background: rgba(255, 255, 255, .98);
  color: var(--ui-ink);
  box-shadow: 0 18px 45px rgba(0, 0, 0, .24);
}

/* Buttons: every state maintains a legible label. */
.btn, .el-button {
  min-height: 46px;
  border-radius: 13px;
  font-size: 14px;
  font-weight: 750;
  letter-spacing: .005em;
  box-shadow: none;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease,
              border-color .18s ease, color .18s ease;
}
.btn:hover, .el-button:hover { transform: translateY(-1px); }
.btn-primary, .btn-green, .btn-orange, .btn-danger, .btn-success,
.el-button--primary, .el-button--success, .el-button--danger {
  color: #fff !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .18);
}
.btn-primary, .btn-orange, .el-button--primary {
  border-color: var(--ui-primary) !important;
  background: var(--ui-primary) !important;
}
.btn-primary:hover, .btn-orange:hover, .el-button--primary:hover {
  border-color: var(--ui-primary-hover) !important;
  background: var(--ui-primary-hover) !important;
  box-shadow: 0 9px 22px rgba(217, 67, 32, .25);
}
.btn-light, .btn-white, .el-button--default {
  border-color: var(--ui-line) !important;
  background: #fff !important;
  color: var(--ui-ink) !important;
}
.btn-light:hover, .btn-white:hover, .el-button--default:hover {
  border-color: #c1c9bf !important;
  background: #f8faf8 !important;
  color: var(--ui-primary) !important;
}
.btn:disabled, .btn.disabled, .el-button.is-disabled {
  opacity: .68;
  color: #fff !important;
  cursor: not-allowed;
  transform: none;
}
.btn-light:disabled, .btn-white:disabled, .el-button--default.is-disabled {
  color: #475467 !important;
}

/* Forms */
label, .form-label, .el-form-item__label { color: #344054 !important; font-weight: 650; }
.form-control, .custom-select, .el-input__inner, .el-textarea__inner,
.select2-container .select2-selection, input[type="text"], input[type="email"],
input[type="password"], input[type="tel"], input[type="number"], textarea, select {
  min-height: 48px;
  border: 1px solid #cfd8ce;
  border-radius: 13px;
  background: #fff;
  color: var(--ui-ink);
  font-size: 15px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .03);
}
.form-control:hover, .custom-select:hover, .el-input__inner:hover,
.el-textarea__inner:hover { border-color: #aeb9ac; }
.form-control:focus, .custom-select:focus, .el-input__inner:focus,
.el-textarea__inner:focus, input:focus, textarea:focus, select:focus {
  border-color: var(--ui-focus) !important;
  color: var(--ui-ink) !important;
  box-shadow: 0 0 0 4px rgba(36, 107, 253, .12) !important;
}
.form-control:disabled, input:disabled, select:disabled, textarea:disabled {
  background: #eef2ed !important;
  color: #475467 !important;
  opacity: 1;
}
.invalid-feedback, .error, .help-block-error, .el-form-item__error {
  color: var(--ui-danger) !important;
  font-weight: 650;
}

/* Authentication screens */
.login-container {
  width: min(100%, 520px) !important;
  margin: clamp(34px, 7vw, 76px) auto !important;
  padding: clamp(26px, 5vw, 46px) !important;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-lg);
  background: #fff;
  box-shadow: var(--ui-shadow);
}
.login-container > h5:first-child {
  margin-bottom: 28px !important;
  color: var(--ui-ink);
  font-size: clamp(1.65rem, 4vw, 2.15rem);
  font-weight: 800;
}
.auth-heading { margin-bottom: 30px !important; }
.auth-heading-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 15px;
  border-radius: 20px;
  background: var(--ui-primary-soft);
  color: var(--ui-primary);
  font-size: 34px;
}
.auth-heading h1 {
  margin: 0 0 7px;
  color: var(--ui-ink);
  font-size: clamp(1.65rem, 4vw, 2.15rem);
  font-weight: 850;
  line-height: 1.2;
}
.auth-heading p { margin: 0; color: var(--ui-muted); font-size: 14px; }
.login-container .forms-center { width: 100%; }
.login-container .btn { width: 100%; min-height: 50px; }
.login-container .divider { color: var(--ui-muted); }

/* Discovery, restaurant menu and checkout surfaces */
.section-filter, .sticky-cart, .checkout-section, .order-summary, .cart-summary,
.transaction-section, .promo-section, .address-section, .payment-option {
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow-sm);
}
.section-filter { padding: 20px; }
.section-filter h4, .section-filter h5, .section-filter a { color: var(--ui-ink); }
.section-filter a:hover { color: var(--ui-primary); }
.list-item-rows, .food-item, .item-card {
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-sm);
  background: #fff;
  color: var(--ui-ink);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.list-item-rows:hover, .food-item:hover, .item-card:hover {
  border-color: #c3cbc1;
  transform: translateY(-2px);
  box-shadow: var(--ui-shadow-sm);
}
.menu-category a, .category-nav a { color: var(--ui-muted) !important; font-weight: 700; }
.menu-category a:hover, .menu-category a.active,
.category-nav a:hover, .category-nav a.active {
  border-radius: 999px;
  background: var(--ui-primary-soft);
  color: var(--ui-primary) !important;
}
.table { color: var(--ui-ink); }
.table thead th { background: #eef2ed; color: #344054; font-weight: 750; }
.table tbody td, .table tbody th { color: var(--ui-ink); }

/* Popups, status messages and cookie consent */
.modal-header, .el-dialog__header, .el-message-box__header {
  border-bottom: 1px solid var(--ui-line);
  color: var(--ui-ink);
}
.modal-title, .el-dialog__title, .el-message-box__title { color: var(--ui-ink) !important; }
.modal-body, .el-dialog__body, .el-message-box__content,
.el-dropdown-menu__item, .el-select-dropdown__item { color: var(--ui-ink) !important; }
.el-dropdown-menu__item:hover, .el-select-dropdown__item.hover {
  background: var(--ui-primary-soft) !important;
  color: var(--ui-primary) !important;
}
.alert-success { background: #e8f5ec; color: #14532d; }
.alert-warning { background: #fff4d6; color: #684100; }
.alert-danger { background: #ffebe8; color: #8f1d16; }
.alert-info { background: #eaf2ff; color: #19488e; }
.alert a { color: inherit; font-weight: 800; text-decoration: underline; }
.cookie-consent .el-notification,
.cookie-consent.el-notification, .el-notification.cookie-consent {
  width: min(430px, calc(100vw - 24px)) !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 18px !important;
  background: #fff !important;
  color: var(--ui-ink) !important;
  box-shadow: 0 20px 55px rgba(16, 24, 40, .2) !important;
}
.cookie-consent .el-notification__title,
.cookie-consent .el-notification__content,
.cookie-consent .el-notification__content p {
  color: var(--ui-ink) !important;
  opacity: 1 !important;
}
.cookie-consent a { color: #a83114 !important; font-weight: 800; text-decoration: underline; }

/* Footer remains readable on its dark visual treatment. */
footer, footer h1, footer h2, footer h3, footer h4, footer h5, footer h6,
footer strong, footer label, footer li, footer a { color: #fff !important; }
footer p, footer small, footer .text-muted { color: rgba(255, 255, 255, .78) !important; }
footer a:hover, footer a:focus { color: #ffd0c3 !important; }

@media (max-width: 991px) {
  #top-navigation { min-height: 68px; }
  .section-filter { padding: 16px; }
  .sticky-cart { position: static !important; }
}

@media (max-width: 767px) {
  body { font-size: 14px; }
  .login-container {
    margin: 22px auto 34px !important;
    padding: 24px 18px !important;
    border-radius: 22px;
  }
  .card-body, .modal-body, .el-dialog__body { padding: 18px !important; }
  .btn, .el-button { min-height: 48px; }
  .table-responsive { border-radius: var(--ui-radius-sm); box-shadow: inset 0 0 0 1px var(--ui-line); }
  .cookie-consent .el-notification,
  .cookie-consent.el-notification, .el-notification.cookie-consent {
    right: 12px !important;
    left: 12px !important;
    bottom: 12px !important;
    width: auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* 404Eats customer experience v4: clearer, faster and easier on every screen */
body {
  min-width: 320px;
  line-height: 1.6;
}

#main-content {
  min-height: 62vh;
  outline: none;
}

.kmrs-skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 10050;
  padding: 11px 16px;
  border-radius: 12px;
  background: #fff;
  color: var(--ui-ink) !important;
  font-weight: 800;
  box-shadow: var(--ui-shadow);
  transform: translateY(-150%);
  transition: transform .18s ease;
}

.kmrs-skip-link:focus { transform: translateY(0); }

#top-navigation {
  position: relative;
  z-index: 1000;
}

/* Header address and delivery dialogs are rendered inside #top-navigation.
   When Bootstrap opens one, its backdrop is appended to <body>. Keeping the
   header as a z-index stacking context traps the dialog underneath that
   backdrop and makes the page appear frozen. Release that stacking context
   only while a modal is open, and give the nested fixed modal a true viewport
   height so its centered panel cannot be clipped to the header. */
body.modal-open #top-navigation {
  z-index: auto !important;
}

body.modal-open #top-navigation .modal.show {
  height: 100vh !important;
  min-height: 100vh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body.modal-open #top-navigation .modal.show .modal-dialog-centered {
  min-height: calc(100vh - 3.5rem) !important;
}

#top-navigation .btn,
#top-navigation [role="button"],
#top-navigation .dropdown-toggle {
  min-width: 42px;
  min-height: 42px;
}

.page-content {
  min-height: 55vh;
  padding-bottom: clamp(32px, 5vw, 70px);
}

.container { max-width: 1240px; }

h1, h2, h3, h4, h5, h6,
.card-title, .modal-title {
  color: var(--ui-ink);
  letter-spacing: -.025em;
}

p, li, label, .form-text, .text-muted, .text-grey {
  text-wrap: pretty;
}

.card, .rounded-box, .section-filter, .sticky-cart,
.checkout-section, .order-summary, .cart-summary,
.transaction-section, .promo-section, .address-section,
.payment-option, .list-group-item {
  background: #fff;
  color: var(--ui-ink);
}

.card-header, .card-footer {
  border-color: var(--ui-line);
  background: #fff;
}

.card-header {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.btn, .el-button, button, [role="button"] {
  touch-action: manipulation;
}

.btn-primary, .btn-green, .el-button--primary {
  color: #fff !important;
  font-weight: 780;
}

.btn-light, .btn-white, .el-button--default {
  border-color: var(--ui-line) !important;
  background: #fff !important;
  color: var(--ui-ink) !important;
}

input::placeholder, textarea::placeholder,
.el-input__inner::placeholder { color: #737f8e !important; opacity: 1; }

input[type="checkbox"], input[type="radio"] { accent-color: var(--ui-primary); }

.restaurant-list .card, .merchant-card, .food-item, .item-card,
.swiperResto .swiperSlide {
  isolation: isolate;
}

.restaurant-list img, .merchant-card img, .food-item img, .item-card img {
  object-fit: cover;
}

.price, .amount, .order-total, .cart-total {
  color: var(--ui-ink) !important;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table tbody tr:last-child td { border-bottom: 0; }

.pagination { gap: 4px; }
.pagination .page-link {
  display: grid;
  min-width: 40px;
  min-height: 40px;
  place-items: center;
  border-color: var(--ui-line);
  color: var(--ui-ink);
}

.pagination .page-item.active .page-link {
  border-color: var(--ui-primary);
  background: var(--ui-primary);
  color: #fff;
}

.empty-state, .no-results, .no-data, .el-empty {
  padding: clamp(32px, 7vw, 72px) 22px !important;
  text-align: center;
  color: var(--ui-muted) !important;
}

.skeleton-placeholder, .el-skeleton__item {
  background: linear-gradient(90deg, #edf1ec 25%, #fafbf9 42%, #edf1ec 60%);
  background-size: 300% 100%;
  animation: kmrs-front-shimmer 1.45s ease-in-out infinite;
}

@keyframes kmrs-front-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

.bg-dark .text-muted, .bg-dark .text-grey,
footer .text-muted, footer .text-grey,
.hero .text-muted, #main-search-banner .text-muted {
  color: rgba(255, 255, 255, .78) !important;
}

@media (max-width: 767px) {
  .page-content { padding-bottom: 36px; }
  .container, .container-fluid { padding-right: 15px; padding-left: 15px; }
  .card-header { align-items: flex-start; flex-direction: column; }
  .card-header .btn { width: 100%; }
  .modal-dialog { margin: 10px; }
  .modal-content { max-height: calc(100vh - 20px); }
  .modal-body { overflow-y: auto; }
  .sticky-cart .btn, .checkout-section .btn, .order-summary .btn { min-height: 50px; }
}

/* Modern restaurant storefront */
.action-menu { background: #f5f7f4; }
.action-menu .merchant-top-header {
  padding: 22px 0 34px;
  background:
    radial-gradient(circle at 92% 0, rgba(244,81,44,.09), transparent 30%),
    linear-gradient(180deg, #fff 0, #f7f8f5 100%);
}
.action-menu .merchant-top-header .el-breadcrumb { font-size: 12px; }
.action-menu .merchant-profile-hero {
  min-height: 330px;
  border: 1px solid rgba(224,228,221,.95);
  border-radius: 30px;
  box-shadow: 0 24px 70px rgba(24,33,43,.12);
}
.action-menu .merchant-profile-info { position: relative; z-index: 3; background: #fff; }
.action-menu .merchant-profile-copy { min-width: 0; flex: 1 1 auto; }
.action-menu .merchant-profile-logo {
  flex: 0 0 112px;
  width: 112px !important;
  min-width: 112px !important;
  height: 112px !important;
  min-height: 112px !important;
  padding: 8px;
  border-radius: 24px !important;
}
.action-menu .merchant-profile-info h4 {
  max-width: 440px;
  margin: 7px 0 10px;
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 850;
  letter-spacing: -.045em;
}
.action-menu .merchant-profile-info a { color: inherit; }
.action-menu .merchant-profile-info .zmdi-star { color: #f4a900; }
.action-menu .merchant-profile-cover {
  min-height: 330px;
  isolation: isolate;
  background: linear-gradient(135deg, #ffe5dc, #fff2d8);
}
.action-menu .merchant-cover-backdrop,
.action-menu .merchant-cover-scrim,
.action-menu .merchant-cover-fallback {
  position: absolute;
  inset: 0;
}
.action-menu .merchant-cover-backdrop,
.action-menu .merchant-cover-backdrop .el-image__inner {
  width: 100%;
  height: 100%;
}
.action-menu .merchant-cover-backdrop {
  z-index: 0;
  transform: scale(1.08);
  filter: blur(18px) saturate(.85);
  opacity: .38;
}
.action-menu .merchant-cover-scrim {
  z-index: 1;
  background: linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,255,255,.3));
}
.action-menu .merchant-cover-image {
  position: absolute;
  z-index: 2;
  inset: 26px;
  width: calc(100% - 52px) !important;
  height: calc(100% - 52px) !important;
  min-height: 0 !important;
}
.action-menu .merchant-cover-image .el-image__inner {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  filter: drop-shadow(0 14px 24px rgba(24,33,43,.15));
}
.action-menu .merchant-cover-fallback { z-index: 1; background: radial-gradient(circle at 55% 40%, #fff 0, #fff5eb 45%, #ffe7df 100%); }
.action-menu .merchant-cover-fallback .merchant-cover-image { inset: 48px; width: calc(100% - 96px) !important; height: calc(100% - 96px) !important; }

.restaurant-availability {
  padding: 18px 0;
  border-top: 1px solid #f3d8c7;
  border-bottom: 1px solid #f3d8c7;
  background: linear-gradient(90deg, #fff8ec, #fff3ef);
}
.restaurant-availability-card {
  align-items: center;
  justify-content: flex-start !important;
  gap: 18px;
  min-height: 86px;
}
.restaurant-availability-icon {
  display: grid;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 17px;
  background: #fff;
  color: var(--ui-primary);
  font-size: 25px;
  box-shadow: var(--ui-shadow-sm);
}
.restaurant-availability-copy {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 24px;
}
.restaurant-availability-copy h4 { margin: 0 0 3px; font-size: 20px; }
.restaurant-availability-copy p { color: #67564e; }
.restaurant-availability-copy template { display: contents; }
.restaurant-schedule-button {
  grid-column: 2;
  grid-row: 1 / span 2;
  min-width: 150px;
  border: 1px solid rgba(244,81,44,.28) !important;
  background: #fff;
  color: var(--ui-primary) !important;
  font-weight: 800;
}
.restaurant-schedule-button:hover { transform: translateY(-1px); border-color: var(--ui-primary) !important; background: var(--ui-primary) !important; color: #fff !important; }

.restaurant-menu-section { padding: 36px 0 60px; background: #f5f7f4; }
.restaurant-menu-container > .row { margin-right: -10px; margin-left: -10px; }
.restaurant-menu-container > .row > [class*="col-"] { padding-right: 10px; padding-left: 10px; }
.restaurant-section-eyebrow {
  margin-bottom: 3px;
  color: var(--ui-primary);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.restaurant-menu-heading { margin-bottom: 14px !important; font-size: 25px; }
.restaurant-menu-section .menu-left { border-right: 0; }
.restaurant-menu-section #sticky-sidebar {
  padding: 20px 16px;
  border: 1px solid var(--ui-line);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--ui-shadow-sm);
}
.restaurant-menu-section .menu-category a {
  position: relative;
  margin: 2px 0;
  padding: 9px 11px;
  border-radius: 11px;
  color: #596573 !important;
  font-size: 13px;
  font-weight: 700;
}
.restaurant-menu-section .menu-category a:hover,
.restaurant-menu-section .menu-category a.active {
  background: var(--ui-primary-soft);
  color: var(--ui-primary) !important;
}
.restaurant-menu-section .menu-category li a.active::after,
.restaurant-menu-section .menu-category li.active a::after { display: none; }
.restaurant-menu-search {
  position: sticky;
  z-index: 8;
  top: 12px;
  padding: 8px;
  border: 1px solid rgba(225,229,222,.96);
  border-radius: 17px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 10px 28px rgba(24,33,43,.08);
  backdrop-filter: blur(12px);
}
.restaurant-menu-search .el-input__wrapper,
.restaurant-menu-search .form-control { border: 0 !important; background: transparent !important; }
.menu-category-title-row { margin: 29px 0 13px; }
.menu-category-title-row:first-child { margin-top: 0; }
.menu-category-title-row h5 { margin: 0 0 4px; font-size: 24px; }
.menu-category-title-row p { margin: 0; color: var(--ui-muted); }
.restaurant-menu-section .list-item-rows {
  overflow: hidden;
  margin-bottom: 14px;
  padding: 8px;
  border-color: #e1e5df;
  border-radius: 18px;
  box-shadow: 0 5px 16px rgba(24,33,43,.045);
}
.restaurant-menu-section .list-item-rows:hover { border-color: #cbd2c8; transform: translateY(-2px); box-shadow: 0 14px 32px rgba(24,33,43,.09); }
.restaurant-menu-section .list-item-rows .item-image-preview,
.restaurant-menu-section .list-item-rows .item-image-preview .el-image,
.restaurant-menu-section .list-item-rows .item-image-preview img { overflow: hidden; border-radius: 13px; }
.restaurant-menu-section .list-item-rows h6 { font-size: 16px; font-weight: 800; }
.restaurant-menu-section .list-item-rows .ellipsis-2-lines { color: var(--ui-muted); line-height: 1.45; }
.restaurant-menu-section .quantity-add-cart,
.restaurant-menu-section .xget-item-details { border: 1px solid #dfe4dc; background: #f8faf7; color: var(--ui-ink); font-weight: 750; }
.restaurant-menu-section .quantity-add-cart:hover,
.restaurant-menu-section .xget-item-details:hover { border-color: var(--ui-primary); background: var(--ui-primary-soft); color: var(--ui-primary); }
.restaurant-menu-section .el-card {
  overflow: hidden;
  height: 100%;
  border: 1px solid #e1e5df !important;
  border-radius: 18px !important;
  box-shadow: 0 5px 16px rgba(24,33,43,.045) !important;
}
.restaurant-menu-section .el-card:hover { transform: translateY(-2px); border-color: #cbd2c8 !important; box-shadow: 0 14px 32px rgba(24,33,43,.09) !important; }
.restaurant-menu-section .el-card .el-image,
.restaurant-menu-section .el-card .el-image__inner { border-radius: 12px; }

.restaurant-cart-column .sticky-cart {
  top: 20px;
  overflow: hidden;
  min-height: 300px;
  padding: 20px;
  border: 1px solid #e0e5de;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 16px 44px rgba(24,33,43,.09);
}
.restaurant-cart-column .sticky-cart h5 { margin-bottom: 16px; font-size: 22px; }
.cart-empty { display: grid; min-height: 230px; place-items: center; }
.cart-empty-content { padding: 28px 12px; }
.cart-empty-icon {
  display: grid;
  width: 74px;
  height: 74px;
  place-items: center;
  border-radius: 24px;
  background: var(--ui-primary-soft);
  color: var(--ui-primary);
  font-size: 34px;
}
.cart-empty h6 { color: var(--ui-ink); font-size: 15px; }
.cart-empty p { max-width: 220px; margin: 7px auto 0; color: var(--ui-muted); font-size: 12px; line-height: 1.5; }

@media (max-width: 1199px) {
  .action-menu .merchant-profile-info { padding: 30px !important; }
  .action-menu .merchant-profile-logo { width: 92px !important; min-width: 92px !important; height: 92px !important; min-height: 92px !important; }
  .action-menu .merchant-profile-info h4 { font-size: 30px; }
}

@media (max-width: 991px) {
  .action-menu .mobile-merchant-details { min-height: 205px; height: 205px; border-radius: 0 0 24px 24px; background-position: center; background-size: cover; }
  .restaurant-menu-section { padding-top: 20px; }
  .restaurant-menu-search { top: 8px; }
  .restaurant-availability-copy { display: block; }
  .restaurant-schedule-button { display: inline-flex; margin-top: 12px; align-items: center; justify-content: center; }
}

@media (max-width: 575px) {
  .restaurant-availability { padding: 14px 0; }
  .restaurant-availability-card { align-items: flex-start; gap: 12px; }
  .restaurant-availability-icon { flex-basis: 44px; width: 44px; height: 44px; border-radius: 14px; font-size: 21px; }
  .restaurant-availability-copy h4 { font-size: 18px; }
  .restaurant-schedule-button { width: 100%; }
  .restaurant-menu-section .list-item-rows { padding: 7px; }
  .menu-category-title-row h5 { font-size: 21px; }
}

/* Accessible text over photography */
.section-join-us::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(12,20,26,.73) 0%, rgba(12,20,26,.61) 48%, rgba(12,20,26,.40) 100%),
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.30));
  pointer-events: none;
}
.section-join-us > .d-flex { position: relative; z-index: 1; }
.section-join-us h1,
.section-join-us h2,
.section-join-us h3,
.section-join-us h4,
.section-join-us h5,
.section-join-us h6,
.section-join-us p,
.section-join-us span {
  color: #fff !important;
  opacity: 1 !important;
  text-shadow: 0 3px 18px rgba(0,0,0,.72);
}
.partner-banner-content { padding: 24px; }
.partner-banner-content h1 {
  max-width: 880px;
  margin: 12px auto 13px;
  font-size: clamp(34px, 4vw, 54px);
  font-weight: 880;
  line-height: 1.08;
  letter-spacing: -.045em;
}
.partner-banner-eyebrow {
  display: inline-flex;
  margin: 0;
  padding: 7px 13px;
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 999px;
  background: rgba(9,17,23,.36);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
  backdrop-filter: blur(7px);
}
.partner-banner-subtitle { color: rgba(255,255,255,.92) !important; font-size: 16px; font-weight: 650; }
.section-join-us .partner-banner-button {
  display: inline-flex;
  min-width: 170px;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  border: 1px solid #fff !important;
  border-radius: 14px !important;
  background: #fff !important;
  color: #17212b !important;
  font-weight: 850;
  text-decoration: none !important;
  text-shadow: none;
  box-shadow: 0 14px 34px rgba(0,0,0,.24);
}
.section-join-us .partner-banner-button:hover,
.section-join-us .partner-banner-button:focus {
  transform: translateY(-2px);
  border-color: var(--ui-primary) !important;
  background: var(--ui-primary) !important;
  color: #fff !important;
  box-shadow: 0 17px 38px rgba(0,0,0,.3);
}

/* Guard every common photographic banner against low-contrast inherited copy. */
.hero-banner h1, .hero-banner h2, .hero-banner h3, .hero-banner h4, .hero-banner h5, .hero-banner h6,
.banner-wrap h1, .banner-wrap h2, .banner-wrap h3, .banner-wrap h4, .banner-wrap h5, .banner-wrap h6,
.layer-content h1, .layer-content h2, .layer-content h3, .layer-content h4, .layer-content h5, .layer-content h6,
.section-promo h1, .section-promo h2, .section-promo h3, .section-promo h4, .section-promo h5, .section-promo h6 {
  color: #fff !important;
  opacity: 1 !important;
  text-shadow: 0 3px 18px rgba(0,0,0,.68);
}

@media (max-width: 575px) {
  .partner-banner-content { padding: 38px 10px; }
  .partner-banner-content h1 { font-size: 30px; }
  .partner-banner-subtitle { font-size: 14px; }
  .section-join-us .partner-banner-button { width: 100% !important; max-width: 280px; }
}
/* Homepage partnership cards: maintain readable button contrast regardless of
   Element Plus theme variables or global button color overrides. */
.join-card-section .join-card-action,
.join-card-section a.join-card-action {
  background: var(--ui-primary, #e63b1f) !important;
  border-color: var(--ui-primary, #e63b1f) !important;
  color: #fff !important;
  font-weight: 800 !important;
  text-shadow: none !important;
  box-shadow: 0 8px 18px rgba(230, 59, 31, 0.18);
}

.join-card-section .join-card-action:hover,
.join-card-section .join-card-action:focus,
.join-card-section a.join-card-action:hover,
.join-card-section a.join-card-action:focus {
  background: var(--ui-primary-hover, #c92f18) !important;
  border-color: var(--ui-primary-hover, #c92f18) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(201, 47, 24, 0.25);
}

.join-card-section .join-card-action span {
  color: inherit !important;
}

/* Restaurant delivery/pickup switch: keep both states readable.  The label
   contains its own .bold element, so setting the button color alone is not
   enough when the global typography rules are loaded later. */
.btn-group.btn-group-rounded.btn-group-toggle > .btn {
  border: 1px solid transparent !important;
  background: #f4f5f7 !important;
  color: #344054 !important;
  text-shadow: none !important;
}

.btn-group.btn-group-rounded.btn-group-toggle > .btn .bold,
.btn-group.btn-group-rounded.btn-group-toggle > .btn p,
.btn-group.btn-group-rounded.btn-group-toggle > .btn span {
  color: inherit !important;
}

.btn-group.btn-group-rounded.btn-group-toggle > .btn.active,
.btn-group.btn-group-rounded.btn-group-toggle > .btn.active:hover,
.btn-group.btn-group-rounded.btn-group-toggle > .btn.active:focus {
  border-color: #17212b !important;
  background: #17212b !important;
  color: #fff !important;
  box-shadow: 0 7px 18px rgba(23, 33, 43, .2);
}

.btn-group.btn-group-rounded.btn-group-toggle > .btn:not(.active):hover,
.btn-group.btn-group-rounded.btn-group-toggle > .btn:not(.active):focus {
  border-color: #cbd2d9 !important;
  background: #fff !important;
  color: #17212b !important;
}

.btn-group.btn-group-rounded.btn-group-toggle > .btn:focus-visible {
  outline: 3px solid rgba(244, 81, 44, .32);
  outline-offset: 2px;
}

/* 2026 mobile-first storefront hardening
   Keep this block last: it repairs legacy fixed widths without changing the
   desktop layout and gives every customer-facing control a phone-sized target. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

img,
svg,
video,
canvas { max-width: 100%; }

.swiperOutsideContainer,
.swiper-container,
.swiper,
.swiper-wrapper,
#vue-home-widgets,
.home-discovery {
  max-width: 100%;
}

.swiperOutsideContainer,
.swiper-container,
.swiper { overflow: hidden; }

@supports (padding: max(0px)) {
  body {
    padding-right: env(safe-area-inset-right);
    padding-left: env(safe-area-inset-left);
  }
}

@media (max-width: 767px) {
  html { scroll-padding-top: 76px; }

  body {
    min-width: 0;
    font-size: 15px;
    -webkit-text-size-adjust: 100%;
  }

  .container,
  .container-fluid {
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 16px !important;
    padding-left: 16px !important;
  }

  .row { margin-right: -8px; margin-left: -8px; }
  .row > [class*="col-"] { padding-right: 8px; padding-left: 8px; }

  h1 { font-size: clamp(2rem, 10vw, 2.75rem); line-height: 1.08; }
  h2 { font-size: clamp(1.65rem, 8vw, 2.2rem); line-height: 1.13; }
  h3 { font-size: clamp(1.35rem, 7vw, 1.8rem); line-height: 1.2; }
  p, li, label, .form-text { overflow-wrap: anywhere; }

  /* Compact header that still leaves 44px touch targets. */
  #top-navigation {
    min-height: 66px;
    margin: 0 !important;
    padding: 8px 12px !important;
  }

  #top-navigation > [class*="col"] { padding: 0 4px; }
  #top-navigation .top-logo { display: flex; align-items: center; max-width: min(46vw, 176px); }
  #top-navigation .top-logo img,
  #top-navigation .top-logo .img-200 {
    width: auto !important;
    max-width: min(46vw, 176px) !important;
    max-height: 42px !important;
    object-fit: contain;
  }

  #top-navigation .top-menu { display: flex; align-items: center; margin: 0; }
  #top-navigation .top-menu > li { margin: 0 !important; padding: 0 2px !important; }
  #top-navigation .top-menu a,
  #top-navigation .hamburger,
  #top-navigation .cart-handle {
    display: inline-flex;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }

  /* Hero copy and address entry remain fully visible at 320px. */
  #main-search-banner {
    min-height: 520px;
    padding: 0 !important;
    background-position: 61% center;
  }

  #main-search-banner::after { display: none; }
  #main-search-banner .banner-center {
    width: 100%;
    max-width: 560px;
    padding: 48px 20px 76px;
  }

  .home-hero-eyebrow { margin-bottom: 10px; font-size: 11px; }
  .home-hero-title { max-width: 360px; font-size: clamp(2.1rem, 10.5vw, 2.8rem); }
  .home-hero-copy { max-width: 340px; margin-bottom: 22px; font-size: 15px; line-height: 1.5; }
  .home-search-wrap { width: 100%; }
  .home-search-wrap .form-control,
  .home-search-wrap .form-control-text,
  .home-search-wrap .el-input__wrapper { min-height: 58px; border-radius: 16px !important; }
  .home-search-wrap input { min-width: 0; font-size: 16px !important; }
  .home-trust-row { gap: 8px 14px; margin-top: 20px; font-size: 12px; }

  .home-value-strip { margin: -24px auto 20px; padding: 0 10px; }
  .home-value-strip .container { width: 100% !important; padding: 0 !important; }
  .home-value-item { min-height: 78px; padding: 14px 16px; }
  .home-value-item + .home-value-item { border-top: 1px solid var(--ui-line); border-left: 0; }

  #vue-home-widgets > .container,
  .home-discovery { padding-top: 10px; }
  .swiperOutsideContainer { margin-bottom: 34px; }
  .swiperOutsideContainer h3 { font-size: 22px; line-height: 1.25; }
  .swiperCuisine .swiperSlide { min-height: 116px !important; }
  .swiperCuisine .swiperSlide img { width: 70px; height: 70px; }
  .swiperResto .swiperSlide { min-height: 252px !important; }
  .swiper-button-next .el-button,
  .swiper-button-prev .el-button { width: 44px; min-width: 44px; height: 44px; }

  .join-card-section .swiperSlide { height: auto; }
  .join-card-section .content { padding: 16px !important; }
  .section-newmobileapp { padding: 42px 0 0; text-align: center; }
  .section-newmobileapp .app-store-wrap { flex-wrap: wrap; gap: 10px; }
  .section-newmobileapp .app-store-wrap > div { margin: 0 !important; }
  .section-newmobileapp .app-store-wrap img { width: auto; max-width: 145px; height: 43px; object-fit: contain; }
  .section-newmobileapp img.mobileapp { width: min(82vw, 330px); height: auto; }

  /* Native-sized fields prevent Safari from zooming the page on focus. */
  input:not([type="checkbox"]):not([type="radio"]),
  textarea,
  select,
  .form-control,
  .custom-select,
  .el-input__inner,
  .el-textarea__inner { max-width: 100%; font-size: 16px !important; }

  textarea { min-height: 120px; }
  .btn,
  .el-button,
  button,
  [role="button"] { min-height: 48px; }
  .btn-block, .w-100 { white-space: normal; }

  /* Cards, account screens and checkout no longer use desktop padding. */
  .card,
  .rounded-box,
  .section-filter,
  .checkout-section,
  .order-summary,
  .cart-summary,
  .transaction-section,
  .address-section,
  .payment-option,
  .account-menu { border-radius: 18px !important; }
  .card-body,
  .checkout-section,
  .order-summary,
  .cart-summary,
  .transaction-section,
  .address-section { padding: 18px !important; }
  .account-sidebar,
  .account-menu { max-width: 100%; }
  .account-sidebar a,
  .account-menu a,
  .list-group-item { min-height: 48px; overflow-wrap: anywhere; }
  .table-responsive .table { min-width: 620px; }
  .table-responsive { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Mobile dialogs respect the visual viewport and device safe areas. */
  .modal-dialog,
  .el-dialog,
  .el-message-box {
    width: auto !important;
    max-width: calc(100vw - 20px) !important;
    margin: 10px auto !important;
  }
  .modal-content,
  .el-dialog,
  .el-message-box { max-height: calc(100dvh - 20px); border-radius: 18px !important; }
  .modal-body,
  .el-dialog__body,
  .el-message-box__content { overflow-y: auto; overscroll-behavior: contain; }
  .el-drawer { width: min(92vw, 390px) !important; }

  /*
   * Element Plus drawers must be teleported to <body>.  Older markup mounted
   * the overlay inside the 88px navigation bar, collapsing the mobile menu to
   * a clipped strip above account pages.  Keep the drawer pinned to the visual
   * viewport and account for iPhone safe areas even if a cached theme rule is
   * still present.
   */
  .guest-mobile-drawer-overlay {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    overflow: hidden !important;
  }
  .guest-mobile-drawer-overlay .guest-mobile-drawer,
  .guest-mobile-drawer {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: min(88vw, 390px) !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    max-height: none !important;
    overflow: hidden !important;
    border-radius: 0 20px 20px 0 !important;
  }
  .guest-mobile-drawer .el-drawer__body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
  }
  .guest-mobile-drawer .drawer-menu-mobile {
    margin: 0;
  }
  .guest-mobile-drawer .drawer-menu-mobile li {
    margin: 0 0 4px;
  }
  .top-menu .guest-mobile-drawer .drawer-menu-mobile.with-icons li a,
  .guest-mobile-drawer .drawer-menu-mobile.with-icons li a {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 10px 12px 10px 44px !important;
    text-indent: 0 !important;
    line-height: 1.35;
    background-position: 12px center !important;
    background-repeat: no-repeat !important;
  }
  .guest-mobile-drawer .drawer-menu-mobile + div,
  .guest-mobile-drawer .drawer-menu-mobile ~ ul a {
    line-height: 1.45;
  }
  .guest-mobile-drawer .btn-black {
    min-height: 52px;
    border-radius: 14px !important;
  }

  .cookie-consent .el-notification,
  .cookie-consent.el-notification,
  .el-notification.cookie-consent {
    right: 10px !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    left: 10px !important;
    width: auto !important;
    max-height: calc(100dvh - 20px);
    overflow-y: auto;
    padding: 18px !important;
  }
  .cookie-consent .el-notification__content { font-size: 14px; line-height: 1.45; }
  .cookie-consent .el-button { min-width: 0 !important; padding-right: 14px; padding-left: 14px; }

  /* Restaurant header, availability and menu become a single-column flow. */
  .action-menu .merchant-top-header { padding: 0 0 20px; }
  .action-menu .merchant-top-header .container { padding: 0 !important; }
  .action-menu .merchant-profile-hero { min-height: 0; border-radius: 0 0 24px 24px; }
  .action-menu .mobile-merchant-details { min-height: 220px; height: 220px; }
  .action-menu .merchant-profile-info { padding: 20px !important; }
  .action-menu .merchant-profile-info h4 { font-size: 27px; }
  .action-menu .merchant-profile-logo { width: 84px !important; min-width: 84px !important; height: 84px !important; min-height: 84px !important; }
  .action-menu .btn-reserve-table { width: 100%; justify-content: center; }
  .btn-group.btn-group-rounded.btn-group-toggle { display: flex; width: 100%; }
  .btn-group.btn-group-rounded.btn-group-toggle > .btn { flex: 1 1 50%; min-width: 0; }
  .restaurant-availability-card { align-items: flex-start; }
  .restaurant-availability-copy { width: calc(100% - 56px); }
  .restaurant-schedule-button { width: 100%; }
  .restaurant-menu-section { padding: 22px 0 42px; }
  .restaurant-menu-search { position: relative; top: 0; }
  .restaurant-menu-section #sticky-sidebar { margin-bottom: 14px; padding: 12px; }
  .restaurant-menu-section .menu-category { display: flex; overflow-x: auto; gap: 6px; padding-bottom: 4px; white-space: nowrap; }
  .restaurant-menu-section .menu-category li { flex: 0 0 auto; }
  .restaurant-menu-section .list-item-rows { margin-bottom: 12px; }
  .restaurant-cart-column .sticky-cart { min-height: 0; margin-top: 16px; padding: 18px; }

  footer { padding: 34px 0 max(34px, env(safe-area-inset-bottom)); text-align: center; }
  footer .row > [class*="col-"] { margin-bottom: 22px; }
  footer .form-inline,
  footer form { justify-content: center; }
}

@media (max-width: 374px) {
  #top-navigation { padding-right: 8px !important; padding-left: 8px !important; }
  #top-navigation .top-logo { max-width: 43vw; }
  #top-navigation .top-logo img,
  #top-navigation .top-logo .img-200 { max-width: 43vw !important; }
  #main-search-banner .banner-center { padding-right: 14px; padding-left: 14px; }
  .home-trust-row span:nth-child(3) { display: none; }
  .home-value-item { padding-right: 12px; padding-left: 12px; }
  .cookie-consent .el-button { font-size: 13px; }
}