/* Atomic Access — designer overrides (safe to edit)
   Theme: Sandbox / Bootstrap (aqua). Keep custom rules here so style.css stays untouched. */

.product-row {
  margin-bottom: 4rem;
}

.navbar-nav .nav-link.active-page,
.navbar-nav .nav-item.dropdown > .nav-link.active-page {
  color: #54a8c7 !important;
}

.btn-atomic-primary,
.btn-modern-quote,
.btn-quote-active {
  background: #54a8c7;
  color: #fff;
  border: 0;
  border-radius: 50rem;
  padding: 0.65rem 1.4rem;
  font-weight: 600;
}
.btn-atomic-primary:hover,
.btn-modern-quote:hover,
.btn-quote-active:hover {
  background: #3e92b3;
  color: #fff;
}

.btn-atomic-white {
  background: #fff;
  color: #1b1e24;
  border-radius: 50rem;
  font-weight: 600;
}

.btn-atomic-max {
  background: #c41e24;
  color: #fff;
  border: 0;
  border-radius: 50rem;
  font-weight: 600;
}
.btn-atomic-max:hover { background: #a3181d; color: #fff; }

.pathfinder-card,
.division-card {
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.pathfinder-card:hover,
.division-card:hover {
  transform: translateY(-3px);
}

.division-icon {
  width: 52px;
  height: 52px;
  border-radius: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(84, 168, 199, 0.12);
  color: #54a8c7;
  font-size: 1.4rem;
}

.price-card {
  border-radius: 1rem;
}

.project-chip {
  display: inline-block;
  font-size: 12px;
  padding: 0.2rem 0.6rem;
  border-radius: 50rem;
  background: #eef7fa;
  color: #3e7a90;
  margin: 0 4px 6px 0;
}

.handoff-note {
  background: #102033;
  color: #c9d6e4;
  font-size: 13px;
  padding: 8px 16px;
  text-align: center;
}
.handoff-note a { color: #7ec8e3; }

.text-brand-red { color: #c41e24 !important; }

/* ── Login page ── */
.login-hero {
  min-height: calc(100vh - 140px);
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #0d1b2a 0%, #1b3a52 60%, #54a8c7 100%);
  padding: 5rem 0 6rem;
}
.login-hero h1 { color: #fff; }
.login-hero .lead { color: rgba(255,255,255,.78); }

.login-role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}

.login-role-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 2.2rem 1.5rem;
  border-radius: 1.25rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
  backdrop-filter: blur(6px);
}
.login-role-card:hover {
  background: rgba(255,255,255,.18);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,.3);
  color: #fff;
  text-decoration: none;
}
.login-role-card .role-icon {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 0.25rem;
}
.login-role-card .role-icon.resident  { background: rgba(84,168,199,.25); color: #7de0ff; }
.login-role-card .role-icon.guard     { background: rgba(255,193,7,.2);   color: #ffd54f; }
.login-role-card .role-icon.admin     { background: rgba(196,30,36,.2);   color: #ff6b6b; }
.login-role-card h4 { margin: 0; font-size: 1.1rem; font-weight: 700; color: #fff; }
.login-role-card p  { margin: 0; font-size: 0.85rem; opacity: .72; text-align: center; line-height: 1.4; color: #fff; }