/* ═══════════════════════════════════════════════════════════════════
   CHIC CHARMS — Global Material Symbols/Icon System
   One shared icon implementation for every page.

   Why this exists:
   - Material Symbols are ligature fonts: the text "arrow_back" only becomes
     an icon after the Material Symbols font + class CSS are loaded.
   - Several pages declared .material-symbols-outlined locally but did not
     load the font globally/consistently, so browsers rendered raw text.
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');

.material-symbols-outlined,
.material-icons,
.material-icons-outlined {
  font-family: 'Material Symbols Outlined' !important;
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'liga';
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
  flex-shrink: 0;
}

/* SVG fallback generated by cc-material-icons.js.
   Keeps original sizing/color classes (including Tailwind text-[20px]). */
.material-symbols-outlined.cc-svg-icon,
.material-icons.cc-svg-icon,
.material-icons-outlined.cc-svg-icon {
  font-family: inherit !important;
  font-feature-settings: normal;
  -webkit-font-feature-settings: normal;
}

.cc-svg-icon svg {
  width: 1em;
  height: 1em;
  display: block;
  flex-shrink: 0;
  color: inherit;
}

.cc-svg-icon[aria-hidden="true"] svg,
.cc-svg-icon svg[aria-hidden="true"] {
  pointer-events: none;
}