.wrap {overflow: unset;}

.poland .marker,
.placowki .marker{
    position: absolute;
    background:url('/images/pin2.png') no-repeat center/cover;
    z-index: 1;
    cursor: pointer;
    transition: all 0.5s ease-out 0s;
    width: 32px;
    aspect-ratio: 0.662;
    transform:translate(-50%, -100%);
    &:hover,
    &.sel{width: 47px;}
}

.poland-wrap {
    overflow-x:hidden;
    container:poland-wrap / inline-size;
    display:flex;
    place-content: center;
    padding-block:1em;
    &>* {flex-shrink:0;}
}
.poland{
    position: relative;
    width: 1000px;
    aspect-ratio: 1.47;
    margin-inline: auto;
    &>img{width:100%;height:100%;object-fit:contain;}
    &>.markers{position: absolute;inset:0;}
}

.poland .marker{
    .toolTip {
        font-size: 18px;
        position: absolute;
        top: -38px;
        left: 50%;
        transform: translateX(-50%);
        background-color: #fff;
        font-weight: 700;
        color: #000;
        border-radius: 5px;
        border: 1px solid var(--g1-color);
        padding: 5px;
        opacity: 0;
        transition: all 0.5s ease-out 0s;
    }
    &:hover .toolTip,
    &.sel .toolTip{opacity:1;}
}

.poland .marker.wroclaw{left:35.7%;top:64.853%;}
.poland .marker.lodz{left:51.7%;top:55.294%;}
.poland .marker.warszawa {left:61.3%;top:48.088%;}

.poland .marker.gdansk{
    left:47.6%;top:16.029%;
    transform:translate(-50%, -100%) rotate(45deg);
    &:hover{left:48.3%;top:16.618%}
    .toolTip{transform: rotate(-45deg);left:-40px;top:-28px;}
}
.poland .marker.gdynia{
    left:43.6%;top:13.824%;
    transform:translate(-50%, -100%) rotate(-45deg);
    &:hover{left:42.8%;}
    .toolTip{transform: rotate(45deg);top:-20px;}
}

@container poland-wrap (width < 670px) {
    .poland {width:calc(100% + 215px);}
}

.placowki-wrap {container: placowki-wrap / inline-size;}
.placowki{
    display:grid;
    grid-template-columns: 1fr 55%;
    margin-bottom: 30px;
}
.content-text .placowki * {padding:0;margin:0;}
.placowki .tekst{
    display:grid;
    grid-template-columns: 1fr 1fr;
    position: relative;
    z-index: 1;
    background-color: #fff;
    align-content: flex-start;
}
.placowki .map-wrap {--width-map:720px;max-width:var(--width-map);}
.placowki .map-out{position:sticky;top:150px;overflow:hidden;display:grid;justify-content: center;}
.placowki .map{
    aspect-ratio: 1.069;
    width:var(--width-map);
    margin-inline:auto;
    position:relative;
    img{
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    &.gdansk .marker {left:51.857%;top:44.22%;}
    &.warszawa .marker.m1 {left:55.846%;top:52.206%;}
    &.warszawa .marker.m2 {left:50.894%;top:31.618%;}/*l:+15,t:+50*/
    &.warszawa .marker.m3 {left:51.994%;top:75.441%;}
    &.warszawa .marker.m4 {left:29.849%;top:56.912%;}
    &.warszawa .marker.m5 {left:36.864%;top:36.765%;}
    &.warszawa .marker.m6 {left:35.488%;top:25.588%;}
    &.warszawa .marker.m7 {left:44.979%;top:50.441%;}
    &.gdynia .marker {left:59.835%;top:41.176%;}
    &.lodz .marker.m1 {left:44.704%;top:46.176%;}
    &.lodz .marker.m2 {left:53.095%;top:63.971%;}
    &.wroclaw .marker {left:56.534%;top:57.794%;}

}

.placowki .godzInfo::before{
    content: "";
    display: block;
    height: 44px;
    background: url('/icon/doctor/clock.png') 50% 50% no-repeat;
    margin-bottom: 10px;
}
.placowki .godzInfo strong{
    display: block;
}

.placowki .emailInfo a{
    font-weight: 700;
    font-size: 18px;
    &::before{
        content: "";
        display: block;
        height: 44px;
        background: url('/icon/doctor/email.png') 50% 50% no-repeat;
        margin-top: 10px;
    }
}

.placowki .item {
    text-align: center;
    box-shadow: inset 0 0 0 1px rgba(228,242,218,1);
    transition: all 0.5s ease-out 0s;
    box-sizing: border-box;
    padding: 25px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    &.point:hover,
    &.point.sel{
        box-shadow: inset 0 0 0 6px rgba(126,195,76,1);
    }
}

.placowki .item a.buton1 {width: 100%;text-align: center;padding: 12px 10px;}
.placowki .item .title{font-weight: 700;}
.placowki .item .title>span{font-weight: 400;}

.placowki .item.coordinators {
    padding:0;
    display:grid;
    grid-template-rows:auto 1fr;
    article {
        padding:1em;min-width:0;box-sizing:border-box;height:100%;
        display:flex;align-items:center;flex-direction:column;gap:.6em;
        &>:last-child {margin-bottom:auto;}
    }
    header {font-weight:bold;margin-bottom:1em;}
    figure {aspect-ratio:1;}
    img {width:100%;height:100%;object-fit:contain;border-radius:6px;}
    h2, h3 {font-size:1em;padding:0;font-weight:500;color:#20523D;}
    h2 {margin:1em 1em 0;}
    h3 {margin-bottom:auto;}
    h2::after {content: none;}
    a {display:block;word-break:break-word;&:hover {color:#20523D;}}
    a[href^="tel:"]::before {content:url('/icon/doctor/telephone.png');display:block;}
    a[href^="mailto:"]::before {content:url('/icon/doctor/email.png');display:block;}
    &.multi {grid-column-start: span 2;display:grid;grid-template-columns: 1fr 1fr;gap:10px;&>h2 {grid-column-start: span 2;} }
}

.placowki .item>p {margin-bottom:15px;&.footer {margin-top:10px;}}
.placowki .item>address {margin-bottom:5px;}

.placowki .item address {
    font-style: normal;
    display:grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap:5px;
    font-size:14px;
    a{color:#333336;}
    &::before {content: "";background-repeat: no-repeat;background-position: center;background-size:contain;}
}
.placowki .address::before{background-image: url('/icon/doctor/placeholder.png');width: 18px;height: 22px;}
.placowki .phone::before{background-image:url('/icon/doctor/telephone.png');width: 20px;height: 20px;}

.placowki .trolley,
.placowki .bus,
.placowki .tram,
.placowki .subway,
.placowki .train,
.placowki .parking
{
    align-self: flex-start;
    text-align: left;
    &::before{width: 30px;height: 30px;}
}
.placowki .trolley::before{
    background-image: url('/icon/doctor/icon-trolejbus.png');
}
.placowki .bus::before{
    background-image: url('/icon/doctor/icon-trolejbus.png');
}
.placowki .tram::before{
    background-image: url('/icon/doctor/icon-tramwaj.png');
}
.placowki .subway::before{
    background-image: url('/icon/doctor/icon-metro.png');
}
.placowki .train::before{
    background-image: url('/icon/doctor/icon-pociag.png');
}
.placowki .parking::before{
    background-image: url('/icon/doctor/icon-parking.png');
}

.placowki footer.buttons {
    display:flex;
    align-items: center;
    justify-content: center;
    gap:10px;
    flex-direction:column;
    margin-top:2em;
}

.placowki button.write-to-us {
    border-radius:6px;
    background-image:linear-gradient(to right, #48ba8a 0%, #3e9e76 51%, #48ba8a 100%);
    background-size: 200% auto;
    font:600 16px 'Poppins', sans-serif;
    padding:12px 10px;
    &:hover {background-position: 100%;color:#fff;}
}

@container placowki-wrap (width < 940px) {
    .placowki {grid-template-columns: 1fr 45%;}
    .placowki .map-wrap {--width-map:550px;}
}
@container placowki-wrap (width < 780px) {
    .placowki {grid-template-columns: auto;}
    .placowki .map-wrap {display:none;}
    .placowki .tekst {max-width:510px;justify-self:center}
}
@container placowki-wrap (width < 540px) {
    .placowki .tekst {grid-template-columns:auto;max-width:270px;}
    .placowki .item.coordinators.multi {
        grid-column-start:auto;
        grid-template-columns:auto;
        &>h2 {grid-column-start:auto;}
    }
}

#form-dialog {
    margin:auto;
    border:1px solid var(--border-input);
    box-shadow:0 0 40px 0 rgba(0,0,0,0.4);
    padding:1em;
    border-radius:6px;
    transition: opacity .3s, display .3s allow-discrete;
    transition-behavior: allow-discrete;
    opacity:0;
    &:open, &:popover-open {opacity: 1;}
    &::backdrop {background-color:transparent;transition:background-color .5s, display .5s allow-discrete;}
    &:open::backdrop {background-color:rgba(0,0,0,0.3);}

}
@starting-style {
    #form-dialog:popover-open,
    #form-dialog:open {
        opacity: 0;
    }
}
#form-dialog>header {
    text-align:right;
    button {padding:0;border-radius:50%;aspect-ratio: 1;width:40px;font-size:26px;font-weight:bold;}
}