/**
 * Abhiloo UI icons — encoding-safe inline SVG (no fonts / no Unicode symbols)
 */

.icon-close-x,
.icon-check,
.icon-check-lg {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: none;
}

/* Close — neutral (popups, light UI) */
.icon-close-x {
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath stroke='%2364748b' stroke-width='2' stroke-linecap='round' d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
}

/* Close — on dark header / mobile drawer */
.mobile-close-btn .icon-close-x,
.site-header .icon-close-x {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath stroke='%23e2e8f0' stroke-width='2' stroke-linecap='round' d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
}

.popup-close-btn .icon-close-x {
  width: 22px;
  height: 22px;
}

.popup-close-btn:hover .icon-close-x {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath stroke='%23374151' stroke-width='2' stroke-linecap='round' d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
}

.chatbot-close .icon-close-x {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath stroke='%2364748b' stroke-width='2' stroke-linecap='round' d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
}

/* Check — small (buttons) */
.icon-check {
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath stroke='%2310b981' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* Check — large success badge (payment confirmed) */
.icon-check-lg {
  width: 48px;
  height: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none'%3E%3Ccircle cx='24' cy='24' r='22' fill='%23ecfdf5' stroke='%23059669' stroke-width='2'/%3E%3Cpath stroke='%23059669' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M15 24l6 6 13-15'/%3E%3C/svg%3E");
}

.payment-success-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background-color: #ecfdf5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none'%3E%3Ccircle cx='24' cy='24' r='22' fill='%23ecfdf5' stroke='%23059669' stroke-width='2'/%3E%3Cpath stroke='%23059669' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M15 24l6 6 13-15'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 52px 52px;
}

.payment-success-icon .icon-check-lg {
  display: none;
}

/* Admin action buttons — white icons on colored backgrounds */
.btn-confirm .icon-check,
button.btn-confirm .icon-check {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.btn-reject .icon-close-x,
button.btn-reject .icon-close-x {
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
}

.btn-confirm,
.btn-reject {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.mobile-close-btn,
.popup-close-btn,
.chatbot-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.popup-close-btn {
  font-size: 0;
  line-height: 0;
}

/* Declined payment banner */
.payment-inline-status.is-declined::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  vertical-align: -3px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23fef2f2' stroke='%23dc2626' stroke-width='1.5'/%3E%3Cpath stroke='%23dc2626' stroke-width='2' stroke-linecap='round' d='M15 9l-6 6M9 9l6 6'/%3E%3C/svg%3E") center/contain no-repeat;
}