/* Self-hosted, zero CDN -- DM Sans is the global face per the Orderly design
   brief, and the Material Symbols CDN went away with the move to Phosphor.
   Imported here (not just <link>ed in the layout) so the token + font layer
   survives a CodeCanyon update rewriting the layouts. */
@import url("fonts-dmsans.css");
@import url("tokens-oklch.css");

:root {
  /* Customer web = "Orderly" product accent (orange). Re-pointed to the
     canonical --ods-* tokens (tokens-oklch.css, linked in the layouts)
     on 2026-07-21; sharp radius scale applied per the design system. */
  --orderly-primary: var(--ods-product-orderly, #f97705);
  --orderly-primary-hover: var(--ods-product-orderly-deep, #e06800);
  --orderly-primary-deep: var(--ods-brand-deep, #c45a00);
  --orderly-success: var(--ods-success, #1f9d55);
  --orderly-danger: var(--ods-error, #d92d20);
  --orderly-warning: var(--ods-warning, #b7791f);
  --orderly-info: var(--ods-info, #2563eb);
  --orderly-bg: var(--ods-bg, #f7f4ef);
  --orderly-surface: var(--ods-surface, #ffffff);
  --orderly-surface-soft: var(--ods-surface-sunken, #fbfaf8);
  --orderly-text: var(--ods-text, #1f2328);
  --orderly-muted: var(--ods-text-muted, #69707a);
  --orderly-border: var(--ods-border-soft, rgba(31, 35, 40, 0.1));
  --orderly-border-strong: var(--ods-border, rgba(31, 35, 40, 0.16));
  --orderly-radius-sm: 10px;
  --orderly-radius: 14px;
  --orderly-radius-lg: 18px;
  /* Flat design: no shadows/glows -- user direction 2026-07-21. */
  --orderly-shadow: none;
  --orderly-focus: 0 0 0 4px oklch(70% 0.19 45 / 0.16);
}

:root[data-orderly-theme="dark"] {
  --orderly-primary: var(--ods-dark-accent, #f97705);
  --orderly-primary-hover: var(--ods-dark-accent-strong, #ff8a1c);
  --orderly-primary-deep: #ff9f42;
  --orderly-success: #4ade80;
  --orderly-danger: #ff6b63;
  --orderly-warning: #ffd166;
  --orderly-info: #60a5fa;
  --orderly-bg: #1e1e1e;
  --orderly-surface: #262626;
  --orderly-surface-soft: #2f2f2f;
  --orderly-text: #f5f5f5;
  --orderly-muted: #b9bec8;
  --orderly-border: rgba(255, 255, 255, 0.1);
  --orderly-border-strong: rgba(255, 255, 255, 0.18);
  --orderly-shadow: none;
  --orderly-focus: 0 0 0 4px rgba(249, 119, 5, 0.24);
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
  background: var(--orderly-bg);
  color: var(--orderly-text);
  font-family: var(--orderly-font, "DM Sans", system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body,
p,
button,
input,
select,
textarea {
  font-family: var(--orderly-font, "DM Sans", system-ui, sans-serif);
}

.material-symbols-rounded,
.orderly-icon {
  display: inline-flex;
  width: 1em;
  height: 1em;
  align-items: center;
  justify-content: center;
  font-family: "Material Symbols Rounded" !important;
  font-size: 1.35em;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
  vertical-align: -0.18em;
}

i.orderly-icon-host {
  display: inline-flex !important;
  width: 1.25em;
  min-width: 1.25em;
  height: 1.25em;
  align-items: center;
  justify-content: center;
  font-size: 0 !important;
  font-style: normal;
  line-height: 1;
  text-indent: 0 !important;
  vertical-align: -0.2em;
}

i.orderly-icon-host::before {
  content: attr(data-orderly-symbol) !important;
  display: inline-flex !important;
  width: 1em;
  height: 1em;
  align-items: center;
  justify-content: center;
  font-family: "Material Symbols Rounded" !important;
  font-size: var(--orderly-icon-size, 22px) !important;
  font-style: normal !important;
  font-weight: normal !important;
  line-height: 1 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  white-space: nowrap !important;
  direction: ltr !important;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
}

i.orderly-icon-host::after {
  content: none !important;
  display: none !important;
}

.top-menu i.orderly-icon-host,
.mobile-nav i.orderly-icon-host,
.kmrs-row i.orderly-icon-host,
.dropdown-menu i.orderly-icon-host,
.btn i.orderly-icon-host,
button i.orderly-icon-host {
  --orderly-icon-size: 20px;
  color: currentColor;
}

.orderly-theme-toggle {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1050;
  width: 48px;
  height: 48px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--orderly-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--orderly-primary);
  box-shadow: var(--orderly-shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.orderly-theme-toggle:hover,
.orderly-theme-toggle:focus {
  border-color: rgba(249, 119, 5, 0.42);
  color: var(--orderly-primary-hover);
  box-shadow: var(--orderly-focus), var(--orderly-shadow);
  outline: none;
}

:root[data-orderly-theme="dark"] .orderly-theme-toggle {
  background: rgba(38, 38, 38, 0.9);
}

:root[data-orderly-theme="dark"] body,
:root[data-orderly-theme="dark"] .page-content,
:root[data-orderly-theme="dark"] #main-container {
  background:
    radial-gradient(circle at top right, rgba(249, 119, 5, 0.12), transparent 30%),
    var(--orderly-bg);
}

:root[data-orderly-theme="dark"] .card,
:root[data-orderly-theme="dark"] .modal-content,
:root[data-orderly-theme="dark"] .dropdown-menu,
:root[data-orderly-theme="dark"] .el-dialog,
:root[data-orderly-theme="dark"] .q-card,
:root[data-orderly-theme="dark"] .store-card,
:root[data-orderly-theme="dark"] .restaurant-card,
:root[data-orderly-theme="dark"] .items-row,
:root[data-orderly-theme="dark"] .items,
:root[data-orderly-theme="dark"] .menu-item,
:root[data-orderly-theme="dark"] .cart-preview,
:root[data-orderly-theme="dark"] .checkout-panel,
:root[data-orderly-theme="dark"] .account-panel,
:root[data-orderly-theme="dark"] .address-card,
:root[data-orderly-theme="dark"] .payment-card {
  background: var(--orderly-surface);
  border-color: var(--orderly-border);
  color: var(--orderly-text);
}

:root[data-orderly-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
:root[data-orderly-theme="dark"] select,
:root[data-orderly-theme="dark"] textarea,
:root[data-orderly-theme="dark"] .form-control,
:root[data-orderly-theme="dark"] .el-input__inner,
:root[data-orderly-theme="dark"] .el-textarea__inner {
  background: #1f1f1f;
  color: var(--orderly-text);
  border-color: var(--orderly-border-strong) !important;
}

:root[data-orderly-theme="dark"] #top-navigation,
:root[data-orderly-theme="dark"] #top-nav,
:root[data-orderly-theme="dark"] .navbar {
  background: rgba(38, 38, 38, 0.92);
  border-color: var(--orderly-border);
}

a,
.text-green,
.text-primary {
  color: var(--orderly-primary) !important;
}

a:hover,
.text-green:hover {
  color: var(--orderly-primary-hover) !important;
}

.page-content,
#main-container {
  background:
    radial-gradient(circle at top right, rgba(249, 119, 5, 0.08), transparent 28%),
    var(--orderly-bg);
}

.container,
.container-fluid {
  max-width: 100%;
}

.card,
.modal-content,
.dropdown-menu,
.el-dialog,
.q-card,
.section,
.account-menu,
#sidebar {
  border-color: var(--orderly-border) !important;
  border-radius: var(--orderly-radius-lg);
  box-shadow: 0 1px 2px rgba(31, 35, 40, 0.04);
}

.card,
.modal-content,
.dropdown-menu,
.el-dialog,
.q-card {
  background: var(--orderly-surface);
}

.btn,
button,
.el-button,
.q-btn {
  min-height: 44px;
  border-radius: 999px;
  font-weight: 700;
}

.btn-green,
.btn-primary,
.el-button--primary,
.q-btn.bg-primary {
  background: var(--orderly-primary) !important;
  border-color: var(--orderly-primary) !important;
  color: #fff !important;
}

.btn-green:hover,
.btn-primary:hover,
.el-button--primary:hover {
  background: var(--orderly-primary-hover) !important;
  border-color: var(--orderly-primary-hover) !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
select,
textarea,
.form-control,
.el-input__inner,
.el-textarea__inner {
  min-height: 44px;
  border-color: var(--orderly-border-strong) !important;
  border-radius: var(--orderly-radius) !important;
  color: var(--orderly-text);
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.el-input__inner:focus,
.el-textarea__inner:focus {
  border-color: var(--orderly-primary) !important;
  box-shadow: var(--orderly-focus) !important;
  outline: none;
}

.badge,
.label,
.order_status,
.rounded-status,
.payment_status {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 5px 10px;
  font-weight: 800;
}

.order_status.paid,
.payment_status.paid,
.badge-success,
.label-success {
  background: rgba(31, 157, 85, 0.12) !important;
  color: var(--orderly-success) !important;
}

.order_status.cancelled,
.order_status.canceled,
.order_status.failed,
.badge-danger,
.label-danger {
  background: rgba(217, 45, 32, 0.12) !important;
  color: var(--orderly-danger) !important;
}

.order_status.pending,
.order_status.waiting,
.badge-warning,
.label-warning {
  background: rgba(183, 121, 31, 0.14) !important;
  color: var(--orderly-warning) !important;
}

.order_status.ready,
.order_status.processing,
.badge-info,
.label-info {
  background: rgba(37, 99, 235, 0.11) !important;
  color: var(--orderly-info) !important;
}

.table-responsive,
.ktables_list,
.table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table th,
table td {
  vertical-align: middle;
}

#top-navigation,
#top-nav,
.navbar {
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid var(--orderly-border);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

#sidebar {
  background: var(--orderly-surface);
  padding: 22px;
}

#sidebar a,
.account-menu a,
.dropdown-menu a {
  min-height: 42px;
  border-radius: var(--orderly-radius);
  font-weight: 700;
}

#sidebar a:hover,
.account-menu a:hover,
.dropdown-menu a:hover {
  background: rgba(249, 119, 5, 0.1);
  color: var(--orderly-primary) !important;
}

@media (min-width: 768px) and (max-width: 991px) {
  body {
    font-size: 15px;
  }

  .page-content,
  #main-container {
    min-height: 100dvh;
  }

  .card-body,
  .modal-body {
    padding: 22px;
  }

  .btn,
  button,
  .el-button,
  .q-btn {
    min-height: 48px;
    padding-left: 18px;
    padding-right: 18px;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
  select,
  textarea,
  .form-control,
  .el-input__inner {
    min-height: 48px;
  }
}

@media (max-width: 767px) {
  .card,
  .modal-content,
  .dropdown-menu,
  .el-dialog,
  .q-card {
    border-radius: var(--orderly-radius);
  }

  .btn,
  button,
  .el-button,
  .q-btn {
    min-height: 44px;
  }
}

/* =========================
   CUSTOMER / STOREFRONT TABLET POLISH
========================= */

.top-logo img {
  max-height: 46px;
  object-fit: contain;
}

#top-navigation,
#top-nav {
  min-height: 70px;
  padding-left: 18px;
  padding-right: 18px;
}

.page-content {
  min-height: 100dvh;
}

.section-title,
.section-title h3,
.section-title h4,
.merchant-name,
.item-name,
.restaurant-name {
  color: var(--orderly-text);
  letter-spacing: -0.02em;
}

.store-card,
.restaurant-card,
.items-row,
.items,
.menu-item,
.cart-preview,
.checkout-panel,
.account-panel,
.address-card,
.payment-card {
  background: var(--orderly-surface);
  border: 1px solid var(--orderly-border);
  border-radius: var(--orderly-radius-lg);
  box-shadow: 0 1px 2px rgba(31, 35, 40, 0.04);
}

.items,
.menu-item,
.restaurant-card,
.store-card {
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.items:hover,
.menu-item:hover,
.restaurant-card:hover,
.store-card:hover {
  border-color: rgba(249, 119, 5, 0.24);
  box-shadow: var(--orderly-shadow);
  transform: translateY(-1px);
}

.items img,
.menu-item img,
.restaurant-card img,
.store-card img {
  border-radius: 14px;
  object-fit: cover;
}

.price,
.item-price,
.cart-total,
.total,
.amount {
  color: var(--orderly-text);
  font-weight: 800;
}

.text-grey,
.text-muted,
.dim,
.merchant-address,
.item-description {
  color: var(--orderly-muted) !important;
}

.back-arrow,
.back-arrow:before {
  color: var(--orderly-primary) !important;
}

.cart-preview,
.checkout-panel,
.account-panel {
  padding: 18px;
}

.modal-footer,
.bootbox .modal-footer {
  gap: 10px;
}

.modal-footer .btn,
.bootbox .modal-footer .btn {
  min-width: 110px;
}

.el-dialog,
.modal-content {
  max-width: calc(100vw - 28px);
}

@media (min-width: 768px) and (max-width: 991px) {
  #top-navigation,
  #top-nav {
    min-height: 76px;
    padding-left: 24px;
    padding-right: 24px;
  }

  .container {
    max-width: 100%;
    padding-left: 22px;
    padding-right: 22px;
  }

  .items,
  .menu-item,
  .restaurant-card,
  .store-card {
    min-height: 132px;
  }

  .cart-preview,
  .checkout-panel,
  .account-panel {
    padding: 22px;
  }
}

/* =========================
   PAYSTACK CHECKOUT POLISH
========================= */

#paystackForm .modal-dialog {
  max-width: min(460px, calc(100vw - 28px));
}

#paystackForm .modal-content {
  border: 1px solid var(--orderly-border);
  border-radius: 24px;
  box-shadow: 0 26px 70px rgba(31, 35, 40, 0.18);
}

#paystackForm .modal-body {
  position: relative;
  padding: 30px 30px 18px;
}

.orderly-paystack-close {
  position: absolute;
  top: 16px;
  right: 16px;
  min-width: 40px;
  min-height: 40px;
}

.orderly-paystack-mark {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  border-radius: 18px;
  background: rgba(249, 119, 5, 0.12);
  color: var(--orderly-primary);
  font-size: 22px;
  font-weight: 800;
}

.orderly-paystack-title {
  color: var(--orderly-text);
  font-size: 24px;
  letter-spacing: -0.03em;
}

.orderly-paystack-notes {
  color: var(--orderly-muted);
  font-size: 15px;
}

.orderly-paystack-actions {
  padding: 0 30px 30px;
  border-top: 0;
}

/* =========================
   ORDERLY RELEASE STOREFRONT POLISH
========================= */

#main-search-banner {
  position: relative;
  min-height: min(560px, 62vh);
  overflow: hidden;
  background:
    radial-gradient(circle at 13% 38%, rgba(249, 119, 5, 0.18), transparent 0 42px),
    radial-gradient(circle at 86% 32%, rgba(249, 119, 5, 0.16), transparent 0 54px),
    linear-gradient(135deg, rgba(249, 119, 5, 0.08), rgba(255, 255, 255, 0.82) 42%, rgba(249, 119, 5, 0.12)),
    var(--orderly-surface);
  border-bottom: 1px solid var(--orderly-border);
}

#main-search-banner::before,
#main-search-banner::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: min(30vw, 360px);
  height: min(48vh, 420px);
  border-radius: 999px 999px 0 0;
  background:
    radial-gradient(circle at 50% 20%, #fff 0 44px, transparent 45px),
    linear-gradient(180deg, #ffd166 0%, #f97705 100%);
  opacity: 0.92;
  filter: drop-shadow(0 24px 40px rgba(31, 35, 40, 0.12));
}

#main-search-banner::before {
  left: 4vw;
  transform: rotate(-7deg);
}

#main-search-banner::after {
  right: 4vw;
  transform: rotate(7deg);
}

#main-search-banner .banner-center {
  position: relative;
  z-index: 1;
  width: min(620px, calc(100vw - 34px));
  padding: 28px;
}

#main-search-banner h2 {
  color: var(--orderly-text);
  font-size: clamp(30px, 4vw, 56px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.02;
}

.home-search-wrap,
.mobile-home-banner {
  border: 1px solid var(--orderly-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--orderly-shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

:root[data-orderly-theme="dark"] .home-search-wrap,
:root[data-orderly-theme="dark"] .mobile-home-banner {
  background: rgba(38, 38, 38, 0.9);
}

.section-mobileapp,
.section-newmobileapp {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 16%, rgba(249, 119, 5, 0.14), transparent 0 78px),
    linear-gradient(135deg, var(--orderly-surface) 0%, var(--orderly-surface-soft) 100%) !important;
  border-top: 1px solid var(--orderly-border);
  border-bottom: 1px solid var(--orderly-border);
}

.section-mobileapp h1,
.section-newmobileapp h1 {
  color: var(--orderly-text);
  font-weight: 800;
  letter-spacing: -0.04em;
}

.section-mobileapp h5,
.section-newmobileapp h5 {
  color: var(--orderly-primary);
  font-weight: 800;
}

.section-mobileapp .mobileapp,
.section-newmobileapp .mobileapp {
  max-height: 360px;
  padding: 14px;
  border-radius: 34px;
  background: var(--orderly-surface);
  box-shadow: 0 24px 70px rgba(31, 35, 40, 0.16);
}

.app-store-wrap img {
  height: 42px;
  border-radius: 10px;
}

.merchant-signup,
.merchant-signup-page,
.section-merchant-signup,
.join-us-wrap {
  background:
    radial-gradient(circle at top right, rgba(249, 119, 5, 0.12), transparent 28%),
    var(--orderly-bg);
}

.merchant-signup form,
.merchant-signup-page form,
.join-us-wrap form {
  max-width: 760px;
}

.merchant-signup input,
.merchant-signup select,
.merchant-signup textarea,
.merchant-signup-page input,
.merchant-signup-page select,
.merchant-signup-page textarea {
  min-height: 50px;
}

.swiper-slide,
.swiperSlide,
.rounded-box,
.restaurant-card,
.store-card,
.items,
.menu-item {
  border-radius: 20px !important;
}

.swiper-slide img,
.swiperSlide img,
.rounded-box img,
.restaurant-card img,
.store-card img,
.items img,
.menu-item img {
  filter: saturate(1.04) contrast(1.02);
}

@media (max-width: 767px) {
  #main-search-banner {
    min-height: 440px;
  }

  #main-search-banner::before,
  #main-search-banner::after {
    width: 170px;
    height: 250px;
    opacity: 0.35;
  }

  #main-search-banner .banner-center {
    padding: 20px 0;
  }
}

/* =========================
   ORDERLY RELEASE PARTNER SIGNUP
========================= */

.register-section {
  margin-top: 0 !important;
  padding: clamp(28px, 4vw, 64px) 0;
  background:
    radial-gradient(circle at 82% 18%, rgba(249, 119, 5, 0.16), transparent 0 82px),
    linear-gradient(135deg, var(--orderly-surface) 0%, var(--orderly-surface-soft) 100%);
  border-bottom: 1px solid var(--orderly-border);
}

#vue-merchant-signup {
  align-items: stretch;
  gap: 24px;
}

#vue-merchant-signup > .col:first-child {
  padding: clamp(22px, 3vw, 42px);
  background: var(--orderly-surface);
  border: 1px solid var(--orderly-border);
  border-radius: 24px;
  box-shadow: var(--orderly-shadow);
}

#vue-merchant-signup h3 {
  color: var(--orderly-text);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 800;
  letter-spacing: -0.04em;
}

.register-bg {
  min-height: 520px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.95), transparent 0 54px),
    radial-gradient(circle at 38% 55%, rgba(249, 119, 5, 0.24), transparent 0 90px),
    linear-gradient(160deg, #fff3e7 0%, #ffd166 54%, #f97705 100%) !important;
  box-shadow: 0 24px 70px rgba(31, 35, 40, 0.14);
}

.partner-section {
  padding: clamp(36px, 5vw, 76px) 0;
  background: var(--orderly-bg) !important;
}

.partner-section .container {
  width: min(1180px, calc(100vw - 32px)) !important;
}

.partner-section .section {
  width: 100%;
  min-height: 290px;
  padding: 32px;
  background: var(--orderly-surface);
  border: 1px solid var(--orderly-border);
  border-radius: 22px !important;
  box-shadow: var(--orderly-shadow);
}

.partner-section .section img {
  width: 88px;
  height: 88px;
  object-fit: contain;
  margin-bottom: 28px;
}

.section-join-us,
.section-join-us2 {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(30, 30, 30, 0.58), rgba(30, 30, 30, 0.24)),
    radial-gradient(circle at 50% 10%, rgba(249, 119, 5, 0.44), transparent 0 140px),
    linear-gradient(135deg, #362417 0%, #f97705 100%) !important;
  color: #fff;
}

.section-join-us h1,
.section-join-us h5,
.section-join-us2 h1,
.section-join-us2 h5 {
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.22);
}

.section-join-us .btn,
.section-join-us2 .btn {
  min-width: 170px;
  background: #fff !important;
  color: var(--orderly-primary) !important;
  border-color: #fff !important;
}

/* =========================
   RELEASE DARK MODE FINISH
========================= */

:root[data-orderly-theme="dark"] .page-content,
:root[data-orderly-theme="dark"] #main-container,
:root[data-orderly-theme="dark"] .container,
:root[data-orderly-theme="dark"] .container-fluid {
  color: #f5f5f5 !important;
}

:root[data-orderly-theme="dark"] .card,
:root[data-orderly-theme="dark"] .card-body,
:root[data-orderly-theme="dark"] .section,
:root[data-orderly-theme="dark"] .store-card,
:root[data-orderly-theme="dark"] .restaurant-card,
:root[data-orderly-theme="dark"] .menu-item,
:root[data-orderly-theme="dark"] .items,
:root[data-orderly-theme="dark"] .items-row,
:root[data-orderly-theme="dark"] .cart-preview,
:root[data-orderly-theme="dark"] .checkout-panel,
:root[data-orderly-theme="dark"] .account-panel,
:root[data-orderly-theme="dark"] .address-card,
:root[data-orderly-theme="dark"] .payment-card,
:root[data-orderly-theme="dark"] .modal-content,
:root[data-orderly-theme="dark"] .dropdown-menu,
:root[data-orderly-theme="dark"] .list-group-item,
:root[data-orderly-theme="dark"] .el-card,
:root[data-orderly-theme="dark"] .q-card {
  background: #262626 !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #f5f5f5 !important;
}

:root[data-orderly-theme="dark"] h1,
:root[data-orderly-theme="dark"] h2,
:root[data-orderly-theme="dark"] h3,
:root[data-orderly-theme="dark"] h4,
:root[data-orderly-theme="dark"] h5,
:root[data-orderly-theme="dark"] h6,
:root[data-orderly-theme="dark"] label,
:root[data-orderly-theme="dark"] .font-weight-bold,
:root[data-orderly-theme="dark"] .table,
:root[data-orderly-theme="dark"] .table td,
:root[data-orderly-theme="dark"] .table th {
  color: #f5f5f5 !important;
}

:root[data-orderly-theme="dark"] .text-muted,
:root[data-orderly-theme="dark"] small,
:root[data-orderly-theme="dark"] .dim,
:root[data-orderly-theme="dark"] .help-block,
:root[data-orderly-theme="dark"] .sub-text {
  color: #b9bec8 !important;
}

:root[data-orderly-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
:root[data-orderly-theme="dark"] select,
:root[data-orderly-theme="dark"] textarea,
:root[data-orderly-theme="dark"] .form-control,
:root[data-orderly-theme="dark"] .el-input__inner,
:root[data-orderly-theme="dark"] .el-textarea__inner,
:root[data-orderly-theme="dark"] .q-field__control {
  background: #1e1e1e !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: #f5f5f5 !important;
}

:root[data-orderly-theme="dark"] input::placeholder,
:root[data-orderly-theme="dark"] textarea::placeholder {
  color: #8e95a3 !important;
}

:root[data-orderly-theme="dark"] #top-navigation,
:root[data-orderly-theme="dark"] #top-nav,
:root[data-orderly-theme="dark"] .navbar,
:root[data-orderly-theme="dark"] header,
:root[data-orderly-theme="dark"] footer {
  background: rgba(38, 38, 38, 0.94) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #f5f5f5 !important;
}

:root[data-orderly-theme="dark"] #sidebar,
:root[data-orderly-theme="dark"] .mobile-nav,
:root[data-orderly-theme="dark"] .dropdown-menu,
:root[data-orderly-theme="dark"] .dropdown-item {
  background: #262626 !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #f5f5f5 !important;
}

:root[data-orderly-theme="dark"] .dropdown-item:hover,
:root[data-orderly-theme="dark"] #sidebar a:hover {
  background: rgba(249, 119, 5, 0.16) !important;
  color: #ffb36b !important;
}

:root[data-orderly-theme="dark"] #paystackForm .modal-content,
:root[data-orderly-theme="dark"] #paystackForm .modal-body,
:root[data-orderly-theme="dark"] .orderly-paystack-notes,
:root[data-orderly-theme="dark"] .orderly-paystack-actions {
  background: #262626 !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #f5f5f5 !important;
}

/* =========================
   CUSTOMER ORDER CARDS
========================= */

#vue-my-order .order-search-wrap .form-control {
  min-height: 48px;
  border-radius: 999px;
  padding-left: 46px;
}

#vue-my-order .order-card {
  display: grid;
  grid-template-columns: minmax(240px, 1.1fr) minmax(260px, 1.35fr) minmax(190px, 0.8fr);
  gap: 18px;
  align-items: center;
  padding: 18px;
  background: var(--orderly-surface);
  border: 1px solid var(--orderly-border);
  border-radius: 24px !important;
  box-shadow: var(--orderly-shadow);
}

.order-card__merchant {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 14px;
}

.order-card__logo {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  border-radius: 20px;
  object-fit: cover;
  border: 1px solid var(--orderly-border);
  background: #fff;
}

.order-card__merchant-copy {
  min-width: 0;
}

.order-card__merchant-copy h6,
.order-card__body h6 {
  margin: 0 0 3px;
  color: var(--orderly-text);
  font-size: 16px;
  font-weight: 800;
}

.order-card__merchant-copy p,
.order-card__date,
.order-card__items-count {
  margin: 0;
  color: var(--orderly-muted);
  font-size: 13px;
  font-weight: 600;
}

.order-card__service,
.order-card__status {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.order-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.order-card__id {
  color: var(--orderly-primary);
  font-size: 15px;
  font-weight: 900;
}

.order-card__items {
  display: -webkit-box;
  margin: 6px 0 0;
  color: var(--orderly-text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.order-card__aside {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.order-card__total {
  margin: 0 0 3px;
  color: var(--orderly-muted);
  font-size: 13px;
  font-weight: 700;
}

.order-card__total b {
  color: var(--orderly-text);
  font-size: 18px;
  font-weight: 900;
}

.order-card__actions .btn {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px !important;
  background: rgba(249, 119, 5, 0.1) !important;
  color: var(--orderly-primary) !important;
}

.order-card__actions .dropdown-menu {
  min-width: 230px;
  padding: 8px;
  border-radius: 18px;
  box-shadow: var(--orderly-shadow-strong);
}

.order-card__actions .dropdown-item {
  min-height: 42px;
  border-radius: 12px;
  font-weight: 800;
}

.order-details-panel.section-cart {
  width: min(520px, 94vw);
  padding: 24px;
  background: var(--orderly-surface);
  border-left: 1px solid var(--orderly-border);
  box-shadow: -24px 0 70px rgba(31, 35, 40, 0.18);
}

.order-details-panel .close-panel {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(249, 119, 5, 0.1);
  color: var(--orderly-primary) !important;
}

:root[data-orderly-theme="dark"] #vue-my-order .order-card,
:root[data-orderly-theme="dark"] .order-details-panel.section-cart {
  background: #262626 !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #f5f5f5 !important;
}

:root[data-orderly-theme="dark"] .order-card__merchant-copy h6,
:root[data-orderly-theme="dark"] .order-card__items,
:root[data-orderly-theme="dark"] .order-card__total b {
  color: #f5f5f5 !important;
}

:root[data-orderly-theme="dark"] .order-card__merchant-copy p,
:root[data-orderly-theme="dark"] .order-card__date,
:root[data-orderly-theme="dark"] .order-card__items-count,
:root[data-orderly-theme="dark"] .order-card__total {
  color: #b9bec8 !important;
}

@media (max-width: 991px) {
  #vue-my-order .order-card {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 16px;
  }

  .order-card__aside {
    align-items: flex-end;
  }
}

/* =========================
   CUSTOMER WEBSITE READY PASS
========================= */

#top-navigation {
  min-height: 76px;
  padding: 12px clamp(14px, 2vw, 28px);
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid var(--orderly-border);
  backdrop-filter: blur(16px);
}

.top-logo img,
.footer-logo img {
  max-height: 48px;
  object-fit: contain;
}

#top-navigation a,
.sub-footer a {
  font-weight: 800;
}

.sub-footer {
  padding: 34px 0;
  background: var(--orderly-surface);
  border-top: 1px solid var(--orderly-border);
}

.sub-footer .social-list a {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(249, 119, 5, 0.1);
  color: var(--orderly-primary) !important;
}

.esubscription {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.esubscription .el-input__inner {
  min-height: 46px;
  border-radius: 999px;
}

.esubscription .el-button {
  min-height: 46px;
  border-radius: 999px;
  background: var(--orderly-primary) !important;
  border-color: var(--orderly-primary) !important;
  font-weight: 900;
}

#main-search-banner {
  min-height: clamp(430px, 52vw, 620px);
  border-bottom: 1px solid var(--orderly-border);
}

#main-search-banner h2 {
  color: var(--orderly-text);
  font-size: clamp(34px, 4vw, 58px);
  font-weight: 900;
  letter-spacing: -0.04em;
}

.home-search-wrap {
  width: min(680px, calc(100vw - 32px));
  padding: 10px;
  border: 1px solid var(--orderly-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--orderly-shadow);
}

.home-search-wrap .form-control,
.search-geocomplete .form-control {
  min-height: 50px;
  border-radius: 999px;
}

.form-label-group,
.auto-complete,
.checkout-panel,
.account-panel,
.cart-preview,
#vue-cart,
#vue-checkout,
#vue-login,
#vue-signup,
#vue-merchant-signup {
  color: var(--orderly-text);
}

#vue-login .card,
#vue-signup .card,
#vue-forgot-pass .card,
#vue-reset-password .card,
#vue-account-verification .card,
#vue-merchant-signup > .col:first-child {
  border: 1px solid var(--orderly-border);
  border-radius: 24px;
  box-shadow: var(--orderly-shadow);
}

.btn,
.el-button,
.q-btn {
  letter-spacing: 0;
}

.btn-black {
  background: #1e1e1e !important;
  border-color: #1e1e1e !important;
  color: #fff !important;
}

.btn-green-line,
.btn-outline-success {
  background: rgba(249, 119, 5, 0.08) !important;
  border-color: rgba(249, 119, 5, 0.28) !important;
  color: var(--orderly-primary) !important;
}

.mobile-home-banner {
  min-height: 300px;
  border-radius: 0 0 28px 28px;
}

:root[data-orderly-theme="dark"] #top-navigation,
:root[data-orderly-theme="dark"] .sub-footer {
  background: rgba(38, 38, 38, 0.94) !important;
}

:root[data-orderly-theme="dark"] .home-search-wrap {
  background: rgba(38, 38, 38, 0.94) !important;
}

:root[data-orderly-theme="dark"] .btn-black {
  background: #f5f5f5 !important;
  border-color: #f5f5f5 !important;
  color: #1e1e1e !important;
}

@media (max-width: 767px) {
  #top-navigation {
    min-height: 66px;
    padding: 10px 12px;
  }

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

  #main-search-banner {
    min-height: 360px;
  }

  #main-search-banner h2 {
    font-size: 32px;
  }
}

/* =========================
   KENYAN IMAGE REFRESH
========================= */

#main-search-banner {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.9) 36%, rgba(255, 255, 255, 0.28) 68%),
    url("../images/orderly/kenya-customer-hero-20260614.jpg") center right / cover no-repeat !important;
}

#main-search-banner::before,
#main-search-banner::after {
  content: none !important;
  display: none !important;
}

.mobile-home-banner {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.9)),
    url("../images/orderly/kenya-customer-hero-20260614.jpg") center / cover no-repeat !important;
}

.section-mobileapp,
.section-newmobileapp {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.72)),
    url("../images/orderly/kenya-mobile-tracking-20260614.jpg") center right / cover no-repeat !important;
}

.register-bg {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(249, 119, 5, 0.08)),
    url("../images/orderly/kenya-partner-hero-20260614.jpg") center / cover no-repeat !important;
}

.section-join-us,
.section-join-us2 {
  background:
    linear-gradient(135deg, rgba(30, 30, 30, 0.74), rgba(30, 30, 30, 0.22)),
    url("../images/orderly/kenya-merchant-support-20260614.jpg") center / cover no-repeat !important;
}

.track-map-div {
  background:
    linear-gradient(135deg, rgba(249, 119, 5, 0.16), rgba(255, 255, 255, 0.28)),
    url("../images/orderly/kenya-delivery-rider-20260614.jpg") center / cover no-repeat;
}

:root[data-orderly-theme="dark"] #main-search-banner {
  background:
    linear-gradient(90deg, rgba(30, 30, 30, 0.96) 0%, rgba(30, 30, 30, 0.86) 42%, rgba(30, 30, 30, 0.34) 76%),
    url("../images/orderly/kenya-customer-hero-20260614.jpg") center right / cover no-repeat !important;
}

:root[data-orderly-theme="dark"] .section-mobileapp,
:root[data-orderly-theme="dark"] .section-newmobileapp {
  background:
    linear-gradient(90deg, rgba(30, 30, 30, 0.94), rgba(30, 30, 30, 0.72)),
    url("../images/orderly/kenya-mobile-tracking-20260614.jpg") center right / cover no-repeat !important;
}

:root[data-orderly-theme="dark"] .mobile-home-banner {
  background:
    linear-gradient(180deg, rgba(30, 30, 30, 0.12), rgba(30, 30, 30, 0.9)),
    url("../images/orderly/kenya-customer-hero-20260614.jpg") center / cover no-repeat !important;
}

/* =========================
   FINAL CUSTOMER RELEASE POLISH
========================= */

:root {
  --orderly-touch: 48px;
  /* was a 22px re-widening of the radius; the sharp --ods scale is
     authoritative now (see the :root block at the top of this file) */
}

body {
  background: var(--orderly-bg) !important;
  color: var(--orderly-text) !important;
}

a,
.text-primary,
.link {
  color: var(--orderly-primary) !important;
}

.container,
.container-fluid {
  max-width: 1280px;
}

.btn,
button,
.el-button,
.q-btn,
.dropdown-toggle,
.pagination .page-link,
.kmrs-row .btn {
  min-height: var(--orderly-touch);
  border-radius: 14px !important;
  font-weight: 850;
  letter-spacing: 0;
}

.btn-primary,
.btn-green,
.btn-orange,
.btn-black,
.el-button--primary,
.q-btn.bg-primary,
.orderly-primary-action {
  background: var(--orderly-primary) !important;
  border-color: var(--orderly-primary) !important;
  color: #fff !important;
  box-shadow: 0 12px 24px rgba(249, 119, 5, 0.18) !important;
}

.btn-outline-primary,
.btn-green-line,
.btn-outline-success {
  background: rgba(249, 119, 5, 0.08) !important;
  border-color: rgba(249, 119, 5, 0.28) !important;
  color: var(--orderly-primary) !important;
}

.form-control,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="search"],
textarea,
select,
.custom-select,
.select2-container .select2-selection,
.el-input__inner,
.el-textarea__inner,
.q-field__control {
  min-height: var(--orderly-touch);
  border-radius: 14px !important;
  background: var(--orderly-surface) !important;
  border: 1px solid var(--orderly-border-strong) !important;
  color: var(--orderly-text) !important;
  box-shadow: none !important;
}

.form-control:focus,
input:focus,
textarea:focus,
select:focus,
.el-input__inner:focus,
.q-field--focused .q-field__control {
  border-color: rgba(249, 119, 5, 0.68) !important;
  box-shadow: 0 0 0 4px rgba(249, 119, 5, 0.12) !important;
}

label,
.control-label,
.form-label,
.q-field__label,
.el-form-item__label {
  color: var(--orderly-muted) !important;
  font-weight: 800;
}

.card,
.modal-content,
.dropdown-menu,
.checkout-panel,
.account-panel,
.cart-preview,
.restaurant-card,
.merchant-card,
.order-card,
.address-card,
.wallet-card,
.profile-card {
  background: var(--orderly-surface) !important;
  border: 1px solid var(--orderly-border) !important;
  border-radius: var(--orderly-radius-lg) !important;
  color: var(--orderly-text) !important;
  box-shadow: var(--orderly-shadow) !important;
}

#top-navigation {
  min-height: 72px;
  border-bottom: 1px solid var(--orderly-border);
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(18px);
}

#top-navigation .navbar-brand img,
.logo-main {
  max-height: 48px;
  object-fit: contain;
}

#main-search-banner {
  display: flex;
  align-items: center;
  min-height: clamp(560px, 62vw, 720px);
  color: var(--orderly-text);
}

#main-search-banner h2,
.mobile-home-banner h2 {
  max-width: 780px;
  color: var(--orderly-text) !important;
  font-size: clamp(38px, 4vw, 64px);
  font-weight: 950;
  line-height: 0.98;
  letter-spacing: 0;
}

.home-search-wrap,
.search-geocomplete,
.search-input-wrap {
  min-height: 66px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 22px 60px rgba(30, 30, 30, 0.16);
}

.home-search-wrap .btn,
.search-geocomplete .btn,
.search-input-wrap .btn {
  min-width: 58px;
  min-height: 58px;
  border-radius: 999px !important;
}

.section-mobileapp,
.section-newmobileapp,
.section-join-us,
.section-join-us2 {
  min-height: 430px;
  display: flex;
  align-items: center;
  color: var(--orderly-text);
}

.section-mobileapp h2,
.section-newmobileapp h2,
.section-join-us h2,
.section-join-us2 h2 {
  font-weight: 950;
  letter-spacing: 0;
}

.sub-footer,
footer,
.footer {
  background: var(--orderly-surface) !important;
  border-top: 1px solid var(--orderly-border);
  color: var(--orderly-muted) !important;
}

.sub-footer h5,
footer h5,
.footer h5 {
  color: var(--orderly-text) !important;
  font-weight: 900;
}

.no-results-section {
  min-height: 520px;
  display: grid;
  place-items: center;
  padding: clamp(32px, 5vw, 72px);
  border-radius: 28px;
  background: var(--orderly-surface);
  border: 1px solid var(--orderly-border);
  box-shadow: var(--orderly-shadow);
  text-align: center;
}

.no-results-section img {
  width: min(220px, 38vw);
  height: auto;
  opacity: 0.84;
  filter: saturate(0.92);
}

.no-results-section h3 {
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 950;
  color: var(--orderly-text) !important;
}

.no-results-section p {
  max-width: 620px;
  margin-inline: auto;
  color: var(--orderly-muted) !important;
}

.filter-options,
.filters,
.filter-sidebar,
.sidebar-filter {
  background: var(--orderly-surface) !important;
  border: 1px solid var(--orderly-border) !important;
  border-radius: 22px;
  padding: 18px;
  box-shadow: var(--orderly-shadow);
}

.filter-options .filter-row,
.filters .filter-row,
.filter-sidebar .filter-row {
  min-height: 48px;
}

.badge,
.badge-pill,
.q-badge,
.order-card__status,
.status,
.tag {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px !important;
  padding: 6px 12px !important;
  font-weight: 900 !important;
  line-height: 1;
}

.order-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  padding: clamp(18px, 2vw, 24px);
}

.order-card__merchant,
.order-card__body,
.order-card__aside {
  min-width: 0;
}

.order-card__logo {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  object-fit: cover;
  background: rgba(249, 119, 5, 0.08);
}

.order-card__id,
.order-card__merchant-name,
.order-card__total b {
  color: var(--orderly-text) !important;
  font-weight: 950;
}

.order-card__items,
.order-card__date,
.order-card__items-count,
.order-card__service {
  color: var(--orderly-muted) !important;
}

.order-card__actions .dropdown-toggle,
.order-card__actions .btn {
  min-width: 48px;
  padding-inline: 14px;
}

.track-order,
.order-progress,
.tracking-progress,
.checkout-steps {
  background: var(--orderly-surface);
  border: 1px solid var(--orderly-border);
  border-radius: 22px;
  padding: 22px;
  box-shadow: var(--orderly-shadow);
}

#vue-login,
#vue-signup,
#vue-forgot-pass,
#vue-reset-password,
#vue-account-verification,
#vue-merchant-signup,
.login-section,
.auth-section {
  color: var(--orderly-text) !important;
}

#vue-login .card,
#vue-signup .card,
#vue-forgot-pass .card,
#vue-reset-password .card,
#vue-account-verification .card,
.login-section .card,
.auth-section .card {
  width: min(560px, calc(100vw - 32px));
  padding: clamp(28px, 4vw, 52px) !important;
}

#vue-login h1,
#vue-login h2,
#vue-login h3,
#vue-signup h1,
#vue-signup h2,
#vue-signup h3,
.auth-section h1,
.auth-section h2 {
  color: var(--orderly-text) !important;
  font-weight: 950;
  letter-spacing: 0;
}

.cart-item,
.checkout-item,
.address-item,
.wallet-transaction,
.notification-item {
  min-height: 72px;
  border-bottom: 1px solid var(--orderly-border);
  padding: 16px 0;
}

.payment-option,
.payment-method,
.payment-list-item {
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--orderly-border);
  border-radius: 18px;
  padding: 16px;
  background: var(--orderly-surface);
}

.payment-option.active,
.payment-method.active,
.payment-list-item.active {
  border-color: rgba(249, 119, 5, 0.56);
  background: rgba(249, 119, 5, 0.1);
}

:root[data-orderly-theme="dark"] body {
  background: #1e1e1e !important;
  color: #f5f5f5 !important;
}

:root[data-orderly-theme="dark"] #top-navigation {
  background: rgba(31, 31, 31, 0.92) !important;
}

:root[data-orderly-theme="dark"] .card,
:root[data-orderly-theme="dark"] .modal-content,
:root[data-orderly-theme="dark"] .dropdown-menu,
:root[data-orderly-theme="dark"] .checkout-panel,
:root[data-orderly-theme="dark"] .account-panel,
:root[data-orderly-theme="dark"] .cart-preview,
:root[data-orderly-theme="dark"] .restaurant-card,
:root[data-orderly-theme="dark"] .merchant-card,
:root[data-orderly-theme="dark"] .order-card,
:root[data-orderly-theme="dark"] .address-card,
:root[data-orderly-theme="dark"] .wallet-card,
:root[data-orderly-theme="dark"] .profile-card,
:root[data-orderly-theme="dark"] .no-results-section,
:root[data-orderly-theme="dark"] .filter-options,
:root[data-orderly-theme="dark"] .filters,
:root[data-orderly-theme="dark"] .filter-sidebar,
:root[data-orderly-theme="dark"] .sidebar-filter,
:root[data-orderly-theme="dark"] .payment-option,
:root[data-orderly-theme="dark"] .payment-method,
:root[data-orderly-theme="dark"] .payment-list-item,
:root[data-orderly-theme="dark"] .track-order,
:root[data-orderly-theme="dark"] .order-progress,
:root[data-orderly-theme="dark"] .tracking-progress,
:root[data-orderly-theme="dark"] .checkout-steps {
  background: #262626 !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #f5f5f5 !important;
}

:root[data-orderly-theme="dark"] .form-control,
:root[data-orderly-theme="dark"] input[type="text"],
:root[data-orderly-theme="dark"] input[type="password"],
:root[data-orderly-theme="dark"] input[type="email"],
:root[data-orderly-theme="dark"] input[type="number"],
:root[data-orderly-theme="dark"] input[type="tel"],
:root[data-orderly-theme="dark"] input[type="search"],
:root[data-orderly-theme="dark"] textarea,
:root[data-orderly-theme="dark"] select,
:root[data-orderly-theme="dark"] .custom-select,
:root[data-orderly-theme="dark"] .select2-container .select2-selection,
:root[data-orderly-theme="dark"] .el-input__inner,
:root[data-orderly-theme="dark"] .el-textarea__inner,
:root[data-orderly-theme="dark"] .q-field__control,
:root[data-orderly-theme="dark"] .home-search-wrap,
:root[data-orderly-theme="dark"] .search-geocomplete,
:root[data-orderly-theme="dark"] .search-input-wrap {
  background: #1f1f1f !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #f5f5f5 !important;
}

:root[data-orderly-theme="dark"] #main-search-banner h2,
:root[data-orderly-theme="dark"] .mobile-home-banner h2,
:root[data-orderly-theme="dark"] .section-mobileapp,
:root[data-orderly-theme="dark"] .section-newmobileapp,
:root[data-orderly-theme="dark"] .section-mobileapp h2,
:root[data-orderly-theme="dark"] .section-newmobileapp h2,
:root[data-orderly-theme="dark"] .order-card__id,
:root[data-orderly-theme="dark"] .order-card__merchant-name,
:root[data-orderly-theme="dark"] .order-card__total b {
  color: #f5f5f5 !important;
}

:root[data-orderly-theme="dark"] .sub-footer,
:root[data-orderly-theme="dark"] footer,
:root[data-orderly-theme="dark"] .footer {
  background: #262626 !important;
  border-color: rgba(255, 255, 255, 0.14);
}

@media (max-width: 991px) {
  .order-card {
    grid-template-columns: 1fr;
  }

  #main-search-banner {
    min-height: 560px;
    padding: 42px 0;
  }

  .section-mobileapp,
  .section-newmobileapp,
  .section-join-us,
  .section-join-us2 {
    min-height: 360px;
    padding: 42px 0;
  }
}

@media (pointer: coarse) {
  .btn,
  button,
  .el-button,
  .q-btn,
  .dropdown-toggle,
  .payment-option,
  .payment-method,
  .payment-list-item {
    min-height: 52px;
  }
}

/* =========================
   MATERIAL 3 FINAL CUSTOMER PASS
========================= */

:root {
  --m3-bg: #f8f5f0;
  --m3-surface: #ffffff;
  --m3-surface-2: #fbfaf8;
  --m3-surface-3: #f3efe8;
  --m3-text: #1e1e1e;
  --m3-muted: #6f6a63;
  --m3-outline: rgba(30, 30, 30, 0.14);
  --m3-outline-strong: rgba(30, 30, 30, 0.22);
  --m3-radius: 20px;
  --m3-radius-sm: 14px;
  --m3-touch: 48px;
  --m3-shadow: 0 12px 30px rgba(30, 30, 30, 0.08);
}

:root[data-orderly-theme="dark"] {
  --m3-bg: #1e1e1e;
  --m3-surface: #282826;
  --m3-surface-2: #30302e;
  --m3-surface-3: #383632;
  --m3-text: #f7f2ec;
  --m3-muted: #c8c0b8;
  --m3-outline: rgba(255, 255, 255, 0.14);
  --m3-outline-strong: rgba(255, 255, 255, 0.22);
  --m3-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
}

html,
body,
button,
input,
select,
textarea {
  font-family: var(--orderly-font, "DM Sans", system-ui, sans-serif) !important;
}

body {
  background: var(--m3-bg) !important;
  color: var(--m3-text) !important;
}

.orderly-iconify-host {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  font-size: 24px !important;
  color: currentColor;
}

.orderly-iconify-host::before,
.orderly-iconify-host::after,
.zmdi::before,
[class*="zmdi-"]::before {
  content: none !important;
  display: none !important;
}

.orderly-iconify-host iconify-icon {
  display: inline-flex;
  width: 1em;
  height: 1em;
  color: currentColor;
}

.text-green,
a.text-green,
.btn-link.text-green,
.btn-green-line {
  color: var(--orderly-primary) !important;
}

.btn-green,
.btn-success,
.el-button--success,
.btn-green-circle,
.btn-green-circle:hover {
  background: var(--orderly-primary) !important;
  border-color: var(--orderly-primary) !important;
  color: #fff !important;
}

.btn-green-line {
  background: rgba(249, 119, 5, 0.08) !important;
  border-color: rgba(249, 119, 5, 0.32) !important;
}

.card,
.modal-content,
.el-card,
.menu-modal,
.items-modal,
.account-card,
.order-card,
.restaurant-card,
.payment-card,
.cart-summary,
.checkout-card {
  background: var(--m3-surface) !important;
  border: 1px solid var(--m3-outline) !important;
  border-radius: var(--m3-radius) !important;
  color: var(--m3-text) !important;
  box-shadow: var(--m3-shadow) !important;
}

.card-body {
  border: 0 !important;
  box-shadow: none !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
textarea,
select,
.form-control,
.custom-select,
.el-input__inner,
.el-textarea__inner,
.select2-selection {
  min-height: var(--m3-touch) !important;
  border-radius: var(--m3-radius-sm) !important;
  background: var(--m3-surface) !important;
  border: 1px solid var(--m3-outline) !important;
  color: var(--m3-text) !important;
  box-shadow: none !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):focus,
textarea:focus,
select:focus,
.form-control:focus,
.el-input__inner:focus,
.el-textarea__inner:focus {
  border-color: rgba(249, 119, 5, 0.72) !important;
  box-shadow: 0 0 0 4px rgba(249, 119, 5, 0.16) !important;
  outline: 0 !important;
}

.modal-content input,
.modal-content textarea,
.modal-content select,
.item-details-modal input,
.item-details-modal textarea,
.item-details-modal select,
[class*="item"] .modal-content input,
[class*="item"] .modal-content textarea,
[class*="item"] .modal-content select {
  background: var(--m3-surface-2) !important;
  border-color: var(--m3-outline) !important;
}

.modal-header,
.modal-footer {
  border-color: var(--m3-outline) !important;
}

.modal-footer .btn,
.modal-footer button,
.item-details-modal .btn,
.item-details-modal button {
  min-height: 52px;
  border-radius: 16px !important;
}

.custom-control {
  min-height: var(--m3-touch);
  display: flex;
  align-items: center;
  padding-left: 0 !important;
}

/* Multiple custom-radio/-checkbox controls rendered as siblings (e.g. the
   signup "membership program" choice) had zero gap between them --
   whatever renders them inline packs the next control's circle flush
   against the previous label's text. */
.custom-radio ~ .custom-radio,
.custom-checkbox ~ .custom-checkbox {
  margin-left: 28px;
}

.custom-control-input {
  position: absolute;
  opacity: 0;
}

.custom-control-label {
  position: relative;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding-left: 58px !important;
  margin: 0 !important;
  color: var(--m3-text) !important;
}

/* Every ::before/::after indicator below anchors to the label above via
   this shared base -- without content+position:absolute a pseudo-element
   just renders as inert inline text, which is why the radio/checkbox
   dot was appearing AFTER the label's text instead of on top of the
   ::before circle at the reserved left offset. */
.custom-switch .custom-control-label::before,
.custom-switch .custom-control-label::after,
.custom-radio .custom-control-label::before,
.custom-radio .custom-control-label::after,
.custom-checkbox .custom-control-label::before,
.custom-checkbox .custom-control-label::after {
  content: "";
  position: absolute;
}

.custom-switch .custom-control-label::before {
  left: 0 !important;
  top: 50% !important;
  width: 48px !important;
  height: 28px !important;
  transform: translateY(-50%);
  border-radius: 999px !important;
  background: var(--m3-surface-3) !important;
  border: 1px solid var(--m3-outline-strong) !important;
}

.custom-switch .custom-control-label::after {
  left: 4px !important;
  top: 50% !important;
  width: 20px !important;
  height: 20px !important;
  transform: translateY(-50%);
  border-radius: 999px !important;
  background: #fff !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.22);
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  background: var(--orderly-primary) !important;
  border-color: var(--orderly-primary) !important;
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
  transform: translate(20px, -50%) !important;
}

/* .custom-radio / .custom-checkbox had NO ::before/::after rules at all --
   only .custom-switch did. The label's 58px left-padding (shared by all
   three variants) reserved empty space, but with nothing drawn in it the
   still-present (opacity:0, but not off-flow) native input rendered
   inline instead, overlapping mid-label on some browsers ("Member[O]ip").
   Explicit circle/check indicators, positioned to fill that same gap. */
.custom-radio .custom-control-label::before {
  left: 0 !important;
  top: 50% !important;
  width: 22px !important;
  height: 22px !important;
  transform: translateY(-50%);
  border-radius: 999px !important;
  background: var(--orderly-surface, #fff) !important;
  border: 2px solid var(--orderly-muted, #69707a) !important;
}

.custom-radio .custom-control-label::after {
  left: 6px !important;
  top: 50% !important;
  width: 10px !important;
  height: 10px !important;
  transform: translateY(-50%) scale(0);
  border-radius: 999px !important;
  background: var(--orderly-primary) !important;
  transition: transform 120ms ease;
}

.custom-radio .custom-control-input:checked ~ .custom-control-label::before {
  border-color: var(--orderly-primary) !important;
}

.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
  transform: translateY(-50%) scale(1);
}

.custom-checkbox .custom-control-label::before {
  left: 0 !important;
  top: 50% !important;
  width: 22px !important;
  height: 22px !important;
  transform: translateY(-50%);
  border-radius: 6px !important;
  background: var(--orderly-surface, #fff) !important;
  border: 2px solid var(--orderly-muted, #69707a) !important;
}

.custom-checkbox .custom-control-label::after {
  left: 3px !important;
  top: 50% !important;
  width: 16px !important;
  height: 16px !important;
  transform: translateY(-50%) scale(0);
  background: var(--orderly-primary) !important;
  border-radius: 4px !important;
  transition: transform 120ms ease;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
  border-color: var(--orderly-primary) !important;
  background: var(--orderly-primary) !important;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
  transform: translateY(-50%) scale(1);
}

.menu-list,
.items-row,
.item-row,
.restaurant-list,
.account-content,
.checkout-page {
  color: var(--m3-text) !important;
}

.item-row,
.menu-item,
.restaurant-card,
.order-card {
  border-color: var(--m3-outline) !important;
}

.item-row img,
.menu-item img,
.restaurant-card img {
  border-radius: 16px;
  object-fit: cover;
  background: var(--m3-surface-2);
}

.qty-btn,
.btn-circle,
.rounded-pill.qty-btn {
  min-width: 48px !important;
  min-height: 48px !important;
  border-radius: 999px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.badge-success,
.el-tag--success {
  background: rgba(249, 119, 5, 0.12) !important;
  border-color: rgba(249, 119, 5, 0.34) !important;
  color: var(--orderly-primary) !important;
}

:root[data-orderly-theme="dark"] .modal-content,
:root[data-orderly-theme="dark"] .card,
:root[data-orderly-theme="dark"] .el-card,
:root[data-orderly-theme="dark"] .menu-modal,
:root[data-orderly-theme="dark"] .items-modal,
:root[data-orderly-theme="dark"] .account-card,
:root[data-orderly-theme="dark"] .order-card,
:root[data-orderly-theme="dark"] .restaurant-card,
:root[data-orderly-theme="dark"] .payment-card,
:root[data-orderly-theme="dark"] .cart-summary,
:root[data-orderly-theme="dark"] .checkout-card {
  background: var(--m3-surface) !important;
  border-color: var(--m3-outline) !important;
  color: var(--m3-text) !important;
}

:root[data-orderly-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
:root[data-orderly-theme="dark"] textarea,
:root[data-orderly-theme="dark"] select,
:root[data-orderly-theme="dark"] .form-control,
:root[data-orderly-theme="dark"] .custom-select,
:root[data-orderly-theme="dark"] .el-input__inner,
:root[data-orderly-theme="dark"] .el-textarea__inner,
:root[data-orderly-theme="dark"] .select2-selection {
  background: var(--m3-surface-2) !important;
  border-color: var(--m3-outline) !important;
  color: var(--m3-text) !important;
}

:root[data-orderly-theme="dark"] .modal-content input,
:root[data-orderly-theme="dark"] .modal-content textarea,
:root[data-orderly-theme="dark"] .modal-content select,
:root[data-orderly-theme="dark"] .item-details-modal input,
:root[data-orderly-theme="dark"] .item-details-modal textarea,
:root[data-orderly-theme="dark"] .item-details-modal select {
  background: #202020 !important;
  color: #f7f2ec !important;
}

:root[data-orderly-theme="dark"] .item-row,
:root[data-orderly-theme="dark"] .menu-item {
  background: #242424 !important;
}

/* =========================
   ORDERLY FINAL FORM SYSTEM
   Shared customer/admin field behavior.
========================= */

:root {
  --o-field-bg: var(--m3-surface, #ffffff);
  --o-field-bg-soft: var(--m3-surface-2, #f7f7f8);
  --o-field-text: var(--m3-text, #1d1d1f);
  --o-field-muted: var(--m3-muted, #6e6e73);
  --o-field-border: var(--m3-outline, rgba(0, 0, 0, 0.12));
  --o-field-border-strong: var(--m3-outline-strong, rgba(0, 0, 0, 0.2));
}

:root[data-orderly-theme="dark"] {
  --o-field-bg: #242424;
  --o-field-bg-soft: #1e1e1e;
  --o-field-text: #f5f5f5;
  --o-field-muted: #b9bec8;
  --o-field-border: rgba(255, 255, 255, 0.16);
  --o-field-border-strong: rgba(255, 255, 255, 0.26);
}

.o-field,
.o-select,
.o-textarea,
.o-file-input,
.form-control,
.custom-select,
.form-control-text,
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="color"]),
textarea,
select,
.el-input__inner,
.el-textarea__inner,
.select2-container .select2-selection,
.q-field__control,
.iti input,
.custom-file-label {
  min-height: 48px !important;
  border: 1px solid var(--o-field-border) !important;
  border-radius: 16px !important;
  background: var(--o-field-bg) !important;
  color: var(--o-field-text) !important;
  box-shadow: none !important;
  outline: 0 !important;
}

textarea,
.el-textarea__inner,
textarea.form-control {
  min-height: 116px !important;
  padding-top: 14px !important;
  resize: vertical;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="color"]),
textarea,
select,
.form-control,
.custom-select,
.el-input__inner,
.el-textarea__inner {
  padding: 12px 16px !important;
}

input::placeholder,
textarea::placeholder,
.form-control::placeholder,
.el-input__inner::placeholder,
.el-textarea__inner::placeholder,
.select2-selection__placeholder,
.q-field__native::placeholder,
.q-field__input::placeholder {
  color: color-mix(in srgb, var(--o-field-muted) 82%, transparent) !important;
  opacity: 1 !important;
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus,
.custom-select:focus,
.el-input__inner:focus,
.el-textarea__inner:focus,
.select2-container--focus .select2-selection,
.q-field--focused .q-field__control,
.iti input:focus {
  border-color: rgba(249, 119, 5, 0.72) !important;
  box-shadow: 0 0 0 4px rgba(249, 119, 5, 0.16) !important;
}

.q-field__control::before,
.q-field__control::after,
.q-field--outlined .q-field__control::before,
.q-field--outlined .q-field__control::after,
.q-field--standard .q-field__control::before,
.q-field--standard .q-field__control::after,
.q-field--filled .q-field__control::before,
.q-field--filled .q-field__control::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
}

.q-field__control,
.q-field__native,
.q-field__input {
  min-height: 48px !important;
}

.q-field__native,
.q-field__input {
  color: var(--o-field-text) !important;
  padding: 0 14px !important;
}

.custom-file-label,
.custom-file-label::after,
.qq-upload-button,
.qq-upload-list li,
.btn-file,
.browse,
[class*="browse"] {
  min-height: 48px !important;
  border-color: var(--o-field-border) !important;
  background: var(--o-field-bg) !important;
  color: var(--o-field-text) !important;
}

.custom-file-label::after,
.qq-upload-button,
.btn-file,
.browse,
[class*="browse"] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 14px !important;
  background: var(--orderly-primary, #f97705) !important;
  border-color: var(--orderly-primary, #f97705) !important;
  color: #fff !important;
  font-weight: 800;
}

.iti {
  width: 100%;
}

.iti__flag-container,
.iti__selected-flag {
  border-radius: 16px 0 0 16px !important;
  color: var(--o-field-text) !important;
}

input[type="color"],
.sp-replacer,
.minicolors-swatch,
.colorpicker-element .input-group-addon,
.colorpicker-element .input-group-text {
  min-width: 48px !important;
  min-height: 48px !important;
  border: 1px solid var(--o-field-border) !important;
  border-radius: 14px !important;
  background: var(--o-field-bg) !important;
  color: var(--o-field-text) !important;
}

:root[data-orderly-theme="dark"] .header,
:root[data-orderly-theme="dark"] .navbar,
:root[data-orderly-theme="dark"] .top-container,
:root[data-orderly-theme="dark"] .custom-file-label,
:root[data-orderly-theme="dark"] .qq-upload-list li {
  background: rgba(30, 30, 30, 0.96) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: var(--o-field-text) !important;
}

/* =========================
   ORDERLY LOCAL ICONIFY
========================= */

i.orderly-iconify-host::before,
i.orderly-iconify-host::after {
  content: none !important;
  display: none !important;
}

i.orderly-iconify-host iconify-icon,
.orderly-theme-toggle iconify-icon,
.btn iconify-icon,
button iconify-icon,
a iconify-icon {
  display: inline-flex;
  width: 1em;
  height: 1em;
  align-items: center;
  justify-content: center;
  color: currentColor;
  font-size: var(--orderly-icon-size, 22px);
}

.orderly-theme-toggle-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.orderly-theme-toggle.orderly-theme-toggle--topbar {
  position: static !important;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  box-shadow: none;
  background: transparent;
  color: var(--orderly-primary, #f97705);
}

.orderly-theme-toggle.orderly-theme-toggle--floating {
  /* Below the sticky site header (~64px), not overlapping its cart/menu
     icons on the right. */
  position: fixed !important;
  right: 18px;
  top: 70px;
  z-index: 900;
}

:root[data-orderly-theme="dark"] .orderly-theme-toggle.orderly-theme-toggle--topbar {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--orderly-primary, #f97705);
}

/* =========================
   ORDERLY REUSABLE MATERIAL LAYER
========================= */

.o-card,
.o-stat-card,
.o-table-card,
.o-payment-card,
.o-modal,
.o-empty-state,
.card,
.modal-content,
.account-card,
.order-card,
.restaurant-card,
.payment-card,
.cart-summary,
.checkout-card,
.menu-modal,
.items-modal {
  background: var(--m3-surface, #ffffff) !important;
  border: 1px solid var(--m3-outline, rgba(0, 0, 0, 0.12)) !important;
  border-radius: 24px !important;
  color: var(--m3-text, #1d1d1f) !important;
  box-shadow: var(--m3-shadow, 0 14px 40px rgba(0, 0, 0, 0.08)) !important;
}

.o-card,
.o-modal,
.o-empty-state {
  padding: clamp(18px, 2vw, 28px);
}

.o-dashboard-grid {
  width: min(100%, 1280px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
}

.o-stat-card {
  min-height: 148px;
  display: grid;
  align-content: end;
  gap: 10px;
  padding: 24px;
}

.o-stat-card__icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: rgba(249, 119, 5, 0.14);
  color: var(--orderly-primary, #f97705);
}

.o-stat-card__label {
  margin: 0;
  color: var(--m3-muted, #6e6e73);
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.o-stat-card__value {
  margin: 0;
  color: var(--m3-text, #1d1d1f);
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1;
  font-weight: 900;
}

.o-table-card,
.table-responsive {
  overflow: auto;
  scrollbar-gutter: stable both-edges;
}

.o-table-card table,
.table-responsive table {
  min-width: 720px;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.o-table-card thead th,
.table thead th {
  min-height: 48px;
  padding: 16px !important;
  background: var(--m3-surface-2, #f7f7f8) !important;
  color: var(--m3-muted, #6e6e73) !important;
  border-bottom: 1px solid var(--m3-outline, rgba(0, 0, 0, 0.12)) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.o-table-card tbody td,
.table tbody td {
  padding: 16px !important;
  border-bottom: 1px solid var(--m3-outline, rgba(0, 0, 0, 0.12)) !important;
}

.o-tabs,
.nav-tabs,
.q-tabs {
  display: flex;
  gap: 8px;
  align-items: center;
  border: 0 !important;
}

.o-tabs .nav-link,
.nav-tabs .nav-link,
.q-tab {
  min-height: 48px !important;
  border: 0 !important;
  border-radius: 16px !important;
  color: var(--m3-muted, #6e6e73) !important;
  font-weight: 800;
}

.o-tabs .active,
.nav-tabs .nav-link.active,
.q-tab--active {
  background: var(--orderly-primary, #f97705) !important;
  color: #fff !important;
}

.o-toggle,
.custom-switch .custom-control-label,
.q-toggle,
.el-switch {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
}

.o-empty-state,
.empty-state,
.no-results,
.no-data {
  min-height: 180px;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--m3-muted, #6e6e73) !important;
}

.o-payment-card,
.payment-card,
.payment-option {
  min-height: 88px !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 16px !important;
  border-radius: 22px !important;
}

.o-auth-shell,
.login-wrapper,
.section-auth,
.login-page {
  color: var(--m3-text, #1d1d1f);
}

.btn-green,
.btn-green-circle,
.btn-green-line,
.text-green,
a.text-green,
.btn-link.text-green {
  color: var(--orderly-primary, #f97705) !important;
}

.btn-green,
.btn-green-circle {
  background: var(--orderly-primary, #f97705) !important;
  border-color: var(--orderly-primary, #f97705) !important;
  color: #fff !important;
}

.btn-green-line {
  background: rgba(249, 119, 5, 0.1) !important;
  border-color: rgba(249, 119, 5, 0.34) !important;
}

.badge-success,
.label-success,
.status-complete,
.status-completed,
.order_status.completed {
  color: #11833f !important;
}

:root[data-orderly-theme="dark"] .o-card,
:root[data-orderly-theme="dark"] .o-stat-card,
:root[data-orderly-theme="dark"] .o-table-card,
:root[data-orderly-theme="dark"] .o-payment-card,
:root[data-orderly-theme="dark"] .o-modal,
:root[data-orderly-theme="dark"] .o-empty-state,
:root[data-orderly-theme="dark"] .card,
:root[data-orderly-theme="dark"] .modal-content,
:root[data-orderly-theme="dark"] .account-card,
:root[data-orderly-theme="dark"] .order-card,
:root[data-orderly-theme="dark"] .restaurant-card,
:root[data-orderly-theme="dark"] .payment-card,
:root[data-orderly-theme="dark"] .cart-summary,
:root[data-orderly-theme="dark"] .checkout-card,
:root[data-orderly-theme="dark"] .menu-modal,
:root[data-orderly-theme="dark"] .items-modal,
:root[data-orderly-theme="dark"] .table-responsive {
  background: var(--m3-surface, #262626) !important;
  border-color: var(--m3-outline, rgba(255, 255, 255, 0.12)) !important;
  color: var(--m3-text, #f5f5f5) !important;
}

:root[data-orderly-theme="dark"] .table tbody tr,
:root[data-orderly-theme="dark"] .no-results,
:root[data-orderly-theme="dark"] .no-data {
  background: transparent !important;
  color: var(--m3-text, #f5f5f5) !important;
}

@media (max-width: 991px) {
  .o-dashboard-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .o-dashboard-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================
   ORDERLY FINAL CUSTOMER AUTH AND PUBLIC POLISH
   Shared public Material 3 layer for auth, checkout, account, menu, and modals.
========================= */

:root {
  --orderly-font: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --orderly-public-field-bg: var(--m3-surface, var(--orderly-surface, #ffffff));
  --orderly-public-field-soft: var(--m3-surface-2, var(--orderly-surface-soft, #fbfaf8));
  --orderly-public-field-text: var(--m3-text, var(--orderly-text, #1f2328));
  --orderly-public-field-muted: var(--m3-muted, var(--orderly-muted, #69707a));
  --orderly-public-field-border: var(--m3-outline, var(--orderly-border-strong, rgba(31, 35, 40, 0.16)));
  --orderly-public-radius: 24px;
}

:root[data-orderly-theme="dark"] {
  --orderly-public-field-bg: #202020;
  --orderly-public-field-soft: #262626;
  --orderly-public-field-text: #f7f2ec;
  --orderly-public-field-muted: #bab7b2;
  --orderly-public-field-border: rgba(255, 255, 255, 0.18);
}

body,
button,
input,
select,
textarea,
label,
.dropdown-menu,
.modal-content {
  font-family: var(--orderly-font) !important;
}

.orderly-iconify-host,
i.orderly-iconify-host {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  font-size: 24px !important;
  color: currentColor !important;
}

.orderly-iconify-host::before,
.orderly-iconify-host::after,
i.orderly-iconify-host::before,
i.orderly-iconify-host::after,
.zmdi::before,
[class*="zmdi-"]::before {
  content: none !important;
  display: none !important;
}

.orderly-iconify-host iconify-icon,
i.orderly-iconify-host iconify-icon {
  display: inline-flex !important;
  width: 1em !important;
  height: 1em !important;
  color: currentColor !important;
}

.form-label-group,
.auth-section .form-label-group,
.login-section .form-label-group,
#vue-login .form-label-group,
#vue-signup .form-label-group,
#vue-forgot-pass .form-label-group,
#vue-reset-password .form-label-group,
#vue-account-verification .form-label-group,
#vue-checkout .form-label-group,
.modal-content .form-label-group,
.o-field {
  display: grid !important;
  gap: 8px !important;
  align-items: start !important;
  position: relative !important;
  margin-bottom: 18px !important;
}

.form-label-group::before,
.form-label-group::after,
.modal-content .form-label-group::before,
.modal-content .form-label-group::after {
  content: none !important;
  display: none !important;
}

.form-label-group > label:not(.custom-control-label):not(.form-check-label),
.auth-section .form-label-group > label:not(.custom-control-label):not(.form-check-label),
.login-section .form-label-group > label:not(.custom-control-label):not(.form-check-label),
.modal-content .form-label-group > label:not(.custom-control-label):not(.form-check-label),
.o-field > label {
  order: -1 !important;
  position: static !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  pointer-events: auto !important;
  color: var(--orderly-public-field-muted) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  opacity: 1 !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
textarea,
select,
.form-control,
.custom-select,
.el-input__inner,
.el-textarea__inner,
.select2-container .select2-selection,
.q-field__control,
.modal-content input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
.modal-content textarea,
.modal-content select,
.modal-content .form-control {
  min-height: 52px !important;
  width: 100% !important;
  border: 1px solid var(--orderly-public-field-border) !important;
  border-bottom-width: 1px !important;
  border-radius: 16px !important;
  background: var(--orderly-public-field-bg) !important;
  color: var(--orderly-public-field-text) !important;
  box-shadow: none !important;
  outline: 0 !important;
  padding: 0 16px !important;
  line-height: 1.35 !important;
  background-clip: padding-box !important;
}

textarea,
.modal-content textarea {
  min-height: 116px !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

input::placeholder,
textarea::placeholder,
.form-control::placeholder,
.el-input__inner::placeholder,
.el-textarea__inner::placeholder,
.q-field__native::placeholder,
.q-field__input::placeholder,
.select2-selection__placeholder {
  color: color-mix(in srgb, var(--orderly-public-field-muted) 74%, transparent) !important;
  opacity: 1 !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):focus,
textarea:focus,
select:focus,
.form-control:focus,
.custom-select:focus,
.el-input__inner:focus,
.el-textarea__inner:focus,
.select2-container--focus .select2-selection,
.modal-content input:focus,
.modal-content textarea:focus,
.modal-content select:focus {
  border-color: rgba(249, 119, 5, 0.76) !important;
  box-shadow: 0 0 0 4px rgba(249, 119, 5, 0.18) !important;
}

header,
#top-navigation,
#top-nav,
.mobile-nav,
.top-menu,
.navbar,
.header-wrap {
  background: color-mix(in srgb, var(--orderly-surface, #fff) 92%, transparent) !important;
  border-bottom: 1px solid var(--orderly-border, rgba(0, 0, 0, 0.1)) !important;
  color: var(--orderly-text, #1f2328) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.orderly-theme-toggle.orderly-theme-toggle--topbar {
  position: static !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  margin-left: 10px !important;
  box-shadow: none !important;
  background: rgba(249, 119, 5, 0.12) !important;
  border-color: rgba(249, 119, 5, 0.28) !important;
}

.auth-section,
.login-section,
#vue-login,
#vue-signup,
#vue-forgot-pass,
#vue-reset-password,
#vue-account-verification,
#vue-merchant-signup,
.section-auth,
.o-auth-shell {
  min-height: min(100vh, 920px);
  display: grid;
  align-items: center;
  color: var(--orderly-public-field-text) !important;
}

.auth-section .card,
.login-section .card,
#vue-login .card,
#vue-signup .card,
#vue-forgot-pass .card,
#vue-reset-password .card,
#vue-account-verification .card,
#vue-merchant-signup .card,
.o-auth-shell .card {
  width: min(560px, calc(100vw - 32px)) !important;
  margin: 0 auto !important;
  padding: clamp(28px, 4vw, 52px) !important;
  border-radius: 28px !important;
  background: var(--orderly-public-field-bg) !important;
  border: 1px solid var(--orderly-public-field-border) !important;
  color: var(--orderly-public-field-text) !important;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.14) !important;
}

.auth-section h1,
.auth-section h2,
.auth-section h3,
.login-section h1,
.login-section h2,
.login-section h3,
#vue-login h1,
#vue-login h2,
#vue-login h3,
#vue-signup h1,
#vue-signup h2,
#vue-signup h3 {
  color: var(--orderly-public-field-text) !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

.btn,
button,
input[type="submit"],
.el-button,
.q-btn {
  min-height: 48px;
  border-radius: 16px !important;
  font-weight: 850 !important;
}

.btn-green,
.btn-success,
.el-button--success,
.btn-primary,
.q-btn.bg-primary,
input[type="submit"].btn-green {
  background: var(--orderly-primary, #f97705) !important;
  border-color: var(--orderly-primary, #f97705) !important;
  color: #fff !important;
}

.checkout-panel,
.checkout-card,
.cart-summary,
.account-panel,
.account-card,
.profile-card,
.address-card,
.wallet-card,
.notification-item,
.order-card,
.restaurant-card,
.merchant-card,
.menu-item,
.item-row,
.items-row,
.payment-card,
.payment-option,
.payment-method,
.modal-content,
.o-card {
  border-radius: var(--orderly-public-radius) !important;
  background: var(--orderly-public-field-bg) !important;
  border: 1px solid var(--orderly-public-field-border) !important;
  color: var(--orderly-public-field-text) !important;
  box-shadow: 0 16px 44px rgba(31, 35, 40, 0.08) !important;
}

.menu-item,
.item-row,
.items-row,
.restaurant-card,
.order-card,
.checkout-card,
.checkout-panel {
  padding: clamp(16px, 2vw, 24px) !important;
}

.menu-item img,
.item-row img,
.items-row img,
.restaurant-card img,
.order-card img,
.media-list img,
.gallery-list img {
  border-radius: 18px !important;
  object-fit: cover !important;
  background: var(--orderly-public-field-soft) !important;
}

.modal-dialog {
  max-width: min(720px, calc(100vw - 32px)) !important;
}

.modal-content {
  overflow: hidden !important;
}

.modal-header,
.modal-footer {
  border-color: var(--orderly-public-field-border) !important;
  background: var(--orderly-public-field-bg) !important;
}

.modal-body {
  background: var(--orderly-public-field-bg) !important;
  color: var(--orderly-public-field-text) !important;
}

.modal-footer .btn,
.modal-footer button {
  min-height: 52px !important;
}

.payment-option,
.payment-method,
.payment-list-item,
.payment-card {
  min-height: 88px !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

.payment-option.active,
.payment-method.active,
.payment-list-item.active,
.payment-card.active,
.payment-card.selected {
  border-color: rgba(249, 119, 5, 0.58) !important;
  background: rgba(249, 119, 5, 0.1) !important;
  box-shadow: 0 0 0 4px rgba(249, 119, 5, 0.16) !important;
}

.custom-switch,
.custom-control.custom-switch,
.custom-control,
.o-toggle,
.q-toggle,
.el-switch {
  min-height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
}

.custom-control-label {
  color: var(--orderly-public-field-text) !important;
  font-weight: 800 !important;
}

.custom-switch .custom-control-label {
  min-height: 32px !important;
  padding-left: 62px !important;
}

.custom-switch .custom-control-label::before {
  left: 0 !important;
  top: 50% !important;
  width: 52px !important;
  height: 30px !important;
  transform: translateY(-50%) !important;
  border-radius: 999px !important;
  background: var(--orderly-public-field-soft) !important;
  border: 1px solid var(--orderly-public-field-border) !important;
}

.custom-switch .custom-control-label::after {
  left: 4px !important;
  top: 50% !important;
  width: 22px !important;
  height: 22px !important;
  transform: translateY(-50%) !important;
  border-radius: 999px !important;
  background: #fff !important;
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  background: var(--orderly-primary, #f97705) !important;
  border-color: var(--orderly-primary, #f97705) !important;
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
  transform: translate(22px, -50%) !important;
}

.no-results,
.no-results-section,
.empty-state,
.o-empty-state,
.search-empty,
.restaurant-empty {
  min-height: 320px !important;
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
  color: var(--orderly-public-field-muted) !important;
}

.filter-options,
.filters,
.filter-sidebar,
.sidebar-filter,
.filter-panel {
  border-radius: 24px !important;
  background: var(--orderly-public-field-bg) !important;
  border: 1px solid var(--orderly-public-field-border) !important;
  color: var(--orderly-public-field-text) !important;
  padding: 18px !important;
}

.sub-footer,
footer,
.footer {
  background: var(--orderly-public-field-bg) !important;
  border-top: 1px solid var(--orderly-public-field-border) !important;
  color: var(--orderly-public-field-text) !important;
}

.sub-footer a,
footer a,
.footer a,
a,
.text-green,
a.text-green {
  color: var(--orderly-primary, #f97705) !important;
}

:root[data-orderly-theme="dark"] body {
  background:
    radial-gradient(circle at top right, rgba(249, 119, 5, 0.1), transparent 32%),
    #1e1e1e !important;
  color: #f7f2ec !important;
}

:root[data-orderly-theme="dark"] header,
:root[data-orderly-theme="dark"] #top-navigation,
:root[data-orderly-theme="dark"] #top-nav,
:root[data-orderly-theme="dark"] .mobile-nav,
:root[data-orderly-theme="dark"] .top-menu,
:root[data-orderly-theme="dark"] .navbar,
:root[data-orderly-theme="dark"] .header-wrap {
  background: rgba(30, 30, 30, 0.96) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #f7f2ec !important;
}

:root[data-orderly-theme="dark"] .checkout-panel,
:root[data-orderly-theme="dark"] .checkout-card,
:root[data-orderly-theme="dark"] .cart-summary,
:root[data-orderly-theme="dark"] .account-panel,
:root[data-orderly-theme="dark"] .account-card,
:root[data-orderly-theme="dark"] .profile-card,
:root[data-orderly-theme="dark"] .address-card,
:root[data-orderly-theme="dark"] .wallet-card,
:root[data-orderly-theme="dark"] .notification-item,
:root[data-orderly-theme="dark"] .order-card,
:root[data-orderly-theme="dark"] .restaurant-card,
:root[data-orderly-theme="dark"] .merchant-card,
:root[data-orderly-theme="dark"] .menu-item,
:root[data-orderly-theme="dark"] .item-row,
:root[data-orderly-theme="dark"] .items-row,
:root[data-orderly-theme="dark"] .payment-card,
:root[data-orderly-theme="dark"] .payment-option,
:root[data-orderly-theme="dark"] .payment-method,
:root[data-orderly-theme="dark"] .modal-content,
:root[data-orderly-theme="dark"] .modal-header,
:root[data-orderly-theme="dark"] .modal-footer,
:root[data-orderly-theme="dark"] .modal-body,
:root[data-orderly-theme="dark"] .filter-options,
:root[data-orderly-theme="dark"] .filters,
:root[data-orderly-theme="dark"] .filter-sidebar,
:root[data-orderly-theme="dark"] .sidebar-filter,
:root[data-orderly-theme="dark"] .filter-panel,
:root[data-orderly-theme="dark"] .sub-footer,
:root[data-orderly-theme="dark"] footer,
:root[data-orderly-theme="dark"] .footer {
  background: #262626 !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #f7f2ec !important;
}

:root[data-orderly-theme="dark"] .modal-content input,
:root[data-orderly-theme="dark"] .modal-content textarea,
:root[data-orderly-theme="dark"] .modal-content select,
:root[data-orderly-theme="dark"] .modal-content .form-control,
:root[data-orderly-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
:root[data-orderly-theme="dark"] textarea,
:root[data-orderly-theme="dark"] select,
:root[data-orderly-theme="dark"] .form-control,
:root[data-orderly-theme="dark"] .custom-select,
:root[data-orderly-theme="dark"] .el-input__inner,
:root[data-orderly-theme="dark"] .el-textarea__inner,
:root[data-orderly-theme="dark"] .select2-container .select2-selection,
:root[data-orderly-theme="dark"] .q-field__control {
  background: #202020 !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #f7f2ec !important;
}

:root[data-orderly-theme="dark"] .no-results,
:root[data-orderly-theme="dark"] .no-results-section,
:root[data-orderly-theme="dark"] .empty-state,
:root[data-orderly-theme="dark"] .o-empty-state,
:root[data-orderly-theme="dark"] .search-empty,
:root[data-orderly-theme="dark"] .restaurant-empty {
  background: transparent !important;
  color: #d2cec7 !important;
}

@media (max-width: 767px) {
  .auth-section,
  .login-section,
  #vue-login,
  #vue-signup,
  #vue-forgot-pass,
  #vue-reset-password,
  #vue-account-verification,
  #vue-merchant-signup {
    min-height: auto;
    padding: 24px 0;
  }

  .modal-dialog {
    max-width: calc(100vw - 18px) !important;
    margin: 9px auto !important;
  }
}


/* ============================================================
   AUTH PAGES — FINAL POLISH (login / signup / OTP / reset)
   Mobile-first; relies on Orderly tokens, dark mode automatic.
   ============================================================ */

.login-container {
  max-width: 440px;
  width: 100%;
}

@media (min-width: 576px) {
  .login-container {
    background: var(--orderly-surface);
    border: 1px solid var(--orderly-border);
    border-radius: var(--orderly-radius-lg);
    box-shadow: var(--orderly-shadow);
    padding: 2.25rem 2rem !important;
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }
}

@media (max-width: 575.98px) {
  .login-container {
    padding: 1.25rem 1rem calc(1.5rem + env(safe-area-inset-bottom)) !important;
  }
}

.login-container > h5 {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--orderly-text);
}

/* Inputs: comfortable touch targets, clear focus */
#vue-login .form-control,
#vue-signup .form-control,
#vue-forgot-pass .form-control,
#vue-reset-password .form-control,
#vue-account-verification .form-control {
  min-height: 52px;
  border-radius: var(--orderly-radius-sm);
  border: 1px solid var(--orderly-border-strong);
  background: var(--orderly-surface);
  color: var(--orderly-text);
  font-size: 16px; /* prevents iOS zoom-on-focus */
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#vue-login .form-control:focus,
#vue-signup .form-control:focus,
#vue-forgot-pass .form-control:focus,
#vue-reset-password .form-control:focus,
#vue-account-verification .form-control:focus {
  border-color: var(--orderly-primary);
  box-shadow: var(--orderly-focus);
  outline: none;
}

/* Primary action buttons: big, confident, thumb-friendly */
#vue-login .btn-green,
#vue-signup .btn-green,
#vue-forgot-pass .btn-green,
#vue-reset-password .btn-green,
#vue-account-verification .btn-green {
  min-height: 52px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
}

#vue-login .btn-light,
#vue-signup .btn-light {
  min-height: 48px;
  border-radius: 999px;
  border: 1px solid var(--orderly-border-strong);
  background: var(--orderly-surface-soft);
  color: var(--orderly-text);
  font-weight: 600;
}

/* OTP entry: bigger, spaced digits */
#vue-login input#otp,
#vue-signup input#otp,
#vue-account-verification input#otp {
  font-size: 1.5rem;
  letter-spacing: 0.45em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Password visibility toggle: align inside the field, easy to tap */
.change_field_password {
  position: relative;
}
.change_field_password > a {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--orderly-muted);
  z-index: 3;
}
.change_field_password > a:hover,
.change_field_password > a:active {
  color: var(--orderly-primary);
}
.change_field_password .form-control {
  padding-right: 52px;
}

/* Alerts inside auth flows */
#vue-login .alert,
#vue-signup .alert,
#vue-forgot-pass .alert,
#vue-reset-password .alert,
#vue-account-verification .alert {
  border-radius: var(--orderly-radius-sm);
  font-size: 0.9rem;
}

/* Secondary links: consistent, comfortable */
.login-container .a-12 {
  font-size: 0.85rem;
  color: var(--orderly-muted);
}
.login-container .a-12:hover {
  color: var(--orderly-primary);
}

/* Social login buttons keep their own brand look; just space them well */
.login-container .mt-4.text-center {
  margin-top: 1.1rem !important;
}

/* Radio group (Email/Mobile toggle in OTP mode) */
#vue-login .el-radio-group {
  width: 100%;
  justify-content: center;
  margin: 0.4rem 0 0.9rem;
}

/* .btn-grey (menu-data.php's "Add to cart") had zero override anywhere in
   this file, so style.css's vendor rule won by default: white text on
   #b2b2b2 -- well under WCAG contrast minimums, read as barely-visible
   grey-on-grey. Same bug class as the toggle switch / btn-yellow fixes on
   the backoffice side. */
.btn-grey {
  background: var(--orderly-surface-soft, var(--orderly-bg, #f5f2ec)) !important;
  border: 1px solid var(--orderly-primary) !important;
  color: var(--orderly-primary) !important;
  font-weight: 600 !important;
}

.btn-grey:hover {
  background: var(--orderly-primary) !important;
  color: #fff !important;
}

.quantity-parent .quantity {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

.quantity-parent .qty-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  flex: 0 0 32px !important;
  background: var(--orderly-primary) !important;
  color: #fff !important;
}

.quantity-parent .qty {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 24px !important;
  font-weight: 600 !important;
  color: var(--orderly-text) !important;
}
/* Customer account sidebar/dropdown icons were plain PNG raster images
   (account.png, orders-icon.png, etc.) predating the Phosphor icon
   system -- replace each with the equivalent Phosphor duotone glyph as
   an inline SVG data URI, in Orderly orange, so no new HTTP requests
   or JS decoration pass is needed. */
.siderbar-menu .account a,
.with-icon-account {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cg%20fill%3D%22%23f97705%22%3E%3Cpath%20d%3D%22M224%20128a95.76%2095.76%200%200%201-31.8%2071.37A72%2072%200%200%200%20128%20160a40%2040%200%201%200-40-40a40%2040%200%200%200%2040%2040a72%2072%200%200%200-64.2%2039.37A96%2096%200%201%201%20224%20128%22%20opacity%3D%22.2%22/%3E%3Cpath%20d%3D%22M128%2024a104%20104%200%201%200%20104%20104A104.11%20104.11%200%200%200%20128%2024M74.08%20197.5a64%2064%200%200%201%20107.84%200a87.83%2087.83%200%200%201-107.84%200M96%20120a32%2032%200%201%201%2032%2032a32%2032%200%200%201-32-32m97.76%2066.41a79.66%2079.66%200%200%200-36.06-28.75a48%2048%200%201%200-59.4%200a79.66%2079.66%200%200%200-36.06%2028.75a88%2088%200%201%201%20131.52%200%22/%3E%3C/g%3E%3C/svg%3E") !important;
  background-size: 20px !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
}

.siderbar-menu .orders a,
.with-icon-orders {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cg%20fill%3D%22%23f97705%22%3E%3Cpath%20d%3D%22M224%2056v152l-32-16l-32%2016l-32-16l-32%2016l-32-16l-32%2016V56a8%208%200%200%201%208-8h176a8%208%200%200%201%208%208%22%20opacity%3D%22.2%22/%3E%3Cpath%20d%3D%22M72%20104a8%208%200%200%201%208-8h96a8%208%200%200%201%200%2016H80a8%208%200%200%201-8-8m8%2040h96a8%208%200%200%200%200-16H80a8%208%200%200%200%200%2016m152-88v152a8%208%200%200%201-11.58%207.15L192%20200.94l-28.42%2014.21a8%208%200%200%201-7.16%200L128%20200.94l-28.42%2014.21a8%208%200%200%201-7.16%200L64%20200.94l-28.42%2014.21A8%208%200%200%201%2024%20208V56a16%2016%200%200%201%2016-16h176a16%2016%200%200%201%2016%2016m-16%200H40v139.06l20.42-10.22a8%208%200%200%201%207.16%200L96%20199.06l28.42-14.22a8%208%200%200%201%207.16%200L160%20199.06l28.42-14.22a8%208%200%200%201%207.16%200L216%20195.06Z%22/%3E%3C/g%3E%3C/svg%3E") !important;
  background-size: 18px !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
}

.siderbar-menu .booking a,
.with-icon-booking,
.siderbar-menu .bookings a,
.with-icon-bookings {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cg%20fill%3D%22%23f97705%22%3E%3Cpath%20d%3D%22M216%2048v40H40V48a8%208%200%200%201%208-8h160a8%208%200%200%201%208%208%22%20opacity%3D%22.2%22/%3E%3Cpath%20d%3D%22M208%2032h-24v-8a8%208%200%200%200-16%200v8H88v-8a8%208%200%200%200-16%200v8H48a16%2016%200%200%200-16%2016v160a16%2016%200%200%200%2016%2016h160a16%2016%200%200%200%2016-16V48a16%2016%200%200%200-16-16M72%2048v8a8%208%200%200%200%2016%200v-8h80v8a8%208%200%200%200%2016%200v-8h24v32H48V48Zm136%20160H48V96h160zm-38.34-85.66a8%208%200%200%201%200%2011.32l-48%2048a8%208%200%200%201-11.32%200l-24-24a8%208%200%200%201%2011.32-11.32L116%20164.69l42.34-42.35a8%208%200%200%201%2011.32%200%22/%3E%3C/g%3E%3C/svg%3E") !important;
  background-size: 20px !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
}

.siderbar-menu .offers a,
.with-icon-vouchers {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cg%20fill%3D%22%23f97705%22%3E%3Cpath%20d%3D%22M237.66%20153L153%20237.66a8%208%200%200%201-11.31%200l-99.35-99.32a8%208%200%200%201-2.34-5.65V40h92.69a8%208%200%200%201%205.65%202.34l99.32%2099.32a8%208%200%200%201%200%2011.34%22%20opacity%3D%22.2%22/%3E%3Cpath%20d%3D%22M243.31%20136L144%2036.69A15.86%2015.86%200%200%200%20132.69%2032H40a8%208%200%200%200-8%208v92.69A15.86%2015.86%200%200%200%2036.69%20144L136%20243.31a16%2016%200%200%200%2022.63%200l84.68-84.68a16%2016%200%200%200%200-22.63m-96%2096L48%20132.69V48h84.69L232%20147.31ZM96%2084a12%2012%200%201%201-12-12a12%2012%200%200%201%2012%2012%22/%3E%3C/g%3E%3C/svg%3E") !important;
  background-size: 18px !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
}

.siderbar-menu .favourites a,
.with-icon-savedstore {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cg%20fill%3D%22%23f97705%22%3E%3Cpath%20d%3D%22M232%20102c0%2066-104%20122-104%20122S24%20168%2024%20102a54%2054%200%200%201%2054-54c22.59%200%2041.94%2012.31%2050%2032c8.06-19.69%2027.41-32%2050-32a54%2054%200%200%201%2054%2054%22%20opacity%3D%22.2%22/%3E%3Cpath%20d%3D%22M178%2040c-20.65%200-38.73%208.88-50%2023.89C116.73%2048.88%2098.65%2040%2078%2040a62.07%2062.07%200%200%200-62%2062c0%2070%20103.79%20126.66%20108.21%20129a8%208%200%200%200%207.58%200C136.21%20228.66%20240%20172%20240%20102a62.07%2062.07%200%200%200-62-62m-50%20174.8c-18.26-10.64-96-59.11-96-112.8a46.06%2046.06%200%200%201%2046-46c19.45%200%2035.78%2010.36%2042.6%2027a8%208%200%200%200%2014.8%200c6.82-16.67%2023.15-27%2042.6-27a46.06%2046.06%200%200%201%2046%2046c0%2053.61-77.76%20102.15-96%20112.8%22/%3E%3C/g%3E%3C/svg%3E") !important;
  background-size: 18px !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
}

.siderbar-menu .payments a,
.with-icon-payments {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cg%20fill%3D%22%23f97705%22%3E%3Cpath%20d%3D%22M232%2096v96a8%208%200%200%201-8%208H32a8%208%200%200%201-8-8V96Z%22%20opacity%3D%22.2%22/%3E%3Cpath%20d%3D%22M224%2048H32a16%2016%200%200%200-16%2016v128a16%2016%200%200%200%2016%2016h192a16%2016%200%200%200%2016-16V64a16%2016%200%200%200-16-16m0%2016v24H32V64Zm0%20128H32v-88h192zm-16-24a8%208%200%200%201-8%208h-32a8%208%200%200%201%200-16h32a8%208%200%200%201%208%208m-64%200a8%208%200%200%201-8%208h-16a8%208%200%200%201%200-16h16a8%208%200%200%201%208%208%22/%3E%3C/g%3E%3C/svg%3E") !important;
  background-size: 18px !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
}

.siderbar-menu .addresses a,
.with-icon-addresses {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cg%20fill%3D%22%23f97705%22%3E%3Cpath%20d%3D%22M128%2024a80%2080%200%200%200-80%2080c0%2072%2080%20128%2080%20128s80-56%2080-128a80%2080%200%200%200-80-80m0%20112a32%2032%200%201%201%2032-32a32%2032%200%200%201-32%2032%22%20opacity%3D%22.2%22/%3E%3Cpath%20d%3D%22M128%2064a40%2040%200%201%200%2040%2040a40%2040%200%200%200-40-40m0%2064a24%2024%200%201%201%2024-24a24%2024%200%200%201-24%2024m0-112a88.1%2088.1%200%200%200-88%2088c0%2031.4%2014.51%2064.68%2042%2096.25a254.2%20254.2%200%200%200%2041.45%2038.3a8%208%200%200%200%209.18%200a254.2%20254.2%200%200%200%2041.37-38.3c27.45-31.57%2042-64.85%2042-96.25a88.1%2088.1%200%200%200-88-88m0%20206c-16.53-13-72-60.75-72-118a72%2072%200%200%201%20144%200c0%2057.23-55.47%20105-72%20118%22/%3E%3C/g%3E%3C/svg%3E") !important;
  background-size: 16px !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
}

.siderbar-menu .points a,
.with-icon-points,
.with-icon-gift,
.siderbar-menu .gift a {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cg%20fill%3D%22%23f97705%22%3E%3Cpath%20d%3D%22M208%20128v72a8%208%200%200%201-8%208H56a8%208%200%200%201-8-8v-72Z%22%20opacity%3D%22.2%22/%3E%3Cpath%20d%3D%22M216%2072h-35.08c.39-.33.79-.65%201.17-1A29.53%2029.53%200%200%200%20192%2049.57A32.62%2032.62%200%200%200%20158.44%2016A29.53%2029.53%200%200%200%20137%2025.91a55%2055%200%200%200-9%2014.48a55%2055%200%200%200-9-14.48A29.53%2029.53%200%200%200%2097.56%2016A32.62%2032.62%200%200%200%2064%2049.57A29.53%2029.53%200%200%200%2073.91%2071c.38.33.78.65%201.17%201H40a16%2016%200%200%200-16%2016v32a16%2016%200%200%200%2016%2016v64a16%2016%200%200%200%2016%2016h144a16%2016%200%200%200%2016-16v-64a16%2016%200%200%200%2016-16V88a16%2016%200%200%200-16-16m-67-35.49a13.7%2013.7%200%200%201%2010-4.5h.49A16.62%2016.62%200%200%201%20176%2049.08a13.7%2013.7%200%200%201-4.5%2010c-9.49%208.4-25.24%2011.36-35%2012.4c1.2-10.59%204.5-25.98%2012.5-34.97m-64.09.36A16.63%2016.63%200%200%201%2096.59%2032h.49a13.7%2013.7%200%200%201%2010%204.5c8.39%209.48%2011.35%2025.2%2012.39%2034.92c-9.72-1-25.44-4-34.92-12.39a13.7%2013.7%200%200%201-4.5-10a16.6%2016.6%200%200%201%204.82-12.16ZM40%2088h80v32H40Zm16%2048h64v64H56Zm144%2064h-64v-64h64Zm16-80h-80V88h80z%22/%3E%3C/g%3E%3C/svg%3E") !important;
  background-size: 18px !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
}

.siderbar-menu .logout a,
.with-icon-logout {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cg%20fill%3D%22%23f97705%22%3E%3Cpath%20d%3D%22M224%2056v144a16%2016%200%200%201-16%2016H48V40h160a16%2016%200%200%201%2016%2016%22%20opacity%3D%22.2%22/%3E%3Cpath%20d%3D%22M120%20216a8%208%200%200%201-8%208H48a8%208%200%200%201-8-8V40a8%208%200%200%201%208-8h64a8%208%200%200%201%200%2016H56v160h56a8%208%200%200%201%208%208m109.66-93.66l-40-40a8%208%200%200%200-11.32%2011.32L204.69%20120H112a8%208%200%200%200%200%2016h92.69l-26.35%2026.34a8%208%200%200%200%2011.32%2011.32l40-40a8%208%200%200%200%200-11.32%22/%3E%3C/g%3E%3C/svg%3E") !important;
  background-size: 18px !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
}

.siderbar-menu .wallet a,
.with-icon-wallet {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cg%20fill%3D%22%23f97705%22%3E%3Cpath%20d%3D%22M224%2080v112a8%208%200%200%201-8%208H56a16%2016%200%200%201-16-16V56a16%2016%200%200%200%2016%2016h160a8%208%200%200%201%208%208%22%20opacity%3D%22.2%22/%3E%3Cpath%20d%3D%22M216%2064H56a8%208%200%200%201%200-16h136a8%208%200%200%200%200-16H56a24%2024%200%200%200-24%2024v128a24%2024%200%200%200%2024%2024h160a16%2016%200%200%200%2016-16V80a16%2016%200%200%200-16-16m0%20128H56a8%208%200%200%201-8-8V78.63A23.8%2023.8%200%200%200%2056%2080h160Zm-48-60a12%2012%200%201%201%2012%2012a12%2012%200%200%201-12-12%22/%3E%3C/g%3E%3C/svg%3E") !important;
  background-size: 18px !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
}

.with-icon-livechat {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cg%20fill%3D%22%23f97705%22%3E%3Cpath%20d%3D%22M224%20128a95.42%2095.42%200%200%201-11.63%2046L224%20224l-50-11.37A96%2096%200%201%201%20224%20128%22%20opacity%3D%22.2%22/%3E%3Cpath%20d%3D%22M128%2024a104%20104%200%200%200-90.12%20155.6l-13.36%2038.11A16%2016%200%200%200%2044.29%20238a16.2%2016.2%200%200%200%205.13-.84l38.13-13.36A104%20104%200%201%200%20128%2024m0%20192a87.87%2087.87%200%200%201-44.06-11.81a8%208%200%200%200-6.54-.67L40%20216l12.15-34.7a8%208%200%200%200-.66-6.54A88%2088%200%201%201%20128%20216%22/%3E%3C/g%3E%3C/svg%3E") !important;
  background-size: 18px !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
}

/* ============================================================
   MOBILE CART ACCESS FIX (2026-07-22)
   The desktop cart sidebar (#vue-cart, wrapped in a Bootstrap
   ".menu-right" column) is "d-none d-lg-block" -- deliberately
   hidden below the 992px breakpoint. But the header cart icon is a
   plain <a href="#vue-cart"> anchor jump, not a modal trigger, so on
   phones tapping it did nothing (the target was 0x0/display:none) --
   customers on mobile had NO way to see or reach checkout. Turning it
   into a persistent bottom sheet instead of hiding it. This affects
   the majority of customers per the merchant (mobile-first traffic).
   ============================================================ */
@media (max-width: 991.98px) {
  .menu-right.d-none {
    display: block !important;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0;
    padding: 0;
    background: var(--orderly-surface);
    border-top: 1px solid var(--orderly-border-strong);
  }

  .menu-right.d-none #vue-cart {
    max-height: min(60vh, 480px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .menu-right.d-none .inner-wrapper-sticky {
    padding: 12px var(--content-x-mobile, 16px)
      calc(12px + env(safe-area-inset-bottom, 0px));
  }

  /* Keep the item rows from dominating the sheet -- title, total, and
     the Checkout button stay reachable without scrolling first. */
  .menu-right.d-none .section-cart .items {
    max-height: 22vh;
    overflow-y: auto;
  }

  /* The menu content needs bottom clearance so the last items aren't
     hidden behind the new fixed bar. Collapsed-empty-cart height is
     small; this covers the common 1-3 item case without wasting space
     when the cart is empty (no items yet -> just title + CTA). */
  body {
    padding-bottom: 100px;
  }
}

/* Customer storefront home: visual hierarchy only; feeds and address flow stay unchanged. */
#top-navigation { min-height: 72px; display: flex; align-items: center; padding: 10px clamp(14px, 3vw, 42px); background: var(--orderly-surface) !important; border-bottom: 1px solid var(--orderly-border) !important; }
#top-navigation > [class*="col"] { min-width: 0; }
.orderly-customer-actions { gap: 10px; }
.orderly-theme-toggle--topbar { position: static; width: 40px; height: 40px; min-height: 40px; padding: 0; flex: 0 0 40px; border-radius: var(--orderly-radius-sm); background: var(--orderly-surface-soft); color: var(--orderly-text); box-shadow: none; }
.orderly-theme-toggle--topbar:hover, .orderly-theme-toggle--topbar:focus-visible { background: var(--orderly-surface); border-color: var(--orderly-primary); color: var(--orderly-primary); box-shadow: none; outline: 2px solid rgba(249,119,5,.2); outline-offset: 2px; }
.orderly-theme-toggle--topbar svg { width: 19px; height: 19px; stroke-width: 2; }
#main-search-banner { min-height: clamp(390px, 43vw, 540px); padding: clamp(42px, 7vw, 88px) 18px; align-items: center; justify-content: center; background: var(--orderly-surface-soft) !important; }
#main-search-banner .banner-center { width: min(100%, 740px); }
#main-search-banner h2, .mobile-home-banner h2 { max-width: 650px; margin-left: auto; margin-right: auto; color: var(--orderly-text) !important; font-size: clamp(32px, 4vw, 54px); font-weight: 800; line-height: 1.05; letter-spacing: -.035em; }
.home-search-wrap, .search-geocomplete, .search-input-wrap { border: 1px solid var(--orderly-border-strong) !important; border-radius: var(--orderly-radius) !important; background: var(--orderly-surface) !important; box-shadow: none !important; }
#vue-home-widgets > .container { max-width: 1240px; margin-top: 0 !important; padding-top: clamp(32px, 5vw, 64px); padding-bottom: clamp(32px, 5vw, 64px); }
#vue-home-widgets .section-title, #vue-home-widgets h2, #vue-home-widgets h3 { color: var(--orderly-text); font-weight: 800; letter-spacing: -.025em; }
:root[data-orderly-theme="dark"] #top-navigation, :root[data-orderly-theme="dark"] #main-search-banner { background: var(--orderly-surface-soft) !important; border-color: var(--orderly-border) !important; }
:root[data-orderly-theme="dark"] .orderly-theme-toggle--topbar, :root[data-orderly-theme="dark"] .home-search-wrap, :root[data-orderly-theme="dark"] .search-geocomplete, :root[data-orderly-theme="dark"] .search-input-wrap { background: var(--orderly-surface) !important; border-color: var(--orderly-border-strong) !important; }
@media (max-width: 767px) { #top-navigation { min-height: 64px; padding: 8px 12px; } #main-search-banner { min-height: 360px; padding: 40px 16px; } #main-search-banner h2 { font-size: 34px; } }

/* Final shared header/button pass for storefront, ordering, and checkout. */
#top-nav, body.column2-layout #top-nav { min-height: 68px; background: var(--orderly-surface) !important; border-bottom: 1px solid var(--orderly-border) !important; }
#top-nav > .row, body.column2-layout #top-nav > .row { min-height: 68px; margin: 0; padding: 0 clamp(12px, 3vw, 36px); align-items: center; }
#top-nav > .row > .col:last-child, body.column2-layout #top-nav > .row > .col:last-child { margin-left: auto !important; display: flex !important; justify-content: flex-end !important; align-items: center; flex: 1 1 auto; }
#top-nav .orderly-theme-toggle--topbar, #top-navigation .orderly-theme-toggle--topbar { margin: 0 4px; }
#top-nav .top-logo, #top-navigation .top-logo { max-width: 148px; max-height: 42px; object-fit: contain; }
#top-navigation .widget-user-nav, #top-nav .widget-user-nav { display: inline-flex; align-items: center; }
#main-search-banner .home-search-wrap, #main-search-banner .search-geocomplete, .home-search-wrap .search-input-wrap { min-height: 56px; border-radius: 16px !important; border: 1px solid var(--orderly-border-strong) !important; box-shadow: none !important; }
#main-search-banner .home-search-wrap input, #main-search-banner .search-geocomplete input, .home-search-wrap .form-control { min-height: 54px; border: 0 !important; background: transparent !important; box-shadow: none !important; }
.btn-black, .btn-black:hover, .btn-black:focus, .btn-black:active, .btn-black.active { background: var(--orderly-primary) !important; border-color: var(--orderly-primary) !important; color: #fff !important; box-shadow: none !important; }
.btn-black .zmdi, .btn-black .orderly-icon-host, .btn-black iconify-icon, .btn-black svg { color: currentColor !important; }
.btn-green, .btn-orange, .orderly-primary-action { background: var(--orderly-primary) !important; border-color: var(--orderly-primary) !important; color: #fff !important; }
.section-menu label.btn, .section-menu .menu-data label.btn, .section-menu .menu-data-right label.btn, .section-menu .item-size-btn, .section-menu .price-btn { background: var(--orderly-surface) !important; border: 1px solid var(--orderly-border-strong) !important; color: var(--orderly-text) !important; box-shadow: none !important; }
.section-menu label.btn:hover, .section-menu label.btn.active, .section-menu .menu-data label.btn.active, .section-menu .menu-data-right label.btn.active, .section-menu .item-size-btn.active, .section-menu .price-btn.active { background: var(--orderly-primary-soft, rgba(249,119,5,.1)) !important; border-color: var(--orderly-primary) !important; color: var(--orderly-primary) !important; }
.section-menu label.btn *, .section-menu .menu-data label.btn *, .section-menu .menu-data-right label.btn * { color: inherit !important; }
:root[data-orderly-theme="dark"] #top-nav, :root[data-orderly-theme="dark"] #top-navigation { background: var(--orderly-surface) !important; border-color: var(--orderly-border) !important; }
:root[data-orderly-theme="dark"] .btn-black, :root[data-orderly-theme="dark"] .btn-black:hover, :root[data-orderly-theme="dark"] .btn-black:focus { background: var(--orderly-primary) !important; border-color: var(--orderly-primary) !important; color: #1e1e1e !important; }
:root[data-orderly-theme="dark"] .section-menu label.btn, :root[data-orderly-theme="dark"] .section-menu .menu-data label.btn, :root[data-orderly-theme="dark"] .section-menu .menu-data-right label.btn { background: var(--orderly-surface) !important; border-color: var(--orderly-border-strong) !important; color: var(--orderly-text) !important; }
@media (max-width: 767px) { #top-nav > .row, body.column2-layout #top-nav > .row { min-height: 62px; padding: 0 10px; } #top-nav .top-logo, #top-navigation .top-logo { max-width: 118px; max-height: 36px; } #top-nav .orderly-customer-actions { gap: 4px; } }

/* Ordering screen: calm merchant header and category/search controls. */
.merchant-top-header { background: var(--orderly-surface) !important; border-bottom: 1px solid var(--orderly-border); }
.merchant-top-header .container, .section-menu > .container { max-width: 1240px; }
.merchant-top-header h4, .merchant-top-header h5, .merchant-top-header h6 { color: var(--orderly-text) !important; font-weight: 800; }
.merchant-top-header .el-breadcrumb, .merchant-top-header .text-grey, .merchant-top-header p { color: var(--orderly-muted) !important; }
.merchant-top-header .img-thumbnail { border: 1px solid var(--orderly-border) !important; border-radius: 18px !important; background: var(--orderly-surface-soft); }
.section-menu { background: var(--orderly-bg); }
.section-menu .menu-left, .section-menu .menu-center, #sticky-sidebar { background: transparent; }
.menu-category a, #menu-category a { display: block; padding: 9px 12px; border-radius: 10px; color: var(--orderly-muted) !important; font-weight: 600; transition: background-color .15s ease, color .15s ease; }
.menu-category a:hover, .menu-category a.active, #menu-category a:hover, #menu-category a.active { background: var(--orderly-primary-soft, rgba(249,119,5,.1)); color: var(--orderly-primary) !important; }
.component-topcategory, .components-category-carousel, .search-menu, .menu-search { border-bottom: 1px solid var(--orderly-border); }
.section-menu .btn-black { min-height: 44px; border-radius: 12px !important; font-weight: 700; }
@media (max-width: 991px) { .merchant-top-header .container { padding-left: 16px; padding-right: 16px; } .merchant-top-header .left-info { width: 100%; max-width: 100%; } .section-menu > .container { padding-left: 12px; padding-right: 12px; } .menu-category { display: flex; gap: 6px; overflow-x: auto; white-space: nowrap; padding-bottom: 8px; } .menu-category li { flex: 0 0 auto; } }

/* Ordering controls: service switches and dropdown toggles use the design tokens. */
.location-estimation {
  background: var(--orderly-surface-soft) !important;
  border: 1px solid var(--orderly-border) !important;
  gap: 4px;
}

.location-estimation .orderly-order-type-button.el-button {
  min-height: 48px;
  margin: 0 !important;
  padding: 8px 16px !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  background: var(--orderly-surface) !important;
  color: var(--orderly-text) !important;
  box-shadow: none !important;
  font-weight: 700;
}

.location-estimation .orderly-order-type-button.el-button:not(.disabled):hover,
.location-estimation .orderly-order-type-button.el-button:not(.disabled):focus-visible {
  border-color: var(--orderly-border-strong) !important;
  background: var(--orderly-surface) !important;
  color: var(--orderly-text) !important;
}

.location-estimation .orderly-order-type-button.el-button.disabled,
.location-estimation .orderly-order-type-button.el-button.is-disabled {
  background: var(--orderly-primary-soft, rgba(249, 119, 5, .1)) !important;
  border-color: var(--orderly-primary) !important;
  color: var(--orderly-primary) !important;
  opacity: 1 !important;
}

.location-estimation .orderly-order-type-button.el-button * { color: inherit !important; }
.location-estimation .orderly-order-type-button .zmdi { color: inherit !important; }

.section-menu .dropdown > .dropdown-toggle,
.section-menu .dropdown .btn.dropdown-toggle,
.section-menu .el-dropdown .el-button,
.merchant-top-header .dropdown > .dropdown-toggle,
.merchant-top-header .dropdown .btn.dropdown-toggle,
.merchant-top-header .el-dropdown .el-button {
  background: var(--orderly-surface) !important;
  border: 1px solid var(--orderly-border-strong) !important;
  color: var(--orderly-text) !important;
  box-shadow: none !important;
}

.section-menu .dropdown > .dropdown-toggle:hover,
.section-menu .dropdown > .dropdown-toggle:focus,
.section-menu .dropdown .btn.dropdown-toggle:hover,
.section-menu .dropdown .btn.dropdown-toggle:focus,
.section-menu .el-dropdown .el-button:hover,
.section-menu .el-dropdown .el-button:focus,
.merchant-top-header .dropdown > .dropdown-toggle:hover,
.merchant-top-header .dropdown > .dropdown-toggle:focus,
.merchant-top-header .dropdown .btn.dropdown-toggle:hover,
.merchant-top-header .dropdown .btn.dropdown-toggle:focus,
.merchant-top-header .el-dropdown .el-button:hover,
.merchant-top-header .el-dropdown .el-button:focus {
  background: var(--orderly-surface-soft) !important;
  border-color: var(--orderly-primary) !important;
  color: var(--orderly-text) !important;
}

/* The merchant service component renders delivery/pickup as label buttons. */
.merchant-top-header .btn-group-rounded label.btn,
#vue-merchant-details .btn-group-rounded label.btn {
  background: var(--orderly-surface) !important;
  border: 1px solid var(--orderly-border-strong) !important;
  color: var(--orderly-text) !important;
  box-shadow: none !important;
}

.merchant-top-header .btn-group-rounded label.btn:hover,
.merchant-top-header .btn-group-rounded label.btn.active,
#vue-merchant-details .btn-group-rounded label.btn:hover,
#vue-merchant-details .btn-group-rounded label.btn.active {
  background: var(--orderly-primary-soft, rgba(249, 119, 5, .1)) !important;
  border-color: var(--orderly-primary) !important;
  color: var(--orderly-primary) !important;
}

.merchant-top-header .btn-group-rounded label.btn *,
#vue-merchant-details .btn-group-rounded label.btn * {
  color: inherit !important;
}

/* LUCIDE + dark header tail (appended 2026-08-25) */
:root[data-orderly-theme="dark"] {
  --orderly-bg: var(--ods-dark-bg);
  --orderly-surface: var(--ods-dark-surface);
  --orderly-surface-soft: var(--ods-dark-surface-raised);
  --orderly-border: var(--ods-dark-border);
  --orderly-border-strong: var(--ods-dark-border);
  --orderly-text: var(--ods-dark-text);
  --orderly-text-muted: var(--ods-dark-text-muted);
}
html.dark:root, body.dark:root, [data-theme="dark"]:root { /* alias for hydration class */ }
header, .header, .site-header {
  background: var(--orderly-surface, var(--ods-surface));
  color: var(--orderly-text, var(--ods-text));
  border-bottom: 1px solid var(--orderly-border, var(--ods-border));
}
:root[data-orderly-theme="dark"] header,
:root[data-orderly-theme="dark"] .header,
html.dark header, body.dark header {
  background: var(--ods-dark-surface) !important;
  color: var(--ods-dark-text) !important;
  border-color: var(--ods-dark-border) !important;
}
/* Lucide icons sizing */
i.orderly-icon-host svg.lucide, i.orderly-menu-icon svg.lucide { width:1.15em; height:1.15em; }

/* ==========================================================================
   Lucide icon hosts (2026-08-28)
   orderly-ui.js used to inject <iconify-icon> children, but the Iconify
   runtime was never loaded on the storefront and is absent from every vendor
   directory, so every zmdi icon rendered as an empty box (visible on the
   footer social row). It now injects <i data-lucide> and calls
   lucide.createIcons(), which replaces that placeholder with an inline <svg>.
   The existing rules only target `iconify-icon` children, which no longer
   match - these size the <svg> the same way. Additive only; the
   .orderly-iconify-host class name is kept for its ::before suppression.
   ========================================================================== */
.orderly-iconify-host > svg,
i.orderly-iconify-host > svg,
.orderly-icon-host > svg,
i.orderly-icon-host > svg {
  display: inline-flex !important;
  width: 1em !important;
  height: 1em !important;
  color: currentColor;
  stroke: currentColor;
}

/* ==========================================================================
   MERCHANT SIGNUP — consistent fields, real onboarding   (2026-08-28)
   --------------------------------------------------------------------------
   The form mixed three conventions: "Store name" and "Email address" had
   labels, "Store address" had only a placeholder, and the phone field had
   neither - so the eye had nothing to scan down. Labels added in the view;
   this gives every field one geometry and one rhythm.
   ========================================================================== */
#vue-merchant-signup .form-label-group label,
#vue-merchant-signup .signup-field label {
  display: block;
  margin: 0 0 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ods-text, #1a1a1a);
}

#vue-merchant-signup .form-label-group label.required::after {
  content: " *";
  color: var(--ods-error, #dc2626);
  font-weight: 700;
}

#vue-merchant-signup .form-control,
#vue-merchant-signup input[type="text"],
#vue-merchant-signup input[type="email"],
#vue-merchant-signup .el-input__wrapper,
#vue-merchant-signup .auto-complete input {
  min-height: 48px !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  border: 1px solid var(--ods-border, #e5e5e5) !important;
  background: var(--ods-surface, #fff) !important;
  font-size: 15px;
  box-shadow: none !important;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

#vue-merchant-signup .form-control:focus,
#vue-merchant-signup input:focus {
  outline: none;
  border-color: var(--ods-product-orderly, #f97705) !important;
  box-shadow: 0 0 0 3px rgba(249, 119, 5, 0.15) !important;
}

/* The address field is an autocomplete widget with its own chrome; bring it
   onto the same footing as the plain inputs. */
#vue-merchant-signup .auto-complete { margin-bottom: 18px !important; }
#vue-merchant-signup .auto-complete .search-geocomplete,
#vue-merchant-signup .auto-complete > div {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
}

#vue-merchant-signup .form-label-group,
#vue-merchant-signup .signup-field { margin-bottom: 18px; }
#vue-merchant-signup .signup-phone-label { margin-bottom: 6px; }

/* Membership vs Commission is the one real decision on this form - make it a
   pair of choosable cards rather than two bare radios on a line. */
#vue-merchant-signup .custom-control.custom-radio,
#vue-merchant-signup .el-radio {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 16px !important;
  margin: 0 10px 10px 0 !important;
  border: 1px solid var(--ods-border, #e5e5e5);
  border-radius: 12px;
  background: var(--ods-surface, #fff);
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}
#vue-merchant-signup .custom-control.custom-radio:hover,
#vue-merchant-signup .el-radio:hover {
  border-color: var(--ods-product-orderly, #f97705);
  background: rgba(249, 119, 5, 0.04);
}

/* Submit read as disabled because it sat at a washed-out tint. */
#vue-merchant-signup .btn-green,
#vue-merchant-signup button[type="submit"],
#vue-merchant-signup .btn-primary {
  min-height: 50px;
  border-radius: 12px !important;
  background: var(--ods-product-orderly, #f97705) !important;
  border-color: var(--ods-product-orderly, #f97705) !important;
  color: #fff !important;
  font-size: 15px;
  font-weight: 600;
  opacity: 1 !important;
}
#vue-merchant-signup .btn-green:hover,
#vue-merchant-signup button[type="submit"]:hover {
  background: var(--ods-product-orderly-deep, #d95f00) !important;
}

/* What happens after Submit - the form asked for details and said nothing
   about what follows, which is the moment people abandon a signup. */
#vue-merchant-signup .signup-next {
  font-size: 13.5px;
  color: var(--ods-text-muted, #666);
  line-height: 1.5;
}

#vue-merchant-signup h3 { letter-spacing: -0.02em; }