/**
 * HSA Store Product Eligibility Game
 * Icon font styling to match the icons shown in the images
 */

@font-face {
    font-family: 'HSAIcons';
    src: url('../fonts/hsa-icons.woff2') format('woff2'),
         url('../fonts/hsa-icons.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'HSAIcons' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    
    /* Better Font Rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Individual icon mappings */
.icon-document:before {
    content: "\e900";
}

.icon-timer:before {
    content: "\e901";
}

.icon-flag:before {
    content: "\e902";
}

.icon-check:before {
    content: "\e903";
}

.icon-x:before {
    content: "\e904";
}

.icon-share:before {
    content: "\e905";
}

.icon-trophy:before {
    content: "\e906";
}

.icon-email:before {
    content: "\e907";
}

.icon-user:before {
    content: "\e908";
}

/* 
 * Note: Since we don't have access to the actual icon font files used in the images,
 * this CSS provides the structure for the icons, but in the actual implementation,
 * we're using emoji/text characters as a fallback in the main CSS file.
 *
 * To properly implement this, you would need to:
 * 1. Create or obtain the icon font files (woff, woff2, etc.)
 * 2. Place them in the assets/fonts directory
 * 3. Update the content codes above to match your font's character mappings
 */