/* ===== Corporate Base =====
   Hinweis: Font-Family wurde *entfernt*, damit die Speisekarte
   (Mittagsmenüs & Snacks) die Standard-Theme-Schrift erbt.
   Die Überschrift behält eine dedizierte Klasse (.cne-title) für Styling,
   JS sucht weiterhin nach .cne-title. */
.cne-order{ --cne-olive:#707558; --cne-olive-active:#5a6349; --cne-ink:#404350; --cne-cream:#fffcf9; --cne-outline:#404350; --cne-line:#404350; --cne-card-pad:16px; }
.cne-order{ max-width:960px; margin-inline:auto; font-size:1.08rem; /* font-family: removed to inherit theme font */ }

/* WICHTIG: sauberes Box-Modell nur innerhalb der Komponente */
.cne-order, .cne-order *, .cne-order *::before, .cne-order *::after{ box-sizing:border-box }

/* Kopf */
.cne-titlebar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:.2rem 0 .4rem }

/* Die Überschrift: optisch wie zuvor, aber wir lassen Theme-Klassen an der H2.
   JS findet weiterhin .cne-title */
.cne-title{
  margin:0;
  color:var(--cne-olive);
  font-weight:700;
  font-size:clamp(1.5rem,2.4vw,2rem);
  /* keine font-family hier; kann via Theme-Klasse kommen */
}

/* Optionales Fallback, falls eine Roboto-Klasse im Theme genutzt wird */
.has-roboto-font-family.cne-title { font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; }

/* Form */
.cne-label{ display:block; font-weight:700; color:var(--cne-ink); margin:0 0 .25rem }
.cne-hint{ color:var(--cne-ink); opacity:.8; font-size:.92rem; margin-top:.25rem }
.cne-err{ color:#b4231a; margin-top:.25rem; font-size:.92rem }
.cne-field{ margin:0 0 .9rem }

/* Eingabefelder */
.cne-input{ width:100%; min-width:0; padding:.65rem .8rem; border:1.5px solid var(--cne-outline); border-radius:8px; font-size:1rem }

/* Zweispaltiges Grid für Vor-/Nachname (und ähnliche Paare) */
.cne-grid{
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap:10px;
}
.cne-grid > *{ min-width:0 }

/* Dates */
.cne-dates{ display:flex; gap:.5rem; overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; padding:.25rem .125rem .5rem .125rem; margin-bottom:.25rem }
.cne-dates::-webkit-scrollbar{ height:6px }
.cne-dates::-webkit-scrollbar-thumb{ background:#d6dae0; border-radius:999px }
.cne-datebtn{ flex:0 0 auto; scroll-snap-align:start; cursor:pointer; user-select:none; padding:.6rem .9rem; border-radius:8px; background:#fff; border:1.5px solid var(--cne-outline); font-size:.95rem; color:var(--cne-ink); min-width:9.6rem; text-align:center }
.cne-datebtn.is-today{ border-color:var(--cne-olive) }
.cne-datebtn.cne-active{ background:var(--cne-olive); color:var(--cne-cream); border-color:var(--cne-olive) }
.cne-datebtn[disabled]{ opacity:.45; filter:grayscale(.4); pointer-events:none }

/* Chips/Segment */
.cne-seg{ display:inline-flex; gap:.5rem; flex-wrap:wrap }
.cne-chip{ flex:0 0 auto; cursor:pointer; user-select:none; padding:.65rem 1rem; border-radius:8px; background:var(--cne-olive); border:1.5px solid transparent; font-size:1rem; color:var(--cne-cream) }
.cne-chip.cne-active{ background:var(--cne-olive-active) }
.cne-chip[disabled]{ opacity:.5; filter:grayscale(.4); pointer-events:none }

/* Items (ohne Rahmen) -- diese Elemente erben jetzt Theme-Font */
.cne-items{}
.cne-item{ display:flex; align-items:flex-start; gap:.75rem; justify-content:space-between; padding:.6rem 0; border-bottom:1px solid var(--cne-line); color:var(--cne-ink) }
.cne-item:last-child{ border-bottom:none }
/* WICHTIG: Menü-/Snack-Namen verwenden die Theme-Schrift (inherit) */
.cne-item-name{ font-weight:700; font-family: inherit; }
.cne-item-sub{ font-size:.92rem; margin:.3rem 0 0; color:var(--cne-ink); font-family: inherit; }
.cne-item-right{ display:flex; align-items:center; gap:.6rem }
.cne-price{ font-variant-numeric:tabular-nums; min-width:5.8rem; text-align:right }

/* Stepper (größer) */
.cne-stepper{ display:inline-grid; grid-auto-flow:column; align-items:center; border:1.5px solid var(--cne-outline); border-radius:10px; overflow:hidden }
.cne-stepper button{ appearance:none; border:none; background:#fff; color:var(--cne-ink); padding:.55rem .85rem; cursor:pointer; line-height:1; font-size:1.05rem }
.cne-stepper input{ width:2.6rem; text-align:center; border:none; background:#fff; color:var(--cne-ink); font-weight:700; font-size:1.05rem }

/* Varianten-Gruppen (Bowl, Blattsalat) */
.cne-variant{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding:.4rem 0; border-bottom:1px dashed rgba(64,67,80,.35) }
.cne-variant:last-child{ border-bottom:none }
.cne-variant label{ font-weight:600 }

/* Uhrzeit Felder */
.cne-time-inputs{ display:inline-flex; align-items:center; gap:.4rem }
.cne-input-hh, .cne-input-mm{ width:4.4rem; text-align:center }
.cne-time-sep{ font-weight:700; color:var(--cne-ink) }

/* Steps */
.cne-step{ display:none }
.cne-step.is-active{ display:block }
.cne-visually-hidden{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }

/* Sticky */
.cne-sticky{ position:sticky; bottom:0; padding:12px 0; background:linear-gradient(180deg,transparent, #fff 26%, #fff); margin-top:16px }
.cne-sticky-inner{ display:flex; align-items:center; gap:12px; border:1.5px solid var(--cne-outline); border-radius:8px; padding:10px 12px; background:#fff }
.cne-cart-summary{ color:var(--cne-ink) }
.cne-btn{ appearance:none; border:1.5px solid var(--cne-outline); background:#fff; padding:.65rem 1rem; border-radius:8px; cursor:pointer }
.cne-btn.cne-primary{ background:var(--cne-olive); color:var(--cne-cream); border-color:var(--cne-olive) }
.cne-btn.cne-secondary{ color:var(--cne-ink); border-color:var(--cne-ink) }
.cne-btn:disabled{ opacity:.5; pointer-events:none }
.cne-flex{ flex:1 1 auto }

/* Overlay/Popover */
.cne-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.28); display:none; align-items:center; justify-content:center; padding:16px; z-index:50; opacity:0; transition:opacity .18s ease; will-change:opacity }
.cne-overlay.open{ display:flex; opacity:1 }
.cne-popover{
  position:relative;
  width: min(560px, calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 12px));
  border-radius:12px; background:#ffffff; box-shadow:0 10px 40px rgba(2,8,23,.2);
  transform:translateY(6px); transition:transform .18s ease, opacity .18s ease;
  opacity:.98; color:var(--cne-ink)
}
.cne-close{ background:none; border:none; font-size:1.6rem; line-height:1; color:#fffcf9; cursor:pointer; padding:2px 6px; border-radius:6px }
.cne-popover-h{ padding:12px 16px; color:var(--cne-cream); background:var(--cne-olive); border-top-left-radius:12px; border-top-right-radius:12px; display:flex; align-items:center; justify-content:space-between; gap:8px }
.cne-popover-h h4{ margin:0; font-size:1.12rem }

/* ✅ Nur wenn es die Bestell-Bestätigung ist:
      Titel "Deine Bestellung" in Roboto, Rest bleibt Theme-Schrift */
.is-order .cne-popover-h h4{
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* Inhalt des Popovers */
.cne-popover-c{ padding:14px 16px }

/* ❌ KEINE Striche zwischen den einzelnen Artikeln in der Bestätigung */
.cne-popover .cne-items .cne-item{
  border-bottom: none !important;
}

/* (Optional) Gesamtzeile optisch betonen – bleibt mit Linie */
.cne-popover .cne-item.cne-total .cne-item-name { font-weight: 700; }

/* === NEU: Immer links Text, rechts Preis – auf allen Geräten (Bestätigungs-Popover) === */
.cne-popover .cne-items .cne-item,
.cne-popover .cne-item.cne-total{
  display: grid !important;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: .5rem 1rem;
  justify-content: unset; /* überschreibt space-between vom Basis-Item */
}
.cne-popover .cne-items .cne-item > .cne-price,
.cne-popover .cne-item.cne-total > .cne-price{
  text-align: right !important;
  justify-self: end;
  min-width: 6.2rem !important; /* hält die Spalte stabil, auch mobil */
  font-variant-numeric: tabular-nums;
  order: initial !important;     /* falls irgendwo Flex-Order greift */
}
.cne-popover .cne-items .cne-item > div:first-child,
.cne-popover .cne-item.cne-total > div:first-child{
  min-width: 0; /* verhindert Überlauf */
}

/* Corporate Checkbox */
.cne-check{ display:flex; gap:10px; align-items:center; font-size:.98rem; color:var(--cne-ink) }

/* Gleicher Stil wie .cne-note für den Text „Ich habe die Datenschutzerklärung…“ */
.cne-check > span{
  font-size:.98rem;
  color:var(--cne-ink);
}
.cne-check > span [aria-hidden="true"]{ font-weight:700 }

/* Garantiert quadratischer Haken-Button – besonders mobil (iOS/Android) */
.cne-check input[type="checkbox"]{
  appearance:none;
  -webkit-appearance:none;
  width:18px;
  aspect-ratio:1 / 1;
  height:auto;
  border:1.5px solid var(--cne-outline);
  border-radius:4px;
  display:inline-grid;
  place-content:center;
  vertical-align:middle;
  transition:background .15s,border-color .15s;
  line-height:0;
}
.cne-check input[type="checkbox"]::after{
  content:"";
  width:10px;
  aspect-ratio:1 / 1;
  height:auto;
  transform:scale(0);
  transition:transform .15s ease;
  background:var(--cne-cream);
  clip-path:polygon(14% 44%,0 65%,50% 100%,100% 20%,80% 0,43% 62%);
}
.cne-check input[type="checkbox"]:checked{ background:var(--cne-olive); border-color:var(--cne-olive) }
.cne-check input[type="checkbox"]:checked::after{ transform:scale(1) }

/* Closed message */
.cne-closed{ max-width:960px; margin:1rem auto; padding:16px; border:1.5px solid var(--cne-outline); border-radius:8px; background:transparent; color:var(--cne-ink) }
.cne-closed-title{ margin:0 0 .5rem; color:var(--cne-olive); font-weight:300; font-size:clamp(1.35rem,2.5vw,1.85rem); font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;}


/* Responsive */
@media (max-width:640px){
  /* Echte Rand-„Bleeds“ am Handy – nahezu volle Breite */
  .cne-order{
    margin-left: calc(-1 * var(--wp--style--root--padding-left, 0px));
    margin-right: calc(-1 * var(--wp--style--root--padding-right, 0px));
    padding-left:  calc(env(safe-area-inset-left) + 6px) !important;
    padding-right: calc(env(safe-area-inset-right) + 6px) !important;
  }

  .cne-grid{ grid-template-columns:1fr }
  .cne-item-right{ flex-direction:column; align-items:flex-end }
  .cne-price{ order:-1; min-width:unset }
}

@media (min-width: 768px){
  .cne-dates{
    overflow: visible;
    -webkit-overflow-scrolling: auto;
    scroll-snap-type: none;
    flex-wrap: nowrap;
    justify-content: space-between;
    padding-bottom: .25rem;
  }
  .cne-datebtn{
    flex: 1 1 0;
    min-width: auto;
    text-align: center;
  }
}

/* Link im DSGVO-Hinweis: gleiche Größe/Schrift wie der restliche Text */
.cne-order .cne-check > span a{
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  font-family: inherit !important;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .14em;
  text-decoration-thickness: from-font;
}

/* optional: dezentes Hover */
.cne-order .cne-check > span a:hover{
  color: var(--cne-olive);
}