@charset "utf-8";

/* Checkout V6 offer page.
   Ported from HTML/css/style.css — only the rules the V6 markup actually uses.
   Every selector is namespaced `new-checkout-v6-*` (same convention as
   new-checkoutV5.css) so the loose class names from the static template
   (.header, .container, .logo, .card, .active) can't leak into the rest of
   the app when this file is loaded globally. */

/*=========Fonts=======*/
@font-face {
  font-family: "Roboto";
  src: url("../fonts-nco/Roboto-Bold-r2.woff2") format("woff2"),
    url("../fonts-nco/Roboto-Bold-r2.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url("../fonts-nco/Roboto-ExtraBold-r2.woff2") format("woff2"),
    url("../fonts-nco/Roboto-ExtraBold-r2.woff") format("woff");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url("../fonts-nco/Roboto-Regular-r2.woff2") format("woff2"),
    url("../fonts-nco/Roboto-Regular-r2.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url("../fonts-nco/Roboto-SemiBold-r2.woff2") format("woff2"),
    url("../fonts-nco/Roboto-SemiBold-r2.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url("../fonts-nco/Roboto-Medium-r2.woff2") format("woff2"),
    url("../fonts-nco/Roboto-Medium-r2.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto Condensed";
  src: url("../fonts-nco/RobotoCondensed-Bold-r2.woff2") format("woff2"),
    url("../fonts-nco/RobotoCondensed-Bold-r2.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
/* Wrapped in :where() so the scoping class adds NO specificity — these must
   stay at 0,0,0,0 and lose to every single-class rule below, exactly as the
   template's bare element selectors did. Writing them as `.new-checkout-v6 div`
   would score 0,0,1,1 and silently beat `.new-checkout-v6-container`,
   `-seals`, `-card`, `-summer-sale` etc., killing their margins and padding. */
:where(.new-checkout-v6) *,
:where(.new-checkout-v6) *::before,
:where(.new-checkout-v6) *::after {
  box-sizing: border-box;
}
:where(.new-checkout-v6) :where(div, ul, li, p, img, input) {
  margin: 0;
  padding: 0;
}
:where(.new-checkout-v6) :where(li) {
  list-style: none;
}
:where(.new-checkout-v6) :where(img) {
  border: none;
  height: auto;
  max-width: 100%;
}
:where(.new-checkout-v6) :where(a, a:hover) {
  outline: none;
  color: #333;
  text-decoration: none;
}

/*-----------------------
CSS FOR TOP STRIP
------------------------*/
.new-checkout-v6-top_strip {
  float: left;
  width: 100%;
  padding: 8px 0;
  position: relative;
  background: url(../images/top-strip-bg.svg) no-repeat #c4ceeb;
  background-size: cover;
  background-position: 50% 0, 20% 50%;
}

.new-checkout-v6-top_strip_inner {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  width: 550px;
  margin: 0 auto;
  column-gap: 60px;
  justify-content: center;
}
.new-checkout-v6-summer-sale {
  display: block;
  margin: 0 auto 0 -240px;
  width: 324px;
  max-width: none;
}
.new-checkout-v6-off-cloud {
  width: 201px;
}

#new-checkout-v6-clockdiv {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
  padding: 4px 12px 5px;
  border-radius: 6px;
  background: #a26e2b;
}
#new-checkout-v6-clockdiv > div {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
#new-checkout-v6-clockdiv div > span {
  text-align: center;
  color: #fff;
  font-size: 18px;
  line-height: 19px;
  font-family: "Roboto Condensed";
  font-weight: 800;
}
.new-checkout-v6-smalltext2 {
  font-size: 10px;
  line-height: 10px;
  color: #fff;
  text-align: center;
  letter-spacing: 0.3px;
  font-weight: 500;
  text-transform: uppercase;
}
#new-checkout-v6-clockdiv span.new-checkout-v6-col {
  width: 20px;
  font-size: 15px;
  line-height: 16px;
  color: #fff;
  font-weight: 800;
}
@keyframes new-checkout-v6-shadow-pulse {
  0% {
    box-shadow: 0 0 0 0 #06cd55;
  }
  50% {
    box-shadow: 0 0 0 0 #06cd55;
  }
  100% {
    box-shadow: 0 0 0 8px transparent;
  }
}

/* TV-offer visitors (checkoutV6.jsx adds "secondary"): only the artwork
   changes; size, position and colour come from the rule above */
.new-checkout-v6-prd_opt_header.secondary {
  background-image: url(../images/prod-opt-bg-r5-sec.svg);
}
/* Gated on real hover capability rather than viewport width. Touch screens
   apply :hover on tap and keep it stuck there, so a width-based
   `:hover { display: none }` override (0,0,3,0) would outrank the --open
   class (0,0,2,0) and hide the tooltip the moment JS opened it. With the
   hover rule confined to hover-capable pointers, --open is the only thing
   driving visibility on touch and nothing competes with it. */

/*=======Media Query========*/
.new-checkout-v6-show-tab {
  display: none;
}

@media only screen and (max-width: 1021px) {
  .new-checkout-v6-show-desk {
    display: none;
  }
  .new-checkout-v6-show-tab {
    display: block;
  }

  .new-checkout-v6-top_strip {
    background-size: cover;
    background-position: 89% 0;
  }
  .new-checkout-v6-top_strip_inner {
    width: auto;
    column-gap: 0;
    justify-content: space-between;
  }
  .new-checkout-v6-summer-sale {
    width: 125px;
    margin: 0;
  }
  .new-checkout-v6-off-cloud {
    width: 188px;
  }
}

@media only screen and (max-width: 767px) {

  .new-checkout-v6-top_strip {
    height: 47px;
    padding: 8px 0;
    background: url(../images/top-strip-bg-mob.svg) no-repeat #c4ceeb;
    background-size: cover;
    background-position: 0;
  }
  .new-checkout-v6-off-cloud {
    width: 125px;
  }
  .new-checkout-v6-summer-sale {
    width: 86px;
  }
  #new-checkout-v6-clockdiv {
    padding: 4px 10px 6px;
  }
  #new-checkout-v6-clockdiv div > span {
    font-size: 14px;
    line-height: 15px;
  }
  .new-checkout-v6-smalltext2 {
    font-size: 7px;
    line-height: 7px;
  }
  #new-checkout-v6-clockdiv span.new-checkout-v6-col {
    width: 12px;
    line-height: 14px;
    font-size: 12px;
  }
}

/* Product-option header banner: one artwork per phone width so the offer copy
   baked into the SVG stays centred instead of being cropped by `cover`. */