/* ==========================================================================
   Reviorum — pages/claim.css  (claim.html / page-claim.php)
   ========================================================================== */

.rv-claim { padding-bottom: 64px; }
.rv-claim__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: var(--rv-s-12);
  align-items: start;
  padding-top: var(--rv-s-2);
}

/* ---------- Promo panel ---------- */
.rv-claim-promo {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 560px;
  padding: 36px;
  overflow: hidden;
  border-radius: 24px;
  background: var(--rv-night);
  color: #fff;
}
.rv-claim-promo > :not(.rv-claim-promo__art) { position: relative; }
.rv-claim-promo__art { position: absolute; right: -60px; bottom: -60px; }
.rv-claim-promo__eyebrow { color: var(--rv-mint); font-size: var(--rv-fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.rv-claim-promo__title { font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.375rem); line-height: 1.1; font-weight: 800; letter-spacing: -0.03em; }
.rv-claim-promo__list { display: flex; flex-direction: column; gap: var(--rv-s-3); max-width: 360px; margin: 0; padding: 0; list-style: none; color: var(--rv-night-text); font-size: 0.9375rem; }
.rv-claim-promo__list li { display: flex; align-items: center; gap: 10px; }
.rv-claim-promo__list svg { flex: none; color: var(--rv-mint); }
.rv-claim-promo__note { max-width: 340px; margin-top: auto; color: #9ea2c9; font-size: var(--rv-fs-sm); line-height: 1.5; }

/* ---------- Card & stepper ---------- */
.rv-claim-card { display: flex; flex-direction: column; gap: 22px; padding: var(--rv-s-8); border-radius: 16px; }
.rv-claim-steps { display: flex; align-items: center; gap: var(--rv-s-2); margin: 0; padding: 0; list-style: none; }
.rv-claim-steps__item { display: inline-flex; align-items: center; gap: var(--rv-s-2); color: var(--rv-muted); font-size: var(--rv-fs-sm); font-weight: 600; }
.rv-claim-steps__item + .rv-claim-steps__item::before { content: ""; width: 36px; height: 2px; margin-right: 0; background: var(--rv-line); }
.rv-claim-steps__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--rv-line);
  color: var(--rv-muted);
  font-size: var(--rv-fs-xs);
}
.rv-claim-steps__item.is-current { color: var(--rv-ink); }
.rv-claim-steps__item.is-current .rv-claim-steps__num { background: var(--rv-accent); color: #fff; }
.rv-claim-steps__item.is-done .rv-claim-steps__num { background: var(--rv-night); color: #fff; }

/* ---------- Form steps ---------- */
.rv-claim-form { display: flex; flex-direction: column; gap: var(--rv-s-8); }
.rv-claim-step { display: flex; flex-direction: column; gap: var(--rv-s-4); }
.rv-claim-step__legend { float: left; width: 100%; padding: 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; }
.rv-claim-step__legend + * { clear: both; }
.rv-claim-step__hint { margin-top: -10px; font-size: var(--rv-fs-md); }
.rv-js .rv-claim-step__no { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rv-no-js .rv-claim-step + .rv-claim-step { padding-top: var(--rv-s-8); border-top: 1px solid var(--rv-line); }
/* Before claim.js runs, show only step 1 (no flash of all steps) */
.rv-js .rv-claim-form:not(.is-ready) .rv-claim-step:not([data-step="1"]) { display: none; }
.rv-no-js [data-rv-claim-nav] { display: none; }
.rv-no-js [data-rv-claim-back] { display: none; }

.rv-claim-search { display: flex; gap: var(--rv-s-2); }
.rv-claim-search .rv-input { flex: 1; min-width: 0; }

.rv-claim-options { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.rv-claim-option,
.rv-claim-method {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1.5px solid var(--rv-line);
  border-radius: var(--rv-r-lg);
  background: var(--rv-surface);
  cursor: pointer;
}
.rv-claim-option__input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.rv-claim-option:has(.rv-claim-option__input:checked),
.rv-claim-method:has(.rv-claim-option__input:checked) { border-color: var(--rv-accent); background: #fafaff; box-shadow: 0 0 0 1px var(--rv-accent) inset; }
.rv-claim-option:has(.rv-claim-option__input:focus-visible),
.rv-claim-method:has(.rv-claim-option__input:focus-visible) { box-shadow: var(--rv-focus); }
.rv-claim-option__body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.rv-claim-option__state { color: var(--rv-accent); font-size: var(--rv-fs-sm); font-weight: 600; white-space: nowrap; }
.rv-claim-option--disabled { cursor: not-allowed; opacity: 0.6; }
.rv-claim-option--disabled .rv-claim-option__state { color: var(--rv-muted); }

.rv-claim-methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rv-s-3); }
.rv-claim-method { flex-direction: column; align-items: flex-start; gap: 6px; padding: var(--rv-s-4); }
.rv-claim-method strong { display: inline-flex; align-items: center; gap: var(--rv-s-2); }
.rv-claim-method__time { font-size: var(--rv-fs-xs); font-weight: 700; color: var(--rv-accent-hover); }

.rv-claim-email__row {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border: 1.5px solid #d5d9e3;
  border-radius: 12px;
  background: var(--rv-surface);
}
.rv-claim-email__row:focus-within { border-color: var(--rv-accent); box-shadow: 0 0 0 3px var(--rv-accent-soft); }
.rv-claim .rv-claim-email__row .rv-input { flex: 1; min-width: 0; border: 0; border-radius: 0; box-shadow: none; }
.rv-claim-email__suffix {
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-left: 1px solid var(--rv-line);
  background: #f6f7fa;
  color: var(--rv-muted);
  white-space: nowrap;
}

.rv-claim-dns { display: flex; flex-direction: column; gap: var(--rv-s-2); }
.rv-claim-dns__row { display: flex; align-items: center; gap: var(--rv-s-2); }
.rv-claim-dns__code {
  display: block;
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border-radius: var(--rv-r-md);
  background: var(--rv-night);
  color: #e4e6f5;
  font: 500 var(--rv-fs-sm) / 1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  word-break: break-all;
}

/* Show only the block for the chosen method (works without JS where :has() is supported) */
.rv-claim-form:has(#claim-m-email:checked) .rv-claim-dns { display: none; }
.rv-claim-form:has(#claim-m-dns:checked) .rv-claim-email { display: none; }
.rv-claim-form:has(#claim-m-email:checked) .rv-claim-email .rv-field__hint,
.rv-claim-form:has(#claim-m-dns:checked) .rv-claim-dns .rv-field__hint { display: none; }
/* Third method: manual review by a moderator */
.rv-claim-methods:has(#claim-m-manual) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rv-claim-form:has(#claim-m-manual:checked) .rv-claim-email,
.rv-claim-form:has(#claim-m-manual:checked) .rv-claim-dns,
.rv-claim-form:has(#claim-m-email:checked) .rv-claim-manual,
.rv-claim-form:has(#claim-m-dns:checked) .rv-claim-manual { display: none; }
.rv-claim-manual .rv-field__hint { display: none; }
/* The listing picked in step 1, shown above step 2 */
.rv-claim-option--picked { cursor: default; margin-bottom: var(--rv-s-4); }
.rv-body .rv-claim-option--picked .rv-claim-option__state { display: inline; }

.rv-claim-code {
  max-width: 260px;
  height: 62px;
  font: 700 1.5rem / 1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.5em;
  text-align: center;
}

.rv-claim-nav { display: flex; flex-wrap: wrap; gap: 10px; }
.rv-claim-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--rv-accent);
  font-size: inherit;
  font-weight: 600;
  cursor: pointer;
}
.rv-claim-link:hover { color: var(--rv-accent-hover); text-decoration: underline; }

/* ---------- Done ---------- */
.rv-claim-done { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.rv-claim-done:focus-visible { box-shadow: none; outline: none; }
.rv-claim-done__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: var(--rv-accent-soft);
  color: var(--rv-accent);
}
.rv-claim-done__title { font-size: 1.75rem; font-weight: 800; }
.rv-claim-done p { color: var(--rv-ink-2); line-height: 1.6; }
.rv-claim-done .rv-claim-link { color: var(--rv-muted); font-size: var(--rv-fs-sm); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .rv-claim__grid { grid-template-columns: minmax(0, 1fr); gap: var(--rv-s-5); }
  .rv-claim-promo { min-height: 0; padding: var(--rv-s-6); gap: var(--rv-s-3); }
  .rv-claim-promo__art { width: 180px; height: 180px; right: -50px; bottom: -50px; }
  .rv-claim-promo__note { margin-top: var(--rv-s-2); }
  .rv-claim-promo > :not(.rv-claim-promo__art) { max-width: 75%; }
}

@media (max-width: 640px) {
  .rv-claim-promo__list,
  .rv-claim-promo__art { display: none; }
  .rv-claim-promo > :not(.rv-claim-promo__art) { max-width: none; }
  .rv-claim-card { padding: var(--rv-s-5); }
  .rv-claim-steps { gap: 6px; }
  .rv-claim-steps__item + .rv-claim-steps__item::before { width: 12px; }
  .rv-claim-steps__item span:last-child { display: none; }
  .rv-claim-steps__item.is-current span:last-child { display: inline; }
  .rv-claim-step__legend { font-size: 1.25rem; }
  .rv-claim-methods,
  .rv-claim-methods:has(#claim-m-manual) { grid-template-columns: minmax(0, 1fr); }
  .rv-claim-option { gap: var(--rv-s-3); padding: var(--rv-s-3); }
  .rv-claim-option__state { display: none; }
  .rv-claim-option--disabled .rv-claim-option__state { display: inline; }
  .rv-claim-email__suffix { padding: 0 10px; font-size: var(--rv-fs-sm); }
  .rv-claim-nav .rv-btn { flex: 1; }
}

@media (max-width: 380px) {
  .rv-claim-email__row { flex-direction: column; }
  .rv-claim-email__suffix { border-left: 0; border-top: 1px solid var(--rv-line); min-height: 36px; }
  .rv-claim-search { flex-direction: column; }
}