/* ============================================================
   public/assets/front/css/map-modal.css
   Google map marker par click hone wala field modal

   NOTE: .result-card / .result-thumb / .result-info sidebar
   cards me bhi use hote hain aur unki CSS zyada specific hai,
   isliye yahan selector chain lamba rakha gaya hai:
       #fieldModal #modalCardContainer .result-card ...
   ============================================================ */

#fieldModal.custom-map-modal{
    --mm-plum:#5b2f43;
    --mm-plum-2:#43202f;
    --mm-green:#5fae73;
    --mm-ink:#1c1418;
    --mm-muted:#8a7a82;
    --mm-line:#efe8eb;

    display:none;
    position:fixed;
    inset:0;
    z-index:9999;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(28,20,24,.55);
    backdrop-filter:blur(4px);
    font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

#fieldModal .modal-content-box{
    position:relative;
    width:100%;
    max-width:400px;
    background:#fff;
    border-radius:22px;
    box-shadow:0 40px 80px -30px rgba(28,20,24,.6);
    overflow:hidden;
    padding:0 !important;      /* purani modal padding hatao */
    margin:0 !important;
    animation:mm-pop .26s cubic-bezier(.22,1,.36,1);
}

#fieldModal #modalCardContainer{
    padding:0 !important;
    margin:0 !important;
    width:100%;
}

@keyframes mm-pop{
    from{opacity:0;transform:translateY(14px) scale(.97);}
    to{opacity:1;transform:translateY(0) scale(1);}
}

/* ---------- close ---------- */
#fieldModal .close-modal{
    position:absolute;
    top:12px;
    right:12px;
    z-index:5;
    width:32px;
    height:32px;
    border-radius:50%;
    display:grid;
    place-items:center;
    cursor:pointer;
    background:rgba(255,255,255,.92);
    color:var(--mm-ink);
    font-size:1.35rem;
    line-height:1;
    font-weight:400;
    box-shadow:0 4px 14px rgba(28,20,24,.22);
    transition:.18s ease;
}
#fieldModal .close-modal:hover{
    background:var(--mm-plum);
    color:#fff;
    transform:rotate(90deg);
}

/* ---------- card shell ---------- */
#fieldModal #modalCardContainer .result-card.fm-card{
    border:none !important;
    border-radius:0 !important;
    box-shadow:none !important;
    padding:0 !important;
    margin:0 !important;
    background:transparent !important;
    width:100% !important;
    max-width:none !important;
    display:block !important;
}

/* ---------- hero image ---------- */
#fieldModal #modalCardContainer .result-card .result-top{
    display:block !important;
    flex-direction:column !important;
    align-items:stretch !important;
    padding:0 !important;
    margin:0 !important;
    gap:0 !important;
}

#fieldModal #modalCardContainer .result-card .result-top .result-thumb{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:190px !important;
    max-height:190px !important;
    flex:none !important;
    border-radius:0 !important;
    overflow:hidden !important;
    background:#f1eaed !important;
    margin:0 !important;
    padding:0 !important;
}

#fieldModal #modalCardContainer .result-card .result-top .result-thumb img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    min-width:100% !important;
    max-width:100% !important;
    min-height:100% !important;
    max-height:100% !important;
    object-fit:cover !important;
    object-position:center !important;
    border-radius:0 !important;
    margin:0 !important;
    padding:0 !important;
}

/* ---------- info ---------- */
#fieldModal #modalCardContainer .result-card .result-info{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    flex:none !important;
    padding:18px 20px 0 !important;
    margin:0 !important;
}

#fieldModal #modalCardContainer .result-card .result-name{
    display:block !important;
    font-family:'Fraunces',Georgia,serif;
    font-size:1.35rem !important;
    font-weight:600;
    letter-spacing:-.015em;
    color:var(--mm-ink) !important;
    margin:0 0 9px !important;
    padding:0 !important;
    line-height:1.2;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
}

#fieldModal #modalCardContainer .result-card .result-address,
#fieldModal #modalCardContainer .result-card .result-distance{
    display:flex !important;
    align-items:flex-start;
    gap:8px;
    font-size:.82rem !important;
    line-height:1.45;
    color:var(--mm-muted) !important;
    margin:0 0 6px !important;
    padding:0 !important;
    white-space:normal !important;
    overflow:visible !important;
}
#fieldModal #modalCardContainer .result-card .result-address i{
    color:var(--mm-plum);
    margin-top:2px;
    flex:none;
}
#fieldModal #modalCardContainer .result-card .result-distance{
    font-weight:600;
    color:#5c4a52 !important;
}
#fieldModal #modalCardContainer .result-card .result-distance i{
    color:var(--mm-green);
    margin-top:2px;
    flex:none;
}

/* ---------- feature tags ---------- */
#fieldModal #modalCardContainer .result-card .result-tags{
    display:flex !important;
    flex-wrap:wrap;
    gap:7px;
    padding:14px 20px 0 !important;
    margin:0 !important;
}
#fieldModal #modalCardContainer .result-card .result-tags .rtag{
    display:inline-flex !important;
    align-items:center;
    gap:6px;
    font-size:.72rem;
    font-weight:600;
    color:#5c4a52;
    background:#f6f2f4;
    border:1px solid var(--mm-line);
    border-radius:999px;
    padding:6px 12px;
    margin:0;
    white-space:nowrap;
}
#fieldModal #modalCardContainer .result-card .result-tags .rtag i{
    font-size:.7rem;
    color:var(--mm-plum);
}
#fieldModal #modalCardContainer .result-card .result-tags:empty{display:none !important;}

/* ---------- actions ---------- */
#fieldModal #modalCardContainer .result-card .result-actions{
    display:flex !important;
    gap:10px;
    padding:18px 20px 20px !important;
    margin:16px 0 0 !important;
    border-top:1px solid var(--mm-line);
}

#fieldModal #modalCardContainer .result-card .btn-avail{
    flex:1 1 auto;
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    gap:9px;
    background:var(--mm-plum) !important;
    color:#fff !important;
    border-radius:999px;
    padding:12px 18px;
    font-size:.84rem;
    font-weight:700;
    text-decoration:none;
    white-space:nowrap;
    transition:.18s ease;
}
#fieldModal #modalCardContainer .result-card .btn-avail:hover{
    background:var(--mm-plum-2) !important;
    color:#fff !important;
    transform:translateY(-1px);
    box-shadow:0 12px 24px -12px rgba(91,47,67,.75);
}
#fieldModal #modalCardContainer .result-card .btn-avail .btn-icon{
    width:22px;
    height:22px;
    flex:none;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:rgba(255,255,255,.2);
    font-size:.68rem;
}
#fieldModal #modalCardContainer .result-card .btn-avail .arrow{
    transition:transform .18s ease;
}
#fieldModal #modalCardContainer .result-card .btn-avail:hover .arrow{
    transform:translateX(2px);
}

#fieldModal #modalCardContainer .result-card .btn-dir{
    flex:none;
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    gap:8px;
    background:#fff !important;
    color:var(--mm-ink) !important;
    border:1px solid #ddd0d6;
    border-radius:999px;
    padding:12px 18px;
    font-size:.84rem;
    font-weight:700;
    text-decoration:none;
    white-space:nowrap;
    transition:.18s ease;
}
#fieldModal #modalCardContainer .result-card .btn-dir:hover{
    border-color:var(--mm-plum);
    color:var(--mm-plum) !important;
    transform:translateY(-1px);
}
#fieldModal #modalCardContainer .result-card .btn-dir i{
    color:var(--mm-plum);
    font-size:.85rem;
}

/* purana divider modal me nahi chahiye */
#fieldModal #modalCardContainer .card-divider{display:none !important;}

/* ---------- responsive ---------- */
@media (max-width:479.98px){
    #fieldModal.custom-map-modal{padding:14px;}
    #fieldModal .modal-content-box{border-radius:18px;}
    #fieldModal #modalCardContainer .result-card .result-top .result-thumb{
        height:155px !important;
        max-height:155px !important;
    }
    #fieldModal #modalCardContainer .result-card .result-name{font-size:1.18rem !important;}
    #fieldModal #modalCardContainer .result-card .result-actions{flex-direction:column;}
    #fieldModal #modalCardContainer .result-card .btn-dir{width:100%;}
}

@media (prefers-reduced-motion:reduce){
    #fieldModal .modal-content-box{animation:none;}
}