/* ============================================================================
 * LockEngine — public QR retrieval page styling.
 *
 * Customer-facing — should look on-brand for SuperStorage tenants, NOT
 * the dark admin theme used by the LockEngine staff dashboard. Designed
 * to mirror www.ineedsuperstorage.com:
 *   - light/white background, generous whitespace
 *   - centered single-column card on mobile
 *   - navy primary button, blue accent links
 *   - readable serif-ish system font
 *
 * Scoped under .unlock-body so it doesn't leak into the admin pages.
 * ============================================================================
 */

.unlock-body {
  margin: 0;
  padding: 0;
  background: #f5f7fa;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #1f2937;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
}

.unlock-card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  padding: 32px 28px;
  max-width: 480px;
  width: 100%;
  margin-top: 20px;
}

/* Logo — centered, capped at a sensible width so it doesn't look comically
   large on phones. Original SVG is 500x90 (5.5:1 aspect). */
.unlock-logo-link {
  display: block;
  text-align: center;
  margin-bottom: 24px;
}
.unlock-logo {
  max-width: 240px;
  width: 100%;
  height: auto;
  display: inline-block;
}

.unlock-title {
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 6px 0;
  color: #111827;
  text-align: center;
}
.unlock-subtitle {
  font-size: 13px;
  color: #6b7280;
  text-align: center;
  margin: 0 0 28px 0;
}

.unlock-step { margin: 0; }

.unlock-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 6px;
}

.unlock-input {
  width: 100%;
  padding: 12px 14px;
  font-size: 16px;          /* 16px prevents iOS zoom-on-focus */
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #ffffff;
  color: #111827;
  margin-bottom: 14px;
  -webkit-appearance: none;
}
.unlock-input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* Serial-entry input — larger, monospace, tracking-spaced so the 8 digits
   are easy to read while typing. Mobile-friendly: numeric keyboard via
   inputmode="numeric" + pattern in HTML, 18px font to keep iOS from
   zooming on focus, generous padding for thumb taps. */
.unlock-input-serial {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 22px;
  letter-spacing: 4px;
  text-align: center;
  padding: 16px 14px;
}

/* Helper text below the serial input — quiet, smaller, sits between input
   and CTA so the "where to find this number" hint is in the right spot
   without visually competing with either. */
.unlock-helper {
  font-size: 13px;
  color: #6b7280;
  margin: -8px 0 14px 0;
  line-height: 1.4;
}

.unlock-btn {
  width: 100%;
  padding: 13px 16px;
  font-size: 16px;
  font-weight: 500;
  background: #2563eb;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.unlock-btn:hover { background: #1d4ed8; }
.unlock-btn:active { background: #1e40af; }

.unlock-error {
  color: #dc2626;
  font-size: 13px;
  margin: 12px 0 0 0;
}

/* SMS opt-in disclosure. Sits directly below the action button so it
   reads as a legal footnote without crowding the form. Quieter than the
   form inputs (smaller, muted color) but still legible. */
.unlock-consent {
  font-size: 11px;
  line-height: 1.5;
  color: #6b7280;
  margin: 12px 0 0;
}
.unlock-consent strong {
  color: #374151;
  font-weight: 600;
}
.unlock-consent a {
  color: #2563eb;
  text-decoration: underline;
}

.unlock-prose {
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 14px 0;
  color: #374151;
}
.unlock-muted { color: #6b7280; }
.unlock-small { font-size: 12px; }

.unlock-mega-code {
  font-size: 56px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  margin: 16px 0;
  color: #111827;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* Guidance card — the state-aware message block (vacant pre-stage,
   balance pending, phone mismatch, etc.). Light blue tint so it reads
   as informational rather than alarming. */
.unlock-guidance {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: 10px;
  background: #eff6ff;
  border-left: 4px solid #2563eb;
  color: #1e3a8a;
}
.unlock-guidance-title {
  margin: 0 0 8px 0;
  font-size: 15px;
  font-weight: 600;
  color: #1e3a8a;
}
.unlock-guidance-body {
  font-size: 13.5px;
  line-height: 1.55;
  color: #1e3a8a;
}
.unlock-guidance-body p { margin: 0 0 10px 0; }
.unlock-guidance-body p:last-child { margin-bottom: 0; }
.unlock-guidance-body a {
  color: #1d4ed8;
  font-weight: 500;
  text-decoration: underline;
  word-break: break-word;
}
.unlock-guidance-body .unlock-tip {
  font-size: 12px;
  color: #475569;
  margin-top: 12px;
}

/* Footer — light, full-width support contact. */
.unlock-footer {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
  text-align: center;
  font-size: 13px;
  color: #6b7280;
}
.unlock-footer a {
  color: #2563eb;
  font-weight: 500;
}

/* Fee-acknowledgment step. Renders between OTP entry and combo display
   when the facility has configured an unreturned-lock fee. Visual weight
   sits between a casual prose block and a hard warning — we want the
   tenant to read it, not panic. */
.unlock-ack-heading {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 12px;
}
#step-ack .unlock-prose {
  background: #fff7ed;
  border-left: 3px solid #e33642;
  padding: 14px 16px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.5;
  color: #1f2937;
  margin-bottom: 18px;
}
.unlock-btn-secondary {
  display: block;
  width: 100%;
  padding: 12px 16px;
  margin-top: 8px;
  background: transparent;
  color: #6b7280;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.unlock-btn-secondary:hover { background: #f3f4f6; }

/* Return-the-lock reminder — rendered below the mega-code on the combo
   step when the client has a fee configured. Same brand-red-bordered
   callout treatment as the pre-combo ack screen, so the tenant sees the
   same warning visually after the reveal as before. */
.unlock-return-notice {
  background: #fff7ed;
  border-left: 3px solid #e33642;
  padding: 14px 16px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.5;
  color: #1f2937;
  margin: 18px 0 8px;
  text-align: left;
}

/* Return-the-lock instructions — rendered below the combo after a
   successful retrieval, when the facility has configured per-facility
   steps. Numbered cards, optional photo. Visible only when populated. */
.unlock-return-guide {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
  text-align: left;
}
.unlock-return-heading {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 12px;
}
.unlock-return-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.unlock-return-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.unlock-return-step-num {
  flex: 0 0 28px;
  height: 28px;
  border-radius: 50%;
  background: #1861a0;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.unlock-return-step-body {
  flex: 1 1 auto;
  min-width: 0;
}
.unlock-return-step-body .unlock-prose {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.45;
  color: #1f2937;
}
.unlock-return-step-photo {
  display: block;
  width: 100%;
  max-width: 320px;
  max-height: 240px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.hidden { display: none !important; }