:root {
    --dubacris-navy: #1E3A8A;
    --dubacris-blue: #3B82F6;
    --dubacris-light-blue: #DBEAFE;
    --dubacris-lavender: #E0E7FF;
    --dubacris-accent: #4F46E5;
    --dubacris-bg: #F1F5F9;
    --dubacris-panel-bg: #FFFFFF;
    --dubacris-text-main: #1F2937;
    --dubacris-text-muted: #6B7280;
    --dubacris-border: #E5E7EB;
    --dubacris-radius-lg: 30px;
    --dubacris-radius-md: 16px;
    --dubacris-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    
    --font-serif: 'Playfair Display', serif;
    --font-sans: 'Inter', sans-serif;
}

.dubacris-wrapper {
    max-width: 1440px;
    margin: 0 auto;
    font-family: var(--font-sans);
    color: var(--dubacris-text-main);
    background: var(--dubacris-bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Force theme container expansion if present */
.qodef-container-inner:has(.dubacris-wrapper),
.container-inner:has(.dubacris-wrapper),
.elementor-container:has(.dubacris-wrapper) {
    width: 1440px !important;
    max-width: 95% !important;
}

/* Global Header */
.dubacris-global-header {
    padding: 1.5rem 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: transparent;
}

.dubacris-logo {
    font-size: 2rem;
    font-weight: 800;
    color: var(--dubacris-navy);
    letter-spacing: -1px;
    border-bottom: 3px solid #6366F1;
    line-height: 1;
}

/* Top Navigation / Breadcrumbs */
.dubacris-top-nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: #fff;
    padding: 1rem 2rem;
    border-radius: 99px;
    box-shadow: var(--dubacris-shadow);
}

.dubacris-nav-item {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--dubacris-text-muted);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dubacris-nav-item.active {
    color: var(--dubacris-navy);
}

.dubacris-nav-item.clickable {
    cursor: pointer;
}

.dubacris-nav-item.clickable:hover {
    color: var(--dubacris-blue);
    text-decoration: underline;
}

.dubacris-nav-sep {
    color: #CBD5E1;
}

/* Main Split Layout */
.dubacris-main-content {
    display: flex;
    flex: 1;
    padding: 1rem 3rem 3rem;
    gap: 2rem;
}

/* Left Column: Preview */
.dubacris-preview-column {
    flex: 1.4;
    position: relative;
    background: #fff;
    border-radius: var(--dubacris-radius-lg);
    overflow: hidden;
    box-shadow: var(--dubacris-shadow);
    display: flex;
    flex-direction: column;
}

.dubacris-preview-img-wrap {
    flex: 1;
    position: relative;
    background: #F8FAFC;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dubacris-preview-img-wrap img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.dubacris-interactive-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.2);
    backdrop-filter: blur(8px);
    color: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: 99px;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.dubacris-model-tag {
    position: absolute;
    bottom: 2rem;
    left: 2rem;
    background: #fff;
    padding: 1rem 2rem;
    border-radius: var(--dubacris-radius-md);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.dubacris-model-tag label {
    display: block;
    font-size: 0.7rem;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.25rem;
}

.dubacris-model-tag span {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--dubacris-navy);
}

/* Right Column: Setup */
.dubacris-setup-column {
    flex: 1;
    background: #fff;
    border-radius: var(--dubacris-radius-lg);
    box-shadow: var(--dubacris-shadow);
    display: flex;
    flex-direction: column;
    padding: 2.5rem;
}

.dubacris-step-header {
    margin-bottom: 2.5rem;
}

.dubacris-step-badge {
    background: var(--dubacris-lavender);
    color: var(--dubacris-accent);
    padding: 0.25rem 0.75rem;
    border-radius: 99px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
    display: inline-block;
}

.dubacris-step-header h2 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--dubacris-navy);
    margin: 0;
}

/* Numbered Steps List */
.dubacris-steps-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    flex: 1;
}

.dubacris-config-step {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.dubacris-step-title {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--dubacris-text-main);
}

.dubacris-step-num {
    width: 28px;
    height: 28px;
    background: var(--dubacris-navy);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

/* Inputs & Cards */
.dubacris-model-confirm-card {
    background: #F8FAFC;
    border-radius: var(--dubacris-radius-md);
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.dubacris-model-icon {
    width: 60px;
    height: 60px;
    background: #fff;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dubacris-navy);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.dubacris-model-info strong {
    font-size: 1.1rem;
    color: var(--dubacris-navy);
}

.dubacris-model-info small {
    color: var(--dubacris-text-muted);
}

/* Premium Options Grid */
.dubacris-option-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
}

.dubacris-card.premium-style {
    border: 1px solid var(--dubacris-border);
    border-radius: var(--dubacris-radius-md);
    padding: 2rem 1rem;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.dubacris-card.premium-style:hover {
    border-color: var(--dubacris-blue);
    background: var(--dubacris-light-blue);
}

.dubacris-card.premium-style.selected {
    border-color: var(--dubacris-navy);
    background: var(--dubacris-lavender);
    box-shadow: 0 0 0 1px var(--dubacris-navy);
}

.dubacris-option-grid.mini {
    margin-top: 0.5rem;
}

.dubacris-select-wrap select {
    width: 100%;
    padding: 1rem 1.5rem;
    border-radius: var(--dubacris-radius-md);
    border: 1px solid var(--dubacris-border);
    font-size: 1rem;
    appearance: none;
    background: #F8FAFC url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") no-repeat right 1.5rem center / 1.5rem;
    color: var(--dubacris-navy);
    font-weight: 600;
}

.dubacris-stepper-wrap {
    display: flex;
    align-items: center;
    border: 1px solid var(--dubacris-border);
    border-radius: var(--dubacris-radius-md);
    overflow: hidden;
}

.dubacris-stepper-label {
    flex: 1;
    padding: 1rem 1.5rem;
    color: var(--dubacris-text-muted);
}

.dubacris-stepper-controls {
    display: flex;
    align-items: center;
    padding-right: 1rem;
    gap: 1rem;
}

.dubacris-step-val {
    font-weight: 700;
    color: var(--dubacris-navy);
    font-size: 1.1rem;
    min-width: 60px;
    text-align: center;
}

.dubacris-circle-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #F1F5F9;
    color: var(--dubacris-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.dubacris-circle-btn.primary {
    background: var(--dubacris-navy);
    color: #fff;
}

/* Final Summary & Button */
.dubacris-summary-footer {
    margin-top: 2rem;
    border-top: 1px solid var(--dubacris-border);
    padding-top: 2rem;
}

.dubacris-price-details {
    margin-bottom: 2rem;
}

.dubacris-detail-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: var(--dubacris-text-muted);
}

.dubacris-detail-row.total {
    margin-top: 1rem;
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--dubacris-navy);
}

.dubacris-submit-btn:hover {
    background: #111827;
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Step Navigation Buttons */
.dubacris-btn {
    padding: 0.75rem 1.5rem;
    border-radius: var(--dubacris-radius-md);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
}

.dubacris-btn.primary {
    background: var(--dubacris-navy);
    color: #fff;
}

.dubacris-btn.primary:hover {
    background: #1e3a8a;
    transform: translateY(-1px);
}

.dubacris-btn.secondary {
    background: #fff;
    border-color: var(--dubacris-border);
    color: var(--dubacris-text-muted);
}

.dubacris-btn.secondary:hover {
    background: #F8FAFC;
    border-color: var(--dubacris-navy);
    color: var(--dubacris-navy);
}

@media (max-width: 1024px) {
    .dubacris-main-content {
        flex-direction: column;
        padding: 1rem;
    }
}