/**
 * Build Your Own Box Configurator Styles
 *
 * @author Mantle Development
 */

// Variables
@byob-primary-color: #5a285a;
@byob-secondary-color: #333;
@byob-border-color: #e0e0e0;
@byob-error-color: #f44336;
@byob-background-light: #f9f9f9;
@byob-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
@byob-transition: all 0.3s ease;

& when (@media-common = true) {
    // Main Container
    .buildyourownbox-configurator {
        .configurator-header {
            text-align: center;
            margin-bottom: 25px;

            .page-title {
                font-size: 24px;
                font-weight: 700;
                margin-bottom: 10px;
                color: @byob-secondary-color;
            }

            .configurator-description {
                font-size: 16px;
                color: #666;
            }
        }

        .configurator-content {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        .configurator-main {
            flex: 1;
            min-width: 0;
        }

        .byob-bottom-description {
            margin-top: 40px;
        }

        .configurator-sidebar {
            width: 100%;
            display: flex;
            flex-direction: column;
        }
    }

    // Section Title
    .section-title {
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 20px;
        color: @byob-secondary-color;
        display: flex;
        align-items: center;
        gap: 10px;

        .items-counter {
            font-size: 14px;
            font-weight: 400;
            color: #666;
        }
    }

    .section-description {
        margin-bottom: 20px;
    }

    // Box Selector
    .box-selector-container {
        margin-bottom: 40px;
    }

    .box-selector {
        display: flex;
        gap: 10px;
    }

    .box-card {
        flex: 1;
        background: #fff;
        border: 2px solid @byob-border-color;
        border-radius: 12px;
        padding: 15px;
        cursor: pointer;
        transition: @byob-transition;
        position: relative;
        overflow: hidden;

        .box-image {
            width: 100%;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 15px;

            img {
                max-width: 100%;
                max-height: 100%;
                object-fit: contain;
            }
        }

        .box-info {
            text-align: center;

            .box-name {
                font-size: 16px;
                font-weight: 600;
                margin-bottom: 8px;
                color: @byob-secondary-color;
            }

            .box-details {
                display: flex;
                flex-direction: column;
                justify-content: center;
                gap: 0;
                font-size: 14px;

                .box-size {
                    color: #666;
                }

                .box-price {
                    font-weight: 600;
                    color: @byob-primary-color;
                }
            }
        }

        &:hover {
            border-color: @byob-primary-color;
        }

        &.selected {
            background: @byob-primary-color;
            border-color: @byob-primary-color;

            .box-selected-indicator {
                opacity: 1;
            }

            .box-info {
                text-align: center;

                .box-name, .box-size, .box-price {
                    color: #fff;
                }
            }
        }

        .box-selected-indicator {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 24px;
            height: 24px;
            background: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: @byob-transition;

            .checkmark {
                &:after {
                    content: '';
                    display: block;
                    width: 6px;
                    height: 10px;
                    border: solid @byob-primary-color;
                    border-width: 0 2px 2px 0;
                    transform: rotate(45deg) translate(-1px, -1px);
                }
            }
        }
    }

    // Item Selector
    .item-selector-container {
        margin-bottom: 40px;
    }

    .items-loading {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
        padding: 60px 20px;
        color: #666;

        .loading-spinner {
            width: 30px;
            height: 30px;
            border: 3px solid @byob-border-color;
            border-top-color: @byob-primary-color;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
    }

    @keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }

    .items-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .item-card {
        background: #fff;
        border: 1px solid @byob-border-color;
        border-radius: 10px;
        transition: @byob-transition;

        .item-card-content {
            padding: 12px;
        }

        &:hover {
            border-color: @byob-primary-color;
        }

        &.has-qty {
            border-color: @byob-primary-color;
            background: fade(@byob-primary-color, 5%);
        }

        &.unavailable {
            opacity: 0.6;

            .item-image {
                position: relative;
            }

            .unavailable-overlay {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(0, 0, 0, 0.5);
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 8px;

                span {
                    color: #fff;
                    font-size: 12px;
                    font-weight: 600;
                    text-transform: uppercase;
                }
            }
        }

        .item-image {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 10px;
            position: relative;

            img {
                max-width: 100%;
                max-height: 100%;
                object-fit: contain;
                border-radius: 8px 8px 0 0;
            }
        }

        .item-info {
            text-align: center;
            margin-bottom: 10px;

            .item-name {
                font-size: 13px;
                font-weight: 500;
                color: @byob-secondary-color;
                line-height: 1.3;
                margin: 0;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }
        }

        .item-qty-controls {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;

            &.item-qty-out-of-stock {
                height: 28px;
            }

            .qty-btn {
                width: 28px;
                height: 28px;
                border: 1px solid @byob-border-color;
                border-radius: 50%;
                background: #fff;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: @byob-transition;

                span {
                    font-size: 18px;
                    font-weight: 600;
                    color: @byob-secondary-color;
                    line-height: 1;
                }

                &:hover:not(:disabled) {
                    background: @byob-primary-color;
                    border-color: @byob-primary-color;

                    span {
                        color: #fff;
                    }
                }

                &:disabled {
                    opacity: 0.4;
                    cursor: not-allowed;
                }
            }

            .qty-value {
                font-size: 16px;
                font-weight: 600;
                min-width: 24px;
                text-align: center;
                color: @byob-secondary-color;
            }
        }
    }

    // Select Box Prompt
    .select-box-prompt {
        padding: 60px 20px;
        text-align: center;
        background: @byob-background-light;
        border-radius: 12px;

        p {
            color: #666;
            font-size: 16px;
            margin: 0;
        }
    }

    .no-items-message {
        padding: 40px 20px;
        text-align: center;
        background: @byob-background-light;
        border-radius: 12px;

        p {
            color: #666;
            margin: 0;
        }
    }

    // Summary Sidebar
    .box-summary {
        background: #fff;
        border: 1px solid @byob-border-color;
        border-radius: 12px;
        padding: 25px;
        box-shadow: @byob-card-shadow;
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        gap: 20px;

        > div, > h3 {
            margin: 0;
        }

        .summary-title {
            font-size: 18px;
            font-weight: 600;
            color: @byob-secondary-color;
            flex-shrink: 0;
        }

        .summary-box-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-radius: 8px;
            flex-shrink: 0;

            .box-name {
                font-weight: 500;
            }

            .box-price {
                font-weight: 600;
                color: @byob-primary-color;
                font-size: 18px;
            }
        }

        .selection-progress {
            flex-shrink: 0;

            .progress-bar {
                height: 8px;
                background: @byob-border-color;
                border-radius: 4px;
                overflow: hidden;
                margin-bottom: 8px;

                .progress-fill {
                    height: 100%;
                    background: linear-gradient(90deg, @byob-primary-color, lighten(@byob-primary-color, 10%));
                    border-radius: 4px;
                    transition: width 0.3s ease;
                }
            }

            .progress-text {
                font-size: 13px;
                color: #666;
                text-align: center;
            }
        }

        .summary-quick-actions {
            display: flex;
            gap: 10px;
            flex-shrink: 0;

            button {
                flex: 1;
                padding: 10px 15px;
                font-weight: 500;
                color: @byob-secondary-color;
            }

            .shuffle-btn {
                &:hover:not(:disabled) {
                    background: @byob-primary-color;
                    border-color: @byob-primary-color;
                    color: #fff;
                }
            }
        }

        .summary-items {
            flex: 1;
            min-height: 0;
            display: flex;
            flex-direction: column;

            .summary-items-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                flex-shrink: 0;
                margin-bottom: 10px;

                h4 {
                    font-size: 14px;
                    font-weight: 600;
                    margin: 0;
                    color: @byob-secondary-color;
                }
            }

            .summary-view-toggle {
                display: flex;
                gap: 4px;

                .toggle-btn {
                    width: 28px;
                    height: 28px;
                    padding: 0;
                    border: 0;
                    border-radius: 4px;
                    background: #fff;
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #999;
                    font-family: sans-serif;
                    font-size: 14px;
                    transition: @byob-transition;

                    &:hover {
                        background: @byob-background-light;
                        color: @byob-primary-color;
                    }

                    &.active {
                        background: @byob-primary-color;
                        color: #fff;
                    }
                }
            }

            .summary-grid {
                display: grid;
                grid-template-columns: repeat(3, minmax(58px, 1fr));
                gap: 6px;
                flex: 1;
                overflow-y: auto;
                align-content: start;
            }

            .summary-section .summary-grid {
                grid-template-columns: repeat(3, minmax(48px, 1fr));
            }

            .summary-grid-item {
                aspect-ratio: 1;
                position: relative;
                border-radius: 6px;
                overflow: clip;
                cursor: pointer;
                border: 1px solid @byob-border-color;
                transition: @byob-transition;
                box-sizing: border-box;

                &:hover {
                    border-color: @byob-primary-color;
                }

                img {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    display: block;
                }

                .remove-icon {
                    position: absolute;
                    top: 0;
                    right: 0;
                    width: 20px;
                    height: 20px;
                    background: rgba(0, 0, 0, 0.5);
                    color: #fff;
                    font-size: 16px;
                    font-family: sans-serif;
                    border-radius: 0 5px 0 4px;
                    display: none;
                    align-items: center;
                    justify-content: center;
                    line-height: 1;
                }

                &:hover .remove-icon {
                    display: flex;
                }
            }

            .summary-grid-placeholder {
                aspect-ratio: 1;
                border-radius: 6px;
                border: 2px dashed @byob-border-color;
                background: @byob-background-light;
                box-sizing: border-box;
            }

            h4 {
                font-size: 14px;
                font-weight: 600;
                margin-top: 0;
                margin-bottom: 10px;
                color: @byob-secondary-color;
                flex-shrink: 0;
            }

            .selected-items-sections {
                flex: 1;
                overflow-y: auto;

                .summary-section {
                    margin-bottom: 15px;

                    &:last-child {
                        margin-bottom: 0;
                    }
                }

                .summary-section-title {
                    font-size: 13px;
                    font-weight: 600;
                    color: @byob-primary-color;
                    margin: 0 0 8px 0;
                    padding-bottom: 5px;
                    border-bottom: 1px solid @byob-border-color;
                }

                .selected-items-list {
                    max-height: none;
                }
            }

            .selected-items-list {
                list-style: none;
                padding: 0;
                margin: 0;
                flex: 1;
                overflow-y: auto;

                .selected-item {
                    display: flex;
                    align-items: center;
                    padding: 8px 0;
                    border-bottom: 1px solid @byob-border-color;

                    &:last-child {
                        border-bottom: none;
                    }

                    .item-qty {
                        font-weight: 600;
                        color: @byob-primary-color;
                        margin-right: 8px;
                        min-width: 30px;
                    }

                    .item-name {
                        flex: 1;
                        font-size: 13px;
                        color: @byob-secondary-color;
                    }

                    .remove-item {
                        width: 24px;
                        height: 24px;
                        border: none;
                        background: transparent;
                        cursor: pointer;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        color: #999;
                        transition: @byob-transition;

                        &:hover {
                            color: @byob-error-color;
                        }

                        span {
                            font-size: 18px;
                            line-height: 1;
                        }
                    }
                }
            }
        }

        .summary-empty {
            padding: 20px;
            text-align: center;
            background: @byob-background-light;
            border-radius: 8px;
            flex-shrink: 0;

            p {
                color: #666;
                font-size: 14px;
                margin: 0;
            }
        }

        .summary-errors {
            flex-shrink: 0;

            .error-message {
                color: @byob-error-color;
                font-size: 13px;
                padding: 10px;
                background: rgba(244, 67, 54, 0.1);
                border-radius: 6px;
                margin: 0;
            }
        }

        .summary-actions {
            flex-shrink: 0;

            .add-to-cart-btn {
                width: 100%;
                padding: 15px;
            }

            .remaining-notice {
                text-align: center;
                font-size: 13px;
                color: #666;
                margin-top: 10px;
                margin-bottom: 0;
            }
        }
    }

    // Mobile bar header (hidden by default, shown in mobile-max block)
    .mobile-bar-header {
        display: none;
    }

    // Mobile drawer content wrapper (invisible on desktop)
    .mobile-drawer-content {
        display: contents;

        > div, > h3 {
            margin: 0;
        }
    }

    // Category Filters (Categories Mode)
    .category-filters {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 1px solid @byob-border-color;

        .filter-btn {
            padding: 8px 16px;
            font-size: 13px;
            font-weight: 500;
            background: #fff;
            border: 1px solid @byob-border-color;
            border-radius: 25px;
            cursor: pointer;
            transition: @byob-transition;
            color: @byob-secondary-color;

            &:hover {
                border-color: @byob-primary-color;
                color: @byob-primary-color;
            }

            &.active {
                background: @byob-primary-color;
                border-color: @byob-primary-color;
                color: #fff;
            }
        }
    }

    // Sections View (Sections Mode)
    .sections-view {
        .section-container {
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 1px solid @byob-border-color;

            &:last-child {
                border-bottom: none;
                margin-bottom: 0;
                padding-bottom: 0;
            }
        }

        .section-header {
            display: flex;
            justify-content: space-between;
            flex-direction: column;
            align-items: flex-start;
            margin-bottom: 20px;
            flex-wrap: wrap;
            gap: 10px;

            .section-name {
                font-size: 16px;
                font-weight: 600;
                color: @byob-secondary-color;
                margin: 0;
            }
        }

        .section-capacity {
            display: flex;
            align-items: center;
            gap: 12px;
            flex: 1;
            width: 100%;

            .capacity-count {
                font-size: 14px;
                font-weight: 500;
                color: #666;
                white-space: nowrap;
            }

            .capacity-bar {
                width: 100px;
                height: 6px;
                background: @byob-border-color;
                border-radius: 3px;
                overflow: hidden;
                flex: 1;
                max-width: 150px;

                .capacity-fill {
                    height: 100%;
                    background: linear-gradient(90deg, @byob-primary-color, lighten(@byob-primary-color, 10%));
                    border-radius: 3px;
                    transition: width 0.3s ease;
                }
            }
        }

    }

    // Item Info Button
    .item-info-btn {
        position: absolute;
        top: 5px;
        right: 5px;
        width: 22px;
        height: 22px;
        padding: 0;
        border: 1px solid @byob-primary-color;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.9);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: @byob-transition;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
        z-index: 1;

        .info-icon {
            font-size: 12px;
            font-weight: 700;
            font-style: italic;
            color: @byob-primary-color;
            line-height: 1;
            font-family: Georgia, 'Times New Roman', serif;
        }

        &:hover {
            background: @byob-primary-color;
            border: 1px solid @byob-primary-color;
            transform: scale(1.1);

            .info-icon {
                color: #fff;
            }
        }
    }

    // Customer Favourites Section
    .customer-favourites-section {
        .section-title {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 20px;
            color: @byob-secondary-color;
        }
    }

    .favourites-carousel {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        &::-webkit-scrollbar { display: none; }

        .favourite-card {
            scroll-snap-align: center;
        }
    }

    .favourites-track {
        display: flex;
        gap: 20px;
    }

    .favourite-card {
        flex: 0 0 280px;
        scroll-snap-align: start;
        background: #fff;
        border: 2px solid @byob-border-color;
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        transition: @byob-transition;

        &:hover {
            border-color: @byob-primary-color;
        }

        .favourite-image {
            width: 100%;
            aspect-ratio: 4/3;
            overflow: hidden;
            background: #f5f5f5;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }

        .favourite-content {
            flex: 1;
            padding: 16px;
            display: flex;
            flex-direction: column;
        }

        .favourite-name {
            font-size: 16px;
            font-weight: 600;
            color: @byob-secondary-color;
            margin: 0 0 8px;
        }

        .favourite-description {
            font-size: 14px;
            color: #666;
            margin: 0 0 12px;
            line-height: 1.4;
        }

        .favourite-includes {
            margin-bottom: auto;

            .includes-label {
                font-size: 13px;
                font-weight: 600;
                color: @byob-secondary-color;
                display: block;
                margin-bottom: 4px;
            }

            ul {
                list-style: none;
                padding: 0;
                margin: 0;

                li {
                    font-size: 13px;
                    color: #666;
                    padding: 2px 0;
                    margin: 0;

                    &:before {
                        content: '\2022';
                        color: @byob-primary-color;
                        margin-right: 6px;
                    }
                }
            }
        }

        .action.primary {
            margin: 16px;
            margin-top: 0;
        }
    }

    .favourites-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 16px;

        .dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border: none;
            background: @byob-border-color;
            padding: 0;
            cursor: pointer;
            transition: @byob-transition;
            position: relative;

            // Larger invisible touch target
            &::before {
                content: '';
                position: absolute;
                top: -8px;
                left: -8px;
                right: -8px;
                bottom: -8px;
            }

            &.active {
                background: @byob-primary-color;
            }
        }
    }

    // Product Info Modal
    .byob-product-info-popup {
        .modal-header {
            padding-bottom: 25px;
        }

        .modal-loading {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 40px 20px;
            gap: 15px;

            .loading-spinner {
                width: 30px;
                height: 30px;
                border: 3px solid @byob-border-color;
                border-top-color: @byob-primary-color;
                border-radius: 50%;
                animation: spin 1s linear infinite;
            }

            span {
                color: #666;
                font-size: 14px;
            }
        }

        .modal-body {
            .modal-hero-image {
                aspect-ratio: 1 / 1;
                overflow: hidden;
                border-radius: 8px;
                margin-bottom: 20px;

                @media (min-width: 440px) {
                    aspect-ratio: 16 / 9;
                }

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    display: block;
                }
            }

            .modal-tabs {
                display: flex;
                gap: 0;
                padding: 0;
                margin-bottom: 24px;
                border-bottom: 2px solid @byob-border-color;

                .modal-tab {
                    position: relative;
                    background: none;
                    border: none;
                    padding: 10px 20px;
                    font-size: 14px;
                    font-weight: 600;
                    font-family: inherit;
                    color: #888;
                    cursor: pointer;
                    transition: color 0.2s ease;
                    white-space: nowrap;

                    &:after {
                        content: '';
                        position: absolute;
                        bottom: -2px;
                        left: 0;
                        right: 0;
                        height: 2px;
                        background: transparent;
                        transition: background 0.2s ease;
                    }

                    &:hover {
                        color: @byob-secondary-color;
                    }

                    &.active {
                        color: @byob-primary-color;
                        background: none;

                        &:after {
                            background: @byob-primary-color;
                        }
                    }
                }
            }

            .info-section {
                display: none;

                &.active {
                    display: block;
                }

                .info-section-trigger {
                    font-size: 15px;
                    font-weight: 600;
                    color: @byob-secondary-color;
                    margin: 0 0 12px 0;
                    display: none; // hidden on desktop, tabs handle nav
                    align-items: center;
                    gap: 8px;
                    background: none;
                    border: none;
                    padding: 0;
                    cursor: pointer;
                    text-align: left;
                    font-family: inherit;
                    line-height: inherit;

                    &:before {
                        content: '';
                        display: block;
                        width: 3px;
                        height: 16px;
                        background: @byob-primary-color;
                        border-radius: 2px;
                    }
                }

                .section-content {
                    font-size: 14px;
                    line-height: 1.6;
                    color: #555;

                    p {
                        margin: 0 0 10px 0;

                        &:last-child {
                            margin-bottom: 0;
                        }
                    }
                }
            }

            // Nutritional table styling
            .nutritics-info-wraper {
                .table-nutritics-info {
                    width: 100%;
                }
            }

            .no-info-message {
                text-align: center;
                padding: 30px 20px;
                background: @byob-background-light;
                border-radius: 8px;

                p {
                    color: #666;
                    margin: 0;
                }
            }
        }
    }
}

// Desktop Enhancements
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .buildyourownbox-configurator {
        padding: 20px;

        .configurator-header {
            margin-bottom: 40px;

            .page-title {
                font-size: 32px;
            }
        }

        .configurator-content {
            flex-direction: row;
            gap: 30px;
        }

        .configurator-sidebar {
            width: ~"min(33%, 400px)";
            flex-shrink: 0;
            position: sticky;
            top: 20px;
            max-height: calc(100vh - 40px);
        }
    }

    .box-selector {
        gap: 20px;
    }

    .box-card {
        padding: 20px;

        .box-image {
            height: 120px;
        }
    }

    .items-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 15px;
    }

    .item-card {
        padding: 15px;

        .item-qty-controls {
            &.item-qty-out-of-stock {
                height: 32px;
            }

            .qty-btn {
                width: 32px;
                height: 32px;
            }
        }
    }

    .category-filters {
        gap: 10px;
        margin-bottom: 25px;
        padding-bottom: 20px;

        .filter-btn {
            padding: 10px 20px;
            font-size: 14px;
        }
    }

    .sections-view {
        .section-container {
            margin-bottom: 40px;
            padding-bottom: 30px;
        }

        .section-header {
            flex-direction: row;
            align-items: center;
            gap: 15px;

            .section-name {
                font-size: 18px;
            }
        }

        .section-capacity {
            width: auto;

            .capacity-bar {
                max-width: none;
            }
        }
    }

    .favourite-card {
        flex: 0 0 calc((100% - 36px) / 3.5);
    }
}

// Mobile-Only Overrides
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
    // Constrain carousel to viewport with negative margin for ancestor padding
    // (.page-main 20px (15px non mobile) + .buildyourownbox-configurator 15px = 30px each side)
    .favourites-carousel {
        max-width: calc(100vw);
        margin-left: -35px;
        margin-right: -35px;
        box-sizing: border-box;
    }

    .favourites-track {
        padding-left: 35px;

        &::after {
            content: '';
            flex: 0 0 35px;
        }
    }

    // Fixed bottom bar for configurator sidebar
    .buildyourownbox-configurator {
        .configurator-sidebar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 900;
        }
    }

    .box-summary {
        flex: none;
        padding: 0;
        border: none;
        border-radius: 8px 8px 0 0;
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
        gap: 0;
    }

    .box-summary-placeholder {
        padding: 15px 20px;
        gap: 0;

        .summary-title {
            display: none;
        }

        .summary-box-info {
            background: none;
            padding: 0;
            justify-content: center;
        }
    }

    .mobile-bar-header {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 12px 20px;
        cursor: pointer;
    }

    .mobile-bar-progress {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 8px;

        .progress-bar {
            flex: 1;
            height: 6px;
            background: @byob-border-color;
            border-radius: 3px;
            overflow: hidden;

            .progress-fill {
                height: 100%;
                background: linear-gradient(90deg, @byob-primary-color, lighten(@byob-primary-color, 10%));
                border-radius: 3px;
                transition: width 0.3s ease;
            }
        }

        span {
            font-size: 13px;
            font-weight: 600;
            color: @byob-secondary-color;
            white-space: nowrap;
        }
    }

    .mobile-bar-details {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
    }

    .mobile-bar-price {
        font-weight: 600;
        color: @byob-primary-color;
        font-size: 20px;
        white-space: nowrap;
    }

    .mobile-bar-toggle {
        font-size: 16px;
        color: @byob-primary-color;
        font-weight: 600;
        white-space: nowrap;
    }

    .mobile-drawer-content {
        display: flex;
        flex-direction: column;
        gap: 15px;
        max-height: 0;
        padding: 0 20px;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        transition: max-height 0.3s ease;

        > .summary-title,
        > .summary-box-info,
        > .selection-progress {
            display: none;
        }

        > .summary-errors {
            padding-bottom: 10px;
        }
    }

    .box-summary.drawer-open .mobile-drawer-content {
        max-height: 50vh;
    }

    .box-summary .summary-actions {
        padding: 10px 20px 20px;
    }

    // Product info modal: accordion on mobile
    .byob-product-info-popup .modal-body {
        .modal-tabs {
            display: none;
        }

        .info-section {
            display: block;
            margin-bottom: 10px;
            padding-bottom: 0;
            border-bottom: none;

            .info-section-trigger {
                display: flex;
                width: 100%;
                padding: 14px 16px;
                margin: 0;
                background: #f8f8f8;
                border: 1px solid @byob-border-color;
                border-radius: 8px;

                &:before {
                    display: none;
                }

                &:after {
                    content: '';
                    margin-left: auto;
                    width: 8px;
                    height: 8px;
                    border-right: 2px solid @byob-secondary-color;
                    border-bottom: 2px solid @byob-secondary-color;
                    transform: rotate(45deg);
                    transition: transform 0.2s ease;
                    flex-shrink: 0;
                }
            }

            .section-content {
                display: none;
            }

            &.active {
                .info-section-trigger {
                    border-radius: 8px 8px 0 0;
                    color: @byob-primary-color;

                    &:after {
                        transform: rotate(-135deg);
                    }
                }

                .section-content {
                    display: block;
                    padding: 14px 16px;
                    border: 1px solid @byob-border-color;
                    border-top: none;
                    border-radius: 0 0 8px 8px;
                }
            }
        }
    }
}