/* Warranty Registration — frontend styles */
.wr-wrapper { max-width: 540px; margin: 0 auto; padding: 2rem 1rem 3rem; font-family: inherit; color: inherit; }

/* Steps */
.wr-step { display: none; }
.wr-step.active { display: block; animation: wr-fade .3s ease; }
@keyframes wr-fade { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

/* Progress */
.wr-progress { display:flex; gap:6px; margin-bottom:1.75rem; }
.wr-dot { height:4px; flex:1; border-radius:2px; background:#e0e0e0; transition:background .3s; }
.wr-dot.active { background:#111; }

/* Badge */
.wr-badge { display:inline-block; font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:#555; background:#f4f4f4; padding:4px 10px; border-radius:20px; margin-bottom:.75rem; }

/* Typography */
.wr-title { font-size:22px; font-weight:600; margin:0 0 .35rem; line-height:1.3; }
.wr-sub { font-size:15px; color:#666; margin-bottom:1.5rem; line-height:1.6; }
.wr-req { color:#d63638; }

/* Choice cards */
.wr-choice-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:1.5rem; }
.wr-choice-card { background:#fff; border:1.5px solid #e5e5e5; border-radius:12px; padding:1.25rem 1rem; cursor:pointer; text-align:center; transition:border-color .2s,background .2s; display:flex; flex-direction:column; align-items:center; gap:8px; }
.wr-choice-card:hover { border-color:#bbb; background:#fafafa; }
.wr-choice-card[aria-pressed="true"] { border:2px solid #111; background:#f8f8f8; }
.wr-choice-icon { font-size:28px; }
.wr-choice-label { font-size:14px; font-weight:600; color:#111; }

/* Product select */
.wr-field { margin-bottom:1.1rem; }
.wr-field label { display:block; font-size:13px; font-weight:600; color:#444; margin-bottom:5px; }
.wr-field input[type="text"],
.wr-field input[type="email"] {
  width:100%;
  padding:10px 12px;
  border:1.5px solid #ddd;
  border-radius:8px;
  font-size:15px;
  transition:border-color .2s,box-shadow .2s;
  background:#fff;
  color:#111;
  box-sizing:border-box;
  font-family:inherit;
}

.wr-field select {
  width:100%;
  padding:12px 12px 12px 12px;
  border:1.5px solid #ddd;
  border-radius:8px;
  font-size:15px;
  background:#fff;
  color:#111;
  box-sizing:border-box;
  font-family:inherit;
  appearance:auto;
  -webkit-appearance:auto;
  height:48px;
  line-height:48px;
  vertical-align:middle;
}

.wr-field select {
  appearance: auto;
  height: auto;
  padding: 10px 12px;
  line-height: 1.5;
}
.wr-field input:focus,
.wr-field select:focus { outline:none; border-color:#111; box-shadow:0 0 0 3px rgba(0,0,0,.06); }
.wr-field.has-error input,
.wr-field.has-error select { border-color:#d63638; }
.wr-field.valid input,
.wr-field.valid select { border-color:#46b450; }
.wr-optional { font-size:12px; font-weight:400; color:#999; margin-left:4px; }
.wr-hint  { font-size:12px; color:#999; margin-top:4px; display:block; }
.wr-error { font-size:12px; color:#d63638; margin-top:4px; display:none; }
.wr-field.has-error .wr-error { display:block; }

/* Divider + journey */
.wr-divider { border:none; border-top:1px solid #efefef; margin:1.5rem 0; }
.wr-journey-label { font-size:13px; font-weight:600; color:#555; margin-bottom:.9rem; }
.wr-journey-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-bottom:1.5rem; }
.wr-journey-card { background:#fff; border:1.5px solid #e5e5e5; border-radius:12px; padding:1rem .5rem; cursor:pointer; text-align:center; display:flex; flex-direction:column; align-items:center; gap:4px; transition:border-color .2s,background .2s; }
.wr-journey-card:hover { border-color:#bbb; background:#fafafa; }
.wr-journey-card[aria-pressed="true"] { border:2px solid #2c9e6b; background:#f0faf5; }
.wr-journey-icon { font-size:24px; }
.wr-journey-card strong { font-size:13px; color:#111; display:block; }
.wr-journey-card small  { font-size:11px; color:#888; display:block; }

/* Buttons */
.wr-btn-primary { width:100%; padding:.8rem; background:#111; color:#fff; border:none; border-radius:8px; font-size:15px; font-weight:600; cursor:pointer; transition:opacity .2s; display:flex; align-items:center; justify-content:center; gap:8px; font-family:inherit; }
.wr-btn-primary:hover:not(:disabled) { opacity:.85; }
.wr-btn-primary:disabled { opacity:.38; cursor:default; }
.wr-btn-back { background:none; border:none; font-size:13px; color:#888; cursor:pointer; padding:0; margin-bottom:1.25rem; display:inline-block; font-family:inherit; }
.wr-btn-back:hover { color:#111; }
.wr-spinner { width:16px; height:16px; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:wr-spin .7s linear infinite; display:inline-block; }
@keyframes wr-spin { to { transform:rotate(360deg); } }

/* Errors + privacy */
.wr-api-error { background:#fef2f2; border:1px solid #fca5a5; color:#b91c1c; border-radius:8px; padding:10px 12px; font-size:13px; margin-bottom:1rem; }
.wr-privacy { font-size:12px; color:#aaa; text-align:center; margin-top:.75rem; }
.wr-privacy a { color:#888; }

/* Thank you hero */
.wr-ty-hero { text-align:center; padding:1rem 0 .5rem; }
.wr-ty-icon { width:56px; height:56px; border-radius:50%; background:#f0faf5; color:#2c9e6b; font-size:26px; font-weight:700; display:flex; align-items:center; justify-content:center; margin:0 auto 1rem; border:2px solid #2c9e6b; }

/* Offer card (coupon) */
.wr-offer-card { background:#fff; border:1px solid #e5e5e5; border-radius:14px; padding:1.4rem 1.25rem; margin-top:1.5rem; }
.wr-offer-badge { display:inline-block; font-size:12px; font-weight:700; padding:3px 10px; border-radius:20px; background:#fff3cd; color:#856404; margin-bottom:.65rem; }
.wr-offer-name { font-size:16px; font-weight:700; color:#111; margin-bottom:4px; }
.wr-offer-desc { font-size:13px; color:#666; margin-bottom:.75rem; }
.wr-price-row { display:flex; align-items:baseline; gap:10px; margin-bottom:1rem; }
.wr-price-orig { font-size:15px; color:#aaa; text-decoration:line-through; }
.wr-price-new  { font-size:24px; font-weight:700; color:#111; }
.wr-price-save { font-size:13px; color:#2c9e6b; font-weight:700; }
.wr-timer-label { font-size:13px; color:#777; margin-bottom:4px; }
.wr-timer { font-size:28px; font-weight:700; letter-spacing:2px; color:#111; font-variant-numeric:tabular-nums; margin-bottom:1.1rem; }
.wr-btn-offer { display:block; width:100%; padding:.8rem; background:#111; color:#fff; border-radius:8px; text-align:center; font-size:15px; font-weight:600; text-decoration:none; transition:opacity .2s; }
.wr-btn-offer:hover { opacity:.85; color:#fff; }
.wr-offer-note { font-size:12px; color:#999; text-align:center; margin-top:.5rem; }
.wr-coupon-fallback { margin-top:1rem; text-align:center; font-size:13px; color:#888; }
.wr-coupon-code-box { display:inline-block; background:#f5f5f0; border:1px dashed #ccc; border-radius:8px; padding:8px 20px; font-family:monospace; font-size:17px; font-weight:700; color:#111; letter-spacing:2px; margin-top:4px; }

/* Plain thank you card (no coupon) */
.wr-plain-card { background:#fff; border:1px solid #e5e5e5; border-radius:14px; padding:1.75rem 1.5rem; margin-top:1.5rem; text-align:center; }
.wr-plain-icon { font-size:40px; margin-bottom:.75rem; }
.wr-plain-card h3 { font-size:16px; font-weight:600; color:#111; margin-bottom:1rem; }
.wr-coverage-list { list-style:none; padding:0; margin:0 0 1.25rem; text-align:left; display:inline-block; }
.wr-coverage-list li { font-size:14px; color:#555; padding:5px 0; }
.wr-coverage-list li span { color:#2c9e6b; margin-right:6px; }
.wr-plain-email-note { font-size:13px; color:#888; margin-top:.75rem; }
.wr-check-email-note { font-size:13px; color:#666; line-height:1.55; margin-top:.6rem; padding:12px 14px; background:#F5F0E8; border-radius:8px; }

.wr-brevo-note { font-size:13px; color:#aaa; text-align:center; margin-top:1.25rem; }

/* Responsive */
@media (max-width:480px) {
  .wr-choice-grid { grid-template-columns:1fr 1fr; }
  .wr-journey-grid { grid-template-columns:1fr 1fr 1fr; }
  .wr-title { font-size:20px; }
}
#wr-app {
  max-width: 100%;
  width: 100%;
}

#wr-app input,
#wr-app select {
  max-width: 100% !important;
  width: 100% !important;
  overflow: visible !important;
}
.wr-wrapper {
  text-align: center;
}

#wr-app .wr-badge,
#wr-app .wr-title,
#wr-app .wr-sub {
  text-align: center !important;
  display: block !important;
}