/* ============================================================
   Life Path Mini-Reading — Lead Magnet Form
   Sufi Manuscript Classical aesthetic, matches PDF design
   Scoped to .stlm-form-wrap so it never bleeds into the article
   ============================================================ */

.stlm-form-wrap {
  --stlm-cream:        #F5EFE0;
  --stlm-whisper:      #EFE6D2;
  --stlm-indigo:       #1A1F4D;
  --stlm-sepia:        #7A2E1C;
  --stlm-gold:         #A88B45;
  --stlm-black:        #0E0E1A;
  --stlm-border:       rgba(168, 139, 69, 0.35);
  --stlm-border-focus: rgba(122, 46, 28, 0.55);
  --stlm-error:        #8B1A1A;

  font-family: 'Cormorant Garamond', Garamond, 'Times New Roman', serif;
  color: var(--stlm-indigo);
  max-width: 680px;
  margin: 2em auto;
  padding: 2em 2.2em 1.6em;
  background: var(--stlm-cream);
  border: 1px solid var(--stlm-border);
  border-radius: 4px;
  position: relative;
  line-height: 1.55;
  box-sizing: border-box;
}

.stlm-form-wrap.stlm-inline {
  border: none;
  padding: 1.5em 0;
  background: transparent;
}

.stlm-form-wrap *,
.stlm-form-wrap *::before,
.stlm-form-wrap *::after {
  box-sizing: border-box;
}

/* Decorative top hairline + sigil for boxed variant */
.stlm-form-wrap.stlm-boxed::before {
  content: "✧";
  position: absolute;
  top: -0.6em;
  left: 50%;
  transform: translateX(-50%);
  background: var(--stlm-cream);
  color: var(--stlm-gold);
  padding: 0 0.6em;
  font-size: 1.1em;
  line-height: 1;
}

/* ----- Copy blocks ----- */

.stlm-headline {
  font-size: 1.35em;
  font-weight: 500;
  font-style: italic;
  color: var(--stlm-indigo);
  text-align: center;
  margin: 0 0 0.8em;
  line-height: 1.4;
}

.stlm-supporting {
  font-size: 1.02em;
  color: var(--stlm-indigo);
  text-align: left;
  margin: 0 0 1.4em;
  line-height: 1.6;
}

.stlm-microcopy {
  font-size: 0.88em;
  color: var(--stlm-sepia);
  font-style: italic;
  text-align: center;
  margin: 1em 0 0;
  opacity: 0.85;
}

/* ----- Form fields ----- */

.stlm-form {
  display: flex;
  flex-direction: column;
  gap: 0.9em;
  margin: 0;
}

.stlm-field {
  display: flex;
  flex-direction: column;
}

.stlm-field label {
  font-size: 0.78em;
  font-weight: 500;
  font-variant-caps: small-caps;
  letter-spacing: 0.14em;
  color: var(--stlm-sepia);
  margin-bottom: 0.3em;
}

.stlm-field input {
  font-family: 'Cormorant Garamond', Garamond, 'Times New Roman', serif;
  font-size: 1.05em;
  color: var(--stlm-indigo);
  background: #FFFCF3;
  border: 1px solid var(--stlm-border);
  border-radius: 3px;
  padding: 0.55em 0.7em;
  width: 100%;
  transition: border-color 0.15s ease, background 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.stlm-field input:focus {
  outline: none;
  border-color: var(--stlm-border-focus);
  background: #FFFFFF;
}

.stlm-field input::placeholder {
  color: rgba(26, 31, 77, 0.4);
}

/* iOS / Safari date-input rendering parity */
.stlm-field input[type="date"] {
  min-height: 2.6em;
}

/* ----- Submit button ----- */

.stlm-submit {
  font-family: 'Cormorant Garamond', Garamond, 'Times New Roman', serif;
  font-size: 1.08em;
  font-weight: 500;
  letter-spacing: 0.04em;
  background: var(--stlm-indigo);
  color: var(--stlm-cream);
  border: none;
  border-radius: 3px;
  padding: 0.85em 1.4em;
  margin-top: 0.4em;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.05s ease;
}

.stlm-submit:hover {
  background: #252B66;
}

.stlm-submit:active {
  transform: translateY(1px);
}

.stlm-submit:disabled {
  background: var(--stlm-gold);
  cursor: wait;
  opacity: 0.7;
}

.stlm-submit.stlm-loading::after {
  content: "  …";
}

/* ----- Honeypot (invisible to humans, visible to most bots) ----- */

.stlm-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ----- Error message ----- */

.stlm-error {
  color: var(--stlm-error);
  font-size: 0.95em;
  font-style: italic;
  background: rgba(139, 26, 26, 0.06);
  border-left: 3px solid var(--stlm-error);
  padding: 0.5em 0.7em;
  margin: 0;
}

.stlm-error[hidden] { display: none; }

/* ----- Success state ----- */

.stlm-success {
  text-align: center;
  padding: 1em 0 0.5em;
}

.stlm-success[hidden] { display: none; }

.stlm-success-mark {
  font-size: 2.4em;
  color: var(--stlm-gold);
  line-height: 1;
  margin-bottom: 0.3em;
}

.stlm-success h3 {
  font-family: 'Cormorant Garamond', Garamond, serif;
  font-size: 1.5em;
  font-weight: 500;
  color: var(--stlm-indigo);
  margin: 0 0 0.6em;
  line-height: 1.3;
}

.stlm-success p {
  font-size: 1em;
  color: var(--stlm-indigo);
  line-height: 1.6;
  margin: 0;
}

.stlm-success strong {
  color: var(--stlm-sepia);
  font-weight: 500;
}

/* Substack opt-in checkbox in the form (NOT inside .stlm-field — that class would apply small-caps label styling) */
.stlm-checkbox-field {
  margin: 1em 0 0 0;
  display: block;
}
.stlm-checkbox-label {
  display: flex !important;
  align-items: flex-start;
  gap: 0.7em;
  cursor: pointer;
  line-height: 1.45;
  color: var(--stlm-indigo);
  font-size: 0.95em !important;
  font-weight: normal !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
.stlm-checkbox {
  margin: 0.3em 0 0 0 !important;
  flex-shrink: 0;
  cursor: pointer;
  width: 1.05em !important;
  height: 1.05em !important;
  accent-color: var(--stlm-sepia);
  appearance: auto;
  -webkit-appearance: checkbox;
  opacity: 1 !important;
  visibility: visible !important;
  display: inline-block !important;
  position: static !important;
}
.stlm-checkbox-text {
  flex: 1;
  color: var(--stlm-indigo);
}
.stlm-checkbox-text strong {
  color: var(--stlm-sepia);
  font-weight: 500;
}

/* Prominent CTA button to Substack's subscribe page in the success state */
.stlm-codex-cta {
  margin-top: 1.6em;
  padding-top: 1.3em;
  border-top: 1px solid var(--stlm-border, #e0d8cc);
  text-align: center;
}
.stlm-codex-cta[hidden] { display: none; }
.stlm-codex-cta h4 {
  font-family: 'Cormorant Garamond', Garamond, serif;
  font-size: 1.3em;
  font-weight: 500;
  color: var(--stlm-indigo);
  margin: 0 0 0.4em;
  line-height: 1.3;
}
.stlm-codex-cta p {
  font-size: 0.93em !important;
  color: var(--stlm-indigo);
  line-height: 1.5;
  margin: 0 0 1em !important;
  opacity: 0.85;
}
.stlm-codex-button {
  display: inline-block;
  padding: 0.75em 1.6em;
  background: var(--stlm-sepia, #7A2E1C) !important;
  color: white !important;
  text-decoration: none !important;
  border-radius: 4px;
  font-weight: 500;
  font-size: 1em;
  letter-spacing: 0.02em;
  transition: opacity 0.2s, transform 0.1s;
  border: none;
  cursor: pointer;
}
.stlm-codex-button:hover {
  opacity: 0.92;
  color: white !important;
  text-decoration: none !important;
}
.stlm-codex-button:active {
  transform: translateY(1px);
}

/* Legacy classes preserved for backwards-compat with any cached pages still on v1.0.2/v1.0.3 markup. Not used by v1.0.4 success state. */
.stlm-codex-confirm {
  margin-top: 1.8em;
  padding-top: 1.4em;
  border-top: 1px solid var(--stlm-border, #e0d8cc);
  text-align: center;
}

.stlm-codex-confirm h4 {
  font-family: 'Cormorant Garamond', Garamond, serif;
  font-size: 1.2em;
  font-weight: 500;
  color: var(--stlm-indigo);
  margin: 0 0 0.4em;
  line-height: 1.3;
}

.stlm-codex-confirm p {
  font-size: 0.95em;
  color: var(--stlm-indigo);
  line-height: 1.5;
  margin: 0 0 1em;
}

.stlm-codex-iframe {
  margin: 0 auto;
  display: block;
}

/* ----- Responsive ----- */

@media (max-width: 640px) {
  .stlm-form-wrap {
    margin: 1.5em 0;
    padding: 1.6em 1.3em 1.2em;
  }
  .stlm-headline { font-size: 1.2em; }
  .stlm-supporting { font-size: 0.97em; }
}