/* ==========================================================================
   WOX MODERN THEME
   A FalatBox (Wox) Next.js + shadcn/ui demo dizájn-rendszerének átültetése
   a Karenderia (Yii 1.x) frontend témába.

   Betöltési sorrend: style.css → responsive.css → custom.css → wox.css
   (a wox.css regisztrálása: views/layouts/main-layout.php)

   Sötét/világos mód: a <html> elem .light / .dark osztálya vezérli,
   a kapcsolĂłt az assets/js/wox-theme.js kezeli (localStorage: "wox:theme").
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS (a Wox demo app/globals.css fájljából, 1:1-ben)
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  --background: oklch(0.99 0.005 80);          /* meleg törtfehér */
  --foreground: oklch(0.22 0.02 40);           /* meleg majdnem-fekete */
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.22 0.02 40);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.22 0.02 40);

  --primary: oklch(0.841 0.241 134);           /* Wox "lime" zöld */
  --primary-foreground: oklch(0.21 0.05 140);  /* sötétzöld szöveg a lime-on */
  --primary-strong: oklch(0.52 0.16 137);      /* szöveg/ikon használatra világos felületen */

  --secondary: oklch(0.96 0.02 70);
  --secondary-foreground: oklch(0.3 0.03 40);
  --muted: oklch(0.96 0.01 70);
  --muted-foreground: oklch(0.54 0.02 50);
  --accent: oklch(0.95 0.05 80);
  --accent-foreground: oklch(0.3 0.05 40);
  --destructive: oklch(0.577 0.245 27.325);

  --border: oklch(0.92 0.01 70);
  --input: oklch(0.92 0.01 70);
  --ring: oklch(0.841 0.241 134);

  --radius: 0.625rem;                          /* 10px */
  --radius-sm: calc(var(--radius) - 4px);      /* 6px  */
  --radius-md: calc(var(--radius) - 2px);      /* 8px  */
  --radius-lg: var(--radius);                  /* 10px */
  --radius-xl: calc(var(--radius) + 4px);      /* 14px */
  --radius-2xl: calc(var(--radius) + 8px);     /* 18px */
  --radius-3xl: calc(var(--radius) + 12px);    /* 22px */

  --font-sans: "Nunito Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display: "Nunito", "Nunito Sans", ui-sans-serif, system-ui, sans-serif;

  --shadow-sm: 0 1px 2px 0 rgb(35 24 20 / 0.05);
  --shadow: 0 1px 3px 0 rgb(35 24 20 / 0.08), 0 1px 2px -1px rgb(35 24 20 / 0.08);
  --shadow-md: 0 4px 6px -1px rgb(35 24 20 / 0.08), 0 2px 4px -2px rgb(35 24 20 / 0.08);
  --shadow-lg: 0 10px 15px -3px rgb(35 24 20 / 0.1), 0 4px 6px -4px rgb(35 24 20 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(35 24 20 / 0.12), 0 8px 10px -6px rgb(35 24 20 / 0.1);

  --header-bg: var(--card);

  /* Márka lime – világos módban a --primary is ez; sötét módban a Wox-hű
     semleges primary mellett ide menekült, kézzel vezérelve használható
     (pl. nprogress sáv, apró kiemelések). Sötét módban NEM alapértelmezett. */
  --brand: oklch(0.841 0.241 134);
  --brand-foreground: oklch(0.21 0.05 140);
}

html.dark {
  color-scheme: dark;

  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);

  /* Wox dark 1:1: a primary SEMLEGES, majdnem-fehér (shadcn dark alap).
     A lime teljesen ki van vezetve a sötét témából; ha mégis kell,
     a --brand token használható. */
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --primary-strong: oklch(0.985 0 0);

  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);

  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.4);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.5), 0 1px 2px -1px rgb(0 0 0 / 0.5);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.5);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.55), 0 4px 6px -4px rgb(0 0 0 / 0.5);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.6), 0 8px 10px -6px rgb(0 0 0 / 0.5);
}

/* --------------------------------------------------------------------------
   2. ELEMENT PLUS HÍD – a Karenderia Vue komponensei (el-*) az --el-*
   változókon keresztül öröklik a témát (világos + sötét módban is).
   -------------------------------------------------------------------------- */
:root {
  --el-color-white: #ffffff;
  --el-color-black: #000000;
  --el-color-primary: var(--primary);
  --el-color-primary-dark-2: color-mix(in oklch, var(--primary), black 12%);
  --el-color-primary-light-3: color-mix(in oklch, var(--primary), white 30%);
  --el-color-primary-light-5: color-mix(in oklch, var(--primary), white 50%);
  --el-color-primary-light-7: color-mix(in oklch, var(--primary), white 70%);
  --el-color-primary-light-8: color-mix(in oklch, var(--primary), white 80%);
  --el-color-primary-light-9: color-mix(in oklch, var(--primary), white 90%);
  --el-color-success: var(--primary);
  --el-color-success-dark-2: color-mix(in oklch, var(--primary), black 12%);
  --el-color-success-light-3: color-mix(in oklch, var(--primary), white 30%);
  --el-color-success-light-5: color-mix(in oklch, var(--primary), white 50%);
  --el-color-success-light-7: color-mix(in oklch, var(--primary), white 70%);
  --el-color-success-light-8: color-mix(in oklch, var(--primary), white 80%);
  --el-color-success-light-9: color-mix(in oklch, var(--primary), white 90%);

  --el-bg-color: var(--card);
  --el-bg-color-page: var(--background);
  --el-bg-color-overlay: var(--popover);
  --el-text-color-primary: var(--foreground);
  --el-text-color-regular: var(--foreground);
  --el-text-color-secondary: var(--muted-foreground);
  --el-text-color-placeholder: var(--muted-foreground);
  --el-text-color-disabled: var(--muted-foreground);
  --el-border-color: var(--border);
  --el-border-color-light: var(--border);
  --el-border-color-lighter: var(--border);
  --el-border-color-extra-light: var(--border);
  --el-border-color-hover: var(--muted-foreground);
  --el-fill-color: var(--muted);
  --el-fill-color-light: var(--muted);
  --el-fill-color-lighter: var(--muted);
  --el-fill-color-extra-light: var(--muted);
  --el-fill-color-dark: var(--muted);
  --el-fill-color-blank: var(--card);
  --el-disabled-bg-color: var(--muted);
  --el-disabled-text-color: var(--muted-foreground);
  --el-disabled-border-color: var(--border);
  --el-border-radius-base: 10px;
  --el-border-radius-small: 8px;
  --el-border-radius-round: 999px;
  --el-font-family: var(--font-sans);
  --el-overlay-color-lighter: rgb(0 0 0 / 0.55);
  --el-mask-color: rgb(0 0 0 / 0.5);
  --el-box-shadow: var(--shadow-lg);
  --el-box-shadow-light: var(--shadow-md);
  --el-box-shadow-lighter: var(--shadow-sm);
  --el-box-shadow-dark: var(--shadow-xl);
  /* A hamburger-drawer overlay 20050 – a nyelvválasztó lista e fölött kell legyen. */
  --el-index-popper: 40000;
}

html.dark .el-button--primary,
html.dark .el-button--success,
.el-button--primary,
.el-button--success {
  --el-button-text-color: var(--primary-foreground);
  --el-button-hover-text-color: var(--primary-foreground);
}

/* el-tag → Wox jelvény (pill, félkövér) */
.el-tag {
  border-radius: 999px;
  font-weight: 700;
  border: 0;
}
.el-tag--danger { background: color-mix(in oklch, var(--destructive) 12%, transparent); color: var(--destructive); }
.el-tag--warning { background: var(--accent); color: var(--accent-foreground); }
.el-tag--success { background: color-mix(in oklch, var(--primary) 25%, transparent); color: var(--primary-strong); }

/* el-drawer / el-dialog modernizálása */
.el-drawer, .el-dialog {
  background: var(--card);
  color: var(--card-foreground);
  border-radius: var(--radius-2xl);
}
.el-drawer.ltr, .el-drawer.rtl { border-radius: 0; }
.el-drawer__header, .el-dialog__title { color: var(--foreground); font-family: var(--font-display); font-weight: 800; }
.el-dialog { border-radius: var(--radius-2xl); box-shadow: var(--shadow-xl); }
.el-overlay { backdrop-filter: blur(4px); }
.el-overlay,
.el-overlay.is-drawer,
.el-overlay:has(.drawer-menu),
.el-overlay:has(.wox-drawer) {
  z-index: 20050 !important;
}
.el-drawer.drawer-menu,
.el-drawer.wox-drawer {
  z-index: 20051 !important;
}

/* Nyelvválasztó / bármely Element Plus lista: a drawer fölött, különben mobilon
   a hamburger menüben „nem lehet rákattintani” (a lista a overlay mögött nyílik). */
.el-popper,
.el-dropdown__popper,
.el-select__popper,
.el-picker__popper,
.el-tooltip__popper {
  z-index: 40000 !important;
}

/* el-input / el-select mezők */
.el-input__wrapper {
  border-radius: var(--radius-lg);
  box-shadow: 0 0 0 1px var(--input) inset;
  background: var(--card);
}
.el-input__wrapper.is-focus { box-shadow: 0 0 0 2px var(--ring) inset; }
.el-select__wrapper {
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: 0 0 0 1px var(--input) inset;
  min-height: 42px;
}
.el-select__wrapper.is-focused { box-shadow: 0 0 0 2px var(--ring) inset; }
.el-button { border-radius: var(--radius-lg); font-weight: 700; font-family: var(--font-sans); }
.el-button.is-round { border-radius: 999px; }
.el-skeleton { --el-skeleton-color: var(--muted); --el-skeleton-to-color: var(--secondary); }
.el-breadcrumb__inner a, .el-breadcrumb__inner { color: var(--muted-foreground); font-weight: 600; }
.el-breadcrumb__item:last-child .el-breadcrumb__inner { color: var(--foreground); }

/* --------------------------------------------------------------------------
   3. ALAPOK – tipográfia, linkek, görgetősáv
   -------------------------------------------------------------------------- */
body {
  background-color: var(--background) !important;
  color: var(--foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-display);
  color: var(--foreground);
}

a { color: var(--primary-strong); transition: color 0.2s ease; }
a:hover { color: var(--primary-strong); }

.text-grey, .text-muted { color: var(--muted-foreground) !important; }
.gold-color { color: var(--primary-strong); }

hr { border-top-color: var(--border); }

::selection { background: color-mix(in oklch, var(--primary) 35%, transparent); }

/* --------------------------------------------------------------------------
   4. GOMBOK – a Karenderia saját osztályai (.btn-green stb.) + Bootstrap
   -------------------------------------------------------------------------- */
.btn {
  border-radius: var(--radius-lg);
  font-weight: 700;
  font-family: var(--font-sans);
  border: 1px solid transparent;
  transition: all 0.2s ease;
}
.btn:active { transform: translateY(1px); }
.btn:focus { box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 30%, transparent); }

/* Elsődleges (régi .btn-green) → Wox lime */
.btn-green,
.btn-green:focus,
.badge.badge-green {
  background: var(--primary);
  color: var(--primary-foreground) !important;
  border-color: transparent;
}
.btn-green:hover {
  background: var(--primary);
  color: var(--primary-foreground) !important;
  filter: brightness(0.93);
}
.btn-green:disabled, .btn-green.disabled { opacity: 0.55; }

.btn-primary {
  background: var(--primary);
  border-color: transparent;
  color: var(--primary-foreground);
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--primary);
  border-color: transparent;
  color: var(--primary-foreground);
  filter: brightness(0.93);
}

/* Másodlagos / semleges gombok */
.btn-black {
  background: var(--foreground);
  color: var(--background);
}
.btn-black:focus, .btn-black:hover { color: var(--background) !important; opacity: 0.85; }

.btn-white {
  background: var(--card);
  color: var(--primary-strong);
  border-color: var(--border);
}
.btn-white:hover { background: var(--accent); color: var(--accent-foreground); }

.btn-light, .btn-grey {
  background: var(--muted);
  color: var(--foreground);
  border-color: transparent;
}
.btn-light:hover, .btn-grey:hover { background: var(--accent); color: var(--accent-foreground); }

.btn-green-line, .btn-outline-primary {
  border: 1.5px solid var(--primary);
  color: var(--primary-strong);
  background: transparent;
}
.btn-green-line:hover, .btn-outline-primary:hover {
  background: var(--primary);
  color: var(--primary-foreground) !important;
  border-color: var(--primary);
}

.border-green { border: 1px solid var(--primary) !important; }
.btn-green-circle { background: var(--primary); color: var(--primary-foreground); }
.btn-green-circle:hover { color: var(--primary-foreground); filter: brightness(0.93); }

.btn-danger {
  background: color-mix(in oklch, var(--destructive) 12%, transparent);
  color: var(--destructive);
  border-color: transparent;
}
.btn-danger:hover { background: color-mix(in oklch, var(--destructive) 20%, transparent); color: var(--destructive); }

/* --------------------------------------------------------------------------
   5. Ĺ°RLAPOK
   -------------------------------------------------------------------------- */
.form-control, .form-control-text, .custom-select,
textarea.form-control, select.form-control,
.form-control-select {
  background-color: var(--muted) !important;
  border: 1px solid var(--input) !important;
  color: var(--foreground) !important;
  border-radius: var(--radius-lg);
  font-family: var(--font-sans);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.form-control:focus, .form-control-text:focus, .custom-select:focus,
.form-control-select:focus {
  background-color: var(--card) !important;
  border-color: var(--ring) !important;
  color: var(--foreground) !important;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 25%, transparent);
  outline: 0;
}
.form-control::placeholder, .form-control-text::placeholder { color: var(--muted-foreground); }
.form-control:disabled, .form-control[readonly] { background-color: var(--muted) !important; }
/* style.css .form-control-text-white → ne legyen fehér folt dark-ban */
.form-control-text.form-control-text-white {
  background-color: var(--muted) !important;
  color: var(--foreground) !important;
}

.form-label-group > label { 
  color: var(--muted-foreground); 
  font-weight: 600; 
  pointer-events: none;
  transition: all 0.15s ease-in-out;
}
.form-label-group > input:focus ~ label,
.form-label-group > input:not(:placeholder-shown) ~ label { 
  color: var(--primary-strong); 
  padding-top: calc(var(--input-padding-y) / 3);
  padding-bottom: calc(var(--input-padding-y) / 3);
  font-size: 12px;
  transform: translateY(-4px);
}
.form-label-group > input:focus,
.form-label-group > input:not(:placeholder-shown) {
  padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3)) !important;
  padding-bottom: calc(var(--input-padding-y) / 3) !important;
}

/* Szürke keresőmezők (feed, mobil) */
.inputs-box-grey, .inputs-box {
  background-color: var(--muted);
  border: 1px solid transparent;
  color: var(--foreground);
  border-radius: var(--radius-xl);
}
.inputs-box-grey:focus, .inputs-box:focus {
  background-color: var(--card);
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 25%, transparent);
  outline: 0;
}

/* --------------------------------------------------------------------------
   5b. TELEFONSZÁM MEZŐ (component-phone → .inputs-with-dropdown)
        A style.css hardcode #f6f7f9/fehér hátteret ad; dark módban fehér
        folt. Tokenes felülírás – profil, login, signup, guest, merchant,
        booking, rider – mindenhol, ahol a component-phone megjelenik.
   -------------------------------------------------------------------------- */
.inputs-with-dropdown {
  background: var(--muted) !important;
  border: 1px solid var(--input);
  color: var(--foreground);
  border-radius: var(--radius-lg);
  min-height: 55px;
  padding-left: 12px !important;
  padding-right: 8px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.inputs-with-dropdown:focus-within {
  background: var(--card) !important;
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 25%, transparent);
}
.inputs-with-dropdown input {
  border: none !important;
  background: transparent !important;
  color: var(--foreground) !important;
  min-height: 55px;
  width: 100%;
  font-size: 15px;
  font-weight: 500;
  font-family: var(--font-sans);
  padding-left: 6px !important;
}
.inputs-with-dropdown input:focus {
  outline: none !important;
  box-shadow: none !important;
}
.inputs-with-dropdown input::placeholder {
  color: var(--muted-foreground);
}
.inputs-with-dropdown > .mr-0,
.inputs-with-dropdown > div.mr-0 {
  color: var(--muted-foreground);
  font-weight: 700;
  font-size: 0.92rem;
  flex-shrink: 0;
  white-space: nowrap;
}
.inputs-with-dropdown button.dropdown-toggle,
.inputs-with-dropdown .dropdown-toggle {
  background: transparent !important;
  border: none !important;
  color: var(--foreground);
  min-height: 55px;
  padding: 0 6px;
  box-shadow: none !important;
}
.inputs-with-dropdown button.dropdown-toggle::after,
.inputs-with-dropdown .dropdown-toggle::after {
  margin-left: 4px;
  color: var(--muted-foreground);
}
.inputs-with-dropdown img {
  width: 28px;
  height: 20px;
  object-fit: cover;
  border-radius: 2px;
}
.inputs-with-dropdown .dropdown-menu {
  background: var(--popover);
  color: var(--popover-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  max-height: 240px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.4rem;
  min-width: 220px;
}
.inputs-with-dropdown .dropdown-menu .dropdown-item,
.inputs-with-dropdown .dropdown-menu a {
  color: var(--foreground);
  font-size: 0.88rem;
  font-weight: 600;
  border-radius: var(--radius-md);
  padding: 0.5rem 0.75rem;
}
.inputs-with-dropdown .dropdown-menu .dropdown-item:hover,
.inputs-with-dropdown .dropdown-menu a:hover {
  background: var(--accent);
  color: var(--accent-foreground);
  text-decoration: none;
}

/* Checkbox / rádió */
.custom-control-label { color: var(--foreground); }
.custom-control-label::before {
  background-color: var(--card);
  border: 1.5px solid var(--input);
}
.custom-control-input:checked ~ .custom-control-label::before {
  background: var(--brand);
  border-color: var(--brand);
}
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
  filter: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%231b250c' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
}
html.dark .custom-control-input:checked ~ .custom-control-label::before,
html.dark .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
}
html.dark .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%231b250c' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e") !important;
  filter: none !important;
}
html.dark input[type="checkbox"] {
  accent-color: var(--brand);
}

/* Alertek */
.alert { border-radius: var(--radius-xl); border: 0; }
.alert-warning { background: var(--accent); color: var(--accent-foreground); }
.alert-success { background: color-mix(in oklch, var(--primary) 18%, transparent); color: var(--primary-strong); }
.alert-danger { background: color-mix(in oklch, var(--destructive) 10%, transparent); color: var(--destructive); }

/* --------------------------------------------------------------------------
   6. KÁRTYÁK, LENYÍLÓK, MODALOK, TÁBLÁZATOK (Bootstrap reskin)
   -------------------------------------------------------------------------- */
.card, .rounded-box {
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-sm);
}
.card-header, .card-footer { background: transparent; border-color: var(--border); }

.dropdown-menu {
  background: var(--popover);
  color: var(--popover-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 0.5rem;
}
.dropdown-item {
  border-radius: var(--radius-md);
  color: var(--foreground);
  font-weight: 600;
  padding: 0.55rem 0.9rem;
}
.dropdown-item:hover, .dropdown-item:focus {
  background: var(--accent);
  color: var(--accent-foreground);
}
.dropdown-item.active, .dropdown-item:active {
  background: var(--muted);
  color: var(--foreground);
}
html.dark .dropdown-item.active,
html.dark .dropdown-item:active {
  background: rgba(182, 240, 74, 0.16);
  color: var(--foreground);
}
.dropdown-divider { border-top-color: var(--border); }

.modal-content {
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
}
.modal-header, .modal-footer { border-color: var(--border); }
.modal-title { font-family: var(--font-display); font-weight: 800; }
.close { color: var(--foreground); text-shadow: none; opacity: 0.6; }
.close:hover { color: var(--foreground); opacity: 1; }
.modal-backdrop.show { opacity: 0.55; }

.table { color: var(--foreground); }
.table th, .table td { border-top-color: var(--border); }
.table thead th { border-bottom-color: var(--border); color: var(--muted-foreground); }
.table-striped tbody tr:nth-of-type(odd) { background-color: var(--muted); }

.list-group-item {
  background: var(--card);
  color: var(--foreground);
  border-color: var(--border);
}

.badge-light { background: var(--muted); color: var(--muted-foreground); }
.badge-dark { background: var(--foreground); color: var(--background); }
.badge { border-radius: 999px; font-weight: 700; }

.pagination .page-link {
  background: var(--card);
  border-color: var(--border);
  color: var(--foreground);
  border-radius: var(--radius-md);
}
.pagination .page-item.active .page-link {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}
.pagination .page-link:hover { background: var(--accent); color: var(--accent-foreground); }

.nav-tabs { border-bottom-color: var(--border); }
.nav-tabs .nav-link { color: var(--muted-foreground); font-weight: 700; border-radius: var(--radius-md) var(--radius-md) 0 0; }
.nav-tabs .nav-link.active {
  background: var(--card);
  color: var(--primary-strong);
  border-color: var(--border) var(--border) var(--card);
}

/* skeleton placeholderok */
.skeleton-placeholder, .skeleton-box { background: var(--muted) !important; }

/* --------------------------------------------------------------------------
   7. FEJLÉC (Wox desktop header: sticky, üveg-hatás, 72px)
   -------------------------------------------------------------------------- */
.wox-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1030;
  background: var(--card);
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
  backdrop-filter: blur(12px) saturate(1.5);
  border-bottom: 1px solid var(--border);
  -webkit-transform: none !important;
  transform: none !important;
  box-sizing: border-box;
}
.wox-header.headroom--unpinned,
.wox-header.headroom--pinned,
.wox-header.headroom--top {
  -webkit-transform: none !important;
  transform: none !important;
  top: 0 !important;
  visibility: visible !important;
}
/* A header backdrop-filter stacking contextje miatt a modal a háttér alá
   kerülhet. Magas z-index, ha a modal még a headerben van. */
.wox-header .modal,
.wox-header .el-overlay,
.wox-header .el-dialog__wrapper {
  z-index: 20050 !important;
}
body:has(.wox-header) {
  padding-top: var(--wox-header-h, 72px);
}
.wox-header__inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 72px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.wox-header .top-logo img { max-height: 42px; width: auto; }

/* Cím / szolgáltatás választó pill (widget-nav tartalma) */
.wox-header #vue-widget-nav a,
.wox-header .component-transaction-info a,
.wox-header .transaction-info a {
  color: var(--foreground);
  font-weight: 700;
  font-size: 0.9rem;
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
  text-decoration: none;
}
.wox-header #vue-widget-nav a:hover { background: var(--accent); color: var(--accent-foreground); }

/* Felhasználói menü (ul.top-menu)
   FONTOS: ne írjuk felül a Bootstrap d-none / d-lg-* display segédosztályokat
   (különben desktop+mobil Cart gomb egyszerre látszik az account #top-nav-on). */
ul.top-menu { margin: 0; display: inline-flex; align-items: center; gap: 0.5rem; list-style: none; }
ul.top-menu > li { align-items: center; }
ul.top-menu > li > a {
  color: var(--foreground);
  font-weight: 700;
  font-size: 0.92rem;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
}
ul.top-menu > li > a:hover { background: var(--accent); color: var(--accent-foreground); text-decoration: none; }
ul.top-menu > li.line-left { border-left: 0; }

/* Profil dropdown gomb */
.userprofile .dropdown-toggle {
  background: transparent;
  border: 0;
  color: var(--foreground);
  font-weight: 700;
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
}
.userprofile .dropdown-toggle:hover { background: var(--accent); color: var(--accent-foreground); }

/* Kosár ikon gomb */
.cart-handle {
  position: relative;
  width: 42px;
  height: 42px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--secondary);
  transition: background 0.2s ease;
}
.cart-handle:hover { background: var(--accent); }
.cart-handle img { width: 19px; height: 19px; }
html.dark .cart-handle img { filter: invert(1); }
.cart-handle .badge {
  position: absolute;
  top: -3px;
  right: -5px;
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 0.68rem;
  min-width: 19px;
  height: 19px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border-radius: 999px;
}

/* Hamburger (mobil) */
.hamburger .hamburger-inner,
.hamburger .hamburger-inner::before,
.hamburger .hamburger-inner::after { background-color: var(--foreground); }

/* Mobil drawer menü */
.drawer-menu, .el-drawer.drawer-menu { background: var(--card); }
.drawer-menu a { color: var(--foreground); font-weight: 600; }
.drawer-menu a:hover { color: var(--primary-strong); }

/* 1-es hamburger: profil + csoportok */
.el-drawer.drawer-menu.wox-drawer,
.el-drawer.wox-drawer {
  width: 86% !important;
  max-width: 360px;
  background: var(--card);
  color: var(--card-foreground);
  border-top-right-radius: 22px !important;
  border-bottom-right-radius: 22px !important;
  overflow: hidden;
}
.wox-drawer .el-drawer__body {
  display: flex;
  flex-direction: column;
  padding: 16px 16px 8px;
  overflow: auto;
}
.wox-drawer .el-drawer__footer {
  display: block;
  border-top: 0;
  padding: 4px 16px 18px;
  padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  text-align: left;
}
.wox-drawer__partner { text-align: left; }
.wox-drawer__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-top: env(safe-area-inset-top, 0px);
}
.wox-drawer__avatar {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--secondary);
  color: var(--foreground);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.05rem;
  overflow: hidden;
  flex-shrink: 0;
}
.wox-drawer__avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wox-drawer__avatar--guest .zmdi {
  font-size: 1.25rem;
  color: var(--muted-foreground);
}
.wox-drawer__who { min-width: 0; flex: 1; }
.wox-drawer__name {
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.2;
  color: var(--foreground);
}
.wox-drawer__sub {
  margin-top: 2px;
  font-size: 0.78rem;
  color: var(--muted-foreground);
}
.wox-drawer__close {
  margin-left: auto;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--secondary);
  color: var(--muted-foreground);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  padding: 0;
  line-height: 1;
}
.wox-drawer__close .zmdi { font-size: 1.15rem; }
.wox-drawer__close:hover,
.wox-drawer__close:focus {
  background: var(--muted);
  color: var(--foreground);
  outline: none;
}
.wox-drawer__nav { margin: 0; }
.wox-drawer__nav li { margin: 0 !important; }
.top-menu .drawer-menu.wox-drawer ul.with-icons li a,
.wox-drawer ul.with-icons li a,
.wox-drawer .wox-drawer__logout {
  display: flex !important;
  align-items: center;
  min-height: 46px;
  margin: 0;
  border-radius: 14px;
  font-size: 0.95rem !important;
  font-weight: 700;
  color: var(--foreground);
  text-indent: 0 !important;
  padding: 0.55rem 0.7rem 0.55rem 2.75rem !important;
}
.wox-drawer ul.with-icons li a:hover,
.wox-drawer ul.with-icons li a:focus,
.wox-drawer .wox-drawer__logout:hover,
.wox-drawer .wox-drawer__logout:focus {
  background: var(--muted);
  color: var(--foreground);
  text-decoration: none;
}
.wox-drawer .wox-drawer__logout {
  color: #e07a7a !important;
  margin-bottom: 0.35rem;
}
.wox-drawer .wox-drawer__logout:hover { color: #f0a0a0 !important; }
/* A kijelentkezés PNG fekete – invertáljuk, hogy sötét háttéren is látszódjon. */
.wox-drawer a.with-icon-logout::before,
.wox-drawer .wox-drawer__logout::before {
  filter: invert(1) brightness(1.15) sepia(0.55) saturate(6) hue-rotate(-40deg) !important;
}
.wox-drawer__sep {
  height: 1px;
  background: var(--border);
  margin: 0.45rem 0.35rem 0.45rem;
}
.wox-drawer__sec {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  font-weight: 800;
  margin: 0.85rem 0.4rem 0.45rem;
}
.wox-drawer__lang {
  position: relative;
  z-index: 2;
  pointer-events: auto;
}
.wox-drawer__lang .el-dropdown,
.wox-drawer__lang .el-dropdown-link,
.wox-drawer__lang .el-tooltip__trigger {
  width: 100%;
  pointer-events: auto;
  cursor: pointer;
}
.wox-drawer__lang .el-dropdown-link {
  display: flex !important;
  align-items: center;
  width: 100%;
  min-height: 44px;
  background: var(--secondary);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  color: var(--foreground);
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.wox-drawer__lang .el-dropdown-link .d-flex { width: 100%; }
.wox-drawer__cta {
  display: block;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0.75rem 0.85rem;
  font-weight: 800;
  font-size: 0.88rem;
  margin-top: 0.45rem;
  color: var(--foreground) !important;
  background: transparent;
}
.wox-drawer__cta:hover,
.wox-drawer__cta:focus {
  background: var(--muted);
  text-decoration: none;
  color: var(--foreground) !important;
}
.wox-drawer__signin {
  display: block;
  text-align: center;
  background: var(--foreground);
  color: var(--background) !important;
  border-radius: 14px;
  padding: 0.85rem 1rem;
  font-weight: 800;
  font-size: 0.95rem;
  margin: 0.25rem 0 1rem;
}
.wox-drawer__signin:hover,
.wox-drawer__signin:focus {
  opacity: 0.92;
  text-decoration: none;
  color: var(--background) !important;
}

/* Értesítés dropdown ikon */
.notification-dropdown .el-button,
.notification-dropdown button {
  border-radius: 999px;
}

/* --- WOX v2: fejléc-átrendezés (desktop) ---------------------------------- */
/* A #vue-widget-nav Bootstrap .col-ja ne nyelje el a helyet a kereső elől */
@media (min-width: 992px) {
  .wox-header #vue-widget-nav.col { flex: 0 1 auto; width: auto; }
}

/* Dekoratív keresődoboz a fejléc közepén (a /store/search oldalra visz) */
.wox-header__search {
  flex: 1 1 auto;
  max-width: 640px;
  min-width: 200px;
  margin: 0 1.25rem;
  height: 44px;
  align-items: center;
  gap: 0.55rem;
  padding: 0 1rem;
  border-radius: var(--radius-xl);
  background: var(--background);
  border: 1px solid var(--border);
  color: var(--muted-foreground);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.wox-header__search:hover {
  color: var(--foreground);
  border-color: var(--muted-foreground);
  text-decoration: none;
}
.wox-header__search i { font-size: 1.05rem; }

/* Kosár gomb (Wox „Kosár": táska ikon + felirat + számláló)
   Globális: a .wox-header ÉS az account #top-nav (column2) is ugyanezt kapja.
   A .cart-handle 42px kör stílust a .wox-cart-btn felülírja. */
.wox-cart-btn,
.wox-header .wox-cart-btn,
#top-nav .wox-cart-btn {
  width: auto !important;
  min-width: auto !important;
  height: 44px !important;
  padding: 0 1rem !important;
  gap: 0.5rem;
  border-radius: var(--radius-xl) !important;
  background: rgba(255,255,255,0.12) !important;
  color: #fff !important;
  font-weight: 800;
  font-size: 0.92rem;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.18) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transition: background 0.16s ease, border-color 0.16s ease;
}
.wox-cart-btn:hover,
.wox-header .wox-cart-btn:hover,
#top-nav .wox-cart-btn:hover {
  background: rgba(255,255,255,0.22) !important;
  border-color: rgba(255,255,255,0.32) !important;
  text-decoration: none;
  color: #fff !important;
}
html:not(.dark) .wox-cart-btn,
html:not(.dark) .wox-header .wox-cart-btn,
html:not(.dark) #top-nav .wox-cart-btn {
  background: rgba(0,0,0,0.08) !important;
  color: var(--foreground) !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
}
html:not(.dark) .wox-cart-btn:hover,
html:not(.dark) .wox-header .wox-cart-btn:hover,
html:not(.dark) #top-nav .wox-cart-btn:hover {
  background: rgba(0,0,0,0.13) !important;
  color: var(--foreground) !important;
}
.wox-cart-btn img,
.wox-header .wox-cart-btn img,
#top-nav .wox-cart-btn img {
  width: 18px;
  height: 18px;
  filter: none !important;
}
.wox-cart-btn .badge,
.wox-header .wox-cart-btn .badge,
#top-nav .wox-cart-btn .badge {
  position: static !important;
  top: auto !important;
  right: auto !important;
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
  min-width: 20px;
  height: 20px;
  font-size: 0.72rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border-radius: 999px;
}
.wox-cart-btn__label {
  font-weight: 800;
  line-height: 1;
}

/* Account #top-nav: a top-menu igazítása a restaurants headerhez */
#top-nav ul.top-menu {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}
/* Desktop cart látszik, mobil cart rejtve (Bootstrap d-* felülírás-biztos) */
@media (min-width: 992px) {
  #top-nav ul.top-menu > li.wox-cart-item {
    display: inline-flex !important;
  }
  #top-nav ul.top-menu > li.d-lg-none {
    display: none !important;
  }
}
@media (max-width: 991.98px) {
  #top-nav ul.top-menu > li.wox-cart-item {
    display: none !important;
  }
}

/* "Sign in" link → Wox secondary pill gomb */
.wox-header ul.top-menu > li.line-left > a:not(.wox-cart-btn) {
  background: var(--secondary);
  color: var(--secondary-foreground);
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  font-weight: 800;
}
.wox-header ul.top-menu > li.line-left > a:not(.wox-cart-btn):hover {
  background: var(--accent);
  color: var(--accent-foreground);
}

/* --------------------------------------------------------------------------
   8. TÉMAKAPCSOLÓ GOMB – az egész oldalon rejtve
   (a téma továbbra is a localStorage / rendszerbeállítás szerint működik)
   -------------------------------------------------------------------------- */
.wox-theme-toggle,
#wox-theme-toggle {
  display: none !important;
}

/* Mobil: a fejléc közepén lévő logó mögött ne lógjon kereső / témagomb */
@media (max-width: 991.98px) {
  .wox-header-search,
  .wox-header__actions .wox-header-search {
    display: none !important;
  }
  .action-restaurants .widget-search {
    display: none !important;
  }

  /* Éttermi menü: a második fejlécsor (Kiszállítás Most / 41) eltűnik.
     A Vue komponensek megmaradnak, csak nem foglalnak helyet
     és nem növelik a fejléc magasságát / szélességét. */
  .action-menu #vue-widget-nav-mobile {
    position: absolute !important;
    left: 0;
    right: 0;
    top: 0;
    width: 100% !important;
    max-width: 100% !important;
    height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
  }
  .action-menu #vue-widget-nav-mobile > .flexcol,
  .action-menu #vue-widget-nav-mobile > .widget-search,
  .action-menu #vue-widget-nav-mobile > .widget-services {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  /* A Bootstrap / Element modalok a 0 magas dobozban is kattinthatók maradnak */
  .action-menu #vue-widget-nav-mobile .modal,
  .action-menu #vue-widget-nav-mobile .el-overlay,
  .action-menu #vue-widget-nav-mobile .el-dialog,
  .action-menu #vue-widget-nav-mobile .el-overlay-dialog {
    overflow: visible;
  }
  .wox-header-profile {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   9. KEZDŐLAP – Wox hero (2 oszlop: szöveg + kereső | ételfotó)
   Sötét módban a primary majdnem-fehér → világos kártya, sötét szöveg,
   sötét keresőmező (a Wox dark shadcn kontraszt).
   -------------------------------------------------------------------------- */
.wox-hero-wrap { padding-top: 1.25rem; }
.wox-hero {
  position: relative;
  overflow: hidden;
  background: var(--primary);
  color: var(--primary-foreground);
  border-radius: var(--radius-3xl);
  text-align: left;
}
.wox-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
}
@media (min-width: 768px) {
  .wox-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.wox-hero__content {
  padding: 3rem 2.5rem;
  position: relative;
  z-index: 1;
}
.wox-hero__media {
  position: relative;
  min-height: 100%;
}
.wox-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wox-hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: color-mix(in oklch, var(--primary-foreground) 14%, transparent);
  color: var(--primary-foreground);
  font-weight: 800;
  font-size: 0.85rem;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  margin-bottom: 1.25rem;
}
.wox-hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.4rem;
  line-height: 1.15;
  color: var(--primary-foreground);
  margin: 0 0 0.75rem;
  max-width: 480px;
  position: relative;
  z-index: 1;
}
.wox-hero__subtitle {
  color: color-mix(in oklch, var(--primary-foreground) 85%, transparent);
  font-size: 1.02rem;
  font-weight: 600;
  margin: 0;
  max-width: 440px;
  position: relative;
  z-index: 1;
}
.wox-hero__search {
  max-width: 480px;
  margin: 1.75rem 0 0;
  position: relative;
  z-index: 2;
}
/* A component-auto-complete mezője a hero-ban: a világos kártyán SÖTÉT mező
   (dark módban) / fehér mező (light módban) – a --background token adja. */
.wox-hero__search input,
.wox-hero__search .form-control,
.wox-hero__search .el-input__wrapper {
  min-height: 52px;
  border-radius: var(--radius-xl) !important;
  border: 0;
  background: var(--background) !important;
  color: var(--foreground);
  box-shadow: var(--shadow-md) !important;
  font-weight: 600;
}
.wox-hero__search .el-input__wrapper { box-shadow: var(--shadow-md) !important; }
.wox-hero__search input::placeholder { color: var(--muted-foreground); }

/* A locate (pozícióbemérő) ikon a bundle-ban inline color:#000-t kapott –
   sötét mezőn láthatatlanná válik. Dark módban világos ikon + secondary
   kör gomb háttér; hover-re "pop" effekt (rugalmas nagyítás), az alap
   kék csík/underline animáció letiltva. */
html.dark .wox-hero__search .el-input__suffix .btn,
html.dark .wox-hero__search .el-input__suffix .btn:hover,
html.dark .wox-hero__search .el-input__suffix .btn:focus,
html.dark .wox-hero__search .el-input__suffix .btn:active {
  background: var(--secondary);
  border: 0;
  box-shadow: none;
  outline: none;
  text-decoration: none !important;
  border-radius: 999px;
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
html.dark .wox-hero__search .el-input__suffix .btn:hover {
  transform: scale(1.15);
}
html.dark .wox-hero__search .el-input__suffix .btn:active {
  transform: scale(0.95);
}
html.dark .wox-hero__search .el-input__suffix .btn i,
html.dark .wox-hero__search .el-input__suffix .btn:hover i {
  text-decoration: none !important;
}
html.dark .wox-hero__search .zmdi-my-location { color: var(--secondary-foreground) !important; }

/* A jobbra-nyíl (submit) gomb: sötét háttér, mint a keresőbox, világos nyíllal */
.wox-hero__search .flex-enabled-locate .btn-green,
.wox-hero__search .flex-enabled-locate .btn-green:focus {
  background: var(--background) !important;
  color: var(--foreground) !important;
  border: 0;
  border-radius: var(--radius-xl);
  min-width: 52px;
  min-height: 52px;
  box-shadow: var(--shadow-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, filter 0.2s ease;
}
.wox-hero__search .flex-enabled-locate .btn-green:hover {
  background: var(--background) !important;
  color: var(--foreground) !important;
  filter: none;
  transform: scale(1.08);
  box-shadow: var(--shadow-lg);
}
.wox-hero__search .flex-enabled-locate .btn-green:active { transform: scale(0.95); }

/* Elhalványuló átmenet a hero szövege és a fotó között */
.wox-hero__media::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 110px;
  background: linear-gradient(to right, var(--primary) 0%, color-mix(in oklch, var(--primary) 60%, transparent) 45%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}

/* Szekció címek a kezdőlapon */
.swiperOutsideContainer h3,
#vue-home-widgets h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
}

/* "View all" link a szekciócím jobb oldalán (Wox: text-sm semibold primary) */
.wox-section-link {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--primary-strong);
  text-decoration: none;
  white-space: nowrap;
}
.wox-section-link:hover { text-decoration: underline; color: var(--primary-strong); }

/* Mobilapp szekciĂł */
.section-mobileapp {
  background: var(--secondary);
  color: var(--secondary-foreground);
  border-radius: var(--radius-3xl);
}
.section-mobileapp h1, .section-mobileapp h5 { font-family: var(--font-display); }
.section-mobileapp h1 { font-weight: 800; }

/* --------------------------------------------------------------------------
   10. ÉTTEREM KÁRTYÁK (Wox RestaurantCard)
   -------------------------------------------------------------------------- */
.wox-card {
  background: var(--card);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 0;
  cursor: pointer;
  height: 100%;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.wox-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.wox-card__media { position: relative; }
.wox-card__media img,
.wox-card__media .el-image {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}
.wox-card__media .el-image img { aspect-ratio: auto; height: 100%; }

/* Akciós jelvények a képen (üveg-hatás) */
.wox-card__badges {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 9;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.wox-card__badges .el-tag {
  background: color-mix(in oklch, var(--card) 82%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--foreground);
  font-weight: 800;
  font-size: 0.72rem;
  box-shadow: var(--shadow-sm);
}

/* Értékelés pill a kép bal alsó sarkában */
.wox-card__rating {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 9;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: color-mix(in oklch, var(--card) 90%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--foreground);
  font-size: 0.75rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.wox-card__rating i { color: var(--primary-strong); }
.wox-card__rating-count { color: var(--muted-foreground); font-weight: 600; }

.wox-card__body { padding: 0.9rem 1rem 1rem; }
.wox-card__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.02rem;
  color: var(--foreground);
  margin-bottom: 2px;
}
.wox-card__subtitle { color: var(--muted-foreground); font-size: 0.88rem; }
.wox-card__meta {
  display: flex;
  gap: 1rem;
  margin-top: 0.65rem;
  color: var(--muted-foreground);
  font-size: 0.78rem;
  font-weight: 700;
}
.wox-card__meta span { display: inline-flex; align-items: center; gap: 5px; }
.wox-card__meta i { color: var(--primary-strong); font-size: 0.9rem; }

/* Best Seller swiper – a style.css regi keretes/9rem-es szabalyainak felulirasa,
   hogy a kartyak ugyanugy nezzenek ki, mint a feed-ben */
#vue-home-widgets .swiperResto .swiperSlide {
  min-height: 0 !important;
  border: 0;
  border-radius: var(--radius-2xl);
}
#vue-home-widgets .swiperResto .swiperSlide img {
  min-height: 0;
  max-height: none;
  border-radius: 0;
}

/* swiper navigacios gombok Wox-stilusban (best seller lista nyilai) */
#vue-home-widgets .swiperResto .swiper-button-next,
#vue-home-widgets .swiperResto .swiper-button-prev {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--background) 72%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  color: var(--foreground);
  top: 34%;
  transition: transform 0.18s ease, background 0.18s ease;
}
#vue-home-widgets .swiperResto .swiper-button-next:hover,
#vue-home-widgets .swiperResto .swiper-button-prev:hover {
  transform: scale(1.12);
  background: var(--background);
}
#vue-home-widgets .swiperResto .swiper-button-next { right: 6px; }
#vue-home-widgets .swiperResto .swiper-button-prev { left: 6px; }
#vue-home-widgets .swiperResto .swiper-button-next .el-button,
#vue-home-widgets .swiperResto .swiper-button-prev .el-button {
  background: transparent;
  border: 0;
  color: inherit;
  width: 100%;
  height: 100%;
  padding: 0;
  font-size: 1rem;
}
#vue-home-widgets .swiperResto .swiper-button-disabled { opacity: 0.35; }

/* Zárt étterem overlay-ek (meglévő logika, új külső) */
.layer-grey { background: color-mix(in oklch, var(--muted) 70%, transparent); }
.layer-black { background: rgb(0 0 0 / 0.45); }
.layer-content p { font-family: var(--font-display); }

/* Swiper navigációs gombok */
.swiper-button-next .el-button,
.swiper-button-prev .el-button {
  background: var(--card);
  color: var(--foreground);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.swiper-button-next .el-button:hover,
.swiper-button-prev .el-button:hover { background: var(--accent); color: var(--accent-foreground); }

/* --------------------------------------------------------------------------
   11. KONYHÁK / KATEGÓRIA CHIPEK (Wox kategória kártyák)
   A markup nem változik: .swiperSlide > el-link > div > img + .truncate.
   A kép doboza kapja a kártya-hátteret (24px radius, border), a felirat
   alatta, muted színnel – hover-re emelkedik.
   -------------------------------------------------------------------------- */
.swiperCuisine .swiperSlide {
  background: transparent;
  box-shadow: none;
  padding: 0;
}
.swiperCuisine .el-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.swiperCuisine .el-links > div:first-child {
  width: 112px;
  max-width: 100%;
  height: 112px;
  border-radius: 24px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.swiperCuisine .swiperSlide:hover .el-links > div:first-child {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--muted-foreground);
}
.swiperCuisine .swiperSlide img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--background);
  padding: 4px;
  box-shadow: inset 0 0 0 1px var(--border);
  transition: transform 0.3s ease;
}
.swiperCuisine .swiperSlide:hover img { transform: scale(1.05); }
.swiperCuisine .swiperSlide .truncate {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted-foreground);
  transition: color 0.2s ease;
}
.swiperCuisine .swiperSlide:hover .truncate { color: var(--foreground); }
.swiperCuisine .el-links { color: var(--foreground); }

/* --------------------------------------------------------------------------
   12. KIEMELT ÉTELEK (featured items)
   -------------------------------------------------------------------------- */
.featured-item-price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--foreground);
}
.wox-add-btn, .wox-add-btn.el-button {
  background: var(--primary) !important;
  border-color: transparent !important;
  color: var(--primary-foreground) !important;
  font-weight: 800;
}
.wox-add-btn:hover { filter: brightness(0.93); }
.wox-add-btn:disabled { opacity: 0.5; }

/* --------------------------------------------------------------------------
   13. ÉTTEREM OLDAL – fejléc, kategória oldalsáv, étlap, kosár
   -------------------------------------------------------------------------- */
.merchant-top-header {
  background: var(--card);
  border-bottom: 1px solid var(--border);
}
.merchant-top-header .img-thumbnail {
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
.info-items-dot-separator { background: var(--border); }

/* Kategória oldalsáv (#menu-category) */
#menu-category, .menu-category {
  background: var(--card);
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.menu-category a, #menu-category .col a {
  color: var(--muted-foreground);
  font-weight: 700;
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
}
.menu-category a:hover { color: var(--foreground); background: var(--accent); }
.menu-category li.active a, .menu-category li a.active,
#menu-category .col a.active {
  color: var(--primary-strong);
  background: color-mix(in oklch, var(--primary) 14%, transparent);
}
.menu-category li.active a:after, .menu-category li a.active:after {
  background: var(--primary);
}

/* Étlap sorok */
.list-item-rows {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.list-item-rows:hover { box-shadow: var(--shadow-md); }
.list-item-rows img, .item-image-preview { border-radius: var(--radius-xl); }
.prices, .bold.m-0.prices { font-family: var(--font-display); font-weight: 800; color: var(--foreground); }

/* Mennyiség / kosárba gombok az étlapon */
.quantity-add-cart.btn, .quantity-add-cart {
  border-radius: 999px;
  font-weight: 800;
}
.quantity a.rounded-pill, .rounded-button-icon {
  background: var(--secondary);
  color: var(--secondary-foreground);
  border-radius: 999px;
}
.quantity a.rounded-pill:hover, .rounded-button-icon:hover {
  background: var(--primary);
  color: var(--primary-foreground);
}

/* Kosár oldalsáv / drawer
   A JS StickySidebar KI VAN KAPCSOLVA a .sticky-cart-on (front.bundle.js):
   helyette CSS position:sticky (lasd 34. szekcio .menu-right .sticky-cart),
   igy a kartya es a tartalom mindig egyutt mozog, es nem log at mas szekciokba. */
.sticky-cart, #vue-cart .cart-sidebar, .cart-preview-container {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-md);
}
/* Régi style.css .section-cart .items / .divider border-bottom vonalai –
   a Wox tételkártyák (.wox-cart-item-card) adják a szeparációt, ne legyen
   "vonalas" háttér a checkout / menü kosárban. */
.section-cart .items,
.section-cart > .divider,
#vue-cart > .divider,
.sticky-cart > .divider {
  border-bottom: none !important;
}
.divider {
  height: 1px;
  padding: 0 !important;
  border: 0 !important;
  background: var(--border);
  background-image: none !important;
}
.ssm-nav, .slide-and-swipe-menu { background: var(--card) !important; color: var(--card-foreground); }

/* Szolgáltatás gombok (delivery/pickup pill) */
.services-list .btn, .component-merchant-services .btn {
  border-radius: 999px;
  font-weight: 700;
}

/* Értékelések */
#section-review .media, .review-list .media { border-bottom-color: var(--border); }

/* --------------------------------------------------------------------------
   14. FEED (étterem lista) – szűrők
   -------------------------------------------------------------------------- */
.section-filter, #sectionFilter {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-sm);
  padding: 0.5rem 1rem;
}
#sectionFilter .filter-row { border-bottom-color: var(--border); }
#sectionFilter h5 a { color: var(--foreground); font-family: var(--font-display); font-weight: 800; }
#feed-search-mobile .inputs-box-grey { min-height: 46px; }
.filter_wrap .filter_placeholder { border-radius: var(--radius-lg); }

/* --------------------------------------------------------------------------
   15. PÉNZTÁR (checkout)
   A style.css .page-grey { background:#f6f7f8 } Ă©s body #fff miatt
   dark módban is fehér/világos maradt. Tokenes háttér + kártyák.
   -------------------------------------------------------------------------- */
#vue-checkout-back a { color: var(--foreground); font-weight: 700; }

/* Teljes oldalháttér – checkout és minden page-grey / page-content */
.page-grey,
.page-content,
.page-content .page-grey,
.page-content > .container-fluid.page-grey {
  background: var(--background) !important;
  color: var(--foreground);
  min-height: calc(100vh - 80px);
}
/* style.css: body.column2-layout, .grey-bg, #cmaps, .page-grey → #f6f7f8 */
body.column2-layout,
.grey-bg,
#cmaps {
  background: var(--background) !important;
}

/* Checkout kártyák (bal lépések + jobb kosár) */
.page-grey > .container .card,
.page-content .card,
.checkout-page .card,
.checkout-section,
#vue-cart .card {
  background: var(--card) !important;
  color: var(--card-foreground);
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-sm);
}
.page-grey .card-body,
#vue-cart .card-body {
  color: var(--card-foreground);
}
.page-grey .section-title,
.page-grey h5,
.page-grey h6,
#vue-cart h5 {
  color: var(--foreground);
  font-family: var(--font-display);
  font-weight: 800;
}
.page-grey .text-muted,
.page-grey p,
#vue-cart p {
  color: var(--muted-foreground);
}
/* Divider: ne legyen vastag színű sáv (régi style.css border + background) */
.page-grey .divider,
#vue-cart .divider {
  height: 1px;
  padding: 0 !important;
  margin: 0.75rem 0;
  border: 0 !important;
  border-bottom: 0 !important;
  background: var(--border) !important;
  background-image: none !important;
}
/* section-cart .items / .divider vonal-zaja kikapcsolva a checkout kosárban –
   a tételkártyák (.wox-cart-item-card) adják a szeparációt, mint a menü oldalon */
.page-grey .section-cart .items,
#vue-cart .section-cart .items,
.wox-checkout-cart .section-cart .items {
  border-bottom: none !important;
  padding-top: 0;
  padding-bottom: 0;
}

/* Lépés badge-ek a checkouton */
.page-grey .badge-dark {
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
}
/* Chevron / választható sorok */
.page-grey .chevron-section,
.page-grey a.chevron-section {
  background: var(--muted);
  border: 1px solid var(--border);
  color: var(--foreground);
}
.page-grey .chevron-section:hover {
  background: var(--accent);
  text-decoration: none;
  color: var(--foreground);
}

/* Checkout sticky cart = menĂĽ oldali .menu-right .sticky-cart */
.page-grey .menu-right .sticky-cart,
.page-grey .wox-checkout-cart.sticky-cart,
#vue-cart.wox-checkout-cart {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-3xl) !important;
  box-shadow: var(--shadow-sm);
  padding: 1.25rem 1.35rem !important;
  position: sticky;
  top: 90px;
  align-self: flex-start;
  /* ne örököljön extra belső kártya-keretet */
  overflow: hidden;
}
/* Belső .card ne jelenjen meg a checkout kosárban (ha valahol maradt) */
.wox-checkout-cart > .card,
#vue-cart.wox-checkout-cart .card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.wox-checkout-cart .card-body {
  padding: 0 !important;
}
/* Étterem fejléc a checkout kosár tetején */
.wox-checkout-cart__merchant {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.wox-checkout-cart__merchant-link {
  color: var(--foreground) !important;
  text-decoration: none !important;
}
.wox-checkout-cart__merchant-link:hover h5 {
  color: var(--primary-strong);
}
.wox-checkout-cart__merchant h5 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  color: var(--foreground);
}
.wox-checkout-cart__merchant p {
  color: var(--muted-foreground) !important;
  font-size: 0.8rem;
  font-weight: 500;
}
/* Tételkártyák a checkouton is ugyanazok, mint a menüben */
.wox-checkout-cart .wox-cart-item-card {
  background: color-mix(in oklch, var(--muted) 55%, var(--card)) !important;
  border: 1px solid var(--border);
}
.wox-checkout-cart .wox-cart-summary-card {
  background: color-mix(in oklch, var(--muted) 40%, var(--card)) !important;
}

/* --------------------------------------------------------------------------
   16. AUTH OLDALAK (belépés / regisztráció) – Wox középre zárt kártya
   -------------------------------------------------------------------------- */
.login-container, .signup-container {
  max-width: 460px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-3xl);
  box-shadow: var(--shadow-md);
  padding: 2.5rem 2.25rem !important;
  margin-top: 3rem !important;
  margin-bottom: 3rem !important;
}
.login-container h5, .signup-container h5 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--foreground);
}
.login-container .custom-control-label::before,
.signup-container .custom-control-label::before {
  background-color: var(--muted);
  border: 1.5px solid var(--border);
}
html.dark .login-container .custom-control-input:checked ~ .custom-control-label::before,
html.dark .signup-container .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
}
html.dark .login-container .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after,
html.dark .signup-container .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%231b250c' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e") !important;
}
/* Primary CTA (Sign in / Sign Up / Get OTP) */
.login-container .btn-green,
.signup-container .btn-green {
  min-height: 52px;
  padding: 0.85rem 1.5rem !important;
  border-radius: var(--radius-xl);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem !important;
  line-height: 1.3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Secondary link gomb (Sign Up a loginon, Sign in a regisztráción)
   A régi .p-0 font14 miatt a szöveg kilógott a kicsi keretből. */
.wox-auth-link-btn,
.login-container .btn-white,
.signup-container .btn-white {
  min-height: 44px;
  padding: 0.65rem 1.5rem !important;
  border-radius: var(--radius-xl) !important;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem !important;
  line-height: 1.3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border) !important;
  background: var(--card) !important;
  color: var(--primary-strong) !important;
  text-decoration: none !important;
  white-space: nowrap;
}
.wox-auth-link-btn:hover,
.login-container .btn-white:hover,
.signup-container .btn-white:hover {
  background: var(--accent) !important;
  color: var(--accent-foreground) !important;
  text-decoration: none !important;
}
/* Guest / secondary full-width gombok */
.login-container .btn-light,
.signup-container .btn-light {
  min-height: 48px;
  padding: 0.75rem 1.25rem !important;
  border-radius: var(--radius-xl);
  font-weight: 700;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.a-12 { color: var(--muted-foreground); }
.a-12:hover { color: var(--primary-strong); }

/* Jelszó mező szem ikon (show/hide) – style.css hardcode #000, dark-ban láthatatlan */
.change_field_password a {
  color: var(--muted-foreground) !important;
  opacity: 0.95;
}
.change_field_password a:hover {
  color: var(--foreground) !important;
}
.change_field_password a i,
.change_field_password a .zmdi {
  color: inherit;
  font-size: 1.25rem;
}
html.dark .change_field_password a {
  color: var(--foreground) !important; /* világos/fehér a sötét mezőn */
}
html.dark .change_field_password a:hover {
  color: #fff !important;
  opacity: 1;
}

/* --------------------------------------------------------------------------
   17. FIÓK FELÜLET (column2 layout: oldalsáv + tartalom + profil)
   -------------------------------------------------------------------------- */

/* Oldalháttér – a style.css/responsive.css #f6f7f8 / #fff felülírása */
body.column2-layout,
body.column2-layout .grey-bg {
  background: var(--background) !important;
}

/* ---- Fixed sidebar ---- */
#sidebar,
#sidebar.wox-account-sidebar {
  position: fixed !important;
  top: 65px !important;
  bottom: 0 !important;
  height: calc(100vh - 65px) !important;
  background: var(--card) !important;
  border: 0 !important;
  border-right: 1px solid var(--border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 1.25rem 1rem 1.5rem !important;
  width: 272px !important;
  overflow-y: auto !important;
  z-index: 30 !important;
}

/* Felhasználó blokk a sidebar tetején */
.wox-account-sidebar__user {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  margin-bottom: 1.25rem;
  border-radius: var(--radius-xl);
  background: var(--muted);
  border: 1px solid var(--border);
}
.wox-account-sidebar__avatar {
  position: relative;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px var(--primary);
}
.wox-account-sidebar__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.wox-account-sidebar__avatar .skeleton-placeholder {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.wox-account-sidebar__meta h6 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--foreground);
  margin: 0 0 0.15rem;
  line-height: 1.2;
}
.wox-account-sidebar__meta p,
#sidebar .wox-account-sidebar__meta .text-grey {
  margin: 0;
  color: var(--muted-foreground) !important;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
  word-break: break-word;
}

#sidebar h6 { font-family: var(--font-display); font-weight: 800; color: var(--foreground); }
#sidebar ul.siderbar-menu { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
#sidebar ul.siderbar-menu li a,
.siderbar-menu a {
  display: flex !important;
  align-items: center;
  color: var(--muted-foreground) !important;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.75rem 0.9rem !important;
  border-radius: var(--radius-lg);
  transition: background 0.18s ease, color 0.18s ease;
  text-decoration: none !important;
  position: relative !important;
  text-indent: 0 !important;
  padding-left: 2.65rem !important;
  background-image: none !important;
}

.siderbar-menu a::before {
  content: "" !important;
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 20px !important;
  height: 20px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  transition: transform 0.18s ease, filter 0.18s ease !important;
}

.siderbar-menu .account a::before { background-image: url("../images/account.png") !important; }
.siderbar-menu .orders a::before { background-image: url("../images/orders-icon.png") !important; }
.siderbar-menu .booking a::before,
.siderbar-menu .bookings a::before { background-image: url("../images/booking-icon.png") !important; }
.siderbar-menu .offers a::before { background-image: url("../images/offers-icon.png") !important; }
.siderbar-menu .favourites a::before { background-image: url("../images/favorites-icon.png") !important; }
.siderbar-menu .payments a::before { background-image: url("../images/payments-icon.png") !important; }
.siderbar-menu .addresses a::before { background-image: url("../images/location.png") !important; }
.siderbar-menu .points a::before { background-image: url("../images/points-icon.png") !important; }
.siderbar-menu .gift a::before { background-image: url("../images/gift.png") !important; }
.siderbar-menu .wallet a::before { background-image: url("../images/wallet-2.png") !important; }
.siderbar-menu .livechat a::before { background-image: url("../images/live-chat2.png") !important; }
.siderbar-menu .logout a::before { background-image: url("../images/log-out.png") !important; }

/* Dark mode: PNG ikonok világossá tétele */
html.dark .siderbar-menu a::before,
body.dark-theme .siderbar-menu a::before {
  filter: invert(0.9) brightness(1.5) !important;
}

#sidebar ul.siderbar-menu li a:hover,
.siderbar-menu a:hover {
  background-color: var(--accent) !important;
  color: var(--accent-foreground) !important;
  text-decoration: none !important;
}
#sidebar ul.siderbar-menu li a:hover::before,
.siderbar-menu a:hover::before {
  transform: translateY(-50%) scale(1.1) !important;
}

#sidebar ul.siderbar-menu li.active a,
#sidebar ul.siderbar-menu li a.active,
.siderbar-menu li.active a {
  background-color: color-mix(in oklch, var(--primary) 16%, transparent) !important;
  color: var(--primary-strong) !important;
}
#sidebar ul.siderbar-menu li.active a::before,
.siderbar-menu li.active a::before {
  filter: invert(0.85) sepia(1) saturate(5) hue-rotate(190deg) brightness(1.2) !important;
}

/* Logout – enyhén destructive hang */
#sidebar ul.siderbar-menu li.logout a,
.siderbar-menu .logout a {
  margin-top: 0.75rem;
  color: var(--muted-foreground) !important;
}
#sidebar ul.siderbar-menu li.logout a:hover,
.siderbar-menu .logout a:hover {
  background-color: color-mix(in oklch, var(--destructive) 12%, transparent) !important;
  color: var(--destructive) !important;
}

#top-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
  padding-left: 1rem;
  padding-right: 1.25rem;
  overflow: visible;
}
/* A blur ne legyen a #top-nav-on: a backdrop-filter containing blockot
   csinál, és a hamburger menü (fixed drawer) a fejléc magasságába szorul. */
#top-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
#top-nav .wox-header__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  z-index: 2;
  pointer-events: none;
}
#top-nav .wox-header__logo a,
#top-nav .wox-header__logo img {
  pointer-events: auto;
}
#top-nav .top-logo img {
  max-height: 42px;
  width: auto;
}
@media (max-width: 991.98px) {
  #top-nav .top-logo img {
    max-height: 32px;
  }
}
body.column2-layout #main-container {
  background: var(--background);
  padding-left: 272px;
  padding-top: 1.25rem;
  padding-bottom: 2.5rem;
}
body.column2-layout #main-container > .container-fluid {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

/* Fiók oldali kártyák/panelek */
.my-profile-card, .account-card, .panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-sm);
}

/* ---- Profil oldal shell ---- */
.wox-account-page {
  padding-bottom: 1rem;
}
.wox-account-page__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
  padding: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--foreground);
  line-height: 1.2;
}
.wox-account-page__title .with-icon {
  text-indent: 0;
  padding: 0;
  background: none !important;
}
.wox-account-page__title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-lg);
  background: color-mix(in oklch, var(--primary) 16%, transparent);
  color: var(--primary-strong);
  font-size: 1.1rem;
  flex-shrink: 0;
}

.wox-account-panel {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-3xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  min-height: 420px;
}

.wox-account-aside {
  padding: 1.5rem 1.15rem;
  border-right: 1px solid var(--border);
  background: color-mix(in oklch, var(--muted) 55%, var(--card));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.25rem;
}
.wox-account-aside__photo {
  display: flex;
  justify-content: center;
  padding: 0.25rem 0 0.5rem;
}
.wox-account-aside__photo .preview-image,
.wox-account-aside__photo .col-lg-7 {
  width: 100%;
  max-width: 120px;
  margin: 0 auto;
  padding: 0;
}
.wox-account-aside__photo #vue-profile-photo,
.wox-account-aside__photo .update-photo {
  width: 112px;
  height: 112px;
  margin: 0 auto;
  border-radius: 50%;
}
.wox-account-aside__photo .update-photo .el-image,
.wox-account-aside__photo .update-photo .el-image img {
  width: 112px !important;
  height: 112px !important;
  border-radius: 50%;
  object-fit: cover;
}
.wox-account-aside__photo .update-photo .layer-black,
.wox-account-aside__photo .update-photo .d-flex.align-items-center {
  width: 112px !important;
  height: 112px !important;
  min-width: 112px;
  min-height: 112px;
  max-width: 112px;
  max-height: 112px;
  border-radius: 50%;
}
.wox-account-aside__photo .update-photo a.handle {
  color: #fff !important;
  font-size: 0.78rem;
  font-weight: 700;
}
.wox-account-aside__photo .update-photo {
  box-shadow: 0 0 0 3px var(--card), 0 0 0 5px color-mix(in oklch, var(--primary) 55%, transparent);
}

/* Profil almenü (Basic Details / Change Password / …) */
.wox-account-aside .attributes-menu-wrap { width: 100%; }
.wox-account-aside ul.sub-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wox-account-aside ul.sub-menu li a {
  display: flex !important;
  align-items: center;
  gap: 0.55rem;
  color: var(--muted-foreground) !important;
  font-weight: 700;
  font-size: 0.88rem;
  padding: 0.7rem 0.85rem !important;
  border-radius: var(--radius-lg);
  text-decoration: none !important;
  transition: background 0.18s ease, color 0.18s ease;
  background: transparent !important;
}
.wox-account-aside ul.sub-menu li a i {
  margin-right: 0 !important;
  font-size: 1.15rem;
  opacity: 0.9;
  width: 1.25rem;
  text-align: center;
}
.wox-account-aside ul.sub-menu li a:hover {
  background: var(--accent) !important;
  color: var(--accent-foreground) !important;
}
.wox-account-aside ul.sub-menu li.active a,
.wox-account-aside ul.sub-menu li.active a:hover {
  background: color-mix(in oklch, var(--primary) 18%, transparent) !important;
  color: var(--primary-strong) !important;
  box-shadow: none;
}

.wox-account-main {
  padding: 1.5rem 1.75rem 1.75rem;
  min-width: 0;
  background: var(--card);
}
.wox-account-main__title {
  margin: 0 0 1.25rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--foreground);
}
.wox-account-main .form-label-group > label {
  color: var(--muted-foreground);
}
.wox-account-main .form-control,
.wox-account-main .form-control-text {
  background-color: var(--muted) !important;
  border: 1px solid var(--input) !important;
  color: var(--foreground) !important;
  border-radius: var(--radius-lg);
  min-height: 52px;
}
.wox-account-main .form-control:focus,
.wox-account-main .form-control-text:focus {
  background-color: var(--card) !important;
  border-color: var(--ring) !important;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 25%, transparent);
}
.wox-account-main .btn-green {
  border-radius: var(--radius-xl);
  min-height: 50px;
  font-weight: 800;
  font-family: var(--font-display);
  font-size: 0.95rem;
  margin-top: 0.75rem;
}
.wox-account-main h5,
.wox-account-main h6 {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--foreground);
}
.wox-account-main p {
  color: var(--muted-foreground);
}
.wox-account-main hr {
  border-top-color: var(--border);
  opacity: 1;
}
.wox-account-main .text-green {
  color: var(--primary-strong) !important;
  font-weight: 700;
}

/* Mobil profil header */
#upload-profile {
  padding: 1.25rem 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  margin-bottom: 1rem !important;
}
#upload-profile h5 {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--foreground);
}
#upload-profile .text-muted { color: var(--muted-foreground) !important; }
#vue-profile-menu {
  margin-bottom: 1rem !important;
}

/* Fiók listák (orders, addresses, payments…) header sáv */
body.column2-layout .card .grey-bg,
body.column2-layout .grey-bg {
  background: color-mix(in oklch, var(--muted) 60%, transparent) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xl) !important;
}
body.column2-layout .card {
  background: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--card-foreground) !important;
}

/* KÖR IKONOK A FEJLÉCEKBEN (Payment, Addresses, Wallet, Favourites, Bookings, Points) */
body.column2-layout .header_icon {
  background-color: color-mix(in oklch, var(--primary) 18%, transparent) !important;
  border-radius: var(--radius-xl) !important;
  width: 52px !important;
  height: 52px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 26px 26px !important;
  margin: 0 auto;
}

/* Szülő ikonos osztályok háttérképei a körökben */
.header_icon._icons.bag { background-image: url("../images/shopping-bag.svg") !important; }
.header_icon._icons.location { background-image: url("../images/location.svg") !important; }
.header_icon._icons.credit_card { background-image: url("../images/credit-card.svg") !important; }
.header_icon._icons.favourite { background-image: url("../images/favourite-heart.svg") !important; }
.header_icon._icons.points { background-image: url("../images/gift@2x.png") !important; }
.header_icon._icons.digital-wallet { background-image: url("../images/wallet-1.png") !important; }

/* Sötét mód: a sötét vektoros ikonok világosítása a körökben */
html.dark body.column2-layout .header_icon._icons,
body.dark-theme body.column2-layout .header_icon._icons {
  filter: invert(0.92) brightness(1.6) !important;
}

body.column2-layout h5 {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--foreground);
}
body.column2-layout .card p {
  color: var(--muted-foreground);
}

/* ==========================================================================
   FIÓK / RENDELÉSEK (account/orders - #vue-my-order) PROFI MODERN DIZÁJN
   ========================================================================== */

/* 1. Keresősáv fehéredési hiba javítása & modernizálás */
.search-geocomplete,
.order-search-wrap .search-geocomplete {
  background: transparent !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: none !important;
  border: none !important;
}

.order-search-wrap .search-geocomplete input,
.search-geocomplete input.form-control-text-white,
.search-geocomplete input.form-control {
  background-color: var(--muted) !important;
  border: 1px solid var(--border) !important;
  color: var(--foreground) !important;
  border-radius: var(--radius-xl) !important;
  padding-left: 2.6rem !important;
  padding-right: 2.2rem !important;
  height: 42px !important;
  font-size: 0.9rem !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all 0.2s ease !important;
}

.order-search-wrap .search-geocomplete input:focus,
.search-geocomplete input.form-control-text-white:focus {
  border-color: var(--ring) !important;
  background-color: var(--card) !important;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 25%, transparent) !important;
  outline: none !important;
}

.search-geocomplete .search_placeholder.icon,
.search-geocomplete .icon {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--muted-foreground) !important;
  z-index: 2;
  font-size: 1.1rem;
}

.search-geocomplete .icon-remove {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--muted-foreground) !important;
  z-index: 2;
  cursor: pointer;
}

/* Cím-autocomplete: sötétben olvasható lista, világos tű, üres lista ne legyen fehér csík */
html.dark .pin_placeholder,
html.dark .search-geocomplete .pin_placeholder {
  filter: invert(1) brightness(1.25);
}
.auto-complete .search-geocomplete-results,
.search-geocomplete-results {
  background: var(--card) !important;
  color: var(--foreground) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px;
  overflow: hidden;
  margin-top: 0.35rem;
  box-shadow: var(--shadow-lg);
  z-index: 30;
}
.auto-complete .search-geocomplete-results:not(:has(li)),
.search-geocomplete-results:not(:has(li)) {
  display: none !important;
  border: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.search-geocomplete-results ul,
.search-geocomplete-results ul.border {
  border: 0 !important;
  margin: 0 !important;
}
.search-geocomplete-results a,
.search-geocomplete-results a h6 {
  color: var(--foreground) !important;
}
.search-geocomplete-results a {
  background-color: transparent !important;
}
.search-geocomplete-results a:hover,
.search-geocomplete-results li:hover a {
  background-color: var(--muted) !important;
}
html.dark .search-geocomplete-results a {
  background-image: none !important;
  position: relative;
}
html.dark .search-geocomplete-results a::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 50%;
  width: 19px;
  height: 19px;
  transform: translateY(-50%);
  background: url("../images/pinb.png") no-repeat center / contain;
  filter: invert(1) brightness(1.25);
}

/* 2. Rendelések üres állapota & Fejléc kártya */
#vue-my-order .card {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-2xl) !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden;
}

#vue-my-order .grey-bg {
  background: color-mix(in oklch, var(--muted) 60%, transparent) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xl) !important;
  padding: 1.75rem 1.5rem !important;
}

#vue-my-order .header_icon {
  width: 52px !important;
  height: 52px !important;
  border-radius: var(--radius-xl) !important;
  background: color-mix(in oklch, var(--primary) 18%, transparent) !important;
  color: var(--primary-strong) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

#vue-my-order .header_icon a,
#vue-my-order .header_icon .rounded-button-icon {
  background: transparent !important;
  color: var(--primary-strong) !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  text-decoration: none !important;
}

#vue-my-order .header_icon i,
#vue-my-order .header_icon a i,
#vue-my-order .header_icon .zmdi {
  font-size: 1.5rem !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  transform: none !important;
}

#vue-my-order h5 {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 1.2rem !important;
  color: var(--foreground) !important;
  margin-bottom: 0.25rem !important;
}

#vue-my-order p {
  color: var(--muted-foreground) !important;
  font-size: 0.92rem !important;
}

#vue-my-order .btn-green {
  background-color: var(--primary) !important;
  color: var(--primary-foreground) !important;
  border-radius: var(--radius-full) !important;
  padding: 0.65rem 1.75rem !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  box-shadow: 0 4px 14px color-mix(in oklch, var(--primary) 35%, transparent) !important;
  transition: all 0.2s ease !important;
  border: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#vue-my-order .btn-green:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px color-mix(in oklch, var(--primary) 50%, transparent) !important;
  color: var(--primary-foreground) !important;
}

/* 3. Rendelés kártyák (ha vannak meglévő rendelések) */
#vue-my-order .kmrs-row {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xl) !important;
  padding: 1.25rem !important;
  margin-bottom: 1rem !important;
  transition: all 0.2s ease !important;
}

#vue-my-order .kmrs-row:hover {
  border-color: color-mix(in oklch, var(--primary) 40%, transparent) !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-1px);
}

#vue-my-order .kmrs-row h6 {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  color: var(--foreground) !important;
}

#vue-my-order .badge {
  padding: 0.35em 0.75em !important;
  border-radius: var(--radius-md) !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
}

/* ==========================================================================
   FIÓK / FIZETÉSI MÓDOK (#vue-my-payments) ÉS CÍMEK (#vue-my-address) SHADCN KÁRTYÁK
   ========================================================================== */

/* 1. Kártya rácsszélesség optimalizálása (ne legyenek 200px-re összenyomva) */
#vue-my-payments .row > [class*="col-"],
#vue-my-address .row > [class*="col-"] {
  flex: 0 0 50% !important;
  max-width: 50% !important;
}

@media (min-width: 1300px) {
  #vue-my-payments .row > [class*="col-"],
  #vue-my-address .row > [class*="col-"] {
    flex: 0 0 33.333333% !important;
    max-width: 33.333333% !important;
  }
}

@media (max-width: 767.98px) {
  #vue-my-payments .row > [class*="col-"],
  #vue-my-address .row > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* 2. Kártya konténer alapstílus (Payments & Addresses) */
#vue-my-payments .card.card-listing,
#vue-my-address .card.address-slot {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-2xl) !important;
  padding: 1.35rem 1.25rem !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all 0.25s ease !important;
  color: var(--card-foreground) !important;
  min-height: 160px;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  height: 100% !important;
}

#vue-my-payments .card.card-listing:hover,
#vue-my-address .card.address-slot:hover {
  border-color: color-mix(in oklch, var(--primary) 45%, transparent) !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px);
}

/* Címek és fejléc szövegek */
#vue-my-payments .card-listing h5,
#vue-my-address .address-slot h5 {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 1.08rem !important;
  color: var(--foreground) !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  line-height: 1.3 !important;
}

#vue-my-payments .card-listing p,
#vue-my-address .address-slot p,
#vue-my-address .address-slot .module p {
  color: var(--muted-foreground) !important;
  font-size: 0.9rem !important;
  line-height: 1.45 !important;
  margin: 0.45rem 0 1rem !important;
}

/* Fizetési ikonok & képek */
#vue-my-payments .card-listing .font20 {
  font-size: 1.35rem !important;
  color: var(--primary-strong) !important;
}

html.dark #vue-my-payments .card-listing img.img-35 {
  filter: invert(0.85) brightness(1.4);
}

/* Alapértelmezett pipa jelvény (Tökéletes 1:1 arányú kerek kör) */
#vue-my-payments .zmdi-check.text-success {
  color: var(--primary-foreground) !important;
  background: var(--primary) !important;
  border-radius: 50% !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  font-size: 0.8rem !important;
  flex-shrink: 0 !important;
  margin-left: 0.4rem !important;
  box-shadow: 0 2px 6px color-mix(in oklch, var(--primary) 35%, transparent) !important;
}

/* Üres lenyíló menü elrejtése */
.dropdown-menu:empty {
  display: none !important;
}

/* 3. Alsó akciósáv (Edit & Delete gombok sora) */
#vue-my-payments .card-listing .d-flex.justify-content-between,
#vue-my-address .address-slot .d-flex.justify-content-between {
  margin-top: auto !important;
  padding-top: 0.75rem !important;
  border-top: 1px solid color-mix(in oklch, var(--border) 60%, transparent) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.5rem !important;
}

/* Edit és Delete gombok alapvető Shadcn gombstílusa */
#vue-my-payments .card-listing a.btn,
#vue-my-address .address-slot a.btn {
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  padding: 0.42rem 0.95rem !important;
  border-radius: var(--radius-lg) !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.35rem !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
  opacity: 1 !important;
}

/* "Edit" gomb megjelenése (Kékes/Priamry lágy kiemelés) */
#vue-my-payments .card-listing a.btn:first-child,
#vue-my-payments .card-listing a.btn[onclick*="edit"],
#vue-my-address .address-slot a.btn:first-child,
#vue-my-address .address-slot a.btn[onclick*="ShowAddress"] {
  background: color-mix(in oklch, var(--primary) 14%, transparent) !important;
  color: var(--primary-strong) !important;
  border: 1px solid color-mix(in oklch, var(--primary) 28%, transparent) !important;
}

#vue-my-payments .card-listing a.btn:first-child:hover,
#vue-my-address .address-slot a.btn:first-child:hover {
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
  border-color: var(--primary) !important;
  box-shadow: 0 4px 12px color-mix(in oklch, var(--primary) 30%, transparent) !important;
}

/* Disabled Edit gomb (pl. Cash on delivery esetén, ahol 0 a ref id) */
#vue-my-payments .card-listing a.btn[disabled],
#vue-my-address .address-slot a.btn[disabled] {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  background: var(--muted) !important;
  color: var(--muted-foreground) !important;
  border: 1px solid var(--border) !important;
}

/* "Delete" gomb megjelenése (Pirosas Destructive stílus) */
#vue-my-payments .card-listing a.btn[onclick*="Delete"],
#vue-my-payments .card-listing a.btn:last-child,
#vue-my-address .address-slot a.btn[onclick*="Delete"],
#vue-my-address .address-slot a.btn:last-child {
  background: color-mix(in oklch, var(--destructive) 12%, transparent) !important;
  color: var(--destructive) !important;
  border: 1px solid color-mix(in oklch, var(--destructive) 25%, transparent) !important;
}

#vue-my-payments .card-listing a.btn[onclick*="Delete"]:hover,
#vue-my-payments .card-listing a.btn:last-child:hover,
#vue-my-address .address-slot a.btn[onclick*="Delete"]:hover,
#vue-my-address .address-slot a.btn:last-child:hover {
  background: var(--destructive) !important;
  color: var(--destructive-foreground) !important;
  border-color: var(--destructive) !important;
  box-shadow: 0 4px 12px color-mix(in oklch, var(--destructive) 30%, transparent) !important;
}

/* Dropdown menĂĽ elemek */
#vue-my-payments .rounded-button-icon {
  background: var(--muted) !important;
  color: var(--muted-foreground) !important;
  width: 30px !important;
  height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--radius-md) !important;
  transition: all 0.15s ease !important;
  text-decoration: none !important;
}

#vue-my-payments .rounded-button-icon:hover {
  background: var(--accent) !important;
  color: var(--foreground) !important;
}

#vue-my-payments .dropdown-menu {
  background: var(--popover) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-md) !important;
}

#vue-my-payments .dropdown-item {
  color: var(--popover-foreground) !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  padding: 0.5rem 0.9rem !important;
}

#vue-my-payments .dropdown-item:hover {
  background: var(--accent) !important;
  color: var(--accent-foreground) !important;
}

/* Profil shell: kis képernyőn stack */
@media (max-width: 991.98px) {
  body.column2-layout #main-container {
    padding-left: 0 !important;
    padding-top: 1rem;
  }
  body.column2-layout #main-container > .container-fluid {
    max-width: 100%;
    padding-left: 0.85rem;
    padding-right: 0.85rem;
  }
  .wox-account-panel {
    grid-template-columns: 1fr;
    border-radius: var(--radius-2xl);
  }
  .wox-account-aside {
    display: none !important; /* mobil: my-profile-header + component-profile-menu */
  }
  .wox-account-main {
    padding: 1.15rem 1rem 1.25rem;
  }
  .wox-account-page__title {
    font-size: 1.15rem;
    margin-bottom: 0.85rem;
  }
  body.column2-layout #top-nav {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

/* RTL: oldalsáv szélesség igazítás */
html[dir="rtl"] body.column2-layout #main-container {
  padding-left: 0;
  padding-right: 272px;
}
html[dir="rtl"] #sidebar,
html[dir="rtl"] #sidebar.wox-account-sidebar {
  border-right: 0 !important;
  border-left: 1px solid var(--border) !important;
}
html[dir="rtl"] .wox-account-aside {
  border-right: 0;
  border-left: 1px solid var(--border);
}
html[dir="rtl"] #sidebar ul.siderbar-menu li a,
html[dir="rtl"] .siderbar-menu a {
  text-indent: 0 !important;
  padding-right: 2.5rem !important;
  background-position: right 10px center !important;
}

/* --------------------------------------------------------------------------
   18. LÁBLÉC
   -------------------------------------------------------------------------- */
.sub-footer {
  background: var(--background);
  border-top: 1px solid var(--border);
  color: var(--foreground);
}
.sub-footer .footer-logo img { max-height: 40px; }
.social-list a {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--secondary);
  color: var(--secondary-foreground);
  font-size: 18px;
  transition: all 0.2s ease;
}
.social-list a:hover { background: var(--primary); color: var(--primary-foreground); }

/* lábléc menü (WidgetFooterMenu) */
.sub-footer .footer-menu a, .sub-footer ul li a { color: var(--muted-foreground); font-weight: 600; }
.sub-footer .footer-menu a:hover, .sub-footer ul li a:hover { color: var(--primary-strong); }
.sub-footer h6, .sub-footer .footer-title { font-family: var(--font-display); font-weight: 800; }

footer {
  background: var(--background);
  border-top: 1px solid var(--border);
  color: var(--muted-foreground);
}
footer a { color: var(--muted-foreground); }
footer a:hover { color: var(--primary-strong); }

/* --------------------------------------------------------------------------
   19. SÖTÉT MÓD – széles körű felülírások a régi, fix színű stílusokra
   -------------------------------------------------------------------------- */
html.dark .bg-white, html.dark .bg-light { background-color: var(--card) !important; }
html.dark .text-dark, html.dark .text-body { color: var(--foreground) !important; }
html.dark .text-black-50, html.dark .text-white-50 { color: var(--muted-foreground) !important; }

html.dark .border, html.dark .border-bottom, html.dark .border-top,
html.dark .border-left, html.dark .border-right { border-color: var(--border) !important; }

html.dark .page-content,
html.dark .container-fluid,
html.dark .container {
  color: var(--foreground);
}
/* Checkout / page-grey ne maradjon fehér dark módban sem */
html.dark .page-grey,
html.dark .page-content,
html.dark .page-content .container-fluid {
  background: var(--background) !important;
}

/* képekben lévő fekete SVG/ikonok invertálása, ahol szükséges */
html.dark .search_placeholder, html.dark .filter_placeholder { filter: invert(1); }

/* A locate (pozícióbemérő) ikon inline color:#000-t kap a bundle-ban –
   dark módban minden autocomplete mezőben világosra cseréljük */
html.dark .el-input__suffix .zmdi-my-location { color: var(--foreground) !important; }

/* jQuery typeahead / autocomplete javaslatok */
.typeahead__container .typeahead__list,
.typeahead__container .typeahead__field input {
  background: var(--card);
  color: var(--foreground);
  border-color: var(--border);
}
.typeahead__list li { border-color: var(--border); }
.typeahead__list li a { color: var(--foreground); }
.typeahead__list li:hover a, .typeahead__list li.active a { background: var(--accent); color: var(--accent-foreground); }

/* bootbox */
.bootbox .modal-content { background: var(--card); color: var(--card-foreground); }

/* magnific popup */
.mfp-bg { background: #000; opacity: 0.8; }

/* notyf értesítések */
.notyf__toast { border-radius: var(--radius-xl); }

/* nprogress sáv a márkaszínnel */
#nprogress { z-index: 2000; }
#nprogress .spinner { display: none !important; }
#nprogress .bar {
  background: #ffffff !important;
  height: 3px !important;
  top: 0 !important;
  z-index: 2000 !important;
}
#nprogress .peg {
  box-shadow: 0 0 10px #fff, 0 0 18px rgba(255, 255, 255, 0.85), 0 0 28px rgba(255, 255, 255, 0.45) !important;
}

/* --------------------------------------------------------------------------
   20. RESZPONZÍV FINOMHANGOLÁS
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .wox-hero { border-radius: var(--radius-2xl); }
  .wox-hero__content { padding: 2.5rem 1.25rem 2.75rem; }
  .wox-hero__title { font-size: 1.7rem; }
  .wox-hero__subtitle { font-size: 0.95rem; }
  .wox-header__inner { min-height: 60px; }
  body:has(.wox-header) { padding-top: var(--wox-header-h, 60px); }
  .login-container, .signup-container {
    margin-top: 1.5rem !important;
    padding: 1.75rem 1.25rem !important;
    border-radius: var(--radius-2xl);
  }
}

/* Mobil alsĂł safe-area a fix elemekhez */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .ssm-nav, .el-drawer { padding-bottom: env(safe-area-inset-bottom); }
}

/* v-cloak: Vue komponensek elrejtése betöltésig */
[v-cloak] { display: none !important; }

/* --------------------------------------------------------------------------
   21. SPECIFICITY JAVÍTÁSOK – a régi style.css id-szelektorai erősebbek,
   ezért itt id-szinten írjuk felül őket.
   -------------------------------------------------------------------------- */

/* Régi hero: 420px magasság + háttérkép kikapcsolása az új Wox hero-n */
#main-search-banner.wox-hero {
  height: auto;
  min-height: 0;
  background: var(--primary);
  background-image: none;
  border-bottom: 0;
}

/* Régi fejléc border eltüntetése (az új .wox-header kapja a keretet) */
#top-navigation { border-bottom: 0; }

/* Régi login szélesség felülírása */
.login-container, .signup-container { width: auto; }

/* Régi fix fejléc tetejéhez igazítás (a sticky header miatt nem kell offset) */
.page-content { background: var(--background); }

/* A régi mobil home bannert már nem használjuk */
.mobile-home-banner { display: none; }

/* --------------------------------------------------------------------------
   22. FINOMRÉSZLETEK
   -------------------------------------------------------------------------- */

/* A kezdőlapi autocomplete javaslatlista a hero felett */
.home-search-wrap .typeahead__container,
.wox-hero__search .typeahead__container { width: 100%; }

/* Lábléc hírlevél mező modernizálása */
.esubscription {
  width: 100%;
}
.esubscription .el-input__wrapper {
  border-radius: 999px;
  min-height: 48px;
}
.esubscription .butoon-wrap { top: 4px; right: 4px; }
.esubscription .el-button { border-radius: 999px; }
.esubscription .wox-subscribe-btn,
.esubscription .wox-subscribe-btn.el-button {
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 40px;
  border-radius: 999px !important;
  padding: 0.45rem 1.05rem !important;
  font-weight: 800 !important;
  font-size: 0.88rem !important;
  line-height: 1.2 !important;
  white-space: nowrap;
  background: var(--primary) !important;
  border-color: transparent !important;
  color: var(--primary-foreground) !important;
}
@media (min-width: 768px) {
  .esubscription .el-input__wrapper {
    padding-right: 9.5rem;
  }
}
@media (max-width: 767.98px) {
  .esubscription {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
  }
  .esubscription .butoon-wrap {
    position: static !important;
    top: auto;
    right: auto;
    width: 100%;
  }
  .esubscription .wox-subscribe-btn,
  .esubscription .wox-subscribe-btn.el-button {
    width: 100% !important;
    min-height: 46px;
    justify-content: center;
  }
  .esubscription .el-input__wrapper {
    padding-right: 15px;
  }
}

/* App store badge-ek egységes magassága (a régi style.css max-width:8em
   levágta őket – itt visszavonjuk) */
.app-store-wrap img { height: 44px; width: auto; max-width: none; }

/* Mobilapp szekció kép */
.section-mobileapp img.mobileapp { max-width: 100%; height: auto; }

/* Fix kosár/cart drawer elemek modern kerete */
.el-drawer__body { color: var(--foreground); }

/* MenĂĽ oldali "tap for hours" blokk */
.chevron-section, .chevron.center { color: var(--foreground); }

/* Szürke (lezárt) étterem szöveg */
.make-grey h6 { color: var(--muted-foreground); }

/* Kosár oldalsáv fix pozíciója a sticky fejléc alatt */
@media (min-width: 992px) {
  .sticky-cart { top: 90px; }
}

/* .action-restaurants #top-navigation felülírása (responsive.css, 1,1,0) */
#top-navigation.wox-header__inner { border-bottom: 0; }

/* --------------------------------------------------------------------------
   23. RÉGI "MENTA" (#3ecf8e) SZÍN TISZTÍTÁSA → Wox lime tokenek
   -------------------------------------------------------------------------- */
a:hover,
.text-green,
ul.top-menu a:hover,
.list-inline a:hover,
.menu-category a:hover,
.siderbar-menu li.active a,
#menu-category .col a.active,
.btn.normal:hover,
.menu-carousel a.active,
.menu-carousel a:hover {
  color: var(--primary-strong) !important;
}

/* Szürke szekciók → token */
.change-address-wrap, .grey-section { background: var(--muted); }

/* Delivery/Pickup választó → Wox "segmented pill" */
.wrap-radio-selection {
  background-color: var(--muted);
  border-radius: 999px;
  padding: 4px;
  display: inline-flex;
  gap: 2px;
}
.wrap-radio-selection span.el-radio-button__inner {
  background-color: transparent;
  color: var(--muted-foreground);
  border: none;
  border-radius: 999px !important;
  font-weight: 700;
  box-shadow: none;
}
.wrap-radio-selection .el-radio-button__original-radio:checked + .el-radio-button__inner {
  background-color: var(--card);
  border-color: transparent;
  box-shadow: var(--shadow-sm);
  color: var(--foreground);
  border-radius: 999px;
}
.wrap-radio-selection .el-radio-button:first-child .el-radio-button__inner,
.wrap-radio-selection .el-radio-button:last-child .el-radio-button__inner {
  border-radius: 999px !important;
}

/* Kijelölt dobozok (pl. fizetési módok, csomagok) */
.bordered-box { border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--card); }
.bordered-box.selected { border: 2px solid var(--primary); }
.bordered-box.selected .text-xs { color: var(--primary-strong); }

/* Csomag (pricing) dobozok */
.pricing-plans .plans { border: 2px solid var(--primary); border-radius: var(--radius-2xl); background: var(--card); }
.pricing-plans .icon { background-color: var(--primary); color: var(--primary-foreground); }

/* CsĂşszka (range) gomb */
.custom-range::-webkit-slider-thumb { background-color: var(--primary); }
.custom-range::-moz-range-thumb { background-color: var(--primary); }

/* Feltöltés doboz hover */
.avatar-uploader .el-upload {
  border-color: var(--border) !important;
  background: var(--muted);
  border-radius: 50% !important;
  width: 88px;
  height: 88px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.avatar-uploader .el-upload:hover { border-color: var(--primary) !important; }
.avatar-uploader .avatar {
  max-width: 88px !important;
  max-height: 88px !important;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
}
.el-icon.avatar-uploader-icon {
  color: var(--muted-foreground) !important;
  width: 88px !important;
  height: 88px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   24. STORIES SOR (demo) – Wox DesktopStories stílus
   144×256 px függőleges kártyák, borítókép + sötét gradient, avatar gyűrű
   bal felül, félkövér fehér felirat bal alul. Görgetés: overflow-x,
   nyilak a wox-theme.js kezeli (delegált kattintás).
   -------------------------------------------------------------------------- */
.wox-stories-wrap { margin-top: 1.5rem; }
/* A feed/restaurants oldalon a stories a column-2 tetején van – ott a
   margin-top felesleges (a fejléc már eleve távolságot ad). */
.column-2 > .wox-stories-wrap:first-child { margin-top: 0; margin-bottom: 1.25rem; }
.wox-stories { position: relative; }

/* --------------------------------------------------------------------------
   WOX FEED TOP – asztali 2-zónás elrendezés (sztoriok bal | banner jobb)
   A feed.php column-2 tetején: a stories partial + a components-banner egy
   közös .wox-feed-top grid-be kerül. Mobilon a két cella egymás alá rakódik.
   -------------------------------------------------------------------------- */
.wox-feed-top {
  display: grid;
  grid-template-columns: 1fr;        /* mobil: egy oszlop (stories, majd banner) */
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
@media (min-width: 992px) {
  .wox-feed-top {
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.8fr);
    gap: 1.5rem;
    align-items: start;
  }
}
.wox-feed-top__cell { min-width: 0; }  /* grid overflow-védelem (flex children) */

/* A stories wrap a feed-top cellában: a cella gap adja a távolságot, külön
   margin nem kell. */
.wox-feed-top__stories .wox-stories-wrap { margin: 0; }

.wox-stories-header {
  display: none;
  margin-bottom: 0.85rem;
}
.wox-stories-header .wox-page-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.9rem;
  letter-spacing: -0.03em;
  color: var(--foreground);
}

/* Asztalon a story kártyák egy picit keskenyebbek a feed-top kontextusban,
   hogy ~4 db kényelmesen látszódjon a bal cellában (ha több van, a nav
   gombokkal lapozható). A default 144×256px marad a főoldalon. */
@media (min-width: 992px) {
  .wox-stories-header { display: block; }
  .wox-feed-top__stories .wox-story { flex-basis: 124px; width: 124px; height: 220px; }
  .wox-feed-top__banner { margin-top: 3.25rem; }
}

/* A banner cella a feed-top-ban: szűkebb padding, hogy egy slide jól látszódjon
   a keskeny jobb oszlopban. A swiperBanner autoHeight miatt a magasság adaptív. */
.wox-feed-top__banner .wox-banner-card { padding: 0.6rem; }
.wox-stories__row {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding: 4px 2px 10px;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.wox-stories__row::-webkit-scrollbar { display: none; }

.wox-story {
  position: relative;
  flex: 0 0 144px;
  width: 144px;
  height: 256px;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.wox-story:hover {
  transform: scale(1.03);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}
.wox-story__cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.wox-story:hover .wox-story__cover { transform: scale(1.05); }

/* Promóciós sztori cover (Crown = prémium, Percent = akciók): gradiens háttér
   + nagy középső ikon (kép helyett). A Wox desktop-stories.tsx mintájára. */
.wox-story__cover--crown,
.wox-story__cover--percent {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
}
.wox-story__cover--crown {
  background: linear-gradient(to bottom right, #262626, #422006 55%, #0a0a0a);
}
.wox-story__cover--crown i {
  color: rgb(251 191 36 / 0.85);
  font-size: 2.6rem;
  filter: drop-shadow(0 0 12px rgb(251 191 36 / 0.4));
  animation: wox-story-icon-pulse 2s ease-in-out infinite;
}
.wox-story__cover--percent {
  background: linear-gradient(to bottom right, #047857, #115e59 55%, #0f172a);
}
.wox-story__cover--percent i {
  color: rgb(110 231 183 / 0.9);
  font-size: 2.6rem;
  filter: drop-shadow(0 0 12px rgb(52 211 153 / 0.4));
  animation: wox-story-icon-pulse 2s ease-in-out infinite;
}
@keyframes wox-story-icon-pulse {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}
.wox-story__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / 0.85), rgb(0 0 0 / 0.3) 55%, rgb(0 0 0 / 0.1));
}
.wox-story__avatar {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  padding: 2px;
  background: color-mix(in oklch, var(--background) 80%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 0 0 2px var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.wox-story__avatar--admin {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  box-shadow: 0 0 0 2px #fbbf24, 0 2px 6px rgba(0,0,0,0.3);
}
.wox-story__avatar--admin i {
  font-size: 14px;
  line-height: 1;
  color: #ffffff !important;
}
.wox-story__avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.wox-story__label {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  margin: 0;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.6);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Görgető nyilak – a Wox carousel gombjai (kör, kártya-háttér, border).
   AlapbĂłl rejtve; csak akkor jelennek meg, ha a JS .wox-stories--has-overflow
   osztályt adja a .wox-stories konténerre (tehát van mit görgeteni). */
.wox-stories__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--foreground);
  box-shadow: var(--shadow-lg);
  display: none;               /* JS vezérli: csak has-overflow-kor látszik */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.wox-stories--has-overflow .wox-stories__nav { display: inline-flex; }
.wox-stories:hover .wox-stories__nav { opacity: 1; }
.wox-stories__nav:hover { background: var(--accent); color: var(--accent-foreground); }
.wox-stories__nav--prev { left: -14px; }
.wox-stories__nav--next { right: -14px; }

/* Asztalon a lapozógombok mindig látszanak (nem csak hoverre), ha van overflow. */
@media (min-width: 992px) {
  .wox-stories--has-overflow .wox-stories__nav { opacity: 0.92; }
  .wox-stories--has-overflow .wox-stories__nav--prev { left: -20px; }
  .wox-stories--has-overflow .wox-stories__nav--next { right: -20px; }
}

/* Mobilon a nyilak helyett natív swipe, ÉS a kártyák kerek/insta-stílusúra
   váltanak: kerek cover (gradient ringgel, mint az Instagram) + címke alatta.
   A .wox-story egyetlen oszlopos flex konténer lesz (kör felül, szöveg lent),
   a külön .wox-story__avatar és a sötét .wox-story__overlay mobilon eltűnik. */
@media (max-width: 991.98px) {
  .wox-stories__row { gap: 0.85rem; padding-top: 6px; }

  .wox-story {
    /* oszlop: kör felül, címke lent – fix szélesség, magasság auto */
    flex: 0 0 76px;
    width: 76px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .wox-story:hover { transform: none; box-shadow: none; }

  /* A cover válik a kerek avatarrá – gradient ringgel körbevéve */
  .wox-story__cover {
    position: relative;
    inset: auto;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    padding: 2px;
    background: linear-gradient(135deg, var(--primary), color-mix(in oklch, var(--primary) 50%, var(--primary-strong)));
    border: 0;
    transition: transform 0.2s ease;
  }
  .wox-story:hover .wox-story__cover { transform: scale(1.05); }

  /* A kĂĽlön avatar Ă©s a sötĂ©t overlay mobilon nem kell – DE az admin
     sztorik ikonja (korona, %, stb.) a kör közepén mobilon is låtszik */
  .wox-story__avatar,
  .wox-story__overlay { display: none; }
  .wox-story__avatar--admin {
    display: flex;
    position: absolute;
    top: 32px;            /* a 64px-es kör középpontja */
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    padding: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }
  .wox-story__avatar--admin i {
    font-size: 1.5rem;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  }

  /* A címke kilép a fedőrétegből: kompakt, középre zárt, sötét szöveg */
  .wox-story__label {
    position: static;
    color: var(--foreground);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    text-shadow: none;
    text-align: center;
    -webkit-line-clamp: 1;       /* mobilon egy sor – ha hosszú, csonkolódik */
    white-space: nowrap;
    max-width: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* --------------------------------------------------------------------------
   24b. STORY VIEWER (felugró teljes képernyős story nézegető)
        + LOGĂ“ RING az Ă©ttermi menĂĽ oldalon.
        A wox-story-viewer.js építi/vezérli a DOM-ot; itt csak a stílus van.
   -------------------------------------------------------------------------- */

/* Body scroll-lock, amíg a viewer nyitva van (osztályt a JS adja) */
body.wox-story-viewer-open { overflow: hidden; }

/* Overlay: full-screen sötét háttér, középen a kártya */
.wox-story-viewer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgb(0 0 0 / 0.88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  user-select: none;
}
.wox-story-viewer--open { display: flex; }

/* Mobilon teljes képernyő */
.wox-story-viewer__card {
  position: relative;
  width: 100%;
  height: 100%;
  background: #0a0a0a;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Asztalon és tableten: pontos 9:16 képarányú, prémium lekerekített kártya */
@media (min-width: 576px) {
  .wox-story-viewer {
    padding: 1.5rem;
  }
  .wox-story-viewer__card {
    width: min(440px, calc(92vh * 9 / 16));
    height: min(782px, 92vh);
    aspect-ratio: 9 / 16;
    max-height: 92vh;
    border-radius: 28px;
    border: 1px solid rgb(255 255 255 / 0.15);
    box-shadow: 0 30px 80px -15px rgb(0 0 0 / 0.9), 0 0 0 1px rgb(255 255 255 / 0.1);
  }
}

/* Progress barok (slide-onként egy szegmens) */
.wox-story-viewer__progress {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 6;
  display: flex;
  gap: 6px;
}
.wox-story-viewer__seg {
  flex: 1;
  height: 3px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.3);
  overflow: hidden;
}
/* Progress fill: transform scaleX (GPU) + CSS keyframes — sima, nem
   setInterval-es lépcsőzetes töltés. A --active animál 0→1-ig;
   --done = kész szegmens; --paused = nyomvatartás miatti szünet. */
.wox-story-viewer__seg-fill {
  height: 100%;
  width: 100%;
  background: #fff;
  transform-origin: left center;
  transform: scaleX(0);
  will-change: transform;
}
.wox-story-viewer__seg-fill--done {
  transform: scaleX(1);
}
.wox-story-viewer__seg-fill--active {
  animation: wox-story-progress var(--wox-story-duration, 5s) linear forwards;
}
.wox-story-viewer__seg-fill--active.wox-story-viewer__seg-fill--paused {
  animation-play-state: paused;
}
@keyframes wox-story-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Fejléc: avatar + label + close */
.wox-story-viewer__head {
  position: absolute;
  top: 26px;
  left: 12px;
  right: 12px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
}
.wox-story-viewer__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(0 0 0 / 0.4);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 2px;
  box-shadow: 0 0 0 2px var(--primary);
  flex: 0 0 auto;
}
.wox-story-viewer__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.wox-story-viewer__avatar i { color: var(--primary-strong); font-size: 1rem; }
.wox-story-viewer__label {
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.9rem;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.6);
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wox-story-viewer__close {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0;
  background: rgb(0 0 0 / 0.2);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background 0.2s ease;
}
.wox-story-viewer__close:hover { background: rgb(255 255 255 / 0.1); }

/* Slide háttér: kép VAGY promo gradiens + ikon */
.wox-story-viewer__slide {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom, #1a1a1a, #0a0a0a);
}
.wox-story-viewer__slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wox-story-viewer__slide i {
  font-size: 6rem;
  color: rgb(255 255 255 / 0.18);
  filter: drop-shadow(0 0 24px rgb(0 0 0 / 0.4));
}
/* Promo gradiensek (Wox Crown = prémium amber, Percent = akciók emerald) */
.wox-story-viewer__slide--crown {
  background: linear-gradient(to bottom right, #262626, #422006 55%, #0a0a0a);
}
.wox-story-viewer__slide--crown i { color: rgb(251 191 36 / 0.35); }
.wox-story-viewer__slide--percent {
  background: linear-gradient(to bottom right, #047857, #115e59 55%, #0f172a);
}
.wox-story-viewer__slide--percent i { color: rgb(52 211 153 / 0.4); }

/* Tap zoneok: bal/jobb harmad (kattintásos navigáció) */
.wox-story-viewer__tap {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 33.333%;
  z-index: 4;
  cursor: pointer;
}
.wox-story-viewer__tap--left { left: 0; cursor: w-resize; }
.wox-story-viewer__tap--right { right: 0; cursor: e-resize; }

/* Alsó tartalom: cím, leírás, CTA (gradiens háttér az olvashatóságért) */
.wox-story-viewer__footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  padding: 4rem 1.25rem 1.5rem;
  background: linear-gradient(to top, rgb(0 0 0 / 0.95), rgb(0 0 0 / 0.4) 60%, transparent);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.wox-story-viewer__title {
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.2;
  text-shadow: 0 2px 6px rgb(0 0 0 / 0.7);
}
.wox-story-viewer__desc {
  margin: 0;
  color: rgb(255 255 255 / 0.9);
  font-size: 0.92rem;
  font-weight: 500;
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.6);
}
.wox-story-viewer__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.5rem;
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius-xl);
  background: var(--primary);
  color: var(--primary-foreground) !important;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  text-decoration: none !important;
  box-shadow: 0 8px 20px rgb(0 0 0 / 0.3);
  transition: transform 0.18s ease, filter 0.2s ease;
  cursor: pointer;
}
.wox-story-viewer__cta:hover,
.wox-story-viewer__cta:focus,
.wox-story-viewer__cta:visited,
.wox-story-viewer__cta:active {
  color: var(--primary-foreground) !important;
  text-decoration: none !important;
}
.wox-story-viewer__cta:hover {
  transform: scale(1.02);
  filter: brightness(1.04);
}

/* --------------------------------------------------------------------------
   LOGÓ RING & SZTORI BADGE – az éttermi menü oldal logója körül (merchant-top-header.php).
   Lüktető neon gradiens gyűrű + lebegő "🔥 Sztori" jelvény.
   -------------------------------------------------------------------------- */
@keyframes woxStoryRingSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes woxStoryBadgePulse {
  0% { transform: scale(1); box-shadow: 0 3px 8px rgba(255, 107, 0, 0.4); }
  50% { transform: scale(1.05); box-shadow: 0 5px 14px rgba(255, 107, 0, 0.65); }
  100% { transform: scale(1); box-shadow: 0 3px 8px rgba(255, 107, 0, 0.4); }
}

.wox-story-ring {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(45deg, #ff007a, #ff5400, #ffbd00, #9b5de5);
  background-size: 200% 200%;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
  box-shadow: 0 0 18px rgba(255, 84, 0, 0.45);
}

.wox-story-ring:hover {
  transform: scale(1.04);
  box-shadow: 0 0 28px rgba(255, 84, 0, 0.7);
}

.wox-story-ring:active {
  transform: scale(0.97);
}

.wox-story-ring img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--background, #0d0d0f);
  background: var(--card, #1c1c1f);
}

/* Lebegő Sztori Jelvény a logó alján - pontosan a kör alsó ívén, kompakt és biztonságos távolság */
.wox-story-badge {
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #ff5400, #ff007a);
  color: #ffffff !important;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 1.5px 6.5px 2px 5px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border: 2px solid var(--background, #0d0d0f);
  box-shadow: 0 3px 10px rgba(255, 84, 0, 0.45);
  animation: woxStoryBadgePulse 2.2s infinite ease-in-out;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
  max-width: 95%;
  box-sizing: border-box;
}

.wox-story-badge__dot {
  width: 4px;
  height: 4px;
  background-color: #ffffff;
  border-radius: 50%;
  display: inline-block;
}

.wox-merchant-info__logo,
.wox-merchant-info__logo > img {
  border-radius: 50% !important;
  overflow: visible;
  position: relative;
}

.wox-merchant-info__logo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 3px solid var(--border);
}

.wox-merchant-info__logo:has(.wox-story-ring) {
  overflow: visible;
  margin-right: 0.85rem; /* Biztonságos távolság, hogy semmilyen képernyőn ne érjen hozzá az étterem nevéhez */
}

.wox-merchant-info__logo .wox-story-ring {
  width: 100%;
  height: 100%;
  display: flex;
  padding: 4px;
  overflow: visible;
  border-radius: 50%;
  z-index: 6;
}

/* --------------------------------------------------------------------------
   25. JOIN SZEKCIÓ + MOBILAPP + KISEBB DARK FINOMHANGOLÁS
   -------------------------------------------------------------------------- */

/* Join kártyák → Wox dark kártya (a régi style.css #ebebeb kerete helyett) */
.join-sections .swiperSlide {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.join-sections img {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.join-sections .content {
  border: 0;
  background: var(--card);
  padding: 1rem 1rem 1.25rem;
  border-bottom-left-radius: var(--radius-2xl);
  border-bottom-right-radius: var(--radius-2xl);
}
.join-sections .content h5 {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--foreground);
}
.join-sections .content p {
  color: var(--muted-foreground);
  font-size: 0.88rem;
  min-height: 3.2em;
}
/* A "Signup now" gomb dark módban is természetes: secondary pill */
.join-sections .content .el-button.el-button--success.is-plain,
.join-sections .content .el-button.el-button--success.is-plain:focus {
  background: var(--secondary);
  color: var(--secondary-foreground);
  border-color: var(--border);
  font-weight: 800;
}
.join-sections .content .el-button.el-button--success.is-plain:hover {
  background: var(--accent);
  color: var(--accent-foreground);
  border-color: var(--muted-foreground);
}

/* "Join <site>" cím pink színe sötét módban semleges */
html.dark .warm-pink { color: var(--foreground) !important; }

/* Mobilapp szekció: finom keret dark módban, hogy ne olvadjon szét */
html.dark .section-mobileapp { border: 1px solid var(--border); }

/* --------------------------------------------------------------------------
   26. MOBILAPP SZEKCIÓ – "C" változat: lebegő telefon + pill store-badge-ek
   -------------------------------------------------------------------------- */
.wox-appsection-wrap {
  margin-top: 6rem !important;    /* a kilógó telefon tetejének hely */
  margin-bottom: 4.5rem !important; /* a kilógó telefon aljának hely */
}
.wox-appsection {
  padding: 3rem 3.5rem;
  overflow: visible;
}
.wox-appsection__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 2rem;
  align-items: center;
}

/* Szövegblokk */
.wox-appsection__eyebrow {
  color: var(--muted-foreground);
  font-weight: 700;
  font-size: 1rem;
  margin: 0 0 0.35rem;
}
.wox-appsection__eyebrow--download { margin-top: 2.25rem; }
.wox-appsection__title {
  font-weight: 800;
  font-size: 2.2rem;
  margin: 0 0 0.75rem;
}
.wox-appsection__text {
  color: var(--muted-foreground);
  max-width: 430px;
  margin: 0;
}
.wox-appsection__subtitle {
  font-weight: 800;
  font-size: 1.6rem;
  margin: 0 0 0.75rem;
}

/* Pill store-badge-ek – fekete gombkeret, szerkezetileg nem vágható le */
.wox-appsection__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.wox-store-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #0d0d0d;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: 999px;
  padding: 9px 18px;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}
.wox-store-badge:hover {
  transform: scale(1.06);
  box-shadow: var(--shadow-lg);
}
.wox-store-badge img {
  height: 24px;
  width: auto;
  max-width: none;
  display: block;
}

/* Lebegő telefon – kilóg a kártya teteje és alja fölé */
.wox-appsection__media {
  display: flex;
  justify-content: center;
}
.wox-appsection__phone {
  margin: -6.5rem 0 -3.75rem;
  max-height: 470px;
  width: auto;
  max-width: 100%;
  filter: drop-shadow(0 26px 42px rgb(0 0 0 / 0.38));
  transition: transform 0.3s ease;
}
.wox-appsection__media:hover .wox-appsection__phone {
  transform: translateY(-8px) scale(1.02);
}

/* Keskenyebb desktop töréspont finomhangolás */
@media (max-width: 1100px) {
  .wox-appsection { padding: 2.5rem 2rem; }
  .wox-appsection__phone { max-height: 400px; margin: -5rem 0 -3rem; }
  .wox-appsection__title { font-size: 1.8rem; }
}

/* --------------------------------------------------------------------------
   27. CÍMVÁLASZTÓ TÉRKÉP MODAL (components-select-address)
   Lebegő fekete pill Submit + felfelé elhalványuló "köd" a térkép alján,
   hogy a gomb bármilyen térkép-háttér felett elkülönüljön.
   -------------------------------------------------------------------------- */

/* Köd-réteg: a lebegő gomb konténere kapja a gradientet.
   pointer-events: none → a köd ÁTENGEDI a térképkattintást, csak a gomb fogja. */
.el-dialog .position-relative > .w-100.position-absolute {
  bottom: 0 !important; /* inline bottom:20px felülírása – a köd a térkép aljáig ér */
  padding: 70px 16px 20px;
  background: linear-gradient(to top, rgb(10 10 10 / 0.88) 0%, rgb(10 10 10 / 0.45) 55%, transparent 100%);
  border-bottom-left-radius: var(--radius-xl);
  border-bottom-right-radius: var(--radius-xl);
  pointer-events: none;
}
.el-dialog .position-relative > .w-100.position-absolute .btn { pointer-events: auto; }

/* A gomb sávja: mobilon is jó szélesség */
.el-dialog .position-relative > .w-100.position-absolute > .w-50 {
  width: min(360px, 85%) !important;
}

/* A Submit gomb: mélyfekete pill, világos szöveg, erős árnyék + pop hover */
.el-dialog .position-relative > .w-100.position-absolute .btn-green,
.el-dialog .position-relative > .w-100.position-absolute .btn-green:focus {
  background: #0d0d0d !important;
  color: #ffffff !important;
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: 999px;
  min-height: 50px;
  font-weight: 800;
  letter-spacing: 0.01em;
  box-shadow: 0 14px 30px rgb(0 0 0 / 0.5);
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}
.el-dialog .position-relative > .w-100.position-absolute .btn-green:hover {
  background: #0d0d0d !important;
  color: #ffffff !important;
  filter: none;
  transform: scale(1.06);
  box-shadow: 0 18px 36px rgb(0 0 0 / 0.55);
}
.el-dialog .position-relative > .w-100.position-absolute .btn-green:active {
  transform: scale(0.96);
}

/* A térkép sarkai illeszkedjenek a kártyához */
.el-dialog .map-lg-large {
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  overflow: hidden;
}


/* ==================================================================
   28. FEED OLDAL (/restaurants) - A valtozat:
   oldalfejlec + sticky shadcn szuropanel + checkbox/radio stilus +
   banner/futar/join szekciok rendezese
   ================================================================== */

/* oldalfejlec */
.wox-page-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.9rem;
  letter-spacing: -0.03em;
  margin: 0 0 0.25rem;
  color: var(--foreground);
}
.wox-page-subtitle {
  color: var(--muted-foreground);
  font-size: 0.92rem;
  margin: 0;
}
.wox-page-subtitle .clear-all-link {
  margin-left: 1rem;
}

/* szuropanel kartya */
#vue-feed .section-filter {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-sm);
  padding: 0.5rem 1.25rem 1rem;
  position: sticky;
  top: 92px;
}
html.dark #vue-feed .section-filter { box-shadow: none; }
#vue-feed .section-filter .filter-row {
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
  padding: 1.1rem 0;
}
#vue-feed .section-filter .filter-row:last-child {
  border-bottom: 0;
  padding-bottom: 0.25rem;
}

/* accordion fejlecek */
#vue-feed .section-filter .filter-row h5 { margin: 0; }
#vue-feed .section-filter .filter-row h5 a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
  color: var(--foreground) !important;
  text-decoration: none !important;
}
#vue-feed .section-filter .filter-row h5 a::after {
  content: "2f9";
  font-family: "Material-Design-Iconic-Font";
  font-size: 1.15rem;
  color: var(--muted-foreground);
  transition: transform 0.25s ease;
}
#vue-feed .section-filter .filter-row h5 a:not(.collapsed)::after { transform: rotate(180deg); }
#vue-feed .section-filter .filter-row h5 a .zmdi { display: none; }

/* checkbox + radio - shadcn stilus */
#vue-feed .section-filter .custom-control { padding-left: 1.7rem; }
#vue-feed .section-filter .custom-control-label {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--foreground);
  cursor: pointer;
  padding-top: 1px;
}
#vue-feed .section-filter .custom-control-label::before {
  width: 18px;
  height: 18px;
  top: 0.15rem;
  left: -1.7rem;
  background: var(--background);
  border: 1.5px solid var(--muted-foreground);
  border-radius: 6px;
  transition: all 0.15s ease;
}
#vue-feed .section-filter .custom-radio .custom-control-label::before { border-radius: 50%; }
#vue-feed .section-filter .custom-control-input:checked ~ .custom-control-label::before {
  background: var(--primary);
  border-color: var(--primary);
}
#vue-feed .section-filter .custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 30%, transparent);
}
#vue-feed .section-filter .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
  background-image: none;
  content: "Âą3";
  color: var(--primary-foreground);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
  width: 18px;
  height: 18px;
  top: 0.15rem;
  left: -1.7rem;
}
#vue-feed .section-filter .custom-radio .custom-control-label::after {
  width: 18px;
  height: 18px;
  top: 0.15rem;
  left: -1.7rem;
}
#vue-feed .section-filter .custom-radio .custom-control-input:checked ~ .custom-control-label::after {
  background-image: none;
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  margin: 5px;
  border-radius: 50%;
  background: var(--primary-foreground);
}

/* price range - segmented pill */
#vue-feed .section-filter .btn-group-toggle {
  display: flex;
  width: 100%;
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
}
#vue-feed .section-filter .btn-group-toggle .btn {
  flex: 1 1 0;
  background: transparent;
  border: 0;
  color: var(--muted-foreground);
  font-weight: 700;
  font-size: 0.88rem;
  border-radius: 999px;
  padding: 0.45rem 0.25rem;
  transition: all 0.15s ease;
}
#vue-feed .section-filter .btn-group-toggle .btn.active {
  background: var(--card);
  color: var(--foreground);
  box-shadow: var(--shadow-sm);
}
html.dark #vue-feed .section-filter .btn-group-toggle .btn.active { background: var(--secondary); }

/* tavolsag slider */
#vue-feed .section-filter .custom-range { height: 22px; }
#vue-feed .section-filter .custom-range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: var(--muted);
}
#vue-feed .section-filter .custom-range::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  margin-top: -7px;
  background: var(--primary);
  border: 2px solid var(--card);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  -webkit-appearance: none;
}
#vue-feed .section-filter .custom-range::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: var(--muted);
}
#vue-feed .section-filter .custom-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: var(--primary);
  border: 2px solid var(--card);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
}

/* kedvenc sziv - uveg stilus */
#vue-feed .fav-floating { right: 10px; top: 10px; }
#vue-feed .fav-floating a.btn {
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in oklch, var(--background) 90%, transparent) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--foreground) !important;
  box-shadow: var(--shadow-sm);
}
#vue-feed .fav-floating a.btn .zmdi { font-size: 17px; }

/* bannerslider lekerekites */
.swiperBanner .el-image,
.swiperBanner img {
  border-radius: var(--radius-2xl);
  overflow: hidden;
}

/* ============ 33. BANNER KARTYA (A opcio: keret + nyilak + lathato pottyok) ============ */
.wox-banner-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-3xl);
  padding: 1rem;
  box-shadow: var(--shadow-sm);
}
.wox-banner-card .swiperBanner { position: relative; }
.wox-banner-card .swiperBanner .el-image,
.wox-banner-card .swiperBanner img {
  border-radius: var(--radius-xl);
}

/* bal/jobb navigacios gombok - sotet, blur-os, hoverre pop */
.wox-banner-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) scale(1);
  z-index: 10;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in oklch, var(--background) 72%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  color: var(--foreground);
  cursor: pointer;
  padding: 0;
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.wox-banner-nav:hover {
  transform: translateY(-50%) scale(1.12);
  background: var(--background);
  box-shadow: var(--shadow-md);
}
.wox-banner-nav--prev { left: 12px; }
.wox-banner-nav--next { right: 12px; }
.wox-banner-nav .zmdi { font-size: 24px; line-height: 1; }
.wox-banner-nav.swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* paginacios pottyok - a kepek ALATT, a kartyan belul, jol lathatoan */
#vue-feed .wox-banner-pagination {
  position: static !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center;
  gap: 6px;
  margin-top: 0.9rem;
  min-height: 10px;
  transform: none !important;
  left: auto !important;
  right: auto !important;
  width: 100%;
}
#vue-feed .wox-banner-pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  margin: 0 !important;
  border-radius: 999px;
  background: var(--muted-foreground);
  opacity: 0.4;
  transform: none !important;
  transition: width 0.2s ease, opacity 0.2s ease, background 0.2s ease;
}
#vue-feed .wox-banner-pagination .swiper-pagination-bullet-active {
  width: 22px;
  background: var(--foreground);
  opacity: 1;
}

/* betoltes / nincs banner: a kartya osszeomlik (szelesseg megmarad a Swiper-mereshez) */
.wox-banner-card--ghost {
  height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
  overflow: hidden;
  margin-bottom: 0;
}

/* mobil swipe biztositek: fuggoleges scroll maradjon, vizszintes huzas a Swiper-e */
.wox-banner-card .swiperBanner { touch-action: pan-y; }
.wox-banner-card .swiperBanner img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

/* futar (fast delivery) szekcio – uj, dizajnos kartyadesign:
   balra rider puha fenycsabban, kozepen cimke+cim+alcim, jobbra ido-badge,
   hatterben nagy, alig lathato bicikli-watermark */
.section-fast-delivery {
  position: relative;
  align-items: center;
  gap: 1.75rem;
  background: linear-gradient(115deg, color-mix(in oklch, var(--primary) 10%, var(--card)) 0%, var(--card) 60%);
  border: 1px solid var(--border);
  border-radius: var(--radius-3xl);
  padding: 1.5rem 2.25rem;
  margin-top: 2.5rem;
  overflow: hidden;
}
.section-fast-delivery .fd-visual {
  position: relative;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-2xl, 18px);
  background: color-mix(in oklch, var(--primary) 16%, var(--card));
  border: 1px solid color-mix(in oklch, var(--primary) 32%, transparent);
  box-shadow: 0 0 24px -4px color-mix(in oklch, var(--primary) 25%, transparent);
}
.section-fast-delivery .fd-visual .fd-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-strong);
  font-size: 2rem;
}
.section-fast-delivery .fd-text { flex: 1; min-width: 0; }
.section-fast-delivery .fd-label {
  display: inline-block;
  color: var(--primary-strong);
  font-weight: 800;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 0.25rem;
}
.section-fast-delivery .fd-address {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.75rem;
  letter-spacing: -0.03em;
  color: var(--foreground);
  margin: 0 0 0.25rem;
}
.section-fast-delivery .fd-sub {
  color: var(--muted-foreground);
  margin: 0;
  font-size: 0.95rem;
}
.section-fast-delivery .fd-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--secondary);
  border: 1px solid var(--border);
  color: var(--foreground);
  font-weight: 800;
  font-size: 0.95rem;
  padding: 0.65rem 1.25rem;
  border-radius: 999px;
}
.section-fast-delivery .fd-badge .zmdi { color: var(--primary-strong); font-size: 1.15rem; }
.section-fast-delivery .fd-watermark {
  position: absolute;
  right: 20%;
  top: 50%;
  transform: translateY(-50%) rotate(-10deg);
  font-size: 8rem;
  color: var(--foreground);
  opacity: 0.03;
  pointer-events: none;
}

/* mobil valtozat: egymas alatt, kozepre igazitva */
.section-fast-delivery-mobile {
  position: relative;
  background: linear-gradient(160deg, color-mix(in oklch, var(--primary) 10%, var(--card)) 0%, var(--card) 60%);
  border: 1px solid var(--border);
  border-radius: var(--radius-3xl);
  padding: 1.75rem 1.25rem;
  margin-top: 2rem;
  text-align: center;
  overflow: hidden;
}
.section-fast-delivery-mobile .fd-visual {
  width: 56px;
  height: 56px;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xl);
  background: color-mix(in oklch, var(--primary) 16%, var(--card));
  border: 1px solid color-mix(in oklch, var(--primary) 32%, transparent);
}
.section-fast-delivery-mobile .fd-visual .fd-icon-box {
  color: var(--primary-strong);
  font-size: 1.75rem;
}
.section-fast-delivery-mobile .fd-label {
  display: inline-block;
  color: var(--primary-strong);
  font-weight: 800;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 0.3rem;
}
.section-fast-delivery-mobile .fd-address {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.03em;
  color: var(--foreground);
  margin: 0 0 0.35rem;
}
.section-fast-delivery-mobile .fd-sub { color: var(--muted-foreground); font-size: 0.9rem; margin: 0 0 1rem; }
.section-fast-delivery-mobile .fd-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--secondary);
  border: 1px solid var(--border);
  color: var(--foreground);
  font-weight: 800;
  font-size: 0.92rem;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
}
.section-fast-delivery-mobile .fd-badge .zmdi { color: var(--primary-strong); }

/* a best seller szekcio es a lablec kozotti leallas */
.swiperOutsideContainer { margin-bottom: 2.5rem; }

/* join-us (ajanlat kuldese) – öröklött alap a merchant-signup.php változathoz
   (section-join-us2). A store partialban a .wox-join osztály erre épül. */
.section-join-us {
  border-radius: var(--radius-3xl);
  overflow: hidden;
  margin: 2.5rem auto;
  max-width: 1140px;
  position: relative;
}
.section-join-us::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 0.45);
}
.section-join-us .d-flex { position: relative; z-index: 1; }
.section-join-us h2 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
}
.section-join-us .btn-white-parent.non-trasparent {
  background: #0d0d0d;
  color: #fff;
  border-radius: 999px;
  padding-left: 1.6rem;
  padding-right: 1.6rem;
  border: 0;
}
.section-join-us .btn-white-parent.non-trasparent:hover { background: #262626; }
.section-join-us .btn-link { color: #fff !important; }

/* --------------------------------------------------------------------------
   JOIN-US – "Split hero kártya" (2 oszlopos CTA a wox-hero mintájára)
   Megjelenik a store partialjában (feed/restaurants, cuisine, menu, page…).
   A régi .section-join-us (fix 390px magasság + háttérkép + sötét overlay)
   öröklött szabályait (style.css + responsive.css + a fenti blokk) itt,
   magasabb specificitással (.section-join-us.wox-join = 0,0,2,0) felülírjuk
   egy token-alapú layouttal. A .wox-join osztály a view gyökerén van.
   -------------------------------------------------------------------------- */
.section-join-us.wox-join {
  height: auto;                       /* style.css 390px + responsive.css felülírása */
  background: var(--secondary);       /* style.css url(new-restaurant.png) helyett */
  border: 1px solid var(--border);
  border-radius: var(--radius-3xl) !important;
  overflow: hidden;
  margin: 1.5rem auto 2.5rem;
  max-width: 100%;
  position: relative;
  color: var(--foreground);
}
.full-width .section-join-us.wox-join {
  border-radius: var(--radius-3xl) !important;
}
body.action-menu .section-join-us.wox-join {
  margin-top: 0;
}
/* a régi sötét overlay (::before) már nem kell – külön szövegpanelt használunk */
.section-join-us.wox-join::before { content: none; }

.wox-join__grid {
  display: grid;
  grid-template-columns: 1fr;          /* mobil: egy oszlop (kép felül, szöveg alatta) */
  align-items: stretch;
}
@media (min-width: 768px) {
  .wox-join__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}

/* Szöveges panel */
.wox-join__content {
  padding: 3rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.85rem;
  position: relative;
  z-index: 1;
}
.wox-join__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--primary-strong);
  font-weight: 800;
  font-size: 0.85rem;
  padding: 0.4rem 1rem;
  border-radius: 999px;
}
.wox-join__pill .zmdi { color: var(--primary-strong); font-size: 1rem; }

.wox-join__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--foreground);
  margin: 0;
  max-width: 460px;
}
.wox-join__subtitle {
  color: var(--muted-foreground);
  font-size: 1.02rem;
  font-weight: 500;
  margin: 0;
  max-width: 440px;
}

/* CTA pill gomb – --primary akcentussal (világos: lime, sötét: semleges) */
.wox-join__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  align-self: flex-start;
  margin-top: 0.6rem;
  background: var(--primary);
  color: var(--primary-foreground) !important;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  text-decoration: none;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  box-shadow: var(--shadow-md);
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, filter 0.2s ease;
}
.wox-join__cta:hover {
  color: var(--primary-foreground) !important;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  filter: brightness(1.04);
}
.wox-join__cta:active { transform: scale(0.97); }
.wox-join__cta .zmdi { font-size: 1.2rem; line-height: 1; }

/* KĂ©pes panel */
.wox-join__media {
  position: relative;
  min-height: 260px;
  overflow: hidden;
}
.wox-join__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Elhalványuló átmenet a szövegpanel és a fotó között (a wox-hőshöz illően) –
   csak asztali 2 oszlopos nézetben, a secondary háttérből átmúlva a képbe. */
@media (min-width: 768px) {
  .wox-join__media::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 90px;
    background: linear-gradient(to right,
      var(--secondary) 0%,
      color-mix(in oklch, var(--secondary) 55%, transparent) 45%,
      transparent 100%);
    z-index: 1;
    pointer-events: none;
  }
}

/* Mobil: kép a szöveg fölé (a .wox-card image-top mintája), szűkebb padding */
@media (max-width: 767.98px) {
  .wox-join__content { padding: 2.25rem 1.5rem; }
  .wox-join__media { min-height: 200px; order: -1; }
}

/* mobil kereso a feed tetejen */
#feed-search-mobile .inputs-box-grey {
  border-radius: 999px;
  background: var(--muted);
  border: 1px solid var(--border);
  min-height: 44px;
}


/* ==================================================================
   29. FEJLEC widget-dropdown PILL GOMBOK (Delivery + cim) +
       feed szuropanel ritmus-javitasok + rendeles-tipus kapcsolo
   ================================================================== */

/* fejlec pill gombok - a style.css #eee hattere sotet modban
   vilagos maradt, a szoveg pedig feher lett -> lathatatlan volt */
.wox-header .widget-dropdown button {
  background: var(--secondary);
  color: var(--foreground);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.5rem 2.3rem 0.5rem 1.1rem;
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1.4;
  transition: background 0.2s ease, color 0.2s ease;
}
.wox-header .widget-dropdown button:hover { background: var(--muted); }
.wox-header .widget-dropdown button.no-icons { padding-right: 1.1rem; }
.wox-header .widget-dropdown button:after {
  color: var(--muted-foreground);
  right: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.35rem;
}
.wox-header .widget-dropdown .dropdown-menu {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: 0.35rem;
}
.wox-header .widget-dropdown .dropdown-menu a {
  color: var(--foreground);
  border-radius: var(--radius-md);
  padding: 0.5rem 0.85rem;
  font-weight: 600;
}
.wox-header .widget-dropdown .dropdown-menu a:hover {
  background: var(--muted);
  color: var(--foreground);
}

/* feed szuropanel - statikus csoportcim (nem kattinthato) */
#vue-feed .section-filter h5.wox-filter-label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
  color: var(--foreground);
  margin: 0;
}

/* a rendezes radiogombok behuzasanak kiegyenlitese */
#vue-feed .section-filter .filter-row .row.m-0 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* slider felirat + kivalasztott ertek */
#vue-feed .section-filter .form-group { margin-bottom: 0.25rem; }
#vue-feed .section-filter .form-group label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted-foreground);
}
#vue-feed .section-filter .form-group label b,
#vue-feed .section-filter .min-selected-range { color: var(--foreground); }

/* ertekeles sor felirata */
#vue-feed .section-filter p.bold {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--muted-foreground);
  margin-bottom: 0.4rem;
}
#vue-feed .section-filter .vue-star-rating svg {
  width: 22px;
  height: 22px;
}

/* Show more link */
#vue-feed .section-filter .more-cuisine {
  padding: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted-foreground);
}
#vue-feed .section-filter .more-cuisine:hover { color: var(--foreground); }

/* Rendelés típusa 2x2 rács */
.wox-order-type-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
}

.wox-order-type-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.5rem;
  border-radius: var(--radius-lg, 10px);
  background: var(--muted);
  border: 1px solid var(--border);
  color: var(--muted-foreground);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  margin: 0;
  text-align: center;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  min-width: 0;
}

.wox-order-type-btn input[type="radio"] {
  display: none;
  position: absolute;
}

.wox-order-type-btn:hover {
  background: color-mix(in oklch, var(--foreground) 8%, transparent);
  color: var(--foreground);
  border-color: color-mix(in oklch, var(--foreground) 20%, transparent);
}

.wox-order-type-btn.active {
  background: var(--foreground) !important;
  color: var(--background) !important;
  border-color: var(--foreground) !important;
  box-shadow: var(--shadow-sm);
}

.wox-order-type-btn i {
  font-size: 0.95rem;
  flex-shrink: 0;
}

.wox-order-type-btn span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ==================================================================
   30. FEED ESZKOZSOR - Rendezes dropdown (A valtozat)
   ================================================================== */

/* a fejlecsor mobilon torodjon */
.wox-feed-header { flex-wrap: wrap; gap: 0.5rem; }

/* rendezes gomb - shadcn outline pill */
#vue-feed .wox-sort-dropdown .wox-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--card);
  color: var(--foreground);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.4;
  transition: background 0.2s ease, border-color 0.2s ease;
}
#vue-feed .wox-sort-dropdown .wox-sort-btn:hover { background: var(--muted); }
#vue-feed .wox-sort-dropdown .wox-sort-btn:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 30%, transparent); }
#vue-feed .wox-sort-dropdown .wox-sort-btn__label { color: var(--muted-foreground); font-weight: 500; }
#vue-feed .wox-sort-dropdown .wox-sort-btn .zmdi { color: var(--muted-foreground); font-size: 1.1rem; }

/* lenyilo menu */
#vue-feed .wox-sort-dropdown .dropdown-menu {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: 0.35rem;
  min-width: 210px;
}
#vue-feed .wox-sort-dropdown .dropdown-menu .dropdown-item {
  color: var(--foreground);
  border-radius: var(--radius-md);
  padding: 0.5rem 0.85rem;
  font-size: 0.88rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#vue-feed .wox-sort-dropdown .dropdown-menu .dropdown-item:hover {
  background: var(--muted);
  color: var(--foreground);
}
#vue-feed .wox-sort-dropdown .dropdown-menu .dropdown-item.active {
  background: var(--muted) !important;
  color: var(--foreground) !important;
}
#vue-feed .wox-sort-dropdown .dropdown-menu .dropdown-item.active::after {
  content: "âś“";
  font-weight: 900;
  color: var(--primary);
}


/* ==================================================================
   31. GYORS SZURO KAPCSOLOK (shadcn switch) + CUISINE CHIPEK +
       cim-pill szelesebb truncate
   ================================================================== */

/* cim-pill: hosszu cimeknel is olvashato legyen */
.wox-header .widget-dropdown button span.text-truncate { max-width: 260px; }
@media (max-width: 1199px) {
  .wox-header .widget-dropdown button span.text-truncate { max-width: 170px; }
}

/* shadcn switch sor */
.wox-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.45rem 0;
  margin: 0;
  cursor: pointer;
}
.wox-switch-row__text {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--foreground);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.wox-switch-row__text .zmdi {
  font-size: 1.05rem;
  color: var(--muted-foreground);
}

/* maga a switch */
.wox-switch { position: relative; display: inline-flex; flex-shrink: 0; }
.wox-switch__input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  z-index: 1;
}
.wox-switch__track {
  display: block;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: var(--muted);
  border: 1px solid var(--border);
  transition: background 0.2s ease, border-color 0.2s ease;
  position: relative;
}
.wox-switch__track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--card);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, background 0.2s ease;
}
html.dark .wox-switch__track::after { background: var(--muted-foreground); }
.wox-switch__input:checked + .wox-switch__track {
  background: var(--primary);
  border-color: var(--primary);
}
.wox-switch__input:checked + .wox-switch__track::after {
  transform: translateX(18px);
  background: var(--primary-foreground);
}
.wox-switch__input:focus-visible + .wox-switch__track {
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 30%, transparent);
}

/* cuisine chipek - a checkbox helyett kattinthato cimkek */
#vue-feed .section-filter .wox-cuisine-chips .custom-control { padding-left: 0; }
#vue-feed .section-filter .wox-cuisine-chips .custom-control-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 38px;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--background);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  transition: all 0.15s ease;
  cursor: pointer;
}
#vue-feed .section-filter .wox-cuisine-chips .custom-control-label::before,
#vue-feed .section-filter .wox-cuisine-chips .custom-control-label::after { display: none; }
#vue-feed .section-filter .wox-cuisine-chips .custom-control-label:hover {
  border-color: var(--muted-foreground);
}
#vue-feed .section-filter .wox-cuisine-chips .custom-control-input:checked ~ .custom-control-label {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}
#vue-feed .section-filter .wox-cuisine-chips .custom-control-input:focus ~ .custom-control-label {
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 30%, transparent);
}


/* ==================================================================
   32. KARTYA IDO-BADGE (Deliveroo-stilus) + "New" rating +
       nyelv-dropdown modern stilus
   ================================================================== */

/* kiszallitasi ido badge - jobb also sarok, feher hatter */
.wox-card__time {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 9;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #ffffff;
  color: #111111 !important;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 5px 11px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.18);
}
.wox-card__time .zmdi { font-size: 0.9rem; color: #111111 !important; }
.wox-card__time span { color: #111111 !important; }

/* "New" rating pill - csillag nelkuli, hangsulyos valtozat */
.wox-card__rating--new {
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.7rem;
}

/* nyelv-valaszto dropdown – a fejléc nyelvválasztója Bootstrap .dropdown-menu
   (nem Element Plus), ezért dedikált stílus kell: finom, modern, sötét módban
   is jĂłl olvashatĂł. */
.language-bar .dropdown-menu {
  min-width: 210px;
  background: var(--popover);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 0.4rem;
  margin-top: 0.5rem !important;
}
.language-bar .dropdown-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border-radius: var(--radius-md);
  color: var(--foreground);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.5rem 0.75rem;
  transition: background 0.15s ease, color 0.15s ease;
}
.language-bar .dropdown-menu .dropdown-item .img-30-flag {
  width: 24px;
  height: 14px;
  border-radius: 3px;
  object-fit: cover;
  flex-shrink: 0;
}
.language-bar .dropdown-menu .dropdown-item:hover,
.language-bar .dropdown-menu .dropdown-item:focus {
  background: var(--muted);
  color: var(--foreground);
}
.language-bar .dropdown-menu .dropdown-item.active,
.language-bar .dropdown-menu .dropdown-item.active:hover {
  background: var(--muted) !important;
  color: var(--foreground) !important;
}
html.dark .language-bar .dropdown-menu .dropdown-item.active,
html.dark .language-bar .dropdown-menu .dropdown-item.active:hover {
  background: rgba(182, 240, 74, 0.16) !important;
  color: var(--foreground) !important;
}
/* a kapcsoló zászló a fejlécben – 16:9 arány, finom lekerekítés */
.language-bar > .dropdown-toggle .img-30-flag {
  width: 30px;
  height: 17px;
  border-radius: 4px;
  object-fit: cover;
  display: block;
}
/* a fejléc jobb oldali ikoncsoportja: egységes térköz */
.wox-header__actions { gap: 0.6rem; }
.wox-header__actions > * { flex-shrink: 0; }
.wox-header .notification-dropdown,
.wox-header .notification-dropdown.btn-group,
.wox-header .notification-dropdown.pull-right {
  float: none !important;
  display: inline-flex;
  align-items: center;
  margin: 0;
}

/* nyelv gomb: nem lekerekített (pill tiltva), fehér chevron */
.language-bar > a.dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-md);
  color: var(--foreground) !important;
  transition: background 0.15s ease;
}
.language-bar > a.dropdown-toggle:hover { background: var(--accent); text-decoration: none; }
.language-bar > a.dropdown-toggle::after {
  border-top-color: var(--foreground) !important;
  margin-left: 0.1rem;
}

/* Element Plus el-dropdown (ha valahol mégis az kellene) */
.el-dropdown-menu {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-md) !important;
  padding: 0.4rem !important;
}
.el-dropdown-menu .el-dropdown-menu__item,
.el-dropdown-menu .el-dropdown-menu__item:not(.is-disabled) {
  color: var(--foreground);
  border-radius: var(--radius-md);
  padding: 0.5rem 0.85rem;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
  transition: background 0.15s ease, color 0.15s ease;
}
.el-dropdown-menu .el-dropdown-menu__item:hover,
.el-dropdown-menu .el-dropdown-menu__item:focus,
.el-dropdown-menu .el-dropdown-menu__item:not(.is-disabled):hover,
.el-dropdown-menu .el-dropdown-menu__item:not(.is-disabled):focus {
  background: var(--muted) !important;
  color: var(--foreground) !important;
}
.el-dropdown-menu .el-dropdown-menu__item .el-image {
  border-radius: 4px;
  overflow: hidden;
  display: block;
}
.el-dropdown-menu .popper__arrow { display: none !important; }


/* ==================================================================
   34. ETTERMI OLDAL - WOX REDESIGN (A irany)
   Hero + info-blokk, kategoria-pillek, etlap-kartya, kosar-panel,
   extra szekciok (about/galeria/cim/nyitvatartas/velemenyek)
   ================================================================== */

/* ---------- HERO ---------- */
.wox-merchant-head { padding-top: 1.25rem; }
.wox-merchant-hero {
  position: relative;
  height: 260px;
  border-radius: var(--radius-3xl);
  overflow: hidden;
  background: var(--muted);
}
.wox-merchant-hero__cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wox-merchant-hero__cover--empty {
  background: linear-gradient(135deg, var(--muted), var(--secondary));
}
.wox-merchant-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    color-mix(in oklch, var(--background) 88%, transparent) 0%,
    color-mix(in oklch, var(--background) 35%, transparent) 45%,
    transparent 100%
  );
}
.wox-merchant-hero__top {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}
.wox-merchant-hero__actions { display: flex; gap: 0.5rem; align-items: center; }
.wox-merchant-hero__btn {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in oklch, var(--background) 72%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  color: var(--foreground);
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  text-decoration: none !important;
}
.wox-merchant-hero__btn:hover {
  transform: scale(1.12);
  background: var(--background);
  box-shadow: var(--shadow-md);
  color: var(--foreground);
}
.wox-merchant-hero__btn .zmdi { font-size: 20px; line-height: 1; }

/* kedvenc gomb (component-save-store .btn felulirasa a heron belul) */
.wox-merchant-hero__fav .btn {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: color-mix(in oklch, var(--background) 72%, transparent) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border) !important;
  color: var(--foreground);
  padding: 0;
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.wox-merchant-hero__fav .btn:hover {
  transform: scale(1.12);
  background: var(--background) !important;
  box-shadow: var(--shadow-md);
}
.wox-merchant-hero__fav .btn .zmdi { font-size: 20px; line-height: 1; }
.wox-merchant-hero__fav .text-green { color: #f87171 !important; }

/* ---------- INFO-BLOKK ---------- */
.wox-merchant-info {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding: 0 0.5rem;
  margin-bottom: 1.5rem;
}
.wox-merchant-info__logo {
  width: 104px;
  height: 104px;
  border-radius: 999px;
  flex-shrink: 0;
  border: 4px solid var(--background);
  background: var(--card);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  margin-top: -56px;
  position: relative;
  z-index: 5;
}
.wox-merchant-info__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.wox-merchant-info__body { flex: 1; min-width: 0; padding-top: 0.85rem; }
.wox-merchant-info__name {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--foreground);
  margin: 0 0 0.55rem;
  line-height: 1.2;
}
.wox-merchant-info__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}
.wox-merchant-info__reviews {
  font-size: 0.88rem;
  color: var(--muted-foreground);
  text-decoration: none !important;
}
.wox-merchant-info__reviews:hover { color: var(--foreground); }

.wox-rating-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--primary);
  color: var(--primary-foreground);
  border-radius: 999px;
  padding: 0.32rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none !important;
}
.wox-rating-pill .zmdi { font-size: 0.95rem; }
a.wox-rating-pill:hover { filter: brightness(0.95); color: var(--primary-foreground); }
.wox-rating-pill--sm { padding: 0.25rem 0.6rem; font-size: 0.8rem; }

.wox-tag-pill {
  display: inline-flex;
  align-items: center;
  background: var(--secondary);
  color: var(--secondary-foreground);
  border-radius: 999px;
  padding: 0.32rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
}

.wox-merchant-info__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--muted-foreground);
  margin-bottom: 1rem;
}
.wox-merchant-info__meta-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.wox-merchant-info__meta-item .zmdi { color: var(--primary-strong); font-size: 1.05rem; }

/* delivery/pickup segmented-control (component-merchant-services) */
.wox-merchant-info__services .btn-group-rounded {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--secondary);
  border-radius: 999px;
  border: none;
}
.wox-merchant-info__services .btn-group-rounded .btn {
  border-radius: 999px !important;
  border: none !important;
  background: transparent;
  color: var(--muted-foreground);
  padding: 0.55rem 1.25rem;
  font-weight: 600;
  margin: 0 !important;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.wox-merchant-info__services .btn-group-rounded .btn.active {
  background: var(--card);
  color: var(--foreground);
  box-shadow: var(--shadow-sm);
}
.wox-merchant-info__services .btn-group-rounded .btn .bold { font-weight: 700; }
.wox-merchant-info__services .btn-group-rounded .btn p {
  font-size: 0.8rem;
  color: inherit;
  opacity: 0.75;
}
.wox-merchant-info__services .btn-group-rounded .btn input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* ---------- KATEGORIA-PILLEK (sticky, vizszintes) ---------- */
.wox-catnav-wrap { margin-bottom: 1.25rem; }
.wox-catnav {
  position: sticky;
  top: var(--wox-header-h, 84px);
  z-index: 25;
  background: var(--background);
  padding: 0.65rem 0.25rem;
  margin: 0 -0.25rem;
}
/* a 13. szekcio regi kartya-stilusanak felulirasa */
.wox-catnav ul#menu-category,
.wox-catnav .menu-category {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
}
.wox-catnav__list {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0;
  padding: 2px;
}
.wox-catnav__list::-webkit-scrollbar { display: none; }
.wox-catnav__list li { flex-shrink: 0; }
.wox-catnav .menu-category li a:after { display: none !important; }
.wox-catnav__pill.nav-link {
  display: inline-block;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  background: var(--secondary);
  color: var(--secondary-foreground) !important;
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.wox-catnav__pill.nav-link:hover {
  background: var(--accent);
  color: var(--foreground) !important;
  transform: translateY(-1px);
}
.wox-catnav__pill.nav-link.active,
.wox-catnav .menu-category li.active .wox-catnav__pill.nav-link {
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
}

/* ---------- ETLOP-KERESO ---------- */
.wox-menu-search { margin-bottom: 1.25rem; }
.wox-menu-search .el-input__wrapper {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-sm) !important;
  min-height: 50px;
  padding: 0 1.1rem;
}
.wox-menu-search .el-input__wrapper.is-focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 25%, transparent) !important;
}
.wox-menu-search .el-input__inner { color: var(--foreground); font-size: 0.95rem; }
.wox-menu-search .el-input__inner::placeholder { color: var(--muted-foreground); }
.wox-menu-search .el-input__prefix .zmdi { color: var(--muted-foreground); font-size: 1.15rem; }

/* ---------- ETLAP-KARTYA + TETEL-SOROK ---------- */
.wox-menu-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-3xl);
  padding: 1.5rem 1.75rem 1.75rem;
  box-shadow: var(--shadow-sm);
}
.wox-menu-section { margin-bottom: 1.75rem; scroll-margin-top: 150px; }
.wox-menu-section:last-child { margin-bottom: 0.25rem; }
.wox-menu-section > h5 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--foreground);
  margin: 0 0 0.25rem;
}
.wox-menu-section__desc {
  color: var(--muted-foreground);
  font-size: 0.9rem;
  margin: 0 0 0.25rem;
}

.wox-item {
  display: flex;
  gap: 1.25rem;
  padding: 1.25rem 0;
  align-items: flex-start;
}
.wox-item + .wox-item { border-top: 1px solid var(--border); }
.wox-item__text { flex: 1; min-width: 0; }
.wox-item__title-row { display: flex; align-items: center; gap: 0.5rem; }
.wox-item__name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--foreground);
  margin: 0;
}
.wox-item__allergen .el-button { color: var(--muted-foreground); padding: 0; height: auto; }
.wox-item__allergen .el-button:hover { color: var(--foreground); }
.wox-item__desc {
  color: var(--muted-foreground);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0.4rem 0 0.6rem;
}
.wox-item__price { font-size: 1rem; }
.wox-item--disabled .wox-item__text { opacity: 0.55; }

/* meret-valaszto pillek */
.wox-item__sizes { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.wox-item__sizes.btn-group .btn { margin-left: 0 !important; }
.wox-item__sizes .btn {
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  background: transparent;
  color: var(--foreground);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.4rem 0.9rem;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.wox-item__sizes .btn.active {
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
  border-color: var(--primary) !important;
}
.wox-item__sizes .btn del { opacity: 0.6; font-weight: 400; margin-right: 0.25rem; }

/* jobb oldali foto + lebeggo gomb */
.wox-item__media { position: relative; width: 112px; flex-shrink: 0; }
.wox-item__image {
  width: 112px;
  height: 112px;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  position: relative;
  background: var(--muted);
}
.wox-item__image .el-image { width: 100%; height: 100%; display: block; }
.wox-item__image .el-image img { object-fit: cover; width: 100%; height: 100%; }
.wox-item__soldout {
  position: absolute;
  inset: 0;
  background: color-mix(in oklch, var(--background) 55%, transparent);
}

.wox-item__action {
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
}
.wox-add-btn {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: var(--primary-foreground);
  box-shadow: var(--shadow-md);
  font-size: 1.25rem;
  transition: transform 0.16s ease, filter 0.16s ease;
  text-decoration: none !important;
}
.wox-add-btn:hover {
  transform: scale(1.1);
  color: var(--primary-foreground);
  filter: brightness(0.95);
}
.wox-add-btn--disabled {
  background: var(--muted);
  color: var(--muted-foreground);
  box-shadow: none;
}

.wox-qty-stepper {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
  border-radius: 999px;
  padding: 0.25rem 0.45rem;
  box-shadow: var(--shadow-md);
}
.wox-qty-stepper__btn {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-foreground) !important;
  font-size: 1.1rem;
  font-weight: 900;
  transition: background 0.15s ease;
  text-decoration: none !important;
}
.wox-qty-stepper__btn i,
.wox-qty-stepper__btn .zmdi {
  color: var(--primary-foreground) !important;
  font-size: 1.1rem;
  font-weight: 900;
  line-height: 1;
}
.wox-qty-stepper__btn:hover {
  background: color-mix(in oklch, var(--primary-foreground) 20%, transparent);
  color: var(--primary-foreground) !important;
}
.wox-qty-stepper__qty {
  min-width: 20px;
  text-align: center;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--primary-foreground) !important;
}

.wox-item__notavail p {
  color: var(--muted-foreground);
  font-size: 0.82rem;
  text-align: center;
  margin: 0.5rem 0 0;
}

/* ---------- KOSAR-PANEL ---------- */
.menu-right .sticky-cart {
  border-radius: var(--radius-3xl);
  padding: 1.4rem 1.5rem;
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 90px;
  align-self: flex-start;
}
.menu-right .sticky-cart h5 {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--foreground);
}
.menu-right .section-cart .line-items {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
  align-items: center;
  margin-left: 0;
  margin-right: 0;
}
.menu-right .section-cart .items:last-of-type .line-items { border-bottom: none; }
.menu-right .cart-image-preview,
.menu-right .cart-image-preview .el-image { border-radius: var(--radius-lg); overflow: hidden; }
.menu-right .section-cart .item-remove {
  background: var(--secondary);
  color: var(--muted-foreground);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  transition: background 0.15s ease, color 0.15s ease;
}
.menu-right .section-cart .item-remove:hover {
  background: var(--primary);
  color: var(--primary-foreground);
}
.menu-right .section-cart .quantity {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.2rem 0.5rem;
  max-width: 110px;
  align-items: center;
}
.menu-right .section-cart .quantity a.rounded-pill { background: transparent; width: 22px; height: 22px; }
.menu-right .section-cart .quantity a.rounded-pill:hover { background: var(--secondary); color: var(--secondary-foreground); }
.menu-right .section-cart .quantity .qty { font-weight: 700; font-size: 0.9rem; }
.menu-right .cart-summary { border-top: 1px dashed var(--border); padding-top: 1rem; }
.menu-right .section-cart .btn-green {
  border-radius: var(--radius-xl);
  min-height: 48px;
  font-weight: 800;
  align-items: center;
}

/* ures kosar - Wox stilusu */
.wox-cart-empty { padding: 2.5rem 0 2rem; }
.wox-cart-empty__icon {
  width: 84px;
  height: 84px;
  margin: 0 auto 1.25rem;
  border-radius: 999px;
  background: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
}
.wox-cart-empty__icon .zmdi { font-size: 2.4rem; color: var(--muted-foreground); }
.wox-cart-empty h6 { font-weight: 700; color: var(--foreground); font-size: 1rem; margin-bottom: 0.35rem; }
.wox-cart-empty p { color: var(--muted-foreground); font-size: 0.9rem; margin-bottom: 1.25rem; }
.wox-cart-empty__cta {
  display: inline-block;
  background: var(--primary);
  color: var(--primary-foreground);
  border-radius: 999px;
  padding: 0.6rem 1.4rem;
  font-weight: 700;
  font-size: 0.9rem;
  transition: transform 0.16s ease, filter 0.16s ease;
}
.wox-cart-empty__cta:hover {
  transform: scale(1.04);
  color: var(--primary-foreground);
  filter: brightness(0.95);
  text-decoration: none;
}

/* ---------- EXTRA SZEKCIOK (about / galeria / cim / velemenyek) ---------- */
.wox-section-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-3xl);
  padding: 1.6rem 1.75rem;
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.5rem;
}
.wox-section-card__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
}
.wox-section-card__head--split { justify-content: space-between; }
.wox-section-card__head h5 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--foreground);
}
.wox-section-card__icon {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  flex-shrink: 0;
  background: var(--secondary);
  color: var(--primary-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
}
.wox-section-card .description,
.wox-section-card .wox-about-text {
  color: var(--muted-foreground);
  line-height: 1.65;
  font-size: 0.95rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  white-space: normal;
  max-height: none;
  text-overflow: unset;
}
.wox-section-card .wox-about-text.is-expanded,
.wox-section-card .wox-about-text.is-short,
.wox-section-card .description.expanded {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
  white-space: normal;
  max-height: none;
}
.wox-section-card .wox-read-more,
.wox-section-card .read-more {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  color: var(--primary-strong);
  font-weight: 700;
  font-size: 0.9rem;
  display: inline-block;
  margin-top: 0.5rem;
  cursor: pointer;
  text-decoration: none;
}
.wox-section-card .wox-read-more:hover,
.wox-section-card .read-more:hover {
  text-decoration: underline;
}
.wox-muted-text { color: var(--muted-foreground); font-size: 0.9rem; }
.wox-link { color: var(--primary-strong); font-weight: 600; }

/* galeria - vizszintes csik */
.wox-gallery-strip {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
}
.wox-gallery-strip__item { flex-shrink: 0; width: 200px; }
.wox-gallery-strip__item--sm { width: 120px; }
.wox-gallery-strip__item figure { margin: 0; position: relative; }
.wox-gallery-strip__item img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  border-radius: var(--radius-xl);
}
.wox-gallery-strip__item--sm img { height: 90px; }
.wox-gallery-strip__item .gallery-more {
  position: absolute;
  inset: 0;
  background: color-mix(in oklch, var(--background) 60%, transparent);
  border-radius: var(--radius-xl);
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--foreground);
  z-index: 2;
}

/* cim + nyitvatartas + terkep */
.wox-hours-table td {
  padding: 0.35rem 0;
  border-bottom: 1px dashed var(--border);
  color: var(--muted-foreground);
}
.wox-hours-table td.bold { color: var(--foreground); font-weight: 600; }
.wox-hours-table tr:last-child td { border-bottom: none; }
.wox-map-img {
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border);
}

/* velemenyek */
.wox-review {
  display: flex;
  gap: 1rem;
  padding: 1.25rem 0;
}
.wox-review + .wox-review { border-top: 1px solid var(--border); }
.wox-review__avatar img {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  object-fit: cover;
}
.wox-review__body { flex: 1; min-width: 0; }
.wox-review__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.4rem;
}
.wox-review__author h6 { font-weight: 700; font-size: 0.95rem; color: var(--foreground); }
.wox-review__text {
  color: var(--muted-foreground);
  font-size: 0.93rem;
  line-height: 1.6;
  margin-bottom: 0.75rem;
}
.wox-loadmore-btn {
  display: inline-block;
  background: var(--secondary);
  color: var(--secondary-foreground);
  border-radius: 999px;
  padding: 0.65rem 1.75rem;
  font-weight: 700;
  transition: background 0.15s ease, transform 0.15s ease;
}
.wox-loadmore-btn:hover {
  background: var(--accent);
  transform: translateY(-1px);
  color: var(--foreground);
  text-decoration: none;
}

/* ---------- ETTERMI OLDAL RESPONZIV ---------- */
@media (max-width: 991.98px) {
  .wox-merchant-head { padding-left: 0.75rem; padding-right: 0.75rem; }
  .wox-merchant-hero { height: 190px; border-radius: var(--radius-2xl); }
  .wox-merchant-info { padding: 0; gap: 1.25rem; }
  .wox-merchant-info__logo { width: 84px; height: 84px; margin-top: -44px; }
  .wox-merchant-info__logo:has(.wox-story-ring) { margin-right: 0.95rem; }
  .wox-story-badge { font-size: 8.5px; padding: 1px 5.5px 1.5px 4.5px; bottom: -2px; }
  .wox-merchant-info__name { font-size: 1.4rem; }
  .wox-merchant-info__meta { gap: 0.9rem; }
  .wox-merchant-info__services .btn-group-rounded {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  .wox-catnav {
    top: var(--wox-header-h, 60px);
    z-index: 24;
  }
  .wox-catnav__pill.nav-link {
    padding: 0.48rem 0.95rem;
    font-size: 0.85rem;
  }
  .wox-menu-card { padding: 1.1rem 1.1rem 1.25rem; border-radius: var(--radius-2xl); }
  .wox-menu-section { scroll-margin-top: calc(var(--wox-header-h, 60px) + 70px); }
  .wox-item { gap: 0.9rem; }
  .wox-item__media { width: 96px; }
  .wox-item__image { width: 96px; height: 96px; }
  .wox-section-card { padding: 1.25rem 1.1rem; border-radius: var(--radius-2xl); }
  .wox-section-card__head--split { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .wox-gallery-strip__item { width: 150px; }
  .wox-gallery-strip__item img { height: 100px; }
  .wox-review { gap: 0.75rem; }
}


/* ============ 34/b. ETTERMI OLDAL - 1. KOROS HIBAJAVITASOK ============ */

/* meret/arak pillek: a Bootstrap .btn-group .btn flex:1 1 auto miatt
   teljes szelessegre nyultak - vissza termeszetes szelessegre */
.wox-item__sizes.btn-group .btn { flex: 0 0 auto !important; }

/* kosar tetel: egyseg-ar inline a nev mellett (sortores helyett) */
.wox-cart-item-name { line-height: 1.45; }
.wox-cart-unit-price {
  color: var(--muted-foreground);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  margin-left: 0.3rem;
}
.wox-cart-unit-price del { opacity: 0.6; font-weight: 400; margin-right: 0.2rem; }
.menu-right .section-cart .line-items .col-3 p { white-space: nowrap; }

/* addon modal: a regi feher sav (.addon-rows .heads) es a sarga Required badge
   sotet modban olvashatatlan volt - temavaltozos feluliras */
.addon-rows {
  margin-bottom: 1.25rem;
}
.addon-rows:last-child {
  margin-bottom: 0;
}
.addon-rows .heads {
  background: var(--secondary);
  border-radius: var(--radius-lg);
  padding: 0.65rem 0.95rem;
  margin-bottom: 0.75rem;
}
.addon-rows .heads h5,
.addon-rows .heads h6 { color: var(--foreground); }
.addon-rows .heads p.text-grey { color: var(--muted-foreground); }
.addon-required {
  background: var(--primary);
  color: var(--primary-foreground);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}


/* ============ 34/c. ETTERMI OLDAL - 2. KOROS JAVITASOK ============ */

/* reviews fejlec: ikon + cim egyseges terkoz, akcio-gombok csoportja */
.wox-review-head-main { display: flex; align-items: center; gap: 0.75rem; }
.wox-review-head-actions { gap: 0.6rem; }

/* reviews osszecsukas gomb (chevron forog) */
.wox-review-toggle {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  flex-shrink: 0;
  background: var(--secondary);
  color: var(--secondary-foreground);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, transform 0.15s ease;
  text-decoration: none !important;
}
.wox-review-toggle:hover { background: var(--accent); color: var(--foreground); }
.wox-review-toggle .zmdi { font-size: 1.15rem; transition: transform 0.2s ease; }
.wox-review-toggle--open .zmdi { transform: rotate(180deg); }

/* reviews szuro dropdown */
.wox-review-filter > a.dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--secondary);
  color: var(--secondary-foreground);
  border-radius: 999px;
  padding: 0.45rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none !important;
  transition: background 0.15s ease;
}
.wox-review-filter > a.dropdown-toggle:hover { background: var(--accent); color: var(--foreground); }
.wox-review-filter .dropdown-menu {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: 0.4rem;
  min-width: 170px;
}
.wox-review-filter .dropdown-menu .dropdown-item {
  color: var(--foreground);
  border-radius: var(--radius-md);
  padding: 0.5rem 0.85rem;
  font-size: 0.9rem;
  font-weight: 600;
  transition: background 0.15s ease, color 0.15s ease;
}
.wox-review-filter .dropdown-menu .dropdown-item:hover { background: var(--muted); color: var(--foreground); }
.wox-review-filter .dropdown-menu .dropdown-item.active {
  background: var(--primary);
  color: var(--primary-foreground);
}

/* 24 oras badge a nyitvatartas tablazatban */
.wox-open24-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--primary);
  color: var(--primary-foreground);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  font-size: 0.8rem;
  font-weight: 700;
}

/* ============================================================
   34/d. Reviews racs + teljes ertekeles modal (2026-07-25 6/a. kor)
   ============================================================ */

/* 2 oszlopos racs - a kartyak onallo feluleteket kapnak */
.wox-reviews-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
/* a racsban nincs szukseg a regi elvalaszto vonalra es fuggoleges ritmusra */
.wox-reviews-grid .wox-review {
  padding: 1rem;
  background: var(--secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.wox-reviews-grid .wox-review + .wox-review { border-top: 1px solid var(--border); /* a teljes keret miatt vizualisan nem latszik */ }
.wox-reviews-grid .wox-review:hover {
  transform: translateY(-2px);
  border-color: var(--primary);
  box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,0.25));
}
.wox-reviews-grid .wox-review:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
/* hosszu szoveg clamp - a modalban a teljes szoveg latszik */
.wox-reviews-grid .wox-review__text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* kartya-lablec: datum + read more */
.wox-review__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.25rem;
}
.wox-review__date {
  color: var(--muted-foreground);
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wox-review__more {
  color: var(--muted-foreground);
  font-size: 0.8rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.wox-review:hover .wox-review__more { color: var(--foreground); }

/* modal felulet */
.wox-review-modal__surface {
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}
.wox-review-modal__head {
  border-bottom: 1px solid var(--border);
  padding: 1rem 1.25rem;
}
.wox-review-modal__head .modal-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--foreground);
}
.wox-review-modal__head .modal-title .zmdi { color: var(--primary); }
.wox-review-modal__head .close {
  color: var(--foreground);
  text-shadow: none;
  opacity: 0.7;
  font-size: 1.5rem;
  font-weight: 400;
}
.wox-review-modal__head .close:hover { opacity: 1; }
.wox-review-modal__body { padding: 1.25rem; }
/* a modalban a kartya statikus, teljes szoveggel */
.wox-review--modal { cursor: default; padding: 0; }
.wox-review--modal:hover { transform: none; border-color: var(--border); box-shadow: none; }
.wox-review--modal .wox-review__text {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.wox-review--modal .wox-review__more { display: none; }

/* mobil: 1 oszlop */
@media (max-width: 767.98px) {
  .wox-reviews-grid { grid-template-columns: 1fr; }
  .wox-review-modal__dialog { margin: 0.75rem; }
}

/* ============================================================
   35. Fejlec: logo mindig kozepen, cim gombok balra (6/a. kor)
   ============================================================ */
.wox-header__inner { position: relative; }
.wox-header__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  z-index: 2;
  pointer-events: none; /* a mogotte levo elemek is kattinthatoak maradjanak */
}
.wox-header__logo a, .wox-header__logo img { pointer-events: auto; }

/* a cim-pill ne fussa a kozepre igazitott logo ala */
@media (min-width: 992px) {
  .wox-header #vue-widget-nav.col { max-width: 38%; }
}
@media (max-width: 991.98px) {
  .wox-header .top-logo img { max-height: 32px; }
  .wox-header__actions {
    margin-left: auto;
    gap: 0.2rem;
    justify-content: flex-end;
  }
  .wox-header ul.top-menu {
    gap: 0.15rem;
    padding: 0;
  }
  .wox-header ul.top-menu > li {
    margin: 0 !important;
  }
  .wox-header .notification-dropdown .btn {
    width: 36px;
    height: 36px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .wox-header .notification-dropdown img {
    width: 32px;
    height: 32px;
    object-fit: cover;
  }
  .wox-header .hamburger {
    padding: 6px 4px;
    margin: 0;
  }
}

/* ============================================================
   36. Ettermi fejlec: szolgaltatas-valaszto a jobb szelre (6/a. kor)
   ============================================================ */
@media (min-width: 992px) {
  .wox-merchant-info__services {
    align-self: center;
    margin-left: auto;      /* a jobb szelere tolja */
    padding-left: 2.5rem;   /* bo tavolsag a nevtoi oszloptol */
    flex-shrink: 0;
  }
}
/* tablet/mobil: a valaszto a nev-meta alatt teljes szelessegben */
@media (max-width: 991.98px) {
  .wox-merchant-info { flex-wrap: wrap; }
  .wox-merchant-info__services {
    flex: 0 0 100%;
    position: relative;
  }
}

/* ============================================================
   Mobil: atveteli mod lenyilo (a 4 gombos kapcsolot helyettesiti)
   ============================================================ */
.wox-service-select { display: none; }
@media (max-width: 991.98px) {
  .wox-service-select {
    display: block;
    position: relative;
    width: 100%;
  }
}
.wox-service-select__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 52px;
  padding: 0.7rem 1rem;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--foreground);
  font-weight: 650;
  text-align: left;
  box-shadow: var(--shadow-sm);
}
.wox-service-select__btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(131, 234, 0, 0.22);
}
.wox-service-select__current {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}
.wox-service-select__name {
  font-size: 0.95rem;
  line-height: 1.2;
  font-weight: 700;
}
.wox-service-select__eta {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--muted-foreground);
}
.wox-service-select__chevron {
  color: var(--muted-foreground);
  font-size: 1.25rem;
  transition: transform 0.15s ease;
  flex-shrink: 0;
}
.wox-service-select.is-open .wox-service-select__chevron {
  transform: rotate(180deg);
}
.wox-service-select__menu {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 45;
  padding: 0.4rem;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
}
.wox-service-select.is-open .wox-service-select__menu { display: block; }
.wox-service-select__option {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.72rem 0.85rem;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--foreground);
  text-align: left;
}
.wox-service-select__option.is-active {
  background: var(--secondary);
}
.wox-service-select__option-name { font-weight: 700; font-size: 0.92rem; }
.wox-service-select__option-eta {
  font-size: 0.78rem;
  color: var(--muted-foreground);
  white-space: nowrap;
}
.wox-service-select__place {
  display: none;
}
@media (max-width: 991.98px) {
  .action-menu .wox-service-select {
    padding: 0.1rem 0.75rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
    background: var(--card);
  }
  .action-menu .wox-service-select__btn {
    border: 0;
    box-shadow: none;
    background: transparent;
    min-height: 48px;
    padding-left: 0.2rem;
    padding-right: 0.2rem;
  }
  .action-menu .wox-service-select__place {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.45rem;
    padding: 0.55rem 0.15rem 0.1rem;
    border: 0;
    border-top: 1px dashed var(--border);
    background: transparent;
    color: var(--muted-foreground);
    font-size: 0.82rem;
    font-weight: 600;
    text-align: left;
  }
  .wox-service-select__place-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .wox-service-select__place i {
    flex-shrink: 0;
    font-size: 1.05rem;
    opacity: 0.7;
  }
}
html:not(.dark) .wox-service-select__menu {
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.12);
}

/* ============================================================
   37. Profil dropdown stílus (sötét téma & modern kártya)
   ============================================================ */
.dropdown-menu,
.dropdown-menu-right,
.userprofile .dropdown-menu,
#top-nav .dropdown-menu {
  background-color: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5) !important;
  padding: 0.55rem !important;
  min-width: 240px !important;
  margin-top: 0.55rem !important;
  backdrop-filter: blur(12px) !important;
}

.dropdown-menu .dropdown-item,
.dropdown-menu-right .dropdown-item,
.userprofile .dropdown-item,
#top-nav .dropdown-item {
  color: var(--foreground) !important;
  font-weight: 600 !important;
  font-size: 0.93rem !important;
  padding: 0.7rem 1.25rem 0.7rem 3rem !important; /* Biztosítja a 3rem (48px) bal oldali térközt a szövegnek */
  border-radius: var(--radius-lg) !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important; /* Létrehoz egy koordináta-rendszert az abszolút ikonoknak */
  transition: all 0.18s ease !important;
  text-decoration: none !important;
}

/* 1. BETŰIKONOK (i.zmdi): Abszolút pozicionálás a bal oldali üres térközbe, hogy sose fedjék a szöveget */
.dropdown-menu .dropdown-item i,
.dropdown-menu .dropdown-item i::before,
.dropdown-menu .dropdown-item .zmdi,
.dropdown-menu .dropdown-item .zmdi::before,
.dropdown-menu-right .dropdown-item i,
.dropdown-menu-right .dropdown-item i::before,
.userprofile .dropdown-menu .dropdown-item i,
.userprofile .dropdown-menu .dropdown-item i::before,
#top-nav .dropdown-item i,
html.dark .dropdown-menu .dropdown-item i,
html.dark .dropdown-menu .dropdown-item i::before {
  color: #f4f4f5 !important;
  color: var(--foreground) !important;
  opacity: 0.95 !important;
  font-size: 1.25rem !important;
  width: 24px !important;
  min-width: 24px !important;
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.18s ease !important;
  filter: none !important;
  position: absolute !important; /* Abszolút pozicionálás */
  left: 12px !important;         /* Fixen a bal szélre */
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
}

.dropdown-menu .dropdown-item i.mr-2,
.dropdown-menu .dropdown-item .mr-2,
.dropdown-menu-right .dropdown-item i.mr-2,
.userprofile .dropdown-menu .dropdown-item .mr-2 {
  margin-right: 1.1rem !important;
}

/* 2. PNG KÉPIKONOK (with-icon-account, with-icon-orders, with-icon-addresses, etc.) */
/* A közvetlen fekete PNG háttérképet elrejtjük, és a ::before pszeudó-elembe rakjuk, amit invertálunk! */
.dropdown-menu a[class*="with-icon-"],
.userprofile .dropdown-menu a[class*="with-icon-"],
ul.with-icons a[class*="with-icon-"] {
  position: relative !important;
  text-indent: 0 !important;
  padding-left: 3rem !important;
  background-image: none !important;
}

.dropdown-menu a[class*="with-icon-"]::before,
.userprofile .dropdown-menu a[class*="with-icon-"]::before,
ul.with-icons a[class*="with-icon-"]::before {
  content: "" !important;
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 20px !important;
  height: 20px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  transition: transform 0.18s ease, filter 0.18s ease !important;
  /* FEKETE PNG-K BIZTOS VILÁGOSÍTÁSA: FEHÉR IKONOK */
  filter: invert(0.92) brightness(1.6) !important;
}

/* PNG ikon képek hozzárendelése az osztályokhoz */
a.with-icon-account::before { background-image: url("../images/account.png") !important; }
a.with-icon-orders::before { background-image: url("../images/orders-icon.png") !important; }
a.with-icon-booking::before,
a.with-icon-bookings::before { background-image: url("../images/reserved-table.png") !important; }
a.with-icon-vouchers::before,
a.with-icon-offers::before { background-image: url("../images/offers-icon.png") !important; }
a.with-icon-savedstore::before,
a.with-icon-favourites::before { background-image: url("../images/favorites-icon.png") !important; }
a.with-icon-payments::before { background-image: url("../images/payments-icon.png") !important; }
a.with-icon-addresses::before { background-image: url("../images/location.png") !important; }
a.with-icon-points::before,
a.with-icon-gift::before { background-image: url("../images/gift.png") !important; }
a.with-icon-wallet::before { background-image: url("../images/wallet-2.png") !important; }
a.with-icon-livechat::before { background-image: url("../images/live-chat2.png") !important; }
a.with-icon-logout::before { background-image: url("../images/log-out.png") !important; }

/* Hover állapot: elemek és ikonok kiemelése */
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu-right .dropdown-item:hover,
.userprofile .dropdown-menu .dropdown-item:hover {
  background-color: var(--accent) !important;
  color: var(--accent-foreground) !important;
}

.dropdown-menu .dropdown-item:hover i,
.dropdown-menu .dropdown-item:hover i::before,
.dropdown-menu .dropdown-item:hover .zmdi,
.dropdown-menu-right .dropdown-item:hover i,
.userprofile .dropdown-menu .dropdown-item:hover i {
  color: var(--primary-strong) !important;
  color: #ffffff !important;
  opacity: 1 !important;
  transform: scale(1.15);
}

.dropdown-menu a[class*="with-icon-"]:hover::before {
  transform: translateY(-50%) scale(1.15) !important;
  filter: invert(1) brightness(2) !important;
}

/* Elválasztó vonal */
.dropdown-menu .dropdown-divider,
.userprofile .dropdown-divider,
#top-nav .dropdown-divider {
  border-top: 1px solid var(--border) !important;
  margin: 0.45rem 0 !important;
  opacity: 1 !important;
}

/* Kijelentkezés (Logout) pirosas kiemelés */
.dropdown-menu .dropdown-item.text-danger,
.userprofile .dropdown-item.text-danger,
#top-nav .dropdown-item.text-danger {
  color: var(--destructive) !important;
}

.dropdown-menu .dropdown-item.text-danger i,
.dropdown-menu .dropdown-item.text-danger i::before,
.userprofile .dropdown-item.text-danger i,
#top-nav .dropdown-item.text-danger i {
  color: var(--destructive) !important;
  color: #ef4444 !important;
  opacity: 1 !important;
}

.dropdown-menu .dropdown-item.text-danger:hover,
.userprofile .dropdown-item.text-danger:hover,
#top-nav .dropdown-item.text-danger:hover {
  background-color: color-mix(in oklch, var(--destructive) 14%, transparent) !important;
  color: var(--destructive) !important;
}

/* ============================================================
   38. Kosár újradizájn (Reference mockup matching)
   ============================================================ */
.wox-cart-badge {
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25em 0.6em;
  border-radius: 999px;
}
.wox-cart-merchant-name {
  font-size: 0.85rem;
  font-weight: 500;
}
.wox-cart-clear-btn {
  color: var(--muted-foreground) !important;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none !important;
  transition: color 0.15s ease;
}
.wox-cart-clear-btn i,
.wox-cart-clear-btn .zmdi {
  color: var(--muted-foreground) !important;
}
.wox-cart-clear-btn:hover,
.wox-cart-clear-btn:hover i,
.wox-cart-clear-btn:hover .zmdi {
  color: #ef4444 !important;
}
.wox-cart-item-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 0.85rem 1rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wox-cart-item-card:hover {
  border-color: color-mix(in oklch, var(--primary) 40%, var(--border));
}
.wox-cart-item-title {
  font-weight: 700;
  color: var(--foreground);
  font-size: 0.95rem;
  line-height: 1.3;
}
.wox-cart-item-remove-btn {
  color: var(--muted-foreground) !important;
  font-size: 1.1rem;
  padding: 2px 4px;
  border-radius: 6px;
  line-height: 1;
  transition: color 0.15s ease, background 0.15s ease;
}
.wox-cart-item-remove-btn i,
.wox-cart-item-remove-btn .zmdi {
  color: var(--muted-foreground) !important;
}
.wox-cart-item-remove-btn:hover {
  color: #ef4444 !important;
  background: color-mix(in oklch, #ef4444 12%, transparent);
}
.wox-cart-item-remove-btn:hover i,
.wox-cart-item-remove-btn:hover .zmdi {
  color: #ef4444 !important;
}
.wox-cart-qty-stepper {
  background: var(--secondary);
  border-radius: 999px;
  padding: 2px 6px;
  gap: 6px;
  display: inline-flex;
  align-items: center;
}
.wox-cart-qty-btn {
  background: transparent;
  border: none;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--foreground);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.wox-cart-qty-btn i,
.wox-cart-qty-btn .zmdi {
  color: var(--foreground) !important;
  font-size: 0.9rem;
  line-height: 1;
}
.wox-cart-qty-btn:hover {
  background: var(--background);
  color: var(--primary-strong) !important;
  box-shadow: var(--shadow-sm);
}
.wox-cart-qty-btn:hover i,
.wox-cart-qty-btn:hover .zmdi {
  color: var(--primary-strong) !important;
}
.wox-cart-qty-val {
  font-weight: 700;
  font-size: 0.9rem;
  min-width: 18px;
  text-align: center;
  color: var(--foreground);
}
.wox-cart-item-total {
  font-size: 1rem;
  color: var(--foreground);
}
.wox-cart-summary-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}
.wox-cart-total-row {
  border-top-color: var(--border) !important;
}
.wox-checkout-btn {
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
  border: none !important;
  border-radius: var(--radius-xl) !important;
  padding: 0.85rem 1.25rem !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease !important;
}
.wox-checkout-btn:hover {
  transform: translateY(-1px);
  filter: brightness(0.96);
  box-shadow: var(--shadow-md) !important;
  color: var(--primary-foreground) !important;
}

/* Flex gap utility helpers for Bootstrap 4 */
.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }

/* ============================================================
   39. ZÁRVA BADGE - étterem kártyán
   ============================================================ */
.wox-closed-badge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  pointer-events: none;
}
.wox-closed-badge__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(0,0,0,0.72);
  color: #fff;
  font-weight: 800;
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 12px rgba(0,0,0,0.35);
  text-transform: uppercase;
}
.wox-closed-badge__pill .zmdi {
  font-size: 1rem;
  color: #ff6b6b;
}
/* next_opening felirat a kártya bodyjában */
.wox-card__body .wox-next-opening {
  font-size: 0.78rem;
  color: var(--primary-strong);
  font-weight: 600;
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.wox-card__body .wox-next-opening .zmdi { font-size: 0.9rem; }

/* ============================================================
   39b. SZÜNETEL BADGE - étterem kártyán (store is too busy)
   ============================================================ */
.wox-paused-badge {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  z-index: 6;
  pointer-events: none;
}
.wox-paused-badge__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: color-mix(in oklch, var(--card) 88%, transparent);
  color: var(--primary-strong);
  font-weight: 800;
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  border: 1.5px solid color-mix(in oklch, var(--primary) 35%, transparent);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-md);
  text-transform: uppercase;
}
.wox-paused-badge__pill .zmdi {
  font-size: 1.1rem;
  color: var(--primary);
}
.wox-paused-badge__reason {
  display: inline-block;
  background: color-mix(in oklch, var(--card) 75%, transparent);
  color: var(--foreground);
  font-weight: 600;
  font-size: 0.78rem;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-sm);
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow-sm);
  max-width: 85%;
  text-align: center;
}

/* ============================================================
   40. DRAWER PREVIEW CART (Oldalsó felugró kosár)
   ============================================================ */
.drawer-preview-cart,
.el-drawer.drawer-preview-cart,
.el-drawer.wox-drawer-cart {
  background: var(--card) !important;
  color: var(--foreground) !important;
  box-shadow: -4px 0 24px rgba(0,0,0,0.4) !important;
  max-width: min(380px, 100vw) !important;
  width: min(380px, 100vw) !important;
}
.drawer-preview-cart .el-drawer__header {
  margin-bottom: 0 !important;
  padding: 1rem 1.25rem 0.5rem 1.25rem !important;
  color: var(--foreground) !important;
  border-bottom: 1px solid var(--border) !important;
}
.drawer-preview-cart .el-drawer__header .el-drawer__title {
  color: var(--foreground) !important;
  font-weight: 700 !important;
}
.drawer-preview-cart .el-drawer__close-btn {
  color: var(--muted-foreground) !important;
  font-size: 1.2rem !important;
}
.drawer-preview-cart .el-drawer__close-btn:hover {
  color: var(--foreground) !important;
}
.drawer-preview-cart .el-drawer__body {
  padding: 1.25rem !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--card) !important;
  overflow: hidden !important;
}
.drawer-preview-cart .section-cart {
  flex: 1;
  overflow-y: auto;
  padding-right: 2px;
}
.drawer-preview-cart .wox-cart-item-options {
  line-height: 1.4;
  word-break: break-word;
  white-space: pre-line;
}

/* --------------------------------------------------------------------------
   Mobil: View order gomb + kosár fiók + checkout borravaló
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  /* el-affix a menüoszlop közepére számolja a left-et — a gombot a viewport aljához kötjük */
  .el-affix:has(.floating-cart) {
    margin-top: 24px;
    margin-bottom: 28px;
  }
  .el-affix:has(.floating-cart) .el-affix--fixed {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    transform: none !important;
  }
  #vue-merchant-menu {
    padding-bottom: 16px;
  }
  .section-menu {
    padding-bottom: 8px;
  }
  #section-about {
    margin-top: 8px;
    padding-top: 8px;
  }
  .floating-cart {
    width: 100%;
  }
  .floating-cart button.btn {
    width: 100% !important;
    min-height: 52px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 10px 56px 10px 16px !important;
    border-radius: 999px !important;
    box-shadow: var(--shadow-lg);
  }
  .floating-cart h5 {
    display: none !important;
  }
  .floating-cart p {
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
    color: inherit !important;
  }
  .floating-cart count {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 800;
    font-size: 0.95rem;
    line-height: 1;
  }

  /* Kosár oldalsáv: 380px kilóg a telefonról */
  .el-drawer.drawer-preview-cart,
  .el-drawer.wox-drawer-cart,
  .drawer-preview-cart {
    width: 100% !important;
    max-width: 100vw !important;
  }
  .drawer-preview-cart .wox-checkout-btn,
  .drawer-preview-cart a.btn.wox-checkout-btn,
  .el-drawer.wox-drawer-cart a.btn.wox-checkout-btn,
  .drawer-preview-cart .section-cart .btn.w-100 {
    width: 100% !important;
    max-width: 100%;
    min-height: 56px !important;
    padding: 14px 20px !important;
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
    border-radius: 999px !important;
    box-shadow: var(--shadow-lg) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .page-grey .card,
  .page-grey .container {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Borravaló chip-sor: tördelhető, ne lógjon ki */
  #vue-tips .chevron-section {
    display: block !important;
    overflow: hidden;
    max-width: 100%;
  }
  #vue-tips .flexcol {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  #vue-tips .btn-group-toggle,
  #vue-tips .btn-group.btn-group-toggle {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100%;
    border-radius: 18px !important;
    gap: 6px !important;
  }
  #vue-tips .btn-group-toggle > .btn,
  #vue-tips .btn-group-toggle > label.btn {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
    padding: 0.6rem 0.45rem !important;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ==========================================================================
   40. ORDER TRACKING (Wox rendelesek / track page)
   order_place.php – kártya-alapú elrendezés (referencia design)
   ========================================================================== */
.wox-track {
  background: var(--background) !important;
  color: var(--foreground);
  min-height: calc(100vh - 80px);
  padding: 1.25rem 1rem 2.5rem !important;
}
.wox-track__inner {
  max-width: 72rem;
  margin: 0 auto;
}
.wox-track__page-head {
  margin-bottom: 1.25rem;
}
.wox-track__page-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.65rem;
  color: var(--foreground);
  margin: 0 0 0.25rem;
  line-height: 1.2;
}
.wox-track__page-sub {
  margin: 0.35rem 0 0;
}
.wox-track__order-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--primary-strong, #83ea00);
  background: color-mix(in oklch, var(--primary) 14%, transparent);
  border: 1px solid color-mix(in oklch, var(--primary) 28%, transparent);
  padding: 0.3rem 0.85rem;
  border-radius: 9999px;
  letter-spacing: 0.02em;
}

/* Mobile tabs */
.wox-track__tabs {
  display: flex;
  background: var(--muted);
  padding: 4px;
  border-radius: var(--radius-xl);
  margin-bottom: 1rem;
  gap: 4px;
}
.wox-track__tab {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--muted-foreground);
  font-weight: 800;
  font-size: 0.82rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.wox-track__tab.is-active {
  background: var(--card);
  color: var(--foreground);
  box-shadow: var(--shadow-sm);
}
.wox-track__tab:hover { color: var(--foreground); }

/* ════════════════════════════════════════════════════════════════════
   GRID + KÁRTYÁK (referencia design — ShadCN stílus)
   ════════════════════════════════════════════════════════════════════ */

/* Grid – két oszlop: bal kártyák, jobb térkép (minta: 1fr / 1.1fr @ 1024px) */
.wox-track__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: stretch;
}
@media (min-width: 1024px) {
  .wox-track__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  }
  .wox-track__tabs { display: none !important; }
}

/* Bal oszlop – kártyák függőlegesen */
.wox-track__col {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Térkép sticky */
.wox-track__map-sticky {
  position: relative;
}
@media (min-width: 1024px) {
  .wox-track__map-sticky {
    position: sticky;
    top: 2rem;
    align-self: start;
  }
}

/* ── Kártya (ShadCN card) ──────────────────────────────────────────────── */
.wox-track__card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) * 2.2);
  overflow: hidden;
}
.wox-track__card-header {
  padding: 1.5rem 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.wox-track__card-header.pb-0 { padding-bottom: 0; }
.wox-track__card-body {
  padding: 1.25rem 1.5rem;
}
.wox-track__card-body.pt-6 { padding-top: 1.5rem; }
.wox-track__card-body.pt-0 { padding-top: 0; }
.wox-track__card-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: color-mix(in oklch, var(--muted) 30%, transparent);
}
.wox-track__card-title-lg {
  font-size: clamp(1.35rem, 3vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  margin: 0;
  line-height: 1.2;
}
.wox-track__card-title-sm {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}
.wox-track__card-sub {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  margin: 0;
}

/* ── Status pill (badge) ──────────────────────────────────────────────── */
.wox-track__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.2rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 500;
  background: var(--secondary);
  color: var(--secondary-foreground, var(--foreground));
  border: 1px solid var(--border);
  align-self: flex-start;
}
.wox-track__pill.is-failed {
  background: color-mix(in oklch, var(--destructive) 15%, transparent);
  color: var(--destructive);
  border-color: color-mix(in oklch, var(--destructive) 30%, transparent);
}
.wox-track__pill-dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--muted-foreground);
  flex-shrink: 0;
}
.wox-track__status-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.wox-track__status-details {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  line-height: 1.625;
  margin: 0;
}

/* ── Horizontális timeline (referencia) ────────────────────────────────── */
/* Continuous connector: no rounded line ends + 1px overlap so segments
   never show a gap between steps. Nodes sit on top of the line. */
.wox-track__timeline {
  display: flex;
  align-items: flex-start;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  gap: 0;
}
.wox-track__tl-item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  position: relative;
}
.wox-track__tl-row {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0;
  position: relative;
}
.wox-track__tl-line {
  height: 2px;
  flex: 1 1 0;
  min-width: 0;
  /* Square ends — rounded caps leave a visible hole between segments */
  border-radius: 0;
  background: var(--border);
  transition: background 0.3s ease;
  /* Slight horizontal bleed so adjacent segments fully join */
  margin: 0 -1px;
}
.wox-track__tl-line.is-fill { background: var(--foreground); }
.wox-track__tl-line.is-hidden {
  opacity: 0;
  /* Keep layout space so nodes stay centered, but no visual gap issues */
  background: transparent;
  margin: 0;
}
.wox-track__tl-node {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--muted);
  color: var(--muted-foreground);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.875rem;
  transition: all 0.25s ease;
  /* Pull lines under the circle so the connector meets the node flush */
  position: relative;
  z-index: 1;
  margin: 0 -2px;
}
/* Ensure Material icon glyphs always paint (active step was often invisible) */
.wox-track__tl-node i,
.wox-track__tl-node .zmdi {
  display: inline-block !important;
  font-size: 1.05rem !important;
  line-height: 1 !important;
  width: auto !important;
  height: auto !important;
  color: inherit !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-style: normal !important;
  -webkit-font-smoothing: antialiased;
}
.wox-track__tl-item.done .wox-track__tl-node {
  border-color: var(--foreground);
  background: var(--foreground);
  color: var(--background) !important;
}
.wox-track__tl-item.done .wox-track__tl-node i {
  color: var(--background) !important;
}
/* Active step: filled node + ring so the icon is always readable */
.wox-track__tl-item.current .wox-track__tl-node {
  border-color: var(--foreground);
  background: var(--foreground);
  color: var(--background) !important;
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--foreground) 18%, transparent);
}
.wox-track__tl-item.current .wox-track__tl-node i {
  color: var(--background) !important;
}
.wox-track__timeline.is-failed .wox-track__tl-node {
  border-color: var(--destructive);
  background: var(--destructive);
  color: #fff !important;
}
.wox-track__timeline.is-complete .wox-track__tl-item .wox-track__tl-node {
  border-color: var(--foreground);
  background: var(--foreground);
  color: var(--background) !important;
  box-shadow: none;
}
.wox-track__tl-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted-foreground);
  text-align: center;
}
.wox-track__tl-label.is-active { color: var(--foreground); }
.wox-track__pill.is-complete {
  background: color-mix(in oklch, #22c55e 18%, transparent);
  color: #22c55e;
  border-color: color-mix(in oklch, #22c55e 35%, transparent);
}
.wox-track__pill.is-complete .wox-track__pill-dot {
  background: #22c55e;
}

/* ── Completed success panel (replaces map) ───────────────────────────── */
.wox-track__complete-panel {
  min-height: 320px;
  border-radius: calc(var(--radius) * 2.2);
  border: 1px solid var(--border);
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  box-shadow: var(--shadow-xl, 0 20px 40px rgba(0,0,0,0.25));
}
@media (min-width: 1024px) {
  .wox-track__complete-panel {
    min-height: 640px;
  }
}
.wox-track__complete-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
  max-width: 20rem;
}
.wox-track__complete-check {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: #22c55e;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.25rem;
  box-shadow: 0 0 0 8px color-mix(in oklch, #22c55e 22%, transparent);
  margin-bottom: 0.5rem;
}
.wox-track__complete-title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--foreground);
}
.wox-track__complete-text {
  margin: 0;
  font-size: 0.95rem;
  color: var(--muted-foreground);
  line-height: 1.5;
}
.wox-track__complete-cta {
  margin-top: 0.75rem;
  cursor: pointer;
}

/* ── Row helpers ───────────────────────────────────────────────────────── */
.wox-track__row {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.wox-track__row-sm {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.wox-track__flex-col {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.wox-track__flex-1 { flex: 1; min-width: 0; }
.wox-track__gap-2 { gap: 0.5rem; }
.wox-track__gap-3 { gap: 0.75rem; }

/* ── Merchant logo ──────────────────────────────────────────────────────── */
.wox-track__card .wox-track__merchant-logo {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: calc(var(--radius) * 2.2);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--muted);
  flex-shrink: 0;
}
.wox-track__card .wox-track__merchant-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Name, badge, address ───────────────────────────────────────────────── */
.wox-track__name {
  font-weight: 600;
  font-size: 1rem;
  color: var(--foreground);
  text-decoration: none;
  cursor: pointer;
}
.wox-track__name:hover { opacity: 0.8; }
.wox-track__badge-outline {
  display: inline-flex;
  padding: 0.2rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 500;
  border: 1px solid var(--border);
  color: var(--muted-foreground);
}
.wox-track__addr-line {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wox-track__addr-line i { flex-shrink: 0; font-size: 0.875rem; }

/* ── Icon button ────────────────────────────────────────────────────────── */
.wox-track__card .wox-track__icon-btn {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--foreground);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none !important;
  transition: opacity 0.15s ease;
  flex-shrink: 0;
}
.wox-track__card .wox-track__icon-btn:hover { opacity: 0.8; }
.wox-track__card .wox-track__icon-btn--soft {
  background: var(--secondary);
  color: var(--secondary-foreground, var(--foreground));
}

/* ── Button (ShadCN pill) ────────────────────────────────────────────────── */
.wox-track__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.4rem 0.875rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--foreground);
  cursor: pointer;
  transition: opacity 0.15s ease;
  text-decoration: none;
}
.wox-track__btn:hover { opacity: 0.8; }
.wox-track__btn--secondary {
  background: var(--secondary);
  color: var(--secondary-foreground, var(--foreground));
}
.wox-track__btn--flex { flex: 1; }

/* ── Avatar ─────────────────────────────────────────────────────────────── */
.wox-track__avatar-lg {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  overflow: hidden;
  background: var(--muted);
  flex-shrink: 0;
}
.wox-track__avatar-lg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Rating ─────────────────────────────────────────────────────────────── */
.wox-track__rating {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}
.wox-track__rating i { color: var(--foreground); font-size: 0.875rem; }

/* ── Vehicle ────────────────────────────────────────────────────────────── */
.wox-track__vehicle {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Driver placeholder ──────────────────────────────────────────────────── */
.wox-track__driver-placeholder-card { border-style: dashed; }
.wox-track__placeholder-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in oklch, var(--muted-foreground) 12%, transparent);
  color: var(--muted-foreground);
  font-size: 1.4rem;
  flex-shrink: 0;
  animation: wox-track-pulse 2.5s infinite;
}
.wox-track__placeholder-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--foreground);
  margin: 0;
}
.wox-track__placeholder-desc {
  font-size: 0.78rem;
  color: var(--muted-foreground);
  margin: 0.15rem 0 0;
  line-height: 1.35;
}

/* ── Loyalty card ────────────────────────────────────────────────────────── */
.wox-track__loyalty-card {
  background: color-mix(in oklch, var(--muted) 40%, var(--card)) !important;
}
.wox-track__sparkle-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--foreground);
  color: var(--background);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.25rem;
}
.wox-track__loyalty-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--foreground);
  margin: 0;
  line-height: 1.35;
}

/* ── Order details items ─────────────────────────────────────────────────── */
.wox-track__items-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.wox-track__item-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.wox-track__item-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  justify-content: space-between;
}
.wox-track__item-addons {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding-left: 2rem;
}
.wox-track__addon-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.785rem;
  color: var(--muted-foreground);
}
.wox-track__addon-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wox-track__addon-price {
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  font-weight: 500;
}
.wox-track__item-qty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.1rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 600;
  background: var(--secondary);
  color: var(--secondary-foreground, var(--foreground));
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.wox-track__item-name {
  color: var(--foreground);
  flex: 1;
  min-width: 0;
}
.wox-track__item-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  flex: 1;
}
.wox-track__item-price {
  color: var(--foreground);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  margin-left: 0.75rem;
}
.wox-track__separator {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0.25rem 0;
}
.wox-track__summary-rows {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.875rem;
}
.wox-track__summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--muted-foreground);
}
.wox-track__summary-row span:last-child {
  font-variant-numeric: tabular-nums;
}
.wox-track__total-label {
  font-weight: 600;
  font-size: 0.95rem;
}
.wox-track__total-value {
  font-size: 1.125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.wox-track__loyalty-sub {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  margin: 0.15rem 0 0;
  line-height: 1.35;
}
.wox-track__loyalty-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.75rem;
  padding: 0 0.625rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
  background: var(--secondary);
  color: var(--secondary-foreground, var(--foreground));
  border: 1px solid var(--border);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.wox-track__btn:disabled,
.wox-track__btn.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Driver review dialog ─────────────────────────────────────────────── */
.wox-driver-review__label {
  font-weight: 600;
  color: var(--foreground);
}
.wox-driver-review__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  max-width: 22rem;
  margin: 0 auto;
}
.wox-driver-review__chip {
  margin: 0 !important;
}
.wox-driver-review__textarea {
  max-width: 22rem;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
.wox-driver-review__submit {
  min-width: 12rem;
  font-weight: 600 !important;
}
/* Disabled submit must remain readable in dark mode (was white-on-white) */
.wox-driver-review-dialog .el-button.is-disabled,
.wox-driver-review-dialog .el-button.is-disabled:hover,
#footer-none-bg .el-button.is-disabled,
#footer-none-bg .el-button.is-disabled:hover {
  opacity: 1 !important;
  background: var(--muted, #3f3f46) !important;
  border-color: var(--border, #52525b) !important;
  color: var(--muted-foreground, #a1a1aa) !important;
  cursor: not-allowed !important;
}
.wox-driver-review-dialog .el-button--primary:not(.is-disabled),
#footer-none-bg .el-button--primary:not(.is-disabled) {
  color: var(--primary-foreground, #18181b) !important;
  font-weight: 700 !important;
}

/* ── Address card ────────────────────────────────────────────────────────── */
.wox-track__addr-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--muted);
  color: var(--muted-foreground);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.25rem;
}
.wox-track__addr-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted-foreground);
  margin: 0;
}
.wox-track__addr-main {
  font-weight: 600;
  color: var(--foreground);
  margin: 0;
}
.wox-track__addr-sub {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  margin: 0;
}

/* ── Link ────────────────────────────────────────────────────────────────── */
.wox-track__card .wox-track__link {
  color: var(--primary-strong, var(--foreground));
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  cursor: pointer;
}
.wox-track__card .wox-track__link:hover { text-decoration: underline; }
.wox-track__text-right { text-align: right; }

/* ── Map panel ───────────────────────────────────────────────────────────── */
.wox-track__card .wox-track__map-wrap,
.wox-track__map-sticky .wox-track__map-wrap {
  position: relative;
  border-radius: calc(var(--radius) * 2.2);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xl);
  background: #121212;
  min-height: 320px;
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .wox-track__map-sticky .wox-track__map-wrap {
    min-height: 640px;
    height: 100%;
  }
}
.wox-track__map-status {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 1rem;
  background: rgb(26 26 26 / 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgb(255 255 255 / 0.06);
}
.wox-track__map-status-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.wox-track__pulse {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--primary, #83ea00);
  flex-shrink: 0;
  animation: wox-track-pulse 2s infinite;
}
.wox-track__pulse.is-done {
  background: #22c55e;
  animation: none;
}
.wox-track__map-status-text {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wox-track__map-status-eta {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: #fff;
  font-weight: 500;
  font-size: 0.8125rem;
  flex-shrink: 0;
}
.wox-track__map-status-eta i { color: var(--primary, #83ea00); }
.wox-track__map-gps {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  z-index: 5;
}
.wox-track__map {
  flex: 1 1 auto;
  width: 100%;
  min-height: 320px;
  height: 100%;
}
@media (min-width: 1024px) {
  .wox-track__map { min-height: 640px; }
}

/* Track map height safety */
.wox-track #cmaps.wox-track__map {
  height: 100% !important;
  min-height: 320px !important;
}
@media (min-width: 1024px) {
  .wox-track #cmaps.wox-track__map { min-height: 640px !important; }
}
.wox-track .track-map-div,
.wox-track.container-fluid { height: auto; }

/* Light mode map status bar readability */
html:not(.dark) .wox-track__map-status {
  background: color-mix(in oklch, var(--card) 92%, transparent);
  border-bottom-color: var(--border);
}
html:not(.dark) .wox-track__map-status-text,
html:not(.dark) .wox-track__map-status-eta {
  color: var(--foreground);
}
html:not(.dark) .wox-track__map-wrap {
  background: var(--card);
}

/* ── Mobile responsive ──────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
  .wox-track {
    padding: 0.85rem 0.75rem 1.5rem !important;
  }
  .wox-track__card {
    border-radius: calc(var(--radius) * 1.8);
  }
  .wox-track__card-header { padding: 1.25rem 1.25rem 0; }
  .wox-track__card-body { padding: 1rem 1.25rem; }
  .wox-track__card-footer { padding: 0.85rem 1.25rem; }
  .wox-track__card .wox-track__merchant-logo { width: 3rem; height: 3rem; }
  .wox-track__avatar-lg { width: 3rem; height: 3rem; }
  .wox-track__tl-node { width: 2rem; height: 2rem; font-size: 0.75rem; }
  .wox-track__tl-label { font-size: 0.6875rem; }
  .wox-track__map-sticky .wox-track__map-wrap { min-height: 58vh; border-radius: calc(var(--radius) * 1.8); }
  .wox-track__map { min-height: 58vh; }
  .wox-track__map-status { padding: 0.7rem 0.85rem; }
  .wox-track__map-status-text { font-size: 0.75rem; }
  .wox-track__btn { padding: 0.35rem 0.75rem; font-size: 0.8125rem; }
}

/* ════════════════════════════════════════════════════════════════════
   END referencia design CSS
   ════════════════════════════════════════════════════════════════════ */

/* Legacy panel layout helpers (do NOT redeclare .wox-track__grid / horizontal timeline) */
@media (min-width: 992px) {
  .wox-track__panel.is-mobile-hidden,
  .wox-track__map-wrap.is-mobile-hidden {
    display: flex !important;
  }
}

/* Left panel card */
.wox-track__panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-3xl);
  box-shadow: var(--shadow-md);
  padding: 1.35rem 1.4rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}
@media (max-width: 991.98px) {
  .wox-track__panel.is-mobile-hidden { display: none !important; }
  /* Térkép mindig látszik mobilon (nincs fül a HTML-ben) */
  .wox-track__map-wrap,
  .wox-track__map-wrap.is-mobile-hidden,
  .wox-track__map-wrap:not(.is-mobile-visible) {
    display: flex !important;
    min-height: 52vh;
  }
  .wox-track__panel:not(.is-mobile-hidden) { display: flex; }
}

/* Merchant header */
.wox-track__merchant {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.wox-track__merchant > .items {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start !important;
  gap: 0.85rem;
}
.wox-track__merchant > .items > .wox-track__merchant-main {
  flex: 0 0 auto;
}
.wox-track__merchant > .items > .flex-fill {
  flex: 1 1 auto !important;
  min-width: 0;
}
.wox-track__merchant-main {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
  flex: 1;
}
.wox-track__merchant-logo {
  position: relative;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--muted);
}
.wox-track__merchant-logo img,
.wox-track__merchant-logo .lazy {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-2xl);
}
.wox-track__merchant-logo .skeleton-placeholder {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-2xl);
}
.wox-track__status-pill {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--primary-strong);
  background: color-mix(in oklch, var(--primary) 16%, transparent);
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  margin-bottom: 0.35rem;
}
.wox-track__status-pill.is-done {
  color: var(--primary-strong);
}
.wox-track__status-pill.is-failed {
  color: var(--destructive);
  background: color-mix(in oklch, var(--destructive) 14%, transparent);
}
.wox-track__merchant-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--foreground) !important;
  text-decoration: none !important;
  line-height: 1.25;
}
.wox-track__merchant-name:hover { color: var(--primary-strong) !important; }
.wox-track__cuisine .badge {
  font-size: 0.7rem;
  font-weight: 700;
  margin-top: 0.25rem;
}
.wox-track__eta {
  text-align: right;
  flex-shrink: 0;
}
.wox-track__eta-label {
  display: block;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted-foreground);
}
.wox-track__eta-value {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--foreground);
  margin-top: 0.15rem;
  font-variant-numeric: tabular-nums;
}
/* Legacy status block helpers (status-details is defined in the new card layout above) */
.wox-track__status-block {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-bottom: 0.25rem;
}
.wox-track__status-block .wox-track__eta-value {
  font-size: clamp(1.35rem, 3vw, 1.8rem);
  line-height: 1.15;
}

/* Address chip */
.wox-track__address-chip {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius-2xl);
  background: var(--muted);
  color: var(--muted-foreground);
  font-size: 0.88rem;
  font-weight: 600;
  min-width: 0;
}
.wox-track__address-chip i {
  color: var(--primary-strong);
  font-size: 1.15rem;
  flex-shrink: 0;
}

.wox-track__actions-row {
  display: flex;
  gap: 0.5rem;
}
.wox-track__cancel { margin-top: 0.15rem; }

/* Legacy icon-btn overrides only when NOT inside the new card layout */
.wox-track__panel .wox-track__icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--foreground);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none !important;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  flex-shrink: 0;
}
.wox-track__panel .wox-track__icon-btn:hover {
  background: var(--accent);
  color: var(--foreground);
  transform: scale(1.04);
  text-decoration: none !important;
}
.wox-track__panel .wox-track__icon-btn--soft {
  background: var(--muted);
  border-color: transparent;
}
.wox-track__panel .wox-track__icon-btn--primary {
  background: var(--primary) !important;
  border-color: transparent !important;
  color: var(--primary-foreground) !important;
  box-shadow: var(--shadow-sm);
}
.wox-track__panel .wox-track__icon-btn--primary:hover {
  filter: brightness(0.96);
  color: var(--primary-foreground) !important;
}
.wox-track__panel .wox-track__icon-btn i { font-size: 1.15rem; line-height: 1; }

/* Vertical step timeline (legacy .wox-track__step only — do NOT override horizontal .wox-track__timeline) */
.wox-track__step {
  display: flex;
  gap: 0.75rem;
  position: relative;
}
.wox-track__step-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: var(--muted);
  color: var(--muted-foreground);
  z-index: 1;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.wox-track__step-dot i {
  font-size: 0.85rem;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.wox-track__step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 28px;
  bottom: 0;
  width: 2px;
  background: var(--border);
  z-index: 0;
}
.wox-track__step.active .wox-track__step-dot {
  background: var(--primary);
  color: var(--primary-foreground);
}
.wox-track__step.active .wox-track__step-dot i { opacity: 1; }
.wox-track__step.active:not(:last-child)::after {
  background: var(--primary);
}
.wox-track__step.progressing .wox-track__step-dot {
  animation: wox-track-pulse 2s infinite;
}
.wox-track__step.order_failed .wox-track__step-dot {
  background: var(--destructive);
  color: #fff;
}
.wox-track__step.order_failed:not(:last-child)::after {
  background: var(--destructive);
}
@keyframes wox-track-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--primary) 45%, transparent); }
  70% { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.wox-track__step-body {
  padding-bottom: 1.15rem;
  min-width: 0;
  flex: 1;
}
.wox-track__step:last-child .wox-track__step-body { padding-bottom: 0; }
.wox-track__step-label {
  margin: 0 0 0.15rem;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--muted-foreground);
  line-height: 1.3;
}
.wox-track__step.active .wox-track__step-label { color: var(--foreground); }
.wox-track__step-desc {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted-foreground);
  line-height: 1.35;
}

/* Content blocks */
.wox-track__block {
  padding: 0.85rem 0 0;
  border-top: 1px solid var(--border);
}
.wox-track__block h6 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--foreground);
  margin: 0 0 0.35rem;
  text-transform: none;
}
.wox-track__block p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--muted-foreground);
  line-height: 1.4;
}
.wox-track__link {
  color: var(--primary-strong) !important;
  font-weight: 800;
  font-size: 0.88rem;
  text-decoration: none !important;
  cursor: pointer;
}
.wox-track__link:hover { filter: brightness(1.08); text-decoration: underline !important; }

/* Driver */
.wox-track__driver {
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  padding: 0.85rem 1rem;
  background: color-mix(in oklch, var(--muted) 40%, var(--card));
}
.wox-track__driver-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.wox-track__driver-meta { flex: 1; min-width: 0; }
.wox-track__driver-meta h6 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--foreground);
}
.wox-track__driver-rating {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  font-weight: 700;
  white-space: nowrap;
}
.wox-track__driver-rating i { color: #f5b301; }
.wox-track__driver-car {
  font-size: 0.78rem;
  color: var(--muted-foreground);
  margin-top: 0.15rem;
}
.wox-track__driver-actions {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
}

.wox-track__merchant-chat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.wox-track__merchant-name-sm {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--foreground) !important;
  text-decoration: none !important;
}
.wox-track__merchant-name-sm:hover { color: var(--primary-strong) !important; }

/* Earned Points Card */
.wox-track__points-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.1rem;
  border-radius: var(--radius-2xl);
  background: color-mix(in oklch, #83ea00 10%, var(--card));
  border: 1px solid color-mix(in oklch, #83ea00 22%, transparent);
}
.wox-track__points-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: color-mix(in oklch, #83ea00 18%, transparent);
  color: #83ea00;
  font-size: 1.25rem;
}
.wox-track__points-body { min-width: 0; }
.wox-track__points-label {
  display: block;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--primary-strong, #83ea00);
  margin-bottom: 0.2rem;
}
.wox-track__points-text {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--foreground);
  line-height: 1.35;
}

/* Driver Assignment Placeholder */
.wox-track__driver-placeholder {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.1rem;
  border-radius: var(--radius-2xl);
  background: var(--muted);
  border: 1px dashed var(--border);
}
.wox-track__driver-placeholder-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: color-mix(in oklch, var(--muted-foreground) 12%, transparent);
  color: var(--muted-foreground);
  font-size: 1.4rem;
  animation: wox-track-pulse 2.5s infinite;
}
.wox-track__driver-placeholder-title {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--foreground);
}
.wox-track__driver-placeholder-desc {
  margin: 0.15rem 0 0;
  font-size: 0.78rem;
  color: var(--muted-foreground);
  line-height: 1.35;
}

/* Collapsible Order Summary */
.wox-track__receipt {
  background: var(--muted);
  border-radius: var(--radius-2xl);
  margin-top: auto;
  overflow: hidden;
}
.wox-track__receipt-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.1rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.wox-track__receipt-toggle::-webkit-details-marker { display: none; }
.wox-track__receipt-toggle::marker { display: none; content: ""; }
.wox-track__receipt-toggle-left { min-width: 0; }
.wox-track__receipt-title {
  margin: 0 0 0.2rem;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted-foreground);
}
.wox-track__receipt-id {
  margin: 0;
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--foreground);
}
.wox-track__receipt-chevron {
  flex-shrink: 0;
  font-size: 1.15rem;
  color: var(--muted-foreground);
  transition: transform 0.25s ease;
}
.wox-track__receipt[open] .wox-track__receipt-chevron {
  transform: rotate(180deg);
}
.wox-track__receipt-body {
  padding: 0 1.1rem 1rem;
  border-top: 1px solid var(--border);
}
.wox-track__receipt-items-count {
  margin: 0.65rem 0 0.2rem;
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--foreground);
}
.wox-track__receipt-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.wox-track__receipt-list li {
  font-size: 0.82rem;
  color: var(--muted-foreground);
  line-height: 1.35;
}
.wox-track__receipt-item .font-weight-bold { color: var(--foreground); }
.wox-track__receipt-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--foreground);
}

/* Map panel */
.wox-track__map-wrap {
  position: relative;
  border-radius: var(--radius-3xl);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xl);
  background: #121212;
  min-height: 380px;
  display: flex;
  flex-direction: column;
}
@media (min-width: 992px) {
  .wox-track__map-wrap {
    min-height: 520px;
    height: 100%;
  }
}
.wox-track__map-status {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1.15rem;
  background: rgb(26 26 26 / 0.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgb(255 255 255 / 0.06);
}
.wox-track__map-status-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.wox-track__pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
  animation: wox-track-pulse 2s infinite;
}
.wox-track__pulse.is-done {
  background: #22c55e;
  animation: none;
}
.wox-track__map-status-text {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wox-track__map-status-eta {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: #fff;
  font-weight: 800;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.wox-track__map-status-eta i { color: var(--primary); font-size: 1rem; }
.wox-track__map-gps {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  z-index: 5;
}
.wox-track__map {
  flex: 1 1 auto;
  width: 100%;
  min-height: 380px;
  height: 100%;
}
.wox-track__map-wrap .position-bottom {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 6;
}
.wox-track__progress-block {
  padding: 0.5rem 0 0.25rem;
}
.wox-track__stepper {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}
.wox-track__stepper.is-three-step { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wox-track__stepper-item {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
}
.wox-track__stepper-item:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 15px;
  left: calc(50% + 15px);
  width: calc(100% - 30px);
  height: 3px;
  border-radius: 999px;
  background: var(--border);
  transition: background 0.35s ease;
}
.wox-track__stepper-item.active:not(:last-child)::after { background: var(--primary); }
.wox-track__stepper-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--muted-foreground);
  box-shadow: var(--shadow-sm);
  transition: all 0.25s ease;
}
.wox-track__stepper-item.active { color: var(--foreground); }
.wox-track__stepper-item.active .wox-track__stepper-icon { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.wox-track__stepper-item.progressing .wox-track__stepper-icon { animation: wox-track-pulse 1.8s infinite; }
.wox-track__stepper.is-failed .wox-track__stepper-icon { background: var(--destructive); border-color: var(--destructive); color: #fff; }
.wox-track__merchant-title-row { display: flex; align-items: center; gap: 0.45rem; min-width: 0; }
.wox-track__direction-btn { width: 32px; height: 32px; flex: 0 0 32px; }
.wox-track__direction-btn i { font-size: 1rem; }
/* Message button badge/buzz: see chat section below (#wox-track-open-chat-driver) */
.wox-track__progress-block #progressbar {
  margin: 0;
  color: var(--muted-foreground);
}
.wox-track__progress-block #progressbar li {
  color: var(--muted-foreground);
}
@media (max-width: 575.98px) {
  .wox-track {
    padding: 0.85rem 0.75rem 1.5rem !important;
  }
  .wox-track__panel {
    padding: 1rem;
    border-radius: var(--radius-2xl);
  }
  .wox-track__merchant {
    gap: 0.5rem;
  }
  .wox-track__merchant-logo {
    width: 52px;
    height: 52px;
  }
  .wox-track__merchant-main {
    gap: 0.6rem;
  }
  .wox-track__map-wrap {
    min-height: 58vh;
    border-radius: var(--radius-2xl);
  }
  .wox-track__map {
    min-height: 58vh;
  }
  .wox-track__map-status {
    padding: 0.7rem 0.85rem;
  }
  .wox-track__map-status-text {
    font-size: 0.65rem;
  }
  .wox-track__map-status-eta {
    font-size: 0.75rem;
  }
}
@media (min-width: 992px) {
  .wox-track__map { min-height: 520px; }
}

/* Light mode map status bar readability */
html:not(.dark) .wox-track__map-status {
  background: color-mix(in oklch, var(--card) 92%, transparent);
  border-bottom-color: var(--border);
}
html:not(.dark) .wox-track__map-status-text,
html:not(.dark) .wox-track__map-status-eta {
  color: var(--foreground);
}
html:not(.dark) .wox-track__map-wrap {
  background: var(--card);
}

/* ==========================================================================
   ORIGINAL MVP PROGRESSBAR & TRACK MAP STYLES (from original_web/karenderia_v2)
   ========================================================================== */
#progressbar {
    color: #455A64;
    padding-left: 0px;
    margin-left: -20px;
}
#progressbar li {
    list-style-type: none;
    font-size: 13px;
    width: 25%;
    float: left;
    position: relative;
    font-weight: 400;
}
#progressbar.three-column li{
    width: 33%;
}
#progressbar .step-order:before {
    font-family: Material-Design-Iconic-Font;
    content: "\f2ee";
    color: #fff;
}
#progressbar .step-home:before {
    font-family: Material-Design-Iconic-Font;
    content: "\f175";
    color: #fff;
}
#progressbar.three-column .step-home:before{
  content: '\f1c9';
}
#progressbar .step-merchant:before {
    font-family: Material-Design-Iconic-Font;
    content: "\f153";
    color: #fff;
}
#progressbar .step-car:before {
    font-family: Material-Design-Iconic-Font;
    content: "\f125";
    color: #fff;
}
#progressbar li:before {
    width: 20px;
    height: 20px;
    line-height: 21px;
    display: block;
    font-size: 14px;
    background: #b2b2b2;
    border-radius: 50%;
    margin: auto;
    padding: 0px;
}
#progressbar li:after {
    content: '';
    width: 100%;
    height: 5px;
    background: #b2b2b2;
    position: absolute;
    left: 0;
    top: 8px;
    z-index: -2;
}
#progressbar li:last-child:after {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    position: absolute;
    left: -50%;
}
#progressbar li:nth-child(2):after,
#progressbar li:nth-child(3):after {
    left: -50%;
}
#progressbar li:first-child:after {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    position: absolute;
    left: 50%;
}
#progressbar li.active:before,
#progressbar li.active:after {
    background: #3ecf8e;
}
#progressbar li.progressing:before{
  animation: pulse-green 2s infinite;
}
@keyframes pulse-green {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(51, 217, 178, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(51, 217, 178, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(51, 217, 178, 0);
  }
}
#progressbar li.order_failed:before,
#progressbar li.order_failed:after {
    background: rgba(255, 82, 82, 1);
    box-shadow: 0 0 0 0 rgba(255, 82, 82, 1);
}
.progressing .progress-value{
    background: #3ecf8e;
    width: 50%;
    height: 5px;
    animation: borealisBar 1s linear infinite;
    position: absolute;
    left: 50%;
    top: 8px;
    z-index: -1;
    margin-left: 50%;
}
@keyframes borealisBar {
   0% {
    left: 0%;
    right: 100%;
    width: 0%;
  }
  10% {
    left: 0%;
    right: 75%;
    width: 40%;
  }
  90% {
    right: 0%;
    left: 75%;
    width: 40%;
  }
  100% {
    left: 100%;
    right: 0%;
    width: 0%;
  }
}

/* MVP Track Map styles */
.page-grey{
    background: #f6f7f8;
    padding-top: 20px;
    padding-bottom: 20px;
}
.map-fullscreen{
    width: 100%;
    height: 100%;
}
.track-map-div{
    position: relative;
}
.position-bottom{
    position: absolute;
    bottom: 40px;
    right: 20px;
    z-index: 9;
}
@media (max-width: 991.98px) {
    .track-map-div{
        height: calc(100vw * (9/16));
    }
}
@media (min-width: 992px) {
    .track-map-div{
        height: auto;
    }
}

/* Track map height safety (Google/Mapbox needs explicit size) */
.wox-track #cmaps.wox-track__map,
.wox-track .wox-track__map#cmaps {
  height: 100% !important;
  min-height: 380px !important;
}
@media (min-width: 992px) {
  .wox-track #cmaps.wox-track__map {
    min-height: 520px !important;
  }
}
@media (max-width: 991.98px) {
  .wox-track__map-wrap,
  .wox-track__map-wrap.is-mobile-visible {
    display: flex !important;
    min-height: 52vh;
  }
  .wox-track__map-wrap .wox-track__map,
  .wox-track__map-wrap.is-mobile-visible .wox-track__map {
    min-height: 52vh !important;
    height: 52vh !important;
  }
}
/* Legacy track-map-div rules ne írják felül a Wox track magasságot */
.wox-track .track-map-div,
.wox-track.container-fluid {
  height: auto;
}

/* ---- Track: customer address card + map pins ---- */
.wox-track__address-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border-radius: var(--radius-2xl);
  background: var(--muted);
  border: 1px solid var(--border);
}
.wox-track__address-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: color-mix(in oklch, #ff4a00 18%, transparent);
  color: #ff4a00;
  font-size: 1.25rem;
}
.wox-track__address-card-icon--merchant {
  background: color-mix(in oklch, var(--primary) 18%, transparent);
  color: var(--primary-strong);
}
.wox-track__address-card-label {
  display: block;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
  margin-bottom: 0.25rem;
}
.wox-track__address-card-text {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--foreground);
  line-height: 1.35;
  word-break: break-word;
}
.wox-track__address-card-sub {
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
  color: var(--muted-foreground);
  font-weight: 600;
  line-height: 1.3;
}

/* Mapbox track pins:
   merchant → wox-pin-merchant.svg (Teardrop, 40x50px, anchor: bottom)
   customer → wox-pin-customer.svg (Teardrop, 40x50px, anchor: bottom)
   rider    → wox-pin-rider.svg (Circular WOX badge, 40x40px, anchor: center)
   Override style.css restaurant-icon / home-icon defaults. */
.marker_icon_merchant,
.wox-track .marker_icon_merchant,
.marker_icon_destination,
.wox-track .marker_icon_destination {
  width: 40px !important;
  height: 50px !important;
  min-width: 40px !important;
  min-height: 50px !important;
  background-color: transparent !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center bottom !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
  /* Never paint extra layers */
  overflow: visible !important;
}
.marker_icon_rider,
.wox-track .marker_icon_rider {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  background-color: transparent !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
  /* Never paint extra layers */
  overflow: visible !important;
}
.marker_icon_merchant,
.wox-track .marker_icon_merchant {
  background-image: url("../images/wox-pin-merchant.svg") !important;
}
.marker_icon_destination,
.wox-track .marker_icon_destination {
  background-image: url("../images/wox-pin-customer.svg") !important;
}
.marker_icon_rider,
.wox-track .marker_icon_rider {
  background-image: url("../images/wox-pin-rider.svg") !important;
}
.marker_icon_merchant::before,
.marker_icon_merchant::after,
.marker_icon_destination::before,
.marker_icon_destination::after,
.marker_icon_rider::before,
.marker_icon_rider::after,
.wox-track .marker_icon_merchant::before,
.wox-track .marker_icon_merchant::after,
.wox-track .marker_icon_destination::before,
.wox-track .marker_icon_destination::after,
.wox-track .marker_icon_rider::before,
.wox-track .marker_icon_rider::after {
  display: none !important;
  content: none !important;
  background: none !important;
  animation: none !important;
}
@keyframes wox-rider-pulse {
  0%   { transform: scale(0.6); opacity: 0.8; }
  70%  { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* =============================================================================
   40.x  FLOATING CHAT MODAL  (bottom-right overlay on the Track Order page)
   - Replaces the old inline collapsible panel.
   - Customer messages -> right (primary bubble); driver messages -> left (muted).
   - Real-time via Firestore; unread badge mirrors to the driver-strip button.
   ============================================================================= */

/* =============================================================================
   40.x  PREMIUM SHADCN FINTECH CHAT MODAL (Track Order page)
   ============================================================================= */

.wox-track__chat-overlay {
  position: fixed;
  inset: 0;
  z-index: 1050;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.wox-track__chat-overlay.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Center Card Modal on Desktop (shadcn Dialog style) */
.wox-track__chat-overlay .wox-track__chat {
  position: relative !important;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  height: 620px;
  max-height: calc(100vh - 4rem);
  border-radius: 22px !important;
  background: #121215 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 30px 70px -10px rgba(0, 0, 0, 0.85), 0 0 35px rgba(0, 0, 0, 0.6) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transform: scale(1) translateY(0);
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}

.wox-track__chat-overlay .wox-track__chat.is-collapsed {
  opacity: 0;
  transform: scale(0.94) translateY(16px);
  pointer-events: none;
}

/* Drag / Pull handle for Mobile */
.wox-track__chat-handle {
  display: none;
  width: 40px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  margin: 10px auto 4px auto;
  flex-shrink: 0;
}

/* Native Mobile Bottom Sheet (Android App style) */
@media (max-width: 639.98px) {
  .wox-track__chat-overlay {
    padding: 0 !important;
    align-items: flex-end !important;
    justify-content: center !important;
  }
  .wox-track__chat-handle {
    display: block;
  }
  .wox-track__chat-overlay .wox-track__chat {
    max-width: 100% !important;
    width: 100% !important;
    height: 85vh !important;
    max-height: 88vh !important;
    border-radius: 24px 24px 0 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    transform: translateY(0);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
  }
  .wox-track__chat-overlay .wox-track__chat.is-collapsed {
    opacity: 0;
    transform: translateY(100%) !important;
    pointer-events: none;
  }
}

/* Chat Header */
.wox-track__chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: #18181c;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}
.wox-track__chat-header-main {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
  flex: 1;
}
.wox-track__chat-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: #27272a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wox-track__chat-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wox-track__chat-avatar-fallback {
  font-weight: 700;
  font-size: 1rem;
  color: #a1a1aa;
}
.wox-track__chat-header-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.wox-track__chat-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: #f4f4f5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wox-track__chat-subtitle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: #a1a1aa;
}
.wox-track__chat-online-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
  flex-shrink: 0;
}

/* Close Button */
.wox-track__chat-close {
  position: static !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #f4f4f5 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
}
.wox-track__chat-close:hover {
  background: rgba(239, 68, 68, 0.2) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  color: #ef4444 !important;
  transform: rotate(90deg);
}
.wox-track__chat-close-x {
  font-size: 1.3rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
}

/* Warning notice banner */
.wox-track__chat-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(245, 158, 11, 0.1);
  border-bottom: 1px solid rgba(245, 158, 11, 0.2);
  font-size: 0.76rem;
  line-height: 1.4;
  color: #fbbf24;
  flex-shrink: 0;
}
.wox-track__chat-warning-icon {
  font-size: 1.15rem;
  line-height: 1;
  color: #f59e0b;
  flex-shrink: 0;
  margin-top: 1px;
}
.wox-track__chat-warning-text strong {
  display: block;
  font-weight: 700;
  color: #fef08a;
  margin-bottom: 2px;
}

/* Chat Body & Message Feed */
.wox-track__chat-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  overflow: hidden;
  padding: 1rem;
  gap: 0.75rem;
  background: #121215;
}

.wox-track__chat-messages {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0.5rem 0.25rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}
.wox-track__chat-messages::-webkit-scrollbar { width: 5px; }
.wox-track__chat-messages::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 5px;
}

.wox-track__chat-empty {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: #71717a;
  font-size: 0.85rem;
  text-align: center;
  padding: 2rem 1rem;
}
.wox-track__chat-empty-icon {
  font-size: 2rem;
  color: #52525b;
}

/* Individual Message Layout */
.wox-track__msg {
  display: flex;
  gap: 0.6rem;
  align-items: flex-end;
  max-width: 82%;
  animation: wox-msg-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.wox-track__msg--mine {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.wox-track__msg--theirs {
  align-self: flex-start;
  flex-direction: row;
}

@keyframes wox-msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Strictly sizing avatar to avoid giant blowups */
.wox-track__msg-avatar,
img.wox-track__msg-avatar,
span.wox-track__msg-avatar {
  flex: 0 0 28px !important;
  width: 28px !important;
  height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  background: #27272a !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: #a1a1aa !important;
}

/* Message Bubble */
.wox-track__msg-bubble {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.65rem 0.9rem;
  border-radius: 16px;
  font-size: 0.88rem;
  line-height: 1.4;
  word-break: break-word;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Customer message: Pure Clean Off-White with deep black text */
.wox-track__msg--mine .wox-track__msg-bubble {
  background: #f4f4f5 !important;
  color: #09090b !important;
  border-bottom-right-radius: 4px;
}
.wox-track__msg--mine .wox-track__msg-name {
  color: #52525b !important;
}
.wox-track__msg--mine .wox-track__msg-time {
  color: #71717a !important;
}

/* Restaurant / Driver message: Deep charcoal card with crisp white text */
.wox-track__msg--theirs .wox-track__msg-bubble {
  background: #27272a !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-bottom-left-radius: 4px;
}
.wox-track__msg--theirs .wox-track__msg-name {
  color: #a1a1aa !important;
}
.wox-track__msg--theirs .wox-track__msg-time {
  color: #71717a !important;
}

.wox-track__msg-name {
  font-weight: 700;
  font-size: 0.72rem;
}
.wox-track__msg-text {
  white-space: pre-wrap;
  font-weight: 400;
}
.wox-track__msg-time {
  font-size: 0.66rem;
  font-weight: 500;
  align-self: flex-end;
  margin-top: 0.1rem;
}

.wox-track__msg-image img,
.wox-track__msg-image {
  display: block;
  max-width: 180px;
  max-height: 140px;
  border-radius: 8px;
  margin-top: 0.25rem;
  object-fit: cover;
}
.wox-track__msg-audio { width: 220px; max-width: 100%; height: 32px; }

/* Quick Replies Chips */
.wox-track__chat-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.4rem 0;
  flex-shrink: 0;
}
.wox-track__chat-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.75rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: #e4e4e7;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.wox-track__chat-chip:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

/* Chat Input & Send Form */
.wox-track__chat-form {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  width: 100%;
  flex-shrink: 0;
}
.wox-track__chat-input,
#wox-track-chat-overlay .wox-track__chat-input,
#wox-track-chat .wox-track__chat-input {
  flex: 1 1 auto;
  height: 44px;
  padding: 0 1rem;
  border-radius: 12px !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: #18181c !important;
  color: #ffffff !important;
  font-size: 0.88rem;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.wox-track__chat-input:focus,
#wox-track-chat-overlay .wox-track__chat-input:focus,
#wox-track-chat .wox-track__chat-input:focus {
  border-color: #f4f4f5 !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15) !important;
}

.wox-track__chat-send,
#wox-track-chat-overlay .wox-track__chat-send,
#wox-track-chat .wox-track__chat-send {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none !important;
  border-radius: 12px !important;
  background: #f4f4f5 !important;
  color: #09090b !important;
  font-size: 1.15rem;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.wox-track__chat-send:hover:not(:disabled) {
  transform: scale(1.04);
  background: #ffffff !important;
}
.wox-track__chat-send:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Unread badge — larger, high-contrast (Message button + chat header) */
.wox-track__chat-badge {
  display: inline-flex;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--destructive, #ef4444);
  color: #fff !important;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  border: 2px solid var(--card, #18181b);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  transform: scale(0);
  transition: transform 0.18s ease;
  z-index: 2;
}
.wox-track__chat-badge.has-unread { transform: scale(1); }
.wox-track__chat-badge:empty { display: none; }

/* Message button badge placement */
#wox-track-open-chat-driver,
#wox-track-open-chat-merchant,
#wox-track-open-chat {
  position: relative;
  overflow: visible;
}
#wox-track-open-chat-driver .wox-track__chat-badge,
#wox-track-open-chat-merchant .wox-track__chat-badge,
#wox-track-open-chat .wox-track__chat-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 22px;
  height: 22px;
  font-size: 0.75rem;
  padding: 0 6px;
  background: #ef4444 !important;
  color: #ffffff !important;
  border: 2px solid #121215 !important;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.6) !important;
}

/* Buzz when driver or restaurant wrote and customer has not opened chat */
@keyframes wox-msg-buzz {
  0%, 60%, 100% { transform: translateX(0) scale(1); }
  66% { transform: translateX(-3px) rotate(-1.5deg) scale(1.03); }
  72% { transform: translateX(3px) rotate(1.5deg) scale(1.03); }
  78% { transform: translateX(-2px) rotate(-0.8deg) scale(1.02); }
  84% { transform: translateX(2px) scale(1.01); }
  90% { transform: translateX(0) scale(1); }
}
@keyframes wox-msg-buzz-glow {
  0%, 60%, 100% { box-shadow: 0 0 0 0 transparent; }
  72% { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.35); }
  90% { box-shadow: 0 0 0 0 transparent; }
}
#wox-track-open-chat-driver.has-unread-buzz,
#wox-track-open-chat-merchant.has-unread-buzz,
#wox-track-open-chat.has-unread-buzz {
  animation:
    wox-msg-buzz 2s ease-in-out infinite,
    wox-msg-buzz-glow 2s ease-in-out infinite !important;
  border-color: rgba(239, 68, 68, 0.5) !important;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  #wox-track-open-chat-driver.has-unread-buzz,
  #wox-track-open-chat-merchant.has-unread-buzz,
  #wox-track-open-chat.has-unread-buzz {
    animation: none !important;
    outline: 2px solid #ef4444 !important;
  }
}

/* Connection status dot inside chat header */
.wox-track__chat-status {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-left: 0.35rem;
  flex-shrink: 0;
}
.wox-track__chat-status--connected {
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
}
.wox-track__chat-status--connecting {
  background: #f5b301;
  animation: wox-track-pulse 1.5s infinite;
}
.wox-track__chat-status--error {
  background: var(--destructive, #ef4444);
}

/* Driver "on the way" strip under the map – opens the inline chat. */
.wox-track__map-driver-strip {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
  padding: 0.6rem 0.85rem;
  background: var(--card, #141414);
  border: 1px solid var(--border);
  border-radius: var(--radius, 14px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
.wox-track__map-driver-strip .el-avatar { flex: 0 0 auto; }
.wox-track__map-driver-strip-main {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  flex: 1 1 auto;
}
.wox-track__map-driver-strip-name {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wox-track__map-driver-strip-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--primary-strong, #83ea00);
}
.wox-track__map-driver-strip-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary-strong, #83ea00);
  animation: wox-rider-pulse 1.6s ease-out infinite;
}
#wox-track-open-chat,
#wox-track-open-chat-driver,
#wox-track-open-chat-merchant { position: relative; }
#wox-track-open-chat .wox-track__chat-badge,
#wox-track-open-chat-driver .wox-track__chat-badge,
#wox-track-open-chat-merchant .wox-track__chat-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  font-size: 0.62rem;
}

/* Chat warning banner for restaurant communication */
.wox-track__chat-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(245, 158, 11, 0.12);
  border-bottom: 1px solid rgba(245, 158, 11, 0.25);
  font-size: 0.78rem;
  line-height: 1.35;
  color: #fbbf24;
}
.wox-track__chat-warning-icon {
  font-size: 1.15rem;
  line-height: 1;
  color: #f59e0b;
  flex-shrink: 0;
  margin-top: 1px;
}
.wox-track__chat-warning-text strong {
  display: block;
  font-weight: 700;
  color: #fef08a;
  margin-bottom: 2px;
}

@media (max-width: 991.98px) {
  .wox-track__chat-messages { height: 280px; }
}
@media (max-width: 575.98px) {
  .wox-track__chat-messages { height: 220px; }
  .wox-track__msg { max-width: 92%; }
  .wox-track__chat-overlay.is-visible {
    padding: 0.75rem;
    align-items: stretch;
  }
  .wox-track__chat-overlay .wox-track__chat {
    width: 100%;
    max-height: 70vh;
    border-radius: var(--radius-2xl, 18px);
  }
}



/* Wox track map pins – NEVER set transform:none on pin/marker elements.
   Mapbox positions markers via transform on .mapboxgl-marker; killing it
   leaves pins stuck in the top-left corner of the map. */
.wox-map-pin {
  width: 40px !important;
  height: 50px !important;
  line-height: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  pointer-events: auto;
  position: relative;
}
.wox-map-pin img {
  width: 40px !important;
  height: 50px !important;
  display: block !important;
  max-width: none !important;
  object-fit: contain !important;
}
/*
 * CRITICAL: Mapbox positions markers with inline transform on .mapboxgl-marker.
 * Never set transform:none / position:fixed / left/top on this wrapper —
 * that freezes pins to the map box instead of lat/lng.
 */
#cmaps .mapboxgl-marker,
.wox-track .mapboxgl-marker,
.wox-track #cmaps .mapboxgl-marker {
  will-change: transform;
}

/* ---- Theme-owned track map (#wox-track-map) ---- */
.wox-track__map-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 420px;
  height: 60vh;
}
@media (min-width: 992px) {
  .wox-track__map-wrap {
    min-height: 540px;
    height: min(70vh, 720px);
  }
}
#wox-track-map.wox-track__map {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: 380px;
  height: 100%;
  z-index: 1;
}
@media (min-width: 992px) {
  #wox-track-map.wox-track__map { min-height: 520px; }
}
/* Legacy bundle map mount – never visible */
.wox-track__map-legacy,
#cmaps.wox-track__map-legacy {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  left: -9999px !important;
  top: 0 !important;
}

.wox-track__map-status { z-index: 4; }
.wox-track__map-gps {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  z-index: 5;
}
.wox-track__gps-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0;
  background: var(--card);
  color: var(--foreground);
  box-shadow: var(--shadow-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.35rem;
}
.wox-track__gps-btn:hover {
  background: var(--primary);
  color: var(--primary-foreground);
}

/* Restaurant pin: lime circle + store icon (no transform override!) */
.wox-map-pin--restaurant {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: #83ea00 !important;
  color: #141414 !important;
  border: 3px solid #fff !important;
  box-shadow: 0 3px 12px rgba(0,0,0,0.45) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}
.wox-map-pin--restaurant i {
  font-size: 1.25rem;
  color: #141414 !important;
  line-height: 1;
}

/* Customer pin: classic orange drop (no transform override!) */
.wox-map-pin--customer {
  width: 40px !important;
  height: 48px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  line-height: 0 !important;
}
.wox-map-pin--customer img {
  width: 40px !important;
  height: 48px !important;
  display: block !important;
  object-fit: contain !important;
}
.wox-map-pin__drop {
  display: block;
  width: 28px;
  height: 28px;
  margin: 0 auto;
  border-radius: 50% 50% 50% 0;
  background: #ff4a00;
  border: 2px solid #fff;
  transform: rotate(-45deg);
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

/* Mapbox canvas fill */
#wox-track-map .mapboxgl-canvas {
  outline: none;
}
#wox-track-map .mapboxgl-ctrl-bottom-left,
#wox-track-map .mapboxgl-ctrl-bottom-right {
  display: none;
}

/* ==========================================================================
   SHADCN TRACK ORDER STATE CARDS (COMPLETED & FAILED ORDERS)
   ========================================================================== */
.wox-track__state-card {
  position: relative;
  width: 100%;
  min-height: 480px;
  background: rgba(24, 24, 27, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
  box-sizing: border-box;
}

.wox-track__state-badge {
  position: absolute;
  top: 20px;
  left: 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9999px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #e4e4e7;
  letter-spacing: 0.02em;
}

.wox-track__pulse.is-failed {
  background: #ef4444 !important;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.6) !important;
}

.wox-track__state-body {
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
}

.wox-track__state-icon-wrap {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  font-size: 2.75rem;
}

.wox-track__state-icon-wrap--success {
  background: rgba(131, 234, 0, 0.12);
  color: #83ea00;
  border: 1px solid rgba(131, 234, 0, 0.25);
  box-shadow: 0 0 24px rgba(131, 234, 0, 0.2);
}

.wox-track__state-icon-wrap--danger {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.25);
  box-shadow: 0 0 24px rgba(239, 68, 68, 0.2);
}

.wox-track__state-title {
  font-size: 1.65rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 10px 0;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.wox-track__state-desc {
  font-size: 0.95rem;
  color: #a1a1aa;
  margin: 0 0 24px 0;
  line-height: 1.5;
}

.wox-track__state-desc strong {
  color: #ffffff;
  font-weight: 600;
}

.wox-track__state-alert-box {
  width: 100%;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 18px;
  text-align: left;
}

.wox-track__state-alert-text {
  font-size: 0.9rem;
  color: #fca5a5;
  margin: 0;
  line-height: 1.45;
}

.wox-track__state-info-box {
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 24px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
}

.wox-track__state-info-box i {
  font-size: 1.35rem;
  color: #83ea00;
  margin-top: 2px;
  flex-shrink: 0;
}

.wox-track__state-info-box strong {
  display: block;
  font-size: 0.88rem;
  color: #f4f4f5;
  margin-bottom: 4px;
}

.wox-track__state-info-box p {
  font-size: 0.82rem;
  color: #a1a1aa;
  margin: 0;
  line-height: 1.4;
}

.wox-track__state-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  flex-wrap: wrap;
}

.wox-track__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  border: none;
  box-sizing: border-box;
}

.wox-track__btn--primary {
  background: #83ea00;
  color: #09090b;
  box-shadow: 0 4px 14px rgba(131, 234, 0, 0.35);
}

.wox-track__btn--primary:hover {
  background: #95f514;
  transform: translateY(-1px);
  color: #09090b;
  box-shadow: 0 6px 20px rgba(131, 234, 0, 0.45);
}

.wox-track__btn--primary-danger {
  background: #ef4444;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35);
}

.wox-track__btn--primary-danger:hover {
  background: #f87171;
  transform: translateY(-1px);
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.45);
}

.wox-track__btn--secondary {
  background: rgba(255, 255, 255, 0.07);
  color: #f4f4f5;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.wox-track__btn--secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.wox-track__driver-review-shortcut {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  color: #a1a1aa;
}

.wox-track__btn-text {
  background: none;
  border: none;
  color: #83ea00;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  font-size: 0.85rem;
  transition: color 0.2s ease;
}

.wox-track__btn-text:hover {
  color: #95f514;
  text-decoration: underline;
}

/* ==========================================================================
   REVIEW MODAL DARK MODE OVERRIDES (FIX WHITE BACKGROUNDS)
   ========================================================================== */
.modal-content,
.el-dialog {
  background-color: #121212 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 20px !important;
  color: #ffffff !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.6) !important;
}

.modal-header,
.modal-body,
.modal-footer,
.el-dialog__header,
.el-dialog__body,
.el-dialog__footer {
  background-color: transparent !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Close button: clean neutral circle with X perfectly centered */
.modal-header .close,
.modal-header .btn-close,
.el-dialog__headerbtn,
.wox-driver-review-dialog .el-dialog__headerbtn,
#footer-none-bg .el-dialog__headerbtn,
button.close {
  background-color: var(--muted) !important;
  color: var(--foreground) !important;
  border: 1px solid var(--border) !important;
  opacity: 1 !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  transform: none !important;
  transition: background-color 0.2s ease, border-color 0.15s ease !important;
}

.modal-header .close:hover,
.el-dialog__headerbtn:hover,
.wox-driver-review-dialog .el-dialog__headerbtn:hover,
#footer-none-bg .el-dialog__headerbtn:hover,
button.close:hover {
  background-color: var(--accent) !important;
  color: var(--foreground) !important;
  border-color: var(--border) !important;
  filter: none !important;
}

.modal-header .close span,
.modal-header .btn-close,
.el-dialog__headerbtn .el-dialog__close,
.el-dialog__headerbtn .el-icon,
.el-dialog__headerbtn i,
.el-dialog__headerbtn svg {
  color: #ffffff !important;
  position: static !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  font-size: 18px !important;
  line-height: 1 !important;
  width: auto !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Dropzone Photo Upload Area (Fix White Area) */
.dropzone,
.vue-dropzone,
.vue-dropzone.dropzone,
.dz-clickable {
  background-color: rgba(255, 255, 255, 0.03) !important;
  border: 2px dashed rgba(255, 255, 255, 0.18) !important;
  border-radius: 14px !important;
  color: #a1a1aa !important;
  min-height: 140px !important;
  transition: all 0.2s ease !important;
}

.dropzone:hover,
.vue-dropzone:hover {
  background-color: rgba(255, 255, 255, 0.06) !important;
  border-color: #83ea00 !important;
}

.dropzone .dz-message,
.vue-dropzone .dz-message {
  color: #a1a1aa !important;
  font-weight: 500 !important;
  margin: 2em 0 !important;
}

.dropzone .dz-message i,
.vue-dropzone .dz-message i,
.dropzone .dz-message img {
  color: #83ea00 !important;
  opacity: 0.8 !important;
}

/* Form inputs & textareas inside Review Modal */
.modal-content input,
.modal-content textarea,
.modal-content select,
.modal-content .form-control,
.modal-content .vue-tags-input,
.modal-content .ti-input,
.modal-content .ti-new-tag-input,
.el-dialog input,
.el-dialog textarea,
.modal-content .el-input__inner,
.modal-content .el-textarea__inner,
.el-dialog .el-input__inner,
.el-dialog .el-textarea__inner {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
}

/* el-select / el-input belso szovege - szin temavaltozos, padding NEM forced
   (a kotelező 10px padding levagta a legordulo szoveget az el-select__wrapper 42px magassagan belul) */
.el-select .el-input__inner,
.el-input .el-input__inner {
  color: var(--foreground) !important;
  background-color: transparent !important;
  border: none !important;
  padding: 0 12px !important;
  height: auto !important;
  line-height: 1.5 !important;
}
.el-select .el-input__inner::placeholder,
.el-input .el-input__inner::placeholder {
  color: var(--muted-foreground) !important;
}

/* Explicit Placeholder Contrast (Chrome, Safari, Firefox, Edge, Vue-tags) */
.modal-content input::-webkit-input-placeholder,
.modal-content textarea::-webkit-input-placeholder,
.modal-content .form-control::-webkit-input-placeholder,
.modal-content .ti-new-tag-input::-webkit-input-placeholder,
.el-dialog input::-webkit-input-placeholder,
.el-dialog textarea::-webkit-input-placeholder {
  color: #a1a1aa !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #a1a1aa !important;
}

.modal-content input::-moz-placeholder,
.modal-content textarea::-moz-placeholder,
.modal-content .form-control::-moz-placeholder,
.modal-content .ti-new-tag-input::-moz-placeholder,
.el-dialog input::-moz-placeholder,
.el-dialog textarea::-moz-placeholder {
  color: #a1a1aa !important;
  opacity: 1 !important;
}

.modal-content input::placeholder,
.modal-content textarea::placeholder,
.modal-content .form-control::placeholder,
.modal-content .ti-new-tag-input::placeholder,
.el-dialog input::placeholder,
.el-dialog textarea::placeholder,
.el-input__inner::placeholder,
.el-textarea__inner::placeholder {
  color: #a1a1aa !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #a1a1aa !important;
}

/* Vue tags input styling */
.vue-tags-input,
.vue-tags-input .ti-input {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 10px !important;
}

.vue-tags-input .ti-new-tag-input-wrapper input {
  color: #ffffff !important;
}

.vue-tags-input .ti-tag {
  background-color: #83ea00 !important;
  color: #09090b !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
}

/* Checkbox text label inside review modal */
.modal-content label,
.modal-content .custom-control-label,
.modal-content .form-check-label {
  color: #e4e4e7 !important;
}

/* Submit Review Button (Accent Green #83ea00) */
.modal-footer .btn,
.modal-footer button,
.modal-content button.btn,
.modal-content button.btn-green,
.modal-content button.btn-primary,
.modal-content button[type="submit"],
.modal-content .btn-submit,
.el-dialog button.el-button--primary,
.el-dialog button[type="submit"] {
  background: #83ea00 !important;
  background-color: #83ea00 !important;
  color: #09090b !important;
  border: none !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  border-radius: 12px !important;
  padding: 14px 28px !important;
  width: 100% !important;
  box-shadow: 0 4px 14px rgba(131, 234, 0, 0.35) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.modal-footer .btn:hover,
.modal-footer button:hover,
.modal-content button.btn:hover,
.el-dialog button:hover {
  background: #95f514 !important;
  background-color: #95f514 !important;
  color: #09090b !important;
  box-shadow: 0 6px 20px rgba(131, 234, 0, 0.45) !important;
  transform: translateY(-1px) !important;
}

/* ==========================================================================
   HEADER LANGUAGE DROPDOWN ACTIVE ITEM FIX (NO WHITE-ON-WHITE)
   ========================================================================== */
.dropdown-menu,
.el-dropdown-menu,
.wox-lang__dropdown,
.language-dropdown {
  background-color: #18181b !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5) !important;
  padding: 8px !important;
}

.dropdown-item,
.dropdown-menu a,
.dropdown-menu li,
.el-dropdown-menu__item,
.language-option {
  color: #f4f4f5 !important;
  background-color: transparent !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  font-weight: 500 !important;
  transition: all 0.15s ease !important;
}

.dropdown-item:hover,
.dropdown-menu a:hover,
.el-dropdown-menu__item:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

/* Active / Selected Language Item (Fix White-on-white text) */
.dropdown-item.active,
.dropdown-item:active,
.dropdown-item.selected,
.dropdown-item.is-active,
.dropdown-menu a.active,
.dropdown-menu a.selected,
.dropdown-menu li.active,
.el-dropdown-menu__item.is-active,
.el-dropdown-menu__item.active,
.el-dropdown-menu__item:focus,
.language-option.active,
.language-option.selected {
  background-color: var(--muted) !important;
  background: var(--muted) !important;
  color: var(--foreground) !important;
  font-weight: 700 !important;
  border: 0 !important;
}
html.dark .dropdown-item.active,
html.dark .dropdown-item:active,
html.dark .dropdown-menu a.active,
html.dark .el-dropdown-menu__item.is-active,
html.dark .el-dropdown-menu__item.active,
html.dark .el-dropdown-menu__item:focus {
  background: rgba(182, 240, 74, 0.16) !important;
  color: var(--foreground) !important;
}

.dropdown-item.active *,
.dropdown-menu a.active *,
.dropdown-menu li.active *,
.el-dropdown-menu__item.is-active * {
  color: var(--foreground) !important;
}

/* ==========================================================================
   DEEP VUE TAGS INPUT CONTRAST FIX IN REVIEW MODAL
   ========================================================================== */
.vue-tags-input .ti-input,
.vue-tags-input .ti-tags,
.vue-tags-input input {
  color: #ffffff !important;
  background-color: transparent !important;
}

.vue-tags-input .ti-new-tag-input-wrapper input,
.vue-tags-input .ti-new-tag-input-wrapper input::placeholder,
.vue-tags-input .ti-new-tag-input-wrapper input::-webkit-input-placeholder {
  color: #a1a1aa !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #a1a1aa !important;
}

/* ==========================================================================
   41. CHECKOUT MODALS REDESIGN (Order Type, Promotions, Add Promo)
   ========================================================================== */
.modal-content {
  background: var(--card) !important;
  color: var(--foreground) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-3xl) !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5) !important;
  overflow: hidden;
  position: relative;
}
.modal-header {
  border-bottom: 1px solid var(--border) !important;
  padding: 1.25rem 1.5rem !important;
  position: relative;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.modal-header .modal-title,
.modal-header h5 {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 1.25rem !important;
  color: var(--foreground) !important;
  margin: 0 !important;
}

/* Modal bezárás (X) gomb pozícionálása és gombstílusa */
.modal-header {
  padding-right: 3.6rem !important;
}
.modal-header .close,
.modal-content .close,
.modal-header > a.btn-circle,
.modal-header > a.btn-black.btn-circle,
.modal-header > a[href="javascript:;"],
.modal-header > a[href="#"] {
  position: absolute !important;
  right: 1rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  float: none !important;
  outline: none !important;
  z-index: 10;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--muted) !important;
  color: var(--foreground) !important;
  border: 1px solid var(--border) !important;
  text-decoration: none !important;
  box-shadow: none !important;
  font-size: 0 !important;
  line-height: 1 !important;
}
.modal-header > a.btn-circle i,
.modal-header > a.btn-black.btn-circle i,
.modal-header > a[href="javascript:;"] i,
.modal-header > a[href="#"] i {
  font-size: 1.2rem !important;
  color: var(--foreground) !important;
  line-height: 1 !important;
}
.modal-header .close a,
.modal-content .close a,
.modal-header .close button,
.modal-content .close button {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: var(--muted) !important;
  color: var(--foreground) !important;
  border: 1px solid var(--border) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: all 0.15s ease !important;
  box-shadow: none !important;
  text-decoration: none !important;
}
.modal-header .close a:hover,
.modal-content .close a:hover,
.modal-header .close button:hover,
.modal-content .close button:hover {
  background: var(--accent) !important;
  color: var(--accent-foreground) !important;
  transform: scale(1.05);
}
.modal-header .close i,
.modal-content .close i {
  font-size: 1.2rem !important;
  color: var(--foreground) !important;
  line-height: 1 !important;
}

/* Opció választó lista (Order Type & Promo elemek) */
.list-selection {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.list-selection li {
  background: var(--muted) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xl) !important;
  padding: 0.85rem 1.1rem !important;
  margin-bottom: 0.65rem !important;
  transition: all 0.18s ease !important;
  cursor: pointer;
}
.list-selection li:last-child {
  margin-bottom: 0 !important;
}
.list-selection li:hover {
  border-color: color-mix(in oklch, var(--primary) 35%, var(--border)) !important;
}
.list-selection li:has(input:checked),
.list-selection li.is-selected {
  background: color-mix(in oklch, var(--primary) 14%, var(--card)) !important;
  border-color: var(--primary) !important;
  box-shadow: var(--shadow-sm) !important;
}
.list-selection li .custom-control {
  padding-left: 1.75rem !important;
  margin: 0 !important;
}
.list-selection li .custom-control-label {
  color: var(--foreground) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  cursor: pointer !important;
}
.list-selection li .custom-control-label::before {
  background-color: var(--card) !important;
  border-color: var(--input) !important;
}
.list-selection li .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}
.list-selection li p.text-grey,
.list-selection li p.text-muted {
  color: var(--muted-foreground) !important;
  font-size: 0.84rem !important;
  margin-top: 0.25rem !important;
}

/* Időzítés kapcsoló (Now / Schedule for later) */
.btn-group-toggle {
  background: var(--muted) !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  padding: 4px !important;
  display: inline-flex !important;
  gap: 4px !important;
}
.btn-group-toggle > .btn {
  background: transparent !important;
  color: var(--muted-foreground) !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  padding: 0.55rem 1.25rem !important;
  transition: all 0.18s ease !important;
  box-shadow: none !important;
  cursor: pointer !important;
}
.btn-group-toggle > .btn:hover {
  color: var(--foreground) !important;
}
.btn-group-toggle > .btn.active,
.btn-group-toggle > .btn:has(input:checked) {
  background: var(--card) !important;
  color: var(--foreground) !important;
  box-shadow: var(--shadow-sm) !important;
  font-weight: 800 !important;
}

/* Modal Láb és Gombok */
.modal-footer {
  border-top: 1px solid var(--border) !important;
  padding: 1rem 1.5rem !important;
  background: var(--card) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0.6rem !important;
}
.modal-footer .btn-light {
  background: var(--secondary) !important;
  color: var(--secondary-foreground) !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 0.9rem !important;
  padding: 0.65rem 1.35rem !important;
  transition: all 0.15s ease !important;
}
.modal-footer .btn-light:hover {
  background: var(--accent) !important;
  color: var(--accent-foreground) !important;
}
.modal-footer .btn-green,
.modal-body .btn-green,
.modal-content .btn-green,
.modal-footer .btn-primary,
.modal-body .btn-primary,
.modal-content .btn-primary {
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  padding: 0.75rem 1.5rem !important;
  box-shadow: 0 4px 14px color-mix(in oklch, var(--primary) 25%, transparent) !important;
  transition: all 0.18s ease !important;
}
.modal-footer .btn-green:hover,
.modal-body .btn-green:hover,
.modal-content .btn-green:hover,
.modal-footer .btn-primary:hover,
.modal-body .btn-primary:hover,
.modal-content .btn-primary:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px color-mix(in oklch, var(--primary) 35%, transparent) !important;
  color: var(--primary-foreground) !important;
}
.modal-footer .btn-black:not(.btn-circle):not([class*="btn-circle"]),
.modal-body .btn-black:not(.btn-circle):not([class*="btn-circle"]),
.modal-content .btn-black:not(.btn-circle):not([class*="btn-circle"]) {
  background: color-mix(in oklch, var(--destructive) 14%, transparent) !important;
  color: var(--destructive) !important;
  border: 1px solid color-mix(in oklch, var(--destructive) 28%, transparent) !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  padding: 0.4rem 0.9rem !important;
  transition: all 0.15s ease !important;
}
.modal-footer .btn-black:not(.btn-circle):not([class*="btn-circle"]):hover,
.modal-body .btn-black:not(.btn-circle):not([class*="btn-circle"]):hover,
.modal-content .btn-black:not(.btn-circle):not([class*="btn-circle"]):hover {
  background: var(--destructive) !important;
  color: var(--destructive-foreground) !important;
}

/* Modal Select & Option dropdown fix */
select.custom-select,
select.form-control,
.modal select,
.modal option {
  background-color: var(--card) !important;
  color: var(--foreground) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xl) !important;
  padding: 0.6rem 1rem !important;
  height: auto !important;
  line-height: 1.5 !important;
  min-height: 48px !important;
  font-size: 0.95rem !important;
}

/* Phone input double-border fix (#changephoneModal / .inputs-with-dropdown) */
.inputs-with-dropdown {
  overflow: hidden !important;
}
.inputs-with-dropdown input,
.inputs-with-dropdown .form-control,
.inputs-with-dropdown .iti input {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 0 !important;
}

/* Shadcn style Delivery Address card (.wox-address-card) */
.wox-address-card {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-2xl) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all 0.2s ease !important;
}
.wox-address-card:hover {
  border-color: color-mix(in oklch, var(--primary) 40%, var(--border)) !important;
  box-shadow: var(--shadow-md) !important;
}
.wox-badge-label {
  background: var(--muted) !important;
  color: var(--foreground) !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  padding: 0.25rem 0.75rem !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.02em;
}
.btn-ghost {
  background: transparent !important;
  color: var(--muted-foreground) !important;
  border: none !important;
  transition: all 0.15s ease !important;
}
.btn-ghost:hover {
  background: var(--accent) !important;
  color: var(--foreground) !important;
}
.btn-icon-round {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

/* Scrollable Cart Items Container for Long Checkout Lists */
.wox-cart-items-wrapper {
  max-height: 420px;
  overflow-y: auto;
  padding-right: 4px;
}
.wox-cart-items-wrapper::-webkit-scrollbar {
  width: 5px;
}
.wox-cart-items-wrapper::-webkit-scrollbar-track {
  background: transparent;
}
.wox-cart-items-wrapper::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 999px;
}

/* ==========================================================================
   42. FEATURED ITEMS CARD REDESIGN (.wox-featured-card)
   ========================================================================== */
/* Swiper slide override to match restaurant cards rounded design */
.swiperResto .swiperSlide,
.swiperResto .swiperSlide.swiper-slide {
  min-height: 0 !important;
  height: auto !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: var(--radius-2xl) !important;
}

.wox-featured-card,
.wox-card,
.swiperResto .wox-card,
.swiperResto .wox-featured-card {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-2xl) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all 0.22s ease !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  margin-bottom: 5px !important;
}
.wox-featured-card:hover,
.wox-card:hover,
.swiperResto .wox-card:hover,
.swiperResto .wox-featured-card:hover {
  transform: translateY(-4px) !important;
  border-color: color-mix(in oklch, var(--primary) 40%, var(--border)) !important;
  box-shadow: var(--shadow-lg) !important;
}

.wox-featured-card__media,
.wox-card__media,
.swiperResto .wox-card__media,
.swiperResto .wox-featured-card__media {
  position: relative !important;
  width: 100% !important;
  height: 165px !important;
  background: var(--muted) !important;
  overflow: hidden !important;
  border-top-left-radius: var(--radius-2xl) !important;
  border-top-right-radius: var(--radius-2xl) !important;
}

.swiperResto .swiperSlide img,
.wox-featured-card__media img,
.wox-card__media img,
.swiperResto .wox-card__media img,
.swiperResto .wox-featured-card__media img {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: cover !important;
  border-top-left-radius: var(--radius-2xl) !important;
  border-top-right-radius: var(--radius-2xl) !important;
  transition: transform 0.3s ease !important;
}
.wox-featured-card:hover img,
.wox-card:hover img,
.swiperResto .wox-card:hover img,
.swiperResto .wox-featured-card:hover img {
  transform: scale(1.06) !important;
}

.wox-featured-card__body,
.wox-card__body,
.swiperResto .wox-card__body,
.swiperResto .wox-featured-card__body {
  padding: 1rem 1.1rem 1.1rem 1.1rem !important;
  background: var(--card) !important;
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
  justify-content: space-between !important;
  border-bottom-left-radius: var(--radius-2xl) !important;
  border-bottom-right-radius: var(--radius-2xl) !important;
}

.wox-featured-card__title,
.wox-card__title {
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  color: var(--foreground) !important;
  margin-bottom: 0.3rem !important;
}

.wox-featured-card__subtitle,
.wox-card__subtitle {
  font-size: 0.83rem !important;
  color: var(--muted-foreground) !important;
  line-height: 1.45 !important;
  margin-bottom: 0.6rem !important;
}

.featured-item-price {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 1.15rem !important;
  color: var(--foreground) !important;
}

/* Styled Add Button in Featured Items */
.wox-featured-add-btn,
.wox-featured-add-btn.btn {
  width: auto !important;
  height: auto !important;
  position: static !important;
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
  border: none !important;
  border-radius: 999px !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 0.82rem !important;
  padding: 0.45rem 1.05rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  line-height: 1 !important;
  box-shadow: 0 4px 12px color-mix(in oklch, var(--primary) 25%, transparent) !important;
  transition: all 0.18s ease !important;
}
.wox-featured-add-btn i {
  font-size: 0.95rem !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
}
.wox-featured-add-btn span {
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
}
.wox-featured-add-btn:hover,
.wox-featured-add-btn.btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px color-mix(in oklch, var(--primary) 40%, transparent) !important;
  color: var(--primary-foreground) !important;
}
.wox-featured-add-btn:disabled,
.wox-featured-add-btn.btn:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

.wox-badge-promo {
  background: color-mix(in oklch, var(--primary) 15%, transparent) !important;
  color: var(--primary-strong) !important;
  border: 1px solid color-mix(in oklch, var(--primary) 30%, transparent) !important;
  border-radius: 999px !important;
  padding: 0.25rem 0.65rem !important;
  font-weight: 700 !important;
  font-size: 0.75rem !important;
}

.border-top-subtle {
  border-top: 1px solid var(--border) !important;
}

/* Swiper navigation buttons fix */
.swiperResto ~ .swiper-button-next,
.swiperResto ~ .swiper-button-prev,
.swiper-container .swiper-button-next,
.swiper-container .swiper-button-prev,
#vue-home-widgets .swiperResto .swiper-button-next,
#vue-home-widgets .swiperResto .swiper-button-prev {
  width: 40px !important;
  height: 40px !important;
  background: var(--card) !important;
  color: var(--foreground) !important;
  border: 1px solid var(--border) !important;
  border-radius: 50% !important;
  box-shadow: var(--shadow-md) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.18s ease !important;
  margin-top: 0 !important;
  top: 45% !important;
  z-index: 10 !important;
}
.swiper-button-next:after,
.swiper-button-prev:after {
  display: none !important;
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
  background: var(--accent) !important;
  color: var(--foreground) !important;
  transform: scale(1.08) !important;
}
.swiper-button-disabled {
  opacity: 0.3 !important;
  pointer-events: none !important;
}

/* ==========================================================================
   43. FIXED HEIGHT & FIXED WIDTH CARDS (.wox-featured-card)
   ========================================================================== */
.swiperResto .swiper-wrapper {
  align-items: stretch !important;
}
.swiperResto .swiperSlide,
.swiperResto .swiperSlide.swiper-slide {
  width: 270px !important;
  min-width: 270px !important;
  max-width: 270px !important;
  height: auto !important;
  display: flex !important;
  flex-shrink: 0 !important;
}
.wox-featured-card,
.swiperResto .wox-featured-card,
.swiperResto .wox-card {
  width: 270px !important;
  min-width: 270px !important;
  max-width: 270px !important;
  height: 345px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}
.wox-featured-card__media,
.swiperResto .wox-featured-card__media {
  height: 155px !important;
  flex-shrink: 0 !important;
}
.wox-featured-card__body,
.swiperResto .wox-featured-card__body {
  flex-grow: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 0.9rem 1.1rem 1.25rem 1.1rem !important;
}
.wox-featured-card__title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  height: 2.6rem !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}
.wox-featured-card__subtitle {
  font-size: 0.8rem !important;
  line-height: 1.35 !important;
  height: 2.4rem !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

/* Item Details Modal Fixes */
#itemModal .modal-header {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 100 !important;
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
}
#itemModal .close {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: rgb(0 0 0 / 0.65) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0.9 !important;
  transition: all 0.18s ease !important;
  border: 1px solid rgb(255 255 255 / 0.25) !important;
  font-size: 1.25rem !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
}
#itemModal .close:hover {
  background: rgb(0 0 0 / 0.9) !important;
  color: #ffffff !important;
  transform: scale(1.08) !important;
}
#itemModal .add_to_cart,
#itemModal .btn-green {
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
  border: none !important;
  border-radius: var(--radius-xl) !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  padding: 0.75rem 1.5rem !important;
  box-shadow: 0 4px 14px color-mix(in oklch, var(--primary) 25%, transparent) !important;
  transition: all 0.18s ease !important;
}
#itemModal .add_to_cart:hover,
#itemModal .btn-green:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px color-mix(in oklch, var(--primary) 35%, transparent) !important;
  color: var(--primary-foreground) !important;
}

/* ==========================================================================
   Review Modal (#reviewModal) - Shadcn / Wox Modern UI Fixes
   ========================================================================== */
#reviewModal .modal-dialog {
  max-width: 480px !important;
  margin: 1.75rem auto !important;
}

#reviewModal .modal-content {
  background: var(--card, #18181b) !important;
  color: var(--card-foreground, #f4f4f5) !important;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12)) !important;
  border-radius: var(--radius-2xl, 20px) !important;
  box-shadow: var(--shadow-2xl, 0 25px 50px -12px rgba(0, 0, 0, 0.5)) !important;
  overflow: hidden !important;
  position: relative !important;
}

#reviewModal .modal-body {
  padding: 1.75rem 1.5rem 1rem 1.5rem !important;
  position: relative !important;
}

/* Close button - Top Right circular floating button */
#reviewModal .modal-body > a.btn-circle,
#reviewModal a[class*="btn-circle"],
#reviewModal .btn-black.btn-circle {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: var(--muted, rgba(255, 255, 255, 0.08)) !important;
  color: var(--foreground, #ffffff) !important;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  z-index: 20 !important;
}

#reviewModal .modal-body > a.btn-circle:hover,
#reviewModal a[class*="btn-circle"]:hover,
#reviewModal .btn-black.btn-circle:hover {
  background: var(--destructive, #ef4444) !important;
  color: #ffffff !important;
  border-color: var(--destructive, #ef4444) !important;
  transform: scale(1.05) !important;
}

#reviewModal .modal-body > a.btn-circle i,
#reviewModal .btn-black.btn-circle i {
  font-size: 18px !important;
  line-height: 1 !important;
  color: inherit !important;
}

/* Titles & Headings */
#reviewModal h4 {
  font-family: var(--font-display, inherit) !important;
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  color: var(--foreground, #ffffff) !important;
  letter-spacing: -0.02em !important;
  margin-top: 0 !important;
  padding-right: 40px !important;
}

#reviewModal h5 {
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  color: var(--muted-foreground, #a1a1aa) !important;
  margin-top: 1rem !important;
  margin-bottom: 0.45rem !important;
}

#reviewModal .tagify {
  background: var(--background, #09090b) !important;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.15)) !important;
  border-radius: var(--radius-lg, 12px) !important;
  padding: 0.35rem 0.65rem !important;
  min-height: 44px !important;
  color: var(--foreground, #ffffff) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

#reviewModal .tagify:hover {
  border-color: var(--border-hover, rgba(255, 255, 255, 0.3)) !important;
}

#reviewModal .tagify.tagify--focus {
  border-color: var(--primary, #84cc16) !important;
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--primary, #84cc16) 25%, transparent) !important;
}

#reviewModal .tagify__input {
  color: var(--foreground, #ffffff) !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  margin: 3px 0 !important;
}

/* Placeholder styling: only show placeholder when input is empty and not focused */
#reviewModal .tagify__input::placeholder,
#reviewModal .tagify__input::before {
  color: var(--muted-foreground, #71717a) !important;
  opacity: 0.85 !important;
  font-weight: 400 !important;
  transition: opacity 0.15s ease !important;
}

/* Hide placeholder when user focuses or types into Tagify */
#reviewModal .tagify.tagify--focus .tagify__input::placeholder,
#reviewModal .tagify.tagify--focus .tagify__input::before,
#reviewModal .tagify:not(.tagify--empty) .tagify__input::placeholder,
#reviewModal .tagify:not(.tagify--empty) .tagify__input::before,
#reviewModal .tagify__input:focus::before,
#reviewModal .tagify__input:not(:empty)::before,
#reviewModal .tagify.tagify--has-tags .tagify__input::before {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

#reviewModal .tagify__tag {
  background: color-mix(in oklch, var(--primary, #84cc16) 18%, rgba(255, 255, 255, 0.12)) !important;
  border: 1px solid color-mix(in oklch, var(--primary, #84cc16) 35%, rgba(255, 255, 255, 0.2)) !important;
  border-radius: var(--radius-md, 8px) !important;
  margin: 3px 4px !important;
  padding: 0 4px 0 8px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
}

#reviewModal .tagify__tag > div {
  padding: 0 !important;
  background: transparent !important;
  display: inline-flex !important;
  align-items: center !important;
}

#reviewModal .tagify__tag > div::before {
  display: none !important;
}

#reviewModal .tagify__tag-text {
  color: #ffffff !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  padding: 0 4px 0 0 !important;
}

#reviewModal .tagify__tag__removeBtn {
  color: rgba(255, 255, 255, 0.7) !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: 4px !important;
  transition: all 0.15s ease !important;
}

#reviewModal .tagify__tag__removeBtn:hover {
  background: var(--destructive, #ef4444) !important;
  color: #ffffff !important;
}

/* Dropzone Photos */
#reviewModal .dropzone.dropzone_container {
  background: var(--background, #09090b) !important;
  border: 2px dashed var(--border, rgba(255, 255, 255, 0.15)) !important;
  border-radius: var(--radius-xl, 16px) !important;
  padding: 1.5rem 1rem !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

#reviewModal .dropzone.dropzone_container:hover {
  border-color: var(--primary, #84cc16) !important;
  background: color-mix(in oklch, var(--primary, #84cc16) 4%, var(--background, #09090b)) !important;
}

#reviewModal .dropzone .dz-message i {
  font-size: 2rem !important;
  color: var(--primary, #84cc16) !important;
  margin-bottom: 0.5rem !important;
  display: inline-block !important;
}

#reviewModal .dropzone .dz-message p {
  font-size: 0.88rem !important;
  color: var(--muted-foreground, #a1a1aa) !important;
  margin: 0 !important;
}

/* Review Textarea */
#reviewModal textarea#review_content,
#reviewModal textarea.form-control {
  background: var(--background, #09090b) !important;
  color: var(--foreground, #ffffff) !important;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.15)) !important;
  border-radius: var(--radius-lg, 12px) !important;
  padding: 0.75rem 1rem !important;
  font-size: 0.92rem !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  transition: all 0.2s ease !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

#reviewModal textarea#review_content:focus,
#reviewModal textarea.form-control:focus {
  border-color: var(--primary, #84cc16) !important;
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--primary, #84cc16) 25%, transparent) !important;
  outline: none !important;
}

#reviewModal textarea#review_content::placeholder,
#reviewModal textarea.form-control::placeholder {
  color: var(--muted-foreground, #71717a) !important;
  opacity: 0.85 !important;
}

/* Checkbox Anonymous */
#reviewModal .custom-control-label {
  color: var(--foreground, #e4e4e7) !important;
  font-weight: 500 !important;
  font-size: 0.88rem !important;
  cursor: pointer !important;
  padding-left: 0.35rem !important;
}

/* Error Alert Box */
#reviewModal .alert-warning,
#reviewModal #error_message {
  background: color-mix(in oklch, var(--destructive, #ef4444) 15%, var(--card, #18181b)) !important;
  border: 1px solid var(--destructive, #ef4444) !important;
  color: #fca5a5 !important;
  border-radius: var(--radius-lg, 12px) !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  padding: 0.75rem 1rem !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15) !important;
}

#reviewModal #error_message p {
  color: inherit !important;
  margin: 0 !important;
}

/* Footer & Submit Button */
#reviewModal .modal-footer {
  border-top: 1px solid var(--border, rgba(255, 255, 255, 0.08)) !important;
  padding: 1.1rem 1.5rem 1.4rem 1.5rem !important;
  background: transparent !important;
}

#reviewModal .modal-footer button.btn-black,
#reviewModal .modal-footer button {
  background: var(--primary, #84cc16) !important;
  color: var(--primary-foreground, #000000) !important;
  border: none !important;
  border-radius: var(--radius-xl, 14px) !important;
  font-family: var(--font-display, inherit) !important;
  font-weight: 800 !important;
  font-size: 0.98rem !important;
  padding: 0.85rem 1.5rem !important;
  box-shadow: 0 4px 14px color-mix(in oklch, var(--primary, #84cc16) 28%, transparent) !important;
  transition: all 0.2s ease !important;
  letter-spacing: -0.01em !important;
}

#reviewModal .modal-footer button.btn-black:hover,
#reviewModal .modal-footer button:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px color-mix(in oklch, var(--primary, #84cc16) 38%, transparent) !important;
  color: var(--primary-foreground, #000000) !important;
}

/* ==========================================================================
   44. Fejléc – telefonon NEM vágjuk le
   FONTOS: html/body-n TILOS az overflow-x: hidden. Az átvált overflow-y: auto-ra,
   és iPhone/Androidon levágja / elcsúsztatja a position:fixed fejlécet.
   Oldalirányú húzást touch-action + a tartalom dobozai fogják meg.
   build: 20260818-hf7
   ========================================================================== */
html {
  overscroll-behavior-x: none;
  background-color: var(--card);
}
body {
  overscroll-behavior-x: none;
  background-color: var(--background) !important;
}
.page-content {
  max-width: 100%;
  overflow-x: clip;
}
.wox-header__inner {
  min-width: 0;
  max-width: 100%;
}
.wox-header {
  background: var(--card) !important;
  overflow: visible;
}

/* Világos mód: a logó fehér táblás, fehér sávon eltűnne */
html:not(.dark) .wox-header .top-logo img {
  background: #111111;
  border-radius: 8px;
  padding: 4px 8px;
  box-sizing: content-box;
}

@media (max-width: 991.98px) {
  html, body {
    width: 100%;
    max-width: 100%;
    touch-action: pan-y;
  }
  .wox-header {
    padding-top: env(safe-area-inset-top, 0px);
    box-shadow: 0 1px 0 var(--border);
  }
  .wox-merchant-info__services .btn-group-rounded {
    display: none !important;
  }
  .action-restaurants #vue-widget-nav-mobile,
  .action-restaurants #location-widget-subnav-mobile {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    max-width: calc(100% - 1.5rem);
    min-width: 0;
    margin: 0.55rem 0.75rem 0.45rem;
    padding: 0.28rem 0.28rem 0.28rem 0.15rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow: visible;
    touch-action: manipulation;
  }
  /* A kereső ne tapadjon a fejléc alsó sávjához */
  .action-restaurants #feed-search-mobile {
    margin-top: 0.85rem !important;
    margin-bottom: 1rem;
  }
  .action-restaurants #vue-widget-nav-mobile > .flexcol:not(.widget-services) {
    flex: 1 1 auto;
    min-width: 0;
  }
  .action-restaurants #vue-widget-nav-mobile > .flexcol:not(.widget-services) p.m-0 {
    display: none !important;
  }
  .action-restaurants #vue-widget-nav-mobile > .flexcol:not(.widget-services) button {
    display: flex !important;
    align-items: center;
    width: 100%;
    max-width: 100%;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--foreground) !important;
    font-weight: 700 !important;
    font-size: 0.86rem !important;
    line-height: 1.25 !important;
    padding: 0.5rem 0.55rem 0.5rem 1.85rem !important;
    text-align: left;
    position: relative;
  }
  .action-restaurants #vue-widget-nav-mobile > .flexcol:not(.widget-services) button:before {
    content: "\f1aa";
    font-family: "Material-Design-Iconic-Font";
    position: absolute;
    left: 0.55rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.05rem;
    color: var(--muted-foreground);
    font-weight: 400;
  }
  .action-restaurants #vue-widget-nav-mobile > .flexcol:not(.widget-services) button:after {
    display: none !important;
  }
  .action-restaurants #vue-widget-nav-mobile > .flexcol:not(.widget-services) .text-truncate {
    display: block;
    max-width: 100% !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* A teljes címet a data-wox-addr mutatja, a Vue saját szövege megmarad. */
  .action-restaurants #vue-widget-nav-mobile > .flexcol:not(.widget-services) .text-truncate[data-wox-addr] {
    font-size: 0 !important;
    line-height: 0 !important;
  }
  .action-restaurants #vue-widget-nav-mobile > .flexcol:not(.widget-services) .text-truncate[data-wox-addr]::after {
    content: attr(data-wox-addr);
    font-size: 0.86rem;
    line-height: 1.25;
    font-weight: 700;
  }
  .action-restaurants #vue-widget-nav-mobile .el-skeleton {
    width: 100%;
  }
  .action-restaurants #vue-widget-nav-mobile > .flexcol:not(.widget-services) .el-skeleton-item {
    width: 100% !important;
    height: 36px;
    border-radius: 999px;
  }
  .action-restaurants #vue-widget-nav-mobile .widget-services .el-skeleton-item {
    width: 108px !important;
    height: 36px;
    border-radius: 999px;
  }
  .action-restaurants #vue-widget-nav-mobile .widget-services {
    flex: 0 0 auto;
    max-width: 44%;
  }
  .action-restaurants #vue-widget-nav-mobile .widget-services .widget-dropdown {
    margin: 0 !important;
  }
  .action-restaurants #vue-widget-nav-mobile .widget-services button {
    background: var(--secondary) !important;
    color: var(--foreground) !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-weight: 800 !important;
    font-size: 0.8rem !important;
    padding: 0.5rem 1.7rem 0.5rem 0.85rem !important;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .swiper,
  .swiper-container,
  .swiperResto,
  .swiperCuisine,
  .swiperBanner,
  .wox-stories-wrap,
  .wox-stories__row,
  .wox-catnav__list,
  .wox-feed-top,
  .wox-hero-wrap,
  .wox-merchant-head {
    max-width: 100%;
  }
  .swiper,
  .swiper-container,
  .swiperResto,
  .swiperCuisine,
  .swiperBanner,
  .wox-stories__row,
  .wox-catnav__list {
    touch-action: pan-x pan-y;
  }
  .swiper,
  .swiper-container,
  .swiperResto,
  .swiperCuisine,
  .swiperBanner {
    overflow: hidden;
  }
}

/* --------------------------------------------------------------------------
   Merchant signup – 1-es: kártyás űrlap + sötét előnykártyák
   -------------------------------------------------------------------------- */
.wox-msign.register-section,
.register-section.wox-msign {
  background: var(--background) !important;
  min-height: 0;
  padding-bottom: 1rem;
}
.wox-msign__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.7rem;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--foreground);
  margin: 0 0 0.4rem;
}
.wox-msign__lead {
  color: var(--muted-foreground);
  font-weight: 600;
  font-size: 0.95rem;
  margin: 0 0 1.1rem;
}
.wox-msign__card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1rem 1rem 1.15rem;
  margin-bottom: 0.5rem;
}
.wox-msign__label {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--foreground);
  margin: 0.85rem 0 0.5rem;
}
.wox-msign__plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
  margin-bottom: 0.75rem;
}
.wox-msign__plan {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 0;
  padding: 0.85rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--secondary);
  cursor: pointer;
  color: var(--foreground);
}
.wox-msign__plan.is-on {
  border-color: var(--foreground);
  background: var(--card);
  box-shadow: 0 0 0 1px var(--foreground);
}
.wox-msign__plan-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.wox-msign__plan-name {
  font-weight: 800;
  font-size: 0.95rem;
}
.wox-msign__plan-hint {
  font-size: 0.72rem;
  color: var(--muted-foreground);
  font-weight: 600;
}
.wox-msign__legal {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  line-height: 1.4;
  margin: 0.85rem 0 0.7rem;
}
.wox-msign__submit {
  background: var(--foreground) !important;
  color: var(--background) !important;
  border: 0 !important;
  border-radius: 14px !important;
  font-weight: 800 !important;
  min-height: 48px;
}
.wox-msign__submit:hover:not(:disabled) {
  opacity: 0.92;
}
.wox-msign__submit:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}
.wox-msign__login {
  text-align: center;
  font-size: 0.88rem;
  color: var(--muted-foreground);
  margin-top: 0.85rem;
}
.wox-msign__login a {
  color: var(--foreground);
  font-weight: 800;
}
.wox-msign .el-card,
.wox-msign__service.el-card,
.wox-msign .el-card__body {
  background: var(--secondary) !important;
  color: var(--foreground) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}
.wox-msign__services {
  background: var(--secondary);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 0.75rem 0.85rem 0.55rem;
  margin-bottom: 0.75rem;
}
.wox-msign__services .wox-msign__label {
  margin-top: 0;
}
.wox-msign__service-list {
  display: flex;
  flex-direction: column;
}
.wox-msign__service-row {
  padding: 0.45rem 0;
  border-top: 1px solid var(--border);
}
.wox-msign__service-row:first-child { border-top: 0; }
.wox-msign__check {
  align-items: flex-start !important;
  height: auto !important;
  width: 100%;
  margin-right: 0 !important;
  white-space: normal !important;
}
.wox-msign__check .el-checkbox__input { margin-top: 0.2rem; }
.wox-msign__check .el-checkbox__label {
  color: var(--foreground) !important;
  padding-left: 0.65rem;
  line-height: 1.35;
  white-space: normal !important;
}
.wox-msign .el-checkbox__inner {
  width: 18px !important;
  height: 18px !important;
  background-color: var(--card) !important;
  border: 1.5px solid var(--muted-foreground) !important;
  border-radius: 4px !important;
}
.wox-msign .el-checkbox__inner::after {
  border-color: var(--background) !important;
}
.wox-msign .el-checkbox.is-checked .el-checkbox__inner {
  background-color: var(--foreground) !important;
  border-color: var(--foreground) !important;
}
.wox-msign .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: var(--foreground) !important;
  border-color: var(--foreground) !important;
}
.wox-msign__service-copy {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.wox-msign__service-name {
  font-weight: 800;
  font-size: 0.92rem;
}
.wox-msign__service-desc,
.wox-msign__service-fee {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--muted-foreground);
  line-height: 1.35;
}
.wox-msign__service-fee { font-weight: 700; }
.wox-msign-why {
  background: var(--background);
  padding: 1.5rem 0 2.5rem;
}
.wox-msign-why__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  margin: 0 0 0.9rem;
  color: var(--foreground);
}
.wox-msign-why__grid {
  display: grid;
  gap: 0.7rem;
}
.wox-msign-why__card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1rem 1.05rem;
}
.wox-msign-why__card .zmdi {
  font-size: 1.35rem;
  color: var(--foreground);
  margin-bottom: 0.4rem;
  display: block;
}
.wox-msign-why__card h3 {
  font-size: 1rem;
  font-weight: 800;
  margin: 0 0 0.2rem;
  color: var(--foreground);
}
.wox-msign-why__kicker {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--foreground);
  margin: 0 0 0.25rem;
}
.wox-msign-why__card p {
  font-size: 0.86rem;
  color: var(--muted-foreground);
  margin: 0;
}
.wox-msign-steps__title { margin-top: 2rem; }
.wox-msign-steps {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}
.wox-msign-steps__item {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 0.9rem 1rem;
}
.wox-msign-steps__num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--foreground);
  color: var(--background);
  font-weight: 800;
  font-size: 0.85rem;
  display: grid;
  place-items: center;
}
.wox-msign-steps__item h3 {
  font-size: 0.98rem;
  font-weight: 800;
  margin: 0 0 0.15rem;
  color: var(--foreground);
}
.wox-msign-steps__item p {
  margin: 0;
  font-size: 0.86rem;
  color: var(--muted-foreground);
}
.wox-msign-faq {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.wox-msign-faq__item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0.2rem 0.95rem;
}
.wox-msign-faq__item summary {
  cursor: pointer;
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--foreground);
  padding: 0.75rem 0;
  list-style: none;
}
.wox-msign-faq__item summary::-webkit-details-marker { display: none; }
.wox-msign-faq__item summary::after {
  content: "+";
  float: right;
  font-weight: 700;
  color: var(--muted-foreground);
}
.wox-msign-faq__item[open] summary::after { content: "–"; }
.wox-msign-faq__item p {
  margin: 0 0 0.85rem;
  font-size: 0.88rem;
  color: var(--muted-foreground);
  line-height: 1.45;
}
.wox-msign-closer {
  text-align: center;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--foreground);
  margin: 0.5rem 0 0.6rem;
}
.wox-msign-closer__link {
  text-align: center;
  margin: 0 0 0.5rem;
}
.wox-msign-closer__link a {
  display: inline-block;
  background: var(--foreground);
  color: var(--background) !important;
  font-weight: 800;
  border-radius: 14px;
  padding: 0.7rem 1.2rem;
}
@media (min-width: 992px) {
  .wox-msign__title { font-size: 2rem; }
  .wox-msign__card { padding: 1.35rem 1.4rem 1.5rem; }
  .wox-msign-why__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
  .wox-msign-why__title {
    text-align: center;
    font-size: 1.6rem;
    margin-bottom: 1.4rem;
  }
  .wox-msign-steps {
    grid-template-columns: repeat(3, 1fr);
  }
  .wox-msign-faq { max-width: 720px; margin-left: auto; margin-right: auto; }
}

.wox-rsign .wox-msign__main { max-width: 560px; }
.wox-rsign .wox-msign__submit.el-button,
.wox-msign .el-button.wox-msign__submit {
  background: var(--foreground) !important;
  border-color: var(--foreground) !important;
  color: var(--background) !important;
  border-radius: 14px !important;
  font-weight: 800 !important;
  min-height: 48px;
}
.wox-rsign .wox-msign__submit.el-button.is-disabled,
.wox-rsign .wox-msign__submit.el-button.is-disabled:hover {
  opacity: 0.38;
  background: var(--foreground) !important;
  color: var(--background) !important;
}

/* Rendeléseim – tiszta lista */
.wox-orders { max-width: 820px; }
.wox-orders__search { margin-bottom: 1rem; }
.wox-orders__search .search-geocomplete { width: 100%; }
.wox-orders__group { margin-bottom: 1.35rem; }
.wox-orders__group:not(:has(.wox-orders__card)) { display: none; }
.wox-orders__heading {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin: 0 0 0.55rem 0.15rem;
}
.wox-orders__card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 0.8rem 0.85rem;
  margin-bottom: 0.55rem;
  overflow: visible;
  position: relative;
}
.wox-orders__card:hover { background: color-mix(in oklch, var(--card) 88%, var(--muted)); }
.wox-orders__logo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--secondary);
}
.wox-orders__logo,
.wox-orders__body { cursor: pointer; }
.wox-orders__body { flex: 1; min-width: 0; }
.wox-orders__top {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}
.wox-orders__name {
  font-size: 0.98rem;
  font-weight: 800;
  margin: 0;
  color: var(--foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wox-orders__status {
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 800;
  border-radius: 999px;
  padding: 0.15rem 0.5rem;
  line-height: 1.3;
}
.wox-orders__meta,
.wox-orders__date {
  margin: 0.12rem 0 0;
  font-size: 0.8rem;
  color: var(--muted-foreground);
}
.wox-orders__actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}
.wox-orders__track {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: var(--foreground) !important;
  color: var(--background) !important;
  font-weight: 800;
  font-size: 0.78rem;
  border-radius: 999px;
  padding: 0.4rem 0.7rem;
  text-decoration: none !important;
}
.wox-orders a.wox-orders__track:hover,
.wox-orders a.wox-orders__track:focus,
.wox-orders a.wox-orders__track:active {
  color: var(--background) !important;
  background: var(--foreground) !important;
  opacity: 0.88;
  text-decoration: none !important;
}
.wox-orders .dropdown-menu {
  z-index: 40;
  min-width: 220px;
}
.wox-orders .dropdown-item {
  display: flex !important;
  align-items: center;
  gap: 0.7rem;
  color: var(--foreground) !important;
  background: transparent !important;
}
.wox-orders .dropdown-item i,
.wox-orders .dropdown-item .zmdi {
  width: 1.2rem;
  flex-shrink: 0;
  text-align: center;
  margin-right: 0 !important;
  opacity: 0.85;
}
.wox-orders .dropdown-item:hover,
.wox-orders .dropdown-item:focus {
  background: var(--muted) !important;
  color: var(--foreground) !important;
}
.wox-orders .dropdown-item[disabled],
.wox-orders .dropdown-item:disabled {
  background: transparent !important;
  color: var(--muted-foreground) !important;
  opacity: 0.45;
}
.wox-orders .wox-orders__cancel,
.wox-orders .wox-orders__cancel:hover {
  color: #e07a7a !important;
}
.wox-orders__more {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--muted-foreground) !important;
  border-radius: 50%;
}
.wox-orders__more:hover { background: var(--muted); color: var(--foreground) !important; }
.wox-orders__empty {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.4rem 1.2rem;
  text-align: center;
}
.wox-orders__empty h2 { font-size: 1.1rem; font-weight: 800; margin: 0 0 0.3rem; }
.wox-orders__empty p { color: var(--muted-foreground); margin: 0 0 0.9rem; }
.wox-orders__empty-btn {
  display: inline-block;
  background: var(--foreground);
  color: var(--background) !important;
  font-weight: 800;
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
}
@media (min-width: 992px) {
  .wox-orders__card { padding: 0.95rem 1.05rem; }
  .wox-orders__logo { width: 56px; height: 56px; }
}

/* Címek – tiszta kártyák */
.wox-addr { max-width: 860px; }
.wox-addr__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.25rem 0 1rem;
}
.wox-addr__title {
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0;
  color: var(--foreground);
}
.wox-addr__add {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--foreground);
  color: var(--background) !important;
  font-weight: 800;
  font-size: 0.86rem;
  border-radius: 999px;
  padding: 0.5rem 0.95rem;
  text-decoration: none !important;
  white-space: nowrap;
}
.wox-addr__add:hover { opacity: 0.9; color: var(--background) !important; }
.wox-addr__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7rem;
}
.wox-addr__card {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.75rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 0.95rem 1rem;
}
.wox-addr__pin {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--secondary);
  color: var(--foreground);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.wox-addr__body { flex: 1; min-width: 0; }
.wox-addr__label {
  font-size: 1rem;
  font-weight: 800;
  margin: 0 0 0.2rem;
  color: var(--foreground);
}
.wox-addr__line {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--muted-foreground);
}
.wox-addr__actions {
  display: flex;
  gap: 0.45rem;
  width: 100%;
  padding-top: 0.35rem;
}
.wox-addr__btn {
  flex: 1;
  text-align: center;
  font-weight: 700;
  font-size: 0.84rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.4rem 0.7rem;
  color: var(--foreground) !important;
  background: transparent;
}
.wox-addr__btn:hover { background: var(--muted); color: var(--foreground) !important; }
.wox-addr__btn--danger { color: #e07a7a !important; border-color: color-mix(in oklch, #e07a7a 35%, var(--border)); }
.wox-addr__btn--danger:hover { background: color-mix(in oklch, #e07a7a 12%, var(--card)); color: #f0a0a0 !important; }
.wox-addr__empty {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.4rem 1.1rem;
  text-align: center;
}
.wox-addr__empty p { margin: 0 0 0.85rem; color: var(--muted-foreground); }
@media (min-width: 768px) {
  .wox-addr__list { grid-template-columns: 1fr 1fr; }
  .wox-addr__empty { grid-column: 1 / -1; }
}

/* Fizetések – tiszta kártyák */
.wox-payments { max-width: 860px; }
.wox-payments__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.25rem 0 1rem;
}
.wox-payments__title {
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0;
  color: var(--foreground);
}
.wox-payments__add {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--foreground);
  color: var(--background) !important;
  font-weight: 800;
  font-size: 0.86rem;
  border-radius: 999px;
  padding: 0.5rem 0.95rem;
  text-decoration: none !important;
  white-space: nowrap;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.wox-payments__add:hover { opacity: 0.9; color: var(--background) !important; }
.wox-payments__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7rem;
}
.wox-payments__card {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.75rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 0.95rem 1rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wox-payments__card:hover {
  border-color: color-mix(in oklch, var(--foreground) 20%, var(--border));
}
.wox-payments__icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--secondary);
  color: var(--foreground);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 1.15rem;
}
.wox-payments__icon-wrap i {
  line-height: 1;
}
.wox-payments__logo {
  max-width: 22px;
  max-height: 22px;
  object-fit: contain;
}
.wox-payments__body {
  flex: 1;
  min-width: 0;
}
.wox-payments__header-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.2rem;
}
.wox-payments__label {
  font-size: 0.98rem;
  font-weight: 800;
  margin: 0;
  color: var(--foreground);
  word-break: break-word;
}
.wox-payments__badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: color-mix(in oklch, var(--foreground) 10%, transparent);
  color: var(--muted-foreground);
  border: 1px solid color-mix(in oklch, var(--foreground) 16%, transparent);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.wox-payments__line {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--muted-foreground);
}
.wox-payments__actions {
  display: flex;
  gap: 0.45rem;
  width: 100%;
  padding-top: 0.35rem;
}
.wox-payments__btn {
  flex: 1;
  text-align: center;
  font-weight: 700;
  font-size: 0.84rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.4rem 0.7rem;
  color: var(--foreground) !important;
  background: transparent;
  text-decoration: none !important;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.wox-payments__btn:hover {
  background: var(--muted);
  color: var(--foreground) !important;
}
.wox-payments__btn--default {
  color: var(--muted-foreground) !important;
}
.wox-payments__btn--default:hover {
  color: var(--foreground) !important;
}
.wox-payments__btn--danger {
  color: #e07a7a !important;
  border-color: color-mix(in oklch, #e07a7a 35%, var(--border));
}
.wox-payments__btn--danger:hover {
  background: color-mix(in oklch, #e07a7a 12%, var(--card));
  color: #f0a0a0 !important;
}
.wox-payments__empty {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.4rem 1.1rem;
  text-align: center;
  grid-column: 1 / -1;
}
.wox-payments__empty p {
  margin: 0 0 0.85rem;
  color: var(--muted-foreground);
}
@media (min-width: 768px) {
  .wox-payments__list {
    grid-template-columns: 1fr 1fr;
  }
  .wox-payments__empty {
    grid-column: 1 / -1;
  }
}


/* ==========================================================================
   45. Sötét mód – felugró bezárás (X) + elsődleges gombok
   A régi „REVIEW MODAL” blokk minden ablakra ráöntötte a piros kört és
   a neonzöld (#83ea00) gombokat. Itt csak html.dark-ban javítjuk:
   Cím részletei-stílusú szürke X, krémszínű CTA, Mégse nem zöldül.
   Térkép-pin / track / világos mód érintetlen.
   ========================================================================== */

/* --- Bezárás: halk kör + mindig látható × --- */
html.dark .el-dialog__headerbtn,
html.dark .el-dialog button.el-dialog__headerbtn,
html.dark .wox-driver-review-dialog .el-dialog__headerbtn,
html.dark #footer-none-bg .el-dialog__headerbtn,
html.dark .modal-header .close,
html.dark .modal-header .btn-close,
html.dark .modal-content .close,
html.dark button.close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  border: 1px solid var(--border) !important;
  background: var(--muted) !important;
  background-color: var(--muted) !important;
  color: var(--foreground) !important;
  opacity: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  font-size: 0 !important;
  line-height: 1 !important;
  overflow: hidden !important;
  z-index: 5;
}

html.dark .el-dialog__headerbtn:hover,
html.dark .el-dialog button.el-dialog__headerbtn:hover,
html.dark .wox-driver-review-dialog .el-dialog__headerbtn:hover,
html.dark #footer-none-bg .el-dialog__headerbtn:hover,
html.dark .modal-header .close:hover,
html.dark .modal-header .btn-close:hover,
html.dark .modal-content .close:hover,
html.dark button.close:hover {
  background: var(--accent) !important;
  background-color: var(--accent) !important;
  color: var(--foreground) !important;
  border-color: var(--border) !important;
  filter: none !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Az Element Plus SVG/ikon gyakran összeesik — elrejtjük, CSS × jön helyette */
html.dark .el-dialog__headerbtn i,
html.dark .el-dialog__headerbtn svg,
html.dark .el-dialog__headerbtn .el-icon,
html.dark .el-dialog__headerbtn .el-dialog__close {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  font-size: 0 !important;
  opacity: 0 !important;
}

html.dark .el-dialog__headerbtn::after,
html.dark .el-dialog button.el-dialog__headerbtn::after,
html.dark .modal-header .close::after,
html.dark .modal-header .btn-close::after,
html.dark .modal-content .close::after,
html.dark button.close::after {
  content: "\00d7";
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1;
  color: var(--foreground);
  display: block;
}

/* Bootstrap close belül van egy × — azt is láthatóvá tesszük, a ::after mellett ne duplázódjon */
html.dark .modal-header .close span,
html.dark .modal-content .close span,
html.dark button.close span {
  display: none !important;
}

/* Cím részletei & Fizetés hozzáadása & Modális bezárás (btn-circle): jobb felső sarok, halk szürke kör */
.modal-content {
  position: relative !important;
}
.modal-body {
  position: relative !important;
}
html.dark .modal-header > a.btn-circle,
html.dark .modal-header > a.btn-black.btn-circle,
html.dark .modal-body > a.btn-circle,
html.dark .modal-body > a.btn-black.btn-circle,
html.dark .modal-body > a[class*="btn-circle"],
html.dark .modal-content a.btn-circle,
html.dark .modal-content a.btn-black.btn-circle,
html.dark .modal a.btn-circle,
html.dark .modal a.btn-black.btn-circle,
html.dark .modal a[class*="btn-circle"] {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 50% !important;
  background: var(--muted) !important;
  background-color: var(--muted) !important;
  color: var(--foreground) !important;
  border: 1px solid var(--border) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  text-decoration: none !important;
  z-index: 20 !important;
}
html.dark .modal-header > a.btn-circle:hover,
html.dark .modal-header > a.btn-black.btn-circle:hover,
html.dark .modal-body > a.btn-circle:hover,
html.dark .modal-body > a.btn-black.btn-circle:hover,
html.dark .modal-body > a[class*="btn-circle"]:hover,
html.dark .modal-content a.btn-circle:hover,
html.dark .modal-content a.btn-black.btn-circle:hover,
html.dark .modal a.btn-circle:hover,
html.dark .modal a.btn-black.btn-circle:hover,
html.dark .modal a[class*="btn-circle"]:hover {
  background: var(--accent) !important;
  background-color: var(--accent) !important;
  color: var(--foreground) !important;
  border-color: var(--border) !important;
  transform: none !important;
  box-shadow: none !important;
}
html.dark .modal-header > a.btn-circle i,
html.dark .modal-header > a.btn-black.btn-circle i,
html.dark .modal-body > a.btn-circle i,
html.dark .modal-body > a.btn-black.btn-circle i,
html.dark .modal-body > a[class*="btn-circle"] i,
html.dark .modal-content a.btn-circle i,
html.dark .modal-content a.btn-black.btn-circle i,
html.dark .modal a.btn-circle i,
html.dark .modal a.btn-black.btn-circle i,
html.dark .modal a[class*="btn-circle"] i {
  color: var(--foreground) !important;
  font-size: 1.2rem !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* --- Elsődleges gombok: neonzöld helyett krém (shadcn dark) --- */
html.dark .btn-green,
html.dark .btn-green:focus,
html.dark .btn-green:active,
html.dark .btn-primary,
html.dark .btn-primary:focus,
html.dark .el-button--primary:not(.is-text):not(.is-plain),
html.dark .el-button--success:not(.is-text):not(.is-plain),
html.dark .btn-green-circle {
  background: var(--foreground) !important;
  background-color: var(--foreground) !important;
  color: var(--background) !important;
  border-color: transparent !important;
  filter: none !important;
  --el-button-text-color: var(--background);
  --el-button-hover-text-color: var(--background);
  --el-button-bg-color: var(--foreground);
  --el-button-hover-bg-color: var(--foreground);
}

html.dark .btn-green:hover,
html.dark .btn-primary:hover,
html.dark .el-button--primary:not(.is-text):not(.is-plain):hover,
html.dark .el-button--success:not(.is-text):not(.is-plain):hover,
html.dark .btn-green-circle:hover {
  background: var(--foreground) !important;
  background-color: var(--foreground) !important;
  color: var(--background) !important;
  filter: none !important;
  opacity: 0.92;
}

html.dark .btn-green-line,
html.dark .btn-outline-primary {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--foreground) !important;
  border: 1.5px solid var(--border) !important;
}
html.dark .btn-green-line:hover,
html.dark .btn-outline-primary:hover {
  background: var(--muted) !important;
  background-color: var(--muted) !important;
  color: var(--foreground) !important;
  border-color: var(--border) !important;
}

/* A review-modal blokk MINDEN modal/dialog gombot zöldre + 100% szélesre fest.
   Először semlegesítjük, aztán az elsődlegeseket krémezük. */
html.dark .modal-footer .btn,
html.dark .modal-footer button,
html.dark .modal-content button.btn,
html.dark .modal-content .btn-submit,
html.dark .el-dialog button,
html.dark .el-dialog .el-button {
  background: var(--secondary) !important;
  background-color: var(--secondary) !important;
  color: var(--foreground) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
  width: auto !important;
  max-width: 100%;
}

html.dark .modal-footer .btn:hover,
html.dark .modal-footer button:hover,
html.dark .modal-content button.btn:hover,
html.dark .el-dialog button:hover,
html.dark .el-dialog .el-button:hover {
  background: var(--accent) !important;
  background-color: var(--accent) !important;
  color: var(--foreground) !important;
  box-shadow: none !important;
  transform: none !important;
}

html.dark .modal-footer .btn-green,
html.dark .modal-footer .btn-primary,
html.dark .modal-footer button.btn-green,
html.dark .modal-footer button.btn-primary,
html.dark .modal-footer button[type="submit"],
html.dark .modal-body .btn-green,
html.dark .modal-body .btn-primary,
html.dark .modal-content .btn-green,
html.dark .modal-content .btn-primary,
html.dark .modal-content button.btn-green,
html.dark .modal-content button.btn-primary,
html.dark .modal-content button[type="submit"],
html.dark .modal-content .btn-submit,
html.dark .el-dialog .btn-green,
html.dark .el-dialog button.el-button--primary,
html.dark .el-dialog button.el-button--success,
html.dark .el-dialog button[type="submit"],
html.dark #itemModal .add_to_cart,
html.dark #itemModal .btn-green,
html.dark #reviewModal .modal-footer button,
html.dark #reviewModal .modal-footer button.btn-black {
  background: var(--foreground) !important;
  background-color: var(--foreground) !important;
  color: var(--background) !important;
  border: 0 !important;
  box-shadow: none !important;
  width: auto !important;
}

html.dark .modal-footer .btn-green:hover,
html.dark .modal-footer .btn-primary:hover,
html.dark .modal-footer button.btn-green:hover,
html.dark .modal-footer button[type="submit"]:hover,
html.dark .modal-content .btn-green:hover,
html.dark .modal-content button.btn-green:hover,
html.dark .modal-content button[type="submit"]:hover,
html.dark .el-dialog .btn-green:hover,
html.dark .el-dialog button.el-button--primary:hover,
html.dark .el-dialog button.el-button--success:hover,
html.dark .el-dialog button[type="submit"]:hover,
html.dark #itemModal .add_to_cart:hover,
html.dark #itemModal .btn-green:hover,
html.dark #reviewModal .modal-footer button:hover,
html.dark #reviewModal .modal-footer button.btn-black:hover {
  background: var(--foreground) !important;
  background-color: var(--foreground) !important;
  color: var(--background) !important;
  opacity: 0.92;
  box-shadow: none !important;
}

/* Mégse / másodlagos: maradjon halk, ne zöldüljön */
html.dark .modal-footer .btn-light,
html.dark .modal-body .btn-light,
html.dark .modal-content .btn-light,
html.dark .el-dialog .el-button--default,
html.dark .el-dialog .btn-white,
html.dark .el-dialog button.el-button:not(.el-button--primary):not(.el-button--success):not(.el-button--danger) {
  background: var(--secondary) !important;
  background-color: var(--secondary) !important;
  color: var(--foreground) !important;
  border: 1px solid var(--border) !important;
}

/* A bezáró gomb NE örökölje a fenti button-festést */
html.dark .el-dialog__headerbtn,
html.dark .el-dialog button.el-dialog__headerbtn,
html.dark .el-dialog .el-dialog__headerbtn.el-button {
  background: var(--muted) !important;
  background-color: var(--muted) !important;
  color: var(--foreground) !important;
  border: 1px solid var(--border) !important;
  width: 36px !important;
  min-width: 36px !important;
  box-shadow: none !important;
}

/* Kereső nyíl-gomb: maradjon a saját (fordított) stílusa */
/* ==========================================================================
   MENTETT ÉTTERMEK (SAVED STORES / FAVOURITES - SHADCN 2-COL DESIGN)
   ========================================================================== */

.wox-fav-grid {
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}
.wox-fav-grid > [class*="col-"] {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.wox-fav-card {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-2xl) !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.22s ease;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.wox-fav-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in oklch, var(--foreground) 22%, transparent) !important;
}

.wox-fav-card__media {
  position: relative;
  height: 200px;
  width: 100%;
  overflow: hidden;
  background: var(--muted);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}
.wox-fav-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.wox-fav-card:hover .wox-fav-card__img {
  transform: scale(1.05);
}

.wox-fav-card__heart {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
}
.wox-fav-card__heart a.btn,
.wox-fav-card__heart .btn {
  width: 38px;
  height: 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.wox-fav-card__heart a.btn:hover,
.wox-fav-card__heart .btn:hover {
  transform: scale(1.1);
  background: rgba(0, 0, 0, 0.75) !important;
}
.wox-fav-card__heart .zmdi-favorite {
  color: #ef4444 !important;
  font-size: 1.25rem;
}
.wox-fav-card__heart .zmdi-favorite-outline {
  color: #ffffff !important;
  font-size: 1.25rem;
}

.wox-fav-card__status-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 5;
  background: rgba(15, 15, 18, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: inline-flex;
  align-items: center;
}
.wox-fav-card__status-badge--holiday {
  background: rgba(245, 158, 11, 0.85);
  color: #000;
}

.wox-fav-card__time {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 5;
  background: rgba(15, 15, 18, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: inline-flex;
  align-items: center;
}

.wox-fav-card__body {
  padding: 1.15rem 1.25rem !important;
}
.wox-fav-card__title {
  font-size: 1.2rem;
  font-weight: 800;
  font-family: var(--font-display);
  color: var(--foreground);
  transition: color 0.15s ease;
}
.wox-fav-card__title-link:hover .wox-fav-card__title {
  color: var(--primary);
}
.wox-fav-card__cuisines {
  color: var(--muted-foreground);
  font-size: 0.88rem;
  line-height: 1.4;
}
.wox-fav-card__next-opening {
  color: #f59e0b;
  font-weight: 600;
}

.wox-fav-card__footer {
  border-color: var(--border) !important;
}
.wox-fav-card__rating-pill {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--foreground);
}
.wox-fav-card__rating-pill .zmdi-star {
  color: #f59e0b;
  font-size: 1.1rem;
}
.wox-fav-card__free-tag {
  color: #10b981;
  font-weight: 700;
  font-size: 0.85rem;
}
.wox-fav-card__delivery-tag {
  color: var(--muted-foreground);
  font-size: 0.85rem;
}

.wox-fav-card__removed-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 8;
}
.is-removed .wox-fav-card {
  opacity: 0.6;
}

.wox-fav-empty {
  background: var(--card) !important;
  border: 1px dashed var(--border) !important;
  border-radius: var(--radius-2xl) !important;
}
.wox-fav-empty__icon {
  font-size: 3.5rem;
  color: var(--muted-foreground);
}
.wox-fav-card-skeleton {
  background: var(--card) !important;
  border-radius: var(--radius-2xl) !important;
  border: 1px solid var(--border) !important;
}

/* --------------------------------------------------------------------------
   Mobil nyelvválasztó (hamburger) – 5 sor, görgethető, gomb szélessége
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .el-dropdown__popper:has(.el-image),
  .el-popper.el-dropdown__popper:has(.el-dropdown-menu) {
    width: calc(min(360px, 86vw) - 32px) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 24px) !important;
    box-sizing: border-box !important;
    overflow: hidden;
    border-radius: 16px !important;
  }
  .el-dropdown__popper:has(.el-image) .el-dropdown-menu,
  .el-popper.el-dropdown__popper .el-dropdown-menu {
    max-height: 222px !important; /* 5 tétel + görgetés jelzés */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 6px !important;
    margin: 0 !important;
    border-radius: 16px !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
  }
  .el-dropdown__popper:has(.el-image) .el-dropdown-menu::-webkit-scrollbar {
    width: 6px;
  }
  .el-dropdown__popper:has(.el-image) .el-dropdown-menu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.28);
    border-radius: 99px;
  }
  .el-dropdown__popper:has(.el-image) .el-dropdown-menu__item,
  .el-popper.el-dropdown__popper .el-dropdown-menu__item {
    min-height: 42px !important;
    height: 42px !important;
    padding: 0 10px !important;
    font-size: 0.82rem !important;
    line-height: 1.2 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px;
    box-sizing: border-box !important;
  }
  /* A sablon egymásba rakott dropdown-itemjei ne duplázzák a magasságot. */
  .el-dropdown__popper:has(.el-image) .el-dropdown-menu__item .el-dropdown-menu__item {
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  .el-dropdown__popper:has(.el-image) .el-image {
    width: 22px !important;
    height: 16px !important;
    flex-shrink: 0;
    border-radius: 3px;
    overflow: hidden;
  }
}

/* Vendég Live Chat iframe – a fiók sötét oldalsávjához illeszkedik */
html.dark iframe.wox-chat-frame,
html.dark iframe.responsive-iframe {
  background: var(--background) !important;
  border: 0;
  display: block;
  width: 100%;
}
body.column2-layout #main-container.wox-livechat-main {
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
}
body.column2-layout #main-container.wox-livechat-main iframe.wox-chat-frame,
body.column2-layout #main-container.wox-livechat-main iframe.responsive-iframe {
  height: calc(100vh - 64px);
  min-height: calc(100dvh - 64px);
}
@media (max-width: 991.98px) {
  body.column2-layout #main-container.wox-livechat-main {
    padding-left: 0;
  }
}
.q-notifications .wox-chat-error-toast {
  max-width: min(520px, 94vw) !important;
  white-space: normal !important;
  line-height: 1.45;
}
.q-notifications .wox-chat-error-toast a {
  pointer-events: auto !important;
}




/* ===== Értesítések lista: fehér sávok javítása dark módban ===== */
/* A style.css-ben hardcoded világos háttér (#f1f5f7) és elválasztók (#f4f4f4)
   dark módban fehér sávokként jelentek meg. Itt token-alapú sötét színekkel
   felülírjuk őket, letisztult shadcn dark stílusban. */
html.dark .notification-dropdown,
html.dark .notification-dropdown ul,
html.dark .notification-dropdown ul.normal {
  background: transparent !important;
}
html.dark .notification-dropdown a,
html.dark .notification-dropdown ul li a {
  background: transparent;
  color: var(--foreground) !important;
  transition: background-color var(--transition-fast, 0.15s ease);
}
html.dark .notification-dropdown a.active,
html.dark .notification-dropdown ul li a:hover,
html.dark .notification-dropdown ul li a:focus {
  background: var(--muted) !important;
}
html.dark .notification-dropdown ul li {
  background: transparent !important;
  border-bottom: 1px solid var(--border) !important;
}
html.dark .notification-dropdown ul li:last-child {
  border-bottom: none !important;
}
html.dark .notification-dropdown .text-heading {
  color: var(--foreground) !important;
  font-weight: 600;
}
html.dark .notification-dropdown .dropdown-text-light {
  color: var(--muted-foreground) !important;
}
html.dark .notification-dropdown .bg-soft-primary {
  background: color-mix(in oklch, var(--primary) 18%, transparent) !important;
}
html.dark .notification-dropdown .bg-soft-primary i {
  color: var(--primary) !important;
}
html.dark .cover-loader {
  background-color: color-mix(in oklch, var(--background) 70%, transparent) !important;
}

/* ===== Étterem Saját Kiszállítás Jelzések (Self-delivery badges & banners) ===== */
.wox-self-delivery-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: color-mix(in oklch, var(--primary) 12%, transparent);
  color: var(--primary);
  border: 1px solid color-mix(in oklch, var(--primary) 32%, transparent);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 9999px;
  cursor: pointer;
  outline: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.wox-self-delivery-badge:hover {
  background: color-mix(in oklch, var(--primary) 22%, transparent);
  border-color: var(--primary);
  transform: translateY(-1px);
}
.wox-self-delivery-badge:active {
  transform: translateY(0);
}

/* Modal Popup (shadcn UI inspired, dark-mode & mobile-friendly) */
.wox-sd-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.wox-sd-modal.is-open {
  opacity: 1;
  visibility: visible;
}
.wox-sd-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.wox-sd-modal__content {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: var(--card, #121215);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
  border-radius: 20px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05);
  overflow: hidden;
  color: var(--foreground, #f4f4f5);
  transform: scale(0.94) translateY(10px);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}
.wox-sd-modal.is-open .wox-sd-modal__content {
  transform: scale(1) translateY(0);
}
.wox-sd-modal__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 20px 14px 20px;
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}
.wox-sd-modal__icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: color-mix(in oklch, var(--primary) 18%, transparent);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.wox-sd-modal__titles {
  flex: 1;
  min-width: 0;
}
.wox-sd-modal__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--foreground, #ffffff);
  line-height: 1.3;
}
.wox-sd-modal__subtitle {
  margin: 2px 0 0 0;
  font-size: 13px;
  color: var(--muted-foreground, #a1a1aa);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wox-sd-modal__close {
  background: transparent;
  border: none;
  color: var(--muted-foreground, #a1a1aa);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.wox-sd-modal__close:hover {
  background: var(--muted, rgba(255, 255, 255, 0.08));
  color: var(--foreground, #ffffff);
}
.wox-sd-modal__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.wox-sd-modal__feature {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--muted, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.06));
  padding: 12px 14px;
  border-radius: 14px;
}
.wox-sd-modal__f-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: color-mix(in oklch, var(--primary) 14%, transparent);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
  margin-top: 2px;
}
.wox-sd-modal__f-text {
  flex: 1;
}
.wox-sd-modal__f-text strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--foreground, #ffffff);
  margin-bottom: 2px;
}
.wox-sd-modal__f-text p {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted-foreground, #a1a1aa);
}
.wox-sd-modal__call-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px 16px;
  border-radius: 12px;
  background: color-mix(in oklch, var(--primary) 14%, transparent);
  border: 1px solid color-mix(in oklch, var(--primary) 30%, transparent);
  color: var(--primary) !important;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
  transition: all 0.2s ease;
}
.wox-sd-modal__call-btn:hover {
  background: color-mix(in oklch, var(--primary) 24%, transparent);
  border-color: var(--primary);
}
.wox-sd-modal__footer {
  padding: 14px 20px 20px 20px;
}
.wox-sd-modal__ok-btn {
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--primary, #3ecf8e);
  color: #000000;
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.wox-sd-modal__ok-btn:hover {
  opacity: 0.9;
}

.wox-self-delivery-checkout-alert {
  background: color-mix(in oklch, var(--primary) 10%, transparent);
  border: 1px solid color-mix(in oklch, var(--primary) 25%, transparent);
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--foreground);
}
.wox-self-delivery-checkout-alert__icon {
  font-size: 18px;
  color: var(--primary);
  margin-top: 2px;
}
.wox-self-delivery-checkout-alert__text {
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted-foreground);
}
.wox-self-delivery-checkout-alert__text strong {
  color: var(--foreground);
  font-size: 13px;
  display: block;
}

.wox-self-delivery-track-banner {
  background: color-mix(in oklch, var(--primary) 8%, var(--card, #1c1c1f));
  border: 1px solid color-mix(in oklch, var(--primary) 20%, transparent);
  border-radius: 12px;
  padding: 12px 14px;
}
.wox-self-delivery-track-desc {
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted-foreground);
}

/* Deep link highlighted item glow animation */
@keyframes woxItemPulseGlow {
  0% {
    box-shadow: 0 0 0 0 color-mix(in oklch, var(--primary) 60%, transparent);
    border-color: var(--primary);
  }
  50% {
    box-shadow: 0 0 25px 8px color-mix(in oklch, var(--primary) 40%, transparent);
    border-color: var(--primary);
    transform: translateY(-2px);
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
    border-color: var(--border);
    transform: translateY(0);
  }
}
.wox-item--highlight {
  animation: woxItemPulseGlow 1.8s ease-in-out 3;
  border: 1px solid var(--primary) !important;
}