@import url("./custom/new_product.css");
@import url("./custom/login.css");
@import url("./custom/contact.css");
@import url("./custom/products.css");
@import url("./custom/header.css");
@import url("./custom/footer.css");
@import url("./custom/carousel.css");
@import url("./custom/cart.css");
@import url("./custom/terms.css");
@import url("./custom/brands.css");
@import url("./custom/filters.css");

:root {
  --color-background: #001d3d;
  --color-foreground: #012a4af2;
  
  --color-highlight: #BD2F30;
  --color-highlight-lighter: #FF3B3CE5;
  --color-highlight-darker: #841D1E;
  
  --color-accent: #E3AE4F;
  --color-accent-lighter: #FFC967;
  --color-accent-darker: #D0A14F;
  
  --color-text: white;
  --color-text-reverse: black;
  --color-text-muted: #8f8f8f;
  
  --border-color: black;
  --border-color-dropdown: rgba(0,0,0,.25);
  --border-color-hover: #E3AE4F;
  --border-radius: 5px;
  
  --transition-hover: 0.25s ease-in;
  --transition-hover-fast: 0.15s ease-in;
}

body {
  background: var(--color-foreground);
}

.h1, .h2, .h3, .h4, body {
  color: var(--color-accent);
}

a {
  color: var(--color-accent);
  transition: all var(--transition-hover);
}

a:hover {
  color: var(--color-highlight);
}

label {
  color: var(--color-accent);
}

.close {
  text-shadow: none;
}

.card {
  border: 3px solid var(--color-accent);
  border-radius: var(--border-radius);
  background: var(--color-foreground);
}

#wrapper {
  background: var(--color-foreground);
}

.page-header {
  text-align: center;
  padding-bottom: 0.5rem;
}

/* Modification communes à tous les formulaires */

.form-control {
  background: var(--color-foreground);
  color: var(--color-text);
  transition: all var(--transition-hover-fast);
  border: 2px solid var(--color-accent);
  outline: 1px solid transparent;
  border-radius: var(--border-radius);
}

form .form-control-label {
  text-align: left;
  color: var(--color-highlight);
  font-size: 1rem;
}

.form-footer .btn.btn-primary:hover, .btn-primary:hover {
  background: var(--color-highlight-lighter);
}

.btn.disabled, .btn.disabled:hover {
  background: var(--color-highlight-darker);
}

.btn-primary, .form-footer .btn.btn-primary {
  min-width: 40%;
  border-radius: var(--border-radius);
  background: var(--color-accent);
  transition: all var(--transition-hover);
}

.form-footer .btn.btn-primary:hover, .btn-primary:hover,  .btn.btn-primary:hover {
  color: var(--color-text-reverse);
}

.btn.btn-secondary, .modal-cancel.btn.btn-secondary, .group-span-filestyle .btn-default, .btn-comment {
  border-radius: var(--border-radius);
  color: var(--color-highlight);
  border: 2px solid var(--color-highlight);
  background: var(--color-text);
  transition: all var(--transition-hover);
}

.btn.btn-secondary:hover, .btn-comment:hover {
  background: var(--color-highlight);
  color: var(--color-text);
  border-color: var(--color-text);
  opacity: 0.9;
}

.custom-checkbox input[type="checkbox"] + span {
  border-color: var(--color-highlight);
  border-radius: var(--border-radius);
  cursor: pointer;
}

.custom-checkbox input[type="checkbox"] + span .checkbox-checked {
  color: var(--color-text);
  background: var(--color-highlight);
  border-radius: var(--border-radius);
}

.container {
  width: auto;
}

@media (max-width: 767px) {
  #main {
    padding: 0 10px;
  }
  
  .btn.btn-secondary, #products .up .btn-secondary {
    background: var(--color-highlight);
    color: var(--color-text);
  }
  
  #wrapper .breadcrumb {
    padding: 0.8rem 0;
  }
}