/**
 * Agoro Default Theme
 * Brand colours extracted from the Agoro logo
 * Primary Red: #E02020
 * Dark Red:   #B91A1A
 * Light Pink: #F8C8C8
 * Pale Pink:  #FFF0F0
 */

:root {
  --agoro-primary: #E02020;
  --agoro-primary-dark: #B91A1A;
  --agoro-primary-light: #F8C8C8;
  --agoro-primary-pale: #FFF0F0;
  --agoro-primary-rgb: 224, 32, 32;
}

/* Bootstrap primary / success overrides */
.btn-success,
.btn-primary {
  background-color: var(--agoro-primary) !important;
  border-color: var(--agoro-primary) !important;
  color: #fff !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
  background-color: var(--agoro-primary-dark) !important;
  border-color: var(--agoro-primary-dark) !important;
}

.btn-success.disabled,
.btn-success[disabled],
.btn-primary.disabled,
.btn-primary[disabled] {
  background-color: var(--agoro-primary-light) !important;
  border-color: var(--agoro-primary-light) !important;
}

/* Panels */
.panel-success {
  border-color: var(--agoro-primary) !important;
}

.panel-success > .panel-heading {
  background-color: var(--agoro-primary) !important;
  border-color: var(--agoro-primary) !important;
  color: #fff !important;
}

.panel-primary > .panel-heading {
  background-color: var(--agoro-primary) !important;
  border-color: var(--agoro-primary) !important;
}

/* Text & links */
.text-primary,
.text-success {
  color: var(--agoro-primary) !important;
}

a.text-primary:hover,
a.text-success:hover {
  color: var(--agoro-primary-dark) !important;
}

/* Nav tabs */
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  background: linear-gradient(135deg, var(--agoro-primary) 0%, var(--agoro-primary-dark) 100%) !important;
  color: #fff !important;
  border-color: var(--agoro-primary) var(--agoro-primary) transparent !important;
}

.nav-tabs {
  border-bottom: 1px solid var(--agoro-primary);
}

.nav-tabs > li > a {
  color: var(--agoro-primary);
  font-weight: 600;
}

.nav-tabs > li > a:hover {
  background-color: var(--agoro-primary-pale);
  border-color: var(--agoro-primary) var(--agoro-primary) transparent;
}

/* Pagination */
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  background-color: var(--agoro-primary) !important;
  border-color: var(--agoro-primary) !important;
  color: #fff !important;
}

.pagination > li > a,
.pagination > li > span,
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus,
.styleColor {
  color: var(--agoro-primary);
}

/* Form focus states */
.form-control:focus {
  border-color: var(--agoro-primary);
  box-shadow: 0 0 0 3px rgba(var(--agoro-primary-rgb), 0.15);
}

/* Page / section headers */
.agoro-header,
.agoro-page-header {
  background: linear-gradient(135deg, var(--agoro-primary) 0%, var(--agoro-primary-dark) 100%) !important;
  color: white !important;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
}

.agoro-header h4,
.agoro-page-header h4 {
  margin: 0;
  font-weight: 300;
}

/* Summary cards */
.agoro-summary,
.agoro-info-summary {
  background: linear-gradient(135deg, var(--agoro-primary) 0%, var(--agoro-primary-dark) 100%) !important;
  color: white !important;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.agoro-summary h4,
.agoro-info-summary h4 {
  margin: 0;
  font-weight: 300;
}

.agoro-summary .amount,
.agoro-info-summary .amount {
  font-size: 24px;
  font-weight: bold;
  margin-top: 5px;
}

/* Panel & hpanel border accents */
.hpanel.agoro-theme {
  border-color: var(--agoro-primary);
}

.panel-success.agoro-theme {
  border-color: var(--agoro-primary);
}

.panel-success.agoro-theme .panel-heading {
  background-color: var(--agoro-primary);
  border-color: var(--agoro-primary);
}

/* Modal headers */
.agoro-modal-header,
.modal-header.agoro-theme {
  background: linear-gradient(135deg, var(--agoro-primary) 0%, var(--agoro-primary-dark) 100%) !important;
  color: white !important;
}

.agoro-modal-header .close,
.modal-header.agoro-theme .close {
  color: white;
  opacity: 0.8;
}

.agoro-modal-header .close:hover,
.modal-header.agoro-theme .close:hover {
  opacity: 1;
}

/* Footer */
.agoro-footer,
footer.agoro-theme,
.footer.agoro-theme {
  background-color: #F0F0F0;
  color: var(--agoro-primary);
}

/* Login theme helpers */
.agoro-login-btn {
  background: var(--agoro-primary);
  border-color: var(--agoro-primary);
  color: white;
}

.agoro-login-btn:hover {
  background: var(--agoro-primary-dark);
  border-color: var(--agoro-primary-dark);
}

.agoro-text {
  color: var(--agoro-primary);
}

.agoro-bg {
  background-color: var(--agoro-primary);
  color: white;
}

.agoro-gradient {
  background: linear-gradient(135deg, var(--agoro-primary) 0%, var(--agoro-primary-dark) 100%);
  color: white;
}

/* Side menu active state */
#side-menu li.active > a {
  color: var(--agoro-primary);
  border-left-color: var(--agoro-primary);
}

/* Color line in header */
.color-line {
  background: var(--agoro-primary) !important;
}

/* Badges */
.badge-success,
.badge-primary {
  background-color: var(--agoro-primary) !important;
}

/* Labels */
.label-success,
.label-primary {
  background-color: var(--agoro-primary) !important;
}

/* Progress bars */
.progress-bar-success,
.progress-bar-primary {
  background-color: var(--agoro-primary) !important;
}

/* Checkboxes / radios via accent color */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--agoro-primary);
}

/* Select2 highlight override */
.select2-results .select2-highlighted {
  background: var(--agoro-primary-pale);
  color: #000;
}

/* Homer template theme colour overrides */
.btn-primary2 {
  background-color: var(--agoro-primary) !important;
  border-color: var(--agoro-primary) !important;
  color: #fff !important;
}

.btn-primary2:hover,
.btn-primary2:focus,
.btn-primary2:active {
  background-color: var(--agoro-primary-dark) !important;
  border-color: var(--agoro-primary-dark) !important;
}

.hpanel.hviolet .panel-body,
.hpanel.hred .panel-body {
  border-top-color: var(--agoro-primary) !important;
}

.hpanel.hbgviolet .panel-body,
.hpanel.hbgred .panel-body {
  background: var(--agoro-primary) !important;
  color: #fff !important;
}

.h-bg-violet,
.h-bg-red {
  background: var(--agoro-primary) !important;
}

.text-primary-2 {
  color: var(--agoro-primary) !important;
}

/* Header rainbow gradient -> Agoro red gradient */
.color-line {
  background-image: -webkit-linear-gradient(left, var(--agoro-primary), var(--agoro-primary-dark)) !important;
  background-image: -moz-linear-gradient(left, var(--agoro-primary), var(--agoro-primary-dark)) !important;
  background-image: -ms-linear-gradient(left, var(--agoro-primary), var(--agoro-primary-dark)) !important;
  background-image: linear-gradient(to right, var(--agoro-primary), var(--agoro-primary-dark)) !important;
  background-size: 100% 6px !important;
}

/* Danger/error states use Agoro red */
.btn-danger {
  background-color: var(--agoro-primary) !important;
  border-color: var(--agoro-primary) !important;
  color: #fff !important;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
  background-color: var(--agoro-primary-dark) !important;
  border-color: var(--agoro-primary-dark) !important;
}

.badge.badge-danger,
.checkbox-danger input[type="checkbox"]:checked + label::before,
.radio-danger input[type="radio"] + label::after,
.radio-danger input[type="radio"]:checked + label::before,
.radio-danger input[type="radio"]:checked + label::after,
.progress-bar-danger {
  background-color: var(--agoro-primary) !important;
  border-color: var(--agoro-primary) !important;
}

.progress-bar-danger {
  border-right-color: var(--agoro-primary-dark) !important;
}

.form-control.error,
label span.error,
.text-danger {
  color: var(--agoro-primary) !important;
}

.form-control.error {
  border-color: var(--agoro-primary) !important;
}

/* Homer notify/info keep blue for semantics, but success uses Agoro red */
.homer-notify.alert-success {
  border-left-color: var(--agoro-primary) !important;
}
