/* ==========================================================================
   House of Winners — legacy page shell (floor)

   The counterpart to css/modal.css: that file dark-skins every Bootstrap modal,
   this one dark-skins the theme's white form-page shell
   (.login-page > .form-box > .form-tab > .nav-pills title > .form-group), which
   is what the pages nobody has redesigned yet are still built from.

   Live customer today: member/referral/bonus|commission|target
   (member_referral_detail_view.php) — the no-JS fallback behind the referral
   claim modals. member_payment_m3pay_view.php uses the same shell.

   Scope: `.main > .login-page` and `.main > .container > .form-box` only. Both
   anchors are provably outside any modal (the modals in that view are siblings
   of .login-page, not descendants), so nothing here can reach modal markup and
   fight modal.css. It is still listed before 'modal' in the $hwRedesignCss
   array in views/header.php, so on any tie modal.css wins.

   This is a floor, not a redesign: it makes the page read as part of the dark
   gold system. A page that gets its own Figma frame should move to hw- markup
   and drop out of here.

   Reminder: css/assets/css/style.css sets html{font-size:62.5%}, so 1rem =
   10px. rem for type, px for structure.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page band. style.css paints .bg-image with a background image and .bg-overlay
   lays a light scrim over it; both read as a grey box on the black page.
   -------------------------------------------------------------------------- */
.main > .login-page{
  background:var(--hw-page-bg,#000) none;
  padding:40px 20px 90px;
}
.main > .login-page::before,
.main > .login-page::after{display:none;}

/* Card — same flat #171717 at 6px as .hw-auth__card / .hw-dash__card. */
.main > .login-page .form-box,
.main > .container > .form-box{
  max-width:560px;
  margin:0 auto;
  padding:30px;
  background:var(--hw-footer-bg,#171717);
  border-radius:6px;
  box-shadow:none;
}
.main > .login-page .form-tab,
.main > .login-page .tab-content,
.main > .login-page .tab-pane{
  background:transparent;
  padding:0;
  color:var(--hw-on-surface,#FFF);
}

/* Title. The markup is <p class="nav-link active"> inside .nav-pills — a tab
   strip standing in for a heading. style.css:14758 styles it as
   `.form-tab .nav.nav-pills .nav-link` (0,4,0) in #333 with an #ebebeb
   underline, so the selector below is deliberately long enough to outrank it. */
.main > .login-page .form-tab .nav.nav-pills{
  margin-bottom:22px;
  border-bottom:1px solid var(--hw-rule,#4D4E4C);
}
.main > .login-page .form-tab .nav.nav-pills .nav-link{
  padding:0 0 14px;
  background:transparent;
  border-bottom:0;
  color:var(--hw-gold,#FACF5A);
  font-family:var(--hw-font);font-size:1.8rem;font-weight:700;letter-spacing:.02em;
}

/* --------------------------------------------------------------------------
   Fields — the .hw-dash__input / .hw-auth .form-control shell.
   -------------------------------------------------------------------------- */
.main > .login-page .form-group{margin-bottom:16px;}
.main > .login-page .form-group label{
  display:block;margin-bottom:4px;
  font-family:var(--hw-font);font-size:1.4rem;font-weight:400;letter-spacing:.01em;
  color:var(--hw-on-surface,#FFF);
}
.main > .login-page .form-control{
  display:block;width:100%;height:50px;padding:0 24px;
  background:transparent;
  border:1px solid var(--hw-gold-line,#9F853F);
  border-radius:6px;
  color:var(--hw-on-surface,#FFF);
  font-family:var(--hw-font);font-size:1.4rem;letter-spacing:.01em;line-height:1.3;
  color-scheme:dark;
}
.main > .login-page .form-control:focus{outline:none;border-color:var(--hw-gold,#FACF5A);box-shadow:none;}
.main > .login-page .form-control[readonly]{color:var(--hw-muted,#B3B3B3);}
/* Native chevron swapped for the gold SVG, as in auth.css / dashboard.css. The
   :not() guards match the theme's own select rule so the height holds at 50px. */
.main > .login-page select.form-control:not([size]):not([multiple]){
  height:50px;padding:0 44px 0 24px;line-height:1;
  -webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23FACF5A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 20px center;background-size:14px;
}
.main > .login-page select.form-control option{background:var(--hw-footer-bg,#171717);color:var(--hw-on-surface,#FFF);}

/* QR thumbnail — .img-thumbnail is a white-bordered white box; the QR itself
   still needs a white plate to stay scannable. */
.main > .login-page .img-thumbnail{
  max-width:180px;padding:6px;
  background:#fff;
  border:1px solid var(--hw-gold-line,#9F853F);
  border-radius:8px;
}

/* --------------------------------------------------------------------------
   Buttons. .btn-outline-primary-2 is the primary action (Submit), .btn-login
   the secondary row (Back / Terms / Promotion Info), .btn-outline-primary the
   mission chips.
   -------------------------------------------------------------------------- */
.main > .login-page .form-footer{margin-top:24px;padding:0;border:0;}
.main > .login-page .btn-outline-primary-2{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;height:50px;padding:10px 24px;
  border:0;border-radius:6px;
  background:var(--hw-gold-gradient,linear-gradient(180deg,#CD932C 0%,#F3C961 50%,#EFCF35 75%,#C49616 100%));
  color:#000;
  font-family:var(--hw-font);font-size:1.6rem;font-weight:700;letter-spacing:.01em;
}
.main > .login-page .btn-outline-primary-2:hover:not(:disabled){filter:brightness(1.05);background:var(--hw-gold-gradient,linear-gradient(180deg,#CD932C 0%,#F3C961 50%,#EFCF35 75%,#C49616 100%));color:#000;}
.main > .login-page .btn-outline-primary-2:disabled{opacity:.7;}
.main > .login-page .btn-outline-primary-2 .spinner-border{width:1.8rem;height:1.8rem;border-width:.2rem;}

.main > .login-page .btn-login,
.main > .login-page .btn-outline-primary{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:46px;padding:10px 18px;
  background:transparent;
  border:1px solid var(--hw-gold-line,#9F853F);border-radius:6px;
  color:var(--hw-gold,#FACF5A);
  font-family:var(--hw-font);font-size:1.4rem;font-weight:700;letter-spacing:.01em;
  text-decoration:none;
}
.main > .login-page .btn-login:hover,
.main > .login-page .btn-outline-primary:hover{
  background:rgba(250,207,90,.08);border-color:var(--hw-gold,#FACF5A);
  color:var(--hw-gold,#FACF5A);text-decoration:none;
}
.main > .login-page .form-choice{margin-top:18px;padding:0;}
.main > .login-page .form-choice .col-sm-6,
.main > .login-page .form-choice .col-sm-12{margin-bottom:10px;}

/* --------------------------------------------------------------------------
   Mission ladder (the /target variant) — vertical .nav-tabs plus body copy.
   -------------------------------------------------------------------------- */
.main > .login-page .nav-tabs{border-color:var(--hw-rule,#4D4E4C);}
.main > .login-page .nav-tabs .nav-link{
  background:transparent;border:0;
  color:var(--hw-muted,#B3B3B3);
  font-family:var(--hw-font);font-size:1.4rem;font-weight:700;
}
.main > .login-page .nav-tabs .nav-link.active{color:var(--hw-gold,#FACF5A);}
.main > .login-page .tab-content-border{border-color:var(--hw-rule,#4D4E4C);}
.main > .login-page h4.title{
  color:var(--hw-gold,#FACF5A);
  font-family:var(--hw-font);font-size:1.5rem;font-weight:700;
}
.main > .login-page p{color:var(--hw-on-surface,#FFF);font-family:var(--hw-font);font-size:1.4rem;}

/* --------------------------------------------------------------------------
   Flash + validation messages — identical to the .hw-auth / .hw-dash alerts.
   -------------------------------------------------------------------------- */
.main > .login-page .alert{
  position:relative;margin:0 0 18px;padding:12px 16px;
  border:1px solid var(--hw-gold-line,#9F853F);border-radius:var(--hw-radius,5px);
  background:rgba(250,207,90,.06);color:var(--hw-gold-mid,#F3C961);
  font-family:var(--hw-font);font-size:1.3rem;line-height:1.5;
}
.main > .login-page .alert-danger{border-color:rgba(255,107,122,.5);background:rgba(255,107,122,.08);color:var(--hw-danger,#FF6B7A);}
.main > .login-page .alert-success{border-color:rgba(143,209,143,.5);background:rgba(143,209,143,.08);color:var(--hw-success,#8FD18F);}
.main > .login-page label.error{
  display:block;margin:2px 0 0;
  font-family:var(--hw-font);font-size:1.2rem;font-weight:400;
  color:var(--hw-danger,#FF6B7A);
}
/* The JS toggles .hide on the alerts and the spinner. */
.main > .login-page .hide{display:none !important;}

@media (max-width:767px){
  .main > .login-page{padding:24px 12px 60px;}
  .main > .login-page .form-box,
  .main > .container > .form-box{padding:20px 16px;}
}