/* Navigation Icon Helpers */
/* Provides styling support for navigation icons and dropdowns */

/* Ensure SVG icons maintain proper shape and size */
.bi, .bi-geo-alt, .bi-cart2 {
    display: inline-block;
    vertical-align: middle;
    fill: currentColor;
    width: 1em;
    height: 1em;
}

/* Only apply basic styling to SVG icons without forcing dimensions */
svg {
    display: inline-block;
    vertical-align: middle;
}

/* Fix for Bootstrap Icons */
.bi-geo-alt, .bi-cart2 {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Navigation button icons */
nav svg, header svg {
    flex-shrink: 0;
    display: inline-block;
}

/* Cart icon specific fixes */
.bi-cart2 {
    width: 21px;
    height: 21px;
}

/* Location/map icon fixes */
.bi-geo-alt {
    width: 16px;
    height: 16px;
}

/* Dropdown arrow fixes */
nav svg[viewBox="0 0 10 6"] {
    width: 10px;
    height: 6px;
}

/* Ensure proper icon alignment in buttons */
button svg, a svg {
    vertical-align: middle;
    margin: 0;
}

/* Fix for any distorted icons */
svg path {
    vector-effect: non-scaling-stroke;
}

/* Prevent icon distortion on different screen sizes */
@media (max-width: 768px) {
    .bi-geo-alt, .bi-cart2 {
        width: 16px;
        height: 16px;
    }
}

/* Branch dropdown positioning - Alpine.js teleport handles z-index automatically */
.relative {
    position: relative;
}

/* Protect branch dropdown icons from CSS interference */
.bi-geo-alt {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
}

/* Protect dropdown arrow icons */
button svg[viewBox="0 0 10 6"] {
    width: 10px !important;
    height: 6px !important;
}