.f5-modal[aria-hidden="true"] { display: none; }
.f5-modal[aria-hidden="false"] { display: block; position: fixed; inset: 0; z-index: 9999; }

.f5-modal__overlay { position: absolute; inset: 0; background: rgba(84, 98, 115, 0.75); }

.f5-modal__card {
  position: relative;
  width: min(860px, calc(100% - 40px));
  margin: 25vh auto 0;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.25);
  padding: 26px 40px 30px;
}

.f5-modal__close {
  position: absolute; top: 18px; right: 22px;
  border: 0; background: transparent;
  font-size: 28px; line-height: 1; cursor: pointer;
  color: #3a2f2a;
}

.f5-modal__title {
  margin: 0;
  text-align: center;
  color: #b45a2e; /* orange heading */
}

.f5-modal__subtitle {
  text-align: center;
  margin-top: 6px;
  color: #1f1f1f;
}

.f5-modal__divider {
  height: 1px;
  background: #e7e2df;
  margin: 18px 0 18px;
}

.f5-modal__message {
  text-align: center;
  margin: 0 0 18px;
}

.f5-modal__form { max-width: 520px; margin: 0 auto; }

.f5-modal__input {
  width: -webkit-fill-available;
  border: 0;
  background: #f2efed;
  border-radius: 6px;
  padding: 16px 18px;
  margin: 10px 0;
  outline: none;
}

.f5-modal__btn {
  display: block;
  width: 320px;
  margin: 16px auto 0;
  padding: 14px 18px;
  cursor: pointer;
}

.f5-modal__error { color: #b00020; text-align: center; margin-top: 10px; }
@media (max-width: 768px) {
  .f5-modal__card {
    width: unset;
      margin: 14vh auto 0;
  }
  .f5-modal[aria-hidden="false"] { overflow: scroll; }
}