/*!
 * Bootstrap modal styled to look like an iOS modal
 * Copyright 2020 Terry Morse
 * Licensed under MIT
 */

.modal-dialog.modal-dialog-ios {
  position: fixed;
  bottom: 50px; /* match iPhone */
  margin: 0 16px;
  width: calc(100% - 32px);
  display: flex;
  align-items: center;
  max-width: 40rem;
}

.modal.fade:not(.show) .modal-dialog.modal-dialog-ios {
  transform: translate(0, 50vh); /* off bottom of screen */
  transition: transform .5s linear;
}

.modal.fade.show .modal-dialog.modal-dialog-ios {
  transform: translate(0, 0);
  transition: transform .7s ease-out;
}

/* don't fade in or out */
#iosmodal.fade.show {
  opacity: 1;
  transition: opacity 1s linear;
}
#iosmodal.fade:not(.show) {
  opacity: 1;
  transition: opacity 1s linear;
}

.modal-dialog.modal-dialog-ios .modal-content {
  border-radius: 12px;
  border: none;
}

.modal-dialog.modal-dialog-ios .modal-body {
  padding: 1rem 1.5rem;
  text-align: center;
  font-weight: 300;
  font-size: 1rem;
}

.modal-dialog.modal-dialog-ios .modal-footer {
  justify-content: center;
  padding: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* full-width vertically stacked buttons */
.modal-dialog.modal-dialog-ios .modal-footer .btn-group {
  width: 100%;
  margin: 0;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-align: start;
  align-items: flex-start;
  -ms-flex-pack: center;
  justify-content: center;
}

.modal-dialog.modal-dialog-ios .modal-footer .btn {
  margin: 2px 12px;
  padding: 0.3rem 0.75rem;
  border-style: none;
  border-radius: 8px;
  width: calc(100% - 24px);
}

.modal-dialog.modal-dialog-ios .modal-footer .btn:hover {
  background-color: rgba(0, 0, 0, 0.15);
}

/* on wider screens, center modal on screen, and stack buttons
   horizontally
 */
@media (min-width: 576px) {

  .modal-dialog.modal-dialog-ios {
    position: relative;
    top: calc(50vh - 32px);
    margin: 0 auto;
    display: flex;
    align-items: center;
  }

  .modal.fade:not(.show) .modal-dialog.modal-dialog-ios {
    transform: none;
  }

  .modal-dialog.modal-dialog-ios .modal-footer .btn-group {
    width: 100%;
    margin: 0;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-evenly;
  }

  #iosmodal.fade.show {
    opacity: 1;
    transition: opacity .4s linear;
  }
  #iosmodal.fade:not(.show) {
    opacity: 0;
    transition: opacity .2s linear;
  }

}

/* iOS modal backdrop is more transparent than default Bootstrap */
/*.modal-backdrop.show {*/
/*  opacity: 0.1;*/
/*}*/

.modal-dialog.modal-dialog-ios .modal-footer .btn {
  margin: 2px 12px;
  padding: 0.3rem 0.75rem;
  border-style: none;
  border-radius: 8px;
  width: calc(100% - 24px);
}

.modal-dialog.modal-dialog-ios .modal-footer .btn-group {
  flex-wrap: wrap;
}
.modal-dialog.modal-dialog-ios .modal-footer .btn.btn-outline-primary {
  color: #3274f6!important;
}
.modal-dialog.modal-dialog-ios .modal-footer .btn.btn-outline-danger {
  color: #e93323!important;
}

/* ==== PHONE ==== */
@media (max-width: 768px) {
  .modal-dialog.modal-dialog-ios .modal-body {
    color: #606975;
    font-size: 0.8rem;
  }

  .modal-dialog.modal-dialog-ios .modal-footer .btn {
    font-size: 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 1rem 1.5rem;
    color: #3274f6;
    margin: 0;
    width: 100%;
  }
}