/**
 * Product authenticity & warranty page.
 *
 * Same two rules as the sibling plugins' front ends:
 *
 * 1. Inherit, don't impose. Every surface and text colour reads a theme token
 *    first (--color-bg-elevated, --color-text, --color-accent…) with a literal
 *    fallback, so the page follows the theme's dark/light toggle. The three
 *    verdict tones (ok / warn / bad) are the only colours of our own, and they
 *    are used for borders, icons and tints - never for body text - so they
 *    read on both a black and a white background.
 * 2. Logical properties throughout, so Persian and Arabic flip without a
 *    second stylesheet. Serial numbers and codes are forced LTR in the markup.
 *
 * Everything is scoped under .jwa.
 */

.jwa {
  --jwa-accent: var(--color-accent, #ff6a00);
  --jwa-accent-contrast: var(--color-accent-contrast, #fff);
  --jwa-surface: var(--color-bg-elevated, #f6f6f6);
  --jwa-surface-2: var(--color-surface-glass, rgb(0 0 0 / 3%));
  --jwa-text: var(--color-text, #111);
  --jwa-muted: var(--color-text-muted, #5f5f66);
  --jwa-border: var(--color-border, rgb(0 0 0 / 10%));
  --jwa-shadow: var(--shadow-elevated, 0 20px 60px rgb(0 0 0 / 12%));
  --jwa-ease: var(--ease-premium, cubic-bezier(0.16, 1, 0.3, 1));
  --jwa-ok: #16a34a;
  --jwa-warn: #e08a00;
  --jwa-bad: #dc2626;
  --jwa-radius: 18px;
  --jwa-gap: clamp(16px, 2.4vw, 24px);

  display: block;
  max-inline-size: 920px;
  margin-inline: auto;
  color: var(--jwa-text);
  font-size: 16px;
  line-height: 1.7;
}

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

.jwa-icon {
  flex: none;
  inline-size: 1.25em;
  block-size: 1.25em;
}

.jwa__intro {
  margin-block: 0 var(--jwa-gap);
  color: var(--jwa-muted);
  font-size: 1.05em;
}

/* --- Form ------------------------------------------------------------ */

.jwa-form {
  margin-block: 0 var(--jwa-gap);
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid var(--jwa-border);
  border-radius: var(--jwa-radius);
  background: var(--jwa-surface);
}

.jwa-form--compact {
  padding: 16px;
}

.jwa-form__label {
  display: block;
  margin-block-end: 8px;
  font-weight: 600;
}

.jwa-form__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.jwa-form__input {
  flex: 1 1 240px;
  min-inline-size: 0;
  padding: 14px 18px;
  border: 1px solid var(--jwa-border);
  border-radius: 12px;
  background: var(--color-bg, #fff);
  color: var(--jwa-text);
  font: 600 1.15em/1.3 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: 0.06em;
  text-align: start;
  text-transform: uppercase;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.jwa-form__input::placeholder {
  color: var(--jwa-muted);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.8;
}

.jwa-form__input:focus {
  outline: none;
  border-color: var(--jwa-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--jwa-accent) 25%, transparent);
}

.jwa-form__button,
.jwa-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--jwa-accent);
  color: var(--jwa-accent-contrast);
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.2s var(--jwa-ease),
    filter 0.2s;
}

.jwa-form__button:hover,
.jwa-button:hover {
  filter: brightness(1.08);
}

.jwa-form__button:active,
.jwa-button:active {
  transform: translateY(1px);
}

.jwa-form__button:focus-visible,
.jwa-button:focus-visible {
  outline: 2px solid var(--jwa-accent);
  outline-offset: 3px;
}

.jwa-button {
  padding: 10px 18px;
  background: var(--jwa-surface-2);
  border-color: var(--jwa-border);
  color: var(--jwa-text);
  font-weight: 600;
}

.jwa-button--ghost {
  background: transparent;
}

.jwa-form__hint {
  margin-block: 10px 0;
  color: var(--jwa-muted);
  font-size: 0.875em;
}

.jwa--widget .jwa-form {
  margin: 0;
}

.jwa__widget-title {
  margin-block: 0 8px;
  font-weight: 700;
}

/* --- Steps (empty state) -------------------------------------------- */

.jwa-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin: 0 0 var(--jwa-gap);
  padding: 0;
  list-style: none;
}

.jwa-steps__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--jwa-border);
  border-radius: 14px;
  background: var(--jwa-surface-2);
  color: var(--jwa-muted);
  font-size: 0.93em;
}

.jwa-steps__item .jwa-icon {
  inline-size: 28px;
  block-size: 28px;
  color: var(--jwa-accent);
}

/* --- Verdict banner --------------------------------------------------- */

.jwa-verdict {
  --tone: var(--jwa-ok);

  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-block: 0 var(--jwa-gap);
  padding: clamp(18px, 3vw, 26px);
  border: 1px solid color-mix(in srgb, var(--tone) 45%, transparent);
  border-inline-start-width: 5px;
  border-radius: var(--jwa-radius);
  background: color-mix(in srgb, var(--tone) 10%, var(--jwa-surface));
  animation: jwa-rise 0.5s var(--jwa-ease) both;
}

.jwa-verdict--warn {
  --tone: var(--jwa-warn);
}

.jwa-verdict--bad {
  --tone: var(--jwa-bad);
}

.jwa-verdict__icon {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: 52px;
  block-size: 52px;
  border-radius: 50%;
  background: var(--tone);
  color: #fff;
}

.jwa-verdict__icon .jwa-icon {
  inline-size: 28px;
  block-size: 28px;
  stroke-width: 2.4;
}

.jwa-verdict__body {
  min-inline-size: 0;
}

.jwa-verdict__title {
  margin: 0 0 4px;
  font-size: clamp(1.2em, 2.6vw, 1.55em);
  line-height: 1.3;
}

.jwa-verdict__serial {
  margin: 0 0 6px;
  font-weight: 600;
}

.jwa-verdict__serial bdi {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: 0.04em;
}

.jwa-verdict__text {
  margin: 0;
  color: var(--jwa-muted);
}

/* --- Product card ------------------------------------------------------ */

.jwa-card,
.jwa-warranty,
.jwa-coverage,
.jwa-support {
  margin-block: 0 var(--jwa-gap);
  padding: clamp(18px, 3vw, 26px);
  border: 1px solid var(--jwa-border);
  border-radius: var(--jwa-radius);
  background: var(--jwa-surface);
}

.jwa-product {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-block-end: 18px;
}

.jwa-product__image {
  flex: none;
  inline-size: 96px;
  block-size: 96px;
  border-radius: 14px;
  background: var(--jwa-surface-2);
  object-fit: contain;
}

.jwa-product__category {
  margin: 0;
  color: var(--jwa-accent);
  font-size: 0.8em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.jwa-product__name {
  margin: 2px 0 0;
  font-size: 1.3em;
  line-height: 1.35;
}

.jwa-product__name a {
  color: inherit;
  text-decoration: none;
}

.jwa-product__name a:hover {
  text-decoration: underline;
}

.jwa-product__model {
  margin: 4px 0 0;
  color: var(--jwa-muted);
  font-size: 0.9em;
}

.jwa-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--jwa-border);
  border-radius: 14px;
  background: var(--jwa-border);
}

.jwa-facts__item {
  padding: 12px 16px;
  background: var(--jwa-surface);
}

.jwa-facts dt {
  color: var(--jwa-muted);
  font-size: 0.8em;
}

.jwa-facts dd {
  margin: 2px 0 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.jwa-facts bdi {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

.jwa-facts--inline {
  margin-block-start: 18px;
}

.jwa-note {
  margin: 16px 0 0;
  padding: 12px 16px;
  border-inline-start: 3px solid var(--jwa-accent);
  border-radius: 8px;
  background: var(--jwa-surface-2);
}

/* --- Warranty panel ----------------------------------------------------- */

.jwa-warranty {
  --tone: var(--jwa-ok);

  border-color: color-mix(in srgb, var(--tone) 35%, var(--jwa-border));
}

.jwa-warranty--warn {
  --tone: var(--jwa-warn);
}

.jwa-warranty--bad {
  --tone: var(--jwa-bad);
}

.jwa-warranty__badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tone) 16%, transparent);
  color: var(--jwa-text);
  font-size: 0.8em;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 50%, transparent);
}

.jwa-warranty__title {
  margin: 10px 0 4px;
  font-size: 1.25em;
  line-height: 1.35;
}

.jwa-warranty__text {
  margin: 0;
  color: var(--jwa-muted);
}

.jwa-meter {
  block-size: 10px;
  margin-block-start: 16px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--jwa-surface-2);
  box-shadow: inset 0 0 0 1px var(--jwa-border);
}

.jwa-meter__bar {
  display: block;
  block-size: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--tone), color-mix(in srgb, var(--tone) 60%, #fff));
  animation: jwa-grow 1s var(--jwa-ease) both;
  transform-origin: left center;
}

[dir="rtl"] .jwa-meter__bar {
  transform-origin: right center;
}

/* --- Checks counter ------------------------------------------------------ */

.jwa-checks {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-block: 0 var(--jwa-gap);
  padding: 14px 18px;
  border: 1px dashed var(--jwa-border);
  border-radius: 14px;
  color: var(--jwa-muted);
  font-size: 0.9em;
}

.jwa-checks .jwa-icon {
  margin-block-start: 2px;
}

/* --- Coverage --------------------------------------------------------- */

.jwa-coverage {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--jwa-gap);
}

.jwa-coverage__title {
  margin: 0 0 12px;
  font-size: 1.05em;
}

.jwa-coverage__terms {
  grid-column: 1 / -1;
  padding-block-start: var(--jwa-gap);
  border-block-start: 1px solid var(--jwa-border);
}

.jwa-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.jwa-list__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.jwa-list__item .jwa-icon {
  margin-block-start: 3px;
  padding: 3px;
  border-radius: 50%;
  stroke-width: 2.6;
}

.jwa-coverage__col--yes .jwa-icon {
  background: color-mix(in srgb, var(--jwa-ok) 16%, transparent);
  color: var(--jwa-ok);
}

.jwa-coverage__col--no .jwa-icon {
  background: color-mix(in srgb, var(--jwa-bad) 14%, transparent);
  color: var(--jwa-bad);
}

.jwa-terms {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-inline-start: 1.4em;
  color: var(--jwa-muted);
}

/* --- Support ------------------------------------------------------------ */

.jwa-support__title {
  margin: 0 0 4px;
  font-size: 1.05em;
}

.jwa-support__name {
  margin: 0 0 12px;
  font-weight: 600;
}

.jwa-support__list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.jwa-support__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.jwa-support__list .jwa-icon {
  margin-block-start: 3px;
  color: var(--jwa-accent);
}

.jwa-support__list a {
  color: inherit;
}

/* --- Actions / footer ------------------------------------------------------ */

.jwa-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-block: 0 12px;
}

.jwa-stamp {
  margin: 0;
  color: var(--jwa-muted);
  font-size: 0.8em;
}

.jwa-toast {
  position: fixed;
  inset-block-end: 24px;
  inset-inline-start: 50%;
  z-index: 99999;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--jwa-text);
  color: var(--color-bg, #fff);
  font-size: 0.9em;
  transform: translateX(-50%);
  animation: jwa-rise 0.3s var(--jwa-ease) both;
}

[dir="rtl"] .jwa-toast {
  transform: translateX(50%);
}

/* --- Motion -------------------------------------------------------------- */

@keyframes jwa-rise {
  from {
    opacity: 0;
    translate: 0 8px;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes jwa-grow {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .jwa *,
  .jwa-toast {
    animation: none !important;
    transition: none !important;
  }
}

/* --- Small screens --------------------------------------------------------- */

@media (max-width: 560px) {
  .jwa-form__button {
    flex: 1 1 100%;
  }

  .jwa-verdict {
    flex-direction: column;
  }

  .jwa-product {
    align-items: flex-start;
  }

  .jwa-product__image {
    inline-size: 72px;
    block-size: 72px;
  }
}

/* --- Print: a clean certificate ------------------------------------------ */

@media print {
  body.jwa-result-view header,
  body.jwa-result-view footer,
  body.jwa-result-view nav,
  body.jwa-result-view .site-header,
  body.jwa-result-view .site-footer,
  body.jwa-result-view #wpadminbar,
  body.jwa-result-view [class*="breadcrumb"],
  body.jwa-result-view [class*="support-widget"],
  body.jwa-result-view [class*="jbs-"] {
    display: none !important;
  }

  .jwa .jwa-form,
  .jwa .jwa-actions {
    display: none !important;
  }

  .jwa {
    --jwa-surface: #fff;
    --jwa-surface-2: #f5f5f5;
    --jwa-text: #000;
    --jwa-muted: #444;
    --jwa-border: #ccc;

    max-inline-size: none;
    color: #000;
  }

  .jwa-verdict,
  .jwa-card,
  .jwa-warranty,
  .jwa-coverage,
  .jwa-support {
    break-inside: avoid;
    box-shadow: none;
  }

  .jwa-verdict,
  .jwa-meter__bar {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}

/* --- Customer activation (/verify/p/CODE/, My warranties) ------------ */

.jwa-activate {
  margin-block: 0 var(--jwa-gap);
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid color-mix(in srgb, var(--jwa-accent) 35%, var(--jwa-border));
  border-radius: var(--jwa-radius);
  background: var(--jwa-surface);
}

.jwa-activate__title {
  margin: 0 0 6px;
  font-size: 1.3em;
  line-height: 1.35;
}

.jwa-activate .jwa-form,
.jwa-activate__form {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.jwa-activate__form .jwa-form__label,
.jwa--account .jwa-form__label {
  margin-block-start: 14px;
}

.jwa-activate__form > .jwa-form__input,
.jwa--account .jwa-activate > .jwa-form__input,
.jwa-form__select {
  display: block;
  inline-size: 100%;
}

.jwa-form__input--date,
.jwa-form__input--text {
  font-family: inherit;
  letter-spacing: 0;
  text-transform: none;
}

.jwa-form__input--date {
  max-inline-size: 16em;
}

.jwa-form__select {
  font-family: inherit;
  letter-spacing: 0;
  text-transform: none;
}

.jwa-activate__form .jwa-form__row {
  margin-block-start: 18px;
}

.jwa-activate__user {
  margin: 0 0 4px;
  color: var(--jwa-muted);
}

.jwa-button--primary {
  background: var(--jwa-accent);
  border-color: transparent;
  color: var(--jwa-accent-contrast);
}

.jwa-activate-cta {
  margin-block: 0 var(--jwa-gap);
}

.jwa--account {
  max-inline-size: none;
}

.jwa--account .jwa-activate {
  margin-block-start: var(--jwa-gap);
}

.jwa-mine {
  inline-size: 100%;
}

.jwa-mine__serial {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: 0.03em;
}

.jwa-mine__until {
  display: block;
  color: var(--jwa-muted);
  font-size: 0.85em;
}

.jwa-pill {
  --tone: var(--jwa-ok);

  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tone) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 45%, transparent);
  font-size: 0.82em;
  font-weight: 700;
  white-space: nowrap;
}

.jwa-pill--warn {
  --tone: var(--jwa-warn);
}

.jwa-pill--bad {
  --tone: var(--jwa-bad);
}