/* Xero Icon Styles */
.xero-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
 vertical-align: -0.125em;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('/images/xero-icon.png');
}

.xero-icon-sm {
    width: 16px;
    height: 16px;
}

.xero-icon-md {
    width: 24px;
    height: 24px;
}

.xero-icon-lg {
    width: 32px;
    height: 32px;
}

/* Alternative: Using inline SVG background */
.xero-icon-svg {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* Xero logo as SVG - cyan circle with white text */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%2313B5EA'/%3E%3Ctext x='50' y='65' font-family='Arial, sans-serif' font-size='45' font-weight='bold' fill='white' text-anchor='middle'%3Exero%3C/text%3E%3C/svg%3E");
}