/* https://www.straub.cz/wp-content/themes/straub/css/konfigurator.css */
:root {
    --configurator-primary: #09428f;
    --configurator-primary-light: #4771ab;
    --configurator-secondary: #7e7e7e;
    --configurator-light: #eaeaea;
    --configurator-lighter: #faf8f5;
}
.configurator p { margin-bottom: 1rem; }
.configurator img { display: block; max-width: 100%; height: auto; }
.configurator .configurator-title { display: flex; align-items: center; padding-top: 0; padding-bottom: 20px; text-align: left; font-size: 18px; font-weight: 600; color: var(--configurator-primary); }
.configurator-title > img { margin-right: 1rem; }
.configurator h4 { margin-bottom: 1rem; font-size: 17px; font-weight: 600; }
.configurator span.wpcf7-not-valid-tip { display: none; }
.configurator .wpcf7-form-control.wpcf7-not-valid { border-color: #ff4e4e; }

.d-none { display: none; }
.d-flex { display: flex; }
.p-2 { padding: 2rem!important; }
.py-1 { padding-top: 1rem!important; padding-bottom: 1rem!important; }
.mb-2 { margin-bottom: 2rem!important; }
.bg-lighter { background-color: var(--configurator-lighter)!important; }

.configurator-nav { border: 1px solid var(--configurator-light); }
.configurator-nav + .configurator-nav { margin-top: -1px; }
.configurator-nav_item { border-left: 4px solid var(--configurator-primary-light); }
.configurator-nav_list { flex-grow: 1; margin: 0; padding: 0; list-style: none; }
.configurator-nav_list a { position: relative; display: flex; align-items: baseline; padding: 1rem 1rem 1rem 2rem; color: #000; }
.configurator-nav_list a:before { content: ''; width: 15px; height: 15px; flex: 0 0 15px; margin-right: 1rem; border: 1px solid #000; background-repeat: no-repeat; background-position: center; background-size: contain; }
.configurator-nav_list a.active:before { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%2309428f' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); }
.configurator-nav_list.radio a:before { border-radius: 50%; }
.configurator-nav_list.radio a.active:before { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -5 10 10'%3e%3ccircle r='3' fill='%2309428f'/%3e%3c/svg%3e"); }
.configurator-nav_list a small { display: block; font-size: 12px; opacity: .75; }
.configurator-nav_thumb { position: relative; width: 40%; flex: 0 0 40%; border-left: 1px solid var(--configurator-light); overflow: hidden; }
/*.configurator-nav_thumb:before { content: ''; position: relative; display: block; padding-top: 100%; }*/
.configurator-nav_thumb img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 1rem; object-fit: cover; }

.configurator-nav .btn-default { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 1rem 1rem 1rem 2rem; border: none; border-radius: 0; text-align: left; font-weight: 700; color: #000; outline: none!important; box-shadow: none; }
.configurator-nav .btn-default:not(:hover) { background-color: var(--configurator-lighter); }
.configurator-nav .btn-default > .color-thumb { position: relative; display: flex; justify-content: flex-end; align-items: center; width: 62px; height: 30px; border: 2px solid transparent; overflow: hidden; }
.configurator-nav .btn-default > .color-thumb > img { position: absolute; top: 0; left: 0; width: auto; max-width: none; }
.configurator-nav .btn-default.active > .color-thumb { border-color: var(--configurator-primary); }
.configurator-nav .btn-default.active > .color-thumb:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid #fff; }
.configurator-nav_dropdown .dropdown-toggle > .color-thumb { width: 60px; height: 28px; border-width: 1px; border-color: #000; }
.configurator-nav_dropdown .dropdown-toggle > .color-thumb:before { content: ''; display: block; width: 0; height: 0; margin-right: 5px; border-style: solid; border-width: 8px 8px 0 8px; border-color: #000000 transparent transparent transparent; }
.configurator-nav_dropdown .dropdown-toggle.active > .color-thumb { border-width: 2px; }
.configurator-nav_dropdown .dropdown-menu { margin: 0; padding: 1rem; min-width: auto; border: none; border-radius: 0; }

.palette { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; max-height: 296px; overflow-y: auto; }
.palette .color { position: relative; width: 26px; height: 26px; cursor: pointer; }
.palette .color:before { content: ''; position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; background: #fff; border-radius: 50%; transform: translate(-50%, -50%); opacity: 0; transition: all 0.15s ease-in-out 0s; }
.palette .color.is-light:before { background: var(--configurator-secondary); }
.palette .color:hover:before, .palette .color.active:before { opacity: 1; }

.configurator-image, .configurator-image_layers { position: relative; }
.configurator-image_layers .base-layer { width: 100%; }
.configurator-image_layers .top-layer, .configurator-image_layers .svg-layer { position: absolute; width: 100%; top: 0; left: 0; }
.configurator-image_layers .svg-layer { z-index: 1; height: auto; mix-blend-mode: multiply; transition: fill 0.15s ease-in-out 0s; }
.configurator-image_layers .svg-layer.loggia-floor { mix-blend-mode: soft-light; }
.configurator-image_layers .top-layer { z-index: 2; }

.configurator-image_buttons { position: absolute; z-index: 3; bottom: 2rem; right: 2rem; }
.configurator-image_buttons .btn { display: flex; justify-content: center; align-items: center; width: 54px; height: 54px; padding: 0; line-height: 54px; border: none; border-radius: 100%; outline: none!important; box-shadow: 2px 4px 5px rgb(0 0 0 / 32%); }

@page { size: A4 landscape; margin-top: .5cm; margin-right: .5cm; margin-bottom: .5cm; margin-left: .5cm; }
body#configurator_print { margin: 0; padding: 0; }
body#configurator_print .configurator-image { break-inside: avoid; }
body#configurator_print .configurator-image_buttons { display: none; }
body#configurator_print .configurator-form-desc { position: absolute; z-index: 5; top: 16px; right: 16px; padding: 16px; line-height: 1.25; font-size: 14px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: rgb(255 255 255 / 90%); box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 10%) }
body#configurator_print .configurator-form-desc ul { margin: 0; padding: 0; list-style: none; white-space: nowrap; }
body#configurator_print .configurator-form-desc small { display: block; margin-top: 8px; font-size: 12px; opacity: .75; }
body#configurator_print .configurator-form-desc a { color: var(--configurator-primary); }