/* Custom Modal Styling */
.contact_modal .modal-content {
   border: none;
   border-radius: 8px;
   overflow: hidden;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.contact_modal .modal-header {
   background: linear-gradient(to right, rgb(135, 80, 247) 0%, rgb(42, 20, 84) 51%, rgb(135, 80, 247) 100%);
   color: white;
   padding: 1.2rem 2rem;
   border-bottom: none;
   position: relative;
}

.contact_modal .modal-header .modal-title {
   font-size: 1rem;
   display: flex;
   align-items: center;
   gap: 0.75rem;
}

.contact_modal .modal-header .modal-title strong {
   font-weight: 600;
}

.contact_modal .modal-header .close {
   color: white;
   opacity: 0.9;
   padding: 0.5rem;
   margin: -0.5rem -0.5rem -0.5rem auto;
   transition: all 0.3s ease;
}

.contact_modal .modal-header .close:hover {
   opacity: 1;
   transform: rotate(90deg);
}

.contact_modal .modal-body {
   padding: 2rem;
   background: white;
   text-align: center;
   font-size: 1.1rem;
   line-height: 1.6;
   color: #4a5568;
}

.contact_modal .modal-body:before {
   content: "";
   display: block;
   width: 60px;
   height: 60px;
   margin: 0 auto 1.5rem;
   background-size: contain;
   background-repeat: no-repeat;
}

/* Success Modal Specific Styles */
#successModal .modal-body:before {
   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%238760F7" width="60px" height="60px"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>');
}

/* Error Modal Specific Styles */
#failModal .modal-header {
   background: #dc3545;
}

#failModal .modal-body:before {
   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23dc3545" width="60px" height="60px"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>');
}

/* Animation */
@keyframes modalEntry {
   0% {
      transform: translateY(-20px);
      opacity: 0;
   }

   100% {
      transform: translateY(0);
      opacity: 1;
   }
}

.modal.show .modal-dialog {
   animation: modalEntry 0.3s ease-out;
}