/* Webrra unified frontend popup system */
:root {
  --wr-popup-blue: #0071e3;
  --wr-popup-blue-2: #0a84ff;
  --wr-popup-ink: #172033;
  --wr-popup-muted: #66758a;
  --wr-popup-line: #dbe7f4;
  --wr-popup-tint: #f3f9ff;
  --wr-popup-shadow: 0 30px 80px rgba(13, 39, 76, .24), 0 0 0 1px rgba(255, 255, 255, .72);
}

/* All dimmed layers follow the product-page popup language. */
.webrra-pe-layer.overlay,
.webrra-transfer-modal-backdrop,
.webrra-login-wrap .webrra-login-backdrop,
.webrra-hub-modal-backdrop,
.webrra-root .webrra-backdrop {
  background-color: rgba(18, 38, 66, .46) !important;
  background-image:
    radial-gradient(circle at 18% 16%, rgba(10, 132, 255, .14), transparent 30%),
    radial-gradient(circle at 82% 82%, rgba(0, 113, 227, .11), transparent 32%) !important;
  backdrop-filter: blur(10px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(120%) !important;
}

/* Shared white/glass card with a restrained blue edge. */
.webrra-pe-layer .modal,
.webrra-transfer-modal-card,
.webrra-login-wrap .webrra-login-modal,
.webrra-hub-modal-card {
  border: 1px solid rgba(0, 113, 227, .18) !important;
  border-radius: 22px !important;
  color: var(--wr-popup-ink) !important;
  background:
    linear-gradient(rgba(255, 255, 255, .98), rgba(248, 252, 255, .98)) padding-box,
    linear-gradient(135deg, rgba(0, 113, 227, .42), rgba(137, 205, 255, .16), rgba(0, 113, 227, .24)) border-box !important;
  box-shadow: var(--wr-popup-shadow) !important;
  backdrop-filter: blur(24px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(135%) !important;
}

.webrra-pe-layer .modal,
.webrra-transfer-modal-card,
.webrra-hub-modal-card {
  animation: wr-popup-in .28s cubic-bezier(.2, .9, .3, 1.1) !important;
}

.webrra-login-wrap.is-open .webrra-login-modal {
  animation: wr-popup-login-in .28s cubic-bezier(.2, .9, .3, 1.1);
}

/* Login themes remain configurable, but the popup itself stays readable and consistent. */
.webrra-login-wrap {
  --wl-primary: #0071e3 !important;
  --wl-secondary: #0a84ff !important;
  --wl-card: #fff !important;
  --wl-text: #172033 !important;
  --wl-muted: #66758a !important;
  --wl-input: #fff !important;
  --wl-border: #dbe7f4 !important;
  --wl-card-border: rgba(0, 113, 227, .18) !important;
  --wl-mobile-text: #172033 !important;
  --wl-mobile-border: #dbe7f4 !important;
  --wl-otp-text: #172033 !important;
  --wl-otp-border: #dbe7f4 !important;
  --wl-close-bg: #fff !important;
  --wl-close-text: #66758a !important;
  --wl-close-border: #dbe7f4 !important;
  --wl-divider: #e5edf6 !important;
  --wl-focus: #0071e3 !important;
  --wl-link: #0071e3 !important;
  --wl-button-text: #fff !important;
  --wl-send-bg: #0071e3 !important;
  --wl-send-bg-2: #0a84ff !important;
  --wl-send-border: #0071e3 !important;
  --wl-send-text: #fff !important;
  --wl-verify-bg: #0071e3 !important;
  --wl-verify-bg-2: #0a84ff !important;
  --wl-verify-border: #0071e3 !important;
  --wl-verify-text: #fff !important;
  --wl-profile-bg: #0071e3 !important;
  --wl-profile-bg-2: #0a84ff !important;
  --wl-profile-border: #0071e3 !important;
  --wl-profile-text: #fff !important;
  --wl-enroll-bg: #0071e3 !important;
  --wl-enroll-bg-2: #0a84ff !important;
  --wl-enroll-border: #0071e3 !important;
  --wl-enroll-text: #fff !important;
}

.webrra-login-wrap .webrra-login-modal::after {
  background: var(--wr-popup-blue) !important;
  opacity: .06 !important;
}

/* Customer Hub can have dark themes; modals use one shared light theme. */
.webrra-hub-modal {
  --hub-ink: #172033 !important;
  --hub-ink-dim: #66758a !important;
  --hub-glass: #f7fbff !important;
  --hub-glass-strong: #fff !important;
  --hub-border: #dbe7f4 !important;
  --hub-border-soft: #e5edf6 !important;
  --hub-modal-bg-1: #fff !important;
  --hub-modal-bg-2: #f8fbff !important;
  --hub-option-bg: #fff !important;
}

/* Matching square close buttons. */
.webrra-pe-layer .m-close,
html body .webrra-transfer-modal .webrra-transfer-modal-close,
.webrra-login-wrap .webrra-login-close,
.webrra-hub-modal .webrra-hub-modal-x {
  display: grid !important;
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  place-items: center !important;
  border: 1px solid var(--wr-popup-line) !important;
  border-radius: 10px !important;
  color: var(--wr-popup-muted) !important;
  background: #fff !important;
  box-shadow: 0 7px 18px rgba(18, 55, 96, .07) !important;
  cursor: pointer !important;
  transition: transform .18s ease, color .18s ease, border-color .18s ease, background .18s ease !important;
}

.webrra-pe-layer .m-close:hover,
html body .webrra-transfer-modal .webrra-transfer-modal-close:hover,
.webrra-login-wrap .webrra-login-close:hover,
.webrra-hub-modal .webrra-hub-modal-x:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(0, 113, 227, .38) !important;
  color: var(--wr-popup-blue) !important;
  background: var(--wr-popup-tint) !important;
}

/* Inputs and text areas inside every real modal. */
.webrra-pe-layer .modal input:not([type="radio"]):not([type="checkbox"]),
.webrra-pe-layer .modal select,
.webrra-pe-layer .modal textarea,
.webrra-transfer-modal-card input:not([type="radio"]):not([type="checkbox"]),
.webrra-transfer-modal-card select,
.webrra-transfer-modal-card textarea,
.webrra-login-wrap .webrra-login-modal input:not([type="radio"]):not([type="checkbox"]),
.webrra-login-wrap .webrra-login-modal select,
.webrra-login-wrap .webrra-login-modal textarea,
.webrra-hub-modal-card input:not([type="radio"]):not([type="checkbox"]),
.webrra-hub-modal-card select,
.webrra-hub-modal-card textarea {
  border-color: var(--wr-popup-line) !important;
  border-radius: 12px !important;
  color: var(--wr-popup-ink) !important;
  background: #fff !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.webrra-pe-layer .modal input:focus,
.webrra-pe-layer .modal select:focus,
.webrra-pe-layer .modal textarea:focus,
.webrra-transfer-modal-card input:focus,
.webrra-transfer-modal-card select:focus,
.webrra-transfer-modal-card textarea:focus,
.webrra-login-wrap .webrra-login-modal input:focus,
.webrra-login-wrap .webrra-login-modal select:focus,
.webrra-login-wrap .webrra-login-modal textarea:focus,
.webrra-hub-modal-card input:focus,
.webrra-hub-modal-card select:focus,
.webrra-hub-modal-card textarea:focus {
  border-color: var(--wr-popup-blue) !important;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, .12) !important;
}

/* Primary and secondary actions use the same blue language. */
.webrra-pe-layer .modal .btn-primary,
.webrra-login-wrap .webrra-login-submit,
.webrra-transfer-modal-card .webrra-transfer-modal-submit,
.webrra-hub-modal-card .webrra-hub-btn:not(.is-ghost) {
  border-color: var(--wr-popup-blue) !important;
  border-radius: 13px !important;
  color: #fff !important;
  background: linear-gradient(135deg, var(--wr-popup-blue), var(--wr-popup-blue-2)) !important;
  box-shadow: 0 12px 24px rgba(0, 113, 227, .2) !important;
}

.webrra-transfer-modal-card .webrra-transfer-modal-secondary,
.webrra-hub-modal-card .webrra-hub-btn.is-ghost {
  border: 1px solid var(--wr-popup-line) !important;
  border-radius: 13px !important;
  color: var(--wr-popup-blue) !important;
  background: #fff !important;
}

/* The contact drawer keeps its layout and joins the same visual family. */
.webrra-root .webrra-panel {
  border: 1px solid rgba(0, 113, 227, .18) !important;
  color: var(--wr-popup-ink);
  background:
    linear-gradient(rgba(255, 255, 255, .97), rgba(248, 252, 255, .97)) padding-box,
    linear-gradient(180deg, rgba(0, 113, 227, .46), rgba(137, 205, 255, .14), rgba(0, 113, 227, .22)) border-box !important;
  box-shadow: 0 24px 78px rgba(13, 39, 76, .24) !important;
}

.webrra-root .webrra-close {
  border: 1px solid rgba(255, 255, 255, .4) !important;
  border-radius: 10px !important;
  color: #fff !important;
  background: rgba(255, 255, 255, .12) !important;
}

.webrra-root .webrra-close:hover {
  border-color: rgba(255, 255, 255, .76) !important;
  color: var(--wr-popup-blue) !important;
  background: #fff !important;
}

/* Notifications are one size, one position and one navy-glass treatment. */
.webrra-pe-layer.toast,
.wl-toast,
.cmp-toast,
.webrra-cards-toast {
  right: auto !important;
  left: 50% !important;
  bottom: 24px !important;
  max-width: min(430px, calc(100vw - 32px)) !important;
  padding: 12px 18px !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  border-radius: 15px !important;
  color: #fff !important;
  background: rgba(13, 39, 76, .95) !important;
  box-shadow: 0 18px 42px rgba(6, 28, 58, .28) !important;
  text-align: center !important;
  opacity: 0;
  transform: translate(-50%, 16px) !important;
}

.webrra-pe-layer.toast.is-visible,
.wl-toast.is-visible,
.cmp-toast.is-visible,
.webrra-cards-toast.is-visible {
  opacity: 1 !important;
  transform: translate(-50%, 0) !important;
}

.webrra-hub-toast {
  right: auto !important;
  left: 50% !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  border-radius: 15px !important;
  color: #fff !important;
  background: rgba(13, 39, 76, .95) !important;
  box-shadow: 0 18px 42px rgba(6, 28, 58, .28) !important;
  transform: translateX(-50%) !important;
}

@keyframes wr-popup-in {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to { opacity: 1; transform: none; }
}

@keyframes wr-popup-login-in {
  from { opacity: 0; transform: translate(-50%, -46%) scale(.96); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@media (max-width: 600px) {
  .webrra-pe-layer .modal,
  .webrra-transfer-modal-card,
  .webrra-hub-modal-card {
    width: 100% !important;
    max-height: 92vh !important;
    border-radius: 20px !important;
  }

  .webrra-login-wrap .webrra-login-modal {
    border-radius: 20px !important;
  }

  .webrra-root .webrra-panel {
    border-radius: 24px 24px 0 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .webrra-pe-layer .modal,
  .webrra-transfer-modal-card,
  .webrra-login-wrap .webrra-login-modal,
  .webrra-hub-modal-card {
    animation: none !important;
  }
}