/* ══════════════════════════════════════════════════════════════
   MANCARE-CART.CSS — coșul și checkout-ul unic (restaurant + magazin)
   Prefixe: mc-cart- (sertar, linii, bară) și mc-co- (checkout, câmpuri).
   Markup în web/components/cart. Încărcat global din web/app/layout.tsx.
   Doar transform / opacity se animă. Fără fonturi sau scripturi noi.
════════════════════════════════════════════════════════════════ */

.mc-cart-layer {
  --mc-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --mc-ring: var(--c-primary);
  --mc-r: 12px;
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 1000);
  font-family: var(--font, system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
}

/* ── Scrim + panou ───────────────────────────────────────────── */
.mc-cart-scrim {
  position: absolute;
  inset: 0;
  background: var(--c-overlay, rgba(8, 20, 30, 0.5));
  opacity: 0;
  transition: opacity 200ms ease;
}
.mc-cart-layer.is-in .mc-cart-scrim { opacity: 1; }

.mc-cart-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(440px, 100vw);
  display: flex;
  flex-direction: column;
  background: var(--c-surface, #fff);
  color: var(--c-text, #111827);
  border-left: 1px solid var(--c-border, #e8ecf1);
  transform: translateX(100%);
  transition: transform 240ms var(--mc-ease);
  outline: none;
  overscroll-behavior: contain;
}
.mc-cart-layer.is-in .mc-cart-panel { transform: none; }

.mc-cart-grip { display: none; }

.mc-cart-panel button,
.mc-cart-panel a,
.mc-cart-panel input,
.mc-cart-panel textarea { -webkit-tap-highlight-color: transparent; }
.mc-cart-panel :focus-visible { outline: 2px solid var(--mc-ring); outline-offset: 2px; }
.mc-cart-panel [tabindex="-1"]:focus { outline: none; }

/* ── Antet ───────────────────────────────────────────────────── */
.mc-cart-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 16px 16px 24px;
  border-bottom: 1px solid var(--c-border-subtle, #f1f4f8);
}
.mc-cart-title { margin: 0; font-size: 1.25rem; font-weight: 600; line-height: 1.3; text-wrap: balance; }
.mc-cart-x {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--c-text-secondary, #4b5563);
  cursor: pointer;
  transition: background-color 150ms ease, transform 120ms ease;
}
.mc-cart-x:active { transform: scale(0.94); }

.mc-cart-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 24px 24px; }

/* ── Bara de transport ───────────────────────────────────────── */
.mc-cart-ship { margin-bottom: 16px; padding: 16px 16px; border-radius: var(--mc-r); border: 1px solid var(--c-border, #e8ecf1); }
.mc-cart-ship-text { margin: 0 0 8px; font-size: 1rem; line-height: 1.4; font-variant-numeric: tabular-nums; }
.mc-cart-ship-track { height: 6px; border-radius: 999px; background: var(--c-border, #e8ecf1); overflow: hidden; }
.mc-cart-ship-fill { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--c-primary-hover, #006e9e); transform-origin: left center; transition: transform 320ms var(--mc-ease); }
.mc-cart-ship-note { margin: 8px 0 0; font-size: 0.8rem; line-height: 1.45; color: var(--c-text-secondary, #4b5563); }

/* ── Liste de produse ────────────────────────────────────────── */
.mc-cart-lines { list-style: none; margin: 0; padding: 0; }
.mc-cart-line { display: flex; gap: 16px; padding: 16px 0; border-top: 1px solid var(--c-border-subtle, #f1f4f8); }
.mc-cart-line:first-child { border-top: 0; padding-top: 0; }
.mc-cart-line.is-flagged { background: var(--c-error-bg, #fef2f2); }
.mc-cart-thumb { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background: var(--c-bg, #fafafa); color: var(--c-text-tertiary, #9ca3af); }
.mc-cart-thumb img { width: 100%; height: 100%; object-fit: cover; outline: 1px solid rgba(0, 0, 0, 0.08); outline-offset: -1px; border-radius: inherit; }
.mc-cart-line-main { flex: 1; min-width: 0; }
.mc-cart-line-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.mc-cart-line-name { margin: 0; font-size: 1rem; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.mc-cart-line-total { margin: 0; flex: none; font-size: 1rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.mc-cart-line-src { margin: 0px 0 0; font-size: 0.8rem; font-weight: 500; color: var(--c-primary-dark, #004e6c); }
.mc-cart-line-opts { list-style: none; margin: 8px 0 0; padding: 0; font-size: 0.8rem; line-height: 1.45; color: var(--c-text-secondary, #4b5563); }
.mc-cart-line-optprice, .mc-cart-line-label { font-variant-numeric: tabular-nums; }
.mc-cart-line-label { margin: 8px 0 0; font-size: 0.8rem; line-height: 1.45; color: var(--c-text-secondary, #4b5563); }
.mc-cart-line-unit { margin: 8px 0 0; font-size: 0.8rem; color: var(--c-text-tertiary, #6b7280); font-variant-numeric: tabular-nums; }
.mc-cart-line-ctl { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }

.mc-cart-stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--c-border-strong, #d1d9e4); border-radius: 999px; }
.mc-cart-step {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -1.5px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--c-text, #111827);
  cursor: pointer;
  transition: background-color 150ms ease, transform 120ms ease;
}
.mc-cart-step:active:not(:disabled) { transform: scale(0.92); }
.mc-cart-step:disabled { opacity: 0.35; cursor: not-allowed; }
.mc-cart-qty { min-width: 28px; text-align: center; font-size: 1rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.mc-cart-remove {
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  color: var(--c-text-secondary, #4b5563);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ── Subsol cu total ─────────────────────────────────────────── */
.mc-cart-foot { flex: none; padding: 16px 24px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--c-border-subtle, #f1f4f8); background: var(--c-surface, #fff); }
.mc-cart-sum { display: flex; justify-content: space-between; align-items: baseline; font-size: 1rem; font-variant-numeric: tabular-nums; }
.mc-cart-sum strong { font-size: 1.25rem; }
.mc-cart-sum-note { margin: 0px 0 16px; font-size: 0.8rem; color: var(--c-text-secondary, #4b5563); }

/* ── Coș gol ─────────────────────────────────────────────────── */
.mc-cart-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 8px 16px; color: var(--c-text-tertiary, #6b7280); }
.mc-cart-empty-title { margin: 16px 0 0; font-size: 1rem; font-weight: 500; color: var(--c-text, #111827); }
.mc-cart-empty-sub { margin: 8px 0 24px; font-size: 1rem; color: var(--c-text-secondary, #4b5563); }
.mc-cart-empty-links { display: flex; flex-direction: column; gap: 8px; width: 100%; }

/* ── Butoane ─────────────────────────────────────────────────── */
.mc-co-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 0 24px;
  border: 1.5px solid transparent;
  border-radius: var(--mc-r);
  background: var(--c-primary-hover, #006e9e);
  color: #fff;
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease, transform 120ms ease, opacity 150ms ease;
}
.mc-co-btn:active:not(:disabled) { transform: scale(0.98); }
.mc-co-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.mc-co-btn--cta { min-height: 52px; }
.mc-co-btn--ghost { background: transparent; color: var(--c-primary-dark, #004e6c); border-color: var(--c-border-strong, #d1d9e4); }
.mc-co-body > .mc-co-btn { margin-top: 16px; }
.mc-co-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; animation: mc-spin 700ms linear infinite; }
@keyframes mc-spin { to { transform: rotate(360deg); } }

/* ── Checkout: rând cu coșul + pași ──────────────────────────── */
.mc-co-cartrow {
  border: 1px solid var(--c-border, #e8ecf1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  margin-bottom: 8px;
  border-radius: var(--mc-r);
  background: transparent;
  color: var(--c-text, #111827);
  font: inherit;
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.mc-co-edit-link { font-weight: 500; text-decoration: underline; text-underline-offset: 3px; color: var(--c-primary-dark, #004e6c); }

.mc-co-step { border-top: 1px solid var(--c-border-subtle, #f1f4f8); padding: 16px 0; }
.mc-co-step:first-of-type { border-top: 0; }
.mc-co-step-head { display: flex; align-items: center; gap: 16px; min-height: 44px; }
.mc-co-step-num {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--c-border-strong, #d1d9e4);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--c-text-secondary, #4b5563);
}
.mc-co-step.is-active .mc-co-step-num { background: var(--c-primary-hover, #006e9e); border-color: transparent; color: #fff; }
.mc-co-step.is-done .mc-co-step-num { background: var(--c-primary-pale, #e9f2f6); border-color: transparent; color: var(--c-primary-dark, #004e6c); }
.mc-co-step-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mc-co-step-title { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.3; }
.mc-co-step-count { font-size: 0.8rem; color: var(--c-text-secondary, #4b5563); }
.mc-co-edit {
  flex: none;
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  color: var(--c-primary-dark, #004e6c);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.mc-co-summary { margin: 0 0 0 38px; font-size: 1rem; line-height: 1.45; overflow-wrap: anywhere; }
.mc-co-body { margin-top: 16px; animation: mc-in 220ms var(--mc-ease); }
.mc-co-body > * + * { margin-top: 16px; }
.mc-co-body > .mc-co-btn { margin-top: 18px; }
.mc-co-note { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--c-text-secondary, #4b5563); }
@keyframes mc-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── Câmpuri ─────────────────────────────────────────────────── */
.mc-co-field { display: block; }
.mc-co-label { display: block; margin-bottom: 8px; font-size: 1rem; font-weight: 500; }
.mc-co-opt { font-weight: 400; color: var(--c-text-secondary, #4b5563); }
.mc-co-input {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 8px 16px;
  border: 1.5px solid var(--c-border-strong, #d1d9e4);
  border-radius: var(--mc-r);
  background: var(--c-surface, #fff);
  color: var(--c-text, #111827);
  font: inherit;
  font-size: 1rem; /* sub 16px, iOS mărește pagina la focus */
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.mc-co-textarea { min-height: 76px; resize: vertical; }
.mc-co-input:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-ghost, rgba(0, 130, 181, 0.12)); outline: none; }
.mc-co-field.has-error .mc-co-input { border-color: var(--c-error, #ef4444); }
.mc-co-hint { margin: 8px 0 0; font-size: 0.8rem; line-height: 1.45; color: var(--c-text-secondary, #4b5563); }
.mc-co-error { margin: 8px 0 0; font-size: 0.8rem; line-height: 1.45; font-weight: 500; color: var(--c-error, #b91c1c); animation: mc-shake 280ms var(--mc-ease); }
@keyframes mc-shake { 0%, 100% { transform: none; } 30% { transform: translateX(-4px); } 65% { transform: translateX(4px); } }

.mc-co-set { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 8px; }
.mc-co-legend { padding: 0; margin-bottom: 8px; font-size: 1rem; font-weight: 500; }

/* ── Carduri de alegere (livrare, plată) ─────────────────────── */
.mc-co-choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 60px;
  padding: 8px 16px;
  border: 1.5px solid var(--c-border-strong, #d1d9e4);
  border-radius: var(--mc-r);
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease;
}
.mc-co-choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.mc-co-choice::before {
  content: '';
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--c-border-strong, #9ca3af);
  background: var(--c-surface, #fff);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.mc-co-choice.is-on { border-color: var(--c-primary-hover, #006e9e); background: var(--c-primary-ghost, rgba(0, 130, 181, 0.06)); }
.mc-co-choice.is-on::before { border-color: var(--c-primary-hover, #006e9e); box-shadow: inset 0 0 0 4.5px var(--c-primary-hover, #006e9e); background: #fff; }
.mc-co-choice:has(input:focus-visible) { outline: 2px solid var(--mc-ring); outline-offset: 2px; }
.mc-co-choice-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mc-co-choice-title { font-size: 1rem; font-weight: 500; }
.mc-co-choice-desc { font-size: 0.8rem; line-height: 1.4; color: var(--c-text-secondary, #4b5563); }
.mc-co-choice-price { flex: none; font-size: 1rem; font-weight: 500; font-variant-numeric: tabular-nums; }

/* ── Recapitulare + totaluri ─────────────────────────────────── */
.mc-co-recap { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 1rem; font-variant-numeric: tabular-nums; }
.mc-co-recap li { display: flex; justify-content: space-between; gap: 16px; }
.mc-co-recap li > span:last-child { white-space: nowrap; }
.mc-co-recap-name { min-width: 0; overflow-wrap: anywhere; }
.mc-co-recap-name small { display: block; font-size: 0.8rem; color: var(--c-text-secondary, #4b5563); }
.mc-co-totals { margin: 0; padding: 16px 0 0; border-top: 1px solid var(--c-border, #e8ecf1); display: grid; gap: 8px; font-size: 1rem; font-variant-numeric: tabular-nums; }
.mc-co-totals > div { display: flex; justify-content: space-between; gap: 16px; }
.mc-co-totals dt, .mc-co-totals dd { margin: 0; }
.mc-co-totals .is-total { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--c-border, #e8ecf1); font-size: 1rem; font-weight: 600; }

.mc-co-tc.has-error .mc-co-tc-row { color: var(--c-error, #b91c1c); }
.mc-co-tc-row { display: flex; align-items: flex-start; gap: 16px; min-height: 44px; font-size: 1rem; line-height: 1.5; cursor: pointer; }
.mc-co-tc-row input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--c-primary-hover, #006e9e); }
.mc-co-links { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 0 8px; font-size: 0.8rem; }
.mc-co-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; color: var(--c-primary-dark, #004e6c); text-decoration: underline; text-underline-offset: 3px; }

.mc-co-alert { padding: 16px 16px; border-radius: var(--mc-r); background: var(--c-error-bg, #fef2f2); color: var(--c-text, #111827); border: 1px solid rgba(239, 68, 68, 0.35); font-size: 1rem; line-height: 1.5; }
.mc-co-alert p { margin: 0; }
.mc-co-alert ul { margin: 8px 0 16px; padding-left: 18px; }

/* ── Confirmare ──────────────────────────────────────────────── */
.mc-co-done { display: flex; flex-direction: column; align-items: stretch; gap: 16px; text-align: center; padding-top: 16px; }
.mc-co-done > .mc-co-totals { text-align: left; }
.mc-co-done-ico { align-self: center; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--c-primary-pale, #e9f2f6); color: var(--c-primary-dark, #004e6c); animation: mc-pop 260ms var(--mc-ease); }
.mc-co-done-title { margin: 0; font-size: 1.25rem; font-weight: 600; text-wrap: balance; }
.mc-co-done-num { margin: 0; font-size: 1rem; font-variant-numeric: tabular-nums; }
.mc-co-done-sub { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--c-text-secondary, #4b5563); text-wrap: pretty; }
@keyframes mc-pop { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }

/* ── Bara fixă de jos (telefon) ──────────────────────────────── */
.mc-cart-bar { display: none; }

@media (hover: hover) and (pointer: fine) {
  .mc-cart-x:hover { background: var(--c-bg, #f3f6fb); }
  .mc-cart-step:hover:not(:disabled) { background: var(--c-primary-pale, #e9f2f6); }
  .mc-cart-remove:hover, .mc-co-edit:hover, .mc-co-edit-link:hover { color: var(--c-text, #111827); }
  .mc-co-btn:hover:not(:disabled) { background: var(--c-primary-dark, #004e6c); }
  .mc-co-btn--ghost:hover:not(:disabled) { background: var(--c-primary-ghost, rgba(0, 130, 181, 0.08)); }
  .mc-co-choice:hover:not(.is-on) { border-color: var(--c-primary-light, #4d95b9); }
  .mc-co-cartrow:hover { background: var(--c-primary-pale, #e9f2f6); }
}

/* ── Telefon: bottom sheet + bară ────────────────────────────── */
@media (max-width: 768px) {
  .mc-cart-panel {
    top: auto;
    left: 0;
    width: 100%;
    max-height: min(92dvh, 100% - 12px);
    border-radius: 20px 20px 0 0;
    border-top: 1px solid var(--c-border, #e8ecf1);
    transform: translateY(100%);
  }
  .mc-cart-grip { display: block; flex: none; width: 36px; height: 8px; margin: 8px auto 0; border-radius: 999px; background: var(--c-border-strong, #d1d9e4); }
  .mc-cart-head { padding-top: 8px; }
  .mc-cart-scroll { padding: 16px 16px 16px; }
  .mc-cart-foot { padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); }
  .mc-cart-empty-links { flex-direction: column; }

  .mc-cart-bar {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 480;
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
    background: var(--c-surface, #fff);
    border-top: 1px solid var(--c-border, #e8ecf1);
    animation: mc-in 220ms var(--mc-ease);
  }
  .mc-cart-bar-btn {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    min-height: 56px;
    padding: 0 16px;
    border: 0;
    border-radius: 16px;
    background: var(--c-primary-hover, #006e9e);
    color: #fff;
    font: inherit;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: transform 120ms ease;
  }
  .mc-cart-bar-btn:active { transform: scale(0.98); }
  .mc-cart-bar-btn:focus-visible { outline: 2px solid var(--c-primary-dark, #004e6c); outline-offset: 3px; }
  .mc-cart-bar-count { display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.2); font-size: 1rem; font-variant-numeric: tabular-nums; }
  .mc-cart-bar-label { flex: 1; text-align: left; }
  .mc-cart-bar-sum { font-variant-numeric: tabular-nums; }

  body.mc-has-cartbar { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  body.mc-has-cartbar #ddm-support-btn { bottom: calc(88px + env(safe-area-inset-bottom)); }
  body.mc-has-cartbar #ddm-support-tooltip { bottom: calc(88px + env(safe-area-inset-bottom)); }
  body.mc-has-cartbar #ddm-support-popup { bottom: calc(152px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .mc-cart-scrim, .mc-cart-panel, .mc-cart-ship-fill { transition: none; }
  .mc-co-body, .mc-cart-bar, .mc-co-done-ico, .mc-co-error { animation: none; }
  .mc-co-btn:active:not(:disabled), .mc-cart-step:active:not(:disabled), .mc-cart-x:active, .mc-cart-bar-btn:active { transform: none; }
  .mc-co-spin { animation-duration: 1.6s; }
}