/* ==========================================================================
   FintechMail Newsletter — Public Stylesheet
   Style: Wealthsimple-inspired — clean, minimal, whitespace-first fintech
   Font:  Inter (loaded via Google Fonts or theme)
   ========================================================================== */

/* ── Design Tokens ──────────────────────────────────────────────────────── */
:root {
  --ftm-white:        #ffffff;
  --ftm-off-white:    #f7f7f5;
  --ftm-black:        #1a1a1a;
  --ftm-gray-900:     #111827;
  --ftm-gray-600:     #4b5563;
  --ftm-gray-400:     #9ca3af;
  --ftm-gray-200:     #e5e7eb;
  --ftm-gray-100:     #f3f4f6;
  --ftm-green:        #00c45a;
  --ftm-green-dark:   #009e48;
  --ftm-green-light:  #e6faf0;
  --ftm-red:          #ef4444;
  --ftm-red-light:    #fef2f2;
  --ftm-radius:       12px;
  --ftm-radius-sm:    8px;
  --ftm-transition:   180ms ease;
  --ftm-shadow:       0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06);
  --ftm-font:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Subscribe Form Wrapper ─────────────────────────────────────────────── */
.ftm-subscribe-form {
  font-family:     var(--ftm-font);
  background:      var(--ftm-white);
  border:          1px solid var(--ftm-gray-200);
  border-radius:   var(--ftm-radius);
  box-shadow:      var(--ftm-shadow);
  padding:         48px 40px;
  max-width:       480px;
  margin:          0 auto;
  box-sizing:      border-box;
}

@media (max-width: 560px) {
  .ftm-subscribe-form {
    padding:        32px 24px;
    border-radius:  var(--ftm-radius-sm);
  }
}

/* ── Form Heading (optional — add <h2> inside shortcode wrapper if needed) */
.ftm-subscribe-form h2 {
  font-size:      1.5rem;
  font-weight:    700;
  color:          var(--ftm-gray-900);
  letter-spacing: -0.02em;
  margin:         0 0 8px;
}

.ftm-subscribe-form p.ftm-subheading {
  font-size:    0.9375rem;
  color:        var(--ftm-gray-600);
  margin:       0 0 32px;
  line-height:  1.6;
}

/* ── Field Groups ───────────────────────────────────────────────────────── */
.ftm-field {
  margin-bottom: 20px;
}

.ftm-field:last-child {
  margin-bottom: 0;
}

/* Labels */
.ftm-field > label,
.ftm-field > label:not(.ftm-consent-label) {
  display:       block;
  font-size:     0.8125rem;
  font-weight:   600;
  color:         var(--ftm-gray-900);
  letter-spacing: 0.01em;
  margin-bottom: 6px;
}

/* Text & Email inputs */
.ftm-field input[type="text"],
.ftm-field input[type="email"] {
  width:            100%;
  padding:          12px 16px;
  font-family:      var(--ftm-font);
  font-size:        0.9375rem;
  color:            var(--ftm-gray-900);
  background:       var(--ftm-off-white);
  border:           1.5px solid var(--ftm-gray-200);
  border-radius:    var(--ftm-radius-sm);
  outline:          none;
  box-sizing:       border-box;
  transition:       border-color var(--ftm-transition), box-shadow var(--ftm-transition);
  -webkit-appearance: none;
}

.ftm-field input[type="text"]:focus,
.ftm-field input[type="email"]:focus {
  border-color: var(--ftm-green);
  background:   var(--ftm-white);
  box-shadow:   0 0 0 3px rgba(0, 196, 90, 0.15);
}

.ftm-field input[type="text"]::placeholder,
.ftm-field input[type="email"]::placeholder {
  color: var(--ftm-gray-400);
}

/* ── Consent Checkbox ───────────────────────────────────────────────────── */
.ftm-field--consent {
  background:    var(--ftm-green-light);
  border:        1px solid rgba(0, 196, 90, 0.25);
  border-radius: var(--ftm-radius-sm);
  padding:       16px;
  margin-top:    4px;
}

.ftm-consent-label {
  display:     flex;
  gap:         12px;
  align-items: flex-start;
  font-size:   0.8125rem;
  color:       var(--ftm-gray-600);
  line-height: 1.6;
  cursor:      pointer;
}

.ftm-consent-label input[type="checkbox"] {
  width:            18px;
  height:           18px;
  min-width:        18px;
  margin-top:       2px;
  accent-color:     var(--ftm-green);
  cursor:           pointer;
  border-radius:    4px;
}

/* ── Submit Button ──────────────────────────────────────────────────────── */
.ftm-submit-btn {
  display:         block;
  width:           100%;
  padding:         14px 24px;
  font-family:     var(--ftm-font);
  font-size:       0.9375rem;
  font-weight:     600;
  color:           var(--ftm-white);
  background:      var(--ftm-green);
  border:          none;
  border-radius:   var(--ftm-radius-sm);
  cursor:          pointer;
  letter-spacing:  0.01em;
  transition:      background var(--ftm-transition), transform var(--ftm-transition), box-shadow var(--ftm-transition);
  margin-top:      8px;
  -webkit-appearance: none;
}

.ftm-submit-btn:hover:not(:disabled) {
  background:  var(--ftm-green-dark);
  box-shadow:  0 4px 14px rgba(0, 196, 90, 0.35);
  transform:   translateY(-1px);
}

.ftm-submit-btn:active:not(:disabled) {
  transform:  translateY(0);
  box-shadow: none;
}

.ftm-submit-btn:disabled {
  opacity:  0.6;
  cursor:   not-allowed;
}

/* Loading spinner inside button */
.ftm-submit-btn.ftm-loading::after {
  content:          '';
  display:          inline-block;
  width:            14px;
  height:           14px;
  margin-left:      10px;
  border:           2px solid rgba(255,255,255,0.4);
  border-top-color: var(--ftm-white);
  border-radius:    50%;
  animation:        ftm-spin 0.7s linear infinite;
  vertical-align:   middle;
}

@keyframes ftm-spin {
  to { transform: rotate(360deg); }
}

/* ── Form Messages ──────────────────────────────────────────────────────── */
.ftm-form-message {
  font-size:     0.875rem;
  font-weight:   500;
  border-radius: var(--ftm-radius-sm);
  padding:       0;
  margin-top:    0;
  max-height:    0;
  overflow:      hidden;
  transition:    max-height 0.3s ease, padding 0.3s ease, margin 0.3s ease;
}

.ftm-form-message.ftm-msg--visible {
  padding:    12px 16px;
  margin-top: 16px;
  max-height: 120px;
}

.ftm-form-message.ftm-msg--success {
  background: var(--ftm-green-light);
  color:      var(--ftm-green-dark);
  border:     1px solid rgba(0, 196, 90, 0.3);
}

.ftm-form-message.ftm-msg--error {
  background: var(--ftm-red-light);
  color:      var(--ftm-red);
  border:     1px solid rgba(239, 68, 68, 0.3);
}

/* ── Upgrade / Paywall Prompt ───────────────────────────────────────────── */
.ftm-upgrade-prompt {
  font-family:   var(--ftm-font);
  background:    var(--ftm-off-white);
  border:        1px solid var(--ftm-gray-200);
  border-radius: var(--ftm-radius);
  padding:       40px 36px;
  text-align:    center;
  margin:        32px 0;
}

.ftm-upgrade-prompt__message {
  font-size:    1rem;
  color:        var(--ftm-gray-600);
  margin:       0 0 20px;
  line-height:  1.6;
}

.ftm-upgrade-prompt__message strong {
  color:       var(--ftm-gray-900);
  font-weight: 700;
}

.ftm-upgrade-prompt__cta {
  display:         inline-block;
  padding:         12px 28px;
  font-family:     var(--ftm-font);
  font-size:       0.9375rem;
  font-weight:     600;
  color:           var(--ftm-white);
  background:      var(--ftm-green);
  border-radius:   var(--ftm-radius-sm);
  text-decoration: none;
  transition:      background var(--ftm-transition), box-shadow var(--ftm-transition);
  letter-spacing:  0.01em;
}

.ftm-upgrade-prompt__cta:hover {
  background:  var(--ftm-green-dark);
  box-shadow:  0 4px 14px rgba(0, 196, 90, 0.35);
  color:       var(--ftm-white);
}

/* ── Newsletter Issue Archive / Single ──────────────────────────────────── */
.ftm-issue-meta {
  font-family:  var(--ftm-font);
  display:      flex;
  gap:          16px;
  align-items:  center;
  flex-wrap:    wrap;
  margin-bottom: 32px;
}

.ftm-issue-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  font-size:     0.75rem;
  font-weight:   600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding:       4px 10px;
  border-radius: 100px;
}

.ftm-issue-badge--free {
  background: var(--ftm-gray-100);
  color:      var(--ftm-gray-600);
}

.ftm-issue-badge--pro {
  background: var(--ftm-green-light);
  color:      var(--ftm-green-dark);
}

.ftm-issue-badge--institutional {
  background: #eef2ff;
  color:      #4338ca;
}

.ftm-issue-badge--fr {
  background: #fff7ed;
  color:      #c2410c;
}

.ftm-issue-number {
  font-size:  0.8125rem;
  color:      var(--ftm-gray-400);
  font-weight: 500;
}