/* Cookie consent panel (#96).
   Bottom sheet on mobile, bottom-right card on desktop. Not a modal: the page
   below stays readable and usable while the question is on screen.
   Token fallbacks let it render correctly on the checkout templates, which are
   standalone and do not load the redesign tokens.

   Kept deliberately small. On a phone the first version took more than half the
   viewport, which turns the question into an obstacle and pushes the visitor to
   click whatever makes it go away. Everything here that could be trimmed
   without losing the two answers or the two purpose names has been. */

.vd-consent {
  position: fixed;
  /* Below the transient bottom overlays, above ordinary content. The
     add-to-cart toast is fixed at 1050 and shares this corner: at a higher
     z-index the panel covered its "go to cart" button, which the e2e suite
     caught. The panel is persistent and the toast lasts a few seconds, so the
     toast wins the overlap and the panel is readable again straight after.
     Nothing about consent depends on this: no tracker loads either way. */
  z-index: 1040;
  inset: auto 0 0 0;
  padding: 0;
  background: #fff;
  color: var(--vd-body, #2b3038);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.16);
  animation: vd-consent-in 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.vd-consent[hidden] { display: none; }

/* A rise of a few pixels with a fade, not a sheet thrown up from the bottom
   edge. The panel appears once the page is readable, so it arrives into
   something the visitor is already looking at: it has to settle there rather
   than announce itself. */
@keyframes vd-consent-in {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .vd-consent { animation: none; }
}

.vd-consent-card {
  max-height: 80vh;
  overflow-y: auto;
  padding: 14px 16px 16px;
}

.vd-consent-title {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 800;
  color: var(--vd-ink, #15181c);
}

.vd-consent-text {
  margin: 0 0 12px;
  font-size: 13.5px;
  line-height: 1.45;
}

.vd-consent-text a {
  color: var(--vd-primary-dark, #d9601f);
  text-decoration: underline;
  white-space: nowrap;
}

/* Second layer: everything that does not have to be read before answering. */
.vd-consent-details { margin: 0 0 12px; }

.vd-consent-details[hidden] { display: none; }

.vd-consent-list {
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vd-consent-item { margin: 0; }

.vd-consent-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.vd-consent-checkbox {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  cursor: pointer;
  accent-color: var(--vd-primary-dark, #d9601f);
}

.vd-consent-item-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vd-consent-item-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--vd-ink, #15181c);
}

.vd-consent-item-desc {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--vd-muted, #515862);
}

.vd-consent-note {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--vd-muted, #515862);
}

.vd-consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Refusing has to be as easy as accepting, so the two share every dimension:
   same padding, same font size, same weight, same radius, same row. Only the
   colour differs, and neither is dimmed or demoted to a text link. A refusal
   that takes more effort than an acceptance is not a free choice, and that is
   what makes the consent invalid rather than merely unfriendly. */
.vd-consent-btn {
  flex: 1 1 45%;
  min-width: 0;
  padding: 10px 14px;
  border: 2px solid transparent;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.vd-consent-btn[hidden] { display: none; }

.vd-consent-btn:focus-visible {
  outline: 3px solid var(--vd-primary-dark, #d9601f);
  outline-offset: 2px;
}

.vd-consent-btn-accept {
  background: var(--vd-primary-dark, #d9601f);
  color: #fff;
  border-color: var(--vd-primary-dark, #d9601f);
}

.vd-consent-btn-accept:hover {
  background: #c1541a;
  border-color: #c1541a;
  color: #fff;
}

/* White ground, black text, black border. The border is the part that matters:
   filled against outlined is a difference of colour, filled against borderless
   would be a difference of importance. */
.vd-consent-btn-refuse {
  background: #fff;
  color: var(--vd-ink, #15181c);
  border-color: var(--vd-ink, #15181c);
}

.vd-consent-btn-refuse:hover {
  background: var(--vd-bg-soft, #f3f6f4);
  border-color: var(--vd-ink, #15181c);
  color: var(--vd-ink, #15181c);
}

/* Opening the detail, then saving it. Neither is an answer to the question, so
   both take the full width below the two that are, and neither competes with
   them. */
.vd-consent-btn-tertiary {
  flex: 1 1 100%;
  background: #fff;
  color: var(--vd-muted, #515862);
  border-color: var(--vd-line, #d5d9dd);
}

.vd-consent-btn-tertiary:hover {
  background: var(--vd-bg-soft, #f3f6f4);
  color: var(--vd-ink, #15181c);
}

/* The footer control that reopens the panel is styled in footer.css, on the
   same declaration as the links it sits between, so the two cannot drift. */

@media (min-width: 768px) {
  .vd-consent {
    inset: auto 20px 20px auto;
    max-width: 420px;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
  }

  .vd-consent-card { max-height: 75vh; }

  .vd-consent-btn { flex: 1 1 auto; }
}