/* BuyDXN Products brand palette derived from the supplied logo. */
:root {
  --green: #68bc3f;
  --green-dark: #072450;
  --green-soft: #eef8e9;
  --gold: #49ad32;
  --cream: #f7f9fc;
  --ink: #14213a;
  --muted: #64748b;
  --line: #dde6f0;
  --white: #ffffff;
  --shadow: 0 18px 50px rgba(7, 36, 80, 0.12);
}

body {
  background: var(--cream);
}

/* Primary dark surfaces use the DXN navy; accents and actions use the logo green. */
.announcement,
.announce,
.site-footer,
body > footer {
  background: #072450;
}

.site-footer,
body > footer {
  color: #eef5fb;
}

.footer-grid a,
.footer-grid span,
body > footer a {
  color: #d4e1f0;
}

.disclaimer,
.copyright,
.legal {
  border-color: #29476d;
  color: #c8d6e7;
}

.site-header,
body > header {
  background: rgba(255, 255, 255, 0.96);
}

/* The supplied logo is a wide wordmark, so don't force it into the old square badge. */
.brand .logo-wrap {
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
}

.brand img,
body > header .brand > img {
  width: 160px;
  height: auto;
  max-height: 58px;
  object-fit: contain;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.footer-grid img,
body > footer img {
  width: 190px;
  max-width: 100%;
  height: auto;
  filter: brightness(0) invert(1);
}

/* Home-page hero treatment for the new horizontal logo. */
.hero {
  background:
    radial-gradient(circle at 82% 42%, rgba(104, 188, 63, 0.14) 0 21%, transparent 48%),
    linear-gradient(135deg, #f8fbff, #eef4fb);
}

.hero-art > img {
  width: min(420px, 80vw);
  height: auto;
  border-radius: 24px;
  padding: 1.35rem 1.6rem;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.hero-orbit {
  width: min(420px, 80vw);
  min-height: 260px;
  aspect-ratio: auto;
  border-radius: 28px;
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: 0 0 0 24px rgba(7, 36, 80, 0.05), 0 0 0 48px rgba(104, 188, 63, 0.06), var(--shadow);
}

.hero-orbit img {
  width: 86%;
  height: auto;
}

.steps,
.soft {
  background: #f0f5fa;
}

.store-hero {
  background: linear-gradient(125deg, #eef8e9, #ffffff);
}

.store-hero.distributor {
  background: linear-gradient(125deg, #072450, #0d3a76);
}

.content-hero,
.content-head {
  background: linear-gradient(120deg, #eef8e9, #f8fbff 62%, #ffffff);
}

.choice-grid article.dark,
.choices article.dark {
  background: #072450;
}

.choice-grid .dark a,
.choices .dark a {
  color: #a8dc86;
}

.access-note,
.note {
  border-left-color: #68bc3f;
  background: #f3faef;
  color: #35552a;
}

/* Admin surfaces share the same brand treatment. */
.admin-logo {
  width: 148px;
  height: 52px;
  border-radius: 0;
  background: transparent;
}

.admin-logo img {
  width: 148px;
  height: auto;
  max-height: 52px;
  object-fit: contain;
}

.admin-header {
  background: #ffffff;
}

.login-shell {
  background:
    radial-gradient(circle at 70% 20%, rgba(104, 188, 63, 0.16) 0, transparent 38%),
    linear-gradient(140deg, #f8fbff, #eef4fb);
}

.login-icon {
  width: 180px;
  height: 72px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid var(--line);
}

.login-icon img {
  width: 156px;
  height: auto;
  max-height: 58px;
}

.login-card input:focus {
  outline: 3px solid rgba(104, 188, 63, 0.22);
  border-color: var(--green);
}

.status-completed {
  background: #eef8e9;
  color: #3d8f2c;
}

.order-dialog {
  box-shadow: 0 30px 90px rgba(7, 36, 80, 0.34);
}

.order-dialog::backdrop {
  background: rgba(7, 36, 80, 0.58);
}

@media (max-width: 760px) {
  .brand img,
  body > header .brand > img {
    width: 122px;
    max-height: 48px;
  }

  body > header .brand > span {
    display: none;
  }

  .hero-art > img {
    width: min(300px, 82vw);
    padding: 1rem 1.2rem;
  }
}

@media (max-width: 600px) {
  .admin-logo,
  .admin-logo img {
    width: 118px;
  }
}