/* Account Settings — shared modal styles for CyRoadmap, VendorEasyFill, and
   GovRoadmap. Uses each page's own CSS variables (--pink, --turquoise,
   --dark-pink, --bg, --panel, --panel-2, --border, --text, --text-dim,
   --red), with fallbacks in case a page ever lacks one. */

#tcs-gear-btn {
  background: transparent;
  border: 1px solid var(--border, #2A3448);
  color: var(--text, #E7ECF5);
  border-radius: 6px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
#tcs-gear-btn:hover { border-color: var(--turquoise, #66F0F2); color: var(--turquoise, #66F0F2); }
#tcs-gear-btn svg { width: 18px; height: 18px; }

#tcs-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,.7);
  display: none; align-items: center; justify-content: center;
  padding: 1rem;
}
#tcs-overlay.open { display: flex; }

#tcs-modal {
  background: var(--panel, #171E2E);
  border: 1px solid var(--border, #2A3448);
  border-top: 3px solid var(--dark-pink, #E060D8);
  border-radius: 12px;
  width: 100%; max-width: 560px;
  max-height: 88vh;
  display: flex; flex-direction: column;
  color: var(--text, #E7ECF5);
  font-size: .85rem;
}

#tcs-modal .tcs-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.25rem .9rem;
  border-bottom: 1px solid var(--border, #2A3448);
}
#tcs-modal .tcs-head h2 { font-size: 1.05rem; color: var(--turquoise, #66F0F2); }
#tcs-modal .tcs-close {
  background: none; border: none; color: var(--text-dim, #93A0B8);
  font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0 .25rem;
}
#tcs-modal .tcs-close:hover { color: var(--text, #E7ECF5); }

#tcs-modal .tcs-tabs {
  display: flex; gap: .25rem; padding: .6rem 1.25rem 0;
  border-bottom: 1px solid var(--border, #2A3448);
}
#tcs-modal .tcs-tab-btn {
  background: none; border: none; color: var(--text-dim, #93A0B8);
  padding: .5rem .75rem; font-size: .8rem; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
#tcs-modal .tcs-tab-btn.active { color: var(--turquoise, #66F0F2); border-bottom-color: var(--turquoise, #66F0F2); }

#tcs-modal .tcs-body { padding: 1.25rem; overflow-y: auto; flex: 1; }
#tcs-modal .tcs-panel { display: none; }
#tcs-modal .tcs-panel.active { display: block; }

#tcs-modal label { display: block; color: var(--text-dim, #93A0B8); font-size: .75rem; margin-bottom: .3rem; }
#tcs-modal input[type="text"],
#tcs-modal input[type="email"] {
  width: 100%; padding: .5rem .65rem; background: var(--panel-2, #1D2637);
  border: 1px solid var(--border, #2A3448); border-radius: 6px;
  color: var(--text, #E7ECF5); font-size: .85rem; margin-bottom: .9rem;
}
#tcs-modal input[disabled] { opacity: .6; }

#tcs-modal .tcs-row { display: flex; gap: .6rem; }
#tcs-modal .tcs-row > div { flex: 1; }

#tcs-modal button.tcs-btn {
  padding: .5rem 1rem; font-size: .82rem; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--border, #2A3448); background: var(--panel-2, #1D2637);
  color: var(--text, #E7ECF5);
}
#tcs-modal button.tcs-btn:hover { border-color: var(--turquoise, #66F0F2); }
#tcs-modal button.tcs-btn-primary {
  background: var(--turquoise, #66F0F2); border-color: var(--turquoise, #66F0F2); color: #0F1420; font-weight: 600;
}
#tcs-modal button.tcs-btn-danger {
  background: transparent; border-color: var(--red, #FF6B6B); color: var(--red, #FF6B6B);
}
#tcs-modal button.tcs-btn-danger:hover { background: var(--red, #FF6B6B); color: #0F1420; }
#tcs-modal button:disabled { opacity: .5; cursor: not-allowed; }

#tcs-modal .tcs-card {
  border: 1px solid var(--border, #2A3448); border-radius: 8px; padding: .9rem 1rem; margin-bottom: 1rem;
}
#tcs-modal .tcs-muted { color: var(--text-dim, #93A0B8); font-size: .75rem; line-height: 1.5; }
#tcs-modal .tcs-msg { font-size: .78rem; margin-top: .6rem; min-height: 1.1em; }
#tcs-modal .tcs-msg.err { color: var(--red, #FF6B6B); }
#tcs-modal .tcs-msg.ok { color: var(--turquoise, #66F0F2); }

#tcs-modal .tcs-factor-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: .5rem 0; border-bottom: 1px solid var(--border, #2A3448);
}
#tcs-modal .tcs-factor-row:last-child { border-bottom: none; }

#tcs-modal .tcs-qr { background: #fff; padding: .75rem; border-radius: 8px; display: inline-block; margin-bottom: .75rem; }
#tcs-modal .tcs-qr img, #tcs-modal .tcs-qr svg { display: block; width: 160px; height: 160px; }

#tcs-modal .tcs-danger-zone {
  border: 1px solid var(--red, #FF6B6B); border-radius: 8px; padding: 1rem;
}
#tcs-modal .tcs-danger-zone h3 { color: var(--red, #FF6B6B); font-size: .9rem; margin-bottom: .5rem; }
#tcs-modal .tcs-check-row { display: flex; align-items: flex-start; gap: .5rem; margin: .75rem 0; }
#tcs-modal .tcs-check-row input[type="checkbox"] { margin-top: 3px; }
#tcs-modal .tcs-check-row span { font-size: .78rem; color: var(--text, #E7ECF5); }

#tcs-modal .tcs-plan-badge {
  display: inline-block; font-size: .7rem; padding: .15rem .55rem; border-radius: 20px;
  border: 1px solid var(--turquoise, #66F0F2); color: var(--turquoise, #66F0F2); margin-left: .4rem;
}