/* Overlay */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  z-index: 999;
}

/* Modal */
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  /* background: #0c0c0c; */
  background: #becae4;
  color: var(--tt-paragraph-color);
  width: 90%;
  max-width: 900px;
  border-radius: 20px;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: 0.35s ease;
  z-index: 999;
}

.modal.show {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.overlay.show {
  opacity: 1;
  visibility: visible;
}

/* Close Button */
.close-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  background: transparent;
  border: 1px solid var(--tt-head-color);
  color: var(--tt-head-color);
  width: 35px;
  height: 35px;
  border-radius: 50%;
  cursor: pointer;
  transition: all .3s ease;
}
.close-btn:hover{
    transform: rotate(180deg);
    color: var(--tt-title-color);
}
/* Modal Content */
.modal-content {
  display: flex;
  gap: 30px;
  align-items: center;
}

/* Left */
.modal-left img {
  width: 250px;
  border-radius: 16px;
}

/* Right */
.modal-right {
  flex: 1;
}

.badge {
  background: var(--tt-head-color);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  display: inline-block;
  margin-bottom: 15px;
  color: #fff;
}

.modal-right h2 {
  font-size: 23px;
  margin-bottom: 15px;
  color: var(--tt-head-color);
}

.modal-right p {
  /* color: #aaa; */
  color: #484848;
  line-height: 1.4;
  margin-bottom: 20px;
  font-size: 14px;
}

.modal-right input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid #9b9b9b;
  padding: 10px 0;
  font-size: 12px;
  color: #434343;
  margin-bottom: 20px;
}
.modal-right input::placeholder{
  color: #434343!important;
}
.modal-right input:focus{
    outline: none;
}
.notify-btn {
  background: transparent;
  border: none;
  color: var(--tt-title-color);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Responsive */
@media(max-width: 768px) {
  .modal-content {
    flex-direction: column;
    text-align: center;
  }

  .modal-left img {
  max-width: 250px;
  height: 100%;
  overflow: cover;
  }
}