/* ==========================================================================
   House of Winners — auth pages (login / register)

   Re-skins the legacy Molla auth forms (member/login, register) into the
   redesign's dark/gold system. Styling is deliberately kept identical to the
   account forms in css/dashboard.css (.hw-dash__card / .hw-dash__input /
   .hw-dash__select / .hw-dash__save — the Change Password / Bank Info / History
   pages) so the auth pages read as the same family: a flat #171717 card at a
   6px radius (no border, no glow), transparent 50px controls with a gold focus
   border, light normal-case labels, the #FFF8A2->#C49616 title gradient, and a
   gold-gradient submit. The layout (centred card, two-column register grid) is
   unchanged; only the surface styling is aligned.

   The markup keeps every id/name/class the validator + AJAX in
   css/assets/js/home-default.js depend on (#login-form, #register-form,
   #username, #password, #prefix_number, the #x-error hidden inputs,
   .spinner-border, .form-control, .hide, ...). This file only restyles; it
   changes no behaviour.

   Reminder: css/assets/css/style.css sets html{font-size:62.5%}, so 1rem =
   10px here. rem for type, px for structure — same split as the other redesign
   stylesheets. Do not "simplify" 1.4rem to 1rem (that renders 10px).
   ========================================================================== */

.hw-auth{
  background:var(--hw-page-bg,#000);
  padding:40px 20px 90px;
}

/* Card panel — flat #171717 at a 6px radius, matching .hw-dash__card. No border
   or glow (that was the referral-modal look, which read as "different"). Width
   is tuned per page: login is a single narrow column; register is wider to hold
   its two-column grid. */
.hw-auth__card{
  margin:0 auto;
  padding:30px;
  background:var(--hw-footer-bg,#171717);
  border-radius:6px;
}
.hw-auth--login .hw-auth__card{max-width:460px;}
.hw-auth--register .hw-auth__card{max-width:760px;}

/* Title — the account-page gold gradient (#FFF8A2 -> #C49616), same as
   .hw-dash__name / .hw-gid__title. Centred to suit the centred card. */
.hw-auth__title{
  margin:0 0 24px;
  text-align:center;
  font-family:var(--hw-font);
  font-size:4rem;               /* 40px */
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.05em;
  text-transform:uppercase;
  background:linear-gradient(180deg,#FFF8A2 16.58%,#C49616 82.61%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* --------------------------------------------------------------------------
   Form controls — mirror .hw-dash__group / .hw-dash__input / .hw-dash__select.
   The register grid is two columns on desktop; each .hw-auth__group is a cell
   and --full spans the row. Login forces a single column.
   -------------------------------------------------------------------------- */
.hw-auth__grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px 20px;
}
.hw-auth--login .hw-auth__grid{grid-template-columns:1fr;}
.hw-auth__group{display:flex;flex-direction:column;gap:4px;min-width:0;margin:0;}
.hw-auth__group--full{grid-column:1 / -1;}

/* Labels — light weight, normal case, like .hw-dash__field-label. */
.hw-auth__label{
  font-family:var(--hw-font);font-size:1.4rem;font-weight:400;line-height:16px;
  letter-spacing:.01em;color:var(--hw-on-surface,#FFF);
}

/* Inputs / selects — keep the legacy .form-control class (the validator's
   .error toggle + any plugin expect it) but restyle it to the .hw-dash__input
   shell: transparent fill, gold hairline, 6px radius, 50px tall, gold focus
   border (no glow). color-scheme:dark renders the native date picker dark. */
.hw-auth .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;
  transition:border-color .15s;
}
.hw-auth .form-control::placeholder{color:rgba(255,255,255,.55);}
.hw-auth .form-control:focus{outline:none;border-color:var(--hw-gold,#FACF5A);}

/* Select — same shell, native chevron swapped for the gold SVG used in
   .hw-dash__select. The :not() guards match (and outrank) the theme's
   `select.form-control:not([size]):not([multiple]){height:40px}` in
   style.css:9537, which would otherwise pin selects to 40px while the text
   inputs stay 50px — so height is restated here to hold the two equal. */
.hw-auth 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;
}
.hw-auth select.form-control option{background:var(--hw-footer-bg,#171717);color:var(--hw-on-surface,#FFF);}

/* Date — white text + a gold-tinted native picker glyph, as in css/dashboard.css. */
.hw-auth .form-control[type="date"]{color:var(--hw-on-surface,#FFF);}
.hw-auth .form-control[type="date"]::-webkit-calendar-picker-indicator{
  cursor:pointer;
  filter:invert(72%) sepia(55%) saturate(560%) hue-rotate(358deg) brightness(101%) contrast(96%);
}

/* Phone prefix + number row (register): a fixed-width prefix select beside the
   number input. Replaces the legacy .row/.col-4 so bootstrap's negative gutter
   margins can't push against the card padding. */
.hw-auth__phone{display:flex;flex-wrap:wrap;gap:10px;}
.hw-auth__phone-prefix{flex:0 0 130px;}
.hw-auth__phone-number{flex:1;min-width:0;}
/* The validator drops its <label class="error"> after #phoneno, i.e. inside
   this flex row — force it onto its own full-width line below the inputs. */
.hw-auth__phone label.error{flex:0 0 100%;margin-top:0;}

/* --------------------------------------------------------------------------
   Submit — gold-gradient button, black label, matching .hw-dash__save but kept
   full-width (login convention, part of the existing layout).
   -------------------------------------------------------------------------- */
.hw-auth__submit{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;height:50px;margin-top:24px;
  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;
  cursor:pointer;transition:filter .15s;
}
.hw-auth__submit:hover{filter:brightness(1.05);}
.hw-auth__submit:disabled{opacity:.7;cursor:not-allowed;}
.hw-auth__submit .icon-long-arrow-right{font-size:1.6rem;}
/* Bootstrap spinner sits on the gold fill; inherits the dark label colour. */
.hw-auth__submit .spinner-border{width:1.8rem;height:1.8rem;border-width:.2rem;}

/* --------------------------------------------------------------------------
   Remember me
   -------------------------------------------------------------------------- */
.hw-auth__remember{
  display:flex;align-items:center;gap:10px;margin-top:16px;
  font-family:var(--hw-font);font-size:1.4rem;color:var(--hw-on-surface,#FFF);
  cursor:pointer;user-select:none;
}
.hw-auth__remember input{
  width:18px;height:18px;margin:0;accent-color:var(--hw-gold,#FACF5A);cursor:pointer;
}

/* --------------------------------------------------------------------------
   OR divider + secondary (outlined gold) links
   -------------------------------------------------------------------------- */
.hw-auth__or{
  display:flex;align-items:center;gap:16px;
  margin:24px 0 18px;
  font-family:var(--hw-font);font-size:1.3rem;font-weight:400;
  letter-spacing:.08em;text-transform:uppercase;color:var(--hw-muted,#B3B3B3);
}
.hw-auth__or::before,.hw-auth__or::after{
  content:"";flex:1;height:1px;background:var(--hw-rule,#4D4E4C);
}
/* Stacked, not side by side. Two columns inside the 460px card gave each link
   193px, and "Register As A New Member" needs about 200px at 14px/700 — so
   every label wrapped to two lines and the buttons grew to 74px with the icon
   floating against the middle of a two-line block. Full width fits each label
   on one line and keeps the buttons the same height as the rest of the form. */
.hw-auth__alts{display:grid;grid-template-columns:1fr;gap:12px;}
.hw-auth__alt{
  display:flex;align-items:center;justify-content:center;gap:10px;
  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-align:center;text-decoration:none;transition:background .15s,border-color .15s;
}
.hw-auth__alt:hover,.hw-auth__alt:focus{
  background:rgba(250,207,90,.08);border-color:var(--hw-gold,#FACF5A);
  color:var(--hw-gold,#FACF5A);text-decoration:none;
}
/* flex-shrink:0 so the glyph keeps its size if a translated label runs long. */
.hw-auth__alt-icon{
  flex:0 0 auto;
  width:18px;height:18px;
  display:block;
}
.hw-auth__alt i{font-size:1.6rem;line-height:1;}

/* --------------------------------------------------------------------------
   Pieces login/register don't use, added for the forgot-password / account
   verification page (validation_view) and the status pages that share this
   card — body copy, a side-by-side action row, an outlined ghost button
   (Resend / the disabled countdown) and a centred figure.
   -------------------------------------------------------------------------- */
.hw-auth__text{
  margin:0 0 18px;
  font-family:var(--hw-font);font-size:1.4rem;line-height:1.6;
  color:var(--hw-muted,#B3B3B3);
}
.hw-auth__lead{
  margin:0 0 8px;
  font-family:var(--hw-font);font-size:1.8rem;font-weight:700;line-height:1.4;
  color:var(--hw-gold-mid,#F3C961);
}

/* Confirm + Resend on one line. The submit keeps its own height; the row owns
   the top margin so the two buttons stay aligned. */
.hw-auth__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px;}
.hw-auth__actions .hw-auth__submit,
.hw-auth__actions .hw-auth__ghost{margin-top:0;flex:1 1 0;min-width:140px;}

/* Outlined gold button — the .hw-auth__alt look as a <button>, so the theme's
   .btn rules don't paint it. */
.hw-auth__ghost{
  display:flex;align-items:center;justify-content:center;gap:10px;
  height:50px;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;
  cursor:pointer;transition:background .15s,border-color .15s;
}
.hw-auth__ghost:hover:not(:disabled){background:rgba(250,207,90,.08);border-color:var(--hw-gold,#FACF5A);}
.hw-auth__ghost:disabled{opacity:.55;cursor:not-allowed;}
/* Countdown ("Resend OTP in 8") — reads as status, not as an action. */
.hw-auth__ghost--muted{
  width:100%;margin-top:12px;
  border-style:dashed;border-color:var(--hw-rule,#4D4E4C);color:var(--hw-muted,#B3B3B3);
}

/* Status pages (404, withdrawal submitted, payment result, gateway hand-off)
   reuse this card so they read as the same family. */
.hw-auth--status .hw-auth__card{max-width:520px;text-align:center;}
.hw-auth--status .hw-auth__title{font-size:3.2rem;}
.hw-auth__figure{margin:0 0 20px;}
.hw-auth__figure img{display:block;margin:0 auto;max-width:200px;height:auto;}

/* --------------------------------------------------------------------------
   Server flash (get_notice_frontend) + validation messages — identical to the
   .hw-dash alert skin.
   -------------------------------------------------------------------------- */
.hw-auth .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;
}
.hw-auth .alert-danger{border-color:rgba(255,107,122,.5);background:rgba(255,107,122,.08);color:var(--hw-danger,#FF6B7A);}
.hw-auth .alert-success{border-color:rgba(143,209,143,.5);background:rgba(143,209,143,.08);color:var(--hw-success,#8FD18F);}

/* .hide is toggled by the JS on #login-error / #register-error / the spinner;
   keep it authoritative over the new display rules above. */
.hw-auth .hide{display:none !important;}

/* jQuery Validation injects <label class="error"> after each field and adds
   .error to the control itself. */
.hw-auth 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);text-transform:none;letter-spacing:0;
}
.hw-auth .form-control.error{border-color:var(--hw-danger,#FF6B7A);}

/* --------------------------------------------------------------------------
   Responsive — collapse the register grid + the twin secondary buttons.
   767px flips with the header's own mobile switch, as in the other redesigns.
   -------------------------------------------------------------------------- */
@media (max-width:767px){
  .hw-auth{padding:24px 12px 60px;}
  .hw-auth__card{padding:20px 16px;}
  .hw-auth__title{font-size:3.2rem;margin-bottom:20px;}
  .hw-auth__grid{grid-template-columns:1fr;gap:16px;}
  .hw-auth__alts{grid-template-columns:1fr;}
}