/* ═══════════════════════════════════════════════════════════════════════════
   VenaSales styles.

   Every selector is prefixed vs- or sits under a vs- id, so nothing here can
   reach another plugin's markup or a theme's. Colours come from --vs-accent,
   set once below and overridable from the settings screen.
   ══════════════════════════════════════════════════════════════════════════ */

:root { --vs-accent: #1D9E75; }

html.vs-lock, html.vs-lock body { overflow: hidden; }

/* ───────────────────────────── shared pieces ──────────────────────────── */

/* ── THE WHOLE SCREEN MUST BE VISIBLE WITHOUT SCROLLING ────────────────────
   With three lines everything fits. With twenty it physically cannot, on any
   phone. So rather than letting the page scroll — which pushes the tick, the
   reference and the button out of sight, the four things the buyer actually
   came for — the card is a fixed-height column and ONLY the line list scrolls
   inside it.

   The result: the tick, the headline, the reference, the three-step track, the
   total and the button are ALWAYS on screen, at any line count, on any device.
   If the lines overflow, that region scrolls on its own and a soft fade at its
   bottom edge says so.

   100dvh, not 100vh: on mobile Safari and Chrome 100vh is the height WITHOUT
   the address bar, so a 100vh card is taller than the visible screen and the
   footer sits under the browser chrome. dvh tracks the real viewport. */
.vs-card {
  max-width: 640px; margin: 0 auto; background: #fff;
  border: 1px solid #E4EDE4; border-radius: 12px; overflow: hidden;
  font-family: -apple-system, "Segoe UI", Arial, sans-serif; color: #1a1a1a;
  display: flex; flex-direction: column;
  max-height: calc(100dvh - 80px);
}
.vs-hero, .vs-track, .vs-foot, .vs-fine, .vs-replynote { flex: 0 0 auto; }

/* the only scrolling region */
.vs-lines {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
/* the total is pinned to the bottom of the list so it never scrolls away */
.vs-tot {
  position: sticky; bottom: 0; background: #fff;
  box-shadow: 0 -8px 10px -8px rgba(0,0,0,.08);
}
.vs-head { position: sticky; top: 0; background: #fff; z-index: 1; }

.vs-hero {
  padding: 34px 28px 26px; text-align: center;
  background: linear-gradient(180deg, rgba(29,158,117,.10), rgba(29,158,117,0));
}
.vs-ring { position: relative; width: 74px; height: 74px; margin: 0 auto 16px; }
.vs-pulse {
  position: absolute; inset: 0; border-radius: 50%;
  background: var(--vs-accent); opacity: .18;
  animation: vsPulse 2.4s ease-out infinite;
}
@keyframes vsPulse {
  0%   { transform: scale(.8); opacity: .26; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { opacity: 0; }
}
.vs-check { position: relative; width: 74px; height: 74px; }
.vs-circ {
  stroke: var(--vs-accent); stroke-width: 2.5;
  stroke-dasharray: 151; stroke-dashoffset: 151;
  animation: vsDraw .55s ease-out .1s forwards;
}
.vs-tick {
  stroke: var(--vs-accent); stroke-width: 3.4;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 40; stroke-dashoffset: 40;
  animation: vsDraw .38s cubic-bezier(.65,0,.45,1) .5s forwards;
}
@keyframes vsDraw { to { stroke-dashoffset: 0; } }

.vs-h  { margin: 0 0 6px; font-size: 21px; font-weight: 500; letter-spacing: -.2px;
         animation: vsUp .45s ease-out .55s both; }
.vs-sub{ margin: 0 0 18px; font-size: 14px; color: #5a5a5a;
         animation: vsUp .45s ease-out .65s both; }
@keyframes vsUp { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

.vs-so {
  display: inline-flex; flex-direction: column; gap: 3px;
  padding: 10px 20px; border: 1px dashed #c9d3c9; border-radius: 10px;
  animation: vsUp .45s ease-out .78s both;
}
.vs-so-lbl { font-size: 10.5px; letter-spacing: .9px; text-transform: uppercase; color: #8a8a8a; }
.vs-so-num { font-family: Consolas, ui-monospace, monospace; font-size: 19px;
             font-weight: 500; letter-spacing: .6px; }

/* status track */
.vs-track {
  display: flex; align-items: flex-start; padding: 20px 28px;
  border-top: 1px solid #EEF2EE; border-bottom: 1px solid #EEF2EE;
  animation: vsUp .45s ease-out .9s both;
}
.vs-step { flex: 0 0 auto; text-align: center; width: 112px; }
.vs-dot {
  width: 16px; height: 16px; margin: 0 auto 7px; border-radius: 50%;
  border: 2px solid #ccd5cc; background: #fff; position: relative;
}
.vs-done .vs-dot { background: var(--vs-accent); border-color: var(--vs-accent); }
.vs-done .vs-dot::after {
  content: ""; position: absolute; left: 4px; top: 1.5px;
  width: 3.5px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.vs-now .vs-dot { border-color: var(--vs-accent); }
.vs-spin {
  position: absolute; inset: -5px; border-radius: 50%;
  border: 2px solid rgba(29,158,117,.25); border-top-color: var(--vs-accent);
  animation: vsSpin 1s linear infinite;
}
@keyframes vsSpin { to { transform: rotate(360deg); } }
.vs-st { font-size: 12.5px; font-weight: 500; }
.vs-now .vs-st { color: var(--vs-accent); }
.vs-sd { font-size: 11px; color: #8a8a8a; margin-top: 1px; }
.vs-bar { flex: 1; height: 2px; margin-top: 7px; background: #e3e8e3; border-radius: 2px; }
.vs-bar-on { background: linear-gradient(90deg, var(--vs-accent), rgba(29,158,117,.3)); }

/* line table */
.vs-lines { padding: 16px 28px 4px; animation: vsUp .45s ease-out 1s both; }
.vs-row {
  display: grid; grid-template-columns: 1.1fr 1.6fr .9fr; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid #EEF2EE; font-size: 13px; align-items: center;
}
.vs-head {
  font-size: 10.5px; letter-spacing: .8px; text-transform: uppercase;
  color: #8a8a8a; border-bottom: 1px solid #ccd5cc; padding-bottom: 6px;
}
.vs-mono { font-family: Consolas, ui-monospace, monospace; font-weight: 500; }
.vs-dim  { color: #5a5a5a; font-size: 12px; }
.vs-note2{ display: block; font-style: normal; font-size: 11px; color: #8a8a8a; font-weight: 400; }
.vs-r    { text-align: right; white-space: nowrap; }
.vs-tot  { padding: 10px 0 0; text-align: right; font-size: 12px; color: #5a5a5a; }

.vs-replynote {
  margin: 16px 28px 0; padding: 12px 14px;
  background: #F2FAF4; border-left: 3px solid var(--vs-accent); border-radius: 0 6px 6px 0;
  font-size: 13.5px;
}

.vs-foot {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 16px 28px 6px; animation: vsUp .45s ease-out 1.1s both;
}
.vs-btn {
  display: inline-block; padding: 10px 20px; border-radius: 8px;
  background: var(--vs-accent); color: #fff; text-decoration: none;
  font-size: 13.5px; font-weight: 500; border: 0; cursor: pointer;
}
.vs-note { font-size: 12px; color: #8a8a8a; }
.vs-close {
  margin-left: auto; background: none; border: 0; color: #8a8a8a;
  font-size: 13px; cursor: pointer; text-decoration: underline;
}
.vs-fine { margin: 0; padding: 10px 28px 24px; font-size: 11.5px; line-height: 1.55; color: #8a8a8a; }

/* ───────────────────────────── confirmation overlay ───────────────────── */

#vs-confirm {
  position: fixed; inset: 0; z-index: 999999;
  background: rgba(20,28,22,.55);
  padding: 40px 16px; animation: vsFade .25s ease-out;
}
@keyframes vsFade { from { opacity: 0; } to { opacity: 1; } }

/* ───────────────────────────── toast ──────────────────────────────────── */

#vs-toast {
  position: fixed; right: 18px; bottom: 86px; z-index: 999998;
  display: flex; align-items: center; gap: 12px;
  max-width: 340px; padding: 12px 14px;
  background: #fff; border: 1px solid #E4EDE4; border-left: 4px solid var(--vs-accent);
  border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.10);
  font-family: -apple-system, "Segoe UI", Arial, sans-serif;
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
#vs-toast.vs-show { opacity: 1; transform: none; pointer-events: auto; }
.vs-t-check { width: 30px; height: 30px; flex: 0 0 auto; }
.vs-t-check .vs-circ { stroke-width: 3; }
.vs-t-check .vs-tick { stroke-width: 4.2; }
.vs-t-txt { display: flex; flex-direction: column; gap: 1px; font-size: 13px; line-height: 1.35; }
.vs-t-txt span { font-size: 11.5px; color: #8a8a8a; font-family: Consolas, ui-monospace, monospace; }
.vs-t-view {
  margin-left: auto; background: none; border: 1px solid var(--vs-accent);
  color: var(--vs-accent); border-radius: 6px; padding: 5px 10px;
  font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap;
}

/* ───────────────────────────── basket badge ───────────────────────────── */

#vs-badge {
  position: fixed; right: 18px; bottom: 18px; z-index: 999997;
  display: flex; align-items: center; gap: 8px;
  padding: 11px 16px; border: 0; border-radius: 999px;
  background: var(--vs-accent); color: #fff; cursor: pointer;
  font-family: -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 13.5px; font-weight: 500;
  box-shadow: 0 4px 18px rgba(0,0,0,.18);
  animation: vsPop .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes vsPop { from { transform: scale(.8); opacity: 0; } to { transform: none; opacity: 1; } }
.vs-b-ico { font-size: 14px; opacity: .9; }
.vs-b-n {
  background: rgba(255,255,255,.26); border-radius: 999px;
  padding: 1px 8px; font-size: 12.5px;
}

/* ───────────────────────────── drawer ─────────────────────────────────── */

#vs-drawer { position: fixed; inset: 0; z-index: 999999; display: none;
             background: rgba(20,28,22,.5); }
#vs-drawer.vs-open { display: block; animation: vsFade .2s ease-out; }
.vs-d-panel {
  position: absolute; right: 0; top: 0; bottom: 0; width: 420px; max-width: 94vw;
  background: #fff; display: flex; flex-direction: column;
  font-family: -apple-system, "Segoe UI", Arial, sans-serif; color: #1a1a1a;
  animation: vsSlide .26s cubic-bezier(.3,.8,.4,1);
}
@keyframes vsSlide { from { transform: translateX(26px); opacity: .6; } to { transform: none; opacity: 1; } }
.vs-d-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid #EEF2EE; font-size: 15px;
}
.vs-d-x { background: none; border: 0; font-size: 24px; line-height: 1; cursor: pointer; color: #8a8a8a; }
.vs-d-rows { flex: 1 1 auto; overflow-y: auto; padding: 6px 20px; }
.vs-d-row {
  display: grid; grid-template-columns: 1fr 86px auto; gap: 10px; align-items: start;
  padding: 11px 0; border-bottom: 1px solid #F2F5F2; font-size: 13px;
}
.vs-d-qty {
  width: 86px; padding: 6px 8px; border: 1px solid #d8e0d8; border-radius: 6px;
  font-size: 13px; text-align: right;
}
.vs-d-rm { background: none; border: 0; color: #B04A3A; font-size: 11.5px; cursor: pointer; padding: 6px 0; }
.vs-d-tot { padding: 10px 20px; text-align: right; font-size: 12.5px; color: #5a5a5a;
            border-top: 1px solid #EEF2EE; }
.vs-d-empty { padding: 30px 20px; color: #8a8a8a; font-size: 14px; }
.vs-d-form { padding: 14px 20px 20px; border-top: 1px solid #EEF2EE; display: grid; gap: 8px; }
.vs-d-form input, .vs-d-form textarea {
  width: 100%; padding: 9px 11px; border: 1px solid #d8e0d8; border-radius: 7px;
  font-size: 13.5px; font-family: inherit; box-sizing: border-box;
}
.vs-d-send {
  padding: 12px; border: 0; border-radius: 8px; background: var(--vs-accent);
  color: #fff; font-size: 14px; font-weight: 500; cursor: pointer;
}
.vs-d-send:disabled { opacity: .6; cursor: default; }
.vs-d-fine { margin: 2px 0 0; font-size: 11px; color: #8a8a8a; }

/* ───────────────────── the [venasales_add] button ─────────────────────── */

.vs-add { display: inline-flex; gap: 8px; align-items: center; }
.vs-add-qty {
  width: 110px; padding: 9px 11px; border: 1px solid #d8e0d8; border-radius: 7px;
  font-size: 13.5px; text-align: right;
}
.vs-add-btn {
  padding: 10px 18px; border: 0; border-radius: 7px; background: var(--vs-accent);
  color: #fff; font-size: 13.5px; font-weight: 500; cursor: pointer;
}
.vs-shake { animation: vsShake .4s; border-color: #B04A3A !important; }
@keyframes vsShake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-4px); } 75% { transform: translateX(4px); }
}

/* ───────────────────────────── mobile ─────────────────────────────────── */

/* ───────────────────────────── mobile ─────────────────────────────────────
   Not a shrunk desktop. Three things change shape rather than disappearing,
   because on a phone the buyer is usually checking an order they already sent
   and every one of these is the thing they came to look at.

   1. The line table becomes stacked cards. A part number, a specification and
      a six-figure quantity will not sit in three columns at 360px without
      wrapping into nonsense, so the part and the quantity share the top line
      and the specification runs full width beneath.
   2. The status track keeps all three steps AND their sub-labels. Hiding the
      sub-labels was the lazy fix and it removes "Quotation sent", which is the
      line that tells the buyer what completed actually means.
   3. Buttons go full width at 48px, above the thumb, with the reference still
      selectable for copy and paste into an email. */

@media (max-width: 640px) {
  .vs-card { border-radius: 0; border-left: 0; border-right: 0; }

  .vs-hero { padding: 28px 18px 22px; }
  .vs-ring { width: 62px; height: 62px; margin-bottom: 14px; }
  .vs-check { width: 62px; height: 62px; }
  .vs-h   { font-size: 19px; line-height: 1.3; }
  .vs-sub { font-size: 13.5px; margin-bottom: 16px; }
  .vs-so  { padding: 9px 16px; width: 100%; box-sizing: border-box; }
  .vs-so-num { font-size: 17.5px; user-select: all; -webkit-user-select: all; }

  /* the track: tighter, but nothing removed */
  .vs-track { padding: 16px 10px; }
  .vs-step  { width: auto; flex: 1 1 0; min-width: 0; padding: 0 2px; }
  .vs-st    { font-size: 11.5px; line-height: 1.25; }
  .vs-sd    { font-size: 9.5px; line-height: 1.25; }
  .vs-bar   { margin-top: 7px; min-width: 8px; }

  /* lines become cards */
  .vs-lines { padding: 14px 18px 4px; }
  .vs-head  { display: none; }
  .vs-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "part qty" "spec spec";
    gap: 2px 10px; padding: 12px 0;
  }
  .vs-row .vs-mono { grid-area: part; font-size: 13.5px; }
  .vs-row .vs-r    { grid-area: qty; font-size: 13px; font-weight: 500; align-self: start; }
  .vs-row .vs-dim  { grid-area: spec; font-size: 11.5px; margin-top: 1px; }
  .vs-tot { font-size: 11.5px; }

  .vs-foot { flex-direction: column; align-items: stretch; gap: 10px; padding: 16px 18px 6px; }
  .vs-btn  { text-align: center; padding: 14px 20px; font-size: 14.5px; }
  .vs-note { text-align: center; }
  .vs-fine { padding: 8px 18px 22px; }
  .vs-replynote { margin: 14px 18px 0; }

  /* the badge sits clear of iOS home indicators and sticky footers */
  #vs-badge { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); padding: 13px 18px; }
  #vs-toast { left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); max-width: none; }

  /* the drawer takes the whole screen — a half-sheet is unusable for a 20-line
     basket with an address form under it */
  .vs-d-panel { width: 100%; max-width: 100%; }
  .vs-d-row { grid-template-columns: 1fr 78px auto; }
  .vs-d-form input, .vs-d-form textarea { font-size: 16px; }  /* 16px stops iOS zooming on focus */
  .vs-d-send { padding: 15px; font-size: 15px; }
  .vs-add { display: flex; width: 100%; }
  .vs-add-qty { flex: 1 1 auto; width: auto; font-size: 16px; }
  .vs-add-btn { padding: 13px 18px; white-space: nowrap; }
}

/* very small phones — 320px */
@media (max-width: 360px) {
  .vs-sd { display: none; }        /* only here, where there is genuinely no room */
  .vs-h  { font-size: 17.5px; }
  .vs-so-num { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .vs-pulse, .vs-spin { animation: none; }
  .vs-circ, .vs-tick { animation-duration: .01s; }
  .vs-h, .vs-sub, .vs-so, .vs-track, .vs-lines, .vs-foot { animation: none; }
}

/* ── short screens ─────────────────────────────────────────────────────────
   An iPhone SE is 667px tall and a landscape phone far less. Compress the hero
   rather than the content: the tick shrinks, the padding tightens, but every
   element stays on screen and the line list keeps whatever is left. */

@media (max-height: 760px) {
  .vs-card  { max-height: calc(100dvh - 32px); }
  .vs-hero  { padding: 22px 24px 18px; }
  .vs-ring, .vs-check { width: 56px; height: 56px; }
  .vs-ring  { margin-bottom: 12px; }
  .vs-h     { font-size: 19px; }
  .vs-sub   { margin-bottom: 14px; font-size: 13.5px; }
  .vs-so    { padding: 8px 16px; }
  .vs-track { padding: 14px 24px; }
  .vs-fine  { padding-top: 8px; padding-bottom: 16px; }
}

@media (max-height: 640px) {
  .vs-card { max-height: calc(100dvh - 16px); border-radius: 0; }
  .vs-hero { padding: 16px 20px 14px; }
  .vs-ring, .vs-check { width: 46px; height: 46px; }
  .vs-ring { margin-bottom: 9px; }
  .vs-h    { font-size: 17px; margin-bottom: 4px; }
  .vs-sub  { font-size: 12.5px; margin-bottom: 11px; }
  .vs-so   { padding: 7px 14px; }
  .vs-so-num { font-size: 16px; }
  .vs-track{ padding: 11px 18px; }
  .vs-dot  { margin-bottom: 5px; }
  .vs-fine { font-size: 10.5px; padding-bottom: 12px; }
  .vs-foot { padding-top: 12px; }
}

/* the overlay no longer scrolls — the card inside it does */
#vs-confirm { display: flex; align-items: center; justify-content: center;
              overflow: hidden; padding: 24px 16px; }
@media (max-width: 640px) { #vs-confirm { padding: 12px 10px; } }
@media (max-height: 640px) { #vs-confirm { padding: 8px 0; } }

/* ── [venasales_basket] rendered in the page rather than as an overlay ──────
   The same markup as the drawer, but flowing in the document: no fixed
   position, no backdrop, no height cap. */
.vs-inline { display: block; }
.vs-inline .vs-d-panel {
  position: static; width: auto; max-width: 640px; margin: 0 auto;
  border: 1px solid #E4EDE4; border-radius: 12px; animation: none;
}
.vs-inline .vs-d-rows { max-height: 60vh; }