/* ==========================================================================
   Doina Vin · "Cumpărați într-un click" (dv-one-click). Kit tokens and components only (house kit:
   .dvh-drawer, .dvh-field, .dvh-check, .dvh-stepper, .dvh-btn, .dvh-notice). Loads after the kit, woo.css
   and buynow.css. Every rule is scoped to .dvoc*, except the buy-bar neighbours the phone strip moves
   (page padding, toast, cookie lift), which apply only while the strip is on the page.
   ========================================================================== */

/* ---- Triggers --------------------------------------------------------------------------------- */
.dvoc-trigger {
  display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px var(--sp-2);
  min-height: var(--tap); color: var(--ink); font-size: var(--fs-ui); line-height: 20px; font-weight: var(--fw-ui);
  text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.dvoc-trigger .dvh-icon { flex: none; width: 18px; height: 18px; color: var(--leaf); }
.dvoc-trigger__label { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.dvoc-trigger:hover .dvoc-trigger__label { text-decoration-thickness: 2px; }
.dvoc-trigger__hint { color: var(--muted); font-size: var(--fs-meta); font-weight: var(--fw-text); }
.dvoc-trigger__hint::before { content: "· "; }

/* buy box (wine page): printed first in the add form, shown last, on its own centred row */
.dvh-buy__form > .dvoc-trigger--box { order: 9; flex: 1 1 100%; margin-top: calc(-1 * var(--sp-1)); }
/* KAVI / MOG: inserted after the line's buy form */
.dvoc-trigger--line { display: flex; width: 100%; margin-top: var(--sp-2); }

/* card: one small line under the price row, centred; the short label on phone-width cards */
.dvoc-trigger--card {
  align-self: center; min-height: 36px; margin-top: var(--sp-1); padding-inline: 6px;
  font-size: var(--fs-meta); color: var(--muted); white-space: nowrap;
}
.dvoc-trigger--card .dvh-icon { width: 16px; height: 16px; }
.dvoc-trigger--card:hover { color: var(--ink); }
.dvoc-trigger__short { display: none; }
@container dvh-card (max-width: 199.98px) {
  .dvoc-trigger--card .dvoc-trigger__long { display: none; }
  .dvoc-trigger--card .dvoc-trigger__short { display: inline; }
}

/* ---- Phone strip: one row right above the buy bar (the buy box form is hidden on phones) ---------- */
:root { --dvoc-strip-h: 44px; }
.dvoc-strip { display: none; }
@media (max-width: 899.98px) {
  body:has(.dvh-buybar--buynow:not(.is-static)) .dvoc-strip {
    position: fixed; left: 0; right: 0; z-index: calc(var(--z-buybar) + 1);
    bottom: calc(var(--buybar-h) + env(safe-area-inset-bottom, 0px));
    display: flex; align-items: center; justify-content: center;
    height: var(--dvoc-strip-h); padding-inline: var(--page-gutter);
    background: var(--surface); box-shadow: var(--shadow-bar); border-bottom: 1px solid var(--line);
  }
  .dvoc-strip .dvoc-trigger { width: 100%; min-height: calc(var(--dvoc-strip-h) - 1px); }
  /* first visit: the bar rises above the cookie bar (buynow.css); the strip rides on top of it */
  body:has(.dvh-cookie:not([hidden])) .dvoc-strip { bottom: calc(var(--dvh-cookie-lift, 214px) + var(--buybar-h) + env(safe-area-inset-bottom, 0px)); }
  /* the page and the "added" toast make room for the strip too */
  body.dvh-has-buybar:has(.dvoc-strip) { padding-bottom: calc(var(--buybar-h) + var(--dvoc-strip-h) + env(safe-area-inset-bottom, 0px)); }
  body:has(.dvh-buybar--buynow:not(.is-static)):has(.dvoc-strip) .dvh-toast:not(.is-static) {
    bottom: calc(var(--buybar-h) + var(--dvoc-strip-h) + var(--sp-4) + env(safe-area-inset-bottom, 0px));
  }
}

/* ---- Dialog (kit .dvh-drawer: 440 px panel on the right, full screen on phones) ------------------- */
/* with JavaScript the dialog is a modal only; a stale #comanda-rapida anchor never shows it */
dialog.dvoc.is-js:target:not([open]) { display: none; }
.dvoc__form, .dvoc__done { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.dvoc__form[hidden], .dvoc__done[hidden], .dvoc [hidden] { display: none !important; }
.dvoc .dvh-drawer__body { padding-top: var(--sp-4); }

.dvoc__alert { margin-bottom: var(--sp-4); }
.dvoc__alert p { font-size: var(--fs-meta); line-height: 20px; }

/* the wine: thumb, name and unit price, quantity */
.dvoc__item {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-2) var(--sp-4);
  padding-bottom: var(--sp-4); border-bottom: 1px solid var(--line);
}
.dvoc__item .dvh-line__thumb { grid-row: auto; background: var(--well); }
.dvoc__iteminfo { min-width: 0; display: grid; gap: 2px; }
.dvoc__iteminfo .dvh-line__name { overflow-wrap: anywhere; }
.dvoc__item > .dvoc__err { grid-column: 1 / -1; }
.dvoc__qty.is-invalid .dvh-stepper { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }

.dvoc__lead { margin-top: var(--sp-4); font-size: var(--fs-ui); line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.dvoc__fields { margin-top: var(--sp-4); }
.dvoc__checks { margin-top: var(--sp-3); display: grid; }
.dvoc__checks .dvh-check { font-size: var(--fs-meta); line-height: 22px; padding-block: 8px; }
.dvoc__checks .dvh-check a { color: var(--link); text-decoration: underline; text-underline-offset: .2em; }
.dvoc__checks .dvh-check.is-invalid input { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }
.dvoc__err { margin-top: 2px; }
.dvoc__checks .dvoc__err { margin: -4px 0 var(--sp-1) 32px; }

/* honeypot: off screen for people, still in the form for bots */
.dvoc__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.dvoc__foot .dvh-drawer__note { margin-top: calc(-1 * var(--sp-1)); }
/* the "6 sticle" case discount (dv-deals), as the drawer shows its discount line */
.dvoc__case { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-meta); line-height: var(--lh-meta); }
.dvoc__case [data-dvoc-case-amount] { flex: none; white-space: nowrap; font-weight: var(--fw-strong); font-variant-numeric: tabular-nums; color: var(--success); }
.dvoc__foot .dvoc__case + .dvh-drawer__total { margin-top: calc(-1 * var(--sp-2)); }
.dvoc__foot .dvh-btn[disabled] { cursor: progress; }

/* ---- After the order ----------------------------------------------------------------------------- */
.dvoc__donebody { display: grid; justify-items: start; align-content: start; gap: var(--sp-3); padding-top: var(--sp-6); }
.dvoc__doneicon {
  display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--ground); color: var(--success);
}
.dvoc__doneicon .dvh-icon { width: 24px; height: 24px; stroke-width: 2.2; }
.dvoc__donetitle { font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-title); color: var(--ink); }
.dvoc__donetitle:focus { outline: none; }
.dvoc__donetitle:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.dvoc__donetext { font-size: var(--fs-ui); line-height: 1.5; text-wrap: pretty; }