/**
 * Sales Rep Map - Modal Styles
 * Better modal positioning and Turnstile handling
 */

/* Modal backdrop - removed as panel should overlay map directly */

/* Contact form panel - positioned relative to map */
#contact-form-panel {
    position: absolute !important;
    top: 20px !important;
    left: 20px !important;
    width: 430px !important;
    max-height: calc(100% - 40px) !important;
    height: auto !important;
    background: #fff !important;
    z-index: 9999 !important;
    padding: 1.5rem !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Responsive adjustments */
@media (max-height: 700px) {
    #contact-form-panel {
        top: 10px !important;
        max-height: calc(100% - 20px) !important;
    }
}

/* Ensure form content is visible */
#contact-form-container {
    position: relative !important;
    padding-bottom: 30px !important;
}

/* Close button styling */
#close-contact-form {
    position: sticky !important;
    top: 0 !important;
    float: right !important;
    z-index: 10 !important;
    background: white !important;
    border-radius: 50% !important;
    width: 30px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: 10px !important;
}

#close-contact-form:hover {
    background: #f0f0f0 !important;
}

/* Form header */
#contact-form-panel > div:first-child {
    background: white !important;
    z-index: 5 !important;
    margin-bottom: 1rem !important;
    padding-bottom: 0.5rem !important;
    border-bottom: 1px solid #eee !important;
}

/* Scrollbar styling for better UX */
#contact-form-panel::-webkit-scrollbar {
    width: 8px;
}

#contact-form-panel::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

#contact-form-panel::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

#contact-form-panel::-webkit-scrollbar-thumb:hover {
    background: #555;
}