/**
 * Marc QR Codes Frontend Styles
 * 
 * @package MarcQRCodes
 * @since 1.0.0
 */

/* Default QR Code Styling */
.marc-qr-code,
.marc-qr-container {
    display: inline-block;
    max-width: 100%;
    height: auto;
    margin: 10px 0;
}

.marc-qr-code svg,
.marc-qr-container svg,
.marc-qr-svg-wrapper svg {
    display: block;
    max-width: 100%;
    height: auto;
}

.marc-qr-svg-wrapper {
    display: inline-block;
    width: 100%;
    height: 100%;
}

.marc-qr-code img {
    display: block;
    max-width: 100%;
    height: auto;
    border: none;
}

/* Responsive QR Codes */
@media (max-width: 768px) {
    .marc-qr-code,
    .marc-qr-container {
        text-align: center;
    }
    
    .marc-qr-code svg,
    .marc-qr-code img,
    .marc-qr-container svg,
    .marc-qr-svg-wrapper svg {
        max-width: 200px;
    }
}

@media (max-width: 480px) {
    .marc-qr-code svg,
    .marc-qr-code img,
    .marc-qr-container svg,
    .marc-qr-svg-wrapper svg {
        max-width: 150px;
    }
}

/* Error Messages */
.marc-qr-error {
    color: #d63638;
    background-color: #fcf0f1;
    border: 1px solid #f1aeb5;
    border-radius: 4px;
    padding: 10px;
    margin: 10px 0;
    font-size: 14px;
}

/* Common QR Code Alignment Classes */
.marc-qr-code.alignleft,
.marc-qr-container.alignleft {
    float: left;
    margin: 10px 20px 10px 0;
}

.marc-qr-code.alignright,
.marc-qr-container.alignright {
    float: right;
    margin: 10px 0 10px 20px;
}

.marc-qr-code.aligncenter,
.marc-qr-container.aligncenter {
    display: block;
    margin: 10px auto;
    text-align: center;
}

/* Custom size classes */
.marc-qr-code.size-small svg,
.marc-qr-code.size-small img,
.marc-qr-container.size-small svg,
.marc-qr-container.size-small .marc-qr-svg-wrapper svg {
    width: 100px;
    height: 100px;
}

.marc-qr-code.size-medium svg,
.marc-qr-code.size-medium img,
.marc-qr-container.size-medium svg,
.marc-qr-container.size-medium .marc-qr-svg-wrapper svg {
    width: 200px;
    height: 200px;
}

.marc-qr-code.size-large svg,
.marc-qr-code.size-large img,
.marc-qr-container.size-large svg,
.marc-qr-container.size-large .marc-qr-svg-wrapper svg {
    width: 300px;
    height: 300px;
}

/* Print styles */
@media print {
    .marc-qr-code,
    .marc-qr-container {
        break-inside: avoid;
        page-break-inside: avoid;
    }
    
    .marc-qr-code svg,
    .marc-qr-code img,
    .marc-qr-container svg,
    .marc-qr-svg-wrapper svg {
        max-width: 150px;
        max-height: 150px;
    }
}