/**
 * Review helper — /review/
 *
 * Loaded only on the review page (see includes/review-helper.php).
 * Everything is scoped to #pvr-app and reads the theme tokens from style.css
 * with a literal fallback, so renaming a token degrades rather than breaks.
 *
 * @package Photo_Video_London
 * @since 4.17
 */

#pvr-app {
  --pvr-go: #1f9d55; /* same green as .dot in style.css */
  max-width: 760px;
}
#pvr-app * { box-sizing: border-box; }
#pvr-app p { margin: 0; }
#pvr-app button,
#pvr-app input,
#pvr-app select,
#pvr-app textarea { font-family: inherit; }

/* The page has no hero — see page-review.php — so the widget starts near the
   top, tighter than the theme's .sec default which is tuned for sections that
   follow one.

   padding-bottom has to be declared too. The section carries `sec wrap`, and
   style.css has `.wrap { padding: 0 32px }` plus a `@media(max-width:680px)
   { .wrap { padding: 0 18px } }` — both shorthands, both of which wipe the
   vertical padding `.sec` set. Nothing put it back, so on a phone the Next
   button sat flush against the footer with no gap at all.

   Longhands on purpose: a shorthand here would override the horizontal gutter
   and break the 430px step the theme defines. */
.pvr-section {
  padding-top: clamp(34px, 5vw, 64px);
  padding-bottom: clamp(56px, 9vw, 104px);
}

/* ---------- progress ----------
 * The first thing on the page now, so it does the orienting the hero used to:
 * three stops, how far along you are, how much is left. Each stop is also a way
 * back — a step you have answered can be reopened by tapping its number. Stops
 * you have not earned stay disabled, so tapping "03" can never drop you on a
 * step whose delivery select has nothing in it.
 */
#pvr-app .pvr-progress {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0 0 40px;
  padding: 0 0 30px;
  border-bottom: 1px solid var(--line, #e4e4e1);
}
#pvr-app .pvr-progress li {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
/* Each stop is a button so a completed step can be reopened by tapping it.
   Stripped back to bare text — it has to read as a progress marker first and a
   control second, or it competes with the Back and Next buttons below. */
#pvr-app .pvr-pstep {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
#pvr-app .pvr-pstep:disabled { cursor: default; }
#pvr-app .pvr-pstep:not(:disabled):hover .pvr-pn { border-color: var(--ink, #0a0a0a); }
#pvr-app .pvr-pstep:not(:disabled):hover .pvr-pl { color: var(--ink, #0a0a0a); }
#pvr-app .pvr-pstep:focus-visible { outline: 2px solid var(--ink, #0a0a0a); outline-offset: 4px; border-radius: 999px; }
/* The connector belongs to the step it leads into, and grows to fill the row. */
#pvr-app .pvr-progress li + li { flex: 1 1 auto; }
#pvr-app .pvr-progress li + li::before {
  content: "";
  flex: 1 1 auto;
  min-width: 16px;
  height: 1px;
  background: var(--line-2, #d7d7d3);
  margin: 0 14px;
}
#pvr-app .pvr-progress li.is-done + li::before { background: var(--ink, #0a0a0a); }

#pvr-app .pvr-pn {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line-2, #d7d7d3);
  background: var(--paper, #fff);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--faint, #6f6f6b);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
#pvr-app .pvr-pl {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint, #6f6f6b);
  white-space: nowrap;
}

/* Done: the number is replaced by a tick, so a glance counts what is finished
   rather than re-reading the numbers. */
#pvr-app .pvr-progress li.is-done .pvr-pn {
  background: var(--ink, #0a0a0a);
  border-color: var(--ink, #0a0a0a);
  color: transparent;
}
#pvr-app .pvr-progress li.is-done .pvr-pn::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
}
#pvr-app .pvr-progress li.is-done .pvr-pl { color: var(--muted, #6c6c69); }
/* A finished stop is the one you can go back to, so it gets the affordance. */
#pvr-app .pvr-progress li.is-done .pvr-pstep:not(:disabled):hover .pvr-pn {
  background: #262625;
  border-color: #262625;
}

#pvr-app .pvr-progress li.is-current .pvr-pn {
  background: var(--ink, #0a0a0a);
  border-color: var(--ink, #0a0a0a);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(10, 10, 10, .10);
}
#pvr-app .pvr-progress li.is-current .pvr-pl {
  color: var(--ink, #0a0a0a);
  font-weight: 600;
}

/* Below ~560px the three labels no longer fit on one line, and wrapping turns
   the bar into three stacked rows that read as three more things to do. Circles
   and connectors only — the panel heading underneath names the current step. */
@media (max-width: 560px) {
  #pvr-app .pvr-progress .pvr-pl { display: none; }
  #pvr-app .pvr-progress { margin-bottom: 32px; padding-bottom: 24px; }
  #pvr-app .pvr-progress li + li::before { margin: 0 10px; }
}
@media (prefers-reduced-motion: reduce) {
  #pvr-app .pvr-pn { transition: none; }
}

/* ---------- panels ----------
 * min-height is set at runtime by review.js so every input step reserves the
 * height of the tallest. A step that changes the page height makes the browser
 * clamp the scroll, which reads as the form jumping on its own.
 *
 * The panel takes focus on each step change so the step is announced, but it is
 * programmatic focus on a container — a visible ring there would be noise.
 * Interactive children keep their own :focus-visible rings.
 */
#pvr-app .pvr-panel { outline: none; }
#pvr-app .pvr-panel > .pvr-q { margin-bottom: 6px; }
#pvr-app .pvr-panel { display: flex; flex-direction: column; }

/* ---------- step navigation ---------- */
#pvr-app .pvr-nav {
  display: flex;
  gap: 11px;
  flex-wrap: wrap;
  /* Bottom of the reserved panel height, so Back/Next sit in the same place on
     every step instead of chasing the length of the content above them. */
  margin-top: auto;
  padding-top: 34px;
}
/* Disabled, but still hoverable: pointer-events:none would leave the cursor
   unchanged, so the button would read as broken rather than as not-yet-earned.
   The click handler ignores it either way. */
#pvr-app .pvr-nav .btn:disabled {
  opacity: .35;
  cursor: not-allowed;
}
#pvr-app .pvr-nav .btn:disabled:hover { background: var(--ink, #0a0a0a); }
#pvr-app .pvr-nav .btn:disabled:active { transform: none; }
/* Back sits left, forward right, so the primary action is always in the same
   place regardless of how many buttons a panel has. */
#pvr-app .pvr-nav .btn-dark { margin-left: auto; }
#pvr-app .pvr-nav--end {
  padding-top: 26px;
  border-top: 1px solid var(--line, #e4e4e1);
}
#pvr-app .pvr-nav--end .btn { margin-left: 0; }
#pvr-app .pvr-q {
  font-size: 21px;
  letter-spacing: -.025em;
  line-height: 1.2;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--ink, #0a0a0a);
}
#pvr-app .pvr-sub {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted, #6c6c69);
  margin: 0 0 18px;
  max-width: 52ch;
}

/* ---------- chips (matches .svc-chip) ---------- */
#pvr-app .pvr-chips { display: flex; flex-wrap: wrap; gap: 9px; }
#pvr-app .pvr-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  padding: 9px 16px;
  border: 1px solid var(--line-2, #d7d7d3);
  border-radius: 999px;
  background: var(--paper, #fff);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: #2a2a28;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
#pvr-app .pvr-chip:hover { border-color: var(--ink, #0a0a0a); }
#pvr-app .pvr-chip[aria-pressed="true"] {
  background: var(--ink, #0a0a0a);
  border-color: var(--ink, #0a0a0a);
  color: #fff;
}
#pvr-app .pvr-chip[aria-pressed="true"]::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  flex: 0 0 auto;
}
#pvr-app .pvr-chip[data-locked="1"] {
  opacity: .34;
  cursor: not-allowed;
  border-color: var(--line, #e4e4e1);
}
#pvr-app .pvr-chip[data-locked="1"]:hover { border-color: var(--line, #e4e4e1); }

/* ---------- fields ---------- */
#pvr-app .pvr-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
#pvr-app .pvr-f { display: flex; flex-direction: column; gap: 7px; }
#pvr-app .pvr-f--wide { grid-column: 1 / -1; }
#pvr-app .pvr-f label {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: #2a2a28;
}
#pvr-app .pvr-opt { font-weight: 400; color: var(--faint, #6f6f6b); font-size: 12.5px; }
#pvr-app .pvr-f input,
#pvr-app .pvr-f select {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid var(--line-2, #d7d7d3);
  border-radius: 12px;
  background: var(--paper, #fff);
  font-size: 15px;
  color: var(--ink, #0a0a0a);
  appearance: none;
  -webkit-appearance: none;
}
#pvr-app .pvr-f select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238e8e8a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  padding-right: 38px;
}
#pvr-app .pvr-f input::placeholder { color: #a3a39f; }
#pvr-app .pvr-f input:focus,
#pvr-app .pvr-f select:focus { outline: none; border-color: var(--ink, #0a0a0a); }

/* ---------- draft ---------- */
#pvr-app .pvr-hidden { display: none !important; }
#pvr-app #pvr-text {
  display: block;
  width: 100%;
  min-height: 190px;
  padding: 22px 24px;
  border: 1px solid var(--line, #e4e4e1);
  border-radius: var(--radius, 18px);
  background: var(--mist, #f4f4f3);
  font-size: 16.5px;
  line-height: 1.68;
  color: #33332f;
  resize: vertical;
}
#pvr-app #pvr-text:focus {
  outline: none;
  border-color: var(--ink, #0a0a0a);
  background: var(--paper, #fff);
}
#pvr-app .pvr-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin: 12px 4px 24px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--faint, #6f6f6b);
  flex-wrap: wrap;
}
#pvr-app .pvr-shuffle {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--muted, #6c6c69);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid var(--line-2, #d7d7d3);
  transition: color .15s, border-color .15s;
}
#pvr-app .pvr-shuffle:hover { color: var(--ink, #0a0a0a); border-color: var(--ink, #0a0a0a); }

/* ---------- actions ---------- */
#pvr-app .pvr-actions { display: flex; gap: 11px; flex-wrap: wrap; }
#pvr-app .pvr-actions .btn { flex: 1 1 auto; justify-content: center; }
#pvr-app .pvr-btn--copied,
#pvr-app .pvr-btn--copied:hover {
  background: var(--pvr-go);
  border-color: var(--pvr-go);
  color: #fff;
}
/* The Google button stays dimmed until the text is on the clipboard — opening
   Google first is how people lose the draft. */
#pvr-app .pvr-btn--go:not(.is-ready) { opacity: .4; pointer-events: none; }
#pvr-app .pvr-btn--go.is-ready {
  background: var(--ink, #0a0a0a);
  border-color: var(--ink, #0a0a0a);
  color: #fff;
}

#pvr-app .pvr-note {
  margin: 22px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted, #6c6c69);
  max-width: 58ch;
}

@media (max-width: 680px) {
  /* review.js drops the height reservation here, so there is no reserved space
     to pin the nav to — let it sit under the content with a normal gap instead
     of floating at the bottom of an empty block. */
  #pvr-app .pvr-nav { margin-top: 0; padding-top: 30px; }
  #pvr-app .pvr-q { font-size: 19px; }
  #pvr-app .pvr-fields { grid-template-columns: 1fr; }
  /* 16px minimum stops iOS zooming the viewport on focus */
  #pvr-app .pvr-f input,
  #pvr-app .pvr-f select { font-size: 16px; }
  #pvr-app #pvr-text { font-size: 16px; padding: 18px 20px; }
  #pvr-app .pvr-actions { flex-direction: column; }
  #pvr-app .pvr-actions .btn { width: 100%; }
}