/**
 * Event Type Wizard CSS
 * Clean, minimal styling for the wizard interface
 * Phase 1 Implementation
 *
 * ISOLATION: All styles are scoped to .eventtype-wizard
 * This ensures styles only apply to the eventtype wizard
 * and don't affect other parts of the dashboard
 */

/* ========================================
   WIZARD CONTAINER (Scoped to .eventtype-wizard)
   ======================================== */

.eventtype-wizard.eventtype-wizard-content {
    display: none;
    padding: 2rem 0;
    position: relative;
    z-index: 1;
}

/* Only show wizard when parent eventtype section is visible */
#eventtype-section:not(.active) .eventtype-wizard,
#eventtype-section:not(.active) .eventtype-wizard .wizard-navigation {
    display: none !important;
    visibility: hidden !important;
}

.eventtype-wizard .wizard-container {
    max-width: 800px;
    margin: 0 auto;
    display: block;
}

.eventtype-wizard .wizard-container.wizard-fullscreen {
    max-width: 900px;
    margin: 0 auto;
}

/* ========================================
   PROGRESS BAR & STEP INDICATORS
   (Matching booking wizard pattern)
   ======================================== */

.eventtype-wizard .wizard-progress {
    background: transparent;
    border: none;
    padding: 0 0 0.5rem 0;
    position: relative;
}

/* Progress bar positioned at center of step circles (28px height, so 14px from top) */
.eventtype-wizard .wizard-progress-bar {
    position: absolute;
    top: 14px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--color-border);
    border-radius: 1px;
    overflow: hidden;
    transform: translateY(-50%);
}

.eventtype-wizard .wizard-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #000000 0%, #0860ca 100%);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.eventtype-wizard .wizard-steps-indicator {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    position: relative;
}

.eventtype-wizard .wizard-step-indicator {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

/* Remove connecting lines - using progress bar instead */
.eventtype-wizard .wizard-step-indicator:not(:last-child)::after {
    display: none !important;
}

.eventtype-wizard .wizard-step-indicator:hover:not(.active) .step-circle {
    background: var(--color-surface-subtle);
}

.eventtype-wizard .step-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary);
    transition: all 0.2s ease;
    z-index: 1;
}

/* Checkmark styling */
.eventtype-wizard .step-circle .fa-check {
    color: inherit;
}

.eventtype-wizard .wizard-step-indicator.active .step-circle {
    background: #1f2328;
    border-color: var(--color-text-primary);
    color: white;
    box-shadow: 0 0 0 4px rgba(31, 35, 40, 0.1);
}

.eventtype-wizard .wizard-step-indicator.completed .step-circle {
    background: #cccccc;
    border-color: #000000;
    color: white;
}

.eventtype-wizard .wizard-step-indicator.past .step-circle {
    border-color: #000000;
    color: #cccccc;
}

.eventtype-wizard .step-label {
    font-size: 11px;
    color: var(--color-text-secondary);
    text-align: center;
    font-weight: 500;
    white-space: nowrap;
}

.eventtype-wizard .wizard-step-indicator.active .step-label {
    color: #000000;
    font-weight: 600;
}

.eventtype-wizard .wizard-step-indicator.completed .step-label,
.eventtype-wizard .wizard-step-indicator.past .step-label {
    color: #cccccc;
}

.eventtype-wizard .optional-badge {
    font-size: 10px;
    color: var(--color-text-secondary);
    background: var(--color-surface-subtle);
    padding: 2px 6px;
    border-radius: 4px;
    margin-top: 2px;
}

/* ========================================
   STEP CONTENT
   (Matching booking wizard pattern)
   ======================================== */

.eventtype-wizard .wizard-step-container {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 1.5rem;
    overflow: visible;
    display: flex;
    flex-direction: column;
    max-height: none;
    min-height: auto;
}

.eventtype-wizard #wizardStepContent {
    flex: 1;
}

.eventtype-wizard .wizard-step,
.eventtype-wizard .wizard-step-body {
    overflow: visible;
}

.eventtype-wizard .wizard-step-header {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.eventtype-wizard .wizard-step-header h2 {
    font-size: 24px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.eventtype-wizard .wizard-step-header h2 i {
    color: #000000;
}

.eventtype-wizard .step-description {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin: 0;
}

/* Wizard Footer with Navigation - INSIDE step container */
.eventtype-wizard .wizard-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 0 0 0;
    margin-top: 2rem;
    border-top: 1px solid var(--color-border);
}

.eventtype-wizard .wizard-footer .wizard-nav-left,
.eventtype-wizard .wizard-footer .wizard-nav-right {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

/* Anthropic-style Wizard Buttons */
.eventtype-wizard .wizard-footer .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    font-size: 14px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid;
}

.eventtype-wizard .wizard-footer .btn-secondary,
.eventtype-wizard .wizard-footer .btn-outline-secondary {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

.eventtype-wizard .wizard-footer .btn-secondary:hover,
.eventtype-wizard .wizard-footer .btn-outline-secondary:hover {
    background: var(--color-surface-subtle);
    border-color: var(--color-text-primary);
}

.eventtype-wizard .wizard-footer .btn-primary {
    background: #24292f;
    border-color: var(--color-text-primary);
    color: white;
}

.eventtype-wizard .wizard-footer .btn-primary:hover {
    background: #32383f;
    border-color: #32383f;
}

.eventtype-wizard .wizard-footer .btn-success {
    background: #1a7f37;
    border-color: #1a7f37;
    color: white;
}

.eventtype-wizard .wizard-footer .btn-success:hover {
    background: #2da44e;
    border-color: #2da44e;
}

.eventtype-wizard .wizard-footer .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.eventtype-wizard .wizard-footer .btn i {
    font-size: 12px;
}

/* ========================================
   FORM ELEMENTS
   ======================================== */

.eventtype-wizard .wizard-step-body {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    flex: 1;
    overflow-y: visible;
}

/* Form row - Bootstrap grid support */
.eventtype-wizard .form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
}

.eventtype-wizard .form-row > .col-4 {
    flex: 0 0 calc(33.333% - 0.67rem);
    max-width: calc(33.333% - 0.67rem);
}

.eventtype-wizard .form-row > .col-6 {
    flex: 0 0 calc(50% - 0.5rem);
    max-width: calc(50% - 0.5rem);
}

.eventtype-wizard .form-row > .form-group:not([class*="col-"]) {
    flex: 1;
    min-width: 0;
}

.eventtype-wizard .form-group {
    margin-bottom: 0.75rem !important;
}

.eventtype-wizard .form-group:last-child {
    margin-bottom: 0 !important;
}

/* Tighter spacing for hr separators */
.eventtype-wizard hr {
    margin: 0.75rem 0 !important;
}

/* ========================================
   PRICING ROW (Step 4 - Compact Layout)
   ======================================== */

.eventtype-wizard .pricing-row {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
}

.eventtype-wizard .pricing-toggle-cell {
    display: flex;
    align-items: center;
}

.eventtype-wizard .pricing-toggle-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    background: var(--color-surface-subtle);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary);
    transition: all 0.2s;
}

.eventtype-wizard .pricing-toggle-label:hover {
    background: #eaeef2;
}

.eventtype-wizard .pricing-toggle-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
}

.eventtype-wizard .pricing-toggle-label input[type="checkbox"]:checked + .pricing-toggle-text {
    color: #1a7f37;
}

.eventtype-wizard .pricing-cell {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 100px;
}

.eventtype-wizard .pricing-cell label {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-secondary);
    margin: 0;
}

.eventtype-wizard .pricing-type-cell {
    min-width: 100px;
}

.eventtype-wizard .pricing-currency-cell {
    min-width: 80px;
}

.eventtype-wizard .pricing-amount-cell {
    min-width: 120px;
}

.eventtype-wizard .label-with-tooltip {
    display: flex;
    align-items: center;
    gap: 4px;
}

.eventtype-wizard .tooltip-icon {
    color: #8b949e;
    font-size: 12px;
    cursor: help;
}

.eventtype-wizard .tooltip-icon:hover {
    color: #0969da;
}

.eventtype-wizard .form-control-sm {
    padding: 0.375rem 0.5rem;
    font-size: 13px;
    height: auto;
}

.eventtype-wizard .input-with-icon-sm {
    display: flex;
    align-items: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    overflow: hidden;
}

.eventtype-wizard .input-with-icon-sm .input-icon {
    padding: 0.375rem 0.5rem;
    background: var(--color-surface-subtle);
    border-right: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: 13px;
    font-weight: 500;
}

.eventtype-wizard .input-with-icon-sm .form-control {
    border: none;
    padding: 0.375rem 0.5rem;
    font-size: 13px;
}

.eventtype-wizard .input-with-icon-sm .form-control:focus {
    outline: none;
    box-shadow: none;
}

@media (max-width: 600px) {
    .eventtype-wizard .pricing-row {
        flex-direction: column;
        align-items: stretch;
    }

    .eventtype-wizard .pricing-cell {
        min-width: 100%;
    }
}

.eventtype-wizard .form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    font-size: 13px;
    color: var(--color-text-primary);
}

/* Label with inline action button */
.eventtype-wizard .label-with-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 20px; /* Match regular label line-height */
}

/* Small square icon button */
.eventtype-wizard .btn-icon-action {
    width: 20px;
    height: 20px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-surface-subtle);
    color: var(--color-text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.eventtype-wizard .btn-icon-action:hover {
    background: #000000;
    border-color: #000000;
    color: white;
}

.eventtype-wizard .btn-icon-action i {
    font-size: 10px;
}

.eventtype-wizard .required-star {
    color: #cf222e;
}

.eventtype-wizard .optional-label {
    color: var(--color-text-secondary);
    font-weight: 400;
}

.eventtype-wizard .form-control {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.2s ease;
}

.eventtype-wizard .form-control:focus {
    outline: none;
    border-color: #000000;
    box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.1);
}

.eventtype-wizard .form-control.is-invalid {
    border-color: #cf222e;
}

.eventtype-wizard .form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(207, 34, 46, 0.1);
}

.eventtype-wizard .invalid-feedback {
    display: none;
    font-size: 12px;
    color: #cf222e;
    margin-top: 0.25rem;
}

.eventtype-wizard .form-text {
    display: block;
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-top: 0.25rem;
}

/* Input with prefix */
.eventtype-wizard .input-with-prefix {
    display: flex;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.eventtype-wizard .input-with-prefix:focus-within {
    border-color: #000000;
    box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.1);
}

.eventtype-wizard .input-prefix {
    background: var(--color-surface-subtle);
    padding: 0.5rem 0.75rem;
    font-size: 13px;
    color: var(--color-text-secondary);
    border-right: 1px solid var(--color-border);
    white-space: nowrap;
}

.eventtype-wizard .input-with-prefix .form-control {
    border: none;
    box-shadow: none !important;
}

/* Duration row - input and quick select side by side on large screens */
.eventtype-wizard .duration-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Duration input */
.eventtype-wizard .duration-input-group {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
}

.eventtype-wizard .duration-input-group .form-control {
    width: 70px;
}

.eventtype-wizard .duration-suffix {
    font-size: 13px;
    color: var(--color-text-secondary);
}

.eventtype-wizard .duration-quick-select {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.eventtype-wizard .duration-btn {
    padding: 0.25rem 0.5rem;
    font-size: 12px;
    min-width: 32px;
}

.eventtype-wizard .duration-btn.active {
    background: #000000;
    color: white;
    border-color: #000000;
}

/* ========================================
   COLOR PICKER CARD (Anthropic Style)
   ======================================== */

.eventtype-wizard .color-picker-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

/* Compact single-row color picker */
.eventtype-wizard .color-picker-card-compact {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
}

.eventtype-wizard .color-picker-compact-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.eventtype-wizard .color-picker-icon {
    font-size: 18px;
    color: #0969da;
    flex-shrink: 0;
}

.eventtype-wizard .color-picker-label-compact {
    flex: 1;
    min-width: 0;
}

.eventtype-wizard .color-picker-label-compact strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 0.125rem;
    line-height: 1.3;
}

.eventtype-wizard .color-picker-label-compact p {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.3;
}

.eventtype-wizard .color-swatch-compact {
    flex-shrink: 0;
}

.eventtype-wizard .color-swatch-compact .color-swatch {
    width: 48px;
    height: 48px;
    border-radius: 6px;
}

.eventtype-wizard .color-value-compact {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 120px;
}

.eventtype-wizard .color-value-label-compact {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.eventtype-wizard .color-value-input-compact {
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 13px;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Consolas', monospace;
    color: var(--color-text-primary);
    background: var(--color-surface-subtle);
    transition: all 0.2s ease;
}

.eventtype-wizard .color-value-input-compact:focus {
    outline: none;
    border-color: #0969da;
    background: var(--color-surface);
    box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.1);
}

.eventtype-wizard .color-value-input-compact:invalid {
    border-color: #cf222e;
}

/* Responsive for compact color picker */
@media (max-width: 768px) {
    .eventtype-wizard .color-picker-compact-row {
        flex-wrap: wrap;
        gap: 0.75rem;
    }
    
    .eventtype-wizard .color-picker-label-compact {
        flex: 1 1 100%;
    }
    
    .eventtype-wizard .color-value-compact {
        flex: 1;
        min-width: 100px;
    }
}

.eventtype-wizard .color-picker-header {
    margin-bottom: 1rem;
}

.eventtype-wizard .color-picker-label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.eventtype-wizard .color-picker-label i {
    font-size: 20px;
    color: #0969da;
    margin-top: 0.125rem;
    flex-shrink: 0;
}

.eventtype-wizard .color-picker-label > div {
    flex: 1;
}

.eventtype-wizard .color-picker-label strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 0.25rem;
}

.eventtype-wizard .color-picker-label p {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.5;
}

.eventtype-wizard .color-picker-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding-top: 0.75rem;
}

.eventtype-wizard .color-swatch-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.eventtype-wizard .color-swatch-label {
    cursor: pointer;
    display: block;
}

.eventtype-wizard .color-swatch {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    border: 2px solid var(--color-border);
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.eventtype-wizard .color-swatch:hover {
    border-color: #0969da;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.eventtype-wizard .color-swatch:hover .color-edit-icon {
    opacity: 1;
}

.eventtype-wizard .color-input-hidden {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.eventtype-wizard .color-edit-icon {
    font-size: 20px;
    color: white;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.eventtype-wizard .color-value-display {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.eventtype-wizard .color-value-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.eventtype-wizard .color-value-input {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 14px;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Consolas', monospace;
    color: var(--color-text-primary);
    background: var(--color-surface-subtle);
    transition: all 0.2s ease;
}

.eventtype-wizard .color-value-input:focus {
    outline: none;
    border-color: #0969da;
    background: var(--color-surface);
    box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.1);
}

.eventtype-wizard .color-value-input:invalid {
    border-color: #cf222e;
}

/* Responsive adjustments for color picker */
@media (max-width: 480px) {
    .eventtype-wizard .color-picker-controls {
        flex-direction: column;
        align-items: stretch;
    }
    
    .eventtype-wizard .color-swatch-wrapper {
        align-self: center;
    }
}

/* Compact status checkboxes */
.eventtype-wizard .status-checkboxes {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    padding-top: 0.25rem;
}

.eventtype-wizard .checkbox-compact {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary);
}

.eventtype-wizard .checkbox-compact:hover {
    color: #000000;
}

.eventtype-wizard .checkbox-compact input[type="checkbox"] {
    cursor: pointer;
    width: 16px;
    height: 16px;
}

/* Legacy full-size checkboxes (kept for backwards compatibility) */
.eventtype-wizard .form-group-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.eventtype-wizard .checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    transition: all 0.2s ease;
}

.eventtype-wizard .checkbox-label:hover {
    background: var(--color-surface-subtle);
}

.eventtype-wizard .checkbox-label input[type="checkbox"] {
    margin-top: 0.15rem;
    cursor: pointer;
}

.eventtype-wizard .checkbox-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.eventtype-wizard .checkbox-text strong {
    font-size: 14px;
    color: var(--color-text-primary);
}

.eventtype-wizard .checkbox-text small {
    font-size: 12px;
    color: var(--color-text-secondary);
}

/* ========================================
   HELP CARDS
   ======================================== */

.eventtype-wizard .wizard-step-help {
    margin-top: 1.5rem;
}

.eventtype-wizard .help-card {
    background: #ddf4ff;
    border: 1px solid #54aeff;
    border-radius: 6px;
    padding: 1rem;
    display: flex;
    gap: 0.75rem;
}

.eventtype-wizard .help-card i {
    color: #000000;
    font-size: 20px;
    flex-shrink: 0;
}

.eventtype-wizard .help-content {
    flex: 1;
}

.eventtype-wizard .help-content strong {
    display: block;
    font-size: 13px;
    color: #000000;
    margin-bottom: 0.25rem;
}

.eventtype-wizard .help-content p {
    font-size: 13px;
    color: #000000;
    margin: 0;
}

/* ========================================
   REVIEW STEP (STEP 6)
   ======================================== */

.eventtype-wizard .review-summary {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.eventtype-wizard .review-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
}

.eventtype-wizard .review-card.completed {
    border-color: #1a7f37;
}

.eventtype-wizard .review-card.placeholder {
    opacity: 0.8;
}

.eventtype-wizard .review-card-header {
    background: var(--color-surface-subtle);
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.eventtype-wizard .review-card-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.eventtype-wizard .review-card-title i {
    color: #000000;
}

.eventtype-wizard .review-card-title h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.eventtype-wizard .completion-badge {
    font-size: 12px;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-weight: 500;
}

.eventtype-wizard .completion-badge.completed {
    background: #dafbe1;
    color: #1a7f37;
}

.eventtype-wizard .completion-badge.incomplete {
    background: #ffebe9;
    color: #cf222e;
}

.eventtype-wizard .completion-badge.default,
.eventtype-wizard .completion-badge.optional {
    background: #ddf4ff;
    color: #000000;
}

.eventtype-wizard .phase-badge {
    font-size: 11px;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    background: var(--color-surface-subtle);
    color: var(--color-text-secondary);
    font-weight: 500;
}

.eventtype-wizard .review-card-body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.eventtype-wizard .review-item {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 1rem;
    font-size: 13px;
}

.eventtype-wizard .review-label {
    color: var(--color-text-secondary);
    font-weight: 500;
}

.eventtype-wizard .review-value {
    color: var(--color-text-primary);
}

.eventtype-wizard .review-value em {
    color: var(--color-text-secondary);
}

.eventtype-wizard .review-value-text {
    line-height: 1.5;
}

.eventtype-wizard .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    margin-right: 0.5rem;
}

.eventtype-wizard .status-badge.active {
    background: #dafbe1;
    color: #1a7f37;
}

.eventtype-wizard .status-badge.inactive {
    background: var(--color-surface-subtle);
    color: var(--color-text-secondary);
}

.eventtype-wizard .status-badge.public {
    background: #ddf4ff;
    color: #000000;
}

.eventtype-wizard .status-badge.private {
    background: var(--color-surface-subtle);
    color: var(--color-text-secondary);
}

.eventtype-wizard .review-note {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-top: 0.5rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.eventtype-wizard .review-note i {
    margin-top: 0.1rem;
}

/* Completion Status */
.eventtype-wizard .completion-status {
    margin-top: 1rem;
}

.eventtype-wizard .completion-status h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.eventtype-wizard .status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.eventtype-wizard .status-badge-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.eventtype-wizard .status-badge-item.completed {
    border-color: #1a7f37;
    background: #f6ffed;
}

.eventtype-wizard .status-badge-item i {
    font-size: 20px;
    margin-top: 0.1rem;
}

.eventtype-wizard .status-badge-item.completed i {
    color: #1a7f37;
}

.eventtype-wizard .status-badge-item.required i,
.eventtype-wizard .status-badge-item.optional i {
    color: var(--color-text-secondary);
}

.eventtype-wizard .status-badge-text {
    flex: 1;
}

.eventtype-wizard .status-badge-text strong {
    display: block;
    font-size: 13px;
    color: var(--color-text-primary);
    margin-bottom: 0.25rem;
}

.eventtype-wizard .status-text {
    font-size: 12px;
    color: var(--color-text-secondary);
}

.eventtype-wizard .phase-label {
    font-size: 10px;
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    background: var(--color-surface-subtle);
    color: var(--color-text-secondary);
    margin-left: 0.5rem;
}

/* Warnings */
.eventtype-wizard .review-warnings {
    margin-top: 1rem;
}

.eventtype-wizard .review-warnings h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.eventtype-wizard .warning-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 0.5rem;
}

.eventtype-wizard .warning-item.warning {
    background: #fff8c5;
    border: 1px solid #bf8700;
    color: #4d2d00;
}

.eventtype-wizard .warning-item.info {
    background: #ddf4ff;
    border: 1px solid #54aeff;
    color: #000000;
}

.eventtype-wizard .warning-item i {
    margin-top: 0.1rem;
    flex-shrink: 0;
}

/* Preview */
.eventtype-wizard .review-preview {
    margin-top: 1.5rem;
}

.eventtype-wizard .review-preview h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.eventtype-wizard .preview-card {
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
}

.eventtype-wizard .booking-preview {
    padding: 2rem;
}

.eventtype-wizard .preview-header h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 0.75rem 0;
}

.eventtype-wizard .preview-meta {
    display: flex;
    gap: 1rem;
    font-size: 13px;
    color: var(--color-text-secondary);
}

.eventtype-wizard .preview-meta span {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.eventtype-wizard .preview-description {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}

.eventtype-wizard .preview-description p {
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0;
}

.eventtype-wizard .preview-description.preview-empty p {
    font-style: italic;
}

.eventtype-wizard .preview-cta {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-border);
    text-align: center;
}

.eventtype-wizard .preview-note {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-top: 0.75rem;
}

/* Review Actions Info */
.eventtype-wizard .review-actions-info {
    margin-top: 1.5rem;
}

.eventtype-wizard .info-card {
    background: #ddf4ff;
    border: 1px solid #54aeff;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    display: flex;
    gap: 0.75rem;
}

.eventtype-wizard .info-card i {
    color: #000000;
    font-size: 20px;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.eventtype-wizard .info-content strong {
    display: block;
    font-size: 14px;
    color: #000000;
    margin-bottom: 0.25rem;
}

.eventtype-wizard .info-content p {
    font-size: 13px;
    color: #000000;
    margin: 0;
}

/* ========================================
   NAVIGATION BAR (Legacy - now using wizard-footer)
   ======================================== */

.eventtype-wizard .wizard-navigation {
    display: none; /* Moved to wizard-footer inside step container */
}

.eventtype-wizard .wizard-navigation-legacy {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    position: sticky;
    bottom: 1rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.eventtype-wizard .wizard-nav-left,
.eventtype-wizard .wizard-nav-right {
    display: flex;
    gap: 0.75rem;
}

/* ========================================
   EMPTY STATE
   ======================================== */

.eventtype-wizard .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 2rem;
    min-height: 300px;
    width: 100%;
    margin: 0 auto;
}

.eventtype-wizard .empty-state i {
    font-size: 4rem;
    color: var(--primary-color, #1E3A5F);
    opacity: 0.6;
    margin-bottom: 1.5rem;
}

.eventtype-wizard .empty-state h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary, #333);
    margin-bottom: 0.75rem;
}

.eventtype-wizard .empty-state p {
    color: var(--text-secondary, #666);
    max-width: 400px;
    margin: 0 auto 1.5rem;
    line-height: 1.6;
}

.eventtype-wizard .empty-state-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    margin-top: 1.5rem;
    width: 100%;
}

/* Ensure event types list centers empty state */
.eventtype-wizard .event-types-list:has(.empty-state) {
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

.eventtype-wizard #eventTypesListContainer:has(.empty-state) {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 768px) {
    .eventtype-wizard .wizard-container {
        max-width: 100%;
        padding: 0 1rem;
    }

    .eventtype-wizard .wizard-step-container {
        padding: 1.5rem 1rem;
        max-height: calc(100vh - 250px);
    }

    .eventtype-wizard .wizard-steps-indicator {
        flex-wrap: wrap;
    }

    .eventtype-wizard .step-label {
        font-size: 10px;
    }

    /* Stack form columns on mobile */
    .eventtype-wizard .form-row > .col-6,
    .eventtype-wizard .form-row > .col-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Step circles already 28px, keep consistent on mobile */
    .eventtype-wizard .step-circle {
        width: 28px;
        height: 28px;
        font-size: 11px;
    }

    /* Adjust progress bar position for mobile */
    .eventtype-wizard .wizard-progress-bar {
        top: 14px;
    }
    
    /* Wizard footer responsive */
    #eventTypeWizardContent .wizard-footer {
        flex-direction: column;
        gap: 1rem;
    }

    #eventTypeWizardContent .wizard-footer .wizard-nav-left,
    #eventTypeWizardContent .wizard-footer .wizard-nav-right {
        width: 100%;
        flex-direction: column;
    }

    #eventTypeWizardContent .wizard-footer .wizard-nav-left button,
    #eventTypeWizardContent .wizard-footer .wizard-nav-right button {
        width: 100%;
    }
    
    .eventtype-wizard .review-item {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
    
    .eventtype-wizard .status-grid {
        grid-template-columns: 1fr;
    }
    
    .eventtype-wizard .empty-state-actions {
        flex-direction: column;
    }
    
    .eventtype-wizard .empty-state-actions button {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .eventtype-wizard .wizard-step-header h2 {
        font-size: 20px;
    }
    
    .eventtype-wizard .duration-quick-select {
        justify-content: space-between;
    }
    
    .eventtype-wizard .duration-btn {
        flex: 1;
        min-width: 0;
    }
}

/* ========================================
   CUSTOM SELECT DROPDOWNS
   ======================================== */

.eventtype-wizard .custom-select-wrapper {
    position: relative;
}

.eventtype-wizard .custom-select {
    position: relative;
    width: 100%;
    cursor: pointer;
    user-select: none;
}

.eventtype-wizard .custom-select-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 14px;
    color: var(--color-text-primary);
    transition: all 0.2s ease;
    position: relative;
}

.eventtype-wizard .custom-select-trigger::after {
    content: '\f078';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    right: 0.75rem;
    color: var(--color-text-secondary);
    transition: transform 0.2s ease;
}

.eventtype-wizard .custom-select.open .custom-select-trigger::after {
    transform: rotate(180deg);
}

.eventtype-wizard .custom-select-trigger i {
    font-size: 14px;
    margin-right: 0.25rem;
}

.eventtype-wizard .custom-select:hover .custom-select-trigger {
    border-color: #000000;
}

.eventtype-wizard .custom-select:focus .custom-select-trigger,
.eventtype-wizard .custom-select.open .custom-select-trigger {
    border-color: #000000;
    box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.1);
    outline: none;
}

.eventtype-wizard .custom-select-options {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
    max-height: 300px;
    overflow-y: auto;
}

.eventtype-wizard .custom-select.open .custom-select-options {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.eventtype-wizard .custom-select-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    font-size: 14px;
    color: var(--color-text-primary);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.eventtype-wizard .custom-select-option:first-child {
    border-radius: 6px 6px 0 0;
}

.eventtype-wizard .custom-select-option:last-child {
    border-radius: 0 0 6px 6px;
}

.eventtype-wizard .custom-select-option:hover {
    background: var(--color-surface-subtle);
}

.eventtype-wizard .custom-select-option:active {
    background: var(--color-border);
}

.eventtype-wizard .custom-select-option i {
    font-size: 14px;
    margin-right: 0.25rem;
}

/* Scrollbar styling for options */
.eventtype-wizard .custom-select-options::-webkit-scrollbar {
    width: 8px;
}

.eventtype-wizard .custom-select-options::-webkit-scrollbar-track {
    background: var(--color-surface-subtle);
    border-radius: 4px;
}

.eventtype-wizard .custom-select-options::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 4px;
}

.eventtype-wizard .custom-select-options::-webkit-scrollbar-thumb:hover {
    background: #656d76;
}

/* ========================================
   UTILITIES
   ======================================== */

.eventtype-wizard .btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 13px;
}

.eventtype-wizard .btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 16px;
}

.eventtype-wizard .btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ========================================
   LOCATION MAP (Leaflet)
   ======================================== */

.eventtype-wizard .location-map-container {
    margin-top: 1rem;
}

.eventtype-wizard .location-map {
    height: 200px;
    width: 100%;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    z-index: 1;
}

.eventtype-wizard .map-hint {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.5rem;
    color: var(--color-text-secondary);
}

.eventtype-wizard .map-hint i {
    color: #0969da;
}

/* ========================================
   SEO FAQ ACCORDION (Step 3 - Booking Page)
   ======================================== */

.eventtype-wizard .seo-faq-accordion {
    margin-top: 1rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-surface-subtle);
}

.eventtype-wizard .seo-faq-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s;
}

.eventtype-wizard .seo-faq-toggle:hover {
    background: #eaeef2;
}

.eventtype-wizard .seo-faq-icon {
    color: #0969da;
    font-size: 16px;
}

.eventtype-wizard .seo-faq-title {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary);
}

.eventtype-wizard .seo-faq-chevron {
    color: var(--color-text-secondary);
    font-size: 12px;
    transition: transform 0.2s ease;
}

.eventtype-wizard .seo-faq-accordion.open .seo-faq-chevron {
    transform: rotate(180deg);
}

.eventtype-wizard .seo-faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.eventtype-wizard .seo-faq-accordion.open .seo-faq-content {
    max-height: 500px;
}

.eventtype-wizard .seo-faq-body {
    padding: 0 16px 16px 16px;
    font-size: 13px;
    color: var(--color-text-primary);
    line-height: 1.5;
}

.eventtype-wizard .seo-faq-body > p:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 1px solid var(--color-border);
    padding-top: 12px;
}

.eventtype-wizard .seo-tip {
    display: flex;
    gap: 12px;
    margin: 12px 0;
    padding: 12px;
    background: var(--color-surface);
    border-radius: 6px;
    border: 1px solid var(--color-border);
}

.eventtype-wizard .seo-tip-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ddf4ff;
    color: #0969da;
    border-radius: 6px;
    font-size: 14px;
    flex-shrink: 0;
}

.eventtype-wizard .seo-tip-content {
    flex: 1;
}

.eventtype-wizard .seo-tip-content strong {
    display: block;
    font-size: 13px;
    color: var(--color-text-primary);
    margin-bottom: 4px;
}

.eventtype-wizard .seo-tip-content p {
    margin: 0;
    font-size: 12px;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.eventtype-wizard .seo-note {
    margin: 16px 0 0 0;
    padding: 10px 12px;
    background: #fff8c5;
    border-radius: 6px;
    font-size: 12px;
    color: #7a6c00;
}

.eventtype-wizard .seo-note i {
    color: #9a6700;
    margin-right: 4px;
}

/* ========================================
   ADVANCED COLOR PICKER (Step 3 - Booking Page)
   ======================================== */

.eventtype-wizard .wizard-color-picker-section {
    background: var(--color-surface);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid var(--color-border);
    margin-bottom: 20px;
}

.eventtype-wizard .wizard-color-picker-title {
    margin: 0 0 4px 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.eventtype-wizard .wizard-color-picker-subtitle {
    margin: 0 0 16px 0;
    font-size: 13px;
    color: var(--color-text-secondary);
}

/* Color Picker Body - Two Column Layout */
.eventtype-wizard .wizard-color-picker-body {
    display: flex;
    gap: 24px;
}

.eventtype-wizard .wizard-color-picker-left {
    flex: 1;
    min-width: 200px;
}

.eventtype-wizard .wizard-color-picker-right {
    flex: 1;
    min-width: 180px;
}

/* Gradient Picker */
.eventtype-wizard .wizard-color-gradient-picker {
    width: 100%;
    height: 150px;
    border-radius: 8px;
    position: relative;
    cursor: crosshair;
    background: linear-gradient(to right, #fff 0%, hsl(217, 100%, 50%) 100%);
    margin-bottom: 12px;
}

.eventtype-wizard .wizard-color-gradient-picker::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 0%, #000 100%);
    border-radius: 8px;
    pointer-events: none;
}

.eventtype-wizard .wizard-color-gradient-cursor {
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(0,0,0,0.4);
    transform: translate(-50%, -50%);
    top: 40%;
    left: 72%;
    z-index: 1;
    pointer-events: none;
}

/* Hue Slider */
.eventtype-wizard .wizard-color-hue-slider {
    margin-bottom: 16px;
}

.eventtype-wizard .wizard-hue-range {
    width: 100%;
    height: 12px;
    border-radius: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(to right,
        hsl(0, 100%, 50%),
        hsl(60, 100%, 50%),
        hsl(120, 100%, 50%),
        hsl(180, 100%, 50%),
        hsl(240, 100%, 50%),
        hsl(300, 100%, 50%),
        hsl(360, 100%, 50%)
    );
    cursor: pointer;
}

.eventtype-wizard .wizard-hue-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-surface);
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    cursor: pointer;
}

.eventtype-wizard .wizard-hue-range::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-surface);
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    cursor: pointer;
}

/* Hex Input */
.eventtype-wizard .wizard-color-hex-input {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 8px 12px;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid var(--color-border);
}

.eventtype-wizard .wizard-hex-label {
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
}

.eventtype-wizard .wizard-hex-hash {
    font-size: 14px;
    color: #9ca3af;
}

.eventtype-wizard .wizard-hex-value {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    text-transform: uppercase;
    width: 70px;
}

.eventtype-wizard .wizard-hex-value:focus {
    outline: none;
}

.eventtype-wizard .wizard-hex-opacity {
    font-size: 12px;
    color: #9ca3af;
}

/* Saved Colors */
.eventtype-wizard .wizard-saved-colors-section {
    margin-top: 8px;
}

.eventtype-wizard .wizard-saved-colors-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.eventtype-wizard .wizard-saved-colors-header span {
    font-size: 12px;
    color: #6b7280;
}

.eventtype-wizard .wizard-add-color-btn {
    font-size: 12px;
    color: #1E3A5F;
    background: none;
    border: none;
    cursor: pointer;
    font-weight: 500;
}

.eventtype-wizard .wizard-add-color-btn:hover {
    text-decoration: underline;
}

.eventtype-wizard .wizard-saved-colors-grid {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.eventtype-wizard .wizard-saved-color {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: transform 0.15s ease;
}

.eventtype-wizard .wizard-saved-color:hover {
    transform: scale(1.15);
}

/* Color Palette Grid */
.eventtype-wizard .wizard-color-palette-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
}

.eventtype-wizard .wizard-palette-color {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    border: 1px solid rgba(0,0,0,0.05);
}

.eventtype-wizard .wizard-palette-color:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    z-index: 1;
}

/* Current Color Preview */
.eventtype-wizard .wizard-current-color-preview {
    margin-top: 16px;
    display: flex;
    justify-content: center;
}

.eventtype-wizard .wizard-color-preview-swatch {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border: 3px solid #fff;
}

/* Responsive - Stack on smaller screens */
@media (max-width: 600px) {
    .eventtype-wizard .wizard-color-picker-body {
        flex-direction: column;
    }

    .eventtype-wizard .wizard-color-palette-grid {
        grid-template-columns: repeat(8, 1fr);
    }
}

/* ========================================
   GLOBAL STYLES (for Edit Form - no wizard scope)
   These styles apply to the event type edit form
   which uses the same components as the wizard
   ======================================== */

/* Section description text */
.eventtype-form .section-description {
    color: var(--color-text-secondary);
    font-size: 13px;
    margin: -0.5rem 0 1rem 0;
}

/* Form row layout */
.eventtype-form .form-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.eventtype-form .form-group.col-6 {
    flex: 1;
    min-width: 0;
}

.eventtype-form .form-group.col-4 {
    flex: 0 0 calc(33.333% - 0.667rem);
    min-width: 0;
}

/* Label with inline action button */
.eventtype-form .label-with-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 20px;
}

/* Small square icon button */
.eventtype-form .btn-icon-action {
    width: 20px;
    height: 20px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-surface-subtle);
    color: var(--color-text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.eventtype-form .btn-icon-action:hover {
    background: #000000;
    border-color: #000000;
    color: white;
}

.eventtype-form .btn-icon-action i {
    font-size: 10px;
}

/* Required star and optional label */
.eventtype-form .required-star {
    color: #cf222e;
}

.eventtype-form .optional-label {
    color: var(--color-text-secondary);
    font-weight: 400;
}

/* Input with prefix (for URL slug) */
.eventtype-form .input-with-prefix {
    display: flex;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.eventtype-form .input-with-prefix:focus-within {
    border-color: #000000;
    box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.1);
}

.eventtype-form .input-prefix {
    background: var(--color-surface-subtle);
    padding: 0.5rem 0.75rem;
    font-size: 13px;
    color: var(--color-text-secondary);
    border-right: 1px solid var(--color-border);
    white-space: nowrap;
}

.eventtype-form .input-with-prefix .form-control {
    border: none;
    box-shadow: none !important;
}

/* Duration row - input and quick select side by side */
.eventtype-form .duration-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.eventtype-form .duration-input-group {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
}

.eventtype-form .duration-input-group .form-control {
    width: 70px;
}

.eventtype-form .duration-suffix {
    font-size: 13px;
    color: var(--color-text-secondary);
}

.eventtype-form .duration-quick-select {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.eventtype-form .duration-btn {
    padding: 0.25rem 0.5rem;
    font-size: 12px;
    min-width: 32px;
}

.eventtype-form .duration-btn.active {
    background: #000000;
    border-color: #000000;
    color: white;
}

/* Compact status checkboxes */
.eventtype-form .status-checkboxes {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    padding-top: 0.25rem;
}

.eventtype-form .checkbox-compact {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary);
}

.eventtype-form .checkbox-compact:hover {
    color: #000000;
}

.eventtype-form .checkbox-compact input[type="checkbox"] {
    cursor: pointer;
    width: 16px;
    height: 16px;
}

/* Responsive - Stack columns on smaller screens */
@media (max-width: 768px) {
    .eventtype-form .form-row {
        flex-direction: column;
    }

    .eventtype-form .form-group.col-6,
    .eventtype-form .form-group.col-4 {
        flex: 1;
    }

    .eventtype-form .duration-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ========================================
   ADDITIONAL FORM STYLES (Edit Form)
   ======================================== */

/* Section titles with icons */
.eventtype-form .form-section h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 0.25rem 0;
}

.eventtype-form .form-section h4 i {
    color: var(--color-text-secondary);
    font-size: 14px;
}

/* Section description */
.eventtype-form .section-description {
    color: var(--color-text-secondary);
    font-size: 13px;
    margin: 0 0 1.5rem 0;
}

/* Optional badge */
.eventtype-form .optional-badge {
    display: inline-block;
    background: var(--color-surface-subtle);
    color: var(--color-text-secondary);
    font-size: 11px;
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    margin-bottom: 1rem;
}

/* Section divider */
.eventtype-form .section-divider {
    margin: 1.5rem 0;
    border: none;
    border-top: 1px solid var(--color-border);
}

/* Subsection title */
.eventtype-form .subsection-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 0.5rem 0;
}

/* Form help text */
.eventtype-form .form-help {
    color: var(--color-text-secondary);
    font-size: 13px;
    margin: 0 0 1rem 0;
}

/* Form group with col-3 */
.eventtype-form .form-group.col-3 {
    flex: 0 0 calc(25% - 0.75rem);
    min-width: 0;
}

/* Align items center for rows */
.eventtype-form .form-row.align-items-center {
    align-items: center;
}

/* Checkbox group vertical */
.eventtype-form .checkbox-group-vertical {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Color picker inline */
.eventtype-form .color-picker-inline {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.eventtype-form .color-picker-inline .color-input {
    width: 50px;
    height: 38px;
    padding: 2px;
    border-radius: 6px;
}

.eventtype-form .color-picker-inline .hex-input {
    flex: 1;
    font-family: monospace;
}

/* Scheduling type selection cards */
.eventtype-form .scheduling-type-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.eventtype-form .scheduling-type-card {
    display: block;
    padding: 1rem;
    border: 2px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--color-surface);
}

.eventtype-form .scheduling-type-card:hover {
    border-color: var(--color-border);
    background: var(--color-surface-subtle);
}

.eventtype-form .scheduling-type-card.selected {
    border-color: #000000;
    background: var(--color-surface-subtle);
}

.eventtype-form .scheduling-type-card .type-card-content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.eventtype-form .scheduling-type-card .type-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.eventtype-form .scheduling-type-card .type-info {
    flex: 1;
    min-width: 0;
}

.eventtype-form .scheduling-type-card .type-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 0.25rem;
}

.eventtype-form .scheduling-type-card .type-subtitle {
    font-size: 12px;
    color: var(--color-text-secondary);
}

/* Weekly schedule styles */
.eventtype-form .weekly-schedule {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.eventtype-form .day-schedule {
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
}

.eventtype-form .day-schedule.disabled {
    background: var(--color-surface-subtle);
}

.eventtype-form .day-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.eventtype-form .day-toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
}

.eventtype-form .day-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary);
}

.eventtype-form .unavailable-label {
    font-size: 12px;
    color: var(--color-text-secondary);
    font-style: italic;
}

.eventtype-form .time-slots {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.eventtype-form .time-slot {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.eventtype-form .time-input {
    width: 100px;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: 13px;
}

.eventtype-form .time-separator {
    color: var(--color-text-secondary);
    font-size: 13px;
}

/* Pricing tiers list */
.eventtype-form .pricing-tiers-list,
.eventtype-form .reminder-emails-list {
    margin-bottom: 1rem;
}

.eventtype-form .no-tiers-message,
.eventtype-form .no-reminders-message,
.eventtype-form .no-fields-message {
    padding: 2rem;
    text-align: center;
    background: var(--color-surface-subtle);
    border: 1px dashed var(--color-border);
    border-radius: 8px;
    color: var(--color-text-secondary);
}

.eventtype-form .no-tiers-message i,
.eventtype-form .no-reminders-message i,
.eventtype-form .no-fields-message i {
    font-size: 24px;
    margin-bottom: 0.5rem;
    display: block;
}

.eventtype-form .no-tiers-message p,
.eventtype-form .no-reminders-message p,
.eventtype-form .no-fields-message p {
    margin: 0;
    font-size: 13px;
}

/* Booking fields list */
.eventtype-form .booking-fields-list {
    margin-bottom: 1rem;
}

.eventtype-form .booking-field-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    margin-bottom: 0.5rem;
    background: var(--color-surface);
}

.eventtype-form .booking-field-item:hover {
    background: var(--color-surface-subtle);
}

.eventtype-form .field-handle {
    color: var(--color-border);
    cursor: grab;
}

.eventtype-form .field-info {
    flex: 1;
    min-width: 0;
}

.eventtype-form .field-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 14px;
}

.eventtype-form .field-label strong {
    color: var(--color-text-primary);
}

.eventtype-form .required-badge {
    font-size: 10px;
    padding: 0.125rem 0.375rem;
    background: #cf222e;
    color: white;
    border-radius: 3px;
    font-weight: 500;
}

.eventtype-form .field-meta {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-top: 0.25rem;
}

.eventtype-form .field-type-badge {
    background: var(--color-surface-subtle);
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
    font-weight: 500;
}

.eventtype-form .field-actions {
    display: flex;
    gap: 0.25rem;
}

/* Reminder email items */
.eventtype-form .reminder-email-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    margin-bottom: 0.5rem;
    background: var(--color-surface);
}

.eventtype-form .reminder-toggle {
    flex-shrink: 0;
}

.eventtype-form .reminder-info {
    flex: 1;
    min-width: 0;
}

.eventtype-form .reminder-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 14px;
}

.eventtype-form .reminder-header strong {
    color: var(--color-text-primary);
}

.eventtype-form .reminder-recipient {
    font-size: 11px;
    padding: 0.125rem 0.375rem;
    background: #ddf4ff;
    color: #0969da;
    border-radius: 3px;
}

.eventtype-form .reminder-subject {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-top: 0.25rem;
}

.eventtype-form .reminder-actions {
    display: flex;
    gap: 0.25rem;
}

/* Pricing tier items */
.eventtype-form .pricing-tier-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    margin-bottom: 0.5rem;
    background: var(--color-surface);
}

.eventtype-form .tier-handle {
    color: var(--color-border);
    cursor: grab;
}

.eventtype-form .tier-info {
    flex: 1;
    min-width: 0;
}

.eventtype-form .tier-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 14px;
}

.eventtype-form .tier-name {
    font-weight: 600;
    color: var(--color-text-primary);
}

.eventtype-form .tier-price {
    font-weight: 600;
    color: #0969da;
}

.eventtype-form .tier-range {
    font-size: 11px;
    padding: 0.125rem 0.375rem;
    background: var(--color-surface-subtle);
    border-radius: 3px;
    color: var(--color-text-secondary);
}

.eventtype-form .tier-description {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-top: 0.25rem;
}

.eventtype-form .tier-actions {
    display: flex;
    gap: 0.25rem;
}

/* Toggle switch */
.eventtype-form .switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
}

.eventtype-form .switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.eventtype-form .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.3s;
    border-radius: 20px;
}

.eventtype-form .slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

.eventtype-form input:checked + .slider {
    background-color: #000000;
}

.eventtype-form input:checked + .slider:before {
    transform: translateX(16px);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .eventtype-form .scheduling-type-options {
        grid-template-columns: 1fr;
    }

    .eventtype-form .form-group.col-3 {
        flex: 1;
    }
}