/* Local Icon Replacement CSS */
/* This file replaces 3rd party icons with local SVG icons */

/* Base icon styles */
.icon, .lni, .bi, .bx {
  width: 24px;
  height: 24px;
  display: inline-block;
  color: inherit;
  vertical-align: middle;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

/* Ensure icons are visible in all contexts */
.icon, .lni, .bi, .bx {
  min-width: 16px;
  min-height: 16px;
}

/* Fix alignment issues */
.icon, .lni, .bi, .bx {
  line-height: 1;
  vertical-align: text-bottom;
}

/* Size variations */
.icon-sm, .lni-sm, .bi-sm {
  width: 16px;
  height: 16px;
}

.icon-lg, .lni-lg, .bi-lg {
  width: 32px;
  height: 32px;
}

.icon-xl, .lni-xl, .bi-xl {
  width: 48px;
  height: 48px;
}

/* LineIcons replacements */
.lni-heart, .lni.lni-heart {
  background-image: url('icon-unfilled-heart.svg');
}

.lni-heart.filled, .lni.lni-heart.filled {
  background-image: url('icon-filled-heart.svg');
}

.lni-shopping-cart, .lni.lni-shopping-cart {
  background-image: url('icon-cart.svg');
}

.lni-user, .lni.lni-user {
  background-image: url('icon-user.svg');
}

.lni-search, .lni.lni-search {
  background-image: url('icon-search.svg');
}

.lni-wallet, .lni.lni-wallet {
  background-image: url('icon-wallet.svg');
}

.lni-package, .lni.lni-package {
  background-image: url('icon-orders.svg');
}

.lni-exit, .lni.lni-exit {
  background-image: url('icon-login.svg');
  transform: rotate(180deg);
}

.lni-instagram, .lni.lni-instagram {
  background-image: url('icon-instagram.svg');
}

.lni-facebook, .lni.lni-facebook {
  background-image: url('icon-youtube.svg'); /* Using YouTube as placeholder for Facebook */
}

.lni-delivery, .lni.lni-delivery {
  background-image: url('icon-truck.svg');
}

.lni-calendar, .lni.lni-calendar {
  background-image: url('icon-calendar.svg');
}

.lni-shield, .lni.lni-shield {
  background-image: url('icon-secure-payment.svg');
}

.lni-reload, .lni.lni-reload {
  background-image: url('icon-return.svg');
}

.lni-funnel, .lni.lni-funnel {
  background-image: url('icon-filter.svg');
}

.lni-plus, .lni.lni-plus {
  background-image: url('icon-plus.svg');
}

.lni-minus, .lni.lni-minus {
  background-image: url('icon-minus.svg');
}

.lni-trash, .lni.lni-trash {
  background-image: url('icon-cross.svg');
}

.lni-star, .lni.lni-star {
  background-image: url('icon-unfilled-star.svg');
}

.lni-star.filled, .lni.lni-star.filled {
  background-image: url('icon-filled-star.svg');
}

.lni-eye, .lni.lni-eye {
  background-image: url('icon-eye-open.svg');
}

.lni-eye-close, .lni.lni-eye-close {
  background-image: url('icon-eye-closed.svg');
}

.lni-cart-full, .lni.lni-cart-full {
  background-image: url('icon-cart.svg');
}

.lni-cross-circle, .lni.lni-cross-circle {
  background-image: url('icon-cross.svg');
}

.lni-warning, .lni.lni-warning {
  background-image: url('icon-price-tag.svg'); /* Using price-tag as warning placeholder */
}

.lni-heart-filled, .lni.lni-heart-filled {
  background-image: url('icon-filled-heart.svg');
}

.lni-arrow-left, .lni.lni-arrow-left {
  background-image: url('icon-left.svg');
}

.lni-arrow-right, .lni.lni-arrow-right {
  background-image: url('icon-right.svg');
}

/* Bootstrap Icons mappings */
.bi-check-lg, .bi.bi-check-lg {
  background-image: url('icon-filled-star.svg'); /* Using star as check placeholder */
}

.bi-box-seam, .bi.bi-box-seam {
  background-image: url('icon-orders.svg');
}

.bi-truck, .bi.bi-truck {
  background-image: url('icon-truck.svg');
}

.bi-house-check, .bi.bi-house-check {
  background-image: url('icon-location.svg');
}

/* Additional missing icons */
.lni-package, .lni.lni-package {
  background-image: url('icon-orders.svg');
}

.lni-facebook, .lni.lni-facebook {
  background-image: url('icon-youtube.svg'); /* Using YouTube as Facebook placeholder */
}

/* Ensure all icons have proper fallback */
.icon:not([style*="background-image"]),
.lni:not([style*="background-image"]),
.bi:not([style*="background-image"]),
.bx:not([style*="background-image"]) {
  position: relative;
}

.icon:not([style*="background-image"]):before,
.lni:not([style*="background-image"]):before,
.bi:not([style*="background-image"]):before,
.bx:not([style*="background-image"]):before {
  content: "⚫";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 8px;
  opacity: 0.3;
}

/* Bootstrap Icons replacements */
.bi-list, .bi.bi-list {
  background-image: url('icon-hamburger-navbar.svg');
}

.bi-x-lg, .bi.bi-x-lg, .bi-x {
  background-image: url('icon-cross.svg');
}

.bi-heart, .bi.bi-heart {
  background-image: url('icon-unfilled-heart.svg');
}

.bi-heart-fill, .bi.bi-heart-fill {
  background-image: url('icon-filled-heart.svg');
}

.bi-cart, .bi.bi-cart {
  background-image: url('icon-cart.svg');
}

.bi-person, .bi.bi-person {
  background-image: url('icon-user.svg');
}

.bi-search, .bi.bi-search {
  background-image: url('icon-search.svg');
}

/* Boxicons replacements */
.bx-menu, .bx.bx-menu {
  background-image: url('icon-hamburger-navbar.svg');
}

.bx-x, .bx.bx-x {
  background-image: url('icon-cross.svg');
}

/* Special cases for active/filled states */
.wishlist-btn.active .lni-heart,
.wishlist-btn.active .bi-heart {
  background-image: url('icon-filled-heart.svg');
}

.star.filled,
.lni-star.filled,
.bi-star-fill {
  background-image: url('icon-filled-star.svg');
}

/* Color variations */
.icon-primary, .lni-primary, .bi-primary {
  filter: hue-rotate(210deg) saturate(2);
}

.icon-success, .lni-success, .bi-success {
  filter: hue-rotate(120deg) saturate(1.5);
}

.icon-danger, .lni-danger, .bi-danger {
  filter: hue-rotate(0deg) saturate(2);
}

.icon-warning, .lni-warning, .bi-warning {
  filter: hue-rotate(45deg) saturate(2);
}

.icon-white, .lni-white, .bi-white {
  filter: brightness(0) invert(1);
}

.icon-dark, .lni-dark, .bi-dark {
  filter: brightness(0);
}

/* Interactive states */
.icon-button, .lni-button, .bi-button {
  cursor: pointer;
  transition: filter 0.2s ease, transform 0.2s ease;
}

.icon-button:hover, .lni-button:hover, .bi-button:hover {
  filter: brightness(1.2);
  transform: scale(1.1);
}

.icon-button:active, .lni-button:active, .bi-button:active {
  transform: scale(0.95);
}

/* Confirmation page specific fixes */
.confirmation-header .icon .bi,
.confirmation-header .icon .lni {
  width: 40px;
  height: 40px;
  filter: brightness(0) invert(1);
}

.what-next-step .icon .bi,
.what-next-step .icon .lni {
  width: 24px;
  height: 24px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .icon, .lni, .bi, .bx {
    width: 20px;
    height: 20px;
  }
  
  .icon-lg, .lni-lg, .bi-lg {
    width: 28px;
    height: 28px;
  }
}