/* login sidebox */

.login-box {
  position: fixed;
  right: 0;
  top: 0;
  background-color: #fff;
  max-width: 400px;
  height: 100%;
  max-height: 100dvh;
  width: 100%;
  z-index: 9999999999999999;
  padding-block: 100px 40px;
  text-align: center;
  overflow: auto;
  transition: all 0.3s;
  transform: translateX(200px);
  opacity: 0;
  pointer-events: none;
}

.login-box.on {
  opacity: 1;
  transform: translateX(0);
  pointer-events: all;
}

.login-box .login-wrapper,
.login-box .login-wrapper-auto,
.login-box .login-form .login-box .login-otp-wrapper {
  padding-block: 0;
}

.login-box .login-intro {
  margin-bottom: 2rem;
  font-size: 14px;
  text-wrap: pretty;
  text-align: center;
}
.login-box .login-intro > p {
  line-height: 115%;
}

.login-box .login-form {
  margin-bottom: 30px;
}
.login-box .login-form form {
  padding: 0;
}

.login-box-wrapper {
  overflow: scroll;
}

.close-login-box {
  position: absolute;
  right: 1rem;
  top: 1rem;
  width: 24px;
  aspect-ratio: 1;
  cursor: pointer;
}

.close-login-box > span {
  width: 80%;
  position: absolute;
  border-top: 1px solid #000;
  left: 10%;
  top: 50%;
  transform-origin: center;
  transform: rotate(45deg);
}

.close-login-box > span:last-of-type {
  transform: rotate(-45deg);
}

.login-box .forgot-wrapper,
.login-box .reset-wrapper,
.login-box .verify-email-wrapper,
.login-box .thank-you-wrapper,
.login-box.forgot-on .login-wrapper,
.login-box.register-on .login-wrapper,
.login-box.login-auto-on .login-wrapper,
.login-box .register-wrapper,
.login-box .social-register-wrapper,
.login-box .wh-register-wrapper,
.login-box .login-wrapper-auto {
  display: none;
}

.login-box.forgot-on .forgot-wrapper,
.login-box.verify-email-on .verify-email-wrapper,
.login-box.thank-you-on .thank-you-wrapper,
.login-box.reset-on .reset-wrapper,
.login-box.register-on .register-wrapper,
.login-box.social-register-on .social-register-wrapper,
.login-box.wh-register-on .wh-register-wrapper,
.login-box.login-auto-on .login-wrapper-auto {
  display: block;
}

.login-box .forgot-wrapper,
.login-box .verify-email-wrapper,
.login-box .thank-you-wrapper,
.login-box .reset-wrapper,
.login-box .register-wrapper,
.login-box .social-register-wrapper,
.login-box .wh-register-wrapper {
  padding: 0 2rem;
  text-align: left;
}

.login-box .register-wrapper input::placeholder,
.login-box .social-register-wrapper input::placeholder,
.login-box .wh-register-wrapper input::placeholder {
  color: #000;
  font-family: GothamGreek-Medium;
}

.login-box #registrationForm,
.login-box #socialRegistrationForm {
  padding-top: 0;
}

.login-box .back-to-login-btn {
  width: fit-content;
  border-bottom: 1px solid #000;
  font-size: 12px;
  margin-bottom: 1rem;
  cursor: pointer;
}

/* login / register */

.loyalty .login-wrapper,
.loyalty .login-wrapper-auto,
.loyalty .login-otp-wrapper {
  max-width: 800px;
  font-family: "GothamGreek-Book", sans-serif;
}

.loyalty .login-form-wrapper > * {
  flex: 1;
  padding-inline: 2rem;
}

.loyalty .login-form-actions {
  align-items: center;
  justify-content: flex-start;
  margin-top: -1rem;
  margin-bottom: 1rem;
  font-size: 12px;
  font-family: "GothamGreek-Medium", sans-serif;
}
.loyalty .login-form-actions > span {
  display: block;
  margin-inline: auto 0;
  font-size: 12px;
  line-height: 16px;
  position: relative;
  text-decoration: underline;
  font-family: "GothamGreek-Medium", sans-serif;
  cursor: pointer;
}

.login-form input[type="checkbox"] {
  width: 1rem;
  margin-right: 1ch;
  padding-block: 0;
  margin-block: 0;
}

.form-input input {
  border: none;
  border-bottom: 0.5px solid #000;
  font-family: "GothamGreek-Book", sans-serif;
  padding: 5px 0;
  font-size: 14px;
}
.form-input label {
  font-family: "GothamGreek-Medium", sans-serif;
  font-size: 14px;
  padding-bottom: 10px;
}

.social-sign {
  width: 100%;
  margin-top: 20px;
}

.social-sign .seperator {
  margin-block: 30px;
  position: relative;
}
.social-sign .seperator::before {
  content: "";
  border-top: 1px solid #000;
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
}

.social-sign .seperator span {
  display: block;
  border: 1px solid #000;
  padding: 10px 17px;
  background-color: #fff;
  font-size: 16px;
  width: fit-content;
  margin-inline: auto;
  position: relative;
}

.social-sign > h4 {
  font-size: 14px;
  padding-bottom: 12px;
  margin-bottom: 1rem;
}
.social-sign .social-icons-wrapper {
  gap: 20px;
  justify-content: center;
}
.social-sign .social-icon {
  border: 1px solid #000;
  padding: 5px;
  aspect-ratio: 1;
  width: 2.5rem;
  cursor: pointer;
  background-color: #000;
}
.social-sign .social-icon img {
  filter: brightness(0) invert(1);
}

.not-user-wrapper {
  align-self: center;
  /* padding-top: 1rem; */
}

.not-user-text {
  /* padding-top: 1rem; */
  /* border-top:1px solid #000; */
}
.not-user-text p span,
.not-user-text p {
  font-size: 18px;
  /* padding-inline: 2rem; */
  line-height: 100%;
  letter-spacing: 0.9px;
  font-family: "GothamGreek-Book", sans-serif;
  text-transform: uppercase;
}

.not-user-text h3 {
  margin-bottom: 22px;
}
.not-user-text p span {
  display: block;
  font-size: 14px;
}

.not-user-wrapper span.register {
  border: 1px solid #000;
  line-height: 100%;
  font-size: 14px;
  padding: 8px 14.5px;
  margin-top: 2rem;
  letter-spacing: 0.28px;
}
.not-user-wrapper .logo {
  max-width: 200px;
  margin: 0 auto 2rem;
}

.register-communiction {
  opacity: 0;
  display: none;
  transition: opacity 0.3s;
}
.register-communiction.block {
  display: block;
}
.register-communiction.on {
  opacity: 1;
}

.register-details {
  flex-wrap: wrap;
  justify-content: space-between;
  opacity: 0;
  display: none;
  transition: opacity 0.3s;
}

.register-details.block {
  display: flex;
}
.register-details.on {
  opacity: 1;
}

.register-next-btn {
  width: fit-content;
  background-color: #000;
  color: #fff;
  font-size: 14px;
  padding: 8px 14.5px;
  margin-top: 2rem;
}

.loyalty .login-form button,
.not-user-wrapper .register {
  width: fit-content;
  margin-inline: auto;
}

.existing-account-alert {
  display: none;
  text-align: center;
  margin-bottom: 3rem;
  border: 2px solid #000;
  width: 100%;
  padding: 2rem;
}
.freeze .existing-account-alert {
  display: block;
}

.existing-account-alert a {
  text-decoration: underline;
  font-weight: 600;
}

.loyalty .form-input.full {
  width: 100%;
}

.loyalty .register-form p {
  margin-top: 2rem;
  font-size: 12px;
}
.loyalty .register-form h4 {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid #000;
  font-size: 14px;
  text-align: center;
}

.loyalty .register-form h4 + .back-to-login-btn {
  margin: 1rem auto 0;
  border: 1px solid #000;
  padding: 8px 14.5px;
}

.loyalty .register-form .social-sign {
  margin-top: 0;
}
.loyalty .register-form .social-sign h4 {
  margin-top: 1rem;
  border-top: none;
}

.loyalty .register-form .btn-verification {
  width: fit-content;
  padding: 8px 14.5px;
  font-size: 14px;
  background-color: #000;
  color: #fff;
  margin-block: 2rem 1rem;
  cursor: pointer;
}

.register-disclaimer {
  font-size: 14px;
  margin-top: 2rem;
}
.register-disclaimer label {
  margin-top: -1.75rem;
  display: block;
  padding-left: 2rem;
  font-size: 12px;
}

.loyalty .register-details > h3 {
  font-weight: 600;
  /* border-bottom: 2px solid #000; */
  margin-block: 4rem 0;
  width: 100%;
}

.loyalty .register-details > h3:first-of-type {
  margin-top: 0;
}

#registrationForm.freeze .form-input:not(.freeze-free) > select,
#registrationForm.freeze .form-input:not(.freeze-free) > input,
#socialRegistrationForm.freeze .form-input:not(.freeze-free) > select,
#socialRegistrationForm.freeze .form-input:not(.freeze-free) > input {
  background-color: #596063;
  opacity: 0.7;
}

.loyalty .register-details .register-btn {
  margin-inline: auto;
  width: fit-content;
}

.loyalty .form-input > h4 {
  font-family: "GothamGreek-Medium", sans-serif;
  font-size: 14px;
  /* padding-bottom: 10px; */
}
.loyalty .form-input > p {
  border: none;
  font-family: "GothamGreek-Book", sans-serif;
  padding: 5px 0;
  font-size: 14px;
}
.loyalty .input-full > p > a,
.loyalty .form-input > p > a {
  text-decoration: underline;
  font-size: 14px;
}

.loyalty .form-input > h6 {
  font-family: "GothamGreek-Medium", sans-serif;
  font-size: 9px;
  margin-top: 4px;
  /* padding-bottom: 10px; */
}

.form-input.tel > input:first-of-type {
  width: 25%;
}
.form-input.tel > input:last-of-type {
  width: calc(75% - 25px);
}

.loyalty .register-form > h3:first-of-type,
.loyalty .register-form > h3:first-of-type + span {
  text-align: center;
  display: block;
  text-wrap: pretty;
}

.login-wrapper span,
.login-otp-wrapper span {
  font-size: 14px;
  line-height: 21px;
  display: block;
  padding: 16px 0 9px;
  letter-spacing: 0.26px;
}
.login-form {
  padding: 80px 0;
}
.login-form form {
  padding: 10px 17px 34px;
}
.login-form input {
  width: 100%;
  border: none;
  margin: 30px 0 0;
  border-bottom: 1px solid #000;
  padding: 14.5px 0;
  font-family: "GothamGreek-Medium", sans-serif;
  font-size: 14px;
  line-height: 30px;
}
.login-form input::placeholder {
  color: #000;
}
.login-form input:focus,
.register-form input:focus,
.form-input select:focus {
  outline: none;
}
.login-wrapper h3,
.login-otp-wrapper h3 {
  font-size: 18px;
  letter-spacing: 0.9px;
  padding-block: 20px;
  border-bottom: 1px solid #000;
}
.login-wrapper h5,
.login-otp-wrapper h5 {
  font-size: 14px;
  font-family: "GothamGreek-Medium", sans-serif;
}
.loyalty button {
  font-size: 14px;
  font-family: "GothamGreek-Book", sans-serif;
  letter-spacing: 1px;
  cursor: pointer;
}
.loyalty button.login {
  padding: 8px 14.5px;
  margin-top: 30px;
  border: none;
  background-color: #000;
  color: #fff;
  cursor: pointer;
}
.loyalty span.register {
  padding: 8px 13px;
  background-color: transparent;
  border: 1px solid #000;
  cursor: pointer;
  width: fit-content;
  margin: 30px auto 0;
  font-family: "GothamGreek-Medium", sans-serif;
  letter-spacing: 1px;
}

.loyalty .register-wrapper,
.loyalty .social-register-wrapper,
.loyalty .wh-register-wrapper {
  max-width: 700px;
  margin: 0 auto;
  font-family: "GothamGreek-Book", sans-serif;
}
.loyalty .form-input {
  position: relative;
  display: flex;
  flex-direction: column;
  width: calc((100% - 25px) / 2);
  padding: 30px 0 0;
}
#registrationForm,
#socialRegistrationForm {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-top: 30px;
}

.register-wrapper .title-wrapper,
.social-register-wrapper .title-wrapper,
.wh-register-wrapper .title-wrapper {
  padding-bottom: 59px;
}

.register-form h3 {
  font-size: 18px;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #000;
}
.register-form span {
  font-size: 14px;
}

.register-form button {
  padding: 8px 14.5px;
  background-color: #000;
  border: 0.5px solid #000;
  font-family: "GothamGreek-Book", sans-serif;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
}

.login-form input:focus,
.register-form input:focus,
.form-input select:focus {
  outline: none;
}
.form-input select {
  font-size: 14px;
  font-family: "GothamGreek-Book", sans-serif;
  border: none;
  border-bottom: 0.5px solid #000;
  padding: 5px 0;
  appearance: auto;
}

.login-form input[type="checkbox"] {
  width: 1rem;
  margin-right: 1ch;
  padding-block: 0;
  margin-block: 0;
}

#communication-form input[type="checkbox"],
.register-disclaimer input[type="checkbox"],
.login-form input[type="checkbox"],
.edit-account-wrapper input[type="checkbox"],
#completeRegistrationForm input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
  border: 1px solid #000;
  padding: 9px;
  display: inline-block;
  position: relative;
}

#communication-form input[type="checkbox"]:checked::after,
.register-disclaimer input[type="checkbox"]:checked::after,
.login-form input[type="checkbox"]:checked::after,
.edit-account-wrapper input[type="checkbox"]:checked::after,
#completeRegistrationForm input[type="checkbox"]:checked::after {
  content: "\2714";
  font-size: 18px;
  position: absolute;
  bottom: -2px;
  left: 2px;
  color: #000;
}

.loyalty .login-form-actions {
  align-items: center;
  justify-content: flex-start;
  margin-top: -1rem;
  margin-bottom: 30px;
  font-size: 12px;
  font-family: "GothamGreek-Book", sans-serif;
}
.loyalty .login-form-actions > span {
  display: block;
  margin-left: auto;
  font-size: 12px;
  line-height: 16px;
  position: relative;
  text-decoration: underline;
  font-family: "GothamGreek-Book", sans-serif;
  padding-top: 30px;
}

.register-form {
  font-family: "GothamGreek-Book", sans-serif;
}

.register-form .rf {
  padding-top: 13px;
  font-size: 12px;
  width: 100%;
}

.register-form h3 {
  font-size: 18px;
  padding-bottom: 1rem;
}
.register-form span {
  font-size: 14px;
  margin-top: 1rem;
  text-align: center;
  display: block;
  text-wrap: pretty;
}

/* panel */

.panel {
  position: fixed;
  left: 0;
  top: 0;
  width: 100dvw;
  height: 100dvh;
  background-color: rgba(0, 0, 0, 0.8);
  opacity: 0;
  pointer-events: none;
  display: none;
}

.panel.panel-on {
  opacity: 1;
  pointer-events: all;
  z-index: 999999999;
  display: block;
}

.account-btn {
  position: fixed;
  background-color: #fff;
  padding: 8px 1rem;
  font-size: 14px;
  right: 120px;
  top: 54px;
  cursor: pointer;
  z-index: 9999999900;
  display: flex;
  align-items: center;
  gap: 1ch;
}

.account-btn > * {
  display: block;
}
.account-btn > img {
  width: 1rem;
}

.thankyou {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  width: 90%;
  max-width: 400px;
  padding: 2rem 3rem !important;
  background-color: #fff;
  text-align: center;
  font-family: "GothamGreek-Book", sans-serif;
  opacity: 0;
  display: none;
  pointer-events: none;
  z-index: 9999999901;
}

.thankyou.on {
  opacity: 1;
  display: block;
  pointer-events: all;
}

.thankyou h3 {
  font-family: "GothamGreek-Medium", sans-serif;
  text-transform: uppercase;
  font-size: 18px;
}

.thankyou-btn {
  position: fixed;
  left: 0;
  bottom: 0;
  background-color: red;
  font-size: 12px;
  padding: 1rem 2rem;
}

.thankyou-close {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  height: 1.5rem;
  width: 1.5rem;
  z-index: 999999999;
}
.thankyou-close > span {
  position: absolute;
  width: 100%;
  border-top: 1px solid #000;
  transform-origin: center;
  transform: rotate(45deg);
  cursor: pointer;
}
.thankyou-close > span:last-of-type {
  transform: rotate(-45deg);
}

.thankyou .greeting {
  padding-bottom: 1rem;
  border-bottom: 1px solid #000;
  margin-bottom: 2rem;
}
.thankyou .greeting h3:first-of-type {
  font-family: "GothamGreek-Book", sans-serif;
}
.thankyou h3 {
  font-size: 20px;
  line-height: 24px;
}
.thankyou h3 span {
  font-size: inherit;
  font-weight: 600;
  display: inline;
}
.thankyou :is(h3, h4) {
  padding-block: 0;
  text-wrap: pretty;
}

.thankyou > h4:not(:last-of-type) {
  margin-bottom: 1rem;
}

.thankyou button {
  margin: 40px auto 2rem;
  padding: 8px 14.5px;
  border: none;
  background-color: #000;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  font-family: "GothamGreek-Book", sans-serif;
}

.thankyou button[disabled] {
  background-color: #a1a1a1;
}
.thankyou button + h5 {
  display: none;
}
.thankyou button[disabled] + h5 {
  display: block;
}

.loyalty .forgot-wrapper,
.loyalty .verify-email-wrapper,
.loyalty .thank-you-wrapper,
.loyalty .reset-wrapper {
  max-width: 700px;
  margin-top: 2rem;
}
.loyalty .forgot-wrapper .logo img,
.loyalty .verify-email-wrapper .logo img,
.loyalty .thank-you-wrapper .logo img,
.loyalty .reset-wrapper .logo img {
  width: 100%;
}
.loyalty .forgot-wrapper .right-side,
.loyalty .verify-email-wrapper .right-side,
.loyalty .thank-you-wrapper .right-side,
.loyalty .reset-wrapper .right-side {
  /* border-left : 1px solid #000; */
  padding-block: 2rem;
}
.loyalty .forgot-wrapper .right-side h3,
.loyalty .reset-wrapper .right-side h3 {
  font-family: "GothamGreek-Medium", sans-serif;
}
.forgot-wrapper h3,
.verify-email-wrapper h3,
.reset-wrapper h3 {
  display: flex;
  justify-content: center;
  font-size: 18px;
  text-align: center;
  font-family: "GothamGreek-Book", sans-serif;
  border-bottom: 1px solid #000;
  padding-bottom: 1rem;
}
.forgot-wrapper,
.verify-email-wrapper,
.reset-wrapper {
  text-align: center;
  max-width: 370px;
  margin: 0 auto;
}
.forgot-wrapper img,
.verify-email-wrapper img,
.reset-wrapper img {
  width: 20px;
}
.forgot-wrapper input,
.verify-email-wrapper input,
.reset-wrapper input {
  width: 100%;
  text-align: center;
  padding: 10px;
  margin: 22px 0;
  font-size: 14px;
  border-radius: 0;
  outline: none;
  border: unset;
  border-bottom: 1px solid #000;
  font-family: "GothamGreek-Book", sans-serif;
}
.forgot-wrapper .msg,
.forgot-wrapper label,
.verifiy-email-wrapper .msg,
.verifiy-email-wrapper label,
.reset-wrapper .msg,
.reset-wrapper label,
.forgot-wrapper p.explainer,
.reset-wrapper p.explainer {
  color: #000;
  font-size: 14px;
  font-family: "GothamGreek-Book", sans-serif;
  text-align: center;
  display: block;
  line-height: 115%;
  margin-bottom: 10px;
}
.forgot-wrapper form,
.verify-email-wrapper form,
.reset-wrapper form {
  padding: 16px 0;
  margin-top: 1rem;
}
.forgot-wrapper button,
.verify-email-wrapper button,
.reset-wrapper button {
  padding: 8px 14.5px;
  border-radius: 0;
  border: none;
  background-color: #000;
  color: #fff;
  cursor: pointer;
  margin-inline: auto;
  display: block;
  margin-top: 4px;
}

.forgot-wrapper.msg-on form,
.forgot-wrapper .msg,
.verify-email-wrapper.msg-on form,
.verify-email-wrapper .msg,
.reset-wrapper.msg-on form,
.reset-wrapper .msg {
  display: none;
}

.forgot-wrapper.msg-on .msg,
.verify-email-wrapper.msg-on .msg,
.reset-wrapper.msg-on .msg {
  display: block;
  margin-top: 2rem;
  text-wrap: balance;
}

.forgot-wrapper .msg button,
.verify-email-wrapper .msg button,
.reset-wrapper .msg button {
  margin-top: 2rem;
}

@media screen and (max-width: 640px) {
  .loyalty .forgot-wrapper .right-side,
  .loyalty .verify-email-wrapper .right-side,
  .loyalty .reset-wrapper .right-side {
    border: none;
  }
}

/* form response */
.form__response {
  opacity: 0;
  visibility: hidden;
  width: 100%;
}

.form__response.dismissable {
  position: relative;
  min-height: 1rem;
}

.form__response .response__message {
  font-size: 12px;
  line-height: 15px;
  margin: 0;
  text-align: left;
}

.response__dismiss {
  position: absolute;
  height: 20px;
  width: auto;
  top: 0;
  right: 0;
  cursor: pointer;
}

.form__response.show {
  opacity: 1;
  visibility: visible;
  padding: 1rem 2rem 1rem 0;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  transition: opacity 0.5s ease-in;
  color: #00ad5f;
}

.login-form-wrapper .form__response.show,
.login-form-wrapper .form__response {
  padding: 0 2rem 1rem 0;
}

.form__response.error {
  color: #fa4251;
}

/* otp screen */
.login-box .login-otp-wrapper {
  display: none;
}

.login-box.login-otp-on .login-otp-wrapper {
  display: block;
}

.login-box.login-otp-on .login-wrapper {
  display: none;
}

.login-otp-wrapper .login-form h3 {
  margin-block: 3rem 1rem;
}

.security__msg {
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ==============================
    PNL OVERRIDES
============================== */
/* reset password screen */
.login-box .reset-wrapper {
  display: none;
}

.login-box.reset-on .reset-wrapper {
  display: block;
}

.login-box.reset-on .login-wrapper {
  display: none;
}

/* verify email screen */
.login-box .verify-email-wrapper {
  display: none;
}

.login-box.verify-email-on .verify-email-wrapper {
  display: block;
}

.login-box.verify-email-on .login-wrapper {
  display: none;
}

/* thank you screen */

.login-box .thank-you-wrapper {
  display: none;
}

.login-box.thank-you-on .thank-you-wrapper {
  display: block;
}

.login-box.thank-you-on .login-wrapper {
  display: none;
}

/* social register screen */
.login-box .social-register-wrapper,
.login-box .wh-register-wrapper {
  display: none;
}

.login-box.social-register-on .social-register-wrapper,
.login-box.wh-register-on .wh-register-wrapper {
  display: block;
}

.login-box.social-register-on .login-wrapper,
.login-box.wh-register-on .login-wrapper {
  display: none;
}

.form-input > p.some__registration_email,
.form-input > p.wh__registration_email {
  margin: 0 0 0 0;
  border-bottom: 0.5px solid #000;
  color: rgba(0, 0, 0, 0.5);
  font-family: GothamGreek-Medium;
  padding-bottom: 0;
}

.form-input > p.some__registration_subtitle,
.form-input > p.wh__registration_subtitle {
  margin: 0 0 0 0;
  padding: 0;
  font-size: 11px;
  font-family: GothamGreek-Medium;
  font-weight: bold;
  color: #575757;
}

.social__disclaimer {
  margin-block: 20px;
  font-size: 12px;
}

.social__disclaimer a {
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: bold;
}

p.not_user__title {
  padding-top: 30px;
  border-top: 1px solid #000;
  font-size: 15px;
}

.login-form {
  padding-block: 30px;
}

label[for="registerTerms"] a {
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: bold;
}

.register-form .rf {
  text-align: left;
  margin-top: 0;
  padding-top: 13px;
}

p.old__member_disclaimer {
  font-size: 12px;
}

.old__member_disclaimer > .reset__btn {
  text-decoration: underline;
  display: inline;
  font-weight: bold;
  text-underline-offset: 2px;
  cursor: pointer;
  font-size: 12px;
}

h3.login__heading {
  margin-top: 40px;
}

.login-box .login-wrapper .input__validation.invalid,
.login-box .register-wrapper .input__validation.invalid,
.login-box .social-register-wrapper .input__validation.invalid,
.login-box .wh-register-wrapper .input__validation.invalid,
.login-box .verify-email-wrapper .input__validation.invalid,
.login-box .forgot-wrapper .input__validation.invalid,
.login-box .reset-wrapper .input__validation.invalid,
.login-box .login-wrapper-auto .input__validation.invalid {
  border-color: #fa4251;
  color: #fa4251;
}

.login-box .login-wrapper .input__validation.invalid::placeholder,
.login-box .register-wrapper .input__validation.invalid::placeholder,
.login-box .social-register-wrapper .input__validation.invalid::placeholder,
.login-box .wh-register-wrapper .input__validation.invalid::placeholder,
.login-box .verify-email-wrapper .input__validation.invalid::placeholder,
.login-box .forgot-wrapper .input__validation.invalid::placeholder,
.login-box .reset-wrapper .input__validation.invalid::placeholder,
.login-box .login-wrapper-auto .input__validation.invalid::placeholder {
  color: #fa4251;
  font-size: 12px;
}

.help-dropdown ul li {
  color: #fa4251;
  font-size: 11px;
  line-height: 17px;
}

.help-dropdown .hdw label {
  font-size: 12px;
  line-height: 17px;
  color: #fa4251;
}

.form-input label.label__validation {
  padding-bottom: 0px;
  text-align: left;
}

.help-dropdown {
  padding-top: 5px;
}

.login-form .form-input input {
  padding: 0;
  margin-top: 0px;
}

.help.hide {
  display: none;
}

.help-dropdown ul li.success {
  display: none;
}

.label__validation.hide {
  display: none;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* show/hide password */

.reset__input_holder {
  position: relative;
}

.show-hide {
  position: absolute;
  top: 45px;
  right: 5px;
  cursor: pointer;
}

.reset__input_holder .show-hide {
  top: 30px;
}

.show-hide img {
  width: 25px;
}

.show-hide .hide-pass {
  display: none;
}

.show-hide.on .hide-pass {
  display: block;
}

.show-hide.on .show-pass {
  display: none;
}

/* thankyou sidebar */

.thank-you-wrapper {
}

.loyalty .thank-you-wrapper span.register {
  margin-inline: auto;
  display: block;
}

.thank-you-wrapper p.not_user__title {
  text-align: center;
}

.thank-you-wrapper .thank-you-inline {
  font-size: 14px;
  text-align: center;
  font-family: "GothamGreek-Book", sans-serif;
  border-top: 1px dotted;
  padding-top: 2rem;
  margin-top: 1rem;
  opacity: 0;
  display: none;
}

.thank-you-wrapper .thank-you-inline.on {
  opacity: 1;
  display: block;
  pointer-events: all;
}

.thank-you-wrapper .thank-you-inline h3 {
  font-family: "GothamGreek-Medium", sans-serif;
  text-transform: uppercase;
  font-size: 18px;
}

.thank-you-wrapper .thank-you-inline-btn {
  position: fixed;
  left: 0;
  bottom: 0;
  background-color: red;
  font-size: 12px;
  padding: 1rem 2rem;
}

.thank-you-wrapper .thank-you-inline-close {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  height: 1.5rem;
  width: 1.5rem;
  z-index: 999999999;
}

.thank-you-wrapper .thank-you-inline-close > span {
  position: absolute;
  width: 100%;
  border-top: 1px solid #000;
  transform-origin: center;
  transform: rotate(45deg);
  cursor: pointer;
}

.thank-you-wrapper .thank-you-inline-close > span:last-of-type {
  transform: rotate(-45deg);
}

.thank-you-wrapper .thank-you-inline .greeting {
  padding-bottom: 1rem;
  border-bottom: 1px solid #000;
  margin-bottom: 2rem;
  border-bottom: none;
}

.thank-you-wrapper .thank-you-inline .greeting h3:first-of-type {
  font-family: "GothamGreek-Book", sans-serif;
}

.thank-you-wrapper .thank-you-inline h3 {
  font-size: 20px;
  line-height: 24px;
}

.thank-you-wrapper .thank-you-inline h3 span {
  font-size: inherit;
  font-weight: 600;
  display: inline;
}

.thank-you-wrapper .thank-you-inline :is(h3, h4) {
  /* padding-block: 0; */
  text-wrap: pretty;
}

.thank-you-wrapper .thank-you-inline > h4:not(:last-of-type) {
  margin-bottom: 1rem;
}

.thank-you-wrapper .thank-you-inline button {
  margin: 40px auto 2rem;
  padding: 8px 14.5px;
  border: none;
  background-color: #000;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  font-family: "GothamGreek-Book", sans-serif;
}

.thank-you-wrapper .thank-you-inline button[disabled] {
  background-color: #a1a1a1;
}

.thank-you-wrapper .thank-you-inline button + h5 {
  display: none;
}

.thank-you-wrapper .thank-you-inline button[disabled] + h5 {
  display: block;
}

/* Login after register */

.login-wrapper-auto .social-sign .seperator::before {
  border-top: 1px dotted #000;
}

.login-wrapper-auto .form-input > p.wh__registration_email,
.login-wrapper-auto .form-input > p.wh__registration_subtitle {
  text-align: left;
}

.login-wrapper-auto .back-to-login-btn {
  margin-left: 2rem;
}

/* Loader */

.loader-container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(200, 200, 200, 0.5);
  pointer-events: none;
  display: none;
}

.loader-container.show {
  display: flex;
  transition: all 0.5s ease-in-out;
}

.loader {
  width: 48px;
  height: 48px;
  border: 5px solid #fff;
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* unhide scrollbar for loyalty sidebar */
.login-box {
  scrollbar-width: thin;
  -ms-overflow-style: auto;
}

/* Optional: Style the scrollbar in Webkit browsers */
.login-box::-webkit-scrollbar {
  width: auto;
  height: 100%;
}

.login-box::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
}

.login-box::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.loyalty .verify-email-wrapper span.register {
  margin-inline: auto;
  display: block;
}