/**
 * Account + auth pages (My Account, password reset).
 *
 * Deliberately minimal, emulating the project map app's UI language: Inter
 * typography, electric-cyan accent, white fields with light-gray borders, and
 * 4px radii. Scoped to .account-page / .auth-card so it does not affect other
 * Bootstrap-themed forms on the site.
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

.account-page,
.auth-card {
  --acct-accent: #03B0E0;
  --acct-accent-dark: #029ac7;
  --acct-border: #D1D5DB;
  --acct-border-strong: #9CA3AF;
  --acct-gray-100: #F3F4F6;
  --acct-gray-500: #6B7280;
  --acct-danger: #B42318;
  --acct-dark: #111827;

  max-width: 560px;
  margin: 32px auto 64px;
  padding: 0 16px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--acct-dark);
  -webkit-font-smoothing: antialiased;
}

.account-page h1,
.account-page h2,
.auth-card h1,
.auth-card h2 {
  font-family: 'Inter', sans-serif;
  color: var(--acct-dark);
}

/* ---- Tabs ------------------------------------------------------------- */
.account-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--acct-border);
  margin-bottom: 24px;
}

.account-tab {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--acct-gray-500);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.account-tab:hover {
  color: var(--acct-dark);
}

.account-tab.is-active {
  color: var(--acct-dark);
  border-bottom-color: var(--acct-accent);
}

.account-tab[hidden] {
  display: none;
}

.account-panel[hidden] {
  display: none;
}

.account-email {
  font-size: 13px;
  color: var(--acct-gray-500);
  margin-bottom: 20px;
}

.account-panel__lead {
  font-size: 14px;
  color: var(--acct-gray-500);
  line-height: 1.5;
  margin: 0 0 20px;
}

.account-note {
  margin-top: 14px;
  font-size: 13px;
  color: var(--acct-gray-500);
  line-height: 1.5;
}

/* ---- Forms ------------------------------------------------------------ */
.account-page fieldset,
.auth-card fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 8px;
}

.account-page legend,
.auth-card legend {
  width: auto;
  padding: 0;
  border: 0;
  margin-bottom: 6px;
  font-size: 16px;
  font-weight: 600;
  color: var(--acct-dark);
}

.account-page .form-item,
.auth-card .form-item {
  margin: 0 0 16px;
}

.account-page label,
.auth-card label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--acct-gray-500);
}

.account-page input[type="text"],
.account-page input[type="email"],
.account-page input[type="password"],
.auth-card input[type="text"],
.auth-card input[type="email"],
.auth-card input[type="password"] {
  width: 100%;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--acct-border);
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  font-family: inherit;
  font-size: 14px;
  color: var(--acct-dark);
  transition: border-color 0.15s ease;
}

.account-page input[type="text"]:focus,
.account-page input[type="email"]:focus,
.account-page input[type="password"]:focus,
.auth-card input[type="text"]:focus,
.auth-card input[type="email"]:focus,
.auth-card input[type="password"]:focus {
  outline: none;
  border-color: var(--acct-accent);
  box-shadow: none;
}

.account-page input::placeholder,
.auth-card input::placeholder {
  color: var(--acct-border-strong);
}

.account-page .description,
.account-page .form-item__description,
.auth-card .description,
.auth-card .form-item__description {
  margin-top: 6px;
  font-size: 12px;
  color: var(--acct-gray-500);
  line-height: 1.4;
}

/* ---- Buttons ---------------------------------------------------------- */
.account-page .form-actions,
.auth-card .form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 8px;
}

.account-page .form-submit,
.account-page .account-btn,
.account-page .btn,
.account-page button[type="submit"],
.account-page input[type="submit"],
.auth-card .form-submit,
.auth-card .btn,
.auth-card button[type="submit"],
.auth-card input[type="submit"] {
  /* Match the SIGN UP button standard (urbanize_id/css/forms.css
     .submit-container button), minus its full width. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: auto;
  padding: 10px 30px;
  background-color: #08b2e3;
  color: #fff;
  border: none;
  border-radius: 0;
  cursor: pointer;
  font-family: 'Roboto Condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 900;
  font-size: 16px;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: none;
  letter-spacing: 0.425px;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.account-page .form-submit:hover,
.account-page .form-submit:focus,
.account-page .account-btn:hover,
.account-page .account-btn:focus,
.account-page .btn:hover,
.account-page .btn:focus,
.account-page button[type="submit"]:hover,
.account-page button[type="submit"]:focus,
.account-page input[type="submit"]:hover,
.account-page input[type="submit"]:focus,
.auth-card .form-submit:hover,
.auth-card .form-submit:focus,
.auth-card .btn:hover,
.auth-card .btn:focus,
.auth-card button[type="submit"]:hover,
.auth-card button[type="submit"]:focus,
.auth-card input[type="submit"]:hover,
.auth-card input[type="submit"]:focus {
  background-color: #069ac4;
  color: #fff;
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

.account-page .form-submit:active,
.account-page .account-btn:active,
.account-page .btn:active,
.account-page button[type="submit"]:active,
.account-page input[type="submit"]:active,
.auth-card .form-submit:active,
.auth-card .btn:active,
.auth-card button[type="submit"]:active,
.auth-card input[type="submit"]:active {
  transform: scale(0.99);
}

.account-page .account-btn:disabled,
.account-page .form-submit:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Secondary / de-emphasized action (e.g. Remove password). */
.account-page .button--danger,
.account-page .button--danger:hover,
.account-page .button--danger:focus {
  background-color: #fff;
  color: var(--acct-danger);
  border: 1px solid var(--acct-border);
  box-shadow: none;
}

.account-page .button--danger:hover,
.account-page .button--danger:focus {
  border-color: var(--acct-danger);
}

/* ---- Auth card (password reset) -------------------------------------- */
.auth-card .welcome-title {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 700;
}

.auth-card p {
  font-size: 14px;
  color: var(--acct-gray-500);
  line-height: 1.5;
}

.account-page .forgot-password,
.auth-card .forgot-password {
  margin: 4px 0 0;
  font-size: 13px;
}

.account-page .forgot-password a,
.auth-card .forgot-password a {
  color: var(--acct-accent-dark);
}