:root {
    --wizard-primary: var(--Main-primary_color, #2a2a2a);
    --wizard-primary-hover: var(--Main-secondary_color, #2a2a2a);
    --wizard-success: #10b981;
    --wizard-warning: #f59e0b;
    --wizard-error: #ef4444;
    --wizard-info: #06b6d4;
    
    --wizard-gray-50: #f8fafc;
    --wizard-gray-100: #f1f5f9;
    --wizard-gray-200: #e2e8f0;
    --wizard-gray-300: #cbd5e1;
    --wizard-gray-400: #94a3b8;
    --wizard-gray-500: #64748b;
    --wizard-gray-600: #475569;
    --wizard-gray-700: #334155;
    --wizard-gray-800: #1e293b;
    --wizard-gray-900: #0f172a;
    
    --wizard-glass-bg: rgba(255, 255, 255, 0.08);
    --wizard-glass-border: rgba(255, 255, 255, 0.12);
    --wizard-glass-blur: blur(12px);
    
    --wizard-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --wizard-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --wizard-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --wizard-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --wizard-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --wizard-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --wizard-shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    
    --wizard-transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --wizard-transition-normal: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --wizard-transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    --wizard-transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    --wizard-radius-sm: 0.5rem;
    --wizard-radius-md: 0.75rem;
    --wizard-radius-lg: 1rem;
    --wizard-radius-xl: 1.5rem;
    --wizard-radius-2xl: 2rem;
    
    --wizard-space-1: 0.25rem;
    --wizard-space-2: 0.5rem;
    --wizard-space-3: 0.75rem;
    --wizard-space-4: 1rem;
    --wizard-space-5: 1.25rem;
    --wizard-space-6: 1.5rem;
    --wizard-space-8: 2rem;
    --wizard-space-10: 2.5rem;
    --wizard-space-12: 3rem;
    --wizard-space-16: 4rem;
    --wizard-space-20: 5rem;
}

@media (prefers-reduced-motion: reduce) {
    .wizard-wrapper *,
    .wizard-wrapper *::before,
    .wizard-wrapper *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

.wizard-wrapper {
    min-height: 100vh;
        background: #fff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    overflow-x: hidden;
}

.wizard-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
     background: radial-gradient(circle at 20% 50%, rgb(255 132 0 / 14%) 0%, #cfa2ef17 50%), radial-gradient(circle at 80% 20%, rgb(150 233 123 / 10%) 0%, transparent 50%), radial-gradient(circle at 40% 80%, rgb(183 97 15 / 15%) 0%, transparent 50%);
    background:
        radial-gradient(ellipse farthest-side at center, rgba(255, 223, 186, 0.7) 0%, rgba(255, 223, 186, 0.4) 40%, transparent 70%),
        radial-gradient(ellipse closest-side at center, rgba(185, 233, 190, 0.6) 0%, rgba(185, 233, 190, 0.3) 40%, transparent 75%),
        radial-gradient(ellipse closest-side at center, rgba(255, 232, 186, 0.5) 0%, rgba(255, 232, 186, 0.2) 45%, transparent 80%),
        radial-gradient(ellipse closest-side at center, rgba(197, 223, 255, 0.4) 0%, rgba(197, 223, 255, 0.15) 80%, transparent 85%);
    pointer-events: none;
}

/* Progress Section - Migliorata per mobile */
.wizard-progress-section {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--wizard-glass-bg);
    backdrop-filter: var(--wizard-glass-blur);
    border-bottom: 1px solid var(--wizard-glass-border);
    padding: var(--wizard-space-4) 0;
}

.wizard-progress-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--wizard-space-4);
}

.wizard-stepper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    margin-bottom: var(--wizard-space-6);
    overflow-x: auto;
    overflow-y: hidden;
    padding: var(--wizard-space-2) 0;
    scrollbar-width: thin;
    scrollbar-color: #e9e9e9 transparent;
}

.wizard-stepper::before {
    content: '';
    position: absolute;
    top: 2rem;
    left: 2rem;
    right: 2rem;
    height: 0px;
    border-top: 2px dotted rgb(213 213 213);
    z-index: 1;
}

.wizard-step-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
    min-width: 150px;
    position: relative;
    z-index: 2;
    transition: var(--wizard-transition-normal);
}

.wizard-step-marker {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: rgb(235 235 235);
    border: 2px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: var(--wizard-glass-blur);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--wizard-space-2);
    transition: var(--wizard-transition-normal);
    position: relative;
    overflow: hidden;
}

.wizard-step-marker::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    opacity: 0;
    transition: var(--wizard-transition-normal);
}

.wizard-step-indicator.wizard-active .wizard-step-marker {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: var(--wizard-shadow-xl), 0 0 0 4px rgba(255, 255, 255, 0.2);
border: 1px solid var(--wizard-primary);
}

.wizard-step-indicator.wizard-active .wizard-step-marker::before {
    opacity: 1;
    animation: rotate 3s linear infinite;
}

.wizard-step-indicator.wizard-completed .wizard-step-marker {
    background: var(--Main-primary_color, rgba(16, 185, 129, 0.9));
    border-color: var(--Main-primary_color, rgba(16, 185, 129, 0.9));
    box-shadow: var(--wizard-shadow-lg);
}

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

.wizard-step-inner {
    position: relative;
        text-align: center;
    z-index: 1;
}

.wizard-step-number,
.wizard-step-icon {
    font-size: 1rem;
    font-weight: 700;
    color: rgb(161 161 161 / 60%);
    transition: var(--wizard-transition-fast);
}

.wizard-step-icon.fas{
        display: block;
}
.wizard-step-indicator.wizard-active .wizard-step-number,
.wizard-step-indicator.wizard-active .wizard-step-icon {
    color: var(--wizard-primary);
}

.wizard-step-indicator.wizard-completed .wizard-step-number,
.wizard-step-indicator.wizard-completed .wizard-step-icon {
    color: white;
}

.wizard-step-content {
    text-align: center;
    max-width: 120px;
}

.wizard-step-title {
       font-size: 0.8rem;
    font-weight: 600;
    color: #404e60;
    margin-bottom: var(--wizard-space-1);
    line-height: 1.5;
}

.wizard-step-subtitle {
    font-size: 0.65rem;
color: rgb(155 155 155);
}

.wizard-progress-track {
    height: 6px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.wizard-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.6) 100%);
    border-radius: 3px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.wizard-progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.wizard-main-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--wizard-space-6) var(--wizard-space-4);
    position: relative;
    z-index: 10;
    margin-bottom: 100px;
}

.wizard-step {
    display: none;
    opacity: 0;
    transform: translateY(30px);
    transition: var(--wizard-transition-slow);
}

.wizard-step.wizard-active {
    display: block;
    opacity: 1;
    transform: translateY(0);
    animation: slideUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.wizard-step-container {
 background: rgba(255, 255, 255, 0.95);
    backdrop-filter: var(--wizard-glass-blur);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--wizard-radius-2xl);
    box-shadow: 0 8px 32px 0 rgb(0 0 0 / 9%);
    overflow: hidden;
    position: relative;
}

.wizard-step-header {
    text-align: center;
    padding: var(--wizard-space-8) var(--wizard-space-6) var(--wizard-space-6);
    border-bottom: 1px solid var(--wizard-gray-200);
    background: var(--wizard-gray-50);
}

.wizard-main-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--wizard-gray-900);
    margin-bottom: var(--wizard-space-4);
    letter-spacing: -0.025em;
    line-height: 1.1;
}

.wizard-main-description {
    font-size: 1rem;
    color: var(--wizard-gray-600);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

.wizard-step-body {
    padding: var(--wizard-space-8) var(--wizard-space-6);
}

.wizard-selection-counter {
    display: flex;
    justify-content: center;
    margin-bottom: var(--wizard-space-6);
}

.wizard-counter-card {
    background: var(--wizard-glass-bg);
    backdrop-filter: var(--wizard-glass-blur);
    border: 1px solid var(--wizard-glass-border);
    border-radius: var(--wizard-radius-xl);
    padding: var(--wizard-space-4) var(--wizard-space-6);
    display: flex;
    align-items: center;
    gap: var(--wizard-space-3);
    box-shadow: var(--wizard-shadow-lg);
}

.wizard-counter-number {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--wizard-primary);
    background: #f7f5f5;
    border-radius: 100px;
    display: inline-block;
    min-width: 2rem;
    padding: 0px 12px;
    text-align: center;
    transition: var(--wizard-transition-bounce);
}

.wizard-counter-separator {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--wizard-gray-400);
}

.wizard-counter-max {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--wizard-gray-700);
}

.wizard-counter-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--wizard-gray-600);
}

/* Filtri e ricerca - NUOVI */
.wizard-filters-section {
    margin-bottom: var(--wizard-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--wizard-space-4);
}

.wizard-search-container {
    display: flex;
    justify-content: center;
}

.wizard-search-box {
    position: relative;
    max-width: 400px;
    width: 100%;
}

.wizard-search-input {
    width: 100%;
    padding: var(--wizard-space-3) var(--wizard-space-3) var(--wizard-space-3) 3rem;
    border: 2px solid var(--wizard-gray-200);
    border-radius: var(--wizard-radius-lg);
    font-size: 1rem;
    background: white;
    transition: var(--wizard-transition-fast);
}

.wizard-search-input:focus {
    outline: none;
    border-color: var(--wizard-primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.wizard-search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--wizard-gray-400);
    font-size: 1rem;
}

.wizard-search-clear {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: var(--wizard-gray-200);
    border: none;
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--wizard-transition-fast);
}

.wizard-search-clear:hover {
    background: var(--wizard-gray-300);
}

.wizard-category-tabs {
    display: flex;
    justify-content: center;
    gap: var(--wizard-space-2);
    flex-wrap: wrap;
}

.wizard-category-tab {
    padding: var(--wizard-space-2) var(--wizard-space-4);
    border: 2px solid var(--wizard-gray-300);
    border-radius: var(--wizard-radius-lg);
    background: white;
    color: var(--wizard-gray-700);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: var(--wizard-transition-fast);
    display: flex;
    align-items: center;
    gap: var(--wizard-space-2);
}

.wizard-category-tab:hover {
    border-color: var(--wizard-primary);
    background: var(--wizard-gray-50);
}

.wizard-category-tab.active {
    border-color: var(--wizard-primary);
    background: var(--wizard-primary);
    color: white;
}

.wizard-grid {
    display: grid;
    gap: var(--wizard-space-4);
}

.wizard-boxes-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.wizard-products-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

}

.wizard-box-card,
.wizard-product-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: var(--wizard-glass-blur);
        border: 2px solid rgb(199 199 199 / 30%);

    border-radius: var(--wizard-radius-lg);
    overflow: hidden;
    transition: var(--wizard-transition-normal);
    cursor: pointer;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    transform-style: preserve-3d;
}

.wizard-product-card{
    max-width: 450px;
}
.wizard-box-card::before,
.wizard-product-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    opacity: 0;
    transition: var(--wizard-transition-normal);
    pointer-events: none;
}

.wizard-box-card:hover,
.wizard-product-card:hover {
    transform: translateY(-4px);
      border-color: var(--Main-primary_color);
    box-shadow: var(--wizard-shadow-lg);
}

.wizard-box-card:hover::before,
.wizard-product-card:hover::before {
    opacity: 1;
}

.wizard-box-card.wizard-selected,
.wizard-product-card.wizard-selected {
    border-color: var(--wizard-primary);
    background: rgba(255, 255, 255, 0.95);
transform: translateY(-2px) scale(1.05);
    box-shadow: var(--wizard-shadow-lg), 0 0 0 2px rgba(79, 70, 229, 0.1);
}

.wizard-product-card.wizard-out-of-stock {
    opacity: 0.6;
    cursor: not-allowed;
    filter: grayscale(50%);
}

.wizard-product-card.wizard-out-of-stock:hover {
    transform: none;
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: none;
}

.wizard-card-media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4/3;
    background: var(--wizard-gray-100);
}

.wizard-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--wizard-transition-normal);
}

.wizard-box-card:hover .wizard-card-image,
.wizard-product-card:hover .wizard-card-image {
    transform: scale(1.05);
}

/* Anteprima prodotto - NUOVO */
.wizard-preview-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;
    opacity: 0;
    transition: var(--wizard-transition-fast);
}

.wizard-product-card:hover .wizard-preview-overlay {
    opacity: 1;
}

.wizard-preview-btn {
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--wizard-transition-fast);
    color: var(--wizard-primary);
    font-size: 1.25rem;
}

.wizard-preview-btn:hover {
    background: white;
    transform: scale(1.1);
}

.wizard-selection-badge {
    position: absolute;
    top: var(--wizard-space-3);
    right: var(--wizard-space-3);
    width: 2.5rem;
    height: 2.5rem;
    background: var(--wizard-success);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
    font-weight: 600;
    opacity: 0;
    transform: scale(0) rotate(-180deg);
    transition: var(--wizard-transition-bounce);
    box-shadow: var(--wizard-shadow-lg);
}

.wizard-box-card.wizard-selected .wizard-selection-badge,
.wizard-product-card.wizard-selected .wizard-selection-badge {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.wizard-stock-badge {
    position: absolute;
    top: var(--wizard-space-3);
    left: var(--wizard-space-3);
    background: var(--wizard-error);
    color: white;
    padding: var(--wizard-space-1) var(--wizard-space-2);
    border-radius: var(--wizard-radius-md);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: var(--wizard-shadow-md);
}

.wizard-card-content {
    padding: var(--wizard-space-4);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.wizard-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--wizard-gray-900);
    margin-bottom: var(--wizard-space-2);
    line-height: 1.3;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.wizard-card-price {
    font-size: 1.25rem!important;
    font-weight: 600!important;
    color: var(--wizard-primary);
    margin-bottom: var(--wizard-space-3);
    display: flex;
    align-items: baseline;
    gap: var(--wizard-space-2);
}

.wizard-original-price {
    font-size: 0.875rem;
    color: var(--wizard-gray-500);
    text-decoration: line-through;
    font-weight: 500;
}

.wizard-variant-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--wizard-space-1);
    background: var(--wizard-primary);
    color: white;
    padding: var(--wizard-space-1) var(--wizard-space-2);
    border-radius: var(--wizard-radius-md);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    justify-content: center;
    letter-spacing: 0.025em;
    margin-bottom: var(--wizard-space-3);
}

.wizard-primary-button,
.wizard-secondary-button,
.wizard-success-button,
.wizard-confirm-button {
    padding: var(--wizard-space-2) var(--wizard-space-4);
    border-radius: var(--wizard-radius-md);
    font-weight: 600;
    font-size: 0.75rem;
    cursor: pointer;
    transition: var(--wizard-transition-normal);
    border: none;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--wizard-space-2);
    position: relative;
    overflow: hidden;
}

.wizard-primary-button::before,
.wizard-secondary-button::before,
.wizard-success-button::before,
.wizard-confirm-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.wizard-primary-button:hover::before,
.wizard-secondary-button:hover::before,
.wizard-success-button:hover::before,
.wizard-confirm-button:hover::before {
    left: 100%;
}

.wizard-primary-button {
    background: var(--wizard-primary);
    color: white;
    box-shadow: var(--wizard-shadow-sm);
    width: 100%;
}

.wizard-primary-button:hover:not(:disabled) {
    background: var(--wizard-primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--wizard-shadow-md);
}

.wizard-primary-button:disabled {
    background: var(--wizard-gray-300);
    color: var(--wizard-gray-500);
    cursor: not-allowed;
    transform: none;
}

.wizard-secondary-button {
    background: white;
    color: var(--wizard-gray-700);
    border: 2px solid var(--wizard-gray-300);
    box-shadow: var(--wizard-shadow-sm);
}

.wizard-secondary-button:hover {
    background: var(--wizard-gray-50);
    border-color: var(--wizard-gray-400);
    transform: translateY(-1px);
}

.wizard-success-button {
    background: var(--wizard-success);
    color: white;
    box-shadow: var(--wizard-shadow-sm);
}

.wizard-success-button:hover:not(:disabled) {
    background: #059669;
    transform: translateY(-1px);
    box-shadow: var(--wizard-shadow-md);
}

.wizard-confirm-button {
    background: var(--wizard-success);
    color: white;
    box-shadow: var(--wizard-shadow-sm);
    width: 100%;
    margin-top: var(--wizard-space-2);
}

.wizard-confirm-button:hover {
    background: #059669;
    transform: translateY(-1px);
    box-shadow: var(--wizard-shadow-md);
}

.wizard-quantity-controls {
    margin-top: var(--wizard-space-3);
    padding-top: var(--wizard-space-3);
    border-top: 1px solid var(--wizard-gray-200);
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: var(--wizard-transition-slow);
}

.wizard-quantity-controls.wizard-show {
    opacity: 1;
    max-height: 150px;
}

.wizard-quantity-selector {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--wizard-space-3);
    background: var(--wizard-gray-50);
    border: 1px solid var(--wizard-gray-200);
    border-radius: var(--wizard-radius-md);
    padding: var(--wizard-space-2);
    margin-bottom: var(--wizard-space-2);
}

.wizard-qty-button {
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--wizard-gray-300);
    border-radius: 50%;
    background: white;
    color: var(--wizard-gray-600);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--wizard-transition-fast);
    font-size: 0.75rem;
    font-weight: 600;
}

.wizard-qty-button:hover:not(:disabled) {
    border-color: var(--wizard-primary);
    background: var(--wizard-primary);
    color: white;
    transform: scale(1.1);
}

.wizard-qty-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.wizard-qty-input {
    width: 3rem;
    text-align: center;
    border: 1px solid var(--wizard-gray-300);
    border-radius: var(--wizard-radius-sm);
    padding: var(--wizard-space-1);
    font-weight: 600;
    font-size: 0.875rem;
    background: white;
    color: var(--wizard-gray-900);
    transition: var(--wizard-transition-fast);
}

.wizard-qty-input:focus {
    outline: none;
    border-color: var(--wizard-primary);
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
}

.wizard-message-section {
    display: flex;
    justify-content: center;
}

.wizard-message-card {
    background: var(--wizard-gray-50);
    border: 1px solid var(--wizard-gray-200);
    border-radius: var(--wizard-radius-xl);
    padding: var(--wizard-space-8);
    max-width: 600px;
    width: 100%;
    box-shadow: var(--wizard-shadow-lg);
}

.wizard-message-icon {
    text-align: center;
    margin-bottom: var(--wizard-space-6);
}

.wizard-message-icon i {
    font-size: 3rem;
    color: var(--wizard-error);
    animation: heartbeat 2s ease-in-out infinite;
}

@keyframes heartbeat {
    0%, 100% { 
        transform: scale(1);
    }
    50% { 
        transform: scale(1.05);
    }
}

.wizard-message-textarea {
    width: 100%;
    border: 2px solid var(--wizard-gray-200);
    border-radius: var(--wizard-radius-lg);
    padding: var(--wizard-space-4);
    font-size: 1rem;
    line-height: 1.6;
    resize: vertical;
    min-height: 120px;
    background: white;
    transition: var(--wizard-transition-fast);
    font-family: inherit;
}
.wizard-box-info h4{
    font-size: 20px;
}
.wizard-product-info h5{
    font-size: 18px;
}
.wizard-message-textarea:focus {
    outline: none;
    border-color: var(--wizard-primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.wizard-message-counter {
    text-align: right;
    margin-top: var(--wizard-space-2);
    font-size: 0.875rem;
    color: var(--wizard-gray-500);
}

.wizard-navigation-section {
      position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 100;

    background: rgb(255 255 255 / 85%);
    backdrop-filter: var(--wizard-glass-blur);
    border-top: 1px solid var(--wizard-gray-200);
}

.wizard-navigation-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wizard-space-4);
        padding: 0 25px;
}

.wizard-nav-button {
    padding: var(--wizard-space-3) var(--wizard-space-6);
    border-radius: var(--wizard-radius-lg);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: var(--wizard-transition-normal);
    border: none;
    display: flex;
    align-items: center;
    gap: var(--wizard-space-2);
    min-width: 120px;
    justify-content: center;
}

.wizard-prev-button {
    background: var(--wizard-gray-100);
    color: var(--wizard-gray-700);
    border: 2px solid var(--wizard-gray-300);
}

.wizard-prev-button:hover {
    background: var(--wizard-gray-200);
    border-color: var(--wizard-gray-400);
}

.wizard-next-button {
    background: var(--Main-primary_color, var(--wizard-success));
    color: white;
    box-shadow: var(--wizard-shadow-md);
}

.wizard-next-button:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--wizard-shadow-lg);
}

.wizard-next-button:disabled {
    background: var(--wizard-gray-300);
    color: var(--wizard-gray-500);
    cursor: not-allowed;
}

.wizard-horizontal-summary {
    flex: 1;
    padding: var(--wizard-space-3);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.wizard-summary-items-horizontal {
    display: flex;
    gap: var(--wizard-space-3);
    margin-bottom: var(--wizard-space-2);
    padding-bottom: var(--wizard-space-2);
    min-width: max-content;
}

.wizard-summary-item-horizontal {
    display: flex;
    align-items: center;
    gap: var(--wizard-space-2);
    background: white;
    padding: var(--wizard-space-2);
    border-radius: var(--wizard-radius-md);
    border: 1px solid var(--wizard-gray-200);
    min-width: 200px;
    flex-shrink: 0;
}

.wizard-summary-item-horizontal img {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: cover;
    border-radius: var(--wizard-radius-sm);
}

.wizard-item-info {
    flex: 1;
    min-width: 0;
}

.wizard-item-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--wizard-gray-900);
    margin-bottom: var(--wizard-space-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wizard-item-quantity {
    font-size: 0.65rem;
    color: var(--wizard-gray-500);
    margin-right: var(--wizard-space-1);
}

.wizard-item-price {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--wizard-primary);
}

.wizard-summary-total-horizontal {
    text-align: center;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--wizard-gray-900);
    border-top: 1px solid var(--wizard-gray-200);
    padding-top: var(--wizard-space-2);
}

.wizard-total-price {
    color: var(--wizard-primary);
    font-size: 1rem;
    font-weight: 900;
}

/* Modal styles */
.wizard-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--wizard-transition-normal);
}

.wizard-modal.wizard-show {
    display: flex;
    opacity: 1;
}

.wizard-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: var(--wizard-glass-blur);
}

.wizard-modal-dialog {
    position: relative;
    z-index: 1001;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    transform: scale(0.9);
    transition: var(--wizard-transition-normal);
}

.wizard-modal-lg {
    max-width: 700px;
}

.wizard-modal.wizard-show .wizard-modal-dialog {
    transform: scale(1);
}

.wizard-modal-content {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: var(--wizard-glass-blur);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--wizard-radius-2xl);
    box-shadow: var(--wizard-shadow-2xl);
    overflow: hidden;
}

.wizard-horizontal-summary::after {
    content: '→';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(to left, white 50%, transparent);
    padding: var(--wizard-space-4) var(--wizard-space-2);
    pointer-events: none;
    opacity: 0.7;
    font-weight: bold;
    color: var(--wizard-primary);
}

.wizard-modal-header {
    padding: var(--wizard-space-6);
    border-bottom: 1px solid var(--wizard-gray-200);
    background: var(--wizard-gray-50);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wizard-modal-title {
    font-weight: 800;
    color: var(--wizard-gray-900);
    font-size: 1.25rem;
    margin: 0;
    letter-spacing: -0.025em;
}

.wizard-modal-close {
    background: none;
    border: none;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--wizard-transition-fast);
    color: var(--wizard-gray-500);
    font-size: 1.125rem;
}

.wizard-modal-close:hover {
    background: var(--wizard-gray-200);
    color: var(--wizard-gray-700);
    transform: scale(1.1);
}

.wizard-modal-body {
    padding: var(--wizard-space-6);
    max-height: 500px;
    overflow: auto;
}

.wizard-modal-footer {
    padding: var(--wizard-space-6);
    border-top: 1px solid var(--wizard-gray-200);
    background: var(--wizard-gray-50);
    display: flex;
    gap: var(--wizard-space-3);
    justify-content: flex-end;
}

/* Variant modal styles */
.wizard-variant-preview {
    background: var(--wizard-gray-50);
    border: 1px solid var(--wizard-gray-200);
    border-radius: var(--wizard-radius-lg);
    padding: var(--wizard-space-5);
    margin-bottom: var(--wizard-space-6);
    display: flex;
    align-items: center;
    gap: var(--wizard-space-4);
}

.wizard-variant-image {
    width: 5rem;
    height: 5rem;
    object-fit: cover;
    border-radius: var(--wizard-radius-lg);
    box-shadow: var(--wizard-shadow-md);
}

.wizard-variant-details h6 {
    font-weight: 700;
    color: var(--wizard-gray-900);
    font-size: 1.25rem;
    margin: 0 0 var(--wizard-space-1) 0;
    letter-spacing: -0.01em;
}

.wizard-variant-details .wizard-variant-price {
    font-weight: 800;
    color: var(--wizard-primary);
    font-size: 1.125rem;
}

.wizard-variant-options {
    display: flex;
    flex-direction: column;
    gap: var(--wizard-space-3);
}

.wizard-variant-item {
    justify-content: space-between;
    border: 2px solid var(--wizard-gray-200);
    border-radius: var(--wizard-radius-lg);
    overflow: hidden;
    cursor: pointer;
    transition: var(--wizard-transition-fast);
    background: white;
    position: relative;
    display: flex
;
    padding-right: 20px;
}

.wizard-variant-item input {
width: 20px;
accent-color: #545454;
}

.wizard-variant-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgb(132 132 137 / 9%), transparent);
        transition: left 0.6s ease;
}

.wizard-variant-item:hover:not(.wizard-unavailable) {
    border-color: var(--wizard-primary);
    box-shadow: var(--wizard-shadow-sm);
    transform: translateY(-1px);
}

.wizard-variant-item:hover:not(.wizard-unavailable)::before {
    left: 100%;
}

.wizard-variant-item.wizard-selected {
    border-color: var(--wizard-primary);
    background: var(--wizard-gray-50);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.wizard-variant-item.wizard-unavailable {
    opacity: 0.6;
    cursor: not-allowed;
    background: var(--wizard-gray-100);
}

.wizard-variant-info {
    padding: var(--wizard-space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wizard-variant-name {
    font-weight: 600;
    color: var(--wizard-gray-900);
    font-size: 1rem;
}

.wizard-variant-price {
    font-weight: 700;
    color: var(--wizard-primary);
    font-size: 1rem;
    margin-left: var(--wizard-space-3);
}

.wizard-variant-stock {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--wizard-error);
    text-transform: uppercase;
    letter-spacing: 0.025em;
    background: rgba(239, 68, 68, 0.1);
    padding: var(--wizard-space-1) var(--wizard-space-2);
    border-radius: var(--wizard-radius-sm);
    margin-left: var(--wizard-space-2);
}

.wizard-variant-info input[type="radio"] {
    width: 1.25rem;
    height: 1.25rem;
    accent-color: var(--wizard-primary);
}

/* Product preview modal */
.wizard-product-preview {
    display: flex;
    gap: var(--wizard-space-6);
    align-items: flex-start;
}

.wizard-product-preview-image {
    flex: 0 0 200px;
}

.wizard-preview-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: var(--wizard-radius-lg);
    box-shadow: var(--wizard-shadow-md);
}

.wizard-product-preview-details {
    flex: 1;
}

.wizard-preview-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--wizard-gray-900);
    margin-bottom: var(--wizard-space-3);
}

.wizard-preview-price-container {
    margin-bottom: var(--wizard-space-4);
}

.wizard-preview-price {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--wizard-primary);
}

.wizard-preview-original-price {
    font-size: 1rem;
    color: var(--wizard-gray-500);
    text-decoration: line-through;
    margin-left: var(--wizard-space-2);
}

.wizard-preview-description {
    color: var(--wizard-gray-600);
    line-height: 1.6;
    margin-bottom: var(--wizard-space-4);
}

.wizard-preview-variants {
    border-top: 1px solid var(--wizard-gray-200);
    padding-top: var(--wizard-space-4);
}

.wizard-preview-variants h6 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--wizard-gray-900);
    margin-bottom: var(--wizard-space-3);
}

.wizard-preview-variant {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--wizard-space-2);
    border: 1px solid var(--wizard-gray-200);
    border-radius: var(--wizard-radius-md);
    margin-bottom: var(--wizard-space-2);
}

.wizard-preview-variant.unavailable {
    opacity: 0.6;
    background: var(--wizard-gray-100);
}

.wizard-preview-variant .out-of-stock {
    font-size: 0.75rem;
    color: var(--wizard-error);
    font-weight: 600;
}

/* Final review styles */
.wizard-fireworks-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
}

.wizard-firework {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    opacity: 0;
}

.wizard-firework:nth-child(1) { top: 20%; left: 20%; }
.wizard-firework:nth-child(2) { top: 30%; right: 25%; }
.wizard-firework:nth-child(3) { top: 40%; left: 60%; }

.wizard-firework.wizard-explode {
    animation: fireworkExplode 2s ease-out;
}

@keyframes fireworkExplode {
    0% {
        transform: scale(1);
        opacity: 1;
        box-shadow: 0 0 0 0 #7fffd5a6;
    }
    50% {
        transform: scale(50);
        opacity: 0.8;
  box-shadow: 
            0 0 0 20px #ffe7e7,
            0 0 0 40px #bfdcff,
            0 0 0 60px #fe95d5;
    }
    100% {
        transform: scale(100);
        opacity: 0;
        box-shadow: 
            0 0 0 40px transparent,
            0 0 0 80px transparent,
            0 0 0 120px transparent;
    }
}

.wizard-celebration-icon {
    text-align: center;
    margin-bottom: var(--wizard-space-4);
}

.wizard-celebration-icon i {
    font-size: 4rem;
    color: var(--wizard-primary);
    animation: celebrationBounce 1s ease-in-out infinite;
}

@keyframes celebrationBounce {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.2) rotate(10deg); }
}

.wizard-final-review {
    display: grid;
    /*grid-template-columns: 2fr 1fr;*/
    gap: var(--wizard-space-8);
}
.wizard-products-review {
    display: grid;
 grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: .5rem 1rem;
}
.wizard-products-review .wizard-selected-product-card{
border: 0;
background: transparent;
}

.wizard-section-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--wizard-gray-900);
    margin-bottom: var(--wizard-space-4);
    border-bottom: 2px solid #e9e9e9;
    padding-bottom: var(--wizard-space-2);
}
.wizard-final-items {
    border-bottom: 1px solid #e9e9e9;
    padding: 20px;
}
.wizard-selected-products-section {
    margin-top: 50px;
}
.wizard-final-total {
    margin-bottom: 20px;
    margin-top: 15px;
}
.wizard-selected-box-card,
.wizard-selected-product-card {
    display: flex;
    align-items: center;
    gap: var(--wizard-space-4);
    background: var(--wizard-gray-50);
    padding: var(--wizard-space-4);
    border-radius: var(--wizard-radius-lg);
    margin-bottom: var(--wizard-space-3);
    border: 1px solid #e1e1e1;
}

.wizard-selected-box-card img,
.wizard-selected-product-card img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--wizard-radius-md);
}

.wizard-final-cart-button {
    width: 100%;
    padding: var(--wizard-space-5) var(--wizard-space-6);
    background: var(--Main-primary_color, var(--wizard-success));
    color: white;
    border: none;
    border-radius: var(--wizard-radius-lg);
    font-size: 1.125rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--wizard-transition-normal);
    animation: pulseCart 2s ease-in-out infinite;
}

.wizard-final-prev-button {
    width: 100%;
    padding: var(--wizard-space-3) var(--wizard-space-6);
    border: 2px solid #dbdbdb;
    background: #fff;
    color: #625f5f;
    border-radius: var(--wizard-radius-lg);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    margin-top: 25px;
}


@keyframes pulseCart {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
    50% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
}

.wizard-final-price {
    font-size: 2rem;
    font-weight: 900;
    color: var(--wizard-primary);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .wizard-main-title {
        font-size: 1.75rem;
    }
    
    .wizard-products-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
    
    .wizard-product-preview {
        flex-direction: column;
    }
    
    .wizard-product-preview-image {
        flex: none;
        align-self: center;
    }
}

@media (max-width: 768px) {
 
    .wizard-progress-section {
        padding: var(--wizard-space-2) 0;
    }

  .wizard-step-number {
    top: 3px;
    position: relative;
}
    
    .wizard-progress-container
    {
        padding: 0;
    }
    .wizard-stepper {
        justify-content: flex-start;
        gap: var(--wizard-space-2);
        padding: 0;
        margin-bottom: var(--wizard-space-3);
    }
    
    .wizard-stepper::before {
        display: none;
    }
    
    .wizard-step-indicator {
        min-width: 100px;
    }
    
    .wizard-step-marker {
        width: 2.5rem;
        height: 2.5rem;
        margin-bottom: var(--wizard-space-1);
    }
    
    .wizard-step-number,
    .wizard-step-icon {
        font-size: 0.875rem;
    }
    
    .wizard-step-title {
        font-size: 0.65rem;
    }
    
    .wizard-step-subtitle {
        font-size: 0.6rem;
    }
    
    .wizard-main-content {
        padding: var(--wizard-space-4) var(--wizard-space-3);
    }
    
    .wizard-step-header {
        padding: var(--wizard-space-6) var(--wizard-space-4) var(--wizard-space-4);
    }
    
    .wizard-step-body {
        padding: var(--wizard-space-6) var(--wizard-space-4);
    }
    
    .wizard-main-title {
        font-size: 1.5rem;
    }
    
    .wizard-navigation-container {
        flex-direction: column;
        gap: var(--wizard-space-3);
    }
    
    .wizard-horizontal-summary {
        order: -1;
        position: relative;
        max-width: none;
        padding: 0;
    }

    .wizard-summary-total-horizontal{
        font-size: 0.75rem;
        font-weight: 500;
        
        height: 47px;
    }

    .wizard-nav-button.wizard-prev-button
    {
        position: absolute;
        bottom: 0;
        left: 0;
        min-width: 30px;
        border-radius: 0;
        height: 47px;
        border: 0;
        background: #d3d2d294;
    }
    .wizard-summary-items-horizontal{
        padding: 0;
        min-width: 100%;
        padding-top: 5px;
    }
    .wizard-nav-button.wizard-prev-button span{
        display: none;
    }

   .wizard-next-button {
        right: 0;
        float: right;
        position: absolute;
        bottom: 0;
        border-radius: 0;
        width: 100px;
    }

    .wizard-item-actions{
        z-index: 99;
        top: 0;
    }
    .wizard-item-name{
        overflow: visible;
        white-space: normal;
        line-height: 1.3;
        word-break: break-word;
    }
    .wizard-summary-items-horizontal {
        overflow: auto;
    }
    
    .wizard-products-grid {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: var(--wizard-space-3);
    }
    
    .wizard-card-content {
        padding: var(--wizard-space-3);
    }
    
    .wizard-card-title {
        font-size: 0.875rem;
    }
    
    .wizard-card-price {
        font-size: 1rem;
    }
    
    .wizard-category-tabs {
        overflow-x: auto;
        justify-content: flex-start;
        padding: var(--wizard-space-2) 0;
    }
    
    .wizard-category-tab {
        flex-shrink: 0;
        padding: var(--wizard-space-2) var(--wizard-space-3);
        font-size: 0.75rem;
    }
    
    .wizard-counter-card {
        gap: var(--wizard-space-2);
        text-align: center;
        padding: var(--wizard-space-3) var(--wizard-space-4);
    }
    
    .wizard-counter-number {
        font-size: 1.25rem;
        min-width: 2rem;
    }
    
    .wizard-counter-max {
        font-size: 1rem;
    }
    
    .wizard-counter-label {
        font-size: 0.75rem;
    }
    
    .wizard-final-review {
        grid-template-columns: 1fr;
        gap: var(--wizard-space-6);
    }
}

@media (max-width: 480px) {
    .wizard-step-indicator {
        min-width: 80px;
    }
    
    .wizard-step-marker {
        width: 2.25rem;
        height: 2.25rem;
    }
    
    .wizard-box-info h4{
    font-size: .9rem;
}
.wizard-product-info h5{
    font-size: .85rem;
}
.wizard-products-review {
 grid-template-columns: 1fr;
 gap: 2rem;
}

    .wizard-step-number,
    .wizard-step-icon {
        font-size: 0.75rem;
    }
    
    .wizard-step-title {
        font-size: 0.6rem;
    }
    
    .wizard-main-title {
        font-size: 1.25rem;
    }
    
    .wizard-products-grid {
        grid-template-columns: 1fr;
    }
    
    .wizard-search-input {
        font-size: 0.875rem;
        padding: var(--wizard-space-2) var(--wizard-space-2) var(--wizard-space-2) 2.5rem;
    }
    
    .wizard-search-icon {
        left: 0.75rem;
        font-size: 0.875rem;
    }
    
    .wizard-summary-item-horizontal {
        min-width: 150px;
    }
    
    .wizard-summary-item-horizontal img {
        width: 2rem;
        height: 2rem;
    }
    
    .wizard-item-name {
        font-size: 0.65rem;
    }
    
    .wizard-item-price {
        font-size: 0.65rem;
    }
}

.s-icon.wizard-gift {
        display: block;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M5.2 4C4.562 3.567 4 2.93 4 2c0-.608.192-1.12.539-1.47a1.75 1.75 0 0 1 1.27-.527c.937 0 1.87.678 2.17 1.88l.015.06l.015-.06c.3-1.2 1.24-1.88 2.17-1.88c.466 0 .928.17 1.27.527c.347.359.539.867.539 1.47c0 .926-.558 1.57-1.2 2h1.8c.84 0 1.26 0 1.58.163c.282.144.512.373.656.656c.164.321.164.741.164 1.58v.2c0 .84 0 1.26-.164 1.58a1.5 1.5 0 0 1-.656.656a1 1 0 0 1-.181.072v4.69c0 .84 0 1.26-.164 1.58a1.5 1.5 0 0 1-.656.656c-.321.164-.741.164-1.58.164h-7.2c-.84 0-1.26 0-1.58-.164a1.5 1.5 0 0 1-.656-.656c-.163-.32-.163-.74-.163-1.58v-4.69a1 1 0 0 1-.181-.072a1.5 1.5 0 0 1-.656-.656c-.163-.321-.163-.741-.163-1.58v-.2c0-.84 0-1.26.163-1.58c.144-.282.373-.512.656-.656C2.127 4 2.547 4 3.387 4h1.8zm5.55-2.78c.137.142.258.385.258.779c0 .666-.586 1.17-1.45 1.54a7 7 0 0 1-.959.322c.069-.372.188-.93.391-1.74c.199-.798.765-1.12 1.2-1.12c.222 0 .415.079.554.223zM7.01 5h-3.6c-.437 0-.704 0-.904.017a1.3 1.3 0 0 0-.216.034l-.007.003a.5.5 0 0 0-.218.22l-.004.007l-.009.032a1 1 0 0 0-.025.184c-.016.2-.017.467-.017.904v.2c0 .437 0 .704.017.904a1.3 1.3 0 0 0 .034.216l.004.007a.5.5 0 0 0 .225.222l.032.009c.034.008.09.017.184.025c.2.016.467.017.904.017h3.6zm2 0v3h3.6c.436 0 .704 0 .904-.017a1.3 1.3 0 0 0 .216-.034l.007-.003a.5.5 0 0 0 .218-.218l.004-.008l.009-.032a1 1 0 0 0 .025-.184c.016-.2.017-.467.017-.904v-.2c0-.437 0-.704-.017-.904a1.3 1.3 0 0 0-.034-.216l-.004-.007a.5.5 0 0 0-.218-.22l-.004-.001l-.003-.002l-.032-.009a1 1 0 0 0-.184-.025C13.314 5 13.047 5 12.61 5zm-2 4h-4v4.6c0 .436 0 .704.017.904a1.3 1.3 0 0 0 .034.216l.003.007a.5.5 0 0 0 .226.222l.032.009c.034.008.09.017.184.025c.2.016.467.017.904.017h2.6zm2 6h2.6c.436 0 .704 0 .904-.017a1.3 1.3 0 0 0 .216-.034l.007-.003a.5.5 0 0 0 .218-.218l.004-.008l.009-.032a1 1 0 0 0 .025-.184c.016-.2.017-.467.017-.904V9h-4zm-4-13c0-.394.121-.637.258-.779a.75.75 0 0 1 .554-.223c.438 0 1 .325 1.2 1.12c.203.814.322 1.37.391 1.74a7 7 0 0 1-.959-.322c-.861-.368-1.45-.875-1.45-1.54z' clip-rule='evenodd'/%3E%3C/svg%3E");
}
.wizard-completed .s-icon.wizard-gift{
            display: block;
      --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Cpath fill='%23000' d='M25.926 28.539V16.117h-3.492c-3.868 0-5.907-2.508-5.907-4.945c0-2.531 1.875-4.031 4.383-4.031c2.883 0 5.133 2.226 5.133 5.953v3.023h3.914v-3.023c0-3.727 2.25-5.953 5.133-5.953c2.508 0 4.406 1.5 4.406 4.03c0 2.438-2.11 4.946-5.93 4.946h-3.492V28.54h16.524c2.554 0 3.937-.984 3.937-3.492V19.61c0-2.484-1.383-3.492-3.937-3.492h-5.461c1.453-1.312 2.32-3.094 2.32-5.11c0-4.523-3.586-7.78-8.133-7.78c-3.375 0-6.117 1.874-7.312 5.203c-1.196-3.328-3.961-5.203-7.336-5.203c-4.524 0-8.133 3.257-8.133 7.78c0 2.016.844 3.798 2.32 5.11h-5.46c-2.415 0-3.938 1.008-3.938 3.492v5.438c0 2.508 1.406 3.492 3.937 3.492Zm0 24.234V31.047H8.816V46.82c0 3.914 2.297 5.953 6.211 5.953Zm4.148-21.726v21.726h10.899c3.914 0 6.21-2.039 6.21-5.953V31.047Z'/%3E%3C/svg%3E");
}
.s-icon.wizard-heart {
            display: block;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd' clip-rule='evenodd'%3E%3Cpath d='M4.196 12.197a5.228 5.228 0 1 1 7.394-7.394l.41.41l.41-.409a5.228 5.228 0 0 1 7.395 7.394L12 20.001z'/%3E%3Cpath stroke='%23000' stroke-linecap='square' stroke-width='2' d='M4.196 12.197a5.228 5.228 0 1 1 7.394-7.394l.41.41l.41-.409a5.228 5.228 0 0 1 7.395 7.394L12 20.001z'/%3E%3C/g%3E%3C/svg%3E");
}
.wizard-completed .s-icon.wizard-heart{
            display: block;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12.002 4.818a6.228 6.228 0 0 1 8.51 9.087l-5.225 5.225L12 22.415l-7.28-7.279l-1.23-1.232a6.228 6.228 0 0 1 8.511-9.086'/%3E%3C/svg%3E");
}
.wizard-horizontal-summary, .wizard-navigation-section {
    display: none; 
}
.wizard-product-added {
    animation: productAddedBounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes productAddedBounce {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}


@media (min-width: 720px) {
.wizard-step-number {
    position: relative;
    top: 4px;
}
.wizard-step-icon {
    width: 28px;
    height: 28px;
}
}
.wizard-nav-button {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.wizard-nav-button:hover:not(:disabled) {
    transform: scale(1.05);
}

.wizard-nav-button:active {
    transform: scale(0.95);
}

.wizard-primary-button,
.wizard-secondary-button,
.wizard-success-button {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.wizard-primary-button:hover:not(:disabled),
.wizard-secondary-button:hover:not(:disabled),
.wizard-success-button:hover:not(:disabled) {
    transform: scale(1.02);
}

.wizard-primary-button:active,
.wizard-secondary-button:active,
.wizard-success-button:active {
    transform: scale(0.98);
}
.wizard-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--wizard-space-12) var(--wizard-space-6);
    background: rgba(255, 255, 255, 0.8);
    border-radius: var(--wizard-radius-xl);
    border: 2px dashed var(--wizard-gray-300);
}

.wizard-empty-icon {
    font-size: 4rem;
    color: var(--wizard-gray-400);
    margin-bottom: var(--wizard-space-4);
}

.wizard-empty-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--wizard-gray-700);
    margin-bottom: var(--wizard-space-2);
}

.wizard-empty-message {
    font-size: 1rem;
    color: var(--wizard-gray-600);
    margin-bottom: var(--wizard-space-6);
}

.wizard-empty-button {
    background: var(--wizard-primary);
    color: white;
    border: none;
    padding: var(--wizard-space-3) var(--wizard-space-6);
    border-radius: var(--wizard-radius-lg);
    font-weight: 600;
    cursor: pointer;
    transition: var(--wizard-transition-fast);
    display: inline-flex;
    align-items: center;
    gap: var(--wizard-space-2);
}

.wizard-empty-button:hover {
    background: var(--wizard-primary-hover);
    transform: translateY(-1px);
}
.wizard-options-button {
    width: 100%;
    margin-top: var(--wizard-space-2);
    padding: var(--wizard-space-2) var(--wizard-space-4);
    background: var(--wizard-info);
    color: white;
    border: none;
    border-radius: var(--wizard-radius-md);
    font-weight: 600;
    font-size: 0.75rem;
    cursor: pointer;
    transition: var(--wizard-transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--wizard-space-2);
}

.wizard-options-button:hover {
    background: #0891b2;
    transform: translateY(-1px);
}

.wizard-options-preview {
    background: var(--wizard-gray-50);
    border: 1px solid var(--wizard-gray-200);
    border-radius: var(--wizard-radius-lg);
    padding: var(--wizard-space-4);
    margin-bottom: var(--wizard-space-6);
    display: flex;
    align-items: center;
    gap: var(--wizard-space-4);
}

.wizard-options-image {
    width: 4rem;
    height: 4rem;
    object-fit: cover;
    border-radius: var(--wizard-radius-md);
}

.wizard-options-product-name {
    font-weight: 700;
    color: var(--wizard-gray-900);
    margin: 0 0 var(--wizard-space-1) 0;
}

.wizard-options-base-price {
    font-weight: 600;
    color: var(--wizard-primary);
}

.wizard-options-groups {
    margin-bottom: var(--wizard-space-6);
}

.wizard-option-group {
    margin-bottom: var(--wizard-space-6);
}

.wizard-option-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--wizard-gray-900);
    margin-bottom: var(--wizard-space-3);
    padding-bottom: var(--wizard-space-2);
    border-bottom: 2px solid var(--wizard-primary);
}

.wizard-options-item {
    border: 2px solid var(--wizard-gray-200);
    border-radius: var(--wizard-radius-lg);
    padding: var(--wizard-space-3);
    margin-bottom: var(--wizard-space-2);
    cursor: pointer;
    transition: var(--wizard-transition-fast);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    position: relative;
}

.wizard-options-item:hover {
    border-color: var(--wizard-primary);
    transform: translateY(-1px);
    box-shadow: var(--wizard-shadow-sm);
}

.wizard-options-item.selected {
    border-color: var(--wizard-primary);
    background: rgba(79, 70, 229, 0.05);
}

.wizard-options-item.selected::after {
    content: '✓';
    position: absolute;
    right: var(--wizard-space-3);
    top: 50%;
    transform: translateY(-50%);
    background: var(--wizard-primary);
    color: white;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
}

.wizard-options-name {
    font-weight: 600;
    color: var(--wizard-gray-900);
}

.wizard-options-price {
    font-weight: 700;
    color: var(--wizard-success);
}

.wizard-options-total {
    text-align: center;
    padding: var(--wizard-space-4);
    background: var(--wizard-gray-50);
    border-radius: var(--wizard-radius-lg);
    font-size: 1.125rem;
}

.wizard-options-total-price {
    color: var(--wizard-primary);
    font-size: 1.25rem;
}
.wizard-option-input {
    width: 100%;
    padding: var(--wizard-space-2);
    border: 1px solid var(--wizard-gray-300);
    border-radius: var(--wizard-radius-md);
    font-size: 0.875rem;
}

.wizard-option-select {
    width: 100%;
    padding: var(--wizard-space-2);
    border: 1px solid var(--wizard-gray-300);
    border-radius: var(--wizard-radius-md);
    font-size: 0.875rem;
    background: white;
}

.wizard-option-textarea {
    width: 100%;
    padding: var(--wizard-space-2);
    border: 1px solid var(--wizard-gray-300);
    border-radius: var(--wizard-radius-md);
    font-size: 0.875rem;
    min-height: 80px;
    resize: vertical;
}

.wizard-quantity-controls-inline {
    display: flex;
    align-items: center;
    gap: var(--wizard-space-2);
    margin-top: var(--wizard-space-2);
}

.wizard-option-image {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    margin-right: 10px;
    object-fit: contain;
}

.wizard-quantity-controls-inline .wizard-qty-button {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.65rem;
}

.wizard-quantity-controls-inline .wizard-qty-input {
    width: 2.5rem;
    font-size: 0.75rem;
    padding: var(--wizard-space-1);
}
.wizard-options-groups {
    max-height: 60vh;
    overflow-y: auto;
    padding-right: var(--wizard-space-2);
}

.wizard-option-group {
    margin-bottom: var(--wizard-space-6);
    padding: var(--wizard-space-4);
    background: var(--wizard-gray-50);
    border-radius: var(--wizard-radius-lg);
    border: 1px solid var(--wizard-gray-200);
}

.wizard-option-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--wizard-gray-900);
    margin-bottom: var(--wizard-space-4);
    padding-bottom: var(--wizard-space-2);
    border-bottom: 2px solid var(--wizard-primary);
    display: flex;
    align-items: center;
    gap: var(--wizard-space-2);
}

.wizard-option-item.radio-container {
    margin-bottom: var(--wizard-space-3);
}

.wizard-option-radio {
    display: none;
}

.wizard-option-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--wizard-space-3);
    background: white;
    border: 2px solid var(--wizard-gray-200);
    border-radius: var(--wizard-radius-lg);
    cursor: pointer;
    transition: var(--wizard-transition-fast);
    position: relative;
}

.wizard-option-label::before {
    content: '';
    position: absolute;
    left: var(--wizard-space-3);
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border: 2px solid var(--wizard-gray-300);
    border-radius: 50%;
    background: white;
    transition: var(--wizard-transition-fast);
}

.wizard-option-label::after {
    content: '';
    position: absolute;
    left: calc(var(--wizard-space-3) + 5px);
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: var(--wizard-primary);
    border-radius: 50%;
    opacity: 0;
    transition: var(--wizard-transition-fast);
}

.wizard-option-radio:checked + .wizard-option-label {
    border-color: var(--wizard-primary);
    background: rgba(79, 70, 229, 0.05);
}

.wizard-option-radio:checked + .wizard-option-label::before {
    border-color: var(--wizard-primary);
}

.wizard-option-radio:checked + .wizard-option-label::after {
    opacity: 1;
}

.wizard-option-label:hover {
    border-color: var(--wizard-primary);
    transform: translateY(-1px);
    box-shadow: var(--wizard-shadow-sm);
}

.wizard-option-label .wizard-option-name {
    font-weight: 600;
    color: var(--wizard-gray-900);
    margin-left: var(--wizard-space-6);
}

.wizard-option-label .wizard-option-price {
    font-weight: 700;
    color: var(--wizard-success);
}
.wizard-option-select {
    width: 100%;
    padding: var(--wizard-space-3);
    border: 2px solid var(--wizard-gray-200);
    border-radius: var(--wizard-radius-lg);
    font-size: 0.875rem;
    background: white;
    transition: var(--wizard-transition-fast);
}

.wizard-option-select:focus {
    outline: none;
    border-color: var(--wizard-primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

/* Input fields styling */
.wizard-option-input,
.wizard-option-textarea {
    width: 100%;
    padding: var(--wizard-space-3);
    border: 2px solid var(--wizard-gray-200);
    border-radius: var(--wizard-radius-lg);
    font-size: 0.875rem;
    background: white;
    transition: var(--wizard-transition-fast);
}

.wizard-option-input:focus,
.wizard-option-textarea:focus {
    outline: none;
    border-color: var(--wizard-primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.wizard-option-textarea {
    min-height: 100px;
    resize: vertical;
}

/* Quantity options styling */
.wizard-option-item.quantity-option {
    background: white;
    border: 2px solid var(--wizard-gray-200);
    border-radius: var(--wizard-radius-lg);
    padding: var(--wizard-space-4);
    margin-bottom: var(--wizard-space-3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: var(--wizard-transition-fast);
}

.wizard-option-item.quantity-option:hover {
    border-color: var(--wizard-primary);
    box-shadow: var(--wizard-shadow-sm);
}

.wizard-option-info {
    flex: 1;
}

.wizard-quantity-controls-inline {
    display: flex;
    align-items: center;
    gap: var(--wizard-space-2);
    background: var(--wizard-gray-50);
    border-radius: var(--wizard-radius-md);
    padding: var(--wizard-space-2);
}

.wizard-quantity-controls-inline .wizard-qty-button {
    width: 2rem;
    height: 2rem;
    font-size: 0.75rem;
    border: 1px solid var(--wizard-gray-300);
}

.wizard-quantity-controls-inline .wizard-qty-input {
    width: 3rem;
    font-size: 0.875rem;
    padding: var(--wizard-space-1);
    text-align: center;
    border: 1px solid var(--wizard-gray-300);
}
.wizard-summary-item-horizontal {
    position: relative;
    padding-right: var(--wizard-space-8);
}

.wizard-item-actions {
  position: absolute;
    right: var(--wizard-space-2);
    top: -5px;
    right: -8px;
    display: flex;
        gap: var(--wizard-space-1);
}

.wizard-item-edit-btn,
.wizard-item-remove-btn {
    width: 1.25rem;
    height: 1.25rem;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--wizard-transition-fast);
    font-size: 0.65rem;
}

.wizard-item-edit-btn {
    background: var(--wizard-info);
    color: white;
}

.wizard-item-edit-btn:hover {
    background: #0891b2;
    transform: scale(1.1);
}

.wizard-item-remove-btn {
    background: var(--wizard-error);
    color: white;
}

.wizard-item-remove-btn:hover {
    background: #dc2626;
    transform: scale(1.1);
}

/* Migliore styling per radio buttons */
.wizard-radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--wizard-space-2);
}

.wizard-option-label .wizard-option-name {
    margin-left: var(--wizard-space-8);
}
.wizard-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: var(--wizard-space-2);
}

.wizard-option-checkbox {
    display: none;
}

.wizard-checkbox-container .wizard-option-label::before {
    border-radius: var(--wizard-radius-sm); /* Quadrato invece di rotondo */
}

.wizard-checkbox-container .wizard-option-label::after {
    content: '✓';
    left: calc(var(--wizard-space-3) + 3px);
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: transparent;
    color: white;
    font-size: 0.75rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wizard-option-checkbox:checked + .wizard-option-label::before {
    background: var(--wizard-primary);
    border-color: var(--wizard-primary);
}

.wizard-option-checkbox:checked + .wizard-option-label::after {
    opacity: 1;
}