/*
Theme Name: Constructor Theme
Theme URI: http://conf.vipelectro.pro/
Author: Vavilen
Author URI: https://vavilenweb.ru/
Description: WordPress theme for a frontend constructor interface with Collections and Brands.
Version: 1.0.32
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.1
Text Domain: constructor-theme
*/

:root {
    --bs-primary: #28304c;
    --bs-secondary: #8aa2b4;
    --bs-body-color: #1f2430;
    --bs-body-bg: #f8f9fa;
    --bs-border-color: #dee2e6;
    --ct-surface: #ffffff;
    --ct-muted: #6c757d;
    --ct-accent-soft: #eef3f7;
    --ct-font-family: 'CT Brand', 'Trebuchet MS', Arial, sans-serif;
    --bs-body-font-family: var(--ct-font-family);
}


html,
body {
    min-height: 100%;
}

body {
    font-family: var(--ct-font-family);
    color: var(--bs-body-color);
    background: var(--bs-body-bg);
}

.btn-primary {
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--bs-secondary);
    --bs-btn-hover-border-color: var(--bs-secondary);
    --bs-btn-focus-shadow-rgb: none;
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: var(--bs-secondary);
    --bs-btn-active-border-color: var(--bs-secondary);
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: var(--bs-white);
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

.app-shell {
    background: var(--bs-gray-100);
}

.app-header,
.app-footer {
    flex: 0 0 auto;
}

.app-main {
    min-height: 0;
    flex: 1 1 auto;
}

.app-sidebar {
    min-height: 0;
    overflow-y: auto;
}

.app-top-select {
    width: 180px;
}

.app-preview-col {
    min-height: 0;
}

.app-preview-wrap {
    min-height: 100%;
    padding: 1.5rem;
}

.constructor-stage {
    max-width: 1180px;
}

 .preview-frame {
    --sections-count: 1;
    background-color: transparent;
    border: 1px solid var(--bs-border-color);
    border-radius: 5px;
    box-shadow: var(--bs-box-shadow-sm);
    overflow: hidden;
    padding: 0;
}

.preview-frame.has-frame-material {
    border-color: rgba(0, 0, 0, .12);
}

.preview-sections {
    display: grid;
    grid-template-columns: repeat(var(--sections-count), 170px);
    grid-auto-rows: 170px;
    justify-content: center;
    align-items: stretch;
    min-height: auto;
}

.preview-section {
    position: relative;
    min-width: 0;
    width: 170px;
    height: 170px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-color: #fff;
}

.preview-section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--frame-bg, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: none;
}

.preview-frame[data-orientation="vertical"] .preview-section::before {
    transform: rotate(90deg) scale(1.42);
}

.preview-visual {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.preview-visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.preview-visual span {
    color: var(--ct-muted);
    font-size: .875rem;
    text-align: center;
}

.preview-mechanism {
    position: relative;
    width: 100%;
    height: 100%;
    isolation: isolate;
}

.preview-mechanism-image,
.preview-mechanism-raw,
.preview-mechanism-texture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.preview-mechanism-image {
    z-index: 1;
    object-fit: contain;
    pointer-events: none;
}

.preview-mechanism-raw {
    z-index: 2;
    object-fit: contain;
    pointer-events: none;
}

.preview-mechanism-texture {
    z-index: 3;
    background-image: var(--mechanism-texture);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    mix-blend-mode: multiply;
    mask-image: var(--mechanism-mask);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-image: var(--mechanism-mask);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    pointer-events: none;
}

.preview-configs {
    --sections-count: 1;
    display: grid;
    grid-template-columns: repeat(var(--sections-count), minmax(120px, 170px));
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}

.section-config-card {
    background: #fff;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-xl);
    padding: .75rem;
}

.sidebar-card {
    background: #fff;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-xl);
    padding: 1rem;
}

.sidebar-card + .sidebar-card {
    margin-top: 1rem;
}

.qty-group {
    width: 150px;
}

.constructor-empty {
    width: 100%;
    border: 2px dashed rgba(40, 48, 76, 0.15);
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
    color: var(--ct-muted);
    background: rgba(255, 255, 255, .88);
}

@media (max-width: 991.98px) {
    .app-main {
        min-height: auto;
    }

    .app-preview-wrap {
        align-items: flex-start !important;
    }
}

@media (max-width: 767.98px) {
    .app-top-select {
        width: 150px;
    }

    .preview-frame {
        padding: 1rem;
    }

    .preview-sections {
        grid-template-columns: repeat(var(--sections-count), 90px);
        grid-auto-rows: 90px;
    }

    .preview-section {
        width: 90px;
        height: 90px;
    }

    .preview-configs {
        grid-template-columns: minmax(180px, 240px);
    }
}

 .preview-frame[data-orientation="vertical"] .preview-sections {
    grid-template-columns: 170px;
    grid-auto-rows: 170px;
    min-height: auto;
}

.preview-configs[data-orientation="vertical"] {
    grid-template-columns: minmax(180px, 240px);
}

@media (max-width: 767.98px) {
    .preview-frame[data-orientation="vertical"] .preview-sections {
        grid-template-columns: 90px;
        grid-auto-rows: 90px;
    }
}

/* === Constructor orientation layout === */
.constructor-stage[data-orientation="vertical"] {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(220px, 280px);
    gap: 1rem;
    align-items: start;
}

.constructor-stage[data-orientation="vertical"] .preview-configs {
    margin-top: 0;
    grid-template-columns: minmax(220px, 280px);
    gap: 0;
}

.constructor-stage[data-orientation="vertical"] .section-config-card {
    min-height: 170px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (max-width: 767.98px) {
    .constructor-stage[data-orientation="vertical"] {
        grid-template-columns: minmax(0, auto) minmax(160px, 1fr);
        gap: .75rem;
    }

    .constructor-stage[data-orientation="vertical"] .section-config-card {
        min-height: 90px;
        padding: .5rem;
    }

    .constructor-stage[data-orientation="vertical"] .preview-configs {
        grid-template-columns: minmax(160px, 1fr);
    }
}

.constructor-cart-room > .d-flex {
    padding: .5rem .75rem;
    border-radius: .75rem;
    background: rgba(0, 0, 0, .04);
}

.app-tariff-input,
.app-quantity-input {
    width: 110px;
}

.preview-mechanism-ring {
    position: absolute;
    inset: 0;
    z-index: 4;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.constructor-cart-line {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.constructor-cart-line-body {
    flex: 1 1 auto;
    min-width: 0;
}

.constructor-cart-line-actions {
    min-width: 150px;
}

.constructor-cart-quantity input {
    width: 86px;
    margin-top: .125rem;
}

.constructor-cart-quantity-readonly {
    min-width: 64px;
    text-align: center;
}

.constructor-cart-thumb {
    --cart-sections-count: 1;
    flex: 0 0 auto;
    display: grid;
    width: min(150px, 34vw);
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: .75rem;
    overflow: hidden;
    background: #fff;
}

.constructor-cart-thumb[data-orientation="horizontal"] {
    grid-template-columns: repeat(var(--cart-sections-count), 1fr);
    aspect-ratio: var(--cart-sections-count) / 1;
}

.constructor-cart-thumb[data-orientation="vertical"] {
    grid-template-rows: repeat(var(--cart-sections-count), 1fr);
    width: 84px;
    aspect-ratio: 1 / var(--cart-sections-count);
}

.constructor-cart-thumb-section {
    position: relative;
    display: block;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.constructor-cart-thumb-section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--cart-frame-bg, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.constructor-cart-thumb[data-orientation="vertical"] .constructor-cart-thumb-section::before {
    transform: rotate(90deg) scale(1.42);
}

.constructor-cart-thumb .preview-mechanism {
    position: absolute;
    inset: .25rem;
    width: auto;
    height: auto;
    z-index: 1;
}

@media (max-width: 575.98px) {
    .constructor-cart-line {
        flex-direction: column;
    }

    .constructor-cart-line-actions {
        width: 100%;
        justify-content: flex-start !important;
    }

    .constructor-cart-thumb[data-orientation="horizontal"] {
        width: 100%;
        max-width: 220px;
    }
}


.app-footer {
    position: sticky;
    bottom: 0;
    z-index: 1030;
    box-shadow: 0 -10px 24px rgba(0, 0, 0, .08);
}

/* === Footer actions === */
.constructor-footer-actions {
    flex-wrap: nowrap;
    overflow-x: auto;
    max-width: 100%;
    padding-bottom: .125rem;
}

.constructor-tariff-control {
    width: 160px;
    flex: 0 0 160px;
}

.constructor-rate-control {
    width: 190px;
    flex: 0 0 190px;
}

.constructor-quantity-control {
    width: 125px;
    flex: 0 0 125px;
}

.constructor-quantity-control .form-control {
    min-width: 0;
    text-align: center;
}

@media (max-width: 767.98px) {
    .constructor-footer-actions {
        justify-content: flex-start;
    }
}

/* === Login screen === */
.constructor-login-card .login-username,
.constructor-login-card .login-password,
.constructor-login-card .login-remember {
    margin-bottom: 1rem;
}

.constructor-login-card label {
    display: block;
    margin-bottom: .5rem;
}

.constructor-login-card .input {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    background-clip: padding-box;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

.constructor-login-card .button-primary {
    display: inline-block;
    width: 100%;
    padding: .5rem 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-white);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    background-color: var(--bs-primary);
    border: var(--bs-border-width) solid var(--bs-primary);
    border-radius: var(--bs-border-radius);
}

.constructor-login-card .button-primary:hover,
.constructor-login-card .button-primary:focus {
    color: var(--bs-white);
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
}

.constructor-login-card .login-submit {
    margin-bottom: 0;
}