@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Roboto:ital,wght@0,100..900;1,100..900&family=Rubik:ital,wght@0,300..900;1,300..900&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap");

.av-modal { position: fixed; inset:0; z-index: 99999; font-family: "Plus Jakarta Sans", sans-serif !important; }
.av-modal-backdrop { position:absolute; inset:0; background: rgba(0,0,0,0.5); }
.av-modal-card { position:absolute; left:50%; top:50%; transform: translate(-50%,-50%); background:#fff; border-radius:0px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
.av-modal-header { margin-bottom: 10px; }
.av-modal-body p { margin-top:0; font-size: 24px; line-height: 125%;}
.av-status { min-height: 0px; margin: 10px 0; 
  font-weight: 600;
  font-size: 14px;
  line-height: 140%;
  letter-spacing: 0px;
  text-align: center;
 }
/* #av-connect, #av-verify { margin-right: 8px; } */
.av-modal-wrapper {border: 1px solid rgba(0, 0, 0, 0.2); max-width:575px; text-align: center;}
.av-modal-button-wrapper {display: flex; column-gap: 16px; justify-content: center; margin-bottom: 18px; margin-left: auto; margin-right: auto; width:362px;}
#av-connect.button {background: linear-gradient(90deg, #AF966D 0%, #9E8862 100%); }
#av-verify.button { border: 1px solid rgba(0, 0, 0, 0.4); background: #fff; padding: 17px 36px; color: #000; }
#av-connect.button {padding: 18px 36px; position: relative;}
#av-connect.button:hover, #av-verify.button:hover {color: #fff; background: #000000;}
.av-instruction {background: rgba(163, 140, 101, 0.1); max-width: 362px; border-radius: 8px; padding: 15px 30px; margin: 0 auto;}
.av-instruction span, .av-instruction p {font-size: 13px; line-height:18px;   margin-top: 0px;  display: block;}
.av-modal-body p.av-disclaimer {font-size: 13px;  color: rgba(0, 0, 0, 0.6); margin-bottom: 0px; margin-top: 40px;}
/*badge for verify later*/
.verify-status-badge { position: fixed; bottom: 15px;left: 5px; padding: 0px; background: transparent; z-index: 9; border-radius: 0px; border: 0px solid #757575; }
.verify-status-badge .not-verified, .verify-status-badge .verified { border: 0px solid rgba(0, 0, 0, 0.2);  margin: 0px 10px;}
.av-status.error {background: #FFE8E5;  border-radius: 8px; padding: 15px 30px; margin: 0 auto 8px auto;}
.av-status.success {background: #E5FFE8;  border-radius: 8px; padding: 15px 30px; margin: 0 auto 8px auto;}
.av-status.progress {background: #FFF5E5;  border-radius: 8px; padding: 15px 30px; margin: 0 auto 8px auto;}
#av-connect.loading { color: transparent !important; pointer-events: none; opacity: 0.9;}
#av-connect.loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    margin-left: -9px;
    border: 2px solid rgba(255, 255, 255, 0.4); /* faint outer ring */
    border-top: 2px solid #fff; /* visible spinning part */
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
  
  /* Spin animation */
  @keyframes spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
/* end badge css*/
@media (max-width: 768px) {
    .av-modal-card { width:95%;}
    .av-modal-button-wrapper { flex-direction: column; row-gap: 16px; width: 100%;}
    .av-instruction {padding: 15px 15px;}
    .av-instruction span, .av-instruction p {line-height:18px; font-size: 13px;}
    .av-modal-body p.av-disclaimer {font-size: 11px; }
}

/* Payment section styles */
#av-wallet-payment-section {
    padding: 5px;
}

#av-make-payment-btn{
  display: flex;
  align-self: center;
}
#av-make-payment-btn img {
    max-height : 40px !important;
    vertical-align: middle; 
    margin: 0;
}

#av-make-payment-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}

#av-payment-status {
    margin: 10px 0;
    min-height: 20px;
    display: none;
}

#av-payment-status p {
    margin: 5px 0;
    font-weight: bold;
}



/* Brand design updates by Harshitha */
.av-modal-identity-card {
  display: none;
}
.av-modal-verify-card {
  display: block;
}
.av-qr-instruction {
  margin: 20px 0 22px 0 !important;
}
.av-small-text {
  font-size: 13px !important;
  color: #000 !important;
  font-style: normal;
  font-weight: 600;
  line-height: 140%;
}
.av-x-small-text {
  font-size: 12px !important;
  color: rgba(27, 39, 53, 0.7) !important;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
}
.av-text-decor {
  text-decoration: underline;
}
.av-font-100 { font-weight: 100 !important; }
.av-font-200 { font-weight: 200 !important; }
.av-font-300 { font-weight: 300 !important; }
.av-font-400 { font-weight: 400 !important; }
.av-font-500 { font-weight: 500 !important; }
.av-font-600 { font-weight: 600 !important; }
.av-font-700 { font-weight: 700 !important; }
.av-font-800 { font-weight: 800 !important; }
.av-font-900 { font-weight: 900 !important; }
.av-connect-button {
  text-decoration: none;
  border-radius: 60px;
  background: #1b2735;
  box-shadow: 0 17.802px 11.868px -11.868px rgba(0, 0, 0, 0.25);
  padding: 5px 22px;
  height: 40px;
  display: flex;
  align-items: center;
  width: 290px;
  justify-content: center;
  margin: 0 auto;
  color: #fff !important;
  font-weight: 600;
  font-size: 13px;
  line-height: 140%;
  letter-spacing: 0px;
  text-align: center;

}
.av-modal-verify-later {
  display: flex;
  height: 40px;
  padding: 5.934px 22.253px;
  justify-content: center;
  align-items: center;
  border-radius: 59.341px;
  border: 1px solid rgba(27, 39, 53, 0.40);
  gap: 7.418px;
  width: 290px;
  margin: 16px auto !important;
}
.av-modal-powered-by-footer {
  border-radius: 8px;
  background: rgba(242, 242, 242, 0.7);
  padding: 16px;
}
.av-powered-by-text {
    margin-bottom: 13px !important;
}
.av-powered-by-logo {
  vertical-align: middle;
  margin-left: 8px;
  margin-top: 0px;
}
.av-modal-qr-code {
  margin-top: 24px;
}
.av-usp-list {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  margin: 24px 0px;
  align-items: center;
}
.av-usp-item {
  column-gap: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  max-width: 330px;
  text-align: left;
}
.av-usp-item p {
  margin: 0px !important;
  color: #1B2735 !important;
}
.av-modal-header-text {
  color: #000;
  text-align: center;
  font-size: 24px !important;
  font-style: normal;
  font-weight: 600;
  line-height: 140% !important; /* 33.6px */
  letter-spacing: -0.35px;
  margin-bottom: 20px !important;
}
.av-modal-success-card {
  display: none;
  text-align: center;
}
.av-verify-button .success {
  margin-top: 24px !important;
}
.av-medium-text{
  font-size: 14px !important;
  color: #000 !important;
  font-style: normal;
  font-weight: 600;
  line-height: 140%;
}
.av-learn-more {
  margin: 24px 0px 0px 0px !important;
}
.av-modal-content{
  padding: 27px 49px 45px !important;
}
.av-step { display:none; width: 575px;}
.av-step.active { display:block; }

.av-modal-powered-by-footer.logo-only .av-powered-by-text { display:none; }
.back-arrow-wrapper {
  display: flex;
  padding: 20px 0 0 20px;
}

.back-arrow-wrapper img{ margin-right: 5px; vertical-align: middle; width: 20px; height: 20px; }

.back-arrow-wrapper span {
  color: rgba(27, 39, 53, 0.7) !important;
}

p.av-modal-subheader-text{
  margin-bottom: 32px;
}

.av-step[data-step="2"] .av-modal-content {
  padding-top: 0px !important;
}

.av-step[data-step="3"] .av-modal-content {
  padding-top: 0px !important;
}

.av-step[data-step="3"] .av-connect-button {
  width: 325px;
}

.av-step[data-step="5"] .av-connect-button {
  width: 113px;
  margin-top: 24px;
}

.av-step[data-step="6"] .av-connect-button {
  width: 83px;
}

.av-x-large-text {
  font-weight: 600;
  font-size: 24px !important;
  color: rgba(0, 0, 0, 1) !important;
  line-height: 140%;
  letter-spacing: 0%;
  text-align: center;
}

.av-large-text {
  font-weight: 400;
  font-size: 16px !important;
  color: rgba(0, 0, 0, 1) !important;
  line-height: 140%;
  letter-spacing: 0px;
}

.divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: rgba(27, 39, 53, 0.5);  
  font-size: 14px;
  font-weight: 500;
  margin: 16px auto;    
  width: 175px; 
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid rgba(27, 39, 53, 0.5);  /* line color */
  margin: 0 0.75em;               /* gap from the "or" text */
}

.divider span {
  white-space: nowrap; /* prevents wrapping */
}
.av-mobile-links {
  display: none;
  flex-direction: column;
  row-gap: 16px;
  margin-top: 24px;
}

/* Only show .mobile-only on screens <= 768px, hide otherwise */
.mobile-only {
  display: none;
}

@media (max-width: 768px) {
  .av-step { width: 100%; }
  .av-modal-content { padding: 23px !important; }
  .av-connect-button { width: 100%; }
  .av-modal-verify-later { width: 100%; }
  .av-mobile-links { display: flex; }
  .desktop-only{
    display: none !important
  }
  .mobile-only{
    display: block !important;
  }
  p.av-modal-subheader-text{
    margin-bottom: 16px;
  }
  .av-comeback-text{
    margin-top: 16px !important;
  }
  .mobile-header, .av-modal-header-text{
    font-weight: 600;
    font-size: 18px;
    line-height: 140%;
    letter-spacing: 0px;
    text-align: center;
  }
  .av-step[data-step="3"] .av-modal-content {
    padding-top: 18px !important;
  }
  .av-usp-item img{
    width: 16px !important;
    height: 16px !important;
  }
  .av-disconnect-button{
    width: 100% !important;
  }
}

#payment .payment_methods li .payment_box{
	background: rgba(242, 242, 242, 1);
}
.av-mute-text{
  color: rgba(27, 39, 53, 0.5) !important;
}

.av-mute-text1 {
  color: rgba(27, 39, 53, 1) !important;
}
.desktop-only{
  display: block;
}
#qrcode{
  margin: 0 auto;
  height: 120px;
  width: 120px;
  border-radius: 8px;
  border: 1px solid rgba(219, 219, 219, 1);
}
.av-disconnect-button{
  display: flex;
  height: 40px;
  padding: 5.934px 22.253px;
  justify-content: center;
  align-items: center;
  border-radius: 59.341px;
  border: 1px solid rgba(27, 39, 53, 0.40);
  gap: 7.418px;
  width: 290px;
  margin: 16px auto !important;
}

.av-verify-button.id-connected {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.learn-more{
  margin: 20px 0px 0px 0px !important;
}

#payment .place-order .button:disabled{
  background: #ccc !important;
  cursor: not-allowed !important;
}