/* Charketplace - Custom SVG Icon System */

/* Hide SVG sprite definitions */
.svg-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Base inline icon */
.icon-svg {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    fill: currentColor;
    flex-shrink: 0;
}

/* Size variants */
.icon-sm {
    width: 0.875em;
    height: 0.875em;
}

.icon-md {
    width: 1.25em;
    height: 1.25em;
}

.icon-lg {
    width: 1.75em;
    height: 1.75em;
}

.icon-xl {
    width: 4rem;
    height: 4rem;
}

.icon-xxl {
    width: 3rem;
    height: 3rem;
}

/* Theme color variants */
.icon-primary {
    color: var(--color-primary);
}

.icon-accent {
    color: var(--color-accent);
}

.icon-success {
    color: var(--color-success);
}

.icon-danger {
    color: var(--color-danger);
}

.icon-warning {
    color: var(--color-warning);
}

.icon-muted {
    color: var(--text-muted);
}

/* Icon used inside headings */
h1 .icon-svg,
h2 .icon-svg,
h3 .icon-svg {
    vertical-align: -0.1em;
    margin-right: 0.3em;
}

/* Icon next to text in spans */
.icon-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Feature card large icons */
.feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.feature-icon .icon-svg {
    width: 4rem;
    height: 4rem;
}