@keyframes fadeInSlide {
                    from {
                        opacity: 0;
                        transform: translateY(-8px);
                    }
                    to {
                        opacity: 1;
                        transform: translateY(0);
                    }
                }
                
                @keyframes typing-dot {
                    0%, 60%, 100% { opacity: 0.3; }
                    30% { opacity: 1; }
                }
                
                #zonePredictor {
                    animation: fadeInSlide 0.4s ease-out;
                }
                
                .zone-predictor-loading::after {
                    content: '';
                    display: inline-block;
                    width: 8px;
                    height: 8px;
                    background: #000000 !important; /* force black (override any green) */
                    border-radius: 50%;
                    margin-left: 6px;
                    animation: typing-dot 1.4s infinite;
                    box-shadow: none !important;
                    border: none !important;
                }
                
                #zonePredictorBox {
                    transition: all 0.3s ease;
                }

                /* Upload modal header (matches Change Location modal look) */
                #uploadModal .cl-intro { display:flex; align-items:center; gap:8px; margin:2px 0 10px; }
                #uploadModal .cl-intro .cl-globe { font-size:22px; line-height:1; flex-shrink:0; animation: pulse-glow 900ms ease-in-out infinite; animation-play-state: running !important; }
                #uploadModal .cl-intro .cl-title { font-size:15px; font-weight:700; color:#0f172a; line-height:1.2; }
                #uploadModal .cl-intro .cl-sub { font-size:12px; color:#6b7280; margin-top:1px; }
                
                #zonePredictorBox:hover {
                    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.25) !important;
                    transform: translateY(-2px);
                }
                /* Ensure the posting modal has a thick black border and rounded corners */
                #uploadModal {
                    --upload-border: 8px;
                    background: var(--modal-backdrop-tint) !important;
                }
                #uploadModal .modal-content {
                    /* No border for posting modal per user preference */
                    border: none !important;
                    border-radius: 18px !important;
                    box-shadow: 0 20px 48px rgba(0,0,0,0.08) !important;
                    /* Shared vertical position so this modal aligns with the Change Location modal. */
                    transform: translateY(var(--modal-translate));
                    /* Allow the posting modal to scroll vertically so expanded boost/sell
                       checkout panels (Link button, card form, Stripe pay button) stay
                       reachable. Keep horizontal overflow clipped for rounded corners. */
                    max-height: 92vh !important;
                    min-height: 56vh !important; /* give the modal more vertical presence */
                    overflow-y: auto !important;
                    overflow-x: hidden !important;
                    -webkit-overflow-scrolling: touch;
                    /* Minimal padding to reduce wasted space */
                    padding: 12px 20px 12px !important;
                    box-sizing: border-box;
                }

                /* Smaller screens should still behave responsively */
                @media (max-width: 600px) {
                    #uploadModal .modal-content {
                        min-height: 48vh !important;
                        padding: 20px !important;
                        /* Raise posting modal on mobile devices */
                        transform: translateY(-9vh) !important;
                    }
                }
                /* Very big screens only: raise the posting modal so it sits above
                   dead-center. Smaller screens keep the default position. */
                /* Large-screen override handled by shared variable above */

                /* ====================================================================
                   RESPONSIVE SCALE-UP: posting modal + change-location modal.
                   5.4" phones (≈≤430px CSS width: iPhone mini / X / 11 Pro) keep the
                   compact 400px width. Larger devices scale up progressively so the
                   modals feel roomier on bigger phones, tablets, and desktops.
                   ==================================================================== */
                @media (min-width: 431px) {
                    #uploadModal .modal-content,
                    #changeGridModal {
                        max-width: min(92vw, 470px) !important;
                    }
                }
                @media (min-width: 768px) {
                    #uploadModal .modal-content,
                    #changeGridModal {
                        max-width: min(86vw, 580px) !important;
                    }
                    /* On larger devices, let posting modal size to content to avoid dead bottom space. */
                    #uploadModal .modal-content {
                        min-height: auto !important;
                        height: auto !important;
                        max-height: 88vh !important;
                        padding-bottom: 18px !important;
                    }
                }
                @media (min-width: 1024px) {
                    #uploadModal .modal-content,
                    #changeGridModal {
                        max-width: min(80vw, 680px) !important;
                    }
                }