/* Lightweight mobile layer loaded outside Vite so the live configurator is not rebuilt. */
html,
body,
#app {
    min-height: 100%;
}

body {
    overscroll-behavior: contain;
}

img,
canvas,
video {
    max-width: 100%;
}

button,
input,
select,
textarea {
    font-size: 16px;
}

@supports (height: 100svh) {
    main.h-screen {
        height: 100svh;
    }
}

@media (max-width: 768px) {
    html,
    body,
    #app {
        width: 100%;
        overflow-x: hidden;
    }

    #app canvas {
        max-width: 100vw;
        touch-action: none;
    }

    #app button,
    #app a,
    #app input,
    #app select {
        min-height: 44px;
    }

    #app [class*="sidebar"],
    #app [class*="Sidebar"],
    #app [class*="panel"],
    #app [class*="Panel"],
    #app [class*="modal"],
    #app [class*="Modal"],
    #app [class*="drawer"],
    #app [class*="Drawer"] {
        max-width: calc(100vw - 16px);
    }

    #app [class*="toolbar"],
    #app [class*="Toolbar"] {
        max-width: 100vw;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* VENOK_3D_MOBILE_STAGE2_START */
@media (max-width: 768px) {
    html,
    body,
    #app {
        width: 100%;
        min-width: 0;
        min-height: 100svh;
        overflow-x: hidden;
    }

    main.h-screen {
        height: 100svh !important;
        min-height: 100svh !important;
        overflow: hidden;
    }

    #app canvas,
    #app canvas + * {
        max-width: 100vw !important;
    }

    #app .left-sidebar,
    #app .engraving-menu.left-sidebar {
        width: 64px !important;
        min-width: 64px !important;
        max-width: 64px !important;
    }

    #app .left-sidebar .menu-items,
    #app .engraving-menu .menu-items {
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    #app .menu-item,
    #app .button-wrapper-img,
    #app .wrapper-img {
        min-width: 44px;
        min-height: 44px;
    }

    #app .button-hover {
        max-width: calc(100vw - 76px);
        white-space: normal;
    }

    #app .complectation,
    #app .complectation-element-manage {
        width: min(92vw, 390px) !important;
        max-width: min(92vw, 390px) !important;
        max-height: 100svh !important;
    }

    #app .client-content,
    #app .body,
    #app .complectation__content {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
    }

    #app .title,
    #app .complectation__header {
        position: sticky;
        top: 0;
        z-index: 4;
    }

    #app .choose-element-list,
    #app .element-item-list,
    #app .pages-list,
    #app .engraving-group-types {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px !important;
        align-items: stretch;
    }

    #app .choose-element-item,
    #app .element-item,
    #app .page-item,
    #app .engraving-group-type {
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    #app .choose-element-item img,
    #app .element-item img,
    #app .page-item img {
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }

    #app input,
    #app select,
    #app textarea {
        min-height: 44px;
        font-size: 16px;
    }

    #app .total {
        position: sticky;
        bottom: 0;
        z-index: 3;
    }
}

@media (max-width: 420px) {
    #app .complectation,
    #app .complectation-element-manage {
        width: calc(100vw - 12px) !important;
        max-width: calc(100vw - 12px) !important;
    }

    #app .choose-element-list,
    #app .element-item-list,
    #app .pages-list,
    #app .engraving-group-types {
        grid-template-columns: 1fr;
    }
}
/* VENOK_3D_MOBILE_STAGE2_END */

/* VENOK_3D_THEME_STAGE3_START */
:root {
    --venok-bg: #050505;
    --venok-panel: #171717;
    --venok-panel-soft: #1f1f1f;
    --venok-border: rgba(232, 205, 154, .24);
    --venok-gold: #efd9aa;
    --venok-gold-muted: #bfa982;
    --venok-red: #c91f3d;
}

html,
body,
body.bg-white,
#app {
    background: var(--venok-bg) !important;
    color: var(--venok-gold);
}

#app,
#app .client-content {
    max-width: 100vw;
    overflow-x: hidden;
}

#app .client-content {
    background: var(--venok-bg) !important;
}

#app .header-top {
    background: rgba(5, 5, 5, .98) !important;
    color: var(--venok-gold) !important;
    border-bottom: 1px solid var(--venok-border);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .24);
}

#app .toggle-button-steps,
#app .steps,
#app .phone-cart,
#app .top__icons {
    background: transparent !important;
}

#app .btn-toggle-elements-panel,
#app .btn-toggle-setting-panel,
#app .top__icons-button {
    background: var(--venok-panel) !important;
    border-right: 1px solid var(--venok-border);
    border-left: 1px solid rgba(232, 205, 154, .08);
    color: var(--venok-gold) !important;
}

#app .btn-toggle-elements-panel img,
#app .btn-toggle-setting-panel img,
#app .top__icons-button img,
#app .left-sidebar img {
    filter: sepia(1) saturate(.85) hue-rotate(346deg) brightness(1.35);
    opacity: .92;
}

#app .item-steps {
    background: var(--venok-panel) !important;
    color: var(--venok-gold) !important;
    border-right: 1px solid var(--venok-border);
}

#app .item-steps.active {
    background: var(--venok-red) !important;
    color: #fff !important;
}

#app .item-steps .txt {
    color: inherit !important;
    font-weight: 600;
}

#app .top__icons-hint,
#app .button-hover button {
    background: var(--venok-panel-soft) !important;
    color: var(--venok-gold) !important;
    border: 1px solid var(--venok-border);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .36) !important;
}

#app .btn-toggle-setting-panel.open + .top__icons,
#app .top__icons:has(.top__icons-button) {
    background: #0c0c0c !important;
}

#app .btn-toggle-setting-panel.open + .top__icons .top__icons-button,
#app .top__icons .top__icons-button {
    background: #111 !important;
    border-color: rgba(232, 205, 154, .28) !important;
}

#app .btn-toggle-setting-panel.open + .top__icons .top__icons-button img,
#app .top__icons .top__icons-button img {
    filter: brightness(0) saturate(100%) invert(89%) sepia(25%) saturate(508%) hue-rotate(356deg) brightness(104%) contrast(96%) !important;
    opacity: 1 !important;
}

#app .top__icons .top__icons-item.active .top__icons-button,
#app .top__icons .top__icons-button.active {
    background: var(--venok-red) !important;
    border-color: var(--venok-red) !important;
}

#app .client-cart-total {
    background: #132331 !important;
    color: var(--venok-gold) !important;
    border-left: 1px solid var(--venok-border);
}

#app .client-cart-total__button {
    background: var(--venok-red) !important;
}

#app .client-cart-total__value {
    color: var(--venok-gold) !important;
}

#app .sidebar-content {
    background: var(--venok-bg) !important;
    max-width: 100vw;
    overflow: hidden;
}

#app .left-sidebar,
#app .engraving-menu.left-sidebar {
    background: #0d0d0d !important;
    border-right: 1px solid var(--venok-border);
}

#app .left-sidebar .menu-item .wrapper-img,
#app .engraving-menu .menu-item .wrapper-img {
    background: #111 !important;
    border-top-color: rgba(232, 205, 154, .16) !important;
}

#app .left-sidebar .menu-item:hover .wrapper-img,
#app .left-sidebar .menu-item:focus-within .wrapper-img {
    background: #1b1b1b !important;
}

#canvas,
#app canvas {
    background: var(--venok-bg) !important;
}

#app .complectation,
#app .complectation-element-manage,
#app .engraving-elements {
    background: var(--venok-panel) !important;
    color: var(--venok-gold) !important;
    border: 1px solid var(--venok-border);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .45) !important;
}

#app .complectation .client-content,
#app .complectation__content,
#app .complectation-element-manage .manage-step,
#app .engraving-elements {
    background: var(--venok-panel) !important;
    color: var(--venok-gold) !important;
}

#app .title,
#app .complectation__header,
#app .manage-step-title,
#app .show-page-title,
#app .element-group,
#app .text-xl,
#app .text-lg {
    color: var(--venok-gold) !important;
}

#app .choose-element-type,
#app .manage-step + .manage-step,
#app .element-item + .element-item,
#app .border-blue-top,
#app .next-step {
    border-color: rgba(232, 205, 154, .18) !important;
}

#app .choose-element-type-list-elements,
#app .choose-element-list,
#app .element-item-list,
#app .pages-list {
    background: #0e0e0e !important;
}

#app .choose-element-type-list-element,
#app .choose-element-item,
#app .element-item,
#app .page-item,
#app .image-wrapper,
#app .image-preview {
    background: #111 !important;
    border-color: rgba(232, 205, 154, .22) !important;
    color: var(--venok-gold) !important;
    border-radius: 8px;
}

#app .choose-element-type-list-element.selected,
#app .choose-element-item.selected,
#app .item-steps.active,
#app .landscaping__types-radio:checked + .landscaping__types-label .landscaping__types-icon {
    border-color: var(--venok-red) !important;
}

#app input,
#app select,
#app textarea {
    background: #080808 !important;
    border: 1px solid rgba(232, 205, 154, .28) !important;
    color: var(--venok-gold) !important;
    border-radius: 8px !important;
}

#app input::placeholder,
#app textarea::placeholder {
    color: rgba(239, 217, 170, .52) !important;
}

#app .next-step-button,
#app .engraving-button,
#app .btn_client-green,
#app .btn-green {
    background: var(--venok-red) !important;
    border-color: var(--venok-red) !important;
    color: #fff !important;
    border-radius: 8px;
}

#app .btn_client-red,
#app .btn-red {
    border-radius: 8px;
}

#app .text-gray-600,
#app .text-gray-500,
#app .text-gray-400 {
    color: var(--venok-gold-muted) !important;
}

@media (max-width: 768px) {
    html,
    body,
    body.bg-white,
    #app,
    #app .client-content {
        width: 100vw !important;
        max-width: 100vw !important;
        min-height: 100svh;
        background: var(--venok-bg) !important;
        overflow-x: hidden !important;
    }

    #app .header-top {
        width: 100vw !important;
        max-width: 100vw !important;
        overflow: hidden;
    }

    #app .sidebar-content {
        grid-template-columns: 64px minmax(0, 1fr) !important;
        width: 100vw !important;
        max-width: 100vw !important;
    }

    #canvas {
        width: 100% !important;
        min-width: 0 !important;
        max-width: calc(100vw - 64px) !important;
        overflow: hidden !important;
    }

    #app canvas {
        width: 100% !important;
        max-width: 100% !important;
    }

    #app .btn-toggle-elements-panel,
    #app .btn-toggle-setting-panel {
        flex: 0 0 64px;
        min-width: 64px;
        max-width: 64px;
    }

    #app .item-steps {
        min-width: 82px;
    }

    #app .item-steps .txt {
        font-size: 12px;
        line-height: 1.15;
    }

    #app .phone-cart {
        flex: 0 0 auto;
    }

    #app .client-cart-total__value {
        font-size: 22px;
        white-space: nowrap;
    }

    #app .complectation,
    #app .complectation-element-manage {
        border-radius: 0 12px 12px 0;
    }
}

@media (max-width: 420px) {
    #app .item-steps:not(.active) .txt {
        display: none;
    }

    #app .item-steps {
        min-width: 64px;
    }
}
/* VENOK_3D_THEME_STAGE3_END */