/* Layout Styles for Sales Points Modal - SCALING ONLY, NO DESIGN CHANGES */

/* Modal Content Dimensions & Scroll */
.modal-content.sales-modal {
    width: 90%;
    max-width: 900px;
    /* Preserve Scale */
    max-height: 90vh;
    /* Prevent Limit Cutoff */
    overflow-y: auto;
    /* Allow Scrolling if content overflows screen */

    /* RESET DESIGN: Remove background/color overrides to respect original design */
    background: initial;
    border: initial;
    box-shadow: initial;
}

/* Modal Overlay Positioning (Required for it to appear center) */
.modal-overlay {
    /* If this was already styled elsewhere, these might be redundant, but safe for positioning */
    display: none;
    align-items: center;
    justify-content: center;
}

.modal-overlay.active {
    display: flex;
}

/* Grid Layout Structure (Required for 2 columns) */
.sales-points-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    width: 100%;
}

@media (max-width: 768px) {
    .sales-points-grid {
        grid-template-columns: 1fr;
    }
}

/* Map Dimensions (Required for visibility) */
.sales-map-container {
    width: 100%;
    height: 350px;
    /* No background color */
}

/* FIX FOR BLURRY MODAL TEXT ON SCALED DESKTOP */
/* Force hardware acceleration and clear font rendering */
.modal-content.sales-modal,
.modal-content.sales-modal * {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-shadow: 0 0 0 transparent !important;
    transform: translateZ(0); /* Trigger GPU composition to avoid sub-pixel blurring during scale */
    backface-visibility: hidden;
}

/* Ensure the modal content container itself has a solid background to prevent transparency bleeding */
.modal-content.sales-modal {
    background-color: #1a1a1a !important; /* Force solid background */
    backdrop-filter: none !important; /* Disable backdrop filter inside the scaled modal if it causes issues */
}

/* Ensure text is sharp */
.sales-point-card h3,
.sales-point-card p,
.sales-point-card span,
.sales-modal-footer p {
    color: #fff !important;
    opacity: 1 !important;
    filter: none !important;
}


/* ENFORCE MODAL SHARPNESS ON ALL MOTHERF*CKING DEVICES */
@media (min-width: 1024px) {
    .modal-overlay,
    .modal-content.sales-modal,
    .form-modal,
    .section-modal {
        /* Force these elements OUT of the scaled container conceptually to avoid double scaling blur */
        transform: none !important; 
        zoom: 1 !important;
    }
    
    /* If they are inside the scaled container, we must counter-scale or use hard pixels */
    /* BUT simplest is to ensure high-DPI rendering is triggered */
    .modal-content,
    .sales-point-card {
        box-shadow: 0 0 1px rgba(0,0,0,0) !important; /* Force slight rasterization update */
        backface-visibility: hidden !important;
    }
}


/* APPLY CORRECT SCALING TO MODAL CONTENT */
/* APPLY CORRECT SCALING TO MODAL CONTENT */
@media (min-width: 1024px) {
    .modal-content.sales-modal {
        /* Prefer zoom for sharpness on Chrome/Edge */
        zoom: var(--desktop-scale, 1) !important;
        
        /* Reset transform if zoom is supported, otherwise fallback would be needed but mix is tricky */
        transform: none !important; 
        
        /* Fallback for Firefox (does not support zoom) */
        @supports not (zoom: 1) {
            transform: scale(var(--desktop-scale, 1)) !important;
            transform-origin: center center !important;
        }

        backface-visibility: hidden !important; 
        will-change: transform;
    }
}