@import url("https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,400..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,500,0,0");

:root {
  --orderly-primary: #f97705;
  --orderly-primary-hover: #e06800;
  --orderly-primary-deep: #c45a00;
  --orderly-success: #1f9d55;
  --orderly-danger: #d92d20;
  --orderly-warning: #b7791f;
  --orderly-info: #2563eb;
  --orderly-bg: #f7f4ef;
  --orderly-surface: #ffffff;
  --orderly-surface-soft: #fbfaf8;
  --orderly-text: #1f2328;
  --orderly-muted: #69707a;
  --orderly-border: rgba(31, 35, 40, 0.1);
  --orderly-border-strong: rgba(31, 35, 40, 0.16);
  --orderly-radius-sm: 10px;
  --orderly-radius: 14px;
  --orderly-radius-lg: 18px;
  --orderly-shadow: 0 12px 32px rgba(31, 35, 40, 0.07);
  --orderly-focus: 0 0 0 4px rgba(249, 119, 5, 0.16);
}

:root[data-orderly-theme="dark"] {
  --orderly-primary: #f97705;
  --orderly-primary-hover: #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: 0 18px 44px rgba(0, 0, 0, 0.34);
  --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: "Google Sans Flex", "Google Sans Text", "Google Sans", "Roboto Flex", "Roboto", Arial, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body,
p,
button,
input,
select,
textarea {
  font-family: "Google Sans Flex", "Google Sans Text", "Google Sans", "Roboto Flex", "Roboto", Arial, 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"]),
: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"]),
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: 1180px) {
  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"]),
  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: 1180px) {
  #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"]),
: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;
  --orderly-radius-lg: 22px;
}

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: "Google Sans Flex", "Google Sans Text", "Google Sans", "Roboto Flex", "Roboto", Arial, 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"]),
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"]):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;
}

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

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

.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;
}

.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"]),
: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="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="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 {
  position: fixed !important;
  right: 18px;
  bottom: 18px;
}

: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: 1180px) {
  .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: "Google Sans Flex", "Google Sans Text", "Google Sans", "Roboto Flex", "Roboto", Arial, 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"]),
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"]),
.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"]):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"]),
: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;
  }
}