:root{
  --stroke: rgba(2, 17, 27, .18);
  --stroke-strong: rgba(2, 17, 27, .26);
  --nav: #986C6A;
  --navText: #FCFCFC;
  --navHover: #7F5957;
  --navSoft: rgba(152,108,106,.14);
  --appBg: #DBDBDB;
  --paper: #FCFCFC;
  --ink: #02111B;
  --muted: #6C6F7F;
  --mutedSoft: rgba(108,111,127,.14);
  --field-border: rgba(2, 17, 27, .35);
  --field-border-hover: rgba(2, 17, 27, .52);
  --field-border-focus: rgba(152, 108, 106, .60);
  --navbar-offset: 64px;
  --bs-body-bg: var(--appBg);
  --bs-body-color: var(--ink);
  --bs-body-font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --bs-border-color: var(--stroke);
  --bs-border-color-translucent: rgba(2, 17, 27, .16);
  --bs-card-border-color: var(--stroke);
  --bs-link-color: var(--nav);
  --bs-link-hover-color: var(--navHover);
  --bs-modal-border-color: var(--stroke);
  --bs-primary: var(--nav);
  --bs-primary-rgb: 152,108,106;
  --bs-table-border-color: rgba(2, 17, 27, .14);
}

/* Fonts: removed Google Fonts @import (render-blocking + CSP-unfriendly). Load via <link> or self-host woff2. */
/* Main background requirement */
body.bg-app{
  background: var(--appBg);
  color: var(--ink);
}

/* Offset for fixed navbar */
.main-shell{
  padding-top: 74px;
}

/* Navbar requirements */
.navbar-sgauc{
  background: var(--nav) !important;
}
.navbar-sgauc .navbar-brand,
.navbar-sgauc .nav-link{
  color: var(--navText) !important;
}
.navbar-sgauc .nav-link:hover{
  color: rgba(252,252,252,.92) !important;
}
.navbar-sgauc .navbar-toggler{
  border-color: rgba(252,252,252,.35);
}
.navbar-sgauc .navbar-toggler-icon{
  filter: invert(1) grayscale(1) brightness(2);
}

.letterspace{ letter-spacing: .14em; }

/* Typer layout (placeholder prevents line jerk) */
.hero-typer-line{ line-height: 1.3; }
.hero-typer-wrapper{
  position: relative;
  display: inline-block;
  vertical-align: baseline;
}
.hero-typer-placeholder{
  visibility: hidden;
  white-space: nowrap;
}
.hero-typer-overlay{
  position: absolute;
  inset: 0 auto auto 0;
  white-space: nowrap;
}
.typer-accent{ color: var(--nav); }

/* Carousel sizing */
.carousel-screenshot{
  aspect-ratio: 16 / 8;
  object-fit: cover;
}

/* Footer */
.footer-sgauc{
  background: var(--paper);
  border-top: 1px solid rgba(2,17,27,.10);
}

/* --- Theme overrides (merged from theme.css) --- */
/* Global base */
body{
  background: var(--appBg);
  color: var(--ink);
  font-family: var(--bs-body-font-family);
}

.card{
  background: var(--paper);
}

/* Links */
a{
  color: var(--nav);
}
a:hover{
  color: var(--navHover);
}

/* Primary buttons */
.btn-primary{
  --bs-btn-color: var(--navText);
  --bs-btn-bg: var(--nav);
  --bs-btn-border-color: var(--nav);
  --bs-btn-hover-color: var(--navText);
  --bs-btn-hover-bg: var(--navHover);
  --bs-btn-hover-border-color: var(--navHover);
  --bs-btn-focus-shadow-rgb: 152,108,106;
  --bs-btn-active-color: var(--navText);
  --bs-btn-active-bg: var(--navHover);
  --bs-btn-active-border-color: var(--navHover);
}
.btn-outline-primary{
  --bs-btn-color: var(--nav);
  --bs-btn-border-color: var(--nav);
  --bs-btn-hover-color: var(--navText);
  --bs-btn-hover-bg: var(--nav);
  --bs-btn-hover-border-color: var(--nav);
  --bs-btn-focus-shadow-rgb: 152,108,106;
  --bs-btn-active-color: var(--navText);
  --bs-btn-active-bg: var(--navHover);
  --bs-btn-active-border-color: var(--navHover);
}

/* Remove "bootstrap blue" from common helpers */
.text-primary{ color: var(--nav) !important; }
.bg-primary{ background-color: var(--nav) !important; }
.border-primary{ border-color: rgba(152,108,106,.45) !important; }

/* Checkboxes / radios */
.form-check-input:checked{
  background-color: var(--nav);
  border-color: var(--nav);
}
.form-check-input:focus{
  border-color: rgba(152,108,106,.55);
  box-shadow: 0 0 0 .25rem rgba(152,108,106,.18);
}

/* Badges */
.badge-nav{
  background: var(--navSoft);
  color: var(--nav);
  border: 1px solid rgba(152,108,106,.28);
}
.badge-muted{
  background: var(--mutedSoft);
  color: var(--muted);
  border: 1px solid rgba(108,111,127,.28);
}

/* Offcanvas header */
.offcanvas-header{
  border-bottom: 1px solid rgba(0,0,0,.08);
}

/* Subtle icon tint */
.bi{
  color: currentColor;
}

/* --- Form field border + datepicker palette tuning --- */
/* Darker borders for inputs */
.form-control,
.form-select,
.form-control-plaintext,
.input-group-text,
.form-floating > .form-control,
.form-floating > .form-select,
textarea{
  border-color: var(--field-border);
}

.form-control:hover,
.form-select:hover,
textarea:hover{
  border-color: var(--field-border-hover);
}

.form-control:focus,
.form-select:focus,
textarea:focus{
  border-color: var(--field-border-focus);
  box-shadow: 0 0 0 .25rem rgba(152,108,106,.18);
}

/* Checkboxes/radios borders darker too */
.form-check-input{
  border-color: var(--field-border);
}
.form-check-input:hover{
  border-color: var(--field-border-hover);
}

/* Native date icon tint (WebKit browsers) */
input[type="date"]::-webkit-calendar-picker-indicator{
  opacity: .85;
  cursor: pointer;
  /* Approximate tint to --nav */
  filter: invert(33%) sepia(12%) saturate(1100%) hue-rotate(318deg) brightness(90%) contrast(90%);
}

/* --- Native select dropdown & datepicker palette hard overrides --- */

/* NOTE: Native <select> option highlight is OS-controlled in many browsers (Chrome/Edge on Windows).
   These rules may apply in Firefox/Safari, but may not fully override the blue highlight everywhere. */
.form-select option:checked,
select option:checked{
  background-color: var(--nav) !important;
  color: var(--navText) !important;
}
.form-select option:hover,
select option:hover{
  background-color: rgba(152,108,106,.18) !important;
  color: var(--ink) !important;
}

/* --- Themed Bootstrap dropdown (for custom currency select) --- */
.dropdown-menu{
  --bs-dropdown-link-hover-bg: rgba(152,108,106,.14);
  --bs-dropdown-link-hover-color: var(--ink);
  --bs-dropdown-link-active-bg: var(--nav);
  --bs-dropdown-link-active-color: var(--navText);
}

/* --- Bootstrap dropdown items: force palette on hover/active/focus --- */
.dropdown-item:hover,
.dropdown-item:focus{
  background-color: rgba(152,108,106,.14) !important;
  color: var(--ink) !important;
}
.dropdown-item.active,
.dropdown-item:active{
  background-color: var(--nav) !important;
  color: var(--navText) !important;
}

/* adjust if your navbar height differs */

.flash-wrap{
  position: fixed;
  top: var(--navbar-offset);
  left: 0;
  right: 0;
  z-index: 1080;            /* > bootstrap fixed navbar (1030) */
  pointer-events: none;     /* allow clicks through empty area */
}

.flash-wrap .alert{
  pointer-events: auto;     /* allow clicking close button */
}

/* =========================
   Dashboard (dashboard.html)
   ========================= */

/* Dashboard cards */
.dash-card{
  border-radius: 18px;
}

/* Dashboard accordions: remove Bootstrap blue (must override vars on .accordion itself) */
.dash-card .accordion{
  --bs-accordion-border-color: rgba(2, 17, 27, .14);
  --bs-accordion-btn-color: var(--ink);
  --bs-accordion-btn-bg: var(--paper);
  --bs-accordion-active-color: var(--ink);
  --bs-accordion-active-bg: rgba(152, 108, 106, .08);

  --bs-accordion-btn-focus-border-color: rgba(152, 108, 106, .45);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .20rem rgba(152, 108, 106, .18);
}

/* Hard overrides (in case Bootstrap sets styles directly) */
.dash-card .accordion-button:not(.collapsed){
  color: var(--ink) !important;
  background-color: rgba(152, 108, 106, .08) !important;
}
.dash-card .accordion-button:focus{
  border-color: rgba(152, 108, 106, .45) !important;
  box-shadow: 0 0 0 .20rem rgba(152, 108, 106, .18) !important;
}

/* Quick actions: consistent touch targets */
.btn-quick-action{
  border-radius: 16px;
  padding: 14px 16px;
  font-weight: 600;
}

/* Selection tiles (similar to card links) */
.card-form-link{
  border-radius: 18px;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease, border-color .08s ease;
}
.card-form-link:hover{
  transform: translateY(-1px);
  border-color: rgba(0,0,0,.25);
  box-shadow: 0 .35rem 1rem rgba(0,0,0,.08);
}

/* Better breathing space in portrait */
@media (max-width: 991.98px){
  .container-xxl{ padding-left: 16px; padding-right: 16px; }
}

/* ============================
   Autofill: Document Defaults tabs (Bootstrap-y, rounded-rectangle)
   scoped to #afTabDefaults / #afDefaultsTabs
   ============================ */
#afTabDefaults #afDefaultsTabs.nav-pills{
  --tab-radius: .50rem;
  --tab-border: rgba(152,108,106,.28);
  --tab-border-hover: rgba(152,108,106,.45);
  --tab-bg-hover: rgba(152,108,106,.08);
  --tab-bg-active: var(--nav);
  --tab-text: var(--nav);
  --tab-text-active: var(--navText);
  --tab-focus: 0 0 0 .20rem rgba(152,108,106,.18);
}

#afTabDefaults #afDefaultsTabs.nav-pills .nav-link{
  color: var(--tab-text);
  background: transparent;
  border: 1px solid var(--tab-border);
  border-radius: var(--tab-radius);
  font-weight: 600;
  line-height: 1.15;
  padding: .45rem .75rem;
  white-space: nowrap;
}

#afTabDefaults #afDefaultsTabs.nav-pills .nav-link:hover{
  color: var(--navHover);
  background: var(--tab-bg-hover);
  border-color: var(--tab-border-hover);
}

#afTabDefaults #afDefaultsTabs.nav-pills .nav-link:focus,
#afTabDefaults #afDefaultsTabs.nav-pills .nav-link:focus-visible{
  box-shadow: var(--tab-focus);
}

#afTabDefaults #afDefaultsTabs.nav-pills .nav-link.active,
#afTabDefaults #afDefaultsTabs.nav-pills .show > .nav-link{
  color: var(--tab-text-active);
  background: var(--tab-bg-active);
  border-color: var(--tab-bg-active);
  box-shadow: var(--tab-focus);
}

#afTabDefaults #afDefaultsTabs.nav-pills .nav-link.disabled{
  opacity: .55;
  pointer-events: none;
}

/* =========================================
   Overview tabs + PayNow controls: kill blue
   ========================================= */

/* Tabs (strong override, no reliance on BS vars) */
#docCfgTabs.nav-pills .nav-link{
  background: transparent !important;
  color: var(--nav) !important;
  border: 1px solid rgba(152,108,106,.28) !important;
  border-radius: .65rem !important;
  font-weight: 650 !important;
  padding: .55rem .85rem !important;
  -webkit-tap-highlight-color: transparent;
}

#docCfgTabs.nav-pills .nav-link:hover{
  background: rgba(152,108,106,.08) !important;
  border-color: rgba(152,108,106,.45) !important;
  color: var(--navHover) !important;
}

#docCfgTabs.nav-pills .nav-link:focus,
#docCfgTabs.nav-pills .nav-link:focus-visible{
  outline: 0 !important;
  box-shadow: 0 0 0 .20rem rgba(152,108,106,.18) !important;
}

#docCfgTabs.nav-pills .nav-link.active,
#docCfgTabs.nav-pills .show > .nav-link{
  background: var(--nav) !important;
  border-color: var(--nav) !important;
  color: var(--navText) !important;
  box-shadow: 0 0 0 .20rem rgba(152,108,106,.18) !important;
}

#docCfgTabs.nav-pills .nav-link:active{
  background: rgba(152,108,106,.12) !important;
}

/* PayNow: theme ALL checkboxes + switch so checked/focus/hover never goes blue */
#pane-paynow .form-check-input{
  --bs-form-check-bg: #fff;
  --bs-form-check-border-color: rgba(2,17,27,.35);
  --bs-form-check-focus-border-color: rgba(152,108,106,.55);
  --bs-form-check-focus-box-shadow: 0 0 0 .25rem rgba(152,108,106,.18);
  --bs-form-check-checked-bg-color: var(--nav);
  --bs-form-check-checked-border-color: var(--nav);
  -webkit-tap-highlight-color: transparent;
}

#pane-paynow .form-check-input:hover{
  border-color: var(--field-border-hover) !important;
  box-shadow: 0 0 0 .20rem rgba(152,108,106,.10) !important;
}

#pane-paynow .form-check-input:focus,
#pane-paynow .form-check-input:focus-visible{
  border-color: rgba(152,108,106,.55) !important;
  box-shadow: 0 0 0 .25rem rgba(152,108,106,.18) !important;
}

/* Select itself (dropdown list highlight is OS-controlled; this fixes focus/hover) */
#pane-paynow select.form-select:hover{
  border-color: rgba(152,108,106,.45) !important;
}
#pane-paynow select.form-select:focus,
#pane-paynow select.form-select:focus-visible{
  border-color: rgba(152,108,106,.55) !important;
  box-shadow: 0 0 0 .25rem rgba(152,108,106,.18) !important;
}

/* =========================================
   Bootstrap primary: fix disabled/loading blue
   ========================================= */
.btn-primary{
  --bs-btn-color: var(--navText);
  --bs-btn-bg: var(--nav);
  --bs-btn-border-color: var(--nav);
  --bs-btn-hover-color: var(--navText);
  --bs-btn-hover-bg: var(--navHover);
  --bs-btn-hover-border-color: var(--navHover);
  --bs-btn-focus-shadow-rgb: 152,108,106;
  --bs-btn-active-color: var(--navText);
  --bs-btn-active-bg: var(--navHover);
  --bs-btn-active-border-color: var(--navHover);

  /* this is the missing part causing Bootstrap blue during loading/disabled */
  --bs-btn-disabled-color: var(--navText);
  --bs-btn-disabled-bg: var(--nav);
  --bs-btn-disabled-border-color: var(--nav);
}

/* =========================================
   Checkout page
   ========================================= */
.checkout-page{
  color: var(--ink);
}

.checkout-page .checkout-card{
  background: var(--paper);
  border: 1px solid var(--stroke);
  border-radius: .85rem;
  box-shadow: 0 .5rem 1.25rem rgba(2,17,27,.06) !important;
}

.checkout-page .text-secondary{
  color: var(--muted) !important;
}

.checkout-page hr{
  border-color: rgba(2,17,27,.14);
  opacity: 1;
}

.checkout-page .checkout-features{
  padding-left: 1.2rem;
}

.checkout-page .checkout-features li{
  margin-bottom: .28rem;
}

.checkout-page .checkout-btn{
  min-height: 48px;
  border-radius: .6rem;
  font-weight: 500;
  letter-spacing: .01em;
}

.checkout-page .checkout-btn:hover,
.checkout-page .checkout-btn:focus,
.checkout-page .checkout-btn:active{
  background-color: var(--navHover) !important;
  border-color: var(--navHover) !important;
  color: var(--navText) !important;
}

.checkout-page .checkout-btn:focus,
.checkout-page .checkout-btn:focus-visible{
  box-shadow: 0 0 0 .25rem rgba(152,108,106,.18) !important;
}

.checkout-page .checkout-btn:disabled,
.checkout-page .checkout-btn.disabled{
  background-color: var(--nav) !important;
  border-color: var(--nav) !important;
  color: var(--navText) !important;
  opacity: .9;
  cursor: wait;
}

.checkout-page .checkout-btn .spinner-border{
  width: 1rem;
  height: 1rem;
  border-width: .14em;
  color: currentColor;
  vertical-align: -0.125em;
}

.checkout-page .checkout-back-btn{
  --bs-btn-color: var(--muted);
  --bs-btn-border-color: rgba(2,17,27,.26);
  --bs-btn-hover-color: var(--ink);
  --bs-btn-hover-bg: rgba(2,17,27,.04);
  --bs-btn-hover-border-color: rgba(2,17,27,.30);
  --bs-btn-focus-shadow-rgb: 152,108,106;
  --bs-btn-active-color: var(--ink);
  --bs-btn-active-bg: rgba(2,17,27,.08);
  --bs-btn-active-border-color: rgba(2,17,27,.34);
  --bs-btn-disabled-color: var(--muted);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: rgba(2,17,27,.18);

  border-radius: .5rem;
}

.checkout-page .checkout-back-btn:hover,
.checkout-page .checkout-back-btn:focus{
  box-shadow: 0 0 0 .25rem rgba(152,108,106,.12);
}

/* Verify Email button - register page */
#verifyEmailBtn{
  --bs-btn-color: #986C6A;
  --bs-btn-border-color: #986C6A;
  --bs-btn-hover-color: #FCFCFC;
  --bs-btn-hover-bg: #986C6A;
  --bs-btn-hover-border-color: #986C6A;
  --bs-btn-focus-shadow-rgb: 152,108,106;
  --bs-btn-active-color: #FCFCFC;
  --bs-btn-active-bg: #7F5957;
  --bs-btn-active-border-color: #7F5957;

  /* this is the missing part */
  --bs-btn-disabled-color: #986C6A;
  --bs-btn-disabled-bg: #DBDBDB;
  --bs-btn-disabled-border-color: #986C6A;
}

#verifyEmailBtn:disabled{
  opacity: 1;
  cursor: not-allowed;
}


/* =========================
   Active Transaction modal
   ========================= */
#activeDocModal .ad-shell{
  background: var(--paper);
  border: 1px solid var(--stroke);
  border-radius: 20px;
}
#activeDocModal .modal-header{
  padding: 1.2rem 1.25rem .55rem;
}
#activeDocModal .modal-body{
  padding: .55rem 1.25rem 1.05rem;
}
#activeDocModal .modal-footer{
  padding: 0 1.25rem 1.15rem;
}
#activeDocModal .modal-title{
  font-size: 1.75rem;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -.02em;
}
#activeDocModal .ad-subtitle{
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.35;
}
#activeDocModal .ad-kicker{
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .70rem;
  font-weight: 700;
}
#activeDocModal .ad-code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 1.45rem;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -.02em;
}
#activeDocModal .ad-overview,
#activeDocModal .ad-summary-card,
#activeDocModal .ad-detail-card{
  background: var(--paper);
  border: 1px solid var(--stroke);
  border-radius: 16px;
  padding: .95rem 1rem;
}
#activeDocModal .ad-overview{
  background: rgba(252,252,252,.55);
  padding-top: .9rem;
  padding-bottom: .8rem;
}
#activeDocModal .ad-receiver-block{
  min-width: 0;
}
#activeDocModal .ad-receiver{
  color: var(--ink);
  font-size: 1.38rem;
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -.02em;
  word-break: break-word;
}
#activeDocModal .ad-docs-row{
  border-top: 1px solid rgba(2,17,27,.12);
  margin-top: .85rem;
  padding-top: .68rem;
}
#activeDocModal .ad-docs-label{
  color: var(--muted);
  font-size: .78rem;
  font-weight: 600;
  margin-bottom: .18rem;
}
#activeDocModal .ad-selected-docs{
  color: var(--ink);
  line-height: 1.45;
  font-size: .95rem;
}
#activeDocModal .ad-doc-item{
  display: inline;
}
#activeDocModal .ad-doc-item + .ad-doc-item::before{
  content: "•";
  color: var(--muted);
  margin: 0 .52rem 0 .18rem;
}
#activeDocModal .ad-doc-tag{
  font-weight: 700;
  margin-right: .26rem;
}
#activeDocModal .ad-doc-name{
  color: var(--muted);
}
#activeDocModal .ad-section-title{
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.01em;
}
#activeDocModal .ad-section-subtitle{
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.35;
  margin-top: .15rem;
}
#activeDocModal .ad-summary-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.35rem;
}
#activeDocModal .ad-summary-item{
  border-top: 1px solid rgba(2,17,27,.12);
  padding: .7rem 0 .75rem;
  min-width: 0;
}
#activeDocModal .ad-summary-item--wide{
  grid-column: 1 / -1;
}
#activeDocModal .ad-field-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .85rem;
  margin-bottom: .22rem;
}
#activeDocModal .ad-field-label{
  color: var(--muted);
  font-size: .77rem;
  line-height: 1.15;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
}
#activeDocModal .ad-field-source{
  color: var(--muted);
  font-size: .74rem;
  line-height: 1.2;
  white-space: nowrap;
  flex-shrink: 0;
}
#activeDocModal .ad-field-value{
  color: var(--ink);
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1.28;
  letter-spacing: -.015em;
  word-break: break-word;
}
#activeDocModal .ad-field-value.is-empty{
  font-weight: 600;
  color: var(--muted);
}
#activeDocModal .ad-summary-empty{
  color: var(--muted);
  font-size: .9rem;
  padding: .85rem 0 .2rem;
}
#activeDocModal .ad-diff-row + .ad-diff-row{
  border-top: 1px solid rgba(2,17,27,.12);
  padding-top: .7rem;
  margin-top: .7rem;
}
@media (max-width: 767.98px){
  #activeDocModal .modal-dialog{
    margin: .75rem;
  }
  #activeDocModal .modal-header{
    padding: 1rem 1rem .45rem;
  }
  #activeDocModal .modal-body{
    padding: .45rem 1rem .95rem;
  }
  #activeDocModal .modal-footer{
    padding: 0 1rem 1rem;
  }
  #activeDocModal .modal-title{
    font-size: 1.45rem;
  }
  #activeDocModal .ad-code{
    font-size: 1.12rem;
  }
  #activeDocModal .ad-receiver{
    font-size: 1.18rem;
  }
  #activeDocModal .ad-summary-grid{
    grid-template-columns: 1fr;
    column-gap: 0;
  }
  #activeDocModal .ad-summary-item--wide{
    grid-column: auto;
  }
}