.onboarding-layout {
    // display: flex;
    .onboarding-steps {
        .anticon {
            color: black;
        }
    }
    .upload-container {
        background: #fafafa;
        border: 2px dashed #d9d9d9;
        border-radius: 8px;
        padding: 24px;
        transition: all 0.3s ease;
        
        &:hover {
            border-color: #1890ff;
            background: #f0f8ff;
        }
        
        .upload-label {
            margin-bottom: 12px;
            
            label {
                font-size: 15px;
                font-weight: 500;
                color: #262626;
            }
        }
        
        .upload-requirements {
            margin-bottom: 16px;
            
            .ant-typography-secondary {
                font-size: 13px;
                line-height: 1.8;
            }
        }
    }
}

.payment-form-container {
    .payment-alert {
        background: #e6f7ff;
        border: 1px solid #91d5ff;
        border-radius: 8px;
        margin-bottom: 32px;
        .anticon {
            color: #1890ff;
        }
        .ant-alert-message {
            font-size: 15px;
            font-weight: 500;
            color: #0050b3;
            line-height: 1.6;
            white-space: break-spaces;
        }
        
        .ant-alert-description {
            font-size: 14px;
            font-weight: 600;
            color: #096dd9;
            margin-top: 8px;
        }
    }
}

// Meet the Owner Form Styling
.owner-form-container {
    // max-width: 900px;
    margin: 0 auto;
    padding: 24px;

    .owner-form-header {
        // text-align: center;
        margin-bottom: 32px;
        
        .owner-form-title {
            color: #1a1a1a;
            font-weight: 600;
            margin-bottom: 8px;
        }
        
        .owner-form-subtitle {
            font-size: 16px;
            color: #666;
            margin-bottom: 0;
        }
    }

    // Info Alert at top
    .owner-info-alert {
        margin-bottom: 32px;
        background: #e6f7ff;
        border: 1px solid #91d5ff;
        border-radius: 8px;
        .anticon {
            color: #1890ff;
        }
        
        .ant-alert-message {
            font-size: 15px;
            font-weight: 500;
            color: #0050b3;
            line-height: 1.6;
            white-space: break-spaces;
        }
        
        .ant-alert-description {
            font-size: 14px;
            font-weight: 600;
            color: #096dd9;
            margin-top: 8px;
        }
    }

    // Section styling
    .owner-section {
        margin-top: 40px;
        margin-bottom: 16px;
        
        .owner-section-title {
            font-size: 20px;
            font-weight: 600;
            color: #262626;
            margin-bottom: 0;
            display: flex;
            align-items: center;
            
            .section-number {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 32px;
                height: 32px;
                background: #1890ff;
                color: white;
                border-radius: 50%;
                font-size: 16px;
                font-weight: 600;
                margin-right: 12px;
            }
        }
    }

    // Photo upload section
    .owner-photo-upload {
        
    }
    

    // Message section
    .owner-message-section {
        .ant-form-item-label > label {
            font-size: 15px;
            font-weight: 500;
        }
        
        .owner-editor {
            min-height: 120px;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
            padding: 8px;
            transition: all 0.3s ease;
            
            &:hover {
                border-color: #40a9ff;
            }
            
            &:focus-within {
                border-color: #1890ff;
                box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
            }
        }
    }

    // Contact preferences
    .owner-contact-field {
        .ant-form-item-label > label {
            font-size: 15px;
            font-weight: 500;
        }
        
        .owner-switch {
            min-width: 60px;
        }
        
        .owner-email-input {
            border-radius: 4px;
            
            &:hover {
                border-color: #40a9ff;
            }
        }
        
        .field-note {
            display: block;
            margin-top: -16px;
            font-size: 12px;
            color: #8c8c8c;
            font-style: italic;
        }
    }

    // Visibility section
    .owner-visibility-section {
        .ant-form-item-label > label {
            font-size: 15px;
            font-weight: 500;
        }
        
        .owner-radio-group {
            .ant-radio-wrapper {
                font-size: 15px;
                margin-right: 24px;
                
                &:hover {
                    .ant-radio-inner {
                        border-color: #1890ff;
                    }
                }
            }
        }
    }

    // Benefits alert
    .owner-benefits-alert {
        margin-bottom: 32px;
        background: #e6f7ff;
        border: 1px solid #91d5ff;
        border-radius: 8px;
        .anticon {
            color: #1890ff;
        }
        
        .ant-alert-message {
            font-size: 16px;
            font-weight: 600;
            color: #0050b3;
        }
        
        .benefits-list {
            margin: 12px 0 0 0;
            padding-left: 20px;
            
            li {
                font-size: 14px;
                color: #0050b3;
                line-height: 1.8;
                margin-bottom: 8px;
                
                &:last-child {
                    margin-bottom: 0;
                }
            }
        }
    }

    // Form item spacing
    .ant-form-item {
        margin-bottom: 24px;
    }

    // Responsive adjustments
    @media (max-width: 768px) {
        padding: 16px;
        
        .owner-form-header {
            margin-bottom: 24px;
            
            .owner-form-title {
                font-size: 24px;
            }
            
            .owner-form-subtitle {
                font-size: 14px;
            }
        }
        
        .owner-section {
            margin-top: 32px;
            
            .owner-section-title {
                font-size: 18px;
                
                .section-number {
                    width: 28px;
                    height: 28px;
                    font-size: 14px;
                }
            }
        }
        
        .owner-photo-upload {
            .upload-container {
                padding: 16px;
            }
        }
    }
}
// Addons Form Styling
.addons-form-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;

    .addons-form-header {
        // text-align: center;
        margin-bottom: 40px;
        
        .addons-form-title {
            color: #1a1a1a;
            font-weight: 600;
            margin-bottom: 8px;
            font-size: 32px;
        }
        
        .addons-form-subtitle {
            font-size: 18px;
            color: #666;
            margin-bottom: 0;
        }
    }

    .addon-card {
        border: 2px solid #e8e8e8;
        border-radius: 12px;
        padding: 24px;
        height: 100%;
        display: flex;
        flex-direction: column;
        transition: all 0.3s ease;
        background: #fff;
        
        &:hover {
            border-color: #1890ff;
            box-shadow: 0 4px 12px rgba(24, 144, 255, 0.15);
            transform: translateY(-2px);
        }
        
        &.addon-card-selected {
            border-color: #1890ff;
            box-shadow: 0 4px 12px rgba(24, 144, 255, 0.15);
            
            .addon-card-badge {
                border-color: #1890ff;
                color: white;
            }
        }
        
        .ant-card-body {
            padding: 0;
            display: flex;
            flex-direction: column;
            height: 100%;
        }
    }

    .addon-card-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 16px;
        
        .addon-card-title {
            font-size: 20px;
            font-weight: 600;
            color: #262626;
            margin-bottom: 0;
            flex: 1;
        }
        
        .addon-card-badge {
            background: #1890ff;
            color: white;
            padding: 4px 12px;
            border-radius: 16px;
            font-weight: 600;
            font-size: 14px;
            margin-left: 12px;
            white-space: nowrap;
        }
    }

    .addon-card-description {
        color: #595959;
        font-size: 15px;
        line-height: 1.6;
        margin-bottom: 24px;
        flex: 1;
    }

    .addon-card-footer {
        margin-top: auto;
        
        .addon-switch-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 0;
            
            .addon-switch-label {
                font-size: 15px;
                font-weight: 500;
                color: #595959;
            }
            
            .addon-switch {
                &.ant-switch-checked {
                    background-color: #1890ff;
                    
                    &:hover {
                        background-color: #1890ff;
                    }
                }
            }
        }
    }

    .addons-note {
        // text-align: center;
        font-size: 14px;
        color: #8c8c8c;
        margin-top: 32px;
        font-style: italic;
    }

    @media (max-width: 768px) {
        padding: 16px;
        
        .addons-form-header {
            margin-bottom: 24px;
            
            .addons-form-title {
                font-size: 24px;
            }
            
            .addons-form-subtitle {
                font-size: 16px;
            }
        }
        
        .addon-card {
            margin-bottom: 16px;
        }
    }
}

.review-step-card {
    border-radius: 8px;
    .ant-card-body {
        padding: 24px;
        display: flex;
        justify-content: space-between;
    }
    ::before {
        content: unset;
    }
    ::after {
        content: unset;
    }
    &:hover {
        // border-color: #1890ff;
        box-shadow: 0 4px 12px rgba(24, 144, 255, 0.15);
        // transform: translateY(-2px);
    }
    
    .review-card-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 16px;
        
        .review-card-title {
            font-size: 20px;
            font-weight: 600;
            color: #262626;
            margin-bottom: 0;
            flex: 1;
        }
        
        .review-card-status {
            background: #52c41a;
            color: white;
            padding: 4px 12px;
            border-radius: 16px;
            font-weight: 600;
            font-size: 14px;
            margin-left: 12px;
            white-space: nowrap;
        }
    }

    .review-card-description {
        color: #595959;
        font-size: 15px;
        line-height: 1.6;
    }
}


.plan-selection {
    ul{
        margin-left: 20px;
    }
    li{
        //i want li with dot in front and some space between dot and text
        list-style-type: disc;
        margin-left: 20px;
    }
}