/* ==========================================================================
   ORDERPRISM — BỘ VECTOR ICON ĐỘC BẢN CHO WEBAPP ORDER POS NHÀ LÀM
   Triết lý tạo hình: Faceted-Squircle Prism + Emerald (#10B981) & Amber (#F59E0B) Spark
   Hoàn toàn khác biệt 100% với bộ icon nét đơn xanh dương truyền thống của CUKCUK,
   không dùng Emoji hệ điều hành, hiển thị đồng nhất sắc nét trên iOS / Android / Tablet.
   ========================================================================== */

:root {
  --op-tone-opacity: 0.14;
  --op-spark-emerald: #10b981;
  --op-spark-amber: #f59e0b;
  --op-spark-crimson: #ef4444;
  --op-spark-sky: #0ea5e9;
}

.op-ico {
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: -0.18em;
  flex-shrink: 0;
  overflow: visible;
  color: currentColor;
  transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1), color 160ms ease;
}

.op-ico .op-facet {
  fill: currentColor;
  fill-opacity: var(--op-tone-opacity);
  stroke: none;
}

.op-ico .op-spark {
  fill: var(--op-spark, var(--op-spark-emerald));
  stroke: none;
}

.op-ico .op-spark-stroke {
  stroke: var(--op-spark, var(--op-spark-emerald));
}

/* Kích thước chuẩn công thái học */
.op-xs { width: 14px; height: 14px; }
.op-sm { width: 15.5px; height: 15.5px; }
.op-md { width: 20px; height: 20px; }
.op-lg { width: 22px; height: 22px; }
.op-xl { width: 26px; height: 26px; }

/* Biến thể điểm nhấn màu (Accent Spark) */
.op-amber { --op-spark: var(--op-spark-amber); }
.op-emerald { --op-spark: var(--op-spark-emerald); }
.op-crimson { --op-spark: var(--op-spark-crimson); }
.op-sky { --op-spark: var(--op-spark-sky); }

/* Khi nằm trên nút nền đậm (Primary / Kitchen / Emerald) thì đồng bộ độ tương phản cao */
.btn-primary .op-ico .op-facet,
.btn-kitchen .op-ico .op-facet,
.btn-success .op-ico .op-facet,
.btn-danger .op-ico .op-facet,
.chip.active .op-ico .op-facet,
.st-seg.active .op-ico .op-facet,
.v-cat-btn.active .op-ico .op-facet {
  fill-opacity: 0.24;
}

.btn-primary .op-ico .op-spark,
.btn-success .op-ico .op-spark {
  fill: #fde68a;
}

.btn-kitchen .op-ico .op-spark,
.btn-danger .op-ico .op-spark {
  fill: #fef08a;
}

/* Hiệu ứng phản hồi tinh tế trên thanh điều hướng đáy */
.bottom-tabbar .tab-btn .op-ico {
  width: 22px;
  height: 22px;
}

.bottom-tabbar .tab-btn.active .op-ico {
  --op-tone-opacity: 0.22;
  transform: translateY(-1px) scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .op-ico,
  .bottom-tabbar .tab-btn.active .op-ico {
    transition: none;
    transform: none;
  }
}