/* ==========================================================================
   House of Winners — account pages (Deposit / Withdraw)

   Two columns: a narrow account rail and the form panel. Named .hw-acct
   rather than .hw-deposit because Withdraw is the same shell with a
   different form — when that page is redesigned it reuses everything here
   and only swaps the panel contents.

   Font sizes are rem, everything else px — the same split the other
   redesign stylesheets use. Remember css/assets/css/style.css sets
   html{font-size:62.5%}, so 1rem = 10px here: 1.4rem is fourteen pixels,
   not twenty-two. Do not "simplify" these to 1rem.
   ========================================================================== */

.hw-acct{
  max-width:var(--hw-container,1250px);
  margin-inline:auto;
  padding:40px 20px 60px;
  display:grid;
  grid-template-columns:250px minmax(0,1fr);
  gap:20px;
  align-items:start;
}

/* --------------------------------------------------------------------------
   Account rail
   Deposit and Withdraw are separate URLs (member/deposit, member/withdraw),
   so these are links rather than tabs. The active one is marked with
   aria-current, which is also what the styling hooks onto — the state lives
   in the markup's meaning, not in an extra class.
   -------------------------------------------------------------------------- */
.hw-acct__rail{
  background:var(--hw-footer-bg,#171717);
  border-radius:var(--hw-radius,5px);
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.hw-acct__link{
  position:relative;
  display:block;
  padding:14px 16px;
  border-radius:var(--hw-radius,5px);
  color:var(--hw-muted,#B3B3B3);
  text-decoration:none;
  font-size:var(--hw-fs,1.4rem);
  line-height:1;
  transition:color .15s,background .15s;
}
.hw-acct__link:hover,
.hw-acct__link:focus{color:var(--hw-on-surface,#FFF);background:rgba(255,255,255,.04);text-decoration:none;}
.hw-acct__link[aria-current="page"]{
  color:var(--hw-gold,#FACF5A);
  background:linear-gradient(90deg,rgba(250,207,90,.14) 0%,rgba(250,207,90,.05) 100%);
}
/* The gold marker sits on the right edge in the frame, not the left. */
.hw-acct__link[aria-current="page"]::after{
  content:"";
  position:absolute;
  right:0;
  top:8px;
  bottom:8px;
  width:3px;
  border-radius:3px;
  background:var(--hw-gold,#FACF5A);
}

/* --------------------------------------------------------------------------
   Form panel
   -------------------------------------------------------------------------- */
.hw-acct__panel{
  background:var(--hw-footer-bg,#171717);
  border-radius:var(--hw-radius,5px);
  padding:30px;
}

/* One rhythm, two steps: 20px between fields, 10px inside one. Everything
   that sits under a label — control, chips — uses the same 10px, so the
   groups read as blocks without a third spacing value to remember. */
.hw-form{display:flex;flex-direction:column;gap:20px;}
.hw-field{display:flex;flex-direction:column;gap:10px;min-width:0;}
.hw-field__label{
  font-size:1.4rem;
  line-height:1.2;
  color:var(--hw-on-surface,#FFF);
  letter-spacing:.01em;
  margin:0;
}
.hw-field__req{color:#E53E3E;}

/* --------------------------------------------------------------------------
   Main wallet card (withdraw page)
   Present in the mobile frame only — hidden on desktop, shown in the mobile
   block below. A grid item on desktop, so display:none keeps the rail/panel
   two-column layout intact.
   -------------------------------------------------------------------------- */
.hw-wallet-card{
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:14px 20px;
  background:var(--hw-footer-bg,#171717);
  border-radius:6px;
}
.hw-wallet-card__info{display:flex;flex-direction:column;gap:2px;min-width:0;}
.hw-wallet-card__label{font-size:1.4rem;line-height:1.15;color:var(--hw-on-surface,#FFF);letter-spacing:.01em;}
.hw-wallet-card__amount{font-size:2rem;line-height:1.15;font-weight:700;color:var(--hw-gold,#FACF5A);letter-spacing:.01em;}
.hw-wallet-card__refresh{
  flex:none;
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:6px 10px;
  border:1px solid var(--hw-gold-line,#9F853F);
  border-radius:4px;
  color:var(--hw-gold,#FACF5A);
  font-size:1.2rem;
  line-height:1;
  letter-spacing:.01em;
  text-decoration:none;
  transition:border-color .15s,background .15s;
}
.hw-wallet-card__refresh svg{width:16px;height:16px;}
.hw-wallet-card__refresh:hover{border-color:var(--hw-gold,#FACF5A);background:rgba(250,207,90,.06);text-decoration:none;}
.hw-wallet-card__refresh:focus-visible{outline:2px solid var(--hw-focus,#FACF5A);outline-offset:2px;}

/* --------------------------------------------------------------------------
   Deposit options
   Radios, not buttons: exactly one of the set, and the value must reach the
   POST. The input is transparent and stretched over the face rather than
   hidden with display:none, so it stays focusable and keyboard arrow-key
   selection works with no JS.
   -------------------------------------------------------------------------- */
.hw-options{display:flex;flex-wrap:wrap;gap:12px;}
.hw-options__item{position:relative;}

.hw-options__input{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  opacity:0;
  cursor:pointer;
  z-index:1;
}

/* pointer-events:none so clicks land on the input stacked above it. */
/* Both axes centred. align-items alone only handles the vertical — without
   justify-content the icon and label sit left and min-width dumps all the
   slack on the right, which reads as mis-set rather than deliberate. */
.hw-options__face{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-width:145px;
  padding:14px 18px;
  border:1px solid var(--hw-rule,#4D4E4C);
  border-radius:var(--hw-radius,5px);
  color:var(--hw-on-surface,#FFF);
  font-size:var(--hw-fs,1.4rem);
  line-height:1;
  white-space:nowrap;
  pointer-events:none;
  transition:border-color .15s,background .15s,color .15s;
  margin:0;
}
.hw-options__face svg{width:18px;height:18px;flex:none;}

.hw-options__input:hover + .hw-options__face{border-color:var(--hw-gold-line,#9F853F);}
.hw-options__input:checked + .hw-options__face{
  border-color:var(--hw-gold,#FACF5A);
  color:var(--hw-gold,#FACF5A);
  background:linear-gradient(180deg,rgba(250,207,90,.26) 0%,rgba(250,207,90,.06) 100%);
}
.hw-options__input:focus-visible + .hw-options__face{
  outline:2px solid var(--hw-focus,#FACF5A);
  outline-offset:2px;
}

/* --------------------------------------------------------------------------
   Controls
   One shared skin for select and input so the two can never drift. The
   chevron is a background image rather than an overlaid element, which keeps
   the select a single focusable box.

   The !important on a few properties is not decoration — the legacy theme's
   .form-control rules in css/assets/css/style.css are more specific than a
   single class and would otherwise repaint the border and background.
   -------------------------------------------------------------------------- */
.hw-control{
  width:100%;
  height:48px;
  padding:0 16px;
  background:transparent !important;
  border:1px solid var(--hw-rule,#4D4E4C) !important;
  border-radius:var(--hw-radius,5px);
  color:var(--hw-on-surface,#FFF) !important;
  font-family:var(--hw-font,Arial,Helvetica,sans-serif);
  font-size:var(--hw-fs,1.4rem);
  /* Height + zero vertical padding centres the text. Never add vertical
     padding here — with border-box it eats the content box and clips the
     value. line-height:normal guards against the legacy theme's inherited
     line-height doing the same. */
  line-height:normal;
  box-shadow:none;
  transition:border-color .15s;
}
.hw-control::placeholder{color:var(--hw-muted,#B3B3B3);opacity:1;}
.hw-control:hover{border-color:var(--hw-gold-line,#9F853F) !important;}
.hw-control:focus{outline:none;border-color:var(--hw-gold,#FACF5A) !important;box-shadow:none;}

/* Read-only fields — the withdrawal bank is fixed to the member's registered
   account (ecommerce_deposit.php reads it from the customer record, not the
   form), so it is shown disabled rather than as a live control. Dimmed and
   no hover, so it reads as informational, not interactive. */
.hw-control:disabled,
.hw-control[readonly]{
  color:var(--hw-muted,#B3B3B3) !important;
  cursor:not-allowed;
  opacity:1;
}
.hw-control:disabled:hover,
.hw-control[readonly]:hover{border-color:var(--hw-rule,#4D4E4C) !important;}

/* Small note under a field — e.g. "change this on your profile". */
.hw-field__note{
  font-size:1.2rem;
  line-height:1.4;
  color:var(--hw-muted,#B3B3B3);
  margin:0;
}
.hw-field__note a{color:var(--hw-gold,#FACF5A);text-decoration:none;}
.hw-field__note a:hover{text-decoration:underline;}

select.hw-control{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%23FEFEFE' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right 16px center !important;
}
/* Options render in the OS dropdown, which does not inherit the dark panel —
   set them explicitly or they come out black-on-black on Windows. */
select.hw-control option{background:var(--hw-surface,#121212);color:var(--hw-on-surface,#FFF);}

/* Native file inputs cannot be skinned; only the box is themed and the
   button half is left to the browser. */
input[type=file].hw-control{height:auto;padding:12px 16px;color:var(--hw-muted,#B3B3B3) !important;}

/* --------------------------------------------------------------------------
   Amount quick-picks
   A convenience that writes into the amount input — not a separate value, and
   nothing is posted from here. type="button" keeps them from submitting.
   -------------------------------------------------------------------------- */
.hw-chips{display:flex;flex-wrap:wrap;gap:10px;}
.hw-chip{
  min-width:56px;
  padding:8px 14px;
  background:transparent;
  border:1px solid var(--hw-rule,#4D4E4C);
  border-radius:var(--hw-radius,5px);
  color:var(--hw-on-surface,#FFF);
  font-family:var(--hw-font,Arial,Helvetica,sans-serif);
  font-size:1.3rem;
  line-height:1.2;
  cursor:pointer;
  transition:border-color .15s,background .15s,color .15s;
}
.hw-chip:hover{border-color:var(--hw-gold,#FACF5A);}
.hw-chip[aria-pressed="true"]{
  background:var(--hw-gold,#FACF5A);
  border-color:var(--hw-gold,#FACF5A);
  color:#000;
  font-weight:700;
}
.hw-chip:focus-visible{outline:2px solid var(--hw-focus,#FACF5A);outline-offset:2px;}

/* --------------------------------------------------------------------------
   Submit
   -------------------------------------------------------------------------- */
.hw-submit{
  align-self:flex-start;
  min-width:128px;
  padding:14px 28px;
  background:var(--hw-gold-gradient,linear-gradient(180deg,#CD932C 0%,#F3C961 50%,#EFCF35 75%,#C49616 100%));
  border:0;
  border-radius:var(--hw-radius,5px);
  color:#000;
  font-family:var(--hw-font,Arial,Helvetica,sans-serif);
  font-size:var(--hw-fs-btn,1.4rem);
  font-weight:700;
  line-height:1;
  cursor:pointer;
}
.hw-submit:hover{filter:brightness(1.06);}
.hw-submit:focus-visible{outline:2px solid var(--hw-focus,#FACF5A);outline-offset:3px;}

/* The theme's notice markup, re-skinned so a validation message coming back
   from set_notice_frontend() does not land as unstyled white-on-white. */
.hw-acct .alert{
  margin:0;
  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-size:1.3rem;
  line-height:1.5;
}

.hw-acct [hidden]{display:none !important;}

/* --------------------------------------------------------------------------
   Tablet — INVENTED. No frame exists between 768 and the 1440 desktop one.
   The rail has nothing left to justify its own column, so it becomes a row of
   tabs above the panel and the active marker moves to the bottom edge.
   -------------------------------------------------------------------------- */
@media (max-width:1024px) and (min-width:768px){
  .hw-acct{grid-template-columns:1fr;padding:30px 16px;}
  .hw-acct__rail{flex-direction:row;gap:8px;padding:8px;}
  .hw-acct__link{flex:1;text-align:center;}
  .hw-acct__link[aria-current="page"]::after{
    right:8px;left:8px;top:auto;bottom:0;width:auto;height:3px;
  }
}

/* ==========================================================================
   MOBILE — from the mobile Figma (393px frame)

   Breakpoint matches the header's own mobile switch at 767px, so the page and
   its header change over together.

   The frame has no account rail. That is not an omission: at this width the
   header hides the account cluster (css/header.css:377) because Deposit and
   Withdrawal move into the off-canvas side menu (footer.php:334-336). So the
   rail is hidden rather than reflowed, and navigation is not lost.

   Note the borders here are gold (#9F853F) where the desktop frame's are
   neutral grey. Both are as drawn in their own frame — this is a real
   difference between the two, not a porting slip.
   ========================================================================== */
@media (max-width:767px){
  /* The frame's own margins are 9px page / 8px panel — literal, and far too
     tight once real text sits in the boxes. Opened up to 12/16, which reads
     the same at a glance and stops the controls touching the panel edge. */
  .hw-acct{
    display:block;
    padding:16px 12px;
  }

  .hw-acct__rail{display:none;}

  /* Wallet card appears here, stacked above the form panel. */
  .hw-wallet-card{display:flex;margin-bottom:15px;}

  .hw-acct__panel{
    padding:20px 16px;
    border-radius:6px;
  }

  .hw-form{gap:18px;}
  .hw-field{gap:8px;}
  .hw-field__label{font-size:1.4rem;line-height:16px;letter-spacing:.01em;}

  /* Options — 40px tall, sharing the row. The frame draws three at a fixed
     115px; with QR dropped the two remaining stretch to fill instead of
     leaving a gap at the right. */
  .hw-options{gap:6px;}
  .hw-options__item{flex:1 1 0;min-width:0;}
  .hw-options__face{
    min-width:0;
    width:100%;
    height:40px;
    padding:5px 10px;
    gap:6px;
    border-radius:6px;
    border-color:var(--hw-gold-line,#9F853F);
    font-size:1.2rem;
    line-height:14px;
    letter-spacing:.01em;
  }
  .hw-options__face svg{width:20px;height:20px;}

  /* The selected option is lit from within rather than tinted flat. */
  .hw-options__input:checked + .hw-options__face{
    background:var(--hw-surface,#121212);
    border-color:var(--hw-gold,#FACF5A);
    box-shadow:inset 0 0 40px rgba(250,207,90,.4);
  }

  /* Vertical padding must stay 0. The frame's 16px top/bottom inside a 50px
     box leaves ~16px of content for 14px text once border-box is applied
     (bootstrap sets it globally) and the text clips. Height plus zero vertical
     padding centres it instead. */
  .hw-control{
    height:50px;
    padding:0 16px;
    border-radius:6px;
    border-color:var(--hw-gold-line,#9F853F) !important;
    font-size:1.4rem;
    line-height:normal;
    letter-spacing:.01em;
  }
  /* Gold chevron on mobile, to match the gold field border. */
  select.hw-control{
    padding-right:44px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%23FACF5A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-position:right 16px center !important;
  }
  input[type=file].hw-control{height:auto;padding:13px 16px;}

  /* Chips — 30px tall, gradient fill when picked. */
  .hw-chips{gap:8px;margin-top:0;}
  /* Share the row evenly rather than sitting at their natural widths — five
     chips at their frame widths leave a ragged gap at the right. */
  .hw-chip{
    flex:1 1 0;
    min-width:0;
    height:30px;
    padding:8px 6px;
    border-radius:4px;
    border-color:var(--hw-gold-line,#9F853F);
    font-size:1.2rem;
    line-height:14px;
    letter-spacing:.01em;
  }
  .hw-chip[aria-pressed="true"]{
    background:var(--hw-gold-gradient,linear-gradient(180deg,#CD932C 0%,#F3C961 50%,#EFCF35 75%,#C49616 100%));
    border-color:transparent;
    font-weight:500;
  }

  /* Centred on mobile, left-aligned on desktop. */
  .hw-submit{
    align-self:center;
    width:128px;
    min-width:0;
    height:46px;
    padding:10px 34px;
    border-radius:6px;
    letter-spacing:.01em;
  }
}