/* Theme tokens from Figma — Primary / Light Primary
   Source: Product Search by Image App
   Primary (Background/Primary color): #E13C4D
   Light Primary (Main primary/primary-70): #f6c4ca57 (light) / #2A0B0E (dark)
*/
:root,
[data-bs-theme=light] {
  --bs-primary: #E13C4D;
  --bs-primary-rgb: 225, 60, 77;
  --bs-primary-active: #C23341;
  --bs-primary-light: #f6c4ca57;
  --bs-primary-clarity: rgba(225, 60, 77, 0.2);
  --bs-primary-inverse: #FFFFFF;
  --bs-text-primary: #E13C4D;
  --bs-primary-text-emphasis: #B4303E;
  --bs-primary-bg-subtle: #f6c4ca57;
  --bs-primary-border-subtle: #EEC0C5;
  --bs-link-color: #E13C4D;
  --bs-link-hover-color: #C23341;
  --bs-component-active-bg: #E13C4D;
  --bs-component-hover-color: #E13C4D;
  --bs-component-checked-bg: #E13C4D;
  --bs-menu-link-color-hover: #E13C4D;
  --bs-menu-link-color-show: #E13C4D;
  --bs-menu-link-color-here: #E13C4D;
  --bs-menu-link-color-active: #E13C4D;
  --bs-ribbon-label-bg: #E13C4D;
}

[data-bs-theme=dark] {
  --bs-primary: #E13C4D;
  --bs-primary-rgb: 225, 60, 77;
  --bs-primary-active: #E85A69;
  --bs-primary-light: #2A0B0E;
  --bs-primary-clarity: rgba(225, 60, 77, 0.2);
  --bs-text-primary: #E13C4D;
  --bs-primary-text-emphasis: #F5A8B0;
  --bs-primary-bg-subtle: #2A0B0E;
  --bs-primary-border-subtle: #5E1D24;
  --bs-link-color: #E13C4D;
  --bs-component-active-bg: #E13C4D;
  --bs-component-hover-color: #E13C4D;
  --bs-component-checked-bg: #E13C4D;
  --bs-menu-link-color-hover: #E13C4D;
  --bs-menu-link-color-show: #E13C4D;
  --bs-menu-link-color-here: #E13C4D;
  --bs-menu-link-color-active: #E13C4D;
  --bs-ribbon-label-bg: #E13C4D;
  --bs-scrolltop-bg-color: #E13C4D;
  --bs-scrolltop-bg-color-hover: #E13C4D;
}

.is-invalid {
  border-color: #dc3545;
  /* Red border for invalid inputs */
}

.invalid-feedback {
  display: none;
  /* Hide feedback by default */
  color: #dc3545;
  /* Red text for feedback */
}

.is-invalid~.invalid-feedback {
  display: block;
  /* Show feedback for invalid inputs */
}

.bg-primary-success {
  background-color: #00900E !important;
}

.text-primary-success {
  color: #00900E !important;
}

.badge-success {
  color: var(--bs-success-inverse);
  background-color: #00900E !important;
}

.btn.btn-color-warning i {
  color: #00900E !important;
}

.text-green {
  color: #00900E !important;
}


/* custom color */
.text-orange {
  color: #FF6600 !important;
}

.text-pink {
  color: #DB147F !important;
}

.text-blue {
  color: #23408F !important;
}

.text-skyblue {
  color: #2395CA !important;
}

.text-purple {
  color: #6657FD !important;
}

.text-red {
  color: #f1416c !important;
}

.badge-light-orange {
  background-color: #FFEBDE !important;
  color: #FF6600 !important;
}

.badge-light-pink {
  background-color: #FFEDF7 !important;
  color: #DB147F !important;
}

.badge-light-blue {
  background-color: #E9ECF4 !important;
  color: #23408F !important;
}

.badge-light-purple {
  background-color: #EEF1FF !important;
  color: #5570FF !important;
}

.badge-light-skyblue {
  background-color: #bdd9e56e !important;
  color: #2395CA !important;
}

.bg-light-orange {
  background-color: #FFEBDE !important;
  color: #FF6600 !important;
}

.badge-light-red {
  background-color: #fff5f8 !important;
  color: #f1416c !important;
}

.badge-red {
  background-color: #f1416c !important;
  color: #ffffff !important;
}

.badge-light-green{
  background-color: #E6F4E7 !important;
  color: #00900E !important;
}

/* card_10 — Benefits layout (dog details) */
.card-10-benefits {
  background-color: #faf9f7;
  border-radius: 0.75rem;
  padding: 1.25rem;
}

.card-10-benefits__header {
  background-color: #ffebde;
}

.card-10-benefits__title {
  color: #d4844a;
}

.card-10-benefits__item:last-child {
  margin-bottom: 0 !important;
}

.card-10-benefits__list .bullet {
  width: 6px;
  height: 6px;
  min-width: 6px;
  border-radius: 50%;
}

/* External Links (item details) — long marketplace URLs */
.external-link-card {
  max-width: 100%;
  overflow: hidden;
}

.external-link-url {
  display: block;
  margin-top: 0.35rem;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
  line-height: 1.5;
  text-decoration: none;
}

.external-link-url:hover {
  text-decoration: underline;
}