/* PHOTOROLLER */
.photoroller {
    .preview{
        width: 100%; height: auto; aspect-ratio: 1 / 1; white-space: nowrap; font-size: 0; overflow: hidden; position: relative;
        .itm { flex: 0 0 100%; max-width: 100%; object-fit: contain; height: 100%; display: inline-block }
        .itm.trans { transition: margin 200ms; }
        .ctrl-vid {
            position: absolute; bottom: 5%; left: 0; right: 0; text-align: center; display: none;
            &.show { display: block; }
            >div { background-color: rgba(255, 255, 255, 0.5); display: inline-block; padding: 3px; border-radius: 5px;}
            >div>svg { width: 28px; display: inline-block; cursor: pointer; padding: 5px; border-radius: 8px; margin-left: 10px; margin-right: 10px;}
            >div>svg:hover { background-color: white; fill: #5d5858;}
        }
    }
    .thumbs {
        display: flex; flex-wrap: wrap; justify-content: center;
        .itm { display: flex; box-sizing: border-box; padding: 5px; width: calc(100% / 6 ); max-width: 120px; min-width: 60px; height: auto; aspect-ratio: 1 / .8;    cursor: pointer;}
        .itm-img { flex: 1; background-repeat: no-repeat; background-position: center; background-size: 90%;  border: 2px solid #dedede; }
        .itm:hover { border-color: rgba(52, 51, 52, 0.92); }
        .itm .plico { width: 50px; fill: white; opacity: .7; }
    }
}


/* PAGE - AD */
.act-portal-ad {
    .photoroller {

        .preview { aspect-ratio: 1 / 1;}
    }
    .pttl { margin-top: 0; margin-bottom: 0; font-size: 24px;}
    .ad-cols {
        display: flex; gap: 20px;
        .ad-col-imgs { flex: 0 0 600px; max-width: 600px; position: relative; display: flex; flex-direction: column; gap: 20px; }
        .ad-col-sticky { position: sticky; top: 144px; }
        .ad-col-txts {
            flex: 1; display: flex; flex-direction: column; gap: 10px;
            .subttx { font-size: 20px; font-weight: bold; margin-top: 20px; margin-bottom: 10px;}
        }
    }
    .ad-toolbar {
        display: flex; gap: 10px;
        >div { padding: 10px; border: 1px solid grey; border-radius: 5px; cursor: pointer; transition: all .25s; background-color: #fff9f3;}
        .favorite {
            &::before { content: ""; mask: url("/f/svg/sect-portal/ad-tool-fav.svg") no-repeat center/32px; padding: 16px; background-color: lightgrey; margin-right: 5px; }
            &:not(.active) {
                .lbl-fav {display: inline-block }
                .lbl-unfav {display: none; }
            }
            &.active {
                &::before { background-color: darkorange;}
                .lbl-fav { display: none; }
                .lbl-unfav { display: inline-block; }
            }
        }
        .note {
            &::before { content: ""; mask: url("/f/svg/sect-portal/ad-tool-note.svg") no-repeat center/26px; padding: 16px; background-color: #cc6600; margin-right: 5px; }
        }
        .question {
            &::before { content: ""; mask: url("/f/svg/sect-portal/ad-tool-question.svg") no-repeat center/28px; padding: 16px; background-color: #5081a8; margin-right: 5px; }
        }
    }
    .user-note:not(:empty) { background-color: #ffe2ab; padding: 10px; border-radius: 5px; }
    .ad-ot-holder {
        display: flex; gap: 10px;
        >* { border-radius: 5px; padding: 5px; font-size: 18px; display: flex; align-items: center;}
        .ot-private { border: 2px solid lightgrey;}
        .ot-business { background-color: #474747; color: white;}
        .ot-encumbrance {  background-color: #d10000; color: white; }
    }
    .price-holder{
        display: flex;; gap: 10px; align-items: center;
        .price-lbl { font-size: 22px; color: grey;}
        .price { font-size: 24px;}
        .price-haggle  { background-color: darkorange; color: white; padding: 5px; border-radius: 5px;}
    }
    .pricelist {
        display: grid; grid-template-columns: 1fr 1fr;
        >div { padding: 10px; border-bottom: 1px solid grey; font-size: 18px;}
    }
    .props-grid {
        display: grid; grid-template-columns: 1fr 1fr;
        >div { padding: 5px; border-bottom: 1px solid grey; }
        .cval-hidden { color: grey; font-style: italic;}
    }
    .props-hidden { color: grey; font-style: italic;}
    .conditions {
        display: flex; align-items: start; gap: 10px;
        >* { padding: 5px; border-radius: 3px; }
    }
    .map-city { font-weight: bold;}
    .map-holder { height: 400px;}
    .addr-item {
        &::before{ content: ""; mask: url("/f/svg/sect-portal/marker.svg") no-repeat center/20px; padding: 10px;margin-right: 10px; background-color: #737373
        }
        font-size: 18px;
    }
    .addr-deliv {
        display: flex;; flex-direction: column;; gap: 5px;
        .addr-deliv-ttl { font-weight: bold;}
        .addr-deliv-item { .path{ color: grey;}}
    }
    .author {
        display: flex; gap: 20px;
        .author-img { max-width: 90px; max-height: 90px; min-width:90px; min-height:90px; border-radius: 120px; overflow: hidden; object-fit: cover;}
        .author-name { font-size: 20px;}
    }
    .fea-invalids {
        background-color: #d3e8d5; border-radius: 5px; padding: 10px;
        &::before { content: ""; mask:  url("/f/svg/sect-portal/ad-invalid.svg") no-repeat center/24px; padding: 12px; margin-right: 10px; background-color: #2b2b2b;}
    }
    .fea-pensioneers {
        background-color: #d3e8d5; border-radius: 5px; padding: 10px;
        &::before { content: ""; mask:  url("/f/svg/sect-portal/ad-pensioneer.svg") no-repeat center/24px; padding: 12px; margin-right: 10px; background-color: #2b2b2b;}
    }

}