/* ============================================================
   REWIND — Conversational backward-navigation affordance.

   Lets a guest jump back to an earlier step in a multi-card
   conversation (e.g. Dates → Preferences → Rooms → Review)
   to amend a prior input without losing place.

   DISTINCT FROM BUTTON:
   - Buttons drive forward actions (Continue, Book Now, Cancel).
   - Rewinds navigate conversation history backward.
   - Non-uppercase, quieter weight, smaller min-height.

   USAGE (single):
   <button type="button" class="rewind" aria-label="Jump back to change dates">
     <svg class="rewind__icon" viewBox="0 0 24 24" aria-hidden="true">
       <use href="property-sprite.svg#icon-calendar"/>
     </svg>
     <span class="rewind__label">Change Dates</span>
   </button>

   USAGE (row of rewinds):
   <div class="rewind-row">
     <button type="button" class="rewind" aria-label="Jump back to change dates">
       <svg class="rewind__icon" viewBox="0 0 24 24" aria-hidden="true">
         <use href="property-sprite.svg#icon-calendar"/>
       </svg>
       <span class="rewind__label">Change Dates</span>
     </button>
     <button type="button" class="rewind" aria-label="Jump back to change preferences">
       <svg class="rewind__icon" viewBox="0 0 24 24" aria-hidden="true">
         <use href="property-sprite.svg#icon-sliders"/>
       </svg>
       <span class="rewind__label">Change Preferences</span>
     </button>
   </div>

   BEHAVIOR (handled by app logic):
   - Rendered only for completed steps the guest can revisit.
   - Tap triggers a JS state change that replays the earlier
     conversation state (not a URL navigation).
   - Does NOT render for the active/current step.

   RULES:
   - Native <button type="button">, never <a>.
   - Icon from sprite via <use>, never inline <path>.
   - Mixed-case label — NOT uppercase (key differentiator
     from .btn).
   - border-radius: 0 (Cordiant system-wide).
   - Every instance should carry an aria-label describing the
     destination step when the visible label alone is ambiguous.
   ============================================================ */

/* ── Container: row of rewinds, centered, wraps on mobile ── */
.rewind-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin: 16px 0 8px;
}

/* ── Rewind button ── */
.rewind {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;                    /* Quieter than .btn (44px), still adequate */
  padding: 10px 20px;
  background: transparent;
  border: 1px solid var(--color-accent);
  border-radius: 0;                    /* SHARP. Always. */
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;                   /* NOT 0.08em — rewinds are not uppercase */
  text-transform: none;                /* Key differentiator from .btn */
  color: var(--color-accent);
  cursor: pointer;
  transition: all 0.2s ease;
}

.rewind:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.rewind:focus {
  outline: none;
}

.rewind:focus-visible {
  box-shadow: var(--focus-ring);
}

/* ── Disabled (rare — rewinds only render for completed steps) ── */
.rewind:disabled,
.rewind[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Icon (optional, always left of label) ── */
.rewind__icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ── Label ── */
.rewind__label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
}