/* Shared Bootstrap dialog theme for signup and card verification pages. */
.uc-dialog-modal {
  position: fixed;
  z-index: 1080;
}

.uc-dialog-modal#verifyPaymentMethodModal .modal-dialog,
.uc-dialog-modal#signupHelpModal .modal-dialog {
  max-width: 620px;
}

.uc-dialog-modal:is(#verifyPaymentMethodModal, #signupHelpModal, #numberGuideModal) .modal-content {
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 26px 75px rgba(4, 41, 51, 0.32);
}

.uc-dialog-modal:is(#verifyPaymentMethodModal, #signupHelpModal, #numberGuideModal) .modal-header {
  align-items: flex-start;
  gap: 16px;
  padding: 26px 28px 23px;
  border: 0;
  background: linear-gradient(120deg, #123245, #056f80);
  color: #fff;
}

.uc-dialog-modal .modal-header > div {
  flex: 1 1 auto;
  min-width: 0;
}

.uc-dialog-modal-icon {
  display: block;
  margin-bottom: 13px;
  color: #9fe8fb;
  font-size: 1.55rem;
}

.uc-dialog-modal .modal-title {
  margin: 0;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 750;
  line-height: 1.2;
}

.uc-dialog-modal .uc-dialog-modal-intro {
  margin: 9px 0 0;
  color: #e5f7fa;
  line-height: 1.5;
}

.uc-dialog-modal .btn-close {
  flex: none;
  margin: 0;
  box-shadow: none;
}

.uc-dialog-modal:is(#verifyPaymentMethodModal, #signupHelpModal, #numberGuideModal) .modal-body {
  padding: 24px 28px 27px;
}

.uc-dialog-modal:is(#verifyPaymentMethodModal, #signupHelpModal, #numberGuideModal) .modal-footer {
  gap: 9px;
  padding: 16px 28px 24px;
  border-top: 1px solid #e2edf1;
  background: #fff;
}

.uc-dialog-modal .modal-footer .btn {
  min-height: 43px;
  margin: 0;
  border-radius: 10px;
  font-weight: 700;
}

.uc-dialog-modal .modal-footer .btn-success {
  border-color: var(--uc-primary-500);
  background: var(--uc-primary-500);
  color: #fff;
  box-shadow: 0 8px 18px rgba(6, 111, 128, 0.18);
}

.uc-dialog-modal .modal-footer .btn-success:hover,
.uc-dialog-modal .modal-footer .btn-success:focus-visible {
  border-color: var(--uc-primary-700);
  background: var(--uc-primary-700);
  color: #fff;
}

.uc-dialog-modal .modal-footer [data-bs-dismiss="modal"] {
  border: 1px solid #c8dce3;
  background: #fff;
  color: var(--uc-primary-700);
  text-decoration: none;
}

.uc-dialog-modal .modal-footer [data-bs-dismiss="modal"]:hover,
.uc-dialog-modal .modal-footer [data-bs-dismiss="modal"]:focus-visible {
  border-color: var(--uc-primary-500);
  background: #f0f9fc;
  color: var(--uc-primary-900);
  text-decoration: none;
}

.uc-dialog-modal .modal-footer .loading-indicator {
  min-width: 60px;
  color: var(--uc-primary-700);
}

.uc-dialog-modal .verification-panel,
.uc-dialog-modal .number-guide-option,
.uc-dialog-modal .signup-help-reason {
  border: 1px solid #dcebf0 !important;
  border-radius: 15px;
  background: #f0f9fc;
  color: #29485a;
}

.uc-dialog-modal .verification-panel .card-header.bg-white {
  background: transparent !important;
  color: var(--uc-primary-900) !important;
}

.uc-dialog-modal .verification-panel .badge {
  background: var(--uc-primary-500) !important;
  color: #fff !important;
}

.uc-dialog-modal .verification-panel .input-group-text,
.uc-dialog-modal .verification-panel .input-group .form-control {
  min-height: 44px;
  border-color: #bcd9e1;
}

.uc-dialog-modal .verification-panel .input-group-text {
  background: #e8f5f8;
  color: var(--uc-primary-700);
  font-weight: 700;
}

.uc-dialog-modal .verification-panel .input-group:focus-within {
  border-radius: 8px;
  outline: 3px solid rgba(58, 165, 184, 0.24);
  outline-offset: 2px;
}

.uc-dialog-modal .signup-help-reason.active {
  border-color: var(--uc-primary-500) !important;
  background: #e2f5f9;
  box-shadow: 0 0 0 2px rgba(6, 111, 128, 0.14);
}

.uc-dialog-modal .number-guide-option {
  height: 100%;
}

.uc-dialog-modal .number-guide-option strong {
  color: var(--uc-primary-900);
}

.uc-dialog-modal .form-control:focus,
.uc-dialog-modal .signup-help-reason:focus-visible,
.uc-dialog-modal .modal-footer .btn:focus-visible,
.uc-dialog-modal .btn-close:focus-visible {
  outline: 3px solid rgba(58, 165, 184, 0.34);
  outline-offset: 2px;
  box-shadow: none;
}

.uc-dialog-modal .form-control.is-invalid,
.uc-dialog-modal .form-control.is-invalid:focus {
  border-color: #c84440;
  background-color: #fffafa;
}

.uc-dialog-modal .invalid-feedback {
  margin-top: 7px;
  color: #9f302b;
  font-size: 0.875rem;
  font-weight: 600;
}

.uc-dialog-modal .verification-error-message,
.uc-dialog-modal .alert-danger {
  border: 1px solid #efb4b0;
  border-radius: 10px;
  background: #fff2f1;
  color: #882d29;
  line-height: 1.45;
}

.uc-dialog-modal .verification-error-message {
  margin: 13px 0 0;
}

.uc-dialog-modal .alert-info {
  border-color: #c2e2e9;
  border-radius: 10px;
  background: #eff9fb;
  color: #285367;
}

.uc-dialog-modal .alert-warning {
  border-color: #e9d295;
  border-radius: 10px;
  background: #fff9e9;
  color: #694d16;
}

/* The verification form wraps its body and footer, so it must flex to keep errors scrollable. */
.uc-dialog-modal#verifyPaymentMethodModal #verifyPaymentMethodForm {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.uc-dialog-modal#verifyPaymentMethodModal .modal-body {
  min-height: 0;
  overflow-y: auto;
}

.uc-dialog-modal#verifyPaymentMethodModal .modal-footer {
  flex: 0 0 auto;
}

@media (max-width: 575px) {
  .uc-dialog-modal#verifyPaymentMethodModal .modal-dialog,
  .uc-dialog-modal#signupHelpModal .modal-dialog,
  .uc-dialog-modal#numberGuideModal .modal-dialog {
    margin: 0.75rem;
  }

  .uc-dialog-modal:is(#verifyPaymentMethodModal, #signupHelpModal, #numberGuideModal) .modal-header,
  .uc-dialog-modal:is(#verifyPaymentMethodModal, #signupHelpModal, #numberGuideModal) .modal-body,
  .uc-dialog-modal:is(#verifyPaymentMethodModal, #signupHelpModal, #numberGuideModal) .modal-footer {
    padding-left: 20px;
    padding-right: 20px;
  }

  .uc-dialog-modal .modal-footer .btn {
    flex: 1 1 auto;
  }
}