@charset "utf-8";

@keyframes slideDown { 
  0% { transform: translateY(0px); }
  100% { transform: translateY(100%); }
}

@keyframes slideUp { 
  0% { transform: translateY(100%); }
  100% { transform: translateY(0px); }
}

@keyframes slideToLeft { 
  0% { transform: translateX(100%); }
  100% { transform: translateX(0px); }
}

@keyframes slideToRight { 
  0% { transform: translateX(0px); }
  100% { transform: translateX(100%); }
}

.loyalty-modal__icon { display: inline-block; position: relative; height: 1.5rem; width: 1.5rem; padding: 0.75rem; cursor: pointer; }

.loyalty-modal__icon:hover .loyalty-modal__icon-bg { background: rgba(204, 204, 204, 0.5); transform: scale(1); }

.loyalty-modal__icon-bg { position: absolute; left: 0px; top: 0px; display: block; border-radius: 50%; width: 100%; height: 100%; transform: scale(0); transition-property: transform, background-color; transition-duration: 0.3s; transition-timing-function: cubic-bezier(0.4, 0, 0, 1); }

.loyalty-modal__icon-svg { position: relative; z-index: 1; }

.loyalty-modal__modal { position: absolute; top: 0px; right: 0px; bottom: 0px; width: 100%; background: rgb(var(--colour-elevation-2, 255, 255, 255)); z-index: 9001; overflow-y: auto; display: flex; flex-shrink: 0; flex-direction: column; text-align: left; animation: 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s 1 normal forwards running slideDown; pointer-events: none; }

.loyalty-modal__modal--open { animation: 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s 1 normal forwards running slideUp; display: flex; flex-direction: column; pointer-events: all; }

.loyalty-modal__lightbox { opacity: 0; position: fixed; inset: 0px; display: flex; justify-content: center; align-items: center; z-index: 10000; transition: opacity 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), visibility 0.3s; pointer-events: none; background: rgba(0, 0, 0, 0.15); }

.loyalty-modal__lightbox--open { opacity: 1; visibility: visible; transition: opacity 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), visibility; pointer-events: all; }

@media (min-width: 37.5em) {
  .loyalty-modal__modal { width: 31.25rem; animation: 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s 1 normal forwards running slideToRight; }
  .loyalty-modal__modal--open { animation: 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s 1 normal forwards running slideToLeft; }
  #loyalty-modal__modal-closer { position: absolute; inset: 0px 31.25rem 0px 0px; }
}

.loyalty-modal__loading { align-items: center; display: flex; flex-direction: column; justify-content: center; opacity: 1; margin-top: 10vh; }

.loyalty-modal__loading--inactive { opacity: 0; transform: translateY(-2.5rem); transition: transform 0.5s, opacity 0.5s; }

.loyalty-modal__loading__ball-wrapper { height: 2.8125rem; margin-top: 1.875rem; }

.loyalty-modal__loading__ball { transform-origin: center bottom; background: rgb(0, 88, 163); border-radius: 50%; height: 0.9375rem; width: 0.9375rem; opacity: 0; transition: opacity 0.2s; }

.loyalty-modal__loading__ball--active { opacity: 1; animation: 0.7s ease 0.1s infinite normal none running loading-bounce; }

@media (prefers-reduced-motion: reduce) {
  .loyalty-modal__loading--inactive { transition: none; }
  .loyalty-modal__loading__text { transition: none; }
  .loyalty-modal__loading__ball { animation: auto ease 0s 1 normal none running none; transition: none; }
}

@-webkit-keyframes loading-bounce { 
  0% { transform: translateY(0px); animation-timing-function: cubic-bezier(0.42, 0, 1, 1); }
  40% { transform: translateY(1.875rem) scaleY(1); animation-timing-function: ease-in; }
  50% { transform: translateY(1.875rem) scaleY(0.75); animation-timing-function: ease-out; }
  60% { transform: translateY(1.875rem) scaleY(1); animation-timing-function: cubic-bezier(0, 0, 0, 1); }
  100% { transform: translateY(0px); }
}

@keyframes loading-bounce { 
  0% { transform: translateY(0px); animation-timing-function: cubic-bezier(0.42, 0, 1, 1); }
  40% { transform: translateY(1.875rem) scaleY(1); animation-timing-function: ease-in; }
  50% { transform: translateY(1.875rem) scaleY(0.75); animation-timing-function: ease-out; }
  60% { transform: translateY(1.875rem) scaleY(1); animation-timing-function: cubic-bezier(0, 0, 0, 1); }
  100% { transform: translateY(0px); }
}

.loyalty-modal__close-button { width: 2.5rem; height: 2.5rem; color: rgb(var(--colour-static-black, 17, 17, 17)); border-width: 0px; border-style: initial; border-image: initial; transition-property: background-color; transition-duration: 0.3s; transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); display: flex; align-items: center; justify-content: center; cursor: pointer; background-color: rgb(var(--colour-static-white, 255, 255, 255)); border-radius: 50%; border-color: rgb(var(--colour-neutral-1, 255, 255, 255)); position: absolute; top: 1.5625rem; right: 1.5rem; }

@media (min-width: 37.5em) {
  .loyalty-modal__close-button { right: 2.3125rem; }
}

.loyalty-modal__close-button svg { min-width: 1.5rem; min-height: 1.5rem; }

.loyalty-modal__close-button:hover { background-color: rgb(var(--colour-static-light-grey, 245, 245, 245)); }

.loyalty-modal__close-button:focus { outline: none; background-color: rgb(var(--colour-neutral-3, 223, 223, 223)); }