.expansionelement .image__marker--background {
    margin-bottom: -2.5rem; /* -40px */
    margin-top: -2.5rem; /* -40px */
}

.expansionelement .phase {
    position: relative;
    display: inline-block;
}

.expansionelement .bottom {
    position: absolute;
    bottom: 1.875rem; /* 30px */
}

.expansionelement .phase .phase__title:before {
    position: absolute;
    left: 0;
    content: '';
    height: 0.9375rem; /* 15px */
    width: 0.9375rem; /* 15px */
    top: 50%;
    display: inline-block;
    transform: translateY(-50%);
}

.expansionelement .phase .phase__title.square:before {
    border-radius: 0 !important;
}

.expansionelement .phase .phase__title.circle:before {
    border-radius: 50% !important;
}

.image__marker--point {
    background-color: #FA7F26;
    border-radius: 50%;
    outline: 3px solid;
    outline-color: rgba(255, 255, 255, 0.5);
    transition: 500ms;
    height: 1.25rem; /* 20px */
    width: 1.25rem; /* 20px */
    opacity: 1;
    z-index: 50;
}

.image__marker--point .point__hover {
    opacity: 0;
    display: inline-block;
    background-color: #fff;
    padding: 0 0.5rem; /* 8px */
    transition: opacity 0.3s ease;
    border-radius: 0.9375rem; /* 15px */
    position: absolute;
    z-index: 100;
}

.image__marker--point .point__hover * {
    font-size: 0.875rem; /* 14px */
    display: ruby;
}

.image__marker--point:hover .point__hover {
    opacity: 1;
    transition: opacity 0.3s ease;
}

.expansionelement .phase i {
    color: #fff !important;
    position: relative;
}

.expansionelement .phase i .info {
    opacity: 0;
    transition: opacity 0.3s ease;
    position: absolute;
    bottom: 200%;
    left: 0;
    padding: 0.625rem; /* 10px */
    background-color: #fff;
    border-radius: 0.9375rem; /* 15px */
    width: 18.75rem; /* 300px */
    transform: translateX(-45%);
}

.expansionelement .phase i .info * {
    color: #000 !important;
}

.expansionelement .phase i .info:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-left: -0.3125rem; /* -5px */
    border: solid 0.4375rem; /* 7px */
    border-color: #fff transparent transparent transparent;
}

.expansionelement .phase i:hover .info {
    transition: opacity 0.3s ease;
    opacity: 1;
}

.legend_color {
    display: inline-block;
    width: 0.625rem; /* 10px */
    height: 0.625rem; /* 10px */
    border-radius: 9999px;
    margin-right: 0.625rem; /* 10px */
}

.legendentry {
    font-size: 0.75rem; /* 12px */
    color: white;
    margin-right: 0.625rem; /* 10px */
}

.content {
    width: 12.5rem; /* 200px */
    height: auto;
    position: absolute;
    display: none;
    top: 50%;
    left: 30%;
    background-color: #fff;
    padding: 0.75rem; /* 12px */
    transition: opacity 0.3s ease;
    border-radius: 0.9375rem; /* 15px */
    z-index: 100;
}

.content .close {
    position: absolute;
    top: -1.875rem; /* -30px */
    right: 0;
    transition: all 200ms;
    font-size: 1.25rem; /* 20px */
    font-weight: bold;
    text-decoration: none;
    background: #fff;
    padding: 0.5rem; /* 8px */
    border-radius: 50%;
    color: #001d6c;
}

.content .close:hover {
    color: #001d6c;
}

.expansionelement .circle {
    width: 13.75rem; /* 220px */
    height: 13.75rem; /* 220px */
    line-height: 13.75rem; /* 220px */
    border-radius: 50%;
    font-size: 3.125rem; /* 50px */
    color: #fff;
    text-align: center;
}

.expansionelement .orange__circle {
    position: absolute;
    left: 0;
    bottom: 0;
    top: unset;
    right: unset;
    z-index: 1;
}

.expansionelement .circle-with-text {
    background: rgb(248, 116, 37);
    background: linear-gradient(90deg, rgba(248, 116, 37, 1) 0%, rgba(255, 162, 41, 1) 100%);
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    text-align: center;
    padding: 0.9375rem; /* 15px */
    height: 13.75rem; /* 220px */
    width: 13.75rem; /* 220px */
    color: #fff;
    display: table-cell;
    vertical-align: middle;
}

.expansionelement .mobil__detaillinks .border-bottom {
    border-bottom: 1px solid #1B59A0 !important;
}

.expansionelement .mobil__detaillinks .bg-primary {
    background: rgb(254, 158, 40);
    background: linear-gradient(90deg, rgba(254, 158, 40, 1) 0%, rgba(249, 118, 37, 1) 100%);
}

.expansionelement .select__commune select {
    height: 3.125rem !important; /* 50px */
    line-height: 2.625rem !important; /* 42px */
    padding: 0.3125rem 1.5625rem; /* 5px 25px */
    border-radius: 0.5rem; /* 8px */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1.5625rem center; /* 25px */
    background-size: 1em;
}

@media (max-width: 1199.98px) {
    .expansionelement .circle-with-text h4 {
        font-size: 1.5rem !important; /* 24px */
        line-height: 2rem !important; /* 32px */
    }
}

@media screen and (max-width: 767.98px) {
    .expansionelement .image__marker--background {
        margin-bottom: 0.625rem; /* 10px */
        margin-top: 1.25rem; /* 20px */
    }

    .expansionelement .bottom {
        position: relative;
        bottom: 1.875rem; /* 30px */
    }

    .expansionelement .point__hover {
        display: none;
    }

    .expansionelement .circle-with-text {
        padding: 0.9375rem; /* 15px */
        height: 8.125rem; /* 130px */
        width: 8.125rem; /* 130px */
    }

    .expansionelement .circle-with-text h4 {
        font-size: 0.9375rem; /* 15px */
        line-height: 1.4375rem; /* 23px */
    }
}

/* Static styles that don't need to be dynamic */
.expansionelement .bold {
    color: #fff;
}

.expansionelement .white {
    opacity: .75;
}

.expansionelement .image__marker--point {
    position: absolute;
    transform: translateX(-50%) translateY(-100%);
}

/* FiberQuote Popup Base Styles */
.fiber-quote-popup {
    display: none;
    position: absolute;
    z-index: 1000;
    background: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-width: 300px;
    max-width: 400px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}


.fiber-quote-popup[style*="display: block"] {
    opacity: 1;
    transform: translateY(0);
    text-align: left;
}


#fiberquotemobile .progress,
.fiber-quote-popup .progress {
    border-radius: 5rem;
}

#fiberquotemobile .progress-bar,
.fiber-quote-popup .progress-bar {
    border-radius: 500rem;
    background: linear-gradient(90deg, rgba(248,116,37,1) 0%, rgba(255,162,41,1) 100%);
}

#fiberquotemobile .percentage,
.fiber-quote-popup .percentage {
    font-weight: bold;
    background: linear-gradient(90deg, rgba(248,116,37,1) 0%, rgba(255,162,41,1) 100%);
    color: white;
    padding: .25rem .5rem;
    border-radius: .5rem;
}

#fiberquotemobile .planned i,
#fiberquotemobile .supplied i,
.fiber-quote-popup .planned i,
.fiber-quote-popup .supplied i {
    color: inherit;
    margin-left: .5rem;
}

#fiberquotemobile .supplied,
.fiber-quote-popup .supplied {
    font-weight: bold;
    color: #00B168;
}

#fiberquotemobile .planned,
.fiber-quote-popup .planned {
    font-weight: bold;
    color: #E10021;
}

.fiber-quote-popup h3 {
    margin-bottom: 0.5rem;
    color: #333;
}

.fiber-quote-popup strong {
    color: #495057;
}

.fiber-quote-popup hr {
    margin: 0.75rem 0;
    border-color: #dee2e6;
}

.fiber-quote-popup [data-bs-toggle="collapse"] i.fa-chevron-down {
    background: linear-gradient(to right, rgba(0,29,108,1) 0%, rgba(1,80,159,1) 100%);
    border-radius: 50%;
    padding: .25rem;
    color: white;
    aspect-ratio: 1;
    height: 25px;
    width: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Marker styling for communes with FiberQuotes */
.image__marker--point[data-has-fiber-quotes="true"] {
    cursor: pointer;
    transition: transform 0.2s ease;
    text-align: left;
}

.image__marker--point[data-has-fiber-quotes="true"]:hover {
    transform: translateX(-50%) translateY(-100%) scale(1.1);
}

#fiberquotemobile .accordion-item {
    border: none;
    border-radius: 0;
    border-bottom: 1px solid #ccc;
}
#fiberquotemobile .accordion-button {
    gap: 1rem;
    box-shadow: none;
    background-color: white;
    padding-inline: 0;
}
#fiberquotemobile .accordion-body {
    padding-inline: 0;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .fiber-quote-popup {
        max-width: 280px;
        min-width: 250px;
        font-size: 13px;
    }
}

@media (max-width: 576px) {
    .fiber-quote-popup {
        max-width: 240px;
        min-width: 220px;
        font-size: 12px;
        padding: 12px;
    }
}