/* Icon Font - TB Child Theme */
/* Using CSS mask for proper color control with currentColor */

.tb-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: middle;
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;

}

/* Star Icons */
.tb-icon--star-full {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2L14.9 8.6L22 9.3L17 14.1L18.2 21.2L12 17.8L5.8 21.2L7 14.1L2 9.3L9.1 8.6L12 2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2L14.9 8.6L22 9.3L17 14.1L18.2 21.2L12 17.8L5.8 21.2L7 14.1L2 9.3L9.1 8.6L12 2Z'/%3E%3C/svg%3E");
}

.tb-icon--star-half {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='half'%3E%3Cstop offset='50%25' stop-color='currentColor'/%3E%3Cstop offset='50%25' stop-color='transparent'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M12 2L14.9 8.6L22 9.3L17 14.1L18.2 21.2L12 17.8L5.8 21.2L7 14.1L2 9.3L9.1 8.6L12 2Z' fill='url(%23half)' stroke='currentColor' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='half'%3E%3Cstop offset='50%25' stop-color='currentColor'/%3E%3Cstop offset='50%25' stop-color='transparent'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M12 2L14.9 8.6L22 9.3L17 14.1L18.2 21.2L12 17.8L5.8 21.2L7 14.1L2 9.3L9.1 8.6L12 2Z' fill='url(%23half)' stroke='currentColor' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.tb-icon--star-outline {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2L14.9 8.6L22 9.3L17 14.1L18.2 21.2L12 17.8L5.8 21.2L7 14.1L2 9.3L9.1 8.6L12 2Z' stroke='currentColor' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2L14.9 8.6L22 9.3L17 14.1L18.2 21.2L12 17.8L5.8 21.2L7 14.1L2 9.3L9.1 8.6L12 2Z' stroke='currentColor' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Other Icons */
.tb-icon--calendar {
  -webkit-mask-image: url('../icon/calendar.svg');
  mask-image: url('../icon/calendar.svg');
}

.tb-icon--chevron-down {
  -webkit-mask-image: url('../icon/chevron-down.svg');
  mask-image: url('../icon/chevron-down.svg');
}

.tb-icon--chevron-left {
  -webkit-mask-image: url('../icon/chevron-left.svg');
  mask-image: url('../icon/chevron-left.svg');
}

.tb-icon--chevron-right {
  -webkit-mask-image: url('../icon/chevron-right.svg');
  mask-image: url('../icon/chevron-right.svg');
}

.tb-icon--eye {
  -webkit-mask-image: url('../icon/eye.svg');
  mask-image: url('../icon/eye.svg');
}

.tb-icon--eye-slash {
  -webkit-mask-image: url('../icon/eye-slash.svg');
  mask-image: url('../icon/eye-slash.svg');
}

.tb-icon--heart {
  -webkit-mask-image: url('../icon/heart.svg');
  mask-image: url('../icon/heart.svg');
}

.tb-icon--search {
  -webkit-mask-image: url('../icon/search.svg');
  mask-image: url('../icon/search.svg');
}

.tb-icon--shopping-bag {
  -webkit-mask-image: url('../icon/shopping-bag.svg');
  mask-image: url('../icon/shopping-bag.svg');
}

.tb-icon--user {
  -webkit-mask-image: url('../icon/user.svg');
  mask-image: url('../icon/user.svg');
}

.tb-icon {
  display: inline-block;
  vertical-align: middle;
  margin: 0 2px;
  flex-shrink: 0;
  background-color: currentColor;
}

/* Icon Font - Using CSS mask for proper color control with currentColor */
.star {
  /* display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin: 0 2px;
  flex-shrink: 0;
  background-color: currentColor; */
  color: var(--yellow);
}

.star--full {
  -webkit-mask: url('../icon/star-full.svg') no-repeat center / contain;
  mask: url('../icon/star-full.svg') no-repeat center / contain;
}

.star--half {
  -webkit-mask: url('../icon/star-half.svg') no-repeat center / contain;
  mask: url('../icon/star-half.svg') no-repeat center / contain;
}

.star--empty {
  -webkit-mask: url('../icon/star-outline.svg') no-repeat center / contain;
  mask: url('../icon/star-outline.svg') no-repeat center / contain;
}

.heart {
  -webkit-mask: url('../icon/heart.svg') no-repeat center / contain;
  mask: url('../icon/heart.svg') no-repeat center / contain;
}

.heart-full {
  -webkit-mask: url('../icon/heart-full.svg') no-repeat center / contain;
  mask: url('../icon/heart-full.svg') no-repeat center / contain;
}

.icon-eye-slash {
  -webkit-mask: url('../icon/eye-slash.svg') no-repeat center / contain;
  mask: url('../icon/eye-slash.svg') no-repeat center / contain;
}

.icon-eye {
  -webkit-mask: url('../icon/eye.svg') no-repeat center / contain;
  mask: url('../icon/eye.svg') no-repeat center / contain;
}

.icon-logout {
  -webkit-mask: url('../icon/logout.svg') no-repeat center / contain;
  mask: url('../icon/logout.svg') no-repeat center / contain;
}

.icon-user {
  -webkit-mask: url('../icon/user.svg') no-repeat center / contain;
  mask: url('../icon/user.svg') no-repeat center / contain;
}

.icon-like {
  -webkit-mask: url('../icon/like.svg') no-repeat center / contain;
  mask: url('../icon/like.svg') no-repeat center / contain;
}

.icon-shopping-bag {
  -webkit-mask: url('../icon/shopping-bag.svg') no-repeat center / contain;
  mask: url('../icon/shopping-bag.svg') no-repeat center / contain;
}

.icon-calendar {
  -webkit-mask: url('../icon/calendar.svg') no-repeat center / contain;
  mask: url('../icon/calendar.svg') no-repeat center / contain;
}

.icon-calendar-tick {
  -webkit-mask: url('../icon/calendar-tick.svg') no-repeat center / contain;
  mask: url('../icon/calendar-tick.svg') no-repeat center / contain;
}

.icon-search {
  -webkit-mask: url('../icon/search.svg') no-repeat center / contain;
  mask: url('../icon/search.svg') no-repeat center / contain;
}

.icon-chevron-down {
  -webkit-mask: url('../icon/chevron-down.svg') no-repeat center / contain;
  mask: url('../icon/chevron-down.svg') no-repeat center / contain;
}

.icon-chevron-down2 {
  -webkit-mask: url('../icon/Chevron_Down.svg') no-repeat center / contain;
  mask: url('../icon/Chevron_Down.svg') no-repeat center / contain;
}

.icon-chevron-left {
  -webkit-mask: url('../icon/chevron-left.svg') no-repeat center / contain;
  mask: url('../icon/chevron-left.svg') no-repeat center / contain;
}

.icon-chevron-right {
  -webkit-mask: url('../icon/chevron-right.svg') no-repeat center / contain;
  mask: url('../icon/chevron-right.svg') no-repeat center / contain;
}

.icon-edit {
  -webkit-mask: url('../icon/edit.svg') no-repeat center / contain;
  mask: url('../icon/edit.svg') no-repeat center / contain;
}

.icon-camera {
  -webkit-mask: url('../icon/camera.svg') no-repeat center / contain;
  mask: url('../icon/camera.svg') no-repeat center / contain;
}

.icon-image {
  -webkit-mask: url('../icon/image.svg') no-repeat center / contain;
  mask: url('../icon/image.svg') no-repeat center / contain;
}

.icon-arrow-right {
  -webkit-mask: url('../icon/arrow-right.svg') no-repeat center / contain;
  mask: url('../icon/arrow-right.svg') no-repeat center / contain;
}