/* 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;
    overflow-x: visible;
    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 .quote-form {
    overflow: visible;
}

#basicModal .location-input {
    overflow: visible;
}

 #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;
 }