/* ==========================================================================
   House of Winners — rebate page

   A gold-title hero band (identical to the tutorial band) over a single
   centred card holding the "Claim Rebate Bonus" form, a warning banner when
   there is nothing to claim, and two info tiles.

   The form controls themselves are NOT defined here: .hw-form / .hw-field /
   .hw-control / .hw-submit already live in css/deposit.css, which is loaded on
   every page (see header.php). This file only adds what is unique to rebate —
   the hero, the card shell, the notice banner, the tiles and the T&C modal
   skin — so the two form-pages can never drift apart.

   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-rebate{
  background:var(--hw-page-bg,#000);
  padding:0 0 90px;
}

/* --------------------------------------------------------------------------
   Hero — the same band as css/tutorial.css .hw-tut__hero, kept under
   rebate-scoped names so the two pages stay independent (each redesigned page
   owns its own hero classes) while sharing the artwork in images/heroes/
   (hero-band.png desktop, hero-band-mobile.png phone). Streaks stand in if
   those files are missing.
   -------------------------------------------------------------------------- */
.hw-rebate__hero{
  position:relative;
  height:250px;
  background:var(--hw-hero-bg,#352A23);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  margin:0 0 60px;
}
.hw-rebate__hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(115deg,transparent 60%,rgba(243,201,97,.10) 62%,transparent 64%),
    linear-gradient(115deg,transparent 66%,rgba(243,201,97,.16) 68%,transparent 71%),
    linear-gradient(115deg,transparent 73%,rgba(243,201,97,.10) 75%,transparent 78%),
    radial-gradient(120% 90% at 90% 50%,rgba(196,150,22,.22),transparent 60%),
    radial-gradient(120% 90% at 10% 50%,rgba(196,150,22,.14),transparent 60%);
  pointer-events:none;
}
/* The view passes the art in as --hw-hero-art (and --hw-hero-art-sm for the
   phone variant) rather than as an inline background-image, so the media query
   below can swap them — an inline style would win over any breakpoint rule. */
.hw-rebate__hero--art{
  background-image:var(--hw-hero-art);
  background-size:cover;
  background-position:center;
}
.hw-rebate__hero--art::before{display:none;}

.hw-rebate__hero-title{
  position:relative;
  margin:0;
  font-family:var(--hw-font);
  font-size:6rem;              /* 60px */
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.05em;
  text-transform:capitalize;
  text-align:center;
  background:linear-gradient(180deg,#CD932C 16.58%,#F3C961 49.59%,#EFCF35 66.1%,#C49616 82.61%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

/* --------------------------------------------------------------------------
   Card
   One centred panel, 800px like the frame. The form inside uses the shared
   .hw-form rhythm (20px between fields) from deposit.css.
   -------------------------------------------------------------------------- */
/* No width:100% here. The card is a block, so width:auto already fills the
   column — and width:100% would fight the margin-inline gutters set at the
   narrower breakpoints, making the card 100% + 18px wide and scrolling the
   whole page sideways. */
.hw-rebate__card{
  max-width:800px;
  margin-inline:auto;
  background:var(--hw-footer-bg,#171717);
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  padding:36px 40px;
}
.hw-rebate__title{
  margin:0 0 28px;
  text-align:center;
  font-family:var(--hw-font);
  font-size:1.8rem;            /* 18px */
  font-weight:700;
  line-height:1.2;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--hw-on-surface,#FFF);
}

/* --------------------------------------------------------------------------
   "Cannot claim" banner
   Shown only when the weekly rebate is 0 (nothing to submit). Gold-tinted box
   with the warning glyph, matching the deposit page's alert skin.
   -------------------------------------------------------------------------- */
.hw-rebate__notice{
  display:flex;
  align-items:center;
  gap:10px;
  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.4;
}
.hw-rebate__notice-icon{width:18px;height:18px;flex:none;}

/* --------------------------------------------------------------------------
   Server flash — the theme's get_notice_frontend() emits a Bootstrap
   .alert(.alert-success|.alert-danger).alert-dismissible after a claim POST.
   Re-skin it here so it lands dark/gold instead of white-on-white, same as
   css/deposit.css does for its page.
   -------------------------------------------------------------------------- */
.hw-rebate .alert{
  position:relative;
  margin:0 0 20px;
  padding:12px 40px 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-rebate .alert-success{
  border-color:rgba(143,209,143,.5);
  background:rgba(143,209,143,.08);
  color:var(--hw-success,#8FD18F);
}
.hw-rebate .alert-danger{
  border-color:rgba(255,107,122,.5);
  background:rgba(255,107,122,.08);
  color:var(--hw-danger,#FF6B7A);
}
.hw-rebate .alert .close{
  position:absolute;
  top:8px;
  right:10px;
  padding:0;
  background:transparent;
  border:0;
  color:inherit;
  opacity:.7;
  font-size:2rem;
  line-height:1;
  text-shadow:none;
  cursor:pointer;
}
.hw-rebate .alert .close:hover{opacity:1;}

/* Disabled Submit — kept clickable-looking (full gold) on purpose: both frames
   draw Submit in gold even in the cannot-claim state, with the warning banner
   carrying the "you can't claim" message. So the disabled button keeps the
   gradient; only the cursor signals it's inert. */
.hw-rebate .hw-submit:disabled{cursor:not-allowed;}
.hw-rebate .hw-submit:disabled:hover{filter:none;}

/* --------------------------------------------------------------------------
   Divider + info tiles
   Two equal bordered boxes: a read-out ("Your rebate is X") and the T&C
   trigger. Icons are the gold PNGs in images/pages/rebate/.
   -------------------------------------------------------------------------- */
.hw-rebate__rule{
  height:1px;
  margin:28px 0;
  border:0;
  background:rgba(255,255,255,.08);
}

.hw-rebate__tiles{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
.hw-rebate__tile{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  /* Grid items default to min-width:auto — a long label would widen the track
     past 1fr and scroll the page sideways. */
  min-width:0;
  padding:16px 18px;
  border:1px solid var(--hw-rule,#4D4E4C);
  border-radius:var(--hw-radius,5px);
  background:transparent;
  color:var(--hw-on-surface,#FFF);
  font-family:var(--hw-font);
  font-size:1.4rem;
  line-height:1.2;
  text-align:center;
  text-decoration:none;
  transition:border-color .15s,background .15s;
}
.hw-rebate__tile:hover,
.hw-rebate__tile:focus{
  border-color:var(--hw-gold-line,#9F853F);
  background:rgba(250,207,90,.04);
  color:var(--hw-on-surface,#FFF);
  text-decoration:none;
}
.hw-rebate__tile:focus-visible{outline:2px solid var(--hw-focus,#FACF5A);outline-offset:2px;}
.hw-rebate__tile-icon{width:20px;height:20px;flex:none;}

/* --------------------------------------------------------------------------
   T&C modal
   The existing Bootstrap #terms-modal is kept (data-toggle handling stays);
   only its surfaces are re-skinned to match the card. Legacy theme classes
   (.form-box/.form-tab/.nav-link) are targeted inside #terms-modal so nothing
   elsewhere is affected.
   -------------------------------------------------------------------------- */
#terms-modal .modal-content{
  background:var(--hw-footer-bg,#171717);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
}
#terms-modal .modal-body{padding:32px 36px;}
/* The modal borrows the login/register form shell for markup parity, and
   style.css:14745 gives .form-box a white sheet plus a light drop shadow and
   its own padding — inside a dark modal that paints white over the whole body.
   .modal-body above already supplies the inset, so the shell just stops
   drawing. (Same cause and fix as #promo-modal in promotion.css.) */
#terms-modal .form-box,
#terms-modal .form-tab,
#terms-modal .tab-content,
#terms-modal .tab-pane{
  background:transparent;
  box-shadow:none;
  max-width:none;
  padding:0;
  color:inherit;
}
#terms-modal .close{
  color:var(--hw-muted,#B3B3B3);
  opacity:1;
  text-shadow:none;
}
#terms-modal .close:hover{color:var(--hw-on-surface,#FFF);}
#terms-modal .nav-link{
  padding:0 0 16px;
  color:var(--hw-gold,#FACF5A);
  font-size:1.8rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}
#terms-modal #rebate-style{
  margin:0;
  padding-left:18px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
#terms-modal #rebate-style li{
  color:#B7B7B7;
  font-size:1.3rem;
  line-height:1.6;
}

/* --------------------------------------------------------------------------
   Responsive
   Two frames exist: 1440 desktop and 393 mobile. The 900px step is invented to
   bridge them (no frame there); the 767px step is the real mobile layout and is
   set to 767 — NOT a lower value — so it flips together with the header's own
   mobile switch and with css/deposit.css, whose @767 block already restyles the
   shared .hw-control / .hw-submit to the mobile frame (50px gold-bordered
   fields, gold select chevron, centred 128x46 Submit). This file only adds
   what deposit.css doesn't cover.
   -------------------------------------------------------------------------- */
@media (max-width:900px){
  .hw-rebate{padding-bottom:60px;}
  .hw-rebate__hero{height:200px;margin-bottom:40px;}
  .hw-rebate__hero-title{font-size:4.8rem;}
  .hw-rebate__card{margin-inline:16px;padding:28px 24px;}
}

/* Mobile — from the 393px frame. */
@media (max-width:767px){
  .hw-rebate{padding-bottom:40px;}

  /* Hero: 150px band, 38px gold title. */
  .hw-rebate__hero{height:150px;margin-bottom:20px;}
  .hw-rebate__hero-title{font-size:3.8rem;}

  /* Hero art on a phone. The shared desktop band is 1440x250 (5.76:1); in a
     393x150 box (2.62:1) `cover` crops to the middle ~45% of the artwork, which
     on that banner is empty black — the gold streaks sit at the far left/right
     edges only, so the hero reads as having no background.
     With the phone banner present (images/heroes/hero-band-mobile.png, 393x150)
     use it; without one, drop the image entirely and let the ::before streaks
     paint the band, since those are gradients and scale to any width. */
  .hw-rebate__hero--art-sm{background-image:var(--hw-hero-art-sm);}
  .hw-rebate__hero--art:not(.hw-rebate__hero--art-sm){background-image:none;}
  .hw-rebate__hero--art:not(.hw-rebate__hero--art-sm)::before{display:block;}

  /* Card: 375px inside the 393 frame (9px gutters), 24/12 padding, 6px radius. */
  .hw-rebate__card{margin-inline:9px;padding:24px 12px;border-radius:6px;}
  .hw-rebate__title{font-size:1.8rem;margin-bottom:24px;letter-spacing:0;}

  /* Field rhythm from the frame (deposit.css @767 sets 18/8 — the frame is
     tighter): 16px between fields, 4px label -> control. */
  .hw-rebate .hw-form{gap:16px;}
  .hw-rebate .hw-field{gap:4px;}

  /* Warning banner: 20px glyph, gold text, per the frame. */
  .hw-rebate__notice{gap:8px;padding:8px 12px;font-size:1.4rem;color:var(--hw-gold,#FACF5A);}
  .hw-rebate__notice-icon{width:20px;height:20px;}

  /* Submit centring/sizing is inherited from deposit.css @767 (128x46, centred);
     nothing to add here. */

  /* Divider is gold on mobile (frame), and the tiles STAY two-up — the frame
     keeps them side by side rather than stacking. */
  .hw-rebate__rule{margin:24px 0;background:var(--hw-gold-line,#9F853F);}
  .hw-rebate__tiles{gap:12px;}
  .hw-rebate__tile{
    padding:14px 10px;
    gap:6px;
    border-color:var(--hw-gold-line,#9F853F);
    font-size:1.2rem;
  }
  .hw-rebate__tile-icon{width:20px;height:20px;}

  #terms-modal .modal-body{padding:24px 20px;}
}