.modal-configuratore .modal-header { border-bottom: unset; padding: 0; margin-bottom: 30px; }
.modal-configuratore .modal-header .modal-title, .modal-configuratore .modal-header .close  { font-weight:400; }
.modal-configuratore .modal-title { text-transform: unset; }
.modal-configuratore .modal-body { padding: 0; }
.modal-configuratore .modal-content { background-color: #fff; border: 0; padding: 30px; }
.modal-configuratore .modal-content .shape { padding: 15px; margin-bottom: 30px; background-color: #f0f0f0; cursor: pointer; }
.modal-configuratore .modal-content .shape .img { height: 150px; background-size:contain; background-position: center; background-repeat: no-repeat; }
.modal-configuratore .modal-content .shape h4 { text-align: center; margin-bottom: 15px; word-wrap: break-word; }

/* Section configuratore */
.bg-head-configuratore {background-color:#777}
.section-configuratore #canvas_wrapper { border:0; overflow:hidden; }
.section-configuratore ul.menu { white-space: nowrap; list-style-type: none; width:calc(100% + 2px); margin:0; padding:0; display:flex; overflow-x: auto }
.section-configuratore ul.menu li { opacity:0.6; background-color:#d8d8d8; padding:15px 10px; text-align:center; display: inline-block; flex: 1 1 0; margin:0 2px; cursor:pointer; }
.section-configuratore ul.menu li:hover { opacity:1; }
.section-configuratore ul.menu li.active { opacity:1; }
.section-configuratore ul.menu li img { max-width:30px; max-height:30px; }
.section-configuratore ul.menu li span { display:block; font-weight:bold; font-size : 12px; }

.section-configuratore ul.shapes_desktop_list { list-style-type: none; margin:0; padding:0; }
.section-configuratore ul.shapes_desktop_list > li { border-top:1px solid #DBDADA; border-bottom:1px solid #DBDADA; padding: 15px 0 15px 10px; cursor:pointer; }
.section-configuratore ul.shapes_desktop_list > li.active { background-color:#f0f0f0; }
.section-configuratore ul.shapes_desktop_list > li:last-child { border-bottom:1px solid #DBDADA; }
.section-configuratore ul.shapes_desktop_list > li > div { display: flex; justify-content: space-between; align-items: center; }

.section-configuratore .loading { visibility:hidden; }

.section-configuratore .select__arrow:before {background-image:url(/frontend/assets/icons/icon-angle-down-secondary.svg);}
.section-configuratore .panel-title a[aria-expanded="false"]:after {background-image:url(/frontend/assets/icons/icon-angle-down-primary.svg);}
.section-configuratore .panel-title a[aria-expanded="true"]:after {background-image:url(/frontend/assets/icons/icon-angle-up-primary.svg);}

/*
 * Il wrapper esterno non crea più spazio artificiale.
 * La main_wrapper è il contenitore geometrico reale delle lastre: ne limita
 * l'ingombro trasformato e può ricevere un colore, gradiente o immagine di fondo.
 */
 
.section-configuratore .wrapper-to-image { overflow-x: hidden; }
.section-configuratore .wrapper { padding:0; margin:20px 0; }
.section-configuratore .main_wrapper { position: relative; width: 100%; max-width: 100%; margin: 0 auto; transform-style: preserve-3d; isolation: isolate; background-image:var(--canvas-container-background, none); background-position:center; background-repeat:repeat; background-size:cover; }
.section-configuratore .dimension-control { display:flex; align-items:center; gap:10px; }
.section-configuratore .dimension-slider { flex:1 1 auto; min-width:0; }
.section-configuratore .dimension-number { width:90px; flex:0 0 90px; margin: 0; }

.section-configuratore [id^="canvas_wrapper_"] { position: absolute; box-sizing: border-box; border: 0; border-radius: 0; padding: 0; background: transparent; transform: none; transform-style: preserve-3d; box-shadow: none; overflow: visible; pointer-events: none; }
.section-configuratore [id^="canvas_wrapper_"] > .is-enabled::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 1; pointer-events: none; z-index: 10; }
.section-configuratore [id^="canvas_wrapper_"] > div { position: relative; transform-style: preserve-3d; pointer-events: auto; }
.section-configuratore .konvajs-content canvas { outline: 1px solid black; outline-offset: -1px; }

.section-configuratore #canvas_wrapper_1,
.section-configuratore #canvas_wrapper_3 { z-index:3; }
.section-configuratore #canvas_wrapper_2 { z-index:1; }
.section-configuratore .main_wrapper.is-two-slabs #canvas_wrapper_2 { z-index:3; }

/* La prospettiva è applicata intorno al giunto interno di ogni lastra. */
.section-configuratore [id^="canvas_perspective_"] { position: relative; width: 100%; height: 100%; transform: none; transform-origin: center center; transform-style: preserve-3d; backface-visibility: hidden; clip-path: none; will-change: transform; }
.section-configuratore [id^="canvas_perspective_"].is-active { box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px; }

/* Una sola lastra: nessuna profondità. */
.section-configuratore #canvas_perspective_2.is-center {
  transform: none;
}

/* Due lastre: la centrale può essere il pannello destro o sinistro del giunto. */
.section-configuratore #canvas_perspective_2.is-center.center-with-left {
  transform-origin: left center;
  transform: perspective(var(--canvas-perspective-distance, 1400px)) rotateY(calc(var(--canvas-perspective-angle, 0deg) * -1));
}
.section-configuratore #canvas_perspective_2.is-center.center-with-right {
  transform-origin: right center;
  transform: perspective(var(--canvas-perspective-distance, 1400px)) rotateY(var(--canvas-perspective-angle, 0deg));
}

/* Pannello a sinistra del giunto: il lato esterno avanza verso l'osservatore. */
.section-configuratore #canvas_perspective_1.is-left {
  transform-origin: right center;
  transform: perspective(var(--canvas-perspective-distance, 1400px)) rotateY(var(--canvas-perspective-angle, 0deg));
}

/* Pannello a destra del giunto: il lato esterno avanza verso l'osservatore. */
.section-configuratore #canvas_perspective_3.is-right {
  transform-origin: left center;
  transform: perspective(var(--canvas-perspective-distance, 1400px)) rotateY(calc(var(--canvas-perspective-angle, 0deg) * -1));
}

/* Frame/Cornice */
.section-configuratore .frame { position: absolute; pointer-events: none; z-index: 20; background-image: var(--canvas-frame-bg); background-size: auto; background-repeat: repeat; }

.section-configuratore .frame.top { top: 0; left: 0; right: 0; height: var(--canvas-frame-depth, 20px); overflow: hidden; background-image: none; clip-path: polygon(0 0, 100% 0, calc(100% - var(--canvas-frame-depth, 20px)) 100%, var(--canvas-frame-depth, 20px) 100%); }

.section-configuratore .frame.bottom { bottom: 0; left: 0; right: 0; height: var(--canvas-frame-depth, 20px); overflow: hidden; background-image: none; clip-path: polygon(var(--canvas-frame-depth, 20px) 0, calc(100% - var(--canvas-frame-depth, 20px)) 0, 100% 100%, 0 100%); }

.section-configuratore .frame.left { top: 0; bottom: 0; left: 0; width: var(--canvas-frame-depth, 20px); clip-path: polygon(0 0, 100% var(--canvas-frame-depth, 20px), 100% 100%, 0 100%); }
.section-configuratore .frame.right { top: 0; right: 0; bottom: 0; width: var(--canvas-frame-depth, 20px); overflow: hidden; background-image: none; clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 var(--canvas-frame-depth, 20px)); }

.section-configuratore .frame > .frame-fill { position: absolute; background-image: var(--canvas-frame-bg); background-size: var(--canvas-frame-depth, 20px); background-repeat: repeat; pointer-events: none; }
.section-configuratore .frame.top > .frame-fill { inset: 0; transform: rotate(90deg); transform-origin: center; aspect-ratio: 1; top: -1px; }
.section-configuratore .frame.bottom > .frame-fill { inset: 0; transform: rotate(-90deg); transform-origin: top left; pointer-events: none; aspect-ratio: 1; top: calc( 100% + 1px ); }
.section-configuratore .frame.left > .frame-fill { inset: 0; }
.section-configuratore .frame.right > .frame-fill { inset: 0; transform: rotate(180deg); }

.section-configuratore .frame.left.has-bottom-frame { clip-path: polygon(0 0, 100% var(--canvas-frame-depth, 20px), 100% calc(100% - var(--canvas-frame-depth, 20px)), 0 100%); }
.section-configuratore .frame.right.has-bottom-frame { clip-path: polygon(100% 0, 100% 100%, 0 calc(100% - var(--canvas-frame-depth, 20px)), 0 var(--canvas-frame-depth, 20px)); }

.section-configuratore .frame.left.has-top-frame { clip-path:unset; }
.section-configuratore .frame.right.has-top-frame { clip-path: unset; }
.section-configuratore .frame.left.has-multiple-slabs { clip-path:unset; }
.section-configuratore .frame.right.has-multiple-slabs { clip-path: unset; }
.section-configuratore .frame.left.has-multiple-slabs.has-top-frame { top: calc(var(--canvas-frame-depth, 20px) * -1); bottom: calc(var(--canvas-frame-depth, 20px) * -1); clip-path: polygon(0 0, 100% var(--canvas-frame-depth, 20px), 100% calc(100% - var(--canvas-frame-depth, 20px)), 0 100%); }
.section-configuratore .frame.right.has-multiple-slabs.has-top-frame { top: calc(var(--canvas-frame-depth, 20px) * -1); bottom: calc(var(--canvas-frame-depth, 20px) * -1); clip-path: polygon(100% 0, 100% 100%, 0 calc(100% - var(--canvas-frame-depth, 20px)), 0 var(--canvas-frame-depth, 20px)); }


/* Basamento/Architrave */
.section-configuratore .base { position: absolute; pointer-events: none; z-index: 20; background-image: var(--canvas-base-bg); background-size: auto; background-repeat: repeat; border: 1px solid black; bottom: calc(var(--canvas-base-depth, 20px) * -1); left: 0; right: 0; height: var(--canvas-base-depth, 20px); overflow: hidden; }

/* Basamento/Architrave */
.section-configuratore .top { position: absolute; pointer-events: none; z-index: 20; background-image: var(--canvas-base-bg); background-size: auto; background-repeat: repeat; border: 1px solid black; top: calc(var(--canvas-base-depth, 20px) * -1); left: 0; right: 0; height: var(--canvas-base-depth, 20px); overflow: hidden; }
.section-configuratore .top.has-top-frame { background-image: none; clip-path: polygon(0 0, 100% 0, calc(100% - var(--canvas-base-depth, 20px)) 100%, var(--canvas-base-depth, 20px) 100%); }
.section-configuratore .top > .top-fill { position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 1; background-image: var(--canvas-base-bg); background-size: var(--canvas-base-depth,20px); background-repeat: repeat; transform: rotate(90deg) translateY(-100%); transform-origin: top left; pointer-events: none; }

/* 
------------------------------------------
Responsive 
------------------------------------------
*/

/* Smartphone */
@media only screen and (max-width:767px) and (min-width:320px) {

  .configurator-button {bottom:15px;}
  .configurator-button .icon50 {width:40px;height:40px;}
  .contact-button {bottom:15px;}

  /* Modal configuratore */
  .modal-configuratore { padding-right:0 !important; position:fixed; top:0; right:0; bottom:0; left:0; }
  .modal-configuratore.add { z-index:9999; }
  .modal-configuratore .modal-dialog { background-color:#d8d8d8; width:100%; height:100%; display:flex; align-items: stretch; margin-top:0 !important; margin-bottom:0 !important; margin-left: 0 !important; margin-right: 0 !important; }
  .modal-configuratore .modal-dialog .modal-content { background-color:transparent; width:100%; height:100%; display:flex; flex-wrap: wrap; align-content: flex-start; -webkit-box-shadow:unset; box-shadow:unset; padding-bottom:100px; overflow-y: scroll; }
  .modal-configuratore .modal-dialog .modal-content .modal-header, 
  .modal-configuratore .modal-dialog .modal-content .modal-body { flex: 0 0 100%; }
  .modal-configuratore .modal-dialog .modal-content .mobile-submit, .modal-configuratore .modal-dialog .modal-content .mobile-close { position:fixed; right:0; bottom:0; left:0; }
  .modal-configuratore .panel {background-color:transparent;}
  .modal-configuratore .panel .panel-body {margin-bottom:30px;}

  .section-configuratore ul.menu li { opacity:1; }
  .section-configuratore ul.shapes_desktop_list > li.active,
  .modal-configuratore .modal-content .shape
  { background-color:#fff; }

}

/* Smartphone Landscape 
@media only screen and (min-width:480px) and (max-width:767px){
}
*/

/* Tablet */
@media only screen and (min-width:768px) and (max-width:991px) {
  
  /* Modal configuratore */
  .modal-configuratore { padding-right:0 !important; position:fixed; top:0; right:0; bottom:0; left:0; }
  .modal-configuratore.add { z-index:9999; }
  .modal-configuratore .modal-dialog { background-color:#d8d8d8; width:100%; height:100%; display:flex; align-items: stretch; margin-top:0 !important; margin-bottom:0 !important; margin-left: 0 !important; margin-right: 0 !important; }
  .modal-configuratore .modal-dialog .modal-content { background-color:transparent; width:100%; height:100%; display:flex; flex-wrap: wrap; align-content: flex-start; -webkit-box-shadow:unset; box-shadow:unset; padding-bottom:100px; overflow-y: scroll; }
  .modal-configuratore .modal-dialog .modal-content .modal-header, 
  .modal-configuratore .modal-dialog .modal-content .modal-body { flex: 0 0 100%; }
  .modal-configuratore .modal-dialog .modal-content .mobile-submit, .modal-configuratore .modal-dialog .modal-content .mobile-close { position:fixed; right:45px; bottom:30px; left:30px; }

  .section-configuratore ul.menu li { opacity:1; }
  .section-configuratore ul.shapes_desktop_list > li.active,
  .modal-configuratore .modal-content .shape
  { background-color:#fff; }
    
}

/* Tablet Landscape */
@media only screen and (min-width:992px) and (max-width:1199px) {
    
}

/* Laptop 13' - 1366x768 Non-Retina */
@media only screen and (min-width:1200px) and (max-width:1366px) {

}

/* Laptop 4:3 - 1440x1080 */
@media only screen and (min-width:1367px) and (max-width:1440px) {

}