/**
 * The following styles get applied both on the front of your site
 * and in the editor.
 */

.wp-block-dynamic-qr-code-block-qr-code {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 1em 0;

	img {
		display: block;
		max-width: 100%;
		height: auto;
	}

	&.aligncenter {
		justify-content: center;
	}

	&.alignleft {
		justify-content: flex-start;
	}

	&.alignright {
		justify-content: flex-end;
	}
}

/**
 * QR Code Block styles for both editor and front-end
 */

.wp-block-dynamic-qr-code-block-qr-code {
    margin: 1em 0;
    
    &.aligncenter {
        text-align: center;
        
        .qr-code-preview {
            margin-left: auto;
            margin-right: auto;
        }
    }
    
    &.alignleft {
        text-align: left;
        float: left;
        margin-right: 1em;
    }
    
    &.alignright {
        text-align: right;
        float: right;
        margin-left: 1em;
    }
    
    .qr-code-preview {
        display: inline-block;
        padding: 10px;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
        
        &:hover {
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
            transform: translateY(-2px);
        }
        
        img {
            display: block;
            max-width: 100%;
            height: auto;
        }
    }
}

/* Editor Specific Styles */
.wp-block-dynamic-qr-code-block-qr-code {
    .qr-code-colors {
        margin-top: 1em;
        
        .qr-code-color {
            margin-bottom: 1em;
            
            label {
                display: block;
                margin-bottom: 0.5em;
                font-weight: 600;
            }
        }
    }
    
    .components-base-control {
        margin-bottom: 1em;
    }
    
    .components-range-control {
        width: 100%;
    }
}

/* Front-end Styles */
.entry-content, .block-editor-block-list__layout {
    .wp-block-dynamic-qr-code-block-qr-code {
        &::after {
            content: '';
            display: table;
            clear: both;
        }
    }
}

/* Responsive Styles */
@media screen and (max-width: 768px) {
    .wp-block-dynamic-qr-code-block-qr-code {
        &.alignleft,
        &.alignright {
            float: none;
            margin: 1em auto;
            text-align: center;
        }
    }
}