html,
body {
  background: #f4f0e7 !important;
}

body {
  color: #25221d !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

#content-container,
.page-content > .container,
.wrapper-body > .container,
main > .container,
.container[role="main"],
.container-fluid[role="main"] {
  width: min(1180px, calc(100% - 40px)) !important;
  max-width: 1180px !important;
  margin-inline: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.page-heading,
.breadcrumb {
  display: none !important;
}

/* Power Pages auth tabs: the active class lives on the anchor itself. */
ul.nav.nav-tabs.nav-account {
  display: flex !important;
  width: max-content !important;
  max-width: 100% !important;
  margin: 2rem 0 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  border: 1px solid rgba(76, 65, 47, .17) !important;
  border-bottom: 0 !important;
  border-radius: 16px 16px 0 0 !important;
  background: #fffdf9 !important;
  box-shadow: 0 12px 28px rgba(43, 36, 27, .07) !important;
  overflow: hidden !important;
  position: relative !important;
  z-index: 3 !important;
}

ul.nav.nav-tabs.nav-account > li.nav-item {
  float: none !important;
  margin: 0 !important;
}

ul.nav.nav-tabs.nav-account .nav-link {
  min-width: 168px !important;
  margin: 0 !important;
  padding: 1rem 1.25rem !important;
  border: 0 !important;
  border-right: 1px solid rgba(76, 65, 47, .13) !important;
  border-radius: 0 !important;
  background: #fffdf9 !important;
  background-image: none !important;
  color: #4a4338 !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: .92rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

ul.nav.nav-tabs.nav-account > li:last-child .nav-link {
  border-right: 0 !important;
}

ul.nav.nav-tabs.nav-account .nav-link.active,
ul.nav.nav-tabs.nav-account .nav-link[aria-selected="true"],
ul.nav.nav-tabs.nav-account .nav-link.active:hover,
ul.nav.nav-tabs.nav-account .nav-link.active:focus {
  background: #22201c !important;
  background-color: #22201c !important;
  background-image: none !important;
  color: #d7b55e !important;
}

/* Exact live Power Pages SignIn row: local + external account columns. */
.row:has(> .col-md-6 #local-login-heading):has(> .col-md-6 #external-login-heading) {
  display: grid !important;
  grid-template-columns: 340px minmax(350px, 1fr) minmax(290px, .86fr) !important;
  gap: 0 !important;
  width: 100% !important;
  min-height: 560px !important;
  margin: 0 0 3rem !important;
  border: 1px solid rgba(76, 65, 47, .17) !important;
  border-radius: 0 24px 24px 24px !important;
  background: #fffdf9 !important;
  box-shadow: 0 24px 60px rgba(43, 36, 27, .13) !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Branded left-hand welcome panel. */
.row:has(> .col-md-6 #local-login-heading):has(> .col-md-6 #external-login-heading)::before {
  content: "Welcome\A home.";
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: flex !important;
  min-width: 0 !important;
  padding: 235px 38px 170px !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  background-color: #1f1d19 !important;
  background-image:
    url('/GCH Logo White.png'),
    linear-gradient(135deg, rgba(215, 181, 94, .08) 1px, transparent 1px),
    linear-gradient(45deg, rgba(215, 181, 94, .045) 1px, transparent 1px),
    radial-gradient(circle at 18% 10%, rgba(215, 181, 94, .14), transparent 34%) !important;
  background-repeat: no-repeat, repeat, repeat, no-repeat !important;
  background-position: center 58px, 0 0, 0 0, 0 0 !important;
  background-size: 150px auto, 34px 34px, 34px 34px, auto !important;
  color: #d7b55e !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 3.55rem !important;
  font-weight: 500 !important;
  line-height: .98 !important;
  letter-spacing: -.045em !important;
  text-align: center !important;
  white-space: pre-line !important;
  box-sizing: border-box !important;
}

.row:has(> .col-md-6 #local-login-heading):has(> .col-md-6 #external-login-heading)::after {
  content: "Sign in to access your account, saved information, and your personalized Golden Crest journey.";
  position: absolute !important;
  left: 0 !important;
  bottom: 62px !important;
  width: 340px !important;
  padding: 26px 38px 0 !important;
  border-top: 2px solid #d7b55e !important;
  color: rgba(248, 245, 237, .82) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: .96rem !important;
  font-weight: 500 !important;
  line-height: 1.65 !important;
  text-align: center !important;
  box-sizing: border-box !important;
  transform: scaleX(.76) translateX(-16%) !important;
  transform-origin: center top !important;
}

html[lang^="es" i] .row:has(> .col-md-6 #local-login-heading):has(> .col-md-6 #external-login-heading)::before {
  content: "Bienvenido\A a casa.";
  font-size: 3.25rem !important;
}

html[lang^="es" i] .row:has(> .col-md-6 #local-login-heading):has(> .col-md-6 #external-login-heading)::after {
  content: "Inicia sesión para acceder a tu cuenta, información guardada y tu experiencia personalizada con Golden Crest.";
}

.row:has(> .col-md-6 #local-login-heading) > .col-md-6,
.row:has(> .col-md-6 #external-login-heading) > .col-md-6 {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: clamp(2.2rem, 3vw, 3rem) !important;
  border: 0 !important;
  border-left: 1px solid rgba(76, 65, 47, .13) !important;
  background: #fffdf9 !important;
  box-shadow: none !important;
}

.row:has(> .col-md-6 #local-login-heading) > .col-md-6:has(#local-login-heading) {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

.row:has(> .col-md-6 #external-login-heading) > .col-md-6:has(#external-login-heading) {
  grid-column: 3 !important;
  grid-row: 1 !important;
}

#local-login-heading,
#external-login-heading {
  margin: 0 0 1.7rem !important;
  padding: 0 0 .95rem !important;
  border: 0 !important;
  position: relative !important;
  color: #25221d !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(1.35rem, 2vw, 1.65rem) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: -.02em !important;
}

#local-login-heading::after,
#external-login-heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48px;
  height: 2px;
  background: #d7b55e;
}

/* Flatten Bootstrap's nested local-login rows into a modern stacked form. */
form[action*="/SignIn"] .portal-form > .row.mb-3 {
  display: block !important;
  margin: 0 0 1rem !important;
}

form[action*="/SignIn"] .portal-form > .row.mb-3 > label,
form[action*="/SignIn"] .portal-form > .row.mb-3 > [class*="col-"] {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

form[action*="/SignIn"] .portal-form > .row.mb-3 > label {
  display: block !important;
  margin: 0 0 .42rem !important;
  color: #443d33 !important;
  font-size: .87rem !important;
  font-weight: 800 !important;
  text-align: left !important;
}

form[action*="/SignIn"] .form-control {
  width: 100% !important;
  min-height: 50px !important;
  padding: .74rem .9rem !important;
  border: 1px solid #c8bdac !important;
  border-radius: 10px !important;
  background: #fff !important;
  background-image: none !important;
  color: #25221d !important;
  font-size: 1rem !important;
  box-shadow: none !important;
}

form[action*="/SignIn"] .form-control:focus {
  border-color: #9b7728 !important;
  outline: 0 !important;
  box-shadow: 0 0 0 3px rgba(215, 181, 94, .22) !important;
}

form[action*="/SignIn"] .checkbox {
  margin: .25rem 0 .35rem !important;
  color: #625b50 !important;
}

form[action*="/SignIn"] .checkbox label {
  font-weight: 500 !important;
}

form[action*="/SignIn"] .portal-form > .row.mb-3:last-child > [class*="col-"] {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: .65rem !important;
}

#submit-signin-local,
form[action*="/SignIn"] a.btn.btn-default {
  display: inline-flex !important;
  width: 100% !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: .75rem 1.1rem !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: .9rem !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  text-decoration: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  background-image: none !important;
}

#submit-signin-local {
  border: 1px solid #d7b55e !important;
  background: #d7b55e !important;
  background-color: #d7b55e !important;
  color: #1c180f !important;
}

#submit-signin-local:hover,
#submit-signin-local:focus {
  border-color: #e6c979 !important;
  background: #e6c979 !important;
  color: #15120c !important;
}

form[action*="/SignIn"] a.btn.btn-default {
  border: 1px solid #b88b2d !important;
  background: transparent !important;
  color: #805f1c !important;
}

form[action*="/SignIn"] a.btn.btn-default:hover,
form[action*="/SignIn"] a.btn.btn-default:focus {
  background: #f3ead7 !important;
  color: #2a2317 !important;
}

/* The provider button's value is a login.windows.net URL, not the word Azure. */
form[action*="ExternalLogin"] button[name="provider"] {
  display: inline-flex !important;
  width: 100% !important;
  min-height: 50px !important;
  margin: 0 !important;
  padding: .78rem 1.1rem !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #c49535 !important;
  border-radius: 8px !important;
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
  color: #25221d !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: .92rem !important;
  font-weight: 800 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

form[action*="ExternalLogin"] button[name="provider"]:hover,
form[action*="ExternalLogin"] button[name="provider"]:focus {
  border-color: #d7b55e !important;
  background: #faf4e5 !important;
  color: #1c180f !important;
}

#loginValidationSummary:empty,
#loginValidationSummary.validation-summary-valid {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  min-height: 0 !important;
  background: transparent !important;
}

@media (max-width: 1080px) {
  .row:has(> .col-md-6 #local-login-heading):has(> .col-md-6 #external-login-heading) {
    grid-template-columns: 300px minmax(330px, 1fr) minmax(260px, .8fr) !important;
  }

  .row:has(> .col-md-6 #local-login-heading):has(> .col-md-6 #external-login-heading)::after {
    width: 300px !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
}

@media (max-width: 900px) {
  .row:has(> .col-md-6 #local-login-heading):has(> .col-md-6 #external-login-heading) {
    grid-template-columns: 1fr 1fr !important;
    border-radius: 0 20px 20px 20px !important;
  }

  .row:has(> .col-md-6 #local-login-heading):has(> .col-md-6 #external-login-heading)::before {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    min-height: 300px !important;
    padding: 150px 2rem 90px !important;
    background-position: center 30px, 0 0, 0 0, 0 0 !important;
    background-size: 110px auto, 34px 34px, 34px 34px, auto !important;
    font-size: 2.8rem !important;
  }

  .row:has(> .col-md-6 #local-login-heading):has(> .col-md-6 #external-login-heading)::after {
    top: 218px !important;
    bottom: auto !important;
    width: 100% !important;
    padding: 18px 15% 0 !important;
    transform: none !important;
  }

  .row:has(> .col-md-6 #local-login-heading) > .col-md-6:has(#local-login-heading) {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  .row:has(> .col-md-6 #external-login-heading) > .col-md-6:has(#external-login-heading) {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }
}

@media (max-width: 767px) {
  #content-container,
  .page-content > .container,
  .wrapper-body > .container,
  main > .container,
  .container[role="main"],
  .container-fluid[role="main"] {
    width: min(100% - 18px, 1180px) !important;
  }

  ul.nav.nav-tabs.nav-account {
    width: 100% !important;
    margin-top: 1rem !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
  }

  ul.nav.nav-tabs.nav-account > li.nav-item {
    flex: 1 0 auto !important;
  }

  ul.nav.nav-tabs.nav-account .nav-link {
    min-width: 145px !important;
    padding: .85rem .75rem !important;
    white-space: nowrap !important;
  }

  .row:has(> .col-md-6 #local-login-heading):has(> .col-md-6 #external-login-heading) {
    grid-template-columns: 1fr !important;
    border-radius: 0 0 18px 18px !important;
  }

  .row:has(> .col-md-6 #local-login-heading):has(> .col-md-6 #external-login-heading)::before {
    grid-column: 1 !important;
    min-height: 275px !important;
    padding: 135px 1.5rem 85px !important;
    font-size: 2.55rem !important;
  }

  .row:has(> .col-md-6 #local-login-heading):has(> .col-md-6 #external-login-heading)::after {
    top: 198px !important;
    width: 100% !important;
    padding: 16px 10% 0 !important;
    font-size: .88rem !important;
  }

  .row:has(> .col-md-6 #local-login-heading) > .col-md-6:has(#local-login-heading),
  .row:has(> .col-md-6 #external-login-heading) > .col-md-6:has(#external-login-heading) {
    grid-column: 1 !important;
    padding: 1.4rem !important;
    border-left: 0 !important;
    border-top: 1px solid rgba(76, 65, 47, .13) !important;
  }

  .row:has(> .col-md-6 #local-login-heading) > .col-md-6:has(#local-login-heading) {
    grid-row: 2 !important;
  }

  .row:has(> .col-md-6 #external-login-heading) > .col-md-6:has(#external-login-heading) {
    grid-row: 3 !important;
  }
}