/* =========================================================
   BALEScoin — shared site chrome (header / footer / buttons)
   All 6 pages: text header always (no LogoImg)
   Desktop: title+sub left, nav right | Mobile: stacked
   ========================================================= */

:root {
  --site-ink: #202b4f;
  --site-navy: #1A365D;
  --site-link: #00A8C8;
  --site-link-hover: #4da9e6;
  --site-btn: #1A3A5C;
  --site-btn-hover: #142d47;
  --site-bg: #FFFFFF;
  --site-line: #E2E8F0;
  --site-muted: #64748B;
}

/* —— Unified header (desktop + mobile) ——
   Markup is usually:
     .d_h_m > .h_t + .h_p + .b_i
   or:
     .d_h_m > .site-brand(.h_t+.h_p) + .b_i
   Grid keeps title+subtitle stacked on the LEFT; nav on the RIGHT.
   (Plain flex put .h_p in the horizontal middle on desktop.)
*/
.d_h_m,
.site-header {
  display: grid !important;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 24px;
  row-gap: 2px;
  align-items: end;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 12px 16px 16px;
  box-sizing: border-box;
}

/* Optional wrapper */
.d_h_m .site-brand,
.site-header .site-brand {
  grid-column: 1;
  grid-row: 1 / span 2;
  min-width: 0;
  justify-self: start;
}

/* Title — left column, row 1 */
.d_h_m > .h_t,
.d_h_m .site-brand .h_t,
.site-header .h_t,
.d_h_m p.h_t {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  font-size: xx-large !important;
  font-weight: 700 !important;
  color: var(--site-ink) !important;
  margin: 0 !important;
  padding: 0;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-align: left;
}

/* Subtitle — directly under title (left column, row 2) */
.d_h_m > .h_p,
.d_h_m .site-brand .h_p,
.site-header .h_p,
.d_h_m p.h_p {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
  margin: 2px 0 0 0 !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  color: var(--site-ink) !important;
  line-height: 1.4;
  text-align: left;
}

/* Nav — right column, spans both rows, bottom-aligned */
.d_h_m .b_i,
.site-header .b_i {
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-self: end;
  align-self: end;
  width: fit-content;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 14px;
  align-items: center;
  justify-content: flex-end;
}
.d_h_m .b_i span,
.site-header .b_i span {
  display: inline;
}
.d_h_m a.h_m,
.d_h_m a.h_m_l,
.site-header a.h_m,
.site-header a.h_m_l {
  color: var(--site-link) !important;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 400;
}
.d_h_m a.h_m:hover,
.d_h_m a.h_m_l:hover,
.site-header a.h_m:hover,
.site-header a.h_m_l:hover {
  color: var(--site-link-hover) !important;
  text-decoration: underline;
}

/* Legacy desktop logo header — fully disabled */
.d_h_d {
  display: none !important;
}
#LogoImg {
  display: none !important;
}

.site-shell {
  max-width: 1120px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--site-bg);
  box-sizing: border-box;
}

/* Unified primary buttons */
.btn-primary,
.inv-btn-primary,
.ctr-btn-primary,
.gift-btn-primary,
button.btn-primary {
  background-color: var(--site-btn) !important;
  color: #fff !important;
  border: 1px solid var(--site-btn) !important;
  border-radius: 8px;
  min-height: 44px;
  min-width: 90px;
  padding: 10px 16px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  box-sizing: border-box;
}
.btn-primary:hover:not(:disabled),
.inv-btn-primary:hover:not(:disabled),
.ctr-btn-primary:hover:not(:disabled),
.gift-btn-primary:hover:not(:disabled) {
  background-color: var(--site-btn-hover) !important;
  border-color: var(--site-btn-hover) !important;
}
.btn-primary:disabled,
.inv-btn-primary:disabled,
.ctr-btn-primary:disabled,
.gift-btn-primary:disabled {
  opacity: 0.55;
  cursor: default;
}
.inv-btn-outline,
.ctr-btn-outline {
  background: #fff !important;
  color: var(--site-navy) !important;
  border: 1px solid var(--site-line) !important;
  border-radius: 8px;
  min-height: 44px;
  font-weight: 600;
}
.inv-btn-ghost,
.ctr-btn-ghost,
.gift-btn-ghost {
  background: transparent !important;
  color: var(--site-muted) !important;
  border: 1px solid transparent !important;
  font-weight: 500;
}

/* —— Sticky footer: pinned near bottom with 20px clearance —— */
html {
  height: 100%;
}
body.site-flat,
body.inv-pay-page,
body.ctr-pay-page,
body.gift-pay-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
}

/* Grow main shell/container so footer is pushed down.
   Unified content width + side gutters (desktop & mobile). */
body.site-flat > .container,
.inv-shell,
.ctr-shell,
.gift-shell,
.site-shell {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}
@media only screen and (max-width: 950px) {
  body.site-flat > .container,
  .inv-shell,
  .ctr-shell,
  .gift-shell,
  .site-shell {
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 40px; /* mobile top spacing */
  }
  .d_h_m,
  .site-header {
    padding-top: 0 !important; /* avoid double top with shell */
  }
}

/* Footer social — boxed bar, slightly darker ground */
.d_c2,
.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0;
  width: fit-content;
  max-width: calc(100% - 32px);
  margin-top: auto;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  box-sizing: border-box;
  border: 1px solid #D1D5DB;    /* frame around all three */
  border-radius: 10px;
  background: #f9fbfb;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.d_c2 a,
.site-footer a {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.d_c2 a + a,
.site-footer a + a {
  border-left: 1px solid #D1D5DB;
}
.d_c2 .u_l,
.site-footer .u_l {
  margin: 0;
  padding: 8px 18px;
  color: #475569;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  border-radius: 0;
  transition: color 0.15s ease, background 0.15s ease;
}
.d_c2 .u_l:hover,
.site-footer .u_l:hover {
  color: var(--site-link);
  background: rgba(0, 168, 200, 0.08);
}

/* Flat theme — no borders */
body.site-flat .container {
  background: var(--site-bg) !important;
  box-shadow: none !important;
  border: none !important;
  max-width: 1120px;
  margin: 0 auto;
}

/* Desktop top spacing = contact page container padding (70px)
   Applies to account / contact / inquiry (container) and
   invoice / contract / gift (shell). */
@media only screen and (min-width: 951px) {
  body.site-flat .container,
  .inv-shell,
  .ctr-shell,
  .gift-shell,
  .site-shell {
    padding-top: 70px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    max-width: 1120px;
    box-sizing: border-box;
  }
  /* header sits under the 70px offset */
  .d_h_m,
  .site-header {
    padding-top: 0 !important;
  }
}
body.site-flat .d_c1_1 {
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}
body.site-flat .d_c1 {
  border: none !important;
  box-shadow: none !important;
}

/* Mobile: stack brand above nav, all left */
@media only screen and (max-width: 950px) {
  .d_h_m,
  .site-header {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    max-width: 500px;
    padding: 0 0 12px; /* top comes from shell 40px */
    align-items: start;
  }
  .d_h_m > .h_t,
  .d_h_m .site-brand .h_t,
  .site-header .h_t {
    grid-column: 1;
    grid-row: 1;
  }
  .d_h_m > .h_p,
  .d_h_m .site-brand .h_p,
  .site-header .h_p {
    grid-column: 1;
    grid-row: 2;
  }
  .d_h_m .site-brand,
  .site-header .site-brand {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  .d_h_m .b_i,
  .site-header .b_i {
    grid-column: 1;
    grid-row: 3;
    justify-self: start;
    margin-top: 6px;
  }
}

/* Account page only: hide BALEScoin + subtitle on desktop (nav stays) */
@media only screen and (min-width: 951px) {
  body.page-account .d_h_m > .h_t,
  body.page-account .d_h_m > .h_p,
  body.page-account .d_h_m .site-brand {
    display: none !important;
  }
  body.page-account .d_h_m,
  body.page-account .site-header {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  body.page-account .d_h_m .b_i {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
  }
}
@media only screen and (max-width: 575px) {
  .d_h_m,
  .site-header {
    width: 100%;
    max-width: none;
    padding: 0 0 8px;
  }
  /* footer stays visible on phone when it fits */
}