/* ==========================================================================
   House of Winners — floating Contact Us widget
   Replaces the legacy .side_qr panel. Scoped under .hw-contact so the old
   .side_qr rules still sitting in style-v4.css cannot reach it.

   Geometry is the Figma frame: 40px gold tab + 170px black panel = 210px.
   The panel parks off-screen and slides in; the tab is the only part that
   ever shows at rest.
   ========================================================================== */

.hw-contact{
  --hw-contact-tab:40px;
  --hw-contact-panel:170px;

  position:fixed;
  right:0;
  top:50%;
  transform:translateY(-50%);
  z-index:940;                  /* under the nav, over page content */
  display:flex;
  align-items:stretch;
  font-family:var(--hw-font,Arial,sans-serif);
  /* The container is 210px wide even at rest (the panel is only moved by
     transform), so leaving it hit-testable made a big invisible strip that
     popped the panel open. Only the tab and panel take pointer events. */
  pointer-events:none;
}
.hw-contact__tab,
.hw-contact__panel{
  pointer-events:auto;
}

/* Slides the whole widget right by the panel width so only the tab shows.
   Animating the container (not the panel) keeps the tab glued to the panel
   edge, which is what the Figma composition assumes. */
.hw-contact__shell{
  display:flex;
  align-items:flex-start;   /* tab is a fixed-length handle, like the old
                               .qr_button — it does not track panel height */
  transform:translateX(var(--hw-contact-panel));
  transition:transform .35s ease;
}
.hw-contact:hover .hw-contact__shell,
.hw-contact:focus-within .hw-contact__shell,
.hw-contact.is-open .hw-contact__shell{
  transform:translateX(0);
}

/* --- Vertical tab ------------------------------------------------------- */
.hw-contact__tab{
  position:relative;
  flex:0 0 var(--hw-contact-tab);
  width:var(--hw-contact-tab);
  height:200px;             /* Figma; the label needs ~150px of it */
  box-sizing:border-box;
  /* <button> — legacy style.css paints buttons, so reset explicitly. */
  -webkit-appearance:none;
  appearance:none;
  margin:0;
  padding:0;
  font:inherit;
  /* --hw-gold-gradient is 180deg. The Figma button is rotated -90deg, which
     turns its top-to-bottom ramp into left-to-right — hence 90deg here. */
  background:linear-gradient(90deg,#CD932C 0%,#F3C961 50%,#EFCF35 75%,#C49616 100%);
  border:2px solid #F8CD59;
  border-right:0;
  /* Figma's 16px 16px 0 0 on the pre-rotation box lands on the left edge. */
  border-radius:16px 0 0 16px;
  cursor:pointer;
  overflow:hidden;
}

/* The Figma rotates the icon with the label, so this rotates the whole row
   rather than using writing-mode (which would leave the <img> upright). */
.hw-contact__tab-inner{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) rotate(-90deg);
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:5px;
  white-space:nowrap;
}
.hw-contact__tab-inner img{
  width:22px;
  height:22px;
  display:block;
  flex:none;
  /* Cancels the row's -90deg. The exported asset is already upright, so
     letting it ride the rotation would tip it on its side. */
  transform:rotate(90deg);
}
.hw-contact__tab-label{
  font-size:18px;
  line-height:21px;
  font-weight:700;
  /* Figma's source string is "cONTACT US" + capitalize; net result is caps. */
  text-transform:uppercase;
  color:#121212;
}

/* --- Panel -------------------------------------------------------------- */
.hw-contact__panel{
  box-sizing:border-box;
  width:var(--hw-contact-panel);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:6px;
  padding:17px 10px;
  background:#000;
  border-radius:0 4px 4px 0;
}

.hw-contact__row{
  box-sizing:border-box;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:10px;
  align-self:stretch;
  /* 8px block padding, not the Figma's 9px: the 30px badge + 2px border needs
     it to land on the specified 48px row height. Inline padding stays 9px. */
  padding:8px 9px;
  background:#181306;
  border:1px solid #796020;
  border-radius:10px;
  text-decoration:none;
  transition:border-color .2s ease,background-color .2s ease;
}
.hw-contact__row:hover,
.hw-contact__row:focus-visible{
  background:#221B08;
  border-color:var(--hw-gold,#FACF5A);
  text-decoration:none;
}
.hw-contact__row:focus-visible{
  outline:2px solid var(--hw-focus,#FACF5A);
  outline-offset:2px;
}

.hw-contact__badge{
  box-sizing:border-box;
  flex:none;
  width:30px;
  height:30px;
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.hw-contact__badge img{
  width:30px;
  height:30px;
  display:block;
}
/* Live Chat has no supplied artwork — inline ic:outline-support-agent on the
   brand gradient, which also ties it back to the tab. */
.hw-contact__badge--chat{
  background:var(--hw-gold-gradient,linear-gradient(180deg,#CD932C 0%,#F3C961 50%,#EFCF35 75%,#C49616 100%));
}
.hw-contact__badge--chat svg{
  width:20px;
  height:20px;
  display:block;
  fill:#121212;
}

.hw-contact__text{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  gap:3px;
  min-width:0;
  flex:1 1 auto;
}
.hw-contact__title{
  font-size:12px;
  line-height:14px;
  font-weight:700;
  color:#fff;
}
.hw-contact__sub{
  font-size:10px;
  line-height:11px;
  font-weight:700;
  color:var(--hw-muted,#B3B3B3);
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* --- QR ----------------------------------------------------------------- */
/* Not in the Figma frame, but the panel it replaces carried one. Matches the
   row tiles so it reads as part of the stack. */
.hw-contact__qr{
  box-sizing:border-box;
  align-self:stretch;
  padding:6px;
  background:#181306;
  border:1px solid #796020;
  border-radius:10px;
  line-height:0;
}
.hw-contact__qr img{
  width:100%;
  height:auto;
  aspect-ratio:1;
  object-fit:contain;
  display:block;
  background:#fff;
  border-radius:6px;
}

/* --- Mobile ------------------------------------------------------------- */
@media (max-width:767px){
  .hw-contact{
    --hw-contact-panel:150px;
    top:auto;
    bottom:105px;               /* clears the 75px bottom tab bar */
    transform:none;
  }
  .hw-contact__tab-label{font-size:15px;line-height:18px;}
  .hw-contact__panel{padding:12px 8px;}
}

/* Short viewports can't fit four rows plus the QR — drop the QR rather than
   let the panel run off-screen. The WeChat row still opens it in the modal. */
@media (max-height:620px){
  .hw-contact__qr{display:none;}
}