/* Global Orchid Button Overrides - Frontend */
:root { --orchid: #DA70D6; --orchid-dark: #c55cc2; --orchid-soft: #f3d7f2; }

/* Base button */
.btn {
  background-color: var(--orchid) !important;
  border-color: var(--orchid) !important;
  color: #fff !important;
}

/* Common variants explicitly */
.btn-primary,
.btn-secondary,
.btn-dark,
.btn-info,
.btn-success,
.btn-warning,
.btn-danger {
  background-color: var(--orchid) !important;
  border-color: var(--orchid) !important;
  color: #fff !important;
}

/* Hover/active/focus states */
.btn:hover,
.btn:focus,
.btn:active,
.btn.active,
.show > .btn.dropdown-toggle {
  background-color: var(--orchid-dark) !important;
  border-color: var(--orchid-dark) !important;
  color: #fff !important;
}

/* Outline variants - appear orchid and fill on hover */
[class*="btn-outline-"] {
  background-color: transparent !important;
  color: var(--orchid) !important;
  border-color: var(--orchid) !important;
}
[class*="btn-outline-"]:hover,
[class*="btn-outline-"]:focus,
[class*="btn-outline-"]:active {
  background-color: var(--orchid) !important;
  color: #fff !important;
  border-color: var(--orchid) !important;
}

/* Soft variants (if present in theme) */
[class*="btn-soft-"] {
  background-color: var(--orchid-soft) !important;
  color: var(--orchid) !important;
  border-color: var(--orchid) !important;
}
[class*="btn-soft-"]:hover,
[class*="btn-soft-"]:focus {
  background-color: var(--orchid) !important;
  color: #fff !important;
}

/* Link-style buttons should use orchid text */
.btn-link { color: var(--orchid) !important; }
.btn-link:hover { color: var(--orchid-dark) !important; }

/* Icon buttons and transparent backgrounds */
.btn-icon,
.btn-bg-transparent {
  color: var(--orchid) !important;
  border-color: var(--orchid) !important;
}
.btn-icon:hover,
.btn-bg-transparent:hover {
  color: #fff !important;
  background-color: var(--orchid) !important;
  border-color: var(--orchid) !important;
}

/* Pagination and other button-like controls */
.page-item.active .page-link,
.page-link:hover,
.page-link:focus {
  background-color: var(--orchid) !important;
  border-color: var(--orchid) !important;
  color: #fff !important;
}

/* Disabled state */
.btn.disabled, .btn:disabled {
  background-color: #e9b9e7 !important;
  border-color: #e9b9e7 !important;
  color: #fff !important;
  opacity: .65;
}

/* Ensure card buttons inherit overrides (redundant but explicit) */
.card .btn { background-color: var(--orchid) !important; border-color: var(--orchid) !important; color: #fff !important; }
.card .btn:hover { background-color: var(--orchid-dark) !important; border-color: var(--orchid-dark) !important; }

/* Search bar and input outlines */
.form-control,
.custom-select,
.input-group-text {
  border-color: var(--orchid) !important;
}

.form-control:focus,
.custom-select:focus {
  border-color: var(--orchid) !important;
  box-shadow: 0 0 0 0.2rem rgba(218, 112, 214, 0.25) !important; /* orchid focus ring */
}

/* Any element using .border-primary should be orchid */
.border-primary { border-color: var(--orchid) !important; }

/* Inputs with validation states to harmonize with orchid */
.is-valid.form-control,
.is-invalid.form-control {
  box-shadow: none !important; /* keep clean with our orchid border */
}

/* Light orchid hover for product cards (Electro theme selectors) */
.product-item__outer,
.product-item,
.js-slide .product-item {
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.product-item__outer:hover,
.product-item:hover .product-item__outer,
.product-item:hover,
.js-slide .product-item:hover,
.js-slide .product-item:hover .product-item__outer {
  background: linear-gradient(135deg, #f8e9f8 0%, #f1d3f1 50%, #e9b9e7 100%) !important;
  box-shadow: 0 4px 12px rgba(218, 112, 214, 0.25) !important;
}

.product-item__outer:hover .product-item__inner,
.product-item:hover .product-item__inner,
.js-slide .product-item:hover .product-item__inner {
  background: transparent !important;
}

/* Generic card hover with subtle orchid glow */
.card { transition: box-shadow 0.3s ease, transform 0.2s ease; }
.card:hover {
  box-shadow: 0 6px 16px rgba(218, 112, 214, 0.25) !important;
}