/* Temporary CSS fix for orientation angle display */

/* Base styles for configurator pictures */
.configurator-picture {
    display: block;
    width: 120px;
    height: 120px;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    overflow: hidden;
    text-align: left;
    text-indent: -999em;
}

/* House icon SVG */
.orientationAngle-house {
    background-image: url('data:image/svg+xml,%3C?xml%20version%3D%221.0%22%20?%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2291.957%22%20height%3D%22140.989%22%20viewBox%3D%220%200%2091.957%20140.989%22%3E%3Cg%20id%3D%22Groupe_306%22%20data-name%3D%22Groupe%20306%22%20transform%3D%22translate%28-393.752%20-1575.04%29%22%3E%3Cg%20id%3D%22Groupe_305%22%20data-name%3D%22Groupe%20305%22%3E%3Cpath%20id%3D%22Trac%C3%A9_155%22%20data-name%3D%22Trac%C3%A9%20155%22%20d%3D%22M397.8,1559.284v-66.317l41.186-34.206v71.9Z%22%20transform%3D%22translate%28-2.047%20120.54%29%22%20fill%3D%22none%22%20stroke%3D%22%23bababa%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%224%22/%3E%3Cpath%20id%3D%22Trac%C3%A9_156%22%20data-name%3D%22Trac%C3%A9%20156%22%20d%3D%22M485.757,1559.894v-66.317l-39.364-34.205v71.9Z%22%20transform%3D%22translate%28-2.047%20120.54%29%22%20fill%3D%22none%22%20stroke%3D%22%23bababa%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%224%22/%3E%3Crect%20id%3D%22Rectangle_123%22%20data-name%3D%22Rectangle%20123%22%20width%3D%2214.784%22%20height%3D%2229.319%22%20transform%3D%22translate%28449.243%201684.71%29%22%20fill%3D%22none%22%20stroke%3D%22%23bababa%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%224%22/%3E%3Crect%20id%3D%22Rectangle_124%22%20data-name%3D%22Rectangle%20124%22%20width%3D%2216.493%22%20height%3D%2216.493%22%20transform%3D%22translate%28416.257%201679.823%29%22%20fill%3D%22none%22%20stroke%3D%22%23bababa%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%224%22/%3E%3C/g%3E%3Cpath%20id%3D%22Trac%C3%A9_165%22%20data-name%3D%22Trac%C3%A9%20165%22%20d%3D%22M397.8,1548.348v45.141h87.957v-41.128%22%20transform%3D%22translate%28-2.047%20120.54%29%22%20fill%3D%22none%22%20stroke%3D%22%23bababa%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%224%22/%3E%3C/g%3E%3C/svg%3E');
}

/* Orientation angle section */
section#orientation_angle > .content {
    display: flex;
    flex-direction: row;
    height: 300px;
    width: 280px;
    margin-right: auto;
    position: relative;
}

section#orientation_angle > .content > .field.angle {
    position: absolute;
    padding: 0;
}

section#orientation_angle > .content > .field.angle:hover .icon-angle {
    border-color: #2d8322;
    border-width: 3px;
}

section#orientation_angle > .content > .field.angle:hover .tag {
    color: #2d8322;
}

/* Style when radio input is checked - using :has() selector */
section#orientation_angle > .content > .field.angle:has(input:checked) .icon-angle {
    border-color: #2d8322;
    border-width: 3px;
}

section#orientation_angle > .content > .field.angle:has(input:checked) .tag {
    color: #2d8322;
}

section#orientation_angle > .content > .field.angle input[type="radio"] {
    height: 0;
}

section#orientation_angle > .content > .field.angle .label.form-check {
    color: #ccc;
}

section#orientation_angle > .content > .field.angle p.tag {
    position: absolute;
    white-space: nowrap;
}

section#orientation_angle > .content > div.orientationAngle-house {
    position: absolute;
    top: 80px;
    left: 80px;
    z-index: 1;
}

/* Angle icon */
.icon-angle {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 3px solid #ccc;
    border-radius: 50%;
    height: 4rem;
    width: 4rem;
    box-sizing: border-box;
}

.icon-angle::before {
    content: '';
    border-left: 1em solid transparent;
    border-right: 1em solid transparent;
    border-bottom: 1em solid;
    display: inline-block;
}

/* South */
.orientation_angle-0 {
    top: 220px;
    left: 110px;
}

.orientation_angle-0 p.tag {
    top: 74px;
    left: 13px;
}

/* South west */
.orientation_angle-1 {
    top: 187px;
    left: 32px;
}

.orientation_angle-1 .icon-angle {
    transform: rotate(45deg);
}

.orientation_angle-1 p.tag {
    top: 27px;
    right: 70px;
}

/* West */
.orientation_angle-2 {
    top: 110px;
    left: 0;
}

.orientation_angle-2 .icon-angle {
    transform: rotate(90deg);
}

.orientation_angle-2 p.tag {
    top: 27px;
    right: 70px;
}

/* North west */
.orientation_angle-3 {
    top: 32px;
    left: 32px;
}

.orientation_angle-3 .icon-angle {
    transform: rotate(125deg);
}

.orientation_angle-3 p.tag {
    top: 27px;
    right: 70px;
}

/* North */
.orientation_angle-4 {
    top: 0;
    left: 110px;
}

.orientation_angle-4 .icon-angle {
    transform: rotate(-180deg);
}

.orientation_angle-4 p.tag {
    bottom: 74px;
    left: 13px;
}

/* North east */
.orientation_angle-5 {
    top: 32px;
    left: 187px;
}

.orientation_angle-5 .icon-angle {
    transform: rotate(-125deg);
}

.orientation_angle-5 p.tag {
    top: 27px;
    left: 70px;
}

/* East */
.orientation_angle-6 {
    top: 110px;
    left: 220px;
}

.orientation_angle-6 .icon-angle {
    transform: rotate(-90deg);
}

.orientation_angle-6 p.tag {
    top: 27px;
    left: 70px;
}

/* South east */
.orientation_angle-7 {
    top: 187px;
    left: 187px;
}

.orientation_angle-7 .icon-angle {
    transform: rotate(-45deg);
}

.orientation_angle-7 p.tag {
    top: 27px;
    left: 70px;
}

/* Responsive adjustments */
@media (max-width: 767px) {
    section#orientation_angle > .content {
        justify-content: center;
        align-items: center;
    }
    
    section#orientation_angle > .content div.orientationAngle-house {
        width: 25%;
        height: 25%;
        top: calc(75px + 10%);
        left: unset;
    }
    
    section#orientation_angle > .content .field.angle {
        align-items: center;
    }
    
    section#orientation_angle > .content .field.angle .tag {
        top: -1rem !important;
        left: unset !important;
        right: unset !important;
        text-align: center;
        width: auto;
    }
}

@media (max-width: 1024px) {
    section#orientation_angle > .content {
        margin-left: auto;
    }
}

@media (min-width: 1024px) {
    section#orientation_angle {
        display: inline-flex;
        flex-direction: column;
        width: 49%;
    }
    
    section#orientation_angle > .content {
        margin-left: 50px;
    }
}

.item-cursor-pointer {
    cursor: pointer;
}