/**
 * BizRipo Brand Styling
 *
 * Global BizRipo brand override stylesheet (loaded last).
 * global last-loaded "brand override" stylesheet.
 *
 * Keep it small and token-driven: everything should flow from theme variables.
 */

:root {
  --bizripo-blue: #1e88e5;
  --bizripo-blue-dark: #0d47a1;
  --bizripo-surface: #eff6ff;

  /* Fallbacks (these are also set in Blade for shop-specific themes) */
  --theme-color: var(--theme-color, var(--bizripo-blue));
  --theme-secondary-color: var(--theme-secondary-color, var(--bizripo-surface));
}

/* Buttons */
.common-btn,
.btn-info,
.btn-info2,
.btn-info-SW,
.submit-btn,
.subscribe-button,
.import-btn,
.table-bg-color,
.bgBlue,
.bgBlueDop {
  background-color: var(--theme-color) !important;
  border-color: var(--theme-color) !important;
  color: #fff !important;
}

.common-btn:hover,
.btn-info:hover,
.btn-info2:hover,
.btn-info-SW:hover,
.submit-btn:hover,
.subscribe-button:hover,
.import-btn:hover {
  background-color: #1565c0 !important;
  border-color: #1565c0 !important;
  color: #fff !important;
}

/* Headers / tables / modals */
.card-header-color,
.custom-card-header,
.table thead th,
.modal-header.card-header-color {
  background: linear-gradient(135deg, var(--bizripo-blue) 0%, var(--bizripo-blue-dark) 100%) !important;
  color: #fff !important;
  border: none !important;
}

/* Links */
a,
.razinsoftText,
#see-more {
  color: var(--theme-color) !important;
}
a:hover {
  color: #1565c0 !important;
}

/* Form focus */
.form-control:focus,
.select2-container--default .select2-selection--single:focus,
.inputSW:focus {
  border-color: var(--theme-color) !important;
  box-shadow: 0 0 0 0.2rem rgba(30, 136, 229, 0.2) !important;
}

/* Pagination */
.page-item.active .page-link,
.paginationBox .pagination.pg-blue .page-item.active .page-link {
  background-color: var(--theme-color) !important;
  border-color: var(--theme-color) !important;
}
.page-link:hover {
  color: var(--theme-color) !important;
}

/* POS: normalize legacy Tailwind colors into theme */
.bg-red-600,
.bg-blue-500,
.bg-indigo-600,
button[class*="bg-red-600"],
button[class*="bg-blue-500"],
button[class*="bg-indigo-600"] {
  background-color: var(--theme-color) !important;
  border-color: var(--theme-color) !important;
}
.bg-red-600:hover,
.bg-blue-500:hover,
.bg-indigo-600:hover,
button[class*="bg-red-600"]:hover,
button[class*="bg-blue-500"]:hover,
button[class*="bg-indigo-600"]:hover,
.hover\\:bg-blue-700:hover,
.hover\\:bg-indigo-700:hover,
.hover\\:bg-red-700:hover {
  background-color: #1565c0 !important;
  border-color: #1565c0 !important;
}

/* POS: category/brand buttons should be outline in theme color */
#categoryBtn,
#brandBtn,
div#categoryBtn,
div#brandBtn,
.category-brand {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--theme-color) !important;
  border: 2px solid var(--theme-color) !important;
}
#categoryBtn *,
#brandBtn *,
.category-brand * {
  color: var(--theme-color) !important;
}

/* Small UI surfaces */
.theme-change-btn {
  background: rgba(30, 136, 229, 0.1) !important;
}
.theme-change-btn:hover {
  background: rgba(30, 136, 229, 0.18) !important;
}
.language-image {
  background: rgba(30, 136, 229, 0.1) !important;
  border: 1px solid rgba(30, 136, 229, 0.2) !important;
}