/* Component: button-modal */

.tb-button-modal-container {
  width: 100%;
}

.tb-button-modal-dialog {
  max-width: 900px;
}

@media (min-width: 992px) {
  .tb-button-modal-dialog {
    max-width: 1140px;
  }
}

.tb-button-modal-content {
  background-color: #9d7f67;
  border: 6px solid #1a2e50;
  border-radius: 0;
  overflow: hidden;
}

.tb-button-modal-close,
.tb-button-modal-close:hover,
.tb-button-modal-close:focus,
.tb-button-modal-close:focus-visible,
.tb-button-modal-close:active {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #ffffff !important;
  font-size: 20px;
  line-height: 1;
  opacity: 1 !important;
  outline: none !important;
  padding: 10px;
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 2;
}

.tb-button-modal-body {
  align-items: flex-start;
  gap: 32px;
  padding: 32px;
}

.tb-button-modal-image-col {
  flex: 0 0 auto;
  width: calc(42% - 16px);
}

.tb-button-modal-image {
  aspect-ratio: 658 / 933;
  height: auto;
  width: 100%;
}

.tb-button-modal-text-col {
  background-color: #9d7f67;
  flex: 1;
  padding: 0 12px;
}

.tb-button-modal-text-col,
.tb-button-modal-text-col * {
  color: #ffffff !important;
}

.tb-button-modal-title {
  font-family: "Cutive Mono", monospace;
  font-size: 32px;
  letter-spacing: 2px;
  margin: 0 0 4px;
}

.tb-button-modal-subtitle {
  font-style: italic;
  margin: 0 0 20px;
}

.tb-button-modal-content-text p:last-child {
  margin-bottom: 0;
}

@media (max-width: 991px) {
  .tb-button-modal-body {
    gap: 24px;
    padding: 12px;
  }

  .tb-button-modal-image-col {
    width: 100%;
  }
}