/* Compatibility layer for legacy NPS pages during the Passage redesign. */
:root {
  --primary: #004650 !important;
  --primary-blue: #004650 !important;
  --secondary-blue: #002e33 !important;
  --primary-color: #004650 !important;
  --secondary-color: #00808a !important;
  --accent: #ca3120 !important;
  --accent-orange: #ca3120 !important;
  --accent-color: #ca3120 !important;
  --background-light: #fffaef !important;
  --bg: #fffaef !important;
  --text-dark: #004650 !important;
  --text-light: rgba(0, 70, 80, 0.7) !important;
  --border: rgba(0, 70, 80, 0.14) !important;
  --border-color: rgba(0, 70, 80, 0.14) !important;
  --border-radius: 10px !important;
  --shadow: 0 14px 34px rgba(0, 46, 51, 0.09) !important;
}

html { font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; }

body {
  color: #004650 !important;
  background:
    radial-gradient(circle at 90% 0, rgba(191, 243, 255, 0.65), transparent 28rem),
    linear-gradient(145deg, #ecfcff, #fffaef 48%, #fff) !important;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif !important;
}

body > header:first-of-type:not(.auth-header):not(.terms-header):not(.privacy-header):not(.disclaimer-header) {
  border-bottom: 1px solid rgba(0, 70, 80, 0.14) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 8px 24px rgba(0, 46, 51, 0.07) !important;
}

body > header:first-of-type nav {
  min-height: 68px;
}

body > header:first-of-type .nav-links a,
body > header:first-of-type .nav-actions a {
  color: #004650 !important;
  font-size: 0.82rem !important;
}

body > header:first-of-type .appointment-button,
body > header:first-of-type .btn-primary {
  border-radius: 999px !important;
  background: #ca3120 !important;
  color: #fff !important;
}

.terms-header,
.privacy-header,
.disclaimer-header,
.page-header {
  margin-top: 68px !important;
  padding: 3.5rem 1rem !important;
  background:
    radial-gradient(circle at 82% 24%, rgba(191, 243, 255, 0.35), transparent 12rem),
    linear-gradient(135deg, #004650, #002e33) !important;
  color: #fff !important;
}

.terms-header h1,
.privacy-header h1,
.disclaimer-header h1,
.page-header h1 {
  color: #fff !important;
  font-family: "Inter", sans-serif !important;
  font-size: clamp(2rem, 4vw, 3.25rem) !important;
  letter-spacing: -0.045em !important;
}

.terms-container,
.privacy-container,
.disclaimer-container {
  width: min(920px, calc(100% - 2rem)) !important;
  padding: 2.5rem 0 4rem !important;
}

.terms-card,
.privacy-card,
.disclaimer-card,
.privacy-main,
.disclaimer-main,
.content-card {
  border: 1px solid rgba(0, 70, 80, 0.14) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 18px 44px rgba(0, 46, 51, 0.09) !important;
}

.privacy-main,
.disclaimer-main {
  width: min(920px, calc(100% - 2rem)) !important;
  margin: 7rem auto 4rem !important;
  padding: 2rem !important;
}

.terms-card h2,
.privacy-card h2,
.disclaimer-card h2 {
  color: #004650 !important;
  letter-spacing: -0.025em;
}

.back-link { color: #ca3120 !important; }

/* Transaction, registration, and payment shells */
.checkout-container,
.payment-wrapper,
.success-container,
.registration-container,
.auth-card,
body > .container > .header + form,
body > .container > form {
  border: 1px solid rgba(0, 70, 80, 0.14) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 20px 54px rgba(0, 46, 51, 0.11) !important;
}

.checkout-container,
.success-container {
  overflow: hidden;
}

.checkout-header,
.payment-wrapper .header,
.success-header,
.auth-card__aside,
body > .container > .header {
  background:
    radial-gradient(circle at 88% 18%, rgba(191, 243, 255, 0.25), transparent 10rem),
    linear-gradient(135deg, #004650, #002e33) !important;
  color: #fff !important;
}

.checkout-header h1,
.success-header h1,
.auth-card__aside h1,
body > .container > .header h1 {
  color: #fff !important;
}

.step.active,
.progress-step.active,
.step-indicator.active {
  border-color: #ca3120 !important;
  background: #ca3120 !important;
}

.summary-card,
.order-summary,
.payment-summary,
.info-card {
  border: 1px solid rgba(0, 70, 80, 0.14) !important;
  border-radius: 14px !important;
  background: #ecfcff !important;
  box-shadow: none !important;
}

button[type="submit"],
.btn-primary,
.payment-button,
.pay-button,
.submit-btn,
.auth-submit {
  border-color: #ca3120 !important;
  border-radius: 8px !important;
  background: #ca3120 !important;
  color: #fff !important;
}

button[type="submit"]:hover,
.btn-primary:hover,
.payment-button:hover,
.pay-button:hover,
.submit-btn:hover,
.auth-submit:hover {
  background: #a5281a !important;
}

input,
select,
textarea {
  border-color: rgba(0, 70, 80, 0.18) !important;
  border-radius: 8px !important;
  background: #fff !important;
  font-family: inherit !important;
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid rgba(0, 128, 138, 0.24) !important;
  border-color: #00808a !important;
}

.auth-header {
  border-bottom: 1px solid rgba(0, 70, 80, 0.14) !important;
  background: #fff !important;
}

.auth-card {
  overflow: hidden;
}

.auth-card__form h1,
.auth-card__form h2 {
  color: #004650 !important;
  letter-spacing: -0.035em;
}

.alert-success,
.success-message {
  border-color: rgba(0, 128, 138, 0.22) !important;
  background: #ecfcff !important;
  color: #004650 !important;
}

.alert-error,
.error-message {
  border-color: rgba(202, 49, 32, 0.2) !important;
  background: #faf2ee !important;
  color: #a5281a !important;
}

@media (max-width: 760px) {
  .terms-header,
  .privacy-header,
  .disclaimer-header,
  .page-header {
    margin-top: 60px !important;
    padding-block: 2.5rem !important;
  }
  .terms-card,
  .privacy-card,
  .disclaimer-card {
    padding: 1.25rem !important;
  }
  .auth-card { border-radius: 14px !important; }
}