/* Contact CTA stack — global widget for the closing "Contact" section.
   Load this file + contact-cta.js on any page that uses the
   .contact-cta-stack markup instead of the old plain mailto pill.
   Edit this file once, every page picks up the change. */

.contact-cta-stack { display: flex; flex-direction: column; align-items: center; gap: 28px; margin-top: 40px; width: 100%; }
.contact-cta-block { display: flex; flex-direction: column; align-items: center; }
.contact-cta-block .contact-icon { margin-top: 0; width: 280px; border: none; cursor: pointer; font-family: inherit; }
.contact-icon.partner-cta.secondary { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15) !important; }
.contact-icon.partner-cta.secondary:hover { background: rgba(255,255,255,0.15); }

.contact-email-form { display: none; flex-direction: column; align-items: center; gap: 10px; max-width: 340px; margin: 14px auto 0; }
.contact-email-form.visible { display: flex; }
.contact-email-form input[type="email"] {
  width: 100%; text-align: center;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.15); border-radius: 10px;
  padding: 12px 14px; color: #fff; font-size: 15px; font-family: inherit;
}
.contact-email-form input[type="email"]::placeholder { color: rgba(255,255,255,0.35); }
.contact-email-form input[type="email"]:focus { outline: none; border-color: #e60021; }
.contact-email-form button {
  background: #e60021; color: #fff; border: none; border-radius: 10px;
  padding: 12px 20px; font-size: 15px; font-weight: 600; font-family: inherit; cursor: pointer;
  transition: background 0.15s ease;
}
.contact-email-form button:hover { background: #ff1a3d; }
.contact-email-success { display: none; font-size: 14px; color: #4ade80; margin-top: 12px; text-align: center; max-width: 300px; }
.contact-email-success.visible { display: block; }

/* Physician banner card (Pinterest CTA-card pattern: colored block, headline,
   subhead, white pill button). Defined here so it's available site-wide, but
   only wired into an article's content when the telemedicine partner is
   confirmed for that page — see reactive-vs-septic-arthritis for the pilot. */
.physician-banner {
  display: block; position: relative; overflow: hidden;
  width: 100%; max-width: 640px; border-radius: 24px;
  background: linear-gradient(135deg, #7a0016, #e60021);
  padding: 40px clamp(28px, 5vw, 48px);
  text-decoration: none;
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.physician-banner:hover { transform: translateY(-4px); }
.physician-banner-text { position: relative; z-index: 1; text-align: left; max-width: 420px; }
.physician-banner-title { font-size: clamp(22px, 3vw, 28px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: #fff; }
.physician-banner-title em { font-style: italic; font-weight: 500; }
.physician-banner-desc { font-size: 15px; line-height: 1.5; color: rgba(255,255,255,0.8); margin: 12px 0 24px; }
.physician-banner-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff; color: #e60021; font-weight: 600; font-size: 15px;
  padding: 12px 20px; border-radius: 40px;
}
.physician-banner-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.physician-banner-btn svg:last-child { width: 16px; height: 16px; margin-left: 2px; }