/* ═══════════════════════════════════════════════════════════════════════
   Tasty Corner ordering pages — menu, item dialog, cart, checkout.
   Loaded after custom.css. Scoped to .tc-order-page / body.action-menu /
   body.action-checkout so nothing leaks into the landing page.
   Reference: bestilonline.dk (measured): system-ui font, white cards r12,
   amber status pill, 3-col card grid gap 16, 96px image + "+" bubble.
   ═══════════════════════════════════════════════════════════════════════ */

.tc-order-page, .tc-item-modal, .drawer-preview-cart, #ModalTRNOptions, #orderTypeTime,
.tc-order-page :not(i):not([class*="zmdi"]):not([class*="fa-"]):not(.fa):not(.fas):not(.far):not(.fab),
.tc-item-modal :not(i):not([class*="zmdi"]):not([class*="fa-"]):not(.fa):not(.fas):not(.far),
.drawer-preview-cart :not(i):not([class*="zmdi"]):not([class*="fa-"]):not(.fa):not(.fas):not(.far),
#ModalTRNOptions :not(i):not([class*="zmdi"]):not([class*="fa-"]),
#orderTypeTime :not(i):not([class*="zmdi"]):not([class*="fa-"]) {
  font-family: var(--tc-font-ui);
}
.tc-order-page i.zmdi, .tc-item-modal i.zmdi, .drawer-preview-cart i.zmdi, #ModalTRNOptions i.zmdi, #orderTypeTime i.zmdi { font-family: 'Material-Design-Iconic-Font' !important; }
.tc-order-page .fa, .tc-order-page .fas, .tc-order-page .far, .tc-item-modal .fa, .tc-item-modal .fas { font-family: 'Font Awesome 6 Free' !important; }
body.action-menu, body.action-checkout { background: var(--tc-bg); }
body.action-menu .section-menu { background: var(--tc-bg); padding-top: 8px; }
.tc-order-page p { font-size: 14px; }

/* ── shared primitives ────────────────────────────────────────────── */
.tc-btn, .tc-btn:link, .tc-btn:visited {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px; border-radius: 12px !important; font-size: 16px; font-weight: 600;
  line-height: 1.2; border: 2px solid transparent; cursor: pointer; text-decoration: none !important;
  transition: background .15s, border-color .15s, color .15s, transform .1s; white-space: nowrap;
}
.tc-btn:active { transform: translateY(1px); }
.tc-btn-primary, .tc-btn-primary:link, .tc-btn-primary:visited {
  background: var(--tc-primary) !important; border-color: var(--tc-primary) !important; color: #fff !important;
}
.tc-btn-primary:hover, .tc-btn-primary:focus { background: var(--tc-primary-dark) !important; border-color: var(--tc-primary-dark) !important; color: #fff !important; }
.tc-btn-outline, .tc-btn-outline:link, .tc-btn-outline:visited {
  background: #fff !important; border-color: var(--tc-accent) !important; color: var(--tc-ink) !important; font-weight: 500; padding: 12px 16px;
}
.tc-btn-outline:hover, .tc-btn-outline:focus { background: var(--tc-accent-light) !important; color: var(--tc-ink) !important; }
.tc-btn-sm { padding: 9px 16px; font-size: 14px; }
.tc-btn-block { width: 100%; }
/* Vue renders :disabled on an <a> as disabled="false" (a string), and [disabled] matches it — which made
   the desktop "Gå til kassen" unclickable after a time slot was saved (2026-09-16). Only a true value disables. */
.tc-btn[disabled]:not([disabled="false"]), .tc-btn.disabled { opacity: .5; pointer-events: none; }
.tc-btn.loading .label { visibility: hidden; }

.tc-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 4px 10px;
  border-radius: 8px; font-size: 12px; font-weight: 500; color: #374151;
  background: #F3F4F6; border: 1px solid #D1D5DB; cursor: default;
}
.tc-chip-soft { background: var(--tc-accent-light); border-color: var(--tc-accent-light); color: #6b5f5a; }
.tc-pill {
  display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 4px 10px;
  border-radius: 8px; font-size: 12px; font-weight: 500;
}
.tc-pill .tc-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.tc-pill-closed { background: #F3F4F6; border: 1px solid #D1D5DB; color: #374151; }   /* same look as the Afhentning chip */
.tc-pill-closed .tc-dot { background: #F59E0B; }                                         /* only the dot is amber */
.tc-pill-open { background: #F3F4F6; border: 1px solid #D1D5DB; color: #374151; }   /* same chip look as Forudbestil */
.tc-pill-open .tc-dot { background: #16A34A; }                                        /* only the dot is green */
.tc-pill-soft {
  display: inline-block; padding: 4px 12px; border-radius: 999px; background: #F3F4F6; color: #374151; font-size: 12px; font-weight: 500;
}
.tc-step {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--tc-primary); color: #fff; font-weight: 700; font-size: 14px; flex: 0 0 32px;
}
.tc-notice {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 18px; border-radius: 12px; font-size: 14px; line-height: 1.45;
}
.tc-notice-amber { background: #FEF9E7; border: 1px solid #F5D67B; color: #92400E; }
.tc-notice-text strong { display: block; font-size: 15px; }
.tc-notice-text p { margin: 2px 0 0; font-size: 13px !important; color: inherit; }
.tc-link-btn {
  background: none; border: 0; padding: 0; color: var(--tc-ink); font-weight: 600; font-size: 13px; cursor: pointer; text-decoration: underline;
}
.tc-link-btn:hover { color: #000; }

.tc-qty { display: inline-flex; align-items: center; gap: 8px; }
.tc-qty-btn, .tc-qty-btn:link, .tc-qty-btn:visited {
  width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--tc-primary); color: #fff !important; font-size: 14px; text-decoration: none !important; border: 0;
}
.tc-qty-btn.tc-qty-minus { background: var(--tc-accent-light); color: var(--tc-ink) !important; }
.tc-qty-btn:hover { filter: brightness(.95); }
.tc-qty-val { min-width: 20px; text-align: center; font-weight: 700; font-size: 15px; }
.tc-qty-lg .tc-qty-btn { width: 40px; height: 40px; font-size: 16px; }
.tc-qty-lg .tc-qty-val { font-size: 18px; min-width: 28px; }

/* ── store header card ────────────────────────────────────────────── */
.tc-store-header {
  background: #fff; border-bottom: 1px solid #E5E7EB; box-shadow: 0 4px 12px rgba(0,0,0,.06);
}
.tc-store-inner {
  max-width: 1248px; margin: 0 auto; padding: 24px 24px 20px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
}
.tc-store-left { display: flex; gap: 20px; align-items: flex-start; min-width: 0; }
.tc-store-logo {
  width: 96px; height: 96px; flex: 0 0 96px; border-radius: 12px; overflow: hidden; background: #3A322F; padding: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,.12); display: flex; align-items: center; justify-content: center;
}
.tc-store-logo img { width: 100%; height: 100%; object-fit: contain; }
.tc-store-name { margin: 0 0 4px; font-size: 24px !important; font-weight: 700; color: #111827; line-height: 1.2; }
.tc-store-address { margin: 0 0 8px; font-size: 14px !important; color: #6B7280; }
.tc-store-badges { margin-bottom: 8px; }
/* The shop logo, the "Sign in"/"Cart" buttons and the disabled "Pickup" chip were removed from
   this bar — the site header already carries the logo and the person/bag icons (the bag even
   shows the count), and pickup is the only mode, so the chip labelled a choice that does not
   exist. The word survives as plain text next to the chosen time. */
.tc-store-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tc-pickup-mode { font-size: 14px; font-weight: 700; color: #374151; }
.tc-pickup-sep { color: #9CA3AF; }
.tc-pickup-status { font-size: 14px; color: #374151; }
.tc-store-right { display: flex; gap: 12px; align-items: center; flex: 0 0 auto; }
@media (max-width: 767px) {
  .tc-store-inner { flex-direction: column; padding: 16px; gap: 14px; }
  .tc-store-logo { width: 72px; height: 72px; flex-basis: 72px; }
  .tc-store-name { font-size: 20px !important; }
  .tc-store-right { width: 100%; }
  .tc-store-right .tc-btn { flex: 1; padding: 11px 12px; font-size: 15px; }
}
.tc-schedule-wrap { padding-top: 16px; }

/* ── category tab bar + search ────────────────────────────────────── */
/* The sticky element is the column, not the bar inside it: a sticky element only sticks within its
   parent, and the bar's own column is exactly as tall as the bar, so it never stuck at all. The column's
   parent is the .row that spans the whole menu and the cart. */
.tc-menubar-wrap { padding: 0 !important; position: sticky; top: 0; z-index: 20; align-self: flex-start; }
.tc-menubar {
  background: var(--tc-bg);
  border-bottom: 2px solid #E5E7EB; margin-bottom: 20px; padding: 14px 0 0;
}
/* Category tabs: room at both edges, and a real horizontal scroller once there are more categories
   than fit — a thin scrollbar, a fade on the side that has more, and the mouse wheel scrolls it
   sideways (script in store/menu.php). The fade classes are toggled by that script. */
.tc-tabs {
  display: flex; gap: 32px; overflow-x: auto; overflow-y: hidden; white-space: nowrap;
  padding: 0 24px 6px !important; scroll-padding: 0 24px; scroll-behavior: smooth;
  scrollbar-width: thin; scrollbar-color: #C9BDB7 transparent; overscroll-behavior-x: contain;
}
.tc-tabs::-webkit-scrollbar { height: 4px; }
.tc-tabs::-webkit-scrollbar-thumb { background: #C9BDB7; border-radius: 4px; }
.tc-tabs::-webkit-scrollbar-track { background: transparent; }
.tc-tabs.tc-fade-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
.tc-tabs.tc-fade-left { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent); }
.tc-tabs.tc-fade-left.tc-fade-right { -webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
.tc-tabs li:last-child { padding-right: 24px; }
.tc-tabs li { flex: 0 0 auto; }
.tc-tabs a.nav-link, .tc-tabs a.nav-link:link, .tc-tabs a.nav-link:visited {
  display: block; padding: 0 0 12px; margin-bottom: -2px; font-size: 14px; font-weight: 500; color: #111827 !important;
  border-bottom: 2px solid transparent; text-decoration: none !important; background: none !important;
}
.tc-tabs a.nav-link:hover, .tc-tabs a.nav-link.active { color: var(--tc-ink) !important; border-bottom-color: var(--tc-primary); }
@media (max-width: 991px) { .tc-tabs { gap: 22px; padding: 0 16px 6px !important; scroll-padding: 0 16px; } .tc-tabs li:last-child { padding-right: 16px; } }

/* Search: ONE rounded field. The border lives on Element Plus' wrapper, which also holds the
   magnifier prefix, so the icon sits inside the box instead of floating left of it. The inner
   <input> is borderless. (Previously the border was on the input and the wrapper's own border was
   zeroed further down, which is how the icon ended up outside.) */
body.action-menu .menu-center .el-input__wrapper {
  border-radius: 12px !important; box-shadow: 0 0 0 1px #D1D5DB inset !important; background: rgba(255,255,255,.9) !important;
  padding: 0 14px !important; min-height: 44px; box-sizing: border-box; max-width: 100%;
}
body.action-menu .menu-center .el-input__wrapper.is-focus { box-shadow: 0 0 0 2px var(--tc-primary) inset !important; }
body.action-menu .menu-center .el-input__prefix, body.action-menu .menu-center .el-input__prefix-inner { color: #6B7280; margin-right: 8px; }
body.action-menu .menu-center .form-control,
body.action-menu .menu-center input[type=text], body.action-menu .menu-center .el-input__inner {
  border: 0 !important; border-radius: 0 !important; background: transparent !important;
  height: 42px; font-size: 15px; box-shadow: none !important; padding: 0 !important; min-width: 0;
}

/* ── categories + card grid ───────────────────────────────────────── */
.tc-cat { scroll-margin-top: 76px; margin-bottom: 36px; } /* fallback for native #hash jumps; the tab script computes the real bar height */
.tc-cat-title { font-size: 20px !important; font-weight: 700; color: #111827; margin: 0 0 4px; }
.tc-cat-desc { color: #6B7280; margin: 0 0 12px; }
.tc-order-page .tc-menu-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 12px; }
@media (max-width: 1199px) { .tc-order-page .tc-menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .tc-order-page .tc-menu-grid { grid-template-columns: 1fr; } }

.tc-order-page .tc-card {
  display: flex; gap: 12px; align-items: stretch; background: #fff; border-radius: 12px; padding: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04); border: 1px solid #F3F4F6;
  transition: box-shadow .15s; min-height: 156px;
}
.tc-card:hover { box-shadow: 0 6px 16px rgba(0,0,0,.08); }
.tc-card.is-unavailable { opacity: .55; }
.tc-card-body { flex: 1 1 auto; min-width: 0; cursor: pointer; display: flex; flex-direction: column; }
.tc-card-title-row { display: flex; align-items: center; gap: 6px; }
.tc-card-title { font-size: 16px !important; font-weight: 700; color: #111827; margin: 0 0 4px; line-height: 1.3; }
.tc-allergen { padding: 0 !important; color: #9CA3AF !important; font-size: 18px; }
.tc-card-desc {
  color: #6B7280; font-size: 14px !important; margin: 0 0 8px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tc-card-promo { margin-bottom: 6px; align-self: flex-start; }
.tc-card-dish { margin-bottom: 6px; }
.tc-card-price { margin-top: auto; font-size: 16px; font-weight: 700; color: #111827; display: flex; flex-wrap: wrap; gap: 10px; }
.tc-card-price del { color: #6B7280; font-weight: 400; margin-right: 4px; }
.tc-size-name { font-weight: 500; color: #6B7280; margin-right: 4px; }
.tc-card-media { position: relative; flex: 0 0 96px; width: 96px; display: flex; flex-direction: column; align-items: flex-end; }
.tc-card-img { width: 96px; height: 96px; border-radius: 6px; overflow: hidden; background: #F3F4F6; }
.tc-card-img .el-image { width: 96px; height: 96px; display: block; }
.tc-plus, .tc-plus:link, .tc-plus:visited {
  position: absolute; right: -6px; top: 78px; width: 34px; height: 34px; border-radius: 50%;
  background: var(--tc-primary); color: #fff !important; display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; box-shadow: 0 2px 6px rgba(0,0,0,.2); text-decoration: none !important; border: 2px solid #fff;
}
.tc-plus:hover { background: var(--tc-primary-dark); }
.tc-plus.is-disabled { background: #b2b2b2; pointer-events: none; }
.tc-add-btn, .tc-add-btn:link, .tc-add-btn:visited {
  margin-top: 8px; width: 96px; height: 32px; border-radius: 8px; background: var(--tc-primary); color: #fff !important;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; font-weight: 700;
  white-space: nowrap; text-decoration: none !important; box-shadow: 0 1px 2px rgba(0,0,0,.12);
}
.tc-add-btn i, .tc-add-btn span { color: #fff !important; }
.tc-add-btn i { font-size: 14px; }
.tc-add-btn:hover { background: var(--tc-primary-dark); color: #fff !important; }
.tc-add-btn.is-disabled { background: #b2b2b2; pointer-events: none; }
.tc-card-media .tc-qty { position: absolute; right: -6px; top: 78px; background: #fff; border-radius: 999px; padding: 2px; box-shadow: 0 2px 6px rgba(0,0,0,.18); gap: 4px; }
.tc-card-media .tc-qty .tc-qty-btn { width: 28px; height: 28px; font-size: 12px; }
.tc-unavailable { position: absolute; right: 0; top: 100px; font-size: 11px; color: #9CA3AF; }

/* mobile floating "Se ordre" */
body.action-menu .floating-cart button { background: var(--tc-primary) !important; border-radius: 12px !important; padding: 14px 16px; font-weight: 600; }
body.action-menu .floating-cart count { display: inline-flex; margin-left: 8px; background: #fff; color: var(--tc-ink); border-radius: 999px; min-width: 22px; height: 22px; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; padding: 0 6px; position: static; }

/* hide stock sections we don't use on the store page */
body.action-menu #section-review, body.action-menu #section-gallery, body.action-menu #section-about, body.action-menu #section-booking { display: none; }
body.action-menu #section-address { padding-top: 24px; }

/* ── "Din ordre" cart (sticky column + checkout summary) ───────────── */
/* The card look sits on StickySidebar's inner wrapper (the element it actually moves); the outer
   .sticky-cart only holds the height the plugin assigns. Before front.js creates the wrapper, :has()
   puts the same look on the outer so nothing flashes. The inner is capped to the viewport and the
   line items scroll inside it, so the cart can never be taller than the screen. */
body.action-menu #tc-cart-column .sticky-cart { background: transparent; padding: 0; border: 0; box-shadow: none; }
body.action-menu #tc-cart-column .sticky-cart > .inner-wrapper-sticky,
body.action-menu #tc-cart-column .sticky-cart:not(:has(> .inner-wrapper-sticky)) {
  background: #fff; border-radius: 12px; padding: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.06); border: 1px solid #F3F4F6;
}
body.action-menu #tc-cart-column .sticky-cart > .inner-wrapper-sticky {
  display: flex; flex-direction: column; box-sizing: border-box; max-height: calc(100vh - 40px);   /* 20px topSpacing + 20px below */
}
body.action-menu #tc-cart-column .section-cart { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
body.action-menu #tc-cart-column .tc-cart-lines { overflow-y: auto; min-height: 0; flex: 1 1 auto; margin-right: -6px; padding-right: 6px; overscroll-behavior: contain; }
.tc-cart-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.tc-cart-title { font-size: 20px !important; font-weight: 700; color: #111827; }
.tc-cart-sub { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 13px; color: #6B7280; }
.tc-cart-clear { color: var(--tc-ink) !important; text-decoration: underline; font-size: 13px; }
.tc-cart-empty { padding: 28px 8px; color: #6B7280; }
.tc-cart-empty-icon { font-size: 40px; color: #D1D5DB; }
.tc-line { background: #F9FAFB; border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.tc-line-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.tc-line-name { font-weight: 700; font-size: 15px; color: #111827; line-height: 1.3; }
.tc-line-total { font-weight: 700; color: var(--tc-ink); white-space: nowrap; font-size: 15px; }
.tc-line-opt { margin: 4px 0 0; font-size: 12px !important; color: #6B7280; }
.tc-line-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.tc-line-unit { font-size: 13px; color: #6B7280; }
.tc-summary { border-top: 1px solid #E5E7EB; margin-top: 12px; padding-top: 12px; }
.tc-summary-row { display: flex; justify-content: space-between; font-size: 14px; color: #374151; margin-bottom: 6px; }
.tc-summary-row.tc-summary-total { border-top: 1px solid #E5E7EB; margin-top: 8px; padding-top: 10px; font-size: 18px; font-weight: 700; color: #111827; }
.tc-summary-row.tc-summary-total div:last-child { color: var(--tc-ink); }
.tc-summary-row.cnc-bag-fee-row div:first-child i { color: #9CA3AF; font-size: 13px; }
.section-cart .tc-btn-block { margin-top: 12px; }
.section-cart .tc-btn.btn-green { font-size: 16px !important; }

/* drawer version (mobile) */
.drawer-preview-cart .el-drawer__header { margin-bottom: 8px; font-weight: 700; color: #111827; }
.drawer-preview-cart .btn-green { border-radius: 12px !important; padding: 14px 18px !important; font-size: 16px !important; }
.drawer-preview-cart .qty-btn { border-radius: 50% !important; }
/* custom.css forces every element in .el-drawer / #orderTypeTime to #333 — on a red fill that is black
   on red. Drawer controls are black on white; the checkout CTA keeps white text on red. */
.el-overlay .el-drawer.drawer-preview-cart .qty-btn,
.el-overlay .el-drawer.drawer-preview-cart a.rounded-pill.ml-auto {
  background: #fff !important; border: 1px solid #D1D5DB !important; color: var(--tc-ink) !important;
}
.el-overlay .el-drawer.drawer-preview-cart .qty-btn i,
.el-overlay .el-drawer.drawer-preview-cart a.rounded-pill.ml-auto i { color: var(--tc-ink) !important; }
.el-overlay .el-drawer.drawer-preview-cart .btn-green,
.el-overlay .el-drawer.drawer-preview-cart .btn-green *,
.el-overlay .el-drawer.drawer-preview-cart .btn-green span { color: #fff !important; }
/* time picker / order-type dialogs: a black × on a light grey circle, mobile and desktop */
/* The picker is #ModalTRNOptions: <a class="btn btn-black btn-circle"> straight in .modal-body, and a
   .btn-black i rule paints the × white on the light grey circle. Black ×, grey circle, on every modal. */
.modal .modal-content a.btn.btn-black.btn-circle, .modal .modal-content .btn-black.btn-circle {
  background: #E5E7EB !important; color: var(--tc-ink) !important; opacity: 1 !important; border: 0 !important;
}
.modal .modal-content a.btn.btn-black.btn-circle i.zmdi, .modal .modal-content .btn-black.btn-circle i.zmdi,
.modal .modal-content .btn-black.btn-circle i.zmdi-close { color: var(--tc-ink) !important; opacity: 1 !important; font-weight: 700; }

/* ── item dialog ──────────────────────────────────────────────────── */
.tc-item-modal { border-radius: 16px !important; border: 0 !important; overflow: hidden; }
.tc-item-modal .modal-header { position: absolute; top: 12px; right: 12px; z-index: 5; padding: 0 !important; border: 0 !important; }
.tc-item-modal .modal-header .close {
  width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.92); opacity: 1 !important; margin: 0;
  display: flex; align-items: center; justify-content: center; font-size: 26px; color: #111827; box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.tc-item-modal .modal-body { padding: 0 !important; }
.tc-item-modal .item_s img { border-radius: 0 !important; max-height: 340px; object-fit: cover; }
.tc-item-modal .modal-body > div:not(.el-skeleton) > template ~ *,
.tc-item-modal .modal-body h4, .tc-item-modal .modal-body .text-description, .tc-item-modal .modal-body .btn-group,
.tc-item-modal .modal-body .addon-rows, .tc-item-modal .modal-body h5, .tc-item-modal .modal-body .form-label-group,
.tc-item-modal .modal-body p.text-muted, .tc-item-modal .modal-body .owl-carousel { margin-left: 24px !important; margin-right: 24px !important; }
.tc-item-modal .modal-body h4 { font-size: 26px !important; font-weight: 700; color: #111827; margin-top: 20px !important; }
.tc-item-modal .modal-body .btn-group label.btn { border-radius: 10px !important; margin: 0 8px 8px 0; border: 2px solid #E5E7EB !important; background: #fff !important; color: #111827 !important; font-weight: 600; }
.tc-item-modal .modal-body .btn-group label.btn.active { border-color: var(--tc-primary) !important; color: var(--tc-ink) !important; background: #fff !important; }
.tc-item-modal .addon-rows { margin-top: 18px !important; }
.tc-item-modal .addon-rows .heads h5 { font-size: 17px !important; font-weight: 700; margin: 0 0 4px !important; }
.tc-item-modal .list-addon li {
  border: 2px solid #E5E7EB; border-radius: 12px; padding: 14px 16px !important; margin-bottom: 10px; background: #fff;
}
.tc-item-modal .list-addon li:hover { border-color: #D1D5DB; }
.tc-item-modal .list-addon li h6 { font-size: 15px !important; font-weight: 500; }
.tc-item-modal .list-addon li p { font-size: 15px !important; color: #374151; }
.tc-item-modal .custom-control-label::before { width: 22px; height: 22px; top: 0; border: 2px solid #D1D5DB; }
.tc-item-modal .custom-control-label::after { width: 22px; height: 22px; top: 0; }
.tc-item-modal .custom-control-input:checked ~ .custom-control-label::before { background: var(--tc-primary) !important; border-color: var(--tc-primary) !important; }
.tc-item-footer { background: #F9FAFB; border-top: 1px solid #E5E7EB; display: block !important; padding: 16px 24px !important; }
.tc-item-total { display: flex; justify-content: space-between; align-items: center; font-size: 20px; font-weight: 700; color: #111827; margin-bottom: 12px; }
.tc-item-total strong { color: var(--tc-ink); font-size: 22px; }
.tc-item-actions { display: flex; gap: 14px; align-items: center; }
.tc-item-actions .tc-qty { background: #fff; border-radius: 999px; padding: 4px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.tc-item-actions .add_to_cart { flex: 1; font-size: 16px !important; padding: 14px 16px; }
.tc-item-actions .add_to_cart .label { display: inline-flex; gap: 6px; align-items: center; }

/* ── checkout ─────────────────────────────────────────────────────── */
.tc-checkout-bar { background: #fff; border-bottom: 1px solid #E5E7EB; margin: 0 -15px 24px; }
.tc-checkout-bar .container { display: flex; align-items: center; gap: 16px; height: 64px; }
.tc-back, .tc-back:link, .tc-back:visited { color: #111827 !important; font-size: 22px; text-decoration: none !important; display: inline-flex; }
.tc-checkout-title { margin: 0; font-size: 20px !important; font-weight: 700; color: #111827; }
body.action-checkout .card { border: 0 !important; border-radius: 12px !important; box-shadow: 0 1px 3px rgba(0,0,0,.06); background: #fff; }
body.action-checkout .card-body { padding: 24px !important; }
body.action-checkout .section-title { font-size: 20px !important; font-weight: 700; color: #111827; }
body.action-checkout .chevron-section { border: 1px solid #E5E7EB !important; border-radius: 12px !important; padding: 14px 16px !important; background: #fff; }
body.action-checkout .form-control { border-radius: 10px !important; border: 1px solid #D1D5DB; min-height: 46px; font-size: 15px; }
.tc-cart-card .card-body { padding: 20px !important; }
body.action-checkout #vue-cart { top: 24px; }

/* readability rule: primary red is never a text colour on ordering pages */
.tc-order-page a:hover, .tc-order-page .text-green, .tc-item-modal a:hover { color: var(--tc-ink) !important; }
body.action-checkout .form-control:focus, body.action-menu .form-control:focus { border-color: var(--tc-primary) !important; box-shadow: none !important; }

/* Karenderia's own order-type/time summary + modal, restyled */
body.action-checkout .transaction-section { display: flex; gap: 14px; align-items: center; border: 2px solid #E5E7EB !important; border-radius: 12px !important; padding: 16px !important; background: #fff; color: var(--tc-ink) !important; text-decoration: none !important; }
body.action-checkout .transaction-section:hover { border-color: var(--tc-accent) !important; }
body.action-checkout .transaction-section .flexcol > span { font-weight: 600; font-size: 16px; }
body.action-checkout .transaction-section .flexcol p { font-size: 14px !important; }
body.action-checkout .transaction-section .zmdi-chevron-right, body.action-checkout .chevron-section::after { color: #9CA3AF; }
body.action-checkout .tc-afh-notice { margin-bottom: 12px; }
#orderTypeTime .modal-content, #ModalTRNOptions .modal-content { border-radius: 16px !important; border: 0 !important; }
#orderTypeTime .modal-title, #ModalTRNOptions h4 { font-size: 20px !important; font-weight: 700; color: var(--tc-ink); }
#orderTypeTime .btn-group label.btn, #ModalTRNOptions .btn-group label.btn { border-radius: 10px !important; border: 2px solid #E5E7EB !important; background: #fff !important; color: var(--tc-ink) !important; font-weight: 600; margin-right: 8px; }
#orderTypeTime .btn-group label.btn.active, #ModalTRNOptions .btn-group label.btn.active { border-color: var(--tc-primary) !important; background: #fff !important; color: var(--tc-ink) !important; }
#orderTypeTime select.form-control, #ModalTRNOptions select.form-control { min-height: 48px; border-radius: 10px !important; border: 1px solid #D1D5DB !important; font-size: 15px; font-weight: 500; }
#orderTypeTime .btn-green, #ModalTRNOptions .btn-green { border-radius: 12px !important; padding: 14px 18px !important; font-size: 16px !important; }
#orderTypeTime .btn-black.btn-circle, #ModalTRNOptions .btn-black.btn-circle { background: #F3F4F6 !important; color: var(--tc-ink) !important; border: 0 !important; }

/* ── Readability guarantees: every red fill has white content; every modal close is visible ── */
.tc-plus i, .tc-plus * { color: #fff !important; }
.btn-green, .btn-green *, .btn-green .label,
.tc-btn-primary, .tc-btn-primary *,
.el-button--primary, .el-button--primary *,
.add_to_cart, .add_to_cart * { color: #fff !important; }
.modal .close .btn-circle, .modal .btn-black.btn-circle, .modal .btn-circle.rounded-pill {
  background: #E5E7EB !important; color: var(--tc-ink) !important; border: 0 !important; opacity: 1 !important;
}
.modal .btn-circle i, .modal .btn-circle * { color: var(--tc-ink) !important; }
.modal-header .close, .modal-header .close span { color: var(--tc-ink) !important; opacity: 1 !important; text-shadow: none !important; }
.tc-link-btn:hover { color: var(--tc-primary-dark); }

/* audit fixes: strikethrough + auth buttons readable */
.tc-order-page del, .tc-item-modal del, .drawer-preview-cart del, #vue-cart del { color: #6B7280 !important; }
.btn-white, a.btn.btn-white { color: var(--tc-ink) !important; border: 1px solid var(--tc-accent) !important; background: #fff !important; }
.btn-white:hover, a.btn.btn-white:hover { background: var(--tc-bg) !important; color: var(--tc-ink) !important; }

/* quantity steppers: every red "+" (cards, item dialog, addons, drawer, cart) has a white glyph */
.tc-qty-plus, .tc-qty-plus i, .tc-qty-plus *,
.quantity a[data-id="plus"], .quantity a[data-id="plus"] i,
.btn-plus-addon, .btn-plus-addon i,
.quantity-add-cart.multiple_qty, .quantity-add-cart.multiple_qty i { color: #fff !important; }
.quantity a[data-id="minus"], .quantity a[data-id="minus"] i, .quantity a[data-id="less"], .quantity a[data-id="less"] i { color: var(--tc-ink) !important; }

/* Bag-fee row: it is a line on a receipt, not a warning. Quiet card, grey glyphs, no tint —
   the bag itself is the only colour. ordering.css loads after custom.css, so this is the last word. */
.cnc-bag-fee-row, .tc-summary-row.cnc-bag-fee-row {
  background: #FAF8F6 !important;
  border: 1px solid #ECE6E2 !important;
  border-left: 1px solid #ECE6E2 !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
}
.cnc-bag-fee-row:hover, .tc-summary-row.cnc-bag-fee-row:hover { background: #F4F1EE !important; }
.tc-summary-row.cnc-bag-fee-row div:first-child i { color: #A79E99 !important; }
.tc-summary-row.cnc-bag-fee-row { font-weight: 600; }

/* The row already carries a chevron in its markup; the theme paints a second one with a
   pseudo-element, so every one of these rows showed ». One arrow. */
body.action-checkout .chevron-section .flexcol > i.zmdi-chevron-right,
body.action-checkout .transaction-section .flexcol > i.zmdi-chevron-right { display: none !important; }

/* Time-picker / order-type close button: Karenderia renders a bare .btn-circle with a 12px glyph as the
   first child of .modal-body, which was all but invisible. Pin it top-right as a real 40px grey circle. */
#ModalTRNOptions .modal-content, #orderTypeTime .modal-content { position: relative; }
#ModalTRNOptions .modal-body > a.btn-circle,
#ModalTRNOptions .modal-header .close a.btn-circle,
#orderTypeTime .modal-body > a.btn-circle,
#orderTypeTime .modal-header .close a.btn-circle {
  position: absolute !important; top: 14px; right: 14px; z-index: 3;
  width: 40px !important; height: 40px !important; padding: 0 !important; margin: 0 !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  background: #E5E7EB !important; border: 0 !important; border-radius: 50% !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.14);
}
#ModalTRNOptions a.btn-circle:hover, #orderTypeTime a.btn-circle:hover { background: #D1D5DB !important; }
#ModalTRNOptions a.btn-circle i, #orderTypeTime a.btn-circle i {
  color: #111827 !important; font-size: 22px !important; line-height: 1 !important;
}
/* keep the dialog's own heading clear of the button */
#ModalTRNOptions .modal-body > h4:first-of-type, #ModalTRNOptions .modal-body > h4 { padding-right: 56px; }

/* The close glyph rendered white because -webkit-text-fill-color won over `color`. Pin both. */
#ModalTRNOptions a.btn-circle, #ModalTRNOptions a.btn-circle i, #ModalTRNOptions a.btn-circle i::before,
#orderTypeTime a.btn-circle, #orderTypeTime a.btn-circle i, #orderTypeTime a.btn-circle i::before,
.modal .btn-black.btn-circle, .modal .btn-black.btn-circle i, .modal .btn-black.btn-circle i::before {
  color: #111827 !important; -webkit-text-fill-color: #111827 !important;
}

/* Bag-fee row reads smaller than the money rows around it (it is a notice, not a line item). */
.cnc-bag-fee-row, .tc-summary-row.cnc-bag-fee-row,
.cnc-bag-fee-row div, .tc-summary-row.cnc-bag-fee-row div { font-size: 12px !important; font-weight: 500 !important; }
.tc-summary-row.cnc-bag-fee-row div:first-child i { font-size: 12px !important; }
.cnc-bag-icon { width: 22px !important; height: 22px !important; margin-right: 6px !important; }

/* Bag row: breathing room between the bag, the label and the info glyph. */
.cnc-bag-fee-row .cnc-bag-trigger { display: flex !important; align-items: center !important; gap: 8px !important; }
.cnc-bag-icon { margin-right: 0 !important; }
.tc-summary-row.cnc-bag-fee-row div:first-child i { margin-left: 2px; }

/* Password show/hide eye was a 23x31 tap target (below the 32px minimum) on login, signup and checkout. */
.form-label-group.change_field_password > a,
.form-label-group > a > i.zmdi-eye, .form-label-group > a > i.zmdi-eye-off {
  display: inline-flex; align-items: center; justify-content: center;
}
.form-label-group.change_field_password > a { width: 40px; height: 40px; }

/* Old price: grey text, red strike line. */
del, .tc-card-price del, .tc-item-modal del, #vue-cart del, .drawer-preview-cart del {
  color: #6B7280 !important; text-decoration-color: var(--tc-primary) !important; text-decoration-thickness: 2px;
}
/* Bag row: the info glyph is a sibling of a text node, so flex gap does not separate it — use margin. */
.cnc-bag-fee-row .cnc-bag-trigger i, .tc-summary-row.cnc-bag-fee-row div:first-child i { margin-left: 10px !important; }
.cnc-bag-fee-row { padding: 10px 14px !important; }

/* Old price: grey text, red strike line. */
del, .tc-card-price del, .tc-item-modal del, #vue-cart del, .drawer-preview-cart del {
  color: #6B7280 !important; text-decoration-color: var(--tc-primary) !important; text-decoration-thickness: 2px;
}
/* Bag row: the info glyph is a sibling of a text node, so flex gap does not separate it — use margin. */
.cnc-bag-fee-row .cnc-bag-trigger i, .tc-summary-row.cnc-bag-fee-row div:first-child i { margin-left: 10px !important; }
.cnc-bag-fee-row { padding: 10px 14px !important; }
/* Search: Element Plus draws its own bordered wrapper inside our bordered box — keep one border only. */
/* (the wrapper IS the field now — see the search rules under the tab bar; this used to strip it) */
body.action-menu .el-input, .tc-search .el-input { border: 0 !important; box-shadow: none !important; max-width: 100%; }

/* ── item dialog: choices one group at a time ──────────────────────────
   The dialog used to print every choice group open, which on a phone meant
   a page that scrolled forever and a buy button far below the fold. Now the
   dialog itself is the height of the screen, only its middle scrolls, and
   the groups behave like an accordion: the required one you still owe an
   answer is open, answered ones fold into a one-line summary.            */
.tc-item-modal .tc-grp { margin-top: 14px !important; }
.tc-item-modal .tc-grp-head {
  position: relative; cursor: pointer; border-radius: 14px; padding: 12px 16px !important;
  background: #F3F4F6; border: 2px solid transparent; transition: background .15s, border-color .15s;
  -webkit-tap-highlight-color: transparent;
}
.tc-item-modal .tc-grp-head:hover { background: #ECEEF1; }
.tc-item-modal .tc-grp.is-open > .tc-grp-head { background: #fff; border-color: #E5E7EB; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.tc-item-modal .tc-grp.is-required:not(.is-filled) > .tc-grp-head { background: #FDF0F2; }
.tc-item-modal .tc-grp.is-required:not(.is-filled).is-open > .tc-grp-head { background: #fff; border-color: var(--tc-primary); }
.tc-item-modal .tc-grp-head p { font-size: 13.5px !important; }
.tc-item-modal .tc-grp-sum { font-size: 14px !important; font-weight: 600; color: #1E6B3A !important; line-height: 1.35; }
.tc-item-modal .tc-grp-sum i { font-size: 15px; vertical-align: -1px; }
.tc-item-modal .tc-grp-meta { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.tc-item-modal .tc-grp-caret { font-size: 22px; color: #6B7280; line-height: 1; }
.tc-item-modal .tc-grp.is-filled .tc-grp-caret { color: #9CA3AF; }
.tc-item-modal .addon-required, .tc-item-modal .tc-grp .addon-required {
  background: var(--tc-primary) !important; color: #fff !important; border-radius: 999px !important;
  padding: 4px 10px !important; font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: .02em;
}
.tc-item-modal .tc-grp-meta h6 { font-size: 12.5px !important; color: #6B7280; white-space: nowrap; }
.tc-item-modal .tc-grp.is-open > .list-addon {
  border: 2px solid #E5E7EB; border-top: 0; border-radius: 0 0 14px 14px;
  padding: 12px 12px 4px !important; background: #fff;
}
.tc-item-modal .tc-grp.is-required:not(.is-filled).is-open > .list-addon { border-color: var(--tc-primary); }
.tc-item-modal .tc-item-actions .add_to_cart[disabled] {
  background: #ECEEF1 !important; border-color: #ECEEF1 !important; opacity: 1 !important;
}
.tc-item-modal .tc-item-actions .add_to_cart[disabled] .label,
.tc-item-modal .tc-item-actions .add_to_cart[disabled] .label * { color: #6B7280 !important; }
.tc-item-modal .tc-item-actions .add_to_cart[disabled] .label {
  font-size: 14.5px !important; white-space: normal; line-height: 1.2; text-align: center; display: block;
}

/* the dialog is one screen tall: photo + choices scroll, footer stays put */
.tc-item-modal { display: flex; flex-direction: column; max-height: calc(100vh - 3.5rem); }
.tc-item-modal .modal-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.tc-item-modal .item-modal-footer { flex: 0 0 auto; }
.modal-full .tc-item-modal { min-height: 0; height: 100vh; height: 100dvh; max-height: none; }
@media (max-width: 767px) {
  .tc-item-modal .modal-body .addon-rows, .tc-item-modal .modal-body h4, .tc-item-modal .modal-body .text-description,
  .tc-item-modal .modal-body .btn-group, .tc-item-modal .modal-body h5, .tc-item-modal .modal-body .form-label-group,
  .tc-item-modal .modal-body p.text-muted { margin-left: 16px !important; margin-right: 16px !important; }
  .tc-item-modal .tc-item-footer { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) !important; }
  .tc-item-modal .tc-grp-head { padding: 11px 13px !important; }
}

/* group header on one line: name, what it asks for, the pill and the chevron */
/* A long group name — "Krydderi til Håndskårne Pommes Frites" — must wrap beside the badge
   rather than run underneath it: the title may shrink, the badge may not. */
.tc-item-modal .tc-grp-head { display: flex !important; align-items: flex-start; gap: 12px; }
.tc-item-modal .tc-grp-head > .flexcol.flex-grow-1 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; min-width: 0; flex: 1 1 auto; }
.tc-item-modal .tc-grp-head h5 { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.tc-item-modal .tc-grp-meta { align-self: flex-start; flex: 0 0 auto !important; }
.tc-item-modal .tc-grp-head p { margin: 0 !important; flex: 1 1 auto; min-width: 0; }
.tc-item-modal .tc-grp-head .tc-pill-soft { background: transparent; padding: 0; font-weight: 600; color: #6B7280; }
.tc-item-modal .tc-grp-head { padding: 12px 16px !important; }

/* the options: whole row is the target, and the chosen one reads as chosen */
.tc-item-modal .list-addon li.tc-opt { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tc-item-modal .list-addon li.tc-opt.is-picked { border-color: var(--tc-primary); background: #FFF7F8; }
.tc-item-modal .list-addon li.tc-opt .custom-control-label { cursor: pointer; }
.tc-item-modal .custom-control-input:focus ~ .custom-control-label::before,
.tc-item-modal .custom-control-input:focus:not(:checked) ~ .custom-control-label::before { box-shadow: none !important; }

/* opening a group slides it in, so moving from one choice to the next reads as a step forward */
@keyframes tcGrpSlide { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.tc-item-modal .tc-grp.is-open > .list-addon { animation: tcGrpSlide .22s ease-out; }
@media (prefers-reduced-motion: reduce) { .tc-item-modal .tc-grp.is-open > .list-addon { animation: none; } }

/* the "add this extra" circle was white on white — give it an outline and a red glyph */
.tc-item-modal .list-addon li .quantity-add-cart {
  width: 34px; height: 34px; padding: 0 !important; border-radius: 50% !important; border: 2px solid #E5E7EB !important;
  background: #fff !important; display: inline-flex !important; align-items: center; justify-content: center;
}
.tc-item-modal .list-addon li .quantity-add-cart i { color: var(--tc-primary) !important; font-size: 16px !important; }
.tc-item-modal .list-addon li .quantity-wrapper { flex: 0 0 auto; }

/* the minus in an extra's stepper was a near-black glyph on brand red — unreadable */
.tc-item-modal .list-addon .quantity a.qty-btn,
.tc-item-modal .list-addon .quantity a.btn-plus-addon { background: var(--tc-primary) !important; border-color: var(--tc-primary) !important; }
.tc-item-modal .list-addon .quantity a.qty-btn i,
.tc-item-modal .list-addon .quantity a.btn-plus-addon i { color: #fff !important; }

/* the dish description is .text-descriptions (plural) — it was missing from the gutter rule
   above and sat flush against the edge of the dialog */
.tc-item-modal .modal-body .text-descriptions,
.tc-item-modal .modal-body > div > p { margin-left: 24px !important; margin-right: 24px !important; }
@media (max-width: 767px) {
  .tc-item-modal .modal-body .text-descriptions,
  .tc-item-modal .modal-body > div > p { margin-left: 16px !important; margin-right: 16px !important; }
}
.tc-item-modal .modal-body { padding-bottom: 16px !important; }


/* "Næste" sits above the add button, same size and colour, and is only there while a
   group that accepts any number is open. */
.tc-item-modal .tc-item-next { padding: 0 0 10px; }
.tc-item-modal .tc-item-next .btn {
  width: 100%; display: flex; align-items: center; justify-content: center;
}
.tc-item-next-btn { margin-bottom: 10px; }

/* Grøntsager: the picked state is a filled tick, not a stepper */
.tc-item-modal .tc-opt-on, .tc-opt-on {
  background: var(--tc-primary, #D9273F) !important; border-color: var(--tc-primary, #D9273F) !important;
  color: #fff !important;
}
.tc-item-modal .tc-opt-on i, .tc-opt-on i { color: #fff !important; }