<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
  body { font-family: -apple-system, "Segoe UI", Roboto, sans-serif; background: #f1f5f9; margin: 0; padding: 40px 16px; color: #0f172a; }
  .card { max-width: 520px; margin: 0 auto; background: #ffffff; border-radius: 18px; padding: 32px; box-shadow: 0 12px 32px rgba(15,23,42,.08); }
  h1 { margin: 0 0 6px; font-size: 22px; }
  p  { font-size: 15px; line-height: 1.6; margin: 16px 0; }
  .btn { display: inline-block; padding: 14px 26px; background: #0d9488; color: white !important; text-decoration: none; border-radius: 12px; font-weight: 700; font-size: 16px; }
  .meta { color: #64748b; font-size: 13px; }
  .url-fallback { word-break: break-all; font-size: 12px; color: #64748b; }
</style>
</head>
<body>
  <div class="card">
    <h1>Sign in to {{ $clinicName }}</h1>
    <p>Hi {{ $ownerName }},</p>
    <p>Tap the button below to sign in to the pet portal. This link is good for the next <strong>{{ $minutes }} minutes</strong> and can only be used once.</p>
    <p style="margin: 28px 0;">
      <a class="btn" href="{{ $magicUrl }}">Sign me in</a>
    </p>
    <p class="meta">If the button doesn't work, paste this URL into your browser:</p>
    <p class="url-fallback">{{ $magicUrl }}</p>
    <p class="meta" style="margin-top: 32px;">If you didn't request this email, just ignore it — your account stays safe.</p>
  </div>
</body>
</html>
