/* ==========================================================================
   DECOVINK DTF configurator.

   Inherits the site's design tokens rather than defining its own, with local
   fallbacks so the plugin still looks right if the theme is ever swapped.
   No new colour, font or radius is introduced.
   ========================================================================== */

.dvc {
  --c-red: var(--dv-accent, #E30613);
  --c-red-h: var(--dv-accent-hover, #C1050F);
  --c-ink: var(--dv-ink, #161616);
  --c-mut: var(--dv-ink-muted, #57514F);
  --c-line: var(--dv-line, #E4E0DF);
  --c-bg: var(--dv-bg, #fff);
  --c-surf: var(--dv-surface-alt, #F5F5F5);
  --r-sm: var(--dv-r-sm, 8px);
  --r-md: var(--dv-r-md, 12px);
  --ease: var(--dv-ease, cubic-bezier(.2,0,.2,1));
  font-family: var(--dv-font, inherit);
  color: var(--c-ink);
}

.dvc *, .dvc *::before, .dvc *::after { box-sizing: border-box; }

.dvc-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.dvc-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }

@media (min-width: 1024px) {
  .dvc-grid { grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 32px; align-items: start; }
}

/* Steps ------------------------------------------------------------------ */

.dvc-step { margin-bottom: 24px; }

.dvc-step__title {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 12px; font-size: 1.125rem; line-height: 1.25;
}

.dvc-step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex: none;
  background: var(--c-red); border-radius: 999px;
  color: #fff; font-size: .8125rem; font-weight: 700;
}

/* Drop zone -------------------------------------------------------------- */

.dvc-drop {
  position: relative;
  border: 2px dashed var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-bg);
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}

.dvc-drop.is-over { border-color: var(--c-red); background: var(--c-surf); }
.dvc-drop.is-busy { opacity: .7; pointer-events: none; }

.dvc-drop__input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}

/* Keyboard focus must be visible even though the input is transparent. */
.dvc-drop__input:focus-visible + .dvc-drop__label {
  outline: 3px solid var(--c-red); outline-offset: 2px; border-radius: var(--r-md);
}

.dvc-drop__label {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 36px 20px; text-align: center; cursor: pointer;
}

.dvc-drop__icon { color: var(--c-red); }
.dvc-drop__text strong { display: block; font-size: .9375rem; }
.dvc-drop__hint { display: block; margin-top: 4px; font-size: .8125rem; color: var(--c-mut); }

/* Design cards ----------------------------------------------------------- */

.dvc-design {
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-bg);
  padding: 16px;
  margin-bottom: 16px;
}

.dvc-design__head { display: flex; gap: 12px; align-items: flex-start; }

.dvc-design__thumb {
  flex: none; width: 88px; height: 88px;
  object-fit: contain; background: var(--c-surf);
  border: 1px solid var(--c-line); border-radius: var(--r-sm);
}

.dvc-design__meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.dvc-design__name { font-size: .9375rem; line-height: 1.3; word-break: break-word; }
.dvc-design__facts { font-size: .8125rem; color: var(--c-mut); }

.dvc-badge {
  display: inline-flex; align-items: center; gap: 5px;
  align-self: flex-start;
  padding: 3px 9px; border-radius: 999px;
  font-size: .75rem; font-weight: 500;
  background: var(--c-surf); color: var(--c-ink);
}

/* Status is carried by an icon and words, never by colour alone. */
.dvc-badge--high::before { content: "\2713"; }
.dvc-badge--acceptable::before { content: "\25CF"; }
.dvc-badge--low::before { content: "\26A0"; }
.dvc-badge--unknown::before { content: "\003F"; }
.dvc-badge--low { background: #FDECEC; color: #8A1116; }

.dvc-warn {
  margin: 12px 0 0; padding: 10px 12px;
  background: #FDECEC; border-left: 3px solid var(--c-red);
  border-radius: var(--r-sm);
  font-size: .8125rem; line-height: 1.5; color: #6E1014;
}

.dvc-ack {
  display: flex; gap: 8px; align-items: flex-start;
  margin: 10px 0 0; font-size: .8125rem; line-height: 1.5; color: var(--c-mut);
}
.dvc-ack input { flex: none; margin-top: 3px; }

/* Size rows -------------------------------------------------------------- */

.dvc-sizes { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }

.dvc-size {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "w lock h" "qty qty qty" "price price price" "err err err";
  gap: 10px;
  align-items: end;
  padding: 12px; padding-right: 34px;
  background: var(--c-surf);
  border-radius: var(--r-sm);
}

@media (min-width: 640px) {
  .dvc-size {
    grid-template-columns: 1fr auto 1fr 140px minmax(110px, auto);
    grid-template-areas: "w lock h qty price" "err err err err err";
  }
}

.dvc-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dvc-field:nth-of-type(1) { grid-area: w; }
.dvc-field:nth-of-type(2) { grid-area: h; }
.dvc-field--qty { grid-area: qty; }

.dvc-field label { font-size: .75rem; font-weight: 500; color: var(--c-mut); }

.dvc-field input[type="text"] {
  width: 100%; min-height: 44px; padding: 8px 10px;
  background: var(--c-bg); border: 1px solid var(--c-line);
  border-radius: var(--r-sm); font: inherit; font-size: 1rem; color: var(--c-ink);
}

.dvc-field input[aria-invalid="true"] { border-color: var(--c-red); }

.dvc-lock {
  grid-area: lock;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 44px; padding: 0; margin-bottom: 0;
  background: transparent; border: 1px solid var(--c-line);
  border-radius: var(--r-sm); color: var(--c-mut); cursor: pointer;
}
.dvc-lock[aria-pressed="true"] { color: var(--c-red); border-color: var(--c-red); }

.dvc-stepper { display: flex; align-items: stretch; }

.dvc-stepper button {
  width: 44px; min-height: 44px; flex: none;
  background: var(--c-bg); border: 1px solid var(--c-line);
  color: var(--c-ink); font-size: 1.125rem; line-height: 1; cursor: pointer;
}
.dvc-stepper button:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.dvc-stepper button:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; }

.dvc-stepper input {
  width: 100%; min-width: 0; min-height: 44px;
  text-align: center; border: 1px solid var(--c-line); border-inline: 0;
  background: var(--c-bg); font: inherit; font-size: 1rem;
}

.dvc-size__price {
  grid-area: price;
  display: flex; flex-direction: column; gap: 2px;
  text-align: left; font-size: .8125rem; color: var(--c-mut);
}
@media (min-width: 640px) { .dvc-size__price { text-align: right; } }
.dvc-size__price strong { font-size: 1rem; color: var(--c-ink); }

.dvc-size__error { grid-area: err; margin: 0; }

.dvc-linkbtn {
  background: none; border: 0; padding: 4px 2px;
  color: var(--c-mut); font: inherit; font-size: .8125rem;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.dvc-linkbtn:hover { color: var(--c-red); }
.dvc-linkbtn--add { margin-top: 12px; color: var(--c-red); font-weight: 500; }

.dvc-linkbtn--drop {
  position: absolute; top: 8px; right: 8px;
  width: 24px; height: 24px; padding: 0;
  text-decoration: none; font-size: 1.125rem; line-height: 1;
}

/* Summary ---------------------------------------------------------------- */

.dvc-summary {
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  background: var(--c-bg); padding: 18px;
}

@media (min-width: 1024px) {
  .dvc-summary { position: sticky; top: 96px; }
}

.dvc-summary__title { margin: 0 0 14px; font-size: 1rem; }
.dvc-summary__lines { display: flex; flex-direction: column; gap: 10px; }

.dvc-sumline { font-size: .8125rem; }
.dvc-sumline__top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.dvc-sumline__size { min-width: 0; }
.dvc-sumline__total { white-space: nowrap; }
.dvc-sumline__sub { margin: 2px 0 0; font-size: .75rem; color: var(--c-mut); word-break: break-word; }

.dvc-summary__none, .dvc-empty { font-size: .875rem; color: var(--c-mut); }

.dvc-tier, .dvc-nudge {
  margin-top: 14px; padding: 10px 12px;
  border-radius: var(--r-sm); font-size: .8125rem; line-height: 1.45;
}
.dvc-tier { background: var(--c-surf); color: var(--c-ink); }

/* The buy-more prompt is deliberately noticeable but not shouty. */
.dvc-nudge {
  background: #FFF6F6; border: 1px solid #F6C9CB; color: #6E1014; font-weight: 500;
}

.dvc-summary__total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--c-line);
  font-size: .9375rem;
}
.dvc-summary__total strong { font-size: 1.375rem; }

.dvc-summary__tax { margin: 6px 0 14px; font-size: .75rem; color: var(--c-mut); }

.dvc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px;
  border: 1px solid transparent; border-radius: var(--r-sm);
  font: inherit; font-size: .9375rem; font-weight: 700; line-height: 1;
  cursor: pointer; text-decoration: none;
  transition: background-color .18s var(--ease);
}
.dvc-btn--primary { background: var(--c-red); color: #fff; }
.dvc-btn--primary:hover:not(:disabled) { background: var(--c-red-h); color: #fff; }
.dvc-btn--block { width: 100%; }
.dvc-btn:disabled { opacity: .45; cursor: not-allowed; }

.dvc-error {
  margin: 10px 0 0; font-size: .8125rem; line-height: 1.45;
  color: #8A1116; font-weight: 500;
}

.dvc-notice {
  margin: 0 0 18px; padding: 10px 12px;
  border: 1px dashed var(--c-red); border-radius: var(--r-sm);
  font-size: .8125rem; color: var(--c-mut);
}

/* Mobile bottom bar ------------------------------------------------------
   The site already has a fixed order bar on phones. On this page that one is
   suppressed and this takes its place, so two bars never stack.
   ----------------------------------------------------------------------- */

.dvc-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--c-bg); border-top: 1px solid var(--c-line);
}

.dvc-bar__info { display: flex; flex-direction: column; line-height: 1.25; }
.dvc-bar__info strong { font-size: 1.125rem; }
.dvc-bar__info span { font-size: .75rem; color: var(--c-mut); }

@media (min-width: 1024px) { .dvc-bar { display: none !important; } }

@media (max-width: 1023px) {
  body.dvc-page .dv-mobilebar { display: none !important; }
  body.dvc-page { padding-bottom: 84px; }
  /* The bar carries the running total; the panel itself stays in the flow. */
  .dvc-summary { margin-top: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .dvc * { transition-duration: .01ms !important; }
}
/* States and remaining blocks ------------------------------------------- */

.dvc-main { min-width: 0; }
.dvc-designs { margin-top: 4px; }

/* Placeholder card shown while a file is still uploading. */
.dvc-design--pending {
  display: flex; flex-direction: column; gap: 3px;
  opacity: .7;
}

/* No preview could be generated, so the thumbnail slot is simply absent. */
.dvc-design--nothumb .dvc-design__head { gap: 0; }

/* An unticked acknowledgement is the one thing blocking checkout, so the
   card says so rather than leaving a disabled button unexplained. */
.dvc-design--needs-ack { border-color: var(--c-red); }

.dvc-notice--admin { background: var(--c-surf); }

.dvc-summary__form { margin: 0; }

/* Pricing in flight: dim the figures without moving anything. */
.dvc.is-pricing .dvc-summary__total,
.dvc.is-pricing .dvc-size__price { opacity: .5; }

.dvc.is-adding .dvc-btn { pointer-events: none; }

/* A PDF whose resolution has not been verified. Deliberately neutral: it must
   not read as a pass, and it is not a warning either, because nothing is
   wrong with the file. */
.dvc-badge--pending {
  background: var(--c-surf);
  color: var(--c-mut);
  border: 1px solid var(--c-line);
  font-weight: 400;
}
.dvc-badge--pending::before { content: "\2139"; }

/* Low-resolution confirmation, called out on a blocked Add to cart --------- */

.dvc-design--flash {
  animation: dvc-flash 1.4s var(--dv-ease, ease) 1;
}

@keyframes dvc-flash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(227, 6, 19, 0); }
  15%, 65% { box-shadow: 0 0 0 4px rgba(227, 6, 19, 0.22); }
}

.dvc-design--flash .dvc-ack {
  animation: dvc-flash-ack 1.4s var(--dv-ease, ease) 1;
}

@keyframes dvc-flash-ack {
  0%, 100% { background: transparent; }
  15%, 65% { background: rgba(227, 6, 19, 0.10); }
}

.dvc-ack {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  border-radius: 6px;
  padding: 6px 8px;
  margin-inline: -8px;
}

.dvc-ack input:focus-visible {
  outline: 2px solid #E30613;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .dvc-design--flash,
  .dvc-design--flash .dvc-ack {
    animation: none;
  }
  .dvc-design--flash { box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.30); }
}