@import url("/assets/css/style-base.css?v=20260929-qa1");
@import url("/assets/css/style-community.css?v=20260930-orientation1");
@import url("/assets/css/style-positive.css?v=20260930-orientation1");


/* ===== Mobile photo source picker: camera / gallery ===== */
.photo-source-picker{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin-top:7px;
}
.photo-source-input{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    opacity:0!important;
    pointer-events:none!important;
    overflow:hidden!important;
}
.photo-source-btn{
    appearance:none;
    -webkit-appearance:none;
    min-width:0;
    min-height:58px;
    padding:10px 12px;
    border:1.5px solid #c8e6c9;
    border-radius:14px;
    background:linear-gradient(180deg,#fff,#f5fbf6);
    color:#1b5e20;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    text-align:left;
    font:inherit;
    cursor:pointer;
    box-shadow:0 3px 12px rgba(27,94,32,.07);
    -webkit-tap-highlight-color:transparent;
}
.photo-source-btn:active{transform:scale(.985)}
.photo-source-btn:focus-visible{outline:3px solid rgba(67,160,71,.22);outline-offset:2px}
.photo-source-btn .photo-source-icon{font-size:1.5rem;line-height:1;flex:0 0 auto}
.photo-source-btn span:last-child{display:flex;flex-direction:column;min-width:0;line-height:1.12}
.photo-source-btn b{font-size:.88rem}
.photo-source-btn small{font-size:.69rem;font-weight:500;color:#6f7e72;margin-top:3px;white-space:nowrap}
.photo-upload-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-top:7px;
    color:#718078;
    font-size:.7rem;
    line-height:1.25;
}
.photo-upload-meta span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.photo-upload-meta span:last-child{flex:0 0 auto;font-weight:700;color:#2e7d32}
@media (hover:hover) and (pointer:fine){
    .photo-source-picker{grid-template-columns:1fr}
    .photo-source-camera{display:none}
    .photo-source-btn{justify-content:flex-start;max-width:360px}
}
@media (max-width:380px), (orientation:landscape) and (max-height:520px){
    .photo-source-picker{gap:7px}
    .photo-source-btn{min-height:50px;padding:8px 9px;border-radius:12px;gap:6px}
    .photo-source-btn .photo-source-icon{font-size:1.25rem}
    .photo-source-btn b{font-size:.8rem}
    .photo-source-btn small{font-size:.62rem}
}

/* ===== Mobile map popup: true app-shell card between “Черни Вит днес” and tabbar ===== */
@media (max-width:700px), (orientation:landscape) and (hover:none) and (pointer:coarse) and (max-height:700px) {
    :root{
        /* JS replaces these with the REAL measured free area on every open/resize. */
        --cv-mobile-map-popup-w:calc(100vw - 16px);
        --cv-mobile-map-popup-h:calc(100dvh - var(--cv-header-height,74px) - 58px - var(--cv-tabbar-height,72px) - 16px);
    }

    /* The popup itself is the highest layer inside the map. Persistent header/today/tabbar
       stay outside its measured rectangle, while all map controls sit underneath it. */
    body.cv-map-popup-open .leaflet-popup-pane{
        z-index:9000!important;
    }

    .report-popup-wrapper.leaflet-popup,
    .positive-popup-wrapper.leaflet-popup{
        width:var(--cv-mobile-map-popup-w)!important;
        max-width:var(--cv-mobile-map-popup-w)!important;
        margin:0!important;
        pointer-events:auto!important;
    }

    .report-popup-wrapper .leaflet-popup-content-wrapper,
    .positive-popup-wrapper .leaflet-popup-content-wrapper{
        width:100%!important;
        max-width:100%!important;
        height:var(--cv-mobile-map-popup-h)!important;
        max-height:var(--cv-mobile-map-popup-h)!important;
        padding:0!important;
        overflow:hidden!important;
        border:1px solid rgba(27,94,32,.10)!important;
        border-radius:20px!important;
        background:#fff!important;
        box-shadow:0 18px 52px rgba(20,45,27,.28),0 4px 14px rgba(20,45,27,.12)!important;
    }

    .report-popup-wrapper .leaflet-popup-content,
    .positive-popup-wrapper .leaflet-popup-content{
        box-sizing:border-box!important;
        width:100%!important;
        min-width:0!important;
        max-width:100%!important;
        height:100%!important;
        max-height:100%!important;
        margin:0!important;
        padding:0!important;
        overflow-x:hidden!important;
        overflow-y:auto!important;
        overscroll-behavior:contain!important;
        -webkit-overflow-scrolling:touch!important;
        scrollbar-width:thin;
        touch-action:pan-y!important;
        text-align:left!important;
        border-radius:20px!important;
    }

    .report-popup-wrapper .report-popup,
    .positive-popup-wrapper .positive-popup{
        width:100%!important;
        max-width:none!important;
        min-width:0!important;
        min-height:100%!important;
        box-sizing:border-box!important;
    }

    /* A single, always-visible close control in the requested upper-right corner. */
    .report-popup-wrapper .leaflet-popup-close-button,
    .positive-popup-wrapper .leaflet-popup-close-button{
        position:absolute!important;
        top:8px!important;
        right:8px!important;
        width:38px!important;
        height:38px!important;
        padding:0!important;
        margin:0!important;
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        border:1px solid rgba(27,94,32,.16)!important;
        border-radius:999px!important;
        background:rgba(255,255,255,.97)!important;
        color:#174d20!important;
        font-size:28px!important;
        font-weight:500!important;
        line-height:1!important;
        text-decoration:none!important;
        box-shadow:0 5px 18px rgba(0,0,0,.18)!important;
        z-index:100!important;
        -webkit-tap-highlight-color:transparent!important;
    }
    .report-popup-wrapper .leaflet-popup-close-button:active,
    .positive-popup-wrapper .leaflet-popup-close-button:active{transform:scale(.94)!important}

    /* This is a screen card on mobile, not a speech bubble pointing at the marker. */
    .report-popup-wrapper .leaflet-popup-tip-container,
    .positive-popup-wrapper .leaflet-popup-tip-container{
        display:none!important;
    }

    /* Leave visual room for X so badges/category text never sit below it. */
    .report-popup-wrapper .popup-status-badge{right:56px!important}
    .report-popup-wrapper .popup-header-text{padding-right:62px!important}
    .positive-popup-wrapper .positive-popup-header{padding-right:58px!important}

    /* Nothing from the map UI may float over the opened popup card. */
    body.cv-map-popup-open .leaflet-control-container,
    body.cv-map-popup-open .positive-map-control,
    body.cv-map-popup-open .legend,
    body.cv-map-popup-open #legend,
    body.cv-map-popup-open .submit-report-container,
    body.cv-map-popup-open #submit-report-container,
    body.cv-map-popup-open .stats-bar,
    body.cv-map-popup-open .about-fab,
    body.cv-map-popup-open .hamburger-btn,
    body.cv-map-popup-open .cv-hint-host,
    body.cv-map-popup-open .village-layer-bar{
        opacity:0!important;
        visibility:hidden!important;
        pointer-events:none!important;
        transition:opacity .12s ease!important;
    }

    /* Compact media keeps more useful text/actions visible while the whole card remains scrollable. */
    .report-popup-wrapper .popup-header-img{
        height:128px!important;
        min-height:128px!important;
        max-height:128px!important;
    }
    .positive-popup-wrapper .positive-popup-photo{
        height:122px!important;
        min-height:122px!important;
        max-height:122px!important;
    }
}

@media (orientation:landscape) and (hover:none) and (pointer:coarse) and (max-height:700px) {
    .report-popup-wrapper .popup-header-img,
    .positive-popup-wrapper .positive-popup-photo{
        height:86px!important;
        min-height:86px!important;
        max-height:86px!important;
    }
}


/* ===== Leaflet clusters: readable, touch-friendly and consistent with map mode ===== */
.marker-cluster{background:transparent!important}
.marker-cluster div{background:transparent!important}
.cv-map-cluster{
    width:50px;height:50px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;
    color:#fff;border:3px solid rgba(255,255,255,.96);box-shadow:0 5px 16px rgba(0,0,0,.28);
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1;transform:translateZ(0)
}
.cv-map-cluster b{font-size:1rem;line-height:1;font-weight:900}
.cv-map-cluster small{font-size:.54rem;line-height:1.1;font-weight:800;margin-top:3px;letter-spacing:.01em}
.cv-map-cluster--report{background:linear-gradient(145deg,#ef6c00,#d84315)}
.cv-map-cluster--positive{background:linear-gradient(145deg,#f9a825,#2e7d32)}
.cv-map-cluster--mixed{background:linear-gradient(145deg,#8e24aa,#2e7d32)}
.cv-map-cluster.cv-map-cluster--large{width:58px;height:58px}
.cv-map-cluster.cv-map-cluster--large b{font-size:1.12rem}
@media (max-width:700px){
    .cv-map-cluster{width:54px;height:54px}
    .cv-map-cluster.cv-map-cluster--large{width:62px;height:62px}
}

/* Pending citizen resolution is a state, not another clickable action. */
.popup-resolve-btn.is-pending,
.report-action-btn.is-pending{
    opacity:.82!important;cursor:default!important;background:#fff8e1!important;color:#8a5a00!important;border-color:#ffe082!important
}

/* Resolution modal uses the same camera/gallery UX as new reports and Beauties. */
.resolution-content .resolution-photo-hint{margin-top:7px;color:#6f7e72;font-size:.74rem;line-height:1.4}
.resolution-process{display:grid;grid-template-columns:auto 10px auto 10px auto 10px auto;align-items:center;gap:4px;margin:10px 0 16px;padding:10px;border:1px solid #dceee0;border-radius:14px;background:#f7fbf8;color:#315d38;font-size:.68rem;font-weight:700;text-align:center}
.resolution-process span{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.resolution-process b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#2e7d32;color:#fff;font-size:.72rem}
.resolution-process i{font-style:normal;color:#9eaf9f;font-size:1rem}
@media(max-width:380px){.resolution-process{font-size:.6rem;padding:8px 6px;gap:2px}}