/* ============================================================
   Meet the Officer — mto.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Malayalam:wght@400;600;700;900&family=Noto+Sans+Malayalam:wght@400;600;700&display=swap');

#mto-app *, #mto-app *::before, #mto-app *::after,
#mto-modal *, #mto-modal *::before, #mto-modal *::after { box-sizing: border-box; }

#mto-app {
  font-family: "Noto Serif Malayalam", "Noto Sans Malayalam", Georgia, serif;
  color: #1a1a1a;
  line-height: 2;
  font-size: 1rem;
  max-width: 820px;
  margin: 0 auto;
  padding: 0 0 60px;
}

/* Applicants submit the signed printed PDF, not pasted text — copying
   text out of the app/modal is disabled (form fields stay selectable
   so people can still edit what they type). */
#mto-app, #mto-modal { user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }
#mto-app input, #mto-app textarea, #mto-app select,
#mto-modal input, #mto-modal textarea, #mto-modal select {
  user-select: text; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text;
}

/* ── HERO ─────────────────────────────────────────────────── */
.mto-hero-inner {
  background: linear-gradient(145deg, #0a2a4a 0%, #1b4f70 60%, #0d3552 100%);
  border-radius: 20px;
  padding: 52px 36px 44px;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.mto-badge {
  display: inline-block;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 30px;
  padding: 6px 20px;
  font-size: .82rem;
  margin-bottom: 20px;
  font-family: "Noto Sans Malayalam", sans-serif;
  line-height: 1.5;
}
.mto-hero-inner h1 { font-size: clamp(1.55rem, 4vw, 2.3rem); font-weight: 900; line-height: 1.4; margin: 0 0 16px; }
.mto-hero-inner h1 span { color: #7ec8fc; }
.mto-hero-desc { font-size: 1.02rem; color: #cfe6fb; margin: 0 0 26px; line-height: 1.85; }

.mto-legal-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 24px; }
.mto-legal-badges span {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  border-radius: 20px; padding: 6px 14px; font-size: .78rem;
  font-family: "Noto Sans Malayalam", sans-serif; line-height: 1.5;
}
.mto-more-info { font-size: .85rem; color: #b8d8f2; margin: 0 0 24px; font-family: "Noto Sans Malayalam", sans-serif; line-height: 1.6; }
.mto-more-info a { color: #7ec8fc; text-decoration: underline; }

.mto-btn-hero {
  background: #f0a500; color: #1a1a1a; border: none; border-radius: 40px;
  padding: 16px 40px; font-size: 1.08rem; font-weight: 800; cursor: pointer;
  font-family: "Noto Sans Malayalam", sans-serif; box-shadow: 0 8px 24px rgba(240,165,0,.35);
  transition: transform .15s, box-shadow .15s;
}
.mto-btn-hero:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(240,165,0,.45); }

.mto-steps-preview { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 26px; font-family: "Noto Sans Malayalam", sans-serif; font-size: .8rem; color: #cfe6fb; }
.mto-sp { display: flex; align-items: center; gap: 6px; }
.mto-sp span { background: rgba(255,255,255,.15); border-radius: 50%; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .75rem; }
.mto-sp-arr { opacity: .5; }

/* ── MODAL SHELL ──────────────────────────────────────────── */
#mto-modal { position: fixed; inset: 0; z-index: 999999; display: none; }
#mto-modal.open { display: block; }
.mto-modal-backdrop { position: absolute; inset: 0; background: rgba(10,20,30,.65); }
.mto-modal-container { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; padding: 16px; }
.mto-modal-panel {
  background: #fff; border-radius: 18px; width: 100%; max-width: 640px; max-height: 92vh;
  display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.35);
  font-family: "Noto Serif Malayalam", "Noto Sans Malayalam", Georgia, serif;
}
.mto-modal-topbar {
  display: flex; align-items: center; gap: 14px; padding: 16px 20px;
  background: linear-gradient(120deg, #0a2a4a, #1b4f70); color: #fff;
}
.mto-modal-title { flex: 1; }
.mto-modal-title span { display: block; font-weight: 800; font-size: 1.02rem; line-height: 1.4; }
.mto-modal-title small { display: block; font-size: .75rem; color: #cfe6fb; font-family: "Noto Sans Malayalam", sans-serif; line-height: 1.5; }
.mto-step-dots { display: flex; gap: 6px; }
.mto-step-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.3); }
.mto-step-dot.active { background: #f0a500; }
.mto-modal-close { background: rgba(255,255,255,.15); border: none; color: #fff; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 1rem; line-height: 1; }

.mto-modal-body { flex: 1; overflow-y: auto; }
.mto-mstep { display: none; }
.mto-mstep.active { display: block; }
.mto-mstep-header { padding: 18px 22px 6px; }
.mto-step-badge { display: inline-block; background: #eaf3fb; color: #0a2a4a; font-size: .72rem; font-weight: 700; padding: 3px 12px; border-radius: 20px; font-family: "Noto Sans Malayalam", sans-serif; margin-bottom: 8px; }
.mto-mstep-header h2 { margin: 0 0 6px; font-size: 1.25rem; color: #0a2a4a; }
.mto-privacy-inline { font-size: .8rem; color: #64748b; font-family: "Noto Sans Malayalam", sans-serif; margin: 0; line-height: 1.6; }

.mto-card-body { padding: 10px 22px 6px; }

/* ── FORM FIELDS ──────────────────────────────────────────── */
.mto-field-group { margin-bottom: 14px; }
.mto-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .mto-row2 { grid-template-columns: 1fr; } }
.mto-label { display: block; font-size: .82rem; font-weight: 700; color: #0a2a4a; margin-bottom: 5px; font-family: "Noto Sans Malayalam", sans-serif; }
.mto-label .req { color: #d9534f; }
.mto-optional { color: #94a3b8; font-weight: 400; font-size: .74rem; }
.mto-input, .mto-select {
  width: 100%; padding: 10px 12px; border: 1.5px solid #d5e0ea; border-radius: 8px;
  font-size: .95rem; font-family: inherit; background: #fff;
}
.mto-input:focus, .mto-select:focus { outline: none; border-color: #1b4f70; }
.mto-input[readonly] { background: #f4f7fa; color: #64748b; }
.mto-divider { border: none; border-top: 1.5px dashed #e2e8f0; margin: 16px 0; }
.mto-pin-row { display: flex; gap: 8px; }
.mto-pin-row .mto-input { flex: 1; }
.mto-btn-search { background: #0a2a4a; color: #fff; border: none; border-radius: 8px; padding: 0 16px; font-size: .85rem; font-weight: 700; cursor: pointer; font-family: "Noto Sans Malayalam", sans-serif; white-space: nowrap; }
.mto-err { color: #d9534f; font-size: .8rem; font-family: "Noto Sans Malayalam", sans-serif; line-height: 1.6; }

.mto-membership-box { background: #f6fbff; border: 1.5px solid #b8d8f2; border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; }
.mto-membership-note { font-size: .76rem; color: #64748b; margin: 8px 0 0; font-family: "Noto Sans Malayalam", sans-serif; line-height: 1.6; }
.mto-verify-group { display: flex; align-items: center; gap: 12px; margin: 4px 0 14px; }
.mto-verify-btn { white-space: nowrap; }
.mto-verify-status { font-size: .8rem; color: #64748b; }
.mto-check-label { display: flex; gap: 10px; align-items: flex-start; font-size: .85rem; font-family: "Noto Sans Malayalam", sans-serif; line-height: 1.7; cursor: pointer; }
.mto-check-label input { margin-top: 4px; width: 17px; height: 17px; flex-shrink: 0; }
.mto-check-label input:disabled { opacity: .7; }
.mto-declaration { background: #fff8e1; border: 1px solid #f0d98c; border-radius: 10px; padding: 12px 14px; margin: 6px 0 4px; }

/* ── Membership check outcome panels (Step 2) ─────────────── */
.mto-membership-existing { background: #f0f9f2; border-color: #a7d9b5; font-family: "Noto Sans Malayalam", sans-serif; }
.mto-existing-member-msg { font-size: .85rem; color: #14532d; line-height: 1.7; margin-bottom: 6px; }
.mto-existing-member-id { font-size: .95rem; color: #0a2a4a; font-weight: 700; }
.mto-existing-member-id strong { color: #b8860b; letter-spacing: 1px; }
.mto-membership-error { background: #fdf1f1; border-color: #eab8b8; font-family: "Noto Sans Malayalam", sans-serif; font-size: .85rem; color: #8a2c2c; line-height: 1.7; }

/* ── FOOTER / BUTTONS ─────────────────────────────────────── */
.mto-modal-footer { display: flex; justify-content: space-between; gap: 10px; padding: 14px 22px 20px; }
.mto-btn-success { background: #1b4f70; color: #fff; border: none; border-radius: 30px; padding: 11px 26px; font-weight: 700; cursor: pointer; font-family: "Noto Sans Malayalam", sans-serif; font-size: .92rem; }
.mto-btn-success:disabled { opacity: .5; cursor: not-allowed; }
.mto-btn-outline-sm { background: transparent; border: 1.5px solid #cbd5e1; color: #475569; border-radius: 30px; padding: 10px 20px; font-weight: 600; cursor: pointer; font-family: "Noto Sans Malayalam", sans-serif; font-size: .88rem; }
.mto-btn-link { background: none; border: none; color: #1b4f70; text-decoration: underline; cursor: pointer; font-family: "Noto Sans Malayalam", sans-serif; font-size: .85rem; padding: 0; }

/* Live on-screen "letter preview" styling has been removed along
   with the preview step — the letter HTML from the AJAX response is
   now only ever parsed off-screen (see mto.js) to build the PDF. */

/* ── STEP 3 : SUCCESS / DOWNLOAD ──────────────────────────── */
.mto-success-header { text-align: center; padding: 24px 22px 10px; }
.mto-success-icon { font-size: 2.4rem; }
.mto-success-header h2 { margin: 8px 0 14px; color: #0a2a4a; }
.mto-ref-badge, .mto-member-badge { display: inline-block; background: #f6fbff; border: 1.5px solid #b8d8f2; border-radius: 10px; padding: 8px 18px; margin: 0 0 8px; }
.mto-member-badge { background: #fff8e1; border-color: #f0d98c; margin-left: 8px; }
.mto-ref-badge span, .mto-member-badge span { display: block; font-size: .68rem; color: #64748b; text-transform: uppercase; letter-spacing: 1px; font-family: "Noto Sans Malayalam", sans-serif; }
.mto-ref-badge strong { font-size: 1.1rem; color: #0a2a4a; letter-spacing: 1px; }
.mto-member-badge strong { font-size: 1.1rem; color: #b8860b; letter-spacing: 1px; }
.mto-action-step { text-align: center; padding: 6px 0 4px; }
.mto-action-title { font-weight: 800; color: #0a2a4a; margin-bottom: 6px; }
.mto-action-desc { font-size: .84rem; color: #64748b; font-family: "Noto Sans Malayalam", sans-serif; margin: 0 0 16px; line-height: 1.7; }
.mto-submit-note { background: #f0f7f3; border: 1px solid #b8dfc8; border-radius: 8px; padding: 10px 14px; margin-top: 18px; font-size: .8rem; color: #14532d; font-family: "Noto Sans Malayalam", sans-serif; line-height: 1.7; text-align: left; }
.mto-pdf-status { min-height: 1.4em; margin-top: 10px; font-size: .82rem; color: #14532d; font-family: "Noto Sans Malayalam", sans-serif; }
.mto-pdf-status.is-error { color: #b91c1c; }
.mto-success-note { text-align: center; font-size: .82rem; color: #1b4f70; font-family: "Noto Sans Malayalam", sans-serif; padding: 12px 22px 0; }
.mto-success-done { text-align: center; padding: 14px 22px 20px; }

/* ── "My Letters" retrieval modal — reuses .mto-modal-* shell ────── */
#mto-myletters-modal { position: fixed; inset: 0; z-index: 999999; display: none; }
#mto-myletters-modal.open { display: block; }

.mto-myletters-note { font-size: .82rem; color: #64748b; text-align: center; margin: 14px 0 4px; font-family: "Noto Sans Malayalam", sans-serif; line-height: 1.6; }
.mto-myletters-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0 16px; }
@media (max-width: 520px) { .mto-myletters-grid { grid-template-columns: 1fr; } }
.mto-myletters-card {
  border: 1.5px solid #b8d8f2; border-radius: 10px; padding: 12px 14px;
  text-align: center; background: #f6fbff;
}
.mto-myletters-card.mto-ml-empty { opacity: .5; background: #f4f7fa; border-color: #d5e0ea; }
.mto-myletters-card .mto-ml-tag {
  display: inline-block; background: #0a2a4a; color: #fff; font-weight: 800;
  font-size: .8rem; border-radius: 20px; padding: 3px 14px; margin-bottom: 10px;
  font-family: "Noto Sans Malayalam", sans-serif; letter-spacing: .5px;
}
.mto-myletters-card.mto-ml-empty .mto-ml-tag { background: #94a3b8; }
.mto-myletters-card button {
  width: 100%; background: #1b4f70; color: #fff; border: none; border-radius: 24px;
  padding: 9px 10px; font-weight: 700; font-size: .8rem; cursor: pointer;
  font-family: "Noto Sans Malayalam", sans-serif;
}
.mto-myletters-card button:disabled { background: #cbd5e1; cursor: not-allowed; }