/* Modal wrapper covers viewport and centers modal */
 #modalFixedWrapper {
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     z-index: 998;
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.3s;
 }

 #modalFixedWrapper.active {
     opacity: 1;
     pointer-events: auto;
 }

 #modalDimmer.active {
     display: flex !important;
     align-items: center;
     justify-content: center;
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     z-index: 998;
     width: 100vw;
     height: 100vh;
     background-color: rgba(0, 0, 0, 0.7);
 }

 #basicModal {
     position: relative;
     margin: 0 auto;
     max-width: 500px;
     width: 100%;
     max-height: 80vh;
     overflow-y: auto;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
     border-radius: 12px;
     background: #fff;
     display: none;
     flex-direction: column;
     z-index: 999;
 }

 #basicModal.active {
     display: flex !important;
 }

 @media (max-width: 600px) {
     #basicModal {
         max-width: 95vw;
         min-width: 0;
     }
 }

 .modal-close-btn {
     position: absolute;
     top: 12px;
     right: 16px;
     background: transparent;
     border: none;
     font-size: 2rem;
     color: #888;
     cursor: pointer;
     z-index: 10002;
     padding: 0;
     line-height: 1;
     transition: color 0.2s;
 }

 .modal-close-btn:hover {
     color: #333;
 }

 /* Form styles */
 #modalFixedWrapper .hero-card {
     border-radius: 12px !important;
     box-shadow: none !important;
     width: 100% !important;
     padding: 10px !important;
 }

 #modalFixedWrapper .hero-card .ui.button {
     border-radius: 10px !important;
 }