/* MOE GOT IT — Bootstrap 5 theme. Navy #0e1a35 / Gold #d4af37 / Off-white #f5f2e8.
   Loaded after bootstrap.min.css. The site runs Bootstrap's dark theme
   (data-bs-theme="dark" on <html>); these overrides brand it. */

/* ---------- brand variables ---------- */
[data-bs-theme="dark"] {
  --bs-body-bg: #0e1a35;
  --bs-body-bg-rgb: 10, 22, 51;
  --bs-body-color: #f5f2e8;
  --bs-body-color-rgb: 245, 242, 232;
  --bs-primary: #d4af37;
  --bs-primary-rgb: 212, 175, 55;
  --bs-secondary-color: #aab3d4;
  --bs-tertiary-bg: #1a2744;
  --bs-tertiary-bg-rgb: 15, 31, 77;
  --bs-border-color: #2c3e6b;
  --bs-link-color: #d4af37;
  --bs-link-color-rgb: 212, 175, 55;
  --bs-link-hover-color: #dfc06a;
  --bs-card-bg: #1a2744;
  --bs-card-border-color: #2c3e6b;
}

body {
  font-family: 'DM Sans', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }

/* ---------- gold primary buttons (dark text on gold) ---------- */
.btn-primary {
  --bs-btn-color: #1a2744;
  --bs-btn-bg: #d4af37;
  --bs-btn-border-color: #d4af37;
  --bs-btn-hover-color: #1a2744;
  --bs-btn-hover-bg: #dfc06a;
  --bs-btn-hover-border-color: #dfc06a;
  --bs-btn-focus-shadow-rgb: 212, 175, 55;
  --bs-btn-active-color: #1a2744;
  --bs-btn-active-bg: #dfc06a;
  --bs-btn-active-border-color: #dfc06a;
  --bs-btn-disabled-color: #1a2744;
  --bs-btn-disabled-bg: #d4af37;
  --bs-btn-disabled-border-color: #d4af37;
  background-image: linear-gradient(135deg, #d4af37, #c49b2a);
  border: 0;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(212, 175, 55, .28);
}
.btn-primary:hover { background-image: linear-gradient(135deg, #dfc06a, #c49b2a); }
.btn-outline-warning {
  --bs-btn-color: #f5f2e8;
  --bs-btn-hover-color: #1a2744;
  font-weight: 600;
}

/* ---------- navbar ---------- */
.mgi-navbar {
  background: rgba(10, 22, 51, .96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #2c3e6b;
}
.mgi-navbar .navbar-brand { color: #f5f2e8; text-decoration: none; }
/* Nav links: plain light text; ONLY the current page gets the gold pill */
.mgi-navbar .nav-link { color: #f5f2e8; font-weight: 600; padding: .45rem .8rem; margin: .15rem; border-radius: .6rem; }
.mgi-navbar .nav-link:hover, .mgi-navbar .nav-link:focus { color: #d4af37; }
.mgi-navbar .nav-link.active { color: #0e1a35; background: #d4af37; font-weight: 700; }
.mgi-navbar .nav-link.active:hover, .mgi-navbar .nav-link.active:focus { color: #0e1a35; background: #dfc06a; }
.mgi-logo {
  width: 48px; height: 48px; border-radius: 50%;
  border: 2px solid #d4af37; background: #0e1a35;
}

/* Brand text — identical everywhere it appears: same yellow gradient as the buttons */
.mgi-brand {
  background: linear-gradient(135deg, #dfc06a, #d4af37);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  font-weight: 800; letter-spacing: .02em; display: inline-block;
}

/* ---------- hero ---------- */
.mgi-hero {
  background: radial-gradient(1200px 500px at 50% -10%, #2c3e6b 0%, #0e1a35 60%);
  text-align: center;
  padding: 3.5rem 1rem 3rem;
}
.mgi-hero h1 {
  font-family: 'Archivo Black', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 2rem; line-height: 1.2; margin-bottom: .75rem; letter-spacing: .01em;
}
.mgi-hero .lead { color: #aab3d4; max-width: 640px; margin: 0 auto 1.5rem; }
@media (min-width: 768px) { .mgi-hero h1 { font-size: 2.8rem; } }

/* ---------- section headings ---------- */
.mgi-section-title { text-align: center; margin-bottom: .5rem; }
.mgi-section-sub { text-align: center; color: #aab3d4; max-width: 640px; margin: 0 auto 1.75rem; }

/* ---------- cards ---------- */
.card { --bs-card-border-width: 2px; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.mgi-emoji { font-size: 3rem; line-height: 1; }
.mgi-service-video { width: 100%; display: block; border-radius: .75rem; aspect-ratio: 16/10; object-fit: cover; background: #0a0e14; }
.mgi-price { font-size: 1.3rem; font-weight: 800; }
.mgi-price small { color: #aab3d4; font-weight: 400; font-size: .85rem; }

/* Professional pay-in-full discount badge (gold pill, navy text). */
.mgi-discount-badge {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: #0e1a35;
  background: linear-gradient(135deg, #dfc06a, #d4af37);
  border-radius: 999px;
  padding: .32rem .75rem;
  margin-bottom: .75rem;
  box-shadow: 0 2px 8px rgba(212, 175, 55, .35);
  white-space: nowrap;
}

/* service picker cards on the booking form */
.mgi-pick { cursor: pointer; transition: transform .12s ease, border-color .12s ease; }
.mgi-pick:hover { transform: translateY(-2px); }
.mgi-pick:has(input:checked) { border-color: #d4af37; box-shadow: 0 0 0 2px rgba(212, 175, 55, .45); }
.mgi-pick input[type="checkbox"], .mgi-pick input[type="radio"] {
  width: 22px; height: 22px; accent-color: #d4af37; flex-shrink: 0;
}

/* ---------- booking steps ---------- */
.mgi-steps { display: flex; gap: .4rem; margin-bottom: 1.5rem; }
.mgi-step {
  flex: 1; text-align: center; font-size: .82rem; color: #aab3d4;
  padding: .65rem .4rem; border-radius: .65rem;
  background: #1a2744; border: 1px solid #2c3e6b;
}
.mgi-step.active { color: #1a2744; background: #d4af37; font-weight: 700; border-color: #d4af37; }
.mgi-step.done { color: #d4af37; border-color: #d4af37; }

/* ---------- forms ---------- */
.form-control, .form-select {
  background-color: #1a2744;
  border: 2px solid #2c3e6b;
  color: #f5f2e8;
  padding: .8rem .9rem;
  font-size: 1rem;
}
.form-control:focus, .form-select:focus {
  background-color: #1a2744;
  border-color: #d4af37;
  color: #f5f2e8;
  box-shadow: 0 0 0 .25rem rgba(212, 175, 55, .25);
}
.form-control::placeholder { color: #aab3d4; opacity: .7; }
.form-label { font-weight: 600; }
.form-label .req { color: #d4af37; }

/* ---------- floating tap-to-call (mobile) ---------- */
.mgi-tap-call {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 1030;
  width: 60px; height: 60px; border-radius: 50%;
  background: linear-gradient(135deg, #d4af37, #c49b2a);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}
@media (min-width: 720px) { .mgi-tap-call { display: none; } }

/* ---------- footer ---------- */
.mgi-footer { background: #0a0e14; border-top: 2px solid #d4af37; margin-top: 2.5rem; }
.mgi-footer a { color: #aab3d4; text-decoration: none; }
.mgi-footer a:hover { color: #d4af37; }
/* Footer links: simple gold text links */
.mgi-footer a.mgi-link { color: #d4af37; font-weight: 600; text-decoration: none; }
.mgi-footer a.mgi-link:hover, .mgi-footer a.mgi-link:focus { color: #dfc06a; text-decoration: underline; }
/* Powered-by line: logo + brand text, centered at the bottom of every page */
.mgi-powered { display: flex; align-items: center; justify-content: center; gap: .75rem; }
.mgi-powered img { width: 48px; height: 48px; border-radius: 50%; border: 2px solid #d4af37; }
.mgi-powered .mgi-brand { font-size: 1.25rem; }

/* ---------- FAQ accordion ---------- */
.mgi-faq .accordion-item { background: #1a2744; border: 1px solid #2c3e6b; }
.mgi-faq .accordion-button { background: #1a2744; color: #f5f2e8; font-weight: 600; }
.mgi-faq .accordion-button:not(.collapsed) { background: #d4af37; color: #0e1a35; }
.mgi-faq .accordion-button:focus { box-shadow: 0 0 0 .25rem rgba(212, 175, 55, .25); border-color: #d4af37; }
.mgi-faq .accordion-body { color: #cfd6f2; }
.mgi-faq .accordion-body a { color: #d4af37; font-weight: 600; }

/* ---------- chat widget ---------- */
.mgi-chat-user {
  background: rgba(212, 175, 55, .1); border: 1px solid rgba(212, 175, 55, .3);
  border-radius: 12px 12px 4px 12px; padding: .5rem .8rem;
  margin: .5rem 0 .25rem auto; max-width: 88%; font-size: .9rem;
}
.mgi-chat-user strong { color: #d4af37; font-size: .75rem; }
.mgi-chat-bot {
  border-left: 2px solid #d4af37; padding: .25rem 0 .25rem .75rem;
  margin: .25rem 0 .75rem; font-size: .9rem; color: #dfe4fa;
}
.mgi-chat-bot a { color: #d4af37; font-weight: 600; }
.mgi-chat-dots { display: inline-flex; gap: 5px; padding: .4rem 0; }
.mgi-chat-dots span { width: 8px; height: 8px; border-radius: 50%; background: #d4af37; opacity: .35; animation: mgiChatDot 1.2s ease-in-out infinite; }
.mgi-chat-dots span:nth-child(2) { animation-delay: .2s; }
.mgi-chat-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes mgiChatDot { 0%, 80%, 100% { opacity: .2; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }

/* ---------- misc ---------- */
:focus-visible { outline: 3px solid #d4af37; outline-offset: 2px; }
.table { --bs-table-bg: transparent; }

/* ---------- centered customer popup ---------- */
.mgi-popup { background: #0a1633; border: 2px solid #d4af37; border-radius: 14px; color: #fff; box-shadow: 0 18px 60px rgba(0,0,0,.6); }
.mgi-popup .modal-header { border-bottom: 1px solid rgba(212,175,55,.35); }
.mgi-popup .modal-title { color: #ffd700; font-weight: 800; }
.mgi-popup .modal-body { font-size: 1.05rem; line-height: 1.5; }
.mgi-popup .modal-footer { border-top: 1px solid rgba(212,175,55,.35); }