/* =============================================================
   home.css  —  Homepage (login) redesign for Royal Ghana Gold
   Linked ONLY from index.php. Every rule is scoped under
   `body.login-page` so no other page can be affected.
   Palette taken from the new logo: gold + deep green + cream.
   ============================================================= */

body.login-page {
  --rgg-gold:      #b8902e;
  --rgg-gold-lt:   #d3ac48;
  --rgg-gold-dk:   #9c7620;
  --rgg-green:     #143d2a;
  --rgg-green-dk:  #0d2a1d;
  --rgg-cream:     #f4edde;
  --rgg-ink:       #2c2517;

  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 22px 16px 170px;

  background:
    radial-gradient(1100px 620px at 50% -12%, rgba(184, 144, 46, 0.20), transparent 60%),
    radial-gradient(900px 500px at 100% 115%, rgba(20, 61, 42, 0.10), transparent 60%),
    linear-gradient(180deg, #f8f2e7 0%, #efe5d2 100%);
  background-attachment: fixed;
}

/* Hide the shared header bar on the login page only.
   (Its Login/Signup links are already available in the form below.) */
body.login-page > header {
  display: none !important;
}

/* -------- Stage that holds logo + card -------- */
body.login-page .container.white-bg {
  max-width: 460px;
  width: 100%;
  margin: 0 auto;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  animation: rggFadeUp 0.6s ease both;
}

/* New logo, rendered above the card via CSS (no markup changes) */
body.login-page .container.white-bg::before {
  content: "";
  display: block;
  width: min(400px, 82vw);
  height: 230px;
  margin: 0 auto 18px;
  background: url("rgg_logo_tr_new.png") center / contain no-repeat;
  filter: drop-shadow(0 8px 16px rgba(20, 61, 42, 0.16));
}

/* Let the card fill the centered stage (override Bootstrap col-md-4 width) */
body.login-page .container.white-bg .row.justify-content-center > [class*="col-"] {
  flex: 0 0 100%;
  max-width: 100%;
}

/* -------- Login card -------- */
body.login-page .box {
  position: relative;
  z-index: 10; /* keep the card above the gold-dust band (e.g. on mobile) */
  overflow: hidden;
  margin-bottom: 0;
  padding: 42px 40px 34px;
  border: 1px solid rgba(184, 144, 46, 0.28);
  border-radius: 18px;
  background: #ffffff;
  box-shadow:
    0 24px 55px -22px rgba(20, 61, 42, 0.40),
    0 6px 16px rgba(0, 0, 0, 0.05);
}

/* Gold accent bar across the top of the card */
body.login-page .box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--rgg-gold-dk), var(--rgg-gold-lt), var(--rgg-gold-dk));
}

/* Heading + injected kicker line */
body.login-page .box h2 {
  margin: 0 0 22px;
  color: var(--rgg-green);
  font-weight: 700;
  letter-spacing: 0.01em;
}
body.login-page .box h2::before {
  content: "Mined Material (Trader) \00B7\00A0Onboarding Portal";
  display: block;
  margin-bottom: 6px;
  color: var(--rgg-gold-dk);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* -------- Form fields -------- */
body.login-page .form-label {
  color: var(--rgg-green);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  margin-bottom: 0.35rem;
}
body.login-page .form-control {
  padding: 0.72rem 0.9rem;
  border: 1px solid #dccfb2;
  border-radius: 10px;
  background: #fffdf8;
  color: var(--rgg-ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
body.login-page .form-control::placeholder { color: #b3a888; }
body.login-page .form-control:focus {
  border-color: var(--rgg-gold);
  box-shadow: 0 0 0 0.2rem rgba(184, 144, 46, 0.22);
  background: #fff;
}

/* -------- Button (full-width gold gradient) -------- */
body.login-page .box .d-flex {
  display: block !important;
}
body.login-page .btn-primary {
  width: 100%;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 10px;
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: linear-gradient(135deg, var(--rgg-gold-lt) 0%, var(--rgg-gold-dk) 100%);
  box-shadow: 0 10px 22px -10px rgba(156, 118, 32, 0.75);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
body.login-page .btn-primary:hover,
body.login-page .btn-primary:focus,
body.login-page .btn-primary:active {
  color: #fff;
  background: linear-gradient(135deg, var(--rgg-gold-lt) 0%, var(--rgg-gold-dk) 100%);
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 14px 26px -10px rgba(156, 118, 32, 0.85);
}

/* -------- Footer links (Forgot / Signup) -------- */
body.login-page .box .mt-3 {
  margin-top: 1.4rem !important;
  text-align: center;
  font-size: 0.9rem;
  color: #8a7b5c;
}
body.login-page .box a {
  color: var(--rgg-green);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s ease;
}
body.login-page .box a:hover {
  color: var(--rgg-gold-dk);
  text-decoration: underline;
}

/* -------- Alerts (success / error) -------- */
body.login-page .alert {
  border-radius: 10px;
  border: none;
  font-size: 0.9rem;
}
body.login-page .alert-success {
  background: #e7f1e9;
  color: var(--rgg-green);
}

/* Compact validation errors so appearing labels don't grow the page into a scrollbar */
body.login-page label.error {
  display: block;
  margin: 3px 0 -2px;
  font-size: 0.78rem;
  line-height: 1.25;
  font-weight: 500;
  color: #c0392b;
}

/* -------- Entrance animation -------- */
@keyframes rggFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* -------- Small screens -------- */
@media (max-width: 480px) {
  body.login-page { padding: 24px 14px 150px; }
  body.login-page .box { padding: 32px 24px 28px; }
  body.login-page .container.white-bg::before { height: 170px; margin-bottom: 22px; }
}

/* -------- Gold-dust footer (generated SVG sprinkle, fixed to bottom) -------- */
body.login-page::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 150px;
  z-index: -1; /* sit behind all content (card, logo) regardless of stacking contexts */
  pointer-events: none;
  background-image:
    url("gold_dust.svg"),
    linear-gradient(to top, rgba(184, 144, 46, 0.16), rgba(184, 144, 46, 0) 90%);
  background-repeat: repeat-x, no-repeat;
  background-position: bottom, bottom;
  background-size: 1600px 150px, 100% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 8%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to top, #000 0%, #000 8%, rgba(0,0,0,0) 100%);
}

/* -------- In-button loading spinner (added on submit by button-loader.js) -------- */
body.login-page .btn-primary.is-loading {
  color: transparent !important;
  opacity: 1 !important;
  pointer-events: none;
  position: relative;
}
body.login-page .btn-primary.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2.5px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: rggBtnSpin 0.7s linear infinite;
}
@keyframes rggBtnSpin { to { transform: rotate(360deg); } }