{"version":3,"file":"a5abba19-913ae56a63c3d70cab4a.js","mappings":"ilBAGO,MAAMA,GAASC,EAAAA,EAAAA,GAAA,OAAAC,OAAA,aAAAD,CAAA,CAAAE,KAAA,UAAAC,OAAA,4CAKTC,GAAQJ,EAAAA,EAAAA,GAAA,OAAAC,OAAA,aAAAD,CAAA,CAAAE,KAAA,UAAAC,OAAA,kcAkCRE,GAAML,EAAAA,EAAAA,GAAA,MAAAC,OAAA,aAAAD,CAAA,CAAAE,KAAA,SAAAC,OAAA,sGAUNG,GAAUN,EAAAA,EAAAA,GAAA,MAAAC,OAAA,aAAAD,CAAA,CAAAE,KAAA,UAAAC,OAAA,4MAgDVI,GAAIP,EAAAA,EAAAA,GAAA,OAAAC,OAAA,aAAAD,CAAA,CAAAE,KAAA,QAAAC,OAAA,qHAUJK,GAAUR,EAAAA,EAAAA,GAAA,OAAAC,OAAA,aAAAD,CAAA,CAAAE,KAAA,UAAAC,OAAA,icA+BVM,GAAcT,EAAAA,EAAAA,GAAA,OAAAC,OAAA,aAAAD,CAAA,CAAAE,KAAA,UAAAC,OAAA,6EASdO,GAAKV,EAAAA,EAAAA,GAAA,OAAAC,OAAA,aAAAD,CAAA,CAAAE,KAAA,UAAAC,OAAA,uDAOLQ,GAAQX,EAAAA,EAAAA,GAAA,OAAAC,OAAA,aAAAD,CAAA,CAAAE,KAAA,SAAAC,OAAA,4IAWRS,GAAeZ,EAAAA,EAAAA,GAAA,OAAAC,OAAA,YAAAD,CAAA,CAAAE,KAAA,SAAAC,OAAA,iFAOfU,GAASb,EAAAA,EAAAA,GAAA,OAAAC,OAAA,YAAAD,CAAA,CAAAE,KAAA,SAAAC,OAAA,gOAgBTW,GAAWd,EAAAA,EAAAA,GAAA,OAAAC,OAAA,YAAAD,CAAA,CAAAE,KAAA,UAAAC,OAAA,sfAwCXY,GAAmBf,EAAAA,EAAAA,GAAA,OAAAC,OAAA,YAAAD,CAAA,wDAIlBgB,GAAaA,EAAQC,QAAU,QAAU,QAAO,gJAcjDC,GAAkBlB,EAAAA,EAAAA,GAAOmB,EAAAA,EAAO,CAAAlB,OAAA,YAAdD,CAAe,0BAGrCoB,IAAA,IAAC,IAAEC,GAAKD,EAAA,OAAKC,CAAG,cACdC,IAAA,IAAC,MAAEC,GAAOD,EAAA,OAAKC,CAAK,eACnBC,IAAA,IAAC,OAAEC,GAAQD,EAAA,OAAKC,CAAM,aACxBC,IAAA,IAAC,KAAEC,GAAMD,EAAA,OAAKC,CAAI,QAGfC,GAAY5B,EAAAA,EAAAA,GAAA,OAAAC,OAAA,YAAAD,CAAA,CAAAE,KAAA,SAAAC,OAAA,6CAMZ0B,GAAQ7B,EAAAA,EAAAA,GAAA,OAAAC,OAAA,YAAAD,CAAA,CAAAE,KAAA,SAAAC,OAAA,sHAYR2B,GAAQ9B,EAAAA,EAAAA,GAAA,OAAAC,OAAA,YAAAD,CAAA,uDAEC+B,IAAA,IAAC,OAAEC,GAAQD,EAAA,OAAMC,EAAS,oBAAsB,OAAO,GAAC,uHAYjEC,GAAcjC,EAAAA,EAAAA,GAAA,OAAAC,OAAA,YAAAD,CAAA,oDAGdkC,IAAA,IAAC,OAAEF,GAAQE,EAAA,OAAMF,EAAS,QAAU,MAAM,GAAC,+BAI3CG,IAAA,IAAC,OAAEH,GAAQG,EAAA,OAAMH,EAAS,IAAM,GAAG,GAAC,4NAqBpCI,GAAOpC,EAAAA,EAAAA,GAAA,OAAAC,OAAA,YAAAD,CAAA,CAAAE,KAAA,SAAAC,OAAA,8K","sources":["webpack://@ecom/uk/./src/components/SubscriptionBenefits/SubscriptionBenefits.styles.js"],"sourcesContent":["import styled from '@emotion/styled';\nimport HotSpot from './HotSpot';\n\nexport const Container = styled.div`\n  text-align: center;\n  padding: 60px 0 60px 0;\n`;\n\nexport const SmallDot = styled.div`\n  width: 18px;\n  height: 18px;\n\n  @media (max-width: 320px) {\n    width: 20px;\n    height: 18px;\n  }\n  margin: 0 3px;\n  border-radius: 100%;\n  color: white;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: #d79098;\n  z-index: 0;\n  &:hover {\n    .small-circle {\n      opacity: 1;\n      background-color: #bc2e3e;\n      box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25);\n      transform: matrix(1, 0, 0, -1, 0, 0);\n      z-index: 1;\n      opacity: 1;\n    }\n  }\n  .small-circle {\n    background-color: white;\n    border-radius: 100%;\n    width: 10px;\n    height: 10px;\n  }\n`;\n\nexport const Header = styled.h2`\n  font-style: italic;\n  color: #001c72;\n  text-align: center;\n\n  @media (min-width: 1200px) {\n    margin-bottom: 24px;\n  }\n`;\n\nexport const MainBanner = styled.h3`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  color: #001c72;\n  background: #fcf1e0;\n  border-radius: 62px;\n  margin: 8px 0;\n  padding: 10px 33px;\n  font-size: 15px;\n  @media (max-width: 1200px) {\n    width: 100%;\n  }\n`;\n\nexport const ScarfContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  padding: 24px 70px;\n  margin: 20px 16px;\n  background: #fcf1e0;\n  .header {\n    text-align: center;\n    font-family: 'Utopia Std';\n    font-style: normal;\n    font-weight: normal;\n    font-size: 20px;\n    line-height: 24px;\n    text-align: center;\n    color: #001c72;\n  }\n  .subHeader {\n    text-align: center;\n    font-family: 'Utopia Std';\n    font-style: normal;\n    font-weight: normal;\n    font-size: 16px;\n    line-height: 23px;\n    color: #001c72;\n  }\n\n  @media (min-width: 1200px) {\n    display: none;\n  }\n`;\n\nexport const Body = styled.div`\n  display: flex;\n  flex-direction: column;\n  @media (min-width: 1200px) {\n    width: 100%;\n    flex-direction: row;\n    align-items: center;\n  }\n`;\n\nexport const ButtonFlex = styled.div`\n  display: flex;\n  flex-direction: column;\n  @media (min-width: 1200px) {\n    width: 30%;\n  }\n  .button {\n    font-family: 'Neuzeit Grotesk';\n    font-style: normal;\n    font-weight: normal;\n    font-size: 16px;\n    line-height: 160%;\n    text-align: center;\n    letter-spacing: 0.16em;\n    text-transform: uppercase;\n    color: #ffffff;\n    width: 100%;\n    margin-top: 20px;\n    border-radius: 4px;\n    background-color: var(--petlab-red);\n    z-index: 1;\n    padding: 16px 0;\n\n    @media (min-width: 1200px) {\n      margin-bottom: unset;\n      padding: 19px 0px;\n      margin-left: 0;\n    }\n  }\n`;\n\nexport const ImageContainer = styled.div`\n  position: relative;\n\n  margin-top: 16px;\n  @media (min-width: 1200px) {\n    width: 70%;\n  }\n`;\n\nexport const Image = styled.img`\n  width: 100%;\n  @media (min-width: 1200px) {\n    width: 100%;\n  }\n`;\n\nexport const Benefits = styled.div`\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  @media (min-width: 1200px) {\n    width: 100%;\n    margin-bottom: 40px;\n  }\n  border-bottom: 1px solid #ccd2e3;\n`;\n\nexport const BenefitItemFlex = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  align-items: flex-start;\n`;\n\nexport const SubHeader = styled.div`\n  color: var(--petlab-blue);\n  text-align: start;\n  font-family: 'Utopia Std', serif;\n  font-style: normal;\n  font-weight: normal;\n  font-size: 16px;\n  line-height: 23px;\n  margin-top: 8px;\n  a {\n    color: var(--petlab-red);\n    &:hover {\n      text-decoration: underline;\n    }\n  }\n`;\nexport const BenefitItem = styled.div`\n  border-top: 1px solid #ccd2e3;\n  padding: 12px 0px;\n  display: flex;\n  gap: 0.4em;\n\n  .header {\n    text-align: start;\n    font-family: 'Utopia Std';\n    font-style: normal;\n    font-weight: normal;\n    font-size: 18px;\n    line-height: 22px;\n    color: #001c72;\n  }\n  .subHeader {\n    text-align: start;\n    font-family: 'Utopia Std';\n    font-style: normal;\n    font-weight: normal;\n    font-size: 16px;\n    line-height: 23px;\n    color: #001c72;\n    margin-top: 8px;\n  }\n\n  @media (min-width: 1200px) {\n    gap: 0.6em;\n    .header {\n      font-size: 20px;\n      line-height: 24px;\n    }\n    .subHeader {\n      font-weight: normal;\n      font-size: 16px;\n      line-height: 23px;\n    }\n  }\n`;\n\nexport const HotSpotMobileTablet = styled.div`\n  padding: 16px;\n  margin: 1em 0;\n  border-radius: 8px;\n  display: ${(element) => (element.display ? 'block' : 'none')};\n  background: var(--petlab-beige);\n  color: var(--petlab-blue);\n  text-align: left;\n\n  .title {\n    margin-bottom: 8px;\n  }\n\n  @media (min-width: 1200px) {\n    display: none;\n  }\n`;\n\nexport const AbsoluteHotSpot = styled(HotSpot)`\n  position: absolute;\n\n  top: ${({ top }) => top};\n  right: ${({ right }) => right};\n  bottom: ${({ bottom }) => bottom};\n  left: ${({ left }) => left};\n`;\n\nexport const DotContainer = styled.div`\n  width: 36px;\n  height: 36px;\n  position: relative;\n`;\n\nexport const OuterDot = styled.div`\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n\n  border-radius: 100%;\n  background: var(--petlab-red);\n  opacity: 0.5;\n`;\n\nexport const InnerDot = styled.div`\n  transition: background-color 150ms;\n  background-color: ${({ active }) => (active ? 'var(--petlab-red)' : 'white')};\n\n  width: 18px;\n  height: 18px;\n  border-radius: 100%;\n\n  box-shadow: 0px 0px 8px 0px #00000040;\n\n  top: 25%;\n  left: 25%;\n  position: absolute;\n`;\nexport const TooltipWrapper = styled.div`\n  padding-top: 14px;\n  background: transparent;\n  display: ${({ active }) => (active ? 'block' : 'none')};\n  position: absolute;\n\n  /* Transition in and out nicely */\n  opacity: ${({ active }) => (active ? '1' : '0')};\n  transition: opacity 200ms;\n  width: 240px;\n  left: 50%;\n  transform: translateX(-50%);\n\n  @media (max-width: 768px) {\n    position: fixed;\n    width: auto;\n    left: 14px;\n    right: 14px;\n    bottom: 460px;\n\n    @-moz-document url-prefix() {\n      bottom: 20%;\n    }\n\n    transform: none;\n  }\n`;\n\nexport const Tooltip = styled.div`\n  padding: 16px;\n\n  border-radius: 8px;\n\n  background: var(--petlab-beige);\n  color: var(--petlab-blue);\n  text-align: left;\n\n  .title {\n    margin-bottom: 8px;\n  }\n\n  @media (max-width: 1200px) {\n    display: none;\n  }\n`;\n"],"names":["Container","_styled","target","name","styles","SmallDot","Header","MainBanner","Body","ButtonFlex","ImageContainer","Image","Benefits","BenefitItemFlex","SubHeader","BenefitItem","HotSpotMobileTablet","element","display","AbsoluteHotSpot","HotSpot","_ref","top","_ref2","right","_ref3","bottom","_ref4","left","DotContainer","OuterDot","InnerDot","_ref5","active","TooltipWrapper","_ref6","_ref7","Tooltip"],"sourceRoot":""}