/* ── Variables ───────────────────────────────── */
:root {
    --vb-font-family:  inherit, system-ui, sans-serif;
    --vb-primary:          #D8CEAC;
    --vb-secondary:        #E0D8BD;
    --vb-primary-light:    #FBFAF7;
    --vb-primary-shadow:   rgba(216, 206, 172, 0.15);
    --vb-primary-focus:    rgba(216, 206, 172, 0.12);
    --vb-white:            #FFFFFF;
    --vb-light:            #F0F0F0;
    --vb-darkness:         #7E7D7C;

    --vb-success:          #f0fdf4;
    --vb-success-bg:       #f0fdf4;
    --vb-success-text:     #166534;

    --vb-warning-bg:       #fffbeb;
    --vb-warning-text:     #92400e;

    --vb-danger:           #dc2626;

    --vb-text-main:        #000000;
    --vb-text-muted:       #000000;
    --vb-text-subtle:      #000000;

    --vb-surface:          #FBFAF7;
    --vb-bg:               #FBFAF7;
    --vb-bg-warm:          #FBFAF7;

    --vb-border:           #D8CEAC;
    --vb-border-hover:     #D8CEAC;
    --vb-border-warm:      #D8CEAC;
    --vb-border-range:     #FBFAF7;

    --vb-radius-sm:        6px;
    --vb-radius-md:        8px;
    --vb-radius-lg:        12px;
    --vb-radius-pill:      100px;
}

.vb-widget {
    position: relative;
    font-family: var( --vb-font-family );
    --bs-secondary-color: var( --vb-text-main );
    --vb-radius-lg: 1rem;
    --bs-border-radius: 0.3125rem;
}

.vb-widget .btn-primary, .vb-btn-select, .vb-widget .btn {
    --bs-btn-bg: var( --vb-primary );
    --bs-btn-border-color: var( --vb-primary );
    --bs-btn-color: var( --vb-text-main );
    --bs-btn-font-weight: 600;
    --bs-border-radius: 0.3125rem;
    --bs-btn-hover-color: var( --vb-light );
    --bs-btn-hover-bg: var( --vb-text-main );
    --bs-btn-hover-border-color: var( --vb-text-main );
    --bs-btn-active-color: var( --vb-light );
    --bs-btn-active-bg: var( --vb-text-main );
    --bs-btn-active-border-color: var( --vb-text-main );
    --bs-btn-focus-shadow-rgb: 216, 206, 172;
    --bs-btn-disabled-bg: var( --vb-surface );
    --bs-btn-disabled-border-color: var( --vb-surface );
    text-transform: uppercase;
    font-weight: var( --bs-btn-font-weight );
}

.vb-widget .btn-primary {
    display: block;
}

.vb-widget .btn {
    background-color: var( --bs-btn-bg );
    border-color: var( --bs-btn-border-color );
    border-radius: var( --bs-border-radius );
    color: var( --vb-text-main );
    padding: 0.65rem 1.5rem;
    line-height: 1;
}

.vb-widget .btn:hover, .vb-widget .btn:focus, .vb-widget .btn:active {
    background-color: var( --bs-btn-hover-bg );
    border-color: var( --bs-btn-hover-border-color );
    color: var( --bs-btn-hover-color );
}

.vb-widget .form-control:focus {
    box-shadow: 0 0 0 .25rem rgba(216, 206, 172,.25);   
    border-color: var( --vb-primary );
}

.vb-widget .form-control::placeholder {
    --bs-secondary-color: var( --vb-darkness );
}

/* ── Step indicators ─────────────────────────── */
.vb-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    gap: 0;
}

.vb-step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
}

.vb-step-item:not(.active):not(.completed) {
    cursor: default;
}

.vb-step-bubble {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var( --vb-white );
    color: var(--vb-text-subtle);
    font-weight: 700;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    border: 2px dashed var( --vb-text-main );
}

.vb-step-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--vb-text-subtle);
    transition: color 0.2s;
    white-space: nowrap;
}

.vb-step-item.active .vb-step-bubble {
    background: var(--vb-text-main);
    color: var( --vb-white );
    border: 2px solid var( --vb-text-main );
}

.vb-step-item.active .vb-step-label {
    color: var(--vb-text-main);
}

.vb-step-item.completed .vb-step-bubble {
    background: var(--vb-text-main );
    color: var(--vb-white );
}

.vb-step-item.completed .vb-step-label {
    color: var(--vb-text-main );
}

.vb-step-connector {
    flex: 1;
    height: 2px;
    background: var(--vb-darkness);
    margin: 0 12px;
    margin-bottom: 22px;
    min-width: 60px;
    max-width: 120px;
    transition: background 0.2s;
}

.vb-step-connector.active {
    background: var(--vb-text-main);
}

/* ── Filters ─────────────────────────────────── */
.vb-filters, .vb-form-data {
    border: 0;
    border-radius: var(--vb-radius-lg);
    padding: 0;
    margin-bottom: 24px;
}

.vb-form-data {
    margin-bottom: 0;
}

/* ── Field label ─────────────────────────────── */
.vb-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 1rem;
    font-weight: 500;
    color: var(--vb-text-main);
    margin-bottom: 6px;
}

.vb-field-icon {
    font-style: normal;
    font-size: 1rem;
}

/* ── Inputs ──────────────────────────────────── */
.vb-input.form-control,
.vb-filters .form-control,
.vb-form-data .form-control {
    background: var(--vb-light);
    border-radius: var(--bs-border-radius);
    color: var(--vb-text-main);
    border: 1px solid var(--vb-light);
    height: 40px;
}

.vb-input.form-control:focus,
.vb-filters .form-control:focus,
.vb-form-data .form-control:focus {
    border-color: var(--vb-primary);
    box-shadow: 0 0 0 3px var(--vb-primary-focus);
}

/* ── Counter ─────────────────────────────────── */
.vb-counter {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--vb-surface);
    border: 1.5px solid var(--vb-border);
    border-radius: var(--vb-radius-md);
    padding: 8px 16px;
    font-size: 1.1rem;
    height: 38px;
}

.vb-counter-btn {
    background: none;
    border: none;
    font-size: 1.3rem;
    cursor: pointer;
    color: var(--vb-text-main);
    line-height: 1;
    padding: 0;
    font-weight: 700;
    height: 100%;
    width: 38px;
    border-radius: inherit;
    transition: all 0.2s ease-in-out;
}

.vb-counter-btn:hover { 
    color: var( --vb-white );
    background-color: var( --vb-text-main );
}

.vb-filters .vb-counter {
    background: var(--vb-light);
    border: 1px solid var(--vb-light);
    border-radius: var(--bs-border-radius);
    height: 40px;
    width: 100%;
    justify-content: space-between;
    padding: 0 12px;
}

/* ── Summary bar ─────────────────────────────── */
.vb-summary-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0.5rem 1rem;
    background: var(--vb-bg);
    border: 1px dashed var( --vb-primary );
    border-radius: var(--vb-radius-md);
    font-size: 1rem;
    color: var(--vb-text-muted);
}

.vb-capacity-badge {
    font-weight: 600;
    font-size: 1rem;
    padding: 4px 10px;
    border-radius: var(--vb-radius-pill);
}

.vb-badge-ok   { background: var(--vb-success-bg);  color: var(--vb-success-text); }
.vb-badge-warn { background: var(--vb-warning-bg);  color: var(--vb-warning-text); }

/* ── Cart card — horizontal ──────────────────── */
.vb-cart-card {
    border: 1px solid var(--vb-border);
    border-radius: var(--vb-radius-lg);
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
    background: var(--vb-surface);
    display: flex;
    flex-direction: column;
}

.vb-cart-card:hover { border-color: var(--vb-border-hover); }

.vb-cart-card.vb-selected {
    border-color: var(--vb-primary);
    box-shadow: 0 0 0 3px var(--vb-primary-shadow);
}

.vb-cart-img-wrap {
    position: relative;
    width: 100%;
}

.vb-swiper {
    width: 100%;
    height: 200px;
}

.vb-swiper .swiper-slide img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.vb-cart-no-img {
    width: 100%;
    height: 200px;
    background: var(--vb-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
}

.vb-cart-no-img > svg, .vb-empty-icon > svg {
    height: 3rem;
    width: 3rem;
    opacity: 0.5;
}

.vb-swiper .swiper-button-prev,
.vb-swiper .swiper-button-next {
    color: #fff;
    --swiper-navigation-size: 20px;
    outline: 0;
}

.vb-swiper .swiper-pagination-bullet-active {
    background: var(--vb-primary);
}

/* ── Gallery button ──────────────────────────── */
.vb-gallery-btn {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    background: rgba(0, 0, 0, 0.55);
    border: none;
    border-radius: var(--vb-radius-md);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: background 0.15s;
}

.vb-gallery-btn:hover { background: rgba(0, 0, 0, 0.8); }

/* ── Cart body ───────────────────────────────── */
.vb-cart-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 10px;
    min-width: 0;
}

.vb-cart-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.vb-cart-name {
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--vb-text-main);
    line-height: 1.3;
}

.vb-cart-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--vb-text-main);
    white-space: nowrap;
    text-align: right;
}

.vb-price-unit {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--vb-text-muted);
}

.vb-no-rate { font-size: 1rem; color: var(--vb-text-subtle); }

.vb-cart-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.vb-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.875rem;
    color: var(--vb-text-main);
    border: 1px solid var(--vb-border);
    padding: 3px 8px;
    border-radius: var(--vb-radius-pill);
}

.vb-color-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
    display: inline-block;
}

.vb-cart-notes {
    font-size: 1rem;
    color: var(--vb-text-subtle);
    line-height: 1.4;
}

.vb-cart-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
}

.vb-cart-total-price        { font-size: 1rem; color: var(--vb-text-muted); }
.vb-cart-total-price strong { color: var(--vb-text-main); font-weight: 700; }

/* ── Select button ───────────────────────────── */
.vb-btn-select {
    border: 2px solid var(--vb-secondary);
    color: var(--vb-text-main );
    background: transparent;
    font-weight: 600;
    font-size: 1rem;
    border-radius: var(--bs-border-radius);
    white-space: nowrap;
    transition: all 0.15s;
    flex-shrink: 0;
}

.btn.vb-btn-select {
    padding: 0.5rem 0.875rem;
}

.vb-btn-select:not(.vb-btn-selected) {
    background: transparent;
}

.vb-btn-select:hover {
    background: var(--vb-secondary );
    color: var(--vb-text-main );
    border-color: var(--vb-secondary);
}

.vb-btn-select.vb-btn-selected {
    background: var(--vb-primary);
    color: var( --vb-text-main );
    border-color: var(--vb-primary);
}

.vb-btn-select:disabled {
    border-color: var(--vb-border);
    color: var(--vb-text-subtle);
    cursor: not-allowed;
}

/* ── Order summary ───────────────────────────── */
.vb-order-box {
    background: var(--vb-bg);
    border: 0;
    border-radius: var(--vb-radius-lg);
    padding: 2rem;
}

.vb-order-box--sticky {
    position: sticky;
    top: 20px;
}

.site-header.sticky-top + main .vb-order-box--sticky {
    top: 7rem;
}

.vb-order-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--vb-text-main);
}

.vb-summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
    padding: 6px 0;
    color: var(--vb-text-muted);
    border-bottom: 1px dashed var(--vb-border);
}

.vb-summary-cart       { padding: 8px 0; border-bottom: 1px dashed var(--vb-text-main); }
.vb-summary-cart-name  { font-weight: 600; font-size: 1rem; color: var(--vb-text-main); }
.vb-summary-cart-price { font-size: 1rem; color: var(--vb-text-muted); margin-top: 2px; }

.vb-order-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--vb-text-main);
}

/* ── Empty ───────────────────────────────────── */
.vb-empty {
    text-align: center;
    padding: 40px;
    color: var(--vb-text-subtle);
    background: var(--vb-bg);
    border-radius: var(--vb-radius-lg);
}

.vb-empty-icon { font-size: 3rem; display: block; margin-bottom: 12px; }

/* ── Back button ─────────────────────────────── */
.vb-btn-back {
    background: none;
    border: none;
    color: var(--vb-text-muted);
    font-size: 1rem;
    cursor: pointer;
    padding: 8px 0;
    font-family: inherit;
    text-align: center;
    display: block;
    width: 100%;
    transition: color 0.15s;
    text-transform: uppercase;
}

.vb-btn-back:hover { color: var(--vb-text-main); }

/* ── Error ───────────────────────────────────── */
.vb-error {
    color: var(--vb-danger);
    font-size: 1rem;
}

/* ── Spinner ─────────────────────────────────── */
.vb-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: vb-spin 0.6s linear infinite;
    vertical-align: middle;
}

.vb-spinner-lg {
    width: 40px;
    height: 40px;
    border: 3px solid var( --vb-surface );
    border-top-color: var(--vb-primary);
    border-radius: 50%;
    animation: vb-spin 0.7s linear infinite;
    margin: 0 auto;
}

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

/* ── Loading overlay ─────────────────────────── */
.vb-loading {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--vb-radius-lg);
    z-index: 10;
}

.vb-loading-inner {
    text-align: center;
    color: var(--vb-text-muted);
}

.vb-loading-inner p {
    margin-top: 12px;
    font-size: 1rem;
}

/* ── Flatpickr range — highlight ─────────────── */
.flatpickr-day.inRange {
    box-shadow: -5px 0 0 var(--vb-border-range), 5px 0 0 var(--vb-border-range);
}

.flatpickr-day.inRange, .flatpickr-day.inRange, .flatpickr-day.prevMonthDay.inRange, .flatpickr-day.nextMonthDay.inRange, .flatpickr-day.today.inRange, .flatpickr-day.prevMonthDay.today.inRange, .flatpickr-day.nextMonthDay.today.inRange, .flatpickr-day:hover, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover, .flatpickr-day:focus, .flatpickr-day.prevMonthDay:focus, .flatpickr-day.nextMonthDay:focus {
    background: var(--vb-border-range);
    border-color: var(--vb-border-range);
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--vb-primary);
    border-color: var(--vb-primary);
}

.flatpickr-day.startRange.endRange {
    border-radius: var(--vb-radius-pill);
}

.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay {
    background: var(--vb-primary);
    border-color: var(--vb-primary);
}

.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
    -webkit-box-shadow: -10px 0 0 var( --vb-bg-warm );
    box-shadow: -10px 0 0 var( --vb-bg-warm );
}

/* ── Sticky bar inferior ─────────────────────── */
.vb-sticky-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--vb-surface);
    border-top: 1px solid var(--vb-primary);
    padding: 12px 20px;
    z-index: 1000;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
}

.vb-sticky-bar-inner {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.vb-sticky-total {
    font-weight: 700;
    font-size: 1rem;
    color: var(--vb-text-main);
}

.vb-sticky-action {
    font-size: 1rem;
}

.vb-form-header {
    border-left: 3px solid var(--vb-primary);
    padding-left: 14px;
}

.vb-form-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--vb-text-main);
    margin-bottom: 4px;
}

.vb-form-subtitle {
    font-size: 1rem;
    color: var(--vb-text-muted);
    margin-bottom: 0;
    line-height: 1.5;
}

.vb-widget .form-control.is-invalid, .vb-widget .was-validated .form-control:invalid {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
    border-color: var(--bs-form-invalid-border-color);
}

.vb-widget .form-control.is-invalid:focus, .vb-widget .was-validated .form-control:invalid:focus {
    border-color: var(--bs-form-invalid-border-color);
}