/* Local Lucide compatibility layer for the legacy Font Awesome class names. */
.fas,
.far {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  align-items: center;
  justify-content: center;
  font-style: normal;
  line-height: 1;
  vertical-align: -0.1875rem;
}

.fas::before,
.far::before {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  content: "" !important;
  background-color: currentColor;
  -webkit-mask: var(--rawfan-icon) center / contain no-repeat;
  mask: var(--rawfan-icon) center / contain no-repeat;
}

.fa-check-circle { --rawfan-icon: url("../images/icons/lucide/circle-check.svg"); }
.fa-chevron-circle-right { --rawfan-icon: url("../images/icons/lucide/circle-chevron-right.svg"); }
.fa-chevron-down { --rawfan-icon: url("../images/icons/lucide/chevron-down.svg"); }
.fa-chevron-left { --rawfan-icon: url("../images/icons/lucide/chevron-left.svg"); }
.fa-circle { --rawfan-icon: url("../images/icons/lucide/circle.svg"); }
.fa-clock { --rawfan-icon: url("../images/icons/lucide/clock.svg"); }
.fa-info-circle { --rawfan-icon: url("../images/icons/lucide/info.svg"); }
.fa-map-marker-alt { --rawfan-icon: url("../images/icons/lucide/map-pin.svg"); }
.fa-minus-circle { --rawfan-icon: url("../images/icons/lucide/circle-minus.svg"); }
.fa-plus-circle { --rawfan-icon: url("../images/icons/lucide/circle-plus.svg"); }
.fa-shopping-basket { --rawfan-icon: url("../images/icons/lucide/shopping-basket.svg"); }
.fa-square { --rawfan-icon: url("../images/icons/lucide/square.svg"); }
.fa-times { --rawfan-icon: url("../images/icons/lucide/x.svg"); }
.fa-times-circle { --rawfan-icon: url("../images/icons/lucide/circle-x.svg"); }
.fa-trash-alt { --rawfan-icon: url("../images/icons/lucide/trash.svg"); }
.fa-user { --rawfan-icon: url("../images/icons/lucide/user.svg"); }

/* Keep the icon at full size while preserving the padded modal close target. */
#alert .header .close,
#modal .header .close,
#addModal .header .close,
#customModal .header .close,
#rawfanModal .header .close,
#loginModal .header .close {
  box-sizing: content-box;
  color: #5b3427;
  z-index: 1;
}

input[type="checkbox"] + i.fa-square {
  vertical-align: -0.5rem;
}

/* Center the fixed-size icons inside the circular header controls. */
header .inner .shop_cart,
header .inner .login {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Legacy checkout CSS made unselected transport and payment radios white. */
.transport_payment label input[type="radio"]:not(:checked) + i.fa-circle::before {
  background-color: #5b3427;
}

/* Use one layout for all recap checkboxes instead of mixing inline and absolute positioning. */
#page .inner .shopping_cart .square-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#page .inner .shopping_cart .square-checkbox > i.fa-square {
  position: relative;
  top: auto;
  left: auto;
  flex: 0 0 auto;
  margin: 0;
}

#page .inner #checkout .square-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#page .inner #checkout .square-checkbox > i.fa-square {
  position: relative;
  flex: 0 0 auto;
  margin: 0;
  transform: none;
}

#page .inner #checkout .square-checkbox > span {
  padding-left: 0;
  line-height: 1.1rem;
}

#page .inner .shopping_cart .square-checkbox > span,
#page .inner .shopping_cart .row.eco .square-checkbox > span {
  padding-left: 0;
  line-height: 1.1rem;
}

#page .inner .shopping_cart .row.eco .cell .square-checkbox {
  padding-left: 0;
  gap: 0;
}

#page .inner .shopping_cart .row.eco .cell .square-checkbox .fa-square {
  position: relative;
  top: auto;
  left: auto;
  vertical-align: -0.5rem;
}

#page .inner .shopping_cart .row.eco .cell .square-checkbox > span {
  padding-left: 8px;
}

/* Lucide's square path is optically smaller than its circle path. */
input[type="checkbox"] + i.fa-square::before {
  height: 1.5rem;
  transform: scale(1.1111);
}

/* Selected controls use fixed SVG layers, so checking them cannot shift text. */
input[type="checkbox"]:checked + i.fa-square,
input[type="checkbox"]:checked + i.fa-circle,
input[type="radio"]:checked + i.fa-circle {
  position: relative;
}

input[type="checkbox"]:checked + i.fa-square::before,
input[type="checkbox"]:checked + i.fa-circle::before,
input[type="radio"]:checked + i.fa-circle::before {
  content: "" !important;
  background: #5b3427;
  border: 0;
  -webkit-mask: none;
  mask: none;
}

input[type="checkbox"]:checked + i.fa-square::before {
  border-radius: 3px;
  transform: none;
}

input[type="checkbox"]:checked + i.fa-circle::before,
input[type="radio"]:checked + i.fa-circle::before {
  border-radius: 50%;
}

input[type="checkbox"]:checked + i.fa-square::after,
input[type="checkbox"]:checked + i.fa-circle::after,
input[type="radio"]:checked + i.fa-circle::after {
  position: absolute;
  inset: auto;
  top: 0.28125rem;
  left: 0.28125rem;
  display: block;
  width: 0.9375rem;
  height: 0.9375rem;
  content: "";
  background-color: #fff;
  -webkit-mask: url("../images/icons/lucide/check.svg") center / contain no-repeat;
  mask: url("../images/icons/lucide/check.svg") center / contain no-repeat;
}

.tabs .tab.active input[type="radio"]:checked + i.fa-circle::before {
  background: #fff;
}

.tabs .tab.active input[type="radio"]:checked + i.fa-circle::after {
  background-color: #5b3427;
}