/*
 * Colours of the pryalka theme, from the orange of the logo.
 *
 * --ph-brand is the logo colour itself: fills and lines without text on them (icons, discount badges, tab
 * underlines). White text on it is only 3.3:1, so buttons with words, prices and text links use the darker
 * --ph-accent (4.25:1 with white).
 *
 * Loaded on every page right after the core stylesheet. The rules below give its restyle (catalog/view/stylesheet/
 * stylesheet.css, red #eb5858) the theme colours where theme pages still use it; a clean OpenCart has none of them.
 */
:root {
  --ph-brand: #f15c28;
  --ph-brand-rgb: 241, 92, 40;
  --ph-accent: #d94a12;
  --ph-accent-rgb: 217, 74, 18;
  --ph-accent-dark: #bf3f0e;
  --ph-accent-darker: #a8370c;
  --ph-tint: #fdece4;
}

.btn-primary {
  --bs-btn-bg: var(--ph-accent);
  --bs-btn-border-color: var(--ph-accent);
  --bs-btn-hover-bg: var(--ph-accent-dark);
  --bs-btn-hover-border-color: var(--ph-accent-dark);
  --bs-btn-focus-shadow-rgb: var(--ph-accent-rgb);
  --bs-btn-active-bg: var(--ph-accent-darker);
  --bs-btn-active-border-color: var(--ph-accent-darker);
  --bs-btn-disabled-bg: var(--ph-accent);
  --bs-btn-disabled-border-color: var(--ph-accent);
}

.btn-outline-primary {
  --bs-btn-color: var(--ph-accent);
  --bs-btn-border-color: var(--ph-accent);
  --bs-btn-hover-bg: var(--ph-accent);
  --bs-btn-hover-border-color: var(--ph-accent);
  --bs-btn-active-bg: var(--ph-accent-dark);
  --bs-btn-active-border-color: var(--ph-accent-dark);
  color: var(--ph-accent);
  border-color: var(--ph-accent);
}

.btn-outline-primary:hover {
  background-color: var(--ph-accent);
  border-color: var(--ph-accent);
}

/* The cyan of the stock templates without a theme template ("Посмотреть карту" on the contact page, the
   subscription list): an outlined button of the theme */
.btn-info {
  --bs-btn-color: var(--ph-accent);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: var(--ph-accent);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--ph-accent);
  --bs-btn-hover-border-color: var(--ph-accent);
  --bs-btn-focus-shadow-rgb: var(--ph-accent-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--ph-accent-dark);
  --bs-btn-active-border-color: var(--ph-accent-dark);
}

.breadcrumb > li.breadcrumb-item > a:hover,
.brand-item:hover .brand-name {
  color: var(--ph-accent);
}

.pagination .page-item .page-link:hover {
  border-color: var(--ph-accent);
  color: var(--ph-accent);
  box-shadow: 0 2px 6px rgba(var(--ph-accent-rgb), 0.2);
}

.pagination .page-item.active .page-link {
  background-color: var(--ph-accent);
  border-color: var(--ph-accent);
  box-shadow: 0 2px 6px rgba(var(--ph-accent-rgb), 0.3);
}

#product-category .form-select:focus {
  border-color: var(--ph-brand);
  box-shadow: 0 0 0 0.25rem rgba(var(--ph-brand-rgb), 0.25);
}

#product-info .discount-badge-main {
  background: var(--ph-brand);
}

#product-info .product-tabs-top .nav-link.active {
  color: var(--ph-accent);
  border-bottom-color: var(--ph-brand);
}

#product-info .btn-primary:hover {
  box-shadow: 0 4px 12px rgba(var(--ph-accent-rgb), 0.4);
}

#product-info .qty-plus:hover,
#product-info .qty-minus:hover,
#product-info #button-plus:hover,
#product-info #button-minus:hover {
  background-color: var(--ph-accent);
  border-color: var(--ph-accent);
}

.option-actions .qty-minus:hover,
.option-actions .qty-plus:hover {
  color: var(--ph-accent);
}

.option-actions .btn-primary {
  background-color: var(--ph-accent);
  border-color: var(--ph-accent);
}