/* Styles for components/campaign/exclusive.html. */

.Sidebar.Sidebar--campaign.Sidebar--exclusive {
  width: 50vw;
  flex: 0 0 50vw;
  max-width: 50vw;
  min-height: 100vh;
  padding: 0;
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.LoginCampaignExclusive {
  width: min(100%, 960px);
  height: min(100vh, 768px);
  min-height: 0;
  padding: 0;
  box-sizing: border-box;
  position: relative;
  font-family: var(--font-poppins);
  color: #434343;
}

.LoginCampaignExclusive * { box-sizing: border-box; }
.LoginCampaignExclusive h2,
.LoginCampaignExclusive p,
.LoginCampaignExclusive strong,
.LoginCampaignExclusive b,
.LoginCampaignExclusive small,
.LoginCampaignExclusive span,
.LoginCampaignExclusive a {
  font-family: var(--font-poppins);
}
.LoginCampaignExclusive__visual { position: absolute; top: 1.4%; left: -5.3%; width: 61.8%; aspect-ratio: 593 / 640; }
.LoginCampaignExclusive__backdrop { position: absolute; z-index: 0; top: 17.9%; left: 22.67%; width: 57.67%; height: 76.02%; border: 2.12px solid #01c38d; border-radius: 27.51px; background: #225542; }
.LoginCampaignExclusive__phone { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: auto; }
.LoginCampaignExclusive__prizeCard { position: absolute; z-index: 2; top: 38.87%; left: 26%; width: 49.85%; height: 27.4%; padding: 4.2% 4% 3%; border: 3px solid #01c38d; border-radius: 26px; background: #fff; color: #4a4a4a; }
.LoginCampaignExclusive__prizeCard strong { display: block; color: #01c38d; font-size: clamp(25px, 2vw, 38px); font-weight: 600; line-height: .92; white-space: nowrap; }
.LoginCampaignExclusive__prizeCard > span { display: block; margin-top: 5%; font-size: clamp(12px, .85vw, 17px); font-weight: 400; line-height: 1.08; }
.LoginCampaignExclusive__prizeCard b { font-weight: 600; }
.LoginCampaignExclusive__stars { display: flex; align-items: center; gap: 4px; margin-top: 7%; white-space: nowrap; }
.LoginCampaignExclusive__stars img { display: block; width: clamp(16px, 1.3vw, 25px); height: auto; }
.LoginCampaignExclusive__pill { position: absolute; z-index: 3; top: 28.23%; left: 26%; display: flex; align-items: center; justify-content: center; gap: clamp(5px, .4vw, 7.67px); width: 56.66%; height: max(18px, 6.72%); padding: clamp(6px, .6vw, 11.51px) clamp(10px, 1vw, 19.18px); border-radius: 95.89px; background: #f19015; color: #fff; font-size: clamp(8px, .78vw, 15px); font-weight: 600; line-height: 1; overflow: hidden; white-space: nowrap; }
.LoginCampaignExclusive__giftIcon { display: block; flex: 0 0 18px; width: 18px; height: 18px; object-fit: contain; }
.LoginCampaignExclusive__pillLabel { display: block; flex: 1 1 auto; min-width: 0; height: 20px; overflow: hidden; font-size: clamp(8px, .69vw, 13.4px); line-height: 20px; text-align: center; text-overflow: clip; white-space: nowrap; }
.LoginCampaignExclusive__gift { position: absolute; z-index: 4; right: 16.58%; bottom: 10.6%; width: 39.5%; height: 35.34%; }

.LoginCampaignExclusive__content { width: 39.4%; position: absolute; top: 10.8%; left: 50.7%; }
.LoginCampaignExclusive__brand { width: 190px; height: 20px; margin: 0 0 8px 3px; }
.LoginCampaignExclusive__brand img { display: block; width: 100%; height: 100%; object-fit: contain; }
.LoginCampaignExclusive__headline { margin: 0; color: #01c38d; font-size: clamp(15px, 1.18vw, 22.67px); font-weight: 600; line-height: 1; text-transform: uppercase; }
.LoginCampaignExclusive__headline strong { display: block; margin-top: 9px; font-size: clamp(52px, 4.07vw, 78.15px); font-weight: 600; line-height: 1.03; letter-spacing: 0; }
.LoginCampaignExclusive__description { margin: 6px 0 23px; font-size: clamp(12px, .94vw, 18px); font-weight: 400; line-height: 1.5; }
.LoginCampaignExclusive__description b { color: #01c38d; font-weight: 600; }
.LoginCampaignExclusive__reward { display: flex; align-items: center; gap: 7px; min-height: 58px; padding: 11px 14px; border: 1px solid rgba(0, 229, 160, .25); border-radius: 8.5px; background: rgba(0, 229, 160, .102); color: #156c5a; }
.LoginCampaignExclusive__rewardIcon { display: block; flex: 0 0 28.34px; width: 28.34px; height: 28.34px; object-fit: contain; }
.LoginCampaignExclusive__reward p { margin: 0; font-size: clamp(6px, .36vw, 7px); line-height: 1.3; }
.LoginCampaignExclusive__reward b, .LoginCampaignExclusive__reward small { display: block; }
.LoginCampaignExclusive__reward b { color: #01c38d; font-size: 12.75px; font-weight: 600; line-height: 1; letter-spacing: 0; }
.LoginCampaignExclusive__reward small { color: #474747; font-size: 9.92px; font-weight: 400; line-height: 1; letter-spacing: 0; }
.LoginCampaignExclusive__cta { display: inline-flex; align-items: center; justify-content: center; width: 14.6%; height: 6.9%; min-width: 0; border-radius: 5px; background: #254d3d; box-shadow: 0 6px 4.8px rgba(0, 0, 0, .25); color: #fff; font-size: clamp(10px, .83vw, 16px); font-weight: 700; text-decoration: none; position: absolute; right: 9.9%; bottom: 11.1%; }
.LoginCampaignExclusive__cta:hover, .LoginCampaignExclusive__cta:focus { background: var(--color-white); color: var(--cg-campaign-green-dark); text-decoration: none; }
.LoginCampaignExclusive__footer { margin: 17px 0 0; color: #545454; font-size: 18px; font-weight: 400; line-height: 1.5; letter-spacing: 0; white-space: normal; }
.LoginCampaignExclusive__footer b { color: #fb8c00; font-weight: 600; }

@media (max-width: 768px) {
  .Sidebar.Sidebar--campaign.Sidebar--exclusive { width: 100%; max-width: 100%; min-height: 0; overflow: hidden; }
  .LoginCampaignExclusive { width: 100%; max-width: 393px; height: 1209px; min-height: 0; margin: 0 auto; }
  .LoginCampaignExclusive__visual { top: 0; left: -2.54%; width: 100.68%; }
  .LoginCampaignExclusive__content { width: calc(100% - 28px); top: 37.22%; left: 11px; text-align: center; }
  .LoginCampaignExclusive__brand { margin: 0 auto 20px; }
  .LoginCampaignExclusive__headline { font-size: 22.67px; text-align: center; }
  .LoginCampaignExclusive__headline strong { margin-top: 0; font-size: clamp(54px, 19.88vw, 78.15px); line-height: 1.03; }
  .LoginCampaignExclusive__description { margin: 8px 0 18px; font-size: 18px; text-align: center; }
  .LoginCampaignExclusive__reward { width: min(325.55px, 100%); min-height: 133px; margin: 0 auto; padding: 16px 24px; text-align: left; }
  .LoginCampaignExclusive__rewardIcon { flex-basis: 41px; width: 41px; height: 41px; }
  .LoginCampaignExclusive__reward p { font-size: 13px; line-height: 1.4; }
  .LoginCampaignExclusive__reward b { font-size: 17px; line-height: 1.2; }
  .LoginCampaignExclusive__footer { margin-top: 17px; font-size: 18px; text-align: left; white-space: normal; }
  .LoginCampaignExclusive__cta { width: 140px; height: 53px; right: auto; bottom: auto; top: 90.32%; left: calc(50% - 70px); font-size: 18px; }
}