.section-join-us, .sub-footer, .el-breadcrumb, .merchant-top-header, #vue-merchant-details {
    display:none !important;
}

.el-button--large {
    background:#000 !important;
    border-color:#000 !important;
}


/* =========================================================
   Maverick Orders — DARK theme
   bg: #000  text: #fff  accent: #FEED01
   chrome (top nav + footer + buttons): #FEED01 + #000
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Jura:wght@400;500;600;700&display=swap');

:root {
  --mav-yellow: #FEED01;
  --mav-yellow-hover: #ffd900;
  --mav-bg: #000000;
  --mav-surface: #111111;
  --mav-surface-2: #1a1a1a;
  --mav-border: #2a2a2a;
  --mav-text: #ffffff;
  --mav-muted: #b8b8b8;
  --mav-ink: #000000;
  --mav-radius-pill: 35px;
  --mav-radius-card: 12px;
  --mav-font: 'Jura', Arial, Helvetica, sans-serif;
}

/* ---------- Global reset to dark ---------- */
html, body { background: var(--mav-bg) !important; }
body,
.main_layout,
.page-content,
.container, .container-fluid,
.wrapper, main, section, article,
.row > div {
  background-color: transparent !important;
}

body {
  font-family: var(--mav-font) !important;
  color: var(--mav-text) !important;
  font-size: 14px;
}

html, body,
.btn, .form-control, .form-select, .nav-link, .dropdown-menu,
input, select, textarea, button, a, span, div, p, li, label, small {
  font-family: var(--mav-font) !important;
}

/* Typography */
h1, h2, h3, h4, h5, h6,
.section-title, .category-title, .h1, .h2, .h3 {
  font-family: var(--mav-font) !important;
  color: var(--mav-text) !important;
  font-weight: 600 !important;
  letter-spacing: .2px;
}
h2, h3 { text-transform: uppercase; }

a       { color: var(--mav-text); }
a:hover { color: var(--mav-yellow); }

p, small, .text-muted, .text-secondary {
  color: var(--mav-muted) !important;
}

/* =========================================================
   TOP NAVIGATION — YELLOW w/ BLACK TEXT
   ========================================================= */
body.main_layout > .container-fluid:first-of-type,
.main_layout > .container-fluid.sticky-top,
.main_layout > .container-fluid.position-sticky,
.main_layout > nav,
.main_layout header,
#top-header,
.top-header {
  background: var(--mav-yellow) !important;
  border-bottom: none !important;
  padding-top: 14px;
  padding-bottom: 14px;
}
.main_layout > .container-fluid.sticky-top *,
.main_layout > .container-fluid.position-sticky *,
.top-header * {
  color: var(--mav-ink) !important;
}
.main_layout > .container-fluid.sticky-top a,
.main_layout > .container-fluid.sticky-top button,
.main_layout > .container-fluid.sticky-top .nav-link,
.top-header a, .top-header button {
  color: var(--mav-ink) !important;
}
.main_layout > .container-fluid.sticky-top a:hover,
.top-header a:hover { color: #ffffff !important; }

/* Address selector pill — white-on-yellow band */
.main_layout button.no-icons,
button.no-icons.d-flex {
  background: #ffffff !important;
  color: var(--mav-ink) !important;
  border-radius: var(--mav-radius-pill) !important;
  font-weight: 600 !important;
  border: 2px solid var(--mav-ink) !important;
  padding: 6px 18px !important;
  text-transform: none !important;
}
.main_layout button.no-icons:hover {
  background: var(--mav-ink) !important;
  color: var(--mav-yellow) !important;
}

/* =========================================================
   BUTTONS — YELLOW w/ BLACK TEXT EVERYWHERE
   ========================================================= */
.btn,
.btn-black,
.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info,
.btn-dark,
.btn-light,
.btn-green {
  font-family: var(--mav-font) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .3px;
  font-size: 13px;
  border-radius: var(--mav-radius-pill) !important;
  background-color: var(--mav-yellow) !important;
  border-color: var(--mav-yellow) !important;
  color: var(--mav-ink) !important;
  padding: 8px 22px !important;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover,
.btn-black:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-success:hover,
.btn-danger:hover,
.btn-warning:hover,
.btn-info:hover,
.btn-dark:hover,
.btn-light:hover,
.btn-green:hover {
  background-color: #ffffff !important;
  border-color: #ffffff !important;
  color: var(--mav-ink) !important;
}
.btn:disabled, .btn[disabled],
.btn-black:disabled, .btn-black[disabled] {
  background-color: #d9d36b !important;
  border-color: #d9d36b !important;
  color: rgba(0, 0, 0, 0.45) !important;
  opacity: 1;
}
.btn-black.btn-circle,
.btn-black.rounded-pill,
.btn.btn-circle { padding: 8px 14px !important; }

/* Outline variants — keep outlined look but yellow text/border, hover fills */
.btn-outline-secondary,
.btn-outline-dark,
.btn-outline-primary,
.btn-outline-light {
  background: transparent !important;
  border: 1px solid var(--mav-yellow) !important;
  color: var(--mav-yellow) !important;
}
.btn-outline-secondary:hover,
.btn-outline-dark:hover,
.btn-outline-primary:hover,
.btn-outline-light:hover {
  background: var(--mav-yellow) !important;
  color: var(--mav-ink) !important;
  border-color: var(--mav-yellow) !important;
}

/* ---------- Sidebar menu ---------- */
.section-menu .nav-link,
aside .nav-link,
.list-group-item {
  color: var(--mav-muted) !important;
  font-weight: 500;
  padding: 8px 12px;
  border-left: 3px solid transparent;
  border-radius: 0;
  background: transparent !important;
}
.section-menu .nav-link:hover,
aside .nav-link:hover {
  color: var(--mav-text) !important;
  border-left-color: var(--mav-yellow);
}
.section-menu .nav-link.active,
aside .nav-link.active,
.dropdown-item.active,
.list-group-item.active {
  color: var(--mav-yellow) !important;
  background: rgba(254, 237, 1, 0.08) !important;
  border-left-color: var(--mav-yellow) !important;
  font-weight: 700;
}

/* ---------- Category section titles ---------- */
.page-content h2,
.menu-section-title,
.section-title {
  text-transform: uppercase;
  font-weight: 700 !important;
  color: var(--mav-text) !important;
  letter-spacing: .5px;
  padding-bottom: 6px;
  border-bottom: 3px solid var(--mav-yellow);
  display: inline-block;
  margin-bottom: 16px;
}

/* ---------- Product cards ---------- */
.menu-item,
.product-item,
.card,
[class*="product-card"],
.page-content .row > div > .position-relative {
  background: var(--mav-surface) !important;
  border: 1px solid var(--mav-border) !important;
  border-radius: var(--mav-radius-card) !important;
  color: var(--mav-text) !important;
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.menu-item:hover,
.product-item:hover,
.page-content .row > div > .position-relative:hover {
  box-shadow: 0 10px 24px rgba(254, 237, 1, 0.12);
  border-color: var(--mav-yellow) !important;
}
.menu-item *, .product-item *, .card * { color: inherit; }

/* Product image placeholder bg */
.menu-item img, .product-item img, .card img { background: var(--mav-surface-2); }

/* Price chips — small, sharper radius so they don't look like full buttons */
.btn-black.btn-sm,
.price-chip,
.product-price .btn {
  background: var(--mav-yellow) !important;
  color: var(--mav-ink) !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  letter-spacing: .3px;
  text-transform: none !important;
  font-size: 13px !important;
}

/* "from €X.XX" small text */
.from-price, .price-from, .text-muted small { color: var(--mav-muted) !important; }

/* ---------- Cart panel ---------- */
.cart, .cart-panel, aside.cart, .order-cart,
.page-content > .row > .col:last-child,
.page-content > .row > [class*="col-"]:last-child {
  background: var(--mav-surface) !important;
  border-radius: var(--mav-radius-card);
  border: 1px solid var(--mav-border);
  color: var(--mav-text) !important;
}
.cart h2, .cart-panel h2, .cart-title {
  color: var(--mav-text) !important;
  text-transform: uppercase;
  font-weight: 700 !important;
  border-bottom: 3px solid var(--mav-yellow);
  display: inline-block;
  padding-bottom: 4px;
}
.cart .empty, .empty-cart, .cart-empty-msg { color: var(--mav-muted) !important; }

/* ---------- Forms ---------- */
.form-control,
.form-select,
input.form-control,
select.form-select,
textarea.form-control {
  background: var(--mav-surface-2) !important;
  color: var(--mav-text) !important;
  border-radius: 8px !important;
  border: 1px solid var(--mav-border) !important;
}
.form-control::placeholder { color: var(--mav-muted) !important; }
.form-control:focus,
.form-select:focus {
  background: var(--mav-surface-2) !important;
  border-color: var(--mav-yellow) !important;
  color: var(--mav-text) !important;
  box-shadow: 0 0 0 .2rem rgba(254, 237, 1, 0.25) !important;
}
.floating-label label, .form-floating > label { color: var(--mav-muted) !important; }

/* ---------- Dropdowns / popovers / modals ---------- */
.dropdown-menu,
.popover,
.modal-content {
  background: var(--mav-surface) !important;
  color: var(--mav-text) !important;
  border: 1px solid var(--mav-border) !important;
}
.dropdown-item { color: var(--mav-text) !important; }
.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--mav-yellow) !important;
  color: var(--mav-ink) !important;
}
.modal-header, .modal-footer { border-color: var(--mav-border) !important; }

/* ---------- Tables ---------- */
.table, .table * {
  color: var(--mav-text) !important;
  border-color: var(--mav-border) !important;
  background-color: transparent !important;
}

/* ---------- Badges / cart count ---------- */
.cart-count,
.badge.bg-danger,
.cart-badge {
  background: var(--mav-yellow) !important;
  color: var(--mav-ink) !important;
  font-weight: 700;
}

/* ---------- Bootstrap utility overrides ---------- */
.bg-white, .bg-light { background-color: var(--mav-surface) !important; }
.text-dark { color: var(--mav-text) !important; }
.text-black { color: var(--mav-text) !important; }
.border, .border-top, .border-bottom, .border-start, .border-end {
  border-color: var(--mav-border) !important;
}

/* =========================================================
   FOOTER — YELLOW w/ BLACK TEXT
   ========================================================= */
footer,
.footer,
.site-footer,
#footer,
.main-footer,
body.main_layout > footer,
body.main_layout > .footer,
body.main_layout > .container-fluid:last-of-type {
  background: var(--mav-yellow) !important;
  color: var(--mav-ink) !important;
  border-top: none !important;
  padding: 24px 16px !important;
}
footer *, .footer *, .site-footer *, #footer *, .main-footer * {
  color: var(--mav-ink) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
}
footer a, .footer a, .site-footer a, #footer a, .main-footer a {
  color: var(--mav-ink) !important;
  font-weight: 600;
  text-decoration: none;
}
footer a:hover, .footer a:hover, .site-footer a:hover,
#footer a:hover, .main-footer a:hover {
  color: #ffffff !important;
  text-decoration: underline;
}
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6,
.footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6 {
  color: var(--mav-ink) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
}
footer .form-control,
.footer .form-control,
.site-footer .form-control {
  background: #ffffff !important;
  border-color: var(--mav-ink) !important;
  color: var(--mav-ink) !important;
}

/* ---------- Scrollbar (WebKit) ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--mav-bg); }
::-webkit-scrollbar-thumb { background: var(--mav-border); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--mav-yellow); }

::selection { background: var(--mav-yellow); color: var(--mav-ink); }

/* =========================================================
   Element Plus buttons (.el-button) — Προσθήκη στο καλάθι etc.
   The platform sets colors via inline CSS variables, so we
   override both the variables AND the resolved properties.
   ========================================================= */
.el-button,
.el-button.el-button--large,
.el-button.el-button--default,
.el-button.el-button--small,
.el-button.el-button--mini,
.el-button.white-color,
button.el-button,
a.el-button {
  background-color: var(--mav-yellow) !important;
  border-color: var(--mav-yellow) !important;
  color: var(--mav-ink) !important;
  font-family: var(--mav-font) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .3px !important;
  font-size: 13px !important;
  border-radius: var(--mav-radius-pill) !important;
  padding: 8px 22px !important;
  /* Beat the inline-style custom properties */
  --el-button-bg-color: #FEED01 !important;
  --el-button-text-color: #000000 !important;
  --el-button-border-color: #FEED01 !important;
  --el-button-hover-bg-color: #ffffff !important;
  --el-button-hover-text-color: #000000 !important;
  --el-button-hover-border-color: #ffffff !important;
  --el-button-active-bg-color: #ffd900 !important;
  --el-button-active-text-color: #000000 !important;
  --el-button-active-border-color: #ffd900 !important;
  --el-button-disabled-bg-color: #d9d36b !important;
  --el-button-disabled-text-color: rgba(0,0,0,0.45) !important;
  --el-button-disabled-border-color: #d9d36b !important;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.el-button:hover,
.el-button:focus,
.el-button.el-button--large:hover,
button.el-button:hover {
  background-color: #ffffff !important;
  border-color: #ffffff !important;
  color: var(--mav-ink) !important;
}
.el-button:active,
.el-button.is-active {
  background-color: var(--mav-yellow-hover) !important;
  border-color: var(--mav-yellow-hover) !important;
  color: var(--mav-ink) !important;
}
.el-button.is-disabled,
.el-button:disabled,
.el-button[disabled] {
  background-color: #d9d36b !important;
  border-color: #d9d36b !important;
  color: rgba(0, 0, 0, 0.45) !important;
  opacity: 1 !important;
}
/* Element Plus icon buttons / loading spinner — keep dark contrast */
.el-button .el-icon,
.el-button > i,
.el-button svg { color: var(--mav-ink) !important; fill: var(--mav-ink) !important; }

/* Element Plus variants (success/primary/danger/warning/info) — same brand override */
.el-button--primary,
.el-button--success,
.el-button--warning,
.el-button--danger,
.el-button--info,
.el-button--text {
  background-color: var(--mav-yellow) !important;
  border-color: var(--mav-yellow) !important;
  color: var(--mav-ink) !important;
}

/* =========================================================
   Jura font — hard enforcement across all UI components,
   including Element Plus, Bootstrap Select, etc.
   Excludes icon fonts so glyphs don't break.
   ========================================================= */
body,
body *:not(i):not(svg):not([class*="zmdi"]):not([class*="material-icons"]):not([class*="material-design-iconic-font"]):not([class*="fa-"]):not([class*="icon-"]) {
  font-family: 'Jura', Arial, Helvetica, sans-serif !important;
}
.el-button, .el-input, .el-input__inner, .el-input__wrapper,
.el-select, .el-select__wrapper, .el-dropdown, .el-dropdown-menu,
.el-form-item, .el-form-item__label, .el-checkbox, .el-radio,
.el-message, .el-message-box, .el-dialog, .el-dialog__title,
.el-tag, .el-badge, .el-tabs, .el-tabs__item,
[class*="el-"] {
  font-family: 'Jura', Arial, Helvetica, sans-serif !important;
}