/* VARIABLES */
/* TYPOGRAPHY */
/* Google Fonts */
/* TYPOGRAPHY */
/* Google Fonts */
#block-saib-start-your-banking-journey-with-saib,
#block-saib-start-your-banking-journey-with-saib-qr {
  display: none;
}

.spb_overlay {
  background-color: rgba(26, 28, 30, 0.6980392157);
}
.spb_overlay.row{
  padding-inline: 10px;
}
.block-saib-start-your-banking-journey-with-saib-modal .spb-popup-main-wrapper {
  width: 88% !important;
}
@media (max-width: 62rem) {
  .block-saib-start-your-banking-journey-with-saib-modal .spb-popup-main-wrapper {
    width: 100% !important;
  }
}

.spb-popup-main-wrapper {
  background: #f7f7f7;
  border-radius: 2.5rem;
  padding: 0rem;
  overflow: auto;
  scrollbar-width: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
  position: relative;
  border: unset;
  max-height: 90%;
  height: -moz-fit-content;
  height: fit-content;
  width: 100% !important;
}
@media (max-width: 62rem) {
  .spb-popup-main-wrapper {
    position: fixed;
    bottom: 0;
    border-radius: 1.25rem 1.25rem 0 0;
  }
}
.spb-popup-main-wrapper.spb_center {
  min-height: 300px;
  transform: translateY(-50%) !important;
  margin: 0rem auto !important;
  left: unset !important;
}
@media (max-width: 62rem) {
  .spb-popup-main-wrapper.spb_center {
    top: auto;
    transform: none !important;
    overflow: hidden;
  }
}
.spb-popup-main-wrapper .spb-controls {
  inset-inline-end: 32px;
  top: 32px;
}
@media (max-width: 62rem) {
  .spb-popup-main-wrapper .spb-controls {
    inset-inline-end: 20px;
    top: 20px;
  }
}
.spb-popup-main-wrapper .spb_close {
  position: absolute;
  inset-inline-end: 0;
  font-size: 0;
  background: unset;
  width: 32px;
  height: 32px;
  border: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
}
.spb-popup-main-wrapper .spb_close::before {
  content: "";
  display: block;
  background-size: 2rem !important;
  width: 32px;
  height: 32px;
  background: url("../images/icons/close-menus.svg") no-repeat center;
}
.spb-popup-main-wrapper .block-content--type-open-account-modal {
  display: flex;
  min-height: 722px;
}
@media (max-width: 62rem) {
  .spb-popup-main-wrapper .block-content--type-open-account-modal {
    flex-direction: column;
  }
}
.spb-popup-main-wrapper .block-content--type-open-account-modal .group-left {
  background: linear-gradient(135deg, #FBFAF9, #FBFAF9);
  padding: 3.5rem;
  text-align: center;
}
@media (max-width: 62rem) {
  .spb-popup-main-wrapper .block-content--type-open-account-modal .group-left {
    width: 100%;
  }
}
.spb-popup-main-wrapper .block-content--type-open-account-modal .group-left .field--name-field-qr-code {
  box-shadow: 0 4px 70px 0 rgba(39, 39, 39, 0.08);
  border-radius: 1.25rem;
  overflow: hidden;
}
.spb-popup-main-wrapper .block-content--type-open-account-modal .group-left .field--name-field-qr-code img {
  border-radius: 1.25rem;
  background: #FFFFFF;
  padding: 1.5rem;
  width: 240px;
  height: auto;
}
.spb-popup-main-wrapper .block-content--type-open-account-modal .group-left .warpper {
  background: #000000;
}
.spb-popup-main-wrapper .block-content--type-open-account-modal .group-right {
  background: #FFFFFF;
  padding: 3.5rem;
}
@media (max-width: 62rem) {
  .spb-popup-main-wrapper .block-content--type-open-account-modal .group-right {
    width: 100%;
  }
}
.spb-popup-main-wrapper .block-content--type-open-account-modal .group-right .field--name-field-steps {
  --steps-gap: map-get($spacers, "space-400");
}
.spb-popup-main-wrapper .block-content--type-open-account-modal .group-right .field--name-field-steps .field__item::after {
  top: 35px;
  height: calc(100% + 10px);
  inset-block-end: auto;
}
@media (min-width: 62.0625rem) {
  .spb-popup-main-wrapper:has(.field--type-webform) {
    width: 50% !important;
  }
}
.spb-popup-main-wrapper:has(.field--type-webform) form {
  padding: 3.5rem;
}
@media (max-width: 62rem) {
  .spb-popup-main-wrapper:has(.field--type-webform) form {
    padding-top: 3rem;
    padding-inline: 1.25rem;
    padding-bottom: 2rem;
  }
}
.spb-popup-main-wrapper:has(.field--type-webform) form .form-actions {
  width: 100%;
}
.spb-popup-main-wrapper:has(.field--type-webform) form .form-actions .webform-button--submit {
  width: 100%;
  padding: 1.25rem 1.25rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
}
@media (max-width: 90rem) {
  .spb-popup-main-wrapper:has(.field--type-webform) form .form-actions .webform-button--submit {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}
@media (max-width: 64rem) {
  .spb-popup-main-wrapper:has(.field--type-webform) form .form-actions .webform-button--submit {
    font-size: 0.875rem;
    line-height: 1.375rem;
  }
}
.spb-popup-main-wrapper:has(.open-account-modal--qr-code) {
  max-width: 454px;
}
@media (min-width: 62.0625rem) {
  .spb-popup-main-wrapper:has(.open-account-modal--qr-code) {
    width: -moz-fit-content !important;
    width: fit-content !important;
    max-width: 650px;
  }
}

@media (max-width: 62rem) {
  .spb-popup-main-wrapper .block-content--type-open-account-modal .group-right {
    order: 1;
    padding: 3rem 1.25rem 2rem;
    gap: 1.5rem !important;
  }
  .spb-popup-main-wrapper .block-content--type-open-account-modal .group-right .btn {
    width: 100%;
  }
  .spb-popup-main-wrapper .block-content--type-open-account-modal .group-left {
    order: 2;
    position: relative;
    gap: 0.75rem !important;
    padding: 1.5rem 1.25rem 2rem;
    background: #FFFFFF;
  }
  .spb-popup-main-wrapper .block-content--type-open-account-modal .group-left::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 1.25rem;
    border-block-start: 1px solid #E8E2DB;
  }
  .spb-popup-main-wrapper .block-content--type-open-account-modal .group-left .field--name-field-qr-code,
  .spb-popup-main-wrapper .block-content--type-open-account-modal .group-left .field--name-field-app-description p {
    display: none;
  }
  .spb-popup-main-wrapper .block-content--type-open-account-modal .group-left .field--name-field-app-description h4 {
    margin: 0;
  }
  .spb-popup-main-wrapper .block-content--type-open-account-modal .group-left .field--name-field-app-link {
    justify-content: center;
  }
}
.open-account-modal--qr-code {
  min-height: auto !important;
}
@media (min-width: 62.0625rem) {
  .open-account-modal--qr-code .group-left {
    width: 100% !important;
  }
  .open-account-modal--qr-code .group-right {
    display: none !important;
  }
}
.open-account-modal--qr-code .field--name-field-qr-code img {
  border-radius: 1.25rem;
  background: #FFFFFF;
  padding: 1.5rem;
}
/* =========================================================================
 * Node Popup dialog behaviour.
 *
 * Everything below is scoped to #nodePopup so it only ever affects the
 * modal this module prints, never the other .spb_overlay popups on the
 * site, and so it wins over the copies of the rules above that ship with
 * the theme (which is loaded after this file).
 * ====================================================================== */
#nodePopup {
  --node-popup-accent: #B28E4E;
  --node-popup-duration: 260ms;
  --node-popup-easing: cubic-bezier(0.2, 0.7, 0.3, 1);
}

#nodePopup[hidden] {
  display: none;
}

/* The layer the dialog stands on. These declarations used to come from
   simple_popup_blocks.css, which is only on the page when one of that
   module's own popup blocks happens to render there - without it the
   overlay fell back to static positioning and the popup opened into the
   bottom of the page instead of over it. The values match, so nothing
   changes on pages that do load it. */
#nodePopup {
  position: fixed;
  z-index: 999999;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#nodePopup .spb-popup-main-wrapper.spb_center {
  inset-block-start: 50%;
}

@media (max-width: 62rem) {
  #nodePopup .spb-popup-main-wrapper.spb_center {
    inset-block-start: auto;
  }
}

/* Opening and closing. The overlay fades, the dialog eases in with it. */
#nodePopup {
  opacity: 0;
  transition: opacity var(--node-popup-duration) ease;
}

#nodePopup.is-open {
  opacity: 1;
}

#nodePopup .spb-popup-main-wrapper {
  /* `transform` is spoken for: it vertically centres the dialog. The
     entrance animation therefore uses the independent `translate` and
     `scale` properties, which compose with it instead of replacing it. */
  translate: 0 1.5rem;
  scale: 0.98;
  transition: translate var(--node-popup-duration) var(--node-popup-easing), scale var(--node-popup-duration) var(--node-popup-easing);
}

#nodePopup.is-open.is-ready .spb-popup-main-wrapper {
  translate: 0;
  scale: 1;
}

#nodePopup .spb-popup-main-wrapper {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear var(--node-popup-duration), opacity var(--node-popup-duration) ease, translate var(--node-popup-duration) var(--node-popup-easing), scale var(--node-popup-duration) var(--node-popup-easing);
}

#nodePopup.is-ready .spb-popup-main-wrapper {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

@media (max-width: 62rem) {
  /* Bottom sheet: slide up from the edge of the screen instead. */
  #nodePopup .spb-popup-main-wrapper {
    translate: 0 100%;
    scale: 1;
  }
  #nodePopup.is-open.is-ready .spb-popup-main-wrapper {
    translate: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  #nodePopup,
  #nodePopup .spb-popup-main-wrapper {
    transition-duration: 1ms;
  }
  #nodePopup .spb-popup-main-wrapper {
    translate: 0;
    scale: 1;
  }
}

/* The dialog itself no longer scrolls: its content region does, so the
   close button stays reachable however long the content is. */
#nodePopup .spb-popup-main-wrapper {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  outline: none;
}

#nodePopup .spb-popup-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#nodePopup .spb-popup-content::-webkit-scrollbar {
  display: none;
}

#nodePopup .spb-controls {
  position: absolute;
  z-index: 2;
}

/* Close button: same icon as the theme ships, inlined so the module also
   works on its own, plus hover and keyboard-focus feedback. */
#nodePopup .spb_close {
  border-radius: 50%;
  transition: opacity 0.2s ease, scale 0.2s ease;
}

#nodePopup .spb_close:hover {
  opacity: 0.7;
}

#nodePopup .spb_close:active {
  scale: 0.92;
}

#nodePopup .spb_close:focus-visible {
  outline: 2px solid var(--node-popup-accent);
  outline-offset: 3px;
}

#nodePopup .spb_close::before {
  background: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 3C13.4288 3 10.9154 3.76244 8.77759 5.1909C6.63975 6.61935 4.97351 8.64968 3.98957 11.0251C3.00563 13.4006 2.74819 16.0144 3.2498 18.5362C3.75141 21.0579 4.98953 23.3743 6.80762 25.1924C8.6257 27.0105 10.9421 28.2486 13.4638 28.7502C15.9856 29.2518 18.5995 28.9944 20.9749 28.0104C23.3503 27.0265 25.3807 25.3603 26.8091 23.2224C28.2376 21.0846 29 18.5712 29 16C28.9964 12.5533 27.6256 9.24882 25.1884 6.81163C22.7512 4.37445 19.4467 3.00364 16 3ZM20.7075 19.2925C20.8004 19.3854 20.8741 19.4957 20.9244 19.6171C20.9747 19.7385 21.0006 19.8686 21.0006 20C21.0006 20.1314 20.9747 20.2615 20.9244 20.3829C20.8741 20.5043 20.8004 20.6146 20.7075 20.7075C20.6146 20.8004 20.5043 20.8741 20.3829 20.9244C20.2615 20.9747 20.1314 21.0006 20 21.0006C19.8686 21.0006 19.7385 20.9747 19.6171 20.9244C19.4957 20.8741 19.3854 20.8004 19.2925 20.7075L16 17.4137L12.7075 20.7075C12.6146 20.8004 12.5043 20.8741 12.3829 20.9244C12.2615 20.9747 12.1314 21.0006 12 21.0006C11.8686 21.0006 11.7385 20.9747 11.6171 20.9244C11.4957 20.8741 11.3854 20.8004 11.2925 20.7075C11.1996 20.6146 11.1259 20.5043 11.0756 20.3829C11.0253 20.2615 10.9994 20.1314 10.9994 20C10.9994 19.8686 11.0253 19.7385 11.0756 19.6171C11.1259 19.4957 11.1996 19.3854 11.2925 19.2925L14.5863 16L11.2925 12.7075C11.1049 12.5199 10.9994 12.2654 10.9994 12C10.9994 11.7346 11.1049 11.4801 11.2925 11.2925C11.4801 11.1049 11.7346 10.9994 12 10.9994C12.2654 10.9994 12.5199 11.1049 12.7075 11.2925L16 14.5863L19.2925 11.2925C19.3854 11.1996 19.4957 11.1259 19.6171 11.0756C19.7385 11.0253 19.8686 10.9994 20 10.9994C20.1314 10.9994 20.2615 11.0253 20.3829 11.0756C20.5043 11.1259 20.6146 11.1996 20.7075 11.2925C20.8004 11.3854 20.8741 11.4957 20.9244 11.6171C20.9747 11.7385 21.0006 11.8686 21.0006 12C21.0006 12.1314 20.9747 12.2615 20.9244 12.3829C20.8741 12.5043 20.8004 12.6146 20.7075 12.7075L17.4138 16L20.7075 19.2925Z' fill='%23A7A7A7'/%3E%3C/svg%3E") no-repeat center;
  background-size: 2rem;
}

/* Loading and error states, both centred in a dialog that keeps the size
   it will have once the content lands. */
#nodePopup .node-popup__status {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  min-height: 300px;
  padding: 3rem 1.25rem;
  text-align: center;
}

#nodePopup .node-popup__overlay-status {
  position: fixed;
  z-index: 1;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  outline: none;
  pointer-events: none;
}

#nodePopup.is-loading .node-popup__overlay-status {
  display: flex;
}

#nodePopup .node-popup__spinner {
  display: block;
  width: 40px;
  height: 40px;
  border: 3px solid rgba(26, 28, 30, 0.12);
  border-block-start-color: var(--node-popup-accent);
  border-radius: 50%;
  animation: node-popup-spin 0.8s linear infinite;
}

#nodePopup .node-popup__error-message {
  margin: 0;
}

/* Fade the content in once it replaces the loading state. */
#nodePopup .spb-popup-content:not(.is-loading) {
  animation: node-popup-fade-in 0.24s ease both;
}

@keyframes node-popup-spin {
  to {
    rotate: 360deg;
  }
}

@keyframes node-popup-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  #nodePopup .node-popup__spinner {
    animation-duration: 2.4s;
  }
  #nodePopup .spb-popup-content:not(.is-loading) {
    animation: none;
  }
}