/* ============================================================
   MailSplat — Microsoft Outlook colour style theme
   Fluent blues on clean white/light surfaces, Manrope type.
   (Variable names kept from the earlier theme; values are now
   Outlook blues so every usage site restyles automatically.)
   ============================================================ */

:root {
  --ms-green:       #0f6cbd;   /* Outlook primary blue */
  --ms-green-deep:  #004578;   /* deep blue — nav / footer / dark sections */
  --ms-green-soft:  #eff6fc;   /* light blue tint sections */
  --ms-clay:        #0078d4;   /* bright Microsoft blue — CTAs */
  --ms-clay-deep:   #106ebe;
  --ms-cream:       #f5f9fd;   /* page background, faint blue-grey */
  --ms-paper:       #ffffff;
  --ms-ink:         #242424;   /* Fluent neutral text */
  --ms-muted:       #616161;
  --ms-line:        #d6e4f0;
}

body {
  font-family: "Manrope", "Segoe UI", system-ui, sans-serif;
  background: var(--ms-cream);
  color: var(--ms-ink);
  /* room for the fixed footer (synced to its real height by a small script) */
  padding-bottom: var(--ms-footer-h, 96px);
}

/* ---------- navbar ---------- */
.ms-navbar {
  background: var(--ms-green-deep);
}
.ms-navbar .navbar-brand { color: #f2f8fe; font-size: 1.25rem; }
.ms-navbar .navbar-brand:hover { color: #fff; }
.ms-logo-mark { color: #6cb8f6; display: inline-flex; }
.ms-brand-accent { color: #6cb8f6; }
.ms-navbar .nav-link { color: #cfe4fa; font-weight: 500; }
.ms-navbar .nav-link:hover, .ms-navbar .nav-link.active { color: #fff; }
.ms-navbar .navbar-text { color: #a9cdf0; }
.ms-navbar .navbar-toggler { border-color: rgba(255,255,255,.3); }
.ms-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255,255,255,.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.btn-ms-accent {
  background: var(--ms-clay); border-color: var(--ms-clay); color: #fff; font-weight: 600;
}
.btn-ms-accent:hover { background: var(--ms-clay-deep); border-color: var(--ms-clay-deep); color: #fff; }
.btn-ms-primary {
  background: var(--ms-green); border-color: var(--ms-green); color: #fff; font-weight: 600;
}
.btn-ms-primary:hover { background: var(--ms-green-deep); border-color: var(--ms-green-deep); color: #fff; }
.btn-outline-ms {
  border: 1px solid var(--ms-green); color: var(--ms-green); background: transparent; font-weight: 600;
}
.btn-outline-ms:hover { background: var(--ms-green); color: #fff; }

/* Bootstrap primary re-tint (auth pages use btn-primary) */
.btn-primary {
  --bs-btn-bg: var(--ms-green); --bs-btn-border-color: var(--ms-green);
  --bs-btn-hover-bg: var(--ms-green-deep); --bs-btn-hover-border-color: var(--ms-green-deep);
  --bs-btn-active-bg: var(--ms-green-deep); --bs-btn-active-border-color: var(--ms-green-deep);
}
a { color: var(--ms-green); }
a:hover { color: var(--ms-green-deep); }

/* ---------- hero / marketing ---------- */
.ms-hero {
  background: linear-gradient(180deg, var(--ms-green-deep), var(--ms-green));
  color: #eef5fc;   /* dark background => light text */
  padding: 4.5rem 0 4rem;
}
.ms-hero h1 { font-weight: 800; letter-spacing: -.02em; color: #fff; }
.ms-hero .lead { color: #d5e6f7; }
.ms-hero-splat { color: #6cb8f6; }

.ms-section { padding: 3.5rem 0; }
.ms-section-alt { background: var(--ms-green-soft); }
.ms-section h2 { font-weight: 800; letter-spacing: -.01em; }

.ms-feature-card {
  background: var(--ms-paper); border: 1px solid var(--ms-line); border-radius: 12px;
  padding: 1.6rem; height: 100%;
}
.ms-feature-card .bi { font-size: 1.7rem; color: var(--ms-clay); }
.ms-feature-card h3 { font-size: 1.05rem; font-weight: 700; margin: .7rem 0 .4rem; }
.ms-feature-card p { color: var(--ms-muted); font-size: .92rem; margin: 0; }

/* ---------- cards / panels ---------- */
.ms-card {
  background: var(--ms-paper); border: 1px solid var(--ms-line); border-radius: 12px;
}
.ms-card-head {
  padding: .85rem 1.15rem; border-bottom: 1px solid var(--ms-line);
  font-weight: 700; font-size: .95rem;
}
.ms-card-body { padding: 1.15rem; }

/* pricing */
.ms-price-card {
  background: var(--ms-paper); border: 2px solid var(--ms-line); border-radius: 14px;
  padding: 2rem; height: 100%;
  /* flex column so the CTA buttons in every card line up at the bottom */
  display: flex; flex-direction: column;
}
.ms-price-card.featured { border-color: var(--ms-clay); position: relative; }
.ms-price-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--ms-clay); color: #fff; font-size: .72rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; padding: .25rem .8rem; border-radius: 999px;
}
.ms-price-num { font-size: 2.6rem; font-weight: 800; }
.ms-price-per { color: var(--ms-muted); }
.ms-price-card ul { padding-left: 0; list-style: none; flex-grow: 1; }
.ms-price-card li { padding: .35rem 0; }
.ms-price-card li .bi-check-lg { color: var(--ms-green); margin-right: .4rem; }

/* currency toggle ($ / £) */
.ms-cur-toggle {
  border: 1px solid var(--ms-line); border-radius: 999px; padding: .25rem;
  background: var(--ms-paper);
}
.ms-cur-toggle .btn {
  border: 0; border-radius: 999px; font-weight: 700; padding: .25rem 1rem;
  color: var(--ms-muted);
}
.ms-cur-toggle .btn.active { background: var(--ms-green); color: #fff; }
.ms-cur-gbp { display: none; }
.ms-show-gbp .ms-cur-usd { display: none; }
.ms-show-gbp .ms-cur-gbp { display: inline; }

/* ---------- auth pages (bo-* classes come from the ported pages) ---------- */
.bo-auth, .ms-auth { max-width: 480px; margin: 3rem auto; }
.bo-paper, .ms-paper {
  background: var(--ms-paper); border: 1px solid var(--ms-line); border-top: 4px solid var(--ms-green);
  border-radius: 12px; padding: 2.2rem 2.1rem;
}
.bo-section-title, .ms-section-title { font-weight: 800; letter-spacing: -.01em; }
.bo-rule, .ms-rule { border-color: var(--ms-line); opacity: 1; }

.form-control:focus, .form-select:focus {
  border-color: var(--ms-green); box-shadow: 0 0 0 .2rem rgba(15, 108, 189, .18);
}

/* ---------- footer: fixed to the bottom so it never moves ---------- */
.ms-footer {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1031;
  background: var(--ms-green-deep); color: #c6ddf2;   /* dark background => light text */
}
/* the dashboard selection bar floats just above the fixed footer */
#actionBar { bottom: var(--ms-footer-h, 96px) !important; }
.ms-footer a { color: #eaf3fc; text-decoration: none; }
.ms-footer a:hover { color: #fff; text-decoration: underline; }
.ms-footer-tag { color: #6cb8f6; font-style: italic; }

/* tables */
.ms-table thead th {
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ms-muted); border-bottom: 2px solid var(--ms-green);
}