@font-face {
  font-family: "JioType";
  src: url("https://dev-jiostatic.azurewebsites.net/static/fonts/JioType/JioType-Light.woff2") format("woff2"), url("https://dev-jiostatic.azurewebsites.net/static/fonts/JioType/JioType-Light.woff") format("woff"), url("https://dev-jiostatic.azurewebsites.net/static/fonts/JioType/JioType-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JioType";
  src: url("https://dev-jiostatic.azurewebsites.net/static/fonts/JioType/JioType-Black.woff2") format("woff2"), url("https://dev-jiostatic.azurewebsites.net/static/fonts/JioType/JioType-Black.woff") format("woff"), url("https://dev-jiostatic.azurewebsites.net/static/fonts/JioType/JioType-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JioType";
  src: url("https://dev-jiostatic.azurewebsites.net/static/fonts/JioType/JioType-LightItalic.woff2") format("woff2"), url("https://dev-jiostatic.azurewebsites.net/static/fonts/JioType/JioType-LightItalic.woff") format("woff"), url("https://dev-jiostatic.azurewebsites.net/static/fonts/JioType/JioType-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "JioType";
  src: url("https://dev-jiostatic.azurewebsites.net/static/fonts/JioType/JioType-Bold.woff2") format("woff2"), url("https://dev-jiostatic.azurewebsites.net/static/fonts/JioType/JioType-Bold.woff") format("woff"), url("https://dev-jiostatic.azurewebsites.net/static/fonts/JioType/JioType-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JioType";
  src: url("https://dev-jiostatic.azurewebsites.net/static/fonts/JioType/JioType-MediumItalic.woff2") format("woff2"), url("https://dev-jiostatic.azurewebsites.net/static/fonts/JioType/JioType-MediumItalic.woff") format("woff"), url("https://dev-jiostatic.azurewebsites.net/static/fonts/JioType/JioType-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "JioType";
  src: url("https://dev-jiostatic.azurewebsites.net/static/fonts/JioType/JioType-Medium.woff2") format("woff2"), url("https://dev-jiostatic.azurewebsites.net/static/fonts/JioType/JioType-Medium.woff") format("woff"), url("https://dev-jiostatic.azurewebsites.net/static/fonts/JioType/JioType-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
html, body, h1, h2, h3, h4, h5, h6, p, ol, ul {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  box-sizing: border-box;
  font-weight: normal;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.theme-light {
  --color-primary: #c4c4c4;
  --color-primary-20: #c61924;
  --color-primary-60: #efefef;
  --color-inverse: #000000;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-grey: #4d4d4d73;
  --color-grey-20: #dddddd;
  --color-grey-40: #ebebeb;
  --color-grey-60: #ebebeb;
  --color-grey-80: #8e8e8e14;
  --color-grey-100: #ffffff;
  --card-border: #898989;
}

.theme-dark {
  --color-primary: #8b020b;
  --color-primary-20: #c61924;
  --color-primary-60: #0b0101;
  --color-inverse: #ffffff;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-grey: #4d4d4d73;
  --color-grey-20: #23232373;
  --color-grey-40: #676767;
  --color-grey-60: #232323;
  --color-grey-80: #8e8e8e14;
  --color-grey-100: #4d4d4d;
  --card-border: #898989;
}

html,
body {
  font-family: "JioType", helvetica, arial, sans-serif;
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0;
  height: 100vh;
  width: 100vw;
  background: transparent linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-60) 50%) 0% 0% no-repeat padding-box;
}

.coupon-container {
  padding: 16px;
}
.coupon-container__upper {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding: 24px;
}
.coupon-container__upper--all {
  color: var(--color-inverse);
  padding-bottom: 15px;
}
.coupon-container__upperTextBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--color-inverse);
}
.coupon-container__upperTextBox--text {
  font-size: 16px;
}
.coupon-container__upperTextBox--number {
  font-size: 60px;
  font-weight: bold;
}

.card {
  background: linear-gradient(180deg, transparent 0%, var(--color-grey-20) 25%) 0% 0% no-repeat padding-box;
  border-radius: 10px;
  margin-bottom: 16px;
}
.card.expired {
  opacity: 50%;
  pointer-events: none;
}
.card__lower {
  color: var(--color-inverse);
  font-size: 10px;
  padding-top: 8px;
  padding-bottom: 4px;
}
.card__lower-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.card__lower-down {
  justify-content: center;
  align-items: center;
  width: 24px;
  color: var(--color-inverse);
  height: 24px;
}
.card__lower-down svg {
  min-width: 100%;
  min-height: 100%;
}
.card__lower-down.active {
  display: none;
  /* Hide the 'down' icon initially */
}
.card__lower-up {
  justify-content: center;
  align-items: center;
  width: 24px;
  color: var(--color-inverse);
  height: 24px;
  display: none;
  /* Hide the 'up' icon initially */
  cursor: pointer;
}
.card__lower-up svg {
  min-width: 100%;
  min-height: 100%;
}
.card__lower-up.active {
  display: inline-block;
  /* Display the 'up' icon when active */
}
.card__lower-content {
  display: none;
  color: var(--color-inverse);
  font-size: 12px;
  padding: 10px 16px 12px 16px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.card__lower-content.active {
  display: block;
  /* Hide the 'down' icon initially */
}

.card-container {
  display: flex;
  justify-content: center;
}
.card-container__left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--color-grey-100);
  text-align: center;
  border-radius: 10px;
  padding: 8px 16px;
  border-right: dashed 2px var(--card-border);
}
.card-container__left > img {
  border-radius: 12px;
}
.card-container__left-image img {
  border-radius: 10px;
}
.card-container__left-expiry {
  margin-top: 4px;
  font-size: 10px;
  line-height: 16px;
  color: #b1b1b1;
}
.card-container__left-date {
  font-size: 10px;
  line-height: 16px;
  color: var(--color-inverse);
}
.card-container__right {
  background-color: var(--color-grey-100);
  border-radius: 8px;
  padding: 8px 16px;
  flex: 1;
}
.card-container__right-heading {
  font-size: 12px;
  line-height: 16px;
  color: var(--color-inverse);
  margin-bottom: 8px;
}
.card-container__right-description {
  font-size: 12px;
  line-height: 16px;
  color: var(--color-inverse);
  margin-bottom: 16px;
}
.card-container__right-buttons {
  display: flex;
  height: 24px;
}
.card-container__right-button-copy {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background-color: var(--color-grey-40);
  margin-right: 12px;
  border-radius: 10px;
  border: none;
  padding: 4px 8px;
}
.card-container__right-button-copy input:focus-visible {
  outline: none;
}
.card-container__right-input {
  width: 100%;
  color: var(--color-inverse);
  font-size: 12px;
  line-height: 16px;
  padding: 4px 10px;
}
.card-container__right-input-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 12px;
  color: var(--color-inverse);
  height: 12px;
}
.card-container__right-input-icon svg {
  min-width: 100%;
  min-height: 100%;
}
.card-container__right-button-claim {
  width: 100%;
}
.card-container__right-button-claim button {
  width: 100%;
  border-radius: 10px;
  border: none;
  background-color: var(--color-primary-20);
  padding: 4.5px 10px;
  color: var(--color-white);
}

.terms {
  padding-top: 14px;
}

.anchor {
  color: var(--color-inverse);
}

.toast {
  position: fixed;
  bottom: 5%;
  right: 24px;
  left: 24px;
  background: var(--color-black);
  padding: 16px;
  border-radius: 12px;
  color: var(--color-white);
  text-align: center;
  animation: fade-in-out 0.5s;
}

@keyframes fade-in-out {
  0% {
    opacity: 0;
  }
  1%, 100% {
    opacity: 1;
  }
}
.para {
  margin-top: 10px;
  color: var(--color-inverse);
}

.hide {
  display: none;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.loader-image {
  height: 35%;
  width: 100%;
  opacity: 0.7;
}

.loader-container {
  padding: 0 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 100vh;
}
.loader-container .loader-title {
  color: var(--color-inverse);
  font-size: 32px;
  font-weight: bold;
  margin-top: 20px;
}
.loader-container .loader-subtitle {
  color: var(--color-inverse);
  font-size: 20px;
  margin-top: 10px;
  font-weight: 100;
  opacity: 0.7;
}

.lds-spinner {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
  margin-top: 15%;
}

.lds-spinner div {
  transform-origin: 40px 40px;
  animation: lds-spinner 1.2s linear infinite;
}

.lds-spinner div:after {
  content: " ";
  display: block;
  position: absolute;
  top: 3px;
  left: 37px;
  width: 6px;
  height: 22px;
  border-radius: 30%;
  background: var(--color-inverse);
}

.lds-spinner div:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -1.1s;
}

.lds-spinner div:nth-child(2) {
  transform: rotate(40deg);
  animation-delay: -1s;
}

.lds-spinner div:nth-child(3) {
  transform: rotate(80deg);
  animation-delay: -0.9s;
}

.lds-spinner div:nth-child(4) {
  transform: rotate(120deg);
  animation-delay: -0.8s;
}

.lds-spinner div:nth-child(5) {
  transform: rotate(160deg);
  animation-delay: -0.7s;
}

.lds-spinner div:nth-child(6) {
  transform: rotate(200deg);
  animation-delay: -0.6s;
}

.lds-spinner div:nth-child(7) {
  transform: rotate(240deg);
  animation-delay: -0.5s;
}

.lds-spinner div:nth-child(8) {
  transform: rotate(280deg);
  animation-delay: -0.4s;
}

.lds-spinner div:nth-child(9) {
  transform: rotate(320deg);
  animation-delay: -0.4s;
}

.lds-spinner div:nth-child(10) {
  transform: rotate(360deg);
  animation-delay: -0.4s;
}

@keyframes lds-spinner {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.error-msg {
  color: var(--color-inverse);
  font-size: 30px;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.no-coupon-container {
  padding: 0 14px;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 100vh;
}
.no-coupon-container .no-coupon-title {
  color: var(--color-inverse);
  font-size: 32px;
  font-weight: bold;
  margin-top: 20px;
}
.no-coupon-container .no-coupon-subtitle {
  color: var(--color-inverse);
  font-size: 20px;
  margin-top: 10px;
  font-weight: 100;
  opacity: 0.7;
}/*# sourceMappingURL=index.css.map */